@import 'https://fonts.googleapis.com/css?family=Abel|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i';
@import url('https://fonts.googleapis.com/css2?family=Chokokutai&display=swap');
@import url("nanoscroller.css");
@import url("jquery.fullPage.css");

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {-ms-touch-action: none;}
body {padding:0; margin:0; line-height:0; font-family: 'Open Sans', sans-serif; font-family: 'abel'; background-color:rgba(233,233,233,1);  -webkit-text-size-adjust: 100%;}
html,body{ word-spacing: normal; color: #565656;  height: 100%;}
h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover ,a, a.btn, p{color: #dd1a0c; margin:0; padding:0;}
ul,ul li { margin:0; padding:0;}

a {text-decoration:none; cursor:pointer; }
a.btn {font-size:16px; line-height:20px; text-decoration:none; display:inline-block; padding:0 10px 0 0; border-bottom:#fff 1px solid;}
a:hover {text-decoration:underline;}
a:hover.btn{color: #13304e; border-bottom:#13304e 1px solid;text-decoration:none;}
/*a.phone:hover, a.phone:visited, a.phone:link, a.phone:active{text-decoration: none; border:0!important;}*/
a[href^="tel"], a.tel{color:inherit;text-decoration:none;}
blockquote {color: #565656;	text-transform: none;}
h1,h2{ }
h1{	font-size:34px; font-weight:100; line-height:36px; text-transform: uppercase; }
h2{	font-size:24px; font-weight:600;}
h3{	font-size:30px;}
h4{	font-size:24px; font-weight:500; line-height:24px; color:#dd1a0c; text-transform: uppercase; }
h5{	font-size:18px; font-weight:500;}
h6{	font-size:18px; line-height:24px; color:#13304e;}
hr {	opacity:0.6; margin-bottom:20px; z-index:1;}
p {font-size:20px; font-weight:100; line-height:38px; text-align:justify; margin-bottom:20px;}
table{margin:0; border-collapse: collapse; border-spacing: 0;  font-weight:100;}
tr:hover { background:rgba(243,243,243,0.8);}
tr:first-child td {border-top: 1px solid rgba(114,119,125,0.15);}
td,th {border-bottom: 1px solid rgba(114,119,125,0.15); font-size:17px; line-height:22px;  padding: 14px 10px;}
th span, td span {font-size:12px; line-height:12px;}
.fixed_width {width:100%; max-width:1280px; margin:20px auto 0 auto; content: ""; display: table; clear: both; overflow:hidden;}





/* css 3 animation*/
#btn_totop,#btn_totop::after, footer, .slide a.button, .bg_wrapper,.nav li ,.nav_outer,.btn_liveworkplay, .btn_clubhouse, .btn_address , .btn_amenities, .btn_accolades , .teamwrapper .list h3 , #concept .list h3 , #btn_next::after, #btn_prev::after, .concept_wrapper  .btn_close::after { -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
#concept .list div a span, .concept_wrapper, .wrap img, .wrap .intro{-webkit-transition: all 1s ease; transition: all 1s ease;}
.dim_bg, #concept .list div a img , .homewrapper a.concept, .homewrapper .section a.button:after, .concept_wrapper a.button:after{-webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.logo, .logo svg{ -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
#nav_layer ul li a::after, #nav_layer ul li a, .tabs_btn  li a, .tabs_btn  li a::after,.tabs_btn  li.active a::after, .map_logo{-webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.homewrapper ,#mainbg_wrapper, #mainbg, .list a.button   , #content{-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
.homewrapper .section  h1, .homewrapper .section  h2, .homewrapper .section  p, .homewrapper  .section a{-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
#nav_layer {-webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.homewrapper, .homewrapper .section , .homewrapper a.concept,  .homewrapper a.concept::after, .wrap .rslides .overlay_layer{-webkit-transition: all 0.5s ease; transition: all 0.5s ease;}

/*delay setting*/
.homewrapper .section h1 {  -webkit-transition-delay:0.5s; transition-delay:0.5s;-moz-transition-delay: 0.5s;}
.homewrapper .section h2 {  -webkit-transition-delay:0.8s; transition-delay:0.8s;-moz-transition-delay: 0.8s;}
.homewrapper .section p{ -webkit-transition-delay:1.1s; transition-delay:1.1s;-moz-transition-delay: 1.1s;}
.homewrapper .section a{ -webkit-transition-delay:1.4s; transition-delay:1.4s;-moz-transition-delay: 1.4s;}
.homewrapper .section a:hover, .homewrapper .section a:after{-webkit-transition-delay:0s; transition-delay:0s;-moz-transition-delay: 0s;}
/*header----------------------*/
#container > header {width:100%;}
header{height:130px; position:fixed; top:0; left:0; right:0;z-index:22; text-align:center;}
.logo {width:100px; height:115px; display:block; position:fixed; margin-left:-50px; z-index:19;}
.scrolled .logo  { width:90px; height:90px; margin-left:-45px;}
.ele_01, .ele_02, .ele_03, .ele_04, .ele_05 {border:0; position:absolute; width:100%; color:transparent; opacity:1\9; }
.ele_01, .ele_02{top:-12px; left:0; right:0; height:100px;}
.ele_03, .ele_04, .ele_05{top:78px; left:0; right:0; height:37px; }
.scrolled .ele_03, .scrolled .ele_04, .scrolled .ele_05 { display:none; }
.ele_01 { -webkit-animation: logo_effect_one 1s ease forwards; animation: logo_effect_one 1s ease forwards;}
.btn_award { width:280px; position:absolute; left:-1px; top:45px; z-index:20;}
.btn_award .award_pop { width:100%;}
@-webkit-keyframes logo_effect_one {
   0% {opacity:0; transform:rotate(-220deg);}
    100% {opacity:1;transform:rotate(0deg);}
}
@-moz-keyframes logo_effect_one {
    0% { opacity:0; transform:rotate(-220deg);}
    100% {opacity:1;transform:rotate(0deg);}
}
@-o-keyframes logo_effect_one {
     0% {opacity:0;  transform:rotate(-220deg);}
    100% {opacity:1;transform:rotate(0deg);}
}
@keyframes logo_effect_one {
	 0% {opacity:0;  transform:rotate(-220deg);}
    100% {opacity:1;transform:rotate(0deg);}
}
.ele_02 {  -webkit-animation: logo_effect_two 1.5s ease forwards; animation: logo_effect_two 1.5s ease forwards;}
@-webkit-keyframes logo_effect_two {
   0% { opacity:0; transform:scaleX(0.3) scaleY(0.3);}
   20% { opacity:0; transform:scaleX(0.3) scaleY(0.3);}
    100% {opacity:1;transform:scaleX(1) scaleY(1);}
}
@-moz-keyframes logo_effect_two {
    0% { opacity:0; transform:scaleX(0.3) scaleY(0.3);}
	20% { opacity:0; transform:scaleX(0.3) scaleY(0.3);}
    100% {opacity:1;transform:scaleX(1) scaleY(1);}
}
@-o-keyframes logo_effect_two {
    0% { opacity:0; transform:scaleX(0.3) scaleY(0.3);}
	20% { opacity:0; transform:scaleX(0.3) scaleY(0.3);}
    100% {opacity:1;transform:scaleX(1) scaleY(1);}
}
@keyframes logo_effect_two {
	 0% { opacity:0; transform:scaleX(0.3) scaleY(0.3);}
	 20% { opacity:0; transform:scaleX(0.3) scaleY(0.3);}
    100% {opacity:1;transform:scaleX(1) scaleY(1);}
}
.ele_03{ -webkit-animation: logo_effect_others 1.1s ease-in-out forwards ; animation: logo_effect_others 1.1s ease-in-out forwards;}
.ele_04{ -webkit-animation: logo_effect_others 1.3s ease-in-out forwards ; animation: logo_effect_others 1.3s ease-in-out forwards;}
.ele_05{ -webkit-animation: logo_effect_others 1.5s ease-in-out forwards ; animation: logo_effect_others 1.5s ease-in-out forwards ;}
@-webkit-keyframes logo_effect_others {
	0% { opacity:0; margin-top:10px;}
	50% { opacity:0; margin-top:10px;}
	100% {opacity:1;margin-top:0;}
}
@-moz-keyframes logo_effect_others {
	0% { opacity:0; margin-top:10px;}
	50% {opacity:0;  margin-top:10px;}
	100% {opacity:1;margin-top:0;}
}
@-o-keyframes logo_effect_others {
	0% { opacity:0; margin-top:10px;}
	50% {opacity:0;  margin-top:10px;}
	100% {opacity:1;margin-top:0;}
}
@keyframes logo_effect_others {
	0% { opacity:0; margin-top:10px;}
	50% {opacity:0;  margin-top:10px;}
	100% {opacity:1;margin-top:0;}
}

.logo_wrapper{margin:15px auto 1px auto; text-align:center;  display:inline-block; }
.logo_wrapper { -moz-animation: animatedlogo 1s ease-in;-webkit-animation: animatedlogo 1s ease-in; -o-animation: animatedlogo 1s ease-in; animation: animatedlogo 1s ease-in;}
@-webkit-keyframes animatedlogo {0% {opacity:0;}100% {opacity:1; }}
@keyframes animatedlogo {0% {opacity:0;}100% {opacity:1; }}
/*logo bg*/
.bg_wrapper {background:transparent; height:20px; position:fixed; z-index:19; top:0; right:0; left:0; width:100%;}
.scrolled .bg_wrapper {height:100px; background: rgba(233,233,233,0.95); box-shadow: 7px 7px 20px 7px rgba(0,0,0,0.05);}
.push-body-toleft .scrolled .bg_wrapper {background:transparent;}


.nav_outer { position:fixed; display:block; z-index:13; right:20px; top:25px; height:60px;}
.nav  { width:auto; }
.nav ul {display:inline-block; list-style:none;}
.nav li{ border-left:1px solid rgba(166,128,68,0.4);  display:inline-block; float:left; text-align:center; color:#dd1a0c; padding:0px 20px 0px 10px; margin:10px 0px 10px 0px; position:relative;}
.nav li:first-child{border-left:0;}
.nav li a {font-size:20px; color:#dd1a0c; text-decoration:none;  font-family: 'abel'; font-weight:400; line-height:30px; text-transform: uppercase; display:inline-block; background:transparent; background-size:30px 30px; padding-left:30px; padding-right:0;padding-top:0px; background-position:left center; background-repeat:no-repeat;}
.nav li:hover a{}
.nav li:hover {margin-top:6px;}
.nav .home{background-image:url(../images/icon_home.svg); }
.nav a.menu{ font-size:20px; text-align:center; z-index:18;font-weight:400;}
.nav .contact{background-image:url(../images/icon_contact.svg);}
/* Nav nav_trigger */
#nav_trigger {position: absolute; margin:0; width:100%; right:0; left:10px; top:10px; height:50px; z-index:12; opacity:0;}
label[for="nav_trigger"] { position: absolute; right:0; left:10px; top:50%; margin-top:-25px; width:100%; height:50px; z-index: 19; cursor: pointer; background-size:27px 27px; background-image:url(../images/icon_menu.svg); background-position:center left;background-repeat: no-repeat; }
#nav_trigger + label, #nav_layer {}
#nav_trigger:checked + label { background-image:url(../images/icon_close.svg) ;}
#nav_layer{ position:fixed; height:0; top:0; bottom:100vh; right:0; left:0; background-color:rgba(216,231,231,1); opacity:0.6; overflow:hidden; color:#fff; font-family: 'abel'; }
#nav_layer .nav_wrapper {margin:calc(50vh - 250px) auto 0px auto; padding-top:0px; display:inline-block; }
#nav_layer ul, #nav_layer ul li { margin:0; padding:0; border:0;  text-align:left;}
#nav_layer ul{ list-style:none;float:left; width:370px;  margin:0 15px;margin-bottom:30px;}
#nav_layer ul:first-child{margin:0 30px 30px 0 ;}
#nav_layer ul{margin:0  0 30px 30px;}
#nav_layer ul li { margin:45px 0 0 0; width:100%; display:block; }
#nav_layer ul li a, #nav_layer ul li a span.blev{ display:inline-block; font-size:38px; width:auto; height:auto; line-height:30px; padding-left:0; z-index:14; position:relative; text-transform: uppercase;}
#nav_trigger:checked ~ #nav_layer .nav_bg { position:fixed;top:0; bottom:0; right:0; left:0; opacity:0.06;
 background-image:url(../images/nav_img_wave.svg);  -webkit-background-size: cover; -moz-background-size: cover;-o-background-size: cover;background-size: cover;  background-position:center center; background-repeat:no-repeat;
}
#nav_trigger:checked ~ #nav_layer .nav_bg  div{opacity:0; position:fixed; z-index:13; top:0; bottom:0; right:0; left:0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;background-size: cover; background-position:center center; background-repeat:no-repeat; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; background-color:rgba(216,231,231,1);}
#nav_trigger:checked ~ #nav_layer .nav_bg  div.none ,#nav_trigger:checked ~ #nav_layer .nav_bg  div.none.show {background:transparent; opacity:0;}
#nav_trigger:checked ~ #nav_layer .nav_bg  div.show {opacity:1;}


/*#nav_trigger:checked ~ #nav_layer:hover div { top:-80px; opacity:0.1;}*/
#nav_layer ul li span, #nav_layer ul li a  span {display:inline-block; font-size:20px; line-height:20px; text-transform:capitalize; opacity:0.7; }
#nav_layer ul li a span.blev{display:block; opacity:1;}
#nav_layer ul li>span {margin:0 8px;}
#nav_layer ul li ,#nav_layer ul li a ,#nav_layer ul li span, #nav_layer ul li a span   { color:#dd1a0c;}
#nav_layer ul li  a.icon_concept {position:absolute; top:0; right:0; width:30px; height:30px; border:1px solid rgba(166,128,68,0.1); background:url(../images/icon_moreconcept.svg) 50% 50% no-repeat rgba(255,255,255,0.2); background-size:80% 80%; border-radius:50% 50%;}
#nav_layer ul li a:hover{opacity:0.8;}
#nav_layer ul li a::after{width:0;height:1px; background:#dd1a0c; position:absolute; left:0px; bottom:-10px;  content: ""; }
#nav_layer ul li a:hover::after, #nav_layer ul li a.active::after{width:100%;}
#nav_layer ul li a.active , #nav_layer ul li a.active span{color:rgba(166,128,68,0.6);}
#nav_layer ul li a.active::after{background:rgba(166,128,68,0.6);}
#nav_layer ul li ul  {margin-bottom:10px; margin-top:10px; padding-left:10px;}
#nav_trigger:checked ~ #nav_layer {opacity:1; height:auto; bottom:0; z-index:13;}

/*for home page only*/
.homewrapper .nav li{ color:#fff; border-left:1px solid #c51b0f;}
.homewrapper .nav li:first-child{border-left:0;}
.homewrapper .nav li a {color:#fff; }
.homewrapper .nav .home{background-image:url(../images/icon_home_white.svg); }
.homewrapper .nav .contact{background-image:url(../images/icon_contact_white.svg); }
.homewrapper label[for="nav_trigger"]{ background-image:url(../images/icon_menu_white.svg);}
.homewrapper .logo { width:100px;height:115px; margin-left:-50px;}
.homewrapper footer {padding-top:10px; position:fixed; bottom:0; left:0; right:0; z-index:12; background:transparent;}
.homewrapper footer ul li, .homewrapper footer ul li a{color:rgba(255,255,255,0.6);}
.nav_outer{animation-name: home_effect; animation-duration: 1.5s;}
@-webkit-keyframes home_effect {
    0% {opacity:0; margin-right:-30px; margin-left:-30px;}
    100% {opacity:1; margin-right:0; margin-left:0;}
}
@-moz-keyframes home_effect {
    0% {opacity:0; margin-right:-30px; margin-left:-30px;}
    100% {opacity:1; margin-right:0; margin-left:0;}
}
@-o-keyframes home_effect {
    0% {opacity:0; margin-right:-30px; margin-left:-30px;}
    100% {opacity:1; margin-right:0; margin-left:0;}
}
@keyframes home_effect {
    0% {opacity:0; margin-right:-30px; margin-left:-30px;}
    100% {opacity:1; margin-right:0; margin-left:0;}
}



.homewrapper footer {padding-top:60px; position:absolute; bottom:0; left:0; right:0; z-index:12;
	background: rgba(0,0,0,0);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.45)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}


.homewrapper .section{background-size: cover; background-attachment: fixed; }
.homewrapper .section.active { opacity:1;}
.homewrapper .section.active.enlarge {opacity:0.8; padding-left:20px; }
.homewrapper .section.mission-vision{background-image:url(../images/mission-vision.png); background-repeat: no-repeat; background-size: cover; background-position: bottom;}
.homewrapper .section.about{background-image:url(../images/bg-index-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: bottom;}
.homewrapper .section.founder{background-image:url(../images/bg-index-3.gif); background-repeat: no-repeat; background-size: cover; background-position: bottom;}
.homewrapper .section.services{background-image:url(../images/bg-index-4.png); background-repeat: no-repeat; background-size: cover; background-position: bottom;}
.homewrapper .section.experience{background-image:url(../images/bg-index-5.jpg); background-repeat: no-repeat; background-size: cover; background-position: bottom;}
.homewrapper .section.technologies{background-image:url(../images/bg-index-6.png); background-repeat: no-repeat; background-size: cover; background-position: bottom;}
.homewrapper .section.start{background-image:url(../images/bg-index-1.jpg); background-repeat: no-repeat; background-size: cover; background-position: bottom;}
.homewrapper .section.advantage{background-image:url(../images/bg-index-4.png); background-repeat: no-repeat; background-size: cover; background-position: bottom;}
.homewrapper .section.thanks{background-image:url(../images/bg-index-4.png); background-repeat: no-repeat; background-size: cover; background-position: bottom;}

.homewrapper .fixed_width { position:relative; z-index:3; padding-bottom:20px;}
/* .homewrapper .section {background-size:cover; background-position:center center; background-repeat:no-repeat; background-image:url(../images/index_bg.jpg); } */
.homewrapper .section  h1{font-size:110px; line-height:95px; letter-spacing:-5px; }
.homewrapper .section  h2{font-size:45px; font-weight:100; line-height:45px; text-transform:capitalize; margin-bottom:15px;}
.homewrapper .section  p { width:100%; max-width:50%; position:relative; z-index:13;  }
.homewrapper .section  p, .homewrapper .section blockquote { font-size:22px; font-weight:400; line-height:38px; margin:0; }
.homewrapper .section.about  p , .homewrapper .section blockquote { width:100%; max-width:65%; position:relative; font-size:24px; font-weight:400; line-height:38px; font-family: 'abel'; }
.homewrapper .section.about  h1, .homewrapper .section.about  h2, .homewrapper .section.about p, .homewrapper .section blockquote, .homewrapper .section blockquote:before, .homewrapper .section span{ color:red; color: #dd1a0c;}
.homewrapper .section a.button{border:1px solid rgba(255,255,255,0.2); position:relative; color:rgba(255,255,255,0.95); text-decoration:none; overflow:hidden; font-size: 18px; line-height:20px; border-radius:5px 5px 5px 5px; padding:5px 45px 6px 20px; margin-top:20px; display:inline-block; box-shadow : 0px 0px 7px rgba(0,0,0,0.3);  background-image:url(../images/btn_arrow.svg);  background-size:20px 20px; background-position: 95% 49%;  background-repeat:no-repeat;}
.homewrapper .section a.button:hover{background-position: 100% 49%;}
.homewrapper .section a.button:after { position:absolute; content:''; top:0; left:0; right:100%;bottom:0; z-index:0; background: rgba(255,255,255,0);}
.homewrapper .section a.button:hover:after {  background: rgba(255,255,255,0.3); right:0; width:auto;}
.homewrapper .section.about p, .homewrapper .section blockquote p {font-weight:400;}
.homewrapper .section blockquote{quotes: "\201C""\201D""\2018""\2019";  display:inline-block; }
.homewrapper .section blockquote:before,.homewrapper .section blockquote:after  {color: rgba(198,169,111,0.3); font-weight:100; font-size: 4em;line-height: 0.1em; vertical-align: -0.4em;}
.homewrapper .section blockquote:before { content: open-quote; }
.homewrapper .section blockquote:after {content: close-quote; }
.homewrapper .section span {font-size:17px; font-style: italic; margin-left:20px; margin-top:15px;display:block; }
.homewrapper .section blockquote p {display: inline; }
.fadingbox {position:relative; z-index:20;min-height:150px;}
/* .homewrapper .bgimg_2{ position:absolute; top:0; bottom:0; right:0; left:0; z-index:1; background-size: cover; background-attachment:fixed; background-position: center center; background-image:url(../images/index_bg_01b.jpg); opacity:0;} */
.swapt{ opacity:0; position:absolute; z-index:20; margin-left:10px;-webkit-transition: all 1s ease; transition: all 1s ease;}
.bgimg_2{ -webkit-transition: all 3s ease; transition: all 3s ease;}

.swapt.show , .homewrapper .bgimg_2.show{ opacity:1; margin-left:0;}
.homewrapper .section  h1, .homewrapper .section  h2, .homewrapper .section p , .homewrapper .section a.button{color:rgba(255,255,255,1); font-family: 'abel'; opacity:0; margin-left:40px; text-shadow: 0px 0px 7px rgba(0,0,0,0.3);}
.homewrapper .section.active  h1, .homewrapper .section.active  h2, .homewrapper .section.active p,.homewrapper .section.active  blockquote,  .homewrapper .section.active a.button{opacity:1;  margin-left:7px;}
.homewrapper .section.active  h1{  margin-left:0px;}

#hh1{ margin-left: 2em; }
#hh2{ margin-left: 4em; }
#hhp{ margin-left: 8em; }


/*concept*/
.homewrapper a.concept{ position:fixed; z-index:13; bottom:60px; width:50px; height:50px; margin-left:-35px; left:50%; padding:4px 15px 4px 10px; text-align:right; text-decoration: none; text-transform: uppercase; font-family: 'abel'; font-size:22px; line-height:36px; font-weight:500; color:rgba(216,240,240,1); border-radius:30px 30px; border:2px solid rgba(216,240,240,0.8); overflow:hidden; }
.homewrapper a.concept span { background:url(../images/icon_plus.svg) center center no-repeat ; background-size:100% 100%; width:40px; height:40px; margin:0px; margin:-1px 0 0 -7px; display:block; float:left; }
.homewrapper a.concept span{  -moz-animation: concept_effect 3s infinite ease;-webkit-animation: concept_effect 3s infinite ease; -o-animation: concept_effect 3s infinite ease; animation: concept_effect 3s infinite ease;}
@-webkit-keyframes concept_effect {
    0% { background-position: 50% 40px;}
    20% { background-position: 50% 50%;}
    80% { background-position: 50% 50%;}
    100% { background-position: 50% -40px;}
}
@-moz-keyframes concept_effect {
     0% { background-position: 50% 40px;}
    20% { background-position: 50% 50%;}
    80% { background-position: 50% 50%;}
    100% { background-position: 50% -40px;}
}
@-o-keyframes concept_effect {
     0% { background-position: 50% 40px;}
    20% { background-position: 50% 50%;}
    80% { background-position: 50% 50%;}
    100% { background-position: 50% -40px;}
}
@keyframes concept_effect {
     0% { background-position: 50% 40px;}
    20% { background-position: 50% 50%;}
    80% { background-position: 50% 50%;}
    100% { background-position: 50% -40px;}
}
.homewrapper a.concept:hover{ width:300px; margin-left:-150px; padding:4px 30px 4px 25px; border-color:rgba(166,128,68,0.85); border-radius:30px 30px;}
.homewrapper a.concept::after{width:100%; height:100%; top:0; bottom:0;left:0; opacity:0.7;  position:absolute;background:rgba(60,60,60,0.2); content: ""; z-index:-1;}
.homewrapper a.concept:hover::after { width:100%; left:0; right:0;  opacity:1; background:rgba(166,128,68,0.85);}
.concept_wrapper { z-index: 19; position:fixed; right: 20px; bottom:-100vh; left: 20px; height:auto; opacity:0;text-align:center; background:url(../images/pattern_wave.svg)  bottom center  no-repeat rgba(216,231,231,0.97); background-size:2000px 1000px; }

.concept_wrapper a.button{border:1px solid #dd1a0c; position:relative; color:#dd1a0c; text-decoration:none; overflow:hidden; font-size: 22px; line-height:36px; border-radius:30px 30px; padding:5px 45px 6px 20px; margin-top:20px; display:inline-block;  background-image:url(../images/btn_arrow_w.svg);  background-size:20px 20px; background-position: 95% 49%;  background-repeat:no-repeat;}
.concept_wrapper a.button:hover{background-position: 96% 49%;}
.concept_wrapper a.button:after { position:absolute; content:''; top:0; left:0; right:100%;bottom:0; z-index:0; background: rgba(255,2255,255,0.5);}
.concept_wrapper a.button:hover:after {  background: rgba(255,2255,255,0.2); right:0; width:auto;}

.conceptshow .concept_wrapper {opacity:1; bottom:20px; height:auto; z-index: 19;}
.conceptshow .homewrapper .section {opacity:0.4;}
.concept_wrapper  .btn_close { width:50px; height:50px; display:inline-block; position:relative; margin:0px auto 30px auto; cursor: pointer; background:url(../images/icon_close.svg) 50% 50% no-repeat; background-size:27px 27px; }
.concept_wrapper  .btn_close::after{content:''; width:0; height:1px; position:absolute; left:0; bottom:0; background:#dd1a0c;}
.concept_wrapper  .btn_close:hover::after{width:100%;}
#concept{margin:40px auto 40px auto; width:100%; max-width:840px; text-align:center; font-family: 'abel';}
#concept  h1, #concept  p{ color:#dd1a0c;}
#concept  h1{font-size: 42px;line-height:40px; letter-spacing:-2px; padding-top:20px; padding-bottom:20px; font-weight: 300;text-transform: uppercase; }
#concept  p {width:100%; font-size:20px; line-height:36px; text-align: justify; margin-bottom: 10px; font-weight: 100;}
#concept  p.center { text-align:center;}
#concept  h1:focus {outline:0;}


/*common style*/


.nowrap {white-space: nowrap;}
 #mainbg, .home {-moz-animation: bg_effect 1.2s forwards ease; -webkit-animation: bg_effect 1.2s forwards ease; -o-animation: bg_effect 1.2s forwards ease; animation: bg_effect 1.2s forwards ease ;}
 @-webkit-keyframes bg_effect {
    0% { transform:scale(1.06,1.06); }
    100% { transform:scale(1,1);}
}
@-moz-keyframes btnmore_effect {
	 0% { transform:scale(1.06,1.06); }
    100% { transform:scale(1,1);}
}
@-o-keyframes btnmore_effect {
    0% { transform:scale(1.06,1.06); }
    100% { transform:scale(1,1);}
}
@keyframes btnmore_effect {
    0% { transform:scale(1.06,1.06); }
    100% { transform:scale(1,1);}
}


#content_wrapper { z-index: 10; position:fixed; display:block; top:0; bottom:0; left:0; bottom:0;}
#content { z-index:18;-webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin-bottom:-3px;}
#mainbg_wrapper{position: fixed; width: 100%; top: 0;left: 0;bottom: 0; overflow: hidden; z-index:10; }
#mainbg	, #swap_bg{background:url() 50% 50% no-repeat fixed ; background-size:cover; z-index:10;position: absolute; width:100%; height:100%; min-height:1000px; min-height:100vh; }
#swap_bg { opacity:0;}
#swap_bg.show {opacity:1;}
#mainbg_wrapper { animation-name: load_effect;animation-duration: 1.5s;}
@-webkit-keyframes load_effect {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes load_effect {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-o-keyframes load_effect {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes load_effect {
    0% {opacity:0;}
    100% {opacity:1;}
}

#content .patternwrap{ padding-top:150px; padding-bottom:30px;  z-index:13; text-align:left; min-height:calc( 100vh - 60px);}
/*for page like team width no minheight title area and text align left */
#content .patternwrap.nopad {min-height:0;}
#content .patternwrap.nopad .section_title {text-align:left;}
#content .patternwrap p {font-weight:400; font-size:18px; line-height:36px;}
#content .patternwrap .section_title, #content .patternwrap .intro{margin-top:40px;} 
#content .section_title {width:310px; margin-right:30px; text-align:right;}
#content .section_title, #content .intro  { float:left;}
#content .intro {width:100%; max-width:635px; margin-top:-2px;}
#content .section_title.nonfloat , .nonfloat .intro{width:100%; float:none; margin-right:0; text-align:left;}
.nonfloat .intro h1, .nonfloat .intro h2{ text-align:left;}
#content .section_title h2, .nonfloat h2{ font-size:26px; line-height:28px; font-weight:600; color:rgba(112,184,201,1);}
#content .main_section .intro h3 { font-size:38px; line-height:38px; font-weight:100; color:#dd1a0c; text-transform: uppercase;}
#content .intro h1 , .nonfloat h2{ font-size:50px; line-height:48px; margin-bottom:20px; text-transform: uppercase;}
#content .intro h3 { font-size:24px; line-height:24px; margin-bottom:20px; }
#content a {margin-bottom:20px;}
#content .main_section {width:100%; font-family: 'abel';  padding-top:190px; padding-bottom:30px; margin-bottom:700px; margin-bottom:100vh; background-position:center center; background-repeat:no-repeat; background-color:rgba(233,233,233,1); background-size:cover; text-align:left; }
#content .main_section p , .wrap .intro p{ font-size:20px; line-height:36px; font-family: 'abel';  }
#content .main_section ul {list-style:disc inside; display:inline-block; margin:0; padding:0;}
#content .main_section ul li { font-size:20px; font-weight:300; line-height:30px; width:50%; float:left; }
#title_wrapper { position:relative; z-index:2;}
#content .main_section img{text-align:center; width:100%; max-width:1280px; margin:30px auto;}
#content .main_section.components img{ max-width:850px; }
#content .intro h1  , #content .intro p, .wrap .intro p, #content  ul{color:#dd1a0c;}
#content .intro h3{color:rgba(112,184,201,1); font-weight:500;}
.wrap {background:rgba(233,233,233,0.99);  padding-top:110px; padding-bottom:150px;  z-index:13; text-align:left; }
.wrap h1, .wrap h2 { color:#dd1a0c;}
.wrap h1{font-size:36px; line-height:40px; font-weight:100;  text-transform: uppercase; margin-bottom:20px;}
.wrap h2{font-size:30px; line-height:35px; color:rgba(19,48,78,0.9); font-weight:600; margin-bottom:20px;}
.wrap h3{font-size:24px; line-height:28px; font-weight:600; margin-bottom:5px; margin-top:20px;}
.wrap img {width:100%; max-width:1280px; margin:30px auto; }
.wrap img, .wrap .intro{margin-top:20px; opacity:0;}
.wrap img.fadein , .wrap .intro.fadein{opacity:1; }
.wrap p{width:100%;  margin-bottom:15px; }
.wrap .award_img  {width:100%; text-align:center; }
.wrap .award_img img {max-width:800px; }
#content .wrap .intro {width:100%; max-width:800px; text-align:center; margin:20px auto; display:block; float:none;}
#content .wrap .intro  p, #content .wrap .intro  h1, #content .wrap .intro  h3 {width:100%; max-width:800px; }

/*slider style*/
.rslides {position: relative;list-style: none;overflow: hidden;width: 100%;padding: 0;margin: 0;}
.rslides li {-webkit-backface-visibility: hidden;position: absolute;display: none;width: 100%;left: 0;top: 0;}
.rslides li:first-child {position: relative;display: block;float: left;}
.rslides img {display: block;height: auto;float: left;width: 100%;border: 0;}



/*scroll bar style*/
.iScrollVerticalScrollbar { position: absolute; z-index: 20; width: 16px; bottom: 12px; top: 12px; right: 2px; overflow: hidden;}  
.iScrollVerticalScrollbar.iScrollBothScrollbars { bottom: 18px;}
.iScrollIndicator { position: absolute;  z-index: 20; background: rgba(0,0,0,0.3); border-radius: 0px; width:6px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}

/*btn_style*/
.btn_liveworkplay, .btn_clubhouse, .btn_address , .btn_amenities, .btn_accolades {width:160px; height:160px; display:block;  padding:40px 12px; font-size:26px; line-height:30px;  vertical-align:middle; position:absolute; background: rgba(166,128,68,0.9);  top:100vh; left:50%; margin-left:-80px; margin-top:-210px; border-radius:50% 50%; font-family: 'abel';  letter-spacing:-1px; text-align:center; color:rgba(255,255,255,1); box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.3);
}
 
.btn_amenities, .btn_address { font-size:26px; line-height:26px; padding-top:28px;}
.btn_clubhouse, .btn_accolades {padding-top:60px;} 
.btn_liveworkplay span, .btn_clubhouse span , .btn_address span , .btn_amenities span , .btn_address span, .btn_accolades span{font-size:13px; line-height:15px; letter-spacing:0; display:block; position:absolute; left:50%; width:60px; margin-left:-30px; bottom:30px;}
.btn_liveworkplay:hover , .btn_clubhouse:hover, .btn_address:hover, .btn_amenities:hover, .btn_address:hover, .btn_accolades:hover {background-color:rgba(166,128,68,0.7);   text-decoration:none; transform:scale(1.1,1.1); background-size:25% 25%;}
.btn_liveworkplay::after, .btn_clubhouse::after, .btn_address::after , .btn_amenities::after, .btn_accolades::after {
position:absolute; left:50%; width:30px; height:30px; margin-left:-15px; bottom:0; content:''; background:url(../images/icon_arrowdown.svg) center center no-repeat; background-size:150% 150%; 
-moz-animation: btnmore_effect 1s infinite ease; -webkit-animation: btnmore_effect 1s infinite ease; -o-animation: btnmore_effect 1s infinite ease; animation: btnmore_effect 1s infinite ease ;
 }
@-webkit-keyframes btnmore_effect {
    0% { bottom:10px; opacity:0; }
	80% {  bottom:0; opacity:0.8;}
    100% {  bottom:0; opacity:0.8;}
}
@-moz-keyframes btnmore_effect {
	0% { bottom:10px; opacity:0; }
    80% {  bottom:0; opacity:0.8;}
    100% {  bottom:0; opacity:0.8;}
}
@-o-keyframes btnmore_effect {
    0% { bottom:10px; opacity:0; }
    80% {  bottom:0; opacity:0.8;}
    100% {  bottom:0; opacity:0.8;}
}
@keyframes btnmore_effect {
    0% { bottom:10px; opacity:0; }
    80% {  bottom:0; opacity:0.8;}
    100% {  bottom:0; opacity:0.8;}
}

#btn_next, #btn_prev{ position: fixed;top: 50%;margin-top: -20px;outline: 0; width: 50px; height: 50px;z-index: 65;text-indent: -9999px; }
#btn_next{background: url(../images/icon_next_white.svg) no-repeat 50% 50%; right:50px; background-size:200% 200%;}
#btn_prev{background: url(../images/icon_prev_white.svg) no-repeat 50% 50%; left:50px; background-size:200% 200%;}
#btn_next a, #btn_prev a { position: absolute;top:0;left:0; bottom:0;right:0;}
#btn_next::after, #btn_prev::after {content:''; width:0; height:1px; position:absolute; left:0; bottom:0; background:rgba(233,233,233,1);}
#btn_next:hover::after, #btn_prev:hover::after{width:100%;}

/*PAGE contact*/
ul.contact_list li {width:48%; margin:0px 2% 0px 0px; padding:20px 0; float:left; list-style:none; border-top:1px solid rgba(0,0,0,0);}
ul.contact_list li  h4 {margin-bottom:5px;}
#content ul.contact_list li p {font-size:18px; line-height:30px; text-align:left;}
ul.contact_list li span {padding-left:30px; }
.btn_tel,.btn_fb,.btn_email{  background-position:left center; background-size:20px 20px; background-repeat: no-repeat;}
.btn_tel{background-image:url(../images/icon_tel.svg);}
.btn_fb{background-image:url(../images/icon_fb.svg);}

/*PAGE location*/
.map_wrapper { position:relative; display:block; margin:60px auto 20px auto;}
.wrap .map_wrapper img, .map_logo {padding:0; margin:0;}
.map_logo {position:absolute; z-index:3; top:45%; left:67%; background:url(../images/logo_white.svg) no-repeat 50% 50%; opacity:1;}
.map_logo {width:87px; height:100px; margin-top:-50px; margin-left:-44px; }
.map_logo::before{position:absolute; z-index:0;  left:50%; top:30%; width:10px; height:10px; margin-top:-5px; margin-left:-5px; background:rgba(255,255,255,1); content:''; border-radius:50% 50%;
-moz-animation: maplogo_effect 3s infinite ease; -webkit-animation: maplogo_effect 3s infinite ease; -o-animation: maplogo_effect 3s infinite ease; animation: maplogo_effect 3s infinite ease ; }
@-webkit-keyframes maplogo_effect {
    0% { transform:scale(1);  opacity:0.2; }
    100% { transform:scale(20); opacity:0;}
}
@-moz-keyframes maplogo_effect {
	 0% { transform:scale(1); opacity:0.2; }
    100% { transform:scale(20); opacity:0; }
}
@-o-keyframes maplogo_effect {
   0% { transform:scale(1); opacity:0.2; }
    100% { transform:scale(20); opacity:0; }
}
@keyframes maplogo_effect {
    0% { transform:scale(1); opacity:0.2; }
    100% { transform:scale(20); opacity:0; }
}

/* side wrapper setting */
.rslides {margin: 0 auto; }
.rslides li {display:block;}
.rslides_container { position: relative;float: left;width: 100%;}
.wrap .rslides img {margin:0; z-index:1; position:relative; }
.wrap .rslides .fixed_width { padding:20px; margin:15px auto; max-width:800px; text-align:left; overflow:visible;}

.slideritem_nav {z-index: 3;position: absolute; top: 50%;left: 0px;opacity: 1;text-indent: -9999px;overflow: hidden;text-decoration: none;height: 80px;width: 80px;background:url(../images/icon_prev_white.svg) 50% 50% no-repeat; background-size:120% 120%; margin-top: -40px;}
.slideritem_nav.next {left: auto; background:url(../images/icon_next_white.svg) 50% 50% no-repeat;background-size:120% 120%; right: 0px;}
.slideritem_nav:focus {outline: none;}
.wrap .rslides .overlay_layer{opacity:0;bottom:-40px;}
.wrap .rslides .slideritem1_on .overlay_layer{opacity:1;bottom:0;}

/*comfort section*/
.wrap .rslides .overlay_layer { left:0; right:0;  z-index:2; position:absolute; width:100%; max-width:100%; background:rgba(216,231,231,0.85);}
.wrap .rslides .overlay_layer img {float:right; margin-left:30px; width:100%; max-width:450px; margin-top:-100px; box-shadow:0px 0px 20px rgba(0,0,0,0.2);}
.wrap .rslides .overlay_layer h1, .wrap .rslides .overlay_layer  p {color:#dd1a0c;}
.wrap .rslides .fixed_width h1 {margin-bottom:10px;}
.wrap .rslides .overlay_layer  p {line-height:32px; text-align:left;}

/*awards section*/
.wrap .rslides .award_cont { max-width:1000px;}
.wrap .rslides .overlay_layer img.award {float:left; margin-left:-20px; margin-right:30px; width:100%; max-width:214px; margin-top:-315px; box-shadow:0px 0px 20px rgba(0,0,0,0.2);}
.wrap .rslides .award_cont img { margin-top:-80px; max-width:545px; }
.wrap .rslides .fixed_width  span.award_txt { font-size:24px; position:relative; top:-105px;}
.wrap .rslides .fixed_width  span.award_no { font-size:180px; line-height:30px;}
.wrap .rslides .fixed_width  span.award_txt2 { font-size:42px;  font-weight:100;  text-transform: uppercase; margin-left:15px; line-height:50px;}



.align_center {text-align:center; }
#shortcut { position:absolute; margin-top:-130px;}
.section_space{height:100px;}




@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome */
.fixed_width {display: table; }
/* Safari only override */
::i-block-chrome, .fixed_width {display: block; }
}


@media screen and (max-width: 1380px) {
/*home*/
.homewrapper .section p , .homewrapper .section h1, .homewrapper .section h2{ max-width:50%; }
.homewrapper .section h2{font-size:30px; font-weight:100; line-height:30px; }
.homewrapper .section h1{font-size:90px; line-height:90px; letter-spacing:-2px; margin-left:-5px;}
.homewrapper .section p , .homewrapper .section blockquote, .homewrapper .section.about  p   {font-size:20px;}

#hh1{  margin-left:2em;}
#hh2{ opacity:1;  margin-left:2.5em; }
#hhp{  margin-left: 4em;}
}


@media screen and (max-width: 1280px) {
.btn_award { width:240px; top:50px;}
/*home*/
.homewrapper footer {padding-top:30px; }

/*common style*/
.homewrapper .section blockquote,.homewrapper .section  p, .homewrapper .section.about  p  , #concept p{font-size:18px;line-height:30px;}
.homewrapper .section span  {font-size:14px;line-height:18px; margin-top:5px;}
h5 {padding-bottom:20px;}
footer{padding:10px 0;}
.fixed_width {padding:0px 0px; width:calc(100% - 80px);}
#nav_layer .nav_wrapper {padding-top:0px; }
#content .section_title {width:auto; text-align:left; margin-bottom:20px;}
#content .nopad .section_title{margin-bottom:0;}


#content .intro{max-width:100%;}
.patternwrap .intro{margin-top:10px;} 
.patternwrap .section_title h2 {margin-bottom:0;}

ul.contact_list li {width:31%;}
.map_logo {width:70px; height:80px; margin-top:-40px; margin-left:-35px; }
.section_space{height:80px;}



}


@media (max-width: 1150px) {
.nav  li  {padding:0px 15px 0px 15px;}
.nav  li a.menu, .nav  li a  {font-size:16px;}
label[for="nav_trigger"] {left:15px;}
.wrap .rslides .overlay_layer img.award {max-width:190px; margin-top:-240px;}
.wrap .rslides .award_cont img {  max-width:450px; }
}

@media screen and (max-width: 1280px) , screen and (max-height: 800px){
.btn_liveworkplay, .btn_clubhouse, .btn_address , .btn_amenities, .btn_accolades {top:-90vh; margin-top:250px; position:relative;}

}

@media (max-width: 800px) {
.btn_award { width:200px; top:40px;}
.nav  li a.menu, .nav  li a  {font-size:0; width:30px; height:30px;}
}


@media (max-width: 960px) {
/*home */
.homewrapper .section p , .homewrapper .section h1, .homewrapper .section h2{  max-width:55%; }
.homewrapper .section blockquote,.homewrapper .section  p, .homewrapper .section.about  p  , #concept p{font-size:16px;line-height:28px;  }
/*common style*/
header{height:100px;}
#mainbg { min-height:auto;}
#nav_layer  .fixed_width {padding:0;}
#nav_layer .nav_wrapper {margin:180px auto 0px auto; padding-top:0px; display:inline-block; }
#nav_layer ul{ width:330px;}
#nav_layer ul li{ margin-top:40px; }
#nav_layer ul li a, #nav_layer ul li a span.blev{ font-size:32px; line-height:24px; padding:0;}
#nav_layer ul li a span, #nav_layer ul li span{font-size:19px; line-height:19px; padding:0; }

.wrap .fp-auto-height  .slide {min-height:500px;}
.wrap .slide .fixed_width ul li , .overlay_layer_horizontal .fixed_width ul li{width:50%;}

.map_logo {width:52px; height:60px; margin-top:-30px; margin-left:-26px; }
/*PAGE team*/
.teamwrapper .list div img { max-width:100%; margin:0 0 20px 20px;}
/*PAGE contact*/
ul.contact_list li { width:48%; margin:0px 2% 0px 0px; }
/*PAGE slider*/
.wrap .rslides .overlay_layer img { max-width:420px;}

.wrap .rslides .overlay_layer img.award {max-width:160px; margin-top:-240px;}
.wrap .rslides .award_cont img {  max-width:380px; }

#hhp{  margin-left: 7em;}

}

@media (max-width: 800px) {

/*home */
.homewrapper .section p , .homewrapper .section h1, .homewrapper .section h2 { max-width:50%;  padding:0;}
.homewrapper .section blockquote { max-width:70%;  padding:0;}
.homewrapper .section  h1{font-size:60px; letter-spacing:0; line-height:60px; margin-left:-2px;}
.homewrapper .section  h2{font-size:28px;line-height:28px;}
.homewrapper .section  blockquote, .homewrapper .section  p,  .homewrapper .section.about  p  {font-weight:400; font-size:17px; line-height:28px;}
.homewrapper .logo, .logo, .scrolled .logo{ width:80px; height:92px;  margin-left:-40px;}
.ele_01, .ele_02{top:-10px; height:80px;}
.ele_03, .ele_04, .ele_05{top:62px; height:30px;}
.scrolled .ele_01, .scrolled .ele_02{top:-16px;}
.homewrapper a.concept{  bottom:70px; width:32px; height:32px; margin-left:-17px;  padding:2px 15px 2px 10px; font-size:18px; line-height:26px; color:rgba(216,240,240,1); border-radius:16px 16px; border:1px solid rgba(216,240,240,0.8); }
.homewrapper a.concept span {  background-size:80% 80%; width:30px; height:30px; margin:0px; margin:-1px 0 0 -10px;}
.homewrapper a.concept:hover{ width:245px; margin-left:-122px; padding:2px 30px 2px 25px; border-color:rgba(166,128,68,0.85); border-radius:16px 16px;}

/*common style*/
#content .main_section {padding-top:130px;}
.wrap {padding-top:60px; padding-bottom:100px;}
#content .wrap .intro  p , .teamwrapper .list p, #content .main_section p , #content .main_section ul li , p{font-size:18px; line-height:32px;}
#content .intro h1, .nonfloat h2 {font-size:40px; line-height:38px;}
.section_space {height:30px;}
.scrolled .bg_wrapper, .bg_wrapper {height:80px;}
.nav_outer {top:15px;}
#nav_layer {overflow-y:scroll;}
#nav_layer .fixed_width{margin-left:30px; margin-right:30px;}
#nav_layer ul, #nav_layer ul:first-child{ width:290px; margin:0 0 30px 0; }
#nav_layer ul:first-child {margin-right:30px;}
#nav_layer ul li{ margin-top:35px; }
#nav_layer ul li a span, #nav_layer ul li span{font-size:18px; line-height:15px; padding:0; }
#nav_layer ul li a span.blev{ font-size:28px; line-height:24px;}

footer ul {float:none; text-align:left; margin-left:40px;margin-right:40px;}
footer ul li { font-size:14px; line-height:12px; font-weight:400;  } 
.fixed_width {padding:0px 0px; width:calc(100% - 60px);}
.wrap .rslides .fixed_width {margin:0; padding:40px; width:100%;}
.wrap .rslides .overlay_layer { position:relative; z-index:3; background:rgba(216,231,231,0.85); }
.wrap .rslides  li{text-align:center; display:block; position:relative;}
.wrap .rslides img {z-index:0;  /*position:absolute; margin:0; top:0;bottom:0; width:auto; height:auto;*/}
.wrap .rslides .overlay_layer img { height:auto; min-height:auto;position:relative; display:inline-block; float:none; margin:20px 0; max-width:800px;}
.slideritem_nav {left: -15px;}
.slideritem_nav.next { right: -15px;}


.map_logo {width:40px; height:46px; margin-top:-20px; margin-left:-23px; }

#hh1{  margin-left:2em;}
#hh2{ opacity:1;  margin-left:4em; }
#hhp{  margin-left: 8em;}


}

@media only screen and (min-height : 600px) and (max-width : 800px) {
/*home */
.homewrapper .section  h1{font-size:78px; line-height:78px; margin-left:-2px;}
.homewrapper .section  h2{font-size:32px;line-height:32px;}

}


@media (max-height: 760px) {
/*home*/
.scrolled .homewrapper .logo  { width:70px; height:70px;  margin-left: -35px;}
.homewrapper .section h1 {font-size:65px; line-height:65px; letter-spacing:-1px;}
.homewrapper .section h2 {font-size:35px; line-height:35px; }

/*common style*/
#nav_layer .nav_wrapper {margin:calc(50vh - 180px) auto 0px auto; }
#nav_layer {overflow-y:scroll;}
#nav_layer ul li { margin-top:35px; }
#concept p{ font-size:18px; line-height:26px;}
}
@media only screen and (max-height : 600px){
#nav_layer .nav_wrapper {margin:calc(50vh - 130px) auto 0px auto; }
#nav_layer ul li { margin-top:30px; }
#nav_layer ul li a {line-height:20px;}
#nav_layer ul li a span {font-size:16px; line-height:20px;}
#nav_layer ul li a span.blev {font-size:30px; line-height:20px;}

}

@media (max-width: 700px) {

/*home */
.homewrapper .section  h1{font-size:52px; letter-spacing:0; line-height:52px; margin-left:-2px;}
.homewrapper .section  h2{font-size:28px;line-height:28px; }
.homewrapper .section p , .homewrapper .section h1, .homewrapper .section h2, .homewrapper .section blockquote{ max-width:90%; padding:0;}
.homewrapper .section blockquote {max-width:calc(95% - 20px); }



/*common style*/
#nav_layer ul, #nav_layer ul:first-child{ width:calc(50% - 15px); }
#nav_layer ul li a, #nav_layer ul li a span.blev{ font-size:25px; line-height:22px;}
#nav_layer ul li a span{font-size:16px; line-height:16px;}
.concept_wrapper {padding:0; overflow-y:scroll;}
#content .main_section ul li{ margin:0px; padding:0; margin-left:20px; width:100%; }
#btn_totop {bottom:65px;}

#hh1{  margin-left:2em;}
#hh2{ opacity:1;  margin-left:2.5em; }
#hhp{  margin-left: 4em;}

}

/*it makes the content area become full vh n footer stick on the bottom */
@media (max-width: 640px) {
}

/*it makes the content area become full vh n footer stick on the bottom */
@media (max-width: 625px) {
.patternwrap{ min-height:calc( 100vh - 90px);}
}

@media (max-width: 600px) {
.btn_award { width:160px; top:100px;}
.fixed_width {padding:0px 0px; width:calc(100% - 60px);}
footer ul {margin:0 30px;}
/*home*/
.homewrapper .logo, .logo  , .scrolled  .logo {margin-left:0; left:30px; text-align:left; margin-top:0px;  width:70px; height:81px; }
.scrolled  .logo { left:20px; top:0;}
.nav_outer {top:5px;right:10px;}
.ele_01, .ele_02{top:-10px;}
.homewrapper .scrolled .bg_wrapper {height:130px;}
.scrolled .ele_01, .scrolled .ele_02{top:-8px;}
.ele_03, .ele_04, .ele_05{top:54px; height:26px;}
.logo_wrapper {margin:15px 0;} 
.homewrapper .logo_wrapper {margin:20px 0;} 
.scrolled .bg_wrapper {height:65px;}
.homewrapper .section  h1{font-size:48px; line-height:48px; margin-left:-2px;}
.homewrapper .section  h2{font-size:22px;line-height:22px;}
.homewrapper .section blockquote,.homewrapper .section  p, .homewrapper .section.about  p  , #concept p{font-size:14px;line-height:24px; font-weight:400px;  }
.homewrapper .section span{font-size:12px; line-height:16px;}
#content .patternwrap .section_title, #content .patternwrap .intro {margin-top:0;}

/*common style*/
#nav_layer .nav_wrapper {margin-top:150px;margin-bottom:50px;}
#nav_layer ul, #nav_layer ul:first-child{  width:100%; float:none; margin:0; }
#nav_layer ul li { width:100%; margin-top:24px;}
#nav_layer ul li a, #nav_layer ul li a span.blev{ font-size:24px; line-height:18px;}
#nav_layer ul li a span{ font-size:17px; line-height:16px; }
#nav_layer ul li  a.icon_concept {position:absolute; top:-5px; right:0; width:25px; height:25px; background-size:80% 80%; border-radius:50% 50%;}

#content .main_section {padding-top:130px;}
#content .intro h1, .nonfloat h2 {font-size:35px; line-height:32px; margin-bottom:20px; }
#content .section_title h2, .nonfloat h2{ letter-spacing:-2px; }
#content .intro h3 {font-size:22px; line-height:22px; margin:15px 0;}
#content .main_section ul li{margin-left:0;}
#title_wrapper h1 {font-size:28px;line-height:30px;}
p{text-align:left;}
.wrap{padding-top:40px; padding-bottom:50px;}
.wrap img { margin:10px auto 30px auto;}
.map_wrapper {  margin:30px auto 50px auto;}
#content .wrap .intro  p , .teamwrapper .list p, #content .main_section p , #content .main_section ul li , p, #content ul.contact_list li p{text-align:justify; font-size:16px; line-height:26px;}
.wrap .slide .fixed_width {padding:0;}

.section_space {height:0;}
#content .patternwrap {padding:130px 0 0 0 ;}
#content.patternwrap .section_title, #content.patternwrap .intro {margin:0;}
.teamwrapper .list div img.teamlogo{ width:auto; max-width:100%;}
#tabs .wrap .intro  h1, #tabs .wrap .tab_content  h1 {font-size:24px; line-height:28px; }

.inner_fullpage {height:500px;}
.wrap .slide .overlay_layer {top:0;}
.overlay_layer img {margin-top:50px;}
.slideritem_nav {left: -20px;}
.slideritem_nav.next { right: -20px;}

#hh1{  margin-left:2em;}
#hh2{ opacity:1;  margin-left:3em; }
#hhp{  margin-left: 4em;}
}


@media only screen and (min-height : 700px) and (max-width: 600px)  {}

@media (max-width: 500px)  {
.concept_wrapper {  position:fixed; right: 0; bottom:-120vh; left: 0;  }
.conceptshow .concept_wrapper {opacity:1; bottom:0; height:auto; top:0; padding-top:80px; overflow-y:scroll;}
.teamwrapper .list div img.teamlogo{ width:auto; max-width:250px;}
}

@media (max-width: 400px)  {
}

#hh1 {
    font-family: 'Chokokutai'; 
    color: #dd1a0c;
}