#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%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
section .title_box {margin-bottom: 10px;font-size: 33px;letter-spacing: 3px;color: var(--black);}
section .title_box font {line-height: 130%;font-weight: 700;font-size: 17px;color: #404040;font-family: "Nunito Sans", sans-serif;font-style: normal;text-transform: uppercase;letter-spacing: 1px;}
section .title_box font:first-child {margin-right: 5px;}
section .title_box .page_title {font-weight: 400;font-size: 28px;color: #242424;margin-bottom: 50px;font-style: normal;}
section .title_box .page_title{position:relative}
section .title_box .page_title span{font-weight:400;font-size:28px;color: var(--primary);vertical-align:bottom;font-style: normal;}
section .title_box .page_title:before{content:"";width:60px;height:1px;background: var(--primary);display:block;position:absolute;bottom:-20px;left:0}
section .title_box .page_title:after{content:"";width: 170%;height:1px;background:#262626;display:block;position:absolute;bottom:-20px;left:0;opacity:0.1}

/* custom_area */
#custom_area:before{content:"";background-image:url(/images/44/about_bg.png);display:block;width:100%;height:100px;background-repeat:no-repeat;background-size:cover;background-position:center;position:absolute;top: -85px;left:0}
#custom_area{background: white;}
#custom_area .workframe{width: min(90%, 1500px);margin-right: 230px;position: relative;z-index: 2;}
#custom_area:after{content:url(/images/44/shadow2.png);position: absolute;top: 15%;right: 5%;animation-name: shadow;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 5s;zoom: 80%;}
@keyframes shadow{0%{transform-origin:left bottom;transform:rotate(-3deg);}100%{transform-origin:left bottom;transform:rotate(3deg);}}
#custom_area .entitle_box , #photo_area .entitle_box {display:inline-block;padding-bottom: 1vw;font-style: unset;text-transform: uppercase;font-weight: 900;letter-spacing: 2px;font-family: "Nunito Sans", sans-serif;word-spacing: 100vw;line-height: 1.4;--bg-size: 400%;--color-one: var(--primary);--color-two: var(--secondary);--color-thr: var(--complement);--color-fou: var(--triadic1);--color-fiv: var(--triadic2);--color-six: var(--primary);background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-thr), var(--color-fou), var(--color-fiv), var(--color-six), var(--color-one)) 0 0 / var(--bg-size) 100%;color: transparent;background-clip: text;-webkit-background-clip: text;animation: move-bg 45s infinite linear;font-size: 80px;}
#custom_area #productTabs {display: grid;grid-template-columns: 1fr 230px;gap: 90px;align-items: end;position: relative;}
#custom_area .workframe:before{content:url(/images/44/img-bird2.svg);position: absolute;left: -15%;top: 44%;width: 175px;animation: ani_updown 8s ease-out forwards infinite;z-index: 2;}
#custom_area .tabs {display: flex;flex-direction: column;order: 1;margin-bottom: 4vw;align-items: flex-start;}
#custom_area .tabs a{padding: 15px 0;color: #c7c7c7;font-size: 15px;display: flex;align-items: center;gap: 10px;position: relative;}
#custom_area .tabs a:before{content:'';width: 6px;border-radius: 50px;border: 1px solid #c7c7c7;aspect-ratio: 1/1;}
#custom_area .tabs a:after{content:'';width: 0;height: 1px;background: var(--black);position: absolute;bottom: 6px;right: 0;}
#custom_area .tabs li.active a:after, #custom_area .tabs li:hover a:after{width: 90%;}
#custom_area .tabs li.active a:before{border-color:var(--info)}
#custom_area .tabs li.active a{color: var(--info);}
#custom_area .tabs li.active svg{fill:var(--complement)}
#custom_area .tabs a svg{width:35px;height: 35px;fill: #acaeaf;margin-right: 20px;}
#custom_area .tab_content{overflow: hidden;}
#custom_area .tab_content .clip {float:right;width: 65%;}
#custom_area .tab_content .infoBox {float:left;width: 30%;margin-top: 9.5vw;}
#custom_area .tab_content .infoBox .h3{font-size: 22px;letter-spacing: 1px;font-weight: 500;}
#custom_area .tab_content .infoBox p.tt{color: #828282;}
#custom_area .tab_content .infoBox p{margin: 20px 0 40px;text-align: justify;line-height: 2;letter-spacing: 1px;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
#custom_area .track{position:absolute;width:100vw;max-width:100%;overflow:hidden;z-index: 0;bottom: -20px;white-space:nowrap}
#custom_area .track p{font-weight: 500;font-size: 170px;margin:0;text-transform:uppercase;letter-spacing:2px;line-height:1;will-change:transform;animation: marquee 35s linear infinite;color: transparent;-webkit-text-stroke: 1px rgb(208 208 208 / 50%);-webkit-text-fill-color: transparent;font-family: "Nunito Sans", sans-serif;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* photo_area */
#photo_area .entitle_box{text-align:center;}
#photo_area .title_box{text-align:center;margin-bottom: 50px;}
#photo_area{background:white;position: relative;text-align: center;}
#photo_area .workframe{width: 90%;margin:0;border: 1px solid #e3e3e3;padding: 13px 13px 13px 0;border-left: 0;z-index: 1;background: white;}
#photo_area .marquee{width:100%;overflow:hidden;white-space:nowrap;box-sizing:border-box;position: relative;}
#photo_area .marquee-content{display:flex;}
#photo_area .marquee-content li{flex-shrink:0;white-space:nowrap;margin: 0 8px;}
#photo_area .marquee-content li img{aspect-ratio: 4.5/3;object-fit: cover;}


/* 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: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center / 100%; bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }

/* about_area */
#about_area{padding: 8vw 0 4vw;}
#about_area .sloganTop{width: 30%;top:0px;transform: translate(25%,30%);font-weight: 900;--bg-size: 400%;--color-one: var(--primary);--color-two: var(--secondary);--color-thr: var(--complement);--color-fou: var(--triadic1);--color-fiv: var(--triadic2);--color-six: var();--color-six: var(--primary);background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-thr), var(--color-fou), var(--color-fiv), var(--color-six), var(--color-one)) 0 0 / var(--bg-size) 100%;color: transparent;background-clip: text;-webkit-background-clip: text;animation: move-bg 45s infinite linear;font-size: 80px;position: absolute;z-index: 7;}
#about_area .sloganBtm{position:absolute;top:0;left:49%;transform:translate(-50%,0%);-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;font-size: 110px;letter-spacing:9.5px;z-index:0}
#about_area .workframe{display:flex;align-items:flex-end;justify-content:center;width: min(90%, 1280px);}
#about_area .sideLogo{position:absolute;top: -50px;right:70px;animation: aboutImgAnimation 10s ease-in-out infinite;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(10px);transform:translateY(10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
#about_area .img_item{margin-bottom:30px;width:calc(40% - 0px);transform:translateX(-7%)}
#about_area .info_item{transform:translate(25%,-10%);width: calc(45% - 30px);}
#about_area .info_item:before{content:url(/images/44/img-bird.svg);position: absolute;right: -30%;top: -60px;width: 80px;animation: ani_updown 8s ease-out forwards infinite;}
@keyframes ani_updown{0%{transform:translateY(20px);}25%{transform:translateY(0);}50%{transform:translateY(20px);}75%{transform:translateY(0);}100%{transform:translateY(20px);}}
#about_area .info_item:after{content:url(/images/44/p_ban_ele_bg.png);position: absolute;right: -30%;bottom: -60px;}
#about_area .img_item img{width:90%}
#about_area .info_item .pageh1{font-size:22px;line-height: 1.7;font-weight: 500;color: var(--black);margin-bottom: 15px;}
#about_area .info_item article p{margin-bottom:30px;line-height:210%;letter-spacing: 1px;font-weight:100;color: #6c6c6c;text-align: justify;font-weight: 400;}
#about_area .info_item article .Txt{color:#6c6c6c}
#about_area .more_btn{margin-top: 30px;}
#about_area .more_btn a{position:relative;overflow:hidden;width:130px;padding:10px 30px;display:flex;align-items:center;justify-content:space-between;z-index:3}
#about_area .more_btn font{text-align:left;font-weight:500;color:#ffffff;letter-spacing:1px;font-size:13px;z-index:10;font-family: "Nunito Sans", sans-serif;text-transform: uppercase;}
#about_area .more_btn a:before{content:"";height:100%;width:0;display:block;position:absolute;bottom:0;left:0px;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;background-color:#31192e}
#about_area .more_btn a::after{content:'';position:absolute;height:100%;width:100%;top:0;left:0;background-color: var(--secondary);z-index:-1;transform-origin:top left;transition:all 1.1s ease-in-out;-webkit-transition:all 1.1s ease-in-out}
#about_area .more_btn .arrow{position:relative;display:inline-block;vertical-align:middle;width:18px;height:18px}
#about_area .more_btn .arrow:after, #about_area .more_btn .arrow:before{content:"";position:absolute;top:50%;left:0;z-index:1;width:100%;height:1px;margin-top:-0.5px;background-color:#ffffff}
#about_area .more_btn .arrow:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
#about_area .more_btn:hover .arrow:after{-webkit-transform:rotate(270deg);transform:rotate(270deg)}
@keyframes ani_round{0%{border-radius:60% 40% 45% 55% / 65% 50% 50% 35%;}25%{border-radius:58% 42% 75% 25% / 76% 46% 54% 24%;}50%{border-radius:50% 50% 33% 67% / 55% 27% 73% 45%;}75%{border-radius:33% 67% 58% 42% / 63% 68% 32% 37%;}}


/* news_area */
#news_area li .img_box , #book_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 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: 1460px) {
    #custom_area #productTabs{gap:50px}
    #custom_area .workframe{margin:0 auto;}
    #about_area .sloganTop{transform: translate(10%, 10%);line-height: 1.3;}
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#product_list { width: 500px; margin-left: 30px; }
	#product_list li .clip { height: 590px; }
	#about_area .about_sub_2 { top: -20vw; right: 6vw; }
}
@media screen and (min-width: 1281px){
	#about_area .d_flex { align-items: center; }
	#about_area .img_item:after{position:absolute;display:block;bottom: 7%;left: -40%;content:url(/images/44/img-block.svg);z-index:-1;width: 100%;transform: scaleX(-1);}
	#about_area .workframe:after{position:absolute;display:block;top:-115px;right:0;content:"";background: white;z-index:-1;height: 230px;width:180px;opacity: .75;border-radius: 60% 40% 45% 55% / 65% 50% 50% 35%;animation: ani_round 5s infinite;}
	#about_area .sloganBtm:after{position:absolute;display:block;top:0;right:-30px;content:"";background:#262626;z-index:-1;height: 120%;width:1px;opacity:0.1}
	#about_area .more_btn{position:absolute;bottom:60px;right: -10px;}
	#about_area .more_btn a{width:50px;display:flex;flex-direction:column;align-items:center;padding:20px 25px}
	#about_area .more_btn font{text-align:center;margin-bottom:20px}
}
@media screen and (max-width: 1280px) {
    #custom_area:after{zoom:60%}
    #about_area .info_item:after{right:0;bottom: -100px;}
    #about_area .info_item:before{right: 50%;top: -50%;}
    #about_area .info_item{transform:unset;width: 100%;display: flex;flex-direction: column;margin: 0;}
}
@media screen and (max-width: 1024px) {
    #photo_area .workframe{margin:0 auto;border: 0;padding: 13px 0;}
    #custom_area:after{top: 35%;right: 0;}
    #custom_area .tabs{display:flex;flex-direction: row;gap: 60px;}
    #custom_area #productTabs{display:flex;flex-direction: column-reverse;align-items: flex-start;}
    #about_area .info_item:before{right: 10%;top: -50%;}
    #about_area .img_item img{aspect-ratio:4/3;width: 100%;}
    #about_area .img_item{width:100%;transform: unset;margin: 0;display: block;order: 2;}
    #about_area .sloganTop{width: 60%;position: relative;margin-bottom: 70px;}
    #about_area .sideLogo{display:none;}
	#about_area .workframe{display:flex;flex-direction: column;}
}
@media screen and (max-width: 980px) {
    #about_area{padding-bottom: 13vw;}
    #custom_area .tab_content .infoBox, #custom_area .tab_content .clip{float:none;width: 100%;}
    #custom_area .tabs{gap:40px}
    section .title_box{font-size: 26px;}
    #custom_area .entitle_box, #photo_area .entitle_box{font-size: 45px;letter-spacing: .5px;}
    #about_area .info_item:before{top: -5%;}
    #about_area .sloganTop{width: 90%;transform: unset;left: 5%;font-size: 60px;}
	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) {
    #custom_area .workframe:before{left:auto;right: -40px;top: 20%;width: 130px;}
    #custom_area .tabs{flex-wrap: wrap;gap: 0;}
    #about_area .info_item:before{width: 60px;top: -12%;}
    #about_area .sloganTop{font-size: 50px;}
	section { padding: 10vw 0; }
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	section .clip img { height: auto; }
	#product_list { width: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
}