@import './reset.css';
/* @import './transition.css'; */

/* html{background: url(http://www.uniceramics.com.cn/live/images/pc-bg.jpg) #fff fixed repeat-y;} */
#root {margin: 0 auto; width:100%;}

@font-face {
    font-family: 'MyCustomFont';
    src: url('./fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
   
  body {
    font-family: 'MyCustomFont', sans-serif;
  }

html{background: #fff;}
body{
	background: #fff; margin:0 auto; overflow-y: scroll;
    color: #404d5b;
	font-weight: 500;
	font-size: 1.05em;
	/* font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif; */
    font-family: 'Encode Sans', sans-serif;
}
.title{font-family: 'MyCustomFont', sans-serif;}

#nprogress .bar {background: #d70e19!important;}

.pages-base{min-height: calc( 100vh - 167px - 274px - 46px );width:1200px; margin:40px auto 0 auto; padding-top:10px; box-sizing: border-box;}

.mobile-hide{display:block!important;}
.pc-hide{display:none!important;}


.ell{display: inline-block; overflow:hidden;  text-overflow:ellipsis;  -webkit-text-overflow:ellipsis; white-space:nowrap;}
.ell2{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ell3{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.flexbox{display:flex;}

.button-submit{display: block; height:48px; line-height:48px; text-align: center; font-size:20px; font-weight: 300; margin-top:40px; background: #04367b; color:#fff; border-radius: 5px;}
.button-submit:active{opacity: .8; color:#fff;}

.dashed-elem{position: absolute; z-index:999999; display: flex; align-items: center; justify-content: center; font-size:16px; border:1px dashed #333; color:#666; user-select: none;}


.main-button {width: 190px; height: 50px; overflow: hidden; -webkit-transition: color .5s; transition: color .5s; position: relative; border: 1px solid #141414; line-height: 100%; text-align: center; cursor:pointer; background: #fff;}
.main-button .hover-background {position: absolute;top: 0;right: 0;height: 100%;width: 0;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
.main-button .text {position:relative; display: flex;justify-content: space-between;align-items: center; padding:0 12px;}
.main-button .text i.icon{font-size:16px; line-height: 16px;}
.main-button:hover {color: #fff;}
.main-button .hover-background {background: #141414;}
.main-button:hover .hover-background {left: 0;right: auto;width: 100%;}
  
.main-button.red{border: 1px solid #ef4e3a; background:#ef4e3a; color:#fff;}
.main-button.red:hover{color:#ef4e3a;}
.main-button.red .hover-background{background: rgb(255,255,255);}
.main-button.transparent{border: 1px solid #fff; background:none; color:#fff;}
.main-button.transparent:hover{color:#fff;}
.main-button.transparent .hover-background{background: rgba(0,0,0,.5);}


input[type=checkbox] {
    cursor: pointer;
    position: relative;
    width: 15px;
    height: 15px;
    font-size: 14px;
}

input[type=checkbox]::after {
    position: absolute;
    top: 0;
    color: #000;
    width: 15px;
    height: 15px;
    display: inline-block;
    visibility: visible;
    padding-left: 0px;
    text-align: center;
    content: ' ';
    border-radius: 3px
}

input[type=checkbox]:checked::after {
    content: "✓";
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    background-color: #c9182a;
}


.breadcrumb{padding:10px 0; display:flex; font-size:14px; align-items: center;}
.breadcrumb a{color:#555;  font-size:14px;}
.breadcrumb a:hover{text-decoration: underline;}
.breadcrumb p{color: #888; font-size:14px;}
.breadcrumb span::after{content:">"; margin:0 10px; color:#666;}


/* 弹出层相关 */
.popup-box{visibility: hidden; position: fixed; z-index:9999; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0); transition-duration: 300ms; display: flex;}
.popup-box.show{visibility: visible; background:rgba(0,0,0,.3);}
.popup-box .wrap{margin: auto; transform: scale(.7); opacity:0; transition-duration: 300ms; position: relative; z-index:99;}
.popup-box.show .wrap{transform: scale(1); opacity:1;}
.popup-box .close{opacity:0; position: absolute; cursor: pointer;-webkit-transition: all .5s;transition: all .5s; z-index: 10; top:0;right:0; width:50px; height:50px; background:url('../images/icon_close.png') center no-repeat; background-size:60% 60%;}
.popup-box.show .close{transform: rotate(90deg); opacity:0;}
.popup-box .mask{position: absolute; z-index:9; top:0; bottom:0; right:0; left:0;}



@media screen and (max-width: 500px) {
    body,html{overflow-x: hidden;}
    .mobile-hide{display:none!important;}
    .pc-hide{display:block!important;}
    .breadcrumb{display: none;}

    .pages-base{
        min-height:auto;
        /* min-height: calc( 100vh - 85px - 81px - 274px );  */
        width:414px; margin:auto; margin-top:25px; padding-top:0;}
}