@charset "utf-8";

/**
 * --------------------------------
 * common CSS
 * --------------------------------
*/

/* base */
html {width:100%;overflow-x: hidden;}
body {width:100%; font-family: -apple-system,blinkmacsystemfont,Helvetica,roboto,sans-serif;font-weight:400;font-size:16px;line-height:1;color:#000;letter-spacing:-0.025em;word-wrap:break-word;}
h1,h2,h3,h4,h5,h6 {margin:0;font-weight:400;}
ul, ol {list-style:none;margin:0;padding:0;}
button {font-family: -apple-system,blinkmacsystemfont,Helvetica,roboto,sans-serif;cursor:pointer;padding:0;border:none;letter-spacing:-0.025em;background-color:transparent;outline:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;}
a {color:#767676;text-decoration:none;outline:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;}
i, p, div, span, li {margin:0;}
em {display:inline-block;font-style:normal;}
table {table-layout:fixed;width:100%;border-collapse:collapse;border-spacing:0;}
table caption {display:none;}
th, td {padding:0;}
dl, dd {margin:0;}
figure {margin:0;}
img {vertical-align:top;max-width: 100%;}
address {font-style:normal;}
.hide {position:absolute !important;left:-9999px;}
*, *:before, *:after {box-sizing:border-box;outline: none;}

.inner {margin: 0 auto;width: 100%;}

header {position: absolute;top: 0;left: 0;width: 100%;height: 56px;background-color: #fff;border-bottom: 1px solid #f6f6f6;z-index: 10;transition: top .4s ease-in-out;}
header img {width: 100%;}
header.down {top: -56px;}
#container {position: relative;width: 100%;}

.scorlldown {position: fixed;bottom: 130px;left: 50%;margin-left: -25px;padding-bottom: 40px;width: 50px;text-align: center;transition: all .6s ease-in-out;}
.scorlldown .txt {position: relative;display: block;z-index: 1;animation: arrow 1s linear infinite;}
.scorlldown .txt img {width: 10px;}
.scorlldown .arrow {position: absolute;bottom: 15px;left: 18px;z-index: 1;animation: arrow 1s linear infinite;}
.scorlldown .arrow img {width: 16px;}
.scorlldown .btn {position: absolute;bottom: 0;left: 0;}
.scorlldown .btn img {width: 50px;}
@keyframes arrow {
	0% {transform: translateY(-10px);}
	50% {transform: translateY(0);}
	100% {transform: translateY(-10px);}
}

.floting {position: fixed;bottom: -80px;left: 50%;transform: translateX(-50%);z-index: 100;opacity: 0;transition: all .4s ease-in-out;box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.35);transition-delay: .6s;}
.floting .btn {position: relative;display: block;width: 0;height: 52px;background-color: #05AA8D;transition: all .6s ease-in-out;}
.floting .btn::before {content: '';position: absolute;top: 6px;left: -20px;width: 40px;height: 40px;background-color: #05AA8D;border-radius: 8px;transform: rotate(45deg);}
.floting .btn::after {content: '';position: absolute;top: 6px;right: -20px;width: 40px;height: 40px;background-color: #05AA8D;border-radius: 8px;transform: rotate(45deg);}
.floting .btn .txt {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 174px;height: 52px;background: url('../images/floting_txt.png') no-repeat 50% 50%;background-size: 100%;opacity: 0;transition: all .6s ease-in-out;z-index: 1;}

.floting.active {opacity: 1;bottom: 20px;transition-delay: .6s;}
.floting.active .btn {width: 180px;transition-delay: 1.8s;}
.floting.active .btn .txt {opacity: 1;transition-delay: 2s;}
.floting.active .btn::before,
.floting.active .btn::after {animation: rotate 1.6s ease-in-out;animation-delay: .4s;}
@keyframes rotate {
	0% {opacity: 0;transform: rotate(45deg);}
	25% {opacity: 1;transform: rotate(45deg);}
	100% {opacity: 1;transform: rotate(315deg);}
}
.floting.out {opacity: 0;bottom: -80px;transition-delay: 1.8s;}
.floting.out .btn {width: 0;transition-delay: .6s;}
.floting.out .btn .txt {opacity: 0;transition-delay: .4s;}
.floting.out .btn::before,
.floting.out .btn::after {animation: rotate2 1.6s ease-in-out;animation-delay: .6s;}
@keyframes rotate2 {
	0% {opacity: 1;transform: rotate(45deg);}
	25% {opacity: 1;transform: rotate(45deg);}
	75% {opacity: 1;transform: rotate(315deg);}
	100% {opacity: 0;transform: rotate(315deg);}
}
#warp.up .floting.out,
#warp.down .floting.out {bottom: -80px;transition-delay: 1.8s;}
#warp.up .floting.active {bottom: 80px;transition-delay: 0s;}
#warp.down .floting.active {transition-delay: 0s;}

.cardarea {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 110;}
.cardarea .dim {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);}
.cardarea .cardbox {position: absolute;bottom: calc(50% - 105px);left: 50%;transform: translateX(-50%);width: 280px;height: 0;overflow: hidden;}
.cardarea .card {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 280px;height: 210px;}
.cardarea .card::before {content: '';position: absolute;bottom: 10px;left: 0;width: 100%;height: 142px;background-color: #030f30;border-radius: 15px;}
.cardarea .card .case {position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;}
.cardarea .card .case.btm {top: auto;bottom: 0;left: 0;width: 280px;height: 158px;z-index: 3;}
.cardarea .card .case.top {top: 57px;left: 0;width: 280px;height: 150px;transform-style: preserve-3d;perspective:300px;transform-origin: 0 0;z-index: 3;}
.cardarea .card .case.top img {width: 280px;height: 150px;}
.cardarea .card .case.bl {position: absolute;bottom: 5px;left: calc(50% - 22px);width: 47px;height: 44px;opacity: 1;z-index: 10;}
.cardarea .card .text {position: absolute;bottom: 0;left: 0;padding: 0 10px;width: 100%;height: 120px;overflow: hidden;opacity: 0;z-index: 0;}
.cardarea .card .text img {position: relative;z-index: 1;}

.cardarea.on .cardbox {height: 280px;transition: height .8s ease-in-out;}

.cardarea.active .card .case.bl {opacity: 0;}
.cardarea.active .card .case.btm {z-index: 5;transition: all 0s linear .4s;}
.cardarea.active .card .case.top {transform: translateY(8px) rotateX(180deg);transition: all .6s ease-in-out .2s;}
.cardarea.active .card .case.top img {height: 114px;transition: height .6s ease-in-out .2s;}
.cardarea.active .card .text {height: 260px;opacity: 1;z-index: 4;transition: height .6s ease-in-out .7s, opacity .2s ease-in-out .5s;}

.cardarea.off {top: 100%;transition: top 0s ease-in-out 1.6s;}
.cardarea.off .dim {opacity: 0;transition: all .6s ease-in-out 1s;}
.cardarea.off .cardbox {bottom: -100%;opacity: 0;transition: all 1s ease-in-out .8s;}
.cardarea.off .card .case.top {z-index: 5;transform: translateY(0) rotateX(0deg);transition: transform .6s ease-in-out .2s, z-index 0s ease-in-out .4s;}
.cardarea.off .card .case.top img {height: 158px;transition: height .6s ease-in-out .2s;}
.cardarea.off .card .text {height: 100px;opacity: 0;z-index: 0;transition: height .5s ease-in-out 0s, opacity .2s ease-in-out .8s, z-index 0s ease-in-out .4s;}

#warp > .dim {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;z-index: 100;transition: all .4s ease-in-out;opacity: 1;}
#warp > .dim.remove {visibility: hidden;opacity: 0;}

.swiper-button-next,
.swiper-button-prev {top: auto;bottom: 80px;left: 20px;width: 36px;height: 36px;background: url('../images/swiper_btn.png') no-repeat 0 0;background-size: 100%;}
.swiper-button-next::after,
.swiper-button-prev:after {display: none;}
.swiper-button-next {left: 64px;}
.swiper-button-prev {transform: rotate(180deg);}

.btn-reservation {display: inline-block;width: 200px;height: 44px;background: url('../images/btn_reservation.png') no-repeat 0 0;background-size: 100%;}
/* .btn-reservation:hover {background-image: url('../images/btn_reservation_hover.png');} */

.bottom {position: fixed;bottom: 0;left: 0;width: 100%;height: 60px;z-index: 100;transition: bottom .4s ease-in-out;text-align: center;}
.bottom::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;}
.bottom .menu {position: absolute;top: 9px;left: 40px;z-index: 1;}
.bottom .menu.menu2 {left: auto;right: 40px;}
.bottom .menu img {width: 48px;}
.bottom .txtarea {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;z-index: 1;}
.bottom .txtarea .bg {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 76px;height: 40px;transition: width .4s ease-in-out .2s, height .3s ease-in-out 0s;}
/* .bottom .txtarea .bg::before {content: '';position: absolute;top: 4px;left: -15px;width: 32px;height: 32px;background-color: #26D2B4;border-radius: 8px;transform: rotate(45deg);}
.bottom .txtarea .bg::after {content: '';position: absolute;top: 4px;right: -15px;width: 32px;height: 32px;background-color: #05aa8d;border-radius: 8px;transform: rotate(45deg);} */
.bottom .txtarea .bg .left {position: absolute;top: 4px;left: -15px;width: 32px;height: 32px;background-color: #26D2B4;border-radius: 8px;transform: rotate(45deg);}
.bottom .txtarea .bg .right {position: absolute;top: 4px;right: -15px;width: 32px;height: 32px;background-color: #05aa8d;border-radius: 8px;transform: rotate(45deg);}
.bottom .txtarea .bg div {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;background: linear-gradient(95deg, #26D2B4 0%, #05AA8D 100%);z-index: 1;}
.bottom .txtarea .txt {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 24px;z-index: 2;transition: opacity .4s ease-in-out;}
.bottom .txtarea .txt1 {width: 49px;opacity: 1;}
.bottom .txtarea .txt1 .membership {display: none;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 60px;}
.bottom .txtarea .txt2 {width: 188px;opacity: 0;}
.bottom .bfloting {position: absolute;top: 62px;right: 16px;transition: top .4s ease-in-out;}
.bottom .bfloting img {width: 57px;}
.bottom .bfloting.active {top: -62px;}
.bottom.down .bfloting.active {top: 62px;}

.bottom.active .txtarea .bg {width: calc(100vw + 60px);height: 60px;transition: width .4s ease-in-out, height .3s ease-in-out .2s;}
.bottom.active .txtarea .txt1 {opacity: 0;}
.bottom.active .txtarea .txt2 {opacity: 1;}

.bottom2 {position: fixed;bottom: 0;left: 0;width: 100%;height: 60px;z-index: 100;transition: bottom .4s ease-in-out;text-align: center;}
.bottom2::before {content: '';position: absolute;top: 0;left: 0;width: 50%;height: 60px;background-color: #e6f3ff;}
.bottom2::after {content: '';position: absolute;top: 0;right: 0;width: 50%;height: 60px;background-color: #fff;}
.bottom2.up {bottom: 0;}
.bottom2.down {bottom: -60px;}
.bottom2 img {position: relative;;width: 360px;z-index: 1;}

.con {position: relative;width: 100%;height: 100vh;overflow: hidden;z-index: 1;}
.con .inner {position: relative;margin: 0 auto;display: flex;justify-content: center;width: 100%;height: 100vh;}

.con02 .con02swiper {width: 100%;height: 100%;}
.con02 .con02swiper .swiper-slide {width: 100%;height: 100%;}
.con02 .con02swiper .swiper-slide .dim {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('../images/con1_bg1_dim.png') no-repeat 50% 0;background-size: cover;opacity: 0;transition: opacity 1s ease-in-out;transition-delay: .4s;}
.con02 .con02swiper .swiper-slide.slide1 {background: url('../images/con1_bg1.png') no-repeat 50% 0, url('../images/con1_bg1_dim.png') no-repeat 50% 0;background-size: cover;}
.con02 .con02swiper .swiper-slide.slide2 {background: url('../images/con2_bg2.png') no-repeat 50% 0;background-size: cover;}
.con02 .con02swiper .swiper-slide.slide2 .dim {background-image: url('../images/con2_bg2_dim.png');}
.con02 .con02swiper .swiper-slide .txtarea {position: absolute;top: 300px;left: 0;width: 100%;transform: translateY(0);margin-top: 60px;opacity: 0;}
.con02 .con02swiper .swiper-slide .txtarea span {display: block;height: 30px;background: url('../images/con2_txt1_1.png') no-repeat 50% 0;background-size: 231px;}
.con02 .con02swiper .swiper-slide .txtarea span.txt2 {margin-top: 20px;height: 104px;background: url('../images/con2_txt1_2.png') no-repeat 50% 0;background-size: 238px;}
.con02 .con02swiper .swiper-slide.slide2 .txtarea span.txt1 {background: url('../images/con2_txt2_1.png') no-repeat 50% 0;background-size: 231px;}
.con02 .con02swiper .swiper-slide.slide2 .txtarea span.txt2 {background: url('../images/con2_txt2_2.png') no-repeat 50% 0;background-size: 261px;}
.con02 .con02swiper .swiper-button-next,
.con02 .con02swiper .swiper-button-prev {bottom: -80px;opacity: 0;}
.con02 .con02swiper .swiper-pagination-progressbar {top: auto;bottom: -96px;left: 120px;width: calc(100% - 140px);height: 1px;background-color: rgba(255, 255, 255, .25);opacity: 0;transition-delay: 0s;}
.con02 .con02swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #fff;}
.con02 .con02swiper .swiper-paging {position: absolute;bottom: -80px;left: 120px;margin-bottom: -6px;line-height: 20px;font-family: 'Pretendard';font-size: 12px;font-weight: 400;color: #fff;z-index: 10;opacity: 0;}
.con02 .con02swiper .swiper-paging .current {display: inline-block;width: 20px;text-align: left;}
.con02 .con02swiper .swiper-paging .total {display: inline-block;font-weight: 400;opacity: .5;}
.con02 .scon01 {position: fixed;top: 0;left: 0;width: 100%;padding-top: 110px;}
.con02 .scon01 .txt {display: block;height: 159px;background: url('../images/con1_txt1.png') no-repeat 50% 0;background-size: 243px;opacity: 0;transition: all 1s ease-in-out;transition-delay: 0s;}
.con02 .bg {position: fixed;bottom: 0;left: 0;width: 100%;height: 100%;}
.con02 .bg .con01bg {position: fixed;bottom: 0;left: 0;width: 100%;height: 100%;background: url('../images/con1_pic1.png') no-repeat 50% 0;background-size: cover;transition: all 1s ease-in-out;transition-delay: 0s;z-index: 10;}
.con02 .bg .cover {position: fixed;top: 0;left: 0;width: 100%;height: 140vh;background: url('../images/con1_bg1_cover.png') no-repeat 50% -30%;background-size: cover;transition: all .6s ease-in-out;transition-delay: .8s;z-index: 10;}

.section1 .con02 .scon01 .txt1,
.section1 .con02 .scon01 .txt2 {opacity: 1;transform: translateY(60px);transition-delay: 0s;}
.section1.up .con02 .scon01 .txt1 {transition-delay: .6s;}
.section1.up .con02 .scon01 .txt2 {transition-delay: .6s;}
.section1.up .con02 .bg .cover {transition-delay: 0s;}

.section2 .con02 .con02swiper .swiper-slide-active .txtarea {transform: translateY(-60px);opacity: 1;transition: all 1s ease-in-out;transition-delay: .4s;}
.section2 .con02 .con02swiper .swiper-slide .dim {opacity: 1;}
.section2 .con02 .con02swiper .swiper-button-next,
.section2 .con02 .con02swiper .swiper-button-prev {bottom: 50px;opacity: 1;transition: opacity 1s ease-in-out;transition-delay: .4s;}
.section2 .con02 .con02swiper .swiper-paging {bottom: 46px;opacity: 1;transition: opacity 1s ease-in-out;transition-delay: .4s;}
.section2 .con02 .con02swiper .swiper-pagination-progressbar {bottom: 68px;opacity: 1;transition: opacity 1s ease-in-out;transition-delay: .4s;}
.section2 .con02 .scon01 {visibility: hidden;}
.section2 .con02 .scon01 .txt1,
.section2 .con02 .scon01 .txt2 {opacity: 0;transform: translateY(0);}
.section2 .con02 .bg .cover {top: -200%;transition-delay: .8s;}
.section2 .con02 .scorlldown {bottom: 0;opacity: 0;}
.section2 .con02 .membershipbtn {left: 0;}

.section2.up .con02 .bg .cover {transition-delay: 0s;transition: all 0s ease-in-out;}

.con03 .scon01 {position: relative;width: 100%;height: 100%;transform: scale(.8);transform-origin: 50% 0;transition: all .4s ease-in-out;}
.con03 .scon01 .pic {position: relative;width: 100%;height: 100%;background: url('../images/con3_scon1.png') no-repeat 50% 0;background-size: cover;animation: con03zoom 50s linear infinite;}
.con03 .scon01 .textarea {position: absolute;bottom: 150px;left: 20px;width: 100%;}
.con03 .scon01 .textarea span {display: block;height: 40px;background: url('../images/con3_scon1_txt.png') no-repeat 0 0;background-size: 255px;transform: translateY(50px);opacity: 0;transition: all .6s ease-in-out;transition-delay: .4s;}
.con03 .scon01 .textarea .txt2 {height: 90px;background-position: 0 -40px;transition-delay: .6s;}
.con03 .scon01 .textarea .txt3 {height: 82px;background-position: 0 -130px;transition-delay: .8s;}
.con03 .scon01 .btnarea {position: absolute;bottom: 40px;left: 20px;transform: translateY(50px);opacity: 0;transition: all .6s ease-in-out;transition-delay: 1s;}

@keyframes con03zoom {
	0% {transform: scale(1);}
	50% {transform: scale(1.2);}
	100% {transform: scale(1);}
}

.con03 .scon {position: fixed;top: 0;left: 100%;display: flex;width: 300%;height: 100%;background-color: #fff;}
.con03 .scon > div {position: relative;top: 0;left: 0;width: 100%;height: 100%;}
.con03 .scon > div .pic {position: relative;width: 100%;height: 50%;background: url('../images/con3_scon2.png') no-repeat 50% 0;background-size: 100%;}
.con03 .scon > div .textarea {position: absolute;top: 380px;left: 20px;bottom: 20px;width: calc(100% - 40px);}
.con03 .scon > div .textarea span {display: block;height: 30px;background: url('../images/con3_scon2_txt.png') no-repeat 0 0;background-size: 295px;opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: 0s;}
.con03 .scon > div .textarea .txt2 {height: 80px;background-position: 0 -30px;transition-delay: .1s;}
.con03 .scon > div .textarea .txt3 {height: 50px;background-position: 0 -110px;transition-delay: .2s;}
.con03 .scon > div .textarea .txt4 {height: 125px;background-position: 0 -160px;transition-delay: .3s;}
.con03 .scon > div .textarea .txt5 {height: 34px;background-position: 0 -285px;transition-delay: .4s;}
.con03 .scon > div .textarea .btn {position: absolute;bottom: 0;left: 0;width: 137px;height: 50px;background: url('../images/con4_btn.png') no-repeat 0 0;background-size: 100%;transition-delay: .5s;}
.con03 .scon .scon03 .pic {background-image: url('../images/con3_scon3.png');}
.con03 .scon .scon03 .textarea span {background-image: url('../images/con3_scon3_txt.png');}
.con03 .scon .scon04 .pic {background-image: url('../images/con3_scon4.png');}
.con03 .scon .scon04 .textarea span {background-image: url('../images/con3_scon4_txt.png');}
.con03 .scon .scon03 .textarea .btn,
.con03 .scon .scon04 .textarea .btn {background-image: url('../images/con4_btn.png')}
.con03 .scon .scon04 .textarea .txt2 {height: 50px;}
.con03 .scon .scon04 .textarea .txt3 {background-position: 0 -80px;}
.con03 .scon .scon04 .textarea .txt4 {background-position: 0 -130px;}
.con03 .scon .scon04 .textarea .txt5 {background-position: 0 -255px;}
.con03 .scon > div.active .textarea span {margin-top: 0;opacity: 1;}

.section3 .con03 .scon01 {transform: scale(1);}
.section3 .con03 .scon01 .textarea span,
.section3 .con03 .scon01 .btnarea {transform: translateY(0);opacity: 1;transition-delay: 1s;}

.section4 .con03 .scon01 {transform: scale(1);}

.con04 .scon01 {position: relative;width: 100%;height: 100%;transform: scale(.8);transform-origin: 50% 0;transition: all .4s ease-in-out;}
.con04 .scon01 .pic {position: relative;width: 100%;height: 100%;background: url('../images/con4_scon1.png') no-repeat 50% 0;background-size: cover;animation: con03zoom 50s linear infinite;}
.con04 .scon01 .textarea {position: absolute;bottom: 150px;left: 20px;width: 100%;}
.con04 .scon01 .textarea span {display: block;height: 40px;background: url('../images/con4_scon1_txt.png') no-repeat 0 0;background-size: 255px;transform: translateY(50px);opacity: 0;transition: all .6s ease-in-out;transition-delay: .4s;}
.con04 .scon01 .textarea .txt2 {height: 90px;background-position: 0 -40px;transition-delay: .6s;}
.con04 .scon01 .textarea .txt3 {height: 82px;background-position: 0 -130px;transition-delay: .8s;}
.con04 .scon01 .btnarea {position: absolute;bottom: 40px;left: 20px;transform: translateY(50px);opacity: 0;transition: all .6s ease-in-out;transition-delay: 1s;}

.con04 .scon {position: absolute;top: 0;left: 100%;display: flex;width: 300%;height: 100%;background-color: #fff;}
.con04 .scon > div {position: relative;top: 0;left: 0;width: 100%;height: 100%;}
.con04 .scon > div .pic {position: relative;width: 100%;height: 50%;background: url('../images/con4_scon2.png') no-repeat 50% 0;background-size: 100%;}
.con04 .scon > div .textarea {position: absolute;top: 380px;left: 20px;bottom: 20px;width: calc(100% - 40px);}
.con04 .scon > div .textarea span {display: block;height: 30px;background: url('../images/con4_scon2_txt.png') no-repeat 0 0;background-size: 295px;opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: 0s;}
.con04 .scon > div .textarea .txt2 {height: 50px;background-position: 0 -30px;transition-delay: .1s;}
.con04 .scon > div .textarea .txt3 {height: 50px;background-position: 0 -80px;transition-delay: .2s;}
.con04 .scon > div .textarea .txt4 {height: 100px;background-position: 0 -130px;transition-delay: .3s;}
.con04 .scon > div .textarea .txt5 {height: 40px;background-position: 0 -230px;transition-delay: .4s;}
.con04 .scon > div .textarea .btn {position: absolute;bottom: 0;left: 0;width: 137px;height: 50px;background: url('../images/con4_btn.png') no-repeat 0 0;background-size: 100%;transition-delay: .5s;}
.con04 .scon .scon03 .pic {background-image: url('../images/con4_scon3.png');}
.con04 .scon .scon03 .textarea span {background-image: url('../images/con4_scon3_txt.png');}
.con04 .scon .scon04 .pic {background-image: url('../images/con4_scon4.png');}
.con04 .scon .scon04 .textarea span {background-image: url('../images/con4_scon4_txt.png');}
.con04 .scon .scon03 .textarea .btn,
.con04 .scon .scon04 .textarea .btn {background-image: url('../images/con4_btn.png')}
.con04 .scon .scon04 .textarea .txt2 {height: 90px;}
.con04 .scon .scon04 .textarea .txt3 {background-position: 0 -120px;}
.con04 .scon .scon04 .textarea .txt4 {height: 70px;background-position: 0 -190px;}
.con04 .scon .scon04 .textarea .txt5 {background-position: 0 -260px;}
.con04 .scon > div.active .textarea span {margin-top: 0;opacity: 1;}

.section4 .con04 .scon01 {transform: scale(1);}
.section4 .con04 .scon01 .textarea span,
.section4 .con04 .scon01 .btnarea {transform: translateY(0);opacity: 1;}

.section5 .con04 .scon01 {transform: scale(1);}

.con05 {background-color: #f8f8f8;height: 422px;text-align: center;}

.con06 {background-color: #fff;}
.con06 .scon {position: relative;top: 0;left: 0;width: 2040px;height: 254px;display: flex;}
.con06 .scon > div {display: block;width: 340px;height: 254px;opacity: 0;transition: all 1s ease-in-out;transition-delay: .2s;}
.con06 .scon > div img {width: 340px;height: 254px;}
.con06 .textarea {position: absolute;top: 274px;left: 20px;bottom: 20px;width: 330px;}
.con06 .textarea span {display: block;height: 30px;background: url('../images/con5_txt.png') no-repeat 0 0;background-size: 100%;opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: .2s;}
.con06 .textarea .txt2 {height: 95px;background-position: 0 -30px;transition-delay: .3s;}
.con06 .textarea .txt3 {height: 285px;background-position: 0 -125px;transition-delay: .4s;}
.con06 .textarea .btn {position: absolute;bottom: 0;left: 0;width: 137px;height: 50px;background: url('../images/con4_btn.png') no-repeat 0 0;background-size: 100%;transition-delay: .5s;}
.con06 .textarea .btn:hover, .con06 .textarea .btn:active, .con06 .textarea .btn:focus {background-image: url('../images/con4_btn_hover.png');}

.section7 .con06 .scon > div,
.con06 .scon.active > div {opacity: 1;}
.section6 .con06 .textarea span {margin-top: 0;opacity: 1;}

.con07 {background-color: #E4F3F1;transition: all .8s ease-in-out;}
.con07 .ti {position: relative;margin-top: 40px;height: 26px;background: url('../images/con6_ti.png') no-repeat 50% 0;background-size: contain;z-index: 1;opacity: 0;margin-top: 130px;transition: all .6s ease-in-out;transition-delay: 0s;}
.con07 .btnarea {position: absolute;bottom: 114px;right: 20px;z-index: 1;opacity: 0;margin-top: 130px;transition: all .6s ease-in-out;transition-delay: .6s;}
.con07 .btnarea span {display: inline-block;margin: 0 3px;width: 52px;height: 52px;background: url('../images/swiper_btn3.png') no-repeat 0 0;background-size: 100%;cursor: pointer;}
.con07 .btnarea .btn-prev {transform: rotate(180deg);}
.con07 .btnarea .btn-next {background-image: url('../images/swiper_btn2.png');}
.con07 .scon {position: absolute;top: 0;left: 0;display: flex;width: 200%;height: 100%;transition: left .6s ease-in-out;}
.con07 .scon .sti {position: absolute;top: 86px;left: 0;width: 100%;height: 80px;background: url('../images/con6_ti_sti1.png') no-repeat 50% 0;background-size: contain;opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: .4s;}
.con07 .scon .swiper {position: absolute;top: 206px;left: 20px;width: calc(100% - 40px);opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: .6s;}
.con07 .scon .swiper .swiper-slide {width: 320px;height: 328px;background: url('../images/con6_con1_pic1.png') no-repeat 0 0;background-size: 100%;}
.con07 .scon .scon01 {position: relative;width: 50%;height: 100%;overflow: hidden;}
.con07 .scon .scon01 .slide2 {background-image: url('../images/con6_con1_pic2.png');}
.con07 .scon .scon01 .slide3 {background-image: url('../images/con6_con1_pic3.png');}
.con07 .scon .scon02 .slide1 {background-image: url('../images/con6_con2_pic1.png');}
.con07 .scon .scon02 .slide2 {background-image: url('../images/con6_con2_pic2.png');}
.con07 .scon .scon02 .slide3 {background-image: url('../images/con6_con2_pic3.png');}
.con07 .scon .scon02 {position: relative;width: 50%;height: 100%;overflow: hidden;}
.con07 .scon .scon02 .sti {background: url('../images/con6_ti_sti2.png') no-repeat 50% 0;background-size: contain;}

.con07.next {background-color: #D4E8E5;}
.con07.next .btnarea .btn-prev {background-image: url('../images/swiper_btn2.png');transform: rotate(180deg);}
.con07.next .btnarea .btn-next {background-image: url('../images/swiper_btn3.png');}
.con07.next .scon {left: -100%}

.section7 .con07 .ti {margin-top: 40px;opacity: 1;}
.section7 .con07 .scon .sti {margin-top: 0;opacity: 1;}
.section7 .con07 .scon .swiper,
.section7 .con07 .btnarea {margin-top: 0;opacity: 1;}

.con08 {background-color: #fff;}
.con08 .txtarea {position: absolute;top: 60px;left: 20px;width: 330px;height: 350px;z-index: 1;}
.con08 .txtarea .txtbox {position: absolute;top: 0;left: 0;width: 330px;overflow: hidden;}
.con08 .txtarea span {display: block;height: 30px;background: url('../images/con7_txt1.png') no-repeat 0 0;background-size: 330px;opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: .2s;}
.con08 .txtarea .txt2 {height: 100px;background-position: 0 -30px;transition-delay: .3s;}
.con08 .txtarea .txt3 {height: 160px;background-position: 0 -130px;transition-delay: .4s;}
.con08 .txtarea .txt4 {height: 40px;background-position: 0 -290px;transition-delay: .5s;}
.con08 .txtarea .txt5 {display: none;}
.con08 .txtarea.white {overflow: hidden;}
.con08 .txtarea.white .txtbox {position: absolute;top: 0;left: -100%;width: 330px;}
.con08 .txtarea.white span {background-image: url('../images/con7_txt2.png');background-size: 330px;}
.con08 .scon00 {position: absolute;bottom: 0;left: 0;width: 100%;height: 46%;}
.con08 .scon00 .pic {position: relative;width: 100%;height: 100%;background: url('../images/con7_pic1.png') no-repeat 50% 0;background-size: cover;}
.con08 .scon {position: absolute;top: 0;left: 100%;width: 200%;height: 100%;}
.con08 .scon01 {position: absolute;top: 0;left: 0;width: 50%;height: 100%;}
.con08 .scon01 .pic {position: relative;width: 100%;height: 100%;background: url('../images/con7_pic2.png') no-repeat 50% 0;background-size: cover;}
.con08 .scon02 {position: absolute;top: 0;left: 50%;width: 50%;height: 100%;}
.con08 .scon02 .pic {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url('../images/con7_pic3.png') no-repeat 50% 0;background-size: cover;}
.con08 .scon02 .mv {position: absolute;top: 0;left: 0;width: 100vw;height: 100%;background-color: #000;overflow: hidden;}
.con08 .scon02 .mv video {position: absolute;top: 50%;left: 50%;height: 100%;transform: translate(-50%, -50%);}

.section8 .con08 .txtarea span {margin-top: 0;opacity: 1;}

.con09 {background-color: #fff;}
.con09 .txtarea {position: relative;top: 40px;}
.con09 .txtarea span {display: block;height: 40px;background: url('../images/con8_ti.png') no-repeat 50% 0;background-size: 320px;opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: .6s;}
.con09 .txtarea .txt2 {height: 90px;background-position: 50% -40px;transition-delay: .8s;}
.con09 .txtarea .txt3 {height: 60px;background-position: 50% -130px;transition-delay: 1s;}
.con09 .con08swiper {position: absolute;top: 268px;width: 100%;height: calc(100% - 268px);opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: 1.4s;}
.con09 .con08swiper .swiper-slide {width: 320px;height: 286px;}
.con09 .con08swiper .swiper-slide .pic {width: 320px;height: 192px;background: url('../images/con8_pic1.png') no-repeat 0 0;background-size: 100%;}
.con09 .con08swiper .slide2 .pic {background-image: url('../images/con8_pic2.png');}
.con09 .con08swiper .slide3 .pic {background-image: url('../images/con8_pic3.png');}
.con09 .con08swiper .swiper-slide .txt {position: relative;width: 320px;height: 94px;background: url('../images/con8_pic1.png') no-repeat 0 -192px;background-size: 100%;transition: all .6s ease-in-out;margin-top: -60px;opacity: 0;}
.con09 .con08swiper .slide2 .txt {background-image: url('../images/con8_pic2.png');}
.con09 .con08swiper .slide3 .txt {background-image: url('../images/con8_pic3.png');}
.con09 .con08swiper .swiper-slide-active .txt {opacity: 1;margin-top: 0;}
.con09 .con08swiper .swiper-button-prev {bottom: 114px;left: auto;right: 82px;width: 52px;height: 52px;background-image: url('../images/swiper_btn2.png');transform: rotate(180deg);}
.con09 .con08swiper .swiper-button-next {bottom: 114px;left: auto;right: 20px;width: 52px;height: 52px;background-image: url('../images/swiper_btn2.png');}
.con09 .con08swiper .swiper-button-prev.swiper-button-disabled {background-image: url('../images/swiper_btn3.png');opacity: 1;}
.con09 .con08swiper .swiper-button-next.swiper-button-disabled {background-image: url('../images/swiper_btn3.png');opacity: 1;}

.section9 .con09 .txtarea span,
.section9 .con09 .con08swiper {margin-top: 0;opacity: 1;}

.con10 {height: 1878px;background-color: #f8f8f8;}
.con10 .tiarea {position: absolute;top: 80px;width: 100%;}
.con10 .tiarea span {position: relative;display: block;margin-bottom: 20px;height: 26px;background: url('../images/con9_ti.png') no-repeat 50% 0;background-size: contain;opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: 0s;}
.con10 .tiarea .txt {height: 40px;background-image: url('../images/con9_ti_txt.png');background-size: contain;transition-delay: .2s;}
.con10 .scon {position: absolute;top: 226px;left: 0;width: 100%;}
.con10 .scon > div {position: relative;margin-top: 100px;opacity: 0;}
.con10 .scon > div .pic {width: 300px;height: 450px;background: url('../images/con9_pic1.png') no-repeat 0 0;background-size: 100%;}
.con10 .scon > div.scon02 {margin-top: 60px;text-align: right;display: flex;flex-direction: row-reverse;}
.con10 .scon > div.scon02 .pic {width: 320px;height: 638px;background-image: url('../images/con9_pic2.png');}
.con10 .scon > div.scon03 {margin-top: 60px;}
.con10 .scon > div.scon03 .pic {width: 280px;height: 364px;background-image: url('../images/con9_pic3.png');}
.con10.active .tiarea span {margin-top: 0;opacity: 1;}

.con11 {height: 834px;background-color: #fff;}
.con11 .tiarea {position: absolute;top: 80px;width: 100%;}
.con11 .tiarea span {position: relative;display: block;margin-bottom: 20px;height: 26px;background: url('../images/con10_ti.png') no-repeat 50% 0;background-size: contain;opacity: 0;margin-top: 50px;transition: all .6s ease-in-out;transition-delay: 0s;}
.con11 .tiarea .txt {height: 80px;background-image: url('../images/con10_ti_txt.png');background-size: contain;transition-delay: .2s;}
.con11 .scon {position: absolute;top: 120px;left: 0;width: 100%;height: 650px;}
.con11 .scon > div {position: absolute;width: 360px;height: 360px;opacity: 1;}
.con11 .scon .pic1 {left: 0;width: 70px;height: 566px;background-image: url('../images/con10_pic1.png');background-size: 100%;bottom: -400px;}
.con11 .scon .pic2 {left: calc(50% - 100px);width: 200px;height: 388px;background-image: url('../images/con10_pic2.png');background-size: 100%;bottom: -500px;}
.con11 .scon .pic3 {right: 0;width: 70px;height: 556px;background-image: url('../images/con10_pic3.png');background-size: 100%;bottom: -600px;}
.con11.active .tiarea span {margin-top: 0;opacity: 1;}

.con12 {background-color: #fff;padding-top: 26px;}
.con12 .customer {position: relative;height: 432px;background:#f8f8f8 url('../images/con11_customer.png') no-repeat 50% 0;background-size: 360px;}
.con12 .footer {position: relative;height: 337px;background:#fff url('../images/con11_footer.png') no-repeat 50% 0;background-size: 360px;border-top: 1px solid #eee;}
.con12 .btntop {position: absolute;top: 0;right: 20px;width: 54px;height: 78px;background: url('../images/btn_top.png') no-repeat 0 0;background-size: 100%;}

#warp.up .section2 .con02 .con02swiper .swiper-button-next,
#warp.up .section2 .con02 .con02swiper .swiper-button-prev,
#warp.up .section2 .con02 .con02swiper .swiper-paging {bottom: 90px;transition-delay: 0s;}
#warp.up .section2 .con02 .con02swiper .swiper-pagination-progressbar {bottom: 107px;transition-delay: 0s;}
#warp.up .section3 .con03 .scon01 .textarea {bottom: 100px;transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.up .section3 .con03 .scon01 .btnarea {bottom: 80px;transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.down .section3 .con03 .scon01 .textarea {transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.down .section3 .con03 .scon01 .btnarea {transition-delay: 0s;}
#warp.up .section4 .con04 .scon01 .textarea {bottom: 100px;transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.up .section4 .con04 .scon01 .btnarea {bottom: 80px;transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.down .section4 .con04 .scon01 .textarea {transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.down .section4 .con04 .scon01 .btnarea {transition-delay: 0s;}
#warp.up .con06 .textarea {bottom: 70px;transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.down .con06 .textarea {transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.up .con07 .btnarea {bottom: 154px;transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.down .con07 .btnarea {transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.up .con09 .con08swiper .swiper-button-prev,
#warp.up .con09 .con08swiper .swiper-button-next {bottom: 174px;transition: all .4s ease-in-out;transition-delay: 0s;}
#warp.down .con09 .con08swiper .swiper-button-prev,
#warp.down .con09 .con08swiper .swiper-button-next {transition: all .4s ease-in-out;transition-delay: 0s;}