@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);


/*reset*/
/*******************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,a,article,figure,nav,img { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
table { border-collapse: collapse; border-spacing: 0;}
object,embed { vertical-align: top;}
hr,legend { display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 700;}
img { width: auto; max-width: 100%; height: auto; border: 0; vertical-align: middle;}
li { list-style: none;}
a { color: #00a0e1; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none;}
a:hover { opacity: 0.5!important;}


/*GLOBAL*/
/*******************************************************************/
#globalheader { background: #FFF; border-bottom: 1px solid #808080;}
#globalheader ul { display: table; width: 100%; max-width: 960px; margin: 0 auto;}
#globalheader li { display: table-cell; padding: 10px 5px; vertical-align: middle;}
#gcentrair { width: 25%;}
#glogo { text-align: center;}
#gtitle { width: 25%; text-align: right;}
#gback { text-align: center;}
#gback a { display: inline-block; padding-right: 24px; background: url(../images/gback.png) right center no-repeat; font-size: 12px; text-decoration: none; color: #4b4b4b;}


/*LAYOUT*/
/*******************************************************************/
html { -webkit-overflow-scrolling: touch;}
body { background: #e6eaf1; font-weight: 400; line-height: 2; color: #231815;}
html[lang="en"] body { font-size: 14px; font-family: 'Noto Sans', sans-serif; word-break: keep-all;}
html[lang="zh-tw"] body { font-size: 16px; letter-spacing: 0.1em; font-family: 'Noto Sans TC', sans-serif; word-break: break-all;}
#container { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; background: #FFF; box-shadow: 0 0 5px rgba(0,0,0,.3); overflow: hidden;}


/*HEADER*/
/*******************************************************************/
#top { position: relative;}
#top h1 { position: absolute; top: 5%; left: 0; z-index: 10; pointer-events: none;}
.sp-slide img { width: 100%; height: auto;}
.min { font-size: 12px; color: #727171;}
#header { background: url(../images/header.jpg)  center center no-repeat; background-size: cover;}
#header h1 { padding: 2%; text-align: center;}


/*CONTENTS*/
/*******************************************************************/
.article { padding: 4%;}
.article::after { content: ''; display: block; clear: both;}
.contents { max-width: 960px; margin: 0 auto;}
.contents h3 { margin-bottom: 4%; font-size: 24px; line-height: 1.4; color: #00a0e1;}
.contents h2, .contents p { margin-bottom: 4%;}
.contents p:last-child { margin-bottom: 0;}
.contents figure { margin-bottom: 4%; text-align: center;}
.contents header h2 img, .contents figure img { border-radius: 10px;}
.box { max-width: 1100px; margin: 0 auto; padding: 4% 4% 1%; background: #FFF;}
.box2 { background-repeat: repeat; border: 8px solid #FFF; border-radius: 10px; box-shadow: 4px 4px 0 rgba(0,0,0,.15);}
.box2 p { margin: 8%; color: #FFF;}
.box2 .arr { display: block; padding: 2%; text-align: center; background: #FFF;}
.box2 a { display: block;}
.box3 { padding: 4% 4% 1%; background: rgba(255,255,255,.3); border: 1px solid #FFF; border-radius: 10px;}
.box3 h3 { color: #ef5486;}
.box4 { padding: 4%; background: #E9FAFF; border: 6px solid #00a0e1; border-radius: 10px;}
.half { display: table; table-layout: fixed; width: 100%; margin-bottom: 3%;}
.item { display: table-cell; vertical-align: top;}
.item:first-child { padding-right: 2%;}
.item:last-child { padding-left: 2%;}
.item:first-child .box2 { background-image: url(../images/bg1.png);}
.item:last-child .box2 { background-image: url(../images/bg2.png);}

#heading { padding-top: 8%; background: #c2eeff url(../images/bg.png) center top no-repeat; background-size: 100% auto;}

#access { background: #f0f1f1;}
#access .box { text-align: center; margin-bottom: 0;}
#mapwrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 4%; background: #16234d;}
#map { width: 100%; height: 600px;}

#title li { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dashed #CCC;}
.no { display: inline-block; margin-right: 5px; padding: 5px 10px; background: #00a0e1; border-radius: 10px; line-height: 1; color: #FFF;}

.back { padding-top: 60px; text-align: center;}
.back a { display: inline-block; padding: 10px 40px; background: #16234d; border: 5px solid #FFF; border-radius: 10px; font-size: 20px; color: #FFF;}


/*FOOTER*/
/*******************************************************************/
#footer { position: relative; padding: 25px 0; text-align: center; background: #FFF; border-top: #D8D9D9 solid 1px; color: #333;}
#footer p { padding: 5px 0; font-size: 11px;}
#pagetop { display: none; position: fixed; right: 20px; bottom: 20px;}
#pagetop a { display: block; font-size: 50px; color: #19448a; text-shadow: 0 0 10px rgba(255,255,255,1.00);}
.sns { display: inline-block; padding: 5px; background: #FFF; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.a2a_default_style a, .a2a_default_style .a2a_img, .a2a_default_style .a2a_dd, .a2a_default_style .a2a_svg, .a2a_default_style .a2a_counter img { float: none!important;}
.a2a_default_style a { display: inline-block; vertical-align: middle;}
.sp { display: none!important;}


@media only screen and (max-width: 767px){
#globalheader ul { display: block;}
#globalheader li { display: block; padding: 5px 10px;}
#gcentrair { width: 24%;}
#glogo { border-top: 1px dashed #CCC;}
#glogo img { width: 50%;}
#gtitle { position: absolute; top: 0; right: 0; width: 40%;}
#gback { text-align: right;}

#top h1 { position: relative; top: 0;}

.contents header h2 { font-size: 30px;}
.contents p { margin-bottom: 8%;}
.contents figcaption { padding: 2% 10%;}

.half { display: block;}
.item { display: block; margin-bottom: 8%;}
.item:first-child { padding-right: 0;}
.item:last-child { padding-left: 0;}

#access .contents p.sp { display: inline-block; margin-bottom: 0; padding: 1% 5%; background: #EEE; border-radius: 30px; font-weight: 700;}
#map { width: 100%; height: 450px;}

#pagetop { right: 10px; bottom: 10px;}
.pc { display: none;}
.sp { display: inline-block!important;}
}


@media print {
#container { width: 1060px;}
}