@charset "utf-8";

/*---------------------------- main contents_all ---------------------------*/
html {height: 100%;}
body {width: 100%; height: 100%;}
#wrap {width:100%; position: relative;}

/*------- section01 -------*/
#section-01 {
    position: relative;
    top: 0;
    width: 100%;
    height: 937px;
}
.sec-01-slide{ overflow: hidden; position: relative;  width: 100%;  height: 937px;}
/* 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: 80%;  height: 100%;  position: absolute; top: 0; transform: translateX(-50%);  left: 50%;  z-index: 10;}

.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: 14px; height: 14px; 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: 195px; height: 30px;  position: absolute;  bottom: 100px;  z-index: 99;  right: 0; 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: 42px; color: #fff; letter-spacing: -1.2px; line-height: 64px; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.32); position: absolute; top: 50%; left:0; transform: translateY(-50%);}
.main-tit b {font-size: 42px;padding-top: 20px;display: block;}

/* weather silder */
.weather-wrap {width: 360px; height: 100px; position: absolute; left:0; bottom: 110px;}
.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: 70%;  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: 43px 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: 43px 8px; display: block; margin: 0 auto;}
.weather-box {width: 80%; margin: 0 auto; top: 19%;  position: absolute; right: 50%; transform: translateX(50%);}
.weather-box li {display: inline; color: #fff;}
.weather-box ul:nth-child(2) {padding-top: 13px;}

.weather-box .tit {font-size: 18px; font-weight: 400; margin-right: 30px;}
.weather-box .temper {font-size: 24px; font-weight: 400; margin-right: 5px; letter-spacing: -1px;}
.weather-box .weather-img {display: inline-block; vertical-align: sub;}
.weather-box .weather-img img{height: 35px;}
.weather-box .sub {font-size: 15px; font-weight: 200; margin-right: 4%;}
.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: clamp(37.5rem, 30.3422rem + 11.1732vw, 43.75rem);
    background-color: #f9f9f9;
}
.basic-wrap {width: 80%; height: auto; margin: 0 auto;}
.sec-02-con {width: 100%; height: auto; display: flex;  justify-content: space-between; align-items: center; padding: 60px 0 30px; margin: 0 auto;}
.main-title {font-size: 32px; color: #000; letter-spacing: -0.8px; font-weight: 600;}
.cc-list {width: auto;}
.cc-list ul .on {color: #000; font-weight: 600;}
.cc-list ul li{display: inline-block; font-size: 24px; color: #666666; letter-spacing: -0.6px; font-weight: 500; position: relative; margin-right: 45px;}
.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: 80%; height: auto;  position: absolute; transform: translateX(50%); right: 50%; }
.sec02-btn {width: 55px; height:88px;}
.sec-02-slide .swiper { width: 100%;  height: 100%;}
.main02Swiper {width: 100%; height: 100%;}
.main02Swiper .swiper-slide { width: 300px !important; background-color: #ffffff00;}
.main02Swiper .swiper-slide button{position: relative;}
.main02Swiper .swiper-slide button img {display: inline-block; object-fit: cover; padding-bottom: 20px;}
/* 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: 55px; height: 88px; top: 31%; z-index: 10; cursor: pointer;}
#section-02 .swiper-button-prev {background: url(/resources/images/main/sec02_prev_btn.png) no-repeat center!important; left: -55px;}
#section-02 .swiper-button-next {background: url(/resources/images/main/sec02_next_btn.png) no-repeat center!important; right: -55px;}
/* section 02 silder list */
.main02Swiper .swiper-slide .board-con {display:block; width: 70%; text-align: left;}
.main02Swiper .swiper-slide .board-con li{display:block;}
.main02Swiper .swiper-slide .board-con .sub{width: 64px; height: 30px; border-radius: 15px; font-size: 18px; text-align: center; letter-spacing: -0.45px; padding: 5px 0;}
.main02Swiper .swiper-slide .board-con .gwangsan{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: 24px; line-height: 32px; letter-spacing: -0.6px; color: #333; padding-top: 8px; word-break: keep-all; min-height: 90px;}
.main02Swiper .swiper-slide .board-con .date{font-size: 16px; 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: 16px;}

/*------- section03 -------*/
#section-03 {
    position: relative;
    top: 0;
    width: 100%;
    height: clamp(56.25rem, 0rem + 62.5vw, 75rem);
    background-color: #f9f9f9;
}
.sec-03-con {width: 100%; height: auto; display: flex; align-items: center; flex-direction: column; padding-top: 145px;}
.sec-03-con .main-title {padding-bottom: 35px; font-weight: 600; width: 100%; text-align: left;}

/* section 03 silder */
.sec-03-slide {
    width: 100%;
    margin: auto;
    height: 376px;
    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: 93% !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 8px 16px 10px -5px hwb(0deg 0% 100% / 50%);
    margin: 9px 0 11px !important;
}

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


.tee-list {
    width: 80%;
    max-width: 500px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 45px;
}

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

.tee-list ul li {
    border-radius: 4px;
    flex: 0 0 31%;
    max-width: 158px;
    height: 48px;
    color: #ccc;
    font-size: 18px;
    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;
    padding: 14px 0;
    font-weight: 300;
    cursor: default;
}

.tee-list ul li span {
    font-size: 20px;
    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:hover {
    background-color: #00418e;
    transition: 0.3s;
}

.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 {text-align: center; margin-bottom: 25px; padding-left: 0; }

.tee-con {width: 95%; height: auto; position: absolute; bottom: 30px; right: 50%; transform: translateX(50%);}
.tee-con .tit {display: block; font-size: 40px; color: #fff; margin-bottom: 40px; text-align: left; padding-left: 50px;
}
.tee-con .tit img {display: inline-block; width: 26%; margin-right: 7px;}

/* section 03 silder btn */
#section-03 .sec03-btn {width: 55px; height:88px;}
#section-03 .sec03-btn {width: 55px; height:88px;}
#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: 55px; height: 88px; top: 50%; z-index: 10; cursor: pointer; }
#section-03 .swiper-button-prev {background: url(/resources/images/main/sec02_prev_btn.png) no-repeat center!important; left: 23% !important;}
#section-03 .swiper-button-next {background: url(/resources/images/main/sec02_next_btn.png) no-repeat center!important; right: 23% !important;}