#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
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%; }
section .area_title{font-size:40px;color:var(--primary);font-family: 'Poppins',sans-serif;text-transform:capitalize}
section .h2_title{font-size:30px;line-height:150%;margin:10px 0 30px;text-transform: uppercase;font-family: 'Poppins', var(--font-family), sans-serif;}

/* product_area */
#product_area .bg_box{z-index:-1;opacity: .5;background-position: 50% 0;}
#product_area .h2_title, #discount_area .h2_title{margin-bottom:0;font-size: 35px;letter-spacing: 3px;}
#product_area .area_title, #discount_area .area_title {font-size: 22px;color: var(--info);margin-bottom: 50px;}
#product_area .area_title:first-letter, #discount_area .area_title:first-letter{color:var(--primary)}
#product_list .btn{padding:0;display: flex;align-items: center;justify-content: space-between;width: 115%;left: -7.5%;position: absolute;bottom: 45%;z-index: -1;}
#product_list .btn #product_prev svg{transform:scaleX(-1);}
#product_list .btn a{width: 50px;display: inline-flex !important;justify-content: center;align-items: center;aspect-ratio: 1/1;border-radius: 50px;border: 2px solid #ebebeb;}
#product_list .btn a svg{width:14px;height: 14px;}
#product_list li{background: white;margin: 15px 5px 0;}
#product_list li:hover{transform: translateY(-15px);}
#product_list .info_box{margin-bottom: 40px;display: flex;flex-direction: column;align-items: center;gap: 10px;padding: 40px 50px 0;}
#product_list .info_box .h3{font-size:20px;height:auto;font-weight: 500;letter-spacing: .5px;}
#product_list .info_box p{font-size: 15px;-webkit-line-clamp: 2;height: 51px;text-align: center;color: #7d7d7d;margin-bottom: 10px;}
#product_list .info_box span{font-size:14px;background: var(--primary);color: white;padding: 10px 25px;border-radius: 50px;}
#product_list li:hover .info_box span{background:var(--info)}
#product_list li img{aspect-ratio: 4/3;}

/* about_area */
#about_area{position:relative;padding-bottom: 4vw;border-bottom: 4vw solid rgb(246 246 246 / 65%);}
#about_area:after{content:'';position:absolute;right: -22%;width: 60%;height:100%;background:#f6f6f6;top:0;transform: skewX(-30deg);opacity: .65;}
#about_area .workframe{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;width: min(90%, 1280px);margin:0 auto}
#about_area .img_box{order:2;width:55%;margin:-50px 0 0}
#about_area .info_box{margin:0;width:45%}
#about_area .info_box article{margin-bottom:30px;width:100%;line-height:210%;letter-spacing:1.5px;font-weight:300;color:var(--black)}
#about_area .info_box h1{font-size: 20px;line-height: 170%;margin: 10px 0 10px;font-weight: 400;word-break: keep-all;width: 90%;}
#about_area .info_box article p{margin-bottom:40px;line-height:210%;letter-spacing:1px;font-weight:400;width:90%;text-align:justify}
#particle-canvas{width:100%;height: 100%;position: absolute !important;top: 0;left: 0;z-index: -3;opacity: .25;}
#particle-canvas canvas{width:100%;height:100%;}

/* custom_area */
#custom_area .workframe {display: grid;width: 90%;margin-right: 0;grid-template-columns: 17% 77%;justify-content: space-between;align-items: center;}
#custom_area ul li a{z-index:5}
#custom_area ul li .clip:before{content:'';position: absolute;bottom: 0;width: 100%;height: 100%;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));z-index: 1;}
#custom_area ul li .clip {position:relative;}
#custom_area ul li .clip img {aspect-ratio: 2.8/4;filter: saturate(70%);}
#custom_area ul li .info{bottom:0;padding: 30px;z-index: 1;}
#custom_area ul li .info *{color:white;fill:white;}
#custom_area ul li .h3 {font-size: 20px;}
#custom_area ul li article {font-weight: 300;font-size: 14px;overflow: hidden;margin: 10px 0 0;height: 0;text-align: center;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
#custom_area ul li:hover article{height:66px;}
#custom_area ul li .tit{display:flex;align-items: center;justify-content: space-between;}
#custom_area ul li b{width: 45px;aspect-ratio: 1/1;border-radius: 50px;border: 2px solid #c1c1c1;display: flex;align-items: center;justify-content: center;}
#custom_area ul li svg{width:13px;height:13px;}
#custom_area .circle {left: -2%;bottom: -2%;animation: rotateCircle 60s linear infinite;}
@keyframes rotateCircle{from{transform:rotate(0deg);opacity:.5}to{transform:rotate(360deg);opacity:1}}
#custom_area .circle img{width: 550px;}

/* newsArea */
#knowledge_area{padding: 4vw 0;}
.newsArea{padding:0px 0 30px 0}
.newsArea a:hover{color:#f08200}
.newsArea .newsBox{-webkit-transition:all 0.5s;transition:all 0.5s}
.newsArea .newsBox.hide{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}
.newsArea .newsItem{max-width:1310px;padding:0 35px;width:100%;-webkit-transition:opacity 0.4s ease-out;transition:opacity 0.4s ease-out;-webkit-transition-delay:0.4s;transition-delay:0.4s}
.newsArea .newsItem.slick-center{opacity:1}
.newsArea .clearfix{display:flex;background-color:#f8f8f8;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}
#knowledge_area ul li.slick-slide{position:relative;-moz-transform:scale(0.9);-webkit-transform:scale(0.9);-o-transform:scale(0.8);-ms-transform:scale(0.9);transform:scale(0.9);z-index:-1;margin:70px 0 0}
#knowledge_area ul li.slick-slide:after{position:absolute;width:100%;height:100%;top:0;left:0;background:rgb(255 255 255 / 78%);content:""}
#knowledge_area ul li.slick-center{z-index:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);filter:none}
#knowledge_area ul li.slick-center:after{display:none}
#knowledge_area ul li:before{position:absolute;width:30px;height:0;background-color: var(--primary);background-repeat:no-repeat;background-size:contain;display:block;top:-90px;left:80px;z-index:0;opacity:0;content:"";-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;-webkit-transform:skewX(-30deg);-ms-transform:skewX(-30deg);transform:skewX(-30deg)}
#knowledge_area ul li.slick-center:before{opacity:1;-webkit-transition-delay:1s;transition-delay:1s;height:130px}
.newsArea .Img{flex-shrink:0}
.newsArea .Img img{width: 590px;height: 460px;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden;-o-object-fit:cover;object-fit: cover;}
.newsArea .head{display:-webkit-box;display:-ms-flexbox;display:flex;border-bottom:1px solid #cbcbcb;padding-bottom:10px;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-content:space-between}
.newsArea .head .titleBox{display:flex;-webkit-box-align:center;align-items:center;justify-content:space-between;width:100%}
.newsArea .head .titleBox .enTitle{font-size: 20px;display:inline-block;font-style:inherit;font-family:'Poppins',sans-serif;text-transform:uppercase}
.newsArea .head .titleBox .title{font-size:26px;font-weight: 600;letter-spacing:0.7px;line-height:1;height:auto;display:flex;align-content:center;align-items:center}
.newsArea .head .titleBox .title span{color:var(--primary);font-size:26px}
.newsArea .titleBox .title{font-weight:600;font-size:40px;color: var(--black);position:relative}
.newsArea .titleBox .title em{font-style:italic}
.newsArea .head .arrowBox{z-index:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translateY(-14px);transform:translateY(-14px)}
.newsArea .head .arrowBox .line{width:1px;height:20px;background-color:#cbcbcb;margin:0 20px}
.newsArea .head .arrowBox .arrow{width:33px;height:33px;border-radius:50%;overflow:hidden;position:relative;margin:10px 0;cursor:pointer;background-color:#222222}
.newsArea .head .arrowBox .arrowPrev{-webkit-mask:no-repeat url(../images/arrow1.png) center/contain;mask:no-repeat url(../images/arrow1.png) center/contain}
.newsArea .head .arrowBox .arrowPrev:hover{background-color:#f08200}
.newsArea .head .arrowBox .arrowNext{-webkit-mask:no-repeat url(../images/arrow2.png) center/contain;mask:no-repeat url(../images/arrow2.png) center/contain}
.newsArea .head .arrowBox .arrowNext:hover{background-color:#f08200}
.newsArea .content{display:-webkit-box;display:-ms-flexbox;display:flex;padding-top:20px}
.newsArea .content .left{min-width:70px;padding-left:0;padding-top:14px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.newsArea .content .left .day{font-size:50px;color:#222222;line-height:45px;font-family:'Poppins',sans-serif}
.newsArea .content .left .date{font-size:14px;color:#222222;margin-bottom:12px;font-family:'Poppins',sans-serif}
.newsArea .content .left .line{margin:10px 0 16px 0}
.newsArea .content .left .classTitle{position:static;font-size:16px;font-weight:500}
.newsArea .content .right{padding-left:17px;padding-top:3px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}
.newsArea .content .right .title {font-size:20px;margin:0;line-height:150%;-webkit-line-clamp:2}
.newsArea .Txt{position:relative;padding:64px 50px 57px;min-width:0;width:100%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.newsArea .Txt .classTitle{position:absolute;right:20px;top:30px}
.newsArea .Txt .title{height:60px}
.newsArea .Txt .title a{display:block;padding-bottom:8px;margin-bottom:10px;font-weight:400;font-size:18px}
.newsArea .Txt .text{height:70px;font-size:15px;color:#666666;line-height:24px;font-weight:400;letter-spacing:0.8px;margin-bottom:14px;margin-top:20px;-webkit-line-clamp:3}
.newsArea .Txt a.link{text-align:right;font-size:13px;padding-right:3px;letter-spacing:0.8px;align-self:flex-end;font-family:'Poppins',sans-serif;margin-top:40px}
#news_area .workframe{margin-right:0;margin-left:auto;width:82%}

/* discount_area */
#discount_area {padding-top: 0;}
#discount_area .text_h3 {text-align: center;margin-bottom: 2vw;}
#discount_area .workframe {z-index: 10;width: min(90%, 1500px);}
#discount_area .area_title .other_txt { -webkit-transform: rotate(-11deg) translate(131%, 1em); transform: rotate(-11deg) translate(131%, 1em); }
#discount_area #discount_list .newlist {margin: 25px;background: #fff;box-shadow: 10px 10px 20px rgb(121 121 121 / 20%);}
#discount_area #discount_list .info_box {padding: 14px 25px 15px;position: relative;/* text-align: center; */}
#discount_area #discount_list .info_box >font{position:absolute;left: 0;top: 15px;text-transform: uppercase;font-size: 14px;padding: 7px 25px;border-radius: 0px 25px 25px 0;font-family: "Lato", sans-serif;}
#discount_area #discount_list .info_box h3 {height: 57px;font-size: 34px;cp;:geometricprecision;color: #333333;-webkit-line-clamp: 2;line-height: 2.0;font-weight: 500;text-align: center;}
#discount_area #discount_list .info_box p {display: grid;align-items: center;grid-template-columns: 1fr 45px;gap: 0 15px;margin-top: 15px;}
#discount_area #discount_list .info_box p font{-webkit-line-clamp: 2;height: auto;color: #5d5c5c;font-size: 14px;}
#discount_area #discount_list .info_box .more { padding: 5px; border-radius: 20px; }
#discount_area #picture_box img {width: 100%;aspect-ratio: 16 / 9;object-fit: cover;}
#discount_area #freight_box img { width: 100%; height: 100%; border-radius: 30px; }
#discount_area #discount_list .info_box b{background: var(--primary);width: 45px;height: 45px;display: flex;justify-content: center;align-items: center;border-radius: 50px;}
#discount_area #discount_list .newlist:hover .info_box b{background: var(--black);}
#discount_area #discount_list .info_box b svg{width: 15px;height: 15px;fill: white;}

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

/* photo_area */
#photo_area .item {width: 260px;height: 200px;}
#photo_area .item img {height: 100%;object-fit: cover;}

@media screen and (max-width: 1680px) {
    #product_list .btn{left: -5%;width: 110%;}
}
@media screen and (max-width: 1660px) {
	#news_area .workframe{width: 86%;}
	.newsArea .newsItem{max-width:1000px}
	.newsArea .Img{width:50%}
	.newsArea .Img img{height:100%}
	.newsArea .Txt{padding:40px 35px;}
}
@media screen and (max-width: 1280px) {
    #product_list .btn{display:none;}
}
@media screen and (max-width: 1024px) {
    #custom_area{position:relative}
    #custom_area .circle{bottom: auto;top: 0;}
    #custom_area .workframe{display:block;margin: 0 auto;}
    #custom_area .title_box {display:flex;flex-direction: column;align-items: center;margin-bottom: 50px;}
    #custom_area .title_box p{text-align:center;}
    #about_area .img_box img{width:100%}
    #about_area .workframe{flex-direction:column;width:90%}
    #about_area .info_box{width:100%}
    #about_area .img_box{margin:30px 0;width:80%;display: block;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
	section { padding: 12vw 0 ; }
    .newsArea .content .left .day{font-size:30px;}
	#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: 550px) {
    #product_area .area_title, #discount_area .area_title{margin-bottom:30px;}
	.newsArea .item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
	.newsArea .Img{width:100%}
	.newsArea .head .titleBox .enTitle{font-size: 20px;}
	.newsArea .head .titleBox .title{font-size:24px}
	.newsArea .Img img{    width: 100%;}
    section .area_title{font-size:30px;}
    #product_area .h2_title, #discount_area .h2_title{font-size:30px}
	section .clip img{height: auto;}
    #about_area:after{right: -82%;height: 90%;top: unset;bottom: 0;}
    section .h2_title{font-size: 25px;}
	#about_area #about_img { width: 80vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
}