/* section */
section{padding: 6vw 0;}
section >*{z-index:5}
section .title_box .page_title{font-weight: bold;font-size: 62px;color: var(--info);position: relative;font-family: 'Manrope', sans-serif;text-transform: uppercase;line-height: 130%;text-transform: uppercase;margin-bottom: 30px;}
section .title_box p{line-height: 130%;letter-spacing: 0.5px;font-weight: 400;font-size: 20px;color: var(--triadic1);position: relative;}
section.bg_box{background:no-repeat 50% / cover;}
.more_btn{margin-top:0px}
.more_btn a{position:relative;overflow:hidden;width: 180px;padding: 12px 70px 12px 20px;display:inline-block;}
.more_btn font{font-size: 16px;position:relative;-webkit-writing-mode:inherit;-ms-writing-mode:inherit;writing-mode:inherit;color: var(--complement);font-family: 'Manrope', sans-serif;font-weight: 600;text-transform: uppercase;text-align: left;letter-spacing: 0.5px;z-index: 10;}
.more_btn span::before{content:"";position:absolute;top: calc(50% - 6px);right: 20px;width: 18px;height: 20px;background: url(/images/39/icon-arrow.png);background-size: contain;background-repeat: no-repeat;z-index: 10;}
.more_btn a:before{content:"";height:100%;width: 100%;display:block;position:absolute;bottom:0;left: -60px;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background-color: #e7e7e7;-webkit-transform: skewX(-30deg);-ms-transform: skewX(-30deg);transform: skewX(-30deg);z-index: 1;}
.more_btn a::after{content:'';position:absolute;height:100%;width:100%;top:0;right: 0;background-color: var(--triadic1);z-index: 0;transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}


/* mainArea */
#mainArea{background-color:var(--triadic2);position:relative}
#mainArea:before{position:absolute;display:block;top:0;left:0px;content:"";background-image:url(/images/39/img-bg-01.png);background-repeat:no-repeat;z-index:2;height:100%;width:100%;border-radius:0 100px 100px 0}
#mainArea::after{content:"";display:block;background-size:cover;position:absolute;background-image:url(/images/39/img-bg-02.png);background-repeat:no-repeat;height:1187px;width:1157px;top:0;right:0;z-index:0}


/* about_area */
#wrap{position:relative}
#about_area{padding: 5vw 0;position: relative;background-image: url(/images/39/img-ab-bg.png);background-repeat: no-repeat;background-size: cover;background-position: right;position: relative;}
#about_area .workframe{margin-right:0;width: 86%;}
#about_area .aboutArea{display:grid;grid-template-columns: 1fr 1110px;gap:0 60px}
#about_area .areaTitle .title_box h2{margin-top: 60px;color: var(--white);margin-bottom: 0px;}
#about_area .areaTitle .title_box p{font-size: 18px;color: var(--white);line-height: 200%;position: relative;padding: 30px 0;}
#about_area .about_logo{text-align:center;margin-top:60px}
#about_area .media_box .video_box { position: relative; z-index: 10; }
#about_area .media_box .video_box video {width: 100%;height: 620px;}
#about_area .media_box .video_box:before {position: absolute;height: 95%;width: 100%;border: 8px #ffffff solid;display: block;top: 7%;left: -3%;content: "";z-index: -1;}
#about_area .media_box .video_box iframe { position: relative; width: 85%; aspect-ratio: 5/2.7; border: 0; }
#about_area .deck02{position:absolute;left: 15%;bottom: -160px;z-index: -1;display: none;}
#about_area .deck02 .Img{width: 100%;height: 100%;font-size: max(8 * (2vw + .8vh) / 2, 22px);color: #ffffff;font-weight: bold;opacity: .1;}
#Service_area .aboutArea .aboutRight p{width: 90%;font-weight: 700;font-size: 26px;margin: auto;text-align: center;}


/* product_area */
#product_area{padding: 4vw 0;}
#product_area .title_box{display: grid;grid-template-columns: 1fr 360px;gap: 100px;justify-content:space-between;margin: auto;align-items: center;margin-bottom: 10px;}
#product_area .title_box .page_title{margin-bottom:0}
#product_area .title_box .right .noteBox{font-size:18px;font-weight:500;line-height:200%}
#product_area .bottombtn{margin:50px 30px 0;display: flex;justify-content: flex-end;width:calc(100% - 46px)}
#product_area .more_btn a:before,#people .more_btn a:before{background-color:#ffffff}
#product_area .productBG{content:'';position:absolute;height:100%;width:102%;top:0;right:0;background-image:url(/images/39/img-pd-bg.png);background-size:contain;background-repeat:no-repeat;z-index:0}
#product_area .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;-webkit-mask:url(/images/39/index-product-mask.png) no-repeat center center / contain;position:relative}
#product_area .list_box{
    position: relative;
    padding: 0 60px;
}
#product_area .list_box #imglist{margin-top:60px;display:grid;grid-template-columns:450px  1fr;);width:100%;gap:60px}
#product_area li{margin: 10px 30px;}
#product_area li .row{position:relative}
#product_area li .number{padding: 20px 0 0 50px;position:relative;color: #ffffff;font-size: 22px;}
#product_area li .number::after{content:"";display:block;width:3px;height:20px;margin:0px auto 0;background: #ffffff;position:absolute;left: 35px;top: 28px;}
#product_area li .row:after{transform:scale(1);-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out}
#product_area li:hover .row:after{-ms-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-webkit-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);}
#product_area li .row  .Img{aspect-ratio:1 / 1;display:flex;width: 100%;}
#product_area .img_nav  li .row .Img{width:90%;margin:0px auto}
#product_area li .row  .Img img{object-fit:contain;margin:auto;width: 100%;aspect-ratio: 1/1;}
#product_area li  .row .info_box{position: relative;width: 100%;display: flex;flex-direction: column;}
#product_area li .row .info_box p{margin-bottom:10px;display:block;color:#999999;font-size:21px;font-weight:bold;line-height:1.4;padding-bottom:15px;position:relative;font-family:'Barlow',sans-serif;text-transform:uppercase}
#product_area li .row .info_box p:after{position:absolute;left:0;bottom:0;content:"";width:100%;height:1px;display:block;background-color:var(--primary)}
#product_area li .row .info_box h2{font-size:20px;color: #ffffff;padding: 0px 30px 30px 30px;font-weight: 500;}
#product_area li .row:before{content:"";position:absolute;left:0px;bottom:0;background:linear-gradient(to bottom,var(--secondary),var(--complement));width:100%;height:75%;-webkit-transition:all 0.8s;transition:all 0.8s;z-index:0;clip-path:polygon(0 0,28% 0,100% 100%,0% 100%)}
#product_area li .row:after{content:"";position:absolute;right:0px;bottom:0;background-color:#fff;width:100%;height:75%;-webkit-transition:all 0.8s;transition:all 0.8s;z-index:-1;background-color:#ffffff}
#imglist .img_nav .img_show{margin:0 10px 0}
#imglist .img_nav img{width:200px;aspect-ratio:4 / 3;object-fit:cover}
.bottombtn{display:inline-grid;grid-template-columns:1fr 100px;gap:40px;align-items:center;}
.bottombtn .productbtn{display:inline-grid;grid-template-columns:repeat(2,1fr);gap:15px}
.productbtn {position: absolute;z-index: -1;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 98%;display: flex;justify-content: space-between;display: none;}
.productbtn .slick-arrow.slick-hidden{
    display: inline-block;
}
#product_next{-webkit-transform:scaleX(-1);transform:scaleX(-1);position:relative}
.productbtn  a img{
    display: flex;
    flex-direction: column;
    }
#product_area:after{position:absolute;display:block;bottom: 0px;left: 0;content:"";background: url(/images/39/img-p-bg.png);background-repeat: no-repeat;background-size: cover;z-index: 1;height: 100%;width: 100%;}


/* linkArea */
#Service_area{overflow:hidden;position:relative;padding: 0;}
#Service_area .workframe{width:100%}
#Service_area .aboutArea{display:grid;grid-template-columns: 590px 1fr;width:100%;align-items:center;gap: 0 100px;}
#Service_area .aboutLeft{position:relative}
#Service_area .aboutLeft::after{content:"";display:block;position:absolute;background-image:url(/images/39/img-ad-03.png);background-repeat:no-repeat;background-size:cover;height:620px;width:620px;top:130px;right:-150px;z-index:-1;animation-name:circle;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:50s}
#Service_area .aboutLeft::before{content:"";display:block;position:absolute;background-image:url(/images/39/img-ad-02.png);background-repeat:no-repeat;background-size:cover;height:470px;width:470px;top:220px;right:-60px;z-index:1;animation-name:circle;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:50s}
#Service_area .title_box .page_title{text-align:center;margin-bottom:50px}
#Service_area .linkArea{width:90%}
#Service_area .more_btn{text-align:center;margin-bottom: 30px;}
#Service_area .linkList{padding: 70px 30px;display: grid;grid-template-columns: repeat(5, 1fr);gap: 0 0px;}
#Service_area .linkList li .item{display:flex;flex-direction:column;align-items:center}
#Service_area .linkList li{position:relative;padding: 10px 5px;}
#Service_area .linkList li .Img:after{content:'';position:absolute;right: 0px;top:0;width: 100%;height: 100%;background-image: url(/images/39/img-ad-icon-bg.png);background-repeat: no-repeat;background-size: contain;background-position: 50%;}
@keyframes circle{0%{transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);}}
#Service_area .linkList li:last-child:after{display:none}
#Service_area .linkList li .Img{display: flex;flex-direction: column;align-content: center;align-items: center;width: 100%;height: 180px;justify-content: center;margin: auto;}
#Service_area .linkList li .Img img{aspect-ratio:1 / 1;width: 85px;object-fit:contain;}
#Service_area .linkList li .Txt{margin-top:20px;}
#Service_area .linkList li .Txt  h2{color: var(--info);font-size: 20px;line-height: 130%;text-align: center;}
#Service_area .linkList li .Txt p{color:#9196a2;font-size: 16px;}
#Service_area .linkArea .more_btn.white a{width: 260px;}


/* ProgramsArea */
#ProgramsArea{position:relative;overflow:inherit;background-image:url(/images/39/img-impact-bg.jpg);background-size:auto;background-position:50% 50%;padding:10vw 0}
#ProgramsArea::after{content:"";position:absolute;background-color:#000;width:100%;height:100%;top:0;left:0;opacity:.4}
#ProgramsArea::before{content:"";position:absolute;top:0;left:0;right:0;z-index:1;max-width: 1560px;height:100%;margin-left:auto;margin-right:auto;background-image:linear-gradient(to bottom,#eaeaea,#eaeaea),linear-gradient(to bottom,#eaeaea,#eaeaea),linear-gradient(to bottom,#eaeaea,#eaeaea),linear-gradient(to bottom,#eaeaea,#eaeaea),linear-gradient(to bottom,#eaeaea,#eaeaea);background-position:0% 0,25% 0,50% 0,75% 0,100% 0;background-size:1px 100%;background-repeat:no-repeat;opacity:.3;display: none;}
#ProgramsArea .workframe{padding:0 30px;margin:auto}
#ProgramsArea .workframe{display:grid;grid-template-columns:350px 1fr;gap:0 20px;align-items:center}
#ProgramsArea .ProgramsList{margin-top: 25px;}
#ProgramsArea .title_box .page_title,#ProgramsArea .title_box p{color:var(--white)}
#ProgramsArea .ProgramsList .title_box .left{margin-bottom:40px}
#ProgramsArea .ProgramsList li .item{width:100%;height:100%}
#ProgramsArea .ProgramsList li .Txt{padding-top: 70px;}
#ProgramsArea .ProgramsList li .Img{position:relative;overflow:hidden}
#ProgramsArea .ProgramsList li::before{content:"";position:absolute;top:15px;left: -37px;width:12px;height:12px;border-radius:50%;border:1px solid #cecece;background-color:#ffffff00;transition:all 0.5s ease-in-out;opacity:.8}
#ProgramsArea .ProgramsList li::after{content:"";position:absolute;top:19px;left: -32px;width:5px;height:5px;border-radius:50%;background-color:#ffffff;opacity:.8}
#ProgramsArea .ProgramsList li img{width:auto}
#ProgramsArea .ProgramsList li .Txt p{font-weight:600;letter-spacing:0.5px;color:var(--white);font-size: 21px;line-height: 150%;}


/* people */
#people{padding:0;position:relative;overflow:hidden;background-color:#f4f4f4}
#people .peopleBox{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:0 0px}
#people .peopleBox .Txt{padding:120px 90px 55px}
#people .peopleBox .Txt .textEditor{padding:20px 50px 70px;font-size:18px;letter-spacing:.5px;width:80%}
#people .loop_wrap{display:flex;position:absolute;bottom:-100px;z-index:0}
#people .loop_wrap .text{flex:0 0 auto;padding:0 30px;color:#d8d8d8;font-size:15.625rem;letter-spacing:-.01em;white-space:nowrap;opacity:0.3;line-height:150%;font-weight:700}
#people .loop_wrap .text:first-child{-webkit-animation:50s loop 0s linear infinite;animation:50s loop 0s linear infinite}
#people .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%)}
}

@media screen and (max-width: 1660px){
    #about_area .aboutArea{grid-template-columns:1fr 840px}
    #about_area .media_box .video_box:before{height:73%;width:100%;top:17%}
    #about_area .deck02{bottom:-120px}
    #Service_area .aboutArea{grid-template-columns:520px 1fr;gap:0 60px}
    #Service_area .aboutLeft::after{height:570px;width:570px;top:100px;right:-110px;z-index:-1}
    #Service_area .aboutLeft::before{height:410px;width:410px;top:160px;right:-20px}
    section .title_box .page_title{font-size:56px}
    #Service_area .title_box .page_title{margin-bottom:30px}
    #Service_area .aboutArea .aboutRight p{font-size:22px}
    #Service_area .linkList li .Img img{width:74px}
    #people .Img img{width:100%;aspect-ratio:1/ 1;object-fit:cover}
}
@media screen and (max-width:1440px){
	#ProgramsArea{padding:13vw 0}
    #about_area .workframe{margin-right:0;width:92%}
    #Service_area .linkList{padding:40px 20px}
    #Service_area .linkList li .Img{height:120px}
    #ProgramsArea::before{max-width:85%}
    #ProgramsArea .workframe{padding:0;width:82%;grid-template-columns:260px 1fr}
    #ProgramsArea .ProgramsList{margin-top: 0;}
#ProgramsArea .ProgramsList li .Txt{
    padding-top: 58px;
}
}


@media screen and (min-width:1281px){
	section .more_btn a:hover:before, #product_area .more_btn a:hover:before,#people .more_btn a:hover:before{background-color: var(--triadic1);}
	.more_btn a:hover font{color: #fff;}
    #Service_area .linkArea .more_btn.white a:hover{width: 260px;}
    #mainArea .mainAreaBG:before{content:'';width: 1px;height: 100%;background: var(--white);position: absolute;left: 10.5vw;top: 0;z-index: 2;opacity: .1;}
    #mainArea .mainAreaBG:after{content:'';width: 1px;height: 100%;background: var(--white);position: absolute;right: 5.5vw;top: 0;z-index: 2;opacity: .1;}
}

@media screen and (max-width:1280px){
	section .title_box{margin-bottom:0px}
	section .title_box .page_title,#book_area .title_box .page_title,#about_area .areaTitle .title_box h2{font-size:46px}
    #about_area .areaTitle .title_box h2{margin-top:0}
    #ProgramsArea .ProgramsList .title_box .left{margin-bottom:20px}
    #product_area .title_box{grid-template-columns:1fr 270px}
    #Service_area .linkList{padding:30px 30px;grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1201px){
	#Service_area::before{content:"";position:absolute;background-image: url(/images/39/img-ad-01.png);background-size: cover;background-repeat:no-repeat;background-position:100% 100%;top: 0;right: 0;width: 60px;height: 70%;z-index:11;-webkit-animation:birdJitter 3s ease-in both infinite;animation:birdJitter 3s ease-in both infinite}
	#ProgramsArea{background-attachment: fixed;}
    #about_area:before{position:absolute;display:block;bottom: 150px;left:0px;content:"";background-image: url(/images/39/img-ab-01.png);background-repeat:no-repeat;z-index:2;height: 80px;width:100%;border-radius:0 100px 100px 0}
    #product_area .title_box .left{order:1}
	#Service_area::after{content:"";position:absolute;background-image: url(/images/39/img-ad-bg.png);background-size: cover;background-repeat:no-repeat;background-position:100% 100%;bottom: -160px;right: 0px;width: 1410px;height: 640px;z-index: 0;}
}

@media (max-width:1200px){
	.more_btn a{padding: 10px 30px 10px 20px;}
	#Service_area{}
	#Service_area .workframe{display:flex;flex-direction:row;flex-wrap:wrap}
	#Service_area .contactBox{margin-bottom:50px;width:calc(100% - 20px);padding:0 10px}
	#imglist .img_nav{position:relative}
	#Service_area .linkArea{width: auto;padding: 60px 20px;}
	#Service_area .aboutArea{align-items:end;gap: 0 20px;grid-template-columns: 490px 1fr;}
	#about_area .about_logo{margin:50px auto;width:200px}
	#linkArea .list_box .right{width:calc(100% - 310px)}
	#linkArea .Txt .title{font-size: 22px;}
	#product_area{padding: 5vw 0  6vw 0;}
	#product_area .title_box{display:flex;flex-direction:column;align-items: center;gap: 20px;width: 100%;}
	#product_area .title_box .right{display:flex;flex-direction:column;align-items:flex-start}
	#product_area .title_box .right h3{font-size: 22px;}
    #product_area .title_box .right .noteBox{margin:0;text-align:center;font-size:15px}
    #about_area .aboutArea{grid-template-columns:1fr;gap:40px 0}
    #about_area .workframe{margin-right:auto;width:90%}
    #about_area .media_box .video_box:before,#about_area .deck02{display:none}
    #about_area{background-position:50% 50%;padding:8vw 0}
    #about_area .media_box .video_box video{height:auto}
    #Service_area .title_box .page_title{margin-bottom:20px}
    #Service_area .aboutArea{grid-template-columns:1fr}
    #Service_area .aboutLeft{order:2}
    #Service_area .linkArea::after{content:"";position:absolute;background-image:url(/images/39/img-ad-bg.png);background-size:cover;background-repeat:no-repeat;background-position:100% 100%;bottom:-160px;right:0px;width:1410px;height:640px;z-index:-1}
    #Service_area .linkArea .more_btn.white a{width:320px}
    #Service_area .aboutLeft .Img img{aspect-ratio:4 / 3;width:100%;object-fit:cover}
    #Service_area .aboutLeft::before,#Service_area .aboutLeft::after{display:none}
    #Service_area .linkList li .Txt{margin-top:14px}
    #Service_area .linkList li .Txt h2{font-size:19px}
    #people .peopleBox .Txt{padding:40px}

}

@media screen and (max-width:1024px){
	section .title_box .page_title,#about_area .areaTitle .title_box h2{font-size:42px;margin-top: 0;}
	#Service_area .aboutArea .aboutRight{padding: 0 0 40px;}
    #ProgramsArea{padding: 5vw 0 5vw 0;}
    #people .peopleBox .Txt .textEditor{padding:0 0 60px;width:100%}
    #people .loop_wrap .text{font-size:6.625rem}
    #people .loop_wrap{bottom:-40px}
}

@media (min-width:961px){
	#ProgramsArea .ProgramsList{display:grid;grid-template-columns: repeat(3,1fr);grid-gap: 60px;align-items: start;}
}
@media (max-width: 960px){
	#ProgramsArea .ProgramsList{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-gap:25px}
	#ProgramsArea{padding:10vw 0 14vw 0}
	#Service_area .linkList{padding: 0px 0px 50px 0px;}
	#about_area .areaTitle .title_box p{font-size: 16px;padding: 20px 0 30px 0;}
	#product_area .productBG{background-size:cover;background-position:16% 50%}
	#product_area{padding: 10vw 0 6vw 0;}
	#product_area .list_box #imglist .img_nav{display:none}
	#product_area .list_box #imglist{display:flex;flex-direction:column;gap:30px;margin-top:20px}
	#product_area:before{top:auto;bottom:0;height:40%;width:100%;border-radius:0}
	#product_area .bottombtn{display:flex;flex-direction:column;align-items:center;margin:20px 10px 0;width:calc(100% - 20px);gap:20px}
    .bottombtn .productbtn{width:120px}
    #product_next::after{top:6px}
    #ProgramsArea::before{display:none}
    #ProgramsArea .workframe{display:grid;align-items:start;grid-template-columns:1fr;gap:30px 0}
    #ProgramsArea .ProgramsList li::before{left:-30px}
    #ProgramsArea .ProgramsList li::after{left:-26px}
    #ProgramsArea .ProgramsList li .Txt p{font-size:18px}
    #ProgramsArea .title_box .page_title,#ProgramsArea .title_box p{text-align:center}
    #people .peopleBox{grid-template-columns:1fr}
    #people .peopleBox .Txt .textEditor{padding:0 0 40px}
}
@media screen and (max-width:640px){
	.bottombtn .productbtn img{width: 16px;}
	#product_next::after{top: 1px;}
	#ProgramsArea .ProgramsList{grid-template-columns: repeat(1,1fr);grid-template-rows: repeat(1,1fr);grid-gap: 30px;padding-left: 40px;}
	#ProgramsArea .ProgramsList li .Txt{padding: 20px 0px 20px;width: calc(100% - 0px);}
}