.wrap { overflow: hidden;}

.con { width:94%; max-width: 1200px;  margin: 0 auto; }

	.font80 { font-size: 80px;}

	.font60 { font-size:60px;}

	.font50 { font-size: 50px;}

	.font48 { font-size: 48px;}

	.font44 { font-size: 44px;}

	.font42 { font-size: 42px;}

	.font36 { font-size: 36px;}

	.font32 { font-size: 32px;}

	.font30 { font-size: 30px;}

	.font28 { font-size: 28px;}

	.font27 { font-size: 27px;}

	.font26 { font-size: 26px;}

	.font24 { font-size: 24px;}

	.font22 { font-size: 22px;}

	.font20 { font-size: 20px;}

	.font18 { font-size: 18px;}

	.font16 { font-size: 16px;}

	.font14 { font-size: 14px;}

@media only screen and (max-width:1920px) {

	html,body { font-size: 0.833vw;}

	

	.font80 { font-size: 80px;}

	.font60 { font-size: 60px;}

	.font50 { font-size: 50px;}

	.font48 { font-size: 48px;}

	.font44 { font-size: 44px;}

	.font42 { font-size: 42px;}

	.font36 { font-size: 36px;}

	.font32 { font-size: 30px;}

	.font30 { font-size: 30px;}

	.font28 { font-size: 28px;}

	.font27 { font-size: 27px;}

	.font26 { font-size: 26px;}

	.font24 { font-size: 24px;}

	.font22 { font-size: 22px;}

	.font20 { font-size: 20px;}

	.font18 { font-size: 18px;}

	.font16 { font-size: 16px;}

	.font14 { font-size: 14px;}

	.font12 { font-size: 12px;}

}



@media only screen and (max-width:828px) {

	html,body { font-size: 16px;}

	.con { width:auto; margin: 0 1em; }

}

@media only screen and (max-width:420px) {

	html,body { font-size: 14px;}

}

@media only screen and (max-width:370px) {

	html,body { font-size: 12px;}

}



@media only screen and (max-width:828px) {



.font48 { font-size: 24px;}

.font36 { font-size: 20px;}

.font24 { font-size: 18px;}

.font22 { font-size: 18px;}

.font20 { font-size: 14px;}

.font18 { font-size: 14px;}

.font16 { font-size: 14px;}

.font14 { font-size: 12px;}

}



.picBox { position: relative; z-index: 0; padding-top: 495px; margin-top:120px;}

.picBox img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;

object-fit: cover;}

 @media only screen and (max-width:828px) { 

.picBox { padding-top: 45%;margin-top:110px;}

}



.dataBox { padding: 4.8em 0 3.8em; }

.dataBox .tit { font-weight: bold; text-align:center}

.dataBox .tit span { color: #cc0000; display: inline-block; margin-right: 0.4em;}

.dataBox .tit_2 { margin-top: 1em;}

.dataCon { max-width: 855px; margin: 3.8em auto 0; display: flex; justify-content: space-between; align-items: flex-start;}

.dataCon .tab { width: 23.4%;}

.dataCon .dataPic { width: 52.8%; margin-right: 8.6%;}



.dataBox .tab { line-height: 2.8; background-color: #eee;}

.dataBox .tab .swiper-slide { cursor: pointer; text-align:center}

.dataBox .tab .swiper-slide.active { background-color: #cc0000; color: #fff;

font-weight: bold;}



 @media only screen and (max-width:828px) { 

	 .dataCon .dataPic {  width: 72%;  margin-right: 0;}

 }



.swiper-data .name { font-weight: bold;}

.swiper-data .swiper-slide { cursor: pointer; background-color: #fff;}

.swiper-data .swiper-slide-active {}

.swiper-data .swiper-slide .name { margin-top: 1.5em;}

.swiper-data .swiper-slide .intro { margin-top:0.7em;}

.swiper-data .swiper-slide img { width: 100%; height: auto;}



.btnWhite { cursor: pointer; display: inline-block; cursor: pointer; color: #ff5831; line-height: 2.5;

 padding: 0.1em 1.7em 0 1.8em; margin-right: 0.5em; background-color: #fff; font-weight: bold;

transition: all 0.5s;

-webkit-transition:all 0.5s;

-moz-border-radius:0.2em; -webkit-border-radius:0.2em; border-radius:0.2em;

border: 1px solid #fff; 

-webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);

    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);}

.btnWhite:hover {	border: 1px solid #ff5831; color: #ff5831;}



.btnBlue { display: inline-block; cursor: pointer; color: #fff; line-height: 2.5;

 padding: 0.1em 1.7em 0 1.7em; margin-right: 0.5em; background-color: #0da5ca;font-weight: bold;

transition: all 0.5s;

-webkit-transition:all 0.5s;

-moz-border-radius:0.2em; -webkit-border-radius:0.2em; border-radius:0.2em;

border: 1px solid #0da5ca; }

.btnBlue:hover {	background-color: #0eb6df;color: #fff;}



.btnOrg { display: inline-block; cursor: pointer; color: #fff; line-height: 2.5;

 padding: 0.1em 1.7em 0 1.7em; margin-right: 0.5em; background-color: #ff5831; font-weight: bold;

transition: all 0.5s;

-webkit-transition:all 0.5s;

-moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;

border: 1px solid #ff5831; }

.btnOrg:hover {	background-color: #ee4017;color: #fff;}







.tjBox { background: #e6e6e6 url(../images/yonsuite/bg_1.jpg) center center no-repeat; 

background-size:cover ;

padding: 5.2em 0 4.8em;}

.tjBox .tit { font-weight: bold; text-align:center}

.tjBox .tit span { color: #cc0000; }

.tjBox .list { margin-top: 2em; }

.tjBox .list ul { display: flex;  text-align: left;

flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}

.tjBox .list li { margin: 1% 1% 0 0; width: 49.5%;display: flex;flex-direction: column; }

.tjBox .list li:nth-child(2n) { margin-right: 0;}

@media only screen and (max-width:828px) { 

	.tjBox .tit { margin-left:13% ; margin-right: 13%;}

	 .tjBox .list li { width: 100%;}

}

.tjBox .list .lib {

	background-color: #fff;

	-moz-border-radius:1.5em; -webkit-border-radius:1.5em; border-radius:1.5em;

	flex: 1; padding: 5.7% 13.5%;

 display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;

}

.tjBox .list .picb { margin-right: 1.3em;}

.tjBox .list .picb img { display: block; width: 2.37em; height: auto;}



.tjBox .list .name {flex: 1;  color: #cc0000;}

.tjBox .list .intro { width: 100%; margin-top: 1em; color: #434343; }



.bzBox { margin-top: 2em; padding: 2em 0; background-color: #fff;

-moz-border-radius:1.5em; -webkit-border-radius:1.5em; border-radius:1.5em;}

.bzBox .bzList { margin: 2em 3% 0; }

.bzBox .bzList ul { display: flex;  text-align: left;

flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}

.bzBox .bzList li { margin: 1% 1% 0; width: 18%;}

.bzBox .bzList li img  { display: block; width: 100%; height: auto;}



@media only screen and (max-width:828px) { 

	.bzBox .bzList ul { justify-content: center;}

	.bzBox .bzList li { margin: 1% 1% 0; width: 31.33%;}

}





.caseBox { padding: 5.7em 0 4em; }

.caseBox .tit { font-weight: bold; text-align:center}

.caseBox .tit span { color: #cc0000; display: inline-block; margin-right: 0.4em;}

.caseBox .tit_2 { margin-top: 1em; text-align:center}

.caseBox .caseCon { margin: 3.8em auto 0; 

display: flex; justify-content: space-between; align-items:stretch;}

.caseBox .tab { width: 17.5%; background-color: #f5f5f5; font-weight: bold;}

.caseBox .tab ul { height: 100%; display: flex; flex-direction: column;

justify-content: space-between; align-items: stretch; line-height: 3;}

.caseBox .tab li { flex: 1; display: flex; justify-content: center; align-items: center;

cursor: pointer;}

.caseBox .tab li.cur { font-size: 1.1em; color: #cc0000;}

.caseBox .conCZ { width: 81%; }

.caseBox .conC { display: none;}

.caseBox .conC .name { padding-top: 2.5em; font-weight: bold;}

.caseBox .conC .list { padding-bottom: 3em;}

.caseBox .conC .list ul { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}

.caseBox .conC .list li { width: 31.3%; margin: 3% 1% 0;}

.caseBox .conC .list .pic img { width: 5.5em; height: auto;}

.caseBox .conC .list .name {padding-top: 0;}

.caseBox .conC .list .intro { color: #5a5a5a; margin-top: 1em; line-height: 1.2;}



@media only screen and (max-width:828px) { 

	.caseBox .conC .list li { width: 48%; margin: 3% 1% 0;}

}



.servBox {padding: 6em 0 6em;

background: url(../images/yonsuite/bg_2.jpg) center bottom no-repeat;

background-size:cover ;}

.servBox .tit { padding-bottom: 1em; font-weight: bold; text-align:center}



.txt-scroll{ width: 100%; margin-top: 2em; }

.txt-scroll .scrollbox{ width: 100%; white-space: nowrap; overflow:hidden; transition: all .2s; }

.txt-scroll .txt,

.txt-scroll .txt-clone{ display: inline; position: relative; }

.txt-scroll .item { display: inline-block; width: 180px;}

.txt-scroll img { max-width: 180px; max-height: 150px;}