.p-color{color: #004afa;}

.section .inner{margin-top: 90px;}
.section .inner > div{width: 78%; margin: 0 auto;}
/* section1 */
.main01{background: #004afa;}
.main01 ul{width: 100%; color: #fff; display: flex; align-items: flex-end;}
.main01 ul li:nth-child(1){width: 70%;}
.main01 ul li:nth-child(2){width: 30%; text-align: right; margin-bottom: 20px;}



.fp-viewing-0 .scroll_block {display:none}

/* .main01 ul li:nth-child(1) .move_txt{} */
.main01 ul li:nth-child(1) .move_txt.hide p{-webkit-text-stroke: 1px #fff; -webkit-text-fill-color: transparent; position: relative; height: 168px; line-height: 168px; white-space: nowrap;}
/* .main01 ul li:nth-child(1) .move_txt.hide p{transform: translateY(-168px);} */
.main01 ul li:nth-child(1) .move_txt.hide p:nth-child(1){margin-top: -336px;}

/* 애니메이션01 - 중앙으로 모이기 */
.main01 ul li:nth-child(1) .move_txt.hide{height: 168px; overflow: hidden; margin: 80px 0; transition: .25s; animation: margin ease-in-out 1s forwards;}

/* 애니메이션02 - 첫째 텍스트 글자 차오르기 */
.main01 ul li:nth-child(1) .move_txt.hide p#thr::before{content:attr(data-text); position: absolute; left: 0px;top: 50%; transform: translateY(-50%); width: 0; color: #fff;  -webkit-text-fill-color: #fff; overflow: hidden; animation: fill 1.5s ease-in-out forwards; animation-delay: 1s;}

/* 애니메이션03 - 첫째, 둘째 텍스트 넘어가기 */
.main01 ul li:nth-child(1) .move_txt.hide p:nth-child(1){animation: down 1s forwards ease-in-out 2.5s, down02 1s forwards ease-in-out 5s;}

/* 애니메이션04 - 둘째 텍스트 글자 차오르기 */
.main01 ul li:nth-child(1) .move_txt.hide p#sec::before{content:attr(data-text); position: absolute; left: 0px;top: 50%; transform: translateY(-50%); width: 0; color: #fff;  -webkit-text-fill-color: #fff; overflow: hidden; animation: fill 1.5s ease-in-out forwards; animation-delay: 3.5s;}

/* 애니메이션06 - 셋째 텍스트 글자 차오르기 */
.main01 ul li:nth-child(1) .move_txt.hide p#fir::before{content:attr(data-text); position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 0; color: #fff;  -webkit-text-fill-color: #fff; overflow: hidden; animation: fill 1s ease-in-out forwards; animation-delay: 6s;}


@keyframes margin {
    0%{margin: 80px 0;}
    100%{margin: 0px 0;}
}
@keyframes fill {
    0%{width: 0;}
    100%{width: 100%;}
}
@keyframes down {
    0%{margin-top: -336px;}
    100%{margin-top: -168px;}
}
@keyframes down02 {
    0%{margin-top: -168px;}
    100%{margin-top: -0px;}
}



@media screen and (max-width: 1600px) {
    .main01 ul li:nth-child(1) .move_txt.hide p{height: 122px; line-height: 122px;}
    .main01 ul li:nth-child(1) .move_txt.hide{height: 122px;}

    .main01 ul li:nth-child(1) .move_txt.hide p:nth-child(1){margin-top: -244px;}
    @keyframes down {
        0%{margin-top: -244px;}
        100%{margin-top: -122px;}
    }
    @keyframes down02 {
        0%{margin-top: -122px;}
        100%{margin-top: -0px;}
    }
}
@media screen and (max-width: 1200px) {
    .main01{padding: 250px 0;}
}
@media screen and (max-width: 1000px) {
    .main01{padding: 150px 0;}

    .main01 ul{flex-wrap: wrap;}
    .main01 ul li:nth-child(1){width: 100%; }
    .main01 ul li:nth-child(2){width: 100%; text-align: left; margin-top: 30px;}

    
}
@media screen and (max-width : 500px) {
    .main01 ul li:nth-child(2){word-break: keep-all;}
    .main01 ul li:nth-child(2) br.none{display: none;}

    .main01 ul li:nth-child(1) .move_txt{font-size: 48px;}
    .main01 ul li:nth-child(1) .move_txt p{font-size: 48px;}

    .main01 ul li:nth-child(1) .move_txt.hide p{height: 85px; line-height: 85px;}
    .main01 ul li:nth-child(1) .move_txt.hide{height: 85px;}

    .main01 ul li:nth-child(1) .move_txt.hide p:nth-child(1){margin-top: -170px;}
    @keyframes down {
        0%{margin-top: -170px;}
        100%{margin-top: -85px;}
    }
    @keyframes down02 {
        0%{margin-top: -85px;}
        100%{margin-top: -0px;}
    }
}


/* section2 */
.main02{background: #004afa;}
.main02 ul.main_flex{display: flex; align-items: center; color: #fff;}
.main02 ul.main_flex li:nth-child(1){width: 50%;}
.main02 ul.main_flex li:nth-child(2){width: 50%; position: relative;}
.main02 ul.main_flex li:nth-child(2)::before{content: ""; width: 100%; height: 160px; background: linear-gradient(to bottom, #004afa, #004bfa00); position: absolute; top: 0; left: 0; z-index: 2;}
.main02 ul.main_flex li:nth-child(2)::after{content: ""; width: 100%; height: 160px; background: linear-gradient(to top, #004afa, #004bfa00); position: absolute; bottom: 0; left: 0; z-index: 2;}

.main02 ul.main_flex li .right_poster{height: 750px;}
.main02 ul.main_flex li .right_poster .swiper-slide{
    display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}
/* .main02 ul.main_flex li .right_poster .swiper-slide{padding: 10px;} */
.main02 ul.main_flex li .right_poster .swiper-slide > div{background: #fff; padding: 10px; width: 100%;}
.main02 ul.main_flex li .right_poster .swiper-slide h3{background: #004afa; padding: 35px 20px; position: relative; overflow: hidden;}
.main02 ul.main_flex li .right_poster .swiper-slide h3::after{content: url(../img/main/spot_bg.png); position: absolute; right: -5px; top: 58%; transform: translateY(-50%);}
.main02 ul.main_flex li .right_poster .swiper-slide h3 img{display: inline-block; margin-right: 15px;}
.main02 ul.main_flex li .right_poster .swiper-slide .sale_txt{padding: 40px 20px; border: 2px solid #004afa; box-sizing: border-box; }
.main02 ul.main_flex li .right_poster .swiper-slide .sale_txt p:nth-child(1){color: #000;}
.main02 ul.main_flex li .right_poster .swiper-slide .sale_txt p:nth-child(2){color: #001be1; font-style: italic;}

@media screen and (max-width : 1000px) {
    .main02 ul.main_flex{flex-wrap: wrap;}
    .main02 ul.main_flex li:nth-child(1){width: 100%;}
    .main02 ul.main_flex li:nth-child(2){width: 100%; margin-top: 50px;}
    .main02 ul.main_flex li .right_poster{height: 380px;}

    .main02 ul.main_flex li .right_poster .swiper-slide h3 img{width: 30px;}
    .main02 ul.main_flex li:nth-child(2)::before{display: none;}
    .main02 ul.main_flex li:nth-child(2)::after{display: none;}
}


/* section3 */
.main03{background: #004afa;}
.main03 .inner > div{color: #fff; position: relative;}
.main03 .inner > div::after{content: url(../img/main/main03_bg.png); position: absolute; right: 0; top: 0;}
.main03 .inner > div a{color: #fff;}
.main03 .store_tit{display: flex; flex-wrap: wrap; align-items: flex-end;}
.main03 .store_tit h4{margin-right: 40px;}
.main03 .store_tit h4 b{line-height: 65%;}

.main03 .store_swiper{margin-top: 50px;}
.main03 .store_swiper .swiper-slide{background: #fff; padding: 10px;}
.main03 .store_swiper .swiper-slide a{border: 2px solid #001be1; box-sizing: border-box;}
.main03 .store_swiper .swiper-slide a h3{background: #001be1; padding: 15px 10px; position: relative;}
.main03 .store_swiper .swiper-slide a h3::after{content: url(../img/main/a_link.png); position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.main03 .store_swiper .swiper-slide a .store_img{margin: 60px 10px 10px;}
.main03 .store_swiper .swiper-slide a .store_img img{width: 100%; transition: .25s;filter: grayscale(1);} 
.main03 .store_swiper .swiper-slide a .store_img .s_txt{color: #333; position: relative; z-index: 1;}
.main03 .swiper-store-button-prev{position: absolute; left: -80px; top: 60%; transform: translateY(-50%); cursor: pointer;}
.main03 .swiper-store-button-next{position: absolute; right: -70px; top: 60%; transform: translateY(-50%); cursor: pointer;}

.main03 .store_swiper .swiper-slide:hover a .store_img img{filter: grayscale(0);}
@media screen and (max-width: 1200px) {
    .main03{padding: 250px 0;}
    .main03 .swiper-store-button-prev{left: -65px;}
    .main03 .swiper-store-button-next{right: -65px;}
    .main03 .swiper-store-button-prev img{width: 40px;}
    .main03 .swiper-store-button-next img{width: 40px;}
    /* .main03 .store_swiper .swiper-slide a .store_img img{margin-top: -100px;} */
}
@media screen and (max-width: 1000px) {
    .main03{padding: 150px 0;}
    .main03 .swiper-store-button-prev{left: 0; top: 105%;}
    .main03 .swiper-store-button-next{right: auto; left: 50px; top: 105%;}
    .main03 .inner > div::after{top: -110px;}
}
@media screen and (max-width: 768px) {
    .main03 .store_swiper .swiper-slide a .store_img .s_txt p br.none{display: block;}
}


/* main04 */
.main04 .inner > div{position: relative;}
.main04 .km_left{color: #004afa;}
.main04 .km_left .point_tit h4,
.main04 .km_left .point_tit h5{display: inline-block;}
.main04 .km_left .point_tit h5{color: #001be1; position: relative; position: relative;}
.main04 .km_left .point_tit h5::before{content: ""; width: 100%; height: 100%; background: #f7f8f8; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; filter: blur(14px);}
.main04 .km_left .point_tit h5::after{content: ""; width: 20px; height: 20px; background: #004afa; border-radius: 100%; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);}

.main04 .km_left .km_step{margin: 60px 0;}
.main04 .km_left .km_step ul li .dot{width: 12px; height: 12px; border-radius: 100%; background: #004afa; display: inline-block; margin-right: 20px;}
.main04 .km_left .km_step ul li.line{width: 1px; height: 40px; border-left: 2px dotted #004afa; margin-left: 4px;}

.main04 .km_left > p b{font-weight: 500;}


.main04 .km_motion{position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: -2;}
.main04 .km_motion #lottie{width: 650px; height: 650px; border: none;}

@media screen and (max-width: 1200px){
    .main04{padding: 250px 0 400px;}
    .main04 .km_motion{top: auto; bottom: -35%; transform: translateY(0);}
    .main04 .km_motion #lottie{width: 500px !important; height: 500px !important;}
}
@media screen and (max-width: 1000px){
    .main04{padding: 150px 0 300px;}
}
@media screen and (max-width: 768px){
    .main04 .km_left .point_tit h4{display: block; margin-bottom: 45px;}

    .main04 .km_left .point_tit h5::after{width: 15px; height: 15px; top: -30px;}

    .main04 .km_motion #lottie{width: 400px !important; height: 400px !important;}
}
@media screen and (max-width: 500px){
    .main04 .km_motion #lottie{width: 300px !important; height: 300px !important;}
}





/* main05 */
.main05 .inner > div{position: relative;}
.main05 .inner > div::after{content: url(../img/main/main05_bg.png); position: absolute; right: 0; top: 0;}
.main05 .success_tit{display: flex; flex-wrap: wrap; align-items: flex-end; color: #004afa;}
.main05 .success_tit h4{margin-right: 40px; margin-bottom: -35px;}

.main05 .success_box{border: 2px solid #004afa; box-sizing: border-box; margin-top: 60px;}
.main05 .success_box ul{display: flex; flex-wrap: wrap;}
.main05 .success_box ul li{width: calc(33.3333% - 20px); margin: 10px; text-align: center; color: #004afa;}
.main05 .success_box ul li h5{background: #004afa; color: #fff; padding: 10px 0 3px;}
.main05 .success_box ul li p{padding: 30px 0;}
.main05 .success_box ul li p b{padding-bottom: 10px; display: inline-block;}

@media screen and (max-width: 1200px){
    .main05{padding: 250px 0;}
}
@media screen and (max-width: 1000px){
    .main05{padding: 150px 0;}
}
@media screen and (max-width: 768px){
    .main05 .success_tit h4{margin-bottom: 0;}
    .main05 .success_box ul li{width: 100%;}

    .main05 .inner > div::after{top: -20px;}
}




/* main06 */
.main06{background: #004afa; color: #fff;}
.main06 .motion_tit h2{display: inline-block; width: 540px;}
.main06 .motion_tit .move_line{display: inline-block; width: calc(100% - 100%); height: 22px; margin-bottom: -10px; margin-left: -10px; background: #fff; position: relative;}
.main06 .motion_tit .move_line img{position: absolute; right: 0; bottom: -50%; opacity: 0; visibility: hidden;}

.main06 .flex{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;}
.main06 .flex h3{line-height: 80%; margin-top: 40px;}

/* 애니메이션 active */
.main06.ani .motion_tit .move_line{animation: line_move 1.5s ease-in-out  forwards;}
.main06.ani .motion_tit .move_line img{animation: up_icon .5s ease-in-out forwards; animation-delay: 1.5s;}

@keyframes line_move {
    0%{width: calc(100% - 100%);}
    100%{width: calc(100% - 530px);}
}
@keyframes up_icon {
    0%{opacity: 0; visibility: hidden; bottom: -50%;}
    100%{opacity: 1; visibility: visible; bottom: 0;}
}

@media screen and (max-width:1600px) {
    .main06 .motion_tit .move_line{height: 16px; margin-bottom: -7px;}
    .main06 .motion_tit h2{width: 385px;}
    @keyframes line_move {
        0%{width: calc(100% - 100%);}
        100%{width: calc(100% - 395px);}
    }
}
@media screen and (max-width:1200px) {
    .main06{padding: 250px 0 !important;}
    .main06 .motion_tit .move_line{height: 12px; margin-bottom: -7px;}

    .main06 .flex h3{width: 100%; padding-bottom: 40px;}

    .main06 .motion_tit h2{width: 348px;}
    @keyframes line_move {
        0%{width: calc(100% - 100%);}
        100%{width: calc(100% - 358px);}
    }
}
@media screen and (max-width:1000px) {
    .main06{padding: 150px 0 !important;}
    .main06.ani .motion_tit .move_line img{width: 35px;}
    @keyframes line_move {
        0%{width: calc(100% - 100%);}
        100%{width: calc(100% - 50%);}
    }
}
@media screen and (max-width:768px) {
    .main06 .motion_tit .move_line{height: 9px; margin-bottom: -5px;}
    .main06.ani .motion_tit .move_line img{width: 30px;}
    .main06 .motion_tit h2{width: 272px;}
    @keyframes line_move {
        0%{width: calc(100% - 100%);}
        100%{width: calc(100% - 282px);}
    }
}
@media screen and (max-width:600px) {
    .main06 .motion_tit .move_line{height: 9px; margin-bottom: -5px;}
}
@media screen and (max-width:400px) {
    .main06 .motion_tit .move_line{height: 8px; margin-bottom: -4px;}
    .main06.ani .motion_tit .move_line img{width: 20px;}

    .main06 .motion_tit h2{width: 230px;}
    @keyframes line_move {
        0%{width: calc(100% - 100%);}
        100%{width: calc(100% - 240px);}
    }
}


/* main07 */
.main07 .top_tit{width: 100%;}
.main07 .top_tit > ul {display:flex; width: 100%; margin: 0 auto;}
.main07 .top_tit > ul > li:nth-child(1) {width:55%}
.main07 .top_tit > ul > li:nth-child(2) {width:45%}

/*.main07 .top_tit > ul > li:nth-child(2) ul li:nth-child(1) {width:30%}
.main07 .top_tit > ul > li:nth-child(2) ul li:nth-child(2) {width:70%}*/


/* 좌측 txt */
.main07 .top_tit > ul > li:nth-child(1) h2:nth-child(2){padding-bottom: 40px;}
.main07 .top_tit ul li > p{margin-top: 0px; display: inline-block; width: 35%; position: relative;}
.main07 .top_tit ul li > p::after{content: "평"; font-size: 25px; font-weight: 800; position: absolute; right: 35px; top: 50%; transform: translateY(-50%);}
.main07 .top_tit ul li > p input:nth-child(1){width: 100%; height: 60px; text-align: center; line-height: 59px; border: 2px solid #004afa; border-radius: 0;  color: #004afa; padding: 10px; font-size: 30px; font-weight: 800; background: #f7f8f8;}
.main07 .top_tit ul li > p input{box-shadow: none; -webkit-box-shadow: none;}
.main07 .top_tit ul li > p input:not(:first-child){width: 15px; height: 15px; border: 1px solid #004afa; border-radius: 0;}
.main07 .top_tit ul li > p label{display: inline-block; margin-right: 10px;}
.main07 .top_tit ul li #calculateButton{width: calc(100% - 65%); text-align: center; height: 60px; line-height: 60px; color: #fff; background: #004afa; border: 2px solid #004afa; box-sizing: border-box; font-size: 20px; display: inline-block; cursor: pointer; transition: .25s; margin-left: -8px;}
.main07 .top_tit ul li #calculateButton p{display: block; width: 100%; height: 100%;}
.main07 .top_tit ul li #calculateButton:hover{background: #004afa; color: #fff;}

.main07 .top_tit ul li > p input:nth-child(1)::placeholder{color: #004afa;}

/* 우측 영수증 txt */
.main07 .receipt  ul {display:flex; align-items: flex-end; justify-content: space-between;}
.main07 .top_tit > ul > li .receipt{width: 100%; background: url(../img/main/receipt_bg.png) no-repeat; background-size: cover; background-position: top center; padding: 60px 30px; color: #004afa; box-shadow: 1px 5px 10px #cccccc75;}
.main07 .top_tit > ul > li .receipt > div{padding: 0 20px;}
.main07 .top_tit > ul > li .receipt ul li:nth-child(2){text-align: right;}

.main07 .top_tit > ul > li .receipt .rct_tit{display: flex; justify-content: space-between;}

.main07 .top_tit > ul > li .receipt .rct_list{border: 3px dashed #004afa; border-left: 0; border-right: 0; margin: 20px 0; padding: 10px 20px;}
.main07 .top_tit > ul > li .receipt .rct_list ul{margin: 20px 0;}
.main07 .top_tit > ul > li .receipt .rct_list ul li:nth-child(1){font-size: 17px; font-weight: 500;}
.main07 .top_tit > ul > li .receipt .rct_list ul li:nth-child(2){font-size: 17px; color: #878787; font-weight: 300;}
.main07 .top_tit > ul > li .receipt .rct_list ul li:nth-child(2) span:first-child {color: #004afa; font-size: 22px; font-weight: 500;}




.block_ {background:#001be1; padding:5px 5px 0px; color:#fff; font-weight:800; font-size:16px; margin-left: 4px;}

.main07 .top_tit > ul > li .receipt .rct_total{border: 1px solid #001be1; display: flex; padding: 5px;}
.main07 .top_tit > ul > li .receipt .rct_total p{background: #001be1; color: #fff; padding: 10px 20px 8px;}
.main07 .top_tit > ul > li .receipt .rct_total p:nth-child(1){width: 100px;}
.main07 .top_tit > ul > li .receipt .rct_total p:nth-child(2){width: calc(100% - 100px); text-align: right; font-size: 25px; font-weight: bold;}

.main07 .top_tit > ul > li .receipt .vat{color: #878787; font-size: 15px; font-weight: 300; text-align: center; margin-top: 20px; padding: 0 0;}
.main07 .top_tit > ul > li .receipt .vat p{font-size: 13px; padding-top: 10px; line-height: 160%;}

@media screen and (max-width : 1400px) {
	.block_ {font-size: 14px;}
	.main07 .top_tit > ul > li .receipt .rct_list ul li:nth-child(2) span:first-child{font-size: 20px;}

	.main07 .top_tit ul li #calculateButton{font-size: 17px;}
}
@media screen and (max-width : 1200px) {
    .main07{padding: 200px 0 !important;}
	.main07 .top_tit > ul > li:nth-child(1) {width:50%}
	.main07 .top_tit > ul > li:nth-child(2) {width:50%}
}
@media screen and (max-width : 1000px) {
    .main07{padding: 150px 0 !important;}
    .main07 .top_tit > ul{flex-wrap: wrap;}
    .main07 .top_tit > ul > li:nth-child(1) {width:100%;}
    .main07 .top_tit > ul > li:nth-child(2) {width:100%; margin-top: 40px;}
}
@media screen and (max-width : 768px){
	.main07 .top_tit > ul > li .receipt .rct_list ul {margin:30px 0px}
	.main07 .top_tit > ul > li .receipt .rct_list {padding:10px 0px}
    .main07 .top_tit ul li #calculateButton{font-size: 18px;}
	.main07 .receipt  ul {flex-wrap:wrap}

	.block_ { font-size:16px}
	.main07 .top_tit ul li > p input:nth-child(1){ font-size:18px}
	.main07 .top_tit ul li > p::after{ font-size:18px}
	.main07 .top_tit ul li > p{line-height: 130%;}

    .main07 .top_tit > ul > li:nth-child(2) ul li:nth-child(1) {width:100%}
    .main07 .top_tit > ul > li:nth-child(2) ul li:nth-child(2) {width:100%; margin-top:20px}

    .main07 .top_tit > ul > li .receipt .rct_total p:nth-child(1){width: 90px;}
    .main07 .top_tit > ul > li .receipt .rct_total p:nth-child(2){font-size: 20px; width: calc(100% - 90px);}
}
@media screen and (max-width : 650px){
.main07 .top_tit ul li #calculateButton{width: calc(100% - 60%);}
 .main07 .top_tit ul li #calculateButton{font-size: 16px;}
}
@media screen and (max-width : 500px){
    .main07 .top_tit > ul > li .receipt{padding: 50px 20px;}
}



/* main08 */
.main08{width: 100%; color: #004afa;}
.main08 .inner > div{position: relative;}
.main08 .inner > div::after{content: url(../img/main/main08_bg.png); position: absolute; right: 0; bottom: 0;}
.main08 .main_txt_ani{text-align: center; display: flex; align-items: center; justify-content: center;}
.main08 .animate_txt{width: 650px; height: 120px; overflow: hidden; position: relative; text-align: center; display: inline-block;}
.main08 .animate_txt::before{content: "["; position: absolute; left: 0; top: 55%; transform: translateY(-50%); font-size: 100px; font-weight: 800; 
    text-shadow: -1px 0 #004afa, 0 1px #004afa, 1px 0 #004afa, 0 -1px #004afa;
    -moz-text-shadow: -1px 0 #004afa, 0 1px #004afa, 1px 0 #004afa, 0 -1px #004afa;
    -webkit-text-shadow: -1px 0 #004afa, 0 1px #004afa, 1px 0 #004afa, 0 -1px #004afa;
    color: #f7f8f8;
}
.main08 .animate_txt::after{content: "]"; position: absolute; right: 0; top: 55%; transform: translateY(-50%); font-size: 100px; font-weight: 800;
    text-shadow: -1px 0 #004afa, 0 1px #004afa, 1px 0 #004afa, 0 -1px #004afa;
    -moz-text-shadow: -1px 0 #004afa, 0 1px #004afa, 1px 0 #004afa, 0 -1px #004afa;
    -webkit-text-shadow: -1px 0 #004afa, 0 1px #004afa, 1px 0 #004afa, 0 -1px #004afa;
    color: #f7f8f8;}

.main08 .inner > div > h3{text-align: center;}

.main08 .animate_txt p{/*position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;*/ line-height: 95px; height: 120px; color: #001be1; padding: 20px 0;}
.main08 .inner > div h3{word-break: keep-all;}

/* animation active */
.main08.ani .animate_txt p{animation: txt_flip; animation-duration: 3s; animation-fill-mode: forwards;}
@keyframes txt_flip {
    0%{transform: translateY(0px);}
    12%{transform: translateY(-120px);}
    24%{transform: translateY(-240px);}
    38%{transform: translateY(-360px);}
    52%{transform: translateY(-480px);}
	68%{transform: translateY(-600px);}
	84%{transform: translateY(-720px);}
	100%{transform: translateY(-840px);}
}

.main08 .inner > div > p{margin-top: 50px;}

@media screen and (max-width : 1600px) {
    .main08 .animate_txt{width: 550px;}
}
@media screen and (max-width : 1220px) {
    .main08 .inner > div h3{font-size: 90px;}
    .main08 .main_txt_ani{flex-wrap: wrap; flex-direction: column;}
}
@media screen and (max-width : 1200px) {
    .main08{padding: 250px 0 !important;}
    .main08 .inner > div > p{text-align: center;}
    .main08 .inner > div > p br.none{display: none;}

    .main08 .inner > div::after{bottom: -70px;}
}
@media screen and (max-width : 1000px) {
    .main08{padding: 150px 0 !important;}
    .main08 .inner > div h3{font-size: 70px;}
}
@media screen and (max-width : 768px) {
    .main08 .inner > div h3{font-size: 50px;}
    .main08 .animate_txt{width: 100%;}
    .main08 .animate_txt::before{font-size: 80px;}
    .main08 .animate_txt::after{font-size: 80px;}
}





/* main9 */
.main09 .inner > div{display: flex; flex-wrap: wrap; align-items: center; color: #004afa;}
.main09 .graph_left{width: 50%;}
.main09 .graph_left ul{display: flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 20px;}
.main09 .graph_left ul li{width: 20%;}
.main09 .graph_left ul li span{display:block; text-align: center;}
.main09 .graph_left ul li .graph_wrap{width: 45px; height: 500px; margin: 0 auto; padding: 0 2px; border-left: 1px solid #c0c0c0; box-sizing: border-box; transform: rotate(180deg);}
.main09 .graph_left ul li .graph_wrap .guage{width: 100%; height: 0%; background: #c0c0c0; position: relative; bottom: 0;}
.main09 .graph_left ul li .graph_wrap .guage.blue{background: #004afa;}
.main09 .graph_left ul li:last-child span{font-weight: 600;}

/* animation active */
.main09.ani .graph_left ul li:nth-child(1) .graph_wrap .guage{animation: guage01 1.2s ease-in-out forwards;}
.main09.ani .graph_left ul li:nth-child(2) .graph_wrap .guage{animation: guage02 1s ease-in-out forwards;}
.main09.ani .graph_left ul li:nth-child(3) .graph_wrap .guage{animation: guage03 1s ease-in-out forwards;}
.main09.ani .graph_left ul li:nth-child(4) .graph_wrap .guage{animation: guage04 1s ease-in-out forwards;}
.main09.ani .graph_left ul li:nth-child(5) .graph_wrap .guage{animation: guage05 1.3s ease-in-out forwards;}

@keyframes guage01 {
    0%{height: 0%;}
    100%{height: 15%;}
}
@keyframes guage02 {
    0%{height: 0%;}
    100%{height: 25%;}
}
@keyframes guage03 {
    0%{height: 0%;}
    100%{height: 35%;}
}
@keyframes guage04 {
    0%{height: 0%;}
    100%{height: 55%;}
}
@keyframes guage05 {
    0%{height: 0%;}
    100%{height: 100%;}
}

.main09 .graph_txt{width: 50%; text-align: right;}
.main09 .graph_txt > p{padding-top: 40px;}

@media screen and (max-width : 1200px) {
    .main09{padding: 250px 0 !important;}
}
@media screen and (max-width : 1000px) {
    .main09{padding: 150px 0 !important;}

    .main09 .graph_left{width: 100%;}
    .main09 .graph_left ul li .graph_wrap{height: 300px;}
    .main09 .graph_left > p{text-align: right;}

    .main09 .graph_txt{width: 100%; text-align: left; margin-top: 40px;}
}




/* main10 */
.main10{background: #004afa; color: #fff;}
.main10 .inner > div{display: flex;flex-wrap: wrap; align-items: center; justify-content: space-between;}
.main10 .app_left{width: calc(100% - 406px);}
.main10 .app_left h3 b{position: relative;}
.main10 .app_left h3 b::after{content: url(../img/main/light_icon.png); position: absolute; top: -25%; left: 50%; transform: translate(-50%, -50%);}
.main10 .app_left p{padding-top: 30px;}

.main10 .app_swiper{width: 406px; height: 772px; position: relative; background: url(../img/main/phone_mk.png) no-repeat; background-position: center; background-size: cover;}
.main10 .app_swiper .swiper-container{width: 375px; overflow: hidden;}
.main10 .app_swiper .swiper-slide{width: 375px; height: 728px; top: 120px; left: 0px; margin-top: 0;}
.main10 .app_swiper .swiper-slide img{width: 375px; }

.main10 .app_swiper .swiper-app-button-next{position: absolute; right: -70px; top: 50%; transform: translateY(-50%); cursor: pointer;}
.main10 .app_swiper .swiper-app-button-prev{position: absolute; left: -70px; top: 50%; transform: translateY(-50%); cursor: pointer;}

@media screen and (max-width : 1600px) {
    .main10 .app_swiper{width: 320px; height: 609px;}
    .main10 .app_swiper .swiper-container{width: 295px;}
    .main10 .app_swiper .swiper-slide{width: 295px; height: 574px; top: 95px;}
    .main10 .app_swiper .swiper-slide img{width: 295px;}
}
@media screen and (max-width : 1200px) {
    .main10{padding: 250px 0;}
    .main10 .app_swiper .swiper-app-button-next{right: -50px;}
    .main10 .app_swiper .swiper-app-button-prev{left: -50px;}
    .main10 .app_swiper .swiper-app-button-next img{width: 40px;}
    .main10 .app_swiper .swiper-app-button-prev img{width: 40px;}
}
@media screen and (max-width : 1000px) {
    .main10{padding: 150px 0;}

    .main10 .app_left{width: 100%; margin-bottom: 50px; text-align: center;}
    .main10 .app_swiper{margin: 0 auto;}

    .main10 .app_swiper .swiper-app-button-next{right: 110px; top: 105%;}
    .main10 .app_swiper .swiper-app-button-prev{left: 110px; top: 105%;}
}




/* main11 */
.main11{color: #004afa;}
.main11 .inner > div{position: relative;}
.main11 .inner > div::after{content: url(../img/main/main11_bg.png); position: absolute; right: 0; top: 0px;}

.main11 .menu_tit{display: flex; align-items: flex-end; margin-bottom: 40px;}
.main11 .menu_tit > h3{letter-spacing: -1px;}
.main11 .menu_tit > p{margin-bottom: 20px; margin-left: 40px;}


.main11 .menu_latest{width: 100%; display: flex; align-items: center;}
.main11 .menu_latest .tab_menu{width: 240px; display: flex; align-items: center;}
.main11 .menu_latest .tab_menu > ul{width: 100px; margin-right: 20px;}
.main11 .menu_latest .tab_menu > ul > li{width: 100%; text-align: center; border: 1px solid #004afa; padding: 5px 0 0; transition: .25s; cursor: pointer;}
.main11 .menu_latest .tab_menu > ul > li:nth-child(2){margin: 30px 0;}
.main11 .menu_latest .tab_menu > ul > li:hover,
.main11 .menu_latest .tab_menu > ul > li.on{background: #004afa; color: #fff;}

.main11 .menu_latest .tab_menu .sub_tab{}
.main11 .menu_latest .tab_menu .sub_tab ul{display: none;}
.main11 .menu_latest .tab_menu .sub_tab ul.on{display: block;}
/* .main11 .menu_latest .tab_menu .sub_tab ul:nth-child(1){display: block;} */
.main11 .menu_latest .tab_menu .sub_tab ul li{margin: 6px 0; font-weight: 300; cursor: pointer; transition: .25s;}
.main11 .menu_latest .tab_menu .sub_tab ul li:hover,
.main11 .menu_latest .tab_menu .sub_tab ul li.on{font-weight: bold;}

.main11 .menu_latest .show_menu{width: calc(100% - 240px);}
.main11 .menu_latest .show_menu ul li{display: none;}
.main11 .menu_latest .show_menu ul li.on{display: block;}


@media screen and (max-width : 1400px) {
    .main11 .inner > div::after{top: -75px;}

}
@media screen and (max-width : 1300px) {
    .main11 .menu_tit{flex-wrap: wrap; flex-direction: column; align-items: flex-start;}
    .main11 .menu_tit > p{margin-left: 0; margin-top: 30px;}

}
@media screen and (max-width : 1200px) {
    .main11{padding: 250px 0;}
}
@media screen and (max-width : 1000px) {
    .main11{padding: 200px 0 150px;}
    
    .main11 .menu_latest {flex-wrap: wrap;}
    .main11 .menu_latest .tab_menu{width: 100%; flex-wrap: wrap;}
    .main11 .menu_latest .show_menu{width: 100%;}
    
    .main11 .menu_latest .tab_menu > ul{display: flex; flex-wrap: wrap; width: 100%; align-items: center;}
    .main11 .menu_latest .tab_menu > ul > li{width: 90px; margin-bottom: 5px;}
    .main11 .menu_latest .tab_menu > ul > li:nth-child(2){margin: 0px 10px 5px;}
    
    .main11 .menu_latest .tab_menu .sub_tab ul{margin: 10px 0;}
    .main11 .menu_latest .tab_menu .sub_tab ul li{display: inline-block; margin-right: 10px;}
}
@media screen and (max-width : 768px) {
    .main11 .inner > div::after{top: -155px;}
}
@media screen and (max-width : 550px) {
    .main11 .inner > div::after{top: -200px;}
}




/* main12 */
.main12{background: #004afa; color: #fff;}
.main12 .inner > div{position: relative;}
.main12 .inner > div::after{content: url(../img/main/main12_bg.png); position: absolute; right: 0; top: -65px;}

.main12 .step_tit{display: flex; flex-wrap: wrap; align-items: flex-end;}
.main12 .step_tit h4{margin-right: 40px; line-height: 80%;}
.main12 .step_tit h4 b{line-height: 65%;}

.main12 .step_box{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px;}
.main12 .step_box li{width: 24%; margin-bottom: 15px; background: #fff; padding: 8px;}
.main12 .step_box li h5{background: #001be1; padding: 15px 10px 10px;}
.main12 .step_box li > div{border: 2px solid #001be1; box-sizing: border-box; min-height: 150px; padding: 20px 10px;}
.main12 .step_box li > div p{color: #000;}


@media screen and (max-width : 1650px) {
    .main12 .step_tit{flex-direction: column; align-items: flex-start;}
    .main12 .step_tit h4{padding-bottom: 20px;}
}
@media screen and (max-width : 1600px) {
    .main12 .step_box{justify-content: flex-start;}
    .main12 .step_box li{width: calc(33.3333% - 15px); margin-right: 20px;}
    .main12 .step_box li:nth-child(3n){margin-right: 0;}
}
@media screen and (max-width : 1200px) {
    .main12{padding: 250px 0;}
}
@media screen and (max-width : 1000px) {
    .main12{padding: 150px 0;}
}
@media screen and (max-width : 900px) {
    .main12 .step_box li{width: calc(50% - 15px); margin-right: 20px;}
    .main12 .step_box li:nth-child(3n){margin-right: 20px;}
    .main12 .step_box li:nth-child(2n){margin-right: 0px;}
}
@media screen and (max-width : 580px) {
    .main12 .step_box li{width:100%; margin-right: 0px;}
    .main12 .step_box li:nth-child(3n){margin-right: 0px;}
}


/* main13 */
.main13{background: #004afa; color: #fff;}
.main13 .inner > div{position: relative;}
.main13 .inner > div::after{content: url(../img/main/main13_bg.png); position: absolute; right: -60px; top: -55px;}

.main13 h3{word-break: keep-all;}
.main13 p{padding-top: 30px;}
.main13 .link_a a{color: #fff; border: 1px solid #fff; padding: 8px 15px 5px; margin-top: 80px; display: inline-block; transition: .25s;}
.main13 .link_a a:hover{background: #fff; color: #004afa;}


@media screen and (max-width: 1400px) {
    .section .inner > div{width: 80%;}
}
@media screen and (max-width: 1200px) {
    .section .inner > div{width: 90%;}
    .main13{padding: 250px 0; text-align: center;}
}
@media screen and (max-width: 1000px) {
    .section .inner > div{width: 100%;}
    .main13{padding: 150px 0;}
    .main13 .inner > div::after{right: 0px; top: -125px;}
}