@charset "utf-8";
/*body { background:#fff; color:#000; font-size:12px; white-space:normal; font-family:Microsoft JhengHei, Arial,微軟正黑體; width:100%; height:100%;}*/
body { background:#fff; color:#000; font-size:12px; white-space:normal; font-family:微軟正黑體,DFKai-sb,Microsoft JhengHei, Arial; width:100%;  min-width:1000px;}
html  {width: 100%; height: 100%;}

.loader {
  font-size: 90px;
 /* text-indent: -9999em;*/
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  margin-top:-0.5em;
  top:50%;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.087em -0.825em 0 -0.42em #000000, -0.173em -0.812em 0 -0.44em #000000, -0.256em -0.789em 0 -0.46em #000000, -0.297em -0.775em 0 -0.477em #000000;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.338em -0.758em 0 -0.42em #000000, -0.555em -0.617em 0 -0.44em #000000, -0.671em -0.488em 0 -0.46em #000000, -0.749em -0.34em 0 -0.477em #000000;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.377em -0.74em 0 -0.42em #000000, -0.645em -0.522em 0 -0.44em #000000, -0.775em -0.297em 0 -0.46em #000000, -0.82em -0.09em 0 -0.477em #000000;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.087em -0.825em 0 -0.42em #000000, -0.173em -0.812em 0 -0.44em #000000, -0.256em -0.789em 0 -0.46em #000000, -0.297em -0.775em 0 -0.477em #000000;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.338em -0.758em 0 -0.42em #000000, -0.555em -0.617em 0 -0.44em #000000, -0.671em -0.488em 0 -0.46em #000000, -0.749em -0.34em 0 -0.477em #000000;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #000000, -0.377em -0.74em 0 -0.42em #000000, -0.645em -0.522em 0 -0.44em #000000, -0.775em -0.297em 0 -0.46em #000000, -0.82em -0.09em 0 -0.477em #000000;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #000000, 0 -0.83em 0 -0.42em #000000, 0 -0.83em 0 -0.44em #000000, 0 -0.83em 0 -0.46em #000000, 0 -0.83em 0 -0.477em #000000;
  }
}
.loader_logo{position:absolute; margin-left:-34px; margin-top:-19px; width:69px; height:39px; left:49%;top:51%; font-size:18px; font-weight:bolder; color:#000;}
.loader2 {
  font-size: 90px;
 /* text-indent: -9999em;*/
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  margin-top:-0.5em;
  top:50%;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load7 1.7s infinite ease;
  animation: load7 1.7s infinite ease;
}
@-webkit-keyframes load7 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.297em -0.775em 0 -0.477em #ffffff;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.749em -0.34em 0 -0.477em #ffffff;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.09em 0 -0.477em #ffffff;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
  }
}
@keyframes load7 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.087em -0.825em 0 -0.42em #ffffff, -0.173em -0.812em 0 -0.44em #ffffff, -0.256em -0.789em 0 -0.46em #ffffff, -0.297em -0.775em 0 -0.477em #ffffff;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.338em -0.758em 0 -0.42em #ffffff, -0.555em -0.617em 0 -0.44em #ffffff, -0.671em -0.488em 0 -0.46em #ffffff, -0.749em -0.34em 0 -0.477em #ffffff;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, -0.377em -0.74em 0 -0.42em #ffffff, -0.645em -0.522em 0 -0.44em #ffffff, -0.775em -0.297em 0 -0.46em #ffffff, -0.82em -0.09em 0 -0.477em #ffffff;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #ffffff, 0 -0.83em 0 -0.42em #ffffff, 0 -0.83em 0 -0.44em #ffffff, 0 -0.83em 0 -0.46em #ffffff, 0 -0.83em 0 -0.477em #ffffff;
  }
}
.loader_logo2{position:absolute; margin-left:-34px; margin-top:-19px; width:69px; height:39px; left:49%;top:51%; font-size:18px; font-weight:bolder; color:#ffffff;}
/* claer
-------------------------- */
.clearfix { clear:both;}
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#loader{width:100%; background-image:url(../images/p2/bg.jpg); position:absolute; height:100%; z-index:9999;}
#loader2{width:100%; position:fixed; height:100%; z-index:9999; background-color:#000000; opacity:0.8; display:none;}

.wrapper {
	display:none;
	width:100%;
	/*min-width:1000px;*/
	position:relative;
	overflow:hidden;
	}
.pc{display:block;}
.m{ display:none;}
.header{width:100%; height:50px;position:relative;left:0px; top:0px; z-index:99; background-color:#393939; display:none;}
.logo{top:12px; position:relative; width:417px; height:23px; margin-left:-208px; left:50%; background-image:url(../images/logo.png);}


.page1{top:0px; z-index:1;}
.drowl{position:relative; width:100%;}
.abs             {position: absolute;}
.rel             {position: relative;}
.ove{overflow:hidden;}
.fix{position:fixed;}
.opa{ opacity:0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
.w100{width:100%;}
/*圖片當背景圖*/
.drowl_bg {position:absolute;left: 0px;/*650/1920*/ /*210/1080*/ width: 100%;/*2500/1920*/ height: 100%;/*1000/1080*/ }/*底圖當背景可以用100% 如果不想高度占整版面可以用1000/1080*/

#index_slide_bg{ position:absolute;z-index:1;}

.index_kv{ width:55%; height:auto; position:absolute; margin-left:-27%; margin-top:-23%; left:50%; top:55%}
/*.index_kv{    width: 60%;
    height: auto; position:absolute; margin-left:-30%; margin-top:-23%; left:50%; top:50%}*/

.kv{width:100%;}
.kv_l{width:50%; overflow:hidden; position:absolute; left:0px;}
.kv_r{width:50%; overflow:hidden; position:absolute; right:0px;}
.kv_top{height:50%; overflow:hidden; position:absolute; top:0px;}
.kv_btooom{height:50%; overflow:hidden; position:absolute; bottom:0px;}


.page2{background-color: #dd6937;height: 400px;position: relative;width:100%;z-index:10;}
.page2_title{position:relative; width:1020px; margin-left:-510px; left:50%;    top: 68px;}
.p2_title1{position:absolute; left:0px;top: 0px;}
.p2_title2{position:absolute; right:0px; top:0px; width:714px; height:267px; background-image:url(../images/p2_title2.jpg);}

.page2_txt{text-align: center;margin-top: 10px; position:relative; }
.p2_txt{position:absolute; left:40px; top:50px;line-height: 30px;font-size: 18px; color:#FFF;}
.share1{    position: relative;top: 186px;left: 40px; width: 150px;}
/*
.page3{background-color: #fff;
    height: auto;
    position: relative;
    padding: 0px;}
.cf {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}*/
.page3{height: auto;padding: 0px;z-index:10;}
.page4{ height:685px; position:relative; background-color:#FFF;top: -3px; z-index:10;}

.p4_context{width:1200px; margin-left:-600px; left:50%; position:relative;}

.page4_left1{position:relative; left:0px; z-index:2}
.page4_product{ position:absolute; right:0px;}


.p4_center_p1{ background-image:url(../images/page4_left1.jpg);}
.p4_center_p2{ background-image:url(../images/page4_b2.jpg);}
.p4_center_p3{ background-image:url(../images/page4_b3.jpg);}
.p4_center_p4{ background-image:url(../images/page4_b4.jpg);}
.p4_center_p1_txt{line-height:18px; position:absolute;top: 700px; text-align:center; color:#FFF;/*font-size:10px; -webkit-transform:scale(0.83);*/font-size:11px; -webkit-transform:scale(0.91); display:inline-block}
.p4_txt_left1{width: 400px;left: -16px;}

.p4_p1{position:absolute; left:0px; top:80px;}
.p4_p2{position:absolute; left:0px; top:465px;}
.p4_p3{position:absolute; right:0px; top:80px;}
.p4_p4{position:absolute; right:0px; top:465px;}


.page5{position:relative; background-color:#ebe8e4;    top: -3px; }
.slow{position:relative; margin-left:-103px; width:207px; left:50%;padding-top: 80px;}
.page5_txt{position:relative; margin-left:-261px; width:523px; left:50%;margin-top: 40px;}
.page5_context{width:1200px; position:relative; margin-left:-600px; left:50%;margin-top:30px; margin-bottom:0px; height:1040px;}
.p5_g{ overflow:hidden; position:absolute;}
.p5_g1{ width:375px; height:562px;left:0px; top:0px;}
.p5_g2{ width:788px; height:414px;right:0px; top:0px;}
.p5_g3{ width:373px; height:559px;left:405px; top:445px;}
.p5_g4{ width:273px; height:410px;right:115px; top:445px;}
.tip1{position:absolute; top:510px; left:15px;}
.tip2{position:absolute; top:130px; right:175px;}
.tip3{position:absolute; top:520px; left:475px;}
.tip4{position:absolute; top:765px; right:140px;}

.footer{ width:100%; height:135px; background-color:#393939; margin-top:-2px;}
.copy{ position:relative; width:1279px; margin-left:-639px; left:50%; top:30px; background-image:url(../images/copy.jpg); height:89px;}
.fot1{  position:absolute;   left: 481px;top: 0px;}
.fot2{ position:absolute;   left: 574px;top: 0px;}
.fot3{ position:absolute;   left: 666px;top: 0px;}
.fot4{ position:absolute;   left: 759px;top: 0px;}
.vedios{height:auto}


.pg_g1_ad1_1{position:absolute;left:280px; top:130px;}
.pg_g1_ad1_2{position:absolute;left:395px; top:452px;}

.pg_g1_ad2_1{position:absolute;right:505px; top:440px;}
.pg_g1_ad2_2{position:absolute;right:320px; top:375px;}
.pg_g1_ad2_3{position:absolute;right:430px; top:565px;}



.pg_g1_ad3_1{position:absolute;left:305px; top:175px;}
.pg_g1_ad3_2{position:absolute;left:415px; top:430px;}

.pg_g1_ad4_1{position:absolute;left:52px; top:195px;}
.pg_g1_ad4_2{position:absolute;left:138px; top:550px;}
/*page2*/
.page2_div{position:relative; width:1200px; margin-left:-600px; left:50%;overflow:hidden}
.page2_area1{height: 675px; }
.page2_area2{height: 675px;}
.page2_area3{height: 675px;}
.page2_area4{height: 675px;}
.page2_area1_ct{position:absolute;  right:25px; top:238px;text-align:center;}
.p2_area_p{ font-size:12px; line-height:24px; margin-top:20px;}
.page2_area2_bg{position:absolute; right:0px;}
.page2_area2_ct{position:absolute;  left:50px; top:238px;text-align:center;}
.page_bg1{position:absolute; right:0px; bottom:0px;}
.page_bg2{position:absolute; left:600px; bottom:0px;}
.page_bg3{position:absolute; left:0px; bottom:0px;}
.pa2_area_title1{left:86px;}
.pa2_area_title2{left:45px;}
.pa2_area_title3{left:45px;}
.pa2_area_title4{left:88px;}

.addicon{width:39px; height:39px;}
@media screen and (max-width: 750px) {
.addicon{width:50px; height:50px;}
body {width:750px; min-width:inherit;}
.wrapper { width:750px;}
.header{width:750px; }
.logo{top:12px; position:relative; width:417px; height:23px; margin-left:-208px;  left:50%; }
.whitediv{height:657px; width:750px;}
.w100{width:750px;}
.pc{display:none;}
.m{ display:block;}
.shutterm{width:750px; height:507px; overflow:hidden; }

.page2{height: 698px;width:750px;}
.page2_title{position:relative; width:750px; margin-left:0px; left:0%;    top: 0px;}
.p2_title1{position:absolute;    left: 227px;top: 50px;}
.p2_title2{position:absolute; right:20px; top:350px; }

.page2_txt{text-align: center;margin-top: 10px; position:relative; }
.p2_txt{position:absolute; left:18px; top:50px;line-height: 30px;font-size: 20px; color:#FFF;}
.share1{    position: relative;top: 186px;left: 18px;width: 186px;}

.page5_txt{position:relative; margin-left:-332px; width:665px; left:50%;margin-top: 40px;}
.page5_txt img{ width:100%;}

.page5_contextm{position:relative;  left:100px; margin-top:50px; height:985px;}
.p5_gm{  position:absolute;left:0px; top:0px;}
.p5_gm1{ }
.p5_gm2{}
.p5_gm3{ }
.p5_gm4{}
.tip1{position:absolute; top:510px; left:15px;}
.tip2{position:absolute; top:130px; right:175px;}
.tip3{position:absolute; top:520px; left:475px;}
.tip4{position:absolute; top:765px; right:140px;}

.p4_contextm{height:1695px; position:relative}
.page4{ height:1800px;  }

.mproduct{ width:468px; margin-left:-234px; left:50%; position:relative;}
.mpd{position:relative;}
.footer {width: 750px;height: 135px;margin-top: 30px;}
.copy{  width:750px; margin-left:-375px; left:50%; top:30px; background-image:url(../images/m/copy.jpg); height:89px;}
.fot1{ position:absolute;   left: 215px;top: 0px;}
.fot2{ position:absolute;   left: 310px;top: 0px;}
.fot3{ position:absolute;   left: 402px;top: 0px;}
.fot4{ position:absolute;   left: 495px;top: 0px;}



/*page2*/
.page2_div{position:relative; width:750px; margin-left:0px; left:0%;}
.page2_area1{height: 1267px; }
.page2_area2{height: 1267px;}
.page2_area3{height: 1267px;}
.page2_area4{height: 1267px;}
.page2_area1_ct{position:absolute;  right:50px; top:800px;text-align:center;}
.p2_area_p{ font-size:24px; line-height:34px; margin-top:20px;width: 645px;}
.page2_area2_bg{position:absolute; right:0px;}
.page2_area2_ct{position:absolute;  left:50px; top:800px;text-align:center;}
.page_bg1{position:absolute; right:0px; bottom:0px;}
.page_bg2{position:absolute; left:600px; bottom:0px;}
.page_bg3{position:absolute; left:0px; bottom:0px;}
.mtitles{display:inline-block;}

.pg_g1_ad1_1{position:absolute;left:315px; top:195px;}
.pg_g1_ad1_2{position:absolute;left:516px; top:650px;}

.pg_g1_ad2_1{position:absolute;right:450px; top:440px;}
.pg_g1_ad2_2{position:absolute;right:275px; top:375px;}
.pg_g1_ad2_3{position:absolute;right:360px; top:580px;}



.pg_g1_ad3_1{position:absolute;left:360px; top:265px;}
.pg_g1_ad3_2{position:absolute;left:523px; top:650px;}

.pg_g1_ad4_1{position:absolute;left:35px; top:225px;}
.pg_g1_ad4_2{position:absolute;left:138px; top:615px;}

.pa2_area_title1{left:0px;}
.pa2_area_title2{left:0px;}
.pa2_area_title3{left:0px;}
.pa2_area_title4{left:0px;}
}



.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}