.fancybox-content{width: 100% !important;}


.section_area {padding: 4vw 0;}
.section_area .title {position: relative;margin-bottom: 3.5em;letter-spacing: .1em;}
.section_area .h2tit {margin: 0;color: #1e2b2f;font-size: clamp(30px, 3vw, 40px);line-height: 1.6;font-weight: 600;letter-spacing: 0.03em;}
.section_area .h2tit span{vertical-align: baseline;color: transparent;background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;line-height: 1.6;font-weight: 600;letter-spacing: 0.03em;font-size: clamp(30px, 3vw, 40px);}
.section_area .title p{margin: 3px 0 0;font-size: clamp(18px,1.8vw,29px);line-height: 1.2;font-weight: 600;letter-spacing: 0.04em;color: #b88a52;font-family: "Karla", sans-serif;text-transform: uppercase;}

/* wrap */
#wrap{overflow:hidden;}

/* about_area */
#about_area {position: relative;overflow: hidden;padding: 6vw 0;background-image: url(/images/01/aboutBg.png);background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
#about_area:before{content:url(/images/01/img-molecule2.png);position: absolute;bottom: 50px;left: 30px;z-index: 7;animation: aboutMoleculeFloat 8s ease-in-out infinite;transform-origin: center center;}
@keyframes aboutMoleculeFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:0.72;filter:blur(0)}35%{transform:translate3d(14px,-18px,0) rotate(4deg) scale(1.03);opacity:0.95;filter:blur(0.2px)}70%{transform:translate3d(-8px,-10px,0) rotate(-3deg) scale(0.98);opacity:0.82;filter:blur(0)}}
#about_area * { box-sizing: border-box; }
#about_area .workframe {position: relative;z-index: 2;display: grid;grid-template-columns: 54% 46%;align-items: center;width: 100%;}
#about_area .topvita_about_visual { position: relative; min-height: 690px; }
#about_area .about_word { position: absolute; left: 19%; top: 22%; z-index: 1; font-size: clamp(80px,10vw,168px); line-height: 0.8; font-weight: 800; letter-spacing: 0.02em; color: rgba(255,255,255,0.62); text-transform: uppercase; pointer-events: none; will-change: transform; }
#about_area .about_photo {overflow: hidden;z-index: 3;}
#about_area .about_photo img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
#about_area .about_green_arc { position: absolute; left: -18%; bottom: 2%; width: 88%; aspect-ratio: 1/0.72; border-radius: 0 0 100% 0; z-index: 4; background: linear-gradient(135deg,rgba(177,230,34,0.92),rgba(98,194,65,0.55) 58%,rgba(255,255,255,0.05)); mix-blend-mode: multiply; opacity: 0.9; pointer-events: none; will-change: transform; }
#about_area .about_green_arc:after { content: ""; position: absolute; inset: 18% 0 0 16%; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,0.25),transparent 55%); }
#about_area .about_molecule { position: absolute; z-index: 5; pointer-events: none; }
#about_area .molecule_01 { left: 2%; bottom: 4%; width: 130px; animation: topvitaFloat 7s ease-in-out infinite; }
#about_area .molecule_01 img { width: 100%; display: block; }
#about_area .topvita_about_content {position: relative;padding: 0 7vw 0 0;}
#about_area .about_text { max-width: 650px; margin-bottom: 42px; }
#about_area .about_text h1 {margin: 0 0 30px;color: #1e2b2f;font-size: clamp(28px,3vw,40px);line-height: 1.6;font-weight: 600;letter-spacing: 0.03em;word-break: keep-all;}
#about_area .about_text p {margin: 0 0 22px;color: #1f1f1f;line-height: 2.2;letter-spacing: 0.02em;text-align: justify;}
#about_area .about_info_grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;align-items: center;}
#about_area .about_stat_card,#about_area .about_lab_img {border-radius: 28px;overflow: hidden;}
#about_area .about_stat_card {position: relative;min-height: 178px;padding: 26px 25px;display: flex;flex-direction: column;justify-content: flex-end;isolation: isolate;aspect-ratio: 1/1;}
#about_area .about_stat_card .card_icon {position: absolute;top: 26px;right: 25px;display: block;}
#about_area .about_stat_card .card_icon img {width: 38px;object-fit: contain;aspect-ratio: 1/1;}
#about_area .about_stat_card strong {display: block;font-size: clamp(50px, 4.2vw, 70px);line-height: 1;font-weight: 700;letter-spacing: 0.05em;font-family: "Karla", sans-serif;color: white;}
#about_area .about_stat_card span {display: block;margin-top: 10px;font-size: 20px;line-height: 1.4;letter-spacing: 0.06em;color: white;}
#about_area .card_green { color: #fff; background: linear-gradient(135deg,#a8d927 0%,#43ad57 100%); box-shadow: 0 24px 50px rgba(89,176,67,0.22); }
#about_area .card_light {color: #22343c;background-image: url(/images/01/img-about-core.jpg);background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
#about_area .card_dark { color: #fff; background: linear-gradient(135deg,#2b3c48 0%,#1f2f3a 100%); box-shadow: 0 24px 50px rgba(24,42,53,0.18); }
#about_area .about_lab_img {background: #eef6f8;height: 100%;}
#about_area .about_lab_img img { width: 100%; height: 100%; object-fit: cover; }
#about_area .about_stat_stack {display: grid;grid-template-rows: 1fr 1fr;gap: 20px;}
#about_area .about_stat_stack .about_stat_card.card_light * {color: var(--info);}
#about_area .about_stat_stack .card_dark strong {letter-spacing: -0.05em;}
@keyframes topvitaFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg);opacity:0.72;}50%{transform:translate3d(16px,-18px,0) rotate(4deg);opacity:1;}}
@keyframes topvitaBgBreath{0%,100%{opacity:0.62;transform:translate3d(0,0,0);}50%{opacity:0.82;transform:translate3d(-8px,0,0);}}

/* award_area */
#award_area{padding-top:0;overflow: hidden;}
#award_area .videobox{position: absolute;width: 100%;height: 100%;z-index: -1;}
#award_area video{width:100%;position:absolute;left: 0px; top: 0px;}
#award_area .fourboxs {width: 105%;display: grid;grid-template-columns: 300px 300px;justify-content: space-between;bottom: 100px;left: -2.5%;z-index: -1;}
#award_area .fourboxs .item{display:grid;grid-template-columns: 100px 1fr;gap: 20px;padding: 40px 0;align-items: center;}
#award_area .fourboxs .item:nth-child(1), #award_area .fourboxs .item:nth-child(2){border-bottom: 1px solid #c6c6c6;}
#award_area .fourboxs .icon{box-shadow: 10px 15px 40px rgb(87 94 98 / 15%);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
#award_area .fourboxs .tit{font-size:20px;font-weight: 500;margin-bottom: 3px;letter-spacing: 0.08em;}
#award_area .fourboxs p{font-size:15px;letter-spacing: 0.08em;}
#award_area .morebox {display:flex;justify-content: center;margin-top: 30px;}

/* product_area */
#product_area{text-align:center;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
#product_area .fixTxt{right: -3%;top: -10%;}
#product_area .title{padding: 0 60px;}
#product_area .list_box{width: min(90%, 1440px);margin: 0 auto;position: relative;}
#product_area .product_arrow_box{position:absolute;top: 15px;right: 60px;display: flex;align-items: center;gap: 15px;}
#product_area .product_arrow_box button{background: var(--secondary);width: 79px;aspect-ratio: 1/1;display: flex !important;border-radius: 50%;align-items: center;justify-content: center;}
#product_area .product_arrow_box button:hover{animation: productArrowBreath 1.2s ease-in-out infinite;background: linear-gradient(130deg,#94dc22 0%,#5fcb3f 48%,#35af5a 100%);}
#product_area .product_arrow_box svg{width:16px;height:16px;fill:white}
#product_area .product_arrow_box button.product_prev svg{transform:scaleX(-1);}
@keyframes productArrowBreath{0%,100%{transform:scale(1);box-shadow:0 12px 28px rgba(40,50,60,0.12),0 0 0 rgba(126,200,70,0);}50%{transform:scale(1.08);box-shadow:0 16px 34px rgba(80,170,60,0.22),0 0 18px rgba(130,210,70,0.38);}}
#product_list li{margin: 15px 23px;}

/* portfolio_area */
#portfolio_area{display:flex;align-items: center;justify-content: center;padding: 5vw 0;}
#portfolio_area .videobox{position: absolute;width: 100%;height: 100%;z-index: -1;display: flex;align-items: center;justify-content: center;overflow: hidden;}
#portfolio_area video{width:100%;position:absolute;}
#portfolio_area .fixTxt{top: -100px;left: -10px;}
#portfolio_area .title{margin:0}
#portfolio_area .title article{letter-spacing: 0;margin: 50px 0 120px;font-weight: 500;font-size: 18px;}
#portfolio_list{width: min(90%, 1540px);display: grid;grid-template-columns: 21% 76%;justify-content: space-between;align-items: center;}
#portfolio_list li{margin:0 25px;background: white;border-radius: 35px;box-shadow: 5px 5px 20px rgb(74 74 74 / 5%);overflow: hidden;}
#portfolio_list li .img_box{position:relative;}
#portfolio_list li .h3 {position:absolute;height: auto;background: #5aac4d;left: 23px;top: 22px;border-radius: 10px;padding: 8px 18px 10px;}
#portfolio_list li .h3 font{height:auto;font-size: 17px;color: white;line-height: 1;font-weight: 500;}
#portfolio_list .info_box {padding: 30px;display: flex;flex-direction: column;align-items: flex-start;gap: 5px;}
#portfolio_list .info_box button{width: 100%;display: flex;align-items: center;justify-content: center;padding: 0;border-radius: 50px;letter-spacing: 0;gap: 10px;}
#portfolio_list .info_box button:hover{background: var(--thrid);}
#portfolio_list .info_box button svg{width: 25px;height: 20px;fill: white;}
#portfolio_list .info_box p.txt_clamp{color: #646464;font-size: 15px;-webkit-line-clamp: 2;font-weight: 300;letter-spacing: 0.03em;text-align: justify;width: 100%;height: auto;}
#portfolio_list .info_box [data-action="buy"] , #product_list .info_box .contact_btn {padding: .8em .8em;position: relative;font-size: .9em;color: white;z-index: 11;background: var(--info);}
#portfolio_list .price_box {justify-content: center;margin: 10px 0 0;}
#portfolio_list .info_box p:last-child{width:100%;margin-top: 10px;}
#portfolio_list .price_box *{margin-bottom:0;letter-spacing: 0;font-size: 16px;letter-spacing: 0;color: #666;vertical-align: baseline;}
#portfolio_list .info_box .price_box ins {text-decoration: none;font-weight: 500;color: #941515;font-size: 20px;font-family: "Karla", sans-serif;letter-spacing: -.5px;margin: 0;}

/* newcustom_area */
#newcustom_area{display:grid;grid-template-columns: 62% 38%;padding: 0;}

/* news_area */
#news_area, #custom_area{padding-bottom:2vw}
#news_area .title {padding: 0 13%;display: grid;align-items: center;gap: 35px;grid-template-columns: 170px 135px 1fr;}
#news_area .title p{margin:0;word-spacing: 100vw;border-left: 1px solid #16352b;color: #16352b;font-size: 20px;padding-left: 30px;line-height: 1.2;}
#news_area .title a{display: inline-flex;align-items: center;gap: 10px;color: var(--primary);}
#news_area ul{border-top:1px solid #ededed}
#news_area li{border-bottom:1px solid #ededed;overflow: hidden;position: relative;padding: 55px 0;}
#news_area li >div{width: min(90%, 750px);display: grid;grid-template-columns: 1fr 380px;margin: 0 auto;align-items: center;gap: 75px;transform: translateX(-30px);}
#news_area li .info_box{position:relative;z-index:3;width:100%;vertical-align:middle;transition:transform 0.45s ease}
#news_area li .time{display:block;margin:0 0 18px;color: #b88a52;font-size: 16px;line-height:1;font-weight: 600;letter-spacing: 0.04em;font-family: "Karla", sans-serif;}
#news_area li .h3{margin:0 0 18px;color:#252b2f;font-size: 18px;line-height: 1.6;font-weight: 500;letter-spacing:0.04em;-webkit-line-clamp:2;height: auto;}
#news_area li article{margin:0;color: #5d5d5d;font-size: 14px;line-height:1.9;letter-spacing:0.04em;-webkit-line-clamp:2;height: auto;}
#news_area li .img_box{position:relative;z-index:2;aspect-ratio:392 / 211;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 18px 45px rgba(40,50,55,0.08)}
#news_area li .img_box:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,0.38) 45%,transparent 66%);transform:translateX(-120%);transition:transform 0.75s ease;pointer-events:none}
#news_area li .img_box img{display:block;width:100%;height:100%;transition:transform 0.75s ease,filter 0.75s ease}
#news_area li .more{position:absolute;left: -34%;z-index:5;width: 150px;aspect-ratio: 1/1;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;background: linear-gradient(130deg,#94dc22 0%,#5fcb3f 48%,#35af5a 100%);color:#fff;font-size: 18px;line-height:1.35;font-weight: 400;letter-spacing:0.08em;text-align:center;transition:opacity 0.45s ease,transform 0.45s ease,box-shadow 0.45s ease;pointer-events:none}
#news_area li .more:before{content:url(/images/01/img-newtext.png);position:absolute;inset:7px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;line-height:1;font-weight:700;letter-spacing:0.12em;animation: newsMoreCircle 30s linear infinite;pointer-events:none}
#news_area li .atag_item{z-index:6}
#news_area li:hover .more{opacity:1;}
#news_area li:hover >div{transform: translateX(115px);}
#news_area li:hover .img_box img{transform:scale(1.06);filter:brightness(1.04)}
#news_area li:hover .img_box:before{transform:translateX(120%)}
@keyframes newsMoreCircle{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* custom_area */
#custom_area .workframe{width: 100%;}
#custom_area .title{padding: 0 12%;}
#custom_area .slick-dots li button{width: 10px;height: 2px;padding:6px}
#custom_area .slick-dots li button:before{content:'';width: 10px;height: 1px;line-height:0px;background: #000;}
#custom_area .slick-dots{position: absolute;margin-top: 15px;bottom:0;width: min(100%, 160px);text-align: left;left: 19%;}
#custom_area .slick-dots li{width: 10px;height: 1px;display:inline-flex;background: none;border-radius: unset;margin: 0 5px;outline-offset: unset;outline: unset;}
#custom_area .customlist .item {position:relative;background: #f4f3ee;border-radius: 35px;padding: 45px 50px 60px;margin: 0 2.5% 40px;}
#custom_area .customlist .item article{margin-top:35px;width: min(90%, 270px);-webkit-line-clamp: 5;height: auto;color: #313030;text-align: justify;letter-spacing: .04em;margin-bottom: 180px;line-height: 2;}
#custom_area .customlist .item p{font-size:18px;font-weight: 500;}
#custom_area .customlist .item >img{position:absolute;right: -50px;bottom: -40px;width: 350px;}

@media screen and (max-width: 1700px){
    #custom_area .customlist .item >img{width: 300px;}
    #news_area li:hover >div{transform: translateX(65px);}
    #news_area li >div{width: min(90%, 650px);}
    #news_area li .more{left: -200px;}
}
@media screen and (max-width: 1440px){
    #custom_area .customlist .item article{margin-bottom: 110px;}
    #custom_area .customlist .item >img{width: 220px;}
    #news_area li:hover >div{transform: translateX(95px);}
    #news_area li >div{width: min(90%, 580px);grid-template-columns: 1fr 260px;}
    #portfolio_area .title article{font-size: 16px;}
    #award_area video{width:auto;height:100%}
    #portfolio_area .fixTxt{width: 150px;top: -60px;}
    #product_area .fixTxt{width: 250px;top: -15%;}
    #about_area .workframe{grid-template-columns: 50% 50%;}
    #about_area .about_stat_card .card_icon img{width: 33px;}
}
@media screen and (max-width: 1280px){
    #news_area li:hover >div{transform: translateX(75px);}
    #news_area li .more{left: -150px;width: 120px;font-size: 14px;}
    #news_area li .more:before{zoom:80%}
    #portfolio_list{grid-template-columns: 30% 65%;}
}
@media screen and (max-width: 1024px){
    #news_area, #custom_area{padding-bottom:5vw}
    #custom_area .customlist .item >img{right: -20px;width: 200px;}
    #custom_area .workframe {width:90%}
    #news_area li >div{width: min(90%, 730px);grid-template-columns: 1fr 340px;}
    #news_area .title, #custom_area .title{padding: 0 8%;}
    #newcustom_area{display:block;}
    .section_area{padding:8vw 0}
    #award_area .fourboxs{position:relative;bottom: 0;left: 0;z-index: unset;grid-template-columns: 1fr 1fr;gap: 50px;width: 95%;margin: 0 auto;}
    #award_area .videobox{top:0}
    #award_area{padding-top:5vw}
    #about_area .about_text{max-width:unset}
    #about_area .workframe{display:block;}
    #about_area .about_photo{width: 90%;}
    #about_area .about_photo:before{content:url(/images/01/img-molecule2.png);position: absolute;bottom: 0px;right: -30px;z-index: 7;animation: aboutMoleculeFloat 8s ease-in-out infinite;transform-origin: center center;}
    #about_area:before{display:none;}
    #about_area .topvita_about_content{padding:0;width: 90%;margin: 30px auto 0;}
    #product_area .product_arrow_box{width: 90%;position:relative;right: 0;margin: 20px auto 0;display: flex;justify-content: center;}
}
@media screen and (max-width: 768px){
    #custom_area .customlist .item >img{width: 330px;}
    #custom_area .customlist .item{margin: 0 20px 40px;}
    #news_area li >div{transform: translateX(0);gap: 45px;width: 75%;grid-template-columns: 1fr 280px;}
    #portfolio_area .title, #product_area .title, #custom_area .title{margin-bottom: 3.5em;padding: 0 20px;}
    #portfolio_area .title article{margin: 16px 0;}
    #portfolio_list{display:block;}
    #portfolio_area video{width:auto;height:100%}
    #portfolio_area .fixTxt{display: none;}
    #product_area .fixTxt{width: 200px;top: -10%;}
    #about_area .about_photo:before{zoom:80%}
    #partner_area .partnerlist{grid-template-columns: repeat(4, 1fr);}
    #about_area .more_btn{position:relative;margin-top: 21px;right: 0;}
    #category_area{padding-bottom:7vw}
    #new_product_list li .item_row{margin: 30px auto;}
    #new_product_list li{grid-template-columns:1fr}
    .section_area, #portfolio_area, #news_area, #custom_area{padding:10vw 0;}
	#about_area .img_box { width: 100%; max-width: inherit; }
}
@media screen and (max-width: 640px) {
    #custom_area .customlist .item article{width:100%;margin: 15px 0 5px;letter-spacing: .002em;}
    #custom_area .customlist .item >img{right: -10px;width: 210px;}
    #custom_area .customlist .item{padding: 30px 35px 210px;}
    #custom_area .customlist .item span img{width: 22px;}
    #news_area li .more{display:none;}
    #news_area li >div{display:flex;flex-direction: column;gap: 30px;width: 80%;}
    #news_area li:hover >div{transform: translateX(0);}
    #news_area .title a{position:absolute;right: 7vw;bottom: 0;}
    #news_area .title{display:flex;flex-direction: column;align-items: flex-start;gap: 4px;}
    #news_area .title p{padding:0;word-spacing: unset;border: 0;font-size: 18px;}
    #product_area .product_arrow_box{width: 100%;gap: 6px;}
    #product_area .product_arrow_box button{width: 60px;}
    #portfolio_area .title, #product_area .title, #custom_area .title{margin-bottom:1.5em;padding: 0 30px;}
    #award_area .fourboxs{grid-template-columns:1fr;width: 80%;gap: 0;}
    #award_area .fourboxs .item{padding: 30px 0;grid-template-columns: 80px 1fr;border-bottom: 1px solid #c6c6c6;}
    #award_area .fourboxs .item:last-child{border:0}
    #about_area .about_info_grid, #about_area .about_stat_stack{grid-template-columns: repeat(2, 1fr);}
    #about_area .about_stat_stack{grid-column: 1 / 3;grid-template-rows: unset;}
    #about_area .about_lab_img{aspect-ratio:1/1}
    #about_area .about_photo:before{zoom:55%}
    #about_area .about_photo{width: 95%;left: -5%;position: relative;}
    #partner_area .partnerlist{grid-template-columns: repeat(3, 1fr);gap: 15px;}
    #category_area h2, #category_area h1{padding:0 5%;word-break: keep-all;}
    #new_product_list li .h3{font-size:19px;}
    #new_product_list li .buybtn{justify-content: space-between;gap: 0;display: flex;align-items: stretch;}
    #new_product_list li .buybtn >p{display:flex;}
    #new_product_list li .buybtn button, #new_product_list li .buybtn a{width:auto;padding: 7px 18px;font-size: 14px;}
    #new_product_list li .item_row{display:flex;flex-direction: column;width: 85%;}
    #discount_area .box img{height: 160px;object-fit: cover;}
    #about_area .info_box article p{font-size: 23px;text-align: justify;}
    #category_area .categorylist{display:flex;flex-direction: column;}
    #product_area ul{gap: 10px;}
    #custom_area li h3{font-size: 18px;letter-spacing: 2px;}
    #custom_area li img{width: 120px;}
    .section_area, #about_area, #award_area{padding: 14vw 0;}
    #product_area .fixTxt{width: 40vw;top: -12vw;right: 2.5vw;}
	#photo_area .item_row .img_box { width: 100%; }
	#photo_area .item_row .img_box img { width: 100%; aspect-ratio: 1/1; }
	#photo_area .item_row .info_box { margin: .5em 0 0; width: 100%; }
}