@charset "utf-8";
/* CSS Document */
body { margin:0; background:#0064ae; /*background:url(../images/index_bg.jpg) repeat;*/ }

/* 首頁 */
#index_main{position: absolute; width:100%; height:100%; margin:0 auto; /*background:#0064ae;*/ top:0;}
#index_wrap{ width:100%; height:100%;}	
#index_footer{ position:relative; width:100%; margin:auto; margin-top:-80px; height:80px; text-align: center; overflow:hidden; z-index:3;}
#index_footer p{ color:#FFF}
.huyuu_in{ position:relative; width:100%; max-width:800px; margin:0 auto; top:35%;}
/*.huyuu_in .green{ padding-left:198px; height:25px}
.huyuu_in .green img{ width:0; height:0; margin-top:40px; margin-left:22px}*/
.index_p0 img{ width:90%; max-width:800px; padding:0 5%;}
.hope_in { width:100%; height:100%; background:#017ac1; position:relative; top:0;}
.hope_in .logo{position:relative; /*width:551px; height:532px;*/ text-align: center;/*margin-left:35%;*/ top:22%; z-index:2;}
.hope_in .logo img{margin-top:40px; width:100%; max-width:450px;}
.index_enter{ position:absolute; top:0; width:100%; text-align:center; float:right; z-index:9999;}

.index_p1{ position:absolute; width:118px;top:0; margin-left:70%; margin-top:18%;}
.index_p1 img{ width:0; height:0; margin-top:59px; margin-left:59px;}
.index_p2{ position:absolute; width:30%; top:30%;left:20%;}
.index_p2 img{ width:0; height:0; /*margin-top:59px; margin-left:59px;*/}
.index_p3{ position:absolute; width:80px; top:0; margin-left:92%; margin-top:30%;}
.index_p3 img{ width:0; height:0; margin-top:40px; margin-left:40px;}
.index_p4{ position:absolute; width:63px; top:0; margin-left:65%; margin-top:40%;}
.index_p4 img{ width:0; height:0; margin-top:31px; margin-left:31px;}
a{color:#FFF;}
a:hover{ color:#000;}

.index_pic { width: 100%; max-width: 800px; }
.index_pic li { position: absolute; width: 100%; height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; display: block; }
.index_pic1 { background-image: url(../images/index_img1.jpg); z-index: 1; }
.index_pic2 { background-image: url(../images/index_img2.jpg); z-index: 2; }
@media screen and (max-width:1100px) {
.index_pic li { background-size: cover; }
}
/* 內頁 */
#main { width:100%; height:100%; top:0}
#head { position:fixed; width:100%; top:0; height:73px; border-bottom:2px #666 solid; background:#000; z-index:10;}
#head .logo{ width:190px; height:55px; float:left; padding:10px 0 0 /*20px*/;}

#head .icon {height:39px;  float:right; padding-right:10px;}
#head .icon .tom { width:20px;}
#head .icon .tofb { width:13px; }
#head .icon .toweb { width:36px; }
#head .icon .totel { width:36px; }
#head .icon .toyt { width:36px; }
#head .icon a{ float:left; padding:15px 10px; height:39px; }

#center {width:100%; height:100%; margin:0 auto; padding-top:73px;}
#center img{ width:100%; padding-bottom:20%}
#center1 {width:100%;margin:0 auto;}
#center1 img{ width:100%;}
.button{ width:100%; margin:0 auto; text-align:center; margin-top:3%;border-top:1px #8e8e8e solid;}
.button li{ width:33.1%;display:block; text-align:center; float:left; }
.button li img{ width:50%; padding:50px 0;}
.button li.center{border-right:1px #8e8e8e solid; border-left:1px #8e8e8e solid}
.footer{ padding-top:15px; font-size:22px; line-height:2.0em;}

/*page_bg*/
.section, .slide{background-size: cover; background-position:center center; background-repeat:no-repeat;}
.slide{ position:relative;}
#page1_1{background-image: url(../images/page1_img3.jpg);}
#page2_1{background-image: url(../images/page2_img1.jpg);}
#page3_1{background-image: url(../images/page3_img1.jpg);}
#page4_1{background-image: url(../images/page4_img1.jpg);}
#page5_1{background-image: url(../images/page5_img1.jpg);}
#page6_1{background-image: url(../images/page6_img1.jpg);}
#page7_1{background-image: url(../images/page7_img1.jpg);}
#page1_2{background-image: url(../images/page1_img4.jpg);}
#page2_2{background-image: url(../images/page2_img2.jpg);}
#page3_2{background-image: url(../images/page3_img2.jpg);}
#page4_2{background-image: url(../images/page4_img2.jpg);}
#page5_2{background-image: url(../images/page5_img2.jpg);}
#page6_2{background-image: url(../images/page6_img2.jpg);}
#page7_2{background-image: url(../images/page7_img2.jpg);}
#page8_1{background-image: url(../images/page8.jpg);}
#page2_3{background-image: url(../images/page2_img3.jpg);}
#page3_3{background-image: url(../images/page3_img3.jpg);}
#page4_3{background-image: url(../images/page4_img3.jpg);}
#page5_3{background-image: url(../images/page5_img3.jpg);}
#page2_4{background-image: url(../images/page2_img4.jpg);}
#page3_4{background-image: url(../images/page3_img4.jpg);}
#page4_4{background-image: url(../images/page4_img4.jpg);}
#page5_4{background-image: url(../images/page5_img4.jpg);}
#page2_5{background-image: url(../images/page2_img5.jpg);}
#page4_5{background-image: url(../images/page4_img5.jpg);}
#page5_5{background-image: url(../images/page5_img5.jpg);}
#page4_6{background-image: url(../images/page4_img6.jpg);}
#page5_6{background-image: url(../images/page5_img6.jpg);}
#page5_7{background-image: url(../images/page5_img7.jpg);}

.section img{ width:100%;}
.sub, .sub1{ position:absolute; z-index:2; width:100%; height:200px; display:block; text-align:center;}
.sub{ background:#017ac1; /*background:url(../images/sub_bg.gif) repeat-x bottom center;*/}
.sub1{ margin-top:200px;}
.sub img, .sub1 img{ width:100%; max-width:590px;}
.footer_img{ position:absolute; z-index:2; right:0; top:73px; width:30%; text-align:right;}
.footer_img img{ width:100%; max-width:375px;}

.slide p{position:absolute; z-index:2; bottom:0; right:0; color:#FFF; padding-right:5px;text-shadow: 0px 2px 4px #333333;  }

@media screen and (max-width:1100px) {
	#index_footer{width:95%; margin-left:5%; text-align:left;}
	.hope_in .logo{margin-left:5%; top:15%;}
    .hope_in .logo img{ width:80%;}
	.index_enter img{ width:35%;}
	/*.index_p1{ position:absolute; width:80px; top:0; margin-left:30%; margin-top:4%;}*/
  .index_p2{width:40%;}
    /*.index_p3{ position:absolute; width:80px; top:0; margin-left:80%; margin-top:50%;}*/
    /*.index_p4{ position:absolute; width:63px; top:0; margin-left:65%; margin-top:65%;}*/
	

}

/*@media screen and (max-height:600px) {
.hope_in { width:100%; height:100%;}

.hope_in .logo img{ width:70%;}
.index_p2{ width:50%;top:30%; left:0; }
}*/
@media screen and (max-width:610px) {
.sub{ background:inherit;} 
.sub{margin-top:20px;} 
.index_p2{width:60%; top:30%; left:-20px;}
/*.index_p3{margin-top:80%;}*/
/*.index_p4{ margin-top:90%;}*/
}
@media screen and (max-width:465px) {
#head .icon .toweb{ display:none;}
.sub{margin-top:40px;} 
#index_footer{ font-size:13px; line-height:23px;}
#index_footer .right{padding-top:20px;}
#index_footer img{display:none;}
/*.index_p2{ width:50%;top:50%; left:-20px;}*/
}
@media screen and (max-width:400px) {
/*.index_p1{ margin-left:20%;}
.index_p2{ margin-left:55%;}
.index_p3{ margin-left:70%;}
.index_p4{ display:none;}*/

#head .logo{ width:135px; padding:15px 0 0 /*20px*/;}
#head .logo img{width:100%;}
#head .icon .tom { width:20px;}
#head .icon .tofb{ width:16px;}
#head .icon .totel{ width:30px;}
#head .icon a{ padding:20px 8px; height:29px; }
#head .icon a img{ width:100%;}
}
@media screen and (max-width:350px) {
#head .icon .tofb{ display:none;}
#index_footer span{display:none;}
.index_p2{top:40%; left:-30px;}
}