/* 根元素 */
html{
    height: 100%;
}

body{
    padding-top: 3.5em;
    font-family: "Montserrat", 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;

    --primary: #f74a49;
    --secondly: rgba(0, 0, 0, .45);

    --red: #f74a49;
    --dark-red: #b93636;

    --light-font: #777;
    --light-border: #ccc;

    --header-border: 1px #e0e0e0 solid;

    --light-shadow: 0 0.5em 1em rgba(0, 0, 0, .1);
}

body.no-header{
    padding-top: 0;
}

body{
    height: 100%;
    display: flex;
    flex-direction: column;
}

main{
    flex: 1;
}

a{
    color: var(--red);
}

/* IconFont Fix */
.presto-icon{
    font-size: inherit;
}

/* FontAwesome 字体魔改 */
.fa.customed{
    width: 2em;
    color: #fff;
    padding: .5em;
    font-size: .85em;
    text-align: center;
    background: var(--red);
    border-radius: 5em;
}

.fa.customed:first-child{
    margin-right: 1em;
}
.fa.customed:last-child{
    margin-left: 1em;
}

.btn.red .fa.customed{
    color: var(--red);
    background: #fff;
}

/* 输入框魔改 */
input[type*="date"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea{
    padding: .75em;
}

select{
    padding-right: 1.75em;
}

/* 按钮样式重置与增强 */
.btn{
    border-radius: 2em;
    transition: background .3s, box-shadow .3s;
}

.btn:hover{
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, .1);
}

.btn.red:active{
    background: var(--dark-red);
}

.btn.long{
    padding: .5em 2em;
}

.btn.longer{
    padding: .5em 5em;
}

.btn.secondly{
    color: var(--red);
    border-color: var(--red);
}

blockquote{
    font-style: normal;
    background: #feeded;
    border-color: var(--red);
}

/* 表单框组合 */
.input-group{
    display: flex;
}
.input-group input{
    flex: 1;
    width: 100%;
}
.input-group input:nth-of-type(1):not(:last-child){
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.input-group button{
    border-radius: 4px;
}

.input-group button:nth-of-type(1):not(:last-child){
    border-radius: 0;
}

.input-group button:last-child{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group img:last-child{
    border: 1px solid #ccc;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.input-group.has-icon{
    position: relative;
}
.input-group.has-icon > .fa{
  top: 1px;
  left: 1px;
  padding: 1em .75em;
  color: var(--red);
  position: absolute;
}
.input-group.has-icon input{
  padding-left: 2.5em;
  background: inherit;
}

/* 帮助信息 */
.input-tip{
    opacity: .5;
    font-size: .85em;
    padding-left: 1.5em;
}
.input-tip:before{
    color: var(--red);
    content: "\f05a";
    font-weight: 900;
    margin-left: -1.5em;
    margin-right: .5em;
    font-family: "Font Awesome 5 Free";
}
.input-tip:not(:first-child){
    margin-top: .5rem;
}

/* 辅助颜色类 */
.text-primary{ color: var(--primary) }
.text-secondly{ color: var(--secondly) }

.text-red{ color: var(--red) }
.text-yellow{ color: var(--yellow) }
.text-blue{ color: var(--blue) }
.text-green{ color: var(--green) }

/* 其他辅助类 */
.not-select{
    user-select: none;
    pointer-events: none;
}
.can-select{
    cursor: pointer;
}

.mb-1{
    margin-bottom: .5em;
}
.mb-2{
    margin-bottom: 1em;
}

/* 骨架屏 */
@keyframes skeleton-loading {
    0% {
        background-position-x: 100%;
    }

    100% {
        background-position-x: 0;
    }
}

.skeleton-box{
    padding: .5em;
    max-width: 40em;
    margin: 1em auto;
    background-size: 400% 100%;
    background-image: linear-gradient(90deg, hsla(0, 0%, 74.5%, .2) 25%, hsla(0, 0%, 50.6%, .24) 37%, hsla(0, 0%, 74.5%, .2) 63%);
    animation: skeleton-loading 1s linear infinite;
}

/* 通用模块 */
.section-block{
    padding: 3em 0;
}

.section-block .section-title{
    font-size: 2em;
    font-weight: bolder;
    text-align: center;
    margin-bottom: 3rem;
}

@media screen and (max-width: 1000px){
    .section-block .section-title{
        font-size: 1.75em;
    }
}

.section-block.primary-color{
    background: #ddd;
}

.section-block.secondly-color{
    background: #efefef;
}

.section-block.third-color{
    background: #f7f7f7;
}

/* 通用居中大框 */
.panel-block{
    background: #fff;
    box-shadow: 0 0 70px 4px rgba(0, 0, 0, .2);
}

/*                  */
/*  Woo Portal 独有  */
/*                  */

/* 面包屑 */
.woo-bread-nav{
    margin-bottom: 1em;
}

.woo-bread-nav a{
    color: #777;
}

.woo-bread-nav a:after{
    content: "/";
    margin: 0 .75em;
    user-select: none;
    pointer-events: none;
}

/* 应当与 SP 一起食用 */
input[type="checkbox"]:checked:before{
    background: var(--red);
}

/* 弹窗插件 */
notice{
    top: 3.5em;
}
.ks-notice.white{
    color: inherit;
    background: #fff;
}