@charset "utf-8";
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
html,body{min-height:100%; margin:0 auto; font:62.5% "Microsoft Yahei",Arial,tahoma,sans-serif; outline:none;}
body{background:#0d4088 url(bg.jpg) no-repeat center top; background-size:100%; min-height:100%; min-width:34rem; max-width:120rem; line-height:165%; margin:0 auto; padding:0; font-size:1.4rem; color:#333; outline:none;}
form,ul,ol,li,dl,dt,dd,form,img,p{margin:0; padding:0; border:none; list-style-type:none; outline:none; /* line-height:135%;*/}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; border:none; list-style-type:none; font-size:1.4rem; outline:none; /* line-height:135%;*/}
img{border:none; outline:none; max-width:100%;}

::-webkit-scrollbar {width:6px;}
::-webkit-scrollbar-track {border-radius:0; background:transparent;}
::-webkit-scrollbar-thumb {border-radius:10; background:#9ad3f2;}
::selection{background: #066cd3; color: #fff;}

select,button,input,textarea{font:1.4rem "Microsoft Yahei",Arial,tahoma,sans-serif; box-sizing:border-box; border-radius:0; list-style:none; list-style-position:outside; outline:none; -webkit-appearance:none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
blockquote,code,pre{font:1.4rem "Microsoft Yahei",Arial,tahoma,sans-serif;}
table{empty-cells:show; border-collapse:collapse;}
input[type=number] {appearance:textfield; -moz-appearance:textfield; -webkit-appearance:textfield;}  
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;} 

a, a:link, a:visited{text-decoration:none; cursor:pointer;}
a:hover{color:#f20; text-decoration:none;}

header{display: grid;  grid-template-columns:18rem 1fr; grid-template-rows: 1fr;  gap: 0 0; position: relative;} /*  grid-template-areas: 'left_side main right_side'; */
header h1{background:url(logo.png) no-repeat left center; background-size:15rem; height:8rem; line-height:80rem; overflow: hidden;}
header nav{margin:2rem 0; text-align: right;}
header nav a{display:inline-block; margin:0 0 0 2rem; padding:0 2rem; height:4rem; line-height:4rem; border-radius:2rem; font-size:2rem;}
header nav a:first-child{margin:0;}
header nav a, header nav a:link, header nav a:visited, header nav a:hover{text-decoration:none;}
header nav a.act{background:#066cd3; color:#fff;}

.slogan{margin:6rem 2rem;}
.slogan img{display:block; margin:0 auto;}

.qualifications{margin:4rem 2rem; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0 4rem; grid-auto-flow:row;}
.qualifications p{flex:1; margin:0; background:url(qualificationsBorder.png) no-repeat left bottom; background-size:22rem;}
.qualifications p strong{display:block; padding:1rem 4rem; height:7.2rem; color:#fff; font-weight:normal; font-size:1.8rem; line-height:145%; text-align:center; background:url(qualificationsBorder2.png) no-repeat right bottom; background-size:22rem;}

.statement{margin:4rem 2rem; font-size:3rem; text-align:center; color:#fff; line-height:165%;}
.statement strong{color:#fc0;}

.callMe{margin:4rem 2rem 2rem 2rem; text-align: center;}
.callMe a.whatsapp{display:inline-block; margin:0 auto; padding:0 2rem 0 6rem; width:auto; height:5rem; line-height:5rem; background:#25d366 url(whatsapp.png) no-repeat 1rem center; background-size:4rem; color:#fff; font-size:1.8rem; border-radius:1rem;}

.infoBox{margin:4rem 2rem; will-change:transform; overflow: hidden;}
.infoBox h2{text-align:center; font-size:2.5rem; color:#fff;}
.infoBox h3{text-align:center; font-size:1.6rem; color:#fff; margin:1rem 0; font-weight:normal;}

.mainBox{background:#fff; border-radius: 1rem; position: relative; padding:2rem;}
.mainBox::before{content:''; position: absolute; top:-1.8rem; left:0; width:25rem; height:7rem; background:url(mainBoxBG.png) no-repeat left top; background-size:25rem;}

.priceTab{}
.priceTab .layui-tabs-header{height:auto; line-height:135%;}
.priceTab .layui-tabs-header li{height:auto;width:33%; line-height:135%; padding:2rem 0; color:#999;}
.priceTab .layui-tabs-header li strong{display:block; font-size:2rem;}
.priceTab .layui-tabs-header li span{display:block; font-size:1.6rem; margin:1rem 0 0 0;}
.priceTab .layui-tabs-header li.layui-this{color:#066cd3;}
.priceTab .layui-tabs-header li.layui-this span{color:#333;}
.priceTab .layui-tabs-header li.layui-this::after{border-bottom:.5rem solid #066cd3; top:auto; bottom:-2px;}
.priceTab  .layui-tabs-body{padding:2rem 0;}
.priceTab  .layui-tabs-body .priceBox{display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between;}
.priceTab  .layui-tabs-body .priceBox dl{flex:1; margin:0 4rem 0 0; padding:0 4rem 0 0; border-right:1px dashed #ccc;}
.priceTab  .layui-tabs-body .priceBox dl:last-child{margin:0; padding:0; border-right:0;}
.priceTab  .layui-tabs-body .priceBox dl dt{padding:2rem 0; text-align: center; font-weight:bold; font-size:2rem;}
.priceTab  .layui-tabs-body .priceBox dl dd{padding:1rem; border-bottom:1px dotted rgba(0,0,0,.1); display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between;}
.priceTab  .layui-tabs-body .priceBox dl dd span{flex:1; font-size:1.6rem;text-align:center;}
.priceTab  .layui-tabs-body .priceBox dl dd span:first-child{text-align:left;}
.priceTab  .layui-tabs-body .priceBox dl dd span:last-child{text-align:right;}
.priceTab  .layui-tabs-body .priceBox dl dd.title{background:#edf9fe; padding:1rem; border-radius:1rem; border-bottom:none;}

.holidayCalendar{}
.holidayCalendar h4{text-align:center; font-size:1.4rem; margin:1rem 0;}
.holidayCalendar ul{overflow: hidden;}
.holidayCalendar dl{border-bottom:1px solid #ccc; border-left:1px solid #ccc; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between;}
.holidayCalendar dl:first-child{border-top:1px solid #ccc;}
.holidayCalendar dl dd{flex:1; border-right:1px solid #ccc; font-size:1.2rem; text-align: center; padding:.2rem 0;}
.holidayCalendar dl dd.month{font-weight:bold;}
.holidayCalendar dl dd.daily{background:#fa0;}
.holidayCalendar dl dd.peak{background:#f20; color:#fff;}

.holidayCalendar ol{}
.holidayCalendar ol p{margin:1rem 0 0 0;}
.holidayCalendar ol p strong{margin:0 1rem 0 0;}
.holidayCalendar ol p strong::before{content:''; display:inline-block; width:3rem; height:2rem; vertical-align: middle; background:#fff; border:1px solid #ccc; margin:0 .5rem 0 0;}
.holidayCalendar ol p strong.daily::before{background:#fa0; border:none;}
.holidayCalendar ol p strong.peak::before{background:#f20; border:none;}


.courseRules{padding:3rem 2rem 2rem 2rem}
.courseRules h4{margin:2rem 0 0 0; font-weight:bold; font-size:2rem;}
.courseRules p{margin:.5em 0 0 0; font-size:1.4rem;}
.courseRules p .tip{color:#f20; font-weight:bold;}

.imgBox{margin:1rem 0; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between;}
.imgBox img{flex:1; margin:0 2rem 0 0; border-radius:1rem; background:rgba(255,255,255,.2); overflow: hidden;}
.imgBox img:last-child{margin:0;}
.statementImg{margin:1rem 2rem;}

.venueBox{margin:1rem 0 0 0; padding:4rem 2rem 2rem 2rem;}
.venueBox img.about{float:right; margin:0 0 0 2rem; width:32rem; border-radius:1rem; background:rgba(255,255,255,.2);}
.venueBox h4{margin:2rem 34rem 2rem 0; font-weight:bold; font-size:2rem; text-align: center;} 
.venueBox h6{margin:2rem 34rem 0 0; font-weight:normal; font-size:1.4rem; line-height:165%; min-height:12rem; text-indent:2em;}
.venueBox h5{margin:1rem 0; font-weight:bold; font-size:1.8rem;} 
.venueBox p{margin:.5em 0 0 0; font-weight:normal; font-size:1.4rem; line-height:165%;}
.venueBox .imgBox{margin:1rem 0 0 0;}

.guideBox{margin:1rem 0 0 0;}
.guideBox .layui-tabs-header{height:auto; line-height:135%;}
.guideBox .layui-tabs-header li{height:auto;width:49.5%; line-height:135%; padding:2rem 0; color:#999; font-size:2rem;}
.guideBox .layui-tabs-header li.layui-this{color:#066cd3;}
.guideBox .layui-tabs-header li.layui-this::after{border-bottom:.5rem solid #066cd3; top:auto; bottom:-2px;}
.guideBox .layui-tabs-body{padding:2rem 0 0 0;}
.guideBox .layui-tabs-body .layui-tabs-item dl{margin:2rem 0 0 0;}
.guideBox .layui-tabs-body .layui-tabs-item dl:first-child{margin:0;}
.guideBox .layui-tabs-body .layui-tabs-item dl dt{font-weight:bold; font-size:1.6rem;}
.guideBox .layui-tabs-body .layui-tabs-item dl dd{font-size:1.4rem; margin:.5em 0 0 0;}


.aboutBox{margin:1rem 0 0 0; padding:5rem 2rem 2rem 2rem;}
.aboutBox h4{margin:4rem 0; text-align: center; font-size:1.8rem;}
.aboutBox h4 a.whatsapp{display:inline-block; margin:0 auto; padding:0 2rem 0 6rem; width:auto; height:5rem; line-height:5rem; background:#25d366 url(whatsapp.png) no-repeat 1rem center; background-size:4rem; color:#fff; font-size:1.8rem; border-radius:1rem;}
.aboutBox p{margin:.5em 0 0 0; font-weight:normal; font-size:1.4rem; line-height:165%;}

footer{margin:2rem; font-size:1.4rem; text-align:center; color:#fff;}


.popBox{position: fixed; right:1rem; bottom:2rem; width:4rem; overflow: hidden;}
.popBox a{display:block; width:4rem; height:4rem; line-height:40rem;  border-radius:50%; margin:2rem 0 0 0; background:#ccc;}
.popBox a:first-child{margin:0;}
.popBox  a.whatsapp{background:#25d366 url(whatsapp.png) no-repeat center center; background-size:50%;}
.popBox  a.gotop{background:#066cd3 url(gotop.png) no-repeat center center; background-size:40%;}


.rightMenu{border-radius:0 !important;}
.rightMenu .layui-layer-setwin{right:20rem; top:0;}
.rightMenu .layui-icon-close{right:1rem; top:1rem; width:3rem; height:3rem; line-height:3rem; font-size:1.4rem; background:#fff; color:#000; padding:0; border:0; overflow: hidden;}
.rightMenu .layui-icon-close::before{display:block; width:3rem; height:3rem; line-height:3rem;}


@media (max-width:1080px){
    header{margin:0 1rem;}
    header h1{ height:6rem;}
    header::before{content:''; position: absolute; top:1rem; right:0; width:3.5rem; height:3.5rem; background:#fff url(menu.png) no-repeat center center; background-size:40%; border-radius:.4rem; overflow: hidden;}
    header nav{display:none; margin:0; background:#fff; text-align:center; }
    header nav a{display:block; margin:0; padding:0; border-radius:0; height:5rem; line-height:5rem; font-size:1.6rem; border-bottom:1px dotted rgba(0,0,0,.1);}


    .slogan{margin:0 2rem;}
    .qualifications{margin:2rem;}

    .qualifications{grid-template-columns:1fr 1fr 1fr 1fr; gap:2rem 2rem;}
    .qualifications p strong{font-size:1.8rem; padding:2rem 4rem;}
}

@media (max-width:960px){
    .slogan img{max-width:90%;}
    .qualifications{grid-template-columns:1fr 1fr; gap:4rem 6rem;}
    .qualifications p strong{font-size:1.8rem;}

    .holidayCalendar ul{border-top:1px solid #ccc; border-right:1px solid #ccc; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between;}
    .holidayCalendar dl{flex:1; display:block; border-bottom:none;}
    .holidayCalendar dl:first-child{border-top:none;}
    .holidayCalendar dl dd{border-right:0; border-bottom:1px solid #ccc; height:2rem; line-height:2rem;}
}

@media (max-width:830px){
    .qualifications{grid-template-columns:1fr 1fr; gap:4rem 6rem;}
    .qualifications p strong{font-size:1.5rem; padding:2rem 4rem;}

}

@media (max-width:600px){
    .priceTab  .layui-tabs-body .priceBox{display:block;}
    .priceTab  .layui-tabs-body .priceBox dl{margin:0; padding:0; border:none;}
    .priceTab  .layui-tabs-body .priceBox dl dt{padding:1rem 0; font-size:1.6rem;}
    .priceTab  .layui-tabs-body .priceBox dl dd, .priceTab  .layui-tabs-body .priceBox dl dd.title{padding:.5rem; }
    .priceTab  .layui-tabs-body .priceBox dl dd span{font-size:1.4rem;}

    .holidayCalendar dl dd{font-size:1rem;}

    .venueBox img.about{display:block; float:initial; width:auto; margin:0 auto;}
    .venueBox h4{margin:1rem 0; font-size:1.6rem;}
    .venueBox h5{font-size:1.6rem;}
    .venueBox h6{margin:1rem 0; font-size:1.4rem;}

    .guideBox .layui-tabs-header li{font-size:1.4rem; padding:1rem 0;}
    .guideBox .layui-tabs-body .layui-tabs-item dl dt{font-size:1.4rem;}
}

@media (max-width:520px){
    .mainBox::before{width:15rem; height:4.5rem; background-size:15rem; top:-1rem;}
   .qualifications p strong{font-size:1.4rem; padding:2rem;}

   .statement{margin:2rem; font-size:1.6rem; line-height:145%;}

   .priceTab .layui-tabs-body{padding:0 0 2rem 0;}
   .priceTab .layui-tabs-header li{padding:1rem 0;}
   .priceTab .layui-tabs-header li strong{font-size:1.4rem;}
   .priceTab .layui-tabs-header li span{font-size:1.2rem; margin:0.5rem 0 0 0;}
   .priceTab .layui-tabs-body .priceBox dl dt{padding:1rem 0 0 0; font-size:1.4rem;}
   .priceTab  .layui-tabs-body .priceBox dl dd span{font-size:1.2rem;}

   .venueBox .imgBox{display:block; border-radius:1rem; overflow: hidden;}
   .venueBox .imgBox img{margin:0; border-radius:0;}
}

@media (max-width:410px){
    .qualifications{grid-template-columns:1fr 1fr; gap:2rem 2rem;}
    .qualifications p strong{font-size:1.2rem; padding:2rem;}
    
    .statement{font-size:1.4rem;}

    .imgBox img{border-radius:0.4rem; margin:0 1rem 0 0;}

    .infoBox h2{font-size:1.8rem;}
    .infoBox h3{font-size:1.2rem; line-height:145%;}

    .courseRules{padding:2rem;}

    .holidayCalendar ol p{font-size:1rem; line-height:145%;}
    .holidayCalendar ol p strong::before{height:1.2rem; width:2rem;}
     .holidayCalendar dl dd{font-size:.9rem;}

    .courseRules h4{font-size:1.2rem; margin:1rem 0 0 0;}
    .courseRules p{font-size:1.2rem; line-height:145%;}

    .venueBox h5{font-size:1.4rem;}
    .venueBox h6{font-size:1.2rem;}
    .venueBox p{font-size:1.2rem; line-height:145%;}

    .guideBox .layui-tabs-body .layui-tabs-item dl dd{font-size:1.2rem; line-height:145%;}

    .aboutBox{padding:2rem;}
    .aboutBox h4{font-size:1.2rem; margin:1rem 0;}
    .aboutBox p{font-size:1.2rem; line-height:145%;}
    .aboutBox h4 a.whatsapp{margin:2rem 0; font-size:1.4rem;}
   

}