#wrap {z-index: 5;background-image: url(/images/44/wrapBg.jpg);background-repeat: no-repeat;background-position: top;background-size: contain;}

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 32px;color: #2a2c25;font-weight: 500;}
section .emtitle_box {display: inline-block;font-size: 20px;font-family: "Cormorant", serif;font-style: unset;text-transform: uppercase;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
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%); }

/* particle-canvas */
#twboxx{position:relative;background: #fff;}
#particle-canvas{width:100%;height: 100%;position: absolute !important;top: 0;left: 0;z-index: -3;opacity: .25;z-index: 1;}
#particle-canvas canvas{width:100%;height:100%;}

/* product_area */
#product_area:after{content:'';width: 86%;height: 50%;position: absolute;left: 0;bottom: 0;background: var(--primary);}
#product_area .bg_box {width: 65%;left: unset;right: 0;height: 60%;z-index: -1;}
#product_area .tit{position:relative}
#product_area .tit .btn{padding:0;position: absolute;right: 0;bottom: 3vw;display: flex;gap: 20px;}
#product_area .workframe{width: min(90%, 1300px);}
#product_list li{padding: 60px 40px 0;margin-top: 50px;}
#product_list li.slick-current{margin-top:0}
#product_list li .clip:after{content:'';width: 100%;height: 100%;position: absolute;right: -30px;top: -60px;background: #fff;z-index: -1;border-radius: 100px 0 0 0;}
#product_list li .clip img {aspect-ratio: 1/1;width: 100%;height: auto;}
#product_list li .info_box{position:relative;padding: 20px 0 0 30px;margin-left: 20px;}
#product_list li .info_box:before{position:absolute;content:'';background: var(--secondary);width: 1px;height: 100%;top: -30px;left: 0;}
#product_list li .info_box h3{color:#fff;font-size: 20px;height: auto;-webkit-line-clamp: 2;font-weight: 400;line-height: 1.7;margin-bottom: 10px;}
#product_list li .info_box p{color:#e6ebdc;font-size: 15px;font-weight: 200;}
#product_list li .info_box .more{display:none;}
#product_list li.slick-current .info_box .more{display:block;margin-top: 25px;color: #fff;font-size: 15px;font-weight: 200;}
#product_list li .info_box .more svg{width:23px;height: 23px;fill: #fff;margin-left: 35px;}
#product_list .btn{position: absolute;padding: 0;right: -12%;bottom: 12%;display: flex;flex-direction: row;justify-content: space-between;width: 120%;}
#product_list .btn a{width:65px;aspect-ratio: 1/1;background: var(--primary);border-radius: 50px;text-align: center;line-height: 60px;}
#product_list .btn a svg{fill:#fff;}
#product_list .btn a#product_prev{background: var(--white);}
#product_list .btn a#product_prev svg{transform:scaleX(-1);fill: var(--primary);}

/* about_area */
#about_area, #product_area{z-index:3;position: relative;}
#about_area *{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
}
#about_area .workframe {width: min(90%, 1350px);}
#about_area .slick-dots{bottom: 0;width: auto;display: flex !important;flex-direction: column;align-items: center;right: -16%;justify-content: center;height: 100%;gap: 5px;}
#about_area .slick-dots li{margin: 5px 0;}
#about_area .slick-dots li button{border: 1px solid #d4d4d4;border-radius: 50px;}
#about_area .slick-dots li.slick-active button{border: 1px solid #d4d4d4;}
#about_area .slick-dots li.slick-active button:before{opacity:1;color: var(--primary);}
#about_area .slick-dots li button:before{opacity:1;color: rgb(194 165 99 / 0%);}


/* custom_area */
#custom_area {padding: 0;background-image: url(/images/44/aboutBg.png);background-repeat: no-repeat;background-position: right 150%;background-size: 60%;}
#custom_area .workframe {width: min(95%, 1600px);margin: 0;display: grid;grid-template-columns: 60% 32%;justify-content: space-between;align-items: center;}
#custom_area img{aspect-ratio:9/7}
#custom_area .title_box{word-spacing: 100vw;}
#custom_area .emtitle_box{margin-bottom:20px;}
#custom_area  article {margin: 0 0 90px;line-height: 2.2;text-align: justify;}

/* news_area */
#news_area{padding-bottom:3vw}
#news_area .workframe{width: min(90%, 1180px);display: grid;grid-template-columns: 1fr 70%;}
#news_area li {border-bottom: 1px solid #ededed;padding: 35px 0;}
#news_area li:first-child{border-top: 1px solid #ededed;}
#news_area li .img_box , #book_area li .img_box { border-radius: 15px; background-color: #f9f9f9; }
#news_area li .info_box {display: grid;grid-template-columns: 95px 140px 1fr 30px;align-items: center;gap: 10px;}
#news_area li .time {font-weight: 400;font-size: 16px;font-family: "Lato", sans-serif;}
#news_area li .more_btn {margin-right: 30px;padding: 5px 15px;height: auto;font-weight: 400;font-size: 13px;z-index: 6;background: #ecf0e6;color: var(--triadic1);border: 1px solid var(--primary);}
#news_area li h3 {height: auto;line-height: 150%;font-size: 18px;-webkit-line-clamp: 1;color: var(--info);font-weight: 400;}
#news_area li:hover h3{color:var(--primary)}
#news_area li:hover .more_btn{background: var(--primary);color:#fff;}
#news_area li .info_box svg{width: 23px;fill: var(--primary);height: 23px;}
#news_area li:hover .info_box svg{transform:rotate(45deg);}

/* book_area */
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

/* photo_area */
#photo_area{padding-bottom:4vw;overflow: hidden;}
#photo_area, #photo_area *{transition:unset;-webkit-transition:unset;}
#photo_area .fixTxt{position:absolute;right: 0;bottom: 0;}
#photo_area .workframe{display:grid;grid-template-columns: 70% 25%;align-items: center;justify-content: space-between;width: min(90%, 1600px);}
#photo_area .tit{order:2;}
#photo_area .tit h2{padding:0}
#photo_area .photo{padding: 25px 0;background:#fff;border-radius: 60px;box-shadow: 6px 5px 20px rgb(0 0 0 / 5%);overflow: hidden;}
#photo_area .photo img{aspect-ratio: 3/2;object-fit: contain;width: 100%;}
#photo_area .photo .item:hover img{-webkit-filter:grayscale(0);}
#photo_area .photo .item {aspect-ratio:1/1;margin: 0 20px;display: flex;align-items: center;justify-content: center;}
#photo_area .slick-track {  display: flex !important;  align-items: center;}

#photo_area .photo ul{display:flex;-webkit-animation: picture_scroll 30s linear infinite;animation: picture_scroll 30s linear infinite;width:50%;}
#photo_area .photo ul li{min-width: 12vw;aspect-ratio:5/3;display:inline-flex;justify-content:center;align-items:center}
@keyframes picture_scroll{from{transform:translateX(0%)}
to{transform:translateX(-200%)}
}@-webkit-keyframes picture_scroll{from{-webkit-transform:translateX(0%)}
to{-webkit-transform:translateX(-200%)}
}

@media screen and (max-width: 1750px) {
    #about_area .slick-dots{right: -6%;}
}
@media screen and (max-width: 1460px) {
    #about_area .slick-dots{right: -2%;}
    #custom_area img{aspect-ratio: 7 / 7;}
    #custom_area article{margin: 0 0 50px;}
    #product_list .btn{display:none;}
    #product_area:after{width: 97%;}
    #photo_area .fixTxt{width:80%}
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#about_area .about_sub_2 { top: -20vw; right: 6vw; }
}
@media screen and (max-width: 1024px) {
    #photo_area .fixTxt{width: 100%;}
    #news_area .workframe{grid-template-columns:1fr}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
    #photo_area .photo ul li{min-width: 20vw;}
}
@media screen and (max-width: 980px) {
    #about_area .slick-dots{height: 80%;}
    #product_area .tit .btn{position:relative;margin-*t: 30px;margin-*t: 30px;margin-*t: 20px;margin-*t: 10px;margin-*t: 0;margin-top: 20px;bottom: 0;margin-bottom: 50px;}
    #custom_info{padding-top: 10%;padding-left: 8%;padding-right: 5%;}
    #custom_area .workframe{grid-template-columns:1fr;}
    #photo_area .photo{border-radius: 30px;}
	section { padding-top: 10vw; }
	#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 .clip img{height: auto;}
    #product_area .tit .btn{gap: 10px;}
    #product_area .tit .more_btn{padding: 12px 16px;font-size: 15px;}
    #product_area .tit .more_btn svg{margin-left: 5px;}
    #news_area li .more_btn{background: var(--primary);color: #fff;}
    #news_area .workframe{display:block;}
    section .title_box{font-size: 26px;}
	section, #photo_area {padding: 15vw 0;}
}
@media screen and (max-width: 550px) {
    #product_list li{padding: 60px 0 0;}
    #product_area .bg_box{width: 85%;top: unset;bottom: 0;height: 86%;}
    #articleAbout .topbox{display:flex;flex-wrap: wrap;}
    #custom_area img{aspect-ratio:9/7}
    #photo_area .tit{display:flex;flex-direction: column;align-items: center;margin-bottom: 20px;}
    #photo_area .fixTxt{height:100%;}
    #photo_area .fixTxt img{height:100%;object-fit: cover;}
    #photo_area .workframe{display:block;}
    #news_area li h3{margin-top: 20px;}
    #news_area li .info_box svg{position:absolute;right: 10px;top: 5px;}
    #news_area li .more_btn{padding: 5px 25px;}
    #news_area li .info_box{display: block;}
    #news_area li .info_box p{margin-right:15px;}
	#about_area #about_img { width: 80vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
    #photo_area .photo ul li{min-width: 35vw;}

}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}