@charset "utf-8";

.main #container {padding:0;}
.tit {font-family:"Baloo Thambi 2",sans-serif; font-size:4.375em; font-weight:900; letter-spacing:0.01em; line-height:1.171em;}

.main-sec1 {position:relative;}
.main-sec1 .swiper-slide {position:relative; height:100vh; font-size:0; text-indent:-9999px;}
.main-sec1 .swiper-slide p {position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:right center; background-size:cover;}
.main-sec1 .slide01 p {background-image:url("../../img/main/sec1_slide04.jpg");}
.main-sec1 .slide02 p {background-image:url("../../img/main/sec1_slide05.jpg");}
.main-sec1 .slide03 p {background-image:url("../../img/main/sec1_slide06.jpg");}
.main-sec1 .slide-page {position:absolute; left:0; bottom:13.33vh; width:100%; line-height:1; z-index:10;}
.main-sec1 .swiper-pagination {display:inline-block; position:static;}
.main-sec1 .swiper-pagination-bullet {position:relative; width:auto; height:auto; margin:0 0.6em 0 0; font-family:"Baloo Thambi 2",sans-serif; color:#777; font-size:1em; font-weight:600; vertical-align:top; opacity:1; outline:0 none; border-radius:0; background:none;}
.main-sec1 .swiper-pagination-bullet-active {padding:0 0 1px; color:#333; border-bottom:2px solid #333;}
.main-sec1 .btn-play {display:inline-block; width:1em; height:1em; margin:-1px 0 0 -0.3em; vertical-align:top; border:0 none; background:url("../../img/common/slide_pause.png") no-repeat center center; background-size:cover;}
.main-sec1 .btn-play span {font-size:0; text-indent:-9999px;}
.main-sec1 .btn-play.paused {background-image:url("../../img/common/slide_play.png");}

.main-sec1 .cont {position:absolute; left:0; top:0; width:100%; height:100%; z-index:3;}
.main-sec1 .txt-box {width:100%; height:100%;}
.main-sec1 .txt-box p {font-family:"Baloo Thambi 2",sans-serif; font-size:5.625em; font-weight:900; letter-spacing:0.01em; line-height:1.111em;}
.main-sec1 .txt-box p .hidden {display:none;}
.main-sec1 .txt-box p .goal {display:inline-block; position:relative; height:1.111em; padding:0 0 8px; color:#8d80bb; overflow:hidden;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}
.main-sec1 .txt-box p em,
.main-sec1 .txt-box p i {display:inline-block; font-style:normal; vertical-align:top;}
.main-sec1 .txt-box p em {margin-top:-1.111em;}
.main-sec1 .txt-box .line {position:absolute; left:0; bottom:0; width:0; height:10px; background:#8d80bb;
    -webkit-transition:width 400ms;
    -moz-transition:width 400ms;
    -o-transition:width 400ms;
    transition:width 400ms;
}
.main-sec1 .slide-bg-wrap {position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; z-index:1;}
.main-sec1 .slide-bg {position:absolute; left:-50%; top:-50%; width:200%; height:200%; background:url("../../img/main/slide_bg.png") no-repeat center center; background-size:cover;}
.main-sec1 .end {
    -webkit-transition:200ms;
    -moz-transition:200ms;
    -o-transition:200ms;
    transition:200ms;
}
.main-sec1 .circle-bg {position:absolute; left:0; top:0; width:100%; height:100%; z-index:2;}
.main-sec1 .start .move-circle {top:100%;}

.main-sec2 {position:relative; padding:120px 0 10px; z-index:10;}
.main-sec2 .cont {position:relative; width:100%; *zoom:1;}
.main-sec2 .img {position:relative; width:50%; padding:0 20px; text-align:right;}
.main-sec2 .border-img {display:inline-block; overflow:hidden; border-radius:50%;
    -webkit-animation:borderAni 10s linear infinite;
    -moz-animation:borderAni 10s linear infinite;
    animation:borderAni 10s linear infinite;
}
.main-sec2 .txt {width:50%; padding:0 20px;}
.main-sec2 .txt .txt-in {max-width:685px;}
.main-sec2 .txt p {margin:2.500em 0 4em; font-size:1.250em; letter-spacing:-0.02em; line-height:1.600em;}
.main-sec2.start .move-circle {left:0;}
@keyframes borderAni{
    20% {border-radius:40% 60% 30% 55%;}
    40% {border-radius:60% 50% 66% 45%;}
    50% {border-radius:80% 45% 76% 50%;}
    70% {border-radius:56% 70% 42% 66%;}
    80% {border-radius:60% 65% 50% 55%;}
    90% {border-radius:77% 55% 65% 50%;}
    100% {border-radius:50% 50% 50% 50%;}
}

.main-sec3 {position:relative; padding:130px 0 150px; text-align:center; overflow:hidden; background:url("../../img/main/sec3_bg.png") no-repeat center top; background-size:100% auto;}
.main-sec3 .inner {padding:0;}
.main-sec3 p {margin:1.8em 0 140px; padding:0 20px; color:#555; font-size:1.250em; letter-spacing:-0.02em; line-height:1.6em;}
.main-sec3 .swiper-container {overflow:visible;}
.main-sec3 .swiper-slide {width:33.333%;}
.main-sec3 .dream {position:relative; margin:0 20px;}
.main-sec3 .dream .img {border-radius:30px; overflow:hidden;
    -webkit-transition:transform 400ms;
    -moz-transition:transform 400ms;
    -o-transition:transform 400ms;
    transition:transform 400ms;
}
.main-sec3 .dream .img img {width:100%;}
.main-sec3 .dream span {position:absolute; left:0; bottom:0; width:100%; display:block; font-size:1.875em; font-weight:600; letter-spacing:-0.02em; line-height:1; opacity:0; z-index:-1;
    -webkit-transition:opacity 400ms;
    -moz-transition:opacity 400ms;
    -o-transition:opacity 400ms;
    transition:opacity 400ms;
}
.main-sec3 .swiper-pagination {position:static; width:auto; margin:80px 20px 0; font-size:0; line-height:1;}
.main-sec3 .swiper-pagination-bullet {width:20%; height:4px; margin:0 !important; vertical-align:top; opacity:1; border-radius:0; background:#fff;}
.main-sec3 .swiper-pagination-bullet-active {background:#333;}
.main-sec3 .swiper-slide-active .dream .img {
    -webkit-box-shadow:0 24px 30px rgba(0,0,0,0.05);
    -moz-box-shadow:0 24px 30px rgba(0,0,0,0.05);
    box-shadow:0 24px 30px rgba(0,0,0,0.05);
    -webkit-transform:translateY(-18.378%);
    -moz-transform:translateY(-18.378%);
    -ms-transform:translateY(-18.378%);
    -o-transform:translateY(-18.378%);
    transform:translateY(-18.378%);
}
.main-sec3 .swiper-slide-active .dream span {opacity:1;}

.main-sec4 {position:relative; padding:0 0 265px; overflow:hidden; background:url("../../img/main/sec4_bg.png") no-repeat center bottom; background-size:100% auto; z-index:10;}
.main-sec4 .inner {position:static;}
.main-sec4 .cont {*zoom:1;}
.main-sec4 .txt {float:left; position:relative; width:34.285%; padding-right:20px; padding-top:1px; vertical-align:top; z-index:10;}
.main-sec4 .txt:after {content:""; position:absolute; left:-500%; top:0; right:0; bottom:-50%; background:#fafafa;}
.main-sec4 .txt ul {position:relative; margin:10% 0 0;}
.main-sec4 .txt li {position:absolute; left:0; top:0; z-index:-1;}
.main-sec4 .txt .txt-inner {width:100%; margin-left:10%; opacity:0;
    -webkit-transition:400ms linear;
    -moz-transition:400ms linear;
    -o-transition:400ms linear;
    transition:400ms linear;
}
.main-sec4 .txt .active {position:relative; z-index:1;}
.main-sec4 .txt .active .txt-inner {margin-left:0; opacity:1;}
.main-sec4 .txt .tit {display:block;}
.main-sec4 .txt p {margin:6.25% 0 12.5%; color:#555; font-size:1.250em; letter-spacing:-0.02em; line-height:1.600em;}
.main-sec4 .img {float:right; width:65.715%; padding-left:20px;}
.main-sec4 .sec4-slide {margin:0 -20px;}
.main-sec4 .swiper-container {overflow:visible;}
.main-sec4 .box {position:relative; margin:0 20px; border-radius:30px; overflow:hidden;}
.main-sec4 .box:after {content:""; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.4; background:#000;
    -webkit-transition:opacity 300ms;
    -moz-transition:opacity 300ms;
    -o-transition:opacity 300ms;
    transition:opacity 300ms;
}
.main-sec4 .swiper-slide-active .box:after {opacity:0;}
.main-sec4 .btns {position:relative; z-index:2;}
.main-sec4 .btns button {width:80px; height:80px; margin:0 20px 0 0; font-size:0; text-indent:-9999px; opacity:0.8; border:0 none;
    -webkit-transition:opacity 200ms;
    -moz-transition:opacity 200ms;
    -o-transition:opacity 200ms;
    transition:opacity 200ms;
}
.main-sec4 .btns button:hover {opacity:1;}
.main-sec4 .btns .btn-prev {background:url("../../img/common/slide_prev.png") no-repeat center center; background-size:cover;}
.main-sec4 .btns .btn-next {background:url("../../img/common/slide_next.png") no-repeat center center; background-size:cover;}
.main-sec4 .img .btns {display:none;}

.main-sec5 {position:relative; padding:110px 0 0; text-align:center; background:url("../../img/main/sec5_bg.png") no-repeat center bottom; background-size:100% auto;}
.main-sec5 .move-circle {z-index:1;}
.main-sec5 .sec5-box {padding:0 0 240px; background:url("../../img/main/sec5_obj.png") no-repeat center bottom;}
.main-sec5 .sec5-film {position:relative; max-width:1160px; margin:0 auto; padding:65px 0 0;}
.main-sec5 .film-wrap {position:relative; height:auto; padding-top:56.25%;}
.main-sec5 .film-wrap iframe,
.main-sec5 .film-wrap video {position:absolute; left:0; top:0; width:100%; height:100%;}
.main-sec5 .film-wrap .film-cover {position:absolute; left:0; top:0; width:100%; height:100%; background:url("../../img/main/film_cover.jpg") no-repeat center center; background-size:cover;}
.main-sec5 .film-wrap .film-play {position:absolute; left:0; top:0; width:100%; height:100%; font-size:0; text-indent:-9999px; opacity:0; cursor:pointer; background:url("../../img/icon/film_pause.png") no-repeat center center; z-index:1;
    -webkit-transition:300ms;
    -moz-transition:300ms;
    -o-transition:300ms;
    transition:300ms;
}
.main-sec5 .film-wrap:hover .film-play {opacity:0.5;}
.main-sec5 .film-wrap.paused .film-play {opacity:1; background-image:url('../../img/icon/film_play.png');}
.main-sec5.start .move-circle {top:-50%;}
/* #kizi_film_video::-webkit-media-controls-overlay-play-button {display: none;} */

.main-sec6 {position:relative; padding:40px 0 140px; text-align:center; background:#fafafa;}
.main-sec6 .insta-wrap {margin:70px 0 0; overflow:hidden;}
.main-sec6 .sec6-slide {margin:0 -20px;}
.main-sec6 .swiper-container {overflow:visible;}
.main-sec6 .insta-img {margin:0 20px; border-radius:30px; overflow:hidden;}
.main-sec6 .insta-img img {width:100%;}

.circle0101 {left:3.645%; top:11.9%; width:6.77vw; height:6.77vw; opacity:0.5; background:#24b6bb;}
.circle0102 {left:33.65%; top:59.9%; width:13.54vw; height:13.54vw; background:#fde97d;}
.circle0103 {left:47.7%; top:55.142%; width:3.333vw; height:3.333vw; opacity:0.3; background:#24b6bb;}
.circle0201 {left:23.54%; top:78.098%; width:11.25vw; height:11.25vw; background:#afa6cf;}
.circle0202 {left:56.562%; top:-5.82%; width:8.854vw; height:8.854vw; background:#d7d2e7;}
.circle0203 {left:77.395%; top:40.54%; width:13.54vw; height:13.54vw; opacity:0.6; background:#fff4b2;}
.circle0204 {left:92.08%; top:20.066%; width:3.333vw; height:3.333vw; background:#8ed7da;}
.circle0301 {left:31.145%; top:23%; width:3.333vw; height:3.333vw; background:#8ed7da;}
.circle0302 {left:85.104%; top:31.515%; width:11.25vw; height:11.25vw; background:#afa6cf;}
.circle0501 {left:8px; top:-2.08%; width:240px; height:240px; background:#8ed7da;}
.circle0502 {left:13%; top:-2.6%; width:120px; height:120px; background:#fff4b2;}
.circle0503 {left:85.052%; top:3.09%; width:8.854vw; height:8.854vw; background:#fce97c;}
.circle0601 {left:7.656%; bottom:-2.5vw; width:8.854vw; height:8.854vw; background:#bbb3d6;}
.circle0602 {left:30.729%; top:0; width:5.208vw; height:5.208vw; background:#fff4b2;}
.circle0603 {left:86.354%; top:44.228%; width:2.968vw; height:2.968vw; background:#8ed7da;}

.circle0101,
.circle0201,
.circle0301,
.circle0501,
.circle0601 {
    -webkit-animation:cirMove 1s infinite alternate;
    -moz-animation:cirMove 1s infinite alternate;
    animation:cirMove 1s infinite alternate;
}
.circle0102,
.circle0202,
.circle0204,
.circle0302,
.circle0502,
.circle0602 {
    -webkit-animation:cirMove 1.5s 600ms infinite alternate;
    -moz-animation:cirMove 1.5s 600ms infinite alternate;
    animation:cirMove 1.5s 600ms infinite alternate;
}
.circle0103,
.circle0203,
.circle0503 {
    -webkit-animation:cirMove 1s 400ms infinite alternate;
    -moz-animation:cirMove 1s 400ms infinite alternate;
    animation:cirMove 1s 400ms infinite alternate;
}


@media screen and (max-width:1280px){
.main-sec1 .swiper-slide p {background-position:80% center;}

.main-sec4 .txt ul {margin:5% 0 0;}

.main-sec5 {padding:6.66% 0 0; z-index:10;}
.main-sec5 .moe-circle {z-index:11;}
.main-sec5 .sec5-box {padding:0 0 20%; background-image:url("../../img/main/m/sec5_obj.png"); background-size:100% auto;}
.main-sec5 .sec5-film {padding-top:6%;}

.circle0501 {top:-3.52%; width:16vw; height:16vw;}
.circle0502 {top:1.64%; width:8vw; height:8vw;}
.circle0503 {left:73.2%; top:-12.8vw; width:13.33vw; height:13.33vw; background:#fff4b2;}
}



@media screen and (max-width:1023px){
.tit {font-size:3.4em;}

.main-sec1 .swiper-container {overflow:visible;}
.main-sec1 .slide01 p {background-image:url("../../img/main/m/sec1_slide01.jpg");}
.main-sec1 .slide02 p {background-image:url("../../img/main/m/sec1_slide02.jpg");}
.main-sec1 .slide03 p {background-image:url("../../img/main/m/sec1_slide03.jpg");}
.main-sec1 .slide-page {bottom:5.65vh;}
.main-sec1 .swiper-pagination-bullet {font-size:14px; margin:0 14px 0 0;}
.main-sec1 .btn-play {margin-top:0;}

.main-sec1 .cont {top:auto; bottom:15.56vh; width:auto; height:auto;}
.main-sec1 .txt-box p {font-size:4.5em;}
.main-sec1 .txt-box .line {height:8px;}
.main-sec1 .slide-bg {background-image:url("../../img/main/m/slide_bg.png");}

.main-sec2 {padding:16vw 0 17.33vw;}
.main-sec2 .vertical-cell {display:block; width:auto;}
.main-sec2 .img {max-width:500px; margin:0 auto;}
.main-sec2 .txt {max-width:600px; margin:0 auto;}
.main-sec2 .txt p {margin:1.5em 0 2.143em; font-size:1.167em;}

.main-sec3 {padding:0 0 21.33vw; background-image:url("../../img/main/m/sec3_bg.png");}
.main-sec3 p {position:relative; margin:1.4em 0 5.714em; font-size:1.167em; z-index:1;}
.main-sec3 .swiper-slide {width:50%;}
.main-sec3 .dream {margin:0 10px;}
.main-sec3 .dream .img {border-radius:22px;}
.main-sec3 .dream span {font-size:1.5em;}

.main-sec4 {padding:0 0 26.5vw; background-image:url("../../img/main/m/sec4_bg.png");}
.main-sec4 .txt {width:40%;}
.main-sec4 .txt:after {bottom:-40%;}
.main-sec4 .txt ul {margin:0;}
.main-sec4 .txt p {font-size:1.167em;}
.main-sec4 .img {width:60%;}
.main-sec4 .btns button {width:60px; height:60px; margin:0 15px 0 0;}

.main-sec5 {background-image:url("../../img/main/m/sec5_bg.png");}

.main-sec6 {padding:14.66% 0 16%;}
.main-sec6 .insta-wrap {margin:5.33% 0 0;}
.main-sec6 .swiper-slide {width:33%;}
.main-sec6 .insta-img {margin:0 10px; border-radius:22px;}

.circle0101 {left:2.26%; top:37.1%; width:17.33vw; height:17.33vw;}
.circle0102 {left:62.66%; top:80.64%; width:34.66vw; height:34.66vw;}
.circle0103 {display:none;}
.circle0201 {left:4px; top:58.55%; width:150px; height:150px;}
.circle0202 {display:none;}
.circle0203 {left:58.13%; top:72.62%; width:34.66vw; height:34.66vw;}
.circle0204 {left:79.33%; top:50.47%; width:8.53vw; height:8.53vw;}
.circle0301 {left:1.47%; top:10.9%; width:8.53vw; height:8.53vw;}
.circle0601 {left:78.4%; bottom:-4.33%; width:18.66vw; height:18.66vw;}
}


@media screen and (max-width:767px){
.tit {font-size:2.500em;}

.main-sec1 .swiper-slide {height:620px;}
.main-sec1 .txt-box p {font-size:3.167em;}
.main-sec1 .txt-box p .goal {height:1em;}
.main-sec1 .txt-box .line {height:5px;}

.main-sec2 .txt {padding:0 28px;}

.main-sec3 .swiper-slide {width:64%;}
.main-sec3 .dream .img {border-radius:15px;}

.main-sec4 .txt {float:none; position:static; width:auto; padding:0;}
.main-sec4 .txt:after {display:none;}
.main-sec4 .txt ul {margin:25px 0 0; text-align:center;}
.main-sec4 .txt p {margin:20px 0 0;}
.main-sec4 .txt .btns {display:none;}
.main-sec4 .img {float:none; position:relative; width:auto; padding:0 10px;}
.main-sec4 .img .btns {display:block; position:absolute; left:0; width:100%; top:50%;}
.main-sec4 .img .btns button {position:absolute; top:-20px; width:40px; height:40px; margin:0;}
.main-sec4 .img .btns .btn-prev {left:0;}
.main-sec4 .img .btns .btn-next {right:0;}

.main-sec5 .film-wrap .film-play {background-size:60px auto;}

.main-sec6 .insta-img {border-radius:15px;}

.circle0301 {left:3.47%; top:6%;}
.circle0302 {left:82.104%; top:106px; width:15.25vw; height:15.25vw;}
.circle0602,
.circle0603 {display:none;}
}


@media screen and (max-width:500px){
.main-sec5 .film-wrap .film-play {background-size:40px auto;}

.circle0201 {width:28.8vw; height:28.8vw;}
}