/* section */
section {padding: 1.5vw 0;}
section >* {z-index: 5}section .title_box {margin-bottom: 10px;}
section .title_box font {font-weight: 200;font-size: 1.3em;color: var(--primary);position: relative;font-family: 'Archivo', sans-serif;text-transform: uppercase;line-height: 130%;}
section .title_box font::first-letter {color: var(--primary)}
section .title_box .page_title {line-height: 130%;letter-spacing: 2px;font-weight: 400;font-size: 3em;color: var(--primary);position: relative;}
section .title_box .Txt,#contactArea .contactBox .title_box h2{color: #e2e4e9;font-size: 5.8em;font-weight: 400;text-transform: uppercase;font-family: 'Archivo', sans-serif;letter-spacing: 1.5px;}
section .title_box p{color: var(--primary);font-size: 1.2em;font-weight: 600;}
section .noteBox{font-size: 17px;font-weight: 500;width: 70%;line-height: 250%;}
section.bg_box {background: no-repeat 50% / cover;}

.more_btn {margin-top: 0px}
.more_btn a {position: relative;overflow: hidden;width: 120px;display: inline-block;text-align: center;border-radius: 50px;padding: 32px 60px;border-radius: 100px;-webkit-box-shadow: 0px 20px 30px -4.6px #a5b7c1;box-shadow: 0px 20px 30px -4.6px #a5b7c1;}
.more_btn a:hover{-webkit-box-shadow: 0px 0px 0px 0.4px #ffffff;box-shadow: 0px 0px 0px 0.4px #ffffff;transition: all .9s ease;}
.more_btn font {text-align: left;font-weight: 500;text-transform: uppercase;letter-spacing: 3px;color: #4f3c30}
.more_btn.white font {letter-spacing: 1px;font-size: 16px;position: relative;-webkit-writing-mode: inherit;-ms-writing-mode: inherit;writing-mode: inherit;color: #fff;font-weight: 400;}
.more_btn.white a:before {content: "";height: 100%;width: 100%;display: block;position: absolute;bottom: 0;left: 0;-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;background-color: var(--complement);}

section .Img img{border-radius: 70px;}

/* about_area */#wrap {position: relative}
#mainArea .loop_wrap {display: flex}
#mainArea .loop_wrap .text {flex: 0 0 auto;padding: 0 30px;color: #e2e4e9;font-size: 15.625rem;letter-spacing: -.01em;white-space: nowrap;font-family: 'Archivo', sans-serif;opacity: 0.5;line-height: 150%;}
#mainArea .loop_wrap .text:first-child {-webkit-animation: 50s loop 0s linear infinite;animation: 50s loop 0s linear infinite}
#mainArea .loop_wrap .text:last-child {-webkit-animation: 50s loop 0s linear infinite;animation: 50s loop 0s linear infinite}

@-webkit-keyframes loop {
    to {
        -webkit-transform: translateX(-100%);
        transform: translate(-100%)
    }
}

@keyframes loop {
    to {
        -webkit-transform: translateX(-100%);
        transform: translate(-100%)
    }
}
#about_area {position: relative;margin-top: -170px;}
#about_area .nowrap_box {margin-right: auto;width: 1320px;margin-bottom: 50px;}
#about_area::after {content: "";width: 100%;height: 820px;display: block;background-image: url(/images/39/img-ab-bg.png);background-size: cover;background-repeat: no-repeat;position: absolute;top: 0;left: 0;-webkit-animation: index-flower-2-animation 5s infinite ease-in-out;animation: index-flower-2-animation 5s infinite ease-in-out;}

@keyframes index-flower-2-animation {
    0% {
        transform: rotateX(0) rotateY(0) rotateZ(0) translateX(0px);
    }

    50% {
        transform: rotateX(5deg) rotateY(-15deg) rotateZ(2.5deg) translateX(20px);
    }

    100% {
        transform: rotateX(0) rotateY(0) rotateZ(0) translateX(0px);
    }
}

#about_area .aboutArea .ImgCenter:before {position: absolute;display: block;bottom: 60px;right: 140px;content: "";background: #aecf65;z-index: -2;height: 330px;width: 0;-webkit-transform: skewX(-30deg);-ms-transform: skewX(-30deg);transform: skewX(-30deg);transition: all 3.1s ease-in-out;-webkit-transition: all 3.1s ease-in-out}
#about_area.tooolong .aboutArea .ImgCenter:before {width: 60px;}
#about_area. .img_item img {width: 100%}
#about_area .aboutArea {display: flex;position: relative;align-items: flex-start;justify-content: flex-start;}
#about_area .aboutArea .img_item{margin: 30px 0 0;width: calc(48% - 30px);}
#about_area .aboutArea .areaTxt {padding-top: 0;padding-left: 70px;width: 35%;}
#about_area .aboutArea .areaTitle .title {font-size: 24px;margin-left: 0px;letter-spacing: 1px;padding-top: 0;line-height: 180%;font-weight: 500;}
#about_area .aboutArea .areaTitle article  {position: relative;-webkit-transition-delay: 300ms;transition-delay: 300ms;font-size: 18px;line-height: 240%;font-weight: 500;}
#about_area .aboutArea .ImgCenter .Img {margin-left: 0px;position: relative;overflow: hidden;}
#about_area .aboutArea .ImgCenter .Img img {border-radius: 0px 70px 70px 0px;}
#about_area .aboutArea .ImgCenter .Img video {width: 130%;height: 510px;}
#about_area .aboutArea .ImgCenter .ImgTop {position: absolute;bottom: -40px;right: 50px;width: 50%;z-index: -1;}
#about_area .aboutArea .ImgCenter .ImgBottom {position: absolute;top: 70px;right: -40px;width: 23%;z-index: 2}
#about_area .aboutArea .bottom {width: 25%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: end;-ms-flex-align: end;align-items: flex-start;padding-left: 100px;margin-bottom: -11px;position: relative;flex-direction: column;justify-content: flex-end}
#about_area .aboutArea .Txt {letter-spacing: 0.6px;line-height: 1.6}
#about_area .aboutArea .Txt h2 {font-size: 25px;margin-bottom: 15px}
#about_area .aboutArea .Txt .text {color: #3f3f3f;font-size: 16px;font-weight: 500;line-height: 200%;letter-spacing: 1px;}
#about_area .aboutArea .right .more_btn {position: relative;margin-top: 50px;}
#about_area .deck02 {position: absolute;right: 360px;z-index: 0;top: 130px;}
#about_area .deck02 .Img {width: 100%;height: 100%;}


#Feature_area, #Perfect_area, #Premium_area,#contactArea{position: relative;}
#Feature_area::before {content: "";width: 451px;height: 461px;display: block;background-image: url(/images/39/img-ab-bg-2.png);background-size: contain;background-repeat: no-repeat;background-position: 100% 100%;overflow: hidden;position: absolute;bottom: -210px;left: 0px;z-index: 1;-webkit-animation: index-flower-1-animation 5s infinite ease-in-out;animation: index-flower-1-animation 5s infinite ease-in-out;}

@keyframes index-flower-1-animation {
    0% {
        transform: rotateX(0) rotateY(0) rotateZ(0) translateX(0px);
    }

    50% {
        transform: rotateX(10deg) rotateY(10deg) rotateZ(-5deg) translateX(-20px);
    }

    100% {
        transform: rotateX(0) rotateY(0) rotateZ(0) translateX(0px);
    }
}

#Feature_area .workframe{display: flex;width: 1620px;margin: 0 0 0 auto;justify-content: space-between;}
#Feature_area .Img img,#Perfect_area .Img img{border-radius: 70px 0 0 70px;}
.anchorBox{position:relative;z-index:5;display:flex;justify-content: space-evenly;margin-bottom: 60px;font-weight:700;font-size:14px;color:#bdbdbd;margin-top:70px;}
.anchorBox::after{content:"";position:absolute;left:calc((-100vw + 1340px)/2);top: 4px;z-index:-1;width:100vw;height:1px;background-color:#efefef}
.anchorBox li{position:relative;padding-left:30px;padding-right:30px;padding-top:25px}
.anchorBox li p{text-align: center;font-size: 22px;}
.anchorBox li span{display:inline-block;transition:all 0.5s ease-in-out;text-align:center;font-weight: 400;font-family: 'Archivo', sans-serif;}
.anchorBox li::before{content:"";position:absolute;top:0;left:50%;margin-left:-6px;width: 8px;height: 8px;border-radius:50%;background-color: var(--triadic1);transition:all 0.5s ease-in-out}
.anchorBox li.current,.anchorBox li:hover{color: var(--primary);}
.anchorBox li.current span,.anchorBox li:hover span{transform:scale(1.2);transform-origin:center}
.anchorBox li.current::before,.anchorBox li:hover::before{background-color: var(--primary);}



#Perfect_area{padding: 3.5vw 0 2.5vw 0;}
#Perfect_area .workframe,#Premium_area .workframe{display: flex;width: 92%;margin: 0 0 0 auto;justify-content: space-between;}
#Premium_area .workframe{margin: 0 auto 0 0;display: flex;align-items: center;}
#Perfect_area .PerfectBox{margin-top: 50px;}
#Premium_area .Img img{border-radius: 0px 70px 70px 0px;}
#Perfect_area .PerfectBG {content: '';position: absolute;height: 130%;width: 50%;top: -100px;right: 0;background: #f7f8fa;z-index: 0;}
#Premium_area .PremiumBG{content: '';position: absolute;height: 240px;width: 100%;top: -140px;right: 0;background: #f7f8fa;z-index: 0;}
#Perfect_area .img_item,#Premium_area .img_item{width: calc(64% - 30px);}

/* contactArea */
#contactArea .qualityBox{display:flex;align-items:center;padding:6vw 0;background-color:#f7f8fa}
#contactArea .workframe{display:flex;justify-content:space-between}
#contactArea .qualityBox .title_box{width:680px}
#contactArea .qualityBG{content:'';position:absolute;height:240px;width:100%;top:-140px;right:0;background:#f7f8fa;z-index:-1}
#contactArea .qualityBox .title_box h2{font-size:22px;margin-bottom:60px;line-height:200%}
#contactArea .contactBox{padding:5vw 0}
#contactArea .contactBox .title_box h2{color:var(--primary);line-height:80%}
#contactArea .contactBox .title_box p{font-weight:500;font-size:20px;margin-left:30px;width:270px;line-height:170%}
#contactArea .contactBox .title_box{display:flex;align-items:center}
#contactArea .title_box p{font-size:17px;line-height:250%}
#contactArea .page-scroll{position:relative;top:0;left:0}
#contactArea #scrollBtn .btn-arrow{transform:rotate(-90deg) translateX(-50%);top:38%;left:45%;animation:arrow_down2 3s linear 0s infinite}
@-webkit-keyframes arrow_down2{0%{margin-left:-10px;opacity:0}
20%{margin-left:0;opacity:1}
70%{margin-left:0;opacity:1}
to{margin-left:10px;opacity:0}
}@keyframes arrow_down2{0%{margin-left:-10px;opacity:0}
20%{margin-left:0;opacity:1}
70%{margin-left:0;opacity:1}
to{margin-left:10px;opacity:0}
}

/* particle-canvas */
#particle-canvas{width:100%;height:100%;position:absolute !important;top:0;left:0;z-index:-3;opacity:.25}
#particle-canvas canvas{width:100%;height:100%}

@media screen and (max-width: 1660px){
	#Feature_area .workframe{width: 90%;}
	section .title_box .Txt, #contactArea .contactBox .title_box h2{font-size: 4.5em;}
	section .noteBox{width: 90%;}
}
@media screen and (max-width: 1366px){
	#about_area .nowrap_box{width: 85%;margin-bottom: 30px;}
	#Feature_area .workframe{width: 90%;}
}

@media (max-width: 1180px){
	.anchorBox{margin-top: 40px;margin-bottom: 40px;}
	.anchorBox li{padding-left: 10px;padding-right: 10px;}
	.anchorBox li p{font-size: 18px;}
	.anchorBox li span{font-size: 14px;}
	.anchorBox::after{left: 0;}
	#about_area .aboutArea, #Feature_area .workframe, #Perfect_area .workframe{display: flex;flex-direction: column;}
	#Premium_area .workframe{display: flex;flex-direction: column-reverse;}
	#about_area .aboutArea .img_item, #Feature_area .FeatureBox,#Perfect_area .PerfectBox, #Perfect_area .img_item, #Premium_area .img_item,#Premium_area .PremiumBox{width: auto;margin-bottom: 50px;margin-top: 20px;}
	#Feature_area .ImgCenter .Img{text-align: right;}
	#about_area .aboutArea .areaTxt{padding-left: 40px;width: auto;}
	#Feature_area, #Perfect_area, #Premium_area, #contactArea {position: relative;padding: 1.5vw 0;}
	#Premium_area .PremiumBox{padding-left: 40px;}
	section .noteBox{width: 90%;}
	#contactArea .workframe{display: flex;flex-direction: column;align-items: center;}
	#contactArea .qualityBox .title_box{width: auto;margin-bottom: 40px;}
	#contactArea .qualityBox{padding: 10vw 0;}
	#contactArea .contactBox .title_box{display: flex;flex-direction: column;align-items: flex-start;width: 100%;}
	#contactArea .page-scroll{position: absolute;left: auto;top: auto;bottom: -20px;right: 10px;width: 110px;height: 110px;}
	#contactArea #scrollBtn .btn-arrow{top: 24%;left: 45%;}#contactArea .contactBox{padding: 12vw 0;}
	#contactArea .contactBox .title_box p{margin-left: 0;margin-top: 40px;}

}
@media screen and (max-width: 960px){
	#mainArea .loop_wrap .text{font-size: 9.625rem;}
	#about_area{margin-top: -70px;}
	section .title_box p{font-size: 1.2em;}
	section .title_box .Txt{font-size: 3em;}
	#contactArea .contactBox .title_box h2{font-size: 4em;}
}
@media screen and (max-width: 480px){
	#mainArea .loop_wrap .text{font-size: 5.625rem;}
	section .title_box .page_title{font-size: 2em;}
	section .title_box font{font-size: 1em;}
}