* { margin:0; padding:0; font-family:"PingFang SC"; box-sizing:border-box; }
html,body { position: relative; display: flex; flex-flow: column wrap; margin:0; width:100%; background:#fff; font-size:16px;  }
@media screen and (max-width:1800px) and (min-width:1681px) { html,body { font-size:15px; } }
@media screen and (max-width:1680px) and (min-width:1441px) { html,body { font-size:14px; } }
@media screen and (max-width:1440px) and (min-width:1367px) { html,body { font-size:13px; } }
@media screen and (max-width:1366px) and (min-width:1281px) { html,body { font-size:12px; } }
@media screen and (max-width:1280px) and (min-width:1025px) { html,body { font-size:11px; } }
@media screen and (max-width:1024px) { html,body { font-size:10px; } }

/***	Common	***/
input { outline:none; background:transparent; border:none; outline:medium; }
input:focus { outline: none; background-color: transparent; }
input::selection{ background:transparent; }
input::-moz-selection{ background:transparent; }

.pc { display:block !important; }
.mob { display:none !important; }

a { color:#333333; text-decoration:none; cursor:pointer; }
a:hover { color: #005CBA; text-decoration:none; transition:color .5s; }
img { border:0; }
form, ul { margin:0; padding:0; }
li { list-style:none; }

.fs12{ font-size: 0.75rem; }
.fs14{ font-size: 0.875rem; }
.fs16{ font-size: 1rem; }
.fs18{ font-size: 1.125rem; }
.fs20{ font-size: 1.25rem; }
.fs24{ font-size: 1.5rem; }

.bgC01{ background: #191919; }
.bgC02{ background: #161616; }
.bgC03{ background: #151515; }

.body { display: flex; flex-flow: row wrap; position:relative; width:100%; margin:0 auto; padding: 0 2rem; max-width: 1200px; }
.btn{ display: inline-block; text-align: center; width: 7.5rem; height: 2.5rem; line-height: 2.5rem; border-radius: 0.25rem; }


/***	Header	***/

header{ position: fixed; width: 100%; height: 6rem; line-height: 6rem; z-index: 99; top: 0; }
header .header-center{ position: relative; width: 100%; height: 100%;background: #02b0ef; transform:translateY(0rem); -webkit-transform:translateY(0rem); -moz-transform:translateY(0rem); transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; }
header .body{ position: relative; display: flex; display: -webkit-flex; align-content:center; justify-content: flex-start; flex-flow: row nowrap; z-index: 2; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; height: 100%; }

header .logo { position: relative; width: 12.5%;height: 6rem; line-height: 0; margin-right: 4%;  }
header .logo img{ position:absolute; width: 100%; line-height: 0; top: 0; bottom: 0; margin: auto; }

header .nav{ position: relative;display: -webkit-box; display: flex; height: 6rem; line-height: 6rem; justify-content: flex-end; width:87.5%; margin-right: 4.5%; }
header .nav a{ position:relative; font-size: 1.25rem; height: 6rem; line-height: 6rem; font-weight: 400; color: #FFFFFF; padding: 0 1.75rem; white-space: nowrap; }

.header-hide .header-center{ transform:translateY(-6rem); -webkit-transform:translateY(-6rem); -moz-transform:translateY(-6rem); transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; }
.header-hide:hover .header-center { transform:translateY(0rem); -webkit-transform:translateY(0rem); -moz-transform:translateY(0rem); transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; }


/***	Footer	***/

footer{ background: #02b0ef; display:flex; flex-flow:column nowrap; }

footer .footer-info{ position: relative; width: 100%; margin:7rem auto; display: flex; flex-flow: row nowrap; justify-content: space-between ; }

footer .footer-info .left-box{ position: relative; width: 50%;  }
footer .footer-info .left-box img{ position: relative; width: 50%;  }


footer .footer-info .right-box{ position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; }

footer .footer-info .right-box{ position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; }
footer .footer-info .right-box .info-item{ position: relative; -margin-right: 6rem; font-size: 1.125rem; }

footer .footer-info .right-box .info-item a{ COLOR:#FFFFFF;}

footer .footer-info .right-box .info-item .fullwidth{ margin-bottom: 1rem; color: #FFFFFF; font-size: 1.25rem; }
footer .footer-info .right-box .info-item .tel{ position: relative; display: inline-block; margin-right: 1rem;  }
footer .footer-info .right-box .info-item .email a{ color: #FFFFFF; }
footer .footer-info .right-box .info-item .note{ color: #999999; font-size: 0.875rem; line-height: 1.5rem; }

footer .copyright { width:100%; margin:2rem auto; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; }
footer .copyright span { color:#ffffff; }
footer .copyright a { margin:0 4rem; color:#ffffff; }

#backtop { position: fixed; right: -80px; bottom: 2rem; width: 44px; height: 60px; background: url("../img/top.png") center no-repeat; z-index: 10; cursor: pointer; }

.tit-headline{ position: relative; width: 100%; height: 1.875rem; color:#FFFFFF; font-size: 1.875rem; font-weight: bold; line-height: 1.875rem; margin-bottom: 1.5rem; }



/***	Main	***/

#body{ position: relative; width: 100%; padding-top: 6rem; }
main{ position: relative; width: 100%; overflow-x: hidden; min-height:calc(100vh - 26rem); } 

.banner{ position: relative; width: 100%; line-height: 0; }

#bannerStage { position:relative; display: block; width:100%; overflow: hidden; background: #151415 url("../img/text.png") left bottom no-repeat; background-position: 20% bottom; background-size: 30% auto; }
#bannerStage div.stage { position:absolute; width:100%; height:100%; overflow:hidden; line-height: 0px; z-index: 20; }
#bannerStage div.stage .body{ position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; z-index: 20; height: 100%;  }

#bannerStage div.stage .body .pic{ position: relative; width: 52%; height: 100%; margin: auto; }
#bannerStage div.stage .body .pic .pic-img{ position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; height: 0; padding-bottom: 74%; width:-moz-calc(100% - 2rem); width:-webkit-calc(100% - 2rem); width: calc(100% - 2rem); z-index: 10; }
#bannerStage div.stage .body .pic .pic-img img{ position: relative; width: 100%; z-index: 11; }
#bannerStage div.stage .body .pic .pic-img:after{ position: absolute; background: url("../img/pic_bg.png") center no-repeat; width:-moz-calc(100% + 2rem); width:-webkit-calc(100% + 2rem); width: calc(100% + 2rem); 
	height:-moz-calc(100% - 4rem); height:-webkit-calc(100% - 4rem); height: calc(100% - 4rem); content: ""; left: -1rem; top: 1rem; background-size: 100% 100%; z-index: 1;}

 
#bannerStage div.stage .body .desc{ position: relative; width: 48%; padding-top: 10rem; z-index: 20; }
#bannerStage div.stage .body .desc h1{ position: relative; font-size: 5.4rem; color:#FFFFFF; line-height: 5.4rem; margin-bottom: 7rem; }
#bannerStage div.stage .body .desc h1:after{ position: absolute; width: 2.875rem; height: 0.375rem; background: #FFFFFF; content: ""; left: 0; bottom: -3.5rem; }

#bannerStage div.stage .body .desc h2{ position: relative; font-size: 2.5rem; color:#FFFFFF; line-height: 2.5rem; margin-bottom: 1.5rem;  }
#bannerStage div.stage .body .desc p{ position: relative; font-size: 1.25rem; color:#8e8b8e; line-height: 1rem; }

#bannerStage #goLeft{ position: absolute; left: 0; top: 0; bottom: 0; margin: auto; height: 50%; background: url("../img/left.svg") center no-repeat; width: 6rem; background-size: 100% auto; cursor: pointer; z-index: 20;}
#bannerStage #goRight{ position: absolute; right: 0; top: 0; bottom: 0; margin: auto; height: 50%; background: url("../img/left.svg") center no-repeat; width: 6rem; background-size: 100% auto; -webkit-transform: rotate(180deg); transform: rotate(180deg); cursor: pointer; z-index: 20; }


.home-pagination{ position: absolute; width: 100%; z-index: 3; bottom: 1rem; height: 32px; padding: 9px 0; text-align: center; margin: 0; display: none; }
.home-pagination li{ position: relative; display: inline-block; line-height: 2rem; height: 2rem; color: #FFFFFF; opacity: 0.5; padding:0 1rem; cursor: pointer; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; font-size: 1.125rem;  }
.home-pagination li.active{ opacity: 1; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s;  }

.home-pagination li.goLeft, .home-pagination li.goRight{ /*opacity: 1;*/ }
.home-pagination li.goLeft:hover, .home-pagination li.goRight:hover{ opacity: 1; }
.home-pagination li.goLeft:before, .home-pagination li.goLeft:after, .home-pagination li.goRight:before, .home-pagination li.goRight:after{ position: absolute; background: #FFFFFF; height: 2px; top:-moz-calc(50% - 1px); top:-webkit-calc(50% - 1px); top: calc(50% - 1px); width: 0.625rem;  content: ""; -webkit-transform-origin:right; transform-origin:right; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; }
.home-pagination li.goLeft:before{ left: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; }
.home-pagination li.goLeft:after { left: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; }

.home-pagination li.goRight:before{ right: 1rem;-webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; }
.home-pagination li.goRight:after { right: 1rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; }

main .fullwidth{ position: relative; width: 100%; }
main .bor01{ -border-top: #191919 solid 3.5rem; }
main .pic-box{ line-height: 0; }

main .item-box{ padding: 5rem 0 10rem; }
main .item-box .body{ position: relative; display: flex; flex-flow: nowrap; justify-content: space-between; }

main .item-box .body .left-box{ position: relative; width: 50%;  }
main .item-box .body .right-box{ position: relative; width: 50%;  }
.dlz{ margin-left: 15rem; }
.dlz li{ position: relative; list-style-type: decimal-leading-zero; color: #FFFFFF; font-size: 1.875rem; margin-bottom: 6rem; cursor: pointer; transition: all .4s; -moz-transition: all 1s; -webkit-transition: all .4s;  }
.dlz li:last-child{margin-bottom: 0rem; }

.dlz li.active{ color: #02b0ef; font-size: 2.25rem; transition: all .4s; -moz-transition: all 1s; -webkit-transition: all .4s;  }


.item{ position: relative; max-height: 0; overflow: hidden; transition: all .4s; -moz-transition: all 1s; -webkit-transition: all .4s; opacity: 0; }
.item.active{ position: relative; max-height: 999px; overflow: hidden; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; opacity: 1; }

.item ul{ border-left: 1px solid #02b0ef; }
.item ul li{ position: relative;padding-left: 4rem; font-size: 1.875rem; line-height: 1.875rem; color: #FFFFFF; margin-bottom: 4rem; }
.item ul li:before{ position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50% 50%; background: #02b0ef; content: ""; left: 2.5rem; top: 0.6875rem; } 

main .row{ padding: 6rem 0; }

.logo-tit{position: relative; margin: 0 auto; background: #02b0ef; height: 5.625rem; line-height: 5.625rem; font-size: 3.75rem; color: #FFFFFF; margin-bottom: 6rem; padding: 0 3.5rem; }
.logo-box{ position: relative; width: 100%; display: flex; flex-flow: row wrap; border-top: 1px solid #454545; border-bottom: 1px solid #454545;  }
.logo-box .logo{ position: relative; line-height: 0; }
.logo01{ width: 21%; }.logo02{ width: 27%; }.logo03{ width: 22%; }.logo04{ width: 30%; }.logo05{ width: 21%; }.logo06{ width: 27%; }.logo07{ width: 22%; }.logo08{ width: 30%; }.logo09{ width: 26%; }.logo10{ width: 23%; }.logo11{ width: 23%; }.logo12{ width: 28%; }.logo13{ width: 26%; }.logo14{ width: 23%; }.logo15{ width: 23%; }.logo16{ width: 28%; }


.noselect {

-webkit-touch-callout: none; /* iOS Safari */

-webkit-user-select: none; /* Chrome/Safari/Opera */

-khtml-user-select: none; /* Konqueror */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */

user-select: none; /* Non-prefixed version, currently

not supported by any browser */

}




