/* 全局样式 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 顶部导航栏样式 */
.sn-navbar {
    height: 60px;
    background-color: #7f88db;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5vw;
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(127, 136, 219, 0.3);
}

.sn-logo img {
    max-height: 40px;
    width: auto;
}

.sn-menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 8vw;
    max-width: 30px;
    height: 25px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.sn-bar1,
.sn-bar2,
.sn-bar3 {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.sn-menu-icon.active .sn-bar1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.sn-menu-icon.active .sn-bar2 {
    opacity: 0;
}

.sn-menu-icon.active .sn-bar3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

.sn-menu {
    position: fixed;
    top: 60px;
    right: -60vw;
    width: 60vw;
    max-width: 200px;
    background-color: #7f88db;
    color: white;
    margin: 0;
    padding: 0 20px;
    transition: right 0.3s ease-in-out;
    height: calc(100vh - 60px);
    overflow-y: auto;
    box-shadow: -2px 0 5px rgba(127, 136, 219, 0.3);
}

.sn-menu li {
    padding: 15px 20px;
    border-bottom: 1px solid #e2e4f6;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sn-menu li a {
	text-align: center;
	font-size: 14px;	
    color: white;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease;
}

.sn-menu li a:hover {
    color: #f62350;
}

.sn-menu li:last-child {
    border-bottom: none;
}

.sn-menu.active {
    right: 0;
}

.sn-menu.active li {
    -webkit-animation: sn-slideIn 0.3s ease forwards;
    animation: sn-slideIn 0.3s ease forwards;
}

.sn-menu.active li:nth-child(1) {
    animation-delay: 0.1s;
}

.sn-menu.active li:nth-child(2) {
    animation-delay: 0.2s;
}

.sn-menu.active li:nth-child(3) {
    animation-delay: 0.3s;
}

.sn-menu.active li:nth-child(4) {
    animation-delay: 0.4s;
}

.sn-menu.active li:nth-child(5) {
    animation-delay: 0.5s;
}

.sn-menu.active li:nth-child(6) {
    animation-delay: 0.6s;
}

.sn-menu.active li:nth-child(7) {
    animation-delay: 0.7s;
}

.sn-menu.active li:nth-child(8) {
    animation-delay: 0.8s;
}

.sn-menu.active li:nth-child(9) {
    animation-delay: 0.9s;
}

.sn-menu.active li:nth-child(10) {
    animation-delay: 1s;
}

@keyframes sn-slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes sn-slideIn {
    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/* 定义导航栏高度变量 */
:root {
    --navbar-height: 60px;
}

/* 底部悬浮栏样式 */
.sn-bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1vh 0;
    box-shadow: 0 -4px 8px rgba(127, 136, 219, 0.3);
    z-index: 100;
    box-sizing: border-box;
}

.sn-bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: auto;
    height: 30px;
    margin-bottom: 15px;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: center;
}

.sn-bottom-item.home {
    background-image: url('../wap_images/s5.png');
}

.sn-bottom-item.call {
    background-image: url('../wap_images/s6.png');
}

.sn-bottom-item.online {
    background-image: url('../wap_images/s7.png');
}

.sn-bottom-item span {
    color: #7f88db;
    font-size: 14px;
    margin-top: 25px;
}

.page_gg {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

/*底部表单*/
.myenroll {overflow: hidden; padding-bottom: 25px; background: #fff; border-bottom: 1px solid #999;}
.myenroll .list_tt {width: 100%; padding: 10px 15px; line-height: 30px; border-bottom: 1px solid #999; overflow: hidden;}
.myenroll .list_tt .fl {font-size: 18px; font-weight: bold; color: #111; display: flex;}
.myenroll .list_tt img {width: 40%;}
.myenroll .list_tt .fr {font-size: 14px; color: #666;}
.yh_list {padding: 15px 15px 0 15px; overflow: hidden;}
.yh_list img {width: 32%; float: left; overflow: hidden;}
.yh_list img:nth-child(2) {margin: 0 2%;}
.myenroll .myinput { width: 90%; margin: 0 auto; padding-top: 25px; overflow: hidden;}
.myenroll .myinput input { width: 100%; border: 1px solid #e0e0e0; height: 40px; padding-left: 40px; line-height: 40px; border-radius: 5px; margin-bottom: 15px; overflow: hidden;}
.myenroll .myinput .layui-input1 {background: url(../wap_images/input1.png) no-repeat 10px center; background-size: 22px 22px;}
.myenroll .myinput .layui-input2 {background: url(../wap_images/input2.png) no-repeat 10px center; background-size: 22px 22px;}
.myenroll .myinput .layui-btn {width: 100%; border-radius: 8px; height: 45px; line-height: 45px; background: #4c55a8; color: #fff; font-size: 20px; border: none;}
/*footer部分*/
.index_footer {background: #fff; padding: 30px 15px 70px 15px; text-align: center; overflow: hidden;}
.index_footer img {width: 12%;}
.index_footer h2 {font-size: 14px; font-weight: bold; padding: 5px 0 10px 0;}
.index_footer p,
.index_footer a
 { display: block; color: #111; font-size: 14px; line-height: 22px;}