@charset "UTF-8";
html,body{ background-color: #d0e5f6; position: relative;}
.topbg{ background: url(../images/y_jsms_topbg.png) repeat-x;}

.jsms-head{ width:100%; padding-bottom: 2.6rem; background-image: url(../images/y_jsms_headbg.png); background-repeat: no-repeat; background-position: top center; background-size: cover; overflow: hidden;}
.jsms-logo{ margin-top: -1.26rem; text-align: center; position: relative; z-index: 99;}
.jsms-logo img{ height: 1.85rem; display: inline-block;}

.search-box{ width:6.33rem; height: 0.46rem; margin: 0.33rem auto; position: relative; display: block;}
.search-box input[type="text"] { width: 100%; height: 100%; padding-left: 0.15rem; font-size: 0.16rem; border-radius: 0.23rem; background-color: #fff;}
.search-box .btn-fr{ position: absolute; top: 0.04rem; right: 0.04rem; font-size: 0;}
.search-box .btn-fr input[type="button"] { width: 0.38rem; height: 0.38rem; background: url(../images/y_index_searchbtn.png) no-repeat center; background-size: 60%; display:inline-block; vertical-align: middle; cursor: pointer;}
.search-box .btn-fr .line{ width:0.01rem; height: 0.38rem; margin: 0 0.08rem 0 0.05rem; background: url(../images/y_index_searchbtn_line.png) no-repeat right center; display: inline-block; vertical-align: middle;}
.search-box .btn-fr span{ padding: 0 0.25rem; color: #fff; line-height: 0.38rem; border-radius: 0.24rem; background-color: #df5636; cursor: pointer; display: inline-block; vertical-align: middle;}
.search-box .btn-fr span:hover{ background-color: #cf3916;}

.jsms-bg{ margin: -0.78rem 0 -0.3rem 0; padding-bottom: 0.5rem; background-image: url(../images/y_jsms_mainbg.png); background-repeat: no-repeat; background-size: cover; background-position: center 0.78rem; position: relative; z-index: 1;}
.jsms-con{ border-radius: 0.1rem; box-shadow: 0 0 0.13rem #d8e9f7; background-color: #fff;}

.jstab-line{ width:100%; height: 0.13rem; background: #437bea; border-top-left-radius: 0.1rem; border-top-right-radius: 0.1rem;}
.jstab li{ width:calc(100% / 3); float: left;}
.jstab li a{ padding: 0.27rem 0; font-size: 0; text-align: center; background-repeat: no-repeat; background-size: 100% 100%; background-position: top center; display: block;}
.jstab li a i{ width:0.4rem; height: 0.4rem; margin-right: 0.1rem; background-position: center 0; background-repeat: no-repeat; background-size: 100% auto; display: inline-block; vertical-align: middle;}
.jstab li:nth-of-type(1) a i{ background-image: url(../images/y_jsms_tab_img01.png);}
.jstab li:nth-of-type(2) a i{ background-image: url(../images/y_jsms_tab_img02.png);}
.jstab li:nth-of-type(3) a i{ background-image: url(../images/y_jsms_tab_img03.png);}
.jstab li a span{ font-size: 0.32rem; color: #437bea; font-weight: bold; line-height: 0.54rem; display: inline-block; vertical-align: middle;}
.jstab li:hover a, .jstab li.active a{ background-image: url(../images/y_jsms_tabactive.png);}
.jstab li:hover a i, .jstab li.active a i{ background-position: 0 -0.4rem;}
.jstab li:hover a span, .jstab li.active a span{ color: #fff;}

.js-Box{ padding: 0.25rem;}

@media screen and (max-width: 1680px) {
	.jsms-logo img{ height:calc(100vw * 160 / 1600);}
	.jstab li a span{ font-size: 0.3rem;}
}
@media screen and (max-width: 1440px) {
	.jsms-logo img{ height:calc(100vw * 140 / 1400);}
}
@media screen and (max-width: 1366px) {
	.jsms-logo img{ height:calc(100vw * 140 / 1360);}	
}
@media screen and (max-width: 1280px) {	
}
@media screen and (max-width: 1160px) {
	.jsms-logo img{ height:calc(100vw * 130 / 900);}
}
@media screen and (max-width: 900px) {
	.jsms-head{ padding-bottom:calc(100vw * 260 / 800);}
	
	.jsms-logo{ margin-top: calc(-100vw * 60 / 800);}
	.jsms-logo img{ height:calc(100vw * 130 / 800);}
	
	.search-box{ width:60%; height: calc(100vw * 40 / 800);}
	.search-box input[type="text"] { font-size: 0.2rem; border-radius: calc(100vw * 20 / 800);}
	.search-box .btn-fr{ top: calc(100vw * 4 / 800); right: calc(100vw * 4 / 800);}
	.search-box .btn-fr input[type="button"] { width: calc(100vw * 32 / 800); height: calc(100vw * 32 / 800);}
	.search-box .btn-fr .line{ height: calc(100vw * 32 / 800);}
	.search-box .btn-fr span{ font-size: 0.22rem; line-height: calc(100vw * 32 / 800); border-radius: calc(100vw * 16 / 800);}
	
	.jstab-line{ height: calc(100vw * 13 / 800);}
	.jstab li a{ padding: 0; background-size: 100% 100%;}
	.jstab li a i{ display: none;}
	.jstab li a span{ font-size: 0.3rem; line-height: calc(100vw * 60 / 800);}
	.jstab li:hover a, .jstab li.active a{ padding: 0 0 calc(100vw * 10 / 800) 0;}
	.jstab li:hover a span, .jstab li.active a span{ line-height: calc(100vw * 50 / 800);}
}
@media screen and (max-width: 750px) {
	.jsms-head{ padding-bottom:calc(100vw * 260 / 500);}
	
	.jsms-logo{ margin-top: calc(-100vw * 30 / 500);}
	.jsms-logo img{ max-width: 80%; height:auto;}
	
	.search-box{ width:90%; height: calc(100vw * 40 / 500);}
	.search-box input[type="text"] { font-size: 0.28rem; border-radius: calc(100vw * 20 / 500);}
	.search-box .btn-fr{ top: calc(100vw * 4 / 500); right: calc(100vw * 4 / 500);}
	.search-box .btn-fr input[type="button"] { width: calc(100vw * 32 / 500); height: calc(100vw * 32 / 500);}
	.search-box .btn-fr .line{ width:0.01rem; height: calc(100vw * 32 / 500);}
	.search-box .btn-fr span{ font-size: 0.3rem;line-height: calc(100vw * 32 / 500); border-radius: calc(100vw * 16 / 500);}
	
	.jstab-line{ height: calc(100vw * 13 / 500);}
	.jstab li a span{ font-size: 0.36rem; line-height: calc(100vw * 46 / 500);}
	.jstab li:hover a, .jstab li.active a{ padding: 0 0 calc(100vw * 10 / 500) 0;}
	.jstab li:hover a span, .jstab li.active a span{ line-height: calc(100vw * 36 / 500);}
}