@charset "UTF-8";
.study_nav { display: none; width: 100vw; overflow: auto; position: fixed; top: 13.2vw; background: #fff; z-index: 4; box-shadow: 0vw 0vw 1.6vw 0vw rgba(213, 213, 213, 0.6); }
.study_nav:after { content: ""; display: block; height: 0; width: 0; clear: both; }
.study_nav > li { float: left; width: 49.6vw; height: 10vw; color: #666; line-height: 5.867vw; text-align: center; position: relative; }
.study_nav > li > a { display: block; height: 9vw; font-size: 3.733vw; color: #666; line-height: 9vw; text-align: center; }
.study_nav > li.on > a { color: #D21D1E; }
.study_nav > li.on:after { content: ""; position: absolute; width: 8vw; height: 0.8vw; background: linear-gradient(90deg, #FA3E22 0%, #D30014 100%); border-radius: 0.4vw; bottom: 1vw; left: 50%; transform: translateX(-50%); }

.list_top_box { width: 100vw; margin: 0 auto; }
.list_top_box .yx_top { display: block; width: 100vw; margin: 0 auto; }
.list_top_box .yx_title { display: block; width: 63.6vw; margin: 0 auto 4vw; }

.main_box { padding-top: 13.2vw; background: #F5F5F5; }

.yxt_title { display: none; height: 5.333vw; font-size: 3.733vw; font-weight: 600; color: #333; line-height: 5.333vw; margin-bottom: 2vw; padding-left: 4vw; }

.no_res_box { margin: 5.333vw auto 0; padding: 10.667vw 0; }
.no_res_box > img { display: block; width: 33vw; margin: 5.333vw auto; }
.no_res_box > h3 { font-size: 4vw; font-weight: 400; color: #999; line-height: 8vw; text-align: center; }
.no_res_box > p { font-size: 2.667vw; font-weight: 400; color: #c5c5c5; line-height: 4vw; text-align: center; }

.kcul_list { width: 100vw; margin: 0 auto 0.5vw; overflow: hidden; padding: 0 0 5.467vw 3.667vw; }
.kcul_list > li { width: 43.867vw; height: 50vw; float: left; margin-left: 4.133vw; margin-top: 5.467vw; position: relative; }
.kcul_list > li:first-child { margin-left: 0; margin-top: 1vw; }
.kcul_list > li:first-child + li { margin-top: 1vw; }
.kcul_list > li:nth-child(2n-1) { margin-left: 0; }
.kcul_list > li > div { box-shadow: 0vw 0vw 1.6vw 0vw rgba(213, 213, 213, 0.35); position: absolute; top: 0; width: 100%; height: 100%; padding-bottom: 1.867vw; border-radius: 1.6vw; overflow: hidden; border: 0.133vw solid #efefef; background: #fff; transition: .3s; }
.kcul_list > li > div > img { display: block; width: 43.867vw; margin: 0 auto; }
.kcul_list > li > div > a { cursor: pointer; }
.kcul_list > li > div > a:first-child { position: absolute; top: 26.667vw; width: 43.6vw; font-size: 3.7vw; color: #333; line-height: 8vw; overflow: hidden; height: 9vw; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; transition: .3s; font-weight: bold; text-align: left; padding-left: 3vw; }
.kcul_list > li > div > a:first-child.black { color: #333; }
.kcul_list > li > div > a:first-child:hover { color: #fa6c06; }
.kcul_list > li > div > .kc_ico { display: inline-block; height: 5.400vw; padding: 0 2.533vw; line-height: 5.400vw; text-align: center; background: #7ecef4; border-radius: 0.667vw; font-size: 3.7vw; font-weight: 400; color: #ffffff; margin-left: 3.067vw; margin-top: 1.5vw; }
.kcul_list > li > div > p { line-height: 4.667vw; color: #b4b4b4; font-size: 3.7vw; padding: 0 2.800vw; margin: 0; height: 4.667vw; font-weight: normal; overflow: hidden; position: relative; cursor: default; }
.kcul_list > li > div > p > span { line-height: 5.2vw; color: #989898; font-size: 3.7vw; font-weight: normal; }
.kcul_list > li > div > p > span > b { color: #ff4d4d; font-size: 3.7vw; font-weight: bold; }
.kcul_list > li > div > p .yuan_pri { float: left; }
.kcul_list > li > div > p .vip_pri { position: absolute; left: 22.667vw; }
.kcul_list > li > div > p .vip_pri > img { display: inline-block; vertical-align: middle; padding-bottom: 0.533vw; }
.kcul_list > li > div > i { top: 2.9vw; left: 0; padding: 0 2.800vw; line-height: 6.600vw; text-align: center; color: #ff9d11; font-size: 3vw; position: absolute; font-style: normal; font-weight: bold; background: #fcf5ef; border-radius: 0vw 1.6vw 1.6vw 0vw; }
.kcul_list > li > div:hover { top: -1.067vw; box-shadow: 0 0.8vw 2.667vw 0 #dedede; }
.kcul_list > li > div > .class_hour { margin-top: 8.6vw; padding-left: 3vw; }
.kcul_list > li > div > .class_hour span { padding: 0.3vw 1vw 0; background: #FFF2E5; border-radius: 0.8vw; font-size: 2.4vw; color: #FF8500; line-height: 3.6vw; height: 3.6vw; display: inline-block; }

.teacher_infor { height: 10.667vw; width: 34.933vw; position: absolute; bottom: 12vw; left: 2vw; border-radius: 5.867vw; background: #fff; }
.teacher_infor > img { position: absolute; width: 10.667vw; height: 10.667vw; left: 0; top: 0; border-radius: 50%; vertical-align: middle; }
.teacher_infor > div { position: absolute; font-size: 2.133vw; font-weight: 400; color: #fff; line-height: 4.267vw; top: 0.667vw; left: 12.8vw; display: none; }
.teacher_infor > span { position: absolute; font-size: 3.733vw; font-weight: bold; color: #333; line-height: 4.267vw; top: 3.6vw; left: 12.667vw; }

.list_foot { position: absolute; height: 9.231vw; width: 100%; bottom: 0; left: 0; }
.list_foot > .xianmian { float: left; padding-left: 3.077vw; }
.list_foot > .xianmian > img { display: inline-block; width: 3.733vw; margin-right: 1.846vw; vertical-align: middle; margin-top: 2.3vw; }
.list_foot > .xianmian > span { position: absolute; top: 0vw; left: 8vw; height: 9.231vw; font-size: 3vw; font-weight: 400; color: #ff0000; line-height: 9.231vw; }
.list_foot > .price_box { float: left; padding-left: 3.077vw; }
.list_foot > .price_box > img { display: inline-block; width: 3.733vw; margin-right: 1.846vw; vertical-align: middle; margin-top: 2.3vw; }
.list_foot > .price_box > span { position: absolute; top: 0vw; left: 3vw; height: 9.231vw; font-size: 3vw; font-weight: 400; color: #ff0000; line-height: 9.231vw; }
.list_foot > .price_box > b { position: absolute; top: -0.1vw; left: 6vw; height: 9.231vw; font-size: 4.2vw; font-weight: 400; color: #ff0000; line-height: 9.231vw; font-weight: bold; }
.list_foot > span { float: right; padding-right: 3.077vw; font-size: 3vw; font-weight: 400; color: #b6bcc6; line-height: 9.231vw; }
.list_foot > .youhui { float: left; padding-left: 3.077vw; }
.list_foot > .youhui > i { font-size: 2.154vw; font-weight: 400; color: #ff0000; line-height: 9.231vw; margin-right: 0.923vw; font-style: normal; }
.list_foot > .youhui > b { font-size: 4.615vw; font-weight: 400; color: #ff0000; line-height: 9.231vw; margin-right: 0.923vw; }
.list_foot > .youhui > span { font-size: 2.769vw; font-weight: 400; color: #cccccc; line-height: 9.231vw; text-decoration: line-through; }

.filter_box { width: 100vw; margin: 0 auto 4vw; background: #fff; }
.filter_box .main_list { padding: 0; height: 13vw; text-align: center; }
.filter_box .main_list:after { content: ""; display: block; width: 0; height: 0; clear: both; }
.filter_box .main_list * { user-select: none; }
.filter_box .main_list dl { overflow: hidden; margin: 0 0 0; width: 25vw; float: left; padding-left: 2vw; }
.filter_box .main_list dl:last-child { border-bottom: none; }
.filter_box .main_list dl dt { font-size: 3vw; display: block; color: #999; width: 20vw; line-height: 5vw; height: 6vw; -moz-border-radius: 1vw; -webkit-border-radius: 1vw; border-radius: 1vw; margin: 2vw 0; text-align: center; }
.filter_box .main_list dl dt + dd { cursor: pointer; }
.filter_box .main_list dl dt + dd:hover { color: #fff; }
.filter_box .main_list dl dd { height: 5vw; font-size: 3vw; cursor: pointer; line-height: 5vw; padding: 0 1.1vw; margin: 1vw auto; transition: .3s; width: 20vw; color: #666; display: block; -moz-border-radius: 1vw; -webkit-border-radius: 1vw; border-radius: 1vw; text-align: center; }
.filter_box .main_list dl dd > a { color: #666; display: block; cursor: pointer; }
.filter_box .main_list dl dd > a:active { color: #fff; }
.filter_box .main_list dl dd > a:hover { color: #ff8f16; }
.filter_box .main_list dl dd:active { color: #fff; }
.filter_box .main_list dl dd:hover { color: #ff8f16; }
.filter_box .main_list dl dd.on { color: #fff; background: linear-gradient(90deg, #faa90f 0%, #f93310 100%); }
.filter_box .main_list dl dd.on > a { color: #fff !important; }
.filter_box .main_list dl dd.on:hover { color: #fff !important; }
.filter_box .main_list .select_box { height: 5.333333333333334vw; border: none; outline: none; padding: 0; line-height: 5.333333333333334vw; background-size: 4vw; font-size: 3.733333333333334vw; font-weight: 400; color: #555; cursor: pointer; display: inline-block; margin-right: 8vw; margin-left: 1vw; margin-top: 1.8vw; position: relative; float: none; }
.filter_box .main_list .select_box > span { background: url("../images/about_study/dropdown_button.svg") no-repeat right 4.3vw; background-size: 2.8vw; height: 10.333333333333334vw; color: #555; padding-right: 5vw; line-height: 10vw; text-align: right; width: 22vw; display: inline-block; }
.filter_box .main_list .select_box > ul { display: none; width: 20vw; position: absolute; background: #fff; top: 10vw; left: 6vw; z-index: 20; border-radius: 0.6vw; box-shadow: 0 0 1vw 1vw rgba(66, 66, 66, 0.2); }
.filter_box .main_list .select_box > ul > li { font-size: 3.7vw; border-bottom: 0.133vw solid #efefef; line-height: 9vw; padding-left: 0; color: #666; border-radius: 0.6vw; text-align: center; }
.filter_box .main_list .select_box > ul > li.on { color: #FF8500; }

/*在Pad端的显示效果*/
@media screen and (min-width: 102.4vw) and (max-width: 160vw) { .teacher_infor { bottom: 12vw; left: 0vw; } }
.text-center { text-align: center; }

.pagination { padding-left: 0; margin: 0 auto 6vw; border-radius: 0.533vw; }

.pagination > li { display: inline-block; width: 4vw; }

.pagination > li > a, .pagination > li > span { display: inline-block; width: 6vw; line-height: 6vw; text-decoration: none; text-align: center; background-color: #fff; border: 0.233vw solid #d8d8d8; font-size: 3.3vw; }

.pagination > li > a, .pagination > li > span { color: #FF8E36; cursor: pointer; }

.pagination > li:first-child > a { margin-left: 0; border-bottom-left-radius: 0.533vw; border-top-left-radius: 0.533vw; }

.pagination > li:last-child > a { margin-left: 0; border-bottom-right-radius: 0.533vw; border-top-right-radius: 0.533vw; }

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { z-index: 3; color: #fff; background-color: #FF8E36; border-color: #FF8E36; }

.img_all { width: 100%; margin: 0 auto; }
.img_all > img { display: block; width: 100vw; margin: 0 auto; }