/* containerInnr */
.containerInnr {position: relative; overflow: hidden;}

/* header */
header {width: 100%; position: fixed; top: 0; left: 0; z-index: 99; transition: all 0.3s; border-bottom: 1px solid rgba(255,255,255,0.2);}
header .in_header {width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 25px 0 20px 0; transition: all 0.3s;}
header .in_header .logo {display: flex; align-items: center; gap: 13px;}
header .in_header .logo a {display: block;}
header nav ul {display: flex;}
header nav ul li{margin-right: 45px;}
header nav ul li:last-child {margin-right: 0;}
header nav ul li a {color: #fff; font-size: 20px; font-weight: 600; transition: all 0.3s;}

header .in_header .mo_btn {display: none; background-repeat: no-repeat;}

header.active {background-color: #fff;}
/* header.active .in_header {padding: 35px 0;} */
/* header.active .in_header .logo a img {width: 164px;} */
header.active nav ul li a {/* font-size: 18px;  */color: #131313;}
header nav ul li a:hover {font-weight: 700;}

header.shadow {box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); border-bottom: none;}

@media screen and (max-width: 1700px){
	header .in_header {width:95%;}
}

@media screen and (max-width: 1400px){
	header nav ul li {margin-right: 30px;}
	header nav ul li a {font-size: 18px;}
}

@media screen and (max-width: 1280px) {
	header .in_header .logo a.golf img {width: 160px;}
	header nav ul li {margin-right: 20px;}
}

@media screen and (max-width: 1025px) {
	header.active {border-bottom: 1px solid #e8e8e8;}
	header .in_header {padding: 20px 0;}
	header.active .in_header {padding: 20px 0;}

	header nav {position: absolute; top: 74px; left: 100vw; width: 100%; height: 100vh; background-color: #fff; padding-top: 85px; transition: all 0.7s ease-in-out;}
	header nav.active {left: 0;}

	header nav ul {flex-wrap: wrap;}
	header nav ul li {margin-right: 0; width: 100%; text-align: center;}
	header nav ul li a,
	header.active nav ul li a {display: block; width: 100%; color: #2a6d1a !important; font-size: 28px; font-weight: 700; margin-bottom: 50px;}

	header .in_header .mo_btn {text-indent: -9999px; background-size: 100%;}
	header .in_header .mo_btn.on {width: 32px; height: 23px; background-image: url('/humanframe/theme/camping/assets/img/main/mo_menu_btn.png'); display: block;}
	header .in_header .mo_btn.close {width: 23px; height: 23px; background-image: url('/humanframe/theme/camping/assets/img/main/mo_close_btn.png'); display: none;}
	header.active .in_header .mo_btn.on {background-image: url('/humanframe/theme/camping/assets/img/main/mo_menu_btnOn.png');}
}

@media screen and (max-width: 768px) {
	header {top: 0 !important;}
	header .in_header {padding: 20px 0;}
	header.active .in_header {padding: 20px 0;}
	header .in_header .logo .golf  img,
	header.active .in_header .logo .golf img {width: 150px;}
	header nav {top: 66px; padding-top: 65px;}

	header .in_header .mo_btn.on {width: 27px; height: 20px;}
}

@media screen and (max-width: 480px) {
	header .in_header .logo .golf img,
	header.active .in_header .logo .golf img {width: 155px;}
	header .in_header .mo_btn.on {width: 27px; height: 20px;}
	header .in_header .mo_btn.close {width: 20px; height: 20px;}
	header nav {top: 66px;}
	header nav ul li a, header.active nav ul li a {font-size: 22px; margin-bottom: 35px;}
}

/* section */
section {width: 100%; height: 100vh;}

/* section1 */
.section1 {background-image: url('/humanframe/theme/parkgolf/assets/img/main/visual.png'); background-repeat: no-repeat; background-size: cover; background-position: center;}
.section1 .main_video {width: 100%; height: 100vh; object-fit: cover; display: block; position: fixed; top:0; left:0;}
.section1 .main_text {position: relative; width: 1440px; height: 100%; margin: 0 auto; color: #fff; z-index: 1; overflow: hidden; display: flex; align-items: center;}
.section1 .main_text .text_box {word-break: keep-all;}
.section1 .main_text .text_box .tit_box {overflow: hidden;}

.section1 .main_text .text_box .tit_box>.txt {font-size: 40px; letter-spacing: -0.025em; margin-bottom: 36px; text-shadow: 2px 0 9px rgba(0,1,1,0.24); font-weight: 600;}
.section1 .main_text .text_box .tit_box>.tit {font-size: 82px; letter-spacing: -0.025em; text-shadow: 2px 0 9px rgba(0, 1, 1, 0.24); font-weight: 800; /*  transform: translateY(100%); transition-duration: 1.5s; */}

.section1 .sub_text {position: absolute; left: 65px; bottom: 65px; color: #fff; padding-left: 30px; box-sizing: border-box; z-index: 1;  text-align: left;}
.section1 .sub_text::before {content: ''; width: 1px; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff;}
.section1 .sub_text .tit {font-size: 24px; margin-bottom: 25px; font-weight: 600; letter-spacing: -0.03em;}
.section1 .sub_text .txt {font-size: 18px; font-weight: 400; letter-spacing: -0.03em;}

.section1 .scroll {display: flex; align-items: center; justify-content: center; width: 127px; height: 126px; position: absolute; bottom: 75px; right: 105px; z-index: 99;}
.section1 .scroll::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/humanframe/theme/parkgolf/assets/img/main/sec01_scroll.png') no-repeat; background-size: 100%; animation: scroll 10s linear infinite;}

@keyframes scroll {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}
}

@media screen and (max-width: 1700px) {
	.section1 .main_text {width: 95%;}
	.section1 .scroll {right: 30px;}
}

@media screen and (max-width: 1280px) {
	.section1 .main_text .text_box .tit_box>.txt {font-size: 34px; margin-bottom: 25px;}
	.section1 .main_text .text_box .tit_box>.tit {font-size: 72px;}
}

@media screen and (max-width: 1025px) {
	.section1 .reviewLink {width: 115px; height: 120px; bottom: 175px;}
	.section1 .scroll {width: 110px; height: 109px;}
}

@media screen and (max-width: 768px) {
	.section1 .main_text .text_box .tit_box>.txt {font-size: 30px;}
	.section1 .main_text .text_box .tit_box>.tit {font-size: 60px;}
}

@media screen and (max-width: 480px) {
	.section1 .main_text {width: 100%; padding: 0 10px; box-sizing: border-box;}
	.section1 .main_text .text_box .tit_box>.txt {font-size: 28px; margin-bottom: 20px;}
	.section1 .main_text .text_box .tit_box>.tit {font-size: 50px;}
	.section1 .scroll {width: 100px; height: 99px; right: 15px; bottom: 40px;}
	.section1 .scroll img {width: 18px;}
}

/* section2 */
.section2 .campList {width: 100%; height: 100%; display: flex;}
.section2 .campList>li {width: 20%; height: 100vh; position: relative; transition-duration: 0.5s; background-repeat: no-repeat; background-size: cover; background-position: center;}
.section2 .campList>li:hover {width: 25%;}
.section2 .campList>li:first-child {background-image: url('/humanframe/theme/parkgolf/assets/img/main/sec02_img1.png');}
.section2 .campList>li:nth-child(2) {background-image: url('/humanframe/theme/parkgolf/assets/img/main/sec02_img2.png');}
.section2 .campList>li:nth-child(3) {background-image: url('/humanframe/theme/parkgolf/assets/img/main/sec02_img3.png');}
.section2 .campList>li:nth-child(4) {background-image: url('/humanframe/theme/parkgolf/assets/img/main/sec02_img4.png');}
.section2 .campList>li:last-child {background-image: url('/humanframe/theme/parkgolf/assets/img/main/sec02_img5.png');}
.section2 .campList>li::before {content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); transition: all 0.5s;}
.section2 .campList>li:hover::before {opacity: 0; visibility: hidden;}
.section2 .campList>li::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 631px; background: linear-gradient(to top, rgba(0,0,0,0.62), transparent); opacity: 0; transition: all 0.5s;}
.section2 .campList>li:hover::after {opacity: 1;}
.section2 .campList>li .title {font-size: 30px; font-weight: 700; line-height: 1.2; color: #fff; position: absolute; top: 150px; left: 50px; transition: all 0.5s;}
.section2 .campList>li:hover .title {opacity: 0;}
.section2 .campList>li .textBox {width: 100%; position: absolute; bottom: 0; left: 0; z-index: 999; color: #fff; padding: 0 0 130px 50px; box-sizing: border-box; opacity: 0; visibility: hidden; transition: all 0.3s;}
.section2 .campList>li:hover .textBox {opacity: 1; visibility: visible;}
.section2 .campList>li .textBox .top_text {margin-bottom: 59px;}
.section2 .campList>li .textBox .icon {margin-bottom: 17px;}
.section2 .campList>li .textBox .tit {font-weight: 700; font-size: 30px; margin-bottom: 30px; letter-spacing: -0.025em; line-height: 1.2;}
.section2 .campList>li .textBox .txt {font-weight: 500; font-size: 18px; letter-spacing: -0.025em; line-height: 24px;}
.section2 .campList>li .textBox .link {width: 146px; height: 35px; display: flex; align-items: center; justify-content: center; gap: 13px; background: rgba(255,255,255,0.72); border-radius: 17px;}
.section2 .campList>li .textBox .link p {font-size: 15px; font-weight: 500; letter-spacing: -0.025em; color: #000000;}
.section2 .campList>li .textBox .link img {transition: all 0.3s;}
.section2 .campList>li .textBox .link:hover img {transform: translateX(5px);}

.section2 .campList>li video {width: 100%; height: 100%; object-fit: cover; display: block;}

@media screen and (max-width: 1400px) {
	.section2 .campList>li .title {top: 70px; font-size: 28px; left: 18px;}
	.section2 .campList>li .textBox {padding: 0 0 90px 18px;}
	.section2 .campList>li .textBox .tit {font-size: 28px;}
	.section2 .campList>li .textBox .txt {font-size: 16px;}
	.section2 .campList>li .textBox .top_text {margin-bottom: 25px;}
}

@media screen and (max-width: 1025px) {
	.section2 .campList {flex-wrap: wrap;}
	.section2 .campList>li {width: 100%; height: 20vh;}
	.section2 .campList>li::after {height: 40%;}
	.section2 .campList>li .title {top: 50%; transform: translateY(-50%);}
	.section2 .campList>li .textBox {display: flex; align-items: center; flex-wrap: wrap; height: 100%; padding: 30px 0 30px 30px;}
	.section2 .campList>li .textBox .top_text {margin-bottom: 0; width: 100%;}
	.section2 .campList>li .textBox .tit {margin-bottom: 10px;}
	.section2 .campList>li .textBox .link {position: absolute; bottom: 30px; right: 20px;}
	.section2 .campList>li:hover {width: 100%; height: 32vh;}
}

@media screen and (max-width: 480px) {
	.section2 {height: auto !important;}
	.section2 .fp-tableCell {height: auto !important;}
	.section2 .campList {flex-direction: column;}
	.section2 .campList>li {height: 15vh;}
	.section2 .campList>li:hover {height: 20vh;}
	.section2 .campList>li .title {font-size: 22px;}
	.section2 .campList>li .textBox {padding: 15px 0 15px 15px;}
	.section2 .campList>li .textBox .icon {margin-bottom: 10px;}
	.section2 .campList>li .textBox .icon img {width: 17px;}
	.section2 .campList>li .textBox .tit {font-size: 22px; margin-bottom: 0;}
	.section2 .campList>li .textBox .txt {display: none;}
	.section2 .campList>li .textBox .link {bottom: 25px; width: 130px; height: 30px;}
	.section2 .campList>li .textBox .link p {font-size: 14px;}
}

/* footer */
footer {width: 100%; background-color: #202020; color: #fff; padding: 50px 0; text-align: center;}
footer .logo {display: inline-block; margin-bottom: 35px;}
footer .text {margin-bottom: 20px;}

@media screen and (max-width: 1025px) {
	footer {padding: 35px 0;}
	footer .logo {margin-bottom: 25px;}
	footer .text {margin-bottom: 8px;}
}

@media screen and (max-width: 480px) {
	footer .logo {margin-bottom: 25px;}
	footer {padding: 25px 10px; box-sizing: border-box; font-size: 14px;}
}