/* section */
section{padding: 7vw 0;}
section >*{z-index:5}
section .title_box .page_title{font-weight: 400;font-size: 30px;letter-spacing: 6px;position: relative;font-family:'Cormorant', sans-serif;line-height: 110%;margin-bottom: 40px;}
section .title_box .subtitle{color: var(--triadic1);font-family:"Cormorant",sans-serif;font-size: 70px;font-weight: 600;line-height: 1.03;padding-bottom: 20px;word-spacing: 100vw;}
section .title_box p{line-height: 170%;letter-spacing: 0.5px;font-weight: 500;font-size: 20px;color: var(--complement);position: relative;}
section.bg_box{background:no-repeat 50% / cover;}
.more_btn{margin-top:0px;position: relative;}
.more_btn:before{content:"";height:100%;width:0;display:block;position:absolute;bottom:0;left:0px;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background-color: var(--complement);}
.more_btn:hover:before{width:100%;}
.more_btn a{position:relative;overflow:hidden;width: 120px;padding: 12px 50px 12px 30px;display:inline-block;border-radius: 100px;}
.more_btn font{font-size: 16px;position:relative;color:#fff;font-family: 'Cormorant', sans-serif;text-transform: uppercase;text-align: left;font-weight: 400;letter-spacing: 1px;text-align: center;}
header .barBox #webmenu{display:none}
header.scroll .barBox #webmenu{display:block}
#product_tabs .more_btn b{top:50%;left:50%;transform:translate(-50%,70%);position:absolute;width:65px;height:30px}
.more_btn b::before{content:"";position:absolute;top:calc(50% - 0px);right:25px;width:18px;height:2px;background:#fff}
.more_btn b::after{content:"";position:absolute;top:calc(50% - 5px);right:25px;width:10px;height:10px;border-top:2px solid #fff;border-right:2px solid  #fff;transform:rotate(45deg)}
.more_btn 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: var(--triadic1);}

/* service_area */
#service_area{position:relative;z-index: 10;}
#service_area:before{content:'';position:absolute;left:80px;top:0;background:rgb(25 37 50 / 32%);background-size:cover;background-repeat:no-repeat;width:1px;height:100%;opacity:0.5}
#service_area:after{content:'';position:absolute;left: 0;top:0;background: rgb(255 255 255);background-repeat:no-repeat;width: 540px;height:100%;z-index: -1;}
#service_area .bg{position:absolute;width:100%;height:100%;background-image:url(/images/39/serviceBg.jpg);background-repeat:no-repeat;background-position:100% 50%;background-size:auto;top:0;right:0;z-index:-3}
#service_area .workframe{z-index:2;width:min(90%,1400px);margin-left:120px}
#service_area .serviceT{position:absolute;top:0%;left:50%;z-index:-3}
#service_area .tit article{width:42%;line-height:2;text-align:justify;font-weight:300}
#product_tabs{display:grid;grid-template-columns:240px 1fr;justify-content:space-between;align-items:center}
#product_tabs .tabs{display:flex;flex-direction:column;align-items:flex-start}
#product_tabs .tabs li{width:100%;padding:10px 0;position:relative}
#product_tabs .tabs li::before{content:"";width:0;height:1px;display:block;background-color:rgb(25 37 50 / 32%);position:absolute;top:calc(50% - 0.5px);left:-40px;opacity:0.5}
#product_tabs .tabs li.active::before{width:25px}
#product_tabs .tabs li.active a,#product_tabs .tabs li.active:hover a{color:var(--primary);font-size:18px}
#product_tabs .tabs li a{display:grid;grid-template-columns: 1fr;color:#888888;font-size: 17px;letter-spacing:2px;font-weight:400;align-items:center;justify-content:space-between}
#product_tabs .tabs li b{font-family:"Lato",serif;color:#898989;font-size:17px;position:relative;display:flex;align-items:center;display:none;}
#product_tabs .tabs li b:after{content:'';position:absolute;width:1px;height:15px;background:#ddd;right:13px}
#product_tabs .tabs li:hover svg{transform:rotate(0deg)}
#product_tabs .tab_content{padding:0px 0px 60px 50px}
#product_tabs .tab_content .linkList{display:grid;grid-template-columns:repeat(2,1fr);gap:170px;align-items:center}
#product_tabs .tab_content .txtItem *{color:var(--triadic1)}
#product_tabs .tab_content .linkList .img_scale img{aspect-ratio:3 / 4.3;width:430px}
#product_tabs .tab_content .img_scale:before{position:absolute;left:-50px;bottom:-50px;content:"";width: 78%;height:100%;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);background-color:var(--triadic1);z-index:-1}
#product_tabs .tab_content .more_btn{background:var(--triadic1);color:var(--white);position:absolute;top:36%;left:39%;font-family:'Cormorant',sans-serif;padding: 30px 25px 50px;width: 55px;display:flex;flex-direction:column;align-content:center;align-items:center;text-align:center}
#product_tabs .tab_content .more_btn b svg{width:15px;height:15px;fill:#e6ecf2;transform:rotate(45deg)}
#product_tabs .tab_content .info_box{padding-left:80px}
#product_tabs .tab_content .info_box h3{font-size: 22px;font-weight:500;margin-bottom:20px;letter-spacing:4px;position:relative;display:flex;align-items:center;gap:15px}
#product_tabs .tab_content .info_box h3 em{font-family:'Cormorant',sans-serif;font-style:initial;letter-spacing:2px;font-size: 26px;text-transform:uppercase}
#product_tabs .tab_content .info_box h3 span{content:'';display:block;width:32px;height:1px;background:var(--triadic1)}
#product_tabs .tab_content .info_box article{font-size: 20px;-webkit-line-clamp:4;text-align:justify;font-weight:400;margin-bottom:60px;letter-spacing:2px}
#service_area .serviceimg1,#service_area .serviceimg2{position:absolute;top:0;right:0;transform:translate(30%,-35%);z-index:-1}
#service_area .serviceimg2{transform:translate(-50%,185%);}

/* about_area */
#wrap{position:relative}
#about_area{padding:22vw 0 0 0;position:relative;background-image:url(/images/39/img-SustainableBg.jpg);background-size:auto;background-position:30% -50%}
#about_area .workframe{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:80px}
#about_area .fixTxt{position:absolute;top:-320px;left:36%}
#about_area .leftBox .Img{padding:0 80px 0 0}
#about_area .leftBox .Img:before{content:'';position:absolute;left:0;top:-80px;background:#ededed;background-size:cover;background-repeat:no-repeat;width:100%;height:110%}
#about_area .rightBox{display:grid;grid-template-columns:repeat(2,1fr);align-items:start}
#about_area .rightBox .topGroup{margin:30px 0 100px 0}
#about_area .rightBox .topGroup .more_btn{background:var(--triadic1);color:var(--white);padding:10px 60px 10px 20px;position:relative;margin-top:50px}
#about_area .rightBox .topGroup .more_btn b{position:absolute;top:50%;right:-10px}
#about_area .rightBox .topGroup article h3{font-weight:400;font-size:26px;margin-bottom:20px}
#about_area .rightBox .topGroup article  .Txt{line-height:200%;letter-spacing:1px;font-size:18px}
#about_area .rightBox .sidePeople{position:absolute;bottom:0;right:0;width:30%;margin-right:auto;display:flex;justify-content:flex-end}
#about_area .slogan{color:#87909b;font-size:14px;opacity:0.7;font-family:"Cormorant",sans-serif;width:310px;position:absolute;top:-79px;right:110px}
#about_area .about_icon *{transition:unset;-webkit-transition:unset}

/* linkArea */
#Service_area{overflow:hidden;position:relative;padding: 2vw 0 9vw 0;}
#Service_area .workframe{width:100%}
#Service_area .aboutArea{display:grid;grid-template-columns:1fr 50%;width:100%;align-items:center}
#Service_area .aboutLeft{margin-right:-90px}
#Service_area .aboutArea .aboutRight{background-color:#e9e9e9;padding: 70px 70px 130px;position:relative;overflow:hidden}
#Service_area .linkArea{background-color:#fff;width:70%;position:absolute;right:0;bottom: -150px;}
#Service_area .linkList{padding: 40px 30px;}
#Service_area .linkList li{position:relative;height: 190px;padding: 10px 20px;}
#Service_area .linkList li:after{content:'';position:absolute;right: 0px;top:0;width:1px;height:100%;background:#dbdbdb;opacity:.6}
#Service_area .linkList li:last-child:after{display:none}
#Service_area .linkList li .noBox{position:absolute;color:#122f6f;opacity:.2;font-size:35px;top:50%;right:0;transform:translate(-50%,-50%);width:37px}
#Service_area .linkList li .Img img{aspect-ratio:1 / 1;width:65px;object-fit:contain}
#Service_area .linkList li .Txt{margin-top:20px}
#Service_area .linkList li .Txt  h2{color:var(--triadic2);font-size: 22px;line-height: 130%;margin-bottom: 10px;}
#Service_area .linkList li .Txt p{color:#9196a2;font-size: 16px;}

/* cooperate_area */
#cooperate_area{padding:5vw 0;display:none}
#cooperate_area .title_box .subtitle{word-spacing:normal;text-align:center}
#cooperate_area .title_box .page_title{text-align:center}
#cooperate_area .partner{margin:30px 0 0}
#cooperate_area .partner ul li .item{position:relative;padding:50px 0 0}
#cooperate_area .partner ul li .item::before{content:"";width:1px;height:50px;display:block;background-color:#ededed;position:absolute;top:65%;right:20px;transform:translate(0,-65%)}
#cooperate_area .partner ul li:last-child  .item::before{display:none}
#cooperate_area .partner ul li .Img{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
#cooperate_area .partner ul li .Img img{aspect-ratio:4 / 3;object-fit:contain;width:150px;filter:grayscale(1);opacity:.5}
#cooperate_area .area_title h2{margin-top:-20px;text-align: center;}

@media screen and (max-width: 1680px) {
	#service_area .photoBox{width: 11%;}
	#service_area .serviceimg1 img, #service_area .serviceimg2 img{width: 75%;}
	#service_area .serviceimg1,#service_area .serviceimg2{right:-130px}
	#service_area .serviceimg2{transform:translate(-50%,305%)}
}
@media screen and (max-width:1560px){
	#service_area .photoBox{display:none}
	#product_area .workframe{grid-template-columns:30% 65%}
	#product_area:after{bottom:-79px}
	#product_area .top_bg{width:100%}
	section .title_box .subtitle{font-size:60px}
	#about_area .rightBox .sidePeople{width:30%}
	#service_area .serviceimg1 img,#service_area .serviceimg2 img{width:60%}
	#service_area .serviceimg1,#service_area .serviceimg2{right:-130px}
	#service_area .serviceimg2{transform:translate(-50%,295%)}
}
@media screen and (max-width:1440px){
	#Service_area{padding:2vw 0 20vw 0}
	#Service_area .linkArea{bottom:-220px}
	#service_area .area_title{margin:0}
	#about_area{padding:23vw 0 0 0}
	#about_area .fixTxt{top:-230px}
	#service_area .serviceT img,#about_area .fixTxt img{width:75%}
	section .title_box .page_title{margin-bottom:20px}
	section .title_box .page_title,#about_area .rightBox .topGroup article h3{font-size:24px}
	#about_area .rightBox .topGroup{margin:50px  30px}
	#product_tabs .tab_content .info_box{padding-left:0}
}

@media screen and (min-width:1281px){
	.more_btn.white a:hover font{color:#ffffff}
	.more_btn.white a:hover{width:150px}
	#about_area::after{content:"";display:block;position:absolute;background-image:url(/images/39/img-banner02.png);background-repeat:no-repeat;background-size:contain;height:330px;width:330px;bottom:-220px;right:200px;z-index:0;animation-name:circle;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:50s;opacity:.4}
	#cooperate_area .partner ul li:hover .Img{transform:translate(0em,-2em)}
	#cooperate_area .partner ul li:hover .Img img{filter:none;opacity:1}
}

@media screen and (max-width:1280px){
	section .title_box{margin-bottom:0px}
	header .barBox #webmenu,header.scroll .barBox #webmenu{display:none}
	#service_area .serviceimg1,#service_area .serviceimg2,#about_area .rightBox .sidePeople{display:none}
	#about_area .workframe{gap:40px}
	#about_area .rightBox{grid-template-columns:1fr}
	#cooperate_area .partner ul li .item{padding:0}
	#product_tabs .tab_content .linkList{gap:110px}
}
@media (min-width:1201px){
	#Service_area .aboutArea .aboutRight p{width:80%}
	#Service_area .aboutArea .aboutRight::after{content:"";display:block;position:absolute;background-image:url(/images/39/icon-service-01.png);background-repeat:no-repeat;background-size:contain;height:184px;width:236px;bottom:-20px;right:-40px;z-index: -1;}
}

@media (max-width:1200px){
	#Service_area{padding:0vw 0px 5vw 0}
	#Service_area .workframe{display:flex;flex-direction:row;flex-wrap:wrap}
	#Service_area .contactBox{margin-bottom:50px;width:calc(100% - 20px);padding:0 10px}
	#Service_area .linkArea{position:relative;width:100%;bottom: 1px;}
	#Service_area .aboutArea{align-items:end}
    #Service_area .aboutArea .aboutRight{padding: 70px 70px 70px;}
	#fly-could img,#fly-could02 img,#fly-could03 img,#fly-could04 img,#fly-could05 img{width:46%}
	.more_btn a{padding:6px 30px 6px 20px}
	#imglist .img_nav{position:relative}
	#product_area:before{display:none;}
    #product_area #product_list li >div .more_btn{display:none;}
	#product_area .video-bg video{width:auto;height: 100%;}
	#product_area #product_list li .info_box{display: block;}
	#product_area .btn{left: unset;right:0;}
	#product_area .workframe{display: block;width: 80%;margin: 0 auto;}
	#product_area .area_title{margin-bottom: 5vw;}
	#productlist{display:none;}
    #product_tabs .tab_content .linkList{grid-template-columns:1fr;gap:70px}
	#product_tabs .tab_content .more_btn{left:auto;right:60px}
	#product_tabs{gap:70px}
	#product_tabs .tab_content .linkList .img_scale img{width:auto}
}
@media screen and (min-width: 1025px){
    #product_list li:first-child{grid-column: 1 / 4;background: #fff;position: relative;}
    #product_list li:first-child:after{content:'';position: absolute;width: 100%;height: 5px;background: var(--primary);bottom: 0;right: 0;}
    #product_list li:first-child >div{display:grid;grid-template-columns: 50% 50%;justify-content: space-between;align-items: center;}
    #product_list li:first-child >div img{position:relative;z-index: 2;}
    #product_list li:first-child .info_box{padding: 60px;display: flex;align-items: flex-start;gap: 20px;}
    #product_list li:first-child .info_box p{margin: 0;-webkit-line-clamp: 3;}
    #product_list li:first-child .info_box h3{font-size:26px;color: var(--primary);font-weight: 600;letter-spacing: 2px;}
}
@media screen and (max-width:1024px){
	#Service_area .aboutArea .aboutRight{padding:40px 30px}
	#about_area .slogan{right: 30px;}
	#service_area .workframe{margin:0 auto;}
    #service_area:before{display:none;}
    #product_list{grid-template-columns: repeat(2, 1fr);gap: 35px;}
    #product_area .tit article{text-align:center;}
    #product_area .tit{display:flex;flex-direction: column;align-items: center;gap: 20px;margin-bottom: 9vw;}
    section .title_box .subtitle{font-size:52px}
	section .title_box .page_title,#about_area .areaTitle .title_box h2,#about_area .rightBox .topGroup article h3,#conBox .tit h2{font-size:28px}
	#cooperate_area{padding:9vw 0 0 0}
	#about_area .workframe{grid-template-columns:1fr;gap:0}
	#about_area .leftBox .Img:before,#about_area .slogan,#service_area .serviceT img,#about_area .fixTxt img{display:none}
	#about_area .leftBox .Img,#about_area{padding:0}
	#service_area:after{width:280px}
}

@media (min-width:961px){
	.bottombtn{position:absolute;bottom:60px;right:0}
}
@media (max-width: 960px){
    section .titleBox .subtitle{font-size:31px}
	#Service_area .aboutArea{grid-template-columns:1fr}
	#Service_area .linkList{padding:20px 0px}
	#about_area .areaTitle .title_box p{width:90%}
	#service_area .area_title{width:90%;margin: 0 auto;}
	#service_area .custom_list li img { width: 45vw; height: 45vw; }
	#service_area .arrow_btns_box .arrow { bottom: 20vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 25vw; }
	#service_area .arrow_btns_box .arrow.next { right: 25vw; }
    #product_tabs{grid-template-columns:1fr;gap:40px}
	#product_tabs .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0px 10px}
	#product_tabs .tab_content .img_scale:before{left:-30px;bottom:-30px}
	#product_tabs .tab_content{padding:0px 0px 30px 30px}
	#product_tabs .tab_content .info_box article{margin-bottom:0}
	#product_tabs .tab_content .more_btn{right:0}
}
@media screen and (max-width:640px){
	.bottombtn .productbtn img{width: 16px;}
	#product_next::after{top: 6px;}
	#fly-could img,#fly-could02 img,#fly-could03 img,#fly-could04 img,#fly-could05 img{width: 37%;}
	#service_area .tit article{width:100%;}
    #service_area .tit article{width:100%;}
	#service_area .area_title{width: 80%;margin: 20px auto 0;}
	#service_area:after{height: 100%;width: 100%;background: rgb(247 247 247);}
	#service_area .custom_list li img { width: 60vw; height: 60vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 15vw; }
	#service_area .arrow_btns_box .arrow.next { right: 15vw; }
	#service_area .arrow_btns_box .arrow { bottom: 30vw; }
	#product_area .btn{position:relative;margin-top: 30px;}
	#product_area .info_box p{margin-bottom:15px}
    section .title_box .page_title, #about_area .areaTitle .title_box h2, #about_area .rightBox .topGroup article h3,#conBox .tit h2{font-size: 24px;}
}
@media screen and (max-width:550px){
	#service_area .area_title .other_txt{line-height:1.3}
	#service_area:before{zoom: 70%;}
	#service_area .custom_list li img { width: 80vw; height: 80vw; }
	#service_area .custom_list li .info_box h3 { height: 1.5em; font-size: 7vw; }
	#service_area .arrow_btns_box .arrow.prev { left: 5vw; }
	#service_area .arrow_btns_box .arrow.next { right: 5vw; }
	#product_area:after{display:none;}
    #product_list{grid-template-columns:1fr;gap: 15px;}
    #product_area .tit article{width:100%;}
	#product_area{padding: 20vw 0 3vw;margin: 0;}
	#product_area .workframe { flex-wrap: wrap; }
	#product_area .area_title.left { width: 100%; }
	#product_area .area_title.arrow_btns_box { margin-bottom: 1rem; width: 100%; justify-content: end; }
	#product_area #product_list li >div {margin: 30px 0 0;}
}