@charset "utf-8";
@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

#wrapper {position:relative;}
#main #wrapper {overflow:hidden;}
#sub #wrapper{overflow:visible;}


.chat-fix {position:fixed; top:90px; right:22px; z-index:90; width:90px; height:90px;}
.chat-fix a {display:block;}
.floating {position:fixed; top:180px; right:20px; z-index:90; width:100px; height:100px;}
.floating a {display:block;}
/* header */
#header {position:fixed; top:0; left:0; width:100%; height:86px; z-index:100; letter-spacing:-.02em; background:#fff; transition:all 0.4s;}

html.section01-on #header,
html.section03-on #header,
html.section04-on #header,
html.section06-on #header,
html.section07-on #header,
html.section08-on #header {background:#fff;}

html.section02-on #header {background:#d85e1a;  border-color:#d85e1a;}
html.section05-on #header {background:rgba(255, 230, 206);}
html.section09-on #header {background:rgb(161 57 37);}

#header .wrap {width:100%; height:100%; max-width:1880px; margin:0 auto; padding:0 15px; display:flex; align-items:center; justify-content:space-between;}
#header .sitelogo a {display:block; width:68px; height:38px; background-repeat:no-repeat; background-size:contain; background-image:url('../img/layout/logo-c.png');}

html.section01-on #header .sitelogo a,
html.section03-on #header .sitelogo a,
html.section04-on #header .sitelogo a,
html.section05-on #header .sitelogo a,
html.section06-on #header .sitelogo a,
html.section07-on #header .sitelogo a,
html.section08-on #header .sitelogo a {background-image:url('../img/layout/logo-c.png');}

html.section02-on #header .sitelogo a,
html.section09-on #header .sitelogo a {background-image:url('../img/layout/logo-w.png');}

#header.active {transform:translateY(0);}
#header.hide {transform:translateY(0);}

.sitemap-btn {display:flex; height:60px; background: none; border: none; cursor: pointer; outline: none; z-index: 100; align-items:center;}
.sitemap-btn p {font-size:20px; line-height:1.5em; font-weight:500; position:relative; z-index:11; color:#d85e1a;}
.sitemap-btn .trigger {position:relative; width: 50px; height: 50px;}
.sitemap-btn .circle {position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; background: #fff; border-radius:50%; transform: translate(-50%, -50%); will-change: transform; transition: background 0.3s; z-index: 1; pointer-events: none;}
.sitemap-btn:hover .circle {background: #d85e1a;}
.sitemap-btn .bar {display: block; position: absolute; top:50%; right:12px; height: 4px; background: #d85e1a; transition: background 0.3s; z-index: 2;}
.sitemap-btn .bar.bar01 {margin-top:-6px; width:22px;}
.sitemap-btn .bar.bar02 {margin-top:2px; width:28px;}
.sitemap-btn:hover .bar {background: #fff;}

html.section01-on .sitemap-btn p,
html.section03-on .sitemap-btn p,
html.section04-on .sitemap-btn p,
html.section05-on .sitemap-btn p,
html.section06-on .sitemap-btn p,
html.section07-on .sitemap-btn p,
html.section08-on .sitemap-btn p {color:#d85e1a;}
html.section02-on .sitemap-btn p,
html.section09-on .sitemap-btn p {color:#fff;}

html.section01-on .sitemap-btn .circle,
html.section03-on .sitemap-btn .circle,
html.section04-on .sitemap-btn .circle,

html.section06-on .sitemap-btn .circle,
html.section07-on .sitemap-btn .circle,
html.section08-on .sitemap-btn .circle {background:#fff;}
html.section05-on .sitemap-btn .circle {background:rgba(255, 230, 206);}
html.section02-on .sitemap-btn .circle,
html.section09-on .sitemap-btn .circle {background:#d85e1a;}

html.section01-on .sitemap-btn:hover .circle,
html.section03-on .sitemap-btn:hover .circle,
html.section04-on .sitemap-btn:hover .circle,
html.section05-on .sitemap-btn:hover .circle,
html.section06-on .sitemap-btn:hover .circle,
html.section07-on .sitemap-btn:hover .circle,
html.section08-on .sitemap-btn:hover .circle {background:#d85e1a;}
html.section02-on .sitemap-btn:hover .circle,
html.section09-on .sitemap-btn:hover .circle {background:#fff;}

html.section01-on .sitemap-btn .bar,
html.section03-on .sitemap-btn .bar,
html.section04-on .sitemap-btn .bar,
html.section05-on .sitemap-btn .bar,
html.section06-on .sitemap-btn .bar,
html.section07-on .sitemap-btn .bar,
html.section08-on .sitemap-btn .bar {background:#d85e1a;}
html.section02-on .sitemap-btn .bar,
html.section09-on .sitemap-btn .bar {background:#fff;}

html.section01-on .sitemap-btn:hover .bar,
html.section03-on .sitemap-btn:hover .bar,
html.section04-on .sitemap-btn:hover .bar,
html.section05-on .sitemap-btn:hover .bar,
html.section06-on .sitemap-btn:hover .bar,
html.section07-on .sitemap-btn:hover .bar,
html.section08-on .sitemap-btn:hover .bar {background:#fff;}
html.section02-on .sitemap-btn:hover .bar,
html.section09-on .sitemap-btn:hover .bar {background:#d85e1a;}


.sitemap {position:fixed; width:100vw; height:100vh; top:0; left:0; z-index:101; display:none; overflow:hidden;}
.sitemap .overlay {width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.6); z-index:1;}

.sitemap .wrap {position:absolute; width:690px; height:100vh; right:0; top:0; background:#fff; z-index:2; transform:translateX(100%); transition:all 0.6s;}
html.sitemap-opened .sitemap .wrap {transform:translateX(0);}
.sitemap .head {position:relative; height:145px; position:relative; padding:0 90px; display:flex; align-items:center;}
.sitemap .head .sitemap-close {width:36px; height:36px; background:#d85e1a; border-radius:50%; position:absolute; top:25px; right:35px;}
.sitemap .head .sitemap-close:before,
.sitemap .head .sitemap-close:after {content:''; background:#fff; top:50%; left:50%; width:22px; height:2px; margin-top:-1px; margin-left:-11px; transition:all 0.4s 0.6s; position:absolute;}
html.sitemap-opened .sitemap .head .sitemap-close:before {transform:rotate(45deg);}
html.sitemap-opened .sitemap .head .sitemap-close:after {transform:rotate(-45deg);}
.sitemap .menu {padding:18px 116px; letter-spacing:-.02em;}
.sitemap .menu li {display:flex;}
.sitemap .menu li a {font-size:33px; line-height:71px; font-weight:600; font-family:'NEXON Lv2 Gothic'; color:#2c2c2c; transition:all 0.4s; display:inline-block; overflow:hidden;}
.sitemap .menu li a:hover {color:#a33a28;}
.sitemap .menu li a span {position:relative; display:block; transform:translateY(100%); transition:all 0.6s;}
.sitemap .menu.on li a span {transform:translateY(0);}
.sitemap .menu.on li.m1 a span {transition-delay:0.1s;}
.sitemap .menu.on li.m2 a span {transition-delay:0.2s;}
.sitemap .menu.on li.m3 a span {transition-delay:0.3s;}
.sitemap .menu.on li.m4 a span {transition-delay:0.4s;}
.sitemap .menu.on li.m5 a span {transition-delay:0.5s;}
.sitemap .menu.on li.m6 a span {transition-delay:0.6s;}
.sitemap .menu.on li.m7 a span {transition-delay:0.7s;}

.sitemap .sns {position:absolute; bottom:95px; left:121px; opacity:0; transition:all 0.6s;}
.sitemap .sns.on {opacity:1;}
.sitemap .sns ul {display:flex; margin:0 -10px;}
.sitemap .sns ul li {padding:0 10px;}
.sitemap .sns ul li a {width:48px; height:48px; border-radius:16px; background:#b5b5b5; position:relative; overflow:hidden;}
.sitemap .sns ul li a img {position:relative; z-index:2;}
.sitemap .sns ul li a:before {content:''; width:100%; height:100%; position:absolute; z-index:1; top:0; left:0; background:linear-gradient(0deg,rgba(239, 115, 19, 1) 0%, rgba(255, 131, 12, 1) 100%); transition:all 0.4s; opacity:0;}
.sitemap .sns ul li a:hover:before {opacity:1;}
/* footer */
#footer {padding:114px 0; background:#191919;}

#footer .col {display:flex; justify-content:space-between;}
#footer .foot-box .logo {margin-bottom:46px;}
#footer .foot-box .logo p {font-size:23px; line-height:1.2em; color:#fff; letter-spacing:-.02em; font-weight:600; font-family:'NEXON Lv2 Gothic'; margin-bottom:16px;}
#footer .foot-box .info p {font-size:14px; line-height:1.64em; color:#747474; letter-spacing:.005em;}
#footer .foot-box .info p span {margin:0 4px;}
#footer .foot-box .info p br {display:none;}
#footer .foot-link .sns {margin-bottom:64px;}
#footer .foot-link .sns ul {display:flex; justify-content:flex-end;}
#footer .foot-link .sns ul li {padding-left:5px;}
#footer .foot-link .sns ul li a {width:44px; height:44px; background-color:#fff; border-radius:50%; background-repeat:no-repeat; background-size:cover; background-position:center center; transition:all 0.4s;}
#footer .foot-link .sns ul li a:hover {background-color:#75250e;}
#footer .foot-link .sns ul li a.youtube {background-image:url('../img/layout/foot-youtube.png');}
#footer .foot-link .sns ul li a.insta {background-image:url('../img/layout/foot-insta.png');}
#footer .foot-link .sns ul li a.youtube:hover {background-image:url('../img/layout/foot-youtube-on.png');}
#footer .foot-link .sns ul li a.insta:hover {background-image:url('../img/layout/foot-insta-on.png');}

#footer .foot-link .link {text-align:right;}
#footer .foot-link .link li {margin-bottom:12px;}
#footer .foot-link .link li:last-child {margin-bottom:0;}
#footer .foot-link .link a {font-size:18px; line-height:1.4em; color:#fff; font-weight:500; letter-spacing:-.03em; position:relative; display:inline-block;}
#footer .foot-link .link a:after {content:''; width:0; height:1px; background:#fff; position:absolute; bottom:0; right:0; transition:all 0.4s;}
#footer .foot-link .link a:hover:after {width:100%;}

.scrolltop {position:fixed; bottom:60px; right:25px; width:56px; height:56px; opacity:0; transition:all 0.8s; transform:translateY(150px);}
html.scroll-fade .scrolltop {transform:translateY(0); opacity:1;}


/* popoup */

html.popup-company-opened,
html.popup-advertiser-opened {overflow:hidden;}
html.popup-company-opened body,
html.popup-advertiser-opened body {overflow:hidden; width:100%; padding-right:17px;}

.popup {width:100vw; height:100vh; position:fixed; z-index:100; display:none; top:0; left:0;}
.popup .popup-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7);}
.popup .popup-wrap {width:1025px; height:622px; position:absolute; top:50%; left:50%; margin-top:-311px; margin-left:-512px;}

.popup .popup-colsed {width:36px; height:36px; position:absolute; right:20px; top:20px; background:#d85e1a; border-radius:50%; z-index:11;}
.popup .popup-colsed:before,
.popup .popup-colsed:after {content:''; width:22px; height:2px; background:#fff; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-11px;}
.popup .popup-colsed:before {transform:rotate(45deg);}
.popup .popup-colsed:after {transform:rotate(-45deg);}

.popup .col {display:flex; height:100%; border-radius:32px; background:#fff; position:relative; overflow:hidden;}
.popup .tit-box {width:100%; max-width:355px; background:#ebe6e2; height:100%; padding:48px 40px; display:flex; align-items:flex-end;}
.popup .tit-box h3 {font-size:31px; line-height:1.29em; color:#72290f; font-weight:700; margin-bottom:12px; padding-bottom:12px; border-bottom:2px solid #e5dad4; letter-spacing:-.02em;}
.popup .tit-box p {font-size:14px; line-height:1.5em; color:#313131; letter-spacing:.0em;}
.popup .txt-box {width:1%; flex:1 1 auto; overflow-y:scroll; margin:52px 8px 52px 0; padding-left:40px; padding-right:50px;}
.popup .txt-box::-webkit-scrollbar {background:#fff; width:6px;}
.popup .txt-box::-webkit-scrollbar-track  {background:#fff;}
.popup .txt-box::-webkit-scrollbar-thumb {background:#999; border-radius:3px;}
.popup .txt-box .wrap {position:relative;}
.popup .box {position:relative; padding-bottom:42px; margin-bottom:4px; padding-left:36px;}
.popup .box:before {content:''; width:2px; height:calc(100% - 26px); top:26px; left:10px; border:1px dashed #d0d0d0; position:absolute;}
.popup .info-box:before {display:none;}
.popup .box .num {position:absolute; top:2px; left:0; font-size:11px; color:#fff; width:22px; line-height:22px; background:#a13d23; border-radius:50%; text-align:center; z-index:2;}
.popup .box .txt p {font-size:21px; line-height:1.2em; color:#000; font-weight:500; margin-bottom:14px;}
.popup .box .txt p span {color:#a13d23; display:inline-block; margin-left:-10px; vertical-align:top; margin-top:-3px;}
.popup .box .txt ul.select {display:flex;}
.popup .box .txt ul.select li {margin-right:12px;}
.popup .box .txt ul.select li:last-child {margin-right:0;}
.popup .box .radio {display:inline-block;}
.popup .box .radio input {position:absolute; top:0; left:0; width:0; height:0; border:0; opacity:0; z-index:-1;}
.popup .box .radio label {display:block; padding:0 25px; line-height:46px; border:1px solid #cdcdcd; border-radius:8px; background:#fafafa;}
.popup .box .radio input + label {font-size:16px; letter-spacing:-.01em; color:#929292;}
.popup .box .radio input:checked + label {font-weight:700; color:#a13d23; background:#f7f3f0; border-color:rgba(70,34,20,0.45);}
.popup .box .txt textarea {width:100%; max-width:510px; height:165px; background:#f8f8f8; border:0; border-radius:8px; padding:15px; font-size:14px; color:#2c2c2c; resize:none;}
.popup .box .txt textarea:placeholder {font-size:14px; line-height:1.5em; color:#929292;}
.popup .box .input {padding:0 18px; line-height:46px; height:48px; background:#f8f8f8; font-size:14px; color:#2c2c2c; border-radius:8px; border:0; display:block; width:100%;}
.popup .box .input:placeholder {font-size:14px; color:#929292;}
.popup .box .address {display:flex;}
.popup .box .address .put {width:100%; max-width:426px;}
.popup .box .address .put .input {margin-bottom:8px;}
.popup .box .address .put .input:last-child {margin-bottom:0;}
.popup .box .address .btn {width:1%; flex:1 1 auto; padding-left:12px;}
.popup .box .address .btn button {width:100%; display:block; border:1px solid #cdcdcd; background:#999; font-size:16px; color:#fff; line-height:46px; text-align:center; cursor:pointer; border-radius:8px; transition:all 0.4s;}
.popup .box .address .btn button:hover {background:#cdcdcd;}
.popup .box .info {margin-bottom:26px; position:relative;}
.popup .box .info:last-child {margin-bottom:0;}
.popup .box .info p {font-size:14px; line-height:1.5em; color:#404040; letter-spacing: -.03em;}
.popup .box .info ul {display:flex; margin:0 -6px;}
.popup .box .info ul li {padding:0 6px; line-height:46px; width:100%;}
.popup .box .info ul li.hyphen {text-align:center; width:24px;}
.popup .box .info ul li select {width:100%; color:#929292; background:#f8f8f8 url('../img/layout/select.png') right 14px center no-repeat;}

.popup .box .info .select {padding-right:100px;}
.popup .box .info .radio {position:absolute; top:0; right:-24px;}

.popup .submit {display:block; width:180px; line-height:56px; background:#72210d; margin:0 auto; border-radius:30px; border:1px solid #72210d; font-size:18px; font-weight:500; color:#fff; transition:all 0.4s;}
.popup .submit:hover {background:#fff; color:#72210d;}




@media (max-width: 1100px) {
	.popup .popup-wrap {width:90vw; height:80vh; border-radius:25px; overflow:hidden; position:absolute; top:10vh; left:5vw; margin-top:0; margin-left:0;}
	.popup .col {flex-direction:column;}
	.popup .tit-box {width:100%; max-width:none; padding:30px; display:block; height:auto;}
	.popup .tit-box br {display:none;}
	.popup .tit-box h3 {font-size:28px; margin-bottom:10px; padding-bottom:10px;}
	.popup .tit-box p {font-size:14px;}
	.popup .txt-box {width:100%; height:100%; overflow-y:scroll; padding:0 40px; margin:40px -10px 40px;}
	.popup .txt-box::-webkit-scrollbar {background:#fff; width:6px;}
	.popup .txt-box::-webkit-scrollbar-track  {background:#fff;}
	.popup .txt-box::-webkit-scrollbar-thumb {background:#999; border-radius:3px;}
	.popup .box {padding-bottom:30px; padding-left:30px;}
	.popup .box .txt p {font-size:18px; margin-bottom:10px;}	
	.popup .box .txt ul.select {flex-wrap:wrap; margin-bottom:-10px;}
	.popup .box .txt ul.select li {margin-right:10px; margin-bottom:10px;}
	.popup .box .txt ul.select li .radio label {padding:0 20px; line-height:42px;}
	.popup .box .txt textarea {max-width:none; height:120px; font-size:14px;}
	.popup .box .input {padding:0 15px; line-height:42px;}
	.popup .box .address .put {width:100%; max-width:500px;}
	.popup .box .address .btn {width:100%; max-width:100px; padding-left:10px;}
	.popup .box .address .btn button {line-height:42px;}
	.popup .box .info {margin-bottom:20px;}
	.popup .box .info ul {margin:0 -4px;}
	.popup .box .info ul li {padding:0 4px; line-height:42px;}
	.popup .box .info ul li.hyphen {width:24px;}
	.popup .submit {width:160px; line-height:50px; font-size:16px;}
	
	.popup .box .txt ul.select.dep2 {padding-right:0; display:flex; width:calc(100% - 120px);}
	.popup .box .txt ul.select.dep2 li {width:45%;}
	.popup .box .info .radio {right:0;}

}
@media (max-width: 640px) {
	.popup .txt-box {padding:0 25px;}
	.popup .box .txt ul.select li .radio label {padding:0 10px;}
	
	.popup .box .txt ul.select.dep2 {padding-right:0; display:flex; width:100%; margin:0 -6px;}
	.popup .box .txt ul.select.dep2 li {width:50%; margin:0; padding:0 6px;}
	.popup .box .info .radio {position:relative; margin-top:12px;}
}