@charset "UTF-8";

.mainner{position:relative; margin:0 auto; padding:0 40px; width:1760px; }
.mainner:after{display:block; content:''; clear:both;}

@media all and (max-width:1760px){
	.mainner{padding:0 40px; width:100%; }
}
@media all and (max-width:1024px){
	.mainner{padding:0 30px;}
}
@media all and (max-width:425px){
	.mainner{padding:0 20px;}
}

/*!메인 헤더*/
#header{position:relative; transition:.3s; z-index: 40;}
#header.whiteBg{position:relative; background:transparent; transition:.3s;}
#header.whiteBg #gnb .depth1,
#header.whiteBg .top .util .logList .srh, 
#header.whiteBg .top .util .logList a,
#header.whiteBg .top .linkLang a,
#header.whiteBg #gnb .depth1 i{color:#fff; text-shadow: 0 0 3px #000;}

/*?메인 비쥬얼*/
#main .visual{position:relative; display:flex; padding:80px 0 160px 0; }
#main .visual .imgSlide{position:absolute; left:0; top:-180px; width:100%; height:calc(100% + 180px); z-index:-1; overflow:hidden;}
#main .visual .imgSlide img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover;}
#main .visual::after{position:absolute; content:''; left:0; bottom:0; width:100%; height:80px; background:#fff; border-radius:0 200px 0 0; }
/* #main .visual::before{position:absolute; content:''; left:0; top:0; width:100%; height:100%; background:url(../img/main/visual.jpg) no-repeat 50% 50%; background-size:cover; z-index:-1;} */
#main .visual .tit{font-family: var(--style-font); display:inline-flex; flex-direction:column; font-size: 4.0rem; color:#fff; text-shadow: 0 0 8px #000; font-weight: 600;}
#main .visual .tit .em{font-size: 6.4rem; line-height:1.2;}
#main .visual .srhBox{display:flex; gap:4px; margin:40px auto 0 auto; padding:4px; width:760px; height:80px; background:#fff; border-radius:100px; box-shadow:0 0 24px rgba(0,0,0,0.8);}
#main .visual .srhBox input[type="text"]{padding-left:24px; border:0; border-radius:100px; background:transparent; flex:1; height:100%;  font-size: 2.5rem;}
#main .visual .srhBox input[type="text"]::placeholder{font-size: 2.5rem;}
#main .visual .srhBox .srbtn{display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:100%; background:var(--color-main) url(../img/common/search_w.svg) no-repeat 50% 50%; }

#main .visual .selBox{display:flex; gap:24px 16px; margin:60px auto; max-width:1600px; max-height: 400px; width:100%; padding:24px 40px; background:#F1F7F7; border-radius:24px 24px 0 24px; font-family: var(--style-font);}
#main .visual .selBox .scroll{flex:1; max-height:100%; overflow-y:auto;}
#main .visual .selBox .scroll::-webkit-scrollbar{width:8px; }
#main .visual .selBox .scroll::-webkit-scrollbar-thumb{background:var(--color-main); border-radius:100px;}
#main .visual .selBox .scroll::-webkit-scrollbar-track{background:#ddd; border-radius:100px;}
#main .visual .selBox .scroll::-webkit-scrollbar-button{display:none;}

#main .visual .selBox .fstList{display:flex; flex-direction:column; }
#main .visual .selBox .fstList > li{flex:1; }
#main .visual .selBox .fstList > li a{display:inline-flex; align-items:center; gap:16px; padding:20px; width:320px; color:#838CA8; font-size: 2.5rem; font-weight: 500; border-radius:16px 16px 0 16px; transition:.5s;}
#main .visual .selBox .fstList > li a.on{justify-content:center; text-align: center; color:#fff; transform:translateX(-100px); background:var(--gradient); box-shadow: 3px 7px 15px rgba(0,0,0,0.2);}
#main .visual .selBox .fstList > li:nth-child(1) a::before{content:''; background:url(../img/main/vis01.svg) no-repeat 50% 50%; width:30px; height:30px; background-size: contain;}
#main .visual .selBox .fstList > li:nth-child(2) a::before{content:''; background:url(../img/main/vis02.svg) no-repeat 50% 50%; width:30px; height:30px; background-size: contain;}
#main .visual .selBox .fstList > li:nth-child(3) a::before{content:''; background:url(../img/main/vis03.svg) no-repeat 50% 50%; width:30px; height:30px; background-size: contain;}
#main .visual .selBox .fstList > li:nth-child(4) a::before{content:''; background:url(../img/main/vis04.svg) no-repeat 50% 50%; width:30px; height:30px; background-size: contain;}
#main .visual .selBox .fstList > li a::before{display:none;}
#main .visual .selBox .fstList > li a.on::before{display:inline-block; }

#main .visual .selBox .sndList{flex:1; display:flex; flex-direction:column; gap:8px; }
#main .visual .selBox .sndList a{display:inline-flex; align-items:center; padding:20px 24px; background:#fff; border-radius:16px; font-size: 2.1rem; width:calc(100% - 16px);}
#main .visual .selBox .sndList a.on{gap:8px; background:var(--gradient); color:#fff; font-weight: 500; }
#main .visual .selBox .sndList a.on::before{display:inline-block; content:''; background:url(../img/main/checkCircle.svg) no-repeat 50% 50%; width:30px; height:30px; background-size:contain;}

#main .visual .selBox .trdList{width:calc(100% - 16px); display:flex; flex-direction:column; border:1px solid var(--color-main); border-radius:16px; overflow:hidden;}
#main .visual .selBox .trdList a{display:inline-flex; align-items:center; padding:16px 24px; font-size: 2.1rem; width:100%; border-bottom:1px solid #ccc; }
#main .visual .selBox .trdList > li:last-child a{border-bottom:0; }
#main .visual .selBox .trdList a.on{background:#fff; font-weight: 500;}

#main .visual .selBox .srhBtn{position:relative; display:inline-flex; justify-content:center; width:180px; background:linear-gradient(45deg, var(--color-sub), var(--color-sub2)); color:#fff; font-size: 3.2rem; padding-top:80px;  border-radius:16px 16px 0 16px; font-weight: 500; }
#main .visual .selBox .srhBtn::before{position:absolute; content:''; left:4px; bottom:4px; width:195px; height:140px; background:url(../img/main/imoz.svg) no-repeat 50% 50%; background-size:contain; transition:.3s;}
@keyframes rotateShake {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}

#main .visual .selBox .srhBtn:hover::before,
#main .visual .selBox .srhBtn:focus::before {
    animation: rotateShake 1.2s linear infinite;
}
#main .visual .selBox a{text-decoration: none;}

@media all and (max-width:1680px){
    #main .visual .tit{font-size: 3.2rem;}
    #main .visual .tit .em{font-size: 5.0rem;}
    #main .visual .selBox .fstList > li a.on{transform:translateX(-60px);}
}
@media all and (max-width:1440px){
    #main .visual{padding:40px 0 140px 0;}
    #main .visual .tit{text-align: center;}
    #main .visual .srhBox{width:650px; height:72px;}
    #main .visual .srhBox .srbtn{width:64px; height:64px; background-size:32px;}

    #main .visual .selBox{padding:24px; max-height:330px;}
    #main .visual .selBox .fstList > li a{padding:0 16px; width:250px; height:100%; font-size: 2.1rem;}
    #main .visual .selBox .fstList > li a.on{transform:translateX(-40px);}
    #main .visual .selBox .srhBtn{width:120px; font-size: 2.5rem;}
    #main .visual .selBox .srhBtn::before{width:120px; height:90px; left:16px;}
    #main .visual .selBox .sndList a{padding:16px 24px; font-size: 1.9rem;}
    #main .visual .selBox .trdList a{font-size: 1.9rem;}
}
@media all and (max-width:1024px){
    #main .visual .tit{font-size: 2.5rem;}
    #main .visual .tit .em{font-size: 4rem;}
    #main .visual .selBox{flex-wrap:wrap; height:auto; max-height:none;}
    #main .visual .selBox .fstList{flex-direction:row; flex:1; background:#fff; border-radius:16px;}
    #main .visual .selBox .fstList > li{width:25%;}
    #main .visual .selBox .fstList > li a{padding:16px; width:100%; justify-content:center; gap:4px;}
    #main .visual .selBox .fstList > li a.on{transform:translateY(-10px);}
    #main .visual .selBox .sndList a,
    #main .visual .selBox .trdList{width:calc(100% - 8px);}
    #main .visual .selBox .scroll{flex:0 1 calc(100% / 2 - 8px); max-height:220px;}
    #main .visual .selBox .srhBtn{width:100%; padding:16px;}
    #main .visual .selBox .srhBtn::before{left:auto; right:16px; bottom:-10px; }
}
@media all and (max-width:768px){
    #main .visual{padding-bottom:100px;}
    #main .visual::after{height:60px;border-radius:0 40px 0 0;}
    #main .visual .tit{ font-size: 2.1rem;}
    #main .visual .tit .em{font-size: 3.2rem;}
    #main .visual .srhBox{margin-top:24px; height:64px; width:100%; font-size: 2.1rem;}
    #main .visual .srhBox input[type="text"]{font-size: 2.1rem;}
    #main .visual .srhBox input[type="text"]::placeholder{font-size: 2.1rem;}
    #main .visual .srhBox .srbtn{width:56px; height:56px;}
    #main .visual .selBox{margin:40px auto; padding:16px;}
    #main .visual .selBox .fstList > li a{flex-direction:column; padding:16px 4px; font-size: inherit;}
    #main .visual .selBox .fstList > li a::before{width:24px !important; height:24px !important;}
    #main .visual .selBox .fstList > li a.on{transform:none;}
    #main .visual .selBox .sndList a{padding:12px 16px; font-size: inherit;}
    #main .visual .selBox .sndList a.on::before{width:24px; height:24px;}
    #main .visual .selBox .scroll{flex:auto; width:100%; max-height:200px;}
    #main .visual .selBox .trdList a{padding:12px 16px;font-size: inherit;}
    #main .visual .selBox .srhBtn{font-size: 2.1rem;}
    #main .visual .selBox .srhBtn::before{width:90px; height:70px;}
}
@media all and (max-width:480px){
    #main .visual{padding:24px 0 104px 0;}
    #main .visual::after{height:40px;}
    #main .visual .tit{font-size: 1.7rem;}
    #main .visual .tit .em{font-size: 2.5rem;}
    #main .visual .srhBox{margin-top:16px; height:56px;}
    #main .visual .srhBox .srbtn{width:48px; height:48px; background-size:24px;}
    #main .visual .srhBox input[type="text"]{padding-left:16px; font-size: 1.9rem; width:calc(100% - 56px);}
    #main .visual .srhBox input[type="text"]::placeholder{font-size: 1.9rem !important;}
    #main .visual .selBox{margin:24px auto;}
    #main .visual .selBox .scroll{max-height:190px;}
    #main .visual .selBox .fstList{flex-wrap:wrap;}
    #main .visual .selBox .fstList > li{width:50%; flex:auto;}
    #main .visual .selBox .fstList > li a{flex-direction:row;}
    #main .visual .selBox .fstList > li a::before{width:20px !important; height:20px !important;}
    #main .visual .selBox .srhBtn::before{width:70px; height:60px; right:-4px;}
}

/*!메인 수정(26.03.31~)*/
#main .visFlex{display:flex; align-items:center; gap:60px; }
#main .visFlex::after{display:none;}
#main .visFlex .quickGo{flex:1; display:flex; flex-direction:column; gap:80px; min-width:0; width:100%;}
#main .visFlex .quickGo .div{position:relative; padding:40px; width:100%; background:#fff; border-radius:40px 0 40px 40px; display:flex; gap:40px;}
#main .visFlex .quickGo .div .goDetail{position:absolute; right:0; top:-40px; width:230px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:20px 20px 0 0; background:rgba(255,255,255,0.6); font-family: var(--style-font); gap:8px; font-weight:600; text-decoration: none; transition:.3s;}
#main .visFlex .quickGo .div .goDetail:hover,
#main .visFlex .quickGo .div .goDetail:focus{background:#fff; color:var(--color-sub2);}
#main .quickGo .lt{display:inline-flex; flex-direction:column; gap:24px;}
#main .quickGo .lt .title{font-size:2.8rem ; font-weight: 600; font-family: var(--style-font);}
#main .quickGo .lt .dateTime{display:inline-flex; flex-direction:column; gap:16px; min-width:170px;}
#main .quickGo .lt .dateTime .dateIcon{position:relative; }
#main .quickGo .lt .dateTime .date{font-family: var(--style-font); font-size: 2.5rem; font-weight: 600;}
#main .quickGo .lt .dateTime .dateIcon input{position:absolute; right:0; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; text-indent:-9999px; color:transparent; border-radius:0; padding:0;}
#main .quickGo .lt .dateTime .dateIcon input::-webkit-calendar-picker-indicator{right:0; width:40px; height:40px; background:url(../img/main/calendar.svg) no-repeat 50% 50%; cursor:pointer; background-size: contain;}
#main .quickGo .lt .dateTime .date .month,
#main .quickGo .lt .dateTime .date .day{color:var(--color-main);}
#main .quickGo .lt .dateTime .timeSel select{width:100%;}
#main .quickGo .rt{display:flex; flex-direction:column; gap:24px; flex:1; width:100%; min-width:0; position:relative;}
#main .quickGo .rt .swiper{width:100%; max-width:100%;}
#main .quickGo .rt .facTab{display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 8px;}
#main .quickGo .rt .facTab a{display:inline-flex; align-items:center; justify-content:center; padding:4px 16px; border-radius:100px; border:1px solid #ccc; color:#676767; font-family: var(--style-font); font-size: 1.5rem; min-width:80px; text-decoration: none;}
#main .quickGo .rt .facTab a.on{background:#FFE115; border:0; color:#000; font-weight: 500;}
#main .quickGo .rt .facList{display:flex;}
#main .quickGo .rt .facList li{width:calc(100% / 4 - 18px);}
#main .quickGo .rt .facList a{position:relative; display:inline-block; background:#f4f9fb; border-radius:20px 20px 0 20px; overflow: hidden; width:100%; text-decoration: none;}
#main .quickGo .rt .facList a .imgW{position:relative; padding-top:65%; background:url(../img/common/noimg.jpg) no-repeat 50% 50%; overflow:hidden;}
#main .quickGo .rt .facList a .imgW img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; object-fit: cover;}
#main .quickGo .rt .facList a .imgW .state{position:absolute; left:8px; bottom:8px; z-index: 1; background:rgba(0,0,0,0.8); color:#fff; font-weight: 500; font-size: 1.5rem;border-radius:100px; padding:4px 20px;}
#main .quickGo .rt .facList a .listit{display:block; padding:12px; font-size: 1.9rem; text-align:center; font-family: var(--style-font); font-weight: 500; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
#main .quickGo .rt [class*="swiperNext"],
#main .quickGo .rt [class*="swiperPrev"]{top:auto; bottom:30%;}
@media all and (max-width:1680px){
    #main .quickGo .rt [class*="swiperNext"],
    #main .quickGo .rt [class*="swiperPrev"]{width:40px; height:40px;}
    #main .quickGo .rt .facList a .listit{font-size: 1.7rem;}
}
@media all and (max-width:1440px){
    #main .visFlex{flex-direction:column; gap:40px;}
}
@media all and (max-width:1024px){
    #main .visFlex .quickGo .div{flex-direction:column; gap:24px; padding:24px; border-radius:24px 0 24px 24px;}
    #main .quickGo .lt{flex-direction:row; gap:40px;}
    #main .quickGo .lt .title{display:inline-flex; align-items:center;}
    #main .quickGo .lt .dateTime{flex-direction:row; }
    #main .quickGo .lt .dateTime .date{display:inline-flex; align-items:center;}
    #main .quickGo .lt .dateTime .date br{display:none;}
    #main .quickGo .lt .dateTime .date .month,
    #main .quickGo .lt .dateTime .date .day{padding-left:4px;}
    #main .quickGo .lt .dateTime .dateIcon{display:inline-flex; align-items:center; padding-right:40px;}
    #main .quickGo .lt .dateTime .dateIcon input{width:32px; height:32px;}
    #main .quickGo .lt .dateTime .dateIcon input::-webkit-calendar-picker-indicator{width:32px; height:32px;}
}
@media all and (max-width:768px){
    #main .visFlex{gap:60px;}
    #main .visFlex .quickGo{gap:60px;}
    #main .quickGo .lt{flex-wrap:wrap; gap:0px 40px;}
    #main .quickGo .lt .dateTime .date{font-size: 2.1rem;}
    #main .visFlex .quickGo .div{gap:16px;}
    #main .visFlex .quickGo .div .goDetail{width:190px;}
    #main .quickGo .rt .facTab{gap:4px;}
    #main .quickGo .rt .facTab a{font-size: 1.3rem; min-width:60px;}
    #main .quickGo .rt .facList a{border-radius:16px 16px 0 16px;}
    #main .quickGo .rt .facList a .imgW .state{font-size: 1.3rem;}
    #main .quickGo .lt .dateTime{flex-wrap:wrap; gap:4px 16px;}
}
@media all and (max-width:480px){
    #main .visFlex{gap:16px;}
    #main .quickGo .lt,
    #main .quickGo .lt .dateTime,
    #main .quickGo .rt .facTab{justify-content:center;}
    #main .quickGo .rt{gap:16px;}
    #main .quickGo .lt{flex-direction:column; align-items:center;}
    #main .quickGo .lt .title{font-size: 2.5rem;}
    #main .visFlex .quickGo .div{border-radius:16px 16px 0 0;}
    #main .visFlex .quickGo .div .goDetail{width:100%; top:auto; bottom:-40px; border-radius:0 0 16px 16px;}
    #main .quickGo .lt .dateTime .dateIcon input,
    #main .quickGo .lt .dateTime .dateIcon input::-webkit-calendar-picker-indicator{width:28px; height:28px;}
}

/*?메인 공통 타이틀*/
#main .titArea{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px 40px; margin-bottom:24px;}
#main .titArea .tit{font-family: var(--style-font); font-size: 4.0rem; font-weight: 600; }
#main .titArea .tit .stxt{padding-left:16px; font-size: 2.8rem; font-weight: 400; color:#444;}
#main .titArea .tabBtn{display:inline-flex; align-items:center; gap:8px; background:#EBEEF1; border-radius:100px; padding:4px; }
#main .titArea .tabBtn > li:not(.last){flex:1;}
#main .titArea .tabBtn > li:not(.last) a{display:inline-flex; align-items:center; justify-content:center; padding:0 16px; height:40px; border-radius:100px; white-space:nowrap; text-decoration: none;}
#main .titArea .tabBtn a.on{background:#414e83; color:#fff; font-weight: 500;}
#main .titArea .tabBtn a.more{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:100%; background:#fff; text-decoration: none; transition:.3s;}
#main .titArea .tabBtn a.more:hover,
#main .titArea .tabBtn a.more:focus{transform:rotate(180deg);}
@media all and (max-width:768px){
    #main .titArea .tit{display:inline-flex; flex-direction:column; flex-wrap:wrap; font-size: 3.2rem;}
    #main .titArea .tit .stxt{padding-left:0; font-size: 2.1rem;}
}
@media all and (max-width:480px){
    #main .titArea{margin-bottom:16px;}
    #main .titArea .tit{font-size: 2.5rem;}
    #main .titArea .tit .stxt{font-size: 1.7rem;}
    #main .titArea .tabBtn > li:not(.last) a{padding:0 8px; height:32px;}
    #main .titArea .tabBtn a.more{width:32px; height:32px;}
}

/*?교육강좌*/
#main .edu{position:relative; }
#main .eduList{display:flex;}
#main .eduList > li{width:calc(100% / 4 - 24px);}
#main .eduList a{position:relative; display:inline-block; padding:40px; background:#F5F5F5; border-radius:24px; width:100%; height:100%; text-decoration: none;}
#main .eduList a .blit{display:inline-flex; align-items:center; gap:8px; margin-bottom:24px;}
#main .eduList a .blit li{display:inline-block; padding:4px 16px; border-radius:100px; font-weight: 500; font-family: var(--style-font);}
#main .eduList a .blit li.div1{background:var(--color-main); color:#fff;}
#main .eduList a .blit li.div2{background:#fff; color:var(--color-main);}
#main .eduList a .tit{font-size: 2.5rem; font-weight: 500; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 2; overflow:hidden; text-overflow: ellipsis; font-family: var(--style-font); min-height:75px;}
#main .eduList a .etc{margin-top:16px; padding-top:16px; border-top:1px dashed #676767; font-size: 1.9rem; color:#444;}
#main .eduList a .etc .em{font-weight: 500;}
#main .eduList a .state{position:absolute; right:0; top:0; background:#fff; border-radius:0 0 0 24px; width:120px; height:56px;}
#main .eduList a .state p{position:absolute; right:0; top:0; display:inline-flex; align-items:center; justify-content:center; border-radius:100px; border:2px solid var(--color-sub2); font-weight: 600; color:var(--color-sub2); padding:2px 16px; height:40px; width:104px;}
#main .eduList a .state::before,
#main .eduList a .state::after{position:absolute; content:''; width:24px; height:24px; background:url(../img/main/shape.svg) no-repeat 50% 50%; background-size:cover; transform:rotate(270deg);}
#main .eduList a .state::before{left:-24px; top:0;}
#main .eduList a .state::after{bottom:-24px; right:0;}
@media all and (max-width:1760px){
    #main .eduList > li{padding-top:40px;}
    #main .eduList a{padding:40px 24px 24px;}
    #main .eduList a .state{width:auto; height:auto; padding:8px; top:0; right:50%; transform:translate(50%, -50%); border-radius:0 0 24px 24px;}
    #main .eduList a .state p{position:relative; right:auto; top:auto; padding:4px 16px; height:auto; width:auto;}
    #main .eduList a .state::before, #main .eduList a .state::after{display:none;}
    #main .eduList a .blit{width:100%; justify-content:center;}
    #main .eduList a .blit li{font-size: 1.5rem;}
}
@media all and (max-width:1024px){
    #main .eduList a .tit{font-size: 2.1rem; min-height:64px}
    #main .eduList a .etc{font-size: inherit;}
}
@media all and (max-width:768px){
    #main .eduList > li{padding-top:24px;}
    #main .eduList a .tit{font-size: 1.9rem; min-height:57px;}
    #main .eduList a .state p{font-size: 1.5rem;}
}
@media all and (max-width:480px){
    #main .eduList a{padding:32px 20px 20px; border-radius:16px;}
    #main .eduList a .tit{min-height:auto;}
    #main .eduList a .blit{margin-bottom:16px;}
    #main .eduList a .blit li{font-size: 1.3rem; font-weight: 400;}
    #main .eduList a .state{padding:6px;}
    #main .eduList a .state p{padding:2px 16px; border:1px solid var(--color-sub2);}
    #main .eduList a .etc{margin-top:12px; padding-top:12px;}
}

/*?대관시설*/
#main .rent{position:relative; margin-top:80px;}
#main .rentList{display:flex;}
#main .rentList > li{width:calc(100% / 4 - 24px); height:auto;}
#main .rentList a{position:relative; display:inline-block; width:100%; height:100%; text-decoration: none; background:#f5f5f5; border-radius:24px 24px 0 24px; overflow:hidden;}
#main .rentList a .imgW{position:relative; padding-top:50%; border-radius:0 0 0 24px; overflow:hidden;}
#main .rentList a .imgW img{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; object-fit: cover;}
#main .rentList a .txtW{position:relative; padding:40px 40px 32px 40px;}
#main .rentList a .txtW .tit{font-size: 2.5rem; font-weight: 500; font-family: var(--style-font);}
#main .rentList a .txtW .etc{margin-top:8px; display:inline-flex; flex-direction:column; gap:4px; color:#444;}
#main .rentList a .txtW .etc > li{display:inline-flex; gap:4px;}
#main .rentList a .txtW .etc i{transform:translateY(4px); font-size: 1.6rem;}
#main .rentList a .txtW .txt{position:absolute; left:40px; top:0; transform:translateY(-50%); z-index: 1; background:#111; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; padding:4px 16px; color:#fff; }
@media all and (max-width:1760px){
    #main .rentList a .txtW{padding:32px 24px 24px;}
    #main .rentList a .txtW .txt{left:24px;}
}
@media all and (max-width:1024px){
    #main .rentList a .txtW .tit{font-size: 2.1rem;}
}
@media all and (max-width:768px){
    #main .rent{margin-top:60px;}
    #main .rentList a .imgW{padding-top:80%;}
    #main .rentList a .txtW .tit{font-size: 1.9rem;}
    #main .rentList a .txtW .txt{font-size: 1.5rem;}
}
@media all and (max-width:480px){
    #main .rent{margin-top:40px;}
    #main .rentList a .imgW{padding-top:50%;}
    #main .rentList a .txtW{padding:24px 20px 20px;}
}


/*! swiper */
.swiper-button-next, 
.swiper-button-prev{width:45px; height:45px; border-radius:100%; border:1px solid #ccc; background:#fff; color:#111;}
#main .edu .swiper-button-next, 
#main .edu .swiper-button-prev{top:60%; }
#main .rent .swiper-button-next, 
#main .rent .swiper-button-prev{top:65%; }
.swiper-button-next:after, 
.swiper-button-prev:after{font-size: 20px;}
.swiper-button-next, .swiper-rtl .swiper-button-prev{right:-22px;}
.swiper-button-prev, .swiper-rtl .swiper-button-next{left:-22px;}
.swiper-button-next svg, 
.swiper-button-prev svg{display:none;}
@media all and (max-width:768px){
    #main .swiper-button-next, 
    #main .swiper-button-prev{top:70%;}
}
@media all and (max-width:480px){
    .swiper-button-next, 
    .swiper-button-prev{width:40px; height:40px;}
    #main .swiper-button-next, 
    #main .swiper-rtl .swiper-button-prev{right:-20px;}
    #main .swiper-button-prev, 
    #main .swiper-rtl .swiper-button-next{left:-20px;}
    #main .rentList a{border-radius:16px 16px 0 16px;}
    #main .rentList a .txtW .txt{left:20px;}
}


/*? 공지사항 */
#main .noti{position:relative; padding-bottom:120px; }
#main .noti .bg{position:absolute; width:1300px; height:1300px; background:linear-gradient(#fff, #D1DDFF); border-radius:100%; right:5%; top:50%; transform:translateY(-50%); }
#main .noti .bg::before{position:absolute; content:''; width:40%; height:40%; background:#eef2ff; border-radius:100%; left:50%; top:50%; transform:translate(-50%, -50%);}
#main .noti .notList{display:flex; gap:24px;} 
#main .noti .notList > li{flex:1;}
#main .noti .notList a{display:inline-block; background:#F4F9FB; padding:24px; border-radius:24px 24px 0 24px; width:100%; height:100%; text-decoration: none; transition:box-shadow .3s;}
#main .noti .notList a:hover,
#main .noti .notList a:focus{box-shadow:3px 7px 15px rgba(0,0,0,0.1);}
#main .noti .notList a .blit{display:inline-block; padding:4px 16px; margin-bottom:24px; border-radius:100px; text-align:center; color:#fff; background:#676767; font-family: var(--style-font);}
#main .noti .notList a .blit01{background:#2D764C;}
#main .noti .notList a .blit02{background:#794979;}
#main .noti .notList a .blit03{background:#495279;}
#main .noti .notList a .tit{font-size: 2.5rem; font-weight: 500; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 2; overflow:hidden; text-overflow: ellipsis; font-family: var(--style-font); min-height:75px; word-break: break-all;}
#main .noti .notList a .date{display:flex; justify-content:space-between; position:relative; margin-top:24px; padding-top:16px; border-top:1px dashed #676767; font-family: var(--style-font); color:#676767;}
#main .noti .notList a .date::after{content:''; width:24px; height:24px; background:#ccc url(../img/common/banner_arrow.svg) no-repeat 50% 50%; transform:rotate(180deg); background-size:7px; border-radius:100%;}
#main .noti .etcMenu{display:flex; gap:24px; margin-top:40px; }
#main .noti .etcMenu > li{flex:1;}
#main .noti .etcMenu a{position:relative; display:inline-flex; align-items:center; justify-content:space-between; padding:60px 40px 60px 150px; border-radius:24px 24px 0 24px; color:#fff; font-size:2.8rem ; font-weight: 600; font-family: var(--style-font); width:100%; height:100%; text-decoration: none; transition:box-shadow .3s;}
#main .noti .etcMenu a:hover,
#main .noti .etcMenu a:focus{box-shadow:3px 7px 15px rgba(0,0,0,0.1);}
#main .noti .etcMenu a::after{content:''; width:32px; height:32px; background:url(../img/common/aright_w.svg) no-repeat 50% 50%; background-size:contain;}
#main .noti .etcMenu a::before{position:absolute; content:''; width:90px; height:90px; background-size:contain !important; left:40px; top:50%; transform:translateY(-50%);}
#main .noti .etcMenu > li:nth-child(1) a::before{background:url(../img/main/etcMenu01.png) no-repeat 50% 50%;}
#main .noti .etcMenu > li:nth-child(2) a::before{background:url(../img/main/etcMenu02.png) no-repeat 50% 50%;}
#main .noti .etcMenu > li:nth-child(3) a::before{background:url(../img/main/etcMenu03.png) no-repeat 50% 50%;}
#main .noti .etcMenu > li:nth-child(1) a{background:#014FA1;}
#main .noti .etcMenu > li:nth-child(2) a{background:#147CBC;}
#main .noti .etcMenu > li:nth-child(3) a{background:#18866A;}
@media all and (max-width:1440px){
    #main .noti .etcMenu a{padding:40px 24px 40px 120px; gap:40px; font-size: 2.5rem;}
    #main .noti .etcMenu a::before{left:16px;}
}
@media all and (max-width:1024px){
    #main .noti .notList{gap:16px; flex-wrap:wrap;}
    #main .noti .notList > li{min-width:calc(100% / 2 - 8px);}
    #main .noti .notList a{border-radius:24px;}
    #main .noti .notList a .tit{min-height:64px;}
    #main .noti .notList a .tit,
    #main .noti .etcMenu a{font-size: 2.1rem;}
    #main .noti .etcMenu a{padding:40px 24px; gap:0; border-radius:24px;}
    #main .noti .etcMenu a::before{left:auto; top:auto; transform:none; right:0; bottom:0; opacity: .2;}
    #main .noti .etcMenu a::after{z-index: 1;}
}
@media all and (max-width:768px){
    #main .noti .notList a .blit{font-size: 1.5rem;}
    #main .noti .notList a .tit{font-size: 1.9rem; min-height:57px;}
    #main .noti .etcMenu{flex-direction:column; gap:16px;}
    #main .noti .etcMenu a{padding:24px; border-radius:16px; font-size: 1.9rem; overflow:hidden;}
    #main .noti .etcMenu a::before{width:80px; height:80px; bottom:-8px; right:40px;}
    #main .noti .notList a .date{font-size: 1.5rem;}
    
}
@media all and (max-width:480px){
    #main .noti{ padding-bottom:60px; }
    #main .noti a.more{border:1px solid #ccc;}
    #main .noti .titArea{gap:0;}
    #main .noti .titArea .tabBtn{background:transparent;}
    #main .noti .notList{flex-direction:column;}
    #main .noti .notList > li{min-width:auto; }
    #main .noti .notList a{padding:20px; border-radius:16px;}
    #main .noti .notList a .blit{margin-bottom:8px;}
    #main .noti .notList a .date{margin-top:8px; padding-top:8px;}
    #main .noti .etcMenu{margin-top:24px;}
    #main .noti .etcMenu a{font-size: 1.7rem;}
}