* {
    box-sizing:none;
}
.section1ot {
    width:60%;
    margin:0 auto;
}
.setTable {
    width:100%;
    font-size:14px;
    color:#111;
    border-collapse: collapse;
}
.tableHead {
    border-top:2px solid #111;
    border-bottom:2px solid #ddd;
    height:50px;
}
.tableBody {
    border-bottom:1px solid #ddd;
    height:40px;
}
.tableTitle {
    border-top:2px solid #111;
    border-bottom:1px solid #ddd;
    border-left: none;
    border-right: none;
    height:50px;
}
.tableContents {
    border:none;
    height:auto;
}
.mes {
    height:70px;
    width:100%;
}
.mesL { text-align: left; color:#666; font-weight:bold; vertical-align:top; font-size:14px; padding-top:10px;}
.mesR { text-align: right; color:#666; vertical-align: top; font-size:14px; padding-top:10px;font-weight: normal;}

.tw1 { width:10%;height:40px;}
.tw2 { width:55%;}
.tw3 { width:15%;}
.tw4 { width:10%;}
.tw5 { width:10%;}

.twV { width:100%;}
.tw1V { width:25%;}
.tw1V75 { width:74%;}
.tw2V { width:25%;}
.tw3V { width:25%;}
.tw4V { width:25%;}

.submitButton {
    height:40px;
    width:100px;
    background-color:#4080ff;
    color:#fff;
    border:none;
}
.writeButton {
    height:40px;
    width:100px;
    background-color:#408020;
    color:#fff;
    border:none;
}
.modifyButton {
    height:40px;
    width:100px;
    background-color:#ffc020;
    color:#fff;
    border:none;
}
.listButton {
    height:40px;
    width:100px;
    background-color:#8c8c8c;
    color:#fff;
    border:none;
}
.cancelButton {
    height:40px;
    width:100px;
    background-color:#ff8020;
    color:#fff;
    border:none;
}

.slider-for {
    max-width: 500px; /* 최대 너비를 제한 */
    margin: 0 auto; /* 가운데 정렬 */
}
.slider-for img {
    width:100%;
}
/* 네비게이션 위아래 20px 공간 추가 */
.slider-nav {
    max-width: 500px; /* 최대 너비를 제한 */
    margin: 20px auto; 
/*    margin: 20px 0; */
}


/* 네비게이션 이미지 좌우에 10px 여백 추가 */
.slider-nav .slick-slide {
    padding: 0 4px; /* 좌우에 10px 여백 추가 */
}

/* 선택된 네비게이션 이미지에 4px 보더 추가 */
.slider-nav .slick-current img {
    border: 4px solid #0000ff; /* 원하는 색상으로 변경 가능 */
}

.slick-prev:before, .slick-next:before {
    color: #000; /* 화살표 색상을 검정으로 설정 (필요에 따라 조정 가능) */
}

/* 커스텀 화살표에 대한 추가 스타일 설정 */
.slick-prev, .slick-next {
    font-size: 28px;
    z-index: 1; /* 화살표가 이미지 위에 오도록 설정 */
    top: 40%;
    transform: translateY(-40%);
    color:black;
    border-radius: 50%;
    padding: 0px;
    content: none !important;  
}

.slick-prev:hover, .slick-next:hover {
    color:rgba(1,1,1,0.6);
}

.slick-prev {
    left:  10px;
}
.slick-next {
    right: 20px;
}


@media only screen and (max-width: 1500px) {
    .section1ot { width:80%; }
}    

@media only screen and (max-width: 1200px) {
    .section1ot { width:80%; }
}   

@media only screen and (max-width: 1100px) {
    .section1ot { width:90%; }
}    
@media only screen and (max-width: 900px) {
    .pc {display: none !important; }
    .mo {display: block !important; }
    .section1ot { width:100%; }
}   
@media only screen and (max-width: 768px) {
    .section1ot { width:100%; }
    .setTable { font-size:12px; }    
    .tw1 { width:10%;}
    .tw2 { width:40%;}
    .tw3 { width:20%;}
    .tw4 { width:20%;}
    .tw5 { width:10%;}
    .slider-for { max-width: 90vw; }
    .slider-nav { max-width: 90vw; }
}   

@media only screen and (max-width: 600px) {
    .setTable { font-size:12px; }    
    .slider-for { max-width: 90vw; }
    .slider-nav { max-width: 90vw; }
}   

@media only screen and (max-width: 500px) {
    .setTable { font-size:10px; }    
    .slider-for { max-width: 90vw; }
    .slider-nav { max-width: 90vw; }
}   

@media only screen and (max-width: 400px) {
    .setTable { font-size:10px; }    
    .slider-for { max-width: 90vw; }
    .slider-nav { max-width: 90vw; }
}