/*----------------initialized------------------------*/
        *{
            margin:0;
            padding:0;
            color:#4a4a4a;
        }
        a{
            text-decoration: none;
        }
        ul,li{
            list-style: none;
        }
        img{
            border:0;
        }
        @media screen and (max-width:320px){html{font-size:8px}}
        @media screen and (min-width:321px) and (max-width:375px){html{font-size:10px}}
        @media screen and (min-width:376px) and (max-width:40.9rem){html{font-size:11px}}
        @media screen and (min-width:415px) and (max-width:639px){html{font-size:12px} }
        @media screen and (min-width:640px) and (max-width:719px){html{font-size:13px} }
        @media screen and (min-width:720px) and (max-width:749px){html{font-size:14px}}
        @media screen and (min-width:750px) and (max-width:799px){html{font-size:15px}}
        @media screen and (min-width:800px) {html{font-size:16px}}
        /*--------------------------------------topBox--------------------------------------------*/
        .topBox{
            width:100%;
            position: relative;
        }
        @media screen and (min-width: 1000px) {
            .topBox{
                width:920px;
                margin:0 auto;
            }
        }
        @media screen and (max-width: 999px) {
            .topBox{
                width:100%;
                position: relative;
            }
        }
        .fairTitle{
            width:100%;
            padding:0.5rem 0;
            box-sizing: border-box;
        }
        .fairTitle img{
            width:100%;
        }
        .lanSelect{
            position: absolute;
            top:8px;
            right:10px;
        }
        /*----------------------------------------banner-----------------------------------------*/
        .banner-wrapper{
            position:relative;
            overflow: hidden;
            margin:0.6rem auto;
        }

        .imgBox{
            width:100%;
            position: relative;
        }
        .ban-img{
            left:0;
            top:0;
            position: absolute;
            z-index: 0;
            opacity: 0;
        }
        .ban-img img{
            width:100%;

        }
        .introInfo{
            width:26%;
            height: 100%;
            background:rgba(255,255,255,0.9);
            position: absolute;
            right:0;
            z-index: 10;
            padding:0.5rem;
            box-sizing: border-box;
        }
        .introInfo>p{
            text-align: justify;
            line-height: 2.4;
            text-indent: 26px;
            letter-spacing: 1px;
            font-size: 0.9rem;
            color:#595959;
        }
        /*-------------------------------------newBtnBlock--------------------------------------*/
        .btn-wrapper{
            width:100%;
            display: flex;
            flex-direction:row;
            justify-content: space-around;
            align-items: center;
        }
        @media screen and (min-width: 1000px){
            .btn-wrapper{
                width:1000px;
                margin:0 auto;
            }
        }
        .btn-unit{
            text-align: center;
            border-radius: 8px;
            padding:1.2rem 0.8rem;
            box-sizing: border-box;
            cursor: pointer;
            border:1px solid #ffffff;
        }
        .fair-name{
            font-size: 1.3rem;
            font-weight: 700;
            color:#ffffff;
            letter-spacing: 3px;
            margin:0;
        }
        .fair-date{
            font-size: 0.8rem;
            font-weight: bold;
            color:#ffffff;
            letter-spacing: 2px;
            margin:0;
        }
        #springFair{
            background:#68a852;
        }
        #autumnFair{
            background:#d37c53;
        }
        #beverageFair{
            background: #31b6c3;
        }
        .btn-unit:hover{
            background:#ffffff!important;
            border:1px solid #cccccc;
        }
        #springFair:hover > p{
            color:#68a852;

        }
        #autumnFair:hover>p{
            color:#d37c53;
        }
        #beverageFair:hover>p{
            color:#31b6c3;
        }
        #qrc{
            border:1px solid #ffffff !important;
        }
        /*--------------------------------------pageBottom---------------------------------------*/
        .pageBottom{
            width:100%;
            overflow: hidden;
            text-align: center;
        }
        @media screen and (min-width: 1000px){
            .pageBottom{
                width:1000px;
                margin:0 auto;
            }
        }
        .bottom-line{
            font-size: 0.8rem;
        }
        .bottom-line div{

            line-height: 1.6;
        }