#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {font-size: 30px;display: flex;align-items: center;gap: 30px;letter-spacing: 2px;font-weight: 500;margin-bottom: 10px;}
section .title_box span{width:67px;height: 1px;background: var(--info);display: flex;align-items: center;position: relative;}
section .title_box span:after{content:'';width: 70px;aspect-ratio: 1/1;border-radius: 50px;background: #f8c79a;opacity: .3;z-index: -1;right: -55px;position: absolute;}
section .entitle, section .entitle * {font-size: 62px;display: flex;align-items: center;gap: 15px;font-weight: 600;font-family: "Poppins", sans-serif;text-transform: uppercase;}
section .entitle b{color: #bf7128;}
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%); }

/* product_area */
#product_area{padding-bottom:0}
#product_area:after{content:'';position: absolute;left: 0;bottom: 0;height: 125px;width: 20vw;background: linear-gradient(90deg, #e5a768, #db9857);}
#product_area .workframe{margin-right:0;width: min(90%, 1695px);display: grid;grid-template-columns: 46% 53%;justify-content: space-between;}
#product_area .areatit {margin: 0 15px 60px;}
#product_area .areatit p{font-size:25px;margin-bottom: 15px;font-weight: 500;letter-spacing: 1px;}
#product_area .areatit article{color:#666666;font-size:18px;letter-spacing: 1px;word-break: keep-all;width: 70%;}
#product_area .arrowBox {display: flex;align-items: center;justify-content: flex-end;gap: 12px;position: absolute;right: 0;bottom: -20px;}
#product_area .arrowBox a {width: 60px;aspect-ratio: 1/1;background: var(--info);font-size: 18px;line-height: 1;cursor: pointer;transition: .25s ease;border-radius: 50%;display: flex !important;align-items: center;justify-content: center;}
#product_area .arrowBox a.product_prev svg { transform: scaleX(-1); }
#product_area .arrowBox a svg {width: 18px;height: 18px;fill: var(--white);}
#product_area .arrowBox a:hover svg { fill: white; }
#product_area .arrowBox a:hover { background: var(--secondary); color: #fff; border-color: var(--secondary); }
#product_area .slick-slider, #product_area .slick-list, #product_area .slick-track{transition: all 0s ease-in-out;-webkit-transition: all 0s ease-in-out;}
#product_list li .clip{aspect-ratio: 369 / 466;}
#product_sub_list li .clip{height: 100%;}
#product_area li .clip:before{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 75%));z-index: 1;}
#product_list li .clip img{object-position: 5% 50%;}
#product_area .info_box{bottom:0;left: 0;display: flex;flex-direction: column;align-items: flex-start;gap: 15px;z-index: 2;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#product_list li{margin:0 15px;}
#product_area li >a{z-index:5}
#product_list li .info_box{justify-content: space-between;padding: 35px;height: 100%;}
#product_list li .info_box .h3{writing-mode: vertical-lr;font-size: 25px;letter-spacing: 4px;display: flex;align-items: center;gap: 13px;line-height: 1.3;flex-direction: row;flex-wrap: nowrap;height: 250px;}
#product_list li .info_box .h3:after{content:'';width: 1px;height: 100px;display: block;background: white;}
#product_area li article{font-size: 18px;height: auto;-webkit-line-clamp: 2;font-weight: 300;}
#product_sub_list *{height:100%}
#product_sub_list li .info_box{display: grid;justify-content: flex-end;align-items: end;align-content: end;padding: 40px 70px;height: auto;gap: 25px;}
#product_sub_list li .info_box .h3{font-size: 36px;letter-spacing: 4px;display: flex;gap: 13px;line-height: 1.3;flex-direction: row;height: auto;align-items: center;}
#product_sub_list li .info_box .h3:after{content:'';width: 100px;height: 1px;display: block;background: white;}

/* fakeNumber */
#fakeNumber{background: linear-gradient(90deg, #e3a563, #bf7128 115%);width: 77vw;display: grid;grid-template-columns: repeat(3, 1fr);box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding: 90px 0 70px 15%;}
#fakeNumber *{color:white;font-size: 20px;}
#fakeNumber .number{display:flex;align-items: baseline;gap: 5px;}
#fakeNumber .number *{font-family: "Poppins", sans-serif;line-height: 1.2;}
#fakeNumber .number b{font-size:80px;font-weight: 500;}
#fakeNumber .number span{font-size:50px;}

/* about_area */
#about_area .bg_box {position:absolute;right: 0;width: calc(20% + 54px);left: unset;}
#about_area .bg_box:before{content:'';position: absolute;width: 100%;height: 100%;z-index: 1;top: 0;left: 0;background: linear-gradient(180deg, rgb(255 255 255 / 0%), #fff);}
#about_area .bg_box img{height: 100%;animation: moveObject 50s linear infinite;width: 100%;object-fit: cover;}
@keyframes moveObject{0%{object-position:0% 50%}50%{object-position:100% 50%}100%{object-position:0% 50%}}
#about_area {z-index: 5;position: relative;padding-bottom: 0;}
#about_area .areatit{width: min(90%, 1370px);margin: 0 auto 90px;}
#about_area .workframe {margin: 0;width: min(90%, 1390px);display: grid;grid-template-columns: 50% 41%;justify-content: space-between;}
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article p {margin-bottom: 30px;line-height: 190%;letter-spacing: .05px;font-weight: 400;font-size: 21px;text-align: justify;}
#about_area .clip {-webkit-clip-path: url(#clip_about);clip-path: url(#clip_about);}
#about_area .about_sub_1 { width: 350px; top: -10vw; left: -3vw; }
#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 {width: 470px;top: -26vw;right: 14vw;}
#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 { width: 300px; bottom: -11vw; left: 35vw; }
#about_area .about_sub_3 .clip { -webkit-clip-path: url(#clip_about_sub_3); clip-path: url(#clip_about_sub_3); }
#about_area #about_info h1{line-height:1.5;font-size: 30px;font-weight: 600;letter-spacing: 1px;margin-bottom: 30px;width: 95%;}

/* contact_area */
#contact_area{margin-top:190px;background-image: url(/images/44/bg.png);background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;display: grid;grid-template-columns: 50% 1.3fr 1fr;align-content: start;}
#contact_area .info{background-image: url(/images/44/cobg.jpg);background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;margin-left: -1px;display: flex;align-items: flex-end;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding: 0 80px;position: relative;flex-direction: column;justify-content: center;gap: 35px;}
#contact_area .info:before{content:url(/images/44/img-logo.png);position: absolute;left: 20px;top: 0;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);}}
#contact_area .info *{color:white;fill:white;}
#contact_area .info p{word-spacing: 100vw;text-align: end;font-size: 30px;letter-spacing: 1px;}
#contact_area .info a{display: inline-grid;align-items: center;justify-content: flex-end;text-align: end;grid-template-columns: 50px 1fr;align-content: center;gap: 10px;}
#contact_area .info a span{font-family: "Poppins", sans-serif;font-size: 45px;line-height: 1;font-weight: 500;}
#contact_area .info a svg{height:50px;width: 50px;}

/* custom_area */
#custom_area .parallax_svg { --parallax_wave: color-mix(in srgb, var(--secondary) 80%, white); }
#custom_area .parallax_svg.top { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M1440 64V16.67c-90 24.285-138.35 6.45-203.49-2.259-59.67-7.998-119.29 10.198-179.14 5.869-78.82-5.09-135.28-41.99-217.6-1.58C797.82 34.596 776 42.875 718.33 38.326c-164.07-15.317-329.57 33.862-490.92 5.169C150.6 31.857 79.33-8.834 0 16.62V64h1440z' fill='black'/%3E%3C/svg%3E"); }
#custom_area .parallax_svg.bottom { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0v47.33c90-24.285 138.35-6.45 203.49 2.259 59.67 7.998 119.29-10.198 179.14-5.869 78.82 5.09 135.28 41.99 217.6 1.58C642.18 29.403 664 21.125 721.67 25.674c164.07 15.317 329.57-33.862 490.92-5.169C1289.4 32.143 1360.67 72.834 1440 47.38V0H0z' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0v47.33c90-24.285 138.35-6.45 203.49 2.259 59.67 7.998 119.29-10.198 179.14-5.869 78.82 5.09 135.28 41.99 217.6 1.58C642.18 29.403 664 21.125 721.67 25.674c164.07 15.317 329.57-33.862 490.92-5.169C1289.4 32.143 1360.67 72.834 1440 47.38V0H0z' fill='black'/%3E%3C/svg%3E"); }
#custom_area ul li >div { margin: auto; width: 70% }
#custom_area ul li .clip { width: 250px; height: 250px; -webkit-clip-path: url(#clip_custom); clip-path: url(#clip_custom); }
#custom_area ul li h3 { margin: 10px 0 5px; font-size: 20px; }
#custom_area ul li article { font-weight: 300; font-size: 14px; overflow: hidden; margin: 10px 0 60px; height: 66px; text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* news_area */
#news_area .bg_box {background-size: contain;background-repeat: no-repeat;background-position: bottom;width: 821px;height: 503px;right: 0;bottom: -5px;left: unset;top: unset;}
#news_area .workframe{width: min(90%, 1360px);display: grid;grid-template-columns: 260px 1fr;}
#news_area .areatit{display:flex;flex-direction: row-reverse;justify-content: flex-end;gap: 10px;}
#news_area li  {padding: 30px 50px 30px 25px;border-bottom: 1px solid #dadada;display: grid;grid-template-columns: 135px 1fr;gap: 50px;width: 80%;align-items: center;}
#news_area li .timebox{display:flex;flex-direction: column;align-items: center;border-right: 1px solid #dadada;}
#news_area li .timebox *{text-align:center;font-family: "Poppins", sans-serif;text-transform: uppercase;font-size: 17px;font-weight: 500;letter-spacing: 0.5px;}
#news_area li .time:first-child {font-weight: 500;font-size: 58px;line-height: 1;color: #d38237;letter-spacing: 3px;}
#news_area li .tit a {background: #eaeaea;border-radius: 50px;font-size: 20px;letter-spacing: 1px;padding: 3px 0;position: relative;z-index: 5;}
#news_area li .tit {display: grid;grid-template-columns: 120px 1fr;gap: 30px;align-items: center;}
#news_area li .h3 {height: auto;line-height: 150%;font-size: 26px;-webkit-line-clamp: 1;font-weight: 600;}
#news_area li article{margin-top:10px;font-size: 20px;-webkit-line-clamp: 2;height: auto;letter-spacing: .5px;}

/* 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) {
    #about_area .bg_box{width: calc(20% + 46px);}
    #about_area .workframe{width: min(90%, 1170px);}
    #contact_area .info a span{font-size: 35px;}
}
@media screen and (max-width: 1460px) {
    #contact_area{grid-template-columns: 50% 3.3fr 1fr;}
    #about_area .workframe{width: min(90%, 980px);}
    #about_area .bg_box{width: calc(20% + 39px);}
    #product_area .workframe{width: 98%;grid-template-columns: 49% 50%;}
}
@media screen and (max-width: 1400px) {
    #fakeNumber{padding-left:5%}
}
@media screen and (max-width: 1280px) {
    #about_info{padding: 10px 10% 0;}
    #about_area .clip img{width:100%}
    #product_list li .info_box .h3{ height: 200px;}
    #about_area .bg_box{width: calc(20% + 34px);}
    #about_area .workframe{width: 70%;display: flex;flex-direction: column;gap: 40px;}
}
@media screen and (min-width: 1025px) {
    #news_area .areatit *{writing-mode: vertical-lr }
    #news_area .areatit span{width:1px;height: 67px;display: flex;align-items: center;}
    #news_area .areatit span:after{right: auto;bottom: -55px;}
}
@media screen and (max-width: 1024px) {
    #about_area .bg_box{width: calc(20% + 27px);}
    #product_area .workframe{display:block;width: 90%;margin: 0 auto;}
    #product_sub_list{display:none;}
    #product_area .arrowBox{right:10%}
    #product_list li .info_box .h3{ height: 250px;}
    #fakeNumber .number b{font-size: 60px;}
    #fakeNumber .number span{font-size:40px}
    #fakeNumber *{font-size: 17px;}
    section{padding:10vw 0}
    #contact_area{grid-template-columns: 1fr;margin-top: 110px;}
    #contact_area .photo{width: 75%;}
    #contact_area .info{margin-left:0;padding: 50px 15%;}
    #news_area .workframe{grid-template-columns:1fr;gap: 40px;}
    #news_area .areatit{display:flex;flex-direction: column;align-items: flex-start;}
}
@media screen and (max-width: 980px) {
    #news_area li{padding: 30px 20px 30px 0;width: 90%;}
    #about_info{padding: 10px 2.5% 0;}
	section { padding: 12vw 0 ; }
    #fakeNumber{width:100%}
    #about_area .bg_box, #contact_area .photo{display:none}
    #about_area .workframe{width:90%;margin: 0 auto;}
}
@media screen and (max-width: 550px) {
	section { padding: 15vw 0 ; }
    #news_area li .tit{display:flex;flex-direction: column;align-items: flex-start;gap: 5px;}
    #news_area li .tit a {font-size:16px;padding: 3px 20px;}
    #news_area li .h3{font-size:20px}
    #news_area li article{font-size:16px;-webkit-line-clamp: 1;}
    #news_area li{grid-template-columns: 90px 1fr;gap: 20px;padding: 30px 0;width: 100%;}
    #news_area li .timebox *{font-size:15px;}
    #news_area li .time:first-child{font-size: 45px;}
    #contact_area .info:before{zoom:80%;left: 10px;}
    #contact_area .info{padding: 50px 8%;}
    #about_area article p{font-size: 18px;}
    #about_area #about_info h1{width:100%;font-size: 25px;}
    #about_area .areatit{margin-bottom: 30px;}
    #fakeNumber{grid-template-columns: 1fr;padding: 40px 20% 60px;gap: 30px;}
    #product_area:after{width:100%;background: linear-gradient(90deg, #e3a563, #bf7128 115%);}
    #product_area .arrowBox, #news_area .bg_box{display:none;}
    #product_area .areatit article{width:100%;word-break: break-all;}
    section .entitle, section .entitle *{font-size: 45px;gap: 10px;}
    section .title_box{font-size:25px;}
}