/* ---reset.css--- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ font:inherit; font-size:100%; border:0; margin:0; padding:0; vertical-align:baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block;}
body{ line-height:1;}
ol, ul{ list-style:none;}
blockquote, q{ quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{ content:''; content:none;}
table{ border-collapse:collapse; border-spacing:0;}

/* Noto Sans TC 
@font-face{ font-family:'Noto Sans TC'; font-style:normal; font-weight:100; src:url(//fonts.gstatic.com/ea/notosanstc/vl/NotoSansTC-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanstc/vl/NotoSansTC-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanstc/vl/NotoSansTC-Thin.otf) format('opentype');}
@font-face{ font-family:'Noto Sans TC'; font-style:normal; font-weight:300; src:url(//fonts.gstatic.com/ea/notosanstc/vl/NotoSansTC-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanstc/vl/NotoSansTC-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanstc/vl/NotoSansTC-Light.otf) format('opentype');}
@font-face{ font-family:'Noto Sans TC'; font-style:normal; font-weight:400; src:url(//fonts.gstatic.com/ea/notosanstc/vl/NotoSansTC-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanstc/vl/NotoSansTC-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanstc/vl/NotoSansTC-Regular.otf) format('opentype');}
*/

/* fonts */
@font-face{ font-family:'DINPro-Light'; font-style:normal; font-weight:normal; src:local('DINPro-Light'), url('../fonts/DINPro-Light_13935.woff') format('woff');}
@font-face{ font-family:'jf-openhuninn-1.1'; font-style:normal; font-weight:normal; src:local('jf-openhuninn-1.1'), url('../fonts/jf-openhuninn-1.1.ttf') format('opentype');}

/* ---phone--- */
@media screen and (max-width: 767px) {

*{ -webkit-box-sizing:border-box; box-sizing:border-box;}
a, img{ border:0;}
html,body{ -webkit-text-size-adjust:none;}
body{ background-color:white; font-family:sans-serif, 'Yu Gothic UI Semilight';}

/* header */
header{ position:relative; overflow:auto; width:100%; height:85px; background-color:rgb(245, 245, 245); padding-top:15px;}
header h1{ display:block; width:180px; height:54px; color:transparent; background-size:180px auto; background-image:url(../images/phx_logo.svg); background-repeat:no-repeat; margin:0 auto;}

/* footer_mobile */
footer.f_mobile{ clear:both; width:100%; color:rgb(150, 150, 150); font-family:'DINPro-Regular', 'Noto Sans TC'; font-size:14px; font-weight:400; line-height:3em; letter-spacing:2px; text-align:center; margin:0; padding:0;}

footer.f_desktop{ display:none;}

/* slider */
#silder{ display:none;}

/* wrapper */
.wrapper{ width:100%; margin:0; padding:15px;}

/* content */
.content{ overflow:auto; width:100%; margin:0;}

.namecard{ overflow:auto; width:100%; height:auto; background-color:white; border-radius:15px; border:1px rgb(230, 230, 230) solid; margin-bottom:15px; padding:0; box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);}

.namecard_photo{ overflow:auto; width:100%; text-align:center;}
.namecard_photo img{ width:200px; border-radius:50%; margin-top:25px;}

.namecard_info{ overflow:auto; width:100%; padding:0 20px;}
.namecard_info h5{ display:block; width:100%; font-size:24px; font-weight:bold; line-height:1.6em; letter-spacing:2px; text-align:center; margin:5px 0;}
.namecard_info p{ font-size:16px; line-height:1.6em; letter-spacing:0.5px; border-bottom:1px rgb(220, 220, 220) dotted; margin-bottom:10px;}
.namecard_info p a{ font-size:17px; font-family:'Arial Narrow'; color:rgb(75, 130, 200); text-decoration:none;}
.namecard_info p a:hover{ color:orangered; text-decoration:none;}

.namecard_qrcode{ overflow:auto; width:100%; text-align:center;}
.namecard_qrcode img{ width:200px;}

.hot_sale{ display:none;}

.col-xs-8{ display:none;}  

#content{ width:100%; margin:0;}
#search{ background-image:none; margin-top:10px;}

/* 最新消息 */
.top_news{ width:100%; /*background-image:url(../images/repeatY.gif); background-repeat:repeat-y;*/ padding:0;}
.top_news h3{ display:block; width:100%; background-size:30px auto; background-image:url("../images/icon_news.png"); background-position:0 6px; background-repeat:no-repeat; color:rgb(110, 110, 110); font-size:20px; font-weight:bold; line-height:2em; letter-spacing:3px; text-indent:35px; border-bottom:1px rgb(0, 135, 15) solid; margin-bottom:10px;}
.top_news ul{ list-style-type:circle; margin-left:20px;}
.top_news ul li{ font-size:16px; line-height:1.4em; letter-spacing:0.5px; border-bottom:1px rgb(200, 200, 200) dotted; margin-bottom:15px; padding-bottom:5px;}
.top_news ul li:hover{ color:DarkBlue;}
.top_news ul li:last-child{ border:0;}

/* 最新消息詳細內容頁 */
.top_news_detail{ overflow:auto; width:100%; background-color:white; border:0; margin:0; padding:25px 15px;}
.top_news_detail h3{ display:block; width:100%; background-size:25px auto; color:DarkBlue; font-size:22px; font-weight:bold; line-height:1.2em; letter-spacing:-0.5px; text-indent:0; border-bottom:1px rgb(0, 135, 15) dotted; margin:15px 0; padding-bottom:10px;}
.top_news_detail p{ font-size:18px; line-height:1.4em; letter-spacing:0.5px; margin-bottom:15px;}
.top_news_detail span.breadcrumb{ display:block; width:100%; color:rgb(160, 160, 160); font-size:13px; line-height:2em; letter-spacing:1px; text-align:left;}
.top_news_detail span.breadcrumb a{ color:rgb(160, 160, 160); text-decoration:none;}
.top_news_detail span.breadcrumb a:hover{ color:green; text-decoration:none;}

.trip_left_column{ display:none;}
.trip_right_column{ display:none;}

}

/* ---desktop--- */
@media screen and (min-width: 768px) {

*{ -webkit-box-sizing:border-box; box-sizing:border-box;}
a, img{ border:0;}

html, body{ -webkit-text-size-adjust:none; font-family:'Yu Gothic UI Semilight', sans-serif;}

/* footer */
footer.f_desktop{ clear:both; overflow:auto; position:relative; width:980px; height:100px; font-size:14px; line-height:1.4em; letter-spacing:0.5px; margin:15px auto 0 auto;}
footer.f_desktop h1{ position:absolute; display:block; width:200px; height:32px; top:25px; left:0; background-size:200px auto; background-image:url(../images/HBTA_logo_new.svg); background-repeat:no-repeat; color:transparent; margin:0; padding:0;}
footer.f_desktop .info_1{ position:absolute; top:0; left:260px;}
footer.f_desktop .info_1 p{ display:block; width:100%; margin-bottom:10px;}
footer.f_desktop .info_1 p.phx{ display:block; width:100%; height:38px; background-size:125px auto; background-image:url(../images/phx_logo.svg); background-repeat:no-repeat; margin-right:10px; padding:15px 0 0 135px;}
footer.f_desktop .info_2{ position:absolute; top:28px; right:10px;}
footer.f_desktop a{ color:DarkCyan; font-family:'Arial Narrow'; text-decoration:none;}
footer.f_desktop a:hover{ color:Crimson; text-decoration:none;}

footer.f_mobile{ display:none;}    

/* header */
header{ position:relative; overflow:auto; width:100%; height:85px; background-color:rgb(245, 245, 245); padding-top:15px;}
header h1{ display:block; width:180px; height:54px; color:transparent; background-size:180px auto; background-image:url(../images/phx_logo.svg); background-repeat:no-repeat; margin:0 auto;}

/* wrapper */
.wrapper{ width:100%;}

/* content */
.content{ overflow:auto; width:980px; margin:0 auto 15px auto;}

.namecard{ position:relative; overflow:auto; width:800px; height:270px; background-color:white; border:1px rgb(230, 230, 230) solid; margin:0 auto 15px auto; padding:0; box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);}

.namecard_photo{ position:absolute; overflow:auto; width:200px; left:30px; top:35px; text-align:center; vertical-align:middle;}
.namecard_photo img{ width:200px; border-radius:50%;}

.namecard_info{ position:absolute; overflow:auto; width:300px; left:280px; top:45px;}
.namecard_info h5{ font-size:24px; font-weight:bold; line-height:1.6em; letter-spacing:2px; margin-bottom:5px;}
.namecard_info p{ font-size:16px; line-height:1.6em; letter-spacing:0.5px; border-bottom:1px rgb(220, 220, 220) dotted; margin-bottom:10px;}
.namecard_info p a{ font-size:17px; font-family:'Arial Narrow'; color:rgb(75, 130, 200); text-decoration:none;}
.namecard_info p a:hover{ color:orangered; text-decoration:none;}

.namecard_qrcode{ position:absolute; overflow:auto; width:170px; right:30px; top:50px; text-align:center;}
.namecard_qrcode img{ width:170px;}

#search_mobile{ display:none;}    

/* 手機版 button */    
#tour{ display:none;}

.hot_sale{ overflow:auto; width:100%;}
.hot_sale ul{ list-style-type:none;}
.hot_sale ul li{ position:relative; float:left; text-align:center;}
.hot_sale ul li:first-child{ padding-left:0;}
.hot_sale ul li:last-child{ padding-right:0;}

.hot_sale ul li img{ width:180px; height:118px; margin-top:6px;}

.hot_sale ul li mark{ position:absolute; overflow:auto; display:block; width:40px; height:40px; top:0; left:0; background-color:rgb(220, 0, 0); color:rgb(255, 255, 60); font-family:'Arial Black'; font-size:14px; font-weight:bold; line-height:40px; letter-spacing:-1px; text-align:center; border-radius:50%; transform:rotate(-10deg);}

.hot_sale ul li a{ display:block; width:195px; height:90px; color:rgb(100, 100, 100); font-size:14px; line-height:1.2em; text-align:left; text-decoration:none; padding:10px 6px;}
.hot_sale ul li a:hover{ color:ForestGreen; text-decoration:none;}

.hot_sale ul li a h5{ color:black; font-size:17px; font-weight:bold; line-height:1.4em; margin-bottom:5px;}
.hot_sale ul li a:hover h5{ color:ForestGreen;}    

/* 最新消息 */
.top_news{ float:right; width:315px; padding:5px 10px 0 25px;}
.top_news h3{ display:block; width:100%; background-size:25px auto; background-image:url("../images/icon_news.png"); background-position:0 8px; background-repeat:no-repeat; color:rgb(110, 110, 110); font-size:20px; font-weight:bold; line-height:2em; letter-spacing:3px; text-indent:32px; border-bottom:1px rgb(0, 135, 15) solid; margin-bottom:5px;}
.top_news ul{ list-style-type:circle; padding-left:18px;}
.top_news ul li{ font-size:15px; line-height:1.4em; letter-spacing:0.5px; border-bottom:1px rgb(200, 200, 200) dotted; margin-bottom:10px; padding-bottom:5px;}
.top_news ul li a{ color:Navy; text-decoration:none;}
.top_news ul li a:hover{ color:darkorange; text-decoration:none;}
.top_news ul li:last-child{ border:0;}

/* 最新消息詳細內容頁 */
.top_news_detail{ overflow:auto; display:block; width:980px; background-color:white; border:1px rgb(220, 220, 220) solid; margin:35px auto 10px auto; padding:35px 150px 25px 150px;}
.top_news_detail h3{ display:block; width:100%; background-size:25px auto; color:DarkBlue; font-size:22px; font-weight:bold; line-height:1.2em; letter-spacing:-0.5px; text-indent:0; border-bottom:1px rgb(0, 135, 15) dotted; margin:15px 0; padding-bottom:10px;}
.top_news_detail p{ font-size:18px; line-height:1.4em; letter-spacing:0.5px; margin-bottom:15px;}
.top_news_detail span.breadcrumb{ display:block; width:100%; color:rgb(160, 160, 160); font-size:13px; line-height:2em; letter-spacing:1px; text-align:left;}
.top_news_detail span.breadcrumb a{ color:rgb(160, 160, 160); text-decoration:none;}
.top_news_detail span.breadcrumb a:hover{ color:green; text-decoration:none;}
 
/* 行程 */
.trip_left_column{ overflow:auto; float:left; width:480px; margin-right:20px;}
.trip_right_column{ overflow:auto; float:right; width:480px;}

.trip_box{ clear:both; width:100%; border-radius:0 0 10px 10px; margin-bottom:25px; padding:0;}
.trip_box h3{ display:block; width:100%; color:ForestGreen; font-size:20px; font-weight:bold; line-height:1.8em; letter-spacing:-1px; text-indent:20px; border-radius:10px 10px 0 0; border-top:1px rgb(200, 220, 200) solid; border-right:1px rgb(200, 220, 200) solid; border-bottom:1px rgb(200, 220, 200) dashed; border-left:1px rgb(200, 220, 200) solid; padding-top:5px;}
.trip_box ul{ display:block; width:100%; height:270px; background:linear-gradient(to bottom, rgb(235, 255, 235) 10%, white 100%); list-style-type:disc; border-radius:0 0 10px 10px; border-right:1px rgb(200, 220, 200) solid; border-bottom:1px rgb(200, 220, 200) solid; border-left:1px rgb(200, 220, 200) solid; padding-top:5px; padding-right:15px; padding-left:30px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);}
.trip_box ul li{ border-bottom:1px rgb(220, 220, 220) dotted;}
.trip_box ul li:last-child{ border:0;}
.trip_box ul li a{ display:block; width:100%; color:black; font-size:18px; line-height:1.4em; letter-spacing:0.5px; text-decoration:none; margin-bottom:5px; padding:10px 5px;}
.trip_box ul li a:hover{ background-color:rgb(200, 255, 200); text-decoration:none;}

}