/* GOOGLE FONTS */ @import url(http://fonts.googleapis.com/css?family=Roboto:100); @import url(http://fonts.googleapis.com/css?family=Roboto:400); @import url(http://fonts.googleapis.com/css?family=Roboto:400italic); @import url(http://fonts.googleapis.com/css?family=Roboto:700); @import url(http://fonts.googleapis.com/css?family=Fredoka+One); /* Global properties ======================================================== */ a[href^="tel:"] { color: inherit; text-decoration: none;} ::selection{ background:#888888!important; color:#fff} ::-moz-selection{ background:#888888!important; color:#fff} a{ color:#2acccc; text-decoration: underline; outline:none} a:hover{ color:#2acccc; text-decoration: none; outline:none} body{ background:#115555; border:0; font-size:14px; font-family: "Microsoft JhengHei"; color:#FFF ; line-height:18px; min-width:360px; } .main0{background:url(../../images/bg0.jpg) no-repeat left top #115555;} .main1{background:url(../../images/bg1.jpg) no-repeat left top #115555;} #clouds1{width: 100%; height: 233px; background: url(../../images/clouds1.png) 0 0 repeat-x; position: absolute; left: 0; top: 60px; z-index: 1;} #plane1{width: 157px; height: 137px; background: url(../../images/plane1.png) 0 0 repeat-x; position: absolute; left: 50%; margin-left: -700px; top: 60px; z-index: 2;} #main{margin: 0 auto; position: relative; z-index: 10; overflow: hidden;} #inner{max-width: 1000px; margin: 0 auto; position: relative; z-index: 10;} .alpha1{opacity:0.1; filter:alpha(opacity=10);} .alpha2{opacity:0.2; filter:alpha(opacity=20);} .alpha3{opacity:0.3; filter:alpha(opacity=30);} .alpha4{opacity:0.4; filter:alpha(opacity=40);} .alpha5{opacity:0.5; filter:alpha(opacity=50);} .alpha6{opacity:0.6; filter:alpha(opacity=60);} .alpha7{opacity:0.7; filter:alpha(opacity=70);} .alpha8{opacity:0.8; filter:alpha(opacity=80);} .alpha9{opacity:0.9; filter:alpha(opacity=90);} .alpha10{opacity:1; filter:alpha(opacity=100);} .margin1em{ margin:1em 0;} .txttor{text-align:right;} .timetxttor{text-align:right;} .border_b1{border-bottom:rgba(255,255,255,0.3) 1px solid; padding-bottom:3px; padding:5px 0;} .bsp{ background:rgba(255,255,255,0.05); border:#CCC 0px solid; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; margin-bottom:8px; padding:5px 0;} .fontbig{ font-size:1.5em;} .fontbig2{ font-size:1.8em;} .fontbig3{ font-size:2em;} .fontbig4{ font-size:2.2em;} /* ============================= header ====================== */ .top1{padding-top: 40px; padding-bottom: 40px;} header{float: left;} .top2{float: right; padding-top: 20px; text-align: right;} .toleft{float:left} .toright{float:right;} .w100h10{width:100%; height:10px; padding:10px 0;} .w100h20{width:100%; height:20px; padding:10px 0;} .phone1{} .phone1 .txt1{font-size: 16px; font-weight: 400; line-height: 20px; color: #fff;} .phone1 .txt2{font-size: 20px; font-weight: 700; line-height: 25px; color: #fff;} .social_wrapper{line-height: 1px; padding-top: 15px;} .social{ display: inline-block; margin: 0 0px; padding-top: 0px; list-style: none; white-space: nowrap;} .social li{display: inline-block; margin: 0 2px; float: left;} .social li a{opacity: 1; filter: alpha(opacity=100);} .social li a:hover{opacity: 0.6; filter: alpha(opacity=60);} #readdiv{width:100%;float:left; padding:8px 0 12px 0; line-height:20px;} #readdiv img{width:20px;} /* ============================= slider3 ====================== */ #slider3_wrapper{} #slider3{position: relative;} .prev3{display: block; width: 25px; height: 25px; background: url(../../images/prev3.png) left top no-repeat; position: absolute; left: -30px; top: 50%;margin-top: -12px; z-index: 100;} .prev3:hover{background-position: bottom;} .next3{display: block; width: 25px; height: 25px; background: url(../../images/next3.png) left top no-repeat; position: absolute; right: -30px; top: 50%; margin-top: -12px; z-index: 100;} .next3:hover{background-position: bottom;} .slider3-title{font-family: 'Julius Sans One'; font-weight: 400; font-size: 30px; line-height: 30px; color: #2a2a2a; text-transform: uppercase; padding-bottom: 50px; text-align: center;} .carousel-box{position: relative;} .carousel-box .inner{position: relative; overflow: hidden;} .carousel.main{position: relative; overflow: hidden; margin: 0; padding: 0;margin-right: -20px; } .caroufredsel_wrapper{padding: 0; margin: 0;} .caroufredsel_wrapper ul{padding: 0; margin: 0;} .carousel-box ul li { float:left; display: inline-block; padding:0px 0px 0px 0px; position:relative; width:300px; overflow:hidden; padding-right:20px } .banner{} .banner .banner_inner{padding-top: 20px; height:200px;} .banner .banner_inner a{display: block; text-decoration: none; background: #dd8931; position: relative; padding: 8px; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;} .banner .banner_inner a .img{position: absolute; right: 20px; top: -10px; z-index: 2;} .banner .banner_inner a .title{padding: 15px; font-family:'Microsoft JhengHei'; font-size: 1.5em; color: #FFF; line-height: 25px; text-transform: uppercase;} .banner .banner_inner a .txt{font-family:'Microsoft JhengHei'; background: #c57724;border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; padding: 0px; text-align: left;} .banner .banner_inner a .txt img{border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; width:100%;} .banner .banner_inner a .txt .txt1{ display:none;font-size: 14px; line-height: 20px; color: #fff; padding-bottom: 15px;} .banner .banner_inner a .txt .txt2{display: inline-block; padding: 8px 15px; color: #c57724; background: #fff; background: rgba(255, 255, 255, 0.5); font-size: 14px; font-weight: 700; line-height: 20px;border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;} .banner .banner_inner a:hover .txt .txt2{background: rgba(255, 255, 255, 1);} .banner .banner_inner a:hover , .banner.banner1 .banner_inner a:hover , .banner.banner2 .banner_inner a:hover , .banner.banner3 .banner_inner a:hover , .banner.banner4 .banner_inner a:hover, .banner.banner5 .banner_inner a:hover {background: rgba(71, 206, 206, 1);} .banner.banner1 .banner_inner a{} .banner.banner2 .banner_inner a{background: #8eb52b;} .banner.banner3 .banner_inner a{background: #eb5537;} .banner.banner4 .banner_inner a{background: #2e72be;} .banner.banner5 .banner_inner a{background: #af58a8;} .banner.banner1 .banner_inner a .txt{} .banner.banner2 .banner_inner a .txt{background: #91ae46;} .banner.banner3 .banner_inner a .txt{background: #dbaf38;} .banner.banner4 .banner_inner a .txt{background: #6491c0;} .banner.banner5 .banner_inner a .txt{background: #b94724;} .banner.banner1 .banner_inner a .txt .txt2{} .banner.banner2 .banner_inner a .txt .txt2{color: #91ae46;} .banner.banner3 .banner_inner a .txt .txt2{color: #dbaf38;} .banner.banner4 .banner_inner a .txt .txt2{color: #6491c0;} .banner.banner5 .banner_inner a .txt .txt2{color: #b94724;} .slogan1_wrapper{} .slogan1{padding: 50px 0;} .slogan1 .block1{position: relative;} .slogan1 .block1 .txt1{font-family: 'Roboto'; font-weight: 100; font-size: 40px; line-height: 44px; color: #6e9ccc; padding-top: 0px; padding-bottom: 0px;} .slogan1 .block2{position: relative;} .join1{display: block; text-decoration: none; line-height: 63px; text-align: center; padding: 0 0px; background: url(../../images/join1.jpg) 0 0 repeat-x; border: 10px solid #fff; font-family: 'Fredoka One'; font-weight: 400; font-size: 24px; color: #5483b4; text-transform: uppercase; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px;box-shadow: 0px 0px 3px #afc7e0;-moz-box-shadow: 0px 0px 3px #afc7e0; -webkit-box-shadow: 0px 0px 3px #afc7e0;} .join1:hover{background-image:url(../../images/join1_over.jpg); color: #91ae46;} /* ============================= content ====================== */ #inner2{/*background: #fff;border-radius:30px 30px 0 0; -moz-border-radius:30px 30px 0 0; -webkit-border-radius:30px 30px 0 0;*/} #content{/*background: url(../../images/content.png) 0 0 repeat-x #fff;*/ padding-top: 10px; /*padding-bottom: 40px; border: 8px solid #fff;*/ border-radius:30px 30px 0 0; -moz-border-radius:30px 30px 0 0; -webkit-border-radius:30px 30px 0 0; position: relative; z-index: 2;} #content P {font-size:14px; font-family: "Microsoft JhengHei"; margin-bottom:10px;} #content2{background: url(../../images/content2.png) 0 0 repeat-x #fff; padding-top: 0px; padding-bottom: 40px; border: 8px solid #fff; border-radius:30px 30px 0 0; -moz-border-radius:30px 30px 0 0; -webkit-border-radius:30px 30px 0 0; position: relative; z-index: 2;} .pagetitle{ background:#166e6e; padding:20px 30px; font-family:'Microsoft YaHei', sans-serif; font-size:2em; font-weight:bold; color:#FFF; position:absolute; z-index:1; margin-left:30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 15px; box-shadow: 0px 11px 19px -3px #000000; -webkit-box-shadow: 0px 11px 19px -3px #000000; -moz-box-shadow: 0px 11px 19px -3px #000000; -o-box-shadow: 0px 11px 19px -3px #000000; } #slider .pagetitle span{ font-size:60%; opacity:0.6; filter:alpha(opacity=60); margin-left:8px;} .titlebottom{bottom:-30px;} .path{width:95%; padding:5px 8px; margin:0 auto;} /* ============================= footer ====================== */ .bot1{/*background: url(../../images/content.png) 0 0 repeat-x #fff;*/ padding-top: 10px; padding-bottom: 30px; border: 8px solid #1fa1a1; border-radius:15px 15px 0 0; -moz-border-radius:15px 15px 0 0; -webkit-border-radius:15px 15px 0 0; border-bottom: none; margin-top:20px; background:url(../../images/footer_d.png) no-repeat right bottom #1fa1a1;} .bot2{padding-bottom: 12px; border-bottom: 3px solid #bdd5e6; margin-bottom: 25px;} footer{font: 14px Arial, Helvetica, sans-serif; font-family: "Microsoft JhengHei"; font-weight:bold; line-height:20px; color:#FFF;} .copyright{color: #FFF;} .copyright span{font-family: 'Microsoft JhengHei'; font-weight: 400; font-size: 24px; color: #fffb96; line-height:1.5em;} .copyright a , .telstyle a{color: #FFF;} .copyright a:hover , .telstyle a:hover{color: #2fcfcf;} .telstyle{width:50%; float:left; padding-left:20px;} .telstyle span{font-size:1.8em; font-weight:400; line-height:1.8em;} /* ============================= MAP0 =========================*/ #mapdiv{z-index:-1; text-align:center; } .map_d{ width:67.5%;} .map_show{position:absolute; z-index:1; /*opacity:0;*/ display:block; width:63.9%; margin-top:0.2%; margin-left:15.6%;} svg{ position:absolute; z-index:9999; width:61%; margin:1% 0 0 0.5%;} path {opacity:0; cursor:pointer;} /*.st1{ display:block; opacity:1;}*/ #guidemap_d {-webkit-filter:brightness(.9); transition: 0.5s; -webkit-transition: 0.5s;} #guidemap_d.expanded { -webkit-filter:brightness(.4); transition: 0.5s; -webkit-transition: 0.5s;} #guidemap_1 { opacity:0; transition: 0.5s; -webkit-transition: 0.5s;} #guidemap_1.expanded{ opacity:1; transition: 0.5s; -webkit-transition: 0.5s; z-index:99999;} #guidemap_2 { opacity:0; transition: 0.5s; -webkit-transition: 0.5s;} #guidemap_2.expanded{ opacity:1; transition: 0.5s; -webkit-transition: 0.5s; z-index:99999;} #guidemap_3 { opacity:0; transition: 0.5s; -webkit-transition: 0.5s;} #guidemap_3.expanded{ opacity:1; transition: 0.5s; -webkit-transition: 0.5s; z-index:99999;} #guidemap_4 { opacity:0; transition: 0.5s; -webkit-transition: 0.5s;} #guidemap_4.expanded{ opacity:1; transition: 0.5s; -webkit-transition: 0.5s; z-index:99999;} #guidemap_5 { opacity:0; transition: 0.5s; -webkit-transition: 0.5s;} #guidemap_5.expanded{ opacity:1; transition: 0.5s; -webkit-transition: 0.5s; z-index:99999;} #guidemap_6 { opacity:0; transition: 0.5s; -webkit-transition: 0.5s;} #guidemap_6.expanded{ opacity:1; transition: 0.5s; -webkit-transition: 0.5s; z-index:99999;} #gmenu1,#gmenu2,#gmenu3,#gmenu4,#gmenu5,#gmenu6{transition: 0.5s; -webkit-transition: 0.5s; -webkit-filter:brightness(1);} #gmenu1.expanded,#gmenu2.expanded,#gmenu3.expanded,#gmenu4.expanded,#gmenu5.expanded,#gmenu6.expanded{transition: 0.5s; -webkit-transition: 0.5s; -webkit-filter:brightness(0.5);} /* ============================= RightDiv ====================== */ #floatDivBoxs{width:170px;position:fixed;top:50px;right:-175px;z-index:999;} #floatDivBoxs .floatDtt{width:100%;height:45px;line-height:45px; background:#f08326;color:#fff;font-family: "Microsoft JhengHei";font-size:18px;text-indent:22px;position:relative;} .floatShadow{ background:#f0f0f0; color:#333;padding:10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-left-radius: 10px;} .floatShadow img{ width:2em; margin:0 3px;} .floatShadow2{ padding:10px; position:absolute; top:0; left:50%; width:580px; text-align:right; z-index:999999;} .floatShadow2 img{ width:2em; margin:0 3px;} #rightArrow{width:50px;height:45px;background:url(../../images/online_arrow.jpg) no-repeat -50px 0;position:fixed;top:50px;right:-5px;z-index:999; display:none;} #rightArrow a{display:block;height:45px;} /* ============================= main menu ====================== */ .menu_wrapper{ height: 60px;} .navbar_ { margin: 0; padding: 0; background: none; position: relative;z-index: 30;} .navbar_ .navbar-inner_ { padding: 0; margin: 0; border: none; min-height: inherit; background: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none; filter:none; } .navbar_ .btn-navbar { background: url(../../images/btn-navbar.png) right center no-repeat #115555; background-size:70%; border: none;box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none; margin: 0px; padding: 0; float:right; width:60px; height: 50px;border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; margin-top: 10px;} .navbar_ .btn-navbar:hover{background-color: #166e6e;} .navbar_ .btn-navbar .icon-bar{background-image: none; display: none;} .nav-collapse_.collapse{ position:relative; display:block; text-align: center;} .navbar_ .nav{ position: relative; float: none; margin: 0; padding: 0; display: block; left: auto;} .navbar_ .nav > li{max-width: 140px; height: 40px; position: relative; display: block; float: left; white-space: nowrap; background: none; margin-left: 5px; border-bottom:#1fa1a1 1px solid;} .navbar_ .nav > li:first-child{margin-left: 0;} .navbar_ .nav > li > a{display: block; text-decoration: none; background: none; font-family: 'Microsoft JhengHei'; font-weight: 400; font-size: 16px; height: 50px; line-height: 50px; color: #fff; text-shadow:none; padding: 0px; border: none; margin: 0; background: #115555; margin-top: 10px; border-radius:20px 20px 0 0; -moz-border-radius:20px 20px 0 0; -webkit-border-radius:20px 20px 0 0; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .navbar_ .nav > li > a:hover, .navbar_ .nav > li > a:focus, .navbar_ .nav > li.sfHover > a, .navbar_ .nav > li.sfHover > a:hover{color: #fff; text-decoration: none; background: #166e6e; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none; margin-top: 0; height: 60px; line-height: 60px;} .navbar_ .nav > li.active > a, .navbar_ .nav > li.active > a:hover, .navbar_ .nav > li.active > a:focus, .navbar_ .nav > li.sfHover.active > a, .navbar_ .nav > li.sfHover.active > a:hover{color: #fff; text-decoration: none; background: #1e8080; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none; margin-top: 10px;height: 70px; line-height: 70px; } .navbar_ .nav > li.active > a:after, .navbar_ .nav > li.active > a:hover:after, .navbar_ .nav > li.active > a:focus:after, .navbar_ .nav > li.sfHover.active > a:after, .navbar_ .nav > li.sfHover.active > a:hover:after{content:""; display: inline-block; width: 26px; height: 28px; background: url(../../images/butterfly.png) 0 0 no-repeat; position: absolute; left: 20px; top: -8px; z-index: 2; } .sub-menu ul { position: absolute; display: none; left: 0px; top: 60px; list-style: none; zoom: 1; z-index: 109; margin: 0; padding:10px; background: #166e6e; text-align: left; border-radius:0 15px 15px 15px; -moz-border-radius:0 15px 15px 15px; -webkit-border-radius:0 15px 15px 15px;} .sub-menu li { margin: 0; position: relative; zoom: 1; display: block; margin-bottom: 1px;} .sub-menu li a{display: block; position: relative; font-family:'Microsoft JhengHei'; font-weight: 400; font-size: 16px; line-height: 20px; color: #FFF; text-decoration: none; padding: 9px 70px 9px 20px; background:#1fa1a1; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .sub-menu .m0{background:url(../../images/menu_ico0.png) no-repeat left top #1fa1a1; padding-left:40px;} .sub-menu .m0:hover{background:url(../../images/menu_ico0.png) no-repeat left top #2acccc;} .sub-menu .m1{background:url(../../images/menu_ico1.png) no-repeat left top #1fa1a1; padding-left:40px;} .sub-menu .m1:hover{background:url(../../images/menu_ico1.png) no-repeat left top #2acccc;} .sub-menu .m2{background:url(../../images/menu_ico2.png) no-repeat left top #1fa1a1; padding-left:40px;} .sub-menu .m2:hover{background:url(../../images/menu_ico2.png) no-repeat left top #2acccc;} .sub-menu .m3{background:url(../../images/menu_ico3.png) no-repeat left top #1fa1a1; padding-left:40px;} .sub-menu .m3:hover{background:url(../../images/menu_ico3.png) no-repeat left top #2acccc;} .sub-menu .m4{background:url(../../images/menu_ico4.png) no-repeat left top #1fa1a1; padding-left:40px;} .sub-menu .m4:hover{background:url(../../images/menu_ico4.png) no-repeat left top #2acccc;} .sub-menu .m5{background:url(../../images/menu_ico5.png) no-repeat left top #1fa1a1; padding-left:40px;} .sub-menu .m5:hover{background:url(../../images/menu_ico5.png) no-repeat left top #2acccc;} .sub-menu .m6{background:url(../../images/menu_ico6.png) no-repeat left top #1fa1a1; padding-left:40px;} .sub-menu .m6:hover{background:url(../../images/menu_ico6.png) no-repeat left top #2acccc;} .sub-menu .m7{background:url(../../images/menu_ico7.png) no-repeat left top #1fa1a1; padding-left:40px;} .sub-menu .m7:hover{background:url(../../images/menu_ico7.png) no-repeat left top #2acccc;} .sub-menu li a:hover{ text-decoration: none; color: #fff; background: #2acccc;} .sub-menu li a em{display: inline-block; width: 10px; height: 12px; background: url(../../images/marker1.png) left top no-repeat; position: absolute; right: 15px; top: 50%; margin-top: -6px;} .sub-menu li a:hover em{} .sub-menu-1 > ul{} .sub-menu-2 > ul{left: 100%; top: -8px; margin-left: 9px; background: #166e6e;border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;} /* ============================= menu bot ====================== */ .menu_bot { display:block; float: left; position: relative; z-index:10; text-align:center; white-space:nowrap; padding-top: 0px; } #menu_bot { list-style: none; display:block; white-space:nowrap; padding: 0; margin: 0;} #menu_bot > li { list-style: none; display: inline-block; margin-left:10px; position:relative; float:left; white-space:nowrap;} #menu_bot > li:first-child{} #menu_bot > li > a{ display:block; text-decoration:none; position:relative; font-family:'Microsoft JhengHei'; font-weight: 400; font-size: 16px; color: #FFF; line-height: 32px; padding: 0 15px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; border:#bdd5e6 0.1em solid;} #menu_bot > li > a:hover, #menu_bot > li > a:focus{color: #fff; text-decoration: none; background: #166e6e;} #menu_bot > li.active > a, #menu_bot > li.active > a:hover {font-weight: 700; color: #FFF; background: none;} /* ============================= search-form ====================== */ .search-form-wrapper{float: right; padding-left: 0px; padding-top: 0px;} .navbar-form { float: left; position:relative; z-index: 11; margin:0px 0px 0 0 ; padding: 0; } .navbar-form input { width: 120px; height: 20px; font-size: 12px; font-style: italic; line-height: 20px; color:#6491c0; background: #fff; border: none; border: 1px solid #ddebf6; margin: 0; padding: 5px 50px 5px 10px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; -moz-box-shadow: inset 0px 3px 20px 3px #fff; -webkit-box-shadow: inset 0px 3px 20px 3px #fff; box-shadow: inset 0px 3px 20px 3px #fff; } .navbar-form input:focus {color: #000; border-color: #6491c0;-moz-box-shadow: inset none; -webkit-box-shadow: none; box-shadow: none;} .navbar-form a {text-decoration: none; margin: 0; display: inline-block; width: 42px; height: 28px; background: url(../../images/search.png) left top no-repeat; position:absolute; right:0; top: 1px; } .navbar-form a:hover { background-position: right;} /* ============================= toTop ====================== */ #toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; z-index: 1000; overflow:hidden; width:50px; height:50px; border:none; text-indent:100%; background:url(../../images/totop.png) no-repeat left top; } #toTopHover { background:url(../../images/totop.png) no-repeat left bottom; width:50px; height:50px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none; } /* ============================= main layout ====================== */ h1{ font-family:'Microsoft JhengHei'; font-size:2em; font-weight:bold; color:#FFF; line-height:30px; padding:30px 0 15px 0; margin: 0;border-bottom: 3px solid #bdd5e6; margin-bottom: 15px;} h1 span{font-family:'Fredoka One'; font-size:60%; font-weight:200; margin-left:5px; opacity:0.6; filter:alpha(opacity=60);} h1.c1{padding-top: 10px; border: none; margin-bottom: 0;} h2{ font-family:'Microsoft JhengHei'; font-size:2em; font-weight:bold; color:#FFF; line-height:30px; padding:20px 0 15px 0; margin: 0;border-bottom: 3px solid #bdd5e6; margin-bottom: 15px;} h2 span{font-family:'Fredoka One'; font-size:60%; font-weight:200; margin-left:5px; opacity:0.6; filter:alpha(opacity=60);} h2g{ font-family:'Microsoft JhengHei'; font-size:1.5em; font-weight:bold; color:#FFF; line-height:40px; padding:20px 0 15px 0; margin: 0; margin-bottom: 20px;} h2g span{font-family:'Fredoka One'; font-size:0.8em; font-weight:200; margin-left:5px; opacity:0.5; filter:alpha(opacity=50);} h3{ font-family:'Microsoft JhengHei'; font-weight:700; font-size:16px; color:#FFF; line-height:22px; padding:0px 0 10px 0; margin: 0;} h3 a{color: #2acccc; text-decoration:none;} h3 a:hover{color: #FFF;} h4{ font-family:'Microsoft JhengHei'; font-weight:700; font-size:13px; color:#FFF; line-height:18px; padding:0px 0 10px 0; margin: 0;} h4 a{color: #FFF;} h4 a:hover{color: #2acccc;} h5{ font-family:'Microsoft JhengHei'; font-weight:100; font-size:40px; color:#FFF; line-height:40px; padding:30px 0 30px 0; margin: 0;} h6{ font-family:'Microsoft JhengHei'; font-weight:700; font-size:20px; line-height: 25px; color:#FFF; padding:0px 0 10px 0; margin: 0px 0px 0px 0px;} .upper { text-transform:uppercase;} .color1{ color:#fff;} .line1 { height:1px; background:#b9b2a2; margin:5px 0;} .radius1{border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;} .pad_bot1{padding-bottom: 20px;} /* === tippy ===*/ *{outline: none;} .tippy-tooltip.honeybee-theme { /* Your styling here. Example: */ background-color: yellow; border: 2px solid orange; } .tippy-tooltip.honeybee-theme [x-arrow] { /* Your arrow styling here. Uses transform: rotate() so no need for CSS triangle shenanigans. */ background-color: yellow; border: 2px solid; border-color: transparent transparent orange orange; /* same for any position */ } .tippy-tooltip.honeybee-theme .tippy-tooltip-content { /* Your styling here. Example: */ color: black; } .tippy-tooltip.honeybee-theme [x-circle] { /* Your styling here. Example: */ background-color: yellow; } /* === */ .box1{margin-top: 20px; background: #6491c0; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; color: #fff; margin-bottom: 20px;} .box1 a{color: #c5e1ff;} .box1 .button1{background: #ebbb37; color: #fff;} .box1 h2{color: #fff;} .box2{margin-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; /*border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;*/ color: #fff; margin-bottom: 20px;border-bottom:rgba(255,255,255,0.5) 1px solid;} .box2 a{color: #c5e1ff;} .box2 .button1{background: #ebbb37; color: #fff;} .box2 h2{color: #fff; border:none;} .box3{background:rgba(255,255,255,0.1); padding: 20px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; color: #fff; margin: 20px 0;} .box4{margin-top: 0px; background: #6491c0; padding: 20px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; color: #fff; margin-bottom: 20px;} .box4 a{color: #c5e1ff;} .box4 .button1{background: #ebbb37; color: #fff;} .box4 h2{color: #fff;} .button1{ display:inline-block; line-height:20px; text-decoration: none; margin-top:10px; margin-bottom:10px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#6491c0; padding:12px 20px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .button1:hover { color:#fff; background: #9dbd4b;} .button1 img{ width:2.2em; margin-right:5px; } .button2{ display:inline-block; line-height:27px; text-decoration: none; margin-top:10px; margin-bottom:10px; font-size:16px; font-family:'Microsoft JhengHei'; font-weight: 400; color:#fff; white-space:nowrap; letter-spacing:0px; background:#6491c0; padding:0px 15px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .button2:hover { color:#fff; background: #9dbd4b;} .button3{ display:inline-block; width:100%; line-height:30px; text-decoration: none; margin-top:5px; font-size:16px; font-family:'Microsoft JhengHei'; font-weight: 400; color:#fff; white-space:nowrap; letter-spacing:0px; background:#f08326; padding:5px 15px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .button3:hover { color:#fff; background: #ffcc33;} .button4{ display:inline-block; line-height:20px; text-decoration: none; margin-top:10px; margin-bottom:10px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#f08326; padding:12px 20px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .button4:hover { color:#fff; background: #ffcc33;} .button5{ display:inline-block; line-height:20px; text-decoration: none; margin:10px 3px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#6491c0; padding:5px 16px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .button5:hover { color:#fff; background: #9dbd4b;} .button5 img{ width:2.2em; margin-right:5px; } .btntoR{position:absolute; position:fixed; bottom: 5px; right:10px;} .studynum{background:#E45035; color:#FFF; padding:3px 8px; font-size:1em; font-family: 'Roboto'; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} .studynum2{background:#799d1b; color:#FFF; padding:3px 8px; font-size:1em; font-family: 'Roboto'; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} #topage{padding:10px 0; text-align:right;} #topage .button{ display:inline-block; line-height:15px; text-decoration: none; margin:1px; font-size:1.2em; font-family: 'Fredoka One'; font-weight:normal; color:rgba(255, 255, 255, 1); white-space:nowrap; letter-spacing:0px; background:#1fa1a1; padding:8px 12px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } #topage span{font-family: "Microsoft JhengHei"; color:#fff; } #topage .button:hover { color:#fff; background: #2acccc;} #topage .active { color:#fff; background: #9dbd4b;} #topage .button2{ display:inline-block; line-height:15px; text-decoration: none; margin:1px; font-size:16px; font-family: 'Microsoft JhengHei'; font-weight:bold; color:rgba(255, 255, 255, 1); white-space:nowrap; letter-spacing:0px; background:#9dbd4b; padding:8px 12px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; margin:0 5px; } #topage .button2:hover { color:#fff; background: #ffcc33;} #printdiv{text-align:center;} #printdiv .phoneshow{ display:none; } #printdiv .pcshow{ display:block;} #guidemenu .pcshow{} #guidemenu .phoneshow{ display:none;} /*======== Pagemenu ========*/ #pagemenu{position:absolute; right:20px; z-index:3;} #pagemenu a{ display:inline-block; line-height:25px; text-decoration: none; margin:5px 3px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#6491c0; padding:5px 15px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } #pagemenu a:hover { color:#fff; background: #9dbd4b;} #pagemenu .active{background:#4bbbba;} #pagemenu img{ width:2em; margin-right:5px; } #pagemenu .pcshow span{ } #pagemenu .pcshow img{} #tabdiv .tabs span{ } #tabdiv .tabs img{} /*======== DISmenu ========*/ #dismenu{} #dismenu a{ display:inline-block; line-height:25px; text-decoration: none; margin:5px 1px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#0d4040; padding:5px 10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; width:125px; float:left; } #dismenu a:hover { color:#fff; background: #9dbd4b;} #dismenu .active{background:#57884e;} #dismenu img{ width:1.5em; margin-right:5px; } #dismenu .phoneshow{ display:none; } #dismenu .pcshow{ display:block;} #dismenu .padshow{ display:none;} /*======== Biomenu ========*/ #biomenu{} #biomenu a{ display:inline-block; line-height:25px; text-decoration: none; margin:5px 1px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#0d4040; padding:5px 10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; width:200px; } #biomenu a:hover { color:#fff; background: #9dbd4b;} #biomenu .active{background:#57884e;} #biomenu img{ width:1.5em; margin-right:5px; } #biomenu .phoneshow{ display:none; } #biomenu .pcshow{ display:block;} #biomenu .padshow{ display:none;} /*======== Aboutmenu ========*/ #aboutmenu{ margin-bottom:20px;} #aboutmenu a{ display:inline-block; line-height:25px; text-decoration: none; margin:5px 1px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#1fa1a1; padding:5px 20px 5px 15px; border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; width:35%; } #aboutmenu a:hover { color:#fff; background: #9dbd4b;} #aboutmenu .active{background:#57884e;} #aboutmenu img{ width:2.2em; margin-right:5px; } /*======== Guidemenu ========*/ #guidemenu{ /*margin-bottom:20px;*/ position:absolute; width:20%; text-align:left; margin-top:-60px; z-index:99999;} #guidemenu a{ display:inline-block; line-height:25px; text-decoration: none; margin:5px 1px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#1fa1a1; padding:5px 12px 5px 7px; border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; width:200px; } #guidemenu a:hover { color:#fff; background: #9dbd4b;} #guidemenu .active{background:#57884e;} #guidemenu img{ width:2.2em; margin-right:5px; } /*======== Linkmenu ========*/ #linkmenu{ width:100%; } #linkmenu a{display:block; text-decoration: none; margin:5px 1px; font-size:1em; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; background:#0d4040; padding:8px 10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; min-width:93%; } #linkmenu a:hover { color:#fff; background: #9dbd4b;} #linkmenu .active{background:#57884e;} #linkmenu img{ width:1.5em; margin-right:5px; } /*======== Foodmenu ========*/ #foodmenu{} #foodmenu a{ display:inline-block; line-height:25px; text-decoration: none; margin:5px 1px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#e35c6f; padding:5px 10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; width:180px; float:left; } #foodmenu a:hover { color:#fff; background: #ff9fad;} #foodmenu .active{background:#57884e;} #foodmenu img{ width:1.5em; margin-right:5px; } #foodmenu .phoneshow{ display:none; } #foodmenu .pcshow{ display:block;} #foodmenu .padshow{ display:none;} #food2menu{} #food2menu a{ display:inline-block; line-height:25px; text-decoration: none; margin:5px 1px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#747474; padding:5px 10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } #food2menu a:hover { color:#fff; background: #acacac;} #food2menu .active{background:#57884e;} #food2menu img{ width:1.5em; margin-right:5px; } #food2menu .phoneshow{ display:none; } #food2menu .pcshow{ display:block;} #food2menu .padshow{ display:none;} /*======== Tripmenu ========*/ #tripmenu{} #tripmenu a{ display:inline-block; line-height:25px; text-decoration: none; margin:5px 5px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#e35c6f; padding:5px 10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; float:left; } #tripmenu a:hover { color:#fff; background: #ff9fad;} #tripmenu .active{background:#57884e;} #tripmenu img{ width:1.5em; margin-right:5px; } /** * Component: Dropdown * -------------------------------------------------- */ .c-dropdown { position: relative; display: inline-block; text-align: left; margin-top:0px; } .c-dropdown__list { margin: 0px 0 0 0; padding: 6px 0; list-style: none; position: absolute; top: 125%; left: 0; width: 100%; opacity: 0; visibility: hidden; /*border-radius: 3px;*/ background: #6491c0; -webkit-transition: opacity .25s linear, top .25s linear; transition: opacity .25s linear, top .25s linear; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } .c-dropdown.is-open .c-dropdown__list { opacity: 1; visibility: visible; top: 100%; } .c-dropdown__item { padding: 6px 12px; font-size: 14px; line-height: 20px; cursor: pointer; color: #FFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: background-color .25s linear; transition: background-color .25s linear; border-bottom:rgba(255, 255, 255, 0.3) 1px solid; } .c-dropdown__item:hover { background-color: #9dbd4b; } /** * Component: Button * -------------------------------------------------- */ .c-button { -webkit-appearance: none; margin: 0; border: 0; overflow: visible; font: inherit; text-transform: none; display: inline-block; vertical-align: middle; text-decoration: none; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .c-button:hover, .c-button:focus { outline: none; text-decoration: none; } .c-button:not(:disabled) { cursor: pointer; } /** * Component: Button * Modifier: Dropdown * -------------------------------------------------- */ .c-button--dropdown { /*padding: 6px 34px 6px 12px; background-color: #1fa1a1; color: #FFF; font-size: 14px; line-height: 20px; min-height: 32px; border-radius: 3px; -webkit-transition: background-color .2s linear; transition: background-color .2s linear;*/ margin-right:20px; } .c-button--dropdown:hover { /*background-color: #2acccc;*/ } .c-button--dropdown:after { content: ""; position: absolute; top: 22px; right: 15px; width: 0; height: 0; border: 8px solid transparent; border-top-color: #E6E9ED; } /*======== Pagemenu END ========*/ /*======== 列印 =======*/ /*#inline_content { width:635px; height:900px; background:#fff; color:#000;} #inline_content .span12 { width:100%; margin:0;} #inline_content .row{margin-top:20px; margin:0; max-width:635px;} #inline_content .span3 { max-width:140px; margin:0 8px;} #inline_content .span3 .thumb6 img { max-width:10em; max-height:10em;} #inline_content .span12 h2 { color:#115555; font-family:'Microsoft YaHei', sans-serif; font-size:36px; font-weight:bold;} #inline_content h2 span { color:rgba(0, 0, 0, 0.5); font-size:60%;} #inline_content .caption p{ color:#000; font-size:12px;} #inline_content .divph { max-width:100%; min-height:2px; }*/ /*======== 列印END =======*/ /*=====首頁訊息日期=====*/ .date1{padding-bottom: 20px;} .date1 .txt1{float: left; width: 50px; height: 30px; background: #9dbd4b;border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; margin-right: 20px; color: #fff; text-transform: uppercase; text-align: center; font-family: 'Roboto'; font-size: 1em; line-height: 15px; padding: 10px 0; font-weight:bold;} .date1 .txt1 span{font-size: 0.5em; line-height: 18px; display: inline-block;} .date1 .txt1.c2{background: #ebbb37;} .date1 .txt1.c3{background: #6e9ccc;} .date1 .txt1.c4{background: #b13647;} .date1 .txt2{display: table; font-family: "Microsoft JhengHei"; margin-bottom:10px;} .date1 .txt2 .listimg{float:left; background:#FFF; width:100px; height:100px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:#FFF 2px solid; margin-right:10px;} /*=====時間表標題=====*/ .date2{padding-bottom: 20px;} .date2 .txt1{float: left; width: 60px; height: 60px; background: #9dbd4b;border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; margin-right: 20px; color: #fff; text-transform: uppercase; text-align: center; font-family: "Microsoft JhengHei"; font-size: 1.5em; font-weight:bold; line-height: 60px;} .date2 .txt1.c2{background: #ebbb37;} .date2 .txt1.c3{background: #6e9ccc;} .date2 .txt1.c4{background: #b13647;} .date2 .txt2{display: table-cell; vertical-align:middle; font-family: Arial, 'Microsoft JhengHei', Helvetica, sans-serif; font-size: 16px; line-height:1.5em; font-weight:bold; height:60px;} .date2txt3{font-family: Arial, 'Microsoft JhengHei', Helvetica, sans-serif; color:#FFEFA0; font-size: 14px; line-height:16px; font-weight:bold;} .date2title img { padding:8px 2px 6px 0;} .date2title h2 { line-height:1em;} .date2title span{ font-size:50%; opacity:0.6; filter:alpha(opacity=46); font-weight:normal; float:left; margin:-54px 0 0 54px;} /*=====票價標題=====*/ .ticket {} .ticket img{ width:1.8em;} .ticket h2{ font-size:1.5em; font-weight:normal; padding-bottom:3px;} .date3{padding-bottom: 10px;} .date3 .txt1{float: left; width: 20px; height: 20px; background: #9dbd4b;border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; margin-right: 10px; color: #fff; text-transform: uppercase; text-align: center; font-family: Arial, 'Microsoft JhengHei', Helvetica, sans-serif; font-size: 1em; font-weight:bold; line-height: 20px;} .date3 .txt1.c2{background: #ebbb37;} .date3 .txt1.c3{background: #6e9ccc;} .date3 .txt1.c4{background: #b13647;} .date3 .txt2{display: table-cell; vertical-align:middle; font-family: Arial, 'Microsoft JhengHei', Helvetica, sans-serif; font-size: 14px; line-height:1.2em; font-weight:bold; height:20px;} .box2 .date3 .txt1{ margin-left:0px;} .box2 .ticket img{ width:auto;} .box2 h2{ font-size:2.4em; font-weight:normal; padding:3px 0; margin:1px 0; line-height:2em;} .ticketnum{ font-size:1.55em; font-weight:800; color:#ff9fad; line-height:1.5em; /*word-break: keep-all;*/} .ticketlove{font-size:65%; font-weight:800; color:#ff9fad; line-height:1.5em; font-family: 'Microsoft JhengHei'; opacity:1; filter:alpha(opacity=100); margin-left:3px;} .ticketnum div{ /*margin-right:30px;*/ min-width:30%; float:left; padding-bottom:5px;} .ticket_d1{background:url(../../images/ico_18_d.png) no-repeat bottom right; background-size:50% auto; background-position:5% 0 0 10%;} .ticket_d2{background:url(../../images/ico_22_d.png) no-repeat top 20% right; background-size:50% auto;} .ticket_d3{/*background:url(../../images/ico_20_d.png) no-repeat bottom right;*/ background-size:50% auto; background-position:5% 0 0 10%;} .ticket_d4{/*background:url(../../images/ico_21_d.png) no-repeat bottom right;*/ background-size:50% auto; background-position:5% 0 0 10%;} .newslist{ background:rgba(255,255,255,0); border:rgba(255,255,255,0) 2px solid; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:8px; margin-bottom:20px; text-decoration:none;} .newslist:hover{background:rgba(255,255,255,0.1); border:rgba(255,255,255,0.5) 2px solid; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:8px; margin-bottom:20px;} .newslist a, .newslist a:hover{ color:#FFF; text-decoration:none;} .newslist h3 { font-size:1.5em; font-weight:bold;} .divph{width:100%; height:2px; background:#1fa1a1; margin-bottom:12px;} .divph2{width:100%; height:.1em; background:#bcbcbc; margin:12px;} .testimonial1{margin-bottom: 0px;} .testimonial1 .txt1{background: url(../../images/testimonial1.png) 15px 15px no-repeat #ddebf6; padding:20px 20px 20px 50px; line-height: 20px; font-style: italic; font-size: 14px; color: #54718f; border-radius:20px 20px 20px 0; -moz-border-radius:20px 20px 20px 0; -webkit-border-radius:20px 20px 20px 0;} .testimonial1 .txt2{padding-left: 10px; padding-top: 35px; color: #54718f; font-size: 14px;background: url(../../images/testimonial2.png) 0px 0px no-repeat;} .testimonial1 .txt2 a{color: #9dbd4b;} .ul1{ padding:10px 0; margin: 0; list-style: none; margin:10px 0;} .ul1 span{ font-family:'Microsoft YaHei', sans-serif; font-size:2em; font-weight:bold; color:#b0d84a; } .ul1 > li {color: #54718f; padding: 0 0 0px 0; margin: 0;} .ul1 > li a{color:#FFF; font-size: 16px; text-decoration: none; line-height: 20px; padding:10px 0px 10px 25px; margin: 8px 0px 8px 0px; background: url(../../images/li_st1.png) 0px center no-repeat; display: block; background:#8bab3a; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;} .ul1 > li a:hover{color:#FFF; text-decoration: none; background:#9dbd4b; } .ul2{ padding:10px 0; margin: 0; list-style: none; margin:10px 0;} .ul2 span{ font-family:'Microsoft YaHei', sans-serif; font-size:2em; font-weight:bold; color:#4ddcdc; } .ul2 > li {color: #54718f; padding: 0 0 0px 0; margin: 0;} .ul2 > li a{color:#FFF; font-size: 16px; text-decoration: none; line-height: 20px; padding:10px 0px 10px 25px; margin: 8px 0px 8px 0px; background: url(../../images/li_st1.png) 0px center no-repeat; display: block; background:#1fa1a1; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;} .ul2 > li a:hover{color:#FFF; text-decoration: none; background:#3ec0c0; } .ul3{ padding: 0; margin: 0; list-style: none; padding-bottom: 0px;} .ul3 > li {color: #FFF; padding: 0 0 0px 0; margin: 0;} .ul3 > li a{color:#FFF; font-size: 16px; text-decoration: none; line-height: 20px; padding:5px 0px 5px 25px; margin: 0px 0px 0px 0px; background: url(../../images/li_st1.png) 0px center no-repeat; display: block;} .ul3 > li a:hover{color:#9dbd4b; text-decoration: none; } .google_map{ position: relative; overflow: hidden; margin: 0 0 20px 0; padding: 0px; background: none; border: none;line-height: 1px;} .google_map iframe{position: relative; width: 100%; height: 400px; border: none; background: #fff;border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;} .form_select{font-family: 'Microsoft JhengHei'; font-size:16px; width:90%; height:35px;} /*fontcolor*/ .fontcolor_g{ color:#92e45c; } .fontcolor_b{ color:#9fe5ff; } .fontcolor_r{ color:#ff9fad; } .fontcolor_y{ color:#e7ee76;} .fontico{width: 15px; height: 15px; background: #9dbd4b;border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; margin: 0 10px; color: #fff; text-transform: uppercase; text-align: center; font-family: Fredoka One, 'Microsoft JhengHei', Helvetica, sans-serif; font-size: 12px; font-weight:bold; padding:0px 3px;} /* ============================= thumbnail ====================== */ .img-rounded{position: relative; padding: 0px; background: none; border: none;box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none;} .img-rounded img{border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;} .img-rounded.w1 img{ width:210px; height:200px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; border:#FFF 3px solid; -webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);} #youtubeDiv{width:579px; height:325px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:#1fa1a1 2px solid; overflow:hidden;} #youtubeDiv iframe {width:579px; height:325px;} .thumbnail .caption{padding: 0; color: #FFF; font-family: "Microsoft JhengHei"; } /*首頁縮圖*/ .thumb1 {margin-bottom: 20px;} .thumb1.last {margin-bottom: 0px;} .thumb1 .thumbnail{padding: 0; border: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none;} .thumb1 figure{margin: 0; float: none; margin:0px 0px 20px 0px;} .thumb1 figure img{width: auto;} .thumb1 .caption{} .thumb2 {margin-bottom: 20px;} .thumb2.last {margin-bottom: 0px;} .thumb2 .thumbnail{padding: 0; border: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none;} .thumb2 figure{margin: 0; float: left; margin:0px 20px 20px 0px;} .thumb2 figure img{width: auto;} .thumb2 .caption{} /*訊息縮圖*/ .newsdiv{background:rgba(31,161,161,0.3); border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; padding:10px 20px; margin-bottom:20px;} /*.newsdiv .thumb3 .thumbnail img { width:5em;}*/ .thumb3 {border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; background:#0c4040; padding:5px; width: 30%; float:left; margin:0 3px 20px 3px;} .thumb3 .last {margin-bottom: 0px;} .thumb3 .thumbnail{padding: 0; border: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none;} .thumb3 .thumbnail a{display: block; text-decoration: none;} .thumb3 .thumbnail a figure{margin: 0; float: none; margin:0px 0px 0px 0px;border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; background: #000; position: relative; } .thumb3 .thumbnail a figure img{width: 100%; border-radius:8%; -moz-border-radius:8%; -webkit-border-radius:8%; } .thumb3 .thumbnail a:hover figure img{opacity: 0.5; filter: alpha(opacity=50);} .thumb3 .thumbnail a figure em{display: block;width: 100%; height: 100%; background: url(../../images/zoom1.png) center center no-repeat; position: absolute; left: 0; top: 0; z-index: 2;opacity: 0; filter: alpha(opacity=0);} .thumb3 .thumbnail a:hover figure em{opacity: 1; filter: alpha(opacity=100);} .thumb3 .thumbnail a .caption{} .thumb3 .thumbnail a .caption .txt1{ font-weight: 700; font-size: 16px; line-height: 20px; padding-bottom: 5px; color: #FFF;} .thumb3 .thumbnail a .caption .txt2{ font-weight: 700; font-size: 13px; line-height: 18px; padding-bottom: 5px; color: #54718f;} .thumb3 .thumbnail a .caption .txt3{ padding-bottom: 10px; color: #54718f;} .thumb3 .thumbnail a .caption .txt4{ display: inline-block; line-height: 27px; font-size: 14px; color: #fff; background: #6491c0; padding: 0 15px; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;} .thumb3 .thumbnail a:hover .caption .txt4{background: #c9512c;} .thumb4 {margin-bottom: 20px;} .thumb4.last {margin-bottom: 0px;} .thumb4 .thumbnail{padding: 0; border: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none;} .thumb4 figure{margin: 0; float: none; margin:0px 0px 20px 0px;} .thumb4 figure img{width: auto;} .thumb4 .caption{} .thumb4 .caption .txt1{ font-weight: 700; font-size: 16px; line-height: 20px; padding-bottom: 5px; color: #c9512c;} .thumb5 {margin-bottom: 20px;} .thumb5.last {margin-bottom: 0px;} .thumb5 .thumbnail{padding: 0; border: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none;} .thumb5 figure{margin: 0; float: left; margin:0px 20px 20px 0px;} .thumb5 figure img{width: auto;} .thumb5 .caption{} /*學習單縮圖*/ .thumb6 {margin-bottom: 20px;} .thumb6.last {margin-bottom: 0px;} .thumb6 .thumbnail{padding: 0; border: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none;} .thumb6 figure{margin: 0; float: none; margin:0px 0px 20px 0px;} .thumb6 figure img{width: 100%;} .thumb6 .caption{} .titlecolor_g{ color:#92e45c; } .titlecolor_b{ color:#5cbfe4; } .titlecolor_r{ color:#e45c7f; } .bcolor_r{ background:#e35c6f; } .bcolor_g{ background:#8abe40;} .bcolor_b{ background:#248ab5;} .bcolor_y{ background:#ecb100;} .bcolor_o{ background:#f27a2b;} .bcolor_r a{ background:#fe8fa0; } .bcolor_g a{ background:#b3dd77;} .bcolor_b a{ background:#74bad7;} .bcolor_y a{ background:#f2d57e;} .bcolor_o a{ background:#f59a5e;} /*分頁*/ .abgne_tab { clear: left; width: 100%; margin: 10px auto; } ul.tabs { width: 100%; height: 32px; /*border-bottom: 1px solid #999; border-left: 1px solid #999;*/ } ul.tabs li { float: left; height: 31px; line-height: 31px; overflow: hidden; position: relative; /*margin-bottom: -1px; border: 1px solid #999;*/ border-left: none; background: #1fa1a1; font-size:16px; font-weight:bold; margin:4px 2px -1px 2px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } ul.tabs li a { display: block; padding: 0 20px; color: #FFF; /*border: 1px solid #fff;*/ text-decoration: none; } ul.tabs li a:hover { background: #2acccc; } ul.tabs li.active { background: #8abe40; /*border-bottom: 1px solid #fff;*/ } ul.tabs li.active a:hover { background: #a9da62; } div.tab_container { clear: left; width: 100%; /*border: 1px solid #999;*/ border-top: none; background: none; } div.tab_container .tab_content { padding: 20px; } div.tab_container .tab_content h2 { margin: 0 0 20px; } /*影音專區*/ #mediabox{width:100%; height:250px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:#1fa1a1 2px solid; overflow:hidden; margin-bottom:10px;} #mediabox iframe {width:100%; height:250px;} .thumb7 {margin-bottom: 20px;} .thumb7.last {margin-bottom: 0px;} .thumb7 .thumbnail{padding: 0; border: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none;} .thumb7 .thumbnail a{display: block; text-decoration: none;} .thumb7 .thumbnail a figure{margin: 0; float: none; margin:0px 0px 20px 0px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; position: relative;} .thumb7 .thumbnail a .caption{} .thumb7 .thumbnail a .caption .txt1{ font-weight: 700; font-size: 16px; line-height: 20px; padding-bottom: 5px; color: #58ffff;} .thumb7 .thumbnail a .caption .txt2{ font-weight: 700; font-size: 13px; line-height: 18px; padding-bottom: 5px; color: #e7ee76; margin:5px 0;} .thumb7 .thumbnail a .caption .txt3{ padding-bottom: 10px; color: #FFF; line-height:18px;} .thumb7 .thumbnail a .caption .txt4{ display: inline-block; line-height: 27px; font-size: 14px; color: #fff; background: #6491c0; padding: 0 15px; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;} .thumb7 .thumbnail a:hover .caption .txt4{background: #c9512c;} /*相簿*/ .thumb8 {margin-bottom: 20px; } .thumb8.last {margin-bottom: 0px;} .thumb8 .thumbnail{padding: 0; border: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none;} .thumb8 .thumbnail a{display: block; text-decoration: none;} .thumb8 .thumbnail a figure{margin: 0; float: none; margin:0px 0px 20px 0px;border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; position: relative;} .thumb8 .thumbnail a figure img{width: 100%; border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; border:#1fa1a1 3px solid;} .thumb8 .thumbnail a:hover figure img{opacity: 0.5; filter: alpha(opacity=50);} .thumb8 .thumbnail a figure em{display: block;width: 100%; height: 100%; background: url(../../images/zoom1.png) center center no-repeat; position: absolute; left: 0; top: 0; z-index: 2;opacity: 0; filter: alpha(opacity=0);} .thumb8 .thumbnail a:hover figure em{opacity: 1; filter: alpha(opacity=100);} .thumb8 .thumbnail a .caption{} .thumb8 .thumbnail a .caption .txt1{ font-weight: 700; font-size: 16px; line-height: 20px; padding-bottom: 5px; color: #58ffff;} .thumb8 .thumbnail a .caption .txt2{ font-weight: 700; font-size: 13px; line-height: 18px; padding-bottom: 5px; color: #e7ee76; margin:5px 0;} .thumb8 .thumbnail a .caption .txt3{ padding-bottom: 10px; color: #FFF;} .thumb8 .thumbnail a .caption .txt4{ display: inline-block; line-height: 27px; font-size: 14px; color: #fff; background: #6491c0; padding: 0 15px; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px;} .thumb8 .thumbnail a:hover .caption .txt4{background: #c9512c;} /*明信片*/ .postbody{padding:0; background:url(../../images/bg2.jpg) no-repeat top center #115556; background-size:140% auto; overflow-x:hidden; font-family: 'Microsoft JhengHei'; font-size:14px; line-height:1.3em;} #postpage{ width:95%; padding:5px; background:#FFF; margin:0 auto; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); margin-top:5px; } .postL{/*border-left:#BCBCBC 1px solid; padding-left:30px;*/} .postpagePH{border:#BCBCBC 1px solid; padding:0px; color:#333;} .postimg img{width:100%; height:auto;} .postread{width:100%; padding:5px 0; margin:5px 0; text-align:right;} .poststamp{width:93%; height:180px; border:#BCBCBC 1px solid; padding:10px; margin:5px 0;} .postlogo{width:50%; height:70px;} .postlogo img{width:100%; margin-bottom:5px;} .postbox{width:10px; height:10px; float:left; margin:2px; border:#BCBCBC 1px solid;} .postdear{width:40%; padding:30px 10px 10px 10px; font-size:1.5em; font-style: italic; font-family: 'Roboto'; color:#BCBCBC;} .postclick50{width:30%; border-bottom:#BCBCBC 1px solid; padding:7px; cursor:pointer; float:left; margin-right:25px;} .postclick90{width:90%; border-bottom:#BCBCBC 1px solid; padding:7px; cursor:pointer; float:left;} .postclick50 a, .postclick90 a { color:#333; text-decoration:none;} .postclickSP{width:90%; border-bottom:#BCBCBC 1px solid; padding:10px 7px ; float:left;} .postsubmit{/*width:95%; margin:0 auto;*/ position:fixed; bottom: 5px; right:10px; z-index:99999;} .postsubmit .button5{-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width:1.9em; height:1.5em; padding:1em 0.7em 0.7em 0.7em;} .postwww{color:#7F7F7F; padding:5px 5px 10px; font-size:11px; line-height:14px; float:left;} #galleryico .phoneshow{ display:none; } #galleryico .pcshow{ display:block;} .div_table-cell{ width:50px; height:50px; margin:3px; border:#BCBCBC 1px solid; display:table-cell; text-align:center; vertical-align:middle; font-size:10px; line-height:15px; color:#BCBCBC; } /* IE6 hack */ .div_table-cell span{ height:100%; display:inline-block; } .div_table-cell *{ vertical-align:middle;} /*========== 明信片END ===================*/ #galleryico .button{ display:inline-block; line-height:20px; text-decoration: none; margin:10px 3px; font-size:16px; font-family: "Microsoft JhengHei"; font-weight: 700; color:#afc9e5; white-space:nowrap; letter-spacing:0px; background:#6491c0; padding:5px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;margin-right:5px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } #galleryico .button:hover { color:#fff; background: #9dbd4b;} #galleryico .button img{ width:2em; } .thumb-isotope {} .thumb-isotope .thumbnail{padding: 0px; border: none; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; box-shadow: none;-moz-box-shadow: none; -webkit-box-shadow: none; } .thumb-isotope .thumbnail a{position: relative; display: block; text-decoration: none; padding: 0px;background: none; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .thumb-isotope .thumbnail a:hover{} .thumb-isotope .thumbnail a figure{position: relative; margin: 0; float: none; margin:0px 0px 20px 0px; padding: 0; background: #ebbb37; border: none; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .thumb-isotope .thumbnail a img{width: 100%;border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .thumb-isotope .thumbnail a:hover img{opacity: 0.5; filter: alpha(opacity=50);} .thumb-isotope .thumbnail a em{position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; background: url(../../images/zoom1.png) center center no-repeat; opacity: 0; filter: alpha(opacity=0); transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } .thumb-isotope .thumbnail a:hover em{opacity: 1; filter: alpha(opacity=100);} .thumb-isotope .thumbnail a .caption{text-align: center;} .thumb-isotope .thumbnail a .caption .txt1{font-size: 16px; line-height: 20px; padding-bottom: 10px; color: #6491c0; font-weight: 700;} /*================= Contacts =========================*/ #note{ } .notification_error{ color:#fff; padding-bottom:10px; } .notification_ok{ text-align: left; padding-bottom:10px; } #ajax-contact-form input[type="checkbox"] {display:none;} #ajax-contact-form input[type="checkbox"] + label {color:#f2f2f2;} #ajax-contact-form input[type="checkbox"] + label span { display:inline-block; width:19px; height:19px; margin:-2px 10px 0 0; vertical-align:middle; background:url(../../images/check_radio_sheet.png) left top no-repeat; cursor:pointer; } #ajax-contact-form input[type="checkbox"]:checked + label span {background:url(../../images/check_radio_sheet.png) -19px top no-repeat;} #ajax-contact-form input[type="radio"] { display:none;} #ajax-contact-form input[type="radio"] + label { color:#f2f2f2; font-size:1.1em; font-family: "Microsoft JhengHei"; float:left; margin-right:8px; } #ajax-contact-form input[type="radio"] + label span { display:inline-block; width:19px; height:19px; margin:-2px 10px 0 0; vertical-align:middle; background:url(../../images/check_radio_sheet.png) -38px top no-repeat; cursor:pointer; } #ajax-contact-form input[type="radio"]:checked + label span {background:url(../../images/check_radio_sheet.png) -57px top no-repeat;} #ajax-contact-form .inferior{border:rgba(255,255,255,0.2) 1px solid; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:8px; background:rgba(255,255,255,0.1); color:#FFF; margin-top:3px;} #ajax-contact-form .inferiorselect{height:2.8em; font-family: "Microsoft JhengHei"; font-size:1.1em; color:#FFF; background:none; width:99%;} #ajax-contact-form .inferiorselect option{ background:#286566;} #ajax-contact-form .control-group{margin-bottom: 10px;} #ajax-contact-form .control-label{display: none;} #ajax-contact-form .controls{margin-left: 0;} #ajax-contact-form .controls span{ line-height:2em; margin-left:5px; color:#e7ee76;} #ajax-contact-form input, #ajax-contact-form textarea{ background: #fff; border: 1px solid #fff; font-family: "Microsoft JhengHei"; color: #333; font-size:1.1em; padding-top: 10px; padding-bottom: 10px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; /*-moz-box-shadow: inset 0px 3px 20px 3px #fff; -webkit-box-shadow: inset 0px 3px 20px 3px #fff; box-shadow: inset 0px 3px 20px 3px #fff; */ width: 97%; display: block; /*-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; */ height: auto; } #ajax-contact-form input:focus, #ajax-contact-form textarea:focus{border-color:#fff; } #ajax-contact-form textarea{height: 124px;} #ajax-contact-form .control-group.capthca{margin-bottom: 0px;} #ajax-contact-form .capthca input{width: 126px; float: left; margin-right: 30px;margin-bottom: 10px;} #ajax-contact-form img{float:left; width:170px; height:42px;margin-bottom: 10px;} #ajax-contact-form .submit{border: 0; margin: 0; display: inline-block;height: 44px; line-height:44px; text-decoration: none;font-size:15px; font-family:'Roboto'; font-weight: 700; color:#fff; white-space:nowrap; letter-spacing:0px; background:#ebbb37; padding:0px 30px; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; } #ajax-contact-form .submit:hover{ color:#fff; background: #9dbd4b;} /*================= 404 =========================*/ .page-404{text-align: center;} .page-404 .txt1{font-family:'Fredoka One'; font-weight:400; font-size:220px; color:#6491c0; line-height:220px; } .page-404 .txt2{font-family:'Roboto'; font-weight:400; font-size:70px; color:#6491c0; line-height:70px; } /*----- media queries ------*/ /* Large desktop */ @media (min-width: 2000px) { body{background-size:100% auto;} } /*PC1920X1080*/ @media (min-width: 1367px) and (max-width: 1999px) { #inner{max-width: 1230px;} .navbar_ .nav > li{width: 170px; margin-left: 30px;} #plane1{margin-left: -800px;} } /*PC1366X768*/ @media (min-width: 1360px) and (max-width: 1366px) { #inner{max-width:1100px;} #content .container{ width:100%;} .container h2 { width:94%;} .span6 { width:46%;} .span7 { width:50%;} .span8 { width:55%;} .navbar_ .nav{ max-width:89%; margin-left:25px;} .navbar_ .nav > li{width: 140px; margin-left: 10px;} #plane1{margin-left: -800px;} .floatShadow2{ padding:10px; position:absolute; top:0; left:50%; width:500px; text-align:right;} #youtubeDiv{width:450px; height:253px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:#1fa1a1 2px solid; overflow:hidden;} #youtubeDiv iframe {width:450px; height:253px;} .padnewsW{width:45%; padding:0;} .bot2{padding-bottom: 12px; border-bottom: 3px solid #bdd5e6; margin-bottom: 25px; width:92%;} .copyright{color: #FFF; padding-left:30px;} .telstyle{width:50%; float:left; padding-left:30px;} #slider3_wrapper{ margin-left:-30px;} #slider3_wrapper h1{ margin-left:30px;} #slider3{position: relative;} #guidemenu h1{ font-size:24px;} .btnnumW {width:80%; margin:0 auto; padding-top:10px;} /*.padmapW{width:44%; padding:0;}*/ #topagetxt .padmapW{width:90%; padding:0;} .divph{width:94%; height:2px; background:#1fa1a1; margin-bottom:12px;} .divph2{width:94%; height:.1em; background:#bcbcbc; margin:12px;} .timemain .span4 { width:28%;} .timemain .span4 .txt2 { width:250px;} .mapfull .padmapW{width:97%; padding:0;} .bsp { width:97%;} .bsp .span7 { width:80%;} .bsp .span5 { width:70%;} .map_d{ width:61%; margin-left:20%;} .map_show{width:64.9%; margin-top:0.05%; margin-left:31.4%;} svg{ position:absolute; z-index:9999; width:62.1%; margin:0% 0 0 21.5%;} path {opacity:0;} } @media (min-width: 1200px) and (max-width: 1359px) { #inner{max-width: 1230px;} .navbar_ .nav > li{width: 170px; margin-left: 30px;} #plane1{margin-left: -800px;} } /* Default landscape and desktop to large desktop */ @media (max-width: 1199px) { } /*PC1024x768*/ @media (min-width: 980px) and (max-width: 1199px) { body{ max-width:93%; margin:0 auto; } .floatShadow2{ padding:10px; position:absolute; top:0; left:50%; width:400px; text-align:right;} .navbar_ .nav{ max-width:100%; margin-left:5px;} .navbar_ .nav > li{ max-width: 117px; margin-left: 5px;} /*.navbar_ .nav > li:last-child{width: 80px;}*/ #youtubeDiv{width:420px; height:236px;} #youtubeDiv iframe {width:420px; height:236px;} .padnewsW{width:47%; padding:0;} .padnewsW .caption{width:92%;} .btnnumW {width:60%; margin:0 auto; padding-top:10px;} .row .span7 { width:47%;} .row .span5 { width:45%;} .row .span4 { width:47%;} .row .span8 { width:45%;} .row .span6 { width:47%;} .tickettaiwan .span2{ width:40%;} .timemain .span4 { width:30%;} .timemain .btnnumW { width:100%;} .formmain .span6 { width:42%;} .food4main .span2 {width:42%;} /*.carousel-box .span12 .carousel {border:#000000 1px solid; width:85%; }*/ .path{ font-size:0.9em; width:95%; padding:5px 8px; margin:0 auto; margin-top:20px;} .navbar_ .nav > li{width: 140px; height: 40px; margin-left: 10px;} .navbar_ .nav > li:first-child{margin-left: 20px;} #guidemenu h1 { font-size:23px; line-height:20px; } footer { width:80%; margin-left:20px;} .telstyle , .copyright {width:90%; } .newslist{ width:95%;} #topagetxt { width:95%;} .map_d{ width:67.5%; margin-left:18%;} .map_show{width:67.8%; margin-top:-0.1%; margin-left:25.4%;} svg{ width:64.2%; margin:1.3% 0 0 18.6%;} path {opacity:0;} } /* Portrait tablet to landscape and desktop */ @media (max-width: 979px) { } /*PAD*/ @media (min-width: 768px) and (max-width: 979px) { #inner{max-width: 784px; } .main0{background:url(../../images/bg0.jpg) no-repeat left top #115555; background-position:75% top; } .main1{background:url(../../images/bg1.jpg) no-repeat left top #115555; background-position:76% top; background-size:120% auto;} .navbar_ .nav{ max-width:100%; margin-left:0px;} .navbar_ .nav > li{width: 100px; margin-left: 3px;} .nav-collapse_.collapse{height: auto!important; overflow: visible!important;} .navbar_ .btn-navbar{display: none;} #menu_bot > li > a{font-size: 13px;} #plane1{margin-left: -550px;} #printdiv .phoneshow{ display:block; } #printdiv .pcshow{ display:none; } #galleryico .phoneshow{ display:none; } #galleryico .pcshow{ display:block;} #biomenu .phoneshow{ display:none; } #biomenu .pcshow{ display:none;} #biomenu .padshow{ display:block;} #dismenu .phoneshow{ display:none; } #dismenu .pcshow{ display:none;} #dismenu .padshow{ display:block;} #guidemenu .pcshow{ display:none; } #guidemenu .phoneshow{ display:block;} .floatShadow2{ display:none; } /* =========================== 輪播image =====================*/ .bjqs {max-width:540px ; max-height:417px;} .bjqs img{max-width:540px ; max-height:417px;} #banner-fade, #banner-slide{ max-width:542px; max-height:400px; margin-bottom: 60px; } p.bjqs-caption{ background: rgba(0,0,0,1); top:193px; left:-15px; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; max-height:20px; max-width:506px; } #banner-fade ul.bjqs-controls.v-centered li a{ margin-top:20px;} #banner-fade ul.bjqs-controls.v-centered li a:hover{ background:#fff; color:#000;} /*======== Pagemenu ========*/ #pagemenu{margin-top:30px;} #pagemenu a{ line-height:20px; margin:5px 1px; font-size:16px; padding:5px 8px; max-width:10em; white-space:normal;} #pagemenu img{ width:2em; margin-right:5px; display:none; } .c-button--dropdown:after { top: 18px; right: 10px;} #camera_wrap .camera_caption .txt1{font-size: 30px; line-height: 40px;} #youtubeDiv{width:700px; height:393px; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;} #youtubeDiv iframe {width:700px; height:393px;} #mediabox{width:100%; height:150px; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;} #mediabox iframe {width:100%; height:150px;} .padnewsW{width:97%; padding:0;} .padmapW{width:97%; padding:0;} .btnnumW {width:60%; margin:0 auto; } .date2 .btnnumW {width:100%; margin:!important; } h2{ font-size:1.8em; line-height:30px; padding:20px 0 15px 0; border-bottom: 3px solid #bdd5e6; margin-bottom: 15px;} h2 span{font-size:0.7em; margin-left:5px;} .banner .banner_inner a .title{ padding:10px; font-size: 1.3em; line-height: 20px; } .path{ font-size:0.9em; width:95%; padding:5px 8px; margin:0 auto; margin-top:35px;} .img-rounded.w1 img{ max-width:150px; max-height:150px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;} .date1 .txt1 span{font-size: 0.8em;} .thumb3 {width: 28.5%; margin:0 2px 20px 2px;} #galleryico .button{ margin-right:1px; width:18%; padding:3px 2px; text-align:center;} #galleryico .button img{ width:1.5em; } .bot1{padding-top: 30px; padding-bottom: 30px; border-radius:30px 30px 0 0; -moz-border-radius:30px 30px 0 0; -webkit-border-radius:30px 30px 0 0; margin-top:20px;} .bot2{padding-bottom: 25px;} .ticketnum div{ min-width:25%;} .tickettaiwan img{ width:2em;} .tickettaiwan .span2 ,.tickettaiwan .span3 { width:25%;} .map_d{ width:98%;} .map_show{width:92%; margin-top:-0.1%; margin-left:1%;} svg{ width:87.2%; margin:1.5% 0 0 0.7%;} path {opacity:0;} } /* Landscape phone to portrait tablet */ /*Phone+*/ @media (max-width: 767px) { body{padding-left: 0; padding-right: 0; /*background-position: 76% top;*/} .main0{background:url(../../images/bg0.jpg) no-repeat left top #115555; background-position:80% top; } .main1{background:url(../../images/bg1.jpg) no-repeat left top #115555; background-position:76% top; background-size:120% auto;} .container{width: 440px;} #inner{max-width: 500px; } #inner2{ margin-top:0px;} header{float: none;} .top2{float: none; text-align: left;} .navbar_ .nav {/*border:rgba(0,0,0,0.7) 10px solid;*/border:#115555 10px solid; border-top:none;} .navbar_ .nav > li{width: auto; margin-left: 0px; display: block; float: none; height: auto; border-bottom:#1fa1a1 1px solid;} .navbar_ .nav > li > a{height: 70px; line-height: 70px; margin: 0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;} .navbar_ .nav > li > a:hover, .navbar_ .nav > li > a:focus, .navbar_ .nav > li.sfHover > a, .navbar_ .nav > li.sfHover > a:hover{margin-top: 0; height: 70px; line-height: 70px;} .navbar_ .nav > li.active > a, .navbar_ .nav > li.active > a:hover, .navbar_ .nav > li.active > a:focus, .navbar_ .nav > li.sfHover.active > a, .navbar_ .nav > li.sfHover.active > a:hover{margin-top: 0px;height: 70px; line-height: 70px; } .navbar_ .nav > li.active > a:after, .navbar_ .nav > li.active > a:hover:after, .navbar_ .nav > li.active > a:focus:after, .navbar_ .nav > li.sfHover.active > a:after, .navbar_ .nav > li.sfHover.active > a:hover:after{content:""; display: inline-block; width: 26px; height: 28px; background: url(../../images/butterfly.png) 0 0 no-repeat; position: absolute; left: 20px; top: 0px; z-index: 2; } .sub-menu ul{position: relative; left: 0; top: 0;border-radius:0!important; -moz-border-radius:0!important; -webkit-border-radius:0!important;} .slogan1 .block1 {padding-bottom: 20px;} .menu_bot{float: none;} #menu_bot > li{display: block; float: none; margin: 0; margin-bottom: 3px;} .search-form-wrapper{float: none; padding-top: 20px;} .navbar-form input{width: 370px;} #plane1{margin-left: -450px;} h1{ font-size:1.5em; line-height:20px; margin-bottom: 8px;} h2{ font-size:1.8em; line-height:30px; padding:20px 0 15px 0; border-bottom: 3px solid #bdd5e6; margin-bottom: 15px;} h2 span{font-size:0.7em; margin-left:5px;} /* =========================== 輪播image =====================*/ .bjqs {max-width:300px ; max-height:200px;} .bjqs img{max-width:300px ; max-height:250px;} #banner-fade, #banner-slide{ max-width:302px; max-height:200px; margin-bottom: 60px; } p.bjqs-caption{ background: rgba(0,0,0,1); top:140px; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; max-width:265px; max-height:20px; } #banner-fade ul.bjqs-controls.v-centered li a{ margin-top:20px;} #banner-fade ul.bjqs-controls.v-centered li a:hover{ background:#fff; color:#000;} .date1 .txt1 span{font-size: 0.8em;} /*======== Pagemenu ========*/ #pagemenu{margin-top:70px; margin-left:20px;} #pagemenu a{ line-height:20px; margin:5px 1px; font-size:16px; padding:5px 8px; max-width:10em; white-space:normal;} #pagemenu img{ width:2em; margin-right:5px; display:none; } .c-button--dropdown:after { top: 18px; right: 10px;} #pagemenu .btn_back { display:none; } #camera_wrap .camera_caption .txt1{font-size: 20px; line-height: 30px; padding-right:30px;} #youtubeDiv{width:300px; height:168px; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;} #youtubeDiv iframe {width:300px; height:168px;} #mediabox{width:100%; height:170px; border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;} #mediabox iframe {width:100%; height:170px;} .telstyle{width:100%; float:left; padding:0;} .telstyle span{font-size:1.5em; font-weight:bold; line-height:1.8em;} .bot1{background:url(../../images/footer_d.png) no-repeat right bottom #1fa1a1; background-size:250% auto;padding-top: 30px; padding-bottom: 30px; border-radius:30px 30px 0 0; -moz-border-radius:30px 30px 0 0; -webkit-border-radius:30px 30px 0 0; margin-top:20px;} .bot2{padding-bottom: 25px;} .banner .banner_inner a .title{ padding:10px; font-size: 1.3em; line-height: 20px; } .pagetitle{ padding:10px 20px; font-size:1.2em; } .titlebottom{ top:-40px; max-height:2em; z-index:-1;} .path{ font-size:0.8em; width:95%; padding:5px 8px; margin:0 auto; margin-top:30px;} .padmapW{width:100%; padding:0;} .btnnumW { width:100%; margin-bottom:100px;} .date2 .btnnumW {width:100%; margin-top:12px; margin-bottom:10px;} #topagetxt{padding-top:30px; text-align:center; } #topagetxt span{ display:none;} #printdiv .phoneshow{ display:block; } #printdiv .pcshow{ display:none; } #galleryico .phoneshow{ display:block; } #galleryico .pcshow{ display:none;} #biomenu .phoneshow{ display:block; } #biomenu .pcshow{ display:none;} #biomenu .padshow{ display:none;} #dismenu .phoneshow{ display:block; } #dismenu .pcshow{ display:none;} #dismenu .padshow{ display:none;} #pagemenu .pcshow span{ display:none; } #pagemenu .pcshow img{ display:block;} #tabdiv .tabs span{ display:none; } #tabdiv .tabs img{display:block;} #guidemenu .pcshow{ display:none; } #guidemenu .phoneshow{ display:block;} .floatShadow2{ display:none; } #aboutmenu a { min-width:90%;} .newslist { border:rgba(255,255,255,0.2) 1px solid;} .newslist .txt1{ float:left;} .newslist .txt1 span{font-size: 0.8em;} .newslist h3 { width:100%; float:left; padding-top:10px;} .newslist .txt2 p {float:left;} .newslist .txt2 .listimg{float:right; background:#FFF; width:200px; height:200px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; border:#FFF 2px solid; margin:-50px 10px 0 10px;} .thumb3 {width: 100%; margin:5px 0 5px 0; float:none;} .ticketnum div{ min-width:100%;} .tickettaiwan img{ width:2.5em;} .timetxttor{text-align:left;} .map_d{ width:100%;} .map_show{width:95%; margin-top:-2%; margin-left:-3%;} svg{ width:79.2%; margin:1.5% 0 0 0.7%;} path {opacity:0;} } @media (min-width: 481px) and (max-width: 767px) { } /* Landscape phones and down */ @media (max-width: 480px) { .container{width: 300px;} #inner{max-width: 360px; } .navbar-form input{width: 230px;} .thumb2 figure{float: none; margin-right: 0;} .thumb2 figure img{width: 100%;} .thumb5 figure{float: none; margin-right: 0;} .thumb5 figure img{width: 100%;} .page-404 .txt1{font-size: 150px; line-height: 150px;} .page-404 .txt2{font-size: 50px; line-height: 50px;} #plane1{margin-left: -350px;} #printdiv .phoneshow{ display:block; } #printdiv .pcshow{ display:none; } #galleryico .phoneshow{ display:block; } #galleryico .pcshow{ display:none;} #biomenu .phoneshow{ display:block; } #biomenu .pcshow{ display:none;} #biomenu .padshow{ display:none;} #dismenu .phoneshow{ display:block; } #dismenu .pcshow{ display:none;} #dismenu .padshow{ display:none;} #pagemenu .pcshow span{ display:none; } #tabdiv .tabs span{ display:none; } #guidemenu .pcshow{ display:none; } #guidemenu .phoneshow{ display:block;} .floatShadow2{ display:none; } .bot1{padding-top: 30px; padding-bottom: 30px; border-radius:30px 30px 0 0; -moz-border-radius:30px 30px 0 0; -webkit-border-radius:30px 30px 0 0; margin-top:20px;} .bot2{padding-bottom: 25px;} .ticketnum div{ min-width:100%;} .timetxttor{text-align:left;} .map_d{ width:100%;} .map_show{width:83%; margin-top:0.1%; margin-left:0.2%;} svg{ width:79.2%; margin:1.5% 0 0 0.7%;} path {opacity:0;} } /*iphone4_h*/ @media screen and (max-device-width: 400px) and (orientation: portrait){ .logo_wrapper{ width:90%;} .path{ font-size:0.7em; width:90%;} #printdiv .phoneshow{ display:block; } #printdiv .pcshow{ display:none; } #galleryico .phoneshow{ display:block; } #galleryico .pcshow{ display:none;} #biomenu .phoneshow{ display:block; } #biomenu .pcshow{ display:none;} #biomenu .padshow{ display:none;} #dismenu .phoneshow{ display:block; } #dismenu .pcshow{ display:none;} #dismenu .padshow{ display:none;} #pagemenu .pcshow span{ display:none; } #tabdiv .tabs span{ display:none; } #guidemenu .pcshow{ display:none; } #guidemenu .phoneshow{ display:block;} .floatShadow2{ display:none; } .bot1{padding-top: 30px; padding-bottom: 30px; border-radius:30px 30px 0 0; -moz-border-radius:30px 30px 0 0; -webkit-border-radius:30px 30px 0 0; margin-top:20px;} .bot2{padding-bottom: 25px;} .date1 .txt1 span{font-size: 0.8em;} .thumb3 {width: 100%; margin:5px 0 5px 0; float:none;} .ticketnum div{ min-width:100%;} .timetxttor{text-align:left;} /*#banner-fade, #banner-slide{ width:300px; height:200px; max-width:300px; max-height:200px; min-width:300px; min-height:200px; border:#9A0C0E 1px solid; } .bjqs , .bjqs img { width:300px; height:200px; max-width:300px ; max-height:200px; min-width:300px; min-height:200px; }*/ }