@import url('reset.css');
@import url('g_style.css');

.header{overflow: hidden;}
.content{float: left; width: 640px;overflow: hidden;}
.nav_r{margin-right: 0px;}
.nav_r2{float: right;margin-right: 32px;}
.nav{padding: 0;float: right; width: initial;margin-right: 30px;}

.fancybox-close{background-image: url(../img/btn_close.png);width: 46px;height: 49px;}
.fancybox-skin{background: none;}
.fancybox-opened .fancybox-skin{box-shadow:none;}

.banner{float: left; width: 640px;height: 369px;}
.banner1{float: left; width: 640px;height: 369px;background-image: url(../img/ns_banner01.png);}
.banner2{float: left; width: 640px;height: 369px;background-image: url(../img/ns_banner02.png);}

.ns_switch{float: left;width: 640px;height: 106px;}
.btn_ph{float: left;width: 314px;height: 106px;background-image: url(../img/ns_m_btn_ph.png);cursor: pointer;}
.btn_ph_h{float: left;width: 314px;height: 106px;background-image: url(../img/ns_m_btn_ph_h.png);cursor: pointer;}
.btn_ta{float: left;width: 326px;height: 106px;background-image: url(../img/ns_m_btn_ta.png);cursor: pointer;}
.btn_ta_h{float: left;width: 326px;height: 106px;background-image: url(../img/ns_m_btn_ta_h.png);cursor: pointer;}

.tab_out{-webkit-clip-path: circle(0%);clip-path: circle(0%);transition: all .5s ease;}
.tab_hover{-webkit-clip-path: circle(75%);clip-path: circle(75%);transition: all .5s ease;}

.ph_in{animation: left_in .5s;animation-fill-mode: forwards;}
.ph_out{animation: left_out .5s;animation-fill-mode: forwards;}
.ta_in{animation: right_in .5s;animation-fill-mode: forwards;}
.ta_out{animation: right_out .5s;animation-fill-mode: forwards;}
@keyframes left_in {
  0% { clip-path: inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0); }
  100% { clip-path: inset(0); -webkit-clip-path:inset(0);}
}

@keyframes left_out {
  0% { clip-path: inset(0); -webkit-clip-path:inset(0);}
  100% { clip-path: inset(0 100% 0 0 ); -webkit-clip-path:inset(0 100% 0 0);}
}

@keyframes right_in {
  0% { clip-path: inset(0 0 0 100%);-webkit-clip-path:inset(0 0 0 100%); }
  100% { clip-path: inset(0); -webkit-clip-path:inset(0);}
}

@keyframes right_out {
  0% { clip-path: inset(0);  -webkit-clip-path:inset(0);}
  100% { clip-path: inset(0 0 0 100%); -webkit-clip-path:inset(0 0 0 100%);}
}

.ph_bg{position: absolute;top:475px;float: left;width: 640px;height: 5430px;background-image: url(../img/ns_m_bg_ph.png);background-position: bottom;}
.ta_bg{position: absolute;top:475px;float: left;width: 640px;height: 5430px;background-image: url(../img/ns_m_bg_ta.png);background-position: bottom;}
.ns_ph_01{float: left;width:640px;height: 346px;background-image: url(../img/ns_m_ph_bg01.png); }
.ns_ta_01{float: left;width:640px;height: 346px;background-image: url(../img/ns_m_ta_bg01.png); }
.btn_ph_goshop{float: left;width:186px;height: 97px;background-image: url(../img/btn_ph_goshop.png);margin: 210px 0 0 380px; cursor: pointer;}
.btn_ta_goshop{float: left;width:185px;height: 97px;background-image: url(../img/btn_ta_goshop.png);margin: 210px 0 0 380px; cursor: pointer;}
.btn_ta_goshop:hover,.btn_ph_goshop:hover{transform: scale(1.1);}
.ns_ph_02{float: left;width:640px;height: 4340px;background-image: url(../img/ns_m_ph_bg02.png); }
.ns_ta_02{float: left;width:640px;height: 4340px;background-image: url(../img/ns_m_ta_bg02.png); }
.title{float: left;width: 640px; font-size: 35px;color: #604C3F;margin: 60px 0 0 0px;text-align: center;font-weight: bold;}
.btn_ph_con{position: absolute; width: 169px;height: 175px;background-image: url(../img/btn_ph_con.png);text-align: center;color: #fff;font-size: 27px;line-height: 175px;cursor: pointer;font-weight: bold;}
.btn_ta_con{position: absolute; width: 163px;height: 169px;background-image: url(../img/btn_ta_con.png);text-align: center;color: #fff;font-size: 27px;line-height: 175px;cursor: pointer;font-weight: bold;}
.btn_ta_con:hover,.btn_ph_con:hover{transform: scale(1.1);}
.btn_ph_con.con01{ margin: 300px 0 0 100px; }
.btn_ph_con.con02{ margin: 500px 0 0 30px; }
.btn_ph_con.con03{ margin: 550px 0 0 280px; }
.btn_ph_con.con04{ margin: 690px 0 0 430px; }
.btn_ph_con.con05{ margin: 850px 0 0 230px; }
.btn_ph_con.con06{ margin: 1050px 0 0 300px; }
.btn_ph_con.con07{ margin: 1250px 0 0 50px; }
.btn_ph_con.con08{ margin: 1200px 0 0 450px; }
.btn_ph_con.con09{ margin: 1350px 0 0 280px; }
.btn_ph_con.con10{ margin: 1550px 0 0 50px; }
.btn_ph_con.con11{ margin: 1700px 0 0 280px; }
.btn_ph_con.con12{ margin: 2050px 0 0 200px; }
.btn_ph_con.con13{ margin: 1950px 0 0 450px; }
.btn_ph_con.con14{ margin: 2200px 0 0 350px; }
.btn_ph_con.con15{ margin: 2400px 0 0 400px; }
.btn_ph_con.con16{ margin: 2450px 0 0 150px; }
.btn_ph_con.con17{ margin: 2680px 0 0 390px; }
.btn_ph_con.con18{ margin: 2850px 0 0 200px; }
.btn_ph_con.con19{ margin: 2980px 0 0 30px; }
.btn_ph_con.con20{ margin: 3180px 0 0 80px; }
.btn_ph_con.con21{ margin: 3350px 0 0 400px; }
.btn_ph_con.con22{ margin: 3450px 0 0 200px; }
.btn_ph_con.con23{ margin: 3700px 0 0 400px; }
.btn_ph_con.con24{ margin: 4050px 0 0 50px; }
.btn_ph_con.con25{ margin: 4130px 0 0 250px; }

.btn_ta_con.con01{ margin: 350px 0 0 400px; }
.btn_ta_con.con02{ margin: 500px 0 0 130px; }
.btn_ta_con.con03{ margin: 750px 0 0 280px; }
.btn_ta_con.con04{ margin: 890px 0 0 430px; }
.btn_ta_con.con05{ margin: 950px 0 0 130px; }
.btn_ta_con.con06{ margin: 1200px 0 0 230px; }
.btn_ta_con.con07{ margin: 1450px 0 0 50px; }
.btn_ta_con.con08{ margin: 1400px 0 0 350px; }
.btn_ta_con.con09{ margin: 1250px 0 0 30px; }
.btn_ta_con.con10{ margin: 1950px 0 0 450px; }
.btn_ta_con.con11{ margin: 1780px 0 0 350px; }
.btn_ta_con.con12{ margin: 2050px 0 0 100px; }
.btn_ta_con.con13{ margin: 2250px 0 0 30px; }
.btn_ta_con.con14{ margin: 2550px 0 0 450px; }
.btn_ta_con.con15{ margin: 2600px 0 0 250px; }
.btn_ta_con.con16{ margin: 2550px 0 0 30px; }
.btn_ta_con.con17{ margin: 2880px 0 0 450px; }
.btn_ta_con.con18{ margin: 3050px 0 0 200px; }
.btn_ta_con.con19{ margin: 3180px 0 0 30px; }
.btn_ta_con.con20{ margin: 3380px 0 0 80px; }
.btn_ta_con.con21{ margin: 3450px 0 0 400px; }
.btn_ta_con.con22{ margin: 3550px 0 0 200px; }
.btn_ta_con.con23{ margin: 3800px 0 0 400px; }
.btn_ta_con.con24{ margin: 4180px 0 0 50px; }
.btn_ta_con.con25{ margin: 3930px 0 0 150px; }


.ns_ph_03{float: left;width:640px;height: 709px;background-image: url(../img/ns_m_ph_bg03.png); margin-top: 50px}
.ns_ta_03{float: left;width:640px;height: 709px;background-image: url(../img/ns_m_ta_bg03.png); margin-top: 50px}

.btn_d1{float: left;width: 319px;height: 141px;background-image: url(../img/btn_m_d1.png);margin: 50px 0 0 80px;cursor: pointer;}
.btn_d2{float: left;width: 161px;height: 141px;background-image: url(../img/btn_m_d2.png);margin: 50px 0 0 20px;cursor: pointer;}
.btn_d1:hover,.btn_d2:hover{transform: scale(1.1);}

#send1,#send2,#send3,#send4{display: none;}
.send_bg{ width: 600px;height: 960px;overflow: hidden;}
.send_arr{float: left; height: 960px;margin-top:-960px;position: absolute;z-index: 3;}
.arr_up{width: 61px;height: 87px;background-image: url(../img/btn_d_left.png);margin: 500px 0 0 0px;cursor: pointer;position: absolute;left: 0px;}
.arr_down{width: 61px;height: 87px;background-image: url(../img/btn_d_right.png);margin: 500px 0 0 0px;cursor: pointer;position: absolute;left: 540px;}
.dbg1{background-image: url(../img/dbg1.png);}
.dbg2{background-image: url(../img/dbg2.png);}

.send_bg1_1{float: left;width: 600px;height: 960px;background-image: url(../img/d1_1.png);background-size: contain;}
.send_bg1_2{float: left;width: 600px;height: 960px;background-image: url(../img/d1_2.png);background-size: contain;}
.send_bg1_3{float: left;width: 600px;height: 960px;background-image: url(../img/d1_3.png);background-size: contain;}
.send_bg1_4{float: left;width: 600px;height: 960px;background-image: url(../img/d1_4.png);background-size: contain;}
.send_bg1_5{float: left;width: 600px;height: 960px;background-image: url(../img/d1_5.png);background-size: contain;}
.send_bg1_6{float: left;width: 600px;height: 960px;background-image: url(../img/d1_6.png);background-size: contain;}
.send_bg1_7{float: left;width: 600px;height: 960px;background-image: url(../img/d1_7.png);background-size: contain;}

.send_bg2_1{float: left;width: 600px;height: 960px;background-image: url(../img/d2_1.png);background-size: contain;}
.send_bg2_2{float: left;width: 600px;height: 960px;background-image: url(../img/d2_2.png);background-size: contain;}
.send_bg2_3{float: left;width: 600px;height: 960px;background-image: url(../img/d2_3.png);background-size: contain;}
.send_bg2_4{float: left;width: 600px;height: 960px;background-image: url(../img/d2_4.png);background-size: contain;}
.send_bg2_5{float: left;width: 600px;height: 960px;background-image: url(../img/d2_5.png);background-size: contain;}
.send_bg2_6{float: left;width: 600px;height: 960px;background-image: url(../img/d2_6.png);background-size: contain;}


.long_bg{position: relative; float: left; width: 100%;height: 5400px;}


.swiper-button-disabled{opacity: 0;}


.swiper-pagination{
	margin-bottom:40px; 
	top: 840px;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
	margin:0px 8px; 
}
.swiper-pagination-bullet {
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 35px;
      color:#FFF;
      opacity: 1;
      background: #007689;
	  font-weight: bold;
}
.swiper-pagination-bullet-active {
  color:#fff;
  background: #54a4a8;
}