@charset "utf-8";

body{font-family:'Montserrat', 'NanumSquare', sans-serif; color:#111;}

@media print {
	body,
	.header{min-width:1600px;}
	
	.header{position:relative !important;}
	
	.header a.goToSaha{display:block !important;}
	.header .gnb{display:inline-block !important;}
	.header .hamburger{display:none !important;}
	
	.inner,
	.full,
	.satisfaction .sf_wrap{margin:0 auto !important;}
	

	.container{padding-top:0 !important;}
	.container .sub.visual{position:relative !important; top:0 !important;}
	.container .contents{top:-17rem !important;}
	
	#skip{display:none;}
	
}

.inner,
.full{max-width:1280px; margin:0 auto;}

@media (max-width:1280px){
    .inner{margin:0 2rem;}
}

::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{width:6px; background:#d1d1d1;}
::-webkit-scrollbar-thumb{background:#555;}

#skip {position:fixed; left:0; top:-10rem; width:100%; z-index:99999}
#skip a:focus {position:absolute; left:0; top:10rem; width:100%; line-height:3rem; height:3rem; background:#009dc8; color:#fff; text-align:center;}




.header{position:fixed; width:100%; height:10rem; line-height:10rem; left:0; top:0; z-index:99; background:#fff; text-align:center; font-size:0; box-shadow:0 0 0 rgba(0,0,0,0); transition:all 0.2s ease;}
.header.sticky{ box-shadow:0 5px 10px rgba(0,0,0,0.05);}
.header .inner{position:relative; max-width:1700px; height:inherit;}

.header .logo{position:absolute; width:30rem; height:inherit; left:0; top:0;}
.header .logo a{position:relative; display:block; height:inherit; background:url(../img/common/mnb_logo.png) no-repeat left center; font-size:0;}


.header .gnb{display:inline-block;}
.header .gnb ul li a{position:relative; display:block; height:10rem; padding:0 2.5rem; font-size:2rem; font-weight:700;}
.header .gnb ul li a::after{display:inline-block; width:1px; height:2rem; right:0; top:50%; margin-top:-1rem; background:#dadcdf;}
.header .gnb ul li:last-child a::after{display:none;}



.header a.goToSaha{position:absolute; height:4.8rem; line-height:4.8rem; border-radius:4.8rem; right:0; top:50%; margin-top:-2.4rem; padding:0 2rem; background:#4482ec; font-size:1.5rem; color:#fff;}
.header a.goToSaha span{padding-left:3rem; background:url(../img/common/icon_home.png) no-repeat left center;}
 

/* 디자인 대기 */
.header .mnb{visibility:hidden; opacity:0; position:fixed; width:100%; height:100vh; line-height:100vh; left:0; top:0; background:#fff url(/comm/assets/img/common/mnb_logo.png) no-repeat center calc(50% - 30vh); font-size:0; transition:all 0.3s ease;}
.header .mnb.active{visibility:visible; opacity:1;}

.header .mnb ul{display:inline-block; line-height:1; vertical-align:middle;}
.header .mnb ul li{float:left; width:15rem; line-height:18rem; border-radius:1rem; border:1px solid #ccc; text-align:center;}


.header .mnb ul li:nth-child(2){margin:0 1rem;}
.header .mnb ul li a{display:block;}
.header .mnb ul li a span{display:inline-block; width:100%; line-height:1.25; vertical-align:middle; padding-top:8rem; font-size:1.7rem; background:no-repeat center top;}

.header .mnb ul li:nth-child(1) a span{background-image:url(/comm/assets/img/common/icon_mnb01.png);}
.header .mnb ul li:nth-child(2) a span{background-image:url(/comm/assets/img/common/icon_mnb02.png);}
.header .mnb ul li:nth-child(3) a span{background-image:url(/comm/assets/img/common/icon_mnb03.png);}

.header .mnb > a{position:absolute; width:100%; height:0; line-height:1; left:0; bottom:12rem; font-size:2rem; color:#333; font-weight:700;}
.header .mnb > a span{position:relative; display:inline-block; line-height:3; padding-left:5rem; background:url(/comm/assets/img/common/icon_mnb_login.png) no-repeat left center;}
.header .mnb > a span::after{display:inline-block; width:8px; height:8px; border-top:1px solid #333; border-right:1px solid #333; right:-3rem; top:50%; margin-top:-5px; transform:rotate(45deg);}


@media (max-width:1024px){
    .header{height:8rem; line-height:8rem;}

    .header .logo a{background-size:15rem;}

    .header .gnb,
    .header a.goToSaha{display:none;}
}

@media (min-width:1024px){
	.header .mnb,
    .header .hamburger{display:none;}
}


@media (max-width:480px){

	.header .mnb{min-height:60rem; padding:0 1rem; background-position:center 2rem; background-size:20rem;}
	.header .mnb ul{width:100%; margin-top:-5rem;}
	.header .mnb ul li{width:100%; padding:2rem 0; line-height:1;}
	.header .mnb ul li:nth-child(2){margin:1rem 0;}
	
	.header .mnb ul li span{padding-top:7rem !important; background-size:5rem !important;}
	
}




 
/* SCSS -> CSS 컨버팅 소스 */
.header .hamburger {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -8px;
    width: 30px;
    height: 16px;
    cursor: pointer;
    z-index: 999;
}
.header .hamburger i {
    position: absolute;
    height: 2px;
    background: #4482ec;
    transition: transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6), width 0.2s ease 0.2s;
}
.header .hamburger i:first-child {
    top: 50%;
    left: 0;
    width: 30px;
    margin-top: -1px;
    transform-origin: 50% 50%;
}
.header .hamburger i:first-child + i {
    top: -2px;
    right: 0;
    width: 20px;
    transform-origin: 0 50%;
}
.header .hamburger i:first-child + i + i {
    bottom: -2px;
    right: 0;
    width: 20px;
    transform-origin: 100% 50%;
}
.header .hamburger.active i:first-child {
    transform: rotate(45deg);
    transition: transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s;
}
.header .hamburger.active i:first-child + i {
    width: 16px;
    transform: translate(0, 9px) rotate(-45deg);
    transition: transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s, width 0.2s ease;
}
.header .hamburger.active i:first-child + i + i {
    width: 16px;
    transform: translate(-15px, -10px) rotate(-45deg);
    transition: transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s, width 0.2s ease;
}





/* GNB 에니메이션 */
.splitting .word,
.splitting .char,
.splitting .whitespace {
  display: inline-block; 
}

.splitting .char {
  position: relative; 
}

.splitting .whitespace{width:0.6rem;}

.splitting .char::before,
.splitting .char::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: inherit;
  user-select: none;
}

.gnb a .char {
	 overflow: hidden;
	 color: transparent;
}
 .gnb a .char:before, .gnb a .char:after {
	 display: block;
	 visibility: visible;
	 font-size:2rem;
     font-weight:700;
	 color: #000;
	 transition: transform 0.5s cubic-bezier(0.9, 0, 0.2, 1);
	 transition-delay: calc(0.2s + ( 0.02s * ( var(--char-index)) ));
}
 .gnb a .char:before {
	 display: inline-block;
	 color: #006699;
	 transition-delay: calc(0.02s * ( var(--char-index)));
}
 .gnb > ul > li:hover a .char:before {
	 transition-delay: calc(0.2s + ( 0.02s * ( var(--char-index)) ));
}
.gnb > ul > li:hover a .char:after {
	 transition-delay: calc(0.02s * ( var(--char-index)));
}
 .gnb a .char:before {
	 transform: translateX(110%);
}
.gnb > ul > li:hover a .char:before {
	 transform: translateX(0%);
}
.gnb > ul > li:hover a .char:after {
	 transform: translateX(-110%);
}
 

/* reveal 이팩트 */

.reveal{position:relative; overflow:hidden;}
.reveal::after {display:inline-block; left:0; top:0; width:100%; height:100%; background:#f0f2f6; transform:translateX(-100%); animation:revealIn 0.6s 0s, revealOut 0.6s 0.6s; animation-fill-mode:both;}

@keyframes revealIn {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes revealOut {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}








/* 풋터 */
#footer{position:relative; padding:50px 0; background:#333; z-index:9;}

#footer .inner{position:relative;}

#footer p span,
#footer p a{margin-right:25px; font-size:14px; color:#a8acb3; line-height:1.5;}
#footer p br{display:none;}

#footer p span:last-child,
#footer p a:last-child{margin-right:0;}

#footer p.copyright{margin-top:10px; color:#a8acb3; font-size:14px;}


#footer .fnb{margin-top:50px;}
#footer .fnb ul{}
#footer .fnb ul li{margin-right:50px;}
#footer .fnb ul li:last-child{margin-right:0;}
#footer .fnb ul li a{font-size:14px; color:#a8acb3;}
#footer .fnb ul li a span{}

#footer #top,
#footer .family{position:absolute; top:0; height:55px; border-radius:8px;}

#footer #top{width:55px; right:0; background:#000 url(/startup/assets/img/common/icon_top.png) no-repeat center; z-index:10;}

#footer .family{right:65px;}
#footer .family button{position:relative; display:block; width:220px; height:inherit; padding:0 20px; text-align:left; border-radius:inherit; background:#fff; font-size:18px; color:#232b39; z-index:3;}
#footer .family button::after{display:inline-block; width:55px; height:100%; right:0; top:0; background:url(/startup/assets/img/common/icon_family_arrow.png) no-repeat center; transform:rotate(180deg);}
#footer .family button.on::after{transform:rotate(0deg);}

#footer .family ul{display:none; position:absolute; width:100%; left:0; bottom:40px; padding-bottom:15px; border-bottom:0; border-radius:8px; background:#f8f8f8; z-index:2;}
#footer .family ul li{}
#footer .family ul li a{display:block; padding:0 20px; border-bottom:1px solid #eee; line-height:45px; font-size:15px;}
#footer .family ul li:last-child a{border-bottom:0;}


@media (max-width:1024px){
	#footer{padding:100px 0; text-align:center;}
	
	#footer .family{top:auto; right:auto; bottom:-80px; left:50%; text-align:left; transform:translate(-50%, 0);}
	
	#footer #top{right:auto; top:-78px; left:50%; margin-left:-27.5px;}
}


@media (max-width:768px){
	#footer p span,
	#footer p a{display:block; margin:0; font-size:13px;}
	
	#footer p.copyright{font-size:13px;}
	
	#footer .family button{height:45px; font-size:15px;}
	#footer .family button::after{background-size:13px;}
	
	
	#footer .fnb ul li{margin-right:20px;}
	#footer .fnb ul li a{font-size:13px;}
	
}



@media (max-width:400px){
	#footer p.copyright{font-size:12px;}
	
	#footer p br{display:block;}
	
	#footer .fnb ul li{margin-right:15px;}
	#footer .fnb ul li a{font-size:12px;}
	
}