@charset "utf-8";

.wrap { width:96%; max-width:1460px; margin:0 auto; }
.bodyBg {overflow-x:hidden;}
.bodyBg::after {content:''; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:210; }
.noScroll {overflow:hidden;}

#header { position:fixed; left:0; top:0; width:100%; height:10rem; text-align:center; background:#fff; z-index:200; }
#header h1 { position:absolute; left:6rem; top:1.5rem; }
#header h1 a {display:block; width:21.6rem; height:6.2rem; background:url('../img/layout/logo.png') no-repeat center/cover; text-indent:-9999px; }
#header .btn {position:absolute; right:12rem; top:3rem; }
#header .btn a { float:left; display:block; font-size:1.5rem; text-transform:uppercase; padding:1rem 0; margin:0 1.5rem; }
#header .btn a.eng {background:url('../img/layout/engIcon.png') no-repeat left center; padding:1rem 0 1rem 2.5rem; }
#navOpen {position:absolute; right:6rem; top:2.5rem; width:5rem; height:5rem; background:url('../img/layout/navOpen.png') no-repeat center/cover; text-indent:-9999px; }
@media all and (max-width:1520px){
  #header h1 {left:2%;}
  #navOpen {right:2%;}
  #header .btn {right:6%;}
}
@media all and (max-width:1023px){
  #header {position:relative; }
  #header .btn {display:none;}
}

#nav {display:inline-block; margin:2rem 0 0;}
#nav .depth1 > li { position:relative; float:left; }
#nav .depth1 > li > a { display:block; font-size:2.2rem; font-weight:400; padding:1.5rem 4rem;  }
#nav .depth1 > li > a.on {color:#0062c7;}
#nav .depth2 { display:none; position:absolute; left:50%; top:7rem; width:20rem; padding:2rem 3rem; background:#0062c7; z-index:200; transform:translate(-50%, 0); }
#nav .depth2 > li > a {display:block; color:#fff; padding:0.5rem; }
#nav .depth3 { display:none; }
@media all and (max-width:1023px){
  #nav {display:none;}
}


#mnav { display:none; position:fixed; right:0; top:0; width:100%; height:100%; z-index:300; }
#mnav::before {content:''; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10;}
#mnav > div { position:absolute; right:-30rem; top:0; background:#fff; width:30rem; height:100%; overflow-y:auto; z-index:20; transition:all 0.5s ease-in-out; transition-delay:0.3s; }
#mnav  a.logo { display:block; width:21.6rem; height:6.2rem; background:url('../img/layout/logo.png') no-repeat center/cover; text-indent:-9999px; margin:5rem auto 3rem; }
#mnav .btn {width:96%; margin:0 auto 1rem; overflow:hidden; }
#mnav .btn a { display:block; float:left; width:48%; border:1px solid #ccc; text-align:center; border-radius:0.5rem; margin:0 0 1rem 4%; padding:0.5rem; text-transform:uppercase; font-size:1.4rem; }
#mnav .btn a:first-child {margin: 0 0 1rem; }
#mnav .btn a.eng { width:100%; margin: 0 0 1rem; }
#mnav .btn a.eng span {display:inline-block; background:url('../img/layout/engIcon.png') no-repeat left center; padding-left: 3rem; }
#mnav .depth1 { border-top:1px solid rgba(0,0,0,0.1); }
#mnav .depth1 > li > a { display:block; font-size:1.7rem; padding:1rem 2rem; border-bottom:1px solid rgba(0,0,0,0.1); background:#fff; font-weight:600; }
#mnav .depth1 > li > a.on {background:#0062c7; color:#fff; }
#mnav .depth2 { display:none; background:#cde6fc; border-bottom:1px solid rgba(0,0,0,0.1); }
#mnav .depth2 > li > a { display:block; font-size:1.5rem; padding:0.7rem 2rem; border-top:1px solid rgba(0,0,0,0.1); }
#mnav .depth2 > li > a.on { background:#666; color:#fff; }
#mnav .depth3 { display:none; background:#f2f2f2; padding:1.5rem 2rem;}
#mnav .depth3 a {position:relative; display:inline-block; font-size:1.5rem; padding:0.5rem 0 0.5rem 13px; }
#mnav .depth3 a::before {content:''; position:absolute; left:0; top:1.3rem; width:4px; height:4px; border-radius:50%; background:#333; }
#navClose { display:block; position:absolute; right:1rem; top:1rem; width:3rem; height:3rem; text-indent:-9999px; }
#navClose::before, #navClose::after {content:''; position:absolute; left:50%; top:0; width:1px; height:100%; background:#333; transform:rotate(45deg); }
#navClose::after { transform:rotate(-45deg); }

#footer {background:#2d3034; padding:5rem 0; color:#fff; }
#footer .wrap {position:relative; padding-left:33rem; }
#footer a.fLogo {display:block; position:absolute; left:0; top:1rem; width:21.5rem; height:6.1rem; background:url('../img/layout/f_logo.png') no-repeat center/cover; text-indent:-9999px;  }
#footer .link {overflow:hidden;}
#footer .link a { position:relative; display:block; float:left; padding-right:4.4rem; color:#fff; }
#footer .link a:first-child {color:#9eceff; }
#footer .link a:last-child {padding-right:0;}
#footer .link a::before {content:''; position:absolute; top:50%; right:2.2rem; width:1px; height:1.4rem; margin-top:-0.7rem; background:#fff; opacity:0.2; }
#footer .link a:last-child::before {display:none;}
#footer .address {margin:3rem 0 1rem; }
#footer .address p {display:inline-block; margin-right:3rem; }
#footer .copy { font-size:1.3rem; text-transform:uppercase; font-weight:300; opacity:0.5; }
@media all and (max-width:1023px){
  #footer .wrap {padding-left:0;}
  #footer a.fLogo {display:none;}
}


/*sub layout*/
#subBg {position:relative; -webkit-animation:animate_background 20s linear;-moz-animation:animate_background 20s linear;-o-animation:animate_background 20s linear;animation:animate_background 20s linear;}
#subBg::before {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.5; z-index:10; }
#subBg.bg1 {background:url('../img/main/visualImg1.jpg') no-repeat 50% 15%/cover; }
/* 서브비주얼 애니메이션 */
@keyframes animate_background{
	0%{background-position:50% 0;}
	15%{background-position:50% 15%;}
	50%{background-position:50% 50%;}
}

#subBg .wrap {position:relative; z-index:20; color:#fff; text-align:center; }
#subBg h2 { font-family:'NEXONLv1', sans-serif; font-size:4.5rem; line-height:1.3; padding:6rem 0 4rem;  }
#subBg h2 span { position:relative; display:block; font-size:1.5rem; text-transform: uppercase; padding-bottom:4rem; }
#subBg h2 span::before {content:''; position:absolute; left:50%; bottom:2rem; width:40px; height:1px; margin-left:-20px; background:#fff; opacity:0.5; }
#subBg .drag { display:none; position:absolute; bottom:5.5rem; left:50%; background:rgba(0,0,0,0.4); color:#fff; padding:0 2rem; border-radius:3rem; font-size:14px; text-align:center; transform:translate(-50%, 0); }
#subBg .drag span { display:inline-block; background:url('../img/layout/dragIcon.png') no-repeat 0 center; padding:7px 0 7px 50px; }
@media all and (max-width:480px){
  #subBg {text-align:center;}
  #subBg h2 {font-size:3.2rem;}
}

#snav a { position:relative; display:inline-block; width:auto !important; color:#fff; font-size:1.8rem; padding:1.5rem 2rem; }
#snav a.on, #snav a:hover {color:#01aef0; font-weight:600;}
#snav a.on::before, #snav a:hover::before {content:''; position:absolute; left:2rem; bottom:0; width:calc(100% - 4rem); height:4px; background:#01aef0;}
@media all and (min-width:481px){
  #snav .swiper-wrapper {justify-content: center;}
}

.h3 {overflow:hidden; margin-top:5rem;}
.h3 h3 { float:left; font-size:3.5rem; }
.h3 h3 span { display:inline-block; position:relative; padding-right:30px; }
.h3 h3 span::before {content:''; position:absolute; right:0; bottom:0.7rem; width:10px; height:10px; border-radius:50%; background:#0062c7; }
.h3 .loca { float:right; position:relative; background:#fff; padding:2rem 0 0; overflow:hidden; }
.h3 .loca li { position:relative; float:left; color:#222; padding-right:4rem;}
.h3 .loca li:last-child {font-weight:600; padding-right:0; }
.h3 .loca li::before { content:''; position:absolute; right:2rem; top:0.8rem; width:0.6rem; height:0.6rem; border-top:2px solid #999; border-right:2px solid #999; transform:rotate(45deg); }
.h3 .loca li:last-child::before {display:none;}
@media all and (max-width:480px){
  .h3 h3 {font-size:3rem;}
}

.tnavi {text-align:center; margin-top:2rem;}
.tnavi a { position:relative; display:inline-block; margin:0.2rem 2rem; font-size:2rem;}
.tnavi a.on, .tnavi a:hover { font-weight:600; padding-left:2rem; }
.tnavi a.on::before, .tnavi a:hover::before {content:''; position:absolute; left:0; top:0.6rem; width:0.6rem; height:1rem; border-bottom:4px solid #0062c7; border-right:4px solid #0062c7; transform:rotate(45deg); }

#content {padding:5rem 0;}