@charset "utf-8";

body{overflow-x:hidden; opacity:0; visibility:hidden; transition:all 0.5s ease 0s;}
body.show{opacity:1; visibility:visible;}
body.show #cursor{opacity:1;}
body.is,
body.edge{cursor:auto;}
body#mob{cursor:auto;}

/* selection */
::selection{background:#98a5ea; color:#fff; text-shadow:none;}
::-moz-selection{background:#98a5ea; color:#fff; text-shadow:none;}
::-webkit-selection{background:#98a5ea; color:#fff; text-shadow:none;}
button:active{outline:none;}
button span{position:relative;}

#header{position:fixed; top:0px; left:0px; z-index:90; width:100%; box-sizing:border-box; padding:40px 40px 0;}
#header h1{position:relative; z-index:2; width:47px; height:46px;}
#header h1 > a{display:block; position:relative; height:100%;}
#header h1 > a:before,
#header h1 > a:after{content:''; position:absolute; top:0px; left:0px; display:block; width:47px; height:46px; transition:all 0.3s ease 0s;}
#header h1 > a:before{opacity:1; background:url(../images/common/logo.png) no-repeat 50% 0;}
#header h1 > a:after{opacity:0; background:url(../images/common/logo_w.png) no-repeat 50% 0;}
#header h1 img{display:none; width:47px; height:46px;}
#header.active h1 > a:before{opacity:0; transition-delay:0.3s;}
#header.active h1 > a:after{opacity:1; transition-delay:0.3s;}
#header.inactive h1 > a:before{transition-delay:1.5s;}
#header.inactive h1 > a:after{transition-delay:1.5s;}
#header .btn_menu{position:absolute; top:55px; right:40px; z-index:3; padding-left:20px; background:transparent; font-size:16px; font-weight:700; color:#333; transition:padding 0.5s ease-in-out 0s, color 0.5s ease-in-out 0s;}
#header .btn_menu > span{display:inline-block; transform:translateX(0); transition:all 0.3s ease-in-out 0s;}
#header .btn_menu:before,
#header .btn_menu:after,
#header .btn_menu > span:before{content:''; display:block; position:absolute; left:0px; width:10px; height:2px; background:#333; transition:all 0.3s ease-in-out 0s;}
#header .btn_menu:before,
#header .btn_menu:after{transform:rotate(0deg);}
#header .btn_menu:before{top:5px;}
#header .btn_menu:after{top:13px;}
#header .btn_menu > span:before{top:9px; left:-20px;}
#header .btn_menu:focus{outline:none;}

#header .btn_menu.active{padding-left:0px; color:#fff;}
#header .btn_menu.active > span{transform:translateX(-60px);}
#header .btn_menu.active > span:before{width:0px; background:#fff;}
#header .btn_menu.active:before,
#header .btn_menu.active:after{top:10px; width:50px; height:1px; background:#fff; transition-property:top, width, height, transform, background; transition-delay:0s, 0s, 0s, 0s, 0.5s;}
#header .btn_menu.active:before{transform:rotate(45deg);}
#header .btn_menu.active:after{transform:rotate(-45deg);}
#header .btn_menu.inactive{transition-property:padding, color; transition-delay:0s, 1s;}
#header .btn_menu.inactive:before,
#header .btn_menu.inactive:after{transition-property:top, width, height, transform, background; transition-delay:0s, 0s, 0s, 0s, 1.5s;}
#header .btn_menu.inactive > span:before{transition-property:background; transition-delay:1.5s;}
#header .btn_contact{display:block; position:absolute; top:105px; right:40px; width:90px; height:90px; box-sizing:border-box; padding-top:26px; background:#3a51c9; text-align:center; color:#fff; font-weight:300; transition:opacity 0.5s ease 0s;}
#header .btn_tel{display:inline-block; position:absolute; top:56px; right:130px; color:#3a51c9;}
#header .btn_kakaoch{display:block; position:absolute; padding-top:17px; right:40px; width:90px; height:90px; top:195px; font-weight:300; background:#1f3186; box-sizing:border-box; text-align:center; color:#fff; font-size:14px;}
#header .btn_kakaoch span{display:block; margin-bottom:5px;}

.is #header .btn_menu{overflow:inherit; transition:padding 0.5s ease-in-out 0s, color 0.5s ease-in-out 0.3s;}
.is #header .btn_menu.inactive{transition:padding 0.5s ease-in-out 0s, color 0.5s ease-in-out 0s;}
.is #header .btn_menu.inactive:before,
.is #header .btn_menu.inactive:after{transition-property:top, width, height, transform, background; transition-delay:0s, 0s, 0s, 0s, 0.3s;}
.is #header .btn_menu.inactive > span:before{transition-property:background; transition-delay:0.3s;}

#header nav{position:fixed; top:0px; left:0px; z-index:1; width:100%; height:100%; background:#3951cb; transform:scaleY(0); transform-origin:0 0; transition:all 1s cubic-bezier(0.85, -0.01, 0.41, 0.69) 0.6s;}
#header.active nav{transform:scaleY(1); transition-delay:0s;}
#header nav .gnb{position:absolute; top:50%; left:calc(100% / 8 * 4 + 50px); transform:translateY(-50%);}
#header nav .gnb > li{padding:30px 0px; opacity:0; transform:translateY(30px); transition:all 0.5s ease-in-out 0s;}
#header nav .gnb > li > a{display:inline-block; position:relative; font-size:50px; color:#fff; font-weight:700; letter-spacing:2px; transition:all 0.5s ease-in-out;}
#header nav .gnb > li > a:hover{padding-left:35px;}
#header nav .gnb > li > a:before{content:''; display:block; position:absolute; top:17px; left:0px; width:27px; height:27px; background:#fff; border-radius:50%; transform:scale(0,0); transform-origin:0 50%; transition:border-radius 0.3s ease-in-out 0s, transform 0.5s ease-in-out 0s;}
#header nav .gnb > li > a:hover:before{border-radius:0px; transform:scale(1,1);}
#header nav .gnb > li > a:after{content:''; display:inline-block; position:absolute; top:50%; left:0px; width:100%; height:1px; background:#fff; transform:scaleX(0); transform-origin:0 0; transition:all 0.3s ease-in-out 0s;}
#header nav .gnb > li > a:hover:after{transform:scaleX(1); transition-delay:0.2s;}
#header nav .gnb > li > ul{display:none;}
#header.active nav .gnb > li{opacity:1; transform:translateY(0);}
#header.active nav .gnb > li:nth-of-type(1){transition-delay:0.9s;}
#header.active nav .gnb > li:nth-of-type(2){transition-delay:1.1s;}
#header.active nav .gnb > li:nth-of-type(3){transition-delay:1.3s;}
#header.active nav .gnb > li:nth-of-type(4){transition-delay:1.5s;}
#header.inactive nav .gnb > li{transform:translateY(-30px);}
#header.inactive nav .gnb > li:nth-of-type(1){transition-delay:0.1s;}
#header.inactive nav .gnb > li:nth-of-type(2){transition-delay:0.2s;}
#header.inactive nav .gnb > li:nth-of-type(3){transition-delay:0.3s;}
#header.inactive nav .gnb > li:nth-of-type(4){transition-delay:0.4s;}
#header nav .info{position:absolute; top:50%; left:calc(100% / 8 * 1); transform:translateY(-50%);}
#header nav .info h2{font-family:'Righteous', Sans-serif; font-size:140px; font-weight:400; color:#fff; letter-spacing:-0.5px; line-height:0.9em;}
#header nav .info ul{margin-top:40px;}
#header nav .info ul li{display:table; width:100%;}
#header nav .info ul li > span{display:table-cell; padding:7px 0px; vertical-align:middle; color:#fff; font-size:18px; font-weight:300;}
#header nav .info ul li > span:nth-of-type(1){width:20%; font-size:17px; font-weight:700; letter-spacing:0.5px;}
#header nav .info ul li > span a{color:#fff; font-size:18px; font-weight:300;}
#header nav .info h2,
#header nav .info ul li{opacity:0; transform:translateY(30px); transition:all 0.5s ease-in-out 0s;}
#header.active nav .info h2,
#header.active nav .info ul li{opacity:1; transform:translateY(0);}
#header.active nav .info h2{transition-delay:0.8s;}
#header.active nav .info ul li:nth-of-type(1){transition-delay:1s;}
#header.active nav .info ul li:nth-of-type(2){transition-delay:1.2s;}
#header.active nav .info ul li:nth-of-type(3){transition-delay:1.4s;}
#header.active nav .info ul li:nth-of-type(4){transition-delay:1.6s;}
#header.active nav .info ul li:nth-of-type(5){transition-delay:1.8s;}
#header.inactive nav .info h2,
#header.inactive nav .info ul li{transform:translateY(-30px);}
#header.inactive nav .info h2{transition-delay:0s;}
#header.inactive nav .info ul li:nth-of-type(1){transition-delay:0.1s;}
#header.inactive nav .info ul li:nth-of-type(2){transition-delay:0.2s;}
#header.inactive nav .info ul li:nth-of-type(3){transition-delay:0.3s;}
#header.inactive nav .info ul li:nth-of-type(4){transition-delay:0.4s;}
#header.inactive nav .info ul li:nth-of-type(5){transition-delay:0.5s;}
.is #header .btn_menu,
.edge #header .btn_menu,
.is #header nav .gnb > li > a,
.edge #header nav .gnb > li > a{cursor:pointer;}
.is #header .btn_contact{padding-top:23px;}

#cursor{opacity:0; position:fixed; z-index:1000; width:80px; height:80px; text-align:center; pointer-events:none; mix-blend-mode:exclusion; transform-origin:50% 50%; transition:opacity 0.3s ease;}
#cursor span{opacity:0; display:block; position:absolute; top:50%; left:50%; font-size:14px; color:#fff; transform:translate(-50%, -50%); transition:opacity 0.3 ease-in-out 0s;}
#cursor i{display:block; width:100%; height:100%; border-radius:100%; background:#0ddfab; mix-blend-mode:exclusion; backface-visibility:hidden; transform:scale(0.15); transition:all 0.3s ease-in-out 0s;}
#cursor.big span{opacity:1; transition-delay:0.2s;}
#cursor.big i{transform:scale(1); background:#fff;}
#cursor.big.red i{background:#0ddfab;}
.is #cursor,
.edge #cursor,
#mob #cursor{display:none;}

@media all and (max-width:1024px){
	#header nav .gnb{position:static; padding:100px 40px 0 40px; transform:translateY(0);}
	#header nav .info{top:auto; bottom:80px; right:40px; left:auto; transform:translateY(0);}
	#header nav .info h2{font-size:100px;}	
}

@media all and (max-width:768px){
	#header:after{content:''; display:block; opacity:0; visibility:hidden; position:fixed; bottom:0px; left:0px; z-index:60; width:100%; height:80px; background-image:linear-gradient(-90deg, rgba(57,81,203,0), rgba(57,81,203,1)); background-image:-ms-linear-gradient(-90deg, rgba(57,81,203,0), rgba(57,81,203,1)); background-image:-webkit-linear-gradient(-90deg, rgba(57,81,203,0), rgba(57,81,203,1)); background-image:-moz-linear-gradient(-90deg, rgba(57,81,203,0), rgba(57,81,203,1)); background-image:-o-linear-gradient(-90deg, rgba(57,81,203,0), rgba(57,81,203,1)); transition:all 0.3s ease 0s;}
	#header.active:after{opacity:1; visibility:visible; transition-delay:1s;}
	#header nav{height:100%; box-sizing:border-box; overflow-y:auto; padding-bottom:40px;}
	#header nav .gnb > li{padding:15px 0px;}
	#header nav .gnb > li > a{font-size:40px;}
	#header nav .info{position:static; padding:40px;}
	#header nav .info h2{font-size:50px;}
	#header nav .info ul{margin-top:20px;}
	#header nav .info ul li > span,
	#header nav .info ul li > span > a{font-size:16px;}
}

@media all and (max-width:640px){
	#header .btn_tel{top:285px; right:40px; width:90px; height:90px; background:#333; font-size:0px;}
	#header .btn_tel:before{content:'전화걸기'; display:block; position:absolute; top:0px; left:0px; width:100%; padding-top:30px; text-align:center; font-weight:300; color:#fff; font-size:15px;}
    
    #header .btn_kakaoch{top:195px;}
}

@media all and (max-width:420px){
	#header{padding-top:20px; padding-right:15px; padding-left:15px;}
	#header .btn_menu,
	#header .btn_contact,
	#header .btn_tel{right:15px;}
	#header .btn_menu{top:30px;}
	#header .btn_contact,
	#header .btn_tel{width:65px; height:65px;}
	#header .btn_contact{top:70px; padding-top:13px; font-size:13px;}
	#header .btn_tel{top:200px;}
	#header .btn_tel:before{padding-top:21px; font-size:13px;}
    #header .btn_kakaoch{padding-top:11px; top:135px; width:65px; height:65px; right:15px; font-size:13px;}
    #header .btn_kakaoch span{margin:auto; width:25px;}
    #header .btn_kakaoch span img{width:100%;}
	#header nav .gnb > li > a{font-size:25px;}
	#header nav .info h2{font-size:40px;}
	#header nav .info ul li > span{padding:5px 0px;}
	#header nav .gnb,
	#header nav .info{padding-left:15px; padding-right:15px;}
}

/* aside menu */
.aside_menu{ position: fixed; top: 98px; right: 45px; z-index: 999; transition: 0.4s ease-out; }
.aside_menu.move-btn{ top: 40px; }
.aside_menu a + a{ margin-top: 10px; }
.aside_menu a:last-child{ margin-top: 15px; }
a.btn_contact{ display: flex; justify-content: center; align-items: center; position:relative; width:84px; height:84px; z-index:999; line-height:1.3; background:linear-gradient(-37deg, #0470dc, #13f1fc); box-shadow:9px 17px 31px 0px rgba(0, 0, 0, 0.3); font-weight:100; font-size:14px; color:#fff; text-align:center; transition:all 0.4s ease-out 0s; border-radius:130px; box-sizing:border-box;}
a.btn_contact:hover{box-shadow:-1px 7px 31px 0px rgba(0, 0, 0, 0.3);}
a.btn_call_icon{ display: none; padding: 0; background: #404040; border-radius:100px; box-shadow: 9px 17px 31px 0px rgba(0, 0, 0, .34);}
a.btn_call_icon img{ height: 18px; }
a.btn_call{ display: block; margin-right: 10px; border-bottom:1px solid rgba(255,255,255,0.5); font-size:16px; color:#fff; text-align:right; transition:all 0.4s ease-out 0s;z-index: 9999;}
a.btn_call i{display:block; margin-bottom:0px; font-size:13px;}
a.btn_call.btn_callSub.move-btn.color-change{border-bottom:1px solid #bababa; color:#222;}
a.btn_kakaoch{ flex-direction: column; padding:16px 0; background:linear-gradient(-37deg, #0355a7, #0fbdc7); font-weight:500;}
a.btn_kakaoch img{display:block; margin:0 auto 5px; width:30px;}
@media(max-width:1380px){
	.aside_menu{right:4%;}
}
@media(max-width:639px){
	.aside_menu{ top: auto; bottom: 40px; }
	.aside_menu.move-btn{ top: auto; }
	.aside_menu a + a{ margin-top: 5px; }
	a.btn_contact{ width:66px; height:66px; font-size:12px;}
    a.btn_kakaoch img{width:20px; height:20px;}
	a.btn_call_icon{ display: flex; }
	a.btn_call{display: none;}