@charset "UTF-8";

/*DESKTOP
======================*/

@media screen and (min-width: 1170px) {}

@media screen and (min-width: 990px) {}

@media screen and (min-width: 990px) and (max-width: 1169px) {
    /* step2 */
    .step2_broken{
        position: relative;
        z-index:0;
        right:-20%;
        top:-245px;
        display: block;
        width:100%;
        height:100%;
        vertical-align: bottom;
    }
    /* step2 end */
    
    /* step3 */
    .step3_item span.cont1{
        left:0px;
    }
    .step3_item span.cont2{
        left:0px;
    }
    .step3_item span.cont3{
        left:0px;
    }
    .step3_box_padd{
        left:15%;
        position: relative;
    }
    /* step3 end */
}

@media screen and (min-width: 768px) and (max-width: 1169px) {
    .main_menu li:after {
        width: 30px;
    }
    .view_lock{
        overflow-x: hidden!important;
        overflow-y:scroll!important;
        width:100%;
        height:100%;
    }
    /* step1 end */
    .banner_item{
        margin-top:80px;
        width:28%;
        height:100%;
    }
    .banner_item span.cont1{
        top:20px;
        left:-40px;
        background-size: 100%;
    }
    .banner_item span.cont2{
        top:20px;
        left:-40px;
        background-size: 100%;
    }
    .banner_item span.cont3{
        top:20px;
        left:-40px;
        background-size: 100%;
    }
    .banner_cont{
        position: absolute;
        right:10%;
        width:280px;
        padding-top:23px;
        z-index: 50;
        margin-top:75px;
        display: block;
        background-image: url(../images/step1_font_clear.png);
        background-position: 80px 20px;
        background-repeat: no-repeat;
        background-size: 50%;
    }
    .banner_cont span.cont1{
        font-size:12px;
        color:#959595;
        letter-spacing: 0.5px;
    }
    .banner_cont span.cont2{
        margin:10px 0 5px 0;
        background-image: url(../images/close.png);
        background-position: left top;
        background-size: 18px;
        height:25px;
        background-repeat: no-repeat;
    }
    .banner_cont span.cont3{
        font-size:13px;
        color:#3989c6;
        letter-spacing: 1px;
        margin-bottom:2px;
    }
    .banner_cont span.cont4{
        font-size:24px;
        color:#3989c6;
        letter-spacing: 1px;
    }
    /* step1 end */
    
    /* step2 */
    .step2_broken span{
        position: absolute;
        right:0px;
        top:20px;
    }
    .step2{
        max-height:850px;
        height:850px;
    }
    /* step2 end */
    
    /* step3 */
    .step3_item span.cont1{
        left:0px;
    }
    .step3_item span.cont2{
        left:0px;
    }
    .step3_item span.cont3{
        left:0px;
    }
    .step3_item span.cont4{
        bottom:40px;
    }
    /* step3 end */
    
    /* step4 */
    .step4_story span.story1 abbr.cont1{
        width: 100%;
        margin:0 auto;
        text-align: center;
    }
    .step4_story span.story1 abbr.cont1 img{
        position: relative;
        top:-40px;
        left:20px;
        margin:0 auto;
    }
    .step4_story span{
        display: inline-block;
        float:left;
        width:25%;
        height:286px;
        padding:0;
        margin:0;
        background-position: center top;
        background-repeat: no-repeat;
    }
    .step4_story span.story1,
    .step4_story span.story2,
    .step4_story span.story3,
    .step4_story span.story4{
        background-size: 89%;
    }
    .step4_story span abbr.cont1{
        background-size: 80%;
    }
    .story_dots{
        background-size: 55%;
        height:3px;
        left:82%;
        top:-240px;
    }
    .step4_story span abbr.cont2{
        bottom:120px;
    }
    .step4{
        max-height:100%;
        height:100%;
        padding-bottom:50px;
    }
    .step4_story span abbr.cont3{
        bottom:210px;
        left:0px;
    }
    .step4_story span abbr.cont4{
        display:block;
        height:89px;
        position: absolute;
        z-index: 1;
        top:-340px;
        left:-260px;
    }
    /* step4 end */
    /* step6 */
    .buy_item span.cont7 {
        position: relative;
    }
    .buy_item span.cont7 abbr.img_01,
    .buy_item span.cont7 abbr.img_02,
    .buy_item span.cont7 abbr.img_03,
    .buy_item span.cont7 abbr.img_04,
    .buy_item span.cont7 abbr.img_05,
    .buy_item span.cont7 abbr.img_06{
        position: absolute;
        right:-70px;
        margin-top:-35px;
        width:85%;
    }
    /* step6 end */
    /* step7 */
    .step7{
        max-height:550px;
        height:1000px;
        position: relative;
        z-index: 97;
        background: #f7fafd;
        overflow: hidden;
    }
    .step7_person img{
        max-width:60%;
    }
    .step7_item span.cont1 img,
    .step7_item span.cont2 img,
    .step7_item span.cont3 img{
        max-width:60%;
    }
    .step7_item{
        position: absolute;
        right:-300px;
        bottom:0px;
        width:100%;
    }
    /* step7 end */
    /* other */
/*     .step2,.step3,.step4,.step5,.step6,.step7{
        overflow: hidden;
    } */
    .fix_overflow{
        overflow: hidden;
        width: 100%;
        height: 100%;
        display: block;
    }
    .cart_box{
        width: 100%;
        height:100%;
        overflow-y: scroll;
    }
    .cart_box_right{
        width:70%;
        height:900px;
        padding:120px 50px 50px 50px;
    }
    .cart_step_notice{
        top:50px;
    }
    .order_box_right{
        padding:50px 30px 50px 30px;
    }
    /* other end */
}


/*TABLET
======================*/
@media screen and (min-width: 1170px) and (max-width: 1800px) {
    .banner_cont{
        position: absolute;
        right:23%;
        width:325px;
        padding-top:23px;
        z-index: 50;
        margin-top:175px;
        -webkit-transform : scale(0.8);
        -o-transform : scale(0.8); 
        transform : scale(0.8); 
    }
    .banner_item{
        margin-top:190px;
        width:36%;
        height:100%;
        -webkit-transform : scale(0.75);
        -o-transform : scale(0.75); 
        transform : scale(0.75); 
    }
    .banner_item span.cont1{
        top:20px;
        background-size: 70%;
    }
    .banner_item span.cont2{
        top:20px;
        background-size: 70%;
    }
    .banner_item span.cont3{
        top:20px;
        background-size: 70%;
    }
    /* step7 */
    .step7{
        max-height:580px;
        height:1000px;
        position: relative;
        z-index: 97;
        background: #f7fafd;
    }
    .step7_person img{
        max-width:80%;
    }
    .step7_item span.cont1 img,
    .step7_item span.cont2 img,
    .step7_item span.cont3 img{
        max-width:80%;
    }
    /* step7 end */
}

@media screen and (min-width: 990px) and (max-width: 1279px) {
    .step2_cont p span.cont2{
        display: inline-block;
        width: 68%;
        vertical-align: middle;
        margin-left:-15px;
    }
}

@media screen and (max-width:1279px) and (orientation:landscape) {
    
}

@media screen and (min-width: 768px) and (max-width: 989px) {
    /* step1 */
    .step1{
        height:100%;
        margin-top:77px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        background-image: url(../images/step1_bg.png);
    }
    /* step1 end */
    
    /* step2 */
    .step2_title{
        left:0px;
        margin-top:100px;
    }
    .step2_cont{
        left:0px;
    }
    .step2_broken{
        position: relative;
        z-index:0;
        right:-50%;
        top:-260px;
        display: block;
        width:80%;
        height:100%;
        vertical-align: bottom;
    }
    .step2_cont p span.cont2{
        display: block;
        width: 80%;
        vertical-align: middle;
        margin-left:-15px;
    }
    .step2_item{
        position: relative;
        z-index:100;
        top:140px;
        margin-top:160px;
        display: block;
        width:110%;
        left:0px;
        height:400px;
    }
    /* step2 end */
    
    /* step3 */
    .step3_item{
        top:50px;
    }
    .step3_desc p{
        width:100%;
    }
    .step3_desc{
        position: relative;
        display: block;
        padding-bottom:20px;
        background-image: url(../images/step3_roll_bg.png);
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: 85%;
    }
    /* step3 end */
}

@media screen and (min-width: 600px) and (max-width: 767px) {
    .view_lock{
        overflow-x: hidden!important;
        overflow-y:scroll!important;
        width:100%;
        height:100%;
    }
    .alert_cart{
        right:35px;
    }
    /* step1 */
    .step1{
        max-height:auto;
        height:100%;;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        background-image: none;
    }
    .mobile_nav{
        padding-top:10px;
    }
    .mobile_nav a{
        margin-right:45px;
    }
    .mobile_nav a:nth-child(2){
        margin-right:0px;
    }
    .twentytwenty-container img {
        max-width: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        display: block;
    }
    .banner_cont_mobile{
        position: relative;
        right:0;
        width:100%;
        height:370px;
        z-index: 50;
        margin-top:45px;
        margin-bottom:40px;
        display: block;
        background-image: url(../images/step1_font_clear.png);
        background-position: right top;
        background-repeat: no-repeat;
        text-align: center;
    }
    .banner_cont_mobile span{
        display: block;
        position: relative;
    }
    .banner_cont_mobile span.cont1{
        font-size:13px;
        color:#959595;
        letter-spacing: 0.5px;
        z-index:10;
    }
    .banner_cont_mobile span.cont2{
        margin:10px 0 10px 0;
        background-image: url(../images/close.png);
        background-position: center top;
        height:25px;
        background-repeat: no-repeat;
    }
    .banner_cont_mobile span.cont3{
        font-size:18px;
        color:#3989c6;
        letter-spacing: 1px;
        margin-bottom:2px;
        z-index:1;
    }
    .banner_cont_mobile span.cont4{
        font-size:35px;
        color:#3989c6;
        letter-spacing: 1px;
        z-index:10;
    }
    .banner_cont_mobile span.item1 img,
    .banner_cont_mobile span.item2 img,
    .banner_cont_mobile span.item3 img{
        margin:0 auto;
    }
    .banner_cont_mobile span.item1{
        position: absolute;
        z-index: 1;
        left:0px;
        top:35px;
        display: block;
        width:100%;
        height:100%;
    }
    .banner_cont_mobile span.item2{
        position: absolute;
        z-index: 2;
        left:0px;
        top:35px;
        display: block;
        width:100%;
        height:100%;
    }
    .banner_cont_mobile span.item3{
        position: absolute;
        z-index: 3;
        left:0px;
        top:35px;
        display: block;
        width:100%;
        height:100%;
    }
    /* step1 end */
    
    /* step2 */
    .step2{
        max-height:100%;
        height:100%;
    }
    .step2_title{
        position: relative;
        left:0px;
        margin-top:0px;
        height:80px;
        display: block;
        background-image: url(../images/mobile/step2_title_bg.png);
        background-position: center top;
        background-repeat: no-repeat;
    }
    .step2_title span.cont1{
        color:#3989c6;
        font-size:25px;
        position: relative;
        display: block;
        width: 100%;
        top:25px;
        left:0;
        text-align: center;
        letter-spacing: 0.2px;
    }
    .step2_cont{
        position: relative;
        z-index:20;
        margin-top:48px;
        left:0px;
        display: block;
        width:100%;
        height:auto;
    }
    .step2_cont p{
        margin:0 auto 25px auto;
        text-align: center;
    }
    .step2_cont p:nth-child(1){
        padding-left:0;
    }
    .step2_cont p:nth-child(3){
        padding-left:0;
        margin:0 0 0 0;
    }
    .step2_cont p span.cont1{
        display: inline-block;
        width: auto;
    }
    .step2_cont p span.cont2{
        display: inline-block;
        width: 85%;
        margin-left:0px;
    }
    .step2_broken{
        position: absolute;
        right:-15%;
        top:28%;
        width:50%;
    }
    .step2_item{
        top:50px;
        margin-top:0px;
        width:85%;
        left:30%;
        height:500px;
    }
    .step2_item span.cont1{
        position: absolute;
        z-index: 1;
        left:0;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step2_item span.cont2{
        position: absolute;
        z-index: 2;
        left:0;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step2_item span.cont3{
        position: absolute;
        z-index: 3;
        left:0;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step2_broken span{
        position: absolute;
        right:0px;
        top:150px;
    }
    /* step2 end */
    
    /* step3 */
    .step3_title{
        width:100%;
        text-align: center;
        background-position: center top;
    }
    .step3_ingredient{
        position: relative;
        display: block;
        margin:30px 0 25px 0;
        text-align: center;
    }
    .step3_desc{
        position: relative;
        display: block;
        padding-bottom:20px;
        background-image: url(../images/step3_roll_bg.png);
        background-position: 200px bottom;
        background-repeat: no-repeat;
        background-size: 50%;
    }
    .step3_desc p{
        line-height: 18px;
        width:100%;
        padding:0 15%;
        margin:0;
    }
    .step3_desc p.desc_txt2{
        color:#c9c9c9;
        font-size:12px;
        margin:35px 0 10px 0;
        -webkit-transform : scale(1);
        -o-transform : scale(1);
        position: relative;
        left:0px;
    }
    .step3_desc p.desc_txt3{
        color:#0075a9;
        font-size:12px;
    }
    .step3_desc p.desc_txt3 span.desc_txt3_f1{
        -webkit-transform : scale(1);
        -o-transform : scale(1);
        position: relative;
        left:0px;
        top:-10px;
    }
    .step3_desc p.desc_txt3 span.desc_txt3_f2{
        position: relative;
        left:0px;
    }
    .step3{
        max-height:100%;
        height:100%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        z-index: 100;
        background-image: url(../images/step3_bg.png);
    }
    .step3_item{
        position: relative;
        z-index:100;
        top:0px;
        left:0px;
        margin-top:60px;
        display: block;
        width:100%;
        height:550px;
    }
    .step3_item span.cont1{
        position: absolute;
        z-index: 1;
        left:20px;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step3_item span.cont2{
        position: absolute;
        z-index: 2;
        left:20px;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step3_item span.cont3{
        position: absolute;
        z-index: 3;
        left:20px;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step3_item span.cont4{
        bottom:30px;
    }
    .step3_person_talk{
        position: absolute;
        top:15px;
        left:100px;
    }
    .step3_item span.cont4{
        bottom:70px;
    }
    .story_dots{
        background-image: url(../images/step4_dots_l.png);
        background-repeat: no-repeat;
        background-position: right center;
        height:65px;
        width:4px!important;
        left:50%;
        top:-110px;
        display: block;
        position: relative;
        z-index:20;
    }
    /* step3 end */
    
    /* step4 */
    .step4{
        max-height:100%;
        height:100%;
        z-index: 80;
    }
    .step4_title{
        margin-top:70px;
        height:80px;
        background-image: url(../images/mobile/step4_title_bg.png);
        background-position: center center;
    }
    .step4_title span.cont1{
        font-size:25px;
        top:20px;
        left:0px;
        letter-spacing: 0.2px;
    }
    .step4_story span{
        display: inline-block;
        float:left;
        width:100%;
        height:286px;
        padding:0;
        margin:0;
        background-position: center top;
        background-repeat: no-repeat;
    }
    .step4_story span.story1 abbr.cont1{
        width: 100%;
        margin:0 auto;
        text-align: center;
    }
    .step4_story span.story1 abbr.cont1 img{
        position: relative;
        top:-40px;
        left:20px;
        margin:0 auto;
    }
    .step4_story span abbr.cont3{
        bottom:185px;
        left:120px;
    }
    /* step4 end */
    /* step5 */
    .step3_item span.cont5{
        position: absolute;
        z-index: 3;
        left:45%;
        top:80px;
        color:#b2d2ec;
        font-size:15px;
        display: block;
        height:auto;
        text-align: center;
    }
    /* step5 end */
    /* step6 */
    .step6{
        max-height:100%;
        height:760px;
        padding-bottom:80px;
        padding:0 20px;
    }
    .step6_title{
        left:0px;
        margin-top:50px;
        margin-bottom:0px;
        background-image: url(../images/mobile/step6_title_bg.png);
        background-size: 180px 68px;
    }
    .step6_title span.cont1{
        font-size:30px;
        line-height:30px;
        top:18px;
        left:0px;
    }
    .buy_item span.cont2{
        width:100%;
    }
    .buy_item span.cont4{
        width:100%;
        margin-bottom:20px;
    }
    .buy_item span.cont4 input{
        width:35%;
    }
    .buy_item span.cont7 abbr.img_01,
    .buy_item span.cont7 abbr.img_02,
    .buy_item span.cont7 abbr.img_03,
    .buy_item span.cont7 abbr.img_04,
    .buy_item span.cont7 abbr.img_05,
    .buy_item span.cont7 abbr.img_06{
        position: absolute;
        right:-180px;
        margin-top:-18px;
    }
    .buy_item span.cont6 a{
        width:100%;
    }
    /* step6 */
    /* step7 */
    .step7{
        max-height:560px;
        height:560px;
        overflow: hidden;
    }
    .step7_logo{
        position: absolute;
        display:inline-block;
        width:100%;
        top:55px;
        text-align: center;
    }
    .step7_item{
        position: absolute;
        right:21%;
        bottom:0px;
        width:65%;
    }
    .step7_item span.cont1 img,
    .step7_item span.cont2 img,
    .step7_item span.cont3 img{
        max-width:100%;
    }
    /* step7 end */
    /* other */
    .step2,.step3,.step4,.step5,.step6,.step7{
        position: relative;
        display: block;
        overflow: hidden;
    }
    /* other end */
    /* lightbox */
    .cart_box{
        width: 100%;
        height:700px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding:0 10px 0 10px;
    }
    .cart_box_left{
        display: block;
        position:relative;
        z-index:1;
        width:100%;
        height:630px;
        float:none;
        padding:50px 0;
    }
    .cart_box_left span.cont1{
        position:absolute;
        width:150%;
        left:0;
        bottom:0;
        z-index: 1;
    }
    .cart_box_left span.cont2{
        position:absolute;
        width:150%;
        left:0;
        bottom:0;
        z-index: 2;
    }
    .cart_box_left span.cont3{
        position:absolute;
        width:150%;
        left:0;
        bottom:0;
        z-index: 3;
    }
    .cart_box_right{
        display: block;
        position:relative;
        z-index:2;
        width:100%;
        height:1050px;
        float:none;
        padding:50px 15px;
        text-align: left;
    }
    .cart_step3{
        text-align: center;
        margin-top:0;
    }
    .cart_step1 span.cont1,
    .cart_step1 span.cont2,
    .cart_step1 span.cont3,
    .cart_step1 span.cont4,
    .cart_step1 span.cont5,
    .cart_step1 span.cont5-5,
    .cart_step1 span.cont6,
    .cart_step1 span.cont7,
    .cart_step1 span.cont8,
    .cart_step1 span.cont9{
        width: 100%;
    }
    .cart_step1 span.cont9 a{
        width:100%;
    }
    .dialog {
        overflow: hidden;
    }
    .dialog-content {
        width: 100%;
        max-width: 100%;
        height:100%;
        overflow: hidden;
    }
    select{
        width:100%;
    }
    .cart_step_notice{
        text-align: center;
        display: block;
        position: absolute;
        left:0;
        top:-22px;
        z-index:3;
        width:100%;
        margin:0 auto;
    }
    .cart_step2 span.cont4 abbr.cont4_txt2 .custom-select-trigger {
        width: 160px;
    }
    .cart_step2 span abbr.cont4_txt2{
        width: 75%;
        display: inline-block;
    }
    .btn {
        right:5px!important;
        top:55px!important;
    }
    .cart_step1 span.cont5 abbr.cont5_txt1{
        top:6px;
        position: relative;
        width: 22%;
    }
   .cart_step1 span.cont5 abbr.cont5_txt2{
        width:76%;
    }
    #invoice_1Div span abbr.cont1_txt1,
    #invoice_3Div span abbr.cont1_txt1{
        width: 23%;
        padding-right:10px;
    }
    #invoice_1Div span abbr.cont1_txt2,
    #invoice_3Div span abbr.cont1_txt2{
        width: 75%;
    }
    .cart_step1 span.cont5-5 abbr.cont5_txt1{
        top:2px;
        position: relative;
        width: 22%;
    }
    .cart_step1 span.cont5-5 abbr.cont5_txt2{
        width:76%;
    }
    .cart_step1 span.cont-notice{
        margin-top:30px;
        width:100%;
    }
    .cart_step3_inforation span.info1{
        padding-bottom:6px;
        padding:9px 0;
        width: 100%;
    }
    .cart_step3_inforation span abbr.cont1_txt1,
    .cart_step3_inforation span abbr.cont2_txt1,
    .cart_step3_inforation span abbr.cont3_txt1{
        display: inline-block;
        width:25%;
        float: left;
        color:#3989c6;
        font-size:12px;
    }
    .cart_step3_inforation span.info1 abbr.cont1_txt2,
    .cart_step3_inforation span.info1 abbr.cont2_txt2,
    .cart_step3_inforation span.info1 abbr.cont3_txt2{
        width:auto;
        display: inline-block;
    }
    .cart_step3_inforation span.info2 abbr.cont1_txt2,
    .cart_step3_inforation span.info2 abbr.cont2_txt2,
    .cart_step3_inforation span.info2 abbr.cont3_txt2{
        width:55%;
        display: inline-block;
        vertical-align: text-top;
    }
    .cart_step2 span abbr.cont3_txt2{
        margin-left:23%;
    }
    #invoice_3Div span abbr.cont1_txt2 form,
    .cont3_form form{
        width:75%;
        vertical-align: top;
    }
    #invoice_3Div span abbr.cont1_txt2 form select,
    .cont3_form form select{
        width:100%;
        margin-left:0px;
        margin-top:12px;
    }
    .order_box_left span.cont3{
        bottom:-100px;
        left:50%;
    }
    .order_box span.cont1.returns_title{
        margin-top:50px;
    }
    .order_box{
        width: 100%;
        height:100%;
        padding:5% 5%;
        background: #fff;
    }
    .contact_cont{
        position: relative;
        display: block;
        width: 100%;
        padding-top:0px;
    }
    .order_box,
    .contact_box{
        padding:0 0 0 0;
/*         overflow-y: scroll; */
        height:100%;
    }
    .order_box_left{
        display: block;
        width:100%;
        height:400px;
        padding:0 0 0 0;
    }
    .order_box_right{
        display: inline-block;
        position:relative;
        z-index:2;
        width:100%;
        height:1200px;
        float:left;
        padding:30px 30px 50px 30px;
        text-align: left;
        background: #fff;
    }
    .order_box span.info_next{
        text-align: center;
        width:100%;
        margin-top:38px;
    }
    .order_box span.info_next a{
        font-size: 13px;
        color:#ffffff;
        background-color: #3989c6;
        width:100%;
    }
    .order_box span.cont1{
        text-align: center;
        margin-bottom:8px;
    }
    .dialog-content.order_height {
        height:100%!important;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .cart_step2 span.cont6 abbr.prev_btn a{
        width:100%;
        margin-bottom:12px;
    }
    .cart_step2 span.cont6 abbr.next_btn a{
        width:100%;
    }
    .cart_step2 span.cont6 abbr{
        width: 100%;
    }
    .order_box_right.contact_margin{
        display: block;
        position:relative;
        z-index:2;
        width:100%;
        height:100%;
        float:left;
        padding:50px 30px 50px 30px;
        text-align: left;
    }
    .dialog-content.contact_height {
        height:100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .contact_cont span.contact_title{
        text-align: center;
    }
    /* lightbox end */
}


/* MOBILE
======================*/

@media screen and (max-width: 599px) {
    .alert_cart{
        position: absolute;
        padding:25px 0 0 0;
        top:75px;
        right:0px;
        display: block;
        height:152px;
        width:90vw;
    }
    .alert_cart:before{
        top:-8px;
        right:18%;
    }
    .main_header {
        background: #ffffff;
        padding: 5px 0;
        height: : 50px;
    }
    .nav-up {
        top: -55px;
    }
    .notice_popup{
        text-align: center;
        position: absolute;
        display: block;
        margin:0 auto;
        width:100%;
        top:170px;
        left: 0;
        z-index: 100;
        cursor: pointer;
    }
    .notice_popup img{
        width: 170px;
    }
    .view_lock{
        overflow-x: hidden!important;
        overflow-y:scroll!important;
        width:100%;
        height:100%;
    }
    /* step1 */
    .step1{
        max-height:747px;
        min-height:357px;
        height:100%;;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        background-image: none;
        margin-top:55px;
    }
    .mobile_nav{
        padding-top:10px;
    }
    .mobile_nav a{
        margin-right:48px;
    }
    .mobile_nav a:nth-child(2){
        margin-right:0px;
    }
    
    .banner_cont_mobile{
        position: relative;
        right:0;
        width:100%;
        height:370px;
        z-index: 50;
        margin-top:45px;
        margin-bottom:40px;
        display: block;
        background-image: url(../images/step1_font_clear.png);
        background-position: right top;
        background-repeat: no-repeat;
        text-align: center;
    }
    .banner_cont_mobile span{
        display: block;
        position: relative;
    }
    .banner_cont_mobile span.cont1{
        font-size:13px;
        color:#959595;
        letter-spacing: 0.5px;
        z-index:10;
    }
    .banner_cont_mobile span.cont2{
        margin:10px 0 10px 0;
        background-image: url(../images/close.png);
        background-position: center top;
        height:25px;
        background-repeat: no-repeat;
    }
    .banner_cont_mobile span.cont3{
        font-size:18px;
        color:#3989c6;
        letter-spacing: 1px;
        margin-bottom:2px;
        z-index:1;
    }
    .banner_cont_mobile span.cont4{
        font-size:35px;
        color:#3989c6;
        letter-spacing: 1px;
        z-index:10;
    }
    .banner_cont_mobile span.item1 img,
    .banner_cont_mobile span.item2 img,
    .banner_cont_mobile span.item3 img{
        margin:0 auto;
    }
    .banner_cont_mobile span.item1{
        position: absolute;
        z-index: 1;
        left:0px;
        top:35px;
        display: block;
        width:100%;
        height:100%;
    }
    .banner_cont_mobile span.item2{
        position: absolute;
        z-index: 2;
        left:0px;
        top:35px;
        display: block;
        width:100%;
        height:100%;
    }
    .banner_cont_mobile span.item3{
        position: absolute;
        z-index: 3;
        left:0px;
        top:35px;
        display: block;
        width:100%;
        height:100%;
    }
    /* step1 end */
    
    /* step2 */
    .step2{
        max-height:100%;
        height:100%;
        z-index:110;
        padding-bottom:100px;
    }
    .step2_title{
        position: relative;
        left:0px;
        margin-top:0px;
        height:80px;
        display: block;
        background-image: url(../images/mobile/step2_title_bg.png);
        background-position: center top;
        background-repeat: no-repeat;
    }
    .step2_title span.cont1{
        color:#3989c6;
        font-size:25px;
        position: relative;
        display: block;
        width: 100%;
        top:25px;
        left:0;
        text-align: center;
        letter-spacing: 0.2px;
    }
    .step2_cont{
        position: relative;
        z-index:20;
        margin-top:48px;
        left:0px;
        display: block;
        width:100%;
        height:auto;
    }
    .step2_cont p{
        margin:0 auto 25px auto;
        text-align: center;
    }
    .step2_cont p:nth-child(1){
        padding-left:0;
    }
    .step2_cont p:nth-child(3){
        padding-left:0;
        margin:0 0 0 0;
    }
    .step2_cont p span.cont1{
        display: inline-block;
        width: auto;
    }
    .step2_cont p span.cont2{
        display: inline-block;
        width: 85%;
        margin-left:0px;
    }
    .step2_broken{
        position: absolute;
        right:-25%;
        top:53%;
        width:70%;
    }
    .step2_item{
        top:50px;
        margin-top:0px;
        width:135%;
        left:21%;
        height:410px;
    }
    .step2_item span.cont1{
        position: absolute;
        z-index: 1;
        left:0;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step2_item span.cont2{
        position: absolute;
        z-index: 2;
        left:0;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step2_item span.cont3{
        position: absolute;
        z-index: 3;
        left:0;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step2_broken span{
        position: absolute;
        right:0px;
        top:80px;
    }
    /* step2 end */
    
    /* step3 */
    .step3{
        max-height:100%;
        height:100%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        z-index: 100;
        padding-bottom:80px;
        background-image: url(../images/step3_bg.png);
    }
    .step3_title{
        position: relative;
        left:0px;
        margin-top:0px;
        display: block;
        background-image: url(../images/mobile/step3_title_bg.png);
        background-size: 100%;
    }
    .step3_title span.cont1{
        font-size:25px;
        top:15px;
        left:30px;
    }
    .step3_ingredient{
        position: relative;
        display: block;
        margin:30px 0 15px 0;
    }
    .step3_ingredient span{
        display: inline-block;
        height:120px;
        padding-top:30px;
        text-align: center;
        vertical-align: middle;
    }
    .step3_ingredient span.dots{
        width: 18%;
        background-image: url(../images/step4_dots.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100%;
        margin:0 6px;
    }
    .step3_ingredient span.cont1{
        width: 36%;
        background-size: 100%;
    }
    .step3_ingredient span.cont1 abbr.cont1_txt1{
        color:#3989c6;
        font-size:22px;
    }
    .step3_ingredient span.cont2{
        width: 36%;
        background-size: 100%;
    }
    .step3_desc{
        position: relative;
        display: block;
        padding-bottom:50px;
        background-image: url(../images/step3_roll_bg.png);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .step3_desc p{
        line-height: 18px;
        width:100%;
        margin:0;
    }
    .step3_desc p.desc_txt2{
        color:#c9c9c9;
        font-size:12px;
        margin:25px 0 10px 0;
        -webkit-transform : scale(0.9);
        -o-transform : scale(0.9);
        position: relative;
        left:-12px;
    }
    .step3_desc p.desc_txt3 span.desc_txt3_f1{
        -webkit-transform : scale(0.9);
        -o-transform : scale(0.9);
        position: relative;
        left:-7px;
        top:25px;
        display: inline-block!important;
        width:75%;
    }
    .step3_desc p.desc_txt3 span.desc_txt3_f2{
        position: absolute;
        left:190px;
        display: inline-block!important;
        width:auto;
    }
    .step3_item{
        position: relative;
        z-index:100;
        top:0px;
        left:-21%;
        margin-top:50px;
        display: block;
        width:155%;
        height:400px;
    }
    .step3_item span.cont1{
        position: absolute;
        z-index: 1;
        left:0px;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step3_item span.cont2{
        position: absolute;
        z-index: 2;
        left:0px;
        top:0px;
        display: block;
        width:100%;
        height:100%;
    }
    .step3_item span.cont3{
        position: absolute;
        z-index: 3;
        left:70px;
        top:320px;
        display: block;
        width:100%;
        height:100%;
    }
    .step3_item span.cont4{
        position: absolute;
        z-index: 3;
        right:20%;
        bottom:-10%;
        display: block;
        width:auto;
        height:auto;
    }
    .step3_item span.cont5{
        position: absolute;
        z-index: 3;
        left:40%;
        top:80px;
        color:#b2d2ec;
        font-size:15px;
        display: block;
        height:auto;
        text-align: center;
    }
    .step3_person_talk{
        position: absolute;
        top:15px;
        left:30px;
    }
    /* step3 end */
    
    /* step4 */
    .step4{
        max-height:100%;
        height:100%;
        z-index: 80;
    }
    .step4_title{
        margin-top:70px;
        height:80px;
        background-image: url(../images/mobile/step4_title_bg.png);
        background-position: center center;
    }
    .step4_title span.cont1{
        font-size:25px;
        top:20px;
        left:0px;
        letter-spacing: 0.2px;
    }
    .step4_story span{
        display: inline-block;
        float:left;
        width:100%;
        height:286px;
        padding:0;
        margin:0 0 0 0;
        background-position: center top;
        background-repeat: no-repeat;
    }
    .step4_story span.story3,
    .step4_story span.story4{
        top:-10px;
        position: relative;
    }
    .step4_story span.story1 abbr.cont1{
        width: 100%;
        margin:0 auto;
        text-align: center;
    }
    .step4_story span.story1 abbr.cont1 img{
        position: relative;
        top:-50px;
        left:25px;
        margin:0 auto;
    }
    .step4_story span abbr.cont3{
        bottom:185px;
        left:50px;
    }
    .story_dots{
        background-image: url(../images/step4_dots_l.png);
        background-repeat: no-repeat;
        background-position: right center;
        height:65px;
        width:4px!important;
        left:50%;
        top:-110px;
        display: block;
        position: relative;
        z-index:20;
    }
    .step4_story span abbr.cont3{
        bottom:195px;
        left:20px;
    }
    /* step4 end */
    
    /* step5 */
    .step5{
        max-height:100%;
        height:100%;
        padding-bottom:80px;
    }
    .step5_title{
        left:0px;
        margin-top:50px;
        background-image: url(../images/mobile/step5_title_bg.png);
        background-size: 100%;
    }
    .step5_title span.cont1{
        font-size:25px;
        line-height:30px;
        top:30px;
        left:0px;
    }
    /* step5 end */
    /* step6 */
    .step6{
        max-height:100%;
        height:760px;
        padding-bottom:80px;
    }
    .step6_title{
        left:0px;
        margin-top:50px;
        margin-bottom:0px;
        background-image: url(../images/mobile/step6_title_bg.png);
        background-size: 180px 68px;
    }
    .step6_title span.cont1{
        font-size:30px;
        line-height:30px;
        top:18px;
        left:0px;
    }
    .buy_item span.cont2{
        width:100%;
    }
    .buy_item span.cont4{
        width:100%;
        margin-bottom:20px;
    }
    .buy_item span.cont4 input{
        width:65%;
    }
    .buy_item span.cont7 abbr.img_01,
    .buy_item span.cont7 abbr.img_02,
    .buy_item span.cont7 abbr.img_03,
    .buy_item span.cont7 abbr.img_04,
    .buy_item span.cont7 abbr.img_05,
    .buy_item span.cont7 abbr.img_06{
        position: absolute;
        right:-180px;
        margin-top:-18px;
    }
    .buy_item span.cont6 a{
        width:100%;
    }
    /* step6 */
    /* step7 */
    .step7{
        max-height:560px;
        height:560px;
        overflow: hidden;
    }
    .step7_logo{
        position: absolute;
        display:inline-block;
        width:100%;
        top:55px;
        text-align: center;
    }
    .step7_item{
        position: absolute;
        right:10px;
        bottom:0px;
        width:100%;
    }
    /* step7 end */
    /* other */
    .step2,.step3,.step4,.step5,.step6,.step7{
        position: relative;
        display: block;
        overflow: hidden;
    }
    /* other end */
    /* lightbox */
    .cart_box{
        width: 100%;
        height:700px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding:0 10px 0 10px;
    }
    .cart_box_left{
        display: block;
        position:relative;
        z-index:1;
        width:100%;
        height:630px;
        float:none;
        padding:50px 0;
    }
    .cart_box_left span.cont1{
        position:absolute;
        width:150%;
        left:0;
        bottom:0;
        z-index: 1;
    }
    .cart_box_left span.cont2{
        position:absolute;
        width:150%;
        left:0;
        bottom:0;
        z-index: 2;
    }
    .cart_box_left span.cont3{
        position:absolute;
        width:150%;
        left:0;
        bottom:0;
        z-index: 3;
    }
    .cart_box_right{
        display: block;
        position:relative;
        z-index:2;
        width:100%;
        height:1050px;
        float:none;
        padding:50px 15px;
        text-align: left;
    }
    .cart_step3{
        text-align: center;
        margin-top:0;
    }
    .cart_step1 span.cont1,
    .cart_step1 span.cont2,
    .cart_step1 span.cont3,
    .cart_step1 span.cont4,
    .cart_step1 span.cont5,
    .cart_step1 span.cont5-5,
    .cart_step1 span.cont6,
    .cart_step1 span.cont7,
    .cart_step1 span.cont8,
    .cart_step1 span.cont9{
        width: 100%;
    }
    .cart_step1 span.cont9 a{
        width:100%;
    }
    .dialog {
        overflow: hidden;
    }
    .dialog-content {
        width: 100%;
        max-width: 100%;
        height:100%;
        overflow: hidden;
    }
    select{
        width:100%;
    }
    .cart_step_notice{
        text-align: center;
        display: block;
        position: absolute;
        left:0;
        top:-22px;
        z-index:3;
        width:100%;
        margin:0 auto;
    }
    .cart_step2 span.cont4 abbr.cont4_txt2 .custom-select-trigger {
        width: 160px;
    }
    .cart_step2 span abbr.cont4_txt2{
        width: 75%;
        display: inline-block;
    }
    .btn {
        right:5px!important;
        top:55px!important;
    }
    .cart_step1 span.cont5 abbr.cont5_txt1{
        top:6px;
        position: relative;
        width: 22%;
    }
   .cart_step1 span.cont5 abbr.cont5_txt2{
        width:76%;
    }
    #invoice_1Div span abbr.cont1_txt1,
    #invoice_3Div span abbr.cont1_txt1{
        width: 23%;
        padding-right:10px;
    }
    #invoice_1Div span abbr.cont1_txt2,
    #invoice_3Div span abbr.cont1_txt2{
        width: 75%;
    }
    .cart_step1 span.cont5-5 abbr.cont5_txt1{
        top:2px;
        position: relative;
        width: 22%;
    }
    .cart_step1 span.cont5-5 abbr.cont5_txt2{
        width:76%;
    }
    .cart_step1 span.cont-notice{
        margin-top:30px;
        width:100%;
    }
    .cart_step3_inforation span.info1{
        padding-bottom:6px;
        padding:9px 0;
        width: 100%;
    }
    .cart_step3_inforation span abbr.cont1_txt1,
    .cart_step3_inforation span abbr.cont2_txt1,
    .cart_step3_inforation span abbr.cont3_txt1{
        display: inline-block;
        width:115px;
        float: left;
        color:#3989c6;
        font-size:12px;
    }
    .cart_step3_inforation span.info1 abbr.cont1_txt2,
    .cart_step3_inforation span.info1 abbr.cont2_txt2,
    .cart_step3_inforation span.info1 abbr.cont3_txt2{
        width:auto;
        display: inline-block;
    }
    .cart_step3_inforation span.info2 abbr.cont1_txt2,
    .cart_step3_inforation span.info2 abbr.cont2_txt2,
    .cart_step3_inforation span.info2 abbr.cont3_txt2{
        width:55%;
        display: inline-block;
        vertical-align: text-top;
    }
    .cart_step2 span abbr.cont3_txt2{
        margin-left:23%;
    }
    #invoice_3Div span abbr.cont1_txt2 form,
    .cont3_form form{
        width:75%;
        vertical-align: top;
    }
    #invoice_3Div span abbr.cont1_txt2 form select,
    .cont3_form form select{
        width:100%;
        margin-left:0px;
        margin-top:12px;
    }
    .order_box_left span.cont3{
        bottom:-100px;
        left:20px;
    }
    .order_box span.cont1.returns_title{
        margin-top:50px;
    }
    .order_box{
        width: 100%;
        height:100%;
        padding:5% 5%;
        background: #fff;
    }
    .contact_cont{
        position: relative;
        display: block;
        width: 100%;
        padding-top:0px;
    }
    .order_box,
    .contact_box{
        padding:0 0 0 0;
/*         overflow-y: scroll; */
        height:100%;
    }
    .contact_box{
        width: 100%;
        height:100%;
        padding:0;
        background: #fff;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .order_box_left{
        display: block;
        width:100%;
        height:400px;
        padding:0 0 0 0;
    }
    .order_box_right{
        display: block;
        position:relative;
        z-index:2;
        width:100%;
        height:1200px;
        float:left;
        padding:30px 30px 50px 30px;
        text-align: left;
        background: #fff;
    }
    .order_box span.info_next{
        text-align: center;
        width:100%;
        margin-top:38px;
    }
    .order_box span.info_next a{
        font-size: 13px;
        color:#ffffff;
        background-color: #3989c6;
        width:100%;
    }
    .order_box span.cont1{
        text-align: center;
        margin-bottom:8px;
    }
    .dialog-content.order_height {
        height:100%!important;
    }
    .cart_step2 span.cont6 abbr.prev_btn a{
        width:100%;
        margin-bottom:12px;
    }
    .cart_step2 span.cont6 abbr.next_btn a{
        width:100%;
    }
    .cart_step2 span.cont6 abbr{
        width: 100%;
    }
    .order_box_right.contact_margin{
        display: block;
        position:relative;
        z-index:2;
        width:100%;
        height:100%;
        float:left;
        padding:50px 30px 50px 30px;
        text-align: left;
    }
    .dialog-content.contact_height {
        height:100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .contact_cont span.contact_title{
        text-align: center;
    }
    /* lightbox end */
}

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

@media screen and (max-width: 330px) {
    .step2{
        padding-bottom:0px;
    }
    .step3{
        padding-bottom:0px;
    }
    .step3_item span.cont3{
        top:260px;
    }
    .step3_item span.cont4{
        right:18%;
        bottom:5%;
    }
    .step4_story span.story1 abbr.cont1 img{
        width:70%;
    }
    /* step7 */
    .step7{
        max-height:480px;
        height:480px;
        overflow: hidden;
    }
    .step7_logo{
        position: absolute;
        display:inline-block;
        width:100%;
        top:55px;
        text-align: center;
    }
    .step7_item{
        position: absolute;
        right:20px;
        bottom:0px;
        width:100%;
    }
    /* step7 end */
     /* lightbox */
    #invoice_1Div span abbr.cont1_txt2,
    #invoice_3Div span abbr.cont1_txt2{
        vertical-align: bottom;
    }
    #invoice_3Div span.cont3{
        padding-top:12px;
        padding-bottom:6px;
        border-bottom:1px solid #dfdfdf;
    }
    /* lightbox end */
    .cart_box_right{
        display: block;
        position:relative;
        z-index:2;
        width:100%;
        height:1050px;
        float:none;
        padding:50px 15px 50px 15px;
        text-align: left;
    }
    .cart_step3{
        text-align: center;
        margin-top:0;
    }
    .step3_item span.cont5{
        left:45%;
    }
    .contact_cont span abbr.cont1_txt1,
    .contact_cont span abbr.cont2_txt1,
    .contact_cont span abbr.cont3_txt1,
    .contact_cont span abbr.cont4_txt1{
        vertical-align: text-top;
    }
}


/* ONLY
======================*/

@media screen and (-webkit-min-device-pixel-ratio:2) and (min-width: 768px) and (max-width: 989px) {}

@media screen and (-webkit-min-device-pixel-ratio:2) and (max-width: 767px) {}


/* Firefox All */

@-moz-document url-prefix() {
    .xxxx {}
}


/* Safari 5~6 ONLY */

@media screen and (-webkit-min-device-pixel-ratio:0) {
    ::i-block-chrome,
    .xxxx {}
}


/* Safari 6以上 ONLY */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    @media {
        _:-webkit-full-screen,
        .xxxx {}
    }
}


/**/