/*2018團體行程月份新增*/
.hokkaido_month{display: inline-block; position:relative; width:100%;  margin-right:-2px; vertical-align:top; }
.hokkaido_month li{ display:block; border:1px solid #000;  margin-bottom:60px; position:relative; width:100%; }

.hokkaido_month li a{ display:inline-block;  text-align:center; width:calc(100%/4 - 63px); margin-right:-3px; border-right:1px solid #000; padding:0 30px;  }
.hokkaido_month li a:hover {background:url(../images/hokkaido/mask_02.png) 50% 50% ; }

.hokkaido_month li a i{ display:inline-block; font-style:normal; font-size:70px; font-family:''; color:#000;}
.hokkaido_month li a p{display:inline-block; font-size:30px; font-family:''; color:#000; padding-left:5px;}

.hokkaido_month_tit{ position:absolute; left:40px; top:80px; z-index:100;}
.hokkaido_month_tit b{ display:block; font-size:36px; width:36px; color:#fff;}
.hokkaido_month_tit em{ display:block; font-size:75px; width:75px; color:#fff;}


/*團體行程月份頁籤*/
.hokkaido_month_tag{ display:block; margin-bottom:20px;}
.hokkaido_month_tag a{ display:inline-block; width:calc(100%/12 - 3px); margin-right:-4px;padding:15px 0; font-size:23px; text-align:center;  color:#fff; background: #BDD77A;}
.hokkaido_month_tag a:hover{background: #036205; transition:0.4s;}
.hokkaido_month_tag a:last-child{ margin-right:0;}
.hokkaido_month_tag a.htag_on{ background:#90A37B; color:#fff;}


/*2016最新消息新增*/
.colorbar02{ display:block; margin-bottom:20px;}
.colorbar02 li{ display:inline-block; width:calc(100%/6 - 13px); height:40px; margin-bottom: 25px; line-height:40px; margin-left:5px; border-radius:5px; text-align:center; color:#fff; font-size:21px; }
/*.colorbar02 li:first-child{ margin-left:0;}*/
.colorbar02 li.color_icon{ background:#063176; }
.colorbar02 li.color_icon02{ background:#4e5694; }
.colorbar02 li.color_icon03{ background:#14aab3; }
.colorbar02 li.color_icon04{ background:#7376be; }
.colorbar02 li.color_icon05{ background:#198ba8; }
.colorbar02 li.color_icon06{ background:#e49f0b; }

.colorbar02 li.color_at{ border:3px solid #97c7d7; background:#fff; font-size:21px; height:35px; line-height:35px; text-align:center; color:#000; width:calc(100%/6 - 19px);}
.colorbar02 li.color_at a{color:#97c7d7; display:block; }
.colorbar02 li:hover{-webkit-filter:grayscale(0.8); filter:grayscale(0.8); cursor:pointer; transition:0.4s;}
.colorbar02 li a{ color:#fff; text-decoration:none; display:block; }

/*2016 new_list*/
/*.colorbar{ display:block; margin-bottom:20px;}
.colorbar li{ display:inline-block; width:18%; height:40px; line-height:40px; border-radius:5px; font-weight:bold; text-align:center; color:#fff; font-size:25px; margin-left:15px;}
.colorbar li:first-child{ margin-left:0;}
.colorbar li.color_icon{ background:#43caca; }
.colorbar li.color_icon02{ background:#5abb49; }
.colorbar li.color_icon03{ background:#f7b40e; }
.colorbar li.color_icon04{ background:#f34c49; }
.colorbar li.color_icon05{ background:#b2398a; }

.colorbar li.color_icon:hover,.colorbar li.color_icon02:hover,.colorbar li.color_icon03:hover,.colorbar li.color_icon04:hover,.colorbar li.color_icon05:hover{-webkit-filter:grayscale(0.8); filter:grayscale(0.8); cursor:pointer;}
.colorbar li.color_icon a,.colorbar li.color_icon02 a,.colorbar li.color_icon03 a,.colorbar li.color_icon04 a,.colorbar li.color_icon05 a{ color:#fff; text-decoration:none;}

*/
#logo{background:#fff; box-shadow:none; width:330px;  }
#logo a{width:330px; height:auto;}
.smaller #logo{background:#fff;    }
.logo img{display:block; width:275px; height:auto; margin: auto;}


.ad{width:100%; height:300px; overflow:hidden; position:relative;}
.ad_title{position:absolute; z-index:1; top:20%; left:3%;}
.ad_title dt{/*font-family: 'Gravitas One', cursive; color:rgba(255, 255, 255, 0.7); font-size:100px;*/ display:none;}
.ad_title dd{font-size:60px; color:#fff;}
.ad_title dd span{font-size:36px;}
.ad_title dd.stitle{font-family: 'Poiret One'; font-size:50px; margin:-6% 0 -2%;}
.ad_gray{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}


.detail_title{color:#4d4d4d; font-size:30px; font-weight:bold; display:flex; align-items:center; margin:6% 0 4%; justify-content:center; box-sizing:border-box; text-align:center;}
.detail_title span{height:26px; display:flex; align-items:center; border-left:3px solid #b1ada2; border-right:3px solid #b1ada2; padding:0 4%; margin:0 auto;}


.detail_title2{text-align:center; color:#747474; font-family:'Quicksand'; font-size:36px; margin:0 0 4% 0;}
.detail_title2 span{font-size:20px; border-bottom:1px solid #b9b9b9; padding:0 0 7px 0; font-family:"微軟正黑體";}

.detail_bg{background:url(../images/other/det_bg.jpg); background-size:100%;}
#map_container{position: relative;}
#map{height: 0; overflow: hidden; padding-bottom:35%; padding-top: 30px; position: relative;}

.btn_box{text-align:center; margin:3% 0;}
.btn_box li{display:inline-block; margin:0 2%;}
.back2_btn{width:345px; height:80px; border:1px solid #00a7cb; color:#fff; font-size:30px; display:flex; margin:0 auto 10%; align-items:center; justify-content:center; border-radius:7px; background:#00a7cb;}
.back2_btn:hover{background:none; color:#00a7cb;}
.download_btn{background:#ff9c00; border:1px solid #ff9c00;}
.download_btn:hover{background:none; color:#ff9c00;}

/*boracay*/
.boracay_top{margin: 0 0 6%;}
.boracay_top img{width: 100%;}
.boracay_top dt{width: 55.2%; float: right; background: #cef2f5; text-align: center; padding: 3.2% 0 8%;}
.boracay_top dt p{font-size: 50px; color: #7aa3a6; width:488px; font-weight: bold; line-height:60px; padding: 0 0 0 4%;}
.boracay_top dt span{color: #fff; font-family: 'Poiret One'; display: block; font-size: 100px;}
.boracay_top dd:nth-child(2){width: 44.8%;}
.boracay_top dd:nth-child(3){width: 100%; color: #444545; font-size: 20px; margin: 2% 0 0; line-height:26px;}

.boracay_title{width: 100%; margin: 0 0 2%;}
.boracay_title dd{width:55px; color: #949494; font-family: 'Cantora One'; font-size: 38px; padding:0 35px 0 0; font-weight: bold; letter-spacing:2px; text-align: center; background:url(../images/other/boracay_icon.png) no-repeat right 4px;}
.boracay_title dd span{color: #444545; font-size: 18px; font-family: 'Quicksand'; display: block; font-weight: normal; letter-spacing: 0; margin:0 0 -15px;}
.boracay_title dt{font-size: 50px; color: #fff; background: #a0dde2; padding:0 0 0 10px; line-height: 55px; float: right; width: 90%;}

.boracay_text{font-size: 20px; width:calc(100% - 110px); color: #444545; margin: 2% 0 5%; padding-left:110px;}
.boracay_text dl{color: #0090ff;}
.boracay_text dl dt{float:right; width: 94%;}
.boracay_text dl dd{float:left; width:60px;}
.boracay_text ul{color: #0090ff;}
.boracay_text ul li{width: 20%; display: inline-block;}
.boracay_text span{color:#cc00ff;}

.boracay_pic img, .boracay_pic2 img, .boracay_pic3 img{width: 100%;}
.boracay_pic{width: 100%; background: #eaeaea;}
.boracay_pic dt{width:29.65%; float: right;}
.boracay_pic dd{width:70%;}
.boracay_pic2 li{width:33%; margin:0 0.5% 0 0; float:left;}
.boracay_pic2 li:nth-child(3){margin-right:0;}
.boracay_pic3 dt{width:46.45%; margin:0 1 0 0; float:left;}
.boracay_pic3 dd{width:53.55%; float:right;}

.boracay_slogan{color:#83a5a6; text-align:center; margin:5% 0 9%; font-size:30px; font-weight:bold; left:2px;}
.boracay_slogan dt span{font-size:50px; color:#3ab6ea; font-style:italic; padding:0 0 0 10px;}
.boracay_slogan dd span{font-size:24px; color:#a8afb2; font-family: 'Quicksand'; padding:0 0 0 10px; font-weight:normal;}

.boracay_local_title{font-size:26px; font-weight:bold; color:#7b7b7b; letter-spacing: 2px; padding:5% 0 0%;}
.boracay_local_title img{width: 139px; height: 45px; vertical-align: middle; margin:0 10px 0;}
#boracay_local{padding: 10px; margin:3% 0 0;background:#758a94;color: #FFF; width: 100%; font-size: 22px; display: block; letter-spacing: 1px;}

.faq{padding:0 0 5%;}
.faq li {padding: 20px; line-height:28px; font-size:16px;}
.faq li.q:nth-child(1){margin:3% 0 1.5%;}
.faq li.q {padding: 10px; margin:1.5% 0 0; background: #758a94; color: #FFF; width: 100%; font-size: 22px; display: block; letter-spacing: 1px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.faq li.q:hover{cursor:pointer;}
.faq li.a {display: none;}
.faq li.a ul.l1{margin:0 0  2% 0;}
.faq li.a ul.l1 li{list-style:decimal; margin:0 0 0 30px; padding:0;}
.faq li.a ul.l2{margin:0 0  2% 0;}
.faq li.a ul.l2 li{list-style:disc; margin:0 0 0 30px; padding:0;}
.faq li span.c_r{color:#f00;}
.faq li span.c_b{color:#00F;}
.faq li span.btext{text-align:center; display:block; font-size:20px; margin:1% 0 3%; letter-spacing:1px; color:#333;}
.faq li span.triangle{width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 12px; border-color: transparent transparent transparent #ffffff; display:inline-block; margin:0 8px 0 0;}

.rotate {-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);}

/*slogan*/
.boracay_top dd span{display: block; color:#ffa92f;text-align:center; font-weight:bold; letter-spacing:3px;}
.boracay_top dd span:before,.boracay_top dd span:after{ content:'|'; width:100%;color:#ffa92f; padding:0 15px; }
.slogan_title{ color:#7aa3a6; font-weight:bold;}
.slogan_text{ padding:1% 0 8% 110px;color: #0090ff; width:calc(100% - 110px); border-bottom:2px dashed #ccc;}
.slogan_text li:nth-child(2){ color:#444545;}


/*news*/
.news{width:100%;}
.news_title{font-size:36px; color:#444444; margin:0 0 2%; text-align:left;}
.news_title span:nth-child(1){display:block; border-bottom:2px solid #97c7d7; width:66px;}
.news dl{width:31%; margin:0 2% 2% 0; display:inline-block; vertical-align:top;}
.news dl:nth-child(3n){margin-right:0;}
.news dl dt{width:100%; position:relative; margin:0 0 10px 0; opacity:0.95;}
.news dl:hover dt{opacity:1;}
.news dl dd:nth-child(2){color:#438ca5; font-size:20px; border-bottom:1px solid #438ca5; padding:0 0 8px 0; margin-bottom:10px;}
.news dl dd:nth-child(2) a{color:#438ca5; width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.news dl:hover dd:nth-child(2) a{color:#005775;}
.news dl dd{color:#767676; font-size:14px;}
.news dl dd:nth-child(3){margin-bottom:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.news dl dd:last-child{text-align:center;}
.news dl dd:last-child a{color:#438ca5; font-size:15px; border:1px solid #438ca5; padding:4px 0; width:120px; display:block; margin:0 auto; border-radius:1px; -webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;}
.news dl:hover dd:last-child a{background:#438ca5; color:#fff; -webkit-transform: scale(1.05);transform: scale(1.05);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);}

.news_date{text-indent:-9999px; display:none;width:94px; height:94px; position:absolute; bottom:-35px; left:38%; text-align:center; line-height:28px; padding:2px 0 0 0; border-radius:50%; color:#4c4c4c; font-size:17px; font-family:'Quicksand'; background:#b8dce8;}
.news_date span{font-size:36px; display: none;}


.news_detail_title{border-bottom:1px solid #b5b5b5; padding:0 0 20px 0; display:flex; align-items:center; margin:0 0 5% 0;}
.news_detail_title dt{ text-indent:-99999px;width:94px; height:94px; text-align:center; padding:5px 0 0 0; border-radius:80%; color:#4c4c4c; font-size:17px; font-family:'Quicksand'; background:#b8dce8; line-height:28px; box-sizing:border-box;}
.news_detail_title dt span{font-size:36px; display:none;}
.news_detail_title dd{width:85%; padding:0 2%; margin:0 0 0 3%; font-size:30px; font-weight:bold; border-right:3px solid #b1ada2; border-left:3px solid #b1ada2;}
.news_detail_edit1, .news_detail_edit1_2{font-size:16px; color:#3e3e3e;background:#fff; margin-bottom:50px;}

.news_detail_edit3{ display:block; margin:0; font-size:16px; color:#3e3e3e; padding:10px; background:#fff;}
.news_detail_edit1_2{display:none;}

.newspage{ display:block; margin-bottom:10px; font-size:40px; font-family:Cambria, '微軟正黑體'; }
.ne_01{ color:#063176;}
.ne_02{ color:#e49f0b;}
.ne_03{ color:#14aab3;}
.ne_04{ color:#7376be;}
.ne_05{ color:#198ba8;}
.ne_06{ color:#4e5694;}

.food_type li.type_on{background:#4992a4;}
.food_type li.type_on:hover{background:#4992a4;}
.food_type li.type_on a{color:#fff;}

.food_type02 li.type_on_02{background:#c78d05;}
.food_type02 li.type_on_02 a{color:#fff;}

.food_type03 li.type_on_03{background:#ad252d;}
.food_type03 li.type_on_03 a{color:#fff;}


/*food*/
.food_type{border-bottom:1px solid #c4c4c4; border-top:1px solid #c4c4c4;  padding:2% 1% 0 15px; margin:0 0 2.5% 0;}
.food_type li{padding:7px 1%; color:#565656; font-size:16px; margin:0 1% 2% 0; float:left; background:#cbdade;}

.food_type li a{color:#565656;}
.food_type li:hover{background:#7CBDCF;}

.food_type02{border-bottom:1px solid #c4c4c4; border-top:1px solid #c4c4c4;  padding:2% 1% 0 15px; margin:0 0 2.5% 0; }
.food_type02 li{padding:7px 1%; color:#fff; font-size:16px; margin:0 1% 2% 0; float:left; background:#fab719;}
.food_type02 li a{color:#fff;}
.food_type02 li:hover{background:#c78d05;}

.food_type03{border-bottom:1px solid #c4c4c4; border-top:1px solid #c4c4c4; padding:2% 1% 0 15px; margin:0 0 2.5% 0; }
.food_type03 li{padding:7px 1%; color:#fff; font-size:16px; margin:0 1% 2% 0; float:left; background:#f45d66;}
.food_type03 li a{color:#fff;}
.food_type03 li:hover{background:#ad252d;}



.food_list{width:100%; box-sizing:border-box;}
.food_list li{float:left; width:32%; margin:0 2% 2% 0; cursor:pointer; height:354px; overflow:hidden;}
.food_list li:nth-child(3n){margin-right:0;}
.food_list li .store{position:relative; height:100%;}
.food_list li .store span{ display:block;font-family:'Lato', "微軟正黑體"; line-height:30px; margin-bottom:20px; text-align:center; width:100%; font-size:24px; color:#fff; text-shadow:0 0 7px #000; }
.food_list li .store p{display: block; height:180px; font-size:15px; overflow:hidden; opacity: 0; visbility: hidden; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s; color:#fff;}
.food_list li .store:before{content: ""; height: 1px; background: #fff; opacity: 0.5; width: 100%; position: absolute; top: 5%; margin-top: -1px; left: 0px; right: 0px;}
.food_list li .store:after{content: ""; height: 1px; background: #fff; opacity: 0.5; width: 100%; position: absolute; bottom: 5%; left: 0px; right: 0px;}
.food_list li .store_mask{background: transparent; position: absolute; bottom: 5%; left: 0; width: 100%; height:300px; padding: 15px 15px 0; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s;  box-sizing:border-box;}
.food_list li .store_mask a{width:70px; padding:2px 0; font-size:13px; display:block; text-align:center; color:#b7ac86; border:1px solid #b7ac86; font-weight:bold; position: absolute; bottom:20px; left:40%; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s; opacity: 0; visbility: hidden; }
.food_list li .store_mask:hover{cursor:auto;}
.food_list li .store_mask a:hover{background:#b7ac86; color:#000;}
.food_list li .store .store_mask{background:rgba(0,0,0,0.45); position: absolute; bottom: 5%; left: 0; width: 100%; height: 90%; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s; cursor:pointer;}
.food_list li .store:hover p{opacity: 1; visbility: visible; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s; transition-delay: .2s;}
.food_list li .store:hover .store_mask a{opacity: 1; visbility: visible; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s;}

/*景點餐食活動 列表圖高度自適應*/
.food_list li{ height: auto;}
.food_list li .store{  padding-bottom: 80%; position: relative; height: 0;}
.food_list li .store img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

.crsl-items {display: block;}
.crsl-item {}
.crsl-item .thumbnail {display: block;position: relative;}
.crsl-item .thumbnail img { display: block; /* fix 1px image space http://stackoverflow.com/q/5804256/477958 */-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;transition: all 0.3s linear;}
.food_slider{width:100%; margin:0 0 5% 0; padding:0 30px; box-sizing:border-box; position:relative;}
.slidernav {display: block;text-align: center;margin-bottom: 5px; position:absolute; top:50%; z-index:1;}
.slidernav a{position:absolute; width:29px; height:29px; opacity:0.8;}
.slidernav a.prev{left:-35px;}
.slidernav a.next{right:-1124px;}
.slidernav a:hover{opacity:1;}

.food_place_title{text-align:center;color:#0078ff; font-size:24px; margin:0 0 5px 0;}
.food_place_edit{color:#000; font-size:15px; line-height:25px; margin:0 0 5% 0;}
.food_data{padding:5% 0; position:relative; margin:0 0 4% 0;}
.food_info{width:55%; height:455px; color:#595959; float:left; padding:0 4% 5% 0; box-sizing:border-box;}
.food_info dt{width:60%; font-size:36px; font-family:'Quicksand'; border-bottom:1px solid #bbbbbb; margin:0 0 20px 0;}
.food_info dd{font-size:15px; padding:2px 0 2px 25px; margin:0 0 15px 0;}
.food_info dd a{color:#595959;}
.food_info dd a:hover{color:#81a700;}
.food_info dd:nth-child(2), .food_info dd:nth-child(3){background:url(../images/other/icon1.png) no-repeat left 7px;}
.food_info dd:nth-child(4){background:url(../images/other/icon2.png) no-repeat left 7px;}
.food_info dd:nth-child(5){background:url(../images/other/icon3.png) no-repeat left 7px;}
.food_map{width:45%; float:right;}
#foodmap{height:600px; overflow: hidden; /*padding-bottom:86%; padding-top: 30px;*/ position: relative;}
.yon{width:50%; border:1px solid #ccc; border-radius:8px; padding:1%; box-sizing:border-box; color:#3a3a3a; font-size:15px; float:left;}
.yon dl{margin:0 0 6% 0;}
.yon dl dt{width:40%; float:left;}
.yon dl dd{color:#7a9e01; font-size:13px; display:inline; margin:0 0 0 5%; float:right;}
.yon ul li{width:30%; margin:0 2% 0 0; float:left;}
.yon ul li label{display:inline-block; vertical-align:text-bottom;}
.yon ul li label:hover{cursor:pointer;}
.yon ul li:nth-child(3){position:relative; margin:1% 0 0 10%; width:84px;}
.yon ul li:nth-child(3) p{width:84px; top:0; left:0; padding:2px 0; color:#fff; position:absolute; font-size:15px; text-align:center; background:#81a700;}
.yon ul li:nth-child(3) span{font-size:11px; display:block;}
.yon ul li:nth-child(3) input{width:84px; height:48px; padding:14px 8px; z-index:22; background:none; border:0; position:relative;  box-sizing:border-box; -webkit- box-sizing:border-box; -moz- box-sizing:border-box; -webkit-appearance:none;}
.yon ul li:nth-child(3) input:hover{position:relative; top:1px; left:1px; cursor:pointer;}
.yon ul li:nth-child(3):hover{cursor:pointer; top:1px; left:1px;}
.yon2{width:100%; margin:2% 0 3%;}
.yon2 ul{margin:-4% 0 1%;}

.food_edit1, .food_edit2{font-size:15px; color:#000; padding:0 0 5% 0;}
.food_edit2{display:none;}
.food_editimg{background:#f3f3f3;  margin:0 0 5% 0;}
.food_editimg dl{float:left;}
.food_editimg dl dt{color:#1f1f1f; display:flex; height:115px; font-size:24px; padding:1%; font-family:'Quicksand'; text-align:center; box-sizing:border-box; justify-content:center; align-items:center; line-height:24px;}
.food_editimg dl.editimg1{width:43%;}
.food_editimg dl.editimg2{width:25.5%;}
.food_editimg dl.editimg3{width:31.5%;}

.message_title{color: #4d4d4d; font-size: 20px; display: flex; align-items: center; margin: 6% 0; justify-content: center; box-sizing: border-box; text-align: center;}
.message_title span{height: 26px; display: flex; align-items: center; border-left: 3px solid #b1ada2; border-right: 3px solid #b1ada2; margin: 0 auto; width:230px; justify-content:center;}
.message{margin:0 auto 12%; width:80%; box-sizing:border-box;}
.message ul{font-size:16px; border-bottom:5px solid #E8E8E8; margin:0 auto 2.5%; color:#383838; padding:0 1% 1.5%;}
.message li{margin:0 0 1% 0; display:inline-block;}
.message li:nth-child(1){width:30%;}
.message li:nth-child(2){width:70%; padding:0 0 0 5%; box-sizing:border-box;}
.message li:nth-child(3){display:block;}
.message li.remessage{background:#E8E8E8; padding:2%; margin:2% 0 0 0; width:100%; box-sizing:border-box;}
.leave_mesg{width:80%; margin:0 auto 15%; color:#383838; padding:2%; border-radius:10px; box-sizing:border-box;}
.leave_mesg li{margin:0 0 1% 0;}
.leave_mesg li label{display:inline-block; width:10%; vertical-align:top;}
.leave_mesg li input[type=text]{background:#E8E8E8; border:0; padding:5px; width:40%;}
.leave_mesg li input.code{width:100px;}
.leave_mesg li img{width:auto;}
.leave_mesg li textarea{background:#E8E8E8; border:0; padding:3px 5px; width:88%; max-width:88%; min-height:200px;}
.leave_mesg li input[type=submit]{background:none; width: 84px;  padding: 14px 8px; border: 0;  position: absolute;  -webkit-appearance: none;}
.leave_mesg li input[type=submit]:hover{cursor: pointer;}
.leave_mesg li.submit{position:relative; width: 84px; padding: 14px 8px; margin:0 auto;}
.leave_mesg li.submit p{width: 84px; padding: 2px 0 0 0; color: #fff; position: absolute; z-index: -1; background: #A0A0A0; font-size: 15px; text-align: center;}
.leave_mesg li.submit span{font-size: 11px; display: block;}
.leave_mesg li.submit:hover{position:relative; top:1px; cursor:pointer;}
.mesg_star{fill:#2396b2; width:20px; height:20px; padding:0 1px 0 0;}

.message_box{margin-bottom:15px;}
.message_box_oc{height: 26px; display: flex; align-items: center; border-left: 3px solid #b1ada2; border-right: 3px solid #b1ada2; width:230px; justify-content:center; margin: 0 auto; color:#4d4d4d;}
.message_box_oc:hover{color:#24566E; cursor:pointer;}

/*message board*/
.board{margin:0 auto 6%; width:80%; box-sizing:border-box;}
.board ul{font-size:16px; border-bottom:5px solid #E8E8E8; margin:0 auto 2.5%; color:#383838; padding:0 1% 1.5%;}
.board li{margin:0 0 1% 0; display:inline-block;}
.board li:nth-child(1){width:70%;}
.board li:nth-child(2){width:30%; padding:0 0 0 5%; box-sizing:border-box; font-size:0.75em; text-align:right; color:#999;}
.board li:nth-child(3){display:block;}
.board li.reboard{background:#E8E8E8; padding:2%; margin:2% 0 0 0; width:100%; box-sizing:border-box;}
.board li.reboard .reboard_day{width:100%; font-size:0.75em; color:#777; text-align:right; margin-bottom:10px;}
.board li.reboard .reboard_day strong{color:#000; font-size:1em; padding-right:20px; float:left;}
.board .red{color:#FF0000;}

/*hotel*/
.hotel_type{border:1px solid #c4c4c4; border-radius:7px; padding:2% 1% 0 15px; margin: auto auto 20px auto;}
.hotel_type ul{border:0; width:80%; border-radius:0; padding:0; margin:0; float:left;}
.hotel_type dl{border-left:1px solid #c4c4c4; float:right; /*width:20%;*/ width:225px; box-sizing:border-box;}
.hotel_type dl dt{font-size:16px; padding:1% 4%; float:left; color:#565656;}
.hotel_type dl dd{float:left;}
.hoteldetail_type{ display:none}
.hotel_star{fill:#cbdade; width:30px; height:30px;}
.hotel_star:hover{fill:#98CEDC; cursor:pointer;}
.hotel_star_on{fill:#2396b2;}
.hotel_star_on:hover{fill:#2396b2;}
.hotel_star_s{fill:#CCC; width:20px; height:20px; vertical-align:text-bottom;}
.hotel_star_son{fill:#F3D61A;}
.hotel_icon{width:36px; height:36px; fill:#b1ada2;}
.hotel_box dl dd ul{text-align:center; margin:3% 0 2.5%;}
.hotel_box dl dd ul li{display:inline-block; width:36px; height:36px; padding:0 3px;}
[data-tip] {position: relative;overflow: visible;}
[data-tip]:before,
[data-tip]:after {position: absolute;-webkit-transform: translateX(-50%);    -ms-transform: translateX(-50%);        transform: translateX(-50%);opacity: 0;filter: alpha(opacity=0);transition: opacity 0.3s ease, -webkit-transform 0.3s ease, visibility 0.3s ease;transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;visibility: hidden;font-size: 12px;line-height: 12px;}
[data-tip]:before {content: '';border: 6px solid transparent;}
[data-tip]:after {content: attr(data-tip);padding: 7px 10px;background-color: #333;display: block;color: #fff;white-space: nowrap;}
[data-tip]:hover:before,
[data-tip].data-tip-visible:before,
[data-tip]:hover:after,
[data-tip].data-tip-visible:after {opacity: 1;filter: alpha(opacity=100);visibility: visible;z-index: 9999;}
[data-tip].data-tip-top:before,
[data-tip].data-tip-top:after {bottom: 100%;left: 50%;}
[data-tip].data-tip-top:before {margin-bottom: -12px;border-top-color: #333;}
[data-tip].data-tip-top:hover:before,
[data-tip].data-tip-top.data-tip-visible:before,
[data-tip].data-tip-top:hover:after,
[data-tip].data-tip-top.data-tip-visible:after {-webkit-transform: translateX(-50%) translateY(-8px);    -ms-transform: translateX(-50%) translateY(-8px);        transform: translateX(-50%) translateY(-8px);}
.hotel_box{ padding-bottom:5%;}
.hotel_box dl{width:32%; /*min-height:434.5px;*/ vertical-align:top; margin:0 1% 1% 0; background:#fff; display:inline-block; box-shadow:0 0 8px 1px #D3D3D3; }
.hotel_box dl:nth-child(3n){margin-right:0;}
.hotel_box dl dd:nth-child(2){color:#fff; font-size:16px; padding:1% 2% 1% 3%; background:#6e6e6e; overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;  -webkit-box-orient: vertical;}
.hotel_box dl dd a{color:#fff;}
.hotel_box dl:hover dd:nth-child(2){background:#659900;}
.hotel_box dl dd:nth-child(3){color:#5f5f5f; height:70px; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size:14px; padding:3% 3% 0;}
.hotel_box dl dd:nth-child(3) span{color:#00a7cb; display:block; margin:0 0 5px 0; font-size:15px;}
.hotel_box dl:hover.mask {opacity: 1; border:100px solid rgba(0,0,0,0.7);}
.hotel_box dl:hover .third-effect a.info {opacity:1; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}
.third-effect .mask, .third-effect .mask2{width:100%; height:100%; opacity: 0; overflow:hidden; display:flex; justify-content:center; align-items:center; background:rgba(0, 0, 0, 0.5); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.third-effect a.info {position:relative; top:-10px; opacity: 0; -webkit-transition: opacity 0.5s 0s ease-in-out; -moz-transition: opacity 0.5s 0s ease-in-out; -o-transition: opacity 0.5s 0s ease-in-out; -ms-transition: opacity 0.5s 0s ease-in-out; transition: opacity 0.5s 0s ease-in-out;}
.third-effect:hover .mask, .third-effect:hover .mask2{opacity: 1; background:rgba(0, 0, 0, 0.5);}
.view {height:256px; overflow: hidden;position: relative;text-align: center; cursor: default; }
.view .mask, .view .content {position: absolute;overflow: hidden;top: 0;left: 0;}
.view img {display: block;position: relative; }
.view a.info {background:url(../images/icon_more.png) 15px 7px no-repeat;display: inline-block;text-decoration: none;padding:5px 0 0 23px; font-size:20px; color:#fff; font-family:'Quattrocento'; width:122px;height:42px; border-radius:5px; border:1px solid #fff; box-sizing:border-box;}
.view .mask2, .view .content {position: absolute;overflow: hidden;top: 0;left: 0; border-radius:50%;}
.hotel_box .view img{ height: auto; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.hotel_box .view{ padding-bottom: 80%; position: relative; height: 0; }
.hoteld_container{padding:66px 0 0 0;}
.hotel_dbanner{width:100%; padding:0 0 3% 0;}
.room_title{text-align:center; margin:2% 0 1% 0; font-size:24px; color:#4e8fa5;}
.room_edit{font-size:15px; color:#595959; line-height:24px;}
.hotel_items{text-align:center; margin:5% 0;}
.hotel_items li{width:80px; height:80px; display:inline-block; padding:0 8px;}
.items{fill:#b1ada2; width:80px; height:80px;}
.hotel_place_title{text-align:center; font-size:20px; color:#0899ff; margin:0 0 1% 0;}
.hotel_place_edit{font-size:15px; color:#000; text-align:left; border-bottom:3px solid #e4e4e4; padding:0 0 5%;}
.hotel_map{text-align:center; margin:4% 0 2%;}
.hotel_map dt{font-size:36px; color:#747474; margin:0 0 2% 0; font-family:'Quicksand';}
#hotelmap{/*height:600px;*/ overflow: hidden; padding-bottom:25%; padding-top: 30px; position: relative;}
.hotel_info{width:50%; padding:0 4% 0 10px; margin:0 0 5% 0; box-sizing:border-box; float:left;}
.hotel_info li{font-size:15px; color:#595959; padding:0 0 0 30px; margin:0 0 1% 0;}
.hotel_info li:nth-child(1){background:url(../images/other/icon1.png) no-repeat 2px 2px;}
.hotel_info li:nth-child(2){padding:0;}
.hotel_info li:nth-child(3){background:url(../images/other/icon1.png) no-repeat 2px 2px;}
.hotel_info li:nth-child(4){background:url(../images/other/icon2.png) no-repeat 2px 3px;}
.hotel_info li:nth-child(5){background:url(../images/other/icon3.png) no-repeat 2px 4px;}
.hotel_info li a{color:#595959;}
.hotel_info li a:hover{color:#81a700;}
.hotel_img{padding:2% 0 3%; margin:0 0 3% 0;}
.hotel_img ul li{margin:0 1% 2% 0; float:left;}
.hotel_img ul li:nth-child(1){width:20.1%;}
.hotel_img ul li:nth-child(2){width:43.2%;}
.hotel_img ul li:nth-child(3){width:34.7%; margin-right:0;}
.hotel_img ul li:nth-child(4){width:56.3%; background:#fff;}
.hotel_img ul li:nth-child(5){width:42.7%; margin-right:0;}
.hotel_img ul li dl{background:#fff; color:#2c2c2c; height:153px; text-align:center; padding:25px 0; box-sizing:border-box;}
.hotel_img ul li dl dt{font-size:28px; font-family:'Quicksand'; margin:0 0 3% 0;}
.hotel_img ul li dl dd{font-size:16px; font-family:"微軟正黑體";}
.hotel_img ul li dl dd span{border-bottom:1px solid #c6b497; border-top:1px solid #c6b497; padding:5px 20px; letter-spacing:2px;}
.hotel_img ul li dl dd img{width:13px; height:17px; margin:0 13px;}
.hotel_img ul li:nth-child(4) dl{width:20%; float:right; background:none; padding:12vw 0 0;}
.hotel_img ul li:nth-child(4) img{width:80%; float:left;}
.hotel_img ul li:nth-child(4) dl dd img{width:inherit; float:none;}
.hotel_img ul li:nth-child(5) dl{height:8vw; padding:3% 0 0 0;}
.hotel_edit1, .hotel_edit1_2{font-size:15px; color:#000; padding:0 0 8%;}
.hotel_edit1_2{display:none;}

/*sitemap*/

.sitemap_title{font-size:20px; color:#4d4d4d; margin:0 0 1.5% 0;}
.sitemap_title span{height: 26px; border-left: 3px solid #b1ada2;border-right: 3px solid #b1ada2;padding: 0 4%;margin: 0 auto;}
.sitemap ul{border:1px solid #c4c4c4; border-radius:5px; padding:1.5% 2% 1%; margin:0 0 5% 0;}
.sitemap ul li{display:inline-block; padding:0 5% 0 1%; margin:0 0 0.5% 0; color:#565656; vertical-align:top;}
.sitemap ul.sitemap_box2{margin:0 0 2% 0;}
.sitemap_title a, .sitemap ul li a{color:#565656;}
.sitemap_title a:hover, .sitemap ul li a:hover{color:#0085A6;}


/*news_catelogy*/
.news_box{padding-bottom:5%;}
.news_box dl{width:48%; min-height:440px;  vertical-align:top; margin:0 4% 4% 0; background:#fff; display:inline-block; box-shadow:0 0 8px 1px #D3D3D3;}
.news_box dl:nth-child(2n){margin-right:0;}
.news_box dl dd:nth-child(2){color:#fff; font-size:20px; text-align:center; padding:3% 2% 3% 3%; background:#6e6e6e; overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;  -webkit-box-orient: vertical;}
.news_box dl dd a{color:#fff;}
.news_box dl:hover dd:nth-child(2){background:#438ca5;}
.news_box dl dd:nth-child(3){color:#5f5f5f; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size:14px; padding:5% 3% 0;}
.news_box dl dd:nth-child(3) span{color:#00a7cb; display:block; margin:0 0 5px 0; font-size:15px;}
.news_box dl:hover.mask {opacity: 1; border:100px solid rgba(0,0,0,0.7);}
.news_box dl:hover .third-effect a.info {opacity:1; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}
.news_box .view{ height:380px;}

/*news_catelogy2*/
.in_news{width:100%; padding:2% 3%;}
.in_news_title{font-size:36px; color:#444444; margin:0 0 2%; text-align:left;}
.in_news_title span:nth-child(1){display:block; border-bottom:2px solid #97c7d7; width:66px;}
.news_box2 dl{width:45%; margin:0 5% 5% 0; display:inline-block;}
.news_box2 dl:nth-child(2n){ margin-right:0;}
.news_box2 dl dt{width:100%; position:relative; margin:0 0 15px 0; opacity:0.95;}
.news_box2 dl:hover dt{opacity:1;}
.news_box2 dl dd:nth-child(2){color:#438ca5; font-size:20px; border-bottom:1px solid #438ca5; padding:0 0 8px 0; margin-bottom:10px;}
.news_box2 dl dd:nth-child(2) a{color:#438ca5; width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.news_box2 dl:hover dd:nth-child(2) a{color:#005775;}
.news_box2 dl dd{color:#767676; font-size:14px; text-align:center;}
.news_box2 dl dd:nth-child(3){margin-bottom:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.news_box2 dl dd:last-child{text-align:center;}
.news_box2 dl dd:last-child a{color:#438ca5; font-size:15px; border:1px solid #438ca5; padding:4px 0; width:120px; display:block; margin:0 auto; border-radius:1px; -webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;}
.news_box2 dl:hover dd:last-child a{background:#438ca5; color:#fff; -webkit-transform: scale(1.05);transform: scale(1.05);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);}


.error404{background:url(../images/error404.png) no-repeat center 50px; background-size:100%; padding:50% 12.5% 7%; color:#595959; line-height:36px; font-size:20px;}
.error404 a{background:url(../images/404H.png) center 7px no-repeat, #97c7d7; color:#fff; border-radius:50%; font-size:14px; width:70px; height:35px; text-align:center; padding:35px 0 0 0; display:block; background-size:55%; margin:8% auto 0;}
.error404 a:hover{position:relative; top:1px;}

/*CSS grayr style pagination*/

DIV.quotes {PADDING: 3px; MARGIN: 3px; TEXT-ALIGN: center; font-size:12px; margin-bottom:6%;}
DIV.quotes A {BORDER: #ddd 1px solid; PADDING:2px 5px; COLOR: #aaa; MARGIN-RIGHT: 4px; TEXT-DECORATION: none;}
DIV.quotes A:hover {BORDER: #a0a0a0 1px solid; PADDING:2px 5px; MARGIN-RIGHT: 4px;}
DIV.quotes A:active {BORDER: #a0a0a0 1px solid; PADDING:2px 5px; MARGIN-RIGHT: 4px;}
DIV.quotes SPAN.current {BORDER: #e0e0e0 1px solid; PADDING:2px 5px; FONT-WEIGHT: bold; BACKGROUND-COLOR: #f0f0f0; MARGIN-RIGHT: 4px;}
DIV.quotes SPAN.disabled {BORDER: #f3f3f3 1px solid; PADDING:2px 5px; COLOR: #ccc; MARGIN-RIGHT: 2px;}


/*2017進階搜尋*/
a.mobil_search{ display:none;}

/*2018行程推薦*/
.new_hokkaido_group{ display:inline-block; width:calc(100%/4 - 30px); margin-right:30px; border-radius:10px; overflow:hidden; background:#f9f9f9; box-shadow:2px 2px 3px rgba(214,214,214,0.8); vertical-align: top; }
.new_hokkaido_group:hover{ box-shadow:4px 4px 10px rgba(214,214,214,1); 
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease; }
.new_hokkaido_group:nth-of-type(4){ margin-right:0;}
.new_hokkaido_group span.ng_photo{ display:block; border-radius:10px 10px 1px 1px; /*height:125px;*/ overflow:hidden; width:100%; }
.new_hokkaido_group span.ng_photo img{ display:block;width:100%; height:auto;transition:all ease 0.8s;}
.new_hokkaido_group:hover span.ng_photo img{-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.new_hokkaido_group p.ngroup_txt{ display:block; padding:20px; text-align:center; font-size:15px; color:#666666;}
a.nhmore_icon{ display:block; margin:0 auto 35px auto; background:#eeeeee; font-size:20px; padding:10px 0; text-align:center; color:#9b9b9b; border-radius:7px; width:50%; font-weight:bold;}
a:hover.nhmore_icon{ background:#4e5694; color:#fff; transition:0.4s;}

.linktit{ 
display: block; text-align: center; font-size: 24px; font-weight: bold; color: #fff; padding: 10px 0; background-color: #4474b4;  margin-bottom: 13px; width: 100%;
}


/*yt影片rwd*/
.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%;}


/*2022全日本*/
.japan { display: flex; background: #fcfcfc; flex-wrap: wrap; margin-bottom: 20px; }
.japan a{font-size: 24px; font-weight: bold; padding: 10px 20px; color: #2D7A94; }
.japan a:active,.japan a:focus { background:#2D7A94; color: #fff; }
.japan a.active { background:#2D7A94; color: #fff; }

@media screen and (max-width : 1590px) {
.ad_title dt{font-size:80px;}
.ad_title dd{font-size:50px;}
.ad_title dd.stitle{font-size:40px;}
.ad_title dd span{font-size:30px;}
.in_news dl dd:nth-child(2){font-size:18px;}
.hotel_img ul li:nth-child(5) dl{padding:2% 0 0 0;}


}


@media screen and (max-width : 1430px) {
.ad_title{top:25%;}
.ad_title dt{font-size:60px;}
.ad_title dd{font-size:40px;}
.ad_title dd.stitle{font-size:30px;}
.ad_title dd span{font-size:26px;}
.slidernav a.next{right:-1119px;}
.slidernav a.prev{left:29px;}
.hotel_img ul li:nth-child(4) img{width:100%;}
.hotel_img ul li:nth-child(4) dl{width:100%; padding:25px 0;}
.hotel_img ul li:nth-child(5) dl{height:153px; padding:25px 0;}
.hotel_img ul li:nth-child(4){width:42.3%;}
.hotel_img ul li:nth-child(5){width:56.7%;}


/*首頁最新消息*/

.colorbar{ float:none; margin-bottom:15px; display:block; width:100%;}
.colorbar li{float:none; display: inline-block; width:19%; height:57px; line-height:57px; border-radius:8px; font-weight:bold; text-align:center; color:#fff; font-size:25px; margin-left:0px;}
.colorbar li:first-child{ margin-left:0;}

}


@media screen and (max-width : 1216px) {
.ad_title{top:27%;}
.ad_title dt{font-size:50px;}
.ad_title dd{font-size:35px;}
.ad_title dd.stitle{font-size:27px;}
.ad_title dd span{font-size:22px;}
.news_date{width:78px; height:78px; left:40.5%; padding:6px 0 0 0; line-height:22px; box-sizing:border-box;}
.news dl dd:nth-child(2){font-size:20px;}
.food_list li{ /*height:327px;*/}
.food_list li .store_mask{height:24.7vw;}
.food_list li .store_mask{padding:4px 8px 0;}
.food_list li .store p{margin:-5px 0 0 0;}
.food_list li .store_mask a{bottom:10px;}
.food_slider{padding:0 1px;}
.slidernav{width:100%;}
.slidernav a.prev{left:0;}
.slidernav a.next{right:2px;}
.food_info{height:34.5vw;}
#foodmap{height:auto; padding:30px 0 100%;}
.yon{width:50%; bottom:8%;}
.yon2{width:100%;}

.view{height:20.5vw;}
.hotel_box dl{/*height:35.5vw; min-height:370px; */}
.hotel_box .view{ height: auto;}
.hotel_type ul{width:75%;}
.hotel_box dl dd ul li{padding:0 1.5px;}
.hotel_items li, .items{width:70px; height:70px;}
.hotel_img ul li dl dt{font-size:20px;}
.hotel_img ul li dl, .hotel_img ul li:nth-child(5) dl, .hotel_img ul li:nth-child(4) dl{height:100px; padding:8px 0;}
.hotel_img ul li dl dd{font-size:14px;}
.hotel_img ul li dl dd img{width:10px; height:13px;}
.hotel_img ul li dl dd span{padding:2px 10px;}
.hotel_img ul li:nth-child(3){margin-right:1%; width:47%;}
.hotel_img ul li:nth-child(4){margin-right:0; width:52%;}
.hotel_img ul li:nth-child(5){width:100%;}
.hotel_img ul li:nth-child(1){width:31.4%;}
.hotel_img ul li:nth-child(2){margin-right:0; width:67.5%;}

.news_box .view{ height:30.5vw;}
.news_box dl{min-height:354px; height:35vw;}

.boracay_top dt{width:100%; padding:4% 0 2%;}
.boracay_top dt p{font-size: 38px; width: 100%; padding: 0; line-height: 40px;}
.boracay_top dt span{font-size: 60px;}
.boracay_top dd:nth-child(2){width:40%; float: left;}
.boracay_top dd:nth-child(3){width: 60%; padding: 0 2%; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box; box-sizing: border-box; float: right;}
.boracay_top{background: #F1F1F1;}
.boracay_text{font-size: 18px;}
.boracay_text dl dt{width: 92%; float: left;}
.boracay_title dt{font-size: 45px; width: 89%;}
.colorbar02{ margin-bottom:8px;}
.colorbar02 li{ display:inline-block; width:calc(100%/3 - 13px); margin-bottom:6px; border-radius:1px;}
.colorbar02 li.color_at{width:calc(100%/3 - 19px);}

.colorbar02 li:nth-of-type(3){ margin-right:0;}
.colorbar02 li:nth-of-type(6){ margin-right:0;}

}
@media screen and (max-width :1199x) {

.hotel_type{ width:100%;}

}

@media screen and (max-width : 1024px) {

.new_hokkaido_group{ display:inline-block; width:calc(100%/2 - 14px); margin-right:20px; margin-bottom:20px; vertical-align:top;}
.new_hokkaido_group:nth-of-type(2){ margin-right:0;}
.new_hokkaido_group:nth-of-type(4){ margin-right:0;}
a.nhmore_icon{ width:100%; }
.linktit{ 
display: block; text-align: center; font-size: 20px; font-weight: bold; color: #fff; padding: 8px 0; background-color: #4474b4;  margin-bottom: 8px; width: 100%;
}



@media screen and (max-width : 980px) {
.ad_title{top:35%;}
.ad_title dt{font-size:40px;}
.ad_title dd{font-size:28px; margin:-10px 0 0 0;}
.ad_title dd.stitle{font-size:22px;}
.ad_title dd span{font-size:20px;}
.back2_btn{width:280px; height:65px; font-size:26px;}
.detail_title{font-size:27px;}

.news dl dd:nth-child(2){font-size:18px;}
.news dl dd{font-size:16px;}
.news_date{width:65px; height:65px; font-size:14px; line-height:18px; padding:5px 0 0 0; box-sizing:border-box;}
.news_date span{font-size:25px;}
.news_detail_title dt{width:80px; height:80px; font-size:16px; line-height:22px; padding:7px 0 0 0;}
.news_detail_title dt span{font-size:32px;}
.news_detail_title dd{font-size:24px;}


.food_type li:nth-child(1){font-size:16px;}
.food_type li{font-size:14px; padding:5px 10px;}
.food_list li{width:49%; /*height:380px;*/}
.food_list li:nth-child(2n){margin-right:0;}
.food_list li:nth-child(3n){margin-right:2%;}
.food_list li:nth-child(6n){margin-right:0;}
.food_list li .store p{font-size:16px; margin:0;}
.food_list li .store_mask a{bottom:40px;}
.food_list li .store_mask{height:38vw;}	
.food_list li .store_mask:target{cursor:auto;}
.food_list li .store_mask a:target{background:#b7ac86; color:#000;}
.food_list li .store:target .store_mask{background:rgba(0,0,0,0.6); position: absolute; bottom: 5%; left: 0; width: 100%; height: 90%; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s;}
.food_list li .store:target p{opacity: 1; visbility: visible; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s; transition-delay: .2s;}
.food_list li .store:target .store_mask a{opacity: 1; visbility: visible; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s;}

.food_info{height:32.5vw;}
.food_info dt{font-size:28px; width:80%;}
.yon{padding-bottom:3%;}
.yon dl{margin:0 0 3% 0;}
.yon ul li:nth-child(3){margin:0 0 0 10%;}
.yon ul li{margin:0;}
.yon ul li label{width:35%;}
.yon2 ul{margin:0 0 1%;}
.yon2 ul li{width:20%;}
.yon ul li:nth-child(3){margin:1% 0 0 10%;}


.leave_mesg li label{width:15%;}
.leave_mesg li textarea{width:82%; max-width:82%;}
.message ul, .leave_mesg li{font-size:15px;}
.message, .leave_mesg{width:90%;}
.board li:nth-child(1){width:60%;}
.board li:nth-child(2){width:40%;}

.view{height:20vw;}
.hotel_box dl dd ul li{padding:0 1px;}
.hotel_box dl{/*min-height:310px; */}
.hotel_box .view{ height: auto;}
.hotel_star{width:25px; height:25px;}
.hotel_type dl{width:192px;}
.hotel_type ul{width:73%;}
.hotel_box dl dd ul li, .hotel_icon{width:29px; height:29px;}
.hotel_items li, .items{width:65px; height:65px;}

.news_box dl{min-height:271px; height:34vw;}

.boracay_top dd:nth-child(2){width:50%;}
.boracay_top dd:nth-child(3){width: 50%; font-size: 16px;}
.boracay_title dt{width: 86%; font-size: 36px;}
.boracay_text dl dt{width: 90%;}
.boracay_text ul li{width: 30%;}
.error404{padding-top:55%; font-size:18px;}


/*2016首頁新增*/
.colorbar li{ font-size:18px; font-weight:normal; width:18%; border-radius:6px;}

}


@media screen and (max-width : 768px) {
#logo, #logo a, .smaller #logo a{width:200px; }
.smaller #logo{/*background:url(../images/logo_s.png) no-repeat;*/ }
.logo img{ width: 170px;}
.ad_title dt{font-size:30px;}
.ad_title dd{font-size:20px; margin:-10px 0 0 0;}
.ad_title dd.stitle{margin:-6% 0 2%;}
.ad_title dd span{font-size:16px;}
.detail_title{margin:6% 0;}

.news dl{width:49%; float:left;}
.news dl:nth-child(2n){margin-right:0;}
.news dl:nth-child(3n){margin-right:2%;}
.news dl:nth-child(6n){margin-right:0;}
.news dl dd:nth-child(3){font-size:14px;}
.news_date{width:78px; height:78px; left:40.5%; padding:6px 0 0 0; line-height:22px; box-sizing:border-box;}
.food_list li{ height:74px;}
.food_list li .store_mask a{bottom:15px;}
.food_list li .store p{font-size:15px; margin:-7px 0 0 0;}
.food_list li .store span{font-size:22px;}

.food_info{width:100%; padding:0; height:auto;}
.food_map{width:100%; margin:0 0 5% 0;}
#foodmap{padding:30px 0 50%;}
.yon{width:100%; padding:2%;}
.yon ul li{margin:0 5% 0; width:25%;}
.yon ul li label{width:59px; height:auto;}
.yon ul li:nth-child(3){margin:0.5% 0 0 10%;}
.food_info dd:nth-child(2), .food_info dd:nth-child(3), .food_info dd:nth-child(4), .food_info dd:nth-child(5){background-position:left 3px;}

.view{height:30vw;}
.hotel_box dl{/*min-height:355px; height:53.5vw;*/}
.hotel_box .view{ height: auto;}
.hotel_type{ display:block;}
.hotel_type dl{width:100%; border:0; margin:0 0  2% 0;}
.hotel_type dl dt{padding:0 2.5% 0 0;}
.hotel_type ul{width:100%;}
.hoteldetail_type{ display:block}
.hotel_box dl{width:48.5%; margin:0 2% 4% 0;}
.hotel_box dl:nth-child(2n){margin-right:0;}
.hotel_box dl:nth-child(3n){margin-right:2%;}
.hotel_box dl:nth-child(6n){margin-right:0;}
.hotel_box dl dd ul li, .hotel_icon{width:36px; height:36px;}
.hotel_items li, .items{width:60px; height:60px;}
.hotel_img ul li dl dt{font-size:18px; margin-bottom:1.5%;}
.hotel_img ul li dl, .hotel_img ul li:nth-child(5) dl, .hotel_img ul li:nth-child(4) dl{height:90px; padding:12px 0 0;}
.hotel_img ul li dl dd{font-size:13px;}
.hotel_img ul li dl dd img, .hotel_img ul li:nth-child(4) dl dd img{width:10px; height:13px;}
.hotel_img ul li dl dd span{padding:2px 8px;}
.hotel_img ul li dl dd img{margin:0 8px;}
.hotel_info{width:100%; padding:0;}
.hotel_img{margin-top:8%;}
#hotelmap{padding-bottom:35%;}

.news_box .view{ height:30vw;}
.news_box dl{min-height:238px; height:35vw;}

.sitemap_title{font-size:18px;}


.colorbar{ display:none;}

/*2017進階搜尋*/
a.mobil_search { display:block;font-size:30px; text-align:center; border-bottom:1px solid #c4c4c4; margin-bottom:10px; color:#11979A;background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );}
a:hover.mobil_search{background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #e9e9e9), color-stop(100%, #f9f9f9) );}



.hotel_type{ padding:0; border-radius:1px;}
.hotel_type dl dt{ margin-left:20px;}

.boracay_top dt p{font-size: 32px;}
.boracay_top dd:nth-child(2){display: none;}
.boracay_top dd:nth-child(3){width: 100%; padding: 0 0 3%; text-align:center; font-size:20px; line-height:30px;}
.boracay_title dt{width: 82%; font-size: 34px;}

/*2017*/
.ad{ display:none;}
.food_list li{ margin:0 0 5px 0;}
.food_list li .store_mask{ height:auto;}


.newspage{display:none;}


.boracay_top dt{ background:url(../images/mobil/mpic_21.jpg); padding:90px 0;}
.boracay_top dt p{ color:#fff; text-shadow:1px 1px 3px #000; margin-top:40px; padding:0 20px; width:calc(100% - 40px)}

.boracay_slogan{background:url(../images/mobil/mpic_22.jpg); padding:90px 20px; margin:0; color:#fff; text-shadow:1px 1px 3px #000; width:calc(100% - 40px)}



/*food*/
.food_type{border:none; border-radius:1px; padding:0; margin:0 0 4px 0;}

.food_type li{ display:inline-block; background:none; border-right:1px solid #fff; margin:0; border-bottom:1px solid #fff;  text-align:center; padding:10px ; width:calc(100%/4 - 21px); color:#fff; font-family:'微軟正黑體';}
/*.food_type li:first-child{ display:none;}*/
.food_type li a{ display:block; color:#fff; width:100%; height:100%; font-size:18px;}
.food_type li:hover {background:#fff; }
.food_type li:hover a{ color:#000; }
.food_type li.type_on:hover a{ color:#fff;}

.food_type02{border:none; border-radius:1px; padding:0; margin:0 0 4px 0;}
.food_type02 li{ display:inline-block; background:none; border-right:1px solid #fff; margin:0; border-bottom:1px solid #fff;  text-align:center; padding:10px ; width:calc(100%/4 - 21px); color:#fff; font-family:'微軟正黑體';}
/*.food_type02 li:first-child{ display:none;} 20180524*/
.food_type02 li a{ display:block; color:#fff; width:100%; height:100%; font-size:18px;}
.food_type02 li:hover {background:#fff; }
.food_type02 li:hover a{ color:#000; }
.food_type02 li.type_on:hover a{ color:#fff;}

.food_type03{border:none; border-radius:1px; padding:0; margin:0 0 4px 0;}
.food_type03 li{ display:inline-block; background:none; border-right:1px solid #fff; margin:0; border-bottom:1px solid #fff;  text-align:center; padding:10px ; width:calc(100%/4 - 21px); color:#fff; font-family:'微軟正黑體';}
/*.food_type03 li:first-child{ display:none;} 20180524*/
.food_type03 li a{ display:block; color:#fff; width:100%; height:100%; font-size:18px;}
.food_type03 li:hover {background:#fff; }
.food_type03 li:hover a{ color:#000; }
.food_type03 li.type_on:hover a{ color:#fff;}






/*圖片*/
.food_list li{ display:block; width:100%; border-bottom:1px solid #dcdcdc;}
.food_list li .store { width:100%;}
.food_list li .store img{ display:inline-block; width:80px; height:auto;}


.food_list li .store_mask{ left:80px; top:0px; width:calc(100% - 80px); }
.food_list li .store_mask span{ text-align:left; text-shadow:none; color:#000;}
.food_list li .store p{ display:none;}

.food_list li .store:before{ display:none;}
.food_list li .store:after{ display:none;}

.food_list li .store .store_mask{background:rgba(0,0,0,0);height:100%; width:calc(100% - 80px); top:0px; left:80px; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s; }
.food_list li .store_mask a:hover{background:#b7ac86; color:#fff;}
.food_list li .store:hover .store_mask{background:rgba(0,0,0,0.6); height:100%; width:calc(100% - 80px); top:0px; left:80px; transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; -ms-transition: .4s;}
.food_list li .store:hover .store_mask span{ color:#fff;}



}

@media screen and (max-width : 640px) {
.back2_btn{width:200px; height:50px; font-size:20px;}
.detail_title{font-size:22px;}
.ad_title{top:15%;}

.news dl dd:nth-child(3){font-size:14px;}
.news_date{width:65px; height:65px; font-size:14px; line-height:18px; padding:5px 0 0 0; box-sizing:border-box;}
.news_date span{font-size:25px;}
.news_detail_title dt{width:70px; height:65px; font-size:14px; line-height:18px;}
.news_detail_title dt span{font-size:22px;}
.news_detail_title dd{font-size:22px;}


/*.food_type{padding:2.5% 1.5% 0 8px;}
.food_type li{font-size:13px;}
.food_type li:nth-child(1){font-size:15px; padding-top:3px; margin-right:0;}*/

.food_info dd{margin:8px;}
.food_editimg dl dt{font-size:20px; line-height:22px;}
.board li:nth-child(1){width:50%;}
.board li:nth-child(2){width:50%;}

.yon ul li{margin:0 2% 0 0;}
.yon ul li label{width:30%;}
.yon ul li:nth-child(3){margin-top:-5px;}
.hotel_box dl dd ul li, .hotel_icon{width:28px; height:28px;}
.hotel_items li, .items{width:50px; height:50px;}
.hotel_items li{padding:0 3px;}
.hotel_img ul li dl, .hotel_img ul li:nth-child(5) dl, .hotel_img ul li:nth-child(4) dl{height:80px; padding:10px 0 0;}
.hotel_img ul li dl dd img{margin:0 5px; width:8px; height:10px;}

.boracay_top dt p{font-size: 28px;}
.boracay_top dt span{font-size: 50px;}
.boracay_top dd:nth-child(3){font-size: 15px;}
.boracay_title dt{width:80%; font-size:26px; padding:0 5px;}
.boracay_text{ padding-left:90px; width:calc(100% - 90px)}
.boracay_text dl dt{width:85%; font-size:16px;}
.boracay_text, .faq li.q{font-size:16px;}
.boracay_slogan{font-size:24px;}
.boracay_slogan dt span{font-size:38px;}
.boracay_slogan dd span{display:block;}
.boracay_title dd{font-size:30px; background-size:28px; background-position:right 0; width:40px;}
.boracay_title dd span{font-size:15px; margin:0 0 -10px;}
.boracay_text ul li{width:auto; margin:0 2% 0 0;}


.slogan_text{ padding-left:90px; width:calc(100% - 90px)}

.news_box dl{min-height:190px; height:37vw;}

.error404{background-size:120%; background-position:center 10px; padding:60% 5% 7%; line-height:30px;}
.error404 a{width:60px; height:28px; padding-top:32px; font-size:12px;}

.hotel_box dl{width:48%; /*min-height:325px; height:59vw;*/}
.hotel_box dl dd:nth-child(3){-webkit-line-clamp:3; height:auto; margin:0 0 2%;}

.hokkaido_month_tag{ margin-left:5px;}
.hokkaido_month_tag a{ display:inline-block; width:calc(100%/6 - 3px); margin-right:-3px;padding:6px 0; font-size:18px; text-align:center;  color:#fff; background: #BDD77A; border-bottom:1px solid #fff;}
}




@media screen and (max-width : 496px) {
#logo a{width:200px; height:40px;}
.ad_title dt{font-size:26px;}
.ad_title dd{font-size:18px; margin:-10px 0 0 0;}
.ad_title dd.stitle{font-size:18px;}
.ad_title dd span{font-size:14px;}
.detail_title{margin:10% 0;}
.detail_title2{font-size:30px; margin:0 0 8% 0;}
.detail_title2 span{font-size:17px;}

.news dl{width:100%; margin:0 0 5% 0;}
.news_date{width:78px; height:78px; left:40.5%; padding:6px 0 0 0; line-height:22px; box-sizing:border-box;}
.news_detail_edit1{display:none;}

.news_detail_edit1_2{display:block;}
.food_edit1{display:none;}
.food_edit2{display:block;}
.food_editimg dl dt{font-size:15px; height:95px;}
.yon ul li:nth-child(3){margin-top:0;}
.yon ul li:nth-child(3) input{padding:5px; width:60px; height:27px;}
.yon ul li:nth-child(3) p{width:60px; padding-top:3px;}
.yon ul li:nth-child(3) span{display:none;}
.food_editimg dl.editimg1{width:100%;}
.food_editimg dl.editimg2{width:45%;}
.food_editimg dl.editimg3{width:55%;}
.yon ul li{width:30%;}
.message_title{font-size:18px;}
.message, .leave_mesg{width:95%;}
.leave_mesg li label{width:24%;}
.leave_mesg li input[type=text]{width:70%;}
.leave_mesg li textarea{width:70%; max-width:70%;}
.leave_mesg li input.code{width:80px;}
.message li:nth-child(2), .message li:nth-child(1){width:100%; padding:0;}
.message li.remessage{padding:2%;}
.board li:nth-child(1){width:100%;}
.board li:nth-child(2){width:100%;}
.board li.reboard .reboard_day strong{width:100%; text-align:left;}

.view{height:62vw;}
.hotel_box .view{ height: auto;}
.hotel_box dl{width:100%; margin:0 0 5% 0; height:auto; min-height:200px;}
.hotel_box dl dd ul li, .hotel_icon{width:36px; height:36px;}
.hotel_img ul li dl dt{font-size:15px; margin-bottom:0;}
.hotel_img ul li dl dd{font-size:12px;}
.hotel_img ul li dl, .hotel_img ul li:nth-child(5) dl, .hotel_img ul li:nth-child(4) dl{height:60px; padding:2% 0 0;}
.hotel_items li, .items{width:40px; height:40px;}
.hotel_items li{padding:0;}
.hotel_img ul li{margin:0 0 3% 0;}
.hotel_img ul li:nth-child(1){width:100%;}
.hotel_img ul li:nth-child(2){width:100%;}
.hotel_img ul li:nth-child(3){width:100%;}
.hotel_img ul li:nth-child(4){width:100%;}
.hotel_img ul li:nth-child(5){width:100%;}
.hotel_edit1{display:none;}
.hotel_edit1_2{display:block;}

.news_box .view{height:63vw;}
.news_box dl{width:100%; margin:0 0 5% 0; height:auto; min-height:284px; height:74vw; }
.news_box2 dl{ width: 100%; margin: 0 0 5% 0;}

.boracay_top dt p{font-size:20px;}
.boracay_top dt span{font-size:30px;}
.boracay_title dd{background:none;}
.boracay_title dd, .boracay_text dl dd{width:auto;}
.boracay_title dt{font-size:20px; line-height:33px; min-height:45px;}
.boracay_pic dd, .boracay_pic dt{width:100%;}
.boracay_pic2 li:nth-child(1){width:49.5%; margin:0 1% 1% 0;}
.boracay_pic2 li:nth-child(2){width:49.5%; margin:0 0 1%;}
.boracay_pic2 li:nth-child(3), .boracay_pic3 dt, .boracay_pic3 dd{width:100%; margin:0;}
.boracay_slogan dt span{display:block; font-size:34px;}
.boracay_local_title img{width:100px; height:32px;}


.boracay_text{ padding:0 10px 0 70px; width:calc(100% - 80px)}
.slogan_text{ padding:0 10px 30px 70px; width:calc(100% - 80px); margin:15px 0 0 0;}



.sitemap_title{font-size:16px;}
.sitemap ul li{font-size:14px;}

.food_type li{ padding:10px ; width:calc(100%/3 - 21px);}
.food_type02 li{ padding:10px ; width:calc(100%/3 - 21px);}
.food_type03 li{ padding:10px ; width:calc(100%/3 - 21px);}

.food_list li .store p{margin:0; display:none;}

/*slogan*/
.boracay_top dd span{ font-size:18px; margin-bottom:2%;}
.colorbar02 li{ font-size:15px;}
.colorbar02 li.color_at{font-size:15px;}

}



@media screen and (max-width : 370px) {
.ad_title{top:5%;}
.ad_title dt{font-size:22px;}
.ad_title dd{font-size:16px; margin:-10px 0 0 0;}
.ad_title dd.stitle{font-size:15px;}
.ad_title dd span{font-size:13px;}
.news_detail_title dt{width:63px; height:56px; font-size:12px; line-height:15px;}
.news_detail_title dt span{font-size:17px;}
.news_detail_title dd{font-size:19px; line-height:22px;}
.back2_btn{width:160px; height:42px; font-size:16px;}


.food_type li{ padding:10px ; width:calc(100%/2 - 21px);}
.food_type02 li{ padding:10px ; width:calc(100%/2 - 21px);}
.food_type03 li{ padding:10px ; width:calc(100%/2 - 21px);}


.food_list li{width:100%; margin:0 0 5px 0;}

.food_list li .store_mask a{bottom:30px;}

/*.food_type li:nth-child(1){font-size:14px;}
.food_type li{font-size:12px; padding:3px 7px;}*/

.hotel_place_title{font-size:18px;}
.room_title{font-size:20px;}
#hotelmap{padding-bottom:47%;}

.news_box .view{height:65vw;}
.news_box dl{min-height:256px; height:79vw; }
.error404{font-size:15px; line-height:26px;}
}