/* ===== AUBO static mirror — UI polish (additive, safe overrides) ===== */

::selection{background:#00a0e9; color:#fff;}
html{scroll-behavior:smooth;}
a{-webkit-transition:color .25s ease; -moz-transition:color .25s ease; transition:color .25s ease;}

/* --- sticky desktop header with subtle shadow --- */
@media screen and (min-width:1025px){
	#head{position:sticky; top:0; z-index:999; box-shadow:0 2px 12px rgba(0,0,0,.06);}
}

/* --- desktop nav link hover --- */
#head .head .cell_r .menu ul li > a{position:relative; -webkit-transition:color .25s ease; transition:color .25s ease;}
#head .head .cell_r .menu ul li > a::after{content:""; position:absolute; left:50%; bottom:-6px; width:0; height:2px; background:#00a0e9; -webkit-transition:all .3s ease; transition:all .3s ease; -webkit-transform:translateX(-50%); transform:translateX(-50%);}
#head .head .cell_r .menu ul li > a:hover::after,
#head .head .cell_r .menu ul li.on > a::after{width:100%;}
#head .head .cell_r .menu ul li dl dd a{-webkit-transition:all .25s ease; transition:all .25s ease;}
#head .head .cell_r .menu ul li dl dd a:hover{padding-left:8px;}

/* --- language toggle --- */
#lng_cn, #lng_en{display:inline-block; padding:2px 10px; border-radius:11px; -webkit-transition:all .25s ease; transition:all .25s ease;}
#lng_cn:hover, #lng_en:hover{color:#00a0e9;}
#lng_cn.lang_on, #lng_en.lang_on{background:#00a0e9; color:#fff !important;}
#head .head .cell_r .menu ul li time em{margin:0 2px;}

/* --- product cards --- */
.product_list ul li a .photo{overflow:hidden;}
.product_list ul li a .photo .ppp img{-webkit-transition:transform .5s ease; -moz-transition:transform .5s ease; transition:transform .5s ease;}
.product_list ul li a:hover .photo .ppp img{-webkit-transform:scale(1.08); -moz-transform:scale(1.08); transform:scale(1.08);}
.product_list ul li a .nnn{-webkit-transition:color .25s ease; transition:color .25s ease;}
.product_list ul li a:hover .nnn{color:#00a0e9;}
.product_list ul li a .button time{-webkit-transition:all .3s ease; transition:all .3s ease;}
.product_list ul li a:hover .button time{background:#00a0e9; color:#fff; border-color:#00a0e9;}

/* --- pagination --- */
#pagination dl a, #pagination dl font, #pagination dl span{display:inline-block; min-width:34px; height:34px; line-height:32px; text-align:center; border:1px solid #e3e3e3; border-radius:17px; margin:0 3px; padding:0 12px; -webkit-transition:all .25s ease; transition:all .25s ease; text-decoration:none; color:#666; background:#fff; -webkit-box-sizing:border-box; box-sizing:border-box; font-weight:normal;}
#pagination dl a u{text-decoration:none;}
#pagination dl a:hover{border-color:#00a0e9; color:#00a0e9; background:#fff; box-shadow:0 2px 8px rgba(0,160,233,.2);}
#pagination dl font{background:#00a0e9; border-color:#00a0e9; color:#fff; box-shadow:0 4px 12px rgba(0,160,233,.3);}

/* --- back to top --- */
#foot_hr .foot_hr time a{-webkit-transition:all .3s ease; transition:all .3s ease;}
#foot_hr .foot_hr time a:hover{background:#00a0e9; color:#fff;}

/* --- detail page images --- */
.product_read img, #design_section img, .left_content img{max-width:100%; height:auto;}

/* --- banner images fill --- */
#banner .banner img{width:100%; height:auto; display:block;}

/* --- forms --- */
#design_section_3 input[type="text"], #design_section_3 textarea{-webkit-transition:border-color .25s ease, box-shadow .25s ease; transition:border-color .25s ease, box-shadow .25s ease;}
#design_section_3 input[type="text"]:focus, #design_section_3 textarea:focus{border-color:#00a0e9 !important; box-shadow:0 0 0 3px rgba(0,160,233,.12); outline:none;}

/* --- index section titles hover accent --- */
#index_banner img{display:block;}

/* --- slim scrollbar (webkit) --- */
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:#f4f4f4;}
::-webkit-scrollbar-thumb{background:#c9c9c9; border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:#00a0e9;}

/* ===== v2: videos / product list / product detail / article cards ===== */

/* --- company profile videos: fixed 16:9 placeholder + poster --- */
#video_design .container .output dl dd video{aspect-ratio:16/9; display:block; background:#0a1520; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.12);}
#video_design .container .output dl dt{padding-top:14px; font-size:16px; font-weight:600; color:#333;}

/* --- category tabs: unified pill style (brand blue, no orange clash) --- */
#sub_menu dl dd ul li a{border-radius:22px; background-color:#fff; color:#555; border:1px solid #dcdcdc; padding:10px 26px; -webkit-transition:all .25s ease; transition:all .25s ease;}
#sub_menu dl dd ul li:hover a{color:#00a0e9; border-color:#00a0e9; background-color:#fff;}
#sub_menu dl dd ul li.on a{color:#fff; background-color:#00a0e9; border-color:#00a0e9; box-shadow:0 4px 12px rgba(0,160,233,.3);}

/* --- product cards --- */
.product_list ul li a{padding:14px; background:#fff; border:1px solid #ececec; border-radius:12px; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease; transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;}
.product_list ul li a:hover{box-shadow:0 12px 32px rgba(0,0,0,.10); border-color:#bfe6fa; -webkit-transform:translateY(-4px); transform:translateY(-4px);}
.product_list ul li a .photo{border-radius:8px;}
.product_list ul li a .nnn{text-align:center; font-weight:600; color:#333;}

/* --- product detail: centered hero image card --- */
#product_section_1 .section_content{display:-webkit-box; display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center;}
#product_section_1 .section_content::after{display:none;}
#product_section_1 .section_content .content_l{float:none; width:100%; max-width:860px; border:none; background:#fff; border-radius:14px; box-shadow:0 10px 34px rgba(0,0,0,.08); padding:26px; -webkit-box-sizing:border-box; box-sizing:border-box;}
#product_section_1 .section_content .content_l .swiper-container{border-radius:8px; overflow:hidden;}
#product_section_1 .section_content .content_l .swiper-container .swiper-wrapper .swiper-slide .ppp{width:100%;}

/* swiper arrows -> floating circular buttons */
#product_section_1 .section_content .content_l .swiper-container .swiper-button-next,
#product_section_1 .section_content .content_l .swiper-container .swiper-button-prev{width:44px; height:44px; top:50%; bottom:auto; margin-top:-22px; background:#fff; border-radius:50%; box-shadow:0 2px 12px rgba(0,0,0,.18); -webkit-transition:background .25s ease; transition:background .25s ease;}
#product_section_1 .section_content .content_l .swiper-container .swiper-button-next{right:14px;}
#product_section_1 .section_content .content_l .swiper-container .swiper-button-prev{left:14px;}
#product_section_1 .section_content .content_l .swiper-container .swiper-button-next i,
#product_section_1 .section_content .content_l .swiper-container .swiper-button-prev i{color:#666; font-size:20px; line-height:20px;}
#product_section_1 .section_content .content_l .swiper-container .swiper-button-next:hover{background:#00a0e9;}
#product_section_1 .section_content .content_l .swiper-container .swiper-button-prev:hover{background:#00a0e9;}
#product_section_1 .section_content .content_l .swiper-container .swiper-button-next:hover i,
#product_section_1 .section_content .content_l .swiper-container .swiper-button-prev:hover i{color:#fff;}

/* swiper bullets -> brand blue */
#product_section_1 .section_content .content_l .swiper-container .swiper-pagination .swiper-pagination-bullet{background-color:#d5d5d5; opacity:1;}
#product_section_1 .section_content .content_l .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color:#00a0e9;}

/* spec table (if any) softer zebra */
#product_section_1 .section_content .content_r table tr td{line-height:1.8; padding-top:12px; padding-bottom:12px; border-bottom:1px solid #eee;}
#product_section_1 .section_content .content_r table tr:nth-child(even) td{background-color:#f7f9fb;}
#product_section_1 .section_content .content_r table tr:hover td{background-color:#e8f5fd;}

/* prev / next / back-to-list pills */
#prev_next .prev_next dl{border-bottom:none;}
#prev_next .prev_next dl dd, #prev_next .prev_next dl dt{background:transparent; -webkit-transform:none; transform:none;}
#prev_next .prev_next a{display:inline-block; padding:9px 24px; border:1px solid #ddd; border-radius:22px; color:#555; -webkit-transition:all .25s ease; transition:all .25s ease;}
#prev_next .prev_next a:hover{border-color:#00a0e9; color:#00a0e9;}
#prev_next .prev_next a.return{background:#00a0e9; border-color:#00a0e9; color:#fff; box-shadow:0 4px 12px rgba(0,160,233,.3);}
#prev_next .prev_next a.return:hover{background:#0086c4; color:#fff;}

/* --- article cards: kill the awkward swap, use a clean card --- */
#article_canvas .article_list ul li a{padding:16px; background:#fff; border:1px solid #ececec; border-radius:12px; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease; transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;}
#article_canvas .article_list ul li a:hover{box-shadow:0 12px 32px rgba(0,0,0,.10); border-color:#bfe6fa; -webkit-transform:translateY(-4px); transform:translateY(-4px);}
#article_canvas .article_list ul li .ppp{border-radius:8px; overflow:hidden;}
#article_canvas .article_list ul li .nnn{font-weight:600; color:#333;}
#article_canvas .article_list ul li a:hover .button time{left:0; color:#00a0e9;}
#article_canvas .article_list ul li a:hover .button button{right:0; background-color:#0086c4;}
#article_canvas .article_list ul li .button button{box-shadow:0 4px 12px rgba(0,160,233,.25);}

/* --- mobile menu language toggle --- */
#mini_head .menu ul li.m_lang{display:-webkit-box; display:-webkit-flex; display:flex; border-bottom:1px solid rgba(0,0,0,0.15);}
#mini_head .menu ul li.m_lang a.no_sub_menu{flex:1; -webkit-justify-content:center; justify-content:center; letter-spacing:1px;}
#mini_head .menu ul li.m_lang a.no_sub_menu:first-child{border-right:1px solid rgba(0,0,0,0.15);}
#mini_head .menu ul li.m_lang a.lang_on{color:#00a0e9; font-weight:600;}