@charset "utf-8";
/*---------------------------- contents_all ---------------------------*/
html {height: 100%;}
body {width: 100%; height: 100%;}
#wrap {width:100%; height: 100%; position: relative;}

/*------- section01 -------*/
#section-01 {
    position: relative;
    top: 0;
    width: 100%;
    height: 100vh;
}
.sec-01-slide{ overflow: hidden; position: relative;  width: 100%;  height:100vh;}
/* main silder */
.mainSwiper {width: 100%; height: 100%;}
.mainSwiper .swiper-slide {text-align: center;background: #fff;display: flex;justify-content: center;align-items: center;}
.mainSwiper .swiper-slide img {display: block;width: 100%;height: 100%; object-fit: cover;}
.sec-01-con {width: 90%;  height: 100%;  position: absolute; top: 0; transform: translateX(-50%);  left: 50%;  z-index: 1;}

.mainSwiper .swiper-slide img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: -webkit-transform 3s;
    transition: -webkit-transform 3s;
}

.mainSwiper .swiper-slide-active img {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* 수정 CSS */
.sec-01-con .swiper-pagination-bullet {width: 12px; height: 12px; opacity: 1; border: 1px solid #fff; background:rgba(255, 255, 255, 0);}
.sec-01-con .swiper-pagination-bullet-active {opacity: 1; background: #f29500;border: 1px solid #f29500;}
.sec-01-con .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {width: auto !important;}
.sec-01-con .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 8px!important;}
.silder-btn {width: 178px; height: 30px; position: absolute; z-index: 99; bottom: 39%; right: 50%; transform: translateX(50%); display: flex; justify-content: flex-end;}
.stop-play-box {height: auto; display: flex; align-items: center; justify-content: space-between; width: 30px;}
.auto-stop {margin-right: 15%;}

.main-tit {width: 100%; height: auto; font-size: 1.63rem; color: #fff; letter-spacing: -1.2px; line-height:clamp(2.25rem, 2rem + 1.25vw, 2.5rem); text-shadow: 0 3px 6px rgba(0, 0, 0, 0.32); position: absolute; top: 17%; right: 50%; transform: translateX(50%); text-align: center; word-break: keep-all;}
.main-tit b{font-size: 2rem; padding-top: 16px; display: block;}

/* weather silder */
.weather-wrap {width: 115%; height: 88px; position: absolute; bottom: 5%;  right: 50%;  transform: translateX(50%);}
.weatherbxslider {width: 100%; height: 100%;}
.weatherbxslider .swiper-slide {background-color: rgba(0, 0, 0, 0.65); border-radius: 8px;}
.mainSwweatherbxslideriper .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.sec-01-con {width: 75%;  height: 100%;  position: absolute; top: 0; transform: translateX(-50%);  left: 50%;  z-index: 10;}

/* 수정 CSS */
.weatherbxslider .swiper-button-lock {display: block;}

.weather-prev-btn {position: absolute; width: 24px; height: 100%; cursor: pointer; text-align: center; z-index: 99;}
.weather-prev-btn img {padding: 37px 8px;}
.weather-next-btn {position: absolute; width: 24px; height: 100%; cursor: pointer; right: 0; text-align: center; z-index: 99;}
.weather-next-btn img {padding: 37px 8px; display: block; margin: 0 auto;}
.weather-box {width: 78%; margin: 0 auto;top: 50%; position: absolute; right: 50%; transform: translate(50%, -50%);}
.weather-box li {display: inline; color: #fff;}
.weather-box ul:nth-child(2) {padding-top: 10px;}

.weather-box .tit {font-size: 1.125em; font-weight: 400; margin-right: 4%;}
.weather-box .temper {font-size: 1.375em; font-weight: 400; margin-right: 2%; letter-spacing: -1px;}
.weather-box .weather-img {display: inline-block; vertical-align: sub;}
.weather-box .weather-img img{height: clamp(1.5625rem, 1.125rem + 2.1875vw, 2rem);}
.weather-box .sub {font-size: 0.750em; font-weight: 200; margin-right: 3%;}
.weather-box .sub:last-child {margin-right: 0;}
.weather-box .sub span{color: #cccccc !important;}

/*------- section02 -------*/
#section-02 {
    position: relative;
    top: 0;
    width: 100%;
    height: 490px;
}
.basic-wrap {width: 100%; height: auto; margin: 0 auto;}
.sec-02-con {width: 95%; height: auto; display: flex;  justify-content: space-between; align-items: center; flex-direction: column; padding: 50px 0 30px; margin: 0 auto;}
.main-title {font-size: 1.500em; color: #000; letter-spacing: -0.8px; font-weight: 600; padding-bottom: 30px;}
.cc-list {width: 100%; text-align: center;}
.cc-list ul .on {color: #000; font-weight: 600;}
.cc-list ul li{display: inline-block; font-size: 1.125em; color: #666666; letter-spacing: -0.6px; font-weight: 500; position: relative; margin-right: 6%;}
.cc-list ul li:last-child {margin-right: 0;}
.cc-list ul li:hover{color: #000; font-weight: 600;}
.cc-list ul li:hover::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 4px;
    height: 4px;
    background-color: #000000;
    border-radius: 50%;
    transition: 0.3s;
}
.cc-list ul li:hover::before{
    content: '';
    position: absolute;
    bottom: -7px;
    width: 100%;
    height: 2px;
    background-color: #000000;
    transition: 0.3s;
}
.cc-list ul .on::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 4px;
    height: 4px;
    background-color: #000000;
    border-radius: 50%;
    transition: 0.3s;
}
.cc-list ul .on::before {
    content: '';
    position: absolute;
    bottom: -7px;
    width: 100%;
    height: 2px;
    background-color: #000000;
    transition: 0.3s;}

/* section 02 silder */
.sec-02-slide {width: 90%; height: auto;  position: absolute; transform: translateX(50%); right: 50%; }
.sec02-btn {width: 25px; height:36px;}
.sec-02-slide .swiper { width: 100%;  height: 100%;}
.main02Swiper {width: 100%; height: 100%;}
.main02Swiper .swiper-slide { width: 160px !important; background-color: #ffffff00; overflow: hidden !important;}
.main02Swiper .swiper-slide button{position: relative; display: block;}
.main02Swiper .swiper-slide button img {display: inline-block; padding-bottom: 10px; width: 160px;}
/* section 02 silder btn */
#section-02 .swiper-button-next:after, #section-02 .swiper-rtl .swiper-button-prev:after{display: none;}
#section-02 .swiper-button-prev:after, #section-02 .swiper-rtl .swiper-button-next:after{display: none;}
#section-02 .swiper-button-prev, #section-02 .swiper-button-next { position: absolute; width: 25px; height: 36px; top: 28%; z-index: 10; cursor: pointer;}
#section-02 .swiper-button-prev {background: url(/resources/images/main/sec02_prev_btn.png) no-repeat center / 25px 36px !important; left: -5%}
#section-02 .swiper-button-next {background: url(/resources/images/main/sec02_next_btn.png) no-repeat center / 25px 36px !important; right: -5%;}
/* section 02 silder list */
.main02Swiper .swiper-slide .board-con {display:block; width: 100%; width: 100%; margin: 0 auto; text-align: left;}
.main02Swiper .swiper-slide .board-con li{display:block;}
.main02Swiper .swiper-slide .board-con .sub{width: 48px; height: 24px; border-radius: 12px; font-size: 0.813em; text-align: center; letter-spacing: -0.45px; padding: 4px 0;}
.main02Swiper .swiper-slide .board-con .jeongseon{color: #009ce1; border: 1px solid #009ce1;}
.main02Swiper .swiper-slide .board-con .yeonggwang{color: #f29500; border: 1px solid #f29500;}
.main02Swiper .swiper-slide .board-con .jecheon{color: #409629; border: 1px solid #409629;}
.main02Swiper .swiper-slide .board-con .gwangsan{color: #00418e; border: 1px solid #00418e;}
.main02Swiper .swiper-slide .board-con .geochang{color: #5d370c; border: 1px solid #5d370c;}
.main02Swiper .swiper-slide .board-con .tit{font-size: 1.0em; line-height: 20px; letter-spacing: -0.6px; color: #333; padding-top: 10px; word-break: keep-all; min-height: 70px; font-weight: 600;}
.main02Swiper .swiper-slide .board-con .date{font-size: 0.750em; letter-spacing: -0.4px; color: #777; display: flex;}
.main02Swiper .swiper-slide .board-con .date img{display: inline-block; margin-right: 5px; padding-bottom: 0 !important; width: 12px;}

/*------- section03 -------*/
#section-03 {
    position: relative;
    top: 0;
    width: 100%;
    height: 560px;
}
.sec-03-con {width: 100%; height: auto; display: flex;  justify-content: space-between; align-items: center; flex-direction: column; padding: 30px 0 40px;}
/* section 03 silder */
.sec-03-slide {
    width: 90%;
    margin: auto;
    height: 308px;
    position: relative;
}
.sec-03-slide figure {
    position: relative;
    width: 100%;
    height: 100%;
}

.sec-03-slide figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}
.sec-03-slide .swiper-slide {
    height: 94% !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 11px 9px 15px -5px hwb(0deg 0% 100% / 50%);
}

.sec-03-slide .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tee-list {
    width: 90%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
}

.tee-list ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 10%;
}

.tee-list ul li {
    border-radius: 4px;
    flex: 0 0 45%;
    color: #ccc;
    font-size: 0.88rem;
    letter-spacing: -0.45px;
    background-color: rgba(51, 51, 51, 0.65);
}

.tee-list ul li a {
    display: flex;
    gap: 0 8px;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-weight: 300;
    cursor: default;
}

.tee-list ul li span {
    font-size: 0.88rem;
    letter-spacing: -0.5px;
}

.tee-list ul li.on{
    background-color: rgba(0, 0, 0, 0.75);
}

.tee-list ul li.on a{
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.tee-list ul li.on a:focus {
    background-color: #00418e !important;
}

/* section 03 silder list */
.tee-basic {width: 100%; height: 100%; position: relative; object-fit: cover;}
.gwangsan-tee {background: linear-gradient(to bottom, rgba(13, 51, 78, -1), #44444436 50%, #0000009e), url("https://edu.kspo.or.kr/golf/resources/images/main/gwangsan_tee_bg.png") no-repeat center;  background-size: 100% 100%;}

.jeongseon-tee {background: linear-gradient(to bottom, rgba(13, 51, 78, -1), #44444436 50%, #0000009e), url("https://edu.kspo.or.kr/golf/resources/images/main/jeongseon_tee_bg.png") no-repeat center;  background-size: 100% 100%;}

.yeonggwang-tee {background: linear-gradient(to bottom, rgba(13, 51, 78, -1), #44444436 50%, #0000009e), url("https://edu.kspo.or.kr/golf/resources/images/main/yeonggwangn_tee_bg.png") no-repeat center;  background-size: 100% 100%;}

.jecheon-tee {background: linear-gradient(to bottom, rgba(13, 51, 78, -1), #44444436 50%, #0000009e), url("https://edu.kspo.or.kr/golf/resources/images/main/jecheon_tee_bg.png") no-repeat center;  background-size: 100% 100%;}

.geochang-tee {background: linear-gradient(to bottom, rgba(13, 51, 78, -1), #44444436 50%, #0000009e), url("https://edu.kspo.or.kr/golf/resources/images/main/geochang_tee_bg.png") no-repeat center;  background-size: 100% 100%;}

.swiper-slide-active .tee-list{display: block;}
.swiper-slide-active .tee-con .tit { display: block; font-size: 2.000em; color: #fff; text-align: center; margin-bottom: 50px; padding-left: 0;}
.tee-con {width: 96%; height: auto; position: absolute; bottom: 30px; right: 50%; transform: translateX(50%);}
.tee-con .tit {display: none;}
.tee-con .tit img {display: inline-block; width: 35%; margin-right: 7px;}

/* section 03 silder btn */
#section-03 .sec03-btn {width: 25px; height:36px;}
#section-03 .swiper-button-next:after, #section-03 .swiper-rtl .swiper-button-prev:after{display: none;}
#section-03 .swiper-button-prev:after, #section-03 .swiper-rtl .swiper-button-next:after{display: none;}
#section-03 .swiper-button-prev, #section-03 .swiper-button-next { position: absolute; width: 25px; height: 36px; top: 50%; z-index: 1; cursor: pointer; }
#section-03 .swiper-button-prev {background: url(/resources/images/main/sec02_prev_btn.png) no-repeat center / 25px 36px !important; left: 0 !important;}
#section-03 .swiper-button-next {background: url(/resources/images/main/sec02_next_btn.png) no-repeat center / 25px 36px !important; right: 0 !important;}