@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family:'LAB디지털';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/LAB디지털.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'ChosunGs';
    src: url('/font/ChosunCentennial_otf.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GongGothicLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GongGothicBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*============================================================================================================
    리셋
============================================================================================================*/
*{outline:0!important; box-sizing:border-box;}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
html,body{width:100%;}
html{font-family:sans-serif;}
body{width:100%;background:#fff;min-width:320px;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word;word-break:keep-all;}
body,input,select,textarea,button{border:none;font-size:12px;font-family:'Noto Sans KR', sans-serif;color:#727272;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
fieldset{width:100%;border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
.hide,caption,legend{line-height:0;font-size:1px;overflow:hidden;}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#000;text-decoration:none;}
img {width:auto; max-width:100%;}

/* Selection */
::-moz-selection {background:rgba(0,0,0,0.5);}
::selection {background:rgba(0,0,0,0.5);}

/* Kakao Map */
.root_daum_roughmap {width:100%!important; border-radius:0!important; border:none!important; padding:0!important;}
.root_daum_roughmap .wrap_controllers {display:none!important;}

/* Fonts */
.montserrat {font-family:'Montserrat', sans-serif;}
.thefaceshop {font-family:'THEFACESHOP INKLIPQUID';}
.chosun {font-family:'ChosunGs', sans-serif;}
.gongL {font-family:'GongGothicLight', sans-serif;}
.gongM {font-family:'GongGothicMedium', sans-serif;}
.gongB {font-family:'GongGothicBold', sans-serif;}

/*============================================================================================================
    레이아웃
============================================================================================================*/
.inner {position:relative; max-width:1440px; width:100%; margin:0 auto; padding:0 20px;}
.inner:after {display:block; clear:both; content:'';}

.only_pc {display:block;}
.only_m {display:none;}

@media all and (max-width:768px){
    .only_pc {display:none;}
    .only_m {display:block;}
}





/*============================================================================================================
    헤더
============================================================================================================*/
.header {position:fixed; top:0; left:0; right:0; z-index:2000; height:140px; background:transparent; transition:all 0.3s ease;}
.header .inner {max-width:100%; padding:0 94px;}

.header h1 {position:relative; z-index:2; display:inline-block; vertical-align:top; padding:28px 0;}
.header h1 a {display:block; width:auto;}

.header .gnb {position:absolute; top:0; left:0; right:0; text-align:center;}
.header .gnb > ul > li {position:relative; display:inline-block; transition:all 0.3s ease;}
.header .gnb > ul > li > a {display:block; padding:0 45px; line-height:140px; font-size:20px; font-weight:400; color:#fff;}
.header .gnb > ul > li.active > a:after {content:''; position:absolute; display:inline-block; top:90px; left:calc(50% - 1px); width:2px; height:23px; background:rgba(50,50,50,0.6);}

 .header .gnb > ul > li > ul {position:absolute; display:none; top:113px; left:50%; transform:translate(-50%,0); width:220px; text-align:center; padding:18px 30px; transition:all 0.3s ease; background:rgba(50,50,50,0.6);} 
 .header .gnb > ul > li > ul:before {content:''; position:absolute; top:-2px; left:-2px; display:block; width:13px; height:13px; border-top:3px solid #fff; border-left:3px solid #fff;}
 .header .gnb > ul > li > ul:after {content:''; position:absolute; bottom:-2px; right:-2px; display:block; width:13px; height:13px; border-bottom:3px solid #fff; border-right:3px solid #fff;}
.header .gnb > ul > li.active > ul {display:block;}
.header .gnb > ul > li > ul > li > a {position:relative; display:block; font-size:17px; font-family:'GongGothicLight', sans-serif; color:#fff; line-height:58px;}
.header .gnb > ul > li > ul > li > a:hover {font-family:'GongGothicMedium', sans-serif;}
.header .gnb > ul > li > ul > li > a:hover:after {content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background:url('/common/img/layout/gnb_hoverimg.png')no-repeat center/cover;}

.header .etc {float:right; z-index:200;}
.header .etc ul {padding:40px 0;}
.header .etc ul:after {content:''; display:block; clear:both;}
.header .etc ul li:first-child {position:relative; float:left; text-align:center; line-height:50px; vertical-align:top;}
.header .etc ul li:nth-child(2) {display:none;}
.header .etc ul li a {display:block; width:100%; height:100%;}

.header.scroll {background:#131314;}

.header .tgbox {position:fixed; width:100%; height:100%; top:0; right:0; display:none; background: rgba(0,0,0,0.8); z-index:9100;}
.header .btnclose {position:absolute; top:0; left:0; height:90px; width:75%; padding:0 30px; text-align:center; background:#323232; z-index:9900;}
.header .btnclose:after {content:''; display:block; clear:both;}
.header .btnclose .tgclose {position:absolute; top:0; left:30px; padding:31px 0;}
.header .btnclose h2 {display:inline-block; padding:20px 0;}
.header .tgmenu {position:absolute; top:0; left:0; height:100%; width:75%; padding:90px 0 0; background:#fff; overflow-y:scroll; z-index:9800;}
.header .tgmenu ul {height:auto;}
.header .tgmenu ul li.tg_lnb {border-bottom:1px solid #ddd;}
.header .tgmenu ul li.tg_lnb h2 {padding:15px 28px; font-size:18px; font-weight:400; color:#232323; background:#f1f1f1;}
.header .tgmenu ul li.tg_lnb > ul {margin:10px 0 25px;}
.header .tgmenu ul li.tg_lnb > ul > li a {line-height:36px; font-size:16px; padding:0 28px; color:#000;}

@media all and (max-width:1400px){
    .header .inner {max-width:100%; padding:0 50px;}
    .header .gnb > ul > li > a {padding:0 35px;}
}

@media all and (max-width:1200px){
    .header {height:90px; background:rgba(0,0,0,0.8);}
    .header .inner {text-align:center; padding:0 30px;}
    .header.scroll {background:rgba(0,0,0,0.8);}

    .header h1 {margin:0 auto; padding:20px 0; text-align:center;}
    .header h1 a {display:inline-block; height:50px;}
    .header h1 a img {height:100%; width:auto;}

    .header .gnb {display:none;}
    .header .etc {position:absolute; left:30px; top:0;}
    .header .etc ul {padding:35px 0;}
    .header .etc ul li:first-child {display:none;}
    .header .etc ul li:nth-child(2) {display:block; width:22px; height:20px;}
    .header .etc ul li:nth-child(2) a {z-index:200;}
    .header .etc ul li:nth-child(2) span {display:block; width:22px; height:2px; margin:0 0 7px; background:#fff;}
    .header .etc ul li:nth-child(2) span:last-child {margin:0;}
}

@media all and (max-width:768px){
    .header .inner {padding:0 20px;}

    .header .etc {left:20px;}

    .header .btnclose {width:80%;}
    .header .btnclose .tgclose {left:20px;}
    .header .tgmenu {width:80%;}
    .header .tgmenu ul li.tg_lnb h2 {padding:3vw 20px; font-size:3.8vw;}
    .header .tgmenu ul li.tg_lnb > ul {margin:2vw 0 5vw;}
    .header .tgmenu ul li.tg_lnb > ul > li a {line-height:2; font-size:3.4vw; padding:0 20px;}
}

/*============================================================================================================
    팝업
============================================================================================================*/
.popup {position:fixed; display:none; width:100%; height:100%; top:0; left:0; right:0; bottom:0; z-index:2100;}
.popup .bg {position:fixed; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.75); z-index:2120;}
.popup .cont {position:fixed; max-width:1080px; width:calc(100% - 40px); height:80vh; z-index:2120; border:5px solid #fff;}
.popup .cont > div {position:relative; display:block; width:100%; height:100%; font-size:0; background:#fff;}
.popup .cont > div a {position:absolute; display:inline-block; width:44px; height:44px; top:-5px; right:-44px; background:#fff url('/common/img/layout/popup-close.png')center no-repeat; z-index:2001;}

.popup .cont .videowrap {position:relative; padding:calc(40.5vh - 10px); height:0; overflow:hidden;}
.popup .cont .videowrap iframe, 
.popup .cont .videowrap object,
.popup .cont .videowrap embed {position:absolute; top:0; left:0; width:100%; height:100%;}



@media all and (max-width:1200px){
    .popup .cont {max-width:calc(90vw - 40px); width:calc(90vw - 40px);}
    .popup .cont {height:auto; border:5px solid #fff;}
    .popup .cont h2 {font-size:18px; padding:20px 20px;}
    .popup .cont .videowrap {padding:25px 0 56.25%;}

}

@media all and (max-width:768px){
    .popup .cont {border:1vw solid #fff;}
    .popup .cont > div a {width:8vw; height:8vw; top:-9vw; right:-1vw;}
}


@media all and (max-width:500px){
} 



/*============================================================================================================
    푸터
============================================================================================================*/
.footer {text-align:center; background:#000;}
.footer ul.fGnb {padding:75px 0 50px;}
.footer ul.fGnb:after {content:''; display:block; clear:both;}
.footer ul.fGnb > li.flnb {float:left; width:20%;}
.footer ul.fGnb > li > h2 {margin:0 0 25px; font-size:18px; color:#fff;}

.footer ul.fGnb > li > ul > li > a {font-size:16px; font-weight:200; line-height:37px; color:#fff;}


.footer p {line-height:90px; font-size:16px; color:#fff; border-top:1px solid #3b3b3b;}
.footer p span {font-weight:200;}

@media all and (max-width:768px){
    .footer ul.fGnb {display:none;}
    .footer p {line-height:68px; font-size:3.2vw; color:#fff; border-top:0;}

}