/*서브페이지 푸터*/
.sub_pg footer {background:#2a2a2a;}

/*서브 가로값*/
.skin17 .width_v {width:1440px;}

/*모바일 페이지 메뉴*/
.skin17 .page_location {display:none;}

/*ect메뉴*/
.skin17 .etc {border:1px solid #ddd; padding:20px; line-height:26px;}

/*페이징*/
.skin17 .paging {display:flex; justify-content:center;}
.skin17 .paging ul {display:flex;}
.skin17 .paging ul li {margin:0 2px;}
.skin17 .paging ul li.next i,
.skin17 .paging ul li.nnext i,
.skin17 .paging ul li.pprev i,
.skin17 .paging ul li.prev i {margin:0;}
.skin17 .paging ul li.on a {background-color:var(--bg-color); color:var(--y-txt-color); border-color:var(--line-color);}
.skin17 .paging ul li a {display:flex; justify-content:center; align-items:center; border:1px solid #d5d5d5; width:30px; height:30px; line-height:30px; font-size:14px; color:#777;}
.skin17 .paging ul li.pprev a i,
.skin17 .paging ul li.nnext a i {position:relative; right:5px;letter-spacing:-10px; font-weight:bold;}

/*텍스트스타일*/
.skin17 .principal_con h4 {font-size:23px; font-weight:700; color:#111111; margin-bottom:20px; line-height:34px;}
.skin17 .principal_con h4::before {position:relative; top:1px; content:""; display:inline-block; min-width:20px; height:24px; background:url("../images/ic/h4_icon.png") left center no-repeat; margin-right:6px;}
.skin17 .principal_con h5 {font-size:20px; font-weight:600; color:#333; margin-left:10px; margin-bottom:20px; line-height:32px;}
.skin17 .principal_con h5::before {position:relative; top:0px; content:""; display:inline-block; min-width:5px; height:17px; background:url("../images/ic/h5_icon.png") left center no-repeat; margin-right:8px;}
.skin17 .principal_con h6 {font-size:18px; font-weight:550;  color:#555555; margin-left:25px; margin-bottom:20px; line-height:28px;}
.skin17 .principal_con h6::before {position:relative; top:-5px; content:""; display:inline-block; min-width:5px; height:2px; margin-right:6px; background-color:#545ba4; background-position:left center; }
/*.principal_con p {font-size:16px; font-weight:500; line-height:24px;}*/

/*서브비주얼*/
.skin17 header {position:;}
.skin17 .top_visual {width:100%; height:420px; background-color:#555; background-size:115%; background-repeat:no-repeat; background-position:center top; transition:0.5s; background-attachment:fixed;}
.skin17 .top_visual.on_sub_visual {transition:background 4s; transition-delay:0.1s; background-size:100%;}
.skin17 .top_txt {position:relative; display:flex; flex-direction:column; flex-wrap:wrap; justify-content:center; height:100%;  margin:0 auto; padding-top:40px }
.skin17 .top_txt h2 {width:100%; color:#fff; font-size:46px; text-align:center; font-weight:500; }
.skin17 .top_txt h2 span {position:relative; display:inline-block;}
.skin17 .top_txt h2 span::before {content:""; display:block; width:100%; height:2px; position:absolute; bottom:-15px; transform:translate(0%, -50%); background:#fff; animation:sub_title_bar 0.8s 0.2s forwards; opacity:0;}
.skin17 .top_txt p {width:100%; color:#fff; font-size:18px; text-align:center; margin-top:20px; opacity:0.8;}
.skin17 .top_txt .sub_location {display:flex; justify-content:center; width:100%; margin:40px auto 0 auto; opacity:0.75;}
.skin17 .top_txt .sub_location li {display:flex; align-items:center; color:#fff; font-size:14px;}
.skin17 .top_txt .sub_location li::after {content:">"; margin:0 15px;}
.skin17 .top_txt .sub_location li:last-child::after {display:none;}
.skin17 .top_txt .sub_location li a {color:#fff;}
.skin17 .top_txt .sub_location li i {vertical-align:bottom}

@keyframes sub_title_bar {
 0% {width:1px; opacity:0;}
 100% {width:100%; opacity:1;}
}

/*서브컨텐츠*/
.skin17 .content h3 {width:100%; font-size:30px; text-align:left; font-weight:600; padding-bottom:25px; color:#222; border-bottom:1px solid #ddd; margin-bottom:30px;}
.skin17.t_menu .content {margin:50px auto 100px auto; }
.skin17.l_menu .content {margin:40px auto 100px auto; }

/*서브 top 메뉴*/
.skin17.t_menu .top_menu_wrap {margin:-30px auto 0 auto;}
.skin17.t_menu .top_menu {position:relative; display:flex; flex-wrap:wrap; justify-content:center; cursor:pointer;}
/*
.skin17.t_menu .top_menu .m_top_menu {position:relative; display:none; width:100%; height:60px; line-height:60px; background-color:var(--bg-color); color:var(--y-txt-color); font-size:18px; text-align:center; }
.skin17.t_menu .top_menu .m_top_menu span {position:absolute; right:2%; }
.skin17.t_menu .top_menu .m_top_menu  i {vertical-align:middle;}
*/
.skin17.t_menu .top_menu ul {display:flex; align-items:center; box-shadow:0 0 8px rgba(0,0,0,0.3); background:#fff; padding:0; overflow:hidden;  z-index:99; }
.skin17.t_menu .top_menu ul li {width:100%;text-align:center; border-right:1px solid #dddddd; }
.skin17.t_menu .top_menu ul li:last-child {border-right:0;}
.skin17.t_menu .top_menu ul li a::after {content:attr(title); display:block; visibility: hidden; font-weight: 600;}
.skin17.t_menu .top_menu ul li.on {border-right:0}
.skin17.t_menu .top_menu ul li a:hover {font-weight:600}
.skin17.t_menu .top_menu ul li a {display:block; height:60px; line-height:60px; color:#666666; font-size:17px; padding:0 5%;}
.skin17.t_menu .top_menu ul li.on a {background-color:var(--bg-color); color:var(--y-txt-color);}

/*서브 left 메뉴*/
.skin17.l_menu .content {display:flex;} 
.skin17.l_menu .left_menu {width:220px; min-width:220px; margin-right:5%; margin-top:0px;}
.skin17.l_menu .left_menu .title {display:flex; justify-content:left; align-items:center; width:100%; height:70px; font-size:24px; font-weight:700; color:var(--menu-txt-color); ; border-bottom:3px solid; border-bottom-color:var(--bg-color); margin-bottom:5px; }
.skin17.l_menu .left_menu nav ul {width:100%; background:#fff; margin-bottom:10px;}
.skin17.l_menu .left_menu nav ul li {}
.skin17.l_menu .left_menu nav ul li a {position:relative; display:block; font-size:17px; color:#555; line-height:65px;  font-weight:500; border-bottom:1px solid #ddd; padding-left:5px;}
.skin17.l_menu .left_menu nav ul li a::before {position:relative; content:""; display:inline-block; width:7px; height:3px; background-color:transparent; top:-5px; left:0; margin-right:8px;}
.skin17.l_menu .left_menu nav ul li:last-child a {border-bottom:0;}
.skin17.l_menu .left_menu nav ul li a span {display:none;}
.skin17.l_menu .left_menu nav ul li.on a::before {background-color:#222; }
.skin17.l_menu .left_menu nav ul li.on a span {position:absolute; right:0; top:50%; transform:translate(0, -50%); display:inline-block; width:16px; height:16px; color:#fff; font-size:12px; text-align:center;}
.skin17.l_menu .left_menu nav ul li.on a span i {position:relative; left:1px; line-height:16px; }
.skin17.l_menu .left_menu nav ul li.on a {color:#222; font-weight:700}

/*skin17 개별 css*/
.product .gallery_skin li .img {background:#fff;}
.product li .img img {width:auto;}
.product_view .p_top .img img {width:auto;}


/****************************@@@@@@@@@@ 1660px 이하 ****************************/
@media all and (max-width:1660px) {
/*서브 가로값*/
.skin17 .width_v {width:100%; padding:0 30px;}
/*사이드퀵으로 인핸 서브 컨텐츠 width값 조정*/
.sub .width_v.content {width:calc(100% - 70px); margin:40px auto 100px 0;}


}

/****************************@@@@@@@@@@ 1460px 이하 ****************************/
@media all and (max-width:1460px) {
}

/****************************@@@@@@@@@@ 1280px 이하 ****************************/
@media all and (max-width:1280px) {

/*서브 top 메뉴*/
.skin17.t_menu .top_menu_wrap {padding:0 30px; }
.skin17.t_menu .top_menu_wrap {margin:-30px auto 0 auto}
.skin17.t_menu .top_menu ul li a {line-height:60px; height:60px;}

/*서브비주얼*/
.skin17 .top_txt {padding:20px 30px 0 30px; }
}

/****************************@@@@@@@@@@ 1023px 이하 / 태블릿@@@@@@@@@@****************************/
@media all and (max-width:1023px) {
/*사이드퀵으로 인핸 서브 컨텐츠 width값 조정*/
.sub .width_v.content {width:100%; margin:40px auto 100px auto;}

/*서브비주얼*/
.skin17 .top_visual {height:300px;}
.skin17 .top_txt h2 {font-size:55px;}
.skin17 .top_txt .sub_location {display:none;}


/*모바일 페이지 메뉴*/
.skin17 .page_location {display:block; }
.skin17 .page_location ul {display:flex; flex-wrap:wrap; justify-content:left; border-bottom:1px solid #e5e5e5; margin-top:15px;}
.skin17 .page_location ul li {margin:0px 3.5%; }
.skin17 .page_location ul li a {display:block; line-height:55px;  font-size:18px; color:#666; letter-spacing:-0.5px}
.skin17 .page_location ul li.on a {position:relative; font-weight:700; color:#222;}
.skin17 .page_location ul li.on a::before {content:""; position:absolute; bottom:-1px; display:block; width:100%; height:2px; background:var(--bg-color); z-index:1}


/*서브 left 메뉴*/
.skin17.l_menu .left_menu {display:none;}

/*서브 top 메뉴*/
.skin17.t_menu .top_menu_wrap {display:none;}
.skin17.t_menu .top_menu ul {display:none; position:absolute; top:60px; flex-wrap:wrap;}

/*서브컨텐츠*/
.skin17.t_menu .content {margin:40px auto 100px auto}
.skin17.l_menu .content {margin:40px auto 100px auto; }

}

/****************************@@@@@@@@@@ 768px 이하 / 태블릿미니@@@@@@@@@@****************************/
@media all and (max-width:768px) {
/*서브 가로값*/
.skin17 .width_v {padding:0 20px;}

/*서브컨텐츠*/
.skin17 .content h3 {font-size:25px; margin-bottom:20px; padding-bottom:20px;}

/*모바일 페이지 메뉴*/
.skin17 .page_location ul li a {line-height:45px;  font-size:16px; }


/*서브비주얼*/
.skin17 .top_txt {padding:30px 20px 0 20px}
.skin17 .top_visual {height:250px; background-attachment:initial; }
.skin17 .top_visual.on_sub_visual {background-size:cover;}
.skin17 .top_txt h2 {font-size:40px;}
.skin17 .top_txt .sub_location {margin:20px auto 0 auto;}
.skin17 .top_txt .sub_location li {font-size:13px;}

/*서브 top 메뉴*/
.skin17.t_menu .top_menu ul {top:50px;}
.skin17.t_menu .top_menu ul li a {line-height:50px; height:50px; font-size:16px;}
}


/****************************@@@@@@@@@@ 530px 이하 / 모바일@@@@@@@@@@****************************/
@media all and (max-width:530px) {
/*서브 가로값*/
.skin17 .width_v  {padding:0 10px; }

/*서브비주얼*/
.skin17 .top_visual {height:200px;}
.skin17 .top_txt {padding:30px 10px 0 10px}
.skin17 .top_txt h2 {text-align:center; font-size:30px;}
.skin17 .top_txt .sub_location {justify-content:center; }

/*서브 top 메뉴*/
.skin17.t_menu .top_menu_wrap {padding:0 10px; margin:-20px auto 0 auto}
.skin17.t_menu .top_menu .m_top_menu { line-height:40px; height:40px; font-size:15px;}
.skin17.t_menu .top_menu ul {top:40px;}
.skin17.t_menu .top_menu ul li a {padding:0 10px; line-height:40px; height:40px; font-size:15px;}

/*서브컨텐츠*/
.skin17 .content h3 {font-size:20px;}
.skin17.t_menu .content {margin:35px auto 100px auto;}
.skin17.l_menu .content {margin:35px auto 100px auto; }

}

/****************************@@@@@@@@@@ 380px 이하@@@@@@@@@@****************************/
@media all and (max-width:380px) {
}