/* section */
section { position: relative; padding: 7vw 0 3vw; z-index: 3; }
section .section_area { padding: 0 6vw; }
section .title_box h3 { position: relative; font-family: 'Noto Serif', sans-serif; line-height: 110%; font-weight: 500; font-size: 37px; color: #474343; z-index: 2; }
section .title_box h4 { position: relative; font-weight: 300; font-size: 25px; color: #373737; z-index: 2; }
section .title_box .number { line-height: 100%; font-family: 'NexaLight'; font-size: 145px; color: #ebeaea; z-index: 1; }
section .more_tag { padding: 20px 27px; background: #292929; border-right: 1px #fff solid; z-index: 2; }
section .more_tag {position: relative;display: block;overflow: hidden;padding-right: 20px;padding-left: 20px;height: 25px;font-size: 16px;text-align: left;text-decoration: none;-webkit-transition: color .4s ease,background .4s ease;transition: color .4s ease,background .4s ease;cursor: pointer;-webkit-mask-image: radial-gradient(#fff,#000);mask-image: radial-gradient(#fff,#000);cursor: pointer;}
section .more_tag:hover {color: #fff;background: #703673;}
section .more_tag:after,section .more_tag:before {z-index: 1;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-transition: -webkit-transform .4s ease;transition: -webkit-transform .4s ease;transition: transform .4s ease;transition: transform .4s ease,-webkit-transform .4s ease;-webkit-transform-origin: 0 50%;transform-origin: 0 50%}
section .more_tag:hover:before {-webkit-transform: translateX(110%) skewX(30deg);transform: translateX(110%) skewX(30deg);-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;}
section .more_tag:before {background: hsl(0deg 0% 90% / 25%);}
section .more_tag:before {z-index: 2;-webkit-transform: translateX(-110%) skewX(30deg);transform: translateX(-110%) skewX(30deg)}
section .more_tag font { margin-right: 135px; display: inline-block; color: #fff; }
section .more_tag span { position: relative; width: 34px; height: 1px; background: #bbb; display: inline-block; }
section .more_tag span:before , section .more_tag span:after { position: absolute; width: 5px; height: 1px; background: #bbb; display: block; top: 0; right: 0; content: ""; -webkit-transform-origin: right; transform-origin: right; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
section .more_tag span:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* about_box */
#about_box { overflow: hidden; }
#about_box #treeCanvas { top: 89px; left: 299px; -webkit-transform-origin: center; transform-origin: center; }
#about_box .origin { font-family: 'Noto Serif', sans-serif; letter-spacing: 8px; font-size: 28px; color: #474343; top: 25%; left: -30px; -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform-origin: right bottom; transform: rotate(-90deg); }
#about_box .origin:before { position: absolute; width: 1px; height: 140px; background: #cacaca; bottom: 0; left: -20px; content: ""; }
#about_box .aboutus {font-family: 'Noto Serif', sans-serif;line-height: 100%;letter-spacing: 6px;font-size: 132px;color: #f0f0f0;top: 0px;right: -8px;-webkit-transform-origin: right top;-webkit-transform: rotate(-90deg);transform-origin: right top;transform: rotate(-90deg);z-index: 0;}
#about_box .aboutus:after {position: absolute;width: 95px;height: 365px;background: rgb(81 8 84 / 80%);display: block;right: -50px;top: -180px;content: "";}
.bgTxt { position: absolute; z-index: 1; }
.bgTxt.stitle {-webkit-writing-mode: vertical-lr;riting-mode: vertical-lr;font-size: 70px;}
.bgTxt.title { width: 100%; text-align: right; font-size: 140px; color: #edf1f3; }

#about_box .row { width: 50%; display: inline-block; }
#about_box .row .img_box { position: relative; text-align: right; }
#about_box .row .img_box img { width: 38vw; height: 29vw; }
#about_box .row .img_box:after { position: absolute; width: 38vw; height: 29vw; border: 1px #dcdcdc solid; display: block; right: 40px; bottom: 25px; content: ""; }
#about_box .row.left_box .more_tag {bottom: 40px;width: 250px;}
#about_box .row.right_box { margin: 0 0 0 5vw; max-width: calc(50% - 10vw); }
#about_box .row.right_box .title_box { margin-bottom: 50px; padding-bottom: 50px; }
#about_box .row.right_box .title_box h4 svg { top: calc((100% - 16px) / 2); right: 0; }
#about_box .row.right_box .title_box .number { top: -57px; left: 230px; }
#about_box .row.right_box .title_box:after { position: absolute; width: 82px; height: 1px; background: #6d6d6d; display: block; left: 0; bottom: 0; content: ""; }
#about_box .row.right_box article { margin-bottom: 10px; text-align: left; font-weight: 300; line-height: 200%; color: #373737; }

/* newsBox */
#newsBox { padding: 0 10px; width: 530px; height: calc(100% - 10vw); top: 7vw; left: calc((100% - 550px) / 2); z-index: 2; }
#newsBox:before , #productBox .row.right_box ul li .list_box .img_box:before { position: absolute; width: calc(100% - 12px); height: calc(100% - 12px); border: 1px #fff solid; display: block; top: 5px; left: 5px; opacity: .4; content: ""; }
#newsBox .title_box { margin-top: 30px; }
#newsBox .title_box h3 { padding: 35px 0; text-align: center; color: #fff; }
#newsBox .title_box h4 { text-align: center; font-size: 18px; color: #fff; }
#newsBox .title_box .number { font-size: 94px; top: 10px; left: calc((100% - 118px) / 2); opacity: .11; }
#newsBox ul { margin: 40px 60px 20px; }
#newsBox ul li p { padding: 10px 0; width: 98px; display: inline-block; }
#newsBox ul li p.cat a { padding: 5px; background: #631e66; display: block; text-align: center; color: #fff; }
#newsBox ul li p.nowrap_box { width: calc(100% - 98px); }
#newsBox ul li p.nowrap_box font { width: calc(100% - 140px); display: -webkit-inline-box; font-weight: 400; color: #fff; }
#newsBox ul li p.nowrap_box font.time { margin: 0 15px; width: 110px; letter-spacing: 1px; font-family: 'NexaLight'; font-size: 15px; }
#newsBox .more_link { text-align: center; }
#newsBox .more_link a { padding-bottom: 5px; font-size: 12px; color: #fff; border-bottom: 2px #fff solid; }

/* picture_box */
#picture_box .list_box a { display: block; }
#picture_box .list_box a img {width: 38vw;height: 550px;}
#picture_box .list_box:nth-child(2) a img{
    margin-left: auto;
}

/* productBox */
#productBox .left_box { padding-left: 160px; width: 300px; display: inline-block; }
#productBox .left_box:before { position: absolute; width: 100px; height: 1px; background: #999; display: block; top: 50px; left: 0; content: ""; }
#productBox .left_box .title_box { margin-bottom: 90px; padding-bottom: 100px; }
#productBox .left_box .title_box:after { position: absolute; width: 90px; height: 2px; background: #1e1e1e; display: block; bottom: 0; left: 0; content: ""; }
#productBox .left_box .title_box h3 { color: #212121; }
#productBox .left_box .title_box h4 { font-size: 21px; color: 474343; }
#productBox .left_box .title_box .number { top: -65px; left: -45px; }
#productBox .left_box .title_box svg {width: 143px;height: 92px;top: -770px;left: -130px;}
#productBox .right_box { margin-left: 30px; width: calc(100% - 490px); display: inline-block; }
#productBox .right_box ul li .list_box { margin: 0 20px; padding: 0 0 205px; }
#productBox .right_box ul li .list_box .img_box { overflow: hidden; margin: 0 0 15px; }
#productBox .right_box ul li .list_box .img_box:before { width: calc(100% - 22px); height: calc(100% - 22px); top: 10px; left: 10px; z-index: 2; opacity: 0; }
#productBox .right_box ul li .list_box .img_box font.abso_box { padding: 8px 0; width: 145px; background: #fff; display: block; text-align: center; font-weight: 300; color: #555; bottom: -50px; left: calc((100% - 145px) / 2); }
#productBox .right_box ul li .list_box .info_box { padding: 25px 20px 40px; width: calc(100% - 40px); background: url(/images/00/img-productBg.jpg) no-repeat 50%; bottom: 40px; left: 0; }
#productBox .right_box ul li .list_box .info_box h5 { text-align: center; }
#productBox .right_box ul li .list_box .info_box h5 font { height: 35px; border-bottom: 1px #595959 solid; display: -webkit-inline-box; font-weight: 300; line-height: 45px; font-size: 21px; color: #222; }
#productBox .right_box ul li .list_box .info_box p { margin-top: 30px; text-align: center; font-weight: 300; color: #555; }
#productBox .right_box ul li .list_box .info_box .more_icon { position: absolute; width: 55px; height: 55px; background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / .2); border-radius: 50%; display: block; bottom: -25.5px; left: calc((100% - 55px) / 2); opacity: 0; z-index: 3; -webkit-transform: rotate(135deg); -webkit-transition-duration: .2s; transform: rotate(135deg); transition-duration: .2s; }
#productBox .right_box ul li .list_box .info_box .more_icon:before ,
#productBox .right_box ul li .list_box .info_box .more_icon:after { position: absolute; width: 30px; height: 2px; background: #777; display: block; top: calc((100% - 2px) / 2); left: calc((100% - 30px) / 2); content: ""; }
#productBox .right_box ul li .list_box .info_box .more_icon:after { width: 2px; height: 30px; top: calc((100% - 30px) / 2); left: calc((100% - 2px) / 2); }
#productBox .right_box ul li:nth-child(2n) .list_box { padding: 165px 0 0 0; }
#productBox .right_box ul li:nth-child(2n) .list_box .info_box { top: 0; bottom: auto; }
#productBox .right_box ul li:nth-child(2n) .list_box .img_box { margin: 15px 0 0; }
#productBox .right_box ul li.slick-current .list_box .img_box:before { opacity: .4; }
#productBox .right_box ul li.slick-current .list_box .img_box font.abso_box { bottom: 0; }
#productBox .right_box ul li.slick-current .list_box .info_box .more_icon { opacity: 1; -webkit-transform: rotate(0); transform: rotate(0); }

#productBox{
    padding: 3vw 0 3vw;
}

@media screen and (max-width: 1440px){
	#about_box .row.right_box { max-width: calc(50% - 6vw); }
	#about_box .row.right_box .title_box h4 svg { right: 30px; opacity: .5; }
}
@media screen and (max-width: 1360px){
	#about_box .origin { top: 14%; left: -4vw; }
	#about_box .aboutus { color: rgb(240 240 240 / .6); }
	#about_box .row.left_box { margin: 0 0 0 auto; width: calc(100% - 450px); display: block; }
	#about_box .row .img_box img , #about_box .row .img_box:after { width: 90%; height: 400px; }
	#about_box .row.right_box { margin: -140px 0 0 0; padding-top: 30px; width: 100%; max-width: inherit; }
}
@media screen and (min-width: 1281px){
	#productBox .right_box ul li:hover .list_box .img_box:before { opacity: .4; }
	#productBox .right_box ul li:hover .list_box .img_box font.abso_box { bottom: 0; }
	#productBox .right_box ul li:hover .list_box .info_box .more_icon { opacity: 1; -webkit-transform: rotate(0); transform: rotate(0); }
}
@media screen and (max-width: 1280px){
	#newsBox { left: 0; }
	#picture_box { margin: 0 0 0 auto; width: calc(100% - 550px); }
	#picture_box .list_box a img { width: 100%; }
	#productBox .left_box { width: auto; display: block; }
	#productBox .left_box .title_box { margin-bottom: 70px; padding-bottom: 40px; }
	#productBox .left_box .title_box svg { top: 140px; }
	#productBox .left_box .more_tag { position: absolute; top: 0; right: 70px; }
	#productBox .right_box { margin-left: 5%; width: 90%; }
}
@media screen and (max-width: 1160px){
	#about_box .section_area { padding-top: 7vw; }
	#about_box .row.left_box { width: 85%; }
	#about_box .row.right_box { margin: -40px 0 0 0; }
	#about_box .row.right_box .title_box .number { top: -50px; left: auto; right: 80px; }
	#about_box .row.right_box .title_box h4 svg { display: none; }
}
@media screen and (max-width: 1024px){
	#newsBox { width: 470px; }
	#newsBox ul { margin: 40px 30px 20px; }
	#picture_box { width: calc(100% - 490px); }
}
@media screen and (max-width: 768px){
	#about_box .origin { display: none; }
	#about_box .row.left_box { width: 100%; }
	#about_box .row .img_box img { width: 95%; height: 55vw; }
	#about_box .row .img_box:after { width: calc(95% - 22px); height: calc(100% - 22px); right: 10px; bottom: 10px; opacity: .4; }
	#about_box .row.right_box { margin: 0; }
	#about_box .row.right_box .title_box .number { top: -77px; }
	#newsBox { position: relative; padding: 10px 10px 40px; width: calc(100% - 20px); height: auto; top: auto; }
	#picture_box { margin: 8vw auto 0; width: 90%; }
	#picture_box .list_box a img { height: 220px; }
	#productBox .left_box { padding-left: 5%; }
	#productBox .left_box .title_box .number { top: -5px; left: auto; right: -20px; }
	#productBox .left_box .title_box svg { display: none; }
	#productBox .left_box .more_tag { top: 100px; right: 5%; }
	#productBox .left_box:before { width: 0; }
}
@media screen and (max-width: 640px){
	section .title_box .number{ font-size: 110px; }
	section .more_tag { padding: 15px 20px; }
	section .more_tag font { margin-right: 80px; }
	#about_box .aboutus { display: none; }
	#about_box .row.right_box .title_box .number { right: 0; }
}
@media screen and (max-width: 600px){
	#productBox .right_box ul { margin: auto; width: 330px; }
}
@media screen and (max-width: 480px){
	#newsBox ul li p { padding: 0; display: block; }
	#newsBox ul li p.nowrap_box { padding: 0 0 10px; width: 100%; }
	#newsBox ul li p.nowrap_box font { width: calc(100% - 125px); }
	#newsBox ul li p.nowrap_box font.time { margin-left: 0; }
}
@media screen and (max-width: 400px){
	#productBox .left_box .title_box:after { width: 0; }
	#productBox .right_box ul { width: 100%; }
}