.the-content {
line-height: 1.4; }
.the-content h1,
.the-content h2,
.the-content h3,
.the-content h4,
.the-content h5,
.the-content h6,
.the-content strong,
.the-content b {
margin: 15px 0;
font-family: "Roboto-Bold"; }
.the-content h1 {
font-size: 20px; }
.the-content h2 {
font-size: 18px; }
.the-content h3 {
font-size: 16px; }
.the-content h4,
.the-content h5,
.the-content h6 {
font-size: 14px; }
.the-content p {
margin-bottom: 10px; }
.the-content table {
margin: 15px 0;
border: 1px solid #000;
max-width: 100% !important; }
@media only screen and (max-width: 480px) {
.the-content table {
overflow-x: auto;
display: block; } }
.the-content table tr,
.the-content table th,
.the-content table td {
border: 1px solid #000;
padding: 10px; }
.the-content ul {
margin-left: 5px; }
.the-content ul li {
list-style: disc;
margin: 0 10px; }
.the-content ol {
margin-left: 5px; }
.the-content ol li {
list-style: decimal;
margin: 0 10px; }
.the-content img {
max-width: 100%;
height: auto; } ::-webkit-scrollbar {
width: 8px; }
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2); }
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.2); } ul.page-numbers {
text-align: center; }
ul.page-numbers i {
font-size: 14px; }
ul.page-numbers a,
ul.page-numbers span {
display: inline-block;
width: 23px;
height: 23px;
line-height: 23px;
font-size: 11px;
color: rgba(0, 0, 0, 0.85);
border-radius: 0;
cursor: pointer; }
ul.page-numbers span.page-numbers.current {
color: #fff;
background-color: rgba(0, 0, 0, 0.85);
border: 1px solid rgba(0, 0, 0, 0.85); }
@font-face {
font-family: 'UTM Essendine Caps';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//UTM Essendine Caps.ttf); }
@font-face {
font-family: 'Cabin';
font-weight: normal;
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//Cabin-Regular.ttf); }
@font-face {
font-family: 'Cabin';
font-weight: bold;
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//Cabin-Bold.ttf); }
@font-face {
font-family: 'Elle Futura-Bold';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//Elle Futura-Bold.otf); }
@font-face {
font-family: 'Elle Futura-Heavy';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//Elle Futura-Heavy.otf); }
@font-face {
font-family: 'Elle Futura';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//Elle Futura.otf); }
@font-face {
font-family: 'Elle Futura-Light';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//Elle Futura-Light.otf); }
@font-face {
font-family: 'iCielGotham-Black';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//Gotham-Black.otf); }
@font-face {
font-family: 'iCielGotham-Bold';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//iCielGotham-Bold.ttf); }
@font-face {
font-family: 'iCielGotham-Book';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//iCielGotham-Book.ttf); }
@font-face {
font-family: 'iCielGotham-Light';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//iCielGotham-Light.ttf); }
@font-face {
font-family: 'iCielGotham-Medium';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//iCielGotham-Medium.ttf); }
@font-face {
font-family: 'UTMGod-sWord';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//UTMGod-sWord/UTMGod-sWord.eot?#iefix) format("embedded-opentype"), url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//UTMGod-sWord/UTMGod-sWord.woff) format("woff"), url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//UTMGod-sWord/UTMGod-sWord.ttf) format("truetype"), url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//UTMGod-sWord/UTMGod-sWord.svg#SanFranciscoDisplay-Heavy) format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'UTM Avo';
src: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/fonts//UTMAvo.ttf) format("truetype");
font-weight: normal;
font-style: normal; } .clearfix::after {
clear: both;
content: '';
display: table; } .hide-text {
overflow: hidden;
padding: 0; text-indent: 101%;
white-space: nowrap; } .visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; } .container-col-1 {
width: 8.3333333333%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-1 {
width: 100%;
padding: 0 20px; } }
.container-col-2 {
width: 16.6666666667%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-2 {
width: 100%;
padding: 0 20px; } }
.container-col-3 {
width: 25%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-3 {
width: 100%;
padding: 0 20px; } }
.container-col-4 {
width: 33.3333333333%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-4 {
width: 100%;
padding: 0 20px; } }
.container-col-5 {
width: 41.6666666667%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-5 {
width: 100%;
padding: 0 20px; } }
.container-col-6 {
width: 50%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-6 {
width: 100%;
padding: 0 20px; } }
.container-col-7 {
width: 58.3333333333%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-7 {
width: 100%;
padding: 0 20px; } }
.container-col-8 {
width: 66.6666666667%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-8 {
width: 100%;
padding: 0 20px; } }
.container-col-9 {
width: 75%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-9 {
width: 100%;
padding: 0 20px; } }
.container-col-10 {
width: 83.3333333333%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-10 {
width: 100%;
padding: 0 20px; } }
.container-col-11 {
width: 91.6666666667%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-11 {
width: 100%;
padding: 0 20px; } }
.container-col-12 {
width: 100%;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.container-col-12 {
width: 100%;
padding: 0 20px; } } .g12-col-1 {
width: 8.3333333333%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-1 {
width: 100%; } }
.g12-col-2 {
width: 16.6666666667%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-2 {
width: 100%; } }
.g12-col-3 {
width: 25%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-3 {
width: 100%; } }
.g12-col-4 {
width: 33.3333333333%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-4 {
width: 100%; } }
.g12-col-5 {
width: 41.6666666667%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-5 {
width: 100%; } }
.g12-col-6 {
width: 50%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-6 {
width: 100%; } }
.g12-col-7 {
width: 58.3333333333%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-7 {
width: 100%; } }
.g12-col-8 {
width: 66.6666666667%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-8 {
width: 100%; } }
.g12-col-9 {
width: 75%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-9 {
width: 100%; } }
.g12-col-10 {
width: 83.3333333333%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-10 {
width: 100%; } }
.g12-col-11 {
width: 91.6666666667%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-11 {
width: 100%; } }
.g12-col-12 {
width: 100%;
float: left; }
@media only screen and (max-width: 768px) {
.g12-col-12 {
width: 100%; } } .g10-col-1 {
width: 10%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-1 {
width: 100%; } }
.g10-col-2 {
width: 20%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-2 {
width: 100%; } }
.g10-col-3 {
width: 30%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-3 {
width: 100%; } }
.g10-col-4 {
width: 40%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-4 {
width: 100%; } }
.g10-col-5 {
width: 50%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-5 {
width: 100%; } }
.g10-col-6 {
width: 60%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-6 {
width: 100%; } }
.g10-col-7 {
width: 70%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-7 {
width: 100%; } }
.g10-col-8 {
width: 80%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-8 {
width: 100%; } }
.g10-col-9 {
width: 90%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-9 {
width: 100%; } }
.g10-col-10 {
width: 100%;
float: left; }
@media only screen and (max-width: 768px) {
.g10-col-10 {
width: 100%; } }
.fl {
float: left; }
.fr {
float: right; }
.fri {
float: right !important; }
.lsn,
.lsn > li {
list-style: none; }
.posr {
position: relative; }
.posa {
position: absolute; }
.posf {
position: fixed; }
.imgdf > img {
max-width: 100%;
width: auto;
height: auto;
border: none; }
.dib {
display: inline-block; }
.dtb {
display: table; }
.dtbc {
display: table-cell; }
.pt0 {
padding-top: 0 !important; }
.pr0 {
padding-right: 0 !important; }
.pt0 {
padding-top: 0 !important; }
.pb0 {
padding-bottom: 0 !important; }
.tac {
text-align: center; }
.taj {
text-align: justify; }
.tar {
text-align: right; }
.ttu {
text-transform: uppercase; }
.tdu {
text-decoration: underline; }
.tdn {
text-decoration: none; }
.vat {
vertical-align: top; }
.fwb {
font-weight: bold; }
.fw2 {
font-weight: 200; }
.fw3 {
font-weight: 300; }
.fw4 {
font-weight: 400; }
.fw5 {
font-weight: 500; }
.fw6 {
font-weight: 600; }
.fw7 {
font-weight: 700; }
.fw8 {
font-weight: 800; }
.fw9 {
font-weight: 900; }
.ovfh {
overflow: hidden; }
.img-backstretch {
position: absolute;
top: 50%;
left: 50%;
min-height: 101%;
min-width: 101%;
z-index: -1;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
@media (max-width: 1024px) {
.hidden-devide-1024 {
display: none !important; } }
@media (min-width: 1025px) {
.show-devide-1024 {
display: none !important; } }
@media (max-width: 768px) {
.hidden-devide-768 {
display: none !important; } }
@media (min-width: 769px) {
.show-devide-768 {
display: none !important; } }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block; }
ol,
ul {
list-style: none; }
blockquote,
q {
quotes: none; }
blockquote:before, blockquote:after {
content: '';
content: none; }
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a:hover {
text-decoration: none; }
a {
color: inherit; }
a:active,
a:focus {
text-decoration: none;
color: inherit; }
img {
max-width: 100%; }
ol,
ul,
li {
padding: 0px;
list-style: none;
margin: 0px; } figcaption,
figure,
main { display: block; } figure {
margin: 1em 40px; } hr {
box-sizing: content-box; height: 0; overflow: visible; } pre {
font-family: monospace, monospace; font-size: 1em; }  a {
background-color: transparent; -webkit-text-decoration-skip: objects; } a:active,
a:hover {
outline-width: 0; } abbr[title] {
border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b,
strong {
font-weight: bold; } code,
kbd,
samp {
font-family: monospace, monospace; font-size: 1em; } dfn {
font-style: italic; } mark {
background-color: #ff0;
color: #000; } small {
font-size: 80%; } sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -0.25em; }
sup {
top: -0.5em; }  audio,
video {
display: inline-block; } audio:not([controls]) {
display: none;
height: 0; } img {
border-style: none; } svg:not(:root) {
overflow: hidden; }  button,
input { overflow: visible; } button,
select { text-transform: none; } button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button; } button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; } button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; } legend {
box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress {
display: inline-block; vertical-align: baseline; } textarea {
overflow: auto; } [type="checkbox"],
[type="radio"] {
box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; } [type="search"] {
-webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; } ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; }  details,
menu {
display: block; } summary {
display: list-item; }  canvas {
display: inline-block; } template {
display: none; } ::-webkit-scrollbar {
width: 8px; }
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2); }
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.2); } h1, h2, h3, h4, h5, h6, strong, b {
font-weight: bold;
font-family: "Roboto-Bold";
line-height: 1.4; }
html, body {
position: relative;
font-family: "Roboto-Book";
font-size: 14px;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased; }
.header_pc {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99;
padding: 0 2.4305555556%;
box-sizing: border-box;
display: flex; }
@media only screen and (max-width: 1024px) {
.header_pc {
display: none; } }
.header_defaul {
width: 50%;
display: flex;
align-items: center; }
.header_defaul li {
height: 70px; }
.header_defaul li a {
font-family: 'Cabin';
font-weight: bold;
text-transform: uppercase;
color: #3d3a3d;
font-size: 14px;
text-decoration: none;
line-height: 70px; }
.header_defaul li.color_header a {
color: #fff; }
.header_defaul li._has-child {
position: relative; }
.header_defaul li._has-child .sub-menu {
position: absolute;
top: 60px;
left: 0;
z-index: 100;
background-color: #fff;
padding: 5px 0;
border-radius: 5px;
min-width: 228px;
display: none; }
.header_defaul li._has-child .sub-menu li {
padding: 0 10px 0 20px;
background-color: #fff;
height: 36px;
width: 100%;
@incude transition(all .3s ease); }
.header_defaul li._has-child .sub-menu li a {
color: #3d3a3d;
font-family: 'Cabin';
font-weight: normal;
font-size: 14px;
line-height: 36px;
text-transform: capitalize; }
.header_defaul li._has-child .sub-menu li.no_intro {
pointer-events: none; }
.header_defaul li._has-child .sub-menu li.no_intro a {
color: rgba(61, 58, 61, 0.3); }
.header_defaul li._has-child .sub-menu li:hover {
background-color: #f6f6f6; }
.header_defaul li._has-child:hover .sub-menu {
display: block; }
.header_right {
justify-content: flex-end; }
.header_right li {
margin-left: 50px; }
.header_left {
justify-content: flex-start; }
.header_left li {
margin-right: 50px; }
.header-mobile {
position: fixed;
background-color: #fff;
height: 70px;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 99;
display: none;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
.header-mobile .teaser2-logo {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.header-mobile .teaser2-logo img {
width: 124px; }
.header-mobile.header-mobile-scroll {
box-shadow: 0 0 4px rgba(81, 188, 192, 0.65); }
.header-mobile.header-mobile-scroll .teaser2-logo {
transform: translate(-50%, -100%); }
@media only screen and (max-width: 1024px) {
.header-mobile {
display: block; } }
@media only screen and (max-width: 480px) {
.header-mobile {
height: 46px; }
.header-mobile .teaser2-logo img {
width: 90px; } }
.hamburger {
position: fixed;
z-index: 103;
top: 10px;
left: 40px;
width: 70px;
height: 70px;
display: flex;
align-items: center;
display: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.hamburger .hamburger-menu {
font-family: 'iCielGotham-Book';
font-size: 14px;
color: #666666; }
@media only screen and (max-width: 1024px) {
.hamburger {
display: block; } }
@media only screen and (max-width: 480px) {
.hamburger {
top: 6px;
width: 56px;
height: 56px;
left: 20px; }
.hamburger .hamburger-menu {
font-size: 10px; } }
*[class*="hamburger__line--"] {
float: right;
display: block;
width: 45px;
margin: 4px 25px;
clear: both;
border-top: 3px solid #666666;
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.2, 1.18);
-moz-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.2, 1.18);
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.2, 1.18); }
@media only screen and (max-width: 480px) {
*[class*="hamburger__line--"] {
width: 33px;
margin: 2px 21px; } }
.hamburger__line--one {
margin-top: 8px; }
@media only screen and (max-width: 480px) {
.hamburger__line--one {
margin-top: 4px; } }
.hamburger.active .hamburger-menu {
display: none; }
.hamburger.active .hamburger__line--one {
margin-top: 25px; }
.hamburger.active .hamburger__line--two {
left: 50%;
opacity: 0;
-webkit-animation: active-menu-bar .8s forwards;
animation: active-menu-bar02 .8s forwards; }
@-webkit-keyframes active-menu-bar {
100% {
height: 0; } }
@keyframes active-menu-bar {
100% {
height: 0; } }
.hamburger.active .hamburger__line--one {
-webkit-transform: translateY(10px) rotateZ(45deg);
-moz-transform: translateY(10px) rotateZ(45deg);
transform: translateY(10px) rotateZ(45deg);
border-top: 3px solid #3d3a3d; }
@media only screen and (max-width: 480px) {
.hamburger.active .hamburger__line--one {
-webkit-transform: translateY(2px) rotateZ(45deg);
-moz-transform: translateY(2px) rotateZ(45deg);
transform: translateY(2px) rotateZ(45deg);
border-top: 2px solid #3d3a3d; } }
.hamburger.active .hamburger__line--three {
-webkit-transform: translateY(-12px) rotateZ(-45deg);
-moz-transform: translateY(-12px) rotateZ(-45deg);
transform: translateY(-12px) rotateZ(-45deg);
border-top: 3px solid #3d3a3d; }
@media only screen and (max-width: 480px) {
.hamburger.active .hamburger__line--three {
border-top: 2px solid #3d3a3d; } }
.header__popup-menu {
position: fixed;
top: 0;
left: 0;
min-height: 100vh;
width: 100%;
background: #585858;
text-align: center;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/teaser/bg-mobile-bottom.jpg);
background-size: cover;
background-position: center center;
z-index: 101;
overflow-x: hidden;
overflow-y: auto;
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
transform: translate(100%, 0);
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-moz-transition-duration: .6s;
-o-transition-duration: .6s;
-webkit-transition-duration: .6s;
transition-duration: .6s;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-backface-visibility: visible;
display: none; }
.header__popup-menu.is--active {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
display: block; }
@media only screen and (max-width: 1024px) {
.header__popup-menu {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-flex-direction: column; } }
.header__popup-menu .logo_mobile img {
width: 120px;
height: auto; }
@media only screen and (max-width: 1024px) {
.header__popup-menu .logo_mobile img {
width: 146px; } }
@media only screen and (max-width: 480px) {
.header__popup-menu .logo_mobile img {
width: 120px; } }
.header__popup-menu .menu_mobile {
padding: 25px 0 0;
width: 100%; }
.header__popup-menu .menu_mobile li {
padding: 14px 10px;
position: relative; }
.header__popup-menu .menu_mobile li:before {
position: absolute;
content: '';
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 35px;
height: 1px;
background-color: rgba(255, 255, 255, 0.75); }
.header__popup-menu .menu_mobile li a {
position: relative;
padding: 0 !important;
display: block;
background: transparent !important;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
color: #3d3a3d;
line-height: 1;
white-space: nowrap;
font-family: 'Cabin';
font-weight: bold;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
letter-spacing: 0.5px; }
.header__popup-menu .menu_mobile li.current_page_item a, .header__popup-menu .menu_mobile li.current-menu-item a, .header__popup-menu .menu_mobile li.active a {
color: #e82429; }
@media only screen and (max-width: 480px) {
.header__popup-menu .menu_mobile li a {
font-size: 14px;
line-height: 20px; } }
@media only screen and (max-width: 320px) {
.header__popup-menu .menu_mobile li {
padding: 10px; }
.header__popup-menu .menu_mobile li a {
font-size: 13px;
line-height: 18px; } }
@media only screen and (min-width: 490px) and (max-width: 767px) {
.header-mobile {
height: 46px; }
.header-mobile .teaser2-logo img {
width: 90px; }
.hamburger {
top: 6px;
width: 56px;
height: 56px;
left: 20px; }
.hamburger .hamburger-menu {
font-size: 10px; }
*[class*="hamburger__line--"] {
width: 33px;
margin: 2px 21px; }
.hamburger__line--one {
margin-top: 4px; }
.hamburger.active .hamburger__line--one {
-webkit-transform: translateY(2px) rotateZ(45deg);
-moz-transform: translateY(2px) rotateZ(45deg);
transform: translateY(2px) rotateZ(45deg);
border-top: 2px solid #3d3a3d; }
.hamburger.active .hamburger__line--three {
border-top: 2px solid #3d3a3d; }
.header__popup-menu .logo_mobile img {
width: 90px; }
.header__popup-menu .menu_mobile {
padding: 5px 0 0; }
.header__popup-menu .menu_mobile li {
padding: 7px 10px; }
.header__popup-menu .menu_mobile li a {
font-size: 14px;
line-height: 22px; } }
.scrollTop {
position: fixed;
z-index: 11;
bottom: 35px;
right: 15px;
width: 40px;
height: 40px;
cursor: pointer;
display: none;
text-align: center;
line-height: 46px;
background-color: #51bcc0; }
.scrollTop i {
font-size: 24px;
color: #fff; }
@media only screen and (max-width: 480px) {
.scrollTop {
width: 36px;
height: 36px;
line-height: 44px; }
.scrollTop i {
font-size: 22px; } }
.footer_top {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding: 42px calc(100% / 12) 42px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/bg-footer-top.jpg);
background-size: cover;
background-position: center center; }
@media only screen and (max-width: 1024px) {
.footer_top {
padding: 42px 30px 42px; } }
@media only screen and (max-width: 768px) {
.footer_top {
padding: 70px 40px 64px; } }
@media only screen and (max-width: 480px) {
.footer_top {
padding: 30px 20px; } }
.footer_top ._left {
width: calc((100% / 10) * 3);
display: flex;
flex-direction: column;
justify-content: center; }
.footer_top ._left p {
font-family: 'iCielGotham-Bold';
font-size: 25px;
text-transform: uppercase;
color: #fff; }
.footer_top ._left p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 35px; }
@media only screen and (max-width: 768px) {
.footer_top ._left {
width: 100%; }
.footer_top ._left p {
font-size: 33px;
line-height: 46px; }
.footer_top ._left p:nth-of-type(1) {
font-size: 47px;
line-height: 56px; } }
@media only screen and (max-width: 480px) {
.footer_top ._left {
text-align: center; }
.footer_top ._left p {
font-size: 18px;
line-height: 28px; }
.footer_top ._left p:nth-of-type(1) {
font-size: 22px;
line-height: 36px; } }
.footer_top ._right {
width: calc((100% / 10) * 7);
box-sizing: border-box;
padding-left: 15px; }
@media only screen and (max-width: 768px) {
.footer_top ._right {
width: 100%;
padding-left: 0;
margin-top: 30px; } }
@media only screen and (max-width: 480px) {
.footer_top ._right {
margin-top: 20px; } }
.footer_top ._right form .form-group {
position: relative;
border-radius: 0;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
height: 38px;
margin-bottom: 25px; }
.footer_top ._right form .form-group .frm-error {
position: absolute;
top: 100%;
left: 17px;
width: 100%;
font-family: 'Cabin';
font-weight: normal;
font-size: 10px;
color: #02a8a3;
z-index: 1;
padding-top: 5px; }
.footer_top ._right form .form-group label,
.footer_top ._right form .form-group input,
.footer_top ._right form .form-group textarea {
font-family: 'Cabin';
font-weight: normal;
font-size: 14px;
color: rgba(255, 255, 255, 0.8); }
.footer_top ._right form .form-group label span {
color: #8c8c8c;
font-size: 13px;
font-style: italic; }
.footer_top ._right form .form-group input::-webkit-input-placeholder,
.footer_top ._right form .form-group textarea::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.8); }
.footer_top ._right form .form-group input::-moz-placeholder,
.footer_top ._right form .form-group textarea::-moz-placeholder {
color: rgba(255, 255, 255, 0.8); }
.footer_top ._right form .form-group input:-ms-input-placeholder,
.footer_top ._right form .form-group textarea:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8); }
.footer_top ._right form .form-group input:-moz-placeholder,
.footer_top ._right form .form-group textarea:-moz-placeholder {
color: rgba(255, 255, 255, 0.8); }
.footer_top ._right form .form-group textarea {
border: 0;
outline: none;
box-shadow: none;
background-color: transparent;
resize: none;
width: 100%; }
.footer_top ._right form .form-group.frm_description {
height: 98px;
align-items: flex-start;
padding-top: 15px;
margin-bottom: 10px;
margin-top: 10px; }
.footer_top ._right form .form-group.frm_box {
background-color: transparent;
padding-left: 17px;
margin: 20px 0 0;
height: auto;
border: 0; }
.footer_top ._right form .form-group.frm_box ._label {
font-family: 'Cabin';
font-weight: normal;
font-size: 15px;
color: rgba(255, 255, 255, 0.8);
padding-right: 30px; }
.footer_top ._right form .form-group.frm_box ._label #policy {
font-style: italic;
font-size: 15px;
color: rgba(255, 255, 255, 0.8);
text-decoration: underline;
padding: 0px 1px; }
.footer_top ._right form .form-group.frm_box ._label br {
display: none; }
.footer_top ._right form .form-group.frm_box ._label span {
color: #8c8c8c;
font-size: 13px;
font-style: italic; }
.footer_top ._right form .form-group.frm_box .form-group-radio {
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
margin-bottom: 0px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item {
position: relative;
padding-right: 10px;
width: calc(100% / 5); }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label {
display: block;
padding-left: 20px;
padding-top: 2px;
line-height: 15px;
cursor: pointer;
font-family: 'Cabin';
font-weight: normal;
font-size: 15px;
color: rgba(255, 255, 255, 0.8); }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label:before, .footer_top ._right form .form-group.frm_box .form-group-radio ._item label:after {
content: "";
position: absolute;
display: block;
border-radius: 50%;
overflow: hidden;
pointer-events: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label:before {
left: 3px;
top: 6px;
width: 6px;
height: 6px;
background-color: transparent; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label:after {
left: 0;
top: 3px;
width: 10px;
height: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: transparent; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label.check:before, .footer_top ._right form .form-group.frm_box .form-group-radio ._item label.check:after {
border-radius: 0; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item input {
position: absolute;
left: 0;
width: 12px;
height: 10px;
margin: 0;
cursor: pointer;
opacity: 0;
border: 1px solid #403d40; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item input:checked + label:before {
background-color: #02a8a3; }
.footer_top ._right form .form-group.frm_box._column {
flex-wrap: wrap;
margin-bottom: 12px; }
.footer_top ._right form .form-group.frm_box._column ._label {
width: 100%;
margin-bottom: 12px; }
.footer_top ._right form .form-group.frm_box._column .form-group-radio {
padding-left: 89px; }
.footer_top ._right form .form-group.frm_box._choose {
margin-bottom: 20px; }
.footer_top ._right form .form-group.frm_box._choose ._label {
padding-right: 85px; }
.footer_top ._right form .form-group.frm_box._choose ._label span {
font-style: italic;
text-decoration: underline;
color: rgba(255, 255, 255, 0.8); }
.footer_top ._right form .form-group.frm_box._choose ._label br {
display: none; }
.footer_top ._right form .form-group.frm_box._choose .frm-error {
left: 17px; }
.footer_top ._right form .form-group.frm_box._choose .form-group-radio ._item {
width: 100%; }
@media only screen and (max-width: 1024px) {
.footer_top ._right form .form-group.frm_box ._label br {
display: block; } }
@media only screen and (max-width: 768px) {
.footer_top ._right form .form-group {
height: 74px;
margin-bottom: 32px;
padding: 0 0 0 25px; }
.footer_top ._right form .form-group .frm-error {
font-size: 12px;
padding-top: 7px;
left: 25px; }
.footer_top ._right form .form-group label,
.footer_top ._right form .form-group input,
.footer_top ._right form .form-group textarea {
font-size: 26px; }
.footer_top ._right form .form-group.frm_description {
height: 280px;
padding-top: 22px;
margin-bottom: 20px; }
.footer_top ._right form .form-group.frm_box {
padding-left: 25px;
margin: 15px 0 0;
flex-wrap: wrap; }
.footer_top ._right form .form-group.frm_box ._label {
font-size: 26px;
width: 100%;
margin-bottom: 26px; }
.footer_top ._right form .form-group.frm_box ._label #policy {
font-size: 23px; }
.footer_top ._right form .form-group.frm_box ._label span {
font-size: 23px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item {
width: calc(100% / 3);
margin-bottom: 22px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label {
display: block;
padding-left: 35px;
font-size: 25px;
line-height: 26px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label:before {
left: 4px;
top: 7px;
width: 13px;
height: 13px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label:after {
top: 3px;
width: 20px;
height: 20px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item input {
width: 21px;
height: 23px; }
.footer_top ._right form .form-group.frm_box._column {
margin-bottom: 18px; }
.footer_top ._right form .form-group.frm_box._column ._label {
margin-bottom: 26px; }
.footer_top ._right form .form-group.frm_box._column .form-group-radio {
width: 100%;
padding-left: 0; }
.footer_top ._right form .form-group.frm_box._choose {
margin-top: 30px; }
.footer_top ._right form .form-group.frm_box._choose ._label {
padding-right: 0;
margin-bottom: 30px; }
.footer_top ._right form .form-group.frm_box._choose .frm-error {
top: 28px;
left: 25px; } }
@media only screen and (max-width: 480px) {
.footer_top ._right form .form-group {
height: 40px;
margin-bottom: 25px;
padding: 0 0 0 15px; }
.footer_top ._right form .form-group .frm-error {
font-size: 10px;
padding-top: 5px;
left: 15px; }
.footer_top ._right form .form-group label,
.footer_top ._right form .form-group input,
.footer_top ._right form .form-group textarea {
font-size: 14px; }
.footer_top ._right form .form-group.frm_description {
height: 90px;
padding-top: 10px;
margin-bottom: 10px; }
.footer_top ._right form .form-group.frm_box {
padding-left: 15px;
margin: 5px 0 0;
flex-wrap: wrap; }
.footer_top ._right form .form-group.frm_box ._label {
font-size: 14px;
width: 100%;
margin-bottom: 10px; }
.footer_top ._right form .form-group.frm_box ._label #policy {
font-size: 15px; }
.footer_top ._right form .form-group.frm_box ._label span {
font-size: 15px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item {
padding-right: 10px;
margin-bottom: 10px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label {
padding-left: 20px;
padding-top: 3px;
line-height: 15px;
font-size: 12px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label:before {
left: 3px;
top: 6px;
width: 6px;
height: 6px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label:after {
left: 0;
top: 3px;
width: 10px;
height: 10px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item input {
width: 12px;
height: 10px; }
.footer_top ._right form .form-group.frm_box._column {
margin-bottom: 10px; }
.footer_top ._right form .form-group.frm_box._column ._label {
margin-bottom: 10px; }
.footer_top ._right form .form-group.frm_box._choose {
margin-top: 10px; }
.footer_top ._right form .form-group.frm_box._choose ._label {
margin-bottom: 20px; }
.footer_top ._right form .form-group.frm_box._choose ._label br {
display: block; }
.footer_top ._right form .form-group.frm_box._choose .frm-error {
top: 34px;
left: 15px; } }
@media only screen and (max-width: 320px) {
.footer_top ._right form .form-group {
padding: 0 0 0 10px; }
.footer_top ._right form .form-group .frm-error {
left: 10px; }
.footer_top ._right form .form-group label,
.footer_top ._right form .form-group input,
.footer_top ._right form .form-group textarea {
font-size: 13px; }
.footer_top ._right form .form-group.frm_box {
padding-left: 10px; }
.footer_top ._right form .form-group.frm_box ._label {
font-size: 13px; }
.footer_top ._right form .form-group.frm_box ._label #policy {
font-size: 12px; }
.footer_top ._right form .form-group.frm_box ._label span {
font-size: 12px; }
.footer_top ._right form .form-group.frm_box .form-group-radio ._item label {
font-size: 11px; } }
.footer_top ._right form .form_captcha {
display: inline-block;
position: relative; }
.footer_top ._right form .form_captcha .frm_captcha {
float: left; }
.footer_top ._right form .form_captcha .frm-error {
position: absolute;
bottom: -18px;
left: 0;
font-family: 'Cabin';
font-weight: normal;
font-size: 10px;
color: #02a8a3; }
.footer_top ._right form .form_captcha .teaser-submit {
float: left;
margin-left: 17px;
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center; }
@media only screen and (max-width: 768px) {
.footer_top ._right form .form_captcha {
display: flex;
flex-direction: column;
align-items: center; }
.footer_top ._right form .form_captcha .frm_captcha {
float: none; }
.footer_top ._right form .form_captcha .frm-error {
top: 82px;
bottom: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 12px; }
.footer_top ._right form .form_captcha .teaser-submit {
float: none;
margin: 20px 0 0; } }
@media only screen and (max-width: 480px) {
.footer_top ._right form .form_captcha .frm-error {
font-size: 10px; } }
@media only screen and (max-width: 320px) {
.footer_top ._right form .form_captcha .frm_captcha {
margin-left: -10px; } }
.footer_top ._right form .frm_msg {
font-family: 'Cabin';
font-weight: bold;
font-size: 14px;
color: #fff;
margin-top: 10px;
padding-left: 25px; }
@media only screen and (max-width: 480px) {
.footer_top ._right form .frm_msg {
padding-left: 15px;
font-size: 13px; } }
.footer_bottom {
width: 100%;
box-sizing: border-box;
padding: 26px calc(100% / 12) 0;
font-family: 'Cabin';
font-weight: normal;
font-size: 14px;
color: #3e3b3e; }
@media only screen and (max-width: 1024px) {
.footer_bottom {
padding: 26px 30px 0; } }
@media only screen and (max-width: 768px) {
.footer_bottom {
padding: 42px 40px 0;
font-size: 26px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.footer_bottom {
padding: 32px 20px 0;
font-size: 14px;
line-height: 22px; } }
.footer_bottom ._top {
width: 100%;
display: flex;
margin-bottom: 16px; }
.footer_bottom ._top .logo-footer {
display: inline-block;
width: calc((100% / 10) * 3); }
.footer_bottom ._top .logo-footer img {
max-width: 84px;
height: auto; }
.footer_bottom ._top ._link-page {
position: relative;
padding: 15px 0 25px 15px;
display: flex;
width: calc((100% / 10) * 7);
box-sizing: border-box; }
.footer_bottom ._top ._link-page:before {
position: absolute;
content: "";
bottom: 17px;
left: 15px;
height: 1px;
background-color: #c5c4c5;
width: calc(100% - 15px); }
.footer_bottom ._top ._link-page li {
width: calc(100% / 6); }
.footer_bottom ._top ._link-page li a {
text-transform: uppercase; }
@media only screen and (max-width: 768px) {
.footer_bottom ._top {
margin-bottom: 32px;
padding-bottom: 22px;
border-bottom: 1px solid #c5c4c5; }
.footer_bottom ._top .logo-footer {
width: auto; }
.footer_bottom ._top .logo-footer img {
max-width: 200px; }
.footer_bottom ._top ._link-page {
padding: 0;
width: 100%;
flex-wrap: wrap;
padding-left: 75px; }
.footer_bottom ._top ._link-page:before {
display: none; }
.footer_bottom ._top ._link-page li {
width: calc(100% / 2);
font-size: 22px;
margin-bottom: 10px; } }
@media only screen and (max-width: 480px) {
.footer_bottom ._top {
margin-bottom: 20px;
padding-bottom: 15px; }
.footer_bottom ._top .logo-footer {
width: auto; }
.footer_bottom ._top .logo-footer img {
max-width: 76px; }
.footer_bottom ._top ._link-page {
padding-left: 50px; }
.footer_bottom ._top ._link-page li {
font-size: 12px;
margin-bottom: 0; } }
@media only screen and (max-width: 320px) {
.footer_bottom ._top ._link-page {
padding-left: 30px; }
.footer_bottom ._top ._link-page li {
font-size: 10px; } }
.footer_bottom ._center {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-bottom: 36px;
border-bottom: 1px solid #c5c4c5; }
.footer_bottom ._center ._title {
font-weight: bold;
margin-bottom: 10px; }
.footer_bottom ._center ._intro {
width: calc((100% / 10) * 3); }
.footer_bottom ._center ._intro p._title {
text-transform: uppercase; }
.footer_bottom ._center ._intro p a {
color: #3e3b3e; }
.footer_bottom ._center ._intro p span {
font-weight: bold; }
.footer_bottom ._center ._distribution-unit {
width: calc((100% / 10) * 3);
box-sizing: border-box;
padding: 0 15px; }
.footer_bottom ._center ._distribution-unit .link_sales-agent {
margin-top: 0; }
.footer_bottom ._center ._note {
width: calc((100% / 10) * 4);
box-sizing: border-box;
padding-left: 15px; }
@media only screen and (max-width: 768px) {
.footer_bottom ._center {
padding-bottom: 10px;
border: 0; }
.footer_bottom ._center ._title {
margin-bottom: 13px; }
.footer_bottom ._center ._intro,
.footer_bottom ._center ._distribution-unit,
.footer_bottom ._center ._note {
width: 100%;
margin-bottom: 36px; }
.footer_bottom ._center ._distribution-unit,
.footer_bottom ._center ._note {
padding: 0; }
.footer_bottom ._center ._distribution-unit .link_sales-agent {
width: 242px;
height: 70px;
border-radius: 70px; }
.footer_bottom ._center ._distribution-unit .link_sales-agent a {
font-size: 18px;
line-height: 70px; } }
@media only screen and (max-width: 480px) {
.footer_bottom ._center ._title {
margin-bottom: 5px; }
.footer_bottom ._center ._intro,
.footer_bottom ._center ._distribution-unit,
.footer_bottom ._center ._note {
margin-bottom: 12px; }
.footer_bottom ._center ._distribution-unit .link_sales-agent {
width: 180px;
height: 42px;
border-radius: 40px; }
.footer_bottom ._center ._distribution-unit .link_sales-agent a {
font-size: 12px;
line-height: 42px; } }
.footer_bottom ._bottom {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 22px 0; }
.footer_bottom ._bottom .link_social {
width: 50%; }
.footer_bottom ._bottom .link_social li {
display: inline-block;
font-weight: bold;
padding-right: 13px; }
.footer_bottom ._bottom .link_social li a {
color: #51bcc0; }
.footer_bottom ._bottom .copyright {
text-align: right;
width: 50%; }
.footer_bottom ._bottom .copyright span {
color: #51bcc0; }
@media only screen and (max-width: 768px) {
.footer_bottom ._bottom {
padding: 0; }
.footer_bottom ._bottom .link_social {
width: 100%; }
.footer_bottom ._bottom .link_social li {
margin-bottom: 40px;
padding-right: 50px; }
.footer_bottom ._bottom .link_social li:nth-of-type(1) {
width: 100%;
margin-bottom: 32px; }
.footer_bottom ._bottom .link_social li a i {
font-size: 38px; }
.footer_bottom ._bottom .copyright {
text-align: center;
width: 100%;
padding: 22px 0;
border-top: 1px solid #c5c4c5; } }
@media only screen and (max-width: 480px) {
.footer_bottom ._bottom .link_social li {
margin-bottom: 12px;
padding-right: 20px; }
.footer_bottom ._bottom .link_social li:nth-of-type(1) {
margin-bottom: 12px; }
.footer_bottom ._bottom .link_social li a i {
font-size: 16px; }
.footer_bottom ._bottom .copyright {
padding: 12px 0; } }
.social_page-default {
position: fixed;
z-index: 101;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
margin-right: -155px !important; }
.social_page-default ._item {
position: relative;
margin-bottom: 15px;
height: 38px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.social_page-default ._item a {
display: block;
text-decoration: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.social_page-default ._item a ._icon,
.social_page-default ._item a ._text {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
background: #d4b064; background: -moz-linear-gradient(left, #d4b064 0%, #d7b56a 3%, #eace82 29%, #eecf82 55%, #e9c97b 66%, #dfbb6d 76%, #dfbb6d 79%, #d3ae61 87%, #cfa85a 92%, #cba254 95%, #c5994a 97%, #c29444 100%); background: -webkit-linear-gradient(left, #d4b064 0%, #d7b56a 3%, #eace82 29%, #eecf82 55%, #e9c97b 66%, #dfbb6d 76%, #dfbb6d 79%, #d3ae61 87%, #cfa85a 92%, #cba254 95%, #c5994a 97%, #c29444 100%); background: linear-gradient(to right, #d4b064 0%, #d7b56a 3%, #eace82 29%, #eecf82 55%, #e9c97b 66%, #dfbb6d 76%, #dfbb6d 79%, #d3ae61 87%, #cfa85a 92%, #cba254 95%, #c5994a 97%, #c29444 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4b064', endColorstr='#c29444', GradientType=1); }
.social_page-default ._item a ._text {
padding: 3px 12px 5px 25px;
height: 38px;
font-family: 'Elle Futura';
font-size: 11px;
letter-spacing: 3px;
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 14px;
pointer-events: none; }
.social_page-default ._item a ._text span {
font-family: 'Elle Futura-Heavy';
font-size: 14px;
letter-spacing: 0; }
.social_page-default ._item a ._icon {
position: absolute;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
left: -23px;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
.social_page-default ._item a ._icon:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
content: "";
width: 36px;
height: 36px;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 50%; }
.social_page-default ._item:hover {
-webkit-transform: translateX(-148px);
-moz-transform: translateX(-148px);
transform: translateX(-148px); }
.social_page-default ._item:hover a ._icon,
.social_page-default ._item:hover a ._text {
background: #51bbbf; }
@media only screen and (max-width: 480px) {
.social_page-default ._item a ._icon {
width: 42px;
height: 42px; }
.social_page-default ._item a ._icon:before {
width: 32px;
height: 32px; }
.social_page-default ._item a ._text {
pointer-events: all; }
.social_page-default ._item:hover {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0); } }
.popup_highlight {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
pointer-events: none;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.popup_highlight.is-show {
opacity: 1;
pointer-events: all; }
.popup_highlight ._content {
position: relative;
width: 60%; }
@media only screen and (max-width: 1024px) {
.popup_highlight ._content {
width: 75%; } }
@media only screen and (max-width: 768px) {
.popup_highlight ._content {
width: calc(100% - 80px);
background-color: #23aaa3;
padding-bottom: 75px; } }
@media only screen and (max-width: 480px) {
.popup_highlight ._content {
width: calc(100% - 40px);
padding-bottom: 60px; } }
.popup_highlight ._content ._image {
position: relative;
width: 100%;
display: block; }
.popup_highlight ._content ._image img {
display: none;
width: 100%;
height: auto; }
.popup_highlight ._content ._image img._image-pc {
display: block; }
@media only screen and (max-width: 768px) {
.popup_highlight ._content ._image img._image-pc {
display: none; }
.popup_highlight ._content ._image img._image-tablet {
display: block; } }
@media only screen and (max-width: 480px) {
.popup_highlight ._content ._image img._image-tablet {
display: none; }
.popup_highlight ._content ._image img._image-mobile {
display: block; } }
.popup_highlight ._content .close_popup_highlight {
position: absolute;
z-index: 1;
right: 10px;
top: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #3d3a3d;
color: #ffffff;
font-family: 'iCielGotham-Book';
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
border: 1px solid #3d3a3d;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
@media only screen and (max-width: 480px) {
.popup_highlight ._content .close_popup_highlight {
right: 10px;
top: 10px;
width: 25px;
height: 25px;
font-size: 12px; } }
.popup_highlight ._content .close_popup_highlight:hover {
border: 1px solid #ffff00; }
.popup_highlight ._content ._btn-more {
position: absolute;
top: 0;
left: 54.7%;
right: 0;
bottom: 0; }
@media only screen and (max-width: 768px) {
.popup_highlight ._content ._btn-more {
left: 0; } }
.popup_highlight ._content ._btn-more .btn_link {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
margin: 0 auto;
margin-top: 97%; }
@media only screen and (max-width: 768px) {
.popup_highlight ._content ._btn-more .btn_link {
font-size: 20px;
height: 55px;
width: 190px;
margin-top: calc(100% + 70px);
z-index: 2; } }
@media only screen and (max-width: 480px) {
.popup_highlight ._content ._btn-more .btn_link {
font-size: 14px;
height: 40px;
width: 145px;
margin-top: calc(100% + 30px); } }
.popup_highlight ._content ._btn-hotline {
display: block;
position: absolute;
left: 54.7%;
right: 0;
bottom: 0;
top: auto;
z-index: 1;
height: 8%; }
@media only screen and (max-width: 768px) {
.popup_highlight ._content ._btn-hotline {
left: 0;
height: auto;
background-color: #403f41;
padding: 11px 15px; } }
@media only screen and (max-width: 480px) {
.popup_highlight ._content ._btn-hotline {
padding: 7px 15px; } }
.popup_highlight ._content ._btn-hotline img {
display: none;
max-width: 100%;
height: auto;
margin: 0 auto; }
@media only screen and (max-width: 768px) {
.popup_highlight ._content ._btn-hotline img {
display: block; } }
@media only screen and (max-width: 480px) {
.popup_highlight ._content ._btn-hotline img {
max-width: 50%; } }
.overlay-popup-banner {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.65);
z-index: 110;
opacity: 0;
pointer-events: none;
transition: all .3s ease; }
.overlay-popup-banner.is-show {
opacity: 1;
pointer-events: all; }
.popup-banner {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 60.0292825769%;
display: flex;
transition: all .3s ease;
min-height: 450px;
opacity: 0;
pointer-events: none;
z-index: 111; }
.popup-banner.is-show {
opacity: 1;
pointer-events: all; }
.popup-banner ._layout {
position: absolute;
z-index: 2;
bottom: 0;
left: 1.8292682927%;
width: 22.3170731707%;
height: auto;
max-height: 70px; }
@media only screen and (min-width: 1600px) {
.popup-banner {
min-height: 550px; } }
@media only screen and (max-width: 1024px) {
.popup-banner {
width: 750px; } }
@media only screen and (max-width: 768px) {
.popup-banner {
width: calc(100% - 60px);
min-height: 550px;
flex-direction: column; }
.popup-banner ._layout {
width: auto;
max-height: 80px; } }
@media only screen and (max-width: 480px) {
.popup-banner {
position: absolute;
top: 80px;
transform: translate(-50%, 0);
width: calc(100% - 40px);
min-height: 400px; }
.popup-banner ._layout {
max-height: 40px; } }
@media only screen and (max-width: 320px) {
.popup-banner {
top: 40px; } }
.popup-banner ._close {
position: absolute;
top: 0;
right: 0;
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
color: #fff;
background-color: rgba(61, 58, 61, 0.65);
font-family: 'iCielGotham-Book';
z-index: 2;
cursor: pointer;
border-radius: 0 0 0 4px; }
@media only screen and (max-width: 768px) {
.popup-banner ._close {
background-color: rgba(255, 255, 255, 0.85);
color: #3d3a3d; } }
@media only screen and (max-width: 480px) {
.popup-banner ._close {
width: 22px;
height: 22px;
line-height: 22px; } }
.popup-banner ._right {
width: 58.1707317073%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media only screen and (max-width: 768px) {
.popup-banner ._right {
width: 100%;
height: 280px;
order: 1;
background-position: center 85%; } }
@media only screen and (max-width: 480px) {
.popup-banner ._right {
height: 110px; } }
.popup-banner ._left {
width: 41.8292682927%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding: 44px 4.2682926829% 80px 3.6585365854%; }
.popup-banner ._left ._title {
color: #fff;
margin-bottom: 20px; }
.popup-banner ._left ._title p {
margin: 0; }
.popup-banner ._left ._title p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 14px;
margin-bottom: 3px; }
.popup-banner ._left ._title p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 20px;
text-transform: uppercase; }
.popup-banner ._left ._p-banner-content ._note {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-family: 'Cabin';
margin-bottom: 15px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group {
position: static;
border-radius: 0;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
height: 28px;
margin-bottom: 8px;
padding: 0 6px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group input,
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group textarea {
font-family: 'Cabin';
font-weight: normal;
font-size: 10.5px;
color: rgba(255, 255, 255, 0.8);
height: 100%; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group input::-webkit-input-placeholder,
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group textarea::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.8); }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group input::-moz-placeholder,
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group textarea::-moz-placeholder {
color: rgba(255, 255, 255, 0.8); }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group input:-ms-input-placeholder,
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group textarea:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8); }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group input:-moz-placeholder,
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group textarea:-moz-placeholder {
color: rgba(255, 255, 255, 0.8); }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_description {
height: 84px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_description textarea {
width: 100%;
border: none;
outline: none;
background-color: transparent;
resize: none;
padding-top: 6px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box {
background-color: transparent;
padding-left: 6px;
margin-bottom: 0;
height: auto;
flex-wrap: wrap;
border: 0; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box ._label {
width: 100%;
margin-bottom: 10px;
font-family: 'Cabin';
font-weight: normal;
font-size: 10.5px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box ._label span {
font-style: italic;
font-size: 10px;
color: rgba(140, 140, 140, 0.8); }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio {
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
margin-bottom: 0px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item {
position: relative;
padding-right: 10px;
margin-bottom: 10px;
margin-right: 25px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label {
display: block;
padding-left: 20px;
padding-top: 3px;
line-height: 15px;
cursor: pointer;
font-family: 'Cabin';
font-weight: normal;
font-size: 10.5px;
color: rgba(255, 255, 255, 0.8);
margin: 0; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:before, .popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:after {
content: "";
position: absolute;
display: block;
border-radius: 50%;
overflow: hidden;
pointer-events: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:before {
left: 3px;
top: 6px;
width: 6px;
height: 6px;
background-color: transparent; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:after {
left: 0;
top: 3px;
width: 10px;
height: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: transparent; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label.check:before, .popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label.check:after {
border-radius: 0; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item input {
position: absolute;
left: 0;
width: 12px;
height: 10px;
margin: 0;
cursor: pointer;
opacity: 0;
border: 1px solid #403d40; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item input:checked + label:before {
background-color: #02a8a3; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .teaser-submit {
height: 28px;
width: 90px;
margin: 18px 0 0;
font-size: 10px;
letter-spacing: 0.5px;
line-height: 30px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .teaser-submit img {
width: 12px;
margin-left: 8px; }
@media only screen and (min-width: 1600px) {
.popup-banner ._left ._title {
margin-bottom: 25px; }
.popup-banner ._left ._title p:nth-of-type(1) {
font-size: 15px; }
.popup-banner ._left ._title p:nth-of-type(2) {
font-size: 25px; }
.popup-banner ._left ._p-banner-content ._note {
font-size: 15px;
margin-bottom: 20px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group {
height: 32px;
margin-bottom: 10px;
padding: 0 10px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group input,
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group textarea {
font-size: 12px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_description {
height: 100px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_description textarea {
padding-top: 10px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box {
padding-left: 10px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box ._label {
font-size: 12px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box ._label span {
font-size: 11.5px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label {
font-size: 12px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:before {
width: 7px;
height: 7px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:after {
width: 11px;
height: 11px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .teaser-submit {
height: 32px;
width: 118px;
margin: 25px 0 0;
font-size: 12px;
line-height: 34px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .teaser-submit img {
width: 14px; } }
@media only screen and (max-width: 768px) {
.popup-banner ._left {
width: 100%;
padding: 35px 20px 80px;
order: 2; }
.popup-banner ._left ._title {
text-align: center; }
.popup-banner ._left ._title p:nth-of-type(1) {
font-size: 22px; }
.popup-banner ._left ._title p:nth-of-type(2) {
font-size: 34px; }
.popup-banner ._left ._p-banner-content {
width: 410px;
margin: 0 auto; }
.popup-banner ._left ._p-banner-content ._note {
font-size: 18px;
text-align: center; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group {
height: 36px;
margin-bottom: 12px;
padding: 0 12px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group input,
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group textarea {
font-size: 14px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_description {
height: 125px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_description textarea {
padding-top: 12px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box {
padding-left: 12px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box ._label {
font-size: 14px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box ._label span {
font-size: 13.5px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item {
margin-right: 30px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label {
font-size: 14px;
padding-left: 27px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:before {
width: 9px;
height: 9px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:after {
width: 13px;
height: 13px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .teaser-submit {
height: 38px;
width: 140px;
margin: 25px auto 0;
font-size: 12px;
line-height: 40px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .teaser-submit img {
width: 14px;
margin-left: 10px; } }
@media only screen and (max-width: 480px) {
.popup-banner ._left {
width: 100%;
padding: 18px 15px 40px; }
.popup-banner ._left ._title {
margin-bottom: 15px; }
.popup-banner ._left ._title p:nth-of-type(1) {
font-size: 10px; }
.popup-banner ._left ._title p:nth-of-type(2) {
font-size: 15px; }
.popup-banner ._left ._p-banner-content {
width: 240px; }
.popup-banner ._left ._p-banner-content ._note {
font-size: 10px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group {
height: 28px;
margin-bottom: 8px;
padding: 0 6px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group input,
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group textarea {
font-size: 10.5px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_description {
height: 70px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_description textarea {
padding-top: 6px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box {
padding-left: 6px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box ._label {
font-size: 10.5px;
margin-bottom: 5px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box ._label span {
font-size: 10px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item {
margin-right: 25px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label {
font-size: 10.5px;
padding-left: 20px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:before {
width: 6px;
height: 6px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .form-group.frm_box .form-group-radio ._item label:after {
width: 8px;
height: 8px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .teaser-submit {
height: 28px;
width: 90px;
margin: 18px auto 0;
font-size: 10px;
line-height: 30px; }
.popup-banner ._left ._p-banner-content ._frm-p-banner .teaser-submit img {
width: 12px;
margin-left: 8px; } }
.popup-banner ._msg-success {
display: none; }
.popup-banner ._msg-success ._top {
display: flex;
align-items: center;
font-size: 20px;
text-transform: uppercase;
font-family: 'Cabin';
font-weight: bold;
color: #dabc6b;
margin-bottom: 16px;
margin-top: 50px; }
.popup-banner ._msg-success ._top img {
width: 23px;
height: auto;
margin-right: 10px; }
@media only screen and (max-width: 768px) {
.popup-banner ._msg-success ._top {
font-size: 24px;
margin-bottom: 26px;
margin-top: 60px;
justify-content: center; } }
@media only screen and (max-width: 480px) {
.popup-banner ._msg-success ._top {
font-size: 18px;
margin-bottom: 16px;
margin-top: 45px; } }
.popup-banner ._msg-success ._note {
line-height: 1.5;
margin-bottom: 25px; }
.popup-banner .frm_msg {
font-size: 14px;
font-family: 'Cabin';
font-weight: bold;
color: #dabc6b;
margin-top: 15px; }
@media only screen and (max-width: 768px) {
.popup-banner .frm_msg {
font-size: 16px;
margin-top: 25px; } }
@media only screen and (max-width: 480px) {
.popup-banner .frm_msg {
font-size: 14px;
margin-top: 15px; } }
.popup_advantage {
position: fixed;
z-index: 112000;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.65);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: all .3s ease-in-out; }
.popup_advantage.is-show {
opacity: 1;
pointer-events: all; }
.popup_advantage ._content {
position: relative;
width: 60%;
height: auto;
overflow: hidden; }
@media only screen and (max-width: 1024px) {
.popup_advantage ._content {
width: 90%; } }
@media only screen and (max-width: 480px) {
.popup_advantage ._content {
width: calc(100% - 20px); } }
.popup_advantage ._content img {
width: 100%;
height: auto; }
.popup_advantage ._content ._close {
position: absolute;
top: 0;
right: 0;
width: 28px;
height: 28px;
background-color: rgba(61, 58, 61, 0.65);
color: #ffffff;
font-family: 'iCielGotham-Book';
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
cursor: pointer; }
@media only screen and (max-width: 480px) {
.popup_advantage ._content ._close {
width: 22px;
height: 22px; } }
.popup-banner-gift {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 60.0292825769%;
transition: all .3s ease;
opacity: 0;
pointer-events: none;
z-index: 111; }
@media only screen and (max-width: 1024px) {
.popup-banner-gift {
width: 90%; } }
@media only screen and (max-width: 480px) {
.popup-banner-gift {
width: 95%; } }
.popup-banner-gift.is-open {
opacity: 1;
pointer-events: all; }
.popup-banner-gift ._bg-popup {
width: 100%;
height: auto; }
.popup-banner-gift ._close {
position: absolute;
top: 0;
right: 0;
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
color: #fff;
background-color: rgba(61, 58, 61, 0.65);
font-family: 'iCielGotham-Book';
z-index: 2;
cursor: pointer;
border-radius: 0 0 0 4px; }
@media only screen and (max-width: 768px) {
.popup-banner-gift ._close {
background-color: rgba(255, 255, 255, 0.85);
color: #3d3a3d; } }
@media only screen and (max-width: 480px) {
.popup-banner-gift ._close {
width: 22px;
height: 22px;
line-height: 22px; } }
.popup-banner-gift .btn_link {
position: absolute;
z-index: 2;
height: 34px;
width: 122px;
transform: translateX(-50%);
margin-bottom: 0;
margin-left: 0;
background: #51bcc0;
bottom: 25px;
right: 8%; }
@media only screen and (min-width: 1600px) {
.popup-banner-gift .btn_link {
bottom: 30px;
right: 10%;
height: 41px;
width: 143px; } }
@media only screen and (max-width: 768px) {
.popup-banner-gift .btn_link {
font-size: 13px;
bottom: 20px;
right: 4%; }
.popup-banner-gift .btn_link img {
max-width: 14px; } }
@media only screen and (max-width: 480px) {
.popup-banner-gift .btn_link {
font-size: 8px;
bottom: 12px;
height: 20px;
width: 72px;
right: 5%; }
.popup-banner-gift .btn_link img {
max-width: 10px;
margin-left: 5px; } }
@media only screen and (max-width: 375px) {
.popup-banner-gift .btn_link {
right: 2%; } }
@media only screen and (max-width: 320px) {
.popup-banner-gift .btn_link {
right: 0%; } }
.overlay-popup-banner-gift {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.65);
z-index: 110;
opacity: 0;
pointer-events: none;
transition: all .3s ease; }
.overlay-popup-banner-gift.is-open {
opacity: 1;
pointer-events: all; }
.overlay-popup-phong-lan {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.65);
z-index: 110;
opacity: 0;
pointer-events: none;
transition: all .3s ease; }
.overlay-popup-phong-lan.is-show {
opacity: 1;
pointer-events: all; }
.popup_phong_lan {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 900px;
display: flex;
transition: all .3s ease;
opacity: 0;
pointer-events: none;
z-index: 111; }
.popup_phong_lan.is-show {
opacity: 1;
pointer-events: all; }
@media only screen and (max-width: 768px) {
.popup_phong_lan {
width: calc(100% - 60px); } }
@media only screen and (max-width: 480px) {
.popup_phong_lan {
width: calc(100% - 40px); } }
.popup_phong_lan ._close {
position: absolute;
top: 0;
right: 0;
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
color: #fff;
background-color: rgba(61, 58, 61, 0.65);
font-family: 'iCielGotham-Bold';
z-index: 2;
cursor: pointer;
border-radius: 0 0 0 4px; }
@media only screen and (max-width: 768px) {
.popup_phong_lan ._close {
background-color: rgba(255, 255, 255, 0.85);
color: #3d3a3d; } }
@media only screen and (max-width: 480px) {
.popup_phong_lan ._close {
width: 22px;
height: 22px;
line-height: 22px; } }
.popup_phong_lan .swiper-container {
width: 100%;
height: 560px; }
@media only screen and (max-width: 1024px) {
.popup_phong_lan .swiper-container {
height: auto; } }
.popup_phong_lan .swiper-container .swiper-slide {
position: relative;
background-color: #2a6975; }
.popup_phong_lan .swiper-container .swiper-slide .img_popup {
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
display: block;
height: 100%;
width: 100%; }
@media only screen and (max-width: 1024px) {
.popup_phong_lan .swiper-container .swiper-slide .img_popup {
display: none; } }
.popup_phong_lan .swiper-container .swiper-slide ._img_mobi {
display: none; }
.popup_phong_lan .swiper-container .swiper-slide img {
display: block;
width: auto;
height: auto; }
@media only screen and (max-width: 1024px) {
.popup_phong_lan .swiper-container .swiper-slide {
background-image: none !important;
padding-bottom: 20px; }
.popup_phong_lan .swiper-container .swiper-slide ._img_mobi {
display: block;
max-width: 100%; } }
@media only screen and (max-width: 480px) {
.popup_phong_lan .swiper-container .swiper-slide {
padding-bottom: 40px; } }
.popup_phong_lan .swiper-container .swiper-slide ._top {
position: absolute;
z-index: 2;
top: 15px;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center; }
.popup_phong_lan .swiper-container .swiper-slide ._top ._logo {
max-width: 118px;
height: auto; }
@media only screen and (max-width: 480px) {
.popup_phong_lan .swiper-container .swiper-slide ._top ._logo {
max-width: 70px; } }
.popup_phong_lan .swiper-container .swiper-slide ._top ._text1 {
margin: 40px 0 15px; }
@media only screen and (max-width: 480px) {
.popup_phong_lan .swiper-container .swiper-slide ._top ._text1 {
max-width: 350px; } }
.popup_phong_lan .swiper-container .swiper-slide ._bottom {
position: absolute;
z-index: 2;
bottom: 45px;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center; }
.popup_phong_lan .swiper-container .swiper-slide ._bottom ._text3 {
margin-bottom: 10px; }
.popup_phong_lan .swiper-container .swiper-slide:nth-of-type(2) {
background-color: #403e41; }
.popup_phong_lan .swiper-container .swiper-slide:nth-of-type(2) ._bottom {
bottom: 30px; }
.popup_phong_lan .swiper-container .swiper-slide:nth-of-type(3) {
background-color: #2a6975; }
.popup_phong_lan .swiper-container .swiper-slide:nth-of-type(3) ._bottom {
bottom: 30px; }
.popup_phong_lan .swiper-container .swiper-slide:nth-of-type(3) ._bottom ._text6 {
margin-bottom: 8px;
max-width: 310px; }
.popup_phong_lan .swiper-container .swiper-slide:nth-of-type(3) ._bottom ._text7 {
max-width: 180px; }
@media only screen and (max-width: 480px) {
.popup_phong_lan .swiper-container .swiper-slide:nth-of-type(3) ._bottom ._text7 {
max-width: 110px; } }
.popup_phong_lan .swiper-container .swiper-pagination {
text-align: center;
width: 100%;
bottom: 0; }
.popup_phong_lan .swiper-container .swiper-pagination .swiper-pagination-bullet {
opacity: 1;
background-color: #fff;
width: 8px;
height: 8px;
margin: 4px; }
.popup_phong_lan .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #fdd86b; }
.compensate-for-scrollbar {
margin-right: 0px !important; }
.main_sales-agents {
position: relative;
overflow: hidden;
z-index: 1; }
.main_sales-agents .sales-agents_banner {
position: relative;
display: block;
width: 100%;
height: 405px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat; }
.main_sales-agents .sales-agents_banner ._title {
position: absolute;
top: 177px;
left: calc(100% / 12);
color: #fff;
text-transform: uppercase; }
.main_sales-agents .sales-agents_banner ._title p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 35px; }
.main_sales-agents .sales-agents_banner ._title p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 29.5px; }
@media only screen and (max-width: 480px) {
.main_sales-agents .sales-agents_banner {
height: 336px; }
.main_sales-agents .sales-agents_banner ._title {
top: 135px;
left: 10px; }
.main_sales-agents .sales-agents_banner ._title p:nth-of-type(1) {
font-size: 20px; }
.main_sales-agents .sales-agents_banner ._title p:nth-of-type(2) {
font-size: 20px; } }
.main_sales-agents .sales-agents_content {
position: relative;
margin-top: -98px;
z-index: 2;
padding: 0 calc(100% / 12) 40px;
box-sizing: border-box;
z-index: 1; }
.main_sales-agents .sales-agents_content ._parttern {
position: absolute;
right: 0;
bottom: -50%;
width: 22.5%;
z-index: -1; }
.main_sales-agents .sales-agents_content ._parttern img {
height: auto;
width: 100%; }
@media only screen and (max-width: 1024px) {
.main_sales-agents .sales-agents_content {
padding: 0 30px 40px; } }
@media only screen and (max-width: 480px) {
.main_sales-agents .sales-agents_content {
padding: 0 10px 40px;
margin-top: -128px; }
.main_sales-agents .sales-agents_content ._parttern {
display: none; } }
.main_sales-agents .sales-agents_content .sales-agents_list {
width: 100%;
display: flex;
flex-wrap: wrap; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item {
width: calc((100% - 40px) / 3);
margin-right: 20px;
margin-bottom: 20px;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
background: #fff; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item:nth-of-type(3n) {
margin-right: 0; }
@media only screen and (max-width: 768px) {
.main_sales-agents .sales-agents_content .sales-agents_list ._item {
width: calc((100% - 20px) / 2); }
.main_sales-agents .sales-agents_content .sales-agents_list ._item:nth-of-type(3n) {
margin-right: 20px; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item:nth-of-type(2n) {
margin-right: 0; } }
@media only screen and (max-width: 480px) {
.main_sales-agents .sales-agents_content .sales-agents_list ._item {
width: 100%;
margin-right: 0;
margin-bottom: 15px; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item:nth-of-type(3n) {
margin-right: 0; } }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #e8e8e8;
text-decoration: none; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top ._icon {
margin-right: 20px;
position: relative;
width: 61px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top ._icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
box-sizing: content-box;
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9); }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top ._icon img {
width: 100%;
height: auto; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top ._phone {
color: #3e3b3e; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top ._phone p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 16px; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top ._phone p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 20px; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top:hover ._icon {
-webkit-transform: scale(0.94);
-moz-transform: scale(0.94);
transform: scale(0.94); }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top:hover ._icon:after {
-webkit-animation: sonarEffect 0.75s ease-out 75ms;
-moz-animation: sonarEffect 0.75s ease-out 75ms;
-o-animation: sonarEffect 0.75s ease-out 75ms;
-ms-animation: sonarEffect 0.75s ease-out 75ms; }
@media only screen and (max-width: 375px) {
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top ._icon {
width: 50px;
margin-right: 10px; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top ._phone p:nth-of-type(1) {
font-size: 12px; }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-top ._phone p:nth-of-type(2) {
font-size: 16px; } }
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-bottom {
padding: 12px 26px;
color: #3d3a3d;
font-family: 'iCielGotham-Bold';
text-transform: uppercase;
font-size: 16px;
line-height: 22px;
text-align: center;
pointer-events: none; }
@media only screen and (max-width: 375px) {
.main_sales-agents .sales-agents_content .sales-agents_list ._item ._item-bottom {
padding: 10px 15px; } }
.paginator-block {
text-align: center;
margin-top: 20px; }
.paginator-block .page-numbers {
display: inline-block;
font-family: 'iCielGotham-Bold';
font-size: 16px;
color: #3d3a3d;
margin-right: 12px;
background-color: #fff;
border-radius: 50%;
width: 24px;
height: 24px;
line-height: 24px;
text-decoration: none; }
.paginator-block .page-numbers.current {
color: #fff;
background-color: #7cd0e5; }
.paginator-block .page-numbers:last-child {
margin-right: 0; }
@-webkit-keyframes sonarEffect {
0% {
opacity: 0.3; }
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #7cd0e5, 0 0 0 10px rgba(255, 255, 255, 0.5); }
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #7cd0e5, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.3);
opacity: 0; } }
@-moz-keyframes sonarEffect {
0% {
opacity: 0.3; }
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #7cd0e5, 0 0 0 10px rgba(255, 255, 255, 0.5); }
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #7cd0e5, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.3);
opacity: 0; } }
@-o-keyframes sonarEffect {
0% {
opacity: 0.3; }
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #7cd0e5, 0 0 0 10px rgba(255, 255, 255, 0.5); }
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #7cd0e5, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.3);
opacity: 0; } }
@keyframes sonarEffect {
0% {
opacity: 0.3; }
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #7cd0e5, 0 0 0 10px rgba(255, 255, 255, 0.5); }
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #7cd0e5, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.3);
opacity: 0; } }
.page_titlte {
padding: 175px calc(100% / 12) 0;
color: #3d3a3d;
text-transform: uppercase;
position: relative;
z-index: 1;
overflow: hidden; }
.page_titlte p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 35px;
line-height: 48px; }
.page_titlte p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 29.5px; }
@media only screen and (max-width: 768px) {
.page_titlte {
padding: 240px 40px 0; }
.page_titlte p:nth-of-type(1) {
font-size: 45px;
line-height: 56px; }
.page_titlte p:nth-of-type(2) {
font-size: 33px; } }
@media only screen and (max-width: 480px) {
.page_titlte {
padding: 180px 20px 30px 15px; }
.page_titlte p:nth-of-type(1) {
font-size: 27px;
line-height: 38px; }
.page_titlte p:nth-of-type(2) {
font-size: 22px; } }
.page_untilities {
width: 100%;
display: block;
position: relative; }
.page_untilities .page_titlte {
padding: 175px calc(100% / 12) 38px; }
.page_untilities .page_titlte .pattern1,
.page_untilities .page_titlte .pattern2,
.page_untilities .page_titlte .pattern3 {
position: absolute;
z-index: -1; }
.page_untilities .page_titlte .pattern1 img,
.page_untilities .page_titlte .pattern2 img,
.page_untilities .page_titlte .pattern3 img {
width: 100%;
height: auto; }
.page_untilities .page_titlte .pattern1 {
top: 0;
right: 0;
left: calc((100% / 12) * 7.75); }
.page_untilities .page_titlte .pattern3 {
top: 0;
right: 0;
left: calc((100% / 12) * 9); }
.page_untilities .page_titlte .pattern2 {
bottom: 0;
left: 0;
right: calc((100% / 12) * 9.5); }
@media only screen and (max-width: 768px) {
.page_untilities .page_titlte {
padding: 220px 40px 30px; }
.page_untilities .page_titlte .pattern1 {
top: 70px;
left: 43.2%; }
.page_untilities .page_titlte .pattern3 {
top: 70px;
left: 63%; }
.page_untilities .page_titlte .pattern2 {
display: none; } }
@media only screen and (max-width: 480px) {
.page_untilities .page_titlte {
padding: 170px 20px 30px 15px; }
.page_untilities .page_titlte .pattern1 {
top: 46px; }
.page_untilities .page_titlte .pattern3 {
top: 46px; } }
.untilities_list {
display: flex;
flex-wrap: wrap;
padding-bottom: 65px; }
@media only screen and (max-width: 480px) {
.untilities_list {
padding-bottom: 35px; } }
.untilities_list ._left {
width: calc((100% / 12) * 9);
position: relative; }
@media only screen and (max-width: 768px) {
.untilities_list ._left {
width: 100%;
order: 2;
padding-bottom: 20px; }
.untilities_list ._left:before {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background-color: #ffff00; } }
.untilities_list ._left img {
width: 100%;
height: auto;
display: block; }
.untilities_list ._left .utilities__location--list .utilities__location--item {
position: absolute;
top: 0;
font-size: 18px;
width: 35px;
height: 35px;
line-height: 28px;
z-index: 11;
border-radius: 50%;
background-color: #554f55;
color: #fff;
font-family: 'Elle Futura-Heavy';
border: 3px solid #fff;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
text-align: center; }
@media only screen and (max-width: 768px) {
.untilities_list ._left .utilities__location--list .utilities__location--item {
width: 30px;
height: 30px;
font-size: 15px;
line-height: 25px;
border: 2px solid #fff; } }
@media only screen and (max-width: 480px) {
.untilities_list ._left .utilities__location--list .utilities__location--item {
width: 22px;
height: 22px;
font-size: 10px;
line-height: 20px;
border: 1px solid #fff; } }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-order="1"] {
margin-top: 49%;
left: 56%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-order="2"] {
margin-top: 50%;
left: 69%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-order="3"] {
margin-top: 36%;
left: 82.5%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-order="4"] {
margin-top: 24.5%;
left: 82.5%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-order="5"] {
margin-top: 17.5%;
left: 68.5%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-order="6"] {
margin-top: 18.5%;
left: 56.5%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-order="7"] {
margin-top: 34.5%;
left: 57.5%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-order="plus1"] {
margin-top: 15%;
left: 64.7%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-number="plus2_1"] {
margin-top: 15.5%;
left: 82.7%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-number="plus2_2"] {
margin-top: 7.5%;
left: 82.7%; }
.untilities_list ._left .utilities__location--list .utilities__location--item[data-number="plus2_3"] {
margin-top: 3.6%;
left: 36.7%; }
.untilities_list ._left .utilities__location--list .utilities__location--item.plus {
width: 32px;
height: 32px;
line-height: 31px; }
@media only screen and (max-width: 768px) {
.untilities_list ._left .utilities__location--list .utilities__location--item.plus {
width: 30px;
height: 30px;
line-height: 29px; } }
@media only screen and (max-width: 480px) {
.untilities_list ._left .utilities__location--list .utilities__location--item.plus {
width: 22px;
height: 22px;
line-height: 21px; } }
.untilities_list ._left .utilities__location--list .utilities__location--item.plus .notice {
padding: 5px 5px 5px; }
.untilities_list ._left .utilities__location--list .utilities__location--item.plus .notice ._title {
margin-bottom: 0; }
.untilities_list ._left .utilities__location--list .utilities__location--item.plus .notice ._title span {
line-height: 32px; }
@media only screen and (max-width: 768px) {
.untilities_list ._left .utilities__location--list .utilities__location--item.plus .notice ._title span {
line-height: 39px; } }
@media only screen and (max-width: 480px) {
.untilities_list ._left .utilities__location--list .utilities__location--item.plus .notice ._title span {
line-height: 23px; } }
.untilities_list ._left .utilities__location--list .utilities__location--item.note1, .untilities_list ._left .utilities__location--list .utilities__location--item.note2, .untilities_list ._left .utilities__location--list .utilities__location--item.note3, .untilities_list ._left .utilities__location--list .utilities__location--item.note4 {
line-height: 34px;
background-color: #eecf82; }
@media only screen and (max-width: 768px) {
.untilities_list ._left .utilities__location--list .utilities__location--item.note1, .untilities_list ._left .utilities__location--list .utilities__location--item.note2, .untilities_list ._left .utilities__location--list .utilities__location--item.note3, .untilities_list ._left .utilities__location--list .utilities__location--item.note4 {
line-height: 30px; } }
@media only screen and (max-width: 480px) {
.untilities_list ._left .utilities__location--list .utilities__location--item.note1, .untilities_list ._left .utilities__location--list .utilities__location--item.note2, .untilities_list ._left .utilities__location--list .utilities__location--item.note3, .untilities_list ._left .utilities__location--list .utilities__location--item.note4 {
line-height: 24px; } }
.untilities_list ._left .utilities__location--list .utilities__location--item.note1 {
margin-top: 1%;
left: 62%; }
.untilities_list ._left .utilities__location--list .utilities__location--item.note2 {
margin-top: 42.2%;
left: 62.5%; }
.untilities_list ._left .utilities__location--list .utilities__location--item.note3 {
margin-top: 10%;
left: 62.5%; }
.untilities_list ._left .utilities__location--list .utilities__location--item.note4 {
margin-top: 27.5%;
left: 62.5%; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 16;
width: 196px;
box-sizing: border-box;
padding: 5px 5px 10px;
border-radius: 18px;
background-color: #fff;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice:before {
position: absolute;
content: "";
left: 50%;
bottom: -6px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._title {
display: flex;
align-items: center;
margin-bottom: 10px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._title p {
color: #554f55;
font-family: 'Cabin';
font-weight: bold;
font-size: 14px;
padding-left: 10px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._title span {
width: 28px;
height: 28px;
background-color: #51bcc0;
color: #fff;
font-family: 'Elle Futura-Heavy';
font-size: 18px;
line-height: 27px;
border-radius: 50%; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._item {
font-family: 'Cabin';
font-weight: normal;
font-size: 14px;
line-height: 18px;
color: rgba(61, 58, 61, 0.8);
max-height: 160px;
overflow: auto;
padding-left: 10px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._item .mCSB_container {
padding-left: 16px;
margin-right: 0 !important; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._item li {
list-style-type: disc;
padding: 0;
margin-bottom: 5px;
text-align: left; }
@media only screen and (max-width: 768px) {
.untilities_list ._left .utilities__location--list .utilities__location--item .notice {
width: 250px;
border-radius: 20px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice:before {
bottom: -10px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 10px solid #fff; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._title {
margin-bottom: 8px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._title p {
font-size: 18px;
padding-left: 15px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._title span {
width: 37px;
height: 37px;
font-size: 22px;
line-height: 34px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._item {
font-size: 18px;
height: auto;
padding-left: 15px;
line-height: 20px;
max-height: 168px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._item .mCSB_container {
padding-left: 18px; } }
@media only screen and (max-width: 480px) {
.untilities_list ._left .utilities__location--list .utilities__location--item .notice {
width: 145px;
border-radius: 14px;
left: 60%;
-webkit-transform: translateX(-60%);
-moz-transform: translateX(-60%);
transform: translateX(-60%);
padding: 5px 5px 7px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice:before {
bottom: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._title {
margin-bottom: 6px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._title p {
font-size: 10px;
padding-left: 5px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._title span {
width: 20px;
height: 20px;
font-size: 12px;
line-height: 20px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._item {
font-size: 10px;
padding-left: 8px;
line-height: 11px;
max-height: 109px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._item .mCSB_container {
padding-left: 14px; }
.untilities_list ._left .utilities__location--list .utilities__location--item .notice ._item li {
margin-bottom: 3px; } }
.untilities_list ._left .utilities__location--list .utilities__location--item.is--active {
z-index: 15;
backround-color: #42989b; }
.untilities_list ._left .utilities__location--list .utilities__location--item.is--active .notice {
opacity: 1;
pointer-events: all; }
.untilities_list ._right {
position: relative;
width: calc((100% / 12) * 3);
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/tien-ich/img4.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
box-sizing: border-box;
padding: 45px 3.7% 35px; }
.untilities_list ._right:before {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background-color: #ffff00; }
.untilities_list ._right .button-next-untilities,
.untilities_list ._right .button-prev-untilities {
width: 14px;
height: 7px;
background-size: 14px 7px;
margin: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
outline: none;
left: 3.5%;
display: none; }
.untilities_list ._right .button-next-untilities {
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/tien-ich/btn-next.png);
right: auto;
top: 230px; }
.untilities_list ._right .button-prev-untilities {
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/tien-ich/btn-back.png);
top: 200px; }
@media only screen and (max-width: 1024px) {
.untilities_list ._right {
padding: 35px 3.7% 60px 15px; }
.untilities_list ._right .button-next-untilities,
.untilities_list ._right .button-prev-untilities {
left: 90%; } }
@media only screen and (max-width: 768px) {
.untilities_list ._right {
width: 100%;
padding: 40px 16.67% 60px;
order: 1; }
.untilities_list ._right:before {
display: none; }
.untilities_list ._right .button-next-untilities,
.untilities_list ._right .button-prev-untilities {
left: 7%;
width: 28px;
height: 14px;
background-size: 28px 14px; }
.untilities_list ._right .button-next-untilities {
top: 420px; }
.untilities_list ._right .button-prev-untilities {
top: 360px; } }
@media only screen and (max-width: 480px) {
.untilities_list ._right {
padding: 35px 30px; }
.untilities_list ._right .button-next-untilities,
.untilities_list ._right .button-prev-untilities {
left: 10px;
width: 14px;
height: 7px;
background-size: 14px 7px; }
.untilities_list ._right .button-next-untilities {
top: 210px; }
.untilities_list ._right .button-prev-untilities {
top: 180px; } }
.untilities_list ._right ._title {
font-family: 'iCielGotham-Bold';
color: #fff;
font-size: 16px;
text-transform: uppercase;
margin-bottom: 16px;
text-align: center; }
@media only screen and (max-width: 768px) {
.untilities_list ._right ._title {
color: #fff;
font-size: 33px;
margin-bottom: 30px; } }
@media only screen and (max-width: 480px) {
.untilities_list ._right ._title {
font-size: 18px;
margin-bottom: 16px; } }
.untilities_list ._right .untilities_group {
position: relative;
box-sizing: border-box;
padding: 0; }
.untilities_list ._right .untilities_group a {
width: 100%;
height: 36px;
box-sizing: border-box;
padding: 0 5px;
border-radius: 40px;
background-color: #fff;
display: flex;
align-items: center;
margin-bottom: 5px;
font-family: 'Cabin';
font-weight: normal;
font-size: 14px; }
.untilities_list ._right .untilities_group a p {
color: #3d3a3d;
padding-left: 15px; }
.untilities_list ._right .untilities_group a span {
width: 29px;
height: 29px;
background-color: #554f55;
color: #fff;
line-height: 30px;
border-radius: 50%;
text-align: center; }
.untilities_list ._right .untilities_group a.untilities_note span {
line-height: 34px;
background-color: #eecf82; }
.untilities_list ._right .untilities_group a.untilities_single span {
line-height: 34px; }
.untilities_list ._right .untilities_group a.is--active span {
background-color: #51bcc0; }
@media only screen and (max-width: 768px) {
.untilities_list ._right .untilities_group a {
height: 83px;
padding: 0 15px;
border-radius: 80px;
margin-bottom: 10px;
font-size: 29px; }
.untilities_list ._right .untilities_group a p {
padding-left: 30px; }
.untilities_list ._right .untilities_group a span {
width: 62px;
height: 62px;
line-height: 62px; }
.untilities_list ._right .untilities_group a.untilities_note span {
line-height: 76px; }
.untilities_list ._right .untilities_group a.untilities_single span {
line-height: 76px; } }
@media only screen and (max-width: 480px) {
.untilities_list ._right .untilities_group a {
height: 36px;
padding: 0 5px;
border-radius: 36px;
margin-bottom: 5px;
font-size: 14px; }
.untilities_list ._right .untilities_group a p {
padding-left: 15px; }
.untilities_list ._right .untilities_group a span {
width: 29px;
height: 29px;
line-height: 30px; }
.untilities_list ._right .untilities_group a.untilities_note span {
line-height: 34px; }
.untilities_list ._right .untilities_group a.untilities_single span {
line-height: 34px; } }
.untilities_list ._right .untilities_group .swiper-container {
height: 100%;
height: 100%; }
.untilities_list ._right .untilities_group .swiper-container .swiper-slide {
height: 100%;
height: 100%; }
.untilities_detail {
padding: 65px 0;
position: relative; }
.untilities_detail .img-decor {
position: absolute;
bottom: 0;
right: 0;
left: calc((100% / 12) * 9); }
.untilities_detail .img-decor img {
width: 100%;
height: auto; }
.untilities_detail .item {
width: 100%;
height: 100%; }
.untilities_detail .item .swiper-slide {
position: relative; }
.untilities_detail .item .swiper-slide ._img {
width: calc((100% / 12) * 7);
display: inline-block;
float: left;
height: 390px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat;
z-index: 1;
position: relative; }
.untilities_detail .item .swiper-slide ._text {
position: relative;
z-index: 2;
width: calc((100% / 12) * 5);
display: inline-block;
float: left;
box-sizing: border-box;
padding: 120px 8.33% 80px 30px;
color: #3d3a3d; }
@media only screen and (max-width: 1024px) {
.untilities_detail .item .swiper-slide ._text {
padding: 100px 50px 80px 30px; } }
.untilities_detail .item .swiper-slide ._text ._untility_name {
font-family: 'iCielGotham-Book';
font-size: 40px;
margin-bottom: 15px; }
@media only screen and (max-width: 1024px) {
.untilities_detail .item .swiper-slide ._text ._untility_name {
font-size: 36px; } }
.untilities_detail .item .swiper-slide ._text ._description {
font-family: 'Cabin';
font-weight: normal;
font-size: 14px;
padding-left: 40px; }
.untilities_detail .item .swiper-slide ._text .img-decor {
position: absolute;
top: 0;
right: calc((100% / 5) * 3.15);
left: calc((100% / 5) * -0.5);
z-index: -1; }
.untilities_detail .item .swiper-slide ._text .img-decor img {
width: 100%;
height: auto; }
.untilities_detail .item .swiper-button-next,
.untilities_detail .item .swiper-button-prev {
width: 14px;
height: 7px;
background-size: 14px 7px;
margin: 0;
top: auto;
bottom: 48px;
opacity: 1; }
.untilities_detail .item .swiper-button-next {
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/tien-ich/btn-next.png);
right: calc((100% / 12) * 3.65); }
.untilities_detail .item .swiper-button-prev {
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/tien-ich/btn-back.png);
left: calc((100% / 12) * 7.75); }
.utilities__location--item .notice ._item .mCSB_scrollTools,
.untilities_group .mCSB_scrollTools {
width: 2px; }
.utilities__location--item .notice ._item .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.untilities_group .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #51bcc0;
width: 1px;
opacity: 1; }
.utilities__location--item .notice ._item .mCSB_scrollTools .mCSB_draggerRail,
.untilities_group .mCSB_scrollTools .mCSB_draggerRail {
width: 1px;
background-color: #554f55;
opacity: 1; }
main {
overflow: hidden; }
.section_title span {
display: block;
color: #3d3a3d;
text-transform: uppercase; }
.section_title span:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 29px;
letter-spacing: 1.5px; }
@media only screen and (max-width: 1280px) {
.section_title span:nth-of-type(1) {
font-size: 26px; } }
@media only screen and (max-width: 1024px) {
.section_title span:nth-of-type(1) {
font-size: 22px; } }
@media only screen and (max-width: 768px) {
.section_title span:nth-of-type(1) {
font-size: 45px; } }
.section_title span:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 22px;
letter-spacing: 1.2px;
line-height: 35px; }
@media only screen and (max-width: 1280px) {
.section_title span:nth-of-type(2) {
font-size: 20px; } }
@media only screen and (max-width: 1024px) {
.section_title span:nth-of-type(2) {
font-size: 18px; } }
@media only screen and (max-width: 768px) {
.section_title span:nth-of-type(2) {
font-size: 33px;
line-height: 43px; } }
.section_desc {
font-size: 14px;
font-family: 'Cabin';
color: #3d3a3d;
line-height: 24px;
padding-left: 50px;
padding-right: 44%;
margin-top: 20px; }
.section_desc p {
margin-bottom: 10px; }
@media only screen and (max-width: 768px) {
.section_desc p {
margin-bottom: 30px; } }
.section_desc p:last-child {
margin-bottom: 0; }
@media only screen and (max-width: 768px) {
.section_desc {
font-size: 28px;
line-height: 40px;
padding-right: 0px;
margin-top: 30px; } }
.btn_link {
position: relative;
overflow: hidden;
font-family: 'Cabin';
font-size: 13px;
margin-left: 50px;
color: #ffffff;
text-transform: uppercase;
font-weight: 500;
display: inline-block;
background: linear-gradient(to right, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%);
height: 41px;
width: 143px;
border-radius: 40px;
margin-top: 30px;
margin-bottom: 30px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
-webkit-box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.15); }
.btn_link img {
display: block;
max-width: 14px;
height: auto;
margin-left: 10px; }
@media only screen and (max-width: 768px) {
.btn_link img {
max-width: 22px; } }
@media only screen and (max-width: 480px) {
.btn_link img {
max-width: 14px; } }
.btn_link span {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden; }
.btn_link span:before {
position: absolute;
top: -78px;
left: 0;
width: 110%;
height: 65%;
background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: transform 0.6s;
-moz-transition: transform 0.6s;
transition: transform 0.6s;
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
-moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
content: ''; }
.btn_link:hover {
color: #ffffff; }
.btn_link:hover span:before {
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 350%, 0);
-moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 350%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 350%, 0); }
.btn_link:focus {
color: #ffffff;
outline-width: inherit; }
@media only screen and (max-width: 768px) {
.btn_link {
font-size: 26px;
height: 70px;
width: 261px;
margin-top: 40px;
margin-bottom: 0px; } }
.pagination_slide {
height: 22px;
bottom: 23px;
display: flex;
align-items: center;
justify-content: center;
width: 100%; }
@media only screen and (max-width: 768px) {
.pagination_slide {
height: 40px;
bottom: 40px; } }
.pagination_slide .swiper-pagination-bullet {
position: relative;
width: 4px;
height: 4px;
border: 1px solid transparent;
background-color: #ffffff;
margin: 0px 5px;
opacity: 1; }
.pagination_slide .swiper-pagination-bullet:focus {
outline-width: inherit; }
.pagination_slide .swiper-pagination-bullet:first-child {
margin-left: 0px; }
.pagination_slide .swiper-pagination-bullet:last-child {
margin-right: 0px; }
@media only screen and (max-width: 768px) {
.pagination_slide .swiper-pagination-bullet {
margin: 0px 10px !important;
width: 10px;
height: 10px; } }
@media only screen and (max-width: 480px) {
.pagination_slide .swiper-pagination-bullet {
margin: 0px 5px !important;
width: 4px;
height: 4px; } }
.pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 22px;
height: 22px;
border: 1px solid #5dcdda;
background-color: transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
@media only screen and (max-width: 768px) {
.pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 40px;
height: 40px; } }
.pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #5dcdda; }
@media only screen and (max-width: 768px) {
.pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
width: 10px;
height: 10px; } }
.banner_decor {
position: absolute;
left: 0;
right: 0;
top: auto;
bottom: 0;
z-index: 1; }
.banner_decor img {
display: block;
width: 100%;
height: auto; }
.section_1 {
position: relative; }
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item {
position: relative;
height: 100vh;
width: 100%;
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat; }
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item:before {
position: absolute;
content: "";
width: 100%;
left: 0px;
right: 0px;
top: 0px;
bottom: auto;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/home/banner-before.png);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
height: 16.112%; }
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item:after {
position: absolute;
content: "";
width: 100%;
left: 0px;
right: 0px;
top: auto;
bottom: 0px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/home/banner-after.png);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
height: 66.445%; }
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text {
position: absolute;
bottom: 70px;
left: 15px;
right: 15px;
z-index: 1;
padding: 0px 40px;
text-align: center; }
@media only screen and (max-width: 768px) {
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text {
bottom: 90px; } }
@media only screen and (max-width: 480px) {
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text {
bottom: 60px; } }
@media only screen and (max-width: 320px) {
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text {
left: 5px;
right: 5px; } }
@media only screen and (max-width: 480px) {
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text .title .slider-title1 {
font-size: 14px;
line-height: 22px; } }
@media only screen and (max-width: 320px) {
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text .title .slider-title1 {
font-size: 13px; } }
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text .desc {
font-family: 'Cabin';
font-size: 14px;
color: #ffffff;
line-height: 22px;
text-align: center;
max-width: 60.0694444444%;
margin: 20px auto 0px; }
@media only screen and (max-width: 768px) {
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text .desc {
display: none; } }
.section_2 {
position: relative;
z-index: 1; }
@media only screen and (max-width: 768px) {
.section_2 {
padding-bottom: 65px; } }
.section_2 .hightlight {
display: inline-block;
position: absolute;
left: auto;
right: calc(100% / 12);
top: 11%;
text-align: center; }
@media only screen and (max-width: 768px) {
.section_2 .hightlight {
display: none; } }
.section_2 .hightlight p {
display: block;
color: #ffffff;
text-transform: uppercase; }
.section_2 .hightlight p:nth-of-type(1) {
font-family: 'UTM Essendine Caps';
font-size: 83px;
letter-spacing: 1px; }
@media only screen and (max-width: 1024px) {
.section_2 .hightlight p:nth-of-type(1) {
font-size: 63px; } }
.section_2 .hightlight p:nth-of-type(2) {
font-family: 'iCielGotham-Medium';
font-size: 40px;
letter-spacing: 11px;
line-height: 45px; }
@media only screen and (max-width: 1024px) {
.section_2 .hightlight p:nth-of-type(2) {
font-size: 20px;
line-height: 24px; } }
.section_2 .hightlight p:nth-of-type(2) span {
margin-left: 35px; }
@media only screen and (max-width: 1024px) {
.section_2 .hightlight p:nth-of-type(2) span {
margin-left: 15px; } }
.section_2 .text {
padding-left: calc(100% / 12);
padding-top: 13.1%; }
@media only screen and (min-width: 2559px) {
.section_2 .text {
padding-top: 9%; } }
@media only screen and (max-width: 1024px) {
.section_2 .text {
padding-left: 30px; } }
@media only screen and (max-width: 768px) {
.section_2 .text {
padding-left: 40px;
padding-right: 40px;
padding-top: 70px; } }
.section_2 .section_2_decor {
position: absolute;
left: auto;
right: 0px;
bottom: auto;
top: 0px;
z-index: -1;
width: 73.362%;
height: auto; }
.section_2 .section_2_decor img {
display: block;
width: 100%; }
@media only screen and (max-width: 768px) {
.section_2 .section_2_decor img {
display: none; } }
@media only screen and (min-width: 2559px) {
.section_2 .section_2_decor {
width: 42.5%; } }
@media only screen and (max-width: 1920px) {
.section_2 .section_2_decor {
width: 62.5%; } }
@media only screen and (max-width: 1440px) {
.section_2 .section_2_decor {
width: 73.362%; } }
@media only screen and (max-width: 768px) {
.section_2 .section_2_decor {
width: 35.334%;
height: 91.046%;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/home/section_2_decor_mobile.png);
background-size: cover;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%); } }
.section_3 {
position: relative;
padding-top: 60px;
padding-bottom: 65px; }
@media only screen and (max-width: 1024px) {
.section_3 {
padding-top: 10px; } }
@media only screen and (max-width: 768px) {
.section_3 {
padding-bottom: 45px; } }
.section_3 .section_title {
text-align: center;
padding: 0px 40px; }
.section_3 .section_title span {
display: flex;
align-items: center;
justify-content: center;
text-transform: inherit;
font-family: 'iCielGotham-Medium';
font-size: 25px; }
.section_3 .section_title span.text-bold {
font-family: 'iCielGotham-Bold'; }
.section_3 .section_title span.img {
margin: 0 13px; }
.section_3 .section_title span img {
width: auto;
height: auto; }
.section_3 .section_title .img-mobile {
display: none; }
.section_3 .section_title .img-mobile img {
width: 16px;
height: auto; }
@media only screen and (max-width: 480px) {
.section_3 .section_title span {
flex-direction: column; }
.section_3 .section_title span:nth-of-type(1), .section_3 .section_title span:nth-of-type(2) {
font-size: 20px; }
.section_3 .section_title span img {
display: none; }
.section_3 .section_title .img-mobile {
display: block; } }
@media only screen and (max-width: 320px) {
.section_3 .section_title span:nth-of-type(1), .section_3 .section_title span:nth-of-type(2) {
font-size: 17px; } }
.section_3 ._list {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
padding: 0px calc(100% / 12); }
@media only screen and (max-width: 1024px) {
.section_3 ._list {
padding: 0px 30px; } }
@media only screen and (max-width: 768px) {
.section_3 ._list {
padding: 0px;
margin: 25px 40px 0px; } }
.section_3 ._list .swiper-container {
overflow: inherit !important;
width: 100%; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide {
height: 277px;
background-color: #ffffff;
border-bottom: 1px solid #dadada;
border-left: 1px solid #dadada; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(1), .section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(3), .section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) {
border-top: 1px solid #dadada; }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(1), .section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(3), .section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) {
border: none; } }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5), .section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(6) {
border-right: 1px solid #dadada; }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5), .section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(6) {
border: none; } }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item {
position: relative;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item {
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/home/section_3_before.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat;
-webkit-box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.15); } }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-color: rgba(124, 208, 229, 0.9);
opacity: 0;
z-index: 2; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm .image {
max-width: 90%;
min-height: 58px;
margin: 0 auto;
display: flex;
align-items: flex-end;
z-index: 1; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm .image img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm .image img.img {
display: block;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm .image img.img {
display: none;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
-webkit-transition: all 0s ease-in-out;
transition: all 0s ease-in-out; } }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm .image img.img-hover {
display: none;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm .image img.img-hover {
display: block;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
-webkit-transition: all 0s ease-in-out;
transition: all 0s ease-in-out; } }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm .text {
font-family: 'Cabin';
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #3d3a3d;
margin-top: 15px;
padding: 0px 15px;
line-height: 22px;
z-index: 1; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item_hover {
background-repeat: no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%); }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item_hover {
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
-webkit-transition: all 0s ease-in-out;
transition: all 0s ease-in-out; } }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover ._item {
top: -1px;
-webkit-transform: scaleX(1.1063);
-moz-transform: scaleX(1.1063);
transform: scaleX(1.1063);
height: 307px;
z-index: 2; }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover ._item {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
height: 100%; } }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover ._item:before {
opacity: 1; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover ._item ._item-fm .image {
z-index: 2; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover ._item ._item-fm .image img.img {
display: none; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover ._item ._item-fm .image img.img-hover {
display: block; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover ._item ._item-fm .text {
color: #ffffff;
z-index: 2; }
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover ._item_hover {
opacity: 1;
-webkit-box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.15); }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover ._item_hover {
height: 100%;
margin-top: 0px;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
-webkit-transition: all 0s ease-in-out;
transition: all 0s ease-in-out; } }
@media only screen and (max-width: 1024px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide:hover {
z-index: inherit; } }
.section_3 .swiper-pagination {
display: none; }
@media only screen and (max-width: 480px) {
.section_3 .swiper-pagination {
display: flex;
bottom: auto;
margin-top: 30px; }
.section_3 .swiper-pagination .swiper-pagination-bullet {
background-color: #5dcdda;
width: 10px;
height: 10px; } }
@media only screen and (max-width: 480px) and (max-width: 480px) {
.section_3 .swiper-pagination .swiper-pagination-bullet {
width: 4px;
height: 4px; } }
@media only screen and (max-width: 480px) {
.section_3 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: transparent;
width: 40px;
height: 40px; } }
@media only screen and (max-width: 480px) and (max-width: 480px) {
.section_3 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 22px;
height: 22px; } }
@media only screen and (max-width: 480px) {
.section_3 .swiper-pagination {
margin-top: 15px; } }
.section_4 {
padding: 0px calc(100% / 12);
margin-top: 15px;
display: flex;
align-items: center; }
@media only screen and (max-width: 1024px) {
.section_4 {
padding: 0px 30px;
margin-top: 10px; } }
@media only screen and (max-width: 768px) {
.section_4 {
padding: 0px 40px;
margin-top: 60px;
flex-direction: column; } }
@media only screen and (max-width: 480px) {
.section_4 {
margin-top: 40px;
padding: 0px 20px; } }
.section_4 .left {
width: calc(100% - 67.667%);
float: left; }
@media only screen and (max-width: 768px) {
.section_4 .left {
width: 100%;
order: 2; } }
.section_4 .left .section_title {
display: block; }
@media only screen and (max-width: 768px) {
.section_4 .left .section_title {
display: none; } }
.section_4 .left .section_desc {
padding-left: 40px;
padding-right: 23%; }
@media only screen and (max-width: 768px) {
.section_4 .left .section_desc {
padding-left: 0px;
padding-right: 0px;
margin-top: 35px; } }
@media only screen and (max-width: 480px) {
.section_4 .left .section_desc {
margin-top: 15px; } }
.section_4 .left .swiper-pagination {
padding-left: 10.6%;
position: relative;
text-align: left;
bottom: auto;
margin-top: 30px;
justify-content: flex-start; }
@media only screen and (max-width: 768px) {
.section_4 .left .swiper-pagination {
display: none; } }
.section_4 .left .swiper-pagination .swiper-pagination-bullet {
background-color: #5dcdda; }
.section_4 .left .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: transparent; }
.section_4 .right {
position: relative;
width: 67.667%;
float: left; }
@media only screen and (max-width: 768px) {
.section_4 .right {
width: 100%;
margin-top: 0;
order: 1; } }
.section_4 .right .section_title {
display: none; }
@media only screen and (max-width: 768px) {
.section_4 .right .section_title {
display: block;
text-align: center;
margin-bottom: 25px; } }
@media only screen and (max-width: 480px) {
.section_4 .right .section_title {
margin-bottom: 15px; } }
@media only screen and (max-width: 768px) {
.section_4 .right .swiper-container .swiper-wrapper {
padding-bottom: 60px; } }
@media only screen and (max-width: 480px) {
.section_4 .right .swiper-container .swiper-wrapper {
padding-bottom: 40px; } }
.section_4 .right .swiper-container .swiper-wrapper .swiper-slide {
width: 100% !important;
height: 100%; }
.section_4 .right .swiper-container .swiper-wrapper .swiper-slide .item {
width: 100%;
height: 627px;
background-size: cover;
background-position: bottom right;
background-repeat: no-repeat; }
@media only screen and (max-width: 768px) {
.section_4 .right .swiper-container .swiper-wrapper .swiper-slide .item {
height: 510px; } }
@media only screen and (max-width: 480px) {
.section_4 .right .swiper-container .swiper-wrapper .swiper-slide .item {
height: 300px; } }
.section_4 .right .swiper-container .pagination_slide {
display: none; }
@media only screen and (max-width: 768px) {
.section_4 .right .swiper-container .pagination_slide {
display: flex;
bottom: 0; }
.section_4 .right .swiper-container .pagination_slide .swiper-pagination-bullet {
background-color: #5dcdda; }
.section_4 .right .swiper-container .pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: transparent; } }
@media only screen and (max-width: 480px) {
.section_4 .right .swiper-container .pagination_slide {
bottom: 15px; } }
.section_4 .right .banner_decor {
left: auto;
right: 0;
bottom: 0;
top: 0; }
@media only screen and (max-width: 768px) {
.section_4 .right .banner_decor {
display: none;
bottom: 25px; } }
.section_5 {
position: relative;
padding-left: 30px;
margin: 50px auto 65px; }
@media only screen and (max-width: 1024px) {
.section_5 {
margin: 40px auto; } }
@media only screen and (max-width: 768px) {
.section_5 {
margin-top: 55px;
padding-left: 40px;
padding-right: 40px; } }
@media only screen and (max-width: 480px) {
.section_5 {
margin-top: 30px;
padding: 0px 20px;
margin-bottom: 30px; } }
.section_5 .decor_mobile {
display: none; }
@media only screen and (max-width: 768px) {
.section_5 .decor_mobile {
display: block;
position: absolute;
right: 0;
top: -55px;
z-index: -1; } }
@media only screen and (max-width: 480px) {
.section_5 .decor_mobile {
max-width: 40%;
top: -30px; } }
.section_5 .right {
order: 1;
width: 62.946%; }
@media only screen and (max-width: 768px) {
.section_5 .right {
width: 100%; } }
.section_5 .right .swiper-container .swiper-wrapper .swiper-slide .item {
background-position: bottom left !important; }
.section_5 .right .banner_decor {
left: 0;
right: auto;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); }
.section_5 .left {
position: absolute;
order: 2;
width: calc(100% - 62.946%);
z-index: 2;
right: calc(100% / 12);
top: 65%;
-webkit-transform: translateY(-65%);
-moz-transform: translateY(-65%);
transform: translateY(-65%); }
@media only screen and (max-width: 1024px) {
.section_5 .left {
right: 30px; } }
@media only screen and (max-width: 768px) {
.section_5 .left {
width: 100%;
position: relative;
top: inherit;
transform: inherit;
right: auto; } }
.section_5 .left .section_title {
padding-left: calc(9.6% + 50px); }
@media only screen and (max-width: 1024px) {
.section_5 .left .section_title {
padding-left: 55px; } }
@media only screen and (max-width: 768px) {
.section_5 .left .section_title {
padding-left: 0px;
padding-right: 0px; } }
.section_5 .left .section_desc {
padding-right: 0px;
padding-left: calc((9.6% + 50px) + 40px); }
@media only screen and (max-width: 1024px) {
.section_5 .left .section_desc {
padding-left: 95px; } }
@media only screen and (max-width: 768px) {
.section_5 .left .section_desc {
padding-left: 0px; } }
.section_5 .left .swiper-pagination {
padding-left: calc((9.6% + 50px) + 40px); }
@media only screen and (max-width: 1024px) {
.section_5 .left .swiper-pagination {
padding-left: 95px; } }
.section_5 .left .section_5_decor {
position: absolute;
top: -145px;
left: -3px;
bottom: auto;
right: auto;
z-index: -1;
width: 297px;
height: 297px;
border-radius: 50%; }
.section_5 .left .section_5_decor img {
display: block;
width: 100%;
height: 100%; }
@media only screen and (max-width: 1024px) {
.section_5 .left .section_5_decor {
left: -35px;
top: -110px; } }
@media only screen and (max-width: 768px) {
.section_5 .left .section_5_decor {
display: none; } }
.section_6 {
position: relative;
padding: 0px 30px 10px calc(100% / 12);
display: flex;
align-items: center; }
@media only screen and (max-width: 1024px) {
.section_6 {
padding-left: 30px; } }
@media only screen and (max-width: 768px) {
.section_6 {
flex-direction: column;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px; } }
@media only screen and (max-width: 480px) {
.section_6 {
padding-top: 0;
padding-bottom: 0; } }
.section_6 .decor_mobile {
display: none; }
@media only screen and (max-width: 768px) {
.section_6 .decor_mobile {
display: block;
position: absolute;
left: 0;
top: -15px;
z-index: -1;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); } }
@media only screen and (max-width: 480px) {
.section_6 .decor_mobile {
max-width: 40%; } }
.section_6 .right {
position: relative;
width: 100%;
float: left; }
@media only screen and (max-width: 768px) {
.section_6 .right {
width: 100%; } }
.section_6 .right .content-wrap {
position: relative; }
.section_6 .right .content-wrap .item {
position: relative;
padding-left: calc(100% - 67.287%); }
@media only screen and (max-width: 768px) {
.section_6 .right .content-wrap .item {
padding-left: 0px; } }
.section_6 .right .content-wrap .item .section_6_slide {
position: relative;
padding-right: 30px;
padding-left: 30px; }
.section_6 .right .content-wrap .item .section_6_slide:before {
position: absolute;
content: '';
background-color: #83ddf3;
height: calc(100% - 40px);
width: calc(100% - 30px);
left: 15px;
margin-top: 20px;
right: 15px;
top: 0;
z-index: 1; }
.section_6 .right .content-wrap .item .section_6_slide:after {
position: absolute;
content: '';
background-color: #9eecff;
height: calc(100% - 80px);
width: 100%;
left: 0px;
margin-top: 40px;
right: 0px;
top: 0; }
.section_6 .right .content-wrap .item .section_6_slide .swiper-container {
width: 100%;
-webkit-box-shadow: 0 10px 60px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 10px 60px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0 10px 60px 0px rgba(0, 0, 0, 0.2); }
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-wrapper .swiper-slide {
width: 100% !important;
height: 100%; }
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-wrapper .swiper-slide .item {
display: block;
position: relative;
width: 100%;
height: 628px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat; }
@media only screen and (max-width: 768px) {
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-wrapper .swiper-slide .item {
height: 510px; } }
@media only screen and (max-width: 480px) {
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-wrapper .swiper-slide .item {
height: 300px; } }
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-wrapper .swiper-slide .item:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/home/section_6_before.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom; }
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-wrapper .swiper-slide .item .title {
position: absolute;
bottom: 55px;
width: 100%;
left: 0;
right: 0;
font-family: 'Cabin';
font-weight: bold;
font-size: 18px;
color: #ffffff;
padding: 0px 15px;
text-align: center; }
@media only screen and (max-width: 768px) {
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-wrapper .swiper-slide .item .title {
font-size: 28px;
bottom: 25px; } }
@media only screen and (max-width: 480px) {
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-wrapper .swiper-slide .item .title {
font-size: 18px; } }
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-pagination {
display: flex;
bottom: 20px; }
@media only screen and (max-width: 768px) {
.section_6 .right .content-wrap .item .section_6_slide .swiper-container .swiper-pagination {
display: none; } }
.section_6 .right .content-wrap .item .pagination_slide {
display: none; }
@media only screen and (max-width: 768px) {
.section_6 .right .content-wrap .item .pagination_slide {
position: relative;
display: flex;
bottom: auto;
margin-top: 25px; }
.section_6 .right .content-wrap .item .pagination_slide .swiper-pagination-bullet {
background-color: #5dcdda; }
.section_6 .right .content-wrap .item .pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: transparent; } }
@media only screen and (max-width: 480px) {
.section_6 .right .content-wrap .item .pagination_slide {
margin-top: 215x; } }
.section_6 .right .content-wrap .item .btn_link {
position: absolute;
margin: 0;
top: 450px;
left: 0; }
@media only screen and (max-width: 768px) {
.section_6 .right .content-wrap .item .btn_link {
position: static;
margin: 35px auto 0; } }
@media only screen and (max-width: 480px) {
.section_6 .right .content-wrap .item .btn_link {
margin: 20px auto 0px; } }
.section_6 .right .btn_link {
display: none; }
@media only screen and (max-width: 768px) {
.section_6 .right .btn_link {
display: flex;
margin: 35px auto 0px; } }
@media only screen and (max-width: 480px) {
.section_6 .right .btn_link {
margin: 20px auto 0px; } }
.section_6 .left {
z-index: 1;
float: left;
padding-right: 10px;
position: absolute;
left: calc(100% / 12); }
@media only screen and (max-width: 1024px) {
.section_6 .left {
left: 30px; } }
@media only screen and (max-width: 768px) {
.section_6 .left {
position: static;
width: 100%;
padding-right: 0px;
padding: 0px 30px; } }
@media only screen and (max-width: 480px) {
.section_6 .left {
padding: 0px 10px; } }
@media only screen and (max-width: 768px) {
.section_6 .left .section_title {
text-align: center; } }
.section_6 .left .navigation {
margin-top: 50px; }
@media only screen and (max-width: 768px) {
.section_6 .left .navigation {
margin-top: 10px;
margin-bottom: 30px; } }
@media only screen and (max-width: 480px) {
.section_6 .left .navigation {
text-align: center;
margin-bottom: 15px;
margin-top: 5px; } }
.section_6 .left .navigation li {
margin-top: 12px; }
@media only screen and (max-width: 768px) {
.section_6 .left .navigation li {
display: inline-block;
margin-right: 60px; }
.section_6 .left .navigation li:last-child {
margin-right: 0px; } }
@media only screen and (max-width: 480px) {
.section_6 .left .navigation li {
margin-right: 0;
width: 100%;
margin-top: 10px; } }
.section_6 .left .navigation li a {
position: relative;
display: inline-flex;
align-items: center;
font-family: 'iCielGotham-Bold';
font-size: 14px;
text-transform: uppercase;
color: #3d3a3d;
text-decoration: none;
letter-spacing: 0.7px; }
@media only screen and (max-width: 768px) {
.section_6 .left .navigation li a {
font-size: 20px; } }
@media only screen and (max-width: 480px) {
.section_6 .left .navigation li a {
font-size: 14px; } }
.section_6 .left .navigation li a img {
margin-left: 10px;
display: block;
max-width: 14px;
height: auto;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
@media only screen and (max-width: 768px) {
.section_6 .left .navigation li a img {
display: none; } }
.section_6 .left .navigation li a span {
position: relative; }
.section_6 .left .navigation li a:hover img {
margin-left: 15px; }
.section_6 .left .btn_link {
display: flex;
margin-top: 35px;
margin-left: 0px; }
@media only screen and (max-width: 768px) {
.section_6 .left .btn_link {
display: none; } }
a {
text-decoration: none; }
.section_news {
width: 100%;
position: relative;
box-sizing: border-box;
padding: 50px calc(100% / 12) 30px; }
@media only screen and (max-width: 1024px) {
.section_news {
padding: 40px 30px; } }
@media only screen and (max-width: 768px) {
.section_news {
padding: 46px 40px 40px; } }
@media only screen and (max-width: 480px) {
.section_news {
padding: 30px 20px; } }
.section_news ._pattern_news {
position: absolute;
left: 0;
bottom: -85px;
opacity: 0.1;
z-index: -1; }
@media only screen and (max-width: 768px) {
.section_news ._pattern_news {
bottom: -105px;
width: 25%;
opacity: 0.25; } }
@media only screen and (max-width: 480px) {
.section_news ._pattern_news {
bottom: -58px;
width: 40%; } }
.section_news ._pattern_news img {
height: auto;
width: 100%; }
.section_news ._pattern_news2 {
display: none;
position: absolute;
right: 0;
top: -75px;
z-index: -1; }
.section_news ._pattern_news2 img {
height: auto;
width: 100%; }
@media only screen and (max-width: 768px) {
.section_news ._pattern_news2 {
display: block; } }
@media only screen and (max-width: 480px) {
.section_news ._pattern_news2 {
top: -20px;
width: 40%; } }
.section_news .section_title {
text-align: center;
color: #3d3a3d;
margin-bottom: 25px;
text-transform: uppercase; }
@media only screen and (max-width: 480px) {
.section_news .section_title {
margin-bottom: 15px; } }
.section_news .section_title p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 35px; }
.section_news .section_title p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 29.5px;
letter-spacing: 2px; }
@media only screen and (max-width: 768px) {
.section_news .section_title p:nth-of-type(1) {
font-size: 47px; }
.section_news .section_title p:nth-of-type(2) {
font-size: 33px; } }
@media only screen and (max-width: 480px) {
.section_news .section_title p:nth-of-type(1) {
font-size: 24px; }
.section_news .section_title p:nth-of-type(2) {
font-size: 19px; } }
@media only screen and (max-width: 375px) {
.section_news .section_title p:nth-of-type(1) {
font-size: 19px;
line-height: 26px; }
.section_news .section_title p:nth-of-type(2) {
font-size: 16px; } }
.home_newsList {
display: flex;
flex-wrap: wrap; }
.home_newsList .home_newItem {
width: calc(100% / 3); }
.home_newsList .home_newItem a {
width: 100%;
height: 100%;
display: inline-block;
text-decoration: none; }
.home_newsList .home_newItem a ._img {
height: 230px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat;
position: relative; }
.home_newsList .home_newItem a ._img:before, .home_newsList .home_newItem a ._img:after {
content: '';
border-style: solid;
position: absolute;
z-index: 5;
border-color: #ffff00;
box-sizing: content-box;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.home_newsList .home_newItem a ._img:before {
width: 0;
height: 100%;
border-width: 5px 0 5px 0;
top: -5px;
left: -5px;
transition-delay: 0.07s; }
.home_newsList .home_newItem a ._img:after {
width: 100%;
height: 0;
border-width: 0 5px 0 5px;
top: -5px;
left: -5px; }
.home_newsList .home_newItem a .short_content {
padding: 34px 30px 44px 30px;
box-sizing: border-box;
font-size: 18px;
color: #3d3a3d;
font-family: 'Cabin';
font-weight: bold;
border: 1px solid #ededed;
border-top: 0;
overflow: hidden;
height: 145px; }
.home_newsList .home_newItem a:hover ._img:before {
width: calc(100% + 10px); }
.home_newsList .home_newItem a:hover ._img:after {
height: calc(100% + 10px); }
.home_newsList .home_newItem:nth-of-type(3n) a .short_content {
border: 0;
border-bottom: 1px solid #ededed; }
@media only screen and (max-width: 768px) {
.home_newsList .home_newItem {
width: 100%; }
.home_newsList .home_newItem a {
display: flex; }
.home_newsList .home_newItem a ._img {
width: 23.7388724036%;
height: auto; }
.home_newsList .home_newItem a .short_content {
width: 76.2611275964%;
font-size: 26px;
padding: 15px 15px 15px 70px;
line-height: 36px; }
.home_newsList .home_newItem:nth-of-type(1) {
margin-bottom: 22px; }
.home_newsList .home_newItem:nth-of-type(1) a {
display: flex;
flex-direction: column; }
.home_newsList .home_newItem:nth-of-type(1) a ._img {
height: 385px;
width: 100%; }
.home_newsList .home_newItem:nth-of-type(1) a .short_content {
width: 100%;
padding: 20px 20px 20px 34px;
box-sizing: border-box;
font-size: 28px;
border: 1px solid #ededed; }
.home_newsList .home_newItem:nth-of-type(2n) a .short_content {
border-top: 1px solid #ededed; }
.home_newsList .home_newItem:nth-of-type(3n) a .short_content {
border-right: 1px solid #ededed; } }
@media only screen and (max-width: 480px) {
.home_newsList .home_newItem a ._img {
height: auto; }
.home_newsList .home_newItem a ._img:before {
border-width: 3px 0 3px 0;
top: -3px;
left: -3px; }
.home_newsList .home_newItem a ._img:after {
border-width: 0 3px 0 3px;
top: -3px;
left: -3px; }
.home_newsList .home_newItem a .short_content {
font-size: 13px;
padding: 15px 20px 15px 10px;
line-height: 18px;
height: auto; }
.home_newsList .home_newItem a:hover ._img:before {
width: calc(100% + 6px); }
.home_newsList .home_newItem a:hover ._img:after {
height: calc(100% + 6px); }
.home_newsList .home_newItem:nth-of-type(1) {
margin-bottom: 15px; }
.home_newsList .home_newItem:nth-of-type(1) a ._img {
height: 190px; }
.home_newsList .home_newItem:nth-of-type(1) a .short_content {
padding: 15px 20px 15px 15px;
font-size: 14px; } }
.home_newsList .home_newItem.display_mobile {
display: none; }
@media only screen and (max-width: 768px) {
.home_newsList .home_newItem.display_mobile {
display: block; } }
.btn-default {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 40px;
background: #bd8c3b;
background: -moz-linear-gradient(left, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%);
background: -webkit-linear-gradient(left, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%);
background: linear-gradient(to right, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bd8c3b', endColorstr='#af8033', GradientType=1);
margin: 26px auto 0;
padding: 0;
border-radius: 40px;
font-family: 'Cabin';
font-weight: 500;
font-size: 13px;
text-transform: uppercase;
color: #fff;
width: 144px;
line-height: 40px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
outline: none; }
.btn-default span {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden; }
.btn-default span:before {
position: absolute;
top: -78px;
left: 0;
width: 110%;
height: 110%;
background-color: rgba(255, 255, 255, 0.5);
-webkit-transition: transform 0.7s;
-moz-transition: transform 0.7s;
transition: transform 0.7s;
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
-moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
content: ''; }
.btn-default:focus {
color: #fff; }
.btn-default:hover span:before {
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 285%, 0);
-moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 285%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 285%, 0); }
.btn-default img {
width: 14px;
height: auto;
margin-left: 12px; }
@media only screen and (max-width: 768px) {
.btn-default {
width: 260px;
height: 70px;
font-size: 26px;
line-height: 70px; } }
@media only screen and (max-width: 480px) {
.btn-default {
width: 161px;
height: 43px;
font-size: 13px;
line-height: 43px;
margin-top: 22px; } }
@media only screen and (max-width: 480px) {
.section_title span:nth-of-type(1) {
font-size: 24px;
line-height: 32px; } }
@media only screen and (max-width: 375px) {
.section_title span:nth-of-type(1) {
font-size: 19px;
line-height: 26px; } }
@media only screen and (max-width: 480px) {
.section_title span:nth-of-type(2) {
font-size: 19px;
line-height: 26px; } }
@media only screen and (max-width: 375px) {
.section_title span:nth-of-type(2) {
font-size: 16px; } }
@media only screen and (max-width: 480px) {
.section_desc p {
margin-bottom: 10px; } }
@media only screen and (max-width: 480px) {
.section_desc {
font-size: 14px;
line-height: 20px;
padding-left: 15px;
padding-right: 30px;
margin-top: 15px; } }
@media only screen and (max-width: 480px) {
.btn_link {
font-size: 13px;
height: 40px;
width: 160px;
margin-top: 22px;
line-height: 40px;
margin-left: 15px; } }
@media only screen and (max-width: 480px) {
.pagination_slide {
height: 10px;
bottom: 30px; } }
@media only screen and (max-width: 480px) {
.pagination_slide .swiper-pagination-bullet {
margin: 0px 5px; } }
@media only screen and (max-width: 480px) {
.pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 22px;
height: 22px; } }
@media only screen and (max-width: 480px) {
.pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
width: 4px;
height: 4px; } }
.section_1 {
position: relative; }
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text {
padding: 0 15px; }
@media only screen and (max-width: 480px) {
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text .title span:nth-of-type(1) {
font-size: 26px; } }
@media only screen and (max-width: 480px) {
.section_1 .swiper-container .swiper-wrapper .swiper-slide .item .text .title span:nth-of-type(2) {
font-size: 20px;
line-height: 38px; } }
@media only screen and (max-width: 480px) {
.section_2 {
padding-bottom: 20px; } }
@media only screen and (max-width: 480px) {
.section_2 .text {
padding: 35px 20px 0; } }
@media only screen and (max-width: 480px) {
.section_3 {
padding-bottom: 20px; } }
@media only screen and (max-width: 480px) {
.section_3 ._list {
padding: 0px;
margin: 25px 20px 0px; } }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide {
height: 277px; } }
@media only screen and (max-width: 480px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm .text {
font-size: 20px;
line-height: 28px;
color: #ffffff; } }
@media only screen and (max-width: 320px) {
.section_3 ._list .swiper-container .swiper-wrapper .swiper-slide ._item ._item-fm .text {
font-size: 16px;
line-height: 22px; } }
.page_news .loader-wrapper {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 23px;
opacity: 0; }
.page_news .loader-wrapper.is-active {
opacity: 1;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
@media only screen and (max-width: 768px) {
.page_news .loader-wrapper {
bottom: 38px; } }
@media only screen and (max-width: 480px) {
.page_news .loader-wrapper {
bottom: 23px; } }
.page_news .loader-wrapper .loader {
position: relative;
width: 28px;
height: 28px;
margin: 0 auto; }
.page_news .loader-wrapper .loader div {
position: absolute;
display: block;
margin: 0;
padding: 0;
width: 3px;
height: 9px;
background-color: #5dcdda;
transform: scale(0.4);
animation: fadeG 0.9s infinite linear;
border-radius: 2px; }
.page_news .loader-wrapper .loader div:nth-of-type(1) {
left: 0;
top: 26px;
animation-delay: 0.27s;
transform: rotate(-90deg); }
.page_news .loader-wrapper .loader div:nth-of-type(2) {
left: 3px;
top: 17px;
animation-delay: 0.36s;
transform: rotate(-45deg); }
.page_news .loader-wrapper .loader div:nth-of-type(3) {
left: 12px;
top: 13px;
animation-delay: 0.45s;
transform: rotate(0deg); }
.page_news .loader-wrapper .loader div:nth-of-type(4) {
right: 5px;
top: 17px;
animation-delay: 0.54s;
transform: rotate(45deg); }
.page_news .loader-wrapper .loader div:nth-of-type(5) {
right: 1px;
top: 26px;
animation-delay: 0.63s;
transform: rotate(90deg); }
.page_news .loader-wrapper .loader div:nth-of-type(6) {
right: 5px;
bottom: -15px;
animation-delay: 0.72s;
transform: rotate(135deg); }
.page_news .loader-wrapper .loader div:nth-of-type(7) {
bottom: -20px;
left: 12px;
animation-delay: 0.8099999999999999s;
transform: rotate(180deg); }
.page_news .loader-wrapper .loader div:nth-of-type(8) {
left: 3px;
bottom: -16px;
animation-delay: 0.9s;
transform: rotate(-135deg); }
@keyframes fadeG {
0% {
background-color: #fff; }
100% {
background-color: #5dcdda; } }
@-moz-keyframes fadeG {
0% {
background-color: #fff; }
100% {
background-color: #5dcdda; } }
@-o-keyframes fadeG {
0% {
background-color: #fff; }
100% {
background-color: #5dcdda; } }
.page_news {
position: relative;
padding: 175px calc(100% / 12) 30px;
overflow: hidden; }
@media only screen and (max-width: 1024px) {
.page_news {
padding-left: 30px;
padding-right: 30px; } }
@media only screen and (max-width: 768px) {
.page_news {
padding: 245px 40px 30px; } }
@media only screen and (max-width: 480px) {
.page_news {
padding: 135px 20px 30px; } }
.page_news .btn_link {
margin: 0 auto;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%); }
.page_news .banner_decor {
display: block;
width: calc((100% / 12) * 8);
left: auto;
right: 0;
top: 0;
bottom: auto;
z-index: -1; }
@media only screen and (max-width: 768px) {
.page_news .banner_decor {
display: none; } }
.page_news .banner_decor_mobile {
z-index: -1;
position: absolute;
right: 0;
top: 0;
display: none;
max-width: 67.71%; }
.page_news .banner_decor_mobile img {
display: block;
width: 100%;
height: auto; }
@media only screen and (max-width: 768px) {
.page_news .banner_decor_mobile {
display: block; } }
@media only screen and (max-width: 480px) {
.page_news .banner_decor_mobile {
max-width: 60%; } }
@media only screen and (max-width: 425px) {
.page_news .banner_decor_mobile {
max-width: 63%; } }
@media only screen and (max-width: 375px) {
.page_news .banner_decor_mobile {
max-width: 67%; } }
@media only screen and (max-width: 320px) {
.page_news .banner_decor_mobile {
max-width: 72%; } }
.page_news .banner_decor-bottom {
position: absolute;
top: auto;
left: auto;
right: 0;
bottom: -5px;
z-index: -1;
width: 28.64%; }
@media only screen and (max-width: 768px) {
.page_news .banner_decor-bottom {
right: -180px;
width: auto; } }
@media only screen and (max-width: 480px) {
.page_news .banner_decor-bottom {
width: 75%; } }
@media only screen and (max-width: 375px) {
.page_news .banner_decor-bottom {
width: 100%; } }
.page_news .banner_decor-bottom img {
display: block;
width: 100%;
height: auto; }
.page_news .page_titlte {
padding: 0px;
width: calc((100% / 10) * 5);
float: left; }
@media only screen and (max-width: 768px) {
.page_news .page_titlte {
width: 100%; } }
.news_content {
position: relative;
padding-bottom: 70px; }
@media only screen and (max-width: 768px) {
.news_content {
padding-bottom: 110px; } }
@media only screen and (max-width: 480px) {
.news_content {
padding-bottom: 70px; } }
.news_content .pagination {
display: block;
margin-top: 30px; }
.news_content .pagination .page-numbers {
width: 29px;
height: 29px;
margin-right: 13px;
font-size: 13px; }
@media only screen and (max-width: 768px) {
.news_content .pagination {
margin-top: 30px; }
.news_content .pagination .page-numbers {
width: 42px;
height: 42px;
font-size: 25px; } }
@media only screen and (max-width: 480px) {
.news_content .pagination {
margin-top: 30px; }
.news_content .pagination .page-numbers {
width: 29px;
height: 29px;
font-size: 13px;
margin-right: 7px; } }
.pagination {
text-align: center;
margin-top: 45px; }
@media only screen and (max-width: 480px) {
.pagination {
margin-top: 25px; } }
.pagination .page-numbers {
width: 42px;
height: 42px;
margin-right: 20px;
font-family: 'iCielGotham-Bold';
font-size: 26px;
color: #3d3a3d;
display: inline-flex;
align-items: center;
justify-content: center; }
.pagination .page-numbers.current {
background-color: #51bcc0;
color: #ffffff;
border-radius: 50%; }
.pagination .page-numbers:last-child {
margin-right: 0px; }
@media only screen and (max-width: 480px) {
.pagination .page-numbers {
width: 25px;
height: 25px;
margin-right: 7px;
font-size: 14px; } }
.navigation-fm {
display: flex;
align-items: flex-end; }
@media only screen and (max-width: 768px) {
.navigation-fm {
flex-direction: column; } }
.page_navigation {
width: calc((100% / 10) * 5);
float: right;
text-align: right;
margin-bottom: 5px; }
@media only screen and (max-width: 768px) {
.page_navigation {
width: 100%;
text-align: left;
margin-bottom: 0;
margin-top: 30px; } }
@media only screen and (max-width: 480px) {
.page_navigation {
margin-top: 20px; } }
.page_navigation li {
display: inline-block;
margin-right: 35px; }
@media only screen and (max-width: 768px) {
.page_navigation li {
margin-right: 115px; } }
@media only screen and (max-width: 480px) {
.page_navigation li {
margin: 0 auto;
width: 100%;
text-align: center;
margin-bottom: 8px; }
.page_navigation li:last-child {
margin-bottom: 0px; } }
.page_navigation li:last-child {
margin-right: 0px; }
.page_navigation li a {
position: relative;
display: inline-block;
font-family: 'iCielGotham-Bold';
font-size: 12px;
color: #3d3a3d;
text-transform: uppercase; }
@media only screen and (max-width: 768px) {
.page_navigation li a {
font-size: 20px; } }
@media only screen and (max-width: 480px) {
.page_navigation li a {
font-size: 14px; } }
.page_navigation li a:before {
position: absolute;
content: '';
width: 100%;
height: 11px;
left: 0px;
right: 0px;
top: 6px;
background-color: #ffffff;
bottom: auto;
z-index: -1;
opacity: 0;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
@media only screen and (max-width: 768px) {
.page_navigation li a:before {
top: auto;
background-color: #ffff00;
bottom: -4px;
height: 16px; } }
@media only screen and (max-width: 480px) {
.page_navigation li a:before {
bottom: 0px;
height: 10px; } }
.page_navigation li a.is-active:before {
opacity: 1; }
.news_list {
display: flex;
flex-wrap: wrap;
margin-top: 40px; }
@media only screen and (max-width: 1024px) {
.news_list {
margin-top: 25px; } }
@media only screen and (max-width: 768px) {
.news_list {
margin-top: 40px; } }
@media only screen and (max-width: 480px) {
.news_list {
margin-top: 20px; } }
.news_list .news_item {
width: calc(100% / 3);
float: left; }
@media only screen and (max-width: 768px) {
.news_list .news_item {
width: 100%; }
.news_list .news_item:nth-of-type(1), .news_list .news_item:nth-of-type(2), .news_list .news_item:nth-of-type(3) {
margin-bottom: 10px; }
.news_list .news_item:nth-of-type(1) .news_item-img, .news_list .news_item:nth-of-type(2) .news_item-img, .news_list .news_item:nth-of-type(3) .news_item-img {
height: auto;
width: 100%;
background-image: none !important; }
.news_list .news_item:nth-of-type(1) .news_item-img img, .news_list .news_item:nth-of-type(2) .news_item-img img, .news_list .news_item:nth-of-type(3) .news_item-img img {
display: block; }
.news_list .news_item:nth-of-type(1) .news_item-text, .news_list .news_item:nth-of-type(2) .news_item-text, .news_list .news_item:nth-of-type(3) .news_item-text {
width: 100%;
border: 1px solid #ededed;
border-top: inherit;
padding: 20px 35px; }
.news_list .news_item:nth-of-type(1) .news_item-text ._title, .news_list .news_item:nth-of-type(2) .news_item-text ._title, .news_list .news_item:nth-of-type(3) .news_item-text ._title {
font-size: 28px;
line-height: 40px; } }
@media only screen and (max-width: 480px) {
.news_list .news_item:nth-of-type(1), .news_list .news_item:nth-of-type(2), .news_list .news_item:nth-of-type(3) {
margin-bottom: 10px; }
.news_list .news_item:nth-of-type(1) .news_item-text, .news_list .news_item:nth-of-type(2) .news_item-text, .news_list .news_item:nth-of-type(3) .news_item-text {
padding: 15px 20px 15px 15px; }
.news_list .news_item:nth-of-type(1) .news_item-text ._title, .news_list .news_item:nth-of-type(2) .news_item-text ._title, .news_list .news_item:nth-of-type(3) .news_item-text ._title {
line-height: 21px;
font-size: 14px; } }
.news_list .news_item .news_item-img {
display: block;
width: 100%;
height: 225px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat; }
.news_list .news_item .news_item-img img {
display: none;
width: 100%;
height: auto; }
@media only screen and (max-width: 768px) {
.news_list .news_item .news_item-img {
width: 23.732%;
height: 100%;
float: left; } }
.news_list .news_item .news_item-text {
border: 1px solid #ededed;
border-top: inherit;
border-left: inherit;
padding: 25px 30px; }
@media only screen and (max-width: 768px) {
.news_list .news_item .news_item-text {
padding: 15px 27px;
width: calc(100% - 23.732%);
float: left;
border-top: 1px solid #ededed;
border-right: 1px solid #ededed;
border-bottom: inherit;
border-left: inherit; } }
@media only screen and (max-width: 480px) {
.news_list .news_item .news_item-text {
padding: 15px 20px 15px 10px; } }
.news_list .news_item .news_item-text ._title {
display: inline-block;
font-family: 'Cabin';
font-weight: bold;
font-size: 18px;
color: #3d3a3d;
line-height: 25px;
overflow: hidden;
height: 48px; }
@media only screen and (max-width: 768px) {
.news_list .news_item .news_item-text ._title {
font-size: 26px;
line-height: 38px;
height: 83px; } }
@media only screen and (max-width: 480px) {
.news_list .news_item .news_item-text ._title {
line-height: 20px;
font-size: 13px;
height: 42px; } }
.news_list .news_item .news_item-text ._date {
font-family: 'Cabin';
font-size: 14px;
color: #d1d1d1;
margin: 7px 0px;
line-height: 22px; }
@media only screen and (max-width: 768px) {
.news_list .news_item .news_item-text ._date {
display: none; } }
.news_list .news_item .news_item-text ._desc {
font-family: 'Cabin';
font-size: 14px;
color: #737173;
line-height: 22px;
overflow: hidden;
height: 65px; }
@media only screen and (max-width: 768px) {
.news_list .news_item .news_item-text ._desc {
display: none; } }
.news_list .news_item:last-child .news_item-text {
border-bottom: 1px solid #ededed; }
.news_list .news_item:nth-of-type(3n + 1) .news_item-text {
border-left: 1px solid #ededed; }
@media only screen and (max-width: 768px) {
.news_list .news_item:nth-of-type(3n + 1) .news_item-text {
border-left: inherit; } }
@media only screen and (max-width: 768px) {
.news_list .news_item:first-child .news_item-text {
border-left: 1px solid #ededed; } }
.page_news-detail {
position: relative;
overflow: hidden; }
.page_news-detail .banner_decor {
display: block;
width: calc((100% / 12) * 4);
left: auto;
right: 0;
top: 0;
bottom: auto;
z-index: -1; }
@media only screen and (max-width: 768px) {
.page_news-detail .banner_decor {
display: none; } }
.page_news-detail .banner_decor_mobile {
z-index: -1;
position: absolute;
right: 0;
top: 0;
display: none;
max-width: 67.71%; }
.page_news-detail .banner_decor_mobile img {
display: block;
width: 100%;
height: auto; }
@media only screen and (max-width: 768px) {
.page_news-detail .banner_decor_mobile {
display: block; } }
@media only screen and (max-width: 480px) {
.page_news-detail .banner_decor_mobile {
max-width: 60%; } }
@media only screen and (max-width: 425px) {
.page_news-detail .banner_decor_mobile {
max-width: 63%; } }
@media only screen and (max-width: 375px) {
.page_news-detail .banner_decor_mobile {
max-width: 67%; } }
@media only screen and (max-width: 320px) {
.page_news-detail .banner_decor_mobile {
max-width: 72%; } }
.page_news-detail .banner_decor-bottom {
position: absolute;
top: auto;
left: auto;
right: 0;
bottom: 0px;
z-index: -1;
width: 25.417%; }
@media only screen and (max-width: 768px) {
.page_news-detail .banner_decor-bottom {
right: -110px;
bottom: -210px;
width: auto; } }
@media only screen and (max-width: 480px) {
.page_news-detail .banner_decor-bottom {
width: 75%; } }
@media only screen and (max-width: 375px) {
.page_news-detail .banner_decor-bottom {
width: 100%; } }
.page_news-detail .banner_decor-bottom img {
display: block;
width: 100%;
height: auto; }
.page_news-detail table {
font-family: 'Cabin'; }
.page_news-detail table b, .page_news-detail table strong, .page_news-detail table span {
font-family: 'Cabin'; }
.news_detail-ifm {
padding: 195px calc((100% / 12) * 1.5) 0px; }
@media only screen and (max-width: 1024px) {
.news_detail-ifm {
padding: 195px 30px 0px; } }
@media only screen and (max-width: 768px) {
.news_detail-ifm {
padding: 245px 40px 0px; } }
@media only screen and (max-width: 480px) {
.news_detail-ifm {
padding: 135px 20px 0px; } }
.news_detail-ifm .title {
font-family: 'iCielGotham-Bold';
font-size: 25px;
color: #3d3a3d;
text-transform: uppercase;
width: calc((100% / 9) * 6.9);
line-height: 35px; }
@media only screen and (max-width: 768px) {
.news_detail-ifm .title {
font-size: 35px;
line-height: 47px;
width: calc((100% / 9) * 8); } }
@media only screen and (max-width: 480px) {
.news_detail-ifm .title {
width: 100%;
font-size: 17px;
line-height: 26px; } }
.news_detail-ifm .date {
font-family: 'Cabin';
font-size: 13px;
color: #666666;
margin: 24px 0px 0px 45px; }
@media only screen and (max-width: 1024px) {
.news_detail-ifm .date {
margin: 24px 0px 0px 30px; } }
@media only screen and (max-width: 768px) {
.news_detail-ifm .date {
margin: 24px 0px 0px 50px;
font-size: 20px; } }
@media only screen and (max-width: 480px) {
.news_detail-ifm .date {
font-size: 14px;
margin: 10px 0px 0px; } }
.news_detail-ifm .the-content p {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px;
margin: 25px 45px 0px; }
@media only screen and (max-width: 1024px) {
.news_detail-ifm .the-content p {
margin: 25px 30px 0px; } }
@media only screen and (max-width: 768px) {
.news_detail-ifm .the-content p {
margin: 25px 50px 0px;
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.news_detail-ifm .the-content p {
margin: 10px 0px 0px;
line-height: 22px;
font-size: 13px; } }
.news_detail-ifm .the-content p strong {
font-family: 'Cabin';
font-weight: bold; }
.news_detail-ifm .the-content p a {
font-family: 'Cabin';
word-break: break-word;
color: #007bff; }
.news_detail-ifm .the-content p a:hover {
color: #007bff; }
.news_detail-ifm .the-content p em {
font-family: 'Cabin';
font-style: italic; }
.news_detail-ifm .the-content p span {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
@media only screen and (max-width: 768px) {
.news_detail-ifm .the-content p span {
font-size: 28px;
line-height: 44px; } }
.news_detail-ifm .the-content p img { }
@media only screen and (max-width: 1024px) {
.news_detail-ifm .the-content p img {
width: calc(100% + 60px);
margin-left: -30px; } }
@media only screen and (max-width: 768px) {
.news_detail-ifm .the-content p img {
width: calc(100% + 180px);
margin-left: -90px; } }
@media only screen and (max-width: 480px) {
.news_detail-ifm .the-content p img {
width: calc(100% + 40px);
margin-left: -20px; } }
.news_detail-ifm .the-content ul {
padding-left: 20px;
padding-right: 20px;
margin: 25px 0px 0px; }
@media only screen and (max-width: 480px) {
.news_detail-ifm .the-content ul {
padding-left: 0px;
padding-right: 0px;
margin-top: 10px; } }
.news_detail-ifm .the-content ul li {
margin: 25px 25px 0px 40px;
list-style: disc;
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
.news_detail-ifm .the-content ul li:first-child {
margin-top: 0px; }
@media only screen and (max-width: 1024px) {
.news_detail-ifm .the-content ul li {
margin: 25px 10px 0px 25px; } }
@media only screen and (max-width: 768px) {
.news_detail-ifm .the-content ul li {
margin: 25px 30px 0px 55px;
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.news_detail-ifm .the-content ul li {
line-height: 22px;
font-size: 13px;
margin: 10px 0px 0px 15px; } }
.news_detail-ifm .the-content ul li strong {
font-family: 'Cabin';
font-weight: bold; }
.news_detail-ifm .the-content ul li a {
font-family: 'Cabin';
word-break: break-word;
color: #007bff; }
.news_detail-ifm .the-content ul li a:hover {
color: #007bff; }
.news_detail-ifm .the-content ul li em {
font-family: 'Cabin';
font-style: italic; }
.news_detail-ifm .the-content ul li span {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
@media only screen and (max-width: 768px) {
.news_detail-ifm .the-content ul li span {
font-size: 28px;
line-height: 44px; } }
.news_detail-ifm .the-content ul li img {
width: calc(100% + 105px);
display: block;
height: auto;
margin-left: -60px;
max-width: inherit;
margin-top: 0px; }
@media only screen and (max-width: 1024px) {
.news_detail-ifm .the-content ul li img {
width: calc(100% + 75px);
margin-left: -45px; } }
@media only screen and (max-width: 768px) {
.news_detail-ifm .the-content ul li img {
width: calc(100% + 205px);
margin-left: -115px; } }
@media only screen and (max-width: 480px) {
.news_detail-ifm .the-content ul li img {
width: calc(100% + 55px);
margin-left: -35px; } }
.news_detail-ifm .the-content.process-cat .wp-caption {
margin: 0 45px !important; }
.news_detail-ifm .the-content .wp-caption {
position: relative;
margin: 25px auto 0px; }
.news_detail-ifm .the-content .wp-caption img {
display: block;
width: 100%;
height: auto; }
.news_detail-ifm .the-content .wp-caption .wp-caption-text {
font-family: 'Cabin';
font-size: 13px;
color: #ffffff;
position: absolute;
top: auto;
bottom: 0;
background-color: #7cd0e5;
width: 100%;
margin: 0;
padding: 12px 30px;
line-height: 20px; }
@media only screen and (max-width: 768px) {
.news_detail-ifm .the-content .wp-caption .wp-caption-text {
display: none; } }
.news_detail-ifm .the-content img {
margin: 0 auto;
display: block; }
@media only screen and (max-width: 768px) {
.news_detail-ifm .the-content img {
width: calc(100% + 80px);
margin-left: -40px;
max-width: inherit; } }
@media only screen and (max-width: 480px) {
.news_detail-ifm .the-content img {
margin-top: 10px;
width: calc(100% + 40px);
margin-left: -20px; } }
.news_detail_share {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
display: inline-block;
font-family: 'Cabin';
font-size: 13px;
color: #666666;
text-align: center;
margin: 50px 0px;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
.news_detail_share i {
margin-right: 10px;
color: #7cd0e5; }
.news_detail_share:hover {
color: #7cd0e5; }
@media only screen and (max-width: 1024px) {
.news_detail_share {
margin: 40px 0px; } }
@media only screen and (max-width: 768px) {
.news_detail_share {
font-size: 20px; } }
@media only screen and (max-width: 480px) {
.news_detail_share {
font-size: 13px;
margin: 15px 0px 25px; } }
.news_detail_more {
padding: 0px calc(100% / 12) 60px; }
@media only screen and (max-width: 1024px) {
.news_detail_more {
padding: 0px 30px 60px; } }
@media only screen and (max-width: 768px) {
.news_detail_more {
padding: 0px 40px 60px; } }
@media only screen and (max-width: 480px) {
.news_detail_more {
padding: 0px 20px 60px; } }
.news_detail_more .title {
font-family: 'iCielGotham-Book';
font-size: 35px;
text-align: center;
text-transform: uppercase;
color: #3d3a3d; }
@media only screen and (max-width: 768px) {
.news_detail_more .title {
font-size: 45px; } }
@media only screen and (max-width: 480px) {
.news_detail_more .title {
font-size: 22px; } }
.news_detail_more .news_list {
margin-top: 25px; }
@media only screen and (max-width: 480px) {
.news_detail_more .news_list {
margin-top: 20px; } }
@media only screen and (max-width: 768px) {
.news_detail_more .news_list .news_item {
margin-bottom: 0px; }
.news_detail_more .news_list .news_item:last-child .news_item-text {
border-bottom: 1px solid #ededed; }
.news_detail_more .news_list .news_item .news_item-img {
width: 23.732%;
height: 100%;
float: left; }
.news_detail_more .news_list .news_item .news_item-text {
padding: 15px 27px;
width: calc(100% - 23.732%);
float: left;
border-top: 1px solid #ededed;
border-bottom: inherit;
border-left: inherit; }
.news_detail_more .news_list .news_item .news_item-text ._title {
font-size: 26px;
line-height: 38px; }
.news_detail_more .news_list .news_item .news_item-text ._date {
display: none; }
.news_detail_more .news_list .news_item .news_item-text ._desc {
display: none; } }
@media only screen and (max-width: 480px) {
.news_detail_more .news_list .news_item .news_item-text {
padding: 15px 20px 15px 10px; }
.news_detail_more .news_list .news_item .news_item-text ._title {
line-height: 20px;
font-size: 13px; } }
.page_overview {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px; }
@media only screen and (max-width: 768px) {
.page_overview {
padding: 210px 0px 0px; } }
@media only screen and (max-width: 480px) {
.page_overview {
padding: 115px 0px 0px; } }
.page_overview .navigation-fm {
padding: 0px calc(100% / 12); }
@media only screen and (max-width: 1024px) {
.page_overview .navigation-fm {
padding: 0px 30px; } }
@media only screen and (max-width: 768px) {
.page_overview .navigation-fm {
padding: 0px 40px; } }
@media only screen and (max-width: 480px) {
.page_overview .navigation-fm {
padding: 0px 20px; } }
.page_overview .banner_decor_mobile {
max-width: 29.6%; }
@media only screen and (max-width: 768px) {
.page_overview .news_content .navigation-fm .page_titlte {
order: 2;
margin-top: 40px; } }
@media only screen and (max-width: 480px) {
.page_overview .news_content .navigation-fm .page_titlte {
margin-top: 25px; } }
@media only screen and (max-width: 768px) {
.page_overview .news_content .navigation-fm .page_navigation {
order: 1; } }
.page_overview .news_content .navigation-fm .page_navigation li:last-child {
margin-right: 0px; }
@media only screen and (max-width: 768px) {
.page_overview .news_content .navigation-fm .page_navigation li {
margin-right: 140px; } }
@media only screen and (max-width: 480px) {
.page_overview .news_content .navigation-fm .page_navigation li {
margin-right: 0px; } }
@media only screen and (max-width: 768px) {
.page_overview .news_content .navigation-fm .page_navigation li a:before {
background-color: #7cd0e5; } }
.introduction_screen1 {
position: relative;
margin-top: 45px;
padding: 0px calc(100% / 12); }
@media only screen and (max-width: 1024px) {
.introduction_screen1 {
padding: 0px 30px; } }
@media only screen and (max-width: 768px) {
.introduction_screen1 {
margin-top: 30px;
display: flex;
flex-direction: column;
padding: 0px 40px; } }
@media only screen and (max-width: 480px) {
.introduction_screen1 {
margin-top: 20px;
padding: 0px 20px; } }
.introduction_screen1 ._decor1 {
position: absolute;
bottom: auto;
right: auto;
left: 0px;
width: 24.098%;
top: 67%;
z-index: -1; }
@media only screen and (max-width: 768px) {
.introduction_screen1 ._decor1 {
display: none; } }
.introduction_screen1 ._decor1 img {
display: block;
width: 100%;
height: auto; }
.introduction_screen1 ._decor2 {
position: absolute;
bottom: auto;
right: 0;
left: auto;
width: 9.306%;
top: 64%;
z-index: -1; }
@media only screen and (max-width: 768px) {
.introduction_screen1 ._decor2 {
width: 30%;
top: auto;
bottom: -1000px; } }
.introduction_screen1 ._decor2 img {
display: block;
width: 100%;
height: auto; }
.overview_left {
width: calc((100% / 10) * 4);
float: left;
padding: 0px 48px 0px 68px; }
@media only screen and (max-width: 1024px) {
.overview_left {
padding: 0px 30px; } }
@media only screen and (max-width: 768px) {
.overview_left {
width: 100%;
order: 2;
padding: 40px 0px 0px; } }
@media only screen and (max-width: 480px) {
.overview_left {
padding-top: 20px; } }
.overview_title {
font-family: 'iCielGotham-Bold';
font-size: 16px;
line-height: 26px;
color: #3d3a3d;
text-transform: uppercase;
padding-bottom: 15px; }
@media only screen and (max-width: 768px) {
.overview_title {
font-size: 28px;
line-height: 38px; } }
@media only screen and (max-width: 480px) {
.overview_title {
font-size: 17px;
line-height: 26px;
padding-bottom: 5px; } }
.overview_text .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #3d3a3d;
border-radius: inherit;
width: 1px; }
.overview_text .mCSB_scrollTools .mCSB_draggerRail {
width: 1px;
background-color: rgba(0, 0, 0, 0.2); }
@media only screen and (max-width: 768px) {
.overview_text {
padding: 0px 40px; } }
@media only screen and (max-width: 480px) {
.overview_text {
padding: 0px; } }
.overview_text p {
font-family: 'Cabin';
font-size: 15px;
line-height: 26px;
color: #3d3a3d;
padding-bottom: 15px; }
@media only screen and (max-width: 768px) {
.overview_text p {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.overview_text p {
font-size: 14px;
line-height: 22px;
padding-bottom: 10px; } }
.overview_text p strong {
font-weight: bold; }
.overview_text p a {
word-break: break-word;
color: #007bff; }
.overview_text p a:hover {
color: #007bff; }
.overview_text p em, .overview_text p i {
font-family: 'Cabin';
font-style: italic; }
.overview_text p span {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
@media only screen and (max-width: 768px) {
.overview_text p span {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.overview_text p span {
font-size: 14px;
line-height: 22px; } }
.overview_text p:last-child {
padding-bottom: 0px; }
.overview_text ul {
padding-left: 20px;
margin: 0;
padding-bottom: 15px; }
@media only screen and (max-width: 480px) {
.overview_text ul {
padding-bottom: 10px; } }
.overview_text ul li {
list-style: disc;
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
@media only screen and (max-width: 768px) {
.overview_text ul li {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.overview_text ul li {
font-size: 14px;
line-height: 22px; } }
.overview_text ul li strong {
font-family: 'Cabin';
font-weight: bold; }
.overview_text ul li a {
font-family: 'Cabin';
word-break: break-word;
color: #007bff; }
.overview_text ul li a:hover {
color: #007bff; }
.overview_text ul li em, .overview_text ul li i {
font-family: 'Cabin';
font-style: italic; }
.overview_text ul li span {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
@media only screen and (max-width: 768px) {
.overview_text ul li span {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.overview_text ul li span {
font-size: 14px;
line-height: 22px; } }
.overview_text ol li {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px;
list-style: decimal; }
@media only screen and (max-width: 768px) {
.overview_text ol li {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.overview_text ol li {
font-size: 14px;
line-height: 22px; } }
.overview_text ol li strong {
font-family: 'Cabin';
font-weight: bold; }
.overview_text ol li a {
font-family: 'Cabin';
word-break: break-word;
color: #007bff; }
.overview_text ol li a:hover {
color: #007bff; }
.overview_text ol li em, .overview_text ol li i {
font-family: 'Cabin';
font-style: italic; }
.overview_text ol li span {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
@media only screen and (max-width: 768px) {
.overview_text ol li span {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.overview_text ol li span {
font-size: 14px;
line-height: 22px; } }
.overview_right {
width: calc((100% / 10) * 6);
float: left;
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3); }
.overview_right img {
display: block;
width: 100%;
height: auto; }
@media only screen and (max-width: 768px) {
.overview_right {
width: 100%;
order: 1; } }
.overview_highlights p {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px;
margin-bottom: 10px; }
.overview_highlights p:last-child {
margin-bottom: 0px; }
@media only screen and (max-width: 768px) {
.overview_highlights p {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.overview_highlights p {
font-size: 14px;
line-height: 22px; } }
.introduction_screen2 {
padding-top: 60px; }
@media only screen and (max-width: 480px) {
.introduction_screen2 {
padding-top: 35px; } }
.introduction_screen2 .title {
text-align: center;
text-transform: uppercase;
color: #3d3a3d;
font-family: 'iCielGotham-Book';
font-size: 35px;
margin-bottom: 20px;
padding: 0px 40px; }
@media only screen and (max-width: 768px) {
.introduction_screen2 .title {
font-size: 45px;
margin-bottom: 25px; } }
@media only screen and (max-width: 480px) {
.introduction_screen2 .title {
font-size: 22px;
padding: 0px 20px;
margin-bottom: 10px; } }
.introduction_screen2 .overview_highlights {
padding: 0px 68px;
width: calc((100% / 12) * 10);
margin: 0 auto; }
@media only screen and (max-width: 1024px) {
.introduction_screen2 .overview_highlights {
width: calc(100% - 60px);
padding: 0px 30px; } }
@media only screen and (max-width: 768px) {
.introduction_screen2 .overview_highlights {
width: 100%;
padding: 0px 80px; } }
@media only screen and (max-width: 480px) {
.introduction_screen2 .overview_highlights {
padding: 0px 20px; } }
.introduction_screen2_slide {
padding: 0px 30px;
margin: 30px 0px;
position: relative; }
@media only screen and (max-width: 768px) {
.introduction_screen2_slide {
padding: 0px; } }
@media only screen and (max-width: 480px) {
.introduction_screen2_slide {
margin: 15px 0px; } }
.introduction_screen2_slide .swiper-container .swiper-wrapper .swiper-slide .img {
position: relative;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: bottom right; }
@media only screen and (max-width: 768px) {
.introduction_screen2_slide .swiper-container .swiper-wrapper .swiper-slide .img {
height: 340px; } }
.introduction_screen2_slide .swiper-container .pagination_slide {
bottom: 30px; }
@media only screen and (max-width: 480px) {
.introduction_screen2_slide .swiper-container .pagination_slide {
bottom: 20px; } }
.introduction_screen2_slide .screen2_slide_desc {
width: 100%;
padding: 18px calc(100% / 12) 18px calc((100% / 12) * 5 - 30px);
background-color: #7cd0e5; }
@media only screen and (max-width: 768px) {
.introduction_screen2_slide .screen2_slide_desc {
padding: 30px 80px; } }
@media only screen and (max-width: 480px) {
.introduction_screen2_slide .screen2_slide_desc {
padding: 15px 20px; } }
.introduction_screen2_slide .screen2_slide_desc p {
font-family: 'Cabin';
font-size: 15px;
color: #ffffff;
line-height: 25px;
margin-bottom: 15px; }
.introduction_screen2_slide .screen2_slide_desc p:last-child {
margin-bottom: 0px; }
@media only screen and (max-width: 768px) {
.introduction_screen2_slide .screen2_slide_desc p {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.introduction_screen2_slide .screen2_slide_desc p {
font-size: 14px;
line-height: 22px;
margin-bottom: 10px; } }
.introduction_screen2_slide .screen2_slide_desc p strong {
font-weight: bold; }
.introduction_screen2_slide .screen2_slide_desc p a {
word-break: break-word;
color: #007bff; }
.introduction_screen2_slide .screen2_slide_desc p a:hover {
color: #007bff; }
.introduction_screen2_slide .screen2_slide_desc p em {
font-style: italic; }
.introduction_screen2_slide .screen2_slide_desc p span {
font-family: 'Cabin';
font-size: 15px;
color: #ffffff;
line-height: 25px; }
@media only screen and (max-width: 768px) {
.introduction_screen2_slide .screen2_slide_desc p span {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.introduction_screen2_slide .screen2_slide_desc p span {
font-size: 14px;
line-height: 22px; } }
.introduction_screen2_slide ._decor3 {
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
z-index: 1;
width: 26.377%; }
@media only screen and (max-width: 768px) {
.introduction_screen2_slide ._decor3 {
display: none; } }
.introduction_screen2_slide ._decor3 img {
display: block;
height: auto;
width: 100%; }
.introduction_screen3 {
position: relative;
margin: 60px 5% 0px;
display: flex; }
@media only screen and (max-width: 1024px) {
.introduction_screen3 {
margin: 60px 30px 0px; } }
@media only screen and (max-width: 768px) {
.introduction_screen3 {
flex-direction: column;
margin: 150px 40px 0px; } }
@media only screen and (max-width: 480px) {
.introduction_screen3 {
margin: 70px 20px 0px; } }
.introduction_screen3 .title {
display: none; }
@media only screen and (max-width: 768px) {
.introduction_screen3 .title {
display: block;
text-align: center;
position: relative;
margin-bottom: 40px; }
.introduction_screen3 .title:before {
position: absolute;
content: '';
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/tong-quan/overview_screen3_decor.png);
background-repeat: no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
left: 0px;
right: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
width: 297px;
height: 297px;
z-index: -1; } }
@media only screen and (max-width: 768px) and (max-width: 480px) {
.introduction_screen3 .title:before {
width: 150px;
height: 150px; } }
@media only screen and (max-width: 480px) {
.introduction_screen3 .title {
margin-bottom: 20px; } }
.introduction_screen3 .title span {
display: block;
color: #3d3a3d;
text-transform: uppercase; }
.introduction_screen3 .title span:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 40px; }
@media only screen and (max-width: 768px) {
.introduction_screen3 .title span:nth-of-type(1) {
font-size: 45px; } }
@media only screen and (max-width: 480px) {
.introduction_screen3 .title span:nth-of-type(1) {
font-size: 22px;
line-height: 30px; } }
.introduction_screen3 .title span:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 25px;
line-height: 33px; }
@media only screen and (max-width: 768px) {
.introduction_screen3 .title span:nth-of-type(2) {
font-size: 33px;
line-height: 41px; } }
@media only screen and (max-width: 480px) {
.introduction_screen3 .title span:nth-of-type(2) {
font-size: 18px;
line-height: inherit; } }
.introduction_screen3 ._left {
width: 62.655%;
float: left; }
@media only screen and (max-width: 768px) {
.introduction_screen3 ._left {
width: 100%; } }
.introduction_screen3 ._left img {
display: block;
width: 100%;
height: auto; }
.introduction_screen3 ._right {
position: relative;
margin-top: 160px;
width: calc(100% - 62.655%);
float: left;
padding-left: 45px;
z-index: 1; }
@media only screen and (max-width: 768px) {
.introduction_screen3 ._right {
width: 100%;
position: static;
left: inherit;
top: inherit;
transform: inherit;
padding-left: 0px;
margin-top: 0; } }
.introduction_screen3 ._right .title {
display: block;
padding-bottom: 30px; }
@media only screen and (max-width: 768px) {
.introduction_screen3 ._right .title {
display: none; } }
.introduction_screen3 ._right .title span {
display: block;
color: #3d3a3d;
text-transform: uppercase; }
.introduction_screen3 ._right .title span:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 40px; }
.introduction_screen3 ._right .title span:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 25px;
line-height: 33px; }
.introduction_screen3 ._right .desc {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px;
padding-left: 38px; }
@media only screen and (max-width: 768px) {
.introduction_screen3 ._right .desc {
font-size: 28px;
line-height: 44px;
padding-left: 40px;
padding-right: 40px;
padding-top: 40px; } }
@media only screen and (max-width: 480px) {
.introduction_screen3 ._right .desc {
font-size: 14px;
line-height: 22px;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px; } }
.introduction_screen3 ._right .desc p {
margin-bottom: 15px; }
@media only screen and (max-width: 480px) {
.introduction_screen3 ._right .desc p {
margin-bottom: 10px; } }
.introduction_screen3 ._right .desc p strong {
font-weight: bold; }
.introduction_screen3 ._right .desc p a {
word-break: break-word;
color: #007bff; }
.introduction_screen3 ._right .desc p a:hover {
color: #007bff; }
.introduction_screen3 ._right .desc p em {
font-style: italic; }
.introduction_screen3 ._right .desc p span {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
.introduction_screen3 ._right .desc p:last-child {
margin-bottom: 0px; }
.introduction_screen3 ._right .desc ul {
padding-left: 20px;
margin: 0;
padding-bottom: 15px; }
@media only screen and (max-width: 480px) {
.introduction_screen3 ._right .desc ul {
padding-bottom: 10px; } }
.introduction_screen3 ._right .desc ul li {
list-style: disc;
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
@media only screen and (max-width: 768px) {
.introduction_screen3 ._right .desc ul li {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.introduction_screen3 ._right .desc ul li {
font-size: 14px;
line-height: 22px; } }
.introduction_screen3 ._right .desc ul li strong {
font-family: 'Cabin';
font-weight: bold; }
.introduction_screen3 ._right .desc ul li a {
font-family: 'Cabin';
word-break: break-word;
color: #007bff; }
.introduction_screen3 ._right .desc ul li a:hover {
color: #007bff; }
.introduction_screen3 ._right .desc ul li em {
font-family: 'Cabin';
font-style: italic; }
.introduction_screen3 ._right .desc ul li span {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px; }
@media only screen and (max-width: 768px) {
.introduction_screen3 ._right .desc ul li span {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.introduction_screen3 ._right .desc ul li span {
font-size: 14px;
line-height: 22px; } }
.introduction_screen3 ._right .decor_screen3 {
position: absolute;
top: -130px;
left: -60px;
bottom: auto;
right: auto;
z-index: -1;
width: 297px;
height: 297px;
border-radius: 50%; }
.introduction_screen3 ._right .decor_screen3 img {
display: block;
width: 100%;
height: 100%; }
@media only screen and (max-width: 1024px) {
.introduction_screen3 ._right .decor_screen3 {
left: -35px;
top: -110px; } }
@media only screen and (max-width: 768px) {
.introduction_screen3 ._right .decor_screen3 {
display: none; } }
.introduction_screen3 ._decor4 {
position: absolute;
bottom: auto;
right: -6%;
left: auto;
width: 24.098%;
top: -60px;
z-index: -1;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg); }
@media only screen and (max-width: 768px) {
.introduction_screen3 ._decor4 {
display: none; } }
.introduction_screen3 ._decor4 img {
display: block;
width: 100%;
height: auto; }
.intr_partners {
padding-bottom: 10px; }
.intr_partners .overview_title {
padding: 0px 68px; }
@media only screen and (max-width: 768px) {
.intr_partners .overview_title {
padding: 0px 40px; } }
@media only screen and (max-width: 480px) {
.intr_partners .overview_title {
padding: 0px; } }
.intr_partners .overview_highlights {
padding: 20px calc(100% /10) 40px; }
@media only screen and (max-width: 768px) {
.intr_partners .overview_highlights {
padding: 20px 40px 40px; } }
@media only screen and (max-width: 480px) {
.intr_partners .overview_highlights {
padding: 10px 0px 20px; } }
.intr_partners ._decor1 {
bottom: -150px;
top: auto; }
@media only screen and (max-width: 768px) {
.intr_partners ._decor1 {
display: block;
width: 42%;
left: auto;
right: -50px;
top: auto;
bottom: -295px;
-webkit-transform: rotateZ(-180deg);
-moz-transform: rotateZ(-180deg);
transform: rotateZ(-180deg); } }
@media only screen and (max-width: 480px) {
.intr_partners ._decor1 {
width: 50%;
right: -25px;
bottom: -160px; } }
.intr_partners ._decor2 {
bottom: -160px;
top: auto; }
@media only screen and (max-width: 768px) {
.intr_partners ._decor2 {
display: none; } }
.intr_partners .overview_right .swiper-container .swiper-wrapper .swiper-slide .img {
height: 500px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media only screen and (max-width: 768px) {
.intr_partners .overview_right .swiper-container .swiper-wrapper .swiper-slide .img {
height: 462px; } }
@media only screen and (max-width: 480px) {
.intr_partners .overview_right .swiper-container .swiper-wrapper .swiper-slide .img {
height: 270px; } }
.intr_partners .overview_right .swiper-container .pagination_slide {
bottom: 20px; }
@media only screen and (max-width: 768px) {
.intr_partners .overview_right .swiper-container .pagination_slide {
bottom: 15px; } }
@media only screen and (max-width: 768px) {
.intr_partners .overview_left .overview_text {
padding: 0px; } }
.intr_highlight {
position: relative;
padding-bottom: 0px; }
@media only screen and (max-width: 480px) {
.intr_highlight {
margin-top: 0px; } }
.intr_highlight .swiper-container {
overflow: inherit;
width: 100%; }
.intr_highlight .swiper-container .swiper-wrapper {
width: 100%; }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide {
opacity: 0 !important; }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active {
opacity: 1 !important; }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm {
width: 100%;
height: auto; }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm {
display: flex;
flex-direction: column; } }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left {
width: calc((100% / 10) * 4);
float: left;
padding: 0px 48px 0px 68px; }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left {
width: 100%;
order: 2;
padding: 0px; } }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .overview_title {
padding: 30px 0px 15px; }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .overview_title {
display: none; } }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .intr_highlight_icon {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center; }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .intr_highlight_icon {
display: none; } }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .intr_highlight_icon .number {
font-family: 'iCielGotham-Bold';
font-size: 30px;
color: #f0f0f0;
line-height: 19px;
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto; }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .intr_highlight_icon .icon {
display: block;
max-width: 70px;
height: auto; }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .intr_highlight_icon .icon img {
max-width: 100%;
height: auto;
display: block; }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .overview_text {
padding: 40px 0px 0px; } }
@media only screen and (max-width: 480px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .overview_text {
padding: 20px 0px 0px; } }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .overview_text .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
background-color: #3d3a3d;
border-radius: inherit;
width: 1px; }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .overview_text .mCSB_scrollTools .mCSB_draggerRail {
width: 1px;
background-color: rgba(0, 0, 0, 0.2); }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .overview_text p {
line-height: 26px; }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .overview_text p {
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._left .overview_text p {
line-height: 22px; } }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right {
width: calc((100% / 10) * 6);
float: left; }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right {
width: 100%;
order: 1; } }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .img {
width: 100%;
height: auto; }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .img img {
display: block;
width: 100%;
height: auto;
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3); }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon {
display: none; }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon {
position: relative;
display: flex;
align-items: flex-end;
justify-content: left;
margin-bottom: 35px; }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon .number {
font-family: 'iCielGotham-Bold';
font-size: 30px;
color: #f0f0f0;
line-height: inherit;
position: absolute;
right: auto;
top: 5px;
bottom: auto;
left: 120px; } }
@media only screen and (max-width: 768px) and (max-width: 480px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon .number {
left: 90px;
top: 22px;
font-size: 20px; } }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon .icon {
display: block;
width: 90px;
height: auto; } }
@media only screen and (max-width: 768px) and (max-width: 480px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon .icon {
width: 60px; } }
@media only screen and (max-width: 768px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon .icon img {
width: 100%;
height: auto;
display: block; }
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon .overview_title {
padding-left: 30px;
padding-right: 0px;
margin-bottom: -4px;
padding-top: 50px;
width: calc(100% - 90px); } }
@media only screen and (max-width: 768px) and (max-width: 480px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon .overview_title {
width: calc(100% - 60px);
font-size: 15px;
line-height: 22px; } }
@media only screen and (max-width: 480px) {
.intr_highlight .swiper-container .swiper-wrapper .swiper-slide .intr_highlight-ifm ._right .intr_highlight_icon {
margin-bottom: 20px; } }
@media only screen and (max-width: 768px) {
.intr_highlight ._decor1 {
display: none; } }
.intr_highlight .pagination_slide {
width: calc((100% / 12) * 4);
left: calc(100% / 12);
padding: 0px 68px;
bottom: 10px; }
@media only screen and (max-width: 768px) {
.intr_highlight .pagination_slide {
width: 100%;
left: 0;
padding: 0px 40px;
bottom: 0;
position: static;
margin-top: 40px; } }
@media only screen and (max-width: 480px) {
.intr_highlight .pagination_slide {
margin-top: 25px; } }
.intr_highlight .pagination_slide .swiper-pagination-bullet {
background-color: #5dcdda; }
.intr_highlight .pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: transparent; }
.navigation-fix-default {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 36px;
background-color: #7cd0e5;
display: flex;
justify-content: center;
align-items: center;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.navigation-fix-default .page_navigation {
width: auto;
text-align: left;
margin-bottom: 0; }
.navigation-fix-default .page_navigation li {
margin-right: 42px; }
.navigation-fix-default .page_navigation li a {
color: #5090a0; }
.navigation-fix-default .page_navigation li a:before {
display: none; }
.navigation-fix-default .page_navigation li a.is-active {
color: #fff; }
.navigation-fix-default.affix {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0); }
@media only screen and (max-width: 768px) {
.navigation-fix-default {
height: 56px; }
.navigation-fix-default .page_navigation {
margin-top: 0; }
.navigation-fix-default.affix {
top: 70px; } }
@media only screen and (max-width: 480px) {
.navigation-fix-default {
height: 36px; }
.navigation-fix-default .page_navigation li {
width: auto;
margin-right: 20px;
margin-bottom: 0; }
.navigation-fix-default .page_navigation li a {
font-size: 12px; }
.navigation-fix-default .page_navigation li:last-child {
margin-right: 0; }
.navigation-fix-default.affix {
top: 46px; } }
.page_contact {
padding-left: 0px;
padding-right: 0px; }
.page_contact .page_titlte {
padding-left: calc(100% / 12); }
.contact_ifm {
padding: 0px calc(100% / 12); }
.contact_ifm ._left {
width: calc((100% / 10) * 3);
float: left;
padding-left: 40px; }
.contact_ifm ._right {
position: relative;
width: calc((100% / 10) * 7);
float: left;
padding-left: 30px; }
.contact_ifm ._right ._image {
display: block;
width: 100%;
height: auto;
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3); }
.contact_ifm ._right ._image img {
display: block;
width: 100%;
height: auto; }
.contact_ifm ._right ._decor {
position: absolute;
left: auto;
right: 0;
top: 0;
bottom: 0;
width: auto;
height: 100%; }
.contact_ifm ._right ._decor img {
display: block;
width: auto;
height: 100%; }
.page_news.page_library .page-decor {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
left: 63.3%;
display: none; }
.page_news.page_library .page-decor img {
width: auto;
height: auto; }
@media only screen and (max-width: 768px) {
.page_news.page_library .page-decor {
display: block; } }
@media only screen and (max-width: 768px) {
.page_news.page_library .news_content .navigation-fm .page_navigation li {
margin-right: 85px; }
.page_news.page_library .news_content .navigation-fm .page_navigation li:last-child {
margin-right: 0; } }
.page_news.page_library .news_content .pagination {
margin-top: 15px; }
@media only screen and (max-width: 480px) {
.page_news.page_library .news_content .pagination {
margin-top: 5px; } }
.page_news.page_library .news_content.library_video-content .pagination {
display: block;
margin-top: 30px; }
.page_news.page_library .news_content.library_video-content .pagination .page-numbers {
width: 29px;
height: 29px;
margin-right: 13px;
font-size: 13px; }
@media only screen and (max-width: 768px) {
.page_news.page_library .news_content.library_video-content .pagination {
margin-top: 0; }
.page_news.page_library .news_content.library_video-content .pagination .page-numbers {
width: 42px;
height: 42px;
font-size: 25px; } }
@media only screen and (max-width: 480px) {
.page_news.page_library .news_content.library_video-content .pagination .page-numbers {
width: 29px;
height: 29px;
font-size: 13px;
margin-right: 7px; } }
.libraryDocument_list {
width: 100%;
margin-top: 40px;
display: flex;
flex-wrap: wrap; }
.libraryDocument_list ._item {
width: calc(100% / 3);
border: 1px solid #ededed;
box-sizing: border-box; }
.libraryDocument_list ._item:nth-of-type(2n) {
border: 0;
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed; }
@media only screen and (max-width: 768px) {
.libraryDocument_list ._item {
width: 100%;
margin-bottom: 40px; }
.libraryDocument_list ._item:nth-of-type(2n) {
border: 1px solid #ededed; } }
@media only screen and (max-width: 480px) {
.libraryDocument_list ._item {
margin-bottom: 25px; } }
.libraryDocument_list ._item a {
display: inline-block;
width: 100%;
height: 100%; }
.libraryDocument_list ._item a ._logo {
position: relative;
background-color: #f6f6f6;
height: 226px;
display: flex;
align-items: center;
justify-content: center; }
.libraryDocument_list ._item a ._logo img {
max-width: 70%;
height: auto;
width: auto; }
.libraryDocument_list ._item a ._logo .img-decor {
position: absolute;
right: 0;
bottom: 0;
left: 62%; }
.libraryDocument_list ._item a ._logo .img-decor img {
width: 100%;
max-width: 100%;
height: auto; }
.libraryDocument_list ._item a ._logo ._logo-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: rgba(96, 201, 214, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.libraryDocument_list ._item a ._logo ._logo-hover i {
opacity: 0;
pointer-events: none;
font-size: 40px;
color: #fff;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease; }
@media only screen and (max-width: 768px) {
.libraryDocument_list ._item a ._logo {
height: 382px; }
.libraryDocument_list ._item a ._logo img {
-webkit-transform: scale(2.05);
-moz-transform: scale(2.05);
transform: scale(2.05); }
.libraryDocument_list ._item a ._logo .img-decor img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
@media only screen and (max-width: 480px) {
.libraryDocument_list ._item a ._logo {
height: 226px; }
.libraryDocument_list ._item a ._logo img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
.libraryDocument_list ._item a .text {
padding: 26px 5px 26px 30px;
display: flex;
align-items: center;
background-color: #fff; }
.libraryDocument_list ._item a .text .document-name {
color: #3d3a3d;
font-family: 'Cabin';
font-weight: bold;
font-size: 18px;
position: relative; }
@media only screen and (max-width: 768px) {
.libraryDocument_list ._item a .text {
padding: 18px 5px 18px 25px; }
.libraryDocument_list ._item a .text .document-name {
font-size: 32.5px; } }
@media only screen and (max-width: 480px) {
.libraryDocument_list ._item a .text {
padding: 20px 5px 20px 20px; }
.libraryDocument_list ._item a .text .document-name {
font-size: 16px; } }
.libraryDocument_list ._item a:hover ._logo ._logo-hover {
height: 100%; }
.libraryDocument_list ._item a:hover ._logo ._logo-hover i {
opacity: 1;
pointer-events: all;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0); }
.libraryVideo_list {
width: 100%;
margin-top: 40px;
display: flex;
flex-wrap: wrap; }
.libraryVideo_list ._item {
width: calc(100% / 3);
box-sizing: border-box;
margin-bottom: 10px;
border: 1px solid #ededed;
border-top: inherit;
border-right: inherit;
outline: none; }
.libraryVideo_list ._item:nth-of-type(3n), .libraryVideo_list ._item:nth-of-type(3n+1), .libraryVideo_list ._item:last-child {
border-right: 1px solid #ededed; }
@media only screen and (max-width: 768px) {
.libraryVideo_list ._item {
width: 100%;
margin-bottom: 38px;
border-top: 1px solid #ededed;
border-right: 1px solid #ededed; } }
@media only screen and (max-width: 480px) {
.libraryVideo_list ._item {
margin-bottom: 10px; } }
.libraryVideo_list ._item ._img {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat;
height: 225px; }
.libraryVideo_list ._item ._img:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2); }
.libraryVideo_list ._item ._img .img-play {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.libraryVideo_list ._item ._img .img-play img {
width: auto;
height: auto;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.libraryVideo_list ._item ._img .img-play:after {
position: absolute;
top: 50%;
left: 50%;
display: block;
content: '';
width: 54px;
height: 54px;
margin: -31px 0 0 -32px;
border-radius: 50%;
border: 2px solid transparent;
transition: all .35s; }
@media only screen and (max-width: 768px) {
.libraryVideo_list ._item ._img {
height: 382px; }
.libraryVideo_list ._item ._img .img-play img {
-webkit-transform: scale(2);
-moz-transform: scale(2);
transform: scale(2); } }
@media only screen and (max-width: 480px) {
.libraryVideo_list ._item ._img {
height: 227px; }
.libraryVideo_list ._item ._img .img-play img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
.libraryVideo_list ._item .text {
padding: 28px 15px 28px 40px;
color: #3d3a3d;
font-family: 'Cabin';
font-weight: bold;
font-size: 18px;
background-color: #fff; }
@media only screen and (max-width: 768px) {
.libraryVideo_list ._item .text {
padding: 20px 15px 16px 32px;
font-size: 32px; } }
@media only screen and (max-width: 480px) {
.libraryVideo_list ._item .text {
padding: 20px 15px 16px 25px;
font-size: 16px; } }
.libraryVideo_list ._item:hover ._img .img-play:after {
-webkit-animation: circle .4s .2s forwards;
animation: circle .4s .2s forwards; }
.libraryVideo_list ._item:hover ._img .img-play img {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3); }
.libraryVideo_list.libraryAlbum_list ._item ._img:before {
display: none; }
.page_libraryDetail .page-decor {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
left: 77.9%; }
.page_libraryDetail .page-decor img {
width: auto;
height: auto; }
.page_libraryDetail .pattern1,
.page_libraryDetail .pattern3,
.page_libraryDetail .pattern2 {
position: absolute;
z-index: -1;
display: none; }
.page_libraryDetail .pattern1 img,
.page_libraryDetail .pattern3 img,
.page_libraryDetail .pattern2 img {
width: 100%;
height: auto; }
.page_libraryDetail .pattern2 {
top: 0;
right: 0;
left: calc((100% / 12) * 8);
display: block; }
.page_libraryDetail .pattern1 {
top: 0;
right: 0;
left: calc((100% / 12) * 7.75); }
.page_libraryDetail .pattern3 {
top: 0;
right: 0;
left: calc((100% / 12) * 9);
z-index: 1; }
@media only screen and (max-width: 768px) {
.page_libraryDetail {
padding: 220px 0 0; }
.page_libraryDetail .pattern2 {
display: none; }
.page_libraryDetail .pattern1 {
top: 70px;
left: 43.2%;
display: block; }
.page_libraryDetail .pattern3 {
top: 70px;
left: 63%;
display: block; }
.page_libraryDetail .page_titlte {
padding: 0 15px 0 40px; } }
@media only screen and (max-width: 480px) {
.page_libraryDetail {
padding: 160px 0 0; }
.page_libraryDetail .pattern1 {
top: 46px; }
.page_libraryDetail .pattern3 {
top: 46px; }
.page_libraryDetail .page_titlte {
padding: 0 10px 0 20px; } }
.page_libraryDetail .album_involve {
padding: 40px 0 32px;
font-family: 'iCielGotham-Book';
font-size: 35px;
text-transform: uppercase;
color: #3d3a3d;
text-align: center; }
@media only screen and (max-width: 768px) {
.page_libraryDetail .album_involve {
padding: 15px 0 25px;
font-size: 45px; } }
@media only screen and (max-width: 480px) {
.page_libraryDetail .album_involve {
padding: 15px 0 25px;
font-size: 30px; } }
.page_libraryDetail .libraryAlbum_list {
margin-top: 0; }
@media only screen and (max-width: 768px) {
.page_libraryDetail .libraryAlbum_list {
padding: 0 40px; } }
@media only screen and (max-width: 480px) {
.page_libraryDetail .libraryAlbum_list {
padding: 0 20px; } }
.libraryAlbum_detail_pc {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 42px calc((100% / 10) * 0.6) 0; }
@media only screen and (max-width: 768px) {
.libraryAlbum_detail_pc {
display: none; } }
.libraryAlbum_detail_pc ._title {
margin-bottom: 28px;
font-family: 'iCielGotham-Bold';
font-size: 20px;
color: #3d3a3d; }
.libraryAlbum_detail_pc .slide_img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat;
position: relative; }
.libraryAlbum_detail_pc .album_detail_img {
width: 100%;
height: 100%; }
.libraryAlbum_detail_pc .album_detail_img .slide_img {
height: 560px; }
.libraryAlbum_detail_pc .album_detail_thumbs {
width: calc(100% - 32px);
margin: 25px auto 0;
height: 100%; }
.libraryAlbum_detail_pc .album_detail_thumbs .swiper-slide .slide_img {
height: 106px; }
.libraryAlbum_detail_pc .album_detail_thumbs .swiper-slide .slide_img:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
-moz-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
content: "";
height: calc(100% - 10px);
width: calc(100% - 16px);
background-color: rgba(81, 188, 192, 0.7);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.libraryAlbum_detail_pc .album_detail_thumbs .swiper-slide .slide_img .img-plus {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
-moz-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.libraryAlbum_detail_pc .album_detail_thumbs .swiper-slide .slide_img .img-plus img {
width: auto;
height: auto; }
.libraryAlbum_detail_pc .album_detail_thumbs .swiper-slide:hover .slide_img:before {
-webkit-transform: translate(-50%, -50%) scale(1);
-moz-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1); }
.libraryAlbum_detail_pc .album_detail_thumbs .swiper-slide:hover .slide_img .img-plus {
-webkit-transform: translate(-50%, -50%) scale(1);
-moz-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1); }
.libraryAlbum_detail_pc .btn-album-next,
.libraryAlbum_detail_pc .btn-album-prev {
width: 29px;
height: 29px;
background-size: 29px 29px;
top: auto;
bottom: 38.5px;
outline: none; }
.libraryAlbum_detail_pc .btn-album-next {
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/thu-vien/btn-next.png);
left: auto;
right: calc((100% / 10) * 0.6); }
.libraryAlbum_detail_pc .btn-album-prev {
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/thu-vien/btn-prev.png);
right: auto;
left: calc((100% / 10) * 0.6); }
.libraryAlbum_detail_mobile {
display: none;
width: 100%; }
@media only screen and (max-width: 768px) {
.libraryAlbum_detail_mobile {
display: block; }
.libraryAlbum_detail_mobile ._title {
margin: 35px 0 24px;
font-family: 'iCielGotham-Bold';
font-size: 30px;
color: #3d3a3d;
text-align: center;
padding: 0 40px; }
.libraryAlbum_detail_mobile .img_item {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat;
height: 398px;
margin-bottom: 40px; } }
@media only screen and (max-width: 480px) {
.libraryAlbum_detail_mobile ._title {
margin: 25px 0 20px;
font-size: 18px;
padding: 0 20px; }
.libraryAlbum_detail_mobile .img_item {
height: 227px;
margin-bottom: 20px; } }
.overlay_popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 150;
background-color: rgba(0, 0, 0, 0.8);
display: none; }
.popup_library_album {
position: fixed;
width: 100%;
z-index: 151;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
transform: translate(0, -50%);
display: none; }
.popup_library_album .slide_img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat;
position: relative; }
.popup_library_album .album_detail_img {
width: 100%;
height: 100%; }
.popup_library_album .album_detail_img .slide_img {
height: 398px; }
@media only screen and (max-width: 480px) {
.popup_library_album .album_detail_img .slide_img {
height: 227px; } }
.popup_library_album .album_detail_thumbs {
width: 100%;
margin: 25px auto 0;
height: 100%;
padding: 0 19%; }
@media only screen and (max-width: 480px) {
.popup_library_album .album_detail_thumbs {
margin: 15px auto 0;
padding: 0 10%; } }
.popup_library_album .album_detail_thumbs .swiper-slide .slide_img {
height: 106px; }
.popup_library_album .album_detail_thumbs .swiper-slide .slide_img:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
-moz-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
content: "";
height: calc(100% - 10px);
width: calc(100% - 16px);
background-color: rgba(81, 188, 192, 0.7);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.popup_library_album .album_detail_thumbs .swiper-slide .slide_img .img-plus {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
-moz-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.popup_library_album .album_detail_thumbs .swiper-slide .slide_img .img-plus img {
width: auto;
height: auto; }
@media only screen and (max-width: 480px) {
.popup_library_album .album_detail_thumbs .swiper-slide .slide_img {
height: 80px; }
.popup_library_album .album_detail_thumbs .swiper-slide .slide_img:before {
height: calc(100% - 6px);
width: calc(100% - 10px); } }
.popup_library_album .album_detail_thumbs .swiper-slide.swiper-slide-active .slide_img:before {
-webkit-transform: translate(-50%, -50%) scale(1);
-moz-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1); }
.popup_library_album .album_detail_thumbs .swiper-slide.swiper-slide-active .slide_img .img-plus {
-webkit-transform: translate(-50%, -50%) scale(1);
-moz-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1); }
@media only screen and (max-width: 480px) {
.popup_library_album .album_detail_thumbs .swiper-slide.swiper-slide-active .slide_img .img-plus {
-webkit-transform: translate(-50%, -50%) scale(0.85);
-moz-transform: translate(-50%, -50%) scale(0.85);
transform: translate(-50%, -50%) scale(0.85); } }
.popup_library_album .btn-album-next,
.popup_library_album .btn-album-prev {
width: 29px;
height: 29px;
background-size: 29px 29px;
top: auto;
bottom: 38.5px;
outline: none; }
.popup_library_album .btn-album-next {
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/thu-vien/btn-next.png);
left: auto;
right: 20px; }
.popup_library_album .btn-album-prev {
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/thu-vien/btn-prev.png);
right: auto;
left: 20px; }
@media only screen and (max-width: 480px) {
.popup_library_album .btn-album-next,
.popup_library_album .btn-album-prev {
width: 20px;
height: 20px;
background-size: 20px 20px;
bottom: 27.5px; }
.popup_library_album .btn-album-next {
right: 5px; }
.popup_library_album .btn-album-prev {
left: 5px; } }
@-webkit-keyframes circle {
0% {
border-color: transparent;
-webkit-transform: rotate(0); }
25% {
border-color: transparent #fff transparent transparent; }
50% {
border-color: transparent #fff #fff transparent; }
75% {
border-color: transparent #fff #fff #fff; }
100% {
border-color: #fff;
-webkit-transform: rotate(-680deg); } }
@keyframes circle {
0% {
border-color: transparent;
transform: rotate(0); }
25% {
border-color: transparent #fff transparent transparent; }
50% {
border-color: transparent #fff #fff transparent; }
75% {
border-color: transparent #fff #fff #fff; }
100% {
border-color: #fff;
transform: rotate(-680deg); } }
.page_product {
width: 100%;
display: block;
position: relative;
padding: 150px 0 0; }
.page_product .pattern1 {
position: absolute;
z-index: -1;
top: 70px;
right: 0;
left: 70.4%;
display: none; }
.page_product .pattern1 img {
width: 100%;
height: auto; }
.page_product .pattern2 {
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: calc((100% / 12) * 4); }
.page_product .pattern2 img {
width: 100%;
height: auto; }
@media only screen and (max-width: 768px) {
.page_product {
padding: 175px 0 0; }
.page_product .pattern2 {
display: none; }
.page_product .pattern1 {
display: block; } }
@media only screen and (max-width: 480px) {
.page_product {
padding: 125px 0 0; }
.page_product .pattern1 {
top: 46px; } }
.product_intro {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 0 calc(100% / 12); }
.product_intro ._img {
margin-bottom: 15px; }
.product_intro ._img img {
width: auto;
height: auto; }
@media only screen and (max-width: 768px) {
.product_intro {
padding: 0 40px; }
.product_intro ._img {
margin-bottom: 35px; } }
@media only screen and (max-width: 480px) {
.product_intro {
padding: 0 20px; }
.product_intro ._img {
margin-bottom: 15px;
width: 65%; } }
.product_intro .intro-content {
display: flex;
flex-wrap: wrap; }
.product_intro .intro-content ._intro_left {
width: calc((100% / 10) * 4);
color: #3d3a3d;
box-sizing: border-box;
padding: 0 4.7222222222%; }
.product_intro .intro-content ._intro_left .intro_title {
font-family: 'iCielGotham-Bold';
font-size: 16px;
text-transform: uppercase;
margin-bottom: 18px; }
.product_intro .intro-content ._intro_left .intro_description {
font-family: 'Cabin';
font-weight: normal;
font-size: 15px;
line-height: 23px; }
.product_intro .intro-content ._intro_left .intro_description p {
margin-bottom: 22px; }
.product_intro .intro-content ._intro_right {
width: calc((100% / 10) * 6); }
.product_intro .intro-content ._intro_right .intro_img {
width: 100%;
height: 500px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat;
position: relative;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.25); }
.product_intro .intro-content ._intro_right .intro_img ._img-decor {
position: absolute;
z-index: 1;
left: auto;
right: 0;
bottom: 0;
top: 0; }
.product_intro .intro-content ._intro_right .intro_img ._img-decor img {
display: block;
width: 100%;
height: 100%; }
@media only screen and (max-width: 768px) {
.product_intro .intro-content ._intro_left {
width: 100%;
order: 2;
padding: 50px 46px 0; }
.product_intro .intro-content ._intro_left .intro_title {
font-size: 28px;
margin-bottom: 30px; }
.product_intro .intro-content ._intro_left .intro_description {
font-size: 28px;
line-height: 35px; }
.product_intro .intro-content ._intro_left .intro_description p {
margin-bottom: 30px; }
.product_intro .intro-content ._intro_right {
width: 100%;
order: 1; }
.product_intro .intro-content ._intro_right .intro_img {
height: 462px; }
.product_intro .intro-content ._intro_right .intro_img ._img-decor {
display: none; } }
@media only screen and (max-width: 480px) {
.product_intro .intro-content ._intro_left {
padding: 30px 15px 0; }
.product_intro .intro-content ._intro_left .intro_title {
font-size: 16px;
margin-bottom: 15px; }
.product_intro .intro-content ._intro_left .intro_description {
font-size: 15px;
line-height: 22px; }
.product_intro .intro-content ._intro_left .intro_description p {
margin-bottom: 15px; }
.product_intro .intro-content ._intro_right .intro_img {
height: 290px; } }
.product_intro._bottom {
margin-top: 64px; }
.product_intro._bottom ._title {
position: absolute;
top: 115px;
left: calc(100% / 12);
z-index: 5; }
.product_intro._bottom ._title p {
color: #3d3a3d;
text-transform: uppercase; }
.product_intro._bottom ._title p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 40px; }
.product_intro._bottom ._title p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 25px; }
.product_intro._bottom ._intro_left {
padding: 230px 5.2083333333% 140px 2.7777777778%;
background-color: #fff; }
.product_intro._bottom ._intro_right .intro_img {
box-shadow: none;
height: 560px; }
.product_intro._bottom .pagination_slide {
left: 2.7777777778%;
bottom: 120px;
justify-content: flex-start; }
.product_intro._bottom .pagination_slide .swiper-pagination-bullet {
background-color: #5dcdda; }
.product_intro._bottom .pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #fff; }
@media only screen and (max-width: 768px) {
.product_intro._bottom {
margin-top: 72px; }
.product_intro._bottom ._title {
position: static;
top: 0;
left: 0;
text-align: center;
margin-bottom: 32px; }
.product_intro._bottom ._title p:nth-of-type(1) {
font-size: 47px;
letter-spacing: 1px; }
.product_intro._bottom ._title p:nth-of-type(2) {
font-size: 33px;
letter-spacing: 1px; }
.product_intro._bottom ._intro_left {
padding: 56px 0 136px; }
.product_intro._bottom ._intro_right .intro_img {
height: 506px; }
.product_intro._bottom .pagination_slide {
left: 0;
bottom: 66px;
justify-content: center; } }
@media only screen and (max-width: 480px) {
.product_intro._bottom {
margin-top: 36px; }
.product_intro._bottom ._title {
margin-bottom: 22px; }
.product_intro._bottom ._title p:nth-of-type(1) {
font-size: 32px; }
.product_intro._bottom ._title p:nth-of-type(2) {
font-size: 18px; }
.product_intro._bottom ._intro_left {
padding: 25px 0 60px; }
.product_intro._bottom ._intro_right .intro_img {
height: 306px; }
.product_intro._bottom .pagination_slide {
bottom: 40px; } }
.product_360 {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 0 calc((100% / 12) * 1.33);
margin: 62px 0 70px;
display: flex;
flex-wrap: wrap; }
.product_360 ._left {
width: calc((100% / 10) * 3);
border: 1px solid #d8d8d8;
border-right: 0;
display: flex;
align-items: center;
justify-content: center; }
.product_360 ._left img {
width: 57%;
max-width: 197px;
height: auto; }
.product_360 ._right {
width: calc((100% / 10) * 7);
padding: 22px 2.4305555556% 33px 5%;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/san-pham/img4.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid #d8d8d8; }
.product_360 ._right ._title {
margin-bottom: 22px; }
.product_360 ._right ._title p {
color: #3d3a3d;
text-transform: uppercase; }
.product_360 ._right ._title p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 40px; }
.product_360 ._right ._title p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 25px; }
.product_360 ._right .btn_link {
margin: 0;
width: 170px; }
@media only screen and (max-width: 768px) {
.product_360 {
padding: 0 40px;
margin: 0 0 50px; }
.product_360 ._left {
width: 100%;
border-right: 1px solid #d8d8d8;
padding: 60px 0; }
.product_360 ._left img {
width: 57%;
max-width: 326px;
height: auto; }
.product_360 ._right {
width: 100%;
padding: 40px 46px 50px;
border-top: 0;
text-align: center; }
.product_360 ._right ._title {
margin-bottom: 35px; }
.product_360 ._right ._title p:nth-of-type(1) {
font-size: 47px;
letter-spacing: 1px; }
.product_360 ._right ._title p:nth-of-type(2) {
font-size: 33px;
line-height: 54px;
letter-spacing: 1px; }
.product_360 ._right .btn_link {
width: 100%; }
.product_360 ._right .btn_link span,
.product_360 ._right .btn_link img {
display: none; } }
@media only screen and (max-width: 480px) {
.product_360 {
padding: 0 20px;
margin: 0 0 30px; }
.product_360 ._left {
padding: 30px 0; }
.product_360 ._right {
padding: 30px 15px 35px; }
.product_360 ._right ._title {
margin-bottom: 25px; }
.product_360 ._right ._title p:nth-of-type(1) {
font-size: 32px; }
.product_360 ._right ._title p:nth-of-type(2) {
font-size: 18px;
line-height: 26px; } }
.product_ground {
margin-top: 62px;
position: relative; }
.product_ground ._title {
text-align: center;
color: #3d3a3d;
font-size: 40px;
font-family: 'iCielGotham-Book';
margin-bottom: 42px;
text-transform: uppercase; }
@media only screen and (max-width: 768px) {
.product_ground {
margin-top: 42px; }
.product_ground ._title {
font-size: 45px;
letter-spacing: 1px; } }
@media only screen and (max-width: 480px) {
.product_ground {
margin-top: 30px; }
.product_ground ._title {
font-size: 22px;
letter-spacing: 1px;
margin-bottom: 25px; } }
.ground_intro-top {
display: flex;
flex-wrap: wrap; }
.ground_intro-top .ground_filter {
display: none; }
@media only screen and (max-width: 768px) {
.ground_intro-top .ground_filter {
width: calc(100% - 80px);
display: block;
margin: 0 40px 32px;
box-shadow: none;
position: relative;
box-sizing: border-box; }
.ground_intro-top .ground_filter:before {
position: absolute;
font-family: FontAwesome;
content: "";
top: 50%;
left: auto;
right: 34px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
width: 19px;
height: 13px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/san-pham/select-icon.png);
background-size: 19px 13px;
display: inline-block;
z-index: 10;
pointer-events: none; } }
@media only screen and (max-width: 768px) and (max-width: 480px) {
.ground_intro-top .ground_filter:before {
font-size: 10px;
right: 10px; } }
@media only screen and (max-width: 768px) {
.ground_intro-top .ground_filter .ui-selectmenu-button {
position: relative;
box-sizing: border-box;
width: 100%;
border: 0;
padding: 0 50px 0 185px;
border-radius: 0;
box-shadow: none;
outline: none;
background-color: #efefef;
color: #3d3a3d;
font-family: 'iCielGotham-Medium';
font-size: 29px;
height: 82px;
line-height: 82px; }
.ground_intro-top .ground_filter .ui-selectmenu-button .ui-selectmenu-icon {
display: none; }
.ground_intro-top .ground_filter .ui-selectmenu-button:before {
position: absolute;
content: "";
top: 50%;
left: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
height: 62px;
width: 130px;
background-color: #CD7028; } }
@media only screen and (max-width: 768px) and (max-width: 480px) {
.ground_intro-top .ground_filter .ui-selectmenu-button {
height: 38px;
line-height: 38px;
font-size: 15px; } }
@media only screen and (max-width: 768px) {
.ground_intro-top .ground_filter .ui-selectmenu-button[aria-labelledby="ui-id-1"]:before {
background-color: #CD7028; }
.ground_intro-top .ground_filter .ui-selectmenu-button[aria-labelledby="ui-id-2"]:before {
background-color: #A89E92; }
.ground_intro-top .ground_filter .ui-selectmenu-button[aria-labelledby="ui-id-3"]:before {
background-color: #6FBE44; }
.ground_intro-top .ground_filter .ui-selectmenu-button[aria-labelledby="ui-id-4"]:before {
background-color: #F9DF41; }
.ground_intro-top .ground_filter .ui-selectmenu-button[aria-labelledby="ui-id-5"]:before {
background-color: #C2CBE8; } }
@media only screen and (max-width: 480px) {
.ground_intro-top .ground_filter {
width: calc(100% - 40px);
margin: 0 20px 25px; }
.ground_intro-top .ground_filter:before {
right: 15px;
width: 10px;
height: 6px;
background-size: 10px 6px; }
.ground_intro-top .ground_filter .ui-selectmenu-button {
padding: 0 15px 0 95px;
font-size: 15px;
height: 38px;
line-height: 38px; }
.ground_intro-top .ground_filter .ui-selectmenu-button:before {
left: 7px;
height: 28px;
width: 50px; } }
@media only screen and (max-width: 320px) {
.ground_intro-top .ground_filter .ui-selectmenu-button {
padding: 0 15px 0 70px;
font-size: 14px; } }
.ground_intro-top ._top-left {
position: relative;
width: calc((100% / 12) * 8); }
@media only screen and (max-width: 768px) {
.ground_intro-top ._top-left {
width: 100%; } }
.ground_intro-top ._top-left .btn_zoom {
position: absolute;
z-index: 10;
left: 20px;
bottom: 20px;
display: none;
pointer-events: none; }
.ground_intro-top ._top-left .btn_zoom .zoom {
width: 36px;
height: 36px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/teaser/1-min.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 10px; }
.ground_intro-top ._top-left .btn_zoom .zoom img {
width: auto;
height: auto; }
@media only screen and (max-width: 768px) {
.ground_intro-top ._top-left .btn_zoom {
display: flex;
pointer-events: all; } }
@media only screen and (max-width: 480px) {
.ground_intro-top ._top-left .btn_zoom {
left: 15px;
bottom: 10px; }
.ground_intro-top ._top-left .btn_zoom .zoom {
width: 24px;
height: 24px;
margin-right: 7px; }
.ground_intro-top ._top-left .btn_zoom .zoom img {
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6); } }
.ground_intro-top ._top-right {
position: relative;
width: calc((100% / 12) * 4);
box-sizing: border-box;
padding: 0 calc(100% / 12) 0 calc((100% / 12) * 0.33); }
@media only screen and (max-width: 768px) {
.ground_intro-top ._top-right {
width: 100%;
padding: 60px 86px 0; } }
@media only screen and (max-width: 480px) {
.ground_intro-top ._top-right {
padding: 30px 35px 0; } }
@media only screen and (max-width: 768px) {
.ground_intro-top ._top-right .ground_type {
display: none; } }
.ground_intro-top ._top-right .ground_type li {
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.ground_intro-top ._top-right .ground_type li a {
width: 100%;
height: 100%;
display: inline-block;
padding: 10px 10px 10px 24.861878453%;
box-sizing: border-box;
position: relative;
font-family: 'iCielGotham-Medium';
font-size: 14px;
color: #3d3a3d;
background-color: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.ground_intro-top ._top-right .ground_type li a span {
position: absolute;
content: "";
height: 30px;
width: 14.9171270718%;
left: 1.3812154696%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%); }
.ground_intro-top ._top-right .ground_type li.type1 a span {
background-color: #CD7028; }
.ground_intro-top ._top-right .ground_type li.type2 a span {
background-color: #9d8262; }
.ground_intro-top ._top-right .ground_type li.type3 a span {
background-color: #6FBE44; }
.ground_intro-top ._top-right .ground_type li.type4 a span {
background-color: #F9DF41; }
.ground_intro-top ._top-right .ground_type li.type5 a span {
background-color: #748ac2; }
.ground_intro-top ._top-right .ground_type li.active {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }
.ground_intro-top ._top-right .ground_type li.active a {
color: #fff; }
.ground_intro-top ._top-right .ground_type li.active.type1 {
background-color: #CD7028; }
.ground_intro-top ._top-right .ground_type li.active.type2 {
background-color: #9d8262; }
.ground_intro-top ._top-right .ground_type li.active.type3 {
background-color: #6FBE44; }
.ground_intro-top ._top-right .ground_type li.active.type4 {
background-color: #F9DF41; }
.ground_intro-top ._top-right .ground_type li.active.type5 {
background-color: #748ac2; }
.ground_intro-top ._top-right .ground_note {
margin-top: 30px;
display: flex;
flex-direction: column; }
.ground_intro-top ._top-right .ground_note ._head-line {
text-align: center;
color: #3d3a3d;
font-size: 40px;
font-family: 'iCielGotham-Book';
text-transform: uppercase;
letter-spacing: 0.5px;
display: none; }
.ground_intro-top ._top-right .ground_note .text {
color: #3d3a3d;
font-family: 'Cabin';
font-weight: normal;
font-style: italic;
font-size: 13px;
line-height: 21px;
margin-bottom: 25px; }
.ground_intro-top ._top-right .ground_note .img {
width: 100%; }
.ground_intro-top ._top-right .ground_note .img img {
width: auto;
height: auto; }
@media only screen and (max-width: 768px) {
.ground_intro-top ._top-right .ground_note {
margin-top: 0; }
.ground_intro-top ._top-right .ground_note ._head-line {
display: block;
order: 1;
margin-bottom: 40px; }
.ground_intro-top ._top-right .ground_note .text {
font-size: 20px;
line-height: 32px;
margin-bottom: 0;
order: 3; }
.ground_intro-top ._top-right .ground_note .img {
order: 2;
margin-bottom: 25px; }
.ground_intro-top ._top-right .ground_note .img img {
width: 100%; } }
@media only screen and (max-width: 480px) {
.ground_intro-top ._top-right .ground_note ._head-line {
font-size: 20px;
margin-bottom: 20px; }
.ground_intro-top ._top-right .ground_note .text {
font-size: 13px;
line-height: 21px; }
.ground_intro-top ._top-right .ground_note .img {
margin-bottom: 15px; } }
.popup_ground {
width: calc((100% / 12) * 10);
padding: 42px 45px 30px;
box-sizing: border-box;
background-color: #fff;
margin: 0 auto;
display: none; }
@media only screen and (max-width: 1024px) {
.popup_ground {
width: calc(100% - 80px);
padding: 60px 45px 15px; } }
@media only screen and (max-width: 768px) {
.popup_ground {
margin-left: 10px; } }
@media only screen and (max-width: 480px) {
.popup_ground {
width: calc(100% - 30px);
padding: 30px 15px 20px; } }
.ground_intro-bottom {
width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap; }
.ground_intro-bottom ._bottom-left {
width: calc((100% / 10) * 6);
position: relative; }
@media only screen and (max-width: 768px) {
.ground_intro-bottom ._bottom-left {
width: 100%;
order: 2; } }
.ground_intro-bottom ._bottom-left .swiper-slide .slide_img {
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; }
.ground_intro-bottom ._bottom-left .swiper-slide .slide_img ._right {
width: auto; }
.ground_intro-bottom ._bottom-left .swiper-slide .slide_img ._right img {
width: auto;
height: auto;
display: block;
margin: 0 auto; }
.ground_intro-bottom ._bottom-left .swiper-slide .slide_img .slide_text {
width: 100%;
text-align: center;
color: #26aba3;
text-transform: uppercase;
font-family: 'iCielGotham-Book';
font-size: 25px;
margin-top: 15px; }
@media only screen and (max-width: 768px) {
.ground_intro-bottom ._bottom-left .swiper-slide .slide_img {
padding-left: 0;
justify-content: center; }
.ground_intro-bottom ._bottom-left .swiper-slide .slide_img .slide_text {
font-size: 41px;
margin-top: 25px;
margin-left: 0; } }
@media only screen and (max-width: 480px) {
.ground_intro-bottom ._bottom-left .swiper-slide .slide_img .slide_text {
font-size: 22px;
margin-top: 15px; } }
.ground_intro-bottom ._bottom-left .swiper-button-next,
.ground_intro-bottom ._bottom-left .swiper-button-prev {
width: 29px;
height: 29px;
background-color: #51bcc0;
outline: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
opacity: 1;
top: 40%;
background-image: none !important; }
.ground_intro-bottom ._bottom-left .swiper-button-next img,
.ground_intro-bottom ._bottom-left .swiper-button-prev img {
width: auto;
height: auto; }
.ground_intro-bottom ._bottom-left .swiper-button-next.swiper-button-disabled,
.ground_intro-bottom ._bottom-left .swiper-button-prev.swiper-button-disabled {
background-color: #d8d8d8; }
.ground_intro-bottom ._bottom-left .swiper-button-next {
right: 22px; }
.ground_intro-bottom ._bottom-left .swiper-button-prev {
left: 22px; }
@media only screen and (max-width: 768px) {
.ground_intro-bottom ._bottom-left .swiper-button-next,
.ground_intro-bottom ._bottom-left .swiper-button-prev {
width: 48px;
height: 48px; }
.ground_intro-bottom ._bottom-left .swiper-button-next img,
.ground_intro-bottom ._bottom-left .swiper-button-prev img {
width: auto;
height: auto;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5); }
.ground_intro-bottom ._bottom-left .swiper-button-next {
right: -24px; }
.ground_intro-bottom ._bottom-left .swiper-button-prev {
left: -24px; } }
@media only screen and (max-width: 480px) {
.ground_intro-bottom ._bottom-left .swiper-button-next,
.ground_intro-bottom ._bottom-left .swiper-button-prev {
width: 28px;
height: 28px; }
.ground_intro-bottom ._bottom-left .swiper-button-next img,
.ground_intro-bottom ._bottom-left .swiper-button-prev img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); }
.ground_intro-bottom ._bottom-left .swiper-button-next {
right: -10px; }
.ground_intro-bottom ._bottom-left .swiper-button-prev {
left: -10px; } }
.ground_intro-bottom ._bottom-left .ground_intro_img {
margin-bottom: 10px;
border: 1px solid #fbb307; }
.ground_intro-bottom ._bottom-left .ground_intro_img .swiper-slide .slide_img {
width: 100%;
padding: 78px 0 30px; }
.ground_intro-bottom ._bottom-left .ground_intro_img .swiper-slide .slide_img ._right img {
max-width: 280px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.ground_intro-bottom ._bottom-left .ground_intro_img .swiper-slide .slide_img ._right.scale_mobile img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5); }
.ground_intro-bottom ._bottom-left .ground_intro_img .swiper-slide .slide_img ._right.scale_mobile .slide_text {
display: none; }
@media only screen and (max-width: 768px) {
.ground_intro-bottom ._bottom-left .ground_intro_img {
margin-bottom: 28px; }
.ground_intro-bottom ._bottom-left .ground_intro_img .swiper-slide .slide_img {
padding: 60px 0 55px; } }
@media only screen and (max-width: 480px) {
.ground_intro-bottom ._bottom-left .ground_intro_img {
margin-bottom: 15px; }
.ground_intro-bottom ._bottom-left .ground_intro_img .swiper-slide .slide_img {
padding: 40px 0 35px; }
.ground_intro-bottom ._bottom-left .ground_intro_img .swiper-slide .slide_img ._right img {
max-width: 170px; } }
.ground_intro-bottom ._bottom-left .ground_intro_thumbs {
padding-right: 5.4187192118%; }
.ground_intro-bottom ._bottom-left .ground_intro_thumbs .swiper-slide {
padding: 14px 0;
border: 1px solid #dadada; }
.ground_intro-bottom ._bottom-left .ground_intro_thumbs .swiper-slide.swiper-slide-active {
border: 1px solid #fbb307; }
.ground_intro-bottom ._bottom-left .ground_intro_thumbs .swiper-slide .slide_img ._right {
width: 52.6666666667%; }
.ground_intro-bottom ._bottom-left .ground_intro_thumbs .swiper-slide .slide_img .slide_text {
font-size: 8px;
margin-top: 3px; }
@media only screen and (max-width: 768px) {
.ground_intro-bottom ._bottom-left .ground_intro_thumbs {
padding-right: 27.2863568216%; }
.ground_intro-bottom ._bottom-left .ground_intro_thumbs .swiper-slide {
padding: 18px 0; }
.ground_intro-bottom ._bottom-left .ground_intro_thumbs .swiper-slide .slide_img ._right {
width: 65.8227848101%; } }
@media only screen and (max-width: 480px) {
.ground_intro-bottom ._bottom-left .ground_intro_thumbs .swiper-slide {
padding: 10px 0; } }
.ground_intro-bottom ._bottom-left .perspective_photo_img {
border: 1px solid #fbb307;
margin-bottom: 10px; }
.ground_intro-bottom ._bottom-left .perspective_photo_img .swiper-slide .slide_img {
width: 100%;
height: 430px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media only screen and (max-width: 768px) {
.ground_intro-bottom ._bottom-left .perspective_photo_img {
margin-bottom: 28px; }
.ground_intro-bottom ._bottom-left .perspective_photo_img .swiper-slide .slide_img {
height: 490px; } }
@media only screen and (max-width: 480px) {
.ground_intro-bottom ._bottom-left .perspective_photo_img {
margin-bottom: 15px; }
.ground_intro-bottom ._bottom-left .perspective_photo_img .swiper-slide .slide_img {
height: 300px; } }
.ground_intro-bottom ._bottom-left .perspective_photo_thumbs {
padding-right: 5.4187192118%; }
.ground_intro-bottom ._bottom-left .perspective_photo_thumbs .swiper-slide {
border: 1px solid #dadada; }
.ground_intro-bottom ._bottom-left .perspective_photo_thumbs .swiper-slide.swiper-slide-active {
border: 1px solid #fbb307; }
.ground_intro-bottom ._bottom-left .perspective_photo_thumbs .swiper-slide .slide_img {
height: 85px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media only screen and (max-width: 768px) {
.ground_intro-bottom ._bottom-left .perspective_photo_thumbs {
padding-right: 27.2863568216%; }
.ground_intro-bottom ._bottom-left .perspective_photo_thumbs .swiper-slide .slide_img {
height: 110px; } }
@media only screen and (max-width: 480px) {
.ground_intro-bottom ._bottom-left .perspective_photo_thumbs .swiper-slide .slide_img {
height: 70px; } }
.ground_intro-bottom ._bottom-right {
width: calc((100% / 10) * 4);
box-sizing: border-box;
padding: 55px 10px 0 5.3897180763%; }
@media only screen and (max-width: 768px) {
.ground_intro-bottom ._bottom-right {
width: 100%;
padding: 0;
order: 1; } }
.ground_intro-bottom ._bottom-right ._ground_title {
color: #3d3a3d;
font-family: 'iCielGotham-Bold';
font-size: 25px;
text-transform: uppercase; }
.ground_intro-bottom ._bottom-right ._ground_name {
box-sizing: border-box;
width: 298px;
padding: 10px 8.2644628099%;
margin: 5px 0 30px;
color: #fff;
font-family: 'iCielGotham-Bold';
font-size: 15px;
text-transform: uppercase;
background-color: #71d5e9; }
.ground_intro-bottom ._bottom-right ._ground_intro_list {
box-sizing: border-box;
padding: 0 0 32px 8.2644628099%; }
.ground_intro-bottom ._bottom-right ._ground_intro_list p {
margin-bottom: 10px;
display: flex;
color: #3d3a3d;
font-size: 15px;
font-family: 'Cabin';
font-weight: normal; }
.ground_intro-bottom ._bottom-right ._ground_intro_list p strong,
.ground_intro-bottom ._bottom-right ._ground_intro_list p b {
width: 48.6486486486%;
font-weight: bold; }
.ground_intro-bottom ._bottom-right ._ground_intro_list p sup {
top: 5px; }
.ground_intro-bottom ._bottom-right ._ground_intro_type {
box-sizing: border-box;
padding: 0 0 0 8.2644628099%; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li {
margin-bottom: 22px; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a {
display: flex;
align-items: center; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a span {
position: relative;
font-family: 'iCielGotham-Bold';
font-size: 12px;
text-transform: uppercase;
color: #3d3a3d;
margin-right: 12px;
z-index: 1; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a span:before {
position: absolute;
content: "";
height: 10px;
width: 0;
background-color: #ffff00;
left: 0;
bottom: -2px;
z-index: -1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a img {
width: auto;
height: auto; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a.is-active span:before {
width: 100%; }
@media only screen and (max-width: 1024px) {
.ground_intro-bottom ._bottom-right ._ground_intro_list {
padding: 0 0 32px 0; } }
@media only screen and (max-width: 768px) {
.ground_intro-bottom ._bottom-right ._ground_title {
font-size: 33px; }
.ground_intro-bottom ._bottom-right ._ground_name {
width: 385px;
padding: 15px 0 15px 46px;
margin: 15px 0 48px;
font-size: 28px; }
.ground_intro-bottom ._bottom-right ._ground_intro_list {
padding: 0 0 32px 46px; }
.ground_intro-bottom ._bottom-right ._ground_intro_list p {
margin-bottom: 14px;
font-size: 28px; }
.ground_intro-bottom ._bottom-right ._ground_intro_list p strong,
.ground_intro-bottom ._bottom-right ._ground_intro_list p b {
width: auto; }
.ground_intro-bottom ._bottom-right ._ground_intro_list p sup {
top: 10px; }
.ground_intro-bottom ._bottom-right ._ground_intro_type {
padding: 0 0 0 46px;
display: flex;
justify-content: center; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li {
margin-bottom: 42px;
margin-right: 65px; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li:last-child {
margin-right: 0; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a {
display: flex;
align-items: center; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a span {
font-size: 20px;
margin-right: 0; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a span:before {
height: 16px; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a img {
display: none; } }
@media only screen and (max-width: 480px) {
.ground_intro-bottom ._bottom-right ._ground_title {
font-size: 22px; }
.ground_intro-bottom ._bottom-right ._ground_name {
width: 250px;
padding: 8px 0 10px 15px;
margin: 10px 0 20px;
font-size: 15px; }
.ground_intro-bottom ._bottom-right ._ground_intro_list {
padding: 0 0 20px 15px; }
.ground_intro-bottom ._bottom-right ._ground_intro_list p {
margin-bottom: 10px;
font-size: 15px; }
.ground_intro-bottom ._bottom-right ._ground_intro_list p sup {
top: 5px; }
.ground_intro-bottom ._bottom-right ._ground_intro_type {
padding: 0 0 0 15px; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li {
margin-bottom: 30px;
margin-right: 25px; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a span {
font-size: 12px; }
.ground_intro-bottom ._bottom-right ._ground_intro_type li a span:before {
height: 10px; } }
.ui-selectmenu-menu {
margin: 11px 0 0; }
.ui-selectmenu-menu .ui-widget {
background-color: #FFFFFF;
box-shadow: none;
border: 0; }
.ui-selectmenu-menu .ui-widget .ui-menu-item .ui-menu-item-wrapper {
position: relative;
background-color: #fff;
color: #3d3a3d;
font-family: 'iCielGotham-Medium';
font-size: 29px;
height: 82px;
line-height: 82px;
padding: 0 20px 0 185px;
border: none;
border-top: 1px solid #efefef; }
.ui-selectmenu-menu .ui-widget .ui-menu-item .ui-menu-item-wrapper:before {
position: absolute;
content: "";
top: 50%;
left: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
height: 62px;
width: 130px; }
.ui-selectmenu-menu .ui-widget .ui-menu-item:nth-of-type(1) .ui-menu-item-wrapper:before {
background-color: #CD7028; }
.ui-selectmenu-menu .ui-widget .ui-menu-item:nth-of-type(2) .ui-menu-item-wrapper:before {
background-color: #9d8262; }
.ui-selectmenu-menu .ui-widget .ui-menu-item:nth-of-type(3) .ui-menu-item-wrapper:before {
background-color: #6FBE44; }
.ui-selectmenu-menu .ui-widget .ui-menu-item:nth-of-type(4) .ui-menu-item-wrapper:before {
background-color: #F9DF41; }
.ui-selectmenu-menu .ui-widget .ui-menu-item:nth-of-type(5) .ui-menu-item-wrapper:before {
background-color: #748ac2; }
@media only screen and (max-width: 480px) {
.ui-selectmenu-menu {
margin: 7px 0 0; }
.ui-selectmenu-menu .ui-widget .ui-menu-item .ui-menu-item-wrapper {
font-size: 15px;
height: 38px;
line-height: 38px;
padding: 0 15px 0 95px; }
.ui-selectmenu-menu .ui-widget .ui-menu-item .ui-menu-item-wrapper:before {
left: 7px;
height: 28px;
width: 50px; } }
@media only screen and (max-width: 320px) {
.ui-selectmenu-menu .ui-widget .ui-menu-item .ui-menu-item-wrapper {
font-size: 14px;
padding: 0 15px 0 70px; } }
svg text {
pointer-events: none !important; }
.type_dl,
.type_sl,
.type_lk,
.type_tm,
.type_nv {
cursor: pointer;
pointer-events: none !important;
display: block !important;
opacity: 0.05 !important; }
.type_dl.active,
.type_sl.active,
.type_lk.active,
.type_tm.active,
.type_nv.active {
opacity: 1 !important;
pointer-events: all !important;
display: block !important; }
.type_dl.active {
fill: #CD7028 !important; }
.type_sl.active {
fill: #9d8262 !important; }
.type_lk.active {
fill: #F9DF41 !important; }
.type_tm.active {
fill: #748ac2 !important; }
.type_nv.active {
fill: #6FBE44 !important; }
@media only screen and (max-width: 768px) {
.page_game {
padding-top: 155px; }
.page_game .banner_decor_mobile {
max-width: 58.59375%; }
.page_game .game-content {
padding-bottom: 80px; }
.page_game .game-content .navigation-fm .page_titlte {
order: 1;
margin-top: 0px; }
.page_game .game-content .navigation-fm .page_navigation {
order: 2;
padding: 0px 60px; }
.page_game .game-content .navigation-fm .page_navigation li {
margin-right: 84px; }
.page_game .game-content .navigation-fm .page_navigation li a:before {
background-color: #ffff00; }
.page_game .game-content .overview_left {
order: 1;
padding: 0px 40px; }
.page_game .game-content .overview_left .overview_text {
padding: 0px; }
.page_game .game-content .overview_left .overview_text p {
padding-bottom: 25px; }
.page_game .game-content .overview_left .overview_text p:last-child {
padding-bottom: 0px; }
.page_game .game-content .overview_right {
order: 2;
margin-top: 50px; } }
@media only screen and (max-width: 480px) {
.page_game {
padding-top: 110px; }
.page_game .game-content {
padding-bottom: 40px; }
.page_game .game-content .navigation-fm .page_navigation {
padding: 0px; }
.page_game .game-content .navigation-fm .page_navigation li {
width: auto;
margin-bottom: 0px;
margin-right: 98px; }
.page_game .game-content .navigation-fm .page_navigation li a {
font-size: 12px; }
.page_game .game-content .navigation-fm .page_navigation li a:before {
bottom: -3px; }
.page_game .game-content .overview_left {
padding: 0px; }
.page_game .game-content .overview_left .overview_text p {
padding-bottom: 10px; }
.page_game .game-content .overview_right {
margin-top: 20px; } }
@media only screen and (max-width: 425px) {
.page_game .game-content .navigation-fm .page_navigation li {
margin-right: 71px; } }
@media only screen and (max-width: 414px) {
.page_game .game-content .navigation-fm .page_navigation li {
margin-right: 64px; } }
@media only screen and (max-width: 375px) {
.page_game .game-content .navigation-fm .page_navigation li {
margin-right: 46px; } }
@media only screen and (max-width: 360px) {
.page_game .game-content .navigation-fm .page_navigation li {
margin-right: 38px; } }
@media only screen and (max-width: 320px) {
.page_game .game-content .navigation-fm .page_navigation li {
margin-right: 18px; } }
.game-content {
position: relative;
border-bottom: 1px solid #ebebeb; }
.game-content:before {
position: absolute;
content: "";
right: 0;
bottom: 0;
top: auto;
left: auto;
width: calc((100% / 12) * 3);
height: 287px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/game/decor-bottom.png);
background-size: cover;
background-repeat: no-repeat;
background-position: left top;
z-index: -1; }
@media only screen and (max-width: 768px) {
.game-content:before {
width: 36.4583333333%;
height: 315px; } }
@media only screen and (max-width: 480px) {
.game-content:before {
height: 185px; } }
.game-note {
width: calc((100% / 12) * 8);
margin: 50px auto 0px; }
@media only screen and (max-width: 1024px) {
.game-note {
width: calc(100% - 180px); } }
@media only screen and (max-width: 768px) {
.game-note {
width: calc(100% - 140px); } }
@media only screen and (max-width: 480px) {
.game-note {
width: calc(100% - 40px);
margin: 25px auto 0px; } }
.game-note p {
font-family: 'Cabin';
font-size: 15px;
line-height: 25px;
color: #3d3a3d;
text-align: center; }
@media only screen and (max-width: 768px) {
.game-note p {
font-size: 28px;
line-height: 44px; } }
@media only screen and (max-width: 480px) {
.game-note p {
font-size: 14px;
line-height: 22px; } }
.game-note p b, .game-note p strong {
font-weight: bold; }
.game-note p em, .game-note p i {
font-style: italic; }
.game-note p a {
word-break: break-word;
color: #007bff; }
.game-note p a:hover {
color: #007bff; }
.game-btn {
position: relative;
display: flex;
width: calc((100% / 12) * 6);
justify-content: center;
margin: 45px auto 0px;
padding: 0px 10px; }
@media only screen and (max-width: 1024px) {
.game-btn {
width: calc((100% / 12) * 8.5); } }
@media only screen and (max-width: 768px) {
.game-btn {
flex-direction: column;
align-items: center;
width: 100%; } }
@media only screen and (max-width: 480px) {
.game-btn {
margin-top: 25px; } }
.game-btn-share, .game-btn-join {
position: relative;
overflow: hidden;
display: inline-block;
font-family: 'Cabin';
font-weight: 600;
text-align: center;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.8px;
height: 41px;
line-height: 41px;
border-radius: 41px;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
@media only screen and (max-width: 768px) {
.game-btn-share, .game-btn-join {
height: 70px;
line-height: 70px;
border-radius: 70px;
-webkit-box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.15); } }
@media only screen and (max-width: 480px) {
.game-btn-share, .game-btn-join {
height: 41px;
line-height: 41px;
border-radius: 41px; } }
.game-btn-share i, .game-btn-join i {
color: #ffffff;
margin-right: 10px;
font-size: 15px; }
@media only screen and (max-width: 768px) {
.game-btn-share i, .game-btn-join i {
margin-right: 25px;
font-size: 25px; } }
@media only screen and (max-width: 480px) {
.game-btn-share i, .game-btn-join i {
margin-right: 10px;
font-size: 15px; } }
.game-btn-share:hover, .game-btn-join:hover {
color: #ffffff; }
@media only screen and (min-width: 1025px) {
.game-btn-share:hover, .game-btn-join:hover {
letter-spacing: 1.5px; } }
.game-btn-share:focus, .game-btn-join:focus {
color: #ffffff; }
.game-fix-btn-join {
display: none; }
@media only screen and (max-width: 768px) {
.game-fix-btn-join {
display: block; }
.game-fix-btn-join .game-btn-share {
display: none; }
.game-fix-btn-join .game-btn-join {
margin-bottom: 0px;
position: fixed;
left: 0;
right: 0;
bottom: 0px;
z-index: 2;
width: 100%;
border-radius: inherit; } }
@media only screen and (max-width: 768px) {
#footer.footer-game {
padding-bottom: 70px; } }
@media only screen and (max-width: 480px) {
#footer.footer-game {
padding-bottom: 50px; } }
.game-btn-share {
font-size: 13px;
background-color: #46629c;
width: 28.572%; }
@media only screen and (max-width: 768px) {
.game-btn-share {
width: 575px;
font-size: 26px; } }
@media only screen and (max-width: 480px) {
.game-btn-share {
font-size: 13px;
width: 240px; } }
.game-btn-join {
margin-right: 20px;
font-size: 15px;
width: calc(100% - 28.572% - 20px);
background: linear-gradient(to right, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%); }
@media only screen and (max-width: 768px) {
.game-btn-join {
width: 575px;
font-size: 26px;
margin-right: 0px;
margin-bottom: 25px; } }
@media only screen and (max-width: 480px) {
.game-btn-join {
font-size: 13px;
width: 240px;
margin-bottom: 10px; } }
.game_rankings {
width: calc((100% / 12) * 6);
margin: 45px auto 0px; }
@media only screen and (max-width: 1024px) {
.game_rankings {
width: calc((100% / 12) * 8.5); } }
@media only screen and (max-width: 768px) {
.game_rankings {
width: calc(100% - 80px);
margin-top: 30px; } }
@media only screen and (max-width: 480px) {
.game_rankings {
width: calc(100% - 40px);
margin-top: 20px; } }
@media only screen and (max-width: 768px) {
.game_rankings .overview_title {
padding-left: 40px; } }
@media only screen and (max-width: 480px) {
.game_rankings .overview_title {
padding-left: 0px; } }
.game_rankings .game_rankings-content {
background-color: #ffffff;
width: 100%;
height: auto;
-webkit-box-shadow: 0px 0px 220px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 0px 220px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 220px 0px rgba(0, 0, 0, 0.15);
padding: 15px 40px 0px;
border-bottom: 3px solid #ffff00; }
@media only screen and (max-width: 768px) {
.game_rankings .game_rankings-content {
padding: 5px 30px 0px; } }
@media only screen and (max-width: 480px) {
.game_rankings .game_rankings-content {
padding: 5px 15px 0px; } }
.game_rankings .game_rankings-content table {
width: 100%; }
@media only screen and (max-width: 768px) {
.game_rankings .game_rankings-content table thead {
display: none; } }
.game_rankings .game_rankings-content table thead tr {
border-bottom: 1px solid #4fbec2; }
.game_rankings .game_rankings-content table thead tr th {
font-family: 'iCielGotham-Bold';
color: #3d3a3d;
font-size: 13px;
padding: 15px 15px 15px 0px;
text-align: left; }
.game_rankings .game_rankings-content table thead tr th:last-child {
padding-right: 0px; }
.game_rankings .game_rankings-content table thead tr th:nth-of-type(1) {
width: 14%; }
.game_rankings .game_rankings-content table thead tr th:nth-of-type(2) {
width: 31.5%; }
.game_rankings .game_rankings-content table thead tr th:nth-of-type(3) {
width: 26%; }
.game_rankings .game_rankings-content table thead tr th:nth-of-type(4) {
width: 18%; }
.game_rankings .game_rankings-content table thead tr th:nth-of-type(5) {
width: 10.5%; }
.game_rankings .game_rankings-content table tbody tr {
border-bottom: 1px solid #e5e5e5; }
@media only screen and (max-width: 768px) {
.game_rankings .game_rankings-content table tbody tr {
border-bottom: 1px solid #4fbec2; } }
.game_rankings .game_rankings-content table tbody tr:last-child {
border-bottom: none; }
.game_rankings .game_rankings-content table tbody tr:nth-of-type(1) td:nth-of-type(1), .game_rankings .game_rankings-content table tbody tr:nth-of-type(2) td:nth-of-type(1), .game_rankings .game_rankings-content table tbody tr:nth-of-type(3) td:nth-of-type(1) {
color: #4fbec2; }
.game_rankings .game_rankings-content table tbody tr td {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 25px;
padding: 10px 15px 10px 0px;
text-align: left; }
@media only screen and (max-width: 768px) {
.game_rankings .game_rankings-content table tbody tr td {
font-size: 22px;
line-height: 32px; } }
@media only screen and (max-width: 480px) {
.game_rankings .game_rankings-content table tbody tr td {
font-size: 15px;
line-height: 25px; } }
.game_rankings .game_rankings-content table tbody tr td:nth-of-type(1) {
font-family: 'iCielGotham-Bold';
color: rgba(61, 58, 61, 0.8);
font-size: 13px;
width: 14%;
text-align: center; }
@media only screen and (max-width: 768px) {
.game_rankings .game_rankings-content table tbody tr td:nth-of-type(1) {
font-size: 22px !important;
color: #4fbec2;
text-align: left; } }
@media only screen and (max-width: 480px) {
.game_rankings .game_rankings-content table tbody tr td:nth-of-type(1) {
font-size: 13px !important; } }
.game_rankings .game_rankings-content table tbody tr td:nth-of-type(2) {
width: 31.5%;
padding-right: 15px; }
.game_rankings .game_rankings-content table tbody tr td:nth-of-type(3) {
width: 26%; }
.game_rankings .game_rankings-content table tbody tr td:nth-of-type(4) {
width: 18%; }
.game_rankings .game_rankings-content table tbody tr td:nth-of-type(5) {
width: 10.5%; }
._question-number-big {
position: absolute;
left: 0;
right: auto;
bottom: auto;
top: -21px;
font-family: 'iCielGotham-Bold';
font-size: 115px;
color: rgba(61, 58, 61, 0.1); }
@media only screen and (max-width: 768px) {
._question-number-big {
display: none; } }
.game_question-content {
padding-bottom: 45px; }
.game_question {
position: relative;
width: calc((100% / 12) * 10);
margin: 45px auto 0px; }
@media only screen and (max-width: 1024px) {
.game_question {
width: calc(100% - 60px); } }
@media only screen and (max-width: 768px) {
.game_question {
width: calc(100% - 80px);
margin-top: 35px; } }
@media only screen and (max-width: 480px) {
.game_question {
width: calc(100% - 40px);
margin-top: 15px; } }
.question_form .swiper-container {
overflow: inherit !important; }
.question_form .swiper-container .swiper-wrapper .swiper-slide {
opacity: 0 !important;
-moz-transition: all 1.6s ease-in-out;
-o-transition: all 1.6s ease-in-out;
-webkit-transition: all 1.6s ease-in-out;
transition: all 1.6s ease-in-out; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(2) ._item ._question-right ._question-img {
width: calc((100% - 1px) / 2);
margin-right: 1px;
margin-top: 1px;
float: left; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(2) ._item ._question-right ._question-img:nth-of-type(1), .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(2) ._item ._question-right ._question-img:nth-of-type(2) {
margin-top: 0px; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(2) ._item ._question-right ._question-img:nth-of-type(2n) {
margin-right: 0px; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(3) ._item ._question-left .answer-list .answer-item label {
padding-top: 8px;
padding-bottom: 8px;
border-radius: 40px; }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(3) ._item ._question-left .answer-list .answer-item label {
padding-top: 29px;
padding-bottom: 29px;
border-radius: 20px; } }
@media only screen and (max-width: 480px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(3) ._item ._question-left .answer-list .answer-item label {
padding-top: 7px;
padding-bottom: 7px; } }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(3) ._item ._question-right ._question-img {
width: calc((100% - 1px) / 2);
margin-right: 1px;
margin-top: 1px;
float: left; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(3) ._item ._question-right ._question-img:nth-of-type(1), .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(3) ._item ._question-right ._question-img:nth-of-type(2) {
margin-top: 0px; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(3) ._item ._question-right ._question-img:nth-of-type(2n) {
margin-right: 0px; }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item {
margin-bottom: 0px !important; } }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list {
position: absolute;
left: 68px;
right: auto;
width: 100%;
clear: both;
padding: 0px;
margin-top: 40px; }
@media only screen and (max-width: 1024px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list {
left: 30px; } }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list {
padding: 0px;
left: 0px;
position: static;
top: 0;
width: 100% !important; } }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item {
width: calc((100% - 60px) / 4);
float: left;
flex-direction: row;
margin-right: 20px;
margin-bottom: 0px; }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item {
width: 100%;
margin-right: 0px;
flex-direction: column;
margin-bottom: 15px; } }
@media only screen and (max-width: 768px) and (max-width: 480px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item {
margin-bottom: 7px; } }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item:last-child {
margin-bottom: 0px; } }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item:nth-of-type(4n) {
margin-right: 0px; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item label {
padding: 0px; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item label:before, .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item label:after {
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
top: auto;
bottom: -14px; }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item label:before, .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item label:after {
left: 35px;
bottom: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%); } }
@media only screen and (max-width: 480px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item label:before, .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item label:after {
left: 5px; } }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item label p {
width: 55%;
float: right; } }
@media only screen and (max-width: 480px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(4) ._item .answer-list .answer-item label p {
width: 45%; } }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item label {
padding-top: 8px;
padding-bottom: 8px;
border-radius: 40px; }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item label {
padding-top: 29px;
padding-bottom: 29px;
border-radius: 20px; } }
@media only screen and (max-width: 480px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item label {
padding-top: 7px;
padding-bottom: 7px; } }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item label:after, .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item label:before {
background-color: transparent;
border: 1px solid #554f55;
content: "\f00c";
font-size: 12px;
font-family: 'Font Awesome 5 Free';
font-weight: 600;
color: #554f55; }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item label:after, .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item label:before {
font-size: 28px;
color: #ffffff;
background-color: #554f55;
border: none; } }
@media only screen and (max-width: 480px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item label:after, .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item label:before {
font-size: 12px; } }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item input:checked + label:before {
background-color: #51bcc0;
border: 1px solid #51bcc0;
color: #ffffff; }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-left .answer-list .answer-item input:checked + label:before {
border: none; } }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img {
margin-top: 4px; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(1), .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(2) {
margin-top: 0px; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(5n+1), .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(5n+4) {
width: 47.5%;
float: left; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(5n+2), .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(5n+3), .question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(5n) {
width: calc(52.5% - 4px);
float: left;
margin-left: 4px; }
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(5n+4) {
top: -83px;
margin-bottom: -83px; }
@media only screen and (max-width: 1024px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(5n+4) {
top: -71.21px;
margin-bottom: -71.21px; } }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(5n+4) {
top: -84.65px;
margin-bottom: -84.65px; } }
@media only screen and (max-width: 480px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(5) ._item ._question-right ._question-img:nth-of-type(5n+4) {
top: -41px;
margin-bottom: -41px; } }
.question_form .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active {
opacity: 1 !important;
transition-duration: 0.6s !important;
transition-delay: 0.7s !important; }
.question_form .swiper-container .swiper-wrapper .swiper-slide ._item {
position: relative; }
.question_form .swiper-container .swiper-wrapper .swiper-slide ._item ._question-left ._question-right {
display: none; }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide ._item ._question-left ._question-right {
display: block;
width: 100%;
margin-bottom: 50px;
margin-top: 40px; } }
@media only screen and (max-width: 480px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide ._item ._question-left ._question-right {
margin-bottom: 20px;
margin-top: 15px; } }
@media only screen and (max-width: 768px) {
.question_form .swiper-container .swiper-wrapper .swiper-slide ._item ._question-right {
display: none; } }
._question-left {
position: relative;
width: calc((100% / 10) * 4);
float: left;
padding: 50px 48px 0px 68px;
float: left; }
@media only screen and (max-width: 1024px) {
._question-left {
padding: 50px 30px 0px 30px; } }
@media only screen and (max-width: 768px) {
._question-left {
width: 100%;
padding: 0px; } }
._question-right {
position: relative;
width: calc((100% / 10) * 6);
float: left;
background-color: #ffffe4;
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.3); }
._question-right ._question-img {
position: relative;
width: 100%;
height: auto;
background-size: cover;
background-position: center center;
background-repeat: no-repeat; }
._question-right ._question-img img {
display: block;
width: 100%;
height: auto; }
._question-right ._question-img .missing-picture {
position: absolute;
content: "";
right: 4px;
bottom: 21.5%;
left: auto;
top: auto;
background-color: #ffffff;
width: 34.723%; }
@media only screen and (max-width: 768px) {
._question-right ._question-img .missing-picture {
bottom: 20px; } }
@media only screen and (max-width: 480px) {
._question-right ._question-img .missing-picture {
bottom: 10px; } }
._question-right ._question-img ._img-number {
position: absolute;
top: 20px;
left: 20px;
bottom: auto;
right: auto;
font-family: 'iCielGotham-Bold';
font-size: 20px;
color: #51bcc0;
width: 45px;
height: 45px;
line-height: 45px;
background-color: #ffffff;
border-radius: 50%;
text-align: center; }
@media only screen and (max-width: 480px) {
._question-right ._question-img ._img-number {
width: 24px;
height: 24px;
font-size: 12px;
line-height: 24px;
left: 10px;
top: 10px; } }
._question-number {
font-family: 'iCielGotham-Bold';
font-size: 16px;
text-transform: uppercase;
color: #3d3a3d;
padding-bottom: 20px; }
@media only screen and (max-width: 768px) {
._question-number {
padding-left: 40px;
padding-right: 40px;
font-size: 28px; } }
@media only screen and (max-width: 480px) {
._question-number {
font-size: 14px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 5px; } }
._question-number span {
font-family: 'Cabin';
font-size: 15px;
font-style: italic;
color: rgba(61, 58, 61, 0.8);
padding-left: 30px;
text-transform: initial; }
@media only screen and (max-width: 768px) {
._question-number span {
font-size: 28px;
padding-left: 40px; } }
@media only screen and (max-width: 480px) {
._question-number span {
font-size: 14px;
padding-left: 10px; } }
@media only screen and (max-width: 768px) {
._question-intr {
padding-left: 40px;
padding-right: 40px; } }
@media only screen and (max-width: 480px) {
._question-intr {
padding-left: 0px;
padding-right: 0px; } }
._question-intr p {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 23px;
margin-bottom: 20px; }
@media only screen and (max-width: 768px) {
._question-intr p {
font-size: 28px;
line-height: 42px;
margin-bottom: 30px; } }
@media only screen and (max-width: 480px) {
._question-intr p {
font-size: 14px;
line-height: 22px;
margin-bottom: 10px; } }
._question {
font-family: 'Cabin';
font-size: 15px;
color: #3d3a3d;
line-height: 23px;
font-style: italic; }
@media only screen and (max-width: 768px) {
._question {
padding-left: 40px;
padding-right: 40px;
font-size: 28px;
line-height: 42px; } }
@media only screen and (max-width: 480px) {
._question {
font-size: 14px;
line-height: 22px;
padding-left: 0px;
padding-right: 0px; } }
.answer-list {
margin-top: 25px; }
@media only screen and (max-width: 768px) {
.answer-list {
width: 100%;
clear: both; } }
.answer-item {
position: relative;
display: flex;
align-items: center;
margin-bottom: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
@media only screen and (max-width: 768px) {
.answer-item {
margin-bottom: 15px; } }
@media only screen and (max-width: 480px) {
.answer-item {
margin-bottom: 7px; } }
.answer-item:nth-of-type(1) label:before, .answer-item:nth-of-type(1) label:after {
content: "A"; }
.answer-item:nth-of-type(2) label:before, .answer-item:nth-of-type(2) label:after {
content: "B"; }
.answer-item:nth-of-type(3) label:before, .answer-item:nth-of-type(3) label:after {
content: "C"; }
.answer-item:nth-of-type(4) label:before, .answer-item:nth-of-type(4) label:after {
content: "D"; }
.answer-item:last-child {
margin-bottom: 0px; }
.answer-item label {
position: relative;
width: 100%;
padding: 5px 20px 5px 48px;
cursor: pointer;
border: 1px solid #eeedee;
border-radius: 20px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
@media only screen and (max-width: 768px) {
.answer-item label {
border: 2px solid #eeedee;
padding: 23px 20px 23px 140px;
background-color: #ffffff;
border-radius: 30px; } }
@media only screen and (max-width: 480px) {
.answer-item label {
padding: 7px 20px 7px 48px;
border-radius: 20px; } }
.answer-item label p {
font-family: 'Cabin';
font-size: 14px;
color: #3d3a3d;
line-height: 22px;
padding-bottom: 5px; }
@media only screen and (max-width: 768px) {
.answer-item label p {
font-size: 28px;
line-height: 42px;
padding-bottom: 7px; } }
@media only screen and (max-width: 480px) {
.answer-item label p {
font-size: 14px;
line-height: 22px;
padding-bottom: 0px; } }
.answer-item label p:last-child {
padding-bottom: 0px; }
.answer-item label p img {
display: block;
width: 100%;
height: auto; }
.answer-item label:before, .answer-item label:after {
position: absolute;
content: "";
display: block;
border-radius: 50%;
font-family: 'Cabin';
font-size: 14px;
color: #ffffff;
line-height: 26px;
text-align: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
@media only screen and (max-width: 768px) {
.answer-item label:before, .answer-item label:after {
font-size: 28px;
line-height: 70px; } }
@media only screen and (max-width: 480px) {
.answer-item label:before, .answer-item label:after {
line-height: 26px;
font-size: 14px; } }
.answer-item label:before {
left: 5px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
width: 26px;
height: 26px;
background-color: transparent;
border: 1px solid transparent; }
@media only screen and (max-width: 768px) {
.answer-item label:before {
width: 70px;
height: 70px;
left: 35px; } }
@media only screen and (max-width: 480px) {
.answer-item label:before {
width: 26px;
height: 26px;
left: 5px; } }
.answer-item label:after {
left: 5px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
width: 26px;
height: 26px;
background-color: #3d3a3d;
border: 1px solid #3d3a3d;
opacity: 1; }
@media only screen and (max-width: 768px) {
.answer-item label:after {
width: 70px;
height: 70px;
left: 35px; } }
@media only screen and (max-width: 480px) {
.answer-item label:after {
width: 26px;
height: 26px;
left: 5px; } }
.answer-item label img {
display: block;
width: 100%;
height: auto; }
.answer-item input {
position: absolute;
left: 0;
top: 0;
width: 26px;
height: 26px;
margin: 0;
cursor: pointer;
opacity: 0;
pointer-events: none; }
.answer-item input:checked + label:before {
background-color: #51bcc0;
border: 1px solid #51bcc0;
z-index: 1; }
.answer-item input:checked + label:after {
opacity: 0; }
.answer-item input:checked + label {
border: 1px solid #51bcc0; }
@media only screen and (max-width: 768px) {
.answer-item input:checked + label {
border: 2px solid #51bcc0; } }
.game_question-time {
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
top: -80px;
right: 0;
bottom: auto;
left: auto;
width: calc((100% / 10) * 5); }
@media only screen and (max-width: 768px) {
.game_question-time {
position: relative;
justify-content: center;
width: 100%;
top: 0;
margin-top: 70px; } }
@media only screen and (max-width: 480px) {
.game_question-time {
margin-top: 30px; } }
.game_question-time p {
font-family: 'iCielGotham-Medium';
font-size: 16px;
color: #ffffff;
letter-spacing: 0.5px;
margin-right: 20px; }
@media only screen and (max-width: 768px) {
.game_question-time p {
font-family: 'Cabin';
font-size: 28px;
color: #3d3a3d;
margin-right: 35px; } }
@media only screen and (max-width: 480px) {
.game_question-time p {
font-size: 16px;
margin-right: 20px; } }
.question_btn {
margin-top: 30px;
text-align: center; }
@media only screen and (max-width: 768px) {
.question_btn {
margin-top: 60px; } }
@media only screen and (max-width: 480px) {
.question_btn {
margin-top: 25px; } }
.question_btn_next, .question_btn_prev {
position: relative;
top: inherit;
margin-top: 0;
left: inherit;
right: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0px 15px;
font-family: 'Cabin';
font-size: 13px;
color: #ffffff;
text-align: center;
text-transform: uppercase;
height: 41px;
width: 143px;
line-height: 41px;
border-radius: 41px;
opacity: 1 !important;
pointer-events: all !important;
cursor: pointer !important;
letter-spacing: 0.7px;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
@media only screen and (max-width: 768px) {
.question_btn_next, .question_btn_prev {
font-size: 26px;
width: 261px;
height: 70px;
line-height: 70px; } }
@media only screen and (max-width: 480px) {
.question_btn_next, .question_btn_prev {
font-size: 13px;
width: 240px;
height: 41px;
line-height: 41px;
border-radius: 41px; } }
.question_btn_next img, .question_btn_prev img {
display: block;
max-width: 14px;
height: auto;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
@media only screen and (max-width: 768px) {
.question_btn_next img, .question_btn_prev img {
max-width: 22px; } }
@media only screen and (max-width: 480px) {
.question_btn_next img, .question_btn_prev img {
max-width: 14px; } }
.question_btn_next:focus, .question_btn_prev:focus {
outline: none; }
.question_btn_next {
background: linear-gradient(to right, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%); }
.question_btn_next img {
margin-left: 10px; }
@media only screen and (max-width: 768px) {
.question_btn_next img {
margin-left: 20px; } }
@media only screen and (max-width: 480px) {
.question_btn_next img {
margin-left: 10px; } }
@media only screen and (min-width: 1025px) {
.question_btn_next:hover img {
margin-left: 15px; } }
.question_btn_next.is-hidden {
display: none; }
.question_btn_prev {
background-color: #636363;
background-image: inherit !important;
margin-right: 16px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.question_btn_prev.swiper-button-disabled {
display: none; }
@media only screen and (max-width: 480px) {
.question_btn_prev {
margin-right: 0px;
margin-bottom: 10px; } }
.question_btn_prev img {
margin-right: 10px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); }
@media only screen and (max-width: 768px) {
.question_btn_prev img {
margin-right: 20px; } }
@media only screen and (max-width: 480px) {
.question_btn_prev img {
margin-right: 10px; } }
@media only screen and (min-width: 1025px) {
.question_btn_prev:hover img {
margin-right: 15px; } }
.question-form-submit {
border: none;
position: relative;
align-items: center;
justify-content: center;
padding: 0px 15px;
font-family: 'Cabin';
font-size: 13px;
color: #ffffff;
text-align: center;
text-transform: uppercase;
height: 41px;
width: 143px;
line-height: 41px;
border-radius: 41px;
cursor: pointer;
letter-spacing: 0.7px;
background: linear-gradient(to right, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%);
display: none;
opacity: 1; }
@media only screen and (max-width: 768px) {
.question-form-submit {
font-size: 26px;
width: 261px;
height: 70px;
line-height: 70px;
border-radius: 70px; } }
@media only screen and (max-width: 480px) {
.question-form-submit {
font-size: 13px;
width: 240px;
height: 41px;
line-height: 41px;
border-radius: 41px; } }
.question-form-submit img {
display: block;
max-width: 14px;
height: auto;
margin-left: 10px;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out; }
@media only screen and (max-width: 768px) {
.question-form-submit img {
max-width: 22px;
margin-left: 20px; } }
@media only screen and (max-width: 480px) {
.question-form-submit img {
max-width: 14px;
margin-left: 10px; } }
.question-form-submit:focus {
outline: none; }
@media only screen and (min-width: 1025px) {
.question-form-submit:hover img {
margin-left: 15px; } }
.question-form-submit.is-active {
display: inline-flex; }
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 104;
background-color: rgba(0, 0, 0, 0.7);
display: none;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out; }
.overlay.is-active {
display: block; }
.fm {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 105;
pointer-events: none; }
.game_question-register {
position: fixed;
z-index: 105;
background-color: #ffffff;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: calc((100% / 12) * 4.2);
text-align: center;
padding: 25px 60px 30px;
display: none;
pointer-events: all;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out; }
@media only screen and (max-width: 1440px) {
.game_question-register {
width: calc((100% / 12) * 5); } }
@media only screen and (max-width: 1024px) {
.game_question-register {
width: calc((100% / 12) * 8); } }
@media only screen and (max-width: 768px) {
.game_question-register {
width: calc(100% - 80px);
padding: 50px 30px 60px; } }
@media only screen and (max-width: 480px) {
.game_question-register {
width: calc(100% - 40px);
padding: 30px 20px 30px; } }
.game_question-register.is-active {
display: block; }
.game_question-register ._title {
font-family: 'iCielGotham-Book';
color: #3d3a3d;
font-size: 25px;
letter-spacing: 1.34px;
text-transform: uppercase;
margin-bottom: 20px; }
@media only screen and (max-width: 768px) {
.game_question-register ._title {
font-size: 45px;
line-height: 50px; } }
@media only screen and (max-width: 480px) {
.game_question-register ._title {
font-size: 18px;
line-height: 22px; } }
.game_question-register ._title br {
display: none; }
@media only screen and (max-width: 768px) {
.game_question-register ._title br {
display: block; } }
.game_question-register ._title span {
font-family: 'iCielGotham-Bold'; }
@media only screen and (max-width: 768px) {
.game_question-register ._title span {
font-size: 33px; } }
@media only screen and (max-width: 480px) {
.game_question-register ._title span {
font-size: 16px; } }
.game_question-register .question_form_popup .form-group {
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: inherit;
opacity: 1;
margin-bottom: 25px;
height: 40px;
padding: 0px 17px; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group {
height: 75px;
margin-bottom: 30px;
padding: 0px 25px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group {
padding: 0px 17px;
height: 40px;
margin-bottom: 20px; } }
.game_question-register .question_form_popup .form-group input, .game_question-register .question_form_popup .form-group textarea {
font-family: 'Cabin';
font-size: 14px;
color: #000000; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group input, .game_question-register .question_form_popup .form-group textarea {
font-size: 26px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group input, .game_question-register .question_form_popup .form-group textarea {
font-size: 14px; } }
.game_question-register .question_form_popup .form-group textarea::-webkit-input-placeholder,
.game_question-register .question_form_popup .form-group input::-webkit-input-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: #000000; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group textarea::-webkit-input-placeholder,
.game_question-register .question_form_popup .form-group input::-webkit-input-placeholder {
font-size: 26px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group textarea::-webkit-input-placeholder,
.game_question-register .question_form_popup .form-group input::-webkit-input-placeholder {
font-size: 14px; } }
.game_question-register .question_form_popup .form-group textarea::-moz-placeholder,
.game_question-register .question_form_popup .form-group input::-moz-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: #000000; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group textarea::-moz-placeholder,
.game_question-register .question_form_popup .form-group input::-moz-placeholder {
font-size: 26px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group textarea::-moz-placeholder,
.game_question-register .question_form_popup .form-group input::-moz-placeholder {
font-size: 14px; } }
.game_question-register .question_form_popup .form-group textarea:-ms-input-placeholder,
.game_question-register .question_form_popup .form-group input:-ms-input-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: #000000; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group textarea:-ms-input-placeholder,
.game_question-register .question_form_popup .form-group input:-ms-input-placeholder {
font-size: 26px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group textarea:-ms-input-placeholder,
.game_question-register .question_form_popup .form-group input:-ms-input-placeholder {
font-size: 14px; } }
.game_question-register .question_form_popup .form-group textarea:-moz-placeholder,
.game_question-register .question_form_popup .form-group input:-moz-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: #000000; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group textarea:-moz-placeholder,
.game_question-register .question_form_popup .form-group input:-moz-placeholder {
font-size: 26px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group textarea:-moz-placeholder,
.game_question-register .question_form_popup .form-group input:-moz-placeholder {
font-size: 14px; } }
.game_question-register .question_form_popup .form-group.frm-textarea {
height: 110px; }
.game_question-register .question_form_popup .form-group.frm-textarea textarea {
width: 100%;
height: 100%;
border: 0;
resize: none;
outline: none;
box-shadow: none;
padding-top: 10px; }
.game_question-register .question_form_popup .form-group .frm_msg {
font-family: 'Cabin';
font-size: 12px;
font-style: italic;
color: #02a8a3;
position: absolute;
top: auto;
left: auto;
width: 100%;
bottom: -20px;
right: 0;
text-align: right;
margin-bottom: 0px; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group .frm_msg {
bottom: -27px;
font-size: 20px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group .frm_msg {
font-size: 11px;
bottom: -15px; } }
.game_question-register .question_form_popup .form-group:nth-of-type(5) {
border: none;
background-color: inherit;
height: auto; }
.game_question-register .question_form_popup .form-group:nth-of-type(5) label {
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.7);
margin-right: 0;
padding-left: 20px;
white-space: inherit; }
.game_question-register .question_form_popup .form-group:nth-of-type(5) label a {
color: #02a8a3;
word-break: break-all; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group:nth-of-type(5) label {
font-size: 26px;
padding-left: 35px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group:nth-of-type(5) label {
font-size: 14px;
padding-left: 20px;
text-align: left; } }
.game_question-register .question_form_popup .form-group:nth-of-type(5) label:before, .game_question-register .question_form_popup .form-group:nth-of-type(5) label:after {
content: "";
position: absolute;
display: block;
overflow: hidden;
pointer-events: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.game_question-register .question_form_popup .form-group:nth-of-type(5) label:before {
left: 20px;
top: 6px;
width: 6px;
height: 6px;
background-color: transparent; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group:nth-of-type(5) label:before {
left: 30px;
top: 8px;
width: 12px;
height: 12px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group:nth-of-type(5) label:before {
left: 20px;
top: 6px;
width: 6px;
height: 6px; } }
.game_question-register .question_form_popup .form-group:nth-of-type(5) label:after {
left: 17px;
top: 3px;
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.7); }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group:nth-of-type(5) label:after {
left: 25px;
width: 20px;
height: 20px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group:nth-of-type(5) label:after {
left: 17px;
width: 10px;
height: 10px; } }
.game_question-register .question_form_popup .form-group:nth-of-type(5) input {
position: absolute;
left: 17px;
top: 0;
width: 12px;
height: 12px;
margin: 0;
cursor: pointer;
opacity: 0; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .form-group:nth-of-type(5) input {
left: 25px;
width: 24px;
height: 24px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .form-group:nth-of-type(5) input {
left: 17px;
width: 12px;
height: 12px; } }
.game_question-register .question_form_popup .form-group:nth-of-type(5) input:checked + label:before {
background-color: rgba(0, 0, 0, 0.7);
z-index: 1; }
.game_question-register .question_form_popup .frm_msg {
font-family: 'Cabin';
font-style: italic;
font-size: 14px;
color: #02a8a3;
margin-bottom: 5px; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .frm_msg {
font-size: 26px;
margin-bottom: 0px; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .frm_msg {
font-size: 14px; } }
.game_question-register .question_form_popup .msg_success {
color: #02a8a3;
font-family: 'Cabin';
font-size: 15px;
margin-bottom: 5px; }
.game_question-register .question_form_popup .game-btn-face {
display: inline-flex;
align-items: center;
font-family: 'Cabin';
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
font-size: 13px;
height: 40px;
line-height: 40px;
background: linear-gradient(to right, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%);
text-align: center;
border-radius: 40px;
letter-spacing: 0.8px;
margin: 5px auto 14px;
padding: 0px 25px;
-webkit-box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 7px 40px 0px rgba(0, 0, 0, 0.25); }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .game-btn-face {
font-size: 26px;
height: 70px;
line-height: 70px;
margin: 20px auto 25px;
padding: 0px 20px;
width: 300px;
justify-content: center; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .game-btn-face {
font-size: 13px;
width: 150px;
height: 41px;
line-height: 41px;
border-radius: 41px;
padding: 0px 10px;
margin: 10px auto 10px; } }
.game_question-register .question_form_popup .game-btn-face img {
display: block;
max-width: 14px;
height: auto;
margin-left: 10px; }
@media only screen and (max-width: 768px) {
.game_question-register .question_form_popup .game-btn-face img {
max-width: 100%; } }
@media only screen and (max-width: 480px) {
.game_question-register .question_form_popup .game-btn-face img {
max-width: 14px; } }
.game_question-register .note {
font-family: 'Cabin';
font-size: 15px;
font-style: italic;
color: rgba(61, 58, 61, 0.8); }
@media only screen and (max-width: 768px) {
.game_question-register .note {
line-height: 42px;
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.game_question-register .note {
line-height: 22px;
font-size: 14px; } }
.game_question-register .game-popup-decor {
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
z-index: -1; }
.game_question-register .game-popup-decor img {
display: block;
width: 100%;
height: auto; }
.game_question-register .btn_close {
position: absolute;
top: 30px;
right: 30px;
bottom: auto;
left: auto;
cursor: pointer;
width: 12px;
height: 12px; }
@media only screen and (max-width: 768px) {
.game_question-register .btn_close {
width: 15px;
height: 15px; } }
@media only screen and (max-width: 480px) {
.game_question-register .btn_close {
width: 12px;
height: 12px;
top: 15px;
right: 15px; } }
.game_question-register .btn_close:before {
position: absolute;
content: '';
height: 3px;
width: 13px;
background-color: #3d3a3d;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
right: 0;
top: 5px; }
@media only screen and (max-width: 768px) {
.game_question-register .btn_close:before {
width: 15px;
top: 6px; } }
@media only screen and (max-width: 480px) {
.game_question-register .btn_close:before {
width: 13px;
top: 5px; } }
.game_question-register .btn_close:after {
position: absolute;
content: '';
height: 3px;
width: 13px;
background-color: #3d3a3d;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 0;
top: 5px; }
@media only screen and (max-width: 768px) {
.game_question-register .btn_close:after {
width: 15px;
top: 6px; } }
@media only screen and (max-width: 480px) {
.game_question-register .btn_close:after {
width: 13px;
top: 5px; } }
.game_result-content {
position: relative;
margin: 30px 0px 0px; }
.game_result-top {
position: relative;
width: calc((100% / 12) * 8);
margin: 0 auto;
text-align: center; }
@media only screen and (max-width: 1024px) {
.game_result-top {
width: calc((100% / 12) * 10.5); } }
@media only screen and (max-width: 768px) {
.game_result-top {
width: calc(100% - 80px); } }
@media only screen and (max-width: 480px) {
.game_result-top {
width: calc(100% - 40px); } }
.game_result-top .game_result {
position: relative;
width: 100%;
display: flex;
-webkit-box-shadow: 0px 0px 220px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 0px 220px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 220px 0px rgba(0, 0, 0, 0.15); }
@media only screen and (max-width: 768px) {
.game_result-top .game_result {
margin-bottom: 35px; } }
@media only screen and (max-width: 480px) {
.game_result-top .game_result {
margin-bottom: 10px; } }
.game_result-top .game_result ._thumbnail {
width: 66.146%;
height: auto;
background-size: cover;
background-position: center center;
background-repeat: no-repeat; }
@media only screen and (max-width: 768px) {
.game_result-top .game_result ._thumbnail {
width: 64.681%; } }
@media only screen and (max-width: 480px) {
.game_result-top .game_result ._thumbnail {
display: none; } }
.game_result-top .game_result ._result-content {
position: relative;
width: calc(100% - 66.146%);
background-color: #ffffff;
padding: 30px 20px 35px;
border-bottom: 7px solid #ffff00;
z-index: 1; }
@media only screen and (max-width: 768px) {
.game_result-top .game_result ._result-content {
width: calc(100% - 64.681%);
padding: 30px 15px 35px; } }
@media only screen and (max-width: 480px) {
.game_result-top .game_result ._result-content {
width: 100%; } }
.game_result-top .game_result ._result-content:before, .game_result-top .game_result ._result-content:after {
position: absolute;
content: '';
left: 0px;
right: 0px;
width: 100%;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/game/result-decor.png);
background-size: cover;
background-repeat: no-repeat;
height: 28%;
z-index: -1;
background-position: center bottom; }
.game_result-top .game_result ._result-content:before {
top: 0;
bottom: auto; }
.game_result-top .game_result ._result-content:after {
top: auto;
bottom: 0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); }
.game_result-top .game_result ._result-content ._title {
text-transform: uppercase;
text-align: center;
color: #3d3a3d;
font-family: 'iCielGotham-Bold';
font-size: 16px;
line-height: 26px; }
@media only screen and (max-width: 768px) {
.game_result-top .game_result ._result-content ._title {
font-size: 17px; } }
@media only screen and (max-width: 480px) {
.game_result-top .game_result ._result-content ._title {
font-size: 16px; } }
.game_result-top .game_result ._result-content ._result {
font-family: 'iCielGotham-Bold';
color: #4fbec2;
font-size: 115px;
border: 2px solid #e0c8a1;
width: 100%;
margin: 13px 0px;
text-align: center;
line-height: 34px;
display: flex;
flex-direction: column;
padding: 110px 0px;
padding-left: 20px; }
@media only screen and (max-width: 480px) {
.game_result-top .game_result ._result-content ._result {
padding: 70px 0px 70px 20px; } }
.game_result-top .game_result ._result-content ._result span {
color: #3d3a3d;
font-size: 17px;
letter-spacing: 1px;
position: relative;
top: 25px;
left: -10px; }
@media only screen and (max-width: 768px) {
.game_result-top .game_result ._result-content ._result span {
font-size: 20px; } }
@media only screen and (max-width: 480px) {
.game_result-top .game_result ._result-content ._result span {
font-size: 17px; } }
.game_result-top .game_result ._result-content ._time {
font-family: 'iCielGotham-Medium';
font-size: 13px;
color: #3d3a3d;
text-align: center; }
@media only screen and (max-width: 768px) {
.game_result-top .game_result ._result-content ._time {
font-size: 20px; } }
@media only screen and (max-width: 480px) {
.game_result-top .game_result ._result-content ._time {
font-size: 13px; } }
.game_result-top .game_result ._result-content ._time span {
font-family: 'iCielGotham-Bold';
font-size: 14px; }
@media only screen and (max-width: 768px) {
.game_result-top .game_result ._result-content ._time span {
font-size: 23px;
line-height: 38px; } }
@media only screen and (max-width: 480px) {
.game_result-top .game_result ._result-content ._time span {
font-size: 14px;
line-height: inherit; } }
.game_result-top .game_result-share {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Cabin';
font-weight: 600;
font-size: 13px;
color: #ffffff;
text-transform: uppercase;
text-align: center;
width: 200px;
height: 40px;
border-radius: 40px;
line-height: 40px;
background-color: #46629c;
margin-top: 25px;
letter-spacing: 0.8px;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
margin-right: 15px; }
.game_result-top .game_result-share:last-child {
margin-right: 0px; }
.game_result-top .game_result-share.color-btn {
background: linear-gradient(to right, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%); }
@media only screen and (max-width: 768px) {
.game_result-top .game_result-share {
font-size: 26px;
height: 70px;
line-height: 70px;
border-radius: 70px;
width: 575px;
margin-right: 0px;
margin-top: 25px; } }
@media only screen and (max-width: 480px) {
.game_result-top .game_result-share {
width: 240px;
height: 40px;
line-height: 40px;
border-radius: 40px;
font-size: 13px;
margin-top: 20px; } }
.game_result-top .game_result-share i {
color: #ffffff;
margin-right: 10px;
font-size: 15px; }
@media only screen and (max-width: 768px) {
.game_result-top .game_result-share i {
margin-right: 25px;
font-size: 25px; } }
@media only screen and (max-width: 480px) {
.game_result-top .game_result-share i {
margin-right: 10px;
font-size: 15px; } }
@media only screen and (min-width: 1025px) {
.game_result-top .game_result-share:hover {
letter-spacing: 1.5px; } }
.game_result-bottom .overview_title {
text-align: center; }
@media only screen and (max-width: 768px) {
.game_result-bottom .game_rankings {
margin-top: 65px; } }
@media only screen and (max-width: 480px) {
.game_result-bottom .game_rankings {
margin-top: 30px; } }
.fix-logo-scroll .header-mobile.header-mobile-scroll .teaser2-logo {
-webkit-transform: translate(-50%, 0%);
-moz-transform: translate(-50%, 0%);
transform: translate(-50%, 0%); }
.landing-page-content .header_defaul li a {
color: #ffffff; }
.landing-page {
position: relative;
border-bottom: 1px solid #ebebeb;
overflow: hidden; }
.screen_1 {
position: relative;
height: 550px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media only screen and (max-width: 768px) {
.screen_1 {
height: 100vh; } }
.screen_1:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/banner-before.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center top; }
.screen_1:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/banner-after.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom; }
.screen_2 {
position: relative;
top: -22.5px;
width: 100%;
padding: 0px calc(100% / 12);
margin: 0 auto -22.5px;
overflow: hidden; }
@media only screen and (max-width: 1024px) {
.screen_2 {
padding: 0px 30px; } }
@media only screen and (max-width: 768px) {
.screen_2 {
padding: 0px 40px;
top: -39px; } }
@media only screen and (max-width: 480px) {
.screen_2 {
padding: 0px 20px;
top: -20.5px; } }
.screen_2:before {
position: absolute;
content: '';
top: 22.5px;
right: 0;
bottom: auto;
left: auto;
width: 317px;
height: 300px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/decor_1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: left bottom; }
@media only screen and (max-width: 768px) {
.screen_2:before {
top: 39px; } }
@media only screen and (max-width: 480px) {
.screen_2:before {
top: 20.5px;
width: 45%; } }
._title-highlight {
position: relative;
display: inline-block;
font-family: 'UTMGod-sWord';
font-size: 20px;
color: #ffffff;
background-color: #212121;
text-transform: uppercase;
letter-spacing: 0.7px;
padding: 9px 53px; }
@media only screen and (max-width: 768px) {
._title-highlight {
font-size: 33px;
padding: 17px 30px; } }
@media only screen and (max-width: 480px) {
._title-highlight {
font-size: 14px;
padding: 11px 20px; } }
.title-screen {
position: relative;
display: table;
z-index: 1; }
.title-screen p {
position: relative;
font-family: 'iCielGotham-Black';
font-size: 40px;
text-transform: uppercase;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #c89e4f), color-stop(0.5, #eace82), color-stop(1, #c89e4f));
background-image: gradient(linear, left top, right top, color-stop(0, #c89e4f), color-stop(0.5, #eace82), color-stop(1, #c89e4f));
color: transparent;
-webkit-background-clip: text;
background-clip: text;
line-height: 68px; }
@media only screen and (max-width: 768px) {
.title-screen p {
font-size: 60px;
line-height: 96px; } }
@media only screen and (max-width: 480px) {
.title-screen p {
font-size: 28px;
line-height: 61px; } }
.title-screen p:nth-of-type(2) {
position: relative;
top: -18px;
margin-bottom: -18px; }
@media only screen and (max-width: 768px) {
.title-screen p:nth-of-type(2) {
top: -26px;
margin-bottom: -26px; } }
.screen_2-top {
position: relative;
padding-left: calc(100% / 10);
padding-bottom: 75px; }
@media only screen and (max-width: 1024px) {
.screen_2-top {
padding-left: 35px;
padding-bottom: 40px; } }
@media only screen and (max-width: 768px) {
.screen_2-top {
padding-left: 0px;
padding-bottom: 20px; } }
.screen_2-top ._left {
width: calc((100% / 9) * 5);
float: left; }
@media only screen and (max-width: 768px) {
.screen_2-top ._left {
width: 100%; } }
@media only screen and (max-width: 768px) {
.screen_2-top ._left ._highlight {
margin-top: 10px; } }
@media only screen and (max-width: 480px) {
.screen_2-top ._left ._highlight {
margin-top: 0px; } }
.screen_2-top ._left ._highlight p {
font-family: 'Cabin';
font-size: 15px;
color: rgba(0, 0, 0, 0.8);
line-height: 22px;
padding-right: 80px;
margin-bottom: 24px; }
@media only screen and (max-width: 768px) {
.screen_2-top ._left ._highlight p {
font-size: 28px;
padding-right: 0px;
line-height: 41px; } }
@media only screen and (max-width: 480px) {
.screen_2-top ._left ._highlight p {
font-size: 14px;
line-height: 22px;
margin-bottom: 10px; } }
.screen_2-top ._left ._highlight p:last-child {
margin-bottom: 0px; }
.screen_2-top ._left ._highlight p strong {
font-weight: bold; }
.screen_2-top ._left ._highlight p a {
word-break: break-word;
color: #007bff; }
.screen_2-top ._left ._highlight p a:hover {
color: #007bff; }
.screen_2-top ._left ._highlight p em {
font-style: italic; }
.screen_2-top ._left .title-screen {
padding-top: 15px; }
@media only screen and (max-width: 480px) {
.screen_2-top ._left .title-screen {
padding-top: 5px; } }
.screen_2-top ._left .title-screen p {
font-size: 50px;
line-height: 80px; }
@media only screen and (max-width: 1024px) {
.screen_2-top ._left .title-screen p {
font-size: 40px;
line-height: 68px; } }
@media only screen and (max-width: 768px) {
.screen_2-top ._left .title-screen p {
font-size: 60px;
line-height: 96px; } }
@media only screen and (max-width: 480px) {
.screen_2-top ._left .title-screen p {
font-size: 28px;
line-height: 61px; } }
.screen_2-top ._left .title-screen p:nth-of-type(1) {
top: 8px;
line-height: 67px; }
@media only screen and (max-width: 1024px) {
.screen_2-top ._left .title-screen p:nth-of-type(1) {
top: 0;
line-height: 68px; } }
@media only screen and (max-width: 768px) {
.screen_2-top ._left .title-screen p:nth-of-type(1) {
line-height: 96px; } }
@media only screen and (max-width: 480px) {
.screen_2-top ._left .title-screen p:nth-of-type(1) {
line-height: 61px; } }
.screen_2-top ._left .title-screen p:nth-of-type(2) {
top: 0;
margin-bottom: 0; }
@media only screen and (max-width: 1024px) {
.screen_2-top ._left .title-screen p:nth-of-type(2) {
top: -18px;
margin-bottom: -18px; } }
@media only screen and (max-width: 768px) {
.screen_2-top ._left .title-screen p:nth-of-type(2) {
top: -26px;
margin-bottom: -26px; } }
.screen_2-top ._left .title-screen:before {
position: absolute;
content: '';
right: -32px;
bottom: 47px;
width: 20px;
height: 15px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/ngoac.png);
background-size: cover;
background-repeat: no-repeat; }
@media only screen and (max-width: 480px) {
.screen_2-top ._left .title-screen:before {
display: none; } }
.screen_2-top ._left .title-screen:after {
position: absolute;
content: '';
left: -35px;
top: 36px;
width: 20px;
height: 15px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/ngoac.png);
background-size: cover;
background-repeat: no-repeat;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); }
@media only screen and (max-width: 480px) {
.screen_2-top ._left .title-screen:after {
display: none; } }
.screen_2-top ._left ._desc {
position: relative;
margin-top: 24px;
padding-left: 0;
padding-right: 80px; }
@media only screen and (max-width: 768px) {
.screen_2-top ._left ._desc {
padding-right: 0px; } }
@media only screen and (max-width: 480px) {
.screen_2-top ._left ._desc {
margin-top: 10px; } }
.screen_2-top ._left ._desc p {
font-family: 'Cabin';
font-size: 15px;
color: rgba(0, 0, 0, 0.8);
line-height: 22px;
margin-bottom: 24px; }
@media only screen and (max-width: 768px) {
.screen_2-top ._left ._desc p {
font-size: 28px;
line-height: 41px; } }
@media only screen and (max-width: 480px) {
.screen_2-top ._left ._desc p {
font-size: 14px;
line-height: 22px;
margin-bottom: 10px; } }
.screen_2-top ._left ._desc p:last-child {
margin-bottom: 0px; }
.screen_2-top ._left ._desc p strong {
font-weight: bold; }
.screen_2-top ._left ._desc p a {
word-break: break-word;
color: #007bff; }
.screen_2-top ._left ._desc p a:hover {
color: #007bff; }
.screen_2-top ._left ._desc p em {
font-style: italic; }
.screen_2-top ._right {
position: relative;
width: calc((100% / 9) * 4);
float: left;
margin-top: 65px;
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25); }
@media only screen and (max-width: 768px) {
.screen_2-top ._right {
width: 100%; } }
@media only screen and (max-width: 480px) {
.screen_2-top ._right {
margin-top: 20px; } }
.screen_2-top ._right img {
display: block;
width: 100%;
height: auto; }
.screen_2-top ._right .decor {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: auto;
width: 100%;
height: auto; }
.screen_2-top ._right .decor img {
display: block;
width: 100%;
height: auto; }
.screen_2-bottom {
position: relative;
padding-right: calc(100% / 10); }
@media only screen and (max-width: 1024px) {
.screen_2-bottom {
padding-right: 0px; } }
@media only screen and (max-width: 768px) {
.screen_2-bottom {
display: flex;
flex-direction: column; } }
.screen_2-bottom ._left {
width: calc((100% / 9) * 4.6);
float: left; }
@media only screen and (max-width: 1024px) {
.screen_2-bottom ._left {
width: calc((100% / 9) * 5); } }
@media only screen and (max-width: 768px) {
.screen_2-bottom ._left {
width: 100%;
order: 2; } }
.screen_2-bottom ._left img {
display: block;
width: 100%;
height: auto; }
.screen_2-bottom ._right {
width: calc((100% / 9) * 4.4);
float: left;
padding-left: 80px;
display: flex;
flex-wrap: wrap; }
@media only screen and (max-width: 1024px) {
.screen_2-bottom ._right {
width: calc((100% / 9) * 4); } }
@media only screen and (max-width: 768px) {
.screen_2-bottom ._right {
width: 100%;
order: 1;
padding-left: 115px;
padding-bottom: 20px; } }
@media only screen and (max-width: 480px) {
.screen_2-bottom ._right {
padding-left: 0px; } }
.screen_2-bottom ._right ._item-highlight {
width: calc(100% / 2);
float: left;
margin-top: 35px;
padding-right: 65px; }
@media only screen and (max-width: 1024px) {
.screen_2-bottom ._right ._item-highlight {
width: calc((100% - 30px) / 2);
padding-right: 0px;
margin-right: 30px; } }
@media only screen and (max-width: 768px) {
.screen_2-bottom ._right ._item-highlight {
width: 100%;
margin-right: 0px;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 10px; } }
@media only screen and (max-width: 480px) {
.screen_2-bottom ._right ._item-highlight {
margin-top: 0px; } }
.screen_2-bottom ._right ._item-highlight:nth-of-type(1), .screen_2-bottom ._right ._item-highlight:nth-of-type(2) {
margin-top: 0px; }
@media only screen and (max-width: 768px) {
.screen_2-bottom ._right ._item-highlight:nth-of-type(1), .screen_2-bottom ._right ._item-highlight:nth-of-type(2) {
margin-top: 10px; } }
@media only screen and (max-width: 480px) {
.screen_2-bottom ._right ._item-highlight:nth-of-type(1), .screen_2-bottom ._right ._item-highlight:nth-of-type(2) {
margin-top: 0px; } }
.screen_2-bottom ._right ._item-highlight:nth-of-type(2n) {
padding-right: 0px; }
@media only screen and (max-width: 1024px) {
.screen_2-bottom ._right ._item-highlight:nth-of-type(2n) {
margin-right: 0px; } }
@media only screen and (max-width: 768px) {
.screen_2-bottom ._right ._item-highlight:first-child {
margin-top: 0px; } }
.screen_2-bottom ._right ._item-highlight ._number {
font-family: 'UTM Avo';
font-size: 80px;
color: #51bcc0; }
@media only screen and (max-width: 768px) {
.screen_2-bottom ._right ._item-highlight ._number {
font-size: 100px;
min-width: 167px; } }
@media only screen and (max-width: 480px) {
.screen_2-bottom ._right ._item-highlight ._number {
font-size: 30px;
min-width: 50px; } }
.screen_2-bottom ._right ._item-highlight ._desc {
font-family: 'Cabin';
font-weight: bold;
font-size: 15px;
line-height: 22px;
color: rgba(0, 0, 0, 0.9); }
@media only screen and (max-width: 768px) {
.screen_2-bottom ._right ._item-highlight ._desc {
font-size: 28px;
line-height: 41px;
padding-left: 40px;
padding-top: 25px; } }
@media only screen and (max-width: 480px) {
.screen_2-bottom ._right ._item-highlight ._desc {
font-size: 14px;
line-height: 22px;
padding-top: 0;
padding-left: 15px; } }
.screen_3 {
position: relative;
margin-top: 90px;
padding-bottom: 175px; }
@media only screen and (max-width: 1024px) {
.screen_3 {
margin-top: 30px;
padding-bottom: 110px; } }
@media only screen and (max-width: 768px) {
.screen_3 {
padding-bottom: 0px; } }
@media only screen and (max-width: 480px) {
.screen_3 {
margin-top: 10px; } }
.screen_3:before {
position: absolute;
content: '';
left: 0;
top: 24%;
width: 175px;
height: 375px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/decor.png);
background-size: cover;
background-repeat: no-repeat;
background-position: right top;
z-index: -1; }
.screen_3 .decor {
position: absolute;
content: '';
width: 684px;
right: -454px;
top: -75%;
z-index: -1; }
@media only screen and (max-width: 480px) {
.screen_3 .decor {
display: none; } }
.screen_3 .decor img {
display: block;
width: 100%;
height: auto; }
.screen_3 .decor-bg {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 56.5%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%); }
@media only screen and (max-width: 768px) {
.screen_3 .decor-bg {
display: none; } }
.screen_3 .decor-bg:after {
position: absolute;
content: '';
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: calc(100% + 1px);
background-color: rgba(255, 255, 255, 0.9);
top: -1px; }
.screen_3 .title-screen {
position: absolute;
left: calc(100% / 12);
top: -13px; }
@media only screen and (max-width: 1024px) {
.screen_3 .title-screen {
left: 60px; } }
@media only screen and (max-width: 768px) {
.screen_3 .title-screen {
position: static;
left: inherit;
padding-left: 30px;
width: 100%;
padding-right: 30px;
top: inherit; } }
@media only screen and (max-width: 480px) {
.screen_3 .title-screen {
padding-left: 20px;
padding-right: 20px; } }
.screen_3 .title-screen p:nth-of-type(2) {
font-family: 'iCielGotham-Book'; }
.screen_3 .screen_3-content {
position: relative;
padding: 0px calc(100% / 12); }
@media only screen and (max-width: 1024px) {
.screen_3 .screen_3-content {
padding: 0px 30px; } }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content {
padding: 0px 40px;
margin-top: 10px; } }
@media only screen and (max-width: 480px) {
.screen_3 .screen_3-content {
padding: 0px 20px;
margin-top: 0px; } }
.screen_3 .screen_3-content:before {
position: absolute;
content: '';
left: calc(37.917% + 268px);
bottom: -52px;
width: 270px;
height: 71px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/screen_3-decor.png);
background-size: cover;
background-repeat: no-repeat;
z-index: 1; }
@media only screen and (max-width: 1024px) {
.screen_3 .screen_3-content:before {
left: calc(37.917% + 220px);
bottom: -49px; } }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content:before {
display: none; } }
.screen_3 .screen_3-content ._item {
position: relative;
display: flex;
flex-direction: column;
width: calc(((100% - 37.917%) - 130px) / 2);
float: left; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item {
width: 100%;
margin-bottom: 50px; }
.screen_3 .screen_3-content ._item:last-child {
margin-bottom: 0px; } }
@media only screen and (max-width: 480px) {
.screen_3 .screen_3-content ._item {
margin-bottom: 20px; } }
.screen_3 .screen_3-content ._item:nth-of-type(1) {
width: 37.917%;
padding-top: 70px; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item:nth-of-type(1) {
width: 100%;
padding-top: 0px; } }
.screen_3 .screen_3-content ._item:nth-of-type(2) {
margin-left: 70px; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item:nth-of-type(2) {
margin-left: 0px;
flex-direction: row;
align-items: center; } }
.screen_3 .screen_3-content ._item:nth-of-type(2) ._image {
order: 2; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item:nth-of-type(2) ._image {
width: 50%;
order: 1; } }
.screen_3 .screen_3-content ._item:nth-of-type(2) ._text {
order: 1;
padding-top: 0px;
padding-bottom: 40px; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item:nth-of-type(2) ._text {
width: 50%;
order: 2;
padding-bottom: 0px;
padding-left: 40px; } }
@media only screen and (max-width: 480px) {
.screen_3 .screen_3-content ._item:nth-of-type(2) ._text {
padding-left: 20px; } }
.screen_3 .screen_3-content ._item:nth-of-type(3) {
margin-left: 60px; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item:nth-of-type(3) {
margin-left: 0px; } }
.screen_3 .screen_3-content ._item:nth-of-type(3) ._image {
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25); }
.screen_3 .screen_3-content ._item:nth-of-type(3) ._text ._comment p {
font-size: 25px; }
@media only screen and (max-width: 480px) {
.screen_3 .screen_3-content ._item:nth-of-type(3) ._text ._comment p {
font-size: 28px;
line-height: 41px; } }
@media only screen and (max-width: 480px) {
.screen_3 .screen_3-content ._item:nth-of-type(3) ._text ._comment p {
font-size: 14px;
line-height: 22px; } }
.screen_3 .screen_3-content ._item ._image {
width: 100%;
height: auto; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item ._image {
order: 2; } }
.screen_3 .screen_3-content ._item ._image img {
display: block;
width: 100%;
height: auto; }
.screen_3 .screen_3-content ._item ._text {
width: 100%;
height: auto;
padding-top: 40px; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item ._text {
order: 1;
padding-top: 0px;
padding-bottom: 30px; } }
@media only screen and (max-width: 480px) {
.screen_3 .screen_3-content ._item ._text {
padding-bottom: 15px; } }
.screen_3 .screen_3-content ._item ._text ._comment p {
font-family: 'Cabin';
font-style: italic;
font-size: 18px;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 10px; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item ._text ._comment p {
font-size: 28px;
line-height: 41px; } }
@media only screen and (max-width: 480px) {
.screen_3 .screen_3-content ._item ._text ._comment p {
font-size: 14px;
line-height: 22px; } }
.screen_3 .screen_3-content ._item ._text ._comment p:last-child {
margin-bottom: 0px; }
.screen_3 .screen_3-content ._item ._text ._name {
font-family: 'Cabin';
font-weight: bold;
font-size: 15px;
color: rgba(0, 0, 0, 0.9);
margin-top: 15px; }
@media only screen and (max-width: 768px) {
.screen_3 .screen_3-content ._item ._text ._name {
font-size: 28px;
line-height: 41px;
margin-top: 10px; } }
@media only screen and (max-width: 480px) {
.screen_3 .screen_3-content ._item ._text ._name {
font-size: 14px;
line-height: 22px;
margin-top: 0; } }
.screen_4 {
position: relative;
top: -52px;
padding: 0px calc((100% / 12) * 2);
width: 100%;
margin-bottom: -52px;
padding-bottom: 60px; }
@media only screen and (max-width: 1024px) {
.screen_4 {
padding: 40px 30px 20px;
top: 0px;
margin-bottom: 0px; } }
@media only screen and (max-width: 768px) {
.screen_4 {
padding: 45px 40px 0px; } }
@media only screen and (max-width: 480px) {
.screen_4 {
padding: 20px 20px 0px; } }
.screen_4:before {
position: absolute;
content: '';
top: 52px;
right: 0;
bottom: auto;
left: auto;
width: 317px;
height: 300px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/decor_1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: left bottom; }
@media only screen and (max-width: 1024px) {
.screen_4:before {
top: 0px; } }
@media only screen and (max-width: 480px) {
.screen_4:before {
width: 45%; } }
.screen_4 .decor {
position: absolute;
content: '';
width: 684px;
left: -454px;
bottom: 0;
z-index: -1; }
.screen_4 .decor img {
display: block;
width: 100%;
height: auto; }
.screen_4 .title-screen {
position: absolute;
left: calc((100% / 12) * 7);
top: 108px; }
@media only screen and (max-width: 1024px) {
.screen_4 .title-screen {
position: static;
left: inherit;
top: inherit; } }
.screen_4 .title-screen p:nth-of-type(1) {
font-family: 'iCielGotham-Book'; }
.screen_4 .title-screen p:nth-of-type(2) {
font-family: 'iCielGotham-Bold'; }
@media only screen and (max-width: 1024px) {
.screen_4 .screen_4-content {
margin-top: 15px; } }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content {
margin-top: 10px; } }
@media only screen and (max-width: 480px) {
.screen_4 .screen_4-content {
margin-top: 0px; } }
.screen_4 .screen_4-content ._item {
position: relative;
display: flex;
flex-direction: column; }
@media only screen and (max-width: 1024px) {
.screen_4 .screen_4-content ._item {
align-items: center;
flex-direction: row;
margin-bottom: 30px; }
.screen_4 .screen_4-content ._item:last-child {
margin-bottom: 40px; } }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item {
flex-direction: column;
margin-bottom: 50px; }
.screen_4 .screen_4-content ._item:last-child {
margin-bottom: 0px; } }
@media only screen and (max-width: 480px) {
.screen_4 .screen_4-content ._item {
margin-bottom: 20px; } }
.screen_4 .screen_4-content ._item:nth-of-type(1) {
width: 100%;
flex-direction: row;
margin-bottom: 40px; }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item:nth-of-type(1) {
flex-direction: column;
margin-bottom: 50px; } }
@media only screen and (max-width: 480px) {
.screen_4 .screen_4-content ._item:nth-of-type(1) {
margin-bottom: 20px; } }
.screen_4 .screen_4-content ._item:nth-of-type(1) ._image {
width: calc((100% / 8) * 4.5);
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
margin-right: calc((100% / 8) * 0.5); }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item:nth-of-type(1) ._image {
width: 100%;
margin-right: 0px;
order: 2; } }
.screen_4 .screen_4-content ._item:nth-of-type(1) ._image .decor {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: auto;
width: 100%;
height: auto;
z-index: 1; }
.screen_4 .screen_4-content ._item:nth-of-type(1) ._image .decor img {
display: block;
width: 100%;
height: auto; }
.screen_4 .screen_4-content ._item:nth-of-type(1) ._text {
height: max-content;
padding-top: 235px;
width: calc((100% / 8) * 3);
padding-bottom: 40px; }
@media only screen and (max-width: 1024px) {
.screen_4 .screen_4-content ._item:nth-of-type(1) ._text {
padding-top: 0px;
padding-bottom: 0px; } }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item:nth-of-type(1) ._text {
width: 100%;
order: 1;
padding-bottom: 30px; } }
@media only screen and (max-width: 480px) {
.screen_4 .screen_4-content ._item:nth-of-type(1) ._text {
padding-bottom: 15px; } }
.screen_4 .screen_4-content ._item:nth-of-type(3) {
width: 55.417%; }
@media only screen and (max-width: 1024px) {
.screen_4 .screen_4-content ._item:nth-of-type(3) {
width: 100%; } }
.screen_4 .screen_4-content ._item:nth-of-type(3) ._text {
order: 1;
padding-bottom: 30px; }
@media only screen and (max-width: 1024px) {
.screen_4 .screen_4-content ._item:nth-of-type(3) ._text {
width: calc((100% / 8) * 3);
padding-top: 0px;
padding-bottom: 0px;
order: 2; } }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item:nth-of-type(3) ._text {
width: 100%;
order: 1;
padding-bottom: 30px; } }
@media only screen and (max-width: 480px) {
.screen_4 .screen_4-content ._item:nth-of-type(3) ._text {
padding-bottom: 15px; } }
.screen_4 .screen_4-content ._item:nth-of-type(3) ._image {
order: 2; }
@media only screen and (max-width: 1024px) {
.screen_4 .screen_4-content ._item:nth-of-type(3) ._image {
width: calc((100% / 8) * 4.5);
margin-right: calc((100% / 8) * 0.5);
order: 1; } }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item:nth-of-type(3) ._image {
width: 100%;
order: 2;
margin-right: 0px; } }
.screen_4 .screen_4-content ._item:nth-of-type(2) {
width: calc((100% / 8) * 3);
float: right; }
@media only screen and (max-width: 1024px) {
.screen_4 .screen_4-content ._item:nth-of-type(2) {
width: 100%; } }
.screen_4 .screen_4-content ._item:nth-of-type(2) ._text {
padding-top: 35px; }
@media only screen and (max-width: 1024px) {
.screen_4 .screen_4-content ._item:nth-of-type(2) ._text {
padding-top: 0px;
width: calc((100% / 8) * 3);
padding-bottom: 0px;
order: 1; } }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item:nth-of-type(2) ._text {
width: 100%;
order: 1;
padding-bottom: 30px; } }
@media only screen and (max-width: 480px) {
.screen_4 .screen_4-content ._item:nth-of-type(2) ._text {
padding-bottom: 15px; } }
.screen_4 .screen_4-content ._item:nth-of-type(2) ._text ._name {
color: rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 1024px) {
.screen_4 .screen_4-content ._item:nth-of-type(2) ._image {
width: calc((100% / 8) * 4.5);
margin-left: calc((100% / 8) * 0.5);
order: 2; } }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item:nth-of-type(2) ._image {
width: 100%;
order: 2;
margin-left: 0px; } }
.screen_4 .screen_4-content ._item ._image {
position: relative;
width: 100%;
height: auto;
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25); }
.screen_4 .screen_4-content ._item ._image img {
display: block;
width: 100%;
height: auto; }
.screen_4 .screen_4-content ._item ._text ._comment p {
font-family: 'Cabin';
font-style: italic;
font-size: 18px;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 10px; }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item ._text ._comment p {
font-size: 28px;
line-height: 41px; } }
@media only screen and (max-width: 480px) {
.screen_4 .screen_4-content ._item ._text ._comment p {
font-size: 14px;
line-height: 22px; } }
.screen_4 .screen_4-content ._item ._text ._comment p:last-child {
margin-bottom: 0px; }
.screen_4 .screen_4-content ._item ._text ._comment p strong {
font-weight: bold; }
.screen_4 .screen_4-content ._item ._text ._comment p a {
word-break: break-word;
color: #007bff; }
.screen_4 .screen_4-content ._item ._text ._comment p a:hover {
color: #007bff; }
.screen_4 .screen_4-content ._item ._text ._name {
font-family: 'Cabin';
font-weight: bold;
font-size: 15px;
color: rgba(0, 0, 0, 0.9);
margin-top: 15px; }
@media only screen and (max-width: 768px) {
.screen_4 .screen_4-content ._item ._text ._name {
margin-top: 10px;
font-size: 28px;
line-height: 41px; } }
@media only screen and (max-width: 480px) {
.screen_4 .screen_4-content ._item ._text ._name {
font-size: 14px;
line-height: 22px;
margin-top: 0px; } }
.screen_5 {
position: relative;
margin-left: calc(100% / 12);
padding-bottom: 70px; }
@media only screen and (max-width: 1024px) {
.screen_5 {
margin-left: 30px;
padding-bottom: 50px; } }
@media only screen and (max-width: 768px) {
.screen_5 {
margin-left: 0px;
padding-left: 40px;
padding-right: 40px; } }
@media only screen and (max-width: 480px) {
.screen_5 {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px; } }
.screen_5 .decor {
position: absolute;
content: '';
width: 684px;
right: -350px;
top: -13%;
z-index: -1; }
@media only screen and (max-width: 480px) {
.screen_5 .decor {
display: none; } }
.screen_5 .decor img {
display: block;
width: 100%;
height: auto; }
.screen_5 .title-screen p:nth-of-type(1) {
font-family: 'iCielGotham-Book'; }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content {
display: flex;
flex-direction: column; } }
.screen_5 .screen_5-content ._text {
padding-top: 35px;
padding-bottom: 35px; }
@media only screen and (max-width: 480px) {
.screen_5 .screen_5-content ._text {
padding-bottom: 15px;
padding-top: 15px; } }
.screen_5 .screen_5-content ._text ._comment p {
font-family: 'Cabin';
font-style: italic;
font-size: 18px;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 10px; }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._text ._comment p {
font-size: 28px;
line-height: 41px; } }
@media only screen and (max-width: 480px) {
.screen_5 .screen_5-content ._text ._comment p {
font-size: 14px;
line-height: 22px; } }
.screen_5 .screen_5-content ._text ._comment p:last-child {
margin-bottom: 0px; }
.screen_5 .screen_5-content ._text ._comment p strong {
font-weight: bold; }
.screen_5 .screen_5-content ._text ._comment p a {
word-break: break-word;
color: #007bff; }
.screen_5 .screen_5-content ._text ._comment p a:hover {
color: #007bff; }
.screen_5 .screen_5-content ._text ._name {
font-family: 'Cabin';
font-weight: bold;
font-size: 15px;
color: rgba(0, 0, 0, 0.9);
margin-top: 15px; }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._text ._name {
font-size: 28px;
line-height: 41px;
margin-top: 10px; } }
@media only screen and (max-width: 480px) {
.screen_5 .screen_5-content ._text ._name {
font-size: 14px;
line-height: 22px;
margin-top: 0px; } }
.screen_5 .screen_5-content ._left {
width: calc((100% / 11) * 4.5);
float: left;
padding-top: 50px; }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._left {
width: 100%;
order: 2;
display: flex;
align-items: center; } }
@media only screen and (max-width: 480px) {
.screen_5 .screen_5-content ._left {
padding-top: 15px; } }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._left .title-screen {
display: none; } }
.screen_5 .screen_5-content ._left ._text {
padding-top: 20px; }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._left ._text._text-mobile {
display: none; } }
.screen_5 .screen_5-content ._left ._item {
width: calc((100% - 50px) / 2);
margin-right: 50px;
float: left; }
@media only screen and (max-width: 1024px) {
.screen_5 .screen_5-content ._left ._item {
width: calc((100% - 30px) / 2);
margin-right: 30px; } }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._left ._item._item1 {
order: 2;
margin-right: 0px;
padding-left: 40px; }
.screen_5 .screen_5-content ._left ._item._item2 {
order: 1; } }
@media only screen and (max-width: 480px) {
.screen_5 .screen_5-content ._left ._item._item1 {
padding-left: 20px;
width: 60%; }
.screen_5 .screen_5-content ._left ._item._item2 {
width: 40%; } }
.screen_5 .screen_5-content ._left ._item:nth-of-type(2n) {
margin-right: 0px; }
.screen_5 .screen_5-content ._left ._item ._iamge {
width: 100%;
height: auto; }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._left ._item ._iamge._image-mobile {
display: none; } }
.screen_5 .screen_5-content ._left ._item ._iamge img {
display: block;
width: 100%;
height: auto; }
.screen_5 .screen_5-content ._left ._item ._text {
padding-top: 30px;
border-bottom: 1px solid #e0e0e0; }
@media only screen and (max-width: 480px) {
.screen_5 .screen_5-content ._left ._item ._text {
padding-top: 10px; } }
.screen_5 .screen_5-content ._left ._item ._text:last-child {
padding-bottom: 0px;
border-bottom: inherit; }
.screen_5 .screen_5-content ._left ._item ._text:last-child ._name {
color: rgba(0, 0, 0, 0.5); }
.screen_5 .screen_5-content ._right {
width: calc((100% / 11) * 6);
float: left;
margin-left: calc((100% / 11) * 0.5); }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._right {
width: 100%;
order: 1;
margin-left: 0px;
padding-top: 40px; } }
@media only screen and (max-width: 480px) {
.screen_5 .screen_5-content ._right {
padding-top: 20px; } }
.screen_5 .screen_5-content ._right .title-screen {
display: none; }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._right .title-screen {
display: block; } }
.screen_5 .screen_5-content ._right ._image {
position: relative;
width: 100%;
-webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.25); }
.screen_5 .screen_5-content ._right ._image img {
display: block;
width: 100%;
height: auto; }
.screen_5 .screen_5-content ._right ._image .decor {
position: absolute;
content: '';
right: 0;
bottom: 0;
top: 0;
width: auto;
height: 100%; }
.screen_5 .screen_5-content ._right ._image .decor img {
display: block;
width: auto;
height: 100%; }
.screen_5 .screen_5-content ._right ._text {
margin-right: calc(100% / 6);
border-bottom: 1px solid #e0e0e0; }
.screen_5 .screen_5-content ._right ._text._text-mobile {
display: none; }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._right ._text._text-mobile {
display: block;
padding-top: 10px;
padding-bottom: 30px; } }
@media only screen and (max-width: 480px) {
.screen_5 .screen_5-content ._right ._text._text-mobile {
padding-bottom: 15px;
padding-top: 0px; } }
@media only screen and (max-width: 768px) {
.screen_5 .screen_5-content ._right ._text {
margin-right: 0px; } }
.screen_5 .screen_5-content ._right ._text ._name {
color: rgba(0, 0, 0, 0.5); }
.screen_5 .screen_5-content ._right ._text:last-child {
padding-bottom: 0px;
border-bottom: inherit; }
.screen_5 .screen_5-content ._right ._text:last-child ._name {
color: rgba(0, 0, 0, 0.9); }
.screen_6 {
position: relative;
padding-bottom: 100px; }
@media only screen and (max-width: 1024px) {
.screen_6 {
padding-bottom: 70px; } }
@media only screen and (max-width: 480px) {
.screen_6 {
padding-bottom: 50px; } }
.screen_6 .decor-bg {
position: absolute;
top: -60%;
left: 0;
right: 0;
width: 100%;
height: 115%;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
z-index: -1; }
@media only screen and (max-width: 480px) {
.screen_6 .decor-bg {
display: none; } }
.screen_6 .decor-right {
position: absolute;
content: '';
width: 684px;
left: -342px;
bottom: 5%;
z-index: -2; }
@media only screen and (max-width: 480px) {
.screen_6 .decor-right {
display: none; } }
.screen_6 .decor-right img {
display: block;
width: 100%;
height: auto; }
.screen_6 .decor-left {
position: absolute;
content: '';
width: 684px;
right: -342px;
bottom: 25%;
z-index: -2; }
@media only screen and (max-width: 480px) {
.screen_6 .decor-left {
display: none; } }
.screen_6 .decor-left img {
display: block;
width: 100%;
height: auto; }
.screen_6 ._title-highlight {
margin-left: calc((100% / 12) * 2); }
@media only screen and (max-width: 1024px) {
.screen_6 ._title-highlight {
margin-left: 60px; } }
@media only screen and (max-width: 768px) {
.screen_6 ._title-highlight {
margin-left: 40px; } }
@media only screen and (max-width: 480px) {
.screen_6 ._title-highlight {
margin-left: 20px; } }
.screen_6 .title-screen {
padding: 17px calc((100% / 12) * 2) 0px; }
@media only screen and (max-width: 1024px) {
.screen_6 .title-screen {
padding: 17px 60px 0px; } }
@media only screen and (max-width: 768px) {
.screen_6 .title-screen {
padding: 30px 40px 10px; }
.screen_6 .title-screen p {
line-height: 77px; } }
@media only screen and (max-width: 480px) {
.screen_6 .title-screen {
padding: 20px 20px 0px; }
.screen_6 .title-screen p {
line-height: 35px; } }
.screen_6 ._desc {
position: relative;
top: 5px; }
@media only screen and (max-width: 768px) {
.screen_6 ._desc {
top: 0;
margin: 10px 0px 30px; } }
@media only screen and (max-width: 480px) {
.screen_6 ._desc {
margin: 10px 0px 0px; } }
.screen_6 ._desc p {
font-family: 'Cabin';
font-size: 15px;
color: rgba(0, 0, 0, 0.8);
line-height: 22px;
padding: 0px calc((100% / 12) * 2);
margin-bottom: 10px; }
@media only screen and (max-width: 1024px) {
.screen_6 ._desc p {
padding: 0px 60px; } }
@media only screen and (max-width: 768px) {
.screen_6 ._desc p {
padding: 0px 40px;
font-size: 28px;
line-height: 41px; } }
@media only screen and (max-width: 480px) {
.screen_6 ._desc p {
font-size: 14px;
line-height: 22px;
padding: 0px 20px; } }
.screen_6 ._desc p:last-child {
margin-bottom: 0px; }
.screen_6 .screen6_slide {
position: relative;
width: calc((100% / 12) * 10);
margin: 30px auto 0px; }
@media only screen and (max-width: 1024px) {
.screen_6 .screen6_slide {
width: calc(100% - 60px); } }
@media only screen and (max-width: 768px) {
.screen_6 .screen6_slide {
width: 100%; } }
@media only screen and (max-width: 480px) {
.screen_6 .screen6_slide {
margin-top: 20px; } }
.screen_6 .screen6_slide .swiper-container {
width: calc((100% / 10) * 6); }
@media only screen and (max-width: 1024px) {
.screen_6 .screen6_slide .swiper-container {
width: calc((100% / 10) * 7); } }
@media only screen and (max-width: 768px) {
.screen_6 .screen6_slide .swiper-container {
width: calc(100% - 80px); } }
@media only screen and (max-width: 480px) {
.screen_6 .screen6_slide .swiper-container {
width: calc(100% - 40px); } }
.screen_6 .screen6_slide .swiper-container .swiper-wrapper {
width: 100%; }
.screen_6 .screen6_slide .swiper-container .swiper-wrapper .swiper-slide {
width: 100%; }
.screen_6 .screen6_slide .swiper-container .swiper-wrapper .swiper-slide ._item {
position: relative;
display: block;
width: 100%;
height: 410px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media only screen and (max-width: 480px) {
.screen_6 .screen6_slide .swiper-container .swiper-wrapper .swiper-slide ._item {
height: 320px; } }
.screen_6 .screen6_slide .swiper-container .swiper-wrapper .swiper-slide ._item:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-color: rgba(0, 0, 0, 0.1); }
.screen_6 .screen6_slide .swiper-container .swiper-wrapper .swiper-slide ._item .btn-video {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.screen_6 .screen6_slide .swiper-container .swiper-wrapper .swiper-slide ._item .btn-video:before {
position: absolute;
content: '';
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 24px solid #ffffff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
@media only screen and (max-width: 768px) {
.screen_6 .screen6_slide .swiper-container .swiper-wrapper .swiper-slide ._item .btn-video:before {
border-top: 18px solid transparent;
border-bottom: 18px solid transparent; } }
@media only screen and (max-width: 480px) {
.screen_6 .screen6_slide .swiper-container .swiper-wrapper .swiper-slide ._item .btn-video:before {
border-top: 13px solid transparent;
border-bottom: 13px solid transparent; } }
.screen_6 .screen6_slide .swiper-container .swiper-wrapper .swiper-slide ._item:hover .btn-video:before {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3); }
.screen_6 .screen6_slide .pagination_slide {
bottom: -42px; }
@media only screen and (max-width: 768px) {
.screen_6 .screen6_slide .pagination_slide {
bottom: -60px; } }
@media only screen and (max-width: 480px) {
.screen_6 .screen6_slide .pagination_slide {
bottom: -30px; } }
.screen_6 .screen6_slide .pagination_slide .swiper-pagination-bullet {
background-color: #d8d8d8; }
.screen_6 .screen6_slide .pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #5bcfdc; }
.screen_6 .screen6_slide .pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
position: absolute;
content: '';
top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
border: 2px solid #ffffff;
border-radius: 50%; }
.screen_6 .screen6_slide .pagination_slide .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
width: 10px;
height: 9px;
background-color: inherit;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/star.png);
background-size: cover;
background-repeat: no-repeat; }
.screen_6 .screen6_slide .swiper-button-prev, .screen_6 .screen6_slide .swiper-button-next {
background-image: inherit !important;
width: 30px;
height: 30px;
background-color: #51bcc0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center; }
@media only screen and (max-width: 768px) {
.screen_6 .screen6_slide .swiper-button-prev, .screen_6 .screen6_slide .swiper-button-next {
display: none; } }
.screen_6 .screen6_slide .swiper-button-prev:focus, .screen_6 .screen6_slide .swiper-button-next:focus {
outline: none; }
.screen_6 .screen6_slide .swiper-button-prev {
left: calc((100% / 10) * 1.5); }
@media only screen and (max-width: 1024px) {
.screen_6 .screen6_slide .swiper-button-prev {
left: calc((100% / 10) * 0.75); } }
.screen_6 .screen6_slide .swiper-button-next {
right: calc((100% / 10) * 1.5); }
@media only screen and (max-width: 1024px) {
.screen_6 .screen6_slide .swiper-button-next {
right: calc((100% / 10) * 0.75); } }
.screen_6 .screen6_slide .swiper-button-next img {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); }
.screen_6 .screen6_slide .slide-item-left, .screen_6 .screen6_slide .slide-item-right {
background-position: center center;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
position: absolute;
width: 50%;
top: 35px;
float: left;
height: 340px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media only screen and (max-width: 480px) {
.screen_6 .screen6_slide .slide-item-left, .screen_6 .screen6_slide .slide-item-right {
top: 20px;
height: 280px; } }
.screen_6 .screen6_slide .slide-item-left:before, .screen_6 .screen6_slide .slide-item-right:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-color: rgba(0, 0, 0, 0.8); }
.screen_6 .screen6_slide .slide-item-left {
left: 0; }
.screen_6 .screen6_slide .slide-item-right {
right: 0; }
.screen_7 {
position: relative;
padding-bottom: 40px; }
@media only screen and (max-width: 768px) {
.screen_7 {
padding-top: 40px;
padding-bottom: 0px; } }
@media only screen and (max-width: 480px) {
.screen_7 {
padding-top: 15px; } }
.screen_7 .decor {
position: absolute;
content: '';
width: 684px;
right: 0px;
top: 50px;
z-index: -1; }
@media only screen and (max-width: 480px) {
.screen_7 .decor {
display: none; } }
.screen_7 .decor img {
display: block;
width: 100%;
height: auto; }
.screen_7 ._title-highlight {
margin-left: calc((100% / 12) * 2); }
@media only screen and (max-width: 1024px) {
.screen_7 ._title-highlight {
margin-left: 60px; } }
@media only screen and (max-width: 768px) {
.screen_7 ._title-highlight {
margin-left: 40px; } }
@media only screen and (max-width: 480px) {
.screen_7 ._title-highlight {
margin-left: 20px; } }
.screen_7 .title-screen {
padding: 17px calc((100% / 12) * 3) 15px calc((100% / 12) * 2); }
@media only screen and (max-width: 1024px) {
.screen_7 .title-screen {
padding: 17px 60px 15px; } }
@media only screen and (max-width: 768px) {
.screen_7 .title-screen {
padding: 30px 40px 10px; }
.screen_7 .title-screen p {
line-height: 77px; } }
@media only screen and (max-width: 480px) {
.screen_7 .title-screen {
padding: 20px 20px 10px; }
.screen_7 .title-screen p {
line-height: 35px; } }
.screen_7 .screen_7-content {
position: relative;
width: calc((100% / 12) * 10);
margin: 15px auto 0px;
display: flex;
flex-wrap: wrap; }
@media only screen and (max-width: 1024px) {
.screen_7 .screen_7-content {
width: calc(100% - 60px); } }
@media only screen and (max-width: 768px) {
.screen_7 .screen_7-content {
width: 100%;
margin-bottom: 50px !important; } }
@media only screen and (max-width: 480px) {
.screen_7 .screen_7-content {
margin-bottom: 20px !important; } }
.screen_7 .screen_7-content ._item {
display: inline-block;
width: calc((100% - 50px) / 3);
margin-right: 25px;
float: left; }
.screen_7 .screen_7-content ._item:focus {
outline: none; }
.screen_7 .screen_7-content ._item:nth-of-type(3n) {
margin-right: 0px; }
@media only screen and (max-width: 768px) {
.screen_7 .screen_7-content ._item {
width: calc((100% - 25px) / 2); }
.screen_7 .screen_7-content ._item:nth-of-type(3n) {
margin-right: 25px; }
.screen_7 .screen_7-content ._item:nth-of-type(2n) {
margin-right: 0px; } }
@media only screen and (max-width: 480px) {
.screen_7 .screen_7-content ._item {
width: 100%;
margin-right: 0px; }
.screen_7 .screen_7-content ._item:nth-of-type(3n) {
margin-right: 0px; } }
.screen_7 .screen_7-content ._item ._image {
display: block;
width: 100%;
overflow: hidden; }
@media only screen and (min-width: 1025px) {
.screen_7 .screen_7-content ._item ._image:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1); } }
.screen_7 .screen_7-content ._item ._image img {
display: block;
width: 100%;
height: auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease; }
.screen_7 .screen_7-content ._item ._title {
text-transform: uppercase;
font-family: 'Cabin';
font-weight: bold;
font-size: 15px;
line-height: 22px;
padding: 15px 15px 25px;
text-align: center;
color: rgba(0, 0, 0, 0.9); }
@media only screen and (max-width: 768px) {
.screen_7 .screen_7-content ._item ._title {
font-size: 23px;
line-height: 33px; } }
@media only screen and (max-width: 768px) {
.screen_7 .screen_7-content ._item ._title {
font-size: 15px;
line-height: 22px; } }
.screen_8 {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding: 50px; }
@media only screen and (max-width: 1024px) {
.screen_8 {
padding: 50px 30px; } }
@media only screen and (max-width: 768px) {
.screen_8 {
padding: 40px; } }
@media only screen and (max-width: 480px) {
.screen_8 {
padding: 40px 20px; } }
@media only screen and (max-width: 320px) {
.screen_8 {
padding: 40px 9px; } }
.screen_8:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-color: rgba(81, 188, 192, 0.9); }
.screen_8-fm {
position: relative;
width: 100%;
height: auto; }
.screen_8-fm:before {
position: absolute;
content: '';
top: -50px;
left: -50px;
width: 21%;
height: 215px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/screen_8-decorTop.png);
background-size: cover;
background-repeat: no-repeat;
background-position: right bottom; }
@media only screen and (max-width: 768px) {
.screen_8-fm:before {
top: -40px;
left: -40px; } }
@media only screen and (max-width: 480px) {
.screen_8-fm:before {
display: none; } }
.screen_8-fm:after {
position: absolute;
content: '';
bottom: -50px;
right: -50px;
width: 21%;
height: 215px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page/screen_8-decorTop.png);
background-size: cover;
background-repeat: no-repeat;
background-position: right top;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); }
@media only screen and (max-width: 768px) {
.screen_8-fm:after {
bottom: -40px;
right: -40px; } }
@media only screen and (max-width: 480px) {
.screen_8-fm:after {
display: none; } }
.screen_8-content {
position: relative;
background-color: #ffffff;
padding: 40px 50px 50px;
z-index: 1; }
@media only screen and (max-width: 1024px) {
.screen_8-content {
padding: 40px 30px 50px; } }
@media only screen and (max-width: 768px) {
.screen_8-content {
padding-bottom: 70px; } }
@media only screen and (max-width: 480px) {
.screen_8-content {
padding: 40px 16.5px 50px; } }
.screen_8-content ._text {
padding-right: 45px;
width: 20%;
float: left; }
@media only screen and (max-width: 1024px) {
.screen_8-content ._text {
width: 100%;
padding-right: 0px;
border-right: inherit; } }
.screen_8-content ._text ._title {
position: relative;
font-family: 'UTMGod-sWord';
font-size: 20px;
color: #3d3a3d;
text-transform: uppercase;
padding-bottom: 25px; }
@media only screen and (max-width: 1024px) {
.screen_8-content ._text ._title {
text-align: center;
padding: 15px 0px;
max-width: 65%;
margin: 0 auto; }
.screen_8-content ._text ._title br {
display: none; } }
@media only screen and (max-width: 768px) {
.screen_8-content ._text ._title {
font-size: 33px; } }
@media only screen and (max-width: 480px) {
.screen_8-content ._text ._title {
font-size: 20px; } }
.screen_8-content ._text ._title:before {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100px;
height: 1px;
background: linear-gradient(to right, #bd8c3b 0%, #bd8c3b 8%, #c89e50 18%, #d0aa5c 22%, #dbbc71 31%, #e9cd82 44%, #eecf82 50%, #eecf82 61%, #eccc7f 65%, #dcb86b 77%, #d0aa5c 84%, #c49849 89%, #c09548 89%, #c09548 90%, #b98c3f 92%, #b6893b 94%, #b38538 95%, #af8033 97%, #af8033 100%); }
@media only screen and (max-width: 1024px) {
.screen_8-content ._text ._title:before {
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%); } }
.screen_8-content ._text ._note {
padding-top: 25px;
font-family: 'Cabin';
font-size: 15px;
font-style: italic;
color: rgba(0, 0, 0, 0.8);
line-height: 22px; }
@media only screen and (max-width: 1024px) {
.screen_8-content ._text ._note {
text-align: center;
max-width: 65%;
margin: 0 auto;
padding: 25px 0px; } }
@media only screen and (max-width: 768px) {
.screen_8-content ._text ._note {
font-size: 28px;
line-height: 41px;
padding-top: 30px;
padding-bottom: 30px;
max-width: 100%; } }
@media only screen and (max-width: 480px) {
.screen_8-content ._text ._note {
font-size: 14px;
line-height: 22px;
padding-bottom: 20px;
padding-top: 20px; } }
.screen_8-content .screen_8-form {
width: 80%;
float: left;
padding-left: 45px;
border-left: 1px solid #e5e5e5; }
@media only screen and (max-width: 1024px) {
.screen_8-content .screen_8-form {
border-top: 1px solid #e5e5e5;
width: 100%;
padding-left: 0px;
border-left: inherit; } }
.screen_8-content .screen_8-form .contact_form {
position: relative;
width: 100%; }
.screen_8-content .screen_8-form .contact_form .form-group {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 10px;
height: auto;
padding: 0;
width: calc((100% - 170px) / 2); }
@media only screen and (max-width: 1024px) {
.screen_8-content .screen_8-form .contact_form .form-group:nth-of-type(1) {
margin-top: 25px; } }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group {
width: 100%;
margin-bottom: 20px; }
.screen_8-content .screen_8-form .contact_form .form-group:nth-of-type(1) {
margin-top: 35px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group {
margin-bottom: 13px; }
.screen_8-content .screen_8-form .contact_form .form-group:nth-of-type(1) {
margin-top: 20px; } }
.screen_8-content .screen_8-form .contact_form .form-group:nth-of-type(4) {
position: absolute;
top: 0;
left: 0;
margin-left: calc(((100% - 170px) / 2) + 35px);
bottom: 0;
height: 100%; }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group:nth-of-type(4) {
position: static;
margin-left: 0;
bottom: inherit; } }
.screen_8-content .screen_8-form .contact_form .form-group .g-recaptcha.frm_captcha {
width: 100%; }
@media only screen and (max-width: 320px) {
.screen_8-content .screen_8-form .contact_form .form-group .g-recaptcha.frm_captcha {
position: relative;
left: -16.5px; } }
.screen_8-content .screen_8-form .contact_form .form-group .g-recaptcha.frm_captcha div {
width: 100% !important; }
.screen_8-content .screen_8-form .contact_form .form-group label {
font-family: 'Cabin';
font-weight: inherit;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
margin-bottom: 5px; }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group label {
font-size: 28px;
margin-bottom: 15px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group label {
font-size: 14px;
margin-bottom: 5px; } }
.screen_8-content .screen_8-form .contact_form .form-group input {
border: 1px solid rgba(0, 0, 0, 0.3);
height: 40px;
background-color: #ffffff;
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
padding: 0px 15px; }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group input {
font-size: 28px;
border: 2px solid rgba(0, 0, 0, 0.3);
height: 75px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group input {
font-size: 14px;
border: 1px solid rgba(0, 0, 0, 0.3);
height: 40px; } }
.screen_8-content .screen_8-form .contact_form .form-group input::-webkit-input-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group input::-webkit-input-placeholder {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group input::-webkit-input-placeholder {
font-size: 14px; } }
.screen_8-content .screen_8-form .contact_form .form-group input::-moz-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group input::-moz-placeholder {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group input::-moz-placeholder {
font-size: 14px; } }
.screen_8-content .screen_8-form .contact_form .form-group input:-ms-input-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group input:-ms-input-placeholder {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group input:-ms-input-placeholder {
font-size: 14px; } }
.screen_8-content .screen_8-form .contact_form .form-group input:-moz-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group input:-moz-placeholder {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group input:-moz-placeholder {
font-size: 14px; } }
.screen_8-content .screen_8-form .contact_form .form-group textarea {
resize: none;
width: 100%;
height: 100%;
padding: 10px 15px;
background-color: #ffffff;
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 0, 0, 0.3); }
.screen_8-content .screen_8-form .contact_form .form-group textarea::-webkit-input-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea::-webkit-input-placeholder {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea::-webkit-input-placeholder {
font-size: 14px; } }
.screen_8-content .screen_8-form .contact_form .form-group textarea::-moz-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea::-moz-placeholder {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea::-moz-placeholder {
font-size: 14px; } }
.screen_8-content .screen_8-form .contact_form .form-group textarea:-ms-input-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea:-ms-input-placeholder {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea:-ms-input-placeholder {
font-size: 14px; } }
.screen_8-content .screen_8-form .contact_form .form-group textarea:-moz-placeholder {
font-family: 'Cabin';
font-size: 14px;
color: rgba(0, 0, 0, 0.5); }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea:-moz-placeholder {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea:-moz-placeholder {
font-size: 14px; } }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea {
font-size: 28px;
height: 295px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .form-group textarea {
font-size: 14px;
height: 105px; } }
.screen_8-content .screen_8-form .contact_form .form-group textarea:focus {
outline: none; }
.screen_8-content .screen_8-form .contact_form .btn-submit {
position: absolute;
top: 0px;
right: 0;
font-family: 'iCielGotham-Black';
font-size: 15px;
color: #ffffff;
text-transform: uppercase;
background-color: #51bcc0;
width: 100px;
height: 228px;
border: none;
padding: 15px 20px;
cursor: pointer; }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .btn-submit {
font-size: 28px;
width: 100%;
height: 75px;
position: static;
top: inherit;
right: inherit;
margin: 40px 0px 20px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .btn-submit {
font-size: 14px;
height: 45px;
margin: 10px 0px 0px; } }
.screen_8-content .screen_8-form .contact_form .btn-submit:focus {
outline: none; }
.screen_8-content .screen_8-form .contact_form .btn-submit:before {
position: absolute;
content: '';
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid #63c3c6; }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .btn-submit:before {
display: none; } }
.screen_8-content .screen_8-form .contact_form .frm_msg {
position: absolute;
left: 0;
right: 0;
width: 100%;
bottom: -40px;
text-align: center;
font-family: 'Cabin';
font-weight: bold;
font-size: 14px;
color: rgba(0, 0, 0, 0.8); }
@media only screen and (max-width: 768px) {
.screen_8-content .screen_8-form .contact_form .frm_msg {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.screen_8-content .screen_8-form .contact_form .frm_msg {
font-size: 14px;
bottom: -30px; } }
.header_pc.color {
background-color: #ffffff; }
.landing-page-nguyet-que {
position: relative; }
.landing-page-nguyet-que .link {
position: relative;
text-transform: uppercase;
color: #ffffff;
font-family: 'Cabin';
font-size: 13px;
font-weight: 600;
border: 1px solid #dcbe6d;
z-index: 3;
padding: 10px 20px;
background-color: #dcbe6d;
border-radius: 20px;
display: block;
width: 280px;
margin: 0 auto;
text-align: center;
overflow: hidden; }
.landing-page-nguyet-que .link img {
display: inline-block;
height: auto;
width: 13px;
margin-top: 2px;
margin-left: 10px; }
.landing-page-nguyet-que .link:after {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 60%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.45) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.45) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
animation: animatedgradient 1s ease-in-out alternate infinite;
-webkit-animation: animatedgradient 1s ease-in-out alternate infinite; }
.landing-page-nguyet-que .decor-mobile {
position: absolute;
top: 360px;
right: 0;
display: none; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .decor-mobile {
display: block; } }
.landing-page-nguyet-que .decor-mobile img {
display: block;
width: 100%;
height: auto; }
.landing-page-nguyet-que .decor-bottom {
position: absolute;
bottom: 0;
left: 0;
display: none; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .decor-bottom {
display: block;
width: 75%; } }
.landing-page-nguyet-que .decor-bottom img {
display: block;
width: 100%;
height: auto; }
.landing-page-nguyet-que ._note {
font-size: 16px;
font-family: 'Cabin';
font-weight: 600;
color: #fff;
position: absolute;
z-index: 3;
bottom: 20px;
left: 20px;
right: 20px; }
.landing-page-nguyet-que .title {
font-size: 40px;
font-family: 'iCielGotham-Book';
color: #3d3a3d;
text-align: center;
text-transform: uppercase;
margin: 55px 0px 45px 0px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .title {
font-size: 24px; } }
.landing-page-nguyet-que .banner .swiper-container .swiper-slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 570px; }
.landing-page-nguyet-que .phankhu {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
padding: 40px calc((100% / 12) * 1.5) 40px calc((100% / 12) * 2.5);
display: flex;
align-items: center; }
@media only screen and (max-width: 1024px) {
.landing-page-nguyet-que .phankhu {
padding: 40px 30px 100px;
flex-wrap: wrap; } }
.landing-page-nguyet-que .phankhu:after {
position: absolute;
content: '';
bottom: 0;
left: 0;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-nguyet-que/phu-banner.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%; }
.landing-page-nguyet-que .phankhu:before {
position: absolute;
content: '';
bottom: 0;
left: 0;
background-color: rgba(61, 58, 61, 0.2);
width: 100%;
height: 100%; }
.landing-page-nguyet-que .phankhu .decor-phankhu {
position: absolute;
bottom: 0;
left: 0;
z-index: 2; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .phankhu .decor-phankhu {
width: 215px;
height: 75px;
left: 0;
bottom: 2px; } }
.landing-page-nguyet-que .phankhu .decor-phankhu img {
display: block;
width: 100%;
height: auto; }
.landing-page-nguyet-que .phankhu ._left {
position: relative;
z-index: 2;
margin-right: calc((100% / 12) * 0.75);
width: 260px; }
.landing-page-nguyet-que .phankhu ._left img {
display: block;
width: auto;
height: auto; }
@media only screen and (max-width: 1024px) {
.landing-page-nguyet-que .phankhu ._left {
width: 100%;
margin-bottom: 40px;
margin-right: 0; }
.landing-page-nguyet-que .phankhu ._left img {
margin: 0 auto; } }
.landing-page-nguyet-que .phankhu ._right {
position: relative;
z-index: 2;
width: calc(100% - 260px - ((100% / 12) * 0.5));
text-align: center; }
.landing-page-nguyet-que .phankhu ._right img {
width: auto;
height: auto; }
.landing-page-nguyet-que .phankhu ._right ._slogan {
display: flex;
justify-content: center;
margin-bottom: 25px; }
.landing-page-nguyet-que .phankhu ._right ._slogan img {
margin-right: 30px; }
.landing-page-nguyet-que .phankhu ._right ._slogan img:last-child {
margin-right: 0; }
@media only screen and (max-width: 1024px) {
.landing-page-nguyet-que .phankhu ._right {
width: 100%; } }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .phankhu ._right ._slogan {
display: block;
margin-bottom: 0; }
.landing-page-nguyet-que .phankhu ._right ._slogan img {
margin-right: 0;
margin-bottom: 35px; } }
.landing-page-nguyet-que .introduct {
position: relative;
width: 83.3333333333%;
margin: 0 auto;
padding-top: 55px; }
@media only screen and (max-width: 1024px) {
.landing-page-nguyet-que .introduct {
width: calc(100% - 60px); } }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .introduct {
width: calc(100% - 30px); }
.landing-page-nguyet-que .introduct:before {
position: absolute;
content: "";
top: 0;
right: -15px;
width: 85.3333333333%;
height: 229px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-nguyet-que/decor-mobile.png);
background-size: 100% 100%;
z-index: -1; } }
.landing-page-nguyet-que .introduct ._title {
text-align: center; }
.landing-page-nguyet-que .introduct ._title p {
font-family: 'iCielGotham-Bold';
color: #3d3a3d; }
.landing-page-nguyet-que .introduct ._title p:nth-of-type(1) {
font-size: 24px;
text-transform: uppercase; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .introduct ._title p:nth-of-type(1) {
font-size: 22px;
line-height: 30px;
margin-bottom: 15px; } }
.landing-page-nguyet-que .introduct ._title p:nth-of-type(2) {
font-size: 18px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .introduct ._title p:nth-of-type(2) {
font-size: 15px; } }
.landing-page-nguyet-que .introduct .content {
display: flex; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .introduct .content {
flex-direction: column; } }
.landing-page-nguyet-que .introduct .content .left {
width: 40.5833333333%;
margin-right: 40px;
margin-top: 75px; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .introduct .content .left {
width: 100%;
margin-top: 30px; } }
.landing-page-nguyet-que .introduct .content .left .desc {
font-family: 'Cabin';
font-size: 16px;
color: #585858;
font-weight: 600;
line-height: 30px; }
.landing-page-nguyet-que .introduct .content .left .the-title {
font-family: 'Cabin';
font-weight: 700;
font-size: 16px;
color: #000000;
text-transform: uppercase;
margin-top: 30px;
margin-bottom: 15px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .introduct .content .left .the-title {
margin-top: 20px; } }
.landing-page-nguyet-que .introduct .content .left .the-content p {
margin-bottom: 0;
font-family: 'Cabin';
font-size: 16px;
color: #585858;
padding-bottom: 5px; }
.landing-page-nguyet-que .introduct .content .left .the-content p strong {
font-family: 'Cabin'; }
.landing-page-nguyet-que .introduct .content .right {
width: 60.1666666667%;
margin-top: 35px; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .introduct .content .right {
width: 100%;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); } }
.landing-page-nguyet-que .introduct .content .right .img {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 500px;
position: relative; }
.landing-page-nguyet-que .introduct .content .right .img:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-nguyet-que/layout.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: 2; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .introduct .content .right .img {
height: 230px; } }
.landing-page-nguyet-que .introduct .content .right .img .decor {
position: absolute;
left: auto;
right: 0;
bottom: 0;
top: 0;
z-index: 2; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .introduct .content .right .img .decor {
width: 112px; } }
.landing-page-nguyet-que .introduct .content .right .img .decor img {
display: block;
width: 100%;
height: 100%; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .location .title {
margin: 35px 0px 20px 0px; } }
.landing-page-nguyet-que .location .map {
position: relative; }
.landing-page-nguyet-que .location .map .pc {
display: block;
width: 100%;
height: auto; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .location .map .pc {
display: none; } }
.landing-page-nguyet-que .location .map .mobile {
display: none;
width: 100%;
height: auto; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .location .map .mobile {
display: block; } }
.landing-page-nguyet-que .location .text {
position: absolute;
bottom: 80px;
right: 8.9583333333%;
text-align: center;
text-transform: uppercase; }
@media only screen and (max-width: 1024px) {
.landing-page-nguyet-que .location .text {
bottom: 0;
right: 45px; } }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .location .text {
position: static;
margin-top: 35px; } }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .location .text {
margin-top: 0; } }
.landing-page-nguyet-que .location .text p {
font-family: 'iCielGotham-Book';
color: #3d3a3d;
padding-bottom: 10px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .location .text p {
font-size: 18px !important; } }
.landing-page-nguyet-que .location .text p:nth-of-type(1) {
font-size: 30px;
text-transform: uppercase;
padding-bottom: 25px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .location .text p:nth-of-type(1) {
padding-bottom: 15px; } }
.landing-page-nguyet-que .location .text p:nth-of-type(2) {
font-size: 24px;
font-family: 'iCielGotham-Bold'; }
.landing-page-nguyet-que .location .text p:nth-of-type(3) {
font-size: 25px;
font-weight: 700;
color: #d7b766;
font-family: 'iCielGotham-Bold'; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .location .text p:nth-of-type(3) {
font-size: 22px !important; } }
.landing-page-nguyet-que .location .text p:nth-of-type(4) {
font-size: 24px;
font-family: 'iCielGotham-Bold'; }
.landing-page-nguyet-que .location .text .link {
margin-top: 12px; }
.landing-page-nguyet-que .highlight {
width: 83.3333333333%;
margin: 0 auto; }
@media only screen and (max-width: 1024px) {
.landing-page-nguyet-que .highlight {
width: calc(100% - 60px); } }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .highlight {
width: calc(100% - 30px); } }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .highlight .title {
margin: 20px 0 20px 0; } }
.landing-page-nguyet-que .highlight .the-title p {
font-size: 25px;
font-family: 'iCielGotham-Bold';
color: #3d3a3d;
text-transform: uppercase;
line-height: 35px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .highlight .the-title p {
font-size: 23px;
text-align: left; }
.landing-page-nguyet-que .highlight .the-title p:nth-of-type(1) {
margin-bottom: 0; } }
.landing-page-nguyet-que .highlight .content p,
.landing-page-nguyet-que .highlight .text p {
font-family: 'Cabin';
font-size: 14px;
color: #3d3a3d;
line-height: 25px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .highlight .content,
.landing-page-nguyet-que .highlight .text {
text-align: left; } }
.landing-page-nguyet-que .highlight .link {
margin-top: 55px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .highlight .link {
margin-top: 35px;
margin-bottom: 40px; } }
.landing-page-nguyet-que .highlight .desc_1 {
margin-top: 75px;
display: inline-block; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .highlight .desc_1 {
margin-top: 30px; } }
.landing-page-nguyet-que .highlight .desc_1 .right {
width: 50%;
position: relative;
float: left; }
.landing-page-nguyet-que .highlight .desc_1 .right:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-nguyet-que/layout.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: 2; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .highlight .desc_1 .right {
width: 100%;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); } }
.landing-page-nguyet-que .highlight .desc_1 .right img {
display: block;
width: 100%;
height: auto; }
.landing-page-nguyet-que .highlight .desc_1 .right .decor {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 2; }
.landing-page-nguyet-que .highlight .desc_1 .right .decor img {
display: block;
width: 100%;
height: auto; }
.landing-page-nguyet-que .highlight .desc_1 .left {
width: 33.3333333333%;
margin: 0 115px 0 70px;
float: left; }
@media only screen and (max-width: 1024px) {
.landing-page-nguyet-que .highlight .desc_1 .left {
width: 50%;
margin: 0;
padding-right: 50px; } }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .highlight .desc_1 .left {
margin: 0 35px 35px 35px;
float: inherit;
width: 90%; } }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .highlight .desc_1 .left {
margin: 0;
width: 100%;
padding-right: 0; } }
.landing-page-nguyet-que .highlight .desc_1 .left .title {
text-align: left;
margin: 20px 0px 30px 0px; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .highlight .desc_1 .left .title {
text-align: center; } }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .highlight .desc_1 .left .title {
margin: 20px 0px 25px 0px; } }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .highlight .desc_1 .left .the-title p {
text-align: center; } }
.landing-page-nguyet-que .highlight .desc_1 .left .text {
margin-left: 45px;
position: relative;
overflow: hidden;
height: 200px; }
.landing-page-nguyet-que .highlight .desc_1 .left .text:before {
position: absolute;
content: "";
left: -25px;
top: 5px;
width: 1px;
height: calc(100% + 55px);
background-color: #dadada; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .highlight .desc_1 .left .text {
margin-bottom: 20px;
margin-left: 30px;
position: relative;
height: 175px; }
.landing-page-nguyet-que .highlight .desc_1 .left .text:before {
display: none; }
.landing-page-nguyet-que .highlight .desc_1 .left .text:after {
position: absolute;
content: '';
width: 2px;
height: 230px;
color: #dadada;
bottom: 0;
top: 9px;
left: -18px;
background-color: #dadada; } }
.landing-page-nguyet-que .highlight .desc_1 .content {
margin-top: 15px;
margin-bottom: 20px; }
.landing-page-nguyet-que .desc_2 {
display: inline-block;
margin-top: 50px; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .desc_2 {
display: flex;
flex-direction: column; } }
.landing-page-nguyet-que .desc_2 .left {
width: 49.1803278689%;
position: relative;
float: left; }
.landing-page-nguyet-que .desc_2 .left:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-nguyet-que/layout.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: 2; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .desc_2 .left {
width: 100%;
order: 2; } }
.landing-page-nguyet-que .desc_2 .left img {
display: block;
width: 100%;
height: auto; }
.landing-page-nguyet-que .desc_2 .left .decor {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 2; }
.landing-page-nguyet-que .desc_2 .left .decor img {
display: block;
width: 100%;
height: auto; }
.landing-page-nguyet-que .desc_2 .right {
width: 29%;
margin-left: 100px;
float: left;
padding: 30px 0 65px; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .desc_2 .right {
width: 100%;
text-align: center;
margin-bottom: 20px;
margin-left: 0;
order: 1;
padding: 0; } }
.landing-page-nguyet-que .desc_2 .right .the-title {
margin-bottom: 30px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .desc_2 .right .the-title {
margin-bottom: 20px; } }
.landing-page-nguyet-que .desc_3 {
display: flex;
margin-top: 40px; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .desc_3 {
flex-direction: column; } }
.landing-page-nguyet-que .desc_3 .left {
width: 35%;
margin-right: 130px;
margin-left: 65px;
display: flex;
flex-direction: column;
justify-content: center; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .desc_3 .left {
width: 100%;
text-align: center;
margin: 0 0 30px 0; } }
.landing-page-nguyet-que .desc_3 .left .the-title {
padding-bottom: 5px; }
.landing-page-nguyet-que .desc_3 .left ._content {
font-size: 18px;
font-family: 'iCielGotham-Book';
color: #3d3a3d;
padding-bottom: 23px; }
@media only screen and (max-width: 480px) {
.landing-page-nguyet-que .desc_3 .left ._content {
text-align: left;
font-size: 15px;
font-weight: 500;
padding: 10px 0px; } }
.landing-page-nguyet-que .desc_3 .right {
width: 50%;
position: relative; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .desc_3 .right {
width: 100%;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); } }
.landing-page-nguyet-que .desc_3 .right:before {
position: absolute;
content: '';
width: 310px;
height: 100px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-nguyet-que/decor-banner.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
top: -100px;
left: 100px; }
@media only screen and (max-width: 768px) {
.landing-page-nguyet-que .desc_3 .right:before {
display: none; } }
.landing-page-nguyet-que .desc_3 .right:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-nguyet-que/layout.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: 2; }
.landing-page-nguyet-que .desc_3 .right img {
display: block;
width: 100%;
height: auto; }
.landing-page-nguyet-que .desc_3 .right .decor {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
top: 0;
z-index: 3; }
.landing-page-nguyet-que .desc_3 .right .decor img {
display: block;
width: 100%;
height: 100%; }
.library {
width: 100%; }
.library .desc {
padding-bottom: 60px; }
@media only screen and (max-width: 480px) {
.library .desc {
padding-bottom: 100px; } }
.library .desc .swiper-container {
position: relative;
padding: 0 16.6666666667%; }
@media only screen and (max-width: 768px) {
.library .desc .swiper-container {
width: 100%; } }
@media only screen and (max-width: 480px) {
.library .desc .swiper-container {
padding: 0 0 40px; } }
.library .desc .swiper-container .swiper-wrapper .swiper-slide {
margin-top: 0 !important; }
.library .desc .swiper-container .swiper-wrapper .swiper-slide .thumbnail {
position: relative;
display: block;
width: 100%;
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 508px; }
@media only screen and (max-width: 480px) {
.library .desc .swiper-container .swiper-wrapper .swiper-slide .thumbnail {
height: 250px; } }
.library .desc .swiper-container .swiper-wrapper .swiper-slide .thumbnail .text {
font-size: 16px;
font-family: 'Cabin';
font-weight: 600;
color: #fff;
position: absolute;
z-index: 2;
bottom: 20px;
left: 20px;
right: 20px;
opacity: 0; }
.library .desc .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .thumbnail:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-nguyet-que/layout.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
.library .desc .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-active .thumbnail .text {
opacity: 1; }
.library .desc .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-prev .thumbnail:before, .library .desc .swiper-container .swiper-wrapper .swiper-slide.swiper-slide-next .thumbnail:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background-color: rgba(255, 255, 255, 0.65); }
.library .desc .swiper-container .btn-pagination {
bottom: 7px;
display: none; }
.library .desc .swiper-container .btn-pagination .swiper-pagination-bullet {
margin: 0 5px;
width: 10px;
height: 10px;
opacity: 1;
background-color: #9e9c9e; }
.library .desc .swiper-container .btn-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #3d3a3d; }
@media only screen and (max-width: 480px) {
.library .desc .swiper-container .btn-pagination {
display: block; } }
.library .desc .swiper-container .btn-next,
.library .desc .swiper-container .btn-prev {
position: absolute;
z-index: 2;
top: 50%;
transform: translateY(-50%);
outline: none; }
@media only screen and (max-width: 480px) {
.library .desc .swiper-container .btn-next,
.library .desc .swiper-container .btn-prev {
display: none; }
.library .desc .swiper-container .btn-next img,
.library .desc .swiper-container .btn-prev img {
width: 33px; } }
.library .desc .swiper-container .btn-next {
right: 10.4166666667%; }
@media only screen and (max-width: 768px) {
.library .desc .swiper-container .btn-next {
right: 6.25%; } }
@media only screen and (max-width: 480px) {
.library .desc .swiper-container .btn-next {
right: 15px; } }
.library .desc .swiper-container .btn-prev {
left: 10.4166666667%;
transform: translateY(-50%) rotate(-180deg); }
@media only screen and (max-width: 768px) {
.library .desc .swiper-container .btn-prev {
left: 6.25%; } }
@media only screen and (max-width: 480px) {
.library .desc .swiper-container .btn-prev {
left: 15px; } }
.product_ground_NQ ._top-right .ground_type li.type1 a span {
background-color: #F2B681; }
.product_ground_NQ ._top-right .ground_type li.type2 a span {
background-color: #D0B2D4; }
.product_ground_NQ ._top-right .ground_type li.type3 a span {
background-color: #92D4D2; }
.product_ground_NQ ._top-right .ground_type li.type4 a span {
background-color: #E8E82D; }
.product_ground_NQ ._top-right .ground_type li.active.type1 {
background-color: #F2B681; }
.product_ground_NQ ._top-right .ground_type li.active.type2 {
background-color: #D0B2D4; }
.product_ground_NQ ._top-right .ground_type li.active.type3 {
background-color: #92D4D2; }
.product_ground_NQ ._top-right .ground_type li.active.type4 {
background-color: #E8E82D; }
.product_ground_NQ .popup_ground {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-height: calc(100vh - 30px);
overflow-y: auto;
z-index: 111; }
@media only screen and (max-width: 768px) {
.product_ground_NQ .popup_ground {
margin-left: 0; } }
.product_ground_NQ .overlay-nq {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 110;
background-color: rgba(0, 0, 0, 0.75);
display: none; }
.product_ground_NQ ._close {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: #3d3a3d;
font-size: 22px;
font-family: 'iCielGotham-Book';
z-index: 2;
cursor: pointer; }
.nq_don_lap,
.nq_song_lap,
.nq_shophouse,
.nq_shopvilla {
cursor: pointer;
pointer-events: none !important;
display: block !important;
opacity: 0.25 !important; }
.nq_don_lap.active,
.nq_song_lap.active,
.nq_shopvilla.active {
opacity: 0.9 !important;
pointer-events: all !important;
display: block !important; }
.nq_shophouse.active {
opacity: 0.8 !important;
pointer-events: all !important;
display: block !important; }
.nq_don_lap.active {
fill: #F2B681 !important; }
.nq_song_lap.active {
fill: #D0B2D4 !important; }
.nq_shophouse.active {
fill: #92D4D2 !important; }
.nq_shopvilla.active {
fill: #E8E82D !important; }
@keyframes animatedgradient {
100% {
left: 125%; } }
@-webkit-keyframes animatedgradient {
100% {
left: 125%; } }
.page-template-landing_phong_land header {
display: none; }
.page-template-landing_phong_land .footer_top {
display: none; }
.page-template-landing_phong_land .footer_bottom {
display: none; }
.page-template-landing_phong_land .header-mobile {
display: none; }
.page-template-landing_phong_land .hamburger {
display: none; }
.title_why_choose {
margin-bottom: 30px; }
.title_why_choose p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 28px;
line-height: 37px;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #333333; }
.title_why_choose p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 28px;
line-height: 37px;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #03444E; }
@media only screen and (max-width: 1024px) {
.title_why_choose p:nth-of-type(2) {
font-size: 27px; } }
@media only screen and (max-width: 480px) {
.title_why_choose p:nth-of-type(2) {
font-size: 24px; } }
.page_phong_lan .control {
position: relative;
flex-direction: row;
align-items: center;
justify-content: center;
display: flex;
width: max-content;
margin-top: 40px; }
@media only screen and (max-width: 768px) {
.page_phong_lan .control {
margin-top: 20px; } }
.page_phong_lan .control .swiper-button-next, .page_phong_lan .control .swiper-button-prev {
background-image: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: initial;
margin-top: 0;
height: auto;
outline: none;
width: auto; }
.page_phong_lan .control .number {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 0 15px; }
.page_phong_lan .control .number span {
margin: 0 5px; }
.page_phong_lan .control .number .index {
font-family: 'iCielGotham-Bold';
font-size: 14px;
line-height: 28px;
color: #03444E; }
.page_phong_lan .control .number .total {
font-family: 'iCielGotham-Book';
font-size: 14px;
color: #000000; }
.page_phong_lan .banner {
width: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
position: relative; }
.page_phong_lan .banner:after {
position: absolute;
content: '';
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-phong-lan/phu-banner.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none; }
.page_phong_lan .banner .title {
position: absolute;
left: 8.3333333333%;
bottom: 55px; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .banner .title {
left: 30px;
z-index: 999; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .banner .title {
left: 15px;
bottom: 15px; } }
.page_phong_lan .banner .title p {
margin: 0; }
.page_phong_lan .banner .title p:nth-of-type(1) {
font-family: 'iCielGotham-Bold';
font-size: 36px;
line-height: 55px;
text-transform: uppercase;
background: linear-gradient(90deg, #FAD483 0%, #EFCB80 22.75%, #FFECA8 41.33%, #FFECA7 58.5%, #FFFFC9 77.08%, #FFEDAB 99.83%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .banner .title p:nth-of-type(1) {
font-size: 32px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .banner .title p:nth-of-type(1) {
font-size: 28px;
line-height: 40px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .banner .title p:nth-of-type(1) {
font-size: 23px; } }
.page_phong_lan .banner .title p:nth-of-type(2) {
font-family: 'iCielGotham-Book';
font-size: 36px;
line-height: 36px;
text-transform: uppercase;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
color: #ffffff; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .banner .title p:nth-of-type(2) {
font-size: 32px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .banner .title p:nth-of-type(2) {
font-size: 28px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .banner .title p:nth-of-type(2) {
font-size: 23px; } }
.page_phong_lan .banner .title p:nth-of-type(3) {
font-family: 'iCielGotham-Book';
font-size: 14px;
line-height: 28px;
letter-spacing: 0.15em;
color: #FFFFFF;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 10px;
margin-bottom: 25px; }
@media only screen and (max-width: 480px) {
.page_phong_lan .banner .title p:nth-of-type(3) {
margin-top: 5px;
margin-bottom: 15px; } }
.page_phong_lan .banner .title p:nth-of-type(3) img {
display: block; }
.page_phong_lan .banner .title p:nth-of-type(3) img:nth-of-type(1) {
margin-right: 15px; }
.page_phong_lan .banner .title p:nth-of-type(3) img:nth-of-type(2) {
margin-left: 15px; }
.page_phong_lan .banner .title a {
display: inline-block;
background: linear-gradient(90deg, #FAD483 0%, #EFCB80 22.75%, #FFECA8 41.33%, #FFECA7 58.5%, #FFFFC9 77.08%, #FFEDAB 99.83%);
font-family: 'iCielGotham-Bold';
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
color: #03444E;
padding: 12px 25px;
width: max-content; }
.page_phong_lan .banner .support {
position: absolute;
background: #006A75;
width: 140px;
bottom: 55px;
right: 2.2916666667%;
border-top: 8px solid #FFED00;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0; }
@media only screen and (max-width: 480px) {
.page_phong_lan .banner .support {
left: 50%;
transform: translateX(-50%);
bottom: 37%;
right: auto; } }
.page_phong_lan .banner .support p {
margin: 0; }
.page_phong_lan .banner .support p:nth-of-type(1) {
font-family: 'iCielGotham-Bold';
font-size: 16px;
line-height: 23px;
text-align: center;
text-transform: uppercase;
color: #FFFFFF; }
.page_phong_lan .banner .support p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-weight: 900;
font-size: 32px;
line-height: 38px;
text-transform: uppercase;
color: #FFED00; }
.page_phong_lan .banner .support p:nth-of-type(3) {
font-family: 'iCielGotham-Book';
font-size: 16px;
line-height: 20px;
text-align: center;
color: #FFFFFF; }
.page_phong_lan .banner .decor_banner {
position: absolute;
left: 0;
bottom: 175px; }
@media only screen and (max-width: 480px) {
.page_phong_lan .banner .decor_banner {
width: 35%; } }
@media only screen and (max-width: 1024px) {
.page_phong_lan .banner .decor_banner img {
width: 80%; } }
.page_phong_lan .banner .logo_banner {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 6; }
.page_phong_lan .banner .__phone {
position: absolute;
right: 30px;
top: 26px;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 48px; }
.page_phong_lan .banner .__phone:hover .--text {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
opacity: 1;
pointer-events: all; }
@media only screen and (max-width: 480px) {
.page_phong_lan .banner .__phone {
right: 15px;
top: 55px; } }
.page_phong_lan .banner .__phone .--icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #006A75;
z-index: 9999; }
.page_phong_lan .banner .__phone .--icon img {
display: block;
max-width: 100%;
height: auto;
animation: hotline_social_1 1s infinite ease-in-out; }
.page_phong_lan .banner .__phone .--text {
position: relative;
right: -40px;
font-family: 'iCielGotham-Medium';
font-size: 16px;
line-height: 21px;
text-transform: uppercase;
color: #FFFFFF;
background: linear-gradient(90deg, #FFEA9C 0%, #DDAB33 22.75%, #B27F0A 41.33%, #AE852B 58.5%, #9C7420 77.08%, #936B13 99.83%);
height: 40px;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0px 55px 0px 25px;
z-index: 9999;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
pointer-events: none;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.page_phong_lan .why_choose {
display: flex;
width: 100%;
padding-left: 8.3333333333%;
padding-right: 8.3333333333%;
padding-top: 100px;
padding-bottom: 85px;
position: relative; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .why_choose {
padding: 100px 30px 85px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .why_choose {
flex-direction: column-reverse;
padding-top: 30px;
padding-bottom: 40px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .why_choose {
padding: 30px 15px 40px; } }
.page_phong_lan .why_choose .decor {
position: absolute;
top: 0px;
right: 13px; }
@media only screen and (max-width: 768px) {
.page_phong_lan .why_choose .decor {
width: 30%; } }
.page_phong_lan .why_choose .left {
width: 60%;
position: relative; }
@media only screen and (max-width: 768px) {
.page_phong_lan .why_choose .left {
height: 400px;
width: 100%; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .why_choose .left {
height: 215px; } }
.page_phong_lan .why_choose .left .img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100% !important;
height: 100%;
transition: 0.4s; }
.page_phong_lan .why_choose .left .text {
position: absolute;
width: 31px;
height: 100%;
left: -31px;
top: 0;
background: linear-gradient(349.82deg, #FAD483 -14.54%, #EFCB80 12.41%, #FFECA8 34.41%, #FFECA7 54.75%, #FFFFC9 76.75%, #FFEDAB 103.69%);
display: flex;
align-items: center;
justify-content: center; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .why_choose .left .text {
left: 0; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .why_choose .left .text img {
width: 80%; } }
.page_phong_lan .why_choose .right {
width: 34.1666666667%;
margin-left: 70px;
padding-top: 100px;
padding-bottom: 70px;
position: relative; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .why_choose .right {
margin-left: 40px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .why_choose .right {
width: 100%;
padding-top: 0;
margin-left: 0;
padding-bottom: 30px; } }
.page_phong_lan .why_choose .right .desc_why_choose .swiper-container .swiper-wrapper .swiper-slide {
background-image: none !important; }
.page_phong_lan .why_choose .right .desc_why_choose .swiper-container .swiper-wrapper .swiper-slide .title_detail {
font-family: 'iCielGotham-Bold';
font-size: 18px;
line-height: 28px;
color: #333333;
margin-bottom: 10px; }
.page_phong_lan .why_choose .right .desc_why_choose .swiper-container .swiper-wrapper .swiper-slide .desc_detail {
font-family: 'iCielGotham-Book';
font-size: 15px;
line-height: 24px;
color: #333333; }
.page_phong_lan .why_choose .decor_left {
position: absolute;
bottom: -58px;
left: 0;
z-index: -1; }
.page_phong_lan .utilities {
display: flex;
padding-left: 8.3333333333%;
padding-right: 6.9444444444%;
flex-direction: row;
align-items: center;
position: relative;
margin-top: 100px; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .utilities {
padding: 0 30px;
margin-top: 60px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .utilities {
flex-direction: column-reverse;
margin-top: 30px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .utilities {
padding: 0 15px; } }
.page_phong_lan .utilities .decor_left {
position: absolute;
bottom: -114px;
left: 0;
z-index: -1; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .utilities .decor_left {
bottom: 22px;
left: -39px; }
.page_phong_lan .utilities .decor_left img {
width: 50%; } }
.page_phong_lan .utilities .left {
width: 59.0163934426%; }
@media only screen and (max-width: 768px) {
.page_phong_lan .utilities .left {
width: 100%;
padding-bottom: 30px; } }
.page_phong_lan .utilities .left .img {
width: 100%;
position: relative; }
.page_phong_lan .utilities .left .img img {
width: 100%;
height: auto;
display: block; }
.page_phong_lan .utilities .left .img .item {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.page_phong_lan .utilities .left .img .item span {
font-family: 'iCielGotham-Bold';
font-size: 11px;
line-height: 35px;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
text-transform: uppercase;
color: #000000;
background: #FFED00;
width: 16px;
height: 16px;
position: absolute;
top: 0;
border-radius: 50%; }
.page_phong_lan .utilities .left .img .item span:nth-of-type(1) {
margin-top: 59%;
left: 59%; }
.page_phong_lan .utilities .left .img .item span:nth-of-type(2) {
margin-top: 59%;
left: 75%; }
.page_phong_lan .utilities .left .img .item span:nth-of-type(3) {
margin-top: 45%;
left: 88%; }
.page_phong_lan .utilities .left .img .item span:nth-of-type(4) {
margin-top: 30%;
left: 88%; }
.page_phong_lan .utilities .left .img .item span:nth-of-type(5) {
margin-top: 23%;
left: 73%; }
.page_phong_lan .utilities .left .img .item span:nth-of-type(6) {
margin-top: 25%;
left: 58%; }
.page_phong_lan .utilities .left .img .item span:nth-of-type(7) {
margin-top: 42%;
left: 59%; }
.page_phong_lan .utilities .left .img .item span.is--active {
transform: scale(2); }
.page_phong_lan .utilities .right {
width: 31.1475409836%;
margin-left: 120px; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .utilities .right {
margin-left: 80px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .utilities .right {
width: 100%;
margin-left: 0;
padding-bottom: 20px; } }
.page_phong_lan .utilities .right .desc_utilities {
font-family: 'iCielGotham-Book';
font-size: 15px;
line-height: 24px;
color: #333333; }
.page_phong_lan .utilities .right .detail_utilities {
margin-top: 20px; }
.page_phong_lan .utilities .right .detail_utilities p {
font-family: 'iCielGotham-Bold';
font-size: 16px;
line-height: 28px;
color: #333333;
margin-bottom: 10px; }
.page_phong_lan .utilities .right .detail_utilities ul {
overflow: scroll;
height: 265px; }
.page_phong_lan .utilities .right .detail_utilities ul li {
font-family: 'iCielGotham-Book';
font-size: 14px;
line-height: 28px;
color: #333333;
padding-left: 20px;
position: relative; }
.page_phong_lan .utilities .right .detail_utilities ul li:after {
position: absolute;
content: '';
width: 6px;
height: 6px;
background: #616161;
top: 50%;
transform: translateY(-50%);
left: 0;
border-radius: 50%; }
.page_phong_lan .footer {
background: #342E2F;
display: flex;
flex-direction: row;
padding: 60px 8.3333333333% 70px;
position: relative;
overflow: hidden; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .footer {
padding: 60px 30px 70px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .footer {
flex-direction: column;
padding: 30px 15px 40px; } }
.page_phong_lan .footer .item {
width: 19.1666666667%;
margin-right: 200px; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .footer .item {
width: calc((100% - 70px) / 3);
margin-right: 70px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .footer .item {
width: calc((100% - 40px) / 3);
margin-right: 40px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .footer .item {
width: 100%;
margin-right: 0;
margin-bottom: 30px; } }
.page_phong_lan .footer .item .logo {
display: flex;
flex-direction: row; }
.page_phong_lan .footer .item .logo .logo_1 {
margin-right: 40px;
width: 30%; }
.page_phong_lan .footer .item .logo .logo_2 {
width: 46.0869565217%; }
.page_phong_lan .footer .item .social {
margin-top: 30px; }
.page_phong_lan .footer .item .social p {
font-family: 'iCielGotham-Medium';
font-size: 13px;
line-height: 21px;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 10px; }
.page_phong_lan .footer .item .social .list_social {
display: flex;
flex-direction: row; }
.page_phong_lan .footer .item .social .list_social a {
display: block;
margin-right: 25px; }
.page_phong_lan .footer .address {
width: 20%;
margin-right: 175px; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .footer .address {
width: calc((100% - 70px) / 3);
margin-right: 70px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .footer .address {
width: calc((100% - 40px) / 3);
margin-right: 40px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .footer .address {
width: 100%;
margin-right: 0;
margin-bottom: 15px; } }
.page_phong_lan .footer .address p:nth-of-type(1) {
font-family: 'iCielGotham-Medium';
font-size: 13px;
line-height: 21px;
text-transform: uppercase;
color: #FFED00;
margin-bottom: 20px; }
.page_phong_lan .footer .address p:nth-of-type(2) {
font-family: 'iCielGotham-Book';
font-size: 13px;
line-height: 19px;
color: #FFFFFF;
opacity: 0.75;
margin-bottom: 10px; }
.page_phong_lan .footer .address a {
font-family: 'iCielGotham-Book';
font-size: 13px;
line-height: 19px;
color: #FFFFFF;
opacity: 0.75;
display: block; }
.page_phong_lan .footer .address a span {
font-family: 'iCielGotham-Bold';
font-size: 13px;
line-height: 23px;
color: #FFED00; }
.page_phong_lan .footer .address a:nth-of-type(1) {
margin-bottom: 5px; }
.page_phong_lan .footer .note {
width: 30%;
position: relative;
z-index: 3; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .footer .note {
width: calc((100% - 70px) / 3); } }
@media only screen and (max-width: 768px) {
.page_phong_lan .footer .note {
width: calc((100% - 40px) / 3); } }
@media only screen and (max-width: 480px) {
.page_phong_lan .footer .note {
width: 100%;
margin-right: 0; } }
.page_phong_lan .footer .note p:nth-of-type(1) {
font-family: 'iCielGotham-Medium';
font-size: 13px;
line-height: 21px;
text-transform: uppercase;
color: #FFED00;
margin-bottom: 20px; }
.page_phong_lan .footer .note p:nth-of-type(2) {
font-family: 'iCielGotham-Book';
font-size: 13px;
line-height: 19px;
color: #FFFFFF;
opacity: 0.75;
margin-bottom: 10px; }
.page_phong_lan .footer .decor {
position: absolute;
right: -21px;
bottom: -33px;
z-index: 2; }
.page_phong_lan .copyright {
font-family: 'iCielGotham-Book';
font-size: 11px;
line-height: 21px;
text-align: center;
color: #FFFFFF;
background: #006A75;
padding: 5px 0; }
.page_phong_lan .ground {
padding: 0 8.3333333333%;
margin-top: 90px;
margin-bottom: 100px; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .ground {
padding: 0 30px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .ground {
margin-bottom: 30px;
margin-top: 30px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .ground {
padding: 0 15px;
margin-top: 0; } }
.page_phong_lan .ground .title_why_choose {
text-align: center; }
.page_phong_lan .ground .content_ground {
display: flex; }
@media only screen and (max-width: 768px) {
.page_phong_lan .ground .content_ground {
flex-direction: column; } }
.page_phong_lan .ground .content_ground .left {
width: 30%;
margin-right: 90px; }
@media only screen and (max-width: 768px) {
.page_phong_lan .ground .content_ground .left {
width: 100%; } }
.page_phong_lan .ground .content_ground .left .img_genera {
width: 83.3333333333%; }
@media only screen and (max-width: 768px) {
.page_phong_lan .ground .content_ground .left .img_genera {
width: 35%; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .ground .content_ground .left .img_genera {
display: none; } }
.page_phong_lan .ground .content_ground .left .img_genera img {
width: 100%;
height: auto;
display: block; }
.page_phong_lan .ground .content_ground .left .utilities_ground {
margin-top: 50px; }
@media only screen and (max-width: 768px) {
.page_phong_lan .ground .content_ground .left .utilities_ground {
margin-top: 30px;
margin-bottom: 30px; } }
.page_phong_lan .ground .content_ground .left .utilities_ground .title_utilities {
font-family: 'iCielGotham-Book';
font-size: 28px;
line-height: 35px;
text-align: center;
text-transform: uppercase;
color: #333333; }
.page_phong_lan .ground .content_ground .left .utilities_ground ul {
column-count: 2;
margin-top: 15px; }
.page_phong_lan .ground .content_ground .left .utilities_ground ul li {
display: flex;
flex-direction: row;
align-items: center; }
.page_phong_lan .ground .content_ground .left .utilities_ground ul li span {
width: 16px;
height: 16px;
font-family: 'iCielGotham-Bold';
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
color: #000000;
background: #FFED00;
border-radius: 50%;
margin-right: 13px; }
.page_phong_lan .ground .content_ground .left .utilities_ground ul li p {
font-family: 'iCielGotham-Book';
font-size: 14px;
line-height: 28px;
color: #333333; }
.page_phong_lan .ground .content_ground .right {
width: 60%;
position: relative; }
.page_phong_lan .ground .content_ground .right .item {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none; }
.page_phong_lan .ground .content_ground .right .item span {
position: absolute;
top: 0;
text-transform: uppercase;
color: #000000;
background: #FFED00;
border-radius: 50%;
width: 16px;
height: 16px;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
color: #000000;
font-family: 'iCielGotham-Bold'; }
.page_phong_lan .ground .content_ground .right .item span.number_1-1 {
margin-top: 20%;
left: 66.5%; }
.page_phong_lan .ground .content_ground .right .item span.number_1-2 {
margin-top: 58%;
left: 67%; }
.page_phong_lan .ground .content_ground .right .item span.number_1-3 {
margin-top: 40%;
left: 82%; }
.page_phong_lan .ground .content_ground .right .item span.number_2-1 {
margin-top: 57%;
left: 81%; }
.page_phong_lan .ground .content_ground .right .item span.number_2-2 {
margin-top: 20%;
left: 82%; }
.page_phong_lan .ground .content_ground .right .item span.number_2-3 {
margin-top: 29%;
left: 67%; }
.page_phong_lan .ground .content_ground .right .item span.number_2-4 {
margin-top: 50%;
left: 67%; }
.page_phong_lan .ground .content_ground .right .item span.number_2-5 {
margin-top: 41%;
left: 49%; }
.page_phong_lan .ground .content_ground .right .item span.number_3 {
margin-top: 38%;
left: 65%; }
.page_phong_lan .ground .content_ground .right .item span.number_4-1 {
margin-top: 25%;
left: 68%; }
.page_phong_lan .ground .content_ground .right .item span.number_4-2 {
margin-top: 33%;
left: 67%; }
.page_phong_lan .ground .content_ground .right .item span.number_4-3 {
margin-top: 38%;
left: 62%; }
.page_phong_lan .ground .content_ground .right .item span.number_4-4 {
margin-top: 45%;
left: 67%; }
.page_phong_lan .ground .content_ground .right .item span.number_4-5 {
margin-top: 54%;
left: 67%; }
.page_phong_lan .ground .content_ground .right .item span.number_5 {
margin-top: 45%;
left: 49%; }
.page_phong_lan .ground .content_ground .right .item span.number_6 {
margin-top: 41%;
left: 45%; }
.page_phong_lan .ground .content_ground .right .item span.number_7 {
margin-top: 42%;
left: 53%; }
.page_phong_lan .ground .content_ground .right .item span.number_8 {
margin-top: 45%;
left: 46%; }
.page_phong_lan .ground .content_ground .right .item span.number_9 {
margin-top: 46%;
left: 52%; }
@media only screen and (max-width: 768px) {
.page_phong_lan .ground .content_ground .right {
width: 100%; } }
.page_phong_lan .ground .content_ground .right img {
width: 100%;
height: auto;
display: block; }
.page_phong_lan .ground .content_ground .right .st2 {
opacity: 0; }
.page_phong_lan .ground .content_ground .right .st2.opacity {
opacity: 1; }
.page_phong_lan .ground .js-tooltip-content {
z-index: 1;
display: none;
opacity: 0;
position: absolute;
transform: translate(-50%, -50%);
background-color: #02454B;
text-align: center;
padding: 8px 20px; }
.page_phong_lan .ground .js-tooltip-content.is-visible {
display: block;
opacity: 1; }
.page_phong_lan .ground .js-tooltip-content ._title {
font-family: 'iCielGotham-Bold';
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
color: #FFFFFF; }
.page_phong_lan .ground .js-tooltip-content .dien_tich {
font-family: 'iCielGotham-Book';
font-size: 15px;
line-height: 18px;
color: #FFFFFF; }
.page_phong_lan .ground .js-house-detail .is-for-tooltip ._title {
font-family: 'iCielGotham-Bold';
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
color: #FFFFFF; }
.page_phong_lan .ground .js-house-detail .is-for-tooltip .dien_tich {
font-family: 'iCielGotham-Book';
font-size: 15px;
line-height: 18px;
color: #FFFFFF; }
.popup_lp_phong_lan {
position: fixed;
z-index: 9999;
width: 83.3333333333%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 0; }
@media only screen and (max-width: 1024px) {
.popup_lp_phong_lan {
width: calc(100% - 60px); } }
@media only screen and (max-width: 480px) {
.popup_lp_phong_lan {
width: calc(100% - 30px);
height: 80vh; } }
.popup_lp_phong_lan .popup_content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
padding-left: 10%;
padding-right: 8.3333333333%;
padding-bottom: 20px; }
@media only screen and (max-width: 1024px) {
.popup_lp_phong_lan .popup_content {
padding: 20px 30px 20px; } }
@media only screen and (max-width: 768px) {
.popup_lp_phong_lan .popup_content {
display: flex;
flex-direction: column; } }
@media only screen and (max-width: 480px) {
.popup_lp_phong_lan .popup_content {
padding: 20px 15px; } }
.popup_lp_phong_lan .popup_content .left {
width: 33.6734693878%;
margin-right: 50px; }
@media only screen and (max-width: 1024px) {
.popup_lp_phong_lan .popup_content .left {
margin-right: 30px; } }
@media only screen and (max-width: 768px) {
.popup_lp_phong_lan .popup_content .left {
width: 100%;
margin-right: 0; } }
.popup_lp_phong_lan .popup_content .left .title {
margin-bottom: 15px; }
.popup_lp_phong_lan .popup_content .left .title p:nth-of-type(1) {
font-family: 'iCielGotham-Book';
font-size: 20px;
line-height: 23px;
color: #333333;
text-transform: uppercase; }
.popup_lp_phong_lan .popup_content .left .title p:nth-of-type(2) {
font-family: 'iCielGotham-Bold';
font-size: 22px;
line-height: 23px;
background: #FFED00;
border-radius: 5px;
padding: 3px 5px;
text-transform: uppercase;
display: inline-block; }
@media only screen and (max-width: 768px) {
.popup_lp_phong_lan .popup_content .left .content_left_popup {
display: flex;
flex-direction: row;
justify-content: space-between; } }
@media only screen and (max-width: 480px) {
.popup_lp_phong_lan .popup_content .left .content_left_popup {
flex-direction: column; } }
.popup_lp_phong_lan .popup_content .left .content_left_popup ._text_content {
margin-bottom: 44px; }
@media only screen and (max-width: 768px) {
.popup_lp_phong_lan .popup_content .left .content_left_popup ._text_content {
width: calc((100% - 30px) / 2);
margin-right: 30px; } }
@media only screen and (max-width: 480px) {
.popup_lp_phong_lan .popup_content .left .content_left_popup ._text_content {
width: 100%;
margin-right: 0;
margin-bottom: 20px; } }
.popup_lp_phong_lan .popup_content .left .content_left_popup ._text_content ul li {
font-family: 'iCielGotham-Book';
font-size: 15px;
line-height: 23px;
color: #333333; }
@media only screen and (max-width: 768px) {
.popup_lp_phong_lan .popup_content .left .content_left_popup .img {
width: 30%; }
.popup_lp_phong_lan .popup_content .left .content_left_popup .img img {
width: 100%;
height: auto;
display: block; } }
@media only screen and (max-width: 480px) {
.popup_lp_phong_lan .popup_content .left .content_left_popup .img {
width: 100%; }
.popup_lp_phong_lan .popup_content .left .content_left_popup .img img {
width: 75%;
margin: 0 auto; } }
.popup_lp_phong_lan .popup_content .right {
width: 59.1836734694%; }
@media only screen and (max-width: 768px) {
.popup_lp_phong_lan .popup_content .right {
width: 100%; } }
.popup_lp_phong_lan .popup_content .right .swiper-container .swiper-wrapper .swiper-slide {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative; }
@media only screen and (max-width: 1024px) {
.popup_lp_phong_lan .popup_content .right .swiper-container .swiper-wrapper .swiper-slide {
height: 250px; } }
.popup_lp_phong_lan .popup_content .right .swiper-container .swiper-wrapper .swiper-slide .title {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-family: 'iCielGotham-Medium';
font-size: 15px;
line-height: 23px;
padding-top: 5px; }
@media only screen and (max-width: 768px) {
.popup_lp_phong_lan .popup_content .right .swiper-container .swiper-wrapper .swiper-slide .img_right {
width: 85%; } }
.popup_lp_phong_lan .vinhome {
background-color: #006A75;
text-align: center; }
@keyframes hotline_social_1 {
0% {
transform: rotate(0) scale(1) skew(1deg); }
10% {
transform: rotate(-25deg) scale(1) skew(1deg); }
20% {
transform: rotate(25deg) scale(1) skew(1deg); }
30% {
transform: rotate(-25deg) scale(1) skew(1deg); }
40% {
transform: rotate(25deg) scale(1) skew(1deg); }
50% {
transform: rotate(0) scale(1) skew(1deg); }
100% {
transform: rotate(0) scale(1) skew(1deg); } }
.page_phong_lan .pl-privilege {
padding: 0px 16.6666666667% 85px; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .pl-privilege {
padding: 0px 60px 60px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-privilege {
padding: 0px 15px 40px; } }
.page_phong_lan .pl-privilege .title_why_choose {
text-align: center; }
.page_phong_lan .pl-privilege ._content {
position: relative;
width: 100%; }
.page_phong_lan .pl-privilege ._content .__video {
position: relative;
display: block;
width: 100%;
padding-top: 49.167%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-privilege ._content .__video {
padding-top: 85%;
width: calc(100% - 31px); } }
.page_phong_lan .pl-privilege ._content .__video .--play {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-privilege ._content .__video .--play {
max-width: 45px; } }
.page_phong_lan .pl-privilege ._content .__video .--play img {
display: block;
max-width: 100%;
height: auto;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.page_phong_lan .pl-privilege ._content .__video .--decor {
position: absolute;
top: 0;
bottom: 0;
right: -31px;
width: 31px;
background: linear-gradient(349.82deg, #FAD483 -14.54%, #EFCB80 12.41%, #FFECA8 34.41%, #FFECA7 54.75%, #FFFFC9 76.75%, #FFEDAB 103.69%);
display: flex;
align-items: center;
justify-content: center; }
.page_phong_lan .pl-privilege ._content .__video .--decor img {
display: block;
max-width: 100%;
max-height: 100%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); }
.page_phong_lan .pl-privilege ._content .__video:hover .--play img {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
transform: scale(0.85); }
.page_phong_lan .pl-privilege ._content .__excerpt {
font-family: 'iCielGotham-Book';
font-size: 15px;
line-height: 24px;
text-align: center;
color: #333333;
max-width: 86%;
margin: 25px auto 0px; }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-privilege ._content .__excerpt {
max-width: 100%;
margin-top: 20px; } }
.page_phong_lan .pl-privilege ._content .__excerpt strong, .page_phong_lan .pl-privilege ._content .__excerpt b {
font-family: 'iCielGotham-Bold'; }
.page_phong_lan .pl-location {
position: relative; }
.page_phong_lan .pl-location:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: #464142; }
.page_phong_lan .pl-location ._background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
mix-blend-mode: multiply;
opacity: 0.2; }
.page_phong_lan .pl-location .decor-right, .page_phong_lan .pl-location .decor-left {
position: absolute; }
.page_phong_lan .pl-location .decor-right img, .page_phong_lan .pl-location .decor-left img {
display: block;
max-width: 100%;
height: auto; }
.page_phong_lan .pl-location .decor-right {
max-width: 20%;
right: 0;
bottom: 0; }
.page_phong_lan .pl-location .decor-right img {
margin: 0px 0px 0px auto; }
.page_phong_lan .pl-location .decor-left {
max-width: 22.0138888889%;
left: 0;
top: 0; }
.page_phong_lan .pl-location .decor-left img {
margin: 0px auto 0px 0px; }
.page_phong_lan .pl-location ._content {
position: relative;
z-index: 1;
padding: 105px 8.3333333333% 110px;
display: flex;
align-items: center; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .pl-location ._content {
padding: 80px 30px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-location ._content {
flex-direction: column;
padding: 60px 30px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-location ._content {
padding: 40px 15px; } }
.page_phong_lan .pl-location ._content .__left {
width: 40%;
padding-right: 10%; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .pl-location ._content .__left {
padding-right: 5%; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-location ._content .__left {
padding-right: 0px;
width: 100%;
margin-bottom: 25px; } }
.page_phong_lan .pl-location ._content .__left .title_why_choose {
margin-bottom: 15px; }
.page_phong_lan .pl-location ._content .__left .title_why_choose p:nth-of-type(1) {
color: #ffffff; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-location ._content .__left .title_why_choose p:nth-of-type(1) {
text-align: center; } }
.page_phong_lan .pl-location ._content .__left .title_why_choose p:nth-of-type(2) {
background: linear-gradient(90deg, #B5903A 0%, #CEAF6F 22.75%, #C19536 41.33%, #EFC56B 58.5%, #B78F37 77.08%, #F5CB71 99.83%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: max-content;
width: -webkit-max-content;
width: -moz-max-content;
width: -ms-max-content;
width: -o-max-content; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-location ._content .__left .title_why_choose p:nth-of-type(2) {
margin: 0 auto; } }
.page_phong_lan .pl-location ._content .__left .--desc p {
font-family: 'iCielGotham-Book';
font-size: 15px;
line-height: 24px;
color: #ffffff;
margin-bottom: 15px; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-location ._content .__left .--desc p {
text-align: center;
margin-bottom: 10px; } }
.page_phong_lan .pl-location ._content .__left .--desc p:last-child {
margin-bottom: 0px; }
.page_phong_lan .pl-location ._content .__right {
width: 60%; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-location ._content .__right {
width: 100%; } }
.page_phong_lan .pl-location ._content .__right img {
display: block;
width: 100%;
height: auto; }
.page_phong_lan .pl-agency {
position: relative; }
.page_phong_lan .pl-agency:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: #464142; }
.page_phong_lan .pl-agency ._background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
mix-blend-mode: multiply;
opacity: 0.4; }
.page_phong_lan .pl-agency .decor {
position: absolute;
top: 0;
right: 0;
max-width: 21.0416666667%; }
.page_phong_lan .pl-agency .decor img {
display: block;
max-width: 100%;
height: auto;
margin: 0px 0px 0px auto; }
.page_phong_lan .pl-agency ._content {
position: relative;
z-index: 1;
padding: 60px 8.3333333333% 100px; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .pl-agency ._content {
padding: 60px 30px 80px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-agency ._content {
padding: 60px 30px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-agency ._content {
padding: 40px 15px; } }
.page_phong_lan .pl-agency ._content .title_why_choose {
margin-bottom: 50px; }
.page_phong_lan .pl-agency ._content .title_why_choose p:nth-of-type(1) {
color: #ffffff;
text-align: center; }
.page_phong_lan .pl-agency ._content .title_why_choose p:nth-of-type(2) {
background: linear-gradient(90deg, #B5903A 0%, #CEAF6F 22.75%, #C19536 41.33%, #EFC56B 58.5%, #B78F37 77.08%, #F5CB71 99.83%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: max-content;
width: -webkit-max-content;
width: -moz-max-content;
width: -ms-max-content;
width: -o-max-content;
margin: 0 auto; }
.page_phong_lan .pl-agency ._content .--agency-list {
width: 100%; }
.page_phong_lan .pl-agency ._content .--agency-list .swiper-container {
width: 100%; }
.page_phong_lan .pl-agency ._content .--agency-list .swiper-container .item {
display: flex;
flex-direction: column;
align-items: center; }
.page_phong_lan .pl-agency ._content .--agency-list .swiper-container .item .--icon {
display: flex;
align-items: flex-end;
justify-content: center;
height: 52px;
max-width: 100%; }
.page_phong_lan .pl-agency ._content .--agency-list .swiper-container .item .--icon img {
display: block;
max-width: 100%;
max-height: 100%; }
.page_phong_lan .pl-agency ._content .--agency-list .swiper-container .item .--name {
font-family: 'iCielGotham-Medium';
font-size: 18px;
line-height: 37px;
text-transform: uppercase;
color: #ffffff;
margin: 10px 0px; }
.page_phong_lan .pl-agency ._content .--agency-list .swiper-container .item .--hotline {
display: inline-block;
position: relative;
font-family: 'iCielGotham-Medium';
font-size: 14px;
line-height: 32px;
color: #ffffff;
background: #108996;
border-radius: 32px;
padding: 0px 25px 0px 42px; }
.page_phong_lan .pl-agency ._content .--agency-list .swiper-container .item .--hotline span {
position: absolute;
top: 0;
left: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #006A75;
border-radius: 50%; }
.page_phong_lan .pl-agency ._content .--agency-list .swiper-container .item .--hotline span img {
display: block;
max-width: 100%;
height: auto;
animation: icon_hotline 1s infinite ease-in-out; }
.page_phong_lan .pl-document {
position: relative;
padding: 75px 0px 136px; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-document {
padding: 75px 0px 110px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-document {
padding: 45px 0px 75px; } }
.page_phong_lan .pl-document .decor {
position: absolute;
left: 0;
top: -10px;
max-width: 15.6944444444%; }
.page_phong_lan .pl-document .decor img {
display: block;
max-width: 100%;
height: auto;
margin: 0px auto 0px 0px; }
.page_phong_lan .pl-document .__content {
width: 50%;
margin: 0 auto; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .pl-document .__content {
width: calc(100% - 360px); } }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-document .__content {
width: calc(100% - 150px); } }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-document .__content {
width: calc(100% - 30px); } }
.page_phong_lan .pl-document .__content .--title {
font-family: 'iCielGotham-Bold';
font-size: 16px;
line-height: 44px;
text-transform: uppercase;
color: #ffffff;
background: #0C636D;
text-align: center; }
.page_phong_lan .pl-document .__content ._select_download {
position: relative; }
.page_phong_lan .pl-document .__content ._select_download ._input_text {
position: relative;
width: calc(100% - 170px);
float: left;
height: 36px;
padding-left: 25px;
padding-right: 45px;
background: #E9E9E9;
font-family: 'iCielGotham-Book';
font-size: 14px;
line-height: 36px;
color: #000000;
cursor: pointer;
display: flex;
align-items: center; }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-document .__content ._select_download ._input_text {
width: calc(100% - 120px);
padding-left: 15px; } }
.page_phong_lan .pl-document .__content ._select_download ._input_text:before {
position: absolute;
content: "";
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
width: 12px;
height: 6px;
background-image: url(//starcity.vinhomes.vn/wp-content/themes/vh-star-villas/assets/images/landing-page-phong-lan/document-dropdown.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-repeat: no-repeat; }
.page_phong_lan .pl-document .__content ._select_download ._input_text span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; }
.page_phong_lan .pl-document .__content ._select_download ._text_list {
position: absolute;
left: 0;
width: calc(100% - 170px);
background: #E9E9E9;
display: none;
top: 36px;
overflow: hidden;
box-shadow: 0px 24px 44px -24px #6767677a;
cursor: pointer;
flex-direction: column;
align-items: center;
display: none;
z-index: 1; }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-document .__content ._select_download ._text_list {
width: calc(100% - 120px); } }
.page_phong_lan .pl-document .__content ._select_download ._text_list ._text_item {
display: flex;
align-items: center;
padding: 10px 45px 10px 25px;
font-family: 'iCielGotham-Book';
font-size: 14px;
line-height: 20px;
color: #000000;
min-height: 36px;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.9);
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-document .__content ._select_download ._text_list ._text_item {
padding-left: 15px; } }
.page_phong_lan .pl-document .__content ._select_download ._button_download {
display: flex;
align-items: center;
justify-content: center;
font-family: 'iCielGotham-Medium';
font-size: 15px;
line-height: 36px;
text-transform: uppercase;
color: #ffffff;
background: linear-gradient(90deg, #B5903A 0%, #CEAF6F 22.75%, #C19536 41.33%, #EFC56B 58.5%, #B78F37 77.08%, #F5CB71 99.83%);
cursor: pointer;
width: 170px;
height: 36px;
float: left; }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-document .__content ._select_download ._button_download {
width: 120px; } }
.page_phong_lan .pl-contact {
position: relative;
padding: 0px 8.3333333333% 120px; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .pl-contact {
padding: 0px 60px 80px 30px; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-contact {
padding: 0px 30px 60px 30px; } }
@media only screen and (max-width: 480px) {
.page_phong_lan .pl-contact {
padding: 0px 15px 40px; } }
.page_phong_lan .pl-contact ._content {
display: flex;
align-items: center; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-contact ._content {
flex-direction: column;
align-items: flex-start; } }
.page_phong_lan .pl-contact ._content .__left {
width: 40%;
padding-right: 4%; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .pl-contact ._content .__left {
padding-right: 45px;
width: 50%; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-contact ._content .__left {
width: 100%;
padding-right: 0px;
margin-top: 35px;
order: 2; } }
.page_phong_lan .pl-contact ._content .__left .title_why_choose {
margin-bottom: 0px; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-contact ._content .__left .title_why_choose p:nth-of-type(2) {
text-align: center; } }
.page_phong_lan .pl-contact ._content .__left .--excerpt {
font-family: 'iCielGotham-Book';
font-size: 13px;
line-height: 21px;
color: #2C2C2C;
opacity: 0.75; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-contact ._content .__left .--excerpt {
text-align: center; } }
.page_phong_lan .pl-contact ._content .__left form {
position: relative;
margin-top: 30px; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all .form-group {
flex-direction: column;
padding: 0;
border-bottom: 1px solid rgba(103, 103, 103, 0.4);
border-radius: initial;
height: auto; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all .form-group:last-child {
margin-bottom: 40px; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all .form-group label {
font-family: 'iCielGotham-Medium';
font-size: 11px;
letter-spacing: 0.8px;
text-transform: uppercase;
color: #4F4F4F;
width: 100%;
margin: 0px; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all .form-group input, .page_phong_lan .pl-contact ._content .__left form .form-field-all .form-group textarea {
font-family: 'iCielGotham-Bold';
font-size: 14px;
line-height: 22px;
letter-spacing: 0.57px;
color: #03444E;
width: 100%;
height: 35px;
padding: 0; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all .form-group textarea {
outline: none;
border: initial;
resize: none;
height: 50px; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all .form-group .text {
display: flex;
align-items: flex-end;
width: 100%;
margin-bottom: 7px; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all .form-group .text .note {
display: flex;
font-family: 'iCielGotham-Book';
font-size: 11px;
letter-spacing: 0.5px;
color: #3D3D3D;
opacity: 0.75;
white-space: nowrap; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all .form-group .text .note #max_charactor {
margin-right: 3px; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all button {
position: relative;
padding: 0px 25px;
height: 40px;
font-family: 'iCielGotham-Medium';
font-size: 13px;
letter-spacing: 0.529286px;
text-transform: uppercase;
color: #ffffff;
outline: none;
cursor: pointer;
border: none;
background: linear-gradient(90deg, #B5903A 0%, #CEAF6F 22.75%, #C19536 41.33%, #EFC56B 58.5%, #B78F37 77.08%, #F5CB71 99.83%);
overflow: hidden;
margin-bottom: 10px; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-contact ._content .__left form .form-field-all button {
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%); } }
.page_phong_lan .pl-contact ._content .__left form .form-field-all button span {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all button span:before {
position: absolute;
content: '';
top: -78px;
left: 0;
width: 110%;
height: 65%;
background-color: rgba(255, 255, 255, 0.4);
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
-moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -150%, 0);
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out; }
.page_phong_lan .pl-contact ._content .__left form .form-field-all button:hover span:before {
-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 350%, 0);
-moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 350%, 0);
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 350%, 0); }
.page_phong_lan .pl-contact ._content .__left form .form_pl_message {
font-family: 'iCielGotham-Medium';
font-size: 14px;
color: #03444E; }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-contact ._content .__left form .form_pl_message {
text-align: center; } }
.page_phong_lan .pl-contact ._content .__right {
position: relative;
width: 60%;
padding-top: 44%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }
@media only screen and (max-width: 1024px) {
.page_phong_lan .pl-contact ._content .__right {
width: 50%;
padding-top: 54%; } }
@media only screen and (max-width: 768px) {
.page_phong_lan .pl-contact ._content .__right {
width: calc(100% - 31px);
order: 1; } }
.page_phong_lan .pl-contact ._content .__right .--decor {
position: absolute;
top: 0;
bottom: 0;
right: -31px;
width: 31px;
background: linear-gradient(349.82deg, #FAD483 -14.54%, #EFCB80 12.41%, #FFECA8 34.41%, #FFECA7 54.75%, #FFFFC9 76.75%, #FFEDAB 103.69%);
display: flex;
align-items: center;
justify-content: center; }
.page_phong_lan .pl-contact ._content .__right .--decor img {
display: block;
max-width: 100%;
max-height: 100%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg); }
@keyframes icon_hotline {
0% {
transform: rotate(0); }
10% {
transform: rotate(-25deg); }
20% {
transform: rotate(25deg); }
30% {
transform: rotate(-25deg); }
40% {
transform: rotate(25deg); }
50% {
transform: rotate(0); }
100% {
transform: rotate(0); } }