.section_area {padding: 5vw 0;}
.section_area .area_title {position: relative;padding-bottom: .15em;text-align: center;font-family: "Marmelad", sans-serif;font-size: 65px;line-height: 1.2;}
.section_area:not(#abnews_area) .titboxx:after {content: url(/images/01/img-tit.png);display: block;text-align: center;margin-top: 15px;margin-bottom: 40px;}
.section_area .sub_title { font-weight: 500; font-size: 1.1em; color: var(--primary); }
.section_area .more_btn {padding: 17px 5.5em;font-weight: 400;background: var(--secondary);color: white;border-radius: 50px;}
.section_area .more_btn:hover{background:var(--primary)}

/* product_area */
#product_area{background-image: url(/images/01/bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding: 3vw 0 5vw;}
#product_area .workframe{width: min(90%, 1480px);}
#translate{width: min(100%, 800px);margin: 0 auto;}
#translate form{display:flex;align-items: center;position: relative;box-shadow: 0 0 25px rgb(0 0 0 / 5%);}
#translate form >div{position:absolute;right: 5px;}
#translate form >div a{background:var(--primary);color: white;padding: 8px 30px;}
#translate p{display:flex;position: relative;align-items: center;width: 100%;}
#translate p input{padding: .8em 1em;padding-left: 55px;border: 0;border-radius: 0;font-size: 16px;letter-spacing: 1px;}
#translate p svg{width:20px;height: 20px;fill: #555;position: absolute;left: 20px;}
#stext{display:flex;align-items: center;justify-content: center;margin-top: 30px;gap: 10px;margin-bottom: 3vw;flex-wrap: wrap;}
#stext a{font-size:14px;color: #747474;background: white;border-radius: 50px;padding: 6px 15px;display: inline-block;}
#product_area .list_box .btn{display:flex;position: absolute;bottom: calc(50% - 85px);align-items: center;justify-content: space-between;padding: 0;width: 124%;left: -12%;z-index: -1;}
#product_area .list_box #product_next img{transform:scaleX(-1);}
#product_area .list_box li{margin:0 15px;border: 0;}

/* abnews_area */
#abnews_area{position:relative;background: var(--threeary);padding-top: 7vw;}
#abnews_area:before{content:'';position: absolute;background-image: url(/images/01/bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;width: 58%;height: 310px;top: 0;z-index: 1;}
#abnews_area:after{content:'';position: absolute;background-image: url(/images/01/bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;width: 63%;height: 600px;bottom: 0;z-index: 1;right: 0;}
#abnews_area .video-bg{position:absolute;top: 0;z-index: 0;opacity: .3;height: 100%;}
#abnews_area .video-bg video{height:100%}

/* about_area */
#about_area, #news_area {position:relative;z-index: 5;}
#about_area .workframe {display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;width: min(90%, 1250px);align-items: flex-start;}
#about_area .workframe:after{content:'';width: 80%;height: 100%;position: absolute;top: 0;background: white;}
#about_area .workframe >div{z-index:4}
#about_area .info_box {padding: 5% 11%;width: 1%;display: flex;flex: 1 1 auto;flex-direction: column;justify-content: center;align-items: flex-start;margin-top: 50px;}
#about_area .info_box .titt {display:flex;align-items: center;gap: 10px;margin-bottom: 10px;}
#about_area .info_box .titt p:last-child{color:#a6a6a6}
#about_area .info_box .titt span{width:60px;background:#cecece;height: 1px;}
#about_area .infoo p {font-size: 20px;font-weight: 600;margin-bottom: 15px;}
#about_area .infoo article {margin-bottom: 70px;text-align: justify;letter-spacing: .5px;line-height: 2;}
#about_area .img_box {max-width: 50%;margin: 60px 0;}
#about_area .img_box img { width: 100%; height: 100%; }
#about_area .paroller{writing-mode: vertical-lr;font-family: "Marmelad", sans-serif;color: #eaeaea;font-size: 100px;position: absolute;right: 28%;bottom: 20%;}

/* photo_area */
#photo_area{background-image: url(/images/01/bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: relative;}
#photo_area:after{content:'';position: absolute;left: 95px;bottom: 0;background-image: url(/images/01/bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;width: 58%;height: 50%;z-index: 2;}
#photo_area .workframe{width: min(95%, 1550px);position: relative;z-index: 5;}
#photo_area .box{display:grid;grid-template-columns: repeat(4, 1fr);gap: 15px;grid-auto-rows: 425px;}
#photo_area .box .info{position:relative;overflow: hidden;}
#photo_area .box .info:not(:first-child) .tt{position:absolute;bottom: 0;padding: 30px 25px;transform: translateY(50px);}
#photo_area .box .info:not(:first-child):hover .tt{transform: translateY(0px);}
#photo_area .box .info .tt .h3{margin-bottom: 40px;}
#photo_area .box .info:not(:first-child):hover .tt .h3{margin-bottom:20px;}
#photo_area .box .info:not(:first-child) .tt p{height:0;-webkit-line-clamp: 2;font-size: 15px;color: #cacaca;width: 70%;}
#photo_area .box .info:not(:first-child):hover .tt p{height:auto;}
#photo_area .box .info >a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#photo_area .box .info img{height: 425px;width: 100%;object-fit: cover;}
#photo_area .box .info:first-child{background: var(--threeary);display: flex;flex-direction: column;align-items: center;justify-content: center;}
#photo_area .box .info .titt{font-size:25px;display: flex;gap: 10px;align-items: center;margin-bottom: 25px;}
#photo_area .box .info .more_btn{background:none;border: 1px solid #fff;}
#photo_area .box .info .more_btn:hover{background:white;color:var(--threeary)}
#photo_area .box .info .titt:before{content:url(/images/01/img-tit.png)}
#photo_area .box .info *{color:white;text-align: left;}
#photo_area .box .info .photo{position:relative;height: 100%;}
#photo_area .box .info .photo:before{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));}
#photo_area .box .info:hover .photo:before{    background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 163 198 / 85%));}

/* news_area */
#news_area .workframe{width:min(90%, 1460px);display: grid;grid-template-columns: 52% 40%;justify-content: space-between;}
#news_area .newsbg {background-size:cover;background-position: 50% 50%;background-repeat: no-repeat;margin-top: -18%;}
#news_area .box{position:relative;}
#news_area .box:before{content:'';position: absolute;width: 2px;background: var(--secondary);height: 170px;left: 0;top: -8%;}
#news_area .box .titboxx{margin-left: 50px;display: flex;align-items: baseline;gap: 35px;margin-top: 50px;margin-bottom: 45px;}
#news_area .box .titboxx *{text-align:left;font-size: 50px;}
#news_area .box .titboxx .h2_title {font-size:22px;}
#news_area .list_box  {margin-left:50px;border-bottom: 1px solid rgb(81 81 81 / 20%);padding-bottom: 20px;margin-bottom: 50px;}
#news_area .list_box font{font-size: 14px;font-family: "Lato", sans-serif;color: #444;letter-spacing: .5px;}
#news_area .list_box .h3{height:auto;font-size: 18px;font-weight: 500;}
#news_area .btn{padding:0;display: flex;align-items: center;gap: 20px;margin-left: -30px;}
#news_area .btn a{width:70px;aspect-ratio: 1/1;background: var(--secondary);align-items: center;justify-content: center;border-radius: 50px;}
#news_area .btn a:hover{background:var(--threeary)}
#news_area .btn a svg{fill:white}
#news_area .btn a#new_prev svg{transform:scaleX(-1);}

@media screen and (min-width: 1161px){
	#photo_area .item_row:hover { border-color: var(--primary); }
}
@media screen and (max-width: 1680px){
    #product_area .list_box .btn{left: -8%;width: 116%;}
}
@media screen and (max-width: 1280px){
    #product_area{padding: 5vw 0 5vw;}
    #news_area .workframe{grid-template-columns: 45% 45%;}
}
@media screen and (min-width: 1025px){
    #photo_area .box .info:first-child{grid-column-start: 4;grid-column-end: 5;}
    #photo_area .box .info:nth-child(2){grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2;}
    #photo_area .box .info:nth-child(3){grid-column-start: 3;grid-column-end: 4;grid-row-start: 1;grid-row-end: 2;}
    #photo_area .box .info:last-child{grid-column-start: 3;grid-column-end: 5;grid-row-start: 2;grid-row-end: 3;}
}
@media screen and (max-width: 1024px){
    .section_area .area_title{font-size: 55px;}
    #photo_area .box{grid-template-columns: repeat(3, 1fr);}
    #abnews_area:after{width:75%}
    #news_area .workframe{grid-template-columns: 30% 60%;}
    #about_area .info_box{padding: 5% 25% 5% 11%;}
    #about_area .workframe:after{width:100%;}
    #about_area .paroller{right:0}
    #about_area .img_box{display:none;}
    #news_area .newsbg{margin:0}
}
@media screen and (max-width: 768px){
    #photo_area .box{grid-template-columns: repeat(2, 1fr);}
    #news_area .box .titboxx, #news_area .list_box, #news_area .btn{margin-left:0}
    #abnews_area:after{width:100%;height: 63%;}
    #news_area .newsbg{height:45vw;width: 100%;}
    #news_area .workframe{display:flex;flex-direction: column;}
    #abnews_area, #photo_area:after{background:none}
    #abnews_area .video-bg{height: 40%;opacity: 1;background: var(--threeary);}
    #abnews_area .video-bg video{opacity:.3}
    #abnews_area:before, #news_area .box:before{display:none;}
	#about_area .img_box { width: 100%; max-width: inherit; }
	#about_area .info_box { order: 1; }
}
@media screen and (max-width: 640px){
    #photo_area .box .info img{height:360px;}
    #photo_area{background:white}
    #photo_area .box .info:first-child *{color:var(--threeary);text-align: center;}
    #photo_area .box .info .more_btn{background:var(--threeary);color:white;border: 0;}
    #photo_area .box .info .more_btn:hover{background:var(--primary);color: white;}
    #photo_area .box .info .titt{display:flex;justify-content: center;font-size: 22px;}
    #photo_area .box .info:first-child{background:none;}
    #photo_area .box{grid-template-columns: 1fr;grid-template-rows: 250px 360px;grid-auto-rows: 360px;}
    #abnews_area .video-bg{height: 25%;}
    #abnews_area:after{height:30%}
    #news_area .box .titboxx *{font-size:45px}
    #news_area .box .titboxx{display:flex;flex-direction: column;align-items: flex-start;gap: 0;}
    #news_area .box{width:90%;margin: 0 auto;}
    #news_area .newsbg{height:65vw}
    #news_area .workframe{width:100%}
    #about_area .paroller{display:none;}
    #about_area .infoo p{font-size:18px;}
    #about_area .workframe{margin-top:90px}
    #about_area .info_box{padding: 5% 10% 15%;margin-top: 20px;}
    #about_area .info_box .titt{flex-wrap: wrap;}
    #about_area .info_box .titt p:last-child{width: 100%;}
    #product_area .list_box .btn{display:none;}
    #stext{margin-bottom:50px;}
    .section_area .area_title{font-size: 45px;}
    #product_area{padding: 13vw 0;}
    
}