#main { width: 100%; font-size: .7rem; background-color: #fcd24f; box-sizing: border-box; padding: 2rem 0 2rem; box-sizing: border-box; } #main table { border-spacing: 0; width: 100%; } #main li { list-style: none; } #main input, #main select { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 14px; color: #b2b2b2; height: 100%; } #main select { background-size: 8%; } .dis { display: flex; align-items: center; justify-content: space-between; } #main .btn_box { justify-content: center; } #main .btn_box .btn { width: 6.5rem; text-align: center; line-height: 1.5rem; background-color: #ffa200; box-shadow: 0rem 0rem 0.6rem 0rem rgba(196, 124, 0, 0.3); border-radius: 1rem; color: #ffffff; font-weight: 700; font-size: .65rem; } #main .btn_box .btn:nth-child(1) { margin-right: .6rem; } #main .banner { position: relative; } #main .banner img{ width: 100%; } #main .banner .topnav { width: 100%; position: absolute; bottom: 2.5rem; padding: 0 1.9rem; box-sizing: border-box; text-align: center; } #main .banner .topnav p { color: #ad5900; margin-bottom: .4rem; font-size: .6rem; } #main .banner .topnav ul { flex-wrap: wrap; } #main .banner .topnav ul li { width: 3.6rem; height: 1.5rem; background-color: #ffa200; border-radius: 2px; font-weight: 700; color: #ffffff; font-size: .7rem; line-height: 1.5rem; letter-spacing: 4px; } #main .banner .topnav ul li.mar_b { margin-bottom: .4rem; } #main .banner .topnav ul li.active { background-color: #722500; box-shadow: 0rem 0rem 1rem 0rem rgba(114, 37, 0, 0.15); } #main .container { position: relative; z-index: 10; } #main .container .content{ display: none; } #main .container .content.active{ display: block; } #main .container h1 { width: 5rem; height: 5rem; background: url(/uploads/image/zofimg/france.png) no-repeat; background-size: 100%; text-align: center; font-size: 1rem; line-height: 3.9rem; letter-spacing: .2rem; color: #722500; margin: 0 auto; position: absolute; z-index: 12; top: -1.7rem; left: 50%; transform: translatex(-50%); } #main .container .germany h1{ background: url(/uploads/image/zofimg/germany.png) no-repeat; background-size: 100%; } #main .container .netherlands h1{ background: url(/uploads/image/zofimg/netherlands.png) no-repeat; background-size: 100%; } #main .container .italy h1{ background: url(/uploads/image/zofimg/italy.png) no-repeat; background-size: 100%; } #main .container .ireland h1{ background: url(/uploads/image/zofimg/ireland.png) no-repeat; background-size: 100%; } #main .container .other h1{ background: url(/uploads/image/zofimg/others.png) no-repeat; background-size: 100%; } #main .container section { width: 94%; background-color: #ffffff; box-shadow: 4px 6px 13px 0px rgba(179, 194, 210, 0.31); border-radius: 6px; /* padding: 0 .4rem; */ margin: 0 auto; padding-bottom: .6rem; box-sizing: border-box; position: relative; z-index: 10; } #main .container section .advantage { padding-top: 3.8rem; } #main .container section .title { font-size: 0.85rem; font-stretch: normal; color: #ea4222; text-align: center; justify-content: center; margin-bottom: 0.7rem; } #main .container section .title em { width: 1rem; height: .1rem; background-color: #ea4222; } #main .container section .title em:nth-child(1) { margin-right: .3rem; margin-top: .1rem; } #main .container section .title em:nth-child(2) { margin-left: .3rem; margin-top: .1rem; } #main .container section .advantage .ul_s_box{ width: 94%; margin:0 auto 0.6rem; } #main .container section .advantage .ul_s { overflow-x: scroll; } #main .container section .advantage ::-webkit-scrollbar { width: 6px; height: 6px; } #main .container section .advantage ::-webkit-scrollbar-track { /* border-radius: 3px; */ background: rgb(251 251 251); -webkit-box-shadow: inset 0 0 5px rgb(214 214 214); } #main .container section .advantage ::-webkit-scrollbar-thumb { /* border-radius: 3px; */ background: rgb(194 192 192); -webkit-box-shadow: inset 0 0 10px rgb(223 223 223); } #main .container section .advantage ul { width: 33.1rem; justify-content: flex-start; padding-bottom: 0.5rem; } #main .container section .advantage li { width: 7.8rem; background-color: #f0f0f0; border-radius: 6px; padding-bottom: .5rem; display: inline-block; } #main .container section .advantage li.mar { margin-right: .4rem; } #main .container section .advantage li h3 { text-align: center; font-size: .65rem; margin-top: 0.7rem; margin-bottom: 0.2rem; } #main .container section .advantage li p { font-size: .6rem; padding: 0 0.8rem; box-sizing: border-box; line-height: 0.9rem; } #main .container section .advantage li p span { opacity: 0; } #main .container section .fee { margin-top: .8rem; padding: 0 .4rem; box-sizing: border-box; } #main .container section .fee .table { font-size: .6rem; border-top: solid 1px #f0f0f0; margin-bottom: .7rem; } #main .container section .fee .table .t_title { background-color: #722500; color: #ffffff; font-weight: 700; text-align: center; width: 2.6rem; padding: .4rem; } #main .container .other section .fee .table .t_title{ width: 3rem; } #main .container section .fee .table td { padding: .6rem; color: #666666; border-bottom: solid 1px #f0f0f0; border-right: solid 1px #f0f0f0; } #main .container section .fee .table td span{ color: #ea4222; } #main .container .netherlands section .fee .table td span { color: #c3bdbd; } #main .container section .fee .table .t_b { font-weight: 700; color: #000000; width: 2rem; padding: .4rem 0rem; text-align: center; } #main .container .netherlands section .fee .table .t_b { border-left: solid 1px #f0f0f0; } #main .container .section2 { margin-top: .5rem; padding: 0 .4rem .7rem; padding-top: 0.9rem; } #main .container .section2 .strategy_box { padding: 0; margin-bottom: 0.8rem; } #main .container .section2 .strategy_box .strategy_box_ch { margin-bottom: 0.5rem; } #main .container .section2 .strategy_box .li { width: 5.8rem; height: 1.9rem; background: url(/uploads/image/zofimg/li_bg.png) no-repeat; background-size: 100%; margin-left: -.6rem; font-size: .65rem; color: #ffffff; font-weight: 700; padding-top: .3rem; padding-left: 0.2rem; box-sizing: border-box; } #main .container .section2 .strategy_box .li i { font-style: italic; color: #722500; width: .8rem; height: .8rem; background-color: #ffa200; display: inline-block; border-radius: .8rem; padding-left: 0.12rem; line-height: .8rem; box-sizing: border-box; margin-right: .3rem; } #main .container .section2 .strategy_one .str_con { padding-bottom: 0.9rem; } #main .container .section2 .strategy_one .swiper-pagination { bottom: 0; } #main .container .section2 .strategy_one .swiper-pagination-bullet { background-color: #f8cf4e; opacity: 1; width: 9px; height: 9px; } #main .container .section2 .strategy_one .swiper-pagination-bullet-active { background-color: #ea4222; } #main .container .section2 .strategy_one .top { background-color: #ea4222; flex-direction: column; justify-content: center; padding: .7rem 0; color: #ffffff; font-weight: 700; border-top-left-radius: 6px; border-top-right-radius: 6px; height: 3.2rem; } #main .container .section2 .strategy_one .btm { font-size: .6rem; padding: .3rem .5rem; border: solid 2px #e5e5e5; border-top: none; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; height: 11.2rem; } #main .container .netherlands .section2 .strategy_one .btm { height: 4.2rem; } #main .container .section2 .strategy_one .btm>.dis { flex-direction: column; justify-content: space-around; height: 100%; } #main .container .section2 .strategy_one .btm li { width: 100%; align-items: flex-start; margin-bottom: .2rem; } #main .container .section2 .strategy_one .btm em { font-style: normal; font-weight: 700; text-align: right; width: 27%; } #main .container .section2 .strategy_one .btm span { width: 68%; color: #666666; } #main .container .section2 .strategy_text div { width: 100%; background-color: #ffffff; border-radius: 6px; border: solid 1px #e5e5e5; text-align: center; font-size: .6rem; padding: 0.7rem 0; margin-top: .3rem; } #main .container .section2 .strategy_text table { width: 100%; font-size: .6rem; text-align: center; border-collapse: collapse; border-spacing: 0; margin-top: .4rem; } #main .container .section2 .strategy_text table th { background-color: #722500; color: #ffffff; line-height: 1.7rem; } #main .container .section2 .strategy_text table th:nth-child(3) { width: 20%; } #main .container .section2 .strategy_text table th:nth-child(2) { width: 55%; } #main .container .section2 .strategy_text table td { border-bottom: solid 1px #f0f0f0; border-right: solid 1px #f0f0f0; line-height: 1rem; height: 1.7rem; padding: .3rem .2rem; } #main .container .section2 .strategy_text table td:nth-child(1){ border-left: solid 1px #f0f0f0; } #main .container .section2 .strategy_text div.t_left { text-align: left; padding: .6rem 0.7rem; } #main .container .mid_form { background: #ffa200; padding-top: 3.6rem; margin-top: -2.7rem; padding-bottom: .6rem; } #main .container .mid_form h2 { font-size: 1rem; color: #722500; text-align: center; margin-bottom: .8rem; } #main .container .mid_form form { width: 88%; margin: 0 auto; flex-wrap: wrap; } #main .container .mid_form form .item { width: 48%; margin-bottom: .3rem; position: relative; } #main .container .mid_form form .item img { position: absolute; top: 50%; right: .4rem; width: .5rem; transform: translatey(-50%); } #main .container .mid_form form .item.yzm { width: 100%; } #main .container .mid_form form input, #main .container .mid_form form select { width: 100%; background-color: #ffffff; height: 1.7rem; line-height: 1.7rem; padding-left: .4rem; box-sizing: border-box; } #main .container .mid_form form input::placeholder { color: #b2b2b2; } #main .container .mid_form form .item.yzm input { width: 62%; } #main .container .mid_form form .item.yzm span { background-color: #722500; height: 1.7rem; line-height: 1.7rem; text-align: center; color: #ffffff; font-size: .6rem; width: 38%; } #main .container .mid_form form .form_btn { width: 6rem; height: 1.5rem; line-height: 1.5rem; box-shadow: 3px 4px 25px 0px rgba(196, 124, 0, 0.3); border-radius: 27px; background-color: #ea4222; text-align: center; color: #ffffff; margin: 0.3rem auto 0; } #main .teacher_box{ margin-top: 1.2rem; } #main .teacher_box h2{ font-size: 1rem; line-height: 1rem; color: #722500; text-align: center; margin-bottom: 0.9rem; } #main .teacher_box .teacher_detail{ display: none; } #main .teacher_box .teacher_detail.active{ display: block; } #main .teacher_box .teacher_detail>div{ width: 95%; margin: 0 auto; background-color: #ffffff; box-shadow: 4px 6px 13px 0px rgba(179, 194, 210, 0.31); border-radius: 8px; border-bottom: 5px solid #ffa200; color: #666666; font-size: 0.55rem; justify-content: flex-start; padding: .5rem 0 0; padding-right: .4rem; box-sizing: border-box; align-items: flex-start; height: 7.7rem; overflow: hidden; } #main .teacher_box .teacher_detail .left{ width: 39%; margin-right: .3rem; } #main .teacher_box .teacher_detail .left img{ width: 100%; } #main .teacher_box .teacher_detail .right{ width: 58%; padding-top: 0.5rem; box-sizing: border-box; } #main .teacher_box .teacher_detail li{ margin-bottom: .4rem; line-height: .88rem; } #main .teacher_box .teacher_detail li:nth-child(1){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #main .teacher_box .teacher_detail li:nth-child(2){ text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; overflow:hidden; -webkit-box-orient: vertical; } #main .teacher_box .teacher_detail li.mar_b{ margin-bottom: 0; } #main .teacher_box .teacher_detail li em{ font-style: normal; } #main .teacher_box .teacher_detail li b{ font-weight: 700; color: #000000; margin-right: .1rem; display: inline-block; } #main .teacher_box .teacher_detail li b.name{ margin-right: .6rem; } #main .teacher_box .teacher_detail li a{ color: #ea4222; } #main .teacher_box .teacher_list { width: 95%; overflow-x: scroll; margin: .7rem auto; } #main .teacher_box .teacher_list ul{ justify-content: flex-start; align-items: flex-end; } #main .teacher_box .teacher_list li{ width: 2.6rem; margin-right: .6rem; } #main .teacher_box .teacher_list .img{ width: 2.6rem; height: 2.6rem; border: solid 3px #ffa200; overflow: hidden; border-radius: 3rem; background-color: #ffffff; padding-top: .2rem; box-sizing: border-box; } #main .teacher_box .teacher_list li img{ transform: scale(1.1); } #main .teacher_box .teacher_list li.active { width: 3rem; } #main .teacher_box .teacher_list li.active .img{ width: 3rem; height: 3rem; } #main .teacher_box .teacher_list li p{ text-align: center; font-size: .6rem; color: #722500; font-weight: 700; margin-top: .2rem; } /* layout */ #main .layout{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background:rgba(0, 0, 0, .5); z-index: 20; display: none; } #main .layout .layout_box{ width: 75%; height: 17.6rem; position: fixed; top: 47%; left: 50%; transform: translate3d(-50%,-50%,0); background: url(/uploads/image/zofimg/layout.png) no-repeat; background-size: 100%; text-align: center; padding-top: 2.2rem; } #main .layout .layout_box .title{ margin-bottom: 1.1rem; } #main .layout .layout_box h2{ color: #ffffff; font-size: .8rem; letter-spacing: 4px; text-shadow: 0px 5px 15px rgba(118, 75, 0, 0.35); } #main .layout .layout_box h3{ color: #ffffff; text-shadow: 0px 5px 15px rgba(118, 75, 0, 0.35); font-size: .7rem; margin-top: .3rem; } #main .layout .layout_box .form2{ width: 90%; flex-wrap: wrap; margin: 0 auto; } #main .layout .layout_box .item{ width: 100%; position: relative; margin-bottom: .3rem; } #main .layout .layout_box .item.cannot{ width: 49%; } #main .layout .layout_box .item img{ position: absolute; top: 50%; transform: translatey(-50%); right: .4rem; width: .5rem; } #main .layout .layout_box .item.yzm input{ width: 60%; } #main .layout .layout_box .item.yzm span{ width: 40%; text-align: center; font-size: .6rem; background-color: #fe3841; color: #ffffff; height: 1.5rem; line-height: 1.5rem; cursor: pointer; } #main .layout .layout_box input,#main .layout .layout_box select{ width: 100%; padding-left: .3rem; border: solid 1px #d9d9d9; background-color: #ffffff; height: 1.5rem; line-height: 1.5rem; color: #b3b3b3; } #main .layout .layout_box input::placeholder{ color: #b3b3b3; } #main .layout .layout_box .submit{ width: 6rem; margin: 0.4rem auto 0; height: 1.6rem; line-height: 1.6rem; background-image: linear-gradient(0deg, #ffcc00 0%, #fff000 100%); box-shadow: 0px 5px 9px 1px rgba(195, 195, 195, 0.36); border-radius: 1rem; font-weight: 700; cursor: pointer; } #main .layout .layout_box .close{ width: 1.5rem; height: 1.5rem; position: absolute; top: 0; right: 0; cursor: pointer; } #main input:-webkit-autofill { color: #b2b2b2; -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; }