@charset "utf-8";


.wrap {margin: 0 auto; position: relative;}
* {font-family: 'pretendard';}

section .con-tit-wrap {display: flex; justify-content: space-between; margin-bottom: 35px;}
section .con-tit {font-size: 34px; font-weight: 700; font-family: 'NEXON-Lv2-Gothic';}
section .con-tit span {color: #04B08E;}

@media screen and (max-width: 1024px) {
    section .con-tit {font-size: 28px;}
}

@media screen and (max-width: 768px) {
    section .con-tit {font-size: 25px;}
}


/**************************************************

    우측 메뉴

***************************************************/

.rightBar { }
.rightBar a {display: block; font-family: 'NEXON-Lv2-Gothic'; font-size: 16px; font-weight: 500; box-shadow: 0 0 8px rgba(0,0,0,.2);}
.rightBar .popup-btn {position: fixed; right: 20px; top: 120px; z-index: 99; color: #fff; background: #1BAFEE; padding: 12px 20px; border-radius: 50px; display: flex; align-items: center; gap: 7px;}
.rightBar .popup-btn::after {content: ''; background: url(../../../user/web/images/icon/icon_popup_btn.svg) center no-repeat; width: 12px; height: 11px;}

.rightBar .kakao-btn {display: none; position: fixed; right: 20px; top: 590px; z-index: 99; width: 100px; height: 100px; /*display: flex;*/ align-items: center; justify-content: center; flex-direction: column; background: #FFD900; border-radius: 100%;}
.rightBar .kakao-btn::after {content: ''; background: url(../../../user/web/images/main/icon_kakao_btn.svg) center no-repeat; width: 38px; height: 39px; position: absolute; top: -12px; right: 0;}
.rightBar .kakao-btn b {font-weight: bold; display: block;}

@media screen and (max-width: 1510px) {
    .rightBar .popup-btn {right: 5px;}
    .rightBar .kakao-btn {right: 5px;}
}

@media screen and (max-width: 1024px) {
    .rightBar .popup-btn {font-size: 15px; padding:10px 14px; top: auto; bottom: 130px;}
    .rightBar .kakao-btn {font-size: 15px; width: 98px; height: 98px; bottom: 10px; top: auto;}
}
  

/**************************************************

    비주얼

***************************************************/

.visual {display: flex; align-items: center; justify-content: space-between; gap: 30px;}
.visual h2 {font-family: 'NEXON-Lv2-Gothic';}

.visual .vis-left {width: calc(100% - 565px); overflow: hidden; position: relative;}
.visual .banner-slide {border-radius: 0 0 50px 0; overflow: hidden;}
.visual .banner-slide a {display:block;}
.visual .banner-slide a img {min-height: 37rem; max-width: none; width: 100%;}
/* .visual .banner-slide a {width:100%; max-width: 1095px; height: 38rem; background:url(../../../user/web/images/main/vis_banner_01.jpg) top right no-repeat; display: block;} */
.visual .banner-slide .control-box {position: absolute; bottom: 50px; left: 12rem; z-index: 10; display: flex; align-items: center; gap: 5px; width: 100%; max-width: 400px;}

.visual .banner-slide .control-box .swiper-pagination {position: static; width: auto;}
.visual .banner-slide .control-box button {cursor: pointer;}
.visual .banner-slide .control-box .btn-play, .visual .banner-slide .control-box .btn-pause {display: none;}
.visual .banner-slide .control-box .btn-play.on, .visual .banner-slide .control-box .btn-pause.on {display: inline-block;}

.visual .banner-slide .control-box .swiper-pagination {font-size: 0; margin-right: 40px;}
.visual .banner-slide .control-box .swiper-pagination span {font-size: 17px; color: #fff; font-weight: 500px;}
.visual .banner-slide .control-box .swiper-pagination span.swiper-pagination-current {color: #FFF4BB;}
.visual .banner-slide .control-box .swiper-pagination span.swiper-pagination-current::after {content: ''; width: 20px; height: 1px; display: inline-block; vertical-align: middle; background: #B2EADE; margin: 0 10px;}
.visual .banner-slide .swiper-slide img  {  height: 608px;  }


@media (max-width: 768px) {
  .visual .banner-slide .swiper-slide img {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .visual .banner-slide .swiper-slide img {
    height: 250px;
  }
}

.visual .vis-right {width: 100%; max-width: 565px; margin-right: calc((100% - 1510px) / 2); display: flex; flex-direction: column; gap: 20px; padding-top: 25px;}
.visual .srch-box {width: 100%; z-index: 1;}
.visual .srch-box h2 {font-size: 28px; color: #00A47E; text-align: center;margin-bottom: 15px;}
.visual .srch-box .input-box {width: 100%; border: 3px solid #00BA8F; border-radius: 10px; overflow: hidden;}
.visual .srch-box .input-box > .inner {display: flex; min-height: 55px;}
.visual .srch-box .input-box .tit {flex-shrink: 0; width: 120px; font-size: 18px; display: flex; align-items: center; justify-content: center; position: relative; word-break: break-all; padding: 10px 20px; line-height: 1; text-align: center;}
.visual .srch-box .input-box .tit::after {content: ""; width: 1px; height: 50%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-color: #fff;}
.visual .srch-box .input-box input {width: 100%; padding: 0 20px; background-color: transparent; border: none; background : #fff;}
.visual .srch-box .input-box input:where(:hover,:focus){outline: 2px dotted white; outline-offset: -6px;}
.visual .srch-box .input-box input::placeholder {color: #757575;}
.visual .srch-box .input-box .btn-srch {width: 60px; flex-shrink: 0; background-color: #00BA8F; display: flex; justify-content: center; align-items: center;}
.visual .srch-box .input-box .btn-srch:where(:hover,:focus) {background-color: #008268;outline: 2px dotted #fff; outline-offset: -6px;}
.visual .srch-box .keyword-box {display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 10px;}
.visual .srch-box .keyword-box p {font-size: 16px; font-weight: 600; color: #00A47E;}
.visual .srch-box .keyword-box ul {display: flex; align-items: center; gap: 5px;}
.visual .srch-box .keyword-box ul li {font-size: 15px;}
.visual .srch-box .keyword-box ul li a {display: block; border: 1px solid #ddd; padding: 4px 10px; border-radius: 100px; transition: .3s;}
.visual .srch-box .keyword-box ul li a::before {content: '#'; color: #00A47E; font-weight: 600;}
/* .visual .srch-box .keyword-box ul li a:where(:hover,:focus) {text-decoration: underline;} */

.visual .manwon-box {background: #9AD650; padding: 30px 40px; border-radius: 10px;}
.visual .manwon-box h2 {font-size: 28px; color: #fff; text-align: center; margin-bottom: 15px;}
.visual .manwon-box .manwon-list {display: flex; gap: 15px;}
.visual .manwon-box .manwon-list li {background: #FBFFF5; padding: 20px; border-radius: 10px; width: 100%; display: flex; flex-direction: column; text-align: center; gap: 10px;}
.visual .manwon-box .manwon-list li a{display: block;}
.visual .manwon-box .manwon-list li span {display: block; font-size: 18px; font-weight: 500;}
.visual .manwon-box .manwon-list li span img {margin: 0 auto 8px;}

.visual .map-btn {padding: 25px 40px; background: #0090E9; border-radius: 10px; display: flex; align-items: center; gap: 20px;}
.visual .map-btn span {display: block; color: #fff;}
.visual .map-btn .ic {content: ''; background: url(../../../user/web/images/main/map_btn_icon.png) center no-repeat #fff; width: 85px; height: 85px; border-radius: 100px; display: block;}
.visual .map-btn .tit {font-size: 26px; font-weight: bold; margin-bottom: 8px;}



@media screen and (max-width: 1510px) {
    .visual .vis-right {margin-right: 0; padding-right: 20px;}
}

@media screen and (max-width: 1400px) {
    .visual .vis-left {width: calc(100% - 50px);} 
    .visual .banner-slide .control-box {left: 10rem }
    .visual .vis-right {max-width: 500px;}
    .visual .srch-box .keyword-box {gap: 10px;}
    .visual .srch-box .keyword-box p {font-size: 15px;}
    .visual .srch-box .keyword-box ul li {font-size: 14px;}
    .visual .manwon-box {padding: 20px;}
    .visual .manwon-box .manwon-list li {padding: 20px 10px;}
    .visual .map-btn {padding: 25px 20px; gap: 15px;}
    .visual .map-btn span {font-size: 16px;}    
   
}

@media screen and (max-width: 1200px) {
    .visual .banner-slide .control-box {left: 8rem }
    .visual .srch-box h2 {font-size: 24px;}
    .visual .manwon-box h2 {font-size: 24px;}
    .visual .map-btn .tit {font-size: 24px;}
}


@media screen and (max-width: 1024px) {
    .visual {flex-direction: column;}
    .visual .vis-left {width: 100%;}
    .visual .banner-slide a img {min-height: auto;}
    .visual .vis-right {max-width: 100%; padding: 0 20px;}

    .visual .banner-slide .control-box {max-width: none; width: auto;  left: 40%; transform: translateX(-50%);}
}

@media screen and (max-width: 768px) {

    .visual .banner-slide .control-box .swiper-pagination {margin-right: 20px;}
    .visual .banner-slide .control-box .swiper-pagination span{font-size: 15px;}
    .visual .banner-slide .control-box button {width: 28px;} 
    .visual .banner-slide .control-box button img {max-width: none; width: 100%;}
    .visual .srch-box h2 {font-size: 20px;}
    .visual .srch-box .input-box input {font-size: 15px;}
    .visual .manwon-box h2 {font-size: 20px;}
    .visual .manwon-box .manwon-list li span {font-size: 16px;}
    .visual .map-btn .tit {font-size: 17px;}
    .visual .map-btn span {font-size: 15px;}
    .visual .srch-box .keyword-box ul li {font-size : 13px;}
}


@media screen and (max-width: 540px) {
    .visual .srch-box .input-box > .inner {min-height: 50px;}
    .visual .srch-box .input-box input {padding: 0 15px;}
    .visual .srch-box .input-box .btn-srch {width: 50px;}
    .visual .srch-box .keyword-box {width: 100%;}
    .visual .srch-box .keyword-box p {width: 65px;}
    .visual .srch-box .keyword-box ul {flex-wrap: wrap; width: calc(100% - 65px - 10px); align-items: flex-start;}
    .visual .manwon-box {padding: 15px 10px;}
    .visual .manwon-box .manwon-list {gap: 10px;}
    .visual .manwon-box .manwon-list li {padding: 10px 5px;}
    .visual .manwon-box .manwon-list li span img {max-width: 70%;}
    .visual .manwon-box .manwon-list li span {font-size: 15px; letter-spacing: -1px;}

    .visual .map-btn {padding: 15px 10px;}
    .visual .map-btn .con {width: calc(100% - 85px - 15px);}

}

@media screen and (max-width: 480px) {
    
    .visual .banner-slide .control-box .swiper-pagination span {font-size: 14px;}
    .visual .banner-slide .control-box .swiper-pagination span.swiper-pagination-current::after {width: 10px;}
    .visual .banner-slide a img {min-height: 260px;}

    
}





/**************************************************

    con01

***************************************************/

.con01 {padding: 80px 0;}
.con01 .quick-list {display: flex; align-items: center; justify-content: space-between; gap: 40px;}
.con01 .quick-list li {width: 100%; background: #F5F5F5; border-radius: 20px; border: 1px solid #F5F5F5; transition: .3s;}
.con01 .quick-list li:hover {background: #E1F4F3; border: 1px solid #18DAB4;}
.con01 .quick-list li a {display: block; padding: 40px; transition: .3s;}
.con01 .quick-list li a span {display: block;}
.con01 .quick-list li a span.tit {font-size: 26px; font-weight: 700; font-family: 'NEXON-Lv2-Gothic'; margin-bottom: 15px;}
.con01 .quick-list li a::after {content: ''; background:url(../../../user/web/images/main/quick_icon_01.png) center no-repeat; width: 98px; height: 98px; display: block; margin-left: auto; margin-top: -26px;}
.con01 .quick-list li:nth-child(2) a::after {background:url(../../../user/web/images/main/quick_icon_02.png) center no-repeat; background-size: contain;}
.con01 .quick-list li:nth-child(3) a::after {background:url(../../../user/web/images/main/quick_icon_03.png) center no-repeat; background-size: contain;}


@media screen and (max-width: 1200px) {
    .con01 .quick-list {gap: 30px;}
    .con01 .quick-list li a{padding: 30px;}
    .con01 .quick-list li a::after {width: 60px; height: 60px; background-size: contain;}
    .con01 .quick-list li a span.tit{font-size:22px;}
    .con01 .quick-list li a span.txt{font-size:16px; }
}


@media screen and (max-width: 1024px) {
    .con01 {padding: 50px 0;}
    .con01 .quick-list {gap: 20px;}
    .con01 .quick-list li a{padding: 25px 20px;}
    .con01 .quick-list li a span.tit{font-size: 18px;}
}

@media screen and (max-width: 880px) {
    .con01 .quick-list {flex-direction: column;}
    .con01 .quick-list li a::after {margin-top: -20px;}
}

@media screen and (max-width: 768px) {
    .con01 {padding: 30px 0;}
    .con01 .quick-list {gap: 10px;}
    .con01 .quick-list li a span.tit {font-size: 17px;}
    .con01 .quick-list li a span.txt {font-size: 15px;}
}


/**************************************************

    con02

***************************************************/

.con02 {background: linear-gradient(180deg, #FFFFFF 0%, #ECFAED 46.15%); padding: 40px 0 80px; position: relative;}
.con02 .con-tit {text-align: center; margin-bottom: 50px;}

.con02 .map-wrap {width: 100%; display: flex; align-items: center; justify-content: space-between; gap:20px}
.con02 .map-left {width: 50%;}
#namdo_svg_map {width: 100%;}
.con02 .map-right {width: calc(50% - 20px);}
.con02 .map-con-box {width: 100%; max-width: 715px; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,.12); position: relative; margin-left: auto;}
.con02 .map-con-box::after {content: ''; background: url(../../../user/web/images/main/map_bg_right_img.png) center no-repeat; width: 83px; height: 118px; position: absolute; bottom: -20px; right: -45px;}
.con02 .map-con-box .hd {background: #00B893; margin: 0 auto; border-radius: 20px 20px 0 0; padding: 10px; text-align: center; padding: 10px 15px;}
.con02 .map-con-box .hd .map-area-wrap {display:flex; align-items: center; justify-content: center;}
.con02 .map-con-box .hd .map-area-wrap::before {content: ''; background: url(../../../user/web/images/main/map_con_hd_icon.png) center no-repeat; width: 32px; height: 32px; display:block;}
.con02 .map-con-box .hd select {font-size: 28px; font-weight: 600;  font-family: 'NEXON-Lv2-Gothic'; color: #fff; background-color: transparent; border: none; height: 50px; padding: 0 10px}
.con02 .map-con-box .hd option {color: #1d1d1d; font-size: 22px;}
.con02 .map-con-box .con {background: #fff; padding: 30px; border-radius: 0 0 20px 20px;}
.con02 .map-con-box .con .tab {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background: #EAFBF8; padding: 15px 5px; border-radius: 10px; letter-spacing: -.3px;}
.con02 .map-con-box .con .tab li {font-size: 15px; font-weight: 600;}
.con02 .map-con-box .con .tab li a {display: block; padding: 3px 8px;}
.con02 .map-con-box .con .tab li a::before {content: ''; background: url(../../../user/web/images/main/map_tab_icon01.png) center no-repeat; width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 3px; margin-bottom: 5px;}
.con02 .map-con-box .con .tab li.cate1 a::before {background: url(../../../user/web/images/main/map_tab_icon02.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate2 a::before {background: url(../../../user/web/images/main/map_tab_icon03.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate3 a::before {background: url(../../../user/web/images/main/map_tab_icon04.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate4 a::before {background: url(../../../user/web/images/main/map_tab_icon05.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate5 a::before {background: url(../../../user/web/images/main/map_tab_icon06.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate6 a::before {background: url(../../../user/web/images/main/map_tab_icon07.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate7 a::before {background: url(../../../user/web/images/main/map_tab_icon08.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate8 a::before {background: url(../../../user/web/images/main/map_tab_icon09.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate9 a::before {background: url(../../../user/web/images/main/map_tab_icon10.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate10 a::before {background: url(../../../user/web/images/main/map_tab_icon11.png) center no-repeat;}
.con02 .map-con-box .con .tab li.cate11 a::before {background: url(../../../user/web/images/main/map_tab_icon12.png) center no-repeat;}
.con02 .map-con-box .con .tab li.on a {background: #fff; border-radius: 50px; box-shadow: 0 0 5px rgba(0,0,0,.15);}
.con02 .map-con-box .con .tab li a .total {font-size: 14px; color: #324FD5;}
.con02 .map-con-box .con .list {display: flex; flex-wrap: wrap; min-height: 294px; }
.con02 .map-con-box .con .list li {width: 50%;}
.con02 .map-con-box .con .list li a {display: block; padding: 30px 0; border-bottom: 1px dashed #ddd; }
.con02 .map-con-box .con .list li span {display: block;}
.con02 .map-con-box .con .list li .cate {font-size: 15px; font-weight: 500; color: #fff; padding: 4px 10px; display: inline-block; border-radius: 5px; margin-bottom: 10px;}
.con02 .map-con-box .con .list li .cate1 {background: #12A442;}
.con02 .map-con-box .con .list li .cate2 {background: #2573FF;}
.con02 .map-con-box .con .list li .cate3 {background: #27B8E0;}
.con02 .map-con-box .con .list li .cate4 {background: #50BA9C;}
.con02 .map-con-box .con .list li .cate5 {background: #FFBB28;}
.con02 .map-con-box .con .list li .cate6 {background: #FF7621;}
.con02 .map-con-box .con .list li .cate7 {background: #865DBE;}
.con02 .map-con-box .con .list li .cate8 {background: #FF7A97;}
.con02 .map-con-box .con .list li .cate9 {background: #76D54A;}
.con02 .map-con-box .con .list li .cate10 {background: #37557D;}
.con02 .map-con-box .con .list li .cate11 {background: #A76700;}
.con02 .map-con-box .con .list li .cate12 {background: #d45cd6;}

.con02 .map-con-box .con .list li .tit {width: 90%; font-size: 20px; font-weight: 600; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.con02 .map-con-box .con .list li .txt {width: 90%; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.con02 .map-con-box .con .list li.no-data {display: flex; align-items: center; justify-content: center; width: 100%; color: #555; font-size: 16px;}

.con02 .map-con-box .con .pagination {padding-top: 30px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;}
.con02 .map-con-box .con .pagination li button {flex-shrink: 0; width: 28px; height: 28px; border: 1px solid #ccc; font-size: 14px; color: #555; border-radius: 5px;}
.con02 .map-con-box .con .pagination li button.active {color: #04B08E; border: 1px solid #04B08E; font-weight: bold;}

.con02 .map-con-box .con .pagination .page-navi {width: 28px; height: 28px; background: url(../../../user/web/images/main/icon_page_navi.svg) no-repeat center;}
.con02 .map-con-box .con .pagination .page-navi2 {width: 28px; height: 28px; background: url(../../../user/web/images/main/icon_page_navi2.svg) no-repeat center;}
.con02 .map-con-box .con .pagination .page-navi.btn-prev { margin-right: 10px;}
.con02 .map-con-box .con .pagination .page-navi.btn-next { transform: rotate(180deg); margin-left: 10px;}
.con02 .map-con-box .con .pagination .page-navi2.btn-end {transform: rotate(180deg);}

@media screen and (max-width: 1600px) {
    .con02 .map-con-box::after {right: -5px;}
}

@media screen and (max-width: 1400px) {
    
    .con02 .map-con-box .con {padding: 25px;}
    .con02 .map-con-box .hd select {font-size: 24px;}
    .con02 .map-con-box .hd option {font-size: 18px;}
    .con02 .map-con-box .con .tab {padding: 10px;}
    .con02 .map-con-box .con .list li a {padding: 25px 0;}
    .con02 .map-con-box .con .list li .cate {font-size: 14px;}
    .con02 .map-con-box .con .list li .tit {font-size: 18px;}
    .con02 .map-con-box .con .list li .txt {font-size: 16px;}
}

@media screen and (max-width: 1200px) {
    .con02 .con-tit {font-size: 24px;}
    .con02 .map-left {width: 52%;}
    .con02 .map-right {width: calc(48% - 20px);}

    .con02 .map-con-box .hd {padding: 6px;}
    .con02 .map-con-box .con {padding: 20px}
    .con02 .map-con-box .con .list li a {padding: 20px 0;}
    .con02 .map-con-box .con .list li .cate {font-size: 13px; margin-bottom: 5px;}
    .con02 .map-con-box .con .list li .tit {font-size: 17px;}
    .con02 .map-con-box .con .list li .txt {font-size: 15px}

    .con02 .map-con-box .con .pagination li button {font-size: 13px; width: 25px; height: 25px;}
    .con02 .map-con-box .con .pagination .page-navi {width: 25px; height: 25px;}
    .con02 .map-con-box .con .pagination .page-navi2 {width: 25px; height: 25px;}
}

@media screen and (max-width: 1024px) {
    .con02 {padding: 20px 0 50px;}
    .con02 .map-wrap {flex-direction: column; gap: 30px;}
    .con02 .map-left {width: 100%; text-align: center;}
    #namdo_svg_map {width: 85%; margin: 0 auto;}
    .con02 .map-right {width: 100%;}
    .con02 .map-con-box .hd select {font-size: 22px;}
    .con02 .map-con-box {margin: 0 auto; width: 85%; max-width: none;}
    .con02 .map-con-box .con {padding: 30px;}

    .con02 .map-con-box .con .list{min-height: auto;}
    .con02 .map-con-box .con .list li.no-data {padding: 40px 0 20px; font-size: 15px;}
}

@media screen and (max-width: 768px) {
    .con02 {padding: 10px 0 30px;}
    .con02 .con-tit {font-size: 22px; margin-bottom: 30px;}
    .con02 .map-wrap {gap: 20px;}
     #namdo_svg_map {width: 100%;}
    .con02 .map-con-box {width: 100%;}
    .con02 .map-con-box .con .tab {justify-content: center; flex-wrap: wrap;}
    .con02 .map-con-box .con .tab li {font-size: 14px; width: 33.33%; text-align: center;}
    .con02 .map-con-box .con .tab li a {padding: 4px 0;}
   
}

@media screen and (max-width: 640px) {
    
    .con02 .map-con-box .con {padding: 15px;}
    .con02 .map-con-box .hd select {font-size: 20px;}
    .con02 .map-con-box .hd option {font-size: 16px;}
    .con02 .map-con-box .hd .map-area-wrap::before {width: 24px; height: 24px; background-size: contain;}
}


@media screen and (max-width: 540px) {
    /* .con02 .map-left {overflow-x: auto;}
    #namdo_svg_map {width: 540px;} */
   
    .con02 .map-con-box::after{display: none;}
    .con02 .map-con-box .con {padding: 20px;}
    .con02 .map-con-box .con .pagination {gap: 2px;}
    .con02 .map-con-box .con .pagination .page-navi.btn-prev{margin-right: 5px;}
    .con02 .map-con-box .con .pagination .page-navi.btn-next {margin-left: 5px;}
    .con02 .map-con-box .con .list li {width: 100%;}
    
}

@media screen and (max-width: 480px) {
    .con02 .map-con-box .con .tab {padding: 10px 5px;}
    .con02 .map-con-box .con .tab li {width: auto;}
    .con02 .map-con-box .con .tab li a{padding: 2px 6px;}
}

/**************************************************

    con03

***************************************************/
.con03 {padding: 80px 0;}
.con03 .con-tit-wrap .left {display: flex; align-items: center; gap: 50px;}
.con03 .con-tit-wrap .tab {display: flex; align-items: center; gap: 40px;}
.con03 .con-tit-wrap .tab li {}
.con03 .con-tit-wrap .tab li a {display: block; font-family: 'NEXON-Lv2-Gothic'; font-size: 22px; font-weight: 500; color: #666; padding: 6px 0; display: flex;}
.con03 .con-tit-wrap .tab li.on a {color: #000; border-bottom: 4px solid #2F88FF;}
.con03 .con-tit-wrap .tab li:hover a {color: #000;}
.con03 .con-tit-wrap .tab li.on a::after {content: ''; width: 11px; height: 11px; display: block; background: #2F88FF; border-radius: 50px; margin-left: 8px;}
.con03 .con-tit-wrap .right a {display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 100%; box-shadow: 0 0 10px rgba(0,0,0,.12); transition: .3s;}
.con03 .con-tit-wrap .right a:where(:hover,:focus) {transform: rotate(-180deg);}

.con03 .tab-con-wrap {}
.con03 .tab-con-cmn {display: none;}
.con03 .tab-con-01 {display: block;}
.con03 .tab-con-cmn .board-list {display: flex; justify-content: space-between; gap: 40px;}
.con03 .tab-con-cmn .board-list li {width: 100%; border: 1px solid #ddd; border-radius: 20px; }
.con03 .tab-con-cmn .board-list li:where(:hover,:focus) {box-shadow: 10px 10px 40px rgba(0,0,0,.12);}
.con03 .tab-con-cmn .board-list li a {display: block; padding: 40px 30px;}
.con03 .tab-con-cmn .board-list li a span {display: block;}
.con03 .tab-con-cmn .board-list li a .cate {color: #fff; font-size: 15px; padding: 5px 10px; border-radius: 50px; display: inline-block; margin-bottom: 10px;}
.con03 .tab-con-cmn .board-list li a .cate1 {background: #2955A6;}
.con03 .tab-con-cmn .board-list li a .cate2 {background: #29A691;}
.con03 .tab-con-cmn .board-list li a .cate3 {background: #8649B9;}
.con03 .tab-con-cmn .board-list li a .tit {font-size: 20px; font-weight: 600;    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 20px; min-height: 48px;}
.con03 .tab-con-cmn .board-list li a .txt {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #666; margin-bottom: 20px; min-height: 42px;}
.con03 .tab-con-cmn .board-list li a .date {font-size: 16px; color: #868686;}
.con03 .tab-con-cmn .board-list li a .date::before {content: ''; background:url(../../../user/web/images/icon/icon_date.svg) center no-repeat; width: 15px; height: 16px; display: inline-block; margin-right: 5px; margin-bottom: -2px;}


@media screen and (max-width: 1400px) {
    .con03 .tab-con-cmn .board-list {gap: 20px;}
}

@media screen and (max-width: 1200px) {
    .con03 .con-tit-wrap .tab {gap: 20px;}
    .con03 .con-tit-wrap .tab li a {font-size: 20px;}
    .con03 .tab-con-cmn .board-list {flex-wrap: wrap;;}
    .con03 .tab-con-cmn .board-list li {width: calc(50% - 10px);}
    .con03 .tab-con-cmn .board-list li a {padding: 30px;}
    .con03 .tab-con-cmn .board-list li a .cate {font-size: 14px;}
    .con03 .tab-con-cmn .board-list li a .tit {font-size: 18px; min-height: auto; overflow: hidden;}
    .con03 .tab-con-cmn .board-list li a .txt {font-size: 16px; min-height: auto; overflow: hidden;}
    .con03 .tab-con-cmn .board-list li a .date {font-size: 14px;}
}

@media screen and (max-width: 1024px) {
    .con03 {padding: 50px 0;}
    .con03 .con-tit-wrap .tab li a {font-size: 18px; padding: 3px 0;}
   
}

@media screen and (max-width: 768px) {
    .con03 {padding: 30px 0;}
    section .con-tit-wrap {margin-bottom: 20px;}
    .con03 .con-tit-wrap .left {flex-direction: column; gap: 10px; align-items: start}
    .con03 .con-tit-wrap .tab {gap: 15px; width: 100%;}
    .con03 .con-tit-wrap .tab li a {font-size: 17px;}
    .con03 .con-tit-wrap .right a {width: 42px; height: 42px;}
    .con03 .tab-con-cmn .board-list {gap: 10px;}
    .con03 .tab-con-cmn .board-list li {width: 100%}
    .con03 .tab-con-cmn .board-list li a {padding: 25px 20px;}
    .con03 .tab-con-cmn .board-list li a .tit {font-size: 17px; margin-bottom: 10px;}
    .con03 .tab-con-cmn .board-list li a .txt {margin-bottom: 15px;}
}

@media screen and (max-width: 480px) {
    .con03 .con-tit-wrap .tab li a {font-size: 16px;}
}


/**************************************************

    organiztion

***************************************************/
.organization {position: relative; margin: 0 auto; padding: 30px 0; border-top: 1px solid #ddd;}
.organization .inner {display: flex; align-items: center; justify-content: space-between;}
.organization .controls {width: 100%; max-width: 215px; display: flex; align-items: center; gap: 20px;}
.organization .controls p {font-size: 20px; font-weight: 600;}
.organization .controls .btn-wrap {display: flex; align-items: center; gap: 10px;}
.organization .controls button {font-size: 14px; cursor: pointer; width: 11px; height: 11px; display: flex; align-items: center; justify-content: center;}
.organization .controls button#playBtn {display: none;} 

.organization .org-slide {width: 100%; transition: all 0.3s ease-in-out; }
.organization .org-slide a {display: block;}
.organization .swiper-slide {background: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; height: auto; border-radius: 6px; padding: 4px 10px;}



@media screen and (max-width: 768px) {
    .organization {padding: 15px 0;}
    .organization .controls {max-width: 125px; gap: 10px; margin-right: 20px;}
    .organization .controls p {font-size: 17px;}
    .organization .controls .btn-wrap {gap: 8px;}
}

@media screen and (max-width: 480px) {
    .organization .controls {display: none;}
}



/**************************************************
    애니메이션 키프레임 모음 
***************************************************/
@keyframes pulse {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

/* 마키텍스트 애니메이션 */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes textAni {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
        transform: translate3d(0,-90px,0) skewY(-10deg);
        transform-origin: top left;
    }
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}