/* Index CSS */
.page__hd .navbar{ max-width: 1920px; min-width: 1366px; width: 100%; height: 9.8rem; box-shadow:-2px 3px 24px 0px rgba(0, 0, 0, 0.07); position: fixed; top: 0; left: 50%; transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); z-index: 1000;}
.page__hd .navbar .menu{ float: right; line-height: 9.8rem; padding-right: 10rem;}
.page__hd .navbar .menu li{ float: left; font-size: 14px; padding: 0 3.25rem;}
.page__hd .navbar .menu li a{ transition: color 0.3s ease 0s;}
.page__hd .navbar .menu li a:hover{ color: #FE5200;}
.page__hd .navbar__bg{ max-width: 1920px; min-width: 1366px; width: 100%; height: 9.8rem; position: fixed; top: 0; left: 50%; transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); background-color: #FFFFFF; opacity: 0; z-index: 999;}
.page__hd .navbar__bg .logo{ float: left; width: 9.9rem; margin-left: 5.2rem; padding-top: 2.3rem;}

.page__bd{ width: 100%;}
.page__bd .logo2{ max-width: 1920px; margin: auto; position: relative;}
.page__bd .logo2 img{ display: block; width: 25rem; position: absolute; top: 0; left: 38rem; z-index: 1001;}

/* 轮播海报 */
#rotation_poster{ max-width: 1920px; min-width: 1366px; max-height: 1080px; min-height: 768px; width: 100%; margin: auto; overflow: hidden; background: url("/img_new/desktop/index_poster_bg.jpg") no-repeat top / 100% 100%; position: relative;}
#rotation_poster .poster{ display: none; width: 100%; height: 100%;}

/* 海报 - 1 */
#poster_01{ position: absolute;}
#poster_01 .left_poster{ position: absolute; top: 36.7rem; left: 38.3rem;}
#poster_01 .left_poster .poster_slogan{ display: block; width: 31.5rem;}
#poster_01 .left_poster .poster_title{ margin-top: 1.6rem; font-size: 7rem; font-weight: 200;}
#poster_01 .left_poster .poster_subtitle{ font-size: 2.4rem;}
#poster_01 .left_poster .poster_profile{ font-size: 12px; width: 51.4rem;}
#poster_01 .left_poster .poster_piano{ display: block; width: 19.3rem; padding-top: 1.3rem;}
#poster_01 .left_poster .poster_btn{ width: 25rem; margin-top: 2rem; color: #FFFFFF; background-color: #FE5200; line-height: 4rem; transition: background-color 0.3s ease 0s, color 0.3s ease 0s, border 0.3s ease;}
#poster_01 .left_poster .poster_btn:hover{ color: #FE5200; background-color: transparent; border: 1px #FE5200 solid;}
#poster_01 .right_poster{ position: absolute; bottom: 0; right: 38rem;}
#poster_01 .right_poster .poster_zhou{ display: block; width: 56.6rem;}

/* 海报 - 2 */
#poster_02{ position: absolute;}
#poster_02 .left_poster{ position: absolute; top: 36.7rem; left: 38.3rem;}
#poster_02 .left_poster .poster_slogan{ display: block; width: 31.5rem;}
#poster_02 .left_poster .poster_title{ margin-top: 1.6rem; font-size: 7rem; font-weight: 200;}
#poster_02 .left_poster .poster_subtitle{ font-size: 2.4rem;}
#poster_02 .left_poster .poster_profile{ font-size: 12px; width: 51.4rem;}
#poster_02 .left_poster .poster_ipad{ display: block; width: 19.3rem; padding-top: 1.3rem;}
#poster_02 .left_poster .poster_btn{ width: 25rem; margin-top: 2rem; color: #FFFFFF; background-color: #FE5200; line-height: 4rem; transition: background-color 0.3s ease 0s, color 0.3s ease 0s, border 0.3s ease;}
#poster_02 .left_poster .poster_btn:hover{ color: #FE5200; background-color: transparent; border: 1px #FE5200 solid;}
#poster_02 .right_poster{ position: absolute; bottom: 3.7rem; right: 38rem;}
#poster_02 .right_poster .poster_phone{ display: block; width: 40.5rem;}

/* 海报 - 3 */
#poster_03{ position: absolute;}
#poster_03 .left_poster{ position: absolute; top: 36.7rem; left: 38.3rem;}
#poster_03 .left_poster .poster_slogan{ display: block; width: 31.5rem;}
#poster_03 .left_poster .poster_title{ margin-top: 1.6rem; font-size: 7rem; font-weight: 200;}
#poster_03 .left_poster .poster_subtitle{ font-size: 2.4rem;}
#poster_03 .left_poster .poster_profile{ font-size: 12px; width: 51.4rem;}
#poster_03 .left_poster .poster_cat{ display: block; width: 19.3rem; padding-top: 1.3rem;}
#poster_03 .left_poster .poster_btn{ width: 25rem; margin-top: 2rem; color: #FFFFFF; background-color: #FE5200; line-height: 4rem; transition: background-color 0.3s ease 0s, color 0.3s ease 0s, border 0.3s ease;}
#poster_03 .left_poster .poster_btn:hover{ color: #FE5200; background-color: transparent; border: 1px #FE5200 solid;}
#poster_03 .right_poster{ position: absolute; bottom: 0; right: 38rem;}
#poster_03 .right_poster .poster_child{ display: block; width: 70.5rem;}

/* 切换按钮 */
#rotation_poster .switch_btn{ width: 100%; position: absolute; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 998;}
#rotation_poster .switch_btn .left_btn{ float: left; margin-left: 18rem; cursor: pointer;}
#rotation_poster .switch_btn .right_btn{ float: right; margin-right: 18rem; cursor: pointer;}

/* 汲趣课程 */
.lessons{ max-width: 1920px; width: 100%; margin: 0 auto;}
.lessons .row{ width: 1200px; margin: 0 auto;}
.lessons .col-lg-4{ padding: 0;}
.lessons .contents{ width: 100%; padding: 11rem 0;}
.lessons .separator{ border-style: none solid; border-width: 1px; border-color: rgba(37, 37, 39, 0.27);;}
.lessons .contents img{ display: block; width: 7.7rem; margin: auto;}
.lessons .contents .title{ padding-top: 4.8rem; font-size: 18px; font-weight: bold; text-align: center;}
.lessons .contents .profile{ font-size: 14px; font-weight: 200; text-align: center;}
.lessons .contents .detail_btn{ display: block; width: 15.9rem; line-height: 3.6rem; margin: 8.2rem auto 0; border-radius: 1.8rem; text-align: center; font-size: 12px; font-weight: 300; color: #FFFFFF; background-color: #FE5200; transition: background-color 0.3s ease 0s;}
.lessons .contents .detail_btn:hover{ background-color: #252527;}
.lessons .banner{ width: 100%; height: 54.8rem; background: url("/img_new/desktop/lessons_banner.jpg") no-repeat top / 100% 100%;}
.lessons .banner .title{ padding-top: 8.4rem; font-size: 4.2rem; color: #FFFFFF; text-align: center; font-weight: 200;}
.lessons .banner .subtitle{ font-size: 14px; color: #FFFFFF; text-align: center; font-weight: 200;}
.lessons .panels{ width: 34rem; height: 46.2rem; margin: auto; box-shadow:0px 2px 76px 0px rgba(0, 0, 0, 0.1); background-color: #FFFFFF; position: relative; top: -29rem; opacity: 0;}
.lessons .panels img{ display: block; width: 100%;}
.lessons .panels .title{ padding: 3rem 0 0 2.4rem; font-size: 2rem; font-weight: bold;}
.lessons .panels .profile{ padding: 0 2.4rem; font-size: 12px; font-weight: 300;}
.lessons .panels .buttons{ width: 100%; padding: 0 2.4rem; position: absolute; bottom: 3rem;}
.lessons .panels .demand_btn{ float: left; width: 16rem; height: 3.2rem; text-align: center; font-size: 12px; line-height: 3rem; border: 1px solid #FE5200; border-radius: 1.6rem; color: #FFFFFF; background-color: #FE5200; transition: background-color 0.3s ease 0s, color 0.3s ease 0s, border 0.3s ease;}
.lessons .panels .demand_btn:hover{ color: #FE5200; background-color: transparent; border: 1px solid #FE5200;}
.lessons .panels .services{ float: right; font-size: 12px; line-height: 3.2rem; color: #6C6C77;}
.lessons .more_lessons_btn{ display: block; width: 25rem; margin: auto; font-size: 14px; line-height: 5.2rem; color: #FE5200; text-align: center; border:1px solid #FE5200; border-radius: 2.6rem; transition: background-color 0.3s ease 0s, color 0.3s ease 0s; position: relative; top: -15rem;}
.lessons .more_lessons_btn:hover{ color: #FFFFFF; background-color: #FE5200;}

/* 精彩活动 */
.campaign{ max-width: 1920px; width: 100%; height: 108rem; margin: 0 auto; background: url("/img_new/desktop/campaign_banner.jpg") no-repeat top / 100% 100%;}
.campaign .title{ padding-top: 10rem; font-size: 4.2rem; color: #FFFFFF; text-align: center; font-weight: 200;}
.campaign .subtitle{ font-size: 14px; color: #FFFFFF; text-align: center; font-weight: 200;}
.campaign .row{ width: 1200px; margin: 0 auto; padding-top: 8.5rem;}
.campaign .row .col-lg-6{ padding: 0 2rem;}
.campaign .left_panels{ float: right; width: 56.4rem; height: 56.4rem; background-color: #FFFFFF; box-shadow:0px 6px 30px 0px rgba(0, 0, 0, 0.08); position: relative; opacity: 0;}
.campaign .left_panels img{ display: block; width: 100%;}
.campaign .left_panels .panel_title{ padding: 3.2rem 0 0 3.2rem; font-size: 2rem; font-weight: bold;}
.campaign .left_panels .panel_subtitle{ padding-left: 3.2rem; font-size: 14px; font-weight: 300;}
.campaign .left_panels .panel_profile{ padding-left: 3.2rem; font-size: 14px; font-weight: 300;}
.campaign .left_panels .buttons{ position: absolute; bottom: 3.2rem; right: 3.2rem;}
.campaign .left_panels .buttons .signup_btn{ display: inline-block; width: 13rem; line-height: 3.6rem; font-size: 12px; font-weight: 300; color: #FFFFFF; text-align: center; background-color: #FE5200; border-radius: 1.8rem;}
.campaign .left_panels .buttons .details_btn{ display: inline-block; width: 13rem; line-height: 3.6rem; font-size: 12px; font-weight: 300; color: #FE5200; text-align: center; background-color: #FFFFFF; border: 1px solid #FE5200; border-radius: 1.8rem; margin-left: 1.6rem;}

.campaign .right_panels{ float: left; width: 56.4rem; height: 16.8rem; margin-bottom: 3rem; background-color: #FFFFFF; box-shadow:0px 6px 30px 0px rgba(0, 0, 0, 0.08); position: relative; opacity: 0;}
.campaign .right_panels img{ float: left; width: 30rem;}
.campaign .right_panels .panel_title{ float: left; padding: 2.5rem 0 0 2rem; font-size: 14px; font-weight: bold;}
.campaign .right_panels .panel_subtitle{ float: left; padding-left: 2rem; font-size: 12px; font-weight: 300;}
.campaign .right_panels .buttons{ position: absolute; bottom: 1.5rem; right: 1.5rem;}
.campaign .right_panels .buttons .signup_btn{ display: inline-block; width: 10rem; line-height: 2.8rem; font-size: 10px; font-weight: 300; color: #FFFFFF; text-align: center; background-color: #FE5200; border-radius: 1.4rem;}
.campaign .right_panels .buttons .details_btn{ display: inline-block; width: 10rem; line-height: 2.8rem; font-size: 10px; font-weight: 300; color: #FE5200; text-align: center; background-color: #FFFFFF; border: 1px solid #FE5200; border-radius: 1.4rem; margin-left: 1rem;}
.campaign .more_campaign_btn{ display: block; width: 25rem; margin: 5rem auto 0; font-size: 14px; line-height: 5.2rem; color: #FFFFFF; text-align: center; border:1px solid #FFFFFF; border-radius: 2.6rem; transition: background-color 0.3s ease 0s, color 0.3s ease 0s;}
.campaign .more_campaign_btn:hover{ color: #FE5200; background-color: #FFFFFF;}

/* 关于我们 */
.aboutus{ max-width: 1920px; width: 100%; height: 108rem; margin: 0 auto; background: url("/img_new/desktop/aboutus_banner.jpg") no-repeat top / 100% 100%;}
.aboutus .title{ padding-top: 10rem; font-size: 4.2rem; color: #333333; text-align: center; font-weight: 200;}
.aboutus .subtitle{ font-size: 14px; color: #333333; text-align: center; font-weight: 200;}
.aboutus .wraper{ width: 100%; height: 50rem; padding-top: 12.4rem;}
.aboutus .wraper .left_panel{ float: left; width: 103rem; height: 50rem; background-color: #FFFFFF; position: relative;}
.aboutus .wraper .left_panel .more{ width: 6.2rem; height: 6.2rem; position: absolute; right: -3.1rem; top: 21.9rem; transition: All 0.4s ease-in-out; cursor: pointer;}
.aboutus .wraper .left_panel .more:hover{ transform: rotate(360deg);}
.aboutus .wraper .left_panel .content{ float: right; width: 45rem; position: relative; top: 50%; right: 6rem; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.aboutus .wraper .left_panel .content .details{ font-size: 12px; font-weight: 300;}
.aboutus .wraper .left_panel .content .list{ font-size: 14px; color: #FE5200;}
.aboutus .wraper .left_panel .content .list li{ font-size: 12px; margin-top: 1rem; color: #333333;}
.aboutus .wraper .right_panel{ float: left; width: 40rem; height: 50rem; background-color: #FFFFFF; margin-left: 11rem; position: relative; opacity: 0;}
.aboutus .wraper .right_panel img{ width: 100%;}
.aboutus .wraper .right_panel .panel_title{ padding: 2.8rem 0 0 2.4rem; font-size: 2rem; font-weight: bold;}
.aboutus .wraper .right_panel .panel_subtitle{ padding-left: 2.4rem; font-size: 12px; font-weight: 300;}
.aboutus .wraper .right_panel .detail_btn{ display: block; width: 16rem; line-height: 3.2rem; font-size: 12px; font-weight: 300; color: #FFFFFF; background-color: #FE5200; border: 1px #FE5200 solid; border-radius: 1.6rem; text-align: center; position: absolute; bottom: 2.9rem; right: 2.3rem; transition: background-color 0.3s ease 0s, color 0.3s ease 0s, border 0.3s ease;}
.aboutus .wraper .right_panel .detail_btn:hover{ border: #FE5200 1px solid; color: #FE5200; background-color: transparent;}

/* 联系我们 */
.contactus{ max-width: 1920px; width: 100%; height: 115.5rem; margin: 0 auto; position: relative;}
.contactus .title{ padding-top: 10rem; font-size: 4.2rem; color: #333333; text-align: center; font-weight: 200;}
.contactus .subtitle{ font-size: 14px; color: #333333; text-align: center; font-weight: 200;}
.contactus .map{ display: block; width: 100%; margin-top: 21.5rem;}
.contactus .contact_panel{ width: 116rem; height: 28.8rem; background-color: #FE5200; position: absolute; top: 27rem; left: 50%; transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.contactus .contact_panel .row{ margin: auto;}
.contactus .contact_panel img{ width: 9rem; height: 9rem; margin-top: 5.8rem;}
.contactus .contact_panel .contact_title{ color: #FFFFFF; text-align: center; margin-top: 3rem;}
.contactus .contact_panel .contact_profile{ color: #FFFFFF; text-align: center;}
.contactus .map_icon{ width: 3.2rem; height: 3.2rem; margin-top: 2.3rem;}
.contactus .address{ text-align: center; margin: 3rem 0 20rem;}

/* Animate.css */
:root { --animate-delay: 0.5s;}

@-webkit-keyframes backInLeft {
    0% {
      -webkit-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }

    100% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
    }
}
@keyframes backInLeft {
    0% {
      -webkit-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }

    100% {
      -webkit-transform: translateX(0px);
      transform: translateX(0px);
    }
}
.animate__backInLeft {
    -webkit-animation-name: backInLeft;
    animation-name: backInLeft;
}

/* Service */
.page__hd .subnavbar{ max-width: 1920px; min-width: 1200px; width: 100%; height: 9.8rem; margin: auto; box-shadow:-2px 3px 24px 0px rgba(0, 0, 0, 0.07); position: relative;}
.page__hd .subnavbar .sublogo{ float: left; width: 26.7rem; height: 5.3rem; margin: 2.3rem 0 0 38rem;}
.page__hd .subnavbar .menu{ float: right; margin-right: 40rem; position: relative; top: 50%; transform: translateY(-50%);}
.page__hd .subnavbar .menu li{ float: left;}
.page__hd .subnavbar .menu li a:hover{ color: #FE5200;}
.page__hd .subnavbar .menu .list_01{ border-right: 2px solid #FE5200; padding-right: 4rem;}
.page__hd .subnavbar .menu .list_02{ padding-left: 4rem;}
.page__hd .subnavbar .menu .active{ color: #FE5200;}
.page__bd .service { width: 100%; padding: 26rem 0; background: url('/img_new/desktop/service_bg.jpg') no-repeat top center / 100%; position: relative;}
.page__bd .service .service_cat { display: block; width: 12.5rem; position: absolute; top: 14.5rem; left: 81rem;}
.page__bd .service .qcode { width: 28rem; margin: auto; padding-bottom: 1rem; background-color: #FFFFFF;}
.page__bd .service .qcode img { display: block; width: 100%;}
.page__bd .service .qcode .tip { text-align: center; line-height: 36px;}




