@charset "utf-8";

.main_content {margin-bottom: 5.15rem;}
.section .wrap {width: 140rem; margin: 0 auto; height: 100%;}


/*** sec01 ***/
.sec01 {height: 26rem; border-radius: 0 0 0 16rem;background: url(../images/content/sec01_bg.png) no-repeat bottom, url(../images/content/bg_logo.png) no-repeat left bottom, linear-gradient(92deg, #2DBEA1 0%, #4891CD 70%, #3D90D3 100%); position: relative; z-index: 0;}

/** lt **/
.sec01 .wrap {padding: 4rem 0 7rem; color: #fff; display: flex; justify-content: space-between; align-items: center; position: relative;}
.sec01 .wrap .lt h3 {font-size: 3.2rem; font-weight: 400; line-height: 4.4rem; position: relative;}
.sec01 .wrap .lt h3::after {content: ''; display: block; width: 12rem; height: 12rem; background: url(../images/icon/content/lt_bg.png)no-repeat center; position: absolute; right: -14rem; top: 50%; transform: translateY(-50%);}
.sec01 .wrap .lt h3 strong {font-weight: 700;}
.sec01 .wrap .lt h3 .mo_br {display: none;}

/** md **/
.sec01 .wrap .md {margin-top: 2.6rem;}
.sec01 .wrap .md .tit {font-size: 1.9rem; font-weight: 600; display: flex; align-items: center; margin-bottom: 2.4rem;}
.sec01 .wrap .md .tit::before {content: ''; display: inline-block; width: 2.4rem; height: 2.4rem; background: url(../images/icon/content/i_Favorites.svg) no-repeat center; margin-right: .4rem;}
.sec01 .wrap .md .main_svc {display: flex; gap: 4.2rem;}
.sec01 .wrap .md .main_svc li {font-size: 1.7rem; font-weight: 500; text-align: center;}
.sec01 .wrap .md .main_svc li a {display: block; width: 100%; height: 100%;}
.sec01 .wrap .md .main_svc li a::before {content: ''; display: block; width: 8rem; height: 8rem; border-radius: 1.6rem; margin-bottom: 1.2rem;}
.sec01 .wrap .md .main_svc li:nth-child(1) a::before {background: #fff url(../images/icon/content/i_f01.png) no-repeat center;}
.sec01 .wrap .md .main_svc li:nth-child(2) a::before {background: #fff url(../images/icon/content/i_f02.png) no-repeat center;}
.sec01 .wrap .md .main_svc li:nth-child(3) a::before {background: #fff url(../images/icon/content/i_f03.png) no-repeat center;}
.sec01 .wrap .md .main_svc li:nth-child(4) a::before {background: #fff url(../images/icon/content/i_f04.png) no-repeat center;}
.sec01 .wrap .md .main_svc li:nth-child(5) a::before {background: #fff url(../images/icon/content/i_f05.png) no-repeat center;}

/** rt **/
.sec01 .wrap .rt {display: flex; position: relative;}
.sec01 .wrap .rt::after {content: ''; display: block; width: 11.8rem; height: 9.9rem; background: url(../images/icon/content/rt_bg.png) no-repeat center; position: absolute; right: -3.7rem; bottom: -2.3rem;}
.sec01 .wrap .rt .quick {display: flex; align-items: center; gap: 3.8rem;}
.sec01 .wrap .rt .quick li {width: 32rem; height: 14rem; border: .1rem solid rgba(255,255,255,.7); border-radius: 4.2rem 1rem 1rem 1rem; letter-spacing: -0.0425rem; transition: 0.1s;}
.sec01 .wrap .rt .quick li:nth-child(1) {background: #409FC0;}
.sec01 .wrap .rt .quick li:nth-child(2) {background: #217ACC;}
.sec01 .wrap .rt .quick li a {display: block; padding: 2.5rem 2rem; width: 100%; height: 100%;}
.sec01 .wrap .rt .quick li a .tit {font-size: 1.9rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}
.sec01 .wrap .rt .quick li:nth-child(1) .tit {color: #FBF181;}
.sec01 .wrap .rt .quick li a .tit::after {content: ''; display: block; width: 2.4rem; height: 2.4rem; background: url(../images/icon/content/i_arrow_right.svg) no-repeat center;}
.sec01 .wrap .rt .quick li a .txt {font-size: 1.6rem; font-weight: 500; line-height: 2.6rem; color: rgba(255,255,255,.8);}






/*** sec02 ***/
.sec02 {margin-top: -3.6rem; position: relative;}

.sec02 .sch_wrap {width: 140rem; margin: 0 auto 2.4rem;}
.sec02 .sch_wrap .search_basic {background: #0B2843; padding: 1.2rem 2.5rem; width: 100%; border-radius: 1rem; margin-bottom: 0; border: 0; display: flex; flex-direction: row; align-items: center; gap: 2.4rem; justify-content: space-between; color: #fff;}
.sec02 .sch_wrap .search_basic .tit {display: flex; align-items: center; margin-right: 7.2rem; font-size: 2.2rem; font-weight: 500;}
.sec02 .sch_wrap .search_basic .tit::before {content: ''; display: inline-block; width: 2.4rem; height: 2.4rem; background: url(../images/icon/content/i_sch_tit.svg) no-repeat center; margin-right: .8rem;}
.sec02 .sch_wrap .search_basic .sch_row {gap: 3.2rem;}
.sec02 .sch_wrap .search_basic .sch_col {width: inherit; max-width: inherit;}
.sec02 .sch_wrap .search_basic .sch_col > label {font-size: 1.7rem; font-weight: 400;}
.sec02 .sch_wrap .search_basic input[type="text"], .sec02 .sch_wrap .search_basic select {min-width: 24.8rem; color: #757575;}
.sec02 .sch_wrap .search_basic select {background: #fff url(../images/common/i_arrow_down.svg) no-repeat right 1.2rem center / 2.1rem;}
.sec02 .sch_wrap .search_basic .btn_search {min-width: 14rem !important;}

.sec02 .wrap {border: .1rem solid #0B2843; border-radius: 1rem; display: flex; overflow: hidden; background: #fff; box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .14);}

/** lt **/
.sec02 .wrap .lt {width: 50rem; text-align: center; padding: 4.5rem 0 6rem; background: #F3F8FF;}
.sec02 .wrap .lt .tit_wrap {margin-bottom: 3.8rem;}
.sec02 .wrap .lt .tit_wrap h3 {font-size: 2.4rem; font-weight: 700; color: #000; margin-bottom: 1.6rem; line-height: 2.55rem;}
.sec02 .wrap .lt .tit_wrap h3 span {color: #1571DA;}
.sec02 .wrap .lt .tit_wrap p {font-size: 1.5rem; font-weight: 400; color: #424242; line-height: 1.9rem;}

/* map */
.sec02 .wrap .lt #ntnlMap {overflow: hidden;display: block;position: relative;width: 74%; margin: 0 auto; padding: 0 1rem 1rem 1rem;}
.sec02 .wrap .lt #ntnlMap svg {display: block;width: 100%;max-width: 100%;height: 100%;max-height: 100%; filter: drop-shadow(.611rem .408rem 0 rgba(26, 63, 105, 0.08));}
.sec02 .wrap .lt #ntnlMap path {cursor: pointer;}
.sec02 .wrap .lt #ntnlMap g > g {outline: none;}
.sec02 .wrap .lt #ntnlMap g > g:focus-visible path,
.sec02 .wrap .lt #ntnlMap g > g:hover path {fill: #BBCCDF;}
.sec02 .wrap .lt #ntnlMap g > g.on path {fill: #0B2843;}
.sec02 .wrap .lt #ntnlMap g > g text {fill: #0B2843;stroke: #0B2843;stroke-width: 0.05rem;font-size: 2.3rem;font-weight: 400;pointer-events: none;}
.sec02 .wrap .lt #ntnlMap g > g:hover text {fill: #fff; stroke: #fff;}
.sec02 .wrap .lt #ntnlMap g > g.on text {fill: #fff;stroke: #0B2843; font-weight: 700;}

/** rt **/
.sec02 .wrap .rt {display: flex; flex-direction: column; width: calc(100% - 50rem); padding: 2.8rem 3.2rem; justify-content: space-between;}
.sec02 .wrap .rt div .tit_wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem;}
.sec02 .wrap .rt div .tit_wrap h3 {font-size: 1.9rem; font-weight: 600; color: #0F0F0F; display: flex; align-items: center;}
.sec02 .wrap .rt div .tit_wrap h3::before {content: ''; display: inline-block; width: 2.4rem; height: 2.4rem; margin-right: .6rem;}
.sec02 .wrap .rt div:nth-child(1) .tit_wrap h3::before {background: url(../images/icon/content/i_t01.svg) no-repeat center;}
.sec02 .wrap .rt div:nth-child(2) .tit_wrap h3::before {background: url(../images/icon/content/i_t02.svg) no-repeat center;}
.sec02 .wrap .rt div .tit_wrap .navi .btn {width: 2.8rem; min-width: 2.8rem; height: 2.8rem; border-radius: 50%; border-color: #DBDBDB; background: url(../images/icon/content/i_btn_right.png) no-repeat center; transform: rotate(180deg);}
.sec02 .wrap .rt div .tit_wrap .navi .btn + .btn {margin-left: 1rem; transform: rotate(0);}
.sec02 .wrap .rt div .tit_wrap .navi .btn:focus {background-color: #dbdbdb;}
.sec02 .wrap .rt div .tit_wrap .btn_more {border: 0; font-size: 1.5rem; font-weight: 400; color: #424242; min-width: inherit; padding: 0; height: 2.8rem;}
.sec02 .wrap .rt div .tit_wrap .btn_more:focus {background-color: transparent;}
.sec02 .wrap .rt div .tit_wrap .btn_more::after {content: ''; display: inline-block; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: url(../images/icon/content/i_plus_bk.png) no-repeat center; border: .1rem solid #dbdbdb;}
.sec02 .wrap .rt div .tit_wrap .btn_more:focus::after {background-color: #dbdbdb;}
.sec02 .wrap .rt div .tit_wrap .btn_more:hover {background: inherit;}

.sec02 .wrap .rt .info_slide_wrap {display: flex; align-items: center; gap: 1.6rem;}
.sec02 .wrap .rt .info_slide_wrap .total {width: 20rem; background: #1571DA url(../images/content/total_bg.png) no-repeat bottom; background-size: 100%; border-radius: 1rem 4rem 1rem 1rem; color: #fff; padding: 2rem; height: 16rem; display: flex; flex-direction: column; gap: .8rem;}
.sec02 .wrap .rt .info_slide_wrap .total h4 {font-size: 1.9rem; font-weight: 500; line-height: 2.6rem;}
.sec02 .wrap .rt .info_slide_wrap .total strong {font-size: 2.8rem; font-weight: 700; line-height: 3.3rem;}

.sec02 .wrap .rt .info_slide_wrap .info_slide {width: calc(100% - 21.6rem);}
.sec02 .wrap .rt .info_slide_wrap .info_slide ul li {border: .1rem solid #CDDCEF; background: #EFF6FF; border-radius: 1rem 4rem 1rem 1rem; padding: 2rem; height: 16rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.sec02 .wrap .rt .info_slide_wrap .info_slide ul li h4 {font-size: 1.9rem; font-weight: 500; color: #0F0F0F; height: 3.2rem; line-height: 3.2rem; margin-bottom: 1.2rem;}
.sec02 .wrap .rt .info_slide_wrap .info_slide ul li .count {font-size: 2.8rem; font-weight: 700; color: #1571DA; line-height: 3.3rem; display: block; margin-bottom: 1.3rem;}
.sec02 .wrap .rt .info_slide_wrap .info_slide ul li p {font-size: 1.7rem; font-weight: 400; color: #424242;}
.sec02 .wrap .rt .info_slide_wrap .info_slide ul li p span {font-size: 1.7rem; font-weight: 600; margin-top: 1.3rem;}
.sec02 .wrap .rt .info_slide_wrap .info_slide ul li p span.up {color: #E40000;}
.sec02 .wrap .rt .info_slide_wrap .info_slide ul li p span.up::before {content: ''; width: 1.2rem; height: 1.2rem; display: inline-block; background: url(../images/icon/content/i_up.png) no-repeat center; margin-right: .2rem;}
.sec02 .wrap .rt .info_slide_wrap .info_slide ul li p span.down {color: #044AD5;}
.sec02 .wrap .rt .info_slide_wrap .info_slide ul li p span.down::before {content: ''; width: 1.2rem; height: 1.2rem; display: inline-block; background: url(../images/icon/content/i_down.png) no-repeat center; margin-right: .2rem;}

.sec02 .wrap .rt .chart_box .chart {max-width: 83.4rem;}
.sec02 .wrap .rt .chart_box .chart #info_chart {width: 83.4rem;}

.simplebar-track.simplebar-horizontal {height: .8rem !important;}
.simplebar-scrollbar.simplebar-visible:before {background: #d2d2d2; opacity: 1 !important;}



/*** login ***/
.main_content:has(.login_section) {margin-bottom: 0;}
.login_section {background: #f4f7f9;}
.login_section .wrap {width: calc(100% - 8.5rem); background: url(../images/common/login_bg_logo.png) no-repeat 45% 73%, linear-gradient(92deg, #15AB9F 0%, #4891CD 70%, #3D90D3 100%); padding: 13rem 15.5rem 13rem 26rem; border-radius: 0 0 21rem 0; display: flex; justify-content: space-between; align-items: center; margin: inherit;}
.login_section .wrap .lt {padding: 6.7rem 0; display: flex; flex-direction: column; gap: 21.5rem;}
.login_section .wrap .lt .top {color: #fff;}
.login_section .wrap .lt .top h2 {font-size: 4.8rem; font-weight: 700;}
.login_section .wrap .lt .top p {font-size: 2.4rem; font-weight: 400; margin-top: 2.2rem;}
.login_section .wrap .lt .top p span {color: #FBF181; font-weight: 700;}
.login_section .wrap .lt .btm p {font-size: 1.7rem; font-weight: 500; margin-bottom: 2.4rem; color: #fff; line-height: 1.5;}
.login_section .wrap .lt .btm .system {background: #04172C; border-radius: 5rem; color: #fff; font-size: 1.7rem; display: inline-flex; padding: 1.1rem 2.6rem;}
.login_section .wrap .lt .btm .system span {display: flex; align-items: center;}
.login_section .wrap .lt .btm .system span::before {content: ''; display: inline-block; width: 2rem; height: 2rem; background: url(../images/common/i_system.svg) no-repeat center; margin-right: .3rem;}
.login_section .wrap .lt .btm .system span::after {content: ''; display: inline-block; width: .1rem; height: 1.25rem; background: #fff; margin: 0 1.2rem;}
.login_section .wrap .lt .btm .system strong {font-weight: 500;}

.login_section .wrap .rt .login_wrap {background: #fff; width: 56rem; border-radius: 2rem; box-shadow: 0 0 1.4rem rgba(0, 0, 0, .15); padding: 8.4rem 6rem; height: 64rem; color: #000;}
.login_section .wrap .rt .login_box h3 {text-align: center; font-size: 3.6rem; margin-bottom: 4.5rem; line-height: 1.5;}
.login_section .wrap .rt .login_box .input_box ul {display: flex; flex-direction: column; gap: 2.4rem;}
.login_section .wrap .rt .login_box .input_box ul li label {font-size: 1.9rem; font-weight: 600; display: block; margin-bottom: 1.2rem; line-height: 1.527;}
.login_section .wrap .rt .login_box .input_box ul li input {width: 100%; height: 6.4rem; padding: 0 2.4rem;}
.login_section .wrap .rt .login_box .input_box ul li input::placeholder {padding-left: 3.4rem;}
.login_section .wrap .rt .login_box .input_box ul .ipt_id input::-webkit-input-placeholder {background: url(../images/common/i_placeholder_id.svg) no-repeat 0 50%;}
.login_section .wrap .rt .login_box .input_box ul .ipt_pw input::-webkit-input-placeholder {background: url(../images/common/i_placeholder_pw.svg) no-repeat 0 50%;}
.login_section .wrap .rt .login_box .chk {margin-top: 1.8rem;}
.login_section .wrap .rt .login_box .chk label {font-size: 1.7rem; color: #5C5C5C; align-items: center; gap: .8rem; line-height: 1.53;}
.login_section .wrap .rt .login_box .chk .cbx label::before {width: 1.6rem; height: 1.6rem; margin-top: 0;}
.login_section .wrap .rt .login_box .chk .cbx input:checked + label::before {width: 1.6rem; height: 1.6rem; background: #082D57; border-color: #082D57;}
.login_section .wrap .rt .login_box .btn_wrap {margin-top: 3.2rem;}
.login_section .wrap .rt .login_box .btn_wrap button {min-width: 100%; height: 6.4rem;}


/* hover */
@media (hover: hover) and (min-width: 1024px) {    
    .sec01 .wrap .rt .quick li:hover {border: .1rem solid #fff;}
    .sec01 .wrap .rt .quick li:nth-child(1):hover {background: #2f88a7;}
    .sec01 .wrap .rt .quick li:nth-child(2):hover {background: #196bb7;}
    .sec02 .sch_wrap .search_basic .btn_search:hover {background: #11897F;}
    .sec02 .wrap .rt div .tit_wrap .navi .btn:hover,
    .sec02 .wrap .rt div .tit_wrap .btn_more:hover::after {background-color: #f5f5f5;}
}

/* pc버전 스타일 */
@media screen and (max-width: 1440px) {
    .section .wrap {width: 100%;}

    /*** sec01 ***/
    .sec01 .wrap .rt::after {right: 0;}
    
    .sec01 {height: 100%; border-radius: 0 0 0 8rem; background: url(../images/content/sec01_bg.png) no-repeat bottom right, url(../images/content/bg_logo.png) no-repeat left -5rem top 10rem, linear-gradient(92deg, #2DBEA1 0%, #4891CD 70%, #3D90D3 100%); background-size: auto, 26rem ,cover;}
    .sec01::after {top: 0; left: 50%;}
    .sec01 .wrap {width: 100%; align-items: flex-start; padding: 5rem 2rem 10rem 2rem; gap: 4rem;}
    


    /*** sec02 ***/
    .sec02 {padding: 0 1.6rem;}
    .sec02 .sch_wrap .search_basic input[type="text"], .sec02 .sch_wrap .search_basic select {min-width: 17rem;}
    .sec02 .sch_wrap {width: 100%;}
    .sec02 .sch_wrap .search_basic .tit {margin-right: 0; font-size: 2.2rem; font-weight: 500;}
    .sec02 .sch_wrap .search_basic .btn_search {min-width: 9rem;}
    .sec02 .sch_wrap .search_basic .sch_col > label {min-width: 6rem;}
    
    /*** login ***/
    .login_section .wrap {padding: 6rem 6.5rem;width: 100%;}
}

@media screen and (max-width: 1320px) {
    
    /*** sec02 ***/
    .sec02 .sch_wrap .search_basic input[type="text"], .search_basic select {min-width: 15rem;}
}

@media screen and (max-width: 1280px) {
    
    /*** .sec01 ***/
    .sec01 .wrap {flex-direction: column;}
    /** rt **/
    .sec01 .wrap .rt {width: 100%;}
    .sec01 .wrap .rt .quick {width: 100%;}
    .sec01 .wrap .rt .quick li {width: 50%;}
    
    
    /*** login ***/
    #header .login_gnb .util .btn_link {display: block;}
    .login_section .wrap {width: 100%;} 
    .login_section .wrap .lt .top h2 {font-size: 4rem;}
    .login_section .wrap .lt .top p {font-size: 2.2rem;}

    .login_section .wrap .rt .login_wrap {width: 48rem; height: 57rem; padding: 6rem 4rem;}
    .login_section .wrap .rt .login_box h3 {margin-bottom: 2.4rem;}
}

@media screen and (max-width: 1024px) { 
    /* 태블릿 버전 스타일 (모바일~태블릿 공통 스타일) */ 
    html {font-size: 12px} /* 1rem = 12px */

    /*** sec01 ***/
    /** lt **/
    .sec01 .wrap .lt h3 {font-size: 2.4rem; line-height: 3.6rem;}
    .sec01 .wrap .lt h3 .mo_br {display: block;}
    

    /* md */
    .sec01 .wrap .md .tit {padding: 0 2.3rem;}
    .sec01 .wrap .md .main_svc {overflow: scroll; gap: 2.2rem; padding: 0 2.3rem;}

    /* rt */
    .sec01 .wrap .rt::after {right: -1.6rem; bottom: -3.6rem;}
    .sec01 .wrap .rt .quick {width: 100%; gap: 2.4rem;}
    .sec01 .wrap .rt .quick li {width: 100%;}
    



    /*** sec02 ***/
    .sec02 {margin-top: -5rem; padding: 0;}
    .sec02 .wrap {flex-direction: column; width: 100%; border: 0; box-shadow: inherit;}
    .sec02 .sch_wrap {width: 100%; padding: 0 2rem; margin-bottom: 3.8rem;}
    .sec02 .sch_wrap .search_basic {flex-direction: column; align-items: flex-start; padding: 2.4rem 2rem;}
    .sec02 .sch_wrap .search_basic .sch_row {width: 100%; gap: 1.6rem;}
    .sec02 .sch_wrap .search_basic .sch_col {flex-direction: column; align-items: flex-start; width: 100%;}
    .sec02 .sch_wrap .search_basic .btn_area {width: 100%;}
    .sec02 .sch_wrap .search_basic .btn_search {width: 100%; min-width: 100%;}
    
    /** lt **/
    .sec02 .wrap .lt {width: 100%;}
    .sec02 .wrap .lt .tit_wrap h3 {font-size: 2.2rem;}
    .sec02 .wrap .lt #ntnlMap {max-width: 80%; width: 40rem;}
    
    /** rt **/
    .sec02 .wrap .rt {width: 100%; padding: 3.2rem 2rem;}
    .sec02 .wrap .rt > div + div {margin-top: 3.2rem;}  
    
    /*** login ***/
    .login_section {background-color: #fff;}
    .login_section .wrap {background: none; padding: 0; width: 100%; flex-direction: column;}
    .login_section .wrap .lt {background: linear-gradient(92deg, #15AB9F 0%, #4891CD 70%, #3D90D3 100%); padding: 6.8rem 2rem; border-radius: 0 0 7.5rem 0; gap: 5.6rem; width: 100%;}
    .login_section .wrap .lt .top h2 {font-size: 2.8rem; text-align: center;}
    .login_section .wrap .lt .top p {font-size: 2.2rem; margin-top: 1.6rem; text-align: center;}
    .login_section .wrap .lt .top p br {display: none;}
    .login_section .wrap .lt .btm {margin: 0 auto;}
    .login_section .wrap .lt .btm p {text-align: center;}
    .login_section .wrap .lt .btm .system {padding: .9rem 1.6rem;}

    .login_section .wrap .rt {padding: 4.8rem 2rem; width: 100%;}
    .login_section .wrap .rt .login_wrap {width: 100%; height: 100%; box-shadow: none; border-radius: 0; padding: 0;}
    .login_section .wrap .rt .login_box h3 {margin-bottom: 1.6rem; font-size: 3.2rem;}
    
}

@media screen and (max-width: 840px) { 
    .sec01 .wrap .rt .quick {flex-direction: column;}
}

@media screen and (max-width: 768px) { 
    /* 모바일 버전 스타일 (태블릿 대비 모바일에서 달라지는 스타일) */
    html {font-size: 11px} /* 1rem = 11px */

    
}

@media screen and (max-width: 480px) { 
    /* 모바일 버전 스타일2 (모바일 작은 화면에서 달라지는 스타일) */
    html {font-size: 10px;} /* 1rem = 10px */

    /*** sec02 ***/
    /** rt **/
    .sec02 .wrap .rt .info_slide_wrap {flex-direction: column;}
    .sec02 .wrap .rt .info_slide_wrap .total {width: 100%; height: 10rem; background: #1571DA url(../images/content/mo_total_bg.png) no-repeat bottom 50% right 0%; background-size: 100%;}
    .sec02 .wrap .rt .info_slide_wrap .info_slide {width: 100%;}
        
    /*** login ***/
    #header .login_gnb {overflow: inherit;}
    #header .login_gnb .util {position: absolute; top: 6.6rem;}

    .login_section .wrap .lt {margin-top: 5.6rem;}
}