@charset "UTF-8";

/* 메인페이지 스타일 */
.main-banner {overflow:hidden; width: 100%; height: 865px;}
.main-banner-list {list-style:none;padding:0;margin:0;}
.main-banner-item {width:100%;overflow:hidden;}
.main-banner-image {width:100%;height:100%;object-fit:cover;}

.main-banner-plaintext {position: relative;top: -100%;width: calc(100% - 40px); max-width:1280px;margin:0 auto;z-index:1;word-break: keep-all;}
.main-banner-plaintext .main-banner-text {margin-top:355px;}
.main-banner-plaintext .main-banner-text .text-top {font-family: "Red Hat Display";color: #FFFFFF;font-size: 4.75rem;font-weight: 800;}
.main-banner-plaintext .main-banner-text .text-mid {font-family: "Pretendard";color: #FFFFFF;font-size: 1.6rem;font-weight: 500; margin-top: 30px;}
.main-banner-plaintext .main-banner-text .text-bot {font-family: "Pretendard";color: #FFFFFF;font-size: 1.6rem;font-weight: 500; margin-top: 20px;}

.main-banner-link:hover {cursor:pointer;}

.main-banner-overlap {position:relative;top:-70px; margin:0 auto;z-index:1;width:fit-content;text-align:center;}
.main-banner-indicator {}
.main-banner-indicator .swiper-pagination-bullet {display:inline-block;width:10px;height:10px;padding:8px;border-radius:50%;border:1px solid transparent;background-color: #FFFFFF;vertical-align:top;opacity:1;background-clip: content-box;margin:0 2px !important;}
.main-banner-indicator .swiper-pagination-bullet:hover {cursor: pointer;}
.main-banner-indicator .swiper-pagination-bullet-active {border-color: #FFFFFF;}

@media screen and (max-width:1024px) {

}
@media screen and (max-width:768px) {
    .main-banner { height: 360px;}
    .main-banner-plaintext .main-banner-text {margin-top:140px;}
    .main-banner-plaintext .main-banner-text .text-top {font-size: 2.25rem;}
    .main-banner-plaintext .main-banner-text .text-mid {font-size: 1.25rem;margin-top: 10px;}
    .main-banner-plaintext .main-banner-text .text-bot {font-size: 1.25rem;margin-top: 5px;}
    .main-banner-overlap {top:-45px;}
    .main-banner-indicator .swiper-pagination-bullet {width:8px;height:8px;padding:6px;}
}

@media screen and (max-width:480px) {
    .main-banner-plaintext .main-banner-text .text-top {font-size: 2rem;}
    .main-banner-plaintext .main-banner-text .text-mid {font-size: 1.1rem;margin-top: 8px;}
    .main-banner-plaintext .main-banner-text .text-bot {font-size: 1.1rem;margin-top: 4px;}
}

@media screen and (max-width:320px) {

}



@keyframes ani_font_deco {
    0% {background-position-x: 0;}
    100%{background-position-x: calc(-100vw - 160px);}
}

.main_title {width:200px;margin-left:calc((100% - 1680px)/2);color: #965841;font-size: 1.5rem;font-weight: 800;line-height:30px;}
.main_title:hover {cursor:pointer;opacity:0.9;}
.main_contents_box {position: relative;top:-36px;}
.main_contents_title {color: #222;font-size: 2.75rem;font-weight: 700;margin-bottom: 37px;margin-top:0;}
.main_contents_ex {font-size: 1.25rem;line-height: 30px;}
.main_contents_ex span{display: block;}

.jhorse_club {position:relative; padding-top:90px;box-sizing: border-box;overflow:hidden;}
.jhorse_club_contents {margin-top: 66px;padding-bottom:160px;}
.jhorse_club_contents ul{min-width:1200px;width:calc(50vw - 50% + 100%);display: flex;flex-wrap: nowrap;overflow:hidden;}
.jhorse_club_img_box {position: relative;margin-right: 32px;width: 377px;overflow: hidden;transition: all 0.3s;}
.jhorse_club_img_box:last-child {margin-right: 0;}
.jhorse_club_img {width: 100%; height: 100%;-webkit-filter:grayscale(100%) brightness(80%) sepia(12%); filter: grayscale(100%) brightness(80%) sepia(12%);}
.jhorse_club_img:hover {-webkit-filter:unset;filter:unset;}
.jhorse_club_txt {position: absolute;left: 32px; bottom: 18px;color: #FFF;font-size: 22px;font-weight: 700;}
.jhorse_club_img_box:hover {-webkit-transform: scale(1.03);transform: scale(1.03);}
.jhorse_club_nature {height: 287px;}
.jhorse_club_nature_img {background: url('/images/jhorse/jhorse_club_nature_img_color.png');}
.jhorse_club_experience {height: 417px;}
.jhorse_club_experience_img {background: url('/images/jhorse/jhorse_club_experience_img_color.png');}
.jhorse_club_challenge {height: 361px;}
.jhorse_club_challenge_img {background: url('/images/jhorse/jhorse_club_challenge_img_color.png');}
.jhorse_club_consensus {height: 510px;}
.jhorse_club_consensus_img {background: url('/images/jhorse/jhorse_club_consensus_img_color.png');}
.full-overlay {position:relative;width:100%;height:0;top: -181px;z-index:-1;overflow-x:clip;overflow-y:visible;}
.font_deco {position: relative;height:181px;animation: ani_font_deco 15s linear infinite;background:url("/images/J_HORSE_CLUB.png") repeat-x 0 / MIN(calc(100% + 450px), 2430px);}

.program {position: relative;overflow:hidden;}
.program p {margin:0;padding:0;}
.program_contents_first {width: 100%; height: 839px;background: url('/images/jhorse/program_bg.png') center /cover no-repeat;color: #FFF;}
.program_text_box {position: relative;padding-top: 209px;}
.program_title {font-size: 44px;font-weight: 800;line-height: 60px;margin-bottom: 22px;}
.program_text {font-size: 18px;font-weight: 500;line-height: 30px;}
.program_btn {width: 164px;height: 50px;border-radius: 31px;border: 1px solid #FFF;margin-top: 54px;font-size: 18px;font-weight: 700;line-height: 50px;text-align: center;cursor: pointer;transition: all 0.3s;}
.program_btn:hover {background: #fff;color: #222;}
.program_arrow_box {width: 1280px;position: absolute;top: 50%; left: 50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.program_arrow {position: relative;}
.program_arrow_left {width: 65px;position: absolute;top: 0; left: -185px;cursor: pointer;}
.program_arrow_left img {width: 100%; height: auto;}
.program_arrow_right {width: 65px;position: absolute;top: 0; right: -185px;cursor: pointer;}
.program_arrow_right img {width: 100%; height: auto;}


.facility {background: #F8F8F8;padding: 150px 0; box-sizing: border-box;overflow: hidden;}
.facility_contents {margin-top: 80px;}
.facility_contents .facility-list {height:480px;}
.facility_contents .facility-list .facility_contents_item {transition: all 0.3s;flex-shrink: unset;}
.facility_contents .facility-list .facility_contents_item a {height:100%;width:100%;position: absolute;}
.facility_contents .facility-list .facility_contents_item.swiper-slide-active {cursor:pointer;}
.facility_img {position: relative;width: 100%;height: 100%;object-fit: cover;-webkit-filter: brightness(0.5);filter:brightness(0.5);}
.facility_contents_item.swiper-slide-active .facility_img {-webkit-filter: brightness(0.9);filter:brightness(0.9);}
.facility_txt {position: relative;top: -50%;left:50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff;font-size: 24px;font-weight: 600;text-align:center;transition: all 0.3s;line-height:40px;}
.facility_contents .facility-list .facility_contents_item.swiper-slide-active .facility_txt {left:10%;text-align:left;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width:80%;}
.facility_icon {display: none;float:right;}
.facility_contents .facility-list .facility_contents_item.swiper-slide-active .facility_icon {display:inline-block;}

.guide {position: relative;padding: 150px 0; box-sizing: border-box;overflow: hidden;}
.notice_info_box {display: flex;flex-wrap: nowrap;justify-content: space-between;}
.notice_info_title {color: #222;font-size: 36px;font-weight: 700;margin-bottom: 39px;margin-top:0;}
.main_notice, .main_info {width:45%;}

.notice-board {}
.notice_item {height: 32px;overflow: hidden;cursor: pointer;margin-bottom: 15px;line-height: 32px;}
.notice_item:hover {border-bottom: 1px solid #666;box-sizing: border-box;}
.notice_list_title {display: inline-block;width: calc(100% - 94px);color: #333;font-size: 18px;font-weight: 400;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;vertical-align:top;}
.notice_list_day {display:inline-block;width: 90px;color: #666;font-size: 15px;font-weight: 400;vertical-align:top;text-align:right;}

.info_contents {display: flex;flex-wrap: nowrap;justify-content: space-between;}
.info_contents_txt {color: #333;font-size: 18px;font-weight: 400;line-height: 30px;}
.info_contents_circle_box {overflow: hidden;height:125px;}
.info_contents_circle {display: inline-block;width: 120px;aspect-ratio:1/1;line-height: 120px;border: 1px solid #47691F;border-radius: 50%;text-align: center; cursor: pointer;color: #5E7B3B;font-size: 18px;font-weight: 600;box-sizing: border-box;}
.info_contents_circle:first-child {margin-right:35px;}
.info_contents_circle:hover {border: 2px solid #47691F;}
.info_contents_txt span {display: block;}

@property --p {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}
.chart-circle {display: inline-block;}
.chart-circle:first-child {margin-right:35px;}
.chart-circle {width: var(--size); aspect-ratio: 1;transition: --p 0.3s linear;}
.chart-circle {--p: 0%; --size: 120px;border-radius: 50%;background: conic-gradient( #965841, #965841 var(--p), #517724 0);position: relative;}
.chart-circle:hover { --p: 100%; cursor:pointer;}
.chart-circle::before {position: absolute;inset: 2px;content:'';text-align: center;padding: 10px;line-height:96px;border-radius: inherit;background: white;color:#5E7B3B;font-weight:600;font-size:18px;}
.chart-circle:hover::before {text-decoration: underline;font-weight:700;color:#965841;}
.chart-circle.use::before {content:'이용안내';}
.chart-circle.info::before {content:'클럽소식';}


@media screen and (min-width:1024px) {
    .facility_contents .facility-list .facility_contents_item {width: 25% !important;}
    .facility_contents .facility-list .facility_contents_item.swiper-slide-active {width: 55% !important;}
}

@media screen and (max-width:1680px) {
    .jhorse_club_contents {overflow-x: auto;}
    .jhorse_club_contents ul{width:100%;}
    .main_title {max-width:1280px;width: calc(100% - 40px); margin:0 auto 20px;}
    .main_contents_box {top:0;}
    .font_deco {animation-duration:12s;}
}

@media screen and (max-width:1200px) {
    .main_notice, .main_info {width:48%;}
    .info_contents_circle:first-child {margin-right:25px;}
}

@media screen and (max-width:1024px) {
    .main_contents_title {font-size:2.5rem;}
    .program_title {font-size: 36px;}
    .facility {position:relative; padding-top:0; padding-bottom:120px; margin-top:-200px; z-index: 1;background-color: transparent;}
    .facility_contents {margin-top:0;}
    .facility_contents .facility-list {height:410px;}
    .facility_contents .facility-list .facility_contents_item {flex-shrink:0;width:100%;transition-property: transform;}
    .facility_contents .facility-list .facility_contents_item.active {width:100%;transition-property: transform;}
    .facility_img {-webkit-filter: brightness(0.9);filter:brightness(0.9);}
    .facility_txt {left:10%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);font-size: 18px;text-align:left;width:80%;}
    .facility_icon {display: inline-block;}
    .font_deco {animation-duration:10s;}
    .guide {padding:60px 0;background-color:#F8F8F8;}
    .notice_info_box {display: block;}
    .notice_info_title {font-size: 2rem;}
    .main_notice, .main_info {width:100%;margin-bottom:60px;}

    .chart-circle::before {background-color:#F8F8F8;}
}

@media screen and (max-width:768px) {
    .main_title {width: calc(100% - 30px);}
    .main_contents_title {font-size:1.8rem;}
    .main_contents_title span {display:block;}

    .full-overlay {display:none;}
    .jhorse_club_contents {padding-bottom:60px;margin-top:25px;overflow:hidden;}
    .jhorse_club_contents ul {display:block;width:100%;min-width:unset;}
    .jhorse_club_img_box {width:100%;margin:0 auto 10px;height:285px;}
    .jhorse_club_img {background-size: cover !important;-webkit-filter: unset;filter:unset;}
    .jhorse_club_nature_img {background: url('/images/jhorse/jhorse_club_nature_img_mo.png');}
    .jhorse_club_experience_img {background: url('/images/jhorse/jhorse_club_experience_img_mo.png');}
    .jhorse_club_challenge_img {background: url('/images/jhorse/jhorse_club_challenge_img_mo.png');}
    .jhorse_club_consensus_img {background: url('/images/jhorse/jhorse_club_consensus_img_mo.png');}

    .program_contents_first {height: 480px;}
    .program_text_box {padding-top:165px;}
    .program_title {font-size:26px;line-height: 38px;margin-bottom:7px;}
    .program_title span, .program_text span {display: block;}
    .program_btn {width: 122px;height: 37px;margin-top: 33px;font-size: 15px;line-height: 37px;}

    .facility {padding-top:60px;padding-bottom:60px;margin:0;background-color:#F8F8F8;}
    .facility_contents {margin-top:30px;}
    .facility_contents .facility-list {height:220px;}

    .guide {padding:60px 0;background-color:transparent;}
    .notice_info_title {font-size: 1.8rem;margin-bottom:25px;}
    .info_contents {display: block;}
    .info_contents_txt {margin-bottom:20px;}
    .info_contents_txt span {display: inline;}
    .info_contents_circle_box {display: flex;justify-content: space-between;height: auto;}
    .info_contents_circle {width: calc(50% - 7px);height: 50px;border-radius: 30px;line-height: 50px;font-size: 16px;box-sizing: border-box;}
    .info_contents_circle:first-child {margin-right:20px;}

    .chart-circle {aspect-ratio: unset;width: calc(50% - 7px);height: 50px;border-radius: 30px;}
    .chart-circle:hover {--p:0;}
    .chart-circle:first-child {margin-right:20px;}
    .chart-circle::before {background-color:#FFFFFF;padding:5px;line-height:38px;inset:1px;}
}

@media screen and (max-width:480px) {
    .notice_info_title {margin-bottom: 10px;}
    .notice_list_title {width: 100%;font-size: 16px;}
    .notice_list_day {display: none;}
    .info_contents_circle:first-child {margin-right:15px;}
    .chart-circle:first-child {margin-right:15px;}
    .info_contents_txt {font-size:1.1rem;}
}

@media screen and (max-width:320px) {

}