@charset "utf-8";
* { margin:0; padding:0; font-style:normal; font-weight:normal; font-family:Arial,"Microsoft YaHei", "微软雅黑";}
html,body { width:100%; height:100%;}
html,body,img { border:none;}
ul,ol,li { list-style:none;}
dfn { font-family:Arial, Tahoma;}
dfn::before { content: "¥"; padding-right: 2px; font-size: 12px;}
a { text-decoration:none; color: var(--color-primary-7);}
a:hover { text-decoration:none; color: var(--color-warning-7);}
::-webkit-input-placeholder { color:#aaa;}
:-moz-placeholder { color:#999;}
::-moz-placeholder { color:#888;}
:-ms-input-placeholder { color:#aaa;}
.placeholder { color:#aaa;}
.hidden { display: none;}
/*autocomplete*/
.autocomplete:-webkit-autofill,
.autocomplete:-internal-autofill-previewed,
.autocomplete:-internal-autofill-selected { box-shadow: 0 0 0px 1000px #fff inset;}
.autocomplete:-webkit-autofill:focus,
.autocomplete:-internal-autofill-previewed:focus,
.autocomplete:-internal-autofill-selected:focus { box-shadow: 0 0 0px 1000px var(--color-primary-1) inset;}

.layout { width: 1200px; margin: 0 auto;}

.swiper-container img { display: block;}
.swiper-container .swiper-pagination span { border: 2px solid #fff; background-color: #000; cursor:pointer; border-radius:50%; opacity: .5;}
.swiper-container .swiper-pagination span.swiper-pagination-bullet-active { background:var(--color-primary-7); opacity: 1;}

.MainBarWrap { width: 60px; height: 100%; border-right: 1px solid #ddd; background: #f5f5f5; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; box-shadow: 0 0 8px 0 #cbd3e4;}
.MainBarUser { position: relative; padding: 8px 0;}
.MainBarUser:hover { background: #fff;}
.MainBarUser img { border-radius: 50%; display: block; margin: 0 auto; width: 45px; height: 45px; cursor: pointer;}
.MainBarUser div { width: 150px;}
.MainBarUser a { display: block; text-align: center; background-color: var(--color-warning-7); color: #fff; margin: 0 auto; margin-top: 10px; width: 80px; height: 35px; line-height: 35px; border-radius:35px;}
.MainBarUser a:hover { opacity: .8;}
.MainBarUser p { padding-bottom: 8px; font-weight: bold;}
.MainBarUser ol { width: 100%; display: table; table-layout: fixed; text-align: center;}
.MainBarUser ol li { display: table-cell; font-size: 12px;}
.MainBarUser ol li span { display: block; font-size: 18px; padding: 10px 0 3px 0;}

.MainBarMenu { position: absolute; background-color: #fff; top: 0; left: 60px; display: none; padding: 8px; border-right: 1px solid #ddd;  border-bottom: 1px solid #ddd; box-shadow: 5px 5px 8px -4px #cbd3e4, 5px -5px 8px -4px #cbd3e4;}
.MainBarMouse { position: relative;}
.MainBarMouse::before { display: block; font-family: "icofont"; width: 100%; text-align: center; font-size: 28px; line-height: 60px; color: #555;}
.MainBarMouse:hover::before { background: #fff; color: var(--color-primary-7);}
.MainBarIcon a { display: block; color: #555; white-space: nowrap; line-height: 35px; padding: 0 20px;}
.MainBarIcon a:hover { background: #f6f6f6; background-color: var(--color-warning-7); color: #fff; border-radius: 5px;}

.ChangeIden::before { content: "\e92a";}
.UserConfigBar::before { content: "\e989";}
.UserOrder::before { content: "\eb33";}

.HeaderWrap { display: flex;}
.HeaderLogo { height: 90px; padding-right: 50px;}
.HeaderLogo img { height: 100%; display: block;}
.HeaderWrap form { flex: 1; display: flex; justify-content: right; align-items: center;}
.HeaderWrap form div { display: flex; width: 100%;}
#HeaderSearch { border: 2px solid var(--color-primary-7); border-radius: 5px 0 0 5px; height: 50px; line-height: 50px; font-size: 18px; vertical-align: middle; text-indent: 10px; flex: 1; border-right: none; outline: none;}
#HeaderSearch:focus { background-color: var(--color-primary-0);}
.HeaderSearchSubmit { font-family: 'icofont'; font-size: 24px; color: #fff; background-color: var(--color-primary-7); border: none; border-radius: 0 5px 5px 0; width: 54px; height: 54px; line-height: 54px; text-align: center; cursor: pointer; vertical-align: middle;}
.HeaderMenu { background-color: var(--color-primary-7);}
.HeaderMenu .layout { display: flex; /*justify-content: space-between; align-items: center;*/}
.HeaderMenu a { display: block; height: 45px; line-height: 45px; text-align: center; color: #fff; font-size: 16px; padding: 0 15px;}
.HeaderMenu a:hover { background-color: var(--color-primary-5);}

.Footer { background-color: #eee; margin-top: 40px;}
.Footer .Menu { text-align: center; color: #555; padding: 20px 0;}
.Footer .Menu a { font-size: 14px; color: #555; padding: 5px 10px;}
.Footer .Menu a:hover { color: var(--color-primary-7);}
.Footer .Info { padding-bottom: 20px;}
.Footer .Info p { text-align: center; font-size: 12px; color: #999; line-height: 1.8;}
.Footer .Info p a { color: #999;}
.Footer .Info p a:hover { color: var(--color-primary-7);}
.Footer .Blogroll { display: flex; font-size: 12px;}
.Footer .Blogroll::before { content: "友情链接："; white-space: nowrap; font-weight: bold; color: #555; line-height: 1.8;}
.Footer .Blogroll div { padding-bottom: 20px;}
.Footer .Blogroll div a { color: #555; padding: 0 5px; white-space: nowrap; line-height: 1.8;}
.Footer .Blogroll div a:hover { color: var(--color-primary-5);}

/*input*/
.input1 { border: 1px solid #ccc; border-radius: 4px; padding: 10px; outline: none;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.input1:focus { border-color: var(--color-primary-7); background-color: var(--color-primary-0);}

/*动画*/
.animated{-webkit-animation-duration:.6s;-webkit-animation-fill-mode:both;animation-duration:.6s;animation-fill-mode:both}
.animated.faster{-webkit-animation-duration:.25s;animation-duration:.25s}
.animated.slow{-webkit-animation-duration:1s;animation-duration:1s}

.line_pagination { text-align: center; line-height: 30px;}
.line_pagination input,
.line_pagination button { line-height: 30px; border-radius: 3px; font-size: 16px;}
.line_pagination input { width: 60px; text-align: center; border: 1px solid #ccc; margin: 0 5px;}
.line_pagination button { background-color: var(--color-primary-7); color: #fff; border: none; padding: 0 10px; margin-left: 10px; cursor: pointer;}
.line_pagination a { margin: 0 10px; color: var(--color-text-default); padding:5px 10px; border-radius: 3px; background-color: #ddd;}
.line_pagination a.active { background-color: var(--color-primary-7); color: #fff; cursor: default;}

@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.fadeInUp{-webkit-animation:fadeInUp .25s ease;animation:fadeInUp .25s ease}
@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}}
@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}}
.fadeOutUp{-webkit-animation:fadeOutUp .25s ease;animation:fadeOutUp .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.fadeInRight{-webkit-animation:fadeInRight .25s ease;animation:fadeInRight .25s ease}
@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}}
@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}}
.fadeOutRight{-webkit-animation:fadeOutRight .25s ease;animation:fadeOutRight .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}}
@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}}
.fadeOutDown{-webkit-animation:fadeOutDown .25s ease;animation:fadeOutDown .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.fadeInLeft{-webkit-animation:fadeInLeft .25s ease;animation:fadeInLeft .25s ease}
@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}}
@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}}
.fadeOutLeft{-webkit-animation:fadeOutLeft .25s ease;animation:fadeOutLeft .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@keyframes blink { 0% { opacity: 1;} 50% { opacity: 0;} 100% { opacity: 1;}}