@charset "big5";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Ramabhadra&display=swap');
/* CSS Document */
body {font-size: 15px; line-height: 1.5em; color: #333; font-family: 'Noto Sans TC', sans-serif; background: url(../image/bg02.jpg) center repeat;}
a {text-decoration: none;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {width: 100%; margin: auto}
.hd_pc {width: 100%;}
.display_pc {display: block;}
.display_m {display: none;}
.pez_ft {height: 228px;}
.footer {border-top: 2px solid #bfbfbf;}

/*顏色*/
.lightblue {color: #03A9F4;}
.orange {color:#ff6029;}
.red {color: #FF3300;}
.pink {color: #ff21c5;}
.blue {color: #06f;}

/*大圖+主標*/
.bigphoto_wrapper {width: 100%; background: url(../image/kv_bg.jpg) top center no-repeat;/**#f8f8f8**/; padding: 20px 0 25px;}
.bigphoto_container {margin: auto; width: 1200px; display: flex;}
.bigphoto_photo {width: 680px;}
.bigphoto_img {width: 100%; height: 400px; background-size: cover; background-position: 50%; background-repeat: no-repeat; transition: all .5s linear; background-color: #fff; 
 border-radius: 20px; box-shadow: 9px 7px 0 #ffeb3b;}
.bigphoto_title {width: 460px; padding: 50px 30px;}
.bigphoto_title h2 {font-size: 36px; line-height: 1.2em; color: #444; font-weight: bold; padding: 10px 0;}
.bigphoto_title li {margin-left: 34px; list-style: outside; font-size: 22px; line-height: 1.5em; color: #ff5722; font-weight: 500;}

/*出團日期*/
.day_wrapper { width: 100%; background: #333;}
.day_main {width: 1200px; margin: 0 auto; padding: 12px 20px 12px 50px; overflow: hidden; box-sizing:border-box;}
.day_left {float: left; font-size: 20px; color: #fff; font-weight: 500; width: 740px; }
.day_left span {color: #ff6029; }
.day_right {float: right;}
.day_right a.ask {display: inline-block; padding: 7px 50px; border-radius: 30px;  background: #1fa3b1;   border-bottom: 3px #0a8d9b solid;  color: #fff; font-size: 20px; margin: 0 3px; font-weight: 500;}
.day_right a.buy {display: inline-block;  padding: 7px 50px; border-radius: 30px;  background: #ff6029;  border-bottom: 3px #ce4515 solid;  color: #fff; font-size: 20px; margin: 0 3px; font-weight: 500;}
.day_right a.ask:hover, .day_right a.buy:hover {background: #f6ee41; border-bottom: 3px #c9c653 solid; color: #000;}

/*錨點*/
.category_wrapper.fix {position: fixed; top: 0; z-index: 500; width: 100%; background: #f4f3f3; height: 60px;}
.menu_wrapper { width:100%; margin: 0 auto 15px; text-align: center;  
	-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
	background: #f2f2f2;  padding: 10px 0;}
.menu_wrapper ul {width:1200px;  margin: 0 auto;  list-style: none; overflow: hidden; display: flex;  justify-content: center;  align-items: stretch;   height: 40px; }
.menu_wrapper li {font-size: 20px;  display: flex;  justify-content: center;  align-items: center; text-align: center;  width: 100%; border-left: 1px solid #7a7979; border-right: 1px solid #fff; }
.menu_wrapper li:last-child {border-right: 1px solid #7a7979;}
.menu_wrapper li a {color: #000; font-weight: 500;}
.menu_wrapper li a:hover {background: #f6ee41; padding: 7px 25px; border-radius: 30px;}

/*行程特色*/
.main { width: 1100px; margin: 0 auto; background-color:#fff;padding: 20px 25px; border-radius: 50px; margin-top: 50px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);}
.group { width: 1050px; background: #fff; margin: 50px auto;  padding: 20px 0px;}
.group_title {display: table;font-size: 34px; font-weight: 700; letter-spacing: 5px; padding: 10px 0; text-align: center; border-bottom: 5px #FFEB3A double; margin: 0 auto 20px;
    background: linear-gradient(transparent 94%, #fff100 0%);}
.group h3 {font-weight: 700; color: #00bbcb; font-size: 26px; padding-top: 20px; padding-bottom: 10px;}
.group p {font-size: 16px; font-weight: 500;}
.group_title.bn{font-size: 42px; border-bottom: 0px; background: none;margin: 0 auto 30px; color: #235caa; font-weight: bolder;letter-spacing: 3px;}

/*照片*/
.photo {width: 100%; padding: 5px 0; overflow: hidden;}
.photo img {width: 100%;}
.photo li {width: 49%; float: left; list-style: none; margin: 0.5%;}

/*圖文交錯*/
.item {display: flex;align-items: center; margin: 50px 0;}
.item p { line-height: 1.7;}
.item .pic {width: 55%; flex-shrink: 0;}
.item .pic img {width: 100%; vertical-align: middle;}
.item .txt {width: 45%; flex-shrink: 0; padding: 50px 30px; box-sizing: border-box;}

/*交通安排-國外*/
table.two-axis {width: 100%; margin-top: 10px; text-align: center; font-weight: 500; color: #444; border: 3px solid #bbb; border-radius: 10px; overflow: hidden;
    -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);}
table th {background: #8b6d54; color: #fff; font-size: 18px;}
table.two-axis tr, table.two-axis th, table.two-axis td {border-bottom: 1px solid #dbdbdb; padding: 15px;}

/*交通安排-國內*/
table.traffic {border: 2px solid #8d6e56; width: 100%; margin: 10px auto; font-size: 17px; font-weight: bold; text-align: center;}
table.traffic tr td {padding: 15px 0; border-bottom: 1px #a0a0a0 solid; border-right: 1px #a0a0a0 solid;}
table.traffic td.bus {background: #8b6d54; color: #fff;}

/*每日行程*/
.schedule_content {border-top: 5px dotted #edeadc; padding: 20px 0; margin-top: 20px;}
.schedule_content.first {border-top: 0; margin-top: 0; padding-top: 0;}
.schedule_day {font-size: 36px; font-weight: 500; color: #00b8c9; position: relative; line-height: 1.5;}
.schedule_title {font-size: 24px; position: relative; margin-bottom: 5px; font-weight: 500; line-height: 1.4;}

/*每日詳情-收合*/
/*隱藏內容*/div.panel {width: 100%; height: 0; overflow: hidden;}
/*展開收合的按鈕*/
.open, .close {border-radius: 30px; border: 2px solid #ff6d3f; color: #ff6d3f; padding: 4px 20px; font-size: 15px; font-weight: 500; width: 200px; float: right; text-align: center;}
.close {display: none;}
.open01 {display: none;}
.flip:hover .open, .flip:hover .close {background-color: #ff6d3f; color: white;}
.active .open01 {display: block;}
.active .close01 {display: none;}
.active .open {display: none;}
.active .close {display: block;}
.active div.panel {height: auto;}

/*每日行程-詳細內容*/
.daily_list {padding-left: 30px; overflow: hidden;}
.daily_list li {position: relative; list-style: none; padding: 15px 0;}
.daily_list li:before {content: ""; position: absolute; z-index: 1; text-align: center; border-radius: 100%; background-color: #ccc; width: 15px; height: 15px; left: -30px; top: 20px;}
.daily_list li:after {content: ""; position: absolute; top: 30px; left: -24px;width: 3px; height: 100%; background-color: #eee;}
.daily_list_time {font-size: 24px; padding-bottom: 2px; color: #ff6935;}
.schedule_content .lightblue {display: block; font-weight: 500;}
.schedule_content .orange {display: block; font-weight:500;}
.schedule_content .red {display: block;}
.schedule_content .pink {display: block;}
.schedule_content .blue {display: block; font-size: 22px;}

/*每日行程-餐飲+住宿*/
.info_content {font-size: 15px; font-weight: 400; background: #fff5ea; padding: 20px 30px; width: 100%; margin: 15px auto 0; color: saddlebrown; overflow: hidden; box-sizing: border-box; border-radius: 20px;
    -webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    display: flex;
    flex-wrap: wrap;}
.info_area {width: 50%;
    display: flex;
    align-items: center;}
.icon {display: inline-block;}
.icon::before {content: ' '; display: inline-block; font-size: 2.5em; line-height: 1em; width: 1em; height: 1em; border: 2px solid #917f6b; border-radius: 50%; margin: 10px;}
.icon-foods::before {background: url("icon/icon-foods.png") no-repeat center; background-size: 80%;}
.icon-hotel::before {background: url("icon/icon-hotel.png") no-repeat center; background-size: 80%;}
.icon-traffic::before {background: url("icon/icon-traffic.png") no-repeat center; background-size: 80%;}
.icon-discount::before {background: url("icon/icon-discount.png") no-repeat center; background-size: 80%;}
.icon-gift::before {background: url("icon/icon-gift.png") no-repeat center; background-size: 80%;}

/*報名團費*/
table.price {border: 2px solid #4d4d4d; width: 100%; margin: 10px auto;}
table.price tr td {padding: 10px; border-bottom: 1px #a0a0a0 solid; border-right: 1px #a0a0a0 solid;}
table.price tr.tr001 {background-color: #ffe39b; font-weight: 500; color: #663810; text-align: center;}
table.price tr.tr002 {}

/*項目包含*/
.ps_title {margin-top: 15px; font-size: 17px; font-weight: bold; padding-bottom: 5px;}
#project ul, #notice ul {width: 96%; margin: auto;}
#project li, #notice li {list-style: decimal; margin-left: 15px;}

/*特別說明*/
#feature {margin-bottom: 0; padding-bottom: 0;}

/*我要詢問*/
.ask_float { position: fixed;top: 150px; right: 5px; z-index: 250; }
.ask_float { background: #1fa3b1;  margin: auto;  border-radius: 20px;  padding: 15px 20px 10px; font-size: 20px; line-height: 24px;text-align: center;}
.ask_float a { color: #ffffff; font-weight: bold; width: 100%; }
.ask_float a:hover { color: yellow; }
.ask_wrapper { width: 100%; margin: 10px 0 30px; } 
.ask_main {width: 1100px; margin: 0 auto; overflow: hidden; font-weight: 500; background: #fffbf8; 
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);}
.ask_main h4 { font-size: 25px; font-weight: bold;  text-align: center; background: #1fa3b1; color: #fffbf8; padding: 7px 0; line-height: 1.2em; letter-spacing: 5px;}
.ask_content {width: 88%; margin: 10px auto 15px; font-size: 17px;line-height: 25px;  overflow: hidden;}
.ask_content a { display: inline; text-decoration: underline; color: tomato;  }
.ask_content a.photo { color: #333;  text-decoration: none;}
.ask_list { width: 400px; border-right: 3px solid #e4e4e4; margin-right: 60px;}
.ask_action {width: 487px;}
.ask_content h3 {position: relative; background: #f57c60; border-radius: 20px; font-size: 22px; line-height: 30px; font-weight: bold; padding: 5px 40px;  display: inline-block;  margin: 10px 0 5px;  color: #fff; border-bottom: 3px #fff solid; }
.ask_content h3.demand a { color: #fff; text-decoration: none; }
.ask_content h3.demand:hover { background: #ff6029; border-bottom: 3px #ce4515 solid; }
.ask_content p { padding:  0 0 0 10px; }
.hand{ position: absolute; top: 10px; right: 8px;}

/**float**/
.float_wrapper {position: fixed; bottom: 30px; right:-5px; z-index: 250; border: 8px solid #969696; border-radius: 20px 0 0 20px; }
.go_top {display: block;cursor: pointer; }
.float_leftmenu {margin: auto; width: 80px;}
.float_leftmenu:after {content: '';display: table;clear: both;}
.float_leftmenu li {position: relative; padding: 10px 0 10px; text-align: center; font-size: 18px; line-height: 24px; background:#969696; border-bottom: 2px dotted #ccc;}
.float_leftmenu li.first {border-radius: 10px 0 0 0; padding-top: 10px;}
.float_leftmenu li a {position: relative; z-index: 500; color: #fff; cursor: pointer; font-weight: 500; line-height: 17px;}
.float_leftmenu li a:hover, .group_leftmenu li a:focus, .group_leftmenu li a:active {color:yellow;}
.float_leftmenu li:after {position: absolute;right: 51%;bottom: 0;left: 51%;z-index: 1;height: 2px;background: yellow;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;}
.float_leftmenu li:hover:after, .type_leftmenu li:focus:after, .type_leftmenu li:active:after {right: 10%;left: 10%;}
.float_leftmenu li.gotop {font-size: 17px; border-radius: 0 0 0 10px; border-bottom: 0; padding-bottom: 1px;}
.float_leftmenu li.gotop span {font-size: 12px; display: block;}

@media screen and (max-width:1024px) {
body {font-size: 13px; line-height: 1.4em; font-weight: 400;}
.gotop {background: url(//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png) no-repeat; height: 36px; position: fixed; right: 5px; width: 36px; bottom: 100px; z-index: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}
.header {width: 100vw}
.display_pc {display: none;}
.display_m {display: block}
	
.main {width: 94vw; margin-bottom: 10px; padding: 2vw 3vw; border-radius: 20px; margin-top: 5vw;}
.main img {width: 100%;}	
.group {width: 100%; margin: 10px auto; padding: 10px 0;}
.group_title {font-size: 28px; margin-bottom: 10px;line-height: 35px;}
.group h3 {font-size: 22px;}
.group_title.bn{font-size: 30px; line-height: 35px;margin: 0 auto 10px;}    

/*大圖+主標*/
.bigphoto_container {width: 96%;}
.bigphoto_photo {width: 65%;}
.bigphoto_title {width: 35%;}
.bigphoto_img {height: 330px;}
.bigphoto_title h2 {font-size: 30px; line-height: 1.2em;}
.bigphoto_title li {font-size: 18px; line-height: initial;}
	
/*出團日期*/
.day_main {width: 100vw; margin: 0; padding: 9px 15px; height: auto;}
.day_left {font-size: 15px; line-height: 1.5; width: 100%;}
.day_right {float: none;}
.day_right a.ask, .day_right a.buy{ padding: 7px 0;  font-size: 16px; margin: 1% 0.5%; width: 48%; text-align: center;}

/*每日行程*/
.schedule_day {font-size: 25px;}
.schedule_title {font-size: 17px;}

/*每日詳情-收合*/
div.panel {padding: 3px 0;}
.open, .close {font-size: 14px; padding: 4px 5px;}

/*每日行程-餐飲+住宿*/
.info_content {padding: 10px; font-size: 13px;}
.info_area { width: 100%; float: none; }
	
/*報名團費*/	
table.price {width: 100%;}
	
/*項目包含*/
ol.price-ps li {margin-left: 10px; padding: 0;}	
	
/*我要詢問*/
.ask_float {display: none;}
.ask_wrapper {width: 96%; margin: 0 auto;  padding-bottom: 110px;}
.ask_main {width: 100%;}
.ask_main h4 {font-size: 20px; letter-spacing: 3px;}
.ask_content {width: 90%; margin: 2px auto 10px; font-size: 14px;line-height: 24px;}
.ask_content a {font-weight: bold;}
.ask_content a.photo {color: tomato; text-decoration: underline;}
.ask_list {width: 100%; border-right: none; margin-right: 0;}
.ask_action {width: 100%;}
.ask_content h3 {font-size: 18px; line-height: 24px; margin: 10px 0 0;}
.ask_content p {padding: 0 0 0 5px; font-weight: normal;}
.hand {top: 3px;}
	
/*錨點 置底*/
.category_wrapper.fix { height: 50px;}
.menu_wrapper { width: 100vw; background: #f2f2f2; padding: 7px 0; position: absolute; bottom: 30px; border-top: 1px solid #ccc;}
.menu_wrapper ul { height: 37px;  width: 100vw;}
.menu_wrapper li { font-size: 14px; line-height: 16px; font-weight: bold; }
.menu_wrapper li a:hover { padding: 5px; border-radius: 5px; }
.menu_wrapper li a span { display: block; }
.menu_wrapper li:first-child { border-left: 1px solid #f2f2f2;}
.menu_wrapper li:last-child { border-right: 1px solid #f2f2f2;}
	
.event_details { display: none;}
.float_wrapper {display: none; left: 100%;}
.M_menu_wrap {position: fixed; bottom: 0; z-index: 200; display: block; font-size: 13px;}
.M_menu_block {width: 100vw; height: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1fa3b1), color-stop(100%, #0b7e8a));}
.M_menu_block ul {list-style: none; overflow: hidden;
	display: flex;}
.M_menu_block li {font-size: 16px; line-height: 50px;  border-top: 1px solid #ccc; text-align: center; border-left: 1px solid #ffffff;
	flex: auto;
    justify-content: center;
    align-items: center;}
.M_menu_block li a {color: #fff; }
.goindex {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111)); }
}

@media screen and (max-width:768px) {
/*大圖+主標*/
.bigphoto_wrapper {padding: 0; background:#f8f8f8;}
.bigphoto_container {width: 100vw; display: block;}
.bigphoto_photo {width: 100%;}
.bigphoto_img {border-radius: 0; height: 250px;}
.bigphoto_title {width: 90%; padding: 3% 5%;}
.bigphoto_title h2 {font-size: 23px;}
.bigphoto_title li {margin-left: 25px; font-size: 16px;}
	
/*圖文交錯*/
.item {margin: 20px 0; flex-direction: column;}
.item .pic {order: 2; width: 100%;}
.item .txt {order: 1; width: 100%; padding: 0 0 5px 0;}
.item p {line-height: 1.5;}
	
.group p {font-size: 14px;}
	
/*費用說明*/
#price ul {width: 96%; margin: auto;}
}

@media screen and (max-width:570px) {
/*交通安排*/
table { border: 1px solid #e4ebeb;}
table.two-axis tr td:first-of-type, table.two-axis tr td:first-of-type:before {background: #8b6d54; color: #fff;}
table.two-axis tr, table.two-axis th, table.two-axis td {padding: 0;}
table.bt tfoot th:before, table.bt tfoot td:before, table.bt tbody td:before {background: #ffe4d0; margin-right: 10px; padding: 5px;}
table.two-axis tr td:first-of-type {padding: 5px;}
table.bt tfoot th::before, table.bt tfoot td::before, table.bt tbody td::before {width: 8em !important;}	
}