body, html { 
    width: 100%; 
    font-size: 16px;
    background: url(../images/bg-flag.png) no-repeat center top,
                url(../images/bg.jpg) repeat;
    background-color: #d6c7b7;
    -webkit-animation: bgAction 2s ease 2s infinite alternate;
    animation: bgAction 2s ease 3s infinite alternate;
}
/*---旗幟飄揚---*/
@-webkit-keyframes bgAction {
    from { background-position: center top; }
    to { background-position: center 1%; }
}
@-moz-keyframes bgAction {
    from { background-position: center top; }
    to { background-position: center 1%; }
}
@-o-keyframes bgAction {
    from { background-position: center top; }
    to { background-position: center 1%; }
}
@-ms-keyframes bgAction {
    from { background-position: center top; }
    to { background-position: center 1%; }
}

ul, li { text-decoration: none; list-style: none; }
a:hover, a:visited { text-decoration: none; }
#mtkContainer { position: relative; width: 100%;}
#mtkContainer, #mtkContainer * { vertical-align: top; box-sizing: border-box; }

.layout { position:relative; max-width: 1300px; margin: 0 auto; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);}
.pc768 { display: block; }
.mobile768 { display: none; }
.rwdImg{ width: 100%; max-width: 100%; }
/*===========SEO麵包削============*/
.breadcrumb { margin: 0px 15px 0px 0px; color: #8d7258; background-color: transparent; padding: 0px;}
.breadcrumb ul li { display: inline; font-size: 1rem; }
.breadcrumb ul li:after { content: ">"; }
.breadcrumb ul li:first-child:after { content: ""; }
.breadcrumb ul li:last-child:after { content: ""; }
.breadcrumb ul li a { color: #741011; }

/*------------banner------------*/
header h1{ margin: 0; display: block; }

h1 .txt{/*主標文字*/
    position: absolute; /*相對於layout*/
    left:0; 
    top:0;
    z-index: 2;
    opacity: 1;
    -webkit-animation: txtMove 1s ease infinite;
    animation: txtMove 1s ease infinite;
}

@keyframes txtMove {
    0% { opacity: 1;}
    85% { opacity: 1;}
    100% { opacity: 0;}
}
@-webkit-keyframes txtMove {
    0% { opacity: 1;}
    85% { opacity: 1;}
    100% { opacity: 0;}
}
@-moz-keyframes txtMove {
    0% { opacity: 1;}
    85% { opacity: 1;}
    100% { opacity: 0;}
}
@-o-keyframes txtMove {
    0% { opacity: 1;}
    85% { opacity: 1;}
    100% { opacity: 0;}
}
@-ms-keyframes txtMove {
    0% { opacity: 1;}
    85% { opacity: 1;}
    100% { opacity: 0;}
}

/*-----------menu------------*/
.mainPageButton { 
    position: relative;
    /*用絕對定位absolute,其上層容器並沒有「可以被定位」的元素的話,則可以放在頁面上的任何位置。*/
    z-index: 1;
    top:0;
    width: 100%; 
    text-align: center; 
}
.mainPageButton.fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 996;
}
.wrap {/*-----------解决mainPageButton fixed破格滿版問題，讓選單fixed有寬度置中-----------*/
    max-width: 1300px;
    margin: 0 auto;
    position: relative; 
}/*----------mainPageButton fixed寬無需限制，寬100%時移除此設定-----------*/

.mainPageButton ul {  padding: 0px; width: 100%; /*text-align: center;*/ white-space: nowrap; background: #741011; }
.mainPageButton ul li { display: inline-block; white-space: nowrap; }
.mainPageButton ul li a, .mainPageButton ul li a:link { display: block; font: 1.3rem/1.5rem "arial", "微軟正黑體"; color: #ffffff; white-space: nowrap; text-align: left; padding: 10px 15px; text-align: center; }
.mainPageButton ul li a:hover { background-color: #75593f; }

/*.hasButton .secButton 不可命名.secButton---會跟台北相衝,顯示出現效果來源c23filtermain.js*/

/*-----子選單-----*/
.hasButton .secButtonFixed { 
    display: none; /*預設子選單隱藏*/
    position: absolute; /*相對.wrap*/
    top: 40px; /*主選單高度px*/
    left: 0px; 
    width: 100%;
    background: #856a50; 
    letter-spacing: -4px;/*解决inline-block元素的空白间距*/
    word-spacing: -4px;
}
.hasButton .secButtonFixed a, .hasButton .secButtonFixed a:link {
    display: inline-block; 
    letter-spacing: normal;/*解决inline-block元素的空白间距*/
    word-spacing: normal;
    font: 1rem/1.2rem "arial", "微軟正黑體";  
    padding: 7px 20px; 
    min-width: 100px; 
    text-align: center;
}

/*-----子選單開關設定-----韓國,大陸沒有次選單不用設定*/
.page1 .hasButton .btn1, .page3 .hasButton .btn3,
.page4 .hasButton .btn4, .page6 .hasButton .btn6 {display: block;}

/*-----子選單-active那頁對應選單有Heighlight-標示正選取-----*/
.index a.btnHoverIndex, .kansai a.btnKansai,
.kyushu a.btnKyushu, .hokkaido a.btnHokkaido,
.hokuriku a.btnHokuriku, .tohoku a.btnTohoku,
.shikoku a.btnShikoku, .okinawa a.btnOkinawa,
.thailand a.btnThailand, .sgmy a.btnSgmy,
.vietnam a.btnVietnam, .cambodia a.btnCambodia,
.philippines a.btnPhilippines,
.hk a.btnHk,.macao a.btnMacao,
.europe a.btnEurope, .usca a.btnUsca,
.nzau a.btnNzau,.centralasia a.btnCentralasia,
.southasia a.btnSouthasia{background-color: #741011;}


/*------------content------------*/
.contentBg { padding: 70px 1rem 1rem 1rem; background: #E5D8C1 url(../images/wavegrid.png) repeat; }
.contentLine{
    height: 20px;
    background:#741011;
    background: linear-gradient(45deg, 
              #e5d8c1 25%, #741011 0, #741011 50%,
              #e5d8c1 0, #e5d8c1 75%, #741011 0);
    background-size: 42.4px 42.4px;/*背景斜紋*/
}

/*內容區M版邊界留白*/
.wrapper { margin: 0 auto; max-width: 1200px; width: 100%; height: 100%; }
.content { padding-top: 30px; opacity: 0; transition: all 1s ease-in; }
.content.show { padding-top: 0px; opacity: 1; }

/*========== 篩選器CSS ==========*/
.backTop { display: none; }
.informationShow { display: none; }
.areaIntroduction { display: none; }
.searchButton { display: none; transition: .5s; position: fixed; top: 10%; left: 10%; cursor: pointer; z-index: 19; }
.c23FilterBaseAppendClose { font: bold 22px/1.4em "arial", "微軟正黑體"; display: inline-block; padding: 5px 10px; color: #fff; background: rgba(0, 0, 0, 0.8); cursor: pointer; }
.searchButton img { width: auto; -webkit-animation: searchButton 1s infinite alternate; animation: searchButton 1s infinite alternate; }
@-webkit-keyframes searchButton {
    from { padding-top: 0; }
    to { padding-top: 20px; }
}
@keyframes searchButton {
    from { padding-top: 0; }
    to { padding-top: 20px; }
}
@-moz-keyframes searchButton {
    from { padding-top: 0; }
    to { padding-top: 20px; }
}
@-o-keyframes searchButton {
    from { padding-top: 0; }
    to { padding-top: 20px; }
}
@-ms-keyframes searchButton {
    from { padding-top: 0; }
    to { padding-top: 20px; }
}
#c23FilterArea #slider-range .ui-widget-header, #c23FilterArea #searchRight #searchStart, #c23FilterArea #searchRight #searchCancel, #c23FilterArea #h4ButtonBase .colorMat { background: #8c805c; }
#c23FilterArea #slider-range:hover .ui-widget-header{ background: #bc9a45; }/*價格條*/
#c23FilterArea #searchRight #searchStart:hover { background: #bc9a45;  }/*搜尋*/
#c23FilterArea #searchRight #searchCancel:hover { background: #bc9a45;  }/*取消X*/
#c23FilterArea #amount { color: #e9e1cb; }
#c23FilterBase { display: none; position: fixed; top: 10%; left: 0; width: 100%; text-align: center; background: none; }
#c23FilterArea { margin: 0 auto; padding: 20px; width: 80%; background: rgba(0, 0, 0, 0.7); }
#c23FilterBase .c23FilterBaseAppendClose { letter-spacing: normal; }
@media only screen and (max-width:1650px) {
    .searchButton { left: 5%; }
}
@media only screen and (max-width:768px) {
    #c23FilterBase { display: block; top: -200vh; }
    #c23FilterArea { width: 100%; height: 100vh; padding: 5%; }
    div.searchButton { display: none; }
}

/*========== 篩選器CSS ==========*/

/*===c23模組專用===*/

/*右側導航選單*/
.intro-anchors > div { width: 100px; height: 86px; }/*設定第一張圖尺寸*/

/*選單第一個Sale圖*/
.intro-anchors > div > img { width: 100%; height: auto; }
.carrier .box-head { display: none; }
.intro-anchors { position: fixed; bottom: 200px; right: 3%; width: 100px; height: auto; transition: all 0.4s linear; z-index: 98; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); box-shadow: 0px 15px 10px -15px #111; }
.intro-anchors a { display: block; width: 100%; height: auto; text-decoration: none; color: #fff; text-align: center; font-size: 15px; line-height: 38px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; background-color: #823536; border-bottom: 1px solid #672324; }
.intro-anchors a:hover { color: #fff; background-color: #672324;}
.intro-anchors a:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
/*選單縮小*/
.intro-anchorsScale { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }


.carrier { font-family: Verdana, Geneva, sans-serif, "微軟正黑體"; position: relative; }

/*模組內容主標h4*/
.carrier h4 { font-size: 35px; font-weight:bolder; min-width: 100px; height: 60px; line-height: 60px; display: table;    /*沒有父層的水平置中*/ margin: 0 auto;    /*上 左右 下*/ color: #741011; position: relative; text-align: center; }
.shikoku .carrier h4 { min-width: 200px;}/*四國.山陰山陽H4間距*/
.carrier h4:before { content: ''; background: url('../images/title-bg-left.png'); background-size: 49px 51px; display: block; height: 51px; width: 49px; position: absolute; left: -49px; top: 0px; }
.carrier h4:after { content: ''; background: url('../images/title-bg-left.png'); background-size: 49px 51px; display: block; height: 51px; width: 49px; position: absolute; right: -49px; top: 0px; -webkit-transform: scaleX(-1);  /*緞帶反轉*/ -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); }
.carrier ul { margin: 1.5% 0 3% 0;  /*整個條列產品區塊間距*/ color: #434343; }
.carrier li { overflow: hidden; min-height: 60px; line-height: 1.3em; padding: 12px 30px; background: rgba(256, 256, 256, 1); margin-bottom: 10px; border-left: 6px solid #8d7258; border-top-right-radius: 10px; border-bottom-right-radius: 10px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
.carrier li:hover { box-shadow: 5px 1px 8px rgba(0, 0, 0, 0.2); -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); background: #f9f9e1; }
.carrier li a:link, .carrier li a:visited { text-decoration: none; font-size: 1rem; font-family: "arial", "微軟正黑體"; color: #5b5b5b; line-height: 1.5; display: block; }
.carrier li a strong { font-weight: normal; display: block; font-size: 22px; font-weight: bolder; font-family: "arial", "微軟正黑體"; color: #741011; margin: 0px 0px 4px 0px; *margin: 0; line-height: 1.3; }
.carrier li a:hover strong { color: #ff7800; }
.carrier li em.price { font-size: 1rem; color: #ff7800; font-family: Verdana, Geneva, sans-serif, arial, "微軟正黑體"; float: right; *margin-top: -1.2em; margin-top: 10px; }
.carrier li em.price span { font-size: 1.3rem; font-weight: bold; }
@media screen and (max-width:1400px) {
    .intro-anchors { right: 0%; }

/*右邊浮動選單*/ }
@media screen and (max-width:768px) {
    .pc768 { display: none; }
    .mobile768 { display: block; }
    .contentBg {  padding: 1.8rem 0.5rem 0.5rem 0.5rem;  }
    .wrapper { width: 97%; }
    .mobileMenuButton { display: inline-block; position: fixed; bottom: 0; left: 50%; padding: 5px; width: auto; height: auto; z-index: 1002; background: rgba(0, 0, 0, 0.5) }
    .mainPageButton { position: fixed; top: -100vh; left: 0; width: 100%; height: 100vh; margin-bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 1001;        /*比Set logo高*/ }
    .mainPageButton ul { padding-top: 20px; }
    .mainPageButton ul li { display: block; }
    .mainPageButton ul li a, .mainPageButton ul li a:link { font: 1.3rem/1.4rem "arial", "微軟正黑體"; color: #ffffff; padding: 14px 10px; }
    .mainPageButton ul li a:hover { background-color: #d28338; }
    .hasButton { position: relative; z-index: 1; }
    .hasButton a { border-bottom: 1px dotted rgba(256, 256, 256, 0.3); }   

    .hasButton .secButtonFixed { display: block; position: static; /*必設定為原始預設*/ width: 100%; z-index: 2; background: rgba(0, 0, 0, 0.3); overflow: hidden; }
    .hasButton .secButtonFixed a, .hasButton .secButtonFixed a:link { display: block; float: left; width: 50%; padding: 12px 10px; min-width: auto; border-right: 1px dotted rgba(256, 256, 256, 0.3); }
    
    .index a.btnHoverIndex, .kansai a.btnKansai,
    .kyushu a.btnKyushu, .hokkaido a.btnHokkaido,
    .hokuriku a.btnHokuriku, .tohoku a.btnTohoku,
    .shikoku a.btnShikoku, .okinawa a.btnOkinawa,
    .thailand a.btnThailand, .sgmy a.btnSgmy,
    .vietnam a.btnVietnam, .cambodia a.btnCambodia, 
    .philippines a.btnPhilippines,
    .hk a.btnHk,.macao a.btnMacao,
    .europe a.btnEurope, .usca a.btnUsca,
    .nzau a.btnNzau,.centralasia a.btnCentralasia,
    .southasia a.btnSouthasia{background-color:unset; }/*未設置*/


    /* c23模組 */
    .intro-anchors { display: none; }

    /*右邊選單手機版隱藏*/
    .carrier h4 { font-size: 2rem; min-width: 100px; height: 50px; line-height: 50px;}
    .carrier h4:before { display: block; background-size: 37px 39px; height: 39px; width: 37px; left: -37px; }
    .carrier h4:after { display: block; background-size: 37px 39px; height: 39px; width: 37px; right: -37px;}
    .carrier li { padding: 12px 12px; }
    .carrier li a:link, .carrier li a:visited { letter-spacing: 0px; }
    .carrier li a strong { font-size: 18px; }
    .carrier li em.price { font-size: 0.7rem; display: block; text-align: center; background-color: #ff7800; border-radius: 20px; min-width: 32%; margin-top: 10px; padding: 3px 0; color: #ffffff; }
    .carrier li em.price span { font-size: 1.3rem; font-weight: bold; }
    .carrier li em.price:after { content: "\f07a"; display: inline-block; font: 1.1rem/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-font-smoothing: grayscale; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); margin-left: 5px; }
}
@media screen and (max-width:480px) {
    .carrier li em.price { min-width: 45%; }
    .carrier h4 { font-size: 1.6rem; min-width: 80px; height: 40px; line-height: 40px;}
    .shikoku .carrier h4 { min-width: 170px;}/*四國.山陰山陽H4間距*/
    .carrier h4:before { background-size: 30px 31px; height: 31px; width: 30px; left: -30px; }
    .carrier h4:after { background-size: 30px 31px; height: 31px; width: 30px; right: -30px; }
}