@charset "utf-8";

/* 퀵 */
.quick{position: fixed; top: 15%; right: -20%; z-index: 1111; transition: 0.5s;}
.quick.scroll_on{right: 2.5%;}

/* 메인 */
main{background: url(../image/main_bg.jpg) no-repeat center / cover; height: 960px; position: relative;}
main .logo{position: absolute; top: 75px; left: 50%; margin-left: -860px;}
main .title_wrap{position: absolute; top: 200px; left: 50%; margin-left: -630px;}
main .title_wrap .text_wrap{margin-top: 25px;}
main .title_wrap .text_wrap .text{position: absolute;}
main .img_wrap{position: absolute; top: 50%; transform: translateY(-50%); left: 50%; margin-left: 88px;}
main .img_wrap .img{position: absolute; top: 50%; transform: translateY(-50%);}

/* s01 */
#s01{background: #0012d4; height: 960px; position: relative; overflow: hidden;}
#s01 .title{position: absolute; top: 390px; left: 50%; margin-left: 266px; z-index: 1;}
#s01 .img_wrap{width: 572px; height: 708px; overflow: hidden; border-radius: 100%; position: absolute; top: 50%; transform: translateY(-50%);
			   left: 50%; margin-left: -422px; box-shadow: 200px 160px 0px 0px #0010c3;}
#s01 .img_wrap .img{width: 572px; height: 708px; background: url(../image/s01_img.png) no-repeat center / 100%;}
#s01 .point{position: absolute; top: 130px; left: 50%; margin-left: -40px;}
#s01 .point img{position: absolute;}
#s01 .point img:nth-child(2){animation: rotate_ani 7s infinite linear;}
@keyframes rotate_ani{0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);}}
#s01 .text{position: absolute; top: 210px; left: 50%; margin-left: -790px; z-index: 1;}
#s01 .text img{position: absolute;}

/* s02 */
#s02{background: url(../image/s02_bg.jpg) no-repeat center / cover; width: 1700px; height: 1731px; position: relative; margin-top: 110px;
	 left: 50%; transform: translateX(-50%);}
#s02 .con01 .title{position: absolute; top: 240px; left: 50%; margin-left: -580px;}

#s02 .con01 .graph{background: url(../image/s02_graph.png) no-repeat center / cover; width: 690px; height: 679px; position: absolute; top: 100px;
			left: 50%; margin-left: 85px;}
#s02 .con01 .graph ul{width: 574px; height: 394px; display: flex; justify-content: space-between; align-items: flex-end; position: absolute; top: 49.7%; left: 50%; 
			   transform: translate(-50%, -50%);}
#s02 .con01 .graph ul li{width: 72px; background: #121212; opacity: 0.15; border-top-left-radius: 50px; border-top-right-radius: 50px; height: 0;}
#s02 .con01 .graph ul li:nth-child(6){background: #0012d4; opacity: 0.9;}
#s02 .con01 .graph ul li:nth-child(7){background: #0012d4; opacity: 0.9;}
#s02 .con01 .graph div{position: absolute;}
#s02 .con01 .graph .number{filter: blur(5px);}
#s02 .con02 .title{position: absolute; top: 915px; left: 50%; margin-left: -35px;}
#s02 .con02 .title img{position: absolute;}
#s02 .con02 .img{position: absolute; top: 725px; left: 50%; margin-left: -680px;}
#s02 .con02 .img img{position: absolute;}

/* s03 */
#s03{background: url(../image/s03_bg.jpg) no-repeat center / cover; height: 1220px; position: relative; text-align: center;}
#s03 .title{padding-top: 240px;}

#s03 .list{width: 1450px; height: 600px; margin-top: 50px; display: flex; justify-content: space-between; align-items: center; position: relative; left: 50%;
		   transform: translateX(-50%);}
#s03 .list li:nth-child(2){position: absolute; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; overflow: hidden; border-radius: 50%;
						   filter: brightness(110%); z-index: 1;}

/* s04 */
#s04{background: #fff; text-align: center; position: relative; height: 1280px;}
#s04 .title{padding-top: 125px;}
#s04 .img{position: absolute; left: 50%; margin-left: -475px; margin-top: 35px; z-index: 1;}
#s04 .img img{position: absolute;}
#s04 .img img:nth-child(2){animation: tilt_ani 1s infinite alternate linear; transform-origin: bottom;}
@keyframes tilt_ani{0%{transform: rotate(-5deg);} 100%{transform: rotate(5deg);}}
#s04 .img img:nth-child(3){animation: flash_ani 0.7s infinite alternate linear;}
#s04 .img img:nth-child(4){animation: flash_ani 0.7s 0.5s infinite alternate linear;}
#s04 .img img:nth-child(5){animation: flash_ani 0.7s 0.8s infinite alternate linear;}
#s04 .img img:nth-child(6){animation: flash_ani 0.7s 1.1s infinite alternate linear;}
#s04 .img img:nth-child(7){animation: flash_ani 0.7s 1.4s infinite alternate linear;}
@keyframes flash_ani{0%{opacity: 0.2;} 100%{opacity: 1;}}
#s04 .text{position: absolute; top: 740px; left: 50%; transform: translateX(-50%);}
#s04 .text img{position: absolute; left: 50%; transform: translateX(-50%);}
#s04 .bt{position: absolute; top: 970px; left: 50%; transform: translateX(-50%); z-index: 1;}

/* s05 */
#s05{background: url(../image/s05_bg.jpg) no-repeat center / cover; text-align: center; position: relative; animation: bg_ani 80s 0s infinite linear;
	 padding: 150px 0;}
@keyframes bg_ani {0%{background: url(../image/s05_bg.jpg) 0 0 fixed;} 100%{ background: url(../image/s05_bg.jpg)  -5000px 0 fixed;}}
#s05 .title{margin-bottom: 50px;}
#s05 .s05_menu{background: #fff; width: 1646px; margin: 0 auto; border-radius: 50px; padding-bottom: 100px;}

#s05 .s05_menu .s05_tab{width: 989px; margin: 0 auto; padding-top: 100px; display: flex; justify-content: space-between;}
#s05 .s05_menu .s05_tab li{font-size: 23px; font-weight: 600; letter-spacing: -1.5px; cursor: pointer; opacity: 0.5; transition: 0.3s;}
#s05 .s05_menu .s05_tab li.on{opacity: 1; color: #0012d4; font-weight: bold;}
#s05 .s05_menu .s05_swiper{width: 1382px; padding-top: 50px; margin: 0 auto;}
#s05 .s05_menu .s05_swiper .swiper-wrapper .swiper-slide{display:flex; flex-direction: column; align-items: center;}
#s05 .s05_menu .s05_swiper .swiper-wrapper .swiper-slide p{font-size: 20px; letter-spacing: -1.5px; font-weight: 500; margin-top: 10px;}

/* s06 */ 
@keyframes move_ani01 {0%{transform:translate(0,-15px)} 100%{transform:translate(0,0)}}
@keyframes move_ani02 {0%{transform: rotate(-2deg);} 100%{transform: rotate(2deg);}}
#s06{background: #fff; position: relative; height: 7870px;}
#s06 .con01{display: flex; align-items: center; position: absolute; top: 215px; width: 100%; height: 1056px;}
#s06 .con01 .title{position: absolute; left: 50%; margin-left: -739px;}
#s06 .con01 .circle{position: absolute; right: 50%; margin-right: -1417px;}
#s06 .con01 .img{position: absolute; left: 50%; margin-left: 187px; animation: move_ani01 0.7s 0s infinite alternate linear;}
#s06 .con02{display: flex; align-items: center; position: absolute; top: 1375px; width: 100%; height: 1056px;}
#s06 .con02 .title{position: absolute; left: 50%; margin-left: -156px;}
#s06 .con02 .circle{position: absolute; left: 50%; margin-left: -1417px;}
#s06 .con02 .img{position: absolute; right: 50%; margin-right: 187px; animation: move_ani01 0.7s 0s infinite alternate linear;}
#s06 .con03{display: flex; align-items: center; position: absolute; top: 2646px; width: 100%; height: 955px;}
#s06 .con03 .title{position: absolute; height: 788px; z-index: 1; left: 50%; margin-left: -920px;}
#s06 .con03 .title img{position: absolute;}
#s06 .con03 .title img:nth-child(2){animation: bounce_ani 0.3s 0s infinite alternate ease-in;}
#s06 .con03 .title img:nth-child(3){animation: bounce_ani 0.3s 0.2s infinite alternate ease-in;}
#s06 .con03 .title img:nth-child(4){animation: bounce_ani 0.3s 0.4s infinite alternate ease-in;}
#s06 .con03 .square{position: absolute; right: 50%; margin-right: -960px;}
#s06 .con03 .img{position: absolute; right: 50%; margin-right: -810px; top: 365px; animation: move_ani01 0.7s 0s infinite alternate linear;}
#s06 .con04{display: flex; align-items: center; position: absolute; top: 3966px; width: 100%; height: 955px;}
#s06 .con04 .title{position: absolute; left: 50%; margin-left: 5px;}
#s06 .con04 .square{position: absolute; left: 50%; margin-left: -960px;}
#s06 .con04 .img{position: absolute; left: 50%; margin-left: -825px; top: 325px;}
#s06 .con04 .img img{position: absolute; transform-origin: bottom;}
#s06 .con04 .img img:nth-child(1){animation: move_ani02 1s infinite alternate linear;}
#s06 .con04 .img img:nth-child(2){animation: move_ani02 1s infinite alternate-reverse linear;}
#s06 .con05{display: flex; align-items: center; position: absolute; top: 5186px; width: 100%; height: 955px;}
#s06 .con05 .title{position: absolute; right: 50%; margin-right: -30px;}
#s06 .con05 .square{position: absolute; right: 50%; margin-right: -960px;}
#s06 .con05 .img{position: absolute; left: 50%; margin-left: 260px; top: 325px;}
#s06 .con05 .img img{position: absolute; transform-origin: bottom;}
#s06 .con05 .img img:nth-child(1){animation: move_ani02 1s infinite alternate linear;}
#s06 .con05 .img img:nth-child(2){animation: move_ani02 1s infinite alternate-reverse linear;}
#s06 .con06{display: flex; align-items: center; position: absolute; top: 6525px; width: 100%; height: 1056px;}
#s06 .con06 .title{position: absolute; left: 50%; margin-left: -75px;}
#s06 .con06 .circle{position: absolute; left: 50%; margin-left: -1417px;}
#s06 .con06 .img{position: absolute; left: 50%; margin-left: -860px; top: 100px;}
#s06 .con06 .img img{position: absolute; transform-origin: bottom;}
#s06 .con06 .img img:nth-child(1){animation: move_ani02 1s infinite alternate linear;}
#s06 .con06 .img img:nth-child(2){animation: move_ani02 1s infinite alternate-reverse linear;}
#s06 .point img{position: absolute;}
#s06 .point img:nth-child(1){top: 1235px; left: 50%; margin-left: -372px;}
#s06 .point img:nth-child(2){top: 2500px; left: 50%; margin-left: 280px;}
#s06 .point img:nth-child(3){top: 3700px; left: 50%; margin-left: -463px;}
#s06 .point img:nth-child(4){top: 5025px; right: 50%; margin-right: -860px;}
#s06 .point img:nth-child(5){top: 6325px; left: 50%; margin-left: -475px;}

/* s07 */
#s07{background: url(../image/s07_bg.jpg) no-repeat center; height: 1200px; position: relative; text-align: center;}
#s07 .title{padding: 100px 0 50px;}
#s07 .s07_swiper{position: absolute; top: 475px; left: 50%; transform: translateX(-50%); width: 1800px;}
#s07 .s07_swiper .swiper-wrapper .swiper-slide{opacity: 0.7;}
#s07 .s07_swiper .swiper-wrapper .swiper-slide-active{opacity: 1;}
#s07 .bounce{position: absolute; top: 450px; left: 50%; margin-left: -250px; z-index: 1; animation: bounce_ani 0.3s 0s infinite alternate ease-in;}
#s07 .emoji img{position: absolute; z-index: 1; top: 450px; left: 50%; margin-left: 100px;}
@keyframes bounce_ani {0%{transform:translate(0,-4px)} 100%{transform:translate(0,0)}}
#s07 .talk{position: absolute; top: -125px; left: 50%; transform: translateX(-50%); animation: bounce_ani 0.3s 0.2s infinite alternate ease-in;}
#s07 .talk img{position: absolute; left: 50%; transform: translateX(-50%);}

/* s08 */
#s08{background: url(../image/s05_bg.jpg) no-repeat center / cover; height: 800px; position: relative; animation: bg_ani 80s 0s infinite linear;}
#s08 .title{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#s08 .list{display: flex; justify-content: space-between; width: 1324px; height: 600px; flex-wrap: wrap; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#s08 .list li{width: 49%; margin: 0.5%;}
#s08 .list li:nth-child(even){text-align: right;}

/* s09 */
#s09{text-align: center; padding: 150px 0;}

/* s10 */
#s10{display: flex; height: 700px;}
#s10 .con01{background: url(../image/s05_bg.jpg) no-repeat center / cover; width: 50%; animation: bg_ani 80s 0s infinite linear;
			display: flex; justify-content: center; align-items: center;}
#s10 .con02{background: url(../image/s10_bg.jpg) no-repeat center / cover; width: 50%;}

/* 푸터 */
footer{background: #1e1926; color: #fff; text-align: center; padding: 100px 0 200px;}
footer p{font-size: 17px; margin-top: 15px;} 

/* db */
.db_wrap{position: fixed; max-width: 1920px; width: 100%; bottom:-250px; background: #0012d4; box-shadow:0 0 90px rgba(0,0,0,0.8);
		 transition:0.8s; z-index: 9999; padding: 15px 0; overflow: hidden;}
.db_wrap.scroll_on{bottom:0;}

.db_wrap .db{width:1280px; margin:0 auto; box-sizing:border-box; display: flex; justify-content: space-between; align-items: center;}
.db_wrap .db h2{}
.db_wrap .db ul{display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 0 0 15px;}
.db_wrap .db ul li{width: 32.5%}
.db_wrap .db ul li a{text-decoration:underline; cursor: pointer;}
.db_wrap .db ul li input[type="text"]{width: 100%; padding: 12.5px 10px; box-sizing: border-box; background:#fff; border:1px solid #fff; font-size:15px;}
.db_wrap .db ul li input[type="text"]::placeholder{color: #aaa; font-size:15px;}


.db_wrap .db .agree{margin-top: 10px; text-align: left; color: #fff; font-size:15px; letter-spacing:-1px; width: 48%;}
.db_wrap .db .agree a{text-decoration:underline;}
.db_wrap .db .agree input[type="checkbox"]{width:18px; height:18px; vertical-align: middle; margin-right: 5px;}
.db_wrap .db .agree button{color: #fff; font-size:15px; letter-spacing:-1px; margin-left: 10px;}

.db_wrap .db .db_submit{margin-left: 15px; animation:submit_btn 0.3s 0s infinite alternate ease-in;}
.db_wrap .db .db_submit img{width:100%;}
@keyframes submit_btn {0%{transform:translate(0,-4px)} 100%{transform:translate(0,0)}}


.layer{position:fixed; display:none; left:0;top:180px; z-index:3000000; width:100%;}
.layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#aa0000; border-radius:0 10px 0 10px; color: #fff;}
.layer .close_btn a{display: block;color: #fff;padding:14px 18px; font-size:20px; font-weight:bold;}
.layer .layer_wrap{position:relative;width:100%; max-width:700px; top:0px; margin:0 auto; border-radius:10px; background:rgba(0,0,0,0.95); text-align:left; letter-spacing:-0.5px; box-shadow:0 0 50px rgba(0,0,0,0.6);}
.layer .layer_wrap .DB_info_detail{width:100%;  margin:18px auto; padding-bottom:16px; line-height:1.6; color: #fff;font-size:12px;}
.layer .layer_wrap .DB_info_detail h2{padding:22px;border-bottom:1px solid #222; font-size:24px; font-weight:bold;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap p{padding:8px;margin-bottom:12px; font-size:13px; }
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap{width:98%; height:360px; padding:8px 16px; overflow:auto; box-sizing:border-box;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dt{display:block; background: #fff;border-radius:3px; padding:7px 10px; font-weight: bold; color: #333;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dd{margin-bottom:16px; padding:4px 12px; box-sizing:border-box;}