@charset "utf-8";
/* CSS Document */
.black-han-sans-regular {
  font-family: "Black Han Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/*서브페이지 상단*/
.subBg{background:url(../images/main/subTop.jpg) no-repeat fixed; width:100%; margin:0 auto; height:300px; padding-top:182px; background-color:#0000000f; background-blend-mode:multiply;}
.subText{width:100%; margin:0 auto;}
.subText .title{text-align:center; font-size:2.5rem; text-transform:uppercase; color:#fff;}
.subCon{width:1033px; margin:0 auto; padding:35px 0px 60px 0px; min-height: 570px;}
.subMen{ width:100%; max-width:1091px; margin:0 auto; background:#fff; border-radius:40px 40px 0 0; margin-top:32px; padding:22px 52px; position:relative;}
.subMen::before{position:absolute; display:block; content:url(../images/main/leftBg.png); left:-23px; bottom:0;}
.subMen::after{position:absolute; display:block; content:url(../images/main/rightBg.png); right:-23px; bottom:0;}
.subMen p{font-size:1.5rem; font-weight:600; background:url(../images/sub/hBottmo.png) repeat-x left bottom; padding-bottom:17px;}

/*subTBA animation*/
        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-moz-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-webkit-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-o-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }
        .loading-container,
        .loading {
            height: 100px;
            position: relative;
            width: 100px;
            border-radius: 100%;
        }


        .loading-container { margin:0 auto; margin-top:107px; }

        .loading {
            border: 2px solid transparent;
            border-color: transparent #444 transparent #444;
            -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
            -moz-transform-origin: 50% 50%;
            -o-animation: rotate-loading 1.5s linear 0s infinite normal;
            -o-transform-origin: 50% 50%;
            -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
            -webkit-transform-origin: 50% 50%;
            animation: rotate-loading 1.5s linear 0s infinite normal;
            transform-origin: 50% 50%;
        }

        .loading-container:hover .loading {
            border-color: transparent #E45635 transparent #E45635;
        }
        .loading-container:hover .loading,
        .loading-container .loading {
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }

        #loading-text {
            -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
            -o-animation: loading-text-opacity 2s linear 0s infinite normal;
            -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
            animation: loading-text-opacity 2s linear 0s infinite normal;
            color: #444;
            font-family: "Helvetica Neue, "Helvetica", ""arial";
            font-size: 10px;
            font-weight: bold;
            margin-top: 45px;
            opacity: 0;
            position: absolute;
            text-align: center;
            text-transform: uppercase;
            top: 0;
            width: 100px;
        }
.TbaW{text-align:center; font-weight:800; font-size:2.5rem; color:#c7c7c7; margin-top:35px;}


/**/
.pbg{background:url(../images/sub/bg.png); width:1033px; height:auto; border-radius:37px; padding:45px;}
.fffbg{background:#fff; margin-top:30px; border-radius:37px; width:100%; height:auto; padding:34px;}
.tit{font-size:33px;}
.h3Tit{font-size:22px; position:relative; margin-bottom:20px;}
.h3Tit::before{position:absolute; display:block; content:url(../images/sub/h3Icon.png); top:-25px;}

/*table*/
.s_table{border-top: 3px solid #3b4661; width: 100%;}
.s_table th{background: #f4f5f6; font-weight: 500; padding: 13px 20px; border-bottom: 4px double #c8ccd3; border-right: 1px solid #c8ccd3;}
.s_table th.bB1{border-bottom: 1px solid #c8ccd3 !important;}
.s_table td{border-bottom: 1px solid #c8ccd3; padding: 12px 15px; line-height: 1.4; border-right: 1px solid #c8ccd3;}
.s_table th:last-of-type, .s_table td:last-of-type{border-right: 0;}
.s_table td.bR0{border-right: 0px solid #c8ccd3 !important;}
.s_table th.bR1, .s_table td.bR1{border-right: 1px solid #c8ccd3 !important;}
.s_table td.bB4{border-bottom: 4px double #c8ccd3 !important;}
.s_table th.soldout, .s_table td.soldout{background: #ddd; color: #a5a5a5; position: relative;}
.s_table td.soldout img{position: absolute; left: 50%; margin-left: -55px; z-index: 99; top: 35px;}
.s_table td p{text-align: center; line-height: 1.5}

/*live*/
.scBox{}
.flex{display:flex; align-items:center;}
.dateBox{display:flex; align-items:center;}
.dateBox>div:first-of-type{background:#1b72dc; color:#fff; padding:2px 18px; border-radius:10px; margin-right:13px; text-align:center;}
.dateBox>div:first-of-type span{display:block; font-weight:800;}
.dateBox>div:first-of-type span:first-of-type{font-size:23px; color:#66a8ff; border-bottom:1px solid #66a8ff; padding-bottom:7px; margin-top:4px;}
.dateBox>div span:last-of-type{font-size:33px; margin-top:4px; margin-bottom:7px;}

p.sec1{margin-right:18px; background:#d3e8ff; font-weight:600; border-radius:10px; padding:0 10px;}
p.sec2{margin-right:18px; background:#d3e8ff; font-weight:600; border-radius:10px; padding:0 10px;}
.al-base{align-items:baseline !important;}

.flexjus{display:flex; justify-content:space-between;}


/*대회일정*/
.planList{display:flex; flex-wrap:wrap; text-align:center; justify-content:space-between;}
.planList li{width:50%; padding:25px;}
.planList li:nth-of-type(odd){border-right:1px solid #afafaf;}
.planList li:nth-of-type(1),.planList li:nth-of-type(2){border-bottom:1px solid #afafaf;}
.planList li h1,.planList2 li h1,.planList3 li h1{font-size:21px; background:#1c76db; border:6px solid #b1c8e3; display:inline-block; width:116px; padding:1px 0; border-radius:50px; color:#fff; margin-bottom:10px;}

.planList2{display:flex; flex-wrap:wrap; text-align:center; justify-content:space-between;}
.planList2 li{width:33%; padding:9px;}
.planList2 li:nth-of-type(1),.planList2 li:nth-of-type(2){border-right:1px solid #afafaf;}

.planList3{display:flex; flex-wrap:wrap; text-align:center; justify-content:space-between;}
.planList3 li{width:25%; padding:9px;}
.planList3 li:nth-of-type(1),.planList3 li:nth-of-type(2),.planList3 li:nth-of-type(3){border-right:1px solid #afafaf;}

/*ul-style*/
.ul-basic{ padding-left: 18px;}
.ul-basic li{padding: 2px 0; list-style-type: circle; line-height: 1.35; letter-spacing: -0.2px;}
.ul-basic li.decimal, .ul-basic2 li.decimal{list-style-type: decimal !important;}
.ul-basic li.circle, .ul-basic2 li.circle{list-style-type: circle !important;}


/*행사소개*/
.tipBox{border:9px solid #f5e5b6; padding:10px 30px; margin-top:30px; border-radius:14px; display:flex; align-items:center; gap:14px; background:#fffbf4;}
.slogan{ font-family: "Black Han Sans", sans-serif; font-size:30px; letter-spacing:-1.5px; line-height:31px;}
.evBox{padding:30px; border-radius:8px; display:flex; justify-content:space-between; gap:40px; background:#eaeaea;}
.day01{width:50%;}
.evBox .txt-box{font-size:17px; text-align:center;}
.evBox .date{background:#fff; padding:10px; border-radius:10px;}
.h4tit{position:relative; color:#0897a7; font-size:21px; font-weight:700; display:inline-block;}
.h4tit::before,.h4tit::after{position:absolute; display:block; content:url(../images/sub/h4.png); top:2px;}
.h4tit::before{left:-30px;}
.h4tit::after{right:-23px;}

.h1Tit{font-size:27px; color:#fff; display:inline-block; padding:3px 30px; border-radius:10px; background:#586cf9;}
.pkbg{background:#fd16f4;}

/*클래스소개*/
.dBox{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between;}
.dBox div{width:49%; padding:25px; box-shadow:0px 0px 40px rgba(157,168,178,0.2); background:#fff; border-radius:15px;}
.dBox div h2{font-size:24px; font-weight:500; color:#2925cc; margin-bottom:10px; position:relative;}
.dBox div h2::before{position:absolute; display:block; content:""; background:#2925cc; width:4px; bottom:6px; height:24px; left:-24px;}
.dBox div p{padding-top:17px; border-top:1px dotted #b5b5b5; margin-top:26px;}


/*사진영상*/
.row {display:flex; flex-wrap:wrap; justify-content:left; gap:13px;}
.row a{margin-bottom:10px; display:block; width:24%}
.row a img{width:100%; height:186px;}
.modal{position:fixed; top:0; height:100%; width:100%; background:#000000a3; z-index:22222222;}
.odal-dialog{position:relative; width:100%; height:100%;}
.modal-dialog{position:absolute; transform:translate(-50%,-50%); width:100%; left:50%; top:50%;}
.modal-content{position:relative; display:flex; flex-direction:colum; width:100%; pointer-events:auto;}
.ekko-lightbox-nav-overlay{}
.ekko-lightbox-nav-overlay a{position:absolute; top:45%; padding:10px; background:#fff;}
.ekko-lightbox-nav-overlay a span{color:#622c84;}
.ekko-lightbox-nav-overlay a:first-of-type{left:0;}
.ekko-lightbox-nav-overlay a:last-of-type{right:0;}
.modal-body{position:relative; flex:1 1 auto; padding:1rem; background:#fff; border-radius:1.2rem;}
.ekko-lightbox-container{position:relative;}
.ekko-lightbox-container>div.ekko-lightbox-item{position:absolute; top:0; left:0; bottom:0; right:0; width:100%;}
.img-fluid{width:100%;}

.ekko-lightbox-item{}
.fade{transition:opacity .15s linear;}
.fade:not(.show){opacity:0;}
.show{}
.modal-open .modal{overflow-x:hidden; overflow-y:clip;}

.tab2{display:flex; border:1px solid #55a7ff; border-radius:50px; padding:18px 0;}
.tab2 li{width:50%; text-align:center;}
.tab2 li a{color:#898989;}
.tab2 li a.active{background:#0088cf; padding:8px 28px; color:#fff; border-radius:21px; box-shadow:0px 3px 6px 1px #0000004d;}

.videoList{display:flex; flex-wrap:wrap;justify-content: space-between; gap:13px;}
.videoList li{width:335px; height:200px;}
.videoList li a{}

#paging{margin:0 auto;}
.pagination{display:flex; gap:11px; justify-content:center; border:1px solid #ccc; padding:10px 0; border-radius:11px; margin-top:22px;}
.pagination li{}
.pagination a{display:block; width:27px; text-align:center; line-height:25px;}
.pagination a.active{background:#0088cf; border-radius:8px; color:#fff;}

.submit{text-align:right; margin-top:10px;}
.submitBtn{display:inline-block; padding:7px 10px; color:#fff; border-radius:11px; font-size:15px; font-weight:500; background:#9d9d9d; transition:.3s ease;}
.submitBtn:hover{background:#0088cf;}

/*영암정보*/
.tastBox{display:flex; gap:19px;}
.instaImg{position:relative;}
.instaImg img{position:sticky; top:49px;}
.tabBox{width:100%;}


/*공지사항*/
.arBox{width: 100%;}
.arBox .ar_header{display: table; width: 100%; border-top: 3px solid #109dc8; border-bottom: 1px solid #109dc8; background: #f9f9f9;}
.arBox .ar_header span{display: table-cell; height: 50px; text-align: center; vertical-align: middle;}
.arBox .ar_header span:nth-child(1){width: 10%;}
.arBox .ar_header span:nth-child(2){width: 70%;}
.arBox .ar_header span:nth-child(3){width: 11%;}
.arBox .ar_header span:nth-child(4){width: 9%;}
.arBox ul{}
.arBox ul li{}
.arBox .info {display:table; width:100%;height:60px; border:1px solid transparent;  border-bottom:1px solid #ddd; box-sizing:border-box}
.arBox .info:hover, .arBox.view .info {border:1px solid #19283B; box-shadow: 4px 4px 10px rgba(0,0,0,.2);}
.arBox .info > * {display:table-cell; height:60px; text-align:center; vertical-align:middle;}
.arBox .info .num, .arBox .info .date, .arBox .info .source {width:10%; font-size:14px}
.arBox .info .title {width:70%; text-align:left; font-size:17px;}
.arBox .info .title span {display:block; width:750px; font-size:16px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.arBox.view .info {height:auto}
.arBox.view .info .title span {text-overflow:initial; white-space:normal; line-height:28px}

.news_tit{font-size:26px; border-top:2px solid #5c5c5c; border-bottom:2px solid #5c5c5c; padding:13px 12px;}
.notice_Box{padding:32px; border-bottom:1px solid #ccc;}

/*로그인*/
.login-wrapper{
    width:579px;
    height: 410px;
    box-sizing: border-box;
	text-align:center;
	margin:0 auto; margin-top:38px;
	padding:64px;
	box-shadow:0 0 19px 5px #0000001c; border-radius:9px;
}

.login-wrapper > h2{
	text-align:center;
    margin-bottom: 20px;
}
#login-form > input{
    width: 100%;
    height: 48px;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 16px;
    border-radius: 6px;
    background-color: #F8F8F8;
	border:1px solid #cbcbcb;
}
#login-form > input::placeholder{
    color: #D2D2D2;
}
#login-form > input[type="submit"]{
    color: #fff;
    font-size: 16px;
    background: linear-gradient(19deg, #0500d7, #54ceff);
    margin-top: 7px;
	border:none;
	font-weight:700;
}

#login-form > input[type="checkbox"]{
    display: none;
}
#login-form > label{
    color: #999999;
}
#login-form input[type="checkbox"] + label{
    cursor: pointer;
    padding-left: 26px;
    background-image: url("checkbox.png");
    background-repeat: no-repeat;
    background-size: contain;
}
#login-form input[type="checkbox"]:checked + label{
    background-image: url("checkbox-active.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.formWrap{width:626px; margin:0 auto; padding-top:50px;}
.formWrap div{display:flex; align-items:center; margin-bottom:15px;}
.formWrap h3{font-size:17px; width:43px;}
.formWrap input{width:100%; border:1px solid #bdbdbd; padding:10px; border-radius:6px; height:50px;}

.btnWrap{display:flex; align-items:center; justify-content:center; gap:10px;}
.btnWrap a{border:1px solid #ccc; padding:10px; border-radius:6px;}
.btnWrap .cancel{background:#e9e9e9;}
.btnWrap .enter{background:#006fff; color:#fff;}


.submenu{}
.submenu ul{display:flex; padding:34px 0; justify-content:center; gap:26px;}
.submenu li a{border:none; padding:11px 29px; font-size:17px; border-radius:26px; background:#0088cf; color:#fff;}

.h1Title{position:relative; margin-top:28px; margin-bottom:28px;}
.h1Title::after{position:absolute; display:block; content:""; width:100%; height:1px; background:#ccc; top:16px; z-index:-1;}
.h1Title span{font-size:28px; background:#fff; padding-right:10px;}

.spanBg{background: #fd16f4; padding: 5px 10px; font-size: 17px; color: #fff; text-align: center; display: inline-block; border-radius: 20px;}

/*myBtntop*/
#topBtn{display: none; position: fixed; bottom: 20px; right: 215px; z-index: 99; border: none; outline: none; background-color: #0088cf; color: white; cursor: pointer; padding: 15px;  border-radius: 50px; box-shadow: 1px 1px 4px #adadad;animation: pulseAnim 2s infinite; }
@keyframes pulseAnim {
	0% {
		box-shadow: 0 0 0 0 rgb(109 187 188 / 40%);
	}
	70% {
		box-shadow: 0 0 0 10px rgb(109 187 188 / 0%);
	}
	100% {
		box-shadow: 0 0 0 0 rgb(109 187 188 / 0%);
	}
}