#wrap{z-index:5}

/* section */
section{padding:5vw 0}
section >*{z-index:3}
section .title_box{padding-bottom:3vw;font-size:65px;font-family:'Montserrat',sans-serif;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;color:transparent;font-weight:600}
section .h3title_box{font-size:30px}
section .clip{margin:auto;width:100%}
section .clip img{height:100%}
section .clip iframe{width:100%;height:100%;top:0;left:0}
section .clip video{width:auto;height:100%;top:50%;left:50%}

/* 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%}

/* product_area */
#product_area{background:#f5f5f5}
#product_area .workframe{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;margin-bottom:80px}
#product_area .titlebox{display:flex;flex-wrap:wrap;align-items:flex-end}
#product_area .titlebox h2{padding:0;line-height:110%;margin-right:20px}

/* product_sub_list */
#product_sub_list >div{margin:auto;width:100%}
#product_sub_list li{background:var(--white);box-shadow:0 0 15px rgb(0 0 0 / 5%);margin:15px;padding:70px 50px}
#product_sub_list li >a{z-index:1}
#product_sub_list li:after{content:'';width:100%;height:7px;position:absolute;bottom:0;left:0;background:linear-gradient(90deg,var(--primary),var(--secondary));z-index:0}
#product_sub_list li:hover:after{height:100%}
#product_sub_list li .clip{margin-bottom:30px;z-index:1}
#product_sub_list li h3{font-size:20px;text-align:center;margin:20px 0 10px;font-weight:600;height:auto;z-index:1;position:relative}
#product_sub_list li:hover h3,#product_sub_list li:hover article{color:#fff}
#product_sub_list li p{text-align:center}
#product_sub_list li p a{display:inline-block;background:linear-gradient(90deg,var(--primary),var(--secondary));position:relative;z-index:2;color:var(--white);font-size:15px;padding:5px 15px}
#product_sub_list li:hover p a{background:var(--white);color:var(--primary)}
#product_sub_list li article{font-weight:300;-webkit-line-clamp:2;font-size:15px;height:auto;color:var(--info);z-index:1;position:relative}

/* product_list */
#product_list{width:600px}
#product_list li .clip{height:690px;-webkit-clip-path:url(#clip_product);clip-path:url(#clip_product)}
#product_list li .info_box >div{margin:auto;width:80%}
#product_list li .info_box h3{height:auto;font-size:20px}
#product_list li .info_box p{margin-right:10px;font-weight:300}
#product_list li .info_box p:first-letter{margin-right:2px;font-size:12px}

/* about_area */
#about_area{overflow:hidden;position: relative;}
#about_area .workframe{display:flex;flex-wrap:wrap;justify-content:space-between}
#about_area .workframe >div{margin:0;width:45%}
#about_area .title_box{padding-bottom:0}
#about_area #about_info h2{font-size:30px;word-break:keep-all;padding-right:15%}
#about_area #about_info article{margin-bottom:30px;line-height:210%;letter-spacing:2px;font-weight:400;margin-top:50px;text-align:justify;width:100%}
#about_area .four >div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin:35px 0}
#about_area .four .clip{width:80px;height:80px;background:linear-gradient(90deg,var(--primary),var(--secondary));margin:0;display:inline-flex;justify-content:center;align-items:center;border-radius:50px}
#about_area .four >div:hover .clip{background:linear-gradient(90deg,var(--triadic1),var(--triadic2))}
#about_area .four .clip img{width:40px;height:40px}
#about_area .four .info{width:calc(100% - 120px)}
#about_area .four .info h3{font-size:20px}
#about_area .four .info h3 b{font-size:15px;background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;color:transparent;font-family:'Roboto',sans-serif;margin-left:10px;font-weight:500}
#about_area .four >div:hover .info h3 b{background:linear-gradient(90deg,var(--triadic1),var(--triadic2));color:transparent;-webkit-background-clip:text}
#about_area .four .info article{font-size:14px;color:#524f4f;text-align:justify}

/* custom_area */
#custom_area ul li >div{margin:auto;width:70%}
#custom_area ul li .clip{width:250px;height:250px;-webkit-clip-path:url(#clip_custom);clip-path:url(#clip_custom)}
#custom_area ul li h3{margin:10px 0 5px;font-size:20px}
#custom_area ul li article{font-weight:300;font-size:14px}

/* news_area */
#news_area:after{content:url(/images/44/news-bg.png);position:absolute;left: -10%;top: -35%;-webkit-animation-name:circle;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-duration:30s}
@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)}}
@-moz-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)}}
@-ms-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)}}
@-o-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)}}
@-webkit-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)}}
#news_area{overflow:hidden}
#news_area .workframe{width:1300px;display:flex;flex-wrap:wrap;justify-content:space-between}
#news_area .left{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
#news_area .title_box{padding:0;line-height:130%}
#news_area .right{width:calc(100% - 550px)}
#news_area li .img_box{background-color:#f9f9f9}
#news_area li:after{content:'';width:100%;height:5px;display:block;margin:40px 0;background:linear-gradient(to right,#dadada,#dadada 2px,transparent 2px,transparent 4px);background-repeat:repeat-x;background-size:4px 1px;background-position:50% 50%;border-right:1px solid #dadada;border-left:1px solid #dadada}
#news_area li:last-child:after{display:none}
#news_area li .info_box{margin:10px 0;display:flex;flex-wrap:wrap;align-items:center}
#news_area li .time{width: 95px;font-weight:400;font-size:14px;font-family:'Roboto',sans-serif}
#news_area li .more_btn{margin:0 25px 0 10px;padding:4px 15px;max-width:calc(100% - 105px);height:22px;font-weight:100;font-size:14px;z-index:6;border:0;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:0;color:#fff}
#news_area li h3{height:auto;line-height:150%;font-size:18px;-webkit-line-clamp:1;width: calc(100% - 220px);}

/* book_area */
#book_area .titlebox{display:flex;margin-bottom: 70px;flex-wrap: wrap;align-items: flex-end;}
#book_area .title_box{display:flex;padding: 0;line-height: 110%;}
#book_area .h3title_box{margin-left: 15px;}
#book_area li h3{margin-top:10px;height: auto;font-size: 20px;text-align: left;color: #fff;font-weight: 500;}
#book_area li .info{bottom: 5%;width: 90%;left: 5%;}
#book_area li .info a{position:relative;font-size: 14px;z-index: 2;background: linear-gradient(90deg,var(--primary), var(--secondary));padding: 5px 20px;color: #fff;}
#photo_area .item{width:260px;height:110px}
#photo_area .item img{height:100%}
#book_area li .img_box:after{content:'';background: linear-gradient(0deg,rgb(20 20 20 / 20%), rgb(0 0 0 / 0%));position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;}

@media screen and (max-width:1400px){
	#news_area .workframe{width:90%;}
}
@media screen and (max-width: 1024px){
	#product_list{margin:auto}
	#about_area #about_info h2{padding:0;}
	#news_area .workframe{display:block;}
	#news_area .right{width:100%;margin-top: 70px;}
	#news_area .left{flex-direction: row;align-items: flex-end;}
	#about_area .workframe{display:block;}
	#about_area .workframe >div{width:100%;}
	#about_area .four{display:flex;flex-wrap: wrap;justify-content: space-between;}
	#about_area .four >div{width: 47%;}
}
@media screen and (max-width:980px){
	#product_list{width:500px}
	#product_list li .clip{height:590px}
	#about_area #about_info{margin-bottom:8vw}
	#about_area .about_sub_2{top:auto;bottom:35vw;width:35vw}
	#about_area .about_sub_3{width:29vw;left:10vw}
}
@media screen and (max-width:760px){
	#product_sub_list li{width:150px}
	#product_sub_list li .clip{height:150px}
	#product_list{width:70vw}
	#product_list li .clip{height:80vw}
	#product_list li .info_box{width:45vw;height:30vw}
}
@media screen and (max-width:550px){
	#news_area .left .more_btn{display:none;}
	#product_area .workframe{margin-bottom: 40px;}
	#product_area .titlebox{margin-bottom:30px;}
	section{padding:50px 0;}
	#product_sub_list li{margin:10px;width:35vw}
	#product_sub_list li .clip{height:35vw}
	#product_list{width:90vw}
	#product_list li .clip{height:100vw}
	#product_list li .info_box{width:55vw;height:40vw}
	#about_area .about_sub_2{bottom:60vw}
	#news_area li .row{margin: 0 10px;}
	section .title_box{font-size: 50px;}
	#about_area #about_info h2, section .h3title_box{font-size: 22px;}
	#book_area .h3title_box{margin: 0;display: block;}
	#about_area .four >div{width:100%;margin: 20px 0;}
	#about_area .four .info{width: calc(100% - 100px);}
	#news_area li h3{width: 100%;margin-top: 10px;}
	#news_area li:after{margin:20px 0;}
	#book_area li .row{margin:0;}
}