@charset "UTF-8";
@import url(animate.css);
:root {
  --primary: 57,157,243;
  --black: #303133;
 /* --red: #c10;*/
 --text-gray: #97A3AE;
}
html{scroll-behavior: smooth}
html,body{min-height: 100%;}
body{position:relative;font:14px "DB_Adman";background:var(--white);color:var(--black);padding-top:0;overflow-x:hidden;font-weight: 400;}
body>.container{position:relative;padding:0}
*, ul, ol, * li{padding:0;margin:0;list-style-type:none}
h1, h2, h3, h4, h5, h6{font-family:"DB_Adman", tahoma, Arial, sans-serif;margin:0;line-height:normal}
a{color:var(--text-link)}
a:hover{color:#07548a;text-decoration:underline}
a:focus{text-decoration:none}
img{max-width:100%}
fieldset{border:none;margin:0;padding:0}
address{font-style:normal}
p{margin-bottom: 0}

/*header*/
[id*="header"]{min-height:60px;position: relative;/*position:absolute;left:0;right:0;top:0;*/z-index:199;background: #fff;border-bottom: 1px solid #ECECEC;transition:.3s all ease;-webkit-transition:.3s all ease;/*padding-bottom:50px;background:-moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,0.55) 81%, rgba(255,255,255,0) 100%);background:-webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,0.55) 81%,rgba(255,255,255,0) 100%);background:linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,0.55) 81%,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );*/
}
[id*="header"].fixed{position:fixed;animation:sd-InDown .25s 1 linear!important;-webkit-animation:sd-InDown .25s 1 linear!important;}
[id*="header"].fixed{position:fixed; left: 0;right: 0; top: 0;}
.page-home [id*="header"]{background: none;border-bottom: none}
[id*="header"] .logo{position:relative;display:flex; align-items: center;height: 60px; padding:3px 10px;}
[id*="header"] .logo img{max-height:24px}
[id*="header"].fixed .logo{max-height: 50px;}
.page-home [id*="header"] .logo img{filter: brightness(0) invert(1);-webkit-filter: brightness(0) invert(1);}
[id*="header"] .tools{ padding: 0 10px}
[id*="header"] .lang{display: inline-block;vertical-align: top}
[id*="header"] .lang>*{display: inline-block;vertical-align: top; font-size: 10px; width: 24px; height: 24px; line-height: 24px; text-align: center;border-radius: 5em;-webkit-border-radius:5em; color: #fff;text-decoration: none;background-color: transparent}
[id*="header"] .lang>.active{color: #55ADF5;background: #fff}
/*[id*="header"] .top-title .logo:after{ content:"";position:absolute;top:0;right:-50px;border-top:78px solid #07b53a;border-right:50px solid transparent}*/
.main-nav{position:relative;z-index:199;flex:1 1 0}
.main-nav>ul{margin:0;padding:0}
.main-nav>ul>li{position:relative}
.main-nav>ul>li>a{display:block;color:#222;padding:0;font-size:16px;font-weight:400;line-height:40px;text-shadow:1px 1px 1px rgba(0,0,0,0.1);text-decoration:none}
.main-nav>ul>li ul{display:none}
.main-nav>ul>li ul>li{padding:0 10px;border-bottom:1px dashed rgba(0,0,0,0.15)}
.main-nav>ul>li ul>li:last-child{border-bottom:none}
.main-nav>ul>li ul>li>a{position:relative;display:block;padding:8px 8px 8px 20px;text-decoration:none}
.main-nav>ul>li ul>li>a:before{ position:absolute;top:14px;left:5px;content:"";display:block;width:5px;height:5px;background:#07b53a;vertical-align:middle;margin-right:10px}
[id*="header"] [class*="btn-nv"]{position: relative;display:block;width:40px;height:30px;text-align:center;line-height:50px;color:#DADADA;font-size:30px;z-index:300}
[id*="header"] [class*="btn-nv"] a{display:block;height:100%;color:#DADADA}
[id*="header"] [class*="btn-nv"] span{position:absolute;display:block;width:60%;height:2px;top:30%;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);background:#303133;transition:.4s all ease;-webkit-transition:.4s all ease}
[id*="header"] [class*="btn-nv-m"] span:nth-child(2){top:50%}
[id*="header"] [class*="btn-nv-m"] span:nth-child(3){top:70%; width: 40%;transform: translateX(-75%);-webkit-transform: translateX(-75%)}
.expand [id*="header"] [class*="btn-nv-m"] a{background:rgba(255,255,255,0.3)}
.expand [id*="header"] [class*="btn-nv-m"] span:nth-child(2){display:none}
.expand [id*="header"] [class*="btn-nv-m"] span:nth-child(1){top:50%;left:20%;transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.expand [id*="header"] [class*="btn-nv-m"] span:nth-child(3){top:50%;left:20%; width: 60%; transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.page-home [id*="header"] [class*="btn-nv"] span{background: #fff}
[id="header"] .tools{display: flex;flex-flow: row nowrap;margin-left: -75px}
[id="header"] .tools>.button>a{display: inline-block}
[id="header"] .tools>.button>a>img{height: 25px}
.page-home [id="header"] .tools>.button>a>img{filter: brightness(0) invert(1);-webkit-filter: brightness(0) invert(1);}
[id="header"] .tools>.button{position: relative}
[id="shop-cart"]{position: relative}
[id="shop-cart"]>.noti{ width: 6px;height: 6px; position: absolute;top: -1px; right: -7px; text-indent: -9999px; background: rgba(var(--primary), 1);border-radius: 5rem;-webkit-border-radius: 5rem}
[id="shop-cart"]>.noti.hid{display: none}
[id="shop-cart"].active:before{content: "";display: block; position: fixed;top:60px;left: 0; right: 0; bottom: 0;background: rgba(0,0,0,0.5);z-index: -1}
.fixed [id="shop-cart"].active:before{top:50px}
[id="header"] .dropdown-content {display: none;position: absolute; margin-top: 25px; right: 0; transform: translateX(390px); background-color: var(--white);width: 400px; max-width: 100vw; box-shadow:0px 4px 60px rgba(0, 0, 0, 0.12); border-radius: 12px;-webkit-border-radius: 12px; z-index: 1;}
.dropdown-content a {color: var(--black);text-decoration: none;}
.dropdown-content.show {display: block; animation: slideInFromRight 0.3s ease-out forwards;}
[id="header"] .tools .lang{margin-left: 15px; padding-left: 5px;border-left: 1px solid rgb(113, 114, 122)}
/*.sw-nav{position:relative;text-align:center}
.sw-nav>a{text-decoration:none}
.sw-nav>a.btn.active:before{content:"";display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.5)}
.sw-nav>a>i{display:block;width:60px;height:60px;font-size:32px;line-height:60px;text-align:center;color:#979797}*/
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}
body.expand{overflow:hidden;max-height:100vh}
/*[id="header"]{z-index:201;}*/

.main-nav{z-index:202;position:fixed;top: 0;left: 0;right: 0;bottom: 0;background: url("../images/bg-m-default.jpg?v1") 100% 100% no-repeat #FBFBFB;background-size:contain;color: var(--black);visibility: hidden; display: none; justify-content: center;padding-left:12vw;flex-flow: column wrap;}
.expand .main-nav{z-index:202;visibility: visible;display: flex}
[id*="header"] [class*="btn-nv"]{display:block;overflow: hidden}
.main-nav>ul[class*="_chd-cl-md"],.main-nav>.ft-menu{display:none;visibility:hidden;/*position:fixed;top:70px;left:10vw;bottom:0;*/width:100%;max-width:480px;overflow:visible;background:none;box-shadow: 0; z-index:199}
.expand .main-nav>ul,.expand .main-nav>.ft-menu{display:block;visibility:visible;box-shadow:none}
.expand .main-nav>ul>li>a>span,.expand .main-nav>.ft-menu>div{animation-duration: 1s;-webkit-animation-duration: 1s;animation-fill-mode: both;-webkit-animation-fill-mode: both;}
/*.main-nav>ul>li.sub:after{content:"\f105";display:block;position:absolute;top:5px;right:5px;width:40px;height:42px;color:#eadc01;font:32px/42px "FontAwesome";text-align:center;z-index:-1;transform:rotate(90deg);-webkit-transform:rotate(90deg)}*/
.main-nav>ul>li{position:static;padding:0!important;text-align:left;border-bottom:0}
.main-nav>ul>li>a{padding:15px 0; font-size: 180%; max-width: 300px; color:#bfbfbf;text-shadow: none}
.main-nav>ul>li>a:after{content: "";display: block;visibility: hidden; opacity: 0; position: absolute; top: 0; right: 0; border: 0; z-index: -1; width:70vw; height:100vh;background:linear-gradient(to left, rgba(251,251,251,0) 20%, rgba(251,251,251,1)), url("../images/bg-m-default.jpg?v1") 100% 100% no-repeat; background-size: cover;transition: .2s all ease-in-out}
.main-nav>ul>li>a>span{display: block}
/* .main-nav>ul>li:nth-child(1)>a:hover:after,.main-nav>ul>li:nth-child(1)>a.selected:after{background-image:url("../images/bg-m-home.jpg") } */
.main-nav>ul>li:nth-child(1)>a:hover:after,.main-nav>ul>li:nth-child(1)>a.selected:after{background-image:linear-gradient(to left, rgba(251,251,251,0) 20%, rgba(251,251,251,1)), url("../images/bg-m-home.jpg");}

.main-nav>ul>li:nth-child(2)>a:hover:after,.main-nav>ul>li:nth-child(2)>a.selected:after{background-image:linear-gradient(to left, rgba(251,251,251,0) 20%, rgba(251,251,251,1)),url("../images/bg-m-products.jpg")}
.main-nav>ul>li:nth-child(3)>a:hover:after,.main-nav>ul>li:nth-child(3)>a.selected:after{background-image:linear-gradient(to left, rgba(251,251,251,0) 20%, rgba(251,251,251,1)),url("../images/bg-m-corporate.jpg")}
.main-nav>ul>li:nth-child(4)>a:hover:after,.main-nav>ul>li:nth-child(4)>a.selected:after{background-image:linear-gradient(to left, rgba(251,251,251,0) 20%, rgba(251,251,251,1)),url("../images/bg-m-FAQ.jpg")}
.main-nav>ul>li:nth-child(5)>a:hover:after,.main-nav>ul>li:nth-child(5)>a.selected:after{background-image:linear-gradient(to left, rgba(251,251,251,0) 20%, rgba(251,251,251,1)),url("../images/bg-m-contact.jpg")}
.main-nav>ul>li>a:hover:after,.main-nav>ul>li>a.selected:after{visibility: visible;opacity: 1}
.main-nav>ul>li>a:hover:after{z-index: 9}
/* .main-nav>ul>li>a:hover{color: rgb(var(--primary))} */
.main-nav>ul>li>a.selected,.main-nav>ul>li>a.active{color:var(--black)}
.main-nav>ul>li>ul,[id*="header"] .login ul{display:block}
.main-nav>ul>li>ul>li{border:none;border-top:1px dotted rgba(255,255,255,0.3);background:rgba(0,0,0,0.1)}
.main-nav>ul>li>ul>li>a{padding:10px 0 10px 20px;text-align:left;color:#eaeaea}
.main-nav .ft-menu{margin-top: 5vh}
.main-nav .ft-menu>div{margin-bottom: 5px}
/* .main-nav .ft-menu>div{margin-bottom: 20px} */
.main-nav .ft-menu a{display: inline-block;border:1px solid #CDCDCD;padding: 5px 5px 5px 5px; font-size: 14px; line-height: 22px;border-radius: .3rem;-webkit-border-radius: .3rem;color: var(--black);text-decoration: none}
/* .main-nav .ft-menu a{display: inline-block;border:1px solid #CDCDCD;padding: 10px 12px 10px 10px; font-size: 14px; line-height: 22px;border-radius: .3rem;-webkit-border-radius: .3rem;color: var(--black);text-decoration: none} */
.main-nav .ft-menu a img{height: 24px;display: inline-block; vertical-align:bottom}
/* .main-nav .ft-menu a:hover{background: rgba(var(--primary), 1); color: var(--white);} */
/* .main-nav .ft-menu a:hover img{filter:brightness(0) invert(1);-webkit-filter:brightness(0) invert(1)} */
.sw-nav{height:50px;position:absolute;top:0;right:50px}
.sw-nav>a>i{width:50px;height:50px;font-size:24px;line-height:50px}
.sw-nav>a.btn.active:after{content:"X";display:block;position:fixed;top:0;right:0;width:50px;height:50px;background:#fff;color:#979797;font-size:32px;font-weight:100;line-height:50px;text-align:center}

@-webkit-keyframes sd-InDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}
@keyframes sd-InDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}

@media (min-width:992px){
/*[id*="header"].fixed [class*="logo"] img{height:40px;}
.home [id*="header"].fixed{min-height:inherit}*/
}

@media (max-width:991px){
[id="header"] [class*="logo"] img{height:20px;margin-top:5px;max-width: none}
/*[id="header"].fixed [class*="logo"] img{height:15px;margin-top:0}*/
[id*="header"] [class*="btn-nv"] span{background:var(--black)}
.main-nav{background: #fff}
.main-nav>ul>li>a:after{width: 100vw}
.main-nav > ul > li > a:hover:after, .main-nav > ul > li > a.selected:after{opacity: 1;background-position: 70% 100%}
.main-nav>ul>li>a:hover:after,.main-nav>ul>li>a.selected:after{ z-index:inherit}
}
@media (max-width:768px){
[id*="header"] .logo{position: absolute; left: 50px}
[id="shop-cart"].active:before{top: 0}
}
@media (max-width:576px){
.main-nav{padding: 5vw}
.main-nav > ul > li > a,.main-nav .ft-menu>div{text-align: center;max-width: 100%}
.main-nav > ul > li > a:after,.main-nav > ul > li > a.selected:after{display: none}
.main-nav .ft-menu{margin-top: 70px}
}

[id="footer"]{position:relative;clear: both;text-align:center;z-index:59;padding-top: 100px;background:url("../images/ft_bg.png") 50% 50% no-repeat; background-size: cover}
[id="footer"]:after{content: "";display: block;position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1;background: url("../images/bg-sp-footer.png") 100% 100% no-repeat; background-size: 15% auto}
[id="footer"]>.container{color:var(--black);padding:10px;}
[id="footer"] .lg-ft{margin-bottom: 20px}
[id="footer"] .lg-ft img{display: block;height: 20px; margin: 0 auto}
[id="footer"] .nav-ft,[id="footer"]  .ft-lang{ margin: 24px auto 50px; padding-top: 24px; /*width: 600px;*/ max-width: 100%; display: flex;flex-flow: row wrap; justify-content: center; align-items: center;border-top: 1px solid #E7E7E7}
[id="footer"] .nav-ft>a{display: inline-block; padding: 10px 1.5vw; font-size: 18px; color: #97A3AE;letter-spacing: 1px}
[id="footer"] .nav-ft>a:hover,[id="footer"] .ft-lang>a:hover{color: rgba(var(--primary), 1);}
[id="footer"] a{color: var(--black); text-decoration: none}
[id="footer"]>.container>.row{}
[id="footer"] .row>[class*="col-"]{text-align: left}
[id="footer"] .col-l{}
[id="footer"] .col-r{}
[id="footer"] .row>[class*="col-"] h5{font-size: 13px; margin-bottom: 15px;text-align: center}
[id="footer"] .row>[class*="col-"]{}
[id="footer"] .ft-lang{ margin: 50px auto; padding-top: 24px; width: 240px;}
[id="footer"] .ft-lang>a{position: relative;display: inline-block; color: var(--text-gray);padding: 0 20px;letter-spacing: 1px}
[id="footer"] .ft-lang>a:not(:last-child):after{content: "";display: block; position: absolute;top: 0;bottom: 0; right: 0; border-left: 1px solid #e7e7e7}
[id="footer"] .ft-lang>a.selected{color: var(--black)}
.ft-social>li{padding-left: 0!important}
.ft-social>li>a{color: var(--black);}
.ft-social>li>a>i img{max-height: 20px}
.ft-social>li>a>div>*{display: block}
.ft-social>li>a>div>b{ font-size: 12px; text-decoration: underline;font-weight: 400}
.ft-social>li>a>div>span{color: var(--gray);font-size: 11px; margin-top: -3px}
[id="footer"] .col-r .bx{margin-top: 30px}
[id="footer"] .col-r .bx>.d-flex{min-height: 30px; align-items: center}
[id="footer"] .col-r .bx>.d-flex img{max-height: 20px}
[id="footer"] .col-r .bx:nth-child(2)>.d-flex img{max-height: 32px}
[id="bb_chat"]{ display: none; position: fixed; right:12px; bottom: 12vh; z-index: 100; flex-flow: column-reverse wrap}
[id="bb_chat"]>a{display:block; width: 48px; height: 48px; text-indent: -9999px; background-size: contain;transition: .2s all ease;-webkit-transition: .2s all ease}
[id="bb_chat"]>a.active{transform: rotate(360deg)}
[id="bb_chat"]>a,[id="bb_chat"] .list-bb>ul>li>a{filter: drop-shadow(0px 4px 40px rgba(0, 0, 0, 0.16));-webkit-filter: drop-shadow(0px 4px 40px rgba(0, 0, 0, 0.16))}
[id="bb_chat"] .list-bb{display: none; margin-bottom: 25px;}
[id="bb_chat"] .list-bb>ul>li{ margin-bottom:5px}
[id="bb_chat"] .list-bb>ul>li>a{display: block;position: relative; width: 48px; height: 48px;background: url("../images/ic-bb-phone.png?v1.0") 50% 50% no-repeat; background-size: contain}
[id="bb_chat"] .list-bb>ul>li>a.fb{background-image: url("../images/ic-bb-messenger.png?v1.0")}
[id="bb_chat"] .list-bb>ul>li>a.line{background-image: url("../images/ic-bb-line.png?v1.2")}
[id="bb_chat"] .list-bb>ul>li>a>span{display: block; opacity: 0;visibility: hidden;position: absolute; right:calc(100% + 10px); top: 50%; transform: translateY(-50%);font-size: 13px; color: rgb(var(--primary)); background:var(--white);box-shadow: 0 0 10px rgba(0,0,0,.1); border-radius: .3rem;-webkit-border-radius: .3rem; padding: 2px 5px; white-space: nowrap;transition: .2s all ease;-webkit-transition: .2s all ease}
[id="bb_chat"] .list-bb>ul>li>a:hover>span{opacity: 1; visibility: visible}
[id="bb_chat"]>a {
    background: #009ADD;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 4px 0px #243B6E1F;
    box-shadow: 0px 4px 16px 0px #253B6E52;
}
@media (min-width:1601px){
[id="footer"] .row>[class*="col-"] h5{text-align: left}
.ft-social>li{ margin-bottom: 40px;}
.ft-social>li:nth-last-child(1),.ft-social>li:nth-last-child(2),.ft-social>li:nth-last-child(3){margin-bottom: 0}
.ft-social>li>a{display: flex;flex-flow: row nowrap;text-decoration: none;}
.ft-social>li>a>i{margin-right: 10px}
.followus .ft-social{width: 880px; max-width: 100%;margin-left:auto; margin-right: auto}
.followus .ft-social>li>a{display: block}
[id="footer"] .col-r .bx:nth-child(1){margin-top: 0}
[id="footer"] .col-r .bx>.d-flex img{max-height: 25px}
}
@media (max-width:991px){[id="footer"]{background-image: none}[id="footer"]:after{display: none}}
@media (max-width:576px){
[id="footer"] .nav-ft{display: none}
[id="footer"] .col-l{padding:0 0 30px; margin-bottom: 30px; border-bottom: 1px solid #e7e7e7}
.ft-social>li{ margin-bottom: 10px;}
.ft-social>li>a{display: flex;flex-flow: row nowrap}
.ft-social>li>a>i{margin-right: 10px}
[id="footer"] .col-r .bx>.d-flex{flex-wrap: wrap; justify-content: center}
[id="footer"] .col-r .bx>.d-flex img{margin-bottom: 20px}
[id="footer"] .ft-lang{margin: 25px auto}
[id="bb_chat"]>a,[id="bb_chat"] .list-bb>ul>li>a{width: 32px; height: 32px;filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.16));-webkit-filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.16))}
[id="bb_chat"] .list-bb{margin-bottom:10px}
}

@media (min-width:576px) and (max-width:1600px){.ft-social{justify-content: center}.ft-social>li{flex: 0 0 auto!important; padding:0 2%!important}}
.copyright{font-weight: 200; font-size: 12px; color: var(--black)}
/*customs*/
.cv-select *{-webkit-appearance:none;appearance:none;cursor:pointer;width:100%; height: 24px;border: none; min-width:80px;border-radius:.2rem;-webkit-border-radius:.2rem}
@media screen and (-webkit-min-device-pixel-ratio:0) {.cv-select *{padding-right:26px}}
.cv-select{display:inline-block;position:relative;overflow: hidden}
.cv-select *[class*=" cr"]{border-radius:2em;-webkit-border-radius:2em}
.cv-select:after{content:"";display:block; width: 24px; height:18px; background: url("../images/ic-selectbox.png") 100% 50% no-repeat; background-size: contain; pointer-events:none;position:absolute; top:50%;right:3px; transform:translateY(-50%);-webkit-transform:translateY(-50%);filter: drop-shadow(-3px 0px 4px rgba(0,0,0,0.1)); z-index:9}
.mz-chk{position:relative;}
.mz-chk input[type=checkbox],.mz-chk input[type=radio]{position:absolute;width:100%;height:100%;opacity:0}
.mz-chk input+label{display: block;position:relative;min-height:25px;line-height:25px;padding-left:30px;cursor: pointer}
.mz-chk input+label:before{content:"";display:block;width:20px;height:20px;position:absolute;top:2px;left:0;background:#fff;text-indent:-9999px;border: 1px solid #d1d2d4; cursor:pointer;border-radius:.4em;-webkit-border-radius:.4em}
.mz-chk input[type=radio]+label:before{border-radius:5em;-webkit-border-radius:5em}
.mz-chk input:checked+label:before{background:#399DF3 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 10 10'%3E%3Cpath fill='%23ffffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat;border-color: transparent}
.mz-chk input[type=radio]:checked+label:before{background-image: none;background-color:#fff;border: 2px solid #399DF3;}
.mz-chk input[type=radio]:checked+label:after{content: "";display: block;position: absolute;top: 6px; left: 4px; width: 12px; height: 12px; background: #399DF3;border-radius:5em;-webkit-border-radius:5em}
.mz-chk input[type=checkbox]:checked+label:before{background-color:#399DF3}
.t-gray,#toc .t-gray{color: var(--text-gray)}
[class*="ui-btn"]{letter-spacing: 1px}
[class*="ui-btn"] img{display: inline-block; vertical-align:sub;max-height: 18px;transition: .2s all ease-in-out}
[class*="ui-btn"][class*="-border"]{color: var(--black);border-color:#9C9C9C}
[class*="ui-btn"][class*="-border"] img{height: 16px;margin-left: 5px}
/* [class*="ui-btn"][class*="-border"]:hover{border-color: transparent;background: var(--black)} */
/* [class*="ui-btn"][class*="-border"]:hover img{filter: brightness(0) invert(1)} */
[class*="ui-btn"][class*="-border"]:hover{box-shadow: unset;background:unset;color:unset;}
[class*="ui-btn"][class*="-border"]:hover img{filter: unset;}
[class*="ui-btn"][class*="black"]:hover{background-color: rgb(var(--primary))}
[class*="ui-btn"][class*="disable"]{background-color: rgba(var(--primary), 0.35);color: var(--white)}

.select2-container--default .select2-selection--single{
    border-color: #ECECEC;
    border-radius: 12px;
    height: auto;
}
[id="header"] .select2-container--default .select2-selection--single{background: none;border: 0;outline: none}
#sentFormMobile .select2-container .select2-selection--single .select2-selection__rendered{
    padding: 14px 16px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--black); font-size: 20px;min-width: 60px;}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border: none;position:absolute;position: absolute; top: 50%;left: 50%;}
.select2-container--default .select2-selection--single .select2-selection__arrow b:before,.select2-container--default .select2-selection--single .select2-selection__arrow b:after{content: "";display: block;position: absolute; top:0;left:0; width: 7px; height: 2px; background: var(--black);border-radius: 5rem;-webkit-border-radius: 5rem}
.page-home .select2-container--default .select2-selection--single .select2-selection__arrow b:before,.page-home .select2-container--default .select2-selection--single .select2-selection__arrow b:after{background: var(--white)}
.select2-container--default .select2-selection--single .select2-selection__arrow b:before{transform: rotate(45deg) translateX(-1px);transform-origin: left}
.select2-container--default .select2-selection--single .select2-selection__arrow b:after{transform: rotate(-45deg) translateX(1px);transform-origin: right}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{transform: rotate(-180deg) translate(-5px, -5px)}
.select2-dropdown{border-top-width: 1px; border-color:#ededed;border-radius: .5rem!important; overflow: hidden}
.select2-results__option{color: var(--black)}
[id="header"] .select2-results__option{text-align: center}
.select2-container--default .select2-results__option--highlighted[aria-selected]:first-child{border-radius: .5rem 0 0 0}
/*home*/
.page-home [id*="header"] [class*="btn-nv"] span{background: rgba(255,255,255,0.95)}
.page-home.expand [id*="header"] [class*="btn-nv"] span{background: rgba(48,49,51.95)}
.page-home .select2-container--default .select2-selection--single .select2-selection__rendered{color: var(--white)}
.page-home{background: url("../images/bg-home.jpg") 50% 50% no-repeat; background-size: cover;color:var(--white);}
.sec-home>.container{display: flex;justify-content: center;align-items: center; padding-bottom: 100px; }
.sec-home .title{ text-align: center;text-transform: uppercase}
.sec-home .home-link{position: absolute; bottom: 2vh;left: 0; right: 0}
.home-link .flickity-viewport{margin-right: -10px;padding-left: 10px}
.home-link .flickity-slider{ left: 10px!important}
.carousel {
  position: relative;
}
.carousel-cell {
  width: 70%;
  min-height: 150px; /* inherit height from gallery */
  margin-right: 0;
  padding-right: 10px;
  /*background: #8C8;*/
  border-radius: 5px;
  counter-increment: gallery-cell;
}

@media screen and ( min-width: 768px ) {
.carousel-cell { width: 30%; }
}
@media screen and ( min-width: 992px ) {
  .carousel-cell { width: 25%; }
  .home-link .flickity-viewport{padding-left:0}
  .home-link .flickity-slider{ left:0!important}
}

/*all page*/
[class*="sec-"]>.container{position: relative;min-height: calc(100vh - 90px)}
.footer-bar,.footer-submit{position: sticky;bottom: 0; margin-top: 30px; background:#fff;padding: 10px;z-index: 10;box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.1)}
.footer-submit{padding: 10px;z-index: 10}
.footer-bar [class*="ui-btn"],.footer-submit [class*="ui-btn"]{position: relative;font-size: 14px;}
.footer-bar .noti{ position: absolute;top: -5px; right: -8px;}
.footer-bar .noti>div{display: block;background: #c00; color: #fff; font-style: normal;text-align: center; width: 18px; height: 18px; line-height: 16px; border: 1px solid #fff; font-size: 10px; border-radius: 5em;-webkit-border-radius:
5em}
.footer-bar .noti .none{display: none;}
.footer-bar>._flex{padding-top:7px}
.footer-bar [class*="ui-btn"][class*="-white"]{background: #bdbec0;color: #fff}
.h-topic-faq{font-size: 28px;font-weight: 700;color: var(--black);line-height: 140%}
.h-topic-faq em{font-style: normal;color: rgb(var(--primary))}
.title p{font-weight: 200;font-size: 120%}
/*products*/
.banner-top{ width: 1692px; max-width: 100%; margin-left: auto; margin-right: auto; text-align: center;margin-bottom: 30px}
.no-pointer { cursor: default; pointer-events: none; }
.banner-top img{max-width: 100%; margin-left: 0; margin-right: 0}
.sec-pd>.full{padding-top: 30px}
.list-pd{padding-top: 90px;position: relative;background: #fff}
.list-pd>li{margin-bottom: 30px}
.list-pd .pd{ letter-spacing: 1px}
/* .list-pd .pd.active{animation-delay: 0.15s;animation-name: backOutUp;animation-duration: 1s;animation-fill-mode: both;} */
/* .list-pd .pd.active .btn-addcart{-webkit-animation: shake-lr 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; animation: shake-lr 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;} */
/* @keyframes backOutUp {
  0%,100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translate(0px, 0px) scale(0.7);
    transform: translate(0px, 0px) scale(0.7);
    opacity: 0.7;
  }

  99% {
    -webkit-transform: translate(90vw, -100vh) scale(0.2);
    transform: translate(90vw, -100vh) scale(0.2);
    opacity: 0.5;
  }
} */
.list-pd .pd>a{ text-align: center;text-decoration: none;color: var(--black)}
.list-pd li:not(.pro) .pd>a {/*min-height: 324px;*/display: flex;flex-flow: column wrap}
.list-pd .pd figure{position: relative;padding: 15px}
.list-pd .pd figure img{display: block;margin: 0 auto}
.list-pd li:not(.pro) .pd>a>figure{width: 68%;margin:0 auto}
.list-pd li:not(.pro) .pd>a>figure:before{content: ""; display: block;padding: 100% 0 0}
.list-pd .pd>a>figure img{ position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);max-height:200px;max-width: 200px;;object-fit: cover}
.list-pd .pd>a>.info{    padding: 2px 0;padding-top: 20px;}
/* .info.non-pro{margin: auto;  padding: 40px 0 !important;} */
.list-pd .pd>a>.info .title,.pd-name .title{font-size: 18px;line-height: 120%;}
.list-pd .pd>a>.info .price-average,.pd-name .price-average{color: var(--text-gray); font-size: 14px;font-weight: 200}
.list-pd .pd>a>.info .price-average>span{margin-left: 10px; display: inline-block; line-height: 100%; border-bottom: 1px solid rgba(var(--primary),1)}
.list-pd .pd>.wrap{}
.list-pd .pd>.wrap .pro-text{font-size: 11px; text-align: center;line-height: 120%}
.list-pd .pd>.wrap .pro-text *{display: block;margin-top: 3px; text-decoration: line-through;color: var(--text-gray)}
.pd .box__number{display: flex;flex-flow: row nowrap; justify-content: center; align-items: center}
.pd .box__number>a{display: block; width: 25px; height: 25px; border-radius: 5rem;-webkit-border-radius: 5rem;text-decoration: none;cursor: pointer;outline: none;text-indent: -9999px;background: url("../images/ic-min.png") 50% 50% no-repeat;background-size: auto 100%}
.pd .box__number>span.increase{background-image: url("../images/ic-plus.png")}
.pd .box__number>input{border: none; width:50px; margin: 0 3px; text-align: center; line-height: 100%; height: 40px; font-size: 36px; font-weight: 400; background:none;outline: none;}
.list-pd .pd>.wrap .bt-detail{border-top: 1px solid #E5E5E5;margin-top: 20px;padding: 20px 10px 10px}
.bt-detail .price>*{display: block}
.bt-detail .price>big{font-size: 32px;line-height: 100%;font-weight: 400}
.bt-detail .price>small{display: block;font-weight: 200; font-size: 13px}
.bt-detail .ui-btn-border{min-width: 95px;}
/* .active .bt-detail .btn-addcart,.ft-detail.active .btn-addcart{background: #ECECEC;color: var(--black);border-color: #e0e0e0} */

.pd>header{text-align: center;margin-bottom: 20px}
.pd>header>h2{text-transform: uppercase;color:var(--black); font-size: 21px;line-height: 100%}
.pd>header>p{ color: rgba(var(--promary), 1);font-size: 12px;font-weight: 200}
.pd>.chk-promotion{}
.list-pd .pd >.chk-promotion+a > .info{padding-bottom: 10px}
/*.list-pd .pd >.chk-promotion~.wrap .bt-detail{border-top: none}*/
.pd>.chk-promotion>figure{position: relative;flex-basis: 40%;max-width: 40%;padding: 5px; margin-right: 30px; margin-top: 10px}
.pd>.chk-promotion>figure>.img-free{position: absolute;bottom:23px;right:-7px;z-index: 2;max-width: 85%}
.pd>.chk-promotion>.free{min-height: 217px; flex-basis: 60%;max-width: 60%;background: #fff; padding: 15px; box-shadow: 9px 9px 40px rgba(0, 0, 0, 0.08);text-align: center;font-weight: 200;border-radius: 4px;-webkit-border-radius: 4px}
.pd>.chk-promotion>.free>b{display: block;padding:7px 5px; line-height: 100%; text-align: center; font-size: 13px; margin: -15px -15px 10px; border-radius: 4px 4px 0 0;-webkit-border-radius: 4px 4px 0 0; background: rgb(var(--primary)); color: var(--white)}
.pd>.chk-promotion>.free>span{font-size: 8px}
.pd>.chk-promotion>.free .select-button{ font-size: 12px;white-space: normal}
.pd>.chk-promotion>.free .select-button p{margin-bottom: 0}
.select-button input[type="radio"]{position: absolute;opacity: 0}
.select-button input[type="radio"]+label{display: block;width: 100%; background: #F4F6F9; padding: 10px; text-align: center;border-radius: 4px;-webkit-border-radius: 4px;cursor: pointer;line-height: 110%}
.select-button input[type="radio"]+label.d-flex{display: flex;flex-flow:column wrap;justify-content: center}
.select-button input[type="radio"]+label.d-flex>.txt-l{position: relative; padding-left: 30px}
.select-button input[type="radio"]+label.d-flex>.txt-l:not(:last-child){margin-bottom: 4px}
.select-button input[type="radio"]+label.d-flex>.txt-l i{position: absolute;left: 9px}
.select-button input[type="radio"]:checked+label{background: #CDE4F8}
.select-button input[type="radio"]:checked+label.h-100{background: #F4F6F9}
/*popup detail*/
.fancybox-slide>.ft-detail{ width: 340px;background: #fff;border-radius: 12px;-webkit-border-radius: 12px}
.ft-detail>*{margin-bottom: 15px;font-size: 12px}
.ft-detail .head-title>figure{position: relative; width: 62px; text-align: center;border-radius: 8px; border: 1px solid #ECECEC; margin-right: 10px}
.ft-detail .head-title>figure img{max-height: 60px}
.ft-detail>.quantity,.ft-detail .head-title{align-items: center}
.pd-name .title{font-size: 16px;line-height: 120%}
.ft-detail>.type-purchase>p{margin-bottom: 10px}
.ft-detail .mz-chk input + label{color: var(--text-gray);font-size: 14px}
.ft-detail .mz-chk input:checked + label{color: var(--black)}
.ft-detail>.text-detail{border-top: 1px solid #ECECEC;padding-top:15px;font-size: 12px;}
.ft-detail>.total-mob{display: flex;margin-bottom: 20px;border: none;padding:10px 0 0}
.ft-detail>.ctrl-btn{margin: 0 -24px -24px;padding: 24px; border-top: 1px solid #ECECEC}
/*popup cart*/
.dropdown-content{padding-top: 15px;color: var(--black)}
.cart-list{padding: 15px; min-height: 80px; overflow: auto}
[id="header"] .cart-list{max-height:calc(100vh - 300px);}
.cart-list>li{position: relative;margin-bottom: 15px}
.cart-list .pd,.cart-list .pd .wrapinfo,.dropdown-content>.total-bar,.pd-items,.total-mob{display: flex;flex-flow: row nowrap;justify-content: space-between; align-items: center}
.cart-list .pd .wrapinfo figure{position: relative;width: 62px; border: 1px solid #ECECEC;border-radius: 8px;-webkit-border-radius: 8px}
.cart-list .pd .wrapinfo figure:before{content: "";display: block; padding: 100% 0 0}
.cart-list .pd .wrapinfo figure img{display: block;position: absolute;top: 0;left: 0; right: 0; bottom: 0;object-fit: cover;overflow: hidden;max-height: 60px; margin: 0 auto}
.cart-list .pd .wrapinfo .info{padding-left: 10px; display: flex;flex-flow:column nowrap;justify-content:center; align-items: flex-start;text-align: center;}
.wrapinfo .info .title{ font-size: 14px;line-height: 120%}
.wrapinfo .info .price-average{font-weight: 200; font-size: 12px; color: var(--text-gray);margin: 0}
.wrapinfo .info .price-average a{color: rgb(var(--primary))}
.cart-list .pd .sum-item{height: 60px; display: flex;flex-flow:column nowrap;justify-content:space-between; align-items: flex-end}
.cart-list .pd .sum-item .cv-select{width: 85px}
.cart-list .pd .sum-item .cv-select>*{text-align: right;background: #f8f8f8;min-width: 55px}
[id="header"] .dropdown-content>.total-bar{padding: 15px; background: #fff;position: relative;}
.sw-cart-mob{position: absolute;top: 50%;left: 15px; transform: translateY(-50%);-webkit-transform: translateY(-50%);display: none; justify-content: center;align-items: center;width: 30px; height: 30px; max-width: 30px; text-align: center}
.sw-cart-mob img{display: block;transition: .2s all ease;-webkit-transition: .2s all ease}
.sw-cart-mob.active img{transform: rotate(-180deg);-webkit-transform: rotate(-180deg)}
.pd-items>.items{display: block;width: 45px; height: 45px;max-width: 45px; line-height: 45px; text-align: center;font-size: 28px;border-radius: 4px;border: 1px solid #9C9C9C;margin-right: 10px;}
.pd-items>div{font-weight: 200px; font-size: 13px;line-height: 100%}
.pd-items>div>*{display: block;font-weight: 400; font-size: 16px; text-transform: uppercase;margin-top: 4px}
[id="header"] .dropdown-content>[class*="ui-btn"]{padding-top: 15px; padding-bottom: 15px;border-radius: 0 0 12px 12px;-webkit-border-radius: 0 0 12px 12px;text-transform: uppercase;font-size: 16px}
[id="header"] .dropdown-content>.total-bar .total_price,.total-mob>.price .total_price{font-weight: 700; color: #000;font-size:130%}
.total-bar>.price{display: flex;flex-flow: column wrap; justify-content: center;align-items: flex-end}
.total-bar>.price>*{display: block; line-height: 140%}
.total-bar>.price>big{font-size: 150%}
.total-bar>.price>small{font-weight: 200; color: var(--text-gray); line-height: 120%}
.btn-del{position: absolute;top:-5px;left: -5px; width: 20px;height: 20px;background: #fff;border-radius: .2rem;-webkit-border-radius: .2rem; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);}
.btn-del:before,.btn-del:after{content: "";display: block; width: 60%; left: 19%;height: 2px; border-radius: 5em;-webkit-border-radius: 5em; background: #262C31; position: absolute;top: 47%}
.btn-del:before{transform: rotate(45deg)}
.btn-del:after{transform: rotate(-45deg)}
.btn-del:hover{background-color: rgb(var(--red))}
.btn-del:hover:before,.btn-del:hover:after{background: #fff}
.total-mob{display: none; position: relative;padding:10px 15px 15px; border-bottom: 1px solid #ECECEC}
.pane .total-mob{display: none}
.total-mob>b{font-size: 16px;font-weight: 400}
.total-mob>.price{ text-align: right}
.total-mob>.price>*{display: block;line-height: 100%}
.total-mob>.price>small{font-weight: 200; color: var(--text-gray); font-size: 12px;margin-top: 4px}
/*.bar-price{background: #fff;margin:-10px -10px 0; padding:6px 10px;border-top: 1px solid #F1F0F0; border-bottom: 1px solid #F1F0F0;display: flex;flex-flow: row nowrap; justify-content: space-between; align-items: center}
.bar-price>h4{ font-size: 14px;}
.bar-price>h4>small{display: block;color: #989898;margin-top: -3px;}
.bar-price>big{display: block;font-size: 200%; color: #DE4441;line-height: 100%}
.bar-link{background: #fff;margin-left: -10px; margin-right: -10px; margin-bottom: 10px}
.bar-link [class*="ui-btn"]{font-weight: 400; border:1px solid #07b53a; background: #fff; color: #07b53a}
.bar-link [class*="ui-btn-blue"]{font-weight: 400; border:1px solid #399DF3; background: #fff; color: #399DF3}*/
/*register*/
form, fieldset{ font-family: "DB_Adman"}
.txt-box,.select-box,.area-box{display: block;width: 100%; padding:5px 10px; font-size: 20px; line-height: 26px; color: #121212;background-color: #F7F7F7; border: 1px solid #ECECEC; border-radius: .2rem;-webkit-border-radius: .2rem;outline: none;-webkit-appearance:none;appearance:none}
.select-box{padding-right: 10px}
.select-tambon .txt-box{ background-color: #ffffff; border: 0; }
select.txt-box,select.select-box{-webkit-appearance:none;appearance:none}
.txt-box::-webkit-input-placeholder, .area-box::-webkit-input-placeholder{color: #bcbcbc}
.txt-box::-ms-input-placeholder, .area-box::-ms-input-placeholder{color: #bcbcbc}
.txt-box::placeholder, .area-box::placeholder{color: #bcbcbc}
.disabled{background: #ededed; cursor:not-allowed;color: #787878}
.f-dilivery .t-green{color:#01AF00}
.formerror{color: #c00; font-size: 13px;text-shadow: none}
.txt-box.formerror,.txt-area.formerror,.select-box.formerror {border-color: #c11}
form fieldset{}
form fieldset legend{display: block; width: 100%; margin-bottom: 10px;margin-top: 15px;font-size: 16px; position: relative;color:var(--black);border-bottom: 1px solid #ECECEC; padding-bottom: 5px;}
/*form fieldset legend:after{content: "";display: block;position: absolute;bottom:0; left: 0;right: 0; height: 3px; border-radius: 5em;-webkit-border-radius: 5em;background: #399DF3}*/
form .rw{margin-bottom: 15px}
form .rw.mb0{margin-bottom: 0}
form .rw label{display: block;font-size: 14px;font-weight: 400}
form .rw label .require,form .rw label .rq{color:#de1818; font-family:"sans-serif"}
.tab-style{display: flex;flex-flow: row nowrap;margin-left: -3px;margin-right: -3px;margin-bottom: 15px}
.tab-style>li{flex: 1 1 0;padding: 0 3px}
.tab-style>li>a{display: block; text-align: center;padding: 5px 10px; color:#fff; background:#636F88;border-radius: .1rem;-webkit-border-radius: .1rem;text-decoration: none}
.tab-style>li>a.active{background: #399DF3}
.for-corp:not([style*="block"]){position: relative;display: none!important}
.area-map{position: relative;overflow: hidden}
.map-search {
    position: absolute;
    margin-top: 10px;
    top: 0;
    left: 0;
    width: 45%;
	min-width: 250px;
	margin-left: 10px;
    box-sizing: border-box;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
	border: 0;
    direction: ltr;
    overflow: hidden;
    text-align: center;
    height: 40px;
    display: table-cell;
    vertical-align: middle;
    color: rgb(0, 0, 0);
    font-family: "DB_Adman";
    user-select: none;
    font-size: 14px;
    background-color: rgb(255, 255, 255);
    padding: 0px 17px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	z-index: 1;outline: none;
}
.current-location {
	position: absolute;
    margin-right: 10px;
    top: 55px;
	right: 0;
    box-sizing: border-box;
    border: 0;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
    height: 40px;
    color: rgb(0, 0, 0);
    user-select: none;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    width: 40px;
    height: 40px;
    font-weight: 500;
    cursor: pointer;
	z-index: 9;}
.current-location label {
    margin: auto;
	display: block;
    width: 18px;
    height: 18px;
    background-image: url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png);
    background-size: 180px 18px;
    background-repeat: no-repeat;
    background-position: -144px center;
	cursor: pointer;
	z-index: 9
}
.box-confirm{position: absolute; top: 50%;left: 50%; width: 220px; background: #fff; padding: 10px;box-shadow: rgba(0, 0, 0, 0.75) 0px 1px 4px -1px; z-index: 100;border-radius: .3rem;-webkit-border-radius: .3rem;transform: translate(-50%,20%)}
.box-confirm .title,.gm-style .gm-style-iw-c .title{ text-align: center; font-weight: 400; font-size: 14px; margin-bottom: 5px}
.box-confirm .ctrl-btn,.gm-style.gm-style-iw-c .ctrl-btn{ display: flex; justify-content: center}
.box-confirm .ctrl-btn [class*="ui-btn"],.gm-style  .gm-style-iw-c .ctrl-btn [class*="ui-btn"]{ flex: 1 1 0; font-size: 14px;min-width:inherit;margin: 0 3px;min-width: inherit}
/*.box-confirm .ctrl-btn [class*="ui-btn-gray"]{background: #808080}*/
.switch-field>input{opacity: 0;position: absolute}
form .rw .switch-field>label{display: inline-block;padding: 6px 12px; margin-bottom: 5px; background: #fff; color: #121212; border: 1px solid #C8C9C9; border-radius: .2rem;-webkit-border-radius: .2rem;outline: none;cursor: pointer;white-space: nowrap}
form .rw .switch-field>input:checked+label{background:#399DF3;color: #fff;border-color: transparent}
/*upload*/
.file-upload-wrapper{position:relative;width:100%;height:38px; margin-bottom: 10px}
.file-upload-wrapper .hid{display: none}
.file-upload-wrapper:after {content:attr(data-text);font-size:13px;position:absolute;top:0;left:0;background:#fff;padding:5px 10px;display:block;width:calc(100% - 91px);pointer-events:none;z-index:20;height:38px;line-height:30px;color:#121212;text-align:left;border-radius:.2rem;-webkit-border-radius:.2rem;border: 1px solid #C8C9C9;white-space: nowrap;text-overflow: ellipsis;overflow: hidden}
.file-upload-wrapper:before {content:attr(data-text);position:absolute;top:0;right:0;display:inline-block;height:38px;background:#399DF3;color:#fff;font-weight:400;z-index:25;font-size:14px;line-height:38px;padding:0 20px;text-transform:uppercase;pointer-events:none;border-radius:.2rem;letter-spacing: 0.05em;}
.file-upload-wrapper:not(.added):before{left: 0; text-align: center}
.file-upload-wrapper:hover:before {background:#636F88;}
.file-upload-wrapper input {opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:99;height:38px;margin:0;padding:0;display:block;cursor:pointer;width:100%;}
.upload-attach .note{font-size: 13px}
.upload-attach .note>span{font-weight: 200}
/*.upload-attach span[class*="t-"]{font-size: 18px;display: block}*/
.upload-attach .image{position: relative}
.upload-attach .image .close{display: block;position: absolute;top: 5px;right: 5px; width: 24px; height: 24px;background: rgba(0,0,0,0.5);border-radius: 5rem;-webkit-border-radius: 5rem}
.upload-attach .image .close:before,.upload-attach .image .close:after{content: "";display: block;position: absolute; top: 45%; left: 20%; right: 20%;height: 2px;background: rgba(255,255,255,0.85);transform-origin: center}
.upload-attach .image .close:before{transform: rotate(45deg)}
.upload-attach .image .close:after{transform: rotate(-45deg)}
.upload-attach .image img{ max-height: 150px;object-fit:contain}
/*form .rw .note{font-size: 11px; color:#399DF3;display: block;line-height: 140%}
#sansiri_delivery_day{color: #01AF00}*/
/*checkout*/
.sec-checkout{}
.sec-checkout>div>.row[class*="_chd"][class*="-cl"][class*="-xs-12"]>*{padding-left: 3vw; padding-right: 3vw; padding-top: 3vh}
.cart-checkout>.title{font-size: 24px;font-weight: 700;margin-bottom: 30px}
.cart-checkout .cart-list{padding: 0;overflow: visible}
.cart-checkout .wrapinfo .info .title{margin-bottom: 7px;text-align: left}
.cart-checkout .wrapinfo .info .price-average .t-primary{text-decoration: underline}
.cart-checkout .pd .box__number > input{font-size: 21px; width: 30px;}
.cart-checkout .cart-list .pd .sum-item{justify-content: center}
@media screen and ( min-width: 1200px ) {
.cart-checkout .cart-list>li{margin-bottom: 20px}
.cart-checkout .cart-list .pd .wrap-item{ flex-basis: 40%;max-width: 40%;justify-content: space-between}
.cart-checkout .cart-list .pd .wrapinfo figure{width:  80px;}
.cart-checkout .cart-list .pd .wrapinfo figure img{max-height: 78px}
.pd .price-total>big{display: block;font-size: 150%;line-height: 140%}
.pd .price-total>small{font-weight: 200;font-size: 11px;color: var(--text-gray)}
}
.sec-checkout .row .wrap-form{  border-left: 1px solid #ECECEC}
.wrap-form .idTabs{ box-shadow: 0 -1px 0 #E5E5E5 inset;margin-bottom: 30px;}
.wrap-form .idTabs>li{}
.wrap-form .idTabs>li>a{display: block;padding: 10px; font-size: 16px; color: var(--text-gray);border-bottom: 1px solid transparent;text-decoration: none}
.wrap-form .idTabs>li>a.selected{color: var(--black);border-bottom-color: rgb(var(--primary))}
.form-contact .chk{opacity: .45; pointer-events: none; cursor: not-allowed}
.form-contact .show .chk,.show~.footer-submit .chk{opacity: 1; pointer-events:auto; cursor:default}
.show~.footer-submit .chk.btn-block{cursor: pointer}
.term small{font-size: 13px; font-weight: 200}
.term a{color: var(--black); text-decoration: underline;font-weight: 400}
/*calendar*/
/*#ui-datepicker-div.ui-widget-content{max-width:100%;z-index: 299!important}
#ui-datepicker-div.ui-datepicker *{color:#707070}
#ui-datepicker-div.ui-datepicker table thead{border-bottom:1px solid #eaeaea}
#ui-datepicker-div.ui-datepicker table thead th{padding:2px .3em; color:#A3A6B4;font-weight:300}
#ui-datepicker-div.ui-state-default,#ui-datepicker-div.ui-widget-content .ui-state-default,#ui-datepicker-div .ui-datepicker-header .ui-state-default,#ui-datepicker-div .ui-widget-header{background:none;border:none}
#ui-datepicker-div.ui-state-active,#ui-datepicker-div.ui-widget-content .ui-state-active,#ui-datepicker-div.ui-widget-header .ui-state-active{background:#07b53a;color:#fff}*/
/*payment*/
/*.select-payment>ol>li{padding:0 3px!important}
.select-payment>ol>li>a{display: block;border: 1px solid #dcdcde;border-radius: .2rem;-webkit-border-radius: .2rem;background: #fff; padding:20px 10px; color: #121212;text-decoration: none}
.select-payment>ol>li>a figure img{max-width: 60%;height: auto}
.select-payment>ol>li>a h3{color: #4e4e4e; font-size: 16px; margin: 5px 0 20px}
.select-payment>ol>li>a [class*="ui-btn"][class*="-border"]{min-width:110px;color: #fff; background: #399DF3; border: none; font-size: 13px;padding-top: 4px; padding-bottom: 4px}
.select-payment>ol>li>a [class*="ui-btn"]>i{color:#fff;transition: .2s all ease-in-out;-webkit-transition: .2s all ease-in-out}
.select-payment>ol>li>a [class*="ui-btn"]:hover,.select-payment>ol>li>a [class*="ui-btn"]:hover>i{color: #fff}*/
.sec-thank{ text-align: center;min-height: 100%;color: #262C31}
.sec-thank>.container{display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;}
.sec-thank header img{ display: block;margin: 20% auto 0}
.sec-thank .main>*{margin-bottom: 10%}
.main .thank-you-image{margin-top: 30px}
.main .thank-you-title{font-weight: 700; margin:0 auto 20px ;line-height: 120%}
.main .thank-you-description{ font-weight: 200; margin-left: auto; margin-right: auto;width: 80%;line-height: 140%}
.sec-thank footer{ width: 100%; border-top: 1px solid #E7E7E7;letter-spacing: 1px}
.sec-thank footer .contacts {display: flex;	flex-flow: row wrap;justify-content: space-between;padding: 40px 0;width: 80%;margin: 0 auto;}
.sec-thank footer .contact{display: flex;align-items: flex-start}
.sec-thank footer .contact>img{ flex-basis: 20px; max-width: 20px}
.sec-thank footer .contact>.contact-info{flex: 1 1 0;padding-left: 10px}
.sec-thank footer .contact a{ color: #262C31}
.sec-thank footer .contact .secondary-text {    color: #97A3AE;    font-size: 10px;    line-height: 16px;    margin-top: 4px;    text-transform: uppercase;    text-align: left;}
.sec-thank .copyright{font-size: 10px}
/*page detail*/
.page-detail [class*="sec-"]{padding-top:8vh}
.page-detail [class*="sec-"] .title{margin-bottom: 8vh}
.sec-contact .followus{ margin-bottom: 5vh}
.form-contact .txt-box{ padding-top: 10px; padding-bottom: 10px}
.form-contact .txt-box::-webkit-input-placeholder { color: #666}
.form-contact .txt-box::placeholder { color: #666}
.form-contact textarea.txt-box{min-height: 150px;resize: vertical}
.form-contact .select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 48px;background-color: #F7F7F7}
.form-contact .select2-container--default .select2-selection--single .select2-selection__arrow{top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%)}
.form-contact .ctrl-btn [class*="ui-btn"]{text-transform: uppercase}
.address{position: relative; background: url("../images/bg-contact-office.png") 100% 100% no-repeat; background-size: 40% auto}
.address>*{margin-bottom: 30px}
.address address,.address .ct-link a{font-size:150%; font-weight: 200;line-height: 150%}
.address .ct-link a{color: #262c41;}
.address .ct-link a u{font-weight: 400}
.ft-map{margin-top: 8vh}
.ft-map iframe{display: block}
/*faq*/
.contentTabs>[class*="bx"]:not(:first-child){display: none}
.sec-faq{position: relative}
.faq-mob,.cor-page-tabs{display: flex;flex-flow: row nowrap;margin-bottom: 50px; align-items: flex-start}
.faq-mob .btn-b2faq{display: none; position: absolute; top: 0 ;left: 0}
.faq-mob .idTabs>li,.cor-page-tabs .idTabs>li{margin-bottom: 25px}
.faq-mob .idTabs>li>a,.cor-page-tabs .idTabs>li>a{display: block; font-size: 18px; color: var(--black);text-decoration: none;transition: .2s all ease;-webkit-transition: .2s all ease}
.accordion{position: relative; padding: 10px 30px 0}
.accordion .bx{position: relative;padding: 2.1vw;box-shadow: inset 0px -1px 0px #ECECEC;transition: .2s all ease;transition: .2s all ease}
.accordion>.bx+.bx+.bx+.bx+.bx{display: none}
.accordion.expand>.bx+.bx+.bx+.bx+.bx{display:block}
.accordion .bx.expand{background: var(--white);box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.08);}
.accordion .acc-h{display: block; font-size: 18px; color: var(--text-gray);text-decoration: none;padding-right:30px;}
.accordion .acc-h.active{color: var(--black);margin-bottom: 15px}
.accordion .acc-h .icon-toggle{position: absolute; top: 0; top:2.1vw;right: 2.1vw; display: flex;width: 30px; height: 30px;justify-content: center;align-items: center;opacity: .35}
.accordion .acc-h.active .icon-toggle{opacity: 1;transform: rotate(180deg)}
.accordion .acc-h .icon-toggle img{display: block; max-height: 12px;margin: 0 auto}
.accordion .pane{display: none}
.accordion .pane a{color: rgb(var(--primary));}
.accordion .pane a.underlink, a.underlink{color:var(--black);text-decoration:underline}
.accordion .ctrl-btn{position: relative;margin-top: 20px; text-align: center}
.accordion .ctrl-btn .sw-showmore{display: inline-block; font-size: 18px; font-weight: 200; color: var(--black); text-decoration: underline;padding: 10px 0;text-transform: uppercase}
.ft-contact{margin-bottom: 50px}

/*corporate*/
.cor-page-tabs .contentTabs{padding-left: 5vw}
.cor-page-tabs .idTabs{position: relative}
.cor-page-tabs .idTabs>li:nth-child(1):after{ background-image: url(../images/cor-about.svg)}
.cor-page-tabs .idTabs>li:nth-child(2):after{ background-image: url(../images/cor-products.svg)}
.cor-page-tabs .idTabs>li:nth-child(3):after{ background-image: url(../images/cor-quality.svg)}
.cor-page-tabs .idTabs>li:nth-child(4):after{ background-image: url(../images/cor-delivery.svg)}
.reader{ font-size: 14px;color: #262C31;letter-spacing: 0.8px;}
.reader a{color: rgb(var(--primary));}
.thm-vdo{position: relative}
.thm-vdo i{display:block; width: 15%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);background: url(../images/pages/home/mobile/icons/play.svg) 50% 50% no-repeat; background-size: contain;transition: .2s all ease .3s;-webkit-transition: .2s all ease .3s}
.thm-vdo i:before{content: "";display: block; padding: 100% 0 0;}
.thm-vdo:hover i{transform: translate(-50%,-50%) scale(1.1);-webkit-transform: translate(-50%,-50%) scale(1.1) }
.page-bx header>h3{position: relative;padding-bottom: 20px; border-bottom: 1px solid #ECECEC;padding-top: 80px; font-size: 170%;letter-spacing: 2px;}
.page-bx header>h3:after{content: "";display: block;position: absolute; bottom: 0;right: 0; width: 30%; height: 100%; background: url(../images/cor-nav-18.9l.webp) 100% 100% no-repeat;background-size: contain}
.page-bx header>h3>span{display: inline-block; border-bottom: 1px solid var(--black);line-height: 120%}
.page-bx header>nav{ margin-top: 30px}
.page-bx nav>ul>li{ text-align: center}
.page-bx nav>ul>li>*{font-weight: 200}
.page-bx nav>ul>li>small{display: block;line-height: 140%}
.page-bx nav>ul>li>i{display: block; margin-bottom: 10px}
.page-bx nav>ul>li>i>img{ display: block; max-width: 60%;margin: 0 auto}
.page-bx [id="sprinkle-bett"] header>h3{padding-left: calc(30% + 20px)}
.page-bx [id="sprinkle-bett"] header>h3:after{ left: 0; right: auto;background-image: url(../images/cor-nav-small-bottles.webp); background-position: 0 100%}
.page-bx [id="accessories"] header>h3:after{background-image: url(../images/cor-nav-acc.webp)}
.page-bx .step{margin-bottom: 30px; padding-top: 20px;}
.page-bx .step>li{display: flex;flex-flow: row nowrap;margin-bottom:15px}
.page-bx .step>li>b{flex-basis:100px;max-width: 18% }
.page-bx .step>li>p{flex: 1 1 0; padding-top: 20px;}
.page-bx ol{ margin-left: 20px;margin-bottom: 30px;}
.page-bx ol>li{list-style: decimal outside;padding-left: 20px; margin-bottom: 15px;}
.page-bx .detail ul.disc>li{list-style: disc;margin-left: 20px;}
@media (min-width:768px){
.sec-faq:before,.sec-faq:after{content: ""; display: block;position: absolute; bottom: 0; width: 7vw; height: 60vh;z-index: -1}
.sec-faq:before{left: 5vw;bottom: 27%; background: url(../images/bg-faq-l.png) 50% 50% no-repeat; background-size: contain}
.sec-faq:after{width: 20vw; right: 0;background: url(../images/bg-faq-r.png) 50% 50% no-repeat; background-size: contain}
.sec-corporate:before,.sec-corporate:after{display: none}
}
@media (min-width:1025px){
.faq-mob .idTabs,.cor-page-tabs .idTabs{position: relative;flex-basis: 27%; max-width: 27%;}
.faq-mob .idTabs>li:after,.cor-page-tabs .idTabs>li:after{ content: ""; display: none;position: absolute; top: 100%; left: 0; right: 0; height: 240px; background: url(../images/faq-delivery.svg) 0% 100% no-repeat; background-size: contain}
.faq-mob .idTabs>li.active:after,.cor-page-tabs .idTabs>li.active:after{display: block}
.faq-mob .idTabs>li:nth-child(1):after{ background-image: url(../images/faq-quality.svg)}
.faq-mob .idTabs>li:nth-child(2):after{ background-image: url(../images/faq-becoming.svg)}
.faq-mob .idTabs>li:nth-child(3):after{ background-image: url(../images/faq-delivery.svg)}
.faq-mob .idTabs>li:nth-child(4):after{ background-image: url(../images/faq-delivery.svg)}
.faq-mob .idTabs>li:nth-child(5):after{ background-image: url(../images/faq-deposit.svg)}
.faq-mob .idTabs>li:nth-child(6):after{ background-image: url(../images/faq-contact-info.svg)}
.faq-mob .idTabs>li>a,.cor-page-tabs .idTabs>li>a{opacity: .3}
.faq-mob .idTabs>li>a.selected,.cor-page-tabs .idTabs>li>a.selected{opacity: 1}
.faq-mob .idTabs>li>a i{display: none}
.faq-mob .contentTabs,.cor-page-tabs .contentTabs{ flex: 1 1 0; padding-left: 3vw; border-left: 1px solid #ECECEC}
.contentTabs .faq-bx .h-topic-faq{display: none}
.faq-mob .btn-b2faq{display: none}
.page-bx>figure img{display: block; /*width: 100% ;*/ padding-top: 20px;}
[id="bb_chat"] { display: flex; }
}
@media (max-width:1024px){
.faq-mob{position: relative;}
.faq-mob.step2{ max-height: inherit}
.faq-mob .btn-b2faq{top:-80px;margin-top: -7vh}
.faq-mob.step2 .btn-b2faq{display: block}
.faq-mob .btn-b2faq>a{display: inline-block; padding: 10px 0 10px 15px;color: var(--black); background: url(../images/ic-angle-left.png?v=1.00) 0 50% no-repeat; background-size:auto 16px}
.faq-mob .idTabs, .faq-mob .contentTabs{flex: 0 0 100%; max-width: 100%;left: 0;position: relative;transition: .2s all ease;-webkit-transition: .2s all ease}
.faq-mob.step2 .idTabs, .faq-mob.step2 .contentTabs{left: -100%}
.faq-mob .idTabs{display: flex;justify-content: center; flex-wrap: wrap}
.faq-mob .idTabs>li{ flex-basis: 26%; max-width: 26%;padding-left: 10px; padding-right: 10px;margin-bottom: 20px}
.faq-mob .idTabs>li>a{ width: 205px; margin: 0 auto; max-width: 100%; text-align: center;padding: 24px; border: 1px solid #ECECEC;border-radius: 12px}
.faq-mob .idTabs>li>a>i{display: block;margin-bottom: 15px;}
.faq-mob .idTabs>li>a>i img{display: block; margin: 0 auto; height: auto;width: 128px;object-fit: contain;}
.faq-mob .idTabs>li>a>span{display: block; line-height: 120%; height: 50px;display: flex;align-items: center}
.accordion .bx{padding: 24px}
.page-detail [class*="sec-corporate"]{padding-top: 30px}
.sec-corporate>.container{ width: 100%; padding-left: 1rem; padding-right: 1rem}
.cor-page-tabs{display: flex;flex-flow: column wrap}
.cor-page-tabs .idTabs{display: flex;flex-flow: row wrap; width: 100%; margin-bottom: 300px; justify-content: center; align-items: flex-end;}
.cor-page-tabs .idTabs:before{ content: "";display: block; position: absolute; top: 52px;left: 0; width: calc(100% + 2rem); margin-left: -1rem; margin-right: 1rem;border-bottom: 1px solid #E7E7E7; z-index: -1}
.cor-page-tabs .idTabs>li:after{ content: ""; display: none;position: absolute; top:100%; left: 0; right: 0; height: 240px; margin-top: 20px; background: url(../images/cor-about.svg) 50% 100% no-repeat; background-size: contain}
.cor-page-tabs .idTabs>li.active:after{display: block}
.cor-page-tabs .idTabs>li{padding:0 2.5vw;margin: 0 0 -1px}
.cor-page-tabs .idTabs>li>a{opacity: .3;display: block; line-height: 32px; white-space: nowrap;padding: 10px 0;border-bottom: 1px solid transparent}
.cor-page-tabs .idTabs>li>a.selected{opacity: 1;border-bottom-color: rgb(var(--primary));}
.cor-page-tabs .contentTabs{ width: 768px; margin: 0 auto;padding: 0;}
}

/*popup*/
.thm-popup{width: 800px; max-width: 100%;border-radius: 12px;-webkit-border-radius: 12px;background: #fff}
.thm-popup.mid{width: 400px}
#acp-cookies.thm-popup.mid{width: 280px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);}
@media screen and (max-width: 768px) { .thm-popup.mid{width: 100%;} }
@media (max-width: 566px) {#acp-cookies.thm-popup.mid{width: 100%;}}
.fancybox-button--thumbs,.fancybox-button--share{display: none}
.fancybox-slide>[id*="vdo"]{padding: 0;margin: 0; background: none;max-width: 100%}
.fancybox-caption{border: 0}
.fancybox-slide > .thm-popup,.thm-popup .inner{text-align: center}
.fancybox-slide > .thm-popup>.inner{}
.thm-popup .inner{min-height: 220px;display: flex; flex-flow: column wrap; justify-content: center;color: var(--black)}
.thm-popup .inner .help{margin-left: -24px; margin-top: -24px;padding: 25px;border-bottom: 1px solid #ececec; margin-bottom: 30px;}
.thm-popup .inner .help b{display: block;margin-bottom: 10px}
.thm-popup .inner .help a{color: var(--black)}
.thm-popup .inner>[id^="chk-"]:not(:first-child){display: none}
.thm-popup i.icon{margin-bottom: 20px}
.thm-popup .title{font-size: 16px}
.thm-popup .desc{font-size: 13px}
[id="acp-cookies"] i.icon{margin-bottom: 10px}
[id="acp-cookies"] .title{font-weight: 700; font-size: 18px}
/*[id="acp-cookies"] .desc{margin-bottom: 30px}*/
.thm-popup .inner>[id^="chk-"] .ctrl-btn,.thm-popup[id*="popup-chg"] .inner .ctrl-btn{padding: 24px 14px 0; border-top: 1px solid #ececec; margin: 15px -24px 0;}
.thm-popup .msg .t-blue{color: rgb(var(--primary))}
.thm-popup .msg .big{ font-size: 150%;font-weight: 700}
.thm-popup .ctrl-btn>[class*="ui-btn"]{padding: 10px; font-size: 20px;}
#popup-contact .inner,#acp-cookies .inner,.thm-popup[id*="popup-chg"] .inner{ padding-bottom: 64px}
.thm-popup #chk-step-contact .help{border: 0; margin: 0;padding: 0}
.thm-popup #chk-step-contact .help p:first-child{margin-bottom: 10px;font-size: 15px}
.thm-popup #chk-step-contact .ctrl-btn{position: absolute;left: 24px; right: 24px; bottom: 24px}
.thm-popup[id*="popup-chg"] .inner{letter-spacing: 0.05em}
.thm-popup[id*="popup-chg"] .inner .title{ font-size: 140%;line-height: 120%;margin-bottom: 20px}
.thm-popup[id*="popup-chg"] .inner .desc{font-size:16px;font-weight: 200}
.thm-popup[id*="popup-chg"] .inner .ctrl-btn{position: absolute;left: 24px; right: 24px; bottom: 24px;}
.thm-popup[id="acp-cookies"] .inner>[id^="chk-"] .ctrl-btn{border-top: 0;}
.thm-popup[id="acp-cookies"] .inner{min-height: 0;}
.thm-popup[id="acp-cookies"] #chk-step-contact .ctrl-btn{bottom: 14px}
#acp-cookies .inner{ padding-bottom: 54px}
@keyframes dotFlashing{0%{background-color:#c4c4c4}50%,to{background-color:#f3f3f3}}
@-webkit-keyframes dotFlashing{0%{background-color:#c4c4c4}50%,to{background-color:#f3f3f3}}
.stage{display:flex;justify-content:center;align-items:center;position:relative;padding:1rem 0;margin:0 -5%;overflow:hidden}.dot-flashing,.dot-flashing::after,.dot-flashing::before{position:relative;width:15px;height:15px;border-radius:5em;background-color:#c4c4c4;color:#c4c4c4;animation:dotFlashing 1s infinite linear alternate;animation-delay:.5s}.dot-flashing::after,.dot-flashing::before{content:'';display:inline-block;position:absolute;top:0;left:-20px;animation:dotFlashing 1s infinite alternate;animation-delay:0s}.dot-flashing::after{left:20px;animation-delay:1s}
/*edit responsive*/
@media (min-width:1024px){
[class*="sec-"]>.container{}
/*.footer-bar,.footer-submit{margin-left: -20px; margin-right: -20px}*/
}
@media (min-width:1201px){
.list-pd[class*="_chd"][class*="-cl"][class*="-xl-25"]>li{padding-left: 20px; padding-right: 20px}
}
@media (min-width:1601px){
.sec-pd>.full{padding-left: 5vw;padding-right: 5vw}
}
@media (max-width:1600px){
.sec-pd>.full{padding-left: 1rem;margin-right: 1rem}
}
@media (max-width:1024px){
.pd .box__number > input{font-size: 30px}
.bt-detail .price > big{font-size:26px}
.bt-detail .price > small{font-size: 8px;white-space: nowrap}
.list-pd .pd > a > .info .title{font-size: 18px}
.main-nav > ul > li > a::after{width: 100vw}
.cor-page-tabs .idTabs {
    margin-bottom:30px;
    flex-wrap: nowrap;
    overflow: auto;
    justify-content: flex-start;
    overflow-y: hidden;
}
.cor-page-tabs .idTabs {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.cor-page-tabs .idTabs::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
}
@media (max-width:992px){.container{overflow: visible}}
@media (max-width:991px){
[class*="sec-thank"]>.container{background: #fff}
.sec-thank > .container{min-height: 100vh}
.list-pd{justify-content: center}
.page-detail .container,.cor-page-tabs .contentTabs{padding-left: 1rem; padding-right: 1rem}
.page-detail .sec-corporate>.container{padding-left: 0; padding-right: 0}
.cor-page-tabs .contentTabs{width: auto; margin: 0;}
.page-bx>figure{margin-left: -1rem; margin-right: -1rem}
.page-bx>figure img,.thm-vdo img{display: block; margin: 0 auto}
.thm-vdo img{width: 100%}
.faq-mob .btn-b2faq{top: -70px}
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > a.selected::after{z-index: -1}
[id="footer"]{padding-top: 30px}
.ft-contact{margin-bottom: 0}
.cor-page-tabs{margin-bottom: 0}
}
@media (max-width:800px){
[id*="header"] .top-title .logo{min-height:inherit}
}
@media (max-width:767px){
/* .sec-pd>.full{ padding-top: 0; } */
[id*=header]{border-bottom: unset;}
.topbanner.banner-top img{width: 100vw;margin: 0 -6%;max-width: unset;}
.fancybox-toolbar{opacity: 1;visibility: visible}
.fancybox-toolbar>*:not(.fancybox-button--close){display: none!important}
#toc form fieldset [class*="_chd"][class*="-cl"] > *,#toc form fieldset [class*="_self"][class*="-cl"]{padding-left: 3px; padding-right: 3px}
#toc form fieldset .row{margin-left: -3px; margin-right: -3px}
.main .thank-you-title{font-size: 21px;width: 100%}
.main .thank-you-description{width: 80%}
.pd>.chk-promotion>.free{margin-bottom: 20px}
.pd>.chk-promotion>.free .select-button{height:auto!important}
.pd>.chk-promotion>.free .select-button label.h-100{min-height: 150px}
.sec-thank footer .contacts{padding: 10px 20px;width: 100%}
.contacts > p.text{ font-size: 12px; flex-basis: 100%;max-width: 100%;color: #929598;margin-bottom: 30px}
.sec-thank footer .contact a{font-size: 13px}
/*.page-detail [class*="sec-"]{padding-left:1rem;padding-right:1rem}*/
.page-detail [class*="sec-"] .ft-map{margin-left: -1rem;margin-right: -1rem}
/*.cor-page-tabs .idTabs{margin-bottom:30px; flex-wrap: nowrap;overflow: auto; justify-content: flex-start;overflow-y: hidden;}*/
.cor-page-tabs .idTabs>li{padding: 0 12px;margin-bottom: 0}
.cor-page-tabs .idTabs>li.active:after{display: none}
.page-detail .sec-faq{padding-top: 0}
.sec-faq>.container{overflow: hidden;padding-top: 8vh}
.page-detail [class*="sec-corporate"]{padding-top:20px}
.sec-corporate>.container{padding-top: 0}
/*popup cart*/
[id="header"] .dropdown-content{position: fixed;top: auto;bottom: 0; width: 100vw; padding-top: 5px; box-shadow: 0 -10px 10px 0 rgba(0,0,0,0.2)}
.dropdown-content>.total-bar,[id="header"] .dropdown-content>.total-bar{position: relative;padding-left: 55px}
.sw-cart-mob,.total-mob{display: flex}
[id="header"] .cart-list{max-height: 300px;}
[id="header"] .dropdown-content > .total-bar .total_price{display:none}
[id="header"] .dropdown-content > [class*="ui-btn"]{display: inline-block; width: auto;padding: 6px 15px; font-size: 13px; border-radius: 4px;-webkit-border-radius: 4px; position: absolute; bottom: 20px; right: 15px;}
.thm-popup{vertical-align: bottom; margin: 0; border-radius:12px 12px 0 0;-webkit-border-radius:12px 12px 0 0}
/*checkout*/
.sec-checkout>.full{padding-top: 0}
.sec-checkout>.full>.row{margin-left: 0; margin-right: 0}
.sec-checkout > div > .row[class*="_chd"][class*="-cl"][class*="-xs-12"] > *{ padding-top: 20px; padding-left: 0; padding-right: 0}
.sec-checkout .row .wrap-form{border-left: none}
.cart-checkout{display: flex;flex-flow: column wrap;border-bottom: 1px solid #ECECEC;margin-left: -1rem;margin-right: -1rem;padding: 1rem 1rem 0.5rem !important;
width: calc(100% + 2rem);flex-basis: auto !important;max-width: inherit !important;}
.cart-checkout>.title{order: 1; margin-bottom: 10px; font-size: 16px; text-align: center; font-weight: 400}
.cart-checkout>.cart-list{order: 3;margin-top: 15px}
.cart-checkout>.total-bar{ order:2}
.cart-checkout>.sw-cart-mob{order: 4;display:flex;position: relative; top: auto; left: auto; transform: none;-webkit-transform: none; width: 100%; max-width: 100%; margin: 7px auto 0}
.cart-checkout>.sw-cart-mob>img{max-width: 40px;}
.cart-checkout>.cart-list>li:last-child{margin-bottom: 0}
.cart-checkout.dropdown-content>.total-bar{padding-left: 0}
.wrap-form .idTabs{margin-left: -1rem; margin-right: -1rem}
/* .form-contact .chk:not(.btn-block){display: none} */
.form-contact .show .chk,.show~.footer-submit .chk{display: block}
}
@media (min-width:700px) and (max-width:1023px){
/*.item-promote .pd .for-newuser{ width: 30%;top: 50%; left: 30%; transform:rotate(35deg) translate(-80%, 910%) scale(0.85)}*/
}
@media (max-width:576px){
.list-pd[class*="_chd"][class*="-cl"][class*="-xs-06"] > li.pro,.list-pd>li:not(.pro) .pd > .wrap .bt-detail>.price{flex-basis: 100%;max-width: 100%}
.list-pd li:not(.pro) .pd > a{min-height: inherit}
.list-pd li:not(.pro) .pd > a > figure{width: 90%;margin-bottom: 15px;}
.list-pd .pd > a > figure img{max-height: 100%}
.list-pd .pd > a > .info{padding: 0}
.list-pd .pd > a > .info .title {/*min-height:36px;*/display: flex;justify-content: center;align-items: center}
.list-pd>li:not(.pro) .pd > .wrap .bt-detail{flex-wrap: wrap;text-align: center;justify-content: center;border-top: none;padding-top: 0}
.list-pd .pd > a > .info .title{font-size: 14px}
.list-pd .pd > a > .info .price-average{font-size: 11px}
.list-pd>li:not(.pro) .pd > .wrap .bt-detail>.price{margin-bottom: 15px}
.address address, .address .ct-link a{font-size: 120%}
.title p{font-size: 100%}
/*popup detail*/
.fancybox-slide > .ft-detail{position: fixed;left: 0;right: 0;bottom: 0; width: 100%; height: 100%; margin: 0;border-bottom-right-radius: unset;border-bottom-left-radius: unset; overflow: scroll}
[id="header"] .dropdown-content{border-bottom-right-radius: unset;border-bottom-left-radius: unset;}
/*.faq-mob{max-height: 440px}*/
.faq-mob .btn-b2faq{top: -55px}
.faq-mob.step2 .idTabs{left: calc(-100% - 1rem)}
.faq-mob .contentTabs{margin-left: 1rem}
.faq-mob.step2 .contentTabs{margin-left: 0}
.faq-mob .idTabs>li{ flex-basis: 50%; max-width: 50%;padding-left: 5px; padding-right: 5px;margin-bottom:10px}
.faq-mob .idTabs>li>a{ width: 205px; margin: 0 auto; font-size: 14px; max-width: 100%; text-align: center;padding: 14px 30px 10px; border: 1px solid #ECECEC;border-radius: 12px}
.faq-mob .idTabs>li>a>i{margin-bottom: 0;}
.faq-mob .idTabs>li>a>i img{height: auto;width: 64px;}
/* .faq-mob .idTabs>li>a>span{max-width:95px; margin: 0 auto; font-size: 18px;} */
.faq-mob .idTabs>li>a>span{
  margin: 0 auto;
  height: 40px;
  /* width: 70px; */
  left: 31px;
  top: 80px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-align: center;
  display: block;
}
.accordion{padding: 0;letter-spacing: 0.8px;}
.contentTabs .faq-bx .h-topic-faq{background: #fff; margin-top: -42px}
.accordion .bx{padding-bottom: 50px;background: #fff;}
.accordion .bx.expand{margin-bottom: 12px}
.accordion .acc-h .icon-toggle{top: auto; left: 50%;right: auto; bottom: 10px; transform: translateX(-50%)}
/*.accordion .acc-h.active .icon-toggle { transform: rotate(180deg) translateX(50%)}*/
.accordion .acc-h{font-size: 16px; line-height: 140%;padding-right: 0}
.accordion .pane{font-size: 14px; font-weight: 200}
.reader .row figure{margin-bottom: 10px}
.reader .row>.detail:not(:last-child){margin-bottom: 15px}
.page-bx header > h3{font-size: 100%;padding-bottom: 5px;padding-top: 30px}
.page-bx nav > ul{flex-wrap: wrap}
.page-bx nav>ul>li{flex-basis: 30%; max-width: 30%;margin-bottom: 5px}
.page-bx [id="accessories"] header > h3{margin-bottom: 20px}
}
/* @media (max-width:414px){
.h-topic{font-size: 18px;font-weight: 400}
} */

/*Mobile*/

#sentFormMobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modalContentWrapper .h-topic-contact {
    padding: 0 20px;
}

.modalContentWrapper .h-topic-contact::first-letter {
    text-transform: capitalize;
}

#sentFormMobile .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 16px;
    right: 16px;
}

@media screen and (max-width: 1024px) {
    #sentFormMobile .select2-container--default .select2-selection--single .select2-selection__arrow {
        transform: none;
    }
}

#sentFormMobile .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8093A1;
}

@media screen and (max-width: 1024px) {
    #sentFormMobile .select2-selection__placeholder {
        font-size: 20px;
    }
}

#sentFormMobile .fieldset {
    display: flex;
    flex-direction: column;
}

#sentFormMobile .fieldset label {
    font-family: "DB_Adman", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    color: #88A2B7;
    padding-bottom: 6px;
}

#sentFormMobile .fieldset label .rq {
    color: red;
}

#sentFormMobile .fieldset input, textarea {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #E7ECF1;
    background-color: #FFF;
    height: 48px;
    font-family: "DB_Adman", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.005em;
    text-align: left;
    color: #062D4E;
}

#sentFormMobile .fieldset input::placeholder, textarea::placeholder {
    color: #8093A1;
}

#sentFormMobile .fieldset .required-field {
    border: 1px solid #DB5120;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
}

#sentFormMobile .fieldset textarea {
    height: 68px;
}

#sentFormMobile .sendMessageButton {
    background: linear-gradient(86.77deg, #2E86F9 7.81%, #7AB4FF 102.23%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    width: 100%;
    height: 44px;
    padding: 10px 24px;
    border-radius: 16px;
    gap: 8px;
    margin: 20px 0 0;
    font-family: "DB_Adman", sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-align: left;
    color: #FFF;
    text-transform: capitalize;
    position: relative;
}

#sentFormMobile .sendMessageButton::before {
    content: '';
    display: block;
    width: calc(100% + 40px);
    height: 1px;
    position: absolute;
    top: -20px;
    background-color: #E7ECF1;
}

@media screen and (max-width: 1024px) {
    #sentFormMobile .sendMessageButton::before {
        display: none;
    }
}

#sentFormMobile .sendMessageButton:first-letter {
    text-transform: uppercase;
}

@media screen and (max-width: 430px) {
    .page-detail .container{
        padding: 0;
    }

    /*.cor-page-tabs .contentTabs {*/
    /*    padding: 32px 0 20px 0;*/
    /*}*/

    .accordion .bx.expand {
        box-shadow: none;
    }

    .accordion .acc-h.active .icon-toggle {
        transform: rotateZ(0deg);
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}