@charset "utf-8";
/* CSS Document */

.iabout{ padding:20vw 0; /*background-image:url(../picture/iabobg.png);*/ background-size:cover; background-repeat:no-repeat; background-position:center;/*background-attachment: fixed;*/    background-blend-mode: multiply;background-color: #0009;}
@media only screen and (min-width: 1200px) {
.iabout .w1400-2{display:flex;}
}
.iabout-text{ display:flex; /*flex-wrap:wrap;*/align-items: center;justify-content:space-between; /*margin-bottom:80px;*/}
.iabout-tit{margin-bottom:30px; display:block; width:30%;}
.iabout-title{ font-size:38px; font-weight:bold; color:#fff;}
.iabout-right{width: 50%;}
.iabout-content{ font-size:18px; line-height:30px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 10; text-overflow: ellipsis; -webkit-box-orient: vertical; width:100%; /*max-width:860px;*/ margin-right:40px; margin-bottom:50px; color: #fff;}
.iabout-content p{margin-bottom:15px;}
.iabout-more{ display:inline-block; padding:10px 0; background-color:transparent; color:#fff; width:160px; text-align:center; font-size:16px;border-radius: 30px; border: 2px solid #fff; box-shadow:0px 3px 12px #0009;}
.more-arrow{font-family: /*cursive,*/ "siyuan",segoe ui,sans-serif,system-ui !important;}
.iabout-more:hover{ background-color:var(--mainblue-dark);}
.iabout-img{ max-width:650px; /*background:#fff;*/}
.iabout-img img{display:block; box-shadow:0px 3px 12px #0009;}
@media only screen and (max-width: 1200px) {
    .iabout-content{ margin-right:0px;}
    }
    @media only screen and (max-width: 960px) {
        .iabout-text{display: block;}
        .iabout-tit, .iabout-right{ width: 100%;}
        .iabout-tit{text-align: center;}
        .iabout-more{display: block; margin: auto;}
    }
 
    








					
    #sectionPin {
        /* Stretch it out, so that we create room for the horizontal scroll animation */
        height: auto;
        display:block;
        overflow: visible; /* To make position sticky work … */
        view-timeline-name: --section-pin-tl;
        view-timeline-axis: block;
    }
    
    .iproduct{padding:5vw 0; background-color: #fff;}
    .iprotitle{ font-size:38px; display:block; height:10vh; line-height:10vh; text-align:center;}
    .pin-wrap-sticky {
        width:100%;
        display:block;
        /* Stick to Top */
        /*height: 100vh;
        width: 100vw;
        position: sticky;
        top: 0;
    
        width: 100vw;
        overflow-x: hidden;
        */
    }
    
    .pin-wrap {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: auto;
        width:100%;
        flex-wrap:wrap;
        gap:10px;
        /*width: max-content;*/
    }
    .pin-wrap>div{ display:flex;flex-grow:0; width:calc((100% - 30px) / 4);transition: .3s;}
    @media only screen and (min-width: 1024px) {
        .pin-wrap { flex-wrap: nowrap;}
        .pin-wrap>div:hover{ width: 40%;}
    }

    .pin-wrap>div>a{ /*display:flex;flex-direction: column; padding:1vw; color:#333;*/ background-color: #000; height: 500px;width:100%; position: relative;}
    .iproico{ width:100%; height:100%; position: absolute; top: 0; left: 0;background-repeat: no-repeat; background-position: center; background-size: cover;transition: .3s; z-index: 1; opacity: 0.5;}
    .pin-wrap>div:hover>a>.iproico{ opacity: 1;}
    .pin-wrap>div>a>img{position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%); width: 50px; height: 50px; object-fit: contain; z-index: 2; transition: .3s;}
    .pin-wrap>div:hover>a>img{ opacity: 0;}
    .pin-wrap>div>a>p{ position: absolute; bottom:20px; z-index: 3; display: block; color: #fff; font-size: 18px; font-weight: bold; padding: 0 20px; transition: .3s;}
    .pin-wrap>div:hover>a>p{ bottom:40px;}
    @media only screen and (max-width: 1024px) {
    .pin-wrap>div{width:calc((100% - 10px) / 2);}
    .pin-wrap>div>a{ height: 300px;}
    }












.iworkshop{ margin:80px auto; background:#000; position:relative; z-index:0; overflow:hidden;}
.iworkshop-text{ position:absolute; display:flex; width:100%; height:100%; left:0; top:0; text-align:center;}
.iworkshop-title{ font-size:38px; font-weight:bold; color:#fff; margin-bottom:30px; display:block; width:100%; margin-bottom:30px;}
.iworkshop-desc{ font-size:25px; line-height:30px; color:#fff;}
.iworkshop-more{ display:inline-block; padding:10px 30px; background-color:var(--mainblue); color:#fff; text-align:center; font-size:18px;border-radius: 30px; margin:50px auto 0; margin-right:30px;}
.iworkshop-more:last-child{ margin-right:0;}
.iworkshop-more:hover{ background-color:var(--mainblue-dark);}






.iprolist{padding: 5vw 0 5vw; background-image: url('../image/fORaS8LYJ.jpeg');    background-size: cover;    background-position: center;    position: relative;}
.iprolist::before {content: '';position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;background-color: rgba(210, 210, 210, 0.9); z-index:0}
.iprolist h4, .iprolist h2{position:relative;}
.iprolist-title{ font-size: 38px; font-weight: bold; margin-bottom: 5vw; display: block; width: 100%; text-align: center;color: var(--mainblue);}
.iprolist .swiper{width: 100%;}
.iprolist .swiper-slide{position: relative;z-index: 1;}
.iprolist .swiper-slide.swiper-slide-active{z-index: 2;}
.iprolist .swiper-slide a{ display: flex;justify-content: end; position: relative;}
.iprolist .swiper-slide .iprolist-name{ position: absolute; z-index: 1; right: 42%; text-align: right; width: max-content; bottom:0; font-size: clamp(25px, 7.5vw, 150px); font-weight: bold;color: #ddd;text-shadow:-1px -1px 0 #0002, 1px -1px 0 #0002,-1px  1px 0 #0002, 1px  1px 0 #0002; transition: all 0.8s;}
.iprolist .swiper-slide.swiper-slide-active .iprolist-name{ color: #fff; text-shadow:0 0 0 #0000,0 0 0 #0000,0 0 0 #0000,0 0 0 #0000; right: 35%;}
.iprolist .swiper-slide .iprolist-image{ width: 50%; padding-bottom:50%; max-width: 500px; max-height: 500px; position: relative; z-index: 2;}
.iprolist .swiper-slide .iprolist-image img{transform: translateX(20%); opacity: .3;transition: all 0.8s;transition-delay: .5s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;mix-blend-mode: multiply;}
.iprolist .swiper-slide.swiper-slide-active .iprolist-image img{transform: translateX(0px); opacity: 1;}
@media only screen and (min-width: 1440px) {
    .iprolist .swiper-slide .iprolist-name{right: 500px;}
    .iprolist .swiper-slide.swiper-slide-active .iprolist-name{right: 350px;}
    .iprolist .swiper-slide .iprolist-image{padding-bottom:30%}
}






.inews{ padding:5vw 0; /*background-image:url(../picture/inews.jpg); background-size:cover; background-repeat:no-repeat; background-position:center bottom; background-attachment:fixed;*/ background-color: #fff;}
.inews-title{ font-size:38px; font-weight:bold; margin-bottom:30px; display:block; width:100%; text-align:center; /*color:#fff;*/}
.inews-more{ display:block; padding:20px 0; background-color:var(--mainblue); color:#fff; width:260px; text-align:center; font-size:20px;border-radius: 50px; margin:50px auto 0;}
.inews-more:hover{ background-color:var(--mainblue-dark);}
.inews ul{ display:flex; /*flex-wrap:wrap;*/ gap:3.3333%;}
.inews ul li{ width:23%; display:flex;}
.inews ul li .inewslist{ display:block; width: 100%; /*border-bottom:1px solid #eee; padding:30px; background:#000;*/}
.inews ul li .inews-img{display: block; position: relative; padding-bottom: 65%;}
.inews ul li .inews-img img{width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}
.inews ul li .inews-txt{ padding: 20px; background-color: #000;transition: all 0.5s;}
.inews-date{ font-size:16px; color:#ccc; line-height:30px;}
.inews-listname{ font-size:20px; color:#fff; line-height:50px;overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical;}
.inews-desc{ font-size:18px; color:#ccc; line-height:30px; height:30px;overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; text-overflow: ellipsis; -webkit-box-orient: vertical;}
.inews-view{ display:inline-block; float:right; /*margin-top:25px;*/padding:5px 30px; background-color:var(--mainblue); color:#fff; text-align:center;border-radius: 20px;-webkit-transition: all 0.5s;}
.inews-view:hover{ background-color:var(--mainblue-dark);}
.inews ul li:hover{}
.inews ul li:hover .inews-txt{ background-color: var(--mainblue);}
.inews ul li:hover .inewslist{ background-color:#ffffffcc;}
.inews ul li:hover .inews-listname{ /*color:#000;*/}
.inews ul li:hover .inews-date, .inews ul li:hover .inews-desc{ /*color:#333;*/}
@media only screen and (max-width: 768px) {
    .inews ul{flex-wrap:wrap;}
    .inews ul li{width: 48%; margin-top:15px;}
	/*
	.inews ul li .inewslist{position:relative;}
	.inews ul li .inews-txt{position: absolute; width: 100%; bottom: 0; background-color:#0009;}
	*/
	.inews-listname{font-size:16px; line-height:30px;}
	.inews-more{ width:160px; padding:10px; font-size:16px;}
	
}



























@keyframes scrollmouse { 0% {transform: translate(-50%, 0);opacity: 1; }  100% {transform: translate(-50%, 10px);opacity: 0;}}
.p_scrool {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 35px;
    z-index: 100;
    transition: opacity .3s;
    opacity:0;
}
.p_scrool.opacity{
    opacity: 1;
}
.p_scrool i {
    display: block;
    width: 20px;
    height: 30px;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px #fff solid;
}
.p_scrool i:before {
    content: "";
    display: block;
    width: 4px;
    height: 10px;
    background: #fff;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 3px;
    animation: scrollmouse 1s linear infinite;
}
.p_scrool span {
    font-size: 10px;
    text-transform: uppercase;
    color:#fff;
}
@media (max-width: 1024px) {
    .p_scrool {display: none;}
}







.iabout, .iproduct, .iprolist, .inews{ overflow: hidden;}
.iabout h4, .iproduct h4, .iprolist h4, .inews h4{ font-size: 20px;}
.iabout h4{margin-bottom: 20px; color: #fff;}
.iproduct h4{ text-align: center;}
.iprolist h4{ text-align: center; color: var(--mainblue); margin-bottom: 20px;}
.inews h4{ text-align: center; margin-bottom: 20px;}
@media (max-width: 768px) {
    .iabout h2, .iproduct h2, .iprolist h2, .inews h2{ font-size: 24px !important;}
    .iabout h4, .iproduct h4, .iprolist h4, .inews h4{ font-size: 16px;}
}