@charset "utf-8";

/* slider */
.slider { max-height:100%; position:relative;}
.slider .main-slider {
	position:relative;
	width:100%;
}
.slider .main-slider .slider-img {
	background:url('../img/mainSlider.jpg') 0px 0px no-repeat;
	background-size:cover;
	max-width:100%;
	height:800px;
	background-position:0px 0px;
	-webkit-transition:all 0.3s;transition: all 0.3s;
}

.slider .main-slider .slider-txt {
	position:absolute;
	top:36%;
	width:100%;
}
.slider-txt .slider-txt-box {
	width:100%;
	max-width:1100px;
	margin:0 auto;
	color:#fff;
	text-align:left;
}

.slider-txt-box h3 {font-size:1.875rem; line-height:1.875rem; text-shadow: 0px 0px 4px #000; margin-bottom:5px; font-family:'WF Godo'}
.slider-txt-box h1 {font-size:2.25rem; line-height:2.25rem; text-shadow:0px 0px 4px #000; margin-bottom:30px;} 
.slider-txt-box span.company {font-family: "Open Sans", Helvetica, Arial, sans-serif; letter-spacing:1px; font-size: 1.2rem; padding: 10px 10px; background: rgba(0, 92, 202, .65); }
@media only screen and (max-width:1400px) {
	.slider .main-slider .slider-img {height:700px;}
}
@media only screen and (max-width:1200px) {
	.slider .main-slider .slider-img {height:600px;}
}

@media only screen and (max-width:1100px) {
	.slider-txt .slider-txt-box {padding-left:20px;}
}
@media only screen and (max-width:1000px) {
	.slider .main-slider .slider-img {height:500px;}
}
@media only screen and (max-width:768px) {
	.slider .main-slider .slider-img {height:700px; background-position:-590px;}
	.slider-txt .slider-txt-box {padding-left:0px; text-align:center;}
}
@media only screen and (max-width:600px) {
	.slider .main-slider .slider-img {height:700px; background-position:-650px;}
	.slider-txt-box h3 {font-size:1.5rem;}
	.slider-txt-box h1 {font-size:1.875rem;}
	.slider-txt-box h1 span {display:block;}
}
@media only screen and (max-width:500px) {
	.slider .main-slider .slider-img {height:700px; background-position:-720px;}
}
@media only screen and (max-width:400px) {
	.slider .main-slider .slider-img {height:700px; background-position:-880px;}
}


/* mouse mover */
.mouse-mover {display:block;position:absolute;width:66px;height:100px;left:50%;bottom:100px;margin:0 0 0 -33px;z-index:100;}
.mouse-mover div {position:absolute; animation:mouse_action 1s infinite; animation-timing-function:linear;display:block;width:100%;height:66px;left:0;bottom:0;background:url('../img/mouse_scroll.png') no-repeat center center;}
@keyframes mouse_action{
	0%{bottom:0;animation-timing-function:ease;}
	50%{bottom:34px}
	100%{bottom:0;animation-timing-function:ease;}
}
@media only screen and (max-width:768px) {
	.mouse-mover {width:40px;height:60px;bottom:100px;margin:0 0 0 -20px;}
	.mouse-mover div {height:40px;background-size:contain;}
}

@media only screen and (max-width:999px) and (min-width:769px){
		.mouse-mover {bottom:100px;}
}


/* common main */
.main {padding-top:70px; padding-bottom:200px;position:relative;}
.main:last-child {padding-bottom:70px;}
.main.no-pt {padding-top:0px;}
.main .title { position:relative; font-family:'WF Goto'; text-shadow: 0px 0px 4px #000; font-size:36px; font-size:2.25rem; line-height:3rem; letter-spacing:-1px;}
.main .title:before {content:''; position:absolute; top:-5px; left:50%; width:40px; height:2px; margin-left:-20px;}
.main .sub-title {margin:10px 0px 38px 0px;font-size:16px;font-size:1rem;}
.main p.line {position:absolute;width:100%;height:50px;top:-48px;left:0;}

/* main1 */
.main1 {background:#222328;}
.main1 p.line {background:url('../img/line-main1.png') no-repeat;background-size:100% 50px;}
.main1 .title {color:#fff;}
.main1 .title:before {background:#fff;}
.main1 .sub-title {color:#fff;}
.main1 .main1-left {float:left;width:68%;}
.main1 .main1-right {float:right;width:28%;}
.main1 .box-item {position:relative; width:100%; z-index:5; text-align:left;}
.main1 .box-item .box-line {border:1px solid #3c3c3c; padding:40px 20px; color:#898989; margin-bottom:20px;-webkit-transition:all 0.3s;transition: all 0.3s;}
.main1 .box-item .box-line p {color:#e2e3e7; text-align:left; padding:0px 20px 20px 0px; font-size:1.25rem; line-height:1.5rem; font-family:'WF Godo'; font-weight:400;}
.main1 .box-item .box-btn {position:relative; display: inline-block; text-decoration:none; min-width: 100px; height: auto; background-color: #fff; border: 0; font-size: 0.9375rem; font-weight:500; line-height: 2.25rem; color: #252525; text-align: center; padding: 0 22px 0 28px; }
.main1 .box-item .box-img {position:absolute; bottom:0; left:0; width:100%; height:auto;display:block;}
.main1 .box-item .box-img .box-img-container {position:relative; overflow:hidden; width:100%; height:100%;-webkit-transition:all 0.3s;transition: all 0.3s;}
.main1 .box-item .box-img img {width:100%; height:100%; -webkit-transition:all 0.3s;transition: all 0.3s;}
.main1 .box-item .box-img .box-img-container:hover img { -webkit-transform:scale(1.2);transform:scale(1.2);}

@media only screen and (max-width:1100px) {
	.main1 .main1-left {width:60%;}
	.main1 .main1-right {width:36%;}
	.main1 .box-item .box-img {display:none;}
	.main1 .box-item .box-line {padding:12px 12px;}
	.limit {padding-left:30px; padding-right:30px;}	
}

@media only screen and (max-width:1099px) {
	.main1 .main1-left, .main1 .main1-right {width:100%;}
	.main1-right {margin-top:10px;}
	.main1 .box-item .box-img {display:block; position:relative; margin-top:20px;}
	.limit {padding-left:15px; padding-right:15px;}	
}

/* main2 */
.main2 {background:#ffd648;}
.main2 p.line {background:url('../img/line-main2.png') no-repeat;background-size:100% 50px;}
.main2 .title {color:#222328; text-shadow:none;}
.main2 .title:before {background:#000;}
.main2 .sub-title {color:#33343c;}
.main2 .box-item {display:block;}
.main2 .box-header {display:block;position:relative; font-size:1.375rem; margin:0 auto; width:46%; max-width:600px; height:70px; line-height:70px; text-align:center; box-sizing:border-box;background-color:#ffd648;border:1px solid #303030; color:#303030; font-family:'WF Godo'; border-radius:999px; letter-spacing:2px; }
.main2 .box-body {display:block; border-radius:40px; max-width:1000px; width:100%; background:url('../img/bg_main2.png') repeat left top; text-align:center;margin:0 auto; margin-top:-35px;}
.main2 .box-body:after {clear:both; content:"";display:block;}
.main2 .box-body .circle {display:block; width:100%; height:400px; text-align:center; background:url('../img/bg_circle.png') no-repeat center top; background-position-y:80px;}
.main2 .box-body .circle-l,.main2 .box-body .circle-r {display:inline-block; position:relative; width:272px; height:278px;}
.main2 .box-body .circle-l {margin:0 -22px 0 0; margin-top:80px;}
.main2 .box-body .circle-l > div, .main2 .box-body .circle-r > div {position:relative; width:100%; height:100%;}
.main2 .box-body .circle-r {margin:0 0 0 -22px; margin-top:80px;}
.main2 .circle span.ico {display:block;width:72px;height:76px;margin:46px auto 0 auto;}
.main2 .circle .circle-l .ico {background:url('../img/ic_1_circle.png') no-repeat; center center;}
.main2 .circle .circle-r .ico {background:url('../img/ic_2_circle.png') no-repeat; center center;}
.main2 .circle span.txt {display:block; text-align:center;color:#fff;font-size:1.125rem;font-family:'WF Godo';line-height:1.5625rem;letter-spacing:-0.0625rem;font-weight:500; margin:38px 0 0 0;}
.main2 .circle span.txt span {display:block;}
.main2 .box-body .square {display:none;}
.main2 .box-body .square ul {position:relative; padding-top:30px; padding-bottom:30px;}
.main2 .box-body .square ul li {position:relative; padding:40px 20px 40px 20px; font-size:1.125rem;font-family:'WF Godo';line-height:1.5625rem; color:#fff; font-weight:500;}
.main2 .box-body .square ul li:first-child:before {position:absolute; content:""; bottom:-20px; left:50%; margin-left:-20px; background:url('../img/ic_plus.png') no-repeat; width:40px; height:40px; }
.main2 .box-body .square ul li .square-l {position:relative; background:rgba(71,73,84,0.8); width:100%; height:auto; border-radius:20px 20px;}
.main2 .box-body .square ul li .square-r {position:relative; background:rgba(34,35,40,0.8); width:100%; height:auto; border-radius:20px 20px;}
.main2 .box-body .square ul li .square-l:after, .main2 .box-body .square ul li .square-r:after {clear:both; content:"";display:block;}
.main2 .box-body .square ul li .txt { display:block; width:100%; text-align:left; padding-top:20px; padding-bottom:20px; text-indent:20px; }
.main2 .box-body .square ul li .txt span {display:block;}
.main2 .box-body .square ul li .ico {position:absolute; top:17px; right:20px; width:50px; height:52px; display:block;}
.main2 .box-body .square ul li .square-l .ico {background:url('../img/ic_1_circle.png') no-repeat; center center; background-size:50px 52px;}
.main2 .box-body .square ul li .square-r .ico {background:url('../img/ic_2_circle.png') no-repeat; center center; background-size:50px 52px;}

@media only screen and (max-width:999px) {
	.main2 .box-body .circle {width:423px; height:360px; background-size:contain; margin:0 auto; background-position-y : 80px;}
	.main2 .box-body .circle-l, .main2 .box-body .circle-r {width:225px; height:232px; margin-top:80px;}
	.main2 .circle span.ico {margin:36px auto 0 auto;}
	.main2 .circle span.txt {font-size:1rem; line-height:1.125rem; margin:28px 0 0 0;}
}
@media only screen and (max-width:498px) {
	.main2 .box-body .circle {width:100%; height:360px; background-size:contain; margin:0 auto; background-position-y : 80px;}
	.main2 .box-body .circle-l, .main2 .box-body .circle-r {width:225px; height:232px; margin-top:80px;}
	.main2 .circle span.ico {margin:36px auto 0 auto;}
	.main2 .circle span.txt {font-size:1rem; line-height:1.125rem; margin:28px 0 0 0;}
}

@media only screen and (max-width:497px) {
	.main2 .box-body .circle {display:none;}
	.main2 .box-body .square {display:block;}
}

@media only screen and (max-width:410px) {
	.main2 .box-body .square ul li .ico {display:none;}
	.main2 .box-body .square ul li .txt {text-align:center; text-indent:0px;}
}

/* main3 */
.main3 {background:#fff;}
.main3 p.line {background:url('../img/line-main3.png') no-repeat;background-size:100% 50px;}
.main3 .title {color:#222328; text-shadow:none;}
.main3 .title:before {background:#000;}
.main3 .sub-title {color:#33343c;}
.main3 .item-case {position:relative; width:49%; height:auto; text-align:left; margin-bottom:1%;overflow:hidden;}
.main3 .item-case:nth-child(2n) {margin-left:1%;}
.main3 .item-case .img img {-webkit-transition:all 0.35s ease; transition:all 0.35s ease;width:100%;height:100%;}
.main3 .item-case .txt {position:absolute; z-index:3; left:12px; bottom:10px; color:#fff; font-size:0.9375rem; -webkit-transition:all 0.35s ease; transition:all 0.35s ease;}
.main3 .item-case .txt em {font-size:1.375rem; display:block;margin-bottom:3px;letter-spacing:-1px !important;font-style:normal;line-height:1.5rem;font-family:'WF Godo';}
.main3 .item-case .mask {content:"";position:absolute;z-index:5; left:0; top:0; text-align:center; width:100%;height:100%;background:rgba(0,0,0, 0.6); background-size:100% 100%; opacity:0; -webkit-transition:all 0.45s ease;transition:all 0.45s ease;}
.main3 .item-case .mask .mask-box {position:absolute; width:100%; height:66px; top:50%; margin-top:-33px;left:0;}
.main3 .item-case .mask .mask-icon, .main3 .item-case .mask .mask-txt {color:#fff; display:block; font-weight:bold; font-size:1.25rem; line-height:30px;}
.main3 .item-case .mask .mask-icon {font-size:1.625rem; line-height:36px;}
.main3 .item-case .txt-mask {position:absolute; bottom:0; left:0; width:100%; height:78px; background:rgba(0,0,0,0.4); opacity:1; -webkit-transition:all 0.45s ease;transition:all 0.45s ease;}
.main3 .item-case > a:focus .img img,
.main3 .item-case > a:hover .img img {
	-ms-transform: scale(1.05,1.05);
	-webkit-transform: scale(1.05,1.05);
	transform: scale(1.05,1.05);
}
.main3 .item-case > a:focus .mask,
.main3 .item-case > a:hover .mask { opacity:1;}

.main3 .item-case > a:focus .txt-mask,
.main3 .item-case > a:hover .txt-mask { opacity:0;}

@media only screen and (max-width:780px) {
	.main3 .item-case {width:100%; margin-bottom:15px;}
	.main3 .item-case:nth-child(2n) {margin-left:0;}
	.main3 .item-case .txt-mask {height:70px;}
}

/* image hover */
.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

figure.effect-layla {
	background: #18a367;
}

figure.effect-layla img {
	height: 390px;
}

figure.effect-layla figcaption {
	padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
	position: absolute;
	content: '';
	opacity: 0;
}

figure.effect-layla figcaption::before {
	top: 50px;
	right: 30px;
	bottom: 50px;
	left: 30px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
	top: 30px;
	right: 50px;
	bottom: 30px;
	left: 50px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

figure.effect-layla h2 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-layla p {
	padding: 0.5em 2em;
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
	opacity: 0.7;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}