@font-face {

    font-family: "Muli";

    src: url(../fonts/Muli-Regular.ttf);

}



@font-face {

    font-family: "Muli-Black";

    src: url(../fonts/Muli-Black.ttf);

}



:root {

    --logo-width: 23vw;

    --search-input-width: 210px;

    --initial-font-size: 1vw;

    --white-width: 15vw;

}



a,

a:hover,

a:visited,

a:focus {

    text-decoration: none;

    cursor: pointer;

    color: #ffa400;

}



html,

body,

ul,

li,

ol,

dl,

dd,

dt,

p,

h1,

h2,

h3,

h4,

h5,

h6,

form,

fieldset,

legend,

img,

section {

    margin: 0;

    padding: 0;

}



* {

    margin: 0;

    padding: 0;

}



fieldset,

img,

input,

button {

    border: none;

    padding: 0;

    margin: 0;

    outline-style: none;

}



ul,

ol {

    list-style: none;

}



input {

    padding-top: 0;

    padding-bottom: 0;

}



select,

input {

    vertical-align: middle;

}



select,

input,

textarea {

    font-size: 12px;

    margin: 0;

}



textarea {

    resize: none;

}



img {

    border: 0;

}



table {

    border-collapse: collapse;

}



.clearfix:before,

.clearfix:after {

    content: "";

    display: table;

}



.clearfix:after {

    clear: both;

}



.clearfix {

    *zoom: 1;

}



a {

    text-decoration: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    text-decoration: none;

    font-weight: normal;

    font-size: 100%;

}



s,

i,

em {

    font-style: normal;

    text-decoration: none;

}



.w {

    width: 1200px;

    margin: 0 auto;

}



.fl {

    float: left;

}



.fr {

    float: right;

}



.al {

    text-align: left;

}



.ac {

    text-align: center;

}



.ar {

    text-align: right;

}



.ac img {

    margin-left: auto;

    margin-right: auto;

}



.nopadding {

    padding: 0;

}



a,

button,

input,

optgroup,

select,

textarea,

div {

    -webkit-tap-highlight-color: transparent;

    outline: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    position: relative;

    font-weight: normal;

    margin: 0px;

    background: none;

    line-height: 1.4;

}



html,

body {

    font-family: "Muli", sans-serif, Arial;

    font-size: var(--initial-font-size);

    line-height: 1.4;

    overflow-x: hidden;

    color: #000000;

}



.white {

    color: #fff;

}



.black {

    color: #000000;

}



.upp {

    text-transform: uppercase;

}



.relative {

    position: relative;

}



.absolute {

    position: absolute;

}



.container-fluid {

    width: 100%;

}



@media (min-width: 768px) {

    .container {

        width: 720px;

    }

}



@media (min-width: 992px) {

    .container {

        width: 960px;

    }

}



@media (min-width: 1200px) {

    .container {

        width: 1140px;

    }

}



@media (min-width: 1400px) {

    .container {

        width: 1340px;

    }

}



@media (min-width: 1920px) {

    .container {

        width: 1570px;

    }

}



@media (max-width: 575px) {

    .container {

        width: 100%;

    }

}



.child-same-height,

.flex {

    display: flex;

}



@media (max-width: 767px) {

    .child-same-height {

        display: block;

    }

}



.valign-center {

    display: flex;

    justify-content: center;

    /*align-items: center;*/

    flex-direction: column;

}



.header-warning {

    padding: 0.5em 0;

    font-size: 1.4rem;

    line-height: 1.1;

    font-weight: bold;

    background-color: #f3f3f3;

}



.logo h1 a {

    display: block;

    width: var(--logo-width);

    height: calc(var(--logo-width) / 10);

    background: url(/images/home/MYVAPOR-logo.png) no-repeat center;

    background-size: 100%;

    font-size: 0;

    margin: 1.6rem auto 1rem;

}



.header-main {

    padding-bottom: 1vw;

}



.header-left {

    display: flex;

    top: 0.3vw;

    right: calc(var(--logo-width) / 2 + 56vw);

}



.header-left a {

    color: #000;

}



.header-right {

    top: 0;

    left: calc(var(--logo-width) / 2 + 56vw);

    z-index: 3;

}



.header-left span {

    font-size: var(--initial-font-size);

}



.account img {

    width: calc(var(--initial-font-size) * 1.65);

    float: right;

    margin-left: var(--initial-font-size);

}



.account {

    padding: 0.5vw 1vw 0;

}



.country img.country-icon {

    width: calc(var(--initial-font-size) * 1.65);

    /* float: right; */

    margin-left: var(--initial-font-size);

}



.country {

    padding: 0.5vw 0 0 1vw;

    position: relative;

}



.country>a {

    padding-left: 0.5rem;

    padding-bottom: 1rem;

}



.country-dropdown {

    position: absolute;

    top: 2em;

    z-index: 11;

    background-color: #f9f5e7;

    padding: 0.5rem 2rem 1rem;

    border-radius: 0 0 1rem 1rem;

    margin-top: 0.5rem;

    width: 15rem;

    display: none;

    visibility: hidden;

    opacity: 0;

}



.country ul {

    opacity: 0;

    transform: translateY(5%);

}



.country:hover .country-dropdown {

    display: block;

    visibility: visible;

    opacity: 1;

}



.country:hover ul {

    opacity: 1;

    transform: none;

    transition: opacity 0.5s, transform 0.5s;

}



.country-dropdown li {

    padding: 0.5rem 0 0.5rem 0.5rem;

    border-bottom: 1px solid #e1ded2;

}



.country-dropdown li:last-child {

    border-bottom: none;

}



.country-dropdown li img {

    width: 2.8rem;

    margin-right: 1.5rem;

}



#FormSearch {

    background-color: #d3d3d3;

    /* width: calc(var(--search-input-width) + 2.5rem); */

    width: 100%;

    border-radius: 0.4rem;

    margin-bottom: 0.2vw;

}



.search-input {

    width: calc(100% - 2.5rem);

    border: none;

    background-color: transparent;

    padding-left: 0.5em;

    font-size: 1rem;

    line-height: 1.9rem;

}



.search-submit {

    float: right;

    padding-right: 0.5em;

}



.search-submit .fa {

    color: #4d4d4d;

    font-size: 1.2rem;

    line-height: 1.9rem;

}



.search-txt {

    display: flex;

    font-size: 10px;

}



.search-txt a {

    color: #898989;

    font-size: 0.9rem;

}



.search-txt li {

    padding-right: 0.5rem;

}



@media (max-width: 1199px) {

     :root {

        --logo-width: 40rem;

    }

    .header-main {

        padding-bottom: 5rem;

    }

    .header-left {

        top: calc(var(--logo-width) / 8);

        right: 55%;

    }

    .header-right {

        top: calc(var(--logo-width) / 8);

        left: 52%;

    }

}



@media (max-width: 767px) {

     :root {

        --logo-width: 70vw;

    }

    .header-main {

        padding-bottom: 8rem;

    }

    .header-left {

        top: calc(var(--logo-width) / 7);

        right: 0;

        width: 100%;

        justify-content: center;

    }

    .header-right {

        top: calc(var(--logo-width) / 7 + 2.5rem);

        left: 0;

        width: 100%;

        padding: 0 3em;

    }

    #FormSearch {

        background-color: #d3d3d3;

        width: 100%;

        margin-bottom: 0.5rem;

    }

    .search-input {

        width: calc(100% - 3rem);

        line-height: 2rem;

    }

    .search-submit {

        font-size: 1.3rem;

    }

    .country>a {

        padding-left: 5rem;

    }

}





/*-------- navbar -------*/



.navbar-myvapor {

    width: 100%;

    background-color: #fea30b;

    border-radius: 0;

    margin: 0;

}



.nav>li>a:focus,

.nav>li>a:hover {

    text-decoration: none;

    background-color: transparent;

}



.navbar-nav>li>a {

    font-family: "Muli";

    text-transform: uppercase;

    color: #000;

    font-size: calc(var(--initial-font-size) * 1);

    font-weight: 600;

}



.navbar-myvapor .navbar-nav {

    float: none;

    margin: 0 auto;

    display: inline-block;

    position: relative;

    z-index: 2;

}



.navbar-myvapor .collapse {

    text-align: center;

    line-height: 1;

}



.navbar-toggle {

    z-index: 1;

}



.navbar-nav>li>a {

    padding: calc(var(--initial-font-size) * 1.15) calc(var(--initial-font-size) * 1.6);

    transition: color .25s

}



.navbar-nav>li:hover>a {

    color: #fff;

}



.navbar-myvapor .navbar-collapse {

    text-align: center;

}



.navbar-nav>li ul.dropdown-menu {

    display: none;

}



.navbar-nav>li:hover ul.dropdown-menu {

    display:block;

}



ul.dropdown-menu {

    padding: 1rem 1rem 1.5rem;

    background-color: #f9f5e7;

    border-radius: 0 0 1rem 1rem;

    border: none !important;

}



.dropdown-menu>li>a {

    padding: 0;

}



.nav_02 ul.dropdown-menu {

    width: calc(61rem + 2rem);

    transform: translateX(-5rem);

}



.nav_02 ul.dropdown-menu li {

    float: left;

    width: 10rem;

}



.nav_02 ul.dropdown-menu li img {

    mix-blend-mode: multiply;

    transform: translateY(50px);

    opacity: 0;

    transition: 0.5s all cubic-bezier(0.65, 0.05, 0.36, 1);

}



.navbar-nav>li:hover ul.dropdown-menu li img {

    transform: translateY(0);

    opacity: 1;

}



.nav_03 ul.dropdown-menu {

    width: 52rem;

    transform: translateX(-12.4rem);

    padding-left: 5rem;

    padding-right: 0;

}



.nav_03 ul.dropdown-menu li {

    float: left;

}



.nav_03 dl {

    padding-bottom: 0.8rem;

}



.nav_03 dt {

    font-size: 0.88rem;

    color: #ffa400;

    line-height: 1.8;

}



.nav_03 dd a {

    font-size: 12px;

    color: #606060;

    padding-right: 4rem;

    line-height: 1.6;

}



.nav_03 li:last-child dd a {

    padding-right: 0;

}



.navbar-nav ul.dropdown-menu li {

    mix-blend-mode: multiply;

    transform: translateY(50px);

    opacity: 0;

    transition: 0.5s all cubic-bezier(0.65, 0.05, 0.36, 1);

}



.navbar-nav>li:hover ul.dropdown-menu li {

    transform: translateY(0);

    opacity: 1;

}



.nav_04 ul.dropdown-menu {

    width: 50rem;

    transform: translateX(-21.8rem);

    padding-left: 3rem;

    padding-right: 0;

}



.nav_04 ul.dropdown-menu li p,

.nav_05 ul.dropdown-menu li p,

.nav_06 ul.dropdown-menu li p {

    font-size: 0.88rem;

    white-space: nowrap;

}



.nav_04 ul.dropdown-menu li,

.nav_05 ul.dropdown-menu li,

.nav_06 ul.dropdown-menu li {

    float: left;

    width: 11rem;

    text-align: center;

}



.nav_04 ul.dropdown-menu li img,

.nav_05 ul.dropdown-menu li img,

.nav_06 ul.dropdown-menu li img {

    width: 4.5rem;

    margin-bottom: 1rem;

}



.nav_05 ul.dropdown-menu {

    width: 38rem;

    transform: translateX(-15.8rem);

    padding-left: 8rem;

    padding-right: 0;

}



.nav_06 ul.dropdown-menu {

    width: 43rem;

    transform: translateX(-17rem);

    padding-left: 5rem;

    padding-right: 0;

}



.nav_07 ul.dropdown-menu {

    width: 43rem;

    transform: translateX(-17rem);

    padding-left: 4.5rem;

    padding-right: 3rem;

}



.nav_07 dl {

    display: inline-block;

    padding-bottom: 1rem;

}



.nav_07 dt {

    border-bottom: solid 1px #acaaa3;

    padding-bottom: 0.5rem;

}



.nav_07 dt img {

    width: 2rem;

    margin-right: 0.7rem;

}



.nav_07 dt span {

    font-size: 0.8rem;

    color: #ffa400;

}



.nav_07 dd {

    float: left;

    padding-top: 0.5rem;

}



.nav7_dd1 {

    width: 9rem;

}



.nav7_dd2 {

    width: 8rem;

}



.nav7_dd3 {

    width: 9.5rem;

}



.nav7_dd4 {

    width: 7rem;

}



.nav_07 dd a {

    color: #606060;

    font-size: 12px;

}



.nav_08 ul.dropdown-menu {

    width: 45rem;

    transform: translateX(-24rem);

    padding-left: 5rem;

    padding-right: 0;

}



.nav_08 ul.dropdown-menu li {

    float: left;

}



.nav_08 dl {

    padding-bottom: 0.8rem;

}



.nav_08 dt {

    font-size: 0.88rem;

    color: #ffa400;

    line-height: 1.8;

}



.nav_08 dd a {

    font-size: 12px;

    color: #606060;

    padding-right: 4rem;

    line-height: 1.6;

}



.nav_08 li:last-child dd a {

    padding-right: 0;

}



.nav_09 ul.dropdown-menu {

    width: 433px;

    transform: translateX(-200px);

    padding-left: 37px;

    padding-right: 26px;

    padding-top: 0;

    padding-bottom: 0;

}



.nav_07 .scrollbar, .nav_09 .scrollbar {

    overflow: auto;

    height: 466px;

    padding-right: 5px;

}



.nav_07 .scrollbar::-webkit-scrollbar, .nav_09 .scrollbar::-webkit-scrollbar {

    /*滚动条整体样式*/

    width: 10px;

    /*高宽分别对应横竖滚动条的尺寸*/

    height: 1px;

}



.nav_07 .scrollbar::-webkit-scrollbar-thumb, .nav_09 .scrollbar::-webkit-scrollbar-thumb {

    /*滚动条里面小方块*/

    background: #fea30b;

}



.nav_07 .scrollbar::-webkit-scrollbar-track, .nav_09 .scrollbar::-webkit-scrollbar-track {

    /*滚动条里面轨道*/

    background: #c5a97a;

}



.nav_09 li {

    border-bottom: solid 1px #e7e3d7;

    padding: 20px 0;

}



.nav_09 li:last-child {

    border-bottom: none;

    padding-bottom: 30px;

}



.nav_09 li img {

    width: 64px;

    border-radius: 50%;

    margin-right: 30px;

}



.nav_09 p {

    color: #727272;

    font-size: 12px;

    line-height: 1.5;

}



.nav_09 a {

    color: #ffa400;

    font-size: 16px;

    line-height: 1.6;

}



@media (max-width: 1199px) {

    .nav_02 ul.dropdown-menu {

        transform: translateX(-8%);

    }

    .nav_02 ul.dropdown-menu li {

        width: 8rem;

    }

    .nav_02 ul.dropdown-menu {

        width: calc(49rem + 2rem);

    }

}



@media (max-width: 991px) {

    .navbar-nav>li>a {

        padding: var(--initial-font-size) 10px;

    }

    .nav_02 ul.dropdown-menu {

        transform: translateX(-6%);

    }

}



@media (max-width: 767px) {

    .nav>li {

        position: relative;

        display: inline-block;

        width: 100%;

    }

}





/*-------- navbar -------*/



.navbar-toggle .icon-bar {

    background-color: #000;

}



.sticky-header {

    position: fixed!important;

    left: 0!important;

    top: 0!important;

    z-index: 20!important;

    margin: 0!important;

    margin: 0!important;

    width: 100%!important;

    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    pointer-events: all;

}



@media (max-width: 1599px) {

     :root {

        --white-width: 10vw;

    }

}



@media (max-width: 1199px) {

     :root {

        --white-width: 2vw;

        --initial-font-size: 1.2vw;

    }

}



@media (max-width: 992px) {

     :root {

        --initial-font-size: 13px;

    }

    .newsletter_1_1 {

        padding-right: 15px;

        padding-left: 15px;

    }

}



@media (max-width: 767px) {

     :root {

        --initial-font-size: 12px;

        --white-width: 2vw;

    }

    .account>img,

    .country>img {

        opacity: 0;

    }

}





/*------- newsletter -------*/



.newsletter {

    padding-top: 1.8em;

    position: relative;

}



.newsletter_1 {

    width: 100%;

    background-color: #efefef;

}



.newsletter_mvp {

    width: 10em;

    top: 0;

    right: 6.75vw;

}



.newsletter_1 {

    padding: 1.5vw var(--white-width);

}



.newsletter_1_1 h3 {

    color: #fea30b;

    font-size: calc(var(--initial-font-size) * 1.2);

}



.newsletter_1_2 p {

    font-size: calc(var(--initial-font-size) * 0.8);

    padding-top: 0.8em;

}



.newsletter_1_3 {

    padding-top: 0.7rem;

}



.newsletter_1_5 {

    display: table;

    width: 100%;

    border: 1px solid #000;

    max-width: 600px;

}



.newsletter_1_4 a {

    color: #000;

    padding: 1em 0;

    font-size: 3em;

}



.newsletter_1_4 a:first-child {

    padding-right: 0.5em;

    padding-left: 0.5rem;

}



.newsletter_1_5 .newsletter-email {

    display: table-cell;

    width: 15%;

    text-align: center;

    vertical-align: middle;

}



.newsletter_1_5 .fa-envelope-o {

    font-size: 1.5rem;

}



.newsletter-txt {

    display: table-cell;

    height: 2.6rem;

    background-color: transparent;

    width: 85%;

}



.newsletter-submit {

    display: table-cell;

    background: url(/images/home/MYVAPOR-home_08_1.png) no-repeat center;

    /* width: 2.9rem; */

    width: 15%;

    height: 2.6rem;

    background-size: 60%;

    background-color: #fea30b;

}



@media (max-width: 991px) {

    .newsletter_1_5 {

        max-width: 30rem;

    }

}





/*------- newsletter -------*/





/*------- footer-main ------*/



.footer-main {

    width: 100%;

    padding: 2em var(--white-width);

    background-color: #fea30b;

}



.footnav {

    width: 100%;

    padding-bottom: 1em;

    border-bottom: 1px solid #000;

    display: inline-block;

}



.footnav dl {

    float: left;

    padding-right: 4.8em;

    padding-bottom: 2em;

}



.footnav dl:last-child {

    padding-right: 0;

}



.footnav dt {

    font-weight: 600;

    font-size: calc(var(--initial-font-size) * 1.2);

    line-height: 1.6;

}



.footnav dd a,

.footnav dd a:hover,

.footnav dd a:visited,

.footnav dd a:focus {

    color: #000;

    font-size: calc(var(--initial-font-size) * 0.8);

}



.footemail {

    width: 100%;

    text-align: center;

    font-size: calc(var(--initial-font-size) * 0.8);

    font-weight: bold;

}



.footemail a {

    color: #000;

}



.footemail .fa {

    font-weight: bold;

}



.foottxt {

    padding: 1rem 0 0;

    font-size: calc(var(--initial-font-size) * 0.8);

    line-height: 1.8;

}



.foottxt p a {

    color: #000;

}



.accept-cookies {

    position: fixed;

    width: 100%;

    bottom: 0;

    background-color: #efefef;

    font-size: calc(var(--initial-font-size) * 0.8);

    line-height: 1.5;

    padding: 1em 4em;

    z-index: 11;

}



.cookieslink1,

.cookieslink2 {

    color: #fea30b;

    font-size: var(--initial-font-size);

}



.cookieslink1 {

    border-bottom: solid 2px #fea30b;

}



.cookieslink2 {

    background-color: #000;

    padding: 0 0.2em 0.1em;

    margin-left: 2em;

}



.cookiescol2 {

    padding-top: 0.8em;

}



.MYVAPOR-warn-bg {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 12;

    display: none;

}



.MYVAPOR-warn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.warn-logo {

    width: 11.3rem;

}



.MYVAPOR-warn-1 {

    width: 30rem;

    margin-top: -6rem;

    background-color: #fff;

    border-radius: 2rem;

    padding: 6.5rem 0 2rem;

}



.MYVAPOR-warn h2 {

    color: #000;

    line-height: 2;

    padding-bottom: 1.2em;

    font-size: 1.2rem;

}



.MYVAPOR-warn-btns {

    justify-content: center;

    padding-bottom: 2rem;

    border-bottom: 1px solid #000;

}



.MYVAPOR-warn-btns>div {

    padding: 0 0.5em;

}



.MYVAPOR-warn-btns a {

    width: 6rem;

    line-height: 2;

    color: #000;

    display: inline-block;

}



.MYVAPOR-warn-btns1 a {

    background-color: #fea30b;

}



.MYVAPOR-warn-btns2 a {

    background-color: #d3d3d3;

}



.MYVAPOR-warn-btns span {

    display: block;

    padding-top: 0.8em;

    font-size: 0.7rem;

    color: #8c8c8c;

}



.MYVAPOR-warn-txt {

    padding: 1rem 0.5rem 0 1rem;

    font-size: 0.7rem;

    color: #000;

}



@media (max-width: 991px) {

    dl {

        width: 33%;

    }

}



@media (max-width: 767px) {

    dl {

        padding-right: 1em;

        padding-left: 1em;

        width: 50%;

    }

}



/*login*/

.my-login-p1{

	width: 100%; margin: 5vw 0; text-align: center;

}

.my-login-p1 img{

	width: 90%; max-width: 1000px;

}

.my-login-p2{

	width: 90%; margin: 0 auto 4vw; text-align: center; color: #ffa400; font-size: 1.6vw;

}

.my-login-p3{

	width: 90%; max-width: 500px; margin: 0 auto 4vw; font-size: 18px; color: #5b5b5b; display: flex; justify-content: space-between;

}

.choose-left{

	display: block; width: 120px; line-height: 40px;

}

.choose-country{

	width: calc(100% - 120px); position: relative;

}

.choose-ss{

	width: 100%; overflow: hidden;

}

.choose-text{

	width: 80%; height: 38px; border: 1px solid #ffa400; padding: 0 10px; float: left;

}

.choose-submit{

	width: 20%; height: 38px; color: #000; border: 1px solid #ffa400; background-color: #ffa400; float: left; font-size: 20px;

}

.choose-dropdown{

	width: 100%; height: 320px; background-color: #f9f5e7; position:absolute; top: 38px; display: none; padding: 10px; z-index: 99;

}

.choose-dropdown .scrollbar{

	overflow: auto; height: 300px; padding-right: 5px; padding-left: 15px;

}

.choose-dropdown .scrollbar::-webkit-scrollbar {

	/*滚动条整体样式*/

	width: 10px;

	/*高宽分别对应横竖滚动条的尺寸*/

	height: 1px;

}



.choose-dropdown .scrollbar::-webkit-scrollbar-thumb {

	/*滚动条里面小方块*/

	background: #fea30b;

}



.choose-dropdown .scrollbar::-webkit-scrollbar-track {

	/*滚动条里面轨道*/

	background: #c5a97a;

}

.choose-dropdown .scrollbar a{

	display: block;

	color: #000;

	line-height: 30px;

}

.my-store-list{

	width: 90%; max-width: 900px; margin: 0 auto 15px; color: #ffa400; background-color: #ececec; padding: 4vw; display: flex; justify-content: space-between; align-items: center; position: relative;

}

.my-store-list img{

	width: 30px; position: absolute; top: 15px; left: 10px;

}

.store-left{display: block; width: 30%; font-size: 22px;}

.store-center{display: block; width: 45%; font-size: 14px; color: #727272;}

.store-right{width: 25%; height: 50px; font-size: 22px; color: #000; text-align: center; line-height: 50px; background-color: #ffa400;}

@media (max-width: 768px) {

	.my-login-p2{

		font-size: 18px;

	}

	.my-login-p3{

		font-size: 16px;

	}

	.choose-left{

		width: 80px;

	}

	.choose-country{

		width: calc(100% - 80px);

	}

	.my-store-list{

		display: block;

	}

	.my-store-list img{

		width: 30px; position: absolute; top: 15px; left: auto; right: 10px;

	}

	.store-left{width: 100%; font-size: 18px; margin-bottom: 10px;}

	.store-center{width: 100%; font-size: 14px; margin-bottom: 10px;}

	.store-right{width: 35%; height: 30px; font-size: 16px;line-height: 30px;}

}