@charset "UTF-8";
/* 以上是 聲明 css編碼 */

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/Peggy/fonticons/css/style.css');
/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/becky/css/reset.css');

/*公版 聯絡我們、客製服務 - nav不出現*/

.travelwant_nav li,
.contact_nav li{ display: none; }

header{
	width: 100%;
	background-color: #1B9AAA;
	position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
}
.header{
	width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/*logo*/
	.toplogo img{
		width: 200px;
		margin: 0.5rem 0;
	}
/*社群連結*/
	.toplink{ margin: 1rem 1.5rem; }
	.toplink > ul{
		display: flex;
    	justify-content: flex-end;
    	align-items: center;
	}
	.toplink > ul > li:last-child{ border-left: 1px solid #3cbeb7; }
	.toplink > ul > li > a{
		font-size: 1.25rem;
	    color: #fff;
	    padding: 0.5rem;
	    box-sizing: border-box;
	    display: block;
	}
	.toplink > ul > li > a:hover{
		background-color: #FADA46;
		border-radius: 15px;
		color: #F8FFE5;
	}
	.toplink > ul > li > .toplink_totop{
		position: fixed;
		bottom: 10%;
		right: 1%;
		background-color: #444;
		border-radius: 15px;
		padding: 1rem;
		box-sizing: border-box;
		cursor: pointer;
		display: none;
	}

/*表尾*/
	footer{
		width: 100%;
		background-color: #1B9AAA;
		position: relative;
	}
	.underwrap{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: flex-start;

	}
	.underlogo img{ width: 200px; }
	.underwrap_left,
	.undernav{
		width: 30%;
		height: 250px;
		margin: 1rem auto 2rem;
		border-right: 1px solid #3cbeb7;
	}
	.underwrap_left > .underwrap_p{
		color: #fff;
		font-size: 0.9rem;
	}
	.underwrap_left > .underwrap_p > span{
		color: #2BCADE;
		letter-spacing: 1px;
		font-size: 0.9rem;
	}
	.undernav > ul{
		display: flex;
    	flex-wrap: wrap;
	}
	.undernav > ul > li{
		width: 45%;
		margin: 0.5rem auto;
	}
	.undernav > ul > li > a{ color: #fff; }
	.undernav > ul > li > a:hover{
		letter-spacing: 1px;
		color: #FADA46;
	}
	.underlink{
		margin: 2rem 0;
	}
	.underlink ul{
		display: flex;
		flex-wrap: wrap;
	}
	.underlink ul li a{
		color: #fff;
		display: block;
	    padding: 0.5rem;
	    box-sizing: border-box;
	    font-size: 1.25rem;
	    position: relative;
	    transition: all .5s
	}
	.underlink ul li a:hover{
		background-color: #FADA46;
		border-radius: 15px;
		color: #F8FFE5;
		bottom: 5px;
	}
	.underp{
		position: absolute;
	    bottom: 0;
	    right: 0;
	    padding: 0.5em 2em;
	    box-sizing: border-box;
	    color: #2BCADE;
	}

@media all and (min-width: 1030px){
	/*導覽列*/
	.topnav > ul{
		display: flex;
	}
	.topnav > ul > li{
		position: relative;
		padding: 0.5rem 0;
		box-sizing: border-box;
	}
	.topnav > ul > li:first-child > a{
		border-left: none;
	}
	.topnav > ul > li > a{
		color: #fff;
		padding: 0 1.5rem;
		box-sizing: border-box;
		border-left: 1px solid #3cbeb7;
		transition: all .3s;
	}
	.topnav > ul > li:hover > a{
		color: #FADA46;
	}
	.topnav > ul > li > .subnav{
		position: absolute;
	    background: #F8FFE5;
	    width: 100%;
	    left: 50%;
	    top: 100%;
	    transform: translate(-50%,0);
	    display: none;
	    box-shadow: 2px 2px 2px #444;
	}
	.topnav > ul > li:hover > .subnav{ display: block; }  
	.topnav > ul > li > .subnav > li a{
		width: 100%;
		padding: 0.5rem 1rem;
	    box-sizing: border-box;
	    display: block;
	    color: #444;
	    text-align: center;
	    transition: all .3s;
	}
	.topnav > ul > li > .subnav > li a:hover{
		background-color: rgba(0,0,0,.5);
		color: #fff;
	}
}
@media all and (max-width: 1029px){
	.topnav_btn{
		cursor: pointer;
		position: absolute;
		top: 45px;
		left: -60px;
		z-index: 10000;
		width: 40px;
		height: 40px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.topnav_open{ background-image: url(/webeip/HT00100/becky/icon/menubtn_open_blod_w.svg); }

	.topnav_close{ background-image: url(/webeip/HT00100/becky/icon/menubtn_close_blod_bl.svg); }

	.topnav{
		background-image: url(/webeip/HT00100/Peggy/hotel/summer/img/bg.jpg);
	    background-size: cover;
	    background-repeat: no-repeat;
		position: fixed;
		z-index: 9999;
		top: 0;
		right: -70%;
		width: 70%;
		padding-top: 100px;
		box-sizing: border-box;
		height: 100%;
	}
	.topnav ul{
		width: 90%;
		max-width: 500px;
		margin: 0.25rem auto;
		height: 95%;
		overflow: auto;
	}
	.topnav ul li a{
		display: block;
		width: 100%;
		text-align: center;
		color: #444;
		border-bottom: 1px solid rgba(0,0,0,0.3);
		font-size: 1.25rem;
		font-weight: bold;
		padding: 1rem;
		box-sizing: border-box;
	}
	.topnav > ul > li:last-child > a{ border-bottom: none; }

	.topnav ul li .subnav{
		width: 90%;
		background-color: rgba(0,0,0,0.2);
	}
}
@media all and (max-width: 900px){
	.underwrap{
		display: block;
		padding: 1rem;
    	box-sizing: border-box;
	}
	.underwrap_left{ padding-bottom: 2rem; }
	.underwrap_left, .undernav{
		width: 90%;
    	height: auto;
		border-right: none;
		border-bottom: 1px solid #3cbeb7;
	}
}
@media all and (max-width: 775px){
	.toplink > ul{
		display: block;
		position: fixed;
		bottom: 20%;
    	right: 1%;
	}
	.toplink > ul > li > a{
		display: block;
		background-color: #444;
	    border-radius: 15px;
	    padding: 0.75rem;
	    box-sizing: border-box;
	    cursor: pointer;
	    text-align: center;
	    margin: 0.5rem 0;
	}
	.toplink > ul > li:last-child{ border: none; }
	.toplink > ul > li > .toplink_en,
	.toplink > ul > li > .toplink_icon_mail,
	.toplink > ul > li > .toplink_icon_ig{
		display: none;
	}
}