@import "reset.css";

body {
    width: 100%;
    min-width: 320px;
    color: #000;
    font-family: 'Noto Sans KR', "Roboto", sans-serif !important
}

/* Layout */
header {
    box-shadow: 0 3px 16px rgba(0,0,0,.2);
    position: relative;
}
header nav + div p {
    display: none;
}

header nav li a { color: white}

/* Container */
.container {
    width: 1200px;
    margin: 0 auto;
}

/* Common */
.color-black {
    color: #000 !important;
}

.white {
    color: #fff !important;
}
.red {
    color: var(--key_green_color) !important;
}
.black {
    color: black !important;
}

.light {
    font-weight: 300 !important;
}
.regu {
    font-weight: 400 !important;
}
.med {
    font-weight: 500 !important;
}

.btn-black.sm {
    font-size: .75rem;
    font-weight: 400;
    border:1px solid #000;
    padding: 9px 17px;
    color: #000;
    display: inline-block;
    margin: 2px 0px;
    line-height: initial;
}
.btn-red.sm {
    font-size: .75rem;
    font-weight: 400;
    border:1px solid var(--key_green_color);
    padding: 9px 17px;
    color: var(--key_green_color);
    display: inline-block;
    margin: 2px 0px;
    line-height: initial;
}

.btn {
    box-sizing: border-box;
    border: 1px solid #000;
}
.btn.black {
    background: #000;
    color: #fff;
}
.bg-red {
    background-color: var(--key_green_color) !important;
}
.bg-gray {
    background-color: rgba(0,0,0,.8) !important;
}
.border-gray {
    border: 1px solid rgba(0,0,0,.8) !important;
}

/* form */
input[type=text], input[type=password] {
    /*회원가입 인풋 palceholder text size*/
    font-size: 0.75rem;
    font-weight: 300;
}

/* main */
main > .container > section {
    margin: 60px 0 0 0;
}








/* new=======================    실시간 예약 + 예약변경 페이지 시간 타임 테이블 시작    ======================= */

section.time > .all-time {
    margin: 0 0 80px;
}
section.time > .all-time > ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
section.time > .all-time > ul + p {
    height: 1px;
    background: rgba(0,0,0,.2);
}
section.time > .all-time > ul > li {
    border: 1px solid var(--key_green_color);
    border-radius: 20px;
    padding: 7px 14px;
    margin: 0px 2px;
    text-align: center;
    overflow: hidden;
}

section.time > .all-time > ul > li.active {
    color: var(--key_white_color);
    font-weight: 500;
    background-color: var(--key_green_color);
}

div.disable_realtime {
   text-align: center;
    width: 100%;
}




/* =======================    실시간 예약  + 예약변경  페이지 시간 타임 테이블 끝    ======================= */




/* =======================    실시간 예약 페이지 코스타임 테이블  + 마이페이지 예약변경 코스 타임 테이블 시작    ======================= */
/*#course-area 는 예약페이지 코스타임 테이블과 마이페이지 예약변경 코스타임 테이블 해당되도록 한다 시작*/

:root {
    --padding_realtime_timetable: 1rem;
}

li.course-tab {
    display: flex;
    width: 100%;
    flex-direction: column;
}
#course-area.course-list-wrapper {
    margin-top: 100px;
}


.realtime_header { display: flex}
.realtime_header a { flex: 1;}
.realtime_table { display: flex}
.realtime_header li { flex: 1}

.realtime_header a {
    padding: 0.5rem var(--padding_realtime_timetable);
}
/*#course-area 는 예약페이지 코스타임 테이블과 마이페이지 예약변경 코스타임 테이블만 해당되도록 한다 끝*/



.realtime_table .course-tab li {
    display: flex;
    padding : var(--padding_realtime_timetable);
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--key_lightgrey_color);
}

.course-list-wrapper > li > a {
    color: var(--key_green_color);
}

.course-list-wrapper:not(.no_after) > li::after {
    content: "";
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--key_green_color);
}


.course-list-wrapper > li:nth-child(3n) {
    margin-right: 0;
}

.course-list-wrapper > li > ul {
    margin: 22px 0 0;
}

/*예약변경 페이지 + 예약변경 모달 페이지*/
.course-list-wrapper > li > ul > li {
    color: black;
    font-size: 1rem;
    padding: 10px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
}

.course-list-wrapper > li > ul > li:nth-child(n+2) {
    border-top: 1px solid rgba(0, 0, 0, .2);
}

.course-list-wrapper .btn_box {
    display: flex;
    align-items: center;
}

/*예약변경 페이지에서 상품안내와 예약변경 버튼*/
.course-list-wrapper .golf_able_btn {
    display: block;
    width: 60px;
    height: 34px;
    line-height: 34px;
    border: 1px solid var(--key_green_color);
    box-sizing: border-box;
    color: var(--key_green_color);
    font-size: 0.75rem;
    font-weight: 400;
    font-style: normal;
    margin : 3px;
    text-align: center;
}

/*예약페이지만 적용*/
.reserv_container .course-list-wrapper > li > ul > li a:nth-of-type(2) {
    margin: 0 2px 0 0;
}

.course-list-wrapper > li > ul > li > span > em {
    font-weight: 500;
    font-style: normal;
}


#course-area.course-list-wrapper > .realtime_table > li > ul > li > span > em.strike {
    font-size: 0.75rem;
    padding: 0 10px;
    text-decoration: line-through;
    color: rgba(0, 0, 0, .3);
    font-weight: 300;
}


.course-list-wrapper > li > ul > li > span > em.c-cost { /* 할인가격 기능 추가된 후 제거 */
    padding: 0 16px;
}

.course-list-wrapper > li > ul > li > span > em.nor {
    font-weight: 300;
    font-style: normal;
}
/* =======================    실시간 예약 페이지 코스타임 테이블 끝    ======================= */






/* =======================    대기예약 페이지 인포공지 영역 + 희망대기 영역 시작    ======================= */
.waiting-wrapper .info_wait_section > h3 {
    padding: 80px 0 20px;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 35px;
    border-bottom: 1px solid rgba(0,0,0,.8);
}


.waiting-wrapper .waiting .wait_wrapper {
    display: flex;
    justify-content: space-between;
    padding: 80px 0 0;
    margin: 0px 40px 40px 40px;
}

.waiting-wrapper .waiting .wait_wrapper > div {
    height: auto;
    margin: 0px 0px 50px 0;
    width: 48%;
}
/*희망시간 텍스트*/
.waiting-wrapper .waiting .wait_wrapper  h3 {
    font-size: 1.0rem;
    margin-bottom: 0.5rem;
}
/*메모 텍스트*/
.memo_sect > h3 {
    font-size: 1.0rem;
}

.waiting-wrapper .waiting .wait_wrapper > div > div {
    margin: 0px 0px 50px 0;
}
.waiting-wrapper .waiting textarea {
    border: 1px solid rgb(221, 221, 221);
    width: 100%;
    height: 80%;
    padding: 20px;
}

.pott01 {
    color: var(--key_green_color);
}
/* =======================    대기예약 페이지 인포공지 영역 + 희망대기 영역 끝    ======================= */




/* =======================     mypage modify start    ======================= */
.myreserv-mod .myReserv_title {
    margin: 64px 0 0;
}
section.myreserv-mod-reserve-info {
    border-bottom: 1px solid black;
    padding-bottom: 20px;
}
.myreserv-mod .myreserv-mod-reserve-info {
    margin: 40px 0 0;
}
.myreserv-mod .myreserv-mod-reserve-info ul li {
    height: 58px;
    line-height: 58px;
    border-top: 1px solid rgba(0,0,0,1);
}
.myreserv-mod .myreserv-mod-reserve-info ul li:nth-of-type(n+2) {
    border-top: 1px solid rgba(0,0,0,.1);
}
.myreserv-mod .myreserv-mod-reserve-info ul li span {
    display: inline-block;
}
.myreserv-mod .myreserv-mod-reserve-info ul li span:nth-of-type(1) {
    width: 120px;
}
.myreserv-mod .myreserv-mod-reserve-info ul li span input {
    width: 288px;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(0,0,0,.2);
    box-sizing: border-box;
    transform: translate(-15px, -2px);
}
.myreserv-mod .myreserv-mod-reserve-info ul li span a { /*  수정하기 버튼  */
    display: inline-block;
    width: 80px;
    height: 42px;
    line-height: 42px;
    font-weight: 400;
    font-size: .75rem;
    text-align: center;
    background: #000;
    color: #fff  !important;
}


.birth-txt {
    position: relative;
}
.birth-txt::after {
    content: "※ 생년월일 변경은 내장시 프런트에서 신분증 확인 후 변경해 드립니다.";
    position: absolute;
    top: -2px;
    right: 0;
    color: var(--key_green_color);
    font-weight: 300;
}
/* =======================     mypage modify end    ======================= */







/* =======================     customer start    ======================= */
section.board {

}
section.board > h1 {
    margin: 60px 0;
    font-size: 2rem;
    font-weight: 500;
}
section.board > .title {
    margin: 64px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section.board > .title > p:nth-of-type(1) {
    font-size: 1.5rem;
    font-weight: 500;
}
section.board > .content {
    padding: 80px 0 80px;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
section.board > .board-btn {
    margin: 40px 0 0;
    text-align: center;
}
section.board > .board-btn > a {
    display: inline-block;
    padding: 10px 60px;
    background: #000;
    color: #fff;
    text-align: center;
}

section.board .notice {
    color: #805d35;
    font-weight: bold;
}
section.board .notice-title {
    font-weight: bold;
}
/* =======================     customer end    ======================= */



section.direction .root_daum_roughmap {
    margin: 40px 0 0;
}



/* =======================   프로샵 시작 ======================= */

section.shop-section {
    margin: 60px 0 0 0;
}
section.shop-section .shop-tab {
    display: flex;
    justify-content: start;
}

section.shop-section .shop-tab > a {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    line-height: 100px;
    text-align: center;
    margin: 0 0 0 8px;
    background: rgba(0,0,0,.2);
    color: #fff;
    font-size: 1.25rem;
}

section.shop-section .shop-tab > a.active {
    background: var(--key_green_color) !important;
}

section.shop-section .shop-img {
    margin: 120px 0 120px 0;
}

/* =======================   프로샵 끝 ======================= */


/* =======================   질문 시작 ======================= */

.faq-search-container {
    margin: 2rem 0 0 0;
    display: flex;
    justify-content: center;
}
.faq-search-container > p:nth-of-type(1) {
    margin: 0 20px 0 0;
}
.faq-search-container > p:nth-of-type(1) > input {
    padding: 10px 25px;
}
table.faq .quest_icon {
    display: inline-block ;
    color : var(--key_green_color) ;
    font-weight: bold;
    margin-right: 10px
}
/* =======================   질문 끝 ======================= */









/*
===============================================================
                          아름다운 cc 기존 스타일 시작
===============================================================
*/

/**-----------아름다운 cc 클럽하우스 시작----------*/

.com01_img{width: 100%;height: 620px;
    background: url('../image/bg-img/clubhouse.png') 50% 50% no-repeat;border: 4px solid #ddd;margin-top: 10px;}

.point_txt01{font-size: 30px;color: #71541B;letter-spacing:-0.05em;}
.table_typeB thead th{background-color: #666;color: #fff;padding-left: 1rem;}
.table_typeB tbody{border-top: 2px solid #5C5C5C;}
.table_typeB td{border: 1px solid #ddd;padding: 10px;}
.table_typeB td:first-child{border-left: 0 none;}
.table_typeB td:last-child{border-right: 0 none;}
.table_typeB tbody th{border-bottom: 1px solid #ddd; border-right:1px solid #ddd; background-color:#F5F5F5;text-align: center;padding: 10px;}

@media (max-width:992px){
    .txt_info{font-size: 1rem;}
}
@media (max-width:768px){
    .txt_info{padding: 10px;}
    .txt_info a{position:static;display: inline-block;transform:none}
    .com01_img{height: 350px;}
    .point_txt01{font-size: 1.5rem;}

}

/**-----------클럽하우스 끝----------*/


/**-----------아름다운 cc 코스소개 시작----------*/

.max-img100 > img {
    max-width: 100%;
    height: auto;
}
#course01 > ul > li > strong{font-weight: bold;color: #034D42;}
#course01{text-align: center;}
.table_typeA, .table_typeB{margin-bottom: 10px;border-top: 2px solid #5C5C5C;}
.table_typeA thead{background-color: #F5F5F5;}
.table_typeA thead th{border-bottom: 1px solid #ddd;}
.table_typeA th{border-right: 1px solid #ddd;padding: 10px 0;text-align: center;}
.table_typeA th:last-child{border-right: 0 none;}
.table_typeA td{border: 1px solid #ddd;text-align: center;padding: 10px 0;position: relative;}
.table_typeA td:first-child{border-left: 0 none;}
.table_typeA td:last-child{border-right: 0 none;}
.table_typeA tbody th{border-bottom: 1px solid #ddd;background-color: #F5F5F5;}
.table_typeA button{margin: 0 1px;}


/**-----------아름다운 cc 코스소개 끝----------*/


/**-----------아름다운 cc 힐코스 시작 ----------*/
#course_hole .hole_info{padding-top: 20px;}
#course_hole .hole_info > strong{font-size: 50px;padding-right: 20px;}
#course_hole .hole_info > span{font-size: 23px;display: inline-block;color: #71541B;}
#course_hole .hole_info > i{display: inline-block;padding: 0 20px;font-size: 10px;color: #666;}
#course_hole .course_txt{font-size: 21px;color: #05816E;letter-spacing:-0.05em;}
#course_hole .hole_table{margin-top: 20px; width: 100% ;}
#course_hole .course_img > img{width:100% ;height: 304px;}
#course_hole .videowrap video{width: 100%;}

#course_hole .nav-item{width: 11.11%;}
#course_hole .nav-tabs .nav-link{border: 1px solid #cfcfcf;margin-left: -1px;border-radius:0;text-align: center;}

#course_hole .hill .nav-item.show .nav-link, .hill .nav-link.active{background-color: #ea7d25;color: #fff;}
#course_hole .lake .nav-item.show .nav-link, .lake .nav-link.active{background-color: #0891C7;color: #fff;}
#course_hole .rock .nav-item.show .nav-link, .rock .nav-link.active{background-color: #208E1E;color: #fff;}

#course01{text-align: center;}
#course01 > ul > li > strong{font-weight: bold;color: #034D42;}


/* color */
.color-black{ background-color: black;}
.color-blue{ background-color: blue;}
.color-white{background-color: #fff;}
.color-red{background-color: #dc3545;}
.color-green{background-color: green;}
.color-org{background-color:#FF6318;}
.color-gold{background-color: #FFDD00;}



.bxs-circle{
    margin-right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-position: center center;
    display: inline-block;
    background-repeat: no-repeat;
}

.bx
{
    /*font-family: 'boxicons' !important;*/
    /*font-weight: normal;*/
    /*font-style: normal;*/
    /*font-variant: normal;*/
    /*line-height: 1;*/
    /*display: inline-block;*/
    /*text-transform: none;*/
    /*speak: none;*/
    /*-webkit-font-smoothing: antialiased;*/
    /*-moz-osx-font-smoothing: grayscale;*/
}

@media (max-width:992px){
    #course_hole .course_img > img{width:100% ;height: auto}
}

@media (max-width: 768px){

    #course_hole .nav-link span {  display: none;}
    #course_hole .nav-link { padding: 0.5rem 0;}
    #course_hole .hole_info > strong{font-size: 42px;padding-right: 10px;}
    #course_hole .hole_info > span{font-size: 20px;}
    #course_hole .hole_info > i{padding: 0 10px;}
    #course_hole .hole_info > span.txt{font-size: 12px;}
    #course_hole .course_txt{font-size: 1.2rem;margin-top: 10px;}

    #course01{text-align: left;}
    #course01 > ul > li > strong{display: block;}
}
/**-----------아름다운 cc 힐코스 끝 ----------*/


/**-----------아름다운 cc 로컬룰 코스 시작 ----------*/

.point_txt02{font-family: 'Noto Serif KR', serif;font-size: 26px;color: #71541B;letter-spacing:-0.05em;}


ul.numlist{margin-left: 20px;}
ul.numlist > li{list-style-type:decimal;padding-bottom: 10px;}
ul.numlist > li > strong{display: block;color: #79211C;font-weight: 700;}
@media (max-width:768px){
    ul.numlist{margin-top: 30px;}
}

.inner-page {
    min-height: 500px;
    position: relative;
    padding: 50px 0;
}
/**-----------아름다운 cc 로컬룰 코스 끝 ----------*/



/**-----------아름다운 cc 이용안내 - 이용안내 > 골프 이용요금 / charge.php 시작----------*/

table.fee{width: 100%;border-top: 2px solid #000;margin-bottom: 10px;}
table.fee tbody th:last-child, table.fee tbody td:last-child, table.fee thead th:last-child{border-right: none;}
table.fee thead th{background-color: #342E28;color: #fff;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 10px 0;text-align: center;}
table.fee tbody th, table.fee tbody td{border: 1px solid #ddd;text-align: center;padding: 10px 0;position: relative;}
table.fee tbody th{background-color: #F5F5F5;border-left: none;}

#guide04_02{background-color: #f7f7f7;padding:20px 10px;}
#guide04_02 label{padding-right: 10px;}

#guide04_01{background-color: #f7f7f7;padding:20px 10px;}
#guide04_01 label{width: 80px;height: 40px;line-height: 40px;top: 0;}
#guide04_01 span{height: 40px;line-height: 40px;display: inline-block;}

@media (max-width:768px){
    table.fee th, table.fee td{word-wrap:break-word;letter-spacing:-0.05em;}
}

.inner-page h3, .inner-page h4{margin-top: 50px;}
.inner-page h3:first-child, .inner-page h4:first-child, .inner-page h5:first-child, .inner-page h6:first-child{margin-top: 0px;}
.inner-page.charge th {
    font-style: normal;
    font-weight: normal;
}

/**-----------아름다운 cc 이용안내 - 이용안내 > 골프 이용요금 / charge.php 끝----------*/


/**-----------아름다운 cc 이용안내 - 예약및 위약 / guide.php 시작----------*/

.inner-page.guide th {
    font-style: normal;
    font-weight: normal;
}

.inner-page.guide .fontcolor-red {
    color: red;
}

/* list */
ul.dotlist > li{position: relative;padding-left: 20px;}
ul.dotlist > li::before{display: block; content: "";width: 4px;height: 4px;background-color: #9E7E42;position: absolute;left: 6px;top: 10px;}

ul.dotlist2 > li{position: relative;padding:6px 20px;}
ul.dotlist2 > li::before{display: block; content: "";width: 4px;height: 4px;background-color: #9E7E42;position: absolute;left: 6px;top: 16px;}


ul.numlist{margin-left: 20px;}
ul.numlist > li{list-style-type:decimal;padding-bottom: 10px;}
ul.numlist > li > strong{display: block;color: #79211C;font-weight: 700;}
@media (max-width:768px){
    ul.numlist{margin-top: 30px;}
}
/**-----------아름다운 cc 이용안내 - 예약및 위약 / guide.php 끝----------*/


/**-----------아름다운 cc 코스소개 시작----------*/
.function_wrap {
    position:relative;
    padding:5.5rem 4rem 4rem;
    border:1px solid #DBDBDB;
    text-align:center;
}
.function_wrap .function_tit {
    display:inline-block;
    margin-bottom:5rem;
    color:#313131;
    letter-spacing:-0.076rem;
    line-height:2.8rem;
    font-size:1.9rem;
}
.function_wrap .function_tit b {
    display:block;
    letter-spacing:-.12rem;
    line-height:1;
    font-size:2.3rem;
    font-weight:600;
}

.function_wrap ul {
    max-width:89.8rem;
    margin:0 auto;
    text-align:left;
}
.function_wrap li {
    position:relative;
    margin-bottom:1.2rem;
    padding:1.6rem 1.5rem 1.6rem 7rem;
    background-color:#F6F6F6;
    border-radius:6rem;
    letter-spacing:-0.09rem;
    font-size:1.6rem;
    font-weight:400;
}
.function_wrap li .num {
    display:inline-block;
    position:absolute;
    top:50%;
    left:.5rem;
    width:4.6rem;
    height:4.6rem;
    background-color:#70c745;
    border-radius:50%;
    color:#fff;
    text-align: center;
    font: 500 1.6rem/4.5rem 'mtsr';
    transform:translateY(-50%);font-weight: 600;
}

/**-----------아름다운 cc 코스소개 끝----------*/
