#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,#news_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%); }
}
#news_area .nw_left { padding-left: 1vw; }
section#news_area .title_box { position: relative; width: auto; left: 0vw; }
section#news_area { padding: 5vw 0; display: grid; grid-template-columns: 40% 60%; align-items: center; }
section#news_area:before { content: url(/images/44/img-bird2.svg); position: absolute; left: 24%; top: 8%; width: 175px; animation: ani_updown 8s ease-out forwards infinite; z-index: 2; }
section#news_area .workframe { margin: 0; }
section#news_area .more_btn:not(#about_area .more_btn):after { width: 93%; height: 27px; }
section#news_area .more_btn:not(#about_area .more_btn) { padding: 10px 40px 9px 40px; }
/* 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; border-radius: 0 0 80px 0; padding-bottom: 160px; }
#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:1470px) {
  #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; }
  section#news_area { grid-template-columns: 50% 40%; }
  section#news_area .workframe { width: 1440px; }
}
@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; }
  section#news_area { display: flex; }
  section#news_area .workframe { width: 100%; }
  section#news_area { display: flex; flex-direction: column; }
  #news_area .nw_left { width: 100%; }
  #news_area .nw_right { width: 100%; }
  section#news_area:before { left: auto; right: 10vw; width: 110px; }
}
@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; }
}