.flash{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; pointer-events: none; background-size: auto 100%;
    animation: kv-flash ease-in-out 5s both infinite; 
    background: url("../img/premium/kv_flash.png") no-repeat; 
}

.title-lable{ width: 80%; max-width: 400px; margin: 0 auto 50px; overflow: hidden; position: relative;}
.title-lable .flash{ animation: kv-flash ease-out 5s both infinite; }

.note{ width: 100%; max-width: 380px; font-size: 14px; margin: 30px auto 0;}
sup{ font-size: 70%; position: relative; top: -10px; padding-left: 3px;}


.icons{ display: flex; width: 100%; max-width: 800px; margin: 0 auto;}
.icons li{ width: 33.33%;}
.icons li p{ color: #9d672c; font-size: 24px; font-weight: 500; line-height: 1.3; text-align: center; margin-bottom: 15px;}
.icons li .icon{ }



.sec-kv{ position: relative;}
.sec-kv .bg{ display: flex; justify-content: center; align-items: center; overflow: hidden; width: 100%; margin: 0 auto;}
.sec-kv .bg img{ width: 1920px; max-width: 1920px;}
.sec-kv .bg .pc{ display: block; }
.sec-kv .bg .mb{ display: none;}
.sec-kv .container { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sec-kv .container .text{ width: 100%; max-width: 1100px; height: 100%; margin: 0 auto; position: relative; }
.sec-kv .container .text .premium{ width: 50%; max-width: 570px; position: absolute; top: 20%; right: 1%;}
.sec-kv .container .text .premium .flash{ 
    -webkit-mask: url("../img/premium/kv_text.png") no-repeat;
    -webkit-mask-size: auto 100%;
    mask: url("../img/premium/kv_text.png") no-repeat;
    mask-size: auto 100%;
}



.sec-1{ background: #f7c3cf url("../img/premium/bg_1.jpg") center bottom no-repeat;}
.sec-1 .container{ width: 100%; max-width: 1000px;}
.sec-1 .title-lable{ max-width: 520px; }
.sec-1 .title-lable .flash{ 
    -webkit-mask: url("../img/premium/lable_1.png") no-repeat;
    -webkit-mask-size: auto 100%;
    mask: url("../img/premium/lable_1.png") no-repeat;
    mask-size: auto 100%; 
}
.sec-1 .product{ padding-bottom: 60%; position: relative; }
.sec-1 .product .wrapper{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; }
.sec-1 .product .wrapper .pd{ width: 56%; max-width: 566px; position: relative; top: -5%;}
.sec-1 .product .wrapper .pd .flash{ 
    -webkit-mask: url("../img/premium/pic_1_product.png") no-repeat;
    -webkit-mask-size: auto 100%;
    mask: url("../img/premium/pic_1_product.png") no-repeat;
    mask-size: auto 100%; 
}
.sec-1 .product .feature{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.sec-1 .product .feature .f{ position: absolute; animation: floating 5s linear infinite normal;}
.sec-1 .product .feature .f1{ width: 20%; max-width: 208px; left: 1%; top: 20%;}
.sec-1 .product .feature .f2{ width: 33%; max-width: 378px; right: 1%; top: -2%; }
.sec-1 .product .feature .f3{ width: 33%; max-width: 372px; right: 25%; bottom: -5%; }
.sec-1 .note{ width: 90%;}

.sec-2{ background: radial-gradient(ellipse at center, #fff0cb 8%,#ffffff 75%); position: relative; padding-top: 20px;}
.sec-2::before{ content: ''; width: 100%; height: 250px; top: -250px; left: 0; position: absolute; background: url("../img/premium/bg_2.png") center bottom no-repeat;}
.sec-2::after{ content: ''; width: 100%; height: 150px; top: 0; left: 0; position: absolute; background: linear-gradient(to bottom, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 100%);}
.sec-2 .title-lable .flash{ 
    -webkit-mask: url("../img/premium/lable_2.png") no-repeat;
    -webkit-mask-size: auto 100%;
    mask: url("../img/premium/lable_2.png") no-repeat;
    mask-size: auto 100%; 
}
.sec-2 .container{ width: 90%; max-width: 1000px;}
.sec-2 .pic{ width: 100%; max-width: 700px; margin: 0 auto 50px;}


.sec-3{  background: radial-gradient(ellipse at center, #ffe1a8 8%,#fff3d5 70%);}
.sec-3 .container{ width: 90%; max-width: 1000px; }
.sec-3 .title-lable .flash{ 
    -webkit-mask: url("../img/premium/lable_3.png") no-repeat;
    -webkit-mask-size: auto 100%;
    mask: url("../img/premium/lable_3.png") no-repeat;
    mask-size: auto 100%; 
}
.sec-3 .pic{ width: 100%; max-width: 600px; margin: 0 auto 50px;}


.sec-4{}
.sec-4 .container{ width: 90%; max-width: 1000px;}
.sec-4 .title-lable .flash{ 
    -webkit-mask: url("../img/premium/lable_4.png") no-repeat;
    -webkit-mask-size: auto 100%;
    mask: url("../img/premium/lable_4.png") no-repeat;
    mask-size: auto 100%; 
}
.sec-4 .text{ font-size: 24px; text-align: center; }
.sec-4 .flow{ width: 100%; max-width: 550px; margin: 0 auto 50px; }
.sec-4 .step{ width: 100%; max-width: 785px; margin: 0 auto 30px; position: relative;}
.sec-4 .step .cover{ width: 100%; height: 100%; left: 0; top: 0; position: absolute; }
.sec-4 .step .dots{ width: 100%; height: 100%; left: 0; top: 0; position: absolute; 
	background: url("../img/premium/pic_4-3_dots.png") 0 50% repeat-x; background-size: 100% auto; animation: kv-flash linear 20s infinite; 
	-webkit-mask: url("../img/premium/pic_4-3_mask.png") no-repeat;
    -webkit-mask-size: 100% auto;
    mask: url("../img/premium/pic_4-3_mask.png") no-repeat;
    mask-size: 100% auto;
}
.sec-4 .step .flash{ 
    -webkit-mask: url("../img/premium/pic_4-3_cover_mask.png") no-repeat;
    -webkit-mask-size: auto 100%;
    mask: url("../img/premium/pic_4-3_cover_mask.png") no-repeat;
    mask-size: auto 100%; 
}

.sec-5{ background: #ffeccb url("../img/premium/bg_5.png") center bottom no-repeat;}
.sec-5 .container{ width: 90%; max-width: 1000px;}
.sec-5 .title-lable .flash{ 
    -webkit-mask: url("../img/premium/lable_5.png") no-repeat;
    -webkit-mask-size: auto 100%;
    mask: url("../img/premium/lable_5.png") no-repeat;
    mask-size: auto 100%; 
}
.sec-5 .pic{ width: 100%; max-width: 750px; margin: 0 auto;}

.sec-6{ background: linear-gradient(to bottom, #ffffff 60%, #fff9e2 90%); padding-top: 40px; }
.sec-6 .container{ width: 100%; max-width: 1000px;}
.sec-6 .compare{ width: 95%; max-width: 800px; margin: 0 auto 50px;}
.sec-6 .compare .product{ display: flex; justify-content: space-between; margin: 0 auto; position: relative;}
.sec-6 .compare .product .pd{ width: 47%; max-width: 360px;}
.sec-6 .compare .product .arr{ width: 22%; max-width: 150px; position: absolute; left: 35%; top: 30%;}
.sec-6 .compare .text{ display: flex; justify-content: space-between;}
.sec-6 .compare .text .t{ width: 49%; max-width: 280px;}
.sec-6 .text{ width: 95%; max-width: 880px; margin: 0 auto 30px;}
.sec-6 .ezcube{ width: 95%; max-width: 820px; margin: 0 auto; position: relative; }
.sec-6 .ezcube .bg{ animation: floating 5s linear infinite normal;}
.sec-6 .ezcube .f{ position: absolute; width: 100%; top: 0;}


/*	RESPONSIVE:  */
@media only screen and (max-width:1250px) {
.sec-kv .bg img{ width: 1440px; max-width: 1440px;}	
.sec-kv .container .text .premium{ width: 45%; top: 25%; right: 3%; }	
	

.sec-1{ background-size: 1680px auto;}
	
.sec-5{ background-size: 1250px auto;}	
	
}

/*	RESPONSIVE:  */
@media only screen and (max-width:1024px) {
.sec-1{ padding-bottom: 80px;}
.sec-2::before{ height: 150px; top: -150px; background-size: 1024px auto;}

}


/*	RESPONSIVE:  */
@media only screen and (max-width:767px) {

.title-lable{ margin: 0 auto 30px;}
.icons li p{ font-size: 17px; margin-bottom: 10px;}

.sec-kv .bg img{ width: 100%; max-width: 100%;}
.sec-kv .bg .pc{ display: none;}
.sec-kv .bg .mb{ display: block;}
.sec-kv .container .text .premium{ width: 75%; top: 7%; right: 12.5%; }
	
.sec-1{ background: #f7c3cf url("../img/premium/bg_1_m.jpg") center bottom no-repeat; background-size: 100% auto;}
.sec-1 .product .wrapper .pd{ width: 43%; top: -4%;}
.sec-1 .product .feature .f1{ width: 30%; left: 0.5%; top: 15%;}
.sec-1 .product .feature .f2{ width: 53%; right: 0.5%; top: -4%;}
.sec-1 .product .feature .f3{ width: 53%; right: 11%; bottom: -14%; }
	
/*.sec-1{ background: #f7c3cf url("../img/premium/bg_1_m.jpg") center bottom no-repeat; background-size: 100% auto;}
.sec-1 .product{ padding-bottom: 0; position: relative; }
.sec-1 .product .wrapper{ height: auto; display: block; position: relative; top: auto; left: auto; }
.sec-1 .product .wrapper .pd{ width: 70%; margin: 0 auto 30px; position: relative;}
.sec-1 .product .feature{ height: auto; display: block; position: relative; top: auto; left: auto; padding-bottom: 60%;}
.sec-1 .product .feature .f1{ width: 33.5%; left: 1.5%; top: 12%;}
.sec-1 .product .feature .f2{ width: 57%; right: 0%; top: 3%; }
.sec-1 .product .feature .f3{ width: 57%; right: 6%; bottom: -8%; }*/

.sec-2{ background: radial-gradient(ellipse at center, #fff0cb 25%, #ffffff 90%);}

.sec-3{  background: radial-gradient(ellipse at center, #ffe1a8 30%, #fff3d5 80%);}
	
.sec-4 .text{ font-size: 20px; }
/*.sec-4 .flow{ flex-direction: column; max-width: 500px;}*/
/*.sec-4 .flow .anim{ width: 100%; }
.sec-4 .flow .arr{ width: 100%; justify-content: center;}
.sec-4 .flow .arr img{ width: 100px;}
.sec-4 .flow .arr .arr1{ display: none;}
.sec-4 .flow .arr .arr2{ display: block;}*/
.sec-4 .step .dots{ animation: kv-flash linear 30s infinite;}	
.sec-5{ background-size: 800px auto;}
	
.sec-6 .compare .product{ width: 95%; }
}

@keyframes kv-flash {
    0% { background-position: -500px 50%; }
    100% { background-position: 700px 50%; }
}

@keyframes dots {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes floating {
  0% { transform: translateY(0);}
  50% { transform: translateY(-20px);}
  100% { transform: translateY(0);}
}
