@charset "UTF-8";
body { font-family: "Noto Sans", "微軟正黑體", Verdana, Geneva, sans-serif; color: #323232; line-height: 28px; font-size: 15px; position: relative; background-color: #fff; -webkit-text-size-adjust: none; }

a { color: #323232; text-decoration: none; }
a:hover { color: #2f439d; text-decoration: none; }

.hide { display: none; }

.clean { clear: both; line-height: 0; height: 0; }

.left { float: left; }

.right { float: right; }

.wrapper { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }

.red { color: #e60012; }

.qr-link { width: auto; min-height: 80px; display: block; position: fixed; top: -moz-calc(50% - 40px); top: -webkit-calc(50% - 40px); top: calc(50% - 40px); left: 0; z-index: 99; }
.qr-link li { width: 40px; display: block; overflow: hidden; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.qr-link li .link-logo { display: block; overflow: hidden; }
.qr-link li .link-logo img { float: right; }
.qr-link li .qrcode { width: 0; display: block; overflow: hidden; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.qr-link li .qrcode img { width: 100%; display: block; }
.qr-link li:hover { width: 130px; }
.qr-link li:hover .qrcode { width: 100%; height: auto; display: block; }
.qr-link .line .link-logo { background-color: #00b900; }
.qr-link .line .qrcode { background-color: #009a00; }
.qr-link .fb .link-logo { background-color: #3b5998; }
.qr-link .fb .qrcode { background-color: #2e4880; }

/*header */
header { width: 100%; padding: 0 10px 8px 10px; position: absolute; box-sizing: border-box; background-color: rgba(59, 88, 202, 0.9); z-index: 99; }
header:after { content: ""; width: 100%; height: 1px; background-color: rgba(255, 246, 0, 0.7); position: absolute; left: 0; bottom: 7px; }

nav { float: right; }
nav .nav { margin: 30px 0 28px 0; display: inline-block; vertical-align: middle; }
nav .nav li { margin: 0 18px; display: inline-block; vertical-align: middle; font-size: 20px; line-height: 23px; }
nav .nav li a { display: block; color: #fff; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
nav .nav li a:hover { color: #fff600; }
nav .link { margin: 30px 0 28px 0; display: inline-block; vertical-align: middle; }
nav .link li { display: inline-block; vertical-align: middle; }
nav .link li a { display: block; }
nav .link li a img { display: block; }
nav.nav-open, nav.nav-small { width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); max-width: 320px; float: none; padding: 20px 0; position: fixed; right: -100%; top: 60px; z-index: 2; background-color: rgba(59, 88, 202, 0.9); overflow: hidden; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
nav.nav-open .nav, nav.nav-small .nav { margin: 0; display: block; }
nav.nav-open .nav li, nav.nav-small .nav li { width: 100%; margin: 0; padding: 0 15px; display: block; text-align: center; box-sizing: border-box; }
nav.nav-open .nav li a, nav.nav-small .nav li a { padding: 5px 0; }
nav.nav-open .nav li a:hover, nav.nav-small .nav li a:hover { background-color: #2949cf; }
nav.nav-open .link, nav.nav-small .link { margin: 0; display: block; text-align: center; }
nav.nav-open .link li, nav.nav-small .link li { width: 100%; margin: 0; padding: 0 15px; display: block; text-align: center; box-sizing: border-box; }
nav.nav-open .link li a, nav.nav-small .link li a { padding: 5px 0 0 0; }
nav.nav-open .link li a:hover, nav.nav-small .link li a:hover { background-color: #2949cf; }
nav.nav-open .link li a img, nav.nav-small .link li a img { display: inline-block; }
nav.active { overflow: auto; right: 20px; }

.logo { float: left; margin: 17px 0 13px 0; position: relative; }
.logo a { display: block; }
.logo a img { display: block; }
.logo h1 { font-size: 12px; color: #fff; line-height: 12px; font-weight: bold; position: absolute; right: -14px; bottom: 0; font-family: Arial; }
.logo h1 span { position: absolute; text-indent: -9999px; }

.nav-link, .nav-link2 { width: 40px; height: 40px; position: fixed; background-color: rgba(59, 88, 202, 0.9); display: none; right: 20px; top: 20px; }
.nav-link span, .nav-link2 span { width: 20px; height: 1px; margin: auto; background-color: #FFF; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.nav-link:before, .nav-link2:before, .nav-link:after, .nav-link2:after { content: ""; width: 20px; height: 1px; margin: auto; background-color: #FFF; position: absolute; left: 0; right: 0; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.nav-link:before, .nav-link2:before { top: 15px; bottom: 0; }
.nav-link:after, .nav-link2:after { top: 0; bottom: 14px; }
.nav-link.active span, .active.nav-link2 span { -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.nav-link.active:before, .active.nav-link2:before { top: 0; bottom: 0; -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); transform: rotate(225deg); }
.nav-link.active:after, .active.nav-link2:after { top: 0; bottom: 0; -moz-transform: rotate(-225deg); -ms-transform: rotate(-225deg); -webkit-transform: rotate(-225deg); transform: rotate(-225deg); }

@media only screen and (max-width: 962px) { .nav-link2 { position: absolute; right: 10px; top: 20px; display: block; z-index: 2; background-color: rgba(59, 88, 202, 0.8); } }

/*banner */
.bnr-img { position: relative; }
.bnr-img .bnr-word { width: 600px; height: 300px; margin: auto; background-image: url("../images/banner-wordBG.png"); background-position: 0 0; background-repeat: repeat; background-color: rgba(59, 88, 202, 0.85); position: absolute; top: 0; left: 7%; bottom: 0; }
.bnr-img .bnr-word h3 { margin-bottom: 25px; padding-left: 10px; font-family: "新細明體"; font-size: 60px; font-weight: bold; font-style: italic; color: #fff; text-shadow: rgba(10, 38, 107, 0.7) 2px 2px 2px; text-shadow: rgba(10, 38, 107, 0.7) 2px 2px 0 2px; line-height: 60px; position: absolute; bottom: 245px; }
.bnr-img .bnr-word .bnr-txt { max-height: 220px; margin: 37px 30px 0 110px; padding: 0 0 0 20px; box-sizing: border-box; color: #d7deff; overflow: hidden; position: relative; }
.bnr-img .bnr-word .bnr-txt:before { content: ""; width: 1px; height: 120px; background-color: #fff; position: absolute; top: 8px; left: 0; }
@media only screen and (max-width: 768px) { .bnr-img .bnr-word .bnr-txt { display: none; } }
.bnr-img .bnr-word .bnr-btn { width: 142px; height: 52px; padding: 9px 12px; box-sizing: border-box; display: block; background-color: #ffcc00; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; position: absolute; right: 30px; bottom: -26px; }
.bnr-img .bnr-word .bnr-btn span { display: block; color: #1e3bb4; font-size: 20px; font-family: "Libre Baskerville", "微軟正黑體", Verdana, Geneva, sans-serif; font-style: italic; line-height: 34px; position: relative; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.bnr-img .bnr-word .bnr-btn span:before { content: ""; width: 1px; height: 100%; background-color: #fff; position: absolute; right: 26px; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.bnr-img .bnr-word .bnr-btn span:after { content: "▲"; font-family: Arial; font-style: normal; font-size: 12px; color: #fff; position: absolute; right: 2px; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.bnr-img .bnr-word .bnr-btn:hover { background-color: #172982; }
.bnr-img .bnr-word .bnr-btn:hover span { color: #fff; }
.bnr-img .bnr-word .bnr-btn:hover span:before { background-color: #ffcc00; }
.bnr-img .bnr-word .bnr-btn:hover span:after { color: #ffcc00; }
@media only screen and (max-width: 768px) { .bnr-img .bnr-word { width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); height: 50px; background: none; left: 20px; bottom: 20px; }
  .bnr-img .bnr-word h3 { width: 100%; margin-bottom: 0; font-size: 40px; text-align: left; bottom: 0; }
  .bnr-img .bnr-word .bnr-btn { width: 110px; height: 42px; margin: auto; padding: 9px 12px; left: 0; right: auto; bottom: -52px; }
  .bnr-img .bnr-word .bnr-btn span { font-size: 17px; line-height: 24px; } }

/*index - travel */
.travel-bg { background-image: url("../images/travel-bg.jpg"); background-position: center 0; background-repeat: repeat-y; background-color: #f2f2f2; }

.travel-title { background-color: rgba(81, 107, 213, 0.1); }
.travel-title h3 { padding: 48px 0 35px 54px; font-size: 20px; color: #1f449d; font-style: italic; position: relative; }
.travel-title h3:after { content: ""; width: 400px; height: 1px; background-color: #ffb400; position: absolute; bottom: 30px; left: 130px; }
.travel-title h3 span { margin-right: 15px; font-size: 60px; line-height: 60px; color: #3562cc; display: inline-block; font-family: "Libre Baskerville", "微軟正黑體", Verdana, Geneva, sans-serif; }
@media only screen and (max-width: 768px) { .travel-title h3 { padding: 30px 0 25px 30px; font-size: 15px; }
  .travel-title h3:after { width: 50%; left: 100px; bottom: 25px; }
  .travel-title h3 span { font-size: 40px; } }
@media only screen and (max-width: 480px) { .travel-title h3 { padding: 20px 0 15px 20px; }
  .travel-title h3:after { width: 70%; left: 70px; }
  .travel-title h3 span { font-size: 30px; } }

.travel-area { padding: 60px 10px 0 10px; box-sizing: border-box; overflow: hidden; }
@media only screen and (max-width: 768px) { .travel-area { padding-bottom: 30px; } }
@media only screen and (max-width: 480px) { .travel-area { padding: 45px 10px 30px 10px; } }

.travel-list { width: -moz-calc(50% - 48px); width: -webkit-calc(50% - 48px); width: calc(50% - 48px); margin: 0 68px 68px 0; position: relative; display: inline-block; }
.travel-list .travel-img { padding: 0 0 66.67% 0; position: relative; display: block; overflow: hidden; }
.travel-list .travel-img:before { content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; z-index: 3; }
.travel-list .travel-img img { width: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 2; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; }
.travel-list .travel-txt { width: 100%; padding: 0 0 66.67% 0; display: block; border: 1px solid #ffcc00; position: absolute; top: 20px; left: 20px; z-index: 4; }
.travel-list .travel-txt h4 { width: 100%; padding: 0 32px 0 20px; text-align: right; color: #4f7def; font-size: 60px; font-family: "Libre Baskerville", "微軟正黑體", Verdana, Geneva, sans-serif; font-style: italic; text-transform: uppercase; line-height: 70px; box-sizing: border-box; position: absolute; bottom: 32%; z-index: 2; }
@media only screen and (max-width: 800px) { .travel-list .travel-txt h4 { font-size: 35px; line-height: 35px; bottom: 33%; } }
@media only screen and (max-width: 768px) { .travel-list .travel-txt h4 { font-size: 60px; line-height: 70px; bottom: 32%; } }
@media only screen and (max-width: 480px) { .travel-list .travel-txt h4 { font-size: 35px; line-height: 35px; bottom: 33%; } }
.travel-list .travel-txt .price { width: 100%; padding: 0 32px 0 20px; box-sizing: border-box; color: #fff; font-size: 18px; font-family: "Libre Baskerville", "微軟正黑體", Verdana, Geneva, sans-serif; font-style: italic; position: absolute; bottom: 19%; z-index: 2; }
.travel-list .travel-txt .price span { font-size: 22px; color: #ffcc00; }
@media only screen and (max-width: 800px) { .travel-list .travel-txt .price { font-size: 15px; }
  .travel-list .travel-txt .price span { font-size: 18px; } }
@media only screen and (max-width: 768px) { .travel-list .travel-txt .price { font-size: 18px; }
  .travel-list .travel-txt .price span { font-size: 22px; } }
@media only screen and (max-width: 480px) { .travel-list .travel-txt .price { font-size: 15px; }
  .travel-list .travel-txt .price span { font-size: 18px; } }
.travel-list .travel-txt:after { content: ""; width: 100%; height: 27%; background-color: rgba(1, 9, 30, 0.5); position: absolute; bottom: 17.5%; z-index: 1; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.travel-list .travel-btn { width: 134px; height: 43px; padding: 10px 10px 0 12px; box-sizing: border-box; display: block; background-color: rgba(1, 9, 30, 0.8); -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; position: absolute; right: -21px; bottom: 7%; z-index: 5; }
.travel-list .travel-btn span { display: block; color: rgba(255, 255, 255, 0.5); font-size: 16px; font-family: "Libre Baskerville", "微軟正黑體", Verdana, Geneva, sans-serif; line-height: 23px; position: relative; font-weight: bold; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.travel-list .travel-btn span:before { content: ""; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.5); position: absolute; right: 22px; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; z-index: 7; }
.travel-list .travel-btn span:after { content: "▲"; font-family: Arial; font-style: normal; font-size: 10px; color: rgba(255, 255, 255, 0.5); position: absolute; right: 0px; -moz-transform: rotate(90deg) scale(0.8); -ms-transform: rotate(90deg) scale(0.8); -webkit-transform: rotate(90deg) scale(0.8); transform: rotate(90deg) scale(0.8); -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; z-index: 7; }
.travel-list .travel-btn:hover { background-color: #e60012; }
.travel-list .travel-btn:hover span { color: #fff; }
.travel-list .travel-btn:hover span:before { background-color: #ffcc00; }
.travel-list .travel-btn:hover span:after { color: #ffcc00; }
@media only screen and (max-width: 800px) { .travel-list .travel-btn { bottom: -21px; width: 120px; height: 35px; padding: 8px 10px; }
  .travel-list .travel-btn span { font-size: 15px; line-height: 20px; } }
@media only screen and (max-width: 768px) { .travel-list .travel-btn { bottom: 7%; width: 134px; height: 43px; padding: 10px 10px 0 12px; }
  .travel-list .travel-btn span { font-size: 16px; line-height: 23px; } }
@media only screen and (max-width: 480px) { .travel-list .travel-btn { bottom: -21px; width: 120px; height: 35px; padding: 8px 10px; }
  .travel-list .travel-btn span { font-size: 15px; line-height: 20px; } }
.travel-list:hover .travel-img img { -moz-transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); }
.travel-list:hover .travel-txt:after { height: 100%; bottom: 0; background-color: rgba(1, 9, 30, 0.5); }
.travel-list:nth-child(2n) { margin-right: 23px; }
@media only screen and (max-width: 800px) { .travel-list { width: -moz-calc(50% - 34px); width: -webkit-calc(50% - 34px); width: calc(50% - 34px); margin: 0 40px 40px 0; } }
@media only screen and (max-width: 768px) { .travel-list { width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); max-width: 500px; margin: 0 auto 50px auto; display: block; }
  .travel-list:nth-child(2n) { margin-right: auto; } }
@media only screen and (max-width: 480px) { .travel-list { width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: calc(100% - 20px); margin: 0 40px 40px 0; } }

/*index recommend */
.rcmd-bg { background-image: url("../images/recommend-bg.jpg"); background-position: center top; background-repeat: no-repeat; }
.rcmd-bg .rcmd-title h3 { padding: 100px 0 25px 10px; font-size: 20px; font-family: "Libre Baskerville", "微軟正黑體", Verdana, Geneva, sans-serif; font-style: italic; color: #fff; }
.rcmd-bg .rcmd-title h3 span { padding-right: 20px; font-size: 60px; line-height: 60px; display: inline-block; text-transform: uppercase; color: #000; }
@media only screen and (max-width: 768px) { .rcmd-bg .rcmd-title h3 { padding: 40px 0 5px 10px; font-size: 15px; }
  .rcmd-bg .rcmd-title h3 span { font-size: 40px; } }
@media only screen and (max-width: 480px) { .rcmd-bg .rcmd-title h3 { padding: 30px 0 5px 10px; }
  .rcmd-bg .rcmd-title h3 span { padding-right: 10px; font-size: 25px; line-height: 40px; } }

.rcmd-area { padding: 65px 15px 130px 0px; background-color: rgba(255, 255, 255, 0.7); }

.rcmd-list, .rcmd-list2 { width: 100%; position: relative; }
.rcmd-list .rcmd, .rcmd-list2 .rcmd { width: -moz-calc(33.33% - 30px); width: -webkit-calc(33.33% - 30px); width: calc(33.33% - 30px); max-width: 355px; float: left; margin: 0 30px 12px 30px; position: relative; -moz-box-shadow: #516bd5 12px 12px 0 1px; -webkit-box-shadow: #516bd5 12px 12px 0 1px; box-shadow: #516bd5 12px 12px 0 1px; }
.rcmd-list .rcmd .rcmd-link, .rcmd-list2 .rcmd .rcmd-link { width: 100%; height: 100%; display: block; position: absolute; z-index: 3; }
.rcmd-list .rcmd .rcmd-img, .rcmd-list2 .rcmd .rcmd-img { width: 100%; height: 0; padding: 0 0 100% 0; position: relative; overflow: hidden; }
.rcmd-list .rcmd .rcmd-img img, .rcmd-list2 .rcmd .rcmd-img img { width: 100%; display: block; position: absolute; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; }
.rcmd-list .rcmd .rcmd-txt, .rcmd-list2 .rcmd .rcmd-txt { width: 90%; min-height: 66px; position: absolute; background-color: rgba(1, 9, 30, 0.7); z-index: 2; bottom: 40px; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.rcmd-list .rcmd .rcmd-txt h4, .rcmd-list2 .rcmd .rcmd-txt h4 { padding: 12px; display: block; color: #fff; font-size: 18px; font-style: italic; line-height: 23px; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.rcmd-list .rcmd:hover .rcmd-img img, .rcmd-list2 .rcmd:hover .rcmd-img img { -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }
.rcmd-list .rcmd:hover .rcmd-txt, .rcmd-list2 .rcmd:hover .rcmd-txt { background-color: rgba(59, 88, 202, 0.9); }
.rcmd-list .rcmd:hover .rcmd-txt h4, .rcmd-list2 .rcmd:hover .rcmd-txt h4 { color: #ffcc00; }
@media only screen and (max-width: 768px) { .rcmd-list .rcmd, .rcmd-list2 .rcmd { margin: 0 20px 12px 20px; } }
@media only screen and (max-width: 480px) { .rcmd-list .rcmd, .rcmd-list2 .rcmd { max-width: 100%; } }
.rcmd-list .slick-dots, .rcmd-list2 .slick-dots { display: none !important; }
.rcmd-list .rcmd-prev, .rcmd-list2 .rcmd-prev, .rcmd-list .rcmd-next, .rcmd-list2 .rcmd-next { width: 52px; height: 52px; background-color: rgba(59, 88, 202, 0.85); position: absolute; bottom: -82px; z-index: 99; }
.rcmd-list .rcmd-prev, .rcmd-list2 .rcmd-prev { left: 30px; background-image: url("../images/arrow-prev.png"); background-position: center center; background-repeat: no-repeat; }
.rcmd-list .rcmd-next, .rcmd-list2 .rcmd-next { left: 82px; background-image: url("../images/arrow-next.png"); background-position: center center; background-repeat: no-repeat; }

/*footer */
.foot-nav { background-color: #2949cf; border-bottom: 1px solid #ffcc00; }
.foot-nav ul { text-align: center; }
.foot-nav ul li { margin: 0 10px; display: inline-block; }
.foot-nav ul li a { padding: 10px 0; font-size: 18px; color: #fff; display: block; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.foot-nav ul li a:hover { color: #fcff00; }

.footer { padding: 20px 15px 15px 15px; text-align: center; background-color: #516bd5; }
.footer .foot-logo { margin-bottom: 15px; display: inline-block; }
.footer .foot-logo img { display: inline-block; }
.footer .foot-logo h2 { font-size: 14px; color: #fff; line-height: 15px; font-weight: bold; font-family: Arial; position: relative; }
.footer .foot-logo h2 span { position: absolute; text-indent: -9999px; }
.footer .foot-list { display: block; }
.footer .foot-list li { margin: 0 10px; display: inline-block; font-size: 17px; color: #fff; line-height: 17px; }

.copyright { padding: 15px 15px 10px 15px; background-color: #778ff4; color: #fff; text-align: center; }
.copyright .ework { color: #b9c5f8; }
.copyright .ework a { color: #b9c5f8; }
.copyright .ework a:hover { color: #ffcc00; }

/*all top img */
.all-top { width: 100%; height: 467px; position: relative; overflow: hidden; background-position: center top; background-repeat: no-repeat; background-size: cover; }
.all-top .top-title { width: 245px; height: 110px; margin: 260px 0 0 60px; padding: 15px 0 0 0; box-sizing: border-box; position: absolute; color: #fff; background-image: url("../images/banner-wordBG.png"); background-position: 0 0; background-repeat: repeat; background-color: rgba(59, 88, 202, 0.85); text-shadow: rgba(10, 38, 107, 0.55) 1px 1px 1px; text-shadow: rgba(10, 38, 107, 0.55) 1px 1px 0 1px; font-style: italic; z-index: 3; }
.all-top .top-title h3 { margin-left: -35px; padding-bottom: 20px; font-size: 38px; }
.all-top .top-title h3 span { font-size: 50px; }
.all-top .top-title h4 { width: 480px; position: absolute; padding-left: 55px; font-size: 38px; }
@media only screen and (max-width: 480px) { .all-top .top-title { width: 200px; height: auto; margin-left: 10px; padding-top: 8px; background: none; }
  .all-top .top-title h3 { margin-left: 0; padding-bottom: 0px; font-size: 28px; }
  .all-top .top-title h3 span { font-size: 45px; }
  .all-top .top-title h4 { display: none; } }

/*breadcrumb */
.breadcrumb { width: 100%; max-width: 1200px; margin: 0 auto; padding: 5px 10px 20px 10px; box-sizing: border-box; text-align: right; }
.breadcrumb li { margin-left: 10px; display: inline-block; position: relative; }
.breadcrumb li a { padding: 0px 3px; display: block; color: #797979; font-size: 13px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.breadcrumb li a:hover { background-color: #2f439d; color: #fff; }
.breadcrumb li:before { content: ""; width: 5px; height: 5px; background-color: #989898; position: absolute; left: -10px; top: 12px; }
.breadcrumb li.bc-on a { color: #2f439d; }
.breadcrumb li.bc-on a:hover { color: #fff; }
.breadcrumb li.bc-on:before { background-color: #344daf; }

/*page */
.page { padding: 0 10px 50px 10px; text-align: center; }
.page a, .page span { margin: 0 1px; display: inline-block; font-size: 15px; line-height: 22px; font-family: "微軟正黑體"; }
.page a { padding: 0 6px; color: #2f439d; background-color: #dce0ff; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.page a:hover, .page a.page-on { color: #fff; background-color: #2f439d; }

/*activity */
.rcmd-list2 { overflow: hidden; }
.rcmd-list2 .rcmd { margin: 0 60px 60px 0; }
.rcmd-list2 .rcmd:nth-child(3n) { margin-right: 0; }
@media only screen and (max-width: 1200px) { .rcmd-list2 { padding: 0 20px; box-sizing: border-box; }
  .rcmd-list2 .rcmd { margin: 0 40px 50px 0; } }
@media only screen and (max-width: 768px) { .rcmd-list2 .rcmd { width: -moz-calc(50% - 25px); width: -webkit-calc(50% - 25px); width: calc(50% - 25px); }
  .rcmd-list2 .rcmd:nth-child(3n) { margin-right: 40px; }
  .rcmd-list2 .rcmd:nth-child(2n) { margin-right: 0; } }
@media only screen and (max-width: 480px) { .rcmd-list2 .rcmd { width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); width: calc(100% - 10px); margin-right: 0; }
  .rcmd-list2 .rcmd:nth-child(3n) { margin-right: 0px; } }

/*metric */
.metric { padding: 0 20px; }
@media only screen and (max-width: 480px) { .metric { padding: 0 10px; } }

.plan-travel, .plan-travel2 { width: -moz-calc(50% - 15px); width: -webkit-calc(50% - 15px); width: calc(50% - 15px); margin-right: 15px; float: left; }
.plan-travel .plan-title, .plan-travel2 .plan-title { width: 100%; max-width: 170px; padding: 5px 0 5px 10px; background-color: #9b9b9b; }
.plan-travel .plan-title img, .plan-travel2 .plan-title img, .plan-travel .plan-title h4, .plan-travel2 .plan-title h4 { display: inline-block; vertical-align: middle; }
.plan-travel .plan-title h4, .plan-travel2 .plan-title h4 { padding-left: 3px; color: #fff; font-size: 18px; }
@media only screen and (max-width: 768px) { .plan-travel, .plan-travel2 { width: 100%; margin: 0; float: none; } }

.plan-travel2 { margin-right: 0; margin-left: 15px; }
.plan-travel2 .plan-title { background-color: #4e68cf; }
@media only screen and (max-width: 768px) { .plan-travel2 { padding-top: 20px; margin-left: 0; } }

.table01, .table02 { width: 100%; background-color: #f2f5ff; }
.table01 tbody tr th, .table02 tbody tr th, .table01 tbody tr td, .table02 tbody tr td { padding: 6px 5px; box-sizing: border-box; }
.table01 tbody tr th, .table02 tbody tr th { width: 105px; text-align: right; vertical-align: top; }
.table01 tbody tr td, .table02 tbody tr td { width: -moz-calc(100% - 105px); width: -webkit-calc(100% - 105px); width: calc(100% - 105px); padding-right: 20px; }
.table01 tbody tr:first-child th, .table02 tbody tr:first-child th, .table01 tbody tr:first-child td, .table02 tbody tr:first-child td { padding-top: 20px; }
.table01 tbody tr:last-child th, .table02 tbody tr:last-child th, .table01 tbody tr:last-child td, .table02 tbody tr:last-child td { padding-bottom: 30px; }
@media only screen and (max-width: 480px) { .table01, .table02 { display: block; }
  .table01 tbody, .table02 tbody { display: block; }
  .table01 tbody tr, .table02 tbody tr { width: 100%; display: block; }
  .table01 tbody tr th, .table02 tbody tr th, .table01 tbody tr td, .table02 tbody tr td { width: 100%; padding: 0 10px; display: block; }
  .table01 tbody tr th, .table02 tbody tr th { text-align: left; padding-bottom: 0; padding-top: 10px; }
  .table01 tbody tr td, .table02 tbody tr td { padding-bottom: 10px; }
  .table01 tbody tr:first-child td, .table02 tbody tr:first-child td { padding-top: 0; }
  .table01 tbody tr:last-child th, .table02 tbody tr:last-child th { padding-bottom: 0; }
  .table01 tbody tr:nth-child(even), .table02 tbody tr:nth-child(even) { background-color: #e3e9ff; } }

.table02 { background-color: #f9f9f9; }
@media only screen and (max-width: 480px) { .table02 tbody tr:nth-child(even) { background-color: #eeeeee; } }

.metric-link { padding: 0 0 60px 0; display: none; text-align: center; }
@media only screen and (max-width: 768px) { .metric-link { display: block; }
  .metric-link li { width: 100%; max-width: 200px; margin: 0 5px; display: inline-block; text-align: center; }
  .metric-link li a { padding: 10px 0 30px 0; display: block; color: #fff; text-align: center; font-size: 20px; position: relative; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
  .metric-link li a:before, .metric-link li a:after { content: ""; margin: auto; left: 0; right: 0; color: #fff; position: absolute; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
  .metric-link li a:before { width: 80%; height: 1px; background-color: #fff; top: 42px; }
  .metric-link li a:after { content: "▼"; bottom: 0px; font-size: 15px; }
  .metric-link li a:hover:before { background-color: #ffcc00; }
  .metric-link li a:hover:after { color: #ffcc00; }
  .metric-link li:nth-child(1) a { background-color: #4e68cf; }
  .metric-link li:nth-child(1) a:hover { background-color: #1b2952; color: #ffcc00; }
  .metric-link li:nth-child(2) a { background-color: #9b9b9b; }
  .metric-link li:nth-child(2) a:hover { background-color: #242424; color: #ffcc00; } }
@media only screen and (max-width: 480px) { .metric-link { padding-bottom: 20px; }
  .metric-link li { min-width: 100%; margin: 0 0 10px 0; display: block; } }

/*contact */
.contact-area { position: relative; }
.contact-area .com-txt { width: 408px; height: 243px; padding: 53px 73px 0 64px; background-image: url("../images/contact-txtBG.png"); background-position: 0 0; background-repeat: no-repeat; box-sizing: border-box; position: absolute; top: 150px; left: 5%; }
.contact-area .com-txt .big { float: left; margin: -8px 10px 0 -28px; font-size: 42px; font-style: italic; color: #fff; display: block; }
.contact-area .com-txt p { color: #fff; font-size: 18px; line-height: 30px; }
.contact-area .com-txt .com-name { padding: 10px 0 0 125px; color: #fff; font-family: "Montserrat"; font-size: 15px; }
.contact-area .com-txt .com-cname { color: #121212; font-size: 35px; line-height: 38px; position: absolute; right: -16px; top: 65px; }
@media only screen and (max-width: 850px) { .contact-area .com-txt { width: 100%; height: auto; padding: 50px 60px 90px 65px; background: none; position: relative; top: 0; left: 0; }
  .contact-area .com-txt .big { color: #121212; }
  .contact-area .com-txt p { color: #121212; }
  .contact-area .com-txt .com-name { padding: 0; position: absolute; text-align: right; color: #121212; right: 85px; bottom: 20px; }
  .contact-area .com-txt .com-cname { width: 55px; height: 100%; padding-top: 30px; box-sizing: border-box; text-align: center; background-color: rgba(0, 0, 0, 0.7); color: #fff; right: 0; top: 0; } }
@media only screen and (max-width: 480px) { .contact-area .com-txt { padding: 50px 60px 90px 25px; }
  .contact-area .com-txt .big { margin-left: -10px; font-size: 25px; }
  .contact-area .com-txt p { font-size: 15px; line-height: 23px; }
  .contact-area .com-txt .com-name { right: 75px; }
  .contact-area .com-txt .com-cname { width: 45px; font-size: 25px; line-height: 30px; } }
@media only screen and (max-width: 850px) { .contact-area { padding-top: 88px; } }

.contact-img { width: -moz-calc(100% - 345px); width: -webkit-calc(100% - 345px); width: calc(100% - 345px); height: 738px; }
.contact-img .img { width: 100%; height: 100%; background-image: url("../images/contact-img.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; }
@media only screen and (max-width: 850px) { .contact-img { width: 100%; height: auto; }
  .contact-img .img { height: 100%; padding: 0 0 46.857% 0; } }

.about-area { width: 100%; max-width: 345px; padding: 185px 0 0 26px; box-sizing: border-box; position: absolute; top: 0; right: 0; }
.about-area h3 { margin-bottom: 50px; color: #4563c7; font-family: "Montserrat"; font-size: 38px; font-style: italic; font-size: 700; text-transform: uppercase; line-height: 43px; position: relative; }
.about-area h3:after { content: ""; width: 304px; height: 42px; position: absolute; background-image: url("../images/contact-line.gif"); background-position: right 0; background-repeat: no-repeat; bottom: -15px; left: 0; z-index: -1; }
@media only screen and (max-width: 850px) { .about-area { max-width: 100%; padding: 60px 0 30px 26px; position: relative; }
  .about-area h3 { display: block; }
  .about-area h3:after { background: #acacac; width: 96%; height: 1px; } }
@media only screen and (max-width: 480px) { .about-area h3 { font-size: 30px; line-height: 35px; } }

.about { margin-bottom: 40px; color: #4c4c4c; }
.about h4 { padding-bottom: 7px; font-size: 23px; font-style: italic; }
.about ul li { padding-left: 22px; display: block; position: relative; font-size: 18px; }
.about ul li:before { content: ""; width: 7px; height: 7px; background-color: #4563c7; display: block; position: absolute; top: 10px; left: 5px; }
@media only screen and (max-width: 850px) { .about { width: 49%; display: inline-block; } }
@media only screen and (max-width: 480px) { .about { width: 100%; } }

.rapid { width: -moz-calc(100% - 345px); width: -webkit-calc(100% - 345px); width: calc(100% - 345px); box-sizing: border-box; text-align: right; position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.7); }
.rapid li { width: 100%; max-width: 90px; display: inline-block; }
.rapid li a { padding: 8px 0; display: block; text-align: center; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.rapid li a img { width: 100%; max-width: 40px; margin: 0 auto; display: block; }
.rapid li a span { display: block; text-align: center; color: #fff; font-size: 15px; }
.rapid li a:hover { background-color: rgba(0, 0, 0, 0.6); }
@media only screen and (max-width: 850px) { .rapid { width: 100%; position: relative; text-align: center; } }
@media only screen and (max-width: 480px) { .rapid { overflow: hidden; }
  .rapid li { float: left; display: block; } }

/*form */
.f0 { width: 100%; height: 23px; -webkit-appearnce: none; border: 1px solid #c5c5c5; background-color: #fff; vertical-align: middle; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

.f1 { max-width: 260px; }

.f2 { max-width: 145px; }

.label1 { margin-right: 5px; display: inline-block; vertical-align: middle; }
.label1 input, .label1 span { vertical-align: middle; display: inline; }

.f3 { max-width: 420px; }

.f4 { max-width: 70px; }

.f5 { max-width: 420px; height: 155px; }

/*button */
.btn-area { padding: 30px 0; text-align: center; }

.btn { width: 130px; height: 52px; margin: 0 3px; display: inline-block; text-align: center; color: #fff; cursor: pointer; border: none; font-size: 18px; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; font-family: "Libre Baskerville", "微軟正黑體", Verdana, Geneva, sans-serif; -webkit-appearance: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

.btn1 { background-color: #8d8d8d; }
.btn1:hover { background-color: #575757; }

.btn2 { background-color: #3e62cb; }
.btn2:hover { background-color: #e60012; }