.box{ position:relative;overflow:hidden;}
.banner{ position:relative;width:100%;height:803px;background:#03a9f4;}
.banner .wrap{ position:relative;}
.txt01{ padding-top:120px;padding-bottom:40px;}
.txt02{ padding-bottom:40px;font-size:44px;color:#46edfc;}
.txt04{ padding-right:40px;display:table;padding-bottom:14px;margin-top:32px;color:#45f4ff;border-bottom:1px solid #156ea9;font-size:22px;}
.tutu{ position:absolute;top:46px;right:-10px;}
.box01{ position:relative;width:100%;height:661px;box-sizing:border-box;padding-top:157px;margin-top:-220px;background-image:url(../images/box01.png);background-repeat:no-repeat;background-position:center;z-index:2;}
.title{ position:absolute;top:-30px;left:50%;width:556px;height:70px;transform:translateX(-50%);line-height:70px;border-radius:14px;color:#fff;font-size:28px;text-align:center;background:linear-gradient(to right,#3e69e3,#40d7d8);}
.wrap{ position:relative;}
.box01 .wrap{ border-radius:14px;background:linear-gradient(to right,#3d50e2,#3ecfd2);}
.bg01{ position:absolute;bottom:0;left:0;}
.books_wrap{ position:relative;padding-top:92px;padding-bottom:48px;margin-left:60px;z-index:2;}
.books_wrap li{ float:left;box-sizing:border-box;width:292px;height:364px;padding-top:18px;margin-right:98px;background:linear-gradient( 54deg,rgba(21,247,255,1),rgba(185,255,255,1) );box-shadow:0px 0px 66px 0px rgba(5,1,1,0.44);border-radius:16px;transition:transform 0.5s ease;}
.books_wrap li:hover{ transform:translateY(-5px);}
.books_wrap li img{ width:262px;height:332px;margin:0 auto;border-radius:16px;}
.books_wrap li:last-child{ margin-right:0;}
.bg_color{ position:relative;padding-top:90px;padding-bottom:80px;background-color:#100444;}
.footer_bg{ position:absolute;bottom:0;left:0;width:100%;height:521px;background-image:url(../images/footer.png);background-repeat:no-repeat;background-position:center;z-index:1;}
.container{ padding-bottom:44px;background:linear-gradient(to right,#3c47e1,#40d7d8);border-radius:16px;}
.box02 .container{ padding-top:112px;}
.box02_l{ float:left;width:434px;height:344px;margin:20px 160px 0 86px;background:linear-gradient( 54deg,rgba(21,247,255,1),rgba(185,255,255,1) );box-shadow:0px 0px 66px 0px rgba(5,1,1,0.44);border-radius:16px;}
.box02_l img{ margin:-30px auto 0 auto;}
.box02_r{ float:left;width:414px;height:364px;box-sizing:border-box;padding-top:28px;background:linear-gradient( 54deg,rgba(21,247,255,1),rgba(185,255,255,1) );box-shadow:0px 0px 66px 0px rgba(5,1,1,0.44);border-radius:16px;}
.box02_list li{ box-sizing:border-box;width:370px;height:60px;padding-top:10px;margin:0 auto 22px auto;line-height:60px;text-align:center;background:linear-gradient(to right,#3e4ce6,#40d8d8);border-radius:18px;}
.box02_list li p{ width:330px;height:40px;margin:0 auto;line-height:40px;background-color:#fff;border-radius:40px;}
.box03{ margin-top:90px;}
.tips{ padding-top:60px;color:#fff;font-size:22px;text-align:center;}
.box03_wrap{ box-sizing:border-box;width:944px;height:344px;padding-top:23px;margin:20px auto;background:linear-gradient( 54deg,rgba(21,247,255,1),rgba(185,255,255,1) );box-shadow:0px 0px 66px 0px rgba(5,1,1,0.44);border-radius:16px;}
.box03_bg{ width:901px;height:300px;margin:0 auto;background-image:url(../images/border.png);background-repeat:no-repeat;background-size:100% 100%;overflow:hidden;}
.box03_bg_l{ float:left;margin:10px 100px 0 62px;}
.box03_bg_r{ float:left;}
.btn{ width:170px;height:38px;margin:16px auto 16px auto;line-height:38px;border-radius:40px;background-color:#fff;font-size:22px;color:#1f9eb4;text-align:center;}
.box03_bg_r p{ line-height:30px;color:#fff;text-align:center;}
.box04{ position:relative;margin-top:50px;z-index:3;}
.box04 .container{ box-sizing:border-box;padding-top:80px;}
.box04_wrap{ position:relative;width:944px;height:364px;margin:0 auto;background:linear-gradient(54deg,#12d2d9,#a1dddd);box-shadow:0px 0px 66px 0px rgba(5,1,1,0.44);border-radius:16px;}
.box04_info{ position:absolute;top:-20px;left:50%;width:900px;height:368px;transform:translateX(-50%);background:linear-gradient(54deg,#3e47e7,#40d5d8);border-radius:16px;overflow:hidden;}
.box04_bg{ position:absolute;bottom:0;left:0;z-index:1;}
.buy_msg{ position:relative;text-align:center;z-index:2;}
.buy_msg p{ padding-top:34px;padding-bottom:20px;font-size:30px;color:#fff;}
.buy_msg img{ margin:0 auto 20px auto;}
.market_price{ padding-left:236px;font-size:20px;text-decoration:line-through;color:#fff;text-align:left;}
.buy{ width:100%;height:60px;line-height:60px;font-size:24px;color:#fff;border-radius:12px;background:linear-gradient(to right,#3e53e6,#3fa9dd);}
.buy a{ display:block;margin:0 auto;width:150px;height:60px;border-radius:12px;line-height:56px;text-align:center;background:linear-gradient(to right,#f5d15e,#fefaef);transition:opacity 0.5s ease;}
.buy a:hover{ opacity:0.95;}
.buy span{ color:#ffe400;}
.code_container{ display:flex;justify-content:center;align-items:center;margin-top:40px;}
.code_wrap{ box-sizing:border-box;width:216px;height:216px;padding-top:18px;margin:0 auto;background:linear-gradient(to right,#39d7dc,#80d9db);border-radius:16px;}
.code_wrap img{ border:16px solid #fff;margin:0 auto;border-radius:16px;}
.code_l{ margin-right:100px;}
.code_container p{ box-sizing:border-box;width:320px;height:70px;padding-top:10px;margin-top:14px;border-radius:16px;background:linear-gradient(to right,#15f7ff,#b9ffff);text-align:center;font-size:18px;line-height:26px;}
.mob_show{ display:none;}
@media only all and (max-width:1080px){
.banner{ height:10rem;background-size:auto 100%;}
.txt01{ width:6rem;padding-top:2rem;padding-bottom:0.3rem;}
.txt02{ padding-bottom:0.5rem;font-size:0.7rem;}
.txt03{ width:10rem;}
.txt04{ padding-right:0.3rem;padding-bottom:0.3rem;margin-top:0.5rem;font-size:0.65rem;}
.pc_show{ display:none;}
.mob_show{ display:block;}
.tutu{ width:9.2rem;top:1rem;right:-0.25rem;}
.box01{ height:auto;padding-top:1rem;margin-top:1rem;background-image:none;}
.title{ top:-0.75rem;width:16rem;height:2rem;line-height:2rem;border-radius:0.35rem;font-size:0.8rem;}
.box01 .wrap{ border-radius:0.35rem;}
.bg01{ display:none;}
.books_wrap{ padding:2rem 0.5rem 1rem 0.5rem;margin-left:0;margin-bottom:0.5rem;}
.books_wrap li{ width:49%;height:11.1rem;margin-bottom:0.5rem;margin-right:2%;padding-top:0.5rem;box-shadow:0px 0px 1.5rem 0px rgba(5,1,1,0.44);border-radius:0.4rem;}
.books_wrap li:nth-child(even){
margin-right:0;}
.books_wrap li img{ width:94%;height:10.1rem;margin:0 auto;}
.bg_color{ padding-top:2rem;padding-bottom:1rem;}
.box02 .container{ padding-top:2.5rem;}
.box02_l{ float:none;width:94%;height:auto;padding:0.5rem;box-sizing:border-box;margin:0.5rem auto;box-shadow:0px 0px 1.5rem 0px rgba(5,1,1,0.44);border-radius:0.4rem;}
.box02_l img{ width:100%;margin:-1rem auto 0 auto;}
.box02_r{ float:none;width:94%;height:auto;padding-top:0.75rem;padding-bottom:0.25rem;margin:0 auto;box-shadow:0px 0px 1.5rem 0px rgba(5,1,1,0.44);border-radius:0.4rem;}
.box02_list li{ width:94%;height:2rem;padding-top:0.25rem;margin:0 auto 0.5rem auto;line-height:2rem;border-radius:0.5rem;}
.box02_list li p{ width:94%;height:1.5rem;line-height:1.5rem;border-radius:1rem;}
.container{ padding-bottom:1rem;border-radius:0.4rem;}
.box03{ margin-top:2rem;}
.tips{ padding-top:1.8rem;padding-bottom:0.3rem;font-size:0.8rem;}
.box03_wrap{ width:94%;height:auto;padding-top:0.5rem;padding-bottom:0.5rem;margin:0.5rem auto;box-shadow:0px 0px 1.5rem 0px rgba(5,1,1,0.44);border-radius:16px;}
.box03_bg{ width:94%;height:auto;padding-top:0.5rem;padding-bottom:0.5rem;}
.box03_bg_l{ float:none;width:94%;margin:0 auto;}
.box03_bg_r{ float:none;}
.btn{ width:5rem;height:1.6rem;margin:0.4rem auto;line-height:1.6rem;border-radius:1rem;font-size:0.8rem;}
.box03_bg_r p{ line-height:1.1rem;}
.box04{ margin-top:1rem;}
.box04 .container{ padding-top:2rem;}
.box04_wrap{ width:94%;height:auto;padding-top:0.5rem;padding-bottom:0.5rem;box-shadow:0px 0px 1.5rem 0px rgba(5,1,1,0.44);border-radius:0.4rem;}
.footer_bg{ display:none;}
.box{ background-color:#100444;}
.box04_info{ position:static;width:94%;height:auto;padding-bottom:0.5rem;margin:0 auto;border-radius:0.4rem;transform:translateX(0%);}
.box04_bg{ display:none;}
.buy_msg p{ padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.9rem;}
.buy_msg img{ width:9rem;margin:0 auto 0.5rem auto;}
.market_price{ padding-left:0;font-size:0.75rem;text-align:center;}
.buy{ width:14rem;height:2.2rem;margin:0.4rem auto 0 auto;line-height:2.2rem;font-size:0.8rem;border-radius:0.3rem;}
.buy a{ width:4.2rem;height:2.2rem;border-radius:0.3rem;line-height:2.2rem;}
.code_container{ margin-top:1rem;}
.code_l{ margin-right:2%;}
.code_wrap{ width:6rem;height:6.5rem;padding-top:0.5rem;border-radius:0.4rem;}
.code_wrap img{ width:calc(94% - 0.8rem);border-width:0.4rem;border-radius:0.4rem;height:4.8rem;}
.code_container p{ width:8.2rem;height:2.8rem;padding:0.4rem 0.2rem;margin-top:0.35rem;border-radius:0.4rem;font-size:0.65rem;line-height:1.1rem;}
}