@charset "utf-8";

/* mobile */
main section{padding: 20px 0;}

.visual .mo_slide{position: relative;}
.visual .mo_slide li a{display: block;border-radius: 32px;overflow: hidden;font-size: 0;}
.visual .mo_slide .img img{width: 100%;}
.visual .mo_slide .text{position: absolute;left: 20px;bottom: 60px;font-size: 16px;display: flex;flex-wrap: wrap;flex-direction: column;gap: 12px;}
.visual .mo_slide .text strong{font-family: var(--tit);font-size: 32px;font-weight: 600;}
.visual .mo_slide .control{position: absolute;left: 20px;bottom: 30px;right: 20px;}
.visual .control{display: flex;align-items: center;}
.visual .control .btns{display: flex;align-items: center;}
.visual .control .btns button{width: 32px;height: 32px;font-size: 0;background: url("/images/common/main_icon.png") no-repeat center;cursor: pointer;}
.visual .control .btns button.prev{background-position: center -60px;}
.visual .control .btns button.stop{background-position: center -92px;}
.visual .control .btns button.play{background-position: center -124px;}
.visual .control .btns button.next{background-position: center -156px;}
.visual .control .bar{background: #F3F3F3;height: 2px;width: 100%;}
.visual .mo_slide, .visual .vis_slide{overflow: hidden;}
.visual .control .bar span{display: block;height: 100%;background: #3C3C3C;transition: width .3s ease;}
.visual .mo_slide ul, .visual .vis_slide ul{display: flex;transition: transform .5s ease;}
.visual .mo_slide ul li, .visual .vis_slide ul li{flex: 0 0 100%;min-width: 100%;position: relative;}
.visual .vis_slide{display: none;}

main .title{text-align: center;}
main .title h3{font-family: var(--tit);font-size: 32px;font-weight: 600;color: var(--tit_black);}
main .title p{color: #303030;margin: 20px 0;}
.program .pro_slide{position: relative;}
.program .pro_slide li a{display: block;position: relative;border-radius: 20px;overflow: hidden;box-shadow: 0 4px 4px rgba(102,102,102,.15);border: var(--line);}
.program .pro_slide .img{font-size: 0;}
.program .pro_slide .img em{position: absolute;padding: 4px 12px;border-radius: 8px;background: #F3F3F3;left: 10px;top: 10px;font-size: 14px;}
.program .pro_slide .img em.ing{background: var(--red);color: var(--white);}
.program .pro_slide .img em.fin{background: var(--dk_gray);color: var(--white);}
.program .pro_slide .img em.ready{background: var(--blue);color: var(--white);}
.program .pro_slide .img img{width: 100%;}
.program .pro_slide .text{padding: 20px;display: flex;flex-wrap: wrap;flex-direction: column;align-items: flex-start;gap: 10px;}
.program .pro_slide .text em{display: inline-flex;padding: 4px 12px;border-radius: 2px;background: #F3F3F3;font-size: 14px;}
.program .pro_slide .text em.c01{background: #fde8ec;color: var(--red);}
.program .pro_slide .text em.c02{background: #e1f5ee;color: #0f8a8a;}
.program .pro_slide .text em.c03{background: #efeafa;color: #6d4bb8;}
.program .pro_slide .text em.c04{background: #eef3fb;color: var(--blue);}
.program .pro_slide .text strong{display: block;width: 100%;font-size: 18px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.program .pro_slide .text .info{display: flex;flex-direction: column;gap: 4px;}
.program .pro_slide .text .info span{display: flex;gap: 10px;font-size: 14px;color: var(--text_black);}
.program .pro_slide .text .info i{font-style: normal;font-weight: 700;}
.program .pro_slide .control{position: absolute;top: 50%;transform: translateY(-50%);left: 0;right: 0;}
.program .pro_slide .control button{position: absolute;width: 45px;height: 45px;cursor: pointer;background: url("/images/common/main_icon.png") no-repeat center rgba(0,0,0,.5);backdrop-filter: blur(12px);font-size: 0;border-radius: 100%;}
.program .pro_slide .control button.prev{left: -20px;background-position: center -188px;}
.program .pro_slide .control button.next{right: -20px;background-position: center -233px;}

.community .bbs_list{padding-top: 50px;position: relative;}
.community .bbs_list ul{display: flex;flex-direction: column;gap: 20px;}
.community .bbs_list li a{display: flex;flex-wrap: wrap;padding: 30px;border: var(--line);border-radius: 20px;box-shadow: 0 4px 4px rgba(102,102,102,.15);gap: 20px;flex-direction: column;}
.community .bbs_list li em{font-size: 14px;}
.community .bbs_list li em.cate01{color: var(--blue);}
.community .bbs_list li em.cate02{color: var(--red);}
.community .bbs_list li em.cate03{color: #0f8a8a;}
.community .bbs_list li em.cate04{color: #6d4bb8;}
.community .bbs_list li div strong{display: block;font-size: 18px;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;margin-bottom: 10px;height: 3em;}
.community .bbs_list li div span{display: block;color: var(--text_black);display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;height: 3em;}
.community .bbs_list li .date{color: var(--text_black);}
.community .bbs_list .more{position: absolute;top: 0;width: 100%;text-align: center;}

.main_btm{background: var(--navy);padding: 20px 0;}
.main_btm .main_wrap{display: flex;flex-direction: column;gap: 12px;}
.link_grid ul{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.link_grid li{position:relative;aspect-ratio:1/1;}
@supports not (aspect-ratio:1/1){
.link_grid li{height:0;padding-top:100%;}
}
.link_grid li.long{grid-column:1/3;aspect-ratio:1/1.5;}
.link_grid li.wide{grid-column:1/3;aspect-ratio:2/1.1;}
.link_grid a{display:block;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;border-radius:16px;background:no-repeat center/cover;}
.link_grid a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);}
.link_grid li.long a{background: url("/images/main/main_img01.png") no-repeat center /cover;}
.link_grid li.col a{background: url("/images/main/main_img02.png") no-repeat center /cover;}
.link_grid li.col2 a{background: url("/images/main/main_img03.png") no-repeat center /cover;}
.link_grid li.wide a{background: url("/images/main/main_img04.png") no-repeat center /cover;}
.link_grid strong{position:absolute;left:16px;bottom:40px;z-index:2;font-size:20px;font-weight:700;color:var(--white);}
.link_grid span{position:absolute;left:16px;bottom:16px;z-index:2;font-size:13px;color:var(--white);opacity:.85;}
.main_btm .map_area{border-radius: 20px;overflow: hidden;}
.main_btm .map_text{display: flex;padding: 16px;background: var(--white);gap: 12px;align-items: flex-start;justify-content: space-between;}
.main_btm .map_text dl{display: flex;flex-direction: column;gap: 8px;}
.main_btm .map_text dt{font-size: 20px;font-weight: 700;color: var(--tit_black);}
.main_btm .map_text dd{font-size: 14px;}
.main_btm .map_text a{padding: 8px 12px;background: #242424;border-radius: 8px;color: var(--white);flex-shrink: 0;}

/* tablet */
@media (min-width: 768px) {
.visual .mo_slide{display: none;}
.visual .vis_slide{display: block;position: relative;}
.visual .vis_slide li a{display: block;border-radius: 32px;overflow: hidden;font-size: 0;}
.visual .vis_slide .img img{width: 100%;}
.visual .vis_slide .text{position: absolute;left: 20px;bottom: 70px;font-size: 16px;display: flex;flex-wrap: wrap;flex-direction: column;}
.visual .vis_slide .text strong{font-family: var(--tit);font-size: 32px;font-weight: 600;}
.visual .vis_slide .control{position: absolute;left: 20px;bottom: 30px;right: 20px;}
.visual .control .bar{max-width: 300px;}

.program .pro_slide ul{display: flex;gap: 20px;overflow-x:hidden;padding-bottom: 20px;}
.program .pro_slide li{width: calc((100% - 40px)/3);flex-shrink: 0;}
.community .bbs_list ul{flex-direction: row;gap: 20px;}
.community .bbs_list li{width: calc((100% - 40px)/3);}
.link_grid li.long{aspect-ratio: 2/1.1;}
}

/* pc */
@media (min-width: 1024px) {
.program .pro_slide li{width: calc((100% - 60px)/4);}
.main_btm .main_wrap{gap: 20px;}
.link_grid ul{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:12px;aspect-ratio:2.5/1;height:auto;}
.link_grid li.long{grid-column:1/2;grid-row:1/3;aspect-ratio:auto;}
.link_grid li.col{grid-column:2/3;grid-row:1/2;}
.link_grid li.col2{grid-column:3/4;grid-row:1/2;}
.link_grid li.wide{grid-column:2/4;grid-row:2/3;}
}

/* wide */
@media (min-width: 1440px) {
main section{padding: 35px 0;}
main .title h3{font-size: 40px;}
main .title p{font-size: 18px;margin: 30px 0;}
.visual .vis_slide .text{left: 100px;top: 100px;bottom: auto;font-size: 20px;}
.visual .vis_slide .text strong{font-size: 60px;}
.visual .vis_slide .control{left: 100px;bottom: 40px;}
.program .pro_slide ul{gap: 30px;}
.program .pro_slide li{width: calc((100% - 90px)/4);}
.program .pro_slide .text strong{font-size: 20px;}
.program .pro_slide .text .info span{font-size: 16px;}
.community{display: flex;align-items: center;gap: 40px;position: relative;min-height: 300px;}
.community .title{flex-shrink: 0;text-align: left;}
.community .title p{margin: 10px 0;}
.community .bbs_list{padding: 0;position: static;}
.community .bbs_list ul{gap: 30px;}
.community .bbs_list li{width: calc((100% - 60px)/3);}
.community .bbs_list li div{margin-bottom: 40px;}
.community .bbs_list li div strong{font-size: 20px;}
.community .bbs_list li div span{-webkit-line-clamp: 3;height: 4.5em;}
.community .bbs_list .more{width: auto;left: 0;top: 50%;transform: translateY(70px);}
.main_btm{padding: 80px 0;}
.main_btm .main_wrap{flex-direction:row;align-items:stretch;}
.link_grid{width:62%;}
.link_grid ul{aspect-ratio:auto;height:620px;gap: 20px;}
.link_grid li{min-height:0;}
.link_grid li.col, .link_grid li.col2{aspect-ratio: auto;}
.link_grid li.wide{grid-column:2/4;grid-row:2/3;aspect-ratio:auto;}
.link_grid strong{font-size: 28px;}
.link_grid span{font-size: 16px;}
.main_btm .map_area{display:flex;flex-direction:column;width:38%;height:620px;}
.main_btm .map_box{flex:1;}
.main_btm .map_text{margin-top:auto;padding: 20px 24px;}
.main_btm .map_text dt{font-size: 28px;}
.main_btm .map_text dd{font-size: 16px;}
}

@media (min-width: 1600px) {
.visual .vis_slide .control{bottom: 60px;}
}