@charset "utf-8";

/*.wings-fast-book * {box-sizing: border-box;}
.wings-fast-book{max-width:1200px; margin:0 auto; height:50px; position:absolute; z-index:51; width:100%; left:0; right:0; bottom:38%;}
.wings-fast-book select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.wings-fast-book select::-ms-expand {display: none;}
.wings-fast-book .bookIns{margin:0 auto;width:90%; min-width: 1080px;}
.wings-fast-book .bookIns p{width:20%; float:left; padding:0 4px; box-sizing: border-box}
.wings-fast-book .bookIns ul{float:left; width:80%; padding: 0; overflow: hidden;}
.wings-fast-book .bookIns ul li{float:left; width:25%; padding:0 4px; box-sizing: border-box; color:#fff; list-style:none;}
.wings-fast-book .bookIns ul li.ci_date{width:362px;}
.wings-fast-book .bookIns ul li.rooms{width:120px;}
.wings-fast-book .bookIns ul li.adults{width:120px;}
.wings-fast-book .bookIns ul li.child{width:120px;}
.wings-fast-book .bookIns ul li.company{width:140px;}

.wings-fast-book .bookIns input,
.wings-fast-book .bookIns select,
.wings-fast-book .bookIns button{width:100%; line-height:49px; color:#333; font-size:14px; height:50px; padding:0 18px; border:none; background:#fff; outline-style:none; border-radius:5px; cursor:pointer;}
.wings-fast-book .bookIns .wings_input input{cursor:pointer;}
.wings-fast-book .bookIns .ci_date .date_range:after{content:'';clear:both;display: block;}
.wings-fast-book .bookIns .ci_date .wings_input input{background:url(/Template05_common/images/homepage/common/icon_date.jpg) 92% 50% no-repeat #fff;}
.wings-fast-book .bookIns button{background:#d09f0c !important; border:none; color:#fff !important; font-size:15px; }
.wings-fast-book .bookIns .innerBox{position:relative;}
.wings-fast-book .bookIns li.ci_date .innerBox{width: 173px;float: left;}
.wings-fast-book .bookIns li.ci_date .innerBox:nth-child(2n){padding-left: 8px;}
.wings-fast-book .bookIns .innerBox.sel::after{content:url(/Template05_common/images/homepage/common/icon_sel.jpg); position:absolute; right:5px; top:15px; display:block; z-index:97; width:20px; background:#fff}*/

	.datepicker {
	    background-color: #fff;
	    display: inline-block;
	    position: relative;
	    vertical-align: middle;
	    width:173px;
	}
	.date-picker-wrapper * {
	    margin: 0;
	    padding: 0;
	    -webkit-tap-highlight-color: rgba(0,0,0,0);
	    -webkit-font-smoothing: antialiased;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    font-family: 'Noto Regular', sans-serif;
	}
	.form-control-range {}
	 .calendar-range-container { position:relative; z-index:10;}
	 
	 .date-picker {position:relative; width:170px; height:25px; padding:0; padding-left:10px; border:0; color:#303030; font-size:12px; font-weight:700; font-family:Arial,sans-serif; line-height:25px; cursor:pointer; z-index:2}
	
	.date-picker-wrapper {position:absolute; background-color:#fff; z-index:9999999; border-top: 1px solid #ddd; /* border:1px solid #ccc; box-shadow:0 3px 6px #ccc; */ box-sizing:content-box;-webkit-box-sizing:content-box; /* -webkit-box-shadow:0 3px 6px #ccc; */ -moz-box-sizing:content-box;}
	.date-picker-wrapper.inline-wrapper {position:relative;}
	.date-picker-wrapper.single-date {width:auto}
	.date-picker-wrapper.no-shortcuts {}
	.date-picker-wrapper.no-topbar {}
	.date-picker-wrapper .footer {display: none;}

	.date-picker-wrapper b {color:#666; font-weight:700}
	.date-picker-wrapper a {color:#6bb4d6; text-decoration:underline}

	.date-picker-wrapper .month-name {text-transform:uppercase; position: relative;}
	.date-picker-wrapper .select-wrapper {display:inline-block; position:relative; overflow:hidden; vertical-align:middle; padding:7px 3px 10px;}
	.date-picker-wrapper .select-wrapper .select {display: block;position: relative; width:80px;}
	.date-picker-wrapper .select-wrapper .select select { font-size:18px; color:#010101; font-weight:700; border:none;padding: 8px 24px 8px 8px;}
	.date-picker-wrapper .select-wrapper .select:after {
	    content: '';
	    position: absolute;
	    right: 8px;
	    top: 15px;
	    width: 0;
	    height: 0;
	    display: block;
	    border-top: 5px solid #AEB1BA;
	    border-bottom: 5px solid transparent;
	    border-right: 5px solid transparent;
	    border-left: 5px solid transparent;
	}
	.date-picker-wrapper .select-wrapper .select:after { top:20px;}
	.date-picker-wrapper .select-wrapper:hover {text-decoration:underline}
	.date-picker-wrapper .month-element {display:inline-block; vertical-align:middle; font-size: 18px;}
	.date-picker-wrapper .month-element.year {margin-right: 3px;}
	.date-picker-wrapper .select-wrapper .select select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
	.date-picker-wrapper .select-wrapper .select select::-ms-expand {display: none;}
	.wings-fast-book .bookIns .ci_date .wings_input input::-ms-clear {display:none;}

	/*
	.date-picker-wrapper .select-wrapper select {position:absolute; top:-1px; left:0; margin:0; padding:0; border:0; outline:0; background:0 0; color:inherit; font-style:inherit; font-size:inherit; font-weight:inherit; text-transform:inherit; cursor:pointer; appearance:none;opacity:.01filter:alpha(opacity=1); -webkit-appearance:none; -moz-appearance:none; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";}
	*/

	.date-picker-wrapper .month-wrapper { position:relative; cursor:default; padding:10px 15px 20px;}

	.date-picker-wrapper .month-wrapper table {width:216px; float:left;}
	.date-picker-wrapper .month-wrapper table.month2 {width:216px; float:left;}

	.date-picker-wrapper .month-wrapper table td,
	.date-picker-wrapper .month-wrapper table th {margin:0; text-align:center; line-height:14px; vertical-align:middle; padding:0}
	.date-picker-wrapper .month-wrapper table th {padding-bottom:10px; position:relative;}
/* 	.date-picker-wrapper .month-wrapper table th.sun { color: #C64A4A;}
	.date-picker-wrapper .month-wrapper table th.sat { color: #00A651;} */

	.date-picker-wrapper .month-wrapper table .day {margin-bottom:1px; padding:8px 0; color:#acacac; font-size:13px; line-height:1; cursor:default}

	.date-picker-wrapper .month-wrapper table div.day.lastMonth,
	.date-picker-wrapper .month-wrapper table div.day.nextMonth {color:#999; cursor:default}

	.date-picker-wrapper .month-wrapper table .day.checked {background-color:#e1f1f0}
	.date-picker-wrapper .month-wrapper table .week-name {height:20px; line-height:20px; text-transform:uppercase}
	.date-picker-wrapper .month-wrapper table .week-name th {font-weight:300;}
	.date-picker-wrapper .month-wrapper table .day.has-tooltip {cursor:help!important}
	.date-picker-wrapper .time label {white-space:nowrap}
	.date-picker-wrapper .month-wrapper table .day.toMonth.valid {color:#000; cursor:pointer}
	.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {background-color:#e1f1f0}

	.date-picker-wrapper .month-wrapper table .day.lastMonth,
	.date-picker-wrapper .month-wrapper table .day.nextMonth {display:none}

	/* .date-picker-wrapper .month-wrapper table .day.real-today {background-color:#FFCC33} */
	.date-picker-wrapper .month-wrapper table .day.real-today.checked,
	.date-picker-wrapper .month-wrapper table .day.real-today.hovering {background-color:#70ccd5}

	.date-picker-wrapper table .caption {height:70px}
	.date-picker-wrapper table .caption .next,
	.date-picker-wrapper table .caption .prev {padding:0 5px; cursor:pointer; font-size:0;}
	.date-picker-wrapper table .caption .next:hover,
	.date-picker-wrapper table .caption .prev:hover {background-color:#ccc; color:#fff}
	
	.date-picker-wrapper table .caption .prev { background:#fff url(/UtopBoutiqueResidence_common/images/homepage/common/btn_prev.png) no-repeat left top; position:absolute; left:10px; top:22px; width:11px; height:20px;}
	.date-picker-wrapper table .caption .next { background:#fff url(/UtopBoutiqueResidence_common/images/homepage/common/btn_next.png) no-repeat left top; position:absolute; right:10px; top:22px; width:11px; height:20px;}

	/* .month-wrapper:before { content:'';  position:absolute; left:0; right:0; top:59px; background-color:#F4F4F4; height:30px; z-index:-1;} */



	.date-picker-wrapper .gap {float:left; width:20px;}

	/*
	.date-picker-wrapper .gap .gap-lines {height:100%; overflow:hidden}
	.date-picker-wrapper .gap .gap-line {width:15px; height:15px; position:relative}
	.date-picker-wrapper .gap .gap-line .gap-1 {z-index:1; height:0; border-top:8px solid #eee; border-left:8px solid #fff; border-bottom:8px solid #eee}
	.date-picker-wrapper .gap .gap-line .gap-2 {position:absolute; z-index:2; top:0; right:0; height:0; border-left:8px solid transparent; border-top:8px solid #fff}
	.date-picker-wrapper .gap .gap-line .gap-3 {position:absolute; z-index:2; top:8px; right:0; height:0; border-left:8px solid transparent; border-bottom:8px solid #fff}
	.date-picker-wrapper .gap .gap-top-mask {position:absolute; top:-1px; left:1px; width:6px; height:1px; background-color:#eee; z-index:3}
	.date-picker-wrapper .gap .gap-bottom-mask {position:absolute; left:7px; bottom:-1px; width:6px; height:1px; background-color:#eee; z-index:3}
	*/

	.date-picker-wrapper .selected-days {display:none}
	.date-picker-wrapper .drp_top-bar {position:relative; line-height:1.4; padding:10px 40px 10px 0; display:none;}
	.date-picker-wrapper .drp_top-bar .error-top {display:none}
	.date-picker-wrapper .drp_top-bar .normal-top {display:none}
	.date-picker-wrapper .drp_top-bar .default-top {display:block}
	.date-picker-wrapper .drp_top-bar.error .default-top {display:none}
	.date-picker-wrapper .drp_top-bar.error .error-top {display:block; color:red}
	.date-picker-wrapper .drp_top-bar.normal .default-top {display:none}
	.date-picker-wrapper .drp_top-bar.normal .normal-top {display:block}
	.date-picker-wrapper .drp_top-bar .apply-btn{position:absolute; top:6px; right:0; margin:0; padding:3px 5px; border:solid 1px #0076a3; border-radius:4px; background:#0095cd; background:-moz-linear-gradient(top,#00adee,#0078a5); color:#d9eef7; color:#fff; font-size:12px; cursor:pointer; line-height:initialfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');}
	.date-picker-wrapper .drp_top-bar .apply-btn.disabled {border:solid 1px #b7b7b7; background:#fff; background:-moz-linear-gradient(top,#fff,#ededed); color:#606060; cursor:pointer; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')}

	.date-picker-wrapper .time {position:relative}
	.date-picker-wrapper.single-month .time {display:block}
	.date-picker-wrapper .time input[type=range] {width:129px; margin:0; padding:0; vertical-align:middle; height:20px}
	.date-picker-wrapper .time1,.time2 {width:180px; padding:0 5px; text-align:center}
	.date-picker-wrapper .time1 {float:left}
	.date-picker-wrapper .time2 {float:right}

	.date-picker-wrapper .hour,
	.minute {text-align:right}

	.date-picker-wrapper .hide {display:none}

	.date-picker-wrapper .month-wrapper table .day.checked span {position: relative; z-index: 10;}

	.date-picker-wrapper .first-date-selected {background: none!important; position: relative;}
	.date-picker-wrapper .first-date-selected span {color: #fff;}
	.date-picker-wrapper .first-date-selected:after {content: ''; position: absolute; width: 50%; height: 28px; background: #e1f1f0; top: 0; left: 50%; z-index: 1;}
	.date-picker-wrapper .first-date-selected:before {content: ''; position: absolute; width: 28px; height: 28px; background: #69bbb4; top: 0; left: 50%; margin-left: -14px; border-radius: 14px; z-index: 2;}

	.date-picker-wrapper .last-date-selected {background: none!important; position: relative;}
	.date-picker-wrapper .last-date-selected span {color: #fff;}
	.date-picker-wrapper .last-date-selected:after {content: ''; position: absolute; width: 50%; height: 28px; background: #e1f1f0; top: 0; right: 50%; z-index: 1;}
	.date-picker-wrapper .last-date-selected:before {content: ''; position: absolute; width: 28px; height: 28px; background: #69bbb4; top: 0; left: 50%; margin-left: -14px; border-radius: 14px; z-index: 2;}

	.date-picker-wrapper .date-range-length-tip {display:none; position:absolute; margin-top:-4px; margin-left:-8px; padding:0 6px; border-radius:2px; background-color:#ff0; box-shadow:0 0 3px rgba(0,0,0,.3); font-size:12px; line-height:16px; filter:drop-shadow(0 0 3px rgba(0, 0, 0, .3))-webkit-box-shadow:0 0 3px rgba(0,0,0,.3); -webkit-filter:drop-shadow(0 0 3px rgba(0, 0, 0, .3)); -o-filter:drop-shadow(0 0 3px rgba(0, 0, 0, .3)); -moz-filter:drop-shadow(0 0 3px rgba(0, 0, 0, .3)); -ms-filter:drop-shadow(0 0 3px rgba(0, 0, 0, .3));}
	.date-picker-wrapper .date-range-length-tip:after {position:absolute; left:50%; margin-left:-4px; border-top:4px solid #ff0; border-right:4px solid transparent; border-left:4px solid transparent; content:''; bottom:-4px}

	.date-picker-wrapper.two-months.no-gap .month1 .next,
	.date-picker-wrapper.two-months.no-gap .month2 .prev {display:none}

	.date-picker-wrapper .week-number {margin-bottom:1px; padding:5px 0; color:#999; font-size:12px; line-height:1; cursor:pointer}
	.date-picker-wrapper .week-number.week-number-selected {color:#49e; font-weight:700}
	






/** BOOKING **/
.bookWrap {width: 100%; /* font-family:'Malgun Gothic'; */}
.bookArea-wrap {width: 100%; background: #fff; border: 1px solid #656a6a;}
.bookArea-wrap.mgt {margin-top: 50px;}
.bookArea-wrap * {box-sizing: border-box;}
.bookArea-wrap > #bookArea{width:1200px; margin:0 auto; z-index:96; position:relative; background:#fff;}
#bookArea .bookIns{padding:0;}
#bookArea .bookIns .innerBox{position:relative;}
#bookArea .title{text-align:center; border-bottom: 1px solid #ddd; padding-bottom: 35px; margin-bottom: 0!important;}
#bookArea .title h1{font-size:25px; font-weight:700; color:#000; line-height:1; padding-top: 30px;}
#bookArea .bookIns ul{width:100%; margin: 0; padding: 0; overflow: hidden;}
#bookArea .bookIns ul:after{content:''; display:block; clear:both;}
#bookArea .bookIns ul li{position: relative; float:left; width: 15%; height:136px; padding-top: 34px; text-align: center; list-style: none;}
#bookArea .bookIns ul li:after {content: ''; display: inline-block; position: absolute; width: 1px; height: 84px; right: 0; top: 25px; background: #e5e5e5;}
#bookArea .bookIns ul li:nth-child(n+4):after {display: none;}

#bookArea .bookIns ul li.ci_date {width: 40%}
#bookArea .bookIns ul li.ci_date .dateWrap {width: 50%; float:left; position: relative;}
#bookArea .bookIns ul li.ci_date .dateWrap:first-child:after {content: ''; display: inline-block; position: absolute; width: 1px; height: 84px; right: 0; top: -9px; background: #e5e5e5;}
#bookArea .bookIns ul li.ci_date .innerBox{width: 100%; /* float:left; */ box-sizing:border-box;}
#bookArea .bookIns ul li.ci_date .innerBox input{max-width: 180px;}
#bookArea .bookIns ul li .dateWrap:after{content:''; display:block; clear:both;}
#bookArea .bookIns ul li.search{padding: 0;}

#bookArea .bookIns input,
#bookArea .bookIns select,
#bookArea .bookIns button{position: relative; background:#fff; width:100%; line-height: 1.65em; color:#222; text-align: center; font-weight: 700; font-size: 25px; height:45px; padding-right: 20px; outline-style: none;}
#bookArea .bookIns select::-ms-expand {display: none;}
#bookArea .bookIns select, 
#bookArea .bookIns option {text-align-last: center; text-align: center; -ms-text-align-last: center; -moz-text-align-last: center;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;}
#bookArea .bookIns option {font-size: 18px;}
#bookArea .bookIns input {-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; border: 0;}
#bookArea .bookIns input::placeholder {color: #222;}

#bookArea .bookIns .innerBox {margin: 0; height: 100%;}
#bookArea .bookIns .innerBox > em {font-size: 14px; display: block; color: #a2a2a2; font-weight: 100; margin-bottom: 5px;}
#bookArea .bookIns .innerBox.input input{ background:url(/UtopBoutiqueResidence_common/images/homepage/common/icon_date.png) #fff right center no-repeat;}
#bookArea .bookIns .innerBox.sel select{max-width: 50px; background:url(/UtopBoutiqueResidence_common/images/homepage/common/icon_date.png) #fff right center no-repeat; border:0;}

#bookArea .bookIns .fb_rsvn button {background:#656a6a; border:none; color:#fff; padding:0; height: 100%; font-size: 16px; font-weight: 300;}
#bookArea .bookIns .fb_rsvn button strong {display: block; font-size: 20px; font-weight: 500;}


@media all and (max-width: 1220px) {
	#bookArea{width:100%; max-width:100%; /* overflow:hidden; */ box-sizing:border-box}
	#bookArea .bookIns input, #bookArea .bookIns select, #bookArea .bookIns button {font-size: 21px;}
}

/* @media all and (max-width: 1150px) {

	#bookArea .bookIns ul li.ci_date{width:36.5%}
	#bookArea .bookIns ul li.rooms{width:12.2%}
	#bookArea .bookIns ul li.adults{width:12.2%}
	#bookArea .bookIns ul li.child{width:12.2%}
} */


@media all and (max-width: 1024px) {
	#bookArea .bookIns input, #bookArea .bookIns select, #bookArea .bookIns button {font-size: 18px;}
	#bookArea .bookIns ul li {height: 120px; padding-top: 28px;}
	#bookArea .bookIns ul li:after {top: 18px;}
	
	#bookArea .bookIns ul li.ci_date .innerBox input {max-width: 150px;}
	#bookArea .bookIns .fb_rsvn button {font-size: 15px;}
	#bookArea .bookIns .fb_rsvn button strong {font-size: 17px;}
}

@media all and (max-width:768px) {
	#bookArea .bookIns ul li {width: 33.3%; height: 100px; padding: 18px 0;}
	#bookArea .bookIns ul li:after {height: 65px;}
	#bookArea .bookIns ul li.ci_date .dateWrap:first-child:after {height: 65px; top: 0px;}
	#bookArea .bookIns .innerBox > em {margin-bottom: 0; font-size: 17px;}
	#bookArea .bookIns input, #bookArea .bookIns select, #bookArea .bookIns button {height: 38px; font-size: 21px;}
	#bookArea .bookIns ul li.ci_date {width: 100%; border-bottom: 1px solid #e5e5e5;}
	#bookArea .bookIns ul li.ci_date .innerBox input {max-width: 65%;}
	#bookArea .bookIns ul li.search {width: 100%; height: 76px; border-bottom: 0;}
	#bookArea .bookIns .fb_rsvn button {padding: 20px 0; font-size: 21px;}
	#bookArea .bookIns .fb_rsvn button strong {display: inline-block; font-size: 21px; vertical-align: middle; font-weight: 700;}
	#bookArea .bookIns .fb_rsvn button span {vertical-align: middle;}
	
	.date-picker-wrapper .month-wrapper table .day {padding: 11px 0;}
	.date-picker-wrapper .first-date-selected:before {width:36px; height:36px; border-radius:18px; margin-left:-18px;}
	.date-picker-wrapper .first-date-selected:after {height: 36px;}
	.date-picker-wrapper .last-date-selected:before {width:36px; height:36px; border-radius:18px; margin-left:-18px;}
	.date-picker-wrapper .last-date-selected:after {height: 36px;}	
}

@media all and (max-width:470px) {
	#bookArea .bookIns .innerBox > em {font-size: 16px;}
	#bookArea .bookIns ul li {padding: 14px 0; height: 91px;}
	#bookArea .bookIns ul li:after {height: 56px;}
	#bookArea .bookIns ul li.ci_date .dateWrap:first-child:after {height: 56px; top: 4px;}
	#bookArea .bookIns ul li.ci_date .innerBox input {max-width: 75%; font-size: 19px;}
	#bookArea .bookIns ul li.search {height: 62px;}
	#bookArea .bookIns .fb_rsvn button {padding: 15px 0; font-size: 18px;}
	
	.date-picker-wrapper {width: 100%; left: 0!important;}
	.date-picker-wrapper .month-wrapper {width: 100%;}
	.date-picker-wrapper .month-wrapper table, .date-picker-wrapper .month-wrapper table.month2 {width: 100%;}
	.date-picker-wrapper .gap {display: none;}
}