@charset "UTF-8";

/* HEADER - START */

#header {
    display: flex; align-items: center;
    width: 100%; height: 80px;
    padding: 0 35px;
    background-color: #fff;
    position: fixed; left: 0; top: 0; z-index: 1000;
}

.header_inner {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-width: 1400px;
}
.logo {
    flex-shrink: 0;
    width: 200px; height: 52px;
}
.logo a { 
    display: block;
    width: 100%; height: 52px;
    background: url(../images/logo.png) no-repeat left center / contain;
}

.header_box {display: flex; align-items: center;}

.menu_wrap {display: flex; align-items: center;}

/* gnb */
.gnb {
    display: flex; align-items: flex-start;
    margin-right: 15px;
}
.gnb.hover {transform: translateX(-38%);}
.gnb_list {
    height: auto; 
    position: relative;
}
.gnb_list > a {
    overflow: hidden;
    display: block;
    padding: 0 20px;
    font-weight: 700; font-size: 19px; line-height: 80px;
    position: relative;
    transition: all 0.3s;
}
.gnb_list > a::before {content: "";
    width: 90px; height: 3px;
    background-color: #066de0;
    position: absolute; left: -100%; bottom: -1px;
    transition: left 0.3s;
}
.gnb_list:nth-child(3) a::before {width: 125px;}
.gnb_list:nth-child(5) a::before {width: 50px;}
.gnb_list:nth-child(6) a::before {width: 70px;}

.depth2 {
    display: none;
    width: 100%;
    padding-top: 20px;
    transition: all 0.3s;
}
.depth2 li + li {margin-top: 5px;}
.depth2 li a {
    display: block;
    padding: 5px 15px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: 400; font-size: 15px; line-height: 20px;
    transition: all 0.1s;
}

.gnb_bg {
    width: 100%; height: 0;
    border-top: 1px solid #e5e5e5;
    background-color: #fff;
    position: absolute; left: 0; top: 80px; z-index: -1;
}
.gnb_bg::before {content: "";
    display: none;
    width: 230px; height: 320px;
    background: url(../images/gnb_bg.png) no-repeat left top / contain;
    position: absolute; left: 0; top: 0;
}

.gnb_list:hover > a {color: #066de0;}
.gnb_list:hover > a::before {left: 20px;}
.gnb:hover {margin-top: 350px;}
.gnb:hover .gnb_list {height: 430px;}
.gnb:hover .depth2 {display: block;}
.gnb:hover + .gnb_bg {height: 340px;}
.gnb:hover + .gnb_bg::before {display: block;}
.depth2 li a:hover {
    border-color: #066de0;
    color: #066de0;
}


/* login 전 */
#header .login {
    flex-shrink: 0;
    padding: 0 25px;
    margin-right: 10px;
    border: 1px solid #066de0;
    border-radius: 25px;
    font-size: 14px; line-height: 40px; color: #066de0;
}


/* login 후 */
#header .login_box {display: flex; align-items: center;}
#header .user {
    display: flex; align-items: center;
    position: relative;
}
#header .user_name {
    flex-shrink: 0;
    padding: 0 50px 0 25px;
    margin-right: 7px;
    border: 1px solid #066de0;
    border-radius: 25px;
    font-size: 14px; line-height: 40px; color: #066de0;
    background-color: #fff;
    position: relative;
}
#header .user_name::before, #header .user_name::after {content: "";
    width: 6px; height: 1px;
    background-color: #066de0;
    position: absolute; right: 21px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
#header .user_name::after {
    right: 17px;
    transform: translateY(-50%) rotate(-45deg);
}

#header .user_name.on {
    border-color: #536c80;
    border-bottom-color: transparent;
    border-radius: 25px 25px 0 0;
    color: #003a67; z-index: 1;
}
#header .user_name.on::before {
    background-color: #003a67;
    transform: translateY(-50%) rotate(135deg);
}
#header .user_name.on::after {
    background-color: #003a67;
    transform: translateY(-50%) rotate(-135deg);
}

#header .user_pop {
    display: none;
    flex-direction: column; align-items: center;
    width: 360px;
    padding: 40px;
    border: 1px solid #536c80;
    border-radius: 10px 0 10px 10px;
    background-color: #fff;
    position: absolute; right: 7px; top: 41px; z-index: 0;
}
#header .user_pop.on {display: flex;}
#header .user_info {
    display: flex; align-items: center;
    width: 100%;
    margin-bottom: 35px;
}
#header .user_photo {
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    width: 55px; height: 55px;
    margin-right: 20px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #fff;
}
#header .user_photo img {
    width: 100%;
    object-fit: cover;
}
#header .user_info p {font-weight: 500; font-size: 19px; line-height: 25px;}
#header .user_info p span {
    display: block;
    font-weight: 400; font-size: 14px; color: #333;
}

#header .user_percent {
    display: flex; align-items: center;
    height: 20px;
    margin-bottom: 25px;
}
#header .user_percent li {
    width: 20px; height: 20px;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
}
#header .user_percent li + li {margin-left: 42px;}
#header .user_percent li::before {content: "";
    width: 12px; height: 12px;
    border-radius: 50%;
    background-color: #bcc9cf;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
#header .user_percent li::after {content: "";
    width: 42px; height: 2px;
    background-color: #bcc9cf;
    position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%);
}
#header .user_percent li:first-child::after {display: none;}

#header .user_percent li.on {background-color: #066de0;}
#header .user_percent li.on::before {
    width: 11px; height: 11px;
    background-color: #fff;
}
#header .user_percent li.on::after {background-color: #066de0;}

#header .user_data {
    margin-bottom: 20px;
    font-size: 15px; line-height: 24px; color: #333;
}
#header .user_data strong {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}
#header .user_data p span.textUnder {text-decoration: underline;}
#header .user_data p span.textB {font-weight: 600; color: #066de0;}

#header .user_menu {width: 100%;}
#header .user_menu li {
    width: 100%; 
    height: 50px;
    border: 1px solid #066de0;
    border-radius: 10px;
}
#header .user_menu li + li {margin-top: 10px;}
#header .user_menu li a {
    display: block;
    width: 100%; height: 50px;
    padding: 0 25px;
    line-height: 50px; text-align: right; color: #066de0;
    background: url(../images/ico_head_my6.png) no-repeat left 20px center / 24px 27px;
}

#header .user_menu li.icon01 a {background: url(../images/ico_head_my6.png) no-repeat left 25px center / 24px 27px;}
#header .user_menu li.icon02 a {background: url(../images/ico_head_my3.png) no-repeat left 25px center / 24px 27px;}
#header .user_menu li.icon03 a {background: url(../images/ico_head_my2.png) no-repeat left 25px center / 24px 27px;}
#header .user_menu li.icon04 a {background: url(../images/ico_head_my5.png) no-repeat left 25px center / 24px 27px;}
#header .user_menu li.icon05 a {background: url(../images/ico_head_my1.png) no-repeat left 25px center / 24px 27px;}
#header .user_menu li.icon06 a {background: url(../images/ico_head_my4.png) no-repeat left 25px center / 24px 27px;}
#header .user_menu li.icon07 a {background: url(../images/ico_head_my7.png) no-repeat left 10px center / 40px 40px;}
#header .user_menu li.icon08 a {background: url(../images/ico_head_my8.png) no-repeat left 10px center / 40px 40px;}
#header .user_menu li.icon09 a {background: url(../images/ico_head_my9.png) no-repeat left 10px center / 40px 40px;}
#header .user_menu li.icon10 a {background: url(../images/ico_head_my10.png) no-repeat left 10px center / 35px 35px;}
#header .user_menu li.icon11 a {background: url(../images/ico_head_my11.png) no-repeat left 10px center / 35px 35px;}
#header .user_menu li.icon12 a {background: url(../images/ico_head_my12.png) no-repeat left 10px center / 35px 35px;}
#header .user_menu li.icon13 a {background: url(../images/ico_head_my13.png) no-repeat left 10px center / 35px 35px;}



#header .logout {
    padding: 0 15px;
    margin-right: 7px;
    border: 1px solid #dbe3ea;
    border-radius: 25px;
    font-size: 14px; line-height: 40px; color: #575b5e;
    background-color: #dbe3ea;
}

.m_user {display: none;}


/* search */
#header .search_box {
    margin-right: 10px;
    position: relative;
}
#header .search {
    display: block;
    width: 40px; height: 40px;
    border-radius: 50%;
    text-indent: -9999px;
    background: #003a67 url(../images/ico_head_search.png) no-repeat center / 16px;
    position: relative; z-index: 1;
}
#header .search_box fieldset {
    display: none;
    position: absolute; right: 2px; top: -1px;
}
#header .search_box fieldset.on {display: block;}
#header .search_input {
    width: 325px; height: 42px;
    padding: 0 85px 0 25px;
    border: 1px solid #003a67;
    border-radius: 20px;
}
#header .search_input::placeholder {color: #003a67;}
#header .search_delete {
    width: 23px; height: 23px;
    background: url(../images/ico_head_search_close.png) no-repeat center / contain;
    position: absolute; right: 48px; top: 9px; z-index: 10;
}


/* zoom-in/out */
.zoom_box {display: flex; align-items: center;}
.zoom_box > span {
    margin-right: 8px;
    font-size: 14px; letter-spacing: -1px;
}
.zoom_in {
    width: 24px; height: 24px;
    margin-right: 5px;
    border: 1px solid #c2c7cb;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
}
.zoom_in::before, .zoom_in::after {content: "";
    width: 2px; height: 8px;
    background-color: #111;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.zoom_in::after {transform: translate(-50%, -50%) rotate(90deg);}
.zoom_out {
    width: 23px; height: 23px;
    border: 1px solid #c2c7cb;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
}
.zoom_out::before {content: "";
    width: 8px; height: 2px;
    background-color: #111;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

/* HEADER - END */










/* MAIN - START */
.section {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.sec {
    min-width: 1400px; 
    padding-top: 80px;
    position: relative;
}

.sec1 {
    padding-top: 140px;
    background-image: url(../images/bg1.jpg);
}
.sec2 {background-image: url(../images/bg2.jpg);}
.sec4 {background-image: url(../images/bg4.jpg);}

.sec_wrap {
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
    width: 1400px; height: 100%;
    padding: 0 10px;
}

.sec_title {
    display: flex; flex-direction: column; align-items: center;
    margin-bottom: 30px;
    position: relative;
}
.sec_title p {font: bold 40px/45px 'Environment'; color: #003a67; text-align: center;}
.sec_title p.desc {
    margin-top: 10px;
    font-weight: normal; font-size: 15px; line-height: 20px; color: #364550;
}


/* sec1 */

.sec1 {color: #fff;}

/* sec1_notice */
.util {
    width: 100%; height: 60px;
    background-color: rgba(0,0,0,0.5);
    position: absolute; left: 0; top: 80px;
}
.util_inner {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-width: 1400px; height: 60px;
    padding: 0 35px 0 45px;
}

.util_notice {display: flex;}
.util_notice strong {
    width: 115px;
    padding-left: 40px;
    margin-right: 20px;
    font-size: 14px; line-height: 60px;
    background: url(../images/ico_main_notice.png) no-repeat left center / 25px 20px;
}

.notice {height: 60px;}
.notice .notice_content {
    display: block;
    padding-left: 35px;
}
.notice .notice_content p {font-size: 14px; line-height: 60px;}
.notice .notice_content p span {
    display: inline-block;
    margin-left: 20px;
    color: #999;
}

.notice .swiper-button-next {
    width: 15px; height: 15px;
    left: 0; top: 52px;
    transform: rotate(90deg);
}
.notice .swiper-button-prev {
    width: 15px; height: 15px;
    left: 0; top: 38px;
    transform: rotate(90deg);
}
.notice .swiper-button-next::after, .notice .swiper-button-prev::after {font-size: 10px; color: #fff;}

.util_time {
    flex-shrink: 0;
    height: 34px;
    padding: 0 20px 0 45px;
    border-radius: 20px;
    font-weight: 500; font-size: 16px; line-height: 32px;
    background: #303031 url(../images/ico_main_clock.png) no-repeat left 20px center / 16px;
}


/* sec1_전국현황 */
.location {
    width: 100%;
    padding: 0 90px;
}
.location_title_btn {margin-bottom: 8px;}
.location_title_btn a {
    display: inline-block;
    width: 40px; height: 40px;
    margin-right: 10px;
    border-radius: 50%;
    background: rgba(213,223,227,0.2) url(../images/ico_main_location.png) no-repeat center / 18px;
}
.location_title_btn a.find {background-image: url(../images/ico_main_search.png);}
.location_title p {
    display: inline-block;
    border-bottom: 1px solid rgba(213,223,227,0.5);
    font: bold 27px/42px 'Environment'; letter-spacing: 0;
}


.location_data {
    display: flex; align-items: flex-end; justify-content: space-between;
    width: 100%;
    margin-top: -50px;
    margin-bottom: 20px;
}
.location_data_chart {position: relative;}
.data_chart_title > span {
    display: block;
    width: 140px; height: 42px;
    margin-bottom: 20px;
    border-radius: 16px;
    font: 15px/32px 'Environment'; text-align: center; letter-spacing: 0;
    background: url(../images/ico_main_balloon.png) no-repeat center / contain;
    position: relative;
}

.data_chart_title > strong {font: bold 28px/35px 'Environment'; letter-spacing: 0;}
.data_chart_title > strong > span {
    display: block;
    padding-left: 5px;
    font: 14px/15px 'Noto Sans Kr';
    opacity: 0.6;
}
.location_data_chart > span {
    display: block;
    margin-bottom: 10px;
    font-size: 12px; line-height: 20px; text-align: right;
    opacity: 0.6;
}

.board_box {
    overflow: hidden;
    width: 380px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    font-weight: normal; font-family: 'Environment'; letter-spacing: 0;
    background-color: rgba(0,0,0,0.1);
}
.board_box table {width: 100%;}
.board_box tr + tr {border-top: 1px solid rgba(255,255,255,0.3);}
.board_box th {
    padding: 10px 15px;
    border-right: 1px solid rgba(255,255,255,0.3);
    font-size: 12px; line-height: 16px; text-align: center; 
    opacity: 0.7;
}
.board_box td {
    padding: 0 15px;
    font-size: 15px;
}
.board_box td a.pop_open {
    display: inline-block;
    width: 60px; height: 25px;
    margin-left: 15px;
    border-radius: 8px;
    font: 12px/24px 'Noto Sans Kr'; text-align: center;
    background-color: #066de0;
}


/* sec1_상세보기팝업 */
.location_pop {
    overflow: hidden;
    display: none;
    border-radius: 10px;
    color: #111;
    background-color: #fff;
    position: absolute; left: 0; top: 320px; z-index: 100;
}
.pop_header {
    display: flex; align-items: center; justify-content: space-between;
    width: 380px;
    padding: 0 20px;
    border-bottom: 1px solid #dee6ea;
    background-color: #eff5f8;
}
.pop_header p {font-weight: 600; line-height: 40px;}
.pop_close {
    width: 15px; height: 15px;
    position: relative;
}
.pop_close::before, .pop_close::after {content: "";
    width: 14px; height: 2px;
    background-color: #066de0;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.pop_close::after {transform: translate(-50%, -50%) rotate(-45deg);}
.pop_content {position: relative;}
.pop_content::before {content: "";
    width: 1px; height: 100%;
    background-color: #dee6ea;
    position: absolute; left: 50%; top: 0;
}
.pop_table {
    display: flex; flex-wrap: wrap;
    padding: 10px 0 15px 0;
}
.pop_table li {
    width: 50%;
    padding: 0 15px;
}
.pop_table li p {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13.5px; line-height: 27px; color: #333;
}
.pop_table li p span {font-weight: 600; color: #111;}
/* // sec1_상세보기팝업 */


.location_data_map {
    margin-left: 120px;
    position: relative;
}
.location_data_map a {
    display: block;
    width: 40px; height: 40px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    background: url(../images/ico_main_arrow.png) no-repeat center / 11px 8px;
    position: absolute; left: -20px; top: 8px;
}
.location_data_image {width: 475px; height: 420px;}
.location_data_num {margin-bottom: -10px;}
.location_data_num li + li {margin-top: 30px;}
.location_data_num li p {
    display: flex; flex-direction: column;
    font: 14px/25px 'Environment'; text-align: left;
    background: url(../images/ico_main_up.png) no-repeat right 7px bottom 6px / 9px;
}
.location_data_num li:nth-child(2) p {background-image: url(../images/ico_main_down.png);}
.location_data_num li p span{
    order: -1;
    width: 100px; height: 100px;
    margin-bottom: 10px;
    border-radius: 50%;
    font-weight: bold; font-size: 24px; line-height: 100px; text-align: center;
    background-color: rgba(6,109,224, 0.7);
}
.location_data_num li:nth-child(2) p span {background-color: rgba(51,171,107,0.7);}
.location_data_num li > span {
    display: block;
    font: 12px/1 'Noto Sans Kr'; text-align: center;
    opacity: 0.6;
}


/* sec1_statistics */
.stats_data {
    display: flex;
    width: 100%;
}
.stats_data li {
    display: flex; flex-direction: column; justify-content: center;
    width: 20%; height: 115px;
    padding: 0 30px;
    border: 1px solid rgba(213,223,227,0.3);
    border-radius: 10px;
    background: rgba(255,255,255,0.1) url(../images/ico_main01.png) no-repeat right 30px center / 58px;
}
.stats_data li:nth-child(2) {background-image: url(../images/ico_main02.png);}
.stats_data li:nth-child(3) {background-image: url(../images/ico_main03.png);}
.stats_data li:nth-child(4) {background-image: url(../images/ico_main04.png);}
.stats_data li:nth-child(5) {background-image: url(../images/ico_main05.png);}
.stats_data li + li {margin-left: 20px;}
.stats_data li p {
    margin-bottom: 10px;
    font: bold 24px/30px 'Environment'; letter-spacing: 0;
}
.stats_data li p > span {
    display: block;
    margin-bottom: 2px;
    font-weight: normal; font-size: 15px; line-height: 25px;
}
.stats_data li > span {font-size: 12px; line-height: 20px;}


.sub_title {font: 18px/25px 'Environment'; text-align: center; letter-spacing: 0;}
.sub_title span {
    display: block;
    font: 400 12px/1 'Noto Sans KR';
}

/* sec1_GIS */
.gis {
    border-radius: 15px;
    background-color: rgba(0,0,0,0.4);
    position: absolute; right: 30px; top: 170px;
}
.gis::before {content: "";
    width: 25px; height: 25px;
    border-radius: 50%;
    background: #50e48e url(../images/ico_main_gis.png) no-repeat center / 14px;
    position: absolute; right: 20px; bottom: 15px;
}
.gis a {
    display: block;
    width: 100%;
    padding: 15px 20px;
}
.gis p {font-size: 13px; line-height: 20px;}
.gis strong {
    display: block;
    margin-bottom: 5px;
    font-weight: 500; font-size: 15px; line-height: 30px; color: #50e48e;
}



/* sec2 */

/* 하수도 검색 */
.sec2 fieldset {position: relative;}
.sec2 fieldset input {
    width: 660px; height: 65px;
    padding: 0 75px 0 35px;
    border: 1px solid #003a67;
    border-radius: 33px;
    font-size: 16px;
}
.sec2 fieldset input::placeholder {font-weight: 400; font-size: 16px; color: #003a67;}
.sec2 fieldset button {
    width: 20px; height: 20px;
    background: #fff url(../images/ico_find_search.png) no-repeat center / contain;
    position: absolute; right: 20px; top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}


/* quick_menu */
.quick_menu {display: flex; align-items: center; justify-content: center;}
.quick_menu li {
    width: 215px; height: 195px;
    border-radius: 20px;
    background-color: #fff;
    transition: box-shadow 0.3s;
}
.quick_menu li + li {margin-left: 20px;}
.quick_menu li a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.quick_menu li a img {
    width: 63px; height: 58px;
    margin-bottom: 25px;
}
.quick_menu li a span {font-weight: 500; font-size: 16px; line-height: 25px;}

.quick_menu li:hover {box-shadow: 6px 10px 15px rgba(0,0,0,0.08);}


/* 신고하기 */
.report_box {
    display: flex; align-items: center; justify-content: space-around;
    width: 1200px;
}
.report {
    display: flex; justify-content: space-between;
    width: 510px; height: 250px;
    padding: 20px 0;
    /* background: url(../images/find_info.png) no-repeat right 39px bottom 40px / 174px 180px; */
    position: relative;
}
.report::before {content: "";
    width: 150px; height: 1px;
    background-color: #003a67;
    position: absolute; right: 45px; bottom: 40px;
}
.report > div {display: flex; flex-direction: column; justify-content: space-between;}
.report_content {
    padding: 0 3px;
}
.report_title {
    margin-bottom: 15px;
    line-height: 20px;
}
.report_title span {
    display: block; 
    margin: 3px 0 0 -3px;
    font-weight: 700; font-size: 24px; line-height: 35px; color: #003a67;
}
.report_desc {font-size: 16px; line-height: 24px;}
.report_btn {
    width: fit-content; height: 42px;
    padding: 0 30px;
    border-radius: 21px;
    font-weight: 500; line-height: 42px; text-align: center; color: #fff;
    background-color: #003a67;
}
.report_image {
    width: 174px; height: 180px;
    margin: 10px 20px 0 0;
    object-fit: contain;
}


/* 하수도 소개 */
.intro {
    width: 510px; height: 250px;
    margin: 0;
}
.intro .swiper-button-next, .intro .swiper-button-prev {
    width: 42px; height: 42px;
    border: 1px solid #3aaa61;
    border-radius: 50%;
    background-color: #fff;
    top: auto; bottom: 20px;
}
.intro .swiper-button-next {right: auto; left: 190px;}
.intro .swiper-button-prev {left: 140px;}
.intro .swiper-button-next::after, .intro .swiper-button-prev::after {font-size: 15px; color: #3aaa61;}

.intro .report::before {background-color: #3aaa61;}
.intro .report_title span {color: #3aaa61;}
.intro .report_btn {background-color: #3aaa61;}
.intro .report_image {
    width: 139px; height: 156px;
    margin: 20px 50px 0 0;
    object-fit: contain;
}



/* sec3 */

.sec3 .bg {
    overflow: hidden;
    width: 100%; height: 100%; min-height: 1040px;
    background-color: #0c223d;
    position: absolute; left: 0; top: 0; z-index: -1;
}
.sec3 .bg_video {
    width: 100%; height: 110%;
    object-fit: cover;
    opacity: 0.2;
}

.sec3 .sec_box {
    width: 100%;
    position: relative;
}
.sec3 .sec_title p {color: #fff;}
.sec3 .sec_title .btn_more {
    padding-right: 20px;
    line-height: 20px; color: #fff;
    position: absolute; right: 230px; top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
}
.sec3 .sec_title .btn_more::before, .sec3 .sec_title .btn_more::after {content: "";
    width: 8px; height: 2px;
    background-color: #fff;
    position: absolute; right: 0px; top: 7px;
    transform: rotate(45deg);
}
.sec3 .sec_title .btn_more::after {
    top: 13px;
    transform: rotate(-45deg);
}


/* data_slide */
.data {width: 920px;}
.data_slide {
    width: 215px; height: 315px;
    border-radius: 10px;
    background-color: #fff;
}
.data_box {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    height: 100%;
    padding: 20px 20px 30px 20px;
}
.data_box img {
    overflow: hidden;
    width: 175px; height: 105px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
}
.data_box p {font-weight: 700; font-size: 20px; line-height: 27px; color: #3a4658; text-align: center;}
.data_box p.desc {font-weight: 400; font-size: 14px; line-height: 22px; text-align: center; color: #616161;}
.data_box > span {
    width: 15px; height: 15px;
    text-indent: -9999px;
    position: relative;
}
.data_box > span::before, .data_box > span::after {content: "";
    width: 2px; height: 12px;
    background-color: #9c9c9c;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.data_box > span::after {transform: translate(-50%, -50%) rotate(90deg);}

.sec3 .swiper-button-next, .sec3 .swiper-button-prev {
    width: 44px; height: 44px;
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 50%;
    top: 240px;
}
.sec3 .swiper-button-next {right: 130px;}
.sec3 .swiper-button-prev {left: 130px;}
.sec3 .swiper-button-next::after, .sec3 .swiper-button-prev::after {font-size: 15px; color: #fff;}


/* news_slide */
.news_box {
    display: flex; flex-direction: column; align-items: center;
    width: 100%;
    color: #fff;
}
.news_title {
    margin-bottom: 25px;
    font-weight: 700; font-size: 24px; line-height: 30px; text-align: center;
}
.news {
    width: 920px;
    padding-bottom: 20px;
}
.news_slide {display: flex; flex-direction: column; align-items: center;}

.news_content {
    width: 280px;
    border-top: 1px solid rgba(255,255,255,0.3);
}

.news_content a {
    display: block; 
    width: 100%;
    padding: 30px 0;
}

.news_content a p {
    margin-bottom: 10px;
    font-weight: 500; font-size: 16px; line-height: 26px;
}
.news_content a p.desc {
    margin-bottom: 20px;
    font-weight: 300; font-size: 13px; line-height: 24px; 
    opacity: 0.7;
}
.news_content a span {
    display: block;
    width: 28px; height: 28px;
    margin: 0 auto;
    border: 1px solid #fff;
    border-radius: 10px;
    text-indent: -9999px;
    position: relative;
    opacity: 0.4;
}
.news_content a span::before, .news_content a span::after {content: "";
    width: 2px; height: 8px;
    background-color: #fff;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.news_content a span::after {transform: translate(-50%, -50%) rotate(90deg);}

.news .swiper-button-next, .news .swiper-button-prev {
    width: 20px; height: 20px;
    border: none;
}
.news .swiper-button-next {right: -5px;}
.news .swiper-button-prev {left: auto; right: 65px;}
.news .swiper-button-next::after, .news .swiper-button-prev::after {font-size: 10px;}

.news .swiper-pagination {
    width: 40px;
    font: 15px/20px 'Environment'; color: #536c80;
    left: auto; right: 20px; bottom: 0;
}
.news .swiper-pagination-current {color: #fff;}
.news .swiper-scrollbar {
    width: calc(100% - 100px); height: 1px;
    background-color: rgba(255,255,255,0.3);
    bottom: 10px;
}
.news .swiper-scrollbar-drag {
    height: 2px;
    background-color: #fff;
}



/* sec4 */

.sec4 .sec_title {margin-bottom: 40px;}

.promotion {display: flex;}
.tab_menu {display: none;}
.promotion_box {
    overflow: hidden;
    width: 495px;
    border-radius: 30px 10px 10px 10px;
    background-color: #fff;
}
.promotion_info {margin-right: 50px;}
.promotion_typo {
    padding: 45px;
    position: relative;
}
.promotion_title {font: bold 32px/42px 'Environment'; color: #222; letter-spacing: -0.5px;}
.promotion_title span {
    display: block;
    margin-bottom: 20px;
    font: 400 15px/20px 'Noto Sans Kr';
}
.promotion_typo a {
    width: 20px; height: 20px;
    position: absolute; right: 40px; top: 40px;
}
.promotion_typo a::before, .promotion_typo a::after {content: "";
    width: 2px; height: 12px;
    background-color: #111;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.promotion_typo a::after {transform: translate(-50%, -50%) rotate(90deg);}


/* info_slide */
.info {padding-top: 90px;}
.info_slide a {
    display: block;
    width: 100%; height: 310px;
    position: relative;
}
.info_slide a::before {content: "";
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: absolute; left: 0; top: 0;
}
.info_slide a img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.info_slide a p {
    font-weight: 700; font-size: 21px; line-height: 25px; text-align: center; color: #fff;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.info_slide a p span {
    display: block;
    font-weight: 400; font-size: 15px;
}


/* video_slide */
.video {padding-top: 90px;}
.video_slide a {
    display: block;
    width: 100%; height: 310px;
    position: relative;
}
.video_slide a::before {content: "";
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.3);
    position: absolute; left: 0; top: 0;
}
.video_slide a img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.video_slide a::after {content: "";
    width: 61px; height: 61px;
    background-image: url(../images/ico_data_video.png);
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}


.sec4 .swiper-button-next, .sec4 .swiper-button-prev {
    width: 32px; height: 32px;
    border: 1px solid #888;
    border-radius: 50%;
    top: 35px;
}
.sec4 .swiper-button-next {right: auto; left: 90px;}
.sec4 .swiper-button-prev {left: 50px;}
.sec4 .swiper-button-next::after, .sec4 .swiper-button-prev::after {font-size: 12px; color: #555;}
.sec4 .swiper-pagination {
    width: 40px;
    font: bold 15px/20px 'Environment'; color: #bbb;
    left: auto; right: 45px; top: 25px;
}
.sec4 .swiper-pagination-current {color: #111;}

/* MAIN - END */





/* FOOTER - START */

#footer {
    width: 100%; min-width: 1400px; height: 280px !important;
    border-top: 1px solid #e5e5e5;
    background-color: #fff;
    position: relative;
}
#footer::before {content: "";
    width: 100%; height: 1px;
    background-color: #e5e5e5;
    position: absolute; left: 0; top: 100px;
}
#footer .fp-tableCell {min-width: 1400px;}

.footer_inner {
    width: 100%; min-width: 1400px;
    padding: 0 8px;
}

.footer_top .footer_inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 8px;
    position: relative;
}
.footer_menu {display: flex;}
.footer_menu li + li {margin-left: 40px;}
.footer_menu li a {font-weight: 500; font-size: 15px; line-height: 25px; color: #333;}
.footer_menu li:first-child a {color: #e53939;}

.banner {
    width: 655px;
    margin: 0;
    margin-right: 90px;
    position: relative;
}
.banner .banner_slide {
    display: flex; align-items: center; justify-content: center;
    width: 205px !important; height: 60px;
    border: 1px solid #d5d5d5;
    border-radius: 10px;
}
.banner .banner_slide a {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.banner .banner_slide img {width: 193px;}
#footer .swiper-button-next, #footer .swiper-button-prev {
    width: 22px; height: 22px;
    border: 1px solid #ccc;
    border-radius: 10px;
    border-radius: 50%;
    top: 60%;
}
#footer .swiper-button-next {right: 20px;}
#footer .swiper-button-prev {left: auto; right: 48px;}
#footer .swiper-button-next::after, #footer .swiper-button-prev::after {font-size: 10px; color: #aaa;}

.footer_bottom .footer_inner {padding-top: 30px;}
.footer_bottom address {
    display: inline-block;
    margin-right: 25px;
    font-size: 14px; line-height: 25px; color: #333;
}
.footer_bottom p {
    display: inline-block;
    margin-right: 25px;
    font-size: 14px; line-height: 25px; color: #333;
}

.footer_bottom p.copy {
    display: block;
    margin-left: 0;
}
.footer_bottom p span {
    display: inline-block;
    margin-right: 5px;
    font-weight: 700;
}
.footer_bottom p span.drop {font-weight: 400;}

/* FOOTER - END */





.btn_top {
    width: 50px; height: 50px;
    border-radius: 50%;
    text-indent: -9999px;
    background-color: #003a67;
    position: fixed; right: 25px; bottom: 25px; z-index: 99;
}
.btn_top::before {content: "";
    width: 10px; height: 2px;
    border-radius: 5px;
    background-color: #fff;
    position: absolute; right: 16.5px; top: 23px;
    transform: rotate(45deg);
}
.btn_top::after {content: "";
    width: 10px; height: 2px;
    border-radius: 5px;
    background-color: #fff;
    position: absolute; left: 16.5px; top: 23px;
    transform: rotate(-45deg);
}









.fp-warning, .fp-watermark a {text-indent: -9999px;}
#fp-nav ul li:last-child {display: none;}

#fp-nav ul li,
.fp-slidesNav ul li {width: 8px;}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
    width: 8px; height: 8px;
    margin: 0;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    width: 8px; height: 8px;
    margin: 0;
    background-color: #fff;
    opacity: 0.5;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
    width: 8px; height: 8px;
    margin: 0;
    opacity: 1;
}

#fp-nav ul li:hover a span {opacity: 1;}

#fp-nav ul li .fp-tooltip {
    font-family: 'Noto Sans KR', sans-serif; line-height: 25px;
    transform: translateX(5px);
}

#fp-nav ul li a span.dark {background-color: #0c223d;}
#fp-nav ul li .fp-tooltip.dark {color: #0c223d;}



::-webkit-scrollbar {
    display: none;
    width: 5px; height: 5px;
}
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: transparent;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}


.report:last-child span{
    color: #3aaa61;
}

.report:last-child div a {
    background-color: #3aaa61;
}

/*main tooltip*/
.align-right-top1 {
    position: absolute;
    right: 2px;
    top: 2px;
    font-size: 15px;
}
.align-right-top2 {
    position: absolute;
    right: 8px;
    top: 8px;
    font-size: 17px;
}
.pos-rele{
    position: relative;
}