/* 00.common */
@import url(/resources/css/table.css);
@import url(sub.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

html, body {margin: 0 auto; padding: 0; font-family: 'Noto Sans KR', sans-serif;}
a {text-decoration: none; color: inherit;}
ul, dl, ol {margin: 0;}
ul, dl, ol, li {list-style: none; padding: 0;}
caption, legend {display: none;}
button, input[type=submit], input[type=button] {cursor: pointer;}
input[type=text], input[type=number], input[type=submit], input[type=password] {-webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0;}
.wrap {margin: 0 auto; padding: 0 10px;}
.hidden {display: none;}
.dIb {display: inline-block;}
.dis_flex {display: flex; align-items: center;}
.v_helper {vertical-align: middle; height: 100%; display: inline-block; width: 0;}
.left {text-align: left!important;}
.center, .cen {text-align: center!important;}
.right {text-align: right!important;}

.tab_btn {cursor: pointer;}
.tab_con {display: none;}
.tab_con.on {display: block!important;}
.tab_more {float: right;}


/* 01.header */
#headerTop {text-align: center; position: relative; padding: 5px 0; z-index: 2; background: #fff;}
#headerTop a img {width: 45%; max-width: 250px;}
#menuBtn {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0; width: 8%; max-width: 50px; cursor: pointer;}
#menuBtn img {width: 100%;}

#headerMenu {position: fixed; z-index: 4; top: 0; left: 0; width: 100%; height: 100%; display: none;}
#headerMenu li a {display: block;}
#headerMenu .depth_1 {position: absolute; z-index: 3; background: #fff; width: 75%; max-width: 280px; height: 100%; top: 0; overflow-y: auto; left: -100%;}
#headerMenu .depth_1 h3 {margin: 0; color: #0054b4; font-size: 20px; padding: 10px; border-bottom: 2px solid #f6f6f6; cursor: pointer; position: relative;}
#headerMenu .depth_1 h3.has_depth::after {content: ""; position: absolute; top: 50%; right: 10px; display: inline-block; width: 16px; height: 16px; transform: translateY(-50%); background: url(/m/resources/img/ico_arrow_bottom.png) center no-repeat;}
#headerMenu .depth_1 h3.has_depth.on::after {transform: translateY(-50%) rotate(180deg);}
#headerMenu .depth_2 {background: #f6f6f6; font-size: 18px; color: #555555; padding: 5px 20px; display: none;}
#headerMenu .depth_2.on {display: block;}
#headerMenu .depth_2 li {margin: 10px 0;}
#headerMenu .depth_2 img {width: 100%; max-width: 147px;}

#headerMenu .close_menu {width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: -45%; z-index: 2; background: #fff; font-size: 0; cursor: pointer;}
#headerMenu .close_menu img {width: 50%; max-width: 23px;}

.modal_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0.25); display: none;}

#bottomMenu {position: fixed; bottom: 0; width: 100%; z-index: 1;}
#bottomMenu .btn_wrap {height: 50px; text-align: center; position: relative; z-index: 2; margin: 0;}
#bottomMenu .btn_wrap>div {width: 50%; height: 100%; display: inline-flex; justify-content: center; align-items: center; cursor: pointer;}
#bottomMenu .btn_wrap>div:nth-child(1) {background: #0054b4; color: #fff; font-size: 18px;}
#bottomMenu .btn_wrap>div:nth-child(1) img {margin-right: 10px; width: 25px;}
#bottomMenu .btn_wrap>div:nth-child(2) {background: #fee500; font-size: 0;}
#bottomMenu .btn_wrap>div:nth-child(2) img {width: 80%; max-width: 174px;}

#bottomMenu #qCounsel {background: #fff; padding: 20px 10px; position: absolute; z-index: 2; width: 100%; box-sizing: border-box; transform: translateY(-100%); display: none; border-top: 1px solid #ddd;}
#bottomMenu #qCounsel .input_wrap {width: 75%;}
#bottomMenu #qCounsel .input_wrap>div {margin-bottom: 10px;}
#bottomMenu #qCounsel .input_wrap input[type=text], #bottomMenu #qCounsel .input_wrap select {border: 1px solid #ccc; box-sizing: border-box; padding: 5px;}
#bottomMenu #qCounsel .input_wrap input[type=text] {width: calc(50% - 10px); margin-right: 5px;}
#bottomMenu #qCounsel .input_wrap select {width: calc(25% - 9px); margin-right: 5px;}
#bottomMenu #qCounsel button[type=submit] {width: 25%; border: 0; background: #00a0e9; color: #fff; height: 100px; border-radius: 5px; font-size: 15px; line-height: 1.5em;}
#bottomMenu #qCounsel .checkbox_wrap {font-size: 14px; display: flex; align-items: center;}
#bottomMenu #qCounsel .checkbox_wrap input[type=checkbox] {appearance: none; position: relative; width: 20px; height: 20px; cursor: pointer; outline: none!important; border: 2px solid #aaa; border-radius: 50%; margin-right: 5px;}
    #bottomMenu #qCounsel .checkbox_wrap input[type=checkbox]::before {content: "\2713"; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: scale(1) translate(-50%, -50%); line-height: 1; font-weight: bold; font-size: 12px; color: #aaa;}
    #bottomMenu #qCounsel .checkbox_wrap input[type=checkbox]:checked {border-color: #04a1e9;}
    #bottomMenu #qCounsel .checkbox_wrap input[type=checkbox]:checked::before {color: #04a1e9!important;}
#bottomMenu .close_menu {cursor: pointer; background: #ddd; position: absolute; top: 0; right: 0; transform: translateY(-100%); font-size: 0; padding: 5px;}


/* 02. contents */
#contents {position: relative;}
#subHeader h1 {background: url(/m/resources/img/subHeader_bg.png) center no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; width: 100vw; height: 35vw; max-height: 240px; color: #fff; margin: 0; font-size: 1.6em; position: relative; z-index: 2;}

#subNav #subTop {text-align: center; position: relative; z-index: 2;}
#subNav #subTop h2, #subNav #subTop li a {font-size: 20px; box-sizing: border-box; padding: 15px 0;}
#subNav #subTop h2 {cursor: pointer; background: #01479d; color: #fff; font-weight: 500; margin: 0;}
#subNav #subTop h2::after {content: ""; display: inline-block; width: 18px; height: 18px; background: url(/m/resources/img/ico_sub_menu_arrow.png) center no-repeat; margin: 0 -28px 0 10px; vertical-align: middle; filter: brightness(2); rotate: 90deg; transition: 0.5s rotate ease;}
#subNav #subTop h2.on::after {rotate: 270deg;}
#subNav #subTop ul {position: absolute; width: 100%; display: none;}
#subNav #subTop li {background: #eee; border-bottom: 1px solid #ddd;}
#subNav #subTop li a {color: #666; display: block;}
#subNav #subTop li a::after {content: ""; display: inline-block; width: 18px; height: 18px; background: url(/m/resources/img/ico_sub_menu_arrow.png) center no-repeat; margin: 0 -28px 0 10px; vertical-align: middle;}

#subNav .depth_3 {margin: 10px 10px 0; display: flex; flex-wrap: wrap;}
#subNav .depth_3 li {box-sizing: border-box; width: 50%; border: 1px solid #ddd; margin: 0 -1px -1px 0; background: #f7f7f7;}
#subNav .depth_3 li.on {background: #0088cd;}
#subNav .depth_3 li a {display: block; padding: 10px 15px; color: #666; font-weight: 500; background: url(/m/resources/img/circle_arrow.png) center right 10px no-repeat;}
#subNav .depth_3 li.on a {color: #fff; background-image: url(/m/resources/img/circle_arrow_on.png);}

#container {margin-top: 20px;}
.table_wrap {width: 100%; overflow-x: auto;}
.column {margin-bottom: 50px;}
.column p {text-indent: 0.5em; margin: 0;}
h2.title {font-size: 25px; font-weight: 600; color: #333;}
h2.title::before {content: ""; display: inline-block; width: 7px; height: 7px; border: 3px solid #0054b4; margin: 0 10px 3px 0;}
h3.title {padding-left: 20px; font-size: 21px; font-weight: 500; color: #333; margin: 10px 0;}
h3.title::before {content: ""; display: inline-block; width: 4px; height: 4px; border: 2px solid #0054b4; margin: 0 5px 3px -18px;}
.list_01 {padding-left: 1em;}
.list_01 li {padding-left: 10px;}
.list_01 li::before {content: "\00B7"; margin-right: 5px; color: #0054b4; margin-left: -10px;}
.box_point {border: 2px solid #176dcf; padding: 20px; margin: 20px auto;}
.color_point {color: #ff4e4e;}


/* 03.footer */
#footer {color: #fff; font-size: 14px; font-weight: 300; border-top: 1px solid #ddd; margin: 50px 0;}
#footerBanner .dis_flex {justify-content: center; padding: 10px 0;}
#footerBanner li {margin: 0 15px;}
#footerBanner img {width: 80%; margin: auto;}

#footerBottom {background: #616161; padding: 20px 0;}
#footerBottom img {margin-bottom: 20px;}
#footerBottom .dis_flex {flex-direction: column; align-items: center;}
#footerBottom ul {line-height: 1.7em; text-align: center;}