@font-face {
    font-family: myFont;
    src: url('../fonts/Montserrat-Regular.ttf');
}
.sticky-wrapper {
    position: relative;
    height: 0;
}

.sticky-wrapper .uk-card {
    position: sticky;
    top: 20px;
    transition: all 0.3s ease;
}

.uk-width-2-3 {
    position: relative;
}

@font-face {
    font-family: myFont01;
    src: url('../fonts/Montserrat-Regular.ttf');
}

html,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
.uk-heading-2xlarge,
.uk-heading-large,
.uk-heading-medium,
.uk-heading-small,
.uk-heading-xlarge,
.uk-button,
.uk-navbar-nav>li>a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
a,
span,
i,
pre,
b
{
    font-family: myFont!important;
    font-weight: normal;
}

html {
    scroll-behavior: smooth;
}

.bg-main {
    background-color: #1a2032;
}

.bg-01 {
    background-color: #151b2e;
}

.bg-02 {
    background-color: #3e0b64;
}

.bg-03 {
    background-color: #1e1a30;
}

.bg-04 {
    background-color: #111;
}
.bg-05 {
    background-color: #f5b23d;
}
.bg-06 {
    background-color: #e3dff8;
}
.uk-font-01 {
    font-family: myFont01 !important;
}
.uk-text-yellow{ color:#f5b23d; }
.my-radius {
    border-radius: 15px;
}

.my-radius2 {
    border-radius: 50px;
}

.my-radius3 {
    border-radius: 20px;
}

.radius-top {
    border-radius: 15px 15px 0 0
}

.uk-select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: 95% 50%;
    cursor: pointer;
}

.uk-card-primary.uk-card-body .uk-select:not([multiple]):not([size]),
.uk-card-primary>:not([class*=uk-card-media]) .uk-select:not([multiple]):not([size]),
.uk-card-secondary.uk-card-body .uk-select:not([multiple]):not([size]),
.uk-card-secondary>:not([class*=uk-card-media]) .uk-select:not([multiple]):not([size]),
.uk-light .uk-select:not([multiple]):not([size]),
.uk-offcanvas-bar .uk-select:not([multiple]):not([size]),
.uk-overlay-primary .uk-select:not([multiple]):not([size]),
.uk-section-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-section-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-tile-primary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]),
.uk-tile-secondary:not(.uk-preserve-color) .uk-select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")
}

.uk-dotnav {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.uk-dotnav>* {
    flex: none;
    padding: 6px
}

.uk-dotnav>*>* {
    display: block;
    box-sizing: border-box;
    width: 17px;
    height: 5px;
    border-radius: 50px;
    background: #eee !important;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    border: none;
    transition: .2s ease-in-out;
    transition-property: background-color, border-color
}

.uk-dotnav>*>:focus,
.uk-dotnav>*>:hover {
    background-color: rgba(102, 102, 102, .6);
    outline: 0;
    border-color: transparent
}

.uk-dotnav>*>:active {
    background-color: rgba(102, 102, 102, .2);
    border-color: transparent;
}

.uk-dotnav>.uk-active>* {
    background-color: #2196f3 !important;
    border-color: transparent
}

.uk-dotnav-vertical {
    flex-direction: column;
    margin-left: 0;
    margin-top: -12px
}

.uk-dotnav-vertical>* {
    padding-left: 0;
    padding-top: 12px
}

.uk-text-xsmall {
    font-size: .675rem;
    line-height: 1.5
}

.uk-padding-xsmall {
    padding: 10px
}



.x-card {
    position: relative;
    border: solid 2px #ccc;
    cursor: pointer;
    min-height: 150px;
    overflow: hidden;
}

/* 选中卡片样式 */
.card-selected {
    border: 3px solid #666;
    box-shadow: 0 5px 15px rgba(30, 135, 240, 0.3);
    transition: all 0.1s ease-in-out;
}

/* 隐藏radio按钮但保留功能 */
.x-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 选中卡片中的radio按钮样式 */
.card-selected .uk-radio:checked {
    background-color: #1e87f0;

}


/* 选中卡片中的radio按钮样式 */
.card-selected .uk-radio:checked {
    background-color: #1e87f0;

}

/* 隐藏radio按钮但保留功能 */
.x-radio-payment {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.x-card-payment {
    position: relative;
    border: solid 2px #ccc;
    cursor: pointer;
    overflow: hidden;
}

/* 选中卡片样式 */
.card-payment-selected {
    border: 2px solid #222;
    box-shadow: 0 5px 15px rgba(30, 135, 240, 0.3);
    transition: all 0.1s ease-in-out;
}

/* 自定义滚动条样式 */

.g-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.g-scrollbar::-webkit-scrollbar-track {
    background: #66009b;
    border-radius: 10px;
}

.g-scrollbar::-webkit-scrollbar-thumb {
    background: #ab4cf1;
    border-radius: 10px;
    border: solid 1px #914cdf;
}

.g-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c681ff;
}

/* 圆形图标+文字布局样式 */
.icon-text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    gap: 20px;
}

.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-content {
    flex: 1;
}

.text-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.text-content p {
    margin: 0;
}

.x-uk-breadcrumb {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.x-uk-breadcrumb>* {
    display: contents;
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: bold;
}

.x-uk-breadcrumb>*>* {
    font-size: 1.25rem;
    color: #8d6319
}

.x-uk-breadcrumb>*>:hover {
    color: #666;
    text-decoration: none
}

.x-uk-breadcrumb>:last-child>a:not([href]),
.x-uk-breadcrumb>:last-child>span {
    color: #666
}

.x-uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
    content: "\2013";
    display: inline-block;
    margin: 0 20px 0 calc(20px - 4px);
    font-size: 1.25rem;
    color: #8d6319
}

/* 订单摘要悬浮样式 */
.order-summary-fixed {
    position: -webkit-sticky;
    position: sticky;
    bottom: 20px;
    transition: all 0.3s ease;
    z-index: 980;

}

.x-border-none {
    border: none;
}
.x-border{ border:solid 1px #384777; }
.uk-icon-button {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: 500px;

    background: #f5b23d !important;
    color: #222 !important;
    vertical-align: middle;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: .1s ease-in-out;
    transition-property: color, background-color
}

.uk-icon-button:hover {
    background-color: #ebebeb;
    color: #666
}

.uk-active>.uk-icon-button,
.uk-icon-button:active {
    background-color: #dfdfdf;
    color: #666
}

.uk-nav-divider>li{
    border-top: solid 1px #ddd;
    padding: 10px;
}
.pagination{ background:#666; margin-top:30px; display:flex; align-items:center; justify-content:center; padding:5px 10px; border-radius:50px;}
.pagination li{ float:left!important; padding:0 15px;}
.pagination>li.active span{ display:flex; width:30px; height:30px; align-items:center; justify-content:center; background:#555!important; color:#cbe5ff; border-radius:10px;}
.pagination span{ color:#eee; }
.pagination>li>a{ color:#7194b7; }
.pagination>li>a:hover{ color:#FFF; text-decoration:none; }




.x-uk-navbar-item,.x-uk-navbar-nav>li>a,.x-uk-navbar-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .25em;
    box-sizing: border-box;
    min-height: 40px;
    font-size: .675rem;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    text-decoration: none
}
.x-slidenav-button{
    display: flex;
    width: 50px;
    height: 50px;
    background: #ffd04d;
    color: #222;
    justify-content: center;
    align-items:center;
    border-radius:50% ;
}
.x-badge{
    font-size: 10px; color: #FFF; padding:5px 10px; background: rgba( 0,0,0,.6 ); border-radius: 15px;
}
hr {
    height: 0;
    line-height: 0;
    margin: 10px 0;
    padding: 0;
    border: none!important;
    border-bottom: 1px solid #41195f !important;
    clear: both;
    overflow: hidden;
    background: 0 0
}
.hr1 {
    height: 0;
    line-height: 0;
    margin: 10px 0;
    padding: 0;
    border: none!important;
    border-bottom: 1px solid #cfcce2 !important;
    clear: both;
    overflow: hidden;
    background: 0 0
}
.uk-button-yellow {
    background-color: #f5b23d;
    color: #333;
    border: 1px solid #f1ae39
}

.uk-button-yellow:hover {
    background-color: #dca036;
    color: #333;
    border-color: #f1ae39
}

.uk-button-yellow.uk-active,.uk-button-yellow:active {
    background-color: #f5b23d;
    color: #333;
    border-color: #f1ae39
}
.header_padding{ padding:30px 40px; }
.uk-rpage span>p{ color:#eee;}
.uk-rpage span>strong{ color:#eee; }




* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
    color: #fff;
    background-color: #0f0f10;
    overflow-x: hidden;
    min-width: 1440px;
}

/* ========== 顶部导航栏（支持滚动吸顶变色） ========== */
.hero-navbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 48px;
    transition: all 0.3s ease;
}
/* 滚动后导航栏样式 */
.hero-navbar.uk-active {
    background: rgba(15, 15, 16, 0.9) !important;
    backdrop-filter: blur(10px);
    padding: 16px 48px;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.logo-text {
    color: #eee;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.3s;
}
.logo-text:hover {
    opacity: 0.85;
    text-decoration: none;
}
.hero-navbar .uk-navbar-nav > li > a {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    min-height: auto;
    text-transform: capitalize;
    transition: color 0.3s;
}
.hero-navbar .uk-navbar-nav > li > a:hover {
    color: #ff8a33;
}
.nav-user-area {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nav-user-area .uk-icon-link {
color: #fff;
transition: color 0.3s;
}
.nav-user-area .uk-icon-link:hover {
color: #ff8a33;
}
.username {
font-size: 14px;
color: #fff;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255,255,255,0.2);
}

/* ========== 全屏首屏 Hero ========== */
.hero-section {
position: relative;
height: 900px;
}
.hero-bg {
position: absolute;
inset: 0;
background-image: url("../img/h_bg.jpg");
background-size: cover;
background-position: center center;
z-index: 1;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.7) 100%);
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
height: 100%;
width: 100%;
}



.hero-title {
position: absolute;
right: 10%;
top: 26%;
font-size: 62px;
font-weight: 700;
line-height: 1.1;
}
.text-orange {
color: #ff8a33;
}
.hero-big-number {
position: absolute;
left: 10%;
bottom: 25%;
font-size: 120px;
font-weight: 900;
line-height: 1;
text-orientation: upright;
letter-spacing: 10px;
opacity: 0.95;
}
.small-number {
position: absolute;
left: 26%;
bottom: 25%;
font-size: 24px;
font-weight: 500;
}
.photo-card {
position: absolute;
right: 10%;
bottom: 25%;
width: 460px;
height: 220px;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(2px);
display: flex;
align-items: flex-end;
padding: 24px;
box-sizing: border-box;
}
.pause-icon {
position: absolute;
left: 24px;
bottom: 24px;
display: flex;
gap: 4px;
}
.pause-icon::before,
.pause-icon::after {
content: '';
width: 3px;
height: 18px;
background: #fff;
border-radius: 2px;
}
.card-text {
margin-left: auto;
font-size: 13px;
line-height: 1.6;
max-width: 220px;
}
.card-text .divider {
width: 20px;
height: 1px;
background: #fff;
margin: 8px 0;
opacity: 0.6;
}
.hero-bottom-bar {
position: absolute;
bottom: 100px;
left: 0;
width: 100%;
padding: 0 16%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
z-index: 5;
}
.bottom-item {
display: flex;
align-items: center;
gap: 8px;
opacity: 0.9;
}
.see-more-btn {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
border: none;
color: #fff;
padding: 10px 28px 10px 10px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
border-radius: 2px;
}
.see-more-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.btn-thumb {
width: 36px;
height: 24px;
object-fit: cover;
border-radius: 2px;
}
.hero-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(255,255,255,0.1);
z-index: 6;
}
.progress-bar {
width: 35%;
height: 100%;
background: #4a88ff;
position: relative;
}
.progress-bar::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #4a88ff;
border-radius: 50%;
box-shadow: 0 0 6px rgba(74,136,255,0.8);
}

/* 右侧竖排装饰文字 */
.side-vertical-text {
position: fixed;
right: 26px;
top: 50%;
transform: translateY(-50%);
writing-mode: vertical-lr;
text-orientation: upright;
font-size: 12px;
letter-spacing: 2px;
z-index: 100;
color: #fff;
opacity: 0.8;
}
.side-vertical-text .plus {
margin-top: 24px;
font-size: 18px;
font-weight: 700;
text-align: center;
}

/* ========== 通用板块样式 ========== */
.section-title {
font-size: 36px;
font-weight: 700;
margin-bottom: 8px;
}
.section-subtitle {
color: #999;
font-size: 14px;
margin-bottom: 40px;
max-width: 600px;
line-height: 1.6;
}
.section-tag {
display: inline-block;
color: #ff8a33;
font-size: 13px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 12px;
}

/* ========== 作品画廊板块 ========== */
.gallery-section {
padding: 100px 48px;
background-color: #0f0f10;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 4px;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: 320px;
object-fit: cover;
transition: transform 0.6s ease;
}
.gallery-item:hover img {
transform: scale(1.08);
}
.gallery-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay h4 {
color: #fff;
margin: 0 0 4px 0;
font-size: 16px;
font-weight: 600;
}
.gallery-overlay span {
color: #ccc;
font-size: 12px;
}

/* ========== 装备推荐板块 ========== */
.equipment-section {
padding: 100px 48px;
background-color: #151517;
}
.equip-card {
background: #1c1c1f;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.05);
}
.equip-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0,0,0,0.3);
border-color: rgba(255,138,51,0.3);
}
.equip-card img {
width: 100%;
height: 220px;
object-fit: cover;
}
.equip-info {
padding: 20px;
}
.equip-tag {
display: inline-block;
background: rgba(255,138,51,0.1);
color: #ff8a33;
font-size: 11px;
padding: 3px 8px;
border-radius: 2px;
margin-bottom: 10px;
}
.equip-name {
font-size: 16px;
font-weight: 600;
margin: 0 0 8px 0;
color: #fff;
}
.equip-desc {
font-size: 13px;
color: #888;
line-height: 1.5;
margin-bottom: 16px;
}
.equip-price {
display: flex;
justify-content: space-between;
align-items: center;
}
.price-num {
font-size: 18px;
font-weight: 700;
color: #ff8a33;
}
.buy-btn {
background: transparent;
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 12px;
padding: 6px 14px;
border-radius: 2px;
cursor: pointer;
transition: all 0.3s;
}
.buy-btn:hover {
background: #ff8a33;
border-color: #ff8a33;
}

/* ========== 摄影师专栏板块 ========== */
.photographer-section {
padding: 100px 48px;
background-color: #0f0f10;
}
.photographer-card {
position: relative;
border-radius: 6px;
overflow: hidden;
height: 400px;
}
.photographer-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photographer-mask {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
padding: 30px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.photographer-name {
font-size: 22px;
font-weight: 700;
margin: 0 0 6px 0;
}
.photographer-title {
color: #ff8a33;
font-size: 13px;
margin-bottom: 12px;
}
.photographer-desc {
font-size: 13px;
color: #ccc;
line-height: 1.6;
margin-bottom: 16px;
}
.follow-btn {
align-self: flex-start;
background: #ff8a33;
color: #fff;
border: none;
padding: 8px 20px;
font-size: 13px;
border-radius: 2px;
cursor: pointer;
transition: opacity 0.3s;
}
.follow-btn:hover {
opacity: 0.9;
}

/* ========== 社区板块 ========== */
.forum-section {
padding: 100px 48px;
background-color: #151517;
}
.forum-item {
display: flex;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
transition: background 0.3s;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px;
}
.forum-item:hover {
background: rgba(255,255,255,0.03);
}
.forum-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.forum-content {
flex: 1;
}
.forum-title {
font-size: 15px;
font-weight: 500;
margin: 0 0 6px 0;
color: #fff;
cursor: pointer;
transition: color 0.3s;
}
.forum-title:hover {
color: #ff8a33;
}
.forum-meta {
font-size: 12px;
color: #777;
display: flex;
gap: 16px;
}

/* ========== 页脚 ========== */
.footer-section {
background-color: #0a0a0b;
padding: 60px 48px 30px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-logo {
color: #ff8a33;
font-size: 24px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.footer-desc {
color: #777;
font-size: 13px;
line-height: 1.6;
max-width: 300px;
margin-bottom: 20px;
}
.footer-title {
font-size: 15px;
font-weight: 600;
margin-bottom: 20px;
color: #fff;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: #888;
text-decoration: none;
font-size: 13px;
transition: color 0.3s;
}
.footer-links a:hover {
color: #ff8a33;
}
.social-icons {
display: flex;
gap: 12px;
}
.social-icons a {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: all 0.3s;
}
.social-icons a:hover {
background: #ff8a33;
transform: translateY(-2px);
}
.copyright {
text-align: center;
color: #666;
font-size: 12px;
padding-top: 30px;
margin-top: 40px;
border-top: 1px solid rgba(255,255,255,0.05);
}

.slide_bg{
    min-height: 800px; 
    background: url('../img/slide_bg.jpg') center center no-repeat;
    background-size: cover;
}
.uk-thumbnav>* {
     padding:0 10px!important; 
}

.x-background-secondary {
  background:rgba(0,0,0,.7); 
}
.uk-nav .uk-active a {
    background: #eee; /* 选中背景蓝，UIkit默认主色 */
    color: #222;
    padding-left: 12px;
    border-radius:50px ;
}
.uk-nav li a {
    display: block;
    padding: 8px 10px;
}
.layui-layer-msg{ color:#222!important; }