@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); font-weight: 100; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff'); font-weight: 200; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: 300; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight: 400; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: 500; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-weight: 600; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: 700; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff'); font-weight: 800; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff'); font-weight: 900; }
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/*===========================================================================
	CSS 초기화
============================================================================*/
* {font-family: "SCDream" , 'Noto Sans KR', 'Open Sans' ,sans-serif;box-sizing:border-box; margin:0; padding:0; font-weight: 300;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, strong, b, i, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, menu, nav, section, video, a {border:0; outline:0; font-size:100%; color:#333; line-height:1;}
body {line-height:1; -ms-overflow-style: none;}
::-webkit-scrollbar {display: none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul, ol, li {list-style:none;}
strong {display: inline-block;}
a {margin:0; padding:0; font-size:100%; }
table {border-collapse:collapse; border-spacing:0;}
input, select {vertical-align:middle;}
p {line-height:1.5; word-break: keep-all;}
img {width: 100%}
input {outline:none;}
button {cursor:pointer; border: 0; outline: 0; background: none;}
a {text-decoration: none;}
textarea {resize: none;}
section{position: relative; overflow: hidden;}
.col-group {display:flex;}
.container {width: 1440px; height: auto; margin: 0 auto; position: relative;}

.basic-btn{display: flex; justify-content: center; align-items: center; border: solid 1px #fff; width: 230px; height: 56px; letter-spacing: -0.4px; transition: all 0.3s; cursor: pointer; color: #fff;}
.bt-btn{width: 209px; height: 56px; display: inline-block; transition: all 0.3s;}
.mb-br{display: none;}
.mb{display: none;}

@media screen and (max-width:1600px) {
    .container{width: 100%; padding: 0 64px;}
}
@media screen and (max-width:768px) {
    .container{width: 100%; padding: 0 24px;}
}

/* header */
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: transparent;}
.header-wrap { align-items: center; height: 80px; justify-content: space-between; transition: all 0.3s; }
.header-wrap .logo { width: 180px; height: 66px; margin-left: 40px; }
.header-wrap .logo a{display: block; width: 100%; height: 100%; background-image: url(../images/LOGO-W-eng.png); background-repeat: no-repeat; background-position: center; background-size: contain; transition: all 0.3s;}

.header-wrap .hd-le{display: flex; height: 100%; max-width: calc(100% - 238px);}

.header-wrap .gnb { width: 958px; justify-content: center; }
.header-wrap .gnb> li { width: calc( 100% / 5 ); height: 80px; text-align: center; position: relative; }
.header-wrap .gnb> li> a { height: 100%; font-size: 16px; color: #333; transition: .2s; display: flex; flex-flow: column; justify-content: center; }
.header-wrap .gnb> li> a p { width: fit-content; margin: 0 auto; position: relative; transition: .2s; font-size: 18px; color: #fff; font-weight: 400; transition: all 0.3s;}
.header-wrap .gnb> li> a p::after { content: ""; display: block;  width: 0; height: 2px; background: #ffb000; position: absolute; bottom: -8px; transition: .2s; left: 50%; transform: translateX(-50%); }
.header-wrap .gnb> li:hover> a p, .header-wrap .gnb> li.active> a p { color: #ffb000; }
.header-wrap .gnb> li:hover> a p::after, .header-wrap .gnb> li.active> a p::after { width: 100%; }
.header-wrap .gnb-sub { position: absolute; top: 100%; background: #fff; box-shadow: 3px 3px 10px #00000029; border-top: 2px solid #ffb000; display: none; width: 100%;}
.header-wrap .gnb-sub li { width: 100%; height: 56px; border-bottom: 1px solid #e1e1e1; }
.header-wrap .gnb-sub li:hover { background: #F5F5F5; }
.header-wrap .gnb-sub li a {display: flex; justify-content: center; align-items: center; font-size: 16px; height: 100%; width: 100%; letter-spacing: -0.4px;}
.header-wrap .language-cg a { width: 88px; height: 100%; display: flex; justify-content: center; align-items: center; }
.header-wrap .language-cg a i { font-size: 30px; color: #fff; transition: all 0.3s; }

.header-wrap .sitemap-open{width: 88px; height: 100%;}
.header-wrap .sitemap-open i{font-size: 30px; color: #fff; transition: all 0.3s;}

.header-wrap:hover{background-color: #fff; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.16);}
.header-wrap:hover .logo a{background-image: url(../images/LOGO-EN.png); }
.header-wrap:hover .gnb> li> a p {color: #232323;}
.header-wrap:hover .sitemap-open i{color: #232323;}
.header-wrap:hover .language-cg a i { color: #232323; }
.header-wrap.active{background-color: #fff; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.16);}
.header-wrap.active .logo a{background-image: url(../images/LOGO-EN.png); }
.header-wrap.active .gnb> li> a p {color: #232323;}
.header-wrap.active .sitemap-open i{color: #232323;}
.header-wrap.active .language-cg a i { color: #232323; }

/* 사이트맵 */
#site_map { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(24px); display: none; }
#site_map .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#site_map .close { position: absolute; right: 0; top: -100px; transition: .3s; }
#site_map .close:hover { transform: rotate(180deg); }
#site_map .close i { color: #fff; font-size: 48px; }
#site_map .sitemap-list> li { width: calc( 100% / 6 ); border-left: 1px solid #fff; }
#site_map .sitemap-list> li:last-child { border-right: 1px solid #fff; }
#site_map .sitemap-list> li p { font-size: 20px; color: #fff; padding: 15px 40px 24px; position: relative; }
#site_map .sitemap-list> li p::after { content: ""; display: block; position: absolute; width: 32px; height: 32px; border-radius: 50%; background: #ff9900; top: 0; left: 24px; z-index: -1;  }
#site_map .sitemap-sub-list li { height: 60px; transition: .1s; } 
#site_map .sitemap-sub-list li:hover { background: rgba(255, 255, 255, 0.06); }
#site_map .sitemap-sub-list li a {display: flex; width: 100%; height: 100%; align-items: center; padding: 0 40px; font-size: 18px; color: rgba(255, 255, 255, 0.6); transition: .1s; }
#site_map .sitemap-sub-list li:hover a { color: #fff; }
#site_map .sns-login-wrap{display: none;}
#site_map .mb-logo{display: none;}
#site_map .g-sans i{display: none;}

/* footer */
#main .footer .ri-ft .up-btn{opacity: 0;}
.footer{background-color: #444444; padding: 24px 60px; display: flex; justify-content: space-between;}
.footer > div{width: 50%;}
.footer .logo{display: block; width: 180px; height: 66px; background-image: url(../images/LOGO-W-eng.png); background-size: cover; margin-bottom: 24px;}
.footer .logo a{width: 100%; height: 100%; display: block;}
.footer .le-ft ul{display: flex; flex-wrap: wrap; width: 100%; max-width: 685px; gap: 0 16px;}
.footer .le-ft ul li{color: #fff; font-size: 14px; font-weight: 200; line-height: 2; letter-spacing: -0.42px;}
.footer .ri-ft{display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;}
.footer .ri-ft .up-btn{width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 100%; margin-bottom: 40px;}
.footer .ri-ft .up-btn i{color: #232323;}
.footer .ri-ft ul{display: flex; gap: 20px; margin-bottom: 16px;}
.footer .ri-ft ul li a{font-size: 16px; font-weight: 200; letter-spacing: -0.4px; color: #fff; cursor: pointer;}
.footer .ri-ft p{font-size: 14px; font-weight: 200; letter-spacing: -0.35px; color: #fff; opacity: 0.3;}

@media screen and (max-width:1600px) {
    .header-wrap{height: 64px;}
    .header-wrap .logo{width: 150px; height: 54px;}
    .header-wrap .gnb> li{height: 64px;}
    .header-wrap .gnb> li> a p{font-size: 14px;}
}


@media screen and (max-width:768px) {
    .pc { display: none; }
    .mb { display: block; }
    #main { margin-top: 56px; }
    .kakao-ch { display: none; }
    br{display: none;}
    .mb-br{display: unset;}

    /* header */
    .header-wrap{height: 56px; background-color: #fff;}
    .header-wrap .logo { width: 110px; height: 40px; margin-left: 8px; }
    .header-wrap .logo a{background-image: url(../images/LOGO-EN.png);}
    .header-wrap .gnb { display: none; }
    .header-wrap .sitemap-open i{color: #232323; font-size: 40px;}
    .header-wrap .language-cg a i { color: #232323; }

    /* 사이트맵 */
    #site_map .container{ right: 0; top: 0; left: unset; transform:unset; width: 280px; padding: unset; height: 100%; background-color: #fff;}
    #site_map .close{right: 280px; top: 0; background-color: #ffb000; width: 56px; height: 56px;}
    #site_map .close i{font-size: 32px;}
    #site_map .close:hover { transform: unset; }
    #site_map .mb-logo{position: absolute; display: flex; justify-content: center; align-items: center; height: 56px; width: 100%;}
    #site_map .mb-logo img{width: 130px;}
    #site_map .sitemap-list{flex-direction: column; z-index: 999; margin-top: 56px; max-height: calc(100% - 56px); overflow: auto;}
    #site_map .sitemap-list> li{width: 100%; border: unset;}
    #site_map .sitemap-list> li p{color: #333; font-size: 15px; font-weight: 400; padding: 0 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; line-height: 1; border-bottom: 1px solid #efefef;}
    #site_map .sitemap-list> li p.open{background-color: #ffb000; color: #fff;}
    #site_map .sitemap-list> li p i{display: inline-block;}
    #site_map .sitemap-list> li p.open i{color: #fff; transform: rotate(0.5turn);}
    #site_map .sitemap-sub-list{display: none;}
    #site_map .sitemap-sub-list li{background-color: #f5f5f5; height: 40px; border-bottom: 0.5px solid #fff;}
    #site_map .sitemap-sub-list li a{color: #7d7d7d; padding: unset; padding-left: 24px; line-height: 40px; font-size: 14px; font-weight: 300; letter-spacing: -0.35px;}
    #site_map .sitemap-sub-list li:hover a{color: #7d7d7d;}
    #site_map .sns-login-wrap{position: absolute; bottom: 0; height: 120px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; justify-content: flex-end; padding-bottom: 24px;}
    #site_map .sns-login-wrap h3{font-size: 15px; font-weight: 500; letter-spacing: -0.38px; color: #333;}
    #site_map .sns-login-wrap ul{display: flex; gap: 8px; padding: 0 16px;}
    #site_map .sns-login-wrap ul li.login-b a img{width: 48px; height: 48px;}

    .footer{flex-direction: column; position: relative; padding: 20px;}
    .footer .logo{width: 120px; height: 44px;}
    .footer > div{width: 100%;}
    .footer .le-ft {margin-bottom: 16px;}
    .footer .le-ft ul li{font-size: 12px; font-weight: 200; letter-spacing: -0.36px;}
    .footer .ri-ft {align-items: unset;}
    .footer .ri-ft .up-btn{position: absolute; right: 20px; top: 24px;}
    .footer .ri-ft ul li a{font-size: 12px;}
    .footer .ri-ft p{font-size: 10px; font-weight: 200;}
}