.w1500{max-width: 1500px; margin: 0 auto;}
.bannerBox{height: 856px; box-sizing: border-box; background: url(/images/yt_chwlzyt_head_02.jpg) no-repeat center; background-color: #eff7ff; }
.th1{background-color: #f9f6e0;}
.theme{padding: 70px 0;}
.theme .titleBox{margin-bottom: 20px;}
.th1 .tabA{font-size: 0px; padding-left: 50px; margin-top: -50px;}
.th1 .tabA a{position: relative; display: inline-block; vertical-align: middle; box-shadow: 0px 0px 13px #f0e5bf; width: 120px; height: 120px; padding: 5px; background-color: #ffff; border-radius: 100%; margin: 0 12px;}
.th1 .tabA a i{display: block; height: 100%; line-height: 90px; text-align: center; border-radius: 100%; border: 5px solid; font-size: 32px; font-weight: bold; color: #fff;}
.th1 .tabA a.a1 i{border-color: #d3521c; background-color: #e89315;}
.th1 .tabA a.a2 i{border-color: #cb668e; background-color: #a71b4a;}
.th1 .tabA a.a3 i{border-color: #1c2a75; background-color: #25539c;}
.th1 .tabA a.a4 i{border-color: #38b364; background-color: #16572f;}
.th1 .tabA a.a5 i{border-color: #472782; background-color: #793c93;}
.th1 .tabA .showBox{display: none; width: 1050px; position: absolute; left: 0px; bottom: 150px; box-shadow: 0px 6px 19px #cdb14c; background-color: #fff; padding: 35px; border-radius: 14px;} 
.th1 .tabA a.a3 .showBox{left: 50%; transform: translateX(-50%);}
.th1 .tabA a.a4 .showBox{left: 50%; transform: translateX(-50%);}
.th1 .tabA a.a5 .showBox{left: 50%; transform: translateX(-50%);}
.th1 .tabA a.on .showBox{display: block;}
.th1 .tabA a.on i::before{content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: -30px; z-index: 2; border: 23px solid transparent; border-top-color: #fff;}
.th1 .tabA .showBox img{max-height: 100%;}
.theme .topA {font-size: 0px;}
.theme .topA a{display: inline-block; vertical-align: bottom;}
.theme .topA.w33 a{width: 33.3333%; text-align: center;}
.theme .topA.w25 a{width: 25%;}
.theme .topA.w50 a{width: 50%;}
.theme .topA a.a1{text-align: left;}
.theme .topA a.a2{text-align: right;}
.theme .bottomBg{padding-top: 50px;}
.th3{background: url(/images/yt_chwlzyt_bg1_02.jpg) no-repeat center; background-size: cover;}
.th4{background: url(/images/yt_chwlzyt_bg1_03.jpg) no-repeat center; background-size: cover;}
.th5{background: url(/images/yt_chwlzyt_bg1_05.jpg) no-repeat center; background-size: cover;}

.commonModel{visibility: hidden; opacity: 0; transition: .3s; z-index: 100; position:fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.5);}
.commonModel.on{visibility: visible; opacity: 1;}
.commonModel .commonModeBox{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 1200px;  }
.commonModel .commonModeBox .clearBtn{position: absolute; right: 0px; top: 0px; font-size: 46px; line-height: 1; color: #fff; transition: .3s;}
.commonModel .commonModeBox .clearBtn:hover{color: rgb(244, 103, 103);}

@media screen and (max-width: 1660px){
  .w1500{max-width: 1200px; margin: 0 auto;}
  .th1 .tabA .showBox{width: 800px;}
}
@media screen and (max-width: 1200px){
  .bannerBox{background-size: cover; height: 400px;}
}
@media screen and (max-width: 760px){
  .bannerBox{height: 230px;}
  .th1 .tabA{position: relative;}
  .th1 .tabA a{position: initial;}
  .th1 .tabA a i{position: relative;}
  .th1 .tabA .showBox{max-width: 300px; padding: 5px; bottom: 60px; left: 0px !important; transform: none !important; }
  .w1500{padding: 0 15px;}
  .theme{padding: 20px 0;}
  .theme .titleBox { margin-bottom: 10px;}
  .theme .titleBox img{ height: 50px;}
  .th1 .tabA{padding-left: 0px;}
  .th1 .tabA a{width: 50px; height: 50px; margin: 0 5px; padding: 2px;}
  .th1 .tabA a i{border-width: 2px; font-size: 17px; line-height: 40px;}
  .th1 .tabA a.on i::before{border-width: 8px; top: -14px;}
  .commonModel .commonModeBox{width: 90vw;}
  .commonModel .commonModeBox .clearBtn{font-size: 34px; right: -5px; top: -18px;}
  .theme .bottomBg{padding-top: 15px;}
}