@import url('reset.css');
@import url('common.css?20180319');

/*#vimg*/
#vimg{position:relative; overflow:hidden;}
#vimg img{width:100%; vertical-align:bottom;}
#vimgb{position:relative; overflow:hidden;}
/*#vimgb li{display:none;}*/
/*#vimgb li:nth-child(1){display:block;}*/
#vimgs{background:rgba(256,256,256,0.9); position:absolute; z-index:10; bottom:0; width:100%; overflow:hidden;}
#vimgs .txt{display:none;}
#vimgs ul{display:table; width:90%; margin:0 auto; border-collapse:collapse; color:#000;}
#vimgs ul li{display:table-cell; vertical-align:middle; width:11%; max-width:200px; transition:0.8s all ease-in 0.1s;}
#vimgs .img{position:relative; overflow:hidden; display:table; margin:5px 1px; opacity:0.95}
#vimgs .img img{position:relative; opacity:0.8;}
#vimgs .img h2{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(249,248,248,0.7); padding-top:25%; vertical-align:middle; text-align:center; color:#f5a623; text-shadow:#fff 0 0 10px; display:none; cursor:pointer;}
#vimgs .img:hover h2{display:block;}
#vimgs .img:hover img{opacity:1;}
#vimgs ul li.on{ max-width:none; width:auto;}
#vimgs ul li.on .img{display:none;}
#vimgs ul li.on .txt{display:block;}
#vimgs .txt{padding:5px 15px; font-size:0.9em;}
#vimgs h3{font-size:1.5rem; font-family:"新細明體"; padding-bottom:10px; font-weight:bold; color:#89B80B; text-shadow:#fff 0 0 5px;}
#vimgs p{padding-bottom:5px;}
#vimgs .txt a{color:#f9c623; font-size:0.9em;}


/*#search_bar*/
#search_bar{background:#3dd8c9; border-top:#f5a623 5px solid; padding:15px 0 5px; box-shadow:#000 5px 0 10px; position:relative; z-index:2;}
#search_bar .tb{width:100%; margin:0 auto; max-width:1290px; display:table;}
#search_bar .td{vertical-align:middle;}
#search_bar .td:nth-child(1){color:#fff; transform:rotate(-5deg); text-align:right; text-shadow:#0BA783 2px 2px 2px; width:calc(25% - 15px); vertical-align:middle; padding-top:15px;}
#search_bar .td:nth-child(2){text-align:right; padding-right:15px;width:10%;}
#search_bar .td:nth-child(3){width:65%;}
#search_bar .bt{background:#0cacc1; /*float:left;*/ padding:12px 0; color:#fff; width:90%; max-width:150px; text-align:center; font-size:0.9em; box-shadow:#1BB381 0 0 10px; border:#42B7DB 1px solid; cursor:pointer; margin-left:10px;}
#search_bar .bt:hover{border:#0cacc1 1px solid; background:#fff; color:#0cacc1;}
.btsel{display: inline-block; color:#fff; font-size:0.9em; width:150px; cursor:pointer; margin-left:5px; position:relative;}
.btsel > div:first-child{border:#fff 1px solid;}
.btsel > ul{position:absolute; background:rgba(251,249,249,0.9); width:100%; color:#0cacc1; display:none; box-shadow:#ccc 0 10px 10px;}
.btsel li{padding:5px;}
.btsel li:hover{color:#f5a623;}
.selarea{background:url(../images/icon-search01.gif) 0 5px no-repeat; padding:12px 10px 12px 25px;}
.selDdate, .selRdate{background:url(../images/icon-search02.gif) 2px 5px no-repeat; padding:12px 10px 12px 35px;}
.seltype{background:url(../images/icon-search03.gif) 2px 5px no-repeat; padding:12px 10px 12px 35px;}





#typeList{width:90%; margin:0rem auto; max-width:1200px;}
#typeList ul{width:50%; padding-bottom:1.5rem;}
#typeList ul:nth-child(odd){float:left;}
#typeList ul:nth-child(even){float:right;}
#typeList ul li{width:50%; position:relative;float:right;}
#typeList ul li a{width:95%; display:block;}
#typeList .imgbox{position:relative; width:100%; height:100%; overflow:hidden;}
#typeList .imgbox .img{position:relative; width:98%; height:200px; top:20px; z-index:1;}
#typeList .imgbox h3{text-align:right; position:absolute; z-index:3; background:url(../images/bg-view.png) right bottom no-repeat; width:calc(100% - 20px); padding:10px 10px 20px 10px; font-size:0.85rem; color:#006e27; font-weight:bold;}
#typeList .imgbox .view{border:#fff 1px solid; position:absolute; top:30px; z-index:2; width:calc(100% - 30px); height:calc(100% - 40px); left:10px;}
#typeList .imgbox:hover .view{background:url(../images/view.png) center center no-repeat; background-size:cover;}
#typeList h2{padding:10px 10px 0; text-align:center; width:90%;}
#typeList .typeimg{display:none;}
#typeList .active{display:block;}