.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; } .ra { border-radius: 0.2rem; overflow: hidden; } .bs { box-shadow: 0 0 0.5rem #ebebeb; } .box-shadow { box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(36, 65, 116, 0.1); } .btn { padding: 0.3rem 0.9rem; background-color: #00db6d; color: #fff; border-radius: 2rem; } .btn.s1 { background-color: transparent; border: 1px solid #00db6d; color: #00db6d; } .member-container { width: 100%; height: 29.6rem; background-color: #00db6d; background-image: url("../images/member-bg.png"); background-repeat: no-repeat; background-position: center; background-size: 80.65rem 100%; margin-bottom: 7rem; position: relative; } .member-container>img{ height: 3.3rem; position: absolute; right: 2.25rem; bottom: 1.75rem; filter: grayscale(100%) brightness(100); } .member-container .main-center{ max-width: 41rem; padding: 0; } .member-container .container { display: flex; justify-content: space-between; } .member-container .container .img { max-width: 50%; padding-top: 3.8rem; } .member-container .container .img>h2{ font-size: 2.4rem; color: #ffff1b; line-height: 1.1; } .member-container .container .img>p{ font-size: 1.9rem; color: #ffffff; line-height: 1.2; } .member-container .container .img>span{ display: block; font-size: 1.2rem; color: #ffffff; line-height: 1.2; margin-top: 0.5rem; } .member-container .container .text { width: 19.5rem; background-color: #ffffff; margin-top: 1.7rem; padding: 1rem; } .member-container .container .text h1 { max-width: 18rem; font-size: 0.8rem; } .member-container .container .text .field input, .member-container .text-area .field input{ font-family: "HarmonyOS_Sans_Medium" !important; height: 2.1rem; font-size: 0.85rem !important; } .member-container .container .text input::placeholder, .member-container .text-area input::placeholder{ font-family: "HarmonyOS_Sans_Medium" !important; color: #999999; } .member-container .content-title { border-bottom: 1px solid #ebebeb; display: flex; } .member-container .container .text .text{ margin-top: 0; } .member-container .content-title a, .member-container .content-title span { font-family: "HarmonyOS_Sans_Bold" !important; display: inline-block; font-size: 0.9rem; border-bottom: 1px solid transparent; padding: 0 1.3rem 0.9rem; margin: 0 0.5rem; } .member-container .content-title a:hover, .member-container .content-title span:hover{ border-color: #2fe78b; } .member-container .content-title a.active, .member-container .content-title span.active { border-color: #00db6d; } .member-container .register-title { display: flex; justify-content: space-between; margin-bottom: 0.9rem; } .member-container .register-title p { font-size: 0.9rem; } .member-container .register-title div { position: relative; } .member-container .register-title div span { position: absolute; top: 50%; right: calc(100% + 0.5rem); padding: 0.3rem; background-color: #f5f7fa; font-size: 0.6rem; white-space: nowrap; transform: translateY(-50%); display: none; } .member-container .register-title div span::after { content: ""; position: absolute; top: 50%; left: 100%; border-left: 0.3rem solid #f5f7fa; border-top: 0.3rem solid transparent; border-bottom: 0.3rem solid transparent; transform: translateY(-50%); } .member-container .register-title div:hover span { display: block; } .member-container .content { padding-top: 0.9rem; } .member-container .content>.con { display: none; } .member-container .content>.con.active { display: block; } .member-container .con-title { display: flex; margin-bottom: 0.9rem; } .member-container .con-title a { display: flex; align-items: center; background-color: #f5f7fa; border-radius: 0.4rem; margin-right: 0.5rem; padding: 0.5rem; flex: 1; } .member-container .con-title a:last-of-type { margin-right: 0; } .member-container .con-title a:nth-of-type(1) .i { background-color: #feebe0; } .member-container .con-title a:nth-of-type(1) .i i { color: #ff9128; } .member-container .con-title a:nth-of-type(2) .i { background-color: #f8ebe9; } .member-container .con-title a:nth-of-type(2) .i i { color: #f44f39; } .member-container .con-title a:nth-of-type(3) .i { background-color: #e8ecf9; } .member-container .con-title a:nth-of-type(3) .i i { color: #4285ff; } .member-container .con-title a .i { width: 2.4rem; height: 2.4rem; padding: 0.9rem; border-radius: 50%; margin-right: 0.5rem; display: flex; align-items: center; justify-content: center; } .member-container .con-title a .i i { font-size: 0.9rem; } .member-container .con-title a:hover, .member-container .con-title a.active { background-color: #00db6d; } .member-container .con-title a:hover span, .member-container .con-title a.active span { color: #fff; } .member-container .form>div { margin-bottom: 0.9rem; position: relative; } .member-container .form>div.to { display: flex; justify-content: space-between; } .member-container .form>div.to input { width: 49%; } .member-container .form .field { flex: 1; margin-bottom: 0; position: relative; } .member-container .form .error { position: absolute; top: 100%; left: 0; font-size: 0.7rem; color: #ff204f; } .member-container .form .bt { display: flex; justify-content: space-between; align-items: center; } .member-container .form .bt input { width: 8rem; } .member-container .form .bt a { font-family: "HarmonyOS_Sans_Medium" !important; color: #00db6d; font-size: 0.9rem; transition: all .6s; } .member-container .form .bt a:hover { text-decoration: underline; color: #2fe78b; } .member-container .form input { padding: 0 4%; } .member-container .form input, .member-container .form .select-value, .member-container .form button { display: block; width: 100%; height: 2.1rem; font-size: 0.85rem; border-radius: 0.3rem; border: 1px solid #ebebeb; box-sizing: border-box; } .member-container .form input p, .member-container .form .select-value p, .member-container .form button p { border: none !important; } .member-container .form .select-container { flex: 1; } .member-container .form .code-wrap { display: flex; justify-content: space-between; } .member-container .form .code-wrap .code { display: flex; align-items: center; height: 100%; margin-left: 2rem; position: relative; flex-shrink: 0; border-radius: 0.3rem; overflow: hidden; } .member-container .form .code-wrap .code img { height: 2.1rem; width: auto; } .member-container .form .code-wrap .code a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-style: 0.9rem; cursor: pointer; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .member-container .form .code-wrap .code:hover a { opacity: 1; } .member-container .form .err-msg { position: absolute; top: 100%; left: 0; width: 100%; display: none; margin-left: auto; font-size: 0.9rem; color: #00db6d; text-align: right; padding-right: 0.9rem; margin-top: 0.2rem; } .member-container .form .nodrop { cursor: no-drop !important; background: #ebebeb !important; color: #343434 !important; } .member-container .form input[type="submit"] { font-family: "HarmonyOS_Sans_Bold" !important; background-color: #00db6d; font-size: 0.85rem; height: 2.1rem; color: #fff; cursor: pointer; transition: all .6s; } .member-container .form input[type="submit"]:hover{ background-color: #2fe78b; } .member-container .wechat .img { width: 8rem; height: 8rem; background-color: #ccc; margin: 2rem auto; border: 1px solid #ebebeb; border-radius: 0.5rem; overflow: hidden; } .member-container .o .line-tit { text-align: center; } .member-container .o .line-tit span { font-family: "HarmonyOS_Sans_Medium" !important; position: relative; color: #999; font-size: 0.85rem; } .member-container .o .line-tit span::before, .member-container .o .line-tit span::after { content: ""; position: absolute; top: 50%; width: 1.8rem; border-bottom: 1px solid #ebebeb; } .member-container .o .line-tit span::before { right: calc(100% + 0.9rem); } .member-container .o .line-tit span::after { left: calc(100% + 0.9rem); } .member-container .o .other { display: flex; justify-content: center; margin-top: 0.9rem; } .member-container .o .other .i { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; margin: 0 1.3rem; box-shadow: 0rem 0.3rem 0.5rem 0rem #eaeaea; } .member-container .o .other .i .iconf { font-size: 1.3rem; } .member-container .o>span { display: block; text-align: center; color: #999; font-size: 0.9rem; } .member-container .o>span a { font-size: inherit; color: #00db6d; } .member-container .o>span a:hover { text-decoration: underline; } .user-container { background-color: #f5f7fa; padding-bottom: 3rem; } .user-container .container { display: flex; align-items: flex-start; padding-bottom: 0.9rem; } .user-container .container>div { border-radius: 0.5rem; overflow: hidden; background-color: #fff; } .user-container .container .left { width: 9rem; margin-right: 0.9rem; padding: 0.9rem 0; } .user-container .container .left a { display: flex; align-items: center; justify-content: center; padding: 0.9rem 0; position: relative; } .user-container .container .left a::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; border-left: 4px solid transparent; transition: all ease 0.3s; } .user-container .container .left a i { font-size: 0.9rem; margin-right: 0.9rem; } .user-container .container .left a:hover, .user-container .container .left a.active { background-color: #f5f7fa; } .user-container .container .left a.active::before { border-color: #00db6d; } .user-container .container .left a:hover::before{ border-color: #2fe78b; } .user-container .container .left a.active i { color: #00db6d; } .user-container .container .left a:hover i{ color: #2fe78b; } .user-container .container .right { flex: 1; padding: 0.9rem; } .user-container .container .right>div.active { display: block; } .user-container .container .right .label-btn { padding-bottom: 0.9rem; border-bottom: 1px solid #ebebeb; } .user-container .container .right .label-btn a { margin-right: 2rem; } .user-container .container .right>h1 { font-size: 2.4rem; } .user-container .container .right .cart-tit { font-size: 2rem; color: #999; font-weight: 300; margin-bottom: 0.9rem; } .user-container .container .right .c-tit { font-size: 1.3rem; border-left: 4px solid #00db6d; line-height: 1; padding-left: 0.5rem; margin-bottom: 2rem; } .user-container .container .right .data-content { display: flex; } .user-container .container .right .data-content .via { flex-shrink: 0; text-align: center; margin-right: 6%; } .user-container .container .right .data-content .via .img { width: 5rem; height: 5rem; border-radius: 50%; margin-bottom: 0.9rem; background-color: #ccc; } .user-container .container .right .data-content .via a { font-size: 0.9rem; } .user-container .container .right .data-content .con { display: flex; justify-content: space-between; flex-wrap: wrap; } .user-container .container .right .data-content .con .inp { display: flex; align-items: center; width: 48%; margin-bottom: 0.9rem; } .user-container .container .right .data-content .con .inp label { width: 4rem; font-size: 0.9rem; color: #666; } .user-container .container .right .data-content .con .inp input, .user-container .container .right .data-content .con .inp select { flex: 1; height: 2.4rem; border-radius: 0.2rem; padding: 0 2%; border: 1px solid #ebebeb; } .user-container .container .right .data-content .con button { display: block; width: 15rem; height: 2.4rem; border-radius: 0.2rem; background-color: #00db6d; color: #fff; margin: 2rem auto 0; } .user-container .container .right .data-content-copy .more-form { display: none; } .user-container .container .right .data-content-copy form { /*padding-right:10%;*/ } .user-container .container .right .data-content-copy h2 { margin-bottom: 0.5rem; color: #00db6d; font-size: 1.8rem; } .user-container .container .right .data-content-copy h4 { margin-bottom: 2rem; color: #00db6d; } .user-container .container .right .data-content-copy p { margin-bottom: 0.9rem; color: #999; } .user-container .container .right .data-content-copy .ui.button { margin-bottom: 0.9rem; transition: all .6s; } .user-container .container .right .data-content-copy .ui.button:nth-of-type(1){ background-color: #ffff1b; color: #2e2e2e; } .user-container .container .right .data-content-copy .ui.button:nth-of-type(1):hover{ background-color: rgba(255,255,27,.7); } .user-container .container .right .data-content-copy .ui.button:nth-of-type(3):hover{ background-color: #2fe78b !important; } .user-container .container .right .data-content-copy .ui.form .field>label { font-size: 1em; margin-bottom: 0.6rem; } .user-container .container .right .data-content-copy .ui.dropdown .menu>.item { font-size: 0.9em; } .user-container .container .right .data-content-copy .ui.button, .user-container .container .right .data-content-copy .ui.buttons .button, .user-container .container .right .data-content-copy .ui.buttons .or { font-size: 0.9rem; } .user-container .container .right .safety-content .item { display: flex; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #ebebeb; } .user-container .container .right .safety-content .item:last-of-type { border-bottom: none; } .user-container .container .right .safety-content .item .i { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid #00db6d; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 0.9rem; } .user-container .container .right .safety-content .item .txt h6 { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.5rem; } .user-container .container .right .safety-content .item .txt h6 span { font-size: 0.9rem; } .user-container .container .right .safety-content .item .txt h6 span.c1 { color: #00db6d; } .user-container .container .right .safety-content .item .txt h6 span.c2 { color: #ffb818; } .user-container .container .right .safety-content .item .txt p { font-size: 0.9rem; color: #999; } .user-container .container .right .safety-content .item a { margin-left: auto; width: 6rem; height: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #00db6d; border-radius: 0.2rem; font-size: 0.9rem; color: #00db6d; transition: all .6s; } .user-container .container .right .safety-content .item a:hover { background-color: #00db6d; color: #fff; } .user-container .container .right .course-content { display: flex; justify-content: space-between; flex-wrap: wrap; } .user-container .container .right .course-content .item { width: 49%; border: 1px solid #00db6d; border-radius: 0.5rem; padding: 0.9rem; margin-bottom: 2%; position: relative; } .user-container .container .right .course-content .item h6 { font-size: 0.9rem; display: flex; align-items: center; justify-content: space-between; } .user-container .container .right .course-content .item h6 object a { font-size: 0.6rem; padding: 0.0.9rem 0.3rem; border: 1px solid #00db6d; border-radius: 3rem; color: #00db6d; text-transform: uppercase; } .user-container .container .right .course-content .item .start { display: flex; align-items: center; justify-content: space-between; margin: 0.5rem 0; } .user-container .container .right .course-content .item .start span { font-size: 0.9rem; } .user-container .container .right .course-content .item>p { font-size: 0.9rem; line-height: 1.8; color: #999; margin-bottom: 0.9rem; } .user-container .container .right .course-content .item>em { position: absolute; bottom: 0.9rem; right: 0.9rem; padding: 0.0.9rem 0.3rem; border: 1px solid #ccc; border-radius: 0.2rem; font-size: 0.9rem; } .user-container .container .right .shopping-content { position: relative; } .user-container .container .right .shopping-content table { width: 100%; } .user-container .container .right .shopping-content table * { font-size: 0.9rem; } .user-container .container .right .shopping-content table tr { border-bottom: 1px solid #ebebeb; } .user-container .container .right .shopping-content table tr:last-of-type { border-bottom: none; } .user-container .container .right .shopping-content table .t { border-bottom: 1px solid #ebebeb; } .user-container .container .right .shopping-content table .t th { padding-bottom: 0.5rem; font-size: 1.0.9rem; vertical-align: middle; text-align: center; } .user-container .container .right .shopping-content table .t th:first-of-type { text-align: left; padding-left: 2rem; padding-right: 2rem; } .user-container .container .right .shopping-content table .t th:last-of-type { text-align: right; padding-left: 2rem; padding-right: 2rem; } .user-container .container .right .shopping-content table .b td { padding: 0.9rem 0; padding-right: 2rem; width: 20%; vertical-align: middle; text-align: center; } .user-container .container .right .shopping-content table .b td:first-of-type { text-align: left; } .user-container .container .right .shopping-content table .b td:last-of-type { text-align: right; padding-right: 0; } .user-container .container .right .shopping-content table .b .b1 { width: 30%; } .user-container .container .right .shopping-content table .b .b1>div { display: flex; align-items: flex-start; } .user-container .container .right .shopping-content table .b .b1>div>input { margin: 0; margin-right: 0.9rem; width: 0.9rem; height: 0.9rem; cursor: pointer; } .user-container .container .right .shopping-content table .b .b1>div>input[type='checkbox'] { position: relative; cursor: pointer; width: 1rem; height: 1rem; font-size: 0.85rem; } .user-container .container .right .shopping-content table .b .b1>div>input[type='checkbox']:checked::after { position: absolute; top: 0; display: inline-flex; justify-content: center; align-items: center; width: 1rem; height: 1rem; font-size: 0.85rem; content: '✓'; color: #fff; background-color: #00db6d; border-radius: 2px; } .user-container .container .right .shopping-content table .b .b1>div div { flex: 1; width: 100%; } .user-container .container .right .shopping-content table .b .b1 span { padding: 0.12rem 0.4rem; border-radius: 0 0.9rem; background-color: #00db6d; font-size: 0.8rem; color: #fff; text-transform: uppercase; } .user-container .container .right .shopping-content table .b .b1 h6 { font-size: 0.9rem; margin: 0.5rem 0; } .user-container .container .right .shopping-content table .b .b1 p { color: #666; margin-top: 0.5rem; } .user-container .container .right .shopping-content table .b .b2 a { display: block; border: 1px solid #ebebeb; text-align: center; padding: 0.0.9rem 0; color: #666; margin-top: 0.2rem; max-width: 10rem; } .pay-btn .btn{ background-color: #ffffff; border: 1px solid #00db6d; color: #00db6d !important; transition: all .6s; } .pay-btn .btn:hover{ background-color: #00db6d; color: #ffffff !important; } .user-container .container .right .shopping-content table .b .b4 { font-size: 0.9rem; position: relative; } .user-container .container .right .shopping-content table .b .b4 button { position: absolute; bottom: 0.5rem; right: 0; padding: 0.3rem 0.9rem; background-color: #00db6d; color: #fff; border-radius: 2rem; margin-top: 2rem; } .user-container .container .right .shopping-content table .b .b4 em { position: absolute; bottom: 0.5rem; right: 0; display: block; width: fit-content; margin-left: auto; border-bottom: 1px solid #00db6d; padding: 0.3rem 0; cursor: pointer; transition: all .6s; } .user-container .container .right .shopping-content table .b .b4 em a{ color: #666; transition: all .6s; } .user-container .container .right .shopping-content table .b .b4 em:hover a{ color: #00db6d; } .user-container .container .right .shopping-content .tip { font-size: 0.9rem; color: #999; text-align: right; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #ebebeb; } .user-container .container .right .shopping-content .count>div { text-align: right; width: 15rem; margin-left: auto; display: flex; justify-content: space-between; } .user-container .container .right .shopping-content .count>div * { color: #666; } .user-container .container .right .shopping-content .count .s { margin-top: 2rem; } .user-container .container .right .shopping-content .count .s em { font-size: 1.3rem; } .user-container .container .right .shopping-content .count .s strong { font-size: 0.9rem; } .user-container .container .right .shopping-content .count .b { margin-top: 0.9rem; } .user-container .container .right .shopping-content .count .b em { font-size: 1.3rem; } .user-container .container .right .shopping-content .count .b strong { font-size: 1.3rem; } .user-container .container .right .shopping-content .oper-all { position: absolute; right: 0; bottom: calc(100% + 2rem); border: 1px solid #00db6d; color: #00db6d; padding: 0.3rem 0.9rem; border-radius: 0.2rem; cursor: pointer; transform: translateY(50%); } .user-container .container .right .shopping-content .oper-all:hover { color: #fff; background-color: #00db6d; } .user-container .container .right .shopping-content .oper-btn { display: flex; justify-content: flex-end; } .user-container .container .right .shopping-content .oper-btn .btn { margin-left: 0.9rem; } .user-container .container .right .shopping-content .pay-btn { text-align: right; margin-top: 2rem; } .user-container .container .right .shopping-content .pay-btn>.btn { display: inline-block; margin-left: auto; padding-left: 3rem; padding-right: 3rem; } .user-container .container .right .payment-content h6 { font-size: 0.9rem; font-weight: normal; margin-bottom: 0.9rem; margin-top: 3rem; } .user-container .container .right .payment-content h6.hint { color: #ff8400; } .user-container .container .right .payment-content h6:first-of-type { margin-top: 0; } .user-container .container .right .payment-content .sec { padding-bottom: 0.9rem; border-bottom: 1px solid #ebebeb; margin-bottom: 0.9rem; } .user-container .container .right .payment-content .sec:last-of-type { border-bottom: none; } .user-container .container .right .payment-content .sec>p { text-align: right; } .user-container .container .right .payment-content .sec>p strong { font-size: 1.3rem; color: #f01414; font-weight: bold; } .user-container .container .right .payment-content .sec .pay-btn { text-align: right; margin-top: 2rem; } .user-container .container .right .payment-content .sec .pay-btn .btn { padding: 0.5rem 1.3rem; } .user-container .container .right .payment-content .info { background-color: #f8f8f9; padding: 0.9rem; position: relative; } .user-container .container .right .payment-content .info span { display: inline-block; padding: 0.2rem 0.9rem; background-color: rgba(59, 82, 246, 0.4); color: #fff; font-size: 0.9rem; border-radius: 0.2rem; text-transform: uppercase; margin-bottom: 0.5rem; } .user-container .container .right .payment-content .info h4 { font-size: 1.0.9rem; margin-bottom: 0.5rem; } .user-container .container .right .payment-content .info p { margin-bottom: 0.5rem; } .user-container .container .right .payment-content .info p:last-of-type { color: #999; margin-bottom: 0; } .user-container .container .right .payment-content .info strong { position: absolute; bottom: 0.9rem; right: 0.9rem; color: #f01414; font-size: 1.0.9rem; } .user-container .container .right .payment-content .way { display: flex; } .user-container .container .right .payment-content .way .item { flex: 1; height: 4.5rem; margin-right: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f8f8f9; border: 1px solid transparent; border-radius: 0.2rem; } .user-container .container .right .payment-content .way .item.active { border-color: #00db6d; } .user-container .container .right .payment-content .way .item:last-of-type { margin-right: 0; } .user-container .container .right .order-content .item { display: block; padding: 0.9rem 0; border-bottom: 1px solid #ebebeb; } .user-container .container .right .order-content .item:last-of-type { border-bottom: none; } .user-container .container .right .order-content .item .t { position: relative; margin-bottom: 0.5rem; } .user-container .container .right .order-content .item .t h6 { font-size: 0.9rem; } .user-container .container .right .order-content .item .t p { font-size: 0.9rem; color: #666; } .user-container .container .right .order-content .item .t .btn { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 0.9rem; } .user-container .container .right .order-content .item .par-con { display: flex; justify-content: space-between; } .user-container .container .right .order-content .item .par-con .par { min-width: initial; } .user-container .container .right .help-content li { display: flex; cursor: pointer; margin-bottom: 0.5rem; } .user-container .container .right .help-content li.active .text>p i { transform: rotate(-180deg); } .user-container .container .right .help-content li.active .info { max-height: 10rem !important; transition: all linear 0.5s !important; } .user-container .container .right .help-content li .q { width: 2rem; height: 2rem; border-radius: 50%; background-color: #00db6d; color: #fff; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.0.9rem; margin-right: 0.9rem; } .user-container .container .right .help-content li .text { flex: 1; border-bottom: 1px solid #ebebeb; padding: 0.5rem 0; } .user-container .container .right .help-content li .text>p { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 0.5rem; } .user-container .container .right .help-content li .text>p i { margin-left: auto; } .user-container .container .right .help-content li .text .info { overflow: hidden; max-height: 0; transition: none; } .user-container .container .right .help-content li .text .info *, .user-container .container .right .help-content li .text .info { color: #666; } .user-container .container .right .course-list-content { padding-bottom: 4rem; } .user-container .container .right .course-list-content .th { padding: 0 1rem; } .user-container .container .right .course-list-content .td, .user-container .container .right .course-list-content .th { display: flex; justify-content: space-between; } .user-container .container .right .course-list-content .td>div, .user-container .container .right .course-list-content .th>div { width: calc(100% / 8); text-align: center; font-size: 0.9rem; } .user-container .container .right .course-list-content .td { padding: 0.9rem; border-radius: 0.2rem; box-shadow: 0rem 0.15rem 0.9rem 0rem rgba(32, 30, 29, 0.35); margin-top: 1.3rem; } .user-container .container .right .course-list-content .td>div { display: flex; align-items: center; justify-content: center; } .user-container .container .right .course-list-content .td .alt { position: relative; } .user-container .container .right .course-list-content .td .alt.c1 { color: #ef3333; } .user-container .container .right .course-list-content .td .alt.c2 { color: #00db6d; } .user-container .container .right .course-list-content .td .alt.c3 { color: #f1bc1c; } .user-container .container .right .course-list-content .td .alt.c4 { color: #31af18; } .user-container .container .right .course-list-content .td .alt:hover { text-decoration: underline; } .user-container .container .right .course-list-content .td .alt:hover .alt-txt { display: block; } .user-container .container .right .course-list-content .td .alt .alt-txt { position: absolute; top: 100%; left: 100%; width: 20rem; padding: 0.9rem; border: 1px solid #00db6d; background-color: #fff; box-shadow: 0rem 0.15rem 0.9rem 0rem rgba(32, 30, 29, 0.35); border-radius: 0.25rem; display: none; color: #00db6d; } @media screen and (max-width: 1024px) { .member-container .container .img { max-width: 22rem; } .member-container .container .img img { max-width: 14rem; } } @media screen and (max-width: 768px) { html { font-size: 16px; } .member-container .content-title { justify-content: center; } .member-container .container { flex-direction: column; } .member-container .container>div { flex: none; width: 100% !important; } .member-container .container .img { max-width: 100%; padding-top: 0; margin-bottom: 2rem; } .member-container .container .img p { text-align: center; } .member-container .container .img img { max-width: 50%; margin: 0 auto; } .member-container .container .text { width: 100%; } .user-container .container { flex-direction: column; } .user-container .container>div { width: 100% !important; } .user-container .container .left { display: flex; /* overflow-x: scroll; 8*/ flex-wrap: wrap; } .user-container .container .left a { white-space: nowrap; padding: 0.5rem 1rem; margin-right: 1rem; } .user-container .container .left a::before { display: none !important; } .user-container .container .left a.active { background-color: #00db6d; color: #fff; } .user-container .container .right>h1 { font-size: 1.8rem; } .user-container .container .right .order-content .item .t h6 { margin-bottom: 0.2rem; } .user-container .container .right .order-content .item .par-con { flex-wrap: wrap; } .user-container .container .right .order-content .item .par-con .par { width: 50%; display: flex; flex-wrap: wrap; } .user-container .container .right .shopping-content table .t th { padding-left: 0 !important; padding-right: 0 !important; } .user-container .container .right .shopping-content table .b .b1 span { white-space: nowrap; } .user-container .container .right .shopping-content table .b td { width: auto; padding-right: 0; } .user-container .container .right .course-content .item { width: 100%; } .user-container .container .right .safety-content .item a { flex-shrink: 0; } .user-container .container .right .course-list-scroll { overflow-x: auto; padding: 0 0.5rem; } .user-container .container .right .course-list-scroll .course-list-content { width: 50rem; } }