#wrap .videobox{width:100%;height: 100%;top: 0;z-index: -10;background: #c22222;}
#wrap .videobox .video-bg{opacity:.5}

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .h2title_box {font-size: 20px;font-weight: 500;font-family: "Cormorant Garamond", serif;}
section .title_box {color: #313131;padding-bottom: 3vw;font-size: 30px;font-weight: 500;}
section .entitle_box {font-family: "Cormorant Garamond", serif;font-size: 95px;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%); }

/* product_area */
#product_area .title_box { color: white; }
#product_area .titboxx { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; }
#product_area .titboxx .box {display: flex;align-items: baseline;gap: 0 20px;}
#product_area .titboxx .box * { margin: 0; padding: 0; }
#product_area .morebox {display: flex;align-items: center;gap: 20px;}
#product_area .morebox .btn { padding: 0; display: flex; gap: 12px; }
#product_area .morebox .btn svg { fill: white; }
#product_area .morebox .btn a#product_prev svg { transform: scaleX(-1); }
#product_area .worksnum {position: relative;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;width: 60px;height: 60px;font-size: 0;}
#product_area .worksnum:before {content: "";position: absolute;top: 50%;left: 49%;transform: translate(-50%,-50%) rotate(35deg);width: 1px;height: 90%;background: white;}
#product_area .worksnum .current {grid-column: 1;grid-row: 1;font-size: 25px;text-align: center;color: white;font-family: "Arimo",sans-serif;line-height: 1;}
#product_area .worksnum .total {grid-column: 2;grid-row: 2;font-size: 25px;text-align: center;font-family: "Arimo",sans-serif;color: white;line-height: 1;}
#product_area .moree {border-left:1px solid #fff;padding-left: 30px;margin-left: 20px;display: inline-flex;gap: 20px;align-items: center;}
#product_area .moree b{background:#f9f5f0;display: inline-flex;width: 50px;aspect-ratio: 1/1;border-radius: 50px;align-items: center;justify-content: center;}
#product_area .moree:hover b{background:var(--complement)}
#product_area .moree b svg{fill:#fc5230;width: 15px;height: 15px;}
#product_area .moree:hover b svg{fill:white;    animation: arrow-move-right-data-v-1d069175 1s .2s;}

/* product_list */
#product_list,#product_list * { transition: unset; -webkit-transition: unset; }
#product_list li * { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; }
#product_list li:hover img { transform: scale(1.1); }
#product_list li { margin: 0 15px; }
#product_list li img { aspect-ratio: 1/1 }
#product_list li span { font-family: "Cormorant Garamond",serif; font-size: 15px; }
#product_list li .h3 { font-size: 20px; height: auto; }
#product_list li article { color: #f9f5f0; font-size: 15px; height: auto; -webkit-line-clamp: 2; font-weight: 300; margin-top: 10px; }
#product_list li .info_box { padding: 20px 20px 0; position: relative; }
#product_list li .info_box svg { right: 45px; width: 15px; height: 15px; fill: white; top: 58px; }
#product_list li:hover .info_box svg { animation: arrow-move-right-data-v-1d069175 1s .2s; }

/* about_area */
#about_area {padding-top: 20vw;z-index: 2;padding-bottom: 7vw;}
#about_area:after{content:'';position: absolute;width: calc(100% - 120px);height: 100%;top: 0;background: #f9f5f0;}
#about_area .allwrap{position:absolute;left: -120px;top: 0;z-index: 1;}
#about_area .allwrap #canvas-container{position:absolute;bottom: 290px;}
#about_area .workframe{margin:0;width: min(90%, 1620px);display: grid;grid-template-columns: 44% 48%;justify-content: space-between;align-items: end;}
#about_area .title_box {padding-bottom: 0;word-spacing: 100vw;letter-spacing: 5px;font-size: 40px;}
#about_area article {width: 65%;}
#about_area article p{font-size: 16px;font-weight: 400;margin-bottom: 40px;letter-spacing: 1.5px;line-height: 2;}
#about_area .clip {aspect-ratio: 71 / 54;}
#about_area .clip img{height:100%}
#about_area .about_sub_1 {to;bottom: 50px;right: 60px;}
#about_area .about_sub_1 .clip {aspect-ratio: 1/1;}
#about_area .tit {right: 0;writing-mode: vertical-rl;top: -150px;}
#about_area .pageh1 {margin-bottom: 40px;font-size: 16px;font-weight: 400;width: 65%;letter-spacing: 1.5px;line-height: 2;}
#about_area #about_img{margin-bottom: 65px;}

/* 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 .workframe{display:grid;grid-template-columns: 20% 75%;justify-content: space-between;}
#news_area .title_box {padding-bottom: 105px;}
#news_area ul {display: flex;gap: 45px;flex-direction: column;}
#news_area li:before{content:'';width: 0;height: 1px;position: absolute;left: 0;bottom: 0;background: var(--primary);z-index: 1;}
#news_area li:hover:before{width:100%;}
#news_area li:after{content:'';position: absolute;bottom: 0;left: 0;background: #e0e0e0;width: 100%;height: 1px;}
#news_area li .info_box {margin: 0 0 40px;}
#news_area li .top{display:flex;align-items: center;gap: 30px;}
#news_area li .time {font-weight: 400;font-size: 16px;color: #494949;font-family: "Arimo", sans-serif;}
#news_area li .top a{display:inline-flex;gap: 10px;align-items: center;}
#news_area li .top a:before{content:'';display: block;width: 6px;aspect-ratio: 1/1;border-radius: 50px;background: var(--primary);}
#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 {height: auto;line-height: 150%;font-size: 18px;margin-top: 7px;}

/* 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: 1280px) {
    #about_area .about_sub_1{width:200px;}
}
@media screen and (max-width: 1024px) {
    section {padding: 8vw 0;}
    #news_area .workframe{grid-template-columns: 30% 65%;}
    #about_area .pageh1, #about_area article{width: 90%;}
    #about_info{margin-left: 10%;}
    #about_area .tit{position:relative;top: 0;writing-mode: unset;}
    #about_area .title_box{ line-height: 1.5; margin-bottom: 20px;}
    #about_area .workframe{display:flex;flex-direction: column;width: 75%;}
}
@media screen and (max-width: 980px) {
    section .clip img{height:auto}
    #product_area .titboxx .box{display:flex;flex-direction: column;}
    #product_area .moree{display:none;''}
    #about_area .about_sub_1{bottom: 53%;right: 0;}
    #about_area .workframe{width:80%}
    #about_area:after{width: calc(100% - 50px);}
	section {padding: 10vw 0;}
    #product_area .titboxx{align-items: flex-end;}
    #news_area .workframe{display:flex;flex-direction: column;}
    #news_area .more_btn{display:none;}
    #news_area .title_box{padding-bottom: 55px;}
}
@media screen and (max-width: 550px) {
    #about_area .pageh1, #about_area article{width: 100%;}
    #about_area .title_box{font-size:30px;letter-spacing: 4px;}
    #about_info{margin: 50px auto 0;width: 90%;}
    #about_area .about_sub_1{width: 150px;bottom: unset;top: 30.5%;}
    #about_area .workframe{width:100%;display: flex;align-items: flex-start;}
    #about_area .allwrap #canvas-container{bottom: 350px;}
    #about_area{padding-top: 60vw;padding-bottom: 14vw;}
    #about_area:after{width:100%;}
	#about_area #about_img {width: 95%;margin: 0;}
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
    section .entitle_box{font-size: 75px;}
    section .title_box{font-size:28px}
    #product_area .worksnum .current, #product_area .worksnum .total{font-size: 17px;}
    #product_area .titboxx{display:block;}
    #product_area .morebox{display:flex;justify-content: flex-end;margin-top: -40px;}
	#product_area .worksnum { width: 40px; height: 40px; }

}