test/public/themes/simple/css/less/index.less

@charset "utf-8";
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,select,th,td{
    padding: 0px; margin: 0px; color:#5f5f5f; font-size:14px; font-family: "Calisto-MT";
}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size: 100%;}
address,cite,dfn,em,var{ font-style:normal;}
small { font-size:12px;}
ul,ol{
    list-style-type:none; list-style-image:none;
}
a { color:#5f5f5f; text-decoration:none; outline:none;}
a{
    &:hover{
        color: @website-color;
        text-decoration:none;
    }
}
sup { vertical-align:text-top;}
s{text-decoration:none;}
sub { vertical-align:text-bottom;}
legend { color:#000}
img { border:0; vertical-align:middle;}
table { border-spacing:0; border-collapse:collapse;}
div{ zoom:1;}
body{
    max-width: 1920px;
    margin: 0 auto;
}
dt{
    font-weight: normal;
}

.richtext{
    &.ons{
        img{
            display: block;
            margin: 0 auto;
        }
    }
    .imgs1{
        width: 100%;
    }
    .imgs{
        text-align: center;
    }
    ul{
        list-style: none;
        li{
            position: relative;
            padding-left: 16px;
            list-style: none;
            color: #000;
            &:before{
                content: '';
                display: block;
                width: 7px;
                height: 7px;
                position: absolute;
                left: 0;
                top: 11px;
                background: @website-color;
            }
        }
    }
    ol{
        padding-left: 16px;
        list-style: decimal;
    }
    img{
        height: auto;
    }
    h2,h3,h4,h5,h6{
        display: block;
        width: 100%;
        font-family: "Calisto-MT-bold";
    }
    iframe{
        width: 100%;
    }
    p{
        margin-bottom: 0;
    }
    strong{
        font-family: "Calisto-MT-bold";
    }
    a{
        color: @website-color;
        text-decoration: none;
        &:hover{
            text-decoration: underline;
        }
    }
    &.strongs{
        strong{
            display: block;
            font-size: 26px;
            color: @website-color;
            line-height: 32px;
            position: relative;
            padding-left: 26px;
            &:after{
                content: '';
                display: block;
                width: 8px;
                height: 8px;
                position: absolute;
                left: 0;
                background: @website-color;
                top: 12px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
            } 
        }
    }
    h2{
        display: block;
        font-size: 26px;
        color: @website-color;
        line-height: 32px;
        position: relative;
        padding-left: 26px;
        &:after{
            content: '';
            display: block;
            width: 8px;
            height: 8px;
            position: absolute;
            left: 0;
            background: @website-color;
            top: 12px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    }
    &.sizes{
        font-size: 20px;
        line-height: 38px;
        h2{
            line-height: 38px;
        }
    }
    .over-tabs{
        overflow-x: scroll;
    }
} 
.richtext {
    table tr{
        td{
            border: 1px solid #797979;
            word-break: normal;
            text-align: center;
            color: #5f5f5f;        
            padding: 2px 2px;
            font-size: 12px;
        }
        &:nth-child(1){
            background: none;
            border-color: #fff;
            td{
                text-align: center;
                color: #fff;
                border: none;
            }
        }
        &:nth-child(odd){
            background: none;
        }
        &:nth-child(even){
            background: none;
        }
    }
}
.richtext, .richtext *{
   font-size: 12px;
   color: #5f5f5f;
   line-height: 18px;
   font-family: Arial;
}

.clear{ clear:both;}
.fix:after{ display:table; clear:both; content:"";}
.width1150{ width:1150px; margin:0 auto;}
.rt{float:right;}
.lf{float:left;}
.fix:before{content:" ";display:block;clear:both;}
@font-face {font-family: "iconfont";
  src: url('../font/iconfont.eot'); /* IE9*/
  src: url('../font/iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */
  url('../font/iconfont.woff') format('woff'), /* chrome, firefox */
  url('../font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../font/iconfont.svg') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  color:#143592;
  font-style:normal;
  font-weight:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

@font-face{
    font-family: "Calisto-MT";
    src:url("../font/CALIST.TTF");
    font-style:normal;
    font-weight:normal;
}
@font-face{
    font-family: "Calisto-MT-bold";
    src:url("../font/CALISTB.TTF");
    font-style:normal;
    font-weight:normal;
}
@font-face{
    font-family: "Times-New-Roman";
    src:url("../font/times_0.ttf");
    font-style:normal;
    font-weight:normal;
}

.trans {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.transb {
    -webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -ms-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}
.trans1 {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.sep-scale{
    -webkit-transition: All .8s ease;
    -moz-transition: All .8s ease;
     -ms-transition: All .8s ease;
    -o-transition: All .8s ease;
    transition: All .8s ease;
    &:hover{
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
}
.div{
        -webkit-animation: animate_tops .7s linear infinite alternate;
        -moz-animation: animate_tops .7s linear infinite alternate;
        -ms-animation: animate_tops .7s linear infinite alternate;
        -o-animation: animate_tops .7s linear infinite alternate;
        animation: animate_tops .7s linear infinite alternate;
}
.div1{
        -webkit-animation: animate_tops1 .7s linear infinite alternate;
        -moz-animation: animate_tops1 .7s linear infinite alternate;
        -ms-animation: animate_tops1 .7s linear infinite alternate;
        -o-animation: animate_tops1 .7s linear infinite alternate;
        animation: animate_tops1 .7s linear infinite alternate;
}
@-webkit-keyframes animate_tops {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(6px,0);
                -moz-transform:translate(6px,0);
                -ms-transform:translate(6px,0);
                -o-transform:translate(6px,0);
                transform:translate(6px,0);
                opacity:1;
                
                }
        }
        @-moz-keyframes animate_tops {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(6px,0);
                -moz-transform:translate(6px,0);
                -ms-transform:translate(6px,0);
                -o-transform:translate(6px,0);
                transform:translate(6px,0);
                opacity:1;
                
                }
        }
        @-ms-keyframes animate_tops {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(6px,0);
                -moz-transform:translate(6px,0);
                -ms-transform:translate(6px,0);
                -o-transform:translate(6px,0);
                transform:translate(6px,0);
                opacity:1;
                
                }
        }
        @-o-keyframes animate_tops {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(6px,0);
                -moz-transform:translate(6px,0);
                -ms-transform:translate(6px,0);
                -o-transform:translate(6px,0);
                transform:translate(6px,0);
                opacity:1;
                
                }
        }
        @keyframes animate_tops {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(6px,0);
                -moz-transform:translate(6px,0);
                -ms-transform:translate(6px,0);
                -o-transform:translate(6px,0);
                transform:translate(6px,0);
                opacity:1;
                
                }
        }
@-webkit-keyframes animate_tops1 {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(0,10px);
                -moz-transform:translate(0,10px);
                -ms-transform:translate(0,10px);
                -o-transform:translate(0,10px);
                transform:translate(0,10px);
                opacity:1;
                
                }
        }
        @-moz-keyframes animate_tops1 {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(0,10px);
                -moz-transform:translate(0,10px);
                -ms-transform:translate(0,10px);
                -o-transform:translate(0,10px);
                transform:translate(0,10px);
                opacity:1;
                
                }
        }
        @-ms-keyframes animate_tops1 {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(0,10px);
                -moz-transform:translate(0,10px);
                -ms-transform:translate(0,10px);
                -o-transform:translate(0,10px);
                transform:translate(0,10px);
                opacity:1;
                
                }
        }
        @-o-keyframes animate_tops1 {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(0,10px);
                -moz-transform:translate(0,10px);
                -ms-transform:translate(0,10px);
                -o-transform:translate(0,10px);
                transform:translate(0,10px);
                opacity:1;
                
                }
        }
        @keyframes animate_tops1 {
            0% {
                -webkit-transform:translate(0,0);
                -moz-transform:translate(0,0);
                -ms-transform:translate(0,0);
                -o-transform:translate(0,0);
                transform:translate(0,0);
                opacity:.6;
                
                }
            100% {
                -webkit-transform:translate(0,10px);
                -moz-transform:translate(0,10px);
                -ms-transform:translate(0,10px);
                -o-transform:translate(0,10px);
                transform:translate(0,10px);
                opacity:1;
                }
        }

html{
    overflow-y: scroll;
}
body{ width:100%; overflow:hidden;}
.logo{
  float:left;
  position: relative;
  z-index: 100;	
}
#onlineService{ position:fixed; right:0px; bottom:32%; z-index:100998;}
.offside{ width:50px;}
.offside li{ width:50px; height:50px; position:relative; background:#b1b1b1;border-bottom: 1px solid #fff; text-align:center; transition:all .7s; -webkit-transition:all .7s;}
.offside .code{ position:absolute; top:0; right:50px; display:none; margin:0;}
.offside a,
.offside div{ color:#333; position:absolute; z-index:11; display:block; top:0; right:0; bottom:0; cursor:pointer;}
.offside p{ float:left; line-height:50px; font-size:16px; font-weight:700; padding:0 0 0 10px; color:#fff; opacity:0;position: absolute;}
.offside .icon{ font-size:28px; height:100%; line-height:50px; text-align:center; display:block; color:#fff;}
.offside li:not(.li_3) a,
//.offside li:not(.li_3) div{ left:0;}
.offside .li_3 a,
.offside .li_3 div{ width:50px; }
.offside .back_top{display: none;}
.offside li:nth-child(1){ background: @website-color1; }
.offside li:nth-child(2){ background: @website-color1;}
.offside li:nth-child(3){ background: @website-color1;}
.offside li:nth-child(4){ background: @website-color1;}
.offside li:nth-child(5){ background: @website-color1;}
.offside li:nth-child(6){ background: #b1b1b1;}
.offside li:nth-child(7){ background: #b1b1b1;}

.offside .erweima{width:150px;height:150px;position: absolute;left:-150px;top:0px;display: none;}
.offside li:nth-child(8){ background:@website-color;display: none; }
.offside li:nth-child(10){ background:@website-color; height:20px;}
.offside li:nth-child(10) .icon{ line-height:20px;}
.offside li:hover a,
.offside li:hover div,
.offside li:hover .icon{ color:#fff;}
.offside li:hover p{ opacity:1;}
.offside li:not(.li_3):hover{
    background: @website-color;
    }
.offside li:not(.li_erweima):hover{
    .erweima{
        display: block;
    }
    }
.offside .tel{ width:230px; transform:translateX(-180px); -webkit-transform:translateX(-180px);}
.offside .back_none{ height:0; border:0 !important;}
.offside .li{ transform:translateX(100%); -webkit-transform:translateX(100%);}
.offside .unfold{width:30px; transform:translateX(20px); -webkit-transform:translateX(20px);}
.sep-container{ max-width:1200px; margin: 0 auto;
}
.sep-container1{ 
    max-width:1244px;
    margin: 0 auto;
}
.send-email{width: 876px;height: auto;position: fixed;top: 50%;margin-top: -250px;left: 50%;margin-left: -438px;border: 1px solid #adadad;background: #ebebeb;z-index: 99999999;display: none;}
.send-email .sep-general-form{margin: 0px;}
.sep-onlineservices{
    display: none;
}
#onlineService-two{
    display: none;
}
.form-list{
                            width: 100%;
                            margin-bottom: 13px;
                            &.list-two{
                                width: 50%;
                                float: left;
                                max-width: 307px;
                                &+.list-two{
                                    float: right;
                                }
                            }
                            input,textarea{
                                width: 100%;
                                line-height: 44px;
                                padding-left: 20px;
                                outline: none;
                                font-size: 15px;
                                color: #787878;
                                color: rgba(163,163,163,1);
                            }
                            textarea{
                                height: 130px;
                            }
                        }
                        .submit-list{
                            width: 195px;
                            height: 44px;
                            border-radius: 12px;
                            margin-top: 8px;
                            overflow: hidden;
                            background: #c43132;
                            .btn-primary{
                                width: 100%;
                                height: 100%;
                                
                                background: #c43132;
                                border: none;
                                color: #fff;
                                font-size: 23px;
                                font-weight: bold;
                                text-align: center;
                                display: block;
                                padding: 0;
                                line-height: 44px;
                                text-transform: uppercase;
                            }
                        }
.pagination>li>a, .pagination>li>span{
    padding: 4px 10px;
    margin: 0 0.5px;
    background: #ebebeb;
    color: #333333;
    border: 1px solid #ebebeb;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
    background: @website-color;
    color: #fff;
    border: 1px solid @website-color;
}
.pagination>li:first-child>a, .pagination>li:first-child>span{
    border-radius: initial;
    padding: 4px 10px;
    color: #333333;
    background-color: #ebebeb;
    border: 1px solid #ebebeb;
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-radius: initial;
    padding: 4px 10px;
    color: #333333;
    background-color: #ebebeb;
    border: 1px solid #ebebeb;
}
.pagination{
    margin: 29px 0;
    &.ons{
        margin: 0;
    }
}
.operation{
    overflow: hidden;
    margin-top: 40px;
    ul{
        li{
            width: 50%;
            text-align: center;
            float: left;
            a{
                color: #fff;
                background-color: @website-color;
                border-color: @website-color;
                &:hover{
                    background-color: @website-color;
                }
            }
        }
    }
}
.gallery{
    width: 100%;
    overflow: hidden;
    a{
        display: block;
        width: 33.3333%;
        padding: 0 1% 1.5%;
        float: left;
        img{
            max-width: 100%;
        }
    }
    &.details{
        margin-top: 15px;
    }
    &.ons{
        a{
            width: 25%;
            img{
                border: 1px solid #d0d0d0;
            }
        }
    }
    .ps{
        display: block;
        width: 100%;
        padding: 0 5px;
        text-align: center;
        line-height: 24px;
        margin-top: 6px;
        color: #3a3a3a;
    }
}
.sep-pagination{
    text-align: center;
}