@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;700&family=Noto+Sans+TC:wght@100;300;400;500&family=Roboto+Flex:opsz,wght@8..144,200&display=swap');
@import url("icofont/icofont.min.css");
@import url("animate-custom.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, construction, section, source, video, main { 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; border-radius:0;}
img {image-rendering:-webkit-optimize-contrast; /*fixd Chrome Img Blur*/-webkit-backface-visibility: hidden; -ms-transform: translateZ(0);-webkit-transform: translateZ(0);transform: translateZ(0);}
:lang(en){overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto; hyphens: auto;}
/*============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, .hidden, a:before, a:after, input, textarea, select, a i, a b, b:before, strong:before, .justified-gallery > a > .caption, .justified-gallery > a > .caption.caption-visible, .img-over-box:after, .img-box:after, .img-gray .img-box, .swiper-button-next, .swiper-button-prev, .subnav, .subnav div,.nav-toggle span ,.nav-toggle span:before ,.nav-toggle span:after, .content-navbar, .html-button, #nav li div, a .text-more:after, a .text-more:before, .index-title a p:after{ -webkit-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; transition: all 250ms ease-in; }
.img-bg:after,.share-button, .bg-caption, .title-box, .button-icon2 em, .button-icon2 b, .index-box{ -webkit-transition: opacity 200ms ease-in; -o-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; }
.transition-1s, .img-box img, .img-over-box img, .justified-gallery img, .img-list img{ -webkit-transition: -webkit-transform 1000ms ease-out !important; -o-transition: -o-transform 1000ms ease-out !important; -moz-transition: -moz-transform 1000ms ease-out !important; transition: transform 1000ms ease-out !important;}
img.img-hover{ -webkit-transition: all 500ms ease-in !important; -o-transition: all 500ms ease-in !important; -moz-transition: all 500ms ease-in !important; transition: all 500ms ease-in !important; }
.nav-toggle, .back-box,.full-box .img-box, #nav, .img-fadein .img-box{ -webkit-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; -moz-transition: all 500ms ease-in; transition: all 500ms ease-in;}
.transition-5s{ -webkit-transition: all 5000ms ease-out; -o-transition: all 5000ms ease-out; -moz-transition: all 5000ms ease-out; transition: all 5000ms ease-out;}
.computer .hover-zoom a:hover, .computer a:hover .img-box img, .computer .img-box a:hover img, .computer a:hover .img-over-box img, .computer .justified-gallery a:hover img, .computer .img-list a:hover img{-ms-transform: scale3d(1.1,1.1,1);-webkit-transform: scale3d(1.1,1.1,1);-moz-transform: scale3d(1.1,1.1,1);-o-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);}
.computer .hover-zoom2 a:hover{-ms-transform: scale3d(1.05,1.05,1);-webkit-transform: scale3d(1.05,1.05,1);-moz-transform: scale3d(1.05,1.05,1);-o-transform: scale3d(1.05,1.05,1);transform: scale3d(1.05,1.05,1);}
.computer a.button-icon2:hover i, .computer .button-icon2 a:hover i, .header-icon a:hover{-ms-transform: scale3d(1.25,1.25,1);-webkit-transform: scale3d(1.25,1.25,1);-moz-transform: scale3d(1.25,1.25,1);-o-transform: scale3d(1.25,1.25,1);transform: scale3d(1.25,1.25,1);}
.page a:hover, #submit:hover, #submitBtn:hover, #reset:hover, .hover-move a:hover, a.hover-move:hover, /*.underline a:hover,*/ .button-text a:hover , a.button-text:hover, .category-list a:hover{-ms-transform: translate3d(2px,2px,0); -moz-transform: translate3d(2px,2px,0); -webkit-transform: translate3d(2px,2px,0); -o-transform: translate3d(2px,2px,0); transform: translate3d(2px,2px,0);}
.hover-move a, a.hover-move/*, .underline a*/{/*display: inline-block;*/max-width: 100%;}
.hover-move.block a, a.hover-move.block, .computer .hover-zoom a, .computer .hover-zoom2 a{display: block;}
.hidden { opacity: 0;opacity:1\9\0;}
.visible { opacity: 1; }
.fade { display: none; }
.pause{-ms-animation-play-state: paused; -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;}
.running{-ms-animation-play-state:running; -moz-animation-play-state:running; -webkit-animation-play-state:running; -o-animation-play-state:running; animation-play-state:running;}
.notransition, .notransition:after { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important;}
.delay-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-2 { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; animation-delay: .6s; }
.delay-3 { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; animation-delay: .9s; }
.delay-4 { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s; }
.delay-5 { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; }
/*.delay-list li{ opacity: 0;opacity:1\9\0; -webkit-animation: fadeInUp 0.9s 1;  animation: fadeInUp 0.9s 1;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;}
.delay-long-list li{ opacity: 0;opacity:1\9\0; -webkit-animation: fadeInUp 1.5s 1;  animation: fadeInUp 1.5s 1;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;}*/
.delay-list > li:nth-child(12n+1), .delay-list > div:nth-child(12n+1), .delay-list > a:nth-child(12n+1) {-webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}
.delay-list > li:nth-child(12n+2), .delay-list > div:nth-child(12n+2), .delay-list > a:nth-child(12n+2) {-webkit-animation-delay: 0.4s;  animation-delay: 0.4s;}
.delay-list > li:nth-child(12n+3), .delay-list > div:nth-child(12n+3), .delay-list > a:nth-child(12n+3) {-webkit-animation-delay: 0.6s;  animation-delay: 0.6s;}
.delay-list > li:nth-child(12n+4), .delay-list > div:nth-child(12n+4), .delay-list > a:nth-child(12n+4) {-webkit-animation-delay: 0.8s;  animation-delay: 0.8s;}
.delay-list > li:nth-child(12n+5), .delay-list > div:nth-child(12n+5), .delay-list > a:nth-child(12n+5) {-webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-list > li:nth-child(12n+6), .delay-list > div:nth-child(12n+6), .delay-list > a:nth-child(12n+6) {-webkit-animation-delay: 1.2s;  animation-delay: 1.2s;}
.delay-list > li:nth-child(12n+7), .delay-list > div:nth-child(12n+7), .delay-list > a:nth-child(12n+7) {-webkit-animation-delay: 1.4s;  animation-delay: 1.4s;}
.delay-list > li:nth-child(12n+8), .delay-list > div:nth-child(12n+8), .delay-list > a:nth-child(12n+8) {-webkit-animation-delay: 1.6s;  animation-delay: 1.6s;}
.delay-list > li:nth-child(12n+9), .delay-list > div:nth-child(12n+9), .delay-list > a:nth-child(12n+9) {-webkit-animation-delay: 1.8s;  animation-delay: 1.8s;}
.delay-list > li:nth-child(12n+10), .delay-list > div:nth-child(12n+10), .delay-list > a:nth-child(12n+10) {-webkit-animation-delay: 2.0s;  animation-delay: 2.0s;}
.delay-list > li:nth-child(12n+11), .delay-list > div:nth-child(12n+11), .delay-list > a:nth-child(12n+11) {-webkit-animation-delay: 2.2s;  animation-delay: 2.2s;}
.delay-list > li:nth-child(12n+12), .delay-list > div:nth-child(12n+12), .delay-list > a:nth-child(12n+12) {-webkit-animation-delay: 2.4s;  animation-delay: 2.4s;}
.delay-long-list > li:nth-child(6n+1), .delay-long-list > div:nth-child(6n+1) {-webkit-animation-delay: 0.1s;  animation-delay: 0.1s;}
.delay-long-list > li:nth-child(6n+2), .delay-long-list > div:nth-child(6n+2) {-webkit-animation-delay: 0.5s;  animation-delay: 0.5s;}
.delay-long-list > li:nth-child(6n+3), .delay-long-list > div:nth-child(6n+3) {-webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-long-list > li:nth-child(6n+4), .delay-long-list > div:nth-child(6n+4) {-webkit-animation-delay: 1.5s;  animation-delay: 1.5s;}
.delay-long-list > li:nth-child(6n+5), .delay-long-list > div:nth-child(6n+5) {-webkit-animation-delay: 2.0s;  animation-delay: 2.0s;}
.delay-long-list > li:nth-child(6n+6), .delay-long-list > div:nth-child(6n+6) {-webkit-animation-delay: 2.5s;  animation-delay: 2.5s;}
.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%;}
.animation-group{position:relative;}
.animation-group img{position: absolute; width: 100%; height: 0;top:0;left: 0;}
.animation-group img:first-child{position: relative;}
.animation-group.img-box img:first-child{position: absolute;}
.particles { position:absolute; width: 100%; height: 100%; top:0; left: 0; z-index: 0;}
/*============iframe===============*/
.iframe-16x9,.plyr__video-embed{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.iframe-4x3 { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
.iframe-16x9 iframe, .iframe-4x3 iframe, .plyr__video-embed iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/*==============text-ver==================*/
.text-ver{ 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; white-space: nowrap;}
.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; }
/*============grids===============*/
.grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid { width: 80%; margin: 0 auto; position: relative; }
.grid-full{width: 96%; margin: 0 auto; position: relative;}
.grid-max { max-width: 1440px;}
.grid-large { max-width: 1200px;}
.grid-middle { max-width: 1000px;}
.grid-small { max-width: 700px;}
.grid-min { max-width: 550px;}
.flex-max, .flex-large, .flex-middle, .flex-small, .flex-min{width: 100%;position: relative;}
.flex-max{max-width: 1280px;}
.flex-large{max-width: 700px;}
.flex-middle{max-width: 550px;}
.flex-small{max-width: 480px;}
.flex-min{max-width: 380px;}
.grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12, .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12, .grid-9-12, .grid-10-12, .grid-11-12, .grid-3-8, .grid-5-8, .grid-1-2,.grid-1-5,.grid-4-5,.grid-3-10,.grid-6-10 { float: left; display: block; position: relative; }
.grid-1-12, .flex-1-12 { width: 8.3%; }
.grid-2-12, .flex-2-12 { width: 16.6%; }
.grid-3-12, .flex-3-12 { width: 25%; }
.grid-4-12, .flex-4-12 { width: 33.3%; }
.grid-5-12, .flex-5-12 { width: 41.6%; }
.grid-6-12, .flex-6-12 { width: 50%; }
.grid-7-12, .flex-7-12 { width: 58.3%; }
.grid-8-12, .flex-8-12 { width: 66.6%; }
.grid-9-12, .flex-9-12 { width: 75%; }
.grid-10-12, .flex-10-12 { width: 83.3%; }
.grid-11-12, .flex-11-12 { width: 91.6%; }
.grid-3-8, .flex-3-8 { width: 38%; }
.grid-5-8, .flex-5-8 { width: 62%; }
.grid-1-5, .flex-1-5 { width: 20%; }
.grid-4-5, .flex-4-5 { width: 80%; }
.grid-1-2, .flex-1-2 { width: 47%; }
.grid-3-10, .flex-3-10 { width: 30%; }
.grid-6-10, .flex-6-10 { width: 60%; }
.grid-space-right,.grid-space-left,.grid-space-right-small,.grid-space-left-small{ box-sizing: border-box;}
.grid-space-right-small{padding-right: 3%;}
.grid-space-left-small{padding-left: 3%;}
.grid-space-right{padding-right: 5%;}
.grid-space-left{padding-left: 5%;}
.grid-right{ float: right;}
.flex-container, .flex-top, .flex-bottom, .flex-center, .flex-stretch, .flex-left, .flex-right, .flex-center-justify, .flex-between, .flex-around, .flex-evenly, .flex-wrap{display: flex;}
.flex-top{ align-items: flex-start;}
.flex-bottom{ align-items: flex-end;}
.flex-center{ align-items: center;}
.flex-stretch{ align-items: stretch;}
.flex-left{ justify-content: flex-start;}
.flex-right{ justify-content: flex-end;}
.flex-center-justify{ justify-content: center;}
.flex-between{justify-content: space-between;}
.flex-around{justify-content: space-around;}
/*.flex-evenly{justify-content: space-evenly;}*//*IE11X*/
.flex-wrap{flex-wrap:wrap;}
.flex-space-right{padding-right: 8.3%;}
.flex-space-left{padding-left: 8.3%;}
.flex-space-right-big{padding-right: 16.6%;}
.flex-space-left-big{padding-left: 16.6%;}
.flex-reverse, .flex-reverse-list .flex-center:nth-child(even){flex-direction:row-reverse;}
.flex-column{flex-direction: column;}
.flex-shrink0{flex-shrink:0;}
.flex-shrink1{flex-shrink:1;}
.img-1-2,.img-1-3,.img-2-3,.img-2-5,.img-3-5,.img-3-7,.img-4-7{position:relative;/* box-sizing: border-box;*/}
.img-margin{display: flex; width: auto;margin: -10px;}
.img-margin+.img-margin{margin-top: 10px;}
.img-margin .img-1-2, .img-margin .img-1-3, .img-margin .img-2-3, .img-margin .img-2-5, .img-margin .img-3-5, .img-margin .img-3-7, .img-margin .img-4-7{ padding:10px;}
.img-margin-bottom{margin-bottom:20px;}
.img-margin-top{margin-top:20px;}
.img-1-2{width: 50%;}
.img-1-3{width: 33.3%;}
.img-2-3{width: 66.6%;}
.img-2-5{width: 40%;}
.img-3-5{width: 60%;}
.img-3-7{width: 43%;}
.img-4-7{width: 57%;}
.img-margin .img-box{height: 100%;}
/*============style===============*/
body{font-size: 1em; word-wrap: break-word; word-break: break-word; overflow-x: hidden; color:#333;}
p, .text0, .html-edit{ font-size: 1em; line-height:1.875em; letter-spacing: 0.2em; font-weight: 300;}
p span, h1 span, h2 span, h3 span, li span, b span, em span, .inline-br, .text-break span, .text0 span{ display: inline-block;max-width: 100%; }
.text-break span{margin-right: 0.2em;}
::selection { background: #001d35; color: #fff;}
a { color: #333; }
a:hover {color: #001d35;}
.bg-dark a{color: #ddd;}
.bg-dark a:hover{color: #fff;}
p a, a.link-line{ text-decoration:none;border-bottom: solid 1px;}
p a:hover, a.link-line:hover {border-bottom: solid 1px #d49652;}
strong { font-weight: bold; }
em, i { font-style: normal; }
big { font-size: 1.125em; }
small { font-size: 0.9375em; }
h1,h2,h3,h4, h5, h6 { font-size: 1em;}
body, .body-font{ font-family:"Noto Sans TC", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "儷黑 Pro", "LiHei Pro", sans-serif;}
.en-font, em, .page, .input-button span, .index-box:after, .text-more:after, .button-top, .content-button, .swiper-next, .swiper-prev, .swiper-pagination{font-family: "Frank Ruhl Libre", Times,"Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;font-weight:700;}
.en-font{font-weight:bold;}
h1, h2, h3{color: #001d35;}
.bg-dark h1, .bg-dark h2, .bg-dark h3{color: #ddd;}
h1,h2,strong { font-weight: 500;}
.title1,.title2,.title3,.title4,.title5,.title6{display: block;line-height: 1.3em;letter-spacing:0.025em;font-weight: 500;}
.title1{font-size: 3em;} 
.title2{font-size: 2.25em;} 
.title3{font-size: 1.875em;} 
.title4{font-size: 1.5em;}
.title5{font-size: 1.25em;}
.title6{font-size: 1.125em;}
h1+h2, h2+h3{margin-top: 3px;}
.subtitle1, .subtitle2, .subtitle3{line-height: 1.6em;letter-spacing:0.3em;margin-right: -0.3em;}
.subtitle1{font-size: 1.08em;}
.subtitle2{font-size: 1em;}
.subtitle3{font-size: 15px;}
.text1,.text2{font-size: 1em;line-height: 1.6em;font-weight: 300;}
.text1{letter-spacing: 0.1em;margin-right: -0.1em;}
.text2{letter-spacing: 0.2em;margin-right: -0.2em;}
.text-small{ font-size:0.9375em;line-height:1.875em; letter-spacing: 0.2em; font-weight: 300;}
.text-small:empty{display: none;}
.text-en1, .text-en2{font-size:12px;line-height: 1.5em;font-weight: bold;}
.text-en1{letter-spacing: 0.1em;}
.text-en2{letter-spacing: 0.2em;}
.text-en3, .footer-nav li em, .input-button span, .button-icon2 em, .button-icon-text em{display: inline-block;font-size:12px;line-height: 1.8em;letter-spacing: 0.4em;-ms-transform: scale3d(.8,.8,.8);-webkit-transform: scale3d(.8,.8,.8);-moz-transform: scale3d(.8,.8,.8);-o-transform: scale3d(.8,.8,.8);transform: scale3d(.8,.8,.8); transform-origin: left center; }
.text-spacing0{letter-spacing:0em !important;}
.text-spacing1{letter-spacing:0.05em !important;}
.text-spacing2{letter-spacing:0.1em !important;}
.text-spacing3{letter-spacing:0.2em !important;}
p span.text-spacing0, p span.text-spacing1, p span.text-spacing2, p span.text-spacing3{display: inline;}
.text-block{display:block;}
.color-white { color: #ddd; }
.color-black {color: #000;}
.color-gray1 { color: #333;}
.color-gray2 { color: #666;}
.color-gray3 { color: #888;}
.color-gray4 { color: #aaa;}
.color1 { color: #001d35 !important;}
.color2 { color: #d49652 !important;}
.line-spacing p{margin-bottom: 20px;}
.paragraph p,.paragraph ul,.paragraph ol{margin-bottom: 10px;}
.list-disc li { list-style-type: disc; }
.list-decimal li { list-style-type: decimal; }
.list-decimal li, .list-disc li { margin-left: 25px; }
.text-ellipsis, .title-box em, .footer-nav li strong, .footer-nav li em, .classic-list h2, .classic-list h3, .classic-title h1, .classic-title h2, .project-list h2, .project-list h3, .team-list h2, .team-list h3, .other-list h3{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%;display: block; }
.text-nowrap{ white-space: nowrap;}
.offscreen{position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);padding: 0;border: 0;height: 1px;width: 1px;overflow: hidden;}
.text-justify,.line-spacing p{text-align:justify;}
.align-left{ float: left;}
.align-right{ float: right;}
.align-center{ margin: 0 auto;}
.text-normal{font-weight: normal;}
.text-bold{ font-weight: bold;}
.text-light{font-weight: 300;}
.text-left{ text-align: left;}
.text-right{ text-align: right;}
.text-center{ text-align:center;}
.text-top{margin-top:10px;}
.text-bottom{margin-bottom:10px;}
.text-top2{margin-top:20px;}
.text-bottom2{margin-bottom:20px;}
.text-top3{margin-top:30px;}
.text-bottom3{ margin-bottom: 30px;}
.box-top{margin-top:40px;}
.box-bottom{ margin-bottom: 40px;}
.box-top2{margin-top:50px;}
.box-bottom2{ margin-bottom: 50px;}
.box-top3{margin-top:60px;}
.box-bottom3{ margin-bottom: 60px;}
.section-top{ margin-top: 70px;}
.section-bottom{ margin-bottom: 70px;}
.section-top2{ margin-top: 100px;}
.section-bottom2{ margin-bottom: 100px;}
.section-top3{ margin-top: 140px;}
.section-bottom3{ margin-bottom: 140px;}
.no-top{margin-top:0!important;}
.no-bottom{margin-bottom:0!important;}
.text-line-right span{display: inline-block;position: relative; margin-right: 10px;padding-right: 10px;}
.text-line-right span:after {content: "";display: block;position: absolute;right: 0; top: 50%; margin-top: -0.5em;width: 1px;height: 1em;background: #ddd;}
.text-line-horizontal{position: relative; display: inline-block;}
.text-line-horizontal:after {content: "";display: block;position: absolute;left: 100%; top: 50%;width: 1500px;height:1px;background: #ddd;margin-left: 5px;}
/*============base===============*/
body, html { height: 100%; }
.wrapper{ min-height: 100%; width: 100%; position: relative; overflow: hidden; }
.main { position: relative; width: 100%;z-index:2; }
#footer { position: relative; width: 100%; z-index: 10; min-height: 380px;}
.wrapper .main{ padding-bottom: 380px;}
.wrapper+#footer{ margin-top: -380px;}
/*============nav===============*/
.logo { position:absolute; display: block; width: 285px;top: 40px; left:2.5%; z-index: 11;}
.logo:before{content: ""; position: relative;display: block;padding-bottom: 24.5%; background-image:url("../images/logo.png"); background-position: center center;background-repeat: no-repeat; background-size: contain;image-rendering:-webkit-optimize-contrast;}
.nav-light .logo:before, .bg-dark .logo:before{ background-image:url("../images/logo-w.png");}
#nav{position: fixed; z-index:-1;box-sizing: border-box;/*font-size: 0; */width: 100%;height: 100%; top: 0; left: 0;display: flex;align-items: center;justify-content: center;overflow: auto;background-color: rgba(0,29,53,.95); opacity: 0;}
body.active #nav{ opacity: 1;z-index:101;}
.nav-grid{display:block;width: 90%;text-align: center;}
#nav li a{position: relative; color: #ccc;}
#nav li {position: relative; display: block; margin-bottom: 25px;}
#nav li > a{ display:inline-block;}
#nav li strong{display: block; font-size:1em;letter-spacing: 0.6em; margin-right: -0.6em; font-weight: normal; line-height: 1.6em;}
#nav li em{display: block; font-size:2.25em; line-height: 1em;}
#nav li a:hover, #nav li.active > a, #nav .subnav div a.active{ color: #d49652;}
#nav .subnav > div{ position:relative;display:block;overflow: hidden;height: 0;opacity: 0;}
#nav li.active.subnav > div{/*height:42px;*/height:auto;opacity: 1; margin-top: 12px;}
#nav .subnav div a{ display:inline-block;font-size: 16px; line-height:40px;letter-spacing: 0.3em;margin-right: -0.3em;}
#nav .subnav div a:before{bottom: 0;}
body.active{overflow: hidden;}

.nav-toggle{position:fixed;display:block; right:2.5%; top:40px; width: 40px; height: 45px;z-index:5; cursor:pointer; color:#001d35; padding: 10px; margin-top: -10px;margin-right: -10px;}
.nav-toggle em{ display:inline-block;font-size: 12px;width: 12px;line-height: 12px;text-align: center;}
.nav-toggle span ,.nav-toggle span:before ,.nav-toggle span:after{ display:block;}
.nav-toggle span{ position: relative; float: right; top:0; right: 20%;border-left:solid 1px;width: 1px; height:100%;}
.nav-toggle span:before ,.nav-toggle span:after{ content:""; position:absolute;border-left:solid 1px; width: 1px; height:100%;top: 0;}
.nav-toggle span:before{ left:-.5em;}
.nav-toggle span:after{ right:-.5em;}
body.active .nav-toggle em{opacity: 0;}
body.active .nav-toggle span{ border-left:solid 1px transparent; transition:background .2s; right:50%;}
body.active .nav-toggle span:before{ left:0; transform:rotate(135deg); transition:top .2s .1s,transform .2s .6s; width: 100%;border-left:solid 1px #ddd;}
body.active .nav-toggle span:after{ right:0; transform:rotate(225deg);  transition:bottom .2s .1s,transform .2s .6s; border-left:solid 1px #ddd;}
body.sticky-page .nav-toggle{background:#001d35; color:#ddd;}
body.active .nav-toggle{background:none; z-index: 102;}
body.active .wrapper, body.active #footer, body.active .logo{ -webkit-filter:blur(2px);-moz-filter:blur(2px);-o-filter:blur(2px);-ms-filter:blur(2px);filter:blur(2px);}

.header-icon{position: absolute;top:40px;right: 2.5%;margin-right: 70px;z-index: 11;}
.header-icon a{position:relative;min-width:45px;height: 50px;line-height: 50px;float: left;display:block; text-align: center; color:#001d35;}
.header-icon i{font-size: 27px;line-height: 50px;}
#nav .header-icon{position: relative; top:auto; right:auto; margin-right:0;display: inline-block;margin-top: 5px; font-size: 0;}
body.active .header-icon{opacity: 0;}
body.active #nav .header-icon{opacity: 1;}

@media screen and (min-width: 601px) {
#nav .subnav > div div{display: inline-block; border-top:solid 1px #1c354b;border-bottom:solid 1px #1c354b;}
#nav .subnav div a{margin-left: 25px;}
#nav .subnav div a:after{content:"．";position: absolute;left: 100%;top:0;}
#nav .subnav div a:hover:after{color:#ddd;}
#nav .subnav div a:first-child{margin-left: 0;}
#nav .subnav div a:last-child:after{display: none;}
#nav .subnav div a:hover:before, #nav .subnav div a.active:before{width:calc(100% - 0.3em);}
}
@media screen and (max-height: 900px) {
#nav{display: block;}
.nav-grid{padding: 80px 0 40px 0;margin: 0 auto;}
}
@media screen and (max-width: 1400px) , (max-height: 700px){
.logo, .nav-toggle, .header-icon{top:25px;}
.logo { width: 240px;}
.header-icon { margin-right: 60px;}
}
@media screen and (max-width: 600px) {
.header-icon{display: none;}
.nav-grid{width: 100%;}
#nav li em{font-size:1.7em; }
#nav .subnav div a{ display:block;border-bottom:solid 1px #1c354b;}
#nav .subnav div a:first-child{ border-top:solid 1px #1c354b;}
#nav .subnav div a:before{border-bottom:none;background-image: -webkit-linear-gradient(to right, transparent, #d49652 40%, #d49652 60%, transparent); background-image: -moz-linear-gradient(to right, transparent, #d49652 40%, #d49652 60%, transparent); background-image: -o-linear-gradient(to right, transparent, #d49652 40%, #d49652 60%, transparent);  background-image: linear-gradient(to right, transparent, #d49652 40%, #d49652 60%, transparent);}
}
@media screen and (max-width: 600px),  (max-height: 600px){
.logo, .nav-toggle, .header-icon{top:15px;}
.logo { width: 220px;}
.nav-toggle, .header-icon{right:20px;}   
body.sticky-page .nav-toggle{transform: scale3d(.85,.85,1);}  
}
@media screen and (max-width: 350px){
}
/*============footer===============*/
#footer{background:#001d35; color:#ddd;text-align: center;}
.footer-grid a{color:#ddd!important;}
.footer-grid a:hover{color:#d49652 !important;}
.footer-grid{padding: 80px 0 0 0;width: 87.5%;max-width: 1100px; margin: 0 auto; display:flex;}
.footer-grid > div{margin-bottom: 40px;position: relative; display: block;text-align: left;}
.footer-grid > div > em{position: relative;display:inline-block;font-size: 12px; line-height: 16px;letter-spacing: 0.6em;color: #d49652;background:#001d35;padding-right: 2px;padding-left: 2px;}
.footer-grid > div > ul{border-top: solid 1px #d49652;padding-top: 40px;margin-top: -10px;}
.footer-logo{width: 23%;max-width: 215px;margin-right: 7%;}
.footer-logo a{display: block;width: 100%; padding-bottom: 90%; background:url("../images/logo2.png") center top no-repeat;background-size: contain; image-rendering: -webkit-optimize-contrast;}
.footer-nav{width: 30%;max-width: 350px;}
.footer-logo+.footer-nav{width: 50%;}
.footer-nav ul{display: flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;align-content:stretch;justify-content: space-between;width: 110%;}
.footer-nav li{display: inline-block;}
.footer-nav li strong{position: relative; display: block; font-size: 16px; line-height: 20px;letter-spacing: 0.4em;font-weight: normal;}
.footer-nav li em{ display: block;margin-bottom:8px;letter-spacing: 0.2em;color:#60676e;}
.footer-nav li a{display: block;margin-right: -0.8em;}
.footer-info{max-width: 33%;margin-right: 7%;}
.footer-info li{position: relative; display:block;}
.footer-info li:first-child{margin-top: -7px;}
.footer-info b{display:block; line-height: 25px;padding: 7px 0 7px 30px;letter-spacing: 0.05em;font-weight: normal;}
.footer-info i{position: absolute;display: block;text-align: center; left: 0;top:10px; background:#ddd; color:#001d35; height: 20px;width: 20px; line-height: 20px; border-radius: 50%;}
.footer-info .text-tel{font-weight:bold;}
.footer-info a:hover i{ background:#d49652;}
.footer-copyright {position:relative;display: block; font-size: 12px; line-height: 20px; color: #60676e; text-align: right;padding: 0 20px 15px 0;}
.footer-copyright a{ color: #60676e!important;display: inline-block;}
.footer-copyright a:hover{text-decoration: underline;color:#ddd!important;}

.button-top{position:fixed; display:block;bottom:4%; right:2.5%; font-size: 12px;line-height: 13px;width: 10px;text-align: center;padding-right: 15px;border-right:solid 1px;z-index:-1;opacity: 0;pointer-events: none; color:#001d35;}
.button-top i{ position: absolute; right: -6px; top: -3px;}
.sticky-page .button-top{z-index:2; opacity: 1;pointer-events:auto;}
.sticky-footer .button-top{opacity: 0;pointer-events: none;}
/*============html-edit===============*/
.html-edit {position: relative;}
/*.html-edit a{ text-decoration:underline;}
.html-edit a:hover { text-decoration:none;color:#001d35;}*/
.html-edit img { max-width: 100%; height:auto !important; }
.html-edit ul, .html-edit ol{line-height: 1.875em;}
.html-edit li { list-style: outside; margin-left: 25px;/* margin-bottom: 0.5em;*/}
.html-edit ul li { list-style-type: disc; }
.html-edit ol li { list-style-type: decimal; }
.html-edit iframe{ width: 100%; max-width: 100%; height: calc(80vw * 0.5625); max-height: calc(1200px * 0.5625);}
@media screen and (max-width: 500px){.html-edit iframe{ height: calc(87vw * 0.5625); }}
.html-edit h1, .html-title1{font-size: 1.5em;}
.html-edit h2, .html-title2{font-size: 1.25em;}
.html-edit h3, .html-title3{font-size: 1.125em;}
.html-edit h1, .html-edit h2, .html-edit h3, .html-title1, .html-title2, .html-title3{display: block;font-weight: 500;line-height: 1.5em;margin-bottom: 0.2em;letter-spacing: 0.05em;}
/*.html-edit strong{color: #001d35;}*/
.html-button a, a.html-button, .html-edit a .html-button{position: relative; display:inline-block; padding:10px 20px;background-color: #001d35; border-radius: 3px;color: #fff;text-decoration: none;margin: 5px 0;border: none !important;}
.html-button a:hover ,a.html-button:hover, .html-edit a:hover .html-button{display: inline-block;-ms-transform: translate3d(2px,2px,0); -moz-transform: translate3d(2px,2px,0); -webkit-transform: translate3d(2px,2px,0); -o-transform: translate3d(2px,2px,0); transform: translate3d(2px,2px,0);}
.html-edit p span, .html-edit h1 span, .html-edit h2 span, .html-edit h3 span, .html-edit li span {display: inline;}
/*.bg-dark .html-edit h1, .bg-dark .html-edit h2, .bg-dark .html-edit h3, .bg-dark .html-edit span, .bg-dark .html-edit strong, .bg-dark .html-edit a:hover {color:#fff;}*/
.html-edit table{float: none;}
.html-edit small{letter-spacing: 0.05em;}
/*============googlemaps===============*/
.googlemaps{/*width:100%; */height:500px; position:relative;}
.googlemaps iframe{width: 100%; height: 100%;}
/*============load===============*/
.wrapper/*.main, .header-box*/{opacity: 0;opacity:1\9\0;-webkit-transition: opacity 500ms ease-in; -o-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; }
body.loading-complete .wrapper/*.main, body.loading-complete .header-box*/{opacity: 1;}
.loading-content:before{content: "";position: absolute;z-index: 1;display: block;width: 100%;height: 50px;top:200px;left: 0;background: url("../images/loader.gif") no-repeat center center;}
.loading-content .page:before{content: "";position: absolute;z-index: 1;display: block;width: 100%;height: 100%; }
.loading-icon:after{content:"";top:50%;left: 50%;width: 20px;height: 20px; position: absolute;background: url("../images/loader.gif") no-repeat center center; }
/*============button===============*/
.underline a, a.underline{position: relative;display:inline-block;}
.underline a:before, a.underline:before{ position: absolute; content: ""; display: block; height: 1px; width: 0px; bottom: 5px; left: 50%; border-bottom: solid 1px;z-index: 1; }
.underline.left a:before, a.underline.left:before{ left: 0;}
.underline a:hover:before, .underline a.active:before, a.underline:hover:before{width: 100%; left: 0%;}
.border-line a{overflow: hidden;}
.border-line a:before, .border-line a:after{content: ""; position: absolute; border: solid 1px transparent; width: 0; height: 0;}
.border-line a:before, .border-line a:hover:before{left: 2px; top:2px;}
.border-line a:after, .border-line a:hover:after{right: 2px; bottom: 2px;}
.border-line a:hover:before, .border-line a:hover:after{ width: calc(100% - 6px); height:calc(100% - 6px);}
.border-line a:hover:before{ border-top: solid 1px #fff; border-left: solid 1px #fff;}
.border-line a:hover:after{ border-bottom: solid 1px #fff; border-right: solid 1px #fff;}

.button-icon{position: relative;font-size: 0;line-height: 0;}
a.button-icon, .button-icon a{position: relative; display:inline-block;height: 50px;width: 45px;line-height: 50px; text-align: center;}
a.button-icon i, .button-icon a i{font-size:30px;line-height:50px;display: block;}
.button-icon a.social-facebook:hover{ color:#3b5998;}
.button-icon a.social-line:hover{color:#00b900;}
.button-icon a.social-youtube:hover{color:#ff0000;}
.button-icon a.social-instagram:hover{color:#ae2352;}
/*.button-icon a.social-instagram:hover{background: #f09433; 
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }*/

.button-icon2{position: relative;display: block; font-size: 0;line-height: 0;margin-left: -10px;margin-right: -10px;}
a.button-icon2, .button-icon2 a{position: relative; display:inline-block;text-align: center; font-size:13px;line-height:1.3em;padding: 0 10px;color:#001d35;min-width: 55px;}
a.button-icon2 i, .button-icon2 a i, .button-icon-text i{font-size:30px;line-height: 30px;display: block;margin-bottom: 3px;}
.button-icon2 b{position: absolute; bottom:-2px; left: 0; width: 100%;font-weight:normal;opacity: 0;letter-spacing: 0.1em;white-space: nowrap;}
.button-icon2 em, .button-icon-text em{display: block;font-size: 12px; letter-spacing: 0.2em;transform-origin: center center;overflow: hidden;opacity: 1;white-space: nowrap;margin: 0 -8px -5px -6px;}
a.button-icon2:hover em, .button-icon2 a:hover em{opacity: 0;}
a.button-icon2:hover b, .button-icon2 a:hover b{opacity:1;}
.bg-dark a.button-icon2, .bg-dark .button-icon2 a{color:#ddd;}

.button-icon-text {display: flex; align-items: stretch;margin-right: -2%; margin-left: -2%;margin-bottom: -25px;}
.button-icon-text:empty{display: none;}
.button-icon-text li{position: relative; display:inline-block;box-sizing: border-box; line-height: 1.4em; border-left: solid 1px rgba(153,153,153,.3);padding: 0 2%;margin-bottom: 25px;min-width: 180px;}
.button-icon-text li:first-child{border-left:none;}
.button-icon-text li, .button-icon-text a{display: flex;align-items: center;}
.button-icon-text a{min-width: 0;}
.button-icon-text b{ display:inline-block;font-weight: 500;}
.button-icon-text div{display:inline-block;text-align: center;}
.button-icon-text div+b{padding-left: 10px;}
.button-icon-text small{display: block; letter-spacing: 0.2em;font-size:1em; margin-bottom: 0.2em;}
.button-icon-text b{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.button-icon-text .flex-shrink0 b {white-space: inherit; text-overflow: inherit;}
.button-icon-text li.button-large{ max-width: 35%;}
.button-icon-text li.button-small{min-width: auto;}
.bg-dark .button-icon-text a:hover{color:#d49652;}
.bg-dark .button-icon-text small, .bg-dark .button-icon-text i, .bg-dark .button-icon-text em{opacity: .8;}
.bg-dark .button-icon-text small{font-weight: 300;}

.button-text a, a.button-text{position: relative; display:inline-block;font-size:1.125em; letter-spacing: 0.1em; padding: 0.6em 1.2em;line-height: 1.8em;background-color: #001d35; border-radius: 5px;color: #fff;text-decoration: none;min-width: 150px; text-align: center;box-sizing: border-box;}
.button-text a{margin-right: 5px;}
.button-text a:hover ,a.button-text:hover{background-color:#001d35;}
.button-text i{margin-right: 5px;}

.content-button{display: flex;align-content: center;justify-content: center; color:#001d35;}
.content-button > a{display: inline-block; color:#001d35;}
.content-button > a, .content-button .share-button{margin-right:25px;}
.content-button .share-button:last-child, .content-button a:last-child{margin-right:0;}
.share-button{display: inline-block;}
.share-button small{font-size: 12px;letter-spacing: 0.1em;line-height: 22px; margin: 14px 5px 14px 0; border-bottom: solid 1px; border-top: solid 1px;display: inline-block;vertical-align: top;}
.share-button a{display: inline-block;width:50px;min-width:50px;height: 50px;line-height: 50px;color: #fff;background:#001d35; text-align:center; overflow:hidden;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;margin-left: 4px;}
.share-button a i{position: relative;left:auto;top:auto;line-height: 50px; font-size:30px;}
a.share-facebook:hover{background:#3b5998;}
a.share-line:hover{background:#00b900;}

.content-navbar{position:absolute; right: 2.5%; top: 120px;z-index: 3;}
.sticky-page .content-navbar{opacity: 0;pointer-events: none;}
.content-navbar a{color:#001d35;}
.button-logout, .button-back{position: relative; display: block;box-sizing: border-box;font-size: 12px;}
.button-logout i, .button-back i{position: absolute;left: -5px; top: -6px;}
.button-logout{line-height: 16px;letter-spacing: 0.1em;/*height: 50px;*/height: 55px;width: 40px;padding-top: 8px; border-top:solid 1px;border-right:solid 1px;border-bottom:solid 1px;white-space: nowrap;}
.button-logout div{font-size: 16px; line-height: 20px;letter-spacing: 0;}
.button-back{line-height: 11px;width: 20px;height: 60px;padding-top: 8px;padding-right: 10px; border-top:solid 1px;border-right:solid 1px;}

.sidebar-nav{position: fixed; bottom: 5%; right: 2%; width: 35px;text-align: center; z-index: 1;}
.sidebar-nav a{position: relative; width: 35px;height: 35px;text-align: center;display: block;}
.sidebar-nav a:before{content: "";display: inline-block;width: 5px;height: 5px;border: solid 2px;border-radius: 50%;margin-top: 10px;}
.sidebar-nav a.active:before, .sidebar-nav a:hover:before{background: #ddd;}
.sidebar-nav a:after{content: "";display: inline-block;height: 20px;width: 1px;border-left: solid 1px;position: absolute; left: 50%;top:22px;opacity: .5;}
.sidebar-nav a:last-of-type:after{height: 70px;}
.sidebar-nav p{letter-spacing: 0.5em;margin-top: 70px; line-height: 35px;}
.sidebar-nav~#footer .button-top{display: none;}

.category-list{ display: inline-block;font-size: 0;margin-left: -15px;margin-right: -15px;}
.category-list li{position: relative; display:inline-block;font-size: 16px; line-height: 20px; letter-spacing: 0.3em;padding: 0 15px; }
/*.category-list li:before { content: ""; position: absolute; width: 1px; height: 18px; right: -1px; top: 50%; margin-top: -9px; background-color:rgba(153,153,153,.4);}
.category-list li:last-of-type:before{display: none;}*/
.category-list a{display:inline-block; color:#001d35;padding: 10px 0;}
.category-list.underline a:hover:before, .category-list.underline a.active:before{width:calc(100% - 0.3em);}
.loading-content .page, .loading-content .category-list, .loading-content .select-category{opacity: .7;}
/*============page===============*/
.page {display: inline-block;clear: both;text-align: center; font-size: 0;/* margin-top: 90px;*/position: relative;left: 50%; -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); transform: translateX(-50%);}
.page:empty{display: none;}
.page a {position: relative; display: inline-block;margin-right:25px; color:#001d35;}
/*.page a:hover, .page a.active{color:#001d35;}*/
.page a:last-child {margin-right:0;}
a.page-prev, a.page-next{position: relative; display: inline-block;font-size: 12px;letter-spacing: 0.2em;line-height: 15px;height: 15px; vertical-align: text-bottom;}
a.page-prev{padding: 25px 0 10px 0;}
a.page-next{padding: 10px 0 25px 0;}
a.page-prev:before, a.page-next:before{content: "";position: absolute;left:0; width: 100%;height: 1px; border-top: solid 1px;}
a.page-prev:before{top:14px;}
a.page-next:before{bottom:14px;}
a.page-prev i, a.page-next i{position: absolute; font-size: 12px; }
a.page-prev i{top: 9px; left: -4px;}
a.page-next i{bottom: 9px; right: -6px;}
.page select{vertical-align: text-bottom;margin-right:20px;}
.bg-dark .page a, .bg-dark .page a:hover, .bg-dark .page a.active{color:#ddd;}
/*============main===============*/
.bg-dark{ color: #ddd;background-color:#001d35;}
.nav-light .nav-toggle, .bg-dark .nav-toggle, #nav .header-icon a, .nav-light .header-icon a, .bg-dark .header-icon a, .nav-light .content-navbar a, .bg-dark .content-navbar a, .nav-light .title-box h1, .nav-light .title-box em, .bg-dark .title-box em, .nav-light a.button-top, .bg-dark a.button-top, .bg-dark .text-date2{ color:#ddd;}
.bg-light{background:url("../images/bg-pattern.gif") repeat left top #fff;}
.bg-white{background-color:#fff;}
.bg-blue .grid-container-large{min-height: 100vh;}
.bg-blue .grid-container-large:before{content: "";position:fixed;left: 0;bottom:0; width: 100%;height: 170px;background-image: -webkit-linear-gradient(transparent, #0b2f4d); background-image: -moz-linear-gradient(transparent, #0b2f4d); background-image: -o-linear-gradient(transparent, #0b2f4d); background-image: linear-gradient(transparent, #0b2f4d);z-index: 2; pointer-events: none;}

.full-box { position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; background-position: center center; background-size: cover; }
.full-box.img-bg:after{z-index: -1;}
.sticky-content .full-box.img-bg:after{z-index: 1;}
.sticky-content .full-box .video-full{opacity: 0;}
.img-bg .img-box, .header-box .img-box, .header-box .img-box-mobile, .full-box .img-box, .full-box .img-box-mobile{ position: relative; top: 0; left: 0; height: 100%; width: 100%; background-position: center center; background-size: cover; image-rendering:-webkit-optimize-contrast;}
.header-ratio .full-box .img-box-mobile{height: 0;padding-bottom: 56.25%;}
.img-fadein .img-box{opacity: 0;}
.header-box{position: relative; box-sizing: border-box;height: 100vh; width: 100%;overflow: hidden;}
.header-mask .full-box:before, .header-mask .video-full:before, .header-mask > .img-box:before, .header-mask > .img-box-mobile:before{content:"";position: absolute;left: 0;top:0; width: 100%;height: 200px;background:url("../images/img-mask-top.png") repeat-x left bottom; z-index: 2; pointer-events: none;}
.header-mask .full-box:after, .header-mask .video-full:after, .header-mask > .img-box:after, .header-mask > .img-box-mobile:after{content:"";position: absolute;right: 0;top:0; height: 100%;width: 70%; max-width: 400px;background:url("../images/img-mask-right2.png") repeat-y left top; z-index: 2; pointer-events: none;}
.img-mask-full .full-box:before, .img-mask-full .video-full:before, .img-mask-full > .img-box:before{content:"";position: absolute;left: 0;top:0; width: 100%;height: 100%;background:url("../images/img-mask.png") repeat left top; z-index: 2; pointer-events: none;}
.img-mask-left:before{content:"";position: absolute;left: 0;top:0; width: 200px;height: 100%;background: url("../images/img-mask-left.png") repeat-y right top;} 
.img-mask-right:before{content:"";position: absolute;top:0;right: 0; width: 200px;height: 100%; background: url("../images/img-mask-right.png") repeat-y left top;}
.img-bg{ position: fixed; top: 0; left: 0; height: 100vh; width: 100%; overflow: hidden;}
.img-bg+.main{min-height: 100vh;}
.header-container{position: relative; display: block; box-sizing: border-box; min-height: 100vh;}
@media screen and (orientation:landscape){ 
.full-box .img-box-mobile, .header-box .img-box-mobile{display: none;background-image: none !important;}
}
@media screen and (orientation:portrait){ 
.full-box .img-box-mobile+.img-box, .header-box .img-box-mobile+.img-box{display: none; background-image:none!important;} 
.header-ratio .img-bg{position: absolute;}
.header-ratio .header-container{min-height:auto;padding-bottom:56.25%;margin-top: 80px;overflow: hidden;}
.header-ratio .header-container ~ .wrapper .content-main{padding-top: 0;}
}

.title-box{position:fixed;bottom: 3%;right: 2%;text-align: right;height: 80%; z-index: 3;}
.title-text{position: relative; display: block; font-size:1em; line-height: 1.33em;letter-spacing: 0.6em;margin-bottom: -0.5em;}
.title-box em{position: relative;font-size:3em;line-height: 1em; height: 100%;color:#001d35;}
.sticky-page .title-box{opacity: 0;}
.bg-blue .title-box h1, .bg-blue .title-box em{color:#0b4778;}

.grid-container, .grid-container-large, .grid-container-small, .grid-container-bottom{position: relative; box-sizing: border-box;}
.grid-container{ padding: 200px 0 140px 0;}
.grid-container-large{ padding: 230px 0 170px 0;}
.grid-container-large .item-list .grid-item{margin-bottom: 130px;}
.grid-container-small{ padding: 140px 0 140px 0;}
.grid-container-bottom{padding-bottom: 140px;}
.grid-container-bottom:first-of-type{padding-top: 140px;}
.section-box{ min-height: 100vh; width: 100%; position: relative; overflow: hidden; box-sizing: border-box;}
.content-page.bg-dark .grid-container, .content-page .grid-container.bg-dark{margin-bottom: -60px;}
.content-page.bg-dark .grid-container+.googlemaps, .content-page .grid-container.bg-dark+.googlemaps{margin-top: 60px;}

.content-title{overflow: hidden;text-align: center;}
.content-category{color: #888;line-height: 1.4em;}
.content-category em{display: inline;margin-right: 10px;}
.content-category strong{display: inline;margin-right:5px;}
.content-category em:empty, .content-category strong:empty{display: none;}

.text-box{ position:relative; box-sizing: border-box;}
.text-box p{text-align: justify;}
.html-edit p {text-align: inherit;}
.text-date{ display:block;font-size:0.75em;letter-spacing: 0.1em;text-transform: uppercase; padding: 0 2px;}
.text-date2{font-size: 2.25em;line-height: 0.9em; color:#001d35;}
.text-date2 small{display: block;font-size: 0.94em;}
.text-year{font-size: 3em;line-height: 1em; display: block;font-weight: bold;}
.text-year small{font-size: 12px;line-height: 16px;display: block; letter-spacing: 0.4em;margin-right: -0.4em;text-transform:uppercase;}
a .text-more{position: relative;padding-bottom: 30px;}
a .text-more:before { content: ""; display: block; position: absolute; left: 0;  bottom: 5px; width: 40px; height:1px;border-bottom: solid 1px;}
a .text-more:after {content: "MORE"; display: block; position: absolute; left: 50px;  bottom: 0; font-size: 12px; line-height: 13px;}
a:hover .text-more:before{width: 50px;}
a:hover .text-more:after{left: 60px; }
.icon-new em:before, .icon-hot em:before{ display: inline-block; color:#fff; margin-right:8px;padding: 0 5px; border-radius: 3px;vertical-align: text-bottom;}
.icon-new em:before, .icon-hot em:before{ font-size:12px;}
.icon-new em:before{content: "NEW";background:#001d35;}
.icon-hot em:before{content: "HOT";background:#d49652;} 

.grid-item{ position:relative; box-sizing: border-box;}
.item-list{position: relative;}
.item-list-2, .item-list-3, .item-list-4, .item-list-5{position: relative;overflow: hidden;}
.item-list .flex-center{width: 100%;}
.item-list .grid-item{margin-bottom: 70px;}
.item-list .grid-item:last-child{margin-bottom: 0 !important;}
.item-list-2 .grid-item, .item-list-3 .grid-item, .item-list-4 .grid-item, .item-list-5 .grid-item{ float:left;display: block; box-sizing: border-box;}
.item-list-4 .grid-item a, .item-list-3 .grid-item a{position: relative; display:block;}
.item-list-2{width:106%; margin-bottom: -5%;}
.item-list-2 .grid-item{ width:44%; margin-right: 6%;margin-bottom: 5%;}
.item-list-3{width:105%; margin-bottom: -4%;}
.item-list-3 .grid-item{ width:28.3%; margin-right: 5%;margin-bottom: 4%;}
.item-list-4{width:104%; margin-bottom: -3%;}
.item-list-4 .grid-item{ width:21%; margin-right: 4%;margin-bottom: 3%;}
.item-list-5{width:103%; margin-bottom: -3%;}
.item-list-5 .grid-item{ width:17%; margin-right: 3%;margin-bottom: 3%; }
.item-list-2 .img-box+.text-box, .item-list-2 .plyr+a .text-box, .item-list-3 .img-box+.text-box, .item-list-3 .plyr+a .text-box, .item-list-4 .img-box+.text-box, .item-list-4 .plyr+a .text-box, .item-list-5 .img-box+.text-box, .item-list-5 .plyr+a .text-box{margin-top: 25px;}

.other-list{margin-bottom: -30px;}
.other-list .grid-item{overflow: hidden;}
.other-list .grid-item, .other-list .grid-item > a{display: flex; width: 100%;}
.other-list .img-over-box, .other-list .text-box{padding: 30px 0;}
.other-list .img-over-box{width: 100px;margin-right: 25px;flex-shrink:0;}
.other-list .text-box{position: static;flex-grow:1;flex-shrink:1; min-width: 0;}
.other-list .text-box em{position: absolute;top:0;left: 0;display: inline-block;color:#888888;}
.other-list .text-box em:after{content:"";position: absolute;top:6px;left: 100%;margin-left: 10px;width: 1200px;height: 1px;background: #dddddd;}

.info-list{position: relative;text-align: left;display: flex; align-items: stretch;flex-wrap: wrap;letter-spacing: 0.1em; font-weight: 300;}
.info-list:empty{display: none;}
.info-list > div{position: relative;box-sizing: border-box;padding: 10px 10px 10px 90px;min-height: 25px;width: 50%;}
.info-list dd{display: block;width: 100%;box-sizing: border-box;line-height:1.5em;}
.info-list dt{position:absolute; top: 10px; left: 0;line-height:25px;white-space: nowrap;opacity: .8;}
.info-list dt:after{content:"：";}
.bg-dark .info-list a:hover{color:#d49652;}
.info-list.underline a:before{bottom:0;}

.dot-list li{position: relative;box-sizing: border-box;padding-left: 1.2em; line-height:2em;}
.dot-list li:before{content:"";position: absolute;display: block; left: 0.4em; top: 0.8em;width: 4px;height: 4px;border-radius: 50%;background-color: #666;}
.list-style-none:before{display: none;}

.img-caption{ position:absolute; display:block; bottom:15px; font-size: 0.9375em; line-height: 1.4em; color:#fff; z-index:1; left:0; padding: 0 15px; width: 100%; box-sizing: border-box; text-align:right;-moz-text-shadow:1px 1px 10px rgba(0,0,0,.6); -webkit-text-shadow:1px 1px 10px rgba(0,0,0,.6); text-shadow: 1px 1px 10px rgba(0,0,0,.6); }
.img-box,.img-over-box{ position:relative; display: block; overflow:hidden; }
.img-box{background-position: center center; background-repeat: no-repeat; background-size:cover; }
.img-ratio56 .img-box{padding-bottom:56.25%; }
.img-ratio66 .img-box{padding-bottom:66.66%; }
.img-ratio150 .img-box{padding-bottom:150%; }
.img-over-box img{ width:100%; height:auto;}
.img-box img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width:100%; height:100%;}
a .img-hover{opacity: 0;}
a:hover .img-hover{opacity: 1;}
.img-box.height img{ width:auto; height:100%; }
/*a.video .img-box:before, a.video .img-over-box:before, .justified-gallery .video:before,.swiper-slide a.video:before{ content:""; background: url(../images/icon-video.png) center center no-repeat; position:absolute; display:block; height:100%; width:100%; z-index:1;}
.back-box{ position: absolute; display: block; top:0; left: 0; width: 100%; height: 100%; filter: alpha(opacity=0); opacity: 0; z-index:1; background:rgba(0,0,0,.5);padding: 10% 7%; box-sizing: border-box;}*/
a:hover .back-box, .back-box.active{ color: #fff; filter: alpha(opacity=100); opacity: 1;}
.img-gray .img-box{;-webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); -ms-filter: grayscale(50%); -o-filter: grayscale(50%); filter: grayscale(50%); filter: gray;}
.img-gray a:hover .img-box{webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-ms-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);filter: none;}
.img-mask-bottom .img-box:before{content: "";display: block;position: absolute;width:100%;height: 100%;right: 0;bottom:0;z-index: 1; background-image: -webkit-linear-gradient( to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 50%); background-image: -moz-linear-gradient( to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 50%); background-image: -o-linear-gradient( to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 50%); background-image: linear-gradient( to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 50%);}
img.img-height{height: 100%;}
/*==============index==================*/
.index-box{position:absolute;right: 2.5%;bottom: 5%;text-align: right; max-height: calc(100vh - 300px); z-index: 2;overflow: hidden;}
a .index-box{padding-right: 2.5em;min-height: 60px;}
a .index-box:before{content:"";display: block;position: absolute; right: 5px;top:0.8em;width: 1px;height: calc(100% - 80px);border-right: solid 1px;}
a .index-box:after{content:"MORE";display: block;position: absolute; right: 0;bottom:0.3em; font-size: 12px;line-height: 13px; width: 10px;text-align: center;}
.index-box em{display: block;font-size: 4.5em; line-height: 1.05em;letter-spacing: 0.2em;margin-right: -0.2em; margin-bottom: 0.1em;}
.index-box h1{font-size: 1.25em; line-height: 1.7em;letter-spacing: 0.8em;margin-right: -0.8em;}
/*.sticky-page .index-box{opacity: 0;}*/
@media screen and (max-width: 1400px){
.index-box em{font-size: 5vw; margin-bottom: 0;}
}
@media screen and (max-width: 1000px){
a .index-box {padding-right: 1.8em;}
a .index-box:before{top: 0.4em;height: calc(100% - 70px);}
.index-box em{font-size: 6vw; line-height: 1em;letter-spacing: 0.1em;margin-right: -0.1em;}
.index-box h1 {font-size: 1.125em; line-height: 1.5em;  letter-spacing: 0.5em; margin-right: -0.5em;}
}
@media screen and (max-width: 600px){
.index-box { right: 20px;}
a .index-box:before { top: 0.2em;height: calc(100% - 65px);}
.index-box em{font-size: 7vw;}
.index-box h1 {font-size: 1em;letter-spacing: 0.3em; margin-right: -0.3em;}
}
@media screen and (max-height: 500px){
.index-box em{font-size: 2.5em;}
}
@media screen and (max-width: 450px){
.index-box em{font-size: 8.5vw;}
}
/*==============about==================*/
.about .header-box{position: absolute;height: auto;}
.about .header-box .img-box{height: 0;padding-bottom: 130%;background-image:url("../images/about-head.jpg"); background-position: center top;}
.about-title{ margin-top: -0.6em;white-space: nowrap;}
.about-title em{font-size: 5.625em;line-height: 1.2em;}
.about-title h1{font-size: 1.375em;letter-spacing: 1.2em;margin-right:-1em;}
#about1 .about-title{text-align: right;}
#about1 h2{font-size: 3.75em;display: inline-block;}
#about1 h2:after{content:"。";font-size: 0.6em;vertical-align: sub;margin-left: -0.1em;}
#about2 .about-title{position: relative; margin-top: -8em;z-index: 1;}
#about2 .img-box{padding-bottom: 82%;}
#about1 .text-box, #about2 .text-box, #about3 .text-box{white-space: nowrap;}
#about3 .full-box{background-image:url("../images/about-img2.jpg");}
#team{background-image: url("../images/team-bg.jpg");background-position: top center; }
.computer #team{background-attachment: fixed;}
.team-list{max-width: 1000px;margin-right: 0;margin-left: auto;}
.team-list h2, .team-list h3{text-align: right;max-width: none;}
.team-list p+h2{margin-top: 5%;}
@media screen and (min-width: 1001px){
#about1 .text-box section:first-child{margin-left: auto;}
#about3 .grid-container-small{ padding-top: 0px;}
_:-ms-lang(x), #about3 .grid-container-small{ padding-top: 100px;}/*ie10+ hack*/
#about3 .text-box{max-width: 50%;}
}
@media screen and (min-width: 1601px){
#about1 .about-title{position: absolute; top: 16%;right: 10%;}
#about1 .text-box{position: absolute;bottom: 5%;right: 10%;}
}
@media screen and (max-width: 1600px){
.about .header-box .img-box{height:2000px;padding-bottom:0;}
.about-title { font-size: 0.8em;}
#about1 h2 {font-size: 3em;}
#about1 .about-title{padding-top: 160px;}
#about1 .text-box{ margin-top: 200px;}
}
@media screen and (max-width: 1500px) and (min-width: 1001px), (max-width: 900px){
#about2 .text-box, #about3 .text-box{white-space: normal;max-width: 100%;}
#about2 .text-box p br, #about3 .text-box p br{display: none;}
}
@media screen and (max-width: 1200px) and (min-width: 1001px), (max-width: 900px){
.about-title em {font-size: 4.5em;}
.about-title h1 {font-size: 16px; letter-spacing: .9em; margin-right: -0.75em;}
}
@media screen and (max-width: 1000px){
#about2 .grid-container-small{align-items: flex-start;}
#about2 .flex-5-12{max-width: 500px;}
#about3 .text-box{margin-bottom: 140px;}
}
@media screen and (max-width: 900px){
#team .about-title em{ font-size: 3.5em;}
}
@media screen and (max-width: 600px){
#about1 .text-box{white-space: normal;}
#about1 .text-box section{max-width: 100%;}
#about1 .text-box p br{display: none;}
.team-list .text-box p br{display: none;}
}
@media screen and (max-width: 500px){
.about-title em {font-size: 3em;}
#team .about-title em{ font-size: 2.6em;}
.about .header-box .img-box {height: 1800px;}
#about1 .about-title { padding-top: 140px;}
#about1 h2 { font-size: 2.25em;}
#about2 .about-title {margin-top: -4em;}
}
@media screen and (max-height: 400px){
.sidebar-nav{display: none;}
}
@media screen and (orientation:portrait), (max-width: 600px){ 
#about3 .full-box{background-image:url("../images/mobile/about-img2.jpg");}
}
/*==============holiday==================*/
.holiday-color1, .holiday-color1 a{ color: #002d72;}
.holiday-color2 { color: #0057b8;}
.holiday-color3 { color: #e35205;}
.holiday-bg{background-color: #002d72;color:#fff;}
.holiday-bg h1, .holiday-bg h2, .holiday-bg h3{color:#fff;}
.holiday-en{font-size: 12.5em;line-height: .9em;letter-spacing: -0.05em;font-weight: 100;color:#0057b8;margin-bottom: -50px;display: block;}
.holiday-logo{width: 180px;height: auto;}
.holiday-logo:before, .holiday-logo2:before{content: "";display: block; padding-bottom: 92%;background-repeat: no-repeat;background-size: contain; background-image:url("../images/holiday/holiday-logo.png");}
.holiday .header-box .img-box{background-image:url("../images/holiday/holiday-head.jpg");}
.holiday .header-box .flex-center{position: relative;}
.holiday-title{max-width: 370px;text-align: justify;margin-bottom: 100px;}
.holiday-title h1{font-size: 3.75em;line-height: 1.15em;white-space: nowrap;}
.holiday-title h2{font-size: 1.88em;letter-spacing: 0.1em; margin-top: 0.2em;white-space: nowrap;}
.holiday-title h1 small{font-size: 0.85em;}
.holiday-title p{font-size: 16px;}
#holiday1 .flex-5-12{margin-left: auto;margin-bottom: -200px;}
#holiday1 .flex-5-12 > div{margin-left: auto;width: 85%;}
#holiday2 .img-list .swiper-slide{width: 60%; max-width: 720px;}
.holiday-info{position: relative; padding-left: 190px;}
.holiday-logo2{width: 145px;height: auto;position: absolute;top:0;left: 0;}
.holiday-logo2:before{background-image:url("../images/holiday/holiday-logo2.png");}
.holiday-info .title4{margin-bottom: 25px;}
@media screen and (min-width: 501px){
#holiday2 h2{line-height: 1.2em;padding-right: 5%; flex-shrink: 0;}
#holiday2 .text-box{display: flex;margin-right: 8.3%;}
}
@media screen and (min-width: 1001px){
.holiday-logo{position: absolute;bottom: 5%;left: 50%;margin-left: -90px;}
#holiday1 .flex-4-12{margin-top: 7%;}
#holiday1 .flex-5-12{margin-top: -50px;}
#holiday3 .item-list .grid-item:first-child .text-box{margin-top: 60px;}
#holiday3 .item-list{margin-left: auto;}
}
@media screen and (max-width: 1500px) and (min-width: 1001px),(max-width: 800px){
.holiday-title{max-width: 290px; font-size: 0.8em;}
}
@media screen and (max-height: 750px) and (min-width: 1001px){
.holiday-logo {width: 110px;margin-left: -55px;}
.holiday-title{margin-bottom: 70px;}
}
@media screen and (max-height: 600px) and (min-width: 1001px){
.holiday-logo {display: none;}
.holiday-title{margin-bottom:0;}
}
@media screen and (max-width: 1600px){
.holiday-info {padding-left: 0;overflow: hidden;}
.holiday-logo2{display: none;}
}
@media screen and (max-width: 1400px){
#holiday1 .flex-5-12 {margin-bottom: -140px;}
.holiday-info .button-icon-text { flex-wrap: wrap;}
.holiday-info .button-icon-text li {width: 50%;}
.holiday-info .button-icon-text li.button-large{max-width:none;}
}   
@media screen and (max-width: 1200px){
.holiday-en{font-size: 16vw; margin-bottom: -0.2em;}
}   
@media screen and (max-width: 1000px){
.holiday .header-box{height: auto;}
.holiday .header-box .img-box{padding-bottom: 100%;}
#holiday1 .flex-5-12{margin-bottom: -150px;}
}   
@media screen and (max-width: 800px){ 
.holiday-info .button-icon-text li { width: 100%;}
}
@media screen and (max-width: 600px){
#holiday1 .flex-5-12 { margin-bottom: -100px;}
.holiday .header-box .img-box{background-image:url("../images/holiday/holiday-head-m.jpg");}
}
@media screen and (max-width: 500px){  
#holiday2 h2{margin-bottom: 20px;}
.holiday .title2{font-size: 1.8em;}
} 
@media screen and (max-width: 400px){ 
.holiday-title {max-width: 250px;font-size: 0.7em;}
} 
/*==============news==================*/
.news .header-box .img-box{background-image:url("../images/news-head.jpg");background-position: right 25% top;}
.news-content .content-title{text-align: left;}
.news-content .content-title h1{white-space: pre-line;}
.news-container{width: 80%;}
@media screen and (min-width: 801px){
.news .title-box{-moz-text-shadow: 0 0 10px #d8e4ec, 0 0 10px #d8e4ec; -webkit-text-shadow: 0 0 10px #d8e4ec, 0 0 10px #d8e4ec; text-shadow: 0 0 10px #d8e4ec, 0 0 10px #d8e4ec;}
.news .header-box .img-box:before{content:"";position: absolute;right: 0;top:0; width: 30%; max-width: 200px; height: 100%;background-image: -webkit-linear-gradient(to right, transparent, rgba(216,228,236,.6)); background-image: -moz-linear-gradient(to right, transparent, rgba(216,228,236,.6)); background-image: -o-linear-gradient(to right, transparent, rgba(216,228,236,.6));  background-image: linear-gradient(to right, transparent, rgba(216,228,236,.6));}
}
@media screen and (min-width: 1001px){
.news-container{max-width: 950px;}
.news-list .text-box{width: 58%;float: left;}
.news-list .img-over-box, .news-list .plyr{width: 37%;float: left;margin-right: 5%;}
}
@media screen and (max-width: 1000px){
.news-container{max-width: 480px;}
}
@media screen and (max-width: 500px){
.news-container{width: 100%;}
.news .header-box .img-box{background-position:left top;}
}
/*==============project==================*/
.no-item{position:fixed;top:50%;left: 0;width: 100%; text-align: center; margin-top: -30px;}
.no-item em{display: block;letter-spacing: 1em;margin-right: -1em;margin-top: 1em;}
.project-content .main{background-color: #001d35;}
.project-section{background-color: #fff;}
.project-section .text-box{/*text-align: center;*/width: 80%;margin: 0 auto;max-width: 480px;}
.project-section.full .text-box{max-width: 1440px;}
.project-section.full{flex-direction:column;}
.project-section.full .flex-5-12, .project-section.full .img-list{width: 100%;}
.project-section+.grid-container, .project-content .header-box+.main .grid-container{padding-top: 140px;}
.project-section:first-of-type { padding-top: 200px;}
.project-content .header-box+.main .project-section:first-of-type{padding-top: 140px;}
.project-navbar{position: absolute; bottom: 100%; right: 2%; width: 60px; margin-bottom: 30px;text-align: center;display: none;}
.project-navbar a{color: #ddd;padding:0;margin-top: 20px;}
.project-navbar .share-button{display: none;position: absolute;bottom: -5px;right: 100%;width: 150px;}
.project-navbar .share-button.active{display:block;}
.project-content .header-box+.main .project-navbar{display: block;}
.sticky-page .project-navbar{opacity: 0; pointer-events: none;}
.project-content .grid-middle{overflow: hidden;}
@media screen and (min-width: 1001px){
.project-section:nth-of-type(even) {flex-direction:row-reverse;}
.project-section:nth-of-type(even).full {flex-direction:column;}
.project-section.full div+.img-list{margin-top: 100px;}
}
@media screen and (min-width: 1401px){
.project-section.full div+.img-list{margin-top: 140px;}
}
@media screen and (max-height: 550px){
.project-navbar{margin-bottom: 20px;}
.project-navbar a {margin-top: 10px;}
}
@media screen and (max-width: 700px) and (orientation:portrait){
.project-navbar{position: fixed;display: block;bottom: 0; left: 0; width: 100%;margin-bottom: 0; background: #001d35; border-top: solid 1px #012e54; z-index: 2;}
.project-navbar a{margin-top: 0;}
.project-navbar .button-icon2{display: flex; justify-content: space-around; padding: 7px 0;margin-left: 0; margin-right: 0;}
.project-navbar .share-button { bottom: 100%;margin-bottom: 20px; right: 2%; width: 60px;}
.sticky-page .project-navbar{opacity: 1; pointer-events:auto;}
.project-content .button-top{display: none;}
}
@media screen and (max-height: 450px) and (orientation:landscape){
.project-navbar{display: none !important;}
}
/*==============classic==================*/
.classic .grid-container-large{padding-bottom: 50px;}
.timeline-list{margin-bottom: 30px;}
.timeline-list .grid-item{text-align: center;margin-bottom:50px;}
.timeline-list .text-box{z-index: 1;}
.timeline-list .grid-item p{text-align: left;text-align: justify;}
.timeline-list .grid-item .img-box+p{padding-top: 25px;}
.timeline-list .grid-item p:empty{padding-top: 0 !important;}
.timeline-list .text-box em+h2{margin-top: 12px;}
@media screen and (min-width: 1001px){
.timeline-list{display: flex;flex-direction: column;}
.timeline-list .grid-item, .timeline-list .grid-item a:first-of-type{display: flex;align-items: flex-start;width: 100%;}
.timeline-list .grid-item{width: 50%;}
.timeline-list .grid-item p{padding-top: 220px;}
.timeline-list .grid-item:nth-of-type(odd){margin-left: auto;}
.timeline-list .text-box{padding-top: 3.2em;padding-bottom: 1.5em;} 
.bg-dark .timeline-list .text-box{-moz-text-shadow:1px 1px 10px rgba(0,0,0,.7); -webkit-text-shadow:1px 1px 10px rgba(0,0,0,.7); text-shadow: 1px 1px 10px rgba(0,0,0,.7);}
.timeline-list .grid-item:nth-of-type(even), .timeline-list .grid-item:nth-of-type(even) a{flex-direction: row-reverse;}
.timeline-list .grid-item:nth-of-type(odd) .text-box{width: 60%;margin-left: -30%;}  
.timeline-list .grid-item:nth-of-type(even) .text-box{width: 60%;margin-right: -30%;}
.timeline-img{ width: 70%;}
.classic-list .grid-item:nth-of-type(odd){margin-left:0;}
.classic-list .grid-item:nth-of-type(even){margin-left: auto;}
.classic-list .grid-item:nth-of-type(even), .classic-list .grid-item:nth-of-type(even) a{flex-direction: row;}
.classic-list .grid-item:nth-of-type(odd), .classic-list .grid-item:nth-of-type(odd) a{flex-direction: row-reverse;}
.classic-list .grid-item:nth-of-type(odd) .text-box{width: 86%;margin-right: -43%;margin-left: -32%;}  
.classic-list .grid-item:nth-of-type(even) .text-box{width: 86%; margin-right: -32%;margin-left: -43%;}
.classic-list .timeline-img{ width: 88%;}    
.classic-list .grid-item:nth-of-type(4n+1) .text-box{ margin-left: -50%;}    
.classic-list .grid-item:nth-of-type(4n+1) .timeline-img{ width: 100%;}
.classic-list .grid-item:nth-of-type(4n+2) .timeline-img{ max-width:550px; }
.classic-list .grid-item:nth-of-type(4n+3) .timeline-img{max-width: 510px;}
.classic-list .grid-item:nth-of-type(4n+1) p{width: 82%;}
.classic-list .img-box:after{content:"";position: absolute;left: 0;top:0; width: 200px;height: 100%;background: url("../images/img-mask-left.png") repeat-y;} 
.classic-list .grid-item:nth-of-type(odd) .img-box:after{left:auto;right: 0; background: url("../images/img-mask-right.png") repeat-y;}
    
.timeline-line, .timeline-line:before, .timeline-line:after{position: absolute; display: block; width: 2px;height:100%; background-image: -webkit-linear-gradient( #001d35 50%, transparent 100%); background-image: -moz-linear-gradient( #001d35 50%, transparent 100%); background-image: -o-linear-gradient( #001d35 50%, transparent 100%); background-image: linear-gradient( #001d35 50%, transparent 100%);}
.timeline-line{margin-left: -1px; top:100%;left:50%;height: 150px;}
.timeline-line:before{content: "";right: 5px; top:2px;opacity: .5;}
.timeline-line:after{content: "";left: 5px; top:4px;opacity: .7;border-radius: 0 2px 0 0;}
.bg-dark .timeline-line, .bg-dark .timeline-line:before, .bg-dark .timeline-line:after{background-image: -webkit-linear-gradient( #ddd 50%, transparent 100%); background-image: -moz-linear-gradient( #ddd 50%, transparent 100%); background-image: -o-linear-gradient( #ddd 50%, transparent 100%); background-image: linear-gradient( #ddd 50%, transparent 100%);}
}

.classic-title{position: absolute;right: 2.5%;bottom: 100%;margin-bottom: 4%;text-align: right;display: flex; align-items: center;width: 95%;}
.classic-title a{border-left:solid 1px;width: 60px;height: 55px; margin-right: -20px;margin-left: 20px; flex-shrink: 0;}
.classic-title div{min-width: 0; margin-top: -0.4em; flex-shrink:1;-moz-text-shadow:1px 1px 10px rgba(0,0,0,.7); -webkit-text-shadow:1px 1px 10px rgba(0,0,0,.7); text-shadow: 1px 1px 10px rgba(0,0,0,.7);width: 100%;}
.classic-title{display: none;}
.header-box+.main .classic-title{display:flex;}
.header-box+.main #info-content{display: none;}

@media screen and (min-width: 1001px) and (max-width: 1300px){
.progress-list .grid-item:nth-of-type(odd) .text-box{width: 80%;margin-left: -40%;}  
.progress-list .grid-item:nth-of-type(even) .text-box{width: 80%;margin-right: -40%;}
.progress-list .timeline-img{ width: 60%;margin-top: 40px;}
}
@media screen and (max-width: 1600px) and (min-width: 1001px){
.timeline-list .text-box{font-size: 0.9em;}
}
@media screen and (max-width: 1000px){
.timeline-list{max-width: 600px;}
.timeline-list .grid-item{padding-bottom: 80px;margin-left:auto;margin-right: auto;}  
.timeline-list .grid-item:last-child{margin-bottom: 0;}
.timeline-list .text-box, .timeline-list .timeline-img{margin-bottom: 40px;}
.timeline-list .grid-item:before, .timeline-list .grid-item:after{position: absolute; display: block; width: 2px;height:100px;bottom:-20px;left:50%; background-image: -webkit-linear-gradient( #001d35 0%, transparent 100%); background-image: -moz-linear-gradient( #001d35 0%, transparent 100%); background-image: -o-linear-gradient( #001d35 0%, transparent 100%); background-image: linear-gradient( #001d35 0%, transparent 100%);}
.timeline-list .grid-item:before{content: ""; opacity: .6;margin-left: -10px;width: 12px;border-radius: 0 4px 0 0;}
.timeline-list .grid-item:after{content: ""; opacity: 1;margin-left: -8px;padding: 2px 0;margin-top: -2px;border-left: solid 3px #fff;border-right: solid 3px #fff;}
.bg-dark .timeline-list .grid-item:after{border-left: solid 3px #001d35;border-right: solid 3px #001d35;}
.bg-dark .timeline-list .grid-item:before, .bg-dark .timeline-list .grid-item:after{background-image: -webkit-linear-gradient( #ddd 0%, transparent 100%); background-image: -moz-linear-gradient( #ddd 0%, transparent 100%); background-image: -o-linear-gradient( #ddd 0%, transparent 100%); background-image: linear-gradient( #ddd 0%, transparent 100%);}
}
@media screen and (max-width: 600px){
.timeline-list .text-box, .timeline-list .timeline-img{margin-bottom: 30px;}
.timeline-list .grid-item {padding-bottom: 50px; margin-bottom: 40px;}
.timeline-list .grid-item:before, .timeline-list .grid-item:after { height: 70px;}
}
/*==============progress==================*/
.progress .header-box .img-box{background-image:url("../images/progress-head.jpg");}
.progress .header-mask > .img-box:after{ width: 20%;}
.progress .header-box{position: absolute;}
.progress-container{width: 80%;max-width: 600px;}
.progress .main{height: 100vh;display: flex; justify-content: center; align-items: center;}
.progress .button-top{display: none;}
.progress-list h3{color:#888;}
.progress .input-button{float: none;}
@media screen and (max-width: 1600px) and (max-height: 1050px){
.progress .header-box .img-box{background-size: 1600px;}
}
@media screen and (max-width: 900px){
.progress .header-mask > .img-box:after{display: none;}
}
@media screen and (max-height: 600px){
.progress .header-box { height: 600px;}
.progress .main{height: 600px;}
}
/*==============contact==================*/
.contact .header-box .img-box{background-image:url("../images/contact-head.jpg"); }
@media screen and (min-width: 801px){
.contact .grid-container{ width: 58%;}
}
@media screen and (max-width: 1000px){
.contact .input-column{ width: 100%;}
.contact .input-column:nth-child(odd){width: 100%; margin-right: 0;}
}
@media screen and (max-width: 800px){
.contact .header-box{background-image:url("../images/mobile/contact-head.jpg"); } 
.contact .header-box .img-box{background-image:url("../images/mobile/contact-head2.png");background-size: auto 280px;background-position: right top; }  
.contact.sticky-page .header-box .img-box{opacity: 0 !important;} 
}
@media screen and (max-width: 600px){
.contact .header-box .img-box{background-size: auto 240px;background-position: center top;}
}
/*==============form==================*/
label, input, button, textarea, select{letter-spacing: 0.1em;color: #001d35;}
form { position: relative; display: block;letter-spacing: 0.1em;}
form .input-column,form .input-row{ position: relative; display: block; line-height:0; margin:0; width:100%; box-sizing: border-box;}
form .input-column{float:left; width:50%;}
form .input-column:nth-child(odd){width:48%; margin-right: 2%;}
label { position: absolute; height: 40px; top: 10px;left: 0; line-height: 40px; display: block; white-space: nowrap;}
input[type="checkbox"] + label, input[type="radio"] + label{position: relative; display:inline-block; margin-top: 0;height: 30px;line-height:30px; padding-left:22px;}
input[type="checkbox"] + label{ padding-left:18px;}
input[type="checkbox"], input[type="radio"] { display:none;}
input[type="checkbox"] + label:before { content: ""; position: absolute; display:block;left: 1px;top:50%; margin-top: -7px;width:10px; height:10px;border:solid 2px; border-radius:3px;}
input[type="checkbox"] + label:after{content: "";position: absolute; display:block;left: 0;top:50%;margin-top: -9px; width:18px; height:18px;font-size: 18px;}
input[type="checkbox"]:checked + label:before{ border:solid 2px transparent;}
input[type="checkbox"]:checked + label:after{content: "\eed9";}
input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label{opacity: .5;}
input[type="checkbox"]:disabled + label:before{border:solid 2px rgba(136,136,136,.7);}
input[type="checkbox"]:disabled:checked + label:after{color:#888;opacity:.7;}
input[type="checkbox"].error + label:before{;border:solid 2px #d49652;}
input[type="radio"] + label:before { content: ""; position: absolute; display:block;left: 1px;top:50%; margin-top: -8px;width:12px; height:12px;border:solid 2px; border-radius:50%;}
input[type="radio"] + label:after{content: "";position: absolute; display:block;left:5px;top:50%;margin-top: -4px; width:8px; height:8px;border-radius:50%;}
input[type="radio"]:checked + label:after{background-color:#001d35; }
input[type="radio"]:disabled + label:before{border:solid 2px rgba(136,136,136,.7);}
input[type="radio"]:disabled:checked + label:after{background-color:#888;opacity:.7;}
input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="date"], select, textarea, .input-box{line-height: 40px; padding: 10px 0 10px 105px; height: 60px; width: 100%; background-color:transparent; box-sizing: border-box;border-bottom: solid 1px rgba(153,153,153,.3);}
::-webkit-calendar-picker-indicator { opacity: 0.5;margin-left: 5px;}
.input-min{padding-left: 70px !important;}
.input-small{padding-left: 90px !important;}
.input-middle{padding-left: 110px !important;}
.input-large{padding-left: 120px !important;}
.input-max{padding-left: 160px !important;}
textarea { height: 120px; line-height: 24px;padding-top: 18px;}
select {position: relative; -webkit-appearance: none;-moz-appearance: none;appearance:none; padding-right:30px; background-image: url(../images/icon-select.png);background-repeat: no-repeat; background-position:right center;background-size:auto 20px; padding-right: 0 \9; background-image: none \9; image-rendering:-webkit-optimize-contrast; }
select.full{padding-left: 13px;}
*::-ms-backdrop, select{ padding-right: 0!important;background-image:none!important; }/*IE11*/
/*select{ color: #333;}*/
select option, select.active { color:#333; }
select option:checked, select option:active, select option:focus, select option:hover{background:#001d35; color:#fff;}
.input-box{height: auto; min-height: 60px;}
.input-box label{position: relative; display:inline-block;top:auto; white-space: normal;}
.input-box.full {padding-top: 0; padding-bottom: 0;}
.input-box select{width: auto; padding-left: 12px;margin-bottom: -1px;}
.input-box input{padding-left: 0;width: auto;}
.input-box select:nth-child(2)+label{ margin-left:15px;}
form small { display: inline-block;width: 13px;color: #d49652;vertical-align:middle; font-size: 20px;}
.ime-disabled{ime-mode: disabled;}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="date"]:focus, textarea:focus, select:focus { border-bottom: solid 1px rgba(0, 29, 53,.7); }
input[type="text"].error, input[type="password"].error, input[type="tel"].error, input[type="email"].error, input[type="date"].error, textarea.error, select.error,.input-box.error { border-bottom:dotted 2px #d49652;}
img.rand-img { position: absolute; right: 0px; bottom: 2px; width:120px; height:58px;cursor: pointer;}
input[type="reset"], input[type="submit"], #submit, #reset, #submitBtn{-webkit-appearance: none; position: relative; display: inline-block;letter-spacing: 0.2em; cursor: pointer; text-decoration: none; border-bottom: solid 1px; color:#001d35;font-size: 16px;line-height: 1.8em; width: 72px; white-space: nowrap;padding-bottom: 5px;}
#submit i, #reset i, #submitBtn i{position: absolute; right: -7px; bottom: -7px;line-height: 12px;font-size: 12px;}
input[type="reset"]+input[type="submit"], #reset+#submit, #reset+#submitBtn{width: 50%;}
input[type="reset"], #reset{margin-right: 1.5%;}
#submit span, #reset span, #submitBtn span{ display: block; margin-right: -2em; line-height: 12px;}
#submit span{letter-spacing: 0.73em;}
#reset span, #submitBtn span{letter-spacing: 1.1em;}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:focus, #submit:hover, #reset:hover, #submitBtn:hover{}
input[type="button"], input[type="file"], input[type="button"]:focus, input[type="file"]:focus{ background:transparent; cursor: pointer; padding-right:5px;text-decoration: underline; color: #001d35;}
input[type="button"]:hover, input[type="file"]:hover{ text-decoration:none; }
.input-button{ margin-top: 20px;float: right;}
input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active  {/*-webkit-box-shadow: 0 0 0 40px #333 inset !important;*/transition: background-color 5000s ease-in-out 0s;}
input:-webkit-autofill {-webkit-text-fill-color: #001d35 !important;}/*Change Chrome fill*/
.input-text{ position: relative; display: block; min-height: 25px; line-height: 25px; padding-top:20px;}
.input-text div{display: block; padding-left: 25px;}
.input-text input[type="checkbox"] + label{position: absolute;top:18px;left: 0;}
.hide-box{ font-size: 15px;line-height: 24px;letter-spacing: 0.05em;text-align: justify; padding-top: 20px;}
.form-link{ text-decoration: underline;}
.form-link:hover{ text-decoration: none;}
::placeholder,::-webkit-input-placeholder{ color:#aaa;}
:-ms-input-placeholder{color: #aaa;}
::-moz-placeholder{ color: #aaa; opacity: 1;}
.form-caption{float: left;}

.bg-dark label,.bg-dark input, .bg-dark button, .bg-dark textarea, .bg-dark select{color: #ddd;}
.bg-dark select { background-image: url(../images/icon-select-w.png);}
.bg-dark input[type="radio"]:checked + label:after{background-color:#ddd; }
.bg-dark input[type="text"]:focus, .bg-dark input[type="password"]:focus, .bg-dark input[type="tel"]:focus, .bg-dark input[type="email"]:focus, .bg-dark input[type="date"]:focus, .bg-dark textarea:focus, .bg-dark select:focus { border-bottom: solid 1px #d49652; }
.bg-dark input[type="reset"], .bg-dark input[type="submit"], .bg-dark #submit, .bg-dark #reset, .bg-dark #submitBtn, .bg-dark input[type="button"], .bg-dark input[type="file"], .bg-dark input[type="button"]:focus, .bg-dark input[type="file"]:focus{color: #ddd;}
.bg-dark input:-webkit-autofill {-webkit-text-fill-color: #fff !important;}

select.select-category, .select-category select{display:inline-block; height: 50px; line-height: 50px; font-size: 36px;padding:0;text-align: center; color: #001d35; border-bottom:none;width:auto;background-image: none;cursor: pointer;}
select.select-category option, .select-category select option{ font-size: 16px; }
/*============swiper===============*/
.swiper-wrapper-center .swiper-wrapper{justify-content: center; }
.swiper-wrapper-center .swiper-slide:last-of-type{margin-right: 0!important;}
.swiper-slide {overflow: hidden;}
/*.swiper-slide-active{-ms-transform: translateZ(0)!important;-webkit-transform: translateZ(0)!important;transform: translateZ(0)!important;}//parallax.no fade*/
/*.swiper-lazy-preloader{z-index: 100;}*/
.swiper-button-next, .swiper-button-prev{width: 50px;background-size: 20px 30px;} 
.swiper-button-next{right:0;opacity: 0;}
.swiper-button-prev{left:0;opacity: 0;}
.swiper-container:hover .swiper-button-next{right:5px;opacity: 1;}
.swiper-container:hover .swiper-button-prev{left:5px;opacity: 1;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{opacity: 0;}
.swiper-container:hover .swiper-button-next.swiper-button-disabled, .swiper-container:hover .swiper-button-prev.swiper-button-disabled {opacity: 0;}

.swiper-lazy{opacity: 0;-webkit-transition: opacity 500ms ease-in; -o-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in;}
.swiper-lazy-loaded{opacity: 1;}
.swiper-slide img{width: 100%; height: auto;}
.swiper-container.button-outer .swiper-pagination{position: relative;margin-top: 40px;margin-bottom: -10px;}
.swiper-container-fade .swiper-slide .full-box div{transition:transform 1s linear 2s;transform:scale(1.1,1.1);}
.swiper-container-fade .swiper-slide-active .full-box div, .swiper-container-fade .swiper-slide-duplicate-active .full-box div{transition:transform 6s linear;transform:scale(1,1);}

.swiper-container.header-slides .full-box+a { position: absolute; left: 0;top: 0; width: 100%; height: 100%;}
.swiper-button{position: absolute;display: block;right: 2.5%;top:120px;width: 20px; z-index: 1;}
.swiper-button a{margin-bottom: 25px;}
.content-page .swiper-button{top:205px;}
.sticky-page .swiper-button{opacity: 0;pointer-events: none;}
.swiper-next, .swiper-prev{position:relative;display: block;width: 10px;height: 50px; z-index: 5;cursor: pointer;font-size: 12px; line-height: 13px;}
.swiper-prev{padding-left: 10px;border-left: solid 1px;}
.swiper-next{padding-right: 10px;border-right: solid 1px;}
.swiper-prev i{position: absolute; left: -7px; top: -3px;}
.swiper-next i{position: absolute; right: -6px; bottom: -3px;}
.swiper-prev.swiper-button-disabled, .swiper-next.swiper-button-disabled{opacity: .5;cursor:default;}
.disable .swiper-prev, .disable .swiper-next{display: none;}
.swiper-pagination-custom{position:relative;left: auto;bottom: auto;width: 25px;height: 45px; font-size: 14px;line-height: 15px;margin-left: -2px;}
.swiper-pagination-custom:before{content: ""; position: absolute; display: block;left:-12px;top:20px; width: 48px;height: 1px; border-top:solid 1px;-ms-transform: rotate(120deg);-webkit-transform: rotate(120deg);-moz-transform:rotate(120deg);-o-transform: rotate(120deg);transform: rotate(120deg);}
.swiper-current{display: block;text-align: left;margin-bottom: 15px;}
.swiper-total{display: block;text-align: right;}
/*============mb.YTPlayer===============*/
.inline-YTPlayer{max-width:inherit!important;height: 100%;}
/*.mbYTP_wrapper{ padding: 160px 0!important; margin: -160px 0!important; }*//*YTtitle Hide XX未滿版設定的橫式會裁切*/
.inlinePlayButton{ width: 50px;height: 50px; line-height: 50px;font-size: 26px;transform: scale(1);/*left: auto;right: 25px; top: auto;bottom: 80px;*/}
.mb_YTPlayer:hover .inlinePlayButton, .inlinePlayButton:hover { transform: scale(1.1) !important;}
/*.mb_YTPBar{z-index: 9!important;}*/
.video-box{background-attachment: inherit!important;}
.video-full, .video-bg{ padding-bottom:0!important; height: 100% !important; width: 100%; background-attachment: inherit !important;}
.video-full .mbYTP_wrapper iframe{width: 100% !important; height: 100% !important;margin-left: 0 !important;margin-top: 0 !important;}
.swiper-container .inlinePlayButton{/*right: 40px; bottom: 100px;*/ z-index: 10;}
@media screen and (max-width: 800px) {
.inlinePlayButton{ width: 40px;height: 40px; line-height:40px;font-size: 20px;}
}
/*調音量功能衝突隱藏*/
.mb_YTPBar .simpleSlider{display: none !important;}
.mb_YTPBar span.mb_OnlyYT {left: 190px;}
/*============plyr===============*/
.plyr__control--overlaid{ background: rgba(0, 29, 53,.8) !important;}
.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#001d35 !important;}
.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#001d35 !important;color:#fff}
.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#001d35 !important;color:#fff}
.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#001d35 !important;}
.plyr--full-ui input[type=range]{color: #001d35 !important;}
.plyr__control--overlaid{z-index: 3!important;}
.box-dark .plyr button{color: #fff;}
/*============lazy===============*/
img.lazy,picture.lazy img{background-image: url("../images/loader.gif"); background-repeat: no-repeat; background-position: 50% 50%; }
img.lazy.lazy-loaded, picture.lazy.lazy-loaded img{background-image:none;}
picture.lazy img{ opacity: 0;-webkit-transition: opacity 500ms ease-out; -o-transition: opacity 500ms ease-out; -moz-transition: opacity 500ms ease-out; transition: opacity 500ms ease-out;}
picture.lazy.lazy-loaded img{opacity: 1;}
/*============IcoFont===============*/
.justified-gallery > .entry-visible, a[data-fancybox] .img-over-box, a[data-fancybox] .img-box, a.video .img-box:before, a.video .img-over-box:before, .justified-gallery .video:before,.swiper-slide a.video:before, .icon-map:after, .icon-tel:after, .icon-link:after, input[type="checkbox"] + label:after, .html-button a:before, a.html-button:before, a .html-button:before, .breadcrumb-box a:after, .img-fadein:after{ font-family: IcoFont;speak: none;font-style: normal;font-weight: 400;font-variant: normal; text-transform: none;white-space: nowrap; word-wrap: normal;direction: ltr; line-height: 1; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;}
/*.icon-map:after, .icon-tel:after, .icon-link:after{display: inline-block;width: 22px;height: 22px;line-height: 22px;text-align: center; background:#001d35;color:#fff; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}*/
.icon-map:after{content: "\ef79";margin-left: 3px;}
.icon-tel:after{content: "\efbb";margin-left: 3px;}
.icon-link:after{content: "\ef71";margin-left: 3px;}
.html-button a:before, a.html-button:before, a .html-button:before{content: "\ef71";margin-right: 3px;}
a.video .img-box:before, a.video .img-over-box:before, .justified-gallery .video:before,.swiper-slide a.video:before{ content:"\eca7"; position:absolute; height:100%; width:100%; z-index:1;font-size: 36px; display: flex; align-items: center; justify-content: center;color:#fff;-moz-text-shadow:1px 1px 10px rgba(0,0,0,.7); -webkit-text-shadow:1px 1px 10px rgba(0,0,0,.7); text-shadow: 1px 1px 10px rgba(0,0,0,.7);}
/*============justifiedGallery===============*/
.justified-gallery > a > .caption{ display: block; opacity: 0;padding:10px;font-size: 15px;letter-spacing: 0.1em;background-color:rgba(139,110,99,.85);z-index: 1;}
.justified-gallery > a > .caption.caption-visible{ opacity: 1;}
.justified-gallery > a:after, a[data-fancybox] .img-over-box:after, a[data-fancybox] .img-box:after{content:"\ec97"; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; /*background-color: rgba(0,29,53,.5);*/ opacity: 0;color:#fff;}
.justified-gallery > a.video:after, a[data-fancybox].video .img-over-box:after, a[data-fancybox].video .img-box:after{ content: "\eca7";}
.computer .justified-gallery > a:hover:after,  a[data-fancybox]:hover .img-over-box:after, a[data-fancybox]:hover .img-box:after{opacity: 1;font-size: 36px;}
a[data-type] .img-over-box:after, a[data-type] .img-box:after{display: none;}
/*============fancybox===============*/
.fancybox-button {background: transparent;}
.fancybox-thumbs{/*background: rgba(0,0,0,.5);*/background: #000;}
.fancybox-thumbs__list a:before {border: 4px solid rgba(255,255,255,.8);}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track{background:#222;}
.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb{background:#555;}
.fancybox-construction {background: #fff;}
.fancybox-button, .fancybox-button:link, .fancybox-button:visited { color: #fff;}
.fancybox-thumbs {width: 110px;}
.fancybox-show-thumbs .fancybox-inner { right: 110px;}
.fancybox-thumbs__list a{max-width: calc(100% - 10px);}
.fancybox-is-open .fancybox-bg {opacity: .97;}
.fancybox-bg {background:rgba(0,0,0,.9);}
.fancybox-slide--html {padding: 0;}
.fancybox-slide--html .fancybox-close-small {position: fixed;padding: 0;top:2.5%;right: 2.5%;color:#fff;}
.fancybox-slide--html .fancybox-close-small svg{display: none;}
.fancybox-slide--html .fancybox-close-small:before, .fancybox-slide--html .fancybox-close-small:after{content:"";position: absolute;left: 0;top:50%; width: 100%;height: 1px; border-top: solid 1px;}
.fancybox-slide--html .fancybox-close-small:before{ transform: rotate(135deg);}
.fancybox-slide--html .fancybox-close-small:after{ transform: rotate(225deg);}
.fancybox-content { padding: 120px 0;}  
.bg-dark .fancybox-content{background: transparent;}
.bg-dark .fancybox-bg {background: url("../images/bg-blue.png");}
/*.fancybox-thumbs {top: auto; width: auto; bottom: 0; left: 0; right : 0; height: 95px; padding: 10px 10px 5px 10px; box-sizing: border-box; background: rgba(0, 0, 0, 0.3);}
.fancybox-show-thumbs .fancybox-inner {right: 0; bottom: 95px; }*/
/*============ie/lightbox===============*/
.ie { position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); display: block; top: 0; left: 0; z-index: 200; height: 100%; width: 100%; background: rgba(0,0,0,.9); overflow: auto;}
.ie-content { position: relative; display: block; margin: 0 auto; margin-top: 3%; width: 90%; max-width: 600px; height: 300px; background-color: #fff; color:#333; padding: 3%; border: solid 1px #ddd; }
.ie-content a, .ie-content a:hover{color:#333;}
a.ie-close { position:fixed; -webkit-transform: translateZ(0); transform: translateZ(0); display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px; color:#fff;}
.ie-bg{ position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); display: block; top: 0; left: 0; height: 100%; width: 100%;}

@media screen and (max-width: 1600px){
/*============main===============*/
.item-list-5{width:104%;}
.item-list-5 .grid-item{ width:21%; margin-right: 4%;}
.item-list-4{ width:105%; margin-bottom: -4%;}
.item-list-4 .grid-item{ width:28.3%; margin-right: 5%; margin-bottom: 4%;}  
}
@media screen and (max-width: 1400px) { 
/*============main===============*/
.hide-w1400{ display: none !important;} 
.item-list-3{ width: 105%;margin-bottom: -5%;}
.item-list-3 .grid-item{ width: 44%;margin-right: 6%;margin-bottom: 5%;}
.img-margin{margin: -5px;}
.img-margin+.img-margin{margin-top: 5px;}
.img-margin .img-1-2, .img-margin .img-1-3, .img-margin .img-2-3, .img-margin .img-2-5, .img-margin .img-3-5, .img-margin .img-3-7, .img-margin .img-4-7{padding:5px;}
.img-margin-bottom{margin-bottom:10px;}
.img-margin-top{margin-top:10px;}
.text-top{margin-top:5px;}
.text-bottom{margin-bottom:5px;}
.text-top2 {margin-top: 15px;}
.text-bottom2 {margin-bottom: 15px;}
.text-top3 {margin-top: 20px;}
.text-bottom3 {margin-bottom: 20px;}
.box-top{margin-top:30px;}
.box-bottom{ margin-bottom: 30px;}
.box-top2{margin-top:40px;}
.box-bottom2{ margin-bottom: 40px;}
.box-top3 { margin-top: 50px;}
.box-bottom3 { margin-bottom: 50px;}
.section-top{margin-top: 60px;}
.section-bottom{margin-bottom: 60px;} 
.section-top2{ margin-top: 80px;}
.section-bottom2{ margin-bottom: 80px;}
.section-top3{ margin-top: 100px;}
.section-bottom3{ margin-bottom: 100px;}  
.grid-container{ padding: 160px 0 100px 0;}
.grid-container-large{ padding: 180px 0 120px 0;}
.grid-container-large .item-list .grid-item{margin-bottom: 100px;}
.grid-container-small{ padding: 100px 0 100px 0;}
.grid-container-bottom{padding-bottom: 100px;}
.grid-container-bottom:first-of-type{padding-top: 100px;}
.grid-container.fancybox-content{padding-top: 120px;}
.item-list .grid-item {margin-bottom: 60px;}
.project-section+.grid-container, .project-content .header-box+.main .grid-container{padding-top: 100px;}
.project-section:first-of-type { padding-top: 160px;}
.project-content .header-box+.main .project-section:first-of-type{padding-top: 100px;}
.title2 {font-size: 2em;}
}
@media screen and (max-width: 1400px) , (max-height: 700px){
.content-navbar { top: 100px;}
.swiper-button{top:100px;}
.swiper-button a{margin-bottom: 20px;}
.content-page .swiper-button{top:180px;}
}
@media screen and (max-width: 1200px){
/*============main===============*/   
.title1 { font-size: 2.5em;}
.subtitle1 {font-size: 1em;}    
.item-list-5{ width:105%;}
.item-list-5 .grid-item{ width:28.3%; margin-right: 5%;}
.item-list-4{ width: 106%;}
.item-list-4 .grid-item{ width: 44%;margin-right: 6%;}
.item-list-2, .item-list-3, .item-list-4, .item-list-5 {margin-bottom: -50px;}
.item-list-2 .grid-item, .item-list-3 .grid-item, .item-list-4 .grid-item, .item-list-5 .grid-item{ margin-bottom: 50px;}
.swiper-button-next, .swiper-button-prev {background-size: 15px 25px;}
.swiper-button-next{right:-5px;}
.swiper-button-prev{left:-5px;}
.swiper-container:hover .swiper-button-next{right:0;}
.swiper-container:hover .swiper-button-prev{left:0;}
.swiper-container.button-outer .swiper-pagination { margin-top: 30px;}
}
@media screen and (max-width: 1100px) and (min-width: 1000px){ 
.footer-logo, .footer-info{margin-right: 6%;}
.footer-nav li strong {letter-spacing: 0.2em;}
}
@media screen and (max-width: 1000px){ 
#footer{ min-height: 615px;}
.wrapper .main{ padding-bottom: 615px;}
.wrapper+#footer{ margin-top: -615px;}
.footer-grid{display: block;max-width: 760px;}
.footer-logo {margin-left: auto;margin-right: auto;width:auto;}
.footer-nav, .footer-info{width: 46%;max-width:none;float: left;}
.footer-nav ul{width: 100%;}
.footer-logo+.footer-nav{float:none; max-width: 360px;width: auto;margin-left: auto;margin-right: auto;}
/*============main===============*/
.grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12, .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12, .grid-9-12, .grid-10-12, .grid-11-12, .grid-3-8, .grid-5-8, .grid-1-2,.grid-1-5,.grid-4-5,.grid-3-10,.grid-6-10,.grid-right{ /*float: none;*/ width: 100%;clear: both;}
.grid-space-right, .grid-space-left, .grid-space-right-small, .grid-space-left-small{ padding-right: 0;padding-left: 0;}
.flex-1-12, .flex-2-12, .flex-3-12, .flex-4-12, .flex-5-12, .flex-6-12, .flex-7-12, .flex-8-12, .flex-9-12, .flex-10-12, .flex-11-12, .flex-3-8, .flex-5-8, .flex-1-2,.flex-1-5,.flex-4-5,.flex-3-10,.flex-6-10{ width:100%; }   
.flex-container, .flex-top, .flex-bottom, .flex-center, .flex-stretch, .flex-left, .flex-right, .flex-center-justify, .flex-between, .flex-around, .flex-evenly{flex-direction: column;}
.flex-content .text-box {max-width: 100%; margin-top: 25px;}
.flex-content {padding: 0;}
.mobile-grid{ width:83.4%; margin-right:auto; margin-left:auto;}
.mobile-flex-center{align-items: center;}
.mobile-top0{margin-top: 0 !important; padding-top:0 !important;}
.mobile-bottom0{margin-bottom: 0 !important; padding-bottom:0 !important;}
.mobile-top1{margin-top: 40px;}
.mobile-bottom1{margin-bottom: 40px;}
.mobile-top2{margin-top: 60px;}
.mobile-bottom2{margin-bottom: 60px;}
.mobile-top3{ margin-top: 80px;}
.mobile-bottom3{ margin-bottom: 80px;}
.mobile-top4{ margin-top: 100px;}
.mobile-bottom4{ margin-bottom: 100px;}
.grid-full{width: 87.5%;}
.mobile-ratio56{height: 0;padding-bottom: 56.25%;}
.mobile-ratio56 .swiper-wrapper{position: absolute;}
.sidebar-nav~.section-box {padding-right: 30px;}
.title1 { font-size: 2.25em;}
.subtitle1, .subtitle2, .subtitle3 {letter-spacing: 0.2em;margin-right: -0.2em;}
.item-list{max-width: 480px;}
.grid-container-large .item-list{max-width: 600px;}
.item-list .text-box{margin-top: 40px;}
.img-mask-left:before, .img-mask-right:before{width: 150px;} 
.button-icon-text{flex-wrap: wrap;}
.button-icon-text li.button-large { max-width:50%;}
.button-icon-text div {width: 55px;}
.category-list{ margin-left: -8px;margin-right: -8px;}
.category-list li{letter-spacing: 0.1em;padding: 0 8px; }
.category-list a { padding: 7px 0;}
.category-list.underline a:hover:before, .category-list.underline a.active:before{width: calc(100% - 0.1em);}
.button-text a, a.button-text{ font-size: 1em;min-width: 110px;}
.button-text a{margin-right: 2px;margin-bottom: 5px;}
/*============other===============*/
.project-section div+.img-list{margin-top: 100px;}
.project-list .text-box{/*text-align: center;*/margin-left: auto;margin-right: auto;}
/*.project-list .text-box p{text-align: center;}*/
.content-page .mobile-ratio56+.main .grid-container{ padding-top: 100px;}
.mobile-ratio56+.main .classic-title{display: none;}
.mobile-ratio56+.main #info-content{display: block !important;}
}
@media screen and (max-width: 900px) {
.item-list-5{ width: 106%;}
.item-list-5 .grid-item{ width: 44%;margin-right: 6%;}
}
@media screen and (max-width: 800px){
.info-list > div{width: 100%;padding-right: 0; padding-top: 7px;padding-bottom: 7px}
.title-box {display: block; position: relative; height: auto;bottom: auto;right: auto;margin-bottom: 40px; text-align: left; -ms-writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb;-ms-writing-mode: horizontal-tb;writing-mode: horizontal-tb;white-space: normal; }
.title-box em {font-size: 2.25em;white-space: normal;text-overflow: inherit; overflow: visible;}
.title-text { letter-spacing: 0.4em;}
.grid-container-large .title-box{text-align: center;margin-bottom: 60px;}
.bg-blue .title-box h1, .bg-blue .title-box em{color:#ddd;}
.progress .title-box, .project .title-box, .classic .title-box, .news .title-box{display: none;}
.contact .title-box{margin-left: 10%;}
}
@media screen and (min-width: 800px) and (max-height: 800px) {
.title-box em {font-size: 6vh;}
}
@media screen and (max-width: 750px){  
.footer-grid{padding-top: 70px;}
.footer-nav, .footer-info{float:none; max-width: 360px;width: auto;margin-left: auto;margin-right: auto;}
}
@media screen and (max-width: 700px){    
.mobile-ratio56{height:385px;padding-bottom:0;}
.item-list-4, .item-list-3, .item-list-2{ width: 100%;}
.item-list-4 .grid-item, .item-list-3 .grid-item, .item-list-2 .grid-item{ width: 100%;margin-right: 0;}    
.button-icon-text li{width: 100%;}
.button-icon-text li.button-large { max-width: 100%;}
.button-icon-text .button-small{display: none;}    
}
.show-w400, .show-w500, .show-w600{display: none;}
@media screen and (max-width: 600px){
/*============main===============*/ 
.hide-w600{ display: none !important;}
.show-w600,.block-w600{display: block;}
.googlemaps {height: 400px;}
.mobile-top1{margin-top: 30px;}
.mobile-bottom1{margin-bottom: 30px;}
.box-top3, .mobile-top2{margin-top: 40px;}
.box-bottom3, .mobile-bottom2{margin-bottom: 40px;}
.section-top{margin-top: 50px;}
.section-bottom{margin-bottom: 50px;}
.section-top2, .mobile-top3{ margin-top: 60px;}
.section-bottom2, .mobile-bottom3{ margin-bottom: 60px;}
.section-top3, .mobile-top4{ margin-top: 70px;}
.section-bottom3, .mobile-bottom4{ margin-bottom: 70px;}
.grid-container, .grid-container-large{ padding: 130px 0 70px 0;}
.content-page .grid-container{ padding: 150px 0 70px 0;}
.grid-container-large .item-list .grid-item{margin-bottom: 60px;}
.grid-container-small{ padding: 70px 0 70px 0;}
.grid-container-bottom{padding-bottom: 70px;}
.grid-container-bottom:first-of-type{padding-top: 70px;}
.grid-container.fancybox-content{padding-top: 100px;}
.item-list .grid-item {margin-bottom: 50px;}
/*.item-list .text-box { margin-top: 30px;}*/
.project-section div+.img-list{margin-top: 70px;}
.project-section+.grid-container, .project-content .header-box+.main .grid-container{padding-top: 70px;}
.project-section:first-of-type { padding-top: 130px;}
.project-content .header-box+.main .project-section:first-of-type{padding-top: 70px;}
.content-page .mobile-ratio56+.main .grid-container{ padding-top: 70px;}
/*.bg-blue .main:before{content: "";position:fixed;right: 0;top:0; width: 150px;height: 150px;background-image: -webkit-linear-gradient(45deg,transparent 50%, rgba(0,29,53,.8) 70%); background-image: -moz-linear-gradient(45deg,transparent 50%, rgba(0,29,53,.8) 70%); background-image: -o-linear-gradient(45deg,transparent 50%, rgba(0,29,53,.8) 70%); background-image: linear-gradient(45deg,transparent 50%, rgba(0,29,53,.8) 70%);z-index: 2; pointer-events: none;}
.bg-light .main:before{content: "";position:fixed;right: 0;top:0; width: 150px;height: 200px;background-image: -webkit-linear-gradient(65deg,transparent 50%, rgba(255,255,255,.8) 70%); background-image: -moz-linear-gradient(65deg,transparent 50%, rgba(255,255,255,.8) 70%); background-image: -o-linear-gradient(65deg,transparent 50%, rgba(255,255,255,.8) 70%); background-image: linear-gradient(65deg,transparent 50%, rgba(255,255,255,.8) 70%);z-index: 2; pointer-events: none;}
.bg-light .nav-toggle, .bg-light .content-navbar a{-moz-text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff; -webkit-text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff; text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;}*/    
.button-top{display: none;}
.page a{margin-right: 15px;}
.page select{letter-spacing: -0.05em;margin-right: 15px;}
.content-button{width: 118%;margin-left: -9%;}
.content-button > a, .content-button .share-button {margin-right: 15px;}     
p, .text0, .html-edit, .text-small {letter-spacing: 0.1em;}
.title1{font-size: 2em;}
.title2 { font-size: 1.8em;}
.title3 {font-size: 1.6em;}
.title5 {font-size: 1.125em;}
.text-year {font-size: 2.5em;}   
.html-edit br{display:none;}
.mobile-content br{display:none;}
.mobile-content span{display: inline;}
.other-list .img-over-box { width: 70px; margin-right: 10px;}
.content-category.text-line-horizontal:after{display: none;}
.content-category em:first-child{display: block;}
form .input-column{ width: 100%;}
form .input-column:nth-child(odd){width: 100%; margin-right: 0;}
label { height: 30px; line-height: 30px;}
input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="date"], select{line-height: 30px;height: 50px;}
.input-box{line-height: 30px; min-height: 50px;}
textarea {padding-top: 12px;}
img.rand-img { width:100px; height:48px;}
.item-list-2, .item-list-3, .item-list-4, .item-list-5 {margin-bottom: -40px;}
.item-list-2 .grid-item, .item-list-3 .grid-item, .item-list-4 .grid-item, .item-list-5 .grid-item{ margin-bottom: 40px;}
.item-list-2 .img-box+.text-box, .item-list-2 .plyr+a .text-box, .item-list-3 .img-box+.text-box, .item-list-3 .plyr+a .text-box, .item-list-4 .img-box+.text-box, .item-list-4 .plyr+a .text-box, .item-list-5 .img-box+.text-box, .item-list-5 .plyr+a .text-box {margin-top: 20px;}
.img-caption { bottom: 5px;font-size: 0.875em; padding: 0 10px;}
.button-text a, a.button-text{min-width:auto; }
}
@media screen and (max-width: 600px),  (max-height: 600px){     
a.button-icon2 i, .button-icon2 a i, .button-icon-text i { margin-bottom: 0;} 
.content-navbar { top: 80px;right: 20px;}
.swiper-button{top:80px;right: 20px;}
.swiper-button a{margin-bottom: 15px;}
.content-page .swiper-button{top:165px;} 
.project-navbar{right:10px;}
.classic-title {right: 15px;margin-bottom:10px;}
.classic-title a{width: 50px;padding: 0;margin-right: -10px;margin-left: 10px;}
}
@media screen and (max-width: 500px) { 
/*============main===============*/
.hide-w500{ display: none !important;}
.show-w500,.block-w500{display: block;}
.grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid, .mobile-grid, .project-section .text-box { width: 87%;}
.flex-space-right{padding-right: 6.5%;}
.flex-space-left{padding-left: 6.5%;}
.flex-space-right-big{padding-right: 13%;}
.flex-space-left-big{padding-left: 13%;}
.title-box em {font-size: 2em;}
/*============other===============*/ 
.project-list .flex-8-12{width: 118%;}
.contact .title-box{margin-left: 6.5%;}
}
@media screen and (max-width: 400px){ 
/*============main===============*/
.hide-w400{ display: none !important;}
.show-w400,.block-w400{display: block;}
.title1{font-size: 8vw;}
.title2{font-size: 6.9vw;}
.subtitle1, .subtitle2, .subtitle3 {letter-spacing: 0.1em;margin-right: -0.1em;}
.title4 {font-size: 1.3em;}
.text-date2 {font-size: 2em;}
}
@media screen and (max-width: 350px){
.footer-nav li strong {letter-spacing: 0.2em;}
a.button-icon2, .button-icon2 a { padding: 0 5px;}
a.button-icon2 i, .button-icon2 a i, .button-icon-text i {font-size: 25px;line-height: 25px;}
.other-list .img-over-box {display: none;}
label, input, button, textarea, select {letter-spacing: 0;}
input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="date"], select, textarea, .input-box{padding-left: 95px;}
.input-min{padding-left: 60px !important;}
.input-small{padding-left: 80px !important;}
.input-middle{padding-left: 100px !important;}
.input-large{padding-left: 110px !important;}
.input-max{padding-left: 150px !important;}
}
@media screen and (max-height: 500px) {
.mobile.bg-blue .grid-container-large:before{position:absolute;}
}
@media screen and (max-height: 420px) {
.swiper-button{display: none;}
.index-box{max-height: calc(100vh - 100px); }   
.button-top{display: none;}  
}
.horizontal { display: inherit; }
.vertical { display: none; }
@media screen and (orientation:landscape){
}
@media screen and (orientation:portrait) {
.horizontal { display: none; }
.vertical { display: inherit; }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  /* IE10+ hack*/  
}
/*_:-ms-fullscreen, :root {} ie11+ hack
_:-ms-lang(x), {} ie10+ hack */