#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0 5vw;}
section >* { z-index: 3; }
section .title_box {font-size: 22px;color: var(--info);font-weight: 500;padding-bottom: 5px;}
section .clip { margin: auto; width: 100%; }
section .clip img {height: 100%;object-fit: contain;}
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li {width: 210px;display: block;}
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_list */
#product_list{width:100%}
#product_list li{margin:0 20px}
#product_list li .p_text{top:0;padding-top:60px;padding-left:30px}
#product_list li .p_text .product_num{font-size:55px;color:#fff;font-family:'Work Sans';line-height:100%}
#product_list li .p_text h3{font-size:25px;color:#fff;height:40px;font-weight:400}
#product_list li .img_box{border-radius:1em;background-color:#000}
#product_list li .img_box img{aspect-ratio:4/5;opacity:.6}

#about_area{position:relative}
#about_area:after{content:'';background-image:url(/images/44/img-about-bg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:absolute;top:0;width:100%;height:85%}
#about_area .workframe{width:min(90%,1550px);display:grid;grid-template-columns:47% 46%;gap:0px;justify-content:space-between}
#about_area #about_img{width:100%}
#about_area #about_info{margin-left:0px;margin-right:0}
#about_area .title_box{font-size:115px;font-weight:500;line-height:100%;padding-bottom:20px;margin-left:-190px;margin-top:0px;background:linear-gradient(90deg,var(--secondary),var(--primary) );background-clip:text;-webkit-background-clip:text;color:transparent;white-space:nowrap}
#about_area .h2_title{font-size:40px;color:#1b1a19;word-spacing:100vw;line-height:150%;font-weight:500}
#about_area article{margin-top:55px;margin-bottom:50px;line-height:180%;letter-spacing:1px;font-weight:400;text-align:justify;font-size:16px}
#about_area .more_btn{margin-right:0;margin-left:auto}
#about_area .more_btn:before{content:'';position:absolute;width:180px;height:60px;background-image:url(/images/44/arrow1.png);background-size:contain;background-repeat:no-repeat;z-index:1;top:39%;left:-40%}
#about_area .more_btn:hover:before{left:-45%}
/* product_area */
#product_area{overflow:hidden;5vw 0FONT-WEIGHT:200}
#product_area .product_bg{top:0;z-index:0;opacity:.3;height:100%;width:100%}
#product_area .product_bg video{width:100%;height:auto}
#product_area .workframe{width:min(90%,1550px);margin:0 110px 0 auto;display:grid;grid-template-columns:21% 60% 10%;justify-content:space-between;align-items:center}
#product_area .main-title{padding:120px 0;border-top:4px var(--primary) solid;border-bottom:4px var(--secondary) solid}
#product_area .main-title h2{font-size:22px;color:var(--info);font-weight:500;padding-bottom:15px}
section .main-title h3{font-size:60px;font-weight:600;color:var(--primary);line-height:110%;letter-spacing:1px;text-transform:uppercase}
#product_area .productbtn{}
#product_area .more_btn{padding:20px 30px;display:flex;align-items:center;width:180px;justify-content:space-between;border-radius:50px;margin-top:73px}
#product_area .more_btn svg{fill:#fff;width:20px;height:20px;object-fit:contain}
#product_area .more_btn:hover svg{margin-right:7px}
#product_area #product_next{background:rgba(var(--gray-rgb),)}
#product_area #product_next img{width:100px;object-fit:contain}

/* news_area */
#news_area li .img_box {border-radius: 15px;background-color: #f9f9f9;}
#news_area li .info_box { margin: 10px 15px 0; }
#news_area li .time { width: 65px; font-weight: 400; font-size: 13px; }
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li h3 { margin-top: 10px; height: 60px; line-height: 150%; font-size: 20px; -webkit-line-clamp: 2; }

/* book_area */
#book_area .main-title{padding-left:10%;margin-bottom:70px}
#book_area .main-title h2{padding-left:40px}
#book_area .main-title h2:before{content:'';position:absolute;top:25%;left:0;width:30px;height:12px;background-image:url(/images/44/dot.png);background-size:contain;background-repeat:no-repeat}
#book_area li h3{margin-top:30px;height:30px;font-size:20px;font-weight:400;color:var(--info)}
#book_area ul li{margin:0 25px}
#book_area li .img_box{aspect-ratio:4/3}
#book_area .bookbtn{display:flex;justify-content:center}
#book_area .bookbtn #book_prev,#book_area .bookbtn #book_next{width:auto;background:0}
#book_area .news_bar{position:absolute;left:-17%;top:-22%;width:110px;height:1010px;background:linear-gradient(0deg,var(--secondary),var(--primary))}
/* photo_area */
#photo_area .item {width: 260px;height: 200px;}
#photo_area .item img {height: 100%;object-fit: cover;}

@media screen and (max-width:1460px){
    #about_area .about_sub_1,#about_area .about_sub_2,#about_area .about_sub_3{width:20vw}
    #product_list{margin-left:30px}
    #product_list li .clip{height:590px}
    #about_area .about_sub_2{top:-20vw;right:6vw}
}
@media screen and (min-width:1281px){
    #book_area ul li{position:relative;margin-top:70px}
    #book_area ul li.slick-current{margin-top:0}
}
@media screen and (max-width:1280px){
    #product_area{padding-bottom:10vw;padding-top:0}
    #product_area .product_bg{top:unset;height:100%}
    #product_area .product_bg video{height:100%;width:auto}
    #product_area .workframe{grid-template-columns:100%;margin:0 auto}
    #product_area .workframe .productbtn{display:none}
    #product_area .main-title{display:flex;flex-direction:column;align-items:center;border:0;padding:60px 0}
    #product_area .more_btn{margin-top:40px}
    #book_area .bookbtn{margin-top:40px}
    #book_area .news_bar{display:none}
}
@media screen and (max-width:1024px){
    #product_list{margin:auto}
    #news_area li h3{height:30px;-webkit-line-clamp:1}
    #about_area .workframe{grid-template-columns:1fr;justify-items:center}
    #about_area .clip{display:flex;justify-content:center}
    #about_area .title_box{margin-left:0;font-size:45px}
    #about_area .h2_title{font-size:26px;margin-top:20px}
    #about_area article{margin:40px 0}
    #about_area #about_info{margin-top:30px}
}
@media screen and (max-width:980px){
    section{padding-top:10vw}
    #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){
    section{padding:8vw 0}
    section .main-title h3{font-size:37px}
    #product_sub_list>div{margin:10px auto 50px}
    #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){
    #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_img{width:80vw}
    #about_area .about_sub_2{bottom:60vw}
    #news_area li .row{margin:auto;width:280px}
}
@media screen and (max-width:480px){
    #book_area li.row{margin:auto;width:250px}
}