@charset "utf-8";

/* 메인 슬라이드 */
#main_slide_box {}
#main_slide_box .main_slide {position: relative;}
#main_slide_box .swiper-slide img {}
#main_slide_box .swiper-slide .txt {display: flex; min-height: 23px; max-width: 40%; color: #fff; background: url("../../../../siiru/images/icon/icon_main_slide_mark.png") no-repeat top left; position: absolute; left: 30px; bottom: 26px; padding-left: 23px; font-size: 20px;}
#main_slide_box .ctrl_box {position: absolute; left: 30px; bottom: 80px; z-index: 10;}
#main_slide_box .ctrl_box .btn_play, #main_slide_box .ctrl_box .btn_pause {color: #fff; font-size: 25px; margin-left: 10px;}
#main_slide_box .ctrl_box .btn_play {display: none;}
#main_slide_box .swiper-pagination {position: static; display: inline-flex; width: auto;}
#main_slide_box .swiper-pagination-bullet {font-size: 20px; width: auto; height: auto; background-color: transparent; color: #fff; opacity: 1; font-family: "GmarketSans"; line-height: 1.2; margin: 0; display: inline-flex; align-items: center; border-radius: unset;}
#main_slide_box .swiper-pagination-bullet::after {content: ""; width: 0; height: 1px; background-color: #a5a6a6; transition: all 0.3s ease;}
#main_slide_box .swiper-pagination-bullet-active {transition: all 0.3s ease;}
#main_slide_box .swiper-pagination-bullet.swiper-pagination-bullet-active::after {width: 100px; margin: 0 5px 8px 15px;}
#main_slide_box .swiper-pagination-bullet:not(:last-of-type) {margin-right: 10px;}
#main_slide_box .txt_rooting {position: absolute; top: 4%; left: 180px; z-index: 10;}
#main_slide_box .weather {color: #fff; display: inline-flex; align-items: center; position: absolute; bottom: 200px; left: 30px; z-index: 10;}
#main_slide_box .weather .img_box {width: 90px; height: 90px; padding: 10px; margin-right: 20px; display: flex; justify-content: center; align-items: center; border: 1px solid #fff; border-radius: 50%;}
#main_slide_box .weather .txt_box {}
#main_slide_box .weather .txt_box > .bb {display: flex; align-items: center;}
#main_slide_box .weather .txt_today_weather {font-size: 30px; font-weight: 700; font-family: "GmarketSans"; line-height: 1.2; margin-bottom: -5px;}
#main_slide_box .weather .temperature {margin-right: 17px; font-size: 50px; font-weight: 600; display: flex; align-items: center;}
#main_slide_box .weather .temperature span {font-size: 35px; font-weight: 400; margin-top: 4px;}
#main_slide_box .weather .date {font-size: 22px; font-weight: 600;}
#main_slide_box .weather .dust {font-size: 18px;}
#main_slide_box .greeting {width: 810px; position: absolute; right: 0; bottom: 0; z-index: 10;}
#main_slide_box .greeting .img_box {width: 73%; margin-left: auto; }
#main_slide_box .greeting .txt_box {border-top-left-radius: 40px; padding: 30px 70px 20px; background: linear-gradient(to right, #528bcd, #5a43ec);}
#main_slide_box .greeting .txt_box > .tb {display: flex; align-items: flex-end;}
#main_slide_box .introduce {margin-right: 30px;}
#main_slide_box .introduce p {color: #fff; font-family: "GmarketSans"; line-height: 1.2;}
#main_slide_box .introduce p:first-of-type {margin-bottom: 5px; font-size: 35px; font-weight: 500;}
#main_slide_box .introduce p:last-of-type {padding-left: 50px; font-size: 45px; font-weight: 700;}
#main_slide_box .link_list_01 {display: flex; margin-bottom: 17px;}
#main_slide_box .link_list_01 li {}
#main_slide_box .link_list_01 li:not(:last-of-type) {margin-right: 10px;}
#main_slide_box .link_list_01 a {font-size: 27px; font-weight: 500; display: inline-flex; padding: 10px 20px; color: #fff; border: 1px solid #fff; border-radius: 16px;}
#main_slide_box .link_list_01 a:hover,
#main_slide_box .link_list_01 a:focus {background-color: #203d89; border: 1px solid #203d89;}
#main_slide_box .link_list_02 {display: flex; flex-wrap: wrap; margin-top: 20px;}
#main_slide_box .link_list_02 li {display: flex; align-items: center;}
#main_slide_box .link_list_02 li:not(:last-of-type)::after {content: ""; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; margin: 0 15px 8px;}
#main_slide_box .link_list_02 a {font-size: 20px; color: #fff; font-family: "GmarketSans"; font-weight: 500; line-height: 1.2; transition: none;}
#main_slide_box .link_list_02 a:hover, #main_slide_box .link_list_02 a:focus {text-decoration: underline; text-underline-position: under; font-weight: 600;}
#main_slide_box .greeting .txt_box .rb {display: flex; align-items: center;}

@media screen and (max-width: 1400px) {
    #main_slide_box .main_slide {height: 765px;}
    #main_slide_box .swiper-slide {}
    #main_slide_box .swiper-slide img {height: 100%; object-fit: cover;}
    #main_slide_box .swiper-slide .txt {bottom: 35px;}
    #main_slide_box .swiper-pagination-bullet {font-size: 16px;}
    #main_slide_box .swiper-pagination-bullet.swiper-pagination-bullet-active::after {width: 50px;}
    #main_slide_box .ctrl_box .btn_play, 
    #main_slide_box .ctrl_box .btn_pause {font-size: 20px;}
    #main_slide_box .swiper-slide .txt {font-size: 16px;}
    #main_slide_box .txt_rooting {width: 350px; left: 140px;}
    #main_slide_box .weather .img_box {width: 80px; height: 80px;}
    #main_slide_box .weather .txt_today_weather {font-size: 24px; margin-bottom: 0;}
    #main_slide_box .weather .temperature {font-size: 40px;}
    #main_slide_box .weather .date {font-size: 18px;}
    #main_slide_box .weather .dust {font-size: 16px;}
    #main_slide_box .weather .temperature span {font-size: 30px;}
    #main_slide_box .introduce {margin-right: 15px;}
    #main_slide_box .introduce p:first-of-type {font-size: 25px;}
    #main_slide_box .introduce p:last-of-type {font-size: 35px; padding-left: 35px;}
    #main_slide_box .link_list_01 a {font-size: 20px; padding: 7px 15px;}
    #main_slide_box .link_list_01 li:not(:last-of-type) {margin-right: 5px;}
    #main_slide_box .link_list_02 li:not(:last-of-type)::after {width: 3px; height: 3px; margin:0 10px 8px;}
    #main_slide_box .link_list_02 a {font-size: 16px;}
    #main_slide_box .greeting {width: 600px;}
    #main_slide_box .greeting .txt_box {padding: 30px 35px 20px;}

}

@media screen and (max-width: 1080px) {
    #main_slide_box .main_slide {height: 600px;}
    #main_slide_box .swiper-slide .txt {bottom: 175px; max-width: 55%; background-size: 12px; padding-left: 18px; background-position: top 1px left;}
    #main_slide_box .swiper-pagination-bullet {font-size: 14px;}


    #main_slide_box .txt_rooting {width: 270px; left: 15px;}
    #main_slide_box .weather {bottom: 300px;}
    #main_slide_box .weather .img_box {width: 70px; height: 70px;}
    #main_slide_box .weather .dust {font-size: 14px;}
    #main_slide_box .weather .date {font-size: 16px;}
    #main_slide_box .weather .temperature {font-size: 35px; margin-right: 12px;}
    #main_slide_box .weather .temperature span {font-size: 25px;}
    #main_slide_box .weather .txt_today_weather {font-size: 20px;}
    #main_slide_box .link_list_01 a {font-size: 16px;}
    #main_slide_box .link_list_02 a {font-size: 14px;}
    #main_slide_box .introduce p:first-of-type {font-size: 20px;}
    #main_slide_box .introduce p:last-of-type {font-size: 30px; padding-left: 25px;}
    #main_slide_box .greeting {width: 500px;}
    #main_slide_box .greeting .txt_box {padding: 25px 20px 15px;}
    #main_slide_box .ctrl_box {bottom: 220px;}
    
    #main_slide_box .ctrl_box .btn_play, 
    #main_slide_box .ctrl_box .btn_pause {font-size: 18px; margin-top: 2px;}
    #main_slide_box .swiper-pagination-bullet.swiper-pagination-bullet-active::after {width: 30px;}
    
}

@media screen and (max-width: 768px) {
    #main_slide_box .main_slide {height: 500px;}
    #main_slide_box .swiper-slide .txt {display: none;}
    #main_slide_box .txt_rooting {width: 230px;}
    #main_slide_box .ctrl_box {display: none;}
    #main_slide_box .weather {display: none;}
    #main_slide_box .greeting {width: 430px;}
    #main_slide_box .greeting .img_box {width: 66%;}
    #main_slide_box .link_list_01 a {font-size: 14px;}
    #main_slide_box .link_list_02 {margin-top: 10px;}
    #main_slide_box .link_list_02 a {font-size: 13px;}
    #main_slide_box .link_list_02 li:not(:last-of-type)::after {margin: 0 5px 6px;}
    #main_slide_box .introduce p:first-of-type {font-size: 18px;}
    #main_slide_box .introduce p:last-of-type {font-size: 26px; padding-left: 20px;}
}

@media screen and (max-width: 480px) {
    #main_slide_box .greeting {width: 90%;}
    #main_slide_box .greeting .txt_box {padding: 15px 20px 12px;}
    #main_slide_box .greeting .txt_box > .tb {justify-content: space-between; margin-bottom: 13px;}
    #main_slide_box .txt_rooting {width: 170px;}
    #main_slide_box .link_list_01 {flex-wrap: wrap; justify-content: center; margin-bottom: 0;}
    #main_slide_box .link_list_01 li:not(:last-of-type) {margin-right: 0; margin-bottom: 3px;}
    #main_slide_box .introduce {width: 100%; margin-right: 0; margin-bottom: 3px;}
    #main_slide_box .introduce p:first-of-type {font-size: 16px;}
    #main_slide_box .introduce p:last-of-type {font-size: 22px;}

}


/* ASIDE MENU */
#main_side_menu {position: fixed; left: 30px; top: 21%; z-index: 50; width: auto;}
#main_side_menu .main_move_list {margin-bottom: 20px;}
#main_side_menu .main_move_list li {}
#main_side_menu .main_move_list a {padding: 7px 15px; color: #fff; display: flex; align-items: center; font-size: 20px; border-radius: 15px; font-weight: 500;}
#main_side_menu .main_move_list a.active {background: linear-gradient(#4187ec, #0eb7fa);}
#main_side_menu .main_move_list a.diff {color: #000;}
#main_side_menu .main_move_list a.diff::before {background-color: #000;}
#main_side_menu .main_move_list a::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; margin-right: 9px;}
#main_side_menu .quick_menu {width: 100px; text-align: center; background-color: #4186ec; border-radius: 12px; border-bottom: 5px solid #0cb9fb; box-shadow: 0 5px 10px #4d4848;}
#main_side_menu .quick_menu .txt {padding: 15px 0 5px; color: #fff; font-family: "GmarketSans"; font-weight: 700; line-height: 1.3;}
#main_side_menu .quick_menu .link_list {padding: 15px 0 25px; background-color: #fff; border-radius: 12px;}
#main_side_menu .quick_menu .link_list li {}
#main_side_menu .quick_menu .link_list li:not(:last-of-type)::after {content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #a6a6a6; display: block; margin: 13px auto;}
#main_side_menu .quick_menu .link_list a {}
#main_side_menu .quick_menu .link_list .img_box {margin-bottom: 5px;}
#main_side_menu .quick_menu .link_list .txt_box {font-weight: 800; color: #000;}
#main_side_menu .btn_top {width: 70px; height: 70px; border-radius: 50%; background-color: #1f2126; color: #fff; font-family: "GmarketSans"; display: flex; justify-content: center; align-items: center; padding-top: 8px; margin-left: 15px; line-height: 1.2;}

@media screen and (max-width: 1400px) {
    #main_side_menu {left: 20px;}
    #main_side_menu .main_move_list a {font-size: 16px; padding: 7px 12px;}
    #main_side_menu .quick_menu .txt {font-size: 14px; padding: 12px 0 5px;}
    #main_side_menu .quick_menu .link_list {padding: 15px 0;}
    #main_side_menu .quick_menu .link_list .txt_box {font-size: 14px;}
    #main_side_menu .quick_menu .link_list li:not(:last-of-type)::after {margin: 10px auto;}
    #main_side_menu .btn_top {width: 60px; height: 60px; font-size: 14px; margin-left: 20px;}
}

@media screen and (max-width: 1080px) {
    #main_side_menu {display: none;}
}

/* 고흥소식 */
#main_news {padding: 0 20px;}
#main_news h2 {display: flex; font-family: "GmarketSans"; font-weight: 700; color: #000; font-size: 40px; line-height: 1.2;}
#main_news h2 span {font-family: "GmarketSans"; color: transparent; background: linear-gradient(#00b2f8, #0168ec); background-clip: text; -webkit-background-clip: text; line-height: 1.2;}
#main_news .row_box {margin-top: 60px; display: flex; justify-content: space-between;}
#main_news .row_box > div {width: 48%; height: 400px;}

#main_news .news_box {display: flex; flex-direction: column; justify-content: space-between;}
#main_news .news_box .hd_box {display: flex; align-items: center;}
#main_news .news_box .hd_box p {font-size: 25px; font-weight: 500; margin-bottom: 15px; margin-left: 20px;}
#main_news .news_box .list {height: 100%; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; text-align: center;}
#main_news .news_box .list li {width: 49%; height: 45%;}
#main_news .news_box .list a {height: 100%; display: flex; justify-content: space-between; align-items: center; border: 1px solid #ddd; border-radius: 20px;}
#main_news .news_box .list a:hover, #main_news .news_box .list a:focus {background-color: #f9f9f9;}
#main_news .news_box .list .img_box {width: 40%;}
#main_news .news_box .list .txt_box {width: 60%;}
#main_news .news_box .list h3 {font-family: "GmarketSans"; font-size: 28px; font-weight: 500;}
#main_news .news_box .list h3 .eng {margin-bottom: 5px; font-family: "GmarketSans"; display: block; font-weight: 500; font-size: 19px; color: #888;}

/* 미니슬라이드 */
#main_news .main_mini_slide {border: 1px solid #ddd; margin: 0; border-radius: 20px;}
#main_news .main_mini_slide .btn_move {position: static; width: auto; height: auto; margin: 0;}
#main_news .main_mini_slide .btn_move::after {display: none;}
#main_news .main_mini_slide .btn_move {font-size: 28px; color: #fff;}
#main_news .main_mini_slide .btn_move i {}
#main_news .main_mini_slide .btn_move:hover,
#main_news .main_mini_slide .btn_move:focus {color: #ffa530;}
#main_news .main_mini_slide .btn_move.btn_play, 
#main_news .main_mini_slide .btn_move.btn_pause {font-size: 20px; margin-top: 3px;}
#main_news .main_mini_slide .btn_play {display: none;}
#main_news .main_mini_slide .ctrl_box {padding: 10px 20px 10px 10px; border-top-right-radius: 10px; background-color: #33322e; display: flex; position: absolute; left: 0; bottom: 0; z-index: 20;}
#main_news .main_mini_slide .swiper-slide .img_box {display: block; width: 100%; height: 100%;}
#main_news .main_mini_slide .swiper-slide img {height: 100%; object-fit: cover;}
#main_news .main_mini_slide .swiper-pagination {margin-left: 10px; font-size: 18px; color: #fff; position: static; width: auto;}
#main_news .main_mini_slide .swiper-pagination-current {color: #ffa530; font-size: 23px;}

/* 포토뉴스, 보도자료 */
#main_news .notice_box {display: flex; flex-direction: column;}
#main_news .notice_box h2 {font-family: "Pretendard"; font-weight: 600; font-size: 35px;}
#main_news .notice_box .hd_box {margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}
#main_news .notice_box .btn_more {margin-bottom: 0;}
#main_news .notice_box .list {height: 100%; display: flex; justify-content: space-between; text-align: center;}
#main_news .notice_box .list li {width: 48%; border-radius: 15px; border: 1px solid #ddd; overflow: hidden;}
#main_news .notice_box .list a {width: 100%; height: 100%; display: flex; flex-direction: column;}
#main_news .notice_box .list a:hover .img_box img, 
#main_news .notice_box .list a:focus .img_box img {transform: scale(1.2);}
#main_news .notice_box .list .img_box {position: relative; padding-bottom: 65%; overflow: hidden;}
#main_news .notice_box .list .img_box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s ease;}
#main_news .notice_box .list .txt_box {padding: 0 25px; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#main_news .notice_box .list .brd_pos {min-width: 150px; color: #fff; font-size: 20px; padding: 7px; border-radius: 30px; position: absolute; left: 50%; top: -20px; transform: translateX(-50%);}
#main_news .notice_box .list .title {width: 100%; margin: 10px 0; font-size: 25px; color: #000; font-weight: 600;}
#main_news .notice_box .list .date {font-size: 18px; color: #888; font-weight: 500;}

@media screen and (max-width: 1400px) {
    /* 고흥소식 */
    #main_news h2 {font-size: 35px;}
    #main_news .row_box > div {height: 350px;}
    #main_news .news_box .hd_box p {font-size: 20px; margin-bottom: 10px; margin-left: 15px;}
    #main_news .news_box .list h3 {font-size: 23px;}
    #main_news .news_box .list h3 .eng {font-size: 16px;}

    /* 미니슬라이드 */
    #main_news .main_mini_slide .ctrl_box {padding: 8px 15px 8px 10px;}
    #main_news .main_mini_slide .btn_move.btn_play, 
    #main_news .main_mini_slide .btn_move.btn_pause {font-size: 18px;}
    #main_news .main_mini_slide .btn_move {font-size: 24px;}
    #main_news .main_mini_slide .swiper-pagination-current {font-size: 21px;}
    #main_news .main_mini_slide .swiper-pagination {font-size: 16px;}

    /* 포토뉴스, 보도자료 */
    #main_news .notice_box h2 {font-size: 30px;}
    #main_news .notice_box .list .brd_pos {font-size: 18px;}
    #main_news .notice_box .list .brd_pos {min-width: 130px; top: -18px;}
    #main_news .notice_box .list .title {font-size: 20px;}
    #main_news .notice_box .list .date {font-size: 16px;}

}

@media screen and (max-width: 1080px) {
    /* 고흥소식 */
    #main_news .row_box {flex-wrap: wrap; margin-top: 0;}
    #main_news .row_box > div {width: 100%; height: auto; margin-top: 40px;}
    #main_news .news_box .list h3 {margin-top: 8px;}
    #main_news .news_box .list h3 .eng {margin-bottom: 5px;}
    #main_news .news_box .list a {padding: 25px 10px;}

    /* 미니슬라이드 */
    #main_news .main_mini_slide .swiper-slide .img_box {position: relative; padding-bottom: 52.1%;}
    #main_news .main_mini_slide .swiper-slide img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

    /* 포토뉴스, 보도자료 */
    #main_news .notice_box {margin-bottom: 0;}
    #main_news .notice_box .list .txt_box {padding: 25px 10px;}

}

@media screen and (max-width: 768px) {
    /* 고흥소식 */
    #main_news h2 {font-size: 30px;}
    #main_news .news_box .list h3 {font-size: 18px;}
    #main_news .news_box .list h3 .eng {font-size: 14px; margin-bottom: 3px;}
    #main_news .news_box .list img {width: 50px;}
    #main_news .news_box .hd_box p {font-size: 16px; margin-bottom: 7px; margin-left: 10px;}

    /* 포토뉴스, 보도자료 */
    #main_news .notice_box h2 {font-size: 25px;}
    #main_news .notice_box .hd_box {margin-bottom: 15px;}
    #main_news .notice_box .list .txt_box {padding: 20px 10px;}
    #main_news .notice_box .list .brd_pos {font-size: 16px; min-width: 110px;}
    #main_news .notice_box .list .title {font-size: 17px;}
    #main_news .notice_box .list .date {font-size: 14px;}
}

@media screen and (max-width: 480px) {
    /* 고흥소식 */
    #main_news h2 {font-size: 25px;}
    #main_news .news_box .hd_box {margin-bottom: 15px;}
    #main_news .news_box .hd_box p {margin: 0; font-size: 14px; width: 100%;}
    #main_news .news_box .list {flex-wrap: wrap;}
    #main_news .news_box .list li {width: 100%; height: auto;}
    #main_news .news_box .list li:not(:last-of-type) {margin-bottom: 5px;}
    #main_news .news_box .list a {padding: 15px 10px;}
    #main_news .news_box .list h3 {font-size: 16px;}
    #main_news .news_box .list h3 .eng {font-size: 13px;}

    /* 미니슬라이드 */
    #main_news .main_mini_slide .swiper-pagination {font-size: 13px;}
    #main_news .main_mini_slide .swiper-pagination-current {font-size: 17px;}
    #main_news .main_mini_slide .btn_move {font-size: 18px;}
    #main_news .main_mini_slide .btn_move.btn_play, 
    #main_news .main_mini_slide .btn_move.btn_pause {font-size: 14px; margin-top: 2px;}
    #main_news .main_mini_slide .ctrl_box {padding: 5px 10px;}
    
    /* 포토뉴스, 보도자료 */
    #main_news .notice_box h2 {font-size: 20px;}
    #main_news .notice_box .list {flex-wrap: wrap;}
    #main_news .notice_box .list li {width: 100%;}
    #main_news .notice_box .list li:not(:last-of-type) {margin-bottom: 10px;}
    #main_news .notice_box .list .brd_pos {font-size: 14px; top: -17px;}
    #main_news .notice_box .list .date {font-size: 13px;}
    #main_news .notice_box .list .title {font-size: 16px; margin: 5px 0;}
}

/* 고흥군 분야별서비스 */
#main_service {margin-top: 50px; margin-bottom: 50px; padding: 0 20px;}
#main_service .slide_box {margin-bottom: 30px; display: flex; align-items: center;}
#main_service .slide_info_box {margin-right: 30px; display: flex; align-items: flex-end; flex-shrink: 0;}
#main_service .slide_info_box h2 {font-size: 35px; font-family: "GmarketSans"; font-weight: 500; line-height: 1.2;}
#main_service .slide_info_box h2 span {margin-top: -5px; display: block; font-family: "GmarketSans"; font-weight: 700; color: #006fba; line-height: 1.2;}
#main_service .slide_info_box .img_box {margin-right: 25px;}
#main_service .slide_info_box .txt_box {}
#main_service .ctrl_box {display: flex;}
#main_service .ctrl_box .btn_move {border: 1px solid #ddd; width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; position: static; margin: 0;}
#main_service .ctrl_box .btn_move::after {display: none;}
#main_service .ctrl_box .btn_move i {color: #666; font-weight: 800; font-size: 20px;}
#main_service .ctrl_box .btn_move.btn_play,
#main_service .ctrl_box .btn_move.btn_pause {margin: 0 5px;}
#main_service .ctrl_box .btn_move.btn_play {display: none;}
#main_service .main_service_slide {width: 100%; text-align: center;}
#main_service .main_service_slide a {display: block; width: 100%; height: 100%;}
#main_service .main_service_slide .img_box {height: 100px; display: flex; justify-content: center; align-items: center;}
#main_service .main_service_slide p {font-family: "GmarketSans"; font-size: 21px; color: #000; font-weight: 500; line-height: 1.2;}
#main_service .link_box {height: 260px;}
#main_service .dep1_list {width: 20%; height: 100%; border-radius: 10px; background-color: #f1f5f9; position: relative; display: flex; flex-direction: column; justify-content: center;}
#main_service .dep1 {display: flex; align-items: center; padding: 12px 0 3px 15%; font-family: "GmarketSans"; font-weight: 500; font-size: 21px; position: relative; z-index: 5; transition: all 0.5s ease; line-height: 1.2;}
#main_service .dep1::before {content: ""; width: 0; height: 2px; background-color: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: width 0.5s ease;}
#main_service .dep1::after {content: ""; width: 0; height: 100%; position: absolute; top: 0; left: 0; background-color: #0d82ea; z-index: -1; border-radius: 0 20px 20px 0; transition: width 0.5s ease;}
#main_service .dep1.active, #main_service .dep1:hover {color: #fff; font-size: 24px; padding-left: 25%;}
#main_service .dep1.active::before, #main_service .dep1:hover::before {width: 20%}
#main_service .dep1.active::after, #main_service .dep1:hover::after {width: 120%}
#main_service .dep1.active + .dep2_list {display: flex;}
#main_service .dep2_list {display: none; border-radius: 10px; gap: 15px calc(8% / 3); padding-left: 25%; padding-right: 13%; border: 1px solid #ddd; width: calc(100% * 4 - 20px); height: 100%; flex-wrap: wrap; align-content: center; position: absolute; top: 0; left: calc(100% + 20px);}
#main_service .dep2_list > li {width: 23%;}
#main_service .dep2 {width: 100%; height: 80px; padding: 0 8%; font-size: 21px; font-weight: 600; display: flex; justify-content: center; align-items: center; background-color: #f1f5f9; border-radius: 10px;}
#main_service .dep2:hover, #main_service .dep2:focus {background-color: #d3e0ee;}
#main_service .dep2 .img_box {width: 27%; margin-right: 3%; text-align: center;}
#main_service .dep2 .txt_box {width: 70%; text-align: center;}

@media screen and (max-width: 1400px) {
    #main_service .slide_info_box h2 {font-size: 30px;}
    #main_service .main_service_slide p {font-size: 18px;}
    #main_service .ctrl_box .btn_move {width: 35px; height: 35px;}
    #main_service .ctrl_box .btn_move i {font-size: 17px;}
    #main_service .link_box {height: 230px;}
    #main_service .dep1 {font-size: 18px;}
    #main_service .dep1.active, #main_service .dep1:hover {font-size: 21px;}
    #main_service .dep2_list {gap: 10px calc(4% / 3); padding-left: 20%; padding-right: 7%;}
    #main_service .dep2_list > li {width: 24%;}
    #main_service .dep2 {font-size: 18px;}
}

@media screen and (max-width: 1080px) {
    #main_service {margin-bottom: 245px;}
    #main_service .slide_info_box {margin-right: 15px;}
    #main_service .slide_info_box .img_box {width: 70px;}
    #main_service .slide_info_box h2 {font-size: 25px;}
    #main_service .ctrl_box .btn_move {width: 30px; height: 30px;}
    #main_service .ctrl_box .btn_move i {font-size: 15px;}
    #main_service .ctrl_box .btn_move.btn_play, 
    #main_service .ctrl_box .btn_move.btn_pause {margin: 0 2px;}
    #main_service .main_service_slide p {font-size: 16px;}
    #main_service .main_service_slide .img_box {height: 75px;}
    #main_service .main_service_slide .img_box img {width: 50px;}

    #main_service .link_box {height: auto;}
    #main_service .dep1_list {width: 100%; flex-direction: row; border: 1px solid #ddd; background-color: #f1f5f9;}
    #main_service .dep1_list > li {width: calc(100% / 4);}
    #main_service .dep1_list > li:not(:last-of-type) {border-right: 1px solid #ddd;}
    #main_service .dep1 {width: 100%; height: 100%; font-size: 16px; padding: 15px 5px 10px; justify-content: center; text-align: center; transition: all 0.3s ease;}
    #main_service .dep1::after, #main_service .dep1::before {display: none;}
    #main_service .dep1.active, #main_service .dep1:hover {background-color: #0d82ea; font-size: 16px; padding-left: 0;}
    #main_service .dep2_list {width: 100%; height: auto; padding: 0; left: 0; top: calc(100% + 20px); border: none;}
    #main_service .dep2 {border: 1px solid #ddd; font-size: 16px;}
}

@media screen and (max-width: 768px) {
    #main_service {margin-bottom: 300px;}
    #main_service .slide_box {flex-wrap: wrap;}
    #main_service .slide_info_box {margin-bottom: 10px;}
    #main_service .slide_info_box .txt_box {display: flex; align-items: center;}
    #main_service .ctrl_box {margin-bottom: 12px; margin-left: 15px;}
    #main_service .dep1_list {flex-wrap: wrap; border: none; justify-content: flex-start; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-radius: unset;}
    #main_service .dep1_list a {font-size: 14px;}
    #main_service .dep1_list > li {width: calc(100% / 2); border-right: 1px solid #ddd !important; border-bottom: 1px solid #ddd;}
    #main_service .dep1_list > li:not(:last-of-type) {border-right: none;}
    #main_service .dep1 {font-size: 14px;}
    #main_service .dep1.active, #main_service .dep1:hover {font-size: 14px;}
    #main_service .dep2_list {gap: 5px calc(2.2% / 2);}
    #main_service .dep2_list > li {width: 32.6%;}
}

@media screen and (max-width: 480px) {
    #main_service {margin-bottom: 400px;}
    #main_service {margin-top: 40px;}
    #main_service .slide_info_box {margin-right: 0;}
    #main_service .slide_info_box h2 {font-size: 22px;}
    #main_service .ctrl_box {margin-bottom: 0; margin-left: 0;}
    #main_service .slide_info_box .txt_box {display: block;}
    #main_service .main_service_slide p {font-size: 14px;}
    #main_service .dep2_list {gap: 5px 1%;}
    #main_service .dep2_list > li {width: 49%;}
    #main_service .dep2 .img_box {width: 24%; margin-right: 6%;}
}

/* 고흥 8경 9미 */
#main_tour {background-color: #f0f7fe; padding: 80px 20px;}
#main_tour .inner1500 {height: 500px; display: flex; justify-content: space-between;}
#main_tour .inner1500 > .lb {width: 38%; position: relative;}
#main_tour .inner1500 > .rb {width: 55%; border-radius: 20px; overflow: hidden;}
#main_tour .inner1500 > .rb .img_box {display: none; height: 100%;}
#main_tour .inner1500 > .rb .img_box.active {display: block;}
#main_tour .inner1500 > .rb .img_box img {display: none; height: 100%; object-fit: cover;}
#main_tour .inner1500 > .rb .img_box img.active {display: block;}
#main_tour .yellow_figure {position: absolute; right: -150px; bottom: 0;}
#main_tour .tab_box_01 {display: flex; justify-content: center;}
#main_tour .tab_box_01 > li:not(:last-of-type) {margin-right: 15px;}
#main_tour .tab_01 {display: inline-flex; font-size: 22px; line-height: 1.2; font-family: "GmarketSans"; font-weight: 500; transition: none; position: relative;}
#main_tour .tab_01.active, #main_tour .tab_01:hover {color: #0d82ea;}
#main_tour .tab_01.active::after, #main_tour .tab_01:hover::after {content: ""; width: 85%; height: 3px; background-color: #0d82ea; position: absolute; top: 93%; left: 50%; transform: translateX(-50%);}
#main_tour .detail_box {display: none; width: 100%; height: 424px; position: absolute; top: 75px; left: 0;}
#main_tour .tab_01.active + .detail_box {display: block;}
#main_tour .txt_box {display: none;}
#main_tour .txt_box.active {display: block;}
#main_tour .title {margin-bottom: 10px; font-size: 30px; font-family: "GmarketSans"; font-weight: 500; line-height: 1.3; color: #111; word-break: keep-all;}
#main_tour .title span {font-family: "GmarketSans"; font-weight: 700; color: #111;}
#main_tour .desc {margin-bottom: 25px; font-size: 20px; font-weight: 500; color: #111; line-height: 1.3;}
#main_tour .btn_detail {color: #fff; background-color: #7b8690; display: inline-flex; padding: 7px 25px; border-radius: 25px;}
#main_tour .btn_detail:hover, #main_tour .btn_detail:focus {background-color: #656e76;}
#main_tour .tab_box_02 {width: 100%; display: flex; flex-wrap: wrap; gap: 3px calc(2% / 3); position: absolute; bottom: 0; left: 0;}
#main_tour .tab_box_02 li {width: 24.5%;}
#main_tour .tab_02 {height: 57px; padding: 6px 5px 0; border-radius: 10px; border: 3px solid #0d82ea; background-color: #0d82ea; color: #fff; width: 100%; display: flex; justify-content: center; align-items: center; font-family: "GmarketSans"; line-height: 1.2; font-weight: 500; word-break: keep-all; text-align: center;}
#main_tour .tab_02.active,
#main_tour .tab_02:hover {color: #0d82ea; background-color: #fff;}

@media screen and (max-width: 1080px) {
    #main_tour {padding: 45px 20px;}
    #main_tour .inner1500 {height: 450px;}
    #main_tour .inner1500 > .lb {width: 45%;}
    #main_tour .inner1500 > .rb {width: 50%;}
    #main_tour .tab_01 {font-size: 20px;}
    #main_tour .title {font-size: 28px;}
    #main_tour .desc {font-size: 18px;}
    #main_tour .btn_detail {font-size: 14px;}
    #main_tour .tab_02 {height: 50px; font-size: 14px;}
    #main_tour .detail_box {height: 384px; top: 60px;}
    #main_tour .yellow_figure {width: 100px; right: -110px;}
}

@media screen and (max-width: 768px) {
    #main_tour .inner1500 {flex-wrap: wrap; height: auto;}
    #main_tour .inner1500 > .lb {width: 100%;}
    #main_tour .inner1500 > .rb {width: 100%;}
    #main_tour .inner1500 > .rb .img_box img {width: 100%; object-fit: none;}
    #main_tour .detail_box {height: auto;}
    #main_tour .tab_box_02 {position: static; margin-top: 30px;}
    #main_tour .yellow_figure {display: none;}

}

@media screen and (max-width: 480px) {
    #main_tour {padding: 30px 20px;}
    #main_tour .tab_01 {font-size: 16px;}
    #main_tour .title {font-size: 20px; margin-bottom: 5px;}
    #main_tour .desc {font-size: 14px; margin-bottom: 15px;}
    #main_tour .btn_detail {font-size: 13px; padding: 7px 15px;}
    #main_tour .tab_box_02 {gap: 3px calc(1% / 2);}
    #main_tour .tab_box_02 li {width: 33%;}
    #main_tour .tab_02 {font-size: 13px; border-width: 2px; height: 45px;}
}

/* 고흥군 SNS */
#main_sns {padding: 80px 20px;}
#main_sns > .inner1500 {height: 386px; display: flex; justify-content: space-between;}
#main_sns .sns_box {width: 44%; display: flex; flex-direction: column;}
#main_sns .sns_box .hd_box {margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;}
#main_sns .sns_box h2 {font-size: 40px; font-weight: 700; color: #000; line-height: 1.3;}
#main_sns .sns_box h2 span {background: linear-gradient(#00b4f8, #0165eb); color: transparent; background-clip: text; -webkit-background-clip: text;}
#main_sns .sns_box .other_sns_list {display: flex; align-items: center;}
#main_sns .sns_box .other_sns_list li:first-of-type {margin-right: 10px;}
#main_sns .sns_box .other_sns_list li:not(:first-of-type) {margin-left: 5px;}
#main_sns .sns_box .other_sns_list a {display: inline-flex;}
#main_sns .sns_box .ctrl_box {display: flex; align-items: center;}
#main_sns .sns_box .btn_move {font-size: 24px; width: auto; height: auto; position: static; margin: 0; color: #111;}
#main_sns .sns_box .btn_move::after {display: none;}
#main_sns .sns_box .btn_move.btn_play {display: none;}
#main_sns .sns_box .btn_move.btn_pause {margin-top: 2px;}
#main_sns .main_sns_slide {width: 100%; height: 100%;}
#main_sns .main_sns_slide .swiper-slide {padding: 20px; border: 1px solid #ddd; border-radius: 20px;}
#main_sns .main_sns_slide .swiper-slide a {display: flex; flex-direction: column; justify-content: space-between;}
#main_sns .main_sns_slide .thumbnail {height: 150px; margin-bottom: 20px; position: relative;}
#main_sns .main_sns_slide .thumbnail img {height: 100%; object-fit: cover;}
#main_sns .main_sns_slide .desc {margin-bottom: 20px; padding: 0 10px; height: 60px; color: #000; font-size: 17px; font-weight: 600;}
#main_sns .main_sns_slide .swiper-slide a > .bb {display: flex; justify-content: space-between; align-items: center;}
#main_sns .main_sns_slide .date {color: #888; font-weight: 500;}
#main_sns .alarm_popup {width: 24%; display: flex; flex-direction: column;}
#main_sns .alarm_popup h2 {padding-top: 10px; font-size: 35px; font-weight: 500; color: #000; font-family: "GmarketSans"; line-height: 1.2;}
#main_sns .alarm_popup .hd_box {flex-shrink: 0; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center;}
#main_sns .alarm_popup .ctrl_box {display: flex; align-items: center;}
#main_sns .alarm_popup .btn_move {font-size: 24px; width: auto; height: auto; position: static; margin: 0; color: #111;}
#main_sns .alarm_popup .btn_move::after {display: none;}
#main_sns .alarm_popup .btn_move.btn_play,
#main_sns .alarm_popup .btn_move.btn_pause {font-size: 20px; margin-top: 2px;}
#main_sns .alarm_popup .btn_move.btn_play {display: none;}
#main_sns .alarm_popup .btn_move.btn_pause {}
#main_sns .alarm_popup .swiper-pagination {margin-right: 10px; position: static; font-size: 20px;}
#main_sns .alarm_popup .swiper-pagination-current {font-size: 25px; color: #ed5f00;}
#main_sns .alarm_popup_slide {width: 100%; height: 100%;}
#main_sns .alarm_popup_slide .img_box {height: 100%; display: block; border-radius: 10px; overflow: hidden;}
#main_sns .alarm_popup_slide .img_box img {height: 100%; object-fit: cover;}
#main_sns .calendar_box {width: 26%; padding: 20px; padding-bottom: 10px; border: 1px solid #ddd; border-top: 10px solid #bf0000; border-radius: 10px;}
#main_sns .calendar_box .hd_box {display: flex; justify-content: space-between;}
#main_sns .calendar_box .hd_box > div {border: 1px solid #aaa; border-radius: 10px; overflow: hidden;}
#main_sns .calendar_box .cal_info_box {width: 22%;}
#main_sns .calendar_box .cal_info_box > div {font-family: "GmarketSans"; font-weight: 700; line-height: 1.2; display: flex; justify-content: center; align-items: center;}
#main_sns .calendar_box .cal_info_box > div:first-of-type {height: 65%; font-size: 25px; color: #000; background-color: #eee; padding-top: 10px;}
#main_sns .calendar_box .cal_info_box > div:last-of-type {height: 35%; font-size: 14px; color: #fff; background-color: #aaa; padding-top: 7px;}
#main_sns .calendar_box .tbl_box {width: 48%; padding: 10px; font-size: 10px; font-weight: 800;}
#main_sns .calendar_box .tbl_box a {display: inline-flex; padding: 1px 0; color: #000; position: relative; z-index: 1;}
#main_sns .calendar_box .tbl_box a.active {color: #fff;}
#main_sns .calendar_box .tbl_box a.active::before {content: ""; width: 18px; height: 18px; background-color: #bf0000; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1;}
#main_sns .calendar_slide {text-align: center; height: 235px;}
#main_sns .calendar_slide .day {padding-top: 10px; font-size: 80px; font-weight: 800; color: #000;}
#main_sns .calendar_slide .title {margin-bottom: 5px; font-size: 17px; font-weight: 800; color: #bf0000; word-break: keep-all;}
#main_sns .calendar_slide .sub_title {margin-bottom: 8px; font-size: 22px; font-weight: 800; color: #000; word-break: keep-all;}
#main_sns .calendar_slide .ctt {font-size: 15px; font-weight: 600; word-break: keep-all;}
#main_sns .calendar_slide .swiper-pagination {bottom: 0;}
#main_sns .calendar_slide .swiper-pagination-bullet {opacity: 1; background-color: #888;}
#main_sns .calendar_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #359df3;}

@media screen and (max-width: 1400px) {
    #main_sns .sns_box h2 {font-size: 35px;}
    #main_sns .sns_box .btn_move {font-size: 20px;}
    #main_sns .sns_box .other_sns_list a {height: 25px;}
    #main_sns .sns_box .other_sns_list li:first-of-type {margin-right: 5px;}
    #main_sns .sns_box .other_sns_list li:not(:first-of-type) {margin-left: 3px;}
    #main_sns .alarm_popup h2 {font-size: 30px;}
    #main_sns .alarm_popup .swiper-pagination {font-size: 18px;}
    #main_sns .alarm_popup .swiper-pagination-current {font-size: 23px;}
    #main_sns .alarm_popup .btn_move {font-size: 20px;}

}

@media screen and (max-width: 1240px) {
    #main_sns > .inner1500 {height: 370px;}
    #main_sns .sns_box {width: 28%;}
    #main_sns .sns_box .other_sns_list {display: none;}
    #main_sns .alarm_popup {width: 30%;}
    #main_sns .calendar_box {width: 33%;}
    #main_sns .calendar_slide .swiper-pagination {bottom: 10px;}
}

@media screen and (max-width: 1080px) {
    #main_sns {padding: 40px 20px;}
    #main_sns > .inner1500 {height: auto; flex-wrap: wrap; align-items: center;}
    #main_sns .sns_box {width: 100%; margin-bottom: 30px;}
    #main_sns .sns_box h2 {font-size: 30px;}
    #main_sns .main_sns_slide .thumbnail {height: auto; position: relative; padding-bottom: 54.6%;}
    #main_sns .main_sns_slide .thumbnail img {width: 100%; object-fit: initial; position: absolute; top: 0; left: 0;}
    #main_sns .alarm_popup {width: 50%;}
    #main_sns .alarm_popup h2 {font-size: 25px;}
    #main_sns .alarm_popup_slide .img_box {position: relative; height: auto; padding-bottom: 91.7%;}
    #main_sns .alarm_popup_slide .img_box img {object-fit: initial; width: 100%; position: absolute; top: 0; left: 0;}
    #main_sns .calendar_box {width: 45%;}
    #main_sns .calendar_slide {}
    #main_sns .calendar_slide .title {font-size: 15px;}
    #main_sns .calendar_slide .ctt {font-size: 14px;}
    #main_sns .calendar_slide .sub_title {font-size: 20px;}
    #main_sns .calendar_slide .day {font-size: 60px; margin-bottom: 10px;}
    #main_sns .calendar_box .cal_info_box > div:first-of-type {font-size: 22px;}
    #main_sns .calendar_box .cal_info_box > div:last-of-type {font-size: 13px;}

}

@media screen and (max-width: 768px) {
    #main_sns .alarm_popup {width: 100%; margin-bottom: 30px;}
    #main_sns .calendar_box {width: 100%; padding: 10px;}
    #main_sns .calendar_slide {height: 220px;}
    #main_sns .main_sns_slide .thumbnail {margin-bottom: 10px;}
    #main_sns .main_sns_slide .swiper-slide {padding: 15px;}
    #main_sns .main_sns_slide .desc {font-size: 15px; height: 55px; margin-bottom: 10px;}
    #main_sns .main_sns_slide .date {font-size: 13px;}
}

@media screen and (max-width: 480px) {
    #main_sns .sns_box h2 {font-size: 25px;}
    
    
    #main_sns .alarm_popup h2 {font-size: 22px;}
    #main_sns .alarm_popup .swiper-pagination {font-size: 16px;}
    #main_sns .alarm_popup .swiper-pagination-current {font-size: 21px;}
}

/* 하단 배너 */
#main_banner {margin-bottom: 20px; padding: 0 20px;}
#main_banner > .inner1500 {display: flex; align-items: center;}
#main_banner .ctrl_box {flex-shrink: 0; display: flex; border: 1px solid #cdcdcd;}
#main_banner .btn_move {color: #95979a; width: 40px; height: 40px; margin: 0; position: static; display: inline-flex; justify-content: center; align-items: center; font-size: 24px;}
#main_banner .btn_move:hover, #main_banner .btn_move:focus {background-color: #f9f9f9;}
#main_banner .btn_move:not(:last-of-type) {border-right: 1px solid #cdcdcd;}
#main_banner .btn_move::after {display: none;}
#main_banner .btn_move.btn_play {display: none;}
#main_banner .main_banner_slide {width: 100%; text-align: center; margin: 0 40px;}
#main_banner .main_banner_slide .swiper-slide {width: auto;}
#main_banner .main_banner_slide a {font-size: 17px; color: #000; font-weight: 500; display: inline-flex; justify-content: center; align-items: center;}
#main_banner .main_banner_slide a:hover, 
#main_banner .main_banner_slide a:focus {text-decoration: underline;}
 

@media screen and (max-width: 1080px) {
    #main_banner .btn_move {width: 30px; height: 30px; font-size: 20px;}
    #main_banner .main_banner_slide {margin: 0 20px;}
    #main_banner .main_banner_slide a {font-size: 15px;}
}

@media screen and (max-width: 480px) {
    #main_banner > .inner1500 {flex-wrap: wrap; justify-content: center;}
    #main_banner .ctrl_box {margin-bottom: 10px;}
    #main_banner .main_banner_slide {width: 100%; margin: 0;}
}




@media screen and (max-width: 1560px) {
    
}
@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1240px) {
    
}
@media screen and (max-width: 1080px) {
    
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 480px) {
    
}