@charset "utf-8";


html { font-size:16px; letter-spacing:-0.03em; min-width:320px; overflow-y: scroll; }
.intro { height:100%; background-color: #dbeff2; background-image:url('../images/guide/bg2.png?ver=1'), url('../images/guide/bg1.png?ver=1'); background-repeat: no-repeat, no-repeat; background-position: center top, 8vw 85%; position: relative; box-sizing: border-box; padding: 10vw 0 0 10vw;}
.intro .lazy_imgs { display:none; } /* 이미지 로딩 */

.intro .left_con { position: relative;}
.intro .left_con .cha_box { display: flex;}
.intro .left_con .img_ch1 {animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: i_move1; animation-duration: 2.5s;}
.intro .left_con .img_ch2 { animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: i_move2; animation-duration: 2.5s; margin:0 10px ; }
.intro .left_con .img_ch3 { animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: i_move3; animation-duration: 2.5s;}
.intro .left_con .title { margin-top: 40px; font-size: 50px; color: #000;}
.intro .left_con .title > span { margin-top: 20px; display:inline-block; font-size:60px; color: #0e70cb; border-bottom: 3px solid #0e70cb ;}

.intro .right_con .img_gu1 { position: absolute; bottom: 0; right:5vw; text-align: right;}
.intro .right_con .img_gu2 { position: absolute; bottom: 463px; right:calc(5vw + 128px); text-align: right;}
.intro .right_con .img_gu3 { position: absolute; bottom: 140px; right:calc(5vw + 477px); text-align: right;}

@keyframes i_move1 {
	0% {
		transform: translate(0, 0);
		-webkit-transform:translate(0, 0);
	}
	50% {
		transform: translate(5px, 0);
		-webkit-transform:translate(5px, 0);
	}
	100% {
		transform: translate(0, 0);
		-webkit-transform:translate(0, 0);
	}
}
  @keyframes i_move2 {
	0% {
		transform: translate(0, 0);
		-webkit-transform:translate(0, 0);
	}
	50% {
		transform: translate(10px, 0);
		-webkit-transform:translate(10px, 0);
	}
	100% {
		transform: translate(0, 0);
		-webkit-transform:translate(0, 0);
	}
	}
  @keyframes i_move3 {
	0% {
		transform: translate(0, 0);
		-webkit-transform:translate(0, 0);
	}
	50% {
		transform: translate(5px, 0);
		-webkit-transform:translate(5px, 0);
	}
	100% {
		transform: translate(0, 0);
		-webkit-transform:translate(0, 0);
	}
	}

/* */
.ready .intro .left_con { opacity:1; }
.ready .intro .right_con { opacity:1; }
.intro_show .intro .left_con { opacity:1; visibility:visible; -webkit-transition:opacity 0.5s cubic-bezier(0, 0, 0.25, 1); transition:opacity 0.5s cubic-bezier(0, 0, 0.25, 1);}
.intro_show .intro .right_con { opacity:1; visibility:visible; }

/* */
.show_content { background-color:#e8f2f7; }
.show_content .intro { visibility:hidden; opacity:0; width:100%; position:fixed; -webkit-transition-delay:0.5s; transition-delay:0.5s; } 
.show_content .container { opacity:1; position:static; visibility:visible; -webkit-transition-delay:0.5s; transition-delay:0.5s; }
.show_content .content_bg { opacity:1; visibility:visible; }

/* */
.scroller { height:100%; width:100%; position:relative; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; }
.scroller .scroll_content { height:100%; }
.ftscroller_x { vertical-align:top; }

/* */
.container {height:70px; z-index:5; opacity:1; top:0; position:absolute; /*visibility:hidden;*/ -webkit-transition:opacity 0.5s cubic-bezier(0, 0, 0.25, 1); transition:opacity 0.5s cubic-bezier(0, 0, 0.25, 1); }
.container .content { min-height:100%; position:relative; z-index:1; box-sizing:border-box; }

/* navigation */
.navigation { position:fixed; left:0; right:0; bottom:0; height:70px; z-index:8; font-size:0; text-align:center; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }
.navigation:before { content:""; height:70px; position:absolute; left:0; right:0; bottom:0;  z-index:0; }
.navigation .list { height:140px; display: flex; background-color:#1a3974; }
.navigation .btn_page { transform: skew(-0.03deg); opacity:1; position:relative; display:flex; align-items: center; justify-content: center; vertical-align:top; box-sizing:border-box; text-align:center; width:100%; height:70px; background-color:#1a3974; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out; -webkit-transition-property:opacity, background, margin, color, font; transition-property:opacity, background, margin, color, font; }
.navigation .btn_page:after { content:""; display:inline-block; vertical-align:middle; height:100%; }
.navigation .btn_page > em { vertical-align:middle; color:#fff; font-size:18px; line-height:1.2; }

.navigation .btn_page + .btn_page { border-left:1px solid #486190; }
.no_touch .navigation .btn_page:hover, .navigation .btn_page.active { background-color:#0e70cb; }

/*.navigation .btn_page:nth-child(1) { -webkit-animation-delay:0.1s; animation-delay:0.1s; }
.navigation .btn_page:nth-child(2) { -webkit-animation-delay:0.2s; animation-delay:0.2s; }
.navigation .btn_page:nth-child(3) { -webkit-animation-delay:0.3s; animation-delay:0.3s; }
.navigation .btn_page:nth-child(4) { -webkit-animation-delay:0.4s; animation-delay:0.4s; }
.navigation .btn_page:nth-child(5) { -webkit-animation-delay:0.5s; animation-delay:0.5s; }
.navigation .btn_page:nth-child(6) { -webkit-animation-delay:0.6s; animation-delay:0.6s; }
.navigation .btn_page:nth-child(7) { -webkit-animation-delay:0.7s; animation-delay:0.7s; }
.navigation .btn_page:nth-child(8) { -webkit-animation-delay:0.8s; animation-delay:0.8s; }*/
.navigation .bounceInUp { opacity:1; }


/* btn_control */
.btn_control { position: fixed; bottom: 100px; right: 40px; z-index: 1000;}
.btn_control a { color: #fff; font-size: 15px; text-align: center; padding-top: 50px; width: 88px; height: 88px; display: inline-block; box-sizing: border-box;transform: skew(-0.03deg); border-radius: 100%;  background-position: center 25%; background-repeat: no-repeat; background-color: #09283b; box-shadow:3px 8px 10px rgba(0, 0, 0, 0.2); transition: all ease 0.3s; }
.btn_control a:hover { background-color: #1a3974;}

.btn_control a.btn_play { background-image: url('../images/guide/btn_play.png');}
.btn_control a.btn_stop {  background-image: url('../images/guide/btn_stop.png');}
.btn_control a {display: none; }
.btn_control a.on {display: block; }

/* */
.section { position:relative; }
.section .ani { opacity:0; }
.section .ani.animated { -webkit-animation-delay:0s; animation-delay:0s; } 


.page{ transition: 0.6s all ease; opacity: 0;}
.page.go{ opacity: 1;}
/* */
.page_title { z-index: 10; position: relative; background-color: #fff; height: 100px; padding: 20px 5vw; box-sizing: border-box;}
.page_title .title { display: flex; align-items: center;}
.page_title .title .tit { display: flex; align-items: center; background-color: #0e70cb; color:#fff; font-size:30px; font-weight: 600; border-radius: 30px; width: 110px; height: 60px; justify-content: center; }
.page_title .title .dsc { font-size: 19px; padding-left:20px; line-height: 1.3; word-break:keep-all;transform: skew(-0.03deg) !important;  }
.page_title .title .dsc .em1 { color: #0e70cb;}


/* */
.btn_home { position:absolute; top:20px; right:3vw;}
.btn_home em { font-family: "Noto Sans Korean", "Malgun Gothic"; background-color: #252a44; color: #fff; border-radius: 30px; display: inline-block; padding: 10px 30px; transform: translate(0, -15px);}
.btn_home:before { 
	content:""; 
	display:inline-block; 
	width:182px; 
	height:101px; 
	background:url('../images/guide/top_ch.png') no-repeat center / contain; 
	position:relative; 
	margin-right: 10px; 
	-webkit-animation-name: i_move1; 
	-webkit-animation-timing-function: ease-in-out; 
	-webkit-animation-iteration-count:infinite; 
	-webkit-animation-duration: 3.5s; 

	animation-name: i_move1; 
	animation-timing-function: ease-in-out; 
	animation-iteration-count: infinite; 
	animation-duration: 3.5s;
}




/* */
.page_link p[class*="lnk_"] { position:fixed; top:50%; margin-top:-24px;-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); z-index:5; }
.page_link p[class*="lnk_"] > em { display:none; }
.page_link p[class*="lnk_"]:before { content:""; display:block; margin:0 auto; width:48px; height:48px; }
.page_link .btn_page { position:absolute; top:0; left:50%; margin-left:-24px; width:48px; height:48px; text-align:left; overflow:hidden;}
.page_link .btn_page > i { position:absolute; opacity:0; top:0; }
.page_link .lnk_prev { left:10px; }
.page_link .lnk_prev:before {background:rgba(0,0,0,0.3) url('../images/guide/btn_prev.png') no-repeat center;}
.page_link .lnk_next { right:10px; }
.page_link .lnk_next:before {background:rgba(0,0,0,0.3) url('../images/guide/btn_next.png') no-repeat center;}


/* */
.btn_home,
.page_title,
.page_link p[class*="lnk_"] { opacity:0; -webkit-transition:opacity 0.5s ease-out 0.5s; transition:opacity 0.5s ease-out 0.5s; }

.page_list > li.go .btn_home,
.page_list > li.go .page_title,
.page_list > li.go .page_link p[class*="lnk_"] { opacity:1; }
.page_list > li.go .page_link p[class*="lnk_"] { -webkit-transition-delay:1s; transition-delay:1s; }
.page_list > li.go .content_area { -webkit-transition-delay:0.35s; transition-delay:0.35s; }

.page_list .ani.on { opacity:1; }
.content_area { margin: 30px 5vw 0 5vw; visibility:hidden; word-break:keep-all; }
.content_area.active { visibility:visible; }

/* ap_tooltip */
.ap_tooltip {background-color: #0e70cb;color:#fff;transform: skew(-0.03deg); padding: 10px 20px; border-radius: 10px; box-shadow:0px 4px 7px 0 rgba(0, 0, 0, 0.2);}
.ap_tooltip:after { content:""; position:absolute; left:50%; bottom:-8px; margin-left:-8px; width:0; height:0; border:0; border-style:solid; border-color:transparent; border-width:8px; border-bottom:0; border-top-color:#0e70cb; }
.point .ap_tooltip { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: flash; animation-name: flash; -webkit-animation-iteration-count:2; animation-iteration-count:2; }

.ap_left:after { left:auto; bottom: auto; margin-left: auto; top: 50%;right: 100%;margin-top: -8px;border-width: 8px;border-style: solid;border-color: transparent #0e70cb transparent transparent;}

@media all and (max-width:1660px){
	.intro { padding: 5vw 0 0 5vw;}
	.intro .left_con .title { font-size: 45px;}
	.intro .left_con .title > span { font-size:55px;}
}

@media all and (max-width:1440px){
	.intro .left_con .title { font-size: 40px;}
	.intro .left_con .title > span { margin-top: 10px; font-size:50px;}
	
	.intro .right_con img {width: 90%;}
	.intro .right_con .img_gu1 { right:1vw;}
	.intro .right_con .img_gu2 { right:calc(1vw + 128px);}
	.intro .right_con .img_gu3 { right:calc(1vw + 477px);}
	
	.page_title { padding: 20px 2vw; height: 90px;}
	.page_title .title .tit {font-size:24px; width: 70px; height: 50px;}
	.page_title .title .dsc { font-size: 17px;}

	.btn_home { right:2vw;}
	.btn_home:before { height:91px; }

}


@media all and (max-width:1200px) {
	.page_title { height: auto;}
	.page_title .title .dsc { font-size: 16px; padding-right: 300px;}
}



@media all and (max-width:1000px) {
	html { font-size:14px; }
	.intro .right_con img {width: 60%;}
	.intro .right_con .img_gu1 { right:1vw;}
	.intro .right_con .img_gu2 { bottom: 303px; right:calc(1vw + 108px);}
	.intro .right_con .img_gu3 { bottom: 120px; right:calc(1vw + 277px);}

	/* */
	.navigation,
	.navigation .list { height:90px; }
	.navigation:before { height:90px; }
	.navigation .btn_page { height:90px; font-size:14px; padding:0 5px; }
	.navigation .btn_page > em { font-size: 15px;}



}

@media all and (max-width:800px) {
	.intro .left_con .cha_box img { height: 90px;}
	.intro .left_con .title { margin-top: 25px; font-size:20px;}
	.intro .left_con .title > span { font-size:26px;}

	.intro .right_con img {width: 40%;}
	.intro .right_con .img_gu2 { bottom: 203px; right:calc(1vw + 88px);}
	.intro .right_con .img_gu3 { bottom: 80px; right:calc(1vw + 177px);}

	.navigation,
	.navigation .list { height:50px; }
	.navigation:before { height:50px; }
	.navigation .btn_page { height:50px; }
	.navigation .btn_page > em { font-size: 13px;}
	
	.btn_control { bottom: 60px; right: 20px;}
	.btn_control a {font-size: 11px; padding-top: 32px; width: 60px; height: 60px; background-size: 20px; }
}

@media all and (max-width:600px) {
	.intro { padding: 10vw 0 0 10vw;}
	.intro .right_con img {width: 56%;}
	.intro .right_con .img_gu1 { bottom: 70px; right: 20px;}
	.intro .right_con .img_gu2 { bottom: 233px; right:calc(1vw + 68px);}
	.intro .right_con .img_gu3 { bottom: 130px;}
	
	.navigation,
	.navigation .list { height:100px; }
	.navigation .list { flex-wrap: wrap;}
	.navigation .btn_page { width:20%; }
	.navigation .btn_page:nth-child(6) { border-left: none;}
	.navigation .btn_page:nth-child(9) { border-right:1px solid #486190;}
	.navigation .btn_page:nth-child(1), .navigation .btn_page:nth-child(2), .navigation .btn_page:nth-child(3), .navigation .btn_page:nth-child(4), .navigation .btn_page:nth-child(5) { border-bottom:1px solid #486190; }

	.btn_control { bottom: 120px;}
	
	.page_title .title .tit { width: 12%; box-sizing: border-box; font-size:18px; height: 30px;}
	.page_title .title .dsc { width: 88%; box-sizing: border-box; font-size: 13px; padding-right: 45px; padding-left: 10px;}
	.btn_home { top:50%; margin-top: -15px;}
	.btn_home em { background: #252a44 url('../images/guide/bg_home.png') no-repeat center / 60%; height: 30px; width: 30px; padding: 0; text-indent: -9999px; transform: translate(0, 0);}
	.btn_home:before { display: none;}
		
	.ap_tooltip {padding:5px 10px; border-radius: 5px; font-size: 12px;}
	.ap_left:after { left:100%; right: auto; border-color: transparent transparent transparent #0e70cb;}

	.page_link p[class*="lnk_"] { margin-top:-20px;}
	.page_link p[class*="lnk_"]:before { width:40px; height:40px; }
	.page_link .btn_page { margin-left:-20px; width:40px; height:40px;}
	.page_link .lnk_prev { left:0; }
	.page_link .lnk_next { right:0; }

	
}