* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; box-sizing: border-box;-ms-overflow-style:none;scrollbar-width:none;}

*:active { -webkit-tap-highlight-color: rgba(0,0,0,0); -moz-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); }

*::-webkit-scrollbar { display:none; }

body { background-color: #000; margin: 0; overflow: hidden;font-size:14px;font-family:"NotoSans"; }

ul, p, img { padding:0;margin:0; }

li { list-style:none; }

a { text-decoration: none;color:#fff;margin:0;padding:0; }

#main_canvas_container { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }

.aft { z-index:99; }
.hidden { display:none !important; }

.toggleGuide { position:absolute;bottom:68px;left:50%;transform:translateX(-50%);display:flex; }
.toggleBtn { width:80px;height:80px;background:rgba(0,0,0,0.7);border-radius:20px;cursor:pointer; }
.toggleBtn:not(:last-child) { margin-right:30px; }
.toggleBtn p { display:inline-block;width:100%;color:#fff;margin-top:5px;text-align:center;font-size:15px;line-height:17px; }
.toggleIconWrap { width:100%;height:100%;display:flex;align-items:center;justify-content:center; }
.toggleIcon { width:40px;height:40px;opacity:0.7; }
.toggleBtn.active { background:#000; }
.toggleBtn.active .toggleIcon { opacity:1; }
.toggleIcon svg { width:100%;height:100%;object-fit:contain; }

.dataContainer { position:absolute;top:0;left:0;background:rgba(0,0,0,0.8);width:290px;overflow:hidden;border-bottom-right-radius:20px; }
.dataHead { margin-top:34px; }
.dataHead>span {  }
.dataTitleWrap { display:flex;align-items:center; }
.dataTitleWrap>span { position:relative;top:50%;display:block;flex:1;height:1px;background:rgba(255,255,255,0.8); }
.dataTitle { width:175px;line-height:56px;text-align:center;font-size:30px;font-weight:900;color:#fff;background:linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.5));margin:0 auto; }
.dataTitle>span { font-size:40px; }
.holeDataWrap { display:flex;width:175px;margin:8px auto; }
.holeDataWrap>span { flex:1;color:#fff;font-size:20px;opacity:0.8;text-align:center; }
.dataBody { width:175px;margin:20px auto; }
.dataBody li { display:flex;position:relative;padding:12px 0; }

.userIcon { display:flex;width:40px;height:40px; }
.userIcon svg { display:block;width:100%; }
.userData { padding-left:15px; }
.dataPlayer { font-size:15px;color:rgba(255,255,255,0.8);opacity:0.8;line-height:20px;font-weight:500; }
.dataScore { display:flex; }
.dataScore>span { text-align:center;flex:1;color:#fff;font-size:18px;line-height:20px; }
.dataScore>span:not(:last-child) { margin-right:10px; }

.playContainer { position:absolute;top:338px;left:35px; }
.playContainer>li { position:relative;width:80px;height:80px;overflow:hidden;opacity:0.7;transition:0.4s ease;transition-property:width,height,opacity; }
.playContainer>li:not(:last-child) { margin-bottom:14px; }
.playWrap { position:relative;width:0;height:80px;overflow:hidden;display:flex;background:rgba(0,0,0,0.7);transition:0.4s ease;transition-property:width,padding;border-radius:5px; }
.playWrap>li { width:80px;line-height:80px;cursor:pointer;transition:border 0.4s ease; }
.playWrap>li>span { display:inline-block;width:100%;text-align:center;font-size:24px;letter-spacing:-1.18px;font-weight:bold;color:rgba(255,255,255,0.5);transition:color 0.4s ease; }
.playExit { position:absolute;top:0;right:0;width:30px;height:80px;border-top-right-radius:5px;border-bottom-right-radius:5px;background:url("menu_img/leftArrow.svg") no-repeat 50% 50%, #000;background-size:5px;cursor:pointer; }
.playIcon { position:absolute;top:0;left:0;display:flex;width:80px;height:80px;align-items:center;justify-content:center;background:#000;border-radius:5px;cursor:pointer; }
.playIcon svg { width:45px; }

.playBtns { display:flex;opacity:0;position:absolute;left:80px;bottom:10px;transition:opacity 0.4s ease; }
.playBtns>div { width:60px;height:60px;border-radius:5px;background:#000;text-align:center;line-height:60px;color:#fff;opacity:0.7;cursor:pointer; }
.playBtns>div:not(:last-child) { margin-right:20px; }

.playContainer>li.active { width:auto;opacity:1; }
.playContainer>li.active .playWrap { width:auto;padding:0 30px 0 80px; }

.playWrap>li.active { border-bottom:6px solid currentColor; }
.playWrap>li.active>span { color:#fff; }

.playContainer>li.subactive { height:160px; }
.playContainer>li.subactive .playBtns { opacity:1; }

.p1Color, .p1Color * { color:#ffe266; }
.p2Color, .p2Color * { color:#6aea97; }
.p1Back { background:#ffe266; }
.p2Back { background:#6aea97; }
#bunker, #grid, #height { color:#d4d0bc; }
#green_grid, #green_height { color:#5bd63c }

.ballInner { width:20px;height:20px;border-radius:50%;border:4px solid #ffe266;border-right-color:transparent;animation:rotate 2s infinite linear reverse; }

@keyframes rotate {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

/* #p1_ball_anchor { background:url("./menu_img/p1_zoom.png") no-repeat 50% 50%;background-size:100%; } */
/* #p2_ball_anchor { background:url("./menu_img/p2_zoom.png") no-repeat 50% 50%;background-size:100%; } */

.stateContainer { position:absolute;top:60px;right:50%;transform:translateX(50%);background:rgba(0,0,0,0.8);color:#fff;border-radius:5px;display:flex;padding:0 15px; }
/* .stateContainer p { font-weight:300; }
.stateContainer p:nth-child(2) { color:#ff0; }
.stateContainer p span { font-weight:400;font-size:16px; } */
.stateContainer div { flex:auto;padding:13px 15px;text-align:center; }
.stateContainer div p { font-size:12px;color:#9f9f9f;line-height:21px; }
.stateContainer div p span { font-size:20px;line-height:25px; }
.stateContainer div p.e_dist { color:#a6763d; }
#f_dist { color:#fff; }
#e_dist { color:#ff8a00; }

.bunkerAnchor { position:absolute;background:rgba(0,0,0,0.7);padding:10px 14px;top:-50px;color:#eaeaea;border-radius:5px;text-align:left;font-size:15px; }
.bunkerAnchor th { color:#9e9e9e;font-weight:normal; }

.clubImg { position:absolute;bottom:30%;right:10px;width:300px;height:300px; }
.clubImg img { width:100%; }
.clubImg a { display:block;width:100%;text-align:center;background:#000;padding:5px 0; }

.minimap { position:absolute;top:300px;right:40px;width:150px; }
.minimap img { width:100%; }

.minimap_green { position:absolute;top:47px;right:40px;width:150px;height:200px; }
.minimap_green img { width:100%;height:100%;object-fit:contain; }
.minimap_green .green_height_text { position:absolute;top:100%;right:0; }
.minimap_green p { font-size:13px;line-height:21px;color:#9f9f9f;white-space:nowrap;text-align:right; }
.minimap_green p span { font-size:20px;color:#fff; }


.preloaderContainer { position:absolute;top:0;left:0;width:100%;height:100%;background:#000; }
#preloader_video { width:100%;height:100%;object-fit:contain; }
.preloader_bottom { position:absolute;bottom:80px;right:0;width:100%;font-size:0; }
.preloader_bottom img { width:100%;height:100%;object-fit:cover; }

.preloader_road { position:absolute;bottom:25px;left:0;width:100%;height:56px;background:#ccc; }

.prograssContainer { position:absolute;bottom:0;left:0;width:100vw;height:25px;background:#fff; }
.prograssPercText { display:inline-block;position:absolute;bottom:0;left:0;width:100vw;line-height:25px;text-align:center;color:#6aea97;font-size:11px; }
#prograssBar { position:absolute;left:0;width:0%;height:25px;background:#6aea97;overflow:hidden; }
#prograssBar .prograssPercText { color:#fff; }
#prograssCar { position:absolute;bottom:50px;left:10vw;width:calc(100% * (280 / 1920));transform:translateX(-50%); }
#prograssCar>img { width:100%; }

.ballAnchor { position:absolute;top:-5px;left:-37px;width:107px; }
.ballAnchor p { position:absolute;top:15px;right:30px;font-size:24px;font-family:"BarlowSemiCondensed"; }

.shotDataContainer { display:none;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px); }
.shotDataContainer .sdBody { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1050px;height:674px;border-radius:20px;background:rgba(0,0,0,0.7);padding:36px 45px;display:flex; }

.sdExit { position:absolute;top:0;right:0;width:40px;height:40px;background:#000;border-radius:5px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer; }

.sdRow { position:relative; }
.sdRow:not(:last-child) { margin-bottom:24px; }
.sdRow>p:first-child { font-size:28px;color:#fff; }
.sdRow>p>span { font-size:13px;color:#9e9e9e; }
.sdRow>p:nth-child(2) { font-size:40px;color:#fff;font-weight:bold; }

.sdVideo { margin-top:60px;width:100%; }
.sdVideoImg { width:120px;margin:0 auto; }
.sdVideoImg>img { width:100%;height:100%;object-fit:cover; }
#sdVideoTitle { margin:-38px 0 17px;font-family:"BarlowSemiCondensed";font-weight:300;font-size:35px;line-height:42px;color:#858585; }
#sdVideoBtn { display:flex;align-items:center;justify-content:center;font-size:15px;line-height:20px;color:#bcbcbc;cursor:pointer; }
.sdVideoBtnImg { display:inline-block;width:20px;height:20px;margin-left:8px;color:#fff; }
.sdVideoBtnImg>img { width:100%; }

.sdHead { display:inline-block;width:70px;height:70px;border-radius:5px;font-size:38px;line-height:70px;font-weight:bold;text-align:center; }
.sdTitle { position:absolute;bottom:0;left:81px;color:#9e9e9e;font-size:18px; }

.sdLeft { width:240px;padding:14px 30px 0 0 ; }
.sdRight { width:720px;height:602px;background:#000;border-radius:20px;display:flex;flex-flow:wrap;padding:20px 30px; }
.sdRight>li { width:calc(100% / 4);height:calc(100% / 3); }
.sdRight>li:nth-child(-n+8) { border-bottom:1px solid #333; }
.sdRight>li>p { display:block;width:100%;text-align:center; }
.sdImg { width:100%;margin-top:14px; }
.sdImg>img { width:100%; }
.sdrName { font-size:15px;color:#eaeaea; }
.sdrUnit { font-size:13px;color:#9e9e9e; }
.sdrValue { font-size:17px;font-weight:500;color:#fff;margin-top:17px; }

.gifAnchor { position:absolute;}
.gifAnchor>img { width:100%; }

.pinAnchor { position:absolute;width:40px;cursor:pointer; }
.pinAnchor>img { width:100%; }
.pinAnchor>span { position:absolute;top:-10px;right:-10px;width:20px;height:20px;font-size:16px;color:#000;font-weight:bold;background:#ff0;border-radius:50%;text-align:center;line-height:18px;border:1px solid #000; }

@media screen and (max-width:1180px) {
  .shotDataContainer .sdBody { width:80%; }
  .sdRight { overflow:auto; }
  .sdRight>li { width:calc(100% / 3);height:calc(100vw / 5); }
  .sdRight>li:nth-child(-n+9) { border-bottom:1px solid #333; }
  #sdVideoTitle { font-size:26px;text-align:center; }
  #sdVideoBtn { white-space:nowrap; }
}

@media screen and (max-width:960px) {
  .shotDataContainer .sdBody { flex-direction:column;padding:0;border-radius:8px;overflow:hidden;height:80vh; }
  .sdLeft { display:flex;width:100%;padding:40px 40px 20px; }
  .sdRight { width:100%;border-radius:0;height:calc(100% - 141px - 150px); }
  .sdRight>li { height:calc(100vw / 4); }
  .sdTitle  { display:none; }
  .sdRow:not(:last-child) { margin-bottom:0;margin-right:30px; }
  .sdRight>li:nth-child(-n+9) { border-bottom:none; }
  .sdRow>p:nth-child(2) { font-size:32px; }
  .sdRow:nth-child(4) { position:absolute;bottom:0;left:0;width:100%; }
  #sdVideo { position:relative;width:100%; }
  .sdVideoImg { position:absolute;bottom:30px;left:73px;width:75px; }
  #sdVideoTitle { position:absolute;bottom:-5px;left:40px; }
  #sdVideoBtn { position:absolute;bottom:20px;right:40px; }
  .sdVideoBtnImg { position:absolute;bottom:70px;right:60px;width:44px; }

  .minimap_green { top:27px;right:20px;width:130px;height:170px; }
  .minimap_green p { font-size:11px; }
  .minimap { top:250px;right:20px;width:130px }

  .dataContainer { width:250px; }
  .playIcon { width:60px;height:60px; }
  .playIcon svg { width:35px; }
  .playWrap { height:60px; }
  .playContainer>li { width:60px;height:60px; }
  .playContainer>li.active .playWrap { padding:0 30px 0 60px; }
  .playExit { height:60px; }
  .playWrap>li { line-height:60px;width:60px; }
  .playWrap>li>span { font-size:18px; }
  .playContainer>li.subactive { height:135px; }
  .playBtns { left:60px;bottom:0px; }
  .toggleBtn { width:60px;height:60px; }
  .toggleIcon { width:30px;height:30px; }
  .toggleBtn p { font-size:13px; }
}

@media screen and (max-width:760px) {
  .dataContainer { display:flex;width:100%;border-radius:0; }
  .dataHead { margin-top:0;padding: 10px 0; }
  .dataBody { width:100%;display:flex;align-items:center; }
  .dataBody>ul { display:flex; }
  .dataBody>ul>li { margin-left:40px; }
  .stateContainer { top:139px;left:16px;right:unset;right:auto;right:none;transform:unset; }
  .minimap_green { top:139px;width:110px;height:150px; }
  .minimap { top:330px;width:110px; }

  .preloader_bottom { width:1080px;bottom:70px;right:calc(100vw - 1080px); }
  .preloader_road { height:50px; }
  #prograssCar { width:130px;transform:translateX(-100%); }
}

@media screen and (max-width:650px) {
  .sdLeft { padding:30px 30px 20px; }
  .sdRight { height:calc(100% - 97px - 150px); }
  .sdRight>li { width:50%;height:100%;max-height:200px; }
  .sdHead { width:34px;height:34px;font-size:18px;line-height:34px; }
  .sdRow>p:first-child { font-size:15px; }
  .sdRow>p>span { font-size:11px; }
  .sdRow>p:nth-child(2) { font-size:20px; }
  #sdVideoBtn { font-size:11px;right:60px; }
  .sdVideoBtnImg { right:40px; }
  .toggleGuide { bottom:30px;width:calc(100% - 32px);height:120px;background:rgba(0,0,0,0.7);border-radius:20px; }
  .toggleBtn { display:flex;flex-direction:column;justify-content:center;width:auto;height:100%;flex:1;background:transparent; }
  .toggleIconWrap { width:auto;height:auto; }
  .toggleBtn:not(:last-child) { margin-right:0; }
  .playContainer { top:unset;top:auto;top:none;bottom:170px; }
  .dataTitle { font-size:24px;width:140px; }
  .dataTitle>span { font-size:30px; }
  .holeDataWrap { width:140px; }
  .holeDataWrap>span { font-size:16px; }
  .dataBody>ul>li { margin-left:20px; }
  .dataScore>span { font-size:14px; }
  .playContainer { left:16px; }
}

@media screen and (max-width:500px) {
  #sdVideoBtn { right:20px; }
  .sdVideoBtnImg { bottom:60px;right:36px; }
  #sdVideoTitle { font-size:19px; }
  .sdVideoImg { width:66px;left:60px; }
  .sdRow:not(:last-child) { margin-right:20px; }
  .sdRow>p:first-child { white-space:nowrap; }
  .sdExit { width:30px;height:30px; }

  .dataContainer { overflow:auto; }
  .dataTitle { line-height:34px;font-size:18px; }
  .dataTitle>span { font-size:24px; }
  .holeDataWrap>span { font-size:12px; }
  .userIcon { width:24px;height:24px; }
  .dataPlayer { font-size:11px; }
  .dataScore>span { font-size:12px; }
  .dataBody { margin:0;padding-right:30px; }
  .dataBody>ul>li { margin-left:10px;align-items:center; }
  .userData { padding-left:8px; }
  .holeDataWrap { margin:4px auto; }
  .minimap_green {top:95px;right:16px;width: 60px;height: 100px;}
  .minimap {top: 245px;width:81px;right:16px;}
  .stateContainer { top:95px; }
  .playBtns>div { width:44px;height:44px;line-height:44px;font-size:11px; }
  .playContainer>li.subactive { height:114px; }
  .toggleGuide { height:75px; }
  .toggleIcon { width:20px;height:20px; }
  .toggleBtn p { font-size:11px; }
  .playContainer { bottom:121px; }
  /* .stateContainer  { flex-direction:column;max-width:50%; } */
  .stateContainer div { padding:9px 0; }
  .stateContainer div:nth-child(2) { padding-left:36px; }

  .holeDataWrap, .dataTitle { width:125px; }

  .playContainer>li.active .playWrap { padding:0 20px 0 50px; }
  .playIcon, .playContainer>li, .playWrap>li { width:50px;height:50px; }
  .playWrap>li { line-height:50px; }
  .playExit { width:20px;height:50px; }
  .playWrap { height:50px; }
  .playBtns { left:50px;bottom:15px; }

  .stateContainer div p span { font-size:17px; }
}

@media screen and (max-width:380px) {
  .sdRight { padding:20px 10px; }
  #sdVideoTitle { left:10px; }
  .sdVideoImg { left:35px; }
  #sdVideoBtn { right:10px; }
}