@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&display=swap');

*{box-sizing: border-box;}

body{display: block; margin: 0; padding: 0; font-family: 'Noto Sans TC', sans-serif, Microsoft JhengHei; overflow-x: hidden; max-width: 100vw; overflow-y: auto;}
button{font-family: 'Noto Sans TC', sans-serif, Microsoft JhengHei;}
body::before{content: ''; display: block; width: 100%; height: 70px;}
.wrap{display: block; width: 100%; overflow-x: hidden;}

.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; opacity: 1;}

.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%;}

#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/icon/mBtn7.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(2) .icon{background: url('../img/icon/mBtn1.svg') no-repeat center center / 100% 100%;}
/* .menuBar .btnGroup:nth-child(2) .icon{background: url('../img/icon/mBtn2.svg') no-repeat center center / 100% 100%;} */
.menuBar .btnGroup:nth-child(3) .icon{background: url('../img/icon/mBtn3.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(4) .icon{background: url('../img/icon/mBtn5.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(5) .icon{background: url('../img/icon/mBtn4.svg') no-repeat center center / 100% 100%;}
/* .menuBar .btnGroup:nth-child(5) .icon{background: url('../img/icon/mBtn5.svg') no-repeat center center / 100% 100%;} */
.menuBar .btnGroup:nth-child(6) .icon{background: url('../img/icon/mBtn6.svg') no-repeat center center / 100% 100%;}

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

.menuBar .btnGroup:nth-child(1).act .icon{background: url('../img/icon/mBtn7_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(2).act .icon{background: url('../img/icon/mBtn1_a.svg') no-repeat center center / 100% 100%;}
/* .menuBar .btnGroup:nth-child(2).act .icon{background: url('../img/icon/mBtn2_a.svg') no-repeat center center / 100% 100%;} */
.menuBar .btnGroup:nth-child(3).act .icon{background: url('../img/icon/mBtn3_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(4).act .icon{background: url('../img/icon/mBtn5_a.svg') no-repeat center center / 100% 100%;}
.menuBar .btnGroup:nth-child(5).act .icon{background: url('../img/icon/mBtn4_a.svg') no-repeat center center / 100% 100%;}
/* .menuBar .btnGroup:nth-child(5).act .icon{background: url('../img/icon/mBtn5_a.svg') no-repeat center center / 100% 100%;} */
.menuBar .btnGroup:nth-child(6).act .icon{background: url('../img/icon/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; margin: 0 10px 0 0;}
.shared_footer .copyright a:last-child{margin: 0;}

.content{display: block; width: 100%; padding: 30px;}
.content .blockLimit{display: block; width: 100%; max-width: 1300px; margin: 0 auto;}
.content .blockLimit .pageTitle{display: flex; width: 100%; align-items: center; position: relative; margin: 0 0 30px 0; padding: 0;}
.content .blockLimit .pageTitle h1{display: block; width: fit-content; margin: 0 10px 0 0; padding: 0; position: relative;}
.content .blockLimit .pageTitle h1 span{color: var(--titleFontColor); font-size: var(--titleFontSize); position: relative; z-index: 2;}
.content .blockLimit .pageTitle h1::after{content: ''; display: block; width: 100%; height: 50%; background: var(--titleBackGround); position: absolute; left: 0; bottom: 0; z-index: 1;}
.content .blockLimit .pageTitle .titleIcon{display: block; height: 80px; margin: 0 30px 0 0; animation: bounce 5s infinite;}

@keyframes bounce {
    0%{transform: translateY(0);}
    25%{transform: translateY(-10px);}
    50%{transform: translateY(0);}
    75%{transform: translateY(-5px);}
    100%{transform: translateY(0);}
}

.content .blockLimit .rwdMenu{display: flex; align-items: center; justify-content: center;}
.content .blockLimit .rwdMenu--hide{display: none;}
.content .blockLimit .rwdMenu a{display: block; padding: 5px 15px; border-radius: 30px; font-size: var(--normalFontSize); text-decoration: none; background: #fff; color: #c1272d; border: 2px solid #c1272d; margin: 0 10px 0 0; cursor: pointer;}
.content .blockLimit .rwdMenu a:hover, .content .blockLimit .rwdMenu .act{background: #c1272d; color: #fff; border: 2px solid #c1272d;}

.content .blockLimit .articleBlock{display: block; width: 100%;}
.content .blockLimit .articleBlock h2{display: block; width: 100%; font-size: var(--titleFontSize); color: var(--lightPink); margin: 0 0 15px 0; padding: 0;}
.content .blockLimit .articleBlock .darkBlue{color: #171c61; margin: 15px 0 15px 0;}
.content .blockLimit .articleBlock .normalText{display: block; width: 100%; font-size: var(--normalFontSize); color: var(--textBlack);}
.content .blockLimit .articleBlock .normalText .darkRed{color: var(--darkPink);}
.content .blockLimit .articleBlock .markText{display: flex; align-items: flex-end; width: 100%; margin: 0 0 15px 0; padding: 0; font-size: 20px; color: var(--darkPink);}
.content .blockLimit .articleBlock .markText span{font-size: 25px; line-height: 30px;}
.content .blockLimit .articleBlock .dateWrap{display: flex; align-items: flex-start; margin: 0 0 30px 0;}
.content .blockLimit .articleBlock .dateWrap img{display: block; width: 100%;}
.content .blockLimit .articleBlock .dateWrap img:first-child{margin: 0 0 0 0;}
.content .blockLimit .articleBlock .exchangeBtn{display: block; max-width: 160px;}
.content .blockLimit .articleBlock .blueTitle{display: block; width: fit-content; font-size: var(--normalFontSize); background: var(--darkBlue); color: #fff; padding: 3px 15px; border-radius: 30px;}
.content .blockLimit .articleBlock ul{color: var(--textBlack); font-size: var(--normalFontSize); background: rgba(255, 255, 255, 0.7);}
.content .blockLimit .articleBlock .tablewrap{display: block; width: fit-content;}
.content .blockLimit .articleBlock .tablewrap .tableBlock{display: block; width: fit-content; border: 2px solid #946134; border-radius: 15px; overflow: hidden;}
.content .blockLimit .articleBlock .tablewrap .tableBlock table{width: 100%; border-collapse: collapse; border: none;}
.content .blockLimit .articleBlock .tablewrap .tableBlock table tr td{padding: 5px 10px;}
.content .blockLimit .articleBlock .tablewrap .tableBlock table thead{border-bottom: 2px solid #946134;}
.content .blockLimit .articleBlock .tablewrap .tableBlock table thead tr td{background: #c79f62; color: #fff; padding: 5px 0; text-align: center; position: relative;}
.content .blockLimit .articleBlock .tablewrap .tableBlock table thead tr td:first-child::after{content: ''; display: block; width: 2px; height: 70%; background: #fff; position: absolute; right: 0px; top: 50%; transform: translateY(-50%);}
.content .blockLimit .articleBlock .tablewrap .tableBlock table tbody tr td{text-align: center; font-size: var(--normalFontSize); border-right: 2px solid #946134; border-bottom: 2px solid #946134;}
.content .blockLimit .articleBlock .tablewrap .tableBlock table tbody tr:last-child td{border-bottom: none;}
.content .blockLimit .articleBlock .tablewrap .tableBlock table tbody tr td .bigger{font-size: var(--markFontSize); margin: 0 0 0 5px;}
.content .blockLimit .articleBlock .tablewrap .tableBlock table tbody tr td:first-child{color: #40210f;}
.content .blockLimit .articleBlock .tablewrap .tableBlock table tbody tr td:last-child{border-right: none; color: var(--darkBlue); font-size: var(--markFontSize);}

.content .blockLimit .articleBlock .tablewrap .registerBtn{display: block; max-width: 160px; margin: 30px auto 0 auto;}

.content .blockLimit .articleBlock .splitBlock{display: flex; flex-wrap: wrap; margin: 30px 0 0 0;}
.content .blockLimit .articleBlock .splitBlock .group{display: block; width: calc(100% / 3 - 20px); margin: 0 30px 30px 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
.content .blockLimit .articleBlock .splitBlock .group:nth-child(3n){margin: 0 0 30px 0;}
.content .blockLimit .articleBlock .splitBlock .group .imgWrap{display: block; width: 100%; padding-bottom: 69.23%; position: relative; overflow: hidden;}
.content .blockLimit .articleBlock .splitBlock .group .imgWrap img{display: block; width: 101%; height: 101%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.content .blockLimit .articleBlock .splitBlock .group .bottomBar{display: block; width: 100%; padding: 10px; position: relative;}
.content .blockLimit .articleBlock .splitBlock .group .bottomBar p{display: block; width: 100%; min-height: 104px; line-height: 26px; margin: 0; padding: 0; font-size: var(--normalFontSize); color: var(--textBlack);}
.content .blockLimit .articleBlock .splitBlock .group .bottomBar .goArrow{display: block; width: 38px; height: 38px; position: absolute; bottom: 10px; right: 10px; transition: .5s;}
.content .blockLimit .articleBlock .splitBlock .group .bottomBar .goArrow:hover{transform: scale(1.2); transition: .5s;}

.content .blockLimit .articleBlock .splitBlock .videoGroup{display: block; width: calc(50% - 30px); margin: 0 60px 0 0;}
.content .blockLimit .articleBlock .splitBlock .videoGroup:last-child{margin: 0;}
.content .blockLimit .articleBlock .splitBlock .videoGroup .videoTitle{display: block; margin: 0 0 10px 0; padding: 0; font-size: 20px; color: var(--titleFontColor);}
.content .blockLimit .articleBlock .splitBlock .videoGroup .videoDesc{display: block; margin: 0 0 20px 0; padding: 0; font-size: 18px; color: var(--textBlack); line-height: 25px; min-height: 100px;}
.content .blockLimit .articleBlock .splitBlock .videoGroup .videoBlock{display: block; width: 100%; padding-bottom: 56.25%; position: relative; margin: 0 0 30px 0;}
.content .blockLimit .articleBlock .splitBlock .videoGroup .videoBlock iframe{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.content .blockLimit .articleBlock .splitBlock .videoGroup .paragraph{display: block; width: 100%; color: var(--textBlack); font-size: 18px;}
.content .blockLimit .articleBlock .splitBlock .videoGroup .paragraph .paragraphTitle{display: block; width: 100%; margin: 0; padding: 0;}
.content .blockLimit .articleBlock .splitBlock .videoGroup .paragraph ol{margin: 0 0 20px 0; padding: 0 0 0 1em;}
.content .blockLimit .articleBlock .splitBlock .videoGroup .paragraph .paragraphSub{display: block; width: 100%; margin: 0; padding: 0;}
.content .blockLimit .articleBlock .splitBlock .videoGroup .paragraph .paragraphSub--red{color: #e25656;}
.content .blockLimit .articleBlock .splitBlock .videoGroup .paragraph .paragraphSub--red a{color: #e25656; text-decoration: none;}

.content .blockLimit .articleBlock .textPicBlock{display: block; width: 100%;}
.content .blockLimit .articleBlock .textPicBlock .textPicWrap{display: block; width: 100%;}
.content .blockLimit .articleBlock .textPicBlock .textPicWrap .textPicPage{display: block; width: 100%;}
.content .blockLimit .articleBlock .textPicBlock .textPicWrap .textPicPage .unitTitle{display: block; width: 100%; font-size: 20px; color: var(--titleFontColor);}
.content .blockLimit .articleBlock .textPicBlock .textPicWrap .textPicPage img{display: block; max-width: 100%; margin: 0 0 30px 0;}
.content .blockLimit .articleBlock .textPicBlock .textPicWrap .textPicPage .contentText{display: block; width: 100%; margin: 0 0 30px 0; font-size: 18px; color: var(--textBlack);}
.content .blockLimit .articleBlock .textPicBlock .textPicWrap .textPicPage .contentText .red{color: var(--darkPink); text-decoration: none;}
.content .blockLimit .articleBlock .textPicBlock .textPicWrap .textPicPage .contentText--lager{margin: 0; font-size: 18px; color: var(--darkPink); text-decoration: none;}
.content .blockLimit .articleBlock .textPicBlock .textPicWrap .textPicPage .contentText--gray{color: #666666; margin: 0 0 0 0;}
.content .blockLimit .articleBlock .textPicBlock .textPicWrap .textPicPage .contentText--green{color: #8b8f00; margin: 0 0 30px 0;}

.content--violin{background: url('../img/icon/violin.png') no-repeat right -6% bottom / auto 70%;}

.content--remind{background: #fffdf8;}
.content--remind .blockLimit .remindTitle{display: block; width: 100%; color: #cc5632; margin: 0 0 15px 0; padding: 0; font-size: 20px; font-weight: bolder;}
.content--remind .blockLimit ol li p{color: var(--textBlack); font-size: 18px;}
.content--remind .blockLimit ol li p a{color: blue;}
.content--remind .blockLimit ol .red{color: #ff0000;}
.content--remind .blockLimit ol .red p{color: #ff0000;}
.content--remind .blockLimit ol li .unitGroup{display: flex; flex-wrap: wrap; width: 100%;}
.content--remind .blockLimit ol li .unitGroup .unitblock{display: block; width: 50%;}
.content--remind .blockLimit ol li .unitGroup .unitblock img{display: block; max-width: 100%;}
.content--remind .blockLimit ol li .unitGroup:first-child .unitblock img{width: 100%!important;}

.content--remind .blockLimit>ol>li{list-style: cjk-ideographic;}
.content--remind .blockLimit>ol>li .wrapol{display: flex; flex-wrap: wrap; list-style: decimal; margin: 0; padding: 0;}
.content--remind .blockLimit>ol>li .wrapol li{display: flex; width: 50%; padding: 0; list-style: decimal;}
.content--remind .blockLimit ol li .unitGroup{display: flex; flex: 1 1 auto;}
.content--remind .blockLimit>ol>li .wrapol li:first-child{width: 100%;}
.content--remind .blockLimit>ol>li .wrapol li .unitGroup{width: 100%; margin: 0 0 30px 0; padding: 0 15px 0 0;}
.content--remind .blockLimit>ol>li .wrapol li .unitGroup .unitblock{width: 100%;}
.content--remind .blockLimit>ol>li .wrapol li .unitGroup .unitblock img{display: block; width: auto!important; max-width: 100%; width: fit-content; flex: 0;}

.ruleBlock{display: block; width: 100%; padding: 30px;}
.ruleBlock .ruleWrap{display: flex; flex-direction: column; width: 100%; max-width: 1300px; margin: 0 auto;}
.ruleBlock .topLine{border-top: 1px solid #ccc !important;}
/* .ruleBlock .ruleWrap:last-child{border-bottom: none;} */
.ruleBlock .ruleWrap h1, .ruleBlock .ruleWrap h2, .ruleBlock .ruleWrap h3{display: block; width: 100%; font-size: 20px; color: #F64540; margin-bottom: 0;}
.ruleBlock .ruleWrap>ol{margin-top: 0;}
.ruleBlock .ruleWrap ol li{font-size: 18px; text-align: justify; font-weight: normal;}
.ruleBlock .ruleWrap ol li br{display: none;}
.ruleBlock .ruleWrap>ol>li{list-style: cjk-ideographic;}

.ruleBlock .ruleWrap ol li p{display: block; width: fit-content; margin-bottom: 0;}
.ruleBlock .ruleWrap .underLine{text-decoration: underline;}
.ruleBlock .ruleWrap .mark{background: #FFEC40;}
.ruleBlock .ruleWrap ol li a{color: #0071BA;}

.ruleBlock .ruleWrap ol li table{border-collapse: collapse;}
.ruleBlock .ruleWrap ol li table tr td{border: 1px solid #cccccc; padding: 5px 10px;}

.ruleBlock .goBlockWrap{display: flex; align-items: center; width: 100%; max-width: 1300px; margin: 0 auto; border-bottom: 1px solid #d05f5b;}
.ruleBlock .goBlockWrap a{display: flex; align-items: center; color: #d05f5b; background: #fff; border: 1px solid #d05f5b; border-right: none; border-bottom: none; padding: 5px 10px; border-radius: 5px 5px 0 0; font-size: 18px; text-decoration: none; cursor: pointer;}
.ruleBlock .goBlockWrap a br{display: none;}
.ruleBlock .goBlockWrap a:last-child{border-right: 1px solid #d05f5b;}
.ruleBlock .goBlockWrap a i{display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; background: #d05f5b; border-radius: 50%; margin: 0 0 0 5px;}
.ruleBlock .goBlockWrap a i::after{content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8.7px; border-color: transparent transparent transparent #fff; transform: translateX(1px);}

.bindBtn{display: block; max-width: 170px; margin-top: 5px;}
.bindBtn img{display: block; width: 100%;}

.ruleBlock .ruleWrap ol li .tableBlock .tableBlock{display: block; width: 100%; overflow: hidden;}
.ruleBlock .ruleWrap ol li .tableBlock .tablePic{display: block; width: 100%; max-width: 670px;}
.ruleBlock .ruleWrap ol li .tableBlock .tablePicRWD{display: none;}
.tablePic{display: block; width: 675px; margin-top: 5px;}
.little{font-size: 14px; line-height: 15px;}

.hasStar{display: flex!important; align-items: center;}
.hasStar::before{content: ''; display: block; width: 15px; height: 15px; background: url('../img/icon/star2.png') no-repeat center center / 100% 100%; margin: 0 5px 0 0;}

.ruleBlock--hide{background: #f4f3ef; padding: 30px 50px; border-radius: 30px;}
.ruleBlock--hide .openClose{display: flex!important; align-items: center; width: fit-content!important; cursor: pointer; margin: 0;}
.ruleBlock--hide .openClose button{display: block; width: 15px; height: 15px; position: relative; border: none; background: none;}
.ruleBlock--hide .openClose button::before, .ruleBlock--hide .openClose button::after{content: ''; display: block; width: 90%; height: 3px; border-radius: 5px; position: absolute; top: 50%; left: 50%; background: #F64540;}
.ruleBlock--hide .openClose button::before{transform: translate(-50%, -50%) rotate(90deg);}
.ruleBlock--hide .openClose button::after{transform: translate(-50%, -50%);}

.ruleBlock--hide ol{display: none;}
.show ol{display: block;}
.show .openClose button::before{display: none;}

.goTop{display: block; width: 100px; position: fixed; bottom: 50px; right: 30px; cursor: pointer; background: none; border: none;}
.goTop img{display: block; width: 100%;}
img.phone{display: block; width: 100%; max-width: 600px; margin: 15px 0 0 0;}

:root{
    --titleFontSize: 30px;
    --markFontSize: 25px;
    --inMarkBiggerFontSize: 35px;
    --normalFontSize: 18px;
    --titleFontColor: #6b4c15;
    --titleBackGround: #fdc72e;
    --lightPink: #f84540;
    --darkPink: #e25656;
    --textBlack: #333333;
    --darkBlue: #171c61;
}

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

    .ruleBlock .goBlockWrap a{font-size: 14px;}
    .ruleBlock .goBlockWrap a br{display: block;}

    body::before{height: 50px;}

    .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;}

    .content .blockLimit .pageTitle .titleIcon{height: 60px;}

    .content .blockLimit .articleBlock .dateWrap{flex-direction: column;}
    .content .blockLimit .articleBlock .dateWrap img{width: 100%;}
    .content .blockLimit .articleBlock .dateWrap img:first-child{margin: 0 0 15px 0;}

    .content .blockLimit .articleBlock .markText{flex-wrap: wrap; font-size: 18px;}
    .content .blockLimit .articleBlock .markText span{line-height: 25px; font-size: 18px;}
    .content--violin{background: url('../img/icon/violin.png') no-repeat right -40% bottom / 50% auto;}

    .content .blockLimit .pageTitle{flex-wrap: wrap;}

    .content .blockLimit .articleBlock .splitBlock .group{margin: 0 15px 15px 0; width: calc(50% - 7.5px);}
    .content .blockLimit .articleBlock .splitBlock .group:nth-child(2n){margin: 0 0 15px 0!important;}
    .content .blockLimit .articleBlock .splitBlock .group:nth-child(3n){margin: 0 15px 15px 0;}
    .content .blockLimit .articleBlock .splitBlock .group br{display: none;}

    .content .blockLimit .rwdMenu--hide{display: flex;}
    .content .blockLimit .rwdMenu a{font-size: 12px;}
    .content .blockLimit .rwdMenu a{padding: 3px 10px;}
    .content .blockLimit .articleBlock .splitBlock--nowrap{width: 100%; flex-wrap: nowrap; overflow-x: auto;}
    .content .blockLimit .articleBlock .splitBlock .videoGroup{width: 100%; margin: 0 30px 0 0; flex-shrink: 0;}
    .content .blockLimit .articleBlock .splitBlock .videoGroup:last-child{margin: 0;}
    .content .blockLimit .articleBlock .splitBlock .videoGroup .videoTitle{font-size: 18px;}

    .content--remind .blockLimit ol li .unitGroup .unitblock{width: 100%;}
    .content--remind .blockLimit ol li .unitGroup .unitblock img{max-width: 100%;}
    .content--remind .blockLimit>ol>li .wrapol li .unitGroup{margin: 0 0 0px 0; padding: 0;}

    .ruleBlock .ruleWrap ol li{font-size: 18px;}
    .ruleBlock .ruleWrap ol li br{display: block;}

    .ruleBlock .ruleWrap ol>li>ol{padding-inline-start: 10px;}

    .ruleBlock .ruleWrap ol li .tableBlock .tableBlock{display: block; width: 100%; overflow: hidden;}
    .ruleBlock .ruleWrap ol li .tableBlock .tablePic{display: none; width: 100%;}
    .ruleBlock .ruleWrap ol li .tableBlock .tablePicRWD{display: block; width: 100%;}

    .hasStar{align-items: flex-start;}
    .hasStar::before{margin: 7px 5px 0 0; width: 15px; height: 15px; flex: 0 0 15px;}

    .shared_footer .fastLinks{flex-wrap: wrap;}
    .shared_footer .copyright{font-size: 0.5rem; padding: 10px; white-space: nowrap;}
    .shared_footer .copyright p{margin: 0; color: #000000;}
    .shared_footer .copyright p a{color: #000000;}

    .goTop{display: block; width: 80px; position: fixed; bottom: 40px; right: 10px; cursor: pointer; background: none; border: none;}
    .goTop img{display: block; width: 100%;}

    :root{
        --titleFontSize: 20px;
        --markFontSize: 18px;
        --inMarkBiggerFontSize: 20px;
        --normalFontSize: 18px;
        --titleFontColor: #6b4c15;
        --titleBackGround: #fdc72e;
        --lightPink: #f84540;
        --darkPink: #e25656;
        --textBlack: #333333;
        --darkBlue: #171c61;
    }
}