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 2rem;}

.mc-tit{text-align: center;}
.mc-tit > h2{font-size: 50px; line-height: 1.2; display: inline-block; position: relative; font-weight: 800;}
.mc-tit > h5{font-size: 24px; line-height: 1; font-weight: 400; margin-top: 1.5rem;}
.mc-tit > h2.ani{transform: translateY(80px); opacity: 0; transition: 1s;}
.mc-tit > h2.ani.act{transform: translateY(0); opacity: 1;}
.mc-tit > h5.ani{transform: translateY(80px); opacity: 0; transition: 1s;}
.mc-tit > h5.ani.act{transform: translateY(0); opacity: 1;}

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

.main-caption{width: 100%; padding: 0 4rem; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 99; color: #fff;text-align: center;}
.main-caption > h2{font-size: 60px; line-height: 1.3; font-weight: 800; margin-bottom: 2rem;}
.main-caption > h5{font-size: 24px; margin-bottom: 1.5rem; font-weight: 500;}
.main-caption > a{display: inline-block; font-size: 16px; padding: 10px 3rem; border: 1px solid #fff; transition: .5s;}
.main-caption > a:hover{background-color: #fff; color: #1c747d;}
.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;}

.hnh{font-size: 20px; font-weight: 400; display: inline-block; position: absolute; top: 50%; left: 2rem; transform: translateY(-50%); z-index: 2; color: #fff; writing-mode: tb; letter-spacing: 10px;}

/* 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: 15px;}
.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);}
}

/* sc02 */
#sc02 .mc-tit{padding: 100px 0; color: #000;}
.sc02-wrap{padding: 50px 0; background-color: #071119;}
.sc02-sw-tit{max-width:1440px; width:100%; margin:0 auto 1.5rem; display: flex; justify-content: space-between; align-items: flex-end;}
.sc02-swt{color: #fff;}
.sc02-swt > h3{font-size: 40px; font-weight: 800; display: inline-block;}
.sc02-swt > h5{font-size: 18px; font-weight: 500; display: inline-block; margin-left: 1rem;}
.sc02-swiper-wrap{width: 100%; max-width: 1440px; margin: 2rem auto 0;}
.sc02-swiper{width: 100%; position: relative;}
.sc02Swiper .swiper-slide > a{display: block; height: 500px; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #333; position: relative; overflow: hidden;}
.sc02Swiper.swiper{overflow: visible;}
.sc02-btn{width: 130px; height: 60px; position: relative;}
.sc02-btn .swiper-button-next.sc02, .sc02-btn .swiper-button-prev.sc02{background-image: none; width: 60px; height: 60px; background-color: transparent; border-radius: 50%; border: 1px solid #fff; transition: .5s; line-height: 65px; top: var(--swiper-navigation-top-offset,37%);}
.sc02-btn .swiper-button-next.sc02 > span, .sc02-btn .swiper-button-prev.sc02 > span{font-size: 24px; color: #fff; transition: .5s; line-height: 1;}
.swiper-button-next.sc02:after, .swiper-rtl .swiper-button-prev.sc02:after{display: none;}
.swiper-button-prev.sc02:after, .swiper-rtl .swiper-button-next.sc02:after{display: none;}
.sc02-btn .swiper-button-next.sc02{right: 0;}
.sc02-btn .swiper-button-prev.sc02{left: 0;}
.sc02-btn .swiper-button-next.sc02:hover, .sc02-btn .swiper-button-prev.sc02:hover{background-color: #fff;}
.sc02-btn .swiper-button-next.sc02:hover > span, .sc02-btn .swiper-button-prev.sc02:hover > span{color: #1c747d;}

.sc02-img-cont{padding: 3rem; width: 100%; position: absolute; left: 0; bottom: 0; color: #fff; text-align: right; transition: .3s;}
.sc02-img-cont > h5{font-size: 22px; line-height: 1;}
.sc02-img-cont > span{display: inline-block; padding: 6px 18px; transition: .3s; font-size: 16px; font-weight: 400; color: #1c747d; border: 1px solid #1c747d; background-color: #fff; width: 117px; position: absolute; right: 3rem; bottom: -4rem;}

.sc02-sw-tit.ani{transform: translateY(80px); opacity: 0; transition: 1s;}
.sc02-sw-tit.ani.act{transform: translateY(0); opacity: 1;}

/* sc03 */
#sc03{padding: 100px 0;}
#sc03 .mc-tit{color: #000; margin-bottom: 3rem;}
.sc03-swiper-wrap{width: 100%;}
.sc03-swiper{width: 100%; position: relative;}
.sc03Swiper.swiper{overflow: visible;}
.yt-section{width: 100%; position: relative; border-radius: 25px; overflow: hidden;}
.swiper-button-next.sc03, .swiper-button-prev.sc03{background-image: none; width: 60px; height: 60px; background-color: transparent; border-radius: 50%; border: 1px solid #1c747d; transition: .5s; line-height: 65px;}
.swiper-button-next.sc03 > span, .swiper-button-prev.sc03 > span{font-size: 24px; color: #1c747d; transition: .5s; line-height: 1;}
.swiper-button-next.sc03:after, .swiper-rtl .swiper-button-prev.sc03:after{display: none;}
.swiper-button-prev.sc03:after, .swiper-rtl .swiper-button-next.sc03:after{display: none;}
.swiper-button-next.sc03{right: 2rem;}
.swiper-button-prev.sc03{left: 2rem;}
.swiper-button-next.sc03:hover, .swiper-button-prev.sc03:hover{background-color: #1c747d;}
.swiper-button-next.sc03:hover > span, .swiper-button-prev.sc03:hover > span{color: #fff;}

/* sc04 */
#sc04{padding: 100px 0; background-color: #071119;}
#sc04 .mc-tit{color: #fff; margin-bottom: 3rem;}
.sc04-wrap{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 2rem;}
.sc04-box{width: 24%; margin-bottom: 1.5rem;}
.sc04-box > a{display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 20px;}
.sc04-box > a > img{transition: .5s;}
.sc04-box > a:hover > img{transform: scale(1.1);}
.sc04-link{text-align: center; color: #fff;}
.sc04-link > a{display: inline-block; font-size: 16px; padding: 10px 3rem; border: 1px solid #fff; transition: .5s;}
.sc04-link > a:hover{background-color: #fff; color: #1c747d;}


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

	.sc02Swiper .swiper-pagination.sc02{display: none;}
	.sc03Swiper .swiper-pagination.sc03{display: none;}

	.sc02Swiper .swiper-slide > a:hover .sc02-img-cont{bottom: 3rem;}
	.sc02Swiper .swiper-slide > a:hover .sc02-img-cont > span{bottom: -10px;}

}
@media(max-width:1439px){ 
	.mc-con{padding: 0 2rem;}
	.sc02-swiper-wrap{padding: 0 2rem;}
	.sc03-swiper-wrap{padding: 0 2rem;}
  }
@media(max-width:991px){
	.mc-con{padding: 0 15px;}
	.sc01_fr{ padding:150px 15px; }
	.sc01_nav{ display:none; }

	.ms-img{display: none;}
	.ms-img-m{display: block;}

	.main-caption{padding: 0 15px;}
	.main-caption > h2{font-size: 30px;}
	.main-caption > h5{font-size: 16px;}

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

	.mc-tit > h2{font-size: 28px;}
	.mc-tit > h5{font-size: 16px; margin-top: 1rem;}

	.main-con{padding: 0 15px;}

	/* sc02 */
	#sc02 .mc-tit{padding: 50px 0;}
	.sc02-wrap{padding: 40px 0;}
	.sc02-swt{padding: 0 15px;}
	.sc02-swt > h3{font-size: 24px; display: block; margin-bottom: 10px;}
	.sc02-swt > h5{font-size: 14px; display: block; margin-left: 0;}
	.sc02-btn{display: none;}
	.sc02-swiper-wrap{padding: 0 15px; margin-top: 1.5rem;}
	.sc02Swiper.swiper{padding-bottom: 2rem;}
	.sc02Swiper .swiper-pagination.sc02{bottom: 0;}
	.sc02Swiper .swiper-pagination.sc02 .swiper-pagination-bullet{background: #fff;}
	.sc02Swiper .swiper-pagination.sc02 .swiper-pagination-bullet-active{background: #1c747d;}
	.sc02Swiper .swiper-slide > a{height: 300px;}
	.sc02-img-cont{padding: 2rem;}
	.sc02-img-cont > h5{margin-bottom: 10px;}
	.sc02-img-cont > span{position: relative; right: 0; bottom: 0; padding: 5px 15px; width: auto; font-size: 14px;}

	/* sc03 */
	#sc03{padding: 50px 0;}
	#sc03 .mc-tit{margin-bottom: 1.5rem;}
	.swiper-button-next.sc03, .swiper-button-prev.sc03{display: none;}
	.sc03-swiper-wrap{padding: 0 15px;}
	.sc03Swiper.swiper{padding-bottom: 2rem;}
	.sc03Swiper .swiper-pagination.sc03{bottom: 0;}
	.sc03Swiper .swiper-pagination.sc03 .swiper-pagination-bullet-active{background: #1c747d;}


	/* sc04 */
	#sc04{padding: 50px 0;}
	#sc04 .mc-tit{margin-bottom: 1.5rem;}
	.sc04Swiper.swiper{padding-bottom: 2rem; margin-bottom: 2rem;}
	.sc04Swiper .swiper-slide > a{display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 20px;}
	.sc04Swiper .swiper-pagination.sc04{bottom: 0;}
	.sc04Swiper .swiper-pagination.sc04 .swiper-pagination-bullet{background: #fff;}
	.sc04Swiper .swiper-pagination.sc04 .swiper-pagination-bullet-active{background: #1c747d;}


}