@charset "UTF-8";
/*768-1000*/
/*
@media screen and (min-width: 768px) and (max-width: 1000px) {
  .text1 {
    color: blue;
  }
}
*/
/*1000-1440*/
@media screen and (min-width: 200px) and (max-width: 1500px) {
  .text1 {
    font-size: 39px !important;
  }
  .text2 {
    left: 10.5%;
  }
  .text2 .title {
    font-size: 34px;
  }
  .text2 .tips {
    font-size: 14px;
  }
  .text2 .iconList .icon-single img {
    width: 34px;
  }
  .text2 .iconList .icon-single p {
    font-size: 14px;
  }
  .text3 .title {
    font-size: 34px;
  }
  .text3 .tips {
    font-size: 16px;
  }
  .text4Fixed {
    padding: 0;
    top: 57%;
    width: 30%;
  }
  .text4Fixed .ppryTitle {
    font-size: 14px;
  }
  .text4Fixed .ppryTitle :nth-child(2) {
    font-size: 20px !important;
  }
  .text4Fixed .ppryList .ppryList-single {
    font-size: 13px;
  }
  .menu-fixed {
    width: 380px !important;
  }
  .menu-fixed .content .menu .menuList .menuList-single .itemList .item {
    font-size: 14px !important;
  }
  .menu-fixed .content .menu .menuList .menuList-single .title :nth-child(1) {
    padding-right: 4px !important;
    padding-left: 0 !important;
    font-size: 14px !important;
  }
  .menu-fixed .content .menu .menuList .menuList-single .title :nth-child(2) {
    padding-right: 4px !important;
    padding-left: 10px !important;
    font-size: 14px !important;
  }
  .menu-fixed .content .menu .menuList .menuList-single .title .BrandDiscovery, .menu-fixed .content .menu .menuList .menuList-single .title .SkincareSolutions {
    padding-left: 5px !important;
    padding-right: 19px !important;
  }
  .menu-fixed .content .menu .menuList .menuList-single .title .SkincareSolutions {
    padding-right: 10px !important;
  }
  .menu-fixed .content .menu .menuList .menuList-single .title .fixedT {
    padding-right: 54px !important;
  }
  .menu-fixed .content .menu-colorBar {
    width: 363px !important;
  }
  .logo {
    position: absolute;
    z-index: 200;
    top: 40px;
    width: 140px;
    left: 85px;
  }
  .container .header .navBar {
    width: 30px;
  }
  .container .more {
    width: 280px !important;
  }
  .container .more .text .title {
    font-size: 14px !important;
  }
  .container .more .text .itemList .item {
    font-size: 14px !important;
  }
  .container .more .text .itemList .item img {
    width: 24px !important;
  }
  .container .more .text .itemList .item .jumpToWx {
    /*  width: 150px !important;
                height: 150px !important;*/
  }
  .container .more .text-colorBar {
    margin-top: 34px !important;
  }
  .container .process-1-word {
    left: 56px !important;
    font-size: 25px !important;
  }
  .container .process-2-word {
    left: 56px !important;
    width: 220px !important;
  }
  .container .skin-word {
    top: 64%;
    left: 50px !important;
    width: 52% !important;
  }
  .container .skin-word .title {
    font-size: 34px !important;
  }
  .container .skin-word .desc {
    font-size: 15px !important;
  }
  .container .plant-1-word {
    width: 34% !important;
    left: 50px !important;
    top: 64%;
  }
  .container .plant-1-word .title {
    font-size: 34px !important;
  }
  .container .plant-1-word .desc {
    font-size: 15px !important;
  }
  .container .skin-2-word {
    left: 293px !important;
    width: 34% !important;
  }
  .container .skin-2-word .title {
    font-size: 34px !important;
  }
  .container .skin-2-word .desc {
    font-size: 15px !important;
  }
  .container .skin-3-word, .container .skin-4-word {
    left: 293px !important;
    width: 34% !important;
  }
  .container .skin-3-word .desc, .container .skin-4-word .desc {
    font-size: 15px !important;
  }
  .container .yj-1-word {
    width: 34% !important;
    left: 50px !important;
    top: 64% !important;
  }
  .container .yj-1-word .title {
    font-size: 34px !important;
  }
  .container .yj-1-word .desc {
    font-size: 15px !important;
  }
  .container .solve-1-word {
    width: 34% !important;
    left: 50px !important;
  }
  .container .solve-1-word .title {
    font-size: 34px !important;
  }
  .container .solve-1-word .desc {
    font-size: 15px !important;
  }
  .container .expert-1-word {
    width: 50% !important;
    left: 50px !important;
    top: 64%;
  }
  .container .expert-1-word .title {
    font-size: 34px !important;
  }
  .container .expert-1-word .desc {
    font-size: 15px !important;
  }
  .container .examine-1-word {
    width: 34% !important;
    left: 50px !important;
  }
  .container .examine-1-word .title {
    font-size: 34px !important;
  }
  .container .examine-1-word .desc {
    font-size: 15px !important;
  }
  .container .examine-1-word-tips {
    left: 50px !important;
  }
  .container .expert-3-word {
    left: 293px !important;
  }
  .container .expert-3-word .title {
    font-size: 34px !important;
  }
  .container .expert-3-word .desc {
    font-size: 15px !important;
  }
  .container .expert-3-word .xhs-icon {
    width: 60px !important;
  }
  .container .newsPos {
    padding: 21vh 20vw 5vh 17vw;
  }
  .container .level3-nav {
    left: 65px !important;
  }
  .container .arrowImg {
    left: 50px !important;
  }
  .container .level3-nav-single {
    font-size: 14px !important;
  }
  .container .icon-menu .icon-menuLine {
    width: 18px !important;
  }
  .container .plantPos {
    padding-left: 210px !important;
  }
  .container .plantPos .box {
    height: 61% !important;
  }
  .container .plantPos .box .p1 {
    font-size: 25px !important;
  }
  .container .zgPos {
    padding-left: 210px !important;
  }
  .container .plantNewsPos {
    padding-left: 203px !important;
  }
  .container .brand-newsList {
    align-items: flex-start;
  }
  .container .brand-newsList .newsList-single .bg {
    width: 320px !important;
  }
  .container .brand-newsList .newsList-single .newsText {
    font-size: 13px !important;
  }
  .container .brandNews {
    padding: 18vh 19vw 5vh 17% !important;
  }
  .container .p2 {
    font-size: 12px !important;
  }
  .container .skinTypeList .skinTypeList-box .skinTypeList-title .skinTypeList-title-left {
    font-size: 13px !important;
  }
  .container .skinTypeList .skinTypeList-box .skinTypeList-title .skinTypeList-title-right {
    width: 16px !important;
  }
  .container .skinTypeList .skinTypeList-box .skinTypeList-slogan .skinTypeList-slogan-left {
    font-size: 20px !important;
  }
  .container .skinTypeList .skinTypeList-box .skinTypeList-slogan .circle-arrow {
    width: 11px !important;
  }
  .container .skinTypeList2 {
    margin-top: -16% !important;
  }
  .container .level-3-cover {
    width: 230px !important;
  }
  .itemListFixed {
    width: 121px !important;
  }
  .itemListFixed2 {
    width: 124px !important;
  }
  .wordFixed1 {
    font-size: 14px !important;
  }
  .understand-box {
    width: 100px !important;
    line-height: 32px !important;
    font-size: 14px !important;
  }
  .understand-box1, .understand-box3, .understand-box4 {
    bottom: 66px !important;
  }
  .skinExamplePos .box .p2 {
    font-size: 16px !important;
    bottom: 6% !important;
  }
  .materialsContent {
    width: 29vw !important;
  }
  .materialsContent .list .list-single .materialsName {
    font-size: 18px !important;
    line-height: 50px !important;
  }
  .materialsContent .list .list-single .desc {
    font-size: 12px !important;
    padding: 12px 0 !important;
  }
  .materialsPos {
    padding-left: 4% !important;
  }
  .materialsPos .materials-zd {
    padding-top: 6.5% !important;
  }
  .fyPos {
    padding-left: 203px !important;
  }
  .fyPos .fyPosNext .fyPosDesc .descTitle {
    font-size: 36px !important;
  }
  .fyPos .fyPosNext .fyPosDesc .descContent {
    font-size: 14px !important;
  }
  .sub-materials-swiper, .sub2-materials-swiper, .sub3-materials-swiper, .sub4-materials-swiper, .sub5-materials-swiper {
    padding-top: 6.5% !important;
    width: 38vw !important;
  }
  .jumpToWx {
    left: -18px !important;
  }
  .fy-word {
    font-size: 16px !important;
  }
  .yj-swiper .skinTypeList2 {
    margin-top: -5% !important;
  }
  .schemePos {
    padding-right: 3% !important;
  }
  .schemePos .tableList .rl .tableList2 .tableList-single .single-body .single-body-left1 {
    font-size: 12px !important;
    width: 100px !important;
  }
  .schemePos .tableList .rl .tableList2 .tableList-single .single-body .single-body-right .productList .productList-single img {
    width: 17px !important;
  }
}

@media screen and (min-width: 200px) and (max-width: 986px) {
  .container .plant-1-word {
    width: 43% !important;
  }
}

@media screen and (min-width: 1501px) and (max-width: 1910px) {
  .logo {
    position: absolute;
    z-index: 200;
    top: 51px;
    width: 180px;
    left: 120px;
  }
  .itemListFixed {
    width: 127px !important;
  }
  .itemListFixed2 {
    width: 128px !important;
  }
}

@media screen and (min-width: 1911px) and (max-width: 30000px) {
  .logo {
    position: absolute;
    z-index: 200;
    top: 51px;
    width: 180px;
    left: 120px;
  }
  .logoList {
    width: 75% !important;
  }
  .aboutThree1 {
    width: 22% !important;
    margin: 0 3% !important;
  }
  .aboutThree2, .aboutThree3 {
    width: 22% !important;
    margin: 0 4.5% !important;
  }
  .text1 {
    font-size: 57px !important;
  }
  .text2 .title {
    font-size: 46px !important;
  }
  .text2 .tips {
    font-size: 18px !important;
  }
  .text2 .iconList .icon-single img {
    width: 48px !important;
  }
  .text2 .iconList .icon-single p {
    font-size: 18px !important;
  }
  .menu-fixed .content .menu .menuList .menuList-single .itemList .item {
    font-size: 17px !important;
  }
  .menu-fixed .content .menu .menuList .menuList-single .title :nth-child(2) {
    font-size: 17px !important;
  }
  .menu-fixed .content .menu .menuList .menuList-single .title .BrandDiscovery, .menu-fixed .content .menu .menuList .menuList-single .title .SkincareSolutions {
    font-size: 17px !important;
  }
  .menu-fixed .content .search .CnEn {
    font-size: 17px !important;
  }
  .menu-fixed .content .search .search-input input {
    font-size: 17px !important;
  }
  .level3-nav {
    top: 428px !important;
  }
  .text4Fixed .ppryTitle {
    font-size: 18px !important;
  }
  .text4Fixed .ppryTitle :nth-child(2) {
    font-size: 24px !important;
  }
  .text4Fixed .ppryList {
    font-size: 16px !important;
    margin-left: 22px !important;
  }
  .more .leftBar .wb {
    top: 292px !important;
  }
  .more .text .title {
    font-size: 17px !important;
    margin-top: 58px !important;
  }
  .more .text .itemList .item {
    font-size: 17px !important;
  }
  .brand-newsList {
    align-items: flex-start;
  }
  .brand-newsList .newsList-single .bg {
    width: 440px !important;
  }
  .newsPos {
    padding: 18vh 19vw 5vh 6.5% !important;
  }
  .level-3-cover-responsibility {
    width: 13% !important;
  }
  .brandNews {
    padding: 16vh 19vw 5vh 15.5% !important;
  }
  .plantPos .box {
    height: 65% !important;
  }
  .text3 .title {
    font-size: 40px;
  }
  .text3 .tips {
    font-size: 16px;
  }
  .skin-word .title, .skin-2-word .title, .skin-3-word .title, .plant-1-word .title, .yj-1-word .title, .solve-1-word .title, .expert-1-word .title, .examine-1-word .title {
    font-size: 40px !important;
  }
  .skin-word .desc, .skin-2-word .desc, .skin-3-word .desc, .plant-1-word .desc, .yj-1-word .desc, .solve-1-word .desc, .expert-1-word .desc, .examine-1-word .desc {
    font-size: 18px !important;
  }
  .zgPos {
    padding-left: 330px !important;
  }
}

@media screen and (min-width: 200px) and (max-width: 1500px) and (min-height: 700px) {
  .search {
    margin-top: 13.5vh !important;
  }
}

@media screen and (min-width: 200px) and (max-width: 1500px) and (max-height: 700px) {
  .search {
    margin-top: 5vh !important;
  }
}

/*高度小于700*/
@media screen and (min-width: 1911px) and (max-width: 30000px) and (max-height: 700px) {
  .search {
    margin-top: 7vh !important;
  }
}

/*高度大于700*/
@media screen and (min-width: 1911px) and (max-width: 30000px) and (min-height: 700px) {
  .search {
    margin-top: 15vh !important;
  }
}

/* 适配各种屏幕尺寸 */
/*
@media (min-width: 1024px){
  body,html{font-size: 18px !important;}
}
@media (min-width: 1100px) {
  body,html{font-size: 20px !important;}
}
@media (min-width: 1280px) {
  body,html{font-size: 22px !important;}
}
@media (min-width: 1366px) {
  body,html{font-size: 24px !important;}
}
@media (min-width: 1440px) {
  body,html{font-size: 25px !important;}
}
@media (min-width: 1680px) {
  body,html{font-size: 28px !important;}
}
@media (min-width: 1920px) {
  body,html{font-size: 33px !important;}
}*/