html{ font-size: 5.20833vw; }
@font-face {
font-family: "HarmonyOSHans-Medium";
src: url("../fonts/HarmonyOSHans-Medium.woff2") format("woff2"),
url("../fonts/HarmonyOSHans-Medium.woff") format("woff");
}
@font-face {
font-family: "HarmonyOSHans-Regular";
src: url("../fonts/HarmonyOSHans-Regular.woff2") format("woff2"),
url("../fonts/HarmonyOSHans-Regular.woff") format("woff");
}
@font-face {
font-family: "HarmonyOSHans-Light";
src: url("../fonts/HarmonyOSHans-Light.woff2") format("woff2"),
url("../fonts/HarmonyOSHans-Light.woff") format("woff");
}
@font-face {
font-family: 'en_b';
src: url("../fonts/EUCLIDCIRCULARA-BOLD_0.TTF");
}
*{ padding:0px; margin:0px; list-style-type: none; outline:none; font-style:normal; }
a {
font-family:"思源宋體 TW","Source Han Sans SC","Microsoft YaHei", Arial, Helvetica, sans-serif;
color: #000;
text-decoration: none;
background-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
}
@font-face {
font-family: 'haian'; /* Project id 4627527 */
src: url('https://at.alicdn.com/t/c/font_4627527_6m2sxdqi5tf.woff2?t=1721972990663') format('woff2'),
url('https://at.alicdn.com/t/c/font_4627527_6m2sxdqi5tf.woff?t=1721972990663') format('woff'),
url('https://at.alicdn.com/t/c/font_4627527_6m2sxdqi5tf.ttf?t=1721972990663') format('truetype');
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: #000 !important; /* 设置文字颜色 */
background: transparent !important; /* 移除背景色 */
}
.haianfont{ font-family:'haian' !important; }
a:hover {
}
.win{ min-width:1200px; width:1300px; margin:0 auto; }
.donhua{
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
-o-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
}
body::-webkit-scrollbar,html::-webkit-scrollbar,ul::-webkit-scrollbar {
width: 4px;
background-color: #eee
}
body::-webkit-scrollbar-thumb,html::-webkit-scrollbar-thumb,ul::-webkit-scrollbar-thumb {
border: solid 1px #6b9080;
width: 3px;
border-radius: 4px;
background-color: #6b9080
}
body::-webkit-scrollbar-corner,html::-webkit-scrollbar-corner,ul::-webkit-scrollbar-corner {
background-color: #eee
}
body::-webkit-scrollbar:horizontal,html::-webkit-scrollbar:horizontal,ul::-webkit-scrollbar:horizontal {
height: 9px
}
body::-webkit-selection,html::-webkit-selection,ul::-webkit-selection {
background: #6b9080;
color: #fff
}
body::-moz-selection,html::-moz-selection,ul::-moz-selection {
background: #6b9080;
color: #fff
}
body::selection,html::selection,ul::selection {
background: #6b9080;
color: #fff
}
::selection {
background: #6b9080; /* 粉红色的底色 */
color: #fff; /* 文字的颜色 */
}
html,body{ }
body{ color: #000; font-family:"思源宋體 TW","思源黑体 CN","Source Han Sans SC","Microsoft YaHei", Arial, Helvetica, sans-serif; background:#ffffff; overflow-x:hidden; }
*{ }
button,input{ font-family: inherit; }
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: 'haian'; /* Project id 4627527 */
src: url('https://at.alicdn.com/t/c/font_4627527_nlw7f5unp38.woff2?t=1721913242959') format('woff2'),
url('https://at.alicdn.com/t/c/font_4627527_nlw7f5unp38.woff?t=1721913242959') format('woff'),
url('https://at.alicdn.com/t/c/font_4627527_nlw7f5unp38.ttf?t=1721913242959') format('truetype');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
}
.menu{ position:fixed;
display: none;
z-index: 1000;
width: 80%;
right: 0;
left: 0;
max-width: 13rem;
height: 390px;
top: .65rem;
left: 50%;
transform: translate(-50%, 0); padding-top: .3rem; }
.menu.hover{ display:block; }
.menu li{ line-height: 40px; padding: .1rem .2rem; font-size: .2rem; }
.menuUl{ position:relative; width: 20%; height:360px; background:#fff; }
.menuUl-1,.menuUl-2,.menuUl-3{ display:none; width:100%; height:360px; position:absolute; background:#fff; left:100%; top:0px; border-left: 1px solid #f1f1f1; }
.menuUl-1{ width: 120%; }
.menuUl-3{ overflow-y:scroll; width:135%; }
.menu_1 div{ text-align: center; display: flex; justify-content: space-between; }
.menu_1 div i{ margin-left:.3rem; }
.menuUl:hover .menu_1:hover .menuUl-1{ display:block; }
.menuUl .menu_1:hover{ background:#d2e0da; }
.menuUl-1 .menu_2:hover{ background:#d2e0da; }
.menuUl-1 .menu_2:hover .menuUl-2{ display:block; }
.menuUl-2 .menu_3:hover{ background:#d2e0da; }
.menuUl-2 .menu_3:hover .menuUl-3{ display:block; }
.menu .course-listing-item { gap: .2rem;}
.menu .course-thumbnail{ width:40%; height: auto; }
.menu .course-top-info{ display:block; }
.menu .course-location-tag,
.menu .course-name{ font-size:.16rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.4; text-align: left; }
.menu .course-subtitle-info{ line-height: 1.4; font-size: .13rem; }
.menu .course-meta-info{ text-align: left; line-height: 1.4; font-size: .13rem; }
.menu .course-original-price,
.menu .course-current-price{ font-size: .14rem; }
.more-kc a{ display:block; font-size: .15rem; text-align: center; }
.menu_4{ border-bottom:1px solid #f1f1f1; padding: 0.1rem 0rem; margin: 0 .2rem; }
.header {
background: #f4f4f4;
padding: 20px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 1000;
}
.header-container {
margin: 0 auto;
width:90%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
gap:.3rem;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex-shrink: 0;
}
.logo-icon {
width:180px;
width:1.8rem;
}
.logo-icon img{ width:100%; display:block; }
.logo-icon svg {
width: 100%;
height: 100%;
}
.logo-text {
font-size: 24px;
font-weight: 600;
color: #2c3e37;
letter-spacing: 2px;
}
/* Search Section */
.search-section {
display: flex;
align-items: center;
gap:55px;
gap:.55rem;
flex: 1;
max-width:970px;
max-width:9.7rem;
}
.search-dropdown {
display: flex;
align-items: center;
gap: 8px;
gap:.08rem;
border-radius: 8px;
border-radius:.08rem;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
font-weight: bold;
height:58px;
}
.search-dropdown:hover{
border-color: #6b9080;
}
.search-dropdown-text {
font-size:25px;
font-size:.25rem;
color: #606060;
font-weight: 600;
}
.dropdown-arrow {
width: 20px;
width:.2rem;
fill: #606060;
transition: transform 0.3s ease;
display: block;
margin-top: 5px;
margin-top:.05rem;
}
.search-dropdown:hover .dropdown-arrow,.search-dropdown.hover .dropdown-arrow{
transform: rotate(180deg);
}
/* Search Bar */
.search-bar {
flex: 1;
position: relative;
}
.search-input-wrapper {
display: flex;
align-items: center;
border: 1px solid #b3b3b3;
border-radius: 10px;
border-radius:.1rem;
padding: 14px;
padding:.14rem;
transition: all 0.3s ease;
}
.search-input-wrapper .ui-textinput{ width:100%; }
.search-input-wrapper:focus-within {
border-color: #6b9080;
box-shadow: 0 0 0 3px rgba(107, 144, 128, 0.1);
}
.search-icon {
width: 27px;
width:.27rem;
fill: #999;
margin-right: 15px;
margin-right:.15rem;
flex-shrink: 0;
}
.search-input {
flex: 1;
border: none;
outline: none;
font-size:24px;
font-size:.24rem;
color: #2c3e37;
background: transparent;
display:block;
}
.search-input::placeholder {
color: #aaa;
}
/* Right Actions */
.header-actions {
display: flex;
align-items: center;
gap:40px;
flex-shrink: 0;
}
.cart-btn {
position: relative;
background: transparent;
border: none;
cursor: pointer;
transition: transform 0.2s ease;
}
.cart-btn svg{ width:.41587rem; height:auto; }
.cart-btn:hover {
transform: scale(1.1);
}
.cart-icon {
width: 28px;
height: 28px;
width:.28rem;
height:.28rem;
fill: #5a6f63;
}
.cart-badge {
position: absolute;
top: 0;
right: 0;
background: #e74c3c;
color: white;
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
}
.auth-link {
font-size: 25px;
font-size:.25rem;
color: #606060;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
cursor:pointer;
transition: color 0.3s ease;
}
.auth-link:hover {
color: #688f7e;
}
.member-link{ font-size: 25px; font-size:.25rem; }
.member-link a{ text-transform: capitalize; }
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
background: transparent;
border: none;
cursor: pointer;
padding: 8px;
}
.mobile-menu-icon {
width: 24px;
height: 24px;
fill: #5a6f63;
}
/* Responsive */
@media (max-width: 968px) {
.header {
padding: 15px 20px;
}
.search-section {
max-width: 500px;
}
.search-dropdown-text {
font-size: 14px;
}
.search-input {
font-size: 14px;
}
.auth-link {
font-size: 15px;
}
}
@media (max-width: 768px) {
.header-container {
flex-wrap: wrap;
}
.search-section {
order: 3;
width: 100%;
max-width: 100%;
margin-top: 15px;
}
.search-dropdown {
padding: 10px 16px;
}
.header-actions {
gap: 20px;
}
}
@media (max-width: 480px) {
.logo-text {
font-size: 20px;
}
.search-dropdown-text {
font-size: 13px;
}
.search-input {
font-size: 13px;
}
.auth-link {
font-size: 14px;
}
.mobile-menu-btn {
display: block;
}
}
.page{ text-align: center; margin-top: 50px; margin-bottom: 50px; font-size:16px; }
.page b,.page a{ background: linear-gradient(to bottom, #ffffff, #f3f3f3);
height:40px;
width:40px;
display: inline-block;
vertical-align: bottom;
line-height:40px;
margin: 0 7px;
border: 1px solid #ededed;
border-radius:50%; font-size: 18px;
font-family: "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif;}
.page b,.page a:hover{ background: #688f7e;
color: #fff;
font-weight: 500; border: 1px solid #688f7e; }
.bottom-a{ transition: all 0.3s ease-in; }
.bottom-a:hover{ margin-left:.1rem; }
.hero-section {
position: relative;
width: 100%;
margin: 0 auto;
background: #688f7e;
/* padding-top:84px;*/
/*margin-bottom:100px;*/
/*padding-top:.84rem;*/
/*margin-bottom:1rem;*/
}
.banner_txt{ margin: 0 auto;
position: absolute;
width: 86%;
left: 7%;
z-index: 22;
color: #4d4d4d;
top: 1rem;
letter-spacing: .05rem;
line-height: 1.3;
font-weight:bold;
font-size: .9rem; }
.content-wrapper {
position: relative;
padding: 0;
background:#fff;
/*background: #f4f4f4;*/
/*border-top-left-radius: 50%;*/
/*border-top-right-radius: 50%;*/
}
/* Decorative flowers */
.flower-decoration {
position: absolute;
z-index: 10;
}
.flower-decoration img{ display:block; width:100%; }
.flower-top-left {
top: 110px;
top:1.1rem;
left: 120px;
left:1.2rem;
width:2.95rem;
}
.flower-top-left img{ width:100%; }
.flower-top-right {
top: 0px;
right: calc(50% + -610px);
right: calc(50% + -6.1rem);
width: 1.95rem;
}
.flower-top-right img{ width:100%; }
.flower-bottom-left {
bottom: 1.5rem;
left: 15%;
width: 1.57rem;
}
.flower-bottom-left img{ width:100%; }
.flower-bottom-right {
top: 345px;
right: 70px;
top: 3.45rem;
right: .70rem;
}
.flower-bottom-right img{ width:100%; }
.flower-svg {
width: 100%;
height: 100%;
opacity: 0.6;
}
.scroll_hint {
position: relative;
margin: 0 auto;
width: 1rem;
height:1.5rem;
margin-top:.5rem;
}
.scroll_hint .ripple {
position: absolute;
height: .2rem;
opacity:1;
font-size: .6vw;
top: 0;
left:35%;
-webkit-animation: scrollFn 2s cubic-bezier(0.56, 0.01, 0.46, 1) infinite;
animation: scrollFn 2s cubic-bezier(0.56, 0.01, 0.46, 1) infinite;
/*animation: scrollFn 2s cubic-bezier(0.56, 0.01, 0.46, 1) infinite alternate;*/
}
.scroll_hint .ripple:nth-of-type(2) {
top: -.4rem;
-webkit-animation-delay: .2s;
animation-delay: .2s
}
.scroll_hint .ripple:nth-of-type(3) {
top: -.8rem;
-webkit-animation-delay: .4s;
animation-delay: .4s
}
@-webkit-keyframes scrollFn {
0% {
-webkit-transform: scale(.1) translate3d(0,-.4rem,0);
transform: scale(.1) translate3d(0,-.4rem,0);
opacity: 0
}
50% {
-webkit-transform: scale(1) translate3d(0,0,0);
transform: scale(1) translateZ(0);
opacity: 1
}
to {
-webkit-transform: scale(1) translate3d(0,0,0);
transform: scale(1) translateZ(0);
opacity: 0
}
}
@keyframes scrollFn {
0% {
-webkit-transform: scale(.3) translate3d(0,-.4rem,0);
transform: scale(.3) translate3d(0,-.4rem,0);
opacity: 0;
transform: translateY(0px);
}
to {
-webkit-transform: scale(1) translate3d(0,0,0);
transform: scale(1) translateZ(0);
opacity: 1;
transform: translateY(1rem);
}
}
.meihua-flower-bottom-right{position: absolute; bottom: 0; right: -.83rem; z-index: 1; width:3.9rem; }
.meihua-flower-bottom-right img{ width:100%; }
/* Header content */
.header-content {
text-align: center;
margin-bottom: 50px;
margin-bottom:.5rem;
position: relative;
z-index: 5;
width:90%;
margin: 0 auto;
padding: 120px 0px;
padding:1.2rem 0rem;
padding-bottom:60px;
padding-bottom:.6rem;
display:none;
}
.header-content.header-content-2{ display:block; }
.ghdzj-bottom-left{ position: absolute;
bottom: 1rem;
width: 4.3rem;
left: 7%;
z-index: 1; }
.ghdzj-bottom-left img{ display:block; width:100%; }
.banner-feature{ position:relative; }
.banner-feature .win{position: relative; z-index: 10; text-align: center; padding: .7rem 0px; padding-bottom:.5rem; }
.banner-feature .miaoshu{ font-size:.3rem; }
.banner-feature img{ display: block;
margin: 0 auto;
margin-top: .5rem; }
.banner-feature:before{ background: url(../images/gezibg.png) #fff;
position: absolute;
content: "";
display: block;
height: 9.4rem;
width: 100%;
bottom: 0;
left: 0;
border-top: 2px solid #efefef;}
.brand-name {
font-size: 18px;
font-size: .18rem;
letter-spacing: 8px;
letter-spacing:.08rem;
color: #5a6f63;
margin-bottom: 15px;
margin-bottom:.15rem;
font-weight: 400;
}
.brand-name img{ display:block; width:220px; width:2.2rem; margin: 0 auto; }
.main-title {
font-size: .5rem;
color: #565250;
font-weight: 700;
letter-spacing: .08rem;
}
.subtitle {
font-size: 30px;
font-size:.3rem;
color: #606060;
line-height: 1.6;
font-weight: 500;
letter-spacing: 3px;
letter-spacing: .03rem;
}
/* Hero image */
.hero-image-wrapper {
position: relative;
width: 80%;
margin-left: 20%;
/* margin: 0 auto; */
/* border-radius: 40px; */
/* border-radius: .4rem; */
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
overflow: hidden;
z-index: 1;
}
.hero-image {
width: 100%;
display: block;
/*height:700px;*/
/*height:7rem;*/
/*aspect-ratio: 16/9;*/
object-fit: cover;
}
/* Leaf decorations on image corners */
.image-decoration {
position: absolute;
z-index: 10;
}
.image-flower-bottom-left {
bottom: 20px;
left: 20px;
width: 100px;
height: 100px;
}
.image-flower-bottom-right {
bottom: -170px;
right: 250px;
bottom: -1.7rem;
right: 2.50rem;
width:2.67rem;
}
.image-flower-bottom-right img{ width:100%; }
/* Responsive design */
@media (max-width: 768px) {
.content-wrapper {
padding: 60px 30px 40px;
border-radius: 40% 40% 0 0 / 25% 25% 0 0;
}
.brand-name {
font-size: 14px;
letter-spacing: 4px;
}
.main-title {
font-size: 36px;
letter-spacing: 2px;
}
.subtitle {
font-size: 15px;
letter-spacing: 1px;
}
.flower-decoration {
transform: scale(0.7);
}
.flower-top-left {
top: 20px;
left: 20px;
}
.flower-top-right {
top: 20px;
right: 20px;
}
.flower-bottom-left {
bottom: 30px;
left: 20px;
}
.flower-bottom-right {
bottom: 30px;
right: 20px;
}
.hero-image-wrapper {
border-radius: 25px;
}
.image-decoration {
transform: scale(0.6);
}
}
@media (max-width: 480px) {
.main-title {
font-size: 28px;
}
.subtitle {
font-size: 14px;
}
.flower-decoration {
transform: scale(0.5);
}
}
.container {
max-width:90%;
margin: 0 auto;
}
.container.container-kc{
max-width: 100%;
margin: 0 auto;
padding: 0 5%;
border-bottom-left-radius: 40%;
border-bottom-right-radius: 40%;
background: #f1f1f1;
padding-bottom: 2rem;
}
.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-subtitle {
color: #6b9080;
letter-spacing: 4px;
letter-spacing:.04rem;
text-transform: uppercase;
margin-bottom:20px;
font-size: 24px;
margin-bottom:.2rem;
font-size:.24rem;
font-weight: 900;
font-family:"思源黑体 CN";
}
.section-title {
font-size:.5rem;
color: #565250;
letter-spacing:8px;
letter-spacing:.08rem;
font-weight: bold;
}
.carousel-wrapper {
position: relative;
padding: 20px 0 60px;
padding: .2rem 0 .6rem;
}
.swiper {
width: 100%;
padding: 20px 0px 80px;
padding: .2rem 0 .8rem;
}
.swiper-slide {
height: auto;
}
.course-card {
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
height: 100%;
}
.course-card:hover {
transform: translateY(-10px);
}
.card-image {
position: relative;
overflow: hidden;
}
.card-image img {
width: 100%;
height: auto;
display: block;
}
.card-image img.card-image-show{ border-radius:25px; border-radius:.25rem; }
.card-content {
position: absolute;
left: 0;
right: 0;
padding: 0 .4rem;
color: #000;
letter-spacing: .05rem;
font-size: 16px;
top: 50%;
transform: translateY(-50%);
}
.location {
font-size:1.5vw;
margin-bottom:0px;
font-weight: bold;
font-family:"思源黑体 CN";
}
.course-title {
font-size:1.5vw;
font-weight: 700;
margin-bottom:8px;
line-height: 1.3;
}
.instructor {
font-size: 1.3vw;
margin-bottom:.4rem;
letter-spacing: 0px;
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
position: relative;
}
.tag {
padding: 6px 20px;
border-radius: 45px;
padding: .06rem .2rem;
border-radius: .45rem;
font-size: 1.1vw;
font-weight: bold;
}
.tag-blue {
background: #81b5d6;
color: #000;
}
.tag-pink{ background:#d9a4b1; }
.tag-orange {
background: #e3bb90;
color:#000;
}
.action-buttons {
display: flex;
gap:.05rem;
position: absolute;
bottom: 0;
right: 0px;
padding: 0px;
padding-right: 0px;
padding-bottom: 0;
border-radius:.2rem;
z-index: 1;
width: 2rem;
}
.action-buttons::before{
content: "";
display: block;
background: url(../images/kcbg.png) no-repeat;
background-size: 100%;
width: 162px;
height: 62px;
bottom: -9px;
right: 0;
position: absolute;
z-index: -1;
display:none;
}
.btn {
padding: 0rem .2rem;
border: none;
border-radius:.25rem;
font-size: .2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap:.08rem;
height: .45rem;
}
.btn-read {
background: #333333;
color: white;
position: absolute;
bottom: .01rem;
right: .5rem;
letter-spacing:.02rem;
}
.btn-read:hover {
background: #1a252f;
}
.btn-icon {
width: .45rem;
height: .45rem;
border-radius: 50%;
background: #333333;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
position: absolute;
bottom: 0rem;
right: 0px;
}
.btn-icon svg{ width: 16px; height: 16px; width:.16rem; height:.16rem; }
.btn-icon svg polyline{ stroke-width: 48px; stroke-width: .58rem; }
.btn-icon:hover {
background: #1a252f;
transform: rotate(45deg);
}
.swiper-pagination {
bottom: 20px !important; font-size:16px;
}
.swiper-pagination-bullet {
width:20px;
width:.2rem;
height: 20px;
height:.2rem;
background: none;
border: 1px solid #688f7e;
border: .01rem solid #688f7e;
opacity: 1;
margin: 0 6px !important;
margin: 0 .06px !important;
transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
background: #688f7e;
border-radius:20px;
border-radius:.2rem;
}
@media (max-width: 768px) {
.section-title {
font-size: 36px;
font-size:.36rem;
}
.course-title {
font-size: 24px;
font-size:.24rem;
}
.card-image {
height: 280px;
}
}
.container-ts{ background:#fff; padding:80px 0px; padding:.8rem 0; display:none; }
.ts-img{ margin-top:50px; }
.ts-img img{width: 100%;
max-width: 1474px; max-width:14.74rem;
display: block;
margin: 0 auto; }
.service-section {
position: relative;
margin: 0 auto;
padding: 1rem 0;
padding-bottom:0;
margin-top: -1.5rem;
}
.bg_svg{ position:absolute; top:70px; width:94%; left:3%; z-index:1; }
.bg_svg.bg_svg_two{ top: 0px; width: 92%; left:4%; }
.bg_svg img{ display: block; width:100%; }
.background-shape {
position: relative;
border-radius: 50% 50% 0 0 / 30% 30% 0 0;
overflow: visible;
z-index:5;
}
/* Decorative circle */
.decorative-circle {
position: absolute;
top: 1rem;
right: 2%;
width: 1.4rem;
}
.decorative-circle svg{ width:100%; height:auto; }
/* Header */
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-subtitle {
}
/* Cards Grid */
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:.6rem;
width:73%;
margin: 0 auto;
margin-top:.7rem;
}
.service-card {
background: #ffffff;
background: url(../images/bg1.jpg);
border-radius: 20px;
border-radius:.2rem;
padding: 40px 30px;
padding:.4rem .3rem;
box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
box-shadow: .05rem .05rem .1rem rgb(0 0 0 / 20%);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 25px solid;
border-left: .25rem solid;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
transform: translateY(-.1rem);
box-shadow: 0 .2rem .6rem rgba(0, 0, 0, 0.12);
}
.service-card:nth-child(1), .service-card:nth-child(2), .service-card:nth-child(3){
transform: translateX(-.5rem);
}
.service-card:nth-child(4), .service-card:nth-child(5), .service-card:nth-child(6){
transform: translateX(.5rem);
}
/* Card border colors */
.card-pink {
border-left-color: #d9a4b1;
}
.card-green {
border-left-color: #719c8b;
}
.card-purple {
border-left-color: #a790e0;
}
.card-blue {
border-left-color: #81b5d6;
}
.card-orange {
border-left-color: #e3bb90;
}
.card-yellow {
border-left-color: #e4d78e;
}
/* Card icon */
.card-icon {
width: 65px;
width:.65rem;
height: 65px;
height:.65rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
margin-bottom:.25rem;
}
.card-icon svg{ width:80%; margin:0 auto; }
.card-pink .card-icon {
background: #d9a4b1;
}
.card-green .card-icon {
background: #719c8b;
}
.card-purple .card-icon {
background: #a790e0;
}
.card-blue .card-icon {
background: #81b5d6;
}
.card-orange .card-icon {
background: #e3bb90;
}
.card-yellow .card-icon {
background: #e4d78e;
}
.icon-svg {
width: 32px;
height: 32px;
}
/* Card content */
.card-title {
font-size:.3rem;
color: #606060;
margin-bottom: 20px;
margin-bottom:.2rem;
font-weight: bold;
letter-spacing: 2px;
letter-spacing:.02rem;
line-height: 1.5;
}
.card-divider {
display: flex;
gap: 4px;
gap:.04rem;
margin-bottom: 20px;
margin-bottom:.2rem;
background: url(../images/dianbg.png);
height: 9px;
height:.09rem;
background-size: 35px;
background-size:.35rem;
opacity: 0.3;
}
.card-description {
font-size:.2rem;
color: #808080;
line-height: 1.6;
}
/* Responsive */
@media (max-width: 1024px) {
.cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.decorative-circle {
width: 120px;
height: 120px;
right: 30px;
}
}
@media (max-width: 768px) {
.background-shape {
padding: 60px 30px 80px;
border-radius: 40% 40% 0 0 / 25% 25% 0 0;
}
.section-title {
font-size: 36px;
letter-spacing: 4px;
}
.cards-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.decorative-circle {
width: 100px;
height: 100px;
border-width: 10px;
}
}
@media (max-width: 480px) {
.section-title {
font-size: 28px;
}
.service-card {
padding: 30px 25px;
}
.card-title {
font-size: 20px;
}
}
.popular-section {
position: relative;
margin: 0 auto;
}
.oval-background {
position: relative;
padding: 3.5rem 0rem;
overflow: visible;
aspect-ratio: 1.3 / 1;
align-items: center;
width: 90%;
margin: 0 auto;
justify-content: center;
z-index: 5;
padding-bottom: 4rem;
}
/* Decorative flowers */
.flower-decoration {
position: absolute;
z-index: 10;
}
.flower-left {
bottom: 4.9rem;
left: -.70rem;
width: 1.77rem;
}
.flower-left svg{ width:100%; height:auto; display:block; }
.flower-right {
top: 3.5rem;
right: 0rem;
width: 1.4rem;
}
.flower-right svg{ width:100%; height:auto; display:block; }
.flower-svg {
width: 100%;
height: 100%;
}
.flower-vertical{ bottom: .6rem; right: -.45rem; }
/* Vertical title */
.vertical-title {
position: absolute;
top: .8rem;
right: .2rem;
writing-mode: vertical-rl;
text-orientation: upright;
font-size: .5rem;
color: #565250;
letter-spacing: .08rem;
z-index: 5;
font-weight: bold;
}
.vertical-dotted-line {
position: absolute;
right: 0px;
z-index: 5;
width: 3px;
width:.03rem;
height: 310px;
height:3.1rem;
background-image: linear-gradient(to bottom, #565250 40%, transparent 40%);
background-size: 3px 10px;
top: 50px;
background-size: .03rem .1rem;
top: .5rem;
opacity: 0.5;
}
/* Header */
.section-header {
text-align: center;
margin-bottom:0px;
position: relative;
z-index: 5;
}
.popular-section .section-subtitle {
color: #ffffff;
position: absolute;
right: 2.3rem;
top: -.2rem;
}
/* Courses Container */
.courses-container {
position: relative;
margin: 0 auto;
width:85%;
}
.courses-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap:.9rem 0rem;
align-items: center;
}
.kczl-bottom-left{ width: 4.7rem; position: absolute; left:70%; }
.kczl-bottom-left svg{ display: block; width: 100%; height: auto; }
.kczl-bottom-left a svg ellipse{ transition: all 0.3s ease-in; }
.kczl-bottom-left a:hover svg ellipse{ stroke-width:5; }
/* Course Item */
.course-item {
display: flex;
align-items: center;
gap: 25px;
gap: .25rem;
position: relative;
padding-left:1rem;
}
.course-item:nth-child(2),.course-item:nth-child(4){ top: 130px; top: 1.3rem; }
.rank-number {
font-size: 160px;
font-size: 1.6rem;
font-weight: 700;
color: transparent;
-webkit-text-stroke: 1px rgba(231, 235, 122);
line-height: 1;
flex-shrink: 0;
width: 100px;
width: 1rem;
position: absolute;
left: 30px;
left: .3rem;
font-style: italic;
bottom: -6px;
bottom: -.06rem;
}
.course-card-1 {
display: flex;
gap: 20px;
gap: .2rem;
flex: 1;
align-items: center;
}
.course-image {
border-radius: 12px;
border-radius: .12rem;
overflow: hidden;
flex-shrink: 0;
}
.course-image img {
width: 290px;
width: 2.9rem;
height: 100%;
display: block;
object-fit: cover;
}
.course-info {
flex: 1;
}
.course-location {
color: #f2f0e9;
font-size: .35rem;
margin-bottom: .1rem;
font-weight: bold;
line-height: 1;
}
.popular-section .course-title {
font-size: .35rem;
color: #e7eb7a;
font-weight: 600;
line-height: 1;
margin-bottom: .1rem;
letter-spacing: .02rem;
}
.course-instructor {
color: #f2f0e9;
font-weight: 300;
line-height: 1;
font-size: .3rem;
margin-bottom: .1rem;
}
.course-pricing {
display: flex;
align-items: center;
line-height: 1;
gap: .15rem;
justify-content: space-between;
}
.course-price {
font-size: .35rem;
color: #1f2b26;
font-weight: 700;
}
.popular-section .course-original-price{ font-size: 26px; font-size: .26rem; color: #f2f0e9; }
.course-original-price {
font-size: 35px; font-size: .35rem; color: #858585;
text-decoration: line-through;
}
/* Responsive */
@media (max-width: 1024px) {
.oval-background {
padding: 80px 60px;
padding: .8rem .6rem;
}
.courses-grid {
gap: 60px 80px;
gap: .6rem .8rem;
}
.rank-number {
font-size: 100px;
width: 80px;
}
.course-image {
width: 120px;
height: 170px;
}
.vertical-title {
font-size: 36px;
right: 10px;
}
.vertical-dotted-line {
right: 70px;
}
}
@media (max-width: 768px) {
.oval-background {
border-radius: 40px;
padding: 60px 40px;
}
.courses-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.rank-number {
font-size: 80px;
width: 70px;
}
.course-title {
font-size: 24px;
}
.course-price {
font-size: 20px;
}
.vertical-title {
position: static;
writing-mode: horizontal-tb;
text-orientation: mixed;
text-align: center;
margin-bottom: 30px;
font-size: 32px;
}
.vertical-dotted-line {
display: none;
}
.flower-left,
.flower-right {
transform: scale(0.7);
}
}
@media (max-width: 480px) {
.oval-background {
padding: 40px 25px;
}
.course-item {
flex-direction: column;
align-items: flex-start;
}
.rank-number {
font-size: 60px;
width: auto;
position: absolute;
top: -10px;
left: 0;
}
.course-card-1 {
flex-direction: column;
align-items: flex-start;
padding-top: 50px;
}
.course-image {
width: 100%;
height: 220px;
}
.course-title {
font-size: 22px;
}
}
.staff-section {
position: relative;
height:800px;
height:8rem;
display: flex;
align-items: center;
padding: 0;
margin-top:.5rem;
}
.staff-section:before{ content:""; display:block; width:100%; height:100%; Background:#f1f1f1; position:absolute; bottom:-.5rem; }
/* Background Shape */
.background-shape-pe {
position: absolute;
top: 0;
left: 0;
width: 85%;
right: 0;
height: 100%;
background: #d2e0da;
border-radius: 0 300px 300px 0;
border-radius: 0 3rem 3rem 0;
z-index: 0;
}
.container-pe {
position: relative;
width:90%;
margin: 0 auto;
padding: 0;
display: flex;
align-items: center;
z-index: 1;
}
/* Left Title Section */
.staff-section .title-section-pe {
flex-shrink: 0;
margin-right:90px;
margin-right:.9rem;
display: flex;
gap:40px;
gap:.4rem;
position:relative; padding-left:.8rem;
}
.title-section-pe .vertical-title {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: .5rem;
font-weight: 700;
color: #565250;
line-height: 1;
position: relative;
top: 0;
right: 0px;
}
.title-section-pe .vertical-dotted-line {
width: .03rem;
height:4rem;
background-image: linear-gradient(to bottom, #565250 40%, transparent 40%);
background-size: 3px 10px;
background-size: .03rem .08rem;
position:relative;
top: 0px; opacity:0.5;
}
.subtitle-wrapper {
text-orientation: mixed;
right: 0px;
bottom: 0px;
width: 160px;
width: 1.6rem;
position: absolute;
color: #6b9080;
letter-spacing: 4px;
letter-spacing: .04rem;
text-transform: uppercase;
font-size: 24px;
font-size: .24rem;
font-weight: bold;
font-family: Source Han Sans Heavy;
}
.staff-section .section-subtitle {
font-size: 16px;
letter-spacing: 3px;
font-size: .16rem;
letter-spacing:.03rem;
color: #7a9d8e;
font-weight: 400;
}
/* Right Carousel Section */
.pelist{ position: relative;
min-height: 600px;
min-height: 6rem;
display: flex;
align-items: center;
overflow: hidden; }
.carousel-section {
flex: 1;
position: relative;
min-height: 600px;
min-height: 6rem;
display: flex;
align-items: center;
overflow: hidden;
padding-right: 78px;
padding-right: .78rem;
}
.staffSwiper {
width: 100%;
height: 100%;
overflow: visible !important;
padding: 0;
}
.staffSwiper .swiper-wrapper {
align-items: center;
}
.staffSwiper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
/* Staff Card */
.staff-card {
position: relative;
width:auto;
height: 570px;
height: 5.7rem;
background: #e8e8e8;
border-radius: 170px;
border-radius: 1.7rem;
overflow: hidden;
border: 10px solid #ffffff;
border: .1rem solid #ffffff;
transition: all 0.3s ease;
}
.staff-card:hover {
transform: translateY(-8px);
transform: translateY(-.08rem);
}
.staff-image {
width: 100%;
object-fit: cover;
object-position: center;
background: #d5d5d5;
}
.staff-tag {
position: absolute;
bottom: 35px;
bottom: .35rem;
left: 50%;
transform: translateX(-50%);
color: #4d4d4e;
white-space: nowrap;
padding: 5px 20px;
border-radius: 25px;
font-size: 21px;
letter-spacing: 2px;
font-weight: bold;
padding: .05rem .2rem;
border-radius: .25rem;
font-size: .21rem;
letter-spacing: .02rem;
}
/* Navigation Arrow */
.swiper-button-next {
position: absolute;
right: -90px;
right: -.9rem;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
width: .6rem;
height: .6rem;
background: transparent;
border: none;
cursor: pointer;
z-index: 10;
}
.swiper-horizontal::after{ content: "";
display: block;
background-color: #f1f1f1;
width: 100px;
width: 1rem;
position: absolute;
height: 100%;
top: 0px;
right: -110px;
right: -1.1rem;
z-index: 5; }
.swiper-button-next::after {
content: '';
display: block;
width: 100%;
height: 100%;
background: url("../images/right-jt.png") center no-repeat;
background-size:16px;
background-size:.16rem;
transition: opacity 0.3s;
}
.swiper-button-next:hover::after {
opacity: 1;
}
.swiper-button-prev {
display: none;
}
/* Bottom Info */
.bottom-info {
position: absolute;
bottom:0px;
right:5%;
display: flex;
align-items: center;
gap: 20px;
gap: .2rem;
z-index: 10;
}
.total-count a {
font-size: .35rem;
color: #000000;
font-weight: 600;
letter-spacing: .05rem;
display: flex;
align-items: center;
column-gap: .4rem; transition: all 0.3s ease;
}
.total-count a svg{ transition: all 0.3s ease; }
.total-count a:hover {column-gap: .2rem;}
.total-count a:hover svg { transform: rotate(45deg); }
.count-badge {
width: 75px;
height: 75px;
width: .75rem;
height: .75rem;
border-radius: 50%;
border: 3px dotted #565250;
border: .03rem dotted #565250;
display: flex;
align-items: center;
justify-content: center;
font-size: 38px;
font-size: .38rem;
font-weight: 700;
color: #2c3e37;
background: #f5f5f5;
}
.count-badge svg{ height: 26px; width: 26px; height: .26rem; width: .26rem; }
.count-badge svg polyline{ stroke: #565250; stroke-width: 100px; stroke-width: 1rem; }
/* Responsive */
@media (max-width: 1400px) {
.staffSwiper {
padding: 0 80px;
padding: 0 .8rem;
}
.staffSwiper .swiper-slide {
width: 340px !important;
width: 3.4rem !important;
}
.staff-card {
width: 340px;
height: 470px;
width: 3.4rem;
height: 4.7rem;
}
}
@media (max-width: 1200px) {
.container-pe {
padding: 0 40px;
}
.vertical-title {
font-size: 56px;
letter-spacing: 12px;
}
.title-section-pe {
margin-right: 40px;
}
}
@media (max-width: 968px) {
.staff-section {
min-height: auto;
padding: 80px 0;
}
.container-pe {
flex-direction: column;
padding: 0 30px;
}
.title-section-pe {
width: 100%;
justify-content: center;
margin-right: 0;
margin-bottom: 50px;
}
.vertical-title {
writing-mode: horizontal-tb;
text-orientation: mixed;
font-size: 48px;
letter-spacing: 8px;
}
.vertical-dotted-line {
width: 200px;
height: 3px;
background-image: linear-gradient(to right, #7a9d8e 40%, transparent 40%);
background-size: 10px 3px;
}
.subtitle-wrapper {
writing-mode: horizontal-tb;
}
.background-shape-pe {
top: 10%;
height: 80%;
border-radius: 0 150px 150px 0;
}
.carousel-section {
min-height: 550px;
width: 100%;
}
.staffSwiper {
padding: 0 60px;
}
.bottom-info {
bottom: -50px;
right: 50%;
transform: translateX(50%);
}
}
@media (max-width: 640px) {
.staffSwiper {
padding: 0 40px;
}
.staffSwiper .swiper-slide {
width: 300px !important;
}
.staff-card {
width: 300px;
height: 420px;
border-radius: 150px 150px 30px 30px;
border: 8px solid #ffffff;
}
.staff-tag {
font-size: 14px;
padding: 10px 28px;
bottom: 28px;
}
.vertical-title {
font-size: 36px;
letter-spacing: 6px;
}
.count-badge {
width: 65px;
height: 65px;
font-size: 32px;
}
.total-count {
font-size: 18px;
}
.swiper-button-next {
width: 50px;
height: 50px;
}
.swiper-button-next::after {
background-size: 30px;
}
}
.news-section {
width: 100%;
padding: 1rem 5%;
padding-bottom: .6rem;
margin: 0 auto;
background: #f1f1f1;
}
/* Header */
.news-header {
margin-bottom:10px;
margin-bottom:.1rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.news-heading-wrapper {
flex: 1;
text-align:center;
}
.news-label {
color: #6b9080;
letter-spacing: 4px;
letter-spacing: .04rem;
text-transform: uppercase;
margin-bottom:.45rem;
font-size: .24rem;
font-weight: bold;
color: #6b9080;
letter-spacing: .04rem;
text-transform: uppercase;
margin-bottom: .45rem;
font-size: .24rem;
font-weight: 900;
font-family: "思源黑体 CN";
}
.news-main-title {
font-size: .5rem;
font-weight: 700;
color: #565250;
line-height: 1;
letter-spacing:.08rem;
position: relative;
top: 0;
right: 0px;
}
.news-view-all {
display: flex;
align-items: center;
gap:.2rem;
text-decoration: none;
transition: transform 0.3s ease;
display:none;
}
.news-view-all:hover {
transform: translateX(.05rem);
}
.news-view-text {
color: #7a9d8e;
font-size: .35rem;
font-weight: 600;
letter-spacing:.05rem;
}
.news-count-circle {
width: .75rem;
height: .75rem;
border-radius: 50%;
border: .03rem dotted #7a9d8e;
display: flex;
align-items: center;
justify-content: center;
font-size: .38rem;
font-weight: 700;
color: #7a9d8e;
background: #f5f5f5;
}
.news-count-circle svg{ height: .26rem; width: .26rem; }
.news-count-circle svg polyline{ stroke: #7a9d8e; stroke-width: 1rem; }
/* Swiper Container */
.news-swiper-container {
position: relative;
overflow: hidden;
padding: .2rem 0 .8rem;
padding-bottom:0px;
}
.newsSwiper {
overflow: visible;
}
.newsSwiper .swiper-wrapper {
align-items: stretch;
}
.newsSwiper .swiper-slide {
height: auto;
}
/* Article Cards */
.article-card {
background: #f4e8a0;
border-radius: .3rem;
padding: .3rem .3rem;
height: 100%;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 .1rem .4rem rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.article-card:hover {
transform: translateY(-.08rem);
box-shadow: 0 .2rem .6rem rgba(0, 0, 0, 0.12);
}
.article-card-yellow {
background: linear-gradient(135deg, #f4e8a0 0%, #f0e396 100%);
}
.article-card-purple {
background: linear-gradient(135deg, #d8d0e8 0%, #cfc5e0 100%);
}
.article-card-orange {
background: linear-gradient(135deg, #f4d5a0 0%, #f0ca96 100%);
}
/* Background Image (subtle) */
.article-bg-image {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0.08;
background-size: cover;
background-position: center;
pointer-events: none;
}
.article-content{ margin-bottom: .35rem; }
.article-content-wrapper {
position: relative;
z-index: 1;
}
.article-title {
color: #000000;
line-height: 1.5;
font-size: .25rem;
margin-bottom: .1rem;
font-weight: bold;
padding: 0 8%;
padding-bottom: .1rem;
border-bottom: .01rem solid #000;
}
.article-excerpt {
font-size: .2rem;
color: #000000;
line-height: 1.5;
margin-bottom: .15rem;
min-height: 1.5rem;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-footer {
display: flex;
align-items: center;
gap: .15rem;
position: relative;
z-index: 1;
justify-content: flex-end;
}
.article-read-btn {
background: #333333;
color: white;
position: absolute;
bottom: .01rem;
right: .5rem;
letter-spacing: .02rem;
padding: 0rem .2rem;
border: none;
border-radius: .25rem;
font-size: .2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: .08rem;
height: .45rem;
}
.article-footer a{ display: flex; column-gap: .1rem; }
.article-footer a:hover .article-read-btn {
background: #1a252f;
transform: translateX(.03rem);
}
.article-arrow-btn {
width: .45rem;
height: .45rem;
background: #333333;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.article-arrow-btn svg{ width:.16rem; height:.16rem; }
.article-arrow-btn svg polyline {
stroke-width: .48rem;
}
.article-footer a:hover .article-arrow-btn {
background: #1a252f;
transform: rotate(45deg);
}
.article-arrow-icon {
width: .2rem;
height: .2rem;
fill: #ffffff;
}
/* Pagination Dots */
.swiper-pagination {
bottom:0px !important;
}
.swiper-pagination-bullet {
opacity: 1;
margin: 0 .1rem !important;
transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
background: #688f7e;
}
/* Responsive */
@media (max-width: 1024px) {
.news-main-title {
font-size: .48rem;
letter-spacing: .04rem;
}
.article-card {
padding: .4rem .35rem;
}
}
@media (max-width: 768px) {
.news-header {
flex-direction: column;
align-items: flex-start;
gap: 25px;
}
.news-main-title {
font-size: 40px;
letter-spacing: 3px;
}
.article-card {
padding: 35px 30px;
}
.article-title {
font-size: 20px;
}
.article-excerpt {
font-size: 14px;
}
}
@media (max-width: 480px) {
.news-main-title {
font-size: 32px;
letter-spacing: 2px;
}
.article-card {
padding: 30px 25px;
}
.article-title {
font-size: 18px;
}
.article-read-btn {
padding: 12px 28px;
font-size: 14px;
}
.article-arrow-btn {
width: 45px;
height: 45px;
}
.news-count-circle {
width: 55px;
height: 55px;
font-size: 28px;
}
}
/* Testimonials Section */
.testimonials-section {
padding: 1rem 0rem;
background: #fff;
}
.testimonials-container {
width:90%;
margin: 0 auto;
position:relative;
}
/* Testimonials Header */
.testimonials-heading {
text-align: center;
margin-bottom: .6rem;
}
.testimonials-tag {
color: #6b9080;
letter-spacing: .04rem;
text-transform: uppercase;
margin-bottom:.45rem;
font-size: .24rem;
font-weight: bold;
}
.testimonials-title {
font-size: .68rem;
font-weight: 700;
color: #565250;
line-height: 1;
letter-spacing: .08rem;
position: relative;
top: 0;
right: 0px;
}
.flower-bottom-right-3{ top: .8rem;
right: 0;
width: 1.8rem;
z-index: 5; }
/* Testimonials Grid */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:.4rem;
margin: 0 auto;
margin-bottom:0px;
width: calc(100% - 1rem);
position:relative;
z-index:10;
}
/* Testimonial Card */
.testimonial-item {
padding-bottom: 0px;
transition: all 0.3s ease;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
perspective: 1000px;
-webkit-perspective: 1000px;
position: relative;
cursor: pointer;
}
.testimonial-item .txt-1{ transition: transform .7s cubic-bezier(.4, .2, .2, 1);
-webkit-transition: transform .7s cubic-bezier(.4, .2, .2, 1);
-ms-transform: rotateY(0);
-webkit-transform: rotateY(0);
transform: rotateY(0);
background: #f1f1f1;
border-radius: .25rem;
padding: .35rem .35rem;
padding-bottom: 0; }
.testimonial-item:hover .txt-1 {
-ms-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.testimonial-item:hover .txt-2 {
-ms-transform: rotateY(0);
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.testimonial-item .txt-2{ -webkit-backface-visibility: hidden;
box-sizing: border-box;
backface-visibility: hidden;
transition: transform .7s cubic-bezier(.4, .2, .2, 1);
-webkit-transition: transform .7s cubic-bezier(.4, .2, .2, 1);
top: 0px;
display: block;
position: absolute;
height: 100%;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
background: #f1f1f1;
border-radius: .25rem;
padding: .35rem .35rem;
padding-bottom: 0; }
.testimonial-item:nth-child(1),.testimonial-item:nth-child(2),.testimonial-item:nth-child(3){ transform: translateX(-.5rem); }
.testimonial-item:nth-child(4),.testimonial-item:nth-child(5),.testimonial-item:nth-child(6){ transform: translateX(.5rem); }
.testimonial-item:hover {
}
.testimonial-text {
margin-bottom: .25rem;
font-size: .20rem;
color: #000000;
line-height: 1.8;
}
.testimonial-author {
display: flex;
align-items: center;
gap:.50rem;
}
.author-avatar {
overflow: hidden;
flex-shrink: 0;
}
.author-avatar img {
width: 100%;
height: 100%;
max-width: .8rem;
object-fit: cover; display: block;
}
.author-info {
flex: 1;
}
.author-name {
font-size: .25rem;
color: #6b9080;
font-weight: bold;
margin-bottom:.1rem;
}
.author-name span{ font-size: .18rem;
font-weight: 500;
margin-left: .1rem; color:#000; }
.author-meta {
font-size: .19rem;
color: #b7b7b7; font-weight:bold;
}
.author-label {
color: #b7b7b7;
margin-right: .05rem;
}
.author-course {
color: #000;
}
/* Footer Section */
.footer-section {
background: #f4f4f4;
padding: 1rem 0rem;
border-top: .01rem solid #3a3a3a;
}
.footer-container {
width:90%;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr .5fr 1fr;
gap: .8rem;
}
/* Footer Brand Column */
.footer-brand-column {
display: flex;
flex-direction: column;
gap: .25rem;
}
.footer-logo-wrapper {
display: flex;
flex-direction: column;
gap: .12rem;
}
.footer-brand-name {
font-size: .22rem;
color: #2c3e37;
font-weight: 600;
letter-spacing: .03rem;
}
.footer-brand-name img{ display: block; width:1.9rem; }
.footer-brand-subtitle {
font-size: .5rem;
color: #4d4d4d;
font-weight:800;
letter-spacing: .04rem;
}
.footer-description {
display: flex;
flex-direction: column;
gap: .2rem;
}
.copyright{ font-size: .13rem;
color: #333333; }
.footer-desc-item {
font-size:.25rem;
color: #66625d;
letter-spacing: .01rem; line-height: 1.7;
}
/* Footer Links Columns */
.footer-links-column {
display: flex;
flex-direction: column;
}
.footer-column-title {
font-size:.25rem;
color: #6b9080;
font-weight:bold;
margin-bottom:.2rem;
letter-spacing: .02rem;
}
.footer-links-list {
display: flex;
flex-direction: column;
gap:.2rem;
list-style: none;
}
.footer-links-list .footer-link-item{ font-size: initial;}
.footer-link-item a {
font-size:.22rem;
color: #000;
text-decoration: none;
transition: all 0.3s ease;
letter-spacing: .01rem;
display: inline-block;
}
.footer-link-item a:hover {
color: #2c3e37;
transform: translateX(.05rem);
}
/* Responsive */
@media (max-width: 1024px) {
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-container {
grid-template-columns: 1fr 1fr;
gap: .6rem;
}
.footer-brand-column {
grid-column: 1 / -1;
}
.testimonials-title {
font-size: 48px;
}
}
@media (max-width: 768px) {
.testimonials-section {
padding: 60px 20px 80px;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.testimonials-title {
font-size: 40px;
letter-spacing: 4px;
}
.footer-container {
grid-template-columns: 1fr;
gap: 50px;
}
.footer-brand-column {
grid-column: 1;
}
.footer-section {
padding: 60px 20px 50px;
}
}
@media (max-width: 480px) {
.testimonials-title {
font-size: 32px;
letter-spacing: 3px;
}
.testimonial-item {
padding: 30px 25px;
}
.testimonial-text {
font-size: 14px;
}
.author-name {
font-size: 16px;
}
.footer-brand-subtitle {
font-size: 24px;
letter-spacing: 3px;
}
}
.listing-main{ width: 100%; padding:0 0; background: #688f7e; }
.listing-page {
display: flex;
min-height:100vh;
width:90%;
margin: 0 auto;
gap: .4rem;
}
/* Sidebar Filters */
.filters-sidebar {
width: 3.9rem;
background: #ffffff;
padding: .4rem .3rem;
padding-bottom:.6rem;
flex-shrink: 0;
height: fit-content;
}
.filter-group {
margin-bottom:.18rem; font-size:16px;
}
.filter-heading {
font-size: .24rem;
color: #333333;
font-weight:500;
margin-bottom:.08rem;
letter-spacing:.01rem;
}
.filter-input-box {
width: 100%;
padding: .15rem .15rem;
border: none;
border-radius:.05rem;
font-size:.18rem;
color: #333333;
background: #f4f4f4;
transition: all 0.3s ease;
}
.filter-select-box {
width: 100%;
padding: .15rem .15rem;
border: none;
border-radius: .05rem;
font-size: .18rem;
color: #545454;
background: #f4f4f4;
transition: all 0.3s ease;
font-family: "Source Han Sans SC", "Microsoft YaHei", Arial, Helvetica, sans-serif;
}
.filter-input-box:focus {
outline: none;
border-color: #7a9d8e;
}
.filter-input-box::placeholder {
color: #aaa;
}
.search-product{ background: #688f7e;
text-align: center;
cursor: pointer;
border-radius:1.07rem;
padding: .1rem 0rem; margin-top:.3rem; font-size:16px}
.search-product svg{ margin:0; }
.search-product svg path{ fill:#fff; }
/* Price Range Filter */
.price-range-wrapper {
margin-bottom:.15rem;
}
.price-range-label {
font-size: .2rem;
color: #688f7e;
margin-bottom: .25rem;
display: block;
font-weight: 700;
}
.price-chart {
margin-bottom:.2rem;
height:.8rem;
display: flex;
align-items: flex-end;
gap:.03rem;
padding: 0 .05rem;
}
.price-bar {
flex: 1;
background: #d0d9d4;
border-radius: .03rem .03rem 0 0;
transition: background 0.3s ease;
}
.price-bar:hover {
background: #7a9d8e;
}
.price-slider-container {
position: relative;
padding: .15rem 0;
}
.price-range-slider {
width: 100%;
height:.06rem;
background: #d0d9d4;
border-radius:.03rem;
outline: none;
-webkit-appearance: none;
}
.price-range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width:.2rem;
height: .2rem;
background: #7a9d8e;
border-radius: 50%;
cursor: pointer;
border: .03rem solid #ffffff;
box-shadow: 0 .02rem .08rem rgba(0, 0, 0, 0.2);
}
.price-range-slider::-moz-range-thumb {
width: .2rem;
height: .2rem;
background: #7a9d8e;
border-radius: 50%;
cursor: pointer;
border: .03rem solid #ffffff;
box-shadow: 0 .02rem .08rem rgba(0, 0, 0, 0.2);
}
/* Checkboxes */
.checkbox-group {
display: flex;
gap: .25rem;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: .1rem;
}
.radio-input {
width: .2rem;
height: .2rem;
cursor: pointer;
accent-color: cadetblue;
}
.radio-label {
font-size:.24rem;
color: #333333;
cursor: pointer;
user-select: none;
font-weight:600;
}
/* Main Content Area */
.courses-main-area {
flex: 1;
padding:.4rem;
overflow-y: auto;
background:#fff;
}
.courses-list-container {
max-width: 12rem;
margin: 0 auto;
}
.courses-list-container:hover .course-listing-item{ opacity:0.7; }
/* Course Item */
.course-listing-item {
background: #ffffff;
margin-bottom:0px;
display: flex;
gap: .3rem;
transition: all 0.3s ease; cursor:pointer;
}
.courses-list-container .course-listing-item:hover {
opacity:1;
}
.course-thumbnail {
width: 5.1rem;
height: 2.8rem;
border-radius: .15rem;
overflow: hidden;
flex-shrink: 0;
}
.course-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.course-details-area {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
width: calc(100% - 5.5rem);
}
.course-top-info {
flex: 1;
}
.course-location-tag {
color:#688f7e;
font-size:.4rem;
margin-bottom:.05rem;
font-weight: bold;
}
.course-name {
color: #000000;
line-height: 1.3;
font-size:.4rem;
margin-bottom:.05rem;
font-weight: 600;
}
.course-subtitle-info {
font-size:.3rem;
color: #faad14;
margin-bottom:.05rem; overflow: hidden;
width: 94%;
white-space: nowrap;
text-overflow: ellipsis;
}
.course-meta-info {
font-size: .3rem;
color: #858585;
}
.course-session-count {
color: #faad14;
}
.course-pricing-section {
display: flex;
align-items: center;
gap: .5rem;
}
.course-current-price {
font-size:.4rem;
color: #000000;
font-weight: 700;
letter-spacing: .01rem;
}
/* Divider */
.course-divider-line {
width: 100%;
height: .01rem;
background: #e5e5e5;
margin:.6rem 0;
}
/* Responsive */
@media (max-width: 1200px) {
.course-thumbnail {
width: 3.5rem;
height: 2rem;
}
.course-name {
font-size: .28rem;
}
.course-current-price {
font-size:.32rem;
}
}
@media (max-width: 968px) {
.listing-page {
flex-direction: column;
}
.filters-sidebar {
width: 100%;
padding: 30px 20px;
}
.filter-group {
margin-bottom: 30px;
}
.courses-main-area {
padding: 30px 20px;
}
.course-listing-item {
flex-direction: column;
}
.course-thumbnail {
width: 100%;
height: 300px;
}
}
@media (max-width: 640px) {
.course-listing-item {
padding: 25px 20px;
}
.course-name {
font-size: 24px;
}
.course-current-price {
font-size: 28px;
}
.course-original-price {
font-size: 18px;
}
.course-thumbnail {
height: 250px;
}
.checkbox-group {
gap: 20px;
}
}
.articles-page {
position: relative;
width: 100%;
margin: 0 auto;
background: url(../images/gezibg.png) #fff;
/*padding-top:.85rem;*/
}
.articles-hero-section-list{ padding-top:1.2rem; }
/* Top Section with curved background */
.articles-hero-section {
position: relative;
/*border-radius: 50% 50% 0 0 / 70% 70% 0 0;*/
padding:0px;
padding-top:.9rem;
}
.flower-top-right-1{ top: 0px; margin-top: -.2rem; right: 12%; width: 2rem;}
.flower-bottom-left-1{ bottom: 2.6rem;
left: 19%;
width: 2.2rem; }
/* Icon and Header */
.articles-heading-area {
text-align: center;
width: 80%;
margin: 0 auto;
margin-bottom:0px;
}
.articles-icon-bubble {
width:.6rem;
height:.6rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto .4rem;
}
.articles-icon-dots {
display: flex;
gap:.04rem;
}
.icon-dot {
width: .06rem;
height: .06rem;
background: #ffffff;
border-radius: 50%;
}
.articles-page-label {
color: #6b9080;
letter-spacing: .04rem;
text-transform: uppercase;
margin-bottom:.25rem;
font-size: .24rem;
font-weight: bold;
}
.articles-page-title {
font-size:.5rem;
color: #000000;
font-weight: 700;
letter-spacing:.18rem;
}
/* Category Pills */
.category-pills-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:.4rem;
width: calc(80% - 100px);
margin: 0 auto .5rem;
margin-top:1rem;
margin-bottom:0px;
position:relative;
z-index:11;
}
.category-pill-item {
background: #ffffff;
border-radius: .15rem;
padding:.35rem .25rem;
display: flex;
align-items: center;
gap:.15rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: .05rem .05rem .08rem rgb(0 0 0 / 20%);
border-left:.26rem solid;
background: url(../images/bg1.jpg);
}
.category-pill-item-a{ display:block; }
.category-pill-item-a:nth-child(1), .category-pill-item-a:nth-child(2), .category-pill-item-a:nth-child(3),
.category-pill-item:nth-child(1), .category-pill-item:nth-child(2), .category-pill-item:nth-child(3){
transform: translateX(-.5rem);
}
.category-pill-item-a:nth-child(4), .category-pill-item-a:nth-child(5), .category-pill-item-a:nth-child(6),
.category-pill-item:nth-child(4), .category-pill-item:nth-child(5), .category-pill-item:nth-child(6){
transform: translateX(.5rem);
}
.category-pill-item:hover {
box-shadow: 0 .08rem .25rem rgba(0, 0, 0, 0.12);
}
.category-pill-pink {
border-left-color: #d9a4b1;
}
.category-pill-green {
border-left-color: #719c8b;
}
.category-pill-purple {
border-left-color: #a790e0;
}
.category-pill-blue {
border-left-color: #81b5d6;
}
.category-pill-orange {
border-left-color: #e3bb90;
}
.category-pill-yellow {
border-left-color: #e4d78e;
}
.category-pill-icon {
width:.55rem;
height:.55rem;
padding:.1rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.category-pill-pink .category-pill-icon {
background: #d9a4b1;
color: #d4a5a5;
}
.category-pill-green .category-pill-icon {
background: #719c8b;
color: #88b5a0;
}
.category-pill-purple .category-pill-icon {
background: #a790e0;
color: #b5a8c9;
}
.category-pill-blue .category-pill-icon {
background: #81b5d6;
color: #a5c4d4;
}
.category-pill-orange .category-pill-icon {
background: #e3bb90;
color: #d4b8a5;
}
.category-pill-yellow .category-pill-icon {
background: #e4d78e;
color: #d4d1a5;
}
.category-pill-label {
font-weight:500;
letter-spacing: 0.5px;
font-size: .26rem;
color: #606060;
}
/* Search Bar */
.articles-search-row {
display: flex;
gap:.45rem;
align-items: center;
width:80%; margin:0 auto;
}
.articles-search-box {
flex: 1;
position: relative; font-size:16px;
}
.articles-search-input {
width: 100%;
padding: .16rem .59rem .16rem 0;
border: none;
border-bottom: .03rem solid #000;
font-size:.3rem;
background:none;
transition: all 0.3s ease;
font-weight: bold;
}
.articles-search-input:focus {
outline: none;
border-color: #6b9080;
}
.articles-search-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width:.4rem;
height:.4rem;
fill: #000000;
cursor:pointer;
}
.articles-search-icon:hover path{ fill:#6b9080; }
.advanced-search-toggle {
padding: .16rem .28rem;
background: #6b9080;
color: #ffffff;
border: none;
border-radius:.32rem;
font-size:.26rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.advanced-search-toggle:hover {
background: #6b8e7f;
}
/* Advanced Search Modal */
.advanced-search-modal {
display: none;
background: #ffffff;
border-radius: 0px;
padding: .4rem;
width: 80%;
margin: 0 auto;
margin-top: .4rem;
border: .04rem solid #7a9d8e;
}
.advanced-search-modal.show {
display: block;
}
.modal-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-backdrop.show {
display: block;
}
.modal-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom:.3rem;
}
.modal-title-text {
font-size: .22rem;
color: #2c3e37;
font-weight: 700;
margin: 0 auto;
}
.modal-close-btn {
width:.55rem;
height: .55rem;
background: #7a9d8e;
color: #fff;
font-size: .22rem;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.modal-close-btn:hover {
background: #4f665c;
}
.modal-form-group {
margin-bottom: .25rem; font-size: 16px;
}
.modal-label {
display: block;
font-size: .15rem;
color: #2c3e37;
font-weight: 600;
}
.modal-input-field {
width: 100%;
padding: .2rem 0;
border: 0;
border-bottom: .02rem solid #000;
font-size: .22rem;
font-weight: bold;
color: #666666;
}
.modal-input-field:focus {
outline: none;
border-color: #7a9d8e;
}
.modal-date-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .2rem;
}
.modal-date-row .modal-form-group{ overflow:hidden; }
.modal-date-row .modal-form-group label{}
.modal-date-row .modal-form-group input{}
.modal-submit-btn {
width: 2rem;
margin: 0 auto;
display: block;
padding: .15rem;
background: #000;
color: #ffffff;
border: none;
border-radius: .12rem;
font-size: .22rem;
font-weight: 600;
cursor: pointer;
margin-top: .1rem;
transition: all 0.3s ease;
}
.modal-submit-btn:hover {
background: #1a252f;
}
/* Articles List */
.articles-list-section {
padding:1rem 0rem;
}
.articles-list-wrapper {
display: flex;
flex-direction: column;
gap:.5rem;
width: 80%;
margin: 0 auto;
padding: 1rem 0rem;
}
/* Article Item */
.article-list-item {
background: #f4f4f4;
gap:.25rem;
align-items: center;
transition: all 0.3s ease;
cursor: pointer;
overflow: hidden;
display: flex;
}
.article-list-item:hover {
transform: translateY(-.03rem);
box-shadow: 0 .08rem .3rem rgba(0, 0, 0, 0.1);
}
.article-content-section {
flex: 1;
float: left;
padding:.4rem;
width: 68%;
position: relative;
height: 100%;
}
.article-content-section svg{ position: absolute;
top: 1.2rem;
right: .4rem;
width: .5rem; }
.article-meta-row {
display: flex;
gap: .2rem;
align-items: center;
margin-bottom: 15px;
}
.article-meta-row span:nth-child(3){ font-size: .18rem;
color: #e4d78e;
font-weight: 600;
flex: 2;
text-align: right; text-decoration: underline; }
.article-list-item:nth-child(2n) .article-meta-row span:nth-child(3){ color: #81b5d6; }
.article-category-badge {
padding: .02rem .14rem;
background: #6b8e7f;
color: #fff;
border-radius: .06rem;
font-size: .18rem;
font-weight: 500;
}
.article-publish-date {
font-size: .2rem;
color: #6b8e7f; font-weight: 600;
}
.article-heading-text {
font-size: .3rem;
color: #000000;
font-weight: 700;
margin-bottom: .15rem;
letter-spacing: 0.5px;
-webkit-box-orient: vertical;
overflow: hidden;
width: 80%;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
}
.article-excerpt-text {
font-size: .18rem;
color: #333;
line-height: 1.7;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
width: 80%;
}
.article-view-icon {
width: .5rem;
height: .5rem;
background: #f8f9fa;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.article-list-item:hover .article-view-icon {
background: #7a9d8e;
}
.article-view-icon svg {
width: .2rem;
height: .2rem;
fill: #666;
}
.article-list-item:hover .article-view-icon svg {
fill: #ffffff;
}
.article-thumbnail-img {
overflow: hidden;
flex-shrink: 0;
float: right;
width: 32%;
height: 100%;
display: block;
}
.article-thumbnail-img img { display: block; max-height:2.76rem; }
.article-tag-label {
position: absolute;
top: .12rem;
right: .12rem;
padding: .08rem .16rem;
background: rgba(255, 255, 255, 0.95);
border-radius: .08rem;
font-size: .12rem;
font-weight: 600;
color: #7a9d8e;
}
/* Pagination */
.pagination-controls {
display: flex;
justify-content: center;
align-items: center;
gap: .1rem;
margin-top:.6rem;
}
.pagination-btn {
width: .5rem;
height: .5rem;
border: .02rem solid #d0d0d0;
background: #ffffff;
border-radius: .28rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: .2rem;
color: #000000;
font-weight: 500;
}
.pagination-btn:hover {
border-color: #688f7e;
}
.pagination-btn.active {
border-color: #688f7e;
color: #000;
}
.pagination-ellipsis {
color: #999;
font-size: .18rem;
padding: 0 .05rem;
}
/* Responsive */
@media (max-width: 968px) {
.category-pills-container {
grid-template-columns: repeat(2, 1fr);
}
.articles-search-row {
flex-direction: column;
}
.advanced-search-toggle {
width: 100%;
}
.article-list-item {
flex-direction: column;
}
.article-thumbnail-img {
width: 100%;
height: 200px;
}
}
@media (max-width: 640px) {
.category-pills-container {
grid-template-columns: 1fr;
}
.articles-page-title {
font-size: 36px;
letter-spacing: 4px;
}
.articles-hero-section {
padding: 40px 25px 60px;
}
.articles-list-section {
padding: 40px 25px;
}
.modal-date-row {
grid-template-columns: 1fr;
}
}
.detail-page-wrapper {
position: relative;
width: 100%;
margin: 0 auto;
background: #688f7e;
}
/* Header Section */
.detail-header-section {
background: #fff;
padding:.7rem 0;
padding-bottom: 1.55rem;
margin-bottom: 0;
}
.article_left{ float:left; width:calc(100% - 5.2rem); font-size:.25rem; }
.article_left img{ max-width:100%; height:auto; }
.detail-sidebar-area{ float:right; width:4.5rem; }
.detail-header-icon {
width:1rem;
height:1rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto .2rem;
}
.detail-header-icon svg path{ fill:#333333; }
.detail-header-dots {
display: flex;
gap: .04rem;
}
.header-dot-item {
width: .05rem;
height: .05rem;
background: #ffffff;
border-radius: 50%;
}
.detail-header-label {
text-align: center;
opacity: 0.9;
color: #6b9080;
letter-spacing: .04rem;
text-transform: uppercase;
margin-bottom: .2rem;
font-size: .24rem;
font-weight: bold;
font-family: Source Han Sans Heavy;
}
.detail-header-title {
text-align: center;
font-size:.5rem;
color: #000000;
font-weight: 700;
letter-spacing: .14rem;
}
/* Main Content Layout */
.detail-content-layout {
background: #fff; padding-bottom:.5rem;
}
/* Article Main Content */
.detail-main-content {
padding: 0px;
width: 80%;
margin: 0 auto; overflow:hidden;
}
/* Article Meta */
.detail-article-meta {
display: flex;
align-items:flex-start;
justify-content:space-between;
margin-bottom: .25rem;
padding-bottom: .25rem;
border-bottom: .02rem solid #e5e5e5;
}
.detail-meta-left {
display: flex;
align-items: center;
gap:.4rem;
}
.detail-meta-left-date{ border-right: 1px solid #dbdbdb;
text-align: center;
height: 100%;
color: #688f7e; padding-right:.4rem; }
.detail-date-display {
font-size:.6rem;
font-weight: 700;
line-height: 1;
}
.detail-date-year {
font-size:.2rem;
margin-top: .15rem;
font-weight:bold;
}
.detail-article-heading {
flex: 1;
}
.detail-article-title {
font-size:.4rem;
color: #000000;
font-weight: 700;
margin-bottom: .12rem;
letter-spacing: .01rem;
}
.detail-article-subinfo {
display: flex;
align-items: center;
gap:.15rem;
font-size:.2rem;
}
.detail-category-tag {
padding:.04rem .14rem;
background: #e4d78e;
border-radius: .26rem;
color: #fff;
font-weight: 500;
}
.detail-author-info {
color: #858181;
font-size: .22rem;
}
.detail-view-count {
display: flex;
align-items: center;
gap: .06rem;
color: #999;
font-size:.22rem;
}
.detail-view-count svg{ width:.4rem; height:.4rem; }
.detail-view-count svg path{ fill:#858181; }
.detail-bookmark-icon {
cursor: pointer;
color: #999;
font-size:.2rem;
}
.detail-bookmark-icon svg{ width:.3rem; height:.3rem; vertical-align: middle; }
.detail-bookmark-icon svg path{ fill:#688f7e; }
.detail-meta-right {
display: flex;
gap:.12rem;
}
.detail-social-btn {
width:.55rem;
height:.55rem;
border-radius: 50%;
border:.03rem solid #f1f1f1;
padding: .1rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.detail-social-btn:hover {
background: #7a9d8e;
color: #ffffff;
}
.detail-social-btn:hover path{ fill:#fff; }
/* Featured Image */
.detail-featured-image {
width: 100%;
height: 4rem;
border-radius: .15rem;
overflow: hidden;
margin-bottom: .35rem;
}
.detail-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Quote Block */
.detail-quote-block {
background: #f9f9f9;
margin-bottom:.35rem;
border-radius: 0 .1rem .1rem 0;
position: relative;
padding-left:.9rem;
padding-right:.2rem;
padding-top:.2rem;
padding-bottom:.2rem;
}
.detail-quote-block::before{ content: "“";
color: #688f7e;
position: absolute;
top: 0px;
left: -.2rem;
font-size: .9rem;
font-weight: bold; }
.detail-quote-text {
font-size:.25rem;
line-height: 1.8;
}
/* Article Sections */
.article-content h1,
.article-content h2,
.article-content h3
{
font-size:.3rem;
font-weight: 700;
margin:.35rem 0 .2rem;
letter-spacing: 0.5px;
}
.detail-section-text {
line-height: 1.9;
margin-bottom:.25rem;
letter-spacing: 0.3px;
}
.article-content ul
.article-content ol{
list-style: none;
counter-reset: item;
margin-bottom: .30rem;
}
.article-content li {
counter-increment: item;
margin-bottom:.2rem;
position: relative;
padding-left:.35rem;
line-height: 1.8;
}
.article-content li::before {
content: counter(item) ". ";
position: absolute;
left: 0;
font-weight: 700;
}
.detail-list-title {
font-weight: 700;
margin-bottom:.08rem;
}
.detail-list-desc {
font-size:.25rem;
line-height: 1.8;
}
/* Circle Graphics */
.detail-circles-container {
display: flex;
justify-content: center;
gap:.4rem;
margin: .5rem 0;
}
.detail-circle-item {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size:.24rem;
color: #ffffff;
font-weight: 700;
background: linear-gradient(135deg, #e84393 0%, #d63384 100%);
}
.detail-circle-item:nth-child(2) {
background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
}
.detail-circle-item:nth-child(3) {
background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
}
/* Back Button */
.detail-back-btn {
padding: .14rem .3rem;
background: #6b9080;
color: #ffffff;
border: none;
border-radius:.32rem;
font-size:.25rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
display:inline-block;
width: 1.6rem;
text-align: center;
}
.detail-back-btn:hover {
background: #5a786b;
}
/* Sidebar */
.detail-sidebar-area {
display: flex;
flex-direction: column;
gap: .3rem;
}
/* Recommended Section */
.detail-recommend-section {
border-bottom: 1px solid #bfbfbf; padding-bottom:.5rem;
}
.detail-recommend-section .course-card{ margin-bottom:.3rem; }
.detail-recommend-section .course-card:last-child{ margin-bottom:0px; }
.detail-recommend-title {
font-size:.33rem;
color: #333333;
font-weight: 700;
margin-bottom:.4rem;
letter-spacing: 1px;
position:relative;
display:inline-block;
z-index:1; padding:0 .1rem; text-align:center;
}
.detail-recommend-title::after{ content: "";
display: block;
background-color: #e7eb7a;
height:.12rem;
width: 100%;
position: absolute;
bottom:.03rem;
z-index: -1;
left: 0;}
.detail-recommend-section .card-content{ }
.detail-recommend-section .location{ font-size:.35rem; }
.detail-recommend-section .course-title{ font-size:.35rem; }
.detail-recommend-section .instructor{ font-size:.30rem; margin-bottom:.2rem; }
.detail-recommend-section .tag{ font-size:.18rem; font-weight: bold; }
.detail-recommend-section .action-buttons{ width:2.1rem; bottom: 0; }
.detail-recommend-section .btn{ height:.45rem; padding: .1rem .3rem; font-size:.18rem; }
.detail-recommend-section .btn-read{ right:.48rem; bottom: 0; }
.detail-recommend-section .btn-icon{ width:.45rem; height:.45rem; bottom: 0; }
.detail-related-section .article-read-btn{ padding:.10rem .3rem; height:.45rem; font-size:.18rem;right:.48rem; }
.detail-related-section .article-arrow-btn{ width:.45rem; height:.45rem; }
/* Recommended Article Cards */
.detail-recommend-card {
background: #ffffff;
border-radius:.12rem;
padding:.2rem;
margin-bottom:.2rem;
box-shadow: 0 .04rem .15rem rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
cursor: pointer;
}
.detail-recommend-card:hover {
transform: translateY(-.03rem);
box-shadow: 0 .08rem .25rem rgba(0, 0, 0, 0.1);
}
.detail-recommend-card:last-child {
margin-bottom: 0;
}
.recommend-card-image {
width: 100%;
height: 1.4rem;
border-radius: .1rem;
overflow: hidden;
margin-bottom: .15rem;
}
.recommend-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recommend-card-location {
font-size: .13rem;
color: #7a9d8e;
font-weight: 600;
margin-bottom:.08rem;
}
.recommend-card-title {
font-size:.17rem;
color: #2c3e37;
font-weight: 700;
margin-bottom:.1rem;
line-height: 1.4;
}
.recommend-card-instructor {
font-size:.13rem;
color: #666;
margin-bottom:.12rem;
}
.recommend-card-tag {
display: inline-block;
padding: 0.06rem .12rem;
background: #e8f4f0;
border-radius: .06rem;
font-size: .12rem;
color: #7a9d8e;
font-weight: 600;
}
.recommend-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: .12rem;
}
.recommend-card-btn {
display: flex;
align-items: center;
gap: .08rem;
padding: .1rem .18rem;
background: #2c3e37;
color: #ffffff;
border-radius:.2rem;
font-size:.13rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.recommend-card-btn:hover {
background: #1a252f;
}
/* Related Articles Section */
.detail-related-section {
border-radius:.15rem;
font-size:16px;
}
.detail-related-title {
font-size:.33rem;
color: #333333;
font-weight: 700;
margin-bottom:.4rem;
text-align: center;
letter-spacing: 1px;
}
.detail-related-card {
background: linear-gradient(135deg, #f4e8a0 0%, #f0e396 100%);
border-radius:.12rem;
padding:.25rem;
margin-bottom:.20rem;
cursor: pointer;
transition: all 0.3s ease;
}
.detail-related-section .article-title{ font-size:.24rem;
border-bottom: 1px solid #000;
padding-bottom:.15rem; margin-bottom:.15rem; }
.detail-related-section .article-excerpt{ font-size:.18rem; }
.detail-related-section .article-card{ border-radius:.2rem; padding:.25rem; margin-bottom:.4rem; }
.detail-related-section div .article-card:nth-child(2n){ background: #eae3ed; }
.detail-related-section div .article-card:nth-child(3n){ background: #ffc79e; }
.detail-related-section div .article-card:nth-child(4n){ background: #d9a4b1; }
.detail-related-section div .article-card:nth-child(5n){ background: #e3bb90; }
.detail-related-section div .article-card:nth-child(6n){ background: #e4d78e; }
.detail-related-card:hover {
transform: translateY(-3px);
box-shadow: 0 .08rem .25rem rgba(0, 0, 0, 0.1);
}
.detail-related-card.gray {
background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%);
}
.detail-related-card.orange {
background: linear-gradient(135deg, #f4d5a0 0%, #f0ca96 100%);
}
.detail-related-card:last-child {
margin-bottom: 0;
}
.related-card-heading {
font-size: .16rem;
color: #2c3e37;
font-weight: 700;
margin-bottom: .15rem;
line-height: 1.4;
}
.related-card-excerpt {
font-size:.13rem;
color: #3a4a42;
line-height: 1.7;
margin-bottom:.15rem;
}
.related-card-action {
display: flex;
align-items: center;
justify-content: space-between;
}
.related-card-link {
display: flex;
align-items: center;
gap:.08rem;
padding: .1rem .18rem;
background: #2c3e37;
color: #ffffff;
border-radius: .2rem;
font-size: .13rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.related-card-link:hover {
background: #1a252f;
}
/* Responsive */
@media (max-width: 1024px) {
.detail-content-layout {
grid-template-columns: 1fr;
}
.detail-sidebar-area {
grid-column: 1;
}
}
@media (max-width: 768px) {
.detail-header-section {
padding: 40px 30px 30px;
}
.detail-header-title {
font-size: 32px;
letter-spacing: 3px;
}
.detail-main-content {
padding: 35px 25px;
}
.detail-article-meta {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.detail-meta-left {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.detail-circles-container {
flex-direction: column;
align-items: center;
gap: 25px;
}
.detail-featured-image {
height: 250px;
}
}
@media (max-width: 480px) {
.detail-article-title {
font-size: 20px;
}
.detail-section-heading {
font-size: 18px;
}
.detail-circle-item {
width: 120px;
height: 120px;
font-size: 20px;
}
}
/* ── Layout ── */
.co-page-out{ background:#fff; font-size:16px; }
.co-page{
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 7.2rem;
gap: .8rem;
align-items: start;
}
/* ════════════ LEFT – FORM ════════════ */
.co-form-col { padding:.6rem 0rem; }
.co-form-section-title{
font-size:.35rem; font-weight:700; margin-bottom:.24rem; letter-spacing:.05rem;
}
.co-form-row{ display:flex; gap:.7rem; margin-bottom:.25rem; }
.co-form-row .co-form-group{ flex:1; margin-bottom:0; }
.co-form-group{ margin-bottom:.25rem; }
.co-form-label{
display: block;
font-size:.28rem;
color: #000000;
font-weight: 400;
margin-bottom: .15rem;
}
.co-form-label .co-req{ color:#6b9080; font-weight: bold; }
.co-form-input{
width: 100%;
padding:.22rem .18rem;
border: 1px solid #000000;
border-radius: .1rem;
font-size: .25rem;
background: #fff;
color: #000000;
transition: border .3s, box-shadow .3s;
outline: none; font-family: inherit;
}
.co-form-input:focus{
border-color:#6b9080;
box-shadow:0 0 0 3px rgba(122,157,142,.15);
}
.co-form-input::placeholder{ color:#bbb; }
.co-form-textarea{
width: 100%;
padding: .14rem .18rem;
border: 1px solid #000000;
border-radius: .1rem;
font-size: .25rem;
background: #fff;
resize: vertical;
min-height: 1rem;
transition: border .3s, box-shadow .3s;
outline: none;
font-family: inherit;
}
.co-form-textarea:focus{
border-color:#6b9080;
box-shadow:0 0 0 3px rgba(122,157,142,.15);
}
.co-form-textarea::placeholder{ color:#bbb; }
/* ── Terms checkbox ── */
.co-terms-row{
display:flex; align-items:center; gap:.12rem;
margin:.28rem 0 .36rem; font-size:.28rem;
}
.co-terms-check{
width:.34rem; height:.34rem; border-radius:50%;
border:2px solid #ccc; background:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer; flex-shrink:0; transition:.3s;
position:relative; user-select:none;
}
.co-terms-check.checked{
border-color:#6b9080; background:#6b9080;
}
.co-terms-check.checked::after{
content:'✓'; color:#fff; font-size:.22rem; font-weight:700;
}
.co-terms-link{ color:#6b9080; font-weight:600; cursor:pointer; }
.co-terms-link:hover{ text-decoration:underline; }
/* ── Credit card section ── */
.co-card-title{ font-size:.35rem;
font-weight: 700;
margin-bottom:.24rem;
letter-spacing: .05rem; }
.co-card-number-row{
display:grid; grid-template-columns:repeat(4,1fr); gap:.12rem;
margin-bottom:.22rem;
}
.co-card-seg{
text-align: center;
letter-spacing:.03rem;
width: 100%;
padding: .22rem .18rem;
border: 1px solid #000000;
border-radius: .1rem;
font-size: .25rem;
background: #fff;
color: #000000;
transition: border .3s, box-shadow .3s;
outline: none;
}
.co-card-seg:focus{
border-color:#6b9080;
box-shadow:0 0 0 3px rgba(122,157,142,.15);
color:#2c3e37;
}
.co-card-bottom-row{
display:flex; gap:.4rem; align-items:flex-end; margin-bottom:.4rem;
}
.co-card-exp-label{ display: block;
font-size:.28rem;
color: #000000;
font-weight: 400;
margin-bottom:.15rem;}
.co-card-selects{ display:flex; gap:.12rem; }
.co-card-select{
cursor: pointer;
letter-spacing:.03rem;
width: 100%;
padding: .15rem .18rem;
border: 1px solid #000000;
border-radius: .1rem;
font-size: .25rem;
background: #fff;
color: #000000;
transition: border .3s, box-shadow .3s;
outline: none;
font-family: inherit;width: 1.6rem;
}
.co-card-select:focus{ border-color:#6b9080; }
.co-cvc-input{
cursor: pointer;
letter-spacing:.03rem;
padding: .15rem .18rem;
border: 1px solid #000000;
border-radius: .1rem;
font-size: .25rem;
background: #fff;
color: #000000;
transition: border .3s, box-shadow .3s;
outline: none;
font-family: inherit;
width: 1.6rem;
}
.co-cvc-input:focus{
border-color:#6b9080;
box-shadow:0 0 0 3px rgba(122,157,142,.15);
}
.co-cvc-input::placeholder{ color:#bbb; }
/* ── Security badge ── */
.co-secure-badge{
display:flex; align-items:center; gap:.16rem;
background:#fff;margin-bottom:.4rem;
}
.co-secure-icon{
width:.74rem; height:.74rem; border-radius:50%;
background:#6b9080; display:flex; align-items:center;
justify-content:center; font-size:.22rem; flex-shrink:0;
}
.co-secure-icon svg{ width:.5rem; height:.5rem; }
.co-secure-icon svg path{ fill:#fff; }
.co-secure-text{ font-size:.28rem; line-height:1.65; }
.co-secure-text strong{ color:#6b9080; }
.co-sec-link{ color:#6b9080; cursor:pointer; }
.co-sec-link:hover{ text-decoration:underline; }
/* ── Pay Button ── */
.co-pay-btn{
width: 3.8rem;
padding: .18rem;
background: #6b9080;
color: #fff;
border: none;
border-radius: .5rem;
font-size: .3rem;
font-weight: 700;
cursor: pointer;
transition: background .3s, transform .2s;
letter-spacing: 1px;
}
.co-pay-btn:hover{ background:#6b8e7f; transform:translateY(-2px); }
.co-pay-btn:active{ transform:translateY(0); }
/* ════════════ RIGHT – ORDER SUMMARY ════════════ */
.co-summary-col { padding:.6rem .8rem;
background: #f1f1f1;
height: 100%;}
.co-summary-img{
width:100%; border-radius:.18rem; overflow:hidden;
box-shadow:0 .12rem .4rem rgba(0,0,0,.18);
margin-bottom:.28rem;
}
.co-summary-img img{ width:100%; display:block; }
.co-summary-title-row{
align-items:baseline; gap:.12rem;
margin-bottom:.16rem;
}
.co-summary-loc{ font-size:.4rem; font-weight:700;}
.co-summary-sep{ color: #000;
font-size: .3rem;
font-weight: 100;
vertical-align: super;
margin: 0 .1rem; }
.co-summary-name{ font-size:.4rem; font-weight:700; }
/* Info rows */
.co-summary-info{ margin-bottom:.08rem; }
.co-summary-info-item{
display: flex;
align-items: center;
gap:.12rem;
font-size:.28rem;
color: #808080; margin: .15rem 0rem;
}
.co-summary-info .co-summary-info-itema{ font-size:.2rem;
color: #808080; padding:.28rem 0; padding-top:0px;
border-bottom: 1px solid #c4c4c4; margin-bottom:.2rem; }
.co-si-icon{ width:.2rem; text-align:center; flex-shrink:0; }
.co-si-icon svg{ width:.2rem;
height:.2rem;
vertical-align: middle; }
.co-si-icon svg path{ fill:#666; }
.co-si-val{ color:#7a9d8e; font-weight:600; }
/* Divider */
.co-summary-divider{ height:1px; background:#c4c4c4; margin:.3rem 0; }
/* Final price block */
.co-summary-final-label{ font-size:.28rem; font-weight:600; margin-bottom:.06rem; }
.co-summary-final-price-row{ display:flex; align-items:baseline; gap:.1rem; }
.co-summary-final-price{ font-size:.28rem; font-weight:700; }
.co-summary-final-tax{ font-size:.18rem; font-weight:bold; }
/* Discount */
.co-summary-discount{ margin-top:.14rem; }
.co-summary-disc-line{ font-size:.3rem; color: #808080;}
.co-disc-amt{ }
.co-summary-disc-detail{ font-size:.2rem; color:#aaa; margin-top:.05rem; }
/* ── Responsive ── */
@media(max-width:960px){
.co-page{ grid-template-columns:1fr; gap:.4rem; padding:.4rem .24rem; }
.co-summary-col{ order:-1; }
}
@media(max-width:520px){
.co-form-row{ flex-direction:column; gap:0; }
.co-form-row .co-form-group{ margin-bottom:22px; }
.co-card-number-row{ grid-template-columns:repeat(2,1fr); }
.co-pay-btn{ width:100%; }
.co-card-bottom-row{ flex-wrap:wrap; gap:20px; }
}
.course-div{ background:#fff; }
/* ════════ BREADCRUMB ════════ */
.cp-crumb{
width: 90%;
margin: 0 auto;
padding:.8rem 0;
padding-bottom:.6rem;
font-size:.28rem;
color: #808080;
display: flex;
align-items: center;
gap:.04rem;
position: relative; letter-spacing:.02rem;
}
.cp-crumb a{ color:#666; }
.cp-crumb a:hover{ color:#7a9d8e; }
.cp-crumb-sep{ margin:0 .02rem; }
.cp-crumb-social{
position:absolute; right:0px; top:.8rem;
display:flex; gap:.1rem; overflow: hidden;
}
.cp-crumb-social a{
width:.34rem; height:.34rem; border-radius:50%; background:#ddd;
display:flex; align-items:center; justify-content:center;
color:#555; font-size:.15rem; transition:.3s;
}
.cp-crumb-social a:hover{ background:#688f7e; color:#fff; }
/* ════════ HERO ════════ */
.cp-hero{
width:90%; margin:0 auto; padding:.35rem 0; padding-top:0px;
display:grid; grid-template-columns:1fr 1fr; gap:.65rem;
align-items:start;
}
.cp-hero-img{ border-radius:.16rem; overflow:hidden; }
.cp-hero-img img{ width:100%; display:block; }
.cp-hero-right{ padding-top:.08rem; }
.cp-hero-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.12rem; }
.cp-hero-mini-ins{ display:flex; align-items:center; gap:.10rem; font-size:.30rem; color:#666; }
.cp-hero-mini-ins img{ width:.4rem; height:.4rem; border-radius:50%; object-fit:cover; }
.cp-hero-enroll-link{ font-size:.25rem; color:#faad14; }
.cp-hero-enroll-link:hover{ text-decoration:underline; }
.cp-hero-enroll-link svg{ width:.3rem; height:.3rem; vertical-align: sub; }
.cp-hero-enroll-link svg path{ fill:#faad14; }
.course-title-h1{ font-size:.4rem; font-weight:bold; }
.course-title-h1 h1{ font-size:.4rem; }
.cp-hero-loc{ color:#688f7e; }
.cp-hero-name{ display:inline-block; }
.cp-hero-sub{ font-size:.35rem;
color: #688f7e;
margin:.15rem 0rem; }
.cp-hero-desc{ font-size:.26rem;
color: #666;
line-height: 1.6;
margin-bottom:.4rem; }
.cp-hero-price-row{ display:flex; align-items:baseline; gap:.18rem; margin-bottom:.18rem; justify-content: space-between; }
.cp-hero-price{ font-size:.55rem; font-weight:700; }
.cp-hero-price-orig{ font-size:.35rem; color:#aaa; margin-left:.5rem; text-decoration:line-through; font-weight:400; }
.cp-hero-price-orig.cp-hero-price-orig-small{ font-size:.15rem; margin-left:0; margin-bottom:.1rem; }
.cp-hero-collect{
display: inline-flex;
align-items: center;
gap:.06rem;
padding:.09rem .2rem;
border: 1px solid #7a9d8e;
border-radius:0.05rem;
background: transparent;
font-size:.25rem;
cursor: pointer;
transition: .3s;
color: #7a9d8e;
font-weight: 600;
}
.cp-hero-collect:hover{ background:#7a9d8e; color:#fff; }
.cp-hero-collect svg{ width:.2rem; height:.2rem; }
.cp-hero-collect svg path{ fill:#7a9d8e; }
.cp-hero-collect:hover svg path{ fill:#fff; }
/* ════════ ADDRESS ════════ */
.cp-addr{
width:90%; margin:0 auto; border-bottom: 1px solid #bfbfbf;
padding-bottom:.35rem;
font-size:.28rem; color:#666; display:flex; align-items:center; gap:.1rem;
}
.cp-addr svg{ width:.3rem; height:.3rem; vertical-align: sub; }
.cp-addr svg path{ fill:#7a9d8e; }
.cp-addr span:nth-child(2){ color:#7a9d8e; }
/* ════════ MAIN LAYOUT ════════ */
.cp-main{
width: 90%;
margin: 0 auto;
margin-top:.35rem;
display: grid;
grid-template-columns: 1fr 6.7rem;
gap:.5rem;
align-items: start;
}
/* ── Section Title ── */
.cp-sec-title{
font-size:.35rem; font-weight:600; margin-bottom:.25rem;
display:flex; justify-content:space-between; align-items:center; border-top: 1px solid #bfbfbf;
margin-top: 0.5rem;
padding-top: 0.5rem;
}
.cp-sec-title.cp-sec-title-no{ border-top:none;
margin-top:0;
padding-top:0; }
.cp-sec-link{ font-size:.14rem; color:#688f7e; font-weight:600; cursor:pointer; }
.cp-sec-link:hover{ text-decoration:underline; }
/* ── Info Grid ── */
.cp-info-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap:.20rem .36rem;
}
.cp-info-row{ display: flex;
align-items: center;
gap:.15rem;
font-size:.28rem;
font-weight:600;
color: #000000; }
.cp-info-row .cp-ii{ font-size:.17rem; }
.cp-info-row strong{ color:#688f7e; margin-left:.02rem; }
.cp-info-row .cp-ii svg{ width:.3rem; height:.3rem; vertical-align: sub; }
.cp-info-row .cp-ii svg path{ fill:#688f7e; }
.cp-info-row .cp-ii span:nth-child(2){ color:#688f7e; }
/* ── Calendar ── */
.cp-cal-wrap{ display: flex;
gap:.24rem;
flex-wrap: wrap;
margin-bottom:.3rem;
padding-bottom:.3rem;
border-bottom: 1px solid #ddd; }
.cp-cal{
flex:1; min-width:2.3rem; background:#fff; border:1px solid #e4e4e4;
border-radius:.14rem; padding:.2rem;
}
.cp-cal-head{
display:flex; justify-content:space-between; align-items:center;
font-size:.14rem; font-weight:600; margin-bottom:.14rem;
}
.cp-cal-nav{ cursor:pointer; color:#688f7e; font-size:.18rem; user-select:none; }
.cp-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.02rem; text-align:center; }
.cp-cal-dn{ font-size:.12rem; color:#aaa; padding:.05rem 0; font-weight:600; }
.cp-cal-d{
font-size:.13rem; padding:.08rem .02rem; border-radius:.08rem;
cursor:pointer; transition:background .2s; color:#2c3e37;
}
.cp-cal-d:hover{ background:#eef5f2; }
.cp-cal-d.cp-cal-active{ background:#688f7e; color:#fff; font-weight:700; }
.cp-cal-d.cp-cal-off{ color:#ccc; pointer-events:none; }
.cp-cal-d.cp-cal-empty{ pointer-events:none; }
/* ── Lessons ── */
.cp-lessons{ margin-bottom:.3rem; font-size:.25rem; }
.cp-lesson{
padding:0; margin-bottom:.25rem;
}
.cp-lesson:last-child{ border-bottom:none; }
.cp-lesson-lbl{ color:#688f7e; font-weight:700; margin-bottom:.03rem; }
.cp-lesson-desc{ }
/* ── Cert notes ── */
.cp-cert{ margin-bottom:.3rem; padding-bottom:.3rem; border-bottom:1px solid #ddd; }
.cp-cert-head{ font-size:.25rem; color:#faad14; font-weight:700; margin-bottom:.1rem; }
.cp-cert ul{ list-style:none; padding:0; }
.cp-cert ul li{ font-size:.25rem;
color:#faad14; padding:.04rem 0; padding-left:.18rem; position:relative;
}
.cp-cert ul li::before{ content:"✦"; position:absolute; left:0; }
/* ── Suitable ── */
.cp-suitable{ margin-bottom:.30rem; padding-bottom:.30rem; border-bottom:1px solid #ddd; }
.cp-suitable ol{ padding-left:.20rem; }
.cp-suitable ol li{ font-size:.25rem;
padding:.05rem 0;
line-height: 1.5;
list-style-type: auto; }
/* ── Instructor ── */
.cp-ins-row{ display:flex; gap:.18rem; align-items:flex-start; margin-bottom:.1rem; }
.cp-ins-ava{ width:1.25rem; height:1.25rem; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 .04rem .12rem rgba(0,0,0,.1); }
.cp-ins-name{ font-size:.3rem; font-weight:700; margin-bottom:.03rem; }
.cp-ins-title{ font-size:.16rem; color:#688f7e; margin-bottom:.05rem; }
.cp-ins-stats{ font-size:.18rem; margin-bottom:.07rem; }
.cp-ins-stats i{ color:#688f7e; }
.cp-ins-stats span{ display: inline-block; height:.15rem; width:1px; background: #000; }
.cp-ins-bio{ font-size:.25rem; color:#666; line-height:1.75; }
/* ── Recommended Cards ── */
.course-hot{ width: 90%;
border-top: 1px solid #ddd;
padding-top:.30rem;
margin: 0 auto;
margin-top:.3rem;
margin-bottom: 0;
padding-bottom:.5rem; }
.cp-rec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; }
.cp-rec-card{
border-radius:.16rem; overflow:hidden; position:relative;
box-shadow:0 .08rem .24rem rgba(0,0,0,.12); cursor:pointer;
transition:transform .3s;
}
.cp-rec-card:hover{ transform:translateY(-.04rem); }
.cp-rec-card img{ width:100%; height:2.1rem; object-fit:cover; display:block; }
.cp-rec-overlay{
position:absolute; bottom:0; left:0; right:0;
background:linear-gradient(transparent 10%, rgba(30,40,35,.78));
padding:.7rem .18rem .2rem; color:#fff;
}
.cp-rec-loc{ font-size:.13rem; opacity:.85; }
.cp-rec-title{ font-size:.16rem; font-weight:700; margin:.03rem 0; }
.cp-rec-by{ font-size:.13rem; opacity:.8; margin-bottom:.1rem; }
.cp-rec-tag{
display:inline-block; padding:.05rem .12rem; border-radius:.14rem;
font-size:.12rem; font-weight:600; margin-bottom:.1rem;
}
.cp-rec-tag-teal{ background:#5baaa0; color:#fff; }
.cp-rec-tag-amber{ background:#e8b56a; color:#fff; }
.cp-rec-footer{ display:flex; align-items:center; gap:.08rem; }
.cp-rec-btn{
padding:.08rem .16rem; background:#2c3e37; color:#fff;
border-radius:.18rem; font-size:.13rem; font-weight:600;
border:none; cursor:pointer; transition:.3s;
}
.cp-rec-btn:hover{ background:#1a252f; }
.cp-rec-arr{
width:.32rem; height:.32rem; border-radius:50%; background:#2c3e37;
color:#fff; border:none; font-size:.16rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
/* ════════ RIGHT – BOOKING PANEL ════════ */
.cp-panel{
background:#fff; border-radius:.16rem; padding:.28rem 0;
border: 1px solid #ddd;
position:sticky; top:.28rem;
padding-top:0px;
}
.cp-panel-sec{
border-bottom: 1px solid #eee;
padding:.4rem .52rem; font-size:16px;
}
.cp-panel-sec:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.cp-panel-lbl{
font-size:.28rem;
color: #000;
font-weight: 600;
margin-bottom:.3rem;
display: flex;
align-items: center;
gap:.3rem;
}
.cp-panel-lbl.cp-panel-lbl-none{ margin-bottom:0px; }
.cp-panel-lbl .cp-pl-ic{ font-size:.18rem; }
.cp-panel-lbl .cp-pl-ic svg{ width:.4rem; height:.4rem; vertical-align: sub; }
.cp-panel-lbl .cp-pl-icsvg path{ fill:#666; }
/* date picker trigger */
.cp-panel-date{
width:100%; padding:.13rem .16rem;
border:.02rem solid #e4e4e4; border-radius:.1rem;
background:#fafafa; font-size:.15rem; color:#aaa;
cursor:pointer; transition:border .3s; text-align:left;
}
.cp-panel-date:hover{ border-color:#7a9d8e; }
/* people */
.cp-panel-people{ display:flex; align-items:center; justify-content:space-between; margin-left: 13%;}
.cp-panel-pctrl{ display:flex; align-items:center; gap:.16rem; }
.cp-panel-pbtn{
width:.44rem; height:.44rem; border-radius:50%;
border:.02rem solid #e0e0e0; background:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer; font-size:.25rem; transition:.3s;
}
.cp-panel-pbtn:hover{ border-color:#7a9d8e; color:#7a9d8e; }
.cp-panel-pnum{ font-size:.28rem; font-weight:700; min-width:.8rem; text-align:center; }
.xz-time{ width:75%; margin: 0 auto; font-size: .3rem; }
.xz-time li{ border: 1px solid #ddd;
text-align: center;
border-radius: 60px;
padding:.2rem;
cursor: pointer;
margin-bottom:.2rem;
color: #919191;
font-size:.3rem;
font-weight: bold; letter-spacing:.04rem; }
.xz-time li:hover,.xz-time li.active{ background-color: #688f7e; color: #fff; border: 1px solid #688f7e; }
.xz-time li::before{ content: "";
display: inline-block;
width:.4rem;
height:.4rem;
background: url(../images/add.png) no-repeat center;
background-size: cover;
vertical-align: bottom;
margin-right:.2rem;}
.xz-time li:hover::before,.xz-time li.active::before{ background:url(../images/add-hover.png) no-repeat center; background-size: cover; }
.xz-time li svg{ width:.2rem; height:.2rem; vertical-align: sub; }
.xz-time li svg path{ fill:#666; }
.xz-time li:last-child{ margin-bottom:0px; }
/* points */
.cp-panel-pts-head{ display:flex; align-items:center; gap:.3rem; margin-bottom:.3rem; }
.cp-panel-pts-badge{
width:.4rem;
height:.4rem;
display: flex;
align-items: center;
justify-content: center;
font-size:.16rem;
}
.cp-panel-pts-title{ font-size:.28rem;
font-weight: 600;
display: inline-block; }
.cp-panel-pts-sub{ font-size: .22rem;
color: #688f7e;
font-weight: 500;
display: inline-block;
text-decoration: underline;
margin-left: .5rem;}
.cp-panel-pts-row{ display: flex;
gap: 0px;
width:75%;
margin: 0 auto;
position: relative; }
.cp-panel-pts-input{
flex: 1;
padding: .2rem .4rem;
border: 1px solid #e4e4e4;
border-radius: .48rem;
font-size: .28rem;
outline: none;
transition: border .3s;
font-family: inherit; width:100%;
}
.cp-panel-pts-input:focus{ border-color:#7a9d8e; }
.cp-panel-pts-btn{
padding: .05rem .06rem;
background: #e8e8e8;
border: none;
border-radius:.4rem;
width:.82rem;
height:.82rem;
font-size:.28rem;
font-weight: bold;
cursor: pointer;
transition: .3s;
position: absolute;
right: -.1rem;
}
.cp-panel-pts-btn:hover{ background:#7a9d8e; color:#fff; }
/* total */
.cp-panel-total{ display: flex;
justify-content: space-between;
align-items: flex-end;
width:75%;
margin: 0 auto; }
.cp-panel-total-left .cp-panel-total-lbl{ font-size:.28rem; color:#939393; }
.cp-panel-total-lbl span{ color:#939393; font-size:.28rem; }
.cp-panel-total-price{ font-size:.45rem; font-weight:700; }
/* confirm */
.cp-panel-confirm,.cp-panel-confirm-login{
width: 60%;
margin: 0 auto;
display: block;
margin-top:.22rem;
padding:.16rem;
background: #7a9d8e;
color: #fff;
border: none;
border-radius:1rem;
font-size:.28rem;
font-weight: 700;
cursor: pointer;
transition: .3s;
letter-spacing:.01rem;
text-align: center;
display: none;
}
.cp-panel-confirm.active,.cp-panel-confirm-login.active{ display:block; }
.cp-panel-confirm:hover{ background:#6b8e7f; }
/* ════════ RESPONSIVE ════════ */
@media(max-width:1024px){
.cp-hero{ grid-template-columns:1fr; }
.cp-main{ grid-template-columns:1fr; }
.cp-panel{ position:static; }
}
@media(max-width:640px){
.cp-hero,.cp-main{ padding:0 .18rem; }
.cp-crumb{ padding:.14rem .18rem 0; }
.cp-crumb-social{ right:.18rem; }
.cp-hero-name{ font-size:.22rem; }
.cp-rec-grid{ grid-template-columns:1fr; }
.cp-cal-wrap{ flex-direction:column; }
.cp-addr{ padding:0 .18rem; }
}
/* ── Container ── */
.faq{ width:100%; background:#7a9d8e; background: url(../images/gezibg.png) #fff; }
.fq-container{
width: 100%;
margin: 0 auto;
padding-bottom: .7rem;
padding-top: .8rem;
position:relative;
}
.fq-tab-icon svg{ width:.4rem; height:.4rem; vertical-align: sub; }
.fq-tab-icon svg path{ }
/* ── Header ── */
.fq-header{
text-align: center;
width: 80%;
margin: 0 auto;
position: relative; margin-bottom:.7rem; }
.flower-bottom-left-3{ bottom: -.8rem; left: 2rem; width: 1.8rem; }
.fq-header-icon{
width:.6rem; height:.6rem; background:#2c3e37; border-radius:50%;
display:flex; align-items:center; justify-content:center;
margin:0 auto .22rem; font-size:.36rem; color:#fff;
}
.fq-header-label{
font-size:.15rem; letter-spacing:.04rem; color:#7a9d8e;
margin-bottom:.12rem; font-weight:400;
color: #6b9080;
letter-spacing:.04rem;
text-transform: uppercase;
margin-bottom:.3rem;
font-size:.24rem;
font-weight: bold;
opacity: 0.9;
}
.fq-header-title{
font-size:.42rem; font-weight:700; color:#688f7e;
letter-spacing:.06rem;
}
/* ── Tabs ── */
.fq-tabs{
display:flex; justify-content:center; gap:0;
margin-bottom:.5rem; border-bottom:3px solid #d9d9d9;
width: 80%;
margin: 0 auto;
}
.fq-tab{
flex:1; padding:.25rem .2rem;
text-align:center; font-size:.35rem;
cursor:pointer; position:relative; transition:.3s;
display:flex; align-items:center; justify-content:center;
gap:.08rem; font-weight:500;
margin-bottom:-.02rem; font-weight:600;
}
.fq-tab-icon{ font-size:.18rem; }
.fq-tab:hover{ color:#688f7e; }
.fq-tab:hover svg path{ fill:#688f7e; }
.fq-tab.active{
color:#688f7e;
position:relative;
}
.fq-tab.active::before{ content:""; display: block; height:.08rem; width:100%; background:#688f7e; position:absolute; left:0; bottom:-.03rem; border-radius:.05rem; }
.fq-tab.active svg path{ fill:#688f7e; }
/* ── Accordion Items ── */
.fq-list{ width: 80%; margin: 0 auto; display:none; }
.fq-list.active{ display: block; }
.fq-list-all{ padding-bottom:1rem; }
.fq-item{
border-bottom:1px solid #ddd;
padding:.4rem 0; cursor:pointer; transition:.3s;
}
.fq-list-all .fq-item:last-child{ border:none; }
.fq-item:hover{ }
.fq-item-row{
display:flex; align-items:center; gap:.4rem;
}
.fq-item-icon{
width:.82rem;
height: .82rem;
border-radius: 50%;
border:.02rem solid #000;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size:.38rem;
color: #000;
font-weight: 500;
padding-bottom:.1rem;
flex-shrink: 0;
}
.fq-item-question{
flex:1; font-size:.35rem; font-weight:400;
}
.fq-item-toggle{
width:.52rem; height:.52rem; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:.60rem; color:#7a9d8e; font-weight:300;
flex-shrink:0; transition:transform .3s;
}
.fq-item.open .fq-item-toggle{ transform:rotate(45deg); }
.fq-item-answer{
max-height:0; overflow: hidden;
transition: max-height .3s ease;
padding-left: 1.2rem;
font-size:.3rem;
color: #688f7e;
font-weight: bold;
line-height: 1.8;
}
.fq-item.open .fq-item-answer{
max-height:2rem; padding-top:.18rem;
}
/* ── Responsive ── */
@media(max-width:768px){
.fq-container{ padding:.5rem .4rem .6rem; border-radius:30% 30% .2rem .2rem / 20% 20% .2rem .2rem; }
.fq-header-title{ font-size:.32rem; letter-spacing:.04rem; }
.fq-tabs{ flex-wrap:wrap; }
.fq-tab{ flex:1 1 45%; max-width:none; }
}
@media(max-width:480px){
.fq-container{ padding:40px 24px 50px; }
.fq-header-title{ font-size:28px; }
.fq-tabs{ flex-direction:column; }
.fq-tab{ max-width:none; }
.fq-item-row{ gap:12px; }
.fq-item-icon{ width:38px; height:38px; font-size:16px; }
.fq-item-question{ font-size:15px; }
.fq-item-answer{ padding-left:50px; }
}
/* ── Container ── */
.contact{ width: 100%; font-size:16px; background: url(../images/gezibg.png) #fff; position:relative; }
.tiao{ background:none; }
.flower-bottom-left-tiao{ bottom: -1rem; width: 1.9rem; left: 2rem; }
.flower-top-right-tiao{ right: 0; top: -1.3rem; }
.ct-container{
width: 100%;
margin: 0 auto;
padding: 1rem 0;
padding-bottom: 1rem;
}
.ct-forma{ padding-bottom: 1rem; }
/* ── Header ── */
.flower-bottom-left-2{ bottom:.6rem; left: 18%; width:1.8rem; }
.ct-header{ text-align:center; width: 80%; margin: 0 auto; position:relative; }
.tiaokuan-con{ width: 80%;
margin: 0 auto;
font-size: .3rem;
margin-top: 1rem;
position: relative;
line-height: 1.5;
letter-spacing: 4px;}
.tiaokuan-con ul{ padding-left: 17px; }
.tiaokuan-con ul li{ position:relative; padding-left:20px; }
.tiaokuan-con ul li:before,.tiaokuan-con ul li .marker{
display: block;
position: absolute;
left: 0px;
top: 1px; }
.tiaokuan-con ol{ margin-left:48px; }
.tiaokuan-con ol li{ list-style-type: auto; }
.ct-header-icon{
width:.6rem; height:.6rem; background:#2c3e37; border-radius:50%;
display:flex; align-items:center; justify-content:center;
margin:0 auto .22rem;
}
.ct-header-dots{ display:flex; gap:.05rem; }
.ct-header-dot{ width:.06rem; height:.06rem; background:#fff; border-radius:50%; }
.flower-bottom-left-tiao-1{ top:70%; right: -1.2rem; width: 1.8rem; z-index: -1; }
.flower-top-right-tiao-1{ top: 50%; left: -1.2rem; width: 1.8rem; z-index: -1; }
.ct-header-label{
color: #6b9080;
letter-spacing:.04rem;
text-transform: uppercase;
margin-bottom:.25rem;
font-size:.24rem;
font-weight: bold;
}
.ct-header-title{
font-size:.5rem;
color: #000000;
font-weight: 700;
letter-spacing:.18rem;
}
.ct-header-desc{
font-size:.32rem;
line-height: 1.7;
margin-top:1.05rem;
}
/* ── Form ── */
.ct-form{ width:80%; margin:0 auto; }
/* Row with two inputs */
.ct-form-row{
display:grid; grid-template-columns:1fr 1fr; gap:.4rem;
margin-bottom:.8rem;
}
.ct-form-group{ position:relative; }
.ct-form-label{
display: block;
font-size:.4rem;
color: #000000;
font-weight: 400;
margin-bottom:.25rem;
}
.ct-form-input{
border: none;
border-bottom: 1px solid #000000;
width: 100%;
padding: .22rem 0;
font-size: .4rem;
background:none;
color: #000000;
transition: border .3s, box-shadow .3s;
outline: none; font-family: inherit;
}
.ct-form-input:focus{ border-bottom-color:#688f7e; }
/* Phone with +886 prefix */
.ct-phone-wrapper{ position:relative; }
.ct-phone-prefix{
position: absolute;
left: 0;
bottom:.22rem;
font-size:.4rem;
pointer-events: none;
}
.ct-phone-input{
padding-left:.95rem;
}
/* ── Radio Buttons ── */
.ct-radio-section{ margin-bottom:.8rem; }
.ct-radio-label{display: block;
font-size: .4rem;
color: #000000;
font-weight: 400;
margin-bottom:.25rem; }
.ct-radio-group{ display:flex; flex-wrap:wrap; grid-gap: 1rem; row-gap: .2rem; }
.ct-radio-item{ display:flex; align-items:center; gap:.1rem; cursor:pointer; }
.ct-radio-circle{
width:.32rem;
height:.32rem;
border-radius: 50%;
border: 1px solid #aaa;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: .3s;
flex-shrink: 0;
}
.ct-radio-circle.selected{
border-color:#7a9d8e;
}
.ct-radio-circle.selected::after{
content:''; width:.15rem; height:.15rem; border-radius:50%;
background:#7a9d8e;
}
.ct-radio-text{ font-size:.35rem;
color: #000000;
font-weight: 400;}
/* ── Checkboxes ── */
.ct-checkbox-section{ margin-bottom:.8rem; }
.ct-checkbox-label{ display: block;
font-size:.4rem;
color: #000000;
font-weight: 400;
margin-bottom:.25rem;}
.ct-checkbox-grid{ display: flex;
flex-wrap: wrap;
grid-gap: 1rem;
row-gap: .2rem; }
.ct-checkbox-item{ display:flex; align-items:center; gap:.1rem; cursor:pointer; }
.ct-checkbox-box{
width:.3rem; height:.3rem; border:2px solid #aaa;
border-radius:.04rem; background:#fff;
display:flex; align-items:center; justify-content:center;
transition:.3s; flex-shrink:0;
}
.ct-checkbox-box.checked{
border-color:#7a9d8e; background:#7a9d8e;
}
.ct-checkbox-box.checked::after{
content:'✓'; color:#fff; font-size:.18rem; font-weight:700;
}
.ct-checkbox-text{ font-size:.35rem;
color: #000000;
font-weight: 400; }
/* Other with input */
.ct-checkbox-other{ display:flex; align-items:center; margin-top:.2rem; }
.ct-checkbox-other-input{
flex: 1;
border: none;
border-bottom: 1px solid #000000;
background: transparent;
outline: none;
transition: border .3s;
font-family: inherit;
font-size:.35rem;
color: #000000;
font-weight: 400; max-width:3rem;
}
.ct-checkbox-other-input:focus{ border-bottom-color:#7a9d8e; }
/* ── Email & Content ── */
.ct-full-group{ margin-bottom:.8rem; }
.ct-full-input{
flex: 1;
border: none;
border-bottom: 1px solid #000000;
background: transparent;
outline: none; padding-bottom:.1rem;
transition: border .3s;
font-family: inherit;
font-size:.4rem;
color: #000000;
font-weight: 400; width: 100%;
}
.ct-full-input:focus{ border-bottom-color:#7a9d8e; }
.ct-textarea{
width: 100%;
min-height:1.8rem;
padding:.18rem;
border: 1px solid #000000;
border-radius:.12rem;
background:none;
resize: vertical;
outline: none;
transition: border .3s;
font-family: inherit;
line-height: 1.7;
font-size:.4rem;
color: #000000;
font-weight: 400;
}
.ct-textarea:focus{ border-color:#7a9d8e; }
/* ── Captcha & Submit ── */
.ct-footer-row{
display:flex; justify-content:space-between;
align-items:center; gap:.30rem;
}
.ct-captcha-group{}
.ct-captcha-label{display: block;
margin-bottom:.25rem;
font-size:.4rem;
color: #000000; }
.ct-captcha-row{ display:flex; gap:.16rem; align-items:center; }
.ct-captcha-input{
width:2.3rem;
padding: .1rem 0rem;
border: none;
border-bottom: 1px solid #000000;
background: transparent;
outline: none;
transition: border .3s;
display: block;
font-size:.4rem;
color: #000000; font-family: inherit;
}
.ct-captcha-input:focus{ border-bottom-color:#7a9d8e; }
.ct-captcha-display{
padding:0; background:#f4e8a0;
border-radius:10px; font-size:.24rem; font-weight:700;
color:#2c3e37; letter-spacing:.04rem; overflow:hidden;
}
.ct-captcha-display img{ display:block; }
.ct-submit-btn{
width: 3.3rem;
padding:.18rem;
background: #6b9080;
color: #fff;
border: none;
border-radius:.5rem;
font-size:.3rem;
font-weight: 700;
cursor: pointer;
transition: background .3s, transform .2s;
letter-spacing: 1px;
}
.ct-submit-btn:hover{
background:#6b8e7f; transform:translateY(-2px);
}
/* ── Responsive ── */
@media(max-width:768px){
.ct-container{ padding:.5rem .4rem .6rem; border-radius:30% 30% .2rem .2rem / 20% 20% .2rem .2rem; }
.ct-header-title{ font-size:.32rem; letter-spacing:.04rem; }
.ct-form-row{ grid-template-columns:1fr; gap:.32rem; }
.ct-radio-group{ flex-direction:column; gap:.18rem; }
.ct-checkbox-grid{ grid-template-columns:1fr; }
.ct-footer-row{ flex-direction:column; align-items:flex-start; gap:.28rem; }
.ct-submit-btn{ width:100%; }
}
@media(max-width:480px){
.ct-container{ padding:.4rem .24rem .5rem; }
.ct-header-title{ font-size:.28rem; }
.ct-captcha-row{ flex-direction:column; align-items:flex-start; }
}
/* ── Layout ── */
.member{ background:#688f7e; font-size:16px; }
.mb-page{
width:90%;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns:3.9rem 1fr;
gap:.42rem;
align-items: start;
}
/* ════════════ LEFT SIDEBAR ════════════ */
.mb-sidebar{
background:#fff; padding:.4rem .3rem; box-shadow:0 .08rem .3rem rgba(0,0,0,.15);
}
.mb-profile-section{
text-align:center; margin-bottom:.35rem;
padding-bottom:35px; border-bottom:2px solid #eee;
}
.mb-avatar-wrapper{
width: 1.2rem;
height: 1.2rem;
margin: 0 auto .18rem;
border-radius: 50%;
overflow: hidden;
border:2px solid #faad14;
}
.mb-avatar-wrapper img{ width:100%; height:100%; object-fit:cover; }
.mb-profile-name{
font-size:.35rem;
font-weight: 700;
color: #000;
margin-bottom:.15rem;
}
.mb-profile-badge{
display: inline-flex;
align-items: center;
gap:.1rem;
font-size:.25rem;
color: #333;
font-weight: 600;
}
.mb-badge-icon{ width:.3rem; }
.mb-badge-icon img{ display: block; width:100%; }
/* Sidebar Menu */
.mb-menu{ border-radius:.2rem;
overflow: hidden; }
.mb-menu-item{
display: flex;
align-items: center;
gap:.18rem;
padding:.2rem .2rem;
cursor: pointer;
transition: .3s;
font-size:.2rem;
color: #333;
text-decoration: none; letter-spacing: .02rem;
border-bottom: 1px solid #e1e1e1;
}
.mb-menu-item:last-child{ border:0px; }
.mb-menu-item:hover{ background:#333333; color:#fff; }
.mb-menu-item .mb-menu-icon svg { width:.2rem; height:.2rem; }
.mb-menu-item.active .mb-menu-icon svg path,.mb-menu-item:hover .mb-menu-icon svg path{ fill:#fff; }
.mb-menu-item.active{
background:#333333; color:#fff;
}
.mb-menu-icon{ font-size:.2rem;
width:.24rem;
text-align: center;
margin-left:.83rem; }
/* ════════════ RIGHT PANEL ════════════ */
.mb-panel{
background:#fff;
padding:.6rem .6rem; min-height:100vh;
}
/* Header */
.mb-panel-header{ text-align:center; margin-bottom:.45rem; }
.mb-panel-icon{
width:.55rem;
height:.55rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto .18rem;
margin-bottom: 0px;
}
.mb-panel-label{
font-size:.15rem;
letter-spacing:.03rem;
color: #688f7e;
margin: .2rem 0;
font-weight: 600;
}
.mb-panel-title{
font-size:.28rem; font-weight:700; color:#333333;
letter-spacing:.04rem;
}
/* Form */
.mb-form{}
/* Row with multiple inputs */
.mb-form-row{
display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem;
margin-bottom:.5rem;
}
.mb-form-row-2{ grid-template-columns:repeat(2,1fr); }
.mb-form-group{ position:relative; }
.mb-form-label{
display: block;
font-size:.2rem;
color: #000000;
font-weight: 500;
margin-bottom:.25rem;
}
.mb-form-input{
width: 100%;
padding: 0 0 .12rem 0;
border: none;
border-bottom: 1px solid #333;
transition: border .3s;
font-size: .22rem;
color: #000000;
font-weight: 500;
font-family: inherit;
}
.mb-form-input:focus{ border-bottom-color:#688f7e; color:#688f7e; }
/* Phone with +886 prefix */
.mb-phone-wrapper{ position:relative; }
.mb-phone-prefix{
position: absolute;
left: 0;
bottom:.38rem;
pointer-events: none;
font-size:.22rem;
color: #000000;
font-weight: 500;
}
.mb-phone-input{ padding-left:.65rem; }
/* Birthday with calendar icon */
.mb-birthday-wrapper{ position:relative; }
.mb-calendar-icon{
position:absolute; right:0; bottom:.31rem;
font-size:.20rem; color:#ccc; pointer-events:none;
}
.mb-birthday-hint{
font-size:.14rem;
color: #688f7e;
margin-top: .06rem;
}
/* Radio buttons */
.mb-radio-group{ display:flex; gap:.18rem; padding-top:.08rem; }
.mb-radio-item{ display:flex; align-items:center; gap:.08rem; cursor:pointer; }
.mb-radio-circle{
width:.2rem; height:.2rem; border-radius:50%;
border:1px solid #333333; background:#fff;
display:flex; align-items:center; justify-content:center;
transition:.3s; flex-shrink:0;
}
.mb-radio-circle.selected{
border-color:#688f7e;
}
.mb-radio-circle.selected::after{
content: '';
width:.12rem;
height:.12rem;
border-radius: 50%;
background: #688f7e;
}
.mb-radio-text{ font-size:.2rem; color:#333333; user-select:none; }
/* Select dropdown */
.mb-select-wrapper{ position:relative; }
.mb-select{
width:100%; padding:0 .28rem .12rem 0;
border:none; border-bottom:1px solid #333333;
background:transparent; font-size:.16rem; color:#333333;
outline:none; transition:border .3s;
appearance:none; cursor:pointer;
}
.mb-select:focus{ border-bottom-color:#688f7e; }
.mb-select-arrow{
position:absolute; right:.1rem; bottom:0.41rem;
font-size:.14rem; color:#aaa; pointer-events:none;
}
/* Privacy note */
.mb-privacy-note{
margin-top:.35rem;
border-radius:.12rem;
font-size:.18rem;
color: #333;
line-height: 1.7;
}
.mb-privacy-note a{ color:#688f7e; text-decoration:none; }
.mb-privacy-note a:hover{ text-decoration:underline; }
.mb-privacy-note a:nth-child(2){ text-decoration: underline; }
/* Save Button */
.mb-save-btn{
margin-top:.35rem;
padding: .1rem .4rem;
background: #7a9d8e;
color: #fff;
border: none;
border-radius:.3rem;
font-size:.24rem;
font-weight: 700;
cursor: pointer;
transition: .3s;
letter-spacing: .02rem;
float: right;
}
.mb-save-btn:hover{
background:#6b8e7f; transform:translateY(-2px);
}
/* Clear float */
.mb-form::after{ content:''; display:table; clear:both; }
/* ── Responsive ── */
@media(max-width:1024px){
.mb-page{ grid-template-columns:1fr; }
.mb-sidebar{ max-width:100%; }
}
@media(max-width:768px){
.mb-panel{ padding:40px 30px; }
.mb-form-row, .mb-form-row-2{ grid-template-columns:1fr; }
.mb-radio-group{ flex-wrap:wrap; }
}
@media(max-width:480px){
.mb-panel{ padding:30px 20px; }
.mb-panel-title{ font-size:28px; }
.mb-save-btn{ width:100%; float:none; }
}
/* ── Container ── */
.or-container{
}
/* ── Header ── */
.or-header{
font-size:.28rem;
font-weight: 700;
color: #333333;
letter-spacing:.04rem;
margin-bottom:.3rem;
}
/* ── Table ── */
.or-table-wrapper{ overflow-x:auto; }
.or-table{
width:100%; border-collapse:collapse;
}
/* Table Header */
.or-table thead th{
padding:.18rem .15rem;
padding-left: 0px;
padding-top: 0;
text-align: left;
font-size:.18rem;
font-weight:bold;
color: #161616;
border-bottom: 1px solid #e1e1e1;
}
/* Table Body */
.or-table tbody td{
padding:.28rem .16rem; padding-left:0px; vertical-align:top;
border-bottom:1px solid #f0f0f0;
}
.or-table tbody tr:hover{
}
/* Date Column */
.or-date{
font-size:.18rem; color:#333333; font-weight:500;
}
/* Order Info Column */
.cp-rec-grid-favorite{ grid-template-columns: repeat(3, 1fr); gap:.2rem; }
.cp-rec-grid-favorite .card-image{ }
.cp-rec-grid-favorite .location{ font-size:.25rem;
margin-bottom:.05rem;
font-weight: bold; }
.cp-rec-grid-favorite .course-title {
font-size:.25rem;
font-weight: bold;
margin-bottom:.05rem;
line-height: 1.3;
}
.cp-rec-grid-favorite .card-content{ }
.cp-rec-grid-favorite .action-buttons::before{ background: url(../images/kcbg-2.png) no-repeat;
background-size: 100%; }
.cp-rec-grid-favorite .instructor {
font-size:.16rem;
margin-bottom:.1rem;
opacity: 0.95;
}
.cp-rec-grid-favorite .card-image img{ border-radius:.15rem; opacity:.4; }
.cp-rec-grid-favorite .tag{ padding: .05rem .1rem;
border-radius:.25rem;
font-size:.14rem; }
.cp-rec-grid-favorite .action-buttons{ bottom: 0px; right: 0; width: 160px; }
.cp-rec-grid-favorite .action-buttons img{ opacity: 1; border-radius: 0; }
.cp-rec-grid-favorite .action-buttons .btn-read{ padding: .15rem .15rem;
font-size: 16px;
height: 25px;
right: .38rem;
bottom: .05rem; }
.cp-rec-grid-favorite .action-buttons .btn-icon{ width: .30rem;
height: .30rem;
bottom: .05rem; }
.cp-rec-grid-favorite .course-card{ position: relative; }
.cp-rec-grid-favorite .course-card input{ position: absolute;
z-index: 5;
top: 30px;
right: 30px;
border: none;
background: #fff;
border-radius: 5px;
font-size: 14px;
padding: 5px 10px;
font-family: inherit;
cursor: pointer; opacity:0; }
.cp-rec-grid-favorite .course-card input:hover{ background:#688f7e; color:#fff; }
.cp-rec-grid-favorite .course-card:hover input{ opacity:1; }
.or-order-id{
font-size:.18rem;
color: #333;
font-weight: 500;
}
.or-order-status{
display: inline-block;
padding: .09rem 0;
font-size:.14rem;
font-weight: 500;
}
.or-status-upcoming{ color: #688f7e; }
.or-status-consumed{ color: #688f7e; }
.or-status-completed{ color: #688f7e; }
.or-order-link{
color: #60c0e9;
font-weight: 600;
font-size:.13rem;
cursor: pointer;
margin-left: 0;
display: block; text-decoration: underline;
}
.or-order-link:hover{ }
/* Course Info Column */
.or-course-title{
font-size:.18rem;
color: #333333;
font-weight: 500;
}
.or-course-location{
color: #688f7e;
display: inline-block;
padding: .09rem 0;
font-size:.14rem;
font-weight: 500;
}
.or-course-address{
font-size:.13rem; color:#999; margin-top:.03rem;
}
.or-course-date{
font-size:.14rem; color:#999;
}
/* People Count */
.or-people{
font-size:.18rem; color:#2c3e37; font-weight:500;
}
/* Price Column */
.or-price-main{
font-size:.18rem; color:#333; font-weight:500;
}
.or-price-original{
color: #aaa;
padding:.09rem 0rem;
font-size:.14rem;
font-weight: 500;
}
.or-price-discount{
color: #aaa;
font-size:.14rem;
font-weight: 500;
}
/* Action Buttons */
.or-actions{
display:flex; flex-direction:column; gap:.08rem;
}
.or-action-btn{
padding:.08rem .18rem; border:1px solid #d0d0d0;
border-radius:.08rem; font-size:.14rem; color:#555;
background:#fff; cursor:pointer; transition:.3s;
text-align:center; font-weight:500;
}
.or-action-btn:hover{
background:#f8f9fa; border-color:#7a9d8e; color:#7a9d8e;
}
/* ── Responsive ── */
@media(max-width:1024px){
.or-container{ padding:.4rem .3rem; }
.or-table thead th,
.or-table tbody td{ padding:.18rem .12rem; }
}
@media(max-width:768px){
.or-container{ padding:.30rem .2rem; }
.or-header{ font-size:.24rem; }
/* Stack table as cards on mobile */
.or-table, .or-table thead, .or-table tbody, .or-table tr, .or-table td, .or-table th{
display:block;
}
.or-table thead{ display:none; }
.or-table tbody tr{
margin-bottom:24px; padding:20px;
border:1px solid #e0e0e0; border-radius:12px;
}
.or-table tbody tr:hover{ background:#fff; }
.or-table tbody td{
padding:10px 0; border:none;
display:flex; justify-content:space-between;
align-items:flex-start;
}
.or-table tbody td .or-date::before{
content:attr(data-label);
font-weight:600; color:#666;
flex-shrink:0; width:100px;
}
.or-actions{ flex-direction:row; }
}
/* ── Container ── */
.ml-container{
max-width:13rem; margin:0 auto;
}
/* ── Header ── */
.ml-header{
font-size:.32rem; font-weight:700;
margin-bottom:.4rem; letter-spacing:.02rem;
}
/* ── Status Card ── */
.ml-status-card{
background: #f5f5f5;
border-radius:.15rem;
padding:.3rem;
margin-bottom:.4rem;
display: grid;
grid-template-columns: 5.05rem 1fr 2rem;
gap: .3rem;
align-items: center;
}
/* Left: Badge & Info */
.ml-badge-section{
display: grid;
align-items: center;
gap:.3rem;
position: relative;
align-content: center;
grid-template-columns: 1.2rem 1fr;
}
.ml-badge-section::after{ width: 1px;
height: 100%;
background: #e1e1e1;
margin-left:.15rem;
content:"";
display: inline-block;
position: absolute;
right: 0px; }
.ml-badge-icon{
width:1.2rem; height:1.2rem; border-radius:50%;
background:linear-gradient(135deg, #d0d0d0 0%, #a8a8a8 100%);
display:flex; align-items:center; justify-content:center;
font-size:.6rem; color:#fff; box-shadow:0 .06rem .2rem rgba(0,0,0,.15);
}
.ml-badge-info{}
.ml-badge-title{
font-size:.32rem; font-weight:700; color:#333333;
margin-bottom:.12rem; letter-spacing:1px;
}
.ml-badge-subtitle{
font-size:.22rem;
color: #333333;
margin:.1rem 0px;
letter-spacing: .02rem;
}
.ml-badge-subtitle span{ color:#688f7e; }
.ml-badge-id{
font-size:.16rem; color:#999;
}
.ml-review-btn{
padding: .06rem .1rem;
border: 1px solid #d0d0d0;
border-radius:.08rem;
font-size:.14rem;
color: #666;
cursor: pointer;
font-weight: 500;
transition: .3s;
display: inline-block;
vertical-align: middle;
margin-left:.7rem;
letter-spacing:0px;
}
.ml-review-btn:hover{
background:#f8f9fa; border-color:#7a9d8e; color:#7a9d8e;
}
/* Center: Progress */
.ml-progress-section{
display: flex;
flex-direction: column;
gap:.12rem;
position: relative;
padding-right:.3rem;
}
.ml-progress-section::after{ width: 1px;
height: 100%;
background: #e1e1e1;
margin-left:.15rem;
content: "";
display: inline-block;
position: absolute;
right:0px; }
.ml-progress-title{
font-size:.26rem;
font-weight: 600;
color: #333333;
letter-spacing:.04rem;
}
.ml-progress-amount{
display:flex; align-items:baseline; gap:.12rem;
}
.ml-progress-current{
font-size:.22rem;
font-weight: 500;
color: #688f7e;
}
.ml-progress-target{
font-size:.16rem; color:#999;
}
.ml-progress-bar-wrapper{
width:100%; height:.1rem; background:#e0e0e0;
border-radius:.06rem; overflow:hidden;
}
.ml-progress-bar{
height:100%; background:linear-gradient(90deg, #688f7e 0%, #688f7e 100%);
width:26%; transition:width .5s ease; border-radius:.06rem;
}
/* Right: Points */
.ml-points-section{
text-align:center;
}
.ml-points-label{
margin-bottom:.08rem;
font-size:.26rem;
font-weight: 600;
color: #333333;
letter-spacing:.02rem;
}
.ml-points-value{
font-size:.3rem;
font-weight: 500;
color: #688f7e;
}
/* ── Rules Card ── */
.ml-rules-card{
border-radius:.2rem;
padding:.25rem;
border: 1px solid #e1e1e1;
}
.ml-rules-period{
font-size:.18rem;
color: #688f7e;
font-weight: 600;
margin-bottom:.2rem;
line-height:.3rem;
border-bottom: 1px solid #688f7e;
display: inline-block;
}
.ml-rules-section{
margin-bottom:.3rem;
}
.ml-rules-section:last-child{ margin-bottom:0; }
.ml-rules-heading{
font-size:.18rem; font-weight:500; color:#333333;
margin-bottom:.1rem;
}
.ml-rules-list{
list-style:none; padding:0;
}
.ml-rules-list li{
font-size:.16rem;
color: #333333;
line-height: 2.2;
padding-left:.22rem;
position: relative;
}
.ml-rules-list li::before{
content:''; position:absolute; left:0; top:.16rem;
width:.06rem; height:.06rem; border-radius:50%;
background:#7a9d8e;
}
.ml-rules-text{
font-size:.16rem; color:#333333; line-height:1.9;
}
/* ── Responsive ── */
@media(max-width:1024px){
.ml-status-card{
grid-template-columns:1fr; gap:.3rem;
padding:.4rem .4rem;
}
.ml-badge-section{ flex-direction:column; text-align:center; }
.ml-points-section{ text-align:center; }
}
@media(max-width:768px){
.ml-status-card, .ml-rules-card{
padding:30px 25px;
}
.ml-header{ font-size:24px; }
.ml-badge-icon{ width:100px; height:100px; font-size:50px; }
.ml-badge-title{ font-size:26px; }
.ml-progress-current{ font-size:24px; }
.ml-points-value{ font-size:30px; }
}
@media(max-width:480px){
.ml-badge-section{ gap:20px; }
.ml-rules-card{ padding:25px 20px; }
}
.points-type{ border-bottom:1px solid #e1e1e1; }
.points-type ul{ display:flex; }
.points-type ul li{ flex:1; position:relative; padding:.2rem 0rem; }
.points-type ul li.active a{ color:#688f7e; }
.points-type ul li a{ flex: 1;
text-align: center;
color: #333333;
font-size:.32rem;
font-weight: bold;
letter-spacing:.01rem;
display: flex;
align-items: center;
justify-content: center;
cursor:pointer; }
.points-type ul li svg{ width:.4rem;
height:.4rem;
margin-right:.15rem; }
.points-type ul li svg path{}
.points-type ul li.active{ color:#688f7e; }
.points-type ul li.active svg path{ fill: #688f7e;; }
.points-type ul li.active::after{ content: "";
display: block;
width: 100%;
height:.1rem;
background: #688f7e;
position: absolute;
border-radius:.05rem;
bottom: -.05rem;}
.points-show{ min-height:5rem; margin-top:.3rem; }
.points-show-item{ display:none; }
.points-show-item.active{ display:block; }
.points-tip{ display: flex;
align-items: center;
gap:.3rem;
position: relative;
align-content: center;
grid-template-columns: 2.9rem 1fr; }
.points-tip-amount{ background: #f6f6f6;
padding:.25rem;
text-align: center;
font-size:.26rem;
font-weight: bold; border-radius:.1rem; }
.points-tip-amount span{ color: #688f7e; }
.points-tip-amount i{ display: inline-block;
width: 1px;
height:.2rem;
background: #333333;
margin: 0 .1rem;}
.points-tip-content{ line-height: 1.8;
font-size:.16rem;
color: #333333; }
.points-tip-content ul{ margin-left:.2rem; }
.points-tip-content ul li{ list-style-type: initial; }
.or-header-2{ font-size:.26rem;
font-weight: 700;
color: #333333;
letter-spacing:0px;
margin-bottom:.1rem; padding:0 .25rem; margin-top:.3rem; }
.points-tip-log{}
.points-tip-log li{display: grid;
align-items: center;
gap:.15rem;
position: relative;
align-content: center;
grid-template-columns: 1rem auto 1.8rem;
border-bottom: 1px solid #e1e1e1;
line-height: .7rem;
font-size: .18rem;
color: #333333;}
.points-tip-log span{}
.points-tip-log span i{ color: #688f7e;}
.points-tip-log span:first-child{ text-indent:.25rem; color: #688f7e; }
.points-tip-log span:last-child{ text-align: right;
padding-right:.25rem; }
.points-tip-log span.deduct{ color: #333; }
.points-tip-coupon{
display: grid;
grid-template-columns:1fr 1fr 1fr;
gap:.25rem;
margin-top:.3rem;
}
.points-tip-coupon li{
position: relative;
border: 1px solid #d7d7d7;
border-radius: .1rem;
}
.points-tip-coupon li.isok{ opacity:.5; user-select: none; /* 标准语法 */
-webkit-user-select: none; /* Safari 和 Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */}
.points-tip-coupon li.isok:before{
content: "已經使用/过期";
display: flex;
width: 100%;
height: 100%;
background: #fff;
text-align: center;
align-content: center;
align-items: center;
justify-content: center;
font-size: 30px;
opacity: .8;
position: absolute;
}
.points-tip-coupon li i{ display:none; }
.points-tip-coupon li i svg{ display: block; width: 100%; height: auto; }
.points-tip-coupon li .top-txt{
top: 0px;
left: 0px;
width: 100%;
overflow: hidden;
padding:.2rem;
right:.1rem;
box-sizing: border-box;
display: flex;
align-content: center;
align-items: center; }
.points-tip-coupon li .top-txt img{ float: left;
display: block;
width:.6rem;
height: auto;
margin-right:.15rem;}
.points-tip-coupon li .top-txt h3{ font-size:.16rem;
color: #333333; }
.points-tip-coupon li .top-txt p{ display: block;
font-size:.14rem;
margin: .05rem 0rem;
color: #333333; }
.points-tip-coupon li .top-txt time{ display: block;
font-size:.12rem;
color: #838383; }
.points-tip-coupon .line{ position: relative;
height: 1px;
width: calc(100% - .4rem);
margin: 0 auto;
background:#d7d7d7; }
.points-tip-coupon .line::before{ content: "";
display: inline-block;
border-right: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
border-bottom-right-radius: 70%;
width:.15rem;
height:.15rem;
transform: rotate(-45deg);
position: absolute;
left: -.28rem;
background: #fff;
top:-.08rem; }
.points-tip-coupon .line::after{
content: "";
display: inline-block;
border-right: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
border-bottom-right-radius: 70%;
width:.15rem;
height:.15rem;
transform: rotate(135deg);
position: absolute;
right: -.28rem;
background: #fff;
top:-.08rem;
}
.points-tip-coupon li .bott-txt { padding:.2rem;
font-size:.14rem;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;}
.points-tip-coupon li .bott-txt span{}
.points-tip-coupon li .bott-txt span.copybtn{ border: 1px solid #d7d7d7;
border-radius:.05rem;
float: right;
display: block;
padding: .05rem .1rem;
color: #838383; cursor:pointer; }
.points-tip-coupon li .bott-txt span.copybtn:hover{ border: 1px solid #688f7e; color:#688f7e; }
/* ── Container ── */
.rf-container{
max-width:11rem; margin:0 auto;
}
/* ── Header Section ── */
.rf-header{
text-align:center; margin-bottom:.6rem;
}
.rf-main-title{
font-size:.92rem;
font-weight: 900;
color: #000000;
letter-spacing: 0px;
}
.rf-subtitle{
font-size:.16rem;
color: #000000;
margin-bottom:.15rem;
font-weight: 400;
letter-spacing:1px;
}
.rf-promo-title{
font-size:.32rem; font-weight:700; color:#000000;
margin-bottom:.3rem; letter-spacing:.02rem;
}
.rf-divider{
width:.6rem;
height:.05rem;
background: #000000;
margin: 0 auto;
}
/* ── Description ── */
.rf-description{
font-size:.24rem;
color: #000000;
line-height: 2.2;
margin-bottom:.15rem;
text-align: center;
}
/* ── Referral Link Section ── */
.rf-link-section{
display: flex;
align-items: center;
justify-content: center;
gap: 0px;
margin-bottom:.7rem;
margin: 0 auto;
width: 6.5rem;
}
.rf-link-box{
flex: 1;
max-width: 6rem;
padding: .12rem .16rem;
border: 1px solid #525252;
border-radius:.12rem;
background: #fff;
font-size:.18rem;
color: #000000;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: bold;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.rf-copy-btn{
padding: .13rem .19rem;
background: #333333;
color: #fff;
border: none;
border-radius:.12rem;
font-size:.18rem;
font-weight: 700;
cursor: pointer;
transition: .3s;
white-space: nowrap;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.rf-copy-btn:hover{
background:#000000;
}
/* ── Steps Section ── */
.rf-steps-section{
margin-bottom:.7rem; margin-top:.5rem;
}
.rf-steps-title{
font-size:.26rem; font-weight:700; color:#333333;
text-align:center; margin-bottom:.3rem; letter-spacing:.02rem;
}
.rf-steps-grid{
display:grid; grid-template-columns:repeat(3,1fr);
gap:.4rem;
}
.rf-step-item{
text-align:center;
}
.rf-step-icon-wrapper{
width:.85rem; height:.85rem; margin:0 auto .2rem;
border-radius:50%; background:#6b9080;
display:flex; align-items:center; justify-content:center;
}
.rf-step-icon{
font-size:.56rem; color:#fff;
}
.rf-step-icon svg{ width:.46rem;
height:.46rem; }
.rf-step-icon svg path{ fill:#fff; }
.rf-step-item:nth-child(2) svg path{ fill:none }
.rf-step-number{
font-size:.16rem;
color: #6e6e6e;
margin-bottom:.05rem;
}
.rf-step-title{
font-size:.16rem;
color: #6e6e6e;
margin-bottom:.1rem;
}
.rf-step-desc{
font-size:.14rem; color:#666; line-height:1.8;
}
.rf-step-note{
font-size:.13rem; color:#999; margin-top:.06rem;
}
/* ── Bottom Section ── */
.rf-bottom-grid{
display: grid;
grid-template-columns: 2.4rem 1fr;
gap:.4rem;
align-items: start;
}
/* Stats Card */
.rf-stats-card{
border-radius:.2rem;
padding:.4rem .35rem; background: #f6f6f6;
text-align:center;
}
.rf-stats-label{
font-size:.23rem; color:#333333; margin-bottom:.25rem;
font-weight:600;
}
.rf-stats-number{
font-size:.33rem;
font-weight: 700;
color: #688f7e;
margin-bottom:.30rem;
}
.rf-stats-sublabel{
font-size:.2rem;
color: #333333;
font-weight: 500;
}
/* Terms Card */
.rf-terms-card{
}
.rf-terms-title{
font-size:.22rem;
font-weight: 700;
color: #333333;
margin-bottom:.15rem;
}
.rf-terms-intro{
font-size:.18rem; color: #333333;
line-height: 1.9;
margin-bottom:.05rem;
}
.rf-terms-list{
list-style:none; padding:0;
}
.rf-terms-list li{
font-size:.16rem;
color: #333333;
padding:.05rem 0;
padding-left:.2rem;
position: relative;
}
.rf-terms-list li::before{
content: attr(data-number);
position: absolute;
left: 0;
top:.05rem;
color: #333333;
}
/* ── Responsive ── */
@media(max-width:1024px){
.rf-main-title{ font-size:.56rem; }
.rf-steps-grid{ grid-template-columns:1fr; gap:.5rem; }
.rf-bottom-grid{ grid-template-columns:1fr; }
}
@media(max-width:768px){
.rf-main-title{ font-size:.42rem; }
.rf-promo-title{ font-size:.24rem; }
.rf-link-section{ flex-direction:column; }
.rf-link-box{ max-width:100%; }
.rf-terms-card{ padding:.35rem .3rem; }
}
@media(max-width:480px){
.rf-main-title{ font-size:36px; }
.rf-step-icon-wrapper{ width:100px; height:100px; }
.rf-step-icon{ font-size:48px; }
.rf-stats-number{ font-size:48px; }
}
.lecturer{ display: flex;
gap:.15rem;
align-items: center;
width: 80%;
margin: 0 auto; margin-top:1rem; position:relative; }
.flower-center-left { top: 50%;
margin-left: -1.2rem;
z-index: 1;
width: 1.8rem;
margin-top: .8rem; }
.flower-bottom-right-1{ top: auto; right: -1rem; bottom: -.6rem; }
.lecturer ul{ display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap:.4rem;
row-gap:.95rem;
margin: 0 auto .5rem; position:relative; z-index:5; }
.lecturer ul li{}
.lecturer ul li a{ display: block;
position: relative;
border-radius: 1.7rem;
overflow: hidden;
border: 1px solid #000000; }
.lecturer ul li a img{ display: block; width: 100%; transition: all 0.5s ease-in; }
.lecturer ul li a:hover{ border: 1px solid #688f7e; }
.lecturer ul li a:hover img{ transform:scale(1.05); }
.lecturer ul li a span{ position: absolute;
left: 50%;
width: 1.2rem;
margin-left: -.6rem;
text-align: center;
color: #000;
border-radius: .25rem;
padding: .05rem 0;
letter-spacing: .02rem;
font-weight: 600;
font-size:.18rem;
display: block;
background: #d9a4b1;
bottom:.3rem; transition: all 0.5s ease-in; display: flex;
justify-content: center; }
.lecturer ul li a span img{ display: block;
width: .2rem;
height: auto;
margin-right: .03rem; }
.lecturer ul li a:hover span{ transform:scale(1.05); bottom:.35rem; }
.lecturer ul li:nth-child(2n) a span{ background: #719c8b; }
.lecturer ul li:nth-child(3n) a span{ background: #a790e0; }
.lecturer ul li:nth-child(4n) a span{ background: #d9a4b1; }
.lecturer ul li:nth-child(5n) a span{ background: #e3bb90; }
.lecturer ul li:nth-child(6n) a span{ background: #e4d78e; }
.lecturer-pro{ margin-top:.8rem; font-size:16px; }
.lecturer-pro h2{ font-family: "Great Vibes", cursive; font-size:.98rem; font-weight: 500; margin-bottom:.3rem; }
.lecturer-pro p{ background: #719c8a;
color: #fff;
display: inline-block;
margin: 0 auto;
padding: .05rem .22rem;
font-size: .25rem;
letter-spacing: .04rem;
font-weight: 300;
border-radius: .6rem;}
.lecturer-tag{ display: flex;
justify-content: center;
padding:.7rem 0;
gap:.3rem; }
.lecturer-tag li{ font-size:.25rem; position:relative; }
.lecturer-tag li i{ color: #688f7e;
font-weight: bold;
margin-right:.1rem; }
.lecturer-tag li::after{ content: "";
display: block;
height: 60%;
width: 1px;
background-color: #000;
position: absolute;
right: -.15rem;
top:.08rem; }
.lecturer-tag li:last-child::after{ display:none; }
.lecturer-banner{ background-color:#fff; }
.lecturer-banner img{ display:block; width:100%; }
.lecturer-profile{ background: #fff;
padding: 1.1rem 0rem; }
.lecturer-icon{ background: #cccccc;
margin: 0 auto;
text-align: center;
width: 2.2rem;
height: .76rem; }
.lecturer-icon svg{ margin-top:.35rem; }
.lecturer-txt{ width: 12rem;
margin: 0 auto;
text-align: center;
margin-top: 1.1rem;
font-size:.28rem;
color: #333333; }
.lecturer-txt-2{ width:80%; margin:0 auto; display: grid;
margin: 0 auto;
grid-template-columns: 1fr 1fr;
grid-gap:1.6rem; justify-content: space-between; margin-top: 1.2rem; }
.lecturer-txt-2 li{ border: 1px solid #9a9a9a; padding:.75rem .6rem; position:relative; }
.lecturer-txt-2 li span{ position: absolute;
background: #fff;
padding: 0rem .3rem;
left: 0px;
top: -.3rem; display:flex; }
.lecturer-txt-2 li span svg{ display: inline-block;
vertical-align: super; margin-top:.24rem; }
.lecturer-txt-2 li span i{ display: block;
position: relative;
z-index: 5;
font-weight: 600;
font-family: 思源宋体 CN;
font-size:.37rem;
margin-left:.2rem;
padding: 0rem .15rem;}
.lecturer-txt-2 li span i::after{ content: "";
display: block;
background: #b8cdc4;
position: absolute;
width: 100%;
height:.24rem;
bottom: -1px;
z-index: -1;
left: 0%; }
.lecturer-txt-2 li p{ font-size:.28rem; color: #333333; }
.lecturer-txt-2 li:nth-child(2n) span{ flex-direction: row-reverse;
top: auto;
bottom: -.26rem;
left: auto;
right: 0px; }
.lecturer-txt-2 li:nth-child(2n) span i{ margin-left:0px; }
.lecturer-txt-2 li:nth-child(2n) span svg{ margin-left:.2rem; }
/* ── Swiper Container ── */
.lecturer-soulab{ background: #f7f7f7;
padding: 1.1rem 0px; }
.cs-swiper-wrapper{
position:relative; padding:0 0 .8rem 0;
width:100%; margin: 0 auto;
}
.csSwiper{
overflow:hidden; padding:.2rem; width: calc(80% + .4rem);
}
/* ── Course Card ── */
.cs-course-card{
background:#fff;
overflow:hidden; box-shadow: 0 .01rem .1rem rgba(0, 0, 0, .08);
transition:transform .3s, box-shadow .3s;
height:auto; display:flex; flex-direction:column;
}
.cs-course-card:hover{
transform:translateY(-.08rem);
}
/* Card Top Section */
.cs-card-top{
padding:1.65rem .6rem .6rem; position:relative;
}
.cs-card-number{
position: absolute;
top:.5rem;
right:.4rem;
font-size:1.53rem;
font-weight: 900;
color: #f5f5f5;
line-height: 1;
user-select: none;
font-family: 思源宋体 CN;
}
.cs-card-instructor{
font-size:.28rem;
color: #333333; font-weight:500; width:90%;
margin-bottom:.35rem; position:relative; z-index:1;
}
.cs-card-title{
font-size:.16rem; color:#666; margin-bottom:.25rem;
position:relative; z-index:1; line-height:1.6;
}
.cs-card-desc{
font-size:.18rem;
color: #999;
position: relative;
z-index: 1;
}
.cs-card-divider{
width:100%; height:.02rem; background:#e6e6e6;
margin:.58rem 0; position:relative; margin-bottom:0px;
}
.cs-card-divider::before{ content:""; width:28%; background-color:#688f7e; height:.02rem; position:absolute; left:0px; top:0px; }
/* Card Image Section */
.cs-card-image-wrapper{
position:relative; width:100%; height:3rem;
overflow:hidden;
}
.cs-card-image{
width: calc(100% - .6rem); height:100%; object-fit:cover;
}
.cs-card-enroll-btn{
position: absolute;
bottom: 0px;
right: 0px;
padding: .14rem .32rem;
background: #688f7e;
color: #fff;
border: none;
font-size:.22rem;
cursor: pointer;
transition: .3s;
}
.cs-card-enroll-btn:hover{
background:#6b8e7f; transform:translateY(-2px);
}
/* Card Bottom Section */
.cs-card-bottom{
padding:.40rem .6rem; display:flex;
justify-content:space-between; align-items:baseline;
}
.cs-card-price-section{}
.cs-card-price-current{
font-size:.35rem; font-weight:700; color:#000000;
display:block; margin-bottom:.06rem;
}
.cs-card-price-original{
font-size:.2rem;
font-weight: 300;
color:#999;
}
.cs-card-price-original i{ text-decoration:line-through; margin-left:.1rem; }
/* ── Pagination ── */
.cs-pagination{
display:flex; justify-content:center; align-items:center;
gap:.12rem; margin-top:.5rem;
}
.cs-pagination-arrow{
width:.4rem; height:.4rem; border-radius:50%;
border:2px solid #d0d0d0; background:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:.3s; font-size:.18rem; color:#666;
}
.cs-pagination-arrow:hover{
background:#7a9d8e; border-color:#7a9d8e; color:#fff;
}
.cs-pagination-bullet{
width:.4rem; height:.4rem; border-radius:50%;
border:2px solid #d0d0d0; background:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:.3s;
font-size:.16rem; font-weight:600; color:#666;
}
.cs-pagination-bullet:hover{
background:#f8f9fa; border-color:#7a9d8e; color:#7a9d8e;
}
.cs-pagination-bullet.active{
background:#7a9d8e; border-color:#7a9d8e; color:#fff;
}
/* ── Responsive ── */
@media(max-width:1200px){
.cs-card-top{ padding:.4rem .3rem .3rem; }
.cs-card-bottom{ padding:.2rem .3rem; }
}
@media(max-width:768px){
.cs-card-number{ font-size:90px; top:20px; right:30px; }
.cs-card-top{ padding:35px 25px 25px; }
.cs-card-bottom{ padding:18px 25px; }
.cs-card-price-current{ font-size:24px; }
}
.lg-register{ display:none;
z-index: 100;
opacity: 1;
background: #fff;
border-radius: .3rem;
padding: .5rem .65rem;
max-width: 5.9rem;
width: 100%;
position: fixed;
left: 50%;
margin-left: -2.95rem;
top: 1rem;
transition: .3s;
box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .3); font-size: 16px; }
.lg-register.active{ display:block; }
/* ── Modal Container ── */
.lg-modal{
z-index:-10;
background: #fff;
border-radius:.3rem;
padding:.5rem .65rem;
max-width:5.9rem;
width: 100%;
position:fixed;
left: 50%;
margin-left: -2.95rem;
top: 1rem;
transition:.3s; opacity:0; box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .3);
font-size:16px;
}
.lg-modal.active{ display:block; top: 1.8rem; z-index:100; opacity:1; }
/* Close Button */
.lg-close-btn{
position: absolute;
top:.4rem;
right:.4rem;
width:.2rem;
height:.2rem;
border: none;
background: transparent;
cursor: pointer;
font-size:.28rem;
color: #ccc;
transition: .3s;
line-height: 1;
padding: 0;
}
.lg-close-btn svg{ width:100%; height:100%; }
.lg-close-btn svg path{ fill:#666; }
.lg-close-btn:hover{ color:#666; }
.lg-close-btn:hover svg path{ fill:#000; }
/* Header */
.lg-header{
text-align:center; margin-bottom:.4rem;
}
.lg-title{
font-size:.36rem;
font-weight: 700;
color: #000000;
margin-bottom:.1rem;
letter-spacing: .05rem;
}
.lg-title::before{
content:'“'; margin-right:.08rem; color:#000000;
}
.lg-subtitle{
font-size:.25rem;
color: #666666;
}
.lg-register-link{
color: #688f7e;
text-decoration: underline;
cursor: pointer;
margin-left: 0;
display:inline-block;
}
.lg-register-link:hover{ color:#6b8e7f; }
.lg-login-link{
color: #688f7e;
text-decoration: underline;
cursor: pointer;
margin-left: 0;
display:inline-block;
}
.lg-login-link:hover{ color:#6b8e7f; }
/* Form */
.lg-form{}
.lg-input-group{
margin-bottom:.22rem; position:relative;
}
.regshowkey { font-size: 14px;
position: absolute;
right: 0px;
top: .25rem; }
.lg-input-wrapper{
display: flex;
border: 1px solid #a1a1a1;
border-radius:.12rem;
overflow: hidden;
transition: border .3s; position:relative;
}
.getcode{ font-size: .2rem;
position: absolute;
right: 0px;
padding: 10px;
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: underline;
border: none;
background: none;
}
.lg-input-wrapper:focus-within{
border-color:#7a9d8e;
}
.lg-phone-prefix{
padding:.1em .25rem;
border-right: 1px solid #a1a1a1;
font-size:.3rem;
color: #000000;
font-weight: 400;
display: flex;
align-items: center;
}
.lg-input{
flex: 1;
padding:.2rem .25rem;
border: none;
font-size:.3rem;
color: #2c3e37;
outline: none;
box-sizing: border-box;
width: 100%;
}
.lg-input::placeholder{ color:#bbb; }
/* Remember & Forgot Row */
.lg-options-row{
display:flex; justify-content:space-between;
align-items:center; margin-bottom:.28rem;
}
.lg-remember-group{
display:flex; align-items:center; gap:.1rem;
cursor:pointer;
}
.lg-checkbox{
width:.25rem;
height:.25rem;
border: 1px solid #a1a1a1;
border-radius:.04rem;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: .3s;
flex-shrink: 0;
}
.lg-checkbox.checked{
background:#7a9d8e; border-color:#7a9d8e;
}
.lg-checkbox.checked::after{
content:'✓'; color:#fff; font-size:.14rem; font-weight:700;
}
.lg-remember-label{
font-size:.2rem;
color: #555;
user-select: none;
font-weight: bold;
}
.lg-forgot-link{
font-size:.2rem;
color: #688f7e;
cursor: pointer;
font-weight: 500;
}
.lg-forgot-link:hover{ text-decoration:underline; }
/* Login Button */
.lg-submit-btn{
width:2.95rem;
margin: 0 auto;
display: block;
padding:.18rem;
background: #688f7e;
color: #fff;
border: none;
border-radius:.6rem;
font-size:.3rem;
font-weight: 500;
cursor: pointer;
transition: .3s;
letter-spacing:.02rem;
}
.lg-submit-btn:hover{
background:#6b8e7f; transform:translateY(-2px);
}
/* Divider */
.lg-divider{
height:1px; background:#a1a1a1;
margin:.35rem 0;
}
/* Teacher Section */
.lg-teacher-section{
display: flex;
align-items: center;
gap:.2rem;
border-radius:.16rem;
justify-content: center; font-size:16px;
}
.lg-teacher-icon{
width:.8rem;
height:.8rem;
border-radius: 50%;
background: #688f7e;
display: flex;
align-items: center;
justify-content: center;
font-size:.36rem;
flex-shrink: 0;
}
.lg-teacher-content{}
.lg-teacher-title{
font-size:.25rem;
font-weight: 700;
margin-bottom:.06rem;
letter-spacing:.02rem;
}
.lg-teacher-link{
font-size:.25rem;
color: #688f7e;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap:.06rem;
letter-spacing:.05rem;
}
.lg-teacher-link:hover{ text-decoration:underline; }
/* Responsive */
@media(max-width:540px){
.lg-modal{ padding:.45rem .35rem .4rem; }
.lg-title{ font-size:.28rem; }
.lg-teacher-section{ flex-direction:column; text-align:center; }
}
@media(max-width:400px){
.lg-modal{ padding:.4rem .25rem .35rem; }
.lg-options-row{ flex-direction:column; gap:15px; align-items:flex-start; }
}
.ui-rangeslider-sliders .ui-slider-bg{ background:#688f7e; }
.ui-rangeslider-sliders a{ background:#688f7e; }
/* ══════════ HERO SECTION ══════════ */
.ld-hero{
position:relative; width:100%; min-height:500px;
overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.ld-hero-image{
width: 100%;
height: 100%;
margin-top: -50px;
object-fit: cover;
border-radius: 0 0 50% 50% / 0 0 40% 40%;
}
.ld-hero-card{
position: absolute;
top: 110px;
right: 5%;
background: #fff;
padding: .38rem .8rem;
max-width: 4.5rem;
text-align: center;
}
.ld-hero-card-subtitle{
font-size: .39rem;
margin-bottom: 0;
letter-spacing: 1px;
line-height: 1.5;
font-weight:600;
}
.ld-hero-card-subtitle span{font-size: .46rem;display: block; font-weight:600;}
.ld-hero-card-title{
color: #000000;
letter-spacing: 2px;
font-size: 1.4rem;
font-weight:600;
line-height: 1;
}
.ld-hero-card-desc{
font-size: .39rem;
letter-spacing: 1px;
font-weight:600;
}
.ld-hero-card-desc span{font-size: .46rem;display: block;}
/* ══════════ INTRO SECTION ══════════ */
.ld-intro{
max-width: 100%;
margin: 0;
color: #606060;
padding-bottom:.8rem;
position: relative;
font-weight:bold;
}
.ld-intro-quote{
font-size: 1.5rem;
font-weight: 900;
line-height: 1;
margin-bottom: .2rem;
font-family: unset;
text-indent: 0px;
text-align: left;
color: #606060;
left: 5%;
margin-left: -.4rem;
position: absolute;
}
.ld-intro-title{
font-size: .32rem;
font-weight: 700;
color: #2c3e37;
letter-spacing: 2px;
width: 75%;
margin: 0 auto;
padding-top: .6rem;
}
.ld-intro-title img{ display: block; width: 2.25rem; }
.ld-intro-subtitle{
font-size: .4rem;
color: #4d4d4d;
letter-spacing: 2px;
width: 75%;
margin: 0 auto;
margin-bottom: .35rem;
margin-top: .15rem;
}
.ld-intro-text{
font-size: .3rem;
color: #4d4d4d;
line-height: 1.7;
width: 75%;
margin: 0 auto;
}
.ld-intro .bg{ position: absolute;
top: -3rem;
left: -1rem;
z-index: -1;
width:88%; }
.ld-intro .bg img{ display: block; width:100%; }
/* ══════════ FEATURE CARDS ══════════ */
.ld-features{
width: 75%;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap:.5rem;
position:relative;
}
.ld-feature-card{
border-radius: .15rem;
padding: .37rem .18rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: .05rem .05rem .08rem rgb(0 0 0 / 20%);
border-left: .26rem solid;
background: url(../images/bg1.jpg);
color: #4d4d4d;
}
.ld-feature-card:nth-child(4), .ld-feature-card:nth-child(5), .ld-feature-card:nth-child(6) {
transform: translateX(.9rem);
}
.ld-feature-card:hover{
box-shadow:0 .12rem .35rem rgba(0,0,0,.12);
}
.ld-feature-card.green{ border-left-color:#719b8a; }
.ld-feature-card.yellow{ border-left-color:#e3d68d; }
.ld-feature-card.blue{ border-left-color:#80b4d5; }
.ld-feature-card.pink{ border-left-color:#d8a3b0; }
.ld-feature-card.orange{ border-left-color:#e2ba8f; }
.ld-feature-card.purple{ border-left-color:#a68fdf; }
.ld-feature-title{
font-weight: 700;
letter-spacing: 1px;
font-size: .3rem; padding: 0 .1rem;
}
.ld-feature-divider{
display: flex;
gap: .04rem;
margin: .2rem 0px;
background: url(../images/dianbg.png);
background-repeat: no-repeat;
height: .07rem;
opacity: 0.3;
}
.ld-feature-desc{
font-size: .23rem;
font-weight:bold;
line-height: 1.5; padding: 0 .1rem;
}
.svg_a{ display: inline-block;
position: absolute;
top: auto;
bottom: -3.5rem;
left: 3%; }
.svg_b{ display: inline-block;
position: absolute;
top: 3rem;
left: 50%;
margin-left: -1rem; width: 1.6rem; }
.svg_b svg,
.svg_c svg{ display:block; width:100%; height:auto; }
.svg_c{ display: inline-block;
position: absolute;
top:37%;
left: 50%;
margin-left: 2.4rem; width:2.3rem; }
/* ══════════ MISSION SECTION ══════════ */
.ld-mission{
position:relative; overflow: hidden;
}
.ld-mission .bg{ background: url(../images/tzg_bg.jpg) right bottom;
position: absolute;
top: 0px;
height: 100%;
width: 68%;
z-index: -2; }
.ld-mission-bg-text{
position: absolute;
left: 70%;
top: 25%;
transform: translateY(-50%);
font-size: .4rem;
font-weight: 900;
line-height: 1;
z-index: 0;
user-select: none;
writing-mode: vertical-rl;
letter-spacing: 1px;
}
.ld-mission-bg-text::before{content: "";
display: inline-block;
width: .28rem;
height: 1px;
background: #000;
transform: rotate(45deg);
margin-bottom: 20px; }
.ld-mission-content{
position:relative;
z-index:1;
color: #231815;
width:80%;
margin: 0 auto;
padding: 4rem 0px;
padding-bottom:.45rem;
}
.ld-mission-title{
font-weight:bold;
color: #231815;
margin-bottom:10px;
letter-spacing:1px;
font-size: .4rem;
}
.ld-mission-highlight{
font-weight: bold;
color: #231815;
margin-bottom: .5rem;
letter-spacing:1px;
font-size: .4rem;
}
.ld-mission-block{
margin-bottom: .7rem;
}
.ld-mission-block-title{
font-weight: bold;
color: #231815;
/* margin-bottom:12px; */
letter-spacing:.5px;
font-size: .4rem;
}
.ld-mission-block-text{
font-size:16px;
color: #231815;
/* line-height:2; */
letter-spacing:.5px;
font-size: .4rem;
font-weight: bold;
}
/* ══════════ DESIGN YOUR LIFE SECTION ══════════ */
.ld-design{
width: 80%;
margin: 0 auto;
position: relative;
padding-bottom:1rem;
}
.ld-design-left{ position:relative; }
.ld-design-title{
font-size: 1.45rem;
font-weight: 600;
color: #E6EA7A;
line-height:1.2;
margin-bottom:.6rem;
letter-spacing:2px;
font-style: italic;
font-family: auto;
}
.ld-design-cta{
align-items: center;
border-radius: 50px;
font-size: .38rem;
letter-spacing: 1px;
font-weight: 700;
color: #2c3e37;
cursor: pointer;
transition: transform .3s;
text-decoration: none;
position: relative;
display: inline-block;
padding: .6rem 1.4rem;
padding-left: .7rem;
padding-right: 2rem;
}
.ld-design-cta span{ display: block; }
.svg_f{ position: absolute;
z-index: -1;
top: 0;
width: 100%;
left: 0; }
.svg_f svg{ width:100%; height:auto; }
.ld-design-cta:hover{
transform:translateY(-3px);
}
.ld-design-cta:hover .ld-design-icon{ transform: rotate(43deg); }
.ld-design-icon{
width: .8rem;
height: .8rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: .9rem;
top: 31%;
transition: transform .3s;
}
.ld-design-icon svg{ width:100%; height:auto; }
.ld-design-right{
position: absolute;
top: -1.3rem;
right: -4%;
}
.svg_h{ display: inline-block;
position: absolute;
bottom: 0px;
left:45%;
width: 1rem; }
.svg_h svg{ width: 100%;
height: auto; }
.ld-design-bubble{
color: #fff;
font-size: .45rem;
text-align: center; font-weight:600;
}
.ld-design-bubble-text{
/* line-height:2; */
letter-spacing:1px;
margin-bottom: .5rem;
}
.ld-design-bubble-highlight{
/* line-height:1.9; */
letter-spacing:.5px;
}
.ld-design-flower{
position:absolute; bottom:-20px; right:20px;
width:60px; height:60px; opacity:.6;
}
.ld-hero-card .line{
width: 1px;
height: .8rem;
background: #000;
display: block;
margin: .25rem 0px;
margin-left: .5rem;
}
.svg_d{ position: absolute;
top: -2rem;
z-index: -1;
width: 155%;
left: -21%; }
.svg_d svg,.svg_e svg{ width:100%; height:auto; }
.svg_e{ position: absolute;
bottom: -3.2rem;
right: -8%;
z-index: -1;
width: 1.7rem;}
/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1024px){
.ld-features{ grid-template-columns:repeat(2,1fr); }
.ld-design{ grid-template-columns:1fr; gap:50px; }
.ld-mission-bg-text{ font-size:120px; }
}
@media(max-width:768px){
.ld-hero-card{
position:static; margin:30px auto 0;
max-width:90%;
}
.ld-intro, .ld-features, .ld-mission, .ld-design{
padding:0 30px;
}
.ld-features{ grid-template-columns:1fr; }
.ld-design-title{ font-size:48px; }
.ld-mission-bg-text{ display:none; }
}
@media(max-width:480px){
.ld-hero-card-title{ font-size:36px; letter-spacing:4px; }
.ld-intro-quote{ font-size:56px; }
.ld-design-title{ font-size:36px; }
}