@charset "utf-8";

/* m_tit */
.m_tit{}
.m_tit h3{font-family: 'Poppins', sans-serif; font-size: 5.4rem; font-weight: 700; color: #000;}
.m_tit p{font-size: 2.0rem; font-weight: 500; color: #444444; word-break: keep-all;}

@media all and (max-width:1280px){
	.m_tit h3{font-size: 5.2rem;}
	.m_tit p{font-size: 2.1rem;}
}
@media all and (max-width:976px){
	.m_tit h3{font-size: 4.4rem;}
	.m_tit p{font-size: 2rem;}
}
@media all and (max-width:640px){
	.m_tit h3{font-size: 3.6rem;}
	.m_tit p{font-size: 1.8rem;}
}

:root{
    --color1:#b71a35;
    --color2:#d91839;
}

/* sec1 */
.sec1{}
.sec1 .fp-scroller{width: 100%; height: 100%;}
.sec1 #mVisual{height: 100%; width: 100%; position: relative;}
/* .sec1 #mVisual::after{content: ''; width: 100%; height: 50%; position: absolute; bottom: 0px; left: 0; background: url(../img/main/mv_bg.png) no-repeat bottom center / contain; border-bottom: 1px solid #fff} */
.sec1 #mVisual .mv{position: relative; height: 100%; width: 100%; background-position:center center; background-size: cover;}
.sec1 #mVisual .mv.mv1{background-image: url('/theme/hstech/img/main/mv1_260903.webp');}
.sec1 #mVisual .mv.mv2{background-image: url('/theme/hstech/img/main/mv2.webp');}
.sec1 #mVisual .mv.mv3{background-image: url('/theme/hstech/img/main/mv3_260909.webp');}
.sec1 #mVisual .mv.mv4{background-image: url('/theme/hstech/img/main/mv4.webp');}
.sec1 #mVisual .mv .inner{position: absolute; z-index: 9; height: 100%; left: 50%; transform: translateX(-50%);}
.sec1 #mVisual .mv .inner .text{color: #fff; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.sec1 #mVisual .mv .inner .text p{font-size: 2rem; font-weight: 600; margin-top: 6rem; line-height: 1.6;}
.sec1 #mVisual .mv .inner .text h3{font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 8.5rem; line-height: 1em;}
.sec1 #mVisual .mv .inner .text span{color: var(--color2);}

.sec1{height:100%;}
#mVisual{width:100%;height:100%;}
#mVisual .slick-list{height:100%;}
#mVisual .slick-track{height:100%;}
#mVisual .slick-slide{height:100%;}
#mVisual .slick-slide>div{height:100%;}
#mVisual .mv{width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;}

@media all and (max-width:976px){
	.sec1 #mVisual{overflow: hidden; padding-top: 60px;}
	.sec1{}
	.sec1 .fp-tableCell{}
	.sec1 .fp-scrollable{}
	.sec1 #mVisual .mv .inner .text p{font-size: 1.8rem;margin-top: 4rem;}
	.sec1 #mVisual .mv .inner .text h3{font-size: 6rem;}
	.sec1 #mVisual .mv{}
}
@media all and (max-width:640px){
	.sec1 #mVisual .mv .inner .text p{font-size: 1.6rem;}
	.sec1 #mVisual .mv .inner .text h3{font-size: 5rem;}
}
@media all and (max-width:480px){
	.sec1 #mVisual .mv .inner .text h3{font-size: 4.7rem;}
}


/* sec2 */
.sec2{background: #fff url(/theme/hstech/img/main/sec2_bg.webp) no-repeat center center / cover; position: relative;}
.sec2::before{content: ''; position: absolute; width: 100%; height: 2px; background-color: #fff; top: -1px; left: 0; display: block;}
.sec2 .inner{padding-top: 80px; display: flex; align-items: center;}
.sec2 .inner .left_cont{display: flex;}
.sec2 .inner .left_cont .box{}
.sec2 .inner .left_cont .box .img{background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 100%; position: relative; overflow: hidden; cursor: pointer; box-shadow: 8px 0 20px rgba(0,0,0,0.1);}
.sec2 .inner .left_cont .box .img::after{content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); display: block; position: absolute; left: 0; top: 0; z-index: 2; transition: .2s ease-in-out;}
.sec2 .inner .left_cont .box .img.img1{width: 492px; height: 492px; background-image: url(/theme/hstech/img/main/sec2_img1_260909.webp); margin-top: 36px;}
.sec2 .inner .left_cont .box .img.img2{width: 280px; height: 280px; background-image: url(/theme/hstech/img/main/sec2_img2_260909.webp);}
.sec2 .inner .left_cont .box .img.img3{width: 397px; height: 397px; background-image: url(/theme/hstech/img/main/sec2_img3_260909.webp);margin-left: 30px; margin-bottom: 30px;}
.sec2 .inner .left_cont .box .img .txt{color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; position: relative; z-index: 3;}
.sec2 .inner .left_cont .box .img .txt h3{font-family: 'Montserrat',sans-serif; font-size: 3.6rem; font-weight: 800; transition: .3s ease-in-out;}
.sec2 .inner .left_cont .box .img .txt p{font-size: 1.6rem; line-height: 1.5em; margin-top: 0px; opacity: 0; visibility: hidden; height: 0; transition: .3s ease-in-out;}
.sec2 .inner .left_cont .box .img:hover > .txt p{height: auto; visibility: visible; opacity: 1; margin-top: 5px;}
.sec2 .inner .left_cont .box .img:hover::after{content: ''; background-color: rgba(0,0,0,0.3);}
.sec2 .inner .right_cont{margin-left: 110px;}
.sec2 .inner .right_cont .txt{}
.sec2 .inner .right_cont .txt h3{font-family: 'Poppins', sans-serif; font-size: 5.6rem; font-weight: 500; color: #000000; line-height: 1.4em;}
.sec2 .inner .right_cont .txt h3 span{font-size: 8.6rem; font-weight: 700; color: var(--color1);}
.sec2 .inner .right_cont .txt p{font-size: 2rem; color: #444444; font-weight: 500; line-height: 1.6em; margin-top: 2rem; word-break: keep-all;}

@media all and (max-width:1280px){
    .sec2 .inner{flex-direction: column; align-items: flex-start; padding-top: 60px;}
	.sec2 .inner .right_cont{order: -2; margin-left: 0; width: 100%;}
	.sec2 .inner .right_cont .txt{display: flex; align-items: center; justify-content: center; flex-direction: column;}
	.sec2 .inner .right_cont .txt h3{font-size: 5rem; line-height: 1.2em;}
	.sec2 .inner .right_cont .txt h3 br{display: none;}
	.sec2 .inner .right_cont .txt h3 span{font-size: 7rem;}
	.sec2 .inner .right_cont .txt p{font-size:2rem; margin-left: 0px; text-align: center; margin-top: 20px;}
	.sec2 .inner .right_cont .txt p br{display: none;}
    .sec2 .inner .right_cont .txt p + p{margin-top: 0;}
	.sec2 .inner .left_cont{width: 100%; justify-content: center; margin-top: 20px;}
	.sec2 .inner .left_cont .box .img.img1{width: 36vw; height: 36vw; margin-top: 90px;}
	.sec2 .inner .left_cont .box .img.img2{width: 25vw; height: 25vw;}
	.sec2 .inner .left_cont .box .img.img3{width: 30vw; height: 30vw; margin-left: 20px; margin-bottom: 20px;}
	.sec2 .inner .left_cont .box .img .txt h3{font-size: 3rem;}
}
@media all and (max-width:976px){
    .sec2{height: auto !important; padding: 70px 0;}
	.sec2 > div{height: auto !important;}
	.sec2 .inner{padding-top: 0;}
	.sec2 .inner .right_cont .txt{justify-content: flex-start; flex-direction: column; align-items: flex-start;}
	.sec2 .inner .right_cont .txt h3{font-size: 3.6rem; width: 100%;}
	.sec2 .inner .right_cont .txt h3 span{font-size: 5.4rem; margin-left: -4px;}
	.sec2 .inner .right_cont .txt p{font-size:2rem; width: 100%; margin-left: 0; margin-top: 15px; text-align: left;}
	.sec2 .inner .right_cont .txt p br{display: none;}
	.sec2 .inner .left_cont{flex-direction: column; margin-top: 30px;}
	.sec2 .inner .left_cont .box .img.img1,
	.sec2 .inner .left_cont .box .img.img2,
	.sec2 .inner .left_cont .box .img.img3{width: 100%; height: 30vw; max-height: 200px; border-radius: 5px; margin-left: 0px; margin-top: 0;}
	.sec2 .inner .left_cont .box .img.img1{margin-bottom: 20px;}
	.sec2 .inner .left_cont .box .img .txt h3{font-size: 2.7rem;}
    /*	.sec2 .inner .left_cont .box .img .txt p{height: auto; visibility: visible; opacity: 1; margin-top: 5px;}*/
}
@media all and (max-width:640px){
    .sec2 .inner .right_cont .txt h3{font-size: 3rem;}
	.sec2 .inner .right_cont .txt h3 span{font-size: 4.4rem;margin-left: -2px;}
	.sec2 .inner .right_cont .txt p{font-size: 1.8rem; margin-top: 15px;}
    .sec2 .inner .right_cont .txt p br{display: block;}
	.sec2 .inner .left_cont .box .img.img1{margin-bottom: 10px;}
	.sec2 .inner .left_cont .box .img.img3{margin-bottom: 10px;}
	.sec2 .inner .left_cont .box .img .txt h3{font-size: 2.4rem;}
	.sec2 .inner .left_cont .box .img .txt p{font-size: 1.5rem;}
}
@media all and (max-width:480px){
	.sec2 .inner .right_cont .txt p{font-size: 1.6rem;}
    .sec2 .inner .left_cont .box .img .txt p{visibility: visible !important; opacity: 1; height: auto; margin-top: 5px;}
}


/* sec3 */
.sec3{background: url(../img/main/sec3_bg.png) no-repeat center center / cover;}
.sec3 .s-inner{ padding-top: 80px;}
.sec3 .s-inner .m_tit{text-align: center;}
.sec3 .s-inner .m_tit h3{margin-bottom: 25px;}
.sec3 .s-inner .m_tit p{}
.sec3 .s-inner .list{margin-top: 55px;}
.sec3 .s-inner .list .box{margin: 0 10px;}
.sec3 .s-inner .list .box .img{overflow: hidden; border-radius: 10px;}
.sec3 .s-inner .list .box .img img{max-width: 100%}
.sec3 .s-inner .list .box .txt{padding: 30px; background-color: #fff;}
.sec3 .s-inner .list .box .txt h3{font-weight: 700; font-size: 2.6rem; color: #000;}
.sec3 .s-inner .list .box .txt p{font-size: 1.8rem; line-height: 1.5em; color: #666666; font-weight: 500; margin: 15px 0 30px;}
.sec3 .s-inner .list .box .txt a.more{font-size: 1.6rem; font-weight: 700; color: #d4d4d4; font-family: 'Montserrat', sans-serif;}
.sec3 .slick-prev{text-indent:-9999px; width: 60px; height: 60px; background:url(/theme/hstech/img/main/sec3_prev.png) no-repeat center center; left: -20px; transform: translateX(-100%);}
.sec3 .slick-next{text-indent:-9999px; width: 60px; height: 60px; background:url(/theme/hstech/img/main/sec3_next.png) no-repeat center center; right: -20px; transform: translateX(100%);}

@media all and (max-width:1280px){
	.sec3 .s-inner .m_tit h3{margin-bottom: 20px;}
	.sec3 .s-inner .list .box .txt{padding: 20px;}
	.sec3 .s-inner .list .box .txt h3{font-size: 2.6rem;}
	.sec3 .s-inner .list{margin-top: 40px;}
}
@media all and (max-width:976px){
	.sec3{height: auto !important; padding: 70px 0;}
	.sec3 > div{height: auto !important;}
	.sec3 .s-inner{padding-top: 0;}
	.sec3 .s-inner .m_tit{text-align: left;}
	.sec3 .s-inner .m_tit h3{margin-bottom: 15px;}
	.sec3 .s-inner .list .box{max-width: 380px;}
	.sec3 .s-inner .list .box .txt h3{font-size: 2.4rem;}
	.sec3 .s-inner .list .box .txt p{margin: 12px 0 25px;}
}
@media all and (max-width:640px){
	.sec3 .s-inner .list .box{max-width: 310px;}
	.sec3 .s-inner .list .box .txt h3{font-size: 2.2rem;}
	.sec3 .s-inner .list .box .txt p{font-size: 1.7rem;}
}


/* sec4 */
.sec4{background: url(../img/main/sec4_bg.png) no-repeat left bottom -60px;}
.sec4 .s-inner{padding-top: 80px;}
.sec4 .s-inner .m_tit{display: flex; align-items: center;}
.sec4 .s-inner .m_tit h3{}
.sec4 .s-inner .m_tit p{margin-left: 40px; line-height: 1.6em;}
.sec4 .s-inner .tab{display: flex; margin-top: 55px;}
.sec4 .s-inner .tab li{margin-right: 20px; width: 280px; height: 500px; background-size: cover; background-position: center; background-repeat: no-repeat; transition: .3s ease-in-out; position: relative; cursor: pointer;}
.sec4 .s-inner .tab li::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); }
.sec4 .s-inner .tab li.on::before,
.sec4 .s-inner .tab li.on::after{display: none !important;}
.sec4 .s-inner .tab li::after{ font-size: 2.8rem; font-weight: 800; color: #ffffff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.8rem; z-index: 9; width: 100%; text-align: center;}
.sec4 .s-inner .tab li:nth-child(1){background-image: url(/theme/hstech/img/main/sec4_img1_260827.webp)}
.sec4 .s-inner .tab li:nth-child(1)::after{content: 'Production Facilities';}
.sec4 .s-inner .tab li:nth-child(2){background-image: url(/theme/hstech/img/main/sec4_img2_260827.webp)}
.sec4 .s-inner .tab li:nth-child(2)::after{content: 'Production Process';}
.sec4 .s-inner .tab li:nth-child(3){background-image: url(/theme/hstech/img/main/sec4_img3_260909.webp)}
.sec4 .s-inner .tab li:nth-child(3)::after{content: 'Production Capacity';}
.sec4 .s-inner .tab li:last-child{margin-right: 0;}
.sec4 .s-inner .tab li.on{width: calc(100% - 600px);}
.sec4 .s-inner .tab li .tabcontent{display: block; position: absolute; bottom: 0; left: 0; width: 100%;}
.sec4 .s-inner .tab li .tabcontent.on{display: block;}
.sec4 .s-inner .tab li .tabcontent .text{background-color: #fff; padding: 35px 30px; position: absolute; left: 0; bottom: 0; opacity: 0; transition: .5s; width: 85%; visibility: hidden; width: 620px; height: 164px;}
.sec4 .s-inner .tab li .tabcontent.on .text{opacity: 1; visibility: visible;}
.sec4 .s-inner .tab li .tabcontent .text h3{font-size: 2.6rem; font-weight: 700; color: #000000; margin-bottom: 10px;}
.sec4 .s-inner .tab li .tabcontent .text p{font-size: 1.7rem; color: #666666; font-weight: 500; line-height: 1.5em;}
.sec4 .s-inner .tab li .tabcontent a.more{max-width: 100%; position: absolute; right: -40px; top: 50%; transform: translateY(-50%);}

@media all and (max-width:1280px){
	.sec4{background-size: 240px;}
	.sec4 .s-inner .tab{margin-top: 40px;}
	.sec4 .s-inner .tab li.on{width: calc(100% - 440px);}
	.sec4 .s-inner .tab li{width: 200px;}
	.sec4 .s-inner .tab li .tabcontent .text{width: 100%; height: auto; padding: 25px 20px }
	.sec4 .s-inner .tab li .tabcontent a.more{right: 10px;}
	.sec4 .s-inner .tab li .tabcontent a.more img{width: 60px; height: 60px;}
	.sec4 .s-inner .tab li .tabcontent .text h3{font-size: 2.5rem;}
    .sec4 .s-inner .tab li .tabcontent .text p {padding-right: 70px;}
	.sec4 .s-inner .tab li .tabcontent .text p br{display: none;}
}
@media all and (max-width:976px){
	.sec4{height: auto !important; padding: 70px 0;}
	.sec4 > div{height: auto !important;}
	.sec4 .s-inner{padding-top: 0;}
	.sec4 .s-inner .tab{margin-top: 30px;}
	.sec4 .s-inner .m_tit{flex-direction: column; align-items: flex-start;}
	.sec4 .s-inner .m_tit p{margin-left: 0; margin-top: 20px;}
	.sec4 .s-inner .m_tit p br{display: none;}
	.sec4 .s-inner .tab{flex-direction: column;}
	.sec4 .s-inner .tab li{width: 100% !important; height: 350px; margin-bottom: 20px; background-position: top -12vw center !important;}
	.sec4 .s-inner .tab li::before,
	.sec4 .s-inner .tab li::after{display: none;}
	.sec4 .s-inner .tab li .tabcontent .text{padding: 20px;opacity: 1; visibility: visible;}
	.sec4 .s-inner .tab li .tabcontent .text h3{font-size: 2.1rem; margin-bottom: 5px;}
	
}
@media all and (max-width:640px){
	.sec4 .s-inner .m_tit p{margin-top: 15px;}
}


/* sec5 */
.sec5{}
.sec5 .s-inner{}
.sec5 .title{display: flex; align-items: flex-end;}
.fp-viewing-ifooter .sec5 .title{opacity: 1 !important; transform:scale(1) !important;}
.fp-viewing-ifooter .sec5 .inquiry_box{opacity: 1 !important; transform:scale(1) !important;}
.sec5 .title .m_tit{}
.sec5 .title .m_tit h3{}
.sec5 .title .m_tit p{ line-height: 1.5em;}
.sec5 .title .info{margin-left: 160px; display: flex;}
.sec5 .title .info .box{margin-right: 100px;}
.sec5 .title .info .box p{font-weight: 300; font-size: 1.8rem; color: #444444; margin-bottom: 5px;}
.sec5 .title .info .box h4{font-weight: 500; font-size: 2.2rem; color: #444444;}
.sec5 .inquiry_box{background-color: #333333; border-radius: 15px; padding: 60px 100px; margin-top: 50px; }
.sec5 .inquiry_box form{display: flex;}
.sec5 .inquiry_box .left_cont{display: flex; flex-direction: column; width: 400px;}
/* .sec5 .s-inner .inquiry_box .left_cont input{background-color: transparent; border: 0px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.6); padding: 12px; font-size: 1.6rem; font-weight: 500; margin-bottom: 30px; letter-spacing: -0.05em;} */

.sec5 .inquiry_box .form_item{margin-bottom:2.5rem;}
.sec5 .inquiry_box .form_item label{display:block;margin-bottom:1rem;font-size:1.8rem;font-weight:600;color:#fff;}
.sec5 .inquiry_box .left_cont input[type="text"]{width:100%;background-color:transparent;border:0;color:#fff;border-bottom:1px solid rgba(255,255,255,.6);padding:0 0 1.2rem;font-size:1.6rem;font-weight:500;letter-spacing:-.05em;box-sizing:border-box;}
.sec5 .inquiry_box .left_cont input::placeholder{color:#fff;letter-spacing:-.05em;opacity:.4;}
.sec5 .inquiry_box .left_cont input:focus{outline:none;border-color:#fff;}
.sec5 .inquiry_box .left_cont .form_item:last-of-type{margin-bottom:0;}
.sec5 .inquiry_box .right_cont .content_item{margin-bottom:0;}
.sec5 .inquiry_box .right_cont textarea{background-color:transparent;border:0;resize:none;border-bottom:1px solid rgba(255,255,255,.6);width:100%;text-align:left;padding:0 0 1.2rem;font-size:1.6rem;font-weight:500;color:#fff;max-height:200px;box-sizing:border-box;}
.sec5 .inquiry_box .right_cont textarea::placeholder{color:#fff;letter-spacing:-.05em;opacity:.4;}
.sec5 .inquiry_box .right_cont textarea:focus{outline:none;border-color:#fff;}

.sec5 .inquiry_box .left_cont input::placeholder{color: #fff; letter-spacing: -0.05em; opacity: 0.5;}
.sec5 .inquiry_box .left_cont input:focus{outline: none;}
.sec5 .inquiry_box .left_cont input:last-child{margin-bottom: 0;}
.sec5 .inquiry_box .right_cont{width: calc(100% - 530px); margin-left: 130px;}
.sec5 .inquiry_box .right_cont textarea{ background-color: transparent; border: 0; resize: none; border-bottom: 1px solid rgba(255,255,255,0.6); width: 100%; text-align: left; padding: 0 10px 10px; font-size: 1.6rem; font-weight: 500; color: #fff; max-height: 200px;}
.sec5 .inquiry_box .right_cont textarea::placeholder{color: #fff; letter-spacing: -0.05em; opacity: 0.5;}
.sec5 .inquiry_box .right_cont textarea:focus{outline: none; }
.sec5 .inquiry_box .right_cont .bottom{margin-top: 35px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;gap: 2rem;}
.sec5 .inquiry_box .right_cont .bottom .box{display: flex; align-items: center; color: #fff; font-weight: 600; font-size: 1.5rem; gap: 1rem; width: 100%;}
.sec5 .inquiry_box .right_cont .bottom .box input{width: 18px; height: 18px;}
.sec5 .inquiry_box .right_cont .bottom .box a{font-size: 1.5rem; font-weight: 600; margin-left: 5px; color: #fff;}
.sec5 .inquiry_box .right_cont .bottom .box button{width: 100%; line-height: 45px; font-size: 1.7rem; font-weight: 700; color: #231916; text-align: center; background-color: #fff; border-radius: 6px;}

@media all and (max-width:1280px){
	.sec5 .title{flex-direction: column; align-items: flex-start;}
	.sec5 .title .m_tit p{margin-top: 30px;}
	.sec5 .title .m_tit p br{display: none;}
	.sec5 .title .info{margin-left: 0; margin-top: 30px;}
	.sec5 .inquiry_box{padding: 50px 60px;}
	.sec5 .inquiry_box .right_cont{margin-left: 70px; width: calc(100% - 470px);}
	.sec5 .inquiry_box .right_cont textarea{max-height: 180px;}
	.sec5 .inquiry_box .right_cont .bottom{flex-direction: column; margin-top: 20px;}
	.sec5 .inquiry_box .right_cont .bottom .box{width: 100%;}
	.sec5 .inquiry_box .right_cont .bottom .box button{margin-top: 10px; width: 100%; display: block;}
}
@media all and (max-width:976px){
	.sec5{height: auto !important; padding: 70px 0;}
	.sec5 > div{height: auto !important;}
	.sec5 {padding-top: 0;}
	.sec5  .title .m_tit p{margin-top: 20px;}
	.sec5  .title .info{margin-top: 20px;}
	.sec5  .title .info .box{margin-right: 30px; }
	.sec5  .title .info .box h4{font-size: 2rem;}
	.sec5  .inquiry_box{margin-top: 30px; padding: 40px;}
	.sec5  .inquiry_box form{flex-direction: column;}
	.sec5  .inquiry_box .left_cont{width: 100%;}
	.sec5  .inquiry_box .left_cont input{font-size: 1.7rem; margin-bottom: 15px;}
	.sec5  .inquiry_box .right_cont{width: 100%; margin-left: 0; margin-top: 15px;}
	.sec5  .inquiry_box .right_cont textarea{font-size: 1.7rem; padding: 12px; padding-top: 0; max-height: 140px;}
	.sec5  .inquiry_box .right_cont .bottom .box input{width: 15px; height: 15px;}
	.sec5  .inquiry_box .right_cont .bottom .box button{margin-top: 15px;}
}
@media all and (max-width:640px){
	.sec5 .inquiry_box{padding: 35px 30px;}
	.sec5 .inquiry_box .left_cont input{font-size: 1.6rem;}
	.sec5 .inquiry_box .right_cont textarea{font-size: 1.6rem;}
}