@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');


body, section, input, h1, h2, h3, h4, h5, ul, ul li{
	padding: 0;
	margin: 0;
	list-style: none;
	border: none;
	font-weight: normal;
  -webkit-appearance: none;
}


html, body {
	scrollbar-width: none;
	-ms-overflow-style: none;
  -webkit-appearance: none;
}

html::-webkit-scrollbar, .caselist::-webkit-scrollbar {
    width: 0;
    height: 0;
}


html {
	overflow-x: hidden;
  -webkit-appearance: none;
}

a, img {
	transition: all 0.4s;
    -ms-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
	text-decoration: none;
}

body::-webkit-scrollbar {
    width: 0.3em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: #000;
    outline: 0px solid #000;
}


body::-moz-scrollbar {
    width: 0.3em;
}

body::-moz-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-moz-scrollbar-thumb {
    background-color: #c8baad;
    outline: 0px solid #000;
}

::selection {
    background: #fff;
    color: #000;
}
::-moz-selection {
    background: #fff;
    color: #000;
}



body {
	overflow-x: hidden;
	-webkit-appearance: none;
	font-family: Nunito;
	background: #fff;
	color: #333;
}


.clear {
	clear: both;
}


/* ----- Overlay ---- */

.overlayd {
    display: none;
    position: fixed;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    width: 100%;
}

.popup {
    display: block;
    background: #fff;
    width: 30vw;
    padding: 2vw 2vw;
    border-radius: 1vw;
    margin: 5vw auto;
}

.popname {
    display: block;
    font-weight: 800;
    font-size: 2vw;
    color: #444;
    float: left;
}


.close {
    display: block;
    height: 2vw;
    float: right;
    background-size: 1.5vw;
    background: url(img/close.svg) center center no-repeat;
    width: 2vw;
    cursor: pointer;
}

.popup form input[type=text] {
    display: block;
    font-size: 1vw;
    border: 1px rgba(0,0,0,0.15) solid;
    border-radius: 0.5vw;
    padding: 1vw 0 1vw 5%;
    outline: none;
    margin: 1vw 0;
    width: 95%;
}

.popup form input[type=submit] {
    display: block;
    width: 101%;
    background: none;
    font-size: 1.2vw;
    padding: 1.2vw 0;
    border-radius: 0.5vw;
    color: #fff;
    outline:none;
    background: #DE5040;
    cursor: pointer;
}

.popup form input[type=submit]:hover {
    opacity: 0.8;
}


.warning-ok img {
    display: block;
    width: 10vw;
    margin: 2vw auto;
}

.warning-ok span {
    display: block;
    font-size: 1.5vw;
    font-weight: 700;
    text-align: center;
}

.spin {
    display: none;
    width: 2vw;
    margin: 1vw auto;
}



/* ----- Display ----- */


.custext1 {
    display: none;
}

.wrap {
	display: block;
	width: 80%;
	margin: 0 auto;
}

.warning {
    display: none;
    color: #de5040;
    font-size: 1.1vw;
    text-align: left;
    padding: 0.5vw 0;
    font-weight: 800;
}

header {
	display: block;
	width: 100%;
	position: absolute;
	z-index: 5;
	padding: 2vw 0;
}

.logo {
    display: block;
    width: 13vw;
    height: 3vw;
    background: url(img/logo.svg) center left no-repeat;
    background-size: 100%;
    float: left;
}

.geta {
	display: block;
	float: right;
	border: 1px #DE5040 solid;
	border-radius: 1.5vw;
	padding: 0.8vw 3vw 0.8vw 1.5vw;
	color: #DE5040;
	font-size: 1vw;
	font-weight: 700;
	background: url(img/geta.svg) center center no-repeat;
	background-size: 1vw;
	background-position: 85% center;
}

.geta:hover {
	background: #DE5040 url(img/geta2.svg) center center no-repeat;
	background-position: 85% center;
	background-size: 1vw;
	color: #fff;
}

.navigator {
	display: block;
	float: left;
	width: 65%;
	text-align: center;
}

.navigator li {
	display: inline-block;
	margin: 0.5vw 1vw;
}


.navigator li a {
	display: block;
	color: #666666;
	font-size: 1.2vw;
}

.navigator li a:hover {
	color: #DE5040;
}


.home {
	display:block;
	background: #F8F8F8;
	padding: 13vw 0 0 0;
}

.homebox {
	display: block;
	width: 47%;
	float: left;
}


.homebox h1 {
	display: block;
	color: #424242;
	font-size: 4.4vw;
	font-weight: 800;
	line-height: 4.3vw;
}

.homebox h2 {
	display: block;
	color: #424242;
	font-size: 3.5vw;
	font-weight: 800;
	line-height: 3.9vw;
}

.homebox p {
	display: block;
	font-size: 1.4vw;
	color: #8F9093;
	line-height: 2.2vw;
	padding: 1vw 0;
}

.homebox p a {
    color: #DE5040;
}

.homebut {
	display: block;
	border-radius: 3vw;
	padding: 1.1vw 4vw 1.1vw 3vw;
	color: #fff;
	float: left;
	font-size: 1.3vw;
	font-weight: 700;
	background: #DE5040 url(img/geta2.svg) center center no-repeat;
	background-size: 1.1vw;
	background-position: 90% center;
}

.whitebut {
    display: block;
    border-radius: 3vw;
    padding: 1.1vw 4vw 1.1vw 3vw;
    color: #DE5040;
    float: left;
    font-size: 1.3vw;
    font-weight: 700;
    margin: 0 0 2vw 0;
    background:  url(img/geta.svg) center center no-repeat;
    background-size: 1.1vw;
    background-position: 85% center;
    border: 0.1vw #DE5040 solid;
}

.whitebut:hover {
    opacity: 0.8;
}


.homebut:hover {
    background: #E86556 url(img/geta2.svg) center center no-repeat;
	background-size: 1.1vw;
	background-position: 92% center;
}

.homeimg {
	display: block;
	float: right;
	width: 50%;
	position: relative;
	margin-top: 0vw;
}

.homeimg img {
	display: block;
	width: 115%;
	height: auto;
}

.homeimg2 {
    display: block;
    float: right;
    width: 55%;
    position: relative;
    margin-top: -7vw;
    margin-right: -8%;
}

.homeimg2 img {
    display: block;
    width: 85%;
    margin: 5vw 0 0 0;
    height: auto;
}


.homeimg3 {
	display: block;
	float: right;
	width: 55%;
	position: relative;
	margin-top:-7vw;

}

.homeimg3 img {
	display: block;
	width: 100%;
	height: auto;
}

.preims {
	display: block;
	padding: 6vw 0 4vw 0;
}


.preims span {
    font-weight: 700;
    display: block;
    position: absolute;
    background: #de5040;
    font-size: 1.3vw;
    padding: 0.5vw 1vw;
    color: #fff;
    margin-left: 13vw;
    margin-top: -8vw;
    border-radius: 50%;
}

.preims h2, .catalog h2 {
	display: block;
	font-size: 3.5vw;
	font-weight: 800;
	text-align: center;
	padding: 0 0 4vw 0;
	color: #424242;
}

.preim {
    display: block;
    width: 22%;
    float: left;
    text-align: center;
    margin: 3vw 1.5% 3vw 1.5%;
}

.preim h3 {
	display: block;
	font-size: 1.5vw;
	line-height: 2vw;
	font-weight: 800;
	color: #424242;
}

.preim p {
	display: block;
	font-size: 1.2vw;
	color: #8F9093;
	line-height: 2vw;
	padding: 0.2vw 0;
	height: 5vw;
}

.preim img {
	display: block;
	height: 4vw;
	width: auto;
	margin: 0 auto 2vw auto;
}



.home2 {
	display:block;
	background: #F8F8F8;
	padding: 10vw 0 0 0;
}

.home3 {
	display:block;
	background: #F8F8F8;
	padding: 10vw 0 0 0;
}


.catalog {
	display: block;
	background: #FDFDFD;
	padding: 6vw 0 4vw 0;
}

.good {
	display: block;
	width: 30%;
	margin: 2vw 1.5% 2vw 1.5%;
	float: left;
	text-align: center;
}

.good img {
	display: block;
	margin: 0 auto;
	height: 15vw;
}

.good2 img {
	height: 19vw !important;
}

.good p {
	display: block;
	font-size: 1.2vw;
	color: #8F9093;
	line-height: 1.8vw;
	padding: 0vw 0;
	height: 5vw;
}

.good h3 {
	display: block;
	font-weight: 800;
	color: #424242;
	font-size: 1.5vw;
}


.good h3 span {
	background: #DE5040;
	font-size: 1vw;
	font-weight: 700;
	padding: 0.2vw 0.7vw;
	color: #fff;
	border-radius: 1vw;
	position: absolute;
	margin-top: -1vw;
}


.getgood {
	display: none;
	border-radius: 3vw;
	padding: 1.1vw 4vw 1.1vw 3vw;
	color: #fff;
	width: 7vw;
	font-size: 1.3vw;
	font-weight: 700;
	background: #DE5040 url(img/geta2.svg) center center no-repeat;
	background-size: 1.1vw;
	background-position: 85% center;
	margin: 1.5vw auto 0 auto;
	position: relative;
	z-index: 10;
}

.getgood:hover {
    background: #E86556 url(img/geta2.svg) center center no-repeat;
	background-size: 1.1vw;
	background-position: 90% center;
}


.good:hover .getgood {
	display: block;
}


footer {
	display: block;
	padding: 4vw 0;
}




/* ---- constructor ---- */

.constructor {
	display: block;
	background: #F5F5F5;
}


.const-left {
	display: block;
	width: 45%;
	float: right;
}

.const-right {
	display: block;
	float: left;
	width: 50%;
}


.const-right h2 {
	display: block;
	font-size: 2.6vw;
	font-weight: 800;
	margin: 0 0 2vw 0;
	color: #424242;
}

.const-right input[type=text], .const-right input[type=date] {
	display: inline-block;
	width: 45%;
	padding: 1vw 0 1vw 2%;
	background: #fff;
	font-size: 1.2vw;
	margin: 0.5vw 2% 0.5vw 0;
	border: 1px rgba(0,0,0,0.1) solid;
	outline: none;
	color: #666;
}


.const-right input[type=text]:focus {
  border: 1px #DE5040 solid;
}

.inselect {
	display: inline-block;
	width: 47%;
	margin: 0.5vw 2% 0.5vw 0;
	overflow: hidden;
	background: #fff url(img/opens.svg) no-repeat;
	background-size: 1.2vw;
	background-position: 94% center;
	border: 1px rgba(0,0,0,0.1) solid;
	float: left;
}

.inselect select {
	display: block;
	width: 130%;
	border: none;
	outline: none;
	font-size: 1.2vw;
	padding: 1vw 0 1vw 2%;
	background: none;
	color: #666;
}

.avaboxer {
    display: block;
    border: 2px #DE5040 dotted !important;
    width: 47%;
    overflow-x: hidden;
    margin: 0.5vw 2% 0.5vw 0;
}

#pet_avatar, #pet_avatar2, #pet_avatar7, #pet_avatar3 {
    display: block;
    outline: none;
    font-size: 0;
    width: 180%;
    height: 3.4vw;
    background: none;
    cursor: pointer;
    background: #fff url(img/upload.svg) center center no-repeat;
    border: none;
    margin: 0px 0 0 -40%;
    position: relative;
    border: none;
}

.next, .next5 {
	display: block;
	border-radius: 3vw;
	padding: 1.1vw 4vw 1.1vw 3vw;
	color: #fff;
	width: 7vw;
	font-size: 1.3vw;
	font-weight: 700;
	background: #DE5040 url(img/geta2.svg) center center no-repeat;
	background-size: 1.1vw;
	background-position: 85% center;
	margin: 1.5vw auto 0 auto;
	position: relative;
	z-index: 10;
	cursor: pointer;
}

#sendex {
	display: block;
	border-radius: 3vw;
	padding: 1.1vw 4vw 1.1vw 3vw;
	color: #fff;
	width: 7vw;
	font-size: 1.3vw;
	font-weight: 700;
	background: #DE5040 url(img/geta2.svg) center center no-repeat;
	background-size: 1.1vw;
	background-position: 85% center;
	margin: 1.5vw auto 0 auto;
	position: relative;
	z-index: 10;
	width: 20vw;
	cursor: pointer;
	outline: none;
}


#step2, #step3 {
           display: none;
       }
       
#step3 p {
    display: block;
    font-size: 1.4vw;
    color: #8F9093;
    line-height: 2.2vw;
    padding: 1vw 0;
   }
       
       
.next:hover, #sendex:hover, .next5:hover {
    background: #E86556 url(img/geta2.svg) center center no-repeat;
	background-size: 1.1vw;
	background-position: 90% center;
}

.const-left img {
	display: block;
	margin: 3vw auto 0vw auto;
	width: 90%;
}

.const-left span {
	display: block;
	text-align: center;
	font-size: 1vw;
	color: #999;
}

.const-right span {
	display: block;
	font-size: 1.3vw;
	font-weight: 700;
	color: #999;
	margin: 2vw 0 1vw 0;
	clear: both;
}


/* ---- cards ----- */

.cardbox1 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard1.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox1-2 {
    display: none;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard1-1.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox2 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard2.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox2-2 {
    display: none;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard2-2.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox3 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard777.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox3-2 {
    display: none;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard777-2.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox4 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard4.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox5-1 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard5-1.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}


.cardbox5-1 .avabox1 {
    display: block;
    width: 23.5%;
    height: 32%;
    border-radius: 10%;
    overflow: hidden;
    top: 25%;
    left: 19%;
    position: absolute;
}

.cardbox5-1 .cardpetname1 {
    display: block;
    position: absolute;
    font-size: 1.4vw;
    font-weight: 700;
    text-align: center;
    width: 31%;
    left: 15%;
    color: #666;
    word-wrap: break-word;
    top: 60%;
}

.cardbox5-2 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard5-2.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox5-3 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard5-3.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox5-4 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard5-4.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox5-5 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard5-5.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.cardbox5-6 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/testcard5-6.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}



.avabox1 {
    display: block;
    width: 21%;
    height: 28.5%;
    border-radius: 10%;
    overflow: hidden;
    top: 31%;
    left: 13.5%;
    position: absolute;
}

.cardpetname1 {
    display: block;
    position: absolute;
    font-size: 1.9vw;
    font-weight: 700;
    left: 40%;
    color: #666;
    top: 31%;
}

.cardpetinfo1 {
    display: block;
    position: absolute;
    font-size: 0.9vw;
    font-weight: 700;
    left: 56%;
    color: #999;
    top: 42%;
}

.cardpetinfo2 {
    display: block;
    position: absolute;
    font-size: 0.9vw;
    font-weight: 700;
    left: 55%;
    color: #999;
    top: 47.5%;
}

.cardpetinfo3 {
    display: block;
    position: absolute;
    font-size: 0.9vw;
    font-weight: 700;
    left: 48%;
    color: #999;
    top: 52.3%;
}

.cardpetinfo4 {
    display: block;
    position: absolute;
    font-size: 0.9vw;
    font-weight: 700;
    left: 50%;
    color: #999;
    top: 57.3%;
}

.cardpetinfo85 {
    display: block;
    position: absolute;
    font-size: 0.9vw;
    font-weight: 700;
    left: 48%;
    color: #999;
    top: 67.3%;
}

.cardpetinfo5 {
    display: block;
    position: absolute;
    font-size: 0.9vw;
    font-weight: 700;
    left: 50%;
    color: #999;
    top: 62.5%;
}

.avabox1 img {
    display: block;
    margin: 0 !important;
    margin-left: 0% !important;
    width: 100% !important;
}


.prevstep {
    color: #DE5040;
    margin: 1vw 0;
    cursor: pointer;
    text-align: center;
    font-size: 1.1vw;
}





.cardpetname7 {
    position: absolute;
    font-size: 1.9vw;
    font-weight: 700;
    color: #666;
    top: 31%;
    left: 38% !important;
}

.cardpetinfo8 {
    display: block;
    position: absolute;
    font-size: 0.9vw;
    font-weight: 700;
    left: 47% !important;
    color: #333 !important;
    top: 43.3% !important;
}

.cardpetinfo9 {
    display: block;
    position: absolute;
    font-size: 0.9vw;
    font-weight: 700;
    left: 51% !important;
    color: #333 !important;
    top: 48.3% !important;
}

.cardpetinfo10 {
    display: block;
    position: absolute;
    font-size: 0.9vw;
    font-weight: 700;
    left: 48% !important;
    color: #333 !important;
    top: 53.4% !important;
}

/* new tag style --- */

.tagcustomstyle1 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/color1.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.tagcustomstyle2 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/color2.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.tagcustomstyle3 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/color3.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.tagcustomstyle4 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/color4.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.tagcustomstyle5 {
    display: block;
    width: 35vw;
    height: 25vw;
    background: url(img/color5.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}



#customtext1 {
    display: block;
    top: 55%;
    width: 20%;
    text-align: center;
    font-weight: 700;
    color: #666;
    font-size: 1vw;
    left: 27%;
    position: absolute;
    word-wrap: break-word;
}

#customtext2 {
    display: block;
    top: 55%;
    width: 20%;
    text-align: center;
    font-weight: 700;
    color: #666;
    font-size: 1vw;
    left: 52%;
    word-wrap: break-word;
    position: absolute;
}

#customphoto1 {
    display: block;
    overflow: hidden;
    position: absolute;
    width: 5.2vw;
    border-radius: 0.5vw;
    height: 5vw;
    top: 34.5%;
    left: 30%;
}

#customphoto1 img, #customphoto2 img {
    display: block;
    width: 100%;
    margin-left:0%;
    margin-top: 0%;
}

#customphoto2 {
    display: block;
    overflow: hidden;
    position: absolute;
    width: 5.2vw;
    border-radius: 0.5vw;
    height: 5.1vw;
    top: 34%;
    left: 55%;
}

.policy {
    display: block;
    margin: 10vw 0;
}

.policy h2 {
    display: block;
    font-size: 48px;
    line-height: 52px;
    color: #424242;
    font-weight: 800;
    margin: 18vh 0 25px 0;
}

.policy p {
    display: block;
    font-size: 15px;
    color: #8F9093;
    line-height: 24px;
    margin: 0 0 35px 0;
    width: 80%;
}

.retuk .avaboxer {
    display: inline-block;
    margin: 0.5vw 2% -1.5vw 0;
}

#costers b {
    color: #DE5040;
}



.thai {
    display: inline-block;
    background: url(img/thai.png) center center no-repeat;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background-size: auto 100%;
    margin: -1vw 0 0 0;
    position:absolute;
}

.centerbut {
 cursor:pointer; 
 float: none !important; 
 margin: 0 auto; 
 text-align: center; 
 max-width: 17vw;
}

.podbuter {
    display: block;
    font-size: 1vw;
    color: #8F9093;
    text-align: center;
}





@media (max-width: 800px) {

.navigator {
	display: none;
}

.wrap {
    width: 90%;
}

.logo {
    width: 30vw;
    height: 6vw;
}

.geta {
    display: block;
    float: right;
    border: 1px #DE5040 solid;
    border-radius: 7vw;
    padding: 1.3vw 6vw 1.3vw 3vw;
    color: #DE5040;
    font-size: 3vw;
    font-weight: 700;
    background: url(img/geta.svg) center center no-repeat;
    background-size: 2vw;
    background-position: 88% center;
}


.homebox {
    width: 65%;
}

.homebox h1 {
    font-size: 9vw;
    line-height: 10vw;
}

.homebox h2 {
    font-size: 9vw;
    line-height: 10vw;
}

.homebox p, #step3 p {
    font-size: 3.9vw;
    line-height: 5.4vw;
}

.homebut {
    display: block;
    border-radius: 7vw;
    padding: 2.2vw 9vw 2.2vw 5vw;
    color: #fff;
    float: left;
    font-size: 3.4vw;
    font-weight: 700;
    background: #DE5040 url(img/geta2.svg) center center no-repeat;
    background-size: 3vw;
    background-position: 94% center;
}

.whitebut {
    display: block;
    border-radius: 7vw;
    padding: 2.2vw 9vw 2.2vw 5vw;
    float: left;
    font-size: 3.4vw;
    font-weight: 700;
    background-size: 3vw;
    background-position: 94% center;
}



.home {
    padding: 23vw 0 6vw 0;
}

.home2 {
    display: block;
    background: #F8F8F8;
    padding: 17vw 0 17vw 0;
}

.homeimg {
    display: block;
    float: right;
    width: 92%;
    margin-right: -57%;
    position: relative;
    margin-top: 0vw;
}

.homeimg2 {
    display: block;
    float: right;
    width: 92%;
    margin-right: -57%;
    position: relative;
    margin-top: -5vw;
}


.preims h2, .catalog h2 {
    font-size: 8vw;
    padding: 0 0 7vw 0;
}

.preims {
    padding: 8vw 0 4vw 0;
}

.preim {
    width: 50%;
    float: left;
    margin: 2vw auto;
}

.preim img {
    height: 12vw;
    margin: 0 auto 5vw auto;
}

.preim h3 {
    font-size: 4.5vw;
    line-height: 5vw;
}

.preim p {
    display: block;
    font-size: 3.2vw;
    color: #8F9093;
    text-align: center;
    width: 80%;
    margin: 4vw auto 5vw auto;
    line-height: 4.5vw;
    padding: 0.2vw 0 4vw 0;
    min-height: 15vw;
}

.home3 .homebox {
	width: 100%;
}

.homeimg3 {
    display: block;
    float: none;
    width: 80%;
    margin: 6vw auto 0 auto;
    position: inherit;
}

.good {
    width: 80%;
    margin: 2vw auto 12vw auto;
    float: none;
}

.good img {
    height: 50vw;
}

.good2 img {
    height: 58vw !important;
}

.catalog {
    padding: 12vw 0 12vw 0;
}

.good h3 {
    font-size: 6vw;
}

.good h3 span {
    background: #DE5040;
    font-size: 3.5vw;
    font-weight: 700;
    padding: 0.7vw 2vw;
    color: #fff;
    border-radius: 3vw;
    position: absolute;
    margin-top: -1vw;
    margin-left: 1vw;
}

.good p {
    font-size: 4vw;
    line-height: 5.5vw;
    height: auto;
}

.getgood, .next, #sendex, .next5 {
    display: block;
    border-radius: 8vw;
    padding: 3vw 4vw 3vw 3vw;
    color: #fff;
    width: 39vw;
    font-size: 4vw;
    font-weight: 700;
    background: #DE5040 url(img/geta2.svg) center center no-repeat;
    background-size: 3vw;
    background-position: 85% center;
    margin: 5vw auto 0 auto;
}

.next, .next5 {
	text-align: center;
}

.const-right, .const-left {
	display: block;
	width: 100%;
	float: none;
}

.const-right h2 {
    font-size: 6vw;
    text-align: center;
}

.const-right input[type=text], .const-right input[type=date] {
    display: inline-block;
    width: 98%;
    padding: 2.5vw 0 2.5vw 2%;
    background: #fff;
    font-size: 4vw;
    margin: 2vw 2% 2vw 0;
    border: 1px rgba(0,0,0,0.1) solid;
    outline: none;
    color: #666;
}

.inselect {
    display: inline-block;
    width: 100%;
    margin: 2vw 2% 2vw 0;
    overflow: hidden;
    background: #fff url(img/opens.svg) no-repeat;
    background-size: 3vw;
    background-position: 96% center;
    border: 1px rgba(0,0,0,0.1) solid;
    float: none
}

.inselect select {
    display: block;
    width: 130%;
    border: none;
    outline: none;
    font-size: 4vw;
    padding: 2.5vw 0 2.5vw 2%;
    background: none;
    color: #666;
}

.avaboxer {
    width: 100%;
    margin: 2vw 2% 2vw 0;
}

#pet_avatar, #pet_avatar2, #pet_avatar7, #pet_avatar3 {
    display: block;
    outline: none;
    font-size: 0;
    width: 180%;
    height: 10vw;
    }


.const-left span {
    font-size: 3vw;
}

.constructor {
    }

 .const-left img {
    margin: 10vw auto 0vw auto;
    width: 90%;
}



/* ----- cards ----- */

.cardbox1 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard1.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox1-2, .cardbox2-2 {
    width: 90vw;
    height: 68vw;
    background: url(img/testcard1-1.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox3-2 {
    width: 90vw;
    height: 68vw;
    background: url(img/testcard777-2.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox2 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard2.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox3 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard777.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox3 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard777.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox4 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard4.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox5-1 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard5-1.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox5-1 .cardpetname1 {
    font-size: 3vw;
}

.cardbox5-2 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard5-2.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox5-3 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard5-3.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox5-4 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard5-4.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox5-5 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard5-5.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}

.cardbox5-6 {
    display: block;
    width: 90vw;
    height: 68vw;
    background: url(img/testcard5-6.png) center center no-repeat;
    background-size: 100%;
    position: relative;
    margin: 3vw auto;
}


.cardpetname1,.cardpetname7 {
    font-size: 4.5vw;
}

.cardpetinfo1, .cardpetinfo2, .cardpetinfo3, .cardpetinfo4, .cardpetinfo8, .cardpetinfo5, .cardpetinfo9, .cardpetinfo10, .cardpetinfo85  {
    font-size: 2vw !important;
}

.cardpetinfo8 {
    top: 44% !important;
}

.cardpetinfo9 {
    top: 48.8% !important;
}

.cardpetinfo10 {
    top: 53.9% !important;
}





.cardpetinfo1 {
    top: 43%;
}

.cardpetinfo2 {
    top: 48%;
}


.const-right span {
    font-size: 4vw;
}

.warning {
    font-size: 2.5vw;
}


.prevstep {
    font-size: 3.5vw;
}

#virtual .homebox h2 {
    text-align: center !important;
}

#virtual .homebox p, #step3 p {
    text-align: center !important;
}

#virtual .homebut {
    float: none !important;
    width: 25% !important;
    margin: 0 auto 5vw auto !important;
}

.tagcustomstyle1 {
    display: block;
    width: 90vw;
    height: 60vw;
    background: url(img/color1.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.tagcustomstyle2 {
    display: block;
    width: 90vw;
    height: 60vw;
    background: url(img/color2.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.tagcustomstyle3 {
    display: block;
    width: 90vw;
    height: 60vw;
    background: url(img/color3.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.tagcustomstyle4 {
    display: block;
    width: 90vw;
    height: 60vw;
    background: url(img/color4.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.tagcustomstyle5 {
    display: block;
    width: 90vw;
    height: 60vw;
    background: url(img/color5.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}

.tagcustomstyle6 {
    display: block;
    width: 90vw;
    height: 60vw;
    background: url(img/color6.png) center center no-repeat;
    background-size: 100%;
    position: relative;
}



#customphoto1 {
    display: block;
    overflow: hidden;
    position: absolute;
    width: 13vw;
    border-radius: 0.5vw;
    height: 13.7vw;
    top: 33%;
    left: 30.5%;
}

#customphoto2 {
    display: block;
    overflow: hidden;
    position: absolute;
    width: 13vw;
    border-radius: 0.5vw;
    height: 13.7vw;
    top: 33%;
    left: 55%;
}

#customtext1, #customtext2 {
  font-size: 2vw;
}


.preims span {
    font-weight: 700;
    display: block;
    position: absolute;
    background: #de5040;
    font-size: 4vw;
    padding: 0.7vw 2.5vw;
    color: #fff;
    margin-left: 45vw;
    margin-top: -19vw;
    border-radius: 50%;
}


.popup {
    display: block;
    background: #fff;
    width: 80vw;
    padding: 4vw 4vw;
    border-radius: 1vw;
}

.popname {
    display: block;
    font-weight: 800;
    font-size: 6vw;
    margin: 0 0 3vw 0;
}

.close {
    display: block;
    height: 5vw;
    float: right;
    background-size: 5vw;
    width: 5vw;
}

.popup form input[type=text] {
    display: block;
    font-size: 3.5vw;
    border: 1px rgba(0,0,0,0.15) solid;
    border-radius: 0.5vw;
    padding: 2vw 0 2vw 5%;
    outline: none;
    margin: 4vw 0;
    width: 95%;
}

.popup form input[type=submit] {
    display: block;
    width: 101%;
    background: none;
    font-size: 4vw;
    padding: 3vw 0;
    border-radius: 1vw;
    color: #fff;
    outline: none;
    background: #DE5040;
    cursor: pointer;
}

.warning-ok img {
    display: block;
    width: 30vw;
}

.warning-ok span {
    font-size: 5vw;
}


.cardpetinfo85 {
    top: 67%;
}


.spin {
    width: 10vw;
}


#sendex {
    display: block;
    border-radius: 8vw;
    padding: 3vw 4vw 3vw 3vw;
    color: #fff;
    width: 39vw;
    font-size: 4vw;
    font-weight: 700;
    background-size: 3vw;
    background-position: 85% center;
    margin: 5vw auto 0 auto;
}

.const-right .homebut {
    display: block;
    border-radius: 7vw;
    padding: 2.2vw 9vw 2.2vw 5vw;
    color: #fff;
    float: left;
    font-size: 3.6vw;
    font-weight: 700;
    margin-bottom: 10vw;
    FONT-VARIANT: JIS04;
    float: none;
    text-align: center;
    margin: 2vw auto;
    background-size: 3vw;
    background-position: 88% center;
}

.thai {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    background-size: auto 100%;
    margin: -0.5vw 0 0 1vw;
}

.centerbut {
    max-width: 60% !important;
}


.podbuter {
    font-size: 2vw;
}
}







/* ---- */