/*
Theme Name: Chukoh
Version: 1.0
*/

@charset "UTF-8";
/* =================================== */
/*
/*     Name: lyout CSS
/*    Description: lyout Settings
/*
/*    Create: 240730
/*
/* =================================== */

.download .dp_blk {display:none;}
html:lang(ja) .wovn_ja.dp_none { display:none;}
html:lang(ja) .wovn_ja.dp_blk { display:block;}

.floatingNav__item.-lang span:before {
    content: "JP";
}

/************************************************

1.container

************************************************/
div#container {
width: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: relative;
padding-bottom: 0;
z-index: 10;
}
/************************************************

2.contents

************************************************/
div#contents {
width: auto;
margin: 0 auto;
text-align: left;
clear: both;
display: block;
position: relative;
overflow: hidden;
}
/************************************************

3.header & nav

************************************************/
main {
width: auto;
margin: 0 auto;
text-align: left;
clear: both;
display: block;
position: relative;
overflow: hidden;
padding: 0;
}
header {
width: 100%;
z-index: 5010;
position: absolute;
height: 120px;
width: 100vw;
}
#header {
z-index: 500;
top: 0;
left: 0;
width: 100%;
height: 120px;
position: fixed;
}
#header #header--bg {
position: relative;
z-index: 2;
padding: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 120px;
}
#header #header--bg:before {
content: "";
position: absolute;
right: 0;
right: -100vw;
top: 0;
width: 100%;
height: 70px;
background-color: #fff;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: all .4s cubic-bezier(.19, 1, .22, 1);
transition: all .4s cubic-bezier(.19, 1, .22, 1);
-webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1);
transition-timing-function: cubic-bezier(.19, 1, .22, 1);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
box-shadow: 0 0 3px rgba(0, 0, 0, .1);
}
#header.headroom--not-top {
height: 70px;
}
#header.headroom--not-top #header--bg {
height: 70px;
}
#header.headroom--not-top #header--bg::before {
-webkit-transform: translateX(-100vw);
transform: translateX(-100vw);
right: -100vw;
}
#header.headroom--not-top .sp_lyout {
-ms-flex-direction: row-reverse !important;
-webkit-box-orient: horizontal !important;
-webkit-box-direction: reverse !important;
flex-direction: row-reverse !important;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#header.headroom--not-top ul.subnav {
padding: 0;
}
#header.headroom--not-top ul.subnav > li a {
line-height: 70px;
}
#header.headroom--not-top ul.nav > li a {
line-height: 70px;
}
#header.headroom--not-top #logo {
width: 50px;
height: 40px;
}
#header.headroom--not-top #logo a {
height: 40px;
background-size: 147px 40px;
}
#header.headroom--not-top .head-tagline {
display: none;
}
#header.headroom--not-top .subnav_list {
display: none;
}
#header.headroom--not-top .nav_sns {
display: none;
}
#header.headroom--not-top ul.subnav > li.nav_contact {
margin-left: 0;
}
/* logo  ================ */
#logo {
width: 183px;
height: 50px;
text-align: left;
margin-bottom: 0;
padding-top: 0;
z-index: 50;
margin-left: 3rem;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}

#logo a {
display: block;
height: 50px;
    background-image: url(/asset/images/common/logo.svg);
background-size: 183px 50px;
background-position: left top;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

.head-tagline {
font-size: 1.3rem;
padding-left: 20px;
margin-bottom: 0;
color: #2E344F;
line-height: 1;
margin-top: 14px;
}
.head-tagline.on {
color: #fff;
}
/* nav  ================ */
nav {}
ul.nav {
padding: 0 17px;
z-index: 502;
background-color: #fff;
}
ul.nav > li {
font-size: 1.4rem;
display: block;
margin: 0;
padding: 0px;
list-style-type: none;
float: left;
z-index: 70;
position: relative;
}
ul.nav > li a {
white-space: nowrap;
display: block;
text-align: center;
margin: 0 13px 0;
overflow: hidden;
position: relative;
text-decoration: none;
outline: 0;
color: #2C334C;
font-weight: 500;
line-height: 60px;
}
ul.nav > li a:hover {
color: #17A57E;
text-decoration: none;
}
ul.nav > li.nav_list a.current {
color: #17A57E;
text-decoration: none;
}
ul.nav > li.nav_list.home a.current {
color: #2C334C;
text-decoration: none;
}
header nav li.nav_list.home a.current:hover {
color: #17A57E;
}
header nav li.nav_list a:before {
content: "";
position: absolute;
z-index: 1;
left: 0;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(0) translateX(0);
width: 0;
bottom: 0;
background: #17A57E;
height: 4px;
-webkit-transition-property: left, width;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
header nav li.nav_list a:hover:before, header nav li.nav_list a:focus:before, header nav li.nav_list a:active:before {
left: 0;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(0) translateX(0);
width: 100%;
}
header nav li.nav_list a.current:before {
left: 0;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(0) translateX(0);
width: 100%;
}
header nav li.nav_list.home a.current:before {
width: 0;
}
header nav li.nav_list.home a:before {
content: "";
position: absolute;
z-index: 1;
left: 0;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(0) translateX(0);
width: 0;
bottom: 0;
background: #17A57E;
height: 4px;
-webkit-transition-property: left, width;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
header nav li.nav_list.home a:hover:before, header nav li.nav_list.home a:focus:before, header nav li.nav_list.home a:active:before {
left: 0;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(0) translateX(0);
width: 100%;
}
ul.subnav {
padding: 0 0 0 10px;
z-index: 502;
background-color: #374252;
opacity: 0.85;
}
ul.subnav > li {
font-size: 1.3rem;
display: block;
margin: 0;
padding: 0px;
list-style-type: none;
float: left;
z-index: 70;
position: relative;
}
ul.subnav > li a {
white-space: nowrap;
display: block;
text-align: center;
overflow: hidden;
line-height: 60px;
position: relative;
text-decoration: none;
outline: 0;
color: #fff;
font-weight: 500;
}
ul.subnav > li.subnav_list a {
padding: 0 20px 0;
}
ul.subnav > li.subnav_list a:hover {
color: #ccc;
}
ul.subnav > li.subnav_list a:after {
content: "";
z-index: 1;
height: 18px;
width: 1px;
background: #bbb;
display: inline-block;
position: absolute;
right: 0;
top: 50%;
margin-top: -9px;
}
ul.subnav > li:nth-child(3) a:after {
content: none;
}
.nav_sns a {
border: 1px solid #fff;
border-radius: 50px 50px;
line-height: 1 !important;
padding: 9px !important;
font-size: 1.6rem;
margin: 12px 3px 0 !important;
}
.nav_sns a i {
padding-right: 0 !important;
}
ul.subnav > li.nav_contact {
float: right;
margin-left: 18px;
}
ul.subnav > li.nav_contact a {
background-color: #01ABA7;
width: 160px;
}
ul.subnav > li.nav_contact a:hover {
background-color: #007876;
}
@media only screen and (max-width: 1090px) {
ul.subnav > li {
font-size: 1.2rem;
}
ul.subnav > li.subnav_list a {
padding: 0 10px 0;
}
ul.nav > li {
font-size: 1.3rem;
}
ul.nav > li a {
margin: 0 8px 0;
}
ul.subnav > li.nav_contact a {
width: 140px;
}
ul.nav {
padding: 0 10px;
}
}
@media only screen and (max-width: 991px) {
#navi_btn {
width: 50px;
height: 30px;
z-index: 10000;
display: none;
}
#navi_btn {
position: relative;
cursor: pointer;
}
#navi_btn.scroll {
position: fixed;
}
.smt-logo {
display: none;
}
.menu-trigger, .menu-trigger span {
display: inline-block;
-webkit-transition: all .4s;
transition: all .4s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.menu-trigger {
position: absolute;
width: 26px;
height: 23px;
top: 3px;
left: 15px;
}
.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background-color: #17a57e;
}
.menu-trigger span:nth-of-type(1) {
top: 0;
}
.menu-trigger span:nth-of-type(2) {
top: 10px;
}
.menu-trigger span:nth-of-type(3) {
bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(10px) rotate(-315deg);
transform: translateY(10px) rotate(-315deg);
}
.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-20px) rotate(315deg);
transform: translateY(-10px) rotate(315deg);
}
.comp__subnavigation {
position: relative;
padding: 0 0 0;
border-top: 1px solid #ccc;
}
#header.headroom--not-top ul.subnav > li a {
line-height: 60px;
}
#header.headroom--not-top nav {
-ms-flex-direction: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: none;
display: none;
-ms-flex-wrap: none;
flex-wrap: none;
}
.sp_lyout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.comp__navigation {
display: none;
position: absolute;
top: 0;
margin-top: 0;
background-color: #374252;
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: -webkit-calc(100vh);
height: 100vh;
-webkit-transition: opacity .4s ease, top 0s ease 1s;
transition: opacity .4s ease, top 0s ease 1s;
width: 100%;
padding: 80px 20px 30px;
}
.comp__navigation * {
color: #fff !important;
}
ul.nav {
margin: 0 0 20px;
background-color: transparent;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
padding: 0;
border-top: 1px solid #787f89;
}
ul.nav li {
font-size: 1.4rem;
display: block;
float: none;
border-bottom: 1px solid #787f89;
}
ul.nav li a {
white-space: nowrap;
display: block;
height: 50px;
line-height: 50px !important;
margin: 0;
text-align: left;
}
ul.nav li:first-child a {
margin: 0 0 0 0;
}
nav {
display: none;
}
ul.subnav {
padding: 0;
width: 100%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
z-index: 502;
background-color: transparent;
opacity: 1;
}
ul.subnav > li {
font-size: 1.2rem;
float: none;
display: inline-block !important;
}
.subnav_list {
width: 33%;
}
ul.subnav > .subnav_list a {
line-height: 1.6 !important;
}
ul.subnav > li.nav_sns {
margin: 10px 0 0;
}
ul.subnav > li.nav_contact a {
width: 60%;
margin: 0 auto;
}
ul.subnav > li.nav_contact {
display: block !important;
float: none;
margin: 20px auto 0;
}
#logo {
width: 110px;
height: 30px;
margin: 0;
z-index: 100000;
}
#logo a {
height: 30px;
background-size: 110px;
}
header {
height: auto;
}
#header {
height: auto;
margin: 0;
}
#header #header--bg:before {
height: 70px;
}
header nav li.nav_list a:before {
display: none;
}
#header #header--bg {
height: inherit;
padding: 19px 0 19px;
}
#header.header-sticky #header--bg {
background-color: #fff;
border-bottom: 1px solid #ddd;
}
#header.headroom--not-top #logo {
width: 110px;
height: 30px;
}
#header.headroom--not-top #logo a {
height: 30px;
background-size: 110px;
}
.btn-product .js-s-toggle {
position: relative;
}
.btn-product .js-s-toggle:before {
position: absolute;
top: 50%;
right: 10px;
left: inherit !important;
display: block;
content: "";
width: 15px !important;
height: 1px;
background: #fff;
}
.btn-product .js-s-toggle:after {
position: absolute;
top: 50%;
right: 17px;
display: block;
content: "";
width: 1px;
height: 15px;
margin-top: -7px;
background: #fff;
}
.btn-product.active .js-s-toggle:after {
display: none;
}

}
@media only screen and (max-width: 450px) {
.head-tagline {
display: none;
}
}
@media only screen and (max-width: 350px) {
.subnav_list:nth-child(1) {
width: 25%;
}
.subnav_list:nth-child(2) {
width: 35%;
}
.subnav_list:nth-child(3) {
width: 40%;
}
}
/*
megamenu_product [
----------------------------------------------------------- */
.megamenu_product {
	color: #fff;
	display: none;
	margin: 0 auto;
	top: 120px;
	left: 0;
	text-align: left;
	padding: 40px 80px 0;
	z-index: 9999;
	width: 100%;
	position: fixed;
	-webkit-box-shadow: none;
	box-shadow: none;
	overflow-y: auto;
	visibility: visible;
	white-space: normal;
	bottom: 0px;
	height: initial;
	border-width: initial !important;
	border-style: none !important;
	border-color: initial !important;
	-o-border-image: initial !important;
	border-image: initial !important;
	border-radius: 0 !important;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	width: 100vw;
	background-color: transparent;
}
.megamenu_product .home_movement_container {
	max-width: 1180px;
	margin: 0 auto;
}
.megamenu_product .home_movement_container .comp__tabContent {
	display: table;
	width: 100%;
	height: calc(100vh - 240px);
}
.megamenu_product .home_movement_container .comp__tabContent .tabContent {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}
.img-close {
	cursor: pointer;
	z-index: 50;
}
/*.megamenu_product hr {
margin: 20px 0 20px;
}
.img-close:hover {
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
.megamenu_product p {
font-size: 2.0rem;
font-weight: 500;
line-height: 1;
margin-bottom: 0;
}
.megamenu_product p a {
color: #fff;
padding-left: 20px;
}
.megamenu_product p a:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
width: 6px;
height: 6px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.3s all;
transition: 0.3s all;
}
.megamenu_product .comp__mega_category p {
margin-bottom: 30px;
}
.megamenu_product.is-active {
display: block;
}
.comp__mega_categorylist a {
color: #fff;
position: relative;
}
.comp__mega_categorylist a:hover {
color: #B0B0B0;
}

.megamenu_product ul ul {
margin-bottom: 8px;
padding-top: 4px;
}
.megamenu_product ul li li a {
font-size: 1.3rem;
padding-left: 15px;
color: #dadada;
}
.megamenu_product ul ul li a:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
width: 6px;
height: 6px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.3s all;
transition: 0.3s all;
}
.comp__mega_categorylist dl {
margin-bottom: 20px;
}
.comp__mega_categorylist dt {
padding-right: 15px;
width: 30%;
}
.comp__mega_categorylist dd {
font-size: 1.6rem;
font-weight: 500;
width: 70%;
line-height: 1.2;
color: #fff;
}
*/
.megamenu_product ul li {
	font-size: 1.6rem;
	margin-bottom: 0;
}
#container.megamenu--bg:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #eef1f2 !important;
	opacity: 0.96;
	-webkit-transform: translateY(-101%);
	transform: translateY(-101%);
	-webkit-transition: all .4s cubic-bezier(.19, 1, .22, 1);
	transition: all .4s cubic-bezier(.19, 1, .22, 1);
	-webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1);
	transition-timing-function: cubic-bezier(.19, 1, .22, 1);
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
	box-shadow: 0 0 3px rgba(0, 0, 0, .1);
	z-index: 5010;
}
#container.on.megamenu--bg::before {
	-webkit-transform: translateY(0);
	transform: translateY(0)
}

@media only screen and (max-width: 991px) {
	.megamenu_product {
		margin: 0 auto;
		padding: 0;
		top: 0;
		position: relative;
		height: initial;
		border-width: initial !important;
		border-style: none !important;
		border-color: initial !important;
		-o-border-image: initial !important;
		border-image: initial !important;
		border-radius: 0 !important;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		width: 100%;
	}
	.megamenu_product ul li {
		font-size: 1.3rem;
		margin-bottom: 0;
		border: none;
	}
	.megamenu_product hr {
		display: none;
	}
	.megamenu_product p {
		display: none;
	}
	.img-close {
		display: none;
	}
	.megamenu_product ul ul {
		display: none;
	}
	.comp__mega_category > .col-12 {
		padding: 0;
		border-bottom: 1px solid #787f89;
	}
}
/* ===================================

4: floatingNav

====================================== */
.floatingNav {
position: absolute;
position: fixed;
right: 0;
width: 60px;
top: 50%;
height: auto;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.floatingNav {
top: 50%;
height: auto;
transform: translateY(-50%);
-moz-transform: rotate(-50%);
-o-transform: rotate(-50%);
-ms-transform: rotate(-50%);
-webkit-transform: rotate(-50%);
}
.floatingNav__list {
position: absolute;
top: 50%;
width: 60px;
margin-top: -90px;
}
.floatingNav, .floatingNav__list {
z-index: 5002;
}
.floatingNav__item {
display: block;
width: 60px;
height: 60px;
overflow: hidden;
}
.floatingNav__item a {
display: block;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
text-indent: -9999px;
transition: background .2s ease-out;
-moz-transition: background .2s ease-out;
-o-transition: background .2s ease-out;
-webkit-transition: background .2s ease-out;
}
.floatingNav__item.-mail a {
    background-image: url(/asset/images/common/ico_mail.svg);
background-size: 24px 18px;
background-color: #01ABA7;
}
.floatingNav__item.-mail a:hover {
background-color: #00807D;
}
.floatingNav__item.-search a {
    background-image: url(/asset/images/common/ico_search.svg);
background-size: 20px 20px;
background-color: #189468;
}
.floatingNav__item.-search a:hover {
background-color: #0F5F43;
}
.floatingNav__item.-lang a {
    background-image: url(/asset/images/common/ico_lang.svg);
background-size: 20px 20px;
background-color: #35774D;
background-position: center 15px;
color: #fff;
}
.floatingNav__item.-lang a:hover {
background-color: #1E432C;
}
.floatingNav__item.-lang a {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
text-indent: inherit;
}
.floatingNav__item.-lang span {
display: block;
position: relative;
top: 74%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
font-size: 1.1rem;
margin-top: 0;
}
@media screen and (max-width: 991px) {
.floatingNav {
top: 14px;
height: auto;
position: fixed;
right: 10px;
width: 120px;
z-index: 100000;
}
.floatingNav__list {
position: absolute;
top: 0;
width: 120px;
margin-top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.floatingNav__list {
transition: -webkit-transform .4s;
-webkit-transition: -webkit-transform .4s;
transition: transform .4s;
transition: transform .4s, -webkit-transform .4s;
-webkit-transform: rotateY(0) rotateZ(0);
transform: rotateY(0) rotateZ(0);
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
moz-transform-origin: right bottom;
}
.floatingNav__item {
display: block;
width: 40px;
height: 40px;
overflow: hidden;
}
.floatingNav__item.-mail a {
background-size: 18px;
}
.floatingNav__item.-search a {
background-size: 14px;
}
.floatingNav__item.-lang a {
background-size: 12px;
background-position: center 10px;
}
.floatingNav__item.-lang span {
top: 74%;
font-size: 1rem;
}
}
/* ===================================

4: Footer

====================================== */
/*
comp__cta_item [
----------------------------------------------------------- */
a.comp__cta_item {
width: 100%;
height: 400px;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
-ms-grid-row-align: center;
-webkit-box-align: center;
align-items: center;
background-position: center;
background-size: cover;
overflow: hidden;
}
a.comp__cta_item:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
display: block;
background-color: #464646 !important;
top: 0;
left: 0;
z-index: -1;
opacity: 0.8;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
a.comp__cta_item:hover:after {
background-color: #818181 !important;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
.comp__cta dl {
text-align: center;
width: 100%;
display: block;
padding: 0 30px;
color: #fff;
z-index: 2;
}
.comp__cta dt {
font-size: 2.2rem;
font-weight: 500;
}
.comp__cta_item.catalog {
background-image: url(/asset/images/common/footer_cta_bg01.jpg);
z-index: 0;
}
.comp__cta_item.company {
    background-image: url(/asset/images/common/footer_cta_bg02.jpg);
z-index: 0;
}
.comp__cta_item.locations {
    background-image: url(/asset/images/common/footer_cta_bg03.jpg);
z-index: 0;
}
@media only screen and (max-width: 991px) {
.comp__cta dt {
font-size: 1.8rem;
}
.comp__cta dd {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 768px) {
a.comp__cta_item {
height: 250px;
color: #ddd;
}
.comp__cta dt {
font-size: 1.8rem;
}
.comp__cta dd {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 576px) {
a.comp__cta_item {
height: 200px;
color: #ddd;
}
.comp__cta dl {
margin: 0 50px;
}
}
.pagetop {
position: fixed;
bottom: 0;
right: 0;
width: 60px;
height: 60px;
z-index: 1000;
}
.pagetop a {
position: relative;
background-color: #374252;
display: block;
height: 60px;
border: #374252;
}
.pagetop.stop a {
border: 1px solid #ccc;
}
.pagetop a:hover {
background-color: #189468;
border: #189468;
}
.pagetop a::before {
position: absolute;
top: 6px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.pagetop a::before {
width: 9px;
height: 9px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
-webkit-transition: 0.3s all;
transition: 0.3s all;
}
@media only screen and (max-width: 576px) {
.pagetop {
width: 40px;
height: 40px;
}
.pagetop a {
height: 40px;
}
}
.comp__contact {
background-color: #01ABA7;
padding: 80px;
text-align: center;
color: #fff;
}
.comp__contact h3 {
margin-bottom: 10px;
}
.comp__contact p {
margin-bottom: 14px;
}
.comp__contact_tel {
font-size: 3.0rem;
line-height: 1;
margin-bottom: 6px !important;
font-weight: 500;
}
.comp__contact_tel span.free {
font-size: 1.2rem;
display: inline-block;
margin-right: 10px;
border: 1px solid #fff;
border-radius: 50px 50px;
padding: 6px 10px;
vertical-align: bottom;
font-weight: 500;
}
.comp__contact_tel a {
color: #fff !important;
text-decoration: none;
}
.comp__contact_open {
font-size: 1.4rem;
}
@media only screen and (max-width: 768px) {
.comp__contact {
padding: 40px 20px;
}
.comp__contact h3 {
text-align: center;
}
.comp__contact_tel b {
display: block;
margin-right: 0;
margin-bottom: 10px;
}
.comp__contact_tel i {
display: block;
margin-left: 0;
padding-top: 4px;
font-size: 1.2rem;
}
.comp__contact .btn {
margin: 0;
width: 100%;
margin-bottom: 10px;
}
}
@media only screen and (max-width: 576px) {
.comp__contact p {
font-size: 1.2rem;
}
.comp__contact p.comp__contact_tel {
font-size: 2.2rem;
line-height: 1;
}
.comp__contact_tel span.free {
font-size: 1.0rem;
vertical-align: top;
font-weight: 700;
}
}
/*
foot [
----------------------------------------------------------- */
footer {
clear: both;
position: relative;
background-color: #374252;
}
footer * {
color: #fff;
}
div#footer {
clear: both;
margin: 0 auto;
padding: 70px 0 70px;
position: relative;
text-align: left;
}
div#footer .comp__footer-title a {
padding-right: 0;
}
div#footer .comp__footer-title span {
display: inline-block;
height: 50px;
    background-image: url(/asset/images/common/footer_logo.svg);
background-size: 183px 50px;
background-position: left top;
background-repeat: no-repeat;
padding-left: 220px;
line-height: 50px;
}
div#footer .comp__footer-sitemap li {
margin: 0 0 20px;
display: block;
font-size: 1.5rem;
text-align: left;
font-weight: 500;
line-height: 1.6;
}
div#footer .comp__footer-sitemap li a {
color: #fff;
}
div#footer .comp__footer-sitemap li li a {
color: #FFFFFF;
}
div#footer .comp__footer-sitemap li a:hover {
color: #FFFFFF;
text-decoration: underline;
}
div#footer .comp__footer-sitemap ul ul {
padding-top: 20px;
}
div#footer .comp__footer-sitemap ul li ul li {
margin: 0 0 15px;
font-size: 1.3rem;
font-weight: 400;
}
div#footer .comp__footer-sitemap .txt-description {
margin: 0;
}
div#footer .comp__footer-sitemap dt {
font-weight: 500;
margin-bottom: 20px;
font-size: 1.5rem;
float: none;
padding: 0;
line-height: 1.6;
}
div#footer .comp__footer-sitemap dt a {
color: #fff;
}
div#footer .comp__footer-sitemap dd a {
color: #FFFFFF;
}
div#footer .comp__footer-sitemap dt a:hover, div#footer .comp__footer-sitemap dd a:hover {
color: #fff;
text-decoration: underline;
}
div#footer .comp__footer-sitemap dd ul li {
margin: 0 0 15px;
font-size: 1.3rem;
font-weight: 400;
}
.comp__footer-sitemap {
padding-top: 40px;
}
div#footer .comp__footer-sitemap .none {
display: none;
}
#footer-end {
padding-top: 30px;
padding-bottom: 30px;
text-align: left;
background-color: #fff;
}
#footer-end .foot_link li {
display: inline-block;
padding-left: 30px;
line-height: 1;
}
#footer-end * {
color: #868686;
font-size: 12px;
}
.foot_link {
text-align: right;
margin-bottom: 10px;
}
p.footer-copy {
color: #868686;
font-size: 12px;
padding: 0;
margin-bottom: 0;
text-align: right;
line-height: 1;
}
.comp__footer_sns li {
float: left;
}
.comp__footer_sns li.nav_sns a {
padding: 9px 13px !important;
}
@media only screen and (max-width: 991px) {
div#footer .comp__footer-sitemap li {
font-size: 1.4rem;
}
div#footer .comp__footer-sitemap ul li ul li {
font-size: 1.2rem;
}
div#footer .comp__footer-sitemap .txt-description {
margin: 0 0 30px;
}
}
@media only screen and (max-width: 767px) {
div#footer .comp__footer-sitemap li {
font-size: 1.3rem;
}
.comp__footer_sns {
padding: 30px 15px 15px;
}
#footer-end {
text-align: center;
}
p.footer-copy {
font-size: 1.0rem !important;
text-align: center;
line-height: 1.4rem;
}
div#footer .comp__footer-title span {
background-size: 120px;
padding-left: 140px;
line-height: 44px;
font-size: 1.2rem;
}
#footer-end .col-md-6 .row.align-middle {
border-bottom: 1px solid #ccc;
padding-bottom: 25px;
}
#footer-end .row.align-middle .col {
font-size: 10px;
text-align: left;
}
.foot_link {
text-align: center;
margin-bottom: 10px;
}
#footer-end .foot_link li {
padding: 20px 10px;
line-height: 1;
}
}
@media only screen and (max-width: 576px) {
div#footer .comp__footer-sitemap li {
font-size: 1.3rem;
}
.comp__footer_sns {
padding: 20px 15px 0;
}
div#footer {
padding: 40px 0rem 40px;
}
.comp__footer-sitemap {
padding-top: 30px;
}
div#footer .comp__footer-sitemap .none {
display: block;
}
div#footer .comp__footer-sitemap .txt-description {
margin: 0 0 15px;
border-bottom: 1px solid #555555;
}
div#footer .comp__footer-sitemap .txt-description dt {
font-weight: 600;
margin-bottom: 0;
font-size: 1.3rem;
margin: 10px 0 0;
padding: 20px 0;
border-top: 1px solid #555555;
}
div#footer .comp__footer-sitemap .txt-description dd {
padding: 0 0 10px;
border-top: none;
line-height: 1.6;
}
div#footer .comp__footer-sitemap .txt-description dt i.icon:before {
background: #fff;
}
div#footer .comp__footer-sitemap .txt-description dt i.icon:after {
background: #fff;
}
div#footer .comp__footer-sitemap ul {
margin-bottom: 0;
}
div#footer .comp__footer-sitemap .first_list {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
div#footer .comp__footer-sitemap .first_list li {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 12px;
}
div#footer .comp__footer-sitemap .second_list {
display: none;
}
div#footer .comp__footer-sitemap .third_list {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
div#footer .comp__footer-sitemap .third_list li {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 12px;
}
div#footer .comp__footer-sitemap ul ul {
padding-top: 10px;
}
div#footer .comp__footer-sitemap dt {
margin-bottom: 10px;
font-size: 1.3rem;
}
div#footer .comp__footer-sitemap dd ul li {
display: block;
margin-bottom: 10px;
font-size: 1.2rem;
}
}
/* ===================================

4: search

====================================== */
.input-group {
width: 80%;
}
.input-group.result {
width: 100%;
}
.input-group .row {
margin: auto;
width: 100%;
}
.input-group .medium-expand {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0px;
padding-right: 0;
padding-left: 0;
border-radius: 0 0 0 0;
}
.input-group .input--search {
width: 100%;
border-radius: 0 0 0 0;
height: 60px;
line-height: 60px;
font-size: 2.0rem;
padding: 0 30px 0 30px;
color: #333;
}
.input-group .shrink {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
max-width: 100%;
}
.input-group .shrink .btn a {
height: 60px;
padding: 0 30px !important;
border-radius: 0;
}
.input-group .shrink .btn > * {
line-height: 58px;
}
.modal__contents.search + .modal__close {
margin: 0 0;
margin-top: 0;
padding-top: 0;
text-align: center;
position: absolute;
top: 30px;
right: 30px;
}
.comp__keyword {}
.comp__keyword li {
display: inline-block;
margin-right: 10px;
font-size: 1.4rem;
margin-bottom: 5px;
}
.comp__keyword li a {
color: #fff;
border: 1px solid #fff;
padding: 3px 8px;
border-radius: 4px;
display: block;
}
.comp__keyword li a:hover {
color: #fff;
background-color: #01ABA7;
border: 1px solid #01ABA7;
}
.comp__language {
border-top: 1px solid #787f89;
}
.comp__language li {
font-size: 1.6rem;
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid #787f89;
padding-top: 10px;
letter-spacing: 0.2rem;
font-family: 'IBM Plex Sans', sans-serif;
}
.comp__language li a {
color: #fff;
text-align:center;

}
@media only screen and (max-width: 576px) {
.input-group {
width: 100%;
}
.input-group .input--search {
font-size: 1.6rem;
padding: 0 20px 0 20px;
}
}
/* ===================================

5: Component

====================================== */
/* heading
------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
padding: 0;
clear: both;
margin: 0;
font-weight: normal;
font-feature-setting: "pkna" 1;
}
.ttl--Xxl {
font-size: 5.0rem;
font-weight: 500;
line-height: 1.2 !important;
}
.ttl--Xl {
/* 基本h2に適用 */
font-size: 3.0rem !important;
line-height: 1.4 !important;
font-weight: 500;
}
.ttl--l {
/* 基本h2に適用 */
font-size: 2.4rem !important;
line-height: 1.6 !important;
font-weight: 500;
}
.ttl--m {
/* 基本h2に適用 */
font-size: 2.2rem !important;
line-height: 1.6 !important;
font-weight: 500;
}
.ttl--s {
/* 基本h2に適用 */
font-size: 2.0rem !important;
line-height: 1.6 !important;
font-weight: 500;
}
.ttl--lead {
/* 基本h2に適用 */
font-size: 1.8rem !important;
line-height: 1.6 !important;
font-weight: 400;
}
.ttl_en {
font-family: 'IBM Plex Sans', sans-serif;
}
.ttl_en_caption {
font-size: 1.4rem;
font-weight: 400;
font-style: italic;
color: #00AC81;
line-height: 1.4;
margin-bottom: 8px;
font-family: 'IBM Plex Sans', sans-serif;
}
@media only screen and (max-width: 576px) {
h1, h2, h3, h4, h5, h6 {
padding: 0;
font-size: 16px;
clear: both;
margin: 0;
font-weight: normal;
}
.ttl--Xxl {
font-size: 3rem;
margin-bottom: 3rem;
}
.ttl--Xl {
font-size: 2rem !important;
margin-bottom: 3rem;
line-height: 1.4 !important;
}
.ttl--lead {
font-size: 1.5rem !important;
margin-bottom: 20px;
text-align: left;
}
.ttl--l {
font-size: 1.8rem !important;
margin-bottom: 30px;
letter-spacing: 0;
text-align: left;
}
.ttl--m {
font-size: 1.6rem !important;
line-height: 1.6 !important;
font-weight: 500;
}
.ttl--s {
/* 基本h2に適用 */
font-size: 1.4rem !important;
}
}
/* button [
------------------------------------------ */
.btn {
position: relative;
display: inline-block;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
/*    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, .1);*/
line-height: 24px;
}
.btn > * {
color: #fff !important;
display: block;
text-align: center;
text-decoration: none;
position: relative;
border: 1px solid #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
padding: 12px 26px !important;
border-radius: 4px;
font-weight: 700;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.btn.main > * {
background-color: #01ABA7;
border: 1px solid #01ABA7;
font-weight: 700;
}
.btn.main > a:hover {
background-color: #0E7775;
border: 1px solid #0E7775 !important;
}
.btn.second > * {
background-color: #5481B4;
border: 1px solid #5481B4;
font-weight: 700;
}
.btn.second > a:hover {
background-color: #3D5C7F;
border: 1px solid #3D5C7F !important;
}
.btn.third > * {
background-color: #374252;
border: 1px solid #374252;
font-weight: 700;
}
.btn.third > a:hover {
background-color: #1E2735;
border: 1px solid #1E2735 !important;
}
.btn.linegray > * {
background-color: #fff;
border: 1px solid #B4B4B4;
font-weight: 500;
color: #707070 !important;
}
.btn.linegray > a:hover {
border: 1px solid #424242 !important;
color: #fff !important;
background-color: #424242;
}
.btn_center {
width: 240px;
margin: 0 auto;
}
.btn.center {
margin-left: auto;
margin-right: auto;
}
.btn.large a {
font-size: 1.8rem;
padding: 22px 26px !important;
border-radius: 4px;
font-weight: 700;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.btn.small a {
font-size: 1.4rem;
padding: 10px 15px !important;
border-radius: 4px;
font-weight: 500;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.btn.w-all {
display: block;
}
/* pdf button [
------------------------------------------ */
i.pdf {
content: "";
display: inline-block;
width: 18px;
height: 19px;
margin-top: 3px;
margin-left: 0 !important;
margin-right: 8px;
vertical-align: sub;
background-position: 0px 0;
    background-image: url(/asset/images/common/ico_pdf.png);
background-size: 18px 19px;
}
@media only screen and (max-width: 576px) {
main .btn {
width: auto !important;
}
.btn > * {
font-size: 1.4rem !important;
width: auto;
}
.btn.large a {
padding: 12px 20px !important;
}
.btn.small a {
font-size: 1.2rem !important;
padding: 6px 10px !important;
}
}
/* pdf button [
------------------------------------------ */
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
/* comp__cta_btn  ================ */
ol.list_parentheses {
padding: 0 0 0 1em;
margin: 0;
}
ol.list_parentheses li {
padding: 0 0 0 0;
margin: 0 0 15px;
}
ol.list_parentheses ol li {
margin: 0 0 5px;
list-style-type: none;
counter-increment: cnt;
text-indent: -1.5em;
padding: 0 0 0 1.5em;
}
ol.list_parentheses ol li:last-child {
margin: 0 0 0;
}
ol.list_parentheses ol li:before {
display: marker;
content: "(" counter(cnt) ") ";
}
ol.list_parentheses ul {
margin-bottom: 15px;
}
ol.list_parentheses ul li:before {
margin-right: 12px;
content: '';
width: 6px;
height: 6px;
border-radius: 100%;
display: inline-block;
vertical-align: middle;
background: #666;
}
ol.list_parentheses ul li {
margin-top: .5em;
padding-left: 1em;
text-indent: -1em;
margin-bottom: 0;
}

ul, .comp__article ol {
}
ul.list_diac {
margin-left: 2.0rem;
list-style-type: disc;
}
ul.list_diac li {
list-style-type: disc;
}
ul.list_diac {
margin-bottom: 1rem;
list-style-position: outside;
line-height: 1.6;
}
ul.list_diac li {
line-height: 2em;
}
/* comp__cta_btn  ================ */
.comp__cta_btn {
background-color: #374252;
padding: 50px;
text-align: center;
margin-bottom: 30px;
}
.comp__cta_btn * {
color: #fff;
}
@media only screen and (max-width: 576px) {
.comp__cta_btn {
padding: 30px 20px;
}
}
/* btn-group  ================ */
.btn-group li {
margin-right: 10px;
}
/* large_btn  ================ */
.large_btn {
position: relative;
overflow: hidden;
display: inline-block;
height: 50px;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
font-weight: 700 !important;
letter-spacing: 0.6px;
}
.large_btn > * {
height: 50px;
line-height: 48px;
color: #fff !important;
display: block;
text-align: center;
text-decoration: none;
position: relative;
border: 1px solid #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 1.8rem;
font-weight: 700;
border-radius: 50px 50px;
padding: 0 40px;
}
.large_btn > *:before {
content: "";
display: block;
}
.large_btn > *:after {
content: "";
display: block;
}
.large_btn > *:before, .large_btn > *:after {
position: absolute;
width: 0;
height: 0;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
opacity: 0;
}
.large_btn:hover > * {
border-color: transparent;
background-color: #fff;
color: #01ABA7 !important;
}
.large_btn:hover > *:before, .large_btn:hover > *:after {
opacity: 1;
width: 100%;
width: calc(100%+ 1px);
height: 100%;
height: calc(100%+ 1px);
}
@media only screen and (max-width: 576px) {
.large_btn {
height: 40px;
}
.large_btn > * {
font-size: 1.4rem;
height: 40px;
line-height: 38px;
padding: 0 20px;
}
.btn-group li {
margin-bottom: 10px;
}
}
/* mega_link [
------------------------------------------ */
.mega_link {
display: block;
margin-top: 60px;
}
.mega_link a {
display: block;
background-color: #DDDDDD;
padding: 90px 0 70px;
text-align: center;
color: #2C334C;
position: relative;
}
.mega_link a:before {
content: "";
}
.mega_link a:before, .mega_link a::after {
position: absolute;
content: "";
}
.mega_link a::before {
top: 80px;
right: 50%;
left: 50%;
margin-left: -7px;
display: block;
width: 15px;
height: 1px;
background: #2E344F;
-webkit-transition: 0.3s all;
transition: 0.3s all;
}
.mega_link a::after {
top: 80px;
right: 50%;
left: 50%;
display: block;
width: 1px;
height: 15px;
margin-top: -7px;
background: #2E344F;
-webkit-transition: 0.3s all;
transition: 0.3s all;
}
.mega_link a:hover {
background-color: #28b8b4;
color: #fff;
}
.mega_link a:hover::before {
background: #fff;
}
.mega_link a:hover::after {
background: #fff;
}
/* table [
------------------------------------------ */
table.detail_tbl2 {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
border: 1px solid #ccc;
font-size: 1.4rem;
margin-bottom: 0;
background-color: #fff;
}
.scroll + p {
padding-top: 15px;
}
table.detail_tbl2 + p {
padding-top: 15px;
}
table.detail_tbl2 thead td {
padding: 8px 10px;
margin: 0px;
border: 1px solid #ccc;
color: #374252;
background: rgba(86, 122, 134, 0.1);
font-weight: 700;
text-align: center;
white-space: nowrap;
}
table.detail_tbl2 thead th {
padding: 8px 10px;
margin: 0px;
border: 1px solid #ccc;
color: #374252;
background: rgba(86, 122, 134, 0.1);
font-weight: 700;
text-align: center;
white-space: nowrap;
}
table.detail_tbl2 tbody tr {
margin: 0px;
padding: 0px;
}
table.detail_tbl2 tbody td {
padding: 5px 10px;
text-align: center;
margin: 0px;
border: 1px solid #ccc;
}
table.detail_tbl2 tbody th {
margin: 0;
padding: 5px 10px;
text-align: center;
border: 1px solid #ccc;
background: rgba(65, 81, 88, 0.1);
white-space: nowrap;
}
table.detail_tbl2 tbody tr:nth-of-type(even) {
background-color: rgba(86, 122, 134, 0.1);
}
table.bg_adjustment.detail_tbl2 tbody tr:nth-of-type(even) {
background-color: transparent;
}
table.bg_adjustment.detail_tbl2 tbody td.body2 {
background-color: rgba(86, 122, 134, 0.1);
}
table.detail_tbl2 .body3 {
white-space: nowrap;
background: rgba(65, 81, 88, 0.1);
}
.table_pa10 th {
padding: 10px !important;
text-align: left !important;
}
.table_pa10 td {
padding-left: 10px !important;
text-align: left !important;
}
.scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scroll::-webkit-scrollbar {
height: 10px;
}
.scroll::-webkit-scrollbar-track {
margin: 0 2px;
background: #ccc;
}
.scroll::-webkit-scrollbar-thumb {
background: #666;
}
@media only screen and (max-width: 576px) {
table.detail_tbl2 {
font-size: 1.2rem;
}
.scroll {
overflow-x: scroll;
display: block;
width: 100%;
-webkit-overflow-scrolling: auto;
background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.2))) 0 0/20px 100%, -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.2))) right/20px 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: #fff;
}
.scroll::-webkit-scrollbar {
height: 10px;
}
.scroll::-webkit-scrollbar-track {
margin: 0 2px;
background: #ccc;
}
.scroll::-webkit-scrollbar-thumb {
background: #666;
}
.scroll table {
background: linear-gradient(to left, hsla(0, 0%, 100%, 0), white 15px) 0 0 / 50px 100%, linear-gradient(to right, hsla(0, 0%, 100%, 0), white 15px) right / 50px 100%;
background-repeat: no-repeat;
background-attachment: local;
border-bottom: 1px solid #CCC;
border-collapse: collapse;
}
.scroll + h4 {
padding-top: 20px;
}
}
/* ===================================

5:Project

====================================== */
/*
body [
----------------------------------------------------------- */
#section--home {
background-color: #FFFFFF;
}
.header_p #contents {
padding-top: 120px
}
@media only screen and (max-width: 991px) {
.header_p #contents {
padding-top: 80px;
}
}
/*
breadcrumbs [
----------------------------------------------------------- */
.breadcrumbs {
margin: 0 0 10px 0;
list-style: none;
white-space: nowrap;
padding-top: 30px;
}
.breadcrumbs::before, .breadcrumbs::after {
display: table;
content: ' ';
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.breadcrumbs::after {
clear: both;
}
.breadcrumbs li {
font-size: 1.4rem;
cursor: default;
display: inline-block;
white-space: nowrap;
letter-spacing: 0.1rem;
}
.breadcrumbs li:not(:last-child)::after {
position: relative;
top: 1px;
margin: 0 0.5rem;
opacity: 1;
content: ">";
}
.breadcrumbs a {
color: #374252;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs .disabled {
color: #cacaca;
cursor: not-allowed;
}
.breadcrumbs span {
font-weight: 700;
}
.product_details .breadcrumbs li.breadcrumbs_category + li.breadcrumbs_category {
display: none;
}
@media only screen and (max-width: 575px) {
.breadcrumbs {
padding-top: 0;
}
.breadcrumbs li {
font-size: 1.2rem;
}
}
/* ===================================

6:top page

====================================== */
/*
top page cover [
----------------------------------------------------------- */
.cover_wrap {
width: 100%;
position: relative;
background-color: #E9E9E9;
height: calc(100vh);
min-height: 600px;
max-height: 1000px;
}
.enter-img {
position: relative !important;
top: 0;
left: 0;
width: 100%;
height: calc(100vh);
min-height: 600px;
max-height: 1000px;
z-index: 0 !important;
overflow: hidden;
}
.enter-img .inner {
background-position: center bottom;
background-size: cover;
width: 100%;
height: calc(100vh);
min-height: 600px;
max-height: 1000px;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.bg-overlay {
z-index: 2;
position: absolute;
width: 100%;
height: calc(100vh - 80px);
-webkit-transition: transform .6s ease, opacity .6s ease;
-webkit-transition: opacity .6s ease, -webkit-transform .6s ease;
transition: opacity .6s ease, -webkit-transform .6s ease;
transition: transform .6s ease, opacity .6s ease;
transition: transform .6s ease, opacity .6s ease, -webkit-transform .6s ease;
}
.enter-img .inner p {
margin: 0 auto;
display: block;
width: 100%;
text-align: left;
margin-bottom: 102px;
padding-left: 120px;
font-size: 1.2rem;
}
.cover {
text-align: left;
clear: both;
margin-top: 0;
margin-right: auto;
margin-left: auto;
padding: 0;
position: absolute;
top: 0;
overflow: hidden;
z-index: 5001;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
/* -webkit-box-align: center; */
-ms-flex-align: center;
-ms-grid-row-align: center;
-webkit-box-align: center;
align-items: center;
width: 100%;
height: calc(100vh - 135px);
min-height: 465px;
max-height: 865px;
padding-top: 120px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.cover__valign {
width: 100%;
}
.kv_center {
display: block;
max-width: 1380px;
width: 80%;
margin: 0 auto 0;
text-align: left;
}
.kv_center #catch01 {
display: inline-block;
margin-bottom: 15px;
width: 60%;
}
.kv_center #catch02 {
font-size: 2.6rem;
color: #374252;
line-height: 1;
text-align: left;
margin-bottom: 40px;
margin-top: 0px;
font-weight: 600;
}
.kv_center ul li a {
color: #fff;
}
.cover_foot {
position: absolute;
bottom: 0;
width: 100%;
}
.cover__arrow:hover {
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}
a.cover__arrow {
position: absolute;
bottom: 20px;
right: 0px;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
text-decoration: none;
z-index: 5002;
padding-bottom: 40px;
font-size: 13px;
color: #fff;
}
a.cover__arrow i {
transform: rotateZ( 90deg);
-webkit-transform: rotateZ( 90deg);
font-style: normal;
display: inline-block;
letter-spacing: 1px;
height: auto;
}
@media only screen and (min-height: 1080px) {}
@media only screen and (max-width: 1000px) {
.enter-img .inner {}
.kv_center #catch01 {
width: 70%;
}
}
@media only screen and (max-width: 576px) {
.cover_wrap {
height: 100%;
min-height: inherit;
max-height: inherit;
}
.enter-img {
position: relative !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: inherit;
max-height: 400px;
z-index: 0 !important;
overflow: hidden;
}
.cover {
max-height: inherit;
min-height: 400px;
padding-top: 70px;
height: auto;
}
.enter-img .inner {
background-position: 30% center;
height: 100%;
min-height: inherit;
max-height: 400px;
}
.kv_center {
width: auto;
padding: 0 20px;
}
.kv_center #catch01 {
width: 90%;
margin-bottom: 10px;
}
.kv_center #catch02 {
font-size: 1.4rem;
margin-bottom: 20px;
}
.kv_center ul li:last-child {
display: none;
}
.comp__promotion {
bottom: 10px;
left: 3rem;
padding-right: 60px;
}
.comp__promotion p span {
font-size: 1.1rem;
line-height: 1.5;
letter-spacing: 0;
}
a.cover__arrow {
right: -10px;
padding-bottom: 30px;
font-size: 10px;
}
.enter-img .inner p {
margin: 0 auto;
display: block;
width: 100%;
text-align: left;
margin-bottom: 25px;
padding-left: 100px;
font-size: 1.0rem;
}
}
/*
comp--topics  [
----------------------------------------------------------- */
.comp--topics {
background-color: #fff;
padding: 0 3rem;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.p-dl_news {
height: 80px;
color: #102129;
}
.p-dl_news dt {
float: left;
width: 80px;
height: 80px;
line-height: 80px;
color: #374252;
font-size: 1.4rem;
text-align: left;
position: relative;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
}
.p-dl_news dd {
line-height: 50px;
margin-left: 80px;
font-size: 1.4rem;
}
.p-dl_news dd a {}
.ticker {
line-height: 80px;
width: 100%;
text-align: left;
position: relative;
overflow: hidden;
}
.ticker ul {
width: 100%;
position: relative;
line-height: 50px;
}
.ticker ul li {
width: 99%;
line-height: 80px;
color: #2C334D;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis; /* Safari */
-o-text-overflow: ellipsis; /* Opera */
white-space: nowrap;
overflow: hidden;
display: none;
}
@media only screen and (max-width: 576px) {
.cover_foot {
background-color: #fff;
position: relative;
}
.comp--topics {
padding: 0;
}
.p-dl_news {
height: auto;
padding-bottom: 0;
}
.p-dl_news dt {
float: none;
width: 100%;
height: auto;
line-height: 2.0;
padding-top: 20px;
}
.p-dl_news dd {
line-height: 1.6;
margin-left: 0;
color: #fff;
font-size: 1.2rem;
}
.ticker {
line-height: 1.8;
width: 100%;
text-align: left;
position: relative;
}
.ticker ul {
width: 100%;
position: relative;
line-height: 1.8;
}
.ticker ul li {
width: 100%;
line-height: 1.8;
text-overflow: initial;
-webkit-text-overflow: initial;
-o-text-overflow: initial;
white-space: initial;
overflow: auto;
}
.slide-control {
position: absolute;
top: -25px;
margin: 0 auto 0;
display: block;
width: auto;
text-align: left;
padding: 0;
z-index: 50;
}
}
/*
mainly [
----------------------------------------------------------- */
.mainlytile_container a {
display: block;
position: relative;
height: 100%;
	    display: flex;
    flex-direction: column;
}
.mainlytile_container.products a:hover {
background-color: #e8eef3;
}
.mainlytile_container.skytop a:hover {
background-color: #e8eef3;
}
.mainlytile_container a .txt {
padding: 40px 30px;
	flex-grow: 1;
}
.mainlytile_container figure {
position: relative;
overflow: hidden;
background: rgb(0, 0, 0, 0.10);
}
.mainlytile_container a figure img {
position: relative;
overflow: hidden;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1.02);
transform: scale(1.02);
z-index: 99;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
width: 100%;
height: 220px;
-o-object-fit: cover;
object-fit: cover;
font-family: 'object-fit: cover;'
}
.mainlytile_container .row > div:nth-child(2) a .txt, .mainlytile_container .row > div:nth-child(5) a .txt, .mainlytile_container .row > div:nth-child(8) a .txt, .mainlytile_container .row > div:nth-child(11) a .txt, .mainlytile_container .row > div:nth-child(14) a .txt, .mainlytile_container .row > div:nth-child(17) a .txt {
margin: 0 -1px;
}
.mainlytile_container a .txt span {
font-size: 1.4rem;
font-weight: 400;
display: inline-block;
font-style: italic;
color: #00AC81;
line-height: 1.4;
margin-bottom: 8px;
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, Arial, sans-serif;
}
.mainlytile_container a .txt h3 {
font-size: 2.2rem;
font-weight: 700;
line-height: 1.6;
margin-bottom: 8px;
color: #374252;
}
.mainlytile_container a .txt p {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8;
margin-bottom: 0;
color: #374252;
}
.mainlytile_container a:hover figure img {
-webkit-animation-name: fadeInbnr;
animation-name: fadeInbnr;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 2s ease-in-out;
transition: -webkit-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
transition: transform 2s ease-in-out, -webkit-transform 2s ease-in-out;
}
.mainlytile_container .row > div {
z-index: 3;
}
.mainlytile_container .row > div:hover {
z-index: 5;
-webkit-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
box-shadow: 0 0 20px rgba(12, 0, 0, .25);
-webkit-box-shadow: 0 0 20px rgba(12, 0, 0, .25);
-moz-box-shadow: 0 0 20px rgba(12, 0, 0, .25);
}
.mainlytile_container a:hover .txt {
background-color: #e8eef3;
}
.mainlytile_container.skytop a:hover .txt {
background-color: transparent;
}
.mainlytile_container.products a:hover .txt {
background-color: transparent;
}
/*.mainlytile_container a:hover .txt * {
color: #fff;
}*/
.mainlytile_container a:hover .label.normal {
/*border: 1px solid #fff;*/
}
.mainlytile_container.products a .txt h3 {
font-size: 1.8rem;
}
.mainlytile_container.products a .txt p {
font-weight: 400;
}
.mainlytile_container.products a .txt p + ul {
padding-top: 15px;
}
.mainlytile_container.products a .txt ul li.label + li.label {
margin-left: 4px;
}
.mainlytile_container.skytop a .txt {
padding: 20px;
}
.mainlytile_container.skytop .row > div {
margin-bottom: 0;
}
.mainlytile_container.skytop a figure img {
height: 160px;
}
.mainlytile_container.skytop a .txt h3 {
font-size: 1.6rem;
}
.mainlytile_container.skytop a .txt p {
font-size: 1.2rem;
font-weight: 400;
color: #707070;
}
/*.mainlytile_container.skytop a:hover .txt p {
color: #fff;
}*/
.entry__permalink {
position: absolute;
bottom: 30px;
left: 30px;
overflow: hidden;
}
.entry__permalink li {
font-size: 1.2rem;
font-weight: 400;
margin-right: 10px;
display: none;
}
.entry__permalink li:nth-child(1), .entry__permalink li:nth-child(2) {
display: inline-block;
}
.entry__permalink li a {
color: #006149;
}
.entry__permalink li a:hover {
-webkit-box-shadow: none;
box-shadow: none;
text-decoration: underline;
}
.mainlytile_container.news a .txt {
padding: 30px 30px 60px;
	    
}
.mainlytile_container.news .row > div {
margin-bottom: 0;
}
.mainlytile_container.news a figure img {
height: 240px;
}
.mainlytile_container.news a .txt h3 {
font-size: 1.8rem;
}
.mainlytile_container.news a .txt ul.row {
margin-bottom: 10px;
}
.mainlytile_container.news a .txt ul li {
font-size: 1.2rem;
font-weight: 500;
display: inline-block;
margin-right: 10px;
}
.mainlytile_container.news a .txt ul li span {
font-size: 1.2rem;
font-weight: 500;
font-style: normal;
padding: 6px;
margin: 0;
line-height: 1;
}
.mainlytile_container.news a .txt ul li.time {
color: #707070;
line-height: 1;
font-size: 1.3rem;
font-weight: 400;
}
.mainlytile_container.news a:hover .txt ul li {
/*color: #fff;*/
}
.mainlytile_container.news.related-section .row > div:nth-of-type(4) {
display: none;
}
@media only screen and (max-width: 991px) {
.mainlytile_container.news.related-section .row > div:nth-of-type(4) {
display: block;
}
.mainlytile_container.news a figure img {
height: 180px;
}
.mainlytile_container.news a .txt {
padding: 20px 20px 60px;
}
.mainlytile_container.news a .txt h3 {
font-size: 1.6rem;
}
.entry__permalink {
left: 20px;
}
}
@media only screen and (max-width: 576px) {
.mainlytile_container a .txt h3 {
font-size: 1.6rem;
}
.mainlytile_container a .txt span {
font-size: 1.1rem;
}
.mainlytile_container a figure img {
height: 140px;
}
.mainlytile_container a .txt {
padding: 20px 15px;
}
.mainlytile_container.products a .txt h3 {
font-size: 1.6rem;
}
.mainlytile_container a .txt p {
font-size: 1.2rem;
line-height: 1.6;
}
.mainlytile_container.news a .txt {
padding: 20px 10px 60px;
}
.mainlytile_container.news a .txt h3 {
font-size: 1.6rem;
}
.entry__permalink {
bottom: 20px;
left: 10px;
}
.mainlytile_container.news a figure img {
height: 140px;
}
.mainlytile_container.skytop a .txt {
padding: 20px 15px;
}
.mainlytile_container.skytop a .txt h3 {
font-size: 1.4rem;
}
}
/*
comp_title [
----------------------------------------------------------- */
.comp_title {
padding-right: 40px;
margin-right: 40px;
position: relative;
}
.comp_title h2 {
line-height: 1 !important;
margin-bottom: 20px !important;
letter-spacing: 0.5rem;
}
.comp_title p {
line-height: 1 !important;
margin-bottom: 0 !important;
}
.comp_title:after {
content: "";
width: 1px;
height: 100%;
background-color: #ccc;
position: absolute;
right: 0;
top: 0;
display: block;
}
@media only screen and (max-width: 991px) {
.comp_title + p.mb0 {
padding: 20px 0 0 15px;
line-height: 1.4;
}
.comp_title:after {
display: none;
}
}
@media only screen and (max-width: 576px) {
.comp_title h2 {
margin-bottom: 10px !important;
letter-spacing: 0.2rem;
}
.comp_title {
padding-right: 0;
margin-right: 0;
position: relative;
}
}
/*
tab [
----------------------------------------------------------- */
.tab {
	position: relative;
	margin: 0 0 40px;
	border-bottom: 1px solid #BFBFBF;
}
.tab li {
	display: inline-block;
	padding-right: 50px;
	font-size: 1.8rem;
	color: #374252;
	line-height: 1;
}
.tab li a {
	font-weight: 500;
	color: #374252;
	position: relative;
	display: block;
	padding-bottom: 25px;
}
.tab li a:hover {
	color: #00AC80;
}
.tab li a.active {
	color: #00AC80;
	font-weight: 700;
}
.tab li a.active:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -1px;
	height: 2px;
	width: 100%;
	background-color: #00AC80;
}
.tab li a.active:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -5px;
	left: 50%;
	margin-left: -5px;
	width: 10px;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #00AC80;
}
.tab li:last-child {
	padding-right: 0;
}
.tab span {
	font-size: 1.6rem;
}
#tab2 {
	padding-top: 140px;
	margin-top: -140px;
}
@media only screen and (max-width: 576px) {
	.tab li {
		padding-right: 20px;
		font-size: 1.4rem;
	}
}

@media only screen and (max-width: 340px) {
	.tab li {
		padding-right: 18px;
		font-size: 1.2rem;
	}
}
/*
tab [
----------------------------------------------------------- */
.tab2 {
	position: relative;
	margin: 0 0 40px;
	border-bottom: 1px solid #BFBFBF;
}
.tab2 li {
	display: inline-block;
	padding-right: 50px;
	font-size: 1.8rem;
	color: #374252;
	line-height: 1;
}
.tab2 li a {
	font-weight: 500;
	color: #374252;
	position: relative;
	display: block;
	padding-bottom: 25px;
}
.tab2 li a:hover {
	color: #00AC80;
}
.tab2 li a.active {
	color: #00AC80;
	font-weight: 700;
}
.tab2 li a.active:before {
	content: "";
	display: block;
	position: absolute;
	bottom: -1px;
	height: 2px;
	width: 100%;
	background-color: #00AC80;
}
.tab2 li a.active:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -5px;
	left: 50%;
	margin-left: -5px;
	width: 10px;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #00AC80;
}
.tab2 li:last-child {
	padding-right: 0;
}
.tab2 span {
	font-size: 1.6rem;
}
#tab2 {
	padding-top: 140px;
	margin-top: -140px;
}
@media only screen and (max-width: 576px) {
	.tab2 li {
		padding-right: 20px;
		font-size: 1.4rem;
	}
}

@media only screen and (max-width: 340px) {
	.tab2 li {
		padding-right: 18px;
		font-size: 1.2rem;
	}
}
/*
comp__category [
----------------------------------------------------------- */
.comp__category {
margin-right: -10px;
margin-left: -10px;
}
.comp__category a {
padding: 12px;
background-color: #fff;
	flex-grow: 1;
}
.comp__category a .txt {
font-size: 1.4rem;
color: #707070;
font-weight: 500;
}
.comp__category a figure {
padding-right: 10px;
text-align: center;
}
.comp__category_list {
margin-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
	    display: flex;
    flex-direction: column;
}
.comp__category a:hover {
padding: 12px;
/*    background-color: #00AC80;*/
background-color: #374252;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .3);
box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}
.comp__category a:hover img {
opacity: 1;
}
.comp__category a:hover .txt {
color: #fff;
}
.comp_category_title p {
color: #6b6b6b;
font-size: 1.8rem;
margin-bottom: 4px;
font-weight: 500;
}
.comp_category_title h1 {
font-size: 3.4rem;
font-weight: 700;
line-height: 1.2;
}
.comp_category_title h1 + p {
padding-top: 10px;
font-weight: 400;
}
.comp_category_title + .comp_category_description {
padding-top: 25px;
}
.comp_category_description + .js-toggle {
margin-top: 30px;
}
.comp_category_description i {
padding-right: 15px !important;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.comp_category_description i img {
max-width: 90px;
max-height: 70px;
}
.comp_category_description h2 {
font-size: 1.6rem;
line-height: 1.6;
-webkit-box-flex: 10;
-ms-flex-positive: 10;
flex-grow: 10;
}
.comp_category_description h2 img {
padding-top: 10px;
}
.comp_category_description h3 {
font-size: 1.6rem;
line-height: 1.6;
}
@media only screen and (max-width: 576px) {
.comp_category_title h1 {
font-size: 2.2rem;
}
.comp_category_description h2 {
font-size: 1.4rem;
}
.comp__category a .txt {
font-size: 1.2rem;
}
.comp__category_list {
margin-bottom: 10px;
padding-right: 5px;
padding-left: 5px;
}
}
/*
grid [
----------------------------------------------------------- */
#grid {
font-size: 0.1px;
}
.mix, .gap {
display: inline-block;
vertical-align: top;
}
.filter__nav {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 4rem;
}
.filter__nav fieldset {}
.filter__nav_category {}
.filter__nav_spec {}
.filter__nav_spec ul {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.filter__nav_spec ul li {
height: 50px;
padding: 0 15px;
background-color: #EEF1F2;
border: 1px solid #ccc;
border-left: none;
line-height: 46px;
}
.filter__nav_spec ul li:first-child {
border: 1px solid #ccc;
}
/* Custom dropdown */
.custom-dropdown {
position: relative;
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
.custom-dropdown select {
background-color: #1abc9c;
color: #fff;
font-size: 1.5rem;
padding: 0 10px;
padding-right: 2.5em;
border: 0;
margin: 0;
text-overflow: '';
-webkit-appearance: button;
height: 50px;
line-height: 50px;
font-weight: 500;
width: 130%;
}
.custom-dropdown::before, .custom-dropdown::after {
content: "";
position: absolute;
pointer-events: none;
}
.custom-dropdown::after {
position: absolute;
top: 50%;
margin-top: -6px;
right: 15px;
margin-left: -4px;
content: "";
vertical-align: middle;
}
.custom-dropdown::after {
width: 9px;
height: 9px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: 0.3s all;
transition: 0.3s all;
}
.custom-dropdown::before { /*  Custom dropdown arrow cover */
width: 2em;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}
.custom-dropdown select[disabled] {
color: rgba(0, 0, 0, .3);
}
.custom-dropdown select[disabled]::after {
color: rgba(0, 0, 0, .1);
}
.custom-dropdown::before {}
.custom-dropdown::after {
color: rgba(0, 0, 0, .4);
}
.select-hidden {
display: none;
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #fff;
width: 220px;
height: 40px;
}
.select-styled {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #c0392b;
padding: 8px 15px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.select-styled:after {
content: "";
width: 0;
height: 0;
border: 7px solid transparent;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 16px;
right: 10px;
}
.select-styled:hover {
background-color: #b83729;
}
.select-styled:active, .select-styled.active {
background-color: #ab3326;
}
.select-styled:active:after, .select-styled.active:after {
top: 9px;
border-color: transparent transparent #fff transparent;
}
.select-options {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0;
padding: 0;
list-style: none;
background-color: #ab3326;
}
.select-options li {
margin: 0;
padding: 12px 0;
text-indent: 15px;
border-top: 1px solid #962d22;
-webkit-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
}
.select-options li:hover {
color: #c0392b;
background: #fff;
}
.select-options li[rel="hide"] {
display: none;
}
@media only screen and (max-width: 576px) {
.custom-dropdown select {
font-size: 1.6rem;
width: 100%;
}
.filter__nav fieldset {
width: 100%;
}
.custom-dropdown {
width: 100%;
}
.filter__nav_spec li {
width: 50%;
}
}
/*
CATALOG
----------------------------------------------------------- */
.download figure {
margin-bottom: 15px;
}
.download a {
color: #707070
}
.download p.pdf {
padding-left: 24px;
position: relative;
line-height: 1.6;
}
.download p.pdf:before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 19px;
margin-top: 3px;
margin-left: 0 !important;
margin-right: 8px;
vertical-align: sub;
background-position: 0px 0;
    background-image: url(/asset/images/common/ico_pdf.png);
background-size: 18px 19px;
}
.download .row > div {
margin-bottom: 40px;
}
/*
label [ common tag
----------------------------------------------------------- */
.tile_container {
border-top: 1px solid #ccc;
}
a.comp__tile_item {
width: 100%;
height: 250px;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
-ms-grid-row-align: center;
-webkit-box-align: center;
align-items: center;
overflow: hidden;
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
a.comp__tile_item:hover {
/*background-color: #28b8b4 !important;*/
background-color: #bdced6 !important;
}
/*a.comp__tile_item:hover * {
color: #fff !important;
}*/
a.comp__tile_item.last {}
a.comp__tile_item:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
display: block;
background-color: #464646 !important;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
a.comp__tile_item:hover:after {
background-color: #B19B61 !important;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
.comp__tile_item > div {
width: 100%;
display: block;
margin: 0 auto;
padding: 0 30px;
}
.comp__tile_item span {
text-align: center;
z-index: 2;
display: block;
margin-bottom: 30px;
}
.comp__tile_item i {
text-align: center;
display: block;
z-index: 2;
margin-bottom: 20px;
}
.comp__tile_item:hover i img {
opacity: 1;
}
.comp__tile_item i img {
height: 38px;
}
.comp__tile_item dl {
text-align: center;
width: 100%;
display: block;
margin: 0;
z-index: 2;
font-size: 2.0rem;
color: #374252;
}
.comp__tile_item dt {
font-size: 1.6rem;
font-weight: 500;
color: #374252;
}
.comp__tile_item h2 {
z-index: 2;
font-size: 2rem;
color: #374252;
font-weight: 700;
margin-bottom: 15px;
}
.comp__tile_item p {
font-size: 1.6rem;
font-weight: 400;
color: #374252;
margin: 0 5%;
line-height: 1.6;
}
@media only screen and (max-width: 991px) {
.comp__tile_item h2 {
font-size: 1.6rem;
}
.comp__tile_item p {
font-size: 1.3rem;
}
}
@media only screen and (max-width: 768px) {

.tile_container .col-sm-6:nth-child(7) a.comp__tile_item {
background-color: #EEF1F2 !important;
}
.tile_container .col-sm-6:nth-child(8) a.comp__tile_item {
background-color: #EEF1F2 !important;
}
}
@media only screen and (max-width: 576px) {
a.comp__tile_item {
height: auto;
padding: 30px 0;
background-color: #fff;
}
.comp__tile_item span {
margin-bottom: 15px;
}
.comp__tile_item i {
margin-bottom: 10px;
}
.comp__tile_item i img {
height: 30px;
}
.comp__tile_item dl {
font-size: 1.4rem;
}
.comp__tile_item dt {
font-size: 1.4rem;
}
.comp__tile_item.bg_gr {
background-color: transparent !important;
}
.tile_container .col-sm-6:nth-child(7) a.comp__tile_item {
background-color: #fff !important;
}
.tile_container .col-sm-6:nth-child(even) a.comp__tile_item {
background-color: #EEF1F2 !important;
}
.tile_container .col-sm-6:nth-child(7) a.comp__tile_item:hover {
background-color: #bdced6 !important;
}
.tile_container .col-sm-6:nth-child(even) a.comp__tile_item:hover {
background-color: #bdced6 !important;
}
}
/*
label [ common tag
----------------------------------------------------------- */
.label, .tag {
border: 1px solid transparent;
font-size: 1.3rem;
}
.label {
display: inline-block;
padding: 0.7rem;
border-radius: 0;
font-size: 1.1rem;
line-height: 1;
white-space: nowrap;
background: transparent;
color: #00AD82;
font-weight: 400;
vertical-align: text-bottom;
}
.label.large {
font-size: 16px;
padding: 0.6rem 1.0rem;
}
.meta-group .label.large {
font-size: 15px;
padding: 0.6rem;
vertical-align: super;
}
.label.disable {
background-color: #ccc !important;
color: #565656;
border: 1px solid #ccc;
}
.label.normal {
border: 1px solid #00AD82;
}
.label.category {
background-color: #2E344F !important;
border: 1px solid #2E344F;
color: #fff;
}
.label.black {
background-color: #374252 !important;
color: #fff;
border: 1px solid #374252;
}

figure .label.category {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 100;
}
figure .labelbox {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 100;
}
figure .labelbox .label.category{
position:static;
 margin-right:5px;
}

@media only screen and (max-width: 576px) {
.label {
font-size: 0.9rem;
}
}
/*
icon [ common tag
----------------------------------------------------------- */
.comp__icon li {
display: inline-block;
margin-right: 8px;
margin-bottom: 8px;
}
.comp__icon li img {
max-width: 30px;
max-height: 30px;
}
/*
js-toggle [ common tag
----------------------------------------------------------- */
dl.js-toggle.normal.on {
-webkit-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .16);
box-shadow: 0 0 20px rgba(0, 0, 0, .16);
}
dl.js-toggle.normal > dt {
position: relative;
padding: 15px 65px 15px 15px;
cursor: pointer;
-webkit-transition: 0.7s all;
transition: 0.7s all;
line-height: 1.5;
font-size: 1.6rem;
font-weight: 500;
border: 1px solid #ccc;
margin-top: -1px;
}
dl.js-toggle.normal > dt span {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
background-color: #EEF1F2;
}
dl.js-toggle.normal > dt span::before {
position: absolute;
top: 50%;
margin-top: -6px;
left: 50%;
margin-left: -4px;
content: "";
vertical-align: middle;
}
dl.js-toggle.normal > dt span::before {
width: 9px;
height: 9px;
border-top: 2px solid #707070;
border-right: 2px solid #707070;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: 0.3s all;
transition: 0.3s all;
}
dl.js-toggle.normal > dt.is-active {
border-color: #555E6C;
background-color: #555E6C;
color: #fff;
}
dl.js-toggle.normal > dt.is-active span {
background-color: #374252;
}
dl.js-toggle.normal > dt.is-active span::before {
border-color: #fff;
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
margin-top: -2px;
}
dl.js-toggle.normal > dt:hover span::before {
border-color: #01ABA7;
}
dl.js-toggle.normal > dd {
position: relative;
display: none;
padding: 30px;
background-color: #F9F9F9;
border: 1px solid #CCCCCC;
}
dl.js-toggle.normal > dd p {
margin-bottom: 0px;
}
dl.js-toggle.normal > dd p + p {
padding-top: 20px;
}
dl.js-toggle.normal > dd .col12 + .col12 {
padding-top: 20px;
}
@media only screen and (max-width: 576px) {
dl.js-toggle.normal > dt {
font-size: 1.4rem;
}
dl.js-toggle.normal > dd {
padding: 15px;
font-size: 1.3rem;
}
}
.comp__nav_news {
margin-bottom: 50px;
border-bottom: 1px solid #BFBFBF;
}
.comp__nav_news li {
display: inline-block;
padding-right: 40px;
	font-size: 1.4rem;
}
.comp__nav_news li:last-child {
padding-right: 0;
}
.comp__nav_news li a {
color: #374252;
font-weight: 700;
padding-bottom: 15px;
display: block;
}
.comp__nav_news li a:hover {
color: #00AC81;
font-weight: 700;
}
.comp__nav_news li a.active {
color: #00AC81;
}
.comp__nav_news li a.active:before {
content: "";
display: block;
position: absolute;
bottom: -1px;
height: 2px;
width: 100%;
background-color: #00AC80;
z-index: 10;
}
.comp__nav_news li a.active:after {
content: "";
display: block;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #00AC80;
z-index: 10;
}
.comp__nav_news li:not(:first-child) a.current {
color: #00AC81;
}
.comp__nav_news li:not(:first-child) a.current:before {
content: "";
display: block;
position: absolute;
bottom: -1px;
height: 2px;
width: 100%;
background-color: #00AC80;
}
.comp__nav_news li:not(:first-child) a.current:after {
content: "";
display: block;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
width: 10px;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #00AC80;
}
.comp__nav_news li:last-child {
padding-right: 0;
}
@media only screen and (max-width: 768px) {
.comp__nav_news_wrap {
background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.2))) 0 0/20px 100%, -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.2))) right/20px 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: #fff;
white-space: nowrap;
margin: 0 -15px 30px;
border-top: 1px solid #ccc;
position: relative;
}
.comp__nav_news {
margin-bottom: 0;
background: linear-gradient(to left, hsla(0, 0%, 100%, 0), white 15px) 0 0 / 50px 100%, linear-gradient(to right, hsla(0, 0%, 100%, 0), white 15px) right / 50px 100%;
background-repeat: no-repeat;
background-attachment: local;
padding: 10px 15px 10px;
overflow-x: scroll;
position: relative;
}
.comp__nav_news_wrap:before {
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #ccc;
position: absolute;
bottom: 10px;
z-index: 1;
left: 0;
}
.comp__nav_news_wrap:after {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #fff;
position: absolute;
bottom: 0;
z-index: 0;
}
.comp__nav_news li {
display: inline-block;
padding-right: 20px;
font-size: 1.2rem;
}
}
/*
pager [ common tag
----------------------------------------------------------- */
.area-pager {
position: relative;
padding: 30px 20px;
overflow: hidden;
}
.mod-pager {
position: relative;
left: 50%;
float: left;
}
.mod-pager li {
position: relative;
left: -50%;
float: left;
margin: 0 5px;
}
.mod-pager li.prev {
margin-right: 20px;
}
.mod-pager li.next {
margin-left: 20px;
}
.mod-pager li a, .mod-pager li em, .mod-pager li span {
display: block;
width: 50px;
height: 50px;
padding-top: 17px;
border-radius: 50%;
color: #01ABA7;
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 1;
}
.mod-pager li a:hover {
color: #00ac80;
}
.mod-pager li em {
background: #01ABA7;
font-style: normal;
color: #fff;
}
.mod-pager li.prev a, .mod-pager li.next a, .mod-pager li.disabled span {
width: 70px;
padding: 16px;
background: #01ABA7;
border: 1px solid #fff;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
border-radius: 0;
color: #fff;
}
.mod-pager li.prev a:hover, .mod-pager li.next a:hover {
background: #00ac80;
}
.mod-pager li.disabled span {
background: #ccc;
}
@media screen and (max-width: 767px) {
.mod-pager {
position: static;
float: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mod-pager li {
position: static;
float: none;
display: none;
margin: 0;
}
.mod-pager li.active {
display: block;
}
.mod-pager li.prev {
display: block;
margin-right: auto;
}
.mod-pager li.next {
display: block;
margin-left: auto;
}
}
/*
form [
----------------------------------------------------------- */
/*
form [
----------------------------------------------------------- */
.attention {
margin: 0 0 6px;
display: block;
color: #F15253;
font-size: 14px;
padding: 6px 0 0;
font-weight: 700;
}
.ico-req {
color: #F15253;
font-weight: bold;
font-size: 20px;
border-bottom: none;
}
.attention_box {
border: 2px solid #F15253;
font-size: 14px !important;
line-height: 2;
padding: 30px;
background-color: #FDF0F0;
color: #F15253;
margin-bottom: 20px;
font-weight: bold;
}
.attention_box h3 {
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
.attention {
margin: 0 0 15px;
display: block;
color: #F15253;
font-size: 14px;
}
abbr.ico-req {
color: #F15253;
font-weight: normal;
font-size: 160%;
border-bottom: none !important;
}
select {
padding: 0 0 0 10px;
height: 36px;
line-height: 36px;
font-size: 14px;
outline: 0;
border: 1px solid #ccc;
}
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="button"], input[type="submit"] {
padding: 0 10px;
height: 50px;
line-height: 50px;
font-size: 15px;
outline: 0;
border-radius: 3px;
border: 1px solid #ccc;
vertical-align: middle;
}
input[type="submit"] {
background-color: #1abc9c;
color: #fff;
padding: 0 30px;
border: 1px solid transparent;
min-width: 200px;
}
input[type="submit"]:hover {
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
input[type="submit"].btn_sub01 {
background-color: #e62739;
color: #fff;
border: 1px solid #e62739;
}
input[type="submit"].btn_sub02 {
background-color: #e62739;
color: #fff;
border: 1px solid #e62739;
}
input[type="button"] {
background-color: #B19B61;
color: #fff;
padding: 0 30px;
border: 1px solid transparent;
min-width: 160px;
}
input[type="button"]:hover {
filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
input[type="button"].btn_save {
background-color: #9fa0a0;
color: #fff;
}
input[type="button"].btn_delete {
background-color: #222;
color: #fff;
}
input[type="radio"], input[type="checkbox"] {
display: inline-block;
margin-right: 6px;
}
input[type="radio"] + label, input[type="checkbox"] + label {
position: relative;
display: inline-block;
    margin-right: 0;
    font-size: 1.2rem;
line-height: 1.6;
cursor: pointer;
}
input[type="text"]:focus, input[type="tel"]:focus, textarea:focus {
background-color: #FFFBC7;
border: 1px solid #ccc;
}
@media (min-width: 1px) {
input[type="radio"], input[type="checkbox"] {
display: none;
margin: 0;
}
input[type="radio"] + label, input[type="checkbox"] + label {
padding: 0 0 0 24px;
}
input[type="radio"] + label::before {
content: "";
position: absolute;
top: 12px;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 18px;
height: 18px;
margin-top: -9px;
background: #FFF;
}
input[type="checkbox"] + label::before {
content: "";
position: absolute;
top: 10px;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 18px;
height: 18px;
margin-top: -9px;
background: #FFF;
}
input[type="radio"] + label::before {
border: 1px solid #ABABAB;
border-radius: 30px;
}
input[type="checkbox"] + label::before {
border: 1px solid #ABABAB;
background-color: transparent;
}
input[type="radio"]:checked + label::before {
border: 1px solid #000;
}
input[type="checkbox"]:checked + label::before {
border: 1px solid #1abc9c;
background-color: #1abc9c;
}
input[type="radio"]:checked + label::after, input[type="checkbox"]:checked + label::after {
content: "";
position: absolute;
top: 12px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
}
input[type="radio"]:checked + label::after {
left: 5px;
width: 8px;
height: 8px;
margin-top: -4px;
background: #1abc9c;
border-radius: 8px;
}
input[type="checkbox"]:checked + label::after {
left: 3px;
width: 16px;
height: 8px;
margin-top: -10px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="radio"].static + label::before {
border: 1px solid #ABABAB;
}
input[type="radio"].static:checked + label::before {
border: 1px solid #ABABAB;
}
input[type="radio"].static:checked + label::after {
background: #ABABAB;
}
}
textarea {
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 20px;
font-size: 14px;
width: 100%;
}
input::-webkit-input-placeholder {
color: #999;
}
input:-moz-placeholder {
color: #999;
}
input::-moz-placeholder {
color: #999;
}
input:-ms-input-placeholder {
color: #999;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
input:focus:-ms-input-placeholder {
color: transparent;
}
/* ===================================

8: product detail

====================================== */
/*
comp__product_kv  [
----------------------------------------------------------- */
.comp__product_kv {
overflow: hidden;
margin-bottom: 10px;
margin-top: 20px;
background-color: #EEF1F2;
}
.comp__product_kv .swiper-container img {
width: 100%;
}
.comp__product_kv .comp_category_title {
padding-left: 40px;
}
.comp__product_kv .comp_category_title .label + .label {
margin-left: 4px;
}
.comp__product_kv .comp_category_title .label.category:first-child {
display: none;
}
.comp__product_item .col-item {
margin-bottom: 40px;
	    display: flex;
    flex-direction: column;
}
.comp__product_item .col-item h3 {
font-size: 2.0rem;
font-weight: 700;
margin-bottom: 20px;
border-top: 1px solid #AAAAAA;
padding-top: 20px;
position: relative;
}
.comp__product_item .col-item h3:before {
content: "";
background-color: #374252;
width: 16px;
height: 4px;
display: inline-block;
position: relative;
left: 0;
vertical-align: super;
margin-right: 10px;
}
.comp__product_item .col-item.col-sm-12 .txt {
font-size: 1.6rem;
background-color: transparent;
padding: 0;
}
.comp__product_item .col-item .txt {
font-size: 1.6rem;
background-color: #EEF1F2;
padding: 25px;
	    flex-grow: 1;
}
.comp__product_item .col-item .txt h2 {
font-size: 3.0rem !important;
line-height: 1.4 !important;
font-weight: 500;
}
.comp__product_item .col-item .txt p {
margin-bottom: 0;
}
.comp__product_item .col-item .txt p + p {
padding-top: 15px;
}
.postid-614 .breadcrumbs_category {
display: none;
}
.postid-614 .comp__related {
display: none;
}
.postid-614 .comp_category_title p {
display: none;
}
.postid-614 .comp_category_title h1.mb15 {
margin-bottom: 0 !important;
}
.comp__teflon {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
-webkit-box-align: center;
align-items: center;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
padding-top: 15px;
}
.comp__teflon span.icon-teflon img {
max-width: 70px;
}
.comp__teflon span.txt {
font-size: 1.3rem;
padding-left: 10px;
color: #555E6C;
}
@media only screen and (max-width: 1200px) {
.comp__product_kv > .container {
padding: 0;
max-width: inherit;
}
.comp_category_title h1 {
font-size: 3.0rem;
}
.comp__product_kv .comp_category_title {
padding-right: 30px;
}
}
@media only screen and (max-width: 768px) {
.comp__product_kv .comp_category_title {
padding: 30px 20px;
}
.comp_category_title h1 {
font-size: 2.6rem;
}
.comp_category_title p {
font-size: 1.4rem;
}
.comp__product_item .col-item h3 {
font-size: 1.8rem;
}
.comp__product_item .col-item .txt h2 {
font-size: 3.0rem !important;
line-height: 1.4 !important;
font-weight: 500;
}
.comp__product_item .col-item .txt h2 {
font-size: 2rem !important;
margin-bottom: 0;
line-height: 1.4 !important;
}
}
@media only screen and (max-width: 576px) {
.comp_category_title h1 {
font-size: 2rem;
}
}
/*
comp__dl  [ download button / common tag
----------------------------------------------------------- */
.comp__dl li {
display: inline-block;
margin-left: 6px;
}
.comp__dl li:first-child {
margin-left: 0;
}
/* ===================================

8: page common parts

====================================== */
.header_p main {
margin-bottom: 80px;
}
.page-id-204.header_p main {
margin-bottom: 0 !important;
}
.page-id-204.header_p .comp__contact {
display: none;
}
.page-id-204.header_p .comp__contact.phone {
display: block;
}
.header_p.product_details main {
margin-bottom: 0;
}
.page-id-1588.header_p main {
margin-bottom: 0 !important;
}
@media only screen and (max-width: 576px) {
.header_p main {
margin-bottom: 30px;
}
}
/*
hero_wrap  [
----------------------------------------------------------- */
.hero_wrap {
text-align: left;
clear: both;
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
display: table;
height: calc(100vh - 38vh);
min-height: 400px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
background-color: #EEF1F2;
}
/*.hero_wrap:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
display: block;
background-color: #000000 !important;
top: 0;
left: 0;
z-index: 1;
opacity: 0.54;
animation-duration: 1s;
animation-fill-mode: both;
}*/
.hero__valign {
display: table-cell;
vertical-align: middle;
text-align: left;
padding: 0 5% 0;
z-index: 4;
position: relative;
z-index: 2;
}
.hero_wrap.md {
height: 300px !important;
}
.hero__valign .kv_center {
display: block;
max-width: 1380px;
margin: 0 auto 0;
text-align: left;
width: auto;
margin-top: 120px;
}
.hero_wrap h1 {
font-size: 3.4rem;
line-height: 1.4;
font-weight: 700;
margin-bottom: 0;
color: #374252;
}
.hero_wrap p {
font-size: 1.6rem;
line-height: 1;
font-weight: 500;
margin-bottom: 15px;
font-family: 'IBM Plex Sans', sans-serif;
color: #AAAAAA;
letter-spacing: 0.2rem;
}
/*
hero_wrap breadcrumbs [
----------------------------------------------------------- */
.hero_wrap .breadcrumbs {
position: absolute;
top: 120px;
left: 5%;
z-index: 5;
}
.hero_wrap .breadcrumbs li {
color: #374252;
}
.hero_wrap .breadcrumbs li:not(:last-child)::after {
color: #374252;
}
.hero_wrap .breadcrumbs a {
color: #374252;
}
.hero_wrap .breadcrumbs .disabled {
color: #999;
cursor: not-allowed;
}
@media only screen and (max-width: 991px) {
.hero_wrap {
background-position: 20% center;
max-height: 500px;
}
}
@media only screen and (max-width: 576px) {
.hero_wrap {
height: 300px !important;
min-height: 300px;
background-position: 10% center;
}
.hero__valign .kv_center {
padding: 0 15px;
margin-top: 60px;
}
.hero_wrap .hero__valign {
padding: 0 20px;
background-color: rgba(255, 255, 255, 0.3);
}
.hero_wrap h1 {
font-size: 1.8rem;
font-weight: 700;
}
.hero_wrap h2 {
font-size: 1.2rem;
}
.hero_wrap .breadcrumbs {
top: 80px;
}
.hero_wrap p {
font-size: 1.2rem;
font-weight: 400;
margin-bottom: 15px;
letter-spacing: 0.1rem;
color: #555;
}
}
/* ===================================

9: company page

====================================== */
/*
company_blc [
----------------------------------------------------------- */
.company_blc {
margin: -120px auto 100px auto !important;
}
.normal_page .company_blc {
margin: 0 auto 100px auto !important;
}
.normal_page .colpd-wide {
margin: 0 0 0 !important;
}
.company_blc > .container {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media only screen and (max-width: 1199px) {
.company_blc .colpd-wide {
width: calc(100% - 320px);
margin: 120px 0 0;
}
.company_blc aside {
display: block;
width: 270px;
margin-left: 50px;
}
.sp_lnav aside {
display: none;
}
}
@media only screen and (max-width: 991px) {
.company_blc aside {
margin-left: 0;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #fff;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
box-shadow: 0 0 3px rgba(0, 0, 0, .1);
z-index: 500;
background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.2))) 0 0/20px 100%, -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.2))) right/20px 100%;
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.2)) right/20px 100%;
background-repeat: no-repeat;
background-attachment: scroll;
}
.sp_lnav aside {
display: block;
}
.company_blc {
margin: 0 auto 30px auto !important;
}
.company_blc .colpd-wide {
width: 100%;
margin: 60px 0 0;
}
.normal_page .colpd-wide {
margin: 60px 0 0 !important;
}
}
@media only screen and (min-width: 1200px) {
.company_blc .colpd-wide {
width: calc(100% - 380px);
float: left;
margin: 120px 0 0;
}
.company_blc aside {
display: block;
width: 330px;
margin-left: 50px;
}
.sp_lnav aside {
display: none;
}
}
.company_blc aside > div {
background-color: #555E6C;
padding: 50px 35px 35px;
}
.company_blc aside h3 {
font-size: 1.8rem;
margin-bottom: 5.0rem;
font-weight: 700;
line-height: 1;
color: #fff;
}
.company_blc aside h3 a {
color: #fff;
}
.company_blc aside li:first-child a {
border-top: 1px solid #A4AEBE;
}
.company_blc aside li a {
padding: 12px 10px;
border-bottom: 1px solid #A4AEBE;
color: #fff;
font-size: 1.4rem;
font-weight: 500;
display: block;
}
.company_blc aside li a:hover {
background-color: #28b8b4;
color: #fff;
}
.company_blc aside li a.current {
background-color: #28b8b4;
color: #fff;
}
.company_blc.normal aside {
margin-top: 200px;
}
@media only screen and (max-width: 991px) {
.company_blc > .container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.company_blc aside > div {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
overflow-x: hidden;
overflow: hidden;
width: 100%;
margin-left: 0;
max-width: inherit;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-box-pack: initial;
-ms-flex-pack: initial;
justify-content: initial;
padding: 0;
background-color: transparent;
background: linear-gradient(to left, hsla(0, 0%, 100%, 0), white 15px) 0 0 / 50px 100%, linear-gradient(to right, hsla(0, 0%, 100%, 0), white 15px) right / 50px 100%;
background-repeat: no-repeat;
background-attachment: local;
}
.company_blc aside h3 {
font-size: 1.2rem;
font-weight: 700;
line-height: 2;
padding: 12px 15px;
width: auto;
display: inline-block;
margin: 0;
background-color: #555E6C;
}
.company_blc aside li:first-child a {
border-top: none;
}
.company_blc aside li a {
padding: 12px 15px;
border-bottom: none;
font-size: 1.2rem;
font-weight: 500;
display: block;
color: #1F2438;
}
.company_blc aside .lnav {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
}
.company_blc.normal aside {
margin-top: 70px;
}
}
@media only screen and (max-width: 768px) {
.googlemap_oversea iframe {
height: 300px !important;
}
}
/*
comp__page-nav  [
----------------------------------------------------------- */
.comp__page-nav {
border-bottom: 1px solid #AAAAAA;
padding-bottom: 10px;
margin-bottom: 40px;
}
.comp__page-nav li {
display: inline-block;
padding-right: 15px;
padding-left: 15px;
border-right: 1px solid #ccc;
margin-bottom: 10px;
font-weight: 700;
}
.comp__page-nav li a {
color: #555E6C;
}
.comp__page-nav li a:hover {
color: #01aba7;
}
@media only screen and (max-width: 576px) {
.comp__page-nav {
position: relative;
border-bottom: none;
text-align: center;
margin-bottom: 10px;
overflow-x: hidden;
overflow: hidden;
width: 100%;
margin-left: 0;
max-width: inherit;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-box-pack: initial;
-ms-flex-pack: initial;
justify-content: initial;
padding-bottom: 20px;
}
.comp__page-nav:after {
content: "";
height: 1px;
width: 100%;
background-color: #ccc;
position: absolute;
bottom: 20px;
left: 0;
z-index: -1;
}
.comp__page-nav li {
font-size: 1.2rem;
padding: 0 20px 0 20px;
}
	.comp__page-nav li:first-child{
		        border-left: 1px solid #ccc;
	}
}
/*
locations page  [
----------------------------------------------------------- */
.location > div {
margin-bottom: 60px;
}
.location figure {
margin-bottom: 20px;
}
.location h3 {
margin-bottom: 6px;
font-size: 1.8rem;
font-weight: 700;
}
@media only screen and (max-width: 576px) {
.location > div {
margin-bottom: 30px;
}
.location > div p {
font-size: 1.2rem;
margin-bottom: 10px;
}
.location h3 {
font-size: 1.6rem;
}
.location > div .btn-group li {
display: block;
margin: 0;
}
.location > div .btn-group li + li {
padding-top: 10px;
}
}
@media only screen and (max-width: 768px) {
.greeting_photo {
width: 200px;
}
}
/*
media page  [
----------------------------------------------------------- */
dl.comp__media_list, .comp__media_list dt, .comp__media_list dd {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.comp__media_list dt {
width: 120px;
float: left;
font-weight: 600;
}
.comp__media_list dd {
padding-left: 120px;
padding-bottom: 15px;
}
.comp__media_list dd:after {
content: '';
display: block;
clear: both;
}
@media only screen and (max-width: 576px) {
.comp__media_list dt {
width: 100%;
float: none;
font-weight: 600;
}
.comp__media_list dd {
padding-left: 0;
padding-bottom: 15px;
}
}
/*
comp__p-info  [
----------------------------------------------------------- */
dl.comp__p-info, .comp__p-info dt, .comp__p-info dd {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
dl.comp__p-info {
margin-bottom: 20px;
}
.comp__p-info dt, .comp__p-info dd {
padding: 15px 15px 0 15px;
margin-bottom: 0;
}
.comp__p-info dt {
width: 180px;
float: left;
font-weight: 600;
}
.comp__p-info dd {
padding-left: 180px;
padding-bottom: 15px;
}
.comp__p-info dd:nth-of-type(odd) {
background-color: #EEF1F2;
}
.comp__p-info dd:after {
content: '';
display: block;
clear: both;
}
.comp__p-info p {
margin-top: 1rem;
margin-bottom: 0;
}
.comp__p-info p:first-child {
margin-top: 0;
margin-bottom: 0;
}
.bm01 {
width: 120px;
display: inline-block;
}
.bm02 {
width: 250px;
display: inline-block;
}
.bm03 {
width: 160px;
display: inline-block;
}
.comp__p-info.histry dt {
width: 80px;
float: left;
font-weight: 600;
}
.comp__p-info.histry dd {
padding-left: 80px;
padding-bottom: 15px;
}
.comp__p-info .explanation p {
margin-bottom: 1rem;
}
.comp__p-info .explanation p:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 1200px) {
.bm01 {
width: auto;
margin-right: 20px;
display: inline-block;
}
.bm02 {
width: 280px;
display: inline-block;
}
.bm03 {
width: auto;
display: block;
}
}
@media screen and (max-width: 576px) {
dl.comp__p-info {
margin-bottom: 0;
}
.comp__p-info dt {
padding: 15px 15px 0;
margin-bottom: 0;
font-size: 1.4rem;
width: 100%;
float: none;
}
.comp__p-info dt:nth-of-type(odd) {
background-color: #F2F2F2;
}
.comp__p-info dd {
padding: 0px 15px 15px;
margin-bottom: 0;
width: 100%;
float: none;
}
.comp__p-info.histry dt {
width: 100%;
float: none;
font-weight: 600;
}
.comp__p-info.histry dd {
padding-left: 15px;
padding-bottom: 15px;
}
.bm01 {
width: auto;
margin-right: 20px;
display: inline-block;
}
.bm02 {
width: auto;
display: inline-block;
}
.bm03 {
width: auto;
display: block;
}
}
.comp__product_back li:nth-child(2) {
display: none;
}
/*
comp__p-download  [
----------------------------------------------------------- */
dl.comp__p-download, .comp__p-download dt, .comp__p-download dd {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
dl.comp__p-download {
margin-bottom: 0;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-grid-row-align: center;
-webkit-box-align: center;
align-items: center;
position: relative;
border: 1px solid #ccc;
margin-top: -1px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.comp__chemical_download dl.comp__p-download:last-child {
margin-bottom: 20px;
}
.comp__p-download dt, .comp__p-download dd {
padding: 15px;
}
.comp__p-download dt {
font-weight: 600;
}
.comp__p-download dd {
text-align: right;
white-space: nowrap;
}
.comp__chemical_download .comp__p-download:nth-of-type(odd) dd:before {
background-color: #EEF1F2;
display: block;
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
@media screen and (max-width: 420px) {
dl.comp__p-download {
display: block;
}
.comp__p-download dt {
padding: 15px 15px 0;
}
.comp__p-download dd {
padding: 10px 15px 15px;
text-align: left;
}
}
/*
comp__dl-info  [
----------------------------------------------------------- */
.comp__dl-info {
background-color: #EEF1F2;
padding: 50px 40px;
margin-bottom: 30px;
}
.comp__dl-info dt {
text-align: center;
font-size: 1.8rem;
margin-bottom: 10px;
font-weight: 700;
}
.comp__dl-info dd {
text-align: left;
}
.comp__dl-info.center dd {
text-align: center;
}
.comp__dl-info span {
display: block;
text-align: center;
margin-bottom: 10px;
}
.comp__dl-info span img {
height: 38px;
}
@media screen and (max-width: 576px) {
.comp__dl-info {
padding: 30px 20px;
margin-bottom: 20px;
}
.comp__dl-info dt {
font-size: 1.6rem;
}
}
/*
comp__executives  [
----------------------------------------------------------- */
.row.comp__executives {
position: relative;
}
.row.comp__executives .comp__executives_txt:after {
content: "";
display: block;
width: 50px;
height: 50px;
position: absolute;
z-index: -1;
background-color: #00AD82;
}
.row.comp__executives .comp__executives_txt:before {
content: "";
width: 80px;
height: 80px;
position: absolute;
z-index: -1;
background-color: #00AD82;
}
.row.comp__executives:nth-child(odd) .comp__executives_txt:after {
bottom: -10px;
right: 40px;
}
.row.comp__executives:nth-child(even) .comp__executives_txt:after {
top: -25px;
left: 160px;
}
.row.comp__executives:nth-child(odd) .comp__executives_txt:before {
display: block;
bottom: -20px;
right: 120px;
width: 10px;
height: 10px;
}
.row.comp__executives:nth-child(even) .comp__executives_txt:before {
display: block;
bottom: 20px;
right: 60px;
}
.row.comp__executives:nth-child(4n) .comp__executives_txt:after {
top: -25px;
left: 80px;
}
.row.comp__executives:nth-child(4n) .comp__executives_txt:before {
bottom: -20px;
right: auto;
left: 0px;
}
.comp__executives + .comp__executives {
padding-top: 50px;
}
.comp__executives .comp__executives_photo {
text-align: center;
}
.comp__executives figure {
text-align: center;
margin-bottom: 10px;
}
.comp__executives h3 {
font-size: 1.8rem;
margin-bottom: 4px;
}
.comp__executives p {
font-size: 1.4rem;
line-height: 1.6;
margin-bottom: 0;
}
.comp__executives_txt {
background-color: rgba(238, 241, 242, 0.9);
padding: 50px 40px;
}
@media only screen and (max-width: 768px) {
.comp__executives figure img {
max-width: 150px;
}
.comp__executives .comp__executives_photo {
text-align: center;
margin-bottom: 20px;
}
.comp__executives_txt {
background-color: rgba(238, 241, 242, 0.9);
padding: 30px 20px;
}
.comp__executives h3.ttl--l {
font-size: 1.6rem !important;
}
.comp__executives + .comp__executives {
padding-top: 25px;
border-top: 1px solid #ccc;
margin-top: 25px;
}
}
@media only screen and (max-width: 576px) {
.row.comp__executives:nth-child(even) .comp__executives_txt:before {
display: block;
bottom: -10px;
right: 60px;
}
.row.comp__executives:nth-child(even) .comp__executives_txt:after {
top: -25px;
left: 40px;
}
.row.comp__executives:nth-child(4n) .comp__executives_txt:before {
bottom: -10px;
right: auto;
left: 180px;
}
.row.comp__executives:nth-child(4n) .comp__executives_txt:after {
top: -10px;
left: 80px;
}
}
/*
comp__section--outline [
----------------------------------------------------------- */
dl.comp__section--outline, .comp__section--outline dt, .comp__section--outline dd {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
dl.comp__section--outline {}
.comp__section--outline dt, .comp__section--outline dd {
padding: 10px 0 0 0;
margin-bottom: 10px;
}
.comp__section--outline dt {
width: 140px;
float: left;
font-weight: 600;
}
.comp__section--outline dd {
margin-left: 140px;
}
@media only screen and (max-width: 576px) {
dl.comp__section--outline, .comp__section--outline dt, .comp__section--outline dd {
font-size: 1.4rem;
}
dl.comp__section--outline, .comp__section--outline dt, .comp__section--outline dd {
display: block;
width: auto;
float: none;
padding: 0 0 0 0;
margin: 0 0 0;
text-align: center;
}
.comp__section--outline dd {
margin: 0 0 15px;
}
}
/*
faq-page [
----------------------------------------------------------- */
.faq-page .js-toggle dd ul {
padding-top: 15px;
}
/* ===================================

9: Downloads page

====================================== */
dl.js-toggle.text > dt {
padding: 20px 0;
font-size: 1.8rem;
}
dl.js-toggle.comp__spec_section > dd {
padding: 0;
}
.comp__spec-list {}
.comp__spec-list dt, .comp__spec-list dd {
padding: 8px 10px 8px 10px;
margin-bottom: 0;
}
.comp__spec-list dt {
width: 16%;
float: left;
font-weight: 600;
line-height: 1;
padding-top: 20px;
}
.comp__spec-list dd {
padding-left: 16%;
}
.comp__spec-list dd:nth-of-type(even) {
background-color: #F2F2F2;
}
.comp__spec-list dd:after {
content: '';
display: block;
clear: both;
}
.comp__catalogue_area {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #ccc;
}
.comp__catalogue_area a {
display: block;
color: #404040;
}
/* ===================================

9: search result

====================================== */
.comp__search-result {
margin-bottom: 20px;
box-shadow: 0 0 20px rgba(12, 0, 0, .25);
-webkit-box-shadow: 0 0 20px rgba(12, 0, 0, .25);
-moz-box-shadow: 0 0 20px rgba(12, 0, 0, .25);
padding: 30px;
background-color: #fff;
}
.comp__search-result h3 {
font-size: 2.0rem;
margin-bottom: 5px;
font-weight: 700;
}
.comp__search-result p {
font-size: 1.4rem;
margin-bottom: 0;
color: #707070;
}
/* ===================================

9: skytop result

====================================== */
.comp_category_title h1 .tag.label.normal {
vertical-align: middle;
margin-right: 10px;
font-size: 1.4rem;
font-weight: 500;
margin-bottom: 5px;
}
.comp__skytop_txt {
border-top: 6px solid #374252;
padding-top: 30px;
}
.comp__skytop_txt dl, .comp__skytop_txt dt, .comp__skytop_txt dd {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.comp__skytop_txt dl {
margin-bottom: 30px;
}
.comp__skytop_txt dt, .comp__skytop_txt dd {
padding: 10px 0 0 0;
margin-bottom: 0;
line-height: 1.6;
}
.comp__skytop_txt dt {
width: 140px;
float: left;
font-weight: 500;
padding-bottom: 10px;
}
.comp__skytop_txt dd {
padding-left: 140px;
padding-bottom: 10px;
}
.comp__skytop_txt dd:after {
content: '';
display: block;
clear: both;
}
/* ===================================

11: news page

====================================== */
/*
comp__news_section [
----------------------------------------------------------- */
.comp_category_title.news {
margin-bottom: 10px;
}
.comp_meta {
padding: 50px 0;
}
.comp_meta li {
margin-right: 20px;
display: inline-block;
}
.comp__popular-post {
border-top: 8px solid #EEEEEE;
padding-top: 30px;
}
.comp__popular-post h3 {
font-size: 2.4rem;
margin-bottom: 30px;
text-align: center;
}
.comp__popular-post .comp__inner {
border: 1px solid #DDDDDD;
padding: 20px;
}
.comp__popular-post .comp__inner a {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.comp__popular-post li + li {
padding-top: 20px;
}
.comp__popular-post a figure {
width: 40%;
}
.comp__popular-post a .txt {
width: calc(100% - 45%);
}
.comp__popular-post a h4 {
font-size: 1.4rem;
color: #3B4552;
}
.comp__popular-post a .tag {
font-size: 1.2rem;
margin: 0 0 6px;
padding: 0;
font-weight: 400;
}
.comp__popular-post a figure img {
position: relative;
overflow: hidden;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1.02);
transform: scale(1.02);
z-index: 99;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
width: 100%;
height: 80px;
-o-object-fit: cover;
object-fit: cover;
font-family: 'object-fit: cover;'
}
.comp__popular-post li:first-child a figure {
width: 100%;
margin-bottom: 10px;
}
.comp__popular-post li:first-child a .txt {
width: 100%;
}
.comp__popular-post li:first-child a h4 {
font-size: 1.6rem;
}
.comp__popular-post li:first-child a figure img {
height: 200px;
}
.news_blc .comp__popular-post {
margin-bottom: 20px;
}
@media only screen and (max-width: 576px) {
.comp__popular-post h3 {
font-size: 2.0rem;
margin-bottom: 20px;
}
}
@media only screen and (min-width: 1220px) {
.news_blc .colpd-wide {
width: calc(100% - 380px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
@media only screen and (min-width: 991px) {
.news_blc .colpd-wide {
width: calc(100% - 380px);
float: left;
}
.news_blc aside {
display: block;
width: 330px;
float: right;
}
}
@media only screen and (max-width: 990px) {
.news_blc .comp__popular-post {
margin-bottom: 40px;
}
.comp__popular-post h3 {
font-size: 1.6rem;
margin-bottom: 30px;
text-align: left;
font-weight: 700;
}
.comp__popular-post .comp__inner {
border: none;
padding: 0;
}
.comp__popular-post li:first-child a figure {
width: 40%;
margin-bottom: 0;
}
.comp__popular-post li:first-child a figure img {
height: 80px;
}
.comp__popular-post li:first-child a .txt {
width: calc(100% - 45%);
}
.comp__popular-post li:first-child a h4 {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 576px) {
.comp__popular-post li:first-child a h4 {
font-size: 1.2rem;
}
.comp__popular-post a h4 {
font-size: 1.2rem;
}
}
.news_blc aside .lnav li:first-child a {
border-top: 1px solid #ccc;
}
.news_blc aside .lnav li a {
padding: 12px 10px;
border-bottom: 1px solid #ccc;
color: #374252;
font-size: 1.4rem;
font-weight: 500;
display: block;
}
.news_blc aside .lnav li a:hover {
background-color: #28b8b4;
color: #fff;
}
.news_blc aside .lnav li a.current {
background-color: #28b8b4;
color: #fff;
}
.comp__article {
padding-top: 30px;
}
.comp__article .figure {
text-align: center;
}

.comp__article h2 {
font-size: 2.6rem;
margin-bottom: 2rem;
font-weight: bold;
}
.comp__article h2.ttl--section02 {
font-size: 2.6rem;
line-height: 1.4;
padding: 20px 0 30px;
font-weight: 700;
border-bottom: 3px solid #01aba7;
margin-top: 40px;
position: relative;
margin-bottom: 40px;
}
.comp__article h2.ttl--section03 {
font-size: 2.6rem;
line-height: 1.4;
padding: 10px 20px 10px;
font-weight: 700;
border-left: 8px solid #01aba7;
margin-top: 40px;
position: relative;
margin-bottom: 40px;
}
.comp__article h2.ttl--section {
font-size: 2.6rem;
line-height: 1.4;
padding: 40px 0 40px;
font-weight: 700;
border-top: 1px solid #B9B9B9;
border-bottom: 1px solid #B9B9B9;
margin-top: 40px;
position: relative;
margin-bottom: 40px;
}
.comp__article h2.ttl--section:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 175px;
height: 4px;
background-color: #01aba7;
margin-top: -4px;
}
.comp__article h2.ttl--section:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 175px;
height: 4px;
background-color: #01aba7;
margin-top: 0px;
}
.comp__article h3 {
font-size: 2.2rem;
margin-bottom: 2rem;
font-weight: bold;
line-height: 1.8 !important;
}
.comp__article h4 {
font-size: 1.8rem;
margin-bottom: 2rem;
font-weight: bold;
}
.comp__article h5 {
font-size: 1.8rem;
margin-bottom: 15px;
font-weight: 700;
}
.comp__article h6 {
font-size: 16px;
margin-bottom: 15px;
}
.comp__article p {
margin-bottom: 2em;
font-size: 1.6rem;
line-height: 2;
overflow: auto;
}
.comp__article strong, .comp__article b {
font-weight: bold;
}
.comp__article em {
font-style: italic;
}
.comp__article ul, .comp__article ol {
margin: 0 0 1em 0;
padding: 0;
counter-reset: li;
list-style: none;
}
.comp__article ul ul, .comp__article ul ol, .comp__article ol ul, .comp__article ol ol {
margin-bottom: 0;
}
.comp__article ul li, .comp__article ol li {
margin-top: .5em;
padding-left: 1em;
text-indent: -1em;
}
.comp__article ul li:before {
margin-right: 12px;
content: '';
width: 6px;
height: 6px;
border-radius: 100%;
display: inline-block;
vertical-align: middle;
background: #666;
}
.comp__article ol li:before {
margin-right: 8px;
color: #666;
counter-increment: li;
content: counter(li) ".";
}
.comp__article table {
border-top: 1px solid #666;
border-right: 1px solid #666;
}
.comp__article th, .comp__article td {
padding: .25em 1em;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
font-size: 100%;
}
.comp__article th {
font-weight: 300;
}
.comp__article blockquote {
margin-top:30px;
margin-bottom: 30px;
padding: 50px 40px;
position: relative;
border: 6px solid #ccc;
}
.comp__article blockquote::before, .comp__article blockquote::after {
content: '\f10d';
position: absolute;
top: -6px;
color: #3E3E3E;
font-family: "Font Awesome 5 Free";
font-weight: bold;
background-color: #fff;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-size: 30px;
font-weight: bold;
}
.comp__article blockquote:before {
left: -6px;
padding: 0 5px 5px 0;
}
.comp__article blockquote:after {
right: -6px;
bottom: -6px;
top: auto;
padding: 5px 0 0 5px;
}
.comp__article blockquote a {
text-align: left;
margin-top: 10px;
}
.comp__article .box {
border: 8px solid #DEDEDE;
padding: 40px 30px 20px;
margin-bottom: 30px;
}
.comp__article .box h3 {
font-size: 2.0rem;
line-height: 1.6;
font-weight: 700;
padding-left: 22px;
margin-bottom: 20px;
position: relative;
padding: 0 0 0 22px;
}
.comp__article .box h3:after {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 15px;
height: 15px;
background-color: #01aba7;
}
.comp__article .caption {
margin-bottom: 1.6em;
padding: 0;
max-width: 100% !important;
font-size: 1.4rem;
}
.comp__article .caption.aligncenter {
margin-bottom: 2em;
}
.comp__article .caption img {
display: block;
margin: 0;
}
.comp__article p.wp-caption-text {
margin: 0;
padding: 10px;
font-size: 14px;
background-color: #eee;
width: 100% !important;
}
.comp__article .alignleft {
display: inline;
float: left;
margin-right: 20px;
}
.comp__article .alignright {
display: inline;
float: right;
margin-left: 20px;
}
.comp__article .aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
.comp__article img.alignleft, .comp__article img.alignright, .comp__article img.aligncenter {
margin-bottom: 1.6em;
}
.comp__article .wp-caption.alignnone {
width: 100% !important;
}
.comp__article iframe {
max-width: 100%;
}
.comp__article img {
max-width: 100%;
height: auto;
}
.wp-video {
max-width: 100%;
position: relative;
width: 100%;
padding-top: 56.25%;
background-color: #333;
margin-bottom: 30px;
}
.wp-video-shortcode video, video.wp-video-shortcode {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
.comp__article img.alignleft {
max-width: 100%;
height: auto;
width: auto;
}
.comp__article img.alignright {
max-width: 100%;
height: auto;
width: auto;
}
.comp__article .point {
font-size: 1.6rem;
background-color: #333;
padding: 5px 8px;
margin-right: 10px;
color: #fff;
}
.comp__article .b_line {
display:inline-block;
background:-webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(0%, #f4f637));
background:linear-gradient(transparent 70%, #f4f637 0%);
display: inline;
}
@media screen and (max-width: 575px) {
.comp__article .alignleft, .comp__article .alignright {
max-width: 100% !important;
display: block;
float: none;
margin: 0;
}
.comp__news_title h1 {
font-size: 2.0rem !important;
}
.comp__news_title ul {
font-size: 1.2rem;
}
.comp__article .box h3 {
font-size: 1.8rem;
}
.comp__article .box h3:after {
top: 7px;
}
.comp__article h2.ttl--section {
font-size: 2.2rem;
padding: 30px 0 30px;
margin-top: 30px;
margin-bottom: 30px;
}
.comp__article p {
margin-bottom: 2em;
font-size: 1.5rem;
line-height: 2;
overflow: auto;
}
.comp__article h2 {
font-size: 2.2rem;
}
.comp__article h3 {
font-size: 1.8rem;
}
.comp__article h4 {
font-size: 1.6rem;
}
.comp__article .box h3 {
font-size: 1.8rem;
}
.comp__article .point {
font-size: 1.4rem;
display: table;
margin-bottom: 8px;
}
}
/* Share button */
.snsShareArea a {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
width: auto;
margin: 0 3px;
padding: .4em .8em;
border-radius: 1px;
color: white !important;
text-decoration: none;
text-align: center;
font-size: 1.4rem;
font-family: 'IBM Plex Sans', sans-serif;
}
.snsShareArea a:hover {
opacity: 0.8;
text-decoration: none !important;
}
.snsShareArea a:last-child {
margin: 0 0 0 3px;
}
.btn--twitter {
background: #6ac0e9;
}
.btn--facebook {
background: #617ab2;
}
.btn--google {
background: #e2695f;
}
.btn--line {
background: #33cf33;
}
.btn--hatena {
background: #33b6e5;
}
.btn--pocket {
background: #dc737b;
}
.btn--tumblr {
background: #36465d;
}
.btn--pinterest {
background: #c60120;
}
@media only screen and (max-width: 767px) {
.snsShareArea {
margin-bottom: 10px;
width: 100%;
}
.snsShareArea a {
margin: 3px 3px;
}
}
@media only screen and (max-width: 640px) {
.snsShareArea a {
margin: 3px 0px;
width: 32.6%;
padding: .8em .8em;
}
.snsShareArea a:last-child {
margin: 3px 0px;
}
}
@media only screen and (max-width: 420px) {
.snsShareArea a {
width: 49%;
}
}
/* =================================== */
/*
/*     utility CSS
/*
/*    1:Utility - .u-*
/*
/*
/* =================================== */
.lazyload, .lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
}
/* font size
------------------------------------------ */
.u-tx10 {
font-size: 10px !important;
}
/*renders 10px */
.u-tx11 {
font-size: 11px !important;
}
/*renders 11px */
.u-tx12 {
font-size: 12px !important;
}
/*renders 12px */
.u-tx13 {
font-size: 13px !important;
}
/*renders 13px */
.u-tx14 {
font-size: 14px !important;
}
/*renders 14px */
.u-tx15 {
font-size: 15px !important;
}
/*renders 15px */
.u-tx16 {
font-size: 16px !important;
}
/*renders 16px */
.u-tx17 {
font-size: 17px !important;
}
/*renders 17px */
.u-tx18 {
font-size: 18px !important;
}
/*renders 18px */
.u-tx19 {
font-size: 19px !important;
}
/*renders 19px */
.u-tx20 {
font-size: 20px !important;
}
/*renders 20px */
.u-tx21 {
font-size: 21px !important;
}
/*renders 21px */
.u-tx22 {
font-size: 22px !important;
}
/*renders 22px */
.u-tx23 {
font-size: 23px !important;
}
/*renders 23px */
.u-tx24 {
font-size: 24px !important;
}
/*renders 24px */
.u-tx25 {
font-size: 25px !important;
}
/*renders 25px */
.u-tx36 {
font-size: 36px !important;
line-height: 1.2;
}
/*renders 25px */
/* Form
------------------------------------------ */
/* IME : For Windows IE */
.imeA {
ime-mode: active;
}
.imeD {
ime-mode: disabled;
}
.hidden {
display: none !important;
}
/* = Selected Text
----------------------------------------------- */
::-moz-selection {
background: #1A2336;
/* Safari */
color: #fff;
}
::selection {
background: #1A2336;
/* Safari */
color: #fff;
}
::-moz-selection {
background: #1A2336;
/* Firefox */
color: #fff;
}
/* = js
----------------------------------------------- */
.is-visible {
display: block !important;
}
.is-hidden {
display: none !important;
}
.is-fixed {
height: 100%;
overflow: hidden;
}
.is-lock {
overflow: hidden;
}
/* = sp & pc
----------------------------------------------- */
.pc_none {
display: none !important;
}
.sp_none {
display: block !important;
}
.pc_br {
display: inline-block !important;
}
.sp_br {
display: none !important;
}
@media only screen and (max-width: 991px) {
.pc_br {
display: none !important;
}
.sp_br {
display: inline-block !important;
}
}
@media only screen and (max-width: 991px) {
.pc_none {
display: block !important;
}
.sp_none {
display: none !important;
}
}
/* page padding
------------------------------------------ */
.content--basic-padding {
padding: 100px 0;
}
.content--3quarter-padding {
padding: 70px 0;
}
.content--harf-padding {
padding: 50px 0;
}
.content--30-padding {
padding: 30px 0;
}
.content--quarter-padding {
padding: 25px 0;
}
.content--top-padding {
padding: 100px 0 0;
}
.content--top3quarter-padding {
padding: 70px 0 0;
}
.content--bottom-padding {
padding: 0 0 100px;
}
.content--bottomharf-padding {
padding: 0 0 50px;
}
.content--article_border-padding {
padding: 70px 0;
border-top: 1px solid #ccc;
}
.content--1bk_border-padding {
padding: 40px 30px;
border: 1px solid #707070;
}
.page-title--article {
padding: 30px 0 50px;
}
@media only screen and (max-width: 575px) {
.content--basic-padding {
padding: 50px 0;
}
.content--3quarter-padding {
padding: 40px 0;
}
.content--harf-padding {
padding: 20px 0;
}
.content--30-padding {
padding: 20px 0;
}
.content--quarter-padding {
padding: 10px 0;
}
.content--top-padding {
padding: 50px 0 0;
}
.content--top3quarter-padding {
padding: 30px 0 0;
}
.content--bottom-padding {
padding: 0 0 40px;
}
.content--article_border-padding {
padding: 50px 0;
border-top: 1px solid #ccc;
}
.page-title--article {
padding: 15px 0 25px;
}
}
/* line-height
------------------------------------------ */
.lh0 {
line-height: 0 !important;
}
.lh10 {
line-height: 1.0 !important;
}
.lh11 {
line-height: 1.1 !important;
}
.lh12 {
line-height: 1.2 !important;
}
.lh13 {
line-height: 1.3 !important;
}
.lh14 {
line-height: 1.4 !important;
}
.lh15 {
line-height: 1.5 !important;
}
.lh16 {
line-height: 1.6 !important;
}
.lh17 {
line-height: 1.7 !important;
}
.lh175 {
line-height: 1.75 !important;
}
.lh18 {
line-height: 1.8 !important;
}
.lh19 {
line-height: 1.9 !important;
}
.lh20 {
line-height: 2.0 !important;
}
/* font-weight
------------------------------------------ */
.fwB {
font-weight: 600 !important;
}
.fwN {
font-weight: 400 !important;
}
.fwTin {
font-weight: 100 !important;
}
/* display
------------------------------------------ */
.dsB {
display: block;
}
/* font color
------------------------------------------ */
.fcGray {
color: #909090 !important;
}
.fcbk {
color: #222 !important;
}
.fcHot {
color: #D90101 !important;
}
.fcblue {
color: #30508F !important;
}
/* BG color
------------------------------------------ */
.bg_wh {
background-color: #fff !important;
}
.bg_gr {
background-color: #EEF1F2 !important;
}
.bg_grl {
background-color: #efefef !important;
}
.bg_bk {
background-color: #1C1C1E !important;
color: #fff;
}
.bg_theme-bk {
background-color: #17A57E !important;
color: #fff;
}
.bg_creamy {
background-color: #fffef7 !important;
}
/* font decoration
------------------------------------------ */
.fdU {
text-decoration: underline;
}
/* indent
------------------------------------------ */
.indent1 {
padding-left: 1em;
text-indent: -1em;
}
.indent2 {
padding-left: 0.5em;
text-indent: -0.5em;
}
.indent3 {
padding-left: 3em;
text-indent: -3em;
}
/* letter-spacing
------------------------------------------ */
.ls1 {
letter-spacing: 1px;
}
/* lock
------------------------------------------ */
.lock {
overflow: hidden;
}
/* modal-overlay
------------------------------------------ */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
z-index: 5200;
}
/* text-align
------------------------------------------ */
.taL {
text-align: left !important;
}
.taC {
text-align: center !important;
}
.taR {
text-align: right !important;
}
/* vertical-align
------------------------------------------ */
.vaT {
vertical-align: top !important;
}
.vaM {
vertical-align: middle !important;
}
.vaB {
vertical-align: bottom !important;
}
/* float
------------------------------------------ */
.flL {
float: left;
}
.flR {
float: right;
}
/* overflow
------------------------------------------ */
.ofH {
overflow: hidden;
}
/* clear
------------------------------------------ */
.clear {
line-height: 1;
clear: both;
}
.clearboth {
clear: both;
}
/* inline block
------------------------------------------ */
.iBlk {
display: -moz-inline-box;
display: inline-block;
}
/* nowrap
------------------------------------------ */
.nwrp {
white-space: nowrap;
}
.wba {
word-break: break-all;
}
.wsN {
white-space: pre;
}
/* smt
------------------------------------------ */
.sp-on {
/* スマートフォンのみ表示 */
display: none !important;
}
.responsive * {
max-width: 100%;
height: auto;
}
/* width
------------------------------------------ */
.w100p {
width: 100% !important;
}
.w80 {
width: 80px !important;
}
.w100 {
width: 100px !important;
}
.w110 {
width: 110px !important;
}
.w120 {
width: 120px !important;
}
.w125 {
width: 125px !important;
}
.w130 {
width: 130px !important;
}
.w140 {
width: 140px !important;
}
.w150 {
width: 150px !important;
}
.w180 {
width: 180px !important;
}
.w190 {
width: 190px !important;
}
.w200 {
width: 200px !important;
}
.w210 {
width: 210px !important;
}
.w240 {
width: 240px !important;
}
.w220 {
width: 220px !important;
}
.w225 {
width: 225px !important;
}
.w230 {
width: 230px !important;
}
.w240 {
width: 240px !important;
}
.w245 {
width: 245px !important;
}
.w246 {
width: 246px !important;
}
.w260 {
width: 260px !important;
}
.w270 {
width: 270px !important;
}
.w280 {
width: 280px !important;
}
.w290 {
width: 290px !important;
}
.w295 {
width: 295px !important;
}
.w300 {
width: 300px !important;
}
.w320 {
width: 320px !important;
}
.w315 {
width: 315px !important;
}
.w330 {
width: 330px !important;
}
.w340 {
width: 340px !important;
}
.w345 {
width: 345px !important;
}
.w350 {
width: 350px !important;
}
.w360 {
width: 360px !important;
}
.w370 {
width: 370px !important;
}
.w390 {
width: 390px !important;
}
.w400 {
width: 400px !important;
}
.w410 {
width: 410px !important;
}
.w430 {
width: 430px !important;
}
.w440 {
width: 440px !important;
}
.w450 {
width: 450px !important;
}
.w460 {
width: 460px !important;
}
.w470 {
width: 470px !important;
}
.w480 {
width: 480px !important;
}
.w500 {
width: 500px !important;
}
.w520 {
width: 520px !important;
}
.w530 {
width: 530px !important;
}
.w542 {
width: 542px !important;
}
.w550 {
width: 550px !important;
}
.w560 {
width: 560px !important;
}
.w590 {
width: 590px !important;
}
.w600 {
width: 600px !important;
}
.w640 {
width: 640px !important;
}
.w675 {
width: 675px !important;
}
.w680 {
width: 680px !important;
}
.w780 {
width: 780px !important;
}
.w730 {
width: 730px !important;
}
.w820 {
width: 820px !important;
}
.w-25 {
width: 25% !important;
}
.w-50 {
width: 50% !important;
}
.w-75 {
width: 75% !important;
}
.w-100 {
width: 100% !important;
}
.h-25 {
height: 25% !important;
}
.h-50 {
height: 50% !important;
}
.h-75 {
height: 75% !important;
}
.h-100 {
height: 100% !important;
}
.mw-100 {
max-width: 100% !important;
}
.mh-100 {
max-height: 100% !important;
}
.align-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.align-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.align-justify {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.align-spaced {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.align-top {
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start;
}
.align-self-top {
-ms-flex-item-align: start;
align-self: flex-start;
}
.align-bottom {
-webkit-box-align: end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end;
}
.align-self-bottom {
-ms-flex-item-align: end;
align-self: flex-end;
}
.align-middle {
/* -webkit-box-align: center; */
-ms-flex-align: center;
-ms-grid-row-align: center;
-webkit-box-align: center;
align-items: center;
}
.align-self-middle {
-ms-flex-item-align: center;
align-self: center;
}
.align-stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
-ms-grid-row-align: stretch;
align-items: stretch;
}
.align-self-stretch {
-ms-flex-item-align: stretch;
align-self: stretch;
}
.small-order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.small-order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.small-order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.small-order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.small-order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.small-order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
@media screen and (min-width: 576px) {
.medium-order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.medium-order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.medium-order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.medium-order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.medium-order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.medium-order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
}
@media screen and (min-width: 768px) {
.mlarge-order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.mlarge-order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.mlarge-order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.mlarge-order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.mlarge-order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.mlarge-order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
}
@media screen and (min-width: 992px) {
.large-order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.large-order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.large-order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.large-order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.large-order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.large-order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
}
@media screen and (min-width: 1200px) {
.xlarge-order-1 {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.xlarge-order-2 {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.xlarge-order-3 {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.xlarge-order-4 {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}
.xlarge-order-5 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.xlarge-order-6 {
-webkit-box-ordinal-group: 7;
-ms-flex-order: 6;
order: 6;
}
}
@media only screen and (max-width: 575px) {
.taL {
text-align: left;
}
.taC {
text-align: center;
}
.taR {
text-align: right;
display: block;
margin-bottom: 10px;
}
.tr {
text-align: right;
}
.wsN {
white-space: normal;
}
.w180 {
width: 100% !important;
}
/* Responsive images and other embedded objects */
#contents object, #contents embed, #contents video {
width: auto;
max-width: 100%;
}
/* Responsive images aspeсt ratio */
#contents video {
height: auto;
}
/* font size
------------------------------------------ */
.u-tx10 {
font-size: 1.0rem !important;
}
/*renders 10px */
.u-tx11 {
font-size: 1.1rem !important;
}
/*renders 11px */
.u-tx12 {
font-size: 1.2rem !important;
}
/*renders 12px */
.u-tx13 {
font-size: 1.3rem !important;
}
/*renders 13px */
.u-tx14 {
font-size: 1.4rem !important;
}
/*renders 14px */
.u-tx15 {
font-size: 1.4rem !important;
}
/*renders 15px */
.u-tx16 {
font-size: 1.6rem !important;
}
/*renders 16px */
.u-tx17 {
font-size: 1.6rem !important;
}
/*renders 17px */
.u-tx18 {
font-size: 1.6rem !important;
}
/*renders 18px */
.u-tx19 {
font-size: 1.6rem !important;
}
/*renders 19px */
.u-tx20 {
font-size: 1.8rem !important;
}
/*renders 20px */
.u-tx21 {
font-size: 1.8rem !important;
}
/*renders 21px */
.u-tx22 {
font-size: 1.6rem !important;
}
/*renders 22px */
.u-tx23 {
font-size: 1.6rem !important;
}
/*renders 23px */
.u-tx24 {
font-size: 1.8rem !important;
}
/*renders 24px */
.u-tx25 {
font-size: 1.6rem !important;
}
/*renders 25px */
.u-tx36 {
font-size: 2.4rem !important;
line-height: 1.2;
}
/*renders 25px */
.sp-taL br {
display: none;
}
.sp-taL {
text-align: left !important;
}
/* width
============================== */
.w270 {
width: 100% !important;
}
.w280 {
width: 100% !important;
}
.w290 {
width: 100% !important;
}
.w295 {
width: 100% !important;
}
.w300 {
width: 100% !important;
}
.w320 {
width: 100% !important;
}
.w315 {
width: 100% !important;
}
.w330 {
width: 100% !important;
}
.w340 {
width: 100% !important;
}
.w345 {
width: 100% !important;
}
.w350 {
width: 100% !important;
}
.w360 {
width: 100% !important;
}
.w370 {
width: 100% !important;
}
.w390 {
width: 100% !important;
}
.w400 {
width: 100% !important;
}
.w410 {
width: 100% !important;
}
.w430 {
width: 100% !important;
}
.w440 {
width: 100% !important;
}
.w450 {
width: 100% !important;
}
.w460 {
width: 100% !important;
}
.w470 {
width: 100% !important;
}
.w480 {
width: 100% !important;
}
.w500 {
width: 100% !important;
}
.w520 {
width: 100% !important;
}
.w530 {
width: 100% !important;
}
.w542 {
width: 100% !important;
}
.w550 {
width: 100% !important;
}
.w560 {
width: 100% !important;
}
.w590 {
width: 100% !important;
}
.w600 {
width: 100% !important;
}
.w640 {
width: 100% !important;
}
.w675 {
width: 100% !important;
}
.w680 {
width: 100% !important;
}
.w780 {
width: 100% !important;
}
.w730 {
width: 100% !important;
}
.w740 {
width: 100% !important;
}
.w820 {
width: 100% !important;
}
}
/* Margin
------------------------------------------ */
/* ------ margin-top ------ */
.mt0 {
margin-top: 0 !important;
}
.mt1 {
margin-top: 1px !important;
}
.mt3 {
margin-top: 3px !important;
}
.mt5 {
margin-top: 5px !important;
}
.mt7 {
margin-top: 7px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mt25 {
margin-top: 25px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mt35 {
margin-top: 35px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mt45 {
margin-top: 45px !important;
}
.mt50 {
margin-top: 50px !important;
}
.mt55 {
margin-top: 55px !important;
}
.mt60 {
margin-top: 60px !important;
}
.mt65 {
margin-top: 65px !important;
}
.mt70 {
margin-top: 70px !important;
}
.mt75 {
margin-top: 75px !important;
}
.mt80 {
margin-top: 80px !important;
}
.mt85 {
margin-top: 85px !important;
}
.mt90 {
margin-top: 90px !important;
}
.mt95 {
margin-top: 95px !important;
}
.mt100 {
margin-top: 100px !important;
}
/* ------ margin-right ------ */
.mrA {
margin-right: auto !important;
}
.mr0 {
margin-right: 0 !important;
}
.mr1 {
margin-right: 1px !important;
}
.mr3 {
margin-right: 3px !important;
}
.mr5 {
margin-right: 5px !important;
}
.mr7 {
margin-right: 7px !important;
}
.mr8 {
margin-right: 8px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mr15 {
margin-right: 15px !important;
}
.mr20 {
margin-right: 20px !important;
}
.mr25 {
margin-right: 25px !important;
}
.mr30 {
margin-right: 30px !important;
}
.mr35 {
margin-right: 35px !important;
}
.mr40 {
margin-right: 40px !important;
}
.mr45 {
margin-right: 45px !important;
}
.mr50 {
margin-right: 50px !important;
}
.mr55 {
margin-right: 55px !important;
}
.mr60 {
margin-right: 60px !important;
}
.mr65 {
margin-right: 65px !important;
}
.mr70 {
margin-right: 70px !important;
}
.mr75 {
margin-right: 75px !important;
}
.mr80 {
margin-right: 80px !important;
}
.mr85 {
margin-right: 85px !important;
}
.mr90 {
margin-right: 90px !important;
}
.mr95 {
margin-right: 95px !important;
}
.mr100 {
margin-right: 100px !important;
}
/* ------ margin-bottom ------ */
.mb0 {
margin-bottom: 0 !important;
}
.mb1 {
margin-bottom: 1px !important;
}
.mb3 {
margin-bottom: 3px !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.mb7 {
margin-bottom: 7px !important;
}
.mb8 {
margin-bottom: 8px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.mb25 {
margin-bottom: 25px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.mb35 {
margin-bottom: 35px !important;
}
.mb40 {
margin-bottom: 40px !important;
}
.mb45 {
margin-bottom: 45px !important;
}
.mb50 {
margin-bottom: 50px !important;
}
.mb55 {
margin-bottom: 55px !important;
}
.mb60 {
margin-bottom: 60px !important;
}
.mb65 {
margin-bottom: 65px !important;
}
.mb70 {
margin-bottom: 70px !important;
}
.mb75 {
margin-bottom: 75px !important;
}
.mb80 {
margin-bottom: 80px !important;
}
.mb85 {
margin-bottom: 85px !important;
}
.mb90 {
margin-bottom: 90px !important;
}
.mb95 {
margin-bottom: 95px !important;
}
.mb100 {
margin-bottom: 100px !important;
}
.mb170 {
margin-bottom: 170px !important;
}
/* ------ margin-left ------ */
.mlA {
margin-left: auto !important;
}
.ml0 {
margin-left: 0 !important;
}
.ml1 {
margin-left: 1px !important;
}
.ml3 {
margin-left: 3px !important;
}
.ml5 {
margin-left: 5px !important;
}
.ml7 {
margin-left: 7px !important;
}
.ml10 {
margin-left: 10px !important;
}
.ml15 {
margin-left: 15px !important;
}
.ml20 {
margin-left: 20px !important;
}
.ml25 {
margin-left: 25px !important;
}
.ml30 {
margin-left: 30px !important;
}
.ml35 {
margin-left: 35px !important;
}
.ml40 {
margin-left: 40px !important;
}
.ml45 {
margin-left: 45px !important;
}
.ml50 {
margin-left: 50px !important;
}
.ml55 {
margin-left: 55px !important;
}
.ml60 {
margin-left: 60px !important;
}
.ml65 {
margin-left: 65px !important;
}
.ml70 {
margin-left: 70px !important;
}
.ml75 {
margin-left: 75px !important;
}
.ml80 {
margin-left: 80px !important;
}
.ml85 {
margin-left: 85px !important;
}
.ml90 {
margin-left: 90px !important;
}
.ml95 {
margin-left: 95px !important;
}
.ml100 {
margin-left: 100px !important;
}
/* padding
------------------------------------------ */
.pa10 {
padding: 10px !important;
}
.pa20 {
padding: 20px !important;
}
.pa30 {
padding: 30px !important;
}
.pa40 {
padding: 40px !important;
}
.pa50 {
padding: 50px !important;
}
@media only screen and (max-width: 575px) {
.pa50 {
padding: 30px !important;
}
}
/* ------ padding-top ------ */
.p0 {
padding: 0 !important;
}
.pt0 {
padding-top: 0 !important;
}
.pt1 {
padding-top: 1px !important;
}
.pt4 {
padding-top: 4px !important;
}
.pt3 {
padding-top: 3px !important;
}
.pt5 {
padding-top: 5px !important;
}
.pt7 {
padding-top: 7px !important;
}
.pt10 {
padding-top: 10px !important;
}
.pt15 {
padding-top: 15px !important;
}
.pt20 {
padding-top: 20px !important;
}
.pt25 {
padding-top: 25px !important;
}
.pt30 {
padding-top: 30px !important;
}
.pt35 {
padding-top: 35px !important;
}
.pt40 {
padding-top: 40px !important;
}
.pt45 {
padding-top: 45px !important;
}
.pt50 {
padding-top: 50px !important;
}
.pt55 {
padding-top: 55px !important;
}
.pt60 {
padding-top: 60px !important;
}
.pt65 {
padding-top: 65px !important;
}
.pt70 {
padding-top: 70px !important;
}
.pt75 {
padding-top: 75px !important;
}
.pt80 {
padding-top: 80px !important;
}
.pt85 {
padding-top: 85px !important;
}
.pt90 {
padding-top: 90px !important;
}
.pt95 {
padding-top: 95px !important;
}
.pt100 {
padding-top: 100px !important;
}
/* ------ padding-right ------ */
.pr0 {
padding-right: 0 !important;
}
.pr1 {
padding-right: 1px !important;
}
.pr3 {
padding-right: 3px !important;
}
.pr5 {
padding-right: 5px !important;
}
.pr7 {
padding-right: 7px !important;
}
.pr10 {
padding-right: 10px !important;
}
.pr15 {
padding-right: 15px !important;
}
.pr20 {
padding-right: 20px !important;
}
.pr25 {
padding-right: 25px !important;
}
.pr30 {
padding-right: 30px !important;
}
.pr35 {
padding-right: 35px !important;
}
.pr40 {
padding-right: 40px !important;
}
.pr45 {
padding-right: 45px !important;
}
.pr50 {
padding-right: 50px !important;
}
.pr55 {
padding-right: 55px !important;
}
.pr60 {
padding-right: 60px !important;
}
.pr65 {
padding-right: 65px !important;
}
.pr70 {
padding-right: 70px !important;
}
.pr75 {
padding-right: 75px !important;
}
.pr80 {
padding-right: 80px !important;
}
.pr85 {
padding-right: 85px !important;
}
.pr90 {
padding-right: 90px !important;
}
.pr95 {
padding-right: 95px !important;
}
.pr100 {
padding-right: 100px !important;
}
/* ------ padding-bottom ------ */
.pb0 {
padding-bottom: 0 !important;
}
.pb1 {
padding-bottom: 1px !important;
}
.pb3 {
padding-bottom: 3px !important;
}
.pb5 {
padding-bottom: 5px !important;
}
.pb7 {
padding-bottom: 7px !important;
}
.pb10 {
padding-bottom: 10px !important;
}
.pb15 {
padding-bottom: 15px !important;
}
.pb20 {
padding-bottom: 20px !important;
}
.pb25 {
padding-bottom: 25px !important;
}
.pb30 {
padding-bottom: 30px !important;
}
.pb35 {
padding-bottom: 35px !important;
}
.pb40 {
padding-bottom: 40px !important;
}
.pb45 {
padding-bottom: 45px !important;
}
.pb50 {
padding-bottom: 50px !important;
}
.pb55 {
padding-bottom: 55px !important;
}
.pb60 {
padding-bottom: 60px !important;
}
.pb65 {
padding-bottom: 65px !important;
}
.pb70 {
padding-bottom: 70px !important;
}
.pb75 {
padding-bottom: 75px !important;
}
.pb80 {
padding-bottom: 80px !important;
}
.pb85 {
padding-bottom: 85px !important;
}
.pb90 {
padding-bottom: 90px !important;
}
.pb95 {
padding-bottom: 95px !important;
}
.pb100 {
padding-bottom: 100px !important;
}
/* ------ padding-left ------ */
.pl0 {
padding-left: 0 !important;
}
.pl1 {
padding-left: 1px !important;
}
.pl3 {
padding-left: 3px !important;
}
.pl5 {
padding-left: 5px !important;
}
.pl7 {
padding-left: 7px !important;
}
.pl8 {
padding-left: 8px !important;
}
.pl10 {
padding-left: 10px !important;
}
.pl15 {
padding-left: 15px !important;
}
.pl20 {
padding-left: 20px !important;
}
.pl25 {
padding-left: 25px !important;
}
.pl30 {
padding-left: 30px !important;
}
.pl35 {
padding-left: 35px !important;
}
.pl40 {
padding-left: 40px !important;
}
.pl45 {
padding-left: 45px !important;
}
.pl50 {
padding-left: 50px !important;
}
.pl55 {
padding-left: 55px !important;
}
.pl60 {
padding-left: 60px !important;
}
.pl65 {
padding-left: 65px !important;
}
.pl70 {
padding-left: 70px !important;
}
.pl75 {
padding-left: 75px !important;
}
.pl80 {
padding-left: 80px !important;
}
.pl85 {
padding-left: 85px !important;
}
.pl90 {
padding-left: 90px !important;
}
.pl95 {
padding-left: 95px !important;
}
.pl100 {
padding-left: 100px !important;
}
.m-0 {
margin: 0 0 !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mr-0 {
margin-right: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.ml-0 {
margin-left: 0 !important;
}
.mx-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-1 {
margin: 1rem 1rem !important;
}
.mt-1 {
margin-top: 1rem !important;
}
.mr-1 {
margin-right: 1rem !important;
}
.mb-1 {
margin-bottom: 1rem !important;
}
.ml-1 {
margin-left: 1rem !important;
}
.mx-1 {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
.my-1 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.m-2 {
margin: 2rem 2rem !important;
}
.mt-2 {
margin-top: 2rem !important;
}
.mr-2 {
margin-right: 2rem !important;
}
.mb-2 {
margin-bottom: 2rem !important;
}
.ml-2 {
margin-left: 2rem !important;
}
.mx-2 {
margin-right: 2rem !important;
margin-left: 2rem !important;
}
.my-2 {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
.m-3 {
margin: 3rem 3rem !important;
}
.mt-3 {
margin-top: 3rem !important;
}
.mr-3 {
margin-right: 3rem !important;
}
.mb-3 {
margin-bottom: 3rem !important;
}
.ml-3 {
margin-left: 3rem !important;
}
.mx-3 {
margin-right: 3rem !important;
margin-left: 3rem !important;
}
.my-3 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.m-4 {
margin: 4rem 4rem !important;
}
.mt-4 {
margin-top: 4rem !important;
}
.mr-4 {
margin-right: 4rem !important;
}
.mb-4 {
margin-bottom: 4rem !important;
}
.ml-4 {
margin-left: 4rem !important;
}
.mx-4 {
margin-right: 4rem !important;
margin-left: 4rem !important;
}
.my-4 {
margin-top: 4rem !important;
margin-bottom: 4rem !important;
}
.m-5 {
margin: 5rem 5rem !important;
}
.mt-5 {
margin-top: 5rem !important;
}
.mr-5 {
margin-right: 5rem !important;
}
.mb-5 {
margin-bottom: 5rem !important;
}
.ml-5 {
margin-left: 5rem !important;
}
.mx-5 {
margin-right: 5rem !important;
margin-left: 5rem !important;
}
.my-5 {
margin-top: 5rem !important;
margin-bottom: 5rem !important;
}
.p-0 {
padding: 0 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-1 {
padding: 1rem 1rem !important;
}
.pt-1 {
padding-top: 1rem !important;
}
.pr-1 {
padding-right: 1rem !important;
}
.pb-1 {
padding-bottom: 1rem !important;
}
.pl-1 {
padding-left: 1rem !important;
}
.px-1 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.py-1 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.p-2 {
padding: 2rem 2rem !important;
}
.pt-2 {
padding-top: 2rem !important;
}
.pr-2 {
padding-right: 2rem !important;
}
.pb-2 {
padding-bottom: 2rem !important;
}
.pl-2 {
padding-left: 2rem !important;
}
.px-2 {
padding-right: 2rem !important;
padding-left: 2rem !important;
}
.py-2 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.p-3 {
padding: 3rem 3rem !important;
}
.pt-3 {
padding-top: 3rem !important;
}
.pr-3 {
padding-right: 3rem !important;
}
.pb-3 {
padding-bottom: 3rem !important;
}
.pl-3 {
padding-left: 3rem !important;
}
.px-3 {
padding-right: 3rem !important;
padding-left: 3rem !important;
}
.py-3 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.p-4 {
padding: 4rem 4rem !important;
}
.pt-4 {
padding-top: 4rem !important;
}
.pr-4 {
padding-right: 4rem !important;
}
.pb-4 {
padding-bottom: 4rem !important;
}
.pl-4 {
padding-left: 4rem !important;
}
.px-4 {
padding-right: 4rem !important;
padding-left: 4rem !important;
}
.py-4 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
.p-5 {
padding: 5rem 5rem !important;
}
.pt-5 {
padding-top: 5rem !important;
}
.pr-5 {
padding-right: 5rem !important;
}
.pb-5 {
padding-bottom: 5rem !important;
}
.pl-5 {
padding-left: 5rem !important;
}
.px-5 {
padding-right: 5rem !important;
padding-left: 5rem !important;
}
.py-5 {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
.m-auto {
margin: auto !important;
}
.mt-auto {
margin-top: auto !important;
}
.mr-auto {
margin-right: auto !important;
}
.mb-auto {
margin-bottom: auto !important;
}
.ml-auto {
margin-left: auto !important;
}
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.my-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
@media (min-width: 576px) {
.m-sm-0 {
margin: 0 0 !important;
}
.mt-sm-0 {
margin-top: 0 !important;
}
.mr-sm-0 {
margin-right: 0 !important;
}
.mb-sm-0 {
margin-bottom: 0 !important;
}
.ml-sm-0 {
margin-left: 0 !important;
}
.mx-sm-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.my-sm-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-sm-1 {
margin: 1rem 1rem !important;
}
.mt-sm-1 {
margin-top: 1rem !important;
}
.mr-sm-1 {
margin-right: 1rem !important;
}
.mb-sm-1 {
margin-bottom: 1rem !important;
}
.ml-sm-1 {
margin-left: 1rem !important;
}
.mx-sm-1 {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
.my-sm-1 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.m-sm-2 {
margin: 2rem 2rem !important;
}
.mt-sm-2 {
margin-top: 2rem !important;
}
.mr-sm-2 {
margin-right: 2rem !important;
}
.mb-sm-2 {
margin-bottom: 2rem !important;
}
.ml-sm-2 {
margin-left: 2rem !important;
}
.mx-sm-2 {
margin-right: 2rem !important;
margin-left: 2rem !important;
}
.my-sm-2 {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
.m-sm-3 {
margin: 3rem 3rem !important;
}
.mt-sm-3 {
margin-top: 3rem !important;
}
.mr-sm-3 {
margin-right: 3rem !important;
}
.mb-sm-3 {
margin-bottom: 3rem !important;
}
.ml-sm-3 {
margin-left: 3rem !important;
}
.mx-sm-3 {
margin-right: 3rem !important;
margin-left: 3rem !important;
}
.my-sm-3 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.m-sm-4 {
margin: 4rem 4rem !important;
}
.mt-sm-4 {
margin-top: 4rem !important;
}
.mr-sm-4 {
margin-right: 4rem !important;
}
.mb-sm-4 {
margin-bottom: 4rem !important;
}
.ml-sm-4 {
margin-left: 4rem !important;
}
.mx-sm-4 {
margin-right: 4rem !important;
margin-left: 4rem !important;
}
.my-sm-4 {
margin-top: 4rem !important;
margin-bottom: 4rem !important;
}
.m-sm-5 {
margin: 5rem 5rem !important;
}
.mt-sm-5 {
margin-top: 5rem !important;
}
.mr-sm-5 {
margin-right: 5rem !important;
}
.mb-sm-5 {
margin-bottom: 5rem !important;
}
.ml-sm-5 {
margin-left: 5rem !important;
}
.mx-sm-5 {
margin-right: 5rem !important;
margin-left: 5rem !important;
}
.my-sm-5 {
margin-top: 5rem !important;
margin-bottom: 5rem !important;
}
.p-sm-0 {
padding: 0 0 !important;
}
.pt-sm-0 {
padding-top: 0 !important;
}
.pr-sm-0 {
padding-right: 0 !important;
}
.pb-sm-0 {
padding-bottom: 0 !important;
}
.pl-sm-0 {
padding-left: 0 !important;
}
.px-sm-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-sm-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-sm-1 {
padding: 1rem 1rem !important;
}
.pt-sm-1 {
padding-top: 1rem !important;
}
.pr-sm-1 {
padding-right: 1rem!important;
}
.pb-sm-1 {
padding-bottom: 1rem !important;
}
.pl-sm-1 {
padding-left: 1rem !important;
}
.px-sm-1 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.py-sm-1 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.p-sm-2 {
padding: 2rem 2rem !important;
}
.pt-sm-2 {
padding-top: 2rem !important;
}
.pr-sm-2 {
padding-right: 2rem !important;
}
.pb-sm-2 {
padding-bottom: 2rem !important;
}
.pl-sm-2 {
padding-left: 2rem !important;
}
.px-sm-2 {
padding-right: 2rem !important;
padding-left: 2rem !important;
}
.py-sm-2 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.p-sm-3 {
padding: 3rem 3rem !important;
}
.pt-sm-3 {
padding-top: 3rem !important;
}
.pr-sm-3 {
padding-right: 3rem !important;
}
.pb-sm-3 {
padding-bottom: 3rem !important;
}
.pl-sm-3 {
padding-left: 3rem !important;
}
.px-sm-3 {
padding-right: 3rem !important;
padding-left: 3rem !important;
}
.py-sm-3 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.p-sm-4 {
padding: 4rem 4rem !important;
}
.pt-sm-4 {
padding-top: 4rem !important;
}
.pr-sm-4 {
padding-right: 4rem !important;
}
.pb-sm-4 {
padding-bottom: 4rem !important;
}
.pl-sm-4 {
padding-left: 4rem !important;
}
.px-sm-4 {
padding-right: 4rem !important;
padding-left: 4rem !important;
}
.py-sm-4 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
.p-sm-5 {
padding: 5rem 5rem !important;
}
.pt-sm-5 {
padding-top: 5rem !important;
}
.pr-sm-5 {
padding-right: 5rem !important;
}
.pb-sm-5 {
padding-bottom: 5rem !important;
}
.pl-sm-5 {
padding-left: 5rem !important;
}
.px-sm-5 {
padding-right: 5rem !important;
padding-left: 5rem !important;
}
.py-sm-5 {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
.m-sm-auto {
margin: auto !important;
}
.mt-sm-auto {
margin-top: auto !important;
}
.mr-sm-auto {
margin-right: auto !important;
}
.mb-sm-auto {
margin-bottom: auto !important;
}
.ml-sm-auto {
margin-left: auto !important;
}
.mx-sm-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.my-sm-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
@media (min-width: 768px) {
.m-md-0 {
margin: 0 0 !important;
}
.mt-md-0 {
margin-top: 0 !important;
}
.mr-md-0 {
margin-right: 0 !important;
}
.mb-md-0 {
margin-bottom: 0 !important;
}
.ml-md-0 {
margin-left: 0 !important;
}
.mx-md-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.my-md-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-md-1 {
margin: 1rem 1rem !important;
}
.mt-md-1 {
margin-top: 1rem !important;
}
.mr-md-1 {
margin-right: 1rem !important;
}
.mb-md-1 {
margin-bottom: 1rem !important;
}
.ml-md-1 {
margin-left: 1rem !important;
}
.mx-md-1 {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
.my-md-1 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.m-md-2 {
margin: 2rem 2rem !important;
}
.mt-md-2 {
margin-top: 2rem !important;
}
.mr-md-2 {
margin-right: 2rem !important;
}
.mb-md-2 {
margin-bottom: 2rem !important;
}
.ml-md-2 {
margin-left: 2rem !important;
}
.mx-md-2 {
margin-right: 2rem !important;
margin-left: 2rem !important;
}
.my-md-2 {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
.m-md-3 {
margin: 3rem 3rem !important;
}
.mt-md-3 {
margin-top: 3rem !important;
}
.mr-md-3 {
margin-right: 3rem !important;
}
.mb-md-3 {
margin-bottom: 3rem !important;
}
.ml-md-3 {
margin-left: 3rem !important;
}
.mx-md-3 {
margin-right: 3rem !important;
margin-left: 3rem !important;
}
.my-md-3 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.m-md-4 {
margin: 4rem 4rem !important;
}
.mt-md-4 {
margin-top: 4rem !important;
}
.mr-md-4 {
margin-right: 4rem !important;
}
.mb-md-4 {
margin-bottom: 4rem !important;
}
.ml-md-4 {
margin-left: 4rem !important;
}
.mx-md-4 {
margin-right: 4rem !important;
margin-left: 4rem !important;
}
.my-md-4 {
margin-top: 4rem !important;
margin-bottom: 4rem !important;
}
.m-md-5 {
margin: 5rem 5rem !important;
}
.mt-md-5 {
margin-top: 5rem !important;
}
.mr-md-5 {
margin-right: 5rem !important;
}
.mb-md-5 {
margin-bottom: 5rem !important;
}
.ml-md-5 {
margin-left: 5rem !important;
}
.mx-md-5 {
margin-right: 5rem !important;
margin-left: 5rem !important;
}
.my-md-5 {
margin-top: 5rem !important;
margin-bottom: 5rem !important;
}
.p-md-0 {
padding: 0 0 !important;
}
.pt-md-0 {
padding-top: 0 !important;
}
.pr-md-0 {
padding-right: 0 !important;
}
.pb-md-0 {
padding-bottom: 0 !important;
}
.pl-md-0 {
padding-left: 0 !important;
}
.px-md-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-md-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-md-1 {
padding: 1rem 1rem !important;
}
.pt-md-1 {
padding-top: 1rem !important;
}
.pr-md-1 {
padding-right: 1rem !important;
}
.pb-md-1 {
padding-bottom: 1rem !important;
}
.pl-md-1 {
padding-left: 1rem !important;
}
.px-md-1 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.py-md-1 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.p-md-2 {
padding: 2rem 2rem !important;
}
.pt-md-2 {
padding-top: 2rem !important;
}
.pr-md-2 {
padding-right: 2rem !important;
}
.pb-md-2 {
padding-bottom: 2rem !important;
}
.pl-md-2 {
padding-left: 2rem !important;
}
.px-md-2 {
padding-right: 2rem !important;
padding-left: 2rem !important;
}
.py-md-2 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.p-md-3 {
padding: 3rem 3rem !important;
}
.pt-md-3 {
padding-top: 3rem !important;
}
.pr-md-3 {
padding-right: 3rem !important;
}
.pb-md-3 {
padding-bottom: 3rem !important;
}
.pl-md-3 {
padding-left: 3rem !important;
}
.px-md-3 {
padding-right: 3rem !important;
padding-left: 3rem !important;
}
.py-md-3 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.p-md-4 {
padding: 4rem 4rem !important;
}
.pt-md-4 {
padding-top: 4rem !important;
}
.pr-md-4 {
padding-right: 4rem !important;
}
.pb-md-4 {
padding-bottom: 4rem !important;
}
.pl-md-4 {
padding-left: 4rem !important;
}
.px-md-4 {
padding-right: 4rem !important;
padding-left: 4rem !important;
}
.py-md-4 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
.p-md-5 {
padding: 5rem 5rem !important;
}
.pt-md-5 {
padding-top: 5rem !important;
}
.pr-md-5 {
padding-right: 5rem !important;
}
.pb-md-5 {
padding-bottom: 5rem !important;
}
.pl-md-5 {
padding-left: 5rem !important;
}
.px-md-5 {
padding-right: 5rem !important;
padding-left: 5rem !important;
}
.py-md-5 {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
.m-md-auto {
margin: auto !important;
}
.mt-md-auto {
margin-top: auto !important;
}
.mr-md-auto {
margin-right: auto !important;
}
.mb-md-auto {
margin-bottom: auto !important;
}
.ml-md-auto {
margin-left: auto !important;
}
.mx-md-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.my-md-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
@media (min-width: 992px) {
.m-lg-0 {
margin: 0 0 !important;
}
.mt-lg-0 {
margin-top: 0 !important;
}
.mr-lg-0 {
margin-right: 0 !important;
}
.mb-lg-0 {
margin-bottom: 0 !important;
}
.ml-lg-0 {
margin-left: 0 !important;
}
.mx-lg-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.my-lg-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-lg-1 {
margin: 1rem 1rem !important;
}
.mt-lg-1 {
margin-top: 1rem !important;
}
.mr-lg-1 {
margin-right: 1rem !important;
}
.mb-lg-1 {
margin-bottom: 1rem !important;
}
.ml-lg-1 {
margin-left: 1rem !important;
}
.mx-lg-1 {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
.my-lg-1 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.m-lg-2 {
margin: 2rem 2rem !important;
}
.mt-lg-2 {
margin-top: 2rem !important;
}
.mr-lg-2 {
margin-right: 2rem !important;
}
.mb-lg-2 {
margin-bottom: 2rem !important;
}
.ml-lg-2 {
margin-left: 2rem !important;
}
.mx-lg-2 {
margin-right: 2rem !important;
margin-left: 2rem !important;
}
.my-lg-2 {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
.m-lg-3 {
margin: 3rem 3rem !important;
}
.mt-lg-3 {
margin-top: 3rem !important;
}
.mr-lg-3 {
margin-right: 3rem !important;
}
.mb-lg-3 {
margin-bottom: 3rem !important;
}
.ml-lg-3 {
margin-left: 3rem !important;
}
.mx-lg-3 {
margin-right: 3rem !important;
margin-left: 3rem !important;
}
.my-lg-3 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.m-lg-4 {
margin: 4rem 4rem !important;
}
.mt-lg-4 {
margin-top: 4rem !important;
}
.mr-lg-4 {
margin-right: 4rem !important;
}
.mb-lg-4 {
margin-bottom: 4rem !important;
}
.ml-lg-4 {
margin-left: 4rem !important;
}
.mx-lg-4 {
margin-right: 4rem !important;
margin-left: 4rem !important;
}
.my-lg-4 {
margin-top: 4rem !important;
margin-bottom: 4rem !important;
}
.m-lg-5 {
margin: 5rem 5rem !important;
}
.mt-lg-5 {
margin-top: 5rem !important;
}
.mr-lg-5 {
margin-right: 5rem !important;
}
.mb-lg-5 {
margin-bottom: 5rem !important;
}
.ml-lg-5 {
margin-left: 5rem !important;
}
.mx-lg-5 {
margin-right: 5rem !important;
margin-left: 5rem !important;
}
.my-lg-5 {
margin-top: 5rem !important;
margin-bottom: 5rem !important;
}
.p-lg-0 {
padding: 0 0 !important;
}
.pt-lg-0 {
padding-top: 0 !important;
}
.pr-lg-0 {
padding-right: 0 !important;
}
.pb-lg-0 {
padding-bottom: 0 !important;
}
.pl-lg-0 {
padding-left: 0 !important;
}
.px-lg-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-lg-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-lg-1 {
padding: 1rem 1rem !important;
}
.pt-lg-1 {
padding-top: 1rem !important;
}
.pr-lg-1 {
padding-right: 1rem !important;
}
.pb-lg-1 {
padding-bottom: 1rem !important;
}
.pl-lg-1 {
padding-left: 1rem !important;
}
.px-lg-1 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.py-lg-1 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.p-lg-2 {
padding: 2rem 2rem !important;
}
.pt-lg-2 {
padding-top: 2rem !important;
}
.pr-lg-2 {
padding-right: 2rem !important;
}
.pb-lg-2 {
padding-bottom: 2rem !important;
}
.pl-lg-2 {
padding-left: 2rem !important;
}
.px-lg-2 {
padding-right: 2rem !important;
padding-left: 0.5rem !important;
}
.py-lg-2 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.p-lg-3 {
padding: 3rem 3rem !important;
}
.pt-lg-3 {
padding-top: 3rem !important;
}
.pr-lg-3 {
padding-right: 3rem !important;
}
.pb-lg-3 {
padding-bottom: 3rem !important;
}
.pl-lg-3 {
padding-left: 3rem !important;
}
.px-lg-3 {
padding-right: 3rem !important;
padding-left: 3rem !important;
}
.py-lg-3 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.p-lg-4 {
padding: 4rem 4rem !important;
}
.pt-lg-4 {
padding-top: 4rem !important;
}
.pr-lg-4 {
padding-right: 4rem !important;
}
.pb-lg-4 {
padding-bottom: 4rem !important;
}
.pl-lg-4 {
padding-left: 4rem !important;
}
.px-lg-4 {
padding-right: 4rem !important;
padding-left: 4rem !important;
}
.py-lg-4 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
.p-lg-5 {
padding: 5rem 5rem !important;
}
.pt-lg-5 {
padding-top: 5rem !important;
}
.pr-lg-5 {
padding-right: 5rem !important;
}
.pb-lg-5 {
padding-bottom: 5rem !important;
}
.pl-lg-5 {
padding-left: 5rem !important;
}
.px-lg-5 {
padding-right: 5rem !important;
padding-left: 5rem !important;
}
.py-lg-5 {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
.m-lg-auto {
margin: auto !important;
}
.mt-lg-auto {
margin-top: auto !important;
}
.mr-lg-auto {
margin-right: auto !important;
}
.mb-lg-auto {
margin-bottom: auto !important;
}
.ml-lg-auto {
margin-left: auto !important;
}
.mx-lg-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.my-lg-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
@media (min-width: 1200px) {
.m-xl-0 {
margin: 0 0 !important;
}
.mt-xl-0 {
margin-top: 0 !important;
}
.mr-xl-0 {
margin-right: 0 !important;
}
.mb-xl-0 {
margin-bottom: 0 !important;
}
.ml-xl-0 {
margin-left: 0 !important;
}
.mx-xl-0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.my-xl-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.m-xl-1 {
margin: 1rem 1rem !important;
}
.mt-xl-1 {
margin-top: 1rem !important;
}
.mr-xl-1 {
margin-right: 1rem !important;
}
.mb-xl-1 {
margin-bottom: 1rem !important;
}
.ml-xl-1 {
margin-left: 1rem !important;
}
.mx-xl-1 {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
.my-xl-1 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.m-xl-2 {
margin: 2rem 2rem !important;
}
.mt-xl-2 {
margin-top: 2rem !important;
}
.mr-xl-2 {
margin-right: 2rem !important;
}
.mb-xl-2 {
margin-bottom: 2rem !important;
}
.ml-xl-2 {
margin-left: 2rem !important;
}
.mx-xl-2 {
margin-right: 2rem !important;
margin-left: 2rem !important;
}
.my-xl-2 {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
.m-xl-3 {
margin: 3rem 3rem !important;
}
.mt-xl-3 {
margin-top: 3rem !important;
}
.mr-xl-3 {
margin-right: 3rem !important;
}
.mb-xl-3 {
margin-bottom: 3rem !important;
}
.ml-xl-3 {
margin-left: 3rem !important;
}
.mx-xl-3 {
margin-right: 3rem !important;
margin-left: 3rem !important;
}
.my-xl-3 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.m-xl-4 {
margin: 4rem 4rem !important;
}
.mt-xl-4 {
margin-top: 4rem !important;
}
.mr-xl-4 {
margin-right: 4rem !important;
}
.mb-xl-4 {
margin-bottom: 4rem !important;
}
.ml-xl-4 {
margin-left: 4rem !important;
}
.mx-xl-4 {
margin-right: 4rem !important;
margin-left: 4rem !important;
}
.my-xl-4 {
margin-top: 4rem !important;
margin-bottom: 4rem !important;
}
.m-xl-5 {
margin: 5rem 5rem !important;
}
.mt-xl-5 {
margin-top: 5rem !important;
}
.mr-xl-5 {
margin-right: 5rem !important;
}
.mb-xl-5 {
margin-bottom: 5rem !important;
}
.ml-xl-5 {
margin-left: 5rem !important;
}
.mx-xl-5 {
margin-right: 5rem !important;
margin-left: 5rem !important;
}
.my-xl-5 {
margin-top: 5rem !important;
margin-bottom: 5rem !important;
}
.p-xl-0 {
padding: 0 0 !important;
}
.pt-xl-0 {
padding-top: 0 !important;
}
.pr-xl-0 {
padding-right: 0 !important;
}
.pb-xl-0 {
padding-bottom: 0 !important;
}
.pl-xl-0 {
padding-left: 0 !important;
}
.px-xl-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-xl-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.p-xl-1 {
padding: 1rem 1rem !important;
}
.pt-xl-1 {
padding-top: 1rem !important;
}
.pr-xl-1 {
padding-right: 1rem !important;
}
.pb-xl-1 {
padding-bottom: 1rem !important;
}
.pl-xl-1 {
padding-left: 1rem !important;
}
.px-xl-1 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.py-xl-1 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.p-xl-2 {
padding: 2rem 2rem !important;
}
.pt-xl-2 {
padding-top: 2rem !important;
}
.pr-xl-2 {
padding-right: 2rem !important;
}
.pb-xl-2 {
padding-bottom: 2rem !important;
}
.pl-xl-2 {
padding-left: 2rem !important;
}
.px-xl-2 {
padding-right: 2rem !important;
padding-left: 2rem !important;
}
.py-xl-2 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.p-xl-3 {
padding: 3rem 3rem !important;
}
.pt-xl-3 {
padding-top: 3rem !important;
}
.pr-xl-3 {
padding-right: 3rem !important;
}
.pb-xl-3 {
padding-bottom: 3rem !important;
}
.pl-xl-3 {
padding-left: 3rem !important;
}
.px-xl-3 {
padding-right: 3rem !important;
padding-left: 3rem !important;
}
.py-xl-3 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.p-xl-4 {
padding: 4rem 4rem !important;
}
.pt-xl-4 {
padding-top: 4rem !important;
}
.pr-xl-4 {
padding-right: 4rem !important;
}
.pb-xl-4 {
padding-bottom: 4rem !important;
}
.pl-xl-4 {
padding-left: 4rem !important;
}
.px-xl-4 {
padding-right: 4rem !important;
padding-left: 4rem !important;
}
.py-xl-4 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
.p-xl-5 {
padding: 5rem 5rem !important;
}
.pt-xl-5 {
padding-top: 5rem !important;
}
.pr-xl-5 {
padding-right: 5rem !important;
}
.pb-xl-5 {
padding-bottom: 5rem !important;
}
.pl-xl-5 {
padding-left: 5rem !important;
}
.px-xl-5 {
padding-right: 5rem !important;
padding-left: 5rem !important;
}
.py-xl-5 {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
.m-xl-auto {
margin: auto !important;
}
.mt-xl-auto {
margin-top: auto !important;
}
.mr-xl-auto {
margin-right: auto !important;
}
.mb-xl-auto {
margin-bottom: auto !important;
}
.ml-xl-auto {
margin-left: auto !important;
}
.mx-xl-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.my-xl-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
/*
clearfix [
----------------------------------------------------------- */
/* For modern browsers */
.cf:before, .cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
/* **************************************************
/*
/*    Name: icon font.css
/*
***************************************************** */
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?zcoeeh');
src: url('../fonts/icomoon.eot?zcoeeh#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?zcoeeh') format('truetype'), url('../fonts/icomoon.woff?zcoeeh') format('woff'), url('../fonts/icomoon.svg?zcoeeh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-pocket:before {
content: "\e900";
}
.icon-hatena:before {
content: "\e901";
}
.icon-line:before {
content: "\e902";
}
.icon-wechat:before {
content: "\e903";
}
.icon-share:before {
content: "\ea82";
}
.icon-facebook:before {
content: "\ea90";
}
.icon-instagram:before {
content: "\ea92";
}
.icon-twitter:before {
content: "\ea96";
}
.icon-sina-weibo:before {
content: "\ea9a";
}
.icon-youtube:before {
content: "\ea9d";
}
.icon-linkedin:before {
content: "\eaca";
}
.icon-pinterest:before {
content: "\ead1";
}
.icon-x:before {
content: "\e904";
}

.snsShareArea i {
margin-right: 5px;
}
/* **************************************************
/*
/*    Name: state.css
/*
/*    Description: javascript Settings
/*
/*
***************************************************** */
/* ===================================

1: swiper

====================================== */
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
z-index: 1
}
.swiper-container-no-flexbox .swiper-slide {
float: left
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative
}
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: auto
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform
}
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000
}
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x
}
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
opacity: .35;
cursor: auto;
pointer-events: none
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto
}
.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto
}
.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: .2
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000
}
.swiper-container-vertical > .swiper-pagination {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0)
}
.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
margin: 5px 0;
display: block
}
.swiper-container-horizontal > .swiper-pagination {
bottom: 15px;
left: 0;
width: 100%
}
.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
margin: 0 5px
}
.swiper-container-3d {
-webkit-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px
}
.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}
.swiper-container-coverflow .swiper-wrapper {
-ms-perspective: 1200px
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out
}
.swiper-container-fade .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none
}
.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto
}
.swiper-container-cube {
overflow: visible
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
visibility: hidden;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
z-index: 1
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0
}
.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible
}
.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0
}
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, .1)
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, .5);
border-radius: 10px;
left: 0;
top: 0
}
.swiper-scrollbar-cursor-drag {
cursor: move
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
/*#slider {
margin-bottom:30px;
}*/
/* swiper-container
------------------------------------------ */
.swiper-container {
max-width: 1160px;
margin: 0px auto;
overflow: hidden;
width: 100%;
}
.cover_wrap .swiper-container {
max-width: inherit;
height: 100%;
}
.swiper-container.comp__design {
border-top: 1px solid #ccc;
}
.cover_wrap .swiper-slide {
height: calc(100vh);
min-height: 600px;
max-height: 1000px;
background-size: cover;
background-position: bottom center;
}
.swiper-slide {
background-size: cover;
background-position: bottom center;
}
.swiper-container .slide-inner {
margin: 0;
}
.swiper-container.comp__design .slide-inner figcaption {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
color: #7E7E7E;
}
.swiper-container.comp__design .slide-inner img {
border-bottom: 1px solid #ccc;
}
.swiper-slide-next, .swiper-slide-prev {
opacity: 0.5;
}
.swiper-slide a:hover, .swiper-pagination-bullet:hover {
opacity: 0.7;
}
.slide-control {
position: absolute;
top: -27px;
margin: 0 auto 10px;
display: block;
width: auto;
text-align: left;
padding: 0;
z-index: 50;
}
.swiper-button-prev {
position: relative;
width: 40px !important;
height: 40px !important;
background-size: 8px;
background-repeat: no-repeat;
left: inherit;
z-index: 5550;
background-color: #fff;
right: inherit;
display: inline-block;
top: inherit;
margin: 0;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next {
position: relative;
width: 40px !important;
height: 40px !important;
background-size: 8px;
background-repeat: no-repeat;
right: inherit;
z-index: 5550;
background-color: #2E344F;
left: inherit;
top: inherit;
margin: 0;
display: inline-block;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
}
.swiper-button-next:hover, .swiper-button-prev:hover {
opacity: 0.7;
}
.swiper-container-horizontal > .swiper-pagination {
right: 20px;
width: auto;
left: auto;
bottom: 20px;
}
.comp__product_kv .swiper-container.swiper-container-horizontal > .swiper-pagination {
right: 20px;
left: inherit;
}
.swiper-container.comp__design.swiper-container-horizontal > .swiper-pagination {
bottom: auto;
position: relative;
text-align: right;
margin-bottom: 0;
padding-top: 10px;
right: auto;
}
.swiper-container .swiper-pagination-bullet {
width: 40px;
height: 10px;
margin: 0 6px !important;
opacity: 1;
background-color: #CCCCCC;
border-radius: 0;
}
.swiper-container .swiper-pagination-bullet-active {
width: 40px;
height: 10px;
margin: 0 6px !important;
opacity: 1;
background-color: #D9D900;
}
.gallery-thumbs {
height: 100px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
background-size: cover;
background-position: center;
cursor: pointer;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.gallery-top img {
width: 100%;
height: auto;
}
@media only screen and (max-width: 576px) {
/* swiper-container
------------------------------------------ */
.cover_wrap .swiper-slide {
height: calc(100vh);
min-height: inherit;
max-height: 400px;
background-size: cover;
background-position: bottom center;
}
.swiper-container .swiper-pagination-bullet-active {
width: 30px;
height: 6px;
}
.swiper-container .swiper-pagination-bullet {
width: 30px;
height: 6px;
}
.swiper-button-next, .swiper-button-prev {
top: inherit;
bottom: 16px;
}
.swiper-slide a:hover, .swiper-pagination-bullet:hover {
opacity: 0.7;
}
.swiper-button-prev {
width: 30px !important;
height: 30px !important;
}
.swiper-button-next {
width: 30px !important;
height: 30px !important;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
opacity: 0.7;
}
}
/* ===================================

4: Modal

====================================== */
.mfp-bg {
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
overflow: hidden;
position: fixed;
color: #fff;
background: #374252;
opacity: 0.96;
filter: alpha(opacity=90);
}
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: block;
color: #000;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
}
.mfp-container {
display: table;
max-width: 1140px;
height: 100%;
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
table-layout: fixed;
}
.mfp-align-top .mfp-container:before {
display: none;
}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
display: table-cell;
vertical-align: middle;
width: 100%;
}
/* contents
----------------------------------------------*/
.modal__contents {
overflow: auto;
max-height: calc(100vh - 170px);
padding: 0 6%;
text-align: left;
}
/* IE8 */
.modal__contents {
padding: 0 6%;
text-align: left;
}
.modal__contents::-webkit-scrollbar-track {
background-color: #EEEEEE;
}
.modal__contents::-webkit-scrollbar-thumb {
background-color: #B19B61;
}
.modal__contents::-webkit-scrollbar {
width: 10px;
background-color: #EEEEEE;
}
.modal__contents_innner.innertaC > p, .modal__contents_innner.innertaC > h3 {
text-align: center !important;
}
.modal__contents_innner p {
line-height: 2;
}
.modal__contents * {
color: #fff;
text-align: left;
}
.modal__contents_innner figure {
margin-bottom: 20px;
text-align: center;
width: inherit;
}
.modal__contents_innner img {
max-width: 100%;
height: auto;
}
.modal__contents .movie-area {
position: relative;
width: 80%;
padding-bottom: 45%;
margin: 0 auto;
}
/* comp__partslist
----------------------------------------------*/
dl.comp__partslist, .comp__partslist dt, .comp__partslist dd {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
dl.comp__partslist {
margin-bottom: 20px;
border-top: 1px solid #A19D9D;
}
.comp__partslist dt, .comp__partslist dd {
padding: 5px 0;
margin-bottom: 0;
}
.comp__partslist dt {
width: 80%;
float: left;
font-weight: 400;
}
.comp__partslist dd {
padding-left: 80%;
border-bottom: 1px solid #A19D9D;
text-align: right;
}
.comp__partslist dd:after {
content: '';
display: block;
clear: both;
}
@media screen and (max-width: 575px) {
.partslist dt {
padding: 15px 0 0;
margin-bottom: 0;
font-size: 1.4rem;
width: 100%;
float: none;
}
.partslist dd {
padding: 0 0 15px 0;
margin-bottom: 0;
font-size: 1.4rem;
width: 100%;
float: none;
}
}
/* comp__icon
----------------------------------------------*/
.comp__iconmodal .comp__iconmodal_item {
margin-bottom: 3rem;
}
.comp__iconmodal dl {
margin-bottom: 0;
}
.comp__iconmodal dt {
font-size: 1.8rem;
margin-bottom: 10px;
line-height: 1;
}
.comp__iconmodal dd {
font-size: 1.3rem;
}
.comp__iconmodal p {
margin-bottom: 0;
text-align: center;
}
.comp__iconmodal img {
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%);
max-height: 40px;
}
.mfp-ajax-cur {
cursor: progress;
}
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -webkit-zoom-out;
cursor: zoom-out;
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
cursor: auto;
display: table-cell;
vertical-align: middle;
}
/* close
----------------------------------------------*/
.modal__close {
margin: 0 0;
margin-top: 0;
padding-top: 30px;
text-align: center;
}
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mfp-loading.mfp-figure {
display: none;
}
.mfp-hide {
display: none !important;
}
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044;
}
.mfp-preloader a {
color: #CCC;
}
.mfp-preloader a:hover {
color: #FFF;
}
.mfp-s-ready .mfp-preloader {
display: none;
}
.mfp-s-error .mfp-content {
display: none;
}
button.mfp-close, button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
-webkit-box-shadow: none;
box-shadow: none;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
.mfp-close {
position: absolute;
right: 50%;
left: 50%;
text-decoration: none;
text-align: center;
padding: 0 0 0 0;
}
.mfp-close:hover, .mfp-close:focus {
opacity: 1;
filter: alpha(opacity=100);
}
.mfp-close:active {
top: 1px;
}
.mfp-close:hover, .mfp-close:focus {
opacity: 0.80;
filter: alpha(opacity=80);
}
.mfp-close:active {}
.mfp-close-btn-in .mfp-close {
color: #333;
}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: #000;
width: 100%;
}
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #CCC;
font-size: 12px;
line-height: 18px;
white-space: nowrap;
}
.mfp-arrow {
position: absolute;
opacity: 1.0;
filter: alpha(opacity=100);
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
margin-top: -54px;
}
.mfp-arrow:hover, .mfp-arrow:focus {
opacity: 0.65;
filter: alpha(opacity=65);
}
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
content: '';
}
.mfp-arrow-left {
left: 0;
}
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
left: 40px;
width: 20px;
height: 20px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.mfp-arrow-right {
right: 0;
}
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
left: 15px;
width: 20px;
height: 20px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 96%;
}
.mfp-iframe-holder .mfp-close {
top: -40px;
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
padding-top: 56.25%;
position: relative;
}
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto;
}
/* The shadow behind the image */
.mfp-figure {
line-height: 0;
}
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444;
}
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure {
margin: 0;
}
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto;
}
.mfp-title {
text-align: left;
line-height: 18px;
color: #F3F3F3;
word-wrap: break-word;
padding-right: 36px;
}
.mfp-image-holder .mfp-content {
max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
padding: 0;
}
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0;
}
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0;
}
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px;
}
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0;
}
}
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0;
}
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.modal__contents .c-glid__item--4 img {
width: 140px;
height: auto;
}
.mfp-arrow {
top: inherit;
bottom: 10px;
}
}
.mfp-ie7 .mfp-img {
padding: 0;
}
.mfp-ie7 .mfp-bottom-bar {
width: 600px;
left: 50%;
margin-left: -300px;
margin-top: 5px;
padding-bottom: 5px;
}
.mfp-ie7 .mfp-container {
padding: 0;
}
.mfp-ie7 .mfp-content {
padding-top: 44px;
}
.mfp-ie7 .mfp-close {
top: 0;
right: 0;
padding-top: 0;
}
#modal__close__button {
position: relative;
display: block;
width: 52px;
height: 52px;
margin: 0 auto;
cursor: pointer;
}
/*animations*/
/******************
* Bounce in right *
*******************/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
/* Added by Andy Meetan */
.delay-250 {
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
.delay-500 {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.delay-750 {
-webkit-animation-delay: 0.75s;
animation-delay: 0.75s;
}
.delay-1000 {
-webkit-animation-delay: 1.0s;
animation-delay: 1.0s;
}
.delay-1250 {
-webkit-animation-delay: 1.25s;
animation-delay: 1.25s;
}
.delay-1500 {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.delay-1750 {
-webkit-animation-delay: 1.75s;
animation-delay: 1.75s;
}
.delay-2000 {
-webkit-animation-delay: 2.0s;
animation-delay: 2.0s;
}
.delay-2500 {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.delay-2000 {
-webkit-animation-delay: 2.0s;
animation-delay: 2.0s;
}
.delay-2500 {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.delay-3000 {
-webkit-animation-delay: 3.0s;
animation-delay: 3.0s;
}
.delay-3500 {
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
}
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
from {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes wobble {
from {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: none;
transform: none;
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}
to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
}
@-webkit-keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.jackInTheBox {
-webkit-animation-name: jackInTheBox;
animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
transform: scale(.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(.1) translate3d(2000px, 0, 0);
transform: scale(.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
/*****************
* Short Animations
*******************/
/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInUpShort {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUpShort {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
.fadeInUpShort.go {
-webkit-animation-name: fadeInUpShort;
animation-name: fadeInUpShort;
}
/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInDownShort {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDownShort {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
.fadeInDownShort.go {
-webkit-animation-name: fadeInDownShort;
animation-name: fadeInDownShort;
}
/*********************
* fadeInRightShort
*********************/
@-webkit-keyframes fadeInRightShort {
0% {
opacity: 0;
-webkit-transform: translateX(40px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInRightShort {
0% {
opacity: 0;
-webkit-transform: translateX(40px);
transform: translateX(40px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRightShort {
opacity: 0;
-webkit-transform: translateX(40px);
transform: translateX(40px);
}
.fadeInRightShort.go {
-webkit-animation-name: fadeInRightShort;
animation-name: fadeInRightShort;
}
/*********************
* fadeInLeftShort
*********************/
@-webkit-keyframes fadeInLeftShort {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeInLeftShort {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeftShort {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
.fadeInLeftShort.go {
-webkit-animation-name: fadeInLeftShort;
animation-name: fadeInLeftShort;
}
/*********************
* slideaction
*********************/
.u-animation.go:before {
-webkit-animation-name: obiStart, obiEnd;
animation-name: obiStart, obiEnd;
-webkit-animation-duration: .5s, .5s;
animation-duration: .5s, .5s;
-webkit-animation-timing-function: cubic-bezier(.86, 0, .07, 1), cubic-bezier(.86, 0, .07, 1);
animation-timing-function: cubic-bezier(.86, 0, .07, 1), cubic-bezier(.86, 0, .07, 1);
-webkit-animation-delay: 0s, .5s;
animation-delay: 0s, .5s;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
.u-animation.go .u-animation__inner {
-webkit-animation-name: obiInner;
animation-name: obiInner;
-webkit-animation-duration: 0s;
animation-duration: 0s;
-webkit-animation-delay: .5s;
animation-delay: .5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.u-animation--1.go:before {
-webkit-animation-delay: .1s, .7s;
animation-delay: .1s, .7s
}
.u-animation--1.go .u-animation__inner {
-webkit-animation-delay: .7s;
animation-delay: .7s
}
.u-animation--2.go:before {
-webkit-animation-delay: .2s, .8s;
animation-delay: .2s, .8s
}
.u-animation--2.go .u-animation__inner {
-webkit-animation-delay: .8s;
animation-delay: .8s
}
.u-animation--3.go:before {
-webkit-animation-delay: .3s, .9s;
animation-delay: .3s, .9s
}
.u-animation--3.go .u-animation__inner {
-webkit-animation-delay: .9s;
animation-delay: .9s
}
.u-animation--4.go:before {
-webkit-animation-delay: .4s, 1s;
animation-delay: .4s, 1s
}
.u-animation--4.go .u-animation__inner {
-webkit-animation-delay: 1s;
animation-delay: 1s
}
.u-animation--5.go:before {
-webkit-animation-delay: .5s, 1.1s;
animation-delay: .5s, 1.1s
}
.u-animation--5.go .u-animation__inner {
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s
}
.u-animation--6.go:before {
-webkit-animation-delay: .6s, 1.2s;
animation-delay: .6s, 1.2s
}
.u-animation--6.go .u-animation__inner {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s
}
.u-animation--7.go:before {
-webkit-animation-delay: .7s, 1.3s;
animation-delay: .7s, 1.3s
}
.u-animation--7.go .u-animation__inner {
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s
}
.u-animation--8.go:before {
-webkit-animation-delay: .8s, 1.4s;
animation-delay: .8s, 1.4s
}
.u-animation--8.go .u-animation__inner {
-webkit-animation-delay: 1.4s;
animation-delay: 1.4s
}
.u-animation--9.go:before {
-webkit-animation-delay: .9s, 1.5s;
animation-delay: .9s, 1.5s
}
.u-animation--9.go .u-animation__inner {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s
}
.u-animation--10.go:before {
-webkit-animation-delay: 1s, 1.6s;
animation-delay: 1s, 1.6s
}
.u-animation--10.go .u-animation__inner {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s
}
.u-animation--11.go:before {
-webkit-animation-delay: 1.1s, 1.7s;
animation-delay: 1.1s, 1.7s
}
.u-animation--11.go .u-animation__inner {
-webkit-animation-delay: 1.7s;
animation-delay: 1.7s
}
.u-animation--12.go:before {
-webkit-animation-delay: 1.2s, 1.8s;
animation-delay: 1.2s, 1.8s
}
.u-animation--12.go .u-animation__inner {
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s
}
.u-animation {
display: inline-block;
position: relative;
overflow: hidden;
background-color: transparent !important;
padding: 0 !important;
}
.u-animation:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #17A57E;
-webkit-transform: translateX(-101%);
transform: translateX(-101%);
top: 0;
left: 0;
z-index: 150;
}
.u-animation--full {
display: block !important;
}
@media(min-width:1024px) {
.u-animation--mdIb {
display: inline-block !important;
}
}
@media(min-width:1024px) {
.u-animation--mdfull {
display: block!important;
}
}
.u-animation__inner {
opacity: 0;
padding: 0;
}
@-webkit-keyframes obiInner {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes obiInner {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes obiStart {
0% {
-webkit-transform: translateX(-101%);
transform: translateX(-101%)
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@keyframes obiStart {
0% {
-webkit-transform: translateX(-101%);
transform: translateX(-101%)
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
}
@-webkit-keyframes obiEnd {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(101%);
transform: translateX(101%)
}
}
@keyframes obiEnd {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(101%);
transform: translateX(101%)
}
}
/* ===================================

e:print

====================================== */
@media print {
#container.megamenu--bg:before {
background-color: transparent !important;
}
.breadcrumbs {
display: none;
}
header {
height: auto;
}
#header {
z-index: 500;
top: 0;
left: 0;
width: 100%;
height: auto;
position: relative;
}
.comp__product_item .col-item .txt {
height: auto !important;
}
#logo {
margin-left: 0;
margin-bottom: 20px;
}
.hidden {
display: block !important;
}
header {
background-color: transparent;
}
.header_p #contents {
padding-top: 30px;
}
.lazyload, .lazyloading {
opacity: 1 !important;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
}
.lazyloaded {
opacity: 1;
-webkit-transition: unset;
transition: unset;
}
.mainlytile_container .row > div:nth-child(2) a .txt, .mainlytile_container .row > div:nth-child(5) a .txt, .mainlytile_container .row > div:nth-child(8) a .txt, .mainlytile_container .row > div:nth-child(11) a .txt, .mainlytile_container .row > div:nth-child(14) a .txt, .mainlytile_container .row > div:nth-child(17) a .txt{
height: auto !important;
}
#section--basic.page.header_p .content--basic-padding {
padding-top: 30px;
padding-bottom: 30px;
}
.content--3quarter-padding {
padding: 20px 0;
}
.mainlytile_container.news a .txt {
height: auto !important;
}
#header #header--bg {
position: relative;
z-index: 2;
padding: 0;
height: auto;
}
#header #header--bg:before {
display: none;
}
.js-toggle > dt {
display: none;
}
.js-toggle > dd {
display: none;
}

.js-toggle.cv > dt.is-active {
display: block;
background-color: #DFDFDF;
color: #000;
border-bottom: none;
font-size: 1.4rem;
font-weight: 500;
padding: 12px 10px 12px 10px;
}
.js-toggle.cv > dt.is-active a {
color: #000;
}
.js-toggle.cv > dt.is-active span {
display: none;
}
.js-toggle > dt.is-active span {
display: none;
}
dl.js-toggle.cv i {
font-weight: 500;
}
.js-toggle > dd.is-active {
display: block;
}
.js-toggle.cv > dt {
display: none;
}
.js-toggle.cv > dd {
display: none;
}
.js-toggle.cv > dt.is-active {
display: block;
}
.js-toggle.cv > dd.is-active {
display: block;
}
.col-2dot4, .col-sm-2dot4, .col-md-2dot4, .col-lg-2dot4, .col-xl-2dot4 {
padding-right: 5px;
padding-left: 5px;
}
.hero_wrap {
display: block;
height: auto;
min-height: auto;
background-image: none !important;
background-color: transparent;
}
.hero__valign {
display: block;
color: #000;
padding: 0 20px;
}
.bg_theme-bk {
background-color: transparent !important;
color: #000;
padding-top: 60px;
}
.hero_wrap h1 {
font-size: 2.4rem;
}
a.cover__arrow {
display: none;
}
.hero_wrap:after {
display: none;
}
.sp_none.w100p {
display: none !important;
}
.comp__cv_item dl {
font-size: 1.0rem;
}
.btn.linegray > * {
font-size: 10px;
padding: 3px 0 !important;
}
.comp__cv_item h3 {
font-size: 1.3rem;
}
.comp__cv_item h3 i {
font-size: 1.5rem;
}
.comp__cv_item h3 span {
font-size: 1.0rem;
}
.comp__cv_item h4 {
font-size: 1.2rem;
}
.comp__cv_item dd {
padding-left: 40%;
padding-bottom: 0;
}
.comp__cv_item dt {
width: 40%;
font-weight: normal;
padding: 0;
}
.comp__cv_item p {
margin-bottom: 30px;
font-size: 1.0rem;
}
.container {
padding-right: 0;
padding-left: 0;
}
.row {
margin-right: 0;
margin-left: 0;
}
.comp__resultItem .fav {
display: none;
}
.comp__resultItem .comp__resultItem_ttl li {
margin-right: 0;
}
.ttl--Xxl {
font-size: 2.4rem;
margin-bottom: 1.5rem;
color: #000;
}
.comp__cta {
display: none;
}
div#footer {
display: none;
}
.floatingNav {
display: none;
}
footer {
clear: both;
position: relative;
background-color: transparent;
border-top: none;
}
.pagetop {
display: none !important;
}
#footer-end ul li {
display: none;
}
p.footer-copy {
color: #000;
}
a, a:visited {
text-decoration: underline;
}
* {
text-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a, a:visited {
text-decoration: underline;
}
div#container {}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.col-sm {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-sm-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.col-sm-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-sm-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-sm-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-sm-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-sm-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-sm-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-sm-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-sm-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-sm-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-sm-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-sm-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-sm-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.pull-sm-0 {
right: auto;
}
.pull-sm-1 {
right: 8.333333%;
}
.pull-sm-2 {
right: 16.666667%;
}
.pull-sm-3 {
right: 25%;
}
.pull-sm-4 {
right: 33.333333%;
}
.pull-sm-5 {
right: 41.666667%;
}
.pull-sm-6 {
right: 50%;
}
.pull-sm-7 {
right: 58.333333%;
}
.pull-sm-8 {
right: 66.666667%;
}
.pull-sm-9 {
right: 75%;
}
.pull-sm-10 {
right: 83.333333%;
}
.pull-sm-11 {
right: 91.666667%;
}
.pull-sm-12 {
right: 100%;
}
.push-sm-0 {
left: auto;
}
.push-sm-1 {
left: 8.333333%;
}
.push-sm-2 {
left: 16.666667%;
}
.push-sm-3 {
left: 25%;
}
.push-sm-4 {
left: 33.333333%;
}
.push-sm-5 {
left: 41.666667%;
}
.push-sm-6 {
left: 50%;
}
.push-sm-7 {
left: 58.333333%;
}
.push-sm-8 {
left: 66.666667%;
}
.push-sm-9 {
left: 75%;
}
.push-sm-10 {
left: 83.333333%;
}
.push-sm-11 {
left: 91.666667%;
}
.push-sm-12 {
left: 100%;
}
.offset-sm-0 {
margin-left: 0%;
}
.offset-sm-1 {
margin-left: 8.333333%;
}
.offset-sm-2 {
margin-left: 16.666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
margin-left: 33.333333%;
}
.offset-sm-5 {
margin-left: 41.666667%;
}
.offset-sm-6 {
margin-left: 50%;
}
.offset-sm-7 {
margin-left: 58.333333%;
}
.offset-sm-8 {
margin-left: 66.666667%;
}
.offset-sm-9 {
margin-left: 75%;
}
.offset-sm-10 {
margin-left: 83.333333%;
}
.offset-sm-11 {
margin-left: 91.666667%;
}
.col-md {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-md-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.col-md-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-md-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-md-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-md-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-md-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-md-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-md-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-md-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-md-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-md-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-md-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.pull-md-0 {
right: auto;
}
.pull-md-1 {
right: 8.333333%;
}
.pull-md-2 {
right: 16.666667%;
}
.pull-md-3 {
right: 25%;
}
.pull-md-4 {
right: 33.333333%;
}
.pull-md-5 {
right: 41.666667%;
}
.pull-md-6 {
right: 50%;
}
.pull-md-7 {
right: 58.333333%;
}
.pull-md-8 {
right: 66.666667%;
}
.pull-md-9 {
right: 75%;
}
.pull-md-10 {
right: 83.333333%;
}
.pull-md-11 {
right: 91.666667%;
}
.pull-md-12 {
right: 100%;
}
.push-md-0 {
left: auto;
}
.push-md-1 {
left: 8.333333%;
}
.push-md-2 {
left: 16.666667%;
}
.push-md-3 {
left: 25%;
}
.push-md-4 {
left: 33.333333%;
}
.push-md-5 {
left: 41.666667%;
}
.push-md-6 {
left: 50%;
}
.push-md-7 {
left: 58.333333%;
}
.push-md-8 {
left: 66.666667%;
}
.push-md-9 {
left: 75%;
}
.push-md-10 {
left: 83.333333%;
}
.push-md-11 {
left: 91.666667%;
}
.push-md-12 {
left: 100%;
}
.offset-md-0 {
margin-left: 0%;
}
.offset-md-1 {
margin-left: 8.333333%;
}
.offset-md-2 {
margin-left: 16.666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
margin-left: 33.333333%;
}
.offset-md-5 {
margin-left: 41.666667%;
}
.offset-md-6 {
margin-left: 50%;
}
.offset-md-7 {
margin-left: 58.333333%;
}
.offset-md-8 {
margin-left: 66.666667%;
}
.offset-md-9 {
margin-left: 75%;
}
.offset-md-10 {
margin-left: 83.333333%;
}
.offset-md-11 {
margin-left: 91.666667%;
}
.col-lg {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-lg-auto {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.col-lg-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-lg-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-lg-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-lg-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-lg-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-lg-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-lg-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-lg-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-lg-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-lg-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-lg-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-lg-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.pull-lg-0 {
right: auto;
}
.pull-lg-1 {
right: 8.333333%;
}
.pull-lg-2 {
right: 16.666667%;
}
.pull-lg-3 {
right: 25%;
}
.pull-lg-4 {
right: 33.333333%;
}
.pull-lg-5 {
right: 41.666667%;
}
.pull-lg-6 {
right: 50%;
}
.pull-lg-7 {
right: 58.333333%;
}
.pull-lg-8 {
right: 66.666667%;
}
.pull-lg-9 {
right: 75%;
}
.pull-lg-10 {
right: 83.333333%;
}
.pull-lg-11 {
right: 91.666667%;
}
.pull-lg-12 {
right: 100%;
}
.push-lg-0 {
left: auto;
}
.push-lg-1 {
left: 8.333333%;
}
.push-lg-2 {
left: 16.666667%;
}
.push-lg-3 {
left: 25%;
}
.push-lg-4 {
left: 33.333333%;
}
.push-lg-5 {
left: 41.666667%;
}
.push-lg-6 {
left: 50%;
}
.push-lg-7 {
left: 58.333333%;
}
.push-lg-8 {
left: 66.666667%;
}
.push-lg-9 {
left: 75%;
}
.push-lg-10 {
left: 83.333333%;
}
.push-lg-11 {
left: 91.666667%;
}
.push-lg-12 {
left: 100%;
}
.offset-lg-0 {
margin-left: 0%;
}
.offset-lg-1 {
margin-left: 8.333333%;
}
.offset-lg-2 {
margin-left: 16.666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
margin-left: 33.333333%;
}
.offset-lg-5 {
margin-left: 41.666667%;
}
.offset-lg-6 {
margin-left: 50%;
}
.offset-lg-7 {
margin-left: 58.333333%;
}
.offset-lg-8 {
margin-left: 66.666667%;
}
.offset-lg-9 {
margin-left: 75%;
}
.offset-lg-10 {
margin-left: 83.333333%;
}
.offset-lg-11 {
margin-left: 91.666667%;
}
/*    .col-xl {
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.col-xl-auto {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
}
.col-xl-1 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 8.333333%;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-xl-2 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.666667%;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-xl-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-xl-4 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.333333%;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-xl-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 41.666667%;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-xl-6 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-xl-7 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.333333%;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-xl-8 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.666667%;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-xl-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-xl-10 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 83.333333%;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-xl-11 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 91.666667%;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-xl-12 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}*/
.pull-xl-0 {
right: auto;
}
.pull-xl-1 {
right: 8.333333%;
}
.pull-xl-2 {
right: 16.666667%;
}
.pull-xl-3 {
right: 25%;
}
.pull-xl-4 {
right: 33.333333%;
}
.pull-xl-5 {
right: 41.666667%;
}
.pull-xl-6 {
right: 50%;
}
.pull-xl-7 {
right: 58.333333%;
}
.pull-xl-8 {
right: 66.666667%;
}
.pull-xl-9 {
right: 75%;
}
.pull-xl-10 {
right: 83.333333%;
}
.pull-xl-11 {
right: 91.666667%;
}
.pull-xl-12 {
right: 100%;
}
.push-xl-0 {
left: auto;
}
.push-xl-1 {
left: 8.333333%;
}
.push-xl-2 {
left: 16.666667%;
}
.push-xl-3 {
left: 25%;
}
.push-xl-4 {
left: 33.333333%;
}
.push-xl-5 {
left: 41.666667%;
}
.push-xl-6 {
left: 50%;
}
.push-xl-7 {
left: 58.333333%;
}
.push-xl-8 {
left: 66.666667%;
}
.push-xl-9 {
left: 75%;
}
.push-xl-10 {
left: 83.333333%;
}
.push-xl-11 {
left: 91.666667%;
}
.push-xl-12 {
left: 100%;
}
.offset-xl-0 {
margin-left: 0%;
}
.offset-xl-1 {
margin-left: 8.333333%;
}
.offset-xl-2 {
margin-left: 16.666667%;
}
.offset-xl-3 {
margin-left: 25%;
}
.offset-xl-4 {
margin-left: 33.333333%;
}
.offset-xl-5 {
margin-left: 41.666667%;
}
.offset-xl-6 {
margin-left: 50%;
}
.offset-xl-7 {
margin-left: 58.333333%;
}
.offset-xl-8 {
margin-left: 66.666667%;
}
.offset-xl-9 {
margin-left: 75%;
}
.offset-xl-10 {
margin-left: 83.333333%;
}
.offset-xl-11 {
margin-left: 91.666667%;
}
.col-2dot4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.col-sm-2dot4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.col-md-2dot4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.col-lg-2dot4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.col-xl-2dot4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
.col-1dot2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
}
.col-sm-1dot2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
}
.col-md-1dot2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
}
.col-lg-1dot2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
}
.col-xl-1dot2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
}
@-webkit-keyframes fadeInUpShort {
0% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
100% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
}
@keyframes fadeInUpShort {
0% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
100% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
}
.fadeInUpShort {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
.animated {
opacity: 1 !important;
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn {
opacity: 1;
}
.u-animation__inner {
opacity: 1!important;
padding: 0!important;
}
.u-animation {
display: inline-block;
position: relative;
overflow: hidden;
background-color: transparent !important;
padding: 0 !important;
}
.u-animation:before {
content: '';
display: block !important;
position: absolute;
width: 100%;
height: 100%;
background-color: none;
-webkit-transform: translateX(-101%);
transform: translateX(-101%);
top: 0;
left: 0;
z-index: 150;
}
@-webkit-keyframes obiInner {
0% {
opacity: 1
}
100% {
opacity: 1
}
}
@keyframes obiInner {
0% {
opacity: 1
}
100% {
opacity: 1
}
}
@-webkit-keyframes obiStart {
0% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
100% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
}
@keyframes obiStart {
0% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
100% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
}
@-webkit-keyframes obiEnd {
0% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
100% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
}
@keyframes obiEnd {
0% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
100% {
opacity: 1 !important;
-webkit-transform: translateY(0) !important;
transform: translateY(0) !important;
}
}
nav {
display: none;
}
}