@charset "utf-8";
/* CSS Document */
body {max-width:500px;margin:0 auto;}
*{font-size:15px;}
.wrap {/*position: absolute;*/}
.banner img {width:100%; margin-bottom:30px;}
.his-text {margin:30px; margin-top:0; text-align:right; color:#757575;}
.his-text a {color:#757575;}
.input-box {border:1px #626262 solid; margin:30px; border-radius:10px;}
.input {light-height:3rem;height:2.20rem; padding-top:12px; padding-left:20px; padding-right:20px;}
.input_name {width:50px; float:left;font:16px;}
.input input {float:left;font-size:0.85rem;}
hr {padding:0; margin:0; border-bottom:1px #626262 solid; clear: both;}
.row .col-60 {width:55.99999999999999%;}
.row .col-60,.row .col-25{  float:left; }

.on { color: #fff; display: none; text-indent: 10px;}
        .off { color: #fff; display: inline-block; text-indent: 34px;}
        .button-label .circle{ left: 0;  transition: all 0.3s; }
        #toggle-button1{ display: none; }
        #toggle-button1:checked + label.button-label .circle{ left: 35px;  }
        #toggle-button1:checked + label.button-label .on{ display: inline-block; }
        #toggle-button1:checked + label.button-label .off{ display: none; }
        #toggle-button1:checked + label.button-label{ background-color: #e71423; }
		.button-label{
            position: relative;
            display: inline-block;
            width:60px;
            height: 25px;
            background-color: #ccc;
            box-shadow: #ccc 0px 0px 0px 0px;
            border-radius: 30px;
            overflow: hidden;
        }
        .circle{
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #fff;
        }
        .button-label .text {
            line-height: 25px;
            font-size: 16px;
            text-shadow: 0 0 2px #ddd;
        }
		
.btn {margin:40px auto; text-align:center; background:#e71423; color:#fff;-webkit-border-radius: 5px;border-radius: 5px;line-height:40px;font-size:16px; width:200px; height:40px; }
.btn a {color:#fff;}
.btn-txt {margin:10px 30px;}



.cont { margin:30px; }
.test-tit {margin-top:3.8rem;margin-bottom:50px;}
.test-tit1 {font-size:1.8rem;}
.test-tit1 span {font-size:1.3rem; float:right; padding-top:5px;}
.test-tit2 {font-size:15px;}
.test-item {box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:18%; margin:25px 1%; height:60px; background:#e9e9e9;float:left; text-align:center; font-size:0.85rem; border-radius:10px; padding:10px;display:table;}
.test-item a {font-size: 0.85rem;}
.test-inner {display:table-cell;vertical-align:middle; font-size:12px;}

.his-tit {margin-top:3.8rem;margin-bottom:50px;}
.his-tit1 {font-size:1.1em;}
.his-tit1 a {font-size:1.1rem; float:right; padding-top:5px;}
.his-row ul li {float:left; padding:5px 5px 5px 0; margin:0 4%; font-size:1.15em;}
.fl-r {float:right !important;}

.tip .name {box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */width:50%;}
.tip .btn-test {box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */ text-align:center;}
.tip .btn-test ul li{ color:#757575; border:1px #626262 solid; float:left; margin:0 5px; padding:5px; border-radius:8px;}

.bar{position:absolute;right:0;left:0;z-index:10;height:2.5rem;padding-right:.5rem;padding-left:.5rem;background-color:#f7f7f8;border-bottom:1px solid #e7e7e7;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.bar-header-secondary{top:2.2rem}
.bar-footer{bottom:0}
.bar-footer-secondary{bottom:2.2rem}
.bar-footer-secondary-tab{bottom:2.5rem}
.bar-footer,.bar-footer-secondary,.bar-footer-secondary-tab{border-top:1px solid #e7e7e7;border-bottom:0;border-left:0}
.bar-nav{top:0}
.title{position:absolute;display:block;width:100%;padding:0;margin:0 -.5rem;font-size:1.25rem;font-weight:500;line-height:2.5rem;color:#3d4145;text-align:center;white-space:nowrap}
.title a{color:inherit}
.pull-left{float:left}


	.box-163css {
				width: 100%;
				position: relative;
				/*height: 630px;*/
				margin-bottom: 20px;
				/*float: left;*/
			}
			/*swipe*/
			
			.swipe {
				width: 100%;
				/*float: left;*/
				visibility: visible;
				position: relative;
				margin-top: 0px;
				height: auto;
			}
			
			.box01_list {
				position: relative;
				-webkit-transition: left 600ms ease-out;
				width: 100%;
				margin: 0px;
				padding: 0px;
				height:auto;
			}
			
			.li_list {
				width: 100%;
				position: relative;
				float: left;
				vertical-align: top;
			}
			/*page*/
			
			.page1 {
				text-align: left;
				height: 46px;
				line-height: 46px;
				width: 100%;
				display: -webkit-box;
				margin: 0px;
				padding-left: 0px
			}
			
			.page1 li {
				-webkit-box-flex: 1;
				font-size: 18px;
				display: block;
				color: #000;
				height: 46px;
				line-height: 12px;
				text-align: center;
				padding: 0 15%;
			}

			.page1 li a {
				display: block;
				float: left;
				width: 100%;
				color: #000;
				text-align: center;
				line-height: 46px;
				height: 46px;
				font-size: 24px;
				text-decoration: none;
			}
			
			.page1 li a.active {
				color: #000;
				border-bottom: 2px solid #000;
			}
			
			.nav li a.hover {
				color: #000;
				border-bottom: 2px solid #000 !important
			}
			.li_list{
				height: auto!important;
			}

#canvas{
	position: relative;
}
#show_num{
	position: absolute;
	z-index: 111;
}
.show_num{
	border: 1px solid #bfbfbf;
	background-color: #000;
	width: 30px;
	height: 18px;
	line-height: 18px;
	text-indent: 5px;
	position: relative;
	z-index: 0;
}
#show_num em{
	position:absolute;
	bottom:-7px;
	left:30px;
	overflow:hidden;
	width:10px;
	height:10px;
	background:#fff;
	border-bottom:1px solid #bfbfbf;
	border-right:1px solid #bfbfbf;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
	z-index: -2;
}

.expl-txt1 {color: #e71423; margin:10px 0;}
.expl-con {width:5%; display:inline-block;margin:20px; vertical-align: middle;}
.expl-con .expl-con1 {line-height:16px;}
.expl-con .txt-fire{font-size:16px;background-color:#ff0000;color:#fff}
.expl-con .txt-water{font-size:16px;background-color:#000;color:#fff}
.expl-con .txt-gold{font-size:16px;background-color:#fff;color:#000}
.expl-con .txt-land{font-size:16px;background-color:#eeee12;color:#000}
.expl-con .txt-wood{font-size:16px;background-color:#00b050;color:#fff}
.expl-text1 {display:inline-block;width:75%;text-align: justify;vertical-align: middle;}
.blank {margin:20px auto;border-bottom:1px #7d7d7d solid; clear: both;}
.expl-inner {margin-bottom: 20px;}

.content-block{padding:0.85rem;margin:1.75rem 0;color:#6d6d72;margin:15px;margin-top:10px;line-height:25px;}
.content-block-title{position:relative;margin:0;margin:1.75rem .75rem .5rem;overflow:hidden;font-size:.7rem;line-height:1;color:#6d6d72;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.content-block-title+.card,.content-block-title+.content-block,.content-block-title+.list-block{margin-top:.5rem}
.content-block-inner{position:relative;width:100%;padding:.5rem .75rem;margin-left:-.75rem;color:#3d4145;background:#fff;border-top:1px solid #c8c7cc;border-bottom:1px solid #c8c7cc}
.content-block.inset{margin-right:.75rem;margin-left:.75rem;border-radius:.35rem}
.content-block.inset .content-block-inner{border-top:0;border-right:0;border-bottom:0;border-left:0;border-radius:.35rem}
.test-item:hover {cursor:pointer;background:#e71423;color:#fff !important;;}
.test-item:active {background:#e71423;color:#fff !important;}



/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {
	.row .col-60 {width: 45%;}
	.input input {float: left; font-size: 0.73rem;}
}
.btn-txt img {width:100%;}


-------------------------------------------------------


@media screen and (max-width: 554px)
.nav {
    line-height: 36px;
    
}

.nav {
    border-bottom: 2px #ccc solid;
    background: #f0f0f0;
    line-height: 50px;
    text-align: center;
}
.nav-box li {
    float: left;
    width:25%;
    text-align: center;
}

a {
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.nav .nav-box li a {
    display: inline-block;
    line-height: 1;
    width: 100%;
    border-right: 1px solid #666666;
}

@media screen and (max-width: 554px)
.nav-box li:hover {
    border-bottom: 2px #F00 solid;
    line-height: 34px;
    height: 34px;
}

.nav-box li:hover {
    border-bottom: 2px #F00 solid;
    line-height: 48px;
    height: 48px;
}

@media screen and (max-width: 554px)
.nav-box li {
    width: 25%;
}

@media screen and (max-width: 996px)
.nav-box li {
    width: 14%;
}



.nav-box {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}


-------------------------------