section, section *{ box-sizing:border-box; }
*{ box-sizing:border-box; }
section{ overflow:hidden; }
section:last-child{ padding-bottom:150px !important; }
.mc-con{ max-width:1440px; width:100%; margin:0 auto;}
.sc_con{ max-width:1440px; width:100%; margin:0 auto; }
.main-con{width: 100%; margin: 0 auto; padding: 0 4rem;}

/*sc01*/
#sc01{ background-color:#333; height: 100vh; position: relative; overflow: hidden;}

.main-caption{width: 100%; padding: 0 4rem; position: absolute; bottom: 25%; left: 0; z-index: 99; color: #fff;text-align: center;}
.main-caption > h2{font-size: 50px;}
.main-caption > h5{font-size: 21px; margin-bottom: 2rem; font-weight: 300;}
.main-caption > a{font-size: 16px; font-weight: 600; padding: .8rem 2rem; background-color: #fff; border-radius: 30px; color: #111; transition: .5s;}
.main-caption > a:hover{color: #3b77ad;}
.main-logo{text-align: center; padding-bottom: 1.5rem; display: inline-block; margin: 0 auto 1.5rem; border-bottom: 1px dotted #ddd;}
.main-logo > img{width: 400px;}

.sc01Sli{ position:relative; z-index:1; background-color:#333; overflow:hidden; }
.sc01_bg{ position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:#333; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc01_mbg{ display:none; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:#333; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc01_fr{ position:relative; z-index:1; min-height:max(600px,36.4583333vw); padding:150px 70px; display:flex; align-items:center; /*background-color:rgba(0,0,0,.35);*/ }

.sc01_txt{ max-width:1400px; width:100%; margin:0 auto; }
.sc01_txt > h2{ font-size:50px; font-weight:700; line-height:1.2em; margin-bottom:30px; }
.sc01_txt > hr{ display:block; width:100px; height:3px; margin:0 0 30px; border:none; }
.sc01_txt > p{ font-size:18px; font-weight:300; line-height:1.5em; }
.sc01_txt > a{ display:inline-block; margin:40px 0 0; padding:13px 40px; border-radius:100px; font-size:18px; font-weight:300; line-height:1em; text-align:center; transition:0.4s all; }

.sc01_nav{ position:absolute; z-index:60; top:50%; width:30px; height:80px; margin:-40px 0 0; cursor:pointer; }
.sc01_nav.swiper-button-disabled{ opacity:0.3; }
.sc01_nav#sc01pr{ left:20px; }
.sc01_nav#sc01pr:before{ content:''; position:absolute; z-index:1; top:0; left:0; width:4px; height:40px; transform:skew(-33deg); transform-origin:left bottom; }
.sc01_nav#sc01pr:after{ content:''; position:absolute; z-index:1; bottom:0; left:0; width:4px; height:40px; transform:skew(33deg); transform-origin:left top; }
.sc01_nav#sc01nx{ right:20px; }
.sc01_nav#sc01nx:before{ content:''; position:absolute; z-index:1; top:0; right:0; width:4px; height:40px; transform:skew(33deg); transform-origin:right bottom; }
.sc01_nav#sc01nx:after{ content:''; position:absolute; z-index:1; bottom:0; right:0; width:4px; height:40px; transform:skew(-33deg); transform-origin:right top; }

.sc01_btn{ display:flex; align-items:center; position:absolute; z-index:60; bottom:30px; left:50%; width:auto; transform:translate(-50%, 0); }
#sc01pg{ margin-right:10px; }
#sc01pg > .swiper-pagination-bullet{ opacity:1; width:12px; height:12px; border-radius:100px; margin:0 3px; transition:0.5s all; }
#sc01pg > .swiper-pagination-bullet-active{ width:40px; }
.sc01_ap{ cursor:pointer; border-radius:100%; font-size:20px; }
.sc01_ap .la-play{ display:none; }
.sc01_ap .la-pause{ display:block; }
.sc01_ap.paused .la-play{ display:block; }
.sc01_ap.paused .la-pause{ display:none; }

.sc01mw{ position:relative; z-index:1; overflow:hidden; background-color:#333; width: 100%; height: 100%;}
.sc01mw > .sc01_bdo{ position:absolute; z-index:1; top:50%; left:50%; min-width:100%; height:155%; transform:translate(-50%,-50%); }

.vimeo_player_wrapper{opacity: 1 !important;}

.mainswiper .swiper-button-next, .mainswiper .swiper-button-prev{background-image: none; transform: translateY(-50%);}
.mainswiper .swiper-button-next{right: 4rem;}
.mainswiper .swiper-button-prev{left: 4rem;}
.mainswiper .swiper-button-next span, .mainswiper .swiper-button-prev span{color: #fff; font-size: 40px; transition: .5s;}
.mainswiper .swiper-button-next:hover span, .mainswiper .swiper-button-prev:hover span{color: #3b77ad;}

/* mouse-s */
.mouse-s{position: absolute; bottom: 2rem; left: 0; width: 100%; text-align: center; z-index: 8; color: #fff;}
.mouse-s > p{font-size: 18px;}
.mouse-s > span{display: block; font-size: 18px; transition: all 1s ease-in-out; animation: mousey 1.5s infinite;}

@keyframes mousey{
	0%{opacity: 0; transform: translateY(0);}
	100%{opacity: 1; transform: translateY(10px);}
}

/* waves */
.waves-con{position: absolute; bottom: 0; left: 0; width: 100%; z-index: 888;}
.waves {
	position: relative;
	width: 100%;
	height: 15vh;
	margin-bottom: -7px; /*Fix for safari gap*/
	min-height: 100px;
	max-height: 150px;
}
/* Animation */
.parallax > use {
	animation: move-forever 25s cubic-bezier(0.55,.5,0.45,.5) infinite;
}
.parallax > use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
}
.parallax > use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
}
.parallax > use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
}
.parallax > use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
}
@keyframes move-forever {
	0% {
			transform: translate3d(-90px, 0, 0);
	}
	100% {
			transform: translate3d(85px, 0, 0);
	}
}
/*Shrinking for mobile*/
@media(max-width: 768px) {
	.waves {
			height: 40px;
			min-height: 40px;
	}
}

/* sc02 */
#sc02{padding: 150px 0 150px 10rem; background-color: #e7e6e0;}
.sc02-wrap{display: flex; align-items: center; position: relative;}
.more{position: absolute; padding-bottom: 10px;}
.more > a{font-weight: 500; font-size: 22px; position: relative; color: #111; padding-bottom: 10px; transition: .5s; opacity: 0; transform: translateY(50px);}
.more > a.ani.act{opacity: 1; transform: translateY(0);}
.more > a:hover{letter-spacing: 5px;}
.more > a::before{content: ""; width: 150%; height: 1px; background-color: #111; position: absolute; bottom: 0; left: 0; transition: .5s;}
.more > a::after{content: ""; width: 12px; height: 1px; background-color: #111; position: absolute; bottom: 0; right: -30px; transform: rotate(35deg); transform-origin: right top;}
.more > a:hover::before{width: 139%;}
.sc02-tit{width: 20%;}
.sc02-tit > h2{font-size: 20px; text-align: center; opacity: 0; transition: .5s;}
.sc02-tit > h2.ani.act{opacity: 0;}
.sc02-swiper{width: 80%; overflow: hidden; position: relative; padding-bottom: 4rem;}
.sc02-swiper .swiper-pagination-progressbar{width: 100%; height: 1px; bottom: 5px; background: rgb(0 0 0);}
.sc02-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{height: 3px; background: #000; top: -1px;}
.sc02-swiper .swiper-button-next {
  background-color: #fff;
	opacity: 0.5;
	padding: 15px 5px;
	border-radius: 20px;
	color: #111 !important;
	background-image: none;
	width: 50px;
	height: 70px;
	text-align: center;
	line-height: 40px;
	transition: .5s;
}
.sc02-swiper .swiper-button-next > span{font-size: 30px;}
.sc02-swiper .swiper-button-next:hover{opacity: 1;}
.sc02-swiper .swiper-slide span{color: #fff; font-size: 18px; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1.1); transition: all .4s 0.0s ease;}
.sc02-swiper .swiper-slide:hover span{opacity: 1; transform: translate(-50%,-50%) scale(1);}
.sc02-swiper .swiper-slide img{transition: all .5s ease-in-out;}
.sc02-swiper .swiper-slide:hover img{filter: brightness(0.5); transition: all .5s ease-in-out;}

/* sc03 */
#sc03{padding: 0 20rem 100px 0; background-color: #e7e6e0;}
.sc03-img-wrap{position: relative;}
.sc03-img-wrap > img{border-radius: 0 0 100px 0;}
.sc03-txt{position: absolute; bottom: 4rem; left: 4rem; color: #fff;}
.sc03-txt > h5{font-size: 16px; margin-bottom: 1.5rem; transform: translateY(50px); opacity: 0; transition: .5s;}
.sc03-txt > p{font-size: 14px; transform: translateY(50px); opacity: 0; transition: 1s;}
.sc03-txt > h5.ani.act{opacity: 1; transform: translateY(0);}
.sc03-txt > p.ani.act{opacity: 1; transform: translateY(0);}

/* sc04 */
#sc04{padding: 100px 0 100px 4rem;}
.sc04-wrap{display: flex;}
.sc04-box.box1{width: 30%; margin-top: 8rem; opacity: 0; transform: translateY(100px); transition: 1.5s;}
.sc04-box.box3{width: 30%; opacity: 0; transform: translateY(100px); transition: .5s;}
.sc04-box.box2{width: 40%; margin-top: 4rem; display: flex; justify-content: center; opacity: 0; transform: translateY(100px); transition: 1s;}
.sc04-txt{color: #404040; font-size: 14px; line-height: 2;}
.sc04-box.box3.ani.act{opacity: 1; transform: translateY(0);}
.sc04-box.box2.ani.act{opacity: 1; transform: translateY(0);}
.sc04-box.box1.ani.act{opacity: 1; transform: translateY(0);}

/* sc05 */
#sc05{padding: 0 0 100px; text-align: center; color: #401d01;}
.sc05-wrap h2{font-size: 50px; margin-bottom: 2rem;}
.sc05-wrap h5{font-size: 14px; margin-bottom: 2rem;}
.sc05-cate{padding: 2rem 4rem; margin: 0 auto 2rem; position: relative; max-width: 700px;}
.sc05-cate::before, .sc05-cate::after{content: ""; position: absolute; top: 0; width: 40px; height: 100%; border-radius: 50%;}
.sc05-cate::before{left: 0; border-left: 5px solid #401d01;}
.sc05-cate::after{right: 0; border-right: 5px solid #401d01;}
.sc05-cate h3{font-size: 20px;}
.sc05-wrap a{padding: .5rem 2rem; font-size: 16px; font-weight: 600; border: 1px solid #401d01; border-radius: 30px; transition: .5s;}
.sc05-wrap a:hover{background-color: #401d01; color: #fff;}

/* sc06 */
#sc06{padding: 100px 0; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #e7e6e0;}
.sc06-img1{margin-right: auto; margin-bottom: 250px; opacity: 0; transform: translateY(100px); transition: .5s;}
.sc06-wrap{display: flex; padding-left: 4rem;}
.sc06-img2{width: 30%; margin-top: 250px; opacity: 0; transform: translateY(100px); transition: .5s;}
.sc06-box{width: 20%;}
.sc06-img3{width: 50%; opacity: 0; transform: translateY(100px); transition: .5s;}
.sc06-img1.ani.act{opacity: 1; transform: translateY(0);}
.sc06-img2.ani.act{opacity: 1; transform: translateY(0);}
.sc06-img3.ani.act{opacity: 1; transform: translateY(0);}

.sc06-img2 img{width: 100%;}

/* sc07 */
#sc07{padding: 100px 0; background-color: #e7e6e0;}
.sc07-wrap{display: flex;}
.sc07-box1{width: 70%; display: flex; justify-content: space-between; position: relative;}
.sc07-box1-img{flex: 1 1 auto;}
.sc07-box1-txt{flex: 1 1 auto; position: relative;}
.sc07-box1-txt > h5{font-size: 16px; margin-bottom: 3rem; opacity: 0; transform: translateY(50px); transition: .5s;}
.sc07-box1-txt > p{font-size: 14px; line-height: 2; opacity: 0; transform: translateY(50px); transition: 1s;}
.sc07-box1-txt > h5.ani.act{opacity: 1; transform: translateY(0);}
.sc07-box1-txt > p.ani.act{opacity: 1; transform: translateY(0);}
.more07{position: absolute; bottom: 20%; left: 50%; padding-bottom: 10px;}
.more07 > a{font-weight: 500; font-size: 14px; position: relative; color: #111; padding-bottom: 10px; transition: .5s; opacity: 0; transform: translateY(50px);}
.more07 > a.ani.act{opacity: 1; transform: translateY(0);}
.more07 > a:hover{letter-spacing: 5px;}
.more07 > a::before{content: ""; width: 150%; height: 1px; background-color: #111; position: absolute; bottom: 0; left: 0; transition: .5s;}
.more07 > a::after{content: ""; width: 12px; height: 1px; background-color: #111; position: absolute; bottom: 0; right: -20px; transform: rotate(35deg); transform-origin: right top;}
.more07 > a:hover::before{width: 135%;}
.sc07-img-p{position: absolute; left: 30%; bottom: -95%;}
.sc07-box2{width: 30%; padding-top: 10rem;}

/* sc08 */
#sc08{padding: 100px 0;}
.sc08-tit{margin-bottom: 2rem; text-align: center;}
.sc08-tit > h2{color: #111; font-size: 50px;}
.change-bg{background-repeat: no-repeat; background-position: center; background-size: cover; width: 50%; height: 800px; margin: 0 auto; overflow: hidden; transition: all 1s; position: relative; border-radius: 10px;}
.change-bg.active{width: 100%; border-radius: 0;}

/* sc09 */
#sc09{padding-bottom: 100px;}
.sc09-wrap{display: flex; justify-content: space-between; align-items: flex-end;}
.sc09-box{width: 48%;}
.sc09-tit{padding: 50px 0; margin-bottom: 8rem;}
.sc09-tit > h5{font-size: 16px; margin-bottom: 1.5rem; opacity: 0; transform: translateY(50px); transition: .5s;}
.sc09-tit > p{font-size: 14px; opacity: 0; transform: translateY(50px); transition: .5s;}
.sc09-tit > h5.ani.act{opacity: 1; transform: translateY(0);}
.sc09-tit > p.ani.act{opacity: 1; transform: translateY(0);}
.sc09-box:first-child .sc09-img{opacity: 0; transform: translateY(100px); transition: 1s;}
.sc09-box:last-child .sc09-img{opacity: 0; transform: translateX(100px); transition: 1s;}
.sc09-box:first-child .sc09-img.ani.act{opacity: 1; transform: translateY(0);}
.sc09-box:last-child .sc09-img.ani.act{opacity: 1; transform: translateX(0);}

/*sc10*/
#sc10{padding: 100px 0; background-color: #d7dbfa;}
.sc10_mq{ width:3840px; display:flex; transform:translate(0, 0); animation:20s marquee infinite linear; -webkit-animation:20s marquee infinite linear; -moz-animation:20s marquee infinite linear; -o-animation:20s marquee infinite linear; }
.sc10_mq > li{padding: 40px 0; margin: 0 20px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.sc10_mq > li > img{ display:block; width:100%; height:auto; }
@keyframes marquee{
	from{ transform:translate(0, 0); }
	to{ transform:translate(-1280px, 0); }
}

/* sc11 */
.main-map{width: 100%; max-height: 700px;}

/* media query */

@media(min-width:992px){
	.ms-img{display: block;}
	.ms-img-m{display: none;}

	.more{bottom: 0; left: 8%;}

	.sc07-box1{max-height: 500px;}
}
@media(max-width:991px){
	.main-con{padding: 0 15px;}
	/* sc01 */
	#sc01{height: 90vh;}
	.sc01_fr{ padding:150px 15px; }
	.sc01_nav{ display:none; }

	.ms-img{display: none;}
	.ms-img-m{display: block; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover;}

	.main-caption{padding: 0 15px;}
	.main-caption > h2{font-size: 34px;}
	.main-caption > h5{font-size: 16px;}
	.main-caption > a{font-size: 15px; padding: .5rem 1.5rem;}

	.mouse-s > p{font-size: 14px;}

	.mainswiper .swiper-button-next, .mainswiper .swiper-button-prev{display: none;}

	/* sc02 */
	#sc02{padding: 100px 0 50px;}
	.sc02-wrap{flex-direction: column;}
	.sc02-tit{width: 100%; padding: 0 15px 1.5rem;}
	.sc02-tit > h2{text-align: left;}
	.sc02-swiper{width: 100%; padding-bottom: 2rem;}
	.more{top: 0; right: 45px;}
	.more > a{font-size: 14px;}
	.more > a::after{right: -20px;}
	.more > a:hover::before{width: 134%;}
	.sc02-swiper .swiper-pagination-progressbar{left: 15px; bottom: 0;}
	.sc02-swiper .swiper-button-next{padding: 0; width: 30px; height: 50px; line-height: 50px; border-radius: 10px;}
	.sc02-swiper .swiper-button-next > span{font-size: 20px;}

	/* sc03 */
	#sc03{padding: 50px 40px 50px 0;}
	.sc03-txt{left: 15px;}
	.sc03-img-wrap > img{border-radius: 0 0 50px 0;}

	/* sc04 */
	#sc04{padding: 50px 0;}
	.sc04-wrap{flex-direction: column;}
	.sc04-box.box1{width: 60%; margin-top: 0; margin-bottom: 2rem;}
	.sc04-box.box2{width: 100%; padding: 0 15px; margin-top: 0; margin-bottom: 2rem;}
	.sc04-box.box3{width: 80%; margin-left: auto;}

	/* sc05 */
	.sc05-cate{padding: .5rem 1.5rem;}
	.sc05-wrap h2{font-size: 30px;}
	.sc05-cate h3{font-size: 14px;}
	.sc05-cate::before, .sc05-cate::after{display: none;}

	/* sc06 */
	#sc06{padding: 50px 0;}
	.sc06-img1{width: 100%; margin-bottom: 3rem;}
	.sc06-wrap{padding-left: 0; flex-direction: column-reverse;}
	.sc06-img3{width: 80%; margin-left: auto; margin-bottom: 3rem;}
	.sc06-img2{width: 60%; margin-top: 0;}

	/* sc07 */
	#sc07{padding: 50px 0;}
	.sc07-wrap{flex-direction: column;}
	.sc07-box1{flex-direction: column; width: 100%;}
	.sc07-img-p{position: static;}
	.more07{position: static;}
	.sc07-box2{width: 90%; padding-top: 3rem; margin-left: auto;}
	.sc07-box1-img{text-align: right; margin-bottom: 3rem;}
	.sc07-box1-txt{padding: 0 15px; margin-bottom: 3rem;}
	.sc07-box1-txt > h5{margin-bottom: 1.5rem;}
	.sc07-box1-txt > p{margin-bottom: 1.5rem;}

	/* sc08 */
	.change-bg{height: 200px;}
	.change-bg.active{height: 400px;}
	.sc08-tit > h2{font-size: 30px;}

	/* sc09 */
	.sc09-wrap{flex-direction: column;}
	.sc09-box{width: 100%;}
	.sc09-box:first-child{margin-bottom: 1.5rem;}
	.sc09-tit{padding: 0; margin-bottom: 1.5rem;}

	/* sc10 */
	#sc10{padding: 50px 0;}

	/* sc11 */
	.main-map{max-height: 350px;}
	.main-map iframe{height: 350px;}
	
}