body { font: 20px "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif"; color: #000; min-width: 1050px;}
a { text-decoration: none; color: #06f; }
:focus { outline: none; }
i { font-style: normal; }
.header, .footer { width: 1050px; margin: auto;}
.hd_pc { width: 1050px; }
.hd_m, footer { display: none; }
.display_pc { display: block;}
.display_m { display: none;}
.main { background: url(../images/bg.jpg) no-repeat top center; position: relative; width: 100%; z-index: 1; overflow: hidden; background-color: #fd823b; border-bottom: 3px #deaf6d double; }
.red { color: #c50a37; font-weight: bold; font-size: 1.1em;  }
.yellow{ font-weight: bold; color: yellow;}
b { font-size: 1.1em;}

.kv { width: 1050px; height: 580px; margin: auto; position: relative; }
.kv_slogan1 { position: absolute; left: 212px; top: 70px; z-index:2;}
.kv_slogan2 { position: absolute; right: -55px; top: 170px; z-index:1; animation: upDown_animation 0.5s ease-in-out infinite alternate; }
.kv_slogan3 { position: absolute; right: -153px; top: 434px; z-index:1;}
.kv_slogan3 a { display: block; box-shadow: 1px 3px 5px #333333;}
.kv_slogan3 a:hover {  filter: brightness(110%);  transform: scale(0.96); }
.kv_slogan4 { position: absolute; left: -455px; top: 217px; z-index:1;}

/*kv-move*/
@keyframes mymove {
 0%, 100% {margin-left:0px;}
 50% {margin-top:5px;}
}

/*coupon*/
.coupon_main {  width: 700px; position: absolute; top: 398px; left: 189px; }
.coupon{ float: left; padding: 0 5px; }
.coupon img{width: 100%;}
.coupon2{ float: left; padding: 0 5px; }
.coupon2 img{width: 100%;}

/*常見問題*/
.terms_wrapper { width: 100%; margin: 0 auto;  background: #fff3eb;  overflow: hidden; }
.terms_wrapper2 { width: 100%; margin: 0 auto;  background: #ffffff;  overflow: hidden;}
.terms_container { background-color: #fff;   border: solid 3px #fe823c;   border-radius: 50px;  width: 1150px;  margin: 40px auto;}
.terms_container h2 {  font-size: 30px;  font-weight: bold;  text-align: center;  background-color: #fe823c;  color: #fff;  border-radius: 45px 45px 0 0;  padding: 10px 0; }
.terms_container h3 {  background-color: #3e4398;  border-radius: 20px;  font-size: 22px;  line-height: 30px;  font-weight: bold;  padding: 5px 20px;  display: inline-block;  margin: 3px 0 7px;  color: #fff;}
.terms_container h4 { font-size: 20px;  font-weight: bold;  color: #963512;   padding: 5px 0; }
.terms_container p { padding-left: 18px; margin-bottom: 5px;}
.terms_content {  width: 90%;  margin: 20px auto 10px;  font-size: 17px;  line-height: 24px;}
.terms_content ol li {  margin: 0 30px 5px; list-style-type: decimal; font-size: 20px;  font-weight: bold; color: #963512;  }
.terms_wrapper a { display: inline; text-decoration: underline; color: #333; }

/*注意事項*/
.notice_wrapper {  background: #f2f2f2; padding-top: 20px; }
.notice_container {  width: 1200px;  margin: 0 auto; }
.notice_container h2 {   font-size: 30px;  font-weight: bold;  text-align: center;  color: #000;  padding: 10px 0;   background: none; }
.notice_content { width: 100%;  font-size: 15px;  line-height: 22px;  padding-bottom: 30px; }
.notice_content ol li { margin: 0 30px 5px 50px;  list-style-type: decimal;  }
.li_notice ol li { counter-increment: my-counter; list-style-type: none; text-indent: -23px; margin: 0 30px 5px 30px; }
.li_notice ol li::before { content: "("counter(my-counter) ")";  padding-right: 3px; }
.notice_wrapper a { display: inline; text-decoration: underline; color: #333; }
.notice_content p { font-size: 17px; font-weight: bold; line-height: 24px; }

.best_button2 { margin: 5px 0 10px 84px;  display: block; }
.best_button2 a { display: inline; background: #c50a37; border-radius: 30px;  color: #FFF;  padding: 5px 50px; border-bottom: 3px #a9022a solid; font-weight: bold;  text-decoration: none; }
.best_button2 a:hover{ background-color: #ffb500; border-bottom: 3px #ff9000 solid; }

/*coupon*/
.step_wrapper{ width: 100%; background-color: #019275; overflow: hidden; padding-bottom: 25px;}
.step_main{ width: 100%; margin: 0 auto; overflow: hidden; padding: 5px;  padding: 15px 5px 0; }
.step { float: left;  width: 21.7%; position: relative; }
.step img{width: 100%; border: 2px solid #ccc;}
.step_go{ font-size: 20px; font-weight: bold; float: left; padding: 20% 10px; color: #653e5a; }
.step p { width: 100%;  padding: 5px 0;  font-size: 18px;  font-weight: bold; text-align: center;  color: #3e4398;  }
.gift3 { padding: 0 15px; }
.step span{ display: block; }

p2 {  border: 2px solid #6c330a;   border-radius: 30px;  padding: 1px 15px;  color: #653e11;   font-weight: bold;  background: #ffe39b;  position: absolute;  top: -10px;   left: 73px; }

/*表格*/
.insurance { border-radius: 5px;  border: 2px solid #4d4d4d;  font-size: 17px;  line-height: 1.5;  width: 96%;  margin: 0 auto; margin-bottom: 30px; }
.insurance tr td{  padding: 10px 0 10px 0; border-bottom: 1px #a0a0a0 solid; border-right: 1px #a0a0a0 solid;}
.insurance.win tr td{  padding: 5px; border-bottom: 1px #a0a0a0 solid; border-right: 1px #a0a0a0 solid;}
.insurance p { padding:0 0 0 25px!important;}
.insurance tr.tr001 { color: #000; background-color:#ffffff; font-size: 15px;}
.insurance tr.tr002 { color: #fff;  background-color: #ffe39b;  font-weight: bold; color: #663810; }
.insurance tr.tr003 { color: #000; background-color:#fff;}
.insurance tr.tr004 { color: #fff; background-color:#fc4285;}
.insurance a{color: #06f; text-decoration: underline;}

/**float**/
.float_wrapper {position: fixed;top: 150px;right:0; z-index: 250;display: none; }
.float_main { width: 138px; opacity: 0.9; filter: alpha(opacity=90);}
.go_top {display: block;cursor: pointer;}
.group_leftmenu {margin: auto; border: 10px solid #ffcf56; border-radius: 30px 0 0 30px;}
.group_leftmenu:after {content: '';display: table;clear: both;}
.group_leftmenu li {position: relative; padding: 10px 0 10px; text-align: center; font-size: 17px;}
.group_leftmenu li {background: #ffcf56;}
.group_leftmenu li a {position: relative; z-index: 500; color: #4e2808; cursor: pointer; font-weight: bold;}
.group_leftmenu li.highlight1 {padding-left: 2px; border-bottom: 1px dotted #fff; letter-spacing: -1px;}
.group_leftmenu li.highlight2 {font-size: 22px; padding: 12px 0 0 2px;}
.group_leftmenu li.highlight3 { padding: 10px 0 0; border-bottom: 1px dotted #fff; }
.group_leftmenu li a:hover, .group_leftmenu li a:focus, .group_leftmenu li a:active {color:#c50a37;}
.group_leftmenu li:after {position: absolute;right: 51%;bottom: 0;left: 51%;z-index: 1;height: 2px;background: #e4007f;content: "";-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: left, right;transition-property: left, right;}
.group_leftmenu li:hover:after, .type_leftmenu li:focus:after, .type_leftmenu li:active:after {right: 0%;left: 0%;}
.triangle-up { margin-left: 49px;  height: 7px;  width: 7px; border-width: 2px 0 0 2px; border-color: #333; border-style: solid; transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);}
.group_leftmenu li.highlight2:after {background:#ffcf56;}

/**按鈕**/
.category_wrapper.fix {  position: fixed;  bottom: 0; z-index: 500;  width: 100%; box-shadow: rgb(0 0 0 / 20%) 0px 5px 5px; }
.btn_wrapper {  text-align: center;  padding: 0 0 40px; }
a.btn_back { display: inline-block;  padding: 16px 50px;  border-radius: 20px; background: #e5204f;  border-bottom: 5px #7e001e solid; color: #fff; font-size: 24px;  margin: 0 10px;  font-weight: bold; width: 230px; }
a.btn_bank { display: inline-block;  padding: 16px 50px;  border-radius: 20px; background: #f69d1b;  border-bottom: 5px #dc5131 solid; color: #fff; font-size: 24px;  margin: 0 10px;  font-weight: bold; width: 230px; }
a.btn_back:hover { background: #a90027; border-bottom: 5px#640219 solid; padding: 16px 40px 16px 60px;  }
a.btn_bank:hover { background: #dc5131; border-bottom: 5px #870404 solid; padding: 16px 40px 16px 60px;  }

.notice_win { margin-bottom: 40px; }
.notice_win ol li { color: #000 !important; font-size: 16px !important; line-height: 24px; margin: 0 30px 5px 50px !important; font-weight: normal;}

@media screen and (max-width:1600px) {
.kv_slogan4 { width: 39vw;left: -22.5vw; bottom: 0; top: auto;}
.kv_slogan4  img{ width:100%;}
}

@media screen and (max-width:1440px) {
.kv {width: 100vw; height: 40vw;}
.kv_slogan1 { left: 27.5vw; top: 5vw;  }
.kv_slogan2 { width: 18vw; left: 72vw; top: 12vw;  }
.kv_slogan2  img{ width:100%;}
.kv_slogan3 { right: 3vw; top: 30vw; }
.kv_slogan3 a {  box-shadow: 1px 2px 3px #333333; }
.kv_slogan4 { width: 36vw; left: -6.5vw; z-index: 5;}
.kv_slogan4  img{ width:100%;}
.coupon_main {  top: 28.5vw;  left: 25vw;}
}


@media screen and (max-width:1280px) {
.main { background: url("../images/bg_m.jpg") no-repeat top center; background-size: 100vw;}
.kv { height: 42vw;}
.kv img{ width:100%;}
.kv_slogan1 { width: 45vw; left: 28.8vw; top: 5vw;  }
.kv_slogan2 { width: 18vw; left: 73vw; top: 11vw;  }
.kv_slogan3 { width: 9vw; right: 3vw; top: 32vw; }
.kv_slogan4 { width: 34vw;  left: -5vw; }
.coupon_main {  top: 28.5vw;  left: 25vw;}
.notice_container {  width: 1090px;  margin: 0; }
}

@media screen and (max-width:1024px) {
body { width: 100vw; min-width: inherit; font-size: 14px; }
* { box-sizing: border-box; }
.gotop { background: url(//www.payeasy.com.tw/travel/event/img/icon_top.png) no-repeat;  height: 36px; position: fixed; right: 5px; width: 36px; bottom: 82px; z-index: 900;display: none;  }
.gotop a { display: block; width: 48px; height: 36px; }
.header, .footer { width: 100vw;}
.footer, .hd_pc { display: none; }
.hd_m, footer { display: block; }
.display_pc { display: none; }
.display_m { display: block; } 
.main { background: url("../images/bg_m.jpg") no-repeat top center; background-size: 100vw;}
b { font-size: 1em;}
.red { line-height: 15px;  }
	
.kv {width: 100vw; height: 90vw;}
.kv img{ width:100%;}
.kv_slogan1 { width: 70vw; left: 15.8vw; top: 8vw;  }
.kv_slogan2 { width: 23vw; left: 51vw; top: 61vw; animation: none; }
.kv_slogan3 { width: 20.5vw; right: 3vw; top: 65vw; }
.kv_slogan3 a {  box-shadow: 1px 2px 3px #333333; }
.kv_slogan4 { width: 60vw;  left: -9vw; top: 62vw; }
.coupon_main {  width: 85vw;  top: 44.5vw;  left: 11vw;}
.coupon { width: 30%; padding: 0 1vw; }
.coupon2 { width: 33.3%; padding: 0 1vw; }

/*常見問題*/
.terms_wrapper, .terms_wrapper2 {padding: 10px 0;}
.terms_container { border-radius: 30px;  width: 96vw;  margin: 10px auto; padding-bottom: 15px;}
.terms_container h2 {  font-size: 20px; border-radius: 20px 20px 0 0;  padding: 7px 0; }
.terms_container h3 {  font-size: 17px; line-height: 22px; }
.terms_container h4 { font-size: 15px; }
.terms_container p { padding-left: 10px; margin-bottom: 2px;}
.terms_content { width: 95%; margin: 10px auto; font-size: 15px; line-height: 20px; }
.terms_content ol li {  margin: 0 5px 5px 20px; font-size: 16px;}
.terms_wrapper a { display: inline; text-decoration: underline; color: #333; }
	
.step { width: 100%; padding: 0 10%; }
.step p { padding: 5px 0 !important;  font-size: 15px; line-height: 19px; height: 60px; }
.step p2 { left: 33vw;}
.best_button2 { margin: 5px 0 10px 5px;}
.step.gift3 p { height: 33px; } 
.step span{ display: inline; }
.step img{image-rendering: pixelated;}

.insurance{ font-size: 13px; line-height: 1.5; margin: 5px auto; }
.insurance p { padding:0 0 0 5px!important;}
.tb01 tr td{ padding:5px 2px; }
.tb01 tr td.end {padding-bottom: 17px;border-bottom: 2px #8F8F8F dashed;}
.tb01 tr td p {padding: 0 0 5px 0;}
.insurance tr.tr001 { font-size: 13px;}
.insurance tr td { padding: 5px 0;}
	
.btn_wrapper { padding: 10px 0 0; }
.notice_win {margin-bottom: 0; }
.terms_content ol li { margin: 0 5px 5px 25px !important;  font-size: 14px !important; line-height: 20px;}
a.btn_back, a.btn_bank { width: 70vw;  font-size: 18px; padding: 10px;  margin: 0 0 10px 0; border-radius: 20px; }
	
/*注意事項*/
.notice_wrapper {  padding-top: 10px; }
.notice_container {  width: 100%;  }
.notice_container h2 {   font-size: 22px;  padding: 5px 0;   }
.notice_content { font-size: 14px; line-height: 20px; padding-bottom: 105px;}
.notice_content ol li { margin: 0 5px 5px 30px; }
  
.float_wrapper {display: none; left: 100%;}
.M_menu_wrap { position: fixed; bottom: 0; z-index: 200; display: block; font-size: 14px; }
.M_menu_block { width: 100vw; height: 40px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111)); box-shadow: 0px -1px 1px #333; }
.M_menu_block ul { overflow: hidden; list-style: none; }
.M_menu_block li { float: left;  padding-top: 9px; width: 25vw; height: 40px; border-top: 1px solid #999; border-right: 1px solid #666; border-left: 1px solid #222; text-align: center; }
.M_menu_block li a { color: #fff; display: inline-block; line-height: 19px;}
.M_menu_block2 { width: 100vw; height: 52px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111)) }
.M_menu_block2 ul { list-style: none; overflow: hidden; }
.M_menu_block2 li { float: left; padding-top: 5px; line-height: 17px; border-top: 1px solid #ccc; border-left: 1px solid #666; border-right: 1px solid #222;  text-align: center; height: 50px;  }
.M_menu_block2 li a { color: #fff; font-weight: normal;}

}