body{
  font-family: "敺株��迤暺煾��",'Arial';
}

a{
  text-decoration: none;
}

.clear{
  clear: both;
}

.wrap{
  height:100vh;
  background: url("../img/bg.jpg");
  background-size: cover;
  background-position: left bottom;
  overflow: auto;
}

.btn{
  cursor: pointer;
}


/*header-----------------------------------------------*/
.header{
  width: 100%;
  position: fixed;
  top:0;

}

.header .logo{
  float: left;
  max-width:185px;
  margin: 25px 0 0 37px;
}

.header .logo img{
  width: 100%;
}
.header .aboutTriangle{
  height: 0;
	width: 0;
  border-top:55px #0066b5 solid;
  border-right:0px transparent solid;
  border-bottom:0px transparent solid;
  border-left:30px transparent solid;
  float: right;
}

.header .about{
  height:55px;
  width:400px;
  background-color: #0066b5;
  float: right;
  text-align: center;
  line-height:55px;
  font-size: 20px;
}

.header .about a{
  width: 100%;
  color:#fff;
  padding: 0 10px;
}

.header .about a:not(:nth-child(4)){
  border-right:2px solid #fff;
  padding-right:15px;
}

/*title-----------------------------------------------*/
.title{
  text-align: center;
  margin-top: 150px;
}

.title img{
  height:11vw;
  max-height: 190px;
}

/*floater----------------------------------------------*/
.floater{
  width:90%;
  margin:0 auto;
  height:45vh;
}

.floater .item{
  float:left;
}

.floater .item:nth-child(1){
  width: 10.5%;
  transform: translateY(-80px);
  margin-left: 4%;
}
.floater .item:nth-child(2){
  width: 13%;
  transform: translateY(80px);
  margin-left: 5%;
}
.floater .item:nth-child(3){
  width: 10.5%;
  transform: translateY(30px);
  margin-left: 5%;
}
.floater .item:nth-child(4){
  width: 15%;
  transform: translateY(70px);
  margin-left: 4%;
}
.floater .item:nth-child(5){
  width: 10%;
  transform: translateY(-20px);
  margin-left: 4%;
}
.floater .item:nth-child(6){
  width: 10.5%;
  transform: translateY(20px);
  margin-left: 6%;
}


.floater .item img{
  width: 100%;
}


.mascot{
  width: 15%;
  max-width: 200px;
  position: absolute;;
  top:130px;
  transform: scale(0);
}

.mascot img{
  width: 100%;
}


/*popup-------------------------------------------------*/
.popup{
 position:fixed;
 top:0;
 left:0;
 display: none;
}

.popup .mask{
  width: 100vw;
  height:100vh;
  background-color: rgba(0, 0, 0, .7);
}

.popup .contentwrap{
  width: 45%;
  height: 50%;
  max-width:940px;
  min-width: 600px;
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:80px;
  margin:auto;
}

.popup.openTVC .contentwrap.pdinfo,.popup.openGIFT .contentwrap.pdinfo{
  display: none;
}

.popup .contentwrap.video .video_tvc{
    display: none;
}
.popup.openTVC .contentwrap.video .video_tvc{
    display: block;
}

.popup .contentwrap.video .video_gift{
    display: none;
}
.popup.openGIFT .contentwrap.video .video_gift{
    display: block;
}

.popup .video_tvc, .popup .video_gift {
    width: calc(100% - 20px);
    position: relative;
    padding-bottom: 54.25%;
    top: 11%;
    right: 0%;
}

.popup .video_tvc::before,.popup .video_gift::before  {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: -10px;
    background-size: 100% 100%;
    background-image: url('../img/video_frame.png')
}
.popup .video_tvc iframe,.popup .video_gift iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    cursor: pointer;
    border: 0;
}


.popup img.close{
  width:8%;
  position: absolute;
  right: -7%;
  top: -10%;
}

.popup img.close.activeity{
  width:8%;
  position: absolute;
  right: -7%;
  top: -2%;
}

.popup img.content{
  width:100%;
}




@media screen and (max-width: 992px) {
    .wrap {
        background-position: 60% bottom;
    }
    .title img{
        width: 50%;
        height: auto;
    }
    .floater .item {
        margin: 0;
    }
    .floater .item:nth-child(1) {
        width: 20.5%;
        transform: translateY(0px);
        margin: 60px 20% 80px 20%;
    }
    .floater .item:nth-child(2) {
        width: 25%;
        transform: translateY(0px);
        margin: 80px 0 0 0;
    }
    .floater .item:nth-child(3) {
        width: 20.5%;
        transform: translateY(0px);
        clear: both;
        margin: 0px 19% 80px 19%;
    }
    .floater .item:nth-child(4) {
        width: 29%;
        transform: translateY(0px);
        margin-left: 0;
    }
    .floater .item:nth-child(5) {
        width: 20%;
        transform: translateY(0px);
        margin: 0 20% 80px 20%;
        clear: both;
    }
    .floater .item:nth-child(6) {
        width: 20.5%;
        transform: translateY(0px);
        margin-left: 0;
    }
}

@media screen and (max-height:650px) {
    .title {
        margin-top: 100px;
    }

}
@media screen and (max-width: 480px) {
  .header .logo{
    min-width:100px;
  }

  .popup .contentwrap{
    width: 90%;
  }


}