@font-face {
  font-family: engCustF;
  unicode-range: U+00-024F;
  src: '/static/css/font.poppins.css';
}

html *
{
   font-family: 'engCustF','Poppins','Noto Sans'  !important;
}

*:focus {
    outline: none;
}

/* global style */
body { font-size:14px; letter-spacing:2px; }
div { box-sizing:border-box; }
.clearfix:before { display:table; content: " "; }
.clearfix:after { display:table; content: " "; clear: both; }
.button-error { border-radius:2px; background:rgb(202, 60, 60); color:#fefefe; text-shadow:0 1px 1px rgba(0, 0, 0, 0.2); }
.button-secondary  { border-radius:2px; background: rgb(66, 184, 221); color:#fefefe; text-shadow:0 1px 1px rgba(0, 0, 0, 0.2); }
.button-warning  { border-radius:2px; background: rgb(223, 117, 20); color:#fefefe; text-shadow:0 1px 1px rgba(0, 0, 0, 0.2); }
.brick { position:relative; display:inline-block; margin-right:20px; margin-bottom:20px; border:1px solid #616161; border-radius:2px; box-shadow:0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2); vertical-align:top; font-size:28px; background-color:#FFFFFF; text-decoration:none; color:#333333; text-align:center; cursor:pointer; }
    .brick .flexBox { display:flex; align-items:center; justify-content:center; width:200px; height:200px; }
    .brick .owner { position:absolute; bottom:10px; font-size:12px; }
    .brick .toolBox { position:absolute; top:2px; right:6px; }
        .brick .toolBox .edit { margin-right:4px; font-size:12px; }
        .brick .toolBox .delete { font-size:12px; }    


/*hot fix TODO*/
.weclat .price,.weclat .desc{line-height: 1.8;}
.weclat .spokesperson .feature { margin-bottom:20px; font-size:16px; font-weight:bold; letter-spacing: 4px;}
.weclat .spokesperson span { margin-right:20px; vertical-align:middle; letter-spacing: 4px;} 
.weclat button,.weclat .pointer{ cursor: pointer; }



/* body content */
.weclat .frame { position:relative; outline:1px solid #495865; margin:0 auto; width:1080px; }
    .weclat .frame .title { padding:10px 20px; font-size:18px; font-weight:bold; color:#fefefe; background-color:#495865; }
    .weclat .frame .capacity { padding:20px; background-color:#f8f8f8; }


.weclat .pure-form {}
    .weclat .pure-form .block { margin-bottom:20px; }
    .weclat .pure-form input[type=text], input[type=password], input[type=number], select, textarea { width:100%; }
    .weclat .pure-form .block .image { position:relative; }
        .weclat .pure-form .block .image .delete { z-index:5; position:absolute; top:32px; left:155px; }
        .weclat .pure-form .block .image img { margin-right:10px; width:256px; vertical-align:bottom; }
    .weclat .pure-form .block button { margin-right:15px; }
    .weclat .pure-form .block .topic { margin-bottom:5px; font-size:18px; font-weight:bold; }
    .weclat .pure-form .block .ck-editor__editable_inline { min-height:560px; }


.weclat .about { position:relative; margin-top:145px; min-height: 90vh;}
    .weclat .about .cover { position:relative; width:100%; max-height:720px; min-height:85vh; background-image:url('../images/about/cover.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center; }
    .weclat .about .cover .spokesperson { position:absolute; bottom:66px; right:78px; font-size:12px; color:#cecece; }        
        .weclat .about .cover .spokesperson img { width:128px; vertical-align:middle; }
    .weclat .about .contentBox { position:relative; margin:60px auto; width:333px; line-height:2; margin-top: 15vh;}
        .weclat .about .contentBox .logo { position:absolute; top:0; left:-12vw; width:128px;z-index: 10; }
        .weclat .about .contentBox .description { position: relative; z-index: 12; }
        .weclat .about .contentBox .topic { margin-bottom:70px; font-size:28px; font-weight:bold; }
        .weclat .about .contentBox .divider { margin-bottom:44px; }


.weclat .shine { position:relative; margin-top:145px; }
    .weclat .shine.mobile{ display: none;}
    .weclat .shine .cover { width:100%; max-height:1700px; min-height:1400px; /* background-image:url('../images/shine/cover.jpg');  */ background-repeat:no-repeat; background-size:cover; background-position:left -50px;background-color: black; }
    .weclat .shine .cover .contentBox { float:right; margin-top:12vh; margin-right:40vw; line-height:2; color:#fff; }    
        .weclat .shine .cover .contentBox .spokesperson { margin-top:15vh; font-size:12px; color:#cecece; }
            .weclat .shine .spokesperson.mobile {display: none;}            
            .weclat .shine .cover .contentBox .spokesperson img { width:128px; vertical-align:middle; }
        .weclat .shine .cover .contentBox .description {font-size: 18px; height: calc(80vh - 10vw); max-height: 800px; min-height: 400px; overflow-y: scroll; -ms-overflow-style: none;}
            .weclat .shine .cover .contentBox .description::-webkit-scrollbar {display: none;}
            .weclat .shine .cover .contentBox .description .divider { margin-bottom:44px; }
            .weclat .shine .cover .contentBox .description .verticalLine { margin:20px 0 20px 2px; width:1px; height:168px; background-color:#fff; }
            .weclat .shine .cover .contentBox .description .topic { font-weight:bold; font-size:22px;font-weight: bold; margin-bottom: 15vh;cursor: pointer;}
            .weclat .shine .cover .contentBox .description .topic:hover{color:#c5ab80;}


.weclat .news { position:relative; margin-top:145px; min-height: 100vh}
    .weclat .news .cover { position:relative; width:100%; height:72vh; background-image:url('../images/news/cover.jpg'); background-repeat:no-repeat; background-size:cover; background-position:top center; }
    .weclat .news .words { position: absolute;top: 40%;left: 25%;display: inline-block;text-align: center;}
    .weclat .news .title {  font-size: 22px; color: #c5ab80;}
    .weclat .news .subtitle {  font-size: 18px; margin-top: 15px;color: white;}
    .weclat .news .video { position:relative; width:100%; min-height:100%; margin-top: 10vh;margin-bottom: 10vh; text-align: center;}
    .weclat .news .video video {  max-width: 75vw;max-height: 20vh;
        opacity: 0;
        position: absolute;
        top:0;
        left: 15%;
    }
    .weclat .news .videoHide {
        text-align: center;         
        width: 100%;
        margin: 0 auto;
        overflow: hidden;}

    .weclat .news .videoCover {       
        text-align: center;         
        width: 66%;
        padding: 5%;
        max-width: 90vw;
        overflow: hidden;}

    .weclat .news .buttonBox { margin:60px 0 60px 0;}
    .weclat .news .buttonBox .button { display:inline-block; border:1px solid white; padding:6px; width:120px; text-align:center; vertical-align:middle; cursor:pointer; margin: 0 auto;color: white;}
                


.weclat .collections { position:relative; margin-top:145px; }   
    .weclat .collections .skinCare { position:relative; width:100%; min-height:78vh; background-image:url('../images/collections/skincare.jpg'); background-repeat:no-repeat; background-size:cover; background-position:bottom left; }
        .weclat .collections .skinCare .info { position:absolute; top:30vh; right:35vw; }
            .weclat .collections .skinCare .info .title { margin-bottom:30px; font-size:23px; font-weight:bold; letter-spacing:4px; }
            .weclat .collections .skinCare .info .description {}
    .weclat .collections .makeup { position:relative; margin-bottom:20px; width:100%; min-height:78vh; background-image:url('../images/collections/makeup.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center; }
        .weclat .collections .makeup .info { position:absolute; top:25vh; left:33vw; text-align:right; }
            .weclat .collections .makeup .info .title { margin-bottom:30px; font-size:20px; font-weight:bold; letter-spacing:4px; color:#fff; }
            .weclat .collections .makeup .info .description { color:#fff; }
    .weclat .collections .bodyBox { margin:0 auto; width:850px; overflow: hidden; transform: scale(1.2);transform-origin: center bottom; margin-top: 22vh;}
        .weclat .collections .bodyBox .hand { margin-left:60px; padding-top:60px; padding-bottom:60px; }
            .weclat .collections .bodyBox .hand .picture { display:inline-block; vertical-align:middle; }
                .weclat .collections .bodyBox .hand .picture img { width:300px; }
            .weclat .collections .bodyBox .hand .info { display:inline-block; margin-left:60px; vertical-align:middle; }
            .weclat .collections .bodyBox .hand .info .title { font-size:20px; font-weight:bold; }
            .weclat .collections .bodyBox .hand .info .description { margin:20px 0 30px 0; }
        .weclat .collections .bodyBox .bottle { margin:-60px 0 60px 400px; text-align:left; }
            .weclat .collections .bodyBox .bottle .picture { display:inline-block; vertical-align:middle; }
                .weclat .collections .bodyBox .bottle .picture img { width:300px; }


.weclat .collectionProducts { position:relative; margin:125px auto 0 auto; width:1080px; min-height: calc(100vh - 145px);}
    .weclat .collectionProducts .backToCollections { margin-bottom:40px; padding-top:40px; }
        .weclat .collectionProducts .backToCollections a { font-size:20px; color:#000; text-decoration:none; }
    .weclat .collectionProducts .itemsBox { margin-bottom:87px; }
        .weclat .collectionProducts .itemsBox .item { display:inline-block; padding:20px; line-height:2; vertical-align:top; text-align:center; }
            .weclat .collectionProducts .itemsBox .item img { width:256px; max-height:256px;}
            .weclat .collectionProducts .itemsBox .item .title { font-weight:bold; letter-spacing:3px; }
            .weclat .collectionProducts .itemsBox .item .price { margin-bottom:10px; }
            .weclat .collectionProducts .itemsBox .priceMsg { color:#c5ab80;font-size: 13px; font-weight: bold; line-height: 1.2;margin-bottom: 5px;}
            .weclat .collectionProducts .itemsBox .item .research { border:1px solid #000; padding:5px 22px; width:80px; text-align:center; font-size:12px; color:#000; text-decoration:none; }
            .weclat .collectionProducts .itemsBox .item .research:hover {
                cursor: pointer;
            }
            



/* footer */
.weclat .footer { padding:16px; width:100%; text-align:center; background-color:#000; position: relative;z-index: 10; vertical-align: middle;}
    .weclat .footer .copyright1 { display: inline-block; color:#FFFFFF88; vertical-align: middle;}
    .weclat .footer .copyright2 { display: inline-block; color:#FFFFFF;  vertical-align: middle;}
    .weclat .footer .terms {color:#FFFFFF; text-decoration: none; cursor: pointer; margin-left: 1vw; word-break: keep-all;}




@media screen and (max-width:1479px) {

    .weclat .collections .skinCare .info { right:24vw; }

    .weclat .shine .cover .contentBox { margin-right:40vw; font-size: 16px;}
    .weclat .shine .cover .contentBox .description{font-size: 16px;}
    .weclat .shine .cover {
        max-height: 1100px;
    }

    .weclat .collections .bodyBox { transform: scale(1);margin-top: 11vh;}
    
    .weclat .news .title {  font-size: 20px;}
    .weclat .news .subtitle {  font-size: 17px;}
}

@media screen and (max-width:1366px) {
    
    .weclat .collections .bodyBox { transform: scale(1);margin-top: 10vh;}
}


@media screen and (max-width:1279px) {
    .weclat .collectionProducts { width:800px; }

    .weclat .about .contentBox .logo { position:absolute; top:0; left:-15vw; width:128px;z-index: 10; }

    .weclat .shine .cover .contentBox .description{font-size: 15px;}
    .weclat .shine .cover {
        max-height: 950px;
    }

    .weclat .news .title {  font-size: 18px;}
    .weclat .news .subtitle {  font-size: 16px;}
}


@media screen and (max-width:1079px) {

    .weclat .shine .cover .contentBox .description{font-size: 14px;}

    .weclat .shine .cover {
        max-height: 900px;
        background-position: 30% 0;
    }

    .weclat .collectionProducts { width:760px; }

    .weclat .collections .bodyBox { transform: scale(1);margin-top: 0;margin: 0 auto;}
}

@media screen and (max-width:919px) {

    .weclat .collections .bodyBox { width:100%; }
    .weclat .collections .skinCare { background-position:bottom right; }

    .weclat .collectionProducts { width:660px; }

    .weclat .news .title {  font-size: 18px;}
    .weclat .news .subtitle {  font-size: 16px;}
}

@media screen and (max-width:779px) {
        
    .weclat .news .cover { background-image:url('../images/news/cover_small.jpg'); }

    .weclat .collections .bodyBox { margin:30px 0; text-align:center; }
        .weclat .collections .bodyBox .hand { margin:0; padding-top:30px }
            .weclat .collections .bodyBox .hand .info { display:block; margin-top:20px; margin-left:0;  }
        .weclat .collections .bodyBox .bottle { margin:0 0 30px 0; text-align:center; }

    .weclat .collectionProducts { width:420px; }
        .weclat .collectionProducts .itemsBox .item { width:100%; }
      
}

@media screen and (max-width:480px) {
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select:focus,
    textarea {
        font-size: 16px;
    }

    .weclat .news .words { position: relative;top: unset;left: unset;display: inline-block;text-align: center;margin-top: 25px;}
    .weclat .news .title {  font-size: 16px;}
    .weclat .news .subtitle {  font-size: 14px;color: black;}
    .weclat .news .buttonBox .button {  border:1px solid #000;color: black;}
}

@media screen and (max-width:479px) {

    .weclat .shine .cover { background-position:top right; /*background-image:url('../images/shine/cover_small.jpg');*/ }
    .weclat .shine .cover .contentBox { float:none; margin:40px auto; width:320px; }
    .weclat .shine.mobile{ display: block;}
    .weclat .shine.mobile.cover{position:fixed;width: 100vw;margin-top:0px; background-position:20% 0; /*background-image:url('../images/shine/cover_small.jpg');*/background-repeat:no-repeat; background-size:930px;overflow: hidden;background-color: black;}
    .weclat .shine {height: 150vh;/* min-height: 1800px; max-height: 2400px;*/}
        .weclat .shine .cover { background-color:transparent;background-image: unset;z-index: 15;position: relative;background-position:unset;background-attachment:unset;}
            .weclat .shine .cover .contentBox{margin: 0 auto;/* margin-top: 100vh;*/width: 100%;}
                .weclat .shine .cover .contentBox .description{ height: unset; min-height: unset; background-color: black;padding:7%;font-size:16px;color: white;overflow: hidden;max-height: unset; padding-bottom: 50px;}
                .weclat .shine .cover .contentBox .description .topic{ margin-bottom: 10vh;font-size: 20px;} 
                .weclat .shine .spokesperson {display: none;color: black;}
                .weclat .shine .spokesperson.mobile{ position: fixed; display: inline-block;right:36vw;bottom:6vh;z-index:5;}
                .weclat .shine .spokesperson img { width:110px; vertical-align:middle; }
                
    .weclat .about ,
    .weclat .shine ,
    .weclat .contact ,
    .weclat .news ,
    .weclat .agent ,
    .weclat .cart ,
    .weclat .collections { margin-top:90px; }

    .weclat .collections .skinCare {  background-image:url('../images/collections/skincare_small.jpg'); margin-bottom: 35vh;}
    .weclat .collections .skinCare {background-position:15% 0; }
    .weclat .collections .skinCare .info{    
        left: 50%;
        transform: translate3d(-50%,0, 0);
        text-align: center;
        width: 100%;
        top: 115%;
    }

    .weclat .collections .makeup { background-image:url('../images/collections/makeup_small.jpg'); margin-bottom: 35vh; }
    .weclat .collections .makeup {background-position:20% 0; }
    .weclat .collections .makeup .info{    
        left: 50%;
        transform: translate3d(-50%,0, 0);
        text-align: center;
        width: 100%;
        top: 115%;
        
    }
    .weclat .collections .makeup .info .title, .weclat .collections .makeup .info .description{    
        color: black;
    }


    .weclat .collectionProducts { width:100%; }
        .weclat .collectionProducts .backToCollections { padding-left:30px; }



    .weclat .footer{font-size: 12px;}
}