/* 전체 설정 */
.btn_more {display: flex; justify-content: center; align-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #e8e8e8; font-size: 1.1rem; color: #211263;}
/* 전체 설정 : active */
.btn_more {transition: 0.15s ease-out;}
.btn_more:hover,
.btn_more:focus {transform: rotate(180deg);}

/* 레이아웃 */
.main_con1 {display: flex; justify-content: space-between; position: relative;}
.main_con1:before {content: ""; display: block; width: 100%; height: 7.2rem; background: #e4edf6; position: absolute; left: 0; top: 0; z-index: -1;}
.main_con2 {background: #f1f4f9; padding: 2rem 0; margin-top: 2rem;}
.main_con3 {margin-top: 2rem;}

/* 메인비주얼 */
.main_visual {width: calc(50% + 9.5rem); height: 21rem; border-radius: 0 0 3rem 0; background: url(/images/web/help/main/m_visual.png) center/cover no-repeat; padding-left: calc(50% - 35rem);}
.main_visual .slogan {padding-top: 4rem;}
.main_visual .slogan h2 {font-size: 2.4rem; color: #030d24; font-weight: 900;}
.main_visual .slogan .infoBox {display: flex; width: 35.5rem; max-width: calc(100% - 4rem); border-radius: 0.7rem; background: rgba(3,13,36,0.5); padding: 1.5rem 0; margin-top: 1.5rem;}
.main_visual .slogan .infoBox dl {width: 50%; padding: 0 1.5rem;}
.main_visual .slogan .infoBox dl + dl {border-left: 1px solid rgba(255,255,255,0.4);}
.main_visual .slogan .infoBox dl dt {font-size: 0.9rem; color: #ffef00; font-weight: 700;}
.main_visual .slogan .infoBox dl dd {display: flex; align-items: center; margin-top: 0.5rem;}
.main_visual .slogan .infoBox dl dd .img {display: flex; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #030d24; margin-right: 0.65rem;}
.main_visual .slogan .infoBox dl dd .txt {font-size: 1.2rem; color: #fff; font-weight: 700;}
.main_visual .slogan .infoBox dl dd .txt span {font-size: 0.9rem;}

/* 바로가기 */
.M_link01 {width: calc(50% - 9.5rem); padding: 1.75rem calc(50% - 35rem) 0 2.5rem;}
.M_link01 h2 {font-size: 1.2rem; color: #222; font-weight: 700;}
.M_link01 ul {display: flex; flex-wrap: wrap; margin: -0.5rem; margin-top: 0.5rem;}
.M_link01 ul li {width:50%; padding: 0.5rem ; }
.M_link01 ul li.w100{width: 100%;}
.M_link01 ul li.w100 a{background-color: #003b77;}
.M_link01 ul li.w100 a .txt {color: #fff;}
.M_link01 ul li.w100 a .txt p{font-weight: 400; font-size: 0.7rem; margin-top: 0.5rem;}
.M_link01 ul li a{position: relative; display: flex; align-items: center; height: 6.5rem; background: #f3f3f3; border-radius: 1.5rem; overflow: hidden; z-index: 1;}
.M_link01 ul li a:after {content: ""; width: 6rem; height: 6rem; border-radius: 50%; position: absolute; transform: translate(-100%, -100%); z-index: -1; opacity: 0.17;}
.M_link01 ul li:nth-child(1) a:after {background: #73c5fd;}
.M_link01 ul li:nth-child(2) a:after {background: #8a87ff;}
.M_link01 ul li:nth-child(3) a:after {background: #9ccd37;}
.M_link01 ul li:nth-child(4) a:after {background: #5791fb;}
.M_link01 ul li:nth-child(5) a:after {background: #5a95fb;}
.M_link01 ul li:nth-child(6) a:after {background: #68a8fc;}
.M_link01 ul li a .img {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 4.6rem; height: 4.6rem; margin: 0 0.5rem 0 0.7rem; position: relative; z-index: 1; overflow: hidden;}
.M_link01 ul li a .img img {max-width: 100%;}
.M_link01 ul li a .txt { max-height: 2.7rem; font-size: 0.85rem; color: #111; font-weight: 600; overflow-y: hidden;}
.M_link01 ul li a .txt span {position: relative;}
.M_link01 ul li a .txt span:before {content: ""; display: block; width: 0.25rem; height: 0.45rem; border-radius: 0.25rem; position: absolute; left: -0.45rem; top: 0; transform: rotate(36.6deg); opacity: 0;}
.M_link01 ul li:nth-child(1) a .txt span:before {background: #73c5fd;}
.M_link01 ul li:nth-child(2) a .txt span:before {background: #8a87ff;}
.M_link01 ul li:nth-child(3) a .txt span:before {background: #9ccd37;}
.M_link01 ul li:nth-child(4) a .txt span:before {background: #5791fb;}
.M_link01 ul li:nth-child(5) a .txt span:before {background: #5a95fb;}
.M_link01 ul li:nth-child(6) a .txt span:before {background: #68a8fc;}
/* 바로가기 : active */
.M_link01 ul li a::after {transition: 0.15s ease-out;}
.M_link01 ul li a .txt {transition: color 0.15s ease-out;}
.M_link01 ul li a .txt span:before {transition: 0.15s ease-out;}
.M_link01 ul li a:hover::after,
.M_link01 ul li a:focus::after {transform: translate(-1rem, -1rem);}
.M_link01 ul li:nth-child(1) a:hover .txt,
.M_link01 ul li:nth-child(1) a:focus .txt {font-weight: 700;}
.M_link01 ul li:nth-child(2) a:hover .txt,
.M_link01 ul li:nth-child(2) a:focus .txt {font-weight: 700;}
.M_link01 ul li:nth-child(3) a:hover .txt,
.M_link01 ul li:nth-child(3) a:focus .txt {font-weight: 700;}
.M_link01 ul li:nth-child(4) a:hover .txt,
.M_link01 ul li:nth-child(4) a:focus .txt {font-weight: 700;}
.M_link01 ul li:nth-child(5) a:hover .txt,
.M_link01 ul li:nth-child(5) a:focus .txt {font-weight: 700;}
.M_link01 ul li:nth-child(6) a:hover .txt,
.M_link01 ul li:nth-child(6) a:focus .txt {font-weight: 700;}
.M_link01 ul li a:hover .txt span:before,
.M_link01 ul li a:focus .txt span:before {opacity: 1;}

/* 운영현황 */
.condition_box .container {display: flex; justify-content: space-between; align-items: center;}
.condit_txt {width: 18rem; padding-bottom: 10.5rem; position: relative;}
.condit_txt:after {content: ""; display: block; width: 18.05rem; height: 10rem; background: url(/images/web/help/main/cdt_chr.png) left bottom/contain no-repeat; position: absolute; left: 0; bottom: 0;}
.condit_txt h2 {font-size: 1.4rem; color: #222; font-weight: 700; white-space: nowrap; overflow: hidden;}
.condit_txt p {margin-top: 0.75rem;}
.condit_txt .btn_more {background: #211263; color: #fff; margin-top: 0.75rem;}
.condit_map .map_img {width: 23.65rem; max-width: 100%; font-size: 0; line-height: 0; position: relative;}
.condit_map .map_img img {max-width: 100%; max-height: 100%;}
.condit_map .map_img ul {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.condit_map .map_img ul li.point1 {position: absolute;left: 26%;bottom: 80%;}
.condit_map .map_img ul li.point2 {position: absolute;left: 41%;bottom: 83%;}
.condit_map .map_img ul li.point3 {position: absolute;left: 53%;bottom: 83%;}
.condit_map .map_img ul li.point4 {position: absolute;left: 68%;bottom: 78%;}
.condit_map .map_img ul li.point5 {position: absolute;left: 81%;bottom: 77%;}
.condit_map .map_img ul li.point6 {position: absolute;left: 28%;bottom: 68%;}
.condit_map .map_img ul li.point7 {position: absolute;left: 23%;bottom: 55%;}
.condit_map .map_img ul li.point8 {position: absolute;left: 39%;bottom: 58%;}
.condit_map .map_img ul li.point9 {position: absolute;left: 56%;bottom: 59%;}
.condit_map .map_img ul li.point10 {position: absolute;left: 75%;bottom: 57%;}
.condit_map .map_img ul li.point11 {position: absolute;left: 89%;bottom: 59%;}
.condit_map .map_img ul li.point12 {position: absolute;left: 6%;bottom: 45%;}
.condit_map .map_img ul li.point13 {position: absolute;left: 23%;bottom: 42%;}
.condit_map .map_img ul li.point15 {position: absolute;left: 36%;bottom: 43%;}
.condit_map .map_img ul li.point16 {position: absolute;left: 50%;bottom: 39%;}
.condit_map .map_img ul li.point17 {position: absolute;left: 63%;bottom: 44%;}
.condit_map .map_img ul li.point18 {position: absolute;left: 89%;bottom: 41%;}
.condit_map .map_img ul li.point19 {position: absolute;left: 15%;bottom: 13%;}
.condit_map .map_img ul li.point20 {position: absolute;left: 32%;bottom: 19%;}
.condit_map .map_img ul li.point21 {position: absolute;left: 43%;bottom: 31%;}
.condit_map .map_img ul li.point22 {position: absolute;left: 70%;bottom: 26%;}
.condit_map .map_img ul li.point23 {position: absolute;left: 39%;bottom: 4%;}
.condit_map .map_img ul li a { font-size: 0.7rem; font-weight: 700; position: relative; z-index: 1;}
.condit_map .map_img ul li a::before{content: ''; position: absolute; left: -0.5rem; right: -0.5rem; top: -0.2rem; bottom: -0.2rem; background: #003b77; opacity: 0; z-index: -1; border-radius: 1rem; transition: 0.15s all;}
.condit_map .map_img ul li a:after {content: ""; display: block; width: 1.4rem; height: 1.6rem; position: absolute; left:50%; top: -1.7rem; transform: translateX(-50%);}
.condit_map .map_img ul li a:after {background: url(/images/web/help/main/cdt_mark_on.png) center/contain no-repeat; opacity: 0; visibility: hidden;}
.condit_search {width: 23rem; border-radius: 1.5rem; background: #376ca2; padding: 1.75rem 2rem 1.5rem;}
.condit_search .search_t {display: flex; flex-wrap: wrap; justify-content: space-between;}
.condit_search .search_t h3 {width: 100%; font-size: 1.2rem; color: #fff; font-weight: 700; margin-bottom: 1.25rem;}
.condit_search .search_t select {width: calc(50% - 0.1rem); height: 2rem; background: url(/images/web/help/main/sel_arr_off.png) #fff right 0.5rem center no-repeat; padding-left: 0.5rem; padding-right: calc(13px + 1rem); font-size: 0.75rem; color: #666; appearance: none;}
.condit_search .search_b {display: flex; margin-top: 0.5rem;}
.condit_search .search_b input {flex: 1; padding: 0 0.5rem; font-size: 0.75rem; color: #666;}
.condit_search .search_b button {width: 2rem; height: 2rem; background: #0c0430; font-size: 1rem; color: #fff;}
.condit_search .condit_list {margin-top: 0.75rem;}
.condit_search .condit_list .titWr {display: flex; justify-content: space-between;}
.condit_search .condit_list .titWr h3 {font-size: 0.9rem; color: #ffef00; font-weight: 700;}
.condit_search .condit_list .titWr p {font-size: 0.7rem; color: #c7c9cd; font-weight: 600;}
.condit_search .condit_list ul {display: flex; flex-wrap: wrap; margin-top: 0.75rem;}
.condit_search .condit_list ul li {display: flex; align-items: center; width: 50%; padding: 0.25rem 0;}
.condit_search .condit_list ul li:nth-child(2n) {justify-content: flex-end;}
.condit_search .condit_list ul li span {display: block; width: 4rem; padding-left: 0.55rem; font-size: 0.75rem; color: #fff; font-weight: 600; position: relative;}
.condit_search .condit_list ul li span:before {content: ""; display: block; width: 3px; height: 3px; background: #fff; position: absolute; left: 0; top: calc(50% - 1px);}
.condit_search .condit_list ul li em {display: flex; justify-content: center; align-items: center; width: 2.45rem; height: 1.25rem; border-radius: 0.25rem; background: #27324d; color: #fff; font-weight: 700;}
/* 이용현황 : active */
.condit_map .map_img ul li a:before,
.condit_map .map_img ul li a:after {transition: 0.15s ease-out;}
.condit_map .map_img ul li a:hover,
.condit_map .map_img ul li a:focus{color: #fff; font-weight: 600;}
.condit_map .map_img ul li a:hover:before,
.condit_map .map_img ul li a:focus:before {opacity: 1;}
.condit_map .map_img ul li a:hover:after,
.condit_map .map_img ul li a:focus:after {opacity: 1; visibility: visible;}
.condit_search .search_t select:focus {background-image: url(/images/web/help/main/sel_arr_on.png);}



/* media query mobile */
@media (max-width: 1440px) {

    /* 레이아웃 */
    .main_con1 {padding: 0 1rem;}

    /* 메인비주얼 */
    .main_visual {width: calc(70% - 1rem); padding: 0; margin-left: -1rem;}
    .main_visual .slogan {padding-left: 1rem;}

    /* 바로가기 */
    .M_link01 {width: 30%; padding: 1.75rem 0 0;}
    .M_link01 ul li a .img{width: 3rem; margin-left: 0 0.2rem;}

    /* 운영현황 */
    .condit_txt {width: calc(70% - 27.65rem);}
    .condit_search {width: 30%; padding: 1.75rem 1.5rem 1.5rem;}
    .condit_search .condit_list .titWr {flex-direction: column;}
    .condit_search .condit_list .titWr p {margin-top: 0.25rem;}

    /* 갤러리 */
    .manual .container .list_box ul .item {width: 18%;}
    .manual .container .list_box ul .item + .item {margin-left: 2.5%;}
}



@media (max-width: 1240px) {

    /* 레이아웃 */
    .main_con1 {flex-wrap: wrap;}
    .main_con1:before {display: none;}

    /* 메인비주얼 */
    .main_visual {width: calc(100% + 2rem); border-radius: 0 0 6vw 0; margin: 0 -1rem;}
    .main_visual .slogan {display: flex; flex-direction: column; align-items: center; padding: 4rem 1rem 0;}
    .main_visual .slogan .infoBox {max-width: 100%;}

    /* 바로가기 */
    .M_link01 {width: 100%;}
    .M_link01 ul {margin: 0.5rem -0.5rem 0;}

    /* 운영현황 */
    .condition_box .container {flex-wrap: wrap;}
    .condit_txt {width: 100%; padding-bottom: 0; margin-bottom: 1.5rem;}
    .condit_txt:after {display: none;}
    .condit_txt h2 {max-width: calc(100% - 2.75rem);}
    .condit_txt p {margin-top: 0.5rem;}
    .condit_txt .btn_more {margin-top: 0; position: absolute; right: 0; top: 0.1rem;}
    .condit_search {width: calc(100% - 24.65rem);}
    .condit_search .condit_list .titWr {flex-direction: row;}
    .condit_search .condit_list .titWr p {margin-top: 0;}
    .condit_search .condit_list ul li {width: 6.45rem; margin-right: calc((100% - 19.35rem) / 2);}
    .condit_search .condit_list ul li:nth-child(2n) {justify-content: unset;}
    .condit_search .condit_list ul li:nth-child(3n) {margin-right: 0;}

    /* 갤러리 */
    .manual .container .list_box ul .item {width: calc(92.5% / 4);}
    .manual .container .list_box ul .item:nth-child(n+5) {display: none;}
}



@media (max-width: 1024px) {

    /* 레이아웃 */
    .main_con2 {padding: 1.75rem 0; margin-top: 1.75rem;}

    /* 메인비주얼 */
    .main_visual {height: auto;}
    .main_visual .slogan {padding: 9vw 1rem;}
    .main_visual .slogan h2 {font-size: 2.1rem;}
    .main_visual .slogan .infoBox {padding: 1.25rem 0;}
    .main_visual .slogan .infoBox dl {padding: 0 1.25rem;}
    .main_visual .slogan .infoBox dl dd .txt {font-size: 1.1rem;}
    .main_visual .slogan .infoBox dl dd .txt span {font-weight: 600;}

    /* 바로가기 */
    .M_link01 {padding-top: 1.5rem;}
    .M_link01 h2 {font-size: 1.1rem;}

    /* 운영현황 */
    .condit_txt h2 {font-size: 1.25rem;}
    .condit_txt .btn_more {top: 0;}
    .condit_map .map_img ul li a {font-weight: 600;}
    .condit_search .search_t h3 {font-size: 1.1rem;}
    .condit_search .condit_list .titWr {flex-direction: column;}
    .condit_search .condit_list .titWr p {margin-top: 0.25rem;}
    .condit_search .condit_list ul li {justify-content: space-between !important; width: 100%; margin-right: 0;}

    /* 갤러리 */
    .manual .container .titWr h2 span {font-size: 1rem;}
}



@media (max-width: 768px) {

    /* 레이아웃 */
    .main_con1 {padding: 0 0.75rem;}
    .main_con2 {padding: 1.5rem 0; margin-top: 1.5rem;}
    .main_con3 {margin-top: 1.5rem;}

    /* 메인비주얼 */
    .main_visual {width: calc(100% + 1.5rem); margin: 0 -0.75rem;}
    .main_visual .slogan {padding: 6vw 0.75rem;}
    .main_visual .slogan h2 {font-size: 1.8rem;}
    .main_visual .slogan .infoBox {width: 24rem;}
    .main_visual .slogan .infoBox dl dt {text-align: center;}
    .main_visual .slogan .infoBox dl dd {flex-direction: column;}
    .main_visual .slogan .infoBox dl dd .img {margin-right: 0; margin-bottom: 0.25rem;}
    .main_visual .slogan .infoBox dl dd .txt {font-size: 1rem; text-align: center;}
    .main_visual .slogan .infoBox dl dd .txt span {font-size: 0.8rem;}

    /* 운영현황 */
    .condition_box .container {justify-content: center;}
    .condit_txt {margin-bottom: 1rem;}
    .condit_txt h2 {font-size: 1.1rem;}
    .condit_txt .btn_more {top: -0.1rem;}
    .condit_map {width: 100%;}
    .condit_map .map_img {margin: 0 auto;}
    .condit_map .map_img ul li a {font-size: 0.65rem;}
    .condit_search {width: 100%; border-radius: 0.5rem; padding: 1rem 0.75rem 0.75rem; margin-top: 1rem;}
    .condit_search .search_t h3 {font-size: 1rem; margin-bottom: 1rem;}
    .condit_search .search_b {margin-top: 0.2rem;}
    .condit_search .condit_list .titWr {flex-direction: row;}
    .condit_search .condit_list .titWr p {margin-top: 0;}
    .condit_search .condit_list ul {margin-top: 0.5rem;}
    .condit_search .condit_list ul li {justify-content: flex-start !important; width: 25%;}

    /* 갤러리 */
    .manual .container .list_box ul .item {width: calc(95% / 3);}
    .manual .container .list_box ul .item:nth-child(n+4) {display: none;}
}



@media (max-width: 580px) {

    /* 메인비주얼 */
    .main_visual .slogan h2 {font-size: 1.5rem;}
    .main_visual .slogan .infoBox {margin-top: 1rem;}

    /* 바로가기 */
    .M_link01 ul li a .txt {font-size: 0.8rem;}

    /* 운영현황 */
    .condit_search .condit_list ul li {width: calc(100% / 3);}
}



@media (max-width: 480px) {

    /* 메인비주얼 */
    .main_visual .slogan h2 {font-size: 1.4rem;}
    .main_visual .slogan .infoBox {flex-wrap: wrap; width: 15rem; padding: 0 1rem; margin-top: 0.75rem;}
    .main_visual .slogan .infoBox dl {width: 100%; padding: 1rem 0;}
    .main_visual .slogan .infoBox dl + dl {border-left: 0; border-top: 1px solid rgba(255,255,255,0.4);}
    .main_visual .slogan .infoBox dl dd {flex-direction: row; justify-content: center;}
    .main_visual .slogan .infoBox dl dd .img {width: 3rem; height: 3rem; margin-bottom: 0; margin-right: 0.5rem;}
    .main_visual .slogan .infoBox dl dd .img img {transform: scale(0.8);}
    .main_visual .slogan .infoBox dl dd .txt {font-weight: 600; text-align: left;}
    .main_visual .slogan .infoBox dl dd .txt span {font-weight: 400;}

    /* 운영현황 */
    .condit_search .condit_list ul li {width: 50%;}

    /* 갤러리 */
    .manual .container .titWr h2 {min-width: 8.5rem;}
    .manual .container .list_box ul .item {width: 48.75%;}
    .manual .container .list_box ul .item:nth-child(n+3) {display: none;}
}



@media (max-width: 380px) {

    /* 전체 설정 */
    .btn_more {width: 1.5rem; height: 1.5rem; font-size: 1rem;}

    /* 레이아웃 */
    .main_con2 {padding: 1.25rem 0; margin-top: 1.25rem;}
    .main_con3 {margin-top: 1.25rem;}

    /* 메인비주얼 */
    .main_visual .slogan h2 {font-size: 1.3rem; text-align: center;}
    .main_visual .slogan .infoBox {padding: 0 0.75rem;}
    .main_visual .slogan .infoBox dl {padding: 0.75rem 0;}
    .main_visual .slogan .infoBox dl dt {font-size: 0.85rem;}
    .main_visual .slogan .infoBox dl dd .img {width: 2.5rem; height: 2.5rem;}
    .main_visual .slogan .infoBox dl dd .img img {transform: scale(0.7);}
    .main_visual .slogan .infoBox dl dd .txt {font-size: 0.9rem;}
    .main_visual .slogan .infoBox dl dd .txt span {font-size: 0.75rem;}

    /* 바로가기 */
    .M_link01 {padding-top: 1.25rem;}
    .M_link01 h2 {font-size: 1rem;}
    .M_link01 ul {margin: 0.25rem -0.25rem 0;}
    .M_link01 ul li {padding: 0.5rem 0.25rem;}
    .M_link01 ul li a{flex-direction: column; text-align: center; height: auto; padding-bottom: 0.5rem;}
    .M_link01 ul li a .img {height: 4.1rem; border-radius: 0.9rem;}
    .M_link01 ul li a .txt {font-size: 0.7rem; max-height: none;}

    /* 운영현황 */
    .condit_txt h2 {font-size: 1rem;}
    .condit_txt p {font-size: 0.7rem;}
    .condit_txt .btn_more {top: -0.05rem;}
    .condit_search .condit_list .titWr {flex-direction: column;}
    .condit_search .condit_list .titWr p {margin-top: 0.25rem;}
    .condit_search .condit_list ul {justify-content: space-between; margin: 0.5rem -0.25rem 0;}
    .condit_search .condit_list ul li {width: 6rem; padding: 0.25rem;}
    .condit_search .condit_list ul li span {width: 3.5rem; padding-left: 0.45rem; font-size: 0.7rem;}
    .condit_search .condit_list ul li em {width: 2rem; font-size: 0.75rem; font-weight: 600;}

    /* 갤러리 */
    .manual .container .titWr h2 {min-width: 7.5rem;}
    .manual .container .titWr h2 span {font-size: 0.9rem;}
    .manual .container .list_box {margin-top: 0.75rem;}
    .manual .container .list_box ul {flex-wrap: wrap;}
    .manual .container .list_box ul .item {width: 100%;}
    .manual .container .list_box ul .item + .item {margin-left: 0; margin-top: 0.75rem;}
    .manual .container .list_box ul .item a .txt {font-size: 0.75rem; margin-top: 0.5rem;}
}