@charset "utf-8";
/* CSS Document */
/* Design For QQ:257654 */
/* Date 2021-07-19*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.header-wrap {width: 100%; height: 74px; padding: 0 40px; position: fixed; top: 0; left: 0; z-index: 800;}
.header-logo {width: 310px; margin: 20px 0; background: url(../images/logo.png) no-repeat left center; background-size: auto 100%;}

.menu {padding-bottom: 10px;}
.menu ul li {margin: 0 15px; display: inline-block; position: relative;}
.menu ul li::before {content: ""; width: 0; height: 1px; background: #fff; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); transition: all .3s}
.menu ul li a {display: inline-block; padding: 10px 2px; color: #ddd}
.menu ul li.active a {color: #fff}
.menu ul li:hover a {color: #fff;}
.menu ul li:hover::before,
.menu ul li.active::before {width: 100%; transition: all .3s}

@media screen and (max-width: 768px) {
    .header-wrap {height: 60px; padding: 0 15px;}
    .header-logo {margin: 15px 0;}
    .menu {display: none;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.section {display: flex; flex-wrap: wrap; justify-content: center; align-items: center}
.section-01 {background: url(../images/section-01-bg.jpg) no-repeat center; background-size: cover}
.section-02 {background: url(../images/section-02-bg.jpg) no-repeat center; background-size: cover}
.section-03 {background: #222429}
.section-04 {background: url(../images/section-04-bg.jpg) no-repeat center; background-size: cover}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.main-wrap {width: 1200px; height: auto; margin: auto}
.main-wrap .title-En {font-size: 70px; color: #ff3600; font-family: "Fjalla"}
.main-wrap .title-Cn {font-size: 70px; color: #fff; letter-spacing: 4px}
.main-wrap .title-Lg {font-size: 50px; color: #fff; letter-spacing: 4px}
.main-wrap .title-Sm {font-size: 20px; color: #fff; font-weight: bold; letter-spacing: 4px; margin-top: 25px}

.main-wrap .video-wrap {background: #fff; border-radius: 6px; padding: 5px; box-shadow: 3px 3px 10px rgba(0,0,0,.3); position: relative; cursor: pointer;}
.main-wrap .video-wrap img {border-radius: 4px; display: block;}
.main-wrap .video-wrap i {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 100px}

.main-wrap .main-unit {width: 300px; color: #ddd; margin-top: 20px}
.main-wrap .main-unit .unit-title {font-size: 20px; color: #fff; font-weight: bold}
.main-wrap .main-unit .unit-text {line-height: 22px; margin: 10px 0;}
.main-wrap .main-unit img {width: 100%; height: auto; border-radius: 4px;}

@media screen and (max-width: 1360px) {
    .main-wrap {width: 100%; padding: 0 40px;}
    .main-wrap .title-En {font-size: 55px}
    .main-wrap .title-Cn {font-size: 55px}
    .main-wrap .title-Sm {font-size: 15px}
    .main-wrap .video-wrap img {width: 570px;}
}

@media screen and (max-width: 768px) {
    .main-wrap {width: 100%; padding: 0 15px;}
    .main-wrap .title-En {font-size: 45px}
    .main-wrap .title-Cn {font-size: 45px}
    .main-wrap .title-Sm {font-size: 15px; margin: 10px 0}
    .main-wrap .video-wrap img {width: 100%;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.adv-wrap {margin-top: 25px; color: #cdc6b4;}
.adv-unit {width: calc(33.33% - 15px); height: 220px; font-size: 16px; line-height: 25px; background-color: rgba(0,0,0,.3); background-position: center; background-repeat: no-repeat; background-size: cover; transition: all .3s}
.adv-unit .adv-title {font-size: 24px; color: #efeadd; margin-bottom: 10px;}

.adv-unit:nth-child(-n+3) {margin-bottom: 12px;} /*123*/
.adv-unit:nth-child(n+4) {margin-top: 12px;} /*456*/
.adv-unit:nth-child(2n) {padding: 20px;} /*246*/

.adv-unit:hover {background-color: rgba(0,0,0,.7); transition: all .3s}

@media screen and (max-width: 768px) {
    .adv-wrap {margin-top: 0;}
    .adv-unit {width: 100%; height: auto; font-size: 14px; line-height: 22px; margin: 7px 0!important; padding: 10px!important;}
    .adv-unit .adv-title {font-size: 18px;}
    .adv-unit:nth-child(2n-1) {display: none;} /*135*/
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.login-wrap {width: 10%; height: 100%; background: #282a37; position: relative;}
.login-wrap::before {content: ""; width: 500%; height: 100%; background: #282a37; top: 0; left: 0; transform:  skewX(-15deg); display: block} 

.login-nav {width: 300px; height: 450px; border-radius: 15px; border: 1px solid rgba(255,255,255,.1); color: #fff; padding: 25px; position: absolute; top: 50%; transform: translate(-50%,-50%); transition: all .3s}
.login-nav-left {left: calc(25% - 30px); transition: all .7s}
.login-nav-right {left: calc(75% - 30px); transition: all .7s}
.login-nav i {font-size: 70px;}
.login-nav span {font-size: 26px; margin: 15px 0; cursor: default;}
.login-nav p {color: #858792; line-height: 28px; font-size: 15px; cursor: default;}
.login-nav a {width: 100%; height: 45px; line-height: 45px; border-radius: 4px; text-align: center; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); display: inline-block;}

.login-nav:hover {border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.3); box-shadow: 3px 3px 7px rgba(0,0,0,.1); transition: all .3s}
.login-nav:hover a {background: #ff3600; color: #fff; transition: all .3s}
.login-nav-left:hover {left: calc(25% - 10px); transition: all .7s}
.login-nav-right:hover {left: calc(75% - 50px); transition: all .7s}

@media screen and (max-width: 768px) {
    .login-nav {width: calc(100% - 80px); height: auto; padding: 15px; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.3); box-shadow: 3px 3px 7px rgba(0,0,0,.1)}
    .login-nav-left {left: 50%; transform: translate(-50%,-105%)}
    .login-nav-right {left: 50%; transform: translate(-50%,5%)}
    .login-nav-left:hover,.login-nav-right:hover {left: 50%;}
    .login-nav span {margin: 5px 0 15px 0;}
    .login-nav a {background: #ff3600; color: #fff}
    .login-nav p {display: none;}
}


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.main-add {font-size: 16px; color: #ddd; margin: 10px 0;}
.icpname {font-size: 12px; color: #fff; text-decoration: underline;}

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*移动端Css修正*/
@media screen and (max-width: 1360px) {
	#pp-nav.right {right: -8px;}
}