@charset "utf-8";
@import url('/common/css/GmarketSans.css');
@import url('/common/css/NEXONLv2.css');

html {font-size:10px;}
body { font-size:1.8rem; font-family:'NEXONLv2', sans-serif; font-weight:400; line-height:1.7; letter-spacing:-0.1px; color:#3f434b; word-break:keep-all; }
a {color:#3f434b; }
input, select, textarea { font-size:1.8rem; font-family:'NEXONLv2', sans-serif; font-weight:400; }
@media all and (max-width:1600px){
  html {font-size:9px;}
}
@media all and (max-width:768px){
  html {font-size:8px;}
}

.lang{z-index:555; float:right; position:absolute; right:10%; padding-right:0%; border:0px solid red; padding-top:10px; top:10px; }
.lang a { padding:5px 10px; background:#254a9f; color:#fff; border-radius:10px; }



#quick { position:fixed; height:22rem; left:2rem; top:55%; transform:translate(0,-50%); z-index:110; }
#quick > a {display:block; position:absolute; left:0; top:50%; width:8rem; height:8rem; background:#254a9f url('/img/layout/quick_icon1.png') no-repeat center; border-radius:50%; text-indent:-9999px; transform:translate(0,-50%); z-index:20; }
#quick div > a { position:absolute; left:0; top:40%; white-space:nowrap; display:block; font-family:'GmarketSans', sans-serif; font-size:2rem; min-width:4.5rem; height:4.5rem; line-height:4.5rem; transition:all 0.5s; opacity:0; box-shadow:1px 1px 3px rgba(0,0,0,0.3); border-radius:4rem; z-index:10; }
#quick div > a:hover {z-index:20;}
#quick div > a span {display:none; background:#fff; padding:0 2rem 0 5rem; border-radius:4rem; }
#quick div > a:hover span {display:block;}
#quick div > a::before {content:''; position:absolute; left:0; top:0; width:4.5rem; height:4.5rem; background:#fff url('/img/layout/quick_icon2.png') no-repeat 0 0/400% auto; border-radius:50%; }
#quick.on div > a:nth-of-type(1) {top:0; left:4rem; opacity:1;}
#quick.on div > a:nth-of-type(2) {top:5rem; left:10rem; opacity:1;}
#quick.on div > a:nth-of-type(3) {top:12rem; left:10rem; opacity:1;}
#quick.on div > a:nth-of-type(4) {top:17rem; left:4rem; opacity:1;}
#quick div > a:nth-of-type(2)::before {background-position:33.33% 0;}
#quick div > a:nth-of-type(3)::before {background-position:66.66% 0;}
#quick div > a:nth-of-type(4)::before {background-position:100% 0;}
@media all and (max-width:1600px){
  #quick {left:3rem; bottom:3rem; top:auto; transform:none; }
  #quick > a {top:auto; bottom:0; transform:none; }
  #quick div > a { bottom:0; top:auto !important;}
  #quick.on div > a:nth-of-type(1) {bottom:13rem; left: 1rem;}
  #quick.on div > a:nth-of-type(2) {bottom: 11rem; left: 7.5rem;}
  #quick.on div > a:nth-of-type(3) {bottom: 7rem; left:12rem;}
  #quick.on div > a:nth-of-type(4) {bottom: 1rem; left:13rem;}
}
@media all and (max-width:480px){
  #quick {display:none;}
}

#header {position:fixed; left:0; top:0; width:100%; z-index:100; transition:0.3s; }
#header h1 { float:left; margin:2rem 0 0 18rem; }
#header h1 a { display:block; width:20rem; height:10rem; background:url('/img/layout/logo.png') no-repeat 0 0/auto 200%; text-indent:-99999px; transition:0.3s; }
#nav {float:right; margin:5rem 27rem 0 0;}
#nav ul.depth1 > li {float:left;}
#nav ul.depth1 > li > a { display:block; font-family:'GmarketSans', sans-serif; color:#fff; font-size:2rem; padding:2rem; text-align:center; transition:0.3s;}
#nav ul.depth2 { margin:0 1rem 3rem 1rem; height:0; overflow:hidden;}
#nav ul.depth2 a { display:block; padding:0.5rem 0;}
#nav ul.depth2 a:hover {color:#254a9f; font-weight:600;}
#menuOpen {position:absolute; right:18rem; top:5rem; width:7rem; height:7rem; background:#fff; border-radius:50%; text-indent:-99999px; transition:0.3s; }
#menuOpen::before {content:''; position:absolute; left:50%; top:50%; width:3.2rem; height:2.3rem; background: url('/img/layout/menuOpen.gif') no-repeat 0 0/auto 200%; transform:translate(-50%, -50%); transition:0.3s; }

#header.on {background:#fff;}
#header.on h1 a {background-position:0 100%;}
#header.on #nav > ul > li > a {color:#3f434b;}
#header.on #menuOpen { background:#3f434b; }
#header.on #menuOpen::before { background-position:0 100%; }

#header.hover {background:#fff;}
#header.hover h1 a {background-position:0 100%;}
#header.hover #nav > ul > li > a {color:#3f434b;}
#header.hover #menuOpen { background:#3f434b; }
#header.hover #menuOpen::before { background-position:0 100%; }
#header.hover #nav ul.depth2 { height:auto; }

@media all and (max-width:1700px){
  #nav ul.depth1 > li > a {padding:2rem 1.5rem;}
}
@media all and (max-width:1600px){
  #header h1 {margin:2rem 0 0 3rem; }
  #menuOpen {right:3rem;}
  #nav {margin:5rem 11rem 0 0;}
}
@media all and (max-width:1200px){
  #nav {display:none;}
}
@media all and (max-width:1023px){
  #header {height:8.5rem;}
  #header h1 {margin:1rem 0 0 2rem; }
  #header h1 a { height:6rem; }
  #menuOpen {width:5rem; height:5rem; right:2rem; top:1.8rem;}
  #menuOpen::before {width:2rem; height:2rem; }
}

.blackBg::before {content:''; position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.7; z-index:199; }
#mnav {position:fixed; left:0; top:-100%; width:100%; height:100%; overflow-y:auto; z-index:200; transition:all 0.5s; }
#mnav div {position:relative; z-index:20; padding:15rem 6rem 6rem; overflow-y:auto; }
#mnav div a {display:block; color:#fff; font-size:2.3rem;  }
#mnav .depth1 > li:first-of-type {border-top:0; }
#mnav .depth1 > li { border-top:1px solid rgba(255,255,255,0.4); }
#mnav .depth1 > li > a { position:relative; font-family:'GmarketSans', sans-serif; font-size:3rem; padding:1rem; }
#mnav .depth1 > li > a::before {content:''; position:absolute; right:2rem; top:2rem; width:1.2rem; height:1.2rem; border-bottom:4px solid #fff; border-right:4px solid #fff; transform:rotate(45deg); transition:0.3s; }
#mnav .depth1 > li.on > a::before { top:3rem; transform:rotate(-135deg);}
#mnav .depth2 { display:none; padding:1rem 2rem; }
#mnav .depth2 > li > a { padding:0.5rem 0; }
#mnav .closeBtn { display:block; position:absolute; top:6rem; right:5rem; width:4rem; height:4rem; text-indent:-9999px; z-index:30; }
#mnav .closeBtn::before, #mnav .closeBtn::after {content:''; position:absolute; left:0.5rem; top:2rem; width:100%; height:5px; background:#fff; transform:rotate(45deg); transition: all 0.5s ease 0.1s;}
#mnav .closeBtn::after {transform:rotate(-45deg);}

#footer {padding:0 0 0 14rem;}
#footer > div {background:#f1f1f1; padding:7rem 14rem; }
#footer > div p {display:inline-block; margin:0 2rem 0 0;}
#footer > div p strong {text-transform: uppercase; padding:0 1rem 0 0; }
#footer .copy { font-size:1.4rem; color:#888; padding:2rem 0 0; text-transform:uppercase; }
@media all and (max-width:1600px){
  #footer {padding:0;}
  #footer > div {padding:7rem; }
}

/*sub layout*/
#subTop { position:relative; display:flex; align-items:center; width:calc(100% - 14rem); height:40rem; background:#000; text-align:center; }
#subTop::before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover; background-position:center bottom; opacity:0.7; z-index:10; animation-duration: 10s; animation-name:agencyShadow; }
@keyframes agencyShadow {
  0% { background-position:center top;  }
  100% { background-position:center bottom; }
 }
#subTop.img1::before { background-image:url('/img/layout/subVisual.jpg');}
#subTop.img2::before { background-image:url('/img/layout/subVisual2.jpg');}
#subTop.img3::before { background-image:url('/img/layout/subVisual3.jpg');}
#subTop.img4::before { background-image:url('/img/layout/subVisual4.jpg');}
#subTop.img5::before { background-image:url('/img/layout/subVisual5.jpg');}
#subTop.img6::before { background-image:url('/img/layout/subVisual6.jpg');}
#subTop.img7::before { background-image:url('/img/layout/subVisual7.jpg');}
#subTop h2 { position:relative; margin:6rem auto 0; color:#fff; font-family:'GmarketSans', sans-serif; font-size:6rem; z-index:20; }
#subTap {margin:0 auto 5rem;}
#subTap a {display:inline-block; padding:0.7rem 2.2rem; }
#subTap a:hover, #subTap a.on { background:#254a9f; color:#fff; border-radius:3rem; }
#contents { padding:6rem 0; }
@media all and (max-width:1600px){
  #subTop {width:100%;}
}
@media all and (max-width:768px){
  #subTop {height:30rem;}
  #subTop h2 { font-size:4rem; margin-top:0rem}
}

#snb { position:absolute; left:0; bottom:0; width:100%; z-index:10; text-align:left; }
#snb::before {content:''; position:absolute; right:-14rem; bottom:0; width:14rem; height:7rem; background:#fff; }
#snb .wrap {position:relative;}
#snb .wrap::before {content:''; position:absolute; left:0; top:0; width:200rem; height:7rem; background:rgba(0,33,99,0.6); z-index:-1;}
#snb a.prev { display:block; float:left; width:7rem; height:7rem; line-height:7rem; color:#fff; background:#222; text-align:center;}
#snb ul {float:left; width:calc(100% - 7rem); }
#snb ul li { position:relative; float:left; width:25%;}
#snb ul li > a { position:relative; display:block; line-height:7rem; padding:0 2rem; color:#fff; border-right:1px solid rgba(255,255,255,0.2); white-space:nowrap; text-overflow:hidden; }
#snb ul li > a  br { display:none }
#snb ul li > a span br { display:none }
#snb ul li > a::before {content:''; position:absolute; right:2rem; top:3rem; width:1rem; height:1rem; border-right:1px solid #fff; border-bottom:1px solid #fff; transform:rotate(45deg); transition:0.3s; }
#snb ul li > a.on::before { transform:rotate(-135deg); top:3.4rem; }
#snb .list { display:none; position:absolute; left:0; top:7rem; width:100%; background:#fff; border:1px solid #ddd; padding:2rem; }
#snb .list a { display:block; padding:0.5rem 0; }
#snb .list a.on, #snb .list a:hover {color:#254a9f; font-weight:600;}
@media all and (max-width:1023px){
  #snb ul li { width:33.33%;}
}
@media all and (max-width:480px){
  #snb .wrap {width:100%;}
  #snb ul li { width:50%;}
}
#footer  {position:relative;}

#header a.youtube {position:absolute; top:61px; right:15px;}
#header  a.youtube svg {width:40px; height:50px; color:red }



#footer a.youtube {position:absolute; top: 11px; right:20px;}
#footer a.youtube svg {width:40px; height:50px; color:red }






@media all and (min-width:1024px){
#footer a.youtube {top: 65px; right:110px;}
#footer a.youtube svg {width:50px; height:60px; }
#header a.youtube {top: 50px; right:75px;}
#header  a.youtube svg {width:50px; height:60px; }

}