@charset "utf-8";

/* 서브메뉴 */
.side .depth2,
.side .depth2 .depth2_li{transition-duration:0.25s; transition-timing-function:ease-in-out;}
.side{display:none;float:left; position:relative; z-index:10; width:256px; font-size:0; line-height:0;}

/* 서브타이틀 */
.side .side_title{position:relative; height:165px; margin-top:270px; background:url('../images/sub/side_bg.jpg') no-repeat; text-align:center;}
.side .side_title:before{display:block; position:absolute; bottom:100%; left:20px; width:16px; height:68px; background:url('../images/sub/side_sprite.png') no-repeat left top / 100% 155.88%; content:''; transform:translateY(50%);}
.side .side_title:after{display:inline-block; height:100%; vertical-align:middle; content:'';}
.side .side_title span{display:inline-block; position:relative; vertical-align:middle; color:#fff; font-size:30px; line-height:35px; font-weight:600;}

/* 1차메뉴 */
.side .depth1 .depth1_ul{padding-top:1px;}
.side .depth1 .depth1_li{position:relative; width:100%; margin-top:-1px; vertical-align:top;}
.side .depth1 .depth1_text{display:block; position:relative; width:100%; padding:19px 30px 20px 20px; border:1px solid #d6d6d6; text-align:left; color:#555; font-size:20px; line-height:25px;}
/*.side .depth1 .depth1_text:before{display:none; position:absolute; top:0; bottom:0; right:25px; width:10px; height:17px; margin-top:auto; margin-bottom:auto; background:url('../images/sub/side_sprite.png') no-repeat left 80.41% / 106.66% 1177.77%; content:'';}*/
.side .depth1 .depth1_li.has:before{display:block; position:absolute; top:27px; right:19px; width:15px; height:9px; background:url('../images/sub/side_sprite.png') no-repeat left 80.41% / 106.66% 1177.77%; content:'';}

/* 활성화 */
.side .depth1 .depth1_li.active .depth1_text{background-color:#473f2f; border-color:#473f2f; color:#fff; font-weight:500;}
.side .depth1 .depth1_li.active .depth1_text:before{display:block;}
.side .depth1 .depth1_li.active.has:before{z-index:10; background-position:left 100%; background-size:106.66% 1177.77%;}

/* 3차 메뉴 */
.side .menu .depth2{transition-property:visibility,opacity,background-color;}
.side .menu .depth2_ul{padding-right:20px; padding-left:20px; transition-property:padding-top,padding-bottom;}
.side .menu .depth2_li{margin-top:0; transition-property:margin-top;}
.side .menu .depth2_text{display:block; position:relative; padding-left:11px; text-decoration:none; transition:none;}
.side .menu .depth2_text:before{visibility:hidden; opacity:0; display:none; position:absolute; top:10px; left:1px; width:3px; height:3px; background-color:#000; content:''; transition-property:visibility,opacity;}
.side .menu .depth2_text:hover{text-decoration:underline;}

/* 3차 메뉴 활성화 */
.side .menu .depth1_li.active .depth2{visibility:visible; opacity:1; background-color:#f8f8f8; border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6;}
.side .menu .depth1_li.active .depth2_ul{padding-top:28px; padding-bottom:28px;}
.side .menu .depth1_li.active .depth2_li{margin-top:17px;}
.side .menu .depth1_li.active .depth2_li:first-child{margin-top:0;}
.side .menu .depth1_li.active .depth2_text{color:#4f4635; font-size:17px; line-height:22px;}
.side .menu .depth1_li.active .depth2_li.active .depth2_text{color:#1A1A1A;}
.side .menu .depth1_li.active .depth2_li.active .depth2_text:before{background-color:#1A1A1A;}
.side .menu .depth1_li.active .depth2_li.has.active .depth2_text:after{height:6px;}
.side .menu .depth1_li.active .depth2_text:before{visibility:visible; opacity:1; display:block;}

/* 4차 메뉴 */
.side .menu .depth3,.side .menu .depth4{display:none}
@media all and (max-width:1000px){
    .side{display:none}
}

/* colgroup */
.colgroup{float:none; position:relative; width:100%;/*padding-right:75px;*/}
@media all and (max-width:1000px){
    .colgroup{padding-right:0;}
}


/* 서브헤드 */
.sub_head{position:relative; height:300px; margin-top:120px;}
.sub_head:before{display:block; position:absolute; top:0; left:50%; width:100vw; height:100%; background:url('../images/sub/sub_visual.jpg') no-repeat center center / cover; content:''; transform:translateX(-50%);background-size:cover;}
.sub_title{position:relative;margin-bottom:50px; font-family:'Pretendard',sans-serif; color:#282828; font-size:36px; line-height:1.35; font-weight:700; letter-spacing:-0.02em; text-align:center; word-break:keep-all;}
@media all and (max-width:1000px){
    .sub_head{height:240px; margin-left:0; margin-top:111px;}
    .sub_title{font-size:30px; line-height:27px;}
}
@media all and (max-width:800px){
    .sub_head{margin-top:142px;}

}
@media all and (max-width:640px){
    .sub_head{height:180px;}
}