@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Noto+Serif+TC:wght@400;600;700&display=swap");
@import url(ElegantIcons/style.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, progress, section, source, video { display: block; }
table, table td { border-collapse: collapse; border-spacing: 0; border: none; }
fieldset, img { border: 0; vertical-align: bottom; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; }
a, del, ins { text-decoration: none; }
ol, li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
abbr, acronym { border: 0; font-variant: normal; }
sup, sub { vertical-align: baseline; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; border: 0; }
/*============clear===============*/
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*============animate===============*/
a, .visible, .hidden, a:before, a:after, .owl-prev, .owl-next, input, textarea, select, a i, .back-box, .icon-box, #header, .text-more-ver:before, .text-more-ver:after, a em:before, .img-box, .button-icon{ -webkit-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; transition: all 250ms ease-in; }
.button-icon i{ -webkit-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; }
.transition-1s, .img-box img, .img-over-box img, .header-img:before, .img-box:before, .img-over-box:before{ -webkit-transition: all 1000ms ease-out; -o-transition: all 1000ms ease-out; -moz-transition: all 1000ms ease-out; transition: all 1000ms ease-out;}
.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;}

.img-bg .zoomout, .icon-box, .page a:hover, .news-list a:hover .img-box{ -ms-transform: scale(1.3);-webkit-transform: scale(1.3);-moz-transform: scale(1.3);-o-transform: scale(1.3);transform: scale(1.3);}
a:hover .img-box img, a:hover .img-over-box img, .img-list a:hover, .button-icon a:hover, a.button-icon:hover, a.button-down:hover, .owl-prev:hover, .owl-next:hover,.button-text a:hover {-ms-transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);z-index: 1;}
.img-box img, .img-over-box img, .img-bg .loaded, a:hover .icon-box, .news-list .img-box{ -ms-transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}

.hidden { opacity: 0;}
.visible { opacity: 1; }
.fade { display: none; }
.delay-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-list li { opacity: 0;opacity:1\9\0;/*IE9hack*/ -webkit-animation: fadeInUp 0.9s 1;  animation: fadeInUp 0.9s 1;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;}
.delay-list li:nth-child(10n+1) {-webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}
.delay-list li:nth-child(10n+2) {-webkit-animation-delay: 0.4s;  animation-delay: 0.4s;}
.delay-list li:nth-child(10n+3) {-webkit-animation-delay: 0.6s;  animation-delay: 0.6s;}
.delay-list li:nth-child(10n+4) {-webkit-animation-delay: 0.8s;  animation-delay: 0.8s;}
.delay-list li:nth-child(10n+5) {-webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-list li:nth-child(10n+6) {-webkit-animation-delay: 1.2s;  animation-delay: 1.2s;}
.delay-list li:nth-child(10n+7) {-webkit-animation-delay: 1.4s;  animation-delay: 1.4s;}
.delay-list li:nth-child(10n+8) {-webkit-animation-delay: 1.6s;  animation-delay: 1.6s;}
.delay-list li:nth-child(10n+9) {-webkit-animation-delay: 1.8s;  animation-delay: 1.8s;}
.delay-list li:nth-child(10n+10) {-webkit-animation-delay: 2.0s;  animation-delay: 2.0s;}
.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%;}
.particles { position: absolute; width: 100%; height: 100%; z-index: 0; }
/*============iframe===============*/
.iframe-16x9 { 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 { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/*.iframe-16x9:before{ content: ''; position: absolute; top:0; right: 0; width: 3px; height: 100%; background:#fff; z-index: 1;}*/
/*==============text-ver==================*/
.text-ver, #nav li a em{ 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; display: inline-block;}
.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; }
@media screen and (min-width: 600px){.text-ver-computer{ 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-ver.line-break p, .text-ver-computer.line-break p{white-space: normal;}
.text-ver.right, .text-ver-computer.right {width: 100%;}
/*============grids===============*/
.grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid { width: 90%; margin: 0 auto; position: relative; }
.grid-max { max-width: 1500px; }
.grid-large { max-width: 1300px;}
.grid-middle { max-width: 1100px;}
.grid-small { max-width: 750px;}
.grid-min { max-width: 400px; }
.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-12-12 { float: left; display: block; position: relative; }
.grid-1-12 { width: 8.3%; }
.grid-2-12 { width: 16.6%; }
.grid-3-12 { width: 25%; }
.grid-4-12 { width: 33.3%; }
.grid-5-12 { width: 41.6%; }
.grid-6-12 { width: 50%; }
.grid-7-12 { width: 58.3%; }
.grid-8-12 { width: 66.6%; }
.grid-9-12 { width: 75%; }
.grid-10-12 { width: 83.3%; }
.grid-11-12 { width: 91.6%; }
.grid-12-12 { width: 100%; }
.grid-3-8 { width: 38%; }
.grid-5-8 { width: 62%; }
.grid-1-2 { width: 47%; }
.grid-space{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 4%;}
.grid-right{ float: right;}
/*============style===============*/
body { font-family:"Tenor Sans", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "儷黑 Pro", "LiHei Pro", sans-serif; font-size: 16px; word-wrap: break-word; overflow-x: hidden; color: #373a3f;}
h1, h2, .title-font, #nav b, .section-box{ font-family:"Tenor Sans", "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;}
p, .text{ font-size: 1em; line-height: 1.7em; letter-spacing: 0.1em; }
p{margin-bottom: 10px; }
p span, h1 span, h2 span, h3 span, h4 span, li span, b span, em span, .br, .contact-info span{ display: inline-block; }
::selection { background: #000; color: #fff; }
a { color: #373a3f; }
a:hover { color: #b81b24;}
strong { font-weight: bold; }
em, i { font-style: normal; }
big { font-size: 1.125em; }
small { font-size: 0.9375em; }
h1, .title1 { font-size: 2.25em; line-height: 1.25em; letter-spacing: 0.05em;}
h2, .title2{ font-size: 1.875em; line-height: 1.3em; letter-spacing: 0.1em; }
h3, .title3 { font-size: 1.5em; line-height: 1.4em; letter-spacing: 0.05em;}
h4, .title4 { font-size: 1.25em; line-height: 1.4em; letter-spacing: 0.1em; font-weight: bold;}
h5, h6 { font-size: 1em; }
.title5, .title6 { font-size: 1.125em; line-height: 1.3em; letter-spacing: 0.1em;}
.title5 { color: #b81b24; font-weight: bold;}
.title7 { font-size: 1em; line-height: 1.3em; letter-spacing: 0.1em;}
.text1 { font-size: 1em; letter-spacing:0.2em; line-height: 2.5em;}
.text2 { font-size: 0.9375em; letter-spacing:0.1em;}
.text3 { font-size: 15px; line-height: 24px;}
.text-small { font-size: 14px; line-height: 16px;}
.text-spacing-clear{letter-spacing:0 !important;}
.text-date{ display: block;font-size: 13px; line-height: 13px; color: #b81b24;}
.text-date2{display:inline-block;font-size: 13px; line-height: 15px; background:#b81b24; color: #fff !important;padding:3px 8px; margin-right: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius:3px;}
.text-year{position:relative; display:block; height: 40px; font-size: 14px;line-height: 14px; z-index: 1; color:#b81b24; text-align: center;}
.text-year small{font-size: 12px;}
.color-white { color: #fff; }
.color-black { color: #000;}
.color1, .grid-item b, .grid-item em { color: #b81b24; }
.color2 { color: #373a3f; }
.color3 { color: #677075; }
.grid-item h1, .text-ver.text-box h2, .text-ver.text-box h3, .text-ver.text-box p, .project-list h1, .project-list h3, .foundation-list b{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 
.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;}
.align-left{ float: left;}
.align-right{ float: right;}
.align-center{ margin: 0 auto;}
.text-right{ text-align: right;}
.text-left{ text-align: left;}
.text-center{ text-align: center;}
.text-top{margin-top:25px;}
.text-bottom{margin-bottom:25px;}
.text-top2{margin-top:35px;}
.text-bottom2{margin-bottom:35px;}
.box-top{margin-top:50px;}
.box-bottom{ margin-bottom: 50px;}
/*============base===============*/
body, html { height: 100%; }
.wrapper { min-height: 100%; width: 100%; position: relative; padding-top: 1px; margin-top: -1px; background-repeat:repeat-y; background-position: top center;}
.main { position: relative; padding-bottom: 299px; width: 100%;padding-right: 50px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;overflow: hidden;}
#footer { position: relative; width: 100%; margin-top: -300px; min-height: 300px; z-index: 10;overflow: hidden; }
.wrapper:before{content: ''; position: absolute; bottom: 299px; left: 0; width: 100%; height: 100%; background-repeat:no-repeat; background-position: bottom center; background-size: 100%;}
/*============nav===============*/
.logo { position:absolute; display: block; width: 95px; height: auto; top:25px; left: 25px; z-index: 11; }
.logo img{ width:100%; height:auto;}
#header { position:fixed; display: block; height: 100%; top: 0px; right: 0px; z-index: 9; overflow: hidden; width:50px; background:#080c16;}
#nav { position: absolute;height: 100%; width:100%; overflow: hidden;top: 0px; right: 50px; padding-right: 50px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#nav ul{ position: relative; height: 100%; width: 100%; max-width:350px; margin: 0 auto;}
#nav li {position: relative; display: block; float: left; width: 14%; height: 100%; text-align: center; border-left: solid 1px #313131;}
#nav li:first-child{ border-left: none;}
#nav li a{ position:relative; display:inline-block; color:#fff; width: 20px; padding: 15px; font-size: 16px; line-height: 22px; text-align: center;}
#nav li a b{display: block; padding-top: 100px;font-weight: normal;}
#nav li a em{ font-size: 12px;line-height: 20px;letter-spacing: 0.1em; color:#b81b24;padding-top: 10px;}
#nav li > a:hover {padding-top: 0;}
#nav li.active > a b:before{content:''; position: absolute; display: block; margin-left: 5px;top: 0; width: 7px; height: 20px; background-color:#b81b24;}
#nav li div{ display:inline-block;}
#nav li div a{color:#b2b2b2;}
#nav li div a:before{ content:''; position: absolute; display: block; left: 50%; top:0; margin-left: -7px; width: 15px; height: 1px; background-color:#313131;}
#nav a.active, #nav li a:hover{color: #b81b24;}
body.active #header{ width:450px; z-index: 20;height: 100%; top: 0px; right: 0px;}
body.active #nav {right: 0;}

.header-button{position: absolute;height: 100%;width: 50px; top: 0px; right: 0;z-index: 1;}
.header-button a{ position: relative; display: block; width: 50px; height: 50px; line-height: 50px; border-bottom: solid 1px #313131; color: #999999; text-align: center; font-size: 20px;}
.header-button a:hover{color: #080c16; background: #b81b24;}
.header-button i{line-height: 50px;}
.header-button .icon_menu, .header-button .icon_close{font-size: 1.3em;}
.header-button .social_facebook{font-size: 0.9em;}
.header-button .icon_close{display: none;}
body.active .header-button .icon_close{display: inline-block;}
body.active .header-button .icon_menu{display: none;}
body.active .header-button{border-left: solid 1px #313131;}

/*============footer===============*/
#footer { background: url('../images/footer-bg.jpg') top center repeat-x #080c16; color: #cccccc; font-size: 15px; line-height: 20px;}
#footer a{ color: #ccc;}
#footer a:hover{ color: #b81b24;}
.footer-content{width: 95%; max-width: 1500px; margin: 0 auto;}
#footer em{ display: block; font-size: 12px; line-height: 12px; letter-spacing: 2px; margin-bottom: 15px; color: #5b5e63;}
.footer-logo, .footer-info, .footer-nav li{ position: relative; display: block; float: left; height: 220px; padding: 80px 0 0 2%; border-left: solid 1px #1a212f;}
.footer-logo{ width: 12%;padding-left: 0; text-align: center;border-left:none;}
.footer-logo img{width: 100%;max-width: 100px; height: auto;}
.footer-info{width: 26%;}
.footer-info li{position: relative; display:block; padding-left: 25px; min-height: 40px;}
.footer-info i{position: absolute; left: 0; top:12px;display: block; font-size: 16px;}
.footer-info b{ display: inline-block; padding: 8px 0; letter-spacing: 1px; font-weight: normal;}
.footer-nav li{ width: 8%;}
.footer-nav a{display: block; letter-spacing: 4px; padding: 10px 0; white-space: nowrap;}
.footer-copyright { font-size: 12px; line-height: 18px; color:#5b5e63; padding-top: 15px;}
#footer .footer-copyright a{ color:#5b5e63;}
#footer .footer-copyright a:hover{ color:#fff;}
/*============html-edit===============*/
.html-edit { line-height: 1.75em;}
.html-edit a{ color:#b81b24; text-decoration:underline;}
.html-edit a:hover { color: #fff; background:#b81b24;text-decoration:none;}
.html-edit img { max-width: 100%; height:auto; }
.html-edit h1{ font-size: 1.25em;}
.html-edit li { list-style: outside; margin-left: 30px; }
.html-edit ul li { list-style-type: disc; }
.html-edit ol li { list-style-type: decimal; }
.html-edit p,.html-edit h1,.html-edit h2,.html-edit h3{ margin-bottom: 10px;}
.html-edit p{line-height: 1.75em;}
/*============main===============*/
.content { position: relative; display: block; padding-top: 200px; padding-bottom: 100px;min-height: 1000px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.img-bg {position: absolute;background-position: center 0;background-repeat: no-repeat;height: 1000px;width: 100%;left: 0;top: 0;z-index: -1;}
.bg-bottom .content{min-height: 900px;padding-bottom: 250px;}
.grid-content{position: relative; padding-right: 140px; width: auto; }
.grid-content.small{padding-right: 75px;}
.grid-content.large{padding-right: 350px;}
.grid-aside, .grid-content .title-box{ position: absolute; right: 0;top: 0;z-index: 1;}
.grid-aside{width: 300px;}
.grid-aside a{display: block;}
.grid-aside a:hover{ margin-left: 5px; }
.title-box, .section-box{position:relative; margin-left: 40px;}
.title-box h2{position: relative; display: inline-block; padding-right: 5px; color:#000;}
.color-white .title-box h2{ color:#fff;}
.title-box em{position: absolute; display: block; right: 50%; margin-right: -14px; top: 100%; font-size: 12px; line-height: 14px; padding-top: 10px; letter-spacing: 0; color: #b81b24;}
.section-box p{margin-left: 30px;margin-bottom: 0;}
.section-column{overflow: hidden; padding-bottom: 40px;}
.subtitle{position: relative; display:inline-block; font-size:1em; line-height:1em; letter-spacing: 0.3em; background:#b81b24; color: #fff; padding: 10px 7px 10px 4px; margin-left: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius:3px; }
.subtitle2{position: relative; display:inline-block; font-size:14px; line-height:14px; letter-spacing: 2px; background:#899297; color: #fff; padding: 4px;margin-left: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius:3px; }
.text-box{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.imgtext-item{ position: relative; display: block; margin-top: 8%; clear: both;}

.img-caption{ position:absolute; display:block; bottom:0; font-size:0.95em; line-height: 1.4em; color:#fff; z-index:1; left:0; padding: 0 10px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: left;}
.img-box,.img-over-box{ position:relative; display: block; text-align:center; overflow:hidden; }
/*.img-box{background: url(../images/img-bg.jpg) center center no-repeat #ddd; background-size: cover;}
.img-box:before, .img-over-box:before{content: ''; position: absolute; display: block; width: 100%; height: 100%; background: #fff; top:0; right: 0; z-index: 1;}
.mobile .img-box:before, .mobile .img-over-box:before{width:0;}
.img-box.visible:before, .img-over-box.visible:before{width:0;}*/
.img-box img,.img-over-box img{ width:100%; height:auto;}
.img-box img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.img-box.height img{ width:auto; height:100%; }
.video .img-box:before, .video .img-over-box:before, .img-list .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-color: rgba(204,0,0,0.8); }
a:hover .back-box, .back-box.active{ color: #fff; filter: alpha(opacity=100); opacity: 1;}
.back-box.active{background-color: rgba(0,0,0,0.5);}
a:hover .back-box.active{background-color: rgba(204,0,0,0.8);}
.vertical-box, .icon-box, .num-box{ position: absolute; display:block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto; height: 50px; color:#fff; filter: alpha(opacity=0); opacity: 0; text-align:center;}
.back-box.active .num-box{filter: alpha(opacity=100); opacity: 1;}
.icon-box{ height: 60px; width: 60px; line-height: 60px; background:#b81b24; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius:50%;}
a:hover .vertical-box, a:hover .icon-box{ filter: alpha(opacity=100); opacity: 1;}
a:hover .vertical-box i{ margin-top: -10px;}
.img-box i, .img-over-box i, .img-list i{display:block;font-size:45px; padding-bottom: 10px;}
.img-box em, .img-over-box em, .img-list em{display:block;font-size:12px; line-height: 12px; letter-spacing: 0.1em;}
.img-box b, .img-over-box b, .img-list b{display:block;font-size:14px; line-height: 20px; font-weight: normal; color:#fff;}
.img-box big{display:block;font-size:40px; line-height: 40px;}

.grid-item{ position:relative; display:block; float:right;}
.grid-item a:hover{color: #000;}
.text-more-ver{position: relative; padding-left: 20px;}
.text-more-ver:before{content: 'MORE'; display: block; color:#b81b24; position: absolute; left: 0; top: 30px; font-size: 12px;line-height: 12px; letter-spacing: 0; white-space: nowrap;}
.text-more-ver:after{content: ''; display:block; background:#b81b24; width: 1px; height: 25px; position: absolute; left: 5px; top: 0px;}
.text-more-ver:before,.text-more-ver:after{display: none;}
a .text-more-ver:before,a .text-more-ver:after{display: block;}
a:hover .text-more-ver{ color: #373a3f; }
a:hover .text-more-ver:before{top: 45px;}
a:hover .text-more-ver:after{height: 40px;}
.text-more-ver.type2{padding-left: 30px;}
.text-more-ver.type2:before{top: auto;bottom: 30px; border: solid 1px #b81b24;padding: 1px;}
a .text-more-ver.type2:after{display: none;}
a:hover .text-more-ver.type2:before{top:auto; background:#b81b24; color: #fff; }

.item-list{ width:102%;}
.item-list .grid-item{ position:relative; display:block; float:left; width:23%; margin:0 2% 4% 0;}
.item-list .img-box{padding-bottom:66%; }
.item-list h2{margin-top: 15px; margin-bottom: 2px;}
.item-list b{display: inline-block;}
.item-list h1{white-space: inherit;}
.item-list p:not(:empty){margin-top: 15px;}
.item-list .img-over-box+div{margin-top: 15px;}
.item-list .text-date{margin-bottom: 5px;}
.item-list.type-2 h1{  display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; overflow: hidden;font-weight:600;}
.item-list.type-3 .grid-item{width: 29.3%;margin: 0 4% 6% 0;}
.item-list.type-2 a:hover h1,.item-list.type-3 a:hover h1{color: #8C0808;}

.info-list{ position: relative;}
.info-list li{ position: relative; display: block; border-bottom:solid 1px #cccccc;}
.info-list small{ position: absolute; display: block; left: 0; top:16px; font-size: 15px; line-height: 15px; letter-spacing: 1px; padding-right: 7px; color: #666; border-right:solid 1px #b81b24;}
.info-list strong{ display: block; font-weight: normal; padding:12px 0 12px 82px; line-height: 24px; min-height:24px;}
.info-list i{display: none; margin-left:5px; color: #b81b24; }
.info-list a i{display: inline-block;}
.text-tel{ font-size: 24px; color: #b81b24;}

.computer-img{ display:block; opacity: 1 !important;}
.mobile-img{ display:none; opacity: 0 !important;}
.show-w500{ display: none;}
.circle-line{position: absolute;}
.circle-line img{width: 100%; height: auto;}
/*============button===============*/
.under-line b, .side-line b{position: relative;display:inline-block;}
.under-line b:before{ position: absolute; content: ''; display: block; height: 2px; width: 0px; bottom: 0px; left: 50%; background-color:#b81b24; z-index: 1; }
.under-line.left a b:before{ left: 0;}
.under-line a:hover b:before, .underline a.active b:before{width: 100%; left: 0%;}
/*.side-line b:before{ position: absolute; content: ''; display: block; height: 0px; width: 2px; top: 0px; right: -5px; background-color:#b81b24; z-index: 1; }
.side-line a:hover b:before{height: 100%;}
.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: 0; top:0;}
.border-line a:after, .border-line a:hover:after{right: 0; bottom: 0;}
.border-line a:hover:before, .border-line a:hover:after{ width: 100%; height: 100%;}
.border-line a:hover:before{ border-top: solid 1px #b81b24; border-left: solid 1px #b81b24;}
.border-line a:hover:after{ border-bottom: solid 1px #b81b24; border-right: solid 1px #b81b24;}*/

.category-list{ margin-top: -8px; white-space: normal; height: 650px;}
.category-list a{ position:relative; display: inline-block;font-size: 16px; line-height: 20px; padding:10px 5px; letter-spacing:1px;}
.category-list a:before{ position: absolute; content: ''; display: block; height: 1px; width: 16px; bottom: 0px; left: 50%; margin-left: -8px; background-color:#b81b24; z-index: 1; }
.category-list a:last-child:before{display: none;}
.category-list a:hover, .category-list a.active{color: #b81b24;}

.button-icon a, a.button-icon, a .button-icon{ position: relative;display: inline-block;/*float: left;*/ width: 65px; height: 58px; padding-top: 7px; text-align:center; overflow:hidden; font-size:12px;line-height: 24px; letter-spacing: -1px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;color: #666666;}
.button-icon i{ display:block; font-size: 30px; line-height: 30px; height: 30px; color: #b81b24;}
.button-icon a:hover i, a.button-icon:hover i, a:hover .button-icon i{ color: #fff;}
.button-icon a:hover, a.button-icon:hover, a:hover .button-icon{ background-color:#b81b24; color: #fff;}
.button-icon i.social_facebook{font-size: 20px;}
.button-icon span{position: relative; display: block; margin:0 auto; width: 30px; height: 30px; line-height: 30px; overflow: hidden;}
.button-icon img{ position:absolute; left: 0; top:0; width: auto; height: 100%;}
.button-icon a:hover img{left: -100%;}
.button-icon.button-group{margin-left: -15px; width: 110%;}
.icon_mail_alt{margin-top: -3px; margin-bottom: 3px;}
/*.button-icon-text a, a.button-icon-text, a .button-icon-text{ position: relative; display:inline-block; background: #b81b24; color:#fff; font-size: 16px; line-height:24px; padding: 8px 35px; text-align: center; text-decoration:inherit; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}
a.button-icon-text, a .button-icon-text{ display:block; width: 140px; padding: 8px 0px;}
.button-icon-text i{display:inline; margin-left: -20px; margin-right: 3px; font-size:20px; filter: alpha(opacity=0); opacity: 0;vertical-align: middle;}
.button-icon-text a:hover i, a.button-icon-text:hover i, a:hover .button-icon-text i{ margin-left: -10px; filter: alpha(opacity=100); opacity: 1;}*/
.button-text a, a.button-text, a .button-text{ position: relative; display:inline-block; text-decoration:inherit; line-height: 50px; letter-spacing: 0.4em; padding-top: 8px; min-height: 185px;border-left: solid 1px rgba(0,0,0,0.2);}
.button-text li:first-child a{border-right: solid 1px rgba(0,0,0,0.2);}
.button-text em{color: #b81b24; font-size: 12px; letter-spacing: 0;padding-top: 3px;}

/*a.button-top { position: fixed; z-index: 9; right: 2%; bottom: 30px; display: block; width: 50px; height:50px; line-height: 25px; font-size:12px;text-align:center; margin: 0 auto;overflow:hidden;filter: alpha(opacity=0); opacity: 0; color:#000 !important;}
a.button-top.active { filter: alpha(opacity=100); opacity: 1; }*/
a.button-down{ position:relative; display:block; width:40px; height:40px; line-height: 40px; font-size: 18px; z-index:1; text-align:center; background: #1c2b4b; color: #fff; margin: 0 auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-top: 50px;overflow: hidden;}
.button-down i{line-height: 40px;display: inline-block;}
/*============page===============*/
.page { width: 120%; margin-left: -10%; margin-top: 30px; text-align: center;}
.page a { padding: 0 5px; min-width:30px; height: 40px; line-height: 40px; display: inline-block; margin:0 2px;vertical-align: middle; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.page a:hover,.page a.active { color: #b81b24;}
.page a.active { border: solid 1px #b81b24;}
.page-prev,.page-next{ font-size: 24px;}
/*==============index==================*/
#index .wrapper{background-image: url('../images/index-bg2.jpg');background-color: #3e6977; background-repeat: no-repeat;}
#index .section-box,#index .classic-list, .index-project-list{ padding-top: 40px;}
#index-open .circle-line{width:200px; left: 50%; margin-left:-15px; margin-top: -30px;}
#index-about .circle-line{width:200px; right: -170px; top: 42%;}
#index-foundation .circle-line{width:200px; left: -100px; top:100%;}
#index-classic .circle-line{width:200px; right: -130px; top: 42%;}
#index-project .circle-line{width:200px; left: -50px; top:80%;}
#index-news .circle-line{width:200px; right: -180px; top: 52%;}
.cloud-bg { position:fixed; display:block; background-image: url('../images/cloud-bg.png');background-repeat: repeat-x; width:100%; height:934px; overflow:hidden;}
.cloud{position: absolute; display: block; left: 0;top:180px; width:100%; height:385px; background-image: url('../images/cloud.png');background-repeat: repeat-x; background-size: contain;z-index: 1;} 
#index-open {text-align: center; color: #1c2b4b;padding-top: 250px;}
#index-open em{font-size: 100px; line-height: 110px; display: block;}
#index-open h1{font-size: 17px; line-height: 30px; letter-spacing: 15px;}
#index .classic-list .text-box{min-height: 180px; margin-right: 50px;}
/*.index-project-list{width: 50%; max-width: 450px;}*/
#index-project{display: flex;flex-direction: row-reverse;}
.index-project-list{width: 50%; max-width:inherit;flex-grow: 1;}
#index-news{padding-top: 300px;padding-bottom: 0;max-width: none;}
#index-classic{padding-top: 200px;}
/*.cloud-mask{position: absolute; display: block; left: 0;bottom:0; width:100%;padding-bottom: 19.7%; background-image: url('../images/cloud-mask.png');background-repeat: repeat-x; background-position: center center;background-size: contain;z-index: 2;}*/
#index .news-list{overflow: hidden;}
.news-list .owl-item{padding-top: 10px;}
#index-contact{padding-top: 270px;}
.index-building{position: absolute;display: block;width: 100px;height: 510px; background: url('../images/index-building.png') no-repeat;background-size: contain; right: 20%;top:180px;}
#work-box.lightbox-item {padding-top: 80px;}
/*==============about==================*/
#about .wrapper{background-image: url('../images/about-bg.jpg');}
#about1 .circle-line{width:200px;top: 50%; left: 5%; }
#about2 .circle-line{width:250px;top: 60%;right:0; }
#about3 .circle-line{width:180px;top: -100px; left: 0; }
#about .main{min-height: 3300px;}
#about .cloud-bg{position: absolute;top:-180px;z-index: 1; height:500px; background-image: url('../images/tablet/cloud-bg.png') ;}
.about-cloud{position: absolute; display: block; width: 100%; height: 600px; background: url('../images/about-bg.jpg') no-repeat center top;}
#about1 .section-box{height: 380px;}
#about2{padding-top: 150px;}
#about2 .section-box{height: 550px;}
#about3 .section-box{height: 500px;}
/*==============team==================*/
#team .wrapper{background-image: url('../images/team-bg.jpg');}
#team1 .circle-line{width:230px; right: 5%; bottom: 10%;}
#team2 .circle-line{width:220px;top:50px; left: -5%; }
#team .main{min-height: 2400px;}
#team1 .section-box{height: 280px;}
#team2{padding-top: 100px;}
.team-list .grid-item{float: none; min-height:100px;margin-bottom: 20px; }
.team-list .circle-box{position: absolute; display: block;top:0; left: 0; width: 85px;height: 75px;padding-top: 10px; text-align: center; border: solid 1px #fff;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.team-list strong{font-size: 36px;line-height: 36px; font-weight:normal;}
.team-list h1{font-size: 20px;}
.team-list p{ padding: 10px 10px 0 100px; width:100%; max-width: 660px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#team-item1,#team-item7{margin-left: 14%;}
#team-item2,#team-item6{margin-left: 7%;}
#team-item3,#team-item5{margin-left: 2%;}
/*==============chronology==================*/
#chronology .wrapper{background-image: url('../images/chronology-bg.jpg');}
#chronology .wrapper:before{background-image: url('../images/chronology-bg-b.png'); background-position: bottom right;}
#chronology .grid-content{margin-bottom: 50px;}
.chronology-list .grid-item{ float:none;display:block; min-width: 24px;padding:0 15px;}
.chronology-list h1{position: relative; padding-top: 15px; max-height: 500px; line-height: 1.4em;float: right;}
.chronology-list .text-year{margin: 0 -18px 0 -12px; border-bottom: solid 1px #d6a7a9;}
.chronology-list .text-year:before{content: '';position: absolute; bottom: -3px; right: 50%; margin-right: -3px; width: 6px; height: 6px; background:#b81b24; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.chronology-list i{ display: none; margin-top: 5px;}
.chronology-list a i{display: inline-block;}
.chronology-list a:hover{ color: #b81b24;}
.chronology-list a:hover h1{padding-top: 20px;}
.chronology-list a:hover .text-year:before{ bottom: -5px; margin-right: -5px;width: 10px; height: 10px;}
/*==============foundation==================*/
#foundation .wrapper{background-image: url('../images/foundation-bg.jpg');}
/*#foundation .img-bg {background-image: url('../images/foundation-bg.jpg');background-position: right 0px;}
#foundation2 .img-bg {background-position: right -1000px;}		
#foundation3 .img-bg {background-position: right -1800px;}*/
#foundation1 .circle-line{width:230px; right: 30px;top: 55%;}
#foundation2 .circle-line{width:200px;top:-150px;right:50px; }
#foundation3 .circle-line{width:180px;top: -150px; right:-100px; }
#foundation1 .text-ver.right{width: 55%;}
#foundation1 .foundation-project-list{width: 45%; padding-top: 0; max-width: 520px;}
#foundation1 .foundation-project-list .img-over-box{background: #000; -moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);box-shadow: 3px 3px 10px rgba(0,0,0,0.3);}
#foundation2{padding-top: 100px;min-height: 800px;padding-bottom: 0;}
#foundation2 .grid-middle{max-width: 900px;}
#foundation2 .grid-content{ background: rgba(255,255,255,.9); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 60px 180px 60px 60px;min-height: 300px;}
#foundation2 .title-box{right: 60px;top:auto;}
.foundation-list .text-year{background:#b81b24;color: #fff; padding-top: 10px; height: 40px; width: 50px; margin-bottom: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.foundation-list h1, .foundation-list b{display: block; max-height: 400px;}
.foundation-list a:hover{color:#b81b24;}
#foundation3{padding-top: 100px;min-height: 1200px;}
/*#foundation3 .img-bg{height: 1200px;}*/
.foundation-hand{position: absolute; bottom: 50px; left:10%;width: 90%; max-width: 609px;height: auto;} 
/*==============project==================*/
#project .wrapper{background-image: url('../images/project-bg.jpg');}
#project-content .wrapper{background-image: url('../images/project-content-bg.jpg');}
#project .wrapper:before, #project-content .wrapper:before{ background-image: url('../images/project-content-bg-b.png'); background-position: bottom right;}
.project-list .text-box{padding: 40px 0; text-align: center; opacity: 0;}
.project-list .swiper-slide-active .text-box{ opacity: 1;}
.project-list .img-box{ background: #000; -moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);box-shadow: 3px 3px 10px rgba(0,0,0,0.3); padding-bottom: 56.25%;}
.project-list .img-box img{opacity: .5;}
.project-list .swiper-slide-active .img-box img{ opacity: 1;}
#project-web{background-color: #ccc;}
.web-container{ position: relative; width: 100%; max-width: 1024px; margin: 0 auto;}
.web-container img{width: 100%; height: auto;}
#project-web .button-icon{text-align: center; position: fixed; top: 0; left: 0; width: 100%; z-index: 10; background: #fff;font-size: 0;height: 65px; overflow: hidden;}
#project-web .button-icon a{width: 25%; max-width: 100px;-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
#project-web.scrollDown .button-icon{height: 0px;}
#project-web #contact {position: relative;display: block; padding: 80px 0;background-position: center top;}
.project-contact{position: relative; width: 90%; padding: 40px; max-width:580px; min-height: 480px; background: #fff;-webkit-border-radius: 3px; -moz-border-radius:3px; border-radius: 3px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.project-contact .title-box{width: 50px;}
.project-contact .title-box p{margin-top: 10px; padding-top: 15px; border-top:solid 1px #b81b24;}
#project-web .project-contact{margin: 0 auto; }
#project-content .project-contact{width:100%;max-width:800px;}
#project-content .img-box{padding-bottom: 100%;}
/*==============classic==================*/
#classic .wrapper{background-image: url('../images/classic-bg.jpg');}
/*.classic-list .owl-item:nth-child(odd) .grid-item{ margin-top: 20px;}*/
.classic-list .grid-item{ width: 100%;}
.classic-list .text-box{ min-height: 250px; max-height: 370px; display: block; margin: 0 auto;}
.classic-list .img-over-box{width: 90%;max-width: 170px;overflow: inherit;clear: both;margin: 0 auto;}
.classic-list p{ margin: 35px 20px 0 0;}
/*==============news==================*/
#news .wrapper{background-image: url('../images/news-bg2.jpg');}
#news-content .wrapper{background-image: url('../images/news-bg2.jpg'); background-repeat: no-repeat;}
#news .wrapper:before, #news-content .wrapper:before{ background-image: url('../images/news-bg-b2.png');}
.news-list .grid-item{height: 550px; width: 6.25%;}
.news-list.owl-carousel .grid-item{width: 100%;}
.news-list a{display: block; padding: 60px 0 20px 0; width: 90%; margin-left: 5%; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}
.news-list a:hover{ padding-top:70px; background: #fff;}
.news-list .text-ver{display: block;width: 40px; margin:0 auto;}
.news-list .img-box{position: absolute; top:0; left: 50%; margin-left: -25px; width: 50px; height:50px; background: #3090ae; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.news-list .img-box img{opacity: 0.6;}
.news-list a:hover .img-box img{opacity: 1;}
.news-list a:hover{color:#373a3f; }
.news-list h1{max-height: 480px;}
.icon-new em:after, .icon-hot em:after{content: 'NEW'; display: inline-block; color:#fff; background:#373a3f; font-size:12px; letter-spacing: 0; padding:2px 6px; margin-top: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius:3px;-ms-transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); /*transform-origin: top left;*/}
.icon-hot em:after{content: 'HOT'; background:#b81b24; } 
.grid-aside .grid-item{float: none; margin-bottom: 20px;}
/*==============work==================*/
#work-content .wrapper{background-image: url('../images/work-content-bg.jpg');}
#work-content .wrapper:before{ background-image: url('../images/work-content-bg-b.png');}
#work-content .text-ver{display: block; clear: both;}
#work-content .title-box h3{line-height: 1.2em;}
#work-content .button-icon{border: solid 1px #b81b24;color:#b81b24;margin-bottom: 15px}
#work-content .button-icon:hover{color:#fff;}
/*==============soul living==================*/
#soul-living .wrapper{background:#fff;}
#soul-living .content{width:100%; max-width:none; min-height:900px; overflow:hidden;}
#living-intro{background:url('../images/soul-living-top-bg.jpg') no-repeat center top; background-size:cover;}
#living-intro:after,#living-login:after{content:''; position:absolute; left:0; right:0; bottom:0; height:36%; background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96)); pointer-events:none;}
#living-intro .grid-large{min-height:900px;}
#living-intro .text-ver.right{position:absolute; right:8%; top:-120px; width:auto; z-index:2; padding:30px 20px; background:rgba(255,255,255,.28);}
#living-intro .section-box{height:600px;}
#living-intro .section-box h3{font-size:20px; line-height:32px; margin-left:25px; white-space:normal;}
#living-intro .section-box p{max-height:600px;}
#living-login{background:url('../images/soul-living-bottom-bg.jpg') no-repeat center top; background-size:cover; padding-top:120px; padding-bottom:120px;}
#living-login:before{content:''; position:absolute; left:0; top:0; bottom:0; width:55%; background:linear-gradient(to right, rgba(255,255,255,.98), rgba(255,255,255,.72), rgba(255,255,255,0)); pointer-events:none;}
.living-category{position:relative; z-index:2; min-height:300px; margin:0 auto 90px; display:block; text-align:left; font-family:"Tenor Sans", "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;}
.living-category h3{font-size:20px; line-height:42px; margin-left:35px; font-weight:normal;}
.living-category-list{display:inline-block; list-style:none; margin:0; padding:0;}
.living-category-list li{position:relative; display:block; text-decoration:inherit; line-height:50px; letter-spacing:0.4em; padding-top:8px; min-height:185px; padding-left:0; padding-right:0; border-left:solid 1px rgba(0,0,0,0.2);}
.living-category-list li:first-child{border-right:solid 1px rgba(0,0,0,0.2);}
.living-category b{display:inline; font-size:18px; line-height:24px; font-weight:normal;}
.living-category em{display:inline; color:#b81b24; font-size:12px; line-height:14px; letter-spacing:0; margin-top:8px;}
#soul-login-box.lightbox-item{display:block; max-width:760px; min-height:300px; margin-top:0; box-shadow:0 6px 24px rgba(0,0,0,.18); z-index:2;}
#soul-login-box .grid-content{padding-right:170px;}
/*==============soul living list==================*/
#soul-list .wrapper{background:url('../images/news-bg.jpg') no-repeat center top; background-size:cover;}
#soul-list .grid-content{padding-right:190px;}
.soul-search{margin-bottom:55px;}
.soul-search .input-row{float:left; width:25%; margin-right:3%; padding-left:18px; padding-right:18px; background:rgba(255,255,255,.82); border-bottom:none; box-sizing:border-box;}
.soul-search .input-row label{left:18px;}
.soul-search .input-button{float:left; width:10%; padding-top:0;}
.soul-result{clear:both; margin-bottom:25px;}
.soul-result span{color:#b81b24;}
.soul-store-list{width:100%;}
.soul-store-list .grid-item{width:30%; margin:0 5% 55px 0; text-align:center;}
.soul-store-list .grid-item:nth-child(3n){margin-right:0;}
.soul-store-list .img-over-box{padding-bottom:100%; background:#fff;}
.soul-store-list .img-over-box img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain;}
.soul-store-list h1{font-size:20px; line-height:28px; margin-top:15px;}
.soul-empty{padding:80px 0; text-align:center;}
.soul-popup-layer{position:fixed; left:0; right:0; top:0; bottom:0; z-index:9999; overflow:hidden;}
.soul-popup-layer .lightbox-bg{background:rgba(255,255,255,.25);}
.soul-popup-box.lightbox-item{display:none; max-width:980px; max-height:calc(100vh - 160px); min-height:0; margin-top:80px; overflow-y:auto; box-shadow:0 5px 20px rgba(0,0,0,.25);}
.soul-popup-main{font-family:"Tenor Sans", "Noto Serif TC", Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;}
.soul-popup-left{float:left; width:36%;}
.soul-popup-left figure{margin-bottom:25px;}
.soul-popup-left img{width:100%; height:auto;}
.soul-popup-right{float:right; width:58%;}
.soul-popup-right h2{font-size:24px; line-height:34px; padding-bottom:15px; border-bottom:solid 1px #ddd; margin-bottom:18px;}
.soul-popup-right ul{list-style:none; padding:0; margin:25px 0 0;}
.soul-popup-right li{line-height:2em;}
.soul-offer{line-height:2em;}
.soul-popup-gallery figure{position:relative; padding-bottom:100%; margin:0; overflow:hidden; background:#fff;}
.soul-popup-gallery figure img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.soul-popup-gallery .owl-dots{text-align:center; padding-top:12px;}
.soul-popup-gallery .owl-dot{display:inline-block; width:8px; height:8px; margin:0 5px; border:solid 1px #b81b24; border-radius:50%;}
.soul-popup-gallery .owl-dot.active{background:#b81b24;}
.soul-popup-right h3{font-size:22px; line-height:34px; text-align:center; padding-bottom:15px; border-bottom:solid 1px #ddd; margin-bottom:22px;}
.soul-popup-right .soul-popup-info{list-style:none; padding:0; margin:0;}
.soul-popup-hr{display:block; height:1px; border:0; border-top:solid 1px #ddd; margin:24px 0;}
.soul-popup-intro{clear:both; padding-top:28px; line-height:2em;}
.soul-offer *, .soul-popup-intro *{animation:none !important; opacity:1 !important;}
/*==============contact==================*/
#work-box{max-width:750px;}
.contact-info{position: absolute; top: 100%; color: #fff; margin: 20px 0;}
.contact-info a{color: #fff;}
.lightbox-item .grid-content{padding-right: 170px;}
/*==============form==================*/
form { position: relative; display: block;}
form .input-column,form .input-row, .hide-box{ position: relative; display: block; line-height:0; margin:0; width:100%; border-bottom: solid 1px #ddd;}
form .input-column,form .input-row{ min-height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
form .input-column{float:left; width:48%; margin-right: 2%;}
.input-text{ position: relative; display: inline-block; min-height: 20px; line-height: 24px; margin:0; padding: 13px 0;}
.input-text a{ display:inline-block;}
form label { position:absolute; height: 20px; top: 15px; line-height: 20px; display: block; font-size:15px; color: #5b5e63; border-right:solid 1px #b81b24;padding-right: 10px;}
form input[type="text"], form input[type="password"], form select, form textarea, .input-box{ line-height: 20px; padding-top: 15px; padding-bottom: 15px; padding-left:100px; height: 50px; width: 100%; background-color:transparent; border: solid 1px transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color:#000; letter-spacing: 0.05em;}
form textarea { height:203px; line-height: 24px;padding-top: 40px;padding-left: 12px;}
form select {-webkit-appearance: none;-moz-appearance: none;appearance:none; padding-left:100px;padding-top: 15px;}
.input-box{ line-height: 26px; min-height: 50px; height:inherit; padding-top: 10px;}
form small {font-size:16px; width: 15px; display: inline-block; color:#b81b24; font-weight:bold; }
form input[type="text"]:focus, form input[type="password"]:focus, form textarea:focus, form select:focus { }
form input[type="text"].error, form input[type="password"].error, form textarea.error, form select.error { border-bottom: dotted 2px #b81b24; }
img.rand-img { position: absolute; right: 1px; bottom: 1px; width:110px; height:48px;cursor: pointer;}
input[type="reset"], input[type="submit"], #submit, #reset,.submitBTN{width:60px; height: 45px; display: inline-block; text-align: center; font-size:18px; cursor: pointer; background:transparent; color:#b81b24;}
input[type="reset"], #reset{color:#5b5e63;}
input[type="submit"]:hover,input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:focus, #submit:hover, .submitBTN:hover{}
input[type="button"], input[type="file"], input[type="button"]:focus, input[type="file"]:focus{ background:transparent; color:#b81b24; cursor: pointer; font-size:16px;padding-right:5px;text-decoration: underline; }
.input-button{ float: right;}
@-webkit-keyframes autofill { to {color: #000; background: transparent;} }/*Change Chrome fill*/
input:-webkit-autofill {-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;}
.hide-box span{ display: block; padding: 0 0px 10px 15px;}
.form-link{ color: #b81b24; text-decoration: underline; display: inline-block;}
.form-link:hover{ text-decoration: none;}
.pswp-box { position: absolute; display: block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto; width: 85%; max-width: 500px;height: 300px; background-color: #fff; padding: 40px; border: solid 1px #ddd; text-align: left; }
/*form label { position: relative;}*/
/*============pswp===============*/
.pswp__bg { opacity: 0.9 !important; }
.pswp__caption__center { font-size: 15px !important; }
.pswp__zoom-wrap { text-align: center; }
.pswp__zoom-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0);}
.pswp__wrapper { line-height: 0; width: 100%; max-width: 1280px; position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.pswp__video_wrapper { position: relative; padding-bottom:56.25%; height: 0; width: 100%; }
.pswp__video_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
video { width: 100% !important; height: auto !important; }
@media screen and (max-height: 750px) {
.pswp__wrapper { max-width: 960px;}
}
@media screen and (max-height: 600px) {
.pswp__wrapper { max-width: 720px;}
}
@media screen and (max-width: 790px) and (orientation:landscape){
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background:rgba(0, 0, 0, 0) !important;}
.pswp__counter, .pswp__caption{ display:none;}
}
/*============owl===============*/
/*.owl-height .owl-stage {display: -webkit-box;display: -moz-box;display: -ms-box;display: box;}*//*fix autowidth*/
.owl-prev, .owl-next{ position:absolute; display:block; top:45%; margin-top:-20px; height:40px; width:40px; line-height: 40px; z-index:1; text-align:center; color: #999;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.owl-prev:hover, .owl-next:hover{color: #b81b24;}
.owl-prev i, .owl-next i{font-size:20px;line-height: 40px;}
.owl-prev{ left:-50px;}
.owl-next{ right:-50px;}
.owl-carousel.off {display: block;}
.owl-prev.disabled, .owl-next.disabled{filter: alpha(opacity=0); opacity: 0;}
.owl-dots { text-align: center; margin-top: 20px; -webkit-tap-highlight-color: transparent;}
.owl-dots .owl-dot {display: inline-block; zoom: 1; *display: inline; }
.owl-dots .owl-dot span { width: 3px; height: 3px; margin: 8px 8px; background: #b81b24; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background: #b81b24; width: 9px; height: 9px; margin: 5px 5px;}
.button-inside{overflow: hidden;}
.button-inside .owl-nav button.owl-prev, .button-inside .owl-nav button.owl-next{color: #333; background-color: #fff;}
.button-inside:hover .owl-prev {left: 5px;}
.button-inside:hover .owl-next{right: 5px;}
.button-inside .owl-dots{ position: absolute;bottom: 0; width: 100%;}
.button-inside .owl-dots .owl-dot span, .button-inside .owl-dots .owl-dot.active span, .button-inside .owl-dots .owl-dot:hover span{background:#fff;}
.owl-carousel.owl-rtl .owl-item{direction: ltr;}
#index .owl-dots .owl-dot span, #index .owl-dots .owl-dot.active span, #index .owl-dots .owl-dot:hover span{background:#2c577f;}
.text-ver .owl-dots, .text-ver .owl-dots{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;}
.text-ver .owl-dots{position: absolute;width: 100%;right: 0;bottom:0px;}
/*============googlemaps===============*/
#map_canvas{font-size: 0;}
#map_canvas iframe{width:100%; height:550px; z-index: 9;}
/*============justifiedGallery===============*/
.justified-gallery{overflow: inherit !important;}
.justified-gallery > a > .caption, .justified-gallery > div > .caption, .justified-gallery > figure > .caption{display: initial !important;padding: 8px !important;opacity: 0;}
/*============plyr===============*/
.plyr__control--overlaid{ background: rgba(195,13,35,.8) !important;}
.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#b81b24 !important;}
.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#b81b24 !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:#b81b24 !important;color:#fff}
.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#b81b24 !important;}
.plyr--full-ui input[type=range]{color: #b81b24 !important;}	
/*==============swiper==================*/
.swiper-pagination{position: relative;width: 100%;}
.swiper-pagination-bullet {width: 3px;height: 3px; margin: 8px;background: #b81b24;opacity: 1;}
.swiper-pagination-bullet-active{width: 9px;height: 9px; margin: 5px;background: #b81b24;}
/*.skrollr-desktop body {	height: 100% !important;}*/
#skrollr-body {height: 100%;	overflow: visible;position: relative;	}
/*============ie/lightbox===============*/
.ie { position: fixed; display: block; top: 0; left: 0; z-index: 200; height: 100%; width: 100%; background: url(../images/bg-alpha.png) repeat; overflow: auto;}
.ie .ie-content { position: relative; display: block; margin: 0 auto; width: 90%; max-width: 600px; height: 300px; top:50%; margin-top: -150px; background-color: #fff; padding: 3%; border: solid 1px #ddd; }
.ie-close{ position:absolute; display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px;}
.lightbox-close {position:absolute; display: block; width: 30px; height: 25px; right: 15px; top: 0; text-align: center; padding-top: 20px; background: #b81b24;color: #fff; }
.lightbox-close:hover{color: #fff;padding-top: 25px;}
body.lightbox{overflow:hidden !important;}
.lightbox-container {position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%; overflow: auto;z-index: 5;}
.lightbox-container, .lightbox-item{ display: none;}
.lightbox-container.active, .lightbox-item.active{ display: block;}
.lightbox-bg{ position: fixed; display: block; top: 0; left: 0; height: 100%; width: 100%;}
.lightbox-item, .lightbox-content{ position: relative; width: 90%; padding: 70px; max-width:1100px; margin: 0 auto; background: #fff;-webkit-border-radius: 3px; -moz-border-radius:3px; border-radius: 3px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 190px;min-height: 400px;}
/*============nav===============*/
@media screen and (max-height: 800px){
#nav li a b{padding-top: 40px; }
}	
@media screen and (max-height: 600px){
body.active #header{overflow:auto;}
#nav,.header-button{min-height: 500px;}
#nav li a b{padding-top: 20px; }
#nav li a{ line-height: 20px;padding: 10px 15px;}
#nav li a em{letter-spacing: 0;}
}	
@media screen and (max-width: 980px){
#header{height: 40px; top: 15px; right: 10px;}
#header, .header-button{width: 40px;}
.header-button a{width: 40px;height: 40px;line-height: 40px;font-size: 16px;}
.header-button i {line-height: 40px;}
#nav, .main{padding-right: 40px;}	
}
@media screen and (max-width: 500px){
#header{height: 30px;}
body.active #header{ width:100%;}
#header, .header-button{width: 30px;}
.header-button a{width: 30px;height: 30px;line-height: 30px;}
.header-button i {line-height: 30px;}
#nav, .main{padding-right: 30px;}	
}
@media screen and (max-width: 400px){
#nav ul{max-width:200px;}
#nav li{width: 24%;height: 50%;}
li#nav-about{height: 100%;}
}
/*============mobile===============*/
@media screen and (min-width: 400px){
#index .grid-large, #index .grid-middle, #index .grid-small, #index .grid-max, #index .grid-min, #index .grid{width: 80%;}
}
@media screen and (min-width: 600px){
.owl-carousel .owl-item img.img-ver{height: 100%; max-height: 500px; width: auto; margin: 0 auto;}
}
@media screen and (min-width: 980px) {
.imgtext-item .text-box{padding: 4% 0 0 5%;}
.imgtext-item:nth-child(odd) .text-box{ float: right;}
.imgtext-item:nth-child(even) .text-box{padding: 4% 5% 0 0; text-align: right;}
.imgtext-full .text-box{padding:0 !important;}
.imgtext-full .grid-5-12{width: 100%;}
.imgtext-full .info-list li {width: 48%; margin-right: 2%;float: left;}
}
@media screen and (min-width: 1921px) {
.wrapper, .img-bg{background-size: 100%;}
}
@media screen and (max-width: 1300px){
/*============footer===============*/
.main { padding-bottom: 489px;}
#footer {margin-top: -490px; min-height: 490px;}
.wrapper:before{bottom: 489px; background-size: 130%;}
.footer-logo, .footer-info, .footer-nav li{ height: auto;}
.footer-logo, .footer-info{border-left:none; }
.footer-logo {width: 20%;}
.footer-info {width: 36%;}
.footer-nav {position: relative;margin-left: 20%; clear: both;}
.footer-nav li {border-left:none; width: 31%; max-width: 150px;padding: 50px 0 60px 2%;}
/*============main===============*/
h1, .title1{font-size: 1.875em;}
.text1 {line-height: 2em;}
.grid-content{ padding-right: 110px;}
.grid-content.large{padding-right: 280px;}
.grid-aside {width: 250px;}
.title-box, .section-box{ margin-left: 30px;}
.section-box p { margin-left: 20px;}
.subtitle{margin-left: 5px;}
.item-list{width: 103%;}
.item-list .grid-item{width: 30.3%;margin: 0 3% 6% 0;}
.item-list.type-2{width: 105%;}
.item-list.type-2 .grid-item{width: 45%;margin: 0 5% 8% 0;}
.item-list.type-2 .img-over-box{max-height: 250px;}
#index-news{max-width: 600px;}
/*============other===============*/
#index .wrapper{background-image: url('../images/tablet/index-bg2.jpg');}
#about .wrapper{background-image: url('../images/tablet/about-bg.jpg');}
#team .wrapper{background-image: url('../images/tablet/team-bg.jpg');}
#foundation .wrapper{background-image: url('../images/tablet/foundation-bg.jpg'); background-position: right top;}
.cloud-bg{height:500px; background-image: url('../images/tablet/cloud-bg.png') ;}
#index .content { padding-top: 90px; padding-bottom: 0px;min-height: 800px;}
#index-open.content {padding-top: 200px !important;}
#index-news.content {min-height: 950px!important;}
#index-news .page{margin-top: 0;}
#index-contact.content { padding-top: 160px; padding-bottom: 0px;min-height: 900px !important;}
.index-building{width: 70px;top: 220px;}
#index-contact .grid-min .title-box{margin-right: 100px;}
#index-open .circle-line,#index-about .circle-line,#index-foundation .circle-line,#index-classic .circle-line,#index-project .circle-line,#index-news .circle-line{width:150px;}
#index-about .circle-line,#index-classic .circle-line,#index-news .circle-line{top: 300px;right: -120px;}
#index-classic .circle-line{right: -90px;}
#about2{padding-top: 0;}
#about2 .section-box {height: 410px;}
}
@media screen and (max-width: 1200px){
.box-top{margin-top:35px;}
.box-bottom{ margin-bottom: 35px;}
.grid-content.large {padding-right: 0;}
.grid-aside{position: relative; width: auto;margin-top:50px;}
.grid-aside .grid-item{ margin-bottom: 15px;}
.lightbox-item, .lightbox-content{ padding: 45px;}
.lightbox-item .grid-content { padding-right: 140px;}
.lightbox-close{ right: 0px;padding-top: 5px;}
form input[type="text"], form input[type="password"], form select, form textarea, .input-box{letter-spacing:0;}
/*============other===============*/
#news .news-list{margin: 0 auto; max-width: 650px;}
.news-list .grid-item{width: 12.5%;}
.category-list{height: 1100px;}
#project-content .project-contact{max-width:inherit;}
}
@media screen and (max-width: 980px) {
.logo{width: 70px; top: 20px; left: 20px;}
/*============main===============*/
/*.grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid{ width: 80%;}*/
.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{ float: none; width: 100%;}
.grid-space{padding-right: 0;}
.wrapper:before{ background-size: 170%;}
.bg-bottom .content{min-height: 600px;}
h2, .title2{font-size: 1.7em;}
h3, .title3 {	font-size: 1.4em;}
h4, .title4 { font-size: 1.125em;}
.title5, .title6 {font-size: 1em;}
.category-list a {font-size: 15px;}
.content{padding-top: 150px;}
.text-top{margin-top:20px;}
.text-bottom{margin-bottom:20px;}
.text-top2{margin-top:30px;}
.text-bottom2{margin-bottom:30px;}
.imgtext-item{margin-top: 70px;}
.grid-content{ padding-right: 80px;}
.title-box, .section-box {margin-left: 20px;}
.section-box p {margin-left: 15px;}
.page a { min-width: 25px;height: 35px;line-height: 35px;margin: 0;}
.info-list { margin-top: 20px;}
form{font-size: 15px;}
form input[type="text"], form input[type="password"], form select, form textarea, .input-box{height: 45px;padding-top: 12px;}
form textarea {height: 180px;padding-top: 40px;}
form label{top: 12px;}
form .input-column, form .input-row {min-height: 45px;}
img.rand-img{height: 44px;width: 80px;}
/*============other===============*/
#index-open em {font-size: 80px;line-height: 90px;}
#contact-box.lightbox-item{min-height: 600px; margin-top: 70px;}
#about1 .section-box {height: 500px;}
#about3{padding-top: 200px;}
#foundation2 .grid-content{ padding: 40px 140px 40px 40px;}
#foundation2 .title-box {right: 40px;}
.classic-list p {margin: 20px 10px 0 0;}
#foundation3{padding-top: 0px;}
/*#foundation3 .text-ver{height: 1400px;}
#foundation3 .section-box{display: block;float: left;}
#foundation3 .section-box h3{margin-bottom: 20px;}*/
#foundation .section-column{max-width: 450px;}
#foundation1 .section-column,#foundation1 .section-column p{ height: 550px;}
#foundation3 .section-column, #foundation3 .section-column h3, #foundation3 .section-column p{ height: 560px;}
#foundation3 .section-column p{ /*margin-bottom: 20px;*/ margin-left: 0;white-space:normal;}
#foundation3 .section-box p br{ display: none;}
.foundation-list .text-year{height: 35px; width: 45px;}
}
@media screen and (max-width: 980px) and (min-width: 600px) {
.grid-content{ padding-right: 110px;}
}
@media screen and (max-width: 980px) and (min-width: 700px) {
.info-list li{width: 48%; margin-right: 2%; float: left;}
}
@media screen and (max-width: 850px) {
.item-list{width: 105%;}
.item-list .grid-item{width: 45%;margin: 0 5% 8% 0;}
.item-list.type-3{width: 100%; max-width: 450px; margin-left: auto;}
.item-list.type-3 .grid-item{width: 100%;margin: 0 0 30px 0;}
}
@media screen and (max-width: 700px) {
/*============footer===============*/
.main { padding-bottom: 699px;}
#footer {margin-top: -700px; min-height: 700px;}
.wrapper:before{bottom: 699px;}
.footer-content {width: 85%; max-width: 450px;}
.footer-logo {width: 100%;}
.footer-info {width: 48%; padding-top: 50px;}
.footer-nav{margin-left: 0;}
/*============main===============*/
.hide-w700{ display: none !important;}
.bg-bottom .content {padding-bottom: 150px;}
.text1 {/*letter-spacing: 0.1em;*/line-height: 1.85em;}
#map_canvas iframe {height: 400px;}
/*============other===============*/
#index .wrapper{background-size:auto 5200px;}
#about .wrapper{background-image: url('../images/mobile/about-bg.jpg');}
#team .wrapper{background-image: url('../images/mobile/team-bg.jpg');}
#foundation .wrapper{background-image: url('../images/mobile/foundation-bg.jpg');}
#foundation .wrapper:before{background-image: url('../images/foundation-bg-b.png');background-size: 100%;}
#index .content { min-height:700px;}
#index-contact.content { padding-top: 90px;}
.index-building{right: 5%;top: 300px;}
#index-project{display:block;}
.index-project-list{width: 100%;max-width:inherit;}
#foundation1 .text-ver.right{width: 100%;}
#foundation1 .foundation-project-list{width: 100%; padding-top: 40px; float: none;}
/*.index-project-list{width: 60%;}*/
#index-open em {font-size: 50px;line-height: 60px;}
#index-open h1 {font-size: 16px; line-height: 26px; letter-spacing: 7px;}
#contact-box.lightbox-item{margin-top: 0;}
#about2 h2 br{display: none;}
#about2 .circle-line{right: -5%;}
#team1 .section-box {height: 520px;}
#team2 { padding: 0;padding-bottom: 30px;}
#team2 .circle-line{display: none;}
.team-list .grid-item{margin-left: 0 !important; margin-bottom: 10px;}
.team-list .circle-box{width: 60px;height: 55px;padding-top: 5px;}
.team-list p{padding: 0 0 0 70px;}
.team-list strong {font-size: 24px;line-height: 24px;}
.team-list h1 { font-size: 18px;}
}
@media screen and (max-width: 600px) {
/*============main===============*/
.hide-w600{ display: none !important;}
.computer-img{ display:none; opacity: 0 !important;}
.mobile-img{ display:block; opacity: 1 !important;}
h1, .title1 { font-size: 1.7em;}
h2, .title2{font-size: 1.6em;}
h3, .title3 {	font-size: 1.2em;}
.title5, .title6{letter-spacing: 0;}
.grid-content, .grid-content.small { padding-right: 0; padding-top: 40px;}
.grid-content .title-box{right: 10px; top: -120px;}
.grid-content .title-box h2 em{right: 100%; top: 0; margin-right: 0;padding-top: 0;}
.grid-content.grid-hor-mobile { padding-right: 0;padding-top: 0;}
.grid-content.grid-hor-mobile .title-box{position: relative;margin-left: 0;right:auto; top:auto; width: 100%;}
.grid-content.grid-hor-mobile .text-ver{-ms-writing-mode: inherit; -webkit-writing-mode: inherit; -moz-writing-mode: inherit;-ms-writing-mode: inherit; writing-mode: inherit;white-space:normal;}
.grid-content.grid-hor-mobile .text-ver br{display: none;}
.lightbox-item, .lightbox-content, .project-contact {padding: 8%;}
.lightbox-item .title-box em{display: none;}
#soul-living .content{min-height:720px;}
#living-intro .grid-large{min-height:720px;}
#living-intro .text-ver.right{position:relative; right:auto; top:auto; padding-top:130px;}
#living-intro .section-box{height:auto; max-width:520px;}
#living-intro .section-box h3{margin:0 0 20px 0; font-size:20px; line-height:32px;}
#living-login{padding-top:80px;}
.living-category{writing-mode:inherit; white-space:normal; min-height:0; margin-bottom:40px;}
.living-category h3{margin:0 0 25px 0; font-size:24px; line-height:34px;}
.living-category-list li{display:inline-block; min-height:0; line-height:32px; letter-spacing:0.1em; padding:0 15px 15px 0; margin:0 15px 15px 0; border-left:none; border-right:none; border-bottom:solid 1px rgba(0,0,0,.18);}
#soul-login-box .grid-content{padding-right:0;}
#soul-list .grid-content{padding-right:0;}
.soul-search .input-row{float:none; width:100%; margin-right:0; margin-bottom:12px;}
.soul-search .input-button{float:none;}
.soul-store-list .grid-item,.soul-store-list .grid-item:nth-child(3n){width:100%; margin:0 0 35px 0;}
.soul-popup-box.lightbox-item{margin-top:30px; max-height:calc(100vh - 60px);}
.soul-popup-left,.soul-popup-right{float:none; width:100%;}
.soul-popup-left{margin-bottom:25px;}
.imgtext-item { margin-top: 60px;}
/*.section-column{height: 1150px !important;}
.section-column span{display: block;float: left; height: 500px; margin-bottom: 20px;white-space:normal;}*/
.section-column, .section-column p{white-space:normal;max-width: 200px !important;margin: 0;}
.section-column p br{ display: none;}
.item-list.type-2 .img-over-box{max-height: 200px;}
/*============other===============*/
#index-news .title-box{position: relative;right: auto; top: auto;width: 100%;margin: 0; margin-bottom: 8%;}
#index-classic .grid-content,#index-news .grid-content{padding-top: 0;}
#index-classic .circle-line,#index-news .circle-line{display: none;}
#index-foundation .circle-line{top:50%;}
#foundation2{width: 100%;}
#foundation3 { min-height: 1000px;}
/*#foundation3 .text-ver {height: 1800px;}*/
#about1 .title-box h2 br,#team1 .title-box h2 br{display: none;}
/*#about1 .grid-large{padding-bottom: 200px;}
#about2 .grid-max {padding-bottom: 250px;}
#about2 .section-column span{height: 420px;}*/
#work-box.lightbox-item {padding-top: 60px;}
#chronology .title-box em{display: none;}
.project-list{margin-left: -6%;width: 112%;}
.project-list .text-box {padding: 30px 0;}
#news .grid-content{padding-top: 80px;}
#news .title-box em{display: none;}
.category-list {height: 200px;}
.category-list a:nth-child(even):before{display:block;}
#work-content .button-icon{position: absolute;top: -120px; right: 0;}
.project-contact .title-box p{margin-top: 0; padding-top: 0;border-top: none;}
}
@media screen and (max-width: 500px) {
/*============footer===============*/
.main { padding-bottom: 829px;}
#footer {margin-top: -830px; min-height: 830px;}
.wrapper:before{bottom: 829px;}
.footer-info { width: 100%;}
#footer-info2{padding-top: 0;}
/*============main===============*/
.hide-w500{ display: none !important;}
.show-w500{ display: inline-block;}
.button-text a, a.button-text, a .button-text{line-height: 40px;}
.news-list .grid-item {width: 16.6%;}
.button-icon a, a.button-icon, a .button-icon{width: 55px; height: 50px; padding-top: 5px;}
.button-icon i {font-size: 24px;line-height: 24px;height: 24px;}
.button-icon span {width: 24px; height: 24px; line-height: 24px;}
.button-icon.button-group {margin-left: -5px;}
#index-contact .grid-min .title-box{margin-right: 60px;}
#project-web .button-icon{height: 55px;}
#foundation2 .grid-content { padding: 40px 70px 30px 20px;}
#foundation2 .title-box { right: 20px;}
}
@media screen and (max-width: 400px) {
/*============main===============*/
.hide-w400{ display: none !important;}
p, .text1 { font-size: 15px;line-height: 24px;letter-spacing: 0.1em;}
.title-box, .section-box, .section-box p { margin-left: 10px;}
.content-page .content{width: 85%;}
.page a { display: none; }
.page a.active, .page a.page-first, .page a.page-last, .page a.page-next, .page a.page-prev{ display: inline-block; }
.button-text li{display: inline-block;}
.button-text a, a.button-text, a .button-text{font-size: 16px;min-height:auto;letter-spacing: 0.1em; padding-bottom: 4px;border-right: solid 1px rgba(0,0,0,0.2);}
form label{padding-right: 7px; margin-left: -15px;}
.input-text{ margin-left: -15px;}
form input[type="text"], form input[type="password"], form select, .input-box{padding-left: 80px;}
form textarea, .hide-box span{padding-left: 0;}
.item-list{width: 100%;}
.item-list .grid-item{width: 100%;margin: 0 0 30px 0;}
.info-list{ font-size: 15px;}
/*==============other==================*/
#index-about .circle-line{display: none;}
#index-open em {font-size: 36px; line-height: 50px;}
#index-open h1 span{display: block;}
#index-about{max-width: 250px;}
#index-foundation{max-width: 200px;}
#index-contact .grid-min{max-width: 200px;}
#index-contact .grid-min .title-box{margin-right: 40px;}
#foundation3 { min-height: 900px;}
.team-list .circle-box{width: 45px;height: 40px;border:none;}
.team-list p{padding: 0 0 0 50px;}
.team-list h1 { font-size: 16px;}
.news-list .grid-item {width: 25%;}
}
@media screen and (max-width: 360px) {
.hide-w360{ display: none !important;}
.footer-nav a{letter-spacing: 0;}
h1, .title1, h2, .title2 {font-size: 1.5em;}
.button-icon.button-group a{margin-right: -5px;}
#team-item1{margin-top: -50px;}
.input-text a {padding-left: 45px;}
}
@media screen and (max-width: 310px) {
.hide-w310{ display: none !important;}
.page a.page-first, .page a.page-last { display: none; }
.category-list{ display: none; }
#index-contact .grid-min .title-box{margin-right: 0;}
.index-building{display: none;}
#news .title-box em{display: block;}
}
.horizontal { display: inherit; }
.vertical { display: none; }

@media screen and (orientation:portrait) {
.horizontal { display: none; }
.vertical { display: inherit; }
}

/* 數位工程 PDF lightbox */
.works-pdf-trigger{
	cursor:pointer;
	text-decoration:underline;
	color:#b81b24;
}
.works-pdf-trigger:hover{ opacity:0.75; }
.works-pdf-only{
	background:#2a2a2a;
	min-height:160px;
}
.works-pdf-only__box,
.works-pdf-only__label{
	opacity:1 !important;
	filter:none !important;
}
body.works-pdf-lightbox-open{ overflow:hidden; }
.works-pdf-lightbox{
	display:none;
	position:fixed;
	z-index:9999;
	top:0; right:0; bottom:0; left:0;
}
.works-pdf-lightbox.is-open{ display:block; }
.works-pdf-lightbox__backdrop{
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	background:rgba(0,0,0,0.8);
}
.works-pdf-lightbox__panel{
	position:absolute;
	top:50%; left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	width:90%;
	max-width:480px;
	max-height:80vh;
	overflow:auto;
	background:#fff;
	padding:28px 24px 20px;
	box-sizing:border-box;
}
.works-pdf-lightbox__close{
	position:absolute;
	top:8px; right:12px;
	border:0; background:transparent;
	font-size:28px; line-height:1;
	cursor:pointer; color:#333;
}
.works-pdf-lightbox__title{
	margin:0 0 16px;
	font-size:18px;
	color:#b81b24;
}
.works-pdf-lightbox__list{
	margin:0; padding:0; list-style:none;
}
.works-pdf-lightbox__list li{
	border-top:1px solid #eee;
}
.works-pdf-lightbox__list a{
	display:block;
	padding:12px 4px;
	color:#333;
	text-decoration:none;
}
.works-pdf-lightbox__list a:hover{
	color:#b81b24;
	background:#fafafa;
}