@charset "utf-8";
/* CSS Document */
html, body { position: relative; height: 100%;}
body { overflow: auto; border-style: solid; border-color: #fff; border-width: 40px 110px 40px 40px;}

.wrapper { width: 100%; height: 100%; overflow: hidden;}
.overlay { position: fixed; z-index: auto; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0;}
.overlay.animate { z-index: 990; opacity: 0.85;}
.hide-lg { display: none;}

.white-box { background-color: #fff; border-radius: 10px; box-shadow: 0 10px 10px rgba(0,0,0,0.1);}
.green-box { background-color: #00B285; border-radius: 10px; box-shadow: 0 10px 10px rgba(0,178,133,0.1);}

a { text-decoration: none; transition: 0.3s;}



/* Home */
#logo { position: fixed; right: 0; top: 0; z-index: 900; padding: 60px 30px 0;}
#logo h1 { position: relative; margin: 0; padding: 0; width: 50px; height: 50px;}
#logo a:before,
#logo a:after { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; opacity: 0.65; display: block; content: ""; border: 1px solid #41DA7F; border-radius: 100%; box-sizing: border-box;}
#logo a:before { -webkit-animation: 1s videomodule-anim linear infinite; animation: 1s videomodule-anim linear infinite;}
#logo a:after { -webkit-animation: 2s videomodule-anim linear infinite; animation: 2s videomodule-anim linear infinite;}
#logo a { position: relative; display: block; width: 100%; height: 100%; background: url("../images/logo-icon.png") no-repeat center center; background-size: contain; border: 1px solid #41DA7F; border-radius: 100%; outline: none;}


#header { position:fixed; left: 30px; right: auto; top: 30px; z-index: 899; padding: 10px;}
#header button[class*="btn-"],
#header button[class^="btn-"]
#header a[class*="btn-"],
#header a[class^="btn-"] { padding: 0 10px; font-size: 30px; color: #fff; background: none; border: none; opacity: 1; transition: 0.3s;}
#header button[class*="btn-"]:hover,
#header button[class^="btn-"]:hover,
#header a[class*="btn-"]:hover,
#header a[class^="btn-"]:hover { opacity: 0.6;}
#header h1 { font-size: 2rem; color: #fff;}

#social { position: fixed; left: 40px; top: 40px; z-index: 899; padding: 20px;}
#social button[class*="btn-"],
#social button[class^="btn-"]
#social a[class*="btn-"],
#social a[class^="btn-"] { padding: 0 10px; font-size: 30px; color: #00B285; background: none; border: none; opacity: 1; transition: 0.3s;}
#social button[class*="btn-"]:hover,
#social button[class^="btn-"]:hover,
#social a[class*="btn-"]:hover,
#social a[class^="btn-"]:hover { opacity: 0.6;}


#footer { position: fixed; right: 0; top: 0; bottom: 0; z-index: 899;}
#footer .flex-box { position: relative; top: 50%; transform: translateY(-65%); width: 110px; flex-direction: column; justify-content: center; align-items: center;align-content:center; box-shadow: none;}
#footer .flex-box a,
#footer .flex-box .icon,
#footer .flex-box small { display: block; text-align: center; text-decoration: none;}
#footer .flex-box a { padding: 10px; color: #888;}
#footer .flex-box a:hover { color: #00B285;}
#footer .flex-box a.now { color: #00B285;}
#footer .flex-box .icon { font-size: 40px;}

#footer .submenu-lost { display: block; position: fixed; left: 0; right: 80px; bottom: 0; transform: translateY(100%); transition: 0.3s; opacity: 0;}
#footer .submenu-lost.animate { transform: translateY(0%); opacity: 1;}
.submenu-lost .submenu-top { display: none;}
#footer .submenu-lost .submenu-content { padding: 0 0 2rem; background-color: #fff;}
#footer .submenu-lost .submenu-content a { display: block; line-height: 4rem;}


#copyright { position: fixed; z-index: 10; right: 0; bottom: 30px; padding: 30px; font-size: 10px; color: #888; /*transform: rotate(90deg)*/}
#copyright p { margin: 0; padding: 0; /*transform:translate(-50%,-100%);*/}


#asideNav { position: fixed; z-index: 999; left: 0; top: 0; bottom: 0; width: 320px; background-color: #fff; background-image: url("../img/aside-bg.png");
	transform: translateX(-100%);
	-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#asideNav.animate{
	transform: translateX(0%);
	box-shadow: 10px 0 30px rgba(0,0,0,0.15);
}
.asideHeader { padding: 20px 15px 10px; background-color: #fff; line-height: 20px; border-bottom: 1px solid #eee;}
.asideHeader h3 { display: inline; font-size: 2rem; font-weight: normal; color: #bbb;}
.asideHeader a.btn-add { float: right; color: #00B285; text-decoration: none;}

.asideContent { padding: 15px;}
.asideContent ul { position:relative;}
.asideContent ul li {
	-webkit-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 800ms cubic-bezier(0.000, 0.995, 0.990, 1.000);	
}
#asideNav.animate .asideContent ul li:nth-of-type(1){transition-delay: 0.0s;}
#asideNav.animate .asideContent ul li:nth-of-type(2){transition-delay: 0.06s;}
#asideNav.animate .asideContent ul li:nth-of-type(3){transition-delay: 0.12s;}
#asideNav.animate .asideContent ul li:nth-of-type(4){transition-delay: 0.18s;}
#asideNav.animate .asideContent ul li:nth-of-type(5){transition-delay: 0.24s;}

.asidePetList,
.asidePetList li { margin: 0 0 15px 0; padding: 0; list-style: none;  align-items: center;}
.asidePetList li img { display: block; width: 50px; border-radius: 100%;}
.asidePetList li span { display: inline-block; padding-left: 10px;}


.asideFooter { position: absolute; bottom: 0; padding: 10px 15px; width: 100%; background-color: #fff; border-top: 1px solid #eee;}
.asideFooter a { display: block; color: #00B285; text-decoration: none;}
.asideFooter a .icon { margin-right: 5px;}

/* Qrcode */
.popQrcode { position: fixed; z-index: auto; left: 0; top: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden;
	-webkit-transition: 0.3s;
	   -moz-transition: 0.3s;
        -ms-transition: 0.3s;
         -o-transition: 0.3s;
            transition: 0.3s;
}
.popQrcode.animate { height: 100%; opacity: 1; z-index: 999; visibility: visible;}
.popQrcode .imgBox { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%)}

/* 首頁 */
#homeBox { width: 100%; height: 100%; background-color: #00b285;}
#home-banner { width: 100%; height: 100%; border-radius: 20px;}
#home-banner .swiper-slide {
	text-align: left;
	font-size: 18px;
	border-radius: 20px;
	
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: left;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	
	/* Backround */
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.banner-bg-1 { background-image: url("../img/banner-1.jpg");}
.banner-bg-2 { background-image: url("../img/banner-2.jpg");}
.banner-bg-3 { background-image: url("../img/banner-3.jpg");}
.banner-bg-4 { background-image: url("../img/banner-4.jpg");}

#home-banner .swiper-slide div.content { padding-left: 90px;}

#home-banner h2,
#home-banner h4,
#home-banner p { margin: 0; padding: 0; font-family: "Roboto Condensed"; line-height: 1.2; color: #00B285;}
#home-banner h2 { font-size: 70px; font-weight: lighter;}
#home-banner h4 { font-size: 36px;}
#home-banner p { font-size: 30px; font-weight: lighter;}

#home-banner .btn { margin-top: 40px; padding: 5px 45px; font-family: "Roboto Condensed";  font-size: 24px; border: 2px solid #00B285; border-radius: 100em;}
#banner-pagination { left: 130px; bottom: 20px;}

.content-feature { position: fixed; z-index: 991; left: 40px; top: 40px; right: 110px; bottom: 40px; opacity: 0; visibility: hidden;

	color: #fff;
	background: url("../img/background-feature.jpg") no-repeat center center; background-size: cover; border-radius: 20px;
	
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: left;
	justify-content: left;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-transition: 0.3s;
	   -moz-transition: 0.3s;
        -ms-transition: 0.3s;
         -o-transition: 0.3s;
            transition: 0.3s;
}
.content-feature.animate { opacity: 1; z-index: 999; visibility: visible;}
.content-feature > div { padding: 0 0 0 90px;}
.content-feature > div h2 { font-size: 35px;}
.content-feature > div h2 strong { font-size: 50px;}
.content-feature > div h2 span { display: inline-block; padding-bottom: 10px; font-size: 40px; background: url("../img/line-wave.png") repeat-x left bottom;}
.content-feature > div h4 { margin-bottom: 20px; line-height: 1.4;}

.feature-meta { position: relative; padding-top: 5px; padding-left: 70px; text-shadow: 1px 1px rgba(0,0,0,0.3);}
.feature-meta em { position: absolute; left: 0; top: 0; display: block; width: 50px; height: 50px; border: 1px solid rgba(255,255,255,0.65); border-radius: 100%;
	font-family: "Roboto Condensed"; font-size: 30px; text-align: center; line-height: 50px; font-style: normal;
}
.feature-meta h3 { margin: 0 0 10px 0; padding: 0; color: #FF6; line-height:}
.feature-meta p {}

.btn-feature { position: absolute; right: 20px; bottom: 20px; z-index:999;}
.btn-green { padding: 10px 25px; color: #fff; border: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.35);
	background: -moz-linear-gradient(top, #48DF85 0%, #00B285 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#48DF85), color-stop(100%,#00B285));
    background: -webkit-linear-gradient(top, ##48DF85 0%,#00B285 100%);
    background: -o-linear-gradient(top, #48DF85 0%,#00B285 100%);
    background: -ms-linear-gradient(top, #48DF85 0%,#00B285 100%);
    background: linear-gradient(to bottom, #48DF85 0%,#00B285 100%);
}
.btn-green:hover { opacity: 0.65; color: #fff;}

.btn-feature.open .btn-green { background: #fff; color: #00B285;}

/* 訂購 */
#pageBox { position: relative; min-height: 100%; padding-top: 120px; background-color: #f4f4f4; border-radius: 20px;}


.pageContent { position: absolute; left: 0; top: 120px; bottom: 30px; padding: 0 30px; width: 55%; overflow: auto;}

.nav-steps { background-color: #fff; text-align: center; border-radius: 10px;}
.nav-steps em { padding: 10px 0; display: inline-block; margin-right: 10px; font-style: normal; opacity: 0.6;}
.nav-steps .active { background-color: #00b285; color: #fff; border-radius: 10px 0 0 10px;}
.nav-steps .done { background-color: #f6f6f6; color: #00b285;}

#orderType { margin: 0 auto; width: 40%;}
.order-left,
.order-right { position: relative; top: 0;}
.order-left { left: 0; width: 50%;transform: translate(0,30%);}
.order-right { position: absolute; right: 0; width: 40%; transform: translate(-20%,50%);}

.orderTag { position: relative;}
.BigTag { margin: 0 auto; max-width: 370px;}
.SmallTag { margin: 0 auto; max-width: 270px;}

.orderImg { }
.order-meta { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center;}
.order-meta .form-item { margin-bottom: 5px;}
.order-meta .form-item input.form-control { display: block; margin: 0; padding: 5px; width: 100%; background-color: #f4f4f4; font-size: 16px; text-align: center; border-radius: 10px; border: none; outline: none; box-shadow: inset 0 2px 6px rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.3);}
.order-meta .order-number { font-size: 1.2rem; color: #888;}

.BigTag .order-name.font-big { font-family: "VisbyRoundCF-Boe64e7af9a1a2bb"; font-size: 48px; font-weight: 700; line-height: 1;}
.BigTag .order-tel.font-big { font-family: "VisbyRoundCF-Boe64e7af9a1a2bb"; font-size: 20px; line-height: 1.4;}
.SmallTag .order-name.font-big { font-family: "VisbyRoundCF-Boe64e7af9a1a2bb"; font-size: 24px; font-weight: 700; line-height: 1;}
.SmallTag .order-tel.font-big { font-family: "VisbyRoundCF-Boe64e7af9a1a2bb"; font-size: 16px; line-height: 1.4;}

.order-form { position: absolute; left: 50%; bottom: 0; text-align: center;}
.order-petBig-bg .order-form { transform: translate(-50%,40%);}
.order-petSmall-bg .order-form { transform: translate(-50%,40%);}
.order-form .button { padding: 5px 25px; font-size: 1.6rem; border: none; border-radius: 1rem; box-shadow: 0 10px 10px rgba(0,0,0,0.1);}
.order-form p { line-height: 2;}

#cardOptions { margin-bottom: 30px; width: auto;}
#cardOptions .form-item { padding: 10px 5px 10px 10px; line-height: 20px; border-bottom: 1px solid #efefef;}
#cardOptions .form-item:last-child { border-bottom: none;}
#cardOptions .form-item label { display: inline-block; color: #00B285; font-size: 18px; font-weight: bold; line-height: 30px;}
#cardOptions .form-item small { color: #bbb; font-size: 14px; font-weight: normal;}

.Spinner a { display: inline-block; padding: 0 5px; text-decoration: none; color: #00B285;}
.Spinner .Amount { display: inline-block; margin: 0; padding: 0; width: 50px; height: 30px; font-size: 16px; color: #00B285; text-align: center; border: 2px solid #00b285; border-radius: 100px; box-sizing: border-box; box-shadow: none;}

#cardTotal { position: fixed; bottom: 30px; left: 30px; right: 80px; padding: 10px 100px; color: #fff; border-radius: 0;}
#cardTotal .button { margin: 0; padding: 0 10px; font-size: 18px; line-height: 2; font-weight: 600;}
#cardTotal .orderPrice { padding-left: 10px; font-size: 18px; line-height: 2;}

.button-more { margin-bottom: 30px;}
.button-order-more { padding: 10px; border-radius: 10px; font-size: 16px; line-height: 20px;}
.coupon-box { padding: 1rem;}
.coupon-box label { margin-right: 20px; color: #888; line-height: 30px;}
.coupon-box .form-control { display: block; margin: 0; padding: 3px; width: 100%; background-color: #efefef; font-size: 16px; color: #00b285; text-align: center; line-height: 24px; border-radius: 5px; border: none; outline: none;}
.coupon-box .form-control:focus,
.coupon-box .form-control:active { background-color: #00b285; color: #fff; box-shadow: inset 0 0 10px rgba(0,0,0,0.15);}

center.mar-bottom-20.pad-lr-10 { margin-bottom: 40px;}

.orderBox { display: table; width: 100%; vertical-align: middle;}
.orderList { display: table-cell; float: left; width: 33.333333%; padding: 0 15px;}

/* 登錄 */
.search-form { margin: 20px 0; padding: 5px;}
.search-form .form-control { display: block; width: 100%; margin: 0; padding: 5px; height: 40px; font-size: 16px; border: none; border-radius: 5px; box-sizing: border-box; box-shadow: inset 0 1px 5px rgba(0,0,0,0.15);}
.search-form .button { height: 40px; font-size: 18px; color: #fff; font-weight: 600;}


.search-info { margin: 20px 0 15px 0;}
.search-info .meta-box { position: relative;}
.search-info .meta-box:before { position: absolute; left: 50%; top: 0; display: block; content: ""; border: 10px solid #fff; border-color: transparent  transparent #fff  transparent; transform: translate(-50%, -100%);}
.meta-box, .meta-box li { margin: 0; padding: 0; list-style: none;}
.meta-box li { line-height: 2; border-bottom: 1px solid #eee;}
.meta-box li:last-child { border-bottom: none;}
.meta-box li label { display: block; margin-right: 10px; min-width: 10rem; color: #888;}
.meta-box .flex-box { padding: 10px;}
.meta-box .flex-cell .form-control { position: absolute; display: block; width: 100%; height: 100%; text-align: left; font-size: 16px; border: none; outline: none; border-radius: 0; box-shadow: none;}
.meta-box .flex-cell select.form-control { position: absolute; right: 0; margin-right: 0; width: auto; font-size: 16px;}
.accordion-content textarea.form-control { padding: 10px; width: 100%; height: 100%; background: #f9f9f9; border-top: 1px solid #efefef; border: none; outline: none;}

.meta-box li.active,
.meta-box li.active label,
.accordion.active label,
.accordion.active p { color: #00B285;}
.accordion.active p .icon { transform: rotate(45deg);}
.accordion-content { background-color: #f9f9f9; color: #888; border-top: 1px solid #eee;}
.accordion-content.hide { display: none;}
.accordion-content.show { display: block;}

.choosePetsBox { position: relative; padding-bottom: 15px; overflow: hidden;}
.choosePetsBox .swiper-container { padding: 30px 0 60px; background-color: #fff; border-radius: 0 0 10px 10px;}
.choosePetsBox .circleItem { position: absolute; width: 200%; height: 200px; background-color: #fff; left: 50%; bottom: 0; transform: translate(-50%,0%); border-radius: 100%;}
.choosePetsBox .swiper-container-horizontal>.swiper-pagination-bullets, 
.choosePetsBox .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px;}

/* 走失 */
#layoutBox { }
#layoutBox .swiper-button-next, #layoutBox .swiper-container-rtl .swiper-button-prev { right: 0; top: 30%; background-image: url("../img/swiper-right.png")}
#layoutBox .swiper-button-prev, #layoutBox .swiper-container-rtl .swiper-button-next { left: 0; top: 30%; background-image: url("../img/swiper-left.png")}
textarea.form-control { display: block; width: 100%; padding: 10px; font-family: inherit; font-size: 16px; line-height: 1.6; background-color: #f9f9f9; border: none; border-radius: 0 0 10px 10px;}
.layout-A { position: relative; width: 100%; border: 10px solid #fff; border-radius: 10px;}

.pic-01 { position: absolute; width: 100%; height: 100%; -webkit-mask-image: url("../img/layout-mask-1.png"); background-size: cover;}
.pic-02 { position: absolute; width: 100%; height: 100%; -webkit-mask-image: url("../img/layout-mask-2.png"); background-size: cover;}
.pic-03 { position: absolute; width: 100%; height: 100%; -webkit-mask-image: url("../img/layout-mask-3.png"); background-size: cover;}

/* 我的 */
/* 登錄 & 註冊 */
#pageLoginBox { margin: 0% 25%; padding: 0 5% 5%;}
.memberForm { position: relative;}
.memberForm img { border-radius: 0 0 10px 10px;}
.memberForm .memberFormOption { position: absolute; left: 0; bottom: 0;right: 0; z-index: 12; text-align: center;  border-radius: 0 0 10px 10px;
	background: -webkit-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0.35)); /* Safari 5.1 - 6 */
	background: -o-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0.35)); /* Opera 11.1 - 12*/
	background: -moz-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0.35)); /* Firefox 3.6 - 15*/
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.35)); /* 标准的语法 */
}
.memberForm .memberFormOption a { display: block; padding: 15px; color: #fff;}
.memberForm .memberFormOption .active a { font-weight: bold;}
.memberForm .memberFormOption .active a:after { display: block; content: ""; position: absolute; left: 50%; bottom: 0; width: 40px; height: 4px; background-color: #fff; transform: translate(-50%,0);}

#pageLoginBox .form-item { margin-bottom: 15px;}

/* 會員 */
#memberBox { margin: 0; padding: 0; height: 100%; border-radius: 20px;}
.memberHeader { padding: 30px 60px; text-align: center; background: #99B3FF url("../img/member-bg.png"); border-radius: 10px 10px 0 0;} 
.memberHeader .avatar { margin: 0 auto; max-width: 80px;}
.memberHeader .avatar .img-avatar { width: 100%}
.memberHeader h3 { font-size: 1.8rem; color: #fff;}

#petsBox { height: 100%; overflow: auto;}
.petsHeader { position: relative; left: 0; width: 100%; /*height: 240px;*/ text-align: center; overflow: hidden; /*background: #00B285 url("../img/member-bg.png");*/} 
.petsHeader .petsAvatar { /*position: absolute; top: 50%; left: 50%; z-index: 4; transform: translate(-50%,-50%);*/}
.petsHeader .avatar { position: relative; z-index: 3; margin: 0 auto; max-width: 80px;}
.petsHeader .avatar .img-avatar { width: 100%}
.petsHeader .name { padding: 1rem 0 1.5rem;}
.petsHeader .name input { background-color: rgba(0,0,0,0.15) !important; border: 2px solid #fff !important; border-radius: 0.5rem;}
.petsHeader h3,
.petsHeader input.form-control,
.petsHeader input.form-control::placeholder { position: relative; z-index: 3; font-size: 18px; color: #fff;}
.petsHeader input.form-control { display: block; width: 100%; line-height: 35px; text-align: center; background: none; border: none;}
.petsHeader .circleItem { position: absolute; z-index: 1; width: 200%; height: 200px; background: #00B285 url("../img/member-bg.png"); left: 50%; bottom: 0; transform: translate(-50%,0%); border-radius: 100%;}
.petsHeader .button.button-trans { margin-left: 1rem; border: 2px solid #fff; border-radius: 10rem; text-decoration: none;}

#petsBox .pad-20 { position: relative; margin: 0 auto; width: 70%;}

.pets-info { position: relative; z-index: 3; /*margin: -40px 0 10px 0;*/}
.pets-info .meta-box { position: relative; margin: 1rem 0;}
.pets-info .meta-box:before {/* position: absolute; left: 50%; top: 0; display: block; content: ""; border: 10px solid #fff; border-color: transparent  transparent #fff  transparent; transform: translate(-50%, -100%);*/}
.pets-info .meta-box.no-after { border-top: 1px solid #efefef;}
.pets-info .meta-box.no-after:before { display: none;}

.order-box { float: left; display: inline-block; margin: 0 0 15px; padding: 0 15px; width: 33.33333333%;}
.order-box 
.orderDate { background-color: #00B285; color: #fff; text-align: center; border-radius: 10px 0 0 10px; align-items: center}
.orderDone.orderDate { background-color: #FF5C26;}
.orderDate h4 { display: inline-block; margin-top: 25px; font-size: 28px; line-height: 1.2;}
.orderDate small { font-size: 1rem;}
.orderInfo .orderMeta { padding: 0.5rem 1rem; border-bottom: 0.1rem solid #efefef;}
.orderInfo .orderMeta:last-child { border-bottom: none;}
.orderInfo .petTel,
.orderInfo .link-cart { position: absolute; right: 1rem; top: 0.5rem; display: block; padding: 0;}
.orderInfo .link-cart { top: 0; font-size: 2rem; font-weight: bold; color: #00B285;}
.orderInfo .link-order { display: inline-block; padding: 0; color: #00B285;}
	
	.petsNav { margin-bottom: 1rem; border-bottom: 0.1rem solid #efefef;}
	.petsNav ul,
	.petsNav li { margin: 0; padding: 0; list-style: none;}
	.petsNav li a { display: block; position: relative; padding: 1rem; text-decoration: none;}
	.petsNav li a.active:after { display: block; content: ""; position: absolute; left: 50%; bottom: 0; width: 50%; height: 0.4rem; background-color: #00B285; transform: translate(-50%,100%)}
	
	.noticeHeader h2 { font-size: 3rem; color: #ccc;}
	.noticeHeader .iconItem { color: #888;}
	.iconItem { width: 4rem; height: 4rem; font-size: 3rem; text-align: center; border-radius: 4rem; background-color: #eee;}
	.iconItem a { text-decoration: none; color: #888;}
	
	.noticeItem h3 { font-size: 1.8rem; color: #444; line-height: 1.2;}
	.noticeItem h3 time { margin-left: 1rem; font-size: 1.2rem; color: #F60; font-weight: normal;}
	.noticeItem small { font-size: 1rem; color: #bbb;}
	
	.noticeMonth { padding: 0 0 1rem 0; font-size: 1.2rem; text-align: center;}
	
	.notice-info .meta-box:after { position: absolute; left: 50%; top: 0; z-index: 2; content: ""; width: 1rem; height: 1rem; background-color: #efefef; border: 0.5rem solid #fff; border-radius: 100%; transform: translate(-50%,-50%)}
	
	.petsCalendar { background-color: #fff;}
	.petsCalendar ol,
	.petsCalendar ol li { margin: 0; padding: 0; list-style: none; font-size: 1.4rem; font-family: Arial, Helvetica, sans-serif; text-align: center;}
	.calenderHeader { padding: 0 1rem; border-bottom: 0.1rem solid #efefef;}
	.calenderHeader ol { display: table; width: 100%;}
	.calenderHeader ol li { display: table-cell; width: 14.285%; color: #BBB;}
	
	.calenderContent { position: relative; padding: 0 1rem 2rem;}
	.calenderContent:after { display: block; content: ""; position: absolute; left:50%; bottom: 0; width: 3rem; height:3rem; border-radius: 10rem; background-color: #efefef; transform:translate(-50%,75%)}
	.calenderContent ol:after { display: block; content: ""; clear:both;}
	.calenderContent li { position: relative; display: block; float: left; width: 14.285%; height: 4rem; line-height: 3.6em; border-radius: 0.5rem;}
	.calenderContent li.now { color: #00B285;}
	.calenderContent li.active { background-color: #00B285; color: #fff;}
	.calenderContent li.event { color: #444}
	.calenderContent li.event:after { position: absolute; width: 1rem; left: 50%; margin-left: -0.5rem; display: block; content: ""; border-bottom: 0.3rem solid #00b285; border-radius: 100rem;}



@media only screen and (max-width: 767px) {
body { border: none;}
body.open { overflow: hidden !important;}
.hide-lg { display: block;}
.hide-xs { display: none;}

.white-box { background-color: #fff; border-radius: 1rem; box-shadow: 0 1rem 1rem rgba(0,0,0,0.1);}
.green-box { background-color: #00B285; border-radius: 1rem; box-shadow: 0 1rem 1rem rgba(0,178,133,0.1);}

.button { font-size: 1.8rem; line-height: 2rem;}
.form-control { box-sizing: border-box; font-family: inherit;}

/* Header */
#header { position: fixed; left: 0; right: 0; top: 0; bottom: auto; z-index: 899; padding: 0; height: auto; color: #fff;}
#header h1 { margin: 0; font-size: 2.4rem; font-weight: 600; text-align: center; line-height: 4.4rem;}
#header a,
#header button { margin: 0; padding: 0; display: block; width: 4.4rem; height: 4.4rem; background-color: transparent; text-align: center; line-height: 4.4rem; border: none; color: #fff;}
#header a .icon,
#header button .icon { font-size: 2.8rem;}

#page #header { background: #00B285 url("../img/header-bg.png");}
.no-bg { background: none !important;}

/* Footer */
#footer { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 899; text-align:center;}
#footer:before { display: block; content: ""; position: absolute; z-index: 2; left: 0; top: -0.4rem; right: 0; height: 0.4rem; background-image: url("../img/footer-bg.png"); background-size: auto 0.4rem;}
#footer .white-box { border-radius: 0;}
#footer .flex-box { position: relative; top: auto; width: 100%; transform: none; justify-content: ; flex-direction: row; z-index: 1; box-shadow: 0 -0.5rem 1rem rgba(0,0,0,0.1);}
#footer .flex-cell { position: relative; padding: 0.6rem 0.5rem 0.4rem;}
#footer .flex-box a { padding: 0; text-decoration: none;}
#footer a.active .icon,
#footer a.active small { color: #00B285;}
#footer .flex-box .icon { display: block; font-size: 3rem; color: #444;}
#footer .flex-box small { display: block; font-size: 1rem; color: #888;}

#footer .submenu-lost { display: block; position: fixed; left: 0; right: 0; bottom: 0; transform: translateY(100%); transition: 0.3s; opacity: 0;}
#footer .submenu-lost.animate { transform: translateY(-50%); opacity: 1;}
.submenu-lost .submenu-top { display: block; position: absolute; left: 50%; top: 0; width: 180%; height: 200px; transform: translate(-50%,-10%); background-color: #fff; border-radius: 100%; box-shadow: 0 -1rem 1rem rgba(0,0,0,0.1);}
#footer .submenu-lost .submenu-content { padding: 0 0 2rem; background-color: #fff;}
#footer .submenu-lost .submenu-content a { display: block; line-height: 4rem;}


/* Aside Nav */
#asideNav { position: fixed; z-index: 999; left: 0; top: 0; bottom: 0; width: 80%; background-color: #fff; background-image: url("../img/aside-bg.png");
	transform: translateX(-100%);
	-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}

#asideNav.animate{
	transform: translateX(0%);
	box-shadow: 1rem 0 3rem rgba(0,0,0,0.15);
}



/* Home */
#homeBox { padding: 4.4rem 0 6.8rem; height: 100%; background-color: #00B285; border: none;}

/* Pages */
#pageBox { background: none; width: 100%;}
.topPadBig { padding: 8.4rem 0 6rem !important; height: 100%; overflow: auto;}
.topPadSmall { padding: 4.4rem 0 0 !important; height: 100%; overflow: auto;}
.topPadMid { padding: 6.8rem 0 0 !important; height: 100%; overflow: auto;}
#memberBox,
#petsBox,
#pageLoginBox { min-height: 100%; overflow: auto;}
#pageLoginBox { margin: 0; padding: 0;}
#noticeBox,
#petsOrderBox { padding: 4.4rem 0 0 !important; height: 100%; overflow: auto; }


.nav-steps.hide-lg { display: flex; margin: 0; width: 100%; background-color: transparent; text-align: center;}
.nav-steps.hide-xs { display: none;}
.nav-steps .flex-cell { position: relative; padding: 1rem 0 1rem;}
.nav-steps em { padding: 0.2rem 0.6rem; background-color: rgba(255,255,255,0.6); font-size: 1.4rem; font-style: normal; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #00B285; border-radius: 100rem; vertical-align: middle;}
.nav-steps span { padding: 0.2rem 0.6rem; color: rgba(255,255,255,0.6);}

.nav-steps .active { background-color: transparent;}
.nav-steps .active:after { display: block; content: ""; position: absolute; left: 50%; bottom: 0; width: 1rem; height: 1rem; border: 0.2rem solid #fff; background-color: #FFD24D; border-radius: 100%; transform: translate(-50%,50%);}
.nav-steps .active em { background-color: rgba(255,255,255,1); opacity: 1;}
.nav-steps .active span { color: #fff;}

.nav-steps .done { background-color: transparent;}
.nav-steps .done:after { display: block; content: ""; position: absolute; left: 50%; bottom: 0; width: 1rem; height: 1rem; border: 0.2rem solid #fff; background-color: #00B285; border-radius: 100%; transform: translate(-50%,50%);}
.nav-steps .done em { background-color: rgba(255,255,255,1);}
.nav-steps .done span { color: #fff;}


	/* Order Pet's Bg */
	#orderType { margin-bottom: 1rem; width: 100%;}
	.order-left,
	.order-right { position: relative; transform: none; width: 100%;}
	.orderImg { margin-bottom: 1rem;}

	#cardFilter { width: auto;}
	.orderBg { position: relative;}
	.BigTag { margin: 0 auto; max-width: 100%;}
	.SmallTag { margin: 0 auto; max-width: 80%;}
	
	.orderBox { display: block; width: 100%; vertical-align: middle;}
	.orderList { display: block;float: none; padding: 0; width: 100%;}
	
	.order-meta { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%);
		text-align: center;
	}
	.order-meta .form-item { margin-bottom: 0.5rem;}
	.order-meta .form-item input.form-control { display: block; margin: 0; padding: 0.5rem; width: 100%; background-color: #f4f4f4; font-size: 1.6rem; text-align: center; border-radius: 1rem; border: none; outline: none; box-shadow: inset 0 0.2rem 0.6rem rgba(0,0,0,0.1), inset 0 0.1rem 0 rgba(0,0,0,0.3);}
	.order-meta .order-number { font-size: 1.2rem; color: #888;}
	
	.BigTag .order-name.font-big { font-family: "VisbyRoundCF-Boe64e7af9a1a2bb"; font-size: 3.6rem; font-weight: 700; line-height: 1;}
	.BigTag .order-tel.font-big { font-family: "VisbyRoundCF-Boe64e7af9a1a2bb"; font-size: 2rem; line-height: 1.4;}
	.SmallTag .order-name.font-big { font-family: "VisbyRoundCF-Boe64e7af9a1a2bb"; font-size: 2.4rem; font-weight: 700; line-height: 1;}
	.SmallTag .order-tel.font-big { font-family: "VisbyRoundCF-Boe64e7af9a1a2bb"; font-size: 1.8rem; line-height: 1.4;}
	
	.order-form { position: absolute; left: 50%; bottom: 0; text-align: center;}
	.order-petBig-bg .order-form { transform: translate(-50%,40%);}
	.order-petSmall-bg .order-form { transform: translate(-50%,55%);}
	.order-form .button { padding: 0.5rem 2.5rem; font-size: 1.6rem; border: none; border-radius: 1rem; box-shadow: 0 1rem 1rem rgba(0,0,0,0.1);}
	.order-form p { line-height: 2;}
	
	#cardOptions { margin-bottom: 1rem; width: auto;}
	#cardOptions .form-item { padding: 1rem 0.5rem 1rem 1rem; line-height: 2rem; border-bottom: 0.1rem solid #efefef;}
	#cardOptions .form-item:last-child { border-bottom: none;}
	#cardOptions .form-item label { display: inline-block; color: #00B285; font-size: 1.8rem; font-weight: bold; line-height: 3rem;}
	#cardOptions .form-item small { color: #bbb; font-size: 1.4rem; font-weight: normal;}
	
	.Spinner a { display: inline-block; padding: 0 0.5rem; text-decoration: none; color: #00B285;}
	.Spinner .Amount { display: inline-block; margin: 0; padding: 0; width: 4rem; height: 3rem; font-size: 1.6rem; color: #00B285; text-align: center; border: 2px solid #00b285; border-radius: 10rem; box-sizing: border-box; box-shadow: none;}
	
	#cardTotal { position: fixed; z-index: 899; left: 0; right: 0; bottom: 0; margin: 0; padding: 1rem; width:100%; color: #fff; border-radius: 0; box-shadow:0 -0.5rem 1rem rgba(0,0,0,0.1);}
	#cardTotal:before { display: block; content: ""; position: absolute; z-index: 2; left: 0; top: -0.4rem; right: 0; height: 0.4rem; background-image: url("../img/order-bg.png"); background-size: auto 0.4rem;}

	#cardTotal .button { margin: 0; padding: 0 1rem; font-size: 1.8rem; line-height: 2; font-weight: 600;}
	#cardTotal .orderPrice { padding-left: 1rem; font-size: 1.8rem; line-height: 2;}
	
	.button-more { margin-bottom: 1rem;}
	.button-order-more { padding: 1rem; border-radius: 1rem; font-size: 1.8rem; line-height: 2;}
	
	.coupon-box .flex-box { padding: 0;}
	.coupon-box label { margin-right: 2rem; color: #888; line-height: 3rem;}
	.coupon-box .form-control { display: block; padding: 0.4rem; width: 100%; height: 3rem; background-color: #efefef; text-align: center; font-size: inherit; color: #00B285; border: none; border-radius: 0.5rem;}
	
	center.mar-bottom-20.pad-lr-10 { margin-bottom: 20px;}
	
	.search-form { margin-top: 0; margin-bottom: 1rem; padding: 0.5rem;}
	.search-form .form-control { display: block; width: 100%; margin: 0; padding: 0.5rem; height: 4rem; font-size: 1.6rem; border: none; border-radius: 0.5rem; box-sizing: border-box; box-shadow: inset 0 0.1rem 0.5rem rgba(0,0,0,0.15);}
	.search-form .button { height: 4rem; color: #fff; font-weight: 700;}
	
	.search-info { margin: 2rem 0 1rem 0;}
	.search-info .meta-box { position: relative;}
	.search-info .meta-box:before { position: absolute; left: 50%; top: 0; display: block; content: ""; border: 1rem solid #fff; border-color: transparent  transparent #fff  transparent; transform: translate(-50%, -100%);}
	.meta-box, .meta-box li { margin: 0; padding: 0; list-style: none;}
	.meta-box li { line-height: 2; border-bottom: 1px solid #eee;}
	.meta-box li:last-child { border-bottom: none;}
	.meta-box li label { display: block; margin-right: 1rem; min-width: 7rem; color: #888;}
	.meta-box .flex-box { padding: 1rem;}
	.meta-box .flex-cell .form-control { position: absolute; display: block; width: 100%; height: 100%; text-align: right; font-size: 1.6rem; border: none; outline: none;}
	.meta-box .flex-cell select.form-control { position: absolute; right: 0; margin-right: 0; width: auto; font-size: 1.6rem;}
	.accordion-content textarea.form-control { padding: 1rem; width: 100%; height: 100%; background: #f9f9f9; border-top: 0.1rem solid #efefef; border: none; outline: none;}
	
	.meta-box li.multi-contact { background-color: #f4f4f4;}
	.meta-box li.multi-contact .flex-box { border-bottom: 1px solid rgba(0,0,0,0.1);}
	.meta-box li.multi-contact .flex-box:last-child { border-bottom: none;}
	.meta-box li.multi-contact .form-control { background-color: transparent;}
	.meta-box li .btn-block { display: block; margin: 1rem 0; padding: 1rem; width: 100%; color: #fff;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24ba92), to(#17a077)); 
		/* Webkit: Safari 5.1+, Chrome 10+ */ 
		background: -webkit-linear-gradient(top, #24ba92, #17a077);
		/* Firefox 3.6+ */ 
		background: -moz-linear-gradient(top, #24ba92, #17a077); 
		/* Opera 11.10+ */ 
		background: -o-linear-gradient(top, #24ba92, #17a077); 
		/* IE 10 */ 
		background: -ms-linear-gradient(top, #24ba92, #17a077); 
		/* IE < 10 */ 
		FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#24ba92, endColorStr=#17a077);} 
	
	.meta-box li.multi-contact .new_contact:nth-child(1) { background-color: #ebf5ff;}
	.meta-box li.multi-contact .new_contact:nth-child(2) { background-color: #fff8df;}
	.meta-box li.multi-contact .new_contact:nth-child(3) { background-color: #edffea;}
	
	.meta-box li.active,
	.meta-box li.active label,
	.accordion.active label,
	.accordion.active p { color: #00B285;}
	.accordion.active p .icon { transform: rotate(45deg);}
	.accordion-content { background-color: #f9f9f9; color: #888; border-top: 1px solid #eee;}
	.accordion-content.hide { display: none;}
	.accordion-content.show { display: block;}
	
	.choosePetsBox { position: relative; padding-bottom: 2rem; overflow: hidden;}
	.choosePetsBox .swiper-container { padding: 2rem 0; background-color: #fff;}
	.choosePetsBox .circleItem { position: absolute; width: 200%; height: 200px; background-color: #fff; left: 50%; bottom: 0; transform: translate(-50%,0%); border-radius: 100%;}
	.choosePetsBox .swiper-container-horizontal>.swiper-pagination-bullets, 
	.choosePetsBox .swiper-pagination-custom, .swiper-pagination-fraction { bottom: -5px;}
	
	
	#layoutBox { }
	#layoutBox .swiper-button-next, #layoutBox .swiper-container-rtl .swiper-button-prev { right: 0; top: 30%; background-image: url("../img/swiper-right.png")}
	#layoutBox .swiper-button-prev, #layoutBox .swiper-container-rtl .swiper-button-next { left: 0; top: 30%; background-image: url("../img/swiper-left.png")}
	.fckBox textarea.form-control { display: block; width: 100%; padding: 1rem; font-size: 1.6rem; line-height: 1.6; height: 8em; background-color: #f9f9f9; border: none; border-radius: 0 0 1rem 1rem;}
	.layout-A { position: relative; width: 100%; border: 1rem solid #fff; border-radius: 1rem;}
	
	.pic-01 { position: absolute; width: 100%; height: 100%; -webkit-mask-image: url("../img/layout-mask-1.png"); background-size: cover;}
	.pic-02 { position: absolute; width: 100%; height: 100%; -webkit-mask-image: url("../img/layout-mask-2.png"); background-size: cover;}
	.pic-03 { position: absolute; width: 100%; height: 100%; -webkit-mask-image: url("../img/layout-mask-3.png"); background-size: cover;}
	
	
	.fixed-button { position: relative; bottom: 0; transform: translateY(-50%);}
	
	
	.memberFormOption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1rem 1rem 2rem; text-align: center; color: #fff;
		background: -webkit-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0.35)); /* Safari 5.1 - 6 */
		background: -o-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0.35)); /* Opera 11.1 - 12*/
		background: -moz-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0.35)); /* Firefox 3.6 - 15*/
		background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.35)); /* 标准的语法 */
	}
	
	.memberFormOption a { color: #fff; text-decoration: none;}
	.memberFormOption .active a { font-weight: bold;}
	.memberFormOption .active:after { display: block; content: ""; position: absolute; left: 50%; bottom: 0; border-width: 1rem; border-style: solid; border-color: transparent transparent #efefef transparent; transform: translate(-50%,100%);}
	
	#pageLoginBox .form-item { margin-bottom: 1rem;}
	
	
	/* Member */
	.memberHeader { padding: 20% 30% 10%; text-align: center; background: #99B3FF url("../img/member-bg.png");} 
	.memberHeader .avatar { margin: 0 auto; max-width: 8rem;}
	.memberHeader .avatar .img-avatar { width: 100%}
	.memberHeader h3 { font-size: 1.8rem; color: #fff;}
	
	.petsHeader { position: relative; padding: 5%; text-align: center; overflow: hidden;} 
	.petsHeader .petsAvatar { position: relative; z-index: 4; padding: 0% 0% 0%;}
	.petsHeader .avatar { position: relative; z-index: 3; margin: 0 auto; max-width: 8rem;}
	.petsHeader .avatar .img-avatar { width: 100%}
	.petsHeader h3,
	.petsHeader input.form-control,
	.petsHeader input.form-control::placeholder { position: relative; z-index: 3; font-size: 1.8rem; color: #fff;}
	.petsHeader input.form-control { display: block; margin: 0 auto; width: 90%; height: auto; text-align: center; background: none; border: none; box-sizing: border-box;}
	.petsHeader .circleItem { position: absolute; z-index: 1; width: 200%; height: 250px; background: #00B285 url("../img/member-bg.png"); left: 50%; bottom: 0; transform: translate(-50%,0%); border-radius: 100%;}
	.petsHeader .button.button-trans { margin-left: 1rem; border: 0.2rem solid #fff; border-radius: 10rem; text-decoration: none;}
	
	.pets-info { position: relative; z-index: 3; margin: -2.5rem 0 1rem 0;}
	.pets-info .meta-box { position: relative;}
	.pets-info .meta-box:before { position: absolute; left: 50%; top: 0; display: block; content: ""; border: 1rem solid #fff; border-color: transparent  transparent #fff  transparent; transform: translate(-50%, -100%);}
	.pets-info .meta-box.no-after { border-top: 0.1rem solid #efefef;}
	.pets-info .meta-box.no-after:before { display: none;}

	.order-box { float: none; display: block; margin: 0 0 1rem; padding: 0; width: 100%;}
	.orderDate { background-color: #00B285; color: #fff; text-align: center; border-radius: 1rem 0 0 1rem; align-items: center}
	.orderDone.orderDate { background-color: #FF5C26;}
	.orderDate h4 { display: inline-block; margin-top: 3rem; font-size: 3rem; line-height: 1.2;}
	.orderDate small { font-size: 1rem;}
	.orderInfo .orderMeta { padding: 0.5rem 1rem; border-bottom: 0.1rem solid #efefef;}
	.orderInfo .orderMeta:last-child { border-bottom: none;}
	.orderInfo .petTel,
	.orderInfo .link-cart { position: absolute; right: 1rem; top: 0.5rem; display: block; padding: 0;}
	.orderInfo .link-cart { top: 0; font-size: 2rem; font-weight: bold; color: #00B285;}
	.orderInfo .link-order { display: inline-block; padding: 0; color: #00B285;}
	
	.petsNav { margin-bottom: 1rem; border-bottom: 0.1rem solid #efefef;}
	.petsNav ul,
	.petsNav li { margin: 0; padding: 0; list-style: none;}
	.petsNav li a { display: block; position: relative; padding: 1rem; text-decoration: none;}
	.petsNav li a.active:after { display: block; content: ""; position: absolute; left: 50%; bottom: 0; width: 50%; height: 0.4rem; background-color: #00B285; transform: translate(-50%,100%)}
	
	.noticeHeader h2 { font-size: 3rem; color: #ccc;}
	.noticeHeader .iconItem { color: #888;}
	.iconItem { width: 4rem; height: 4rem; font-size: 3rem; text-align: center; border-radius: 4rem; background-color: #eee;}
	.iconItem a { text-decoration: none; color: #888;}
	
	.noticeItem h3 { font-size: 1.8rem; color: #444; line-height: 1.2;}
	.noticeItem h3 time { margin-left: 1rem; font-size: 1.2rem; color: #F60; font-weight: normal;}
	.noticeItem small { font-size: 1rem; color: #bbb;}
	
	.noticeMonth { padding: 0 0 1rem 0; font-size: 1.2rem; text-align: center;}
	
	.notice-info .meta-box:after { position: absolute; left: 50%; top: 0; z-index: 2; content: ""; width: 1rem; height: 1rem; background-color: #efefef; border: 0.5rem solid #fff; border-radius: 100%; transform: translate(-50%,-50%)}
	
	.petsCalendar { background-color: #fff;}
	.petsCalendar ol,
	.petsCalendar ol li { margin: 0; padding: 0; list-style: none; font-size: 1.4rem; font-family: Arial, Helvetica, sans-serif; text-align: center;}
	.calenderHeader { padding: 0 1rem; border-bottom: 0.1rem solid #efefef;}
	.calenderHeader ol { display: table; width: 100%;}
	.calenderHeader ol li { display: table-cell; width: 14.285%; color: #BBB;}
	
	.calenderContent { position: relative; padding: 0 1rem 2rem;}
	.calenderContent:after { display: block; content: ""; position: absolute; left:50%; bottom: 0; width: 3rem; height:3rem; border-radius: 10rem; background-color: #efefef; transform:translate(-50%,75%)}
	.calenderContent ol:after { display: block; content: ""; clear:both;}
	.calenderContent li { position: relative; display: block; float: left; width: 14.285%; height: 4rem; line-height: 3.6em; border-radius: 0.5rem;}
	.calenderContent li.now { color: #00B285;}
	.calenderContent li.active { background-color: #00B285; color: #fff;}
	.calenderContent li.event { color: #444}
	.calenderContent li.event:after { position: absolute; width: 1rem; left: 50%; margin-left: -0.5rem; display: block; content: ""; border-bottom: 0.3rem solid #00b285; border-radius: 100rem;}
	
	#petsBox .pad-20 { margin: 0; padding: 0 15px; width: 100%;}
	#pet_form,
	#memberBox { margin: 0; padding: 0 0 6rem; width: 100%;}
	
	
	#add_contact { height: 4rem;}
}

@media only screen and (max-width: 480px) {
	#home-banner { padding-bottom: 48px; border-radius: 0;}
	#home-banner .swiper-slide { background-position: 75% center; border-radius: 0; text-align: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-end;
    align-items: flex-end;
	box-shadow: inset 0 -300px 200px rgba(255,255,255,0.9);
	}
	#home-banner .swiper-slide div.content { padding: 0 0 100px;}
	
	#home-banner h2 { font-size: 30px;}
	#home-banner h4 { font-size: 20px;}
	#home-banner p { font-size: 18px;}
	#home-banner .btn { margin-bottom: 20px; font-size: 16px;}
	
	#banner-pagination { left: 50%; bottom: 80px;}
	
	.content-feature { left: 0; right: 0; top: 0; bottom: 0; border-radius: 0;}
	.content-feature > div { padding: 20px;}
	
	#social { left: 0; top: 0;}
	.btn-feature { top: 20px; bottom: auto;}
	.btn-feature .btn-green { padding: 10px 12px;}
	.btn-feature .btn-green span { display: none;}
	
	
	
	.petsHeader { position: relative; left: 0; width: 100%; height: 240px; text-align: center; overflow: hidden; background: #00B285 url("../img/member-bg.png");} 
	.petsHeader .petsAvatar { position: absolute; top: 50%; left: 50%; z-index: 4; transform: translate(-50%,-50%);}
	
	.pets-info { position: relative; z-index: 3;}
	.pets-info .meta-box:before { position: absolute; left: 50%; top: 0; display: block; content: ""; border: 10px solid #fff; border-color: transparent  transparent #fff  transparent; transform: translate(-50%, -100%);}
	
	.pageContent { width: auto; top: 80px;}


}




@-webkit-keyframes videomodule-anim {
  0% {
    -webkit-transform: scale(0.68);
            transform: scale(0.68); }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0; } }

@keyframes videomodule-anim {
  0% {
    -webkit-transform: scale(0.68);
            transform: scale(0.68); }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0; } }



/* Page Background */
.page-bg-1 { background-color: #eceaf5 !important; background-image: url("../img/background-1.jpg"); background-position: center right; background-size: cover;}
.page-bg-2 { background-color: #ededea !important; background-image: url("../img/background-2.jpg"); background-position: center right; background-size: cover;}
.page-bg-3 { background-color: #f2ede9 !important; background-image: url("../img/background-3.jpg"); background-position: center right; background-size: cover;}
.page-bg-4 { background-color: #ebe6e4 !important; background-image: url("../img/background-4.jpg"); background-position: center right; background-size: cover;}

.blur {	
    filter: url("blur.svg.html#blur"); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);
    
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}

/*vicky add*/
.vv-cl{clear:both;}





@media screen and (max-width:320px){
	#home-banner .btn{
	margin-top: 40px;
    padding: 5px 18px;
    font-family: "Roboto Condensed";
    font-size: 18px;
    border: 2px solid #00B285;
    border-radius: 100em;}
    #home-banner p.vv-mat20{margin-top: 20px; font-size: 22px;}
    #home-banner h2{text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 15px white, 0px 0px 15px white;}
    #home-banner .swiper-slide div.content {padding: 0 0 15%;}
	.vv-in-btn{display:block;}
	#home-banner a.vv-in-btn{width:100%; margin-right: 15px; padding: 15px 40px; font-size: 28px; background-color: rgba(255,255,255,0.8);}
	#home-banner a.vv-in-btn:hover{background-color: rgba(0,178,133,1);; color:#ffffff;}
	#home-banner .swiper-slide div.content {
    padding-left: 15px; padding-right: 15px;
    width: 100%;
}
}

@media screen and (min-width:321px) and (max-width:480px){
	#home-banner h2{font-size: 40px; padding-bottom: 10px; text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 15px white, 0px 0px 15px white;}
	#home-banner .btn{
	margin-top: 40px;
    padding: 5px 30px;
    font-family: "Roboto Condensed";
    font-size: 18px;
    border: 2px solid #00B285;
    border-radius: 100em;}
    #home-banner p.vv-mat20{margin-top: 20px; font-size: 22px;}
    #home-banner .swiper-slide div.content {padding: 0 0 15%;}
    .vv-in-btn{display:block;}
	#home-banner a.vv-in-btn{width:100%; margin-right: 15px; padding: 15px 40px; font-size: 28px; background-color: rgba(255,255,255,0.8);}
	#home-banner a.vv-in-btn:hover{background-color: rgba(0,178,133,1);; color:#ffffff;}
	#home-banner .swiper-slide div.content {
    padding-left: 15px; padding-right: 15px;
    width: 100%;
}
}

@media screen and (min-width:481px) and (max-width:767px){
.vv-in-btn{display:block;}
	#home-banner a.vv-in-btn{width:100%; margin-right: 15px; padding: 15px 40px; font-size: 28px; background-color: rgba(255,255,255,0.8);}
	#home-banner a.vv-in-btn:hover{background-color: rgba(0,178,133,1);; color:#ffffff;}
	#home-banner .swiper-slide div.content {
    padding-left: 15px; padding-right: 15px;
    width: 100%;
}

}

@media screen and (min-width:768px) and (max-width:991px){
#home-banner p.vv-mat20{margin-top: 20px;}
.vv-in-btn{display:block;}
#home-banner a.vv-in-btn{margin-right: 15px; padding: 15px 50px; font-size: 25px;}
#home-banner a.vv-in-btn:hover{background-color: #00b285; color:#ffffff;}
#home-banner .swiper-slide div.content {
    padding-left: 70px;
}
}

@media screen and (min-width:992px) and (max-width:1399px){
.vv-in-btn{display:inline-block;}
#home-banner a.vv-in-btn{margin-right: 15px; padding: 15px 30px; font-size: 25px;}
#home-banner a.vv-in-btn:hover{background-color: #00b285; color:#ffffff;}
#home-banner .swiper-slide div.content {
    padding-left: 60px;
}
}

@media screen and (min-width:1400px){
.vv-in-btn{display:inline-block;}
#home-banner a.vv-in-btn{margin-right: 20px; padding: 20px 50px; font-size: 30px;}
#home-banner a.vv-in-btn:hover{background-color: #00b285; color:#ffffff;}
#home-banner .swiper-slide div.content {
    padding-left: 60px;
}	
}