@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.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: #ff8000; -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; word-break: break-all; 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: 14px; font-family: 'Noto Sans TC', sans-serif;}
html[lang="ko"] body { font-size: 14px; font-family: 'Noto Sans KR', sans-serif;}
html[lang="zh-cn"] body { font-size: 14px; font-family: 'Noto Sans SC', sans-serif;}
#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 { text-align: center;}
#slide h1 { position: absolute; top: 20%; left: 0; right: 0; margin: auto; z-index: 10; pointer-events: none;}
.sp-slide img { width: 100%; height: auto;}
.min { font-size: 12px; color: #727171;}
#open { display: none;}
#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 4%;}
.contents header { text-align: center;}
.contents header h2 { margin-bottom: 3%; padding: 2% 0; border-bottom: 2px solid #00266b; font-size: 40px; line-height: 1.2; color: #00266b;}
.contents header p { margin-bottom: 4%; text-align: left;}
.contents h3, .st { margin-bottom: 4%; font-size: 20px; color: #ff8000;}
.contents p { margin-bottom: 4%;}
.contents p:last-child { margin-bottom: 0;}
.contents figure { text-align: center;}
.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%;}
.contents .item p { margin-top: 2%;}
.line { padding-bottom: 3%; border-bottom: 1px dashed #555;}

.box .half {margin-bottom:0%;}
.box p {padding-left:15px;}

#navwrap { background: #00266b;}
#navwrap .contents { margin-bottom: 0;}
#nav ul { display: table; table-layout: fixed; width: 100%; border-left: 1px solid #FFF; text-align: center;}
#nav li { display: table-cell; padding: 15px 10px; vertical-align: middle; border-right: 1px solid #FFF;}
#nav li span { display: block; padding-top: 10px; font-size: 16px; line-height: 1.2;}
#nav li a { display: block; color: #FFF;}

#about { background: url(../images/about.jpg) center top no-repeat; background-size: cover; color: #FFF;}
#about .contents header h2 { border-bottom-color: #FFF; color: #FFF;}

#flight { padding-bottom: 0;}
#flight h3, .sub { display: inline-block; margin-bottom: 3%; padding: 5px 20px; background: #00266b; border-radius: 50px; font-size: 22px; color: #FFF!important;}
.time h4 { margin-bottom: 1%; border-bottom: 1px solid #00266b; font-size: 20px; color: #00266b;}
.time .item { position: relative;}
.time .item:first-child { width: 70%; padding-right: 0;}
.time .item:last-child figure { padding: 5%; background: #f5f5f5;}
html[lang="en"] .time .item td, html[lang="en"] .time .item th { padding: 3%;}
html[lang="en"] .time .item:first-child { width: 50%;}
html[lang="en"] .time .item:last-child figure { padding: 0; background: #f5f5f5;}
.time p { text-align: center;}
.time table { width: 100%; text-align: center; border-top:solid 1px #555; border-right:solid 1px #555; border-bottom:solid 1px #555; margin-bottom:5%;}
.time th { vertical-align: middle; border-bottom: 1px solid #555; border-left: 1px solid #555;}
.time td { padding: 0%; vertical-align: middle; border-left: 1px solid #555; border-bottom: none; font-size:14px;}
.balloon { position: absolute; top: -50px; right: 0;}
.box { padding: 2%; border: 1px solid #999; font-size: 20px; margin-bottom:1%;}
html[lang="en"] .box { font-size: 18px;}
.box .item{}
#flight dl { font-size: 12px;}
#flight dt { float: left; clear: left; width: 10%; padding: 5px 0;}
#flight dd { padding: 5px 0 5px 10%;}
html[lang="en"] #flight dt { float: none; clear: left; width: 100%; padding: 5px 0;}
html[lang="en"] #flight dd { padding: 0 0 5px;}
#banner { padding: 6% 1% 1%; text-align: center; background: url(../images/reservation_bg.jpg)  center top no-repeat; background-size: cover;}

#after { background: #f0f1f1;}
.access { margin: 4% 0; padding: 5%; text-align: center; background:  #FFF;}

#list { background: #f0f1f1;}
#list ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
#list li { -webkit-flex-basis: 50%; flex-basis: 50%; max-width: 50%; padding: 3%; background: #FFF; border-left: 1px dashed #555; border-bottom: 1px dashed #555;}
#list li:nth-child(2n+1) { border-left: none;}
#list li:nth-child(4n+3), #list li:nth-child(4n) { background: #e6eaf1;}
#list h3 { color: #00266b;}
.lift { float: right;}
.more { text-align: right;}
.back { padding-top: 60px; text-align: center;}
.back a { padding: 10px 40px; background: #00266b; border: 5px solid #FFF; border-radius: 6px; font-size: 20px; color: #FFF;}

.price h4 { margin-bottom: 1%; font-size: 20px; color: #00266b;}

/*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;}

#nav { position: fixed; bottom: -500px; left: 0; width: 100%; margin: 0; background: #00266b; z-index: 100; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out;}
#nav ul { display: block; table-layout: auto; border-top: #7EADAC solid 1px;}
#nav li { display: block; border-left: none; border-bottom: #7EADAC solid 1px;}
#nav li span { display: inline-block; padding: 0 0 0 10px;}
#nav li a { padding: 15px;}
#nav li a img { height: 30px;}
#nav li a img:last-child { display: none;}
#open { display: block; position: fixed; bottom: 10px; left: 10px; width: 54px; height: 54px; text-align: center; background: #00266b; border-radius: 6px; font-size: 11px; line-height: 1; font-weight: 700; color: #FFF; cursor: pointer; z-index: 102;}
#open div { position: relative; height: 26px; margin: 10px 10px 3px 10px;}
#open span { position: absolute; left: 0; display: block; width: 34px; height: 4px; background: #FFF; -webkit-transition: .15s ease-in-out; -moz-transition: .15s ease-in-out; transition: .15s ease-in-out;}
#open span:nth-child(1) { top: 0;}
#open span:nth-child(2) { top: 11px;}
#open span:nth-child(3) { top: 22px;}
.open #open span:nth-child(1) { top: 11px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.open #open span:nth-child(2) { width: 0; left: 50%;}
.open #open span:nth-child(3) { top: 11px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
.open #nav { -moz-transform: translateY(-580px); -webkit-transform: translateY(-580px); transform: translateY(-580px);}

.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;}

.box .item { display: block; margin-bottom: 0%;}

#flight .item:first-child { width: 100%!important;}
#flight th { display: block; width: 100%; border-bottom: none;}
#flight td { display: block; border: none;}
#flight dt { float: none; clear: left; width: 100%; padding: 5px 0;}
#flight dd { padding: 0 0 5px;}
#banner { padding: 15% 5% 5%;}

#list ul { display: block;}
#list li { max-width: 100%; padding: 5%; border-left: none;}
#list li:nth-child(4n+3), #list li:nth-child(4n) { background: #FFF;}
#list li:nth-child(even) { background: #e6eaf1;}

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

.time table { width: 100%; text-align: center; border-top:solid 1px #555; border-right:solid 1px #555; border-bottom:solid 1px #555; margin-bottom:5%;}
.time th { width:auto!important; display:table-cell!important;  vertical-align: middle; border-bottom: 1px solid #555!important; border-left: 1px solid #555!important;}
.time td { display:table-cell!important; padding: 0%; vertical-align: middle; border-left: 1px solid #555!important; border-bottom: none; font-size:14px;}

#slide h1 { position: absolute; top: 5%; left: 0; right: 0; margin: auto; z-index: 10; pointer-events: none;}
}


@media handheld, only screen and (max-width:1180px)
{
#slide h1 { position: absolute; top: 5%; left: 0; right: 0; margin: auto; z-index: 10; pointer-events: none;}
}


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