@charset "utf-8";

#visual {position:relative;width:100%; overflow:hidden; height:100vmin; background:url('../img/main01.jpg') center no-repeat; background-size:cover !important;}
#visual .tit {position:relative; width:1300px; margin:0 auto; top:38vmin;}
/*#visual .item{overflow:hidden; height:100vmin; background-size:cover !important;}
#visual .owl-nav {}
#visual .owl-nav .owl-prev, #visual .owl-nav .owl-next {position:absolute; top:40%; width:75px; height:143px; font-size:0; }
#visual .owl-nav .owl-prev {left:42px; background:url('../img/prev.png') center no-repeat; background-size:contain;}
#visual .owl-nav .owl-next {right:42px; background:url('../img/next.png') center no-repeat; background-size:contain}
#visual .owl-dots{position:absolute;width:100%;bottom:3%;text-align:center}  
#visual .owl-dots .owl-dot{display:inline-block;width:20px;height:20px;margin:0 6px; border:2px solid #fff;}
#visual .owl-dots .owl-dot.active{background:#fff;}*/

@media (max-width: 1339px) {
	#visual .tit {width:auto; left:2%;}
}

@media (max-width: 1199px) {
	#visual .owl-nav .owl-prev, #visual .owl-nav .owl-next {top:35%; width:50px; height:110px;}
}

@media (max-width: 999px) {

	#visual .item .pc {display:none;}
	#visual .item .mobile {display:block;}
}

@media (max-width: 799px) {
	#visual .tit {top:30vmin;}
	#visual .tit img {width:60vmin;}
}

@media (max-width: 699px) {
	#visual {height:130vmin;}
	#visual .tit {top:50vmin;}
	#visual .owl-nav .owl-prev, #visual .owl-nav .owl-next {width:25px; height:60px;}
	#visual .owl-nav .owl-prev {left:10px;}
	#visual .owl-nav .owl-next {right:10px;}
	#visual .owl-dots .owl-dot {width:12px; height:12px; margin:0 3px;}
}


/*03-products */
#main-products {padding:122px 0px;}
#main-products .tit {position:relative; text-align:center; padding:0px 0px 98px;}
#main-products .tit .num {font-family:'barlowthin', sans-serif !important; opacity:0.3; filter: alpha(opacity=30); font-size:100px; color:#533b93;}
#main-products .tit h3 {position:relative; margin-top:-40px; padding:6px 0px; background:#fff; font-family:'barlowregular', sans-serif !important; text-transform: uppercase; font-size:40px; color:#533b93; font-weight:normal;}
#main-products .tit p {font-size:18px; color:#222222; padding:10px 0px; word-break:keep-all;}

#main-products .conts {display:block; overflow:hidden; margin:0px -16px;}
#main-products .conts .pro-box {position:relative; float:left; width:300px; height:450px; background:#000000; color:#fff; margin:0px 16px;}
#main-products .conts .pro-box a {position:absolute; width:100%; height:100%; display:block; overflow:hidden; color:#fff;}
#main-products .conts .pro-box .img {position:absolute; top:0; left:0; -webkit-filter: grayscale(100%); filter: gray; opacity:0.5; filter: alpha(opacity=50); }
#main-products .conts .pro-box a:hover .img {-webkit-filter: grayscale(0%); filter: none; opacity:1.0; filter: alpha(opacity=100);}
#main-products .conts .pro-box .text {position:relative; padding:39px 40px; width:100%; height:100%;}
#main-products .conts .pro-box .text span {font-family:'barlowthin', sans-serif; font-size:20px;}
#main-products .conts .pro-box .text h4 {font-family:'S-CoreDream-4Regular', sans-serif !important; font-size:30px; font-weight:normal;}
#main-products .conts .pro-box span.btn {position:absolute; bottom:30px; right:30px; display:inline-block; font-family:'barlowthin', sans-serif; font-size:14px; letter-spacing:0.2em; border:1px solid #fff; width:75px; height:31px; line-height:30px; text-transform: uppercase;  z-index:1;}
#main-products .conts .pro-box:hover span.btn {background:rgba(0,0,0,0.3); }

@media (max-width: 1349px) {
	#main-products .conts .pro-box {width:23%; height:50vmin; margin:0% 1%;}
	#main-products .conts .pro-box .img {width:auto; height:100%; max-width:none;}
}

@media (max-width: 999px) {
	#main-products {padding:8vmin 0;}
	#main-products .tit {padding:0 0 5vmin;}
	#main-products .tit .num {font-size:90px;}
	#main-products .tit h3 {font-size:34px;}
	#main-products .tit p {font-size:120%;}

	#main-products .conts {margin:0% -2%;}
	#main-products .conts .pro-box {height:40vmin;}
	#main-products .conts .pro-box a .img {-webkit-filter: grayscale(0%); filter: none; opacity:1.0; filter: alpha(opacity=100);}
	#main-products .conts .pro-box .text {padding:4vmin 2vmin;}
	#main-products .conts .pro-box .text span {font-size:140%;}
	#main-products .conts .pro-box .text h4 {font-size:200%;}
}

@media (max-width: 899px) {
	#main-products .conts .pro-box {width:48%; margin:1%;}	
	#main-products .conts .pro-box .img {width:100%; height:auto; max-width:100%; margin-top:-30%;}
	#main-products .conts .pro02 .img {margin-top:-50%;}
	#main-products .conts .pro-box .text {padding:6vmin 4vmin;}
}

@media (max-width: 799px) {
	#main-products .conts .pro-box {height:60vmin;}
	#main-products .conts .pro-box .img {margin-top:0;}
	#main-products .conts .pro02 .img {margin-top:0;}
	#main-products .conts .pro-box span.btn {bottom:10px; right:10px; background:rgba(0,0,0,0.3); }
}

@media (max-width: 599px) {
	#main-products .conts .pro-box .text span {font-size:120%;}
	#main-products .conts .pro-box .text h4 {font-size:180%;}
}


/*02-project */
#main-project {background:#f2f2f2; padding:118px 0px;}
#main-project .tit {position:relative; text-align:center; padding:0px 0px 98px;}
#main-project .tit .num {font-family:'barlowthin', sans-serif !important; opacity:0.3; filter: alpha(opacity=30); font-size:100px; color:#533b93;}
#main-project .tit h3 {position:relative; margin-top:-40px; padding:6px 0px; background:#f2f2f2; font-family:'barlowregular', sans-serif !important; text-transform: uppercase; font-size:40px; color:#533b93; font-weight:normal;}
#main-project .tit p {font-size:18px; color:#222222; padding:10px 0px;}

#main-project .conts {display:block; overflow:hidden;}
#main-project .conts .proj-box {position:relative; width:50%; height:615px; float:left; background:#000000;}
#main-project .conts .proj-box a {position:absolute; width:100%; height:100%; display:block; overflow:hidden; color:#fff;}
#main-project .conts .proj-box .img {width:100%; height:100%; position:absolute; top:0; left:0; -webkit-filter: grayscale(100%); filter: gray; opacity:0.5; filter: alpha(opacity=50);}
#main-project .conts .proj-box a:hover .img {-webkit-filter: grayscale(0%); filter: none; opacity:1.0; filter: alpha(opacity=100);}
#main-project .conts .proj-box .text {position:relative; top:240px; margin:0px 39px;}
#main-project .conts .proj-box .text h4 {font-family:'S-CoreDream-3Light', sans-serif !important; font-size:60px; margin-bottom:15px; font-weight:normal; letter-spacing:-0.03em;}
#main-project .conts .proj-box a:hover .text h4 {font-family:'S-CoreDream-6Bold', sans-serif !important;}
#main-project .conts .proj-box .text p {font-size:18px; margin-bottom:60px;}
#main-project .conts .proj-box .text span.btn {display:inline-block; font-family:'barlowthin', sans-serif; font-size:14px; letter-spacing:0.2em; border:1px solid #fff; width:75px; height:31px; line-height:30px; text-transform: uppercase;}
#main-project .conts .proj-box:hover span.btn {background:rgba(0,0,0,0.3); }

#main-project .conts .proj01 .img {background:url('../img/main-proj01.jpg') center no-repeat; background-size:cover;}
#main-project .conts .proj01 .text {text-align:right;}

#main-project .conts .proj02 .img {background:url('../img/main-proj02.jpg') center no-repeat; background-size:cover;}
#main-project .conts .proj02 .text {text-align:left;}

@media (max-width: 1349px) {
}

@media (max-width: 999px) {
	#main-project {padding:8vmin 0;}
	#main-project .tit {padding:0 0 5vmin;}
	#main-project .tit .num {font-size:90px;}
	#main-project .tit h3 {font-size:34px;}
	#main-project .tit p {font-size:120%; word-break:keep-all;}

	#main-project .conts .proj-box {width:100%; height:400px;}
	#main-project .conts .proj-box .img {-webkit-filter: grayscale(0%); filter: none; opacity:1.0; filter: alpha(opacity=100);}
	#main-project .conts .proj-box .text {top:120px;}
	#main-project .conts .proj-box .text h4 {font-size:360%; font-family:'S-CoreDream-6Bold', sans-serif !important;}
	#main-project .conts .proj-box .text p {font-size:120%; margin-bottom:30px;}
	#main-project .conts .proj-box span.btn {background:rgba(0,0,0,0.3); }
}

@media (max-width: 899px) {
}

@media (max-width: 799px) {
	#main-project .conts .proj-box {height:280px;}
	#main-project .conts .proj-box .text {top:70px;}
	#main-project .conts .proj-box .text h4 {font-size:280%;}
	#main-project .conts .proj-box .text p {font-size:100%;}
}

@media (max-width: 599px) {
}

/*03-certification */
#main-certification {background:#fff; padding:118px 0px;}
#main-certification .tit {position:relative; text-align:center; padding:0px 0px 68px;}
#main-certification .tit .num {font-family:'barlowthin', sans-serif !important; opacity:0.3; filter: alpha(opacity=30); font-size:100px; color:#533b93;}
#main-certification .tit h3 {position:relative; margin-top:-40px; padding:6px 0px; background:#fff; font-family:'barlowregular', sans-serif !important; text-transform: uppercase; font-size:40px; color:#533b93; font-weight:normal;}
#main-certification .tit p {font-size:18px; color:#222222; padding:10px 0px;}

#main-certification .conts {text-align:center;}
#main-certification .conts .certi-slider {margin-bottom:75px;}
#main-certification .conts .certi-slider .owl-carousel .item{padding:0 17px}
#main-certification .conts .certi-slider .owl-carousel .item img {border:1px solid #e5e5e5;}
#main-certification .conts .certi-slider .owl-carousel .owl-nav {position:absolute; top:30%; width:100%;}
#main-certification .conts .certi-slider .owl-carousel .owl-nav > div{position:absolute;width:45px;height:151px;text-indent:-9999px;}
#main-certification .conts .certi-slider .owl-carousel .owl-nav .owl-prev{left:-7%; background:url('../img/certi-prev.png') no-repeat; background-size:contain;}
#main-certification .conts .certi-slider .owl-carousel .owl-nav .owl-next{right:-7%; background:url('../img/certi-next.png') no-repeat; background-size:contain;}
#main-certification .conts .certi-slider .owl-carousel .owl-dots{display:none;}

#main-certification a.btn {display:inline-block; font-family:'barlowthin', sans-serif; padding-right:0.2em; font-size:20px; letter-spacing:0.2em; border:1px solid #222222; width:200px; height:51px; line-height:50px; text-transform: uppercase; color:#222222;}
#main-certification a.btn:hover {background:#222; color:#fff;}


@media (max-width: 1499px) {
	#main-certification .conts .certi-slider .owl-carousel .owl-nav > div {width:35px; height:145px;}
	#main-certification .conts .certi-slider .owl-carousel .owl-nav .owl-prev {left:0%;}
	#main-certification .conts .certi-slider .owl-carousel .owl-nav .owl-next {right:0%;}
}

@media (max-width: 999px) {
	#main-certification {padding:8vmin 0;}
	#main-certification .tit {padding:0 0 5vmin;}
	#main-certification .tit .num {font-size:90px;}
	#main-certification .tit h3 {font-size:34px;}
	#main-certification .tit p {font-size:120%; word-break:keep-all;}

	#main-certification .conts {width:80%; margin:0 auto;}
	#main-certification .conts .certi-slider {margin-bottom:5vmin;}
	#main-certification .conts .certi-slider .owl-carousel .owl-nav .owl-prev {left:-8%;}
	#main-certification .conts .certi-slider .owl-carousel .owl-nav .owl-next {right:-8%;}

	#main-certification a.btn {font-size:140%; width:180px;}
}

@media (max-width: 899px) {
	#main-certification .conts .certi-slider .owl-carousel .owl-nav > div {width:25px; height:85px;}
}

@media (max-width: 699px) {
	#main-certification a.btn {font-size:120%; width:140px; height:40px; line-height:40px;}
}