@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');
*{
font-family: 'Noto Sans TC', sans-serif;
-webkit-overflow-scrolling: touch;
}
.rela-ans{
 width: 100%;
 text-align: center;
 font-size: 16px;
    font-weight: 300;
  color: #E51400;
    line-height: 1;
    margin-top: -5px;
}
.rela-ans.red{
   color: #474752;
}
.pnotice{
  display: none;
}
.step-container{
  display: none;
}
.case3-view{
  width: 100%;
  max-width: 1000px;
  height: 520px;
  margin: 0 auto;
  position: relative;
}
.csae3-info{
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 60px 20px 0 20px;
}
.case3-folt{
  width: 202px;
  height: auto;
  position: absolute;
  top:20px;
  left: 50%;
  transform: translateX(-50%);
}
.case3-1{
  width: 276px;
  height: auto;
  position: absolute;
  top:-10px;
  left: 20px;
}
.case3-2{
  width: 276px;
  height: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.case3-3{
  width: 276px;
  height: auto;
  position: absolute;
  right: 20px;
  top:20px;
}
.c3mq1-1{
  height: 76px;
    position: absolute;
    right: 30px;
    top: -30px;
}
.c3mq1-2{
  height: 76px;
    position: absolute;
    left: 50px;
    top: -30px;
}
.c3mq1-3{
  height: 76px;
    position: absolute;
    left: -10px;
    top: -20px;
}
.c3mq1-4{
  height: 76px;
    position: absolute;
    left: -5px;
    top: -30px;
}
.c3mq1-5{
  height: 76px;
  position: absolute;
  left: -10px;
  top: -20px;
}
.c3mq1-6{
  height: 76px;
    position: absolute;
    right: 20px;
    bottom: 10px;
}
.c3mq1-7{
  height: 76px;
    position: absolute;
    left: -10px;
    bottom: 10px;
}
.c3mq1-8{
  height: 76px;
    position: absolute;
    left: 10px;
    bottom: 20px;
}
.c3mq1-9{
  height: 76px;
    position: absolute;
    right: 60px;
    top: -20px;
}
.c3mq1-10{
  height: 76px;
    position: absolute;
    left: 0;
    top: -30px;
}
.c3mq1-11{
  height: 76px;
    position: absolute;
    left: 0;
    top: -20px;
}
.c3mq1-12{
  height: 76px;
    position: absolute;
    left: 10px;
    top: -20px;
}
.c2mq1-1{
  height: 76px;
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
}
.c2mq1-2{
  height: 76px;
    position: absolute;
    right: 25px;
    top: -30px;
}
.c2mq1-3{
  height: 76px;
    position: absolute;
    right: 0;
    top: -30px;
}
.c2mq1-4{
  height: 76px;
    position: absolute;
    right: 20px;
    top: -30px;
}
.c2mq1-5 {
  height: 76px;
    position: absolute;
    left: 30px;
    top: -20px;
}
.c2mq1-6 {
  height: 76px;
    position: absolute;
    left: 40px;
    top: -30px;
}
.c2mq1-7 {
  height: 76px;
    position: absolute;
    left: 20px;
    top:-20px;
}
.c2mq1-8 {     
  height: 76px;
    position: absolute;
   right: 10px;
    top: -20px;
}
.c2mq1-9 {     
  height: 76px;
    position: absolute;
   right: 0;
    top: -20px;
}
.c2mq1-10 {     
  height: 76px;;
    position: absolute;
   right: 60px;
    top: -20px;
}
.c2mq1-11{     
  height: 76px;
    position: absolute;
   right: 10px;
    top: -20px;
}
.c2mq1-12 {     
  height: 76px;
    position: absolute;
   right: 5px;
    top: -5px;
}
.c2mq1-13 {     
  height: 76px;
    position: absolute;
   left: -5px;
    top: -30px;
}
.c2mq1-14,
.c2mq1-15 {     
  height: 76px;
    position: absolute;
    left: 10px;
    top: -30px;
}
.c2mq1-16,
.c2mq1-17 {     
  height: 76px;
    position: absolute;
    right: 20px;
    top: -30px;
}
.fb-box-2{
  width: 100%;
  max-width: 1060px;
  padding: 0 20px;
  margin: 0 auto; 
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.fb-box-2-1{
  display: none;
}
.fb-col-6{
  width: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
}
.pt-x{
  padding-top: 80px;
}
.case2-video{
  width: 100%;
  max-width: 1040px;
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 50px;
}
.c2-left{
  width: 50%;
}
.c2-left a{
  display: block;
  position: relative;
}
.c2-left a:hover .vplay{
  background-color: #ff0000;
  background-image: url(../images/playb.svg);
}
.c2-right{
  width: 50%;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: #474752; 
  padding-left: 50px;
}
.c2-right.fix{
  padding-left: 0;
  padding-right: 50px;
}
.c2tit{
font-size: 24px;
font-weight: 700;
line-height: 28px;
color: #0A365B;
padding-bottom: 15px;

}
.fore-tit{
font-size: 20px;
color: #0A365B;
font-weight: 500;
line-height: 24px;
text-align: center;
padding: 30px 20px 20px 20px;
}
.fore-bt{
  text-align: center;
}
.dis-container{
  width: 100%;
  max-width: 1040px;
  padding: 0 20px;
  overflow: hidden;
  margin: 0 auto;
} 
.dis-tit{
font-size: 24px;
font-weight: 500;
line-height: 1.2;
text-align: center;
color: #0A365B;
padding: 15px 10px 0 10px;
}
.dis-text{
  font-size: 16px;
    font-weight: 400;
    color: #0A365B;
    line-height: 26px;
  padding: 5px 10px 15px 10px;
  }
.case-tab-bt.fixa{
  max-width: 235px;
}
.sum-sw{
  overflow: hidden;
  display: none;
}
.sum-sw.active{
  display: block;
}
.sum-tit{
font-size: 20px;
font-weight: 500;
line-height: 56px;
color: #474752;
}
.sum-bar{
 display: block; 
 background: rgba(49, 193, 224, 0.3);
 font-size: 20px;
font-weight: 500;
line-height: 56px;
color: #0A365B;
padding-left: 10px;
margin-bottom: 10px;
white-space: nowrap;
}
.sum-box{
  width: 100%;
  max-width: 1200px;
  padding: 40px 100px 50px 100px;
  background-color: #fff;
  border-radius: 20px;
  margin: 0 auto;
}
.sum-box .swiper-wrapper{
  flex-direction: column;
}
.case-tab-bt.fix {
  width: 235px;
}
.interbox{
  width: 100%;
  max-width: 1040px;
  padding: 40px 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: #474752;
  margin: 0 auto;
}
.interbox.fix{
  padding: 60px 20px 0 20px;
}
.inter-tit{
  font-size: 32px;
  font-weight: 700;
  line-height: 44px;
color: #0A365B;
padding-bottom: 15px;
text-align: center;
}
.promom{
  width: 125px;
  height: 131px;
  position: absolute;
  top:-121px;
  left: 166px;
}
.pro-list{
  width: 100%;
  max-width: 1200px;
  background-color: #fff;
  border: 1px solid #0A365B;
  box-sizing: border-box;
  box-shadow: 0px 8px 0px #09365b;
  border-radius: 16px;
  padding: 30px;
  margin: 0 auto;
  position: relative;
}
.pro-row{
  overflow: hidden;
}

.pro-box{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.pro-tit{
  font-size: 32px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 20px;
    color: #0A365B;
}
.blue{
  color: #1b4586;
  font-style: normal;
}
.mt-fix{
  margin-top: -20px;
}
.mcase2-img,.pro-img{
  display: none;
}
.case2-img{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 20px;
}
.case2-img-1{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px 0 20px;
}
.fb-container-a,.feedback.fix,.gotop.fix{
  display: none;
}
.case2-secction-1{
  background-image: url(../images/case2top.svg);
  background-size: 1920px auto;
  background-position:  top center;
  background-repeat: no-repeat;
  background-color: #fff;
  padding-bottom: 60px;
}
.case2-secction-2{
  background-image: url(../images/case2mid.svg);
  background-size: 1920px auto;
  background-position:  top center;
  background-repeat: no-repeat;
  background-color: #fff;
  padding-bottom: 20px;
}
.case2-secction-3{
  background-image: url(../images/case2bot.svg);
  background-size: 1920px auto;
  background-position:  top center;
  background-repeat: no-repeat;
  background-color: #fff;
  min-height: auto;
}
.case3-secction-1{
  background-image: url(../images/case2top.svg);
  background-size: 1920px auto;
  background-position:  top center;
  background-repeat: no-repeat;
  background-color: #fff;
}
.case3-secction-2{
  background-image: url(../images/case3bot.svg);
  background-size: 1920px auto;
  background-position:  top center;
  background-repeat: no-repeat;
  background-color: #fff;
}
.bottom-container{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 30px;
}
.case2-tit {
  width: 100%;
  max-width: 1200px;
  padding: 150px 0 40px 0;
  font-size: 34px;
  font-weight: 700;
  color: #09365b;
  text-align: center;
  line-height: 1;
  margin: 0 auto;
  position: relative;
}
.cmq1{
  height: 76px;
  position: absolute;
  right: 30px;
  top:-30px;
}  
.cmq2{
  height: 76px;
  position: absolute;
  left: 50%;
  transform: translateX(-60%);
  top:-5px;
} 
.cmq3{
  height: 76px;
  position: absolute;
  left: -10px;
  top:-20px;
} 
.cmq4{
  height: 76px;
  position: absolute;
  left: -6px;
  top:-20px;
} 
.cmq5{
  height: 76px;
  position: absolute;
  right: 0;
  top:-30px;
}  
.cmq6{
  height: 76px;
  position: absolute;
  left: -20px;
  top:5px;
} 
.cmq1-1{
  height: 76px;
  position: absolute;
  right: 30px;
  top:-30px;
}  
.cmq1-2{
  height: 76px;
  position: absolute;
right: -20px;
  top:-30px;
} 
.cmq1-3{
  height: 76px;
  position: absolute;
  right: -20px; 
  bottom: 0;
} 
.cmq1-4{
  height: 76px;
  position: absolute;
  right: 50px;
  top:10;
} 
.cmq1-5{
  height: 76px;
  position: absolute;
  right: 0;
  top:5px;
}
.cmq1-6,
.cmq1-7,
.cmq1-8{
  height: 76px;
  position: absolute;
  right: 40px;
  top:-30px;
}        
.case-2020{
  font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: #0A365B;
    padding: 70px 0 15px 0;
}
.ck-bt-b{
  padding: 30px 0 90px 0;
  text-align: center;
}
.case-2020-text{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6; 
 color: #474752;
 text-align: left;
}
.face{
  width: 128px;
  height: 128px;
}
.fb-info{
  font-size: 16px;
  font-weight: 300;
  color: #4c4c4c;
  line-height: 1.6;
 padding-left: 16px;
 text-align: left;
}
.fb-info span{
  font-size: 14px;
}
.case-sub-tit{
font-size: 32px;
font-weight: 700;
line-height: 44px;
text-align: center;
padding-top: 80px;
padding-bottom: 50px;
color: #0A365B;
}
.case-sub-tit.pt-180{
  padding-top: 180px;
}
.feedback{
  display: flex;
  margin-bottom: 40px;
  align-items: center;
}
.res-box{
  width: 100%;
  padding: 0 20px;
  max-width: 1040px;
  margin: 0 auto;  
}
.res-tit{
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  text-align: center;
  color: #0A365B;
  padding: 70px 0 60px 0;
}
.quo-container{
  display: none;
}
.quo-box{
  width: 100%;
  padding: 0 20px;
  max-width: 1240px;
  margin: 0 auto;
}
.quo-tit {
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  text-align: center;
  color: #0A365B;
  padding: 50px 0 20px 0;
}
.bottom-container-b,
.bottom-container-a,
.bottom-container-c{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 30px;
}
.bottom-container-a.active,
.bottom-container-b.active,
.bottom-container-c.active{
width: 0;
height: 0;
}
.map-bt{
  display: none;
} 
.map-container{
  display: none;
}
.case-mid{
  width: 100%;
  padding: 0 20px;
  max-width: 1056px;
  margin: 0 auto;
}
.case-mid-tit{
font-size: 24px;
font-weight: 700;
line-height: 34px;
text-align: center;
color:#0A365B ;
padding: 50px 0 70px 0;
}
.map-box{
  position: relative;
  text-align: right;
}
.map{
  width: 540px;
  height: auto;
  margin-bottom: 40px;
}
.mcard-box{
  position: absolute;
  width: 710px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  top:0;
  left: 0;
}
.mcard{
  width: 33.3%;
  padding:0 8px 30px 8px;
}
.mcard-out{
  height: 100%;
border: 1px solid #0A365B;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
}
.mcard-text{
font-size: 16px;
font-weight: 400;
color: #0A365B;
line-height: 26px;
text-align: left;
padding: 15px 8px;
}
.mcard-text span{
  font-size: 30px;
  font-weight: 700;
  color:#FF779C;
  line-height: 1;
}
.mcard-text.fixt{
  padding: 15px 0 15px 4px;
  text-indent: -6px;
}
.mcard-pic{
  width: 100%;
  height: 0;
  padding-top:70%;
  background-size: cover;
}
  .mcard-out .mcard-pic{
  animation: zoomout 0.5s forwards ease-out;
  }
  .mcard-out:hover .mcard-pic{
  animation: zoomin 0.5s forwards ease-in;
  }
.case-tab{
  display: none;
}
.case-tab.active{
  display: block;
}
.case-video{
  width:100%;
  max-width: 1200px;
  padding:68px 100px 44px 100px;
  background-color: #fff;
  border-radius: 20px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.case-left{
  flex:1;
  position: relative;
}
.case-right{
  width: 500px;
  position: relative;
  padding-left: 60px;
  color: #474752;
  position: relative;
}
.rfix{
  position: absolute;
  right: 0;
  bottom: 0;
}
.case-right p{
  font-size: 16px;
  font-weight: 300;
  color: #4c4c4c;
  line-height: 1.6;
margin-bottom: 0;
}
.cv-tit{
font-size: 24px;
font-weight: 700;
line-height: 34px;
color: #0A365B;
}
.mcv-tit{
  display: none;
}
.cv-h5{
margin-top: 25px;  
font-size: 16px;
font-weight: 700;
line-height: 26px;
}
.vplay{
  display: inline-block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #fff;
    background-image: url(../images/play.svg);
    background-size: 14px auto;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 5px 0 #000;
}
.case-left a:hover .vplay{
  background-color: #ff0000;
  background-image: url(../images/playb.svg);
}
.case-bt-box{
  display: flex;
  justify-content: center;
}
.case-tab-bt{
  width: 300px;
  line-height: 56px;
  display: inline-block;
  background: #FFF;
border: 1px solid #00468C;
box-sizing: border-box;
border-radius: 40px;
color: #00468C;
font-size: 18px;
font-weight: 500;
margin: 0 10px 20px 10px;
position: relative;
text-align: center;
}
.case-tab-bt:hover{
  color: #00468C;
  text-decoration: none;
}
.case-tab-bt.active{
  background: #00468C;
  color: #fff;
}
.case-tab-bt.active:hover{
  color: #fff;
  text-decoration: none;
}
.case-tab-bt.active::after{
  content: '';
  display: inline-block;
  width: 24px;
  height: 9px;
  background-image: url(../images/tri.svg);
  background-size: 24px 9px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -9px;
}
.case-text{
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 30px 20px 20px 20px;
}
.case-text.fix{
  padding: 0 20px 20px 20px;
}
.case-text h3{
  font-size: 17px;
    font-weight: 700;
    color: #09365b;
    line-height: 1.6;
  padding-top: 5px;
  margin-bottom: 0;
}
.case-text p{
  font-size: 16px;
  font-weight: 300;
  color: #4c4c4c;
  line-height: 1.6;
  margin-bottom: 20px;
}
.case-tit {
  width: 100%;
  max-width: 1200px;
  padding: 150px 0 15px 0;
  font-size: 34px;
  font-weight: 700;
  color: #09365b;
  text-align: center;
  line-height: 1;
  margin: 0 auto;
  position: relative;
}
.case-sub{
font-size: 18px;
font-weight: 500;
line-height: 24px;
text-align: center;
color: #1AA5C8;
}
.case1-secction{
  background-image:url(../images/case1bot.svg), url(../images/case1top.svg);
  background-size: 1920px auto,1920px auto;
  background-position: bottom -100px center, top center;
  background-repeat: no-repeat;
  background-color: #fff;
}
.mt-x{
  margin-top: -15px;
}
.sp1{
  display: inline-block;
  width: 10px;
}
.chart-container,.tab-container{
  width: 100%;
  overflow: hidden;
  position: relative;
}
.show-xs{
  display: none;
}
.design{
  display: inline-block;
  margin-left: 20px;
}
.design:hover{
 color: #fff;
 opacity: 0.7;
}
.swiper-wrapper.show-ss {
  display: none;
}
.flot2{
  width: 227px;
  left: 75px;
  top: 560px;
  position: absolute;
  z-index: 1;
}
.dad2{
  width: 272px;
  position: absolute;
  bottom: -10px;
  right: 20px;
  z-index: 1;
}
.ball2{
  width: 135px;
  position: absolute;
  right: 105px;
  top:40%;
}
.mom2{
  width: 129px;
  position: absolute;
  top:-125px;
  right: 150px;
  z-index: 1;
}
.cloud3 {
  width: 99px;
  height: auto;
  position: absolute;
  right: -30px;
  top: -20px;
  z-index: 1;
}
.cloud4 {
  width: 104px;
  height: auto;
  position: absolute;
  left: -50px;
  top: 180px;
  z-index: 1;
}
.plat-box {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 1200px;
  background-color: #fff;
  border: 1px solid #0A365B;
  box-sizing: border-box;
  box-shadow: 0px 7px 0px #09365b;
  border-radius: 16px;
  text-align: center;
  padding: 40px 30px 30px 30px;
  margin: 0 auto;
  flex-wrap:wrap;
  position: relative;
}
.plat-text{
  width: 100%;
  color: #474752;
  font-size:20px;
font-weight: 500;
line-height: 1.3;
text-align: center;
padding-bottom: 30px;
}
.plat-box .logo-item{
  width: 20%;
  height: 264px;
  margin-bottom: 10px;
  padding: 0 10px;
  text-align: center;
  cursor: pointer;
}
.plat-box .logo-item img{
  width: 80%;
}
.logo-info{
  display: none;
  width: 100%;
  background: #FFFFFF;
border: 1px solid #31C1E0;
box-sizing: border-box;
box-shadow: 0px 4px 0px #31C1E0;
border-radius: 24px;
padding: 12px;
font-size: 18px;
font-weight: 500;
line-height: 1.3;
text-align: center;
color: #272734;
}
.plat-box .logo-item:hover .logo-info{
  display: block;
  color: #272734;
}
.rela-bt{
  padding-top: 30px;
}
.rela-bt a{
  margin:0 6px;
}
.rela-tit{
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: #474752;
  margin-bottom: 20px;
}
.rela-sub{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  color: #474752;
  margin-bottom: 10px;
}
.rela-sub.fix{
  margin-top: -15px;
  margin-bottom: 20px;
}
.rela-red{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  color: #E51400;
  margin-bottom: 10px;
}
.rela-qt{
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: #474752;
  padding: 5px 0 20px 0;
}
audio{
  max-width: 100%;
}
.rela-qt.fix{
  margin-top: 35px;
}
.mp3box{
  padding: 30px 0 30px 0;
  position: relative;
}
.pos-st p {
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: #474752;
  margin-bottom: 20px;
}
.pos-st p.bd {
padding-top: 10px; 
  font-weight: 500;
}
.slckbox{
  display: flex;
  align-items: center;
  justify-content: center;
 flex-wrap: wrap;
 padding: 5px 30px 0 30px;
 margin-bottom: -10px;
}
.slck{
  display: inline-block;
  min-width: 136px;
  padding: 0 8px 16px 8px;
  margin-bottom: 0;
  cursor: pointer;
}
.slck input{
  display: none;
}
.slck input + span,.slck  span{
  padding: 0 15px;
  height: 56px;
  display: flex;
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  color: #31C1E0;
  border: 3px solid #31C1E0;
border-radius: 35px;
text-align: center;
box-shadow: 0px 0px 0px 6px #fff; 
align-items: center;
justify-content: center;

}
.slck input:checked + span{
  color: #fff;
  background: #31C1E0;
  border: 1px solid #31C1E0;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 6px #CCF4FE; 
}
.slck.ans  span{
  color: #B71000;
  border: 3px solid #B71000;
}
.slck.ans  span i{
 display: inline-block;
 width: 14px;
 height: 11px;
 background-image: url(../images/rck.svg);
 background-size: 14px 11px;
 background-repeat: no-repeat;
 margin-left: 10px;
 margin-bottom: 0;
}
.slck.error-1 span{
  color: #fff;
  background: #31C1E0;
  border: 3px solid #B71000;
  box-sizing: border-box;
  box-shadow: none; 
}
.slck.error-1 span i{
  display: inline-block;
 width: 13px;
 height: 13px;
  background-image: url(../images/wuck.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin-left: 10px;
 
}
.slck.ans.error-1 span {
  color: #fff;
  background: #31C1E0;
  border: 1px solid #31C1E0;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 6px #CCF4FE; 
}
.slck.ans.error-1 span i{
  width: 14px;
 height: 11px;
 background-size: 14px 11px;
 background-repeat: no-repeat;
  background-image: url(../images/wck.svg); 
}
.bed1{
  position: absolute;
  left: -60px;
  top:14px;
}
.table1{
  position: absolute;
  bottom: 0;
  right: -260px;
}
.pos-img-c {
  width: 157px;
  margin: 0 auto;
  position: relative;
}
.pos-img-b {
  width: 208px;
  margin: 0 auto;
  position: relative;
}
.work-img{
width: 208px;
}
.pos-tab{
display: none;
} 
.ans1{
position: absolute;
top: -20px;
left: -175px;
width: 201px;
height: 128px;
background-image: url(../images/ans1.svg);
background-size: cover;
padding: 14px 30px 14px 14px;
font-size: 12px;
line-height: 20px;
font-weight: 300;
color: #474752;
}
.ans2{
position: absolute;
bottom: 75px;
left: -115px;
width: 204px;
height: 84px;
background-image: url(../images/ans2.svg);
background-size: cover;
padding: 14px 30px 14px 14px;
font-size: 12px;
line-height: 20px;
font-weight: 300;
color: #474752;
}
.ans3{
position: absolute;
top: 70px;
right: 51px;
width: 107px;
height: 71px;
background-image: url(../images/ans3.svg);
background-size: cover;
padding:10px 14px;
font-size: 12px;
line-height: 20px;
font-weight: 300;
color: #474752;
}
.ans4{
  position: absolute;
  top: -7px;
  left: -110px;
  width: 201px;
  height: 128px;
  background-image: url(../images/ans4.svg);
  background-size: cover;
  padding: 14px 30px 14px 14px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
  color: #474752;
  }
  .ans5{
  position: absolute;
  top: 12px;
  right: -98px;
  width: 168px;
  height: 120px;
  background-image: url(../images/ans5.svg);
  background-size: cover;
  padding: 14px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
  color: #474752;
  }
  .ans6{
  position: absolute;
bottom: 43px;
  right: -103px;
  width: 239px;
  height: 119px;
  background-image: url(../images/ans6.svg);
  background-size: cover;
  padding:10px 14px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
  color: #474752;
  z-index: 9;
  }
.ans7{
position: absolute;
top: 31px;
right: -167px;
width: 235px;
height: 129px;
background-image: url(../images/ans7.svg);
background-size: cover;
padding:10px 14px 14px 62px;
font-size: 12px;
line-height: 20px;
font-weight: 300;
color: #474752;
}
.ans8{
  position: absolute;
  top: 69px;
  left: -181px;
  width: 202px;
  height: 83px;
  background-image: url(../images/ans8.svg);
  background-size: cover;
  padding: 14px 30px 14px 14px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
  color: #474752;
  }
  .ans9{
  position: absolute;
  top: 169px;
  right: -186px;
  width: 226px;
  height: 123px;
  background-image: url(../images/ans9.svg);
  background-size: cover;
  padding: 10px 14px 10px 28px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
  color: #474752;
  }
  .ans10{
  position: absolute;
top: 166px;
  left: -181px;
  width: 202px;
  height: 100px;
  background-image: url(../images/ans10.svg);
  background-size: cover;
  padding:10px 30px 10px 14px;
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
  color: #474752;
  z-index: 9;
  }  
.anstit{
font-weight: 700;
}
.pos-st {
display: none;
position: relative;
width: 800px;
background-color: #fff;
border: 1px solid #0A365B;
box-sizing: border-box;
box-shadow: 0px 8px 0px #09365b;
border-radius: 16px;
text-align: center;
padding: 40px 30px 30px 30px;
margin: 0 auto;
transform: translateY(50px);
}
.pos-st.fix {
  margin-top: 140px;
  padding: 40px 30px 0px 30px;
  }
.ss1{
  left: 57px; 
  top:84px;
  }
  .ss2{
    left: 21px; 
    top:108px;
  }
  .ss3{
    left: 63px; 
    top:122px;
  }
  .ss4{
    right: 19px; 
    top:115px;
  }
  .ss5{
   left:39px ;
    top:164px;
  }
  .ss6{
    right: 43px;
    top:182px;
  }
  .ss7{
    left: 35px;
    bottom: 156px;
  }
  .ss8{
   right: 45px;
    bottom: 138px;
  }
  .ss9{
    left: 40px;
    bottom: 107px;
  }
    .ss10{
    right: 33px; 
    bottom: 86px;
    }
    .ss11{
    left: 40px;
    bottom: 56px;
    }
    .ss12{
 right: 26px;
    bottom: 34px;
  }
  .ss13{
    left: 55px;
      bottom: 4px;
    }
.ws1{
left: 137px; 
top:12px;
}
.ws2{
  left: 97px; 
  top:37px;
}
.ws3{
  left: 99px; 
  top:75px;
}
.ws4{
  left: 99px; 
  top:125px;
}
.ws5{
  right: 42px; 
  top:125px;
}
.ws6{
  left: 76px; 
  top:157px;
}
.ws7{
  right: 65px; 
  top:157px;
}
.ws8{
  left: 83px;
  bottom: 120px;
}
.ws9{
  right: 58px; 
  bottom: 120px;
}
  .ws10{
  left:82px ; 
  bottom: 87px;
  }
  .ws11{
    right: 47px; 
  bottom: 75px;
  }
  .ws12{
left: 50px;
  bottom: 59px;
}
.ws13{
  left: 18px;
    bottom: 17px;
  }
  .ws14{
    right: 22px; 
  bottom: 8px;
  }  
.ps1{
left: 60px; 
top:10px;
}
.ps2{
left: 32px; 
top:56px;
}
.ps3{
left: 27px; 
top:86px;
}
.ps4{
left: 67px; 
top:88px;
}
.ps5{
left: 58px; 
top:132px;
}
.ps6{
left: 90px; 
top:138px;
}
.ps7{
  left:92px; 
  top:180px;
}
.ps8{
  right: 136px; 
  top:168px;
}
.ps9{
  right: 87px; 
  top:145px;
}
.ps10{
  right: 67px; 
bottom: 86px;
}
.ps11{
  right: 47px; 
  bottom: 30px;
  }
.posck {
position: absolute;
padding: 0;
margin-right: 0;
cursor: pointer;
display: inline-block;
}
.posck input[type=checkbox] {
display: none;
}
.posck input[type=checkbox]+span,.posck span {
display: block;
background-color: rgba(255, 255, 255, 0.9);
border: 2px solid #31C1E0;
user-select: none;
width: 24px;
height: 24px;
border-radius: 50%;
}
.posck.error-1 span{
background-image: url(../images/error-1.svg);
background-repeat: no-repeat;
background-position: center center;
}
.error-2{
display: none;
}
.posck.ans{
display: block !important;
}
.posck.ans span{
background-color: #B71000;
border-color: #B71000;
background-image: url(../images/wck.svg);
background-repeat: no-repeat;
background-position: center center;
}
.posck.ans.error-1 span{
border-color: #31C1E0;
background-color: #31C1E0;
background-image: url(../images/wck.svg);
background-repeat: no-repeat;
background-position: center center;
}
.posck input[type=checkbox]:checked+span {
background-color: #31C1E0;
background-image: url(../images/wck.svg);
background-repeat: no-repeat;
background-position: center center;
}
.pos-tit{
font-size: 24px;
font-weight: 500;
line-height: 1;
letter-spacing: 0px;
text-align: center;
padding-bottom: 15px;
color: #474752;
}
.countdown{
font-size: 32px;
font-weight: 700;
line-height: 1;
text-align: center;
padding-bottom: 20px;
color: #B71000;
}
.pos-img{
width: 300px;
margin: 0 auto;
position: relative;
}
.plat-arr{
  min-height: 100vh;
  background-image: url(../images/plat-bg.svg);
  background-position: top center;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  height: auto;
  overflow: hidden;
  background-color: #fff;
  padding-bottom: 100px;
  position: relative;
}
.rela-arr{
  background-image:  url(../images/hi.svg),url(../images/relabg.svg);
  background-position:  bottom left 80px,top 80px center;
  background-size: 22% auto,100% auto;
  background-repeat: no-repeat;
  height: auto;
  overflow: hidden;
  background-color: #ffc7e3;
  position: relative;
}
.rela-arr.active{
  background-image: url(../images/rq3.svg);
  background-position: top 80px center;
  background-size: 100% auto;
  background-color: #ffe1ef;
}
.sleep-arr{
  background-image: url(../images/sleepbg.svg);
  background-position: top center;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  height: auto;
  overflow: hidden;
  background-color: #55c6a1;
}
.pos-secction{
  background-image: url(../images/p3bg.svg);
  background-position: top 80px center;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  height: auto;
  overflow: hidden;
  padding-bottom: 90px;
}
.sel-secction{
  background-image: url(../images/p4bg.svg);
  background-position: top 80px center;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  height: auto;
  overflow: hidden;
  padding-bottom: 90px;
}
.rela-secction{
  background-image: url(../images/p5bg.svg);
  background-position: top 80px center;
  background-size: 1920px auto;
  background-repeat: no-repeat;
  height: auto;
  overflow: hidden;
  padding-bottom: 90px;
}
.stand-arr {
  background-image: url(../images/pos3-bg.svg);
  background-position: top 80px center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  min-height: calc( 100vh - 80px );
  height: auto;
  background-color: #6ecbff;
  overflow: hidden;
  }
.walk-arr {
background-image: url(../images/pos2-bg.svg);
background-position: top 80px  center;
background-size: 100% auto;
background-repeat: no-repeat;
min-height: calc( 100vh - 80px );
height: auto;
background-color: #9ae498;
overflow: hidden;
}
.pos-arr {
background-image: url(../images/pos1-bg.svg);
background-position: top center;
background-size: 100% auto;
background-repeat: no-repeat;
min-height: calc( 100vh - 80px );
height: auto;
background-color: #6ecbff;
overflow: hidden;
}
.pos1,.pos2,.pos3,.pos4{
position: absolute;
}
.pos1{
width: 190px;
top:120px;
left: 20%;
}
.pos2{
width: 240px;
top:35%;
left: 0;
}
.pos3{
width: 150px;
bottom:12%;
left: 28%;
}
.pos4{
max-height: 73vh;
bottom: 0;
right: -200px;
}
.done{
opacity: 0.5;
}
.game-tit{
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: 0px;
text-align: center;
color: #474752;
padding-bottom: 20px;
}
.game-box{
text-align: center;
width: 100%;
max-width: 1200px;
  background-color: #fff;
  border: 1px solid #0A365B;
  box-sizing: border-box;
  box-shadow: 0px 8px 0px #09365b;
  border-radius: 16px;
  text-align: center;
  padding: 30px;
  margin: 0 auto;
}
.games{
display: flex;
padding: 20px 40px 0 40px;
}
.games a{
width: 25%;
display: block;
position: relative;
text-align: left;
padding: 0 20px;
}
.games a img{
height: 160px;
}
.games a span{
position: absolute;
bottom: 0;
right: 20px;
display: inline-block;
color: #09365b;
font-size: 16px;
font-weight: 500;
width: 120px;
max-width: 100%;
line-height: 40px;
border: solid 1px #09365b;
box-shadow: 0 2px 0 #09365b;
background-color: #fff;
text-align: center;
border-radius: 21px;
outline: none;
cursor: pointer;
}
.games :hover span{
background-color:#09365b; 
color: #fff;
text-decoration: none;
}
.more-bt-a, .more-bt-a:focus {
display: inline-block;
color: #09365b;
font-size: 16px;
font-weight: 500;
width: 164px;
line-height: 52px;
border: solid 1px #09365b;
box-shadow: 0 3px 0 #09365b;
background-color: #fff;
text-align: center;
border-radius: 30px;
outline: none;
cursor: pointer;
}
.more-bt-b, .more-bt-b:focus {
display: inline-block;
color: #fff;
font-size: 16px;
font-weight: 500;
width: 164px;
line-height: 52px;
border: solid 1px #09365b;
box-shadow: 0 3px 0 #09365b;
background-color: #09365b;
text-align: center;
border-radius: 30px;
outline: none;
cursor: pointer;
}
.more-bt-b img,.more-bt img{
margin-left: 5px;
}
.more-bt-b:hover{
color: #fff;
text-decoration: none;
background-color: #00468a;
border: solid 1px #00468a;
box-shadow: 0 3px 0 #00468a;
}
.more-bt-a .downA {
  display: inline-block;
  }
.more-bt-a:hover .downA {
  display: none;
  }
.more-bt-a .downB{
  display: none;
  }
.more-bt-a:hover .downB{
    display: inline-block;
}  
.more-bt-a:hover{
color: #fff;
text-decoration: none;
background-color: #09365b;
border: solid 1px #09365b;
box-shadow: 0 3px 0 #09365b;
}
.fd-score{
width: 100%;
max-width: 940px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 90px 20px;
}
.fd-score.fix{
  padding: 40px 20px 100px 20px;
  }
.score-l{
width: 280px;
padding: 0 20px;
}
.score-r{
flex:1;
text-align: center;
color: #474752;
padding-left: 100px;
}
.score-tit{
font-size: 32px;
font-weight: 700;
}
.score-sub{
font-size: 24px;
font-weight: 700;
}
.score-info{
font-size: 20px;
font-weight: 500;
line-height: 1.3;
text-align: left;
padding: 20px 0 40px 0;
}
.swbt{ display: none;}
.check-img{
position: relative;
}
.ck-1,.ck-2,.ck-3,.ck-4,.ck-5,.ck-6{
display: none;
}
.ck-1.active,.ck-2.active,.ck-3.active,.ck-4.active,.ck-5.active,.ck-6.active{
display: block;
}
.ck-1{
position: absolute;
top:40px;
right: 70px;
z-index: 3;
}
.ck-2{
position: absolute;
top:40px;
left: 50px;
z-index: 3;
}
.ck-3{
position: absolute;
top:90px;
left: 125px;
z-index: 3;
}
.ck-4{
position: absolute;
top:90px;
right:135px ;
z-index: 3;
}
.ck-5{
position: absolute;
bottom:50px;
left: 150px;
z-index: 3;
}
.ck-6{
position: absolute;
bottom: 50px;
right: 155px;
z-index: 3;
}
.fd-text{
font-size: 16px;
font-weight: 300;
line-height: 1;
text-align: center;
padding:5px 0 25px 0;
color: #474752;
}
.fd-text span{
display: inline-block;
font-size: 26px;
font-weight: 700;
color: #474752;
padding: 0 3px;
}
.fd-info{
font-size: 18px;
font-weight: 500;
line-height: 1.2;
text-align: center;
color: #474752;
}
.ans-check{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 50px;
}
.food-container{
width: 100%;
height: 100%;
}
.swiper-wrapper.fix {
flex-wrap: wrap;
justify-content: center;
}
.swiper-wrapper.fix  .swiper-slide{
width: 33.3%;
height: auto;
padding: 0;
}
.fd-ans{
max-width: 1200px;
width: 100%;
display: flex;
padding: 40px 50px 80px 50px;
margin: -20px auto 0 auto;
align-items: stretch;
background: #FFFFFF;
border-radius: 16px;
position: relative;
}
.ans-l{
flex:1;
padding-right: 20px;
}
.ans-r{
width: 440px;
padding-left: 20px;
}
.ans-tit{
color:#DE6741;
font-size: 24px;
font-weight: 500;
line-height: 1;
text-align: center;
padding-bottom: 20px;
}
.error-sum{
display: none;
font-size: 12px;
font-weight: 300;
line-height: 24px;
color: #E51400;
text-align:center;
margin-top: -15px;
padding-bottom: 20px;

}
.sum{
display: inline-block; 
font-size: 20px;
font-weight: 700;
color:#ff779c;
margin: 0 5px;
}
.mpicker{
display: none;
}
.fd-price{
font-size: 24px;
font-weight: 700;
line-height: 1;
text-align: left;
color: #474752;
}
.fd-price span{
font-size: 12px;
font-weight: 400 !important;
line-height: 1;
color: #474752;
display: inline-block;
margin-left: 3px;
margin-bottom: 5px;
}
.fd-name{
font-size: 14px;
font-weight: 300;
line-height: 1;
color: #474752;
padding: 5px 0 0 0;
} 
.w-80{
width: 60%;
margin: 0 auto;
display: block;
}
.checkfood{
padding: 0 5px 10px 5px;
}
.checkfood [type=checkbox] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ckcircle{
position: absolute;
top: 5px;
right: 5px;
display: none;
}
.checkfood  label {
padding:10px;
cursor: pointer;
position: relative;
margin-bottom: 0;
}
.checkfood [type=checkbox]:checked + label {
background-color: rgba(248, 222, 176, 0.5);
border-radius: 16px;
}
.checkfood [type=checkbox]:checked + label .ckcircle {
display: block;
}
.checkfood [type=checkbox]:checked + label .fd-name,.checkfood [type=checkbox]:checked + label .fd-price {
font-weight: 700;
color: #0A365B;
}
.fd-row{
display: flex;
flex-wrap: wrap;
}
.fd-col{
width: 25%;
}
.fd-list{
height: 36vh;
overflow-y: scroll;
margin-bottom: 20px;
}
.fd-list::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.fd-list::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #E6E6E6;
}
.fd-list::-webkit-scrollbar-thumb {
background: #0A365B; 
border-radius: 8px;
}
.food-st2{
display: none;  
position: relative;
width: 800px;
background-color: #fff;
border: 1px solid #0A365B;
box-sizing: border-box;
box-shadow: 0px 8px 0px #09365B;
border-radius: 16px;
text-align: center;
padding: 40px 30px 30px 30px;
margin: 0 auto;
transform: translateY(50px);
}
.food-st1{
width: 800px;
background-color: #fff;
border: 1px solid #0A365B;
box-sizing: border-box;
box-shadow: 0px 8px 0px #09365B;
border-radius: 16px;
text-align: center;
padding: 40px 30px 30px 30px;
top:50%;
left: 50%;
transform: translate(-50%,-40%);
position: absolute;
}
.food-st1 p{
font-size: 20px;
font-weight: 400;
line-height: 1.5;
color: #474752;
margin-bottom: 25px;
}
.food-st1 p.fix{
  margin-top: -20px;
  }
.food-st2 p{
font-size: 16x;
font-weight: 300;
line-height: 1;
color: #474752;
margin-bottom: 25px;
}
.food-st2 p.bd{
  font-weight: 500;
  padding-top: 10px;
  }
.fd-bt,.fd-bt:focus {
outline: none;
box-shadow: none;
border:none;
font-size: 14px;
color: #fff;
font-weight: 500;
display: inline-block;
width: auto;
min-width: 136px;
line-height: 50px;
border-radius: 26px;
background-color: #09365b;
padding: 0 50px 0 30px;
position: relative;
cursor: pointer;
}
.fd-out-bt,.fd-out-bt:focus {
  outline: none;
  box-shadow: none;
  border:none;
  font-size: 14px;
  color: #09365b;
  font-weight: 500;
  display: inline-block;
  width: auto;
  min-width: 136px;
  line-height: 50px;
  border-radius: 26px;
  background-color: #fff;
 border: solid 1px #09365b;
  padding: 0 50px 0 30px;
  position: relative;
  cursor: pointer;
  }
.fd-out-bt img{
    position: absolute;
    top: 20px;
    right: 30px;
} 
.fd-out-bt:hover{
  color: #09365b;
  text-decoration: none;
  background-color: #31C1E0;;
  border-color: #31C1E0;
  }
.fd-bt.fix {
padding-right: 30px;
}
.fd-bt img{
position: absolute;
top: 20px;
right: 30px;
animation: icons 0.5s infinite ease-in-out;
}
.fd-bt:hover{
color: #fff;
text-decoration: none;
background-color: #00468a;
}
.fd-bt:hover img{
animation: none;
}
.food-tit{
padding-top: 150px;
padding-bottom: 30px;
font-size: 32px;
font-weight: 700;
line-height: 44px;
text-align: center;
color: #272734;
}
.rela-arr.active .food-tit{
  display: none;
}
.food-arr{
background-image: url(../images/foodbg.svg);
background-position: top center;
background-size: 100% auto;
background-repeat: no-repeat;
min-height: calc( 100vh - 80px );
height: auto;
background-color: #ffd366;
}
.food-box{
width: 100%;
max-width: 1400px;
min-height: calc( 100vh - 80px );
height: auto;
margin: 0 auto;
position: relative;
padding-bottom: 60px;
}
.open{
position: absolute;
left:190px ;
top: 0;
}
.picker{
position: absolute;
width: auto;
max-height: 80%;
top:22%;
right: 50px;
}
.mod-tit{
color: #1b4586;
font-size: 26px;
font-weight: 700;
text-align: center;
line-height: 1;
padding-bottom: 40px;
}
.modal-dialog {
max-width: 680px;
margin: 1.75rem auto;
}
.close {
color: #1b4586;
opacity: 1;
}
.modal-header {
border-bottom: none;
}
.modal-content {
border: 2px solid #1b4586;
border-radius: 30px;
}
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0 60px 30px 60px ;
}
.modal-body.fix p{
font-size: 16px;
font-weight: 300;
color: #2c2c2c;
padding-left: 2em;
text-indent: -1.9em;
}
.modal-body.fix p span{
font-size: 14px;
display: inline-block;
background-color: #1b4586;
color: #fff !important;
width: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-right: 10px;
text-indent: 0;
}
.hide-md{
display: block;
}
.show-md{
display: none;
}
.alerm{
position: absolute;
top:93px;
left: 260px;
z-index: 11;
}
.dad{
position: absolute;
top:37px;
right: 166px;
z-index: 1;
width: 137px;
height: 215px;
background-image: url(../images/dadbg.svg);
background-size: auto 215px;
}
.chat1{
position: absolute;
top:65px;
left: 60px;
}
.chat2{
position: absolute;
bottom: 110px;
right: 135px;
}
.dot1{
position: absolute;
position: absolute;
top:82px;
left: 88px;
}
.dot2{
position: absolute;
position: absolute;
top:82px;
left: 108px;
}
.dot3{
position: absolute;
position: absolute;
top:82px;
left: 128px;
}
.dot5{
position: absolute;
bottom: 136px;
right: 175px;
}
.dot6{
position: absolute;
bottom: 136px;
right: 155px;
}
.mou1{
position: absolute;
top:177px;
left: 190px;
}
.mou1-1{
position: absolute;
top:177px;
left: 190px;
}
.mou2{
position: absolute;
bottom: 130px;
right: 280px;
}
.mou2-1{
position: absolute;
bottom: 136px;
right: 280px;
}
.dot4{
position: absolute;
bottom: 136px;
right: 195px;
}
.coffee1{
position: absolute;
top:35px;
left: 39px;
}
.coffee2{
position: absolute;
top:35px;
left: 39px;
}
.vg1{
position: absolute;
top:72px;
left: 162px;
z-index: 2;
}
.vg2{
position: absolute;
top:75px;
left:252px;
}
.vg3{
position: absolute;
top:140px;
left: 158px;
z-index: 3;
}
.banana{
position: absolute;
top:3px;
left: 242px;
}
.ex-img{
position: relative;
} 
.cl-box{
width: 462px;
height: 462px;
background-color: #fff;
border: solid 2px #1b4586;
position: absolute;
border-radius: 50%;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 9;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 20px;
}
.cl-tit{
font-size: 36px;
font-weight: 700;
color: #09365b; 
line-height: 1;
padding-bottom: 20px;
letter-spacing: 0.1em;
}
.cl-sub{
font-size: 17px;
font-weight: 500;
color: #09365b; 
width: 100%;
line-height: 40px;
background-image: url(../images/cl-sub.svg);
background-repeat: no-repeat;
background-size: auto 36px;
background-position: center center;
}
.cl-dis{
font-size: 17px;
font-weight: 500;
color: #09365b; 
line-height: 1.7;
padding: 20px 0 30px 0;
}
.cl-a{
display: inline-block;
background-color: #ffe8a2;
border-radius: 15px;
padding: 0 6px;
}
.cl-b{
display: inline-block;
background-color: #d0f6ff;
border-radius: 15px;
padding: 0 6px;
}
.cl-c{
display: inline-block;
background-color: #defab6;
border-radius: 15px;
padding: 0 6px;
}
.cl-d{
display: inline-block;
background-color: #ffe5f2;
border-radius: 15px;
padding: 0 6px;
}
.cl-bt, .cl-bt:focus {
display: inline-block;
color: #09365b;
font-size: 15px;
font-weight: 500;
width: 124px;
line-height: 42px;
border: solid 1px #09365b;
box-shadow: 0 2px 0 #09365b;
background-color: #fff;
text-align: center;
border-radius: 22px;
outline: none;
cursor: pointer;
}
.cl-bt:hover{
text-decoration: none;
background-color: #09365b;
color: #fff;
}
.main{
background-color: #c5f5ff;
height: auto;
min-height: calc( 100vh - 80px );
padding-top: 80px;
}
.main-box{
width: 100%;
padding: 30px;
max-width: 1260px;
margin: 0 auto;
position: relative;
}
.exbox{
display: flex;
flex-wrap: wrap;
}
.table,.bed{
display: block;
width: 58.33%;
position: relative;
}
.room,.chat{
position: relative;
display: block;
width: 50%; 
}
.mask-bt{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
}
.table,.chat{
padding-right: 12px;

}
.room,.bed{
margin-left: -8.33%;
padding-left: 12px;
}
.table span,.chat span{
font-size: 17px;
color: #fff;
font-weight: 500;
display: inline-block;
width: 168px;
line-height: 56px;
border-radius: 28px;
background-color: #09365b;
padding: 0 30px;
position: absolute;
bottom: 10px;
left: -30px;
opacity: 0;
z-index: 3;
}
.table:hover span,.chat:hover span{
animation: ibt 0.5s forwards ease-in-out;
}
@keyframes ibt {
0% {
transform: translateX(50px);
opacity: 0;
} 
100% {
transform: translateX(0);
opacity: 1;
}  
}
.chat span{
bottom: 13px;
}
.table span img,.chat span img,.room span img,.bed span img{
float: right;
margin-top: 23px;
animation: icons 0.5s infinite ease-in-out;
}
@keyframes icons {
0% {
transform:translatex(0);
}
50% {
transform:translatex(5px);
} 
100% {
transform:translatex(0);
}  
}
.bed span{
font-size: 17px;
color: #fff;
font-weight: 500;
display: inline-block;
width: 168px;
line-height: 56px;
border-radius: 28px;
background-color: #09365b;
padding: 0 30px;
position: absolute;
bottom: 10px;
right: -30px;
opacity: 0;
z-index: 3;
}
.room span{
font-size: 17px;
color: #fff;
font-weight: 500;
display: inline-block;
width: 168px;
line-height: 56px;
border-radius: 28px;
background-color: #09365b;
padding: 0 30px;
position: absolute;
bottom: 27px;
right: -30px;
opacity: 0;
z-index: 3;
}
.room:hover span,.bed:hover span{
animation: ibtb 0.5s forwards ease-in-out;
}
@keyframes ibtb {
0% {
transform: translateX(-50px);
opacity: 0;
} 
100% {
transform: translateX(0);
opacity: 1;
}  
}
.mq1{
width: 10.1vw;
position: absolute;
top:-10px;
right: 80px;
}
.mq2{
width: 7.5vw;
position: absolute;
top:-10px;
left: 70px;
}
.mq3{
width: 11.73vw;
position: absolute;
top:20px;
left: -10px;
}
.mq4{
width: 9.5vw;
position: absolute;
top:0;
left: -15px;
}
.mq5{
  width: 15.25vw;
  position: absolute;
  top:-10px;
  left: 15px;
}
.cloud1{
width: 99px;
height: auto;
position: absolute;
right: -30px;
bottom: 10px;
}
.cloud2{
width: 104px;
height: auto;
position: absolute;
left: -50px;
bottom:-180px;
}
.ab-row{
display: flex;
padding-top: 150px;
position: relative;
}
.ab-l{
flex:1;
}
.ab-r{
padding-top: 80px;
width: 310px;
}
.ab-r-1{
width: 330px;
}
.pl-x{
padding-left: 40px;
}
.abh3{
font-size: 25px;
font-weight: 700;
color: #09365b;
line-height: 1;
padding-bottom: 30px;
}
.abh5{
font-size: 17px;
font-weight: 700;
color: #09365b;
}
.abp{
font-size: 16px;
font-weight: 300;
color: #4c4c4c;
line-height: 1.9;
padding-bottom: 40px;
}
.fix-right{
position: absolute;
top:150px;
right: 0;
}
.tab-box{
width: 100%;
max-width: 1100px;
margin: 0 auto; 
margin-top: 50px;
margin-bottom: 10px;
}
.time-tab{
display: block;
border:solid 2px #23c0e2;
padding: 44px;
box-shadow: 0 10px 0 #90e6ff;
border-radius: 50px;
width: 100%;
position: relative;
background-color: #fff;
}
.time-tab.tab-b{
width: 736px;
margin-left: 0;
}
.time-tab.tab-c{
max-width: 368px;
margin-left: calc( 100% - 368px );
}
.tri{
position: absolute;
top:-20px;
left: 9%;
}
.tab-b .tri{
left: 48%;
}
.tab-c .tri{
left: 45%;
}
.time-col{
width: 33.3%;
height: 132px;
display: flex;
align-items: center;
border-right: solid 1px #e1e1e1;
}
.tab-b .time-col{
width: 50%;
}
.tab-c .time-col{
width: 100%;
}
.time-col:last-child{
border-right: none;
}
.time-icon{
width: 110px;
padding-left: 20px;
}
.time-info{
padding: 0 20px;
flex:1;
font-size: 16px;
color: #09365b;
font-weight: 300;
}
.timebox{
padding: 0 20px;
width: 100%;
max-width: 1140px;
margin: 0 auto; 
}
.time-line{
position: relative;
}
.time-bt{
position: absolute;
top:50%;
transform: translateY(-50%);
display: inline-block;
width: auto;
color: #23c0e2;
font-size: 18px;
font-weight: 500;
line-height: 44px;
background-image: url(../images/time-b.svg);
background-repeat: no-repeat;
background-size:6px 9px;
background-position: center right 20px;
padding-left: 20px;
padding-right: 45px;
border:solid 3px #23c0e2;
border-radius: 25px;
background-color: #fff;
}
.time-bt:hover{
color: #23c0e2;
text-decoration: none;
}
.time-bt.active{
font-size: 20px;
color: #fff;
background-image: url(../images/time-a.svg);
background-color: #23c0e2;
border:solid 10px #caf4ff;
line-height: 44px;
border-radius: 32px;
}
.bt-20{
left: 5.4%;
}
.bt-25{
left: 29%;
}
.bt-60{
left: auto;
right: 10.5%;
}
.ab-tit{
width: 100%;
max-width: 1200px;
padding: 170px 0 90px 0;
font-size: 34px;
font-weight: 700;
color: #09365b;
text-align: center;
line-height: 1;
margin: 0 auto;
position: relative;
}
.ab-sub{
font-size: 17px;
font-weight: 700;
color: #09365b;
line-height: 1.6;
}
.ab-text{
font-size: 16px;
font-weight: 300;
color: #4c4c4c;
line-height: 1.6;
}
.ab-chart{
padding: 30px 0 40px 0;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.fd-secction-1{
width: 100%;
height: auto;
background-image: url(../images/p2bg.svg);
background-repeat: no-repeat;
background-size: 1920px auto;
background-position: top 80px center; 
background-color: #fff;  
padding-bottom: 90px;
}
.fd-secction-2{
  width: 100%;
  height: auto;
  min-height: 800px;
  background-image: url(../images/p2bg2-1.png);
  background-repeat: no-repeat;
  background-size: 1920px auto;
  background-position: top center; 

  } 
.ab-secction-1{
width: 100%;
height: auto;
min-height: 800px;
background-image: url(../images/p2bg1.svg);
background-repeat: no-repeat;
background-size: 1920px 771px;
background-position: top center; 
background-color: #fff;
}
.ab-secction-2{
width: 100%;
height: auto;
min-height: 1602px;
background-image: url(../images/p2bg2.png);
background-repeat: no-repeat;
background-size: 1920px 1602px;
background-position: top center; 
}
.ab-secction-3{
width: 100%;
height: auto;
background-image: url(../images/p2bg3.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: bottom center; 
padding:20px 0 60px 0;
}
footer{
background-color: #00468c;
padding: 20px 0;
font-size: 13px;
color: #fff;
line-height: 1;
font-weight: 300;
}
footer a{color: #fff;}
.f-row{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex-wrap: wrap;
}
.logos{
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.logos span{
display: inline-block;
padding-right: 10px;
margin-right: 10px;
border-right: solid 1px #fff;
white-space: nowrap;
}
.logos img{
height: 40px;
margin-right: 20px;
}
.flogo1{
width: 120px;
}
.links a.bts{
display: inline-block;
background-color:#0a65ab;
padding: 0 25px;
line-height: 32px;
border-radius: 20px;
margin-right: 10px;
}
.links a.bts:hover{
color: #fff;
text-decoration: none;
background-color: #09365b;
}
.fb{
display: inline-block;
margin: 0 10px 0 10px;
}
.yt{
display: inline-block;
margin: 0 20px 0 0;
}
.fb img,.yt img{
width: 32px ;
height: 32px;
}
.fb:hover,.yt:hover{
filter: brightness(1.3);
}
.copyright{
padding: 10px;
line-height: 1rem;

}
.gotop{
width: 100px; 
height: 100px; 
color: #fff;
background-color: #00468c;
border-radius: 50%;
text-align: center;
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
padding-top: 25px;
font-size: 14px;
line-height: 1.8;
}
.gotop:hover{
color: #fff;
text-decoration: none;
background-color: #09365b;
}
.old{
width: 258px;
height: 224px;
position: absolute;
right: -20px;
bottom: -140px;
}
.ball{
width: 159px;
height: 164px;
position: absolute;
z-index: 0;
top: 45%;
left: -100px;
}
.talk-box{
width: 139px;
position: absolute;
z-index: 3;
top: -70px;
left: -70px;
}
.mic{
position: absolute;
width: 165px;
right: 10px;
top:-180px;
z-index: 0;
}
.forum-container{
margin-top: 100px;
position: relative;
padding: 0 0 50px 0;
z-index: 1;
background-color: #fff;
background-image: url(../images/chartbg.svg);
background-size: 30px 30px;
background-repeat: repeat;
border-radius: 10px;
border:solid 1px #23c0e2;
}
.forum-container-b{
  display: none;
  margin-top: 100px;
position: relative;
padding: 0 0 50px 0;
z-index: 1;
background-color: #fff;
background-image: url(../images/chartbg.svg);
background-size: 30px 30px;
background-repeat: repeat;
border-radius: 10px;
border:solid 1px #23c0e2;
}
.speaker-card{
width: 100%;
border:solid 1px #00468c;
border-radius: 10px;
margin-bottom: 60px;
background-color: #34b1e0;
box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
position: relative;
}

.card-face{
width: 100%;
height: 0;
padding-bottom: 100%;
background-size: cover;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.speaker-card .card-face img{
width: 100%;
height: auto;
position: absolute;
top:0;
left: 0; 
animation: zoomout 0.5s forwards ease-in;
}
.speaker-card:hover .card-face img{
animation: zoomin 0.5s forwards ease-in;
}
.pink{
background-color:#ffdeee ;
}
.purple{
background-color:#8fcaff ;
}
.yellow{
background-color: #ffc24c;
}
.a1{
margin: -30px 0 60px 40px;
}
.a2{
margin: 0 0 60px  -15px;
}
.a3{
margin: -10px 0 60px  50px;
}
.a4{
margin: -10px 0 60px  -15px;
}
.b1{
margin: 20px 0 60px 20px;
}
.b2{
margin: -10px 0 60px  0;
}
.b3{
margin: 0 0 60px  60px;
}
.b4{
margin: 10px 0 60px  -20px;
}
.c1{
margin: -20px 0 60px -10px;
}
.c2{
margin: 0 0 60px 10px;
}
.c3{
margin: 0 0 60px  15px;
}
.c4{
margin: 20px 0 60px  -20px;
}
.d1{
margin: 20px 0 60px -30px;
}
.d2{
margin: 0 0 60px 15px;
}
.d3{
margin: -10px 0 60px  20px;
}
.d4{
margin: 0 0 60px  -20px;
}
.speaker-row{
display: flex;
flex-direction: column;
}
.speaker-indo{
position: absolute;
top:65%;
left: -10px;
}
.aa1{
left: 10px; 
top:60%;
}
.s-profile{
display: block;
font-size: 13px;
padding: 5px 10px;
background-color: #fff;
color: #00468c;
border-radius: 4px;
margin-left: 25px;
margin-right: 5px;
border:solid 1px #00468c;
}
.s-name{
display: inline-block;
font-size: 20px;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #09365b;
padding: 10px 20px;
line-height: 1;
border-radius: 4px;
}
.s-name.fix{
line-height: 1.3;
padding: 6px 20px;
}
.f-title {
font-size: 34px;
font-weight: 700;
line-height: 1;
color: #09365b;
padding-bottom: 15px;
text-align: center;
background-image: url(../images/titbg-1.svg);
background-size: auto 34px;
background-repeat: no-repeat;
background-position: bottom center;
margin-bottom: 30px;
letter-spacing: 2px;
}
.w-110{
width: 110%;
margin-right: -10%;
}
.inter-box{
padding-top: 30px;
display: flex;
width: calc( 100% + 50px );
margin-left: -25px;
}
.inter-box a{
display: block;
margin: 0 25px;
width: 25%;
padding-bottom: 15px;
position: relative;
}

.inter-box.silver-star a{
  width: 330px;
}
.inter-box a span{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: inline-block;
color: #09365b;
font-size: 18px;
font-weight: 500;
width: 90%;
line-height: 56px;
border: solid 1px #09365b;
box-shadow: 0 3px 0 #09365b;
background-color: #fff;
text-align: center;
border-radius: 30px;
outline: none;
cursor: pointer;
}
.inter-box a:hover span{
background-color: #09365b;
color: #fff;
}
.mom{
width: 143px;
height: 151px;
position: absolute;
right: 0;
top:0;
}
.e-title {
font-size: 34px;
font-weight: 700;
line-height: 1;
color: #09365b;
padding-bottom: 15px;
text-align: center;
background-image: url(../images/titbg-3.svg);
background-size: auto 34px;
background-repeat: no-repeat;
background-position: bottom center;
margin-bottom: 30px;
letter-spacing: 2px;
}
.chart-box{
padding-top: 20px;
display: flex;
width: calc( 100% + 10px );
margin-left: 5px;
}
.chart-col{
width: 50%;
margin: 0 5px;
}
.voit{
font-size: 13px;
font-weight: 500;
color: #00468c;
text-align: right;
line-height: 1;
}
.voit span{
display: inline-block;
width: 10px;
height: 10px;
background-color: #78dcff;
margin: -2px 3px 0 0;
}
.chart-com{
padding-top: 10px;
font-size: 13px;
font-weight: 500;
color: #4c4c4c;
text-align: center;
}
.chart-tit{
font-size: 24px;
font-weight: 700;
color: #00468c;
text-align: center;
line-height: 1;
letter-spacing: 1px;
padding-bottom: 10px;
}
.chart{
background-color: #fff;   
background-image: url(../images/chartb.svg);
background-size:cover;
border-radius: 10px;
border:solid 1px #00468c;
padding: 10px 15px;
position: relative;
}
.barbox{
display: flex;
}
.bar-col{
width: 10%;
}
.bar-up{
height: 146px;
border-bottom: solid 1px #00468c;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-top: 20px;
}
.bar-dw{
padding-top: 10px;
height: 80px;
display:flex;
justify-content:center;
}
.bar{
height: 50%;
position: relative;
} 
.bar.fix{
transform-origin:bottom;
animation: bar 0.8s forwards ease-in;
} 
.bar.fixa{
transform-origin:bottom;
animation: bar 1s forwards ease-in;
}
.bar.fixb{
transform-origin:bottom;
animation: bar 1.2s forwards ease-in;
}
.bar.fixc{
transform-origin:bottom;
animation: bar 1.4s forwards ease-in;
}
@keyframes bar {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}  
} 
.percent{
width: 100%;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #00468c; 
position: absolute;
top:-26px;
}
.num{
width: 20px;
height: 20px;
font-size: 13px;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 18px;
background-color: #fc76a1;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
}
.bar-h{
width: calc( 100% - 20px);
margin-left: 10px;
background-color: #78dcff;
height: 100%;
}
.bar-dw span{
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr ;
writing-mode: tb-lr ;
font-size: 16px;
font-weight: 500;
color: #00468c;
}
.checkform{
width: calc( 100% + 40px );
display: flex;
justify-content:center;
flex-wrap: wrap;
margin-left: -20px;
}
.ck-bt{
width: 100%;
padding-top: 10px;
text-align: center;
}
.checkbox:nth-child(1){
margin-left: 20px;
}
.checkbox:nth-child(6){
margin-top: -36px;
margin-left: -176px;
}
.checkbox:nth-child(7){
margin-top: -36px;
}
.checkbox:nth-child(8){
margin-top: -36px;
}
.checkbox:nth-child(9){
margin-top: -36px;
}
.checkbox:nth-child(10){
  margin-top: -36px;
  }
.checkbox label{
width: 181px;
height: 206px;
background-image: url(../images/ckbg.png);
background-size: cover;
cursor: pointer;
position: relative;
margin: 0 10px;

}
.checkbox label img{ 
height: 56px;
width: auto;
position: absolute;
top:45%;
left: 50%;
transform: translate(-50%,-50%);
animation: iconb 0.3s forwards ease-in;
}
.checkbox label:hover img{
transform:translate(-50%,-50%);
animation: icon 0.3s forwards ease-in;
}
@keyframes icon {
0% {
transform:translate(-50%,-50%) scale(1);
}
100% {
transform:translate(-50%,-50%) scale(1.12);
}  
} 
@keyframes iconb {
0% {
transform:translate(-50%,-50%) scale(1.12);
}
100% {
transform:translate(-50%,-50%) scale(1);
}  
}
.checkbox label span{
width: 100%;
font-size: 18px;
font-weight: 500;
color: #00468c;
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.checkbox [type=checkbox] { 
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.checkbox [type=checkbox]:checked + label {
background-image: url(../images/ckbg1.png);
}
.blue{
color: #00468c !important;
}
.d-text{
font-size: 16px;
color: #4c4c4c;
font-weight: 500;
text-align: center;
line-height: 1.8;
padding-bottom: 30px;
}
.bg-black{
background-color: #000 !important;
}
.hide-xx{
display: block;
}
.show-xx{
display: none;
}
header{
position: fixed;
top:0;
left: 0;
width: 100%;
box-shadow: 0 0 10px #cdcdcd;
background-color: #fff;
padding: 0 20px;
z-index: 999;
}
.nav-box{
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.logo-box{
position: absolute;
top:21px;
left: 0;
display: flex;
align-items: flex-end;
}
.logo-box a{
display: inline-block;
}
.logo-box a:nth-child(2){
margin: 0 15px;
padding-left: 15px;
border-left: solid 1px #bababa;
}
.logo1{
height: 38px;
}
.logo2{
height: 31px;
}
.logo3{
height: 31px;
} 
.menu-box{
text-align: right;
}
.menu-box ul{
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
.main-link li{
display: inline-block;
position: relative;
}
.main-link li a{
display: block;
font-size: 17px;
font-weight: 500;
color: #000;
line-height: 80px;
padding: 0 18px;
position: relative;
}
.main-link li .upper:hover,.main-link li .upper.active {
text-decoration: none;
color: #000;
}
.main-link li .upper:before {
content: "";
position: absolute;
transition: transform 0.5s ease;
left: 0;
bottom: 0;
width: 100%;
height: 6px;
border-radius: 3px;
background: #00468c;
transform: scaleX(0);
/*  transform-origin: top left; */
}
.main-link li .upper:hover:before,.main-link li .upper.active:before {
transform: scaleX(1);
}
.forum{
display: inline-block;
background-color: #eb5692;
line-height: 42px;
padding: 0 30px;
margin-left: 20px;
color: #fff;
border-radius: 21px;  
cursor: default;
}
.forum:hover{
color: #fff;
text-decoration: none;
background-color: #f25f74;
}
.sec-out{  
display: none;
padding-top: 5px; position: absolute;
top:100%;left: 50%;
transform: translateX(-50%);
}
ul.second{ 
width: 100%;
padding: 15px 0;
box-shadow: 0 0 10px #cdcdcd;
background-color: #fff;
border-radius: 10px;

}
.has-second:hover .sec-out{
display: inline-block;
}
.second li{
display: block;
}
.second li a{
display: block;
line-height: 36px;
color: #494949;
padding: 0 20px;
text-align: center;
white-space: nowrap;
}
.second li a:hover{
color: #000;
text-decoration: none;
}
.banner{
width: 100%;
max-width: 1158px;
height: 750px;
margin:0 auto;
position: relative;
}
.slogan{
width: 381px;
position: absolute;
left: 160px;
top:50%;
transform: translateY(-38%);
}
.clock{
width:226px;
height: auto; 
position: absolute;
top:10px;
left: 390px;
}
.food{
width:196px;
height: auto; 
position: absolute;
top:274px;
left: -90px;
}
.talk{
width:190px;
height: auto; 
position: absolute;
bottom: 0;
left: 110px;
}
.kid{
width:190px;
height: auto; 
position: absolute;
top: 101px;
right: -15px;
}
.main-v{
position: absolute;
width: 816px;
right: 0;
bottom: 0;
}
.scroll{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -30px;
display: inline-block;
width: 118px;
height: 118px;
background-color: #00468c;
border-radius: 50%;
background-image: url(../images/scroll.svg);
background-repeat: no-repeat;
background-size:30px auto;
background-position: top 20px center ;
animation: move 1s infinite ease-in-out;
}
@keyframes move {
0% {
background-position: top 18px center;
}
50% {
background-position: top 22px center;
}
100% {
background-position: top 18px center;
}  
}
.scroll span{
width: 42px;
height: 8px;
background-image: url(../images/scroll-b.svg);
background-size: cover;
display: inline-block;
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
}
.secction-a{
width: 100%;
height: 750px;
background-image: url(../images/bg1.svg);
background-repeat: no-repeat;
background-size: 1920px 750px;
background-position: top center;
position: relative;
}
.secction-b{
width: 100%;
height: 1256px;
background-image: url(../images/bg2-1.svg), url(../images/bg2.png);
background-repeat: no-repeat;
background-size:1920px auto, 1920px 1256px;
background-position: center center, top center;
}
.secction-c{
width: 100%;
height: 987px;
background-image: url(../images/bg3.png);
background-repeat: no-repeat;
background-size: 1920px 987px;
background-position: top center;

}
.secction-d{
width: 100%;
min-height: 750px;
height: auto;
background-image: url(../images/bg4.png);
background-repeat: no-repeat;
background-size: 1920px 750px;
background-position: top center;
padding-bottom: 30px;
}
.secction-e{
width: 100%;
height: 1055px;
background-image: url(../images/bg5.png),url(../images/bg5-1.jpg);
background-repeat: no-repeat;
background-size: 1920px 605px, 1920px 109px;
background-position: top center;
background-color: #c5f5ff;
}
.secction-f{
width: 100%;
height: auto;
min-height: 1495px;
background-image: url(../images/bg6.png),url(../images/bg7.png);
background-repeat: no-repeat,repeat-y;
background-size: 1920px 1495px,1920px 43px;
background-position:top center, bottom center;
padding-bottom:130px;
overflow: hidden;
}
.container-box{
width: 100%;
max-width: 1040px;
padding: 0 20px;
margin: 0 auto;
position: relative;
}
.h-title{
padding-top:120px ;
font-size: 34px;
font-weight: 700;
line-height: 1;
color: #09365b;
padding-bottom: 15px;
text-align: center;
background-image: url(../images/titbg.svg);
background-size: auto 36px;
background-repeat: no-repeat;
background-position: bottom center ;
margin-bottom:30px ;
letter-spacing: 2px;
}
.c-title{
padding-top:220px ;
font-size: 34px;
font-weight: 700;
line-height: 1;
color: #09365b;
padding-bottom: 15px;
text-align: center;
background-image: url(../images/titbg-1.svg);
background-size: auto 34px;
background-repeat: no-repeat;
background-position: bottom center ;
margin-bottom:30px ;
letter-spacing: 2px;
}
.d-title{
font-size: 34px;
font-weight: 700;
line-height: 1;
color: #09365b;
padding-bottom: 15px;
text-align: center;
background-image: url(../images/titbg-2.svg);
background-size: auto 34px;
background-repeat: no-repeat;
background-position: bottom center ;
margin-bottom:30px ;
letter-spacing: 2px;
}
.ytbox{
display: block;
width: 764px;
height: 434px;
border-radius: 10px;
margin:0 auto 50px auto ;
background-size: cover;
position: relative;
}
.ytbox span{
display: inline-block;
width: 87px;
height: 87px;
border-radius: 50%;
background-color: #fff;
background-image: url(../images/play.svg);
background-size: 14px auto;
background-repeat: no-repeat;
background-position: center center ;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow:0 5px  0 #000;
}
.ytbox:hover span{
background-color:#ff0000;
background-image: url(../images/playb.svg);
}
h5{
color: #09365b;
font-size: 17px;
font-weight: 500;
}
p{
color:#4c4c4c ;
font-size: 16px;
font-weight: 300;
margin-bottom: 30px;
}
p a{
color: #00468c;
text-decoration: underline;
font-weight: 500;
}
.content-row{
display: flex;
flex-wrap: wrap;
text-align: justify;
}
.c-col{
width: 100%;
}
.c-left{
width: 690px;
padding-right: 90px;
}
.c-right{
flex:1;
}
.bt-box{
padding-top: 30px;
text-align: center;
}
.more-bt,.more-bt:focus{
display: inline-block;
color: #09365b;
font-size: 18px;
font-weight: 500;
width: 164px;
line-height: 56px;
border:solid 1px #09365b;
box-shadow: 0 3px 0 #09365b;
background-color: #fff;
text-align: center;
border-radius: 30px;
outline: none;
cursor: pointer;
}
.more-bt.fix{
  width: 220px;
}
.more-bt:hover{
text-decoration: none;
color: #fff;
background-color: #09365b;
outline: none;
}
.modal-dialog.video{
width: 90%;
max-width: 1000px;
margin: 30px auto;
}
.video .modal-content{
border-radius: 0;
background-color: transparent;
}
.video .modal-body {
position:relative;
padding:0px;
}
.video .close {
position:absolute;
right:-30px;
top:-30px;
z-index:999;
font-size:2rem;
font-weight: normal;
color:#fff;
opacity:1;
}
.flot{
width: 255px;
height: 304px;
position: absolute;
left: -100px;
top:-30px;
z-index: 3;
}
.c-date{
padding-top: 10px;
padding-bottom: 10px;
font-size: 18px;
color: #00468c;
text-align: center;
font-weight: 700;
}
.c-sub{
padding-bottom: 30px;
font-size: 16px;
color: #4c4c4c;
text-align: center;
font-weight: 500;
}
.card-out{
display: block;
max-width: 260px;
margin: 0 auto;
padding-left: 4px;
padding-top: 30px;
position: relative;
}
.mt-a{
margin-top: 34px;
}
.mt-b{
margin-top: 18px;
}
.card-out:hover{
text-decoration: none;
}
.card-hide{
overflow: hidden;
}
.card-out .case-pic{
animation: zoomout 0.5s forwards ease-out;
}
.card-out:hover .case-pic{
animation: zoomin 0.5s forwards ease-in;
}
@keyframes zoomin {
0% {
transform: scale(1)
}
100% {
transform: scale(1.1)
}  
}
@keyframes zoomout {
0% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}  
}
.case-tag{
position: absolute;
display: inline-block;
font-size: 14px;
font-weight: 700;
line-height: 1;
padding: 7px 20px;
background-color:#fef251 ;
color: #09365b;
border:solid 1px #09365b;
border-radius: 10px;
z-index: 1;
top:3px;
left: 0;
}
.case-card{
border:solid 1px #09365b;
border-radius: 10px;
margin-top: -3px;
overflow: hidden;
background-color: #fff;
}
.case-pic{
width: 100%;
height: 0;
padding-top: 65%;
background-size: cover;
}
.card-info{
width: calc( 100% - 20px );
padding: 10px 0;
border-bottom: solid 1px #d3d3d3;
margin-left: 10px;
display: flex;
align-items: center;
}
.info-l{
display: inline-block;
color: #ff779c;
font-size: 28px;
font-weight: 900;
white-space: nowrap;
}
.info-r{
display: inline-block;
color: #09365b;
font-size: 15px;
font-weight: 500; 
padding-left: 5px;
line-height: 1.2;
}
.info-r.fix{
padding-left: 0;
padding-right: 5px;
}
.sw-bt{
display: none;
} 
.inter-box.silver-star{
  background-image:  url(../images/silver-bg-1.svg),url(../images/silver-bg-2.svg);
  background-position:  center left, right center;
  background-size: 280px 393px, 280px 393px;
  background-repeat: no-repeat;
}
@media (max-width:1640px){
  .flot2{
left: 0;
width: 240px;
top:560px
  } 
.sleep-arr {
    background-position: top 80px center;
}  
.table1 {
  position: absolute;
  bottom: -80px;
  right: -260px;
}
.bed1 {
  position: absolute;
  left: -60px;
  top: 94px;
} 
.ball2{
  right:20px;
}
.inter-box.silver-star a{
  width: 65%;
  max-width: 330px;
}
}  
@media (max-width:1450px){    
.rela-arr {
    background-image: url(../images/hi.svg),url(../images/relabg-m.svg);
    background-position: bottom left,top 80px center;
}  
.flot2{
    left: -50px;
    width: 200px;
    top:500px
 } 
 .ball2{
  width: 135px;
  position: absolute;
  right: 0;
  top:40%;
}  
.sleep-arr {
    background-position: top 80px center;

}  
.table1 {
  width: 600px;
  position: absolute;
  bottom: -110px;
  right: -160px;
}
.bed1 {
  width: 640px;
  position: absolute;
  left: -60px;
  top: 194px;
}
.pos1 {
    width: 160px;
    top: 100px;
    left: 18%;
}
.pos2 {
  width: 200px;
  top: 35%;
  left: 0;
}
.pos3 {
  width: 130px;
  bottom: 7%;
  left: 25%;
}
.pos4 {
  max-height: 73vh;
  bottom: 0;
  right: -100px;
}
  }      
@media (max-width:1260px){
  .copyright {
    width: 100%;
    text-align: center;
  }  
  .ball2{
display: none;
  }  
.plat-box{
  width: calc( 100% - 40px );
}  
  .flot2{
display: none;
  }  
body{
overflow-x: hidden;
}
.talk-box {
width: 139px;
position: absolute;
z-index: 3;
top: -70px;
left: -20px;
}
.main-link li a {
font-size: 15px;
padding: 0 12px;
position: relative;   
}  
.banner {
overflow: hidden;
}
.slogan {
width: 31vw;
position: absolute;
left: 13vw;
top: 50%;
transform: translateY(-40%);
}
.main-v {
width: 70vw;
}
.clock {
left: 33vw;
}
.main-box {
width:  1200px;
padding: 30px 0;
max-width: 1260px;
margin: 0 auto;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.table span,.chat span{
left:100px;
}
.room span,.bed span{
right:100px;
}

}
@media (max-width:1024px){
.main-link li a {
    padding: 0 4px;
}  
.logo1 {
   height: 26px;
}
.forum {
  padding: 0 16px;
  margin-left: 0;
}
.map{
    width: 52%;
    height: auto;
 }  
.pos-st {
  width: 86%;
  max-width: 800px;
  padding: 80px 30px 30px 30px;
}  
.swiper-wrapper.fix .swiper-slide {
  width: 50%;
  height: auto;
  padding: 0 10px;
} 
.food-arr {
min-height: calc( 100vh - 113px );
}
.food-tit {
padding-top: 140px;
padding-bottom: 80px;    
} 
.picker {
display: none;
} 
.food-st1{
width: 86%;
padding: 80px 30px 30px 30px;
position: static;
margin: 0 auto;
transform: translate(0,0);
}
.food-st2 {
width: 86%;
max-width: 800px;
padding: 80px 30px 30px 30px;
}
.mpicker {
width: 100px;
display: inline-block;
position: absolute;
left: 50%;
top:-50px;
transform: translateX(-50%);
} 
.food-box{
height: calc( 100vh - 113px );
} 
.hide-md{
display: none;
}
.show-md{
display: block;
}
.main-box {
width:  100%;
padding: 30px 20px;
position: static;
transform: translateX(0);
}
.talk-box{
width: 110px;
position: absolute;
z-index: 3;
top: -70px;
left: -20px;
}
.mic{
position: absolute;
width: 120px;
right: 5px;
top:-130px;
z-index: 0;
}  
.c-left {
width: 75%;
padding-right:40px;
}
.checkform{
width: 100%;
max-width: 720px;
margin-right: auto;
margin-left: auto;
}
.checkbox:nth-child(1){
margin-left: 0;
}
.checkbox:nth-child(6){
margin-top: -36px;
margin-left: -130px;
}
.checkbox:nth-child(7){
margin-top: -36px;
}
.checkbox:nth-child(8){
margin-top: -36px;
}
.checkbox:nth-child(9){
margin-top: -36px;
}
.checkbox:nth-child(10){
  margin-top: -36px;
  }
.checkbox label{
width: 130px;
height: 148px;
background-image: url(../images/ckbg.png);
background-size: cover;
cursor: pointer;
position: relative;
margin: 0 6px;
}
.checkbox label img{
height: 40px;
width: auto;
position: absolute;
top:45%;
left: 50%;
transform: translate(-50%,-50%);
}
.checkbox label span{
font-size: 16px;
font-weight: 500;
color: #00468c;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}
.tab-box {
padding: 0 20px;
}
.table span,.chat span,.room span,.bed span{
opacity: 1;
}
.table span,.chat span{
left: -20px;
}
.room span,.bed span{
right: -20px;
}
.table:hover span,.chat:hover span,.room:hover span,.bed:hover span{
animation: none;
}
.cl-box {
width: 362px;
height: 362px;
padding: 0;
}
.cl-tit {
font-size: 24px;
padding-bottom: 15px;
}
.cl-sub {
font-size: 15px;
line-height: 34px;
background-size: auto 30px;
}
.cl-dis {
font-size: 14px;
font-weight: 500;
color: #09365b;
line-height: 1.6;
padding: 15px 0 20px 0;
}
.table span, .chat span ,.room span, .bed span {
font-size: 15px;
width: 132px;
line-height: 42px;
border-radius: 21px;
background-color: #09365b;
padding: 0 20px;
}
.table span img, .chat span img, .room span img, .bed span img {
margin-top: 16px;
}
.alerm {
display: none;
}
}
@media (max-width:768px){
.map-box {
height: 645px;
}  
.map {
    width: 34%;
    height: auto;
}  
  .case-video {
    padding: 20px;
}
.case-right {
  width: 400px;
  padding-left: 20px;
}
.pos1,.pos2,.pos3,.pos4,.bed1,.table1{
  display: none;
}
.games a img {
  height: 100px;
}  
.fd-score{
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
} 
.score-l{
width: 100%;
padding-bottom: 30px;
}
.score-r{
width: 100%;
padding-left: 0;
}
.ans-l {
width: 100%;
  padding-right: 0;
}  
.ans-r {
width: 100%;
padding-left: 0;
}
.fd-secction-1 {
  background-position: top 60px center;
}
.fd-ans {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  padding: 20px 20px 80px 20px;
  align-items: center;
} 
.food-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.swiper-wrapper.fix {
flex-wrap: nowrap;
justify-content: flex-start; 
}
.swiper-wrapper.fix .swiper-slide {
  width: 100%;
  height: auto;
  padding: 0 10px;
}   
.food-box {
height: calc( 100vh - 151px );
} 
.food-tit {
padding-top: 100px;
padding-bottom: 60px;    
}  
.time-tab.tab-b {
width: 100%;
margin-left: 0;
} 
.bt-25 {
left: 50%;
transform: translate(-50%,-50%);
}
.time-tab.tab-c {
max-width: 100%;
margin-left: 0;
}
.bt-60 {
left: auto;
right: 5.4%;
}
.tri {
position: absolute;
top: -20px;
left: 11.5%;
}
.tab-c .tri {
left: auto;
right: 11.5%;
}
.secction-f {
height: auto; 
min-height: 0;
}
.old {
width: 166px;
height: auto;
position: absolute;
right: -20px;
bottom: -140px;
} 
.links{
padding-top: 10px;
}
.speaker-indo {
position: absolute;
top: 60%;
left: -10px;
}
.s-name {
font-size: 15px;
padding: 10px 20px;
} 
.aa1{left: -10px;}
.voit {
font-size: 12px;
} 
.a1,.a2,.a3,.a4,.b1,.b2,.b3,.b4,.c1,.c2,.c3,.c4,.d1,.d2,.d3,.d4{
margin: 0 0 30px 0 ;
}  
.s-profile {
font-size: 12px;
line-height: 1.3;
padding: 5px 10px;
}  
.chart-tit {
font-size: 18px;
padding-bottom: 5px;
}
.bar-h {
width: calc( 100% - 10px);
margin-left: 5px;
}
.bar-dw span {
font-size: 13px;
}
.bar-up {
height: 100px;
border-bottom: solid 1px #00468c;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-top: 20px;
}
.bar-dw {
padding-top: 10px;
height: 65px;
}
.percent {
font-size: 14px;
font-weight: 700;
color: #00468c;
position: absolute;
top: -20px;
} 
.checkform{
width: 100%;
max-width: 500px;
}
.checkbox:nth-child(1){
margin-left: 0;
}
.checkbox:nth-child(3){
margin-right: 0;
}
.checkbox:nth-child(4){
  margin-top: -30px;
 margin-left: 50px;
}
.checkbox:nth-child(5){
margin-top: -30px;
margin-right: 50px;
}
.checkbox:nth-child(6){
margin-top: -30px;
margin-left: 0;

}
.checkbox:nth-child(7){
margin-top: -30px;    
margin-left: 0;
}
.checkbox:nth-child(8){
margin-top: -30px;
}
.checkbox:nth-child(9){
margin-top: -30px;
} 
.checkbox:nth-child(10){
  margin-top: -30px;
  }   
header {
padding: 0 15px;
}  
.mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh; 
background-color: rgba(0, 0, 0, 0.25);
z-index: 9;
display: none;
}  
.mask.active{
display: block;
}
.nav-box {
height: 60px;
} 
.logo-box {
top: 15px;
}
.logo1 {
height: 30px;
}
.logo2 {
height: 26px;
}
.logo3 {
height: 26px;
}
.logo-box a:nth-child(2) {
margin: 0 10px;
padding-left: 10px;
}
.menu-box{
display: none;
position: fixed;
top:60px;
left: 0;
width: 100%;
text-align: center;
background-color: #fff;
z-index: 99;
}
.menu-box.active{
display: block;
}  
.menu-box ul {
display:block;
}
.main-link li {
display: block;
position: relative;
}
.sec-out {
display: none;
padding-top: 0;
position: static;
transform: translateX(0);
}
.sec-out.active{
display: block !important;
}
ul.second {
width: 100%;
padding: 15px 0;
box-shadow: none;
background-color: #f7f7f7;
border-radius: 0;
border-bottom: solid 1px #d3d3d3;
}
.second li a {
font-size: 17px;
display: block;
line-height: 36px;
color: #494949;
padding: 0 20px;
}
.has-second:hover .sec-out{
display: none;
}
.has-second{
background-image: url(../images/dw.svg);
background-position: top 30px right 20px;
background-repeat: no-repeat;
background-size: 16px 9px;
}
.has-second.active{
background-image: url(../images/up.svg);
}
.main-link li a.upper{
display: block;
font-size: 17px;
line-height: 70px;
padding: 0 ;
border-bottom: solid 1px #d3d3d3;
}
.main-link li a.upper.fix{
border-bottom: none;
}
.main-link li .upper:before {
content: "";
height:0;
}
.main-link li .upper:hover:before {
transform: scaleX(0);
}
.forum {
margin-left: 0;
margin-top: 10px;
margin-bottom: 30px;
}
.button_container {
position: absolute;
top: 10px;
right: 15px;
height: 40px;
width: 40px;
cursor: pointer;
z-index: 100;
background-color:#23c0e2 ;
border-radius: 50%;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .9;
}
.button_container.active .top {
-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
transform: translateY(8px) translateX(0) rotate(45deg);
background-color: #fff;
}
.button_container.active .middle {
opacity: 0;
}
.button_container.active .bottom {
-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
  transform: translateY(-8px) translateX(0) rotate(-45deg);
background: #fff;
width: 20px;
left: 10px;
}
.button_container span {
border: none;
height: 2px;
width: 100%;
position: absolute;
top: 11px;
left: 10px;
transition: all .35s ease;
cursor: pointer;
background-color: #fff;
width: 20px;
}
.button_container span:nth-of-type(2) {
top: 19px;
}
.button_container span:nth-of-type(3) {
top: 27px;
width: 10px;
left: 20px;
}
.main-v {
width: 80vw;
}
.slogan {
width: 260px;
left: 120px;
}
.talk {
left: 30px;
}
.ytbox {
display: block;
width: 100%;
height: 0;
padding-top: 60%;
border-radius: 10px;
margin: 0 auto 50px auto;
background-size: cover;
position: relative;
}
.c-left {
width: 70%;
padding-right: 10px;
}
.c-right {
width: 30%;
}
.secction-b {
height: auto;
}
.bt-box {
padding-top: 0;
text-align: center;
}
.ball {
width: 68px;
height: 78px;
position: absolute;
z-index: 0;
top: auto;
left: 5px;
bottom: -20px;
}
.fix-right {
position: absolute;
top: 60px;
right: 0;
}
.ab-row {
padding-top: 60px;
}
.ab-r {
padding-top: 80px;
width: 250px;
}
.ab-r-1 {
width: 250px;
}
.main {
background-color: #c5f5ff;
height: auto;
min-height: calc( 100vh - 115px );
padding-top: 60px;
}
.open {
position: absolute;
left: 30px;
top: 0;
}
}
@media (max-width:428px){
  .inter-box.silver-star{
    background: transparent;
  }
  .food-st1 p.fix {
    margin-top: -10px;
}  
  .case-text p {
    font-size: 13px;
    margin-bottom: 20px;
} 
.case-right p {
  font-size: 13px;
}
  .mcard-text.fixt {
    text-indent: 0;
    padding: 15px 8px;
} 
  .rela-ans{
     margin-top: 0;
     padding: 0 6px;
     line-height: 1.3;
   } 
  .case-text h3 {
font-size: 15px;
}  
.pnotice{
 display:block;
 font-size:14px ;
 color: #474752;
 padding-top: 15px;
}  
.pnotice img{
 width: 20px;
 height: 20px;
 margin: -2px 3px 0 3px;
 } 
.step-container{
display: block;
overflow: hidden;
padding-top: 30px;
} 
.w-100.carfix{
  display: block;
 max-width: 237px;
 margin: 0 auto;
}  
  .pro-tit {
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 20px;
    color: #0A365B;
} 
  .case3-view{
    height: 720px;
  }
  .csae3-info{
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 30px 20px 0 20px;
  }
  .case3-folt{
    width: 165px;
    height: auto;
    position: absolute;
    top:194px;
    left: 0;
    transform: translateX(0);
    z-index: 3;
  }
  .case3-1{
    width: 266px;
    height: auto;
    position: absolute;
    top:0;
    left: 38px;
  }
  .case3-2{
    width: 266px;
    height: auto;
    position: absolute;
    left:auto;
    right: 0;
    transform: translateX(0);
    bottom: auto;
    top: 205px;
    z-index: 1;
  }
  .case3-3{
    width: 266px;
    height: auto;
    position: absolute;
    right: auto;
    top:auto;
    left: 10px;
    bottom: 0;
    z-index: 2;
  }  
  .bottom-container {
    padding-top: 30px;
} 
.c3mq1-1,.c3mq1-2,.c3mq1-3 ,.c3mq1-4,.c3mq1-5 ,.c3mq1-6,.c3mq1-7 ,.c3mq1-8,.c3mq1-9  ,.c3mq1-10,.c3mq1-11 ,.c3mq1-12{
  max-height: 100%;
  width: auto;
  height: 58px;
   bottom: auto;
   top: -30px;
 } 
.c2mq1-1,.c2mq1-2,.c2mq1-3 ,.c2mq1-4,.c2mq1-5 ,.c2mq1-6,.c2mq1-7 ,.c2mq1-8,.c2mq1-9  ,.c2mq1-10,.c2mq1-11 ,.c2mq1-12,.c2mq1-13,.c2mq1-14,.c2mq1-15,.c2mq1-16,.c2mq1-17{
 max-height: 100%;
 width: auto;
 height: 58px;
  bottom: auto;
  top: -30px;
} 
.c3mq1-9{
  left: 20px;
}
.c3mq1-12{
  left: 0;
}
.c3mq1-2{
  left: 0px;
 } 
.c3mq1-3{
  left: -10px;
  height: 67px;
 } 
 .c3mq1-5{
  height: 66px;
  left: -10px;
 } 
 .c3mq1-7{
  height: 66px;
  left: auto;
  right: 10px;
 }
.c2mq1-2{
 right: 0;
} 
.c2mq1-6{
  left: 0;
} 
.c2mq1-8{
  right: -5px;
 } 
 .c2mq1-10{
   right: 10px;
 }   
.fb-box-2{
  display: none;
} 
.fb-box-2-1{
  display: block;
  overflow: hidden;
  padding: 0 20px;
} 
.fb-col-6{
  width: 100%;
  flex-direction: column;
  padding: 10px 0;
} 
.pt-x {
  padding-top:0;
} 
  .fore-bt {
    padding-bottom: 20px;
}  
 .case2-video {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    position: relative;
    padding-top: 50px;
} 
.c2tit {
  position: absolute;
  font-weight: 700;
  text-align: center;
  top:0;
  left: 0;
width: 100%;
}
.c2-left {
  width: 100%;
  order: 1;
}
.c2-right {
  width: 100%;
  padding-left: 0;
  order: 2;
  padding-top: 20px;
  font-size: 13px;
}
.c2-right.fix{
  padding-right: 0;
}
  .fore-tit {
    font-size: 18px;
    color: #0A365B;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    padding: 10px 20px 15px 20px;
}    
  .map-bt.fix {
    padding-bottom: 0;
} 
  .sum-tit {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: #474752;
    padding: 10px 0 20px 0;
} 
.sum-bar {
  font-size: 20px;
  line-height: 1.3;
  padding: 15px 0 15px 10px;
} 
  .sum-box {
    width: calc( 100% - 40px );
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
    margin: 0 auto;
} 
  .interbox {
    padding: 30px 20px;
    font-size: 13px;
}  
  .inter-tit {
text-align: center;
    padding-bottom: 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
} 
.case-tab-bt.fixa {
  width: 200px;
  margin-right: 10px;
}
.sum-box .swiper-wrapper{
    flex-direction: row;
  }  
.pro-list .map-bt {
padding: 0;
}  
.promom {
    width: 125px;
    height: 131px;
    position: absolute;
    top: -121px;
    left: 20px;
}  
.pro-list {
  width:  calc( 100% - 40px );
  margin-top: 30px;
}  
.slck input:checked + span {
    color: #fff;
    background: #31C1E0;
    border: solid 5px #ccf4fe;
    box-sizing: border-box;
    box-shadow: none;
}  
.slck.ans.error-1 span {
    color: #fff;
    background: #31C1E0;
    border: solid 5px #ccf4fe;
  box-sizing: border-box;
  box-shadow: none;
}
.slck.error-1 span {
  color: #fff;
  background: #31C1E0;
  border: 3px solid #B71000;
  box-sizing: border-box;
  box-shadow: none;
}  
.slck.ans span {
  color: #B71000;
  border: 3px solid #B71000;
  box-shadow: none;
}
.mcase2-img,.pro-img{
  display: block;
  overflow: hidden;
}  
.pro-img{
  width: calc( 100% - 40px );
  margin: 0 auto;
  background-image: url(../images/probg.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding: 20px 10px;
}
  .case2-tit {
    width: 100%;
    padding: 100px 0 10px 0;
    font-size: 24px;
    font-weight: 700;
}
  .fb-container-a, 
  .fb-container-b, 
  .fb-container-c{
    display: block;
    overflow: hidden;
  }  
  .cmq1, .cmq2, .cmq3, .cmq4, .cmq5, .cmq6,.cmq1-1,.cmq1-2,.cmq1-3,.cmq1-4,.cmq1-5,.cmq1-6,.cmq1-7,.cmq1-8{
    width: auto;
    height: 58px;
  } 
.cmq2{
  top: -30px;
  right: 0;
  left: auto;
  transform: translateX(0);
} 
.cmq6,.cmq1-5,.cmq1-4{
  top: -30px;
}
.quo-container{
  display: block;
  padding-top: 35px;
  width: 320px;
  height: 344px;
  background-image: url(../images/mquo.svg);
  background-repeat: no-repeat;
  background-size: 320px 344px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}  
  .quo-tit {
    padding: 0;
    margin-bottom: -15px;
}  
.map-container{
    display: block;
    position: relative;
    overflow: hidden;
    padding-top: 20px;
  } 
  .mcard-out {
    width: 240px;
    height: 100%;
    margin: 0 auto;
    height: auto;
    border: 1px solid #0A365B;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
}  
.map-bt{
  display: block;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}  
.case-mid-tit {
    padding: 20px 0 16px 0;
}  
.map-box {
  height:auto;
  }  
.mcard-box {
display: none;
}  
 .map {
 width: 100%;

}  
.hide-xs{
  display: none;
}
.show-xs{
  display: block;
} 
.design{
  display: inline-block;
  margin-left: 0;
  font-size: 9px;
}
.swiper-wrapper.hide-ss {
  display: none;
}
.swiper-wrapper.show-ss {
  display: flex;
}
 .cloud3 {
    width: 90px;
    top: -50px;
    right: -5px;

} 
.cloud3.fix {
  width: 90px;
  top: -30px;
  right: -10px;

} 
.cloud4 {
  width: 47px;
  top: 29px;
  left: -20px;

} 
.mom2 {
  width: 73px;
  position: absolute;
  top: -72px;
  right: 40px;
  z-index: 2;
}
.dad2 {
  width: 116px;
  bottom: -10px;
  right: 20px;

}
  .plat-box {    
    width: calc( 100% - 40px );
    padding: 40px 24px 30px 24px;
  }
  .plat-text{
    font-size:20px;
  padding-bottom: 30px;
  }
  .plat-box .logo-item{
    width: 50%;
    height: 184px;
    margin-bottom: 10px;
    padding: 0 10px;
    text-align: center;
    cursor: pointer;
  }
  .plat-box .logo-item img{
    width: 80%;
  }
  .logo-info{
  box-shadow: 0px 2px 0px #31C1E0;
  border-radius: 20px;
  padding: 7px;
  font-size: 14px;
  line-height: 1.3;
  }

.pos-st p {
    font-size: 20px;
    line-height: 1.5;
} 
.slckbox {
  padding: 5px 0 0 0;
}
.slck {
    min-width: 50%;
    padding: 0 5px 7px 5px;
    margin-bottom: 0;
    cursor: pointer;
} 
.pos-secction {
    background-image: url(../images/mp3bg.svg);
    background-position: top 60px center;
    background-size:428px auto;
    padding-bottom: 60px;
} 
.sel-secction {
  background-image: url(../images/mp4bg.svg);
  background-position: top 60px center;
  background-size:428px auto;
  padding-bottom: 60px;
} 
.rela-secction {
  background-image: url(../images/mp5bg.svg);
  background-position: top 60px center;
  background-size:428px auto;
  padding-bottom: 60px;
} 
.game-box.fix {
    width:calc( 100% - 60px ) ;
} 
.fd-score.fix {
    padding: 0 20px 40px 20px;
    margin-top: -14px;
} 
.fd-score.fix .score-l {
  width: 100%;
  padding: 0 30px 20px 30px;
}
.pos-tab.active{
display: block;  
padding: 15px 0 0 0; 
text-align: center;
}  
.ans1,.ans2,.ans3,.ans4,.ans5,.ans6,.ans7,.ans8,.ans9,.ans10{
display: none;
}  
.pos-st {
  padding: 70px 15px 30px 15px;
} 
.pos-st.fix {
  padding: 70px 15px 10px 15px;
} 
.plat-arr{
  background-image: url(../images/mplat-bg.svg);
  background-position: top 60px center;
  background-size: 428px auto;
  min-height: calc( 100vh - 151px );
  height: auto;
  overflow: hidden;
  padding-bottom: 140px;
}
.stand-arr {
  background-image: url(../images/mpos2-bg.svg);
  background-position: top 20px center;
  background-size: 428px auto;
  min-height: calc( 100vh - 151px );
  height: auto;
  overflow: hidden;
  } 
.walk-arr {
background-image: url(../images/mpos2-bg.svg);
background-size: 428px auto;
min-height: calc( 100vh - 151px );
background-position: top center;
height: auto;
overflow: hidden;
} 
.pos-arr {
  background-image: url(../images/mpos1-bg.svg);
  background-size: 428px auto;
  min-height: calc( 100vh - 151px );
  background-position: top -55px center;
  height: auto;
  overflow: hidden;
}  
.sleep-arr {
  background-image: url(../images/msleepbg.svg);
  background-size: 428px auto;
  min-height: calc( 100vh - 151px );
  background-position: top -30px center;
  height: auto;
  overflow: hidden;
} 
.rela-arr {
  background-image: url(../images/mrelabg.svg);  
  background-size: 428px auto;
  background-position: top 60px center;
  min-height: calc( 100vh - 151px );
  height: auto;
  overflow: hidden;
}
.rela-arr.active{
  background-position: top center;
  background-image: url(../images/mrq3.svg); 
  min-height: 1064px;
}
.game-box {
  max-width: 340px;
  background-color: #fff;
  border: 1px solid #0A365B;
  box-sizing: border-box;
  box-shadow: 0px 8px 0px #09365b;
  border-radius: 16px;
  text-align: center;
  padding: 30px 15px 10px 15px;
  margin: 0 auto;
} 
.games {
display: flex;
padding:0;
flex-wrap: wrap;
padding-top: 20px;
} 
.games a {
width: 50%;
display: block;
position: relative;
text-align:center;
padding: 0 10px 20px 10px;
margin-bottom: 20px;
}
.fd-score{
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
} 
.score-bt{
display: flex;
justify-content: center;
}
.score-l{
width: 100%;
padding: 0 30px 20px 30px;
}
.score-r{
width: 100%;
padding-left: 0;
} 
.swbt{
display: block;
margin-bottom: 20px;
}  
.swiper-slide .w-80{
width: 40%;
}
.fd-text {
font-size: 12px;
padding: 5px 0 20px 0;
}
.fd-text span{
font-size: 24px;
}
.fd-info{
font-size: 16px;
line-height: 1.4;
padding-bottom: 20px;
}
.fd-ans {
max-width: 340px;
width: calc( 100% - 60px );
display: flex;
flex-direction: column-reverse;
padding: 20px 20px 0 20px;
align-items: center;
text-align: center;
margin: -30PX auto 0 auto;
} 
.ans-tit.fix {
display: inline-block;
padding-right: 20px;
background-image: url(../images/Icon1.svg);
background-repeat: no-repeat;
background-position: top 5px right;
}
.ans-tit.fix.active {
background-image: url(../images/Icon2.svg);
background-position: top 10px right;
}
.food-container {
display: none;
} 
.food-container.active {
display: block;
} 
.ans-r {
  width: 100%;
} 
.ans-check {
padding-bottom: 30px;
}
.ck-1,.ck-2,.ck-3,.ck-4,.ck-5,.ck-6{
width: 24px;
}
.ck-1{
position: absolute;
top:40px;
right: 70px;
z-index: 3;
}
.ck-2{
position: absolute;
top:40px;
left: 50px;
z-index: 3;
}
.ck-3{
position: absolute;
top:60px;
left: 105px;
z-index: 3;
}
.ck-4{
position: absolute;
top:60px;
right:110px ;
z-index: 3;
}
.ck-5{
position: absolute;
bottom:30px;
left: 120px;
z-index: 3;
}
.ck-6{
position: absolute;
bottom: 30px;
right: 125px;
z-index: 3;
}
.food-st1 {
  width: 86%;
  padding: 60px 15px 20px 15px;
} 
.food-st1 p {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #474752;
  margin-bottom: 20px;
}  
.food-st2 {
padding: 70px 15px 30px 15px;
} 
.food-box {
height: auto;
padding-bottom: 80px;
} 
.food-tit {
font-size: 24px;
padding-top: 100px;
padding-bottom: 70px;
font-weight: 500;
}  
.fd-list{
height: 42vh;
}
.fd-name {
display: block;
font-size: 13px;
line-height: 1.3;
}
.ckcircle {
width: 26px;
}
.fd-price {
font-size: 20px;
} 
.food-st2 p {
font-size: 15px;
font-weight: 300;
line-height: 1.3;
} 
.food-st2 p.bd,.pos-st p.bd {
  padding-top: 0;
  }
.open {
left: 15px;
top: 0;
width: 101px;
}
.fd-col {
width: 50%;
}
.food-arr{
background-image: url(../images/mfoodbg.svg);
background-size: 428px auto;
min-height: calc( 100vh - 151px );
height: auto;
overflow: hidden;
} 
body{
overflow-x: hidden;
} 
.secction-a{
width: 100%;
height: 613px;
min-height: 613px;
background-image: url(../images/mbg1.svg);
background-repeat: no-repeat;
background-size: 428px 613px;
background-position: bottom center;
}
.secction-b{
width: 100%;
height: 1211px;
background-image:url(../images/mbg2-1.svg), url(../images/mbg2.png);
background-repeat: no-repeat;
background-size:428px auto, 428px 1211px;
background-position: top 340px center,top center;
overflow: hidden;
}
.secction-c{
width: 100%;
height: 753px;
background-image: url(../images/mbg3.png);
background-repeat: no-repeat;
background-size: 428px 753px;
background-position: top center;
}
.secction-d{
width: 100%;
height: 845px;
background-image: url(../images/mbg4.png);
background-repeat: no-repeat;
background-size: 428px 845px;
background-position: top center;
overflow: hidden;
}
.secction-e{
width: 100%;
height: 1035px;
background-image: url(../images/mbg5.png);
background-repeat: no-repeat;
background-size: 428px 712px;
background-position: top center;
overflow: hidden;
}
.secction-f{
width: 100%;
height: auto;
min-height: 0;
background-image: url(../images/mbg6.png);
background-repeat: no-repeat;
background-size:428px 1127px;
background-position:top center;
background-color: #68e4ff;
overflow: hidden;
}
.banner {
height: 613px;
} 
.food {
width: 93px;
height: auto;
top: auto;
bottom: 338px;
left: -20px;
}  
.clock {
width: 103px;
top:40px;
left: 50%;
}
.kid{
width: 91px;
right: 10px;
top:110px;
}
.talk{
width:87px;
left: 50px;
bottom: 178px;
}
.main-v{
width: 100%;
left: -30px;
}
.slogan{
width: 252px;
top:190px;
transform: translate(-50%,0);
left: 50%;
}
.hide-xx{
display: none; 
}
.show-xx{
display: block;
}
.scroll{
bottom: -42px;
width: 84px;
height: 84px;
background-image: url(../images/mscroll.svg);
background-size:26px auto;
background-position: top 10px center;
}
@keyframes move {
0% {
background-position: top 10px center;
}
50% {
background-position: top 14px center;
}
100% {
background-position: top 10px center;
}  
}
.scroll span {
width: 32px;
height: 6px;
bottom: 14px;
}
.ytbox span {
width: 50px;
height: 50px;
}
.ytbox {
margin: 0 auto 45px auto;
}
.h-title {
padding-top: 80px;
font-size: 24px;
padding-bottom: 15px;
background-size: auto 26px;
margin-bottom: 30px;
}
.d-title {
font-size: 24px;
background-size: 100% 24px;
letter-spacing: 1px;
max-width: 320px;
margin: 0 auto;
}
.content-row {
padding-left: 70px;
display: block;
}
.bt-box {
padding-top: 30px;
padding-left: 70px;
}
.c-right {
width: 100%;
}
h5{
font-size: 15px;
}
p{
font-size: 13px;
line-height: 1.8;
letter-spacing: 0.1em;
margin-bottom: 15px;
}
.mt-a,.mt-b {
margin-top: 0;
}
.flot {
width: 143px;
position: absolute;
left: -10px;
top: -250px;
z-index: 3;
}
.c-title {
padding-top: 0;
font-size: 24px;
padding-bottom: 15px;
background-size: auto 24px;
margin-bottom: 0;
}
.c-sub {
padding-bottom: 20px;
font-size: 13px;
}
.sw-bt{
padding-top: 30px;
display: block;
text-align: center;
}
.button-next{
display: inline-block;
width: 64px;
height: 64px;
background-color: #00468c;
background-image: url(../images/next.svg);
background-size:11px auto ;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
margin: 0 10px;
border-radius: 50%;
}
.button-prev{  
background-image: url(../images/prev.svg);
display: inline-block;
width: 64px;
height: 64px;
background-color: #00468c;
background-size:11px auto ;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
margin: 0 10px;
border-radius: 50%;
}
.swiper-button-disabled{
background-color: #afafaf;
}
.d-text{
font-size: 13px;
line-height: 1.6;
padding-top: 25px;
padding-bottom: 40px;
}
.checkbox label{
width: 91px;
height: 102px;
background-image: url(../images/ckbg.png);
background-size: cover;
cursor: pointer;
position: relative;
margin: 0 5px;
}
.checkbox label img{
height: 32px;
width: auto;
position: absolute;
top:45%;
left: 50%;
transform: translate(-50%,-50%);
}
.checkbox label span{
font-size: 13px;
bottom: 15px;
}
.checkbox:nth-child(1){
margin-left: 0;
}
.checkbox:nth-child(3){
margin-right: 0;
}
.checkbox:nth-child(4){
margin-top: -20px;
margin-right:0;
margin-left:40px;
}
.checkbox:nth-child(5){
margin-top: -20px;
margin-right: 40px;
}
.checkbox:nth-child(6){
margin-top: -20px;
margin-right: 0;

}
.checkbox:nth-child(7){
margin-top: -20px;    
margin-left: 0;
}
.checkbox:nth-child(8){
margin-top: -20px;
}
.checkbox:nth-child(9){
margin-top: -20px;
} 
.checkbox:nth-child(10){
  margin-top: -20px;
  } 
.ck-bt {
width: 100%;
padding-top: 50px;
text-align: center;
}
.checkform {
margin-top: 20px;
max-width: 340px;
}
.chart-box {
padding: 20px 20px 0 20px;
display: flex;
flex-direction: column;
width: 100%;
margin-left: 0;
}
.chart-col {
width: 100%;
margin: 0 0 20px 0;
}
.chart-com {
font-size: 13px;
text-align: left;
}
.percent {
font-size: 13px;
}
.num {
width: 16px;
height: 16px;
font-size: 11px;
line-height: 16px;
bottom: -8px;
}
.container-box.fixb {
padding: 0;
}
.card-out .case-pic {
animation: none;
}
.card-out:hover .case-pic{
animation: none;
}
.video .close {
position: absolute;
right: -20px;
top: -20px;
z-index: 999;
font-size: 1.5rem;
font-weight: normal;
color: #fff;
opacity: 1;
}
.mom {
width: 123px;
height: 130px;
position: absolute;
right: -10px;
top: 0;
}
.e-title {
padding-top: 40px;
font-size: 24px;
padding-bottom: 15px;
background-image: url(../images/titbg-3.svg);
background-size: auto 24px;
}
.inter-box {
padding-top: 0;
display: flex;
width: calc( 100% + 20px );
margin-left: -10px;
flex-wrap: wrap;
}
.inter-box a {
margin: 0 10px;
width: calc( 50% - 20px );
padding-bottom: 15px;
margin-bottom: 20px;
}
.inter-box a span {
font-size: 14px;
width: 80%;
line-height: 38px;
}
.forum-container {
display: none;  
width: calc( 100% + 40px);
margin-top: 100px;
margin-left: -20px;
position: relative;
padding: 0 0 20px 0;
border-radius: 0;
border: solid 1px #23c0e2;
}
.forum-container-b {
  display: block;  
  width: calc( 100% + 40px);
  margin-top: 100px;
  margin-left: -20px;
  position: relative;
  padding: 0 0 20px 0;
  border-radius: 0;
  border: solid 1px #23c0e2;
  }
.speaker-row {
display: flex;
flex-direction: row ;
flex-wrap: wrap;
padding: 60px 15px 0 15px;
}
.speaker-card {
width: calc( 50% - 10px );
padding-bottom: 0;
height: auto;
border-radius: 10px;
margin: 0 5px 50px 5px;
}
.talk-box {
width: 94px;
position: absolute;
z-index: 3;
top: -20px;
left: 10px;
}
.mic {
position: absolute;
width: 100px;
right: 20px;
top: -132px;
z-index: -1;
}
.gotop {
width: 70px;
height: 70px;
bottom: -120px;
padding-top: 16px;
font-size: 12px;
line-height: 1.8;
}
.gotop img{
height: 22px;
}
.gotop.fix{
  display: inline-block;
  bottom: 0;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
footer {  
font-size: 12px;
}
.copyright{
font-size: 9px;
text-align: center;
width: 100%;
}
.fd-secction-1{
width: 100%;
height: auto;
min-height: 500px;
background-image: url(../images/mpg2bg.svg);
background-repeat: no-repeat;
background-size: 428px auto;
background-position: top 60px center; 
background-color: #fff;
padding-bottom: 60px;
}
.fd-secction-2{
  width: 100%;
  height: auto;
  min-height: 1000px;
  background-image: url(../images/mp2bg2.png);
  background-repeat: no-repeat;
  background-size: 428px 1393px;
  background-position: top center; 
  background-color: #fff;
  } 
.ab-secction-1{
width: 100%;
height: auto;
min-height: 800px;
background-image: url(../images/mp2bg1.svg), url(../images/mp2bg1-1.png);
background-repeat: no-repeat;
background-size: 428px 424px,428px 78px;
background-position: top center, bottom center; 
background-color: #fff;
padding-bottom: 10px;
}
.ab-secction-2{
width: 100%;
height: auto;
min-height: 1393px;
background-image: url(../images/mp2bg2.png);
background-repeat: no-repeat;
background-size: 428px 1393px;
background-position: top center; 
background-color: #fff;
}
.ab-secction-3{
width: 100%;
height: auto;
min-height:178px;
background-image: url(../images/mp2bg3.png);
background-repeat: no-repeat;
background-size: 428px 178px;
background-position: bottom center; 
}
.ab-tit {
padding: 100px 0 70px 0;
font-size: 24px;
font-weight: 700;
color: #09365b;
text-align: center;
line-height: 1;
overflow: hidden;
}
.ab-sub {
width: 100%;
font-size: 15px;
max-width: 300px;
margin: 0 auto;
}
.ab-text {
font-size: 13px;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.ab-chart {
padding: 30px 0;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.tab-box {
padding: 0;
width: 100%;
max-width: 330px;
margin: 30px auto 0 auto;
}
.time-col {
width: 100%;
height: auto;
display: flex;
align-items: center;
border-right:none;
border-bottom: solid 1px #e1e1e1;
padding: 20px 0;
}
.tab-box .row {
margin-right: 0;
margin-left: 0;
}
.time-col:last-child {
border-bottom: none;
}
.tab-b .time-col {
width: 100%; 
}
.time-icon {
width: 65px;
padding-left: 0;
}
.time-info {
padding: 0  0 0 20px;
flex: 1;
font-size: 13px;
color: #09365b;
font-weight: 300;
}
.timebox {
padding: 0 ;
width: 100%;
max-width: 330px;
margin: 0 auto;
}
.time-bt {
font-size: 12px;
line-height: 20px;
background-size: 4px 6px;
background-position: center right 10px;
padding-left: 10px;
padding-right: 25px;
border: solid 2px #23c0e2;
border-radius: 12px;
background-color: #fff;
}
.time-bt.active {
font-size: 13px;
background-color: #23c0e2;
border: solid 4px #caf4ff;
line-height: 24px;
border-radius: 16px;
}
.time-tab {
border: solid 1px #23c0e2;
padding: 10px 20px;
box-shadow: 0 5px 0 #90e6ff;
border-radius: 20px;
}
.tri {
height: 13px;
position: absolute;
top: -11.5px;
left: 12%;
}
.tab-b .tri {
left: 45%;
}
.tab-c .tri {
right: 13.5%;
}
.cloud1{
width: 79px;
height: auto;
position: absolute;
right: -20px;
bottom: 68px;
}
.cloud2{
width: 62px;
height: auto;
position: absolute;
left: 10px;
bottom:20px;
}
.ab-row {
padding-top: 40px;
flex-wrap: wrap;
width: 100%;
max-width: 330px;
margin: 0 auto;
}
.ab-l {
width: 100%;
}
.ab-r {
padding-top: 0;
width: 100%;
text-align: center;
}
.ab-r img.w-100{
width: 80% !important;
margin-bottom: 30px;
}
.abh3{
font-size: 15px;
padding-bottom: 10px;
width: 100%;
max-width: 330px;
margin: 0 auto;
}
.abh5{
font-size: 13px;
width: 100%;
max-width: 330px;
margin: 0 auto;
}
.abp{
font-size: 13px;
padding-bottom: 20px;
width: 100%;
max-width: 330px;
margin: 0 auto;
}
.fix-right {
width: 90px;
line-height: 32px;
font-size: 13px;
position: absolute;
top: 20px;
right: 0;
}
.ab-r-1 {
margin-top: -30px;
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.ab-r-1 .w-100{
width: 80% !important;
} 
.pl-x {
padding-left: 0;
}
.mq1{
width: 92px;
position: absolute;
top:-10px;
right: 80px;
}
.mq2{
width: 72px;
position: absolute;
top:-10px;
left: 70px;
}
.mq3{
width: 111px;
position: absolute;
top:20px;
left: -10px;
}
.mq4{
width: 96px;
position: absolute;
top:0;
left: -15px;
}
.mq5{
  width: 140px;
  position: absolute;
  top:-15px;
  left: 15px;
}
.logos{
padding-bottom: 5px;
}
.logos img{
height: 32px;
}
.logos img:last-child{
margin-right: 0;
}
.flogo1{
width: 96px;
}
.main {
background-color: #c5f5ff;
height: auto;
min-height: calc( 100vh - 151px );
padding-top: 60px;
}
.main-box {
width: 100%;
padding: 0;
margin: 0 auto;
}
.cl-box {
width: 100%;
height: auto;
background-color: #fff;
border: none;
position: static;
border-radius: 0;
transform: translate(0,0);
z-index: 9;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px 0 0 0;
background-image: url(../images/sbg.svg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
margin-bottom: 15px;
}
.cl-sub {
font-size: 14px;
line-height: 32px;
background-size: auto 28px;
}
.cl-dis {
font-size: 14px;
font-weight: 500;
color: #09365b;
line-height: 1.7;
padding: 10px 0 20px 0;
}
.exbox {
padding: 0 12px 30px 12px;
}
.room, .bed {
margin-left: -8.33%;
padding-left: 5px;
}
.table, .chat {
padding-right: 5px;
}
.table, .bed {
display: block;
width: 58.73%;
position: relative;
margin-bottom: 10px;
}
.room, .chat {
position: relative;
display: block;
width: 49.6%;
margin-bottom: 10px;
}
.table span, .chat span {
font-size: 12px;
width: 110px;
line-height: 32px;
border-radius: 16px;
background-color: #09365b;
padding: 0 15px;
position: absolute;
bottom: 10px;
left: 5px;
opacity: 1;
}
.table span img, .chat span img, .room span img, .bed span img {
width: 7px;
float: right;
margin-top: 12px;
animation: none;
}
.room span,.bed span  {
font-size: 12px;
width: 110px;
line-height: 32px;
border-radius: 16px;
padding: 0 15px;
position: absolute;
bottom: 10px;
right: 5px;
opacity: 1;
}
.show-md{
display: none;
}
.modal-body {
padding: 0 20px 20px 20px;
}
.modal-content {
border-radius: 25px;
width: 86%;
margin-left: 7%;
}
.modal-body.fix p {
font-size: 14px;
line-height: 1.5;
font-weight: 300;
padding-left: 2em;
text-indent: -2.1em;
}
.mod-tit{
font-size: 24px;
padding-bottom: 20px;
}
.pos-img {
width: 280px;
}
.posck.ans span {
border: 1px solid #B71000;
background: #FFFFFF;
background-image: url(../images/rck.svg);
background-repeat: no-repeat;
background-position: center center;
}
.posck.ans.error-1 span {
border: 1px solid #31C1E0;
background-color: #fff;
background-image: url(../images/bck.svg);
background-repeat: no-repeat;
background-position: center center;
}
.posck.ans.active span {
background-color: #B71000;
border-color: #B71000;
background-image: url(../images/wck.svg);
background-repeat: no-repeat;
background-position: center center;
}
.ps7 {
left: 82px;
top: 170px;
}
.ps8 {
right: 128px;
top: 158px;
}
.ps9 {
right: 78px;
top: 138px;
}
.anstit {
  font-size: 20px;
}
.pos-tab {
  font-size: 16px;
}
.games a span{
right: auto;
left: 50%;
transform: translateX(-50%);
}
.slck.fix{
  width: 100%;
}
.rela-bt {
  padding-top: 30px;
  display: flex;
  justify-content: center;
}
.rela-bt .fd-out-bt{
  padding: 0 50px 0 20px;
  min-width: 120px;
}
.rela-bt .fd-bt{
  padding: 0 50px 0 20px;
  min-width: 120px;
}
.fd-out-bt:hover, .fd-out-bt:focus {
  color: #09365b;
  background-color: #fff;
  border: solid 1px #09365b;
}
.work{
display: none;
width: 0;
}                
.hi{
  display: none;
  width: 0;
}
.mt-x{
  margin-top: 0px;
}
.case2-secction-1{
  background-image:url(../images/mcase2top.svg);
  background-size: 428px auto;
  background-position: top 60px center;
  position: relative;
}
.case2-secction-2{
  background-image:url(../images/mcase2mid.svg  );
  background-size: 428px auto;
  background-position: top -220px center;
  position: relative;
}
.case2-secction-3{
  background-image:url(../images/mcase2bot.svg  );
  background-size: 428px auto;
  background-position: top -90px center;
  position: relative;
  padding-bottom: 60px;
}
.case3-secction-1{
  background-image:url(../images/mcase2top.svg);
  background-size: 428px auto;
  background-position: top 60px center;
  position: relative;
}
.case3-secction-2{
  background-image:url(../images/mcase3bot.svg  );
  background-size: 428px auto;
  background-position: top -20px center;
  position: relative;
  padding-bottom: 60px;
}
.case1-secction{
  background-image:url(../images/mcase1bot.svg), url(../images/mcase1top.svg);
  background-size: 428px auto,428px auto;
  background-position: bottom -400px center, top 60px center;
  position: relative;
  padding-bottom: 60px;
}
.case-tit {
  width: 100%;
  padding: 100px 0 10px 0;
  font-size: 24px;
  font-weight: 700;
}
.case-text {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}
.case-bt-box {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  padding: 0 20px;
}
.case-tab-bt {
  width: auto;
  padding: 0 30px;
  line-height: 56px;
  border-radius: 40px;
  color: #00468C;
  font-size: 16px;
  font-weight: 500;
  margin: 0 0px 20px 0;
}
.case-tab-bt.fix{
margin-right: 10px;
}
.case-video {
  padding: 20px;
  border-radius: 10px;
  flex-direction: column;
}
.case-left {
  width: 100%;
  position: relative;
}
.case-right {
  width: 100%;
padding-left: 0;  
}
.cv-tit {
display: none;
}
.cv-h5 {
  margin-top: 15px;
}
.cv-h5.fix {
 text-align: center;
}
.rfix {
  display: block;
  margin: 15px auto;
  position: static;
}
.mt-mb{
  margin-top: 15px;
}
.mcv-tit{
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  margin-bottom: 25px;
  text-align: center;
  color: #0A365B;
  padding-top: 10px;
}
.res-container,
.res-container-c {
  position: relative;
  overflow: hidden;
}
.res-tit {
  padding: 30px 0 20px 0;
}
.case-sub-tit {
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  padding-top: 30px;
  padding-bottom: 20px;
}
.mcard-text {
  height: 190px;
  padding: 15px 10px;
  letter-spacing: 0;
}
.feedback {
 display: none;
}
.feedback.fix {
  display: flex;
  margin-bottom: 0;
  align-items: center;
  flex-direction: column;
}
.face {
  width: 118px;
  height: 118px;
}
.fb-info {
  font-size: 13px;
  padding-left: 0;
  padding-top: 10px;
  text-align: justify;
}
.case-2020 {
  font-size: 24px;
  font-weight: 700;
}
.case-2020-text {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: #474752;
  text-align: justify;
}
.mt-fix{
  margin-top: -10px;
}
}
@media (max-width:414px){
}
@media (max-width:390px){
.rela-arr.active{
  min-height: 1000px;
}
}
@media (max-width:375px){
.content-row {
padding-left: 30px;
padding-right: 20px;
display: block;
}
.bt-box {
padding-top: 30px;
padding-left: 50px;
}
.fd-score, .game-box {
  width:  calc( 100% - 60px );
}
.slck input + span, .slck span {
  padding: 0 10px;
}
.plat-text {
  font-size: 18px;
  padding-bottom: 30px;
}
.sleep-arr {
  background-image: url(../images/msleepbg.svg);
  background-size: 375px auto;
  min-height: calc( 100vh - 151px );
  background-position: top -30px center;
  height: auto;
  overflow: hidden;
} 
.fd-ans {
  padding: 20px 10px 0 10px;
  } 
.ck-5 {
    position: absolute;
    bottom: 30px;
    left: 110px;
    z-index: 3;
}  
  .ck-6 {
    position: absolute;
    bottom: 30px;
    right: 115px;
    z-index: 3;
} 
.ck-1 {
  position: absolute;
  top: 40px;
  right: 60px;
  z-index: 3;
}
.ab-secction-1{
  background-size: 400px 424px,400px 78px;
}
.fd-secction-1 {
  background-size: 375px auto;
}
.pos-secction {
  background-size:375px auto;
  padding-bottom: 60px;
}  
.sel-secction {
  background-size:375px auto;
  padding-bottom: 60px;
} 
.rela-secction {
  background-size:375px auto;
  padding-bottom: 60px;
} 
.rela-arr.active{
  background-position: top 30px center;
  min-height: 960px;
}
.case1-secction{
  background-image:url(../images/mcase1bot.svg), url(../images/mcase1top.svg);
  background-size: 375px auto,375px auto;
}
.case2-secction-1{
  background-image:url(../images/mcase2top.svg);
  background-size: 375px auto;
}
.case2-secction-2 {
  background-size: 375px auto;
}
.case2-secction-3 {
  background-size: 375px auto;
}
.case3-secction-1{
  background-image:url(../images/mcase2top.svg);
  background-size: 375px auto;
}
.case3-secction-2 {
  background-size: 375px auto;
}
}
@media (max-width:360px){  
.logo1 {
    height: 22px;
}
.content-row {
padding-left: 20px;
}
.check-img {
 padding: 0 10px;
}
.game-tit {
  font-size: 18px;
}
.slck input + span, .slck span {
  padding: 0 10px;
  font-size: 14px;
}
.s-name {
  font-size: 14px;
  padding: 10px 15px;
}
.s-name.fix {
  line-height: 1.3;
  padding: 6px 15px;
}
}