@charset "utf-8";

/**
* --------------------------------
* golf CSS
* --------------------------------
*/

/* #wrap {width: 100%;}
main {width: 100%;} */

.golf {width: 100%;}
.golf .con {width: 100%;}
.golf .con01 {position: relative;display: flex;justify-content: center;align-items: flex-end;min-height: 700px;height: 100vh;/*max-height: 960px;*/background-color: #000;overflow: hidden;}
.golf .con01 .cover {position: relative;width: 25%;height: 50vh;overflow: hidden;transform: rotate(0.001deg);will-change: width;}
.golf .con01 .cover .cover-img {position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 0) rotate(0.001deg);display: block;width: 100vw;width: 100vw;min-height: 700px;height: 100vh;/*max-height: 960px;*/overflow: hidden;z-index: 3;}
.golf .con01 .cover .cover-img img {width: 100%;height: 100%;object-fit: cover;}
.golf .con01 .cover .cover-img .dim {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);z-index: 1;}
.golf .con01 .con01-swiper {position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 0) rotate(0.001deg);width: 100vw;min-height: 700px;height: 100vh;/*max-height: 960px;*/;}
.golf .con01 .swiper {width: 100%;height: 100%;}
.golf .con01 .swiper-slide {position: relative;text-align: center;}
.golf .con01 .swiper-slide .img {display: block;width: 100%;height: 100%;overflow: hidden;}
.golf .con01 .swiper-slide .img img {width: 100%;height: 100%;object-fit: cover;}
.golf .con01 .swiper-slide .video {width: auto;height: 100%;}
.golf .con01 .swiper-slide .video video {width: 100%;height: 100%;object-fit: cover;object-position: 50% 50%;}
.golf .con01 .swiper-slide .dim {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);z-index: 2;}
.golf .con01 .swiper-slide .txt {position: absolute;left: 50%;top: 240px;transform: translate(-50%, 0) rotate(0.001deg);z-index: 3;}
.golf .con01 .swiper-slide .txt .img01 {}
.golf .con01 .swiper-slide .txt .img02 {margin-top: 66px;}
.golf .con01 .swiper-slide .tit {position: absolute;left: 0;bottom: -37px;bottom: 0;width: 100%;display: flex;justify-content: center;align-items: center;z-index: 3;}
/* .golf .con01 .swiper-slide .tit strong {color: #fff;font-size: 200px;font-weight: 800;font-family: 'Vanitas-Extrabold';} */
.golf .con01 .swiper-slide .tit .btn {display: inline-block; margin-left: 56px;}
.golf .con01 .swiper-slide.slide01 .top {position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 0) rotate(0.001deg);display: block;width: 100vw;width: 100vw;height: 100vh;overflow: hidden;z-index: 1;}
.golf .con01 .swiper-slide.slide01 .top img {width: 100%;height: 100%;object-fit: cover;}
.golf .con01 .swiper-slide.slide01 .tit {opacity: 0;}
.golf .con01 .indicator {position: absolute;left: 50%;top: 615px;transform: translate(-50%, 0);display: flex;align-items: center;z-index: 2;}
.golf .con01 .indicator .bar {position: relative;width: 320px;height: 2px;background: rgba(255, 255, 255, 0.25);}
.golf .con01 .indicator .bar span {display: block;width: 0;height: 2px;background-color: #fff;
	animation-name: countingBar;
	animation-duration: 8.1s;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.golf .con01 .indicator.play .bar span {
	animation-name: replayCountingBar;
	animation-duration: 8.1s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
@keyframes countingBar { 0% {width: 0;} 100% {width: 100%;} }
@keyframes replayCountingBar { 0% {width: 0;} 100% {width: 100%;} }
.golf .con01 .indicator .btn-stop {display: inline-block;margin-left:30px;width: 30px;height: 30px; background: url('../images/golf/con01_btn_stop.png') no-repeat 0 0;}
.golf .con01 .swiper-button-prev {left: 94px;margin-top: -45px;width: 90px;height: 90px;background: url('../images/golf/con01_btn_prev.png') no-repeat 0 0;}
.golf .con01 .swiper-button-prev::after {display: none;}
.golf .con01 .swiper-button-next {right: 94px;margin-top: -45px;width: 90px;height: 90px;background: url('../images/golf/con01_btn_next.png') no-repeat 0 0;}
.golf .con01 .swiper-button-next::after {display: none;}

.golf .con02 {text-align: center;}

.golf .con03 {overflow: hidden;}
/* .golf .con03 .inner {position: relative;display: flex;flex-wrap: wrap;flex-direction: column;width: 200vw;height: 100vh;overflow: hidden;z-index: 10;} */
.golf .con03 .inner {position: relative;display: flex;width: 100%;height: 100vh;overflow: hidden;z-index: 10;}
.golf .con03 .btn {position: absolute;left: 0;top: 0;width: 100vw;height: 100%;z-index: 10;}
.golf .con03 .btn.active {z-index: 20;}
.golf .con03 .box {position: relative;display: flex;height: 100vh;}
.golf .con03 .box01 {position: relative;flex-shrink: 0;width: 100vw;overflow: hidden;z-index: 2;}
.golf .con03 .box01 .tit {position: relative;width: 60vw;background: rgba(0, 0, 0, 0.05);}
.golf .con03 .box01 .tit img {position: absolute;left: 100px;top: 50%;transform: translateY(-50%);}
.golf .con03 .box01 .tit .img02 {opacity: 0;}
.golf .con03 .box01 .img {width: 40vw;}
.golf .con03 .box01 .img img {height: 100%;}
.golf .con03 .box02 {position: relative;flex-shrink: 0;width: 150vw;width: auto;background-color: #fff;z-index: 1;}
.golf .con03 .box02 .tit {position: relative;width: 40vw;}
.golf .con03 .box02 .tit img {position: absolute;left: 187px;top: 50%;transform: translateY(-50%);}
.golf .con03 .box02 .img {display: flex;width: 110vw;}
.golf .con03 .box02 .img img {width: calc(110vw - 200px) / 3;height: 100%;}
.golf .con03 .box02 .img img + img {margin-left: 100px;}

.golf .con04 {position: relative;/*height: 200vh; height: 300vh;*/height: 100vh;z-index: 1;background-color: #0B3A3D;}
.golf .con04 .title-wrap {position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
.golf .con04 .title-wrap .title {/*position: sticky;*/position: relative;top: 0;display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;z-index: 11;
	flex-direction: column;
}
.golf .con04 .title-wrap .title .center {position: relative;margin-top: 126px;width: 100%;height: 120px;}
.golf .con04 .title-wrap .title .tit {position: absolute;top: auto;bottom: auto;display: flex;justify-content: center;align-items: center;width: 100%;height: auto;overflow: hidden;}
.golf .con04 .title-wrap .title .tit .txt {display: flex;line-height: 120px;color: #fff;font-size: 120px;font-weight: 400;font-family: 'Vanitas-Extrabold';text-align: center;}
.golf .con04 .title-wrap .title .tit .txt span {display: inline-block;width: auto;height: 100%;opacity: 1;}
.golf .con04 .title-wrap .title .tit .txt span.blank {width: 40px;text-align: left;}
.golf .con04 .title-wrap .title .txt01 {position: relative;display: flex;justify-content: center;align-items: center;margin-top: 50px;height: 60px;text-align: center;}
.golf .con04 .title-wrap .title .txt01 .img {position: absolute;top: auto;bottom: auto;}
.golf .con04 .title-wrap .title .txt02 {position: relative;display: flex;justify-content: center;align-items: center;margin-top: 130px;height: 70px;text-align: center;}
.golf .con04 .title-wrap .title .txt02 .img {position: absolute;top: auto;bottom: auto;}
.golf .con04 .title-wrap .title .btn {margin-top: 36px;}
.golf .con04 .grid-wrap .gradient {position: absolute;left: 0;top: 0; width: 100%;height: 100%;/*background: linear-gradient(180deg, rgba(13, 67, 71, 0.00) 50%, #0EB0BB 101.72%, #0B3A3D 101.72%);*/}
.golf .con04 .grid-wrap .gradient .bg {width: 100%;height: 100%;}
.golf .con04 .grid-wrap .gradient .bg01 {background: url('../images/golf/con04_01_bg.jpg') no-repeat center/cover;}
.golf .con04 .grid-wrap .gradient .bg02 {background: url('../images/golf/con04_02_bg.jpg') no-repeat center/cover;position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.golf .con04 .grid-wrap {/*position: sticky;*/position: relative;top: 0;display: flex;padding-top: 0;height: 100vh;z-index: 1;
	/* flex-direction: column;
	justify-content: center;
	align-items: center; */
}
.golf .con04 .grid-wrap .grid {display: grid;grid-column-gap: 0;grid-row-gap: 0;grid-template-rows: minmax(12em, 1fr) minmax(12em, 1fr) minmax(12em, 1fr) minmax(12em, 1fr);grid-template-columns: minmax(12em, 1fr) minmax(12em, 1fr) minmax(12em, 1fr) minmax(12em, 1fr) minmax(12em, 1fr) minmax(12em, 1fr) minmax(12em, 1fr) minmax(12em, 1fr);grid-auto-columns: 1fr;z-index: 2;}
.golf .con04 .grid-wrap .grid-img {position: relative;min-height: 280px;min-width: 280px;overflow: hidden;}
.golf .con04 .grid-wrap .grid-img img {transform: scale(1.3);}
.golf .con04 .grid-wrap .grid01-01 {grid-area: 2 / 2;margin: -120px 0 0 -60px;}
.golf .con04 .grid-wrap .grid01-02 {grid-area: 3 / 6;margin: -70px 0 0 50px;}
.golf .con04 .grid-wrap .grid01-03 {grid-area: 2 / 8;margin: -120px 0 0 -110px;}
.golf .con04 .grid-wrap .grid02-01 {grid-area: 3 / 2;margin: 110px 0 0 -100px;}
.golf .con04 .grid-wrap .grid02-02 {grid-area: 2 / 3;margin: -220px 0 0 -155px}
.golf .con04 .grid-wrap .grid02-03 {grid-area: 2 / 7;margin: -35px 0 0 -40px;}

.golf .con05 {position: relative;width: 100%;height: 100vh;overflow: hidden;}
.golf .con05 .inner {position: relative;display: flex;justify-content: flex-end;width: 100%;height: 100%;max-width: 100%;}
.golf .con05 .inner .box {min-width: 0;width: 240px;}
.golf .con05 .inner .txt {display: flex;flex-direction: column;justify-content: center;padding-left: 87px;width: calc(100% - 1000px);height: 100%;opacity: 0;}
.golf .con05 .inner .txt .img02 {margin-top: 99px;}
.golf .con05 .list {position: absolute;left: 0;top: 0;width: 1000px;height: 100%;transform: translateX(-10%);overflow: hidden;}
.golf .con05 .list ul {width: 100%;height: 100%;}
.golf .con05 .list ul li {width: 100%;height: 50%;overflow: hidden;}
.golf .con05 .list ul li .img {position: relative;width: 100%;height: 100%;}
.golf .con05 .list ul li .img img {position: absolute;}
.golf .con05 .list ul li .img01 {background: url('../images/golf/con05_img01.jpg') no-repeat right/cover;}
.golf .con05 .list ul li .img01 img {right: 59px;bottom: 69px;}
.golf .con05 .list ul li .img02 {background: url('../images/golf/con05_img02.jpg') no-repeat right/cover;}
.golf .con05 .list ul li .img02 img {left: 80px;bottom: 70px;}
.golf .con05 .list ul li .img03 {background: url('../images/golf/con05_img03.jpg') no-repeat right/cover;}
.golf .con05 .list ul li .img03 img {right: 78px;bottom: 74px;}

/* .golf .con06 {border: 11px solid red;} */
.golf .con06 {position: relative;}
.golf .con06 .pin-spacer {overflow: hidden !important;} /**/
.golf .con06 .anim-video {position: relative;height: 100vh;background: #1A5551;overflow: hidden;}
.golf .con06 .anim-video_grid {position: absolute;top: 0;left: 50%;bottom: 100%;display: grid;align-content: stretch;gap: 200px;grid-template-columns: repeat(3,1fr);width: calc(300vw + 400px);height: 300vh;transform: translate(-50%) scale(0.33);transform-origin: top center;}
.golf .con06 .anim-video_grid {width: calc(400vw + 400px);height: 400vh;} /**/
.golf .con06 .anim-video_grid > div {position: relative;grid-auto-rows: max-content;height: 100%;}
.golf .con06 .anim-video_column {position: absolute;display: grid;gap: 200px;grid-auto-rows: max-content;width: 100%;}
.golf .con06 .anim-video img,
.golf .con06 .anim-video video {width: 100%;border-radius: 12px;object-fit: cover;overflow: hidden;}
.golf .con06 .anim-video_media {border-radius: 12px;overflow: hidden;}
.golf .con06 .center {z-index: 10;}
.golf .con06 .anim-video_grid > div:nth-child(2) .anim-video_column {top: 0;}
.golf .con06 .anim-video_grid > div:first-child .anim-video_column,
.golf .con06 .anim-video_grid > div:nth-child(3) .anim-video_column {bottom: 0;}
.golf .con06 .txt {position: absolute;left: 0;top: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;width:100%;height: 100vh;z-index: 20;opacity: 0;}
.golf .con06 .txt .tit {color: #000;font-size: 100px;font-weight: 400;font-family: 'Vanitas-Extrabold';text-align: center;}
.golf .con06 .txt .stit {margin-top: 50px;}
.golf .con06 .txt .stit img {width: 450px;}
/* .golf .con06 .anim-video .txt {height: 100%;transform: scale(0.35);opacity: 0;} */