@charset "utf-8";

/* l-position */

.l-position {height:51px; border-bottom:1px solid #eff0f0;}
.l-position a {text-decoration:none;}
.l-position .wrap {}
.l-position .wrap li {position:relative; margin-left:12px; display:inline-block; vertical-align:middle;}
.l-position .wrap li:first-child {margin-left:0;}
.l-position .text {position:relative; top:1px;}
.l-position .text {line-height:50px; font-size:12px; color:#666666; font-family:dotum,'돋움',sans-serif;}
.l-position .icon-home {position:relative; display:inline-block; width:16px; height:17px;}
.l-position .icon-home:before {display:block; content:''; position:absolute; left:0; top:0; width:16px; height:17px; background-position:0px -75px; opacity:0.6;}
.l-position .icon-home:hover:before {background-position-y:-125px; opacity:1;}
.l-position .icon-arrow {position:relative; display:inline-block; width:10px; height:17px;}
.l-position .icon-arrow:before {display:block; content:''; position:absolute; left:0; top:0; width:10px; height:17px; background-position:-25px -75px; opacity:0.2;}

.l-position .icon-arrow-d {position:relative; padding-right:27px; cursor:pointer;}
.l-position .icon-arrow-d:before {display:block; content:''; position:absolute; right:0; top:calc(50% - 9px); width:15px; height:15px; background-position:-75px -75px;}
.l-position .icon-arrow-d:hover {color:#000000;}
.l-position .icon-arrow-d:hover:before {background-position-y:-100px;}
.l-position .icon-arrow-d.on:before {background-position-y:-125px;}

.l-position .icon-arrow-d2 {position:relative; padding-right:18px; cursor:pointer;}
.l-position .icon-arrow-d2:before {display:block; content:''; position:absolute; right:0; top:calc(50% - 9px); width:15px; height:15px; background-position:-325px -75px;}
.l-position .icon-arrow-d2:hover {color:#000000;}
.l-position .icon-arrow-d2:hover:before {background-position-y:-100px;}
.l-position .icon-arrow-d2.on:before {background-position-y:-125px;}

.l-position .layer {z-index:10; display:none; position:absolute; left:-15px; top:40px; width:198px; border:1px solid #888888; background-color:#ffffff;}
.l-position .layer a {display:block; padding:8px 15px;}
.l-position .layer a {line-height:14px; font-size:12px; color:#666666; font-family:dotum,'돋움',sans-serif;}
.l-position .layer a:hover {color:#ffffff !important;}
.l-position .layer.on {display:block;} 

.l-position .side {position:absolute; right:0; top:10px;}
.l-position .side ul {display:inline-block; vertical-align:middle;}
.l-position .side li {position:relative; display:inline-block; vertical-align:middle;}

.l-position .share {padding-left:16px; position:relative; display:inline-block; vertical-align:middle;}
.l-position .share {line-height:25px; font-size:11px; color:#666666; font-family:dotum,'돋움',sans-serif;}
.l-position .share:before {display:block; content:''; position:absolute; left:0; top:6px; width:12px; height:11px; background-position:-50px -175px; opacity:0.6;}

.l-position .btn-share {margin-left:10px;}
.l-position .btn-share li {margin-left:2px; cursor:pointer;}
.l-position .btn-share li:first-child {margin-left:0;}
.l-position .btn-share li a {display:block; width:25px; height:25px;}
.l-position .btn-share li a:before {opacity:0.2;}
.l-position .btn-share li a:hover:before {opacity:1; background-position-y:-450px;}

.l-position .share-kakaotalk:before,
.l-position .share-line:before,
.l-position .share-kakaostory:before,
.l-position .share-twitter:before,
.l-position .share-facebook:before {display:block; content:''; position:absolute; left:0; top:0; width:25px; height:25px; background-position-y:-400px;}
.l-position .share-kakaotalk:before {background-position-x:0px;}
.l-position .share-line:before {background-position-x:-25px;}
.l-position .share-kakaostory:before {background-position-x:-50px;}
.l-position .share-twitter:before {background-position-x:-75px;}
.l-position .share-facebook:before {background-position-x:-100px;}

.l-position .zoom {display:block; position:relative; margin-left:10px; padding:7px 7px 8px 25px; border:1px solid #e7e7e7; background-color:#ffffff; border-radius:3px; cursor:pointer;}
.l-position .zoom {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:14px; font-size:12px; color:#666666;}
.l-position .zoom:before {display:block; content:''; position:absolute; left:7px; top:8px; width:15px; height:15px; background-position:-75px -175px; opacity:0.6;}
.l-position .zoom:hover {border:1px solid #bababa; color:#000000;}
.l-position .zoom:hover:before {opacity:1;}

/* cs-search */

.cs-search {padding:70px 0; margin:0 auto; position:relative; display:table; width:640px;}
.cs-search a {text-decoration:none;}
.cs-search form .input {transition:border 0s; position:relative; border:0; padding:0 55px 14px 0;}
.cs-search form .input:before {display:block; content:''; position:absolute; left:0; top:0; width:calc(100% - 2px); height:calc(100% - 2px); border-bottom:4px solid #000000;}
.cs-search form .input .title,
.cs-search form .input input {display:inline-block; vertical-align:top;}
.cs-search form .input .title {position:relative;}
.cs-search form .input .title {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:40px; font-size:36px; color:#000000;}
.cs-search form .input .icon-q {z-index:2; display:block; position:absolute; right:10px; bottom:15px; width:35px; height:35px; cursor:pointer;}
.cs-search form .input .icon-q:before {display:block; content:''; position:absolute; left:0; top:0; width:35px; height:35px; background-position:-50px -250px;}
.cs-search form .input input {margin-left:15px; z-index:1; position:relative; width:300px; height:40px; border:0; background:transparent;}
.cs-search form .input input {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:40px; font-size:18px; color:#acacac;}
.cs-search form .input.focus:before {border-bottom:4px solid #000000;}
.cs-search form .input .icon-q:hover:before,
.cs-search form .input.focus .icon-q:before,
.cs-search form .input.value .icon-q:before {opacity:1; background-position-y:-300px;}
.cs-search form .input.value input,
.cs-search form .input.focus input {color:#000000;}
.cs-search .result {position:relative; margin-top:20px;}
.cs-search .result .text {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:16px; font-size:14px; color:#464646;}
.cs-search .result .text span {font-family: var(--family-bold);font-weight: var(--weight-bold); color:#000000;}
.cs-search .result .btn,
.cs-search .result .text2 {display:inline-block; vertical-align:middle;}
.cs-search .result .btn {position:relative; padding:0 0 0 30px;}
.cs-search .result .btn:before {display:block; content:''; position:absolute; left:0; top:-10px; width:20px; height:20px; background-position:-125px -175px;}
.cs-search .result .btn:hover:before {background-position-y:-200px;}
.cs-search .result .text2 {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:16px; font-size:14px; color:#464646;}
.cs-search .result .text2 span {font-family: var(--family-bold);font-weight: var(--weight-bold);}
.cs-search .result .side {position:absolute; right:3px; top:0;}
.cs-search .result .side li {margin-left:20px; position:relative; display:inline-block; vertical-align:middle;}
.cs-search .result .side li:before {display:block; content:''; position:absolute; left:-10px; top:1px; width:0; height:13px; border-left:1px solid #e7e7e7;}
.cs-search .result .side li:first-child {padding-left:0; margin-left:0;}
.cs-search .result .side li:first-child:before {display:none;}
.cs-search .result .side a {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:16px; font-size:14px; color:#464646;}
.cs-search .result .side a:hover {text-decoration:underline;}

/* cs-ct */

.cs-ct .title {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:22px; font-size:20px; color:#464646;}
.cs-ct .block {display:table; width:100%; table-layout:fixed; margin-top:10px; position:relative;}
.cs-ct .block:before {display:block; content:''; position:absolute; left:0px; top:0px; width:calc(100% - 1px); height:calc(100% - 1px); background-color:#ffffff; border:1px solid #eff0f0;}
.cs-ct ul {position:relative; left:1px; top:1px;}
.cs-ct li {margin:-1px 0 0 -1px; position:relative; display:inline-block; vertical-align:middle; border:1px solid #eff0f0; height:58px;}
.cs-ct li:before {transition:opacity 0.2s; z-index:2; display:block; content:''; position:absolute; left:0px; bottom:0px; width:100%; height:0; border-bottom:3px solid #ffffff; opacity:0;}
.cs-ct li:after {z-index:3; display:none; content:''; position:absolute; left:-1px; top:-1px; width:100%; height:100%; border:1px solid #ffffff;}
.cs-ct li a {z-index:4; transition:top 0.2s; top:0; padding:0 10px; text-decoration:none; position:relative; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:break-all; text-align:center;}
.cs-ct li a {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:58px; font-size:16px; color:#464646;}
.cs-ct li:hover:before {opacity:1;}
.cs-ct li:hover a {top:-2px; font-family: var(--family-bold);font-weight: var(--weight-bold);}
.cs-ct li.focus:after {display:block;}
.cs-ct li.focus a {color:#ffffff;}
.cs-ct li.focus:hover a {color:#ffffff !important;}
.cs-ct.count1 li {width:calc(50% - 1px);}
.cs-ct.count2 li {width:calc(33.333% - 1px);}
.cs-ct.count3 li {width:calc(25% - 1px);}
.cs-ct.count4 li {width:calc(20% - 1px);}
.cs-ct.count5 li {width:calc(33.333% - 1px);}
.cs-ct.count6 li,
.cs-ct.count7 li {width:calc(25% - 1px);}
.cs-ct.count8 li,
.cs-ct.count9 li {width:calc(20% - 1px);}

/* cs-not */

.cs-not {padding:70px 0 70px 0; background-color:#ffffff; border-top:1px solid #eff0f0; border-bottom:1px solid #eff0f0;}
.cs-not .icon-not {position:relative; width:160px; height:160px; margin:0 auto; background-position:0 -100px;}
.cs-not p {margin-top:30px; text-align:center;}
.cs-not p {font-family: var(--family-bold);font-weight: var(--weight-bold); line-height:26px; font-size:24px; color:#000000;}

/* cs-page */

.cs-page {position:relative; padding-top:30px}
.cs-page .paging {margin:0 auto;}
.cs-page .paging a {text-decoration:none; display:block; text-align:center; cursor:pointer;}
.cs-page .paging a {font-family: var(--family-regular);font-weight: var(--weight-regular); line-height:40px; font-size:16px; color:#555555;}
.cs-page .paging a.prev1,
.cs-page .paging a.prev2,
.cs-page .paging a.next1,
.cs-page .paging a.next2 {position:relative; width:40px; height:40px;}
.cs-page .paging a.prev1:before,
.cs-page .paging a.prev2:before,
.cs-page .paging a.next1:before,
.cs-page .paging a.next2:before {display:block; content:''; position:absolute; left:0; top:0; width:40px; height:40px; background-size:1500px 2500px; opacity:0.2;}
.cs-page .paging a.prev1:before {background-position-x:-300px;}
.cs-page .paging a.prev2:before {background-position-x:-200px;}
.cs-page .paging a.next1:before {background-position-x:-250px;}
.cs-page .paging a.next2:before {background-position-x:-350px;}
.cs-page .paging a.prev1:hover:before,
.cs-page .paging a.prev2:hover:before,
.cs-page .paging a.next1:hover:before,
.cs-page .paging a.next2:hover:before {opacity:1;}
.cs-page .paging .on,
.cs-page .paging .off {margin-left:4px; padding:0 15px 0 15px;}
.cs-page .paging .number1 a {margin-left:0px;}
.cs-page .paging .on {font-family: var(--family-bold);font-weight: var(--weight-bold); color:#ffffff;}
.cs-page .paging .off {background-color:#ffffff; color:#909090;}
.cs-page .paging .off:hover {font-family: var(--family-bold);font-weight: var(--weight-bold); color:#000000;}

.cs-footer {height:70px;}