.banner{margin-top: var(--top-height); background: #000;font-family:Inter-Bold;}
.banner .container{ -webkit-grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);  }
.banner .con-left{line-height: 1.3;-webkit-grid-column: 1 / 3;-webkit-grid-row: 1 / 2;grid-column: 1 / 3;grid-row: 1 / 2;z-index: 15;height: 100%;}
.banner .con-left .text-top{ display: grid; display: -moz-grid; font-size: 1rem; color: #b5e50d; -WEBKIT-justify-content: flex-start; justify-content: flex-start; }
.banner .con-left .btn-cont{ display: flex; display: -moz-flex; gap: 0.25rem; }
.banner .con-left .text-top .text{ grid-row: 1; grid-column: 1; text-align: left; opacity: 0;  -webkit-transform: translateX(3rem) translateY(0px) translateZ(0px); transform: translateX(3rem) translateY(0px) translateZ(0px); -webkit-transition: opacity .3s,transform 1s; transition: opacity .3s,transform 1s; }
.banner .con-left .text-top .text.show{ opacity: 1; transform: none; }
.banner .con-left .text-bot{ font-size: .76rem; }
.banner .con-left .line{ margin: .15rem 0 .3rem; width: 3.65rem; height: .17rem; background-image: url(../images/line_banner.png); }
.banner .con-right{text-align: right;-webkit-grid-column: 2 / 4;-webkit-grid-row: 1 / 2;grid-column: 2 / 4;grid-row: 1 / 2;z-index: 14;justify-content: flex-end;align-items: flex-end;height: 4.5rem;}
.banner .con-right .img-banner{ top:-.2rem; right: .2rem;width: 4.3rem; height: 4.3rem; grid-row: 2;grid-column: 2;animation: topToBottom 5s linear infinite; object-fit: cover; object-position: top; }
.banner .con-right .img-banner:last-of-type{right: -1.3rem;animation: bottomToTop 5s linear infinite;}
.banner::after{ content: ""; position: absolute; right: 0; bottom: 0; width: 50%; height: .25rem; background: #A5E800; z-index: 55; }
@keyframes topToBottom{
    0%{ transform: translateY(0); }
    50%{ transform: translateY(.2rem); }
    100%{ transform: translateY(0); }
}
@keyframes bottomToTop{
    0%{ transform: translateY(.2rem); }
    50%{ transform: translateY(0); }
    100%{ transform: translateY(.2rem); }
}


.banner .circle-01{ top: -2.5rem; right: -1.05rem; width: 2.81rem; height: 2.85rem; background-image: url(../images/after_circle_01.png); z-index: 11; }
.banner .circle-02{ top: -2rem; right: -4.5rem; width: 5.22rem; height: 5.31rem; background-image: url(../images/after_circle_02.png); z-index: 11; }

.feature{ padding: .7rem 0; color: #000; }
.feature .sub-title{ margin-bottom: .2rem;  font-size: .4rem; }
.feature .title{ font-size: 1rem; line-height: 1; text-transform: uppercase;; }
.feature .list{ margin-top: .4rem; justify-content: space-between; flex-wrap: wrap; } 
.feature .list li{ display: flex; display: -webkit-flex; margin-bottom: .2rem; height: 4rem; background: -webkit-linear-gradient(to top right, #FEFEFE, #D5FF51); background: linear-gradient(to top right, #FEFEFE, #E2F9A0); border: .01rem #DFFB8D solid; -webkit-align-items: center; align-items: center; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-flex-flow: column;  flex-flow: column; }
.feature .list li:nth-of-type(1),
.feature .list li:nth-of-type(4){ width: 6.84rem; }
.feature .list li:nth-of-type(2),
.feature .list li:nth-of-type(3){ width: 4.98rem; }
.feature .list li:nth-of-type(2){ background: -webkit-linear-gradient(to top right, #FEFEFE, #E9E7E8); background: linear-gradient(to top right, #FEFEFE, #E9E7E8); border: .01rem #F3F3F3 solid;}
.feature .list li:nth-of-type(3){ background: -webkit-linear-gradient(to top right, #FEFEFE, #CECBFF); background: linear-gradient(to top right, #FEFEFE, #CECBFF); border: .01rem #F2F0FF solid;}
.feature .list li:nth-of-type(4){ background: -webkit-linear-gradient(to top right, #FEFEFE, #FFE47F); background: linear-gradient(to top right, #FEFEFE, #FFE47F); border: .01rem #FFF6DA solid;}
.feature .list li .desc{ margin-bottom: .3rem; font-size: .24rem; font-family:Inter-SemiBold; text-transform: uppercase; }
.feature .list li .img-feature { width: 2.96rem; height: 2.8rem;}
.feature .list li .bubbling-list{ width: 85%; -webkit-justify-content: space-between;  justify-content: space-between; }
.feature .list li [class*="bubbling-0"]{ margin-bottom: .2rem; padding: .05rem .2rem .05rem .05rem; background: #000000; font-size: .12rem; color: #fff; -webkit-border-radius:.5rem; border-radius:.5rem; text-align: left; }
.feature .list li .bubbling-02{ background: #0070FF;}
.feature .list li .bubbling-03{ background: #FF7B00;}
.feature .list li .ico-user{ margin-right: .05rem; width: .33rem; -webkit-border-radius: 50%; border-radius: 50%; }
.feature .ico-logo{ margin-bottom: .52rem; }
.feature .ico-logo img{  height: 1rem; }

.works{ padding: .6rem 0; background: -webkit-linear-gradient(#0305FB,#000 40%); background: linear-gradient(#0305FB,#000 40%); font-family:Inter-Regular; }
.works .sub-title{ font-size: .4rem; }
.works .sub-title .ico-hand{ margin-left: .05rem; width: .44rem; }
.works .title-top{ font-size: 1.2rem; }
.works .title-bot{ font-size: 1.8rem; text-align: right; line-height: 1; }
.works .swiper-slide{ margin-top: 1rem; -webkit-transition: transform .1s; transition: transform .5s linear; }
.works .swiper-slide:nth-of-type(even){ -webkit-transform: translateY(-.4rem); transform: translateY(-.4rem); }
.works .swiper-slide{ width: 2.1rem; text-align: center; }
.works .swiper-slide img,
.works .swiper-slide .desc{ width: 1.83rem; }
.works .swiper-slide .desc{ margin: .1rem auto; text-align: left; }
.arrow-list{ margin: .4rem 1.2rem 0 0; -webkit-justify-content: flex-end; justify-content: flex-end; gap: .2rem; }
.arrow-list [class*="-button-"]{ width: .57rem; height: .57rem; background-image: url("../images/btn_arrow.png"); cursor: pointer; }
.arrow-list [class*="-button-prev"]{ -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.about{ padding: .9rem 0 .7rem; }
.about .container{ -webkit-align-items: flex-end; align-items: flex-end; }
.about .title{ font-size: .6rem; }
.about [class*="con-"]{ width: 50%; color: #000; }
.about .list{ width: 5rem; }
.about .text-top{ padding: .15rem 0; margin-bottom: .2rem; -webkit-justify-content: space-between;  justify-content: space-between; border-bottom: .01rem #000 solid; } 
.about .text-top .text{ font-size: .24rem; font-family:Inter-SemiBold; }
.about .text-top .num{ font-size: .2rem; font-style: italic; }
.about .text-bot{ height: 1.42rem;}
.about .img-about{ height: 4.51rem; }

.activity{ padding: .7rem 0 .5rem; background: #F5F5F5; }
.activity .title{ font-size: 1rem; color: #000; }
.activity .swiper-activity{ width: 100%; overflow: hidden; }
.activity .swiper-wrapper{ }
.activity .swiper-slide{ position: relative; width: 4.05rem; text-align: center; }
.activity .swiper-slide img{ width: 3.86rem; height: 4.57rem; }
.activity .swiper-slide .desc{ left: 50%; bottom:0; padding-left: .2rem; width: 3.86rem; height: .6rem; background: -webkit-linear-gradient(transparent,rgba(0,0,0,.9));  background: linear-gradient(transparent,rgba(0,0,0,.9)); text-align: left; font-size: .2rem; line-height: .6rem; box-sizing: border-box; -webkit-transform: translateX(-50%); transform: translateX(-50%); } 
.activity .arrow-list{ margin-right: 0; }
.activity .arrow-list [class*="-button-"]{ background-image: url("../images/btn_arrow_black.png"); outline: none; }

.join{ padding: 1.1rem 0; background: -webkit-linear-gradient(to right,#A5E800 0%,#A5E800 47%,#fff 47%,#fff 100%); background: linear-gradient(to right,#A5E800 0%,#A5E800 47%,#fff 47%,#fff 100%); }
.join .con-left{ padding-top: .2rem; width: 46%; color: #000;}
.join .con-right{ width: 54%; }
.join .con-left .title{ font-size: 1rem; }
.join .con-left .desc{ width: 4.1rem; }
.join .sub-title{ margin: .2rem 0; font-family:Inter-SemiBold; font-size: .24rem; }
.join .btn-black{ margin-top: .45rem; }
.join .con-right::after{ content: ""; position: absolute; top: 50%; right: -4.3rem; width: 11.59rem; height: 6.5rem; background: url("../images/bg_join_shadow.png") no-repeat; background-size: 100% 100%; opacity: .03; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.join .con-right .list{ -webkit-justify-content: flex-end; justify-content: flex-end; gap: .2rem; z-index: 2;  }
.join .con-right .list li:nth-of-type(2){ -webkit-transform: translateY(-.5rem);  transform: translateY(-.5rem); }
.join .con-right li{ position: relative; }
.join .con-right li:nth-child(2){ z-index: 2; }
.join .con-right li [class*="tag-"]{ position: absolute; padding: .1rem .15rem; font-size: .2rem; font-family:Inter-Regular;}
.join .con-right li .tag-01{ top: -.3rem; left: -.5rem; background: #2171ff; }
.join .con-right li .tag-02{ top: -.4rem; left: 1rem; background: #ffd02f; color: #000; }
.join .con-right li .tag-03{ bottom: -1.3rem; width: 3.05rem; background: #b5e50d; color: #000; font-size: .16rem; -webkit-flex-flow: column; flex-flow: column; }
.join .con-right li .tag-03::before{ content: ""; position: absolute; top: -.4rem; left: 50%; width: .15rem; height: .15rem; background: #A5E800; border: .01rem #F3F5E9 solid; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-box-shadow: 0 0 .16rem #c7f038;  box-shadow: 0 0 .16rem #c7f038; }
.join .con-right li .tag-03::after{ content: ""; position: absolute; top: -.13rem; left: 50%; width: 0; height: 0; border-left: .11rem solid transparent; border-right: .11rem solid transparent; border-bottom: .22rem solid #B5E50D; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.join .con-right li .num{ margin-right: .1rem; font-size: .36rem; font-family:Inter-SemiBold; }
.join .con-right li .title{ font-size: .18rem; font-family:Inter-SemiBold; }
.join .con-right .list img{ width: 1.67rem; }



@media only screen and (max-width:780px){
:root{
    --title-size:.7rem;
}
.banner{ padding-top: .5rem; height: auto; }    
.banner .circle-01,.banner .circle-02{ opacity: 0; }
.banner .container{display: flex;display: -webkit-flex;-webkit-flex-flow: column;flex-flow: column;}
.banner .con-left{ text-align: center; }
.banner .con-left .text-top{ font-size: var(--title-size); -webkit-justify-content: center;  justify-content: center; }
.banner .con-left .text-top .text{ text-align: center; -webkit-transform: translateX(1rem) translateY(0) translateZ(0px); transform: translateX(1rem) translateY(0) translateZ(0px); }
.banner .con-left .text-bot{ font-size: .62rem; }
.banner .con-left .line{ margin: .15rem auto .3rem; }
.banner .con-left .btn-green{ margin: 0 auto;}
.banner .con-right{margin-top: .25rem;text-align: center; -webkit-grid-template-columns: repeat(3,1fr); grid-template-columns: repeat(3,1fr);}
.banner::after{ width: 80%; }
.banner .con-right .img-banner{ right: .5rem; }
.banner .con-right .img-banner:last-of-type{ right: -.8rem; }

.feature .sub-title{font-size: .28rem; }
.feature .title{ font-size: .55rem; }
.feature .list li{ width: 100%!important; }

.works .title-top{ font-size: var(--title-size); }
.works .title-bot{ font-size: 1rem; }
.works .swiper-slide{ width: 2.45rem; text-align: center; }
.works .swiper-slide img{ width: 2.3rem; }
.arrow-list{ margin-right: 0; -webkit-justify-content: center; justify-content: center; }
.works .swiper-slide:nth-of-type(1n){ -webkit-transform: translateY(-0.4rem); transform: translateY(-0.4rem);}
.works .swiper-slide:nth-of-type(2n){ -webkit-transform: translateY(0); transform: translateY(0);}

.about .container{ -webkit-flex-flow: column; flex-flow: column; -webkit-align-items: center; align-items: center; }
.about [class*="con-"],
.about .list{ width: 100%; }
.about .text-top{ padding: .55rem 0 .25rem; }
.about .text-top .text,
.about .text-bot{ font-size: .32rem; }   
.about .text-top .num{ font-size: .28rem; }
.about .text-bot{ height: auto; } 
.about .img-about{ margin-top: .4rem; width: 100%; height: 5.15rem; }

.activity .title{ margin-bottom: .65rem; font-size: .6rem; }
.activity .container{ padding-left: .3rem; width: 100%; box-sizing: border-box; }

.join{ padding: .4rem 0; background: #A5E800 ; }
.join .container{ -webkit-flex-flow: column; flex-flow: column; }
.join .con-left,
.join .con-right{ padding-top: 0; width: 100%; }
.join .con-left .title{ font-size: var(--title-size); }
.join .sub-title{ margin: .1rem auto .2rem; font-size: .32rem; }
.join .con-left .desc{ width: 100%; font-size: .28rem; color: #597F00; }
.join .con-right{ padding: 1.45rem 0 1.15rem; margin-top: .4rem; background: #fff; }
.join .con-right .list{ margin-left: .2rem; -webkit-justify-content: center; justify-content: center; }
.join .con-right::before{ content: ""; position: absolute; top: 0; right: -.3rem; width: .4rem; height: 100%; background: #fff; }

}