/*reset*/
*{
    margin: 0;
    padding: 0;
    font-family:'Noto Sans KR', sans-serif;
    letter-spacing:-0.5px;
}

li{
    list-style: none;
}

a{
    color: inherit;
    text-decoration: none;
    display:block;
}

button{
    background:none;
    border:none;
    cursor: pointer;
}

html, body{
    height:100%;
    overflow:hidden
}


.wrap{
    width:100%;
    height:100%;
    display:flex;
    box-sizing:border-box;
}

.left_header{
    width:10%;
    height:100%;
    box-sizing:border-box;
    padding:20px 0px;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:#225333;
    color:#fff;
}

.logo img{
    width:130px;
}

.menu{
    width:100%;
    margin-top:30px
}

.menu li{
    font-size:22px;
    font-weight:bold;
    width:100%;
    text-align:center;
    line-height:50px;
    margin-bottom:10px
}

.menu li a{
    transition:padding-left 0.3s;
}

.menu li:hover a    {
    padding-left:20px
}

.menu li.active{
    background:#e6f4eb;
    color:#000;
}

#main{
    height:100%;
    width:90%;
    overflow-y:scroll
}

.header {
    line-height:70px;
    box-sizing:border-box;
    width:100%;
    font-size:26px;
    font-weight:bold;
    box-sizing:border-box;
    background:#f4f8f5;
}

.header h2{
    padding-left:2%;
    letter-spacing:1px;
    font-size:26px;
}

.title{
    font-size:24px;
    font-weight:bold;
    margin-bottom:10px;;
}

/* 키보드로 버튼에 포커스 시 */
a:focus-visible, input:focus-visible, button:focus-visible {
    outline:dashed #E52A07 3px !important;
}

.hidden{ position: absolute;   width: 1px;  height: 1px;  margin: -1px;   padding: 0;   overflow: hidden;  clip: rect(0, 0, 0, 0);  border: 0;}

/* 본문 바로가기 */
.skip { position: absolute; top: 0; left: 0; z-index: 9999; width:100%}
.skip a { position: absolute; display: block; width: 100%; left: 0; text-align: center;  top: -10000px;  z-index: 5000;}
.skip a:focus{ position: absolute; top: 0; padding: 12px 0; font-weight: bold; color: #fff; background: #225333; line-height: 1;}


/* 로그인 */
.login{ width:100%;  height:100%; background:url(/resources/imgs/bg.png)no-repeat left center;}
.login #main{ display:flex; align-items:center; width:100%; justify-content:flex-end; box-sizing:border-box; padding-right:17%;}
.login_title{ padding-left:115px;}
.login_title img{ width:90%}
.login_wrap{ display:flex; align-items:center;}
.login_input{ margin-top:30px}
.login_input>div{ display:flex; align-items:center; margin-bottom:15px}
.login_input label{ width:100px; font-size:20px; font-weight:bold; text-align:right; margin-right:15px;}
.login_input input{ background:#f4f8f5; border:none; line-height:46px; width:250px; border-radius:5px; padding-left:15px; font-size:16px;}
.login_input input::placeholder{ color:#666; font-size:16px;}
.login_btn_area{ margin-left:15px; margin-top:13px;}
.login_btn{ background:#225333; color:#fff; height:107px; width:120px; border-radius:5px; font-size:20px; font-weight:bold; letter-spacing:1px;}

/* swing.html*/
.terms_area{box-sizing:border-box; padding-left:2%; display:flex; align-items:center; margin-top:30px; justify-content:space-between;}
.terms_area>div{display:flex;}
.terms1 form{display:flex;}
.ta_title{font-size:22px; font-weight:bold; margin-right:30px}
.ta_title::before{content:"▶"; font-size:14px; margin-right:8px; position:relative; bottom:4px}
.terms1 label{margin-right:10px; font-size:18px;}
.file_input{margin-right:60px}
.file_search{line-height:32px; border-radius:5px; padding-left:10px; width:200px; font-size:16px;}
.date_input input{line-height:32px; border-radius:5px; padding-left:10px;font-size:16px; cursor: pointer;}
.date_input #startDt{margin-right:20px}
.terms_search_btn{width:80px; line-height:37px; background:#225333; color:#fff; border-radius:5px; text-align:center; letter-spacing:1px; cursor: pointer; margin-left:10px;transition:background-color 0.3s; font-size:16px;}
.terms_search_btn:hover{background-color:#e52A07}

.terms2{width:45%; justify-content:flex-end; box-sizing:border-box; padding-right:2%;}
.terms2>div{display:flex; align-items:center;}
.terms2>div>p{font-size:18px; margin-right:10px;}
.terms2>div>p::after{content:":"; margin-left:5px}
.terms2 .array_list{display:flex ;align-content:center;}
.terms2 .array_list li{margin-right:8px}
.terms2 .radio{display: inline-block;vertical-align: top;margin-top: 2px;margin-right:2px; width: 20px;height: 20px;border-radius: 50%;background: #fff; box-shadow: inset 0px 0px 0px 1px #d0d2d6;transition: 0.3s; cursor: pointer;}
.terms2 input[type="radio"]:checked + label .radio { box-shadow: inset 0px 0px 0px 5px #225333;}
.terms2 label{cursor: pointer;}
.terms2 .date_array{margin-left:30px}
.terms2 input[type="radio"]:focus-visible + label{ outline:dashed #E52A07 3px !important;}
.temrs2 input[tpye="radio"]n:focus:not(:focus-visible) + label{outline:none !important;}

.contents{ box-sizing:border-box; padding:0px 2%; position:relative}
.swing_table{margin-top:30px; border-collapse:collapse; border-spacing:0; width:100%; text-align:center; line-height:40px; border-top:solid #225333 3px; border-bottom:solid #225333 3px}
.swing_table th{font-weight:bold; line-height:50px; background:#f4f8f5; font-size:18px; border-bottom:solid #225333 1px}
.swing_table td{ line-height:50px;}
.swing_table td:last-child{border-right:none}
.swing_table tr{ border-bottom:solid #dbdbdb 1px;}
.swing_table tr:last-child{border-bottom:none;}
.swing_table tr:hover td{background:#f9f9f9}

.paging{width:100%; display:flex; align-items:center; justify-content:center; position:absolute; bottom:-120px; padding-right:2%; box-sizing:border-box;}
.paging ul{display:flex; align-items:center;margin:0px 10px}
.paging a{border:solid #dbdbdb 1px; width:40px; height:40px;margin-right:10px; display:flex; align-items:center; justify-content:center; font-size:18px; transition:background-color 0.3s;}
.paging a.active{background:#225333; color:#fff; border-color:#225333; font-weight:bold;}
.paging a:hover{border-radius:5px; border-color:#000;}
.paging a.active:hover{background-color:#3C8551; border-color:#3C8551}
.paging>a:last-child{margin-right:0px}
.paging li{margin:0px 5px}
.paging .first_page {background:url(/resources/imgs/fisrt_page.png)no-repeat center center; background-size:20px}
.paging .prev_page{background:url(/resources/imgs/prev_page.png)no-repeat center center; background-size:20px}
.paging .next_page{background:url(/resources/imgs/next_page.png)no-repeat center center; background-size:20px}
.paging .last_page{background:url(/resources/imgs/last_page.png)no-repeat center center; background-size:20px}

/* swing_detail */
.swing_detail{width:100%; display: inline-flex; justify-content:space-between; margin-top:20px;}
.con_left{width:65%;}
.con_right{width:30%; box-sizing:border-box; padding-right:2%;}
.list_btn{width:80px; line-height:37px; background:#225333 url(/resources/imgs/list.png)no-repeat 15% center; background-size: 17px; color:#fff; border-radius:5px; text-align:center; letter-spacing:1px; cursor: pointer; transition:background-color 0.3s; font-size:16px; box-sizing:border-box; padding-left:17px;}
.list_btn:hover{background-color:#e52A07}

.video_info {margin-top:20px; border-collapse:collapse; border-spacing:0; width:100%; text-align:center; line-height:40px; border-top:solid #225333 3px; border-bottom:solid #225333 3px}
.video_info th{font-weight:bold; line-height:45px; background:#f4f8f5; border-bottom:solid #dbdbdb 1px;}
.video_info td{ line-height:45px;border-bottom:solid #dbdbdb 1px; text-align:left; padding-left:20px;}
.download_btn{display:inline-block; line-height:32px; background:#dbdbdb url(/resources/imgs/donw_icon.png)no-repeat 10% center; background-size:17px; padding:0px 10px; padding-left:30px;border-radius:5px; transition:background-color 0.3s;;}
.download_btn:hover{background-color:#c4c4c4}

.con_bottom{margin-top:30px; display:flex; flex-direction:column; align-items:center;}
.vcon_title{text-align:center; font-size:20px; font-weight:bold; position:relative; bottom:15px}
.video_area{margin-top:-6px; border:solid #225333 3px; border-radius:10px; height:510px; width:84%; background:url(/resources/imgs/golf_bg.png)no-repeat center 40%; background-size:200px; position:relative; overflow:hidden; box-sizing:border-box}
.video_ment{position:absolute; text-align:center; width:100%; top:350px;}
#divNoVideo {margin-top:20px}
.go_video_list{display:inline-block; text-decoration:underline; font-weight:bold; text-underline-offset: 5px;}

.vl_control{width:100%; display:flex; align-items:center; justify-content:space-between; margin-top:30px;}
.vl_btns button{width:100px; font-size:16px; background:#dbdbdb; border-radius:5px; line-height:32px; margin-right:10px; transition:background-color 0.3s;}
.vl_btns button:hover{background-color:#c4c4c4}

#video_list{border:solid #225333 3px; margin-top:20px; border-radius:10px; box-sizing:border-box; padding:20px; padding-left:10px;height:600px; overflow-y:scroll; border-bottom-left-radius:0px; border-bottom-right-radius:0px;}
#video_list:focus-visible{outline:dashed #E52A07 3px !important;}
#video_list li{display:flex; align-items:center; margin-bottom:20px;}
#video_list li:last-child{margin-bottom:0px}
#video_list li a{display:block;}
#video_list .vl_wrap{display:flex; align-items:center;}
.thumnail{width:150px; margin-right:20px;overflow:hidden;}
.thumnail img{width:100%; border-radius:5px; }
#video_list input{width:24px; height:24px; margin-right:10px; cursor: pointer;}
#video_list p{ width:50%; word-break: break-all;}
.video_number{ font-size:18px; font-weight:bold; text-align:center; background:#f4f8f5; line-height:45px; border:solid #225333 3px; position:relative; bottom:3px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}
.v_down_btn{float: right; width:120px; line-height:40px; background:#225333 url(/resources/imgs/download.png)no-repeat 13% center; color:#fff; font-weight:bold; font-size:16px; border-radius:5px; margin-top:20px; padding-left:20px; transition:background-color 0.3s}
.v_down_btn:hover{background-color:#e52A07}


/* main.html*/
.v_main{overflow-y:scroll !important;}
.v_main .header{position:absolute; top:0; z-index:900}
.v_main .contents{padding: 90px 2%}
.con{margin-bottom:30px}
.con_title{display:flex; align-items:center; margin-bottom:20px; font-size:22px; font-weight:bold;}
.file_name::before{content:"▶"; font-size:14px; margin-right:10px; position:relative; bottom:4px}
.number{margin-left:10px}

.swiper{width:100%; box-sizing:border-box; position:relative; overflow:hidden}
.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: flex; align-items: center; position:relative; padding-bottom:30px}
.swiper-slide>a{border-radius:10px; overflow:hidden;  height:210px;}
.swiper-slide>a>img{width:100%; box-sizing:border-box; transition:transform 0.3s;}
.swiper-slide:hover img{transform:scale(1.05,1.05)}
.swiper-slide>p{position:absolute; bottom:0px; color:#666}
.swiper-slide>p::before{content:""; width:15px; height:15px; background:url(/resources/imgs/golf_icon.png)no-repeat center center; padding:8px; background-size:15px; margin-right:5px; position:relative; top:2px}
.swiper-slide>a:focus-visible {border: dashed #e52a07 3px !important; outline:none !important;}

:root{--swiper-theme-color:#225333 !important;}
.swiper-button-prev:after, .swiper-button-next:after{display:none}
.swiper-button-prev img, .swiper-button-next img {width:30px; box-shadow:rgba(0,0,0,0.7)0px 0px 5px;}
.swiper-button-next, .swiper-button-prev {top:45% !important;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {display:none !important;}

.v_main .paging{width:100%; display:flex; align-items:center; justify-content:center;padding-right:2%; box-sizing:border-box; margin-bottom:50px; position:static !important}

.video_wrap{width:100%; height:100%; display:flex; flex-direction:column ;align-items:center; justify-content:center; background:#000}
.video-js{border-radius:10px !important; overflow:hidden !important}
.video_comment{padding:20px 0px}
.video_text{width:1024px; height:120px; border:solid #225333 1px; border-radius:10px; box-sizing:border-box; padding:20px; margin-top:20px; line-height:26px; background:#fff;}


/* 웹 인증마크 231218 */
.web_mark{position:absolute; left:34px; bottom:20px}



/* 250612 로그인 */
.capcha_area{display:flex; align-items:center; margin-left:20px}
.capcha_area .redo_btn{width:46px; height:46px; border:solid #dbdbdb 1px; display:flex; align-items:center; justify-content: center; border-top-left-radius:5px; border-bottom-left-radius:5px;}
.capcha_area .capcha_here{height:46px; overflow:hidden; border:solid #dbdbdb 1px; border-left:none; border-top-right-radius:5px; border-bottom-right-radius:5px;}
.capcha_area input{line-height:46px; font-size:16px; padding-left:15px; border:none; background:#f4f8f5; border-radius:5px; margin-left:15px}
 
.login #main{overflow-y:hidden}
.header{display:flex; align-items:center; justify-content:space-between; width:90%}
.header .log_area{font-size:18px; font-weight:normal; display:flex; align-items:center; justify-content:space-between; padding-right:20px;}
.header .log_area span{font-weight:bold;}
.header .logout_btn{background:#fff; line-height:46px; width:120px; text-align:center; border-radius:10px; box-shadow:rgba(0,0,0,0.1)0px 2px 4px; margin-left:20px; transition:All 0.3s; font-size:16px;}
.header .logout_btn:hover{color:#ff0000;}