* {margin:0; padding: 0; box-sizing: border-box;}
html {-webkit-font-smoothing: antialiased; /*scroll-behavior: smooth;*/}
body {overflow-x: hidden; font-family: var(--font_Helvethaica_Regular); line-height: 1.4em; font-size: var(--font-md); color: var(--color_dark);}
img {vertical-align: middle; width: auto; max-width: 100%; height: auto;}
a, a:hover, a:active, a:focus, a:visited {text-decoration: none;}
.pas {position: absolute; pointer-events: none;}
.rel {position: relative;}
.t_inline {display: inline-block;}
h1,h2,h3,h4,h5,h6,p {margin-bottom: 0; font-weight: normal;}
.showpc {display: block;}
.showmb {display: none;}

:root{
    --transition-300: all 300ms;
    --line-height-1: 1.1em;
    --line-height-2: 1.4em;
}

.lh-1{line-height: var(--line-height-1) !important;}
.lh-2{line-height: var(--line-height-2) !important;}

.container{max-width: 1230px !important; width: 100%; padding: 0 15px; margin: 0 auto;}

figure.cover,
figure.contain{position: relative;}
figure.cover img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
figure.contain img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain;}

.iframe-container{position: relative; padding-bottom: 56%; overflow: hidden;}
.iframe-container iframe, 
.iframe-container object, 
.iframe-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

ul.item-list{padding: 0; margin: 0; display: flex; list-style-type: none;}

.mt-f-sec{margin-top: 152px;}
.overflow-hidden{overflow: hidden;}

.row{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -15px;}
.row > div{padding: 0 15px;}
.row > .col-2{-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%;}
.row > .col-3{-webkit-box-flex: 0; -ms-flex: 0 0 25%;  flex: 0 0 25%; max-width: 25%;}
.row > .col-4{-webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
.row > .col-5{-webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%;}
.row > .col-6{-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
.row > .col-7{-webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%;}
.row > .col-8{-webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%;}
.row > .col-9{-webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;}
.row > .col-10{-webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%;}
.row > .col-11{-webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%;}
.row > .col-12{-webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}

.order-1{order: 1;}
.order-2{order: 2;}
.order-3{order: 3;}

.row-0{margin: 0;}
.row-0 > div{padding: 0;}

.row-10{margin: 0 -5px;}
.row-10 > div{padding: 0 10px;}

.text-limit{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* -webkit-line-clamp: 2; */
}

/* swiper pagination */
.swiper-pagination .swiper-pagination-bullet{--size: 10px; width: var(--size); height: var(--size); border-radius: 100px; opacity: 0.2; transition: all 400ms;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 2px;}
.swiper-pagination.pagination-light .swiper-pagination-bullet{background-color: var(--color_light);}
.swiper-pagination.pagination-blue .swiper-pagination-bullet{background-color: var(--color_primary);}
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition: all 400ms;}
.swiper-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet.swiper-pagination-bullet-active{ width: 45px; opacity: 1;}
/* end swiper pagination */
.h-title{font-size: var(--font-h1); font-family: var(--font_Helvethaica_Bold); line-height: 0.9em;}

/* popup */
.remodal-wrapper{padding: 0;}
.remodal.remodal-popup{
    border-radius: 30px; 
    max-width: 1200px;
    padding: 0;
    overflow: hidden;
}
.remodal-close, .remodal-close:before {left:auto; right:4px; top: 4px;}
.remodal-close:before{color: var(--color_light); font-size: 40px; transition: var(--transition-300);}
.remodal-close{
    --size: 44px; width: var(--size); height: var(--size);
    top: 10px; right: 10px;
    background-color: var(--color_dark);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    z-index: 1;
    transition: var(--transition-300);
}
.remodal-close:hover{background-color: var(--color_gray);}
.remodal-close:hover:before{color: var(--color_dark);}
/* end popup */

/* slide item card */
.item-card{display: block;}
.item-card figure.contain{padding-bottom: 80%; transform: translateY(-15px); transition: var(--transition-300);}
.accordion-item .item-card figure.contain{transform: translateY(10px);}
.item-card figure.contain img{object-position: center;}
.item-card:hover figure{transform: translateY(-20px);}
.accordion-item .item-card:hover figure.contain{transform: translateY(-15px);}

.item-card .box{text-align: center; padding: 32px 15px 15px; border-radius: 20px; background-color: rgba(255, 255, 255, 0); position: relative; transition: var(--transition-300);}
.item-card .box:before{
    content: ''; position: absolute; top: 16px; right: 20px;
    width: 90px; height: 40px;
    background-repeat: no-repeat; background-size: contain;
    filter: brightness(0) invert(1);
    opacity: 0;
    z-index: 1;
    transition: var(--transition-300);
}
.item-card:hover .box:before{opacity: 1;}
.item-card.festchoice:hover .box{background-color: var(--color_primary);}
.item-card.festchoice .box:before{background-image: url(../../images/static/festchoice.svg);}

.item-card.festchill:hover .box{background-color: var(--color_darkgreen);}
.item-card.festchill .box:before{background-image: url(../../images/static/festchill.svg);}

.item-card.festbio:hover .box{background-color: var(--color_green);}
.item-card.festbio .box:before{background-image: url(../../images/static/festbio.svg);}

.item-card.festdaily:hover .box{background-color: var(--color_brown);}
.item-card.festdaily .box:before{background-image: url(../../images/static/festdaily.svg);}

.item-card.festanother:hover .box{background-color: var(--color_yellow);}
.item-card.festanother .box:before{background-image: url(../../images/static/festanother.svg);}

.item-card .title{font-size: var(--font-h5); line-height: 1.2em; font-family: var(--font_Helvethaica_Med); transform: translateY(0px); transition: all 450ms;}
.item-card .title.text-limit{max-height: calc(1.2em * 1); -webkit-line-clamp: 1;}
.item-card:hover .title{color: var(--color_light); max-height: calc(1.2em * 2); -webkit-line-clamp: 2; transform: translateY(-15px);}

.item-card .key-product{font-size: var(--font-h5); color: var(--color_light); line-height: 1.4em; max-height: 0; overflow: hidden; transform: translateY(10px); transition: all 450ms;}
.item-card:hover .key-product{max-height: 2em; transform: translateY(-10px);}

.item-card .view-more{display: inline-block; font-size: var(--font-md); color: var(--color_light); line-height: 1.4em; max-height: 0; overflow: hidden; transform: translateY(10px); text-decoration: underline; transition: var(--transition-300);}
.item-card:hover .view-more{max-height: 1.4em; transform: translateY(-10px);}
/* end slide item card */


.swiper-button{
    --size: 40px; width: var(--size); height: var(--size);
    background-color: var(--color_light); 
    border: 1px solid var(--color_secondary);
    border-radius: 50%;
}
.swiper-button.swiper-button-prev:after, 
.swiper-button.swiper-button-next:after{font-size: 17px; color: var(--color_secondary); font-weight: bold;}


.d-flex{display: flex;}

.sec-doozy{position: relative; background-image: url(../../images/background/bg_doozy.png); background-repeat: no-repeat; background-size: cover; padding: 180px 0 47px;}
.sec-doozy .block{max-width: 890px; margin: 0 auto;}
.sec-doozy .block-text .title{text-align: center; font-size: var(--font-h1); font-family: var(--font_Helvethaica_Med); line-height: 0.7em;}
.sec-doozy .block-text .text-small{font-size: 60%; font-family: var(--font_Helvethaica_Regular);}
.sec-doozy .image-doozy figure.contain{padding-bottom: 70% !important;}
.sec-doozy .logo-doozy figure.contain{padding-bottom: 40% !important;}

/* pagination */
.isotope-pager{display: none; justify-content: center; flex-wrap: wrap; padding-bottom: 15px;}
.pagination{display: flex; justify-content: center; flex-wrap: wrap; padding-bottom: 15px;}
.pager{
    --size: 44px; width: var(--size); height: var(--size);
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0px 4px 4px rgba(132, 132, 132, 0.33), inset 0px 4px 4px rgba(132, 132, 132, 0);
    border-radius: 50%;
    font-size: var(--font-h5); line-height: 1em;
    color: var(--color_secondary);
    transform: translateY(0);
    margin: 3px 3px;
    transition: var(--transition-300);
}
.pager:hover,
.pager.active{background-color: var(--color_secondary); color: var(--color_light);}
.pager.active{transform: translateY(5px); box-shadow: 0px 4px 4px rgba(132, 132, 132, 0), inset 0px 4px 4px rgba(132, 132, 132, 0.33);}
.pager .pagination-arrow{
    position: relative; --size: 9px; width: var(--size); height: var(--size);
    border-top: 2px solid var(--color_secondary);
    border-right: 2px solid var(--color_secondary);
    transition: var(--transition-300);
}
.pager:hover .pagination-arrow{border-color: var(--color_light);}
.pager.previous_btn .pagination-arrow{transform: rotate(-140deg);}
.pager.next_btn .pagination-arrow{transform: rotate(45deg);}
/* end pagination */

/* realate blog */
.sec-relateblog{padding: 60px 0; overflow: hidden;}
.sec-relateblog .block-title{display: flex; align-items: center; justify-content: space-between;}
.sec-relateblog .block-title .title{font-size: var(--font-h1); font-family: var(--font_Helvethaica_Bold); line-height: 1.1em;}
.sec-relateblog .block-slide{margin-top: 30px;}
.sec-relateblog .block-slide .action{position: relative; margin-top: 40px;}
.sec-relateblog .block-slide .swiper{overflow: inherit;}
.sec-relateblog .block-slide .swiper-slide{opacity: 0; transform: scale(0.5); pointer-events: none; transition: all 400ms;}
.sec-relateblog .block-slide .swiper-slide.swiper-slide-active,
.sec-relateblog .block-slide .swiper-slide.swiper-slide-next,
.sec-relateblog .block-slide .swiper-slide.swiper-slide-next + .swiper-slide{opacity: 1; transform: scale(1); pointer-events: auto;}
.sec-relateblog .block-slide .swiper-wrapper{height: auto;}
.sec-relateblog .block-slide .swiper-wrapper .swiper-slide{height: auto;}

.block-card{display: block; border-radius: 10px; overflow: hidden; border: 1px solid #eee; height: 100%; box-shadow: 0px 4px 4px rgba(132, 132, 132, 0); transition: var(--transition-300);}
.block-card:hover{box-shadow: 0px 0px 30px rgba(132, 132, 132, 0.33);}
.block-card .thumb figure.cover{padding-bottom: 52%;}
.block-card .content-body{padding: 10px;}
.block-card .content-body .group{display: flex; justify-content: space-between;}
.block-card .content-body .date{display: flex; align-items: center; color: #7f7f7f; font-size: var(--font-sm);}
.block-card .content-body .icon{--size: 12px; background-color: #7F7F7F; margin-right: 6px;}
.block-card .content-body .title{font-size: var(--font-h3); font-family: var(--font_Helvethaica_Med); color: var(--color_primary); line-height: 1.2em; margin-top: 10px;}
.block-card .content-body .title.text-limit{max-height: calc(1.2em * 2); -webkit-line-clamp: 2;}
.block-card .content-body .desc{font-size: var(--font-h5); line-height: 1.2em;}
.block-card .content-body .desc.text-limit{max-height: calc(1.2em * 3); -webkit-line-clamp: 3;}

.block-card .content-body .tag{display: flex; align-items: center; font-size: var(--font-sm); color: var(--color_light); border-radius: 30px; padding: 0 10px; line-height: 1em;}
.block-card .content-body .tag.festupdate{background-color: #6A574B;}
.block-card .content-body .tag.festguide{background-color: #F4BA00;}
.block-card .content-body .tag.festreview{background-color: #E56356;}
.block-card .content-body .tag.festintrend{background-color: #87A851;}
/* end realate blog */

/* breadcrumb */
.breadcrumb{padding-left: 0; margin: 0 0 0 0;}
.breadcrumb .item-list{display: flex; margin: 0 -13px;}
.breadcrumb .item-list > li{padding: 0 13px; position: relative; display: inline-block;}
.breadcrumb .item-list > li:not(:last-child):before{
    content: ''; position: absolute; top: 50%; right: 0;
    transform: translate(0, -50%) rotate(45deg);
    --size: 7px; width: var(--size); height: var(--size);
    border-top: 1px solid var(--color_light);
    border-right: 1px solid var(--color_light);

}
.breadcrumb .item-list > li:last-child{opacity: 0.5;}
.breadcrumb .item-list .link{}
.breadcrumb .item .link.text-limit{height: 1.2em; -webkit-line-clamp: 1; max-width: 450px;}
.breadcrumb .item{color: var(--color_light); font-size: var(--font-h5); line-height: 1.2em;}
.breadcrumb.breadcrumb-dark .item-list > li:not(:last-child):before{border-color: var(--color_dark);}
.breadcrumb.breadcrumb-dark .item{color: var(--color_dark);}
/* end breadcrumb */

/* sort by */
.sortby{display: flex; align-items: center;}
.sortby .text-md{margin-right: 6.5px;}
.sortby .group{position: relative; width: fit-content;}
.sortby .dd_sort_btn{
    position: absolute;
    bottom: -95px;
    left: 0;
    width: 100%;
    border-radius: 16px;
    background-color: var(--color_light);
    opacity: 0;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    overflow: hidden;
    box-shadow: 0px 4px 4px rgba(14, 88, 196, 0.33);
    z-index: 3;
}
.sortby .dd_sort_btn.active{
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.sortby .dd_sort_btn ul{padding: 30px 0px 0px;}
#dropdownFilter{z-index: 4;}
#dropdownFilter .newold,
#dropdownFilter .oldnew{display: none;}
#dropdownFilter .newold.active,
#dropdownFilter .oldnew.active{display: block;}
.sortby .dd_sort_btn li{text-align: center; padding: 7px 0; background: rgba(14, 88, 196, 0); transition: var(--transition-300);}
.sortby .dd_sort_btn li.active,
.sortby .dd_sort_btn li:hover{background: rgba(14, 88, 196, 0.2);}
.sortby .dd_sort_btn li .link-dd{color: var(--color_dark); display: inline-block; width: 100%;}
.sortby .arrow-down{
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 5px;
    display: inline-block;
    border: solid var(--color_dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-110%, 0%);   
    z-index: 4;
}
/* end sort by */
/* box product */
.sec-incprod{overflow: hidden;}
.sec-incprod .block-title{display: flex; justify-content: space-between; align-items: center; margin-bottom: 35px;}
.sec-incprod .block-title .title{font-size: var(--font-h1); font-family: var(--font_Helvethaica_Bold); line-height: 1.3em;}
.sec-incprod .swiper{overflow: inherit;}
.sec-incprod .swiper .swiper-wrapper{height: auto;}
.sec-incprod .swiper .swiper-slide{opacity: 0; transform: scale(0.5); pointer-events: none; transition: all 400ms;}
.sec-incprod .swiper .swiper-slide.swiper-slide-active,
.sec-incprod .swiper .swiper-slide.swiper-slide-next,
.sec-incprod .swiper .swiper-slide.swiper-slide-next + .swiper-slide,
.sec-incprod .swiper .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide{opacity: 1; transform: scale(1); pointer-events: auto;}
.sec-incprod .action{position: relative; margin-top: 50px;}
.box-card{
    display: block;
    border: 1px solid #eee;
    background-color: var(--color_light);
    border-radius: 16px;
    transition: var(--transition-300);
}
.box-card .tag{position: relative;}
.box-card .tag:before{
    content: ''; position: absolute; top: -14px; right: 14px;
    width: 120px; height: 40px;
    z-index: 1;
    background-repeat: no-repeat; background-size: contain;
}
.box-card:hover{background-color: var(--color_yellow);}
.box-card .tag:before{background-image: url(../../images/icon/product-tag-festother.svg);}
.festchoice .tag:before{background-image: url(../../images/icon/product-tag-festchoice.svg);}
.festchill .tag:before{background-image: url(../../images/icon/product-tag-festchill.svg);}
.festbio .tag:before{background-image: url(../../images/icon/product-tag-festbio.svg);}
.festdaily .tag:before{background-image: url(../../images/icon/product-tag-festdaily.svg);}

.festchoice .box-card:hover{background-color: var(--color_primary); border-color: var(--color_primary);}
.festchill .box-card:hover{background-color: var(--color_darkgreen); border-color: var(--color_darkgreen);}
.festbio .box-card:hover{background-color: var(--color_green); border-color: var(--color_green);}
.festdaily .box-card:hover{background-color: var(--color_brown); border-color: var(--color_brown);}

.box-card .image{width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.box-card figure.contain{width: calc(100% - 20px); height: calc(100% / 1.5); transform: scale(1); transition: var(--transition-300);}
.box-card:hover figure.contain{transform: scale(1.2);}
.box-card .body{padding: 0 20px 11px; text-align: center;}
.box-card .body .title{font-size: var(--font-h5); font-family: var(--font_Helvethaica_Bold); line-height: 1.1em; height: calc(1.2em * 2); -webkit-line-clamp: 2; transition: var(--transition-300);}
.box-card:hover .body .title{color: var(--color_light);}
.box-card .body .key-prod{font-size: var(--font-h5); color: #7f7f7f; transition: var(--transition-300);}
.box-card:hover .body .key-prod{color: var(--color_light);}
.box-card .body .link{font-size: var(--font-h5); color: var(--color_primary); text-decoration: underline; transition: var(--transition-300);}
.box-card:hover .body .link{color: var(--color_light);}
/* end box product */

/* before after */
.block-before-after {
    position: relative;
    margin: 0 auto;
    width: 443px;
    height: 336px;
}
.block-before-after .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 443px 100%;
}
/* .block-before-after .background-img {
    background-image: url(../../images/static/box-before.png);
}
.block-before-after .foreground-img {
    background-image: url(../../images/static/box-after.png);
    width: 50%;
} */

.block-before-after .slider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: rgba(242, 242, 242, 0);
    outline: none;
    margin: 0;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.block-before-after .slider:hover {
    background: rgba(242, 242, 242, 0);
}
.block-before-after .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    height: 100%;
    background: white;
    cursor: pointer;
}

.block-before-after .slider-button {
    pointer-events: none;
    position: absolute;
    --size: 55px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background-color: var(--color_primary);
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.block-before-after:hover .slider-button{
    background-color: var(--color_secondary);
}
.block-before-after .slider-button:after {
    content: "";
    padding: 5px;
    display: inline-block;
    border: solid var(--color_light);
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
}
.block-before-after .slider-button:before {
    content: "";
    padding: 5px;
    display: inline-block;
    border: solid var(--color_light);
    border-width: 0 2px 2px 0;
    transform: rotate(135deg);
}
/* end before after */

.hand_scroll{
    display:block;
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:url(../../images/icon/hand-scroll.png) center no-repeat;
    background-size: 60px;
    z-index:3;
    background-position:48% 49%;
    pointer-events: none;
}