@charset "UTF-8";
@keyframes xuanzhuannav { 0% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); } }
* { padding: 0; margin: 0; font-family: "microsoft yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; }
* ul, * li { list-style: none; }
* a { color: inherit; text-decoration: none; }

body header.header { width: 100%; height: 90px; position: fixed; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.8); z-index: 1000; }
body header.header .header-box { width: 80%; margin: 0 auto; min-width: 1200px; box-sizing: border-box; }
body header.header .header-box:after { content: ""; clear: both; display: inherit; }
body header.header .header-box .header-logo { width: 20%; /*min-width: 360px;*/ height: 90px; float: left; text-align: center; }
body header.header .header-box .header-logo img { margin-top: 20px; width: 130px; }
body header.header .header-box .header-nav { width: 65%; min-width: 800px; float: left; height: 100%; }
body header.header .header-box .header-nav > ul { list-style: none; height: 100%; }
body header.header .header-box .header-nav > ul:after { content: ""; display: inherit; clear: both; }
body header.header .header-box .header-nav > ul > li { float: left; width: 14%; height: 90px; line-height: 90px; color: white; text-align: center; font-size: 14px; position: relative; }
body header.header .header-box .header-nav > ul > li span { display: inline-block; width: 100%; cursor: pointer; }
body header.header .header-box .header-nav > ul > li:hover .header-nav-second { display: block; }
body header.header .header-box .header-nav > ul > li a { display: inline-block; width: 100%; }
body header.header .header-box .header-nav > ul > li .header-nav-second { position: absolute; width: 150%; left: -25%; display: none; }
body header.header .header-box .header-nav > ul > li .header-nav-second li { height: 50px; line-height: 50px; border-bottom: 1px solid white; background: #252525; position: relative; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background: transparent; transition: all 0.3s; transform: scaleX(0); transform-origin: 0; }
body header.header .header-box .header-nav > ul > li .header-nav-second li a { position: relative; z-index: 1; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:hover:before { transform: scaleX(1); background: grey; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-last-child(1) { border: none; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(0) { animation: xuanzhuannav linear 300ms 0ms; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(1) { animation: xuanzhuannav linear 300ms 50ms; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(2) { animation: xuanzhuannav linear 300ms 100ms; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(3) { animation: xuanzhuannav linear 300ms 150ms; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(4) { animation: xuanzhuannav linear 300ms 200ms; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(5) { animation: xuanzhuannav linear 300ms 250ms; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(6) { animation: xuanzhuannav linear 300ms 300ms; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(7) { animation: xuanzhuannav linear 300ms 350ms; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(8) { animation: xuanzhuannav linear 300ms 400ms; }
body header.header .header-box .header-nav > ul > li .header-nav-second li:nth-child(9) { animation: xuanzhuannav linear 300ms 450ms; }
body header.header .header-goshop { position: absolute; right: 0; width: 150px; height: 90px; top: 0; }
body header.header .header-goshop a { display: block; height: 100%; line-height: 90px; color: white; margin-left: 34px; }
body header.header .header-goshop img { position: absolute; left: 0; height: 30px; top: 30px; z-index: 100000; }
@media screen and (max-width: 1300px) { body header.header .header-goshop { display: none; } }
body section { /*min-width: 1200px;*/ width: 100%; }
body section.banner > div { position: relative; }
body section.banner > div img.bg { width: 100%; height: auto; }
body section.banner > div img.bg-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
body section.index-main .main-1 { margin: 25px auto; width: 900px; }
body section.index-main .main-1:after { content: ""; display: inherit; clear: both; }
body section.index-main .main-1 ul { width: 900px; }
body section.index-main .main-1 ul li { float: left; width: 300px; }
body section.index-main .main-1 ul li .main1-img { margin: 30px 0; text-align: center; }
body section.index-main .main-1 ul li .main1-title { font-size: 24px; font-weight: bold; text-align: center; }
body section.index-main .main-1 ul li .main1-subtitle { font-size: 16px; text-align: center; width: 200px; margin: 10px auto 10px; }
body section.index-main .main-1 ul:after { content: ""; display: inherit; clear: both; }
body section.index-main .main-2 { position: relative; margin: 20px 0; }
body section.index-main .main-2 .main2-bg { text-align: center; width: 1200px; margin: 0 auto; }
body section.index-main .main-3 { margin: 80px auto 80px; width: 1200px; text-align: center; }
body section.index-main .main-3 .main3-title { font-size: 34px; font-weight: bold; line-height: 35px; height: 35px; }
body section.index-main .main-3 .main3-subtitle { font-size: 12px; color: grey; line-height: 35px; height: 35px; }
body section.index-main .main-3 .main3-content { width: 1200px; margin: 30px auto; }
body section.index-main .main-3 .main3-content .main3-box { float: left; width: 300px; box-sizing: border-box; }
body section.index-main .main-3 .main3-content .main3-box:hover .main3-imgdes { color: #666; }
body section.index-main .main-3 .main3-content .main3-box .main3-img { padding: 5px; }
body section.index-main .main-3 .main3-content .main3-box .main3-img img { width: 100%; }
body section.index-main .main-3 .main3-content .main3-box .main3-imgdes { font-size: 22px; font-weight: bold; text-align: center; height: 40px; line-height: 40px; }
body section.index-main .main-3 .main3-content:after { content: ""; display: inherit; clear: both; }
body section.index-main .main-4 { margin: 50px 0; width: 100%; min-width: 1200px; height: 187px; }
body section.index-main .main-4 .main4-bg { width: 100%; height: 100%; background: url("../dist/美妆大集模板3_18.jpg") no-repeat center center; }
body section.index-main .main-5 { width: 100%; min-width: 1200px; margin: 50px 0; }
body section.index-main .main-5 .main5-content { width: 1200px; margin: 0 auto; height: 400px; }
body section.index-main .main-5 .main5-content:after { content: ""; display: inherit; clear: both; }
body section.index-main .main-5 .main5-content .main5-left { float: left; width: 600px; }
body section.index-main .main-5 .main5-content .main5-left ul li { float: left; width: 200px; text-align: center; padding: 30px 0; height: 200px; box-sizing: border-box; }
body section.index-main .main-5 .main5-content .main5-left ul:after { content: ""; display: inherit; clear: both; }
body section.index-main .main-5 .main5-content .main5-right { float: left; width: 500px; text-align: center; height: 400px; }
body section.index-main .main-5 .main5-content .main5-right img { width: auto; height: 400px; transition: all linear 0.3s; cursor: pointer; position: relative; left: 0; }
body section.index-main .main-5 .main5-content .main5-right img:hover { left: -20px; }
body section.news-center { width: 1200px; margin: 0 auto; text-align: center; }
body section.news-center .news-title-box { width: 300px; margin: 50px auto 50px; position: relative; }
body section.news-center .news-title-box .news-title { display: inline-block; font-size: 36px; font-weight: bold; text-align: center; height: 50px; line-height: 50px; padding: 0 0.5em; z-index: 10; background: white; position: relative; }
body section.news-center .news-title-box:after { content: ""; height: 1px; background: grey; width: 100%; position: absolute; top: 50%; left: 0; z-index: 1; }
body section.news-center .news-content { width: 1200px; }
body section.news-center .news-content ul .news-box { width: 400px; box-sizing: border-box; padding: 0 10px; float: left; }
body section.news-center .news-content ul .news-box:hover .news-content-title { color: #444; }
body section.news-center .news-content ul .news-box .news-content-img { overflow: hidden; }
body section.news-center .news-content ul .news-box .news-content-img img { width: 100%; transition: all 0.3s;height:240px }
body section.news-center .news-content ul .news-box .news-content-img img:hover { transform: scale(1.1); }
body section.news-center .news-content ul .news-box .news-content-title { font-size: 18px; font-weight: bold; white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; height: 60px; line-height: 60px; text-align: left; }
body section.news-center .news-content ul .news-box .news-content-title:hover { color: #444; }
body section.news-center .news-content ul .news-box .news-content-subtitle { font-size: 12px; color: grey; line-height: 20px; text-align: left; height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-indent: 2em; letter-spacing: 1px; }
body section.news-center .news-content ul .news-box .news-content-subtitle:hover { color: #757575; }
body section.news-center .news-content ul:after { content: ""; display: inherit; clear: both; }
body section.news-center .learn-more { font-size: 20px; color: grey; padding: 10px 20px; border: 1px solid lightgrey; margin: 50px auto 50px; display: inline-block; font-family: monospace; transition: all 0.2s linear; cursor: pointer; }
body section.news-center .learn-more a { font-size: 20px; color: grey; display: inline-block; font-family: monospace; transition: all 0.2s linear; cursor: pointer; }
body section.news-center .learn-more span { font-family: monospace; position: relative; left: 0; }
body section.news-center .learn-more:hover { background: lightgrey; color: white; }
body section.news-center .learn-more:hover span { left: -5px; }
body section.site-form { width: 100%; min-width: 1200px; height: 750px; background: url("../dist/美妆大集模板3_30.jpg") no-repeat center center; }
body section.site-form .site-form-title { text-align: center; padding: 50px 0; }
body section.site-form .site-form-box { width: 600px; margin: 0 auto; }
body section.site-form .site-form-box .site-form-item { width: 600px; box-sizing: border-box; margin-bottom: 20px; }
body section.site-form .site-form-box .site-form-item input { height: 60px; width: 600px; font-size: 30px; padding: 15px 20px; box-sizing: border-box; border: none; }
body section.site-form .site-form-box .site-form-item input::-webkit-input-placeholder { color: rgba(169, 177, 188, 0.89); font-size: 26px; text-align: left; }
body section.site-form .site-form-box .site-form-item input.is-invalid { box-shadow: inset 0 0 10px red, 0 0 10px red; }
body section.site-form .site-form-box .site-form-item textarea { height: 240px; width: 600px; font-size: 30px; padding: 15px 20px; box-sizing: border-box; border: none; }
body section.site-form .site-form-box .site-form-item textarea::-webkit-input-placeholder { color: rgba(169, 177, 188, 0.89); font-size: 26px; text-align: left; }
body section.site-form .site-form-box .site-form-item textarea.is-invalid { box-shadow: inset 0 0 10px red, 0 0 10px red; }
body section.site-form .site-form-box .site-from-submit { display: block; font-size: 20px; color: #fff; text-align: center; border-radius: 30px; line-height: 70px; height: 70px; width: 292px; background: #fb6027; margin: 32px auto 56px; text-decoration: none; border: none; cursor: pointer; outline: none; }
body section.site-form .site-form-box .site-from-submit:active { background: #eb5725; }
body section.site-form .site-form-box .site-form-success-bg { position: fixed; width: 100vw; height: 100vh; background: #00000054; left: 0; top: 0; z-index: 1001; }
body section.site-form .site-form-box .site-form-success { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; background: white; z-index: 1002; }
body section.site-form .site-form-box .site-form-success img { cursor: pointer; }
body footer.footer { width: 100%; min-width: 1200px; height: 300px; padding-top: 50px; box-sizing: border-box; background: rgba(35, 35, 35, 0.89); }
body footer.footer .footer-content { margin: 0 auto; width: 1200px; height: 250px; }
body footer.footer .footer-content:after { content: ""; clear: both; display: inherit; }
body footer.footer .footer-content .footer-left { width: 300px; box-sizing: border-box; padding-left: 120px; margin-top: 20px; float: left; }
body footer.footer .footer-content .footer-left .footer-nav-first { color: white; }
body footer.footer .footer-content .footer-left .footer-nav-first .footer-nav-first-child { font-size: 14px; line-height: 25px; padding-left: 1em; position: relative; }
body footer.footer .footer-content .footer-left .footer-nav-first .footer-nav-first-child a { cursor: pointer; }
body footer.footer .footer-content .footer-left .footer-nav-first .footer-nav-first-child a { color: white; text-decoration: none; }
body footer.footer .footer-content .footer-left .footer-nav-first .footer-nav-first-child a:hover { color: #b7b3b3; }
body footer.footer .footer-content .footer-left .footer-nav-first .footer-nav-first-child .footer-nav-deal { position: absolute; left: -2px; top: 2px; cursor: pointer; }
body footer.footer .footer-content .footer-left .footer-nav-first .footer-nav-first-child .footer-nav-deal img { transition: all 0.2s; width: 14px; height: 14px; }
body footer.footer .footer-content .footer-left .footer-nav-first .footer-nav-first-child .footer-nav-first-child-span { display: inline-block; cursor: pointer; }
body footer.footer .footer-content .footer-left .footer-nav-first .footer-nav-second { display: none; box-sizing: border-box; padding-left: 0.5em; }
body footer.footer .footer-content .footer-left .footer-nav-first .active .footer-nav-deal img { width: 14px; height: 14px; transform: rotate(90deg); }
body footer.footer .footer-content .footer-left .footer-nav-first .active .footer-nav-second { display: block; }
body footer.footer .footer-content .footer-middle { width: 600px; float: left; margin-top: 35px; box-sizing: border-box; padding-left: 150px; }
body footer.footer .footer-content .footer-middle p { color: white; font-size: 14px; line-height: 30px; }
body footer.footer .footer-content .footer-right { width: 300px; float: left; }
body footer.footer .footer-content .footer-right .footer-right-top { width: 150px; margin: 10px auto 30px; }
body footer.footer .footer-content .footer-right .footer-right-top:after { content: ""; clear: both; display: inherit; }
body footer.footer .footer-content .footer-right .footer-right-top .footer-icon { width: 50px; float: left; text-align: center; }
body footer.footer .footer-content .footer-right .footer-right-top .footer-icon img { width: 30px; height: auto; cursor: pointer; }
body footer.footer .footer-content .footer-right .footer-right-top .footer-icon img:hover { background: black; border-radius: 50%; box-shadow: 0 0 20px grey; }
body footer.footer .footer-content .footer-right .footer-right-bottom { width: 300px; }
body footer.footer .footer-content .footer-right .footer-right-bottom img { width: 100px; height: 100px; margin: 0 100px; }

/*# sourceMappingURL=style.css.map */