/* common */
.pc{ display:block; }
.mobile{ display:none; }
.lose, .tie{ color:#000; font-weight:600 }
.win{ color:#da0000; font-weight:600; }
.vs{ font-size:14px; }
.bg_brown{ background:#86654b; color:#fff; border:1px solid #86654b; }
.bg_gray{ background:#84868c; color:#fff; border:1px solid #84868c }

select{ padding:10px 35px 10px 15px; appearance: none; background:#fff url(../images/down.svg)no-repeat right 20px center; }
input{ outline:none; }

.mt50{ margin-top: 50px; }

.subCont{ margin-top:40px; }
.subPg{ padding:92px 0 50px; }
.subPg .section01{ width:1440px; margin:10px auto 30px; }
.subPg .section01 .title{ border-bottom:1px solid #000; padding-bottom:20px; }
.subPg .section01 .title h2{ font-size:36px; text-align:center; font-weight:600 }
.subPg .section01 .title .search select{ height:45px; padding:13px 21px 13px 10px; border:1px solid #cacaca; color:#666; font-size:16px; }
.subPg .section01 .title .search select + select{ margin-left:10px; }

.subNavWRap { margin:20px 0; }
.subNavWRap .subNav{ display:flex; align-items:center; width:1440px; margin:auto; border-bottom:4px solid #cacaca; }
.subNavWRap .subNav ul{ display:table; }
.subNavWRap .subNav ul li{ position:relative; display:table-cell; padding:15px 15px 20px; }
.subNavWRap .subNav ul li a{ color:#333; display:block; }
.subNavWRap .subNav ul li:hover:after, .subNavWRap .subNav ul li.active:after{ content:''; position:absolute; width:100%; height:4px; background:#86654b; bottom:-4px; left:0; }
.subNavWRap .subNav ul li.active a, .subNavWRap .subNav ul li:hover a{ color:#000; font-weight:600; }

.subTopSlt{ display:flex; align-items:center; margin-left:auto; }
.subTopSlt select{ width:100px; height:37px; padding:10px 25px 10px 10px; border-color:#cacaca; color:#666; background-position:right 10px center; }
.slcMobile{ display:none; }

.downBtn button{ border-radius:50px; padding:5px 15px; background:transparent; border:1px solid #cacaca; font-size:16px; }
.down_Ic{ display:inline-block; width:18px; height:18px; background:url(../images/download.png)no-repeat; background-size:cover; margin-left:15px; }

@media(max-width:1080px){
    .pc{ display:none; }
    .mobile{ display:block; }
    .next{ background:url(../images/next.png)no-repeat; width:20px; height:20px; background-size:contain; }
    .prev{ background:url(../images/prev.png)no-repeat; width:20px; height:20px; background-size:contain; }
    button{ background:transparent; border:none; }
    
    .mt50{ margin-top:0; }
    .mt50 + .mt50{ margin-top:40px; }

    .subCont{ padding:20px 0; margin:0; }
    /* 관중 */
    .subPg{ padding-top:90px; }
    .subPg .section01{ margin:20px 0; width:100%; padding:0 15px; }
    .subPg .section01 .title{ border-bottom:0; padding-bottom:0; }
    .subNavWRap .subNav{ width:100%; padding:0 15px; }
    .subNavWRap .subNav ul li{ padding-top:0 }
    .subNavWRap .subNav ul li:first-child{ padding-left:0; }

    .subTopSlt{ margin-bottom:15px; }

}
@media(max-width:780px){
    .subPg{ padding:80px 0 30px; }
    .subPg .section01{ margin-bottom:0 }
    .subPg .section01 .title h2{ font-size:25px; }

    .subTopSlt{ display:none; }
    .subTopSlt select{ border-radius:50px; width:100%; background-position:right 6px center; }
    .slcMobile{ display:block; }
    

}

@media(max-width:380px){
    .subPg{ padding-bottom:25px; }
}

/* subTb 공통 */
.grapTb{ width:100%; overflow-x:auto; }
.subTb table{ border-collapse:collapse; width:100%; }
.subTb > table { border-bottom:1px solid #000; }
.subTb table th, .subTb table td{ padding:15px 20px; }
.subTb table th{ border:1px solid #000; border-left:0; border-right:0; }
.subTb table td{ border-bottom:1px solid #cacaca; text-align:center; color:#666 }

/* 일정 결과 */
.slcBtnBox{ margin-top:25px; }
.topSltWRap{ padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid #cacaca }
.topSltWRap .topSlt{ display:block; }
.topSltWRap ul + ul{ margin-top:10px }
.topSltWRap ul > li{ display:inline-block; vertical-align: top; border:1px solid #cacaca; border-radius:50px; padding:5px 25px; margin:0 5px }
.topSltWRap .topSlt > li:hover, .topSltWRap .topSlt > li.active{ background:#86654b; border:1px solid #86654b; }
.topSltWRap .topSlt > li:hover a, .topSltWRap .topSlt > li.active a{ color:#fff; }
.topSltSub{ display:block; }
.topSltSub li{ display:inline-block; }
.topSltSub li:hover{ border:1px solid #86654b; color:#86654b }
.topSltSub li:hover a{ color:#86654b }
.Kleague_lst{ padding-left:190px; }
.Kovo_lst{ padding-left:490px; }
.slcPc{ display:block }
.sports{ padding-left:93px; }

@media(max-width:1080px){
    .slcPc{ display:block; }
    .Kleague_lst{ padding-left:138px; }
    .Kovo_lst{ padding-left:361px }

    
    .topSltWRap{ width:100%; overflow-x:auto; padding:0 0 15px; margin-bottom:15px; }
    .topSltWRap ul > li{ margin:0 2px; padding:5px 15px; }
}
@media(max-width:780px){
    .slcPc{ display:none; }

    .topSltWRap ul{ width:150%; }

    .Kleague_lst{ padding-left:135px; }
    .Kovo_lstP{ padding-left:358px }
}

@media(max-width:380px){
    
    .Kleague_lst{ padding-left:129px; }
    .Kovo_lst{ padding-left:339px; }

}

/* 관중 띠배너 공통 */
.subCom{ position:relative; display:flex; align-items:center; width:100%; height:64px; background:#0f1957; color:#fff; border-radius:70px; padding:0 40px; margin-top:70px; }
.subCom:first-child{ margin-top:20px; }
.subCom h3{ position:relative; padding-left:20px; font-size:20px; color:#fff }
.subCom h3:after{ content:''; position:absolute; width:10px; height:10px; background:#86654b; left:0; top:50%; transform:translateY(-50%) }
.subCom select{ background-position:right 0 center; padding:12px 21px 12px 10px }
.subCom .ac_btn{ position:absolute; right:40px; }
.subCom .ac_btn a{ display:flex; justify-content: center; align-items:center; width:24px; height:24px; position:relative; cursor:pointer; border:1px solid #86654b; background:#fff; }
.subCom .ac_btn a span{ display:block; position:absolute; width:14px; height:2px; background:#86654b; transition:all .35s; }
.subCom .ac_btn a span:last-of-type{ transform:rotate(0); }

/* graph_btn_area */
.graph_btn_area{ margin:30px 0 20px; display:flex; justify-content:space-between; align-items:flex-end; }
.graph_btn_area .left{ display:flex; gap:5px; }
.graph_btn_area .left a{ display:flex; align-items:center; border:1px solid #86654b; padding:3px 20px; border-radius:5px; color:#86654b }
.graph_btn_area .left a i{ position:relative; color:#86654b; }
.graph_btn_area .right p{ color:#666 }

@media(max-width:1080px){
    .subCom{ height:55px; padding:0 20px; }
    .subCom h3{ font-size:20px; line-height:1 }
    .subCom h3:after{ width:8px; height:8px; }
    .subCom:first-child{ margin-top:0; }
    
    /* graph_btn_area */
    .graph_btn_area{ display:none; }
}

@media(max-width:780px){
    .subCom{ height:45px; }
    .subCom h3{ font-size:18px; }
    .subCom select{ border-radius:0; border:none; }
    .subCom .ac_btn{ display:none; }

    .subTitle .titleSlt{ padding-left:10px; }
}
@media(max-width:380px){
    .subCom h3{ font-size:16px; }
    .subTitle .titleSlt{ padding-left:20px; }
    .subTitle .titleSlt button, .subCom select{ padding:5px 10px; font-size:11px; }
    .subTitle .titleSlt select{ padding:5px 18px 5px 7px; }
    .subTitle .titleSlt span{ font-size:13px; }
}

/* chart */
.chart{ width:100%; margin-top:20px; }
.chart .chartBox { border:2px solid #ececec; padding:10px; }
.chart .chartBox img{ width:100%; }
.chart .chartBox h2{ text-align:center; font-size:16px }
.chart_refer{ margin-top:10px; color:#666; font-weight:400 }
.chart_refer span{ display:block; width:calc(100% - 200px) }
.chart_refer .list{ display:flex; }
.chart_refer .list li{ padding-left:20px; position:relative; }
.chart_refer .list li:after{ content:''; position:absolute; width:4px; height:4px; border-radius:100%; background:#666; top:11px; left:8px; }


/* 만족도 조사 */
.section02{ margin:50px 0 20px; }
.wrap_rating{ width:1440px; margin:0 auto; border:4px solid #f5f5f5; padding:23px 20px; }
.wrap_rating .rating_top{ display:flex; gap:10px; align-items:center; }
.wrap_rating .rating_top .icon_rating{ width:50px; }
.wrap_rating .rating_top .ratingTt{ display:flex; align-items:center; gap:60px; }
.wrap_rating .rating_top .ratingTt h3{ font-size:24px; }
.wrap_rating .rating_top .ratingTt p{ font-size:20px; color:#333; }
.rating_middle{ margin-top:27px; }
.rating_middle ul{ display:flex; align-items:center; }
.rating_middle li + li{ margin-left:30px; }
.rating_middle li label{ display:flex; align-items:center; gap:10px; font-size:16px; }
.rating_middle li label span{ vertical-align:middle; }
.rating_middle li label .radioImg{ width:30px; height:30px; }
.rating_middle li label .radioImg img{ vertical-align:middle; }
.rating_middle li label input[type="radio"]{ appearance:none; width:21px; height:21px; border:1px solid #84868c; border-radius:100%; }
.rating_middle li label input[type="radio"]:checked{ border:6px solid #0f1957; transition:ease-in .3s }
.rating_middle li label input[type="radio"]:hover{ cursor:pointer; }
.rating_middle li label input[type="radio"]:hover + span{ cursor:pointer; }
.inp_survey{ display:flex; width:100%; margin-top:30px; }
.inp_survey input{ width:90%; height:30px; padding:10px; font-size:16px; border:1px solid #cacaca }
.inp_survey button{ width:10%; background:#86654b; color:#fff; font-size:16px; font-weight:600 }
.inp_infor{ margin-top:30px; display:flex; align-items:center; gap:20px; }
.inp_infor h3{ position:relative; padding-left:15px; font-size:18px; }
.inp_infor h3:after{ content:''; position:absolute; width:5px; height:5px; background:#86654b; top:50%; left:0; transform:translateY(-50%); }
.inp_infor .inp_inforWrap{ display:flex; align-items:center; gap:10px; }
.inp_infor p{ display:flex; align-items:center; }
.inp_infor span{ font-size:16px; margin-right:10px; }
.inp_infor input{ height:30px; border:1px solid #cacaca }

@media(max-width:1080px){
    /* 만족도 평가 */
    .section02{ padding:0 15px; margin-top:25px; }
    .wrap_rating{ width:100%; }
    .rating_middle ul{ justify-content:space-between }
    .rating_middle li + li{ margin-left:20px; }
    
    .inp_survey input{ width:80%; }
    .inp_survey button{ width:20%; }
}

@media(max-width:780px){
    /* 만족도 평가 */
    .wrap_rating{ padding:15px 10px; }
    .wrap_rating .rating_top{ gap:15px; }
    .wrap_rating .rating_top .ratingTt{ flex-direction:column; align-items:flex-start; gap:0; }
    .wrap_rating .rating_top .ratingTt h3{ font-size:20px; }
    .wrap_rating .rating_top .ratingTt p{ font-size:18px; }
    .rating_middle ul{ align-items:flex-start; }
    .rating_middle li label{ flex-direction:column }
    .inp_survey input{ width:70%; font-size:12px; padding:5px; }
    .inp_survey button{ width:30%; }

    .inp_infor{ flex-direction:column; align-items:flex-start; }
    .inp_infor .inp_inforWrap{ display:flex; gap:5px; }
    .inp_infor span{ width:65px; text-align:center; font-size:14px; }
    .inp_infor input{ width:calc(100% - 65px) }
}

@media(max-width:380px){
    .inp_infor .inp_inforWrap{ flex-direction: column; width:100%; }
    .inp_infor span{ text-align:left; width:80px; }
    .inp_infor input{ width:100%; }
    .inp_survey button{ font-size:14px; }

    .wrap_rating .rating_top .ratingTt h3{ font-size:16px; }
    .wrap_rating .rating_top .ratingTt p{ font-size:14px; }
    .rating_middle li label span{ font-size:13px; }
}


/* 페이징 */
.paging{ margin-top:80px; }
.paging ul{ display:flex; justify-content:center; }
.paging ul li{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 5px; color:#999; cursor:pointer }
.paging ul li.arrow{ border:1px solid #cacaca; border-radius:100%; }
.paging ul li.active, .paging ul li:hover{ background:#86654b; border-radius:100%; color:#fff; }
.paging ul li.prev{ background:url(../images/pgNext.png)no-repeat center; background-size:15px;  transform:rotate(-180deg) }
.paging ul li.first{ background:url(../images/pgFirst.png)no-repeat center; background-size:15px; }
.paging ul li.next{ background:url(../images/pgNext.png)no-repeat center; background-size:15px; }
.paging ul li.last{ background:url(../images/pgLast.png)no-repeat center; background-size:15px; }

@media(max-width:780px){
    .paging{ margin-top:30px; }
}

@media(max-width:380px){
    .paging ul li{ width:25px; height:25px; }
}

/* 개인정보수집 체크박스 */
.agreeWrap{ margin-top:70px; text-align:left; }
.agreeWrap .agreeList + .agreeList{ margin-top:50px; }
.agreeWrap .agreeList h3{ position:relative; padding-left:20px; font-size:23px; font-weight:600; padding-bottom:20px; margin-bottom: 30px; border-bottom:2px solid #0f1957 }
.agreeWrap .agreeList h3:after{ content:''; position:absolute; width:10px; height:10px; background:#86654b; left:0; top:13px; }
.agreeWrap .agreeList .agreeBox{ padding:25px; border:1px solid #d1d1d1; }
.agreeWrap .agreeList .agreeBox p{ color:#666; line-height:1.5; padding:5px; }
.agreeWrap .agreeList .agreeCheck{ margin-top:26px; }
.agreeWrap .agreeList .agreeCheck label{ font-size:20px; }
.agreeWrap .agreeList .agreeCheck input[type="checkbox"]{
    display: none;
}
.agreeWrap .agreeList .agreeCheck input[type="checkbox"] + label{
    display: inline-block;
    position: relative;
    padding-left:30px;
}
.agreeWrap .agreeList .agreeCheck input[type="checkbox"] + label::before{
    display:block;
    content:'';
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height:20px;
    text-align: center;
    position: absolute;
    left: 0;
    top:5px;
    border:1px solid #ddd;
    color:blue;
}

.agreeWrap .agreeList .agreeCheck input[type="checkbox"]:checked + label::before{
    content:'✔';
}

.agreeBtn{ margin-top:50px; }
.btnBox button{ width:200px; text-align:center; font-size:20px; }
.agreeBtn button{ border-radius:50px; padding:10px 15px; }
.agreeBtn button + button{ margin-left:20px; }
.whiteBtn{ border:1px solid #333; background:#fff; color:#333 }
.brownBtn{ border:1px solid #86654b; background:#86654b; color:#fff; }

@media(max-width:1080px){
    .agreeWrap{ margin-top:40px; }
    .agreeWrap .agreeList .agreeCheck{ margin-top:10px; }
    .btnBox button{ font-size:18px; }
}
@media(max-width:780px){
    .agreeWrap .agreeList + .agreeList{ margin-top:30px; }
    .agreeWrap .agreeList h3{ font-size:18px; padding-bottom:15px; margin-bottom:15px; }
    .agreeWrap .agreeList h3:after{ top:8px; }
    .agreeWrap .agreeList .agreeBox{ padding:15px; }
    .agreeWrap .agreeList .agreeCheck label{ font-size:16px; }
    .agreeWrap .agreeList .agreeCheck input[type="checkbox"] + label{ padding-left:28px; }
    .agreeWrap .agreeList .agreeCheck input[type="checkbox"] + label::before{ width:15px; height:15px; }

    .agreeBtn{ margin-top:30px; }
    .btnBox button{ width:150px; font-size:16px; }
}

@media(max-width:380px){
    .agreeBtn{ margin-top:30px; }
    .btnBox button{ font-size:14px; width:100px; }
    .agreeBtn button + button{ margin-left:10px; }
    .agreeWrap .agreeList .agreeBox p{ font-size:14px; }
    .agreeWrap .agreeList .agreeCheck label{ font-size:14px; }
    .agreeWrap .agreeList .agreeCheck input[type="checkbox"] + label::before{ top:2px; }
}

/* 스크롤 스타일 */
.scrollTable .scrollBody{ height:auto; overflow-y:auto; max-height:400px; }
.scrollTable .scrollBody::-webkit-scrollbar{ width:0; }
.scrollTable .scrollBody::-webkit-scrollbar-thumb{ background:#0f1957; border-radius:10px; background-clip:padding-box; border:1px solid transparent; }
.scrollTable .scrollBody::-webkit-scrollbar-track{ background:white; border-radius:10px; box-shadow:inset 0px 0px 5px white; }