@charset "utf-8";

@import "/css/g_default.css";
@import "/css/over.css";

/* WDS 디자인섹션 css 가져오기 : 나중에 CDN에 옮기고 나면 지울것 */
@import "http://wdsc.shazam.co.kr/css/list_s.css";
@import "http://wdsc.shazam.co.kr/css/list_i.css";
@import "http://wdsc.shazam.co.kr/css/list_p.css";
@import "http://wdsc.shazam.co.kr/css/list_a.css";
@import "http://wdsc.shazam.co.kr/css/col_s.css";
@import "http://wdsc.shazam.co.kr/css/col_i.css";
@import "http://wdsc.shazam.co.kr/css/col_p.css";
@import "http://wdsc.shazam.co.kr/css/proc.css";
@import "http://wdsc.shazam.co.kr/css/infog.css";
@import "http://wdsc.shazam.co.kr/css/table.css";
@import "http://wdsc.shazam.co.kr/css/basic_con.css";
@import "http://wdsc.shazam.co.kr/css/ytb.css";
@import "http://wdsc.shazam.co.kr/css/map.css";
@import "http://wdsc.shazam.co.kr/css/organ.css";
@import "http://wdsc.shazam.co.kr/css/main_con.css";
@import "http://wdsc.shazam.co.kr/css/slide.css";
@import "http://wdsc.shazam.co.kr/css/latest.css";

:root{
    --mc : #103f97;
    --lc : #f3f5fa;
    --mcsh : rgba(16, 63, 151, .1);
    --mc02 : rgba(16, 63, 151, .2);
    --wc : #4c21ef;
    --swrap : 1360px;
    --top_h : 90px;
    --submenu_h : 72px;
}

/* 아이콘 컬러 커스터마이징 */
.img_icon img, .img_icon_list img { filter:hue-rotate(-10deg) saturate(.2) brightness(1.4); }

/*
아래 4가지 컬러 필터를 활용하여 프로젝트에 맞는 컬러로 변경!
hue-rotate(15deg) saturate(10) contrast(3) brightness(2)
*/


/* 더보기 버튼 커스터마이징 */

/* 기본 설정 */
.mtit_btn .btn_more p { font-size:15px; color:#777; padding-right:9px; }
.mtit_btn .btn_more.rev p { padding-left:9px; }
.mtit_btn .btn_more .btn_square span { font-weight:600; }
@media screen and (max-width:767px) {
	.mtit_btn .btn_more p { display:none; }
}

/*
더보기 버튼은 아래 스타일들 중에 골라서 메인 템플릿에 맞게 만들고 불필요한 부분은 삭제한다.
*/

/*
hover
.mtit_btn .btn_more:hover .btn_square { background-color:var(--mc); transition:background .3s; }
.mtit_btn .btn_more:hover .btn_square span { color:#fff; }
*/

.mtit_btn .btn_more .btn_square span { color:var(--mc); }

/*
라운딩
.mtit_btn .btn_more .btn_square { border-radius:6px; }
.mtit_btn .btn_more .btn_square { border-radius:0; }

박스 크기 조절
.mtit_btn .btn_more .btn_square { padding:0 8px; }

mc 박스
.mtit_btn .btn_more .btn_square { background-color:var(--mc); }
.mtit_btn .btn_more .btn_square span { color:#fff; }

lc 박스
.mtit_btn .btn_more .btn_square { background-color:var(--lc); }

테두리 박스, 위에 hover 부분을 제거해야함
.mtit_btn .btn_more .btn_square { background-color:transparent; border:1px solid #e1e1e1; }




+만 있는 경우

.mtit_btn .btn_more p { padding-right:3px; }
.mtit_btn .btn_more .btn_square { background-color:transparent; padding:0; }
.mtit_btn .btn_more .btn_square span { font-size:30px; font-weight:800; }
*/







/* 형광펜 */
.light_pen { background:linear-gradient(to top, var(--mc02) 40%, transparent 40%); }

#content section:not(.div_line) { margin-top:140px; }
#content .in_e > *:first-child { margin-top:0 !important; }

.web .latest_section .lt_message { display:none; }

#body .mc {color: var(--mc);}
#body .bgmc {background-color: var(--mc);}
#body .bdmc {border-color: var(--mc);}
#body .lc {color: var(--lc);}
#body .bglc {background-color: var(--lc);}
#body .bdlc {border-color: var(--lc);}
#body .bglg {background-color:#f6f6f6;}
#body .bdlg {border-color:#ddd;}
#body .bgwc {background-color: var(--wc);}

html { font-size:0; color:#111; }

* { margin:0; padding:0; }
body.hidden { overflow: hidden; }

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, div, p, h1, h2, h3, h4, h5, h6, li, dt, dd, form, select, input, textarea, button, th, td, menu, nav, header, footer, details, section, aside, article, picture { margin:0; padding:0; font-size:0; font-family: var(--pretendard); color:inherit; font-weight:400; line-height:100%; word-break:keep-all; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; font-variant:normal; font-stretch:normal; }
body.hidden { overflow: hidden; }
b, strong, span, i, em { line-height:100%; }

button { border:0; background:none; border-radius:0; padding:0; margin:0; box-sizing:border-box; line-height:100%; cursor:pointer; }
fieldset, img {margin:0;padding:0;border:0}
img { vertical-align:middle; max-width:100%; }
ul, ol, li, dl, dt, dd { list-style:none; }
main, picture { display:block; }
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select {vertical-align:middle;font-size:16px;}

hr { margin-block-start: 0; margin-block-end: 0; border:0; }

a{ color:inherit; }
a:link, a:visited, a:active { text-decoration:none; color:inherit; }
a:hover { text-decoration:none; }

input[type=text], input[type=password], select { border:1px solid #ddd; box-sizing:border-box; border-radius:0; -webkit-appearance:none; font-size:16px; }
input[type=submit] { border-radius:0; -webkit-appearance:none; font-size:17px; cursor:pointer; }
input[type=file] { background:#fff; border-radius:0; -webkit-appearance:none; font-size:14px; }
input[type=checkbox], input[type=radio] { transform: scale(1.3) translateY(-9%); transform-origin:left; cursor:pointer; margin-right:5px; }

textarea { width:100%; max-width:100%; border:1px solid #ddd; line-height:160%; box-sizing:border-box; border-radius:0; -webkit-appearance:none !important; }
select { font-size:15px; background:url('/images/select_arrow.gif') calc(100% - 14px) center no-repeat; }
table { border-spacing:0px; }

:placeholder { color:#aaa; }
::placeholder { color:#aaa; }
:-ms-input-placeholder { color:#aaa; }
::-ms-input-placeholder { color:aaa; }
::-ms-webkit-placeholder { color:aaa; }
::-ms-moz-placeholder { color:#aaa; }

.placeholdersjs {color:#aaa !important}
.sound_only, .sound_only * { font-size:0 !important; }


.mt0, * .mt0 { margin-top:0 !important; }
.pd0 { padding:0 !important; }
.bg { background-size:cover; background-position:center; background-repeat:no-repeat; }
.img_e .mob_img { display:none; }

.m_block, .m_inline, .m_inblock, .m_table, .td_block, .td_inline, .td_inblock, .td_table { display:none !important; }

.flex { display:flex; flex-wrap:wrap; justify-content:space-between; }

.fl { float:left !important; }
.fr { float:right !important; }
.cl:after { clear:both; visibility:hidden; display:block; content:''; }

.a100 { position:absolute; width:100%; height:100%; left:0; top:0; }
.hand { cursor:pointer; }
.brd100 { border-radius:1000px; }
.hide { display:none; }
.ov_hid { overflow:hidden; }


#body .rbt { font-family:var(--roboto); }
#body .pbc { font-family:var(--paybooc); }

#body .cen { text-align:center; }
#body .cenleft { text-align:center; }
#body .leftcen { text-align:left; }
#body .left { text-align:left; }
#body .right { text-align:right; }
#body .justl { justify-content:flex-start; text-align:left; }
#body .justc { justify-content:center; text-align:center; }
#body .justr { justify-content:flex-end; text-align:right; }
#body .middle { position:relative; top:50%; transform:translateY(-50%); }
#body .slick-slide img { display:inline; }

#body .c_b { color:#111; }
#body .c_w { color:#fff; }
#body .c_gray { color:#888; }
#body .c_o { color:#ff6000; }
#body .b_w { background-color:#fff; }
#body .b_b { background-color:#000; }

#body .lh6 { line-height:160%; }
#body .lh5 { line-height:150%; }
#body .lh4 { line-height:140%; }
#body .lh3 { line-height:130%; }
#body .lh2 { line-height:120%; }
#body .lh76 { line-height:170%; }
#body .lh65 { line-height:160%; }
#body .lh54 { line-height:150%; }
#body .lh43 { line-height:140%; }
#body .lh32 { line-height:130%; }

#body .fw2, #body .th { font-weight:200; }
#body .fw3 { font-weight:300; }
#body .fw4 { font-weight:400; }
#body .fw5 { font-weight:500; }
#body .fw6 { font-weight:600; }
#body .fw7, #body .bd { font-weight:700; }
#body .fw8 { font-weight:800; }
#body .fw9 { font-weight:900; }

.brd_16 { border-radius:16px; }
.brd_20 { border-radius:20px; }
.brd_30 { border-radius:30px; }
.brd_40 { border-radius:40px; }
.brd_50 { border-radius:50px; }
.brd_60 { border-radius:60px; }
#body .brd_tl0 { border-top-left-radius:0; }
#body .brd_tr0 { border-top-right-radius:0; }
#body .brd_bl0 { border-bottom-left-radius:0; }
#body .brd_br0 { border-bottom-right-radius:0; }

.sm { font-size:15.5px; line-height:170%; font-weight:400; }
.lrauto { margin-left:auto; margin-right:auto; }

.edit_txt * { line-height:150%; }
.vm_wrap { display:table; width:100%; height:100%; }
.vm_wrap > .vm { width:100%; height:100%; display:table-cell; vertical-align:middle; text-align:center; }

.bs_cover { background-size:cover !important; }
.bg_fix { background-attachment:fixed !important; }
.brk_all, table.brk_all tr td, ul.brk_all li { word-break:break-all !important; }

.only_t_brd { border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; }
.only_b_brd { border-top-left-radius:0 !important; border-top-right-radius:0 !important; }
.slide_out_prev, .slide_out_next { cursor:pointer; }

.tline1 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.tline2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.tline3 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }





.page_btns { position:fixed; right:0; bottom:0; z-index:1900; }
.page_btns a { margin-left:1px; padding:16px 24px 14px; background-color:#333; }
.page_btns a i { font-size:22px; }
.page_btns .btn_i.rev p { padding-left:5px; }
.page_btns .con_adm { background-color:var(--wc); }









/* 2단 제목&내용 레이아웃 */
.tit_cont, .col2_cont { display:flex; flex-wrap:wrap; justify-content:space-between; }
.tit_cont > dt {width: 24%;}
.tit_cont > dd {width: 71%;}

.col2_cont { row-gap:calc(24px + 3%); }
.col2_cont > * { width:47%; }
.col2_cont[data-cgap="0"] { row-gap:0; }
.col2_cont[data-cgap="0"] > * { width:50%; }

.col2_cont.rev { flex-direction:row-reverse; }
.col2_cont.mid { align-items:center; }

.tit_cont > dd .cont { line-height: 1.7; }
.tit_cont > dd .small .cont { line-height: 1.6; }

@media (min-width:1024px) {
	#content .tit_cont > dt h2 { font-size:40px; }
	#content .tit_cont h3 { font-size:32px; }
}
@media (max-width:1023px) {
    .tit_cont > dt {width: 100%;}
    .tit_cont > dd {width: 100%; margin-top: calc(14px + 2.5vw);}
    .tit_cont > dt > * { text-align:center; }
}
@media (max-width:767px) {
	.tit_cont > dd .cont { line-height:160%; }
}

.list_e h4 { font-size:25px; line-height:1.3; font-weight:700; }


@media (max-width:1660px) {
	input[type=checkbox], input[type=radio] { transform: scale(1.2) translateY(-9%); margin-right:3px; }
}


@media screen and (max-width:1024px) {
	select { background-size:7px; background-position:calc(100% - 12px) center; }
	#body .lh76 { line-height:160%; }
	#body .lh65 { line-height:150%; }
	#body .lh54 { line-height:140%; }
	#body .lh43 { line-height:130%; }
	#body .lh32 { line-height:120%; }
}

@media screen and (max-width:1023px) {
	.dhtml p { line-height:1.6; font-weight:400; }
}


@media screen and (max-width:767px) {
	input[type=checkbox], input[type=radio] { transform: scale(1) translateY(0); margin-right:0; }
	#body .cenleft { text-align:left; }
	#body .leftcen { text-align:center; }

	.td_none { display:none !important; }
	.td_block { display:block !important; }
	.td_inline { display:inline !important; }
	.td_inblock { display:inline-block !important; }
	.td_table { display:table !important; }

	.img_e img:first-of-type { display:none; }
	.img_e img:last-of-type { display:inline; }
	.sm { line-height:160%; }
	.m_no_br > br { display:none; }
}


/*** Mobile ***/

@media screen and (max-width:440px) {

	.m_none { display:none !important; }
	.m_block { display:block !important; }
	.m_inline { display:inline !important; }
	.m_inblock { display:inline-block !important; }
	.m_table { display:table !important; }

	.sm { line-height:150%; }
}