﻿@charset "utf-8";
@import url(reset.css);
@import url(../font/fontface.css);

/* --------------------------- general selector -------------------------------------*/

body {-webkit-font-smoothing: antialiased; background-color:#fff;font-family: 'db_futhaira_head_xmed'; line-height:1; font-size:20px; color:#000; }
.m_foot a {color:#fff;}
a { color:#000; outline:none;}
a:hover { text-decoration:none;}
a:focus { outline:none; box-shadow:none; }
.mobileHide {display:block;}
.mobileShow {display:none;}
img { max-width:100%;}
.flex { display:flex; align-items:center;display:-webkit-flex; -webkit-align-items:center;}
.font-big {font-family: 'big_caslonmedium';}
strong { font-weight:normal;font-family: 'db_futhaira_head_xdemibd';}
.f-right { float:right}
.t-right { text-align:right}
.f-left { float:left }
.t-left  { text-align:left }
.btn { background-color:#000; padding:7px 30px; text-align:center; color:#fff; border-radius:0;font-family: 'db_komol_xbold'; font-size:30px; width:300px; }
.btn:hover,
.btn:active,
.btn:focus { color:#fff;}
.btn-icon div { display:flex; align-items:center;display:-webkit-flex; -webkit-align-items:center; margin:0 auto;}
.btn-icon img { height:30px; margin-right:20px; margin-left:auto; }
.btn-icon span { margin-right:auto;}
.btn-blue { background-color:#2b4989;}
.fadeOverlay { position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:999; background-color:rgba(0,0,0,0.8);}
.wrapper { float:left; width:100%; overflow:hidden;}
.container-80 { width:80%; margin:0 auto;}
.wrapper-container {}
.wrapper-container .row {margin-right: -4px;margin-left: -4px;}
.wrapper-container .col-lg-1, .wrapper-container .col-lg-10, .wrapper-container .col-lg-11, .wrapper-container .col-lg-12, .wrapper-container .col-lg-2, .wrapper-container .col-lg-3, .wrapper-container .col-lg-4, .wrapper-container .col-lg-5, .wrapper-container .col-lg-6, .wrapper-container .col-lg-7, .wrapper-container .col-lg-8, .wrapper-container .col-lg-9, .wrapper-container .col-md-1, .wrapper-container .col-md-10, .wrapper-container .col-md-11, .wrapper-container .col-md-12, .wrapper-container .col-md-2, .wrapper-container .col-md-3, .wrapper-container .col-md-4, .wrapper-container .col-md-5, .wrapper-container .col-md-6, .wrapper-container .col-md-7, .wrapper-container .col-md-8, .wrapper-container .col-md-9, .wrapper-container .col-sm-1, .wrapper-container .col-sm-10, .wrapper-container .col-sm-11, .wrapper-container .col-sm-12, .wrapper-container .col-sm-2, .wrapper-container .col-sm-3, .wrapper-container .col-sm-4, .wrapper-container .col-sm-5, .wrapper-container .col-sm-6, .wrapper-container .col-sm-7, .wrapper-container .col-sm-8, .wrapper-container .col-sm-9, .wrapper-container .col-xs-1, .wrapper-container .col-xs-10, .wrapper-container .col-xs-11, .wrapper-container .col-xs-12, .wrapper-container .col-xs-2, .wrapper-container .col-xs-3, .wrapper-container .col-xs-4, .wrapper-container .col-xs-5, .wrapper-container .col-xs-6, .wrapper-container .col-xs-7, .wrapper-container .col-xs-8, .wrapper-container .col-xs-9, .wrapper-container .col-md-20 { padding-left:4px; padding-right:4px;}
.col-md-20 { width:20%; float:left;}
.col-md-21 { width:14.2857%; float:left;padding-left:15px; padding-right:15px;}


.box-center { text-align:center; float:left; width:100%;}
.short-line { width:70px; height:1px; margin:0 auto; background-color:#000; margin:50px auto; display:inline-block;}
.long-line { width:100%; height:1px; margin:0 auto; background-color:#a6a6a6; margin:50px auto; display:inline-block; margin:50px 0;}
.space50 { height:50px; float:left; width:100%;}

.box-title { float:left; width:100%; text-align:center; margin-bottom:50px;}
.box-title h1 {font-family: 'db_komol_xbold'; font-size:50px;}
.box-title p { font-size:25px; margin-top:20px;}
.box-title a { color:#1f376a; text-decoration:underline;}

.section-breadcrumb { float:left; width:100%; background-color:#d6d6d6; padding:10px 0;}
.box-breadcrumb { float:left; width:70%;}
.box-breadcrumb li { float:left; margin-right:10px;}
.box-scbscripe { float:right; margin-left:auto;}
.btn-subscripe { background-color:#000; letter-spacing:3px; color:#fff; padding:8px 24px; text-transform:uppercase; float:left;}
.btn-subscripe:hover { opacity:#fff;}

.fancybox-nav span{top:50%;width:40px;height:70px;margin-top:-35px;opacity:0.5}
.fancybox-nav span:hover{opacity:1;}
.fancybox-prev span{background:url(../img/skin/arrow-left.png) center center no-repeat #000;left:0px;}
.fancybox-next span{background:url(../img/skin/arrow-right.png) center center no-repeat #000;right:0px;}
.fancybox-close{background:url(../img/skin/btn-close.png) no-repeat;top:0;right:0;width:70px;height:70px;}
.fancybox-overlay { background:url(../img/skin/fancybox_overlay.png);}


.dropdown-menu { padding:5px 10px;}
.table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th {
padding: 5px;align-items: center;text-align: center;}
.table-condensed>tbody>tr>td { color:#545454; cursor:pointer;}
.table-condensed>tbody>tr>td.active { background-color:#50A8D3; border-radius:3px; color:#fff;}
/* --------------------------- general selector -------------------------------------*/


/*=============================================*/
/* BANNER */
/*=============================================*/

.section-banner { float:left; width:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.box-banner { float:left; width:100%; position:relative;}
.box-banner img { float:left;}
.banner-detail { color:#fff; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:rgba(0,0,0,0.6);padding: 50px 30px;width: 650px;}
.banner-detail h1 {font-family: 'big_caslonmedium'; text-transform:uppercase; margin-bottom:10px; font-size:31px;}
.banner-detail p { line-height:1.4; letter-spacing:0.5px;}

/*=============================================*/
/* ICON */
/*=============================================*/
.section-condoicon { float:left; width:100%; margin-bottom:80px;}
.condo-icon { text-align:center;}
.condo-icon h2 { font-size:29px; margin-bottom:10px;}
.condo-icon img { width:70%;}

/*=============================================*/
/* THUMB CONDO */
/*=============================================*/
.section-condolist { float:left; width:100%; margin-bottom:80px;}
.condo-list { float:left; width:100%; margin-bottom:8px; background-color:#000; cursor:pointer; }
.condo-list img { float:left; opacity:0.6; transition:all ease .4s; width:100%;}
.condo-list .condo-list-detail { position:absolute; bottom:60px; left:0px; width:100%; text-align:center; color:#fff; }
.condo-list .condo-list-detail h1 {font-family: 'db_komol_xbold'; font-size:40px; line-height:0.8;}
.condo-list .condo-list-detail p { font-size:24px; margin-top:5px;}
.condo-list:hover img { opacity:1; }


.section-button { float:left; width:100%; margin-bottom:80px;}
.box-button { float:left; width:100%; text-align:center;}
.box-button a { display:inline-block; margin:0 20px;}

.section-info { background-color:#ebf1f2; float:left; width:100%; padding:50px 0;}
.info-list { float:left; width:100%; text-align:center; font-size:23px;}
.info-list span { height:235px; display:flex; align-items:center; display:-webkit-flex; -webkit-align-items:center; margin-bottom:20px;}
.info-list span img { margin:0 auto;}
.info-list p { font-size:23px;}
/*=============================================*/
/* NEXT */
/*=============================================*/
.next-content { display:inline-block; text-align:center; margin:40px 0; position:relative; }
.next-content:before { content:""; position:absolute; bottom:-5px; width:100%; left:0px; height:1px; background-color:#000;}
.next-content span { display:flex; align-items:center; display:-webkit-flex; -webkit-align-items:center; margin:auto; }
.next-content span p { }
.next-content span img { width:25px; margin-left:10px;}

/*=============================================*/
/* NEXT */
/*=============================================*/
.prev-content { display:inline-block; text-align:center; margin:40px 0; position:relative; }
.prev-content:before { content:""; position:absolute; bottom:-5px; width:100%; left:0px; height:1px; background-color:#000;}
.prev-content span { display:flex; align-items:center; display:-webkit-flex; -webkit-align-items:center; margin:auto; }
.prev-content span p { }
.prev-content span img { width:25px; margin-right:10px;}


/*=============================================*/
/* REGISTER */
/*=============================================*/

.section-register { float:left; width:100%; margin-top:40px;}
.section-form .btn { width:100%; margin-top:30px;}
.section-form a { background-color:#bfbfbf;}

.check-group { float:left; width:100%; text-align:left; margin-bottom:15px; font-size:22px; position:relative;}
.check-group .check-list { float:left; width:100%; }
.check-group label { display: inline-block;cursor: pointer;position: relative;padding-left: 30px; padding-top:3px;	margin-bottom:0px;	font-weight:normal; position:relative;}
.check-group input[type=checkbox] { display:none;}
.check-group label:before { content: "";	display: inline-block; width:20px; height:20px;	margin-right:10px; position:absolute; left:0; top:2px;	background-color:#fff;  border:2px solid #c1c1c1; }
.check-group label:after { content:""; position:absolute;}
.check-group input[type=checkbox]:checked + label:after {  background: url(../img/icon/icon-check.svg) no-repeat center center; background-size:100%;  width: 16px;height: 16px;    left: 2px; top: 4px;}
.check-group.checkinline .check-list { width:auto;}

.listfill { width:100%; margin-bottom:15px; position:relative;}
.listfill span { margin-bottom:3px; font-size:22px;}
.listfill input { float:left!important; width:100%!important; border:2px solid #c1c1c1!important; padding:5px 20px!important; border-radius:0!important; height:36px!important; text-align:left!important; font-size:20px!important; line-height:1!important; color:#000;}
.listfill select { float:left!important; width:100%!important; border:2px solid #c1c1c1!important; padding:6px 20px!important; border-radius:0!important; height:36px!important; text-align:left!important; font-size:20px!important; line-height:1!important; color:#000;-webkit-appearance:none;-mox-appearance:none; background-color:#fff;}

.listfill .icon-fill { position:absolute;bottom: 1px;right: 7px;z-index: 2;width: 22px;}
.listfill .icon-fill img { position:relative; z-index:2}
.listfill .icon-fill:before { content:""; position:absolute; width:40px; height:32px; background-color:#fff; right:-3px; top:-6px; z-index:1; }
.select-fill { position:relative;}
.select-fill:before { content:""; position:absolute; right:14px; top:6px; width:15px; height:15px; border-bottom:2px solid #000; border-right:2px solid #000; transform:rotate(45deg); -webkit-transform:rotate(45deg); z-index:2}
.select-fill:after { content:""; position:absolute; width:40px; height:32px; background-color:#fff; right:2px; top:2px; z-index:1; }
#datepicker .listfill .icon-fill:before { display:none;}
.dropdown-menu{font-size: 18px;line-height: 1.1;}
.alert-fill { position:absolute; background-color:#B40003; color:#fff; padding:3px 5px; border-radius:2px; right:0px; top:2px; z-index:3; font-size:17px; display:none;}
/*=============================================*/
/* CONDO DETAIL */
/*=============================================*/
.condo-title { margin-bottom:20px; float:left; width:100%; margin-top:20px;}
.condo-title h1 { font-size:70px; font-family: 'db_komol_xbold'; line-height:0.8;}
.condo-title h3 { font-size:26px; }
.condo-banner { margin-bottom:30px;}

.condo-intodetail { font-size:24px;}
.condo-intodetail p { margin-bottom:10px;}
.condo-intodetail p:first-child { font-size:20px;}
.condo-intodetail p:last-child { font-size:15px; margin-top:20px;}

.condo-traffic { float:right; width:auto; }
.condo-trafficBy { float:left; margin-left:20px;}
.condo-trafficBy img { height:30px; float:left; margin-right:10px;}
.condo-trafficBy span { float:left; font-size:26px; text-align:left;}
.condo-trafficBy span p:first-child { font-size:14px; color:#666;}
.condo-trafficBy span p:last-child { line-height:0.8;}
.trafficBy-line { float:left; width:1px; height:20px; background-color:#666;margin-left: 20px;margin-top: 7px;}
.condo-viewmap { float:right; clear:both;}
.condo-viewmap .btn { padding:2px 30px; font-size:22px!important; width:300px; margin-top:10px; }


.box-detail { float:left; width:100%; line-height:1.3; margin-bottom:50px;}
.condo-desc { float:left; width:100%;}
.condo-desc h2 { font-size:30px;}
.condo-desc p { font-size:20px; font-family:'db_futhaira_head_xregular';}
.condo-colon { float:left; width:100%;}
.condo-colon .colon-left { width:90px; float:left;}
.condo-colon .colon-right { width:calc(100% - 120px); margin-left:30px; text-indent:-10px; float:left;}

.box-image { float:left; width:100%; margin-bottom:50px;}
.image-list { margin-bottom:30px; cursor:pointer;}
.image-list img { float:left;}

.box-room { float:left; width:100%; margin-bottom:80px; text-align:center;}
.table-head { float:left; width:100%; border-top:1px solid #cecece;border-bottom:1px solid #cecece; padding:10px 0;}
.table-body { float:left; width:100%; padding:10px 0;/* font-family: 'big_caslonmedium';*/}
.table-body:last-child {border-bottom:1px solid #cecece; margin-bottom:30px;}


.box-facility { float:left; width:100%;}
.box-facility .flex img { margin-right:20px;}
.box-facility .col-md-3 { margin-bottom:30px;}

.interest-text { margin-left:auto; margin-right:30px;}
.box-interest a { margin:0 10px;}
.box-interest a:last-child { margin-right:auto;}





/*=============================================*/
/* CONTENT */
/*=============================================*/
.box-content { line-height:1.2;font-family: 'db_futhaira_head_xregular'; letter-spacing:0.3px;}
.box-content h1 { font-size:50px;font-family: 'db_komol_xbold'; }
.box-content h2 { font-size:30px; font-family: 'db_futhaira_head_xmed'; }

.box-content p { margin-bottom:15px;}
.box-content ol { list-style:decimal; margin-left:20px;}
.box-content li { margin-bottom:15px;}
.content-title { float:left; width:100%; position:relative; border-top:1px solid #a6a6a6;border-bottom:1px solid #a6a6a6; text-align:center; margin-bottom:30px;}
.content-list { float:left; width:100%; padding-left:45px; margin-bottom:30px;}
.content-list:last-child { margin-bottom:0px;}
.content-list-title { position:relative; font-size:30px; font-family: 'db_futhaira_head_xmed'; line-height:0.9; margin-bottom:20px;}
.cnt-list { position:absolute; left:-45px; width:32px; height:32px; color:#000; text-align:center; display:flex; align-items:center; display:-webkit-flex; -webkit-align-items:center; background-color:#becdd4; border-radius:100%;font-family: 'db_futhaira_head_xregular'; font-size:24px; top:-2px;}
.cnt-list  p { margin:auto; line-height:1;}
.cnt-nav { position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); cursor:pointer; }
.cnt-nav .cnt-arrow { width:25px; position:absolute;}
.cnt-nav .cnt-arrow svg { width:25px;}
.cnt-prev { left:0px;}
.cnt-prev .cnt-arrow { transform:rotate(-180deg); -webkit-transform:rotate(-180deg); left:0px;}
.cnt-prev .cnt-navtext { padding-left:35px;}
.cnt-next { right:0px;}
.cnt-next span { float:right;}
.cnt-next .cnt-arrow { right:0px;}
.cnt-next .cnt-navtext { padding-right:35px;}
/*=============================================*/
/* CONTENT 1 */
/*=============================================*/
.box-age { float:left; width:calc(100% + 30px);margin: 50px -15px;}
.age-list { float:left; width:100%; text-align:center; color:#a3a3a3; }
.age-list-img { float:left; width:100%; background-color:#becdd4; border-radius:100%; position:relative; margin-bottom:10px;}
.age-list-img img { float:left; width:100%; max-width:100%;border-radius:100%; overflow:hidden; position:relative; }
.age-list-img span { position:absolute; width:calc(100% + 10px); height:calc(100% + 10px); left:-5px; top:-5px; background:url(../img/skin/bg-circle.png) no-repeat center center; background-size:100%; display:none;/*animation:circle infinite linear 3s;*/}
.age-list.active { color:#000;}
.age-list.active .age-list-img span { display:block; }
.swiper-container { padding:0 15px;}
.box-age .swiper-slide { width:110px; padding-top:20px;}
@keyframes circle {
    0%   {transform:rotate(0deg);}
    50%  {transform:rotate(180deg);}
    100% {transform:rotate(360deg);}
}

.targetgroup { display:none;}

.thanks_confirm{font-size:24px;font-family:db_helvethaica_x;text-align:center;color:#01b9b5;background-color:#fff;padding:5px 30px;border-radius:5px;display:inline-block;margin-top:10px;}

@media screen and (max-width: 1199px) {
	/* ----------------- header */
	.container-80 { width:100%;}
}

@media screen and (max-width: 1099px) {
	/* ----------------- header */

}

@media screen and (max-width: 991px) {
	/* ----------------- HOME */
	.box-title h1 { font-size:35px; }
	.condo-icon h2 { font-size:24px;}

	.condo-list .condo-list-detail h1 { font-size:30px;}
	.condo-list .condo-list-detail p { font-size:20px;}
	.col-md-20 {}

	.info-list span img { width:70%;}

	/* ----------------- CONDO */
	.box-interest .flex { display:block;}
	.interest-text { margin-bottom:20px; margin-right:0px;}


	.condo-desc { margin-bottom:20px;}



}

@media screen and (max-width: 767px) {
	/* ----------------- header */


	.box-button a { margin:0px;}
	.box-button a + a { margin-top:10px;}
	.btn { width:100%; margin:0;}

	.box-title { margin-bottom:20px;}
	.box-title h1 { font-size:35px;}
	.box-title p { font-size:20px; margin-top:5px;}

	.section-breadcrumb .flex { display:block;}
	.box-breadcrumb { width:100%; margin-bottom:10px; font-size:15px;}
	.box-scbscripe { width:100%;}
	.btn-subscripe { width:100%; text-align:center;}

	/* ----------------- HOME */
	.col-md-20 { width:33.33333%;}
	.condo-icon { margin-bottom:20px;}
	.condo-icon h2 { font-size:20px;}
	.banner-detail { float:left; width:100%; position:relative; top:0px; left:0px; transform:translate(0,0); -webkit-transform:translate(0,0); width:100%;}

	.info-list span { height:auto; height:200px;}
	.info-list span img { width:auto; max-height:100%;}
	.section-info .col-xs-6:last-child .info-list span { height:140px; margin-bottom:0px; margin-top:30px;  }
	/* ----------------- CONDO */

	.condo-title h1 { font-size:40px;}
	.condo-title h3 { font-size:21px;}
	.condo-intodetail { font-size:21px;}
	.condo-intodetail { margin-bottom:30px;}
	.condo-traffic { float:left; width:100%; text-align:center;}
	.condo-traffic .box-center { float:none; width:auto; display:inline-block;}
	.condo-trafficBy:first-child { margin-left:0px; }
	.condo-viewmap {text-align: center;  width: 100%;}
	.condo-desc h2 { font-size:24px;}

	.box-image .row { margin-left:-8px; margin-right:-8px;}
	.box-image .row { margin-left:-8px; margin-right:-8px;}
	.box-image .col-xs-4,
	.box-image .col-xs-6,
	.box-image .col-xs-12 { padding-left:8px; padding-right:8px;}
	.box-image .image-list { margin-bottom:16px;}

	.table-body { font-size:15px;}

	.box-facility { font-size:18px;}
	.box-facility .flex img { width:40px; margin-right:10px;}


	.box-interest a { margin:0;}
	.box-interest a + a { margin-top:10px;}

	/* ----------------- REGISTER */
	.section-form button { margin-top:10px;}

	/* ----------------- CONDO */
	.box-age { margin:50px -15px; width:calc(100% + 30px); padding:0}
	.swiper-container { padding:0 15px;}

	/* ----------------- CONTENT */
	.img-content-1 { float:left; width:100%; text-align:center;}
	.box-content h1 { font-size:36px;}
	.fix1-text1 { text-align:center;}

	.next-content { margin-top:0px;}
	.prev-content { margin-top:0px;}
	.next-content.f-right { float:none;}
	.prev-content.f-left { float:none;}

	.mobileShow { display:none;}
	.mobileHide { display:none;}
}
@media screen and (max-width: 480px) {

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

}
