@import url('/css/animate.css');

.wow { animation: fadeIn 1.5s both; -webkit-animation: fadeIn 1.5s both; animation-duration: 1s; -webkit-animation-duration: 1s; animation-name: fadeInUp; -webkit-animation-name: fadeInUp; }

/* section */
section {padding: 2vw 0 5vw;}
section>* { z-index: 3; }
section .title_box { margin-bottom: 10px; }
section .title_box font { text-transform: uppercase; line-height: 120%; letter-spacing: 2.4px; font-size: 48px; font-weight: 500; color: var(--complement); font-family: "Poppins", sans-serif; }
section .title_box font:last-child { margin-left: 15px; color: #569ce3; }
section .title_box h2 {text-align: left;line-height: 120%;font-weight: 700;color: var(--complement);position: relative;font-family: 'Poppins', sans-serif;text-transform: uppercase;}
section .title_box h2:first-letter { color: #003ca6; }
section.bg_box { background: no-repeat 50% / cover; background-attachment: fixed; padding: 0; }
section.bg_box:after { background: -webkit-linear-gradient(bottom, rgba(var(--secondary-rgb), 1) 0%, rgba(var(--secondary-rgb), .7) 100%); background: linear-gradient(to top, rgba(var(--secondary-rgb), 1) 0%, rgba(var(--secondary-rgb), .7) 100%); opacity: 1; }
section .title_box b {position: relative;margin: 0px 0 30px;display: inline-block;}
section .title_box b::after {content: '';position: absolute;z-index: 1;width: 80px;height: 14px;-webkit-animation: 1s tWaveAni linear infinite;animation: 1s tWaveAni linear infinite;background: url("/images/39/titleWaveLine.png") 0 0;}

.more_btn { margin-top: 0px; }
.more_btn a { position: relative; width: 150px; height: 150px; display: flex; background-color: #0970d9; text-align: center; border-radius: 100%; flex-direction: column; align-items: center; justify-content: center; }
.more_btn font { text-align: left; text-transform: uppercase; letter-spacing: 2px; color: #ffffff; font-size: 14px; font-weight: 300; }
.more_btn.white a, .more_btn.white font { letter-spacing: 2px; font-size: 12px; position: relative; -webkit-writing-mode: inherit; -ms-writing-mode: inherit; writing-mode: inherit; }
.more_btn.white a:before { content: ""; width: 0; height: 2px; background: #4f3c30; display: block; position: absolute; bottom: 3px; left: 0; -webkit-transform: translate(0, 5px); -ms-transform: translate(0, 5px); transform: translate(0, 5px); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
.more_btn.white span { display: none; }

section .track { position: absolute; bottom: -30px; left: -40px; z-index: 1; }
section .track p { font-weight: 800; font-size: 450px; margin: 0; text-transform: uppercase; letter-spacing: 2px; line-height: 1; will-change: transform; color: #ffffff00; -webkit-text-stroke: 1px #dbdbdb; }

.advantageArea {position: relative;background: url(/images/39/img_aboutBg.png) #ffffff no-repeat bottom;padding: 70px 0 0;}

/* about_area */
#about_area {position: relative;padding: 6vw 0 2vw;}
#about_area .title_box { position: relative; }
#about_area .nowrap_box {display: flex;align-items: flex-start;flex-direction: row;width: var(--width-xxl);padding-bottom: 220px;}
#about_area .nowrap_box .deck02, #about_area .nowrap_box .deck03 { position: absolute; z-index: 0; }
#about_area .nowrap_box .deck02 {left: -340px;top: 320px;}
#about_area .nowrap_box .deck02 img, #about_area .nowrap_box .deck03 img { width: 80%; }
#about_area .nowrap_box .deck03 { top: -210px; left: -310px; }
#about_area .nowrap_box .info_item { text-align: left; width: 41%; }
#about_area .aboutAreaBG { position: absolute; height: 110%; width: 0; bottom: 0px; right: 0; background: #f7f7f7; z-index: -1; transition: all 3.1s ease-in-out; -webkit-transition: all 3.1s ease-in-out; }
#about_area .img_item { margin-bottom: 10px; order: 1; width: 80%; position: absolute; right: -370px; top: -110px; }
#about_area .bgMask video { width: 100%; z-index: 10; }
#about_area .img_item img { width: 100%; }
#about_area .info_item article { margin-bottom: 50px; line-height: 180%; letter-spacing: 0.5px; font-weight: 300; color: #000; width: 85%; }

#about_area .info_item article .info h3 { padding: 0 0 20px 0; font-size: 26px; color: #494949; font-weight: 400; letter-spacing: 2.5px; line-height: 160%; }
#about_area .info_item article .info p {width: 100%;margin-top: 10px;line-height: 200%;letter-spacing: 1px;font-weight: 400;font-size: 16px;}
#about_area .info_item article .textEditor h2 { font-size: 20px; padding-bottom: 20px; }
#about_area .info_item article .textEditor p { line-height: 180%; font-weight: 400; }
#about_area.tooolong .aboutAreaBG { width: 100%; }
#about_area .more_btn { position: absolute; right: -120px; top: 0; z-index: 10; }

/* keyword_area */
#keyword_area{width:100%}
#keyword_area ul .keyword_box{opacity: 0.5;-webkit-transform:scale(0.9);transform:scale(0.9)}
#keyword_area ul .keyword_box .item .Img{margin: 0px 0;padding:15px;position:relative;display:flex;justify-content:center;align-items:center}
#keyword_area ul .keyword_box .item h3{font-weight:500;line-height:170%;font-size:26px;padding:0 0 10px;margin-top:10px;position:relative;text-align:center}
#keyword_area ul .keyword_box .item article{text-align:center;font-size:18px}
#keyword_area ul .keyword_box:nth-child(2){-webkit-transform: scale(1.05);transform: scale(1.05);opacity:1}
#keyword_area ul .keyword_box:nth-child(2) h3{font-size:30px;color:#0970d9;}
#keyword_area ul .keyword_box:nth-child(2):hover h3{
    animation: bubblehover 1.2s 0.4s;
}
@keyframes bubblehover {
  0% {
    transform: scale(1, 1);
  }
  15% {
    transform: scale(1, 0.7);
  }
  35% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.8);
  }
  60% {
    transform: scale(0.7, 1);
  }
  65% {
    transform: scale(1, 1);
  }
  70% {
    transform: scale(1, 1);
  }
  75% {
    transform: scale(0.95, 0.95);
  }
  85% {
    transform: scale(1.05, 1.05);
  }
  90% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
#keyword_area ul .keyword_box .item h3 .arrow{position:absolute;top:calc(50% - 10.5px);right:10px}
#keyword_area ul .keyword_box .item h3 .arrow::after{content:"";width:6px;height:1px;background-color:#646464;position:absolute;bottom:calc(50% - 3px);right:0;transform:rotate(-45deg)}
#keyword_area ul .keyword_box .item p{font-family:'Poppins',var(--font-family),sans-serif;color:#b6b6b6}
#keyword_area .slick-prev{left:-25px}
#keyword_area .slick-next{right:-25px}
.list_box .info_box h3 { height: 30px; font-weight: 400; font-size: 18px; color: #101010; margin: 0px 0 0; }

/* service_area */
#service_area {margin: 0;position: relative;padding: 2vw 0 2vw 0;}
#service_area .serviceBox { padding: 0; position: relative; }
#service_area .info_item .title_box p { position: absolute; right: -310px; }
#service_area .info_item {display: flex;margin-bottom: 10px;}
#service_area .title_box{width: 100%;text-align: center;display: flex;flex-direction: column;align-items: center;}
#service_area .title_box h2 { line-height: 100%; }
section .title_box h3 { text-align: center; font-size: 26px; color: #494949; font-weight: 400; letter-spacing: 2.5px; line-height: 160%; }
#service_area .title_box b { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
#service_area .track { left: 250px; top: -30px; }

/* product_area */
#product_area .slick-list {padding: 38px 20px 60px;}
#product_area ul .productv_box {position: relative;margin: 20px 11px;-webkit-filter: drop-shadow(12px 12px 7px rgb(0 0 0 / 40%));filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 33%));border: white 3px solid;}
#product_area ul .productv_box.slick-active{
    opacity: 1;
}
#product_area ul .productv_box{
    opacity: 0;
}
#product_area ul .productv_box .info_box { display: flex; flex-direction: column; align-items: center; padding: 10px; }
#product_area .row .img_box img{
    height: 370px;
    -webkit-filter: drop-shadow(12px 12px 7px rgb(0 0 0 / 40%));
    filter: drop-shadow(12px 12px 7px rgb(0 0 0 / 40%));
}
#product_area ul .productv_box:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	/* background: #0069b7b0; */
}
#product_area ul .productv_box:after {content: '';position: absolute;left: 0;bottom: 0;z-index: -1;width: 100%;height: 100%;background-image: url(/images/39/img-p-bg.png);-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#product_area ul .productv_box .itemtitle {width: 100%;margin-top: 10px;/* background: #fffffff2; */padding: 8px 0;}
#product_area ul .productv_box .itemtitle h3, #product_area ul li .itemtitle article { text-align: center; color: #000; }
#product_area ul .productv_box .more_btn { bottom: -100px; transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); }
#product_area ul .productv_box .more_btn a { width: 100px; height: 100px; }
#product_area .slick-prev{top: 50%;background-image: url(/images/39/icon-pre.png);width:34px;height: 68px;z-index:8;left: -65px;}
#product_area .slick-next{background-image:url(/images/39/icon-next.png);width:34px;height: 68px;top: 50%;right: -65px;z-index:8}
#product_area .slick-prev:before,#product_area .slick-next:before{display:none}

/* secabout_area */
#secabout_area .track{top:-190px;bottom:auto;left:auto;right:0}
#secabout_area .img_item{display:none}
#secabout_area:before {position: absolute;width: 100%;height: 57%;background: #f7f7f7;bottom: 14%;left: 0;content: "";}
#secabout_area:after {position: absolute;width: 100%;height: 106%;background: url(/images/39/img-ab01.png) no-repeat 0 0;background-position: 0px 50%;background-size: contain;top: -10px;left: 0;content: "";}
#secabout_area .workframe { display: flex; justify-content: flex-end; align-items: center; }
#secabout_area .about_row .title_box >div { display: flex; align-items: center; }
#secabout_area .about_row .title_box b{width: 70px;margin: 0 30px 16px 0;}
#secabout_area .about_row {width: 600px;padding: 4vw 0 7vw;}
#secabout_area .about_row .item{margin:80px 0 0  70px;position:relative}
#secabout_area .about_row .item .slogn_list{display:flex}
#secabout_area .about_row .item .slogn_list li{display:flex;flex-direction:column;width:calc(100% / 4);position:relative}
#secabout_area .about_row .item .slogn_list li .iconBox{position:relative;width:80px;height:80px}
#secabout_area .about_row .item .slogn_list li:hover .iconBox img{-webkit-transform:scale(0.8);transform:scale(0.8)}
#secabout_area .about_row .item .slogn_list li .iconBox::before,#secabout_area .about_row .item .slogn_list li .iconBox::after{content:"";position:absolute;top:0;left:0;z-index:1;border:1px solid #0970d9;border-radius:50%;pointer-events:none;-webkit-transform:scale(0.7);transform:scale(0.7);opacity:0}
#secabout_area .about_row .item .slogn_list li .iconBox::before{width:calc(100% + 24px);height:calc(100% + 24px);margin-top:-12px;margin-left:-12px}
#secabout_area .about_row .item .slogn_list li:hover  .iconBox::before,#secabout_area .about_row .item .slogn_list li:hover .iconBox::before{opacity:0.5;-webkit-transform:scale(1);transform:scale(1);-webkit-transition-delay:0.1s;transition-delay:0.1s}
#secabout_area .about_row .item .slogn_list li:hover .iconBox::after,#secabout_area .about_row .item .slogn_list li:hover .iconBox::after{opacity:0.05;-webkit-transform:scale(1);transform:scale(1);-webkit-transition-delay:0.3s;transition-delay:0.3s}
#secabout_area .about_row .item .slogn_list li img{width:80px;height:80px;object-fit:contain}
#secabout_area .about_row .item .slogn_list li font{color:#5f5f5f;padding:30px 0 0}
#secabout_area .about_row .item .slogn_list li p{color:var(--primary);font-size:22px}
#secabout_area .about_row .item h4{padding:50px 0 20px 0;font-size:26px;color:var(--primary);font-weight:500;letter-spacing:2.5px;line-height:160%}
#secabout_area .more_btn{left:-210px;bottom:110px}


#new_area{padding:0vw 0 0}
#news_area{padding:5vw 0 0}
#news_area .nowrap_box li .info_box{padding:50px 90px;border:1px solid #efefef;border-bottom:0px;border-right:0px}
#news_area .nowrap_box li .info_box p font{color:#50a3f8;font-family:"Poppins",sans-serif;font-size:14px}
#news_area .nowrap_box li .info_box h3{font-size:19px;letter-spacing:0.5px;font-weight:500}
#news_area .nowrap_box li .info_box article{color:#666666;font-size:17px}
#news_area .slick-next{width: 50px;height: 50px;display: flex !important;align-items: center;justify-content: center;background: #0970d9;z-index: 222;box-shadow: 0 0 5px rgb(0 0 0 / 15%);right: 545px;bottom: 50px;top: auto;border-radius: 100%;}
#news_area .slick-next:before{content:'>';font-family: 'Lato', sans-serif;font-weight: bold;color: #fff;}
#news_area .slick-prev{width: 50px;height: 50px;display: flex !important;align-items: center;justify-content: center;background: #0970d9;z-index: 222;box-shadow: 0 0 5px rgb(0 0 0 / 15%);left: 545px;bottom: 50px;top: auto;border-radius: 100%;position: absolute;}
#news_area .slick-prev:before{content:'<';font-family: 'Lato', sans-serif;font-weight: bold;color: #fff;}


@-webkit-keyframes tWaveAni { 0% { background-position-x: 0; } 100% { background-position-x: 27px; } }
@keyframes tWaveAni { 0% { background-position-x: 0; } 100% { background-position-x: 27px; } }
@keyframes bgWhirligig-2 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

@media screen and (max-width: 1680px) {
	#about_area .img_item{right:-110px;top:-30px;width:60%}
}
@media screen and (max-width: 1440px) {
	#about_area .nowrap_box{width:90%;padding-bottom:110px}
	#about_area.tooolong .aboutAreaBG{height:116%}
	#about_area .nowrap_box .deck03{top:-50px;left:-140px}
	#about_area .img_item img{width:95%}
	#about_area .nowrap_box .deck02 img,#about_area .nowrap_box .deck03 img{width:65%}
	#about_area{padding:2vw 0 2vw}
	#about_area .nowrap_box .deck02{left:-310px;top:290px}
	section .track p{font-size:370px}
	#service_area{padding:4vw 0 2vw 0}
	section .title_box font{font-size:42px}
	section .title_box h3,#about_area .info_item article .info h3,#secabout_area .about_row .item h4{font-size:22px}
	#secabout_area:after{width:100%;height:98%;top:-80px}
	#secabout_area:before{bottom:120px;height:58%}
	#news_area .slick-prev{left:375px}
	#news_area .slick-next{right:375px}
	#news_area .nowrap_box li .info_box{padding:40px 30px}
	#secabout_area .more_btn{left:-120px}
	#secabout_area .about_row{width:520px}
}
@media screen and (max-width: 1366px) {
	.more_btn a{width:110px;height:110px}
	#secabout_area .more_btn{left:-80px}
	#keyword_area ul .keyword_box:nth-child(2) h3{font-size:24px}
	#keyword_area ul .keyword_box .item h3{font-size:22px}
	#keyword_area ul .keyword_box .item article{font-size:16px}
}
@media screen and (min-width: 1281px) {
	.more_btn.white a:hover { color: #fff; }
	.more_btn.white a:hover { background-color: #569ce3; transform: scale(1.064); }
	#about_area .d_flex { align-items: center; }
	#keyword_area ul {padding: 60px;}
	#keyword_area ul .keyword_box {margin: 0 20px;position: relative;}
	#about_area .nowrap_box { z-index: 9; }
	#product_area ul .productv_box:hover:after {/* left: -10px; *//* bottom: -35px; *//* width: calc(100% + 20px); *//* height: calc(100% + -50px); *//* -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.15); */box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);}
	#product_area ul .productv_box:hover { transform: translate(0%, -10%); }
	#product_area ul .productv_box:hover .more_btn {transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);bottom: -115px;}
}
@media screen and (max-width: 1280px) {
	section .title_box font{font-size:26px;letter-spacing:0.4px}
	#about_area .nowrap_box{margin-right:120px}
	#about_area .img_item{left:70px}
	#about_area .img_item:before,#about_area .img_item img{width:100%}
	#about_area .img_item img{height:100%}
	section .title_box h2{margin-top:10px}
	section .title_box h3{font-size:18px}
	#news_area .nowrap_box li .info_box h3{font-size:17px}
	#news_area .nowrap_box li .info_box article{font-size:15px;margin:5px 0 0}
	#product_area .slick-list{padding:0px 20px 30px}
	#product_area ul .productv_box{margin:0px 20px}
	#service_area{padding:4vw 0 3vw 0}
	#about_area .nowrap_box{display:flex;flex-direction:column;align-items:flex-start;width:90%;margin:auto;padding:0px 0 0;align-content:flex-start}
	#about_area:before,#about_area::after{display:none}
	#about_area .nowrap_box .info_item,#about_area .img_item{margin:0;width:100%;position:relative;left:0}
	#about_area .img_item{margin-bottom:40px;right:0;top:10px}
	#about_area .info_item article{width:100%;padding:0;margin-bottom:20px}
	#about_area .more_btn{right:-10px}
	#about_area .nowrap_box:before,#about_area .title_box p,#about_area .nowrap_box .deck02,#about_area .nowrap_box .deck03,section .track,#about_area.tooolong .aboutAreaBG,#productBox .info .title_box::after{display:none}
	#about_area .img_item img{height:330px;width:620px;object-fit:cover}
	.more_btn a{width:90px;height:90px}
	.advantageArea{padding:30px 0 0}
	#secabout_area:after{width:100%;height:97%;top:0px}
	#secabout_area .about_row .item .slogn_list li img{width:60px;height:60px}
	#secabout_area .about_row .item .slogn_list li .iconBox::before{
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin-top: -14px;
    margin-left: -14px;
}
		#secabout_area .about_row .item .slogn_list li .iconBox::after{width:calc(100% + 40px);height:calc(100% + 40px);margin-top:-20px;margin-left:-20px}

	#secabout_area .about_row .item .slogn_list li font{padding:10px 0 0}
	#secabout_area .about_row .item .slogn_list li p{font-size:19px}
	#secabout_area .about_row .item h4{padding:20px 0 20px 0}
	#secabout_area:before{bottom:50px;height:62%}

}
@media screen and (max-width: 1140px) {
	#news_area .slick-prev{left: 275px;}
	#news_area .slick-next{right:275px}
	#secabout_area:after{width:100%;height:92%;top:0}
	#secabout_area .about_row .item{margin:40px 0 0 50px}
	#secabout_area .about_row{padding:4vw 0 4vw}
#product_area .slick-prev{width: 14px;height: 68px;left: -5px;}
#product_area .slick-next{width: 14px;height: 48px;top: 50%;right: -5px;z-index:8;background-position: right;}
}
@media screen and (max-width: 1024px) {
	#about_area{padding:0vw 0 4vw}
	#about_area .img_item{width:100%;margin:0 0 30px auto;order:inherit}
	#about_area .img_item:before{border:0;top:0;right:0;z-index:2}
	#about_area .info_item{margin-top:0px;z-index:4}
	#about_area::after{top:-283px;width:950px;height:870px}
	#secabout_area:after,#secabout_area:before{display:none}
	#secabout_area .about_row{width:90%;padding:4vw 0 0;margin:auto}
	#secabout_area .about_row .item{margin:40px 0 0 0px}
	#secabout_area .more_btn{left:auto;right:0;bottom:auto;top: 10px;}
	#secabout_area .workframe{display:flex;flex-direction:column;align-items:flex-start;width:100%}
	#secabout_area .img_item{display:block;width:100%}
	#secabout_area .img_item img{width:100%;object-fit:cover}
}

@media (min-width: 961px) {
	#secabout_area .about_row .item .slogn_list li .iconBox::after{width:calc(100% + 56px);height:calc(100% + 56px);margin-top:-28px;margin-left:-28px}
}
@media (max-width: 960px) {
	#secabout_area .about_row .item .slogn_list li .iconBox::after{width: calc(100% + 20px);height: calc(100% + 20px);margin-top: -22px;margin-left: -22px;}
	.list_box .info_box h3 { margin: 0; }
	#news_area .slick-prev{left: 185px;}
	#news_area .slick-next{right: 185px;}
	#news_area .nowrap_box li .info_box{padding: 30px 20px;}
}
@media screen and (max-width: 640px) {
	#about_area { padding: 7vw 0 10vw; }
	#about_area .img_item { width: 100%; }
	#about_area .img_item:before { background: rgba(var(--secondary-rgb), 0); }
	#about_area .info_item { margin-top: 40px; }
	#about_area::after { top: -370px; background-position: top; }
	#about_area:before { right: -160px; top: 330px; background-size: 90%; background-repeat: no-repeat; }
	#about_area .info_item article .info h3 { font-size: 22px; padding: 5px 0 0px 0; }
	#about_area .img_item img { height: 270px; width: 100%; }
	#news_area .slick-prev{left: -105px;bottom: auto;top: 60%;}
	#news_area .slick-next{right: -105px;bottom: auto;top: 60%;}
	#news_area .nowrap_box li .info_box{padding: 40px 40px;}
	#keyword_area ul .keyword_box:nth-child(2){-webkit-transform:scale(0.9);transform:scale(0.9);opacity:0.7}
	#keyword_area ul .keyword_box:nth-child(2) h3{font-size:22px;color:#000000}
	#keyword_area ul .keyword_box:nth-child(3){-webkit-transform:scale(1.0);transform:scale(1.0);opacity:1}
	#keyword_area ul .keyword_box:nth-child(3) h3{font-size:30px;color:#0970d9}
}
@media screen and (max-width: 380px) {
		.more_btn a{width: 60px;height: 60px;}
	#secabout_area .more_btn{
    top: 25px;
}
}