.fancybox-content{width: 100% !important;}

#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: 44px; color: var(--primary); font-family: "Karla",sans-serif; text-transform: capitalize; line-height: 1.2; letter-spacing: 2px; font-weight: 700; }
section .h2_title { font-size: 28px; line-height: 150%; margin: 0px 0 30px; text-transform: uppercase; font-weight: 600; }
section .deco01 { position: absolute; top: 0; right: 0; opacity: 0.7; }
section .deco01 img { width: 300px; height: auto; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.section_area {padding: 4vw 0;}
.section_area .title {position: relative;margin-bottom: 3.5em;letter-spacing: .1em;}
.section_area .h2tit {margin: 0;color: #1e2b2f;font-size: clamp(30px, 3vw, 40px);line-height: 1.6;font-weight: 600;letter-spacing: 0.03em;}
.section_area .h2tit span{vertical-align: baseline;color: transparent;background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;line-height: 1.6;font-weight: 600;letter-spacing: 0.03em;font-size: clamp(30px, 3vw, 40px);}
.section_area .title p{margin: 3px 0 0;font-size: clamp(18px,1.8vw,29px);line-height: 1.2;font-weight: 600;letter-spacing: 0.04em;color: #b88a52;font-family: "Karla", sans-serif;text-transform: uppercase;}

/* wrap */
#wrap{overflow:hidden;}

/* portfolio_area */
#portfolio_area{display:flex;align-items: center;justify-content: center;padding: 5vw 0;}
#portfolio_area .videobox{position: absolute;width: 100%;height: 100%;z-index: -1;display: flex;align-items: center;justify-content: center;overflow: hidden;}
#portfolio_area video{width:100%;position:absolute;}
#portfolio_area .fixTxt{top: -100px;left: -10px;}
#portfolio_area .title{margin:0}
#portfolio_area .title article{letter-spacing: 0;margin: 50px 0 120px;font-weight: 500;font-size: 18px;}
#portfolio_list{width: min(90%, 1540px);display: grid;grid-template-columns: 21% 76%;justify-content: space-between;align-items: center;}
#portfolio_list li{margin:0 25px;background: white;border-radius: 35px;box-shadow: 5px 5px 20px rgb(74 74 74 / 5%);overflow: hidden;}
#portfolio_list li .img_box{position:relative;}
#portfolio_list li .h3 {position:absolute;height: auto;background: #5aac4d;left: 23px;top: 22px;border-radius: 10px;padding: 8px 18px 10px;}
#portfolio_list li .h3 font{height:auto;font-size: 17px;color: white;line-height: 1;font-weight: 500;}
#portfolio_list .info_box {padding: 30px;display: flex;flex-direction: column;align-items: flex-start;gap: 5px;}
#portfolio_list .info_box button{width: 100%;display: flex;align-items: center;justify-content: center;padding: 0;border-radius: 50px;letter-spacing: 0;gap: 10px;}
#portfolio_list .info_box button:hover{background: var(--thrid);}
#portfolio_list .info_box button svg{width: 25px;height: 20px;fill: white;}
#portfolio_list .info_box p.txt_clamp{color: #646464;font-size: 15px;-webkit-line-clamp: 2;font-weight: 300;letter-spacing: 0.03em;text-align: justify;width: 100%;height: auto;}
#portfolio_list .info_box [data-action="buy"] , #product_list .info_box .contact_btn {padding: .8em .8em;position: relative;font-size: .9em;color: white;z-index: 11;background: var(--info);}
#portfolio_list .price_box {justify-content: center;margin: 10px 0 0;}
#portfolio_list .info_box p:last-child{width:100%;margin-top: 10px;}
#portfolio_list .price_box *{margin-bottom:0;letter-spacing: 0;font-size: 16px;letter-spacing: 0;color: #666;vertical-align: baseline;}
#portfolio_list .info_box .price_box ins {text-decoration: none;font-weight: 500;color: #941515;font-size: 20px;font-family: "Karla", sans-serif;letter-spacing: -.5px;margin: 0;}

/* 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 { width: min(80%,1280px); margin: 0 auto; display: grid; align-items: center; grid-template-columns: repeat(2,1fr); gap: 90px; }
#about_area .title_box { position: relative; }
#about_area .info_box { margin: 0; }
#about_area .info_box article { display: flex; flex-direction: column; align-items: flex-start; }
#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: 20px; line-height: 200%; letter-spacing: 1px; font-weight: 400; }
#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{position:relative;}
#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{position:relative;overflow:hidden;}
#custom_area ul li a{z-index:5;}
#custom_area ul li .clip{position:relative;overflow:hidden;}
#custom_area ul li .clip:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.15) 52%,rgba(0,0,0,.68) 100%);z-index:1;transition:.5s ease;}
#custom_area ul li .clip:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.08),rgba(255,255,255,0) 35%);opacity:0;z-index:1;transition:.5s ease;}
#custom_area ul li .clip img{aspect-ratio:2.8/4;width:100%;height:100%;object-fit:cover;filter:saturate(70%) brightness(.95);transform:scale(1);transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .5s ease;}
#custom_area ul li .info{bottom:0;padding:30px;z-index:2;transition:transform .45s ease;}
#custom_area ul li .info *{color:white;fill:white;}
#custom_area ul li .h3{font-size:20px;transition:.35s ease;}
#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: 2;-webkit-box-orient:vertical;opacity:0;transform:translateY(10px);transition:height .4s ease,opacity .35s ease,transform .4s ease;}
#custom_area ul li:hover article{height: auto;opacity:1;transform:translateY(0);}
#custom_area ul li .tit{display:flex;align-items:center;justify-content:space-between;gap: 20px;}
#custom_area ul li b{width:45px;aspect-ratio:1/1;border-radius:50px;border:2px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;transition:.35s ease;background:rgba(255,255,255,.04);backdrop-filter:blur(3px);}
#custom_area ul li svg{width:13px;height:13px;transition:.35s ease;}
#custom_area ul li:hover .clip img{transform:scale(1.055);filter:saturate(90%) brightness(.9);}
#custom_area ul li:hover .clip:before{background:linear-gradient(180deg,rgba(0,0,0,0) 10%,rgba(0,0,0,.12) 45%,rgba(0,0,0,.78) 100%);}
#custom_area ul li:hover .clip:after{opacity:1;}
#custom_area ul li:hover .info{transform:translateY(-4px);}
#custom_area ul li:hover b{border-color:var(--primary);background:var(--primary);transform:translateX(4px);}
#custom_area ul li:hover svg{transform:translateX(2px);}
#custom_area .circle{left:-7%;bottom:10%;animation:rotateCircle 60s linear infinite;}
@keyframes rotateCircle{from{transform:rotate(0deg);opacity:.5}50%{opacity:.75}to{transform:rotate(360deg);opacity:.5}}
#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:"Karla", 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:"Karla", sans-serif}
.newsArea .content .left .date{font-size:14px;color:#222222;margin-bottom:12px;font-family:"Karla", 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:"Karla", sans-serif;margin-top:40px;color: var(--black);}
#news_area .workframe{margin-right:0;margin-left:auto;width:82%}

/* discount_area */
#discount_area { padding: 80px 0 100px; background: #fff; }
#discount_area .deco01 { right: -70px; top: 60px; }
#discount_area .deco01 img { width: 690px; }
#discount_area .workframe { z-index: 10; }
#discount_area .title_box { margin-bottom: 45px; }
#discount_area .title_box .area_title,#discount_area .title_box .h2_title,#product_area .area_title,#product_area .h2_title,#knowledge_area .area_title,#knowledge_area .h2_title { text-align: center; }
#discount_area #picture_box .newlist {   }
#discount_area #discount_list .newlist { margin: 0; background: #fff; box-shadow: 0 8px 22px rgba(20,50,70,.09); border: 1px solid rgba(20,50,70,.05); min-height: 360px; transition: .35s; margin: 20px; }
#discount_area #discount_list .newlist:hover { transform: translateY(-6px); box-shadow: 0 12px 20px rgba(20,50,70,.14); }
#discount_area #discount_list .info_box { padding: 34px 34px 0; position: relative; height: 100%; display: flex; flex-direction: column; }
#discount_area .date_box { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
#discount_area .date_day { width: 68px; height: 68px; background: #f4f6f7; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 500; color: #111; }
#discount_area .date_meta { display: flex; flex-direction: column; gap: 2px; font-size: 16px; font-weight: 600; color: #222; line-height: 1.25; }
#discount_area #discount_list .info_box h3 { height: auto; margin: 0 0 12px; font-size: 28px; color: #222; -webkit-line-clamp: 1; line-height: 1.45; font-weight: 600; text-align: left; }
#discount_area #discount_list .news_intro { height: auto; margin: 0; color: #6f6f6f; font-size: 17px; line-height: 1.8; -webkit-line-clamp: 2; margin-bottom: 50px; }
#discount_area .news_bottom { margin: 36px -34px 0; padding: 20px 34px; border-top: 1px dashed #e6e6e6; display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
#discount_area .read_more { display: flex; align-items: center; gap: 12px; color: #222; font-size: 15px; font-weight: 600; transition: .3s; }
#discount_area .read_more svg { width: 15px; height: 15px; fill: #222; transition: .3s; }
#discount_area .news_tag { padding: 7px 20px; border-radius: 30px; background: var(--primary); color: #fff; font-size: 13px; line-height: 1.4; }
#discount_area #discount_list .newlist:hover .read_more { color: var(--primary); }
#discount_area #discount_list .newlist:hover .read_more svg { fill: var(--primary); transform: translateX(5px); }
#discount_area .atag_item { inset: 0; z-index: 5; }

@media(max-width:1024px){#discount_area #picture_box{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){#discount_area{padding: 30px 0 40px;}#discount_area #picture_box{grid-template-columns:1fr;gap:20px;}#discount_area #discount_list .info_box{padding:28px 25px 0;}#discount_area .news_bottom{margin:30px -25px 0;padding:18px 25px;}#discount_area #discount_list .info_box h3{font-size:23px;}#discount_area .date_day{width:60px;height:60px;font-size:26px;}}

/* product_area */
#product_area{position:relative;padding: 90px 0 50px;background:#fff;overflow:hidden;}
#product_area .workframe { position: relative; z-index: 5; margin: auto; }
#product_area .title_box { text-align: center; margin-bottom: 65px; }
#product_area #product_box {   }
#product_area .product_item { position: relative; text-align: center; transition: .4s; margin: 0 30px; }
#product_area .product_pic { position: relative; width: 100%; aspect-ratio: 1/1; background: #fff; border: 1px solid #eee; padding: 15px; transition: .4s; }
#product_area .product_pic:after { content: ""; position: absolute; left: 26px; top: 28px; width: 100%; height: 100%; background: #e9e9e9; z-index: -1; transition: .4s; }
#product_area .product_pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: .5s; aspect-ratio: 1/1; }
#product_area .product_info { position: relative; padding: 50px 15px 16px; min-height: 95px; transition: .4s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#product_area .product_info .h3 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: 5px; color: #111; -webkit-line-clamp: 1; transition: .4s; text-align: center; }
#product_area .product_line { display: block; width: 24px; height: 1px; background: #31526c; margin: 23px auto 0; transition: .4s; }
#product_area .product_item:hover { transform: translateY(-8px); }
#product_area .product_item:hover .product_pic { border-color: #d8e6eb; }
#product_area .product_item:hover .product_pic img { transform: scale(1.04); }
#product_area .product_item:hover .product_info { background: #063d66; }
#product_area .product_item:hover .product_info { padding: 20px 15px; }
#product_area .product_item:hover .product_info .h3 { color: #fff; }
#product_area .product_item:hover .product_line { background: #fff; width: 38px; display: none; }
#product_area .atag_item { position: absolute; inset: 0; z-index: 10; }
#product_area .deco01 { left: -370px; top: 60px; }
#product_area .deco01 img { width: 690px; transform: scaleX(-1); }


/* 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: 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(max-width:1100px){
	#product_area #product_box{grid-template-columns:repeat(2,1fr);gap:45px 35px;}
}

@media screen and (max-width: 1024px){
	section .deco01 { display: none; }
	#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 { gap: 40px; display: flex; flex-direction: column; align-items: flex-start; }
	#about_area .info_box { overflow: hidden; }
	#about_area .img_box {   }
	#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: 768px){
    #portfolio_area .title, #custom_area .title{margin-bottom: 3.5em;padding: 0 20px;}
    #portfolio_area .title article{margin: 16px 0;}
    #portfolio_list{display:block;}
    #portfolio_area video{width:auto;height:100%}
    #portfolio_area .fixTxt{display: none;}
}
@media screen and (max-width:640px) {
	section .deco01 img { width: 220px; }
	#about_area .info_box article { width: 330px; }
	.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; }
	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; }
	#product_area { padding: 40px 0 70px; }
	#product_area .title_box { margin-bottom: 40px; }
	#product_area .area_title { font-size: 26px; }
	#product_area #product_box { grid-template-columns: repeat(2,1fr); gap: 30px 15px; }
	#product_area .product_pic { padding: 8px; }
	#product_area .product_pic:after { left: 10px; top: 12px; }
	#product_area .product_info { padding: 20px 5px 10px; min-height: 75px; }
	#product_area .product_info h3 { font-size: 16px; letter-spacing: 2px; }
	#product_area .product_line { margin-top: 14px; }
}
@media screen and (max-width:480px) {
	#about_area .info_box article { width: 330px; }
}