@import url('https://fonts.googleapis.com/css?family=Spectral:300i,400i,500i&display=swap');
/* 01 - Basic Stylesheet
-----------------------------------------------------------*/
html{
width : 100%;
scroll-behavior: smooth;
}
body{
font-size : 15px;
font-family : 'Noto Sans TC', sans-serif;
font-weight : 400;
color : #262626;
margin : 0;
padding : 0;
width : 100%;
/* background-color : #d1d1d1; */
-webkit-font-smoothing : antialiased;
-moz-font-smoothing : none;
font-smoothing : antialiased;
text-rendering : optimizeLegibility;
}
a{
color : #262626;
outline : 0;
text-decoration : none;
}
a:hover{
color : #262626;
text-decoration : none;
}
a:hover, a:active, a:focus{
outline : 0;
text-decoration : none;
}
p{
/* line-height : 24px; */
line-height : 1.7;
}
h1,h2,h3,h4{
padding : 0;
margin : 0 0 10px 0;
font-weight : 400;
}
h1{
font-size : 48px;
}
h2{
font-size : 30px;
}
h3{
font-size : 24px;
}
ul{
list-style-type : none;
margin : 0;
padding : 0;
}
button{
padding : 0;
margin : 0;
border : none;
outline : none;
background : none;
}
/* 02 - General Stylesheet
-----------------------------------------------------------*/
a,
.transparent,
.site-back-top:hover,
input.btn,
button.btn,
.zoom-effect:before,
.zoom-effect:after,
.data-form input,
.data-form select,
.data-form textarea,
.owl-theme .owl-controls .owl-buttons div,
.grid-clients .grid img,
.team-half .team-half-list .team-member,
.team-horizontal .team .team-detail .detail-social,
.blog-horizontal .post .post-info .info-count ul li a,
.blog-search input[type="text"],
.blog-search .search-btn .fa,
.site-nav > ul.nav-default > li > a:before,
.header-search input[type="text"],
.header-search button,
#site-header .header-menu ul li a:after,
#site-header .header-nav,
#site-footer .footer-top .top-menu ul li a:after,
#site-footer .footer-top .top-newsletter input[type="text"],
#site-footer .footer-top .top-newsletter button{
-webkit-transition : all 0.2s ease-in-out;
-moz-transition : all 0.2s ease-in-out;
-o-transition : all 0.2s ease-in-out;
transition : all 0.2s ease-in-out;
}
.clear{
clear : both;
margin : 0px;
padding : 0px;
}
.justify{
text-align : justify;
}
.center{
text-align : center;
}
.img-full{
width : 100%;
}
.v-center{
position : absolute;
top : 50%;
transform : translate(0, -50%);
-webkit-transform : translate(0, -50%);
-moz-transform : translate(0, -50%);
-ms-transform : translate(0, -50%);
}
.site-loader{
position : fixed;
width : 100%;
height : 100%;
z-index : 9999;
text-align : center;
background-color : #fff;
}
.site-loader img{
position : absolute;
left : 50%;
top : 50%;
margin-left : -15px;
margin-top : -15px;
}
.site-back-top{
display : none;
width : 60px;
height : 60px;
line-height : 60px;
text-align : center;
position : fixed;
bottom : 20px;
right : 30px;
cursor : pointer;
z-index : 999;
font-size : 1em;
font-weight: 800;
color : #FFF;
border-radius: 50px;
background-color : rgba(var(--main-color),.8);
}
.site-back-top:hover{
background-color : rgba(var(--main-color),1);
}
/*----- ベーススタイル -----*/
.hamburger {
width: 30px;
margin: auto;
}
.hamburger .menu_icon {
position: relative;
width: 30px;
height: 23px;
margin: 5px auto 5px
}
.hamburger .border {
position: absolute;
left: 0;
display: inline-block;
width: 100%;
height: 3px;
border-radius: 5px;
transition: all 0.3s;
background: #ffffff;
}
.hamburger .border1 {
top: 0;
}
.hamburger .border2 {
top: 0;
bottom: 0;
margin: auto;
}
.hamburger .border3 {
bottom: 0px;
}
/*----- ベーススタイルã“ã“ã¾ã§ -----*/
/* .type1 .menu_icon:hover .border1 {
transform: translateX(5px);
}
.type1 .menu_icon:hover .border3 {
transform: translateX(5px);
} */
.type1 .active .border1 {
transform: translateX(0) translateY(10px) rotate(45deg) !important;
}
.type1 .active .border2 {
opacity: 0;
}
.type1 .active .border3 {
transform: translateX(0px) translateY(-10px) rotate(-45deg) !important;
}
.space{
padding : 20px 0;
}
.space-20{
padding : 10px 0;
}
.progress,
.progress-bar{
font-size : 14px;
height : 30px;
line-height : 30px;
}
.progress-bar-yellow{
color : #262626;
background-color : #ffc740;
}
.progress-bar-dark{
background-color : #262626;
}
ul.list-default{
line-height : 30px;
}
.circle{
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
border-radius : 50%;
overflow : hidden;
position : relative;
background : url("../img/space.png") repeat scroll 0 0 transparent;
}
.block{
display : block;
}
.float-none{
float : none;
}
.parallax{
/* background-size : cover; */
background-size: auto 140%;
background-position : -50px 0;
background-repeat : no-repeat;
}
.shadow-bg{
background-color : rgba(0,0,0,0.7);
}
.shadow-left{
background : -moz-linear-gradient(left, rgba(var(--main-color),1) 0%, rgba(var(--main-color),8) 60%, rgba(var(--main-color),0) 100%);
background : -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(var(--main-color),8)), color-stop(60%,rgba(var(--main-color),8)), color-stop(100%,rgba(var(--main-color),0)));
background : -webkit-linear-gradient(left, rgba(var(--main-color),1) 0%,rgba(var(--main-color),8) 60%,rgba(var(--main-color),0) 100%);
background : -o-linear-gradient(left, rgba(var(--main-color),1) 0%,rgba(var(--main-color),8) 60%,rgba(var(--main-color),0) 100%);
background : -ms-linear-gradient(left, rgba(var(--main-color),1) 0%,rgba(var(--main-color),8) 60%,rgba(var(--main-color),0) 100%);
background : linear-gradient(to right, rgba(var(--main-color),1) 0%,rgba(var(--main-color),8) 60%,rgba(var(--main-color),0) 100%);
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(var(--main-color),1)', endColorstr='rgba(var(--main-color),1)',GradientType=1 );
}
.shadow-right{
background : -moz-linear-gradient(right, rgb(109, 159, 171) 0%, rgba(35, 114, 133, 1) 55%, rgba(35, 114, 133, 0) 100%);
background : -webkit-gradient(linear, right top, left top, color-stop(0%,rgb(109, 159, 171)), color-stop(55%,rgba(35, 114, 133, 1)), color-stop(100%,rgba(35, 114, 133, 0)));
background : -webkit-linear-gradient(right, rgb(109, 159, 171) 0%,rgba(35, 114, 133, 1) 55%,rgba(35, 114, 133, 0) 100%);
background : -o-linear-gradient(right, rgb(109, 159, 171) 0%,rgba(35, 114, 133, 1) 55%,rgba(35, 114, 133, 0) 100%);
background : -ms-linear-gradient(right, rgb(109, 159, 171) 0%,rgba(35, 114, 133, 1) 55%,rgba(35, 114, 133, 0) 100%);
background : linear-gradient(to left, rgb(109, 159, 171) 0%,rgba(35, 114, 133, 1) 55%,rgba(35, 114, 133, 0) 100%);
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
/* padding: 40px 0; */
}
.border-top{
border-top : 1px solid #e1e1df;
}
.title-big{
font-size : 30px;
font-weight : 600;
}
.title-bigbig{
font-size : 10em;
font-weight : 800;
}
.text-small{
font-size : 14px;
}
.text-space{
letter-spacing : 2px;
}
.text-light{
font-weight : 300;
}
.text-normal{
font-weight : 400;
}
.text-medium{
font-weight : 500;
}
.text-semibold{
font-weight : 600;
}
.text-bold{
font-weight : 700;
}
.text-extrabold{
font-weight : 800;
}
.text-yellow{
color : #ffc740;
}
.transparent{
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter : alpha(opacity=0);
-moz-opacity : 0;
-khtml-opacity : 0;
opacity : 0;
}
.transparent:hover{
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter : alpha(opacity=100);
-moz-opacity : 1;
-khtml-opacity : 1;
opacity : 1;
}
.line-top{
padding-top : 10px;
position : relative;
}
.line-top:after{
content : "";
position : absolute;
left : 50%;
top : 0;
margin-left : -20px;
width : 40px;
height : 2px;
background-color : #ffc740;
}
.line-bottom{
padding-bottom : 10px;
position : relative;
}
.line-bottom:after{
content : "";
position : absolute;
left : 50%;
bottom : 0;
margin-left : -20px;
width : 40px;
height : 2px;
background-color : #a6eeff;
}
.line-bottom.left:after{
left : 0;
margin-left : 0;
}
.btn{
border : 0;
padding : 0 20px;
margin : 0;
outline : none;
height : 40px;
line-height : 40px;
font-weight : 600;
letter-spacing : 2px;
-webkit-border-radius : 0px;
-moz-border-radius : 0px;
border-radius : 0px;
}
.btn:hover,
.btn:focus,
.btn:active{
outline : none !important;
}
.btn-default{
background : linear-gradient(90deg, rgb(var(--gradient-light)) 50%, rgb(var(--main-color)) 50%);
background-size: 201%;
background-position: 100% 50%;
transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
/* background-color : #227386; */
color: #fff;
}
.btn-default.light{
background : linear-gradient(90deg, rgb(var(--main-color)) 50%, rgb(var(--gradient-light)) 50%);
background-size: 210%;
background-position: 100% 50%;
transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
color: rgb(var(--main-color));
border: 1px solid #e9f4f7;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default{
background-position: 0% 50%;
color:rgb(var(--main-color));
}
.btn-default.light:hover, .btn-default.light:focus, .btn-default.light:active, .btn-default.light.active, .open>.dropdown-toggle.btn-default.light{
background-position: 0% 50%;
color: #fff;
}
.btn-default.box{
padding-top: 2em;
padding-bottom: 2em;
height: 100px;
}
.btn-dark{
color : #FFF;
background-color : #262626;
}
.btn-dark:hover{
color : #FFF;
background-color : #505050;
}
.btn-border{
color : #fff;
border : 1px solid;
background-color : transparent;
}
.btn-border.about{
border : none;
background-color : #964555;
filter: drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 1px rgba(255,255,255,1));
}
.btn-border:hover{
background-color : #fff;
}
.button-group .btn{
float : left;
margin-right : 10px;
}
.button-group .btn:last-child{
margin-right : 0;
}
.button-group.mini .btn{
height : 30px;
line-height : 30px;
padding : 0 10px;
font-size : 13px;
}
.padding-all{
padding : 40px;
}
.padding-all-20{
padding : 20px;
}
.padding-none{
padding : 0;
}
.padding-none-top{
padding-top : 0;
}
.padding-none-bottom{
padding-bottom : 0;
}
.padding-none-right{
padding-right : 0;
}
.padding-none-left{
padding-left : 0;
}
.padding-right-40{
padding-right : 40px;
}
.padding-left-40{
padding-left : 40px;
}
.padding-v15{
padding-top : 15px;
padding-bottom : 15px;
}
.margin-none{
margin : 0;
}
.margin-top-10{
margin-top : 10px;
}
.margin-top-20{
margin-top : 20px;
}
.margin-bottom-10{
margin-bottom : 10px;
}
.margin-bottom-20{
margin-bottom : 20px;
}
.margin-v15{
margin-top : 15px;
margin-bottom : 15px;
}
.margin-v20{
margin-top : 20px;
margin-bottom : 20px;
}
.margin-auto{
margin : 0 auto;
}
.nav-default li{
float : left;
list-style: none;
}
.nav-default li a{
display : inline-block;
}
.nav-pager li{
margin-right : 5px;
width : 40px;
height : 40px;
line-height : 40px;
}
.nav-pager li a{
width : 40px;
height : 40px;
line-height : 40px;
text-align : center;
background-color : #FFF;
}
.nav-pager li a:hover{
background-color : #e1e1e1;
}
.nav-pager li.active a{
background-color : rgb(var(--main-color));
color: #fff;
}
.box-white{
background-color : #FFF;
}
.box-grey{
background-color : #f3f3f2;
}
.box-grey .owl-theme .owl-controls .owl-buttons div{
background-color : #fff;
}
.box-dark{
color : #FFF;
background-color : #262626;
}
.box-dark-light{
color : #FFF;
background-color : #636363;
}
.box-dark .owl-theme .owl-controls .owl-buttons div,
.box-dark-light .owl-theme .owl-controls .owl-buttons div{
color : #FFF;
background-color : #151515;
}
.box-dark .owl-theme .owl-controls .owl-buttons div:hover,
.box-dark-light .owl-theme .owl-controls .owl-buttons div:hover{
color : #262626;
}
.box-dark .owl-theme .owl-controls .owl-page span,
.box-dark-light .owl-theme .owl-controls .owl-page span{
background-color : #151515;
}
.box-yellow{
background-color : #ffc740;
}
.box-yellow .owl-theme .owl-controls .owl-buttons div:hover{
color : #FFF;
background-color : #262626;
}
.box-yellow .owl-theme .owl-controls .owl-page span{
background-color : #FFF;
}
.zoom-effect{
display : block;
position : relative;
}
.zoom-effect:before{
content : '';
opacity : 0;
width : 100%;
height : 100%;
position : absolute;
top : 0;
left : 0;
background : #000\9;
background : rgba(0, 0, 0, 0.50);
}
.zoom-effect:after{
opacity : 0;
font-family : 'FontAwesome';
content : "\f002";
position : absolute;
top : 50%;
left : 0;
width : 100%;
text-align : center;
color : #FFF;
-webkit-transform : translateY(-50%);
-ms-transform : translateY(-50%);
transform : translateY(-50%);
}
.zoom-effect:hover:before,
.zoom-effect:hover:after{
opacity : 1;
}
.hover-effect{
position : relative;
}
.hover-effect figcaption{
position : absolute;
width : 100%;
height : 100%;
top : 0;
left : 0;
background-color : rgba(0, 0, 0, 0.8);
}
.hover-effect figcaption .caption-buttons{
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
-webkit-transform : translate(-50%, -50%);
-moz-transform : translate(-50%, -50%);
-ms-transform : translate(-50%, -50%);
}
.hover-effect figcaption .caption-buttons a{
display : block;
width : 40px;
height : 40px;
line-height : 40px;
text-align : center;
float : left;
margin : 0 5px;
color : #FFF;
border : 1px solid #fff;
-webkit-border-radius : 20px;
-moz-border-radius : 20px;
border-radius : 20px;
}
.hover-effect figcaption .caption-buttons a:hover{
border-color : #739ba5;
color : #739ba5;
}
.social-icons li{
margin-left : 10px;
width : 30px;
height : 30px;
}
.social-icons li a{
width : 30px;
height : 30px;
line-height : 30px;
text-align : center;
font-size : 13px;
background-color : #FFF;
}
.social-icons li a:hover{
color : #FFF;
}
.social-icons li a.facebook:hover{
background-color : #204385;
}
.social-icons li a.twitter:hover{
background-color : #2aa9e0;
}
.social-icons li a.google:hover{
background-color : #d3492c;
}
.social-icons li a.linkedin:hover{
background-color : #02669a;
}
.social-icons li:first-child{
margin-left : 0;
}
.social-icons.social-grey li a{
background-color : #f3f3f2;
}
.social-icons.inline{
display : inline-block;
}
.address-list li{
line-height : 30px;
margin-bottom : 10px;
display:flex;line-height:1.5;
align-items:baseline;
}
.address-list li .fa{
width : 20px;
text-align : center;
margin-right : 5px;
}
.address-list.nav-default li{
margin-right : 15px;
margin-bottom : 0;
}
.address-list.nav-default li:last-child{
margin-right : 0;
margin-bottom : 0;
}
.tags-cloud li{
margin : 0 5px 5px 0;
}
.tags-cloud li a{
font-size : 14px;
padding : 5px 10px;
background-color : #f3f3f2;
}
.tags-cloud li a:hover{
background-color : #ffc740;
}
.tags-cloud.tags-white li a{
background-color : #fff;
}
.tags-cloud.tags-white li a:hover{
background-color : #ffc740;
}
.data-form label{
display : block;
font-weight : 700;
text-align-last:justify;
color: rgb(var(--main-color));
}
.data-form label::after{
content: '：'
}
.data-form label.ctx::after{
content: none;
}
.data-form input[type="text"],
.data-form input[type="password"],
.data-form input[type="email"],
.data-form input[type="url"],
.data-form input[type="number"],
.data-form input[type="tel"],
.data-form input[type="date"],
.data-form textarea,
.data-form select{
font-size : 14px;
width : 100%;
padding : 10px;
margin : 0;
outline : none;
border : 1px solid #e1e1df;
}
.data-form input[type="text"],
.data-form input[type="password"],
.data-form input[type="email"],
.data-form input[type="url"],
.data-form input[type="number"],
.data-form input[type="tel"],
.data-form input[type="date"],
.data-form select{
height : 40px;
}
.data-form select{
height : 40px;
line-height : 40px;
}
.data-form textarea{
resize : none;
}
.data-form input[type="text"]:hover,
.data-form input[type="text"]:focus,
.data-form input[type="password"]:hover,
.data-form input[type="password"]:focus,
.data-form input[type="email"]:hover,
.data-form input[type="email"]:focus,
.data-form input[type="url"]:hover,
.data-form input[type="url"]:focus,
.data-form input[type="number"]:hover,
.data-form input[type="number"]:focus,
.data-form input[type="tel"]:hover,
.data-form input[type="tel"]:focus,
.data-form input[type="date"]:hover,
.data-form input[type="date"]:focus,
.data-form textarea:hover,
.data-form textarea:focus,
.data-form select:hover,
.data-form select:focus{
border-color : rgb(var(--main-color));;
}
.data-form .row{
margin-bottom : 15px;
}
.data-form .row:last-child{
margin-bottom : 0;
}
.data-form .form-field{
position : relative;
}
.data-form .form-field .fa{
position : absolute;
top : 12px;
left : 12px;
color : #bebebe;
}
.data-form .form-field input[type="text"],
.data-form .form-field input[type="password"],
.data-form .form-field input[type="email"],
.data-form .form-field input[type="url"],
.data-form .form-field input[type="number"],
.data-form .form-field input[type="tel"],
.data-form .form-field input[type="date"],
.data-form .form-field textarea,
.data-form .form-field select{
padding-left : 34px;
}
.col-half .owl-theme .owl-controls .owl-buttons{
top : -40px;
right : 0;
}
.col-half .owl-theme .owl-controls .owl-buttons div{
width : 30px;
height : 30px;
}
.col-half .owl-theme .owl-controls .owl-buttons div:before{
width : 30px;
height : 30px;
line-height : 30px;
}
.col-half .grid-clients .owl-wrapper-outer,
.col-half .testimonials-horizontal .owl-wrapper-outer{
min-height : 200px;
}
.section-header{
margin-bottom : 40px;
position : relative;
}
.section-header h1,
.section-header h2{
letter-spacing : 2px;
font-weight : 600;
}
.section-header .text-yellow:hover{
color : #ffc740;
}
.section-header .btn.v-center{
right : 0;
}
.section-header.inline{
margin-top : 20px;
margin-bottom : 0;
}
.section-header.inline h3{
font-size : 24px;
font-weight : 300;
line-height: 1.5;
color : #FFF;
margin-bottom : 0;
}
.section-header.banner{
margin : 0;
}
.section-header.banner h3{
margin-bottom : 0;
}
.counter-list .countTo{
font-size : 48px;
}
.counter-list .line-top{
font-size : 18px;
}
.grid-list .row{
margin-right : -3px;
}
.grid-list .grid{
border : 1px solid #e1e1df;
margin-top : -1px;
margin-left : -1px;
padding : 30px;
text-align : center;
}
.grid-list .grid p{
margin-bottom : 0;
}
.grid-list .grid .fa{
margin-bottom : 20px;
}
.grid-list.grid-vertical .grid{
text-align : left;
}
.grid-list.grid-vertical .grid .line-bottom:after{
left : 0;
margin-left : 0;
}
.grid-list.grid-vertical.with-icons .grid{
position : relative;
padding-left : 140px;
}
.grid-list.grid-vertical.with-icons .grid .fa{
position : absolute;
width : 120px;
height : 100%;
background-color : #FFF;
border-right : 1px solid #e1e1df;
margin : 0;
top : 0;
left : 0;
}
.grid-list.grid-vertical.with-icons .grid .fa:before{
width : 100%;
text-align : center;
position : absolute;
top : 50%;
transform : translate(0, -50%);
-webkit-transform : translate(0, -50%);
-moz-transform : translate(0, -50%);
-ms-transform : translate(0, -50%);
}
.grid-list.grid-trans .grid{
border-color : #363636;
background-color : rgba(0,0,0,0.5);
}
.grid-list.grid-dark .grid{
border-color : #515151;
}
.grid-list.grid-white .grid{
}
.grid-list.grid-none .grid{
border : 0;
}
.grid-list.grid-clients .row{
margin-left : 1px;
margin-right : -1px;
margin-top : 1px;
}
.grid-list.grid-clients .grid{
padding : 20px 15px;
}
.grid-list.grid-clients .grid img{
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter : alpha(opacity=50);
-moz-opacity : 0.5;
-khtml-opacity : 0.5;
opacity : 0.5;
}
.grid-list.grid-clients .grid:hover img{
-ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter : alpha(opacity=100);
-moz-opacity : 1;
-khtml-opacity : 1;
opacity : 1;
}
.grid-list#owl-clients-big .grid{
margin-top : inherit;
margin-left : inherit;
border-left : 0;
border-bottom : 0;
border-top : 0;
}
.grid-list#owl-clients-big .owl-wrapper-outer{
border : 1px solid #e1e1df;
}
.grid-list.grid-dark#owl-clients-big .owl-wrapper-outer{
border : 1px solid #515151;
}
.testimonials-horizontal .item-image{
display : inline-block;
width : 90px;
height : 90px;
border : 4px solid #FFF;
}
.testimonials-horizontal .item-image img{
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
border-radius : 50%;
overflow : hidden;
position : relative;
}
.testimonials-horizontal .item-comment{
margin : 10px 0;
}
.team-horizontal .team .team-detail{
position : relative;
/* padding : 10px 20px; */
background-color : #ffc740;
}
.team-horizontal .team .team-detail .detail-social{
position : absolute;
width : 100%;
height : 0;
bottom : 100%;
left : 0;
text-align : left;
background-color : rgba(0, 0, 0, .5);
overflow : hidden;
}
.team-horizontal .team:hover .team-detail .detail-social{
height : 7em;
}
.team-horizontal .owl-controls .owl-buttons{
right : 15px;
}
.team-horizontal.owl-carousel .team{
padding : 0 15px;
}
.blog-horizontal .post{
padding : 0 15px;
}
.blog-horizontal .post .post-photo,
.blog-horizontal .post .post-photo img{
-webkit-border-radius : 4px;
-moz-border-radius : 4px;
border-radius : 4px;
position : relative;
overflow : hidden;
}
.blog-horizontal .post .post-photo figcaption{
-webkit-border-radius : 4px;
-moz-border-radius : 4px;
border-radius : 4px;
overflow : hidden;
}
.blog-horizontal .post .post-media iframe{
width : 100%;
border : 0;
overflow : hidden;
}
.blog-horizontal .post .post-gallery .owl-pagination{
margin-top : 0;
padding-top : 15px;
background-color : #FFF;
}
.blog-horizontal .post .post-desc h3{
margin-top : 10px;
font-size : 18px;
}
.blog-horizontal .post .post-desc h3 a{
display : block;
white-space : nowrap;
text-overflow : ellipsis;
overflow : hidden;
}
.events .post-info,
.blog-horizontal .post .post-info{
font-size : 12px;
font-weight : 700;
}
.post-info .fa,
.blog-horizontal .post .post-info .fa{
margin-right : 10px;
}
.blog-horizontal .post .post-info .info-date{
line-height : 30px;
}
.blog-horizontal .post .post-info .info-count ul li{
margin-left : 10px;
}
.blog-horizontal .post .post-info .info-count ul li a{
display : block;
height : 30px;
line-height : 30px;
padding : 0 15px;
-webkit-border-radius : 15px;
-moz-border-radius : 15px;
border-radius : 15px;
background-color : #f3f3f2;
}
.blog-horizontal .post .post-info .info-count ul li a:hover{
background-color : #ffc740;
}
.blog-horizontal .owl-controls .owl-buttons{
right : 15px;
}
.blog-horizontal.blog-list .post{
margin-bottom : 30px;
}
.blog-horizontal.blog-list .post .post-photo,
.blog-horizontal.blog-list .post .post-photo img,
.blog-horizontal.blog-list .post .post-photo figcaption{
-webkit-border-radius : 0;
-moz-border-radius : 0;
border-radius : 0;
}
.blog-horizontal.blog-list .post .post-desc,
.blog-horizontal.blog-list .post .post-info{
background-color : #FFF;
padding : 15px;
}
.blog-horizontal.blog-list .post .post-desc h3,
.blog-horizontal.blog-list .post .post-desc p{
margin : 0;
}
.blog-horizontal.blog-list .post .post-desc h3{
font-size : 16px;
font-weight : 700;
margin-bottom : 10px;
}
.blog-horizontal.blog-list .post .post-desc h3 a{
white-space : inherit;
text-overflow : inherit;
overflow : inherit;
}
.blog-horizontal.blog-list .post .post-info{
border-top : 1px solid #e1e1e1;
}
.team-half .team-half-detail > div{
display : none;
}
.team-half .team-half-detail > .active{
display : block;
}
.team-half .team-half-detail .team-header .team-photo{
width : 90px;
margin-right : 20px;
border : 4px solid #fff;
}
.team-half .team-half-detail .team-header .team-name h4{
margin-top : 10px;
font-size : 24px;
font-weight : 500;
}
.team-half .team-half-detail .team-desc{
margin : 20px 0;
}
.team-half .team-half-list .team-member{
margin-bottom : 30px;
border : 4px solid #FFF;
}
.team-half .team-half-list .team-member.active{
border-color : #ffc740;
}
.team-half .team-half-list .team-member .zoom-effect:after{
display : none;
}
.price-table .table-item{
text-align : center;
}
.price-table .table-item .table-header{
color : #fff;
background-color : #262626;
border-left : 1px solid #111;
}
.price-table .table-item .table-header .header-title,
.price-table .table-item .table-header .header-price{
padding : 10px 20px;
}
.price-table .table-item .table-header .header-title{
font-size : 24px;
font-weight : 800;
background-color : rgba(0,0,0,0.3);
}
.price-table .table-item .table-header .header-price{
font-size : 30px;
font-weight : 800;
color : #ffc740;
}
.price-table .table-item .table-header .header-price small,
.price-table .table-item .table-header .header-price p{
font-size : 18px;
font-weight : 600;
color : #999;
}
.price-table .table-item .table-content{
color : #262626;
border-left : 1px solid #e1e1e1;
background-color : #f3f3f2;
}
.price-table .table-item .table-content ul li{
line-height : 40px;
padding : 0 20px;
border-bottom : 1px solid #e1e1e1;
}
.price-table .table-item .table-content ul li:last-child{
border-bottom : none;
}
.price-table .table-item .table-content ul li:nth-child(even){
background-color : #FFF;
}
.price-table .table-item .table-footer{
border : 1px solid #e1e1e1;
border-right : 0;
padding : 20px;
background-color : #FFF;
}
.price-table .table-item.active{
position : relative;
z-index : 2;
top : -10px;
-webkit-box-shadow : 0px 0px 20px rgba(50, 50, 50, 0.3);
-moz-box-shadow : 0px 0px 20px rgba(50, 50, 50, 0.3);
box-shadow : 0px 0px 20px rgba(50, 50, 50, 0.3);
}
.price-table .table-item.active .table-header{
background-color : #ffc740;
border-color : transparent;
}
.price-table .table-item.active .table-header .header-title{
background-color : rgba(0,0,0,0.1);
padding-top : 15px;
padding-bottom : 15px;
}
.price-table .table-item.active .table-header,
.price-table .table-item.active .table-header .header-price,
.price-table .table-item.active .table-header .header-price small,
.price-table .table-item.active .table-header .header-price p{
color : #333;
}
.price-table > div:last-child .table-item .table-header{
border-right : 1px solid #000;
}
.price-table > div:last-child .table-item .table-content,
.price-table > div:last-child .table-item .table-footer{
border-right : 1px solid #e1e1e1;
}
.blog-search h4,
.blog-category h4,
.blog-recents h4,
.blog-tags h4,
.blog-archive h4{
font-weight : 700;
margin-bottom : 20px;
}
.blog-search,
.blog-category,
.blog-recents,
.blog-tags{
margin-bottom : 40px;
}
.blog-category ul li,
.blog-recents ul li,
.blog-archive ul li{
margin-bottom : 10px;
}
.blog-category ul li:last-child,
.blog-recents ul li:last-child,
.blog-archive ul li:last-child{
margin-bottom : 0;
}
.blog-recents ul li a,
.blog-archive ul li a{
color : #666;
}
.blog-recents ul li a:hover,
.blog-archive ul li a:hover{
color : #262626;
}
.blog-search form{
position : relative;
}
.blog-search input[type="text"]{
width : 100%;
height : 36px;
padding : 10px 36px 10px 10px;
border : 1px solid #e1e1df;
outline : none;
font-size : 14px;
}
.blog-search input[type="text"]:hover,
.blog-search input[type="text"]:focus{
border-color : #ffc740;
}
.blog-search .search-btn{
width : 34px;
height : 34px;
position : absolute;
top : 1px;
right : 1px;
padding : 0;
border : 0;
outline : none;
color : #666;
background : none;
}
.blog-search .search-btn:hover .fa{
color : #262626;
}
.blog-category ul li a{
height : 30px;
line-height : 30px;
padding : 0 10px;
font-size : 14px;
}
.blog-recents ul li a{
display : block;
padding-bottom : 10px;
border-bottom : 1px solid #e1e1e1;
}
.blog-recents ul li a span{
display : block;
font-size : 12px;
margin-top : 10px;
color : #999;
}
.blog-recents ul li a span .fa{
margin-right : 10px;
}
.blog-recents ul li:last-child a{
padding-bottom : 0;
border-bottom : 0;
}
.blog-archive ul li a{
display : block;
}
.blog-archive ul li a:hover{
color : #181819;
}
.post-detail .post-media.type-parallax{
padding : 100px 0;
}
.post-detail .post-comments .comment-list{
margin-bottom : 20px;
}
.post-detail .post-comments .comment-list .comment{
position : relative;
padding-left : 90px;
}
.post-detail .post-comments .comment-list .comment .comment-avatar{
width : 70px;
height : 70px;
position : absolute;
top : 0;
left : 0;
}
.post-detail .post-comments .comment-list .comment .comment-info{
padding : 15px;
margin-bottom : 20px;
background-color : #f3f3f2;
position : relative;
}
.post-detail .post-comments .comment-list .comment .comment-info:before{
position : absolute;
display : inline-block;
content : '';
top : 18px;
left : -10px;
width : 0;
height : 0;
border-top : 15px solid transparent;
border-right : 15px solid #f3f3f2;
border-bottom : 15px solid transparent;
}
.post-detail .post-comments .comment-list .comment .comment-info .comment-date,
.post-detail .post-comments .comment-list .comment .comment-info .comment-message{
margin-bottom : 10px;
}
.post-detail .post-comments .comment-list .comment .comment-info .comment-date{
display : block;
margin-bottom : 10px;
font-size : 14px;
color : #999;
}
.post-detail .post-comments .comment-list .comment .comment-info .comment-reply .btn{
font-size : 12px;
height : 30px;
line-height : 30px;
}
.post-detail.row .post-tags{
margin-bottom : 30px;
}
.post-detail.row .post-comments .comment-list .comment .comment-info .comment-message{
font-size : 14px;
}
.site-nav{
display : none;
width : 250px;
height : 100%;
position : absolute;
top : 0;
left : -250px;
z-index : 100;
padding-top : 30px;
background-color : var(--footer-bg-color);
}
.site-nav ul.nav-default{
margin-bottom : 30px;
}
.site-nav ul.nav-default li{
float : none;
}
.site-nav ul.nav-default li a{
display : block;
white-space : nowrap;
text-overflow : ellipsis;
height : 50px;
line-height : 30px;
font-size : 14px;
font-weight : 600;
letter-spacing : 2px;
color : #FFF;
padding : 0 20px;
position : relative;
}
.site-nav ul.nav-default li:hover > a,
.site-nav ul.nav-default li.active > a{
color : rgba(0, 0, 0, 0.6);
}
.site-nav ul.nav-default li ul li a{
color: var(--nav-text-color);
}
.site-nav ul.nav-default li ul{
display : none;
padding : 15px 0;
background-color : rgba(255,255,255,0.7);
}
.site-nav > ul.nav-default > li > a:before{
display : inline-block;
content : " ";
width : 0;
height : 2px;
position : absolute;
left : 0;
top : 50%;
margin-top : -1px;
background-color : #ffc740;
}
.site-nav > ul.nav-default > li > a.opened:before,
.site-nav > ul.nav-default > li:hover > a:before{
width : 10px;
}
.site-nav .header-search,
.site-nav ul.address-list,
.site-nav ul.social-icons{
border-top : 1px solid #141313;
padding : 15px;
}
.site-nav .header-search{
display : block;
}
.site-nav .header-search input[type="text"]{
width : 100%;
background-color : #0c0c0c;
}
.site-nav ul.address-list li,
.site-nav ul.address-list li a{
font-size : 14px;
color : #666;
}
.site-nav ul.address-list li{
margin : 0;
}
.site-nav ul.address-list li:hover a{
color : #ffc740;
}
.site-nav ul.social-icons li{
float : left;
}
.site-nav ul.social-icons li a{
display : inline-block;
background-color : transparent;
border : 1px solid #666;
color : #FFF;
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
border-radius : 50%;
}
.site-nav ul.social-icons li a:hover{
border-color : transparent;
}
.header-search{
font-size : 11px;
display : inline-block;
}
.header-search form{
position : relative;
}
.header-search input[type="text"]{
width : 180px;
height : 28px;
line-height : 18px;
margin : 0;
outline : 0;
padding : 5px 40px 5px 15px;
border : none;
color : #FFF;
background : #1a1919;
-webkit-border-radius : 14px;
-moz-border-radius : 14px;
border-radius : 14px;
-webkit-box-shadow : 1px 1px 0px 0px rgba(57, 56, 56, 0.4);
-moz-box-shadow : 1px 1px 0px 0px rgba(57, 56, 56, 0.4);
box-shadow : 1px 1px 0px 0px rgba(57, 56, 56, 0.4);
}
.header-search:hover input[type="text"],
.header-search input[type="text"]:hover,
.header-search input[type="text"]:active,
.header-search input[type="text"]:focus{
border-color : #000;
background-color : #000;
}
.header-search button{
width : 40px;
height : 28px;
color : #999;
position : absolute;
top : 0;
right : 0;
text-align : center;
}
.header-search:hover button{
color : #fff;
}
/* 03 - Layout Stylesheet
-----------------------------------------------------------*/
#site-container{position: relative;}
#site-container::before{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 1;
content: "";
z-index: -1;
background: var(--bg-img);
background-repeat:repeat-y;
background-size:18vw;
background-position:-9vw;
}
#site-container.info::before{
background-repeat:no-repeat;
background-size:20vw;
background-position:83vw;
opacity: 1;
}
#site-container.service::before{
background-repeat:no-repeat;
background-size:22vw;
background-position:-11vw 50vh;
opacity: 1;
}
#site-container.service::after{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 1;
content: "";
z-index: -1;
background: var(--bg-img2);
background-repeat:no-repeat;
background-size:15vw;
background-position:93vw 65%;
}
#site-container.collect::before{
background-repeat:no-repeat;
background-size:36vw;
background-position:70vw 38vh;
opacity: 1;
}
#site-container.news::before{
background-repeat:no-repeat;
background-size:20vw;
background-position:-7vw 44vh;
opacity: 1;
}
#site-container.news::after{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 1;
content: "";
z-index: -1;
background: var(--bg-img);
background-repeat:no-repeat;
background-size:20vw;
background-position:90vw;
}
#site-container.site-sticky #site-header.fixed,
#site-container.site-sticky #site-header .header-logo{
position : fixed;
}
#site-header{
width : 100%;
}
#site-header .header-inner{
background: var(--nav-bg-color);
/* background-color : rgba(34, 115, 134, .8); */
}
#site-header .header-inner.news{
background-color : rgba(114, 114, 160, .8);
}
#site-header .wrapper{
padding : 0 40px;
}
#site-header .header-logo{
width : 160px;
padding-top : 15px;
position : absolute;
z-index : 99;
}
#site-header .header-search{
position : absolute;
top : -38px;
right : 40px;
}
#site-header .header-nav{
display : none;
width : 30px;
height : 30px;
line-height : 30px;
overflow : hidden;
text-align : center;
color : #FFF;
cursor : pointer;
float : right;
}
#site-header .header-nav.active{
color : #fff;
}
#site-slider .slide-caption{
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
/* background : -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%); */
/* background : -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); */
/* background : -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 100%); */
/* background : -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 100%); */
/* background : -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 100%); */
/* background : linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 100%); */
/* filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); */
}
#site-slider .slide-caption h2{
font-size : 20px;
font-weight : 300;
line-height: 1.5;
color : #FFF;
margin : 20px 0;
}
#site-slider .slide-caption h3{
color : #357b8c;
margin-bottom : 40px;
}
#site-slider .slide-caption h5{
font-weight : 500;
color : #a6eeff;
margin-top : 0;
}
#site-slider .slide-caption h5:after{
left : 0;
width : 20px;
margin-left : 0;
}
#site-slider .slide-caption .v-center{
width : 100%;
top:60%;
}
.main-gif{
height:600px;
background:rgb(var(--main-color));
/* background:#739ba5; */
position: relative;
}
.main-gif img.station,
.main-gif img.train{
width: 75vw;
position: absolute;
}
.main-gif img.train{
right: -3vw;
bottom: 0vw;
-webkit-animation-name: train;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
-webkit-animation-fill-mode:forwards;
animation: train 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
/* transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); */
}
.main-gif img.station{
right: -8vw;
bottom: -1vw;
}
.main-gif img.word{
position: absolute;
bottom:26vw;
width: 33vw;
right:1vw;
}
.main-gif img.bird{
position: absolute;
}
.main-gif img.bird.b1{
top:60%;
width: .8vw;
right:30%;
transform-origin: center;
transform: scale(0);
-webkit-animation-name: bird_b1, widge1, fly;
-webkit-animation-duration: 2s, 2.5s, 2.5s;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1),ease-in-out, ease-in-out;
-webkit-animation-delay:1s, 3s, 3s;
-webkit-animation-iteration-count:1, infinite, infinite;
-webkit-animation-fill-mode:forwards, none, none;
animation-name: bird_b1, widge1, fly;
animation-duration:2s, 2.5s, 2.5s;
animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1),ease-in-out, ease-in-out;
animation-delay:1s, 3s, 3s;
animation-iteration-count:1, infinite, infinite;
animation-fill-mode:forwards, none, none;
/* animation: bird_b1 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; */
}
.main-gif img.bird.b2{
top:40%;
width: .6vw;
right:40%;
transform: scale(0);
transform-origin: center;
-webkit-animation-name: bird_b2, widge2, fly;
-webkit-animation-duration: 2s, 2.5s, 2.5s;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1),ease-in-out, ease-in-out;
-webkit-animation-delay:1s, 3s, 3.3s;
-webkit-animation-iteration-count:1, infinite, infinite;
-webkit-animation-fill-mode:forwards, none, none;
animation-name: bird_b2, widge2, fly;
animation-duration:2s, 2.5s, 2.5s;
animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1),ease-in-out, ease-in-out;
animation-delay:1s, 3s, 3.3s;
animation-iteration-count:1, infinite, infinite;
animation-fill-mode:forwards, none, none;
}
.main-gif img.bird.b3{
top:50%;
width: .5vw;
transform: scale(0);
right:40%;
transform-origin: center;
-webkit-animation-name: bird_b3, widge3, fly;
-webkit-animation-duration: 2s, 2.5s, 2.5s;
-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1),ease-in-out, ease-in-out;
-webkit-animation-delay:1s, 3s, 1s;
-webkit-animation-iteration-count:1, infinite, infinite;
-webkit-animation-fill-mode:forwards, none, none;
animation-name: bird_b3, widge3, fly;
animation-duration:2s, 2.5s, 2.5s;
animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1),ease-in-out, ease-in-out;
animation-delay:1s, 3s, 1s;
animation-iteration-count:1, infinite, infinite;
animation-fill-mode:forwards, none, none;
}
/* .cls-1{fill:var(--footer-bg-color);} */
.footer{
/* background: url(../img/footer.png),url(../img/footer1.png),linear-gradient(to top,rgb(34, 115, 134) 5%,rgb(243, 243, 242) 5%); */
/* background: url(../img/footer.png),url(../img/footer1.png); */
background-repeat: no-repeat;
background-position: -7% bottom,102% 130%;
background-size:22vw,19vw,100vw;
height:100px;
/* border-bottom: 10px solid; */
color: var(--footer-bg-color);
position: relative;
overflow: hidden;
}
.footer::after{
content: url(../img/footer/footer.svg);
display: inline-block;
width: 48vw;
/* height: 110%; */
bottom: -1vw;
left: -25vw;
/* background-image: url(../img/footer/footer.svg); */
position: absolute;
}
.footer::before{
content: url(../img/footer/footer1.svg);
display: inline-block;
width: 35vw;
/* height: 100%; */
bottom: -1vw;
right: -8vw;
position: absolute;
}
.footer p{
font-size: 26px;
font-weight: 900;
letter-spacing: -.5px;
position: absolute;
bottom:0;
left: 25%;
right: 25%;
line-height: 0;
}
#site-footer{
background: var(--footer-bg-color);
/* background: linear-gradient(to bottom,rgb(34, 115, 134) 20%,rgb(243, 243, 242) 100%); */
}
li.logo{display: block;}
li.logo img{
height: 30px;
margin: 5px 0px 10px 0px;
padding: 0 8px;
/* filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 1px rgba(255,255,255,1));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#fff)";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#fff')"; */
}
#site-footer .wrapper{
padding : 0 40px;
}
#site-footer .footer-top{
padding : 40px 0 10px 0;
}
#site-footer .footer-top .top-logo{
margin : -40px 20px 0 0;
float : left;
}
#site-footer .footer-top .top-menu{
margin-bottom : 30px;
}
#site-footer .footer-top .top-menu ul li{
margin-left : 10px;
}
#site-footer .footer-top .top-menu ul li a{
display : inline-block;
height : 30px;
line-height : 30px;
font-size : 12px;
letter-spacing : 2px;
font-weight : 600;
position : relative;
}
#site-footer .footer-top .top-menu ul li a:after{
content : "";
width : 0;
height : 2px;
position : absolute;
left : 0;
bottom : 0;
background-color : #262626;
}
#site-footer .footer-top .top-menu ul li:hover a:after{
width : 50%;
}
#site-footer .footer-top .top-menu ul li:first-child{
margin-left : 0;
}
#site-footer .footer-top .top-newsletter{
position : relative;
}
#site-footer .footer-top .top-newsletter button,
#site-footer .footer-top .top-newsletter input[type="text"]{
display : inline-block;
height : 40px;
font-size : 13px;
border : 1px solid #c0c0c0;
background-color : #cacaca;
}
#site-footer .footer-top .top-newsletter button{
width : 40px;
position : absolute;
top : 0;
right : 0;
}
#site-footer .footer-top .top-newsletter input[type="text"]{
width : 240px;
padding : 10px 50px 10px 10px;
-webkit-box-shadow : 1px 1px 0px 0px rgba(218, 218, 218, 1);
-moz-box-shadow : 1px 1px 0px 0px rgba(218, 218, 218, 1);
box-shadow : 1px 1px 0px 0px rgba(218, 218, 218, 1);
}
#site-footer .footer-top .top-newsletter button:hover,
#site-footer .footer-top .top-newsletter button:focus{
outline : none;
background-color : #c1c1c1;
}
#site-footer .footer-top .top-newsletter input[type="text"]:hover,
#site-footer .footer-top .top-newsletter input[type="text"]:focus{
outline : none;
background-color : #e8e8e8;
}
#site-footer .footer-middle,
#site-footer .footer-bottom{
padding : 20px 0;
}
#site-footer .footer-middle{
border-top : 1px solid #c0c0c0;
border-bottom : 1px solid #c0c0c0;
}
.bx-controls.bx-has-pager{
padding: 0 40px;
}
/* NEWS */
.dis_flex{display: flex;}
.title_home .title{padding: 1.5em;margin-top: -1.5em;}
.title_home .show{
/* width: calc(100% - 140px); */
top:2em;
}
.title_home .title h2{
/* writing-mode: vertical-lr; */
border-right: 9px solid;
letter-spacing: -3px;
font-size: 70px;
font-weight: 900;
line-height: .5;
/* color: #237285; */
color: rgb(var(--main-color));
margin-right:5px;
text-transform:uppercase;
}
.title_home .title.light h2{
color: #fff;
height: 100%;
}
/* .title_home .title h3{
background-color: rgba(var(--main-color),.65);
padding:10px;
color: #fff;
letter-spacing: 4px;
} */
.title_home .title h3{
background-color: rgb(var(--main-color));
padding:10px;
color: #fff;
letter-spacing: 4px;
padding-top: calc(50% - 12px);
padding-bottom: calc(50% - 12px);
width: 100%;
}
.title_home .title.two h3{
padding-top: calc(50% - 12px - 12px);
padding-bottom: calc(50% - 12px - 12px);
width: 100%;
position: relative;
margin-bottom: -80%;
z-index: 2;
}
.title_home .title.light h3{
background:transparent;
height: 100%;
border: 1px solid #fff;
}
.title_home ul li p {
color: #676767;
letter-spacing:1px;
padding-left: 10px;
margin-top: 3px;
font-size: 16px;
}
.title_home ul li p:hover {
color: rgb(var(--main-color));
}
.title_home ul li p:hover span.more::before,
a:hover span.more::before{
margin:0 3px 0 15px;
}
.title_home ul{
padding: 10px 0;
}
.title_home ul li{
margin-bottom: 15px;
}
span.more{
letter-spacing:0;
}
span.more::before{
font-weight: 600;
content: 'more';
margin:0 3px 0 4px;
transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
span.more i{
font-weight: 600;
/* vertical-align:text-top; */
}
date{
padding: 2px 10px;
color: rgb(var(--main-color));
font-size: 15px;
/* background: #75a3b0; */
/* background-color: rgba(var(--main-color),.65); */
border-radius: 50px;
margin-bottom: 3px;
float: left;
margin-right: 1em;
}
.news-list-page{margin-top: 2em;}
.news-list-page ul{display: inline-block;}
.title_home-ori p.text2{font-size: 15px}
/* EVENTS */
.post-info i{
padding-top:3px;
font-size: 18px;
}
.post-info .content,
.post-info .dis_flex{
font-size: 14px;
margin: 10px;
letter-spacing: .5px;
color: #666;
}
.button-group.show-bt{
border: 1px solid;
display: inline-block;
color: rgb(var(--main-color));
padding: 0 5px;
position: relative;
background-color: #fff;
margin-left: 5em;
margin-bottom: 5em;
}
.button-group.show-bt::before{
content: '';
width: 100%;
height: 2px;
position: absolute;
left: -10em;
top: 50%;
background-color: #237285;
z-index: -1;
}
.title .button-group.show-bt::before{display: none;}
.button-group.show-bt a.btn:not(:last-child)::after{
content: '/';
padding: 0 1.2em;
position: absolute;
font-weight: 400 !important;
}
.button-group.show-bt a.btn{
font-size: 15px;
font-weight: 400;
color: rgb(var(--main-color));
position: relative;
transition:all 0.2s ease-in-out;
}
.button-group.show-bt a.btn::before{
content: '';
width: 100%;
height: 0px;
position: absolute;
left: -5px;
top: 100%;
transition:all 0.2s ease-in-out;
/* background-color: #ccc; */
}
a.c-default.btn::before{background-color: #237285;}
a.c-now.btn::before{background-color: #8787c1;}
a.c-after.btn::before{background-color: #97b910;}
a.c-pass.btn::before{background-color: #ec88a7;}
a.c-other.btn::before{background-color: #835e5e;}
i.c-default{color: #237285;}
i.c-now{color: #8787c1;}
i.c-after{color: #97b910;}
i.c-pass{color: #ec88a7;}
i.c-other{color: #835e5e;}
.button-group.show-bt a.btn:hover,
.button-group.show-bt a.btn.active{
font-weight: 800;
box-shadow: none;
}
.button-group.show-bt a.btn.active::before,
.button-group.show-bt a.btn:hover::before{
height: 20px;
}
p.justify{
margin-bottom: 1.2em;
}
p.justify:last-child{
margin-bottom: 0;
}
.old{
position: absolute;
width: 19vw;
bottom: 0;
left: -31%;
}
.old img{
width: 100%;
}
section{
margin-bottom: 2em;
}
.roll-station{
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
/* DC css*/
height: auto;
position: relative;
}
.roll-station img{
width: 100%;
}
.roll-station iframe{
position: absolute;
left:0;
right:0;
width: 100%;
height:100%;
}
.roll-station .icon{
width: 90px;
padding:17px;
position: absolute;
background: rgba(0, 0, 0, 0.7);
bottom: 0;
right: 0;
z-index: 999
}
.bx-wrapper .bx-pager{
width: auto;
}
ul.bxslider li{
height: 600px;
overflow: hidden;
}
.main-gif.fit.web img,
.main-gif.fit.mob img{
min-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.custom-object-fit {
position: relative;
background-size: cover !important;
background-position: center center !important;
}
.custom-object-fit img{
opacity: 0;
}
.main-gif.fit.web{
display: block;
}
.main-gif.fit.mob{
display: none;
}
#event,#about,#services,#info{
margin-bottom: 8vw;
}
#event_in{
margin-bottom: 3vw;
}
.fo-ul{
color:#fff;
padding:0 2em
}
.fo-ul div{color: #fff !important}
.float-r{float: right;}
.header-menu img{
height: 25px;
}
/* EVENTS-LIST */
.events{
margin-bottom: 3em;
border-bottom: 1px solid #ccc;
padding: 0 15px;
padding-bottom: 2em;
}
.events:hover{
background:rgba(var(--main-color),.04);
}
.events-list .post-info .content{padding-left: 25px}
.events-show .post-info .content{padding-left: 0px}
.content h4,
.dis_flex h4{
line-height: 1.5;
margin-top: 5px;
margin-bottom: 1.3em;
color: rgb(var(--main-color));
}
.content p,.dis_flex p{font-weight:400;}
.events .btn-default{float: right;}
.events-list date{
float: none;
padding: 0;
position: relative;
}
.events-list date i{
position: absolute;
left: -25px;
}
/* EVENTS OPEN */
.title_home.content{display: block;}
.title_home.content .title{
padding: auto;
writing-mode: horizontal-tb;
width: 100%;
}
.title_home.content .title h2{
font-size: 3em;
border: none;
}
.title_home.content .title h3{
color:rgba(var(--main-color),.65);
background:none;
}
.events-show{
width: 80%;
margin: 0 auto;
}
.events.active{
border: none;
}
.events.active:hover{
background: none;
}
.events-show .post-info .dis_flex{
margin: 3em 0;
}
.events-show .content h4,
.events-show .dis_flex h4{
font-size: 2.2em;
font-weight: 300;
}
.events-show .content p,
.events-show .dis_flex p{
font-size: 15px;
}
.events-show date{float: none;}
.prev .btn-default{
float: none;
}
span.prev::after{
font-weight: 600;
content: '上一é ';
margin:0 4px 0 3px;
transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
span.prev i{
margin: 0 5px 0 5px !important;
}
a:hover span.prev::after{
margin:0 18px 0 3px;
}
div.prev{
position: relative;
margin-top: 5em;
}
.prev hr{
margin: 0;
position: absolute;
top: 50%;
width: 100%;
z-index: -1;
border: 0.03em solid rgb(var(--main-color));
}
.prev .btn-default{
border: 1px solid rgb(var(--main-color));
}
.prev .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default {
border: 1px solid
}
/* BANNER */
.cls-1{fill:rgb(var(--main-color))}
.pattern{
background:rgb(var(--main-color));
-webkit-mask:url(../img/banner/banner.svg);
mask: url(../img/banner/banner.svg);
-webkit-mask-size: cover;
mask-size: cover;
overflow:hidden;
/* background:url(assets/img/banner/news-p.svg),#ccc;
-webkit-mask:url(assets/img/banner/banner.svg);
mask: url(assets/img/banner/banner.svg);
-webkit-mask-size: cover;
mask-size: cover;" */
}
.example-mask {
background:RED;
mask-image: url(../img/banner/banner.svg);
webkit-mask-image: url(../img/banner/banner.svg);
mask-mode: alpha;
webkit-mask-mode: alpha;
mask-repeat: no-repeat;
webkit-mask-repeat: no-repeat;
mask-size: cover;
webkit-mask-size: cover;
/* mask-position: center; */
/* webkit-mask-position: center; */
}
.pattern::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
background:var(--main-pattern);
top:0;
background-size:var(--main-pattern-size);
opacity: .3;
/* -webkit-mask:url(../img/banner/banner.svg);
mask: url(../img/banner/banner.svg);
-webkit-mask-size: cover;
mask-size: cover; */
}
/* INFO */
.title_home-ori{
display: flex;
align-items: flex-start;
color: #666;
font-size: 16px;
}
.title_home-ori.map{
display: block;
}
.title_home-ori .title{
display: flex;
/* align-items: center; */
padding-right: 2em;
}
square{
min-width: 1.5em;
max-height: 1.5em;
background: rgb(var(--main-color));
display: block;
margin-right: 8px;
}
.title.light square,
.title.info square{
background: #fff;
}
.title_home-ori p{
font-size: 14px;
/* margin: 10px; */
letter-spacing: .5px;
}
div.time{
margin:1em 0;
}
div.time span{
background: rgb(var(--main-color));
color: #fff;
width: 150px;
display: inline-block;
text-align: center;
margin-right: 1em;
}
.title_home-ori .title.info::before{
content: '';
position: absolute;
width: 29vw;
height: 29vw;
top:-6em;
right: -1em;
background: url(../img/bg/bg-info-1.svg);
background-repeat: no-repeat;
background-position: -3%;
background-size: auto 100%;
z-index: -1;
}
.title_home-ori .title h3{
color: rgb(var(--main-color));
margin: 0;
letter-spacing: 2px;
font-weight: 700;
}
.title_home-ori .title.light h3,
.title_home-ori .title.info h3{color: #fff;}
.padding-b1{
padding-bottom: 1em;
position: relative;
}
.info-img{
width: 50%;
position: absolute;
top: -30%;
right: 0;
}
table.park{width: 100%}
table.park th{
text-align: center;
color: #fff;
min-width: 80px
}
table.park tr{
background: #e8edec;
}
table.park tr:first-child{
background: #75b6b6;
}
table.park tr th:first-child{
min-width: 200px;
}
table.park th,
table.park td{
padding:5px 10px;
border: 1px solid #fff;
}
table.park tr td:nth-child(2){
text-align: center;
}
table.park tr td:last-child{
text-align: left;
}
table.park p{
margin: 0
}
#week,#week2{
border-right: none;
padding-right: 0;
}
#week~td,#week2~td{
border-left: none;
}
td.park-icon img{
width: 2em;
float: left;
margin: 0 5px;
}
/* ABOUT */
.title_home-ori .title h4{
color: rgb(var(--main-color));
margin-left: 1em;
line-height: 1.5;
letter-spacing: 2px;
font-weight: 300;
}
.story{
display: inline-block;
}
.story p{
padding: 2em 4em;
background: rgb(var(--main-color));
color: #fff;
}
#about{
position: relative;
/* overflow: hidden; */
}
#about::before{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: .3;
content: "";
z-index: -1;
background: url(../img/bg/bg-about-1.png);
background-repeat:no-repeat;
background-size:60vw;
background-position:65vw top;
}
#about::after{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: .3;
content: "";
z-index: -1;
background: url(../img/bg/bg-about-1.png);
background-repeat:no-repeat;
background-size:50vw;
background-position:-35vw;
}
.about-img div{
position: absolute;
}
.about-img div:first-child{
width: 38%;
top: 8vw;
right: 0;
}
.about-img div:last-child{
width: 25%;
top: 0;
right: -3vw;
}
.title_home-ori .title p{
margin-left: 18vw;
color: #848484;
font-size:12px;
}
p.mob-show{
color: #848484;
font-size:12px;
}
h4.mob-show{
color: rgb(var(--main-color));
line-height: 1.5;
letter-spacing: 2px;
font-weight: 300;
}
.mob-show{display: none}
.button-group.show-bt.mob-show{display: none;margin-bottom:2em}
.mob-hide{display: block;}
year{
color: #f07a92;
font-family: 'Spectral', serif;
font-size: 2em;
margin-right: 10px;
vertical-align:sub;
text-align: right;
display: inline-block;
min-width: 80px;
letter-spacing:0
}
year i{
font-size: 12rem;
vertical-align:middle;
margin-left: -100%;
margin-right: 5px;
letter-spacing: -5px;
line-height: .3;
}
.year {color: #b06876;}
.year ul li{
display: flex;
align-items:center;
letter-spacing: 1px;
font-size: 15px;
padding: 10px 0;
}
.year ul li:last-child i{
margin-left: -200%;
color: #d16b7f;
}
.year ul li.big{
margin-top: 1em;
}
.year ul li:first-child{
margin-top: 2em;
}
.year-img{text-align: right;padding-left:80px;}
.year-img img:nth-child(1){
width: 90%;
margin-right: 8%;
}
.year-img img:nth-child(2){
width: 85%;
margin-top: -10%;
margin-right: -1em;
}
.year-img img:nth-child(3){
width: 60%;
margin-top: -15%;
margin-right: 30%;
}
.year-img img:nth-child(4){
width: 90%;
margin-top: -15%;
float: right;
}
.year-img img:nth-child(5){
width: 90%;
margin-top: 15%;
margin-left: -5em;
float: left;
}
.year-img img:nth-child(6){
width: 80%;
margin-top: -22%;
margin-left: -3em;
float: left;
}
.year-img img:nth-child(7){
width: 90%;
margin-top: -15%;
position: relative;
margin-left: -1em;
float: left;
z-index: 2;
}
.year-img img:nth-child(8){
width: 70%;
margin-top: -15%;
margin-left: -2em;
float: left;
position: relative;
z-index: 1;
}
.year-img img:nth-child(9){
width: 100%;
margin-top: -15%;
/* margin-right: -2em; */
float: right;
position: relative;
z-index: 0;
}
#years{
background: url(../img/bg/bg-about-2.svg) no-repeat , url(../img/bg/bg-about-3.svg) no-repeat , url(../img/bg/bg-about-6.png) no-repeat ,url(../img/bg/bg-about-5.png) no-repeat ;
background-position: 115% center, -15% center, left center, right center;
background-size: auto 80%,auto 60%,auto 100%,auto 100%;
padding-top: 15em;
padding-bottom: 3em;
margin-top: -15em;
margin-bottom:0;
}
#menber{
background-color: rgb(var(--main-color));
padding: 3em 0;
}
#volunteer{
background:url(../img/bg/bg-help.svg) no-repeat , url(../img/bg/bg-help.svg) no-repeat , #f59450;
background-position: 80vw center,-43vw 60%;
background-size: auto 200%,auto 220%;
padding: 3.5em 0;
color: #fff;
}
.menber{
width: 60%;
margin: 0 auto;
}
.year ul li.mob-photo{
display: none;
}
.clients{
display: inline-flex;
align-items: center;
padding: 10px 0;
padding-left: 2em;
}
div.clients:first-child{
margin-top: 2em;
}
.clients div{
padding:0 20px;
}
.clients div:first-child{
padding-left: 0;
}
.clients div:last-child{
padding-right: 0;
}
#menber div.button-group{float: right;}
.cl-mob{display: none;}
.button-group.show-bt.mob-show{
margin-left: 0
}
.button-group.show-bt.mob-show::before{
display: none;
}
/* service */
.form-field.three{
display: flex;
align-items: center;
}
.form-field.three select{
width:calc(100% - 1em);
/* margin-right:1em; */
}
.form-field.three span{
margin-right:1em;
}
.form-item:not(:first-child) {
margin-top: 1em;
}
.form-item > :not(:first-child) {
margin-top: 0.25em;
}
.form-item__element {
display: inline-block;
padding: 0.5em;
vertical-align: middle;
background: #fff;
border-radius: 4px;
border: 1px solid gray;
}
.form-item{width: 100%;}
.form-item__element--select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 2em !important;
}
.form-item__element--select:invalid {
color: gray;
}
.form-item__element--select.has-placeholder {
color: gray;
}
.form-item__element--select [disabled] {
color: gray;
}
.form-item__element--select option {
color: #444;
}
.select-wrap::after {
margin-left: -2em;
font-size: 0.75em;
pointer-events: none;
content: 'â–¼';
position: absolute;
top:calc(50% - 0.75em);
right:calc(0% + 1em);
}
.form-field.three .select-wrap::after {
right:calc(0% + 5em);
}
.select-wrap select{
/* width: auto; */
line-height:inherit;
}
.service-img{
margin-left: auto;
width: 35%;
margin-top: -5%;
padding-right: 2em;
}
.box-bg{
width: 45vw;
height: 10vw;
background-color: rgb(var(--main-color));
position: absolute;
right: 0;
}
.data-form label{
line-height: 40px;
margin: 0;
}
h3.service::after{
content: '';
width: 40vw;
height: 1px;
display: block;
background: rgb(var(--main-color));
margin: -.5em auto;
left: 8em;
position:relative;
z-index: -1;
}
form .form{
display: flex;
padding: 0 15px;
}
form .form.noflex{
display: block;
}
.form.noflex label{
text-align-last: left;
float: left;
}
.form.noflex label + span{
line-height: 40px;
}
.form > div:first-child{
min-width:6em;
margin-right: 1em;
}
.form > div:last-child{
width:calc(100% - 7em);
}
.form.noflex > div:last-child{
width:100%;;
}
.form.f9 > div:first-child{
width:9em;
margin-right: 1em;
}
.form.f9 > div:last-child{
width:calc(100% - 10em);
}
/* SERVICES LIST */
.rent-list label{
color: rgb(var(--main-color));
font-size: 1em;
letter-spacing: 1px;
}
.rent-list ul{
margin-bottom: 1em;
}
.rent-list ul li{
display: flex;
}
.rent-list ul li span{
letter-spacing: 1px;
white-space:nowrap;
margin-right: 5px;
font-size: 14px;
}
.check{margin: auto 1em}
p.dowload span{
padding: 10px;
}
p.dowload img{
width: 50px;
}
.ctx {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
overflow: hidden;
transition: all 0.2s ease;
font-weight: 400;
letter-spacing: 1px;
}
.ctx:not(:last-child) {
margin-right: 6px;
}
.ctx:hover {
background-color: rgba(var(--main-color),0.1);
}
.ctx span {
float: left;
vertical-align: middle;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.ctx span:first-child {
position: relative;
width: 18px;
height: 18px;
border-radius: 4px;
-webkit-transform: scale(1);
transform: scale(1);
border: 2px solid #c8ccd4;
transition: all 0.2s ease;
}
.ctx span:first-child svg {
position: absolute;
top: 2px;
left: 1px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transition-delay: 0.1s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.ctx span:last-child {
padding-left: 8px;
line-height: 18px;
}
.ctx:hover span:first-child {
border-color: rgb(var(--main-color));
}
.inp-box:checked + .ctx span:first-child {
background: rgb(var(--main-color));
border-color: rgb(var(--main-color));
-webkit-animation: wave 0.4s ease;
animation: wave 0.4s ease;
}
.inp-box:checked + .ctx span:first-child svg {
stroke-dashoffset: 0;
}
.detail-social .text-bold a{color: #fff;}
.detail-social .text-bold{
color: #fff;
padding: 1em;
padding-bottom: 0;
font-size: 1.3em;
}
.detail-social .detail-title{
color: #ccc;
padding: 1em 1.5em;
padding-top: 0;
line-height: 1.5;
}
@-webkit-keyframes wave {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes wave {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@media screen and (max-width: 640px) {
.ctx {
width: 100%;
margin-bottom: 4px;
display: inline-block;
}
.ctx span:last-child{
width: calc(100% - 18px);
}
}
/* GALLERY */
ul.bootstrap{
letter-spacing: 1px;
font-size: 14px;
margin-bottom: 3em;
padding-left: 2em;
line-height:2;
}
ul.bootstrap li a,
ul.bootstrap li{
float: left;
color: #666;
font-weight: 400;
}
ul.bootstrap li.active,
ul.bootstrap li a:hover{
color: rgb(var(--main-color));
font-weight: 700;
}
ul.bootstrap li::after{
content: '>';
margin: 0 1em;
}
ul.bootstrap li:last-child::after{
content: none;
}
/* volunteer */
.light{
color: #fff;
letter-spacing:1px;
}
.light a{
color: #fff;
}
.light .btn{
margin: auto 1em;
}
.btn.word{
width: 50px;
vertical-align:baseline;
}
.form-field .check{
margin: .4em auto;
float: left;
}
.data-form .ctx span {
color: #666;
font-weight: 400;
letter-spacing: 0;
}
.mobuse{
display: none
}
@media only screen and (max-width:1000px) {
}
/* dc style */
.dc-info-p{
padding-right: 47%;
}
@media only screen and (max-width:1420px) {
.dc-info-p{
padding-right: 0;
}
.dc-info-img{
width: 44% !important;
}
}
@media (max-width: 991px) {
.info-img {
width: 100% !important;
}
}