@charset "utf-8";
/*.element::-webkit-scrollbar {display:none}*/
/* CSS Document */
html, body { margin: 0; padding: 0; font:14px/22px Verdana, Arial, sans-serif;  }
h1, h2, h3, h4, h5, p, h6, ul, li, ol, dd, dl, dt, input { padding:0; margin:0; list-style:none; font-weight:400;}
.clear { clear:both; height:0;}
.pid-b, .pid-d {display: none;}
/* CSS Document */
.Details { width: 1080px; margin: 0 auto; padding: 0; }
/* CSS Document */

.upgrade-steps .Details {width: 1200px;}
.upgrade-steps .thx-mess{color: #33bf72;font-size: 27px;font-weight: bold;text-align: center;padding: 50px 0 30px;}
.upgrade-steps h2{font-size: 26px;color: #414141;text-align: center;}
.steps-content{display: flex;justify-content: space-between; align-items: center;padding: 30px 0 50px;}
.steps-content .one{border: 2px dashed #ffcd55;border-radius: 10px; padding:15px 25px;width: 280px;text-align: center;}
.steps-content .one a{font-size: 21px;color: #189aff;}
.steps-content .one p{font-size: 15px;color: #504f4f;padding-top: 8px;}

.DivMain01 { background: url(../images/25hw/bg1.jpg) no-repeat top / cover;  padding-bottom: 100px;}
.DivMain01 .logo { padding: 10px; }
.DivMain01 h1 { font-size: 29px; color: #f3ffc3; text-align: center; padding: 70px 0 0; line-height: 39px;font-family: Impact;letter-spacing: 1px;font-stretch: expanded; }
.DivMain01 h1 strong {font-size: 33px;display: block; padding-bottom:10px;color: #fffaf2;font-weight: 500;}
.DivMain01 h3 {margin: 0 auto 10px; padding: 30px 0; color: #5e3008; text-align: center; font-size: 21px;}
.DivMain01 h3>span {display: inline-block;padding: 13px 20px;background-color: transparent;border-radius: 24px;}
.DivMain01 .One { width: 450px;  float: left; background: #fff; border-radius: 10px 0 0 10px; padding: 42px 0 0;  margin-left: 30px;box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);}
.DivMain01 .One h2, .DivMain01 .Two h2 { font-size: 27px; text-align: center;  font-weight: 800; }
.DivMain01 .One h2 em, .DivMain01 .Two h2 em {  display: block; padding: 5px 0 0; color: #7a828a; font-size: 17px; font-style: normal; font-weight: 400; }
.DivMain01 .One .put {  text-align: center; padding: 30px 0 55px; }
.DivMain01 .One .put .useing { border-radius: 5px; font-size: 16px; display: inline-block; border: 1px solid #333333; width: 315px; line-height: 60px; color:#333333;}
.DivMain01 .One .put a { color: #0fb4ff; }
.DivMain01 .One ul { padding: 5px 0 90px; background: #fafafa; border-radius: 0 0 0 10px;}
.DivMain01 .One ul li {  background: url(../images/give/main01-icon02.png) 70px 17px no-repeat; padding: 13px 0 13px 98px; border-bottom: 1px solid #dadada;}
.DivMain01 .One ul li:last-child { color: #9f9b9b; background: url(../images/give/main01-icon01.png) 70px 18px no-repeat; }
/* CSS Document */
.DivMain01 .Two { width: 550px; float: right; border: 6px solid #fe8723;  background: #fff; border-radius: 0 10px 10px 0; padding: 42px 0 0;  margin-right: 30px;box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);position: relative;}
.DivMain01 .Two .arrow-img {position: absolute;top: -42px;left: -6px;z-index: 1;display: none;}
.DivMain01 .Two h2,.DivMain01 .Two>div {position: relative;z-index: 2;}
.DivMain01 .Two .put { padding: 25px 0 0; text-align: center; }

.DivMain01 .Two .put .codewin { border-radius: 5px; font-size: 17px; display: inline-block;  width: 400px; height: 55px; line-height: 26px; border: 1px solid #d0d0d0;}
.DivMain01 .Two .put .codewin select{border: none;width: 50%;float: left;padding: 18px 15px;position: relative; top:1px;outline: none;height: 53px;line-height: 53px;}
.DivMain01 .Two .put .codewin a{background: #FE8723;width: 50%;float: right;text-decoration: none;height: 100%;}
.DivMain01 .Two .put .codewin a b{font-size: 22px; font-weight: 600;display: block;}
.DivMain01 .Two .put .codewin a span{ font-weight: 600;margin-left: 10px;}

.DivMain01 .Two .put .codemac { border-radius: 5px; font-size: 17px; display: inline-block;  width: 265px; height: 55px; line-height: 26px;
	background:url(../images/give/main01-icon06.png) 30px 15px no-repeat #ffab1b; padding: 5px 0 0 50px; }
.DivMain01 .Two .put b { font-size: 22px; font-weight: 400; }
.DivMain01 .Two .put em { font-style: normal;  font-size: 18px; }
.DivMain01 .Two .put a { color: #fff; }
.DivMain01 .Two ul { padding: 5px 0 40px; background: #fffbf3; border-radius: 0 0 10px 0;}
.DivMain01 .Two ul li {  background: url(../images/give/main01-icon02.png) 70px 17px no-repeat; padding: 13px 0 13px 100px; border-bottom: 1px solid #f7ead2;  }
.DivMain01 .Two ul li em { color: #626262; display: block; font-style: normal; }
.DivMain01 .Two h4 {  text-align: center; padding: 10px 0 20px; font-size: 17px;  }
.DivMain01 .Two h4 img {  vertical-align:  bottom; }
.DivMain01 .Two h4 a { color: #606060; }
/* CSS Document */
.DivMain02 {  background: #fff url(../images/22anni/main02-bg01.png) calc(50% - 622px) 100px no-repeat;padding-bottom: 50px; }
.DivMain02 .Details { padding: 50px 0; }
.DivMain02 .right { width: 780px; float: right; background: url(../images/give/main02-bg02.png) 30px 260px no-repeat; position: relative; }
.DivMain02 .right .video {  width: 153px; height: 152px; position:absolute;  top: 250px; left: -200px; cursor: pointer; }
.DivMain02 .right .video img{position:relative; z-index:9;}
.DivMain02 .right .video .water-box{position:absolute; width:127px; height:105px; top:25px; left:16px; transform:rotate(41deg);}
.DivMain02 .right .video .water-box span{width:127px; height:105px; background-color:rgba(75, 123, 140, .5); position:absolute; border-radius:50%;}
.DivMain02 .right .video .water-box span.water1{animation:water 4s cubic-bezier(.5,.27,.2,.91) 1s infinite; -webkit-animation:water 4s cubic-bezier(.5,.27,.2,.91) 1s infinite;}
.DivMain02 .right .video .water-box span.water2{animation:water 4s cubic-bezier(.5,.27,.2,.91) 3s infinite; -webkit-animation:water 4s cubic-bezier(.5,.27,.2,.91) 3s infinite;}
.DivMain02 .right .video .water-box span.water3{animation:water 4s cubic-bezier(.5,.27,.2,.91) 5s infinite; -webkit-animation:water 4s cubic-bezier(.5,.27,.2,.91) 5s infinite;}
@keyframes water{
	0%{transform:scale(0); opacity:0}
	50%{opacity:1}
	100%{transform:scale(1.2); opacity:0}
}
.DivMain02 .right h2 {  text-align: center; font-size: 31px; padding: 20px 0 0; }
.DivMain02 .right h3 { font-size: 15px; font-weight: 800; padding: 70px 0 15px; text-align: center;  }
.DivMain02 .left { width: 50%; float: left; padding: 50px 0 0; }
.DivMain02 .left>div {height: 51px;}
.DivMain02 .left>div img {max-height: 100%;}
.DivMain02 .left h4 { font-size: 14px; font-weight: 800; padding: 15px 20px 20px 30px; }
.DivMain02 .left h4 span{color:#f90;}
.DivMain02 .left p { padding: 0 20px 0 30px; color: #808080; }
.DivMain02 h5 {  padding: 40px 0 0px;  font-size: 19px; text-align: center; }
.DivMain02 .put { padding: 30px 0 0; text-align: center; }
.DivMain02 .put .codewin { border-radius: 5px; font-size: 17px; display: inline-block;  width: 400px; height: 55px; line-height: 26px; border: 1px solid #d0d0d0;}
.DivMain02 .put .codewin select{border: none;width: 50%;float: left;padding: 18px 15px;position: relative; top:1px;outline: none;}
.DivMain02 .put .codewin a{background: #FE8723;width: 50%;float: right;text-decoration: none;height: 100%;}
.DivMain02 .put .codewin a b{font-size: 22px; font-weight: 600;display: block;}
.DivMain02 .put .codewin a span{ font-weight: 600;margin-left: 10px;}
.DivMain02 .put .codemac { border-radius: 5px; font-size: 17px; display: inline-block;  width: 265px; height: 55px; line-height: 26px;
	background:url(../images/give/main01-icon06.png) 30px 15px no-repeat #ffab1b; padding: 5px 0 0 50px; }
.DivMain02 .put b { font-size: 22px; font-weight: 400; }
.DivMain02 .put em { font-style: normal;  font-size: 18px; }
.DivMain02 .put a { color: #fff; }
.DivMain01 .Two .put b { font-size: 22px; font-weight: 400; }
.DivMain01 .Two .put em { font-style: normal;  font-size: 18px; }
.DivMain02 h6 {  text-align: center; padding: 10px 0 0; font-size: 17px;  }
.DivMain02 h6 img {  vertical-align:  bottom; }
.DivMain02 h6 a { color: #606060; }
/* CSS Document */
.DivMain03{background: #fafafc; padding-bottom: 40px;}
.DivMain03 .people{text-align: center;}
.DivMain03 .people img{margin: -60px 0 20px;}
.DivMain03 h2{font-size: 33px;text-align: center;font-weight: bold;}
.DivMain03 h2 a{color: #1b8ff5;padding: 25px 0 0;display: inline-block;text-decoration: none;}
.DivMain03 .txt{padding: 30px 0 15px;}
.DivMain03 .txt img.r_img{float: right;padding: 20px 0 0 90px;}
.DivMain03 .txt img.l_img{float: left;padding: 10px 45px 0 0;}
.DivMain03 .txt p{font-size: 15px;color: #4b5866;padding: 10px 0;line-height: 25px;}
.DivMain03 .txt .r_icon{text-align: right;}
/* CSS Document */
.DivMain04{ padding:50px 0 50px; color:#4b5866;}
.DivMain04 .main04_one{width:22%; padding:0 1.5%; float:left; text-align:center;}
.main04_one .t{font-size:15px; padding:15px 0 10px; color:#1f2833;font-weight: bold;}
/* CSS Document */
.DivMain05{padding-bottom: 70px;}
.DivMain05 .qes_one{border-bottom: 1px solid #e6e6e6;padding: 18px 0 8px;}
.DivMain05 .qes_one .t{font-size: 18px; background: url(../images/25hw/add.png) no-repeat right 3px;cursor: pointer; padding-bottom: 10px;}
.DivMain05 .qes_one .qes_ans{color: #737480;display: none;}
.DivMain05 .qes_one.focus .t{background: url(../images/25hw/min.png) no-repeat right center;}
.DivMain05 .qes_one.focus .qes_ans{display: block;}
/* CSS Document */

.video_pop{width:810px; height:410px;}
.video_pop .close{ text-align: right;font-size: 35px; position: relative; color: #fcfcfc; }
.video_pop .close span{cursor: pointer; position: absolute;right: -15px; top: -20px;}

.Top { width: 90px; height: 90px; position: fixed; bottom:10%; right: 5%; cursor: pointer; display: none; }
.Top img{max-width:100%;}

@media  (max-width: 979px) {

.Details { width: 95%; }
.DivMain01{height:auto; padding-bottom: 50px;}
.DivMain01 .One { width: 520px; float: none; margin: 0 auto; border-radius: 5px;  }
.DivMain01 .Two { width: 520px; float: none;  border-radius: 5px; padding: 42px 0 0; margin: 20px auto 0;  }
.DivMain01 .Two .arrow-img {display: none;}

.DivMain03 .txt{padding-bottom: 0;}
.DivMain03 .txt img.r_img{padding: 2% 0 0 2%;}
.DivMain03 .txt img.l_img{padding: 2% 2% 0 0;}

}

@media  (max-width: 767px) {

.Details { width: 95%; }

.DivMain01 h1 { font-size: 25px;  padding: 25px 0 0; line-height: 35px; }

.DivMain01 .One { width: 95%;   }
.DivMain01 .Two { width: 95%; }

.DivMain02 {  background: none; }
.DivMain02 .right { width: 95%; float: none; margin: 0 auto; background:none; }
.DivMain02 .right h2 {   font-size: 25px; padding: 20px 0 0; }
.DivMain02 .right h3 { font-size: 19px;padding: 20px;  }
.DivMain02 .right .video { display: none; }

.DivMain04 .main04_one{ width:47%;}

}

@media  (max-width: 479px) {

.DivMain01 h1{font-size:16px;}
.DivMain01 h1 strong{font-size:18px;}
.DivMain01 h3 { padding: 20px 0 10px; font-size: 14px; width:100%; background:none;}
.DivMain01 .One ul, .DivMain01 .Two ul{border-radius:10px;}
.DivMain01 .One ul li, .DivMain01 .One ul li:last-child{padding-left:35px; background-position:10px center;}
.DivMain01 .One .put .useing{width:85%; font-size:14px; line-height:50px;}
.DivMain01 .Two .put .codewin{width:80%;height: auto;}
.DivMain01 .Two .put .codewin select{width:100%;}
.DivMain01 .Two .put .codewin a{width:100%;height: auto;}

.DivMain01 .Two ul li{padding-left:35px; padding-right:10px; background-position:10px 17px;}

.DivMain02 .left { width: 95%; float: none; padding: 50px 0 0; text-align: center; }
.DivMain02 .put .codewin{width:80%;height: auto;}
.DivMain02 .put .codewin select{width:100%;}
.DivMain02 .put .codewin a{width:100%;height:auto;}


.DivMain03 .txt img.r_img, .DivMain03 .txt img.l_img{float: none;display: block; margin: 0 auto;}

.DivMain04{padding:30px 0;}
.DivMain04 .main04_one{width:auto; padding:5px 10px;}

}