.mainMenu{display: flex; width: 100%; height: 70px; align-items: center; justify-content: center; padding: 0 30px; background: #fff; position: fixed; top: 0; left: 0; z-index: 999; background: #f5f2e9;}

.mainMenu .mainMenuWrap{display: flex; width: 100%; max-width: 1170px; height: 100%;}
.mainMenu .mainMenuWrap .logoGroup{display: flex; align-items: center; max-width: 156px; height: 100%;}
.mainMenu .mainMenuWrap .logoGroup .sinopacLogo--rwd{display: none;}
.mainMenu .mainMenuWrap .logoGroup a{display: flex; height: 100%;}
.mainMenu .mainMenuWrap .logoGroup a img{display: block; width: 100%;}

.basicBanner{display: block; width: 100%; padding-bottom: 19.79166%; background: #f5f2e9; position: relative;}

.slick-list, .slick-track{height: 100%!important;}
.basicBanner .sliderWrap{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; overflow: hidden;}
.basicBanner .sliderWrap a{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative;}
.basicBanner .sliderWrap a img{display: block; width: 100%;}
.basicBanner::after{position: absolute; bottom: 0px; left: 0; right: 0; content: ''; height: 40px; background: url('../img/tmp/banner_mask.png') no-repeat center 0 / 100% 100%; z-index: 9;}

#mainSlider_rwd{display: none; height: 520px;}
#mainSlider_rwd .slick-dots, #mainSlider .slick-dots{display: flex; width: 100%; justify-content: center; align-items: center; margin: 0; padding: 0; position: absolute; bottom: 10px; left: 0; z-index: 90!important;}
#mainSlider_rwd .slick-dots li,#mainSlider .slick-dots li{list-style: none;}
#mainSlider_rwd .slick-dots li button, #mainSlider .slick-dots li button{display: block; width: 10px; height: 10px; margin: 0 5px; font-size: 0; background: none; border: none; border-radius: 50%; background: #c1c1c1; padding: 0;}
#mainSlider_rwd .slick-dots li,#mainSlider .slick-dots li button:hover{cursor: pointer;}
#mainSlider_rwd .slick-dots .slick-active button, #mainSlider .slick-dots .slick-active button{background: #808080;}

.menuBar{display: block; background: #f5f2e9; width: 100%; min-height: 100px; padding: 38px 60px; position: static; top: 70px; left: 0; bottom: 0; right: 0; z-index: 999;}
.menuBar .menuBarWrap{display: flex; align-items: stretch; justify-content: center; margin: 0 auto; max-width: 1170px;}
.menuBar .btnGroup{display: block; width: 16.6%; text-decoration: none;}
.menuBar .btnGroup .icon{display: block; width: 80px; height: 80px; margin: 0 auto 0 auto;}
.menuBar .btnGroup h3{display: block; width: 100%; margin: 0; padding: 0; text-align: center; font-size: 17px; color: #666666; font-weight: 400;}

.menuBar .btnGroup:hover h3, .menuBar .act h3{color: #1a1a1a;}

.menuBar .btnGroup:nth-child(1) .icon{background: url('../img/tmp/mBtn1.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(2) .icon{background: url('../img/tmp/mBtn2.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(3) .icon{background: url('../img/tmp/mBtn3.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(4) .icon{background: url('../img/tmp/mBtn4.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(5) .icon{background: url('../img/tmp/mBtn5.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(6) .icon{background: url('../img/tmp/mBtn6.svg') no-repeat center center / 100% 100%;}

.menuBar .btnGroup:nth-child(1):hover .icon{background: url('../img/tmp/mBtn1_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(2):hover .icon{background: url('../img/tmp/mBtn2_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(3):hover .icon{background: url('../img/tmp/mBtn3_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(4):hover .icon{background: url('../img/tmp/mBtn4_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(5):hover .icon{background: url('../img/tmp/mBtn5_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(6):hover .icon{background: url('../img/tmp/mBtn6_a.svg') no-repeat center center / 100% 100%;}

.menuBar .btnGroup:nth-child(1).act .icon{background: url('../img/tmp/mBtn1_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(2).act .icon{background: url('../img/tmp/mBtn2_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(3).act .icon{background: url('../img/tmp/mBtn3_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(4).act .icon{background: url('../img/tmp/mBtn4_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(5).act .icon{background: url('../img/tmp/mBtn5_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(6).act .icon{background: url('../img/tmp/mBtn6_a.svg') no-repeat center center / 100% 100%;}

.shared_footer .copyright{display: flex; align-items: center; justify-content: center; padding: 10px 30px; background: #f4f1e8; color: #000000;}
.shared_footer .copyright p{margin: 0 15px 0 0; padding: 0;}
.shared_footer .copyright a{color: #000000;}

@media screen and (max-width: 800px){

    .mainMenu{height: 50px; padding: 0 15px;}
    .mainMenu .mainMenuWrap{align-items: center; justify-content: center;}
    .mainMenu .mainMenuWrap .logoGroup .sinopacLogo{display: none;}
    .mainMenu .mainMenuWrap .logoGroup .sinopacLogo--rwd{display: flex; align-items: center;}
    .mainMenu .mainMenuWrap .logoGroup .sinopacLogo--rwd img{height: 57%; flex: 0;}

    .basicBanner{height: auto; padding-bottom: 81.25%;}
    .basicBanner .sliderWrap{position: absolute; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .basicBanner .sliderWrap img{max-width: none; width: auto; max-height: 100%; min-height: 100%;}
    .basicBanner::after{height: 20px;}

    #mainSlider{display: none;}
    #mainSlider_rwd{display: block; height: 100%;}

    .menuBar{padding: 20px 15px; top: 50px; position: static;}
    .menuBar .menuBarWrap{display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center; margin: 0 auto; max-width: 1170px;}
    .menuBar .btnGroup{display: block; width: calc(100% / 3); text-decoration: none; margin: 0 0 15px 0;}
    .menuBar .btnGroup .icon{width: 50px; height: 50px;}

}