/* 타이틀(텍스트 타입) */
.tit1 { position: relative; margin-bottom:1rem; font-size: 1.4rem; font-weight: 700; color: #000; }
.tit2 { position: relative; font-size: 1.2rem; font-weight: 700; color: #0098D8; }
.tit3 { position: relative; font-size: 1.1rem; font-weight: 700; color: #111; }
/* 타이틀(공통) */
[class^="tit"] + [class^="tit"] { margin-top: 0.5rem; }
[class^="box_st"] [class^='tit']:nth-of-type(1) {margin-top: 0;}
.tab_st3 + h3[class^="tit"],
h3[class^="tit"]:first-of-type {margin-top: 0 !important;}
* + h3[class^='tit'] {margin-top:4.5rem !important;}

/* 텍스트 요소 : 폰트컬러 타입 */
.pc_navy {color: #002756 !important;}
.pc_blue {color: #0098D8 !important;}
.pc_red {color: #FF1B5C !important;}

/* 텍스트 요소 : 강조 타입 */
.Tline_b {text-decoration: underline !important;}
.f_weightB {font-weight: bold;}
.font_Fr {font-weight: 400 !important;}
.font_Fm {font-weight: 600 !important;}
.font_Fb {font-weight: 700 !important;}

/* 텍스트 요소 : 주의&경고&말풍선 타입 */
.bu_atte + .bu_atte { margin-top: 0.2rem; }
.bu_atte + .bu_wnrn { margin-top: 0.2rem; }
.bu_wnrn + .bu_wnrn { margin-top: 0.2rem; }
.bu_wnrn + .bu_wnrn { margin-top: 0.2rem; }

.bu_atte,
.bu_wnrn { position: relative; padding-left: 1.4rem; }
.bu_atte::before,
.bu_wnrn::before { position: absolute; top: 0; left: 0; font-family: 'Remixicon'; font-weight: 500; font-size: 1rem; }
.bu_atte::before { content: "\eca1"; color: #0098D8; }
.bu_wnrn::before { content: "\ee59"; color: #DB0D58; }
.bu_atte.font_Fb::before { content: "\eca0"; color: #0098D8; }
.bu_wnrn.font_Fb::before { content: "\ee58"; color: #DB0D58; }

/* 텍스트 요소 : 링크 타입 */
a.bu_link { position: relative; display: inline-block; word-break: break-all; font-weight: 600; padding: 0 0.2rem; background: #E9F4FF; color: #0098D8; }
a.bu_link::after { display: inline-block; padding-left: 0.3rem; font-family: 'Remixicon'; font-weight: 500; font-size: 0.75rem; color: #0098D8; content: "\f0f4"; }
a.bu_down { position: relative; display: inline-block; word-break: break-all; font-weight: 600; padding: 0 0.2rem; background: #E9F4FF; color: #0098D8; }
a.bu_down::after { display: inline-block; padding-left: 0.3rem; font-family: 'Remixicon'; font-weight: 500; font-size: 0.75rem; color: #0098D8; content: "\ec54"; }

/* 리스트 : 텍스트 타입 */
.list_st1 > li,
.bu_st1 { position: relative; padding-left: 0.75rem; font-size: 0.9rem; }
.list_st2 > li,
.bu_st2 { position: relative; padding-left: 0.85rem; font-size: 0.9rem; }
.list_st3 > li,
.bu_st3 { position: relative; padding-left: 0.7rem; color: #333; font-size: 0.85rem; }
.list_st4 > li,
.bu_st4 { position: relative; padding-left: 0.8rem; color: #333; font-size: 0.85rem; }
.list_st1 > li::before,
.bu_st1 { position: absolute; top: 0.5rem; left: 0; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: #0098D8; content: ""; }
.list_st2 > li::before,
.bu_st2 { position: absolute; top: 0.6rem; left: 0; width: 0.4rem; height: 3px; border-radius: 1rem; background: #9BBCCA; content: ""; }
.list_st3 > li::before,
.bu_st3 { position: absolute; top: 0.5rem; left: 0; width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #AFAFAF; content: ""; }
.list_st4 > li::before,
.bu_st4 { position: absolute; top: 0.55rem; left: 0; width: 7px; height: 2px; border-radius: 1rem; background: #AFAFAF; content: ""; }

[class^="list_st"] > li + li { margin-top: 0.4rem; }
[class^="list_st"] > li [class^="list_st"] { margin-top: 0.4rem; }

/* 리스트 : 순차적 리스트 타입 */
.list_ol1 > li { position: relative; padding-left: 1.8rem; color: #121212;}
.list_ol2 > li { position: relative; padding-left: 1.8rem; color: #333; }
.list_ol1 > li .num,
.list_ol2 > li .num { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 1.4rem; height: 1.4rem; border-radius: 5px; font-size: 0.7rem; font-weight: 700; }
.list_ol1 > li .num { color: #fff; background: #0098D8; }
.list_ol2 > li .num { color: #0098D8; background: #E9F4FF; }

[class^="list_ol"] > li + li { margin-top: 0.55rem; }
[class^="list_ol"] > li [class^="list_ol"] { margin-top: 0.5rem; }
[class^="list_ol"] > li [class^="list_st"] { margin-top: 0.5rem; }
[class^="list_ol"] + [class^="list_ol"] { margin-top: 0.5rem; }

/* 박스 : 박스 기본 타입 */
.box_icon { position: relative; border: 1px solid #ccc; border-radius: 1rem; padding: 2rem 2.5rem 2rem 10rem; }
.box_icon .ico { position: absolute; top: 2rem; left: 2.5rem; display: flex; justify-content: center; align-items: center; width: 6rem; height: 6rem; border-radius: 1.5rem; background: #E9F4FF; padding: 1rem; }
.box_icon .ico img { max-width: 100%; }
.box_icon .tit2 { margin: 0.5rem 0; }

.box_st1 { border: 1px solid #ccc; border-radius: 1rem; padding: 2.5rem; }
[class^="box_st"] .tit2 { margin-bottom: 0.6rem; }

[class^="box_st"] + [class^="box_st"] { margin-top: 1.25rem; }

.box_st_img { position: relative; border: 1px solid #ccc; border-radius: 1rem; padding: 1.8rem; }
.rsp_img { position: relative; text-align: center; line-height: 0; }
.rsp_img img { max-width: 100%; }
.rsp_img .btn-zoom { position: absolute; bottom: -0.5rem; right: -0.5rem; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #0098D8; color: #fff; }

[class^="tab_st"] + [class^="tab_st"] { margin-top: 1rem; }

/* 버튼 : 버튼들 감싸는 레이아웃 */
.btns { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.btns.ac { justify-content: center; }

.btn_navy.mini,
.btn_blue.mini { min-width: 5.5rem; font-size: 0.75rem; padding: 0.2rem 0.4rem; }

.btn_sky.icon,
.btn_navy.icon { padding: 0.5rem 2.5rem 0.5rem 1rem; }
.btn_sky.icon i,
.btn_navy.icon i { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); font-weight: 500; }

.btn_sky.btn_icon,
.btn_navy.btn_icon { min-width: auto !important; }

.btn_sky.bbs,
.btn_navy.bbs,
.btn_red.bbs,
.btn_grn.bbs,
.btn_blue.bbs,
.btn_bl.bbs,
.btn_blL.bbs,
.btn_gry.bbs
.btn_gr.bbs,
.btn_grL.bbs { background: #fff; }

/* 버튼 : 기본 */
.btn_navy,
.btn_blue { position: relative; min-width: 10rem; display: inline-flex; justify-content: center; align-items: center; text-align: center; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid; font-size: 0.9rem; font-weight: 600; transition: 0.3s; }
.btn_navy { color: #002756; border-color: #002756; background: #F0F7FF; }
.btn_navy:hover,
.btn_navy:focus { color: #fff; background: #002756 !important; }
.btn_blue { color: #0098D8; border-color: #0098D8; background: #E9F4FF; }
.btn_blue:hover,
.btn_blue:focus { color: #fff; background: #0098D8 !important; }

/* 테이블 : 테이블 기본 타입 */
div[class*='tbl_st'] { position: relative; margin-top: 0.25rem; width: 100%; background: #fff; overflow: hidden; word-break: break-all; }
div[class*='tbl_st'] > table { position: relative; margin-left: -1px; width: 100%; text-align: center; border-top: 2px solid #0098D8; -webkit-overflow-scrolling: touch; }
div[class*='tbl_st'] > table th { padding: 0.7rem 1rem; line-height: 1.4; vertical-align: middle; font-weight: 700; color: #000; background: #E9F4FF; border-bottom: 1px solid #BDD4EA; border-left: 1px solid #BDD4EA; }
div[class*='tbl_st'] > table td { padding: 0.7rem 1rem; line-height: 1.5; vertical-align: middle; color: #000; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; }
div[class*='tbl_st'] > table tbody th { background: #F5F5F5; border-color: #ddd; }

div[class*='tbl_st'] [class^="btn_"] { min-width: 5.5rem; font-size: 0.75rem; padding: 0.2rem 0.4rem; font-weight: 500; margin: 2px 0; background: #fff; }

div[class*='tbl_st'] input { height: 1.8rem; border: 1px solid #ccc; border-radius: 4px; padding: 0 0.7rem; font-size: 0.85rem; margin: 2px 0; }
div[class*='tbl_st'] select { height: 1.8rem; border: 1px solid #ccc; border-radius: 4px; padding: 0 1rem 0 0.7rem; background: url('/images/web/sangdam/con_com/select_bg.png') no-repeat right 6px center; appearance: none; font-size: 0.85rem; margin: 2px 0; }


.check_area { display: flex; gap: 0.5rem 1.2rem; }
.check_area input[type=radio] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.check_area input[type=radio] + label { position: relative; display: inline-flex; min-height: 1rem; padding-left: 1.2rem; font-size: 0.85rem; line-height: 1rem; color: #111; }
.check_area input[type=radio] + label:before { display: block; content: ""; transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1); position: absolute; top: 2px; left: 0; width: 0.8rem; height: 0.8rem; background: #fff; border: 1px solid #555; border-radius: 50%; }
.check_area input[type=radio] + label::after { display: block; content: ""; transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1); position: absolute; top: 6px; left: 4px; width: 0.4rem; height: 0.4rem; background: #0098D8; border-radius: 50%; opacity: 0; }
.check_area input[type=radio]:checked + label { font-weight: 600; }
.check_area input[type=radio]:checked + label:before { border-color: #0098D8; }
.check_area input[type=radio]:checked + label::after { opacity: 1; }

.check_area input[type=checkbox] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.check_area input[type=checkbox] + label { position: relative; display: inline-flex; min-height: 1rem; padding-left: 1.2rem; font-size: 0.85rem; line-height: 1rem; color: #111; }
.check_area input[type=checkbox] + label:before { display: block; content: ""; transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1); position: absolute; top: 2px; left: 0; width: 0.8rem; height: 0.8rem; background: #fff; border: 1px solid #555; border-radius: 2px; }
.check_area input[type=checkbox] + label::after { display: block; content: "\eb7b"; transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1); position: absolute; top: 0; left: 3px; color: #fff; font-size: 0.5rem; font-family: 'Remixicon'; opacity: 0; }
.check_area input[type=checkbox]:checked + label { font-weight: 600; }
.check_area input[type=checkbox]:checked + label:before { border-color: #0098D8; background: #0098D8; }
.check_area input[type=checkbox]:checked + label::after { opacity: 1; }

.Coming_soon { text-align: center; }
.Coming_soon img { max-width: 100%; }
.Coming_soon strong { display: block; margin: 1.7rem 0 0.6rem; font-size: 1.4rem; color: #0A2D59; }
.Coming_soon strong em { display: inline-block; box-shadow: inset 0 -0.7rem rgb(200, 222, 253, 0.4); font-weight: 600; padding: 0 0.2rem; }

.mgt50 { margin-top: 2.5rem; }

@media (max-width: 1024px) {
    .tbl_st.scroll_gr { width: 100%; overflow-x: auto; }
    .tbl_st.scroll_gr table { width: 100px; min-width: 1024px; }
    
    .tbl_scroll { position: relative; }
    .tbl_scroll::before { position: absolute; top: -0.7rem; right: 20%; display: flex; justify-content: center; align-items: center; width: 1.6rem; height: 1.2rem; border-radius: 5px; background: #0098D8; color: #fff; font-family: 'Remixicon'; font-weight: 500; content: "\f537"; z-index: 1; }
    
    /* 타이틀(공통) */
    * + h3[class^='tit'] {margin-top:4rem !important;}
}

@media (min-width: 1025px) {
    /* 탭 : 공통 */
    [class^="tab_st"] > .select { display: none; }
    [class^="tab_st"] ul { display: flex; }
    [class^="tab_st"] ul li { flex: 1; }
    [class^="tab_st"] ul li a { position: relative; display: block; text-align: center; transition: 0.3s; }

    .tab_st1 ul { gap: 0.5rem; }
    .tab_st1 ul li a { font-size: 1.1rem; border: 1px solid #ddd; background: #ddd; border-radius: 2rem; padding: 0.7rem; color: #666; }
    .tab_st1 ul li.on a { background: #0098D8; color: #fff; font-weight: 700; padding: 0.75rem 3rem 0.75rem 0.7rem; border-color: #0098D8; }
    .tab_st1 ul li.on a:after { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); font-family: 'Remixicon'; font-size: 1rem; font-weight: 500; color: #fff; content: "\eb7b"; }
    .tab_st1 ul li a:hover,
    .tab_st1 ul li a:focus { background: #E9F4FF; border-color: #014AA5; color: #0098D8; }
    
    .tab_st2 { border-bottom: 2px solid #ccc; }
    .tab_st2 ul li a { font-size: 1rem; padding: 0.7rem; color: #666; }
    .tab_st2 ul li.on a { color: #0098D8; font-weight: 700; padding: 0.75rem 3rem 0.75rem 0.7rem; }
    .tab_st2 ul li.on a:before { position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #0098D8; content: ""; }
    .tab_st2 ul li.on a:after { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); font-family: 'Remixicon'; font-size: 1rem; font-weight: 500; color: #0098D8; content: "\eb7b"; }
    .tab_st2 ul li a:hover,
    .tab_st2 ul li a:focus { color: #0098D8; font-weight: 700; }
}

@media (max-width: 1025px) {
    
    /* 탭 : 공통 */
    [class^="tab_st"] > .select { position: relative; display: block; font-weight: 700; transition: 0.3s; }
    [class^="tab_st"] > .select::before { position: absolute; top: 50%; transform: translateY(-50%); right: 0.8rem; font-family: 'Remixicon'; font-size: 1.1rem; font-weight: 500; content: "\ea78"; }
    [class^="tab_st"] > .select.on::before { content: "\ea4e"; }
    
    .tab_st1 > .select { background: #0098D8; color: #fff; border-radius: 2rem; padding: 0.75rem; }
    .tab_st1 ul { display: none; border: 1px solid #ccc; border-radius: 0.4rem; padding: 0.8rem; margin-top: 1rem; }
    .tab_st1 ul li { padding: 0.5rem; border-radius: 0.4rem; }
    .tab_st1 ul li a { position: relative; display: block; }
    .tab_st1 ul li.on { background: #F2F8FF; }
    .tab_st1 ul li.on a { border-color: #0098D8; color: #0098D8; font-weight: 600; }
    .tab_st1 ul li a:hover,
    .tab_st1 ul li a:focus { font-weight: 600; }
    
    .tab_st2 > .select { padding: 0.75rem; border: 1px solid #0098D8; background: #fff; border-radius: 2rem; color: #0098D8; }
    .tab_st2 ul { display: none; padding: 1rem; border: 1px solid #0098D8; background: #F7FBFE; border-radius: 0.4rem; margin-top: 1rem; }
    .tab_st2 ul li + li { margin-top: 0.5rem; }
    .tab_st2 ul li a { position: relative; display: block; padding-left: 0.7rem; }
    .tab_st2 ul li a::before { position: absolute; top: 0.55rem; left: 0; width: 5px; height: 5px; background: #555; border-radius: 50%; content: ""; }
    .tab_st2 ul li a::before { position: absolute; top: 0.55rem; left: 0; width: 5px; height: 5px; background: #555; border-radius: 50%; content: ""; }
    .tab_st2 ul li.on a { color: #0098D8 !important; font-weight: 600; padding-left: 1.25rem; }
    .tab_st2 ul li.on a::before { content: "\eb7b"; font-family: 'Remixicon'; top: 0; width: auto; height: auto; color: #0098D8 !important; background: none !important; }
    .tab_st2 ul li a:hover,
    .tab_st2 ul li a:focus { font-weight: 600; color: #111; }
    .tab_st2 ul li a:hover::before,
    .tab_st2 ul li a:focus::before { background: #111; }
}

@media (max-width:768px) {
    /* 타이틀(공통) */
    * + h3[class^='tit'] {margin-top:3.5rem !important;}
    
    /* 박스 : 박스 기본 타입 */
    .box_st1 { padding: 1.5rem; }

    .box_icon { padding: 1.5rem 1.5rem 1.5rem 7.5rem; }
    .box_icon .ico { top: 1.5rem; left: 2rem; width: 4.5rem; height: 4.5rem; border-radius: 1rem; }
    
    .box_st_img { padding: 1.5rem; }
    
    .Coming_soon { padding: 1.5rem; }
    .Coming_soon img { max-height: 200px; }
    .Coming_soon strong { font-size: 1.2rem; }
    
    .bbs_pagerA .bbs_pge_num { display: none; }
    .bbs_pagerA strong { display: flex !important; }
    .bbs_pagerA a.bbs_pge_num:last-of-type { display: flex !important; margin-left: 1rem; position: relative; }
    .bbs_pagerA a.bbs_pge_num:last-of-type::after { position: absolute; top: 50%; transform: translateY(-50%); left: -0.8rem; font-size: 0.8rem; color: #666; content: "/"; }
}

@media (max-width:580px) {
    
    /* 박스 : 박스 기본 타입 */
    .box_st1 { padding: 1.2rem; }
    
    .box_icon { padding: 1.2rem 1.2rem 1.2rem 7.5rem; }
    
    .box_st_img { padding: 1.2rem; }
    
    .Coming_soon { padding: 1.2rem; }
}

@media (max-width:480px) {
    .box_icon { padding: 1.2rem; }
    .box_icon .ico { display: none; }
    .box_icon .tit2 { margin: 0 0 0.5rem 0; }
}