/******************* 공통 *******************/
#section-1 {
	padding-top: 100px;
}
.section-in {
	width: 1400px;
	margin: auto;
	padding: 120px 0 0;
}
.main .section-in {
	padding: 160px 0 160px;
}
.sec-tit > span {
	font-size: 32px;
	font-weight: 800;
	color: #05a1f2;
	opacity: 0;
}
.sec-tit > div {
	margin: 18px 0 42px;
	font-size: 50px;
	font-weight: 800;
	line-height: 1.1;
	color: #0c0c0c;
	letter-spacing: -1px;
	opacity: 0;
}
.sec-tit > p {
	font-size: 28px;
	font-weight: 500;
	color: #5b5a59;
	opacity: 0;
}
.sec-tit > span.on {
	animation: fadeInUp 1s forwards;
}
.sec-tit > div.on {
	animation: fadeInUp 1s 0.3s forwards;
}
.sec-tit > p.on {
	animation: fadeInUp 1s 0.6s forwards;	
}
/******************* 공통 *******************/


/******************* section-1 *******************/
#section-1 .section-in {
	position: relative;
	padding: 0;
	width: 95%;
	height: 750px;
	margin: auto;
	border-radius: 30px;
	background: url("../img/main/main.png") no-repeat center / cover;
	z-index: 1;
	transform: scale(1);
	animation: zoomIn 0.8s forwards;
	overflow: hidden;
}
#my-video {
	background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    right: -100%;
    bottom: -100%;
    top: -100%;
    left: -100%;
    object-fit: cover;
}
#section-1 source {
	position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
	transform: translate(-50%, -50%);
}

.mv-txt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1400px;
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.mv-txt span {
	font-size: 38px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -.5px;
}
.mv-txt h1 {
	margin: 10px 0 90px;
	min-height: 176px;
	font-size: 80px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -1px;
	color: #fff;
}
a.goBtn {
	display: flex;
	lign-items: center;
	width: fit-content;
}
a.goBtn > span {
	font-size: 26px;
	font-weight: normal;
	color: #fff;
}
a.goBtn > img {
	margin-left: 15px;
	transform: rotate(0);
	transition: all 0.4s ease-in-out; 
}
a.goBtn:hover img {
	transform: rotate(405deg);
}
.main-txt::after {
  content: '';
  margin-left: .6rem;
  border-right: 2px solid rgba(255, 255, 255, 0);
  animation: cursor .9s backwards steps(2);
}
@keyframes cursor {
  from { border-right: 1px solid rgba(255, 255, 255, 0); }
  to { border-right: 1px solid rgba(255, 255, 255, 0.5); }
}

.main-scroll-icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.main-scroll-icon .move-bar {
    display: inline-block;
    width: 2px;
    height: 56px;
    background-color: rgba(255,255,255,0.25);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    vertical-align: bottom;
}
.main-scroll-icon .move-bar:after {
    position: absolute;
    content: "";
    width: 2px;
    height: 20px;
    top: -21px;
    left: 0;
    background-color: #fff;
    border-radius: 30px;
    animation: upDown 1.5s ease-in-out infinite;
}
.main-scroll-icon span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 1px;
    position: relative;
    padding: 10px 0;
    text-align: center;
    vertical-align: bottom;
}
@keyframes upDown {
    0% {
        top:-25px
    }
    100% {
        top:105%
    }
}
/******************* section-1 *******************/


/******************* section-2 *******************/
#section-2, #section-3 {
	background: #faf8f4;
}
#section-2 .sec-tit, #section-4 .sec-tit {
	text-align: center;	
}
#section-2 .goBtn {
	margin: auto;
	opacity: 0;
}
#section-2 a.goBtn > span {
	color: #0c0c0c;
}
.sports-camping-list {
	display: flex;
	margin: 54px 0;
}
.sports-camping-list li {
	width: 33.33%;
	margin: 0 10px;
	opacity: 0;
}
.sports-camping-list li:first-child {
	margin-left: 0;
}
.sports-camping-list li:last-child {
	margin-right: 0; 
}
.sports-camping-list li div {
	width: 100%;
	padding-top: 110%;
	border-radius: 30px;
	border: 1px solid #fff;
	transition: all .3s ease-in-out;
}
.sports-camping-list li a {
	display: block;
	width: 100%;
	height: 100%;
}
.sports-camping-list li p {
	margin-top: 28px;
	font-size: 30px;
	font-weight: 500;
	text-align: center;
}
.sports-camping-list li a:hover div {
	border: 1px solid #00adec;
}
.sports-camping-list li a:hover p {
	color: #00adec;
}
.sports-camping-list li:first-child div {
	background: url("../img/main/main-ga.png") no-repeat center / cover;
}
.sports-camping-list li:nth-child(2) div {
	background: url("../img/main/main-na.png") no-repeat center / cover;
}
.sports-camping-list li:last-child div {
	background: url("../img/main/main-da.png") no-repeat center / cover;
}
.sports-camping-list li:first-child.on {
	animation: fadeInUp 1s 0.9s forwards;
}
.sports-camping-list li:nth-child(2).on {
	animation: fadeInUp 1s 1.2s forwards;
}
.sports-camping-list li:last-child.on {
	animation: fadeInUp 1s 1.5s forwards;
}
#section-2 a.goBtn.on {
	animation: fadeInUp 1s 2s forwards;
}
/******************* section-2 *******************/


/******************* section-3 *******************/
#section-3 .section-in {
	padding-bottom: 160px;
}
.sports-list {
	display: flex;
	margin: 54px 0 0;
	padding: 0 29px;
}
.sports-list li {
	position: relative;
	width: 50%;
	height: 670px;
	margin: 0 35px;
	border-radius: 30px;
	overflow: hidden;
}
.sports-list li a {
	display: block;
	width: 100%;
	height: 100%;
}
.sports-list li:first-child, .sports-list li:last-child {
	opacity: 0;
	transition: all .3s ease;
}
.sports-list li:first-child img {
	height: 100%;
	transform: scale(1);
	transition: all .3s ease;
}
.sports-list li:last-child {
	margin-top: 60px;
}
.sports-list li:last-child img {
	height: 100%;
	transform: scale(1);
	transition: all .3s ease;
}
.sports-list li:first-child.on {
	animation: scaleUp 1s 0.9s forwards;
}
.sports-list li:last-child.on {
	animation: scaleUp 1s 1.2s forwards;
}
.sports-list li a p {
	position: absolute;
	left: 48px;
	bottom: 76px;
	font-size: 30px;
	font-weight: 500;
	color: #fff;
}
.sports-list li:hover {
	box-shadow: 0 25px 20px 5px rgba(156, 172, 177, 0.4);
}
.sports-list li:hover img {
	transform: scale(1.1);
}
/******************* section-3 *******************/


/******************* section-4 *******************/
#section-4 {
	width: 100%;
	background: url("../img/main/festival.png") no-repeat center / cover;
}
#section-4 .section-in {
	padding-bottom: 160px;
}
#section-4 .sec-tit > div, #section-4 .sec-tit > p {
	color: #fff;
	opacity: 0;
}
#section-4 .sec-tit > p {
	color: #c1c1c1;
}
#section-4 a.goBtn {
	margin: 30px auto 0;
	opacity: 0;
}
#section-4 a.goBtn.on {
	animation: fadeInUp 1s 1.1s forwards;
}
/******************* section-4 *******************/


/******************* section-5 *******************/
#section-5 .section-in {
	padding: 54px 0;
}
.logo-list {
	display: flex;
	align-items: center;
}
.logo-list li {
	width: 20%;
	text-align: center;
}
.mySwiper {
	display: none;
}
.mySwiper .swiper-slide {
	text-align: center;
}
.mySwiper .swiper-wrapper {
	align-items: center;
}
/******************* section-5 *******************/



@media all and (max-width:1551px){
	.mv-txt, .section-in {width: 80%;}
	.sports-list li {height: 620px;}
}

@media all and (max-width:1281px){
	.mv-txt, .section-in {width: 90%;}
}

@media all and (max-width:1201px){
	#section-1 {padding-top: 90px;}
	#section-1 .section-in {height: 730px;}
	.mv-txt span {font-size: 30px;}
	.mv-txt h1 {margin: 16px 0 50px; font-size: 76px;}

	.section-in {padding-top: 100px;}
	.main .section-in {padding: 140px 0;}

	a.goBtn > span {font-size: 22px;}
	.sec-tit > div {margin: 14px 0 38px;}
	.sec-tit > span {font-size: 28px;}
	.sec-tit > div {font-size: 46px;}
	.sec-tit > p {font-size: 24px;}
	.sports-camping-list {margin: 50px 0;}

	#section-3 .section-in {padding-bottom: 140px;}
	.sports-camping-list li p {margin-top: 24px; font-size: 24px;}

	.sports-list {margin-top: 50px;}
	.sports-list li {height: 550px;}
	.sports-list li a p {font-size: 24px;}
	
	#section-4 .section-in {padding-bottom: 140px;}

	#section-5 .section-in {padding: 35px 0;}
	.logo-list li {padding: 20px;}
	.logo-list li:first-child img {width: 102px;}
	.logo-list li:nth-child(2) img {width: 122px;}
	.logo-list li:nth-child(3) img {width: 112px;}
	.logo-list li:nth-child(4) img {width: 92px;}
	.logo-list li:last-child img {width: 132px;}
}

@media all and (max-width:1025px){
	.mv-txt span {font-size: 26px;}
	.mv-txt h1 {font-size: 72px;}

	.section-in {padding-top: 100px;}
	.main .section-in {padding: 80px 0;}

	a.goBtn > span {font-size: 20px;}
	a.goBtn > img {width: 36px;}
	.sec-tit > div {margin: 10px 0 34px;}
	.sec-tit > span {font-size: 24px;}
	.sec-tit > div {font-size: 42px;}
	.sec-tit > p {font-size: 20px;}

	.sports-camping-list {margin: 46px 0;}
	.sports-camping-list li p {margin-top: 20px; font-size: 20px;}

	#section-3 .section-in {padding-bottom: 110px;}
	.sports-list {margin-top: 46px;}
	.sports-list li {height: 500px; margin: 0 20px;}
	.sports-list li a p {font-size: 24px; left: 34px; bottom: 40px;}
	.sports-list li:last-child {margin-top: 40px;}

	#section-4 .section-in {padding-bottom: 110px;}
}

@media all and (max-width:877px){
	.mv-txt h1 {margin: 10px 0 40px; font-size: 64px; min-height: 200px;}
    
	#section-1 .section-in {height: 680px;}
	.sports-list li {height: 420px;}

	.logo-list li:first-child img {width: 82px;}
	.logo-list li:nth-child(2) img {width: 102px;}
	.logo-list li:nth-child(3) img {width: 92px;}
	.logo-list li:nth-child(4) img {width: 72px;}
	.logo-list li:last-child img {width: 112px;}
}

@media all and (max-width:768px){
	.sports-list li {height: 400px;}
}

@media all and (max-width:641px){
	#section-1 .section-in, .sports-camping-list li div, .sports-list li {border-radius: 20px;}

	.mv-txt span {font-size: 22px;}
	.mv-txt h1 {font-size: 56px;}

	.section-in {padding-top: 90px;}
	a.goBtn > span {font-size: 18px;}
	a.goBtn > img {width: 34px;}
	.sec-tit > div {margin: 10px 0 30px;}
	.sec-tit > span {font-size: 20px;}
	.sec-tit > div {font-size: 38px;}
	.sec-tit > p {font-size: 16px; line-height: 1.2;}

	.sports-camping-list {margin: 40px 0;}
	.sports-camping-list li p {margin-top: 16px; font-size: 16px;}

	#section-3 .section-in {padding-bottom: 90px;}
	.sports-list {margin-top: 40px; padding: 0 18px;}
	.sports-list li {height: 300px; margin: 0 10px;}
	.sports-list li a p {font-size: 16px; line-height: 1.2; left: 20px; bottom: 28px;}
	.sports-list li:last-child {margin-top: 30px;}
	
	#section-4 .section-in {padding-bottom: 90px;}

	.logo-list {display: none;}
	.mySwiper {display: block;}
}

@media all and (max-width:481px){
	#section-1 {padding-top: 84px;}
	#section-1 .section-in {height: 550px;}
	#section-1 .section-in, .sports-camping-list li div, .sports-list li {border-radius: 15px;}

	.mv-txt {top: 54%;}
	.mv-txt h1 {margin-bottom: 10px; font-size: 36px; min-height: 180px;}
	.mv-txt span {font-size: 18px;}

	.main-scroll-icon span {font-size: 12px;}
	.main-scroll-icon .move-bar {height: 40px;}

	.sec-tit > div {margin: 10px 0 20px;}
	a.goBtn > span {font-size: 16px;}
	a.goBtn > img {width: 28px;}
	.sec-tit > span {font-size: 18px;}
	.sec-tit > div {font-size: 26px;}

	.sports-camping-list, .sports-list {flex-direction: column;}
	.sports-camping-list li {width: 100%; margin: 0 0 20px;}
	.sports-camping-list li div {padding-top: 100%;}

	.sports-list {width: 95%; margin: 30px auto 0; padding: 0;}
	.sports-list li {width: 100%;}
	.sports-list li:first-child img, .sports-list li:last-child img {width: 100%; height: auto;}
	.sports-list li:hover {box-shadow: 0 15px 15px 2px rgba(156, 172, 177, 0.2);}
}