@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

body {
	width: 100%;	
	overflow-x: hidden; background-repeat:no-repeat; background-size:100% 100%;      background-position: bottom center; background-image: url(../images/APPbg2.png);
	margin:0;	font-size: 20px; height:100vh;
	line-height: 1.5; padding:0;
    font-family: 'Noto Sans TC', sans-serif,"Microsoft JhengHei";	 
	/*font-family: "Microsoft JhengHei", Arial, sans-serif;*/
	}
.clear{clear: both;}
.inner-width{ max-width: 600px; margin:0 auto; text-align:center;position: relative;  }
.inner-width2{ width: 100%; margin:0 auto; text-align:center;position: relative;  }

a{ color: inherit; text-decoration: none; }
a img{ border:0; }

header{ padding: 12px 0 6px; }
.logo{width: 180px;position: absolute;top: -2px;left: 46%;}

.headtitle{    margin: 0 auto;padding:10% 10% 0;min-width:600px; color:#e41a1a; background-color: rgba(255,255,255,0.00); font-size: 24px;box-sizing: border-box;  }
.ph_headtitle{    margin: 0 auto;padding:5% 10% 0 10%;min-width:600px; color:#e41a1a; background-color: rgba(255,255,255,0.00); font-size: 28px;box-sizing: border-box;  }
.headtitle img{ width: 100%;}
.headtitle span{    color: #f1a43b;}
.date{ margin-top: 10%; width: 70% !important;}
.subtitle{ padding: 5px 100px;     margin-top: 0%;  background-position: center; background-size: contain; background-repeat: no-repeat;color: #0a89af;}
.subtitle h2 {margin: 10px auto;}
.container{ position: absolute; width:600px; bottom:80px;}

.indexin{ flex:1;    padding:5px; height: 60px;}

.menuleft{ background-image: url(../images/aa.png);background-size: 50%; background-repeat: no-repeat; background-position: center;}
.menuright{background-image: url(../images/cc.png);background-size: 50%; background-repeat: no-repeat;background-position: center;}
.indexline{ border-left: 1px #fff solid;border-right: 1px #fff solid;background-image: url(../images/bb.png);background-size:45%;background-position: center; background-repeat: no-repeat; }
.indexline1{ border-left: 1px #fff solid;border-right: 1px #fff solid;;background-size:50%;background-position: center; background-repeat: no-repeat; }
.indexline2{ border-left: 1px #fff solid;border-right: 1px #fff solid;;background-size:50%;background-position: center; background-repeat: no-repeat; }
.indexline3{ border-left: 1px #fff solid;border-right: 1px #fff solid;;background-size:50%;background-position: center; background-repeat: no-repeat; }
.menuleft:hover{ background-image: url(../images/aaa.png);background-size: 50%; background-repeat: no-repeat; background-position: center;}
.menuright:hover{background-image: url(../images/ccc.png);background-size: 50%; background-repeat: no-repeat;background-position: center;}
.indexline:hover{background-image: url(../images/bbb.png);background-size:50%;background-position: center; background-repeat: no-repeat; }
.icons-menu {font-size: 48px !important;color: #004b85 !important;}
.line_share_btn{display: none;}
.headcontent{color:#0a89af;position: absolute;top: 150px;left: 210px;font-size: 48px;font-weight: 500;}
.headtxt{color: #0a89af;font-size: 60px;font-weight: 500;}
.headtxt p{margin: 0 auto;font-size: 58px;}
.headcenter{width: 80%;margin: 0 auto;position: relative;min-height: 70px;}
.headcenter_sale{width: 90%;margin: 0 auto;position: relative;min-height: 70px;}
.headcenter_medal{width: 92%;margin: 0 auto;position: relative;min-height: 70px;}
.left_headcenter{float: initial;width: 20%;font-weight: 500;margin: 0 auto;}
.left_headcenter p{text-align: right;padding: 10px 0;margin: 8px auto;padding: 0px 0;border-bottom: 1px solid #0a89af;width: 55px;color: #0a89af;font-size: 27px;font-weight: 300;}
.left_headcenter_slae{float: inherit;width: 15%;font-weight: 500;margin: 0 auto;}
.left_headcenter_slae p {padding: 0px 0;border-bottom: 1px solid #0a89af;width: 55px;color: #0a89af;font-size: 27px;font-weight: 300;}
.left_headcenter_medal{float: initial;width: 10%;font-weight: 500;margin: 0 auto;}
.left_headcenter_medal p{padding: 0;border-bottom: 1px solid #0a89af;width: 55px;color: #0a89af;font-size: 27px;font-weight: 300;}
.right_headcenter{width: 85%;text-align: center;margin: 0 auto;}
.right_headcenter p{margin: 0 auto;color: #000;font-size: 27px;font-weight: 100;padding: 10px 0;text-align: center;}
.right_headcenter_slae{width: 85%;text-align: center;margin: 0 57px;}
.right_headcenter_medal{float: inherit;width: 90%;text-align: center;}
.headtitle .left_headcenter img{width: 80px;height: 80px;}
.headcontent_tab{color:#0a89af;position: absolute;bottom:90px;left: 195px;font-size: 48px;font-weight: 500;}
.headcontent_tab_sale{left: 205px!important;}
.foot{padding: 15px 50px 15px;background: #004b85;color: #FFF;position: absolute;width: 100%;bottom: -67px;}
.footr{text-align: center;font-weight: 100;}
.btnbox {min-height: 600px;padding: 20% 0;}
.btnbox_btn{background-image: url(../images/btn-color.png);background-size: cover;background-repeat: no-repeat;border: 1px solid #FFF;border-radius: 18px;margin: 10% auto;width: 60%;height: 60px;padding: 10px 0;}
.btnbox_btn a{display: block;}
.btnbox_btn a:hover {color: #FFF ;}
.btnbox_btn a:focus {color: #FFF ;}

.act_btnbox{padding: 10px 0;}
.act_btnbox_btn{background-image: url(../images/btn-color.png);background-size: cover;background-repeat: no-repeat;border: 1px solid #FFF;border-radius: 18px;margin: 10px auto;width: 60%;height: 60px;padding: 10px 0;}
act_btnbox_btn{display: block;}
/*
.inner-width2 #sidebar-toggle {display: block;position: relative;float: left;margin: 30px 30px 0 50px;}
.inner-width2 #sidebar-toggle .bar {display: block;width: 50px;margin-bottom: 8px;height: 5px;background-color: #004b85;}
.closebt a{padding: 30px 5px;font-size: 18px;color: white;float: right;display: block;border-top: none;border-bottom: none;}
.closebt:hover{background: #004b85;}*/
/*月份選單*/
    .tabs {
    padding: 0;
    float: none;
    list-style: none;
    position: relative;
    margin: 10px auto;
    text-align: left;
}
    
    .tabs li.active {
    background: #7c21cc;
    color: #fff;
    text-shadow: 0 1px #7c21cc;
    border-bottom: none;
    z-index: 50;
}
    
    .tabs.left li {
    width: 24.9%;
    height: 43px;
    margin: 0 0.05%;
}
    
    .tabs li {
    float: left;
    position: relative;
    display: block;
    background: #bdbdbd;
    height: 44px;
    line-height: 45px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0 1px #818181;
    color: #FFF;
}
.border {
    height: 100%;
    border-right: 1px solid #FFF;
    float: right;
}
/*月份選單 END*/

/*sale*/
.headtxt_sale{font-size: 64px;text-align: center;}

.right_headcenter_slae p{font-size: 27px;color: #000;text-align: center;}

/*medal*/
.left_headcenter_medal img{position: absolute; top: 100px;left: 4%;}

@media screen and (max-device-width: 1440px) { 
.headcontent {top: 120px;}
.subtitle {padding: 5px 60px;}
.logo{left: 44%;}
}


@media screen and (max-device-width: 1280px) { 
.menuleft{ background-size: 70%!important; }
.menuright{ background-size: 70%!important; }
.indexline{ background-size: 70%!important; }
.headtxt_sale {font-size: 60px;}
.right_headcenter_slae p {font-size: 25px;}
.ph_headtitle {padding: 5% 15% 0 5%;}
.headcontent_tab {left: 170px;}
.headcenter_medal {width: 95%;}
.left_headcenter_medal{width: 12%;}
.right_headcenter_medal{width: 88%;}
.right_headcenter p {font-size: 24px;}
}

@media screen and (max-device-width: 1024px) { 
.logo{left: 41%;}
}
@media screen and (max-device-width: 900px) { 
.line_share_btn{display: block;}

}

@media screen and (max-device-width: 880px) { 
.menuleft{ background-size: 80%!important; }
.menuright{ background-size: 80%!important; }
.indexline{ background-size: 80%!important; }

}





.action{color:#b33505 ;}
.accordian { float: right; position: absolute; z-index: 999; 
 width:45px;right: 10px;top:8px ; height: 50px; text-align: center;  }
.accordian h3{ margin: 0; padding: 0;}
.accordian p{ line-height: 1;}
.pagetitle{ margin: 0 auto; text-align: center;  width: 80%;}
.accordian img, .accordian div img, .pagetitle img{ width: 80%;} 
.accordian div {    padding: 2px; background-color: #fff;
  height:200px; position: relative;}
.bebetter{margin-top:5%; width: 61% !important;}

.indexfooter{ line-height: 1.1; padding-top: 6px   ;
   display:flex; margin:0px auto; max-width:2000px; text-align:center; font-size:24px;  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
} 
.indexfooter:after {
　content: '';
　display: inline-block;
　width: 100%;
}
footer{ height: 80px; background-image: url(../images/footer02.png); background-repeat: no-repeat;      background-size: 100% 100%;color:#000; background-position: bottom;
	position: relative; width:100%; font-size:20px; margin: 10px auto 0;
    bottom: 0%;  text-align:center; padding:0;	}
	.share{float: right;margin-right: 150px;}
.scrollup {
    width: 50px;
    height: 50px;
    text-indent: 99px;
    position: fixed;
    bottom: 130px;
    right: 18px; 
    display: none;
    background: url(../images/top.png) no-repeat;
    z-index: 999;}

/***page***/
.pagetop {     width:70%; margin: 0 auto;}
.pagetop .home-action{ width:70%;}
.pagetop .headtitle{width: 40%;
    color: #FFFFFF;
    font-size: 40px; padding:5px;  }
	/***menu***/
	.menu-toggle {
  width: 40px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 25px;
  cursor: pointer;
}
.menu-toggle.on .one {
  -moz-transform: rotate(45deg) translate(7px, 7px);
  -ms-transform: rotate(45deg) translate(7px, 7px);
  -webkit-transform: rotate(45deg) translate(7px, 7px);
  transform: rotate(45deg) translate(7px, 7px);
}
.menu-toggle.on .two {
  opacity: 0;
}
.menu-toggle.on .three {
  -moz-transform: rotate(-45deg) translate(8px, -10px);
  -ms-transform: rotate(-45deg) translate(8px, -10px);
  -webkit-transform: rotate(-45deg) translate(8px, -10px);
  transform: rotate(-45deg) translate(8px, -10px);
}

.one,
.two,
.three {
  width: 100%;
  height: 5px;
  background: white;
  margin: 6px auto;
  backface-visibility: hidden;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

nav ul {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans TC', sans-serif,"Microsoft JhengHei";
  list-style: none;
  margin: 4em auto;
  text-align: center;
}
nav ul.hidden {
  display: none;
}
nav ul a {
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  text-decoration: none;
  color: white;
  font-size:40px;
  line-height: 2.8;
  border-top: 1px solid #10609d;
  border-bottom: 1px solid #004174;
  width: 100%;
  display: block;
}
nav ul a:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.menu-section.on {
  z-index: 10;
  width: 50%;
  height: 100%;
  display: block; right:0;
      background-color: #84b7da;
  position: absolute; margin-top:-30px;
}

	/***menu***/
.pageout{ background-color: hsla(0,0%,95%,0.47)}
.pageleft{ float: left;width:25%; text-align: right; padding-right: 10px;  ; color:#6F5E0E ; line-height: 1.3; font-size: 28px;padding-top: 45px;}
.pageright{ float:left ; text-align: left; color: #000000;font-size: 20px;}
.tableout{ padding: 13px 0px 45px;}
table{width: 100%;border-collapse: collapse;}
table tr{  text-align: center;    font-size: 26px;
    font-weight: normal;    padding: 1px;}	
table tr th{ background-size: cover; background-image: url(../images/button.png);background-repeat: no-repeat;width:  30%;color:#db509d; } 	
table tr td{    color: #3a5996;    border-bottom: 1px solid #3a5996;}
.people{ width: 28% !important;
    margin-right: 5px;
    vertical-align:initial; }

.tdflex{ display: flex;}
.tda{ flex:2;text-align: right;}
.tdb{ flex:3;text-align: left;}

.peopleone{ width:66% !important;}
.condition1, .condition2{width:71% !important;}


@media screen and (max-width: 1440px) {
	.headtitle {		padding: 10% 19% 0;}
	.date {	margin-top: 3%;}
	.subtitle{margin-top: 3%;}
	.bebetter{margin-top: 1%;    width: 60% !important;}
}
@media screen and (max-width: 1360px) {
	.headtitle {padding: 11% 19% 0;}	
}
@media screen and (max-device-width: 768px) {
	body{ background-image:url(../images/APPbg.png); }
.container{ width:100%;}
.indexfooter{font-size:40px;width: 100% !important;max-width: 100% !important;    margin-top: -14px;    height: 120px;
    background-size: 100% 100%;
}
.inner-width{ width: 90% !important ;min-width: 90% !important;max-width: 90% !important; 	}
	.indexline{font-size: 50px;}
.headtitle{  margin:15% auto; width:95%;font-size: 50px;padding: 5% 10% 0;}
	.subtitle{margin-top: 2%;padding: 5% 15%;line-height: 1.5;color: #0a89af;}
.logo{width: 200px;     margin: 3% 0%;}
	footer{ height: 100px;
	position: relative; width: 100%; 
     left: 0; text-align:center; padding:0;	}
	.indexin {    padding: 15px 0;}
	.accordian { width: 100px;}
.date {    margin-top: 18%;}
	.bebetter {
    margin-top: 1%;  width: 57% !important;}
.people {
    width: 25% !important;
    margin-right: 5px;
    vertical-align: initial;}
.icons-menu {font-size: 102px !important;}
.logo {left: 40%;}
.headcontent {top: 200px;left: 290px;font-size: 72px;}
.footr {font-size: 40px;}
.left_headcenter {width: 25%;}
.right_headcenter {width: 75%;}
.left_headcenter p {/*margin: 10px 0 10px 33%;*/width: 72px;}
.right_headcenter_slae p {font-size: 30px;}
.headtxt_sale {font-size: 72px;}
.tabs.left li {height: 60px;padding: 7px 0;}
.tabs li {font-size: 30px;}
.headcontent_tab {bottom: 100px;left: 250px;font-size: 72px;}
.left_headcenter_medal p {padding: 150px 0px;}
.ph_headtitle {padding: 5% 10% 0;}
.right_headcenter p , .left_headcenter p {font-size: 36px;}
.headcontent_tab_sale {left: 290px!important;}
.headcontent_index{top: 160px!important;left: 300px!important;}
.left_headcenter_slae {width: 15%!important;}
.right_headcenter_slae {width: 85%!important;}
.left_headcenter_medal {width: 15%!important;}
.right_headcenter_medal {width: 86%!important;}
.left_headcenter_medal p {margin: 10px 0;padding: 0 0px;}
.btnbox_btn {height: 100px;}
}
@media screen and (max-device-width: 350px) {
	.left_headcenter p{width: 84px;}
	.right_headcenter p , .left_headcenter p {font-size: 42px;}	
    .left_headcenter_medal p {padding: 240px 0px;}
    .left_headcenter {width: 20%;}
    .right_headcenter {width: 95% !important;}
    .left_headcenter_slae {width: 17%!important;}
    .right_headcenter_slae {width: 83%!important;}
    .left_headcenter_medal p {padding: 0px 0px;width: 84px;margin: 10px auto;}
}