@charset "utf-8";

/* CSS Document */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_header_rwd.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.headerRwd { display: none; }
.rwdMenuContainer{ width: 100%;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);  position: fixed; top: 0; z-index: 150;}
.rwdMenuTopContainer { height: 50px; width: 100%; background: #d5b573; }
.rwdMenuIcon { float: left; width: 50px; color: #fff; text-align: center; cursor: pointer; padding: 0 5px;}
.rwdMenuLogo { float: left; vertical-align: middle; text-align: center; margin: 0px auto 0; width: calc(100% - 110px); }
.rwdMenuLogo>a>img { width: 140px; display: block; margin: 0 auto;}
.rwdMenuSearch { float: left; width: 50px; color: #fff; text-align: center; margin: 12px 0; cursor: pointer; }
.rwdMenuSearchContainer { margin: 0; height: 30px; padding: 60px 10px 10px; background: rgba(255, 255, 255, 0.6); position: fixed; width: calc(100% - 20px); z-index: 39; top: 40px; }
.rwdMenuSearchContainer>form>input { font: normal 14px '微軟正黑體'; color: #000; line-height: 20px; border: none; border-bottom: solid 1px #555; padding: 5px; background: rgba(255, 255, 255, 0); width: calc(100% - 60px); float: left; }
.rwdMenuSearchContainer>form>input:focus { outline: none; }
.rwdMenuSearchContainer>form>div { width: 50px; font: bold 12px "Century Gothic"; letter-spacing: 1px; text-align: center; float: left; line-height: 30px; }
.rwdMenuSearchContainer>form>div>a { color: #555; }

.rwdHeaderCountryContainer { background: #ccc; overflow-x: scroll;}
.rwdHeaderCountryContainer::-webkit-scrollbar {
height: 3px;
}
.rwdHeaderCountryContainer::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
}
.rwdHeaderCountryContainer::-webkit-scrollbar-thumb {
-webkit-border-radius: 4px;
border-radius: 4px;
background: #999;
}
.rwdHeaderCountryContainer>ul>li { font: normal 15px '微軟正黑體';display: inline-block; line-height: 40px; letter-spacing: 1px; text-align: center}
.rwdHeaderCountryContainer>ul{white-space: nowrap;}
.rwdHeaderCountryContainer>ul>li>.headerCountryNavTitle>a { color: #313131; display: block;padding: 0 8px }
.rwdHeaderCountryContainer>ul>li>.headerCountryNavTitle.active{background: #bbb;}
.rwdHeaderCountryContainer .headerCountryNavBox {width: 120px; position: absolute; z-index: 999; background: #bbb; padding: 0 10px; top: 93px;left: 0}
.rwdHeaderCountryContainer .headerCountryNavBox a{color: #555}

/*headerCountryNavTitle
headerCountryNavBox*/
/*#masterslider2 .ms-container { overflow: visible; }*/
.rwdHeaderNavContainer { position: fixed; top: 0; bottom: 0; margin-top: 50px; width: 100%; background: rgba(255, 255, 255, 0.5); z-index: 999; }
.rwdHeaderNav { position: absolute; top: 0; bottom: 0; width: 300px; background: rgba(0, 0, 0, 0.8); z-index: 50; font: normal 16px '微軟正黑體'; line-height: 60px; letter-spacing: 1px; text-align: center; overflow: scroll; }
.rwdHeaderNav>ul>li { }
.rwdHeaderNav>ul>li>a { color: #fff; }
.rwdHeaderNav a { color: #ccc; }
.rwdSubNavTitle { color: #fff; cursor: pointer; }
.rwdSubProductNavTitle, .rwdSubProductNavTitle a { color: lightblue; cursor: pointer; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.phoneMenu { width: 100%; height: 50px; background: rgba(0, 0, 0, 0.7); position: fixed; bottom: 0; z-index:999; display: none; }
.phoneMenu>ul>li { float: left; width: 33.33%; text-align: center; padding: 5px 0; }
.phoneMenu>ul>li>a { color: #fff; }
.phoneMenuTitle { font: normal 12px '微軟正黑體'; line-height: 16px; letter-spacing: 2px; }
.phoneMenuCartTitle { }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member_sign.php添加前往註冊按鈕 <<<---------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.rwdMemberRegisterBtnContainer { display: none; margin: 50px 0 0 0; }
.rwdMemberRegisterBtn { height: 28px; width: 100%; max-width: 198px; font: normal 13px "微軟正黑體"; line-height: 28px; letter-spacing: 1px; text-align: center; background: #fff; padding: 0; border: solid 1px #898989; color: #555; cursor: pointer; margin: 20px auto; }
.rwdMemberRegisterBtn>a { color: #555; display: block; }
.rwdMemberRegisterBtn>a:hover { background: #898989; color: #fff; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> member_order_detail.php欄位修改 <<<---------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1280px) {
	.indexMapPhoneContainer{display: none;}
	.indexMapPhoneContainer { left: 50px; z-index: 800; }
	.indexLeftBarContainer { position: fixed; top: 0; left: -200px; z-index: 900; height: 100%; padding: 0; width: 200px; }
	.indexLeftBarBox { position: relative; height: 100%; }
	.indexLeftBarBtn { display: block; position: absolute; right: -30px; top: 180px; background: rgba(0, 80, 120, 0.9); width: 20px; padding: 5px; text-align: center; border-bottom-right-radius: 10px; border-top-right-radius: 10px; font: normal 14px '微軟正黑體'; line-height: 20px; color: rgba(255, 255, 255, 1); cursor: pointer; opacity: 0.5 }
	.indexLeftBarBtn:hover { opacity: 1; }
	.indexLeftBar { width: 200px; overflow-y: scroll; height: 100%; background: rgba(180, 230, 240, 0.9); }
	.indexLeftBar>ul { padding: 20px 10px; }
	.indexLeftBar::-webkit-scrollbar { width: 5px; }
	.indexLeftBar::-webkit-scrollbar-track { opacity: 0; }
	.indexLeftBar::-webkit-scrollbar-thumb { border-radius: 2.5px; background: rgba(0, 80, 150, 0.5); }
	.indexRightMainContainer { width: 100%; left: 0; }
	.indexNewsTitle { font: normal 30px '微軟正黑體'; line-height: 18px; color: #2e5d82; margin: 0 0 -1px; letter-spacing: 2px; }
	.indexNewsTitle>span { font: normal 15px 'Century Gothic'; line-height: 18px; background-color: #2e5d82; color: #fff; padding: 3px 8px; width: 105px; }
	.indexNewsTitleContainer .indexNewsBtn>a>button{margin: 0; }
	.indexStateContainer { width: 100%; margin: 0 }
	.indexStateTitle { font: normal 30px '微軟正黑體'; line-height: 35px; color: #fff; letter-spacing: 2px; }
	.indexStateTitleContainer .indexNewsBtn a button{margin: 0;}
}
@media screen and (max-width:1100px) {
	.headerRwd { display: block; }
	.header { display: none; }
	.bodyContainer { padding: 90px 0 70px }
	.footerContainer { display: none; }
	.indexLeftBarBtn { top: 100px; }
	.wrapper { width: 96%; margin: 0 2%; }
	.goTop { bottom: 60px; right: 20px; }
	.phoneMenu { display: block; }
	.memberSignToRegister { display: block; }
	.memberInfoLeftBar { display: none }
	.memberInfoRightContainer { float: none; width: calc(100%); }
	.contactLine { display: block; }
	.contactDetailContent>ul>li { margin: 8px 0; }
	.contactDetailAdd, .contactDetailTel, .contactDetailFax, .contactDetailMail { line-height: 20px; }
}
@media screen and (max-width:900px) {
	.indexMapContainer { height: 350px; }
	.indexMapPhoneContainer { position: absolute; z-index: 800; bottom: 50px; top: 250px; left: 5px; width: 450px; height: 55px; border-radius: 25px; background: rgba(255, 255, 255, 0.8); padding: 10px; }
	.indexMapPhoneContainer>.wrapper>ul>li { margin: 0px 0; float: left; width: 33%; }
	.indexMapPhoneDecorationLineOrange { width: 5px; height: 52px; background: #f19149; float: left; }
	.indexMapPhoneDecorationLineGreen { width: 5px; height: 52px; background: #84ccc9; float: left; }
	.indexMapPhoneDecorationLineBlue { width: 5px; height: 52px; background: #88abda; float: left; }
	.indexMapPhoneContent { float: left; margin: 0 0 0 5px; }
	.indexMapPhoneTitle { font: normal 12px '微軟正黑體'; line-height: 14px; color: #2e5d82; letter-spacing: 1px; }
	.indexMapPhoneNum { font: normal 16px 'Century Gothic'; line-height: 20px; letter-spacing: 2px; color: #f84c68; }
	.indexMapPhoneMemo { font: normal 12px '微軟正黑體'; color: #2e5d82; text-align: right; letter-spacing: 1px; }
	.infoLeftContainer { display: none; }
	.infoMiddleContainer { width: calc(100% - 220px) }
	.contactDetailContainer { float: none; width: 100%; }
	.contactFormContainer { float: none; width: 100%; }
	.contactDetailContent>ul>li { float: left; width: 50%; }
}
@media screen and (max-width:800px) {
	.contactDetailContent>ul>li { float: none; width: 100%; }
}
@media screen and (max-width:700px) {
	.indexNewsBoxContainer .box-3 { width: 48%; margin: 0 1%; }
	.infoMiddleContainer { float: none; padding: 0; width: 100%; }
	.infoRightContainer { float: none; width: 100%; }
	.infoRightInfomation { float: left; width: 32.3%; margin: 0 0.5%; }
	.infoPicture { float: left; width: 32.3%; margin: 0 0.5%; }
	.infoOtherCountry { float: left; width: 32.3%; margin: 0 0.5%; }
	.infoContact { display: none; }
	.memberFormTitle { float: none; width: 100px; margin: 0 0 5px; }
	.memberFormText { float: none; width: 100%; }
	.memberFormCity { float: left; display: block; width: 80px; margin: 0 10px 10px 0; }
	.memberFormArea { float: left; display: block; width: 80px; margin: 0 10px 10px 0; }
	.memberFormAdd { float: none; display: block; width: calc(100% - 12px); margin: 0px 0 0 0; }
	.memberFormTextBirth { width: 100%; }
	.memberFormTextGender { width: 100%; }
}
@media screen and (max-width:600px) {
	.indexStateBoxContainer .box-3 { width: 48%; margin: 0 1%; }
	.indexNewsContentTitle { font: normal 18px '微軟正黑體'; line-height: 30px; letter-spacing: 1px; margin: 0 0 5px; }
	.indexStateContentTitle { font: normal 18px '微軟正黑體'; line-height: 30px; margin: 0 0 5px; }
	.indexMapPhoneContainer { position: absolute; z-index: 800; bottom: 50px; top: 130px; left: 5px; width: 150px; height: 180px; border-radius: 25px; background: rgba(255, 255, 255, 0.8); padding: 10px; }
	.indexMapPhoneContainer>.wrapper>ul>li { margin: 5px 0; float: none; width: 100%; }
	.infoRightInfomation, .infoPicture, .infoOtherCountry { float: none; width: 100%; margin: 0 0 30px; }
	.box-3 { width: 48%; margin: 0 1%; }
	.activityBoxTitle { font: bold 16px '微軟正黑體'; line-height: 25px; }
	.passwordFormTitle { float: none; width: 100px; margin: 0 0 5px; }
	.passwordFormText { float: none; width: 100%; }
}

@media screen and (max-width:430px){
	.indexNewsTitle>span{display: none;}
}
@media screen and (max-width:400px) {
	.box-3 { width: 98%; margin: 0 1%; }
	.indexNewsBoxContainer .box-3 { width: 98%; margin: 0 1%; }
	.contactFormTitle { float: none; width: 80px; margin: 0 0 10px; }
	.contactFormContent { float: none; width: calc(100%); }
	.contactFormBtn>button { border: solid 1px #2e5d82; background: none; font: normal 14px '微軟正黑體'; line-height: 25px; letter-spacing: 2px; color: #2e5d82; width: 48%; cursor: pointer; }
	.contactFormBtn>button:first-child { margin: 0 2.3% 0 0; }
}