@charset "utf-8";
/* CSS Document */
@import url(../css/reset.css);  
@import url(https://fonts.googleapis.com/css?family=Quicksand);
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
@import url(https://fonts.googleapis.com/css?family=Quattrocento);
@import url(https://fonts.googleapis.com/css?family=Gravitas+One);
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
@import url(https://fonts.googleapis.com/css?family=Cantora+One);

a, *:hover, *:active{-webkit-transition: background 500ms ease, height 500ms ease, color 500ms ease; -moz-transition: background 500ms ease, height 500ms ease, color 500ms ease; -ms-transition: background 500ms ease, height 500ms ease, color 500ms ease; -o-transition: background 500ms ease, height 500ms ease, color 500ms ease; transition: background 500ms ease, height 500ms ease, color 500ms ease; }

body{font-family:Verdana, Geneva, "微軟正黑體";}
.clean{clear:both;}

.container{width:100%;}
.container img{width:100%; height:auto;}
.content{width:1200px; margin:0 auto; overflow:hidden;}

.breadcrumb{width:100%; background:#97c7d7; padding:8px 0; margin:0 0 30px 0;}
.breadcrumb ul{width:1200px; margin:0 auto;}
.breadcrumb ul li{color:#fff; display:inline; font-size:13px; padding:0 15px 0 0; margin:0 5px 0 0; background:url(../images/bread.png) no-repeat right 5px;}
.breadcrumb ul li:last-child{background:none;}
.breadcrumb ul li a{color:#fff;}
.breadcrumb ul li a:hover{color:#00678A;}

/*2016新增Line*/
.apply_icon{ position: fixed; right:20px; top:100px; width:123px; z-index:150;}
.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;}


.header{width:100%; height:66px; position:fixed; background:rgba(255, 255, 255, 0.6); z-index:9999999999;}
#logo{width:329px; /*height:177px;*/ margin:0 auto; box-shadow:0 -75px 20px 1px #8b8b8b; /*background:url(../images/logo.png) no-repeat;*/
	-webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -ms-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;}
#logo a{display:block; width:329px; height:177px;-webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -ms-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;}
.smaller #logo{width:330px; height:auto; box-shadow:none;/* background:url(../images/logo_s.png) no-repeat;*/}
.smaller #logo a{width:330px; /*height:66px;*/}
.topnav{width:355px; margin:1% 10px 0 0; position:absolute; left:260px; top:9px;}
.topnav li{display:inline; margin:0 -3px;}
.topnav li a:hover{opacity:0.7;}

.header .website_btn{position:absolute; left:70px; top:12px; border-radius:5px; padding:10px; background:#00a7cb; color:#fff; font-size:15px;}
.header .website_btn a{color:#fff;}
.header .website_btn:hover{border:#00a7cb 2px solid; padding:8px; background: rgba(255,255,255,0.5);}
.header .website_btn:hover a{color:#00a7cb;}
.header .slogan{position:absolute;left:20px; top:1px; padding:6px 0px; font-size:15px;color:#6d6d6d;}
/*menu*/
header{width:124px; height:60px; position:absolute; z-index:100; right:-40px; transform: translateX(-50%); overflow:hidden;backface-visibility: hidden;transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1); }
header.shownav{ width:320px;height:300vw;  z-index:99999;}
nav{width:124px;height: 50px;}
.dc-menu-trigger {position: absolute;top:10px; right:0px; display: block; width:124px; height: 50px; cursor: pointer;z-index: 30;}
.dc-menu-trigger span {position: absolute;top:0;display: block;width:102px; padding-left:22px;text-align:center; border-radius:4px; height:40px; line-height:40px; background: #000 url(../images/mobil/icon_17.png) 20px 50% no-repeat;  }
.dc-menu-trigger span font{color:#fff; font-size: 20px;  }
.dc-menu-open .dc-menu-trigger span {box-shadow:none; }
.dc-menu-open .dc-menu-trigger {left:80%;}
.dc-menu-trigger span:before,
.dc-menu-trigger span:after {position: absolute;left: 0;width: 28px; top:25px; background-color: transparent; height:3px; content: ''; transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);}


/*.dc-menu-trigger span:before {transform: translateY(-250%);}
.dc-menu-trigger span:after {transform: translateY(250%);}*/
.dc-menu-open .dc-menu-trigger span{ background-color:transparent; background-image:none; }
.dc-menu-open .dc-menu-trigger span font{ display:none;}
.dc-menu-open .dc-menu-trigger span:before {transform: translateY(0) rotate(45deg); background:#B9B9B9; box-shadow:none;}
.dc-menu-open .dc-menu-trigger span:after {transform: translateY(0) rotate(-45deg); background:#B9B9B9; box-shadow:none;}
.dc-menu-close .dc-menu-trigger:before {animation: plusVertical 0.3s ease forwards;}
.dc-menu-close .dc-menu-trigger:after {animation: plusHorizontal 0.3s ease forwards;}
.menu-overlay {z-index: 10;position: absolute;top: 0px;width: 100%;height: 100%;background: none;}
.menu-overlay.open {background:#54A290;height: 100%;}
.menu-overlay ul {position: absolute;visibility: hidden; list-style-type:none;top: -40%;left: 0;width: 100%;padding: 0;opacity: 0;display: table-cell;vertical-align: middle;}
.menu-overlay ul li{text-align:left; /*font-size:1rem;*/ font-size:16px; /*font-weight:100;*/ text-transform:uppercase; letter-spacing:5px; color:#fff; padding:10px 0 0 50px;}
.menu-overlay ul li:hover{background:#0085A6; color:#fff;}
.menu-overlay ul li:hover a{color:#fff;}
.menu-overlay ul li a{color:#ffffff;display:block;}
.menu-overlay ul li:after {content:""; display:block; width:250px; height:1px; background:#D7D7D7; margin:15px 0 0 -20px;}
.menu-overlay ul li:hover {color:#eee; cursor:pointer;}
.menu-overlay ul li:hover:after{background:none;}
.menu-overlay.open ul {top:15px;left:0;visibility: visible;opacity: 1;margin-top: 0;}
/*menu end*/



.footer{width:100%; color:#000; font-size:14px; background:#cfccf1;}
.footer_box{width:1200px; margin:0 auto; padding:2% 3%; box-sizing:border-box;}
.ft_logo{width:230px; height:112px; float:left;}
.submenu{float:right; margin:0 11.9% 15px 0;}
.submenu li{display:inline; color:#000; padding:0 4px 0 2px; border-right:1px solid #000;}
.submenu li:last-child{border:0; padding-left:0;}
.submenu li a{color:#000;}
.ft_info {width:670px; line-height:26px; float:right; margin:0 7% 0 0;}
.ft_info dd{float:left; padding:0 5.7% 0 0;}
.ft_info dd.design{float:right;}
.footer a{color:#3B3B3B;}
.footer a:hover{color:#00627B;}
.ft_info .mobileBlock{
	display:none;}
	
	
/*2018北海道首頁表尾*/
.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:#0B2455; transition:0.4s;}
.hokkaido_foot{ display:block; width:1400px; margin:auto;}
.hokkaido_foot h2{ display:block; font-size:24px; color:#237ab6; font-weight:bold;}
.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: keep-all;*/}
.hokkaido_foot ul.btm_txt li{ float:left;font-size:17px; line-height:30px; color:#6f777c; padding-right:2%;}

.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;}

.box_svg{display:none; background:url(../images/icon.svg) no-repeat;}


.custombg{width:100%; height:100%; background:rgba(0,0,0,.7); padding:175px 0 0; opacity:0;	position:fixed; overflow:hidden; transition: 0.5s ease-in-out; z-index:-2;}
.custombg.lightbox-show{top:0; bottom: 0; opacity:1; z-index:100;}
.custom_overbox{width:100%;}
.custombg:target{top:0; bottom: 0; opacity:1;/* z-index:100;*/ z-index:9999999999;}	
.custombox{border:3px solid #548faf; margin:0 auto; width:80%; height:30vw; overflow-y:auto; background:#F4F7FA; padding:1.5%;}
.custom_lightbox-close {width:50px;	height:50px; font-size:28px; position:absolute;	top: 7vw;right: 8%;	}
/* 利用偽元素做出 \ 以及 / 的線條 */
.custom_lightbox-close:after {width:30px;	height:1px; content: ""; display:block;	background:#fff; position:absolute;	top: 23px; left: 10px;	transform: rotate(45deg);}
.custom_lightbox-close:before {width:30px;	height:1px; content: ""; display:block;	background:#fff; position:absolute; top: 23px; left: 10px; transform: rotate(-45deg);}




#logo, #logo a{width:260px; /*height:140px;*/ background-size:100%;}
header.shownav{width:200px; right:-100px;}
.menu-overlay ul li:after{width:170px; margin:10px 0 0 -10px;}
.menu-overlay ul li{padding:10px 0 0 20px; letter-spacing:3px; font-size:15px;}
.dc-menu-open .dc-menu-trigger{left:80%;}

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

.topnav{top:53px; left:20px; }
.hokkaido_foot{ display:block; width:calc(100% - 40px); padding:0 20px; margin:auto;}
}
@media screen and (max-width : 1216px) {

.submenu{margin:0 5px 15px 0;}
.ft_info{margin:0;}
.cd-nav-container{width:240px;}
.header .slogan .day_number{ display:none;}


.hokkaido_btm span.hokkaido_link a{ display:inline-block; height:97px; line-height:97px; text-align:center; padding:0 20px; font-size:20px; font-weight:bold; color:#fff;}
}

@media screen and (max-width : 1199px) {
	.breadcrumb ul{width:100%; padding:0 1%; box-sizing:border-box;}
.content{width:100%;}
.footer_box{width:100%;}

	}
@media screen and (max-width : 1039px) {
#logo, #logo a{width:200px; height:108px;}

}

@media screen and (max-width : 980px) {
.ft_logo{margin:0; width:20%; height:9vw;}
.ft_logo img{width:100%;}
.ft_info{width:100%; margin:2% 0 0 0;}
.submenu{margin:3% 0 0 0; width:80%; padding:0 0 0 1%; box-sizing:border-box;}
.ft_info dd.design{padding:0;}
.topnav{ display:none;}
.header .slogan{ display:none;}



/*2016新增Line*/
.apply_icon{ position: fixed; right:0px; top:inherit; bottom:0; width:100%;}
.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.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:100; 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 screen and (max-width : 768px) {
.header{height:40px; background:#fff; border-bottom:1px solid #EBEBEB;}
.container{padding:40px 0 0 0;}
#logo, #logo a{width:130px; height:70px;}
.smaller #logo a{width:130px; height:70px;}
.topnav{/*top:0; margin:0 2px 0 0; width:185px; */ display:none;}
.dc-menu-trigger{top:-5px;}
.smaller #logo{width:200px; height:40px; background-size:100%;}
.header .website_btn{padding:7px; font-size:13px; top:4px;}
.header .website_btn:hover{padding:5px;}
.footer_box{ width:100%;}
.content{ width:100%;}

.hokkaido_btm span.hokkaido_link a{ display:inline-block; height:45px; line-height:45px; text-align:center; padding:0 20px; font-size:18px; font-weight:bold; color:#fff;}


/*menu*/
header{ height:40px; right:-40px; width:90px;}

nav{width:90px;height: 40px;}
.dc-menu-trigger {position: absolute;top:0px; right:0px; display: block; width:90px; height: 40px; cursor: pointer;z-index: 30;}

.dc-menu-trigger span {position: absolute;top:0;display: block;width:68px; padding-left:22px;text-align:center; border-radius:4px; height:40px; line-height:40px; background:#0085a6 url(../images/mobil/icon_17.png) 10px 50% no-repeat;  }
.dc-menu-trigger span font{color:#fff; font-size: 18px;  }




/*2017*/
.breadcrumb{ margin-bottom:5px; display:none; }
.mbag{ display:none;}
}


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

.topnav img{width:32px; height:32px;}
.menu-overlay.open ul{top:5px;}


}


@media screen and (max-width : 580px){
/*貼心包*/
.mbag li span.mp_icon{ display:block; background:#fff; padding:15px; margin:5px auto;vertical-align:middle; width:40px; height:40px;  border-radius:100px;}
.mbag li span.mp_icon img{ width:100%; height:auto;  vertical-align : middle; margin:0;}	
}


@media screen and (max-width : 496px) {
.ft_logo{width:50%; height:auto; margin:0 auto; float:none;}
.submenu{width:100%; padding:0; line-height:24px;}
.ft_info{line-height:22px;}
.ft_info dd.design{width:100%; text-align:center;}
/*menu*/
.cd-nav-trigger{width:30px; height:30px; top:5px;}
#logo{width:200px; height:40px; background:url(../images/logo_s.png) no-repeat; background-size:100%; -webkit-transition: all 0.1s;    -moz-transition: all 0.1s;  -ms-transition: all 0.1s;   -o-transition: all 0.1s;
    transition: all 0.1s;}
.smaller #logo a{width:200px; height:40px;}
.topnav{ width:270px; position: static; top:0; margin:0 auto;}
.topnav img{width:32px; height:32px;}
.topnav li{ margin:0 -3.5px;}
.header .website_btn{left:auto; right:15px;}

#logo{ position:absolute; left:0px;}



}


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

.mbag li{ padding:10px; width:calc(100%/3 - 18px);}
.mbag li span.mp_icon{ padding:10px; width:30px; height:30px;}
.mbag li p.mptxt{ font-size:17px;}
}




@media screen and (max-width : 370px) {
.breadcrumb{padding:2px 0;}
.breadcrumb ul li{font-size:12px;}
.header .website_btn{right:5px; padding:5px;}
.header .website_btn:hover{padding:3px;}


}