@charset "utf-8";
@font-face {
    font-family: 'BMJUA';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{letter-spacing: -.27px;}
#content h3{font-family:'BMJUA';}
.img.mob{display:none !important;}
#wrap{overflow: hidden;}

/* Area Visual */

.area_visual {position: relative;padding: 30px;}
.area_visual .swiper-container {position: relative;overflow: visible;max-width: 1560px;}
.area_visual .list { margin: 0; padding: 0; list-style: none; }
.area_visual .list li {overflow: visible;}
.area_visual .list li a,
.area_visual .list li div {display: block;overflow: hidden; border-radius: 20px;}
.area_visual .list .web {display: block;overflow: hidden;position: relative;padding-top: 640px;}
.area_visual .list .web img {position: absolute;left: 50%;top: 0;width: auto;height: 100%;transform: translateX(-50%);}
.area_visual .list .mob {display: none;}
.area_visual .swiper-button-prev,
.area_visual .swiper-button-next {display: block;position: absolute;top: 50%;z-index: 70;width: 100px;height: 100px;margin-top: 0;background: url(/images/common/icon_left_w.png) no-repeat center;filter: invert(1);background-color: #000;border-radius: 100rem;background-size: 20px;transform: translateY(-50%);font-size: 0;transition: opacity 0.3s ease;}
.area_visual .swiper-button-prev {left: -50px;}
.area_visual .swiper-button-next {right: -50px;transform: translateY(-50%) rotate(180deg);}
.area_visual .slide-pagination { display: flex; width: fit-content; padding: 10px 20px; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 99; background: rgb(0 0 0 / 20%); border-radius: 100rem; }
.area_visual .swiper-pagination { position: absolute; left: 50%; bottom: 45px; z-index: 70; width: auto; transform: translateX(-50%); }
.area_visual .swiper-pagination-bullet {display: inline-block;width: 10px;height: 10px;margin: 0 5px;padding: 0;background: #fff;opacity: 50%;border-radius: 100%;transition: 0.3s ease;}
.area_visual .swiper-pagination-bullet-active {background: #fff;opacity: 1;}

@media(max-width: 1024px){
    .area_visual {padding: 15px;}
    .area_visual .list .web { padding-top: 430px; }
    .area_visual .swiper-button-prev, .area_visual .swiper-button-next {display: none;}
}
@media(max-width: 1023px){
    .area_visual .list .web { padding-top: 320px; }
}
@media(max-width: 767px){
    .area_visual .list .web { padding-top: 430px; }
}

/* Area Main Product */
.area_main_product { display: flex; padding-block: 200px; justify-content: space-between; }
.area_main_product .inr { display: flex; flex-direction: column; gap: 200px; }
.area_main_product > [class^="area_"] { width: calc(50% - 60px); overflow: hidden; box-sizing: border-box; }
.area_main_product .main_title { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; }
.area_main_product .main_title .wrap-nav { display: flex; gap: 50px; align-items: center;}
.area_main_product .main_title .wrap-nav .direct { font-size: 16px; font-weight: 700; color: #999; }
.area_main_product .main_title h3 { font-size: 40px; font-weight: 600; color: #090909; }
.area_main_product .progress-pagination { position: relative; height: 3px; margin-top: 60px; background: rgba(0, 0, 0, .1); }
.area_main_product .progress-pagination .swiper-pagination-progressbar-fill { background: #222; }
.area_productList {display: block;}
.area_productList  *{font-size: 16px;}
.area_productList .list li{position: relative; padding-bottom: 10px;}
.area_productList .list li:hover .hover a{opacity: 1; transform: translateY(0);}
.area_productList .img{display: flex;align-items: center;position: relative;justify-content: center;background-color: #fff;box-sizing: border-box;padding:0;border-radius: 20px;overflow: hidden;border: 0;height: 100%;aspect-ratio: 4/5;}
.area_productList .img a {display: block;width: 100%;height: 100%;background: url(/images/common/logo-tirangnarang.svg) no-repeat center / contain;background-size: 50%;background-color: #f7f7f7;}
.area_productList .img img{max-width: 100%;object-fit: cover;height: 100%;}
.area_productList .hover{display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); overflow: hidden; z-index: 3;}
.area_productList .hover a{display: inline-flex; align-items: center; justify-content: center; opacity: 0; z-index: 3; transform: translateY(60px); transition: all .3s;  width: 46px; height: 46px; box-sizing: border-box; border:1px solid #e5e5e5; background-color: #fff;}
.area_productList .hover a:hover{opacity: 0.4;}
.area_productList .hover .like img{width: 18px;}
.area_productList .hover .cart img{width: 20px;}
.area_productList .round{display:none; width: 50px; height: 50px; border-radius: 100%; background-color: #e67612; align-items: center; justify-content: center; position: absolute; z-index: 1; right: 10px; top: -10px;}
.area_productList .round span{color: #fff; font-weight: 600; font-size: 14px;}
.area_productList [data-pro="option"]{position: relative;display: flex;flex-wrap: nowrap;gap: 7px;margin-top: 20px;overflow: hidden;align-items: center;}
.area_productList [data-pro="option"]::after { content: '+'; position: absolute; color: #a2a2a2; font-size: 25px; z-index: 12; background: #fff; min-width: 15px; top: 50%; right: 0px; transform: translateY(-55%); font-weight: 300; display: flex; justify-content: flex-end; }
.area_productList [data-pro="option"] span{width: 14px;height: 14px;box-sizing: border-box;border: 0;border-radius: 50%;display: block;}
.area_productList [data-pro="title"]{margin-top: 30px;display: block;width: 100%;             /* 1. Element must have a width limit */white-space: nowrap;     /* 2. Prevents text from wrapping to a new line */overflow: hidden;        /* 3. Hides the text that overflows the box */text-overflow: ellipsis;}
.area_productList [data-pro="title"] a{color: #000;line-height: 1.222;font-weight: 500;font-size: 20px;}
.area_productList [data-pro="size"]{color: #a0a0a0;font-weight: 300;display: block;margin-top: 5px;}
.area_productList [data-pro="price"]{margin-top: 15px;display: flex;align-items: center;gap: 20px;flex-direction: row-reverse;justify-content: flex-end;}
.area_productList [data-pro="price"] .discount{display:inline-block;vertical-align:top;margin-top:0;margin-right:3px;font-weight: 700;font-size: 25px;color: #f13c0b;}
.area_productList [data-pro="price"] .origin{text-decoration: line-through;font-size: 18px;color: #a0a0a0;margin-right: 4px;}
.area_productList [data-pro="price"] .total{font-weight: 800;color: #222;font-size: 25px;}
.area_productList [data-pro="sticker"]{margin-top: 8px;position: absolute;display: flex;gap: 10px;bottom: 20px;right: 20px;}
.area_productList [data-pro="sticker"] span{border:1px solid #000;box-sizing: border-box;width: 55px;height: 25px;text-align: center;border-radius: 50rem;display: flex;align-items: center;justify-content: center;}
.area_productList [data-pro="sticker"] span.i-best { background: #222; border: 0; }
.area_productList [data-pro="sticker"] span.i-sale { background: #f13c0b; border: 0; }
.area_productList [data-pro="sticker"] span i{font-size: 13px;color: #fff;font-weight: 600;font-family: 'Pretendard';display: block;line-height: normal;}
.area_productList [data-pro="sticker"] span + span{margin-left: -2px;}
.area_nav{display: flex;gap: 30px;}
.area_nav button{width: auto;height: 20px;display: flex;align-items: center;justify-content: center;background-color: #fff;box-sizing: border-box;}
.area_nav button.swiper-button-disabled { opacity: 20%; }
.area_nav button img{width: 100%;height: 100%;}
.area_nav button.next img{transform: rotate(180deg);}

@media(max-width: 1024px){
    .area_main_product { padding-block: 50px; }
    .area_main_product .main_title {margin-bottom: 20px;flex-wrap: wrap;gap: 20px;}
    .area_main_product .main_title h3 { font-size: 24px; }
    .area_main_product .inr { gap: 80px; }
    .area_main_product .progress-pagination { margin-top: 30px; }
    .area_productList [data-pro="price"] { gap: 10px; }
    .area_productList [data-pro="price"] .total { font-size: 16px; }
    .area_productList [data-pro="price"] .discount { font-size: 16px; }
}

/* Area Benefits */

.area_main_benefits { position: relative; padding-bottom: 200px; }
.area_main_benefits .list-benefits { display: flex; gap: 30px; padding: 30px; }
.area_main_benefits .list-benefits .card { position: relative; display: flex; flex-direction: column; width: 100%; border-radius: 20px; overflow: hidden; }
.area_main_benefits .list-benefits .card::after { content: ''; position: absolute; width: 100%; height: 50%; display: block; background: linear-gradient(0deg, #5a2c00 50%, transparent); bottom: 0; opacity: 90%; }
.area_main_benefits .list-benefits .card.c02::after { background: linear-gradient(0deg, #4d13d2 50%, transparent); }
.area_main_benefits .list-benefits .card.c03::after { background: linear-gradient(0deg, #cf5624 50%, transparent); }
.area_main_benefits .list-benefits .card img { width: 100%; height: 100%; object-fit: cover; }
.area_main_benefits .list-benefits .card hgroup { display: flex; flex-direction: column; position: absolute; align-items: flex-start; justify-content: flex-end; bottom: 70px; left: 50px; z-index: 2; font-size: 35px; font-weight: 500; color: #fff; }
.area_main_benefits .list-benefits .card hgroup h4 { font-size: 45px; }

@media(max-width: 1280px){
    .area_main_benefits { padding-bottom: 50px; }
    .area_main_benefits .list-benefits { flex-direction: column; gap: 15px; }
    .area_main_benefits .list-benefits .card { height: 250px; }
    .area_main_benefits .list-benefits .card hgroup { font-size: 18px; bottom: 30px; left: 40px; }
    .area_main_benefits .list-benefits .card hgroup h4 { font-size: 30px; }
}

/*  Area Methods */

.area_main_method { position: relative; padding-block: 200px; background: url(/images/main/img-bg-method.webp) no-repeat center / cover; overflow: hidden; }
.area_main_method .main_title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid #ddd; flex-wrap: wrap; gap: 30px; }
.area_main_method .main_title h3 { font-size: 40px; font-weight: 600; color: #090909; line-height: 1.2; }
.area_main_method .main_title .tab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; }
.area_main_method .main_title .tab li { margin: 0; padding: 0; }
.area_main_method .main_title .tab button { display: flex; align-items: center; justify-content: center; width: 140px; height: 50px; padding: 0 20px; background: transparent; border: 1px solid #333; border-radius: 100rem; color: #333; font-size: 20px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; }
.area_main_method .main_title .tab button.active { background: #008756; border-color: #008756; color: #fff; }
.area_main_method .content-method { position: relative; width: 100%; }
.area_main_method .content-method .method-content { position: relative; display: none; width: 100%; }
.area_main_method .content-method .method-content.active { display: grid; grid-template-columns: 630px minmax(0, 1fr); gap: 70px; align-items: center; }
.area_main_method .content-method .method-content .img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0; padding: 0; overflow: hidden; border-radius: 15px; }
.area_main_method .content-method .method-content .img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.area_main_method .content-method .method-content .img::after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 55%;background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) );pointer-events: none;}
.area_main_method .content-method .method-content .img figcaption {position: absolute;z-index: 2;left: 0;right: 0;bottom: 0;padding: 60px 50px;color: #fff;}
.area_main_method .content-method .method-content .img figcaption h4 {margin: 0 0 35px;font-size: 35px;font-weight: 600;line-height: 1;color: #fff;}
.area_main_method .content-method .method-content .img figcaption p {margin: 0;font-size: 18px;font-weight: 400;line-height: 1.5;color: rgba(255, 255, 255, 0.9);word-break: keep-all;}
.area_main_method .content-method .method-content .slide-method { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; }
.area_main_method .content-method .method-content .slide-method .tits { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 40px; gap: 20px; font-weight: 600; }
.area_main_method .content-method .method-content .slide-method .tits span { display: block; font-size: 25px; line-height: 1.4; color: #222; word-break: keep-all; }
.area_main_method .content-method .method-content .slide-method .tits span em { font-style: normal; color: #008756; }
.area_main_method .content-method .method-content .slide-method .tits a { flex-shrink: 0; font-size: 16px; font-weight: 600; color: #888; white-space: nowrap; }
.area_main_method .content-method .method-content .slide-method .methodExamp {position: relative;display: block;width: 100%;min-width: 0;height: auto;margin: 0;padding: 0 0 40px;overflow: hidden;}
.area_main_method .content-method .method-content .slide-method .methodExamp .swiper-wrapper { position: relative; display: flex; width: 100%; height: 100%; box-sizing: content-box; }
.area_main_method .content-method .method-content .slide-method .methodExamp .swiper-slide { position: relative; display: flex; flex-direction: column; flex-shrink: 0; height: auto; margin: 0; padding: 0; overflow: hidden; background: #fff; border-radius: 20px; box-sizing: border-box; border: 1px solid #e5e5e5; }
.area_main_method .content-method .method-content .slide-method .methodExamp .swiper-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0; padding: 0; }
.area_main_method .content-method .method-content .slide-method .methodExamp .swiper-slide span { display: flex; align-items: center; padding: 30px; background: #fff; font-size: 18px; font-weight: 600; line-height: 1.4; color: #222; box-sizing: border-box; }
.area_main_method .content-method .method-content .slide-method .methodExamp .bar-pagination {position: absolute;z-index: 10;left: 0;right: 0;bottom: 0;width: 100%;height: 3px;background: #ddd;}
.area_main_method .content-method .method-content .slide-method .methodExamp .bar-pagination .swiper-scrollbar-drag {height: 3px;background: #222;border-radius: 0;}

@media (max-width: 1200px) {
    .area_main_method { padding-block: 120px; }
    .area_main_method .content-method .method-content.active { grid-template-columns: 48% minmax(0, 1fr); gap: 40px; }
    .area_main_method .main_title h3 { font-size: 34px; }
    .area_main_method .main_title .tab button { width: 120px; min-width: 120px; font-size: 17px; }
}
@media (max-width: 767px) {
    .area_main_method { padding-block: 80px; }
    .area_main_method .main_title { display: block; padding-bottom: 30px; margin-bottom: 30px; }
    .area_main_method .main_title h3 { margin-bottom: 25px; font-size: 28px; }
    .area_main_method .main_title .tab { gap: 6px; }
    .area_main_method .main_title .tab button { width: auto; min-width: 0; height: 42px; padding: 0 18px; font-size: 14px; }
    .area_main_method .content-method .method-content.active { display: block; }
    .area_main_method .content-method .method-content .img { width: 100%; margin-bottom: 40px; }
    .area_main_method .content-method .method-content .img figcaption { padding: 30px 24px 25px; }
    .area_main_method .content-method .method-content .img figcaption h4 { font-size: 22px; }
    .area_main_method .content-method .method-content .img figcaption p { font-size: 13px; }
    .area_main_method .content-method .method-content .slide-method { width: 100%; min-width: 0; }
    .area_main_method .content-method .method-content .slide-method .tits { margin-bottom: 20px; }
    .area_main_method .content-method .method-content .slide-method .tits span { font-size: 15px; }
    .area_main_method .content-method .method-content .slide-method .methodExamp .swiper-slide span { min-height: 45px; padding: 0 14px; font-size: 12px; }
}

/* Area About Youtube */

.area_main_about {position: relative;padding-top: 200px;margin-bottom: 100px;background: url(/images/main/img-bgmain-about.webp) no-repeat center / cover; background-attachment: fixed;}
.area_main_about::before {content: '';position: absolute;width: 100%;height: 100%;background: #000;top: 0;left: 0;opacity: 65%;z-index: 0;}
.area_main_about .main-about {position: relative;display: flex;justify-content: center;flex-direction: column;}
.area_main_about .main-about .text { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; gap: 40px; }
.area_main_about .main-about .text em { font-size: 18px; font-weight: 700; display: flex; justify-content: center; align-items: center; background: #008756; min-width: 150px; height: 40px; border-radius: 100rem; }
.area_main_about .main-about .text h2 { font-size: 50px; font-weight: 400; }
.area_main_about .main-about .text p { font-size: 20px; font-weight: 200; }
.area_main_about .youtube-box {flex:none;overflow:hidden;position:relative;width: 1030px;border-radius:20px;aspect-ratio:16/9.1;margin-top: 80px;margin-inline: auto;margin-bottom: -100px;}
.area_main_about .youtube-box iframe { position:absolute; left:0; top:0px; z-index:10; width:100%; height:100%; }

@media(max-width: 1024px){
    .area_main_about { padding-top: 50px; }
    .area_main_about .main-about .text { gap: 20px; }
    .area_main_about .youtube-box { margin-top: 50px; width: 100%; }
}
@media(max-width: 767px){
    .area_main_about .main-about .text h2 { font-size: 30px; }
    .area_main_about .main-about .text p { font-size: 16px; }
}

/* Area Review Cust */

.area_reviewList { position: relative; }
.area_reviewList .swiper-slide .list-wrap { display: flex; flex-direction: column; gap: 30px; }
.area_reviewList .swiper-slide .list-wrap .photo-image {aspect-ratio: 1;overflow: hidden;border-radius: 20px;background: url(/images/common/logo-tirangnarang.svg) no-repeat center / contain;background-size: 50%;background-color: #f7f7f7;}
.area_reviewList .swiper-slide .list-wrap .photo-image img { width: 100%; height: 100%; object-fit: cover; transition: all .3s; }
.area_reviewList .swiper-slide .list-wrap:hover .photo-image img { transform: scale(1.2); }
.area_reviewList .swiper-slide .list-wrap .review { display: flex; flex-direction: column; gap: 20px; }
.area_reviewList .swiper-slide .list-wrap .review .rate { display: flex; justify-content: space-between; align-items: center; }
.area_reviewList .swiper-slide .list-wrap .review .rate .star { display: flex; gap: 3px; }
.area_reviewList .swiper-slide .list-wrap .review .rate .star i { display: block; background: url(/images/main/icon-star-review.svg) no-repeat center / contain; width: 18px; height: 18px; }
.area_reviewList .swiper-slide .list-wrap .review .rate .date { display: flex; align-items: center; font-size: 14px; color: #999; gap: 15px; }
.area_reviewList .swiper-slide .list-wrap .review .txt-review { font-size: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.area_reviewList .swiper-slide .list-wrap .thumb-pro { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 600; }
.area_reviewList .swiper-slide .list-wrap .thumb-pro img { width: 80px; aspect-ratio: 1; }