* {outline: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;touch-action: pan-y; }
html {font-size: 10px;-webkit-text-size-adjust: 100%;}
body {position: relative;padding: 0;margin: 0 auto;font-size: 10px;color: #000;background: #000;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight: rgba(0,0,0,0); position: relative;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {-webkit-appearance: none;}
ul,ul li {list-style: none;}
table {border-collapse: collapse;border-spacing: 0}
table td {border-collapse: collapse;}
select, input, textarea {color: #333;border-radius: 0;-webkit-border-radius: 0;}
img{border: none;max-width: 100%;vertical-align: middle;}
a {color: #333;text-decoration: none;cursor: pointer;noline:-webkit-tap-highlight-color:rgba(0,0,0,0);/* 去掉链接触摸高亮 */}
a:hover {text-decoration: none;}
a:focus {outline: none;-moz-outline: none;}
*{font-weight: normal;margin: 0;box-sizing: border-box;    padding: 0; }
img{border: none;max-width: 100%;width: 100%; vertical-align: middle;}
.auto{ margin:0 auto;}
.auto-1500{max-width: 1500px;margin: 0 auto;}
.clear {clear: both;height: 0px;overflow: hidden;zoom: 0;}
.clearfix:after { content:"\200B"; display:block; height:0; clear:both; }
input,input:focus,input:active{user-select: text;}
input::-webkit-input-placeholder {color: #ddcdbd;}
select, input{border:none;}
.gray{-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */filter: grayscale(100%);}
#menu li{list-style: none;}
#menu .active a { color: #ffdaaa;}
.wUp,.wzoom,.wfr,.wfi,.wfb{opacity: 0;}
.wUp.animated,.wzoom.animated,.wLeft.animated{opacity: 1;}
@font-face {
  font-family: 'roboto_bold';
  src: url("../font/Roboto-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_medium';
  src: url("../font/Roboto-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'roboto_light';
  src: url("../font/Roboto-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.f-roboto-light {
  font-family: 'roboto_light';
}
.f-roboto-medium {
  font-family: 'roboto_medium';
}
.f-roboto-bold {
  font-family: 'roboto_bold';
}
@font-face {
  font-family: 'SVN-Russell';
  src: url("../font/SVN-Russell.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.f-SVN-Russell {
  font-family: 'SVN-Russell';
}
.content-container5 {
  max-width: 970px;
  position: relative;
  margin: 0 auto;
}
.content-container4 {
  max-width: 1158px;
  position: relative;
  margin: 0 auto;
}
@media(max-width:1680px){
	.content-container5 {
	  max-width: 970px;
	}
	.content-container4 {
	  max-width: 1058px;
	}
}
@media(max-width:1366px){
	.content-container5 {
	  max-width: 670px;
	}
	.content-container4 {
	  max-width: 658px;
	}
}
@media(max-width:912px){
	.content-container5 {
	  max-width: 100%;
	}
}
.section{position: relative;overflow: hidden;}
.section.active{-webkit-animation: scaleA 1s ease both;}
.fp-section.fp-table.p2, .fp-slide.fp-table.p2{display: block;}
.banner-pic{opacity: 0;pointer-events: none;display: none;}
#section-one video{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:top center;
}

#section-one{background: url("../images/banner.jpg")no-repeat center bottom;background-size:cover;}
#section-two{background: url(../images/bg2.jpg)no-repeat center center;background-size:cover;z-index: 2;}
/*#section-three{background: url(../images/bg3.jpg)no-repeat top center;background-size:cover;z-index: 2;}*/
#section-three{background:#000000}
#section-four{background: url(../images/bg4.jpg)no-repeat center center;background-size: cover;z-index: 1;}
#section-five{background: url(../images/bg6.jpg)no-repeat top center;background-size: cover;}
#section-six{background: url(../images/bg6.jpg)no-repeat center center;background-size: cover;}
@media(max-width:912px){
	#section-one{background: url(../images/bannerinner1.jpg)no-repeat bottom center;background-size:cover;}
	#section-two{background: url(../images/bg2-w3.jpg)no-repeat top center;background-size:cover;}
	/*#section-three{background: url(../images/bg3-w.webp)no-repeat top center;background-size:cover;}*/
	#section-three{background:#000000}
	#section-four{background: url(../images/bg4-w-2.jpg)no-repeat top center;background-size: cover;}
	#section-five{background: url(../images/bg6-w.jpg)no-repeat top center;background-size: cover;}
	#section-six{background: url(../images/bg6-w.jpg)no-repeat center center;background-size: cover;}
}
@media(max-width:853px){
	#section-two{background: url(../images/bg2-w2.jpg)no-repeat top center;background-size:cover;}
}
@media(max-width:820px){
	#section-two{background: url(../images/bg2-w3.jpg)no-repeat top center;background-size:cover;}	
}
@media(max-width:768px){
	#section-one{background: url(../images/bannerinner3.jpg)no-repeat bottom center;background-size:cover;}
	#section-two{background: url(../images/bg2-w4.jpg)no-repeat top center;background-size:cover;}
}
@media(max-width:600px){
	#section-one{background: url(../images/bannerinner1.jpg)no-repeat bottom center;background-size:cover;}
	#section-two{background: url(../images/bg2-w3.jpg)no-repeat top center;background-size:cover;}
}
@media(max-width:540px){
	#section-one{background: url(../images/bannerinner3.jpg)no-repeat bottom center;background-size:cover;}
	#section-two{background: url(../images/bg2-w4.jpg)no-repeat top center;background-size:cover;}
}
@media(max-width:480px){
	#section-one{background: url(../images/bannerinner.jpg)no-repeat bottom center;background-size:cover;}
	#section-two{background: url(../images/bg2-w2.jpg)no-repeat top center;background-size:cover;}
	#section-four{background: url(../images/bg4-w.jpg)no-repeat center center;background-size: cover;}
}
@media(max-width:375px){
	#section-one{background: url(../images/bannerinner1.jpg)no-repeat bottom center;background-size:cover;}
}
@media(max-width:320px){
	#section-one{background: url(../images/bannerinner1.jpg)no-repeat bottom center;background-size:cover;}
	#section-two{background: url(../images/bg2-w4.jpg)no-repeat top center;background-size:cover;}
	#section-four{background: url(../images/bg4-w-2.jpg)no-repeat top center;background-size: cover;}
	
}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

@-webkit-keyframes scaleA {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.4);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}
.title{ margin: 0 auto;text-align: center;}
.pic-web{display: block;}
.pic-wap{display: none;}

.animated{-webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;}

@media(max-width:1750px){
	html,body{font-size:9px;}
	.btn-anniu{font-size: 2.2rem;line-height: 44px;}
}
@media(max-width:1600px){
	html,body{font-size:8.5px;}
}
@media(max-width:1550px){}
@media(max-width:820px){
html,body{font-size:10px;}
	.btn-anniu{font-size: 1.6rem;line-height: 34px;}
}
@media(max-width:912px){	
	.pic-web{display: none;}
    .pic-wap{display: block;}
}
@media(max-width:361px){
	html,body{font-size:9px;}
}
@media(max-width:321px){

}

/************** header ********************/
.foot-btn{width: 2%;position: absolute;bottom: 20px;left: 40px;z-index: 999;cursor: pointer;}
.head{position: fixed;top: 0;left: 0;width:15%;height: 100%;z-index: 10;}
.head:before{position: absolute;content: "";width: 1px;height: 100%;top: 0;left: 10%;background: rgba(144,136,126,0.3);}
.head .hanbager{display: none;cursor: pointer;position: relative;width: 55px;height: 55px;border: 2px rgba(244,235,209,0.4) solid; float: left;}
.head .hanbager div{position: absolute;width: 70%;height: 4px;background: #f4ebd1;top: 14px;left: 50%;transform: translate(-50%,0);}
.head .hanbager div:nth-child(2){top: 25px;}
.head .hanbager div:nth-child(3){top: 36px;}
.head .hanbager.open div{top: 23px;transform: rotate(45deg);-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);transform-origin: center center;left: 21%;}
.head .hanbager.open div:nth-child(2){display: none;}
.head .hanbager.open div:nth-child(3){transform: rotate(-45deg);-ms-transform: rotate(-45deg);-moz-transform: rotate(-45deg);top: 23px;}
.head .gobook{display: none;}
.ic{position: absolute;top:1%;left:90%;width: 100%}
.ic a {float: left;margin: 0 11px 0 0}
.ic a:hover {float: left;margin: 0 11px 0 0;filter: brightness(1.3)}
.ic a img{max-height:49px; max-width:49px}
.head .head-right{left: 10%;position: absolute;top: 50%;transform: translate(0,-50%);}
.head .head-right li{position: relative;text-align: left;padding-left: 25px;margin:10% 0;}
.head .head-right li:after{position: absolute;content: "";width:3px;height:16px;background: url(../images/nav-0.jpg)no-repeat center center;background-size: 100% 100%;top: 50%;left: 0;transform: translate(0,-50%);}
.head .head-right li.jljl{display: none;}
.head .head-right li span{display: none;}
.head .head-right li.active{padding: 0;}
.head .head-right li.active:after{display: none;}
.head .head-right li.active a{display: none;}
.head .head-right li.active span{display: block;}
.head .head-right li.active span img{width:90%;}
.head .head-right li a{display: inline-block;font-size: 1.7rem;color: #ffffe8;text-transform: uppercase;font-style: italic; line-height: 28px;padding: 0 0;}
.head .head-right .foot-btn{display: none;width: 12%;bottom: 2%;}
.head .head-right .foot-btn img{min-width: 25px;}
@media(max-width:1700px){
	.head .head-right li:after{width:14px;height:19px;}
	.head .head-right li{padding-left: 25px;}
	.head .head-right li a{line-height:28px;}
	.head .head-right li.active span img{width:90%;}
}

@media(max-width:912px){
	.foot-btn{width:3%;bottom:0;right:10px;}
	.head{position: fixed;left:0;z-index:10;padding: 8px 0;width:100%;top:0;height:auto;background:rgba(0,0,0,0.8);}
	.head:before{display: none;}
	.head .hanbager{width:62px;height:62px;border: 1px rgba(244,235,209,0.4) solid;display: block;float: right;margin:0 4% 0 0;transform: scale(0.9);}
	.head .hanbager div{top:12px;width:60%;height:6px;}
	.head .hanbager div:nth-child(2){top:28px;}
    .head .hanbager div:nth-child(3){top:44px;}
	.head .hanbager.open div,.head .hanbager.open div:nth-child(3){top:25px;}
	
	.head .logo{top:4px;width:auto;width:54%;left:2%;display:block}
	.head .logo img{max-height:94px;max-width:94px;}
	.head .ic{width: 55%; top:11px;left: 21%;}
	.head .ic a {float: left;margin: 0 10px 0 0}
	.head .ic a:hover {float: left; margin: 0 10px 0 0;filter: brightness(1.3)}
	.head .ic a img{max-height:68px; max-width:67px}
	
	.head .head-right{width: 50%;position: fixed;content: "";height: 100%;top: 0; z-index: -1;transform: translate(0,0);left:100%;background: rgba(0,0,0,0.8);margin-right: 0;transition: all 0.6s ease;padding-left: 4%;padding-top: 23%;}
	.head .head-right:before{position: absolute;content: "";width: 1px;height: 100%;top: 0;left: 8%;background: rgba(144,136,126,0.3);}
	.head .head-right li{margin:14% 0;padding-left:15px;}
	.head .head-right li:after{width:3px;height:16px}
	.head .head-right li.jljl{display:block;}
	.head .head-right li a{font-size:2rem;line-height:30px;padding: 0px 16px;}
	.head .head-right li.active span img{width:80%;}
	.foot-btn{display: none;}
	.head .head-right .foot-btn{display: block;}	
}

@media(max-width:600px){
	.foot-btn{width:3%;bottom:0;right:10px;}
	.head{position: fixed;top:0;left:0;padding: 8px 0;width:100%;height:auto;background:rgba(0,0,0,0.5);}
	.head .hanbager{width:45px;height:45px;}
	.head .hanbager div{top:9px;width:60%;height:4px;}
	.head .hanbager div:nth-child(2){top:20px;}
    .head .hanbager div:nth-child(3){top:31px;}
	.head .hanbager.open div,.head .hanbager.open div:nth-child(3){top:20px;}
	.head .logo{top:4px;width:auto;width:54%;left:2%;display:block}
	.head .logo img{max-height:84px;max-width:84px;}
	
	.head .ic{width: 55%; top:10px;left: 21%;}
	.head .ic a {float: left;margin: 0 10px 0 0}
	.head .ic a:hover {float: left; margin: 0 10px 0 0;filter: brightness(1.3)}
	.head .ic a img{max-height:40px; max-width:70px}
	
	.head .head-right li{padding-left:10px;margin:12% 0;}
	.head .head-right li:after{width:3px;height:16px}
	.head .head-right li.jljl{display:block;}
	.head .head-right li a{font-size: 1.6rem;line-height: 30px;padding: 0px 12px;}
	.head .head-right li.active span img{width:80%;}
}
@media(max-width:540px){
	.foot-btn{width: 3%;bottom: 0;right:10px;}
	.head{position: fixed;top: 0;left: 0;padding: 8px 0;width: 100%;height: auto;background: rgba(0,0,0,0.5);}
	.head:before{display: none;}
	.head .hanbager{width: 35px;height: 30px;border: 1px rgba(244,235,209,0.4) solid;display: block;float: right;margin:0 4% 0 0;transform: scale(0.9)}
	.head .hanbager div{top: 6px;width: 60%;height: 3px;}
	.head .hanbager div:nth-child(2){top: 12px;}
    .head .hanbager div:nth-child(3){top:18px;}
	.head .hanbager.open div,.head .hanbager.open div:nth-child(3){top:13px;}
	
	.head .logo{top: 4px;width: auto;width: 34%;left: 2%;display: block}
	.head .logo img{max-height: 54px; max-width: 54px;}
	.head .ic{width: 55%; top:6px;left: 17%;}
	.head .ic a {float: left;margin: 0 10px 0 0}
	.head .ic a:hover {float: left; margin: 0 10px 0 0;filter: brightness(1.3)}
	.head .ic a img{max-height:30px; max-width:55px}
	
	.head .head-right:before{position: absolute;content: "";width: 1px;height: 100%;top: 0;left: 8%;background: rgba(144,136,126,0.3);}
	.head .head-right li{padding-left:9px;margin: 12% 0;}
	.head .head-right li:after{width:3px;height:16px}	
	.head .head-right li a{font-size: 1.4rem;line-height: 30px;padding: 0px 12px;}
	.head .head-right li.jljl{display: block;}
	.head .head-right li.active span img{width:80%;}
}
@media(max-width:480px){
	.head .ic a img{max-height:30px; max-width:50px}

}
@media(max-width:376px){
	.head .ic{width: 55%; top:10px;left:24%;}
	.head .ic a img{max-height:25px; max-width:40px}
	.head .head-right li{padding-left:5px;margin: 12% 0;}
	.head .head-right li a{font-size:1.3rem;line-height: 25px;padding: 0px 12px;}
}
@media(max-width:320px){
	.head .ic{width: 55%; top:10px;left: 24%;}
	.head .ic a img{max-height:25px; max-width:40px}
	.head .head-right li{padding-left:2px;margin: 12% 0;}
}
/************** frame 1 ********************/
.yyly{position: absolute;content: "";width: 41%;bottom:0%;right:30%; z-index: 3;text-align: center;}
/*.slogan{pointer-events: none;}*/
.yy-an{margin-top: -10%;}
.logo{position: absolute;content: "";top: 0%;left:2%;width:13%;}
.yy-an .down-box{width:55%;margin: 0 auto;background: url(../images/down-bg.png)no-repeat center center;background-size: 100% 100%;padding:10px 20px 10px 30px; }
.yy-an .down-box li{display: block;float: left;width: 24%;margin-right: 2%;}
.yy-an .down-box li:nth-child(1){margin-top:8%}
.yy-an .down-box li a:hover{filter: brightness(1.2)}
.yy-an .down-box li:nth-child(2){width: 46%; margin-right: 1%;}
.yy-an .down-box li:nth-child(2) a{display: block;float: left;width:100%;margin-bottom:3%;margin-top:3%;}
.yy-an .down-box li:nth-child(2) a:nth-child(2){margin-right:0%;}
.yy-an .down-box li:nth-child(3){width: 24%; margin-right: 0%;margin-top:8%;margin-left: 1%}

.video{position: absolute;top:55%;left:44%;width:100%;z-index: 4;}
.play {display: block;background-image: url("../images/play.png"); background-size: contain; width:216px;height: 91px;font-size: 0}
.play:hover {filter: brightness(1.2);}
@keyframes blink {
    0% {
        opacity: 1;
		filter: brightness(1.2);
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes glitch {
  0%, 20%, 33%, 60%, 64%, 66%, 69%, 73%, 75%, 90%, 93%, 100% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg); }
  21%, 81% {
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg); }
  22%, 82% {
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg); }
  61% {
    -webkit-transform: skew(35deg);
    transform: skew(35deg); }
  62% {
    -webkit-transform: skew(-15deg, -8deg);
    transform: skew(-15deg, -8deg); }
  65% {
    -webkit-transform: skew(15deg, -8deg);
    transform: skew(15deg, -8deg); }
  70% {
    -webkit-transform: skew(-65deg);
    transform: skew(-65deg); }
  74% {
    -webkit-transform: skew(15deg, -15deg);
    transform: skew(15deg, -15deg); } }

@keyframes glitch {
  0%, 20%, 33%, 60%, 64%, 66%, 69%, 73%, 75%, 90%, 93%, 100% {
    -webkit-transform: skew(0deg);
    transform: skew(0deg); }
  21%, 81% {
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg); }
  22%, 82% {
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg); }
  61% {
    -webkit-transform: skew(35deg);
    transform: skew(35deg); }
  62% {
    -webkit-transform: skew(-15deg, -8deg);
    transform: skew(-15deg, -8deg); }
  65% {
    -webkit-transform: skew(15deg, -8deg);
    transform: skew(15deg, -8deg); }
  70% {
    -webkit-transform: skew(-65deg);
    transform: skew(-65deg); }
  74% {
    -webkit-transform: skew(15deg, -15deg);
    transform: skew(15deg, -15deg); } 
}
.slogan {
	position: absolute;
    width:61%;
	right:20%;
	z-index:1;
	display: flex;
	justify-content: center;
	text-align: center; 
	bottom:12%;
}
.slogan img {
	animation: blink 0.3s ease-in-out infinite;
	max-width:100%; 
}
.slogan img.ac {
	-webkit-animation: glitch 1s linear infinite;
    animation: glitch 1s linear infinite;
}
@media(max-width:1920px){
	.yyly{bottom:0%;}
}
@media(max-width:1600px){
	.yyly{bottom:3%;}
	.video{width:12%;top:50%;}
}
@media(max-width:912px){
	.yyly{width:100%;right: 0%;transform: translate(0,0);top:auto;bottom:59%;}
	.slogan {
		 width:100%;right:0%;left:1.5%;bottom:8%;
	}
	.slogan img {
		max-width:96%; 
	}
	.video{top:60%;left:38%;width:100%;}
}
@media(max-width:820px){
	.yyly{bottom:62%;}
	.video{top:60%;left:37%;}
}
@media(max-width:768px){
	.yyly{bottom:62%;}
	.video{top:55%;left:37%;}
}
@media(max-width:600px){
	.yyly{bottom:58%;}
	.video{top:58%;left:32%;}
}
@media(max-width:540px){
	.yyly{bottom:63%;}
	.video{top:56%;left:35%;}
	.play{width:156px;height:66px;}
}
@media(max-width:480px){
	.yyly{bottom:58%;}
	.video{top:63%;left:35%;}
}
@media(max-width:431px){
	.yyly{bottom:52%;}
	.video{top:61%;left:31%;}
	.play{width:156px;height:66px;}
}
@media(max-width:415px){
	.yyly{bottom:52%;}
}
@media(max-width:376px){
	.yyly{bottom:58%;}
	.video{top:61%;left:33%;}
	.play{width:136px;height:58px;}
}
@media(max-width:360px){
	.yyly{bottom:52%;}
}
@media(max-width:320px){
	.yyly{bottom:62%;}
	.video{top:54%;left:29%;}
}
.main-height{opacity: 0;pointer-events: none;position: absolute;width:100%;top:0;left:0;}


/************** frame 2 ********************/
.sec2{position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;}
.sec2-title{position: absolute;left:20%;top:3%;z-index: 3;width:61%;text-align: center;}

.sec2-button{position: absolute;bottom:32%;z-index: 3;width:100%;display: flex;justify-content: center}
.sec2-button li{display: block;float: left;}
.sec2-button li a:hover{filter: brightness(1.2)}
.sec2-button li:nth-child(1){width:8%; margin-right:1%;}
.sec2-button li:nth-child(2){width:13%;margin-left:1%;margin-top: -1%}
.sec2-button li:nth-child(3){width:8%; margin-left:1%;}
.sec2-button img {
		max-width: 100%; 
	    animation: blink 0.3s ease-in-out infinite;
	}
@keyframes blink {
    0% {
        opacity: 1;
		filter: brightness(1.1);
    }

    100% {
        opacity: 1;
    }
}
.box-timeline{position: absolute;bottom:4%;z-index: 1;width:100%;display: flex;justify-content: center;color: #ffffff}
.timeline-share {
  display: inline-block;
  vertical-align: middle;
  margin-top: 6%;
  margin-right: 1.5%;
  width: 8%;
}
.timeline-get {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.timeline-get ul {
  position: relative;
  z-index: 2;
  width: 105%;
  text-align: left;
  top:210px;
  left:0;
}
.timeline-get ul li {
  display: inline-block;
  vertical-align: middle;
  width: 18%;
  margin: 0 1% 0 0;
  position: relative;
}

.timeline-get ul li a {
  position: relative;
  /* display: block; */
}
.timeline-get ul li a img:last-child {
  display: none;
}
.timeline-get ul li.active a img:nth-child(1){
  display: none;
}
.timeline-get ul li.active a img:nth-child(2){
  display: block;
}
.timeline-get ul li:hover .p5-tooltip{
  display: block;
}
.timeline-get .p5-tooltip{
  position: absolute;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  width: 200px;
  /* max-width: 200%; */
  display: none;
  top: -180px;
  left: -35px;
}
.timeline-get ul li.active  a .p5-tooltip img:nth-child(1),
.timeline-get ul li.active  a .p5-tooltip img:nth-child(2),
.timeline-get ul li a .p5-tooltip img:last-child{
  display: unset;
}
.timeline-water,
.timeline-water-active {
  position: absolute;
  top:15%;
  z-index: 1;
  transform: translateY(-50%);
}
.timeline-water {
  position: relative;
  display: table;
  margin: 7% auto 0;
  z-index: 1;
  max-width: 100%;
  height: 0vw;
}
.timeline-water-active {
  content: '';
    position: absolute;
    top:85px;
    left: 0;
    background: url(../images/p5-line.png) no-repeat left top;
    background-size: cover;
    width: 36%;
    height: 100%;
}
@media(max-width:912px){
	.sec2-title{left:0; top:8%;bottom:0;width:100%;}
	.sec2-button{bottom:47%;width:80%;left:10%}
	.sec2-button li:nth-child(1){width:24%; margin-right:1%;}
	.sec2-button li:nth-child(2){width:40%;margin-left:1%;margin-top: -1.8%}
	.sec2-button li:nth-child(3){width:24%; margin-left:1%;}
	.box-timeline{bottom:3%;}
	.timeline-get ul {
	  width: 100%;
	  text-align:center;
	  top:390px;
	  left:0;
	}
	.timeline-get ul li {
	  width: 22%;
	  margin:7% 3% 0 0;
	}
	.timeline-get ul li:nth-child(1) {
	  width: 22%;
	  margin:7% 3% 0 12%;
	}
	.timeline-get ul li:nth-child(2) {
	  width: 22%;
	  margin:7% 14% 0 3%;
	}
	.timeline-water-active {
	  top:15%;
	}
	.timeline-water {
	  margin: 7% auto 0;
	  max-width: 100%;
	  height: 0vw;
	}
	.timeline-water-active {
		top:118px;
		background:url(../images/p5-line-m.png) no-repeat top left;background-size:cover;
		width:100%;
		height:50%;
		left:0%;
	}
}
@media(max-width:854px){
	.timeline-get ul {
	  top:368px;
	}
	.timeline-water-active {
		top:108px;
	}
}
@media(max-width:820px){
	.sec2-button{bottom:45%;}
	.sec2-title{left:0; top:8%;bottom:0;width:100%;}
	.box-timeline{bottom:3%;}
	.timeline-get ul {
	  top:340px;
	}
	.timeline-get ul li {
	  width: 22%;
	  margin:5.5% 3% 0 0;
	}
	.timeline-get ul li:nth-child(1) {
	  width: 22%;
	  margin:5.5% 3% 0 12%;
	}
	.timeline-get ul li:nth-child(2) {
	  width: 22%;
	  margin:5.5% 14% 0 3%;
	}
	.timeline-water {
	  margin: 7% auto 0;
	  max-width:90%;
	}
	.timeline-water-active {
		top:94px;
	}
}
@media(max-width:800px){
	.box-timeline{bottom:5%;}
	.timeline-get ul {
	  top:330px;
	}
	.timeline-get ul li {
	  width: 22%;
	  margin:5% 3% 0 0;
	}
	.timeline-get ul li:nth-child(1) {
	  width: 22%;
	  margin:5% 3% 0 12%;
	}
	.timeline-get ul li:nth-child(2) {
	  width: 22%;
	  margin:5% 14% 0 3%;
	}
	.timeline-water {
	  margin: 7% auto 0;
	  max-width:90%;
	}
	.timeline-water-active {
		top:92px;
	}
}
@media(max-width:768px){
	.sec2-button{bottom:48%;}
	.sec2-title{left:5%; top:10%;bottom:0;width:90%;}
	.box-timeline{bottom:4%;}
	.timeline-get ul {
	  top:310px;
	}
	.timeline-get ul li {
	  width: 20%;
	  margin:7% 3% 0 0;
	}
	.timeline-get ul li:nth-child(1) {
	  width: 20%;
	  margin:7% 3% 0 15%;
	}
	.timeline-get ul li:nth-child(2) {
	  width: 20%;
	  margin:7% 17% 0 3%;
	}
	.timeline-water {
	  margin: 7% auto 0;
	  max-width:90%;
	}
	.timeline-water-active {
		top:88px;
	}
}
@media(max-width:600px){
	.sec2-button{bottom:50%;}
	.sec2-title{left:5%; top:9%;bottom:0;width:90%;}
	.box-timeline{bottom:5%;}
	.timeline-get ul {
	  top:250px;
	}
	.timeline-get ul li {
	  width: 20%;
	  margin:9% 3% 0 0;
	}
	.timeline-get ul li:nth-child(1) {
	  width: 20%;
	  margin:9% 3% 0 15%;
	}
	.timeline-get ul li:nth-child(2) {
	  width: 20%;
	  margin:9% 17% 0 3%;
	}
	.timeline-water {
	  margin: 7% auto 0;
	  max-width: 100%;
	}
	.timeline-water-active {
		top:76px;
	}
}
@media (max-width:540px){
	.sec2-title{left:0; top:8%;bottom:0;width:100%;}
	.sec2-button{bottom:48%;width:80%;left:10%}
	.box-timeline{bottom:6%;}
	.timeline-get ul {
	  top:198px;
	}
	.timeline-get ul li {
	  width:18%;
	  margin:6% 3% 0 0;
	}
	.timeline-get ul li:nth-child(1) {
	  width:18%;
	  margin:6% 3% 0 18%;
	}
	.timeline-get ul li:nth-child(2) {
	  width:18%;
	  margin:6% 20% 0 3%;
	}
	.timeline-water {
	  margin: 7% auto 0;
	  max-width:80%;
	}
	.timeline-water-active {
		top:54px;
	}
}
@media (max-width:480px){
	.sec2-title{left:0%; top:9%;bottom:0;width:100%;}
	.sec2-button{bottom:44%;width:90%;left:5%}
	.box-timeline{bottom:5%;}
	.timeline-get ul {
	  top:210px;
	  left:0;
	}
	.timeline-get ul li {
	  width: 23%;
	  margin:7% 3% 0 0;
	  position: relative;
	}
	.timeline-get ul li:nth-child(1) {
	  width: 23%;
	  margin:7% 3% 0 10%;
	  position: relative;
	}
	.timeline-get ul li:nth-child(2) {
	  width: 23%;
	  margin:7% 12% 0 3%;
	  position: relative;
	}
	.timeline-water {
	  margin: 7% auto 0;
	  max-width: 100%;
	}
	.timeline-water-active {
		top:60px;
	}
}
@media (max-width:451px){
	.timeline-get ul {
	  top:197px;
	}
	.timeline-water-active {
		top:56px;
	}
}
@media (max-width:431px){
	.sec2-title{left:5%; top:8%;bottom:0;width:90%;}
	.timeline-get ul {
	  top:187px;
	}
	.timeline-water-active {
		top:55px;
	}
}
@media (max-width:428px){
	.timeline-get ul {
	  top:190px;
	}
	.timeline-water-active {
		top:55px;
	}
}
@media (max-width:415px){
	.sec2-title{left:5%; top:10%;bottom:0;width:90%;}
	.timeline-get ul {
	  top:185px;
	}
	.timeline-water-active {
		top:53px;
	}
}
@media (max-width:391px){
	.timeline-get ul {
	  top:173px;
	}
	.timeline-water-active {
		top:49px;
	}
}
@media (max-width:376px){
	.timeline-get ul {
	  top:164px;
	}
	.timeline-water-active {
		top:48px;
	}
}
@media (max-width:361px){
	.timeline-get ul {
	  top:160px;
	}
	.timeline-water-active {
		top:46px;
	}
}
@media (max-width:320px){
	.sec2-title{top:11%;}
	.sec2-button{bottom:50%;}
	.timeline-get ul {
	  top:140px;
	}
	.timeline-water-active {
		top:40px;
	}
}

/************** frame 3 ********************/
.sec3{position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;}

.sec5-bn-genaral{position:absolute; width:100%; display: flex; flex-wrap: wrap; justify-content: center;z-index: 999;top: 10%;}
.sec5-bn-genaral a:hover{filter: brightness(1.2)}

.slide-frame3{position: absolute;z-index: 3;width:100%;top: 0}
.class-t {margin-top:1%;left:25%;width:50%;text-align: center;position:absolute;z-index: 2;}

.class_swiper{ position:absolute; width:100%;max-height:100vh;z-index: 1;top: 0}
.class_swiper .swiper-slide{ position:relative;width:100%;max-height:1440px;}
.class_cont{ position:absolute;width:100%;max-height:1440px; left:0; top:0;z-index:2;}
.class_img{position:relative; z-index:2;margin:5% 0 0 8%;width:90%}
.class-title{margin:25% 0 0 87%; z-index:4; width:10%; position: absolute;}
.class_bg{ position:absolute; z-index:1;background-size:cover;}
.class_bg_yeulinh{width:100%;height: 100vh;z-index:1;background: url("../images/class/bg-yeulinh.jpg")no-repeat center center;background-size:cover;}
.class_bg_nhangioi{width:100%;height: 100vh; z-index:1;background: url("../images/class/bg-nhangioi.jpg")no-repeat center center;background-size:cover;}
.class_bg_cuuthien{width:100%;height: 100vh;z-index:1;background: url("../images/class/bg-cuuthien.jpg")no-repeat center center;background-size:cover;}
.class_bg_cuclac{width:100%;height: 100vh;z-index:1;background: url("../images/class/bg-cuclac.jpg")no-repeat center center;background-size:cover;}

.class_opa_box{ position:absolute; width:100%; height:auto; z-index:4;top:90%}
.class_tab{position:absolute; width:100%; display: flex; flex-wrap: wrap; justify-content: center;}
.class_tab li{width:76px; height:84px;margin: 0 1% 0 0; cursor:pointer;}
#class_tab_yeulinh{ background:url("../images/class/tab-yeulinh.png") no-repeat; background-size: 100%}
#class_tab_yeulinh.on{ background:url("../images/class/tab-yeulinh-hover.png") no-repeat;background-size: 100%}
#class_tab_nhangioi{ background:url("../images/class/tab-nhangioi.png") no-repeat;background-size: 100%}
#class_tab_nhangioi.on{ background:url("../images/class/tab-nhangioi-hover.png") no-repeat;background-size: 100%}
#class_tab_cuuthien{ background:url("../images/class/tab-cuuthien.png") no-repeat;background-size: 100%}
#class_tab_cuuthien.on{ background:url("../images/class/tab-cuuthien-hover.png") no-repeat;background-size: 100%}
#class_tab_cuclac{ background:url("../images/class/tab-cuclac.png") no-repeat;background-size: 100%}
#class_tab_cuclac.on{ background:url("../images/class/tab-cuclac-hover.png") no-repeat;background-size: 100%}

@media(max-width:912px){
	.sec5-bn-genaral{width:100%;top:75%;}
	.class-t{margin-top:12%;left:0;width:100%;}
	.class_swiper{height:1900px;}
	.class_swiper .swiper-slide{width:100%; height:1900px;}
	.class_cont{width:100%; height:1900px; left:0; top:0;z-index:2;}
	.class_img{margin:13% 0 0 0;width:100%}
	.class-title{margin:25% 0 0 41%;width:20%;}
	.class_opa_box{background-size:75% 100%;top:80%}
	.class_tab li{width:102px; height:136px;margin:1% 1% 0 3%;}
}
@media(max-width:854px){

}
@media(max-width:820px){

}
@media(max-width:800px){
	
}
@media(max-width:768px){
	
}
@media(max-width:600px){
	
	.class_tab li{width:79px; height:84px; margin: 0 2% 0 0;}
}
@media(max-width:541px){
	.sec5-bn-genaral{width:40%;top:75%;left:31%}
	.class_opa_box{background-size:75% 100%;top:80%}
	.class_tab li{width:69px; height:74px; margin: 0 2% 0 0;}
}
@media only screen and (max-width :480px) {
	.class_img{margin:18% 0 0 0;}
	.class_opa_box{background-size:75% 100%;top:80%}
	.class_tab li{width:57px; height:66px;margin:2% 2.5% 0 2.5%;}
}
@media only screen and (max-width :451px) {
	.class_opa_box{background-size:75% 100%;top:80%}
	.class_tab li{width:57px; height:66px;margin:2% 2.5% 0 2.5%;}
}
@media only screen and (max-width :431px) {
	.class_opa_box{background-size:75% 100%;top:72%}
	.class_tab li{width:57px; height:66px;margin:2% 2.5% 0 2.5%;}
}
@media only screen and (max-width :415px) {
	.class-t{margin-top:16%;}
	.class_swiper{height:1000px;}
	.class_swiper .swiper-slide{height:1000px;}
	.class_cont{height:1000px;}
	.class_img{margin:22% 0 0 0;}
	.class_opa_box{background-size:75% 100%;top:60%}
}
@media only screen and (max-width :391px) {
	.class_opa_box{background-size:75% 100%;top:60%}
}
@media only screen and (max-width :376px) {
	.class_opa_box{background-size:75% 100%;top:70%}
}
@media only screen and (max-width :360px) {
	
}
@media only screen and (max-width :320px) {
	.class_swiper{height:800px;}
	.class_swiper .swiper-slide{height:800px;}
	.class_cont{height:800px;}
	.class_img{margin:18% 0 0 0;}
	.class_opa_box{background-size:75% 100%;top:70%}
	.class_tab li{width:40px; height:60px;margin:2% 1% 0 3.5%;}
}
.center-align{
    margin: 0 auto 0 auto;
}

/************** frame 4 ******************/
.sec4{position: absolute;width:100%;height: 100%;top:0;left:0;overflow: hidden;}
.sec4-title{position: absolute;left:23%;top:3%;z-index:3;width:55%;text-align: center;}
.sec4-button{position: absolute;bottom:7%;z-index: 3;width:100%;display: flex;justify-content: center}
.sec4-button li{display: block;float: left;width:12%;margin-left:2%;margin-right:2%;}
.sec4-button li a:hover{filter: brightness(1.2)}
.sec4-button img {
	max-width: 100%; 
	animation: blink 0.3s ease-in-out infinite;
}
@media(max-width:912px){
	.sec4-title{left:0;top:8%;width:100%;}
	.sec4-button{bottom:13%}
	.sec4-button li{width:26%;margin-left:3%;margin-right:3%;}
}


/************** frame 5 *******************/
.sec5{position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;}
.sec5-title{position: absolute;left:23%;top:3%;z-index:3;width:55%;text-align: center;}

.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl{width:100%;padding-right:5px;padding-left:5px;margin-right:auto;margin-left:auto}
@media (min-width:541px){.container,.container-sm{max-width:540px;}}
@media (min-width:576px){.container,.container-sm{max-width:576px}}
@media (min-width:768px){.container,.container-md,.container-sm{max-width:768px}}
@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}
@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1340px}}

.product {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  bottom:-5%;
}
.product__slider-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product__slider-box-text {
	width:1330px;
	height: 200px;
	position: absolute;
	z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
	flex-wrap: wrap;
	bottom: 0;
	font-size:16px;
	line-height:25px;
	background-color: rgb(0 0 0 / 0.5);
  padding:10px 20px 10px 20px;
}

.product__slider-box-text span {
	font-size:20px;
}
.product__slider-box img {
  width:1500px;
	height: auto;
  border-radius:0 20px 0 20px;
	background-size: cover;
}
.nav__slider {
  width: 1200px;
  margin: auto;
  margin-top: 20px;
  background-color: rgb(0 0 0 / 0.5);
  padding: 20px;
}
.nav__slider-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav__slider img {
  width: 200px;
  border-radius: 5px;
}
.slick-dots li.slick-active button:before {
  color: #fff;
}
.slick-dots li button:before {
  color: #fff;
}
@media(max-width:912px){
	.sec5-title{left:5%;top:9%;width:90%;}
	.product__slider-box-text {
		width:710px;
		height: 200px;
		font-size:16px;
		line-height:25px;
	}
	.product__slider-box img {
  		width:100%;
		height:800px;
  		border-radius:0 20px 0 20px;
		background-size:contain;
	}
	.nav__slider {
	  max-width:612px;
	  margin-top: 20px;
	  background-color: rgb(0 0 0 / 0.5);
	  padding: 20px;
	}
	.nav__slider img {
	  width: 100px;
	  border-radius: 5px;
	}	
}

@media(max-width:768px){
	.product__slider-box-text {
		width:532px;
		height: 200px;
		font-size:16px;
		line-height:25px;
	}
	.product__slider-box img {
		height:600px;
	}
}
@media(max-width:600px){
	.nav__slider {
	  max-width:450px;
	}
	.nav__slider img {
	  width: 80px;
	  border-radius: 5px;
	}
}
@media(max-width:541px){
	.sec5-title{left:5%;top:7%;width:90%;}
	.product__slider-box-text {
		width:400px;
		height:150px;
		font-size:12px;
		line-height:20px;
		padding:10px 10px 10px 10px;
	}
	.product__slider-box img {
		height:450px;
	}
	.nav__slider {
	  max-width:450px;
	  margin-top:10px;
	  padding:10px;
	}
}
@media(max-width:480px){
	.product__slider-box-text {
		width:444px;
		font-size:12px;
		line-height:18px;
	}
	.product__slider-box-text span {
		font-size:14px;
	}
	.product__slider-box img {
		height:500px;
	}
	.nav__slider {
	  max-width:450px;
	}
}
@media(max-width:451px){
	.sec5-title{left:5%;top:10%;width:90%;}
	.product {
	  bottom:-11%;
	}
	.product__slider-box-text {
		width:400px;
		font-size:12px;
	}
	.product__slider-box img {
		height:450px;
	}
	.nav__slider {
	  max-width:400px;
	}
	.nav__slider img {
	  width:70px;
	  border-radius: 5px;
	}
}
@media(max-width:431px){
	.product__slider-box-text {
		width:400px;
		font-size:12px;
	}
	.nav__slider {
	  max-width:380px;
	  margin-top:10px;
	  padding:10px;
	}
}
@media(max-width:415px){
	.product__slider-box-text {
		width:382px;
	}
	.product__slider-box img {
		height:430px;
	}
	.nav__slider {
	  max-width:350px;
	}
	.nav__slider img {
	  width:50px;
	  border-radius: 5px;
	}
}
@media(max-width:391px){
	.product__slider-box-text {
		width:380px;
		height:150px;
	}
	.product__slider-box img {
		height:430px;
	}
	.nav__slider {
	  max-width:320px;
	}
}
@media(max-width:376px){
	.product__slider-box-text {
		width:360px;
		height:140px;
		font-size:10px;
		line-height:15px;
	}
	.product__slider-box img {
		height:350px;
	}
	.product__slider-box-text span {
		font-size:12px;
	}
}
@media(max-width:361px){
	.product__slider-box-text {
		width:284px;
	}
	.product__slider-box img {
		height:320px;
	}
	.nav__slider {
	  max-width:300px;
	}
}
@media(max-width:320px){
	.sec5-title{left:5%;top:11%;width:90%;}
	.product {
	  bottom:-9%;
	}
	.product__slider-box-text {
		width:240px;
		height:120px;
		font-size:9px;
		line-height:13px;
	}
	.product__slider-box img {
		height:270px;
	}
	.nav__slider {
	  max-width:250px;
	}
	.nav__slider img {
	  width:30px;
	  border-radius: 5px;
	}
}
/************** frame 6 ********************/
.sec6{position: absolute;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;}
.sec6-title{position: absolute;left:30%;top:5%;z-index: 3;width:40%;text-align: center;}
.slide-frame6{position: absolute;left:15%;bottom:80%;z-index: 3;width:70%;}
/* slide server pc*/
.features__wrapper{position:relative}
.features__carousel{position:absolute;width:100%;left:0;top:0}
.features__carousel .swiper-container .swiper-wrapper .swiper-slide,.features__carousel .swiper-container .swiper-wrapper .swiper-slide img{width:1128px;height:648px}
.features__carousel .swiper-container .swiper-wrapper .swiper-slide img{transition:all .4s}
.features__carousel .swiper-container .swiper-wrapper .swiper-slide-next>img{opacity:.8;filter:brightness(20%)}
.features__carousel .swiper-container .swiper-wrapper .swiper-slide-prev>img{opacity:.8;filter:brightness(20%)}
.features__carousel .swiper-pagination{width:100%;bottom:-50px}
.features__carousel .swiper-pagination-bullet{width:25px;height:5px;background:#ffffff;margin:0 5px;border-radius: 0}
.features__carousel .swiper-pagination-bullet-active{background:#fff109;width:42px;height:5px;}
.features__carousel .swiper-button-next{background:none; right:30px}
.features__carousel .swiper-button-next:after{display:block}
.features__carousel .swiper-button-next .slide-next{background:url(../images/slideimg/slide_next.jpg)  no-repeat; background-size: contain;width:57px;height:57px;}
.features__carousel .swiper-button-prev{background:none; left:0}
.features__carousel .swiper-button-prev:after{display:none}
.features__carousel .swiper-button-prev .slide-prev{background:url(../images/slideimg/slide_pre.jpg)  no-repeat;background-size: contain;width:57px;height:57px}
/* slide server mobile*/
@media only screen and (max-width: 912px) {
	.sec6-title{left:2%;top:15%;width:100%;}
	.slide-frame6{left:2%;bottom:75%;width:96%;}
	.features__carousel .swiper-container .swiper-wrapper .swiper-slide,.features__carousel .swiper-container .swiper-wrapper .swiper-slide img{width:100%;height:auto}
	.features__carousel .swiper-button-next{background:none; right:10px}
	.features__carousel .swiper-button-next .slide-next{width:62px;height:65px;}
	.features__carousel .swiper-button-prev{background:none; left:-20px}
	.features__carousel .swiper-button-prev .slide-prev{width:62px;height:65px}
}
@media only screen and (max-width:600px) {
	.features__carousel .swiper-button-next .slide-next{width:62px;height:65px;}
	.features__carousel .swiper-button-prev{background:none; left:-20px}
	.features__carousel .swiper-button-prev .slide-prev{width:62px;height:65px}
}
@media only screen and (max-width:540px) {
	.features__carousel .swiper-pagination-bullet{width:24px;height:5px;}
	.features__carousel .swiper-pagination-bullet-active{width:42px;height:5px;}
	.features__carousel .swiper-button-next{background:none; right:0px}
	.features__carousel .swiper-button-next .slide-next{width:42px;height:45px;}
	.features__carousel .swiper-button-prev{background:none; left:-15px}
	.features__carousel .swiper-button-prev .slide-prev{width:42px;height:45px}
}
@media only screen and (max-width:480px) {
	.features__carousel .swiper-button-next{background:none; right:-5px}
	.features__carousel .swiper-button-next .slide-next{width:32px;height:35px;}
	.features__carousel .swiper-button-prev{background:none; left:-10px}
	.features__carousel .swiper-button-prev .slide-prev{width:32px;height:35px}
}

/***************** FOOTER ****************/

.foot{position: fixed;width: 100%;z-index: 9;background: url("../images/footer.png")no-repeat top center;background-size:cover;bottom: -80%;transition: all 1s ease; display: flex; flex-direction: row; justify-content: center; margin: 0 auto; padding:3% 0 1% 20%;}
.foot.active{bottom: 0;}
.foot img{max-height: 69px;}
.foot-left{ width: 16%; margin:1% 0 0 0}
.foot-left a{display: inline-block;margin: 0 5px;width: 217px;height: 69px;background: url(../images/vtc.png)no-repeat;background-size: 100% 100%;}
.foot-right{width: 50%; color: #ffffff;font-size:12px; line-height: 18px; text-align: left}
.foot-right a{color: #fee791;}
.foot-right a:hover{color: #d8ad0c;}
@media(max-width:912px){
	.foot{bottom: -80%;margin: 0 auto; padding:3% 0 1% 0;}
	.foot-left{ width: 26%; margin:1% 0 0 0}	
}
@media(max-width:820px){
	.foot-left{margin:3% 0 0 0}
	.foot-left a{margin: 0 5px;width: 217px;height: 69px;background-size: 80% 80%;}
}
@media(max-width:600px){
	.foot{flex-direction: column;padding: 1% 0 1% 0;}
	.foot-left{width: 100%;margin:0% 0 0 0; text-align: center;}
	.foot-left a{margin: 0 0 0 5%;width: 180px;height: 59px;}
	.foot-right{width: 100%;text-align: center}
}
@media(max-width:540px){
	.foot{flex-direction: column;padding:3% 0 1% 0;}
	.foot-left a{width: 137px;height: 49px;}
	.foot-right{font-size:11px; line-height: 14px; }
}
@media(max-width:415px){
	.foot-right{font-size:10px; line-height: 13px; }
}
@media(max-width:376px){
	.foot-left a{margin: 0 0 0 5%;width: 130px;height: 43px;}
}
@media(max-width:320px){
	.foot-right{font-size:9px; line-height: 12px; }
}



.nav-bot{display: none;position: fixed;width: 100%;left: 0;bottom: 0;padding: 5px 0; background: rgba(0,0,0,0.5);}
.nav-bot a{width: 33%;margin-right: 0.5%; float: left;text-align: center;}
.nav-bot .store-btn a span{font-size: 1.2rem;}
.nav-bot .top{position: absolute;bottom: 100%;right: 26%;width: 40px;}

@media(max-width:912px){
	.nav-bot a.fc-fb{margin-right: 0;}
    .nav-bot{display: block;}
	.fc .fc-fb{position: absolute;right: 85%;bottom: 0;display: none;}
	.fc .fc-fb:after{display: none;}
}
@media(max-width:820px){
	.fc{width: 12%;transform: translate(0,-23%);}	
}
@media(max-width:540px){
	.nav-bot a.fc-fb{margin-right: 0;}
    .nav-bot{display: block;}
}
@-webkit-keyframes b { 0% {-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
    to { -o-transform: rotate(1turn); -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); }}
@-moz-keyframes b {  0% {-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
    to { -o-transform: rotate(1turn); -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn); }}
@-o-keyframes b {  0% {-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg)}
    to { -o-transform: rotate(1turn); -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn) }}
@-ms-keyframes b {  0% {-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);
    transform: rotate(0deg)}
    to { -o-transform: rotate(1turn); -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn) }}
@keyframes b {  0% {-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg)}
    to { -o-transform: rotate(1turn); -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -ms-transform: rotate(1turn); transform: rotate(1turn) }}

@-webkit-keyframes b1 { 0% {-o-transform: rotate(0deg) translate(-50%,-50%);-webkit-transform: rotate(0deg) translate(-50%,-50%);-moz-transform: rotate(0deg) translate(-50%,-50%);-ms-transform: rotate(0deg) translate(-50%,-50%);transform: rotate(0deg) translate(-50%,-50%);}
    to { -o-transform: rotate(1turn) translate(-50%,-50%); -webkit-transform: rotate(1turn) translate(-50%,-50%); -moz-transform: rotate(1turn) translate(-50%,-50%); -ms-transform: rotate(1turn) translate(-50%,-50%); transform: rotate(1turn) translate(-50%,-50%); }}

@keyframes sg { from {left:0;}
    to {left:100%;}}
@-webkit-keyframes sg /* Safari 和 Chrome */ { from {left:0;}
    to {left:100%;}}
@-moz-keyframes sg /* Firefox */ { from {left:0;}
    to {left:100%;}}
@-o-keyframes sg /* Opera */ { from {left:0;}
    to {left:100%;}}


@keyframes zt { 0% {transform: scale(0.87);}
                   50% { transform: scale(1);  }
    100% {transform: scale(0.87);}}
@-webkit-keyframes zt /* Safari 和 Chrome */ { 0% {-webkit-transform: scale(0.87);}
                   50% { -webkit-transform: scale(1); }
    100% {-webkit-transform: scale(0.87);}}
@-moz-keyframes zt /* Firefox */ { 0% {-moz-transform: scale(0.87);}
                   50% { -moz-transform: scale(1); }
    100% {-moz-transform: scale(0.87);}}
@-o-keyframes zt /* Opera */ { 0% {-o-transform: scale(0.87);}
                   50% { -o-transform: scale(1); } 
    100% {-o-transform: scale(0.87);}}


@keyframes zt1 { 0% {transform: scale(0.87);}
                   50% { transform: scale(1);  }
    100% {transform: scale(0.87);}}
@-webkit-keyframes zt1 /* Safari 和 Chrome */ { 0% {-webkit-transform: scale(0.87);}
                   50% { -webkit-transform: scale(1); }
    100% {-webkit-transform: scale(0.87);}}
@-moz-keyframes zt1 /* Firefox */ { 0% {-moz-transform: scale(0.87);}
                   50% { -moz-transform: scale(1); }
    100% {-moz-transform: scale(0.87);}}
@-o-keyframes zt1 /* Opera */ { 0% {-o-transform: scale(0.87);}
                   50% { -o-transform: scale(1); } 
    100% {-o-transform: scale(0.87);}}



@-webkit-keyframes error-swing {
    0% {
        -webkit-transform: rotate(1deg)
    }

    100% {
        -webkit-transform: rotate(-2deg)
    }
}

@-moz-keyframes error-swing {
    0% {
        -moz-transform: rotate(1deg)
    }

    100% {
        -moz-transform: rotate(-2deg)
    }
}

@keyframes error-swing {
    0% {
        transform: rotate(1deg)
    }

    100% {
        transform: rotate(-2deg)
    }
}

@keyframes zt2 { 0% {transform: scale(1.15) translate(-50%,0);transform-origin:0 50%;}
                   50% { transform: scale(1) translate(-50%,0); transform-origin:0 50%; }
    100% {transform: scale(1.15) translate(-50%,0);transform-origin:0 50%;}}
@-webkit-keyframes zt2 /* Safari 和 Chrome */ { 0% {-webkit-transform: scale(1.15) translate(-50%,0);-webkit-transform-origin:0 50%;}
                   50% { -webkit-transform: scale(1) translate(-50%,0);-webkit-transform-origin:0 50%; }
    100% {-webkit-transform: scale(1.15) translate(-50%,0);-webkit-transform-origin:0 50%;}}
@-moz-keyframes zt2 /* Firefox */ { 0% {-moz-transform: scale(1.15) translate(-50%,0);-moz-transform-origin:0 50%;}
                   50% { -moz-transform: scale(1) translate(-50%,0);-moz-transform-origin:0 50%; }
    100% {-moz-transform: scale(1.15) translate(-50%,0);-moz-transform-origin:0 50%;}}
@-o-keyframes zt2 /* Opera */ { 0% {-o-transform: scale(1.15) translate(-50%,0);-o-transform-origin:0 50%;}
                   50% { -o-transform: scale(1) translate(-50%,0); -o-transform-origin:0 50%;} 
    100% {-o-transform: scale(1.15) translate(-50%,0);-o-transform-origin:0 50%;}}

.fadeBig {-webkit-animation-name: fadeBig;animation-name: fadeBig;}
@keyframes fadeBig{ 0% {transform: scale(1.55);-webkit-transform: scale(1.55);opacity: 0;}
	100% {transform: scale(1);-webkit-transform: scale(1);opacity: 1;}
}

@keyframes fadebigsmall{ 0% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 0;}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}


.an-de-1{
	animation-delay:0.3s;
}


/* ----------------------------------- MENU RIGHT ---------------------------------------*/

@keyframes anim2{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}
20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}
@-webkit-keyframes anim2{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}
20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}
@keyframes anim4{from{transform:scale(1,1);opacity:0.5;}to{transform:scale(1.8,1.8);opacity:0;}}
@-webkit-keyframes anim4{from{transform:scale(1,1);opacity:0.5;}to{transform:scale(1.8,1.8);opacity:0;}}
@keyframes wts {
  0% {
    top: 7px;
  }
  100% {
    top: 70%;
  }
}
.nav_right {
  display: block;
  position: fixed;
  z-index: 999;
  right: -135px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width:174px;
  height:400px;
  background-image: url(../images/sprite.png);
  background-position: 0 0px;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.nav_right.open {
  right: 0;
}
@media (max-width: 1024px) {
  .nav_right {
    display: none;
  }
}
.nav_right .qr_code span {
  position: relative;
  display: block;
  margin:114px auto 0 47px;
  width: 111px;
  height: 111px;
}
.nav_right .qr_code span i {
  position: absolute;
  left: 1px;
  top: 10px;
  width: 107px;
  height: 8px;
  background: url(../images/wt.png) no-repeat;
  animation: wts 1s infinite alternate linear;
}
.nav_right .qr_code span img {
  position: absolute;
  top: 0;
  left: 0;
}
.nav_right ul.buttai {
  width: 124px;
  height: auto;
  position: relative;
  margin:5px 0 0 40px;
}
.nav_right ul.buttai li {
  float: left;
  margin:15px 0 0 0;
}
.nav_right ul.buttai .app-info__install--pc > a {
  display: block;
  text-indent: -9999px;
}
.nav_right ul.buttai .app-info__install--pc > a {
  height: 35px;
  width: 124px;
}
.button-appstore a {
  background-image: url("../images/sprite.png") !important;
  background-position: -174px -35px !important;
}
.button-appstore:hover a {
  background-image: url("../images/sprite.png") !important;
  background-position: -174px 0 !important;
}
.button-googleplay a {
  background-image: url("../images/sprite.png") !important;
  background-position: -174px -105px !important;
}
.button-googleplay:hover a {
  background-image: url("../images/sprite.png") !important;
  background-position: -174px -70px !important;
}
.button-apk a {
  background-image: url("../images/sprite.png") !important;
  background-position: -174px -175px !important;
}
.button-apk:hover a {
  background-image: url("../images/sprite.png") !important;
  background-position: -174px -140px !important;
}
.button-nox a {
  background-image: url("../images/sprite.png") !important;
  background-position: -174px -266px !important;
}
.button-nox:hover a {
  background-image: url("../images/sprite.png") !important;
  background-position: -174px -228px !important;
}
.nav_right  .gift_code{position:relative;width:109px;height:102px;animation:anim2 3s ease-in-out infinite alternate;display:block;background:url("../images/giftcode.png")no-repeat bottom;top:180px;left:48px;}
.nav_right .gift_code:after{position:absolute;content:'';width:100%;height:100%;left:0;top:0;right:0;bottom:0;margin:auto;background:url("../images/giftcode.png")no-repeat bottom;opacity:0;}
.nav_right .gift_code:hover:after{animation:anim4 0.6s ease-in-out;}

.nav_right .i_control {
  width:26px;
  height:34px;
  background: url(../images/i_close_nav_right.png) no-repeat center center;
  background-size: 100%;
  position: absolute;
  top:220px;
  left:8px;
  cursor: pointer;
}
.nav_right .i_control.i_control_active {
  left:8px;
  background: url(../images/i_open_nav_right.png) no-repeat center center;
}


/*==============================POPUP===================================*/
.popup {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.popup .content-popup {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.popup .wrapper-popup2 {
  min-width: 320px;
  width: 100%;
  height: 260px;
  background: url(../images/pop-m.png) no-repeat center center;
  background-size: 100% 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.popup .wrapper-popup3 {
  min-width: 320px;
  width: 100%;
  height:420px;
  background: url("../images/pop2-m.png") no-repeat center center;
  background-size: 100% 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media only screen and (min-width: 360px) {
	.popup .wrapper-popup2{
		min-width: 360px;
		height: 290px;
	}
	.popup .wrapper-popup3 {
		min-width: 360px;
		height: 460px;
	}
}
@media only screen and (min-width:375px) {
	.popup .wrapper-popup2{
		min-width: 375px;
		height: 320px;
	}
	.popup .wrapper-popup3 {
		min-width: 360px;
		height: 460px;
	}
}
@media only screen and (min-width: 414px) {
  .popup .wrapper-popup2{
    min-width: 414px;
    height: 350px;
  }
	.popup .wrapper-popup3 {
		 min-width: 414px;
    	height:530px;
	}
}
@media only screen and (min-width:428px) {
  .popup .wrapper-popup2{
    min-width: 428px;
    height: 380px;
  }
	.popup .wrapper-popup3 {
		 min-width: 414px;
    	height:530px;
	}
}
@media only screen and (min-width:450px) {
  .popup .wrapper-popup2{
    min-width: 450px;
    height: 380px;
  }
	.popup .wrapper-popup3 {
		min-width: 450px;
    	height:550px;
	}
}
@media only screen and (min-width:480px) {
  .popup .wrapper-popup2{
    min-width: 480px;
    height:400px;
  }
	.popup .wrapper-popup3 {
		min-width: 480px;
    	height: 600px;
	}
}
@media only screen and (min-width: 540px) {
  .popup .wrapper-popup2{
    min-width: 540px;
    height: 450px;
  }
  .popup .wrapper-popup3 {
	min-width: 540px;
    height: 600px;
  }
}
@media only screen and (min-width: 600px) {
  .popup .wrapper-popup2{
    min-width: 600px;
    height: 500px;
  }
  .popup .wrapper-popup3 {
	min-width: 600px;
    height: 700px;
  }
}
@media only screen and (min-width: 768px) {
	.popup .wrapper-popup2{
    min-width: 768px;
    height: 650px;
  }
  .popup .wrapper-popup3 {
	min-width: 768px;
    height:800px;
  }
}
@media only screen and (min-width:912px) {
  .popup .wrapper-popup2{
      min-width: 900px;
	  height:700px;
  }
  .popup .wrapper-popup3 {
      min-width:912px;
	  height:1000px;
  }
}
@media only screen and (min-width: 1000px) {
  .popup .wrapper-popup2 {
      min-width:970px;
	  height:701px;
	  background: url(../images/pop.png) no-repeat center center;
  }
  .popup .wrapper-popup3 {
      min-width:970px;
	  height:790px;
	  background: url("../images/pop2.png") no-repeat center center;
  }
}
.popup .content-new-detail1 {
	height:330px;
	margin:10px 10px 60px 10px;
}
.popup .content-new-detail2 {
	height:350px;
	margin:5px 20px 60px 10px;
}
@media only screen and (min-width: 360px) {
	.popup .content-new-detail1 {
	    height:420px;
		margin:10px 10px 60px 10px;
  	}
	.popup .content-new-detail2 {
	    height:380px;
		margin:5px 25px 60px 10px;
  	}
}
@media only screen and (min-width: 375px) {
	.popup .content-new-detail1 {
	    height:400px;
		margin:10px 10px 60px 10px;
  	}
}
@media only screen and (min-width: 414px) {
	.popup .content-new-detail1 {
	    height:520px;
		margin:10px 10px 60px 10px;
  	}
	.popup .content-new-detail2 {
	    height:430px;
		margin:10px 25px 60px 10px;
  	}
}
@media only screen and (min-width: 430px) {
	.popup .content-new-detail1 {
	    height:520px;
		margin:10px 15px 60px 10px;
  	}
	.popup .content-new-detail2 {
	    height:400px;
		margin:20px 15px 60px 10px;
  	}
}
@media only screen and (min-width: 450px) {
	.popup .content-new-detail2 {
	    height:470px;
		margin:20px 15px 60px 10px;
  	}
	.popup .content-new-detail2 {
	    height:430px;
		margin:10px 25px 60px 10px;
  	}
}
@media only screen and (min-width: 480px) {
	.popup .content-new-detail1 {
	    height:580px;
		margin:10px 15px 60px 10px;
  	}
	.popup .content-new-detail2 {
	    height:490px;
		margin:10px 25px 60px 15px;
  	}
}
@media only screen and (min-width: 540px) {
	.popup .content-new-detail1 {
	    height:480px;
		margin:10px 15px 60px 10px;
  	}
	.popup .content-new-detail2 {
	    height:480px;
		margin:10px 35px 60px 15px;
  	}
}
@media only screen and (min-width: 600px) {
	.popup .content-new-detail1 {
	    height:660px;
		margin:10px 20px 0 20px;
  	}
	.popup .content-new-detail2 {
	    height:590px;
		margin:10px 30px 0 25px;
  	}
}
@media only screen and (min-width:768px) {
	.popup .content-new-detail2 {
		height:650px;
		margin:10px 50px 0 45px;
	}
}
@media only screen and (min-width: 912px) {
	.popup .content-new-detail1 {
	    height:930px;
     	margin: 20px 40px 0 40px;
  	}
	.popup .content-new-detail2 {
		height:830px;
		margin:10px 50px 0 45px;
	}
}
@media only screen and (min-width: 992px) {
	.popup .content-new-detail1 {
	    height: 630px;
     	margin: 20px 30px 0 360px;
  	}
	.popup .content-new-detail2 {
		height:620px;
		margin:20px 90px 0 60px;
	}
}
.popup .title-detail{
  	width:60%;
	background: none;
	margin: 0 auto;
	padding: 16px 0 5px 0;
}
.popup .title-detail4{
  	width:50%;
	background: none;
	margin: 0 auto;
	padding: 16px 0 5px 0;
}
.popup .title-detail2{
	background: none;
	margin: 0 auto;
	width:70%;
	padding:40px 0 10px 60px;
}
.popup .title-detail3{
	background: none;
	margin: 0 auto;
	width:55%;
	padding:40px 0 10px 70px;
}
@media only screen and (min-width: 414px) {
	.popup .title-detail{
		padding:24px 0 10px 0;
	}
	.popup .title-detail4{
		padding:24px 0 10px 0;
	}
}
@media only screen and (min-width: 428px) {
	.popup .title-detail{
		padding: 20px 0 10px 0;
	}
	.popup .title-detail4{
		padding: 20px 0 10px 0;
	}
	.popup .title-detail2{
		width:80%;
	    padding:60px 0 10px 90px;
  }
	.popup .title-detail3{
		width:60%;
	    padding:60px 0 10px 90px;
  }
}
@media only screen and (min-width: 450px) {
	.popup .title-detail{
		padding:30px 0 10px 0;
	}
	.popup .title-detail4{
		padding:30px 0 10px 0;
	}
	.popup .title-detail2{
		width:80%;
	    padding:50px 0 10px 90px;
  }
	.popup .title-detail3{
		width:60%;
	    padding:50px 0 10px 90px;
  }
}
@media only screen and (min-width: 480px) {
	.popup .title-detail{
		padding:30px 0 10px 0;
	}
	.popup .title-detail4{
		padding:30px 0 10px 0;
	}
	.popup .title-detail2{
		width:70%;
	    padding:60px 0 10px 90px;
  }
	.popup .title-detail3{
		width:50%;
	    padding:60px 0 10px 90px;
  }
}
@media only screen and (min-width: 540px) {
	.popup .title-detail{
		padding: 25px 0 10px 0;
	}
	.popup .title-detail4{
		padding: 25px 0 10px 0;
	}
	.popup .title-detail2{
		width:75%;
	    padding:70px 0 10px 110px;
  }
	.popup .title-detail3{
		width:55%;
	    padding:70px 0 10px 110px;
  }
}
@media only screen and (min-width: 768px) {
	.popup .title-detail{
		padding:35px 0 10px 0;
	}
	.popup .title-detail4{
		padding:35px 0 10px 0;
	}
	.popup .title-detail2{
		width:70%;
	    padding:90px 0 10px 150px;
  }
	.popup .title-detail3{
		width:50%;
	    padding:90px 0 10px 120px;
  }
}

@media only screen and (min-width: 1000px) {
  .popup .title-detail{
	  width:50%;
	  padding:40px 0 10px 0;
  }
  .popup .title-detail4{
	  width:30%;
	  padding:40px 0 10px 0;
  }
  .popup .title-detail2{
		width:70%;
		padding:112px 0 0 300px;
	}
	 .popup .title-detail3{
		width:55%;
		padding:112px 0 0 300px;
	}
}
.thele-text{
	margin-top: 0;
	line-height: 18px;
	font-weight: 500;
	font-size: 12px;
	color: #ffffff;
}
.thele-text p{
	padding: 5px 0 5px 0;
}
.thele-text span{
	font-size: 12px;
	color: #fff886;
}
.thele-text a{
	color: #fff886;
	text-decoration: none;
}
.thele-text a:hover{
	color: #fff886;
	text-decoration: none;
}
@media only screen and (min-width: 375px) {
	.thele-text{
		line-height: 22px;
		font-size: 14px;
	}
	.thele-text span{
		font-size: 14px;
	}
}
@media only screen and (min-width:480px) {
	.thele-text{
		line-height: 25px;
		font-size: 16px;
	}
	.thele-text span{
		font-size: 16px;
	}
}
@media only screen and (min-width:600px) {
	.thele-text{
		line-height: 25px;
		font-size: 16px;
	}
	.thele-text span{
		font-size: 16px;
	}
}
@media only screen and (min-width: 1024px) {
	.thele-text .text{
    	font-size: 20px;
    }
	.thele-text .text p{
		padding: 5px 0 5px 0;
	}
	.thele-text.text span{
		font-size: 18px;
		font-weight: bold;
	}	
}

/*---- close----*/
.popup .close-content {
  	position: absolute;
  	background: url(../images/close.png) no-repeat center top;
  	background-size: contain;
  	width:31px;
    height:31px;
    bottom:-28px;
    right:45%;
  	cursor: pointer;
  	z-index: 999;
}
.popup .close-content2 {
  	position: absolute;
  	background: url(../images/close.png) no-repeat center top;
  	background-size: contain;
  	width:31px;
    height:31px;
    bottom:-28px;
    right:45%;
  	cursor: pointer;
  	z-index: 999;
}
@media only screen and (min-width: 430px) {
  .popup .close-content {
  	width:35px;
    height:35px;
    bottom:-30px;
    right:45%;
  }
	.popup .close-content2 {
  	width:35px;
    height:35px;
    bottom:-30px;
    right:45%;
  }
}
@media only screen and (min-width: 540px) {
  .popup .close-content {
  	width:40px;
    height:40px;
    bottom:-35px;
    right:45%;
  }
	.popup .close-content2 {
  	width:40px;
    height:40px;
    bottom:-35px;
    right:45%;
  }
}
@media only screen and (min-width: 600px) {
  .popup .close-content {
  	width:45px;
    height:45px;
    bottom:-45px;
    right:45%;
  }
	.popup .close-content2 {
  	width:45px;
    height:45px;
    bottom:-45px;
    right:45%;
  }
}
@media only screen and (min-width: 768px) {
  .popup .close-content {
  	width:51px;
    height:51px;
    bottom:-65px;
    right:45%;
  }
	.popup .close-content2 {
  	width:51px;
    height:51px;
    bottom:-65px;
    right:45%;
  }
}
@media only screen and (min-width: 992px) {
  .popup .close-content {
  	width:51px;
    height:51px;
    top:50px;
    right:30px;
  }
  .popup .close-content2 {
  	width:51px;
    height:51px;
    top:40px;
    right:-40px;
  }
}

/*------------dang ky thong tin-----------*/
.regis-box{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
	width:78%;
	margin:0 11% 0 11%;
}
.login-box{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
	width: 63%;
	margin:0 2% 0 30%;
}
.thongbao-box{
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
	width:96%;
	margin:3% 2% 0 2%;
}
.regis-box .input,.login-box .input{
	width: 100%;
	height: 30px;
	background-color:#000000;
	border: 1px solid #423437;
	border-radius: 6px;
	margin:10px 0 3px 0;
}
.regis-box .input input,.login-box .input input{
	background:none;
	width: 100%;
	height: 30px;
	border: none;
	padding:0 10px 0 10px;
	text-align: center;
	color: #efefe1;
	font-size:12px;
	outline: none;
}
.regis-box .input input::placeholder, .login-box .input input::placeholder{
    color: #efefe1;text-align: center;font-weight: bold;
}
.regis-box a, .login-box a{
	color: #ffd73e;
}
.bt-nhan {
	display:flex;
	justify-content: center;
	width:148px;
	height:37px;
	background: url("../images/bt-pop.png") no-repeat left top;
	background-size: contain;
	margin:2% 0 0 25%;
	outline: none;
	vertical-align: middle;
	align-items: center;
	text-align: center;
	color: #ffffff;
	font-size: 14px;
}
.bt-dk {
	display:flex;
	justify-content: center;
	width:148px;
	height:37px;
	background: url("../images/bt-regis.png") no-repeat left top;
	background-size: contain;
	margin:4% 0 0 40%;
	outline: none;
	vertical-align: middle;
	align-items: center;
	text-align: center;
	color: #ffffff;
	font-size: 14px;
}
.bt-nhan:hover,.bt-dk:hover{
	filter:saturate(2);
	text-decoration: none;
	outline: none;
	color: #ffffff;
}
.thongbao-box{
		width: 65%;
		margin:1% 5% 5% 32%;
	}
.thongbao-box p{
	color: #8b8a7e;
	font-size: 12px;
	line-height:18px;
}
.thongbao-box span{
	color: #ffe827;
	font-size: 18px;
	line-height:18px;
}
.gift{
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	vertical-align: middle;
	width: 65%;
	margin:1% 5% 0 32%;
}
.gift p{
	color: #8b8a7e;
	font-size: 12px;
	line-height: 20px;
}
.gift t{
	width:75%;
	background-color:#000000;
	border: 1px solid #423437;
	padding:8px;
	text-align: center;
	color: #8b8a7e;
	margin:2% 0 0 12%;
}

@media only screen and (min-width:360px) {
	.regis-box{
		width: 70%;
		margin:0% 3% 0 16%;
	}
	.login-box{
		width: 55%;
		margin:2% 5% 0 33%;
	}
	.regis-box .input,.login-box .input{
		height: 37px;
		margin:5px 0 5px 0;
	}
	.regis-box .input input,.login-box .input input{
		height: 37px;
		padding:0 10px 0 10px;
	}
	.bt-nhan{
		width: 170px;
		height:45px;
		font-size: 16px;
		margin:3% 0 0 25%;
	}
	.bt-dk{
		width: 160px;
		height:45px;
		font-size: 16px;
		margin:5% 0 0 43%;
	}
	.thongbao-box{
		width: 65%;
		margin:1% 5% 5% 30%;
	}
	.thongbao-box p{
		font-size: 14px;
		line-height: 18px;
	}
	.thongbao-box span{
		font-size:20px;
		line-height: 32px;
	}
	.gift{
		width: 65%;
		margin:1% 5% 0 30%;
	}
	.gift p{
		font-size:14px;
		line-height: 20px;
	}
	.gift t{
		width:75%;
		padding:10px;
		margin:2% 0 0 12%;
	}
}
@media only screen and (min-width:414px) {
	.regis-box{
		width: 70%;
		margin:1% 3% 0 16%;
	}
	.login-box{
		width: 55%;
		margin:3% 5% 3% 33%;
	}
	.regis-box .input,.login-box .input{
		height: 38px;
		margin:10px 0 10px 0;
	}
	.regis-box .input input,.login-box .input input{
		height: 38px;
		padding:0 10px 0 10px;
	}
	.bt-nhan{
		width: 170px;
		height:45px;
		font-size: 16px;
		margin:3% 0 0 28%;
	}
	.bt-dk{
		width: 170px;
		height:45px;
		font-size: 16px;
		margin:3% 0 0 44%;
	}
	.thongbao-box{
		width:57%;
		margin:3% 10% 5% 33%;
	}
	.thongbao-box p{
		font-size: 16px;
		line-height: 21px;
	}
	.thongbao-box span{
		font-size:20px;
		line-height: 32px;
	}
	.gift{
		width:57%;
		margin:3% 10% 5% 33%;
	}
	.gift p{
		font-size:16px;
		line-height: 22px;
	}
	.gift t{
		width:75%;
		padding:13px;
		margin:2% 0 0 12%;
		font-size:16px;
	}
}
@media only screen and (min-width:450px) {
	.regis-box .input,.login-box .input{
		height:45px;
	}
	.regis-box .input input,.login-box .input input{
		height: 45px;
	}
	.bt-nhan{
		width: 160px;
		height: 46px;
		font-size: 14px;
	}
	.bt-dk{
		width: 180px;
		height: 46px;
		font-size: 14px;
		margin:3% 0 0 45%;
	}
}
@media only screen and (min-width:480px) {
	.regis-box{
		width: 70%;
		margin:2% 3% 0 16%;
	}
	.login-box{
		width: 55%;
		margin:6% 5% 0 35%;
	}
	.regis-box .input,.login-box .input{
		height: 45px;
		margin:10px 0 10px 0;
	}
	.regis-box .input input,.login-box .input input{
		height: 45px;
		font-size:12px;
	}
	.bt-nhan{
		width: 188px;
		height:55px;
		font-size:18px;
		margin:2% 0 0 27%;
	}
	.bt-dk{
		width: 188px;
		height:55px;
		font-size:18px;
		margin:3% 0 0 46%;
	}
	.thongbao-box{
		width: 50%;
		margin:5% 15% 5% 38%;
	}
	.thongbao-box p{
		font-size: 16px;
		line-height: 25px;
	}
	.thongbao-box span{
		font-size:20px;
		line-height: 32px;
	}
	.gift{
		width: 50%;
		margin:5% 15% 2% 38%;
	}
	.gift p{
		font-size:17px;
		line-height: 22px;
	}
	.gift t{
		width:100%;
		padding:10px;
		margin:2% 0 0 0;
		font-size:17px;
		line-height: 22px;
	}
}
@media only screen and (min-width:540px) {
	.regis-box{
		width: 70%;
		margin:2% 3% 0 16%;
	}
	.regis-box .input,.login-box .input{
		height: 47px;
		margin:10px 0 10px 0;
	}
	.regis-box .input input,.login-box .input input{
		height: 47px;
		font-size:14px;
	}
	.bt-nhan{
		width: 198px;
		height: 57px;
		font-size:20px;
		margin:2% 0 0 30%;
	}
	.bt-dk{
		width: 198px;
		height: 57px;
		font-size:20px;
		margin:3% 0 0 47%;
	}
}
@media only screen and (min-width:600px) {
	.regis-box{
		width: 55%;
		margin:5% 5% 0 35%;
	}
	.regis-box .input,.login-box .input{
		height: 55px;
	}
	.regis-box .input input,.login-box .input input{
		height: 55px;
		font-size:16px;
	}
	.bt-nhan{
		width: 208px;
		height: 60px;
		font-size: 20px;
		margin:3% 0 0 29%;
	}
	.bt-dk{
		width: 208px;
		height: 60px;
		font-size: 20px;
		margin:3% 0 0 46%;
	}
	.thongbao-box p{
		font-size: 20px;
		line-height: 32px;
	}
	.thongbao-box span{
		font-size:25px;
		line-height: 32px;
	}
	.gift p{
		font-size: 20px;
		line-height: 32px;
	}
	.gift t{
		width:75%;
		padding:13px;
		margin: 2% 0 0 12%;
	}
}
@media only screen and (min-width:768px) {
	.regis-box .input,.login-box .input{
		height:60px;
		margin:15px 0 15px 0;
	}
	.regis-box .input input,.login-box .input input{
		height:60px;
		font-size:22px;
	}
	.bt-nhan{
		width: 284px;
		height:71px;
		font-size:25px;
		margin:3% 0 0 33%;
	}
	.bt-dk{
		width:237px;
		height:75px;
		font-size:25px;
		margin:4% 0 0 47%;
	}
	.thongbao-box p{
		font-size: 20px;
		line-height: 32px;
	}
	.thongbao-box span{
		font-size: 30px;
		line-height: 32px;
	}
}
@media only screen and (min-width:912px) {
	.regis-box .input,.login-box .input{
		height:75px;
		margin:10px 0 10px 0;
	}
	.regis-box .input input,.login-box .input input{
		height:75px;
		font-size:22px;
	}
	.bt-nhan{
		width: 284px;
		height:71px;
		font-size:25px;
		margin:3% 0 0 33%;
	}
	.bt-dk{
		width:237px;
		height:75px;
		font-size:25px;
		margin:4% 0 0 47%;
	}
	.thongbao-box p{
		font-size: 20px;
		line-height: 32px;
	}
	.thongbao-box span{
		font-size: 30px;
		line-height: 32px;
	}
}
@media only screen and (min-width: 992px) {
	.regis-box{
		width: 55%;
		margin:15% 10% 0 26%;
	}
	.login-box{
		width: 64%;
		margin:8% 18% 0 18%;
	}
	.regis-box .input,.login-box .input{
		height:65px;
		margin:25px 0 3px 0;
	}
	.regis-box .input input,.login-box .input input{
		height: 65px;
		font-size:18px;
	}
	.bt-nhan{
		width: 284px;
		height:71px;
		font-size:25px;
		margin:3% 0 0 38%;
	}
	.bt-dk{
		width:237px;
		height:75px;
		font-size:25px;
		margin:5% 0 0 29%;
	}
	.gift{
		width: 76%;
		margin:8% 12% 5% 12%;
	}
	.gift p{
		font-size: 25px;
		line-height: 32px;
	}
	.gift img{
		width:30%;
		padding: 10px;
	}
	.gift t{
		width:75%;
		padding:20px;
		margin:3% 0 0 12%;
	}
	.thongbao-box{
		width:70%;
		margin:10% 15% 0 15%;
	}
}