@charset "utf-8";
/*
TITLE : 현장특수교육 웹진 (ELEMENT Define)
WORKER : HSG
DATE : 2021.04.22
VERSION : Ver 1.0
- Ver 1.0 : 최초 작업.
*/
/* 공통, html, body font-size (default) */
html { font-size: 19px; }
@media all and (max-width: 1023px) { html { font-size: 18px; } }
@media all and (max-width: 767px) { html { font-size: 16px; } }
@media all and (max-width: 480px) { html { font-size: 15px; } }
/* 폰트 */
.noto_sans { font-family: 'Noto Sans KR', sans-serif; }
.noto_serif { font-family: 'Noto Serif KR', serif; }
.nanumbrush { font-family: 'Nanum Brush Script', cursive; }
/* ELEMENT */
/* column */
.col { margin-bottom: 1rem; font-size: 1rem; text-align: justify;  } /* default */
.col_2 { margin-bottom: 1rem; font-size: 0.9rem; text-align: justify; }
.col_3 { margin-bottom: 1rem; font-size: 0.8rem; text-align: justify; }
.col_4 { margin-bottom: 1rem; font-size: 1.2rem; font-weight: 700; text-align: justify; }
.col_5 { margin-bottom: 1rem; font-size: 1.05rem; font-weight: 500; text-align: justify; }
.col_6 { margin-bottom: 1rem; font-size: 1rem; font-weight: 400; text-align: justify; }
.col a { font-weight: 400; font-size: 0.9em; color: #333; transition: all .3s ease-in-out; }
.col a:hover { text-decoration: underline; color: #000; }
/* title */
.tit_1 { font-size: 1.8rem; font-weight: 500; line-height: 1.4; letter-spacing: -1px; }
.title { margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 500; }
.title.title_1 { padding: 0.15rem 0.5rem; text-align: center; background-color: pink; color: #111; border-radius: 1.3rem; }
.dot_title li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5rem; font-size: 1.05rem; font-weight: 500; }
.dot_title li:before { position: absolute; content: ""; top: 12px; left: 5px; width: 10px; height: 10px; background-color: pink; border-radius: 10px; }
.dot_title.dot_title1 li { font-size: 1rem; font-weight: 300; }
.dot_title.dot_title1 li:before { font-size: 1rem; font-weight: 300; border: 1px solid gray; background-color: #fff; }

.post_tit { padding: 0.25rem 0.5rem 0.25rem 0.7rem; margin-bottom: 0.5rem; border-left: 6px solid #aaa; }
.post_tit span { font-size: 1.4rem; font-weight: 400; line-height: 1.4; letter-spacing: -1px; }
.post_tit h6 { font-size: 2.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -1px; }


/* LAYOUT */
.writer { position: relative; padding-left: 0.5rem; font-weight: 500; }
.writer:before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; width: 3px; height: 1.158rem; background-color: #333; }
.writer span { font-weight: 300; }
.writer.writer2 { padding-left: 1.25rem; }
.writer.writer2:before { display: none; }
.writer.writer2 i { position: absolute; top: 50%; transform: translateY(-50%); left: 0; }
.writer.writer3 { width: 100%; }
.writer.writer3:before { display: none; }
.writer.writer3 ul li { position: relative; padding-left: 80px; font-size: 0.842rem; font-weight: 300; }
.writer.writer3 ul li span { position: absolute; display: inline-block; left: 0; top: 0; width: 3.158rem; font-weight: 500; }
.writer.writer3 ul li span:after { position: absolute; content: ""; top: 50%; right: -5px; transform: translateY(-50%); width: 2px; height: 14px; background-color: #333; }
.writer.writer3 ul li em { font-weight: 500; }

/* IMAGE LAYOUT */
/* img 1개 + column */
.img_box { padding: 0 0.5rem; text-align: center; }
.img_box img { width: 100%; max-width: 500px; height: auto; }
.img_box span { display: block; margin-bottom: 0; padding: 0.25rem; text-align: center; }
.img_box span em { position: relative; top: -1px; color: inherit; font-size: 0.8em; }
/* img 2개 + column 2개 + column 1개 */
.img_wrap .inwrap { display: flex; }
.img_wrap > span { display: block; margin-bottom: 0; padding: 0.25rem; text-align: center; }
.img_wrap > span em { position: relative; top: -1px; color: inherit; font-size: 0.8em; }
.img_wrap.img_wrap_2 .inwrap { flex-flow: row nowrap; justify-content: space-around; }
.img_wrap.img_wrap_2 .inwrap > div { padding: 0 0.5rem; width: 50%; }
/* img 3개 + column 3개 + column 1개 */
.img_wrap.img_wrap_3 .inwrap { flex-flow: row nowrap; justify-content: space-around; }
.img_wrap.img_wrap_3 .inwrap > div { padding: 0 0.5rem; width: 33.3333%; }
@media all and (max-width: 1023px) {
    .dot_title li:before { top: 10px; }
    /* .post_tit { padding: 0.25rem 0.5rem 0.25rem 0.7rem; margin-bottom: 0.5rem; border-left: 6px solid #aaa; } */
    .post_tit span { font-size: 1.2rem; }
    .post_tit h6 { font-size: 1.8rem; }
}
@media all and (max-width: 767px) {
    /* img 3개 + column 3개 + column 1개 */
    .img_wrap.img_wrap_3 .inwrap { flex-flow: row wrap; }
    .img_wrap.img_wrap_3 .inwrap > div { margin-bottom: 1rem; width: 50%; }
    .dot_title li:before { top: 9px; }
}
@media all and (max-width: 480px) {
    .dot_title li { padding-left: 1.5rem; }
    .dot_title li:before { top: 8px; }
    .writer.writer2 i { top: 52%; }
    .post_tit span { font-size: 1.15rem; }
    .post_tit h6 { font-size: 1.7rem; }
}
@media all and (max-width: 414px) {
    /* img 2개 + column 2개 + column 1개 */
    .img_wrap.img_wrap_2 .inwrap { flex-flow: column; }
    .img_wrap.img_wrap_2 .inwrap > div { width: 100%; }
    .img_wrap.img_wrap_2 .inwrap > div:nth-child(1) { margin-bottom: 1rem; }
    /* img 3개 + column 3개 + column 1개 */
    .img_wrap.img_wrap_3 .inwrap { flex-flow: column; }
    .img_wrap.img_wrap_3 .inwrap > div {margin-bottom: 1rem; width: 100%; }
    .img_wrap.img_wrap_3 .inwrap > div:last-child {margin-bottom: 0; }
}
/* Summary 레이아웃 (말머리) */
.summary { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; }
.summary .img_box { padding: 0; width: 7.895rem;  }
.summary .img_box img { width: 100%; height: 100%; object-fit: cover; }
.summary .txt { display: flex; flex-flow: row; flex: 1; align-items: center; padding: 1rem; }
.summary .txt span { font-size: 0.947rem; font-weight: 500; text-align: justify; }
.summary.summary1 .img_box { position: relative; background-color: #f2b13b; }
.summary.summary1 .img_box img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: auto; vertical-align: middle;  }
.summary.summary2 .img_box { position: relative; background-color: #f2b13b; }
.summary.summary2 .img_box img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: auto; vertical-align: middle;  }
@media all and (max-width: 767px) {
    .summary .txt br { display: none; }
    .summary.summary1 .img_box img { transform: translateY(-50%) scale(1.3); }
    .summary.summary2 { display: flex; flex-flow: column; }
    .summary.summary2 > div { width: 100%; }
    .summary.summary2 .img_box { position: relative; width: 100%; background-color: #f2b13b; height: 100px; text-align: center; overflow: hidden; }
    .summary.summary2 .img_box img { position: static; top: 0; transform: translateY(0); width: 100%; height: 100%; object-fit: contain; transform: scale(1.5); }
}
@media all and (max-width: 480px) {
    .summary .img_box { width: 6.25rem; }
    .summary .txt { padding: 0.5rem; }
}
/* 인용 레이아웃 (quoto) */
.quoto { padding: 0.5rem 0; }
.quoto img { width: 1.579rem; height: auto; }
.quoto p { padding: 0.5rem 0; line-height: 1.5; font-weight: 400; }
/* Q&A BOX 레이아웃 */
.qna_box { margin-bottom: 2rem; }
.qna_box > div { position: relative; padding-left: 2rem; }
.qna_box .top { margin-bottom: 0.5rem; font-size: 1.05rem; font-weight: 500; line-height: 1.6; text-align: justify; }
.qna_box .top > i { position: absolute; top: 0.4rem; left: 0.4rem; transform: scale(1.1); }
.qna_box .bottom { line-height: 1.6; text-align: justify; }
.qna_box .bottom > i { position: absolute; top: 0.4rem; left: 0.4rem; transform: scale(1.1) rotateY(180deg); }
.qna_box1 > div { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; padding: 0 0.25rem; margin-bottom: 0.7rem; border-radius: 0.5rem; }
.qna_box1 > div.quest { padding: 0.4rem 0.25rem;  background-color: lightgray; }
.qna_box1 > div img { width: 80px; height: auto; }
.qna_box1 > div > div { flex: 1; padding: 1.2rem 0.5rem 1rem 1rem; text-align: justify; }
.qna_box1 > div > div.center { align-self: center; padding-top: 1rem; }
.qna_box1 > div > div span { padding: 0.1rem 0.3rem; color: #fff; background-color: pink; border-radius: 0.5rem; line-height: 1; }
.qna_box.qna_box2 > div { position: relative; padding-left: 2.5rem; }
.qna_box.qna_box2 > div:before { position: absolute; padding-top: 3px; top: 0; left: 0; width: 30px; height: 30px; border-radius: 30px; background-color: lightgray; text-align: center; font-size: 0.9rem; color: #fff; box-sizing: border-box; }
.qna_box.qna_box2 .top:before { content:"Q"; font-family: 'Gothic A1', sans-serif; }
.qna_box.qna_box2 .bottom:before { content:"A"; font-family: 'Gothic A1', sans-serif; }
.qna_box.qna_box3 > div { position: relative; padding: 0.3rem 0 0.3rem 2.5rem; }
.qna_box.qna_box3 > div:before { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 40px; text-align: center; line-height: 40px; border: 1px solid red; }
.qna_box.qna_box3 > div.top_01:before { content: "01"; }


@media all and (max-width: 1023px) {
    .qna_box1 > div img { width: 70px; }
    .qna_box1 > div > div { padding-top: 0.95rem; }
    .qna_box.qna_box2 > div:before { padding-top: 4px; }
}
@media all and (max-width: 767px) {
    .qna_box1 > div img { width: 65px; }
    .qna_box1 > div > div { padding-top: 1.25rem; }
    .qna_box.qna_box2 > div:before { padding-top: 5px; }
}
@media all and (max-width: 480px) {    
    .qna_box.qna_box2 > div:before { padding-top: 6px; top: -3px; }
}
/* 출처 레이아웃 (source) */
.source { position: relative; padding: 1.8rem 1.2rem; }
.source.source_1 { margin: 0 auto; width: 100%; max-width: 500px; background-color: #D9BEDC; }
.source.source_1:after { position: absolute; content: ""; right: 0; bottom: 0; width: 0; height: 0; border: none; border-top: 1.5rem solid #C36BAB; border-right: 1.5rem solid #fff; }
.source.source_1 h6 { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0 auto; padding: 0.25rem 1.5rem; width: 100%; max-width: 15.789rem; color: #111; text-align: center; border-radius: 1rem; background-color: #C36BAB; }
.source.source_1 p { margin: 0; font-size: 0.895rem; color: #444; line-height: 1.6; }
.source.source_2 { padding: 1rem; border: 2px solid #F6ACC3; border-radius: 0.5rem;  }
.source.source_2 h5 { padding: 0.25rem 0.5rem; font-size: 1rem; color: #111; font-weight: 500; text-align: center; border-radius: 1rem; background-color: #C36BAB; }
.source.source_2 .dot_color { display: flex; flex-flow: row wrap; justify-content: space-between; padding: 0.5rem 0;  }
.source.source_2 .dot_color li { position: relative; padding-left: 1.25rem; width: 50%; font-size: 0.895rem; }
.source.source_2 .dot_color li:before { position: absolute; content: ""; top: 0.579rem; left: 0.421rem; width: 0.316rem; height: 0.316rem; border-radius: 100%; background-color: #C36BAB; }
.source.source_3 { padding: 1rem; border: 2px solid #F6ACC3; border-radius: 0.5rem;  }
.source.source_3 h5 { padding: 0.25rem 0.5rem; font-size: 1rem; color: #111; font-weight: 500; text-align: center; border-radius: 1rem; background-color: #C36BAB; }
.source.source_3 .number,
.source.source_3 .cir_number { padding: 0.5rem 0;  }
.source.source_3 .cir_number li,
.source.source_3 .number li,
.source.source_3 .cir_number li { position: relative; padding-left: 1.25rem; margin-bottom: 0.3rem; width: 100%; font-size: 0.895rem; }
.source.source_3 .number li:last-child,
.source.source_3 .cir_number li:last-child { margin-bottom: 0; }
.source.source_3 .number li:before,
.source.source_3 .cir_number li:before { position: absolute; top: 0; left: 0; }
.source.source_3 .number li:nth-child(1):before { content: "1)"; }
.source.source_3 .number li:nth-child(2):before { content: "2)"; }
.source.source_3 .cir_number li:nth-child(1):before { content: "①"; }
.source.source_3 .cir_number li:nth-child(2):before { content: "②"; }
.source.source_3 .cir_number li:nth-child(3):before { content: "③"; }
.source.source_3 .cir_number.billiard li:before { content: "※"; }

.source.source_4 h5 { position: relative; padding: 0.5rem 0 0 3rem; font-size: 1.05rem; color: #333; font-weight: 500; border-bottom: 2px solid #333; }
.source.source_4 h5 img { position: absolute; left: 0; bottom: 2px; width: 50px; height: auto; }
.source.source_4 .number, .source.source_4 .dot { padding: 0.5rem 0; }
.source.source_4 ul li { position: relative; padding-left: 1.25rem; margin-bottom: 0.3rem; width: 100%; font-size: 0.895rem; }
.source.source_4 ul li:last-child { margin-bottom: 0; }
.source.source_4 .number li:before { position: absolute; top: 0; left: 0;  }
.source.source_4 .number li:nth-child(1):before { content: "1)"; }
.source.source_4 .number li:nth-child(2):before { content: "2)"; }
.source.source_4 .dot li:before { position: absolute; content:""; top: 0.526rem; left: 5px; width: 5px; height: 5px; background-color: #333; border-radius: 5px;  }
/* 일반 Box 레이아웃 */
.boxlayout_42 { display: flex; flex-flow: row wrap; justify-content: space-between; }
.boxlayout_42 > div { margin-bottom: 1rem; width: 49%; }
.boxlayout_41 { display: flex; flex-flow: row wrap; justify-content: space-between; }
.boxlayout_41 > div { margin-bottom: 1rem; width: 24%; }
.boxlayout_41 > div img { width: 100%; }

.color_box { border: 2px solid pink; border-radius: 0.35rem; }
.color_box h6 { padding: 0.25rem; background-color: pink; font-size: 0.947rem; color: #111; font-weight: 500; text-align: center; }
.color_box div.col_2 { margin: 0; padding: 0.5rem; font-size: 0.895rem; color: #333; text-align: center; line-height: 1.6; }
.color_box.color_box2 { border: 2px solid #d6d6d6; }
.color_box.color_box2 h6 { background-color: #d6d6d6; }
.color_box.color_box3 { position: relative; padding: 1rem; border: none; border-top: 1px solid blue; border-bottom: 1px solid blue; border-radius: 0;  }
.color_box.color_box3:before { position: absolute; content: ""; width: 1rem; height: 1rem; top: -0; left: 50%; transform: translate(-50%, -50%) rotate(45deg); border: none; border-right: 1px solid blue; border-bottom: 1px solid blue; background-color: #fff; }
.color_box.color_box3 h6 { background-color: #fff; color: #333; }
.color_box.color_box3 .col_2 { padding: 0; } 
/* 표(Table) 레이아웃 */
.table_wrap .table_title { padding: 0.2rem 1rem; font-size: 0.947rem; color: #333; font-weight: 400; text-align: center; }
table { width: 100%; }
table colgroup col { width: 25%; }
table thead tr th { padding: 0.25rem; font-size: 0.895rem; font-weight: 500; color: #333; background-color: lightgray; border-right: 1px solid #fff; }
table thead tr th:last-child { border-right: none;}
table tbody tr { border-bottom: 1px solid #333; }
table tbody tr:last-child { border-bottom: 2px solid #000; }
table tbody tr td { padding: 0.25rem; font-size: 0.842rem; color: #333; background-color: #fff; border-right: 1px solid #333; line-height: 1.5; }
table tbody tr td:last-child { border-right: none; }
/* float 레이아웃 */
.float_layout .float_ele { float: left; padding: 0.5rem 1rem 0 0; width: 500px; }
.float_layout .float_ele .img_box { padding: 0; }
.float_layout .float_ele .img_box img { max-width: 100%; }
/* 이용안내(info_box) */
.info_line { position: relative; display: inline-block; padding-left: 6.053rem; width: 100%; }
.info_line span { position: absolute; top: 1px; left: 0; display: inline-block; padding: 0 1rem; margin-right: 1rem; font-size: 0.9rem; color: #fff; background-color: gray;  border-radius: 1rem; }
.info_line em { display: inline; padding: 0; margin-right: 0.5rem; font-size: 0.9rem; color: #333; font-weight: 300; }
.info_line i { display: inline; padding: 0; margin-right: 0.5rem; font-size: 0.9rem; color: #333; font-weight: 300; }
/* 문의(question) */
.source.source_3.question { padding: 0; border: none; }
.source.source_3.question .cir_number.billiard li span { font-weight: 500; }
/* 독자코너 버튼 */
.reader_btn { text-align: center;  }
.reader_btn a { display: inline-block; margin: 0 0.5rem; width: 200px; line-height: 50px; color: #666; font-weight: 500; border: 3px solid #999; border-radius: 30px; transition: color .3s ease-in-out, border .3s ease; }
.reader_btn a:hover { color: #222; border-color: #555; }

@media all and (max-width: 1023px) {
    .float_layout .float_ele { width: 50%; }
    .source.source_4 h5 { padding-left: 2.5rem; }
    .source.source_4 h5 img { width: 35px; }
}
@media all and (max-width: 767px) {
    .source.source_4 h5 img { width: 30px; }
}
@media all and (max-width: 480px) {
    .float_layout .float_ele { float: none; padding: 0; width: 100%; }
    .float_layout .float_ele .img_box { margin-bottom: 1rem; }
    .source.source_4 h5 { padding-left: 2rem; }
    .source.source_4 h5 img { width: 25px; }
    .boxlayout_42 > div { width: 100%; }
    .boxlayout_42 > div:last-child { margin-bottom: 0; width: 100%; }
    .boxlayout_41 > div { margin-bottom: 1rem; width: 49%; }
    .reader_btn a { margin: 0 0.25rem; width: 37.500vw; min-width: 135px; line-height: 40px; }
}
/* 스크롤 Element */
.scroll_wrap span { display: none; }
.scroll_wrap span img { margin-bottom: 0.25rem; width: 1.579rem; height: auto; }
.scroll_wrap .in_wrap { overflow: hidden; overflow-x: auto; }
.scroll_wrap .in_wrap table { width: 100%; }
@media all and (max-width: 767px) {
    .scroll_wrap span { display: inline; }
    .scroll_wrap .in_wrap table { width: 1023px; }
    .scroll_wrap span img { width: 1.4rem; }
}