@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* layout.css는 전체적인 스타일 정의 */

#wrapper {position:relative; overflow:hidden;}

.contain {position:relative; padding-left:15px; padding-right:15px; margin:0 auto; height:100%; letter-spacing:-.03em;}
#header .contain {max-width:1450px !important;}
#footer .contain {max-width:1450px !important;}
#main .contain {max-width:1450px;}
#sub .contain {max-width:1350px;}

/* header */
#header {position:fixed; top:0; left:0; width:100%; height:110px; z-index:90; letter-spacing:-.03em; background:#0a3e32; transition:all 0.6s;}
#header .sitelogo a {display:block; position:absolute; top:50%; left:50%; margin-top:-46px; margin-left:-85px; z-index:10;}

#header.active {transform:translateY(0);}
#header.hide {transform:translateY(-100%);}
html.sitemap-opened #header.hide {transform:translateY(0);}

#header .wrap {position:relative; width:100%; height:100%;}
#header .wrap {display:flex; justify-content:space-between; align-items:center;}

#header .nav ul {display:flex; align-items:center;}
#header .nav ul li {padding-left:12px;}
#header .nav ul li a.search {width:30px; height:30px; background:url('../img/layout/search-icon-w.png') no-repeat; background-size:cover; display:block; font-size:0; transition:all 0.2s;}
#header .nav ul li a.search:hover {filter:drop-shadow(2px 2px 2px black);}
html.search-opened #header .nav ul li a.search {filter:drop-shadow(2px 2px 2px black);}
#header .nav ul li a.lang {display:block; font-size:18px; line-height:40px; color:#fff; position:relative;}
#header .nav ul li a.lang {padding-left:25px; font-weight:600;}
#header .nav ul li a.lang:before {content:''; width:16px; height:16px; background:url('../img/layout/lang-icon.png') no-repeat; background-size:cover; position:absolute; left:0; top:50%; margin-top:-8px; transition:all 0.3s;}
#header .nav ul li a.lang:hover:before {left:5px;}

#header .sitemap-btn {position:relative; width:26px; height:26px; overflow:hidden; font-size:0;}
#header .sitemap-btn span {background:#fff; position:absolute; left:0; height:2px; width:100%; transition:all 0.6s;}
#header .sitemap-btn span.top {top:4px;}
#header .sitemap-btn span.bot {bottom:4px;}
#header .sitemap-btn span.mid {width:20px; top:50%; margin-top:-1px;}
#header .sitemap-btn:hover span.mid {left:6px;}

html.sitemap-opened #header .sitemap-btn span {border-radius:2px;}
html.sitemap-opened #header .sitemap-btn span.mid {opacity:0; left:26px;}
html.sitemap-opened #header .sitemap-btn span.top {transform:rotate(45deg); margin-top:8px;}
html.sitemap-opened #header .sitemap-btn span.bot {transform:rotate(-45deg); margin-bottom:8px;} 

.sitemap {opacity:0; transform:translateY(-100%); z-index:80; position:fixed; width:100vw; height:100vh; top:0; left:0; background:url('../img/layout/sitemap-bg.jpg') center center no-repeat; background-size:cover; padding-top:200px; transition:all 0.6s;}
.pc-sitemap {display:block;}
.mob-sitemap {display:none;}


html.sitemap-opened .sitemap {opacity:1; transform:translateY(0);}
/* transform:translateY(-100%); */

.sitemap .col {display:flex; flex-wrap:wrap; border-left:1px solid rgba(221,221,221,0.1);}
.sitemap .col .row {width:33.3333333%; padding:0 70px; border-right:1px solid rgba(221,221,221,0.1); height:auto; margin-bottom:52px;}
.sitemap .tit {margin-bottom:18px; padding-bottom:22px; border-bottom:2px solid rgba(255,255,255,0.3);}
.sitemap .tit p {font-size:28px; line-height:1.1em; color:#fff; font-weight:700;}

.sitemap .subm li a {display:inline-block; font-size:18px; line-height:45px; color:#e8e8e8; position:relative; transition:all 0.6s; padding-left:12px;}
.sitemap .subm li a:hover {color:#fff;}
.sitemap .subm li a:before {content:''; width:3px; height:3px; background:#829490; position:absolute; top:20px; left:0; transition:all 0.6s; border-radius:50%;}
.sitemap .subm li a:hover:before {background:#fff;}
.sitemap .subm li a:after {content:''; width:0; height:2px; bottom:10px; left:12px; background:#fff; position:absolute; transition:all 0.6s; opacity:0;}
.sitemap .subm li a:hover:after {width:calc(100% - 12px); opacity:1;}

.sitemap .link {margin-top:-10px;}
/* .sitemap .link li a {font-size:18px; line-height:59px; color:#829490; transition:all 0.6s; display:block; border-bottom:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; width:100%;} */
.sitemap .link li a {font-size:18px; line-height:1.8em; color:#829490; transition:all 0.6s; display:block; border-bottom:1px solid rgba(255,255,255,0.2); align-items:center; width:100%;}
.sitemap .link li a:hover {color:#fff; border-bottom-color:#fff;}
/* .sitemap .link li a span {display:inline-block; height:20px; margin-left:20px;} */
.sitemap .link li a span {display:inline-block; height:20px; margin-left:5px; width: 30px; top: 9px; position: relative;}

.sitemap .more {padding-top:8px; padding-left:0;}
.sitemap .more a {font-size:18px; line-height:70px; font-weight:600; color:#fff; position:relative; padding-right:46px; display:inline-block;}
.sitemap .more a:after {content:''; width:8px; height:10px; background:url('../img/layout/sitemap-more.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-5px; right:0; transition:all 0.6s;}
.sitemap .more a:hover:after {right:10px;}

.search-wrap {width:100%; height:160px; background:#fff; padding:50px 0; position:fixed; top:110px; left:0; z-index:80; transition:all 0.6s; transform:translateY(-270px); box-shadow:0 0 20px rgba(147,147,147,0.5);}
html.search-opened .search-wrap {transform:translateY(0);}
.search-wrap .contain {height:auto;}
.search-wrap .closed {position:absolute; top:50%; right:0; margin-top:-20px; width:40px; height:40px; background:#f7f7f7; font-size:0;}
.search-wrap .closed:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:url('../img/layout/search-closed.png') no-repeat; background-size:cover; transition:all 0.4s;}
.search-wrap .closed:hover:after {transform:rotate(90deg);}
.search-wrap .search-box {width:100%; max-width:520px; margin:0 auto; position:relative; overflow:hidden; z-index:1;}
.search-wrap .search-box input {width:100%; line-height:58px; border:1px solid #000; border-radius:35px; padding-left:30px; padding-right:80px; font-size:18px; color:#333; outline:none;}
.search-wrap .search-box input::placeholder {font-size:18px; color:#666;}
.search-wrap .search-box button {position:absolute; right:5px; top:50%; margin-top:-30px; width:60px; height:60px; border-radius:50%; border:0; background:transparent; transition:all 0.4s;}


/* footer */
#footer {background:#021712; overflow:hidden;}

.foot-col {display:flex; padding:90px 0; border-bottom:1px solid rgba(255,255,255,0.1);}
.foot-col > div {width:100%; border-right:1px solid rgba(255,255,255,0.2); margin-right:80px;}
.foot-col > div:last-child {border-right:0; margin-right:0;}
.foot-col .foot-menu {max-width:405px;}
.foot-col .foot-info {max-width:475px;}
.foot-col .foot-cnt {width:1%; flex:1 1 auto;}
.foot-col .title {margin-bottom:16px;}
.foot-col .title p {font-size:20px; line-height:1.5em; color:#fff; font-weight:700;}

.foot-col .foot-menu {display:flex;}
.foot-col .foot-menu .row {width:50%; padding-right:20px;}
.foot-col .foot-menu .row:last-child {padding-right:0;}

.foot-col .foot-menu li a {font-size:16px; line-height:40px; color:#829490; position:relative; padding-left:10px; transition:all 0.6s;}
.foot-col .foot-menu li a:hover {color:#fff;}
.foot-col .foot-menu li a:before {content:''; width:3px; height:3px; background:#829490; position:absolute; top:17px; left:0; border-radius:50%; transition:all 0.6s;}
.foot-col .foot-menu li a:hover:before {background:#fff;}

.foot-col .foot-info .tel {margin-bottom:20px;} 
.foot-col .foot-info .tel a {font-size:22px; font-weight:500; color:#fff; line-height:1.3em; position:relative; padding-left:30px; display:inline-block;}
.foot-col .foot-info .tel a:before {content:''; width:20px; height:20px; background:url('../img/layout/foot-tel.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-10px; left:0;}
.foot-col .foot-info dl {margin-bottom:16px; display:block; font-size:16px; line-height:1.8em;}
.foot-col .foot-info dl:last-child {margin-bottom:0;}
.foot-col .foot-info dt {color:#fff; width:100%; padding-left:30px; position:relative;}
.foot-col .foot-info dt:before {content:''; width:18px; height:18px; background:url('../img/layout/foot-mail.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-9px; left:0;}
.foot-col .foot-info dd {width:100%; padding-left:30px;}
.foot-col .foot-info dd a {display:inline-block; color:#829490; transition:all 0.6s;}
.foot-col .foot-info dd a:hover {color:#fff;}

.foot-col .foot-row {margin-bottom:40px;}
.foot-col .foot-row:last-child {margin-bottom:0;}
.foot-col .foot-row .more a {display:block; font-size:16px; font-weight:700; color:#fff; transition:all 0.6s; max-width:250px; width:100%; line-height:48px; border:1px solid #fff; position:relative; padding-left:20px; padding-right:50px; z-index:1;}
.foot-col .foot-row .more a:hover {color:#021712; transition-delay:0.1s;}
.foot-col .foot-row .more a:after {content:''; width:50px; height:50px; background:url('../img/layout/foot-more.png') no-repeat; background-size:cover; position:absolute; top:-1px; right:-1px; z-index:1;}
.foot-col .foot-row .more a:before {content:''; width:0; height:100%; background:#fff; position:absolute; left:0; top:0; transition:all 0.6s; z-index:-1;}
.foot-col .foot-row .more a:hover:before {width:100%;}
.foot-col .foot-row ul {display:flex; margin:0 -14px;}
.foot-col .foot-row ul li {padding:0 14px; position:relative;}
.foot-col .foot-row ul li:after {content:''; width:1px; height:10px; background:#fff; opacity:0.2; position:absolute; top:50%; margin-top:-5px; right:0;}
.foot-col .foot-row ul li:last-child:after {display:none;}

.foot-col .foot-row ul li a {font-size:16px; line-height:1.8em; color:#829490; position:relative; padding-left:30px; transition:all 0.6s;}
.foot-col .foot-row ul li a:hover {color:#fff;}
.foot-col .foot-row ul li a:before {content:''; width:22px; height:22px; background-repeat:no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-11px; left:0;}
.foot-col .foot-row ul li a.facebook:before {background-image:url('../img/layout/foot-facebook.png');}
.foot-col .foot-row ul li a.youtube:before {background-image:url('../img/layout/foot-youtube.png');}
.foot-col .foot-row ul li a.sns-x:before {background-image:url('../img/layout/foot-x.png');}
.foot-col .foot-row ul li a.flickr:before {background-image:url('../img/layout/foot-flickr.png');}

.foot-wrap {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:36px 0;}
.foot-wrap p {font-size:16px; color:#fff; line-height:1.6em;}
.foot-wrap ul {display:flex; margin:0 -13px;}
.foot-wrap ul li {padding:0 13px;}
.foot-wrap ul li a {font-size:16px; line-height:1.6em; color:#fff; font-weight:600; transition:all 0.6s;}
.foot-wrap ul li a:hover {opacity:0.3;}

.scrolltop {opacity:0; transition:all 0.6s; position:fixed; bottom:60px; right:125px; width:55px; border:1px solid #6f6f6f; height:55px; overflow:hidden; z-index:110; text-align:center; font-size:0;}
html.scroll-fade .scrolltop {opacity:1;}
.scrolltop:before {content:''; width:55px; height:110px; position:absolute; top:-1px; left:-1px; background:url('../img/layout/scrolltop.png'); background-position:bottom center; transition:all 0.6s;}
.scrolltop:hover:before {background-position:top center;}

/* 250701 퀵메뉴 추가 */
.quick {position:fixed; right:60px; top:50%; border:1px solid #ddd; margin-top:-220px; z-index:60;}
.quick li {border-bottom:1px solid #ddd;}
.quick li:last-child {border-bottom:0;}
.quick .inner {height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#fff; width:90px;}
.quick .inner .icon {}
.quick .inner p {font-size:15px; font-weight:600; color:#0a3e32; line-height:1.2em; margin-top:10px;}

.only-pc {display:block;}
.only-mob {display:none;}