@charset "utf-8";

/* skip nav */
.skip-nav { position:absolute; left:0; top:-50px; z-index:9999; }
.skip-nav li {width:200px;}
.skip-nav a { position:absolute; left:0; top:0; display:block; width:100%; height:50px; line-height:50px; color:#fff; background:#002960; text-align:center;}
.skip-nav a:focus { top:50px; }

/*#wrap{min-width:1460px;}*/
/* weven 추가 */
#wrap{min-width:1520px;}
/* //weven 추가 */

/* header */
#header{height:80px; position:absolute;left:0;top:0;right:0; z-index:90;min-width:1520px;}
#header.scrolled{position:fixed;background-color:#fff; border-bottom:1px solid #ddd;}
#header.over {background-color:#fff; border-bottom:1px solid #ddd;}

.header-inner{max-width:1920px;min-width:1460px;padding:0 60px;margin:0 auto;display:flex;box-sizing:border-box;}
.header-inner h1{height:80px; margin-right:40px;}
.header-inner h1 a{display:flex; width:155px; height:100%; background:url(//static-hosting.nhn.com/imghs/cloudhost/layout/nhnHosting_white.png) center center no-repeat; background-size: 80px; text-align:left; text-indent:-9999px;}

#gnav{height:80px;}
#gnav .gnav-list{display:flex; height:100%;}
#gnav .gnav-list > li > a{height:100%; color:#fff; font-size:16px; padding:0 20px; display:flex; align-items:center; transition:all 0.3s; position:relative;}
#gnav .snav{position:absolute; left:0; top:calc(100% + 1px); right:0; background-color:#fff; height:90px; display:none;}
#gnav .snav ul{display:flex; max-width:1920px; min-width:1460px; margin:0 auto; box-sizing:border-box; border-bottom:1px solid #dddddd;}
#gnav .snav li{margin-right:40px;}
#gnav .snav li:last-child{margin-right:0;}
#gnav .snav a{display:block;height:90px; line-height:90px; transition:all 0.3s; font-size:1.6rem;}
#gnav .snav a:hover{color:#125DE6;}
/*#gnav .m2 .snav ul{padding-left:422px;}*/
/*#gnav .m3 .snav ul{padding-left:538px;}*/
/*#gnav .m4 .snav ul{padding-left:275px;}*/

/* weven �߰� */
#gnav .m2 .snav ul{padding-left:538px;}
#gnav .m3 .snav ul{padding-left:658px;}
#gnav .m4 .snav ul{padding-left:235px;}
/* //weven �߰� */

#gnav .gnav-list > li.active .snav{display:block;}

.header-inner .header-links{margin-left:auto; padding:22px 0 0 0; display:flex;}
.header-inner .header-links .go-domain{display:inline-flex; align-items:center; height:36px; box-sizing:border-box; border:1px solid #fff; border-radius:18px; padding:0 15px; font-size:16px; color:#fff; transition:all 0.3s;}
.header-inner .header-links ul{margin-left:30px; height:36px; display:flex; align-items:center; position:relative;}
.header-inner .header-links ul:before{display:block; content:''; width:1px; height:16px; background-color:#ffff; position:absolute; left:0; top:50%; margin-top:-8px; opacity:0.8; }
.header-inner .header-links ul li{margin-left:30px;}
.header-inner .header-links ul a{color:#fff; font-size:15px; line-height:36px; transition:all 0.3s;}

.over h1 a{background-image:url(//static-hosting.nhn.com/imghs/cloudhost/layout/nhnHosting_black.png);}
.over #gnav .gnav-list > li > a{color:#333}
.over #gnav .gnav-list > li > a:hover{color:#125DE6;}
.over #gnav .gnav-list > li.active > a{color:#125DE6;position:relative;}
.over #gnav .gnav-list > li.active > a:after{display:block; content:''; position:absolute; left:20px; right:20px; bottom:-1px; height:3px; background-color:#125DE6;}
.over .header-inner .header-links .go-domain{border-color:#125DE6; color:#125DE6;}
.over .header-inner .header-links .go-domain:hover{border-color:#0042C6; color:#0042C6;}
.over .header-inner .header-links ul a{color:#333}
.over .header-inner .header-links ul:before{background-color:#ddd; opacity:1;}
.over .header-inner .header-links ul a:hover{color:#125DE6;}


.scrolled h1 a{background-image:url(//static-hosting.nhn.com/imghs/cloudhost/layout/nhnHosting_black.png);}
.scrolled #gnav .gnav-list > li > a{color:#333}
.scrolled .header-inner .header-links .go-domain{border-color:#125DE6; color:#125DE6;}
.scrolled .header-inner .header-links ul a{color:#333}
.scrolled .header-inner .header-links ul:before{background-color:#ddd; opacity:1;}

/* AppPaaS */
#gnav .gnav-list > li > a.btn-menu-apppaas {position:relative;width:76px;background:url('//static-hosting.nhn.com/imghs/apppaas/Non_Hover.png') no-repeat center center;background-size:95px 20px;}
.over #gnav .gnav-list > li > a.btn-menu-apppaas{width:76px;background:url('//static-hosting.nhn.com/imghs/apppaas/Hover.png') no-repeat center center;background-size:95px 20px;}
#gnav .gnav-list li.apppaas-menu {position: relative;}
#gnav .gnav-list > li > .apppaas-msg{display:none;position:absolute;bottom:-30px;left:50%;margin-left:-82px;justify-content:center;align-items:center;width:164px;height:48px;background:url('//static-hosting.nhn.com/imghs/weven/layout/weven-msgbox.png') no-repeat center center;}
#gnav .gnav-list > li > .apppaas-msg > a {display:flex;position:relative;top:3px;width:160px;height:36px;justify-content:center;align-items:center;font-size:1.4rem;font-weight:600;color:#0F84FF;background-color:#fff;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px; -o-border-radius:50px;}
.over #gnav .gnav-list > li.apppaas-menu.active > .apppaas-msg{display:flex;}
.scrolled #gnav .gnav-list > li > a.btn-menu-apppaas{width:76px;background:url('//static-hosting.nhn.com/imghs/apppaas/Hover.png') no-repeat center center;background-size:95px 20px;}

/* weven add */
#gnav .gnav-list > li > a.btn-menu-weven {position:relative;width:76px;background:url('//static-hosting.nhn.com/imghs/weven/layout/weven-logo-gnb-white.png') no-repeat center center;background-size:76px 30px;}
.over #gnav .gnav-list > li > a.btn-menu-weven{width:76px;background:url('//static-hosting.nhn.com/imghs/weven/layout/weven-logo-gnb.png') no-repeat center center;background-size:76px 30px;}
#gnav .gnav-list li.weven-menu {position: relative;}
#gnav .gnav-list > li > .floating-msg{display:none;position:absolute;bottom:-30px;left:50%;margin-left:-82px;justify-content:center;align-items:center;width:164px;height:48px;background:url('//static-hosting.nhn.com/imghs/weven/layout/weven-msgbox.png') no-repeat center center;}
#gnav .gnav-list > li > .floating-msg > a {display:flex;position:relative;top:3px;width:160px;height:36px;justify-content:center;align-items:center;font-size:1.4rem;font-weight:600;color:#4EB0AC;background-color:#fff;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;-ms-border-radius:50px; -o-border-radius:50px;}
.over #gnav .gnav-list > li.weven-menu.active > .floating-msg{display:flex;}
.scrolled #gnav .gnav-list > li > a.btn-menu-weven{width:76px;background:url('//static-hosting.nhn.com/imghs/weven/layout/weven-logo-gnb.png') no-repeat center center;background-size:76px 30px;}
/* //weven add */

/* sub */
#contents{position:relative; width: 100%; min-height: 1000px;}
#contents:before{display:block; content:''; width:1240px; height:60px; background-color:#fff; position:absolute; left:50%; top:-60px; margin-left:-620px;z-index:1;}
.sub-page #contents:before{display: none;}

/* lnb */
.sub-page .sub-container{display: flex;}
.lnb-wrap {position: relative; flex-shrink: 0; width: 290px; border-right: 1px solid #E5E5E5; box-sizing: border-box;}
.lnb-wrap .lnb-inner{position: fixed; top:80px; bottom:auto; width: 290px; padding-left: 60px; box-sizing: border-box;}
.lnb-wrap .lnb-title{font-size:26px; line-height: 39px;padding:44px 0 31px}
#lnb > ul > li > a{position: relative; display: block; font-size: 1.5rem; line-height:22px; padding:13px 0;}
#lnb > ul > li > a.arr:before{content: "";position: absolute;right:36px;top:50%;transform: translateY(-50%);width:8px;height:2px;background-color: #222;}
#lnb > ul > li > a.arr:after{content: "";position: absolute;right:39px;top:50%;transform: translateY(-50%);width:2px;height:8px;background-color: #222;}
#lnb ul li a.active{color:#125DE6;}
#lnb > ul > li > a.arr.active::before{background-color:#125DE6;}
#lnb > ul > li > a.arr.active::after{display: none;}
#lnb > ul > li > a.active + .depth2{display: block;}
#lnb .depth2{display: none;}
#lnb .depth2 li a{display: block; font-size: 1.3rem; line-height:20px; padding:8px 0 8px 20px;}

.sub-page #contents .inner{max-width:1140px; width: 100%; margin: 0 auto; padding:160px 15px 0;}

/* footer */
#footer{background-color:#222; padding:40px 0 60px;}
.footer-inner{max-width:1920px;min-width:1460px;padding:0 60px;margin:0 auto;display:flex;box-sizing:border-box;}

.footer-inner .f-logo img{width:152px; /*height:48px;*/}
.footer-inner .f-container{position:relative;margin-left:48px;}

.f-links{display:flex; align-items:center; margin-bottom:40px;}
.f-links li{position:relative;}
.f-links li + li:before{position:absolute; left:-1px; top:50%; margin-top:-6px; display:block; content:''; width:1px; height:13px; background-color:rgba(255,255,255,0.08);}
.f-links li a{font-size:14px; color:#777; padding:0 14px; transition:all 0.3s;}
.f-links a.privacy{color:#fff;}
.f-links li:first-child a{padding-left:0;}
.f-links a:hover{color:#fff;}

.f-contact{font-size:13px; color:#555; margin-bottom:28px; line-height:1.5em;}
.f-contact ul{display:flex; flex-wrap:wrap;}
.f-contact ul li{margin-right:20px;}
.f-contact .addr{width:100%;}
.f-contact .addr ~ li:last-child{margin-right:20px;}
.f-contact a{font-size:13px; color:#555; text-decoration:underline;}

.f-copyright{font-size:13px; color:#555;}

.f-family-site{position:absolute; right:0; top:0;}
.f-family-site button{width:170px; height:40px; background-color:#2F2F2F; text-align:left; padding-left:10px; color:#777; font-size:14px; position:relative;}
.f-family-site button:before,
.f-family-site button:after{display:block; content:''; background-color:#777; position:absolute; top:50%;}
.f-family-site button:before{width:14px; height:2px; right:13px; margin-top:-1px;}
.f-family-site button:after{width:2px; height:14px; right:19px; margin-top:-7px;}
.family-site-list{position:absolute; left:0; right:0; bottom:100%; text-align:left; background-color:#2F2F2F; box-sizing:border-box; padding:9px 10px; display:none;}
.family-site-list ul{}
.family-site-list ul + ul{border-top:1px solid #555; margin-top:9px; padding-top:9px;}
.family-site-list a{line-height:32px; color:#777; font-size:14px;white-space:nowrap;}
.family-site-list a:hover{color:#ccc;}
.f-family-site.active button:after{display:none;}
.f-family-site.active .family-site-list{display:block;}


/* mobile ****************************************************************************************************************************************** */

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

    .skip-nav { display:none; }

}