@charset "utf-8";

/* common */

::selection{background:rgb(4, 112, 220,0.3); color:#FFF; text-shadow:none;}
::-moz-selection{background:rgb(4, 112, 220,0.3); color:#FFF; text-shadow:none;}
::-webkit-selection{background:rgb(4, 112, 220,0.3); color:#FFF; text-shadow:none;}

.wrapper{position:relative; width:1200px; margin:0 auto;}
.wrapper.v2{width:1560px;}
.open{overflow:hidden;}

#container .btn_basic01{display:block; width:230px; height:62px; line-height:60px; margin:0 auto; background:linear-gradient(270deg, rgb(19, 241, 252), rgb(4, 112, 220), rgba(34,34,34,0), rgba(34,34,34,0)); background-size:300% 300%; background-position:1% 50%; border:1px solid rgba(255,255,255,0.5); font-size:15px; color:#fff; text-align:center; transition:all 0.7s ease-out; text-decoration:none;}
#container .btn_basic01:hover{background-position:99% 50%; border:1px solid rgba(223,190,106,0); color:#fff;}

/* 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;}
}

/* animation effect */
.fadeup{position:relative;opacity:0;top:130px;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}
.fadeup-in{position:relative;opacity:1;top:0;transition: all 2s cubic-bezier(0.18, 0.89, 0.43, 1.14) 0s;}
.slideup-in{position:relative; top:0; transition:all 0.7s ease-out 0s;}

/* table */
#content table.table thead th{padding:14px 0; background:#535353; border:none; color:#fff;}
#content table.table thead + tbody th{background:none;}
#content table.table tbody th,
#content table.table tbody td{background-color:#fbfbfb !important; border-right:0; border-bottom:none; border-left:0; text-align:center;}
#content table.table tbody th,
#content table.table tbody td{}
#content table.table td{font-weight:300; color:#666;}

/* common_line */
.area_line{position:absolute; top:30px; width:100%; height:100%;}
.area_line > div{height:-webkit-calc(100% - 27px); height:calc(100% - 27px);}
.area_line > div > ul li{position:absolute; float:left; z-index:10; height:100%; }
.area_line > div > ul li:nth-child(1){left:0;}
.area_line > div > ul li:nth-child(2){left:25%;}
.area_line > div > ul li:nth-child(3){left:50%;}
.area_line > div > ul li:nth-child(4){left:75%;}
.area_line > div > ul li:nth-child(5){left:100%;}
.area_line > div > ul li > img{position:absolute; left:-3px;}
.area_line > div > ul li[data-line="00"] > img:first-child{top:160px;}
.area_line > div > ul li[data-line="00"] > img:nth-child(2){top:1860px;}
.area_line > div > ul li[data-line="00"] > img:nth-child(3){bottom:360px;}
.area_line > div > ul li[data-line="01"] > img:first-child{top:970px;}
.area_line > div > ul li[data-line="01"] > img:nth-child(2){top:2908px;}
.area_line > div > ul li[data-line="01"] > img:nth-child(3){bottom:152px;}
.area_line > div > ul li[data-line="02"] > img:first-child{top:600px;}
.area_line > div > ul li[data-line="02"] > img:nth-child(2){top:1428px;}
.area_line > div > ul li[data-line="02"] > img:nth-child(3){top:2148px;}
.area_line > div > ul li[data-line="02"] > img:nth-child(4){bottom:1892px;}
.area_line > div > ul li[data-line="03"] > img:first-child{top:380px;}
.area_line > div > ul li[data-line="03"] > img:nth-child(2){top:3058px;}
.area_line > div > ul li[data-line="03"] > img:nth-child(3){bottom:580px;}
.area_line > div > ul li[data-line="04"] > img:first-child{top:1044px;}
.area_line > div > ul li[data-line="04"] > img:nth-child(2){top:2417px;}
.area_line > div > ul li[data-line="04"] > img:nth-child(3){bottom:1215px;}
.area_line > div > ul li[data-line="04"] > img:nth-child(4){bottom:242px;}

/* header */
#header{position:absolute; top:0; z-index:999; width:100%;}
#header > h1{position:relative;float:left;z-index:9999;margin:55px 0 0 55px;width: 150px;}
#header > h1 > a{display: inline-block;}
#header > h1 > a > img{display:inline-block;width: 100%;}
#header > h1 a{display: block;}

.open #header{position:fixed;}

/* menu */
.menu-toggle{position:absolute; opacity:0.8; top:39px; right:55px; z-index:2; width:36px; height:30px; background-color:transparent; border:none; transition:opacity 0.2s ease-out; outline:none; -webkit-transition:opacity 0.2s ease-out;}
.menu-toggle > i{position:relative; top:4px; right:49px; font-weight:200; font-size:13px; color:#fff;}
.menu-toggle:before{content:""; position:absolute; top:0; right:0; right:auto; bottom:0; left:0; width:100%; margin:auto; background:url(../images/common/icon_menu.svg) no-repeat 50% 100%;}
.menu-toggle:after{content:""; position:absolute; opacity:0; top:0; right:0; width:25px; height:25px; background:url(../images/common/icon_cancle.svg) no-repeat 50% 100%; color:white; transition:opacity 0.4s ease-out; -webkit-transition:opacity 0.4s ease-out;}
.menu-toggle:active{transform:translateY(2px); -webkit-transform:translateY(2px);}
.menu-toggle:hover{opacity:1;}

.open .menu-toggle{opacity:1;}
.open .menu-toggle:before,
.open .menu-toggle > i{opacity:0; width:0;}
.open .menu-toggle:after{opacity:1; transition:opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out; transition:transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out; transition:transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out; transform:translate3d(0, 0, 0) rotate(360deg); -webkit-transform:translate3d(0, 0, 0) rotate(360deg); -webkit-transition:opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;}
.open #header > nav > i{opacity:0.7;}
.line_menu{opacity:0; transition:all 0.4s ease-out 0.5s;}
.open .line_menu{opacity:1;}
.open nav{top:0;}

nav{position:fixed;overflow:hidden;top:-100%;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
nav .nav_bg{opacity:0; position:absolute; overflow:hidden; top:0; right:0; bottom:0; left:0; width:100%; height:0; margin:auto; padding-bottom:100%; border-radius:100%; background-image:linear-gradient(40deg,#13f1fc,#0470dc);}
#header > nav > i{position:absolute; opacity:0; top:461px; left:10%; line-height:1; font-weight:600; font-size:275px; color:rgba(255,255,255,0.05); transition:all .4s ease-out .5s;}

.gnb{position:absolute; top:210px; left:0; z-index:9999; color:white; text-align:left;}
.gnb li{opacity:0; margin:20px 0; text-align:center; transform:translate3d(0, 36px, 0); -webkit-transform:translate3d(0, 36px, 0);}
.gnb li a{font-weight:500;font-size:50px;color:#fff;text-align:left;transition: all 0.4s ease-out 0s;}
.gnb li a:hover{opacity:0.6;}
.gnb li:hover:after{opacity:1; padding:0 20px; transition:opacity 0.2s 0.14s ease-out, -webkit-transform 0.2s 0.14s ease-out; transition:transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out; transition:transform 0.2s 0.14s ease-out, opacity 0.2s 0.14s ease-out, -webkit-transform 0.2s 0.14s ease-out; transform:translate(0px, 6px); -webkit-transform:translate(0px, 6px); -webkit-transition:opacity 0.2s 0.14s ease-out, -webkit-transform 0.2s 0.14s ease-out;}

.box_adress{position:absolute; opacity:0; bottom:110px; left:15px; z-index:99999; color:#fff; transform:translate3d(0, 36px, 0); -webkit-transform:translate3d(0, 36px, 0);}
.box_adress > em{display:block; margin-bottom:11px; font-size:17px;}
.box_adress > p{font-weight:200; font-size:14px; color:rgba(255,255,255,0.9);}
.box_adress > p > span{display:block; margin-top:40px; font-size:15px;}
.box_adress:before{content:""; position:absolute; top:4px; left:-14px; width:4px; height:20px; background:#fff;}

.open .gnb li,
.open .box_adress{opacity:1; text-align:left; transition:opacity 0.2s ease-out, -webkit-transform 0.2s ease-out; transition:transform 0.2s ease-out, opacity 0.2s ease-out; transition:transform 0.2s ease-out, opacity 0.2s ease-out, -webkit-transform 0.2s ease-out; transform:translate3d(0, 0, 0); -webkit-transform:translate3d(0, 0, 0); -webkit-transition:opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;}
.open .gnb li:nth-child(1){-webkit-transition-delay:0.75s; transition-delay:0.75s;}
.open .gnb li:nth-child(2){-webkit-transition-delay:0.85s; transition-delay:0.85s;}
.open .gnb li:nth-child(3){-webkit-transition-delay:0.95s; transition-delay:0.95s;}
.open .gnb li:nth-child(4){-webkit-transition-delay:1.05s; transition-delay:1.05s;}
.open .gnb li:nth-child(5){-webkit-transition-delay:1.15s; transition-delay:1.15s;}
.open .box_adress{-webkit-transition-delay:1.4s; transition-delay:1.4s;}

.line_menu > div > ul{position:absolute; width:100%; height:100%;}
.line_menu > div > ul > li{position:relative; float:left; width:24.8%; height:100%; border-right:1px solid rgba(255,255,255,0.1);}
.line_menu{position:absolute; z-index:2; width:100%; height:100%;}
.line_menu > div{height:100%;}
.line_menu > div > ul > li:first-child{background:rgba(255,255,255,0.03); border-left:1px solid rgba(255,255,255,0.1);}
.line_menu > div > ul > li:nth-child(3){background:rgba(255,255,255,0.03);}

.snb{margin-top:30px;text-align:center;margin-bottom: 50px;}
.snb ul li{display:inline-block;}
.snb ul li a{display:block;margin:0 3px;padding:15px 40px;border:1px solid #d8d8d8;color:#888;transition: all 0.4s ease-out 0s;}
.snb ul li a:hover{border:1px solid #6975f8; color:#6975f8;}
.snb ul li.on a{background:#6975f8; border:1px solid #6975f8; color:#fff;}
.snb ul li.on a:hover{color:#fff;}

/* sub visual */
.area_subVisual{position:relative; height:724px; background:url(../images/content/img_subVisualbg.png) no-repeat 100% 50%;}

/*.btn_subPage{position:absolute; top:45%; z-index:99; width:100%;}*/
.btn_subPage{position:absolute; top:380px; z-index:99; width:100%;}
.btn_subPage > div{position:absolute;}
.btn_subPage > div:first-child{left:55px;}
.btn_subPage > div:last-child{right:55px;}
.btn_subPage div a span{display:inline-block; position:relative; width:50px; height:50px;}
.btn_subPage div:first-child a  span{float:left; background:url(../images/main/icon_arrLeft.svg) no-repeat 50% 50%; background-size:7px;}
.btn_subPage div:last-child a  span{float:right; background:url(../images/main/icon_arrRight.svg) no-repeat 50% 50%; background-size:7px;}
.btn_subPage div a  span:after{content:""; position:absolute; top:-1px; left:-1px; z-index:-1; z-index:99; width:100%; height:100%; border:1px solid #fff; transition:all 0.3s ease-out 0s; transform:rotate(45deg); border-radius:8px;}
.btn_subPage div a i{position:relative; opacity:0; top:13px; font-weight:300; font-size:15px; color:#fff; transition:all 0.4s ease-out 0s;}
.btn_subPage div:last-child a i{right:47px;}
.btn_subPage > div:first-child i{left:40px;}
.btn_subPage div:first-child a:hover i{opacity:1; left:21px;}
.btn_subPage div:last-child a:hover i{opacity:1; right:21px;}
.btn_subPage div a:hover span:after,
.btn_subPage div a:hover span{opacity:0.8;}

.img_subvisual{float:left;}
.img_subvisual img{display:inline-block; box-shadow:-3px 21px 50px 0px rgba(0, 0, 0, 0.27);}
.tit_subPage{position:absolute; top:251px; width:100%; line-height:1; color:#fff;}
.tit_subPage h2{font-weight:600; font-size:60px;}
.tit_subPage p{margin-top:13px; font-weight:300;}

.ml12 .letter{display: inline-block;}

/* footer */
#footer{background:url(../images/common/img_footer.png) repeat 50% 50%;}
#footer address{margin-bottom:20px;padding: 80px 0 25px 0;border-bottom:1px solid;}
#footer address > img{float:right;opacity:0.3;width:90px;position: relative;bottom: 20px;}
#footer address > p{font-size:15px; color:#666;}
#footer address > p > b{margin-left:7px; font-weight:400; color:#bbb;}
#footer address > p > b:nth-child(2){margin-left:0px;}
#footer > div > span{display:block; padding-bottom:50px; font-size:14px;}
#footer a{display:block;position:absolute;top: -65px;left:50%;z-index:99999;}
#footer a > img{height: 69px;}

@-webkit-keyframes gnb-animation{ 
	0% {opacity: 0; -webkit-transform: scale(0.04) translateY(300%); transform: scale(0.04) translateY(300%);}
	40%{-webkit-transform: scale(0.04) translateY(0); transform: scale(0.04) translateY(0); -webkit-transition: ease-out; transition: ease-out;}	
	60%{opacity: 1; -webkit-transform: scale(0.02) translateY(0px); transform: scale(0.02) translateY(0px);}
	61%{-webkit-transform: scale(0.04); transform: scale(0.04);}
	99.9%{height:0; padding-bottom: 100%; border-radius: 100%;}
	100%{opacity: 1; -webkit-transform: scale(2); transform: scale(2); height: 100%; padding-bottom: 0; border-radius: 0;}
}
@keyframes gnb-animation {  
	0%{opacity: 0; transform: scale(0.04) translateY(300%);}
	40%{transform: scale(0.04) translateY(0); transition: ease-out;}		 
	60%{opacity: 1; transform: scale(0.02) translateY(0px);}
	61%{transform: scale(0.04);}
	99.9%{height: 0; padding-bottom: 100%; border-radius: 100%;}
	100%{opacity: 1; transform: scale(2); height: 100%; padding-bottom: 0; border-radius: 0;}
}

@media all and (max-width:1680px){
	.area_subVisual{height:680px; background:url(../images/content/img_subVisualbg.png) no-repeat 100% 50%; background-size:96% 100%;}
	.area_subVisual .wrapper{width:1000px;}
	.img_subvisual{width:1360px;}
	.img_subvisual img{width:100%;}
}

@media all and (max-width:1600px){
	.wrapper.v2{width:100%;}
}

@media all and (max-width:1380px){
	.wrapper{width:92%;}
	
	#header > h1{margin:45px 0 0 4%;}
	
	.menu-toggle{top:29px; right:4%;}
	
	.area_subVisual{overflow:hidden; height:650px; background-size:96% 100%;}
	.area_subVisual .wrapper{width:64%;}

	.tit_subPage h2{font-size:53px;}

	.img_subvisual{width:auto; height:530px;}
	.img_subvisual img{width:auto; height:100%;}

	.btn_subPage div a span{width:45px; height:45px;}
	.btn_subPage > div:last-child{right:4%;}
	.btn_subPage > div:first-child{left:4%;}
}

@media all and (max-width:1023px){
	.area_subVisual{height:630px;}
/*	.btn_subPage{top:269px;}*/
	.tit_subPage{text-align:center;}
	.tit_subPage h2{font-size:46px;}
	.btn_subPage div a span:after{top:0;}
}

@media all and (max-height:800px){
	.gnb{top:150px; left:6px;}
	.box_adress{bottom:40px;}
}

@media all and (min-width:640px){
	.btn_call_icon{display:none;	}
}

@media all and (max-width:767px){
	#header > nav > i{top:411px; left:0; font-size:145px;}

	.gnb li a{font-size:36px;}
	.gnb li{margin:15px 0;}

	.line_menu > div > ul > li:first-child{display:none;}
	
	.box_adress{position:fixed; left:4%; width:100%; padding-left:15px;}
	.box_adress > em{margin-bottom:3px; font-size:16px;}
	.box_adress > p{font-size:12px;}
	.box_adress > p > span{margin-top:20px;}
	.box_adress:before{left:0;}
	
	.tit_subPage h2{font-size:42px;}
	.tit_subPage p{margin-top:10px; font-size:15px;}
	.btn_subPage div a i{display:none;}
	
	#content table.table tbody th,
	#content table.table tbody td{font-size:14px;}
	#content table.table thead th{font-size:14px;}
	
	#footer address > img{display:none;}
	#footer address > p{font-size:13px; word-break:keep-all;}
	#footer address{padding:50px 0 25px 0;}
	#footer > div > span{padding-bottom:20px;}
}

@media all and (max-width:639px){
	.wrapper.v2{width:92%;}
	.slideup,
	.fadeup{opacity:1 !important; top:0 !important;}

	#header > h1{margin: 25px 0 0 4%;width: 110px;}

	.menu-toggle > i{display:none;}
	.menu-toggle{top:22px; width:31px; height:17px;}

	.area_subVisual{height: 568px;background: none;}
	.img_subvisual{height:490px;}
	
	.snb{margin-top: 0; margin-bottom: 40px;}
	.tit_subPage{top:220px;}
	.tit_subPage h2{font-size:30px;}
	.tit_subPage p{font-size:13px;}
	.btn_subPage{top:230px;}
	.btn_subPage div a span{width:40px; height:40px;}
}

@media all and (max-width:519px){
	.wrapper{width: auto;margin: 0 15px;}
	.wrapper.v2{width: auto;margin: 0 15px;}

	.box_text .wrapper{width:90%;	}
	.area_subVisual .wrapper{width:100%; margin:0;}
	
	.gnb li{margin: 6px 0;}
	.gnb li a{font-size:25px;}
	
	.area_advantage ul > li em{font-size: 13px;}
	.area_advantage ul > li i{margin-bottom: -3px; font-size: 13px;}

	.box_adress > p > span{margin-top:14px;}
	.box_adress{width:89%; padding-left:10px; word-break:keep-all;}
	.box_adress:before{top:5px; width:3px; height:16px;}

	.line_menu > div > ul > li:nth-child(2){display:none;}
	.line_menu > div > ul > li{width:50%;}
	
	#header > nav > i{top:300px; font-size:105px;}
	#footer a > img{width:8px;}
	#footer a{top:-54px;}
}

@media all and (max-width:359px){
	.tit_subPage h2{font-size:26px;}
	
	.btn_subPage div a span{width:30px; height:30px;}
	.btn_subPage div a span:after{border-radius:5px;}
	.btn_subPage div:last-child a span,
	.btn_subPage div:first-child a span{background-size:5px;}
/*	a.btn_contact{bottom:30px;}*/
}