/*!
 * Start Bootstrap - Freelancer v5.0.1 (https://startbootstrap.com/template-overviews/freelancer)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-freelancer/blob/master/LICENSE)
 */
@charset "UTF-8";

body {
  font-family: '微软雅黑', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'Lato';
  
}
.clear{
clear:both;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: '微软雅黑', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'Montserrat';
}

hr.star-light,
hr.star-dark {
  max-width: 15rem;
  padding: 0;
  text-align: center;
  border: none;
  border-top: solid 0.25rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  margin-left: auto;
  margin-right: auto;
}

hr.star-light:after,
hr.star-dark:after {
  position: relative;
  top: -.8em;
  display: inline-block;
  padding: 0 0.25em;
  content: '\f005';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
}

hr.star-light {
  border-color: #fff;
}

hr.star-light:after {
  color: #fff;
  background-color: #7251a2;
}

hr.star-dark {
  border-color: #2C3E50;
}

hr.star-dark:after {
  color: #2C3E50;
  background-color: white;
}

.videoWrapper, .videowrapper, .youtubeVideo{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}

.videoWrapper iframe, .videowrapper iframe, .youtubeVideo iframe,
.videoWrapper object, .videowrapper object, .youtubeVideo object,
.videoWrapper embed, .videowrapper embed , .youtubeVideo embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.facebook-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.facebook-responsive2 {
    overflow:hidden;
    padding-bottom:178%;
    position:relative;
    height:0;
}

.facebook-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.facebook-responsive2 iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

video {
  width: 100% !important;
  height: auto !important;
}

section {
  padding: 2.5rem 0;
}

section h2 {
  font-size: 2.25rem;
  line-height: 2rem;
}

.container p{
padding:0;
margin:0;
margin-bottom:15px;
}

#mapHolder{
height:500px;
width:100%;
position:relative;
margin-top:10px;
}

.fbLoginButton{
display:block;
height:48px;
background:url(../images/fbbutt.png) no-repeat center center;
}

.googleLoginButton{
display:block;
height:48px;
background:url(../images/googlebutt.png) no-repeat center center;
}

.container ul, .container ol{
margin:0;
padding:0;
margin-left:20px;
}

@media (min-width: 992px) {
  section h2 {
    font-size: 3rem;
    line-height: 2.5rem;
  }
}

.btn-xl {
  padding: 1rem 1.75rem;
  font-size: 1.25rem;
}

.btn-social {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.25rem;
  line-height: 2rem;
}

.scroll-to-top {
  z-index: 2;
  right: 1rem;
  bottom: 4rem;
  display: none;
}

.scroll-to-top a {
  width: 3.5rem;
  height: 3.5rem;
  background-color: rgba(33, 37, 41, 0.5);
  line-height: 3.1rem;
}

.checkoutBox{
position:fixed;
top:70px;
left:0;
z-index:4;
}

.checkoutBox .number{
background:red;
color:#fff;
border-radius:17px;
width:34px;
height:34px;
position:absolute;
right:-1px;
top:9px;
line-height:34px;
text-align:center;
font-size:.9em;
}

#mainNav {
font-weight: 700;
font-family: '微软雅黑', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'Montserrat';
}

#mainNav .xmas{
height:75px;
width:100%;
display:block;
z-index:9;
position:absolute;
left:0;
bottom:-60px;
background-image:url(../images/top-cny-2020-2.png);
background-position:left top;
background-repeat:repeat-x;
}

#mainNav .navbar-brand {
color: #fff;
width:220px;
overflow:hidden;
font-size: .8em;
}

#mainNav .navbar-nav {
  font-size:.9em;
}

#mainNav .navbar-nav li.nav-item a.nav-link {
  color: #fff;
}

#mainNav .navbar-nav li.nav-item a.nav-link:hover {
  color: yellow;
}

#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
  color: #fff;
}

#mainNav .navbar-nav li.nav-item a.nav-link.active {
  color: yellow;
}

#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.8rem;
}

#mainNav .pmMe{
  position: absolute;
  z-index:99;
  right:0;
  bottom:0;
  margin-bottom:-40px;
  color:yellow;
  float:right;
  font-weight:bold;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
    transition: padding-top 0.3s, padding-bottom 0.3s;
  }
  #mainNav .navbar-brand {
    font-size: 1.1em;
    -webkit-transition: font-size 0.3s;
    transition: font-size 0.3s;
	width:350px;
  }
  #mainNav .navbar-nav {
    margin-top: 0;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
    color: #fff;
    background: #7251a2;
  }
  #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
    color: #fff;
    background: #7251a2;
  }
  #mainNav.navbar-shrink {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

header.masthead {
padding-top: calc(2rem + 72px);
padding-bottom: 1.5rem;
background-position:center 65px;
background-repeat:no-repeat;
}

.cnytop{
left:0;
top:65px;
height:178px;
width:100%;
display:block;
z-index:2;
position:absolute;
background-image:url(../images/hero-cny-top.png);
background-position:center top;
background-repeat:no-repeat;
}

.addFav{
position:absolute;
top:0;
right:15px;
z-index:1;
color:#fff;
font-size:2em;
text-decoration:none;
width:45px;
height:45px;
padding:7px 0;
text-align:center;
border:1px solid #333;
}

.addFav.blue{
background:#2989d8;
}

.addFav.green{
background:#9bc90d;
}

.addFav.orange{
background:#f79e05;
}

.addFav:hover, .addFav.favSelected{
color:red;
text-decoration:none;
}

header.masthead h1 {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

header.masthead h2 {
  font-size: 1.2rem;
  font-family: '微软雅黑', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'Montserrat';
}

@media (min-width: 992px) {
	header.masthead {
		padding-bottom: 2rem;
		background-position:center 90px;
	}
	.cnytop{
		top:90px;
	}
	header.masthead h1 {
		font-size: 2em;
		line-height: 2rem;
	}
	header.masthead h2 {
		font-size: 1.5rem;
	}
}

.portfolio .portfolioBox {
margin-bottom:15px;
}

.portfolio .portfolio-item {
position: relative;
display: block;
}

.portfolio .itemTitle{
display:block;
line-height:20px;
height:50px;
overflow:hidden;
font-size:.8em;
text-align:left;
padding:4px 5px;
background:#cbcdcc;
}

.portfolio .portfolio-item .noOfItem{
/* float:right;
position:absolute;
right:0;
padding:0 5px;
top:-34px;
color:#d01a1a;
font-size:1em;
line-height:34px;
font-weight:bold;
text-shadow: 1px 1px #fff;
z-index:2; */
}

.portfolio .portfolio-item .noOfItem{
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.portfolio .portfolio-item .noOfItem span {
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  padding:2px 0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 17px; left: -21px;
}

.portfolio .portfolio-item .noOfItem span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.portfolio .portfolio-item .noOfItem span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.portfolio .portfolio-item .noOfItem.blue span::before{
  border-left: 3px solid #1e5799;
  border-top: 3px solid #1e5799;
}

.portfolio .portfolio-item .noOfItem.blue span::after{
  border-right: 3px solid #1e5799;
  border-top: 3px solid #1e5799;
}

.portfolio .portfolio-item .noOfItem.green span::before{
  border-left: 3px solid #79A70A;
  border-top: 3px solid #79A70A;
}

.portfolio .portfolio-item .noOfItem.green span::after{
  border-right: 3px solid #79A70A;
  border-top: 3px solid #79A70A;
}

.portfolio .portfolio-item .noOfItem.orange span::before{
  border-left: 3px solid #8F5408;
  border-top: 3px solid #8F5408;
}

.portfolio .portfolio-item .noOfItem.orange span::after{
  border-right: 3px solid #8F5408;
  border-top: 3px solid #8F5408;
}

.portfolio .portfolio-item .noOfItem.blue span{
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
}

.portfolio .portfolio-item .noOfItem.green span{
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
}

.portfolio .portfolio-item .noOfItem.orange span{
  background: linear-gradient(#F79E05 0%, #8F5408 100%);
}

.portfolio .portfolio-item .portfolio-item-caption {
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  opacity: 0;
  background-color: rgba(24, 188, 156, 0.9);
}

.portfolio .portfolio-item .portfolio-item-caption:hover {
  opacity: 1;
}

.portfolio .portfolio-item .portfolio-item-caption .portfolio-item-caption-content {
  font-size: 1.5rem;
}

.portfolio-modal .portfolio-modal-dialog {
  padding: 1rem 0;
  min-height: calc(100vh - 1rem);
  margin: 1rem calc(1rem - 8px);
  position: relative;
  z-index: 2;
  -webkit-box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 3rem 1rem rgba(0, 0, 0, 0.5);
}

.portfolio-modal .portfolio-modal-dialog .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index:9999;
}

.portfolio-modal .portfolio-modal-dialog .close-button i {
  line-height: 25px;
}

.mfp-close{
display:none !important;
}

.portfolio-modal .portfolio-modal-dialog h2 {
  font-size: 2rem;
}
.floating-label-form-group {
  position: relative;
  border-bottom: 1px solid #e9ecef;
}

.floating-label-form-group input,
.floating-label-form-group textarea {
  font-size: 1.5em;
  position: relative;
  z-index: 1;
  padding-right: 0;
  padding-left: 0;
  resize: none;
  border: none;
  border-radius: 0;
  background: none;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.floating-label-form-group label {
  font-size: 0.85em;
  line-height: 1.764705882em;
  position: relative;
  z-index: 0;
  top: 2em;
  display: block;
  margin: 0;
  -webkit-transition: top 0.3s ease, opacity 0.3s ease;
  transition: top 0.3s ease, opacity 0.3s ease;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
}

.floating-label-form-group:not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #e9ecef;
}

.floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}

.floating-label-form-group-with-focus label {
  color: #7251a2;
}

form .row:first-child .floating-label-form-group {
  border-top: 1px solid #e9ecef;
}

.footer {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: #2C3E50;
  color: #fff;
}

.footer a{
  color: #fff;
}

.copyright {
  background-color: #1a252f;
}

.btn {
  border-width: 2px;
}

.bg-primary {
  background-color: #7251a2 !important;
}

.bg-secondary {
  background-color: #2C3E50 !important;
}

.text-primary {
  color: #7251a2 !important;
}

.text-secondary {
  color: #2C3E50 !important;
}

.btn-primary {
  background-color: #7251a2;
  border-color: #7251a2;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #128f76;
  border-color: #128f76;
}

.btn-secondary {
  background-color: #2C3E50;
  border-color: #2C3E50;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: #1a252f;
  border-color: #1a252f;
}

.reviewRate{
display:block;
margin:9px auto;
padding:15px 5px;
width:310px;
background-color:rgba(0,0,0,0.2);
-moz-box-shadow:    inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow:         inset 0 0 3px #333;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.reviewRate a{
color:yellow;
font-size:1.3em;
line-height:24px;
text-decoration:none;
}

.reviewRate .rateStart{
font-size:2em;
line-height:40px;
color:#57f6f6;
}

@keyframes blinker { to { opacity: 0; } }

.blinkArrow{
animation: blinker 0.2s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.rateBlock{
padding:23px 10px 23px 10px;
}

.rateBlock .btn-primary{
float:right;
}

.searchBlock{
float:left;
width:100%;
background-color:#654791;
-moz-box-shadow:    inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow:         inset 0 0 3px #333;
padding:14px 0;
margin-bottom:20px;
}

.searchBlock .btn-primary{
background-color:#a2a2a2;
}

.reviewBlock{
float:left;
width:100%;
background-color:#654791;
-moz-box-shadow:    inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow:         inset 0 0 3px #333;
padding:14px 0;
margin-bottom:20px;
}

.reviewList{
clear:both;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow:    inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow:         inset 0 0 3px #333;
background:#fff;
border:3px solid #7251a2;
padding:5px 8px;
color:#000;
font-size:.9em;
}

.reviewList .star{
font-size:1.1em;
color:red;
}

.aboutBlock ul, .aboutBlock ol{
margin-left:20px;
}

.editSection{
position:relative;
line-height:34px;
}

.editPage{
position:absolute;
right:0;
top:0;
font-size:18px;
}

.editPage [class^="page_"]{
color:#72f412;
}

.editPage [class^="page_"]:hover{
color:red;
}

.editPageForm .editmore{
position:absolute;
right:8px;
bottom:0;
}


.thumbImages{
overflow: auto;
position: relative;
padding: 4px;
background: #333;
margin: 5px auto;
width: 100%;
height: 70px;
}

.thumbImages ul{
list-style:none;
margin:0;
padding:0;
margin:1px 2px;
}

.thumbImages ul li{
float:left;
margin:0;
padding:0;
margin: 0 1px;
}

.thumbImages li a{
display:block;
width:60px;
height:60px;
border: 1px solid #f1f1f1;
}

.thumbImages .active a, .thumbImages li a:hover{
border: 1px solid yellow;
}

.thumbImages .active a{
border: 1px solid cyan;
}

.heroQRCodeBanner{
float:left;
width:100%;
background:yellow;
border-radius:8px;
margin-bottom:10px;
}

.heroQRCodeBanner center{
border:8px solid #000;
border-radius:5px;
}

.atss{
z-index:11 !important;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #7251a2;
  z-index: 9999;
  text-align:center;
}

#preloader #status {
  position: relative;
  width:100%;
  top:25%;
  left:0;
  height:320px;
}

#preloader .circleLoad{
 border: 10px solid #ccc;
  border-radius: 50%;
  border-top: 10px solid #22a211;
  width: 320px;
  height: 320px;
  margin:auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

.checkoutLogin.innerLogin .form-group{
margin-left:0;
margin-right:0;
}

.checkoutLogin.innerLogin .btn{
margin-left:15px;
margin-right:0;
}

.checkoutLogin.innerLogin .buttonReviewClass{
margin-right:15px;
margin-left:0;
}

.checkoutLogin.innerLogin .form-group.fieldBecomeMember{
margin-left:-15px;
margin-right:-15px;
}

.rewardtip{
color:#333;
}

p.availableBlock{
margin:0 auto;
margin-top:-20px;
font-size:1.1em;
width:120px;
text-align:center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding:0 0 0 10px;
z-index:4;
position:relative;
}

.availableBlock .fa-power-off{
float:right;
line-height:26px;
margin-left:5px;
padding:0 5px;
background-color:rgba(0,0,0,0.3);
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

.availableBlock.on{
background:#0bc574;
}

.availableBlock.off{
background:#e53433;
}
.availableStatus{
font-size:1em;
color:#fff;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@media (max-width: 420px) {
	.portfolio .portfolioBlock{
		margin-left:-5px;
		margin-right:-5px;
	}
	.portfolio .portfolioBox.col-6{
		padding-left:5px;
		padding-right:5px;
	}
	.portfolio .portfolioBox .addFav{
		right:5px;
		font-size:1.15em;
		width:32px;
		height:32px;
	}
}

@media (max-width: 320px) {
	#mainNav .navbar-brand {
	  width:185px;
	}
}

@media (min-width: 768px) {
	.portfolio-modal .portfolio-modal-dialog {
		min-height: 100vh;
		padding: 2rem;
		margin: 2rem calc(3rem - 8px);
	}
	.portfolio-modal .portfolio-modal-dialog h2 {
		font-size: 3rem;
	}
}

@media (max-width: 1030px) {
	.portfolio .portfolioBlock{
		margin-left:-5px;
		margin-right:-5px;
	}
	.portfolio .portfolioBox.col-md-4{
		padding-left:5px;
		padding-right:5px;
	}
	.portfolio .portfolioBox .addFav{
		right:5px;
		font-size:1.6em;
		width:40px;
		height:40px;
	}
}