@charset "utf-8";

body{
	margin: 0;
	font-family: "Microsoft JhengHei"!important;
	background: #fff;
}
img {border:none;}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {display: inline-block;}
html[xmlns] .clearfix,.note_btn,article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{display:block;}
* html .clearfix {height: 1%;}
div.bk{clear:both;}


/* 加载遮罩样式 */
#loading-overlay {
    position: fixed; /* 固定定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    color: #fff!important; /* 字体颜色 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 居中对齐 */
    align-items: center; /* 居中对齐 */
    font-size: 32px; /* 增加字体大小 */
    font-weight: bold; /* 字体加粗 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 添加文字阴影 */
    z-index: 9999; /* 确保在其他内容上方 */
}


#container{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}
#main01{
	position:relative;
	width:100%;
	overflow:hidden;
}
.logo img{width:100%;}
.contact{
	margin:0;
	padding:0;
	width:100%;
	background: #18b3c5;
}
body ul{margin:0;padding:0;}
ul {list-style: none;}
a{color:#fff;text-decoration: none;}
body h2, body ul, body li, body p {
    margin: 0;
    padding: 0;
}

.store_btn hover,.store_btn_act hover{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition: -webkit-transform 0.8s ease, opacity 0.8s ease;
	transition: transform 0.8s ease, opacity 0.8s ease;
}

.store_pr h1{padding:0;margin:0 0 0 1.5%;font-size:1em;line-height: 2em;}
.store_pr .font05{padding:0;margin:0 0 0 1.5%;font-size:.85em;line-height: 2em;}
/*top*/
.ad_top{
	background: url(../images/top.png);
	height: 56px;
	width: 55px;
}
.ad_top:hover{background-position: bottom;}
/*通路icon*/
.ti01{background: url(../images/store_ti_01.png) no-repeat;} /*眼鏡通路*/
.ti02{background: url(../images/store_ti_02.png) no-repeat;} /*屈臣氏*/
.ti03{background: url(../images/store_ti_03.png) no-repeat;} /*康是美*/
.ti04{background: url(../images/store_ti_04.png) no-repeat;} /*日藥本舖*/
.ti05{background: url(../images/store_ti_05.png) no-repeat;} /*小三美日*/
.ti06{background: url(../images/store_ti_06.png) no-repeat;} /*ok*/
.ti07{background: url(../images/store_ti_07.png) no-repeat;} /*Tomod's*/
.ti08{background: url(../images/store_ti_08.png) no-repeat;} /*松本清*/
.ti09{background: url(../images/store_ti_09.png) no-repeat;} /*寶雅*/
.ti10{background: url(../images/store_ti_10.png) no-repeat;} /*眼鏡市場*/
.ti11{background: url(../images/store_ti_11.png) no-repeat;} /*711*/
.ti12{background: url(../images/store_ti_12.png) no-repeat;} /*大倉酷*/



.store_pr ul{margin:0;display: block;padding:0;}	
.store_add{background: url(../images/store_add.png) no-repeat;}	
.store_tel{background: url(../images/store_tel.png) no-repeat;}
.store_time{background: url(../images/store_time.png) no-repeat;}
.store_add a,.store_tel a{color:#898989;text-decoration: none;}
.store_add a:hover,.store_tel a:hover{color:#1A8FE4;text-decoration: underline;}

/*頁碼*/
.main_page {
    text-align: center;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.page_icon {
    background: #3ad0d1;
    display: inline-block;
    width: 45px;
    height: 40px;
    margin: 0 5px;
    text-align: center;
    color: #fff;
    line-height: 40px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.page_prev {
    background: #3ad0d1;
}

.page_next {
    background: #3ad0d1;
}

.page_icon:hover {
    background: #32b7b8;
}

.page_money {
    font-size: 1em;
    color: #666;
    margin-top: 10px;
}






/*.main_page_box{
	width: 100%;
    display: flex;
    margin: 2% auto;
    justify-content: center;
}

.page_icon{
	background: #3ad0d1;
	float:left;
	width:45px;
	height:40px;
	margin:0 5px;
	text-align: center;
	color:#fff;
	line-height: 40px;
	font-weight: bold;
	cursor: pointer;
}
.page_icon:active{
	background: #32b7b8;
}
.current_page {
    background: #32b7b8;
}

.page_money{
	color:#666;
	font-size:.8em;
	text-align: center;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}/*
/**/
.store_pr ul li{
    background: #9c9794;
    color: #fff;
}
/**/
.pri_txt {color:#333;}
.pri_txt:hover{color:#09c;}
@media screen and (min-width:1200px){
	.store_path {
    width: 40px; /* 设置适当的宽度 */
    height: 40px; /* 设置适当的高度 */
    /* 其他样式 */
}
.form-control{
	width:100%;
	height:40px;
	border:1px solid #ccc;
	font-size:1em;
	color:#666;
	font-family: "Microsoft JhengHei"!important;
	padding:0 0 0 2%;
}	
/*通路產品介紹*/
.pri_box{
	background: #c3c5c7;
	width:100%;
	height:50px;
	margin:0 0 2% 0;
}
.pri_box1{
	background: #c3c5c7;
	width:100%;
	/*height:50px;*/
	margin:1% 0; 
}	
.pri_m{width:70%;margin:0 auto;}
.pri_ti{
	color: #fff;
    background: #251a17;
    border-top: 3px solid #ccc;
    float: left;
    text-align: center;
    padding: 1%;
    font-size: 1em;
}
.pri_txt_b{
	float: left;
    width: 90%;
}
.pri_txt{
    background: url(../images/store_line.png) #f5f5f5 no-repeat right;
    float: left;
  	margin: .9% .2% .9% .4%;
    border-radius: 5px;
    padding: 3px 3.5% 0 1%;
    line-height: 2em;
    display: block;
    font-size: .9em;
	box-shadow: 1px 1px 5px 1px #b3b0b0;
	font-weight: bold;
}
.cellphone,.header_box_phone,.index_menu{display: none !important;}
#gotop{
 	display: none;
	position: fixed;
    right: 100px;
    bottom: 100px;       
    cursor: pointer;
    z-index: 999;
}
/*header*/
.header_box {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 10000;
}
/*頂*/
.menu_top{	
	background: rgba(0,0,0,.8);
	color:#fff;
	height:35px;
	font-size:.8em;
	line-height:35px;
	width:70%;
	padding:0 15%;
	margin:0 auto;
	overflow: hidden;
}
.menu_top a{color: #fff;text-decoration: none;}
.menu_top a:hover{color: #FF0;}
.p_logo,.menu_top_link{float:left;}
.menu_top_lan{float:right;}
/*選單*/
.header_box_down{
	background: #000;
	padding:12px 0;
	height:40px;
	width:100%;
}	
.wrapper {
    width: 70%;
	margin: 0 auto;
}	
.header_box_down .logo_box {
    display: inline-block;
    vertical-align: middle;
	float:left;
}
.header_box_down .nav {
    float:right;
	display: inline-block;
    vertical-align: middle;
}
.header_box_down .nav_ul {width: 100%;}
.header_box_down .nav_ul .nav_list { padding: 8px;}
.header_box_down .nav_ul .nav_list {
    display: inline-block;
    vertical-align: top;
    /*margin: 0 15px;*/
    text-align: center;
    color: #fff;
    /*padding: 15px 20px;*/
    transition: ease-in-out .3s;
    -moz-transition: ease-in-out .3s;
    -webkit-transition: ease-in-out .3s;
    -o-transition: ease-in-out .3s;
}
.header_box_down .nav_ul .nav_list_tw {
    font-size: 18px;
   /* font-weight: bold;*/
    letter-spacing: 2px;
    margin: 0 10px;
    display: inline-block;
}	
.header_box_down .nav_ul .nav_list_en {
    font-size: .8em;
    font-weight: bold;
	letter-spacing: 0;
}	
.header_box_down .nav_ul .nav_list:hover{/*background:#e89441;*/color:#ae8f72!important}
/*上方連結*/	
.page_title_box {
    width: 100%;
    height: 0;
    background: url(../images/page_title_bg.png) no-repeat;
    background-size: cover;
    overflow: hidden;
	padding:70px 0 100px 0;
    background-position: 50% 100%;
}
.page_title_bread {
    display: inline-block;
    vertical-align: middle;
    float: right;
    font-size: 16px;
    color: #afafaf;
}	
.page_title {
	display: inline-block;
    vertical-align: middle;
    float: left;
	padding:1%;
	color:#fff;
}
.page_title_tw {
    font-size: 1.5em;
    line-height:1.5em;
}
.page_title_en {
    font-size: .8em;
    line-height:1.5em;
	text-transform: uppercase;
	letter-spacing: 0;
}
.page_title_bread {
    display: inline-block;
    vertical-align: middle;
    float: right;
    font-size: 16px;
    color: #afafaf;
	margin:3%;
}
.page_title_bread_list {
    display: inline-block;
    vertical-align: middle;
}
/*內容*/
#main_box{position: relative;}	
.main_b_in{width:60%;margin:3% auto 7% auto;}	
.main_b_in img {width:100%;height:auto;}
.main_b_in >:nth-child(1){float:left;width:40%;height:20vw;margin:0 5%;}
.main_b_in >:nth-child(2){float:left;width:40%;height:20vw;margin:0 5%;}
.main_b_in >a{position:relative;}
.main_b_in >a:hover>:last-child{position: absolute; top:0;left:0;}		
/*下拉選單*/
#recordtype{
	margin:2% auto;
	width: 70%;
}
#recordtype .acc-content select{
	float:left;
	width:23%;
	margin:0 1%;
}
/*據點*/
#main_m{
	width: 70%;
	padding: 0 15%;
	min-height: 650px;
}
.m_title{display:block;height:30px;}
.m_ti{color:#666;float:left;margin: 0 0 0 1%;}
.no_ti{color:#E03943;float:right;font-size:1em;margin: 0 1% 0 0;}	
/*通路*/
.main_store{
	margin:1%;
	background: #fff;
	border-radius: 10px;
	border:1px solid #e7eaec;
	color:#706e6b;
	box-shadow: 1px 1px 5px 1px #d6d6d6;
	position: relative;
}
/*.store_text{
		display: flex;
	width:100%;
	}	*/
.store_up{
	margin:2%;
	display: flex;
	flex-direction: column;
}

.store_icon_box{
		display: flex;
	align-items: stretch;
	}
	
	.store_add_tel{
		display: flex;
        justify-content: space-between;
	}	
	
.store_ti{
	width:110px;
	padding: 6px 0 0 2%;
	font-size:1em;
	line-height:40px;
	display: block;
	color:#000000;
}
.store_add,.store_tel{
	min-height:40px;
	padding: 5px 0 0 40px;
	font-size:1em;
	display: block;
	line-height:1.5em;
	width:450px;
}
.store_time{
	float:left;
	height:28px;
	padding: 6px 0 0 4%;
	width:22%;
	font-size:1em;
	display: block;
}	
.store_btn{
	float:right;
	width:10%;
	background: #534741;
	color:#fff;
	line-height: 45px;
	font-size:.9em;
	text-align: center;
	cursor: pointer;
	border-radius: 5px;
	}	
.store_btn_act{
	float:right;
	width:10%;
	background: #826659;
	color:#fff;
	line-height: 45px;
	font-size:.9em;
	text-align: center;
	cursor: pointer;
	border-radius: 5px;
	}	
.store_pr{
	background: #f2f1f1;
	padding:.5% 2%;
	clear:both;
	border-radius: 0 0 10px 10px;
	border:1px solid #d6d6d6;
}
.store_pr ul li{
	float:left;
	background: #9c9794;
	padding:.8%;
	margin:.5%;
	font-size:.9em;
	line-height: .9em;
	color:#fff;
	border-radius: 5px;
}


	
	
/*footer*/
	
.wrapper {
	width:1200px;
    margin: 0 auto;
}
footer{width:100%;position:relative}
.footer_box{width:100%;}
.footer_special_info{
	width:92%;padding:20px 4%;
	background:#a95f65;
	color:#fff;
	font-size:14px; /* 從 17px 縮小到 14px */
	font-weight:bold;
	letter-spacing:1px;
	line-height:1.7;
	transform:translateY(29%);
	-ms-transform:translateY(29%);
	-moz-transform:translateY(29%);
	-webkit-transform:translateY(29%);
	-o-transform:translateY(29%);
}
.footer_special_info ol{margin:0;}
.footer_box_up{width:100%;background:#202126;color:#fff;padding:65px 0 0;}
.footer_box_up_left{width:35%;display:inline-block;vertical-align:top;}
.footer_box_up_left_text{width:100%;text-align:center;font-weight:normal;margin:0 0 40px 0;}
.fbult_tw{font-size:28px;line-height:28px;letter-spacing:12px;margin:0 0 15px 0;}
.fbult_en{font-size:28px;line-height:28px;letter-spacing:1px;}
.footer_box_up_left_pic{width:100%;text-align:center;}
.footer_box_up_right{width:60%;display:inline-block;vertical-align:top;margin:0 0 0 4%;}
.box_up_right_list{width:20%;display:inline-block;vertical-align:top;margin:0 12px 30px;}
.box_up_right_list:last-child{width:20%;}
.right_list_title{width:100%;font-size:19px;line-height:19px;letter-spacing:2px;color:#fff;font-weight:600;}
.right_list_title:after{content:"";display:block;background:#851b24;width:95px;height:4px;margin:6px 0 11px;}
.footer_box .sub_last{width:150%;}
.footer_box .sub li{font-size:15px;line-height:1.5;font-weight:bold;letter-spacing:1px;color:#838486;}
.footer_box .sub li:hover{color:#fff;}
.footer_box_down{
	width: 90%;
    text-align: center;
    background: #0b0b0c;
    color: #fff;
    padding: 1% 5%;
    font-size: .75em; /* 從 .85em 縮小到 .75em */
    line-height: 1.5em;
    font-weight: bold;
	}
.footer_box_down .wrapper{margin:0 auto;}
}
@media screen and (max-width:1200px){	
	.store_path {
    width: 40px; /* 设置适当的宽度 */
    height: 40px; /* 设置适当的高度 */
		margin:0 auto;
    /* 其他样式 */
}
.form-control{
	width:22%;
	margin:1%;
	height:40px;
	border:1px solid #ccc;
	font-size:.8em;
	color:#666;
	font-family: "Microsoft JhengHei"!important;
	padding:0 0 0 2%;
	float:left;
}	
.pri_box,.pri_box1{
	background: #c3c5c7;
	width:100%;
	margin:0;
}
.pri_m{width:100%;margin:0 auto;}
.pri_ti{
	color: #fff;
    background: #251a17;
    border-top: 3px solid #ccc;
    float: left;
    text-align: center;
    line-height: 40px;
    padding: 0 1%;
    font-size: 1em;
    width: 100%;
}
.pri_txt_b{
	float: left;
    width: 100%;
	margin:2% 0;
}
.pri_txt{
	background: url(../images/store_line.png) #f5f5f5 no-repeat right;
    float: left;
    margin: .8%;
    border-radius: 5px;
    height: 28px;
    padding: 3px 6.5% 0 2%;
    font-size: 1em;
    line-height: 1.5em;
    display: block;
	box-shadow: 1px 1px 5px 1px #b3b0b0;
	font-weight: bold;
}		
.pc,.header_box,.page_title_box{display: none;}	
#gotop{
 	display: none;
	position: fixed;
    right: 20px;
    bottom:110px;       
    cursor: pointer;
    z-index: 999;
}
	
/*標題*/
	
.wrapper {
    width: 70%;
	margin: 0 auto;
}	
.header_box_phone .logo_box {
    display: inline-block;
    vertical-align: middle;
	float:left;
}
	
	
.header_box_phone{
	display: block;
    background: #000;
    padding: 2% 5%;
    position: relative;
	color:#fff;
	letter-spacing: 1px;
}
.header_box_phone h1{
	font-size: 1.2em;
    line-height: 1.5em;
    font-weight: 100;
	margin:0;
	padding:0;
}
.header_box_phone p{
	font-size: .6em;
    font-weight: 100;
    text-transform: uppercase;	   
}	
/*選單*/
.index_menu{display: block!important;}	
.index_menu ul {
    width: 100%;
	overflow: hidden;
}
/*.index_menu ul li.index_menu_text_bg1 {background: #58bddb;}
.index_menu ul li.index_menu_text_bg2 {background: #f39e41;}
.index_menu ul li.index_menu_text_bg3 {background: #eb6d78;}	
.index_menu ul li.index_menu_text_bg4 {background: #93c33c;}
.index_menu ul li.index_menu_text_bg1:hover {background: #79c2d9;}
.index_menu ul li.index_menu_text_bg2:hover {background: #eda967;}
.index_menu ul li.index_menu_text_bg3:hover {background: #e06d77;}	
.index_menu ul li.index_menu_text_bg4:hover {background: #a1c763;}	*/
	
.index_menu ul li.index_menu_text_bg1,.index_menu ul li.index_menu_text_bg2,.index_menu ul li.index_menu_text_bg3,.index_menu ul li.index_menu_text_bg4 {background: #a9866b;}

.index_menu ul li.index_menu_text_bg1:hover,.index_menu ul li.index_menu_text_bg2:hover,.index_menu ul li.index_menu_text_bg3:hover,.index_menu ul li.index_menu_text_bg4:hover {color: #851b24!important;border-bottom:2px solid #851b24;}		
	
.index_menu ul li {
    width: 21%;
    float: left;
    color: #fff;
    padding: 2%;
    text-align: center;
}	
.index_menu .index_menu_text_tw {
    font-size: 1em;
    line-height:2em;
    letter-spacing: 0;
}	
.index_menu .index_menu_text_en {
    font-size: .8em;
    line-height: 1em;
    font-weight: 100;
	letter-spacing: 0;
}
/*內容*/
#main_box{position: relative;padding:0;height:auto;}	
.main_b_in{width:80%;margin:0 auto;height:auto;padding:5% 0;}	
.main_b_in img {width:100%;height:auto;}
.main_b_in >:nth-child(1){float:left;width:100%;height:80vw;margin:5% 0 30% 0;}
.main_b_in >:nth-child(2){float:left;width:100%;height:95vw;margin:-23% 0;}
.main_b_in >a{position:relative;}
.main_b_in >a:hover>:last-child{position: absolute; top:0;left:0;}		

	
/*下拉選單*/
#recordtype{
	margin:5% auto;
}	
		
#main_box form{padding:1% 2%;}
.form-group{
	float:left;
	width:48%;
	margin:0 2% 0 0;
	padding:2% 0;
}
.form-group1{
	float:left;
	width:48%;
	margin:0 0 0 2%;
	padding:2% 0;
}
/*據點*/
#main_m{padding:0 2%;}
.m_ti{color:#666;margin:0 2%;}
.no_ti{color:#E03943;font-size:.9em;padding:2% 0;margin:0 2%;}

	
/*通路*/
    .main_in {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }	
	
	
.store_up{
	margin:2%;
	display: flex;
	    flex-direction: column;
	
}	
	.store_text{
		display: flex;
		flex-direction: column;
	}	
.main_store{
	margin:1% 1% 3% 1%;
	background: #fff;
	border-radius: 10px;
	border:1px solid #e7eaec;
	color:#706e6b;
	box-shadow: 1px 1px 5px 1px #d6d6d6;
	position: relative;
	width:47%;
}
	.store_icon_box{
		display: flex;
		flex-direction: column;
		border-bottom:1px dashed #ccc;
		margin:2% 0 0 0;
	}	
	
.store_ti{
	line-height: 20px;
	font-size: 15px;
    display: block;
        color: #000;
        text-align: center;
       /* height: 45px;*/
        margin: 5% 0;
}
	
.store_add{
	padding: 5px 0 0 40px;
	font-size:.9em;
	display: block;
	line-height:1.5em;
	/*min-height: 75px;*/
}
.store_tel{
	    padding: 0 0 0 40px;
        font-size: .9em;
        display: block;
        line-height: 40px;
        min-height: 35px;
}
.store_btn{
	background: #534741;
	color:#ececec;
	line-height: 1.8em;
	font-size:.8em;
	text-align: center;
	cursor: pointer;
	border-radius: 5px;
	padding:1% 2%;
	/*position: absolute;
	right:2%;
	top:5%;*/
}		
.store_btn_act{
	background: #826659;
	color:#ececec;
	line-height: 1.8em;
	font-size:.8em;
	text-align: center;
	cursor: pointer;
	border-radius: 5px;
	padding:1% 2%;
	/*position: absolute;
	right:2%;
	top:5%;	*/
}		
.store_pr{
	background: #f2f1f1;
	padding:.5% 2% 2% 2%;
	clear:both;
	border-radius: 0 0 10px 10px;
	border:1px solid #d6d6d6;
}
.store_pr ul li{
	float:left;
	background: #9c9794;
	padding:1.5%;
	margin:1%;
	font-size:.8em;
	line-height: 1em;
	color:#ececec;
	border-radius: 5px;
}
.main_page{width:100%;height:15vw;margin:3% auto;}		
/*footer*/	
footer{width:100%;position:relative;margin:0;}
.footer_box,.footer_box .wrapper{width:100%;}
.footer_special_info{
	width:90%;
	padding:10px 5%;
	background:#a95f65;
	color:#fff;
	font-size:12px; /* 從 14px 縮小到 12px */
	font-weight:bold;
	letter-spacing:1px;
	line-height:1.4;
	transform:translateY(0%);
	-ms-transform:translateY(0%);
	-moz-transform:translateY(0%);
	-webkit-transform:translateY(0%);
	-o-transform:translateY(0%);
	}
.footer_special_info>div{margin:5px 0;}
.footer_box_up{width:100%;background:#202126;color:#fff;padding:65px 0 0;display:none;}
.footer_box_down{width:100%;text-align:center;background:#0b0b0c;color:#fff;padding:11px 0 13px;}
.footer_box_down .wrapper{width:90%;margin:0 auto;}
.fbdt_text1{font-size:9px;line-height:1.5em;font-weight:bold;margin:0 0 6px 0;} /* 從 12px 縮小到 11px */
.fbdt_text2{font-size:12px;line-height:16px;letter-spacing:1px;font-weight:bold;} /* 從 14px 縮小到 12px */
}	


	

::-webkit-scrollbar{width:12px;height: 12px;}
::-webkit-scrollbar-thumb{background: #666 !important;}
::-webkit-scrollbar-track{
	    background: #FFFFFF;
    -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
    border: 1px solid #D8D8D8;
}
::selection{
    background: #F9A386;
    color: #fff;
    text-shadow: none;
}

/* ============================================
   手機直式瀏覽提示 - 簡潔黑色背景設計（只覆蓋圖片區域）
   ============================================ */
/* 確保圖片容器有相對定位 */
.edm-image-wrapper {
    position: relative !important;
}

.orientation-notice {
    display: none !important; /* 預設隱藏，由 JavaScript 控制 */
    position: absolute !important; /* 改為 absolute，相對於圖片容器 */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100 !important; /* 只高於圖片 */
    background: rgba(0, 0, 0, 0.85) !important; /* 黑色半透明背景 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important; /* 防止阻擋點擊 */
    will-change: opacity !important; /* 優化渲染性能 */
}

/* 顯示時的動畫效果 */
.orientation-notice.show {
    display: flex !important;
    opacity: 1 !important;
}

/* 手機圖標容器 */
.orientation-phone-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
    width: 200px !important;
    height: 180px !important;
}

/* 虛線手機背景（直式，不旋轉） */
.orientation-phone-container::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 50px !important;
    height: 80px !important;
    border: 3px dashed #fff !important; /* 虛線邊框 */
    border-radius: 8px !important;
    opacity: 0.5 !important;
    z-index: 1 !important;
}

/* 手機圖標（直式，稍微傾斜，實線） */
.orientation-phone {
    width: 50px !important;
    height: 80px !important;
    border: 3px solid #fff !important;
    border-radius: 8px !important;
    position: relative !important;
    background: transparent !important;
    transform: rotate(-30deg) !important; /* 稍微逆時針傾斜 */
    animation: phoneRotate 2s ease-in-out infinite !important;
    z-index: 2 !important;
}

/* 手機螢幕區域 */
.orientation-phone::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 12px !important;
    border: 2px solid #fff !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

/* 頂部相機圓圈 */
.orientation-phone::after {
    content: '' !important;
    position: absolute !important;
    top: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 8px !important;
    height: 8px !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    background: transparent !important;
}

/* 底部 Home 按鈕圓圈 - 使用額外的偽元素 */
.orientation-phone {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) !important; /* 預留空間 */
}

/* 移除 Home 按鈕圓圈 */
.orientation-phone-container::after {
    display: none !important;
}

/* 隱藏箭頭（因為有虛線手機效果） */
.orientation-arrow-left,
.orientation-arrow-right {
    display: none !important;
}

/* 手機輕微搖擺動畫 */
@keyframes phoneRotate {
    0%, 100% {
        transform: rotate(-30deg);
    }
    50% {
        transform: rotate(-35deg);
    }
}

/* 左側箭頭脈衝動畫 */
@keyframes arrowPulse {
    0%, 100% {
        opacity: 0.85;
        transform: rotate(0deg) scale(1);
    }
    50% {
        opacity: 1;
        transform: rotate(0deg) scale(1.05);
    }
}

/* 右側箭頭脈衝動畫 */
@keyframes arrowPulseRight {
    0%, 100% {
        opacity: 0.85;
        transform: rotate(0deg) scale(1);
    }
    50% {
        opacity: 1;
        transform: rotate(0deg) scale(1.05);
    }
}

/* 文字 */
.orientation-text {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
}

/* 確保橫式時完全隱藏提示訊息，無過渡效果 */
@media (orientation: landscape) {
    .orientation-notice {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transition: none !important; /* 橫式時無過渡效果，避免閃動 */
        pointer-events: none !important;
    }
    
    .orientation-notice.show {
        display: none !important;
        opacity: 0 !important;
        transition: none !important;
    }
}

/* 額外檢查：如果螢幕寬度大於高度很多，視為橫式 */
@media (min-width: 600px) {
    .orientation-notice {
        display: none !important;
        visibility: hidden !important;
    }
}

/* 桌面版隱藏提示 */
@media (min-width: 769px) {
    .orientation-notice {
        display: none !important;
    }
}

/* 手機版響應式調整 */
@media (max-width: 480px) {
    .orientation-phone-container {
        width: 160px !important;
        height: 140px !important;
        margin-bottom: 25px !important;
    }
    
    .orientation-phone {
        width: 40px !important;
        height: 65px !important;
    }
    
    .orientation-arrow-left {
        left: 3px !important;
        bottom: 8px !important;
        width: 55px !important;
        height: 70px !important;
    }
    
    .orientation-arrow-left::before {
        border-width: 3px !important;
    }
    
    .orientation-arrow-left::after {
        top: 3px !important;
        left: 3px !important;
        border-top: 7px solid transparent !important;
        border-bottom: 7px solid transparent !important;
        border-right: 11px solid #fff !important;
    }
    
    .orientation-arrow-right {
        right: 3px !important;
        top: -8px !important;
        width: 55px !important;
        height: 70px !important;
    }
    
    .orientation-arrow-right::before {
        border-width: 3px !important;
    }
    
    .orientation-arrow-right::after {
        bottom: 3px !important;
        right: 3px !important;
        border-top: 7px solid transparent !important;
        border-bottom: 7px solid transparent !important;
        border-left: 11px solid #fff !important;
    }
    
    .orientation-text {
        font-size: 14px !important;
    }
}