@charset "utf-8";

.fixed{position: fixed; top: 25%; left: calc(50% + 660rem); z-index: 200; transition: 0.3s;}
.fixed.on{ left: calc(50% + 750rem);}
.course_search{width: 140rem; padding: 36rem 15rem; border: 1px solid #eaeaea; background: #fff; border-radius: 70rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.course_search h3{font-family: var(--gmark ); font-size: 18rem; color: #121212; text-align: center; margin-bottom: 10rem;}
.c_select{position: relative; height: 30rem; border-radius: 5rem; color: #333; width: 100%; margin-bottom: 7rem;}
.c_select::after {position: absolute;content: "";border-right: 2px solid #595959;border-top: 2px solid #595959;width: 5px;height: 5px;right: 13px;top: 9px;transform: rotate(133deg);z-index: 200;}
.c_select select{width: 100%; height: 100%; font-size: 14rem; border-radius: 5rem; border: none; background: #f1f1f1; font-weight: 500; padding: 0 10rem; -webkit-appearance: none; /* 크롬, 사파리 기본 스타일 제거 */ -moz-appearance: none; /* 파이어폭스 기본 스타일 제거 */ appearance: none; /* 모든 브라우저에서 기본 스타일 제거 */
}
.c_select select::-ms-expand {display: none;}
.c_submit input{color: #969696; font-size: 14rem; width: 100%; background: #f1f1f1; border: none; height: 30rem; padding: 0 10rem; border-radius: 5rem;}  
.c_submit button{background: #9b3388; color: #fff; font-size: 14rem; font-weight: 500; width: 100%; border-radius: 5rem; margin-top: 7rem; height: 30rem;}

.fixed .sns{text-align: center; margin-top: 17rem;}
.fixed .sns a{display: block; width: 45rem; height: 45rem; text-indent: -9999px; background: url('../img/layout/sns_fb.png') no-repeat center center; background-size: cover; position: relative; left: 33%; margin-top: 5rem;}
.fixed .sns a.kakao{background-image: url('../img/layout/sns_ka.png');}
.fixed .sns a.insta{background-image: url('../img/layout/sns_in.png');}
.fixed .sns a.youtube {background-image: url('../img/layout/sns_yt.png');}

.cont1{background: url('../img/main/main_bg01.png'), url('../img/main/main_bg02.png'); background-repeat: no-repeat; background-position: right top, left top 40%;}
.cont1 .wrap{overflow: hidden;}

.visual{padding-top:40rem; padding-bottom:40rem; position: relative;}
.visual .swiper-slide > a{display: flex; align-items:flex-start; justify-content: space-between;}
.visual .swiper-slide > a dl {width:calc(100% - 560rem); margin-top:30px;}
.visual .swiper-slide > a dl dt {color:#121212; font-size:45rem; font-family:var(--gmark); font-weight: 500; line-height: 1.3; margin-bottom:30rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word;}
.visual .swiper-slide > a dl dd {color:#333; font-size:18rem; font-weight: 300; margin-left:3rem; min-height:140rem}
.visual .swiper-slide .img {width:500rem; position:absolute; right:0;}
.visual .swiper-slide .img img {width:100%;}


.visual .control{position: static; margin-top:40rem; bottom: 0; left: 0; display: flex; align-items: center; z-index: 8;}
.visual .control a{display: block; text-indent: -9999px; width: 37rem; height: 54rem; background: url('../img/main/vis_control.png') no-repeat; background-position-x: 0;}
.visual .control a.more{width: 53rem; height: 53rem; background-image: url('../img/main/con_more.png'); background-size: contain;}
.visual .control a.prev{background-position-x: -57px;}
.visual .control a.stop{background-position-x: -110px;}
.visual .control a.play{background-position-x: -165px; display: none;}
.visual .control a.next{background-position-x: -214px;}

.visual .control .count{font-size: 20rem; font-weight: 600; margin: 0 30rem;}
.visual .control .count em{font-weight: 400; position: relative; padding-left: 15rem; margin-left: 4rem;}
.visual .control .count em::before{position: absolute; content: '/'; left: 0rem;}

.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{width: auto !important;}



/*평생교육이용권 신청안내*/
.vis-txt .sub-tit {margin-top:-17rem; font-weight:500; margin-bottom:15rem; font-size:20rem;}
.vis-txt .dep1 > li {font-size:16rem; position:relative; padding-left:20rem; margin:3rem 0;}
.vis-txt .dep1 > li:before {content:''; position:absolute; top:10rem; left:6rem; width:4rem; height:4rem; background:#33a326; border-radius:50%;}
.vis-txt .dep2 > li {font-size:15rem; position:relative; padding-left:20rem; margin:3rem 0;}
.vis-txt .dep2 > li:before {content:''; position:absolute; top:11rem; left:6rem; width:5rem; height:1rem; background:#515151;}
.vis-txt .etc {margin:3rem 0;}


@media all and (max-width:1640px) {
    .fixed{display: none;}
    .cont1 {background:none;}
}
@media all and (max-width:1240px){
    .visual .swiper-slide > a dl {width:calc(100% - 450rem); margin-top:0;}
    .visual .swiper-slide .img {width:380px; height:100%;}
    .visual .swiper-slide .img img {position:absolute; bottom:0;}
}
@media all and (max-width:1023px){
    .visual .swiper-slide > a dl {width:100%;}
    .visual .swiper-slide > a dl dt {font-size:34rem; line-height:1.4; display:block; width:60%;}
    .visual .swiper-slide > a dl dd {width:60%;}
    .visual .swiper-slide .img {width:300px;}
}
@media all and (max-width:768px){
    .visual .swiper-slide > a dl dt {width:100%;}
    .visual .swiper-slide > a dl dd {width:100%;}
    .visual .swiper-slide .img {display:none;}
}
/*
@media all and (max-width:1200px) {
    .visual .swiper-slide > a dl dt{font-size: 40rem;}
    .visual .swiper-slide > a p{padding-left: 20rem;}
}
@media all and (max-width:1023px) {
    .cont1{background-image: none;}
}
@media all and (max-width:650px) {
    .visual{height: auto; padding-bottom: 82rem; margin-bottom: 50rem;}
    .visual .swiper-slide > a{flex-direction: column-reverse;}
    .visual .swiper-slide > a dl{width: 100%; margin-top: 0;}
    .visual .swiper-slide > a dl dt{font-size: 30rem;}
    .visual .swiper-slide > a dl dd{font-size: 17rem;}
    .visual .swiper-slide > a p{display: none;}
}
*/




.cont1 .quick{display: flex; justify-content: space-between}
.cont1 .quick li{width: 15.5%; text-align: center;}
.cont1 .quick li a{display: block; background: #fbecf8; padding: 98rem 18rem 18rem; border-radius: 30rem; font-size: 14rem; color: #580e4a; position: relative;}
.cont1 .quick li:nth-child(2) a{background: #e6e6f9; color: #1f0e58;}
.cont1 .quick li:nth-child(3) a{background: #e6f1f9; color: #0e3958;}
.cont1 .quick li:nth-child(4) a{background: #e6f9f3; color: #154722;}
.cont1 .quick li:nth-child(5) a{background: #f9f0e6; color: #473715;}
.cont1 .quick li:nth-child(6) a{background: #f9e6e6; color: #471515;}

.cont1 .quick li a::before{position: absolute; content: ''; background: url('../img/main/quick.png') no-repeat; width: 70rem; height: 70rem; background-position-x: 0; top: 17rem; left: 50%; transform: translateX(-50%);}
.cont1 .quick li:nth-child(2) a::before{background-position-x: -70px;}
.cont1 .quick li:nth-child(3) a::before{background-position-x: -140px;}
.cont1 .quick li:nth-child(4) a::before{background-position-x: -210px;}
.cont1 .quick li:nth-child(5) a::before{background-position-x: -280px;}
.cont1 .quick li:nth-child(6) a::before{background-position-x: -350px;}

.cont1 .quick li a em{font-size: 18rem; font-weight: 500; display: block; margin-bottom: 10rem;}

@media all and (max-width:1242px) {
    .cont1 .quick{flex-wrap: wrap;}
    .cont1 .quick li{width: 32.5%;}
    .cont1 .quick li:nth-child(1),
    .cont1 .quick li:nth-child(2),
    .cont1 .quick li:nth-child(3){margin-bottom: 1%;}
}
@media all and (max-width:1082px) {
    .cont1 .quick li a span{display: none;}
    .cont1 .quick li a em{font-size: 17rem; margin-bottom: 0;}
}

@media all and (max-width:400px) {
    .cont1 .quick li a{padding: 98rem 13rem 18rem; font-size: 16rem;}
}
@media all and (max-width:374px) {
    .cont1 .quick li{width: 49%;}
}

/* 재단소식, 포토갤러리 공통 */
.tabModule { position: relative; display: flex; align-items: center; }
.tabModule h2 { font-size: 30rem; font-weight: 600; margin-right: 30rem; }
.tabModule > .tabList { display: flex; align-items: center; }
.tabModule > .tabList h3 a { font-size: 18rem; color: #575757; font-weight: 400; padding: 6rem 14rem;  border:2px solid #ddd; border-radius: 50rem; margin-right:10rem;}
.tabModule > .tabList.on h3 a { color: #fff; background: #9b3388;  border-color:#9b3388;}

.tabModule .sliderList {position: absolute; top: 60rem; left: 0; width: 100%; display: none; }
.tabModule > .tabList.on .sliderList { display: block; }

.sliderList .slick-track {margin-right: 40px; padding: 20px 0; }
.sliderList .slick-slide {margin: 0 10px;}
.sliderList .slick-list {margin: 0 -10px;}

.sliderList > a.more{position: absolute; top: -42px; right: 0; font-size: 17rem; color: #444; font-weight: 300; padding-right: 18rem;}
.sliderList > a.more::before{position: absolute;content: "";border-right: 2px solid #595959; border-top: 2px solid #595959; width: 5px;height: 5px; right: 0; top: 10px;transform: rotate(45deg);}
.sliderList ul button{position: absolute; top: 42%; padding: 0; margin: 0; z-index: 10; text-indent: -9999px; background: url('../img/main/arrow.png') no-repeat; background-size: 200% 100%; width: 52rem; height: 52rem; left: -7%; background-position: left center;}
.sliderList ul button.slick-next{right: -7%; left: inherit; background-position: right center;}

/* 재단소식 */
.cont2{margin-top: 50rem; height: 370rem;}
.notice .sliderList ul li{display: inline-block;   vertical-align: top;}
.notice .sliderList ul li a{display: block; border: 1px solid #e3e3e3; border-radius: 30rem; padding: 30rem; transition: 0.2s;}
.notice .sliderList ul li a:hover{border-color: #999; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);}
.notice .sliderList ul li a dt{font-size: 20rem; font-weight: 500; margin-bottom: 20rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; word-break: keep-all; height: 68rem;}
.notice .sliderList ul li a dd{font-size: 17rem; font-weight: 300; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; word-break: break-all;}
.notice .sliderList ul li a dd.date{font-size: 15rem; margin-top: 10rem;}

/* 포토갤러리 */
.cont3{height: 450rem;}
.gallery .sliderList ul li a dl dt img{border-radius: 30rem; transition: 0.2s; border: 1px solid #e3e3e3; height: 234rem; width: 100%;}
.gallery .sliderList ul li a:hover dl dt img{border-color: #999; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);}
.gallery .sliderList ul li a dl dt span{display: block; font-size: 20rem; font-weight: 500; margin: 20rem 10rem 10rem 20rem; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap;}
.gallery .sliderList ul li a dl dd.date{font-size: 15rem; margin: 10rem 10rem 0 20rem;}
.gallery .sliderList ul button{top: 32%;}


@media all and (max-width:1450px) {
    .sliderList{padding: 0 10rem;}
    .sliderList ul button.slick-prev{left: -22px;}
    .sliderList ul button.slick-next{right: -22px;}
    /* .sliderList ul .slick-list{width: 95%;} */
}
@media all and (max-width:520px) {
    .cont2{height: 400rem;}
    .tabModule{padding-left: 17rem;}
    .tabModule .sliderList{top: 97rem; padding: 0 22rem;}
    .tabModule h2{position: absolute; top: 0}
    .tabModule{padding-top: 60rem;}
    .sliderList > a.more{width: 44rem; height: 44rem; background-image: url('../img/main/con_more.png'); background-size: contain; text-indent: -9999px; top: -36px; right: 17px;}
    .sliderList > a.more::before{display: none;}
}


/* 웹진소담 */
.cont4{background: linear-gradient(0deg, #eaeaf4, #fff);}
.webzine{padding: 30rem 0 50rem 617rem;position: relative;}
.webzine::before{position: absolute;content: "";background: url('../img/main/wz_bg.png') no-repeat center bottom;height: 255rem;width: 427rem;left: 7%;bottom: 0; background-size: contain;}
.webzine h2{font-size: 30rem; font-weight: 600;}
.webzine > p{font-size: 17rem; font-weight: 300; margin: 14rem 0 20rem 0;}
.webzine .web_btn{display: flex;}
.webzine .web_btn a{display: block; background: #fff; border-radius: 50rem; color: #9b3388;border: 1px solid #9b3388; padding: 11rem 25rem 11rem 70rem; position: relative; font-size: 17rem; font-weight: 600; margin-right: 20rem;}
.webzine .web_btn a::before{position: absolute;content: "";background: url('../img/main/wz_icon.png') no-repeat center; background-position-x: 0; width: 45rem;height: 38rem;left: 20rem;top: 50%;transform: translateY(-50%);}
.webzine .web_btn a.subscribe::before{background-position-x: -52px;}

@media all and (max-width:1100px) {
    .webzine{padding: 30rem 0 50rem 500rem;}
    .webzine::before{left: 0;}
}
@media all and (max-width:924px) {
    .webzine{padding: 30rem 0 30rem 320rem;}
    .webzine::before{width: 300rem;}
}
@media all and (max-width:707px) {
    .webzine{padding: 30rem 10rem 40rem 10rem;}
    .webzine::before{display: none;}
}
@media all and (max-width:520px) {
    .cont4{background: #eaeaf4;}
    .webzine{padding: 30rem 0 40rem 0; margin-top: 30rem;}
    .webzine > p br{display: none;}
    .webzine .web_btn a:last-child{margin-right: 0;}
    .webzine .web_btn a{padding: 8rem 18rem; margin-right: 10rem;}
    .webzine .web_btn a::before{display: none;}
}
/* 맵 */
.cont5{display: flex; padding: 70rem 0;}
.cont5 h2{font-size: 30rem; font-weight: 600;}
.cont5 h2 span{position: relative; display: inline-block; padding-right: 120rem;}
.cont5 h2 span::before{position: absolute; content: ""; background: url('../img/main/map_txt.png') no-repeat; background-size: contain; width: 108rem; height: 73rem; right: 0;}
.map_left{width: 49%;}
.map_left > p{font-size: 17rem; font-weight: 300; margin-top: 30rem;}

.map_img {max-width: 600px; margin-top: 40rem;}
.map_img img{width: 100%; height: auto;}

.map_right{width: 51%; margin-top: 50rem; padding-left: 50rem;}
.institution{width: 100%; position: relative;}
.institution h3{font-size: 28rem; font-weight: 600;}
.institution h3 span{color: #aa238b;}

.institution .more{position: absolute; top: 9px; right: 10px; font-size: 20rem; font-weight: 600; padding-right: 20rem;}
.institution .more::before{position: absolute; content: ""; border-right: 2px solid #595959; border-top: 2px solid #595959; width: 5px; height: 5px; right: 0; top: 13px; transform: rotate(45deg);}

.institution .more span{color: #aa238b; display: inline-block; position: relative; padding-left: 33rem;} 
.institution .more span::before{position: absolute; content: ""; left: 0; top: 2px; background: url('../img/main/map_icon.png') no-repeat; width: 24rem; height: 28rem; background-size: contain;}

.instList{margin-top: 32rem;}
.instList li{width: 100%; margin-bottom: 20rem;}
.instList li a{display: block; border-radius: 30rem; border: 1px solid #e3e3e3; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); padding: 24rem 30rem; transition: 0.2s; margin-right: 10rem;}
.instList li a:hover{border-color: #999;}
.instList li a dl{display: flex; align-items: center; justify-content: space-between;}
.instList li a dl dt{width: 46%; font-size: 18rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.instList li a dl dd{width: 53%; font-size: 16rem; font-weight: 300; display: flex; align-items: center;}
.instList li a dl dd em{font-weight: 600; color: #fff; background: #4623aa; border-radius: 59rem; display: inline-block; padding: 5rem 22rem; margin-left: 20rem;}
.instList li a dl dd .date{width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;}
.instList li a dl dd em.end{background: #585858; padding: 5rem 15rem;}

.topic{ position:relative; margin-top: 100rem;}
.topic ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
.topic ul li{width: 32%; margin-bottom: 2%; position: relative;}
.topic ul li a{display: block; border-radius: 50rem; border: 1px solid #e3e3e3; padding: 17rem 10rem 17rem 75rem; position: relative; font-size: 17rem; font-weight: 500; transition: 0.2s;} 
.topic ul li a::before{position: absolute; content: ""; background: url('../img/main/map_ch.png') no-repeat; width: 37rem; height: 37rem; left: 20rem; top: 50%; transform: translateY(-50%); background-position-x: -37px; background-size: 200% 100%; background-position: right center;}

.topic ul li a:hover::before{ background-position: left center;}

.topic .t_txt{display: inline-block; font-size: 13px; border: 1px solid #930a7a; border-radius: 50rem; color: #930a7a; padding: 5rem 15rem; margin-bottom: 20rem; font-weight: 500; position: relative;}
.topic .t_txt::before{position: absolute; content: ""; background: #fff; border-right: 1px solid #930a7a; border-top: 1px solid #930a7a; width: 9px; height: 9px; bottom: -6px; left: 15%; transform: rotate(135deg);}
.topic .reset { position:absolute; right:0; top:0; display: inline-flex; align-items:center; font-size: 14px; height:32rem; border-radius:16rem; background:#222; color:#fff; padding:0 15rem;}

.instList{position: relative;}
.instList button{position: absolute; left: 50%; transform: translateX(-50%) rotate(90deg); padding: 0; margin: 0; z-index: 10; text-indent: -9999px; background: url('../img/main/arrow.png') no-repeat; width: 52rem; height: 52rem; background-size: 200% 100%;}
.instList button.slick-prev{top: -32px; z-index: 20; background-position: left center;}
.instList button.slick-next{bottom: -80rem; background-position: right center;}

@media all and (max-width:1010px) {
    .cont5{flex-wrap: wrap;}
    .map_left, .map_right{width: 100%;}
    /* .map_left{text-align: center;} */
    .map_left > p br{display: none;}
    .map_img{margin: 32rem auto;}
    .map_right{padding-left: 0;}
}
@media all and (max-width:470px) {
    .topic {padding-top:50rem; }
    .topic ul li{width: 49%;}
    .topic .t_txt {display:none;}
    .instList li a dl dt{width: 70%;}
    .instList li a dl dd{width: 30%;}
    .instList li a dl dd .date{display: none;}
    .instList li a{padding: 18rem 30rem;}
}
@media all and (max-width:420px) {
    .instList{margin-top: 65rem;}
    .institution .more{top: 56px; font-size: 18rem; right: inherit; left: 0;}
    .institution .more::before{top: 9px;}
    .instList button{left: 86%;}
}



/* 비주얼, 퀵, 웹진, map 공통 */
@media all and (max-width:520px) {
    .cont1 .wrap, .webzine.wrap, .cont5.wrap{width: 91%;}
}


/*배너*/
.ban {padding:30rem 0;}
.ban .wrap {display:flex; align-items:center; justify-content:space-between;}
.ban .control {display:flex; align-items:center; width:111rem;}
.ban .control a {display:block; text-indent: -9999px; width:37rem; height:54rem; background:url('../img/main/vis_control.png') no-repeat; background-position-x:0;}
.ban .control a.prev {background-position-x:-57px;}
.ban .control a.stop {background-position-x:-110px;}
.ban .control a.play {background-position-x:-165px; display:none;}
.ban .control a.next {background-position-x:-214px;}
.ban .slide {width:calc(100% - 140rem);}
.ban .slide .slick-list {margin:0 -5rem;}
.ban .slide .slick-list li {display:block !important;}
.ban .slide .slick-list li a {display:block; margin:0 5rem;}
@media all and (max-width:1240px){
    .ban {padding:0 0 20rem 0; margin:-40rem 0 0 0;}
}
@media all and (max-width:599px){
    .ban .wrap {flex-wrap:wrap;}
    .ban .slide {width:100%; margin-top:20rem;}
}