body header.scroll+.container .contents-reservation-cc .golf-cc-container[data-state=active] { top: 80px !important}
body.reservation #footer { display: none}
[data-catagory=reservation] .contents-reservation-cc { position: relative; min-height: calc(100vh - 120px)}
[data-catagory=reservation] .contents-reservation-cc.intro-main::after { content: ""; position: absolute; top: 0; left: 50%; width: 100%; height: 100%; margin-left: -349px; background-color: #edf9fa}
[data-catagory=reservation] .contents-reservation-cc.intro-main::before { content: ""; background: url("../image/reservation-bg-intro-2.png") no-repeat left top; position: absolute; left: 50%; bottom: 0; width: 785px; height: 381px; margin-left: -349px; z-index: 1}
[data-catagory=reservation] .contents-reservation-cc.intro-main .schedule-contents::after { content: ""; background: url("../image/reservation-bg-intro-1.png") no-repeat left top; position: fixed; right: 0; top: 120px; width: 658px; height: 468px; z-index: 1}
[data-catagory=reservation] .contents-area { position: relative; z-index: 1; width: 1420px; margin: 0 auto; padding-bottom: 60px; display: flex}
[data-catagory=reservation] .aside { position: fixed; left: 50%; top: 120px; bottom: 60px; width: 280px; margin-left: -710px; -ms-overflow-style: none}
[data-catagory=reservation] .aside[data-position=static] { bottom: 408px}
[data-catagory=reservation] .aside>.scroll-area-content { overflow-y: auto; position: absolute; left: 0; top: 40px; bottom: 0; width: 320px; padding-right: 40px !important}
[data-catagory=reservation] .aside>.scroll-area-content::-webkit-scrollbar { display: none}
[data-catagory=reservation] .aside>.scroll-area-content .cc-select-area { transition: opacity .6s ease-in-out}
[data-catagory=reservation] .aside>.scroll-area-content .select-box { transition: opacity .6s ease-in-out}
[data-catagory=reservation] .aside:hover .scroll-element { opacity: 1; transition: all cubic-bezier(0.65, 0.05, 0.36, 0.5) .2s}
[data-catagory=reservation] .aside .scroll-element { right: 0; opacity: 0; transition: all cubic-bezier(0.65, 0.05, 0.36, 0.5) .2s}
[data-catagory=reservation] .aside .scroll-element.scroll-x { display: none}
[data-catagory=reservation] .aside .title-cc { font-size: 36px; line-height: 36px; padding-bottom: 35px}
[data-catagory=reservation] .aside .btn-box { position: absolute; top: 5px; right: 0}
[data-catagory=reservation] .aside .btn-box .submit-small { padding: 6px 20px}
[data-catagory=reservation] .aside .btn-box .submit-small em { font-size: 14px; line-height: 14px}
[data-catagory=reservation] .aside .cc-select-area ul { border-bottom: 1px #ddd solid; margin-bottom: 30px}
[data-catagory=reservation] .aside .cc-select-area ul:after { content: ""; display: block; clear: both}
[data-catagory=reservation] .aside .cc-select-area ul li { float: left; width: 33.33333333%; position: relative}
[data-catagory=reservation] .aside .cc-select-area ul li::after { content: ""; position: absolute; right: -1px; top: 2px; border-right: 1px #eee solid; height: 16px}
[data-catagory=reservation] .aside .cc-select-area ul li:last-child::after { display: none}
[data-catagory=reservation] .aside .cc-select-area ul li button { padding-bottom: 15px; width: 100%; position: relative}
[data-catagory=reservation] .aside .cc-select-area ul li button em { color: #000; font-size: 18px; line-height: 18px}
[data-catagory=reservation] .aside .cc-select-area ul li button.active em { color: #da291c; font-weight: bold}
[data-catagory=reservation] .aside .cc-select-area ul li button.active::before { content: ""; border-bottom: 2px #da291c solid; position: absolute; left: 0; right: 0; bottom: -1px}
[data-catagory=reservation] .aside .cc-select-area ul li button.active::after { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='8px'%3e%3cpath fill-rule='evenodd' fill='rgb(218, 41, 28)' d='M0.773,-0.000 C1.420,-0.000 12.765,-0.000 13.210,-0.000 C13.789,-0.000 14.219,0.386 13.881,0.768 C13.610,1.074 8.142,7.194 7.675,7.716 C7.367,8.059 6.635,8.053 6.327,7.716 C5.984,7.340 0.489,1.197 0.107,0.753 C-0.173,0.427 0.136,-0.000 0.773,-0.000 Z'/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 14px; height: 8px; position: absolute; left: 50%; bottom: -7px; margin-left: -7px}
[data-catagory=reservation] .aside .select-box { margin: -10px 0 0 100px}
[data-catagory=reservation] .aside .select-box em { font-weight: bold}
[data-catagory=reservation] .aside .cc-cal-area { padding: 10px 0 5px; border-bottom: 1px #eee solid; transition: opacity .6s ease-in-out}
[data-catagory=reservation] .aside .cc-cal-area:last-child { margin-bottom: 30px}
[data-catagory=reservation] .aside .cc-cal-area>strong { display: block; margin-bottom: 10px}
[data-catagory=reservation] .aside .cc-cal-area>strong em { font-size: 14px; line-height: 14px; font-weight: bold; letter-spacing: 0; color: #555}
[data-catagory=reservation] .aside .cc-cal-area table thead tr th { padding-bottom: 5px}
[data-catagory=reservation] .aside .cc-cal-area table thead tr th em { color: #777; font-size: 14px; line-height: 14px}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td { text-align: center; padding: 5px 0; cursor: pointer}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td:first-child em { color: #e63333}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td:last-child em { color: #2086cd}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td em { display: block; font-size: 13px; line-height: 13px; font-weight: bold; letter-spacing: 0}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td span { display: block; min-width: 40px; font-size: 11px; line-height: 11px; padding-top: 5px; color: #555; letter-spacing: 0}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td.now { position: relative}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td.now::after { content: ""; position: absolute; right: 2px; top: 2px; width: 4px; height: 4px; background-color: #e63333; border-radius: 50%}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td.disabled { cursor: default}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td.disabled em, [data-catagory=reservation] .aside .cc-cal-area table tbody tr td.disabled span { color: #aaa}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td.active { background-color: #e63333}
[data-catagory=reservation] .aside .cc-cal-area table tbody tr td.active em, [data-catagory=reservation] .aside .cc-cal-area table tbody tr td.active span { color: #fff}
[data-catagory=reservation] .schedule-contents { width: calc(100% - 360px); margin-left: 360px}
[data-catagory=reservation] .schedule-contents .intro-cc { padding: 110px 0 0 110px; width: 100%; position: relative; z-index: 10}
[data-catagory=reservation] .schedule-contents .intro-cc .templ-type-herder { margin-bottom: 40px}
[data-catagory=reservation] .schedule-contents .intro-cc>h3 { font-size: 18px; line-height: 18px; padding-top: 40px; margin-top: 40px; border-top: 1px #eee solid}
[data-catagory=reservation] .schedule-contents .intro-cc>span { display: block; color: #777}
[data-catagory=reservation] .schedule-contents .intro-cc>span .button-small { width: inherit; padding-left: 30px; padding-right: 30px; margin-left: 30px}
[data-catagory=reservation] .schedule-contents .intro-cc>span .button-small+.button-small { margin-left: 9px}
[data-catagory=reservation] .schedule-contents .intro-cc>p { margin-top: 40px; font-size: 18px; line-height: 18px; color: #da291c}
[data-catagory=reservation] .schedule-contents .no-schedule { text-align: center; margin-top: 115px; border-top: 1px solid #555}
[data-catagory=reservation] .schedule-contents .no-schedule .icon-no-result { display: block; margin: 60px auto 0}
[data-catagory=reservation] .schedule-contents .no-schedule .notice-text { display: block; margin-top: 30px; font-size: 16px; line-height: 26px; color: #555}
[data-catagory=reservation] .schedule-contents .no-schedule .notice-box { max-width: 500px; margin: 30px auto 0; padding: 30px 0px; border-radius: 15px; background: #f5f5f5}
[data-catagory=reservation] .schedule-contents .no-schedule .notice-box .txt { line-height: 1.6}
[data-catagory=reservation] .schedule-contents .schedule { padding: 60px 0 0 0}
[data-catagory=reservation] .schedule-contents .schedule.package-area { padding: 95px 0 0 0}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package { border-top: 2px #000 solid}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package .no-data-box { border-top: none}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li { border-bottom: 1px #eee solid; padding: 20px 0; position: relative}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li:after { content: ""; display: block; clear: both}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .img { float: left}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .img img { display: block}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item { float: left; width: 600px; margin-left: 30px; padding-top: 7px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item a { display: inline-block; font-size: 18px; font-weight: bold; margin-bottom: 15px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item a::after { display: inline-block; width: 30px; height: 30px; margin-left: 11px; border-radius: 100px; background: #eee url("../image/icon-search.png") no-repeat 50% 50%; background-size: 16px 16px; vertical-align: -8px; content: ""}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item span { display: block; margin-bottom: 10px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item span .dl-content dt { padding-bottom: 10px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item span .dl-content dd { padding-bottom: 10px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item span .dl-content .hidden { display: none}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item span .caution { padding-top: 8px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item span p { line-height: 26px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item span p * { line-height: 26px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .package-item em { display: block; color: #777; padding-top: 10px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area { position: absolute; right: 0; top: 50px; text-align: right}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area span { display: block; font-size: 20px; color: #da291c; margin-bottom: 15px; padding-right: 30px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area span em { font-size: 22px; color: #da291c; display: inline-block; padding-right: 3px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area span.text-small { margin-bottom: 10px; color: #777; font-size: 14px; line-height: 14px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area span.text-small em { font-size: 14px; line-height: 14px; color: #777}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area a { display: inline-block; font-size: 18px; padding: 15px 48px; border: 1px #ccc solid; border-radius: 100px; transition: all cubic-bezier(0.65, 0.05, 0.36, 0.5) .2s}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area a:hover { transition: all cubic-bezier(0.65, 0.05, 0.36, 0.5) .2s; color: #fff; background-color: #e63333; border-color: #e63333}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area .pictogram-box { margin-bottom: 15px; padding-right: 30px; display: block; font-size: 0; line-height: 1}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area .pictogram-box .ico-picoto-rev { margin-bottom: 0; padding: 0; display: inline-block; width: 60px; height: 60px; font-size: 0}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area .pictogram-box .ico-picoto-rev img { width: 100%}
[data-catagory=reservation] .schedule-contents .schedule .schedule-package ul li .r-area .pictogram-box .ico-picoto-rev+span { margin-left: 1px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table thead tr th { background-color: #a59280; border-left: 1px #928171 solid; padding: 11px 0}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table thead tr th:first-child { border-left: none}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table thead tr th button { width: 16px; height: 16px; padding: 0}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table thead tr th strong { display: inline-block; margin-right: 3px; color: #fff}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table thead tr th span { font-size: 14px; color: #fff; display: inline-block}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td { border-left: 1px #e5e5e5 solid; border-bottom: 1px #ccc solid; vertical-align: middle; border-bottom: 1px #e5e5e5 solid; vertical-align: top}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(3), [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(3)~td { width: 504px; padding: 20px 0 20px 7px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(3)>ul li, [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(3)~td>ul li { padding: 3px 2px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(3)>ul li .minute-area, [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(3)~td>ul li .minute-area { padding: 5px 0 5px 4px; width: 50px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(3)>ul li .minute-area em, [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(3)~td>ul li .minute-area em { padding-bottom: 4px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(5), [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child:nth-last-child(5)~td { width: 250px; padding: 20px 20px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:nth-child(even) { background-color: #f7f4f0}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:first-child { width: 54px !important; background-color: rgba(0, 0, 0, 0); vertical-align: middle; text-align: center; padding: 0 !important}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td:last-child { border-right: 1px #e5e5e5 solid}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td .time-area { display: block}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td .time-area em { display: block; font-weight: bold; font-size: 14px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul:after { content: ""; display: block; clear: both}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li { float: left; padding: 9px 4px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area { position: relative; border: 1px #ccc solid; background-color: #fff; cursor: pointer; padding: 7px 10px 7px 10px; width: 60px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area em { display: block; font-size: 12px; line-height: 12px; padding-bottom: 8px; color: #555}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area em strong { font-weight: bold; letter-spacing: 0}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area u { display: block; text-decoration: line-through; font-size: 11px; line-height: 11px; color: #999; padding-right: 4px; padding-bottom: 3px; letter-spacing: 0; text-align: right}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area span { display: block; font-size: 11px; line-height: 11px; color: #555; letter-spacing: 0; text-align: right; padding-right: 4px}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area mark { position: absolute; right: -1px; top: -12px; padding: 0 5px; font-size: 11px; color: #33aeb6; font-weight: bold; border: 1px solid #33aeb6; background-color: #fff}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=waiting] { background-color: #ddd; cursor: default; position: relative}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=waiting]::after { content: ""; position: absolute; right: 5px; top: 5px; width: 4px; height: 4px; background-color: #e63333; border-radius: 50%}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=close] { background-color: #eee; cursor: default}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=close] em { opacity: .5}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=close] u { color: #999}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=close] span { color: #555}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=active] { background-color: #e63333; border-color: #e63333}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=active] em, [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=active] u, [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=active] strong, [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area[data-state=active] span { color: #fff}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area.self[data-state=active] { background-color: #33aeb6; border-color: #33aeb6}
[data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area.self[data-state=active] em, [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area.self[data-state=active] u, [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area.self[data-state=active] strong, [data-catagory=reservation] .schedule-contents .schedule .schedule-times table tbody tr td>ul li .minute-area.self[data-state=active] span { color: #fff}
[data-catagory=reservation] .coupon-align { float: right}
[data-catagory=reservation] .filter-area .select-box, [data-catagory=reservation] .coupon-align .select-box { float: left; width: 90px}
[data-catagory=reservation] .filter-area .select-box em, [data-catagory=reservation] .coupon-align .select-box em { padding: 6px 0 0; height: 33px; border-bottom: 1px #555 solid}
[data-catagory=reservation] .filter-area .select-box::before, [data-catagory=reservation] .coupon-align .select-box::before { top: 12px}
[data-catagory=reservation] .filter-area .select-box ul, [data-catagory=reservation] .coupon-align .select-box ul { top: 30px}
@media screen and (max-width: 768px) { [data-catagory=reservation] .filter-area .select-box ul, [data-catagory=reservation] .coupon-align .select-box ul { top: 28px}
 }
[data-catagory=reservation] .filter-area { position: relative}
[data-catagory=reservation] .filter-area .l-area>ul { margin-top: 16px}
[data-catagory=reservation] .filter-area .l-area>ul:after { content: ""; display: block; clear: both}
[data-catagory=reservation] .filter-area .l-area>ul>li { float: left; margin-left: 15px}
[data-catagory=reservation] .filter-area .l-area>ul>li:nth-child(1) em { color: #da291c}
[data-catagory=reservation] .filter-area .l-area>ul>li:nth-child(2) em { color: #000}
[data-catagory=reservation] .filter-area .l-area>ul>li:nth-child(3) em { color: #777}
[data-catagory=reservation] .filter-area .l-area>ul>li i { display: inline-block; margin-right: 6px; width: 14px; height: 12px; border: 1px #ccc solid}
[data-catagory=reservation] .filter-area .l-area>ul>li i.icon-fs-2 { background-color: #ddd; position: relative}
[data-catagory=reservation] .filter-area .l-area>ul>li i.icon-fs-2::after { content: ""; position: absolute; right: 2px; top: 2px; width: 3px; height: 3px; background-color: #e63333; border-radius: 50%}
[data-catagory=reservation] .filter-area .l-area>ul>li i.icon-fs-3 { background-color: #f2f2f2}
[data-catagory=reservation] .filter-area .l-area>ul>li em { font-size: 14px; line-height: 14px}
[data-catagory=reservation] .filter-area .date-year-month { position: absolute; min-width: 400px; top: -15px; left: 0; right: 0; margin: 0 auto; text-align: center}
[data-catagory=reservation] .filter-area .date-year-month .year { font-size: 20px; line-height: 20px; color: #777}
[data-catagory=reservation] .filter-area .date-year-month .year em { font-size: 20px; line-height: 20px; color: #777}
[data-catagory=reservation] .filter-area .date-year-month .month { display: inline-block; font-size: 32px; line-height: 32px; font-weight: bold; padding-left: 7px}
[data-catagory=reservation] .filter-area .date-year-month .month em { font-size: 32px; line-height: 32px; font-weight: bold}
[data-catagory=reservation] .filter-area .date-year-month button { width: 34px; height: 34px; vertical-align: 0; margin: 0 13px}
[data-catagory=reservation] .filter-area .date-year-month button i { vertical-align: -3px}
[data-catagory=reservation] .filter-area .r-area { position: relative; height: 34px}
[data-catagory=reservation] .filter-area .r-area:after { content: ""; display: block; clear: both}
[data-catagory=reservation] .filter-area .r-area .total { float: left; margin-right: 30px}
[data-catagory=reservation] .filter-area .r-area .total+.select-box { margin-top: 8px}
[data-catagory=reservation] .filter-area .r-area .select-box { float: left}
[data-catagory=reservation] .filter-area .r-area .update { margin-top: 10px}
[data-catagory=reservation] .filter-area .r-area .update button { color: #555; font-size: 14px; border-bottom: 1px #ccc solid; padding: 0 0 5px 0}
[data-catagory=reservation] .filter-area .r-area .update button::before { content: ""; background: url("../image/icon_reset-2.png") no-repeat left top; display: inline-block; width: 16px; height: 16px; vertical-align: -4px; margin-right: 5px}
[data-catagory=reservation] .golf-cc-container { position: fixed; bottom: 0; left: 0; right: 0; top: calc(100vh - 60px); z-index: 100; background-color: #fff; transition: all cubic-bezier(0.65, 0.05, 0.36, 0.5) .2s}
[data-catagory=reservation] .golf-cc-container[data-position=static] { transition: all cubic-bezier(0.65, 0.05, 0.36, 0.5) .2s; bottom: 280px}
[data-catagory=reservation] .golf-cc-container[data-state=active] { transition: all cubic-bezier(0.65, 0.05, 0.36, 0.5) .2s; top: 120px !important}
[data-catagory=reservation] .golf-cc-container[data-state=active] .cc-bar { background-color: #387688}
[data-catagory=reservation] .golf-cc-container[data-state=active] .cc-bar .cont button { background-color: #2d5e6d}
[data-catagory=reservation] .golf-cc-container[data-state=active] .golf-cc-contents { display: block}
[data-catagory=reservation] .golf-cc-container .cc-bar { background-color: #387688}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont { max-width: 1280px; margin: 0 auto; position: relative}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont ul { padding: 21px 0}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont ul:after { content: ""; display: block; clear: both}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont ul li { float: left; padding-left: 34px; position: relative}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont ul li:first-child span { text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; width: 60px; display: block}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont ul li:first-child span.package-area { width: 200px}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont ul li:first-child::before { display: none}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont ul li::before { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='10.5px' height='17.5px'%3e%3cpath fill-rule='evenodd' stroke='rgb(255, 255, 255)' stroke-width='1px' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M1.012,15.964 L8.146,8.984 L1.012,1.007 '/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 10.5px; height: 17.5px; position: absolute; left: 12px; top: 1px; opacity: .3}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont ul li span { color: #fff; letter-spacing: 0; font-size: 18px; line-height: 18px}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont button { position: absolute; right: 0; top: 0; bottom: 0; width: 140px; padding-left: 20px; text-align: left}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont button em { font-size: 18px}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont button.select-menu { background-color: #326a7a}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont button.select-menu::before { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='19px'%3e%3cpath fill-rule='evenodd' stroke='rgb(255, 255, 255)' stroke-width='2px' stroke-linecap='round' stroke-linejoin='round' opacity='0.502' fill='none' d='M2.975,15.056 L10.025,9.458 L2.975,2.917 '/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 14px; height: 19px; position: absolute; right: 23px; top: 21px}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont button.select-menu.active { background-color: #da291c; opacity: 1}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont button.select-menu.active em { color: #fff}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont button.select-menu.active::before { background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='19px'%3e%3cpath fill-rule='evenodd' stroke='rgb(255, 255, 255)' stroke-width='2px' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M2.975,15.056 L10.025,9.458 L2.975,2.917 '/%3e%3c/svg%3e")}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont button.edit-menu { background-color: #27525f; color: #fff; padding-left: 70px}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont button.edit-menu::before { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='17px' height='18px'%3e%3cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M12.299,0.207 L15.787,3.668 C16.062,3.941 16.061,4.386 15.783,4.661 L5.196,15.152 L-0.000,15.999 L0.712,10.703 L11.299,0.211 C11.576,-0.064 12.024,-0.066 12.299,0.207 Z'/%3e%3cpath fill-rule='evenodd' stroke='rgb(39, 82, 95)' stroke-width='2px' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M3.679,8.312 L8.742,13.536 '/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 17px; height: 18px; position: absolute; left: 43px; top: 20px}
[data-catagory=reservation] .golf-cc-container .golf-cc-contents { position: absolute; top: 60px; bottom: 0; left: 18px; right: 0; overflow: auto; display: none; -ms-overflow-style: none}
/* 2026.02.25_골프예약 리셋버튼 임시 비활성화 */
/*[data-catagory=reservation] .golf-cc-container .cc-bar .cont ul li.btn-wrap {padding-right: 20px;}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont .btn-wrap:not(.reset-date) button.reset-btn{display: none;}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont .btn-wrap:has(.reset-date) button.reset-btn {display: block;    width: 155px; border: 0; padding: 0; background-color: unset;}
[data-catagory=reservation] .golf-cc-container .cc-bar .cont .btn-wrap:has(.reset-date) button.reset-btn::after {position: absolute; content: ''; top: -12px; right: 0; width: 23px;    height: 23px;    background: url(../image/rec-t.png) no-repeat left top;    background-size: 100% 100%;}*/
.filter-area { margin-bottom: 15px}
.filter-area:after { content: ""; display: block; clear: both}
.filter-area .select-box { width: 90px}
.filter-area .l-area { float: right}
.filter-area .r-area { float: left}
.filter-area .r-area .total { margin-top: 17px; display: block}
.filter-area .r-area .total em { font-weight: 700; color: #da291c}
.modal-pop-area .modal-title.charge { margin-bottom: 30px}
.modal-pop-area .contents.charge { padding: 0 !important}
.modal-pop-area .contents.charge .faq-list-content { border-top: 0}
.modal-pop-area .contents.charge .faq-item { padding-bottom: 30px; border-bottom: 0}
.modal-pop-area .contents.charge .faq-item:last-child { padding-bottom: 0}
.modal-pop-area .contents.charge .faq-item .question .title:before, .modal-pop-area .contents.charge .faq-item .answer:before { display: none}
.modal-pop-area .contents.charge .faq-item .question { position: relative; border-bottom: 2px solid #000}
.modal-pop-area .contents.charge .faq-item .question .title { display: block}
.modal-pop-area .contents.charge .faq-item .answer { padding: 0; border-top: 0; background: none}
.modal-pop-area .contents.charge .faq-item .answer .table { border-top: 0}
.modal-pop-area .contents.charge .faq-item .answer .templ-type-infolist-2 ul { margin-top: 10px}
.modal-pop-area .contents.charge .templ-type-infolist-2 ul li { text-indent: -10px; padding: 0 0 0 10px; word-break: keep-all}
.modal-pop-area .contents.charge .templ-type-infolist-2 ul>li::before, .modal-pop-area .contents.charge .templ-type-infolist-3 ul>li::before, .modal-pop-area .contents.charge .templ-type-infolist-4 ul>li::before { vertical-align: 0}
.modal-pop-area .contents.charge+.btn-area { margin-top: 50px}
.modal-pop-area .contents.charge .faq-item .question:before, .modal-pop-area .contents.charge .faq-item .question:after { position: absolute; top: calc(50% - 8px); width: 1px; height: 16px; background-color: #888; content: ""}
.modal-pop-area .contents.charge .faq-item .question:before { transform: rotate(-45deg)}
.modal-pop-area .contents.charge .faq-item .question:after { transform: rotate(-135deg)}
.modal-pop-area .contents.charge .faq-item .question.active:before { transform: rotate(45deg)}
.modal-pop-area .contents.charge .faq-item .question.active:after { transform: rotate(135deg)}
@media screen and (max-width: 768px){
 .modal-pop-area .modal-title.charge { margin-bottom: 20px}
 .modal-pop-area .contents.charge { padding-top: 0 !important}
 .modal-pop-area .contents.charge .faq-item { padding-bottom: 20px; border-bottom: 0}
 .modal-pop-area .contents.charge .faq-item:last-child { padding-bottom: 0}
 .modal-pop-area .contents.charge .faq-item .answer { padding: 0; background: none; border-top: 0}
 .modal-pop-area .contents.charge .faq-item .question .title { padding: 0 0 10px 0; font-size: 19px; line-height: 27px}
 .modal-pop-area .contents.charge .faq-item .question.active .title { font-weight: normal}
 .modal-pop-area .contents.charge .faq-item .question { border-bottom: 2px solid #000}
 .modal-pop-area .contents.charge .faq-item .question .title:before, .modal-pop-area .contents.charge .faq-item .answer:before { display: none}
 .modal-pop-area .contents.charge .templ-type-infolist-2 { margin-top: 5px}
 .modal-pop-area .contents.charge .faq-list-content { margin: 0; border-top: 0}
 .modal-pop-area .contents.charge .faq-item .answer .table { border-top: 0}
 .modal-pop-area .contents.charge .faq-item .answer .templ-type-infolist-2 ul { margin-top: 10px}
 .modal-pop-area .contents.charge .faq-item .answer .templ-type-infolist-2 ul li { word-break: keep-all}
 .modal-pop-area .contents.charge .table .table-center th, .modal-pop-area .contents.charge .table .table-center td { padding: 10px 0; word-break: keep-all}
 }
.coupon-area .coupon-lists { margin: 20px -10px -40px}
.coupon-area .coupon-lists:after { content: ""; display: block; clear: both}
.coupon-area .coupon-lists>li { float: left; width: 33.3333333333%; padding: 0 10px 40px; min-height: 455px}
.coupon-area .coupon-lists>li .coupon-buy-item { border: 1px #ddd solid; border-radius: 10px; overflow: hidden; position: relative}
.coupon-area .coupon-lists>li .coupon-buy-item .img { display: block; max-height: 239px; overflow: hidden}
.coupon-area .coupon-lists>li .coupon-buy-item .img img { width: 100%; height: 100%}
.coupon-area .coupon-lists>li .coupon-buy-item .t { min-height: 239px; padding: 40px 30px 0; position: relative; position: absolute; left: 0; right: 0; top: 0; z-index: 1}
.coupon-area .coupon-lists>li .coupon-buy-item .t .coupon-label { padding-bottom: 13px}
.coupon-area .coupon-lists>li .coupon-buy-item .t .tit { font-size: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 46px; height: 91px}
.coupon-area .coupon-lists>li .coupon-buy-item .t .bt { position: absolute; left: 30px; bottom: 30px}
.coupon-area .coupon-lists>li .coupon-buy-item .t .bt p { margin-top: 10px}
.coupon-area .coupon-lists>li .coupon-buy-item .t .bt p span { display: inline-block; width: 67px; color: #555}
.coupon-area .coupon-lists>li .coupon-buy-item .p { padding: 30px; position: relative}
.coupon-area .coupon-lists>li .coupon-buy-item .p .buy { text-align: right; margin-bottom: 30px}
.coupon-area .coupon-lists>li .coupon-buy-item .p .buy .discount { font-size: 14px; line-height: 14px; color: #555; text-decoration: line-through}
.coupon-area .coupon-lists>li .coupon-buy-item .p .buy .price { display: inline-block; padding-left: 5px; font-size: 24px; line-height: 24px; color: #da291c; font-weight: bold}
.coupon-area .coupon-lists>li .coupon-buy-item .p .buy-copon { font-size: 18px; line-height: 18px; border: 1px solid #ccc; background-color: #fff; border-radius: 200px; padding: 20px 0; min-width: 180px; text-align: center; display: block; transition: all cubic-bezier(0.65, 0.05, 0.36, 0.5) .2s}
.coupon-area .coupon-lists>li .coupon-buy-item .p .buy-copon:hover { border: 1px solid #33aeb6; background-color: #33aeb6; color: #fff; transition: all cubic-bezier(0.65, 0.05, 0.36, 0.5) .2s}
@media screen and (max-width: 768px){
 .coupon-area .coupon-lists { margin: 20px 0 -30px}
 .coupon-area .coupon-lists>li { width: 100%; padding: 0 0 30px; min-height: initial}
 .coupon-area .coupon-lists>li .coupon-buy-item .img { min-height: 100%}
 .coupon-area .coupon-lists>li .coupon-buy-item .img img { width: 100%; max-height: 179px}
 .coupon-area .coupon-lists>li .coupon-buy-item .t { min-height: 179px; padding: 25px 20px 0}
 .coupon-area .coupon-lists>li .coupon-buy-item .t .coupon-label { padding-bottom: 9px}
 .coupon-area .coupon-lists>li .coupon-buy-item .t .tit { font-size: 23px; line-height: 28px; height: 55px}
 .coupon-area .coupon-lists>li .coupon-buy-item .t .bt { left: 20px; bottom: 20px}
 .coupon-area .coupon-lists>li .coupon-buy-item .p { padding: 20px; position: relative}
 .coupon-area .coupon-lists>li .coupon-buy-item .p .buy { text-align: right}
 .coupon-area .coupon-lists>li .coupon-buy-item .p .buy .discount { font-size: 12px}
 .coupon-area .coupon-lists>li .coupon-buy-item .p .buy .price { font-size: 20px; padding-left: 5px}
 .coupon-area .coupon-lists>li .coupon-buy-item .p .buy-copon { font-size: 15px; padding: 15px 0}
 }
.information-use-area-mobile { position: relative}
.information-use-area-mobile h3 { font-size: 24px; line-height: 24px; margin-bottom: 50px; font-family: SpoqaHanSans-Light}
@media screen and (max-width: 768px){
 .information-use-area-mobile h3 { padding: 0 20px}
 }
.information-use-area-mobile ul li { position: relative; text-align: center}
.information-use-area-mobile ul li::after { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15px' height='27px'%3e%3cpath fill-rule='evenodd' fill='rgb(204, 204, 204)' d='M14.228,14.207 L2.207,26.228 C1.816,26.618 1.183,26.618 0.793,26.228 C0.402,25.837 0.402,25.204 0.793,24.814 L12.106,13.500 L0.793,2.186 C0.402,1.796 0.402,1.162 0.793,0.772 C1.183,0.381 1.816,0.381 2.207,0.772 L14.228,12.793 C14.618,13.183 14.618,13.817 14.228,14.207 Z'/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 15px; height: 27px; margin: 0 auto; position: absolute; left: 0; right: 0; bottom: -45px; transform: rotate(90deg)}
.information-use-area-mobile ul li:nth-child(1) { margin-bottom: 60px}
.information-use-area-mobile ul li:nth-child(2) { margin-bottom: 67px}
.information-use-area-mobile ul li:nth-child(3):after { content: ""; display: block; clear: both}
.information-use-area-mobile ul li:nth-child(3) .f { float: left; width: 50%; padding: 0 20px}
.information-use-area-mobile ul li:nth-child(3)::after { display: none}
.information-use-area-mobile ul li .ic { margin-bottom: 20px}
.information-use-area-mobile ul li .ic i { display: block; margin: 0 auto}
.information-use-area-mobile ul li .ic i.icon-use-1 { background: url(../image/icon-use-m-1.png) no-repeat center top; background-size: 100% 100%; width: 50px; height: 35px}
.information-use-area-mobile ul li .ic i.icon-use-2 { background: url(../image/icon-use-m-2.png) no-repeat center top; background-size: 100% 100%; width: 50px; height: 40px}
.information-use-area-mobile ul li .ic i.icon-use-3 { background: url(../image/icon-use-m-3.png) no-repeat center top; background-size: 100% 100%; width: 53px; height: 35px; margin-bottom: 26px}
.information-use-area-mobile ul li .ic i.icon-use-4 { background: url(../image/icon-use-m-4.png) no-repeat center top; background-size: 100% 100%; width: 44px; height: 42px}
.information-use-area-mobile ul li span { font-size: 18px; line-height: 24px}
.information-use-area-mobile ul li em { display: block; font-size: 14px; line-height: 14px; color: #777; padding-top: 4px}
.information-use-area-mobile ul li .or { background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25px' height='16px'%3e%3ctext kerning='auto' font-family='Gulim' fill='rgb(0, 0, 0)' font-size='26px' x='0px' y='16px'%3e%3ctspan font-size='26px' font-family='SpoqaHanSans' fill='%23CCCCCC'%3eor%3c/tspan%3e%3c/text%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 25px; height: 16px; margin: 0 auto; position: absolute; left: 0; right: 0; top: 59px}
[data-catagory=reservation] .search-filter.weekend { padding-bottom: 22px}
[data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend h3 { font-size: 18px; line-height: 1}
[data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend li { margin-bottom: 5px; font-weight: bold; color: #555}
[data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend li::before { background-color: #666}
[data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend li:last-child { margin-bottom: 0}
[data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend .depth2 { margin-top: 5px}
[data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend .depth2 li { margin: 0; padding-left: 0; font-weight: normal; line-height: 30px; color: #777}
[data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend .depth2 li::before { display: none}
[data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend .depth2 .blue { color: #33aeb6}
[data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend .depth2 .red { color: #da291c}
[data-catagory=reservation] .weekend-form-wrap { margin-top: 48px}
[data-catagory=reservation] .weekend-form-wrap .tit { font-family: SpoqaHanSans-Light; font-size: 36px; line-height: 58px}
[data-catagory=reservation] .weekend-form-wrap .form-box { margin: 15px 0 0 0}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner { font-size: 0}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner+.form-inner { margin-top: 50px}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner>div { margin-top: 0; padding-left: 38px; display: inline-block; width: 33.3333333333%; vertical-align: top}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner>div:first-child { padding-left: 0}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner>div.check { vertical-align: bottom}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .form-wrap.disabled label { font-weight: normal; color: #777}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .form-wrap .checkbox-box { display: block; margin-bottom: 26px}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .form-wrap .checkbox-box label { margin-bottom: 0}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .form-wrap .etcTxt { margin-top: 10px; font-weight: bold}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .form-wrap .etcTxt.red { color: #da291c}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .input-box.date-picker { display: block; width: 100%}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .input-box.date-picker input { height: 44px; padding: 15px 30px 15px 0; border-bottom: 2px solid #555; background-position: right 11px}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .input-box.date-picker2 { display: block; width: 100%}
[data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .input-box.date-picker2 input { height: 44px; padding: 15px 30px 15px 0; border-bottom: 2px solid #555; background-position: right 11px}
[data-catagory=reservation] .weekend-form-wrap .btn-wrap { margin-top: 40px; text-align: right}
@media screen and (max-width: 768px) { [data-catagory=reservation] .join-reservation.weekend { padding-bottom: 0}
 [data-catagory=reservation] .join-reservation .contents-area { padding-bottom: 0}
 [data-catagory=reservation] .search-filter.weekend { margin: 0; background: #fff; border-bottom: 1px solid #eee}
 [data-catagory=reservation] .search-filter .templ-type-infolist-1.weekend .depth2 li { padding-left: 8px; text-indent: -8px; line-height: 20px; word-break: keep-all}
 [data-catagory=reservation] .weekend-form-wrap { margin-top: 42px; padding: 0 20px}
 [data-catagory=reservation] .weekend-form-wrap .tit { font-family: "SpoqaHanSans-Regular"; font-size: 24px; line-height: 38px}
 [data-catagory=reservation] .weekend-form-wrap .form-box { margin-top: 20px}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner+.form-inner { margin-top: 30px}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner.line2 .form-wrap:first-child { padding-right: 10px}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner.line2 .form-wrap:nth-child(2) { padding-left: 10px}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .disabled:first-child { margin-bottom: 30px}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .disabled:nth-child(2) { padding-right: 10px}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .disabled:last-child { padding-left: 10px}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .mobile-wide { margin-top: 40px; padding-left: 0; width: 100%; display: block}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .mobile-half { position: relative; padding-left: 0; width: 50%}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .mobile-half .etcTxt { position: absolute; left: 0; bottom: -25px; margin-top: 0; white-space: nowrap}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .input-box.date-picker input { height: 33px; padding: 8px 0; border-bottom: 1px solid #555; background-position: right 6px}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .input-box.date-picker2 input { height: 33px; padding: 8px 0; border-bottom: 1px solid #555; background-position: right 6px}
 [data-catagory=reservation] .weekend-form-wrap .form-box .form-inner .form-wrap .checkbox-box { margin-top: 12px; margin-bottom: 0}
 [data-catagory=reservation] .weekend-form-wrap .btn-wrap { margin: 50px -20px 0}
 [data-catagory=reservation] .weekend-form-wrap .btn-wrap .submit-complete { margin: 0 !important; width: 100%; border-radius: 0; text-align: center}
 [data-catagory=reservation] .weekend-form-wrap .btn-wrap .submit-complete::after { display: none}
 [data-catagory=reservation] .weekend-form-wrap .btn-wrap .submit-complete::before { content: ""; background: url("../image/reservation-bg-2-active.png") no-repeat left top; background-size: 100% 100%; width: 128px; height: 60px; position: absolute; right: 0; top: 0}
 }
@media screen and (min-width: 1280px)and (max-width: 1440px) { [data-catagory=reservation] .contents-area { width: 100%}
 [data-catagory=reservation] .contents-area .aside { left: 3.5%; margin-left: 0}
 [data-catagory=reservation] .wrap .container .contents-area .location-navi { right: 5%}
 [data-catagory=reservation] .contents-reservation-cc.intro-main::before { left: 27%; margin-left: 0}
 [data-catagory=reservation] .contents-reservation-cc.intro-main::after { left: 27%; margin-left: 0}
 }
.join-reservation { position: relative; padding-bottom: 100px}
.join-reservation .contents-area { position: relative; z-index: 1; width: 1420px; margin: 0 auto; display: block}
.join-reservation .templ-type-title { padding: 40px 0 30px}
@media screen and (max-width: 768px){
 .join-reservation .contents-area { width: 100%}
 }
.badge-recruit { display: inline-block; padding: 6px 14px 8px 12px; border-radius: 1px 3px 3px 0; background-color: #33aeb6; line-height: 0; transform: skewX(-18deg)}
.badge-recruit:before { position: absolute; bottom: -1px; left: -6px; border-bottom: 12px solid #33aeb6; border-left: 10px solid rgba(0, 0, 0, 0); border-right: 12px solid rgba(0, 0, 0, 0); transform: rotate(-39deg); content: ""}
.badge-recruit .text { display: inline-block; font-size: 14px; line-height: 14px; color: #fff; transform: skewX(18deg)}
.badge-recruit.complete { background-color: #888}
.badge-recruit.complete:before { border-bottom-color: #888}
.join-flag { display: inline-block; padding: 8px; border-radius: 2px; line-height: 0}
.join-flag .text { font-size: 12px; line-height: 12px}
.join-flag.admin { background-color: #eaf7f8}
.join-flag.admin .text { color: #33aeb6}
.join-flag.my { background-color: #fbe9e8}
.join-flag.my .text { color: #da291c}
.join-list-contents { padding-top: 50px; position: relative}
.join-list-contents .join-list { margin: 0 -20px -30px}
.join-list-contents .join-list:after { content: ""; display: block; clear: both}
.join-list-contents .join-list>li { float: left; width: 33.33333333%; padding: 0 20px 30px}
.join-list-contents .join-list>li .join-thumbnail { border: 1px #ddd solid; border-radius: 10px; box-shadow: 0 16px 14px rgba(0, 0, 0, .1); padding: 20px 30px 12px; position: relative}
.join-list-contents .join-list>li .join-thumbnail .top-area { margin: -20px -30px 20px -30px; padding: 15px 30px; text-align: right; border-radius: 10px 10px 0 0; background: #f5f5f5}
.join-list-contents .join-list>li .join-thumbnail .top-area:after { content: ""; display: block; clear: both}
.join-list-contents .join-list>li .join-thumbnail .top-area .type { float: left}
.join-list-contents .join-list>li .join-thumbnail .top-area .reservation-date { color: #777}
.join-list-contents .join-list>li .join-thumbnail .badge { display: block; margin-left: -2px; position: relative}
.join-list-contents .join-list>li .join-thumbnail .badge .deadline { display: inline-block; margin-left: 8px; vertical-align: middle}
.join-list-contents .join-list>li .join-thumbnail .badge .flag-wrap { position: absolute; right: 0; top: 0}
@media screen and (max-width: 768px){
 .join-list-contents .join-list>li .join-thumbnail .badge .flag-wrap { position: static; margin: 20px 0 -10px}
 }
.join-list-contents .join-list>li .join-thumbnail .item { height: 120px; padding: 20px 0 20px 10px}
.join-list-contents .join-list>li .join-thumbnail .item em { display: block; color: #da291c; font-weight: bold; padding-bottom: 10px}
.join-list-contents .join-list>li .join-thumbnail .item strong { display: block; font-size: 20px; font-weight: bold; line-height: 20px; padding-bottom: 14px}
.join-list-contents .join-list>li .join-thumbnail .item span { display: block; color: #555}
.join-list-contents .join-list>li .join-thumbnail .users-area { border-top: 1px #eee solid; padding-top: 10px}
.join-list-contents .join-list>li .join-thumbnail .users-area .user { display: inline-block; margin-right: -10px; position: relative; width: 38px; height: 38px; border: 2px #fff solid; border-radius: 50%; background: url("../image/join-user-none.png") no-repeat 0 0; background-size: 100%; vertical-align: top}
.join-list-contents .join-list>li .join-thumbnail .users-area .user:nth-child(1) { z-index: 4}
.join-list-contents .join-list>li .join-thumbnail .users-area .user:nth-child(2) { z-index: 3}
.join-list-contents .join-list>li .join-thumbnail .users-area .user:nth-child(3) { z-index: 2}
.join-list-contents .join-list>li .join-thumbnail .users-area .user:nth-child(4) { z-index: 1}
.join-list-contents .join-list>li .join-thumbnail .users-area .user img { width: 34px; height: 34px; border-radius: 50%}
.join-list-contents .join-list>li .join-thumbnail .count { position: absolute; right: 29px; bottom: 22px}
.join-list-contents .join-list>li .join-thumbnail .count::after { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='11px' height='19px'%3e%3cpath fill-rule='evenodd' stroke='rgb(85, 85, 85)' stroke-width='2px' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M2.000,15.070 L8.000,8.975 L2.000,2.933 '/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 11px; height: 19px; vertical-align: -4px; margin-left: 10px}
.join-list-contents .btn-area-r { position: absolute; right: 0; bottom: -60px}
.join-list-contents .btn-area-r button em { font-size: 18px; line-height: 18px}
.join-view-contents { padding: 20px 0 30px; position: relative; border-bottom: 1px #ddd solid}
.join-view-contents:after { content: ""; display: block; clear: both}
.join-view-contents .badge { border-bottom: 2px #000 solid; padding: 0 0 12px 7px}
.join-view-contents .badge span { display: inline-block; padding-left: 15px; font-weight: bold}
.join-view-contents .badge span strong { color: #999}
.join-view-contents .badge span em { display: inline-block; margin-left: 20px; color: #33aeb6; font-weight: bold}
.join-view-contents .badge span em::before { content: ""; background-image: url("../image/icon-join-time.png"); background-size: 100% 100%; display: inline-block; width: 24px; height: 22px; vertical-align: -5px; margin-right: 6px}
.join-view-contents .fix-l { float: left; width: 50%; padding-top: 40px}
.join-view-contents .fix-l h3 { font-size: 24px; line-height: 24px; padding-bottom: 20px}
.join-view-contents .fix-l table { border-top: 1px #555 solid; margin-bottom: 30px}
.join-view-contents .fix-l table th { background-color: #f5f5f5; text-align: left; padding: 10px 0 10px 20px; width: 120px; font-weight: bold; border-bottom: 1px #eee solid}
.join-view-contents .fix-l table td { border-bottom: 1px #eee solid; padding: 10px 0 10px 20px; position: relative; width: 235PX}
.join-view-contents .fix-l table td .select-box { width: 195px; margin-top: -5px}
.join-view-contents .fix-l table td .select-box em { padding: 9px 0; height: 32px; border-bottom: 1px #555 solid}
.join-view-contents .fix-l table td .select-box ul { top: 30px}
.join-view-contents .fix-l table td .select-box::before { top: 15px}
.join-view-contents .fix-l table td .xs { position: absolute; right: 20px; top: 15px}
.join-view-contents .fix-l table td .xs .x1 { color: #999; text-decoration: line-through}
.join-view-contents .fix-l table td .xs .x1 em { color: #999}
.join-view-contents .fix-l table td .xs .x2 { display: inline-block; padding-left: 10px; font-size: 18px; color: #000}
.join-view-contents .fix-l table td .xs .x2 em { font-size: 20px; color: #000}
.join-view-contents .fix-l table tr:last-child th, .join-view-contents .fix-l table tr:last-child td { border-bottom: 1px #ddd solid}
.join-view-contents .fix-l p { color: #555; margin-bottom: 10px}
.join-view-contents .fix-l p::before { content: "*"; vertical-align: -3px; display: inline-block; padding-right: 3px}
.join-view-contents .fix-r { float: left; width: 50%; padding: 30px 0 0 60px}
.join-view-contents .fix-r .users-area { background-color: #f5f5f5; border-radius: 10px; padding: 40px}
.join-view-contents .fix-r .users-area>ul { margin: 0 -5px -15px}
.join-view-contents .fix-r .users-area>ul:after { content: ""; display: block; clear: both}
.join-view-contents .fix-r .users-area>ul>li { float: left; width: 50%; padding: 0 5px 15px}
.join-view-contents .fix-r .users-area>ul>li div { background-color: #fff; border: 1px #ddd dashed; border-radius: 10px; height: 123px; position: relative}
.join-view-contents .fix-r .users-area>ul>li div .user { position: absolute; top: 30px; left: 24px}
.join-view-contents .fix-r .users-area>ul>li div .user img { width: 56px; height: 56px}
.join-view-contents .fix-r .users-area>ul>li div .user .int { position: absolute; left: 0; top: 52px; width: 56px; height: 20px; padding: 2px 0; border-radius: 10px; background-color: #33aeb6}
.join-view-contents .fix-r .users-area>ul>li div .user .int i { display: block; font-size: 13px; line-height: 13px; color: #fff; text-align: center}
.join-view-contents .fix-r .users-area>ul>li div ul { position: absolute; top: 37px; left: 95px}
.join-view-contents .fix-r .users-area>ul>li div ul li { padding-bottom: 10px; font-weight: bold}
.join-view-contents .fix-r .users-area>ul>li div button { width: 180px; margin: 37px 0 0 52px}
.join-view-contents .fix-r p { padding-top: 20px; color: #555}
.join-view-contents .fix-r p::before { content: "*"; vertical-align: -3px; display: inline-block; padding-right: 3px}
.join-info-area { position: relative; border-bottom: 1px #bbb solid; background-color: #f5f5f5}
.join-info-area h3 { position: absolute; left: 40px; top: 45px; font-size: 22px; color: #555}
.join-info-area ul { margin: 0 0 0 200px}
.join-info-area ul:after { content: ""; display: block; clear: both}
.join-info-area ul li { float: left; width: 50%; padding-right: 15px; position: relative}
.join-info-area ul li:first-child::after { content: ""; position: absolute; top: 30px; bottom: 30px; right: 60px; border-left: 1px #e5e5e5 solid; height: 50px}
.join-info-area ul li div { padding: 40px 0 0 0; height: 110px}
.join-info-area ul li div:after { content: ""; display: block; clear: both}
.join-info-area ul li div>strong { float: left; font-size: 16px; font-weight: bold; display: inline-block; margin-right: 40px; color: #555}
.join-info-area ul li div>strong i { margin-right: 10px; vertical-align: -7px}
.join-info-area ul li div>span { float: left; padding-top: 18px}
.join-info-area ul li div>span:after { content: ""; display: block; clear: both}
.join-info-area ul li div>span strong { float: left; position: relative}
.join-info-area ul li div>span strong span { font-size: 14px; line-height: 14px; color: #777; display: block; position: absolute; left: 0; top: -22px; white-space: nowrap}
.join-info-area ul li div>span em { float: left; background: url("../image/line-f.png") no-repeat center top; display: block; width: 35.5px; height: 4px; margin: 7px 6px 0}
.contents-area-center .complete-contents, .golf-cc-contents .complete-contents { width: 1280px}
.contents-area-center .complete-contents .r-text-btn, .contents-area-center .complete-contents .agree-list, .contents-area-center .complete-contents .accept_Terms, .golf-cc-contents .complete-contents .r-text-btn, .golf-cc-contents .complete-contents .agree-list, .golf-cc-contents .complete-contents .accept_Terms { width: 640px}
@media screen and (max-width: 768px){
 .contents-area-center .complete-contents .r-text-btn, .golf-cc-contents .complete-contents .r-text-btn { width: 100%}
 .contents-area-center .complete-contents .agree-list, .golf-cc-contents .complete-contents .agree-list { width: 100%}
 }
.complete-contents { width: 1000px; margin: 0 auto; padding: 65px 0 80px}
@media screen and (max-width: 768px){
 .complete-contents { padding: 0; width: 100% !important}
 }
.complete-contents.coupon-buy .section-title { margin-bottom: 20px; font-size: 32px; line-height: 32px}
.complete-contents.coupon-buy .complete-copon-input { margin: 0}
.complete-contents.coupon-buy .complete-copon-input ul.lint>li:last-child { margin-bottom: 0}
.complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>ul li { width: 32%; padding: 0 0 0 40px}
.complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>ul li:first-child { padding: 0; width: 36%}
.complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>ul li:first-child input:disabled { color: #000}
.complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>.btn-box { display: table-cell; width: 1%; padding-left: 40px; vertical-align: bottom}
.complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>.btn-box button { width: auto; white-space: nowrap}
.complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>.btn-box button:disabled { border-color: #ccc; background: rgba(0, 0, 0, 0)}
.complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>.btn-box button:disabled em { color: #777}
@media screen and (max-width: 768px){
 .complete-contents.coupon-buy { margin: 0 -20px; width: auto !important; background-color: #f5f5f5}
 .complete-contents.coupon-buy .section-title { font-size: 24px; line-height: 24px; padding: 30px 20px 20px}
 .complete-contents.coupon-buy .complete-copon-input { padding: 0 20px 30px}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li { margin-bottom: 30px}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap { display: block}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap:after { content: ""; display: block; clear: both}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap label { float: left; padding: 8px 0; width: auto}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>ul { display: block; padding-left: 60px}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>ul li { margin-top: 5px; width: 50%}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>ul li:first-child { margin-top: 0; padding: 0; width: 100%}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>ul li:nth-child(2) { padding: 0 20px 0 0}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>ul li:nth-child(3) { padding: 0}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>.btn-box { display: block; margin-top: 25px; padding: 0; width: 100%}
 .complete-contents.coupon-buy .complete-copon-input ul.lint>li .form-wrap>.btn-box button { width: 100%}
 .complete-contents.coupon-buy .complete-copon-input .templ-type-infolist-4 { padding-top: 20px; border-top: 1px solid #e5e5e5}
 }
.complete-contents .templ-type-header .submit-small { margin-left: 10px; vertical-align: 9px}
.complete-contents .templ-type-header .bt-small { margin-left: 10px; vertical-align: 9px}
@media screen and (max-width: 768px){
 .complete-contents .templ-type-header .bt-small { display: block; width: 100px; margin-top: 20px; vertical-align: 0}
 }
.complete-contents .templ-type-title { font-family: SpoqaHanSans-Light; margin-bottom: 30px}
.complete-contents .btn-gird-col+.templ-type-title { margin-top: 60px}
.complete-contents .section-title { margin-bottom: 30px; font-family: SpoqaHanSans-Light; font-size: 36px; line-height: 36px}
@media screen and (max-width: 768px){
 .complete-contents .section-title { margin-bottom: 20px; font-size: 24px; line-height: 24px}
 }
.complete-contents .templ-type-infolist-1 { border-top: 1px #eee solid; padding-top: 30px; margin-top: 60px}
@media screen and (max-width: 768px){
 .complete-contents .templ-type-infolist-1 { padding-top: 20px; margin-top: 30px}
 }
.complete-contents .templ-type-infolist-1.comlpt { border-top: none; padding-top: 0; margin-top: 40px}
@media screen and (max-width: 768px){
 .complete-contents .templ-type-infolist-1.comlpt { margin-top: 30px}
 }
.complete-contents .sub-title { margin: 40px 0 20px; font-weight: bold; font-size: 18px; line-height: 18px}
.complete-contents .sub-title+.form-wrap { margin-top: -7px}
.complete-contents .sub-title .question-mark { margin-left: 8px}
@media screen and (max-width: 768px){
 .complete-contents .sub-title { margin: 25px 0 10px; font-size: 15px}
 .complete-contents .sub-title+.form-wrap { margin-top: -3px}
 .complete-contents .sub-title+.amount-of-payment-area { margin-top: 20px}
 }
.complete-contents .amount-of-payment-area { margin-top: 75px; background-color: #555; padding: 32px 40px; position: relative}
.complete-contents .amount-of-payment-area ul:after { content: ""; display: block; clear: both}
.complete-contents .amount-of-payment-area ul li { float: left; margin-right: 40px; position: relative}
.complete-contents .amount-of-payment-area ul li::after { content: ""; position: absolute; right: -20px; top: -5px; border-right: 1px #4c4c4c solid; height: 30px}
.complete-contents .amount-of-payment-area ul li:last-child::after { display: none}
.complete-contents .amount-of-payment-area ul li * { color: #fff}
.complete-contents .amount-of-payment-area dl { background-color: #4c4c4c; position: absolute; right: 0; top: 0; bottom: 0; padding: 32px 40px}
.complete-contents .amount-of-payment-area dl:after { content: ""; display: block; clear: both}
.complete-contents .amount-of-payment-area dl * { color: #fff; float: left}
.complete-contents .amount-of-payment-area dl dd { padding-left: 30px; color: #efc122}
.complete-contents .amount-of-payment-area dl dd * { color: #efc122}
.complete-contents .amount-of-payment-area dl dd em { font-size: 22px; line-height: 22px; display: inline-block; margin: -4px 3px 0 0}
@media screen and (max-width: 768px){
 .complete-contents .amount-of-payment-area { margin-top: 30px; padding: 0}
 .complete-contents .amount-of-payment-area ul { padding: 20px 15px}
 .complete-contents .amount-of-payment-area ul li { display: block; float: none; margin-right: 0; position: relative; margin-bottom: 14px}
 .complete-contents .amount-of-payment-area ul li:first-child::after { display: none}
 .complete-contents .amount-of-payment-area ul li:last-child { margin-bottom: 0}
 .complete-contents .amount-of-payment-area ul li em { position: absolute; right: 0; top: 0}
 .complete-contents .amount-of-payment-area dl { position: relative; padding: 20px 15px}
 .complete-contents .amount-of-payment-area dl dt span { font-weight: 700}
 .complete-contents .amount-of-payment-area dl dd { position: absolute; right: 15px; top: 20px; font-size: 17px; line-height: 17px}
 .complete-contents .amount-of-payment-area dl dd em { float: none; font-size: inherit; line-height: inherit}
 }
.complete-contents .tooltip-area .sub-title { display: inline-block}
.complete-contents .tooltip-area .tooltip-btn-area { vertical-align: 2px}
@media screen and (max-width: 768px){
 .complete-contents .tooltip-area .tooltip-btn-area { vertical-align: 0}
 }
.complete-contents .l-point-title-wrap .sub-title { display: inline-block; margin: 0}
.complete-contents .l-point-title-wrap .sub-title+.tooltip-wrap { vertical-align: 2px}
.complete-contents .mb40 { padding-bottom: 40px}
.complete-contents .mb60 { padding-bottom: 60px}
.complete-contents .mt { margin-top: 30px}
.complete-contents .ck { text-align: right; padding: 10px 0 30px}
.complete-contents .ck .form-wrap.bvx { display: inline-block; margin-right: 209px; border: none; height: auto}
.complete-contents h4 { font-size: 18px; font-weight: 400; color: #777}
.complete-contents .btn-gird-col .form-wrap label { font-weight: 400; color: #777}
.complete-contents .btn-gird-col.px { margin: 0 0 40px}
.complete-contents .btn-gird-col.px>li { padding: 0 0}
.complete-contents .btn-gird-col.px>li.t { width: 120px; margin: 0 10px 0 60px}
.complete-contents .btn-gird-col.px>li.n { width: 70px}
.complete-contents .btn-gird-col.px>li.s { width: 230px}
.complete-contents .btn-gird-col.ps, .complete-contents .btn-gird-col.l-point { margin: 0 -40px}
.complete-contents .btn-gird-col.ps+.ps, .complete-contents .btn-gird-col.l-point+.ps { margin-top: 30px}
.complete-contents .btn-gird-col.ps>li, .complete-contents .btn-gird-col.l-point>li { padding: 0 40px}
.complete-contents .btn-gird-col.ps>li .r.se, .complete-contents .btn-gird-col.l-point>li .r.se { width: 200px}
.complete-contents .btn-gird-col.ps>li .vx.se, .complete-contents .btn-gird-col.l-point>li .vx.se { width: 480px}
.complete-contents .btn-gird-col.ps>li .te.se, .complete-contents .btn-gird-col.l-point>li .te.se { width: 444px}
.complete-contents .btn-gird-col.ps>li.by, .complete-contents .btn-gird-col.l-point>li.by { width: 680px}
.complete-contents .btn-gird-col.ps>li.bu, .complete-contents .btn-gird-col.l-point>li.bu { width: 526px; padding: 0 20px 0 40px}
.complete-contents .btn-gird-col.ps>li.bm, .complete-contents .btn-gird-col.l-point>li.bm { padding: 25px 0 0 0; width: 117px}
@media screen and (max-width: 1024px){
 .complete-contents .btn-gird-col.ps.l-point>li, .complete-contents .btn-gird-col.l-point.l-point>li { padding: 0 20px}
 }
@media screen and (max-width: 768px){
 .complete-contents .btn-gird-col.ps, .complete-contents .btn-gird-col.l-point { margin: 0}
 .complete-contents .btn-gird-col.ps.l-point>li, .complete-contents .btn-gird-col.l-point.l-point>li { float: none; width: 100%}
 .complete-contents .btn-gird-col.ps.l-point+.sub-title, .complete-contents .btn-gird-col.l-point.l-point+.sub-title { margin-top: 15px}
 .complete-contents .btn-gird-col.ps>li, .complete-contents .btn-gird-col.l-point>li { padding: 0 !important; width: 100% !important; margin-bottom: 25px}
 .complete-contents .btn-gird-col.ps>li .form-wrap label, .complete-contents .btn-gird-col.l-point>li .form-wrap label { margin-bottom: 0; font-size: 15px}
 .complete-contents .btn-gird-col.ps>li ul li, .complete-contents .btn-gird-col.l-point>li ul li { margin-bottom: 15px}
 .complete-contents .btn-gird-col.ps>li ul li.r, .complete-contents .btn-gird-col.l-point>li ul li.r { width: 30% !important}
 .complete-contents .btn-gird-col.ps>li ul li.vx, .complete-contents .btn-gird-col.l-point>li ul li.vx { width: 70% !important; padding: 10px 0 4px 10px !important}
 .complete-contents .btn-gird-col.ps>li ul li.te, .complete-contents .btn-gird-col.l-point>li ul li.te { width: 66% !important}
 .complete-contents .btn-gird-col.ps>li ul li.bs, .complete-contents .btn-gird-col.l-point>li ul li.bs { width: 34% !important}
 .complete-contents .btn-gird-col.ps>li ul li.by, .complete-contents .btn-gird-col.l-point>li ul li.by { width: 100%}
 .complete-contents .btn-gird-col.ps>li ul li.bu, .complete-contents .btn-gird-col.l-point>li ul li.bu { width: 100%; padding: 0 20px 0 40px}
 .complete-contents .btn-gird-col.ps>li ul li.bm, .complete-contents .btn-gird-col.l-point>li ul li.bm { padding: 25px 0 0 0; width: 100%}
 .complete-contents .btn-gird-col.ps>li ul li.le, .complete-contents .btn-gird-col.l-point>li ul li.le { width: 75% !important}
 .complete-contents .btn-gird-col.ps>li ul li.bs2, .complete-contents .btn-gird-col.l-point>li ul li.bs2 { padding: 2px 0 0 0 !important; width: 25% !important}
 .complete-contents .btn-gird-col.ps.recaptcha, .complete-contents .btn-gird-col.l-point.recaptcha { margin-top: 10px}
 }
.complete-contents .btn-gird-col.ps { margin-top: 20px}
.complete-contents .btn-gird-col.pt { margin: 40px -10px 30px}
.complete-contents .btn-gird-col.pt ul { margin: 0 -10px}
.complete-contents .btn-gird-col.pt ul:after { content: ""; display: block; clear: both}
.complete-contents .btn-gird-col.pt ul li { float: left; width: 25%; padding: 0 10px}
.complete-contents .btn-gird-col.etc { margin: 0}
.complete-contents .btn-gird-col.etc>li { padding: 0; margin-right: 40px; width: initial}
.complete-contents .btn-gird-col.etc>li .input-box input { font-size: 16px; line-height: 18px}
.complete-contents .btn-gird-col.etc>li:first-child { width: 188px}
.complete-contents .btn-gird-col.etc>li:nth-child(2), .complete-contents .btn-gird-col.etc>li:nth-child(3), .complete-contents .btn-gird-col.etc>li:nth-child(4) { width: 250px}
.complete-contents .btn-gird-col.etc>li:last-child { margin-right: 0; width: 100px}
.complete-contents .form-wrap.bvx { border-bottom: 1px #eee solid; height: 42px}
.complete-contents .form-wrap.cvn:after { content: ""; display: block; clear: both}
.complete-contents .form-wrap.cvn .input-box { float: left; width: 490px}
.complete-contents .form-wrap.cvn .bt-small { margin-left: 20px; float: left; width: 90px}
.complete-contents .form-wrap.cvn>ul.dt li:first-child { padding-left: 0 !important}
.complete-contents .form-wrap .radio-box { margin-right: 30px}
.complete-contents .form-wrap ul.dt:after { content: ""; display: block; clear: both}
.complete-contents .form-wrap ul.dt>li { float: left; width: 50%}
.complete-contents .form-wrap ul.dt>li:first-child:nth-last-child(3), .complete-contents .form-wrap ul.dt>li:first-child:nth-last-child(3)~li { width: 33.3333%}
.complete-contents .form-wrap ul.dt>li:first-child { padding-right: 10px}
.complete-contents .form-wrap ul.dt>li:last-child { padding-left: 10px}
.complete-contents .form-wrap ul.dt>li.r { width: 150px}
.complete-contents .form-wrap ul.dt>li.r input { text-align: right; padding-right: 15px}
.complete-contents .form-wrap ul.dt>li.r .input-box { position: relative}
.complete-contents .form-wrap ul.dt>li.r .input-box em { position: absolute; right: 0; top: 12px; color: #777}
.complete-contents .form-wrap ul.dt>li.le { width: 217px}
.complete-contents .form-wrap ul.dt>li.vx { width: 334px; padding: 10px 10px 0 10px !important}
.complete-contents .form-wrap ul.dt>li.vx .ck2 .checkbox-box label strong { font-weight: 700; color: #555}
.complete-contents .form-wrap ul.dt>li.te { width: 270px; padding-right: 20px !important}
.complete-contents .form-wrap ul.dt>li.bs { padding: 2px 0 0 0 !important; width: 156px; position: relative}
.complete-contents .form-wrap ul.dt>li.bs .password-edit { position: absolute; right: 0; bottom: -36px; color: #777; padding-right: 15px}
.complete-contents .form-wrap ul.dt>li.bs .password-edit::before { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='8px' height='15px'%3e%3cpath fill-rule='evenodd' fill='rgb(204, 204, 204)' d='M7.239,8.270 L7.239,8.270 L0.875,14.633 L0.168,13.926 L6.532,7.562 L0.168,1.198 L0.875,0.491 L7.946,7.562 L7.239,8.270 Z'/%3e%3c/svg%3e"); background-size: 100% 100%; width: 8px; height: 15px; display: block; position: absolute; right: 0; top: 2px}
.complete-contents .form-wrap ul.dt>li.bs2 { padding: 2px 17px 0 0; width: 153px}
.complete-contents .form-wrap ul.dt>li.w { width: 265px; padding-right: 20px}
.complete-contents .form-wrap ul.dt>li.w:last-child { width: 335px; padding-right: 0}
.complete-contents .form-wrap ul.dt>li.n { width: 70px; padding-left: 0}
@media screen and (max-width: 1024px){
 .complete-contents .form-wrap ul.dt>li.r { width: 100px}
 }
@media screen and (max-width: 768px){
 .complete-contents .form-wrap ul.dt { position: relative}
 .complete-contents .form-wrap ul.dt>li.bs { position: initial; padding-bottom: 40px !important}
 .complete-contents .form-wrap ul.dt>li.bs .bt-small { padding: 8.5px 0}
 .complete-contents .form-wrap ul.dt>li.bs .password-edit { right: auto; bottom: 15px; left: 0}
 .complete-contents .form-wrap ul.dt>li.bs2 .bt-small, .complete-contents .form-wrap ul.dt>li.bs2 .button-small { padding: 8.5px 0}
 }
.complete-contents .form-wrap ul.dt2:after { content: ""; display: block; clear: both}
.complete-contents .form-wrap ul.dt2 li { float: left; width: 50%}
.complete-contents .form-wrap ul.dt2 li.te { width: 304px; padding-right: 20px !important}
.complete-contents .form-wrap ul.dt2 li.bs { padding: 2px 0 0 0 !important; width: 156px}
@media screen and (max-width: 1024px){
 .complete-contents .form-wrap ul.dt2>li.te { width: 200px}
 }
@media screen and (max-width: 768px){
 .complete-contents .form-wrap ul.dt2 { display: table; width: 100%}
 .complete-contents .form-wrap ul.dt2>li { float: none; display: table-cell}
 .complete-contents .form-wrap ul.dt2>li.te { width: auto}
 .complete-contents .form-wrap ul.dt2>li.bs { width: 133px}
 }
.complete-contents .form-wrap ul.dt3:after { content: ""; display: block; clear: both}
.complete-contents .form-wrap ul.dt3 li { float: left; width: 50%}
.complete-contents .form-wrap ul.dt3 li.r { width: calc(100% - 250px)}
.complete-contents .form-wrap ul.dt3 li.r input { text-align: right; padding-right: 15px}
.complete-contents .form-wrap ul.dt3 li.r .input-box { position: relative}
.complete-contents .form-wrap ul.dt3 li.r .input-box em { position: absolute; right: 0; top: 11px; color: #777}
.complete-contents .form-wrap ul.dt3 li.vx { width: 250px; padding: 10px 0 0 10px !important}
.complete-contents .form-wrap ul.dt4:after { content: ""; display: block; clear: both}
.complete-contents .form-wrap ul.dt4 li { float: left; width: 225px; margin-right: 14px}
.complete-contents .form-wrap ul.dt4 li.vx { width: 122px; margin-right: 0}
@media screen and (max-width: 768px){
 .complete-contents .form-wrap ul.dt4 li.vx .bt-small { padding: 8.5px 0}
 .complete-contents .form-wrap ul.dt4 li.vx .bt-small i { display: inline-block; width: 14.5px; height: 9.5px; margin-right: 5px; background-image: url("../image/icon-check.png"); background-size: 100% 100%; color: #33aeb6; vertical-align: -1px}
 }
.complete-contents .form-wrap ul.dt5:after { content: ""; display: block; clear: both}
.complete-contents .form-wrap ul.dt5 li { float: left; margin-right: 10px; width: 118px}
.complete-contents .form-wrap ul.dt5 li:first-child { width: 60px}
.complete-contents .form-wrap ul.dt5 li:last-child { width: 52px; margin-right: 0}
.complete-contents .form-wrap ul.dt6:after { content: ""; display: block; clear: both}
.complete-contents .form-wrap ul.dt6 li { float: left; width: 100px}
.complete-contents .form-wrap ul.dt7:after { content: ""; display: block; clear: both}
.complete-contents .form-wrap ul.dt7 li { float: left; margin-right: 10px; width: 120px}
.complete-contents .form-wrap ul.dt7 li:first-child { width: 60px}
.complete-contents .form-wrap ul.dt7 li:last-child { width: 118px; margin-right: 0}
.complete-contents .form-wrap ul.dt8:after { content: ""; display: block; clear: both}
.complete-contents .form-wrap ul.dt8 li { float: left; margin-right: 10px; width: 100%}
.complete-contents .form-wrap ul.dt8 li:last-child { margin-right: 0}
.complete-contents .join-re-area { margin-bottom: 60px}
.complete-contents .join-re-area .btn-gird-col li ul li { width: 290px !important; padding-right: 0 !important}
.complete-contents .team-handicap-area { border: 1px #33aeb6 solid; padding: 30px 40px 30px; border-radius: 10px; margin-bottom: 60px}
.complete-contents .team-handicap-area .btn-gird-col { margin: 0 -20px}
.complete-contents .team-handicap-area .btn-gird-col>li { padding: 0 20px}
.complete-contents .team-handicap-area .btn-gird-col>li .form-wrap label { color: #000; font-weight: bold}
.complete-contents .team-handicap-area p { margin-top: 20px; color: #da291c}
.complete-contents .team-handicap-area p em { color: #555}
.complete-contents .team-handicap-area p::before { content: "*"; vertical-align: -3px; display: inline-block; padding-right: 3px}
.complete-contents .team-handicap-area .submit-c-medium { position: absolute; top: 40px; right: 160px; width: 120px}
.complete-contents .compt-info { border: 1px #ddd solid; border-radius: 10px; box-shadow: 0 16px 14px rgba(0, 0, 0, .1); padding: 38px 38px 44px; margin: 30px 0 0; position: relative}
.complete-contents .compt-info h3 { font-size: 24px; font-weight: bold; position: relative; display: inline-block; z-index: 1; margin-bottom: 30px}
.complete-contents .compt-info h3::before { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; z-index: -1; border-top: 8px #da291c solid}
.complete-contents .compt-info .vx { display: inline-block; color: #555; padding-left: 5px}
.complete-contents .compt-info .cc { width: 670px}
.complete-contents .compt-info .cc li { margin-bottom: 20px}
.complete-contents .compt-info .cc li:last-child { margin-bottom: 0}
.complete-contents .compt-info .cc li strong { font-weight: bold; display: inline-block; margin-right: 5px}
.complete-contents .compt-info .cc li span { font-size: 18px}
.complete-contents .compt-info .cc li span em { display: inline-block; margin-right: 10px; padding-right: 10px; border-right: 1px #eee solid; font-size: 18px}
.complete-contents .compt-info .cc li span em:last-child { border-right: none}
.complete-contents .compt-info .cc li p { padding: 0 0 10px 87px; color: #777}
.complete-contents .compt-info .cc li p:last-child { padding-bottom: 0}
.complete-contents .compt-info .ct { position: absolute; right: 38px; top: 38px; bottom: 38px; padding-left: 20px; border-left: 1px #eee solid; padding-top: 3px}
.complete-contents .compt-info .ct li:first-child { margin-bottom: 10px}
.complete-contents .compt-info .ct li strong { font-weight: bold; display: inline-block; margin-right: 5px}
.complete-contents .compt-info .ct li span { color: #555}
.complete-contents .compt-info .etc-area { position: absolute; right: 38px; top: 110px}
.complete-contents .compt-info .etc-area .etc-cont { border-bottom: 1px #000 solid}
.complete-contents .compt-info .etc-area .tooltip-wrap { vertical-align: 1px}
.complete-contents .etc-info-cont { border: 1px #33aeb6 solid; padding: 30px 40px 30px; border-radius: 10px; position: relative}
.complete-contents .etc-info-cont .templ-type-infolist-2 { margin-top: 40px}
.complete-contents .etc-info-cont .templ-type-infolist-2 li { line-height: 16px; padding-left: 0; color: #555}
.complete-contents .etc-info-cont .btn-area-r { position: absolute; right: 38px; bottom: 73px}
.complete-contents .etc-info-cont .btn-area-r button { width: 120px; margin-left: 10px}
.complete-contents .templ-type { font-size: 24px; line-height: 24px; padding-bottom: 20px; margin-top: 60px}
.complete-contents .r-text-btn { position: relative}
.complete-contents .r-text-btn .ck3 { position: absolute; right: 0; top: -2px}
.complete-contents .accept_Terms { margin: -5px 0}
.complete-contents .accept_Terms>li { padding: 5px 0; position: relative}
.complete-contents .accept_Terms>li .checkbox-box span { color: #da291c}
.complete-contents .accept_Terms>li a { position: absolute; right: 0; top: 7px; color: #777; border-bottom: 1px #ccc solid; padding-bottom: 3px}
.complete-contents .payment-area { margin: 0 -10px}
.complete-contents .payment-area:after { content: ""; display: block; clear: both}
.complete-contents .payment-area li { float: left; width: 33.3333333%; padding: 0 10px}
.complete-contents .payment-area li button { border: 1px #ccc solid; width: 100%; height: 140px; border-radius: 10px}
.complete-contents .payment-area li button:disabled { background-color: #f5f5f5}
.complete-contents .payment-area li button:disabled * { opacity: .4}
.complete-contents .payment-area li button.active { border-color: #da291c}
.complete-contents .payment-area li button i { margin: 0 auto 16px}
.complete-contents .payment-area li button em { font-size: 18px; color: #555}
@media screen and (max-width: 768px){
 .complete-contents .payment-area { margin: 0 -5px}
 .complete-contents .payment-area li { padding: 0 5px}
 .complete-contents .payment-area li button { height: 84.5px; border-radius: 5px}
 .complete-contents .payment-area li button i { margin: 0 auto 12px}
 .complete-contents .payment-area li button em { font-size: 14px}
 }
.complete-contents .method-payment-impossible p { padding-top: 20px; color: #777}
.complete-contents .method-payment-impossible p::before { content: "*"; color: #777; vertical-align: -4px; display: inline-block; margin-right: 5px}
@media screen and (max-width: 768px){
 .complete-contents .method-payment-impossible p { padding-top: 15px}
 }
.complete-contents .method-of-payment { margin-top: 30px; background-color: #f5f5f5; border-radius: 10px; padding: 40px; position: relative}
.complete-contents .method-of-payment p { font-size: 18px; font-weight: bold}
.complete-contents .method-of-payment .input-box, .complete-contents .method-of-payment .select-box { position: absolute; left: 246px; top: 23px; width: 340px}
.complete-contents .method-of-payment .r-cont { position: absolute; right: 30px; top: 27px}
.complete-contents .method-of-payment .r-cont button::before { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='45.5px' height='45.5px'%3e%3cpath fill-rule='evenodd' stroke='rgb(238, 238, 238)' stroke-width='1px' stroke-linecap='round' stroke-linejoin='round' fill='rgb(255, 255, 255)' d='M22.500,0.500 C34.650,0.500 44.500,10.350 44.500,22.500 C44.500,34.650 34.650,44.500 22.500,44.500 C10.350,44.500 0.500,34.650 0.500,22.500 C0.500,10.350 10.350,0.500 22.500,0.500 Z'/%3e%3cpath fill-rule='evenodd' fill='rgb(85, 85, 85)' d='M32.500,23.500 L22.500,23.500 L22.500,32.500 L21.500,32.500 L21.500,23.500 L12.500,23.500 L12.500,22.500 L21.500,22.500 L21.500,12.500 L22.500,12.500 L22.500,22.500 L32.500,22.500 L32.500,23.500 Z'/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 45.5px; height: 45.5px; vertical-align: -21px; margin-right: 10px}
.complete-contents .method-of-payment .r-cont button em { color: #555; padding-bottom: 2px; border-bottom: 1px #aaa solid}
@media screen and (max-width: 768px){
 .complete-contents .method-of-payment { margin-top: 20px; background-color: rgba(0, 0, 0, 0); border-radius: 0; padding: 0}
 .complete-contents .method-of-payment:after { content: ""; display: block; clear: both}
 .complete-contents .method-of-payment p { font-size: 14px; font-weight: initial; padding-bottom: 15px}
 .complete-contents .method-of-payment .input-box, .complete-contents .method-of-payment .select-box { position: static; width: initial; margin-bottom: 15px}
 .complete-contents .method-of-payment .r-cont { position: static; float: right}
 .complete-contents .method-of-payment .r-cont button { padding-right: 0}
 .complete-contents .method-of-payment .r-cont button::before { display: none}
 .complete-contents .method-of-payment .r-cont button em { color: #33aeb6; padding-bottom: 2px; border-bottom: 1px #33aeb6 solid}
 }
.complete-contents .complete-ic { margin-bottom: 35px}
.complete-contents .num-tex { color: #da291c; padding: 20px 0 30px}
.complete-contents .complete-info { background-color: #f5f5f5; padding: 17px 90px 17px 50px; margin-bottom: 18px}
.complete-contents .complete-info:after { content: ""; display: block; clear: both}
.complete-contents .complete-info li { float: left; width: 50%}
.complete-contents .complete-info li:nth-child(odd) { padding-right: 40px}
.complete-contents .complete-info li:nth-child(7) p, .complete-contents .complete-info li:nth-child(8) p { border-bottom: none}
.complete-contents .complete-info li p { border-bottom: 1px #e5e5e5 solid; font-weight: bold; padding: 13px 0}
.complete-contents .complete-info li p span { color: #555; display: inline-block; width: 90px}
.complete-contents .complete-copon-info { background-color: #f5f5f5; border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; padding: 30px 40px; margin-bottom: 60px}
.complete-contents .complete-copon-info li { padding-bottom: 8px}
.complete-contents .complete-copon-info li:last-child { padding-bottom: 0}
.complete-contents .complete-copon-info li p { font-size: 16px; line-height: 24px; position: relative; padding-left: 100px}
.complete-contents .complete-copon-info li p span { color: #777; font-size: 16px; line-height: 24px; display: inline-block; position: absolute; left: 0; top: 0; padding-left: 8px}
.complete-contents .complete-copon-info li p span::before { content: ""; display: inline-block; background-color: #bbb; width: 3px; height: 3px; border-radius: 50%; position: absolute; left: 0; top: 10px}
@media screen and (max-width: 768px){
 .complete-contents .complete-copon-info { margin: 0 -20px 50px; padding: 20px}
 .complete-contents .complete-copon-info li { padding-bottom: 7px}
 .complete-contents .complete-copon-info li p { font-size: 14px; line-height: 18px; padding-left: 80px}
 .complete-contents .complete-copon-info li p span { font-size: 14px; line-height: 18px}
 }
.complete-contents .complete-copon-input { background-color: #f5f5f5; padding: 30px 40px 40px; margin: 10px 0 60px}
.complete-contents .complete-copon-input ul.lint>li { margin-bottom: 30px}
.complete-contents .complete-copon-input ul.lint>li .form-wrap { display: table; width: 100%}
.complete-contents .complete-copon-input ul.lint>li .form-wrap>label { display: table-cell; width: 90px; font-size: 18px; font-weight: 400; vertical-align: middle}
.complete-contents .complete-copon-input ul.lint>li .form-wrap>ul { display: table-cell}
.complete-contents .complete-copon-input ul.lint>li ul { display: inline-block}
.complete-contents .complete-copon-input ul.lint>li ul:after { content: ""; display: block; clear: both}
.complete-contents .complete-copon-input ul.lint>li ul li { float: left}
.complete-contents .complete-copon-input ul.lint>li ul li:nth-child(odd) { padding-right: 40px; width: 510px}
.complete-contents .complete-copon-input ul.lint>li ul li:nth-child(even) { padding-left: 40px; width: calc(100% - 510px)}
.complete-contents .complete-copon-input .templ-type-infolist-4 { margin-top: 40px}
@media screen and (max-width: 768px){
 .complete-contents .complete-copon-input { margin: 7px -20px 50px; padding: 10px 20px 25px}
 .complete-contents .complete-copon-input ul.lint>li { margin-bottom: 10px}
 .complete-contents .complete-copon-input ul.lint>li .form-wrap>label { width: 68px; font-size: 15px}
 .complete-contents .complete-copon-input ul.lint>li ul li:nth-child(odd) { padding-right: 10px; width: 75px}
 .complete-contents .complete-copon-input ul.lint>li ul li:nth-child(even) { padding-left: 10px; width: calc(100% - 75px)}
 .complete-contents .complete-copon-input .templ-type-infolist-4 { margin-top: 30px}
 .complete-contents .complete-copon-input .templ-type-infolist-4>ul li { margin: 8px 0}
 .complete-contents .complete-copon-input .templ-type-infolist-4>ul li:last-child { margin-bottom: 0}
 }
.complete-contents .copon-header-area { border-top: 2px #000 solid}
@media screen and (max-width: 768px){
 .complete-contents .copon-header-area { margin: 0 -20px}
 }
.complete-contents .copon-header-area>div { border-bottom: 1px #ddd solid; padding: 40px 0; position: relative}
.complete-contents .copon-header-area>div:after { content: ""; display: block; clear: both}
.complete-contents .copon-header-area>div .coupon-name { float: left}
.complete-contents .copon-header-area>div .coupon-name strong { display: block; font-size: 24px; line-height: 24px; font-weight: bold}
.complete-contents .copon-header-area>div .coupon-price { float: right; padding: 0 153px 0 0}
@media screen and (max-width: 768px){
 .complete-contents .copon-header-area>div { padding: 20px}
 .complete-contents .copon-header-area>div .coupon-name { float: none}
 .complete-contents .copon-header-area>div .coupon-name span { font-size: 14px; line-height: 14px}
 .complete-contents .copon-header-area>div .coupon-name strong { font-size: 20px; line-height: 20px}
 .complete-contents .copon-header-area>div .coupon-price { float: none; padding: 15px 0 0; font-size: 14px; line-height: 14px}
 }
.complete-contents .copon-header-area dl:after { content: ""; display: block; clear: both}
.complete-contents .copon-header-area dl dt { float: left; width: 50%; padding: 21px 0 0 0; font-size: 18px; line-height: 18px}
.complete-contents .copon-header-area dl dd { float: left; width: 50%; text-align: right; padding: 16px 0 20px 0; font-size: 18px; line-height: 18px; color: #da291c}
.complete-contents .copon-header-area dl dd em { font-size: 24px; line-height: 24px; font-weight: bold; color: #da291c; letter-spacing: 0}
@media screen and (max-width: 768px){
 .complete-contents .copon-header-area dl dt { padding: 17px 0 0 20px; font-size: 14px; line-height: 14px; font-weight: bold}
 .complete-contents .copon-header-area dl dd { padding: 15px 20px 15px 0; font-size: 15px}
 .complete-contents .copon-header-area dl dd em { font-size: 20px; line-height: 20px}
 }
.complete-contents .btn-area-r { margin-top: 40px}
@media screen and (max-width: 768px){
 .complete-contents .btn-area-r { margin-top: 30px}
 }
.complete-contents .btn-area-r button { width: 140px}
.complete-contents .btn-area-r button:nth-child(1) { margin-left: 0}
@media screen and (max-width: 768px){
 .complete-contents .btn-area-r button { width: 120px}
 }
.complete-contents .xs-complt { background-color: #555; position: relative; padding: 28px 30px; margin-bottom: 40px}
.complete-contents .xs-complt .lr span { display: block; font-size: 18px; line-height: 18px; font-weight: bold; color: #fff}
.complete-contents .xs-complt .lr em { display: inline-block; padding-left: 5px; color: #fff}
.complete-contents .xs-complt .rs { position: absolute; top: 0; bottom: 0; right: 0; background-color: #4c4c4c; padding: 0 30px 0 60px; line-height: 76px}
.complete-contents .xs-complt .rs span { font-size: 18px; color: #fff}
.complete-contents .xs-complt .rs em { color: #efc122; display: inline-block; padding-left: 3px}
.complete-contents .xs-complt .rs em span { font-size: 18px; color: #efc122}
.modal-pop-area .modal-pop .contents.transfer { padding: 0 0 30px !important}
.modal-pop-area .modal-pop .contents.transfer .complete-contents { width: auto; padding: 0}
.modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap ul.dt li.w { width: 315px; padding-right: 60px}
.modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap ul.dt li.w:last-child { width: 335px; padding-right: 0; padding-left: 0}
.modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap label { font-weight: normal; color: #777}
.modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap label em.red { color: #da291c}
.modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap .radio-box:last-child { margin-right: 0}
.modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap .form-wrap.bvx { margin-top: 10px; height: auto; text-align: right; border: none}
.modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap .form-wrap.bvx label { margin-bottom: 0}
.modal-pop-area .modal-pop .contents.transfer .terms-box { margin-top: 70px}
.modal-pop-area .modal-pop .contents.transfer .terms-box .termsTit { margin-bottom: 20px; font-size: 24px; color: #000; line-height: 1}
.modal-pop-area .modal-pop .contents.transfer .terms-box .table-wrap { margin-top: 20px 0 15px}
.modal-pop-area .modal-pop .contents.transfer .terms-box .table th { padding: 10px 0 8px; font-weight: bold}
.modal-pop-area .modal-pop .contents.transfer .terms-box .table td.left { text-align: left}
.modal-pop-area .modal-pop .contents.transfer .terms-box .text { word-break: keep-all}
.modal-pop-area .modal-pop .contents.transfer .terms-box .text.red { color: #da291c}
.modal-pop-area .modal-pop .contents.transfer .terms-box .text+.text { margin-top: 0}
.modal-pop-area .modal-pop .contents.transfer .agree-list { margin-top: 60px; text-align: right}
.modal-pop-area .modal-pop .contents.transfer .agree-list li { margin: 0}
.modal-pop-area .modal-pop .btn-area.transfer { margin-top: 0; text-align: right}
.modal-pop-area .modal-pop .btn-area.transfer button { min-width: 160px}
@media screen and (max-width: 768px){
 .modal-pop-area .modal-pop .contents.transfer { padding: 40px 20px !important}
 .modal-pop-area .modal-pop .contents.transfer .complete-contents { width: auto; padding: 0}
 .modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap ul.dt li.w { width: 50%; padding-right: 20px}
 .modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap ul.dt li.w:last-child { width: 50%; padding-right: 0; padding-left: 0}
 .modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap label { font-weight: normal; color: #777}
 .modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap label em.red { color: #da291c}
 .modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap .radio-box { margin-right: 20px}
 .modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap .radio-box:last-child { margin-right: 0}
 .modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap .form-wrap.bvx { margin-top: 10px; height: auto; text-align: right; border: none}
 .modal-pop-area .modal-pop .contents.transfer .complete-contents .form-wrap .form-wrap.bvx label { margin-bottom: 0}
 .modal-pop-area .modal-pop .contents.transfer .terms-box { margin-top: 70px}
 .modal-pop-area .modal-pop .contents.transfer .terms-box .termsTit { margin-bottom: 20px; font-size: 17px; color: #000; line-height: 1}
 .modal-pop-area .modal-pop .contents.transfer .terms-box .table-wrap { margin-top: 20px 0 15px}
 .modal-pop-area .modal-pop .contents.transfer .terms-box .table th { padding: 10px 0 8px; font-weight: bold}
 .modal-pop-area .modal-pop .contents.transfer .terms-box .table td.left { text-align: left}
 .modal-pop-area .modal-pop .contents.transfer .terms-box .text { word-break: keep-all}
 .modal-pop-area .modal-pop .contents.transfer .terms-box .text.red { color: #da291c}
 .modal-pop-area .modal-pop .contents.transfer .terms-box .text+.text { margin-top: 0}
 .modal-pop-area .modal-pop .contents.transfer .agree-list { margin-top: 60px; text-align: right}
 .modal-pop-area .modal-pop .contents.transfer .agree-list li { margin: 0}
 .modal-pop-area .modal-pop .btn-area.transfer { margin-top: 0; text-align: right}
 .modal-pop-area .modal-pop .btn-area.transfer button { min-width: 160px}
 }
@media screen and (max-width: 768px){
 .map-area-title { margin-top: 40px; font-weight: 700; font-size: 14px; line-height: 14px}
 }
.compt-list { margin-top: 30px; border-top: 2px #000 solid}
.compt-list.mt { margin: 0 0 60px}
.compt-list ul { font-size: 0}
.compt-list ul li { border-bottom: 1px #eee solid; position: relative}
.compt-list ul li:last-child { border-bottom-color: #ddd}
.compt-list ul li>strong { display: inline-block; width: 180px; padding: 12px 0 12px 40px; font-weight: bold}
.compt-list ul li>span { display: inline-block; padding: 12px 0}
.compt-list ul li>span.c { color: #33aeb6; font-weight: bold}
.compt-list ul li>span.r { color: #da291c}
.compt-list ul li>em { position: absolute; right: 30px; top: 12px}
.compt-list ul li>em.b { color: #2086cd}
.compt-list ul li .radio-box em { position: static}
.compt-list ul li .radio-box label { margin-right: 20px}
.compt-list ul li .radio-box label:last-child { margin-right: 0}
.compt-list ul li.col-half { display: inline-block; width: 50%}
.compt-list dl { background-color: #f5f5f5}
.compt-list dl:after { content: ""; display: block; clear: both}
.compt-list dl dt { float: left; padding: 20px 40px 20px; font-weight: bold}
.compt-list dl dd { float: right; padding: 20px 30px 20px; color: #da291c; font-weight: bold; font-size: 22px}
.compt-list dl dd em { color: #da291c}
.compt-list.pop { margin: 20px 0 40px}
.compt-list.pop ul li strong { width: 120px; padding: 12px 0 12px 20px}
.compt-list.pop dl dt { padding: 20px}
.compt-list.pop dl dd { padding: 20px}
.compt-list.coupon-buy ul li strong { position: absolute; top: 50%; left: 0; line-height: 26px; transform: translateY(-50%)}
.compt-list.coupon-buy ul li strong b { color: #777}
.compt-list.coupon-buy ul li span { display: block; width: 100%; padding-left: 180px; line-height: 26px}
.compt-list.coupon-buy ul li span b { color: #777}
.compt-list.coupon-buy ul li ul.list-hyphen { padding: 12px 0 12px 180px}
.compt-list.coupon-buy ul li ul.list-hyphen li { line-height: 26px; border: none}
.compt-list.coupon-buy ul li.right strong { padding-left: 0}
@media screen and (max-width: 768px){
 .compt-list ul li { position: relative; padding: 15px 15px}
 .compt-list ul li>strong { position: absolute; top: 0; bottom: 0; left: 15px; display: block; font-weight: bold; padding: 0; margin: auto; height: 15px; width: initial}
 .compt-list ul li>span { display: block; text-align: right; padding: 0 0 0 80px; line-height: 20px}
 .compt-list ul li>span.c { color: #33aeb6; font-weight: bold}
 .compt-list ul li>em { position: relative; right: initial; top: initial; display: block; text-align: right; line-height: 20px}
 .compt-list ul li>em.b { color: #2086cd; font-weight: bold}
 .compt-list ul li.col-half { display: block; width: 100%}
 .compt-list dl dt { padding: 13px 15px 13px; font-weight: bold}
 .compt-list dl dd { padding: 13px 15px 13px; font-size: 17px}
 .compt-list dl dd em { color: #da291c}
 .compt-list.pop { margin: 20px 0 30px}
 .compt-list.pop ul li strong { width: auto; padding: 0}
 .compt-list.pop dl dt { padding: 13px 15px 13px}
 .compt-list.pop dl dd { padding: 13px 15px 13px}
 .compt-list.coupon-buy ul li strong { height: auto; left: 15px; line-height: 20px}
 .compt-list.coupon-buy ul li span { line-height: 20px; padding-left: 80px}
 .compt-list.coupon-buy ul li ul.list-hyphen { padding: 0 0 0 80px}
 .compt-list.coupon-buy ul li ul.list-hyphen li { padding: 0; line-height: 20px; text-align: right}
 .compt-list.coupon-buy ul li.right strong { padding-left: 0}
 }
.counter { position: relative; border: 1px #ddd solid; border-radius: 100px; width: 114px; height: 34px; overflow: hidden}
.counter .decrement, .counter .increment { width: 32px; height: 100%; position: absolute; top: 0; z-index: 1}
.counter .decrement { left: 0; border-right: 1px #ddd solid}
.counter .decrement:active::before { position: relative; top: 0; left: 0}
.counter .decrement::before { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9px' height='1px'%3e%3cpath fill-rule='evenodd' fill='rgb(0, 0, 0)' d='M-0.000,-0.000 L9.000,-0.000 L9.000,1.000 L-0.000,1.000 L-0.000,-0.000 Z'/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 9px; height: 1px; margin: 0 auto; vertical-align: 4px}
.counter .increment { right: 0; border-left: 1px #ddd solid}
.counter .increment:active::before { position: relative; top: 0; left: 0}
.counter .increment::before { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9px' height='9px'%3e%3cpath fill-rule='evenodd' fill='rgb(0, 0, 0)' d='M9.000,5.000 L5.000,5.000 L5.000,9.000 L4.000,9.000 L4.000,5.000 L-0.000,5.000 L-0.000,4.000 L4.000,4.000 L4.000,-0.000 L5.000,-0.000 L5.000,4.000 L9.000,4.000 L9.000,5.000 Z'/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 9px; height: 9px; margin: 0 auto; vertical-align: 0}
.counter em { width: 100%; display: block; text-align: center; font-size: 16px; line-height: 16px; font-weight: bold; line-height: 30px; height: 100%}
@media screen and (max-width: 768px){
 .counter em { font-size: 14px; line-height: 14px}
 }
@media screen and (max-width: 768px){
 .counter { right: 0; width: 100px; height: 32px}
 .counter em { line-height: 30px}
 }
.complete-list { margin-top: 20px; border-top: 2px #000 solid}
.complete-list.mt { margin-bottom: 60px}
.complete-list+.templ-type-infolist-5 { margin-top: 15px}
.complete-list.pop>ul>li>div dl dt { padding: 12px 0 12px 20px; width: 110px}
.complete-list.pop>ul>li>div dl .g { display: block}
.complete-list>ul { font-size: 0}
.complete-list>ul>li { position: relative; border-bottom: 1px solid #eee}
.complete-list>ul>li>div { display: table; width: 100%}
.complete-list>ul>li>div dl { display: table-cell; vertical-align: middle; font-size: 0}
.complete-list>ul>li>div dl dt { display: table-cell; width: 180px; padding: 12px 0 12px 40px; line-height: 26px; font-weight: bold; vertical-align: middle}
.complete-list>ul>li>div dl dd { display: table-cell; width: calc(100% - 180px); padding: 12px 20px 12px 0; line-height: 26px; vertical-align: middle; word-break: break-word}
.complete-list>ul>li>div dl dd span { display: block; line-height: 1.5}
.complete-list>ul>li>div dl dd ul li { line-height: 26px; padding-left: 8px; text-indent: -8px}
.complete-list>ul>li>div dl dd strong { font-weight: bold}
.complete-list>ul>li>div dl dd em { color: #777}
.complete-list>ul>li>div dl .r { color: #da291c}
.complete-list>ul>li>div dl .r * { color: #da291c}
.complete-list>ul>li>div dl .g { color: #777}
.complete-list>ul>li>div dl .b { color: #33aeb6; font-weight: bold}
.complete-list>ul>li>div dl+dl dt { padding-left: 0}
.complete-list>ul>li>div dl:first-child:nth-last-child(2), .complete-list>ul>li>div dl:first-child:nth-last-child(2)~dl { width: 50%}
.complete-list>ul>li>div dl.push-right { padding-left: 50%}
.complete-list>ul>li>div dl.push-right dt { padding-left: 0}
.complete-list>ul>li.total { border-bottom: none; background-color: #f5f5f5}
.complete-list>ul>li.total div dl dt { padding: 17px 0 17px 40px}
.complete-list>ul>li.total div dl dd { padding: 17px 0}
.complete-list>ul>li.total div dl dd strong { font-size: 22px}
.complete-list .payment-area { position: relative}
.complete-list .payment-area ul { padding: 32px 40px; background-color: #555}
.complete-list .payment-area ul:after { content: ""; display: block; clear: both}
.complete-list .payment-area ul li { float: left; font-size: 0}
.complete-list .payment-area ul li strong { position: relative; color: #fff}
.complete-list .payment-area ul li strong:after { content: ":"; margin: 0 3px; color: #fff}
.complete-list .payment-area ul li em { color: #fff}
.complete-list .payment-area dl { position: absolute; right: 0; top: 0; bottom: 0; padding: 32px 40px; background-color: #4c4c4c}
.complete-list .payment-area dl:after { content: ""; display: block; clear: both}
.complete-list .payment-area dl dt { float: left; color: #fff}
.complete-list .payment-area dl dd { float: left; padding-left: 30px; color: #efc122}
.complete-list .payment-area dl dd * { color: #efc122}
.complete-list .payment-area dl dd em { display: inline-block; font-size: 22px; line-height: 22px; font-weight: bold; margin: -4px 3px 0 0}
.complete-list .payment-area.type2 ul { padding: 30px 20px}
.complete-list .payment-area.type2 ul li { float: none; margin-top: 20px}
.complete-list .payment-area.type2 ul li:after { content: ""; display: block; clear: both}
.complete-list .payment-area.type2 ul li:first-child { margin-top: 0}
.complete-list .payment-area.type2 ul li strong { float: left}
.complete-list .payment-area.type2 ul li strong:after { display: none}
.complete-list .payment-area.type2 ul li em { display: block; text-align: right}
.complete-list .payment-area.type2 dl { position: static; padding: 30px 20px}
.complete-list .payment-area.type2 dl dt { float: left}
.complete-list .payment-area.type2 dl dd { float: none; display: block; text-align: right}
.complete-list .cancel-area { margin: 20px 0; padding: 30px 20px; border: 1px solid #33aeb6}
.complete-list .cancel-area li { margin-top: 15px; border: none}
.complete-list .cancel-area li:first-child { margin-top: 0}
.complete-list .cancel-area li dl { display: table}
.complete-list .cancel-area li dl dt { display: table-cell; width: 90px; line-height: 26px; font-weight: bold; vertical-align: middle}
.complete-list .cancel-area li dl dd { display: table-cell; width: calc(100% - 90px); line-height: 26px; vertical-align: middle}
.complete-list .cancel-area li dl dd .radio-wrap .radio-box { margin-right: 20px}
.complete-list .cancel-area li dl dd .radio-wrap .radio-box:last-child { margin-right: 0}
@media screen and (max-width: 768px){
 .complete-list.mt { margin-top: 10px; margin-bottom: 50px}
 .complete-list.pop>ul>li>div dl dt { padding: 15px; width: 115px}
 .complete-list ul li div { display: block}
 .complete-list ul li div dl { position: relative; display: table; width: 100%}
 .complete-list ul li div dl dt { padding: 15px; width: 115px; line-height: 20px; word-break: keep-all}
 .complete-list ul li div dl dt .g { display: block}
 .complete-list ul li div dl dd { padding: 15px 15px 15px 0; width: calc(100% - 115px); line-height: 1.5}
 .complete-list ul li div dl dd span { display: block; line-height: 1.5}
 .complete-list ul li div dl dd ul li { line-height: 20px}
 .complete-list ul li div dl dd .g { display: block; line-height: 20px}
 .complete-list ul li div dl dd .g.inline { display: inline-block}
 .complete-list ul li div dl+dl { border-top: 1px solid #eee}
 .complete-list ul li div dl+dl dt { padding: 15px}
 .complete-list ul li div dl:first-child:nth-last-child(2), .complete-list ul li div dl:first-child:nth-last-child(2)~dl { width: 100%}
 .complete-list ul li div dl.push-right { padding-left: 0}
 .complete-list ul li div dl.push-right dt { padding: 15px}
 .complete-list ul li.total div dl dt { padding: 10px 0 10px 15px}
 .complete-list ul li.total div dl dd { padding: 10px 15px 10px 0}
 .complete-list ul li.total div dl dd strong { font-size: 17px}
 .complete-list .payment-area { padding: 0}
 .complete-list .payment-area ul { padding: 20px 15px}
 .complete-list .payment-area ul li { float: none}
 .complete-list .payment-area ul li:after { content: ""; display: block; clear: both}
 .complete-list .payment-area ul li strong:after { display: none}
 .complete-list .payment-area ul li em { float: right}
 .complete-list .payment-area dl { padding: 20px 15px; position: static}
 .complete-list .payment-area dl dd { padding: 0; float: right}
 .complete-list .payment-area dl dd em { font-size: 17px; line-height: 17px}
 .complete-list .payment-area.type2 ul { padding: 20px 15px}
 .complete-list .payment-area.type2 ul li { margin-top: 15px}
 .complete-list .payment-area.type2 dl { padding: 20px 15px}
 .complete-list .cancel-area { margin: 40px 0; padding: 0 15px; border: none}
 .complete-list .cancel-area li { margin-top: 15px; border: none}
 .complete-list .cancel-area li:first-child { margin-top: 0}
 .complete-list .cancel-area li dl { display: table}
 .complete-list .cancel-area li dl dt { line-height: 20px; width: 100px}
 .complete-list .cancel-area li dl dd { width: calc(100% - 100px); line-height: 20px}
 }
.gift-information h3 { font-size: 32px; line-height: 32px; font-family: SpoqaHanSans-Light; padding: 60px 0 20px}
@media screen and (max-width: 768px){
 .gift-information h3 { font-size: 24px; line-height: 24px; padding: 30px 0 15px}
 }
.gift-information .conts { background-color: #f5f5f5; padding: 40px}
.gift-information .conts dl:after { content: ""; display: block; clear: both}
.gift-information .conts dl dt { float: left; width: 440px; height: 30px; margin-bottom: 40px}
.gift-information .conts dl dt span { display: inline-block; font-size: 18px; line-height: 18px; color: #555; width: 120px}
.gift-information .conts dl dt em { font-size: 18px; line-height: 18px; color: #555; font-weight: bold; display: inline-block; border-bottom: 1px #ddd solid; padding-bottom: 15px; width: 317px}
.gift-information .conts dl dd { float: left; width: calc(100% - 440px); height: 30px; margin-bottom: 40px}
.gift-information .conts dl dd ul:after { content: ""; display: block; clear: both}
.gift-information .conts dl dd ul li { float: left; width: 50%; padding-left: 40px}
.gift-information .conts dl dd ul li span { display: block; font-size: 18px; line-height: 18px; font-weight: bold; color: #aaa; padding-bottom: 15px; border-bottom: 2px #aaa solid}
.gift-information .conts p { color: #777; text-indent: -6px; margin-left: 6px}
.gift-information .conts p:last-child { margin-top: 8px}
.gift-information .conts p::before { content: "*"; color: #777; vertical-align: -3px; display: inline-block; padding-right: 5px}
@media screen and (max-width: 768px){
 .gift-information .conts { padding: 20px}
 .gift-information .conts dl dt { float: initial; width: 100%; height: 30px; margin-bottom: 20px}
 .gift-information .conts dl dt span { font-size: 15px; line-height: 15px; width: 58px}
 .gift-information .conts dl dt em { font-size: 15px; line-height: 15px; border-bottom: 1px #ddd solid; padding-bottom: 15px; color: #777; width: calc(100% - 62px)}
 .gift-information .conts dl dd { float: initial; width: 100%; height: 30px; margin-bottom: 40px; padding-left: 58px}
 .gift-information .conts dl dd ul:after { content: ""; display: block; clear: both}
 .gift-information .conts dl dd ul li { float: left; width: 50%; padding-left: 0}
 .gift-information .conts dl dd ul li:first-child { padding-right: 20px}
 .gift-information .conts dl dd ul li span { font-size: 15px; line-height: 15px}
 .gift-information .conts p { line-height: 18px}
 }
.method-of-payment.recaptcha { margin-top: 0; padding: 0; background: none}
.method-of-payment.recaptcha p { display: block; width: 180px}
.method-of-payment.recaptcha p img { max-width: 100%}
.method-of-payment.recaptcha .input-box { top: inherit; bottom: 0; left: 210px; width: 310px; height: 44px}
.method-of-payment .reset { position: absolute; left: 552px; bottom: 0}
.method-of-payment .reset button { border: 1px #ccc solid; padding: 0; width: 100px; height: 38px}
.method-of-payment .reset button::before { content: ""; background: url("../image/icon_reset-2.png") no-repeat left top; display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px}
.method-of-payment .reset button em { color: #555}
.method-of-payment .reset.pos2 { top: 20px}
@media screen and (max-width: 768px){
 .form-wrap.recaptcha ul.dt li { position: relative; float: none; width: 100%}
 .form-wrap.recaptcha ul.dt li .reset { position: absolute; right: 15px; bottom: 0}
 .form-wrap.recaptcha ul.dt li+li { margin-top: 5px}
 .form-wrap.recaptcha ul.dt li:first-child { float: none; width: 100%; padding-right: 0 !important}
 .form-wrap.recaptcha ul.dt li:first-child .input-box { width: 190px; display: inline-block}
 .form-wrap.recaptcha ul.dt li:first-child .input-box img { max-width: 100%}
 .form-wrap.recaptcha .reset button { border: 1px #ccc solid; padding: 0; width: 104px; height: 46px}
 .form-wrap.recaptcha .reset button::before { content: ""; background: url("../image/icon_reset-2.png") no-repeat left top; display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px}
 .form-wrap.recaptcha .reset button em { color: #555}
 }
.real-time-contents { padding-top: 50px}
.real-time-contents .templ-type-tab-medium { margin-bottom: 65px}
.real-time-contents .real-time-area { padding-top: 15px}
.real-time-contents .real-time-area table { border-top: 2px #000 solid}
.real-time-contents .real-time-area table th { border-bottom: 1px #ddd solid; border-right: 1px #ddd solid; width: 146px; padding: 12px 0}
.real-time-contents .real-time-area table th:first-child { border-right: none; background-color: #444; border-bottom: 1px #444 solid; width: 252px; color: #fff}
.real-time-contents .real-time-area table th:last-child { border-right: none}
.real-time-contents .real-time-area table td { border-bottom: 1px #ddd solid; border-right: 1px #eee solid; padding: 15px 23px 5px; vertical-align: top}
.real-time-contents .real-time-area table td:first-child { border-right: none; background-color: #555; border-bottom: 1px #444 solid; padding: 39px 20px 0}
.real-time-contents .real-time-area table td:first-child>div { border-bottom: 1px #444 solid; margin-bottom: 4px; padding-bottom: 5px}
.real-time-contents .real-time-area table td:first-child>div div { margin-bottom: 0; position: relative}
.real-time-contents .real-time-area table td:first-child>div:last-child { border-bottom: none}
.real-time-contents .real-time-area table td:last-child { border-right: none}
.real-time-contents .real-time-area table td:nth-child(2)>em { color: #da291c}
.real-time-contents .real-time-area table td:nth-child(8)>em { color: #2086cd}
.real-time-contents .real-time-area table td[data-state=disabled]>em { color: #aaa}
.real-time-contents .real-time-area table td[data-state=today]>em { position: relative}
.real-time-contents .real-time-area table td[data-state=today]>em::after { content: ""; position: absolute; right: -10px; top: -5px; width: 5px; height: 5px; background-color: #da291c; border-radius: 50%}
.real-time-contents .real-time-area table td>em { font-weight: bold; display: inline-block; margin-bottom: 10px}
.real-time-contents .real-time-area table td div { position: relative; margin-bottom: 10px}
.real-time-contents .real-time-area table td div.team-1 { height: 26px}
.real-time-contents .real-time-area table td div.team-1 u, .real-time-contents .real-time-area table td div.team-1 strong { line-height: 26px}
.real-time-contents .real-time-area table td div.team-2 { height: 51px}
.real-time-contents .real-time-area table td div.team-2 u, .real-time-contents .real-time-area table td div.team-2 strong { line-height: 51px}
.real-time-contents .real-time-area table td div.team-3 { height: 76px}
.real-time-contents .real-time-area table td div.team-3 u, .real-time-contents .real-time-area table td div.team-3 strong { line-height: 76px}
.real-time-contents .real-time-area table td div strong { display: block; color: #fff; font-weight: bold}
.real-time-contents .real-time-area table td div strong em { font-size: 14px; line-height: 14px; color: #aaa; display: inline-block; padding-left: 3px}
.real-time-contents .real-time-area table td div ul { position: absolute; right: 0; top: 0; padding-top: 10px}
.real-time-contents .real-time-area table td div ul li { color: #fff; font-size: 14px; line-height: 14px; padding-bottom: 9px}
.real-time-contents .real-time-area table td div ul li:last-child { padding-bottom: 0}
.real-time-contents .real-time-area table td div u { text-decoration: none; display: block; text-align: center; font-size: 14px; color: #999}
.real-time-contents .real-time-area table td div button { border: 1px #ccc solid; width: 100%; display: block; margin-bottom: -1px; height: 26px}
.real-time-contents .real-time-area table td div button em { font-size: 14px; color: #555}
.real-time-contents .real-time-area table td div button:hover { background-color: #da291c; border-color: #da291c}
.real-time-contents .real-time-area table td div button:hover em { color: #fff}
/* 접근성개선시 삭제 */
.real-time-contents .real-time-area table td div button[disabled] { background-color: #eee; border-color: #ccc}
.real-time-contents .real-time-area table td div button[disabled] em { color: #555}
/* 접근성개선시 삭제 */
.real-time-contents .real-time-area table td div button.wait-btn { background: #ddd; border: 1px solid #ccc}
.real-time-contents .real-time-area table td div button.wait-btn:hover { background-color: #da291c; border-color: #da291c}
.real-time-contents .real-time-area table td div button.wait-btn:hover em { color: #fff}
.real-time-contents .real-time-area table td div button.wait-btn::after { content: ""; position: absolute; right: 5px; top: 5px; width: 4px; height: 4px; background-color: #e63333; border-radius: 50%}
.real-time-contents .real-time-area table td div button.off-btn {pointer-events: none; background-color: #eee; border-color: #ccc}
.real-time-contents .real-time-area table td div button.off-btn em{color: #555}
[data-catagory=reservation] .templ-type-title+.templ-type-tab-medium { margin-top: 65px}
@media screen and (max-width: 768px) { [data-catagory=reservation] .templ-type-title+.templ-type-tab-medium { margin-top: 0}
 }
[data-catagory=reservation] .templ-type-tab-medium { margin: 0 0 50px 0}
@media screen and (max-width: 768px) { [data-catagory=reservation] .templ-type-tab-medium { margin: 0 0 35px 0}
 }
@media screen and (max-width: 768px) { [data-catagory=reservation] .templ-type-tab-large { margin: 0 0 30px 0}
 }
[data-catagory=reservation] .guide-content-box .top-img+.list-title-border { margin-top: 40px}
[data-catagory=reservation] .guide-content-box .top-img img { width: 100%}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .top-img { margin: 0 -20px}
 [data-catagory=reservation] .guide-content-box .top-img+.list-title-border { margin-top: 30px}
 }
[data-catagory=reservation] .guide-content-box .top-info { position: relative; margin-bottom: 80px}
[data-catagory=reservation] .guide-content-box .top-info:before { content: "Reservation guide"; position: absolute; top: 0; right: 0; font-size: 100px; line-height: 100px; color: #eee; letter-spacing: -5px; z-index: -1}
[data-catagory=reservation] .guide-content-box .top-info dt { font-size: 36px; line-height: 36px; font-family: SpoqaHanSans-Light; line-height: 52px}
[data-catagory=reservation] .guide-content-box .top-info dd { margin-top: 10px; line-height: 26px; color: #555}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .top-info { position: relative; margin-bottom: 50px}
 [data-catagory=reservation] .guide-content-box .top-info:before { display: none}
 [data-catagory=reservation] .guide-content-box .top-info dt { font-size: 24px; line-height: 33px}
 [data-catagory=reservation] .guide-content-box .top-info dd { margin-top: 20px; line-height: 19px}
 }
[data-catagory=reservation] .guide-content-box .list-title { margin: 60px 0 20px; font-size: 24px; line-height: 24px}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .list-title { font-size: 18px; line-height: 18px; margin: 40px 0 15px}
 }
[data-catagory=reservation] .guide-content-box .list-title-border { margin: 120px 0 20px}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .list-title-border { margin: 60px 0 15px}
 }
[data-catagory=reservation] .guide-content-box .table-wrap { position: relative}
[data-catagory=reservation] .guide-content-box .table-wrap .table-title { margin: 60px 0 20px}
[data-catagory=reservation] .guide-content-box .table-wrap .text-right { position: absolute; top: 6px; right: 0; font-size: 14px; line-height: 14px}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .table-wrap .table { overflow-x: auto}
 }
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-border th { padding: 10px}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-border td { padding: 10px; line-height: 26px}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-border td.text-left { padding: 10px 40px}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-border td .list-hyphen li { padding-left: 9px; text-indent: -9px}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-border .text-left { text-align: left !important}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-border .bg-none { background-color: #fff}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-row th { padding: 10px 40px}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-row td { padding: 10px 40px}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-row td .text-gray { display: block; line-height: 26px}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-row.table-center th { text-align: center}
[data-catagory=reservation] .guide-content-box .table-wrap .table .table-row.table-center td { text-align: center}
[data-catagory=reservation] .guide-content-box .table-wrap .templ-type-infolist-2 { margin-top: 10px}
[data-catagory=reservation] .guide-content-box .table-wrap .templ-type-infolist-2 ul { margin: 0}
[data-catagory=reservation] .guide-content-box .table-wrap .templ-type-infolist-2 ul li { padding: 0 0 0 10px}
[data-catagory=reservation] .guide-content-box .table-wrap .templ-type-infolist-2 ul li:before { position: absolute; top: 3px; left: 0; margin: 0; vertical-align: middle}
[data-catagory=reservation] .guide-content-box .table-wrap .btn-down { position: absolute; top: 4px; right: 0; padding: 0}
[data-catagory=reservation] .guide-content-box .table-wrap .btn-down:before { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16.5px' height='17px'%3e%3cpath fill-rule='evenodd' stroke='rgb(0, 0, 0)' stroke-width='1px' stroke-linecap='butt' stroke-linejoin='miter' fill='none' d='M0.500,12.000 L0.500,16.000 L15.500,16.000 L15.500,12.000 '/%3e%3cpath fill-rule='evenodd' fill='rgb(0, 0, 0)' d='M7.500,-0.000 L8.500,-0.000 L8.500,12.000 L7.500,12.000 L7.500,-0.000 Z'/%3e%3cpath fill-rule='evenodd' stroke='rgb(0, 0, 0)' stroke-width='1px' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M4.404,7.154 L7.990,10.690 L11.575,7.154 '/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; margin: -6px 10px 0 6px; width: 16.5px; height: 17px; vertical-align: middle; z-index: 1}
[data-catagory=reservation] .guide-content-box .table-wrap .btn-down em { color: #000}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .table-wrap .table-title { margin: 40px 0 15px}
 [data-catagory=reservation] .guide-content-box .table-wrap .text-right { top: 3px; font-size: 13px; line-height: 13px}
 [data-catagory=reservation] .guide-content-box .table-wrap .table .table-border th { padding: 10px 5px}
 [data-catagory=reservation] .guide-content-box .table-wrap .table .table-border td { padding: 10px 5px; line-height: 20px}
 [data-catagory=reservation] .guide-content-box .table-wrap .table .table-border td.text-left { padding: 10px 15px}
 [data-catagory=reservation] .guide-content-box .table-wrap .table .table-border td .list-hyphen { padding-left: 7px; text-indent: -7px}
 [data-catagory=reservation] .guide-content-box .table-wrap .table .table-row th { padding: 10px 5px}
 [data-catagory=reservation] .guide-content-box .table-wrap .table .table-row td { padding: 10px 5px}
 [data-catagory=reservation] .guide-content-box .table-wrap .table .table-row td .text-gray { display: block; line-height: 20px}
 [data-catagory=reservation] .guide-content-box .table-wrap .btn-down { top: 2px}
 }
[data-catagory=reservation] .guide-content-box .info-text { color: #555; line-height: 26px}
[data-catagory=reservation] .guide-content-box .info-text+.table-wrap { margin-top: 30px}
[data-catagory=reservation] .guide-content-box .info-text+.table { margin-top: 30px}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .info-text { line-height: 20px}
 [data-catagory=reservation] .guide-content-box .info-text+.table-wrap { margin-top: 20px}
 [data-catagory=reservation] .guide-content-box .info-text+.table { margin-top: 20px}
 }
[data-catagory=reservation] .guide-content-box .sub-info dt { margin-top: 40px; line-height: 26px; font-weight: bold}
[data-catagory=reservation] .guide-content-box .sub-info dd { line-height: 26px; color: #555}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .sub-info dt { margin-top: 20px; line-height: 20px}
 [data-catagory=reservation] .guide-content-box .sub-info dd { line-height: 20px}
 }
[data-catagory=reservation] .guide-content-box .reservation-gray-box>ul { padding: 30px; line-height: 100%; font-size: 0; text-align: center; background: #f5f5f5}
[data-catagory=reservation] .guide-content-box .reservation-gray-box>ul li { position: relative; display: inline-block; font-size: 18px; line-height: 18px; font-weight: bold}
[data-catagory=reservation] .guide-content-box .reservation-gray-box>ul li.tel { padding-left: 25px; background: url(../image/icon-reservation-tel.png) no-repeat left center}
[data-catagory=reservation] .guide-content-box .reservation-gray-box>ul li.fax { margin-left: 25px; padding-left: 45px; border-left: 1px solid #ddd; background: url(../image/icon-reservation-fax.png) no-repeat 20px center}
[data-catagory=reservation] .guide-content-box .reservation-gray-box>ul li.time { margin-left: 25px; padding-left: 45px; border-left: 1px solid #ddd; background: url(../image/icon-reservation-time.png) no-repeat 20px center}
[data-catagory=reservation] .guide-content-box .reservation-gray-box .templ-type-infolist-2 { margin-top: 10px}
[data-catagory=reservation] .guide-content-box .reservation-gray-box .templ-type-infolist-2 ul { margin: 0}
[data-catagory=reservation] .guide-content-box .reservation-gray-box .templ-type-infolist-2 ul li { padding: 0 0 0 10px}
[data-catagory=reservation] .guide-content-box .reservation-gray-box .templ-type-infolist-2 ul li:before { position: absolute; top: 3px; left: 0; margin: 0; vertical-align: middle}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .reservation-gray-box>ul { padding: 20px; text-align: left}
 [data-catagory=reservation] .guide-content-box .reservation-gray-box>ul li { display: block; font-size: 13px; line-height: 19px; word-break: keep-all}
 [data-catagory=reservation] .guide-content-box .reservation-gray-box>ul li.tel { background: url(../image/icon-reservation-tel.png) no-repeat left center}
 [data-catagory=reservation] .guide-content-box .reservation-gray-box>ul li.fax { margin: 15px 0 0 0; padding-left: 25px; border-left: none; background: url(../image/icon-reservation-fax.png) no-repeat left 2px}
 [data-catagory=reservation] .guide-content-box .reservation-gray-box>ul li.time { margin: 15px 0 0 0; padding-left: 25px; border-left: none; background: url(../image/icon-reservation-time.png) no-repeat left 2px}
 }
[data-catagory=reservation] .guide-content-box .reservation-step-box>ul { padding: 40px 0; border-top: 2px solid #555; border-bottom: 1px solid #ddd}
[data-catagory=reservation] .guide-content-box .reservation-step-box>ul:after { content: ""; display: block; clear: both}
[data-catagory=reservation] .guide-content-box .reservation-step-box>ul li { position: relative; float: left; width: 20%; text-align: center}
[data-catagory=reservation] .guide-content-box .reservation-step-box>ul li:after { content: ""; display: block; position: absolute; top: 50%; right: 3px; width: 20px; height: 20px; border-top: 2px solid #ccc; border-right: 2px solid #ccc; transform: rotate(45deg) translateY(-50%)}
[data-catagory=reservation] .guide-content-box .reservation-step-box>ul li:last-child:after { display: none}
[data-catagory=reservation] .guide-content-box .reservation-step-box>ul li span { display: block}
[data-catagory=reservation] .guide-content-box .reservation-step-box>ul li span.img { position: relative; height: 50px}
[data-catagory=reservation] .guide-content-box .reservation-step-box>ul li span.img img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto}
[data-catagory=reservation] .guide-content-box .reservation-step-box>ul li span.text { margin-top: 20px}
[data-catagory=reservation] .guide-content-box .reservation-step-box .templ-type-infolist-2 { margin-top: 10px}
[data-catagory=reservation] .guide-content-box .reservation-step-box .templ-type-infolist-2 ul { margin: 0}
[data-catagory=reservation] .guide-content-box .reservation-step-box .templ-type-infolist-2 ul li { padding: 0 0 0 10px}
[data-catagory=reservation] .guide-content-box .reservation-step-box .templ-type-infolist-2 ul li:before { position: absolute; top: 3px; left: 0; margin: 0; vertical-align: middle}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .reservation-step-box>ul { padding: 30px 20px 30px 0}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li { text-align: center}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li:after { right: 3px; width: 15px; height: 15px; transform: rotate(45deg) translateY(-50%)}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li:nth-child(1) { width: 28%}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li:nth-child(2) { width: 36%}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li:nth-child(3) { width: 36%}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li:nth-child(4) { margin-top: 35px; padding-left: 15%; width: 50%}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li:nth-child(5) { margin-top: 35px; padding-right: 15%; width: 50%}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li span { display: block}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li span.img { position: relative; height: 40px}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li span.img img { transform: scale(0.8)}
 [data-catagory=reservation] .guide-content-box .reservation-step-box>ul li span.text { margin-top: 15px}
 }
[data-catagory=reservation] .guide-content-box .reservation-info-box { margin-top: 40px; border-top: 2px solid #000}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li { position: relative; display: table; padding: 30px 0; width: 100%; min-height: 160px; border-bottom: 1px solid #eee}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li .img { position: absolute; top: 50%; left: 80px; width: 50px; text-align: center; transform: translateY(-50%)}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl { display: table-cell; padding-left: 210px; vertical-align: middle}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dt { font-size: 20px; line-height: 20px; font-weight: bold}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .text { margin-top: 30px; line-height: 26px}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .list { margin-top: 20px}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .list li { position: relative; margin-top: 5px; padding-left: 10px; line-height: 22px; color: #555}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .list li:first-child { margin-top: 0}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .list li:before { content: "*"; display: inline-block; position: absolute; top: 3px; left: 0}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .list li span.text-red { color: #da291c}
[data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .list li .text-gray { display: block; line-height: 22px; color: #777}
@media screen and (max-width: 768px) { [data-catagory=reservation] .guide-content-box .reservation-info-box { margin-top: 15px}
 [data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li { padding: 45px 20px 30px}
 [data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li .img { top: 30px; left: 20px; transform: scale(0.8)}
 [data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl { padding: 0}
 [data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dt { padding-left: 60px}
 [data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .text { margin-top: 35px; line-height: 20px}
 [data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .text+.list { margin-top: 20px}
 [data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .list { margin-top: 35px}
 [data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .list li { line-height: 20px}
 [data-catagory=reservation] .guide-content-box .reservation-info-box>ul>li dl dd .list li .text-gray { line-height: 20px}
 }

[data-catagory=reservation] .map-area-address { margin-top: -150px; position: relative}
@media screen and (max-width: 768px) { [data-catagory=reservation] .map-area-address { margin-top: -35px}
 }
[data-catagory=reservation] .map-area-address .map { height: 450px; background-color: #dce3cb}
[data-catagory=reservation] .map-area-address .address-area { width: 1280px; margin: 0 auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0}
@media screen and (max-width: 768px) { [data-catagory=reservation] .map-area-address .address-area { width: 100%}
 }
[data-catagory=reservation] .map-area-address .address-area .info-addr { background-color: #fff; position: absolute; left: 0; top: 40px; width: 400px; padding: 40px}
[data-catagory=reservation] .map-area-address .address-area .info-addr h3 { font-size: 22px; line-height: 22px; font-weight: bold; padding-bottom: 20px}
[data-catagory=reservation] .map-area-address .address-area .info-addr ul { margin-bottom: 34px}
[data-catagory=reservation] .map-area-address .address-area .info-addr ul li { color: #555; margin-bottom: 12px}
[data-catagory=reservation] .map-area-address .address-area .info-addr a { float: right; display: inline-block}
[data-catagory=reservation] .map-area-address .address-area .info-addr a::after { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.5px' height='14.5px'%3e%3cpath fill-rule='evenodd' stroke='rgb(0, 0, 0)' stroke-width='1px' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M1.475,12.555 L7.525,6.958 L1.475,1.417 '/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 9.5px; height: 14.5px; vertical-align: -1px; margin-left: 10px}
@media screen and (max-width: 768px) { [data-catagory=reservation] .map-area-address .address-area .info-addr { top: 20px; left: 20px; width: 250px; padding: 20px 15px}
 [data-catagory=reservation] .map-area-address .address-area .info-addr h3 { font-size: 21px; line-height: 21px; font-family: SpoqaHanSans-Light; padding-bottom: 14px}
 [data-catagory=reservation] .map-area-address .address-area .info-addr ul { margin-bottom: 20px}
 [data-catagory=reservation] .map-area-address .address-area .info-addr ul li { margin-bottom: 0; font-size: 13px; line-height: 20px}
 [data-catagory=reservation] .map-area-address .address-area .info-addr a { font-size: 12px; line-height: 12px}
 [data-catagory=reservation] .map-area-address .address-area .info-addr a::after { width: 6.5px; height: 11px; margin-left: 5px; color: #000}
}

[data-catagory=mobile-reservation] #footer { display: none}
.mobile-reservation .hr { height: 1px; background-color: #eee}
.mobile-reservation .hr.type-1 { margin: 15px 0}
.mobile-reservation .hr.type-2 { margin: 50px 0}
.mobile-reservation .hr.type-3 { margin: 10px 0 50px}
.mobile-reservation .tooltip-wrap { vertical-align: 2px}
.mobile-reservation .tooltip-wrap .btn-tooltip { border: 1px solid #33aeb6; background-color: #fff}
.mobile-reservation .tooltip-wrap .btn-tooltip:before { color: #33aeb6}
.mobile-reservation .tooltip-wrap .tooltip-box { top: 30px; min-width: 260px; padding: 15px; border: 1px solid #33aeb6; border-radius: 9px}
.mobile-reservation .tooltip-wrap .tooltip-box .text { color: #777}
.mobile-reservation .tooltip-wrap .tooltip-box .arrow { position: absolute; top: -7px; left: 0}
.mobile-reservation .tooltip-wrap .tooltip-box .arrow:before, .mobile-reservation .tooltip-wrap .tooltip-box .arrow:after { display: block; position: absolute; top: 0; left: 0; content: ""; transform: translateX(-50%)}
.mobile-reservation .tooltip-wrap .tooltip-box .arrow:before { border-bottom: 7px solid #33aeb6; border-left: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid rgba(0, 0, 0, 0)}
.mobile-reservation .tooltip-wrap .tooltip-box .arrow:after { top: 1px; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0)}
.mobile-reservation.mobile-package .fix-area-contents.charge .btn-box { position: absolute; top: 156px; right: 20px}
.mobile-reservation .fix-area-contents { padding: 75px 0 60px}
.mobile-reservation .fix-area-contents.charge { position: relative}
.mobile-reservation .fix-area-contents.charge .btn-box { position: absolute; top: 100px; right: 20px}
.mobile-reservation .fix-area-contents.charge .btn-box .submit-small { padding: 3.5px 20px}
.mobile-reservation .fix-area-contents.charge .btn-box .submit-small em { font-size: 12px; line-height: 12px}
.mobile-reservation .fix-area-contents h3 { margin: 30px 20px 15px; font-size: 16px; font-weight: bold}
.mobile-reservation .fix-area-contents h3+.templ-type-tab-reservation { padding-top: 0}
.mobile-reservation .fix-area-contents h3+.templ-type-tab-reservation+h3 { margin-top: 0}
.mobile-reservation .fix-area-contents .templ-type-title-m { font-size: 24px; line-height: 24px; margin-bottom: 20px}
.mobile-reservation .fix-area-contents .xb { color: #555; padding-bottom: 24px}
.mobile-reservation .fix-area-contents .btn-gird-col li:last-child { margin-bottom: 0}
.mobile-reservation .fix-area-contents .btn-gird-col li .fs { font-weight: 700; color: #000}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt .w { width: 50%}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt .w:first-child { width: 50%}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt .w:last-child { width: 50%}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt .n { width: 20%}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt .tp { width: 30%}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt .fp { width: 40%}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt li { padding-right: 20px}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt li.input-lpoint { width: 100% !important; margin-bottom: 5px; padding-right: 0}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt li.check-lpoint { width: 100% !important; text-align: right}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt li:last-child { padding-right: 0; padding-left: 0}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt4 { display: table; margin-left: -10px}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt4 li { display: table-cell; float: none; width: auto; margin-right: 0; padding: 0 10px; vertical-align: bottom}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt4 li:first-child { width: 30%}
.mobile-reservation .fix-area-contents .btn-gird-col li .dt4 li.vx { width: 100px !important; padding: 0 !important}
.mobile-reservation .fix-area-contents .ck { margin-bottom: 30px; padding: 0}
.mobile-reservation .fix-area-contents .ck .form-wrap.bvx { display: block; margin-right: 0; margin-bottom: 15px; border: none; height: auto}
.mobile-reservation .fix-area-contents .ck .form-wrap.bvx .radio-box { margin-right: 20px}
.mobile-reservation .fix-area-contents .ck .form-wrap.bvx .radio-box:last-child { margin-right: 0}
.mobile-reservation .fix-area-bottom { padding: 0 0 60px}
.mobile-reservation .benefits-area { padding: 0 20px 30px; border-bottom: 1px #eee solid}
.mobile-reservation .benefits-area .select-box em { font-size: 15px; font-weight: bold; color: #000; border-width: 1px}
.mobile-reservation .scroll-area { transform: translate3d(0, 0, 0); will-change: transform; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 0 20px}
.mobile-reservation .scroll-area::-webkit-scrollbar { display: none}
.mobile-reservation .date-select-area .scroll-area>div { display: inline-block; padding-bottom: 25px; border-bottom: 1px #eee solid}
.mobile-reservation .date-select-area .scroll-area>div>em { font-size: 12px; line-height: 12px; color: #777; display: block; padding-bottom: 15px}
.mobile-reservation .date-select-area .scroll-area>div ul li { display: inline-block; text-align: center; vertical-align: top; padding: 0 7px}
.mobile-reservation .date-select-area .scroll-area>div ul li:first-child { padding-left: 0}
.mobile-reservation .date-select-area .scroll-area>div ul li>em { font-size: 11px; line-height: 11px; color: #999; display: block; margin-bottom: 5px}
.mobile-reservation .date-select-area .scroll-area>div ul li>em.sun { color: #d22b18}
.mobile-reservation .date-select-area .scroll-area>div ul li>em.sat { color: #2086cd}
.mobile-reservation .date-select-area .scroll-area>div ul li span { font-size: 17px; font-weight: bold; display: inline-block; color: #ccc; width: 37px; height: 37px; margin-bottom: 5px; position: relative; padding-top: 10px; border-radius: 200px}
.mobile-reservation .date-select-area .scroll-area>div ul li div.now span::after { content: ""; position: absolute; right: 4px; top: 4px; width: 5px; height: 5px; background-color: #e63333; border-radius: 50%}
.mobile-reservation .date-select-area .scroll-area>div ul li div.active span { color: #fff; background-color: #33aeb6}
.mobile-reservation .date-select-area .scroll-area>div ul li div.disabled span { color: #ccc}
.mobile-reservation .date-select-area .scroll-area>div ul li div span { color: #000}
.mobile-reservation .date-select-area .scroll-area>div ul li div em { display: block; font-size: 12px; line-height: 12px; color: #777}
.mobile-reservation .hole-select-area .button-group { margin: 0 20px}
.mobile-reservation .hole-select-area .button-group a { margin-right: 5px}
.mobile-reservation .time-select-area { position: relative}
.mobile-reservation .time-select-area+.time-select-area { margin-top: 25px; padding-top: 30px; border-top: 1px solid #ddd}
.mobile-reservation .time-select-area .l-area { top: 0}
.mobile-reservation .time-select-area .scroll-area { padding-top: 15px}
.mobile-reservation .time-select-area .scroll-area:last-child ul li { border-bottom: 0}
.mobile-reservation .time-select-area .scroll-area ul li { padding-bottom: 15px; border-bottom: 1px #eee solid; padding-right: 6px; display: inline-block}
.mobile-reservation .time-select-area .scroll-area ul li div { position: relative; border: 1px #ddd solid; border-radius: 5px; width: 70px; height: 67px; padding: 10px 0 0 10px; position: relative}
.mobile-reservation .time-select-area .scroll-area ul li div[data-state=active] { background-color: #da291c; border-color: #da291c}
.mobile-reservation .time-select-area .scroll-area ul li div[data-state=active] em, .mobile-reservation .time-select-area .scroll-area ul li div[data-state=active] u, .mobile-reservation .time-select-area .scroll-area ul li div[data-state=active] span, .mobile-reservation .time-select-area .scroll-area ul li div[data-state=active] span>em { color: #fff}
.mobile-reservation .time-select-area .scroll-area ul li div[data-state=close] { background-color: #eee}
.mobile-reservation .time-select-area .scroll-area ul li div[data-state=close] em, .mobile-reservation .time-select-area .scroll-area ul li div[data-state=close] u, .mobile-reservation .time-select-area .scroll-area ul li div[data-state=close] span, .mobile-reservation .time-select-area .scroll-area ul li div[data-state=close] span>em { color: #999}
.mobile-reservation .time-select-area .scroll-area ul li div[data-state=waiting] { background-color: #eee}
.mobile-reservation .time-select-area .scroll-area ul li div[data-state=waiting] u { color: #999}
.mobile-reservation .time-select-area .scroll-area ul li div[data-state=waiting] span, .mobile-reservation .time-select-area .scroll-area ul li div[data-state=waiting] span>em { color: #555}
.mobile-reservation .time-select-area .scroll-area ul li div[data-state=waiting] .test { color: red}
.mobile-reservation .time-select-area .scroll-area ul li div[data-state=waiting]::before { content: ""; position: absolute; right: 8px; top: 8px; width: 5px; height: 5px; background-color: #e63333; border-radius: 50%}
.mobile-reservation .time-select-area .scroll-area ul li div.self[data-state=active] { background-color: #33aeb6; border-color: #33aeb6}
.mobile-reservation .time-select-area .scroll-area ul li div.self[data-state=active] em, .mobile-reservation .time-select-area .scroll-area ul li div.self[data-state=active] u, .mobile-reservation .time-select-area .scroll-area ul li div.self[data-state=active] span, .mobile-reservation .time-select-area .scroll-area ul li div.self[data-state=active] span>em { color: #fff}
.mobile-reservation .time-select-area .scroll-area ul li div>em { display: block; font-size: 15px; line-height: 15px; padding-bottom: 6px}
.mobile-reservation .time-select-area .scroll-area ul li div u { display: block; font-size: 10px; line-height: 10px; text-decoration: line-through; color: #999; padding-bottom: 5px}
.mobile-reservation .time-select-area .scroll-area ul li div span { display: block; font-size: 10px; line-height: 10px}
.mobile-reservation .time-select-area .scroll-area ul li div span em { font-size: 10px; line-height: 10px}
.mobile-reservation .time-select-area .scroll-area ul li div mark { position: absolute; right: -1px; top: -7px; padding: 0 5px; font-size: 9px; color: #33aeb6; font-weight: bold; border: 1px solid #33aeb6; background-color: #fff}
.mobile-reservation .no-schedule { padding: 0 15px}
.mobile-reservation .no-schedule .notice-box { width: 100%; text-align: center; padding: 20px 9px 20px; border-radius: 10px; background: #f5f5f5}
.mobile-reservation .no-schedule .notice-box span { display: block; line-height: 1.4; color: #777}
.mobile-reservation .no-result { padding: 25px 0 20px; text-align: center}
.mobile-reservation .no-result::before { content: ""; background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='53px' height='53px'%3e%3cpath fill-rule='evenodd' stroke='rgb(51, 174, 182)' stroke-width='2px' stroke-linecap='butt' stroke-linejoin='miter' fill='rgb(255, 255, 255)' d='M26.000,1.000 C39.807,1.000 51.000,12.193 51.000,26.000 C51.000,39.807 39.807,51.000 26.000,51.000 C12.193,51.000 1.000,39.807 1.000,26.000 C1.000,12.193 12.193,1.000 26.000,1.000 Z'/%3e%3cpath fill-rule='evenodd' fill='rgb(51, 174, 182)' d='M26.500,38.000 C25.671,38.000 25.000,37.328 25.000,36.500 L25.000,36.141 C25.000,35.313 25.671,34.641 26.500,34.641 C27.328,34.641 28.000,35.313 28.000,36.141 L28.000,36.500 C28.000,37.328 27.328,38.000 26.500,38.000 ZM26.500,31.308 C25.671,31.308 25.000,30.636 25.000,29.808 L25.000,15.500 C25.000,14.672 25.671,14.000 26.500,14.000 C27.328,14.000 28.000,14.672 28.000,15.500 L28.000,29.808 C28.000,30.636 27.328,31.308 26.500,31.308 Z'/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 27px; height: 27px; margin-bottom: 10px}
.mobile-reservation .no-result p { color: #777; line-height: 22px}
.mobile-reservation .l-area { position: absolute; top: 40px; right: 20px}
.mobile-reservation .l-area ul:after { content: ""; display: block; clear: both}
.mobile-reservation .l-area ul li { float: left; margin-left: 14px}
.mobile-reservation .l-area ul li i { display: inline-block; width: 20px; height: 15px; margin-right: 6px; border: 1px solid #ccc; background-color: #eee; vertical-align: -3px}
.mobile-reservation .l-area ul li i.icon-fs-1 { position: relative}
.mobile-reservation .l-area ul li i.icon-fs-1::after { content: ""; position: absolute; right: 2px; top: 2px; width: 3px; height: 3px; background-color: #e63333; border-radius: 50%}
.mobile-reservation .l-area ul li i.icon-fs-2 { border: 1px #ccc solid; background-color: #fff}
.mobile-reservation .l-area ul li em { font-size: 13px; color: #777}
.mobile-reservation .l-area ul li.poss em { color: #da291c}
.mobile-reservation .l-area .select-box ul li { margin-left: 0}
.mobile-reservation .templ-type-tab-rev { margin-bottom: 25px; text-align: center}
.mobile-reservation .templ-type-tab-rev button { background-color: #eee; border-radius: 100px; padding: 10px 20px; margin: 0 2px}
.mobile-reservation .templ-type-tab-rev button em { color: #777}
.mobile-reservation .templ-type-tab-rev button[data-state=active] { background-color: #333}
.mobile-reservation .templ-type-tab-rev button[data-state=active] em { color: #fff}
.mobile-reservation .golf-cc-container, .mobile-reservation .fix-area-button { position: fixed; bottom: -2px; left: 0; right: 0; z-index: 2}
.mobile-reservation .golf-cc-container .select-menu, .mobile-reservation .fix-area-button .select-menu { background-color: #ccc; padding: 22px 0; width: 100%}
.mobile-reservation .golf-cc-container .select-menu em, .mobile-reservation .fix-area-button .select-menu em { font-size: 16px; line-height: 16px; font-weight: bold}
.mobile-reservation .golf-cc-container .select-menu::after, .mobile-reservation .fix-area-button .select-menu::after { content: ""; background: url(../image/reservation-bg-2.png) no-repeat left top; background-size: 100% 100%; width: 128px; height: 60px; position: absolute; right: 0; top: 0}
.mobile-reservation .golf-cc-container .select-menu[data-state=active], .mobile-reservation .fix-area-button .select-menu[data-state=active] { background-color: #33aeb6}
.mobile-reservation .golf-cc-container .select-menu[data-state=active]::after, .mobile-reservation .fix-area-button .select-menu[data-state=active]::after { background: url(../image/reservation-bg-2-active.png) no-repeat left top}
.mobile-reservation .complete-contents { padding: 40px 20px 50px}
.mobile-reservation .complete-contents .hr { margin-right: -20px; margin-left: -20px}
.mobile-reservation .complete-contents .templ-type-header { margin-bottom: 25px}
.mobile-reservation .complete-contents .templ-type-infolist-1 h3 { margin: 0 0 15px; font-size: 14px}
.mobile-reservation .complete-contents .templ-type-infolist-2>ul>li { padding: 0 0 8px 10px}
.mobile-reservation .complete-contents .templ-type-infolist-2>ul>li:before { position: absolute; top: 2px; left: 0}
.mobile-reservation .complete-contents .btn-gird-col.ps { margin-bottom: 15px; padding-bottom: 0}
.mobile-reservation .complete-contents .btn-gird-col.ps>li ul li { margin-bottom: 0}
.mobile-reservation .complete-contents .form-wrap.bvx { height: auto; margin-bottom: -10px; border-bottom: 0}
.mobile-reservation .complete-contents .complete-form-box .form-wrap label, .mobile-reservation .complete-contents .complete-form-box .form-wrap .label { font-weight: 400; color: #777}
.mobile-reservation .complete-contents .complete-form-box .form-wrap .select-box em { border-bottom: 1px solid #aaa; font-weight: 700; font-size: 15px; line-height: 15px; color: #000}
.mobile-reservation .complete-contents .complete-form-box .form-wrap .input-box input { border-bottom: 1px solid #aaa; font-weight: 700}
.mobile-reservation .complete-list>ul>li>div dl .b { font-weight: 400}
.mobile-reservation .package-item p { line-height: 20px}
.mobile-reservation .package-item p * { line-height: 20px}
.real-time-cal-area { border-top: 1px #eee solid; padding: 35px 0}
.real-time-cal-area .step { text-align: center; position: relative; padding-bottom: 35px}
.real-time-cal-area .step .prev, .real-time-cal-area .step .next { width: 25px; height: 25px; vertical-align: -3px; position: relative; margin: 0 12px}
.real-time-cal-area .step .prev::before, .real-time-cal-area .step .next::before { content: ""; background-size: 100% 100%; display: inline-block; width: 11px; height: 18px; position: absolute; top: 3px}
.real-time-cal-area .step .prev::before { background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22px' height='37px'%3e%3cpath fill-rule='evenodd' stroke='rgb(153, 153, 153)' stroke-width='2px' stroke-linecap='butt' stroke-linejoin='miter' fill='none' d='M18.591,34.999 L0.988,18.000 L18.591,1.000 '/%3e%3c/svg%3e"); left: 7px}
.real-time-cal-area .step .next::before { background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22px' height='39px'%3e%3cpath fill-rule='evenodd' stroke='rgb(153, 153, 153)' stroke-width='2px' stroke-linecap='butt' stroke-linejoin='miter' fill='none' d='M1.000,34.890 L16.817,19.000 L1.000,3.110 '/%3e%3c/svg%3e"); left: 9px}
.real-time-cal-area .step .reset { background-image: url("data:image/svg+xml; charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='53px' height='53px'%3e%3cpath fill-rule='evenodd' stroke='rgb(221, 221, 221)' stroke-width='2px' stroke-linecap='butt' stroke-linejoin='miter' fill='rgb(255, 255, 255)' d='M26.000,1.000 C39.807,1.000 51.000,12.193 51.000,26.000 C51.000,39.807 39.807,51.000 26.000,51.000 C12.193,51.000 1.000,39.807 1.000,26.000 C1.000,12.193 12.193,1.000 26.000,1.000 Z'/%3e%3cpath fill-rule='evenodd' stroke='rgb(85, 85, 85)' stroke-width='2px' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M37.992,27.346 C37.822,28.956 37.315,30.559 36.444,32.052 C33.123,37.746 25.767,39.697 20.014,36.410 C14.261,33.122 12.290,25.841 15.611,20.146 C18.933,14.452 26.289,12.501 32.042,15.789 C33.924,16.864 35.401,18.368 36.421,20.103 '/%3e%3cpath fill-rule='evenodd' stroke='rgb(85, 85, 85)' stroke-width='2px' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M36.909,14.744 L37.502,22.169 L30.364,21.775 '/%3e%3c/svg%3e"); background-size: 100% 100%; display: inline-block; width: 27px; height: 27px; position: absolute; right: 20px; top: -3px}
.real-time-cal-area .step strong em { font-size: 24px; font-weight: bold}
.real-time-cal-area table thead tr th em { color: #555; font-size: 14px; line-height: 14px}
.real-time-cal-area table thead tr th:first-child em { color: #e63333}
.real-time-cal-area table thead tr th:last-child em { color: #2086cd}
.real-time-cal-area table tbody tr td { text-align: center; padding: 5px 0; font-size: 15px; line-height: 15px; color: #ccc}
.real-time-cal-area table tbody tr td div { width: 50px; height: 50px; margin: 0 auto; text-align: center; padding-top: 10px; position: relative}
.real-time-cal-area table tbody tr td em { display: block; font-size: 15px; line-height: 15px; letter-spacing: 0}
.real-time-cal-area table tbody tr td span { display: block; font-size: 11px; line-height: 11px; padding-top: 5px; color: #555; letter-spacing: 0}
.real-time-cal-area table tbody tr td.now { position: relative}
.real-time-cal-area table tbody tr td.now div::after { content: ""; position: absolute; right: 8px; top: 5px; width: 5px; height: 5px; background-color: #e63333; border-radius: 50%}
.real-time-cal-area table tbody tr td.disabled { cursor: default}
.real-time-cal-area table tbody tr td.disabled em { color: #ccc}
.real-time-cal-area table tbody tr td.disabled span { color: #999}
.real-time-cal-area table tbody tr td.active div { background-color: #e63333; border-radius: 100px}
.real-time-cal-area table tbody tr td.active em, .real-time-cal-area table tbody tr td.active span { color: #fff}
.reservation-status { background-color: #f5f5f5; padding: 40px 20px 55px; position: relative}
.reservation-status .l-area ul li i.icon-fs-1 { border: 1px #33aeb6 solid; background-color: #fff}
.reservation-status .l-area ul li i.icon-fs-1::after { display: none}
.reservation-status .l-area ul li i.icon-fs-3 { position: relative; background: #ddd; border: 1px solid #ccc}
.reservation-status .l-area ul li i.icon-fs-3::after { content: ""; position: absolute; right: 2px; top: 2px; width: 3px; height: 3px; background-color: #e63333; border-radius: 50%}
.reservation-status h2 { font-size: 16px; line-height: 16px; font-weight: bold; margin-bottom: 10px}
.reservation-status .course { padding: 15px 0; border-bottom: 1px #ddd solid}
.reservation-status .course:last-child { border-bottom: none; padding-bottom: 0}
.reservation-status .course li { margin-bottom: 7px}
.reservation-status .course li:after { content: ""; display: block; clear: both}
.reservation-status .course li:last-child { margin-bottom: 0}
.reservation-status .course li strong { float: left; display: block; padding-top: 10px; font-size: 15px}
.reservation-status .course li strong span { font-size: 14px; color: #777}
.reservation-status .course li>div { float: right}
.reservation-status .course li>div>em { color: #555; font-size: 14px; line-height: 14px; display: inline-block; margin-right: 15px}
.reservation-status .course li>div button { width: 77px; text-align: center; border: 1px #33aeb6 solid; background-color: #fff; border-radius: 100px; padding: 8px 0}
.reservation-status .course li>div button em { color: #33aeb6}
.reservation-status .course li>div button[disabled] { border: 1px #ccc solid; background-color: #eee}
.reservation-status .course li>div button[disabled] em { color: #999}
.reservation-status .course li>div button.wait-btn { position: relative; background: #ddd; border: 1px solid #ccc}
.reservation-status .course li>div button.wait-btn em { color: #999}
.reservation-status .course li>div button.wait-btn::after { content: ""; position: absolute; right: 8px; top: 8px; width: 5px; height: 5px; background-color: #e63333; border-radius: 50%}
.reservation-status .course li>div .team { width: 77px; text-align: center; padding: 10px 0; display: inline-block; color: #999}
.templ-schedule-reservation { background-color: #2e477e; position: fixed; top: 50px; left: 0; right: 0; min-height: 75px; z-index: 20}
.templ-schedule-reservation::after { content: ""; background: url(../image/reservation-bg.png) no-repeat left top; background-size: 100% 100%; width: 120px; height: 75px; position: absolute; right: 85px; top: 0}
.templ-schedule-reservation ul { position: relative; z-index: 10}
.templ-schedule-reservation ul:after { content: ""; display: block; clear: both}
.templ-schedule-reservation ul li { float: left; height: 75px; position: relative; overflow: hidden}
.templ-schedule-reservation ul li:first-child:nth-last-child(3), .templ-schedule-reservation ul li:first-child:nth-last-child(3)~li { width: 33.33333333%}
.templ-schedule-reservation ul li::after { content: ""; border-right: 1px #465d91 solid; position: absolute; top: 0; bottom: 0; right: 0}
.templ-schedule-reservation ul li>em { display: block; font-size: 15px; line-height: 75px; color: #fff; text-align: center}
.templ-schedule-reservation ul li div { padding: 20px 0 0 20px; position: relative}
.templ-schedule-reservation ul li div::after { content: ""; background: url(../image/rec-t.png) no-repeat left top; background-size: 100% 100%; width: 23px; height: 23px; position: absolute; right: 10px; top: 10px}
.templ-schedule-reservation ul li div>span { font-size: 11px; line-height: 11px; color: #fff; opacity: .5; display: block; padding-bottom: 10px}
.templ-schedule-reservation ul li div>strong { font-size: 15px; line-height: 15px; color: #fff}
.templ-schedule-reservation ul li div>strong em { font-size: 12px; line-height: 12px; display: block; color: #fff}
.templ-schedule-reservation ul li div>strong em:first-child { padding-bottom: 2px}
.templ-schedule-reservation.package-reservation { background-image: linear-gradient(90deg, #314b85 50%, #2e477e)}
.templ-schedule-reservation.package-reservation::after { background-image: url("../image/package-reservation-bg.png"); width: 135.5px; height: 131px; right: 42px}
.templ-schedule-reservation.package-reservation ul li { height: 65.5px}
.templ-schedule-reservation.package-reservation ul li:first-child:nth-last-child(4), .templ-schedule-reservation.package-reservation ul li:first-child:nth-last-child(4)~li { width: 50%}
.templ-schedule-reservation.package-reservation ul li::before { content: ""; border-top: 1px #465d91 solid; position: absolute; top: 0; right: 0; left: 0}
.templ-schedule-reservation.package-reservation ul li:nth-child(-n+2):before { display: none}
.templ-schedule-reservation.package-reservation ul li>em { line-height: 65.5px}
.templ-schedule-reservation.package-reservation ul li div { padding: 14px 20px 0}
.templ-schedule-reservation.package-reservation ul li div>strong { display: block; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden}
.mobile-reservation .filter-area .l-area { position: static}
.mobile-reservation .filter-area .l-area .select-box { display: inline-block}
.mobile-reservation .filter-area .l-area .filter-btn-box { display: inline-block; padding-left: 23px; vertical-align: bottom}
.mobile-reservation .filter-area .l-area .filter-btn-box .btn-filter { padding: 0}
.mobile-reservation .filter-area .r-area .total { margin-top: 9px}
.mobile-reservation .join-reservation { padding: 10px 20px 50px}
.mobile-reservation .join-reservation .hr { margin-right: -20px; margin-left: -20px}
.mobile-reservation .join-info-area { padding: 0; border-bottom: 0; background-color: rgba(0, 0, 0, 0)}
.mobile-reservation .join-list-contents { padding-top: 5px}
.mobile-reservation .join-list-wrap .no-data-box { margin-top: 15px}
.mobile-reservation .join-list>li { float: none; width: 100%}
.mobile-reservation .join-list>li .join-thumbnail { padding: 25px 25px 25px}
.mobile-reservation .join-list>li .join-thumbnail .item { padding-left: 0}
.mobile-reservation .join-list>li .join-thumbnail .item strong { font-size: 17px; line-height: 20px}
.mobile-reservation .join-list>li .join-thumbnail .item span { font-size: 13px; line-height: 13px}
.mobile-reservation .join-list>li .join-thumbnail .users-area { padding-top: 15px}
.mobile-reservation .join-list>li .join-thumbnail .users-area .user { width: 40px; height: 40px; border: 1px #fff solid}
.mobile-reservation .join-list>li .join-thumbnail .users-area .user img { width: 38px; height: 38px}
.mobile-reservation .join-list>li .join-thumbnail .count { right: 25px; bottom: 36px; color: #555}
.mobile-reservation .badge-recruit { padding: 3px 11px 4px 8px}
.mobile-reservation .badge-recruit:before { border-right: 6px solid rgba(0, 0, 0, 0)}
.mobile-reservation .badge-recruit .text { font-size: 11px; line-height: 11px}
.mobile-reservation .join-view-contents { padding: 40px 0 0; border-bottom: 0}
.mobile-reservation .join-view-contents .join-view-time { background-color: #eee; text-align: center; margin: -50px -20px 40px; padding: 12px 0}
.mobile-reservation .join-view-contents .join-view-time span { color: #555; font-weight: bold}
.mobile-reservation .join-view-contents .join-view-time span::before { content: ""; background-image: url("../image/icon-join-time-mobile.png"); background-size: 100% 100%; display: inline-block; width: 19px; height: 18px; vertical-align: -5px; margin-right: 6px}
.mobile-reservation .join-view-contents .join-view-time em { color: #33aeb6; font-weight: bold; display: inline-block; padding-left: 10px}
.mobile-reservation .join-view-contents .green-fee-area h3 { margin: 0 0 4px; font-weight: 400; color: #777}
.mobile-reservation .join-view-contents .green-fee-area .select-box em { font-weight: 700; font-size: 15px; line-height: 15px; color: #000}
.mobile-reservation .join-view-contents .green-fee-area .price { margin-top: 15px; text-align: right}
.mobile-reservation .join-view-contents .green-fee-area .price .discount { position: relative; margin-right: 13px; padding: 0 1px; font-size: 12px; line-height: 12px; color: #999}
.mobile-reservation .join-view-contents .green-fee-area .price .discount:after { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: #ccc; content: ""}
.mobile-reservation .join-view-contents .green-fee-area .price .discount em { font-size: 12px; line-height: 12px; color: inherit}
.mobile-reservation .join-view-contents .green-fee-area .price .sell { font-size: 17px; line-height: 17px}
.mobile-reservation .join-view-contents .green-fee-area .price .sell em { font-weight: 700; font-size: inherit; line-height: inherit}
.mobile-reservation .join-view-contents .join-info-list-area h3 { margin: 40px 0 0}
.mobile-reservation .join-view-contents .join-info-list-area .templ-type-infolist-3 ul { margin: 20px 0 0}
.mobile-reservation .join-view-contents .join-info-list-area .templ-type-infolist-3 ul li { padding: 0 0 0 10px}
.mobile-reservation .join-view-contents .join-info-list-area .templ-type-infolist-3 ul li:before { position: absolute; top: 3px; left: 0}
.mobile-reservation .join-view-contents .join-users-area { margin: 45px -20px 0; padding: 50px 20px 15px; background-color: #f5f5f5}
.mobile-reservation .join-view-contents .join-users-area>ul>li { margin-bottom: 16px}
.mobile-reservation .join-view-contents .join-users-area>ul>li:last-child { margin-bottom: 0}
.mobile-reservation .join-view-contents .join-users-area .user-box { display: table; width: 100%; padding: 24px; border: 1px dashed #ddd; border-radius: 10px; background-color: #fff}
.mobile-reservation .join-view-contents .join-users-area .user-box:last-child { margin-bottom: 0}
.mobile-reservation .join-view-contents .join-users-area .user-box .user { position: relative; display: table-cell; width: 65px; height: 65px; background: url("../image/join-user-none.png") no-repeat 0 0; background-size: 100%}
.mobile-reservation .join-view-contents .join-users-area .user-box .user img { width: 100%; height: 100%}
.mobile-reservation .join-view-contents .join-users-area .user-box .user .int { position: absolute; bottom: -10px; left: calc(50% - 23px); width: 46px; height: 16px; padding: 3px 0; border-radius: 8px; background-color: #33aeb6; text-align: center}
.mobile-reservation .join-view-contents .join-users-area .user-box .user .int i { display: block; font-size: 10px; line-height: 10px; color: #fff}
.mobile-reservation .join-view-contents .join-users-area .user-box .user-text { display: table-cell; padding-left: 25px; vertical-align: middle}
.mobile-reservation .join-view-contents .join-users-area .user-box .user-text li { font-size: 14px; line-height: 14px; color: #777}
.mobile-reservation .join-view-contents .join-users-area .user-box .user-text li.name { margin-bottom: 12px; font-size: 16px; line-height: 16px; color: #000}
@media screen and (max-width: 768px){
 .mobile-reservation .join-view-contents .join-users-area .user-box .user-text li.name { font-size: 14px; line-height: 14px}
 }
.mobile-reservation .join-view-contents .join-users-area .join-users-desc { position: relative; margin-top: 15px; padding-left: 7px; line-height: 19px; color: #555}
.mobile-reservation .join-view-contents .join-users-area .join-users-desc:before { position: absolute; top: 3px; left: 0; content: "*"}
.mobile-reservation .btn-join-view { margin: 0 -20px -50px; padding: 0 20px 25px; background-color: #f5f5f5; text-align: right}
.mobile-reservation .btn-join-view .reset-medium { width: 120px}
.mobile-reservation .btn-join-view .reset-medium em { font-size: 15px; line-height: 15px}
.join-status-top { position: fixed; top: 50px; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 140px; padding: 31px 0; background-image: linear-gradient(90deg, #314b85 50%, #2e477e); text-align: center}
.join-status-top:before { position: absolute; top: 0; right: 31px; width: 150px; height: 140px; background: url("../image/join-reservation-view-bg.png") no-repeat left top; background-size: 100% 100%; content: ""}
.join-status-top .badge { position: relative; z-index: 10; margin-bottom: 12px}
.join-status-top .status-text { position: relative; z-index: 10; font-size: 17px; line-height: 23px}
.join-status-top .status-text .text { color: #fff}
.join-status-top+.fix-area-contents { padding-top: 140px}
.join-use-info-area .use-info-box { margin: 0 -20px; padding: 50px 20px; border-top: 1px solid #eee}
.join-use-info-area .use-info-box:first-child { padding-top: 0; border-top: 0}
.join-use-info-area .use-info-box:last-child { padding-bottom: 0}
.join-use-info-area .use-info-box .title { font-size: 24px; line-height: 24px}
.join-use-info-area .use-info-box .reservation-process { margin: 30px 0 0}
.join-use-info-area .use-info-box .reservation-process:after { content: ""; display: block; clear: both}
.join-use-info-area .use-info-box .reservation-process li { position: relative; float: left; width: 25%; padding-top: 50px; text-align: center}
.join-use-info-area .use-info-box .reservation-process li .icon { position: absolute; top: 0; left: 1px; width: 100%; height: 39px}
.join-use-info-area .use-info-box .reservation-process li .icon i { vertical-align: middle}
.join-use-info-area .use-info-box .reservation-process li .icon:after { display: inline-block; height: 100%; vertical-align: middle; content: ""}
.join-use-info-area .use-info-box .reservation-process li .number { display: block; font-weight: 700; font-size: 15px; line-height: 15px; color: #33aeb6}
.join-use-info-area .use-info-box .reservation-process li .text { display: block; margin-top: 10px; font-size: 15px; line-height: 15px}
.custom-search-area { margin: 0 -20px}
.custom-search-area .custom-search-box { padding: 30px 20px; border-top: 1px solid #eee}
.custom-search-area .custom-search-box:first-child { padding-top: 0; border-top: 0}
.custom-search-area .custom-search-box .title { display: block; margin-bottom: 15px; font-weight: 700; font-size: 16px; line-height: 16px}
@media screen and (max-width: 768px){
 .custom-search-area .custom-search-box .title { font-size: 14px; line-height: 14px}
 }
.custom-search-area .fieldset .select-box em { border-bottom-width: 1px}
.custom-search-area .fieldset .date-picker-wrap { display: table; width: 100%; margin-top: 20px}
.custom-search-area .fieldset .date-picker-wrap .date-picker, .custom-search-area .fieldset .date-picker-wrap .trem { display: table-cell}
.custom-search-area .fieldset .date-picker-wrap .trem { width: 35px}
.custom-search-area .checkbox-fieldset:after { content: ""; display: block; clear: both}
.custom-search-area .checkbox-fieldset .checkbox-box { float: left; width: 33.33%; margin-top: 10px}
.custom-search-area .checkbox-fieldset .checkbox-box:nth-child(-n+3) { margin-top: 0}
.custom-search-area .checkbox-fieldset .checkbox-box:nth-child(3n+1) { clear: left}
.mobile-reservation .package-area { padding: 22px 20px 0}
.mobile-reservation .schedule-package>ul>li { margin-bottom: 30px}
.mobile-reservation .schedule-package>ul>li:last-child { margin-bottom: 0}
.mobile-reservation .schedule-package .package-thumbnail { border: 1px solid #efefef; box-shadow: 0 12px 12px rgba(0, 0, 0, .04)}
.mobile-reservation .schedule-package .package-image { position: relative; display: block}
.mobile-reservation .schedule-package .package-image img { width: 100%}
.mobile-reservation .schedule-package .package-image .event-badge { position: absolute; left: 0; top: 0; font-size: 0}
.mobile-reservation .schedule-package .package-image .event-badge span { display: inline-block; margin-left: 1px; padding: 0 10px; line-height: 35px; border: 0; font-size: 12px; color: #fff; background-color: rgba(0, 0, 0, .5)}
.mobile-reservation .schedule-package .package-image .event-badge span:first-child { margin-left: 0}
.mobile-reservation .schedule-package .package-image .event-badge .pictogram-box { margin-left: 1px; display: inline-block; font-size: 0; line-height: 1; vertical-align: top}
.mobile-reservation .schedule-package .package-image .event-badge .pictogram-box .ico-picoto-nor { padding: 0; width: 38px; height: 35px; background: rgba(0, 0, 0, .5)}
.mobile-reservation .schedule-package .package-content { padding: 20px 20px 30px}
.mobile-reservation .schedule-package .package-content .package-item a { position: relative; display: inline-block; max-width: 100%; margin-bottom: 7px; padding-right: 35px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; font-weight: 700; font-size: 18px; line-height: 25px}
.mobile-reservation .schedule-package .package-content .package-item a::after { position: absolute; top: 0; right: 0; width: 25px; height: 25px; border-radius: 100px; background: #eee url("../image/icon-search.png") no-repeat 50% 50%; background-size: 12px 12px; content: ""}
.mobile-reservation .schedule-package .package-content .package-item span { display: block; line-height: 22px}
.mobile-reservation .schedule-package .package-content .package-item span .dl-content { margin-top: 26px}
.mobile-reservation .schedule-package .package-content .package-item span .dl-content dt { font-weight: 700}
.mobile-reservation .schedule-package .package-content .package-item span .dl-content .hidden { display: none}
.mobile-reservation .schedule-package .package-content .package-item span .caution { margin-top: 11px; font-size: 14px; line-height: 20px}
.mobile-reservation .schedule-package .package-content .package-item em { display: block; margin-top: 10px; font-size: 11px; line-height: 22px; color: #777}
.mobile-reservation .schedule-package .package-content .package-item em+em { margin-top: -4px}
.mobile-reservation .schedule-package .package-content .package-price { margin-top: 11px; font-size: 18px; line-height: 20px; color: #da291c; text-align: right}
.mobile-reservation .schedule-package .package-content .package-price em { margin-right: 4px; font-weight: 700; font-size: 20px; line-height: inherit; color: inherit}
.mobile-reservation .schedule-package .package-content .package-price .dutch-price { font-size: 14px; line-height: 14px; margin-right: 10px; color: #777}
.mobile-reservation .schedule-package .package-content .package-price .dutch-price em { font-size: 14px; line-height: 14px; margin-right: 1px; color: #777; font-weight: normal}
.mobile-reservation .schedule-package .package-content .button-medium { display: block; margin-top: 20px}
.mobile-reservation.mobile-package .schedule-contents { padding-top: 131px}
.mobile-reservation.mobile-package .fix-area-contents { padding-top: 131px}
.package-info-wrap .title { display: block; margin-bottom: 10px; font-size: 20px; line-height: 26px}
.package-info-wrap .text { display: block; font-size: 15px; line-height: 20px; color: #33aeb6}
.package-info-wrap .content-box { margin-top: 27px; padding: 25px 15px; border-top: 1px solid #000; border-bottom: 1px solid #eee; font-size: 15px; line-height: 20px}
.package-info-wrap .content-box * { font-size: inherit; line-height: inherit}
.package-info-wrap .content-box .templ-type-infolist-1 li:last-child { margin-bottom: 0}
.package-info-wrap .small-text { margin-top: 15px; line-height: 19px; color: #777}