@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Changa:300,400,500|Open+Sans&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Italianno&family=Oswald:wght@200;300;400;500;600;700&family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* reset */
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output, 
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}
html {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}
/********************************* COMMON *********************************/

html { width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth; background:#000 url(../../images/common/dim_bk50.png) repeat; }
body { width: 100%; height: 100%; /* max-width:2200px; */ margin:0 auto; background:#fff; color:#555; font-size: 1.4rem; line-height: 1; text-align: center; font-family: 'Tomorrow', sans-serif; /* IOS */-webkit-text-size-adjust: none; letter-spacing: -0.01em;  box-shadow: 3px 5px 5px rgb(0 0 0 / 60%); }
h1, h2, h3, h4, h5, h6 { letter-spacing: 0.01rem; font-weight: 400; font-family: 'Tomorrow', sans-serif; text-transform: uppercase; color:#222; }
ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
ul { font-size: 0; }
img { max-width: 100%; line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important;}
strong {font-weight: 600;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0; letter-spacing: -4px;}
li {font-size: 1.4rem; letter-spacing: 0;}
form, fieldset {width:100%; display: block;}
label {font-size: 1.3rem; letter-spacing: 0.01rem; font-weight: 600; font-family: 'Tomorrow', sans-serif; text-transform: uppercase;}
textarea, select, input {font-size: 1.4rem; font-family: 'Roboto', sans-serif;}
textarea {resize: none;}
select {border: none; border-radius: 6px;  -webkit-appearance: none;-moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}
select:focus {outline: none;}
input {padding: 0 24px; border: none; border-radius: 6px; background: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input::-ms-clear {display: none;}
input:focus {outline: none;}
a {color: #fff; text-decoration: none; display: inline-block; outline: none; }
a:focus {outline: none;}
a:hover { transition: all 0.4s ease;}
p { word-break: break-word; }
button { border:1px #fff solid; font-weight: 400; font-family: 'Tomorrow', sans-serif; text-transform: uppercase; cursor: pointer; outline: none; padding:2rem 5rem 2rem 6rem; border-radius: 30px; color:#fff; }
button:hover { transition: all 0.4s ease; cursor: pointer; }
button:focus { outline: none; }
header { position: absolute; width:100%; max-width:100%; display: block; margin:0 auto; z-index: 20; text-align:center; z-index: 99; }
footer { width:100%;  margin:0 auto; padding:5rem 0; background:#fff; letter-spacing: 0.01em;  background:none;  font-family: 'Tomorrow', sans-serif; font-weight: 500;  }
footer p { color:#797979; font-weight:500; line-height:1.6; font-size:12px; }
footer a:hover { text-decoration:underline; }
footer img { margin: 0 auto 10px; }

.container { position: relative; width: 100%; background:#fff; }
.inner {max-width:1300px; margin:0 auto;}
.wow {animation-duration: 0.5s;}


/* gnb */
.header_wrap { position: relative; height:90px; z-index: 99; clear: both; }
.header_wrap > h1 a {text-align: center;  line-height: 62px; height:72px;}
.header_wrap > h1 a img { vertical-align:middle;}
nav > ul li a {color:#fff; font-size:1.6rem; display:block;}
nav .depth2 li a {font-size:14px;}
.login_box li a {font-size:1.4rem;}
.m_menu, .m_user, .m_close  {display:block; position: absolute; top:50%; }
.m_menu { right:3rem; ; margin-top:-16px; }
.pc .header_wrap > h1 { position: absolute; left:3rem; top:1rem; }
.pc .header_wrap > h1 a { display: block;}
.pc nav > ul { text-align:center; }
.pc nav > ul > li { position: relative; display:inline-block; color:#fff;  font-weight: 500; padding:10px 20px; margin: 0 20px; }
.pc nav > ul > li > a {line-height:72px; position:relative; font-weight: 500; z-index: 1;  font-size:22px; letter-spacing:0.02em;} 
.pc nav > ul > li > a:before {position:absolute; left:-20px; top:17px; bottom:0; height:40px; right:-20px; background:#f7ff14; border-radius: 30px; content: ''; display:none; color:#fff; z-index: -1; }
.pc nav .depth2 {display: none; position: absolute; left: 0; top: 80px; width: auto; padding:8px 14px; text-align: center; z-index: 99; background:rgba(0,0,0,0.6); border:1px #000 solid; border-radius: 20px;  }
.pc nav .depth2 li {display:block; margin:0; }
.pc nav .depth2 li a { display:block; width:100%; padding:0; margin: 10px auto; color:#fff; letter-spacing: 0.02em; font-weight: 200; font-size:14px; line-height: 1.4; word-break:break-all; text-transform:uppercase;  text-align: center; }
.pc nav .depth2 li a img {opacity: 0.5; filter: alpha(opacity=50);}
.pc nav .depth2 li a span {display:block; margin-top:11px; line-height: 16px;}
.pc nav .depth2 li a:hover {color:#f7ff14;}
.pc nav .depth2 li.line2 a span {margin-top:3px;}
.pc nav > ul > li:hover ul {display:block;}
.pc nav > ul > li:hover > a {color:#000;}
.pc nav > ul > li:hover > a:before {display:block;}
.pc nav ul.lang { position: absolute; right:3rem; top:50%; transform:translate(0 , -50%);  }
.pc nav ul.lang li { position: relative;  display: inline-block; padding:5px;}
.pc nav ul.lang li.on { }
.pc nav ul.lang li a { color:#c5c5c3; letter-spacing: 0.02em; font-weight: 300; font-size:17px; line-height:1;}
.pc nav ul.lang li a:hover { color:#f7ff14; background: none;  }
.pc nav ul.lang li a:before { display: none; }
.pc nav ul.lang li.on a { color:#f7ff14; }
.pc nav ul.lang li.eng:after { position: absolute; top:50%; height:17px; display: inline-block; content: ''; right:-20px; transform:translate(0 , -50%); width:1px; background:rgba(255,255,255,0.5);   }
.pc nav ul.lang li.kor {}

.pc .m_menu, .pc .m_user, .pc .m_close {display:none;}
.header_wrap {  }
.header_wrap h1 { position:absolute; left:20px; }

ul.common_sns {padding:5rem 0; }
ul.common_sns li { width:60px; height: 60px; display: inline-block; margin:0 2rem; font-size:0; } 
ul.common_sns li a {width:100%; height:100%; display:block; background-position:0 0; background-repeat:no-repeat;}
ul.common_sns li a:hover {  transition: none; background-position:0 -60px; }
ul.common_sns li.youtube a { background-image: url(../../images/common/sns_youtube_n2.png);  }
ul.common_sns li.facebook a { background-image: url(../../images/common/sns_facebook_n.png); }
ul.common_sns li.twitter a { background-image: url(../../images/common/sns_twitter_n.png); }
ul.common_sns li.LinkedIn a { background-image: url(../../images/common/sns_LinkedIn_n.png); }


.btn_top { position:fixed; width: 5rem; height: 5rem; display:inline-block; bottom: 2rem; right: 2rem; z-index: 5; line-height:5rem; }
.btn_top a { display: block; width:100%; height:100%; background: rgba(0,0,0,0.8); border:1px rgba(0,0,0,0.3) solid; border-radius: 50%; }
.btn_top a img {width:2.4rem; vertical-align:middle; position:relative; top:-2px;}
.btn_top a:hover { background: #000; border:1px #000 solid; }

body.error_full { background: #488dff; }
.error { width:100%; height: 100%; }
.error h1 { width: 100%; background: #1d3866; padding: 50px 0; text-align: center; }
.error .error_wrap { padding: 20rem 2rem; color: #fff; }
.error .error_wrap .kr { font-size: 5rem; font-weight: 400; margin-bottom: 30px;  line-height: 6rem; }
.error .error_wrap .en { font-size: 2.6rem; font-family: 'Tomorrow', sans-serif; text-transform:uppercase;  font-weight: 300; line-height: 3rem; }
body.error_full footer p { color:#fff; padding:0 2rem; }


/*---------------------------------------------------------------------RESPONSE----------------------------------------------------*/

@media screen and (max-width: 1450px)  {

}

@media screen and (max-width: 1280px)  {
nav li { margin:0 20px; }
.pc nav > ul > li { padding:10px 5px; }
.pc nav > ul > li > a {font-size:20px;}

}

@media screen and (max-width: 1023px) {
.pc {display:none;}	
.mobile {display:block;}
.btn01 {border:2px solid #dd0000 !important; background:none !important; color:#dd0000 !important; border-radius: 0;}	
#layer_popup { width: auto; margin-top: 0;  margin-left: 0;  position: absolute;  top: 2.5rem;  left: 2.5rem;  right: 2.5rem;  bottom: 2.5rem;}
#layer_popup > iframe {height:100%;}
	
/* gnb */
.m_close {right:2rem; top:2rem;}
.mp .header_wrap { }
.mp .header_wrap > h1 {height:100%; text-align: center;}	
.mp .header_wrap > h1 a {display:inline-block; height:auto;}
.mp .header_wrap > h1 a img {position:relative; top:8px;}
.mp nav	{ position: fixed; left: 0; right: 9.6rem; top: 0; bottom: 0;  width: 100%; background: #488dff; opacity: 0;  transform: translateX(-150%); transition: all 0.7s ease-in-out; overflow:hidden; -ms-overflow-style: none; z-index:-1; }
.mp nav.active {opacity: 1; transform: translateX(0); transition: transform 0.7s ease-in-out; z-index:101;}
.mp nav h1 { position: relative; width: 100%; height:80px; left:0; right:0; background: #1d3866; text-align: left; margin: 0;}	
.mp nav h1 a {display:inline-block; line-height: 80px;}
.mp nav h1 a img {vertical-align: middle; position: relative; top:-4px; left:2rem; }
.mp nav > ul > li { margin:0; text-align: left; }
.mp nav > ul > li > a { position: relative;  padding:3rem; text-transform:uppercase; }
.mp nav > ul > li.in_ul > a {transition:none; }	
.mp nav > ul > li.in_ul > a.on { position: relative; background-position: right 4rem top -5rem; color:#f7ff14; }
.mp nav .depth2 { display:none; position: relative; margin:0 3rem;  width: 40%; padding:3rem 0; text-align: center; z-index: 99; background:rgba(0,0,0,0.6); border:1px #000 solid; border-radius: 2rem; }	
.mp nav .depth2 li {margin:0;}
.mp nav .depth2 li a {  padding:1.2rem 0; text-transform:uppercase;}
.mp nav .depth2 li a br { display:none;}
.mp nav .depth2 li a img { display:none;}
.mp nav ul.lang { position: relative; margin:3rem 3rem 0;   border-top:1px rgba(255,255,255,0.6) solid; text-align: left; font-size:0; padding-top:3rem;}
.mp nav ul.lang li { position: relative;  display: inline-block;   font-size:17px; font-weight: 200; }
.mp nav ul.lang li.on { }
.mp nav ul.lang li a { color:#fff; letter-spacing: 0.02em; font-weight: 300; font-size:17px; padding:0; }
.mp nav ul.lang li a:hover { color:#f7ff14; background: none;  }
.mp nav ul.lang li a:before { display: none; }
.mp nav ul.lang li.on a { color:#f7ff14; }
.mp nav ul.lang li.eng:after { position: absolute; top:50%; right:-3rem;  display: inline-block; content: '|'; transform:translate(0 , -50%); color:rgba(255,255,255,0.5);   }
.mp nav ul.lang li.kor {margin-left:6rem; }

}

@media screen and (max-width: 768px) {
html {font-size:32%;}
.m_menu, .m_user {width:24px;}
.m_close {top:3rem; right:3rem;}	
.m_menu {margin-top:-8px;}
.m_user {margin-top:-12px;}
.mp .header_wrap {height:60px; }	
.mp .header_wrap > h1 a {line-height:60px; }
.mp .header_wrap > h1 a img {width:120px; top:-2px;}
.m_close {width:16px; }
.mp nav h1 a img {width:120px; left:auto;}
.mp nav h1 {height:50px; padding: 0 3rem;}
.mp nav h1 a {line-height:50px;}
.mp nav > ul > li.in_ul > a {background-size:18px auto;}
.mp nav > ul > li > a {font-size:3.1rem;}
.mp nav .depth2 li a {font-size:2.3rem;}
.mp nav ul.lang li a {font-size:3.1rem;}
ul.common_sns li a {background-size:100% auto;}
.btn_top {width:7rem; height:7rem; line-height:7rem;}
footer p {font-size:2.5rem;}

}