#wrap { z-index: 5; }
#wrap:after {content: '';width: 0;height: 0;border-style: solid;border-width: 0 100vw 4vw 0vw;border-color: transparent transparent #191919;position: absolute;top: -4vw;}
#wrap:before {content: '';width: 0;height: 0;border-style: solid;border-width: 0 0vw 4vw 100vw;border-color: transparent transparent #f1f1f1;position: absolute;top: -3.9vw;z-index: 2;}
/* section */
section { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box {font-weight: 500;padding-bottom: 20px;font-size: max(1.25 * (1vw + 1vh)/2,20px);letter-spacing: 3px;color: #888;margin-bottom: 2rem;letter-spacing: 5px;text-transform: uppercase;font-weight: 500;display: inline-block;border-bottom: 1px solid #ddd;padding-bottom: 10px;}
section .emtitle_box {padding-bottom: 1vw;font-style: unset;font-size: max(4.5 * (1vw + 1vh)/2,35px);font-family: "Anybody",serif;font-weight: 500;display: block;text-transform: uppercase;line-height: 1;}
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%); }
.webh1 { display: flex; flex-direction: column; align-items: center; margin-bottom: 15px; font-weight: 500; padding-bottom: 20px; font-size: max(2 * (1vw + 1vh)/2,20px); letter-spacing: 3px; }
.webBox  section .title_box .pageh1{
    position: relative;
    top: unset;
    font-size: max(1.25 * (1vw + 1vh) / 2, 20px);
    color: #888;
}
.hero-deco-line {
    width: 2px;
    height: 100px;
    background: linear-gradient(0deg, #111, #ccc);
    margin-bottom: 30px;
    position: absolute;
    left: calc(50% - 1px);
    margin-top: -80px;
    z-index: 7;
}


/* Information List Style for Projects Section with Images */
#projects-section {padding: 120px 0;background: #ffffff;position: relative;z-index: 2;background: linear-gradient(#f1f1f1, #ffffff);}
#projects-section .info-list { margin-top: 60px; border-top: 2px solid #111; }
#projects-section .info-item {display: flex;align-items: center;border-bottom: 1px solid #e0e0e0;padding: 20px 30px;text-decoration: none;color: #111;transition: all 0.4s ease;position: relative;gap: 30px;}
#projects-section .info-item:hover {background: linear-gradient(110deg,transparent 20%,rgba(255,255,255,0.8) 40%,rgba(240,240,240,0.6) 60%,transparent 80%),#fbfbfb;box-shadow: inset 0 0 20px rgba(255,255,255,0.8);border-bottom-color: #111;}
#projects-section .info-meta {display: flex;flex-direction: column;align-items: flex-start;width: 40px;flex-shrink: 0;gap: 15px;}
#projects-section .info-num { font-size: 1.4rem; font-weight: 900; font-family: 'Helvetica Neue',sans-serif; color: #888; line-height: 1; }
#projects-section .info-category { font-size: 0.7rem; font-weight: 700; border: 1px solid #111; padding: 4px 12px; border-radius: 30px; letter-spacing: 1px; text-transform: uppercase; display: inline-block; }
#projects-section .info-image-wrap {width: 200px;height: 200px;flex-shrink: 0;overflow: hidden;background: #f0f0f0;border-radius: 2px;display: flex;border-radius: 5555px;margin: 10px;}
#projects-section .info-img {width: 100%;height: 100%;object-fit: cover;filter: grayscale(100%);transition: transform 0.8s cubic-bezier(0.16,1,0.3,1),filter 0.4s ease;}
#projects-section .info-item:hover .info-img { transform: scale(1.08); filter: grayscale(0%); }
#projects-section .info-content {flex: 1;padding-right: 0%;display: flex;flex-direction: column;}
#projects-section .info-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 12px; transition: color 0.3s; }
#projects-section .info-desc { font-size: 0.95rem; color: #666; line-height: 1.7; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#projects-section .info-arrow { font-size: 1.5rem; font-weight: 300; color: #111; transition: color 0.4s cubic-bezier(0.16,1,0.3,1); }
#projects-section .info-item:hover .info-arrow { color: #888; }
#projects-section .info-item:hover .info-title { color: #555; }
		
#projects-section .tit { display: flex; flex-direction: column; align-items: center; }

#about-section .about-text-box {padding: 20px 0 50px;}
#about-section .about-desc {line-height: 2;margin-bottom: 30px;color: #dedede;font-size: 1.1rem;font-weight: 400;letter-spacing: 1px;}
#about-section .service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 35px; }
#about-section .service-item {display: flex;align-items: center;font-size: 1.05rem;color: #f3f3f3;font-weight: 400;letter-spacing: 2px;}
#about-section .service-item::before {content: '';display: block;width: 25px;height: 1px;background: #f3f3f3;margin-right: 15px;}
#about-section .about-slogan {font-size: 1.25rem;font-weight: 900;color: #f3f3f3;padding-left: 20px;border-left: 3px solid #f3f3f3;margin-bottom: 10px;line-height: 1.6;letter-spacing: 1.5px;}


/* product_area */
#product_area { padding: 150px 0 100px; background: linear-gradient(to bottom,rgb(240 240 240),rgb(0 0 0/0%)); }
#product_area .workframe { width: min(1680px,90%); }
#product_list * { transition: all 0s ease-in-out; -webkit-transition: all 0s ease-in-out; }
#product_area:before { content: ""; position: absolute; right: 11vw; animation-name: fish; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 2s; }
@keyframes fish {
  0% { transform: rotate(-4deg); }
  100% { transform: rotate(4deg); }
}
#product_area .tit { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; }
#product_area .btn { position: absolute; width: 100%; bottom: 42%; padding: 0; display: flex; justify-content: space-between; z-index: 1; pointer-events: none; }
#product_area .btn a { pointer-events: auto; }
#product_list:after { content: ''; width: 100%; position: absolute; bottom: 7.5%; left: 0; z-index: -1; height: 100%; border-radius: 500px; }
#product_list li { display: flex; align-items: center; justify-content: center; margin: 20px 40px; flex-direction: column; opacity: 0; }
#product_list li.slick-active { opacity: 1; }
#product_list li:hover .clip { transform: translateY(-20px); }
#product_list li img { aspect-ratio: 3/3; object-fit: contain; object-position: 50%; width: 90%; }
#product_list li .clip { background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 666px; aspect-ratio: 1/1; all 0.3s animation-timing-function: ease-in-out; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
#product_list li:before { content: ""; position: absolute; z-index: 2; bottom: 0; animation-name: fish; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 2s; opacity: 0; left: -20px; }
#product_list li.slick-current:before { opacity: 1 }
#product_list li .nfo_box { margin-top: 6px; }
#product_list li .nfo_box em { color: #831212; font-family: "Lato",serif; font-size: 18px; font-weight: 400; font-style: unset; display: block; margin-bottom: 10px; text-transform: uppercase; }
#product_list li .nfo_box .h3 { font-size: 20px; height: 38px; font-weight: 500; letter-spacing: 1px; }
#product_list li .infott { margin: 40px 0 60px; display: none; }
#product_list li .infott p { line-height: 2 }
/* about_area */
#about_area {background: var(--primary);border-radius: 0;padding: 15vw 0 11vw;position: relative;background-image: url(/images/44/indexabouut.jpg);background-size: cover;}
#about_area:before {content: '';width: 0;height: 0;border-style: solid;border-width: 0 100vw 4vw 0vw;border-color: transparent transparent #ffffff;position: absolute;top: -0.1vw;z-index: 2;transform: scaleY(-1);}
#about_area:after {content: '';width: 0;height: 0;border-style: solid;border-width: 0 100vw 4vw 100vw;border-color: transparent transparent #f0f0f0;position: absolute;top: 0vw;z-index: 2;transform: scaleY(-1);z-index: 0;}

#about_area * { color: var(--white) }
#about_area .more_btn {background: #868686;}
#about_area .workframe { display: grid; grid-template-columns: 40% 60%; }
#about_area #about_info { width: 100%; }
#about_area article p { line-height: 210%; font-weight: 400; overflow: hidden; margin: 10px 0 30px; height: 102px; text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#about_area .clip { -webkit-clip-path: url(#clip_about); clip-path: url(#clip_about); }
#about_area .about_sub_1 { top: -2vw; left: 24vw; animation-name: fish; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 2s; display: none; }
#about_area .about_sub_1 .clip { -webkit-clip-path: url(#clip_about_sub_1); clip-path: url(#clip_about_sub_1); }
#about_area .about_sub_2 { left: 30vw; z-index: 2; bottom: 0; display: none; }
#about_area .about_sub_2 .clip { -webkit-clip-path: url(#clip_about_sub_2); clip-path: url(#clip_about_sub_2); }
#about_area .about_sub_3 {display: flex;flex-direction: column;align-items: center;position: relative;top: -4vw;right: -2vw;}
#about_area .about_sub_3 .clip { -webkit-clip-path: url(#clip_about_sub_3); clip-path: url(#clip_about_sub_3); }
@keyframes drinkbox {
  0% { top: 0px; }
  100% { top: -20px; }
}
#about_area #fakeNumber {display: flex;position: relative;margin: 65px 0;display: none;}
#about_area #fakeNumber * { color: var(--primary) }
#about_area #fakeNumber li { position: relative; display: flex; align-items: center; justify-content: center; width: 150px; aspect-ratio: 1/1; padding: 20px; background: var(--white); border-radius: 500px; }
#about_area #fakeNumber li:after { content: ''; border: 1px dashed #ededed; position: absolute; width: 115%; height: 115%; border-radius: 500px; animation-name: circle; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 40s; }
@keyframes circle {
  0% { transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0); }
  100% { transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); }
}
#about_area #fakeNumber ul { display: flex; gap: 50px; align-items: flex-end; height: auto; justify-content: center; }
#about_area #fakeNumber li .eva { display: flex; flex-direction: column; align-items: center; }
#about_area #fakeNumber li .h2 { color: #2b2a2a; display: flex; flex-direction: column; align-items: center; font-size: max(0.8*(1vw + 1vh)/2,16px); font-weight: 400; }
#about_area #fakeNumber li .h2 b { font-family: "Anybody",serif; font-size: max(3*(1vw + 1vh)/2,45px); font-weight: 600; line-height: 1; display: block; margin: 5px 0; }
#about_area #fakeNumber li p { font-size: 17px }
/* faq_list */
#faq_list { margin-top: 50px; width: 80%; }
#faq_list,#faq_list * { transition: unset; -webkit-transition: unset; }
#faq_list li { border-bottom: 1px rgb(255 255 255/30%) solid; }
#faq_list li:first-child { border-top: 1px rgb(255 255 255/30%) solid; }
#faq_list li .title { padding: 20px 0; }
#faq_list li .title font { vertical-align: top; }
#faq_list li .title .txt { width: calc(100% - 50px); font-size: 20px; margin-right: 10px; }
#faq_list li .title .icon { width: 40px; height: 34px; }
#faq_list li .title .icon:before,#faq_list li .title .icon:after { position: absolute; margin: auto; width: 14px; height: 2px; background: var(--white); display: block; top: calc((100% - 2px)/2); left: calc((100% - 14px)/2); content: ""; }
#faq_list li .title .icon:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
#faq_list li .info { padding: 0 0 20px; font-size: 16px; font-weight: 200; }
#faq_list li.current .title .icon:after { transform: rotate(180deg); -webkit-transform: rotate(180deg); }
/* custom_area */
#custom_area { padding: 0 }
#custom_area:before{content:"";position: absolute;width: 1px;height: 100%;right: 2vw;background: #dadada;}
#custom_area .workframe { width: 90%; margin: 0; display: grid; grid-template-columns: 50% 42%; justify-content: space-between; }
#custom_area .box {padding: 5vw 0 2vw;}
#custom_area .bg img { height: 100%; object-fit: cover; }
#faqlist,#faqlist * { transition: unset; -webkit-transition: unset; }
#faqlist { overflow-y: scroll; height: 430px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }

#faq-section #faqlist {list-style: none;overflow-y: auto;max-height: 550px;padding-right: 15px;scroll-behavior: smooth;margin-top: 20px;}
#faq-section #faqlist::-webkit-scrollbar { width: 5px; }
#faq-section #faqlist::-webkit-scrollbar-track { background: transparent; }
#faq-section #faqlist::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
#faq-section #faqlist li { border-bottom: 1px solid #f3f4f6; padding: 30px 0; transition: background-color 0.3s ease; }
#faq-section #faqlist li:first-child { padding-top: 0; }
#faq-section #faqlist li:last-child { border-bottom: none; padding-bottom: 0; }
#faq-section .faq-title { display: flex; align-items: flex-start; justify-content: space-between; text-decoration: none; color: inherit; cursor: pointer; transition: opacity 0.3s ease; }
#faq-section .faq-title:hover { opacity: 0.7; }
#faq-section .faq-icon {flex-shrink: 0;font-family: "Anybody", serif;font-size: 18px;font-weight: 600;width: 44px;height: 44px;background: linear-gradient(135deg, #7a7a7a, #272727);color: #ffffff;display: inline-flex;align-items: center;justify-content: center;border-radius: 50%;margin-right: 20px;transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;box-shadow: 0 4px 10px rgba(0,0,0,0.08);}
#faq-section .faq-txt { font-size: 20px; font-weight: 500; color: #374151; flex: 1; display: flex; align-items: center; min-height: 44px; padding-right: 20px; transition: color 0.3s ease; }
#faq-section .faq-arrow { flex-shrink: 0; width: 12px; height: 12px; border-right: 2px solid #9ca3af; border-bottom: 2px solid #9ca3af; transform: rotate(45deg); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease; margin-top: 14px; }
#faq-section .faq-info { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; opacity: 0; }
#faq-section .faq-info-inner { padding: 20px 0 10px 64px; color: #6b7280; font-size: 16px; font-weight: 400; text-align: justify; line-height: 1.8; transform: translateY(-10px); transition: transform 0.5s ease; }
#faq-section li.current .faq-icon { transform: rotate(360deg); background: linear-gradient(135deg, #111827, #000000); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
#faq-section li.current .faq-txt { color: #000000; font-weight: 600; }
#faq-section li.current .faq-arrow { transform: rotate(-135deg); border-color: #111827; margin-top: 18px; }
#faq-section li.current .faq-info { max-height: 800px; opacity: 1; }
#faq-section li.current .faq-info-inner { transform: translateY(0); }


/* news_area */
#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 {background: #f3f3f3;padding-bottom: 7vw;}
#book_area .tit { display: flex; flex-direction: column; align-items: center; }
#book_area:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 100vw 4vw 0vw; border-color: transparent transparent #191919; position: absolute; top: -4vw; }
#book_area:before {content: '';width: 0;height: 0;border-style: solid;border-width: 0 0vw 4vw 100vw;border-color: transparent transparent #f1f1f1;position: absolute;top: -3.8vw;z-index: 2;}
#book_area .btn { padding: 0; display: flex; width: 90%; margin: 0 auto; position: absolute; justify-content: space-around; top: 18%; left: 5%; }
#book_area .btn button svg { width: 40px; height: 40px; }
#book_area .btn button#book_prev svg { transform: scaleX(-1); }
#book_area .tt { padding-bottom: 4vw; font-size: 17px; }
.btn button{width: auto;background: unset;}
#book_area .workframe { width: min(90%,1240px); }
#book_area li {background: #fff;border-radius: 60px 60px 0 0px;margin: 0 20px;overflow: hidden;}
#book_area li:hover span{color: #FFC107;}
#book_area li img { aspect-ratio: 4/3; object-fit: cover; }
#book_area li .h3 { font-weight: 500; height: 45px; font-size: 21px; -webkit-line-clamp: 1; }
#book_area li p { color: #5d5858; -webkit-line-clamp: 2; margin: 15px 0; height: 55px; font-size: 15px; display: none; }
#book_area li .info { padding: 30px 40px 40px; }
#book_area li span {color: #dfdfdf;font-size: 16px;}
.obslink {width: 16px;height: 16px;aspect-ratio: 1/1;position: absolute;right: 20px;bottom: 20px;background: linear-gradient(135deg, #7a7a7a, #272727);border-radius: 666px;padding: 20px;}
#book_area li:hover .obslink {background: linear-gradient(135deg, #4b4a4a, #272727);}
#book_area  .obslink img { aspect-ratio: 1/1; object-fit: contain; }
/* photo_area */
#photo_area .item { width: 260px; height: 200px; }
#photo_area .item img { height: 100%; object-fit: cover; }
@media screen and (max-width:1680px) {
  #about_area .about_sub_1 { left: 9vw; top: 56%; width: 50vw; }
  #about_area .about_sub_2 { left: 35vw; }
}
@media screen and (max-width:1470px) {
  section .title_box { margin-bottom: 1rem; }
  #book_area .btn { top: 14.5%; }
  #about_area .workframe { grid-template-columns: 46% 53%; }
  #about-section .about-text-box { padding: 10px 0 20px; }
  #about-section .service-list { margin-bottom: 20px; }
  #about-section .about-desc { margin-bottom: 20px; font-size: 1rem; }
  #product_list li .nfo_box .h3 { font-size: 18px; }
  #product_list li:before,#product_area:before { zoom: 70%; }
  #product_list li { margin: 20px 20px; }
  #about_area .about_sub_3 { right: -1vw; }
  #product_list { width: 90%; margin: 0 auto; }
  #faq-section #faqlist { min-height: 420px; }
}
@media screen and (max-width:1280px) {
  #faqlist li .txt { font-size: 18px; }
}
@media screen and (max-width:1024px) {
  #product_list li:before,#product_area:before { zoom: 60%; }
  #product_list { width: 90%; }
  #news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width:980px) {
  #custom_area .workframe { grid-template-columns: 1fr; width: 100%; }
  #custom_area .box { width: 90%; margin: 0 auto; padding: 8vw 0; }
  #book_area .tt { padding-bottom: 7vw; }
  #book_area .btn { justify-content: space-between; top: 13.5%; }
  @keyframes drinkbox {
    0% { top: 40% }
    100% { top: 50% }
  }
  #faq_list { width: 100%; }
  #about_area .workframe { grid-template-columns: 1fr; }
  #product_list:after { border-radius: 20px; bottom: 0; }
  #product_list li:before { bottom: unset; top: 22%; }
  #product_list li { margin: 0 15px; }
  #product_area .tit { position: relative; }
  #product_list { width: 90%; padding-bottom: 0; }
  #product_area { padding: 90px 0 70px; }
  #about_area #about_info { margin-bottom: 8vw; display: flex; flex-direction: column; align-items: center; }
  #about_area .about_sub_2 { top: auto; bottom: 28vw; width: 30vw; left: 17vw; }
  #about_area .about_sub_3 { width: 29vw; right: 5vw; display: none; }
  #custom_area .bg img { display: none; }
  .tit { display: flex; flex-direction: column; align-items: center; }
}
@media screen and (max-width:768px) {
  .hero-deco-line { height: 60px; margin-top: -30px; }
  /* Responsive for Projects list with image */
  #projects-section { padding: 90px 0; }
  #projects-section .info-item { flex-direction: column; align-items: flex-start; padding: 35px 0; gap: 20px; }
  #projects-section .info-item:hover {}
  #projects-section .info-meta { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 5px; }
  #projects-section .info-image-wrap { width: 100%; height: 220px; margin-right: 0; }
  #projects-section .info-content { padding-right: 0; width: 100%; }
  #projects-section .info-arrow { display: none; }
  #custom_area .bg img { height: auto; }
  #about_area .about_sub_3 { width: 45vw; right: -16vw; }
  #about_area .about_sub_1 { left: 1vw; top: 64%; width: 80vw; }
  #about_area { border-radius: 0; }
  #product_list li .nfo_box .h3 { font-size: 20px; }
  section, #product_area { padding: 13vw 0; }
  #product_sub_list>div { margin: 10px auto 50px; }
  #product_sub_list li { width: 150px; }
  #product_sub_list li .clip { height: 150px; }
  #product_list { width: 70vw; }
  #product_list li .info_box { width: 45vw; height: 30vw; }
  #product_list li img { width: min(250px,100%); }
  #about_area #fakeNumber ul { display: flex; flex-wrap: wrap; }
  #product_area .btn a { width: 30px; }
  #custom_area:before{display:none;}
  #faq-section #faqlist{max-height: unset;min-height: unset;height: auto;}
  #custom_area .box{padding: 60px 0;}
  #book_area{padding: 60px 0;}
  #about_area{padding: 100px 0 110px 0;}
}
@media screen and (max-width:550px) {
  #book_area .btn { display: none; }
  @keyframes drinkbox {
    0% { top: 50% }
    100% { top: 55% }
  }
  #product_list li { margin: 0 20px; }
  #product_list li .nfo_box { margin-top: 20px; }
  #product_list li:before { top: 13%; zoom: 47%; }
  #product_area:before { zoom: 40%; }
  #product_sub_list li { margin: 10px; width: 35vw; }
  #product_sub_list li .clip { height: 35vw; }
  #product_list { width: 90vw; }
  #product_list li .clip img { margin: 0 auto; }
  #product_list li .info_box { width: 55vw; height: 40vw; }
  #about-section .about-desc{margin: 30px 0;}
  #about-section .service-list{gap: 10px;margin: 0 0 30px;}
  #about_area #about_img { width: 80vw; }
  #about_area .about_sub_2 { bottom: 68vw; width: 50vw; left: 3vw; }
  #news_area li .row { margin: auto; width: 280px; }
  #faqlist li .info { padding: 20px 0 0 }
}
@media screen and (max-width:480px) {
  #book_area li.row { margin: auto; width: 250px; }
}