/*
 * w443 tyhotel - iweb51_style09
 * http://www.tyhotel.com.tw/
 * Copyright 2015, TANK
 * 
 * 
 * 2015 / 11 / 2
 */


/**
*
* =contact-form
*
**/
.wrapper .container section .content-wrap .contact-form {
	overflow: hidden;
}

.wrapper .container section .content-wrap .contact-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.wrapper .container section .content-wrap .contact-form fieldset p ,
.wrapper .container section .content-wrap .contact-form fieldset .pay {
	margin: 25px 0 25px;
	line-height: 190%;
	font-size: 18px;
	color: #2F2F2F;
}

.wrapper .container section .content-wrap .contact-form fieldset p label ,
.wrapper .container section .content-wrap .contact-form fieldset .pay label {
	margin: 0 0 5px;
	display: block;
}

.wrapper .container section .content-wrap .contact-form fieldset p label strong ,
.wrapper .container section .content-wrap .contact-form fieldset .pay label strong {
	margin: 0 5px 0 0;
	display: inline-block;
	color: #F00;
}

.wrapper .container section .content-wrap .contact-form fieldset input {
	padding: 5px;
	width: 100%;
	height: 35px;
	border: 1px solid #C0C0C0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 3px;
}
.wrapper .container section .content-wrap .contact-form fieldset input[type="radio"]{
	width:auto;
	height:auto;
}
.wrapper .container section .content-wrap .contact-form fieldset select {
	padding: 5px;
	width: 100%;
	height: 35px;
	border: 1px solid #C0C0C0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 3px;
}

.wrapper .container section .content-wrap .contact-form fieldset textarea {
	padding: 0 5px;
	width: 100%;
	height: 130px;
	border: 1px solid #C0C0C0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 3px;
}

.wrapper .container section .content-wrap .contact-form fieldset p input.radio {
	width: 20px;
	height: 20px;
}
.wrapper .container section .content-wrap .contact-form fieldset span {
	margin-right:10px;
}
.wrapper .container section .content-wrap .contact-form fieldset.btn {
	overflow: hidden;
}

.wrapper .container section .content-wrap .contact-form fieldset.btn p {
	padding: 5px 5px 5px 10px;
	height: 40px;
	float: left;
	border-radius: 3px;
	line-height: 40px;
	color: #999;
}

.wrapper .container section .content-wrap .contact-form fieldset.btn p input {
	margin: -5px 5px 0;
	margin: -5px 5px 0 60px \9;
	width: 65px;
	height: 30px;
	line-height: 30px;
}

.wrapper .container section .content-wrap .contact-form fieldset.btn p img {
	width: auto;
	margin-top: -5px;
}

.wrapper .container section .content-wrap .contact-form fieldset.btn p.send {
	padding: 0;
	width: 30%;
	height: 50px;
	background: none;
	line-height: 50px;
	width: 100%;
}

.wrapper .container section .content-wrap .contact-form fieldset.btn p.send input.btn-submit {
	margin: -4px 0 0 10px;
	padding: 7px 0;
	width: 90px;
	height: 45px;
	background: #d41815;
	background: -moz-linear-gradient(top,  #d41815 0%, #ae0200 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d41815), color-stop(100%,#ae0200));
	background: -webkit-linear-gradient(top,  #d41815 0%,#ae0200 100%);
	background: -o-linear-gradient(top,  #d41815 0%,#ae0200 100%);
	background: -ms-linear-gradient(top,  #d41815 0%,#ae0200 100%);
	background: linear-gradient(to bottom,  #d41815 0%,#ae0200 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d41815', endColorstr='#ae0200',GradientType=0 );
	display: inline-block;
	box-shadow: 2px 2px 2px #CCC;
	border-radius: 3px;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
	line-height: 32px;
	text-align: center;
	font-size: 16px;
	color: #FFF;
}

.wrapper .container section .content-wrap .contact-form fieldset.btn p.send input.btn-submit:hover {
	background: #980d0d;
}

.wrapper .container section .content-wrap .contact-form h4 ,
.wrapper .container section .content-wrap .contact-form p.Pay2go {
	text-align: center;
	font-size: 20px;
}

.wrapper .container section .content-wrap .contact-form p.Pay2go {
	margin: 10px 0;
	font-size: 18px;
}

input#btnRL {
	width: 255px;
	height: 40px;
	border: 0;
	background-color: #3bb3e0;
	font-size: 18px;
	text-decoration: none;
	color: #fff;
	position: relative;
	padding: 4px 20px;
	padding-right: 50px;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -webkit-gradient(linear,	left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)));
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
	-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
	-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

input#btnRL:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(62,184,229)), color-stop(1, rgb(44,160,202)));
	-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
	-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
	-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

input#btnRL:before {
	background-color: #2591b4;
	background-image: url(../../images/09/main/right_arrow.png);
	background-repeat: no-repeat;
	background-position: center center;
	content:"";
	width: 20px;
	height: 20px;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -9px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	-moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	-o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

input#btnRL:active::before {
	top: 50%;
	margin-top: -12px;
	-webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
	-moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
	-o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
	box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}


/* +payType
*----------------------------------------------------------------------------*/
.wrapper .container section .content-wrap .contact-form fieldset ul.payType {
	overflow: hidden;
}

.wrapper .container section .content-wrap .contact-form fieldset ul.payType li {
	float: left;
	font-size: 16px;
}

.wrapper .container section .content-wrap .contact-form fieldset ul.payType li img {
	display: none;
}

.wrapper .container section .content-wrap .contact-form fieldset ul.payType li img.imageClass {
	width: 50px;
	display: inline-block;
}

ul#roomList li {
	padding-bottom: 20px;
	border-bottom: 1px #ccc dashed;
}

ul#roomList li p {
	margin: 20px 0 10px;
}

ul#roomList li .addRoom {
	overflow: hidden;
}

ul#roomList li .addRoom .roomPhoto ,
ul#roomList li .addRoom .roomInfo {
	margin: 0 10px;
	float: left;
}

ul#roomList li .addRoom .roomPhoto a {
	display: block;
}

ul#roomList li .addRoom .roomInfo p.roomMore {
	text-align: right;
}

ul#roomList li .addRoom .roomInfo p.roomMore a {
	padding: 5px 10px;
	display: inline-block;
	background: #62B4BB;
	color: #fff;
	border-radius: 10px;
	opacity: 1;
}

ul#roomList li .addRoom .roomInfo p.roomMore a:hover {
	opacity: 0.6;
}

ul#roomList li .addRoom .roomInfo p.infoTit {
	padding-left: 10px;
	border-left: 5px #ccc solid;
}

ul#roomList li .addRoom .roomInfo p table {
	width: 100%;
}

ul#roomList li .addRoom .roomInfo p table tbody tr td {
	width: 50%;
	border-bottom: 1px #ccc dotted;
	text-align: center;
}

ul#roomList li .addRoom .roomInfo p table tbody tr td:first-child {
	border-right: 1px #ccc dotted;
}

ul#roomList li .addRoom .roomInfo p table tbody tr:last-child td {
	border-bottom: 0;
}


/*Custom checkbox*/
ul#roomList li p .check-box {
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: inline-block;
    margin: 2px 7px 0 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 1px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
    border: 1px solid #ccc;
}
ul#roomList li p .check-box i {
    background: url(../../images/09/main/check_mark.png) no-repeat center center;
    position: absolute;
    left: 3px;
    bottom: -15px;
    width: 16px;
    height: 16px;
    opacity: .5;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    -webkit-transform:rotateZ(-180deg);
    -moz-transform:rotateZ(-180deg);
    -o-transform:rotateZ(-180deg);
    transform:rotateZ(-180deg);
}
ul#roomList li p .checkedBox {
    -moz-box-shadow: inset 0 0 5px 1px #ccc;
    -webkit-box-shadow: inset 0 0 5px 1px #ccc;
    box-shadow: inset 0 0 5px 1px #ccc;
    border-bottom-color: #fff;
}
ul#roomList li p .checkedBox i {
    bottom: 2px;
    -webkit-transform:rotateZ(0deg);
    -moz-transform:rotateZ(0deg);
    -o-transform:rotateZ(0deg);
    transform:rotateZ(0deg);
}

ul#roomList li p .check-box i input[type="checkbox"] {
    visibility: hidden;
}



/**********適應性**********/
/************************/
@media only screen and (min-width : 320px) {
	.wrapper .container section .content-wrap .contact-form fieldset ul.payType li ,
	ul#roomList li .addRoom .roomPhoto ,
	ul#roomList li .addRoom .roomInfo {
		width: 90%;
	}
}

@media only screen and (min-width : 640px) {
	.wrapper .container section .content-wrap .contact-form fieldset ul.payType li {
		width: 50%;
	}
}

@media only screen and (min-width : 768px) {
	.wrapper .container aside #gmap {
		width: 100%;
		overflow: hidden;
	}
	.wrapper .container aside #gmap iframe {
		width: 100% !important;
		height: 500px !important;
	}
}

@media only screen and (min-width : 1024px) {
	.wrapper .container aside #gmap iframe {
		height: 700px !important;
	}
	.wrapper .container section .content-wrap .contact-form fieldset ul.payType li {
		width: 33%;
	}
	ul#roomList li .addRoom .roomPhoto ,
	ul#roomList li .addRoom .roomInfo {
		width: 45%;
	}
	ul#roomList li .addRoom .roomPhoto a {
		width: 90%;
	}
}

@media only screen and (min-width : 1280px) {
	.wrapper .container section .content-wrap .contact-info ,
	.wrapper .container section .content-wrap .contact-form fieldset p label {
		color: #000;
	}
}