body,dl,dd,h1,h2,h3,h4,h5,h6,p,span{margin:0;padding:0px;}
body{font:12px/1.5 microsoft yahei,tahoma,simsun,sans-serif;color:#adadad;width: 100%;height: 100%;}  
body, html {-webkit-tap-highlight-color: transparent;-webkit-text-size-adjust: none;-webkit-user-select: none;user-select: none;}
a, p, span, i ,h1, h2, h3, h4, h5, h6  {-webkit-font-smoothing: antialiased;}
h1,h2,h3,h4,h5,h6{font-size:100%}
img{border: none;padding: 0;margin:0}
em,i,b{font-style:normal}
ul,ol{list-style:none;margin:0;padding:0}
a{text-decoration:none}
a:hover{text-decoration:underline}
table{border-collapse:collapse;border-spacing:0}
.f14{font-size:14px}
.fl{float:left}
.fr{float:right}
.cb{clear: both}
.bc{margin-left: auto;margin-right: auto}
.pr{position:relative}
.pa{position:absolute}
.ovh{overflow:hidden}
.db{display:block}
.none{display:none}
.ht{display:block;overflow:hidden;text-indent:-999em}
.tc{text-align:center}
.tl{text-align: left;}
.tr{text-align: right;}
@font-face {
  font-family: "rd";
  src: url(../fonts/RefrigeratorDeluxe.ttf);
} 
.wraper{
  font-family: "rd";
  width: 100%;
  height: 100vh;
  background: url(../images/kv.jpg) 50% 50% no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding-bottom: 4vw;
}
.logo{
  width: 12vw;
  top: 2.6vw;
  left: 2.6vw;
}
.logo img{
  width: 100%;
  vertical-align: top;
}
/*main*/
.main{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}
.main .slogan{
  width: 61.1vw;
  margin: 0 auto;
  /* height: calc(220*61.1vw/1173); */
  height: calc(120*61.1vw/1173);
  background: url(../images/slogan_pc.png) 0 0 no-repeat;
  background-size: 100% auto;
  /* transition: width 0.3s linear,height 0.3s linear; */
}
.main .btns{
  width: 100%;
  height: 4.06vw;
  margin-top: 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main .btns a{
  width: 16.8vw;
  height: 100%;
  background: url(../images/btn_bg_b.png) 0 0 no-repeat;
  background-size: 100% 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5vw;
  text-shadow: 1px 1px 3px rgba(0,0,0,.5);
  box-sizing: border-box;
  padding-bottom: 0.3vw;
}
.main .btns a:hover{
  text-decoration: none;
}

.main .btn_gray{
  filter: grayscale(100%);
}
/*pop*/
.pop_mask_mf{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.7;
  z-index: 998;
  display: none;
}
.pop{
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  z-index: 999;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  transform: translate(-50%,-50%);
}
.pop .close{
  position: absolute;
  top: 0;
  right: -3vw;
  width: 3vw;
  height: 2.8vw;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url(../images/pop/btn_close.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}
.pop .btns{
  width: 100%;
  height: 3.9vw;
  margin-top: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pop .btns a{
  width: 15.41vw;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  margin: 0 0.1vw;
  box-sizing: border-box;
  padding-bottom: 0.55vw;
  color: #fff;
  background: url(../images/pop/btn_bg.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}
.pop .btns a:hover{
  text-decoration: none;
}
/*pop_container*/
.pop .pop_container{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46.56vw;
  height: 30.21vw;
  box-sizing: border-box;
  font-size: 1.5vw;
  transform: translate(-50%,-50%);
  transform-origin: 0 0;
  box-sizing: border-box;
  background: url(../images/pop/bg_s.jpg) 0 0 no-repeat;
  background-size:100% 100%;
}
.pop .pop_content{
  width: 100%;
  height: 100%;
  padding: 4vw 5vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.pop .pop_main{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
  flex-grow: 1;
}



#id_btn_link{
  text-align: center;
}

.popLiLogin {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  display: none;
  position: fixed;
  background: rgba(0,0,0,.8);
  z-index: 10;
}

.popLiLogin .close{
  position: absolute;
  width: 3vw;
  height: 2.8vw;
  top: -2.8vw;
  right: 0;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: url(../images/pop/btn_close.png) 50% 50% no-repeat;
  background-size: 100% 100%;
}

.popLiLogin.domTest{
  display: flex;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

.popLiLogin .main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  overflow: visible;
  transform-origin: left top;
}
.landscape_max_1400{
  width: 100vw;
  height: 200px;
  background: rgba(0,0,0,.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: none;
  color: #fff;
  font-size: 5vw;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 1921px) {
  :root {
    --screen-maxwidth:1920px; 
  } 
}
/*
orientation: portrait : 竖屏
orientation: landscape : 横屏
*/
/*横屏 尺寸大于1400*/
/* @media all and (orientation : landscape) and (min-width: 1400px) {
  .landscape_max_1400{
    display: flex;
  }
}
@media all and (orientation : landscape) and (max-width: 1399px) {
  .landscape_max_1400{
    display: flex;
  }
} */

@media all and (orientation : portrait){
  .wraper{    
    background: url(../images/kv_m.jpg) 50% 50% no-repeat;
    background-size: cover;
    padding-bottom: 8vw;
  }
  .logo{
    width: 21.5vw;
    top: 5.6vw;
    left: 5.6vw;
  }
  .main{
    height: 100%;
    justify-content: center;
  }
  .main .slogan{
    width: 100vw;
    height: calc(330*100vw/1080);
    background: url(../images/slogan_m.png) 0 0 no-repeat;
    background-size: 100% auto;
  }
  .main .btns{
    height: 9vw;
    /* slogan_m.png 去掉了第二行的文案，但图片尺寸不变，所以修改margin-top为-6vw，原来是6vw */
    margin-top: -6vw;
  }
  .main .btns a{
    width: 36vw;
    font-size: 5vw;
  }
  .pop .pop_container{
    width: 83.33vw;
    height: 53.7vw;
    font-size: 3vw;
  }
  .pop .pop_content{
    padding: 6vw 8vw;
  }
  .pop .btns{
    width: 100%;
    height: 6.9vw;
    margin-top: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pop .btns a{
    width: 27.41vw;
    margin: 0 1vw;
    padding-bottom: 1.2vw;
    font-size: 3.6vw;
  }
  .pop .close{
    right: -5.65vw;
    width: 5.65vw;
    height: 5.28vw;
  }
  .popLiLogin .close{
    width: 5.65vw;
    height: 5.28vw;
    top: -5.28vw;
  }  
}