@charset 'utf-8';

.top_banner { position:relative; width:100%; height:118px; background-color:#fff; border-top:3px solid var(--color-orange); z-index:10000; }
.top_banner .inner { display:flex; align-items:center; justify-content:space-between;  height:100%;}
.top_banner .txtbox { display:flex; align-items:center; justify-content:center; }
.top_banner .txtbox .txt { font-size:16px; font-weight:600; line-height:1.6; letter-spacing:0.04em; }
.top_banner .linkbox { }
.top_banner .linkbox .selbox { position:relative; display:inline-block; vertical-align:middle; width:272px;}
.top_banner .linkbox .selbox p { cursor:pointer; text-transform:uppercase;display:flex; align-items:center; padding:0 20px; width:100%; height:45px; color:rgba(0,0,0,0.8); font-size:14px; font-weight:700; letter-spacing:0.04em; border-radius:3px; border:1px solid #000; background-color:#fff; }
.top_banner .linkbox .selbox ul { display:none; position:absolute; left:0; top:40px; padding:5px 20px 0 20px; width:100%; border-radius:0 0 3px 3px; border:1px solid #000; border-top:none; background-color:#fff; }
.top_banner .linkbox .selbox ul > li { position:relative; cursor:pointer;text-transform:uppercase; height:45px; display:flex; align-items:center; border-top:1px solid #e5e5e5; color:rgba(0,0,0,0.8); font-size:14px; font-weight:500; transition:all 0.3s ease-in-out; }
.top_banner .linkbox .selbox ul > li:hover,
.top_banner .linkbox .selbox ul > li.on { color:var(--color-orange); }
.top_banner .linkbox .selbox ul > li:hover:before,
.top_banner .linkbox .selbox ul > li.on:before  { content:""; display:block; position:absolute; right:6px; top:50%; transform:translateY(-50%); width:14px; height:10px; background:url(../img/main/icon_ch.png) no-repeat center; }
.top_banner .linkbox .btn { display:inline-block; vertical-align:middle; margin:0 20px 0 15px; }
.top_banner .linkbox .btn a { display:none; align-items:center; justify-content:center; width:98px; height:45px; color:#fff; font-size:14px; font-weight:700; letter-spacing:0.04em; border-radius:3px; background:var(--color-orange); transition:all 0.3s ease-in-out; }
.top_banner .linkbox .btn a.on { display:flex; }
.top_banner .linkbox .btn a:hover.on { color:var(--color-orange); border:1px solid var(--color-orange); background-color:#fff; }
.top_banner .linkbox .btn_close { position:relative; cursor:pointer; display:inline-block; vertical-align:middle; width:20px; }
.top_banner .linkbox .btn_close:after { }
.top_banner .linkbox .btn_close span { z-index:1; height:5px; width:22px; position:absolute; top:50%; left:50%; transform:rotate(45deg); margin:-3px 0 0 -11px; background:#5c5c5c; display:block; }
.top_banner .linkbox .btn_close span:after { content:""; display:block; height:5px; width:22px; position:absolute; top:50%; left:50%; transform:rotate(-90deg); margin:-3px 0 0 -11px; background:#5c5c5c; }
@media screen and (max-width:1280px){
	.top_banner .linkbox .selbox { width:220px;}
}
@media screen and (max-width:1240px){
	.top_banner { height:auto; padding:20px 0; }
	.top_banner .inner  { display:block; }
	.top_banner .txtbox { text-align:center; padding-bottom:30px; }
	.top_banner .txtbox .txt br { display:none; }
	.top_banner .linkbox { text-align:center; }
}
@media screen and (max-width:1024px){
	.top_banner .txtbox .txt { font-size:14px; }
	.top_banner .linkbox .selbox { width:180px; }
	.top_banner .linkbox .selbox p { height:40px; font-size:13px; padding:0 15px; }
	.top_banner .linkbox .selbox ul { top:35px; padding:5px 15px 0 15px }
	.top_banner .linkbox .selbox ul > li { height:40px; }
	.top_banner .linkbox .btn { margin:0 15px 0 10px; }
	.top_banner .linkbox .btn a { width:85px; height:40px; }
	.top_banner .linkbox .btn_close span { height:4px; width:20px; margin:-2px 0 0 -10px; }
	.top_banner .linkbox .btn_close span:after { height:4px; width:20px; margin:-2px 0 0 -10px;  }
}

#main {}
#main .visual { position:relative; overflow:hidden; }
#main .visual .v_cont { text-align:center; width:100%; padding-bottom:50px; }
#main .visual .txt-box { overflow:hidden; display:inline-block; padding-top:6%; }
#main .visual .txt-box .txt { position:relative; }
#main .visual .txt-box .txt span { font-size:calc(150 / 1920 * 100vw); font-weight:900; color:#fff; line-height:0.90; }
#main .visual .txt-box .txt-3 span,
#main .visual .txt-box .txt-5 span { color:#f8921d; }
#main .visual .txt-box .imgbox { position:absolute; left:0; top:0; width:100%; text-align:center;  }
#main .visual .txt-box .imgbox img { height:calc(900 / 1920 * 100vw); }

#main .visual .txt-box .txt.txt-2 { text-align:right; }
#main .visual .txt-box .txt.txt-1 { margin-left:2vw; }
#main .visual .txt-box .txt.txt-2 { margin-right:11vw; }
#main .visual .txt-box .txt.txt-3 { margin-left:8vw; }
#main .visual .txt-box .txt.txt-4 { margin-left:4vw; }

#main .visual .scrollDown { position:relative; margin-top:40px; width:100%; height:100px; text-align:center; z-index:1; }
#main .visual .scrollDown span { position:relative; display:inline-block; width:59px; height:59px; margin:0 auto; }
#main .visual .scrollDown span:before { content:""; display:block; width:100%; height:100%; border-radius:60px; background:url(../img/main/scrollarr.png) no-repeat center; background-size:100%; position:absolute; animation:scrollDown 2s infinite; }

/* animation */
#main .visual .txt-box .imgbox { opacity:0; }
#main .visual .txt-box .txt span { opacity:0; display:block; }
#main .visual .txt-box .txt { overflow:hidden; text-align:left; }
#main .visual.subOn .txt-box .imgbox { animation:imgDown 1.2s 0.1s; animation-fill-mode:both; }
#main .visual.subOn .txt-box .txt.txt-1 span { animation:txtLeft 1.5s 0.6s; animation-fill-mode:both; }
#main .visual.subOn .txt-box .txt.txt-2 span { animation:txtRight 1.5s 0.8s; animation-fill-mode:both; }
#main .visual.subOn .txt-box .txt.txt-3 span { animation:txtLeft 1.5s 1.0s; animation-fill-mode:both; }
#main .visual.subOn .txt-box .txt.txt-4 span { animation:txtLeft 1.2s 1.2s; animation-fill-mode:both; }
#main .visual.subOn .txt-box .txt.txt-5 span { animation:txtLeft 1.2s 1.4s; animation-fill-mode:both; }
@media screen and (max-height:930px){
	#main .visual .txt-box .txt span { font-size:calc(130 / 930 * 100vh); }
	#main .visual .txt-box .imgbox img { height:calc(800 / 930 * 100vh); }
}
@media screen and (max-height:900px){
	#main .visual .txt-box .txt span { font-size:calc(125 / 900 * 100vh); }
}

@media screen and (max-height:890px){
	#main .visual .txt-box .txt span { font-size:calc(120 / 890 * 100vh); }
}
@media screen and (max-height:800px){
	#main .visual .txt-box .txt span { font-size:calc(110 / 860 * 100vh); }
}

@media screen and (max-width:1542px){
	#main .visual { display:block; }
	#main .visual:before { content:""; display:block; padding-bottom:60%; } 
	#main .visual .v_cont { position:absolute; left:0; top:0; width:100%; }
	#main .visual .txt-box { padding-top:5%; }
	#main .visual .txt-box .txt span { font-size:calc(135 / 1542 * 100vw); }
	#main .visual .txt-box .imgbox img { height:calc(850 / 1542 * 100vw); }
	#main .visual .scrollDown { position:relative; }
}
@media screen and (max-width:1024px){
	#main .visual:before { padding-bottom:75%; } 
	#main .visual .txt-box { padding-top:12%; }
	#main .visual .txt-box .imgbox img { height:calc(700 / 1024 * 100vw); }
	#main .visual .scrollDown span { width:45px; height:45px; }
}
@media screen and (max-width:860px){
	#main .visual .txt-box .imgbox img { height:calc(660 / 860 * 100vw); }
}

@media screen and (max-width:640px){
	#main .visual:before { padding-bottom:100%; }
	#main .visual .txt-box { padding-top:26%; }
	#main .visual .txt-box .txt { position:relative; z-index:2 }
	#main .visual .txt-box .txt span { font-size:calc(75 / 640 * 100vw); }
	#main .visual .txt-box .imgbox img { height:calc(640 / 640 * 100vw); }
	#main .visual .scrollDown span { width:38px; height:38px; }
}


#simulator { padding-top:8%; overflow:hidden; }
#simulator.sub { padding-top:calc(100px + 1%); }
#simulator .txt p { font-size:calc(311 / 1920 * 100vw); }
#simulator .img:nth-of-type(2) { z-index:10; }
#simulator .img:nth-of-type(2) img { transform:translate(-0.5px); }
#simulator .btn { position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:22; opacity:0; }
@media screen and (max-width:860px){
	#main #simulator{ margin-top:12%; }
}

#technology { padding-top:12%; overflow:hidden; }
#technology.sub { padding-top:4%; }
#technology .txt { padding-top:3% }
#technology .txt p { font-size:calc(267.5 / 1920 * 100vw); }
@media screen and (max-width:860px){
	#technology{ margin-top:12%; }
	#technology.sub { padding-top:12%; }
}

/* animation */
.txtSlide span { animation:marquee 10s infinite linear; }
.txtSlideRev span { animation:marqueeRev 15s infinite linear; }
#main #simulator .imgbox .img,
#main #technology .imgbox .img { opacity:0; }
#main #simulator.subOn .imgbox .img { animation:ani_2s 1.5s 0.2s; animation-fill-mode:both; }
#main #technology.subOn .img { animation:ani_1s 1.5s 0.2s; animation-fill-mode:both; }



/* news */
#main #news { margin-top:12%; padding-top:6.5%; }
#main #news p:nth-child(2) { position:absolute; left:calc(54% + 2.5% + 4px); top:7.5%; }
#main #news .list{}
#main #news .list ul { margin-top:3.5%; }
#main #news .list li:not(:last-child) { margin-bottom:5%; }
#main #news .list li:last-child { margin-bottom:7%; }
#main #news .list li:nth-child(1) {  }
#main #news .list li:nth-child(1) .txt { padding-top:10%; } /* 22.09.07 */
#main #news .list li:nth-child(1) .img { }
@media screen and (max-width:1280px){
	#main #news .list li:nth-child(1) .txt { padding-top:4%; } /* 22.09.07 */
}
@media screen and (max-width:1024px){
	#main #news p { display:inline-block; }
	#main #news p:nth-child(2) { position:relative; left:unset; top:0; text-align:left; margin-left:1%; }
	#main #news .list li:nth-child(1) .txt { padding-top:0; }
}
@media screen and (max-width:860px){
	#main #news{ margin-top:25%; }
}


/* animation */
#main #news .tit_s1.subOn p:nth-child(1) { transition:all 0.8s 0.8s cubic-bezier(0.6, 0.6, 0.3, 1); background-image:linear-gradient(to right, #fff, #fff, #fff, #fff 50%, var(--color-orange) 50%); -webkit-text-fill-color: transparent; background-position:0%; }
#main #news .tit_s1.subOn p:nth-child(2) { transition:all 0.8s 0.9s cubic-bezier(0.3, 0.3, 0.3, 1); background-image:linear-gradient(to right, var(--color-orange), var(--color-orange), var(--color-orange), var(--color-orange) 50%, #fff 50%); -webkit-text-fill-color: transparent; background-position:0%; }
#main #news .tit_s1.subOn p:nth-child(1) { animation:ani_1 0.5s 0.2s; animation-fill-mode:both; }
#main #news .tit_s1.subOn p:nth-child(2) { animation:ani_2 0.5s 0.2s; animation-fill-mode:both; }

#main #news .list li > div,
#main #news .list li dt,
#main #news .list li dd,
#main #news .list li .more_s1 { opacity:0; }
#main #news .list li.subOn .img { animation:ani_1s 0.8s 0.1s; animation-fill-mode:both; overflow:hidden; }
#main #news .list li.subOn .img img { animation:bgs5 1.5s 0.8s; animation-fill-mode:both; }
#main #news .list li.subOn .txt { animation:ani_2 0.8s 0.2s; animation-fill-mode:both; }
#main #news .list li.subOn .txt dt { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
#main #news .list li.subOn .txt dd { animation:ani_2 0.8s 0.4s; animation-fill-mode:both; }
#main #news .list li.subOn .txt .more_s1 { animation:ani_3 0.8s 0.6s; animation-fill-mode:both; }
#main #news .list li:nth-child(2n).subOn .img { animation:ani_2s 0.8s 0.1s; animation-fill-mode:both; overflow:hidden; }
#main #news .list li:nth-child(2n).subOn .txt dt { animation:ani_1 0.8s 0.3s; animation-fill-mode:both; }
#main #news .list li:nth-child(2n).subOn .txt dd { animation:ani_1 0.8s 0.4s; animation-fill-mode:both; }


/* why GolfZone*/
#main #why {padding:90px 0; }
#main #why .tit_s1 .txt_1 { padding:2.5% 0 0 24%; }
#main #why .list { color:#fff; margin-top:4%; }
#main #why .list li:not(:last-child) { margin-bottom:5%; }
#main #why .list dt { position:relative; /* padding-top:calc(210 / 1920 * 100vw); */ } /* 22.8.31 */
#main #why .list dt strong { width:100%; position:absolute; left:0; top:0; font-size:calc(190 / 1920 * 100vw); font-weight:800; display:block; }
#main #why .list dt span { color:var(--color-orange); }
@media screen and (max-width:1024px){
	#main #why p { display:inline-block; }
	#main #why .tit_s1 .txt_1 { padding:0; margin-left:1%; }
}

/* animation */
#main #why .tit_s1.subOn p:nth-child(1) { transition:all 0.8s 0.8s cubic-bezier(0.6, 0.6, 0.3, 1); background-image:linear-gradient(to right, var(--color-orange), var(--color-orange), var(--color-orange), var(--color-orange) 50%, #fff 50%); -webkit-text-fill-color: transparent; background-position:0%; }
#main #why .tit_s1.subOn p:nth-child(2) { transition:all 0.8s 0.9s cubic-bezier(0.5, 0.5, 0.5, 1); background-image:linear-gradient(to right, #fff, #fff, #fff, #fff 50%, var(--color-orange) 50%); -webkit-text-fill-color: transparent; background-position:0%; }
#main #why .tit_s1.subOn p:nth-child(1) { animation:ani_1 0.5s 0.2s; animation-fill-mode:both; }
#main #why .tit_s1.subOn p:nth-child(2) { animation:ani_2 0.5s 0.2s; animation-fill-mode:both; }

#main #why .list li > div,
#main #why .list li dt,
#main #why .list li dt span,
#main #why .list li dd,
#main #why .list li .more_s1 { opacity:0; }
#main #why .list li.subOn .img { animation:ani_1s 0.8s 0.1s; animation-fill-mode:both; overflow:hidden; }
#main #why .list li.subOn .img img { animation:bgs5 1.5s 0.8s; animation-fill-mode:both; }
#main #why .list li.subOn .txt { animation:ani_2 0.8s 0.2s; animation-fill-mode:both; }
#main #why .list li.subOn .txt dt { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
#main #why .list li.subOn .txt dt span { animation:ani_4 0.8s 1.0s; animation-fill-mode:both; display:inline-block }
#main #why .list li.subOn .txt dd { animation:ani_2 0.8s 0.4s; animation-fill-mode:both; }
#main #why .list li.subOn .txt .more_s1 { animation:ani_3 0.8s 0.6s; animation-fill-mode:both; }
#main #why .list li:nth-child(2n).subOn .img { animation:ani_2s 0.8s 0.1s; animation-fill-mode:both; overflow:hidden; }
#main #why .list li:nth-child(2n).subOn .txt dt { animation:ani_1 0.8s 0.3s; animation-fill-mode:both; }
#main #why .list li:nth-child(2n).subOn .txt dd { animation:ani_1 0.8s 0.4s; animation-fill-mode:both; }

/* numbers */
#main #numbers { margin-top:6%; padding:6.5% 0 12% 0; } /* 22.09.07 */
#main #numbers .tit_s1 .txt_1 { padding:2.5% 0 0 0; }
#main #numbers .info { margin-top:8%; }
#main #numbers .info ul { display:grid; grid-template-columns:repeat(2, 1fr); text-align:center; gap:25% 0; }
#main #numbers .info .num { color:var(--color-orange); }
#main #numbers .info .num p { font-size:calc(65 / 1920 * 100vw); font-weight:900; margin-bottom:3%; }
#main #numbers .info .num span { font-size:calc(35 / 1920 * 100vw); font-weight:500; text-transform:uppercase; }
#main #numbers .info .txt { font-size:calc(20 / 1920 * 100vw); color:#fff; line-height:normal; margin-top:4%; }
@media screen and (max-width:1280px){
	#main #numbers .info .txt { font-size:calc(18 / 1280 * 100vw); }
}
@media screen and (max-width:1024px){
	#main #numbers p { display:inline-block; }
	#main #numbers .tit_s1 .txt_1 { padding:0; margin-left:1.5%; }
	#main #numbers .info .txt { font-size:calc(18 / 1024 * 100vw); }
}
@media screen and (max-width:860px){
	#main #numbers .info { margin-top:6%; }
	#main #numbers .info ul { display:block; }
	#main #numbers .info ul li { padding-top:10%; }
	#main #numbers .info .txt { margin-top:0; }
}
@media screen and (max-width:640px){
	#main #numbers .info .num p { font-size:26px; margin-bottom:3%; }
	#main #numbers .info .num span { font-size:16px; }
	#main #numbers .info .txt { font-size:18px; }
}

/* animation */
#main #numbers .tit_s1.subOn p:nth-child(1) { transition:all 0.8s 0.8s cubic-bezier(0.6, 0.6, 0.6, 1); background-image:linear-gradient(to right, #fff, #fff, #fff, #fff 50%, var(--color-orange) 50%); -webkit-text-fill-color: transparent; background-position:0%; }
#main #numbers .tit_s1.subOn p:nth-child(2) { transition:all 0.8s 0.9s cubic-bezier(0.5, 0.5, 0.5, 1); background-image:linear-gradient(to right, var(--color-orange), var(--color-orange), var(--color-orange), var(--color-orange) 50%, #fff 50%); -webkit-text-fill-color: transparent; background-position:0%; }
#main #numbers .tit_s1.subOn p:nth-child(1) { animation:ani_1 0.5s 0.2s; animation-fill-mode:both; }
#main #numbers .tit_s1.subOn p:nth-child(2) { animation:ani_2 0.5s 0.2s; animation-fill-mode:both; }

#main #numbers .info li { opacity:0; }
#main #numbers .info li.subOn:nth-child(2n+1) { animation:bgs4 0.8s 0.5s; animation-fill-mode:both; }
#main #numbers .info li.subOn:nth-child(2n) { animation:bgs4 0.8s 0.7s; animation-fill-mode:both; }

.subTop { min-height:1084px; padding-top:96px; margin-bottom:22px !important; }

/* video */
#videoWrap { padding:110px 0; }
#videoWrap .tit_s1 { padding:0 2.0833vw 0 2.6041vw; letter-spacing:-0.4em; }
#videoWrap .tit_s1 p { line-height:0.95 }
#videoWrap .tit_s2 { margin-top:1.8333em; }
#videoWrap .list { margin-top:8%; }
#videoWrap .list ul { /*display:grid; grid-template-columns:repeat(4, 1fr);*/ display:flex; flex-wrap:wrap; justify-content:center; text-align:center; }
#videoWrap .list.subOn li { width:34%; margin-bottom:4%; }
#videoWrap .list .tit { color:var(--color-orange); font-size:calc(30 / 1920 * 100vw); font-weight:500; line-height:1.1; min-height:calc(70 / 1920 * 100vw); }
#videoWrap .list .img { position:relative; margin:5% 0; }
#videoWrap .list .img img { width:100%; }
#videoWrap .list .img::before,
#videoWrap .list .img::after { content:""; display:block; position:absolute; }
#videoWrap .list .img::before { width:100%; height:100%; background:#000; opacity:0.5; left:0; top:0; opacity:0; transition:opacity 0.5s; }
#videoWrap .list .img::after { width:104px; height:104px; background:url("../img/main/360deg.png") no-repeat center; left:50%; top:50%; transform:translate(-50%, -50%); }
#videoWrap .list a:hover .img::before { opacity:0.5; }
#videoWrap .list .txt { font-size:calc(18 / 1920 * 100vw); color:#fff; line-height:normal; }
@media screen and (max-width:1024px){
	#videoWrap .tit_s1 { letter-spacing:-0.1em; }
	#videoWrap .tit_s1 p { display:inline-block; text-align:left !important; font-size:calc(150 / 1920 * 100vw); }
	#videoWrap p:nth-child(2) { margin-left:1%; }
	#videoWrap p:nth-child(3) { display:block; }
	#videoWrap .tit_s2 { font-size:calc(26 / 1024 * 100vw); }
	#videoWrap .list .tit { font-size:calc(22 / 1024 * 100vw); min-height:calc(50 / 1024 * 100vw); }
	#videoWrap .list ul { /*grid-template-columns:repeat(2, 1fr);*/ text-align:center; gap:10% 0; }
	#videoWrap .list.subOn li { width:50%; }
	#videoWrap .list .txt { font-size:calc(18 / 1024 * 100vw); }
}
@media screen and (max-width:640px){
	#videoWrap { padding:50px 0; }
	#videoWrap .tit_s2 { font-size:18px; }
	#videoWrap .tit_s2 p br { display:none }
	#videoWrap .list .tit { font-size:18px; min-height:calc(50 / 640 * 100vw); }
	#videoWrap .list .tit br { display:none }
	#videoWrap .list ul { display:block; }
	#videoWrap .list.subOn li { width:100%; }
	#videoWrap .list li:not(:last-child) { margin-bottom:10%; }
	#videoWrap .list .txt { font-size:16px; }
}


/* animation */
#videoWrap .tit_s1.subOn p:nth-child(1) { transition:all 0.8s 0.8s cubic-bezier(0.6, 0.6, 0.6, 1); background-image:linear-gradient(to right, #fff, #fff, #fff, #fff 50%, var(--color-orange) 50%); -webkit-text-fill-color: transparent; background-position:0%; }
#videoWrap .tit_s1.subOn p:nth-child(2) { transition:all 0.8s 0.9s cubic-bezier(0.5, 0.5, 0.5, 1); background-image:linear-gradient(to right, var(--color-orange), var(--color-orange), var(--color-orange), var(--color-orange) 50%, #fff 50%); -webkit-text-fill-color: transparent; background-position:0%; }
#videoWrap .tit_s1.subOn p:nth-child(3) { transition:all 0.8s 1.2s cubic-bezier(0.6, 0.6, 0.6, 1); background-image:linear-gradient(to right, #fff, #fff, #fff, #fff 50%, var(--color-orange) 50%); -webkit-text-fill-color: transparent; background-position:0%; }
#videoWrap .tit_s1.subOn p:nth-child(1) { animation:ani_1 0.5s 0.2s; animation-fill-mode:both; }
#videoWrap .tit_s1.subOn p:nth-child(2) { animation:ani_2 0.5s 0.2s; animation-fill-mode:both; }
#videoWrap .tit_s1.subOn p:nth-child(3) { animation:ani_1 0.5s 0.4s; animation-fill-mode:both; }

#videoWrap .tit_s2,
#videoWrap .list li { opacity:0; }
#videoWrap .tit_s2.subOn { animation:ani_3 0.5s 0.5s; animation-fill-mode:both; }
#videoWrap .list.subOn li { animation:ani_3 0.5s 0.4s; animation-fill-mode:both; }
#videoWrap .list.subOn li:nth-child(2) { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; }
#videoWrap .list.subOn li:nth-child(3) { animation:ani_3 0.5s 0.8s; animation-fill-mode:both; }
#videoWrap .list.subOn li:nth-child(4) { animation:ani_3 0.5s 1.0s; animation-fill-mode:both; }
#videoWrap .list.subOn li:nth-child(5) { animation:ani_3 0.5s 1.2s; animation-fill-mode:both; }