@charset "UTF-8";
/* 메인(index.jsp) 전용 — publish mainPageCommon.css 의 main_intro 섹션을 그대로 이식(.main-index 스코프)
   + main_intro.css(soccer)의 type1 배경 이미지. 구조·수치는 퍼블리싱 원본과 동일하게 유지한다. */

/* [main responsive] 표시 유틸 — mainPageCommon 이식 (메인 전용) */
.main-pc-only { display: block !important; }
.main-pc-flex-only { display: flex !important; }
.main-pc-inline-flex-only { display: inline-flex !important; }
.main-pc-inline-only { display: inline !important; }
.main-pc-tablet-only { display: block !important; }
.main-pc-tablet-flex-only { display: flex !important; }
.main-pc-tablet-table-only {display: table !important;}

.main-tablet-only,
.main-mo-only,
.main-tablet-mo-only,
.main-pc-mo-only,
.main-tablet-flex-only,
.main-mo-flex-only,
.main-tablet-mo-flex-only,
.main-pc-mo-flex-only,
.main-tablet-inline-flex-only,
.main-mo-inline-flex-only,
.main-tablet-mo-inline-flex-only,
.main-pc-mo-inline-flex-only,
.main-tablet-inline-only,
.main-mo-inline-only,
.main-tablet-mo-inline-only,
.main-pc-mo-inline-only,
.main-mo-table-only{
    display: none !important;
}

@media (max-width: 1500px) and (min-width: 767px) {
    .main-pc-only,
    .main-pc-flex-only,
    .main-pc-inline-flex-only,
    .main-pc-inline-only {
        display: none !important;
    }
    .main-tablet-only { display: block !important; }
    .main-tablet-flex-only { display: flex !important; }
    .main-tablet-inline-flex-only { display: inline-flex !important; }
    .main-tablet-inline-only { display: inline !important; }
    .main-pc-tablet-only { display: block !important; }
    .main-pc-tablet-flex-only { display: flex !important; }
    .main-pc-tablet-inline-flex-only { display: inline-flex !important; }
    .main-pc-tablet-inline-only { display: inline !important; }
    .main-tablet-mo-only { display: block !important; }
    .main-tablet-mo-flex-only { display: flex !important; }
    .main-tablet-mo-inline-flex-only { display: inline-flex !important; }
    .main-tablet-mo-inline-only { display: inline !important; }
}

@media (max-width: 767px) {
    .main-pc-only,
    .main-pc-flex-only,
    .main-pc-inline-flex-only,
    .main-pc-inline-only,
    .main-tablet-only,
    .main-tablet-flex-only,
    .main-tablet-inline-flex-only,
    .main-tablet-inline-only,
    .main-pc-tablet-only,
    .main-pc-tablet-flex-only,
    .main-pc-tablet-inline-flex-only,
    .main-pc-tablet-inline-only,
    .main-pc-tablet-table-only {
        display: none !important;
    }
    .main-mo-only { display: block !important; }
    .main-mo-flex-only { display: flex !important; }
    .main-mo-inline-flex-only { display: inline-flex !important; }
    .main-mo-inline-only { display: inline !important; }
    .main-mo-table-only { display: table !important; }
    .main-pc-mo-only { display: block !important; }
    .main-pc-mo-flex-only { display: flex !important; }
    .main-pc-mo-inline-flex-only { display: inline-flex !important; }
    .main-pc-mo-inline-only { display: inline !important; }
    .main-tablet-mo-only { display: block !important; }
    .main-tablet-mo-flex-only { display: flex !important; }
    .main-tablet-mo-inline-flex-only { display: inline-flex !important; }
    .main-tablet-mo-inline-only { display: inline !important; }
}

/* main_intro — #sec1 (mainPageCommon 원본 수치 그대로) */
#sec1 {width:100%;padding:26px 0 60px;}
#sec1 > .content-wrap{width:100%;max-width:1760px;margin:0 auto;display:flex;align-items:stretch;}
#sec1 .main-con-box.type1 {flex:1;height: 100%;}
#sec1 .flex-wrap.first {width:760px;}
#sec1 .flex-wrap.first + .flex-wrap {flex:1;}
#sec1 .title-wrap > h2 {color:var(--color-primary);word-break:keep-all;}
.main-index .bottom-flex {flex-wrap:wrap;}
.main-index .bottom-flex .main-con-box {flex:initial;}
/* 하단(퍼블 tennis 동일): 첫 카드(대관이용안내) 전폭 + 나머지(담당자·옥외광고) 2단 */
.main-index .bottom-flex > *:nth-child(1) {width:100%;}
.main-index .bottom-flex > *:not(:first-child) {width:calc(50% - 10px);}

/* 구조 */
.main-index .main-con-wrap {width:100%;}
.main-index .main-con-wrap .flex-wrap {width:100%;}
.main-index .main-con-wrap .flex-wrap + .flex-wrap {margin-top:20px;}
.main-index .main-con-wrap .flex-wrap.switch-ver > .flex-wrap + .flex-wrap {margin-top:0;}

/* main-con-box 색상 박스 */
.main-index .notice-wrap {border-radius:16px;background-color:var(--color-yellow);padding:30px 20px;flex:1;}
.main-index .notice-wrap > p + p {margin-top:12px;}
.main-index .notice-wrap > .notice-sub-list {margin:0;margin-top:12px;}
.main-index .notice-wrap > p > span {margin-left:12px;}
.main-index .main-con-box{display:block;border-radius:16px;padding:40px 32px;}
.main-index .main-con-box:hover{box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);transition: box-shadow 0.3s;}
.main-index .main-con-box.blue {background-color:#D2E1FF}
.main-index .main-con-box.orange {background-color:#FFF2E4}
.main-index .main-con-box.green {background-color:#E7FFE8}
.main-index .main-con-box.skyblue {background-color:#EAF4FF}
.main-index .main-con-box.purple {background-color:#EAE3FF}
.main-index .main-con-box.red {background-color:#FFEEED;}
.main-index .main-con-box.gray {background-color:#EFEFEF}
.main-index .main-con-box.type1 {padding:60px 40px;background-image:url(../../images/main/main1_culture.png);background-repeat:no-repeat;background-position:calc(100% - 27px) calc(100% - 24px);}
.main-index .main-con-box.type6 {flex:1;padding:27px 32px;}
/* 이미지 표시 크기는 퍼블(mainPageCommon) 자연 크기에 맞춤 — 소스 PNG 가 커서 background-size 로 폭 고정 */
.main-index .main-con-box.type2 {background-image: url(../../images/main/main2.png);background-repeat:no-repeat;background-position:calc(100% - 32px) bottom;background-size:198px;height:246px;}
.main-index .main-con-box.type3 {background-image: url(../../images/main/main3.png);background-repeat:no-repeat;background-position:calc(100% - 32px) bottom;background-size:171px;height:246px;}
.main-index .main-con-box.type4 {background-image: url(../../images/main/main4.png);background-repeat:no-repeat;background-position:calc(100% - 32px) bottom;background-size:198px;height:246px;}
.main-index .main-con-box.type5 {height:246px;}
.main-index .bottom-flex .title-wrap h3,
.main-index .bottom-flex .title-wrap p {word-break:keep-all;}
.main-index .main-con-box .link-btn:hover {background:var(--color-white) url(/culture/common/images/ico/ico_arrow_lg_active.svg) center center no-repeat;background-size:28px;}
.main-index .title-wrap .link-btn {margin-top:12px;display:inline-flex;}

/* 공지사항 */
.main-index .notice-sub-list {margin-top:12px;margin-bottom:17px;}
.main-index .notice-sub-list > li {font-size:var(--txt-size04);font-weight:var(--fw-medium);color:var(--color-text);}
.main-index .main-con-box.type6 .notice-sub-list > li + li {margin-top:6px;}
.main-index .main-con-box.type6 .notice-sub-list > li > a {display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

@media (max-width:1760px) {
    #sec1 > .content-wrap {width:100%;padding:20px;}
}

@media (max-width:1500px) {
    #sec1 .flex-wrap.first {width:100%;}
    #sec1 .title-wrap > h4.txt-big {font-size:var(--txt-size07);}
    .main-index .main-con-box.type1 {padding:40px 32px;background-position:calc(100% - 32px) calc(100% - 23px);background-size:200px;height:350px;}
    .main-index .flex-wrap.dynamic-col {flex-direction:column;}
    .main-index .flex-wrap.switch-ver {flex-direction:column;}
    .main-index .same-height {height:auto;}
    .main-index .flex-wrap.first-type + .flex-wrap {margin-top:0;}
}

@media (max-width:767px) {
    #sec1 .flex-wrap.first {width:100%;}
    #sec1 .flex-wrap {gap:8px;}
    #sec1 .title-wrap * {padding:0;}
    .main-index .main-con-box {padding:12px;}
    .main-index .main-con-box.type1 {padding:14px 16px;background-position:calc(100% - 12px) calc(100% - 12px);background-size: 150px;height:173px;}
    /* 모바일: 3개 카드 한 줄(33.3%)이라 좁아 이미지 숨김 — 퍼블 tennis 동일 */
    .main-index .main-con-box.type2,
    .main-index .main-con-box.type3,
    .main-index .main-con-box.type4 {background-image:none;min-height:116px;height:auto;}
    .main-index .main-con-box.type5 {min-height:116px;height:auto;}
    .main-index .main-con-box.type6:hover {box-shadow:none;}
    .main-index .main-con-box.type6 .link-btn:hover{background:var(--color-white) url(/culture/common/images/ico/ico_arrow_sm_active.svg) center center no-repeat;background-size:20px;}
    .main-index .main-con-box:not(.type6):hover .link-btn {background:var(--color-white) url(/culture/common/images/ico/ico_arrow_sm_active.svg) center center no-repeat;background-size:20px;}

    .main-index .main-con-wrap .flex-wrap + .flex-wrap {margin-top:8px;}
    .main-index .main-con-wrap .flex-wrap + .flex-wrap.tablet-mo-flex-only {margin-top:0;}
    .main-index .flex-wrap.dynamic-col > .flex-wrap.top-flex + .flex-wrap {margin-top:0!important;}
    #sec1 {padding:20px 0 0;}
    #sec1 .title-wrap + .main-con-box.type1 {margin-top:0;height: 100%;}
    #sec1 .flex-wrap.first + .flex-wrap {flex:1;}
    #sec1 .title-wrap * {text-align:left;}

    .main-index .notice-wrap {padding:16px;}
    .main-index .notice-wrap > .notice-sub-list {margin-top:4px;}
    .main-index .notice-wrap + .main-con-box {padding:14px 16px;}
    .main-index .bottom-flex .title-wrap {display:flex;flex-direction:column;height:100%;justify-content:space-between;}
    /* 모바일: 대관이용안내·담당자·옥외광고 한 줄에 3개 — 퍼블 tennis 동일 */
    .main-index .bottom-flex > *:nth-child(1),
    .main-index .bottom-flex > *:not(:first-child) {width:calc(33.3% - 5.33px);}
    .main-index .notice-wrap > p > span {margin-left:8px;}

    .main-index .notice-sub-list {margin-top:8px;margin-bottom:0;}
    .main-index .main-con-box.type6 {margin-top:12px;padding:20px 0;border-radius:0;position:relative;}
    .main-index .main-con-box.type6::before {content:'';width:calc(100% + 40px);height:100%;background-color:#EFEFEF;position:absolute;left:-20px;top:0;z-index: -1;}
    .main-index .main-con-box.type6 .title-wrap {min-height:36px;display:flex;align-items:center;}
    .main-index .main-con-box.type6 .link-btn {position:absolute;right:0;top:20px;}
}