@font-face { font-family: "puhuiti-2-55"; src: url("../fonts/Roboto-Light-webfont.woff") format("woff"); } @font-face { font-family: "puhuiti-2-65"; src: url("../fonts/Roboto-Medium-webfont.woff") format("woff"); } @font-face { font-family: "puhuiti-2-85"; src: url("../fonts/Roboto-Bold-webfont.woff") format("woff"); } @font-face { font-family: "puhuiti-2-115"; src: url("../fonts/Roboto-Black-webfont.woff") format("woff"); }header #pc-header > div @media screen and (min-width: 1920px) and (max-width: 2560px) { html { font-size: 27px; } } @media screen and (min-width: 1440px) and (max-width: 1920px) { html { font-size: 20px; } } @media screen and (min-width: 1366px) and (max-width:1600px) { header #pc-header > .main-center { padding: 0 2.5rem 0 2.5rem!important; } } @media screen and (min-width: 1366px) and (max-width: 1440px) { html { font-size: 18px; } header #pc-header > .main-center { padding: 0 2.5rem 0 2.5rem!important; } } @media screen and (min-width: 1200px) and (max-width: 1366px) { html { font-size: 16px; } header #pc-header > .main-center { padding: 0 2.5rem 0 2.5rem!important; } } @media screen and (min-width: 768px) and (max-width: 1200px) { html { font-size: 16px; } header #pc-header > .main-center { padding: 0 2.5rem 0 2.5rem!important; } } @font-face { font-family: "robotobold"; src: url('/static/plugins/font/Roboto-Bold.ttf'); } @font-face { font-family: "robotoLight"; src: url('/static/plugins/font/Roboto-Light.ttf'); } @font-face { font-family: "robotoMedium"; src: url('/static/plugins/font/Roboto-Medium.ttf'); } @font-face { font-family: "robotoRegular"; src: url('/static/plugins/font/Roboto-Regular-14.ttf'); } body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select, input, button, input::placeholder { margin: 0; padding: 0; border: 0; font: inherit; font-size: 0.9rem; vertical-align: baseline; outline: none; box-sizing: border-box; font-family: "robotoMedium"; word-break: break-word; } body{ font-family:'robotoMedium'!important; } .f-light { font-family: "robotoLight"!important; } .f-regular { font-family: "robotoRegular"!important; } .f-medium { font-family: "robotoMedium"!important; } .f-bold { font-family: "robotobold"!important; } .f-black { font-family: "robotobold"!important; } .border, .border tr th, .border tr td { border: 1px solid #343434; vertical-align: middle; text-align: center; box-sizing: border-box; } .border { width: 100%; text-align: center; border-collapse: collapse; } .border tr th, .border tr td { border: 1px solid #343434; vertical-align: middle; text-align: center; box-sizing: border-box; } .border th { font-weight: bold; font-size: 1.1em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } a, ol, ul, li { list-style: none; text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { box-sizing: border-box; margin: 0; font-family: "robotobold"; } strong { font-weight: bold; } h1 { font-family: "robotobold"; line-height: 1.2 !important; } h2 { font-size: 2rem; font-family: "robotobold"; } h3 { font-size: 2rem; } h4 { font-size: 1.3rem; } h5 { font-size: 1.3rem; } h6 { font-size: 1.3rem; margin-bottom: 0.5rem; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } textarea { -webkit-appearance: none; font-family: "robotoMedium"; } textarea::placeholder { font-family: "robotoMedium"; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } input[type="submit"] { cursor: pointer; } input, select { outline: none; border: none; background-color: transparent; } button { background-color: transparent; border: none; cursor: pointer; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background-color: rgba(59, 82, 246, 0.1); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #00db6d; } .dot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setBetween { display: flex; justify-content: space-between; } .setRowCenter { display: flex; align-items: center; } .setColumnCenter { display: flex; align-items: center; } .setCenter { display: flex; flex-direction: column; align-items: center; justify-content: center; } body { overflow-x: hidden; min-width: 300px; } .text-error{ position: relative!important; border: 1px solid #ff204f; } .img img { display: block; } .boxShadow { box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1); } #mb-header #navbar-main { position: fixed; top: 0; left: 0; width: 100%; height: 3.5rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1); background-color: #fff; z-index: 99; padding: 0 2.5%; box-sizing: border-box; } #mb-header #navbar-main #search-ico .iconf { color: #00db6d; font-size: 1.5rem; } #mb-header #navbar-main #logo { width: 30%; } #mb-header #navbar-main #logo img { width: 100%; } #mb-header #navbar-main #search-container { position: absolute; top: 100%; left: 0; width: 100%; max-height: calc(100vh - 3.5rem); overflow-y: auto; background-color: #fff; box-shadow: 0 0 0.5rem #ebebeb; padding: 1rem 2%; display: none; } #mb-header #navbar-main #search-container > input { width: 100%; height: 2.5rem; border: 1px solid #ebebeb; padding: 0 2%; border-radius: 0.2rem; } #mb-header #navbar-main #search-container .hint-search-content { position: initial; top: 100%; left: 0; width: 100%; margin-top: 0.5rem; } #mb-header #navbar-main #search-container .hint-search-content .item { display: block; } #mb-header #navbar-main #sidebar-main-trigger img { width: 100%; } #mb-header #sidebar-main { background-color: #fff; width: 70% !important; transition: none; overflow-y: auto; } #mb-header #sidebar-main .member { display: flex; justify-content: space-around; } #mb-header #sidebar-main .member a { padding: 0.5rem 1rem; color: #fff; width: 50%; } #mb-header #sidebar-main .member a.c1 { background-color: #00db6d; } #mb-header #sidebar-main .member a.c2 { background-color: #ff204f; } #mb-header #sidebar-main li:last-of-type a { border-bottom: none; } #mb-header #sidebar-main a { display: block; text-align: center; border-bottom: 1px solid #ebebeb; padding: 0.5rem 0; } #mb-header #sidebar-main-trigger { width: 26px; height: 20px; border-top: 2px solid #00db6d; border-bottom: 2px solid #00db6d; background-color: #00db6d; padding: 7px 0; background-clip: content-box; cursor: pointer; } #mb-header #sidebar-main #accordion > li { position: relative; } #mb-header #sidebar-main #accordion > li a { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ebebeb; } #mb-header #sidebar-main #accordion > li .iconf { color: #00db6d; } #mb-header #sidebar-main #accordion > li > a { padding-left: 0.9rem; padding-right: 0.5rem; } #mb-header #sidebar-main #accordion > li .submenu { transition: none; } #mb-header #sidebar-main #accordion > li .submenu a { padding-left: 2rem; text-align: left; background-color: #1a191c; padding-right: 0.5rem; } div[data-sidebar-main="mask"] { z-index: 1 !important; } .pagination { display: flex; justify-content: center; margin-top: 4rem; } .pagination .page-link, .pagination .page-num { padding: 0.3rem 0.5rem; border: 1px solid #00db6d; margin: 0 0.2rem; border-radius: 0.0.9rem; } .pagination .page-link, .pagination .page-num, .pagination .page-link *, .pagination .page-num * { font-size: 0.9rem; } .pagination .page-link:hover, .pagination .page-num:hover, .page-num-current { background-color: #00db6d; } .pagination .page-link:hover, .pagination .page-num:hover, .pagination .page-link:hover *, .pagination .page-num:hover *, .page-num-current { color: #fff; } .article-content > div { display: flex; justify-content: space-between; align-items: flex-start; } .article-content .article-left { flex: 1; background-color: #fff; padding: 0.9rem; box-shadow: 0 0 0.2rem #ebebeb; border-radius: 0.2rem; } .article-content .article-left .tit-top h1 { font-size: 1.3rem; margin-bottom: 0.9rem; font-weight: bold; line-height: 1.4; } .article-content .article-left .tit-top p { font-size: 0.9rem; color: #999; } .article-content .article-left .article-show { padding: 2rem 0; margin: 0.9rem 0; border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; } .article-content .article-left .article-navi p { padding: 0.5rem 0; } .article-content .article-left .article-navi p, .article-content .article-left .article-navi p a { color: #999; } .article-content .article-left .article-navi p a:hover { color: #00db6d; } .article-content .article-right { width: 18rem; margin-left: 2%; } .article-content .article-right .article-rec { padding: 0.9rem; background-color: #fff; margin-bottom: 0.9rem; box-shadow: 0 0 0.2rem #ebebeb; border-radius: 0.2rem; } .article-content .article-right .article-rec h4 { font-size: 0.9rem; font-weight: bold; } .article-content .article-right .article-rec .rec-con { margin-top: 0.9rem; } .article-content .article-right .article-rec .rec-con > a { display: flex; justify-content: space-between; margin-bottom: 0.9rem; } .article-content .article-right .article-rec .rec-con > a:last-of-type { margin-bottom: 0; } .article-content .article-right .article-rec .rec-con .img { width: 34%; min-height: 4rem; background-color: #f5f5f5; position: relative; } .article-content .article-right .article-rec .rec-con .img img { width: 100%; height: 100%; object-fit: cover; } .article-content .article-right .article-rec .rec-con .img p { position: absolute; top: 0; left: 0; padding: 0.3rem; font-size: 0.6rem; background-color: #00db6d; color: #fff; } .article-content .article-right .article-rec .rec-con .txt { flex: 1; margin-left: 4%; min-width: 0; } .article-content .article-right .article-rec .rec-con .txt h6 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .article-content .article-right .article-rec .rec-con .txt p { margin-top: 0.9rem; font-size: 0.9rem; color: #999; } .iconf { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } .main-center { max-width: 60rem; margin: 0 auto; } .main-center-big { max-width: 80rem; margin: 0 auto; padding: 2.4rem 0; background-color: #fff; } .swiper-button { width: 2rem; height: 2rem; border: 1px solid #00db6d; border-radius: 50%; } .swiper-button svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .swiper-button svg circle { stroke: #fff; stroke-width: 2px; fill: transparent; } .swiper-button svg circle { animation: cir linear 3s infinite; } @keyframes cir { 0% { stroke-dasharray: 0 260; } 100% { stroke-dasharray: 260 260; } } .swiper-button:hover { background-color: #00db6d; } .swiper-button:hover::after { color: #fff; } .swiper-button:hover svg { opacity: 1; } .swiper-button::after { font-size: 0.9rem; color: #00db6d; } .swiper-button.swiper-button-prev { left: 0; } .swiper-button.swiper-button-next { right: 0; } .mb0:last-of-type { margin-bottom: 0; } .swiper-wrapper, .swiper-slide { height: auto; } .swiper-pagination .swiper-pagination-bullet { width: 0.5rem; height: 0.2rem; border-radius: 2rem; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 0.9rem; background-color: #00db6d; } .swiper-container-horizontal > .swiper-pagination-progressbar { bottom: 0; top: auto; left: 50%; width: 50rem; height: 1px; transform: translateX(-50%); background-color: rgba(255, 255, 255, 0.2); } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #00db6d; } .img-radius .img { border-radius: 0.5rem; overflow: hidden; background-color: #ccc; } .img-radius .img img { width: 100%; height: 100%; object-fit: cover; } .more-btn { text-align: center; margin-top: 2rem; display: block; } .more-btn.lf { text-align: left; } .more-btn > a, .more-btn > span, .more-btn button { display: inline-block; padding: 0.6rem 2rem; font-size: 0.9rem; border-radius: 2rem; border: 1px solid #00db6d; color: #00db6d; transition: all ease 0.3s; line-height: 1 !important; } .more-btn > a .iconf, .more-btn > span .iconf, .more-btn button .iconf { font-size: 0.9rem; margin-right: 0.2rem; } .more-btn > a span, .more-btn > span span, .more-btn button span { color: #666; margin-right: 1.3rem; } .more-btn > a span:last-of-type, .more-btn > span span:last-of-type, .more-btn button span:last-of-type { margin-right: 0; } .more-btn > a.active, .more-btn > span.active, .more-btn button.active, .more-btn > a:hover, .more-btn > span:hover, .more-btn button:hover { color: #fff; background-color: #00db6d; } .more-btn1 { text-align: center; } .more-btn1 a { color: #00db6d; border-bottom: 1px solid #00db6d; text-transform: capitalize; } .c1 { color: #00db6d; } .c2 { color: #ff204f; } p { line-height: 2; } .a-hover:hover { color: #00db6d; transform: translateX(0.2rem); } .main-title { margin-bottom: 4rem; } .main-title h2 { margin-bottom: 0.9rem; } .main-title p { line-height: 2; color: #666; max-width: 60rem; margin: 0 auto; } .word-break { word-break: break-word; text-align: left; } .par { min-width: 50%; padding: 0.3rem 0; } .par.w100 { width: 100%; display: flex; } .par.w100 strong { display: inline; flex-shrink: 0; } .par.w100 span { word-break: break-word; text-align: left; } .par * { font-size: 0.9rem; } .par i { color: #00db6d; margin-right: 0.2rem; } .par strong { font-weight: bold; display: block; } .par span { color: #999; } .position { margin-bottom: 3rem; } .position *, .position { font-size: 0.9rem; color: #999; } .i-start { display: flex; align-items: center; } .i-start .i { display: flex; align-items: center; } .i-start .i i, .i-start .i .iconf { color: #f7d408; margin: 0 0.2rem; } .i-start span { color: #f7d408; margin-left: 0.9rem; } .ui.selection.dropdown .menu > .item { font-size: 0.9rem; } .pagination { display: flex; justify-content: center; margin: 2rem 0; } .pagination li { width: 50px; height: 50px; border: 1px solid #ebebeb; } .pagination li a, .pagination li span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #999; } .pagination li.active { background-color: #00db6d; } .pagination li.active a, .pagination li.active span { color: #fff; } .fb { font-family: "robotoMedium"; } .comment-container { padding-top: 0; } .comment-container .comment { display: flex; justify-content: space-between; align-items: flex-start; } .comment-container .comment .comment-right { width: 20rem; box-shadow: 0rem 0.15rem 0.9rem 0rem rgba(32, 30, 29, 0.35); padding: 0.9rem; } .comment-container .comment .form h6 { margin-bottom: 2rem; } .comment-container .comment .form > div { margin-bottom: 0.9rem; } .comment-container .comment .form label { display: block; margin-bottom: 0.5rem; } .comment-container .comment .form input { width: 100%; border: 1px solid #ebebeb; padding: 0.5rem; } .comment-container .comment .form textarea { width: 100%; height: 5rem; resize: none; border: 1px solid #ebebeb; padding: 0.5rem; outline: none; } .comment-container .comment .form .code-img { display: flex; margin-top: 0.9rem; } .comment-container .comment .form .code-img input { border: 1px solid #ebebeb; height: 2.4rem; padding: 0.5rem; box-sizing: border-box; margin-right: 2rem; } .comment-container .comment .form .code-img img { width: 6rem; height: 2.4rem; } .comment-container .comment .form input[type="submit"] { display: block; width: auto; padding: 0.3rem 0.9rem; border-radius: 2rem; font-size: 0.9rem; color: #fff; background-color: #00db6d; margin: 0.9rem auto 0; cursor: pointer; } .comment-container .comment .comment-list { background-color: transparent; padding: 0.9rem; flex: 1; margin-right: 3rem; box-shadow: 0rem 0.15rem 0.9rem 0rem rgba(32, 30, 29, 0.35); } .comment-container .comment .comment-list > h5 { font-size: 1.3rem; font-weight: 500; margin-bottom: 0.9rem; } .comment-container .comment .comment-list .item { background-color: #fff; display: flex; padding: 0.9rem 0; border-bottom: 1px solid #ebebeb; } .comment-container .comment .comment-list .item:last-of-type { border-bottom: none; } .comment-container .comment .comment-list .i { width: 4rem; height: 4rem; border-radius: 50%; margin-right: 0.5rem; background-color: #ccc; overflow: hidden; flex-shrink: 0; margin-right: 0.9rem; } .comment-container .comment .comment-list .i img { width: 100%; height: 100%; object-fit: cover; } .comment-container .comment .comment-list h6 { font-size: 0.9rem; font-weight: 500; } .comment-container .comment .comment-list .des { line-height: 1.8; padding: 0.5rem 0; } .comment-container .comment .comment-list .des, .comment-container .comment .comment-list .des * { font-size: 0.9rem; color: #666; } .comment-container .comment .comment-list .time { display: flex; align-items: center; } .comment-container .comment .comment-list .time span, .comment-container .comment .comment-list .time span * { color: #999; font-size: 0.9rem; } .comment-container .comment .comment-list .time span:nth-of-type(2) { margin-left: auto; margin-right: 0.9rem; } .close-iconf { cursor: pointer; } .list-banner { background-size: cover; background-repeat: no-repeat; } .list-banner .container { position: relative; padding: 2rem 0; } .list-banner .con1 { display: flex; justify-content: space-between; align-items: center; } .list-banner .con1 .left h2 { font-size: 2.4rem; margin-bottom: 0.9rem; font-family: "robotoMedium"; } .list-banner .con1 .left h3 { font-size: 2rem; color: #999; } .list-banner .con1 .left .des, .list-banner .con1 .left .des * { line-height: 2; } .list-banner .con1 .left .tags { margin-top: 0.9rem; max-width: 30rem; } .list-banner .con1 .left .tags .list { display: flex; flex-wrap: wrap; } .list-banner .con1 .left .tags .list a { margin-right: 0.9rem; margin-bottom: 0.5rem; } .list-banner .con1 .left .tags .list a:hover { color: #00db6d; } .list-banner .con1 .img { max-width: 50%; } .list-banner .m4 { margin: 4rem 0; } .list-banner .search-con { width:80%; background-color: #dae8f1; padding: 3rem 4rem; border-radius: 0.4rem; box-shadow: 0 0.5rem 0.5rem #ebebeb; margin: 0 auto 30px; } .list-banner .search-con h5 { font-size: 1.3rem; font-weight: 500; margin-bottom: 0.9rem; } .list-banner .search-con .inp { flex: 1; display: flex; align-items: center; padding: 0 2%; height: 3rem; background-color: #fff; border-radius: 0.2rem; border: 1px solid #00db6d; position: relative; } .list-banner .search-con .inp i { color: #999; } .list-banner .search-con .inp input { width: 100%; height: 100%; } .list-banner .search-con .inp > span { position: absolute; top: calc(100% + 0.5rem); right: 0; font-size: 0.9rem; color: #666; } .list-banner .search-con .hot-s { margin-top: 0.5rem; } .list-banner .search-con .hot-s * { font-size: 0.9rem; color: #999; } .list-banner .search-con .hot-s a { margin-right: 0.9rem; } .list-banner .search-con .hot-s a:hover { color: #00db6d; transform: translateX(0.2rem); } .list-banner .search-con1 { border-radius: 0.4rem; margin: 0 auto; margin-bottom: 3rem; } .list-banner .search-con1 h5 { font-size: 1.3rem; font-weight: 500; margin-bottom: 0.9rem; } .list-banner .search-con1 .inp { flex: 1; display: flex; align-items: center; padding-left: 2%; height: 3rem; border-radius: 0.2rem; background-color: #fff; border-radius: 0.5rem; border: 1px solid #00db6d; position: relative; } .list-banner .search-con1 .inp .submit-btn { display: flex; align-items: center; justify-content: center; width: 7rem; height: 100%; background-image: linear-gradient(256deg, #00cdff 0%, #1b97ff 36%, #3660ff 100%), linear-gradient(#0536f9, #0536f9); border-radius: 0.5rem 0.5rem 0.5rem 0.5rem; } .list-banner .search-con1 .inp i { color: #fff; font-size: 1.3rem; } .list-banner .search-con1 .inp input { width: 100%; height: 100%; } .list-banner .search-con1 .inp > span { position: absolute; top: calc(100% + 0.5rem); right: 0; font-size: 0.9rem; color: #666; } .list-banner .search-con1 .hot-s { margin-top: 0.5rem; } .list-banner .search-con1 .hot-s * { font-size: 0.9rem; color: #999; } .list-banner .search-con1 .hot-s a { margin-right: 0.9rem; } .list-banner .search-con1 .hot-s a:hover { color: #00db6d; transform: translateX(0.2rem); } .list-banner .con2 { padding-top: 3rem; border-top: 1px solid #ebebeb; } .list-banner .con2 .ui.form .field > label { font-size: 0.9rem; font-weight: bold; margin-bottom: 0.9rem; } .list-banner .con2 .filter-container { display: flex; justify-content: space-between; margin-bottom: 0.9rem; } .list-banner .con2 .filter-container > div { flex: 1; margin-right: 0.5rem; } .list-banner .con2 .filter-container > div:last-of-type { margin-right: 0; } .list-banner .con2 .filter-container > div p { color: #00db6d; margin-bottom: 0.5rem; } .list-banner .con2 .filter-container > div select { width: 100%; height: 2.4rem; background-color: #fff; border-radius: 0.2rem; border: 1px solid #00db6d; padding: 0 2%; } .list-banner .con2 .filter-container > div select, .list-banner .con2 .filter-container > div select * { cursor: pointer; } .list-banner .con2 .ul_filter { display: flex; } .list-banner .con2 .ul_filter span { padding: 0.4rem 0.6rem; border-radius: 0.2rem; background-color: rgba(59, 82, 246, 0.4); } .list-banner .con2 .ul_filter span, .list-banner .con2 .ul_filter span * { color: #fff; font-size: 0.9rem; } .list-banner .con2 .ul_filter span a { margin-left: 0.5rem; } .list-banner .con2 .sort-container { display: flex; justify-content: space-between; } .list-banner .con2 .sort-container .selected { display: flex; align-items: center; } .list-banner .con2 .sort-container .selected * { font-size: 0.9rem; } .list-banner .con2 .sort-container .selected b { background-color: #fff; padding: 0.3rem 0.3rem; margin-right: 0.5rem; border-radius: 0.2rem; color: #999; } .list-banner .con2 .sort-container .selected b i { margin-left: 0.2rem; cursor: pointer; } .list-banner .con2 .sort-container .selected .clear { color: #00db6d; cursor: pointer; } .list-banner .con2 .sort-container .sort { display: flex; align-items: center; } .list-banner .con2 .sort-container .sort span { color: #999; margin-right: 0.5rem; } .list-banner .con2 .sort-container .sort select { width: 6rem; height: 2.4rem; background-color: #fff; border-radius: 0.2rem; border: 1px solid #00db6d; padding: 0 2%; cursor: pointer; } .rec-container { padding-top: 0; } .rec-container > .main-center.container { display: block; background-color: #fff; padding: 0.9rem; border-radius: 0.5rem; } .rec-container > .main-center.container > h2 { font-size: 2rem; margin-bottom: 0.9rem; } .rec-container .content { display: flex; flex-wrap: wrap; } .rec-container .content .item { width: calc((100% - (4 - 1) * 0.9rem) / 4); margin-right: 0.9rem; margin-bottom: 0; } .rec-container .content .item:nth-of-type(4n) { margin-right: 0; } .rec-container .content .item { box-shadow: 0rem 0.0.9rem 0.3rem 0rem rgba(213, 213, 213, 0.4); border-radius: 0.2rem; overflow: hidden; } .rec-container .content .item .img { height: 10.5rem; background-color: #ccc; margin-bottom: 0.5rem; } .rec-container .content .item .text { padding: 0 0.5rem; } .rec-container .content .item .text h6 { font-weight: bold; font-size: 0.9rem; } .rec-container .content .item .text p { font-size: 0.9rem; color: #999; line-height: 2; } .main-QA { padding-top: 0; } .main-QA .container { padding: 0.9rem 0; max-width: 60rem !important; } .main-QA .t { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .main-QA .t h2 { font-size:2rem; font-family: "robotoMedium"; } .main-QA .t .more-btn { margin-top: 0; } .main-QA .content .accordion li { cursor: pointer; margin-bottom: 0.9rem; border: 1px solid #ebebeb; } .main-QA .content .accordion li:last-of-type { margin-bottom: 0; } .main-QA .content .accordion li .link { padding: 0.9rem; } .main-QA .content .accordion li.open .submenu { display: block; } .main-QA .content .accordion li.open h5 span { font-size: 1.3rem; /*color: #00db6d;*/ } .main-QA .content .accordion li.open h5 i::after { transform: rotate(0); } .main-QA .content .accordion li .submenu { display: none; padding: 0.9rem 2rem; transition: none !important; } .main-QA .content .accordion li h5 { font-size: 1.3rem; font-weight: 500; display: flex; align-items: center; justify-content: space-between; } .main-QA .content .accordion li h5 span { font-size: 1.3rem; font: inherit; } .main-QA .content .accordion li h5 strong { font: inherit; font-weight: bold; color: inherit; } .main-QA .content .accordion li h5 i { display: block; width: 0.9rem; border-bottom: 2px solid #00db6d; position: relative; } .main-QA .content .accordion li h5 i::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; border-bottom: 2px solid #00db6d; transform: rotate(-90deg); transition: all ease 0.3s; } .main-QA .content .accordion li h6 { font-size: 0.9rem; color: #00db6d; margin-top: 0.9rem; margin-bottom: 0.5rem; font-weight: 500; } .main-QA .content .accordion li p { line-height: 1.8; font-family: 'robotoLight'!important; color: #000; font-size: 0.9rem; } .main-FAQ .t { display: flex; justify-content: space-between; align-items: center; } .main-FAQ .t .more-btn { margin-top: 0; } .main-contact-us { background-color: #fbfcfd; padding: 1.3rem 0; } .main-contact-us .container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .main-contact-us .container h4 { font-size: 1.3rem; color: #00db6d; margin-bottom: 1.3rem; } .main-other-qa { padding: 3rem 0; display: flex; justify-content: center; align-items: center; } .main-other-qa .container { max-width: 36rem; padding: 1.3rem 0.9rem; border-radius: 0.9rem; box-shadow: 0 0 0.5rem rgba(59, 82, 246, 0.4); } .main-other-qa .container > h6 { color: #00db6d; } .main-other-qa .container .left > p { font-size: 0.9rem; } .main-other-qa .container .right p { color: #999; font-size: 0.9rem; } .main-other-qa .container a { display: inline-block; } .main-other-qa .container a strong { font: inherit; font-weight: bold; } .main-other-qa .container .content { display: flex; justify-content: space-between; } .main-other-qa .container .content .left { position: relative; padding-right: 2rem; } .main-other-qa .container .content .left::after { content: ""; position: absolute; top: 50%; right: 0; height: 80%; border-left: 1px solid #ebebeb; transform: translateY(-50%); } .main-other-qa .container .content .left .zx-btn { text-align: center; padding: 0.9rem 0; } .main-other-qa .container .content .left .zx-btn a { position: relative; font-weight: bold; padding-bottom: 0.3rem; background-color: #00db6d; padding: 0.6rem; color: #fff; border-radius: 0.2rem; line-height: 1; } .main-other-qa .container .content .left .zx-btn a::after { display: none; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 1px solid #fff; } .main-other-qa .container .content .left .zx-btn a span { font-size: 0.9rem; font-weight: normal; } .main-other-qa .container .content .right { padding-left: 2rem; flex: 1; } .main-other-qa .container .content .right > div { margin-bottom: 0.5rem; } .main-other-qa .container .content .right > div:last-of-type { margin-bottom: 0; } .container-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; display: none; z-index: 20; } .container-mask.show { display: flex; } .container-mask .close-iconf { z-index: 1999; position: absolute; top: 0.9rem; right: 0.9rem; font-size: 0.9rem; width: 0.9rem; height: 0.9rem; } .container-mask .close-iconf::before, .container-mask .close-iconf::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.9rem; border-bottom: 2px solid #000; border-radius: 2px; } .container-mask .close-iconf::before { transform: translate(-50%, -50%) rotate(-45deg); } .container-mask .close-iconf::after { transform: translate(-50%, -50%) rotate(45deg); } .container-mask h5 { font-size: 0.9rem !important; color: #00db6d; text-align: center; margin-bottom: 0.9rem; } .container-mask .container { background-color: #fff; padding: 0.9rem; position: relative; } .container-mask .container > .close { position: absolute; top: 0.9rem; right: 0.9rem; cursor: pointer; } .container-mask .price-container { width: 20rem !important; } .container-mask .price-container * { font-size: 0.9rem; } .container-mask .price-container .item { display: flex; align-items: center; } .container-mask .price-container .item strong { color: #00db6d; } .container-mask .price-container .item select { width: 100%; height: 1.3rem; border: 1px solid #ebebeb; } .container-mask .price-container .sb { display: flex; justify-content: space-between; margin-top: 0.5rem; } .container-mask .price-container .sb > div { margin-right: 0.9rem; } .container-mask .price-container .sb > div:last-of-type { margin-right: 0; } .container-mask .price-container p { text-align: center; color: #999; margin-top: 0.9rem; } .container-mask .hint { display: flex; justify-content: space-between; padding: 2rem 0; position: relative; } .container-mask .hint > .iconf { position: absolute; top: 0.9rem; right: 0.9rem; font-size: 0.9rem; } .container-mask .hint .item { width: 19rem; text-align: center; padding: 0 0.9rem; border-right: 1px solid #ebebeb; } .container-mask .hint .item:last-of-type { border-right: none; } .container-mask .hint .item * { text-align: center; } .container-mask .hint .item .i { width: 5rem; height: 5rem; border-radius: 50%; border: 1px solid #00db6d; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; } .container-mask .hint .item .i .iconf { font-size: 1.3rem; color: #00db6d; } .container-mask .hint .item p { font-size: 0.9rem; font-weight: bold; margin: 0.5rem 0; } .container-mask .hint .item span { font-size: 0.9rem; color: #999; } .container-mask .apply { display: flex; flex-wrap: wrap; justify-content: space-between; width: 30rem; } .container-mask .apply input, .container-mask .apply textarea { padding: 0.5rem; margin-bottom: 0.9rem; } .container-mask .apply input { width: 49%; height: 2.4rem; border: 1px solid #ebebeb; } .container-mask .apply textarea { width: 100%; height: 4rem; border: 1px solid #ebebeb; resize: none; } .container-mask .apply button { margin: 0 auto; } .container-mask .des { max-width: 30rem; } .container-mask .des > div, .container-mask .des > div * { font-size: 0.9rem; color: #666; line-height: 1.8; } .container-mask .form-mask { max-width: 40rem; padding:1rem; position: relative; } .container-mask .form-mask > .iconf { position: absolute; top: 0.9rem; right: 0.9rem; font-size: 0.9rem; width: 0.9rem; height: 0.9rem; } .container-mask .form-mask > .iconf::before, .container-mask .form-mask > .iconf::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.9rem; border-bottom: 2px solid #000; border-radius: 2px; } .container-mask .form-mask > .iconf::before { transform: translate(-50%, -50%) rotate(-45deg); } .container-mask .form-mask > .iconf::after { transform: translate(-50%, -50%) rotate(45deg); } .container-mask .form-mask .sub { display: flex; justify-content: center; margin-top: 0.9rem; } .container-mask .form-mask button { background-color: #00db6d !important; } .rec-course .container { display: flex; flex-wrap: wrap; } .rec-course .container .item { width: 14.5rem; margin-right: calc((100% - 14.5rem * 4) / 3); box-shadow: 0 0 0.5rem #ebebeb; margin-bottom: 2rem; border-radius: 0.5rem; } .rec-course .container .item:nth-of-type(4n) { margin-right: 0; } .rec-course .container .item:nth-of-type(n + 9) { display: none; } .rec-course .container .item .img { height: 6.5rem; background-color: #ccc; } .rec-course .container .item .img img { width: 100%; height: 100%; object-fit: cover; } .rec-course .container .item .text { padding: 0.5rem; position: relative; } .rec-course .container .item .text h6 { margin-bottom: 0.5rem; word-break: break-word; text-align: left; font-size: 0.9rem; } .rec-course .container .item .text .par-con { display: flex; flex-wrap: wrap; justify-content: space-between; } .rec-course .container .item .text .par-con .icon { font-weight: bold; font-size: 0.9rem; color: #00db6d; margin-right: 0.2rem; display: none; } .f-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 13rem; height: 3rem; border: 1px solid #00db6d; border-radius: 0.2rem; color: #00db6d; } .f-btn:hover { background-color: #00db6d; color: #fff !important; } .hint-search-content { position: absolute; top: 100%; left: 0; width: 30rem; box-shadow: 0 0 0.3rem #ebebeb; padding: 0.9rem 0; background-color: #fff; display: none; z-index: 3; } .hint-search-content .item { margin-bottom: 2rem; } .hint-search-content .item:last-of-type { margin-bottom: 0; } .hint-search-content .item h4 { font-size: 0.9rem; margin-bottom: 0.5rem; padding: 0 0.9rem; } .hint-search-content .item .link { display: flex; align-items: center; flex-wrap: wrap; padding: 0.5rem 0.9rem; } .hint-search-content .item .link span { margin-right: 0.5rem; } .hint-search-content .item .link em { padding: 0.2rem 0.4rem; background-color: #00db6d; color: #fff; border-radius: 0.0.9rem; font-size: 0.65rem; margin: 0.3rem 0; } .hint-search-content .item .link:hover { background-color: #ebebeb; } header { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; background-color: #fff; box-shadow: 0px 6px 10px 0px rgba(19, 36, 162, 0.1); } header #pc-header > div { display: flex; align-items: center; max-width: 60rem; } header #pc-header > div > ul { display: flex; margin-left: auto; } header #pc-header > div > ul li > a { display: inline-block; height: 3.2rem; margin-left: 0.9rem; font-family: "robotoMedium"; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all ease 0.3s; } header #pc-header > div > ul li.active a, header #pc-header > div > ul li:hover a { color: #00db6d; } header #pc-header > div > ul li:hover .two-menu { max-height: 30rem; } header #pc-header .map { background-color: #ebebeb; max-width: 100%; display: block; } header #pc-header .map > div { display: flex; justify-content: flex-end; max-width: 60rem; } header #pc-header .map > div a { height: 2rem; line-height: 2rem; margin-left: 0.9rem; font-size: 0.7rem; font-family:'robotoLight'!important; } header #pc-header .map > div a:hover { color: #00db6d; } header #pc-header .logo { width: 8rem; } header #pc-header .search-form { display: flex; align-items: center; margin-left: 0.9rem; position: relative; } header #pc-header .search-form select, header #pc-header .search-form .h-btn { height: 2rem; padding: 0 0.3rem; background-color: #00db6d; color: #fff; border-radius: 0.2rem; font-size: 0.9rem; position: relative; } header #pc-header .search-form select .iconf, header #pc-header .search-form .h-btn .iconf { margin-left: 0.3rem; } header #pc-header .search-form > div { display: flex; align-items: center; border: 1px solid #00db6d; border-radius: 0.2rem; padding-left: 0.5rem; margin-left: 0.5rem; height: 2rem; } header #pc-header .search-form > div input { width: 14rem; height: 2rem; } header #pc-header .search-form > div input::placeholder { font-size: 0.9rem; color: #999; } header #pc-header .search-form > div .i { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3rem; height: 2rem; background-color: #00db6d; margin-right: -1px; border-radius: 0 0.2rem 0.2rem 0; } header #pc-header .search-form > div .i .iconf { font-size: 0.9rem; } header #pc-header .search-form > div .i i { color: #fff; } header #pc-header .search-form .h-btn:hover .content { display: flex; } header #pc-header .search-form .content { position: absolute; top: 100%; left: 0; width: 54rem; display: none; justify-content: space-between; padding: 0; margin-left: 0; box-shadow: 0 0 0.3rem #ebebeb; } header #pc-header .search-form .content h3 { padding: 0 0.9rem; height: 2.4rem; line-height: 2.4rem; margin: 0; width: 14rem; font-size: 0.9rem; } header #pc-header .search-form .content .more-btn a { padding: 0.3rem 0.9rem; } header #pc-header .search-form .content nav { background-color: #fafafb; height: 33rem; width: 14rem; position: relative; overflow: auto; overflow-x: hidden; padding-bottom: 0.9rem; } header #pc-header .search-form .content nav ul > li { display: flex; } header #pc-header .search-form .content nav ul > li > div { display: flex; justify-content: space-between; padding: 0.5rem 0.9rem; flex-shrink: 0; width: 100%; cursor: pointer; } header #pc-header .search-form .content nav ul > li > div * { color: #666; } header #pc-header .search-form .content nav ul > li > div:hover { background-color: #fff; } header #pc-header .search-form .content nav ul > li > div:hover * { color: #00db6d; } header #pc-header .search-form .content nav ul .more-btn { margin-top: 0.9rem; } header #pc-header .search-form .content aside { width: 40rem; background-color: #fff; padding: 0 0.9rem; flex-direction: column; overflow: hidden; z-index: 10; box-sizing: border-box; } header #pc-header .search-form .content aside > div { display: none; } header #pc-header .search-form .content aside > div.active { display: block; } header #pc-header .search-form .content aside .item { display: none; flex-direction: column; height: 33rem; padding-bottom: 0.9rem; } header #pc-header .search-form .content aside .item.active { display: flex; } header #pc-header .search-form .content aside .item .more-btn { margin-top: 0; } header #pc-header .search-form .content aside .courses-wrap ol > li { width: 48%; } header #pc-header .search-form .content aside .courses-wrap ol > li > a { display: block; padding: 0.5rem 0; } header #pc-header .search-form .content aside .courses-wrap ol h5 { font-size: 0.9rem; display: inline-flex; align-items: flex-start; width: 80%; } header #pc-header .search-form .content aside .courses-wrap ol h5 em { font-size: 0.6rem; color: #00db6d; padding: 0.0.9rem 0.3rem; border: 1px solid #00db6d; border-radius: 2rem; margin-left: 0.5rem; white-space: nowrap; } header #pc-header .search-form .content aside .courses-wrap ol p span { margin-right: 3rem; font-size: 0.9rem; } header #pc-header .search-form .content aside .courses-wrap ol p span:last-of-type { margin-right: 0; } header #pc-header .search-form .content aside .courses-wrap ol p * { color: #666; } header #pc-header .search-form .content aside .program-wrap ol { margin-top: 0; } header #pc-header .search-form .content aside .program-wrap ol > li .p-tit { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9rem; } header #pc-header .search-form .content aside .program-wrap ol > li .p-tit h6 { font-size: 0.9rem; margin-bottom: 0.5rem; } header #pc-header .search-form .content aside .program-wrap ol > li .p-tit p *, header #pc-header .search-form .content aside .program-wrap ol > li .p-tit p { color: #999; font-size: 0.9rem; } header #pc-header .search-form .content aside .program-wrap ol > li .p-tit .t-logo { max-width: 13rem; width: 13rem; height: 4.5rem; background-color: #ccc; } header #pc-header .search-form .content aside .program-wrap ol > li .p-tit .t-logo img { width: 100%; height: 100%; object-fit: cover; } header #pc-header .search-form .content aside .program-wrap ol > li .field { height: 5rem; display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; } header #pc-header .search-form .content aside .program-wrap ol > li .field .list { padding: 0.5rem 0; } header #pc-header .search-form .content aside .program-wrap ol > li .field .list .iconf { color: #00db6d; font-size: 0.9rem; } header #pc-header .search-form .content aside .program-wrap ol > li .field .list label { font-size: 0.9rem; font-weight: bold; margin: 0 0.3rem; } header #pc-header .search-form .content aside .program-wrap ol > li .field .list span { color: #999; font-size: 0.9rem; } header #pc-header .search-form .content aside .program-wrap ol > li li { width: 100%; padding: 0.9rem 0; padding-right: 4%; border-bottom: 1px solid #ebebeb; } header #pc-header .search-form .content aside .program-wrap ol > li .more-btn { padding-bottom: 2rem; margin-top: 2rem; width: 100%; } header #pc-header .search-form .content aside .program-wrap ol li { width: 100%; padding: 0.9rem 0; padding-right: 4%; border-bottom: 1px solid #ebebeb; } header #pc-header .search-form .content aside .program-wrap ol li:last-of-type { border-bottom: none; } header #pc-header .search-form .content aside .program-wrap ol .more-btn { padding-bottom: 2rem; margin-top: 2rem; width: 100%; } header #pc-header .search-form .content aside .tit { position: relative; border-bottom: 1px solid #ebebeb; padding: 0.5rem 0; flex-shrink: 0; } header #pc-header .search-form .content aside .tit h4 { font-size: 1.0.9rem; margin: 0; color: #000; line-height: 1; } header #pc-header .search-form .content aside .tit .iconf { color: #00db6d; font-size: 1.3rem; } header #pc-header .search-form .content aside .tit p { color: #666; } header #pc-header .search-form .content aside .tit .close { position: absolute; top: 1.3rem; right: 0; width: 2rem; height: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } header #pc-header .search-form .content aside .tit .close i { font-size: 1.3rem; } header #pc-header .search-form .content aside ol { display: flex; flex-wrap: wrap; justify-content: space-between; overflow: auto; margin: 0.9rem 0; width: 100%; } header #pc-header .search-form .content aside ol > li { width: 100%; } header #pc-header .search-form .content aside ol a:hover h5 { color: #00db6d; } header #pc-header .search-form .search-inp { position: relative; margin-left:1.5rem; } header #pc-header .right { display: flex; align-items: center; margin-left: 2rem; } header #pc-header .right .member { display: flex; align-items: center; } header #pc-header .right .member .i { width: 2.4rem; height: 2.4rem; background-color: #ccc; border-radius: 50%; margin-right: 0.5rem; } header #pc-header .right .member p a { margin: 0 0.3rem; } header #pc-header .right .member p a:hover { color: #00db6d; } header #pc-header .right .member .member-on { position: relative; } header #pc-header .right .member .member-on:hover .second { display: block; } header #pc-header .right .member .member-on .second { position: absolute; top: 100%; right: 0; display: none; width: 10rem; box-shadow: 0 0 0.5rem #ebebeb; border-radius: 0.3rem; background-color: #fff; padding: 0.3rem; overflow: hidden; } header #pc-header .right .member .member-on .second a { display: block; padding: 0.3rem 0.5rem; font-size: 0.9rem; border-radius: 0.0.9rem; } header #pc-header .right .member .member-on .second a:hover { background-color: #ebebeb; } header #pc-header .right .h-btn { display: flex; margin-left: 0.5rem; } header #pc-header .right .h-btn .i { width: 1.3rem; height: 1.3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #00db6d; border-radius: 50%; margin-left: 0.5rem; position: relative; } header #pc-header .right .h-btn .i i, header #pc-header .right .h-btn .i { color: #fff; } header #pc-header .right .h-btn .i span { font-size: 0.6rem; } header #pc-header .right .h-btn .i .addcart-goods-num { position: absolute; top: -0.5rem; right: -0.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: #fff; background-color: #ff204f; border-radius: 50%; width: 0.9rem; height: 0.9rem; } header.fixed ul > li > a { height: 4rem !important; line-height: 4rem !important; } body { padding-top: 7rem; padding-bottom: 4rem; } main > section { padding: 5rem 0; } footer .foot { padding: 3rem 0; } footer .foot .logo { width: 19rem; } footer .foot .container { position: relative; } footer .foot .container ul { display: flex; justify-content: space-between; } footer .foot .container ul h4 { margin-top: 2rem; margin-bottom: 0.9rem; } footer .foot .container ul h4:first { margin-top: 0; } footer .foot .container ul a { display: block; font-size: 0.9rem; color: #666; padding: 0.3rem 0; } footer .foot .container ul a:hover { color: #00db6d; transform: translateX(0.2rem); } footer .foot .container .copyright { position: absolute; bottom: 0; left: 0; } footer .foot .container .copyright .link { display: flex; align-items: center; margin-bottom: 0.5rem; } footer .foot .container .copyright .link .item { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #ccc; margin-right: 0.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } footer .foot .container .copyright .link .item:hover { border-color: #00db6d; background-color: #00db6d; } footer .foot .container .copyright .link .item:hover i { color: #fff; } footer .foot .container .copyright p, footer .foot .container .copyright p * { color: #666; font-size: 0.9rem; } footer .footer { background-color: #00db6d; padding: 2rem 0; } footer .footer > div { display: flex; justify-content: space-between; } footer .footer .left { display: flex; flex-direction: column; justify-content: space-between; } footer .footer .left * { color: #fff; } footer .footer .left .logo { max-width: 12rem; } footer .footer .left .ico { display: flex; } footer .footer .left .ico .i { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid #fff; border-radius: 50%; margin-right: 0.9rem; } footer .footer .left .ico .i i { font-size: 0.9rem; } footer .footer .left .ico .i:hover { background-color: #fff; } footer .footer .left .ico .i:hover i { color: #00db6d; } footer .footer .left .copyright * { font-size: 0.9rem; font-weight: 100; line-height: 2; } footer .footer .right ul { display: flex; } footer .footer .right ul li { margin-left: 4rem; } footer .footer .right ul * { color: #fff; font-weight: 100; } footer .footer .right ul span { display: block; margin-top: 0.9rem; } footer .footer .right ul a { margin-top: 0.9rem; display: block; } footer .footer .right ul a:first-of-type { margin-bottom: 0; } footer .footer .right ul a:hover { text-decoration: underline; } footer .cookie { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #00db6d; z-index: 99; transform: translateY(100%); } footer .cookie .container { display: flex; align-items: center; justify-content: space-between; } footer .cookie .container p { font-size: 0.9rem; color: #fff; } footer .cookie .container a { padding: 0.5rem 1.3rem; color: #00db6d; border-radius: 3rem; background-color: #fff; white-space: nowrap; } .select-wrap { display: flex; justify-content: space-between; } .select-wrap #selected { display: flex; } .select-wrap #selected p { white-space: nowrap; margin-right: 0.9rem; } .select-wrap #selected div a { display: inline-block; padding: 0.3rem 0.5rem; color: #fff; font-size: 0.9rem; background-color: #00db6d; border-radius: 0.0.9rem; margin-right: 0.9rem; margin-bottom: 0.9rem; } .select-wrap #selected div a:last-of-type { margin-right: 0; } .select-wrap #selected div a span { font-size: 0.9rem; } .select-wrap #selected div a i { display: inline-block; margin-left: 0.5rem; font-size: 0.9rem; } .select-wrap .submit-btn { text-align: right; } .select-wrap .submit-btn a { display: inline-block; padding: 0.3rem 0.5rem; border-radius: 0.2rem; color: #fff; text-transform: capitalize; background-color: #00db6d; font-size: 0.9rem; white-space: nowrap; } .layui-layer-dialog { top: 50% !important; } .mb-block { display: none; } @media screen and (max-width: 1024px) { header #pc-header > div { max-width: 60rem; } .main-center, .main-title p { max-width: 50rem; } .main-QA .container { max-width: 50rem !important; } #pc-header { display: none !important; } #mb-header { display: block !important; } } @media screen and (max-width: 820px) { main .main-4 .container .item .t div span { width: 5.5rem; } } @media screen and (max-width: 768px) { .list-banner .search-con { width:100%; } .main-QA .container{ padding: 0 0 0 0; } .mb-block { display: block; } .swiper-button { display: none !important; } footer .cookie { padding: 0.5rem 0.5rem; } h2 { font-size: 1.3rem; } body { /*padding-top: 3.5rem;*/ padding: 3.5rem 0.8rem 0 0.8rem; } footer{ margin: 0 -0.8rem 0 -0.8rem; } #pc-header { display: none !important; } #mb-header { display: block !important; } main > section { padding: 2rem 2%; } main .index-title * { text-align: center; } main .index-title p { font-size: 1.3rem; } main .index-title h2 { font-size: 1.3rem; margin-top: 0.5rem; } .swiper-button { width: 1.3rem; height: 1.3rem; } .filter-container { padding: 0.9rem 0.5rem; padding-bottom: 0.5rem; } .filter-container .nav a { margin-right: 0.5rem; font-size: 0.9rem; padding-bottom: 0.5rem; } .filter-container .bottom { padding: 0.9rem 0 0; } .filter-container .bottom .list a { white-space: nowrap; } .filter-container .bottom .list > div { width: calc(100% - 4rem); } .filter-container .bottom .list > div .swiper-wrapper { flex-wrap: nowrap; } .filter-container .form { display: none; } .page-title { margin-bottom: 3rem; } .page-title h2 { font-size: 1.3rem; } .page-title h2::after { font-size: 2rem; } .page-title h2 strong { font-size: 1.3rem; } .page-banner img { height: 9rem; object-fit: cover; } .page-banner .text .form { display: none; } .page-banner .text .right > a { display: none; } .order-container { align-items: center; } .order-container a { padding: 0 0.5rem; } .content-container { flex-direction: column; } .content-container > div { padding-left: 2% !important; padding-right: 2% !important; } .content-container .content-right { width: 100%; margin-left: 0; } .content-container .content-right .side-rec-case .con .link .img { height: 6rem; } footer .top .container { flex-direction: column-reverse; } footer .top .logo { margin: 0 auto 2rem; } footer .top .tabs { justify-content: center; } footer .top .tabs-content { padding-left: 2%; padding-right: 2%; } footer .top .tabs-content a:nth-of-type(3n) { margin-right: 0; } footer .bottom .container { padding-left: 2%; padding-right: 2%; } footer .bottom .container nav { display: none; } footer .bottom .container .copyright { padding-right: 6rem; } footer .bottom .container .code { right: 2%; } footer .footer > div { flex-direction: column-reverse; padding: 0 2%; } footer .footer .left { margin-top: 2rem; } footer .footer .left .logo { display: none; } footer .footer .right ul a, footer .footer .right ul span { font-size: 0.9rem; } footer .footer .right ul li { margin-left: 0; margin-right: 3rem; } .list-banner .con1 { flex-direction: column; } .list-banner .con1 .left { margin-bottom: 0.9rem; } .list-banner .con1 .left * { text-align: center; } .list-banner .con1 .left h2 { font-size: 2rem; } .list-banner .con2 .filter-container { flex-wrap: wrap; } .list-banner .con2 .filter-container > div { width: 48% !important; flex: none; margin-right: 0 !important; } .list-banner .con2 .filter-container > div .selection { padding: 0.5rem; min-height: auto; } .list-banner .con2 .filter-container > div .ui.selection.dropdown .menu > .item { padding: 0.8rem 0.5rem !important; min-height: auto !important; } .list-banner .con2 .ul_filter { padding: 0 2%; } .list-banner .search-con { padding: 0.9rem; } .list-banner .search-con .inp { flex: none; width: 100%; } .list-banner .search-con .inp > span { display: none; } .main-QA .t { margin-bottom: 0.9rem !important; } .main-QA .t h2 { font-size: 1.3rem; margin-bottom: 0 !important; } .main-QA .content .accordion li h5 span { display: inline-block; width: 90%; } .main-QA .content .accordion li .submenu { padding: 0.9rem 2rem; } .main-title { margin-bottom: 2rem; } .main-title p br { display: none; } .main-other-qa { padding-left: 2%; padding-right: 2%; } .main-other-qa .container .content { flex-direction: column; } .main-other-qa .container .content > div { width: 100%; } .main-other-qa .container .content .left::after { display: none; } .main-other-qa .container .content .right { padding-left: 0; } .select-wrap { flex-wrap: wrap; padding: 0 2%; } .select-wrap #selected { margin-bottom: 0.9rem; } .select-wrap #selected div a { margin-bottom: 0.5rem; } .select-wrap .submit-btn { width: 100%; text-align: right; } .rec-course { padding: 0 2%; } .more-btn > a, .more-btn > span, .more-btn button { padding: 0.4rem 1.3rem; } footer .cookie .container p { line-height: 1.4; } .list-banner .m4 { margin: 2rem 0; } .list-banner .container { padding: 0 2%; } .list-banner .con1 .left h2 { font-size: 1.4rem; } .list-banner .search-con1 h5 { font-size: 1.3rem; text-align: center; } .list-banner .search-con1 .inp { height: 2.5rem; margin: 0 4%; } .list-banner .search-con1 .inp > span { top: calc(100% + 6rem); } .list-banner .search-con1 .inp input::placeholder { font-size: 0.8rem; } .list-banner .search-con1 .inp .submit-btn { width: 6rem; } .list-banner .search-con1 .hot-s { margin-left: 4%; margin-right: 4%; } .position { margin-bottom: 2rem; } .par.w100 { flex-wrap: wrap; } .container-mask .form-mask { max-height: 80vh; overflow-y: auto; max-width: 100%; } .main-other-qa .container > h6 { text-align: center; } .main-other-qa .container .content p { text-align: center; } .main-other-qa .container .content .left { padding-right: 0; } footer .cookie .container{ flex-wrap: wrap!important; } } @media screen and (min-width: 1200px) { .main-QA .container { padding: 0.9rem 0; max-width:48rem !important; } }