@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Bentham);
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url(ElegantIcons/style.css);
@import url(animate-custom.css);

@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);

/*============reset===============*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td, iframe, figure, figcaption { margin: 0; padding: 0; font-size: 100%; }
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }
table, table td { border-collapse: collapse; border-spacing: 0; border: none; }
fieldset, img { border: 0; vertical-align: bottom; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; }
a, del, ins { text-decoration: none; }
ol, li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
abbr, acronym { border: 0; font-variant: normal; }
sup, sub { vertical-align: baseline; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; border: 0; }
/*============clear===============*/
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*============animate===============*/
a, .visible, #header, a i, a em, .icon-box, .img-box img, .img-over-box img, a:before { -webkit-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; transition: all 250ms ease-in; }
.header-icon a:hover { -ms-transform: scale3d(1.1, 1.1, 1.1); -moz-transform: scale3d(1.1, 1.1, 1.1); -webkit-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
.hidden { opacity: 0; }
.visible { opacity: 1; }
.fade { display: none; }
.delay-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-left-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-left-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-left-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-left-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-right-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-right-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-right-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-right-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-zoomin-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-zoomin-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-zoomin-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-zoomin-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-zoomout-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-zoomout-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-zoomout-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-zoomout-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-list li { opacity: 0; -webkit-animation: fadeInUp 0.9s 1;  animation: fadeInUp 0.9s 1;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;}
.delay-list li:nth-child(5n+1) {  -webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}
.delay-list li:nth-child(5n+2) {  -webkit-animation-delay: 0.4s;  animation-delay: 0.4s;}
.delay-list li:nth-child(5n+3) {  -webkit-animation-delay: 0.6s;  animation-delay: 0.6s;}
.delay-list li:nth-child(5n+4) {  -webkit-animation-delay: 0.8s;  animation-delay: 0.8s;}
.delay-list li:nth-child(5n+5) {  -webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-list li:nth-child(5n+6) {  -webkit-animation-delay: 1.2s;  animation-delay: 1.2s;}
.delay-list li:nth-child(5n+7) {  -webkit-animation-delay: 1.4s;  animation-delay: 1.4s;}
.canvas-animation { position: absolute; width: 100%; height: 0; overflow: hidden; }
.canvas-animation canvas { display: block; position: absolute; width: 100%; height: 100%; top: 0;}
.canvas-animation img{ width:100%;}
/*============grids===============*/
.grid-large, .grid-middle, .grid-small { width: 85%; margin: 0 auto; position: relative; }
.grid-content{ margin: 0 auto; position: relative; }
.grid-large { max-width: 1640px; }
.grid-middle { max-width: 1440px; }
.grid-small { max-width: 1360px; }
.grid-1-5, .grid-2-5, .grid-3-5, .grid-4-5, .grid-3-7, .grid-4-7, .column-1-2{ float: left; display: block; position: relative; }
.grid-right{ float: right;}
.grid-1-5 { width: 20%; }
.grid-2-5 { width: 40%; }
.grid-3-5 { width: 60%; }
.grid-4-5 { width: 80%; }
.grid-3-7 { width: 42.9%; }
.grid-4-7 { width: 57%; }
.column-1-2 { width: 50%; }
.grid-bottom{margin-bottom:50px;}
.mt-5 { margin-top: 5px; }
.mb-5 { margin-bottom: 5px; }
/*============style===============*/
body {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1rem;
    background-color: #047588;
    color: #fff;	
}
.en, .title-en, .text-en, .text-en2, .text-en3, a em{font-family: "Bentham";}
p { font-family: 'cwTeXMing', serif; font-size: 0.9rem; line-height: 28px; text-align: justify;}
p span, .br, h1 span, h2 span{ display: inline-block; }
::selection { background: #004049; color: #fff; }
a { color: #9ACA82; display:inline-block; position:relative; }
a:hover { color: #9ACA82; }
a.button-line:before, .footer-info a:before{ position: absolute; content: ''; display: block; background-color: #9ACA82; bottom:0; left:50%; width: 0px; height: 1px;}
a.button-line:hover:before, .footer-info a:hover:before{ width: 100%; left:0;}
strong { font-weight: bold; }
em, i { font-style: normal; }
big { font-size: 1.1em; }
small { font-size: 0.85em; }
h1 { font-size: 2.25em; color:#9ACA82;}
.title-box h1{ font-weight:bold; letter-spacing: 0.2em; line-height: 1.4em;}
h2 { font-size: 1.875em; color:#9ACA82; line-height: 1.3em;}
h3 { font-size: 1.5em; color: #ccc;}
h4, h5, h6 { font-size: 1em; }
.no-spacing, .title-box .no-spacing{ letter-spacing: 0; }
.title-en{ font-size:60px; color:#9ACA82; line-height: 55px; -moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); text-shadow: 0px 0px 4px rgba(0,0,0,0.9);}
.title-en big{ font-size:160px;}  
.text-en{ font-size:12px; color:#ccc; filter: alpha(opacity=20); opacity: 0.2;}
.text-en2{font-size:48px; color:#333;}
.text-en3{font-size:16px; color:#333; line-height: 1.6em;}
.text-line, .footer-info li { position: relative; display: inline-block; padding-right: 10px; margin-right: 8px; }
.text-line:before, .footer-info li:before { position: absolute; content: ''; display: block; background-color: #666; width: 1px; height: 80%; margin-top: -9px; right: 0; top: 50%;  filter: alpha(opacity=60); opacity: 0.6;}
/*============base===============*/
body, html { height: 100%; }
.wrapper { min-height: 100%; width: 100%; position: relative; margin: 0 auto; overflow: hidden; }
.main { min-height: 100%; position: relative; width: 100%; /*overflow: hidden;*/ }
#footer { position: relative; width: 100%; margin-top: -90px; height: 90px; z-index: 5;overflow: hidden;}
/*============iframe===============*/
.iframe-16x9 { position: relative; padding-bottom: 56.24%; height: 0; overflow: hidden; }
.iframe-4x3 { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
.iframe-16x9 iframe, .iframe-4x3 iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*==============text-ver==================*/
.text-ver, .ideal-text h1, .ideal-text p, .about-text h1, .about-text p { writing-mode: tb-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.text-hor { writing-mode: lr-tb; -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; }
/*============nav===============*/
.logo { position: relative; display: block; margin:45px auto 35px auto; width: 120px; }
.logo img { width: 100%; height: auto;}
#header { position: fixed; display: block; width: 240px; top: 0px; right: 0px; z-index: 101; overflow:auto; background:url(../images/bg2.png); height:100%; text-align: center;}
#nav{ width:100%; }
#nav li, #nav a { position: relative; display: block; width:100%; }
#nav li a {font-size: 18px; color: #999; padding: 12px 0; white-space: nowrap; overflow: hidden;}
#nav li a em { display: block; font-size: 30px; color: #333;}
#nav li a:hover, #nav li.active a{ color:#9ACA82;}
#nav li a:hover em, #nav li.active a em{ color:#666;}

.header-button {position:absolute; bottom:15px; width: 100%; }
.header-button a{ display: block; width: 100%; padding: 7px 0; }
.header-button a { font-size: 18px; color:#999;}
.header-button a:hover { color:#9ACA82;}
.header-icon{width: 85px; margin:30px auto 10px auto;}
.header-icon a{ float: left; width: 35px; height: 35px; line-height: 40px; text-align: center; padding: 0; margin:3%; color:#082a3f; background-color: #999; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden;}
.header-icon a:hover { color:#082a3f; background-color: #9ACA82;}
.header-icon img{ width: 25px; height: auto; line-height: 25px;}
a.icon-img{ line-height: 30px;}
.button-bar{position:fixed;left: 0;bottom: 0; width: 100vw; 
	background: #F8C64C; /* Old browsers */
	 z-index: 10;}
.button-bar a{position: relative;
    display: block;
    float: left;
    width: calc(25% - 1px);
    height: 55px;
    padding-top: 10px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: #142D6A;
    border-right: 1px solid #F8C64C;}
.button-bar a:before:first-child{display: none;}
.button-bar i{font-size: 20px; display: block;}
.button-bar img{ display: block; width: 25px; height: auto;margin: 0 auto;}

a.icon-nav { position: fixed; top: 3%; right: -100px; display: block; width: 70px; height: 70px; line-height: 70px; background: url(../images/bg-pat2.png) no-repeat center center #999; color: #000; text-align: center; z-index: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
a.icon-nav em{ display: inline; white-space: nowrap;}
a.icon-nav i { display: none; font-size:24px; }
a.icon-nav:hover{background: url(../images/bg-pat2.png) no-repeat center center #9ACA82;}
#header.sticky a.icon-nav {right: 2%;}
#header.sticky{ right: -250px;}
#header.sticky.active a.icon-nav {right: 250px;}
#header.active{ right: 0px;}
#header.active a.icon-nav{ width: 40px; height: 40px; line-height: 45px; background: #999;}
#header.active a.icon-nav:hover{ background: #9ACA82;}
#header.active a.icon-nav em{ display: none;}
#header.active a.icon-nav i{ display: inline;}

/*============footer===============*/ 
.footer-grid { position: relative; padding-top:20px; max-width: 1000px; margin:0 auto;}
.footer-grid a{ color: #999;}
.footer-grid a:hover{color: #9ACA82}
.footer-img { width: 195px; padding: 5px 20px; float: left; }
.footer-img img{ width: 100%; float: left; height: auto;} 
.footer-info { float: left; display: block; font-size: 16px; margin-bottom:5px; }
.footer-info li:last-child:before { display: none; }
.footer-title{ font-size: 24px;}
.footer-copyright { display: block; font-size: 13px; filter: alpha(opacity=80); opacity: 0.8; clear: both; }
#mobile #footer{padding-bottom: 50px;}
/*============main===============*/
.img-bg { position: fixed !important; top: 0; left: 0; height: 100% !important; width: 100%; z-index: 0; }
.bg-b { background: url(../images/bg.jpg) top center repeat #000; /*background-attachment: fixed;*/ }
.content-header{ position: relative; display: block; width: 100%; min-height:300px; background-position: top center; background-size: cover; }
.content-title{ position: relative; display: block; width: 100%; height:1000px; background-position: top left; background-size: cover; }
.content-subtitle{ position: relative; display: block; width: 100%; height:224px; background-position: center center; background-size: auto 100%; }
.section{ padding: 50px 0;}
.section-large{ padding: 100px 0;}
.title-box{ position:relative; display:block; float:left; margin-top: -300px; }
.title-content{ width: 90%; max-width: 480px;}

.img-alert { display: block; position: relative; top: -35px; height: 0; font-size: 18px; color: #fff; letter-spacing: 2px; line-height: 24px; text-shadow: black 0.1em 0.1em 0.2em; }
.img-header-overlay{ position: relative; display: block; max-width: 100%; margin: 0 auto; top: 0; }
.img-footer-overlay{ position: relative; display: block; max-width: 100%; margin: 0 auto; top: 10vh; }
.img-fullwidth{ position: relative; display: block; width: 100%; }
.contact-imagewidth{ width: auto; }

/*============page images===============*/
.page-img-header { background-position: top center !important; background-size: 100% !important; height: calc(50vw * 0.45) !important; }

.page-img-1-1 { float: left; position: relative; width: 100%; }
.page-img-1-2 { float: left; position: absolute; width: 100%; z-index: 3; }
.page-img-1 { background-position: top center !important; background-size: 100% !important; height: calc(65.75vw * 0.76045) !important; }
	
.page-img-2-1 { float: left; position: relative; width: 100%; } 
.page-img-2-2 { float: left; position: absolute; width: 54%; height: calc(54vw * 0.563); top: calc(100vw * 0.5 * 0.275); right: 0; z-index: 4; }
.page-img-2 { background-position: top center !important; background-size: 100% !important; height: calc(54vw * 0.563) !important; }

.page-img-3-1 { float: left; position: relative; width: 100%; }
.page-img-3-2 { float: left; position: absolute; width: 50%; height: calc(100vw * 0.5); z-index: 3; }
.page-img-3 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.5) !important; }
#page-title-3 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; left: 20px; bottom: 20px; text-align: left; color: #fff; font-size: 1.1rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-img-4-1 { float: left; position: relative; width: 100%; }
.page-img-4-2 { float: left; position: absolute; width: 100%; height: calc(99.3vw * 0.225); z-index: 4; }
.page-img-4 { background-position: top center !important; background-size: 100% !important; height: calc(99.3vw * 0.225) !important; }

.page-img-5-1 { float: left; position: relative; width: 100%; }
.page-img-5-2-1 { float: left; position: relative; width: 25%; top: calc(100vw * 0.55 * 0.0909); z-index: 2; }
.page-img-5-2-2 { float: left; position: relative; width: 25%; top: calc(100vw * 0.55 * 0.0909); z-index: 2; }
.page-img-5-2-3 { float: left; position: relative; width: 25%; top: calc(100vw * 0.55 * 0.0909); z-index: 2; }
.page-img-5-2-4 { float: left; position: relative; width: 25%; top: calc(100vw * 0.55 * 0.0909); z-index: 2; }
.page-img-5 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.5) !important; }
	
.page-img-6-1 { float: left; position: relative; width: 100%; }
.page-img-6-2 { float: left; position: absolute; width: 100%; z-index: 4; }
.page-img-6 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.5) !important; }
#page-title-6 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; left: 0; top: calc(41.666vw * 1.038); font-size: 1.1rem; font-weight: 400; }
	
.page-img-7-1 { float: left; position: relative; width: 100%; }
.page-img-7-2 { float: left; position: absolute; width: 100%; z-index: 4; }
.page-img-7 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.5615) !important; }
#page-title-7 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; margin-right: 20px; top: calc(50vw * 1); text-align: right; color: #fff; font-size: 1.2rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-img-8-1 { float: left; position: relative; width: 100%; }
.page-img-8-2 { float: left; position: absolute; width: 54.75%; height: calc(54.75vw * 0.91324); z-index: 4; }
.page-img-8 { background-position: top center !important; background-size: 100% !important; height: calc(54.75vw * 0.91324) !important; }
#page-title-8 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; left: 20px; bottom: 20px; text-align: left; color: #fff; font-size: 1.1rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-img-9-1 { float: left; position: relative; width: 100%; }
.page-img-9-2 { float: left; position: absolute; width: 30%; margin-top: calc(100vw * 0.04); right: 0; z-index: 4; }
.page-img-9 { background-position: top center !important; background-size: 100% !important; height: calc(30vw * 1.5390625) !important; }
#page-title-9 .photo-title-1 { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; margin-right: 20px; top: calc(30vw * 1.5); text-align: right; color: #fff; font-size: 1.2rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }
#page-title-9 .photo-title-2 { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; margin-left: 20px; top: calc(30vw * 0.75); text-align: left; color: #fff; font-size: 1.2rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-img-10-1 { float: left; position: relative; width: 100%; }
.page-img-10-2 { float: left; position: relative; width: 100%; z-index: 2; }
.page-img-10 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.5) !important; }
#page-title-10 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; margin-left: 0; top: calc(100vw * 0.48); right: 56.8vw; text-align: right; color: #fff; font-size: 1.2rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-img-11-1 { float: left; position: relative; width: 100%; }
.page-img-11-2 { float: left; position: relative; width: 100%; z-index: 4; }
.page-img-11 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.5) !important; }
#page-title-11 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; margin-left: 0; top: calc(100vw * 0.48); right: 57.8vw; text-align: right; color: #fff; font-size: 1.2rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-img-12-1 { float: left; position: relative; width: 100%; }
.page-img-12-2 { float: left; position: relative; width: 62.2vw; margin-top: calc(100vw * 0.07); left: 6vw; z-index: 2; }
.page-img-12-3 { float: left; position: relative; width: 100%; z-index: 3; }
.page-img-12 { background-position: top center !important; background-size: 100% !important; height: calc(62.2vw * 0.5627) !important; }
#page-title-12 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; margin-right: 20px; top: calc(62.2vw * 0.555); text-align: right; color: #fff; font-size: 1.2rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-img-13-1 { float: left; position: relative; width: 100%; }
.page-img-13-2 { float: left; position: relative; width: 100%; z-index: 1; }
.page-img-13 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.5) !important; }
#page-title-13 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; left: 0; top: calc(41.666vw * 1.038); font-size: 1.1rem; font-weight: 400; }

.page-img-14-1 { float: left; position: relative; width: 100%; }
.page-img-14-2 { float: left; position: relative; width: 53.65vw; margin-top: calc(100vw * 0.07); left: 6vw; z-index: 2; }
.page-img-14 { background-position: top center !important; background-size: 100% !important; height: calc(53.65vw * 0.7288) !important; }
#page-title-14 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; margin-right: 20px; top: calc(53.65vw * 0.72); text-align: right; color: #fff; font-size: 1.2rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-contact-img-1 { float: left; position: relative; width: 55%; }
.page-contact-img-2 { float: right; position: relative; width: 50%; right: 7%; padding-top: calc(100vw * 0.06); }

.privacy-text { margin-top: 70px; color: #222; font-size: 14px; line-height: 24px; }

.page-news-1 { float: left; position: relative; width: 100%; }
.page-news-2 { float: left; position: relative; width: 100%; }
.page-news { background-position: top center !important; background-size: 100% !important; height: calc(50vw * 1) !important; }

.page-small-image-1 { width: 33vw; right: 0; }
.page-small-image-2 { width: 33vw; left: 8.25vw; top: calc(50vw * 1.778666 * 0.185); }

.desktop-hide, li.desktop-hide{ display:none;}

.info-text { margin-left: 0; margin-top: 4vh; font-family: 'cwTeXMing', serif; font-size: 0.85rem; line-height: 30px; }
.contact-title { width: 250px; }

.img-container { position: relative; overflow: hidden; }
.img-container img { width: 100%; height: auto; }
.img-caption2 { position: absolute; display: block; bottom: 0; right: 20px; color: #fff; min-height: 35px; z-index: 1; -moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); text-shadow: 0px 0px 4px rgba(0,0,0,0.9); text-align: right; }
.img-caption{ font-size: 18px; color: #999; text-align: left; letter-spacing: 0.05em; margin-top: 20px; position: relative; z-index: 1;}
.img-caption h1{ font-size: 55px; line-height: 55px; color: #fff; float: left; display: block; border-right: solid 1px #666; padding: 0 15px 0 2%; margin-right: 15px;}
.img-caption h2{ font-size: 26px; color: #fff; margin-top: -35px;}
.img-list3 .img-caption{ text-align: center;}
.img-list3 .img-caption h1{ float: none; padding:0; margin: 0; border:none; margin-top: -35px;}
.img-list3 .img-caption h2{ margin-top: 0px;}
.img-list3 .img-caption h2:before{ position: relative; content: ''; display: block; width: 1px; height: 50px; background-color: #666; margin: 8px auto;}
.img-box, .img-over-box { position: relative; display: block; text-align: center; overflow: hidden; }
.img-box img, .img-over-box img { width: 100%; height: auto; -ms-transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1000ms ease-out; -o-transition: all 1000ms ease-out; -moz-transition: all 1000ms ease-out; transition: all 1000ms ease-out; }
.img-box img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
a:hover .img-box img, a.img-box:hover img, a:hover .img-over-box img, .button-in .img-over-box:hover img { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }

.icon-box { color: #fff; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: alpha(opacity=0); opacity: 0; z-index: 1; }
.icon-box span { position: absolute; display: block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto; height: 60px; -moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); text-shadow: 0px 0px 4px rgba(0,0,0,0.9);}
.icon-box span:after { content: ''; display: block; text-align: center; font-size: 0.7em; }
.icon-box i { display: block; font-size: 5em; line-height: 50px; }
a:hover .icon-box, .button-in .img-over-box:hover .icon-box { filter: alpha(opacity=85); opacity: 0.85; background-position: right top; }
a:hover .icon-box i, .button-in .img-over-box:hover .icon-box i { font-size: 2em; }

.img-list3 a, .img-1-2, .img-1-3, .img-2-3, .img-2-2{ position: relative; display:block; float:left; margin-bottom:1%;}
.img-list3 .img-over-box, .img-list .img-over-box, .img-list3 .img-box{ width:95%; margin-left:5%;}
.img-list3, .img-list { display:block; overflow:hidden; width:100.8%; margin-left:-0.8%;}
.img-list3 a{width:33.3%;}
.img-1-2{width:50%;}
.img-2-2{ width:100%;}
.img-1-3{width:33.2%;}
.img-2-3{width:66.7%;}
.img-2-3 .img-box{ padding-bottom:66.4%;}
.img-2-2 .img-box{ width:99%; margin-left:1%; height:0; padding-bottom:33%;}

.swiper-img{ height: 600px; background-repeat: no-repeat; background-position: bottom center; background-size: 100% auto; }
.img-height-2{ height: calc(100vw * 0.453125); }
.img-height-2m{ height: calc(100vw * 0.697); }
.img-height-3{ height: calc(45.3vw * 1.5862); background-size: cover; }
.img-height-3m{ height: calc(100vw * 1.5862); background-size: cover; }
.img-height-4{ height: calc(54.6vw * 0.38095); background-size: cover; }
.img-height-4m{ height: calc(100vw * 0.506); background-size: cover; }
.img-height-5m{ height: calc(100vw * 0.66); }
.img-height-6{ height: calc(100vw * 0.46875); }
.img-height-6m{ height: calc(100vw * 0.66); }
.swiper-text{ position: absolute; left: 30px; bottom: 20px; font-size: 16px; font-weight: 400; color: #fff; letter-spacing: 2px; text-shadow: 3px 3px 7px #666; }
.hide-md { display: none; }

/*============button===============*/
.button-text { position: relative; display: inline-block; padding: 15px 8%; line-height: 20px; text-align: center; border: solid 1px #333; color: #ccc; background-color: #000; letter-spacing: 0.1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.button-text:hover { color: #000; background-color: #ccc;}
.button-text i {  margin-right: 8px;}

.button-top { position:absolute ; z-index: 6; bottom: 15px; right: 15px; width: 50px; height: 50px; line-height: 50px; font-size: 24px; text-align: center; color:#999; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: solid 1px #333;}
.button-top:hover { background-color:#9ACA82; color: #000; bottom: 20px; }
#audio-button { position: fixed; right: 10px; top: 10px; z-index: 101; }
#audio-button a { display: block; width: 50px; padding-top: 5px; height: 45px; overflow: hidden; font-size: 0.8em; text-align: center; color: #fff; }
/*==============index==================*/
#index #footer{background-color: #000; z-index:100;}
#index .button-top { display:none;}
.index-box{ position:absolute; top:50%; margin-top:-300px; display:block; width:100%; text-align:center; z-index: 101;}
.index-logo{ width:80%; max-width:280px; margin-bottom: 40px;}
.index-box h1 { font-size: 1.6em; color:#fff; letter-spacing:0.1em; line-height: 1.6em; margin-bottom: 100px; -moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); text-shadow: 0px 0px 4px rgba(0,0,0,0.9);}
.logo-icon{width:80px; padding: 10px;}
.button-enter { color:#fff; width: 100%;}
.button-enter:hover{ color:#fff;}
#index { background:url('../images/index-img1.jpg') center center no-repeat; background-size: cover; overflow-y: hidden; }
#index .wrapper:before{ position: absolute; content: ''; display: block; width: 100%; height: 100%;  background: url('../images/index-bg.png') repeat; }
/*==============team==================*/
#team1 .title-content{ max-width:610px; }
#team1 .img-container{ max-width: 550px; float: right;}
/*==============location==================*/
#location3 .title-box{margin-top: 0px; margin-left: 7%;}
#location3 .grid-3-5 a{ width: 90%; float: right;}
.location-list{ background: url(../images/location-circle1.png) center center no-repeat; background-size: contain;}
.location-list a, .location-item { float:left; width:18%; margin:1%; text-align: center; overflow: hidden;}
.location-list a {filter: alpha(opacity=80); opacity: 0.8; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.location-list a:hover{ filter: alpha(opacity=100); opacity: 1;}
.location-item h2{ font-weight: bold; margin-top: 20%;}
/*==============architecture==================*/
.architecture-box{ margin: 0 auto; width: 80%;}
#architecture2 .grid-3-5 a{ width: 80%; float: right;}
#architecture2 .architecture-box{ max-width:300px; margin-top: 5%;}
#architecture5 .architecture-box{ max-width:460px; margin-top: 15%;}
#architecture4 .img-list3 a{ padding: 6% 0 8% 0;}
/*==============contact==================*/
#contact-header{ height: 600px !important;}
#contact1 .title-content{ max-width:550px; }
.contact-frame{ background-color: #28312E; padding-top: 70px; padding-bottom: 70px; }
.contact-info { margin-bottom: 30px; line-height: 2.5em;}
.contact-info p { position: relative; display:block; width: 100%; overflow: hidden; }
.contact-info p:before{ position: absolute; content: ''; display: block; background-color: #ccc; width: 100%; height: 1px; left: 80px; top: 50%;  filter: alpha(opacity=20); opacity: 0.2;}
.form-box{position: relative; display: block; width: 80%; margin: 0 auto;}
.form-box,.form-line{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.form-line{position: relative; display: block; width: 100%; height: 100%;padding: 20px;}
.form-box .form-title{position: absolute; display: block; left: 0; top:0; padding: 20px 10px 0px 20px; background: #ffdf56; z-index: 1;}
.form-box .title-en{font-size: 40px;line-height: 60px;}
.form-box .title-en big {font-size: 90px;}
.form-box h2{position: absolute; top:20px; right: 10px;font-size: 22px; letter-spacing: 0.1em;}

.map-frame { position: relative; display: block; width: 80%; margin: 0 auto; padding-top: 50px; padding-bottom: 100px; }
.contact-frame-left { float: left; position: relative; width: calc(40% - 20px); padding-left: 20px; }
.contact-frame-right { float: left; position: relative; width: 60%; }
/*==============form==================*/
form {position: relative; display: block; padding: 0 4vw 0 2vw; padding-bottom: 80px; color:#142D6A; font-size:16px; }
form .input-column,form .input-row{ position: relative; display: block; line-height:0; margin:0; padding: 0 10px; margin-bottom: 20px; width:100%;min-height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; border: 0; border-radius:0;}
form .input-row{ clear: both;}
form .input-column{float:left; width:49%; height: auto; margin-left: 1%;}
form .input-column.clear{margin-left: 0; margin-right: 1%;}
.hide-box {position: relative; display: block;width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: justify; padding:0 15px 15px 15px; line-height: 1.6em;}
.input-text{ position: relative; display: inline-block; min-height: 20px; line-height: 24px; margin:0 0 0 0; padding: 13px 0;}
form label { position: absolute; height: 50px; line-height: 50px; display: block;}
form input[type="text"], form input[type="password"], form select, form textarea, .input-box{ line-height: 20px; padding-top: 16px; padding-bottom: 14px; height: 50px; width: 100%; padding-left: 110px; background-color:transparent; border: solid 1px transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;color:#222;}
form textarea { height: 100px; line-height: 24px; padding-top: 8px;padding-left: 0px !important;}
form select {-webkit-appearance: none;-moz-appearance: none;appearance:none; line-height: 30px; padding:0; padding-left:110px;}
form select option { background-color: #282828; color:#fff;}
.input-box{ line-height: 26px; min-height: 50px; height:inherit; padding-top: 10px;}
form small { font-size: 16px;color:#142D6A; font-weight:bold; min-width: 15px; display: inline-block; }
form input[type="text"]:focus, form input[type="password"]:focus, form textarea:focus, form select:focus { background:transparent; border-bottom: solid 1px #fff;}
form input[type="text"].error, form input[type="password"].error, form textarea.error, form select.error { border-bottom: solid 1px #A08A70; }
.rand-img { position: absolute; right: 1px; bottom: 1px; width:100px; height:48px;cursor: pointer;}
input[type="button"], input[type="reset"], input[type="submit"], #submit{padding: 10px 20px; display: inline-block; text-align: center; font-weight: bold; cursor: pointer;background:#F8C64C; color:#122B6C; border-radius: 20px;}
input[type="button"]:hover, input[type="submit"]:hover,input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:focus, #submit:hover{background:#F8C64C; color: #122B6C;}
.input-button{float:right; margin-top: 15px;}
@-webkit-keyframes autofill { to {color: #fff; background: transparent;} }/*Change Chrome fill*/
input:-webkit-autofill {-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;}
.form-link{ color: #fff; text-decoration: underline;}
.form-link:hover{ text-decoration: none;}
/*============pswp===============*/
.pswp__bg { opacity: 0.85 !important; }
.pswp__caption__center { font-size: 15px !important; }
/*============jquery.fullPage===============*/
/*#fp-nav ul li a span {height: 2px; width: 2px; background: transparent; border: solid 3px #ccc; border-radius: 0;}
#fp-nav ul li a:hover span, #fp-nav ul li a.active:hover span {height: 4px; width: 4px; border-radius: 0;}
#fp-nav ul li a.active span {height: 2px; width: 2px; border-radius: 0; margin: -2px 0 0 -2px; -o-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform: rotate(45deg);}*/
/*============ie===============*/
.ie, #signin { position: fixed; display: block; top: 0; left: 0; z-index: 100; height: 100%; width: 100%; background: url(../images/bg-alpha.png) repeat; }
.ie div { position: relative; display: block; margin: 0 auto; margin-top: 3%; width: 90%; max-width: 600px; height: 300px; background-color: #fff; padding: 3%; border: solid 1px #ddd; }
.ie-close, #signin .button-close { position: absolute; display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px; }
#signin .button-close:hover { font-size: 1.4em; }
/*============googlemaps===============*/
#map_canvas{width:100%; height:500px;}
.googlemaps-labels , .googlemaps-infobox{ font-family: 'Noto Sans TC', sans-serif;}
.googlemaps-labels { color:#cc0000 ;font-size: 13px; font-weight: bold;white-space: nowrap; width:500px; text-align:center; margin-left:-250px;}
.googlemaps-infobox h1{ display:block; font-size:16px; margin: 3px 0; padding: 0px;}
.googlemaps-infobox a{ display:block; color:#06C;}
/*============mobile===============*/
#mobile .logo{ position: absolute; right: 30px; top:20px; margin:0;width: 150px; z-index: 10;}
#mobile #page-header{background-position: top center !important; background-image: url('../images/page-header-bg.jpg') !important; background-repeat: no-repeat !important; background-size: cover !important; background-color: #142D6A !important; height: calc(100vw * 0.5) !important; }
#mobile #page-map{background-position: top center !important; background-image: url('../images/page-map.jpg') !important; background-repeat: no-repeat !important; background-size: 100vw !important; height: calc(100vw * 0.4225) !important; }
#mobile #page-slide{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-1{background-position: top center !important; background-image: url('../images/page-title-bg-1.jpg') !important; background-size: 100vw !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-2{background-position: top center !important; background-image: url('../images/page-title-bg-2.jpg') !important; background-size: 100vw !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-3{background-position: top center !important; background-image: url('../images/page-title-bg-3.jpg') !important; background-size: 100vw !important; height: calc(99.3vw * 0.425) !important; }
#mobile #page-title-4{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; background-color: #122B6C !important; height: calc(99.3vw * 0.225) !important; }
#mobile #page-title-5{background-position: top center !important; background-image: url('../images/page-title-bg-5.jpg') !important; background-size: 100vw !important; height: calc(99.3vw * 0.7775) !important; }
#mobile #page-title-6{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-7{background-position: top center !important; background-image: url('') !important; background-size: cover !important; background-color: #000 !important; height: calc(99.3vw * 0.5615) !important; }
#mobile #page-title-8{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-9{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-10{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-11{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-12{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-13{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-14{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-15{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-16{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-17{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-title-18{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(99.3vw * 0.5) !important; }
#mobile #page-footer{background-position: top center !important; background-image: url('') !important; background-repeat: no-repeat !important; background-size: 100vw !important; height: calc(99.3vw * 0.4) !important; }
#mobile #page-contact{background-position: bottom center !important; background-image: url('../images/page-footer-bg.jpg') !important; background-size: cover !important; height: calc(100vw * 0.35) !important; }
.map-guide{border:0; width: 100%; height: 100vh; margin-top: 10vh;}

.open_video{width: 100vw; height: 56.25vw;}

@media screen and (max-width: 1400px) {
#header { width: 200px;}
#nav li a em {font-size: 24px;}
#header.sticky.active a.icon-nav {right: 210px;}
h1 { font-size: 1.875em;}
h2 { font-size: 1.4em;}
h3 { font-size: 1.25em;}
.title-en{ font-size:40px; line-height: 35px;}
.title-en big{ font-size:110px;} 
.text-en2{font-size:48px; } 
#team1 .title-box h1 { letter-spacing: 0;}
.title-box { margin-top: -260px;}
.img-caption h1{ font-size: 45px; line-height: 45px;}
.img-caption h2{ font-size: 20px;}
.img-caption {font-size: 15px;}
}
@media screen and (max-width: 1150px) {
.footer-img{ display: none; }
.footer-info {float: none; text-align: center;}
.img-caption h1{ font-size: 35px; line-height: 40px;}
.img-caption h2{ font-size: 18px;}
#location3 .grid-2-5{ width: 50%;}
#location3 .grid-3-5{ width: 50%;}
#architecture2 .grid-3-5 a { width: 90%;}
}
@media screen and (max-width: 980px),(max-height: 580px) {
/*============nav===============*/
#header{ right: -250px;}
#header a.icon-nav { right: 2%;}
#header.active a.icon-nav, #header.sticky.active a.icon-nav {right: 210px;}
}
@media screen and (max-width: 930px) {
/*============main===============*/
.wrapper { min-height: 100%; width: 100%; position: relative; margin: 0 auto; }
.grid-large, .grid-middle, .grid-small, .grid-content { width: 80%; max-width: 600px; }
.grid-1-5, .grid-2-5, .grid-3-5, .grid-4-5, .grid-3-7, .grid-4-7{ float: none; width: 100%; }
#location3 .grid-2-5, #location3 .grid-3-5{width: 100%; }
.title-content{ width: 100%;}
.section { padding: 30px 0;}
.section-large { padding: 30px 0;}
.tablet-hide, li.tablet-hide{ display: none; }
/*============page images===============*/
.page-img-header { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1.6) !important; }
	
.page-img-1-1 { float: left; position: relative; width: 100%; }
.page-img-1-2 { float: left; position: absolute; width: 100%; z-index: 4; }
.page-img-1 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1.576) !important; }
	
.page-img-2-1 { float: left; position: relative; width: 100%; }
.page-img-2-2 { float: left; position: absolute; width: 100%; height: calc(100vw * 0.563); top: calc(100vw * 1.8 * 0.165); z-index: 4; }
.page-img-2 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.563) !important; }

.page-img-3-1 { float: left; position: relative; width: 100%; }
.page-img-3-2 { float: left; position: absolute; width: 100%; height: calc(100vw * 1); z-index: 3; }
.page-img-3 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1) !important; }
#page-title-3 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; left: 15px; bottom: 15px; text-align: left; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-img-4-1 { float: left; position: relative; width: 100%; }
.page-img-4-2 { float: left; position: absolute; width: 100%; height: calc(100vw * 0.56); z-index: 4; }
.page-img-4 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.56) !important; }

.page-img-5-1 { float: left; position: relative; width: 100%; }
.page-img-5-2 { float: left; position: relative; width: 100%; }
.page-img-5 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1.313) !important; }
	
.page-img-6-1 { float: left; position: relative; width: 100%; }
.page-img-6-2 { float: left; position: relative; width: 100%; margin-top: -21px; }
.page-img-6 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1.28125) !important; }
#page-title-6 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; margin-right: 15px; top: calc(100vw * 1.245); text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }
	
.page-img-7-1 { float: left; position: relative; width: 100%; height: calc(100vw * 1.6); }
.page-img-7-2 { float: left; position: relative; width: 100%; height: calc(100vw * 1.6); }
.page-img-7 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1.015625) !important; }
#page-title-7 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; margin-right: 15px; top: calc(100vw * 0.985); text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }

.page-img-8-1 { float: left; position: relative; width: 100%; }
.page-img-8-2 { float: left; position: absolute; width: 81.212%; height: calc(81.212vw * 0.91324); top: calc(100vw * 1.576 * 0.33429); left: 10.4%; z-index: 4; }
.page-img-8 { background-position: top center !important; background-size: 100% !important; height: calc(81.212vw * 0.91324) !important; }
#page-title-8 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; left: 15px; bottom: 15px; text-align: left; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }
    
.page-img-9-1 { float: left; position: relative; width: 100%; }
.page-img-9-2 { float: left; position: relative; width: 100%; }
.page-img-9 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1.5390625) !important; }
#page-title-9 .photo-title-1 { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; margin-left: 0; top: calc(100vw * 1.45); right: 4.75vw; text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); z-index: 5;}
#page-title-9 .photo-title-2 { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; margin-left: 0; top: calc(100vw * 0.685); right: 4.75vw; text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); z-index: 5;}
    
.page-img-10-1 { float: left; position: relative; width: 100%; }
.page-img-10-2 { float: left; position: relative; width: 100%; z-index: 2; }
.page-img-10 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1.77777) !important; }
#page-title-10 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; margin-left: 0; top: calc(100vw * 1.18); right: 4.75vw; text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }
	
.page-img-11-1 { float: left; position: relative; width: 100%; }
.page-img-11-2 { float: left; position: relative; width: 100%; }
.page-img-11 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1.77777) !important; }
#page-title-11 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; margin-left: 0; top: calc(100vw * 1.258); right: 4.75vw; text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }
	
.page-img-12-1 { float: left; position: relative; width: 100%; }
.page-img-12-2 { float: left; position: relative; width: 100%; height: calc(100vw * 0.5627); margin-top: calc(100vw * 0.585); left: 0; }
.page-img-12-3 { float: left; position: relative; width: 100%; height: calc(100vw * 0.5627); bottom: -1vh; }
.page-img-12 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.5627) !important; }
#page-title-12 .photo-title-1 { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; margin-left: 0; top: calc(100vw * 0.495); right: 4.75vw; text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); z-index: 5;}
#page-title-12 .photo-title-2 { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: absolute; margin-left: 0; top: calc(100vw * 1.13); right: 4.75vw; text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); z-index: 5;}
#page-title-12 .photo-title-3 { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; margin-left: 0; top: calc(100vw * 1.715); right: 4.75vw; text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); z-index: 5;}
	
.page-img-13-1 { float: left; position: relative; width: 100%; }
.page-img-13-2 { float: left; position: relative; width: 100%; z-index: 2; }
.page-img-13 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1) !important; }
#page-title-13 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; margin-right: 15px; top: calc(100vw * 1.78); text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }
	
.page-img-14-1 { float: left; position: relative; width: 100%; }
.page-img-14-2 { float: left; position: relative; width: 100%; margin-top: -22px; left: 0; }
.page-img-14 { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 0.7288) !important; }
#page-title-14 .photo-title { font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', sans-serif; position: relative; margin-right: 15px; top: calc(100vw * 0.705); text-align: right; color: #fff; font-size: 0.9rem; -webkit-text-size-adjust: 100%; font-weight: 500; text-shadow:2px 2px 4px #666; transform: scale(1); }
	
.page-contact-img-1 { float: left; position: relative; width: 100%; }
.page-contact-img-2 { float: left; position: relative; width: 100%; right: auto; top: auto; }
	
.privacy-text { margin-top: 50px; color: #222; font-size: 12px; line-height: 20px; }
	
.page-news-1 { float: left; position: relative; width: 100%; }
.page-news-2 { float: left; position: relative; width: 100%; }
.page-news { background-position: top center !important; background-size: 100% !important; height: calc(100vw * 1) !important; }

.page-small-image-1 { width: 66vw; right: 0; }
.page-small-image-2 { width: 66vw; left: 16.5vw; top: calc(100vw * 1.778666 * 0.185); }

#mobile #page-header{background-position: top center !important; background-image: url('../images/page-header-bg-m.jpg') !important; background-repeat: no-repeat !important; background-size: cover !important; background-color: #142D6A !important; height: calc(100vw * 1.8) !important; }
#mobile #page-map{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; height: calc(100vw * 1.1) !important; }
#mobile #page-slide{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; height: calc(100vw * 1.778666) !important; }
#mobile #page-title-1{background-position: top center !important; background-image: url('../images/page-title-bg-1-m.jpg') !important; background-size: 100vw !important; height: calc(100vw * 1.8) !important; }
#mobile #page-title-2{background-position: top center !important; background-image: url('../images/page-title-bg-2-m.jpg') !important; background-size: 100vw !important; height: calc(100vw * 1.8) !important; }
#mobile #page-title-3{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; background-color: #F8C64C !important; height: calc(100vw * 0.765) !important; }
#mobile #page-title-4{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; background-color: #fff !important; height: calc(100vw * 0.56) !important; }
#mobile #page-title-5{background-position: top center !important; background-image: url('../images/page-title-bg-5-m.jpg') !important; background-size: 100vw !important; height: calc(100vw * 1.035) !important; }
#mobile #page-title-6{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; height: calc(100vw * 1.576) !important; }
#mobile #page-title-7{background-position: top center !important; background-image: url('') !important; background-size: cover !important; background-color: #000 !important; height: calc(100vw * 0.5615) !important; }
#mobile #page-title-8{background-position: top center !important; background-image: url('') !important; background-size: 100vw !important; height: calc(100vw * 1.576) !important; }
#mobile #page-title-9{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(100vw * 1.6) !important; }
#mobile #page-title-10{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(100vw * 1.77777) !important; }
#mobile #page-title-11{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(100vw * 1.77777) !important; }
#mobile #page-title-12{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(100vw * 1.77777) !important; }
#mobile #page-title-13{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(100vw * 1.77777) !important; }
#mobile #page-title-14{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(100vw * 1.77777) !important; }
#mobile #page-title-15{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(100vw * 1.77777) !important; }
#mobile #page-title-16{background-position: top center !important; background-image: url('') !important; background-size: cover !important; background-color: #b2a69e !important; height: calc(100vw * 1.77777) !important; }
#mobile #page-title-17{background-position: top center !important; background-image: url('') !important; background-size: cover !important; background-color: #e5e0d0 !important; height: calc(100vw * 1.77777) !important; }
#mobile #page-title-18{background-position: top center !important; background-image: url('') !important; background-size: cover !important; height: calc(100vw * 1.77777) !important; }
#mobile #page-footer{background-position: top center !important; background-image: url('') !important; background-repeat: no-repeat !important; background-size: cover !important; height: calc(100vw * 1.6) !important; }
#mobile #page-contact{background-position: bottom center !important; background-image: url('') !important; background-size: cover !important; background-color: #142D6A !important; height: calc(100vw * 2.6) !important; }
	
#mobile #page-news{background-position: top center !important; background-image: url('') !important; background-color: #f5f2eb !important; background-size: 100% !important; margin-left: 0 !important; width: 100vw !important; height: calc(100vw * 1.3) !important; }
	
.mobile-hide, li.mobile-hide{ display:none;}
.desktop-hide, li.desktop-hide{ display:block;}
	
.info-text { margin-left: 6vw; margin-top: 4vh; }
.contact-title { width: 60vw; }
	
.contact-imagewidth{ width: 80%; }
	
.open_video{width: 100vw; height: 100vw;}
/*============footer===============*/
.footer-title { font-size: 20px; }
.content-title { height: 50vh; }
.content-subtitle { height:calc(50vh / 4); }
.img-alert { top: -25px; font-size: 16px; line-height: 20px; letter-spacing: 2px; text-shadow: black 0.1em 0.1em 0.2em; }
.img-header-overlay{ top: 0; }
.img-footer-overlay{ top: 30vh; }
/*==============other==================*/
#team1 .img-container{ width: 90%; max-width:400px; margin-top: 50px;}
#location3 .title-box { margin-left: 0;}
#location3 .grid-3-5 a {margin-bottom:40px;}
.location-list a { width: 31%; margin: 1%;}
.location-item{ width: 100%; margin: 5% 0;}
.location-item h2{margin-top: 0;}
.location-list{ background: url(../images/location-circle2.png) center center no-repeat; background-size: contain;}
#architecture2 .grid-3-5 a { width: 100%;float:none;}
.img-list3 .img-caption h2:before{ height: 30px;margin: 5px auto;}
#architecture5 .architecture-box {margin-top: 0;}
/*==============form==================*/
form{font-size: 16px; padding: 0 30px;}

.form-box{position: relative; display: block; width: 85%; margin: 0 auto; margin-bottom: 30px; }
	
form .input-column{width: 100%; margin: 0 0 15px !important;float: none;}
	
form .input-column,form .input-row{ position: relative; display: table; overflow:auto; line-height:0; margin:0; padding: 0 10px; margin-bottom: 20px; width:100%;min-height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; border: 0; border-radius:0;}
}
@media screen and (max-width: 600px) {
/*============footer===============*/
.footer-info { font-size: 15px; }
/*==============main==================*/
h1 { font-size: 1.5em;}
h2 { font-size: 1.25em;}
h3 { font-size: 1.125em;}
p,.img-caption2{ font-size: 1em;}
.title-box h1{letter-spacing: 0;line-height: 1.3em;}
.title-en{ font-size:30px; line-height: 30px;}
.title-en big{ font-size:80px;} 
.text-en2{font-size:36px; } 
.text-en br{ display: none;}
.title-box { margin-top: -230px;}
.img-caption h1{ font-size: 30px;padding: 0 10px 0 15px;margin-right: 10px;}
.button-top { display:none;}
/*==============other==================*/ 
#contact-header {height: 500px !important;}
#architecture4 .img-list3 a{ width: 100%;}
#architecture4 .img-list3  .img-over-box { margin: 0; width: 100%;}
/*==============form==================*/
.form-box .title-en{font-size: 25px;line-height: 45px;}
.form-box .title-en big { font-size:60px;}
.form-box h2{font-size: 18px;top: 10px;}
.form-box{padding: 0;}
.form-line{padding: 0;}
.form-box .form-title{padding: 10px 10px 0px 15px;}
form input[type="text"], form input[type="password"], form select, form textarea, .input-box{padding-left: 90px;}
.input-button{float:right;}
input[type="submit"], #submit{display: block;}
}

#map-container {
	width: 100%;
	height: 75vh;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0,0,0,0.20);
}

#drag-map {
	cursor: move;
	position: relative;
	width: 300%;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
}

.swiper-button-next, .swiper-button-prev {
	--swiper-navigation-color: #D7CCB9;
}

.swiper-container .swiper-button-prev {
	left: 1vw;
	top: 50%;
	z-index: 5;
}

.swiper-container .swiper-button-next {
	right: 1vw;
	top: 50%;
	z-index: 5;
}

.swiper-button-prev {
	left: 1vw;
	top: 45%;
}

.swiper-button-next {
	right: 1vw;
	top: 45%;
}

.swiper-horizontal>.swiper-pagination-bullets {
    bottom: 21px;
}

.swiper-pagination-white {
    --swiper-pagination-color: #fff;
}

.swiper-pagination-bullet {
	width: 12px;
	height: 12px;
}