#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {font-size: 26px;line-height: 1.6;font-weight: 500;letter-spacing: 3px;margin-bottom: 40px;}
section .entitle_box {padding-bottom: 1vw;font-size: 65px;text-transform: uppercase;font-family: "Karla", sans-serif;font-weight: 800;color: #111827;letter-spacing: 5px;line-height: 1;}
section .entitle_box:first-letter{color:var(--primary)}
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 .bg_box {z-index:-1;width: 55%;border-radius: 0 100px 100px 0;}
#product_area .tit{width: 40%;margin: 0 0 0 auto;}
#product_area .workframe{width: min(90%, 1600px);}
#product_list li{margin:0 20px}
#product_list li .clip{border-radius:30px;}
#product_list li .clip:before{content:'';position: absolute;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));width: 100%;height: 100%;bottom: 0;z-index: 1;}
#product_list li img{aspect-ratio:3/4}
#product_list li .info_box{bottom:0;width: 100%;height: 100%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;display: flex;align-items: flex-start;z-index: 2;flex-direction: column;justify-content: flex-end;padding: 40px;}
#product_list li .info_box .num{font-family: "Karla", sans-serif;top: 30px;color: white;font-size: 14px;font-weight:600;writing-mode: vertical-lr;letter-spacing: 2px;display: flex;gap: 10px;flex-direction: row;align-items: center;}
#product_list li:hover .info_box .num{top:20px}
#product_list li .info_box .num:after{content:'';display: block;width: 1px;height: 50px;background: white;}
#product_list li .info_box .h3{font-size:20px;font-weight: 500;letter-spacing: .5px;}
#product_list li .info_box p{height:0;-webkit-line-clamp: 2;font-size: 14px;opacity: .85;letter-spacing: 1px;}
#product_list li:hover .info_box p{height: 46px;margin-top: 20px;}
#product_list li >a{z-index:5}
#product_area .arrowBox{display:flex;gap: 30px;justify-content: flex-end;margin-top: 60px;margin-right: 10%;}
#product_area .arrowBox a{background: var(--third);width: 80px;aspect-ratio: 1/1;display: flex !important;border-radius: 50px;align-items: center;justify-content: center;}
#product_area .arrowBox a:hover{background: var(--primary);}
#product_area .arrowBox a svg{fill:white;width: 21px;height: 21px;}
#product_area .arrowBox a#product_prev svg{transform:scaleX(-1);}
#product_list .slick-track{transition: all 0s ease-in-out;-webkit-transition: all 0s ease-in-out;}

/* about_area */
#about_area {z-index: 5;padding: 8vw 0 5vw 0;}
#about_area .workframe {display:grid;grid-template-columns: 40% 50%;justify-content: space-between;width: min(90%, 1370px);margin: 0 10% 0 auto;}
#about_area .entitle_box{line-height:1.7}
#about_area h1 {font-size: 26px;line-height: 1.6;font-weight: 500;letter-spacing: 1px;word-break: keep-all;margin-bottom: 40px;}
#about_area h1:after{content:'';display: block;width: 40px;height: 3px;background: var(--primary);margin-top: 30px;}
#about_area article p {margin-bottom: 30px;line-height: 210%;letter-spacing: .5px;font-weight: 400;text-align: justify;}
#about_area .clip {}
#about_area .about_sub_1 {width: 300px;top: 2vw;left: -3vw;animation: aboutImg2Animation 10s ease-in-out infinite;}
#about_area .about_sub_1 .clip img {aspect-ratio: 3/4;}
#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: 210px;bottom: -50px;left: -50px;aspect-ratio: 1/1;background: #364859;border-radius: 50%;display: flex;align-items: center;justify-content: center;animation: aboutImgAnimation 10s ease-in-out infinite;border: 20px solid var(--white);}
#about_area .about_sub_3 .clip {display:flex;flex-direction: column;align-items: center;justify-content: center;}
#about_area .about_sub_3 .number{font-size: 70px;font-weight: bold;line-height: 1.3;color: var(--primary);}
#about_area .about_sub_3 .label{font-size:14px;letter-spacing: 1px;color: var(--white);}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(10px);transform:translateY(20px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
@keyframes aboutImg2Animation{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 .about-bg-shape {
  position:absolute;left:-450px;width:70%;bottom:110px;height:60%;background-color:rgb(243 253 255);transform:skewX(
15deg) translateX(50%);z-index:-1;
}

/* custom_area */
#custom_area{margin-top: -160px;}
#custom_area .workframe{background: var(--white);width: min(90%, 1200px);border-radius: 2.5rem;box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.35);overflow: hidden;border: 1px solid var(--gray-100);}
#custom_area ul{display:flex;align-items: center;justify-content: center;gap: 50px;padding: 42px 0 32px 0;margin: 0 auto;}
#custom_area ul li{width: 10%;}
#custom_area ul li:hover{transform: translateY(-10px);}
#custom_area ul li >div{display:flex;flex-direction: column;align-items: center;}
#custom_area ul li .clip{display:flex;justify-content: center;align-items: center;background: #dffbff;width: 50px;aspect-ratio: 1/1;border-radius: 10px;}
#custom_area ul li:hover .clip { transform: rotate(10deg); background: var(--third); }
#custom_area ul li:hover .clip svg{fill:white}
#custom_area ul li svg{width:25px;height:25px;fill: var(--complement);}
#custom_area ul li .h3 {margin: 10px 0 0;font-size: 20px;font-weight: 700;}
#custom_area ul li article {font-size: 13px;color: #999;font-weight: 100;text-transform: uppercase;}

#custom_area #promo-bar {max-width: 940px;margin: 0px auto 0;padding: 25px;border-top: 1px solid #f0f0f0;display: flex;flex-direction: column;align-items: center;}
#custom_area #promo-bar >p{text-align: center;letter-spacing: 2px;font-size: 18px;color: var(--third);font-weight: 400;}
#custom_area #promo-bar >p a{font-size: 18px;color: var(--triadic1);vertical-align: baseline;font-weight: 400;}
#custom_area #promo-bar .promo-text {font-size: 18px;color: var(--third);letter-spacing: 1px;font-weight: 400;text-align: center;}
#custom_area #promo-bar .promo-text b {color: #d63031;font-weight: 900;margin: 0 4px;font-size: 22px;vertical-align: initial;}
#custom_area #promo-bar .promo-badge {display: inline-block;background: var(--secondary);color: var(--black-rgb);padding: 4px 12px;border-radius: 100px;font-size: 13px;font-weight: 700;margin-bottom: 5px;}
#custom_area #promo-bar .line-btn { display: inline-flex; align-items: center; gap: 10px; background: #12b508; color: #fff; text-decoration: none; padding: 12px 30px; border-radius: 50px; font-weight: 700; font-size: 15px; transition: 0.3s; box-shadow: 0 4px 15px rgba(6,199,85,0.2); margin-top: 14px; }
#custom_area #promo-bar .line-btn svg { width: 30px; height: 30px; }
#custom_area #promo-bar .line-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(6,199,85,0.3); }
#custom_area #promo-bar .line-btn span { color: var(--black-rgb); }

/* 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:before{content:url(/images/44/img-moveman.png);position: absolute;right: -5%;top: -10%;zoom: 12%;opacity: .5;}
#photo_area .item {background-image:url(/images/44/img-background.jpg);border-radius: 35px;padding: 55px;outline: 3px solid white;outline-offset: -25px;margin: 0 20px;}
#photo_area .item .tit{display:grid;grid-template-columns: 70px 1fr;gap: 20px;align-items: center;margin-bottom: 20px;}
#photo_area .item .tit img{width:100%;aspect-ratio: 1/1;border-radius: 50px;object-fit: cover;}
#photo_area .item .tit .name p{font-size: 20px;font-weight: 500;color: var(--third);margin-bottom: 2px;}
#photo_area .item .tit .name .text{display:flex;align-items: flex-start;gap: 3px;font-size: 14px;flex-direction: column;}
#photo_area .item .tit .name .text span{width: 20px;height:1px;background: #999;display: none;}
#photo_area .item .tit .name .text font{color: #fecb80;display: inline-block;padding: 6px 0;border-radius: 50px;font-size: 14px;line-height: 1;width: 90px;}
#photo_area .item article{height: 110px;-webkit-line-clamp: 4;text-align: justify;letter-spacing: 1px;}
#photo_area .slick-dots li button{width: 10px;height: 2px;padding:6px}
#photo_area .slick-dots li button:before{content:'';width: 10px;height: 1px;line-height:0px;background: #000;}
#photo_area .slick-dots{position:relative;margin-top: 25px;bottom:0}
#photo_area .slick-dots li{width: 10px;height: 1px;display:inline-flex;background: none;border-radius: unset;margin: 0 5px;outline-offset: unset;outline: unset;}

@media screen and (max-width: 1680px) {
    #about_area .about_sub_1{display:none;}
}
@media screen and (max-width: 1460px) {
	#about_area .workframe{margin:0 auto;}
    #about_area .entitle_box{line-height:1.2;margin-bottom: 15px;}
}
@media screen and (max-width: 1024px) {
    #custom_area ul{width: 100%;}
    #photo_area:before{zoom: 7%;top: 5%;}
}
@media screen and (max-width: 980px) {
    #product_area .tit{width: 85%;margin: 0 auto;}
    #product_area .bg_box{width:100%;border-radius:0}
    #about_area .workframe{grid-template-columns:1fr;gap: 30px;}
    #custom_area ul {display:grid;grid-template-columns: repeat(3, 1fr);padding: 40px 50px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
    #custom_area ul li{width:auto}
    #custom_area{margin-top:-50px;}
	section { padding: 10vw 0; }
	#about_area .about-bg-shape { left: -310px; width: 100%; bottom: auto; top: 230px; height: 70%; }
}
@media screen and (max-width:760px) {
	#custom_area .workframe >p { display: block; padding: 0 40px 50px; }
	#photo_area .item { outline-offset: -15px; padding: 45px; }
	#custom_area ul li article { font-size: 10px; width: 100%; text-align: center; }
	#photo_area .item .tit .name .text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
	#photo_area .item .tit .name .text span,#photo_area:before { display: none; }
	#about_area .about_sub_3 .number { font-size: 45px; line-height: 1; }
	#about_area .about_sub_3 .label { font-size: 13px; }
	section { padding: 14vw 0; }
	section .entitle_box { font-size: 45px; letter-spacing: 2px; }
	#custom_area ul { gap: 20px 5px; padding: 40px 10px; }
	#about_area h1 { word-break: break-all }
	#about_area .about_sub_3 { width: 140px; border: 10px solid var(--white); left: -10px; height: 140px; }
	#about_area .about-bg-shape { left: -300px; width: 130%; }
}