html,
body {
    height: 100vh;
}

.container {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.point {
    color: #34d57f !important;
}

.danger {
    color: #ff3100 !important;
}

.warning {
    color: #ff5800 !important;
}

/* input */
input[type='checkbox'],
input[type='radio'] {
    box-sizing: border-box;
    padding: 0;
}

/* custom input */
.custom_control {
    z-index: 1;
    display: block;
    position: relative;
    min-height: 2.8rem;
    padding-left: 3rem;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}

.custom_input {
    opacity: 0;
    z-index: -1;
    position: absolute;
    left: 0;
    width: 2rem;
    height: 2.4rem;
}

.custom_label {
    display: inline-block;
    position: relative;
    margin-bottom: 0;
    font-size: 1.4rem;
    vertical-align: middle;
}

.custom_input:checked ~ .custom_label::before {
    color: #fff;
    border-color: #34d57f;
    background-color: #34d57f;
    box-shadow: none;
}

.custom_label::before {
    content: '';
    position: absolute;
    top: -0.1rem;
    left: -3rem;
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    pointer-events: none;
    background-color: #dee2e6;
    border: #adb5bd solid 1px;
    border-radius: 0.4rem;
    box-shadow: inset 0 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom_label::after {
    content: '';
    display: block;
    position: absolute;
    top: -0.1rem;
    left: -3rem;
    width: 2.4rem;
    height: 2.4rem;
    background: 96%/96% no-repeat;
}

.chk_custom .custom_input:checked ~ .custom_label::after {
    background-image: url('../../images/icon_check.svg');
}

/* select */
select {
    width: 100%;
    height: 3.2rem;
    padding: 0.8rem 0.96rem;
    border: 1px solid #d9d9d9;
    border-radius: 0.4rem;
    color: #454545;
    font-size: 1.12rem;
}

/* button */
button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button_area {
    margin-top: auto;
    padding: 3.2rem 0;
}

.button_area.assist {
    margin-top: 1.6rem;
}

.button_area a,
.button_area button {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 1.44rem 0;
    border-radius: 0.64rem;
    border: 1px solid #454545;
    background: #fff;
    color: #454545;
    font-size: 1.28rem;
    text-align: center;
    line-height: 1.92rem;
    box-sizing: border-box;
}

.button_area .btn_outline {
    border: 1px solid #34d57f;
    color: #34d57f;
}

.button_area .btn_outline_white {
    justify-content: space-between;
    padding: 1.36rem 1.28rem;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

.button_area .btn_confirm {
    border: 1px solid #34d57f;
    background: #34d57f;
    color: #fff;
}

.button_area .btn_cancel {
    border: 1px solid #ff3100;
    background: #ff3100;
    color: #fff;
}

.button_area .btn_user {
    border: 0;
    background: transparent linear-gradient(96deg, #34d57f 0%, #34d5c9 100%) 0 0 no-repeat;
    color: #fff;
}

/* Btn */
.btn_area .btn_expand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.96rem;
    padding: 0.96rem 0;
    box-sizing: border-box;
}

.btn_area .btn_expand span {
    margin-right: 0.32rem;
    font-size: 1.28rem;
    line-height: 1.92rem;
}

.btn_more {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: #000;
}

.btn_more span {
    margin: -0.2rem 0.32rem 0 0;
    font-size: 1.2rem;
}

/* Star */
.star {
    display: flex;
}

.star i {
    margin-right: 0.4rem;
}

.star span {
    color: rgba(0, 0, 0, 0.38);
}

.star span em {
    color: #000;
}

/* Assist Wrap */
.assist_wrap {
    display: none;
}

.assist_wrap .title_area p {
    color: #ffff31;
    font-size: 3.6rem;
    font-family: 'SUITE';
    line-height: 4.5rem;
}

.assist_wrap .title_area .gdr {
    margin-top: 0.8rem;
    color: #fff;
    font-size: 5.6rem;
    font-weight: 800;
    line-height: 7rem;
}

.assist_wrap .rollig_banner_area {
    position: relative;
    width: 40rem;
    height: 16rem;
    margin-top: 4rem;
}

/* Rolling Banner */
.rollig_banner_area > ul {
    width: 40rem;
    height: 16rem;
}

.rollig_banner_area > ul li a {
    display: block;
}

.rollig_banner_area > ul li img {
    display: block;
    width: 40rem;
    height: 16rem;
    border-radius: 0.8rem;
    object-fit: cover;
}

.rollig_banner_area p {
    z-index: 200;
    position: absolute;
    display: flex;
    justify-content: center;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 5rem;
    height: 2.4rem;
    padding: 0.2rem 1.2rem 0.5rem;
    border-radius: 2rem;
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    box-sizing: border-box;
}

.rollig_banner_area p em {
    color: #fff;
}

.rollig_banner_area .banner_pagination li {
    display: none;
}

.rollig_banner_area .banner_pagination li.slick-active {
    display: block;
}

/* Sub Title */
.sub_ttl_area {
    margin-top: 4rem;
}

.sub_ttl_area .ttl {
    display: flex;
    align-items: center;
    margin-bottom: 1.6rem;
}

.sub_ttl_area .ttl p {
    padding-right: 2rem;
    color: #fff;
    font-size: 2.4rem;
    font-family: 'SUITE';
}

.sub_ttl_area .ttl span {
    flex: 1;
    width: 100%;
    height: 0.1rem;
    background: #fff;
}

.sub_ttl_area ul {
    display: flex;
    flex-flow: wrap;
}

.sub_ttl_area ul li {
    display: flex;
    margin-right: 0.8rem;
    margin-bottom: 0.8rem;
}

.sub_ttl_area ul li a {
    display: block;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    background: rgba(52, 213, 127, 0.5) 0% 0% no-repeat;
    color: #fff;
    font-size: 1.6rem;
    box-sizing: border-box;
}

.sub_ttl_area .store {
    display: flex;
}

.sub_ttl_area .store a {
    display: block;
    margin-left: 1.6rem;
}

.sub_ttl_area .store a:first-child {
    margin-left: 0;
}

.sub_ttl_area .store a img {
    width: 19.2rem;
    height: 6rem;
}

/* Golf Wrap */
.golf_wrap {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Header Wrap */
.header_wrap {
    z-index: 100;
    width: 100%;
    padding: 0 1.92rem;
    background: #fff;
    box-sizing: border-box;
}

.header_wrap.on {
    position: fixed;
    top: 0;
    border-radius: 0 0 1.92rem 1.92rem;
    box-shadow: 0 0.24rem 0.4rem rgba(0, 0, 0, 0.2);
}

.header_wrap.on .control_area {
    display: flex;
}

.header_wrap .top_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.92rem 0;
}

.header_wrap .top_area .logo img {
    width: 10.8rem;
}

.header_wrap .top_area .location img {
    width: 1.44rem;
    height: 1.76rem;
}

.header_wrap .top_area .location span {
    font-size: 1.28rem;
    vertical-align: middle;
}

.header_wrap .control_area {
    display: none;
    justify-content: space-between;
    padding: 1.92rem 0;
    border-top: 1px solid #e9e9e9;
}

.header_wrap .control_area .detail {
    display: flex;
}

.header_wrap .control_area .detail li {
    display: flex;
    align-items: center;
    padding-left: 1.92rem;
}

.header_wrap .control_area .detail li:first-child {
    padding: 0;
}

.header_wrap .control_area .detail li i {
    margin-right: 0.64rem;
    font-size: 1.6rem;
}

.header_wrap .control_area .detail li span {
    font-size: 1.28rem;
    line-height: 1.92rem;
}

.header_wrap .control_area .detail li span.ttl {
    margin: 0 0.64rem 0 1.28rem;
    color: rgba(0, 0, 0, 0.38);
}

.header_wrap .control_area .detail li span.ttl:first-of-type {
    margin-left: 0;
}

.header_wrap .control_area button {
    padding: 0.32rem 0.64rem;
    border-radius: 0.16rem;
    background: #f2f2f2;
    color: #848484;
    font-size: 1.12rem;
    line-height: 1.6rem;
}

.header_wrap .control_area button i {
    margin-right: 0.4rem;
    font-size: 0.96rem;
    line-height: 1.6rem;
}

/* Content Wrap */
.content_wrap {
    padding: 0 1.28rem 4.32rem;
    background: #fff;
}

/* Filter */
.filter_area {
    margin: 1.28rem 0;
    padding: 1.28rem;
    background: #fafafa;
    border-radius: 0.64rem;
}

.filter_area ul {
    display: flex;
    align-items: center;
    margin-top: 0.64rem;
}

.filter_area ul:first-child {
    margin: 0;
}

.filter_area .detail {
    display: flex;
    justify-content: space-between;
}

.filter_area .detail li {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.filter_area .detail li:first-child {
    margin: 0;
}

.filter_area .detail li i {
    margin-right: 0.64rem;
    font-size: 1.6rem;
    line-height: 1.92rem;
}

.filter_area .detail li button {
    background: transparent;
}

.filter_area .detail li i {
    margin-right: 0.5rem;
    font-size: 1.2rem;
    margin-top: 0.2rem;
    /* line-height: 1.92rem; */
}

.filter_area .detail li span {
    font-size: 1.2rem;
    line-height: 1.92rem;
}

.filter_area .detail li span.ttl {
    margin: 0 0.5rem 0 1rem;
    color: rgba(0, 0, 0, 0.38);
}

.filter_area .detail li span.ttl:first-of-type {
    margin-left: 0;
}

.filter_area .basic {
    margin-top: 1.28rem;
    padding-top: 1.28rem;
    border-top: 1px solid #eaeaea;
}

.filter_area .basic ul li {
    flex: 1;
    color: #525252;
}

.filter_area .basic ul li.ttl {
    max-width: 4.4rem;
    font-size: 1.12rem;
}

.filter_area .basic ul li small {
    color: #7d7d7d;
}

.filter_area .location {
    flex-wrap: wrap;
    margin-top: 1.28rem;
    padding-top: 1.28rem;
    border-top: 1px solid #eaeaea;
}

.filter_area .location li {
    flex: 1 1 20%;
    margin: 0.32rem;
}

.filter_area .location li:nth-child(4n) {
    margin-right: 0;
}

.filter_area .location li:nth-child(4n + 1) {
    margin-left: 0;
}

.filter_area .location li.on button {
    border: 0;
    background: #34d57f;
    color: #fff;
}

.filter_area ul.location li button {
    display: block;
    width: 100%;
    padding: 0.8rem 0;
    border: 1px solid #eaeaea;
    border-radius: 0.64rem;
    background: #fff;
    color: #000;
    font-size: 1.12rem;
}

.filter_area ul li select {
    appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius:0.4rem;
    background-color: white;
    background-image: url('../../images/icon_arrow_close.svg');
    background-position: center right 12px;
    background-repeat: no-repeat;
    

}

/* Section */
.section_area {
    padding: 1.6rem 0;
}

/* Title */
.ttl_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.28rem;
    line-height: 2.32rem;
}

.ttl_area h3 {
    font-weight: 700;
    font-size: 1.6rem;
}

.ttl_area .more {
    opacity: 0.6;
    display: flex;
    align-items: center;
    color: #000;
    font-size: 1.12rem;
}

/* Footer Wrap */
.footer_wrap {
  display: flex;
  flex-direction: column;
  padding: 1.28rem 1.28rem 8.28rem;
  background: #fafafa;
}

.footer_wrap .logo {
  display: block;
  width: 14.24rem;
  height: 2.88rem;
  margin-bottom: 1.28rem;
}

.footer_wrap .logo img {
  display: block;
  width: 14.24rem;
  height: 2.88rem;
}

.footer_wrap .terms {
  display: flex;
}

.footer_wrap .terms li {
  position: relative;
}

.footer_wrap .terms li:before {
  content: '';
  position: absolute;
  top: 50%;
  width: 0.1rem;
  height: 0.96rem;
  margin-top: -0.48rem;
  background: rgba(112, 112, 112, 0.12);
}

.footer_wrap .terms li:first-child a {
  padding-left: 0;
}

.footer_wrap .terms li a {
  display: block;
  padding: 0 0.8rem;
  font-size: 0.96rem;
  color: rgba(0, 0, 0, 0.6);
}

.footer_wrap .company {
  margin: 1.28rem 0;
}

.footer_wrap .company p {
  font-size: 0.96rem;
  color: rgba(0, 0, 0, 0.38);
  line-height: 1.6rem;
}

.footer_wrap .copyright {
  font-size: 0.96rem;
  color: rgba(0, 0, 0, 0.38);
  line-height: 1.6rem;
}

/* Nav Wrap */
.nav_wrap {
    z-index: 10000;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-radius: 0.8rem 0.8rem 0 0;
    background: #34d57f;
    box-shadow: 0 -0.3rem 1.5rem rgba(0, 0, 0, 0.2);
}

.nav_wrap ul {
    display: flex;
    padding: 1rem 0;
}

.nav_wrap ul.ios {
    padding-bottom: 4rem;
}

.nav_wrap ul li {
    flex: 1;
    text-align: center;
}

.nav_wrap ul li a {
    display: block;
    font-size: 0;
}

.nav_wrap ul li a i {
    font-size: 2.6rem;
}

.nav_wrap ul li a p {
    padding-top: 0.7rem;
    font-size: 1.2rem;
    line-height: 1.7rem;
}

.nav_wrap ul li a i,
.nav_wrap ul li a p {
    color: rgba(255, 255, 255, 0.38);
}

.nav_wrap ul li.on a i,
.nav_wrap ul li.on a p {
    color: rgba(255, 255, 255, 0.8);
}

/* User Wrap */
.user_wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 100vh;
    padding: 0 1.92rem;
    background: #fff;
}

.user_wrap .logo_area {
    padding-bottom: 5.12rem;
}

.user_wrap .logo_area a {
    display: block;
    width: 24.96rem;
    margin: 0 auto;
}

/* Sub Top */
.sub_top_area {
    display: flex;
    align-items: center;
    position: relative;
    padding: 3.04rem 0;
}

.sub_top_area a {
    z-index: 100;
    display: block;
    font-size: 0;
}

.sub_top_area a i {
    color: #b9b9b9;
    font-size: 2.4rem;
}

.sub_top_area h2 {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1.28rem;
    font-weight: 400;
    line-height: 2.4rem;
}

/* Step */
.step_area {
    padding-bottom: 3.84rem;
}

.step_area ol {
    display: flex;
    justify-content: center;
}

.step_area ol li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.56rem;
    height: 2.56rem;
    margin: 0 0.64rem;
    border: 1px solid #eaeaea;
    border-radius: 2.56rem;
    background: #fff;
    color: rgba(0, 0, 0, 0.38);
    font-size: 1.28rem;
    box-sizing: border-box;
}

.step_area ol li.on {
    border: 0;
    background: transparent linear-gradient(180deg, #34d57f 0%, #34d5c9 100%) 0 0 no-repeat;
    color: #fff;
}

.step_area ol li.on i {
    font-size: 1.28rem;
}

/* Tab */
.tab_area {
    position: relative;
    height: 3.52rem;
    margin-bottom: 1.92rem;
}

.tab_area ul {
    display: flex;
    position: absolute;
    width: calc(100% + 3.84rem);
    margin-left: -1.92rem;
    border-bottom: 1px solid #d9d9d9;
}

.tab_area ul li {
    flex: 1;
}

.tab_area li.on {
    border-bottom: 3px solid #34d57f;
}

.tab_area li a {
    display: block;
    padding: 0.8rem 0;
    font-size: 1.28rem;
    text-align: center;
}

.tab_area li.on a {
    color: #000;
}

/* Teeup Detail */
.teeup_detail > ul {
    padding: 1.92rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.teeup_detail > ul li {
    display: flex;
    justify-content: space-between;
    padding: 0.48rem 0;
}

.teeup_detail > ul li span,
.teeup_detail > ul li strong {
    font-size: 1.12rem;
}

.teeup_detail > ul li span.sub_ttl {
    color: rgba(0, 0, 0, 0.38);
}

.teeup_detail > ul li label {
    width: 100%;
}

.teeup_detail > ul li button i {
    margin-right: 0.32rem;
    font-size: 1.6rem;
}

.teeup_detail > ul li button span {
    color: rgba(0, 0, 0, 0.6);
}

.teeup_detail > ul li .detail {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.teeup_detail > ul li del {
    color: rgba(0, 0, 0, 0.2);
    font-size: 1.2rem;
}

.teeup_detail > ul li .detail .price {
    font-size: 1.2rem;
    color: #000;
}

.teeup_detail > ul li .detail .price strong {
    margin-left: 0.64rem;
    font-size: 1.4rem;
    color: #000;
}

.teeup_detail > ul li .detail span {
    margin-left: 0.32rem;
    color: rgba(0, 0, 0, 0.6);
}

.teeup_detail > ul li.ttl {
    margin-bottom: 0.32rem;
    padding-top: 0;
}

.teeup_detail > ul li.ttl .sub_ttl {
    color: #000;
}

.teeup_detail .total {
    display: flex;
    flex-wrap: wrap;
    padding-top: 1.28rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.teeup_detail .total span {
    width: 50%;
}

.teeup_detail .total .detail {
    display: flex;
    justify-content: end;
    align-items: baseline;
    width: 50%;
}

.teeup_detail .total .detail .price {
    font-size: 1.28rem;
}

.teeup_detail .total .detail .price strong {
    font-size: 1.6rem;
    color: #000;
}

.teeup_detail .total .detail span {
    width: initial;
    margin-left: 0.32rem;
    color: rgba(0, 0, 0, 0.6);
}

.teeup_detail .total button {
    width: 100%;
    margin-top: 1.28rem;
    padding: 1.44rem 0;
    border-radius: 0.64rem;
    color: #fff;
    font-size: 1.28rem;
    box-sizing: border-box;
}

.teeup_detail .total .btn_confirm {
    background: #34d57f;
}

.teeup_detail .total .btn_user {
    background: transparent linear-gradient(96deg, #34d57f 0%, #34d5c9 100%) 0% 0% no-repeat;
}

.teeup_detail .total .btn_gray {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.38);
}

.teeup_detail .total .btn_cancel {
    background: #ff3100;
}

.teeup_detail .total .btn_outline {
    border: 1px solid #34d57f;
    color: #34d57f;
}

/* Alert Wrap */
.alert_wrap {
    z-index: 100;
    position: fixed;
    bottom: 11.68rem;
    width: calc(100% - 2.56rem);
    margin: 0 1.28rem;
    padding: 1.28rem 1.92rem;
    border-radius: 0.64rem;
    background: #fff;
    box-shadow: 0 0.32rem 0.8rem rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.alert_wrap p {
    font-size: 1.12rem;
    text-align: center;
    line-height: 1.76rem;
}

/* Popup */
.mask {
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.mask .popup_wrap {
    overflow: hidden;
    position: fixed;
    top: 2rem;
    min-width: calc(100% - 1.92rem);
    max-width: calc(100% - 1.92rem);
    border-radius: 0.8rem;
    background: #fff;
    box-sizing: border-box;
}

.mask .popup_wrap.promotion {
    min-width: initial;
    background: transparent;
}

.mask .popup_wrap.promotion .pop_cont_area {
    overflow: hidden;
    max-height: initial;
    padding: 0;
}

.mask .popup_wrap.promotion .pop_cont_area img {
    max-height: 46rem;
}

.mask .pop_title_area {
    position: relative;
    padding: 1.92rem;
}

.mask .pop_title_area p {
    font-size: 1.12rem;
    color: #666;
}

.mask .pop_title_area p.ttl {
    margin-bottom: 0.64rem;
    color: #000;
    font-size: 1.6rem;
}

.mask .pop_title_area p.center {
    text-align: center;
}

.mask .pop_title_area p i {
    vertical-align: middle;
}

.mask .pop_title_area .more {
    position: absolute;
    top: 1.92rem;
    right: 1.92rem;
}

.mask .pop_title_area .more .btn_more {
    color: rgba(0, 0, 0, 0.38);
}

.mask .pop_title_area .more ul {
    z-index: 1001;
    overflow: hidden;
    display: none;
    flex-direction: column;
    position: absolute;
    right: 0;
    width: 6.4rem;
    margin-top: 0.64rem;
    border-radius: 0.64rem;
    background: #fff;
    box-shadow: 0 0.24rem 1.2rem rgba(0, 0, 0, 0.2);
}

.mask .pop_title_area .more ul.on {
    display: flex;
}

.mask .pop_title_area .more ul li {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mask .pop_title_area .more ul li:first-child {
    border: 0;
}

.mask .pop_title_area .more ul li button {
    width: 100%;
    padding: 0.8rem 0;
}

.mask .pop_title_area .more ul li button span {
    color: #000;
    font-size: 1.12rem;
}

.mask .pop_cont_area {
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 25.6rem;
    padding: 0 1.92rem 3.2rem;
}

.mask#modalAgree .pop_cont_area {
    margin-bottom: 3.2rem;
    padding-bottom: 0;
}

.mask .pop_cont_area .terms {
    padding: 1.28rem;
    border-radius: 0.64rem;
    background: rgba(0, 0, 0, 0.03);
    white-space: pre-wrap;
    box-sizing: border-box;
}

.mask .pop_cont_area .description {
    padding: 1.28rem;
    border-radius: 0.64rem;
    background: rgba(52, 213, 127, 0.1) 0 0 no-repeat;
    color: #666;
    word-break: keep-all;
    font-size: 1.2rem;
}

.mask .pop_cont_area .description i {
    vertical-align: middle;
    font-size: 12px;
}

.mask .pop_cont_area .description .reserve_info {
    display: flex;
}

.mask .pop_cont_area .description .reserve_info i {
    flex: 0;
    margin-right: 4px;
    margin-top: 2px;
}


.mask .pop_cont_area .teeup_detail {
    margin-top: 0.64rem;
}

.mask .pop_cont_area .teeup_detail > ul {
    border-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mask .pop_cont_area .teeup_detail > ul li .detail {
    flex-direction: row;
}

.mask .pop_cont_area .survey {
    display: flex;
    flex-direction: column;
}

.mask .pop_cont_area .survey button {
    width: 100%;
    margin-top: 0.64rem;
    padding: 1.44rem;
    border: 1px solid #d9d9d9;
    border-radius: 0.64rem;
    box-sizing: border-box;
}

.mask .pop_cont_area .survey button:first-child {
    margin: 0;
}

.mask .pop_cont_area .survey button span {
    font-size: 1.12rem;
    color: #000;
}

.mask .pop_cont_area .survey button.on {
    border: 1px solid #373546;
    background: #373546;
}

.mask .pop_cont_area .survey button.on span {
    color: #fff;
}

.mask .pop_cont_area .detail {
    color: rgba(0, 0, 0, 0.6);
}

.mask .pop_cont_area .star {
    margin-top: 1.92rem;
}

.mask .pop_cont_area .feed_area {
    display: block;
    padding: 1.92rem 0 0;
}

.mask .pop_cont_area .feed_area .feed .teeup_list li {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.32rem;
}

.mask .pop_cont_area .feed_area .feed .teeup_list li.on {
    border: 1px solid #34d57f;
    background: transparent linear-gradient(96deg, rgba(52, 213, 127, 1) 0%, rgba(52, 213, 201, 1) 100%) 0% 0% no-repeat;
}

.mask .pop_cont_area .feed_area .feed .teeup_list li.on .teeup .time,
.mask .pop_cont_area .feed_area .feed .teeup_list li.on .teeup i,
.mask .pop_cont_area .feed_area .feed .teeup_list li.on .teeup span,
.mask .pop_cont_area .feed_area .feed .teeup_list li.on .teeup em,
.mask .pop_cont_area .feed_area .feed .teeup_list li.on .teeup .price em {
    color: #fff;
}

.mask .pop_cont_area .feed_area .feed .teeup_list li.on .teeup .price {
    color: rgba(255, 255, 255, 0.6);
}

.mask .pop_cont_area .schedule_area .month {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.mask .pop_cont_area .schedule_area .month p {
    font-size: 1.6rem;
}

.mask .pop_cont_area .schedule_area .date_table table {
    width: 100%;
}

.mask .pop_cont_area .schedule_area .date_table th {
    font-size: 1.44rem;
    font-weight: 400;
}

.mask .pop_cont_area .schedule_area .date_table td {
    box-sizing: border-box;
}

.mask .pop_cont_area .schedule_area .date_table td button {
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 0.64rem 0.6rem 0.96rem;
}

.mask .pop_cont_area .schedule_area .date_table td button .date {
    font-size: 1.44rem;
}

.mask .pop_cont_area .schedule_area .date_table td button .price {
    color: rgba(0, 0, 0, 0.38);
    font-size: 0.8rem;
}

.mask .pop_cont_area .schedule_area .date_table td.holiday button .date {
    color: #c10e0e;
}

.mask .pop_cont_area .schedule_area .date_table td.end button .date {
    color: rgba(0, 0, 0, 0.12);
}

.mask .pop_cont_area .schedule_area .date_table td.end button .price {
    color: #fff;
}

.mask .pop_cont_area .schedule_area .date_table td.on button {
    border-radius: 0.16rem;
    background: transparent linear-gradient(135deg, #34d57f 0%, #34d5c9 100%) 0% 0% no-repeat;
    box-sizing: border-box;
}

.mask .pop_cont_area .schedule_area .date_table td.on button .date,
.mask .pop_cont_area .schedule_area .date_table td.on button .price {
    color: #fff;
}

.mask .pop_logo_area {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mask .pop_logo_area img {
    width: 28.48rem;
    max-height: 5.76rem;
}

.mask .pop_button_area {
    display: flex;
    background: #fff;
}

.mask .pop_button_area button {
    padding: 1.44rem 0;
    font-size: 1.28rem;
}

.mask .pop_button_area .btn_gray {
    flex: 1;
    color: rgba(0, 0, 0, 0.38);
    background: rgba(0, 0, 0, 0.05);
}

.mask .pop_button_area .btn_gradient {
    flex: 2;
    color: #fff;
    background: transparent linear-gradient(99deg, #34d57f 0%, #34d5c9 100%) 0% 0% no-repeat padding-box;
}

.mask .reserve .pop_cont_area {
    padding: 1.92rem;
    background: rgba(0, 0, 0, 0.02);
}

@media (min-width: 720px) {
    /* select */
    select {
        width: 100%;
        height: 4rem;
        padding: 1rem 1.2rem;
        border: 1px solid #d9d9d9;
        border-radius: 0.5rem;
        color: #454545;
        font-size: 1.4rem;
    }

    /* button */
    .button_area {
        padding: 4rem 0;
    }

    .button_area.assist {
        margin-top: 2rem;
    }

    .button_area a,
    .button_area button {
        padding: 1.8rem 0;
        border-radius: 0.8rem;
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .button_area .btn_outline_white {
        padding: 1.7rem 1.6rem;
    }

    /* Btn */
    .btn_area .btn_expand {
        margin-top: 1.2rem;
        padding: 1.2rem 0;
    }

    .btn_area .btn_expand span {
        margin-right: 0.4rem;
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .btn_more span {
        margin: -0.2rem 0.4rem 0 0;
        font-size: 1.6rem;
    }

    /* Header Wrap */
    .header_wrap {
        padding: 0 2.4rem;
    }

    .header_wrap.on {
        border-radius: 0 0 2.4rem 2.4rem;
        box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
    }

    .header_wrap .top_area {
        padding: 2.4rem 0;
    }

    .header_wrap .top_area .logo img {
        width: 13.5rem;
    }

    .header_wrap .top_area .location img {
        width: 1.8rem;
        height: 2.2rem;
    }

    .header_wrap .top_area .location span {
        font-size: 1.6rem;
    }

    .header_wrap .control_area {
        padding: 2.4rem 0;
    }

    .header_wrap .control_area .detail li {
        padding-left: 2.4rem;
    }

    .header_wrap .control_area .detail li i {
        margin-right: 0.8rem;
        font-size: 2rem;
    }

    .header_wrap .control_area .detail li span {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .header_wrap .control_area .detail li span.ttl {
        margin: 0 0.8rem 0 1.6rem;
    }

    .header_wrap .control_area button {
        padding: 0.4rem 0.8rem;
        border-radius: 0.2rem;
        font-size: 1.4rem;
        line-height: 2rem;
    }

    .header_wrap .control_area button i {
        margin-right: 0.5rem;
        font-size: 1.2rem;
        line-height: 2rem;
    }

    /* Content Wrap */
    .content_wrap {
        padding: 0 1.6rem 5.76em;
    }

    /* Filter */
    .filter_area {
        margin: 1.6rem 0;
        padding: 1.6rem;
        border-radius: 0.8rem;
    }

    .filter_area ul {
        margin-top: 0.8rem;
    }

    .filter_area .detail li i {
        margin-right: 0.8rem;
        font-size: 2rem;
        line-height: 2.4rem;
    }

    .filter_area .detail li i {
        margin-right: 0.8rem;
        font-size: 2rem;
        line-height: 2.4rem;
    }

    .filter_area .detail li span {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .filter_area .detail li span.ttl {
        margin: 0 0.8rem 0 1.6rem;
    }

    .filter_area .basic {
        margin-top: 1.6rem;
        padding-top: 1.6rem;
    }

    .filter_area .basic ul li.ttl {
        max-width: 5.5rem;
        font-size: 1.4rem;
    }

    .filter_area .location {
        margin-top: 1.6rem;
        padding-top: 1.6rem;
    }

    .filter_area .location li {
        margin: 0.4rem;
    }

    .filter_area ul.location li button {
        padding: 1rem 0;
        border-radius: 0.8rem;
        font-size: 1.4rem;
    }

    /* Section */
    .section_area {
        padding: 2rem 0;
    }

    /* Title */
    .ttl_area {
        margin-bottom: 1.6rem;
        line-height: 2.9rem;
    }

    .ttl_area h3 {
        font-size: 2rem;
    }

    .ttl_area .more {
        font-size: 1.4rem;
    }

    /* Footer Wrap */
    .footer_wrap {
      padding: 1.6rem 1.6rem 12.8rem;
    }

    /* Nav Wrap */
    .nav_wrap ul {
        padding: 2.65rem 0 4rem;
    }

    .nav_wrap ul li a i {
        font-size: 2.7rem;
    }

    .nav_wrap ul li a p {
        padding-top: 0.65rem;
        font-size: 1.4rem;
        line-height: 2rem;
    }

    /* User Wrap */
    .user_wrap {
        padding: 0 2.4rem;
    }

    .user_wrap .logo_area {
        padding-bottom: 6.4rem;
    }

    .user_wrap .logo_area a {
        width: 31.2rem;
    }

    /* Sub Top */
    .sub_top_area {
        padding: 3.8rem 0;
    }

    .sub_top_area a i {
        font-size: 3rem;
    }

    .sub_top_area h2 {
        font-size: 1.6rem;
        line-height: 3rem;
    }

    /* Step */
    .step_area {
        padding-bottom: 4.8rem;
    }

    .step_area ol li {
        width: 3.2rem;
        height: 3.2rem;
        margin: 0 0.8rem;
        border-radius: 3.2rem;
        font-size: 1.6rem;
    }

    .step_area ol li.on i {
        font-size: 1.6rem;
    }

    /* Tab */
    .tab_area {
        height: 4.4rem;
        margin-bottom: 2.4rem;
    }

    .tab_area ul {
        width: calc(100% + 4.8rem);
        margin-left: -2.4rem;
        border-bottom: 1px solid #d9d9d9;
    }

    .tab_area li.on {
        border-bottom: 3px solid #34d57f;
    }

    .tab_area li a {
        padding: 1rem 0;
        font-size: 1.6rem;
    }

    /* Teeup Detail */
    .teeup_detail > ul {
        padding: 2.4rem 0;
    }

    .teeup_detail > ul li {
        padding: 0.6rem 0;
    }

    .teeup_detail > ul li span,
    .teeup_detail > ul li strong {
        font-size: 1.4rem;
    }

    .teeup_detail > ul li button i {
        margin-right: 0.4rem;
        font-size: 2rem;
    }

    .teeup_detail > ul li del {
        font-size: 1.4rem;
    }

    .teeup_detail > ul li .detail .price {
        font-size: 1.4rem;
    }

    .teeup_detail > ul li .detail .price strong {
        margin-left: 0.8rem;
        font-size: 1.6rem;
    }

    .teeup_detail > ul li .detail span {
        margin-left: 0.4rem;
    }

    .teeup_detail > ul li.ttl {
        margin-bottom: 0.4rem;
    }

    .teeup_detail .total {
        padding-top: 1.6rem;
    }

    .teeup_detail .total .detail .price {
        font-size: 1.6rem;
    }

    .teeup_detail .total .detail .price strong {
        font-size: 2rem;
    }

    .teeup_detail .total .detail span {
        margin-left: 0.4rem;
    }

    .teeup_detail .total button {
        margin-top: 1.6rem;
        padding: 1.8rem 0;
        border-radius: 0.8rem;
        font-size: 1.6rem;
    }

    /* Alert Wrap */
    .alert_wrap {
        bottom: 14.6rem;
        width: calc(100% - 3.2rem);
        margin: 0 1.6rem;
        padding: 1.6rem 2.4rem;
        border-radius: 0.8rem;
        box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.15);
    }

    .alert_wrap p {
        font-size: 1.4rem;
        line-height: 2.2rem;
    }

    /* Popup */
    .mask .popup_wrap {
        min-width: calc(100% - 2.4rem);
        max-width: calc(100% - 2.4rem);
        border-radius: 0.8rem;
    }

    .mask .pop_title_area {
        padding: 2.4rem;
    }

    .mask .pop_title_area p {
        font-size: 1.4rem;
    }

    .mask .pop_title_area p.ttl {
        margin-bottom: 0.8rem;
        font-size: 2rem;
    }

    .mask .pop_title_area .more {
        top: 2.4rem;
        right: 2.4rem;
    }

    .mask .pop_title_area .more ul {
        width: 8rem;
        margin-top: 0.8rem;
        border-radius: 0.8rem;
        box-shadow: 0 0.3rem 1.5rem rgba(0, 0, 0, 0.2);
    }

    .mask .pop_title_area .more ul li button {
        padding: 1rem 0;
    }

    .mask .pop_title_area .more ul li button span {
        font-size: 1.4rem;
    }

    .mask .pop_cont_area {
        max-height: 32rem;
        padding: 0 2.4rem 4rem;
    }

    .mask .pop_cont_area .terms {
        padding: 1.6rem;
        border-radius: 0.8rem;
    }

    .mask .pop_cont_area .description {
        padding: 1.6rem;
        border-radius: 0.8rem;
    }

    .mask .pop_cont_area .description i {
        font-size: 16px;
    }

    .mask .pop_cont_area .description .reserve_info i {
        margin-top: 0;
    }

    .mask .pop_cont_area .teeup_detail {
        margin-top: 0.8rem;
    }

    .mask .pop_cont_area .survey button {
        margin-top: 0.8rem;
        padding: 1.8rem;
        border-radius: 0.8rem;
    }

    .mask .pop_cont_area .survey button span {
        font-size: 1.4rem;
    }

    .mask .pop_cont_area .star {
        margin-top: 2.4rem;
    }

    .mask .pop_cont_area .feed_area {
        padding: 2.4rem 0 0;
    }

    .mask .pop_cont_area .feed_area .feed .teeup_list li {
        border-radius: 0.4rem;
    }

    .mask .pop_cont_area .schedule_area .month {
        margin-bottom: 2.5rem;
    }

    .mask .pop_cont_area .schedule_area .month p {
        font-size: 2rem;
    }

    .mask .pop_cont_area .schedule_area .date_table th {
        font-size: 1.8rem;
    }

    .mask .pop_cont_area .schedule_area .date_table td button {
        padding: 0.8rem 0.75rem 1.1rem;
    }

    .mask .pop_cont_area .schedule_area .date_table td button .date {
        font-size: 1.8rem;
    }

    .mask .pop_cont_area .schedule_area .date_table td button .price {
        font-size: 1rem;
    }

    .mask .pop_cont_area .schedule_area .date_table td.on button {
        border-radius: 0.2rem;
    }

    .mask .pop_button_area button {
        padding: 1.8rem 0;
        font-size: 1.6rem;
    }

    .mask .reserve .pop_cont_area {
        padding: 2.4rem;
    }
}

@media (min-width: 992px) {
    body {
        overflow-y: hidden;
        background: transparent url('../../images/bg_gdr.jpg') no-repeat center center;
        background-size: cover;
    }

    .container {
        width: 120rem;
    }

    /* Assist Wrap */
    .assist_wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 40rem;
        height: 100vh;
    }

    /* Golf Wrap */
    .golf_wrap {
        overflow-y: scroll;
        width: 65.4rem;
        height: 100vh;
    }

    /* Header Wrap */
    .header_wrap .top_area .logo img {
        width: 17.8rem;
    }

    /* Content Wrap */
    .content_wrap {
        padding: 0 2.4rem 7.5rem;
    }

    /* Filter Wrap */
    .filter_area .location {
        margin-top: 2.4rem;
        padding-top: 2.4rem;
    }

    /* Title */
    .ttl_area {
        line-height: 3.5rem;
    }

    /* Footer Wrap */
    .footer_wrap {
      padding: 2.4rem 2.4rem 14.4rem;
    }
  
    .footer_wrap .logo {
      width: 17.8rem;
      height: 3.6rem;
      margin-bottom: 2.4rem;
    }
  
    .footer_wrap .logo img {
      width: 17.8rem;
      height: 3.6rem;
    }
  
    .footer_wrap .terms li:before {
      height: 1.2rem;
      margin-top: -0.5rem;
    }
  
    .footer_wrap .terms li a {
      padding: 0 1rem;
      font-size: 1.2rem;
    }
  
    .footer_wrap .company {
      margin: 2.4rem 0;
    }
  
    .footer_wrap .company p {
      font-size: 1.2rem;
      line-height: 2rem;
    }
  
    .footer_wrap .copyright {
      font-size: 1.2rem;
      line-height: 2rem;
    }

    /* Nav Wrap */
    .nav_wrap {
        position: absolute;
        max-width: 64rem;
    }

    /* Tab */
    .tab_area ul {
        width: 64rem;
        margin-left: calc(-32rem + 50%);
    }

    /* Alert Wrap */
    .alert_wrap {
        position: absolute;
        width: calc(64rem - 3.2rem);
    }

    /* Popup */
    .mask {
        width: 64rem;
        height: 100vh;
    }

    .mask .popup_wrap {
        position: initial;
    }

    .mask .popup_wrap.reserve,
    .mask .popup_wrap.promotion {
        min-width: 59.2rem;
        max-width: 59.2rem;
    }

    .mask .popup_wrap.promotion .pop_cont_area img {
      max-height: initial;
    }

    .mask .pop_cont_area .schedule_area .date_table td {
        min-width: 7.6rem;
    }

    .mask .pop_logo_area {
        position: initial;
        top: initial;
        left: initial;
        transform: none;
    }
  
    .mask .pop_logo_area img {
        width: 35.6rem;
        height: 7.2rem;
        max-height: 7.2rem;
    } 
}

/* Animation */
.shake {
    -webkit-animation: shake 1.5s infinite alternate;
    animation: shake 1.5s infinite alternate;
}

@keyframes shake {
    0% {
        -webkit-transform: translate(2px, 1px) rotate(0);
        transform: translate(2px, 1px) rotate(0);
    }
    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-2deg);
        transform: translate(-1px, -2px) rotate(-2deg);
    }
    20% {
        -webkit-transform: translate(-3px, 0) rotate(3deg);
        transform: translate(-3px, 0) rotate(3deg);
    }
    30% {
        -webkit-transform: translate(0, 2px) rotate(0);
        transform: translate(0, 2px) rotate(0);
    }
    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        -webkit-transform: translate(-3px, 1px) rotate(0);
        transform: translate(-3px, 1px) rotate(0);
    }
    70% {
        -webkit-transform: translate(2px, 1px) rotate(-2deg);
        transform: translate(2px, 1px) rotate(-2deg);
    }
    80% {
        -webkit-transform: translate(-1px, -1px) rotate(4deg);
        transform: translate(-1px, -1px) rotate(4deg);
    }
    90% {
        -webkit-transform: translate(2px, 2px) rotate(0);
        transform: translate(2px, 2px) rotate(0);
    }
    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg);
        transform: translate(1px, -2px) rotate(-1deg);
    }
}