/* section */
section{padding:5vw 0}
section >*{z-index:5}
section .title_box{margin-bottom: 10px;}
section .title_box font{font-weight: 700;font-size: 55px;color: var(--black);position: relative;font-family: 'Quantico', sans-serif;text-transform: uppercase;line-height: 130%;}
section .title_box font::first-letter{color:var(--primary)}
section .title_box .page_title{text-transform: uppercase;line-height: 130%;letter-spacing: 2px;font-weight: 600;font-size: 26px;color: var(--black);padding-left: 70px;position: relative;}
section .title_box .page_title::after{content:"";width:55px;height:9px;background-image:url(/images/39/img-bn-icon01.png);opacity:1;position:absolute;top:50%;left:0;transform:translate(-50%,-50%);-webkit-transform:translateY(-50%)}
section.bg_box{background:no-repeat 50% / cover;}
.more_btn{margin-top:0px}
.more_btn a{position:relative;overflow:hidden;width: 130px;padding: 10px 50px 10px 30px;display:inline-block}
.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: 14px;position:relative;-webkit-writing-mode:inherit;-ms-writing-mode:inherit;writing-mode:inherit;color:#fff;font-family: 'Quantico', sans-serif;font-weight: 500;}
.more_btn.white span::after{position:absolute;content:"";width: 100px;height: 1px;background-color: #afafaf;top: 25px;right: -20px;}

.more_btn.white a:before{content:"";height:100%;width: 100%;display:block;position:absolute;bottom:0;left: -35px;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background-color: #5e5e5e;-webkit-transform: skewX(40deg);-ms-transform: skewX(40deg);transform: skewX(40deg);}
.more_btn.white a::after{content:'';position:absolute;height:100%;width:100%;top:0;right: 40px;background-color: #90c31f;-webkit-transform: skewX(40deg);-ms-transform: skewX(40deg);transform: skewX(40deg);z-index:-1;transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}

/* about_area */
#wrap{position:relative}
#about_area{padding: 5vw 0 5vw 0;position: relative;}
#about_area .aboutBG{content:'';position:absolute;height: 130%;width: 15%;top: 0;left: 170px;background: #d9eab4;z-index: 0;-webkit-transform: skewX(-30deg);-ms-transform: skewX(-30deg);transform: skewX(-30deg);}
#about_area .nowrap_box{margin-right:auto;flex-direction:row-reverse;justify-content:flex-end;align-items:center;}
#about_area::after{content:"";width: 1906px;height: 2086px;display:block;background-image: url(/images/39/img-ab-bg.png);background-size: cover;background-repeat:no-repeat;position:absolute;bottom: -530px;left: 330px;z-index: -1;}
#about_area::before{content:"";width: 455px;height: 576px;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;top: -270px;right: -140px;z-index:1}
#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: center;justify-content: space-around;}
#about_area .aboutArea  .areaTxt{padding-left: 50px;padding-top: 50px;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 .Txt{padding-top: 30px;position:relative;-webkit-transition-delay:300ms;transition-delay:300ms}
#about_area .aboutArea .ImgCenter .Img{margin-left:0px;position:relative;overflow:hidden}
#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%;}


/* product_area */
#product_area{padding:5vw 0 15vw 0}
#product_area .title_box{display:flex;justify-content:space-between}
#product_area .title_box .right{display:flex;align-content:space-between;flex-direction:column;justify-content:space-between;align-items:flex-end}
#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{margin-top:60px}
#product_area li{margin:0px 20px}
#product_area li .row{position:relative;margin-bottom:20px;box-shadow:8px 8px 15px rgba(0,0,0,0.1)}
#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_box{transform:scale(1)}
#product_area li  .row .info_box{background-color:#fff;padding:40px 30px;width:auto}
#product_area li .row .info_box:after{content:"";position:absolute;right:0px;bottom:0;border-bottom:160px solid #90c31f;border-left:110px solid transparent;text-indent:-9999px;width:0;height:0;-webkit-transition:all 0.8s;transition:all 0.8s;z-index:-1}
#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:'Quantico',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:#90c31f}
#product_area li .row .info_box h2{font-size:20px}
#product_area li .row:after{position:absolute;right:-20px;bottom:-20px;content:"";background-image:url(/images/39/index-product-mask-bg.png);background-size:contain;background-repeat:no-repeat;background-position:100% 100%;width:100%;height:100%;z-index:-1}

/* process_area */
.list_box .info_box h3{height:30px;font-weight:500;font-size:17px;color:#3a4856}
#process_area{position:relative;background: url(/images/39/img-s-bg-2.png) no-repeat center/cover;background-color: #90c31f;padding: 180px 0px 0px;margin-bottom: 80px;}
#process_area .list_box{display:flex;align-items:flex-start;justify-content:flex-end}
#process_area .list_box .left{width:300px;position:absolute;left:-170px;background-color:#5e5e5e;padding:50px 50px 50px 120px}
#process_area .list_box .right{width:calc(100% - 360px)}
#process_area::before{content:'';position:absolute;height:470px;width:75%;top:-150px;left:0px;background:url(/images/39/img-s-bg.png) no-repeat center / cover;background-position:0% 50%;background-size:cover;opacity:1;z-index:1}
#process_area::after{content:'';position:absolute;height:100%;width:80%;top:90px;right:0;background:#ffffff;opacity:1;z-index:3}
#process_area .applicationList{display:flex;flex-wrap:wrap;width:100%}
#process_area .applicationMList{border:1px solid rgba(220,220,220,0.25)}
#process_area .applicationItem{width:calc((100% / 6) - 2px);padding:0;margin:0px 0 20px 0}
#process_area .applicationItem:hover .Img{-ms-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}
#process_area .applicationItem.title .item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding:50px 25px 54px 25px}
#process_area .applicationItem.title .item .more_btn{position:relative}
#process_area .more_btn.white a::after{background-color:#ffffff}
#process_area .more_btn.white a:hover font{color:#ffffff}
#process_area .more_btn.white font{color:#003b71}
#process_area .title_box font,#process_area .title_box .page_title{color:var(--white)}
#process_area .applicationItem:not(.title) .item{}
#process_area .item{position:relative}
#process_area .item .atag_item{z-index:10}
#process_area .Img{margin:auto;position:relative}
#process_area .Img img{display:block;object-fit:contain}
#process_area .Txt{position:relative;z-index:2;text-align:center}
#process_area .Txt .title{display:inline-block;font-size:20px;font-weight:500}
#process_area .Txt .subtitle{color:#fff;font-size:15px;font-weight:400;letter-spacing:1px;padding-top:26px;padding-right:0px}
#process_area .Txt .text{height:85.5px;color:#e9eef5;font-size:15px;line-height:1.9;letter-spacing:0.7px;margin-top:17px}
#process_area .Txt .subtitle{font-size:15px}
#process_area .Txt .text{font-size:14px}
#process_area .moreBtn{padding-top:23px}
#process_area .moreBtn a{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;width:98px;color:#fff;font-weight:700;letter-spacing:0.01em;z-index:1}
#process_area .moreBtn a::after{content:"";position:absolute;top:calc(50% - 7.5px);right:-10px;width:20px;height:17px;background:url("/images/39/arrow_right_white.png") no-repeat center/cover;z-index:1;-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%)}
#Service_area{background-image:url(/images/39/img-b-bg.png);background-size:cover;overflow:hidden;position:relative;padding:8vw 0 6vw 0}
#Service_area:after{position:absolute;width:100%;height:100%;background:linear-gradient(to top,#ffffff00 45%,rgb(235 235 235) 91%);top:0;left:0;z-index:1;content:"";opacity:1}
#Service_area .workframe{display:flex}
#Service_area .contactBox{width:320px;margin-right:20px}
#Service_area .noteBox{width:75%;margin:30px 0;line-height:190%}
#Service_area .more_btn{}
#Service_area .linkArea{width:calc(100% - 380px);padding:0 10px}
.linkArea{overflow:hidden;}
.linkArea .linkList{display:flex;flex-direction:row}
.linkArea .linkItem{padding: 0 10px;}
.linkArea .item{position:relative}
.linkArea .Img{position:relative;overflow:hidden;background-color: #fff;}
.linkArea .Img img{}
.linkArea .Img img{width:100%;height: 310px;object-fit: contain;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.linkArea .Txt{margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight: 500;padding: 25px 30px;background-image: url(/images/39/img-s-t-bg.png);height: 50px;}
.linkArea .title{font-size:34px;letter-spacing:1px;color:var(--white);position:relative;font-family:'Quantico',sans-serif;text-transform:uppercase;line-height: 130%;}
.linkArea .subtitle{letter-spacing:0.5px;font-size: 18px;font-weight:500;text-align: center;}
.linkArea .btn1{position:absolute;bottom:11px;left:calc(50% - 30.5px);width:61px;z-index:1}
.linkArea .btn1::before{background-color:#fff}
.linkArea .btn1 a{width:100%;background-color:#fff}
.linkArea .btn1 a::before{background:url("/images/39/arrow_right_white.png") no-repeat center/cover}
.linkArea .link{width:100%;height:100%;margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2}
.linkArea .link:hover + .btn1 a::before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.linkArea .link:hover ~ .Img img{-webkit-transform:scale(1.1);transform:scale(1.1)}


/*button*/
.btn1{position:relative}
.btn1::before{content:"";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;background-color:#839acc;z-index:1}
.btn1.center{text-align:center}
.btn1.full a{width:100%;margin:0}
.btn1 a{position:relative;display:block;width:61px;height:61px;border-radius:50%;background-color:#375981;z-index:2}
.btn1 a::before{content:"";position:absolute;top:calc(50% - 9.5px);left:calc(50% - 11px);width:22px;height:19px;background:url("../images/icon/arrow_right_white.png") no-repeat center/cover;z-index:1}



@media screen and (max-width: 1640px){
	footer .workframe {width: 80%;display: flex;justify-content: space-between;}
	#about_area .deck02{right:190px}
}
@media screen and (max-width:1440px){
	#about_area .aboutArea .ImgCenter:before{right:60px}
}
@media screen and (max-width:1366px){
	#about_area .aboutArea .ImgCenter .ImgTop{right:-30px}
	#about_area .aboutArea .ImgCenter .ImgBottom{right:-100px}
}
@media screen and (min-width:1281px){
	.more_btn.white a:hover font{color:#ffffff}
	.more_btn.white a:hover{width:150px}
	#product_area:before{position:absolute;display:block;top:-380px;right:0px;content:"";background:rgb(167 167 167 / 40%);z-index:2;height:620px;width:270px;-webkit-transform:skewX(-30deg);-ms-transform:skewX(-30deg);transform:skewX(-30deg)}
	#product_area:after{position:absolute;display:block;bottom:30px;left:160px;content:"";background:hsl(78.18deg 37.08% 82.55% / 50%);z-index:2;height:390px;width:330px;-webkit-transform:skewX(-30deg);-ms-transform:skewX(-30deg);transform:skewX(-30deg)}
	#Service_area .serviceBG{}
	#Service_area .serviceBG:after{position:absolute;display:block;top:0;right:-300px;content:"";background:#ecf1e0;z-index:2;height:100%;width:72%;-webkit-transform:skewX(-30deg);-ms-transform:skewX(-30deg);transform:skewX(-30deg)}
	#Service_area:before{position:absolute;display:block;top:-70px;right:50%;content:"";background:rgb(144 195 31 / 30%);z-index:2;height:440px;width:190px;-webkit-transform:skewX(-30deg);-ms-transform:skewX(-30deg);transform:skewX(-30deg)}
	#product_area .row:hover .info_box{transform:scale(1)}
	.linkArea .linkItem .Img::before{content:"";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0;height:0;border:1px solid #90c31f;z-index:1}
	.linkArea .linkItem:hover .Img::before{width:calc(100% - 20px);height:calc(100% - 20px)}
	#product_area .row:hover .info_box:after{border-bottom:290px solid #90c31f}
}

@media screen and (max-width:1280px){
	#process_area .list_box .left{left:-110px;padding:50px 20px 50px 110px;width:260px}
	section .title_box font:last-child{font-size: 46px;}
	#about_area .aboutArea .ImgCenter:before{bottom:90px;left:30px;height:290px}
	#about_area.tooolong .aboutArea .ImgCenter:before{width:430px}
	section .title_box{margin-bottom: 0px;}
}
@media (min-width:1201px){
	#process_area .applicationMList{display:none}
	#process_area .applicationItem::before{content:"";position:absolute;top: 80px;right: -60px;width: 160px;height: 1px;background-color: #3d3d3d;pointer-events:none;transition:all 0.5s;opacity: 1;z-index: 0;}
	#process_area .moreBtn a:hover::after{-webkit-animation:arrowAnimation 1s ease-out infinite;animation:arrowAnimation 1s ease-out infinite}
	#process_area .applicationItem:nth-child(6)::before,#process_area .applicationItem:nth-child(11)::before{display: none;}
	.linkArea .link:hover + .btn1::before{-webkit-animation:btnHover 1.4s linear infinite forwards;animation:btnHover 1.4s linear infinite forwards}
	.btn1:hover::before{-webkit-animation:btnHover 1.4s linear infinite forwards;animation:btnHover 1.4s linear infinite forwards}
	.btn1:hover a::before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
}

@media (max-width:1200px){
	.linkArea{margin-bottom:30px}
	.linkArea .Img::before{width:calc(100% - 36px);height:calc(100% - 36px)}
	.linkArea .Txt{padding:30px 30px;width:calc(100% - 60px)}
	.linkArea .title{font-size:24px}
	.linkArea .btn1{width:43px}
	.linkArea .btn1 a{height:43px}
	.linkArea .btn1 a::before{top:calc(50% - 6.5px);left:calc(50% - 7.5px);width:15px;height:13px}
	#about_area .aboutArea{display:flex;flex-direction:column}
	#about_area .aboutArea .areaTxt{width:auto;margin-bottom:30px;padding-left:0;padding-top:50px}
	#about_area .aboutArea .ImgCenter .Img{margin-left:0;margin-top:0}
	#about_area .aboutArea .ImgCenter .Img video{width:100%;height:100%}
	#about_area .deck02{display:none}
	#about_area .aboutArea .ImgCenter .ImgBottom,#about_area.tooolong .aboutArea .ImgCenter:before{display:none}
	#about_area.tooolong .aboutBG{height:540px;width:23%;left:90px}
	#about_area .img_item{width:auto;margin-bottom:30px}
	#about_area .aboutArea .ImgCenter .ImgTop{right:-60px}
	#about_area .aboutArea .bottom{padding-left:0;margin-bottom:0;width:auto}
	#about_area::before{top:auto;right:0;width:470px;height:172px;bottom:0;background-size:contain;background-repeat:no-repeat}
	#Service_area{padding:3vw 0 6vw 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{width:calc(100% - 0px);padding:0px}
	#product_area{padding:8vw 0 22vw 0}
	#process_area .list_box .right{width:calc(100% - 310px)}
	#process_area .Txt .title{font-size:18px}
	#process_area .applicationItem{width:calc((100% / 4) - 2px)}
	#product_area .title_box{display:flex;flex-direction:column;align-items:flex-start}
	#product_area .title_box .right{display:flex;flex-direction:column;align-items:flex-start}
	#product_area .title_box .right .noteBox{margin:20px 0}
}

@media screen and (max-width:1024px){
	section .title_box font{font-size:18px}
	section .title_box .page_title{font-size: 27px;}
}
@media (max-width: 960px){
	#process_area .Txt .subtitle{padding-right:80px}
	#process_area .title_box font::first-letter{text-align:center;display:block}
	#process_area .applicationItem.title .item .more_btn{text-align:center}
	#process_area{background-position:70% 50%;padding:0px 0px 0px;margin-top:220px;margin-bottom:40px}
	#process_area .workframe{width:100%}
	#process_area .item{height:auto}
	.linkArea .linkList{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
	#process_area .applicationItem{width:calc((100% / 3) - 2px);padding:0px 0px}
	.linkArea .linkItem{margin-bottom:20px}
	#product_area .productBG{background-size:cover;background-position:16% 50%}
	#product_area{padding:12vw 0 14vw 0}
	#process_area::before{top:-220px;width:100%;background-position:30% 50%}
	#process_area .list_box .left{position:relative;left:0;width:calc(100% - 80px);padding:30px 40px}
	#process_area .list_box{display:flex;flex-direction:column}
	#process_area .workframe{position:relative}
	#process_area::after{top:0;width:100%}
	#process_area .list_box .right{width:90%;margin:10px auto}
}
@media (min-width:961px){
	#process_area .applicationMList::before{content:"";position:absolute;top:0;left:calc(50% - 0.5px);width:1px;height:100%;background-color:rgba(220,220,220,0.25)}
}
@media screen and (max-width:640px){
	section .title_box .page_title{font-size: 21px;}
	.more_btn a{width: 140px;padding:10px 30px 10px 20px}
	#about_area{padding: 10vw 0 5vw 0;}
	#process_area .applicationItem{width:calc((100% / 2) - 2px);margin:0px 0 10px 0}
}