body{ font-family:'微軟正黑體';}
.item_tit{ display:block; text-align:center; padding:13px 0; }
.item_tit b{display:block; font-size:34px; font-family: "FOT-筑紫明朝 Pr6N M", "游明朝", Yu Mincho, YuMincho, Hiragino Mincho ProN, "HGS明朝E", "メイリオ", Meiryo, serif;}
.item_tit p{ display:block; font-size:16px; color:#9f9f9f; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;}


.item_tit_01{ display:block; text-align:center; padding:13px 0; }
.item_tit_01 b{display:block; font-size:34px; font-family: "FOT-筑紫明朝 Pr6N M", "游明朝", Yu Mincho, YuMincho, Hiragino Mincho ProN, "HGS明朝E", "メイリオ", Meiryo, serif;}
.item_tit_01 p{ display:block; font-size:16px; color:#9f9f9f; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;}


img{ margin:0; padding:0;}

.clean{ clear:both;}

.hokkaido_people{ float:right; width: auto;color:#fff; vertical-align:top; padding-top:10px;}

/*go top*/
.cd-top {display: inline-block;height: 40px;width: 40px;position: fixed;bottom: 90px;right: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);/* image replacement properties */overflow: hidden;text-indent: 100%;white-space: nowrap;background:rgb(4, 164, 222) url(../images/cd-top-arrow.svg) no-repeat center 50%;visibility: hidden;opacity: 0;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {z-index:999999;-webkit-transition: opacity .3s 0s, visibility 0s 0s;-moz-transition: opacity .3s 0s, visibility 0s 0s;transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top.cd-is-visible {visibility: visible;opacity: 1;}
.cd-top.cd-fade-out {opacity: .5;}
.no-touch .cd-top:hover {background-color: #20A2FF;opacity: 1;}

/* header */
#change{ z-index:50000; width:100%; height: auto; }
header{display:block; width:100%; height:83px;top:0; z-index:999999; background:#fff;box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
header .head_box{ display:block;width:1400px; margin:0 auto; background:#fff; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
header .head_box ul{text-align:center;}
header .head_box ul li{display:inline-block; width:calc(100%/8 - 4px); text-align:center;}
header .head_box ul li:nth-of-type(4){ display:none;}
header .head_box ul li a{color:#8c8c8c; font-size:24px; text-align:center; line-height:83px; display:block;}
header .head_box ul  li a:hover{color:#fff; background:#58C294; transition:0.4s;}

/* header .head_box .hokkaido_logo{ width:249px; height:117px; padding:5px 15px; background:#fff url(../images/hokkaido/logo.png) no-repeat 50% 50%; margin:auto; position: absolute; left:0; right:0; top: -48px;
-webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -ms-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;} */

header .head_box .hokkaido_logo{ width:170px; height:75px; padding: 15px; background:#fff url(../images/vietnam/logo.svg?20251107) no-repeat 50% 50%; background-size: 90%; margin:auto; position: absolute; left:0; right:0; ;
	-webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -ms-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;}
header .head_box .hokkaido_logo a{width:219px; height:107px; -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -ms-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;  display:block; margin:auto;}
/*header .head_box .hokkaido_logo img{width:219px; height:auto; transition:all 0.5s ease-in-out;}*/

.bg_white{background:#fff; width:100%;}



.small_heigh header{ width:100%;height:83px;  background:#fff;}
/* .small_heigh header .head_box .hokkaido_logo{width:330px; height:66px; background-size:100%; box-shadow:none; background:url(../images/hokkaido/logo_s.png) left 50% no-repeat;  display:block; margin:auto; top: 10px; padding:0 15px;} */

.small_heigh header .head_box .hokkaido_logo{width:330px; height:66px;  box-shadow:none;  background:url(../images/vietnam/logo-m.svg?20251107) 50% 50% no-repeat;  
	background-size: 90%; display:block; margin:auto; top: 10px; padding:0 15px;}

.small_heigh header .head_box .hokkaido_logo a{width:330px; height:66px;}


.topnav{ display:block; background:url(../images/hokkaido/topnav_bg.png)50% top no-repeat;padding:7px 30px 0 30px;}
.topnav  h1{ display: block; font-size:15px; color:#fff; }
.topnav ul{ display: inline-block; width:400px;}
.topnav li{ display:inline-block;}
.topnav li a{ display:block; }
.topnav li a:hover{opacity:0.7;}






/*大圖輪播*/
		.slide{ width:100%; height: auto; overflow:hidden; position:relative; }
		.slide .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
		.slide .hd ul{ overflow:hidden; zoom:1; float:left;  }
		.slide .hd ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
		.slide .hd ul li.on{ background:#f00; color:#fff; }
		.slide .bd{ position:relative; height:100%; z-index:0; margin-bottom: -10px;   }
		.slide .bd li{ zoom:1; vertical-align:middle; width:100%;  }
		.slide .bd img{  width:100%; height: auto;  display:block;  } 



		/* 下面是前/后按钮代码，如果不需要删除即可 */
		.slide .prev,
		.slide .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../images/hokkaido/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
		.slide .next{ left:auto; right:3%; background-position:8px 5px; }
		.slide .prev:hover,
		.slide .next:hover{ filter:alpha(opacity=100);opacity:1;  }
		.slide .prevStop{ display:none;  }
		.slide .nextStop{ display:none;  }

/*春夏秋冬*/
.season{ display:block; background:#ffffff url(../images/hokkaido/season_bg.png) 50% top no-repeat; padding-top:60px;  }
.season ul{ display:block; width:1400px; margin:auto;padding-bottom:80px; }

.season li{ display:inline-block; margin-right:45px; width:calc(100%/4 -  38px); height:auto; border-radius:50em; overflow:hidden; text-align:center; position:relative;}
.season li:nth-of-type(4){ margin-right:0;}
.season li img{width:100%; height:auto; display:block; transition:all ease 0.8s;  border-radius:50em;}
.season li:hover img{-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.season li a{ position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/hokkaido/mask.png) 50% 50% no-repeat; border-radius:50em;  z-index:500;}
.season li:hover a{  position:absolute; left:0; top:0; width:100%; height:100%; transition:0.4s;  background:url(../images/hokkaido/mask_f2.png) 50% 50% no-repeat; order-radius:50em; }
.season li a b{ display:block; text-align:center; font-size:70px; color:#fff;padding-top:20%;}
.season li a p{ display:block; text-align:center; font-size:28px; color:#fff; padding:0;}

/*.season li .mask{ position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/hokkaido/mask.png) 50% 50% no-repeat; order-radius:50em; pointer-events: none; z-index:500;}
.season li:hover .mask{  position:absolute; left:0; top:0; width:100%; height:100%; transition:0.4s;  background:url(../images/hokkaido/mask_f2.png) 50% 50% no-repeat; order-radius:50em;  pointer-events: none;}
.season li .mask span{ display:block; text-align:center; vertical-align:middle; padding-top:20%;}
.season li .mask span b{ display:block; text-align:center; font-size:70px; color:#fff;}
.season li .mask span p{ display:block; text-align:center; font-size:28px; color:#fff; padding:0;}*/

/*祭典*/
.festival{ display: inline-block; width:calc(100%/2); margin-right:-4px;background:#444444; }

.festival_txt{ display:inline-block; width:calc(100%/2 - 64px); height: auto;  vertical-align:top; padding:50px 30px 20px 30px; background:#444444;}
.festival_txt b{ display:block; font-size:36px; color:#fff; text-align:center; margin-bottom:30px; font-weight:normal;}
.festival_txt p{ display:block; font-size:18px; color:#fff; line-height:28px; font-weight:normal; margin-bottom:40px; height:140px; overflow:hidden;}

a.festival_icon{ display:block; padding:5px 15px; font-size:22px; text-align:center; color:#fff; border:2px solid #fff; width:150px; border-radius:50em; margin:auto; }
a:hover.festival_icon{color:#444444; border:2px solid #fff; background:#ffffff; font-weight: bold; transition:0.4s;}

/*吃喝買*/
.zone{display: inline-block; width:calc(100%/2 - 2px); margin-right:-2px; vertical-align:top;}
.zone li{ display: inline-block; width:calc(100%/3 - 2px); margin-right:-4px; background:#ffffff; vertical-align:top; }
.zone li  .zone_pic{display:block; overflow:hidden; text-align:center; position:relative;}
.zone li  .zone_pic img{width:100%; height:auto; display:block; transition:all ease 0.8s;  }
.zone li:hover  .zone_pic img{-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.zone li  .zone_pic a{  width:100%; height:100%; position:absolute; left:0; top:0;  background:url(../images/hokkaido/mask_02.png) 50% 50% ;  pointer-events: none; z-index:500; cursor:pointer  }
.zone li .zone_pic a p{ display:block; text-align:center; width:150px; height:150px; line-height:150px; font-size:70px; color:#ffffff; margin:20% auto auto auto; border-radius:50em; border:2px solid #fff;}

.zone li:hover .zone_pic a {  position:absolute; left:0; top:0; width:100%; height:100%; transition:0.4s;  background:url(../images/hokkaido/mask_02.png) 50% 50% ;  pointer-events: none;}

.zone_txt{ display:block; padding:10px 0 ;}
.zone_txt a{ display:inline-block; padding:5px 10px; font-size:18px; color:#000000; background:url(../images/hokkaido/icon_03.png) right 50% no-repeat;}
.zone_txt a:hover{ color: #109FEF;}
/*.zone_pic .zone_mask{ position:absolute; left:0; top:0; width:100%; height:100%; background:url(../images/hokkaido/mask.png) 50% 50% no-repeat; order-radius:50em; pointer-events: none; z-index:500;}
.zone_pic:hover .zone_mask{  position:absolute; left:0; top:0; width:100%; height:100%; transition:0.4s;  background:url(../images/hokkaido/mask_f2.png) 50% 50% no-repeat; order-radius:50em;  pointer-events: none;}
.zone_pic .zone_mask p{ display:block; text-align:center; font-size:70px; color:#ffffff; margin-top:20%;}*/



/*地區*/
.hokkaido_content{ display:block; background:url(../images/hokkaido/pic_10.jpg) right bottom no-repeat;}

.area{ display:inline-block; width:calc(100%/2); margin-right:-4px; position:relative; }
.area img{ width:100%; height:auto; display:block; vertical-align:bottom; margin:0; padding:0;}

.area table{ display:inline-table; margin:auto; width: auto; position:absolute; z-index:300; left:27%; top:22%;}
.area td{ padding:20px;}
.area_item{display:block;width:178px; height:178px;background:url(../images/hokkaido/pic_25.png) 50% 50%  no-repeat;}

.area a b{ display:block;  font-size:50px; color:#fff; text-align:center; padding-top:30px; }
.area a p{ display:block;  font-size:28px; color:#fff;  text-align:center; }


.area a:hover b,.area a:hover p{ color: #F0670A; transition:0.4s;}

.area ul{ display:none; margin:auto; width: auto; text-align:center; background:url(../images/hokkaido/pic_09.jpg) left 50% no-repeat; background-size:140%; padding:55px 0;}
.area li{ display:inline-block; width:178px; height:178px; margin-right:30px; background:url(../images/hokkaido/pic_25.png) 50% 50%  no-repeat; }
.area li:last-child{ margin-right:0;}

.area li  a b{ display:block;  font-size:50px; color:#fff; text-align:center; padding-top:30px; }
.area li  a p{ display:block;  font-size:28px; color:#fff;  text-align:center; }

/*月份*/
.hokkaido_month{display: inline-block; position:relative; width:calc(100%/2 - 242px);  margin-right:-2px; vertical-align:top;  padding:70px 70px 70px 170px;}
.hokkaido_month li{ display:block; border:1px solid #fff;  margin-bottom:60px; position:relative; width:100%; }

.hokkaido_month li a{ display:inline-block;  text-align:center; width:calc(100%/4 - 60px); margin-right:-4px; border-right:1px solid #fff; padding:0 30px;  }
.hokkaido_month li a:nth-of-type(4){ border-right:none;}
.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:#fff;}
.hokkaido_month li a p{display:inline-block; font-size:30px; font-family:''; color:#fff; 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_content_02{ display:block; background:#fff url(../images/hokkaido/hookkaido_info_bg.png) 50% top  no-repeat; padding-top:100px; margin-top:-6px; padding-bottom:100px; }
.hokkaido_info{display:inline-block; width:calc(100%/2); margin-right:-4px; vertical-align:top;  }
.hokkaido_info i{ display:block; font-size:75px; margin:auto; text-align:center; color:#ffffff; font-weight:bold; font-style:normal; width:75px;}
.hokkaido_info ul{ display:block; width:70%; margin:auto;}
.hokkaido_info li{display:block; border-bottom:1px solid #8593a5; }
.hokkaido_info li a{ display:block; padding:40px 10px; font-size:21px; color:#353526;}
.hokkaido_info li:hover a{ background:rgba(0,0,0,0.4); color:#ffffff; transition:0.4s;}
.hokkaido_group{display:inline-block;  width:calc(100%/2 - 122px);  margin-right:-2px; padding:0 60px;}

.hokkaido_group_item{ display:inline-block;  width:calc(100%/2 - 24px); margin-right:40px;}
.hokkaido_group_item:nth-child(2n){ margin-right:0px;}
.hokkaido_group_item a{text-decoration:none;}
.hokkaido_group_pic{display:block; position:relative; overflow: hidden;}
.hokkaido_group_pic span.gtxt{ position:absolute; left:0; bottom:7px;   overflow: hidden;padding:10px; background:rgba(0,0,0,0.5); color:#fff; font-size:16px; line-height:26px; z-index:200; width:calc(100% - 40px);}
/*.hokkaido_group_pic:hover span.gtxt{ opacity:1; 
	    animation:TestMove 1s ; /*IE*/
    -moz-animation:TestMove 1s ; /*FireFox*/
    -webkit-animation:TestMove 1s ; /*Chrome, Safari*/ transition:0.4s;
}
@keyframes TestMove{
    from {bottom:7px;}
    to {bottom:7px;}
}
@-moz-keyframes TestMove{
    from {bottom:7px;}
    to {bottom:7px;}
}
@-webkit-keyframes TestMove{
    from {bottom:7px;}
    to {bottom:7px;}
}


.hokkaido_group_item a p{display:block; font-size:16px; color:#000; padding: 10px 0;}
.hokkaido_group_item a:hover p{  color:#9B3739}

/*Top5*/

.arrange{width:100%; background:#fff; padding: 0;}
.arrange_title{font-size:40px; color:#5f5f5f; text-align:center; margin-bottom:50px;}
.arrange_title span{font-size:20px; line-height:36px; display:block; margin:15px 0 0 0;}
.arrange dl{width:20%; color:#fff; float:left;}
.arrange dl dt{font-size:26px; height:94px; padding:0 5px 0 2%; box-sizing:border-box; display:flex; align-items:center; position:relative;}
.arrange dl dt .ara_top{font-size:65px; font-family: 'Poiret One', cursive; float:right; height:94px; padding:2px 0 0 0; box-sizing:border-box; position:absolute; right:10px; top:0;}
.arrange dl dt .ara_top span{font-size:18px; font-family:Verdana; display:block; margin:0 0 -20px 0;}
.arrange dl:nth-child(odd) dt{background:#747474;}
.arrange dl:nth-child(even) dt{background:#919191;}

figure.effect-zoe figcaption {top: auto;bottom: 0; background:rgba(0,0,0,0.5); -webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0);}
figure.effect-zoe p.description {position: absolute;/* text-align:justify;*/ color: #fff; padding:0.5em 0.8em 0; line-height:28px; text-transform: none;font-size:20px;opacity: 0;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;-webkit-backface-visibility: hidden; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 15;  -webkit-box-orient: vertical;}
figure.effect-zoe:hover p.description {opacity: 1;}

figure.effect-zoe:hover figcaption{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.grid {position: relative;}

.grid figure {position: relative; overflow: hidden; cursor: pointer; margin:0;}
.grid figure img {position: relative; display: block;}
.grid figure figcaption {color: #fff; text-transform: uppercase; font-size:20px; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.grid figure figcaption::before,
.grid figure figcaption::after { pointer-events: none;}
.grid figure figcaption,
.grid figure figcaption > a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing:border-box;}
.grid figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0;}
.grid figure p { letter-spacing: 1px; font-size: 68.5%;}

/*交通*/
.hokkaido_travel{ display:block; background:#fff url(../images/hokkaido/cloud.png) 35%  30px  no-repeat; padding:65px 120px; width:calc(100% - 240px);  }
		.slideBox{ width:100%; height: auto; overflow:hidden;}
		.slideBox .hd{ display:inline-block; width:calc(100%/2 - 124px); height: auto; padding-right:120px;  }
		.slideBox .hd ul{display:block; vertical-align:top;  margin:30px 0; }
		.slideBox .hd ul li{ display:inline-block; margin-right:40px; font-size:36px;color:#688fae;cursor:pointer; text-align:left; }
		.slideBox .hd ul li.on{ color:#000000; }
		.slideBox .hd b.travel_tit{ display:block; font-size:75px; color:#4e95ba; text-align:center; font-weight:normal; }
		.slideBox .hd p.travel_txt{ display:block; font-size:20px; color:#4e95ba; line-height:35px;}

		.slideBox .bd{ position:relative; height:100%; z-index:0;  display:inline-block; width:calc(100%/2 - 4px);  vertical-align:top;  }
		.slideBox .bd li{ zoom:1; vertical-align:middle; }
		.slideBox .bd li span{ display:inline-block; width:calc(100%/2 - 4px); margin-right:2px;}
		.slideBox .bd img{ width:100%; height: auto; display:block;  }

		/* 下面是前/后按钮代码，如果不需要删除即可 */
		.slideBox .prev,
		.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
		.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
		.slideBox .prev:hover,
		.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
		.slideBox .prevStop{ display:none;  }
		.slideBox .nextStop{ display:none;  }


/*行程推薦*/

.hokkaido_adver{ display:block; background:#fff url(../images/hokkaido/cloud_02.png) left 70px no-repeat; padding:20px 0;   }

.hokkaido_adver ul{ display:inline-block; width:calc(100% - 30% - 4px);}

/*
.hokkaido_adver li:nth-of-type(1){ width:calc(30% - 40px);  vertical-align:top;}
.hokkaido_adver li:nth-of-type(2){ width:calc(17.5% - 40px);}
.hokkaido_adver li:nth-of-type(3){ width:calc(17.5% - 40px);}
.hokkaido_adver li:nth-of-type(4){ width:calc(17.5% - 40px);}
.hokkaido_adver li:nth-of-type(5){ width:calc(17.5% - 40px);}*/


.hokkaido_adver li{ display:inline-block; margin-right:40px;  height:auto;  text-align:center; width:calc(100% /4 - 40px ); }
.hokkaido_adver li:nth-of-type(4){ margin-right:0;}
.hokkaido_adver li .mask { display:block; position:relative;}
.hokkaido_adver li .mask img{width:100%; height:290px; display:block; transition:all ease 0.8s;  border-radius:50em;}
.hokkaido_adver li:hover .mask img{-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.hokkaido_adver li .mask a{ position:absolute; left:0; top:0; width:100%; height:100%;  overflow:hidden; background:url(../images/hokkaido/mask.png) 50% 50% no-repeat; border-radius:99em;z-index:500;}
.hokkaido_adver li:hover .mask a{  position:absolute; left:0; top:0; width:100%; height:100%; transition:0.4s;  background:url(../images/hokkaido/mask_f2.png) 50% 50% no-repeat; order-radius:50em;  }
.hokkaido_adver li .mask a p{ display:block; text-align:center; font-size:21px; color:#fff;padding:30px; margin-top:20%;}

.hokkaido_adver  .adver_txt{display:inline-block;  background:url(../images/hokkaido/line.png)  100px  20px no-repeat; margin:auto;  vertical-align:top; width:calc(30% - 160px);   height:300px; position:relative; padding-left:160px; }
.hokkaido_adver  .adver_txt i.atit_01{ position:absolute; left:80px; top:0; font-style:normal; font-size:48px; line-height:60px; color:#4e95ba; width:48px; height:100px;  }
.hokkaido_adver  .adver_txt i.atit_02{ display:block; font-style:normal; font-size:36px; color:#4e95ba; padding-top:50px; padding-left:20px; }
.hokkaido_adver  .adver_txt i.atit_03{ display:block; font-style:normal; font-size:65px; color:#4e95ba;   }


/*北海道首頁表尾*/
.hokkaido_btm{ display:block; background:#edecec url(../images/hokkaido/btm_bg.jpg) left  top no-repeat; }
.hokkaido_btm span.hokkaido_link{ display:block; height:97px; width:auto; text-align:center; margin-bottom:50px;}
.hokkaido_btm span.hokkaido_link a{ display:inline-block; height:97px; line-height:97px; text-align:center; padding:0 40px; font-size:26px; font-weight:bold; color:#fff;}
.hokkaido_btm span.hokkaido_link a:hover{ color:#f7db90; transition:0.4s;}
.hokkaido_foot{ display:block; width:1400px; margin:auto;}
.hokkaido_foot h2{ display: inline-block; font-size:24px; color:#237ab6; font-weight:bold; margin-right: 30px;}
.hokkaido_foot span.logo_btm{ display:inline-block; margin-right:40px; width:200px;  height:auto; vertical-align:top; padding-top:30px;}
.hokkaido_foot span.logo_btm img{ display:block; width:100%; height:auto;}
.hokkaido_foot p.btm_txt{display:inline-block; font-size:17px; line-height:30px; color:#6f777c;word-break: normal;}

.hokkaido_foot span.link_btm{ float:right; vertical-align:bottom;}
.hokkaido_foot a{display:inline-block; width:68px; height:68px; }

.hokkaido_foot  p.btm_copyright{ display:block; border-top:1px solid #aeafb0; font-size:18px; text-align:right; color:#667986; margin-top:30px; padding:20px 0 35px 0;}



/*go top*/
.cd-top {display: inline-block;height: 40px;width: 40px;position: fixed;bottom: 90px;right: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);/* image replacement properties */overflow: hidden;text-indent: 100%;white-space: nowrap;background:rgb(4, 164, 222) url(../images/cd-top-arrow.svg) no-repeat center 50%;visibility: hidden;opacity: 0;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {z-index:999999;-webkit-transition: opacity .3s 0s, visibility 0s 0s;-moz-transition: opacity .3s 0s, visibility 0s 0s;transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top.cd-is-visible {visibility: visible;opacity: 1;}
.cd-top.cd-fade-out {opacity: .5;}
.no-touch .cd-top:hover {background-color: #20A2FF;opacity: 1;}



/*2016新增Line*/
.apply_icon{ position: fixed; right:20px; top:170px; width:123px; z-index:600;}
.apply_icon li{ display:block; width:123px; height:123px; margin-bottom:30px; list-style:none;}
.apply_icon .mobil{ display:none;}
.apply_icon a.mobil_all{ display:none; }

/*2017手機版*/
.apply_icon a.line{ display:none;}
.apply_icon a.mpackage{ display:none;}
.apply_icon a.mhome{ display:none;}
.slogen{ display:none;}





/*貼心包*/
.mbag{ display:none;}

#scrollUp{display: none; text-decoration: none; position: fixed; bottom: 0px; right: 10px; overflow: hidden; width: 63px; height:31px; border: none; text-indent: 100%; background: url(../images/gotop.png) no-repeat right top;}
#scrollUp:hover{opacity: .8;}





@media only screen and (max-width:1400px)
{
header .head_box{ display:block;width:100%; }

/*春夏秋冬*/
.season{ display:block; width:calc(100% - 40px); padding:40px 20px 0 20px;}
.season ul{ display:block; width:100%; margin:auto;padding-bottom:80px; }


/*Top5*/
.arrange dl dt .ara_top{font-size:40px; padding:10px 0 0 0;}
.arrange dl dt .ara_top span{margin:0 0 -10px 0; font-size:16px;}
.recommend dl dd{font-size:18px;}
.food_rslides li dl dt, .attractions_rslides li dl dt, .activities_rslides li dl dt{font-size:36px;}
.food_rslides li dl dt span, .attractions_rslides li dl dt span, .activities_rslides li dl dt span{font-size:50px;}
figure.effect-zoe p.description{font-size:18px; line-height:26px;}
.arrange dl dt{padding-top:15px; height:75px;}
.arrange dl dt .ara_top{width:95%; right:5%; text-align:right; padding-top:2px; font-size:22px;}
.arrange dl dt .ara_top span{width:35px; float:left; margin-top:6px;}


/*地區*/
.hokkaido_content{ display:block; background-size:100%;}
.area{ display:block; width:100%; margin-right:0;  }
.area table{ display:none;}
.area img{ display:none;}

.area ul{ display:block; margin:auto; width: auto;}
.hokkaido_month{display: block; position:relative; width:calc(100% - 242px);  margin-right:0; padding:70px 70px 70px 170px;}

/*行程推薦*/
.hokkaido_adver  .adver_txt{display:block;  background:none; margin:auto auto 50px auto;  vertical-align:top; text-align:center; width: auto;   height: auto; position:relative; padding-left:0; }
.hokkaido_adver  .adver_txt i.atit_01{ position: inherit; left: inherit; top: inherit; font-style:normal; font-size:65px; line-height:65px;width: auto; height: auto; display:inline-block;}
.hokkaido_adver  .adver_txt i.atit_02{ display:none;}
.hokkaido_adver  .adver_txt i.atit_03{ display:inline-block;margin:auto; text-align:center;  font-size:65px;   }

.hokkaido_adver ul{ display:block; margin:auto; width:95%; padding-bottom:50px;}
.hokkaido_adver li{ display:inline-block; margin-right:20px;  height:auto;  text-align:center; width:calc(100% /4 - 20px ); }
.hokkaido_adver li:nth-of-type(4){ margin-right:0;}


.hokkaido_adver li .mask a{ position:absolute; left:0; top:0; width:100%; height:100%;  overflow:hidden; background:url(../images/hokkaido/mask.png) 50% 50% no-repeat; border-radius:50em;z-index:500;}
.hokkaido_adver li .mask a p{ display:block; text-align:center;font-size:21px; color:#fff;padding:30px; margin-top:15%; vertical-align:middle;}

/*表尾*/
.hokkaido_foot{ width:calc(100% - 40px);padding:0 20px;}
}

@media only screen and (max-width:1380px)
{
header .head_box ul li{display:inline-block; width:calc(100%/9 - 4px); text-align:center; vertical-align:top;}
header .head_box ul li:nth-of-type(4){ display: inline-block;}
}

@media only screen and (max-width:1150px)
{
#change{ height:0;}
header .head_box ul{ display:none;}
header .head_box .hokkaido_logo{ width:330px; height:60px; padding:0px 15px; background:#fff url(../images/vietnam/logo-m.svg?20251107) no-repeat 50% 50%; background-size: 90%; margin: inherit; position: absolute; left:0; right: inherit; top: 2px;
}
header{ position:fixed; top:0; height:66px;}
.small_heigh header{height:66px;}
.small_heigh header .head_box .hokkaido_logo{ top:2px;}


.hokkaido_btm span.hokkaido_link a{ display:inline-block; height: auto; line-height: 97px; text-align:center; padding:0; width:calc(100%/6 - 2px); font-size:20px; font-weight:bold; color:#fff;} 
.topnav{ display:none;}
.slide{ display:block; margin-top:66px;}
}

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

.season li{ margin-right:20px; width:calc(100%/4 - 25px);}
.festival{ display:block; margin:0; width:100%; vertical-align:top;}
.zone{ display:block; margin:0; width:100%;}
.zone li{margin:-2px; width:calc(100%/3 );}

.item_tit_01{ display:none;}
.season{ display:block; width:calc(100% - 40px); padding:40px 20px;}

.area{ display:block; margin:0;width:100%; }
.hokkaido_month{display: block; position:relative;margin:0;width:100%; vertical-align:top;  padding:40px 0px;}
.hokkaido_month { width:90%; margin:auto; text-align:center;}

.hokkaido_month_tit{ display:block; position: inherit; left:inherit; top: inherit; z-index:100; margin:auto; }
.hokkaido_month_tit b{ display: inline-block; font-size:36px; width: auto; color:#fff; vertical-align:top;}
.hokkaido_month_tit em{ display: inline-block; font-size:36px; width: auto; color:#fff; }
.hokkaido_month_tit em:before{ content:'/'; }

.hokkaido_content{ display:block; background:url(../images/hokkaido/pic_10.jpg) left bottom no-repeat; margin-top:0px;background-size:130%; }
.hokkaido_content_02{ display:block; width:calc(100% - 40px); padding:60px 20px 0 20px; }


.hokkaido_info{ display:block; margin:0;width:100%;}
.hokkaido_info i{width: auto; font-size:60px;}
.hokkaido_info i:after{content:'行';}
.hokkaido_info ul{ width:95%;}
.hokkaido_info li a{ padding:15px 10px; color:#fff;}

.hokkaido_group{ display:block; margin:0;width:100%;padding:100px 0 0 0;}

.hokkaido_adver li .mask a p{ font-size:18px; color:#fff;padding:30px; margin-top:0;}



/*春夏秋冬*/
.season li a b{ display:block; text-align:center; font-size:50px; color:#fff;padding-top:20%;}
.season li a p{ display:block; text-align:center; font-size:20px; color:#fff; padding:0;}
.season ul{padding-bottom:0px; }

/*交通*/
.hokkaido_travel{ display:block; background:url(../images/hokkaido/cloud.png) 35%  30px  no-repeat; padding:65px 30px; width:calc(100% - 60px);  }
		.slideBox .hd{ display:block; width: 100%;   height: auto; padding-right:0; margin-bottom:50px;  }

		.slideBox .bd{ position:relative; height:100%; z-index:0;  display:block; width:100%;  vertical-align:top;  }




/*Top5*/
.arrange dl dt{font-size:24px; padding-top:0;}
.arrange dl{width:50%;}
.grid figure img{width:40%;}
.grid figure figcaption, .grid figure figcaption > a{width:60%; left:40%; }
.arrange dl:nth-child(even) .grid figure{background:#747474;}
.arrange dl:nth-child(odd) .grid figure{background:#919191;}
figure.effect-zoe:hover figcaption{transform:none;}
figure.effect-zoe p.description{font-size:0.8em; line-height:23px; padding:0.5em 1.2em 0; opacity:1; -webkit-line-clamp:10;}
figure.effect-zoe figcaption{transform:none;}
.grid figure{cursor:default;}
.arrange dl:nth-last-child(2){width:100%;}
.arrange dl dt .ara_top	{width:auto; font-size:40px; text-align:left; right:0; height:75px; padding:0;}
.arrange dl dt .ara_top span{width:100%;}
.arrange_title{font-size:34px;}
.arrange_title span{font-size:18px; line-height:30px;}


/*表尾*/
.hokkaido_foot span.logo_btm{ display:none;}
.hokkaido_foot span.link_btm{ display:block; margin-top:10px;  float:inherit;}




/*2016新增Line*/
.apply_icon{ position: fixed; right:0px; top:inherit; bottom:0; width:100%; z-index:999;}
.apply_icon li{ display:none; margin:0;}
.apply_icon a.mobil{ display: inline-block; text-align:center; height:49px; padding:4px 0 2px 0;width:calc(100%/4  ); margin-right:-6px; color:#fff; font-size:27px;text-decoration:none; vertical-align:top;  }
.apply_icon a.mobil img{ display:block; margin:auto; text-align:center;}
.apply_icon a.mobil:hover{-webkit-filter:grayscale(1); filter:grayscale(1); }
.apply_icon a.mobil p.mword{ display:block; font-size:15px; color:#fff;}

	
.apply_icon a.mobil_all{ display:block; padding:4px 0 2px 40px;width:100%;  color:#fff; font-size:27px;text-decoration:none; vertical-align:top;  }
.apply_icon a.mobil_all img{ margin-right:15px;}
.apply_icon a.mobil_all:hover{-webkit-filter:grayscale(1); filter:grayscale(1); }
.ft_info .mobileBlock{
	display:block;}

.apply_icon a.line{ display:inline-block; width:calc(100%/3 ); margin-right:-6px; background:#3ccf36; border-right:1px solid #fff; padding:4px 0 0px 0; vertical-align:top; height:49px;}
.apply_icon a.line img{ display:block; margin:auto; text-align:center;}
.apply_icon a.line p{ display:block; font-size:15px; color:#fff; text-align:center;}
.apply_icon a.mpackage{ display:inline-block; width:calc(100%/3 ); margin-right:-5px;  background:#e97155; border-right:1px solid #fff; padding:4px 0 0px 0; vertical-align:top; height:49px;}
.apply_icon a.mpackage img{ display:block; margin:auto; text-align:center;}
.apply_icon a.mpackage p { display:block; font-size:15px; color:#fff; text-align:center;}

.apply_icon a.mhome{ display:inline-block; width:calc(100%/3); margin-right:-6px; background:#e97155; border-right:1px solid #fff;  padding:4px 0 0px 0; vertical-align:top; text-align:center; height:49px;}
.apply_icon a.mhome img{ margin:auto; text-align:center;}
.apply_icon a.mhome p { display:block; font-size:15px; color:#fff; text-align:center;}


.apply_icon a:hover.line,.apply_icon a:hover.mpackage,.apply_icon a:hover.mhome{filter:grayscale(60%); transition:0.4s; }


/*貼心包*/
.mbag{ position: fixed; right:0; bottom:50px; z-index:10000; display:none;}	
.mbag li{ display:inline-block; background:#eeeeee; width:calc(100%/3 - 35px); height:auto; margin-right:-6px; padding:18px; text-align:center; vertical-align:top;}
.mbag li:hover,.mbag li:hover:nth-child(2),.mbag li:hover:nth-child(4),.mbag li:hover:nth-child(6){ background:#cbcbcb;}
.mbag li:nth-child(2){ background:#e7e7e7;}
.mbag li:nth-child(4){ background:#e7e7e7;}
.mbag li:nth-child(6){ background:#e7e7e7;}
.mbag li p.mptxt{ display:block; text-align:center; color:#e97155; font-size:22px;}
.mbag li span.mp_icon{ display:block; background:#fff; padding:15px; margin:10px auto; width:65px; height:65px;  border-radius:100px;}
.mbag li span.mp_icon img{ display:block; margin:10px auto auto auto; width:auto; height:auto; vertical-align:middle;}	










}
@media only screen and (max-width:900px)
{
.arrange dl{width:100%;}

.area li{ display:inline-block; width:110px; height:110px; margin-right:20px; border-radius:50em;  }
.area li a b{ font-size:35px; padding-top:12px;}
.area li a p{ font-size:22px; }

}
@media only screen and (max-width:768px)
{
.festival_txt{ display:inline-block; width:calc(100% - 64px);  vertical-align:top; padding:30px 30px 20px 30px; background:#444444;}
.festival_txt b{  font-size:28px;}

.hokkaido_month li a i{  font-size:40px; }

.hokkaido_adver ul{ padding-bottom:0; width:85%;}
.hokkaido_adver li{ width:calc(100%/2  - 20px); margin-right:20px; margin-bottom:40px;}
.hokkaido_adver li:nth-child(2n){ margin-right:0;}
.hokkaido_adver li .mask a p{ margin-top:15%;}

.hokkaido_travel{ padding:0px 30px; }

.slideBox .hd b.travel_tit{ font-size:44px; font-weight:bold;}

.hokkaido_adver .adver_txt i.atit_01,.hokkaido_adver .adver_txt i.atit_03{ font-size:44px; font-weight:bold;}

.slideBox .hd ul{ margin:0;}
.slideBox .hd ul li{ text-align:left; font-size:25px; font-weight:bold; margin-right:20px;}


.hokkaido_content_02{ margin-bottom:0px;}
}

@media only screen and (max-width:640px)
{
	
header .head_box .hokkaido_logo{ width:330px; height:66px; background:url(../images/vietnam/logo-m.svg?20251107) left 50% no-repeat; top: 0;}
.arrange dl dt{height:50px; font-size:22px;}
.arrange dl dt .ara_top span{margin-top:0; font-size:12px; letter-spacing:1px;}
.arrange dl dt .ara_top{height:50px; font-size:30px; letter-spacing:2px;}

.hokkaido_content{ background-size:160%;}
.hokkaido_month li{ margin-bottom:35px;} 
.hokkaido_month li a i{  font-size:30px; }
.hokkaido_month li a p{ font-size:20px; font-weight:bold; }
.hokkaido_month li a{  width:calc(100%/4 - 20px); margin-right:-4px;padding:0 10px;  }

/*春夏秋冬*/
.season li a b{ display:block; text-align:center; font-size:34px; line-height:34px; color:#fff;padding-top:20%;}
.season li a p{ display:block; text-align:center; font-size:18px; color:#fff; padding:0;}

.zone li{ display:block; margin:0 0 -6px 0; width:100%; padding:0;}
.zone li  .zone_pic{display:inline-block; width:calc(100%/2 - 2px);}
.zone_txt{ display:inline-block; width:calc(100%/2 - 2px); vertical-align:top;}
.zone_txt a{ margin-right:10px;}


/*地區*/
.area ul{ padding:0 0 50px 0;}
.area li{ display:inline-block; margin:50px 40px 0  40px; width:135px; height:135px;  }
.area li:last-child{ margin-right:35px;}
.area li a b{ font-size:35px; padding-top:12px;}
.area li a p{ font-size:22px; }


.hokkaido_adver ul{ padding-bottom:0; width:85%;}
.hokkaido_adver li{ width:calc(100%/2  - 20px); margin-right:20px; margin-bottom:40px;}
.hokkaido_adver li:nth-child(2n){ margin-right:0;}
.hokkaido_adver li .mask a p{ font-size:15px; color:#fff;padding:30px; margin-top:8%;}


/*表尾*/
.hokkaido_btm span.hokkaido_link a{padding:10px 0 0 0; width:calc(100%/3 - 2px); line-height:inherit; }

}

@media only screen and (max-width:480px)
{
.season li{ margin-right:12px; width:calc(100%/4 - 15px);}
.season li a p{ display:none;}
header .head_box .hokkaido_logo{ width:200px; height:40px; background:url(../images/vietnam/logo-m.svg?20251107) left 50% no-repeat; top:10px; background-size: contain;}
.small_heigh header .head_box .hokkaido_logo{ width:200px; height:40px; background:url(../images/vietnam/logo-m.svg?20251107) left 50% no-repeat; top:10px; background-size: contain;}

.zone li  .zone_pic{display:block; width:100%;}
.zone_txt{ display:block; width:100%; vertical-align:top;}

/*地區*/

.area li{ margin:50px 15px 0  15px;  }
.area li:last-child{ margin-right:15px;}
}