@charset "utf-8";
/*
TITLE : 웹진 (ELEMENT Define)
WORKER : HSG
DATE : 2021.12.29
VERSION : Ver 1.0
- Ver 1.0 : 최초 작업.
*/
/* 공통, html, body font-size (default) */
/* Base html style */
.element .link { position: fixed; right: 0; bottom: 0; padding: 10px; background-color: #d9d9d9; z-index: 100; }
.element .link a { display: block; text-align: center; line-height: 20px; font-weight: 700; }
.menu { position: fixed; top: 0; left: 50%; width: 100%; max-width: 1300px; transform: translateX(-50%); display: flex; flex-flow: row nowrap; justify-content: space-between; padding-bottom: 10px; background-color: #fff; z-index: 100; }
.menu:after { position: absolute; content: ""; left: 0; bottom: 4px; width: 100%; height: 2px; background-color: #111; }
.menu h2 { flex: 1; font-size: 16px; color: #999; font-weight: 400; line-height: 40px; text-align: center; border: 1px solid #999; border-right: 0px solid #666; cursor: pointer; letter-spacing: -1px; transition: color .2s ease-in; }
.menu h2.on { color: #111; font-weight: 700; }
.menu h2:last-child { border-right: 1px solid #999; }
.wrap { padding-top: 60px; background-color: #f9f9f9; }
.wrap .box { background-color: #f5f5f5; }
.wrap .box > h3 { font-size: 20px; line-height: 40px; color: #111; font-weight: 500; letter-spacing: -1.2px; background-color: #d9d9d9; }
.wrap .box > h4 { margin-bottom: 10px; font-size: 18px; font-weight: 500; color: #000; border-bottom: 1px solid #c9c9c9; }
.wrap .box .inbox { display: flex; flex-flow: row wrap; }
.wrap .box .inbox > div { margin-bottom: 20px; padding: 0 10px; width: 50%; background-color: #e8e8e8; }
.wrap .box .inbox > div h4 { margin-bottom: 10px; font-size: 18px; font-weight: 500; color: #000; border-bottom: 1px solid #c9c9c9; }
.wrap .box_2 > h4 { font-size: 18px; font-weight: 500; color: #333; line-height: 28px; }
.wrap .box_2 > .detail { padding-bottom: 20px; }

@media all and (max-width: 768px) {
    .wrap .box .inbox > div { margin-bottom: 15px; width: 100%; }
}

/* ****** Contents Font ****** */
/* *** content font *** */
/* light 폰트 (300) */
/* 일반 글꼴 */
.P_noto_col { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 20px; font-weight: 300; color: #333; line-height: 32px; }
/* 작은 일반 글꼴 */
.P_noto_col_sm { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 18px; font-weight: 300; color: #333; line-height: 28px; }
/* 아주 작은 일반 글꼴 */
.P_noto_col_ssm { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 16px; font-weight: 300; color: #333; line-height: 26px; }
/* 아주 더 작은 일반 글꼴 */
.P_noto_col_sssm { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 300; color: #333; line-height: 25px; }
/* 가장 작은 일반 글꼴 */
.P_noto_col_ssssm { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 300; color: #333; line-height: 24px; }

/* regular 폰트 (400) */
.P_noto_col_m { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 20px; font-weight: 400; color: #333; line-height: 32px; }
/* 작은 굵은 글꼴 */
.P_noto_col_smm { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 18px; font-weight: 400; color: #333; line-height: 28px; }
/* 아주 작은 굵은 글꼴 */
.P_noto_col_ssmm { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 16px; font-weight: 400; color: #333; line-height: 26px; }
/* 아주 더 작은 굵은 글꼴 */
.P_noto_col_sssmm { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 400; color: #333; line-height: 25px; }
/* 가장 작은 굵은 글꼴 */
.P_noto_col_ssssmm { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 400; color: #333; line-height: 24px; }

/* *** 본문 Font *** */
/* 본문내 타이틀 */
.tit_a1 { font-size: 28px; line-height: 40px; color: #222; letter-spacing: -0.4px; font-weight: 700; }
.tit_a2 { font-size: 24px; line-height: 36px; color: #222; letter-spacing: -0.4px; font-weight: 700; }
.tit_a3 { font-size: 21px; line-height: 32px; color: #222; letter-spacing: -0.4px; font-weight: 700; }
.tit_a4 { font-size: 20px; line-height: 30px; color: #222; letter-spacing: -0.4px; font-weight: 700; }
.tit_a5 { font-size: 18px; line-height: 28px; color: #222; letter-spacing: -0.4px; font-weight: 700; }
.tit_a6 { font-size: 16px; line-height: 26px; color: #222; letter-spacing: -0.4px; font-weight: 700; }

/* * font-family * */
/* noto sans */
.noto_1 { font-family: 'Poppins', 'Noto Sans KR', sans-serif; }
.EliceBaeumR { font-family: 'EliceBaeumR', sans-serif; }
.gmarketSansM { font-family: 'gmarketSansM', sans-serif; }
.gmarketSansL { font-family: 'gmarketSansL', sans-serif; }
.bmdohyeon { font-family: 'BMDOHYEON', sans-serif; }
.noto_serif { font-family: 'Noto Serif', 'Noto Serif KR', serif; }

/* *** Title Font (고객사에 맞게 선택하여 적용) *** */
/* 엘리스배움(R) */
.big_tit_a_15B { font-family: 'EliceBaeumR'; font-size: 70px; line-height: 84px; }
.big_tit_b_15B { font-family: 'EliceBaeumR'; font-size: 60px; line-height: 74px; }
.big_tit_c_15B { font-family: 'EliceBaeumR'; font-size: 44px; line-height: 56px; }
.big_tit_d_15B { font-family: 'EliceBaeumR'; font-size: 32px; line-height: 42px; }
/* G마켓(M) */
.big_tit_a_16B { font-family: 'gmarketSansM'; font-size: 70px; line-height: 84px; }
.big_tit_b_16B { font-family: 'gmarketSansM'; font-size: 60px; line-height: 74px; }
.big_tit_c_16B { font-family: 'gmarketSansM'; font-size: 44px; line-height: 56px; }
.big_tit_d_16B { font-family: 'gmarketSansM'; font-size: 32px; line-height: 42px; }
/* G마켓(L) */
.big_tit_a_17B { font-family: 'gmarketSansL'; font-size: 70px; line-height: 84px; }
.big_tit_b_17B { font-family: 'gmarketSansL'; font-size: 60px; line-height: 74px; }
.big_tit_c_17B { font-family: 'gmarketSansL'; font-size: 44px; line-height: 56px; }
.big_tit_d_17B { font-family: 'gmarketSansL'; font-size: 32px; line-height: 42px; }
/* 배민도현체 */
.big_tit_a_18B { font-family: 'BMDOHYEON'; font-size: 70px; line-height: 84px; }
.big_tit_b_18B { font-family: 'BMDOHYEON'; font-size: 60px; line-height: 74px; }
.big_tit_c_18B { font-family: 'BMDOHYEON'; font-size: 44px; line-height: 56px; }
.big_tit_d_18B { font-family: 'BMDOHYEON'; font-size: 32px; line-height: 42px; }

/* margin */
.mg_b5 { margin-bottom: 5px; }
.mg_b10 { margin-bottom: 10px; }
.mg_b15 { margin-bottom: 15px; }
.mg_b20 { margin-bottom: 20px; }
.mg_b30 { margin-bottom: 30px; }
.mg_b40 { margin-bottom: 40px; }
.mg_b50 { margin-bottom: 50px; }
.mg_b70 { margin-bottom: 70px; }
.mg_b100 { margin-bottom: 100px; }
.mg_b150 { margin-bottom: 150px; }
.mg_t5 { margin-top: 5px; }
.mg_t10 { margin-top: 10px; }
.mg_t15 { margin-top: 15px; }
.mg_t20 { margin-top: 20px; }
.mg_t30 { margin-top: 30px; }
.mg_t40 { margin-top: 40px; }
.mg_t50 { margin-top: 50px; }
.mg_t70 { margin-top: 70px; }
.mg_t100 { margin-top: 100px; }
.mg_t150 { margin-top: 150px; }

/* padding (all) */
.pd_5 { padding: 5px; }
.pd_10 { padding: 10px; }
.pd_15 { padding: 15px; }
.pd_20 { padding: 20px; }
.pd_25 { padding: 25px; }
.pd_30 { padding: 30px; }
.pd_35 { padding: 35px; }
.pd_40 { padding: 40px; }
.pd_50 { padding: 50px; }

/* ELEMENT */
@media all and (max-width: 1280px) {
    .big_tit_a_15B { font-size: 50px; line-height: 64px; }
    .big_tit_b_15B { font-size: 40px; line-height: 50px; }
    .big_tit_c_15B { font-size: 34px; line-height: 44px; }
    .big_tit_d_15B { font-size: 30px; line-height: 40px; }
    .big_tit_a_16B { font-size: 50px; line-height: 64px; }
    .big_tit_b_16B { font-size: 40px; line-height: 50px; }
    .big_tit_c_16B { font-size: 34px; line-height: 44px; }
    .big_tit_d_16B { font-size: 30px; line-height: 40px; }
    .big_tit_a_17B { font-size: 50px; line-height: 64px; }
    .big_tit_b_17B { font-size: 40px; line-height: 50px; }
    .big_tit_c_17B { font-size: 34px; line-height: 44px; }
    .big_tit_d_17B { font-size: 30px; line-height: 40px; }
    .big_tit_a_18B { font-size: 50px; line-height: 64px; }
    .big_tit_b_18B { font-size: 40px; line-height: 50px; }
    .big_tit_c_18B { font-size: 34px; line-height: 44px; }
    .big_tit_d_18B { font-size: 30px; line-height: 40px; }
    .P_noto_col { font-size: 19px; line-height: 29px; }
    .P_noto_col_sm { font-size: 17px; line-height: 27px; }
    .P_noto_col_ssm { font-size: 15px; line-height: 25px; }
    .P_noto_col_sssm { font-size: 14px; line-height: 24px; }
    .P_noto_col_ssssm { font-size: 13px; line-height: 23px; }
    .P_noto_col_m { font-size: 19px; line-height: 29px; }
    .P_noto_col_smm { font-size: 17px; line-height: 27px; }
    .P_noto_col_ssmm { font-size: 15px; line-height: 25px; }
    .P_noto_col_sssmm { font-size: 14px; line-height: 24px; }
    .P_noto_col_ssssmm { font-size: 13px; line-height: 23px; }
    .tit_a1 { font-size: 24px; line-height: 34px; }
    .tit_a2 { font-size: 22px; line-height: 32px; }
    .tit_a3 { font-size: 20px; line-height: 30px; }
    .tit_a4 { font-size: 18px; line-height: 28px; }
    .tit_a5 { font-size: 17px; line-height: 27px; }
    .tit_a6 { font-size: 16px; line-height: 26px; }
}
@media all and (max-width: 1024px) {
    .mg_b10 { margin-bottom: 5px; }
    .mg_b15 { margin-bottom: 10px; }
    .mg_b20 { margin-bottom: 10px; }
    .mg_b30 { margin-bottom: 15px; }
    .mg_b40 { margin-bottom: 20px; }
    .mg_b50 { margin-bottom: 30px; }
    .mg_b70 { margin-bottom: 40px; }
    .mg_b100 { margin-bottom: 80px; }
    .mg_b150 { margin-bottom: 130px; }
    .mg_t10 { margin-top: 5px; }
    .mg_t15 { margin-top: 10px; }
    .mg_t20 { margin-top: 10px; }
    .mg_t30 { margin-top: 15px; }
    .mg_t40 { margin-top: 20px; }
    .mg_t50 { margin-top: 30px; }
    .mg_t70 { margin-top: 40px; }
    .mg_t100 { margin-top: 80px; }
    .mg_t150 { margin-top: 130px; }
    .pd_5 { padding: 3px; }
    .pd_10 { padding: 10px; }
    .pd_15 { padding: 10px; }
    .pd_20 { padding: 15px; }
    .pd_25 { padding: 20px; }
    .pd_30 { padding: 25px; }
    .pd_35 { padding: 30px; }
    .pd_40 { padding: 35px; }
    .pd_50 { padding: 40px; }
}
@media all and (max-width: 768px) {
    .big_tit_a_15B { font-size: 38px; line-height: 48px; }
    .big_tit_b_15B { font-size: 32px; line-height: 42px; }
    .big_tit_c_15B { font-size: 26px; line-height: 36px; }
    .big_tit_d_15B { font-size: 22px; line-height: 32px; }
    .big_tit_a_16B { font-size: 38px; line-height: 48px; }
    .big_tit_b_16B { font-size: 32px; line-height: 42px; }
    .big_tit_c_16B { font-size: 26px; line-height: 36px; }
    .big_tit_d_16B { font-size: 22px; line-height: 32px; }
    .big_tit_a_17B { font-size: 38px; line-height: 48px; }
    .big_tit_b_17B { font-size: 32px; line-height: 42px; }
    .big_tit_c_17B { font-size: 26px; line-height: 36px; }
    .big_tit_d_17B { font-size: 22px; line-height: 32px; }
    .big_tit_a_18B { font-size: 38px; line-height: 48px; }
    .big_tit_b_18B { font-size: 32px; line-height: 42px; }
    .big_tit_c_18B { font-size: 26px; line-height: 36px; }
    .big_tit_d_18B { font-size: 22px; line-height: 32px; }
    .P_noto_col { font-size: 18px; line-height: 28px; }
    .P_noto_col_sm { font-size: 16px; line-height: 26px; }
    .P_noto_col_ssm { font-size: 15px; line-height: 25px; }
    .P_noto_col_sssm { font-size: 14px; line-height: 24px; }
    .P_noto_col_ssssm { font-size: 13px; line-height: 23px; }
    .P_noto_col_m { font-size: 18px; line-height: 28px; }
    .P_noto_col_smm { font-size: 16px; line-height: 26px; }
    .P_noto_col_ssmm { font-size: 15px; line-height: 25px; }
    .P_noto_col_sssmm { font-size: 14px; line-height: 24px; }
    .P_noto_col_ssssmm { font-size: 13px; line-height: 23px; }
    .tit_a1 { font-size: 20px; line-height: 30px; }
    .tit_a2 { font-size: 19px; line-height: 29px; }
    .tit_a3 { font-size: 18px; line-height: 28px; }
    .tit_a4 { font-size: 17px; line-height: 27px; }
    .tit_a5 { font-size: 16px; line-height: 26px; }
    .tit_a6 { font-size: 15px; line-height: 25px; }
    .mg_b15 { margin-bottom: 5px; }
    .mg_b20 { margin-bottom: 5px; }
    .mg_b30 { margin-bottom: 10px; }
    .mg_b40 { margin-bottom: 15px; }
    .mg_b50 { margin-bottom: 20px; }
    .mg_b70 { margin-bottom: 30px; }
    .mg_b100 { margin-bottom: 70px; }
    .mg_b150 { margin-bottom: 120px; }
    .mg_t15 { margin-top: 5px; }
    .mg_t20 { margin-top: 5px; }
    .mg_t30 { margin-top: 10px; }
    .mg_t40 { margin-top: 15px; }
    .mg_t50 { margin-top: 20px; }
    .mg_t70 { margin-top: 30px; }
    .mg_t100 { margin-top: 70px; }
    .mg_t150 { margin-top: 120px; }
    .pd_10 { padding: 5px; }
    .pd_15 { padding: 5px; }
    .pd_20 { padding: 10px; }
    .pd_25 { padding: 15px; }
    .pd_30 { padding: 20px; }
    .pd_35 { padding: 25px; }
    .pd_40 { padding: 30px; }
    .pd_50 { padding: 35px; }
}

@media all and (max-width: 480px) {
    .big_tit_a_15B { font-size: 32px; line-height: 44px; }
    .big_tit_b_15B { font-size: 28px; line-height: 40px; }
    .big_tit_c_15B { font-size: 22px; line-height: 34px; }
    .big_tit_d_15B { font-size: 18px; line-height: 30px; }
    .big_tit_a_16B { font-size: 32px; line-height: 44px; }
    .big_tit_b_16B { font-size: 28px; line-height: 40px; }
    .big_tit_c_16B { font-size: 22px; line-height: 34px; }
    .big_tit_d_16B { font-size: 18px; line-height: 30px; }
    .big_tit_a_17B { font-size: 32px; line-height: 44px; }
    .big_tit_b_17B { font-size: 28px; line-height: 40px; }
    .big_tit_c_17B { font-size: 22px; line-height: 34px; }
    .big_tit_d_17B { font-size: 18px; line-height: 30px; }
    .big_tit_a_18B { font-size: 32px; line-height: 44px; }
    .big_tit_b_18B { font-size: 28px; line-height: 40px; }
    .big_tit_c_18B { font-size: 22px; line-height: 34px; }
    .big_tit_d_18B { font-size: 18px; line-height: 30px; }
    .P_noto_col_sssm { font-size: 13px; line-height: 23px; }
    .P_noto_col_ssssm { font-size: 12px; line-height: 22px; }
    .P_noto_col_sssmm { font-size: 13px; line-height: 23px; }
    .P_noto_col_ssssmm { font-size: 12px; line-height: 22px; }
    .mg_b30 { margin-bottom: 10px; }
    .mg_b40 { margin-bottom: 10px; }
    .mg_b50 { margin-bottom: 15px; }
    .mg_b70 { margin-bottom: 20px; }
    .mg_b100 { margin-bottom: 50px; }
    .mg_b150 { margin-bottom: 100px; }
    .mg_t30 { margin-top: 10px; }
    .mg_t40 { margin-top: 10px; }
    .mg_t50 { margin-top: 15px; }
    .mg_t70 { margin-top: 20px; }
    .mg_t100 { margin-top: 50px; }
    .mg_t150 { margin-top: 100px; }
    .pd_25 { padding: 10px; }
    .pd_30 { padding: 20px; }
    .pd_35 { padding: 20px; }
    .pd_40 { padding: 25px; }
    .pd_50 { padding: 35px; }
}

/* ****** Layout ****** */
/* *** box *** */
/* 1) horizontal 2x1 (767px transform) */
.flex_21 { display: flex; flex-flow: row nowrap; }
.flex_21 > div { width: 50%; }
/* 2) horizontal 2xn (767px transform) */
.flex_2n { display: flex; flex-flow: row wrap; }
.flex_2n > div { width: 50%; }
/* 3) horizontal 3x1 (767px transform) */
.flex_31 { display: flex; flex-flow: row nowrap; }
.flex_31 > div { width: 33.3333%; }
/* 4) horizontal 3xn (767px transform) */
.flex_3n { display: flex; flex-flow: row wrap; }
.flex_3n > div { width: 33.3333%; }
/* 5) horizontal 4x1 (1023px, 480px transform) */
.flex_41 { display: flex; flex-flow: row nowrap; }
.flex_41 > div { width: 25%; }

/* *** text column *** */
/* 1) column( 2column, 767px transform) */
.col_21 { column-count: 2; text-align: justify; word-break: break-all; }
/* .col_21 > .tit { column-span: all; } */
/* 2) column( 2column, 767px transform) */
.col_21_all { column-count: 2; text-align: left; word-break: break-all; }
.col_21_all > .tit { -webkit-column-span: all; column-span: all; }
/* 3) leed type #1 */
.mid_leed_1 .in_box { display: flex; flex-flow: row wrap; }
.mid_leed_1 .in_box .left { width: 55%; }
.mid_leed_1 .in_box .right { align-self: center; padding-left: 40px; width: 45%;  }
.mid_leed_1 .in_box .right img { display: block; width: 40px; height: auto; }
.mid_leed_1 .in_box .right img.top { margin-bottom: 20px; }
.mid_leed_1 .in_box .right img.bottom { margin-top: 20px; }
/* 3) leed type #2 */
.mid_leed_2 .in_box { display: flex; flex-flow: row wrap; }
.mid_leed_2 .in_box .right { width: 55%; }
.mid_leed_2 .in_box .left { align-self: center; padding-right: 40px; width: 45%;  }
.mid_leed_2 .in_box .left img { display: block; width: 40px; height: auto; }
.mid_leed_2 .in_box .left img.top { margin-bottom: 20px; }
.mid_leed_2 .in_box .left img.bottom { margin-top: 20px; }
/* Q&A Box_1 (default) */
.qna_box_1 > div p span { position: relative; display: inline-block; padding-right: 5px; margin-right: 5px; transform: translateY(-2px); }
.qna_box_1 > div p span.txt { transform: translateY(0); font-weight: 700; }
.qna_box_1 > div p span em { display: inline-block; padding: 0 3px; font-size: 0.9em; }
/* Q&A Box_2 */
.qna_box_2 { display: flex; flex-flow: row wrap; }
.qna_box_2 .left { padding-right: 10px; width: 40%; }
.qna_box_2 .right { padding-left: 10px; width: 60%; }
.qna_box_2 > div { display: flex; flex-flow: row nowrap; }
.qna_box_2 > div .moji { width: 40px; text-align: center; }
.qna_box_2 > div .col { width: calc(100% - 40px); }

@media all and (max-width: 1024px) {
    .mid_leed_1 .in_box .right { padding-left: 30px; }
    .mid_leed_1 .in_box .right img { width: 30px; }
    .mid_leed_1 .in_box .right img.top { margin-bottom: 10px; }
    .mid_leed_1 .in_box .right img.bottom { margin-top: 10px; }
    .mid_leed_2 .in_box .left { padding-right: 30px; }
    .mid_leed_2 .in_box .left img { width: 30px; }
    .mid_leed_2 .in_box .left img.top { margin-bottom: 10px; }
    .mid_leed_2 .in_box .left img.bottom { margin-top: 10px; }
}
@media all and (max-width: 1023px) {
    .flex_41 { display: flex; flex-flow: row wrap; }
    .flex_41 > div { width: 50%; }
}
@media all and (max-width: 768px) {
    .mid_leed_1 .in_box .right { padding-left: 20px; }
    .mid_leed_1 .in_box .right img {  width: 25px; }
    .mid_leed_1 .in_box .right img.top { margin-bottom: 10px; }
    .mid_leed_1 .in_box .right img.bottom { margin-top: 10px; }
    .mid_leed_2 .in_box .left { padding-left: 20px; }
    .mid_leed_2 .in_box .left img {  width: 25px; }
    .mid_leed_2 .in_box .left img.top { margin-bottom: 10px; }
    .mid_leed_2 .in_box .left img.bottom { margin-top: 10px; }
    .qna_box_2 .left { padding-right: 5px; }
    .qna_box_2 .right { padding-left: 5px; }
}
@media all and (max-width: 767px) {
    .flex_21 { flex-flow: row wrap; }
    .flex_21 > div { width: 100%; }
    .flex_2n > div { width: 100%; }
    .flex_31 { flex-flow: row wrap; }
    .flex_31 > div { width: 100%; }
    .flex_3n > div { width: 100%; }
    .col_21 { column-count: 1; }
    .mid_leed_1 .in_box .left { width: 100%; }
    .mid_leed_1 .in_box .right { padding: 5.215vw 0; width: 100%; text-align: center; }
    .mid_leed_1 .in_box .right img { width: 20px; margin: 0 auto; }
    .mid_leed_1 .in_box .right img.top { margin-bottom: 10px; }
    .mid_leed_1 .in_box .right img.bottom { margin-top: 10px; }
    .mid_leed_2 .in_box .right { width: 100%; order: 1; }
    .mid_leed_2 .in_box .left { padding: 5.215vw 0; width: 100%; text-align: center; order: 2; }
    .mid_leed_2 .in_box .left img { width: 20px; margin: 0 auto; }
    .mid_leed_2 .in_box .left img.top { margin-bottom: 10px; }
    .mid_leed_2 .in_box .left img.bottom { margin-top: 10px; }
    .qna_box_2 .left { margin-bottom: 10px; padding-right: 0; width: 100%; }
    .qna_box_2 .right { padding-left: 0; width: 100%; }
    .qna_box_2 > div .moji { width: 36px; text-align: center; }
    .qna_box_2 > div .col { width: calc(100% - 36px); }
}
@media all and (max-width: 480px) {
    .flex_41 { display: flex; flex-flow: row wrap; }
    .flex_41 > div { width: 100%; }
}

/* ****** image box ****** */
/* *** basic *** */
.img_box_1 { background-color: #fff; }
.img_box_1 > img { width: 100%; height: auto; }
.img_box_1 > p { background-color: #f5f5f5; }
.img_box_1 > p span { font-weight: 500; }
/* *** basic 2 *** */
.img_box_2 > p { padding-top: 5px; text-align: center; }
.img_box_2 > p span { font-weight: 500; }
.img_box_2 .flex_21 > div { padding-bottom: 0; }
.img_box_2 .flex_21 > div .img_box_1 p { padding-bottom: 0; }
@media all and (max-width: 767px) {
    .img_box_2 > p { padding-top: 5px; }
    .img_box_2 .flex_21 > div { padding-bottom: 5px; }
    .img_box_2 .flex_21 > div:last-child { padding-bottom: 0; }
    .img_box_2 .flex_21 > div .img_box_1 p { padding-bottom: 5px; }
}
/* *** basic 3 *** */
/* *** apply 1 *** */
.img_apply_1 { display: flex; flex-flow: row wrap; }
.img_apply_1 .left { width: 40%; }
.img_apply_1 .right { display: flex; align-items: flex-end; width: 60%; }
.img_apply_1 .right > * { padding-bottom: 0; width: 100%; }
@media all and (max-width: 1024px) {
    .img_apply_1 .left { width: 50%; }
    .img_apply_1 .right { width: 50%; }
}
@media all and (max-width: 480px) {
    .img_apply_1 .left { width: 100%; }
    .img_apply_1 .right { width: 100%; }
    .img_apply_1 .right span { display: inline-block; transform: rotate(90deg); }
    .img_apply_1 .right > * { padding-bottom: 5px; }
}
/* *** apply 2 *** */
.img_apply_2 { position: relative; display: flex; flex-flow: row nowrap; }
.img_apply_2 > div.left { width: 50%; }
.img_apply_2 > div.right { width: 50%; }
.img_apply_2 .in_box { position: absolute; bottom: 0; right: 0; width: 45%; }
/* *** img + col *** */
.img_col_1 .in_box { display: flex; flex-flow: row wrap; }
.img_col_1 .in_box > div.left { width: 60%; }
.img_col_1 .in_box > div.right { padding-left: 20px; width: 40%; }
@media all and (max-width: 768px) {
    .img_col_1 .in_box > div.left { order: 2; width: 100%; }
    .img_col_1 .in_box > div.right { order: 1; padding-left: 0; width: 100%; }
}
/* ****** Layout ****** */
/* *** List *** */
/* dot */
.dot_li li { position: relative; padding-left: 15px; }
.dot_li li:before { position: absolute; content: "·"; left: 5px; top: -1px; font-size: inherit; line-height: inherit; font-family: inherit; color: inherit; }
/* circle */
.cir_li_1 li { position: relative; padding-left: 20px; }
.cir_li_1 li:before { position: absolute; content: "●"; left: 0; font-size: 0.8em; line-height: inherit; font-family: inherit; color: inherit; }
/* circle 2 */
.cir_li_2 li { position: relative; padding-left: 20px; }
.cir_li_2 li:before { position: absolute; content: "○"; left: 0; font-size: 0.8em; line-height: inherit; font-family: inherit; color: inherit; }
/* auto numbering */
.numbering { counter-reset: number 0; }
.numbering > li { position: relative; padding-left: 20px; }
.numbering > li:before { position: absolute; counter-increment: number 1; content: counter(number)'.'; left: 0; font-size: inherit; line-height: inherit; font-family: inherit; color: inherit;  }
/* circle numbering */
.cir_num li { position: relative; padding-left: 20px;  }
.cir_num li:before { position: absolute; left: 0; font-size: 0.95em; line-height: inherit; font-family: inherit; color: inherit; }
.cir_num li:nth-child(1):before { content: "\2460"; }
.cir_num li:nth-child(2):before { content: "\2461"; }
.cir_num li:nth-child(3):before { content: "\2462"; }
.cir_num li:nth-child(4):before { content: "\2463"; }
.cir_num li:nth-child(5):before { content: "\2464"; }
.cir_num li:nth-child(6):before { content: "\2465"; }
.cir_num li:nth-child(7):before { content: "\2466"; }
.cir_num li:nth-child(8):before { content: "\2467"; }
.cir_num li:nth-child(9):before { content: "\2468"; }
.cir_num li:nth-child(10):before { content: "\2469"; }
.cir_num li:nth-child(11):before { content: "\246A"; }
/* circle numbering 2 */
.cir_num_dark li { position: relative; padding-left: 20px; }
.cir_num_dark li:before { position: absolute; left: 0; font-size: 1.25em; line-height: inherit; font-family: inherit; color: inherit; }
.cir_num_dark li:nth-child(1):before { content: "\2776"; }
.cir_num_dark li:nth-child(2):before { content: "\2777"; }
.cir_num_dark li:nth-child(3):before { content: "\2778"; }
.cir_num_dark li:nth-child(4):before { content: "\2779"; }
.cir_num_dark li:nth-child(5):before { content: "\277A"; }
.cir_num_dark li:nth-child(6):before { content: "\277B"; }
.cir_num_dark li:nth-child(7):before { content: "\277C"; }
.cir_num_dark li:nth-child(8):before { content: "\277D"; }
.cir_num_dark li:nth-child(9):before { content: "\277E"; }
.cir_num_dark li:nth-child(10):before { content: "\277F"; } /* 다음 없음*/
/* ****** Sub Banner Area ****** */
/* *** (1-1) *** */
.outline { margin: 0 auto; width: 100%; height: 100%; max-width: 1280px; }
.sub_visual { padding: 25px 0; height: 600px; background-color: #f1f1f1; }
.sub_visual .outline { display: flex; flex-flow: row nowrap; }
.sub_visual .outline > div { width: 50%; }
.sub_visual .banner_img { position: relative; order: 2; }
.sub_visual .banner_img .img_wrap { width: 100%; height: 100%; background: no-repeat center / cover; }
.sub_visual .banner_img .img_wrap img { width: 100%; height: auto; }
.sub_visual .banner_img .img_wrap img.mo_1023_view { display: none; }
.sub_visual .banner_img .img_wrap.post_1 { background-image: url(../img/sub/z_sample.jpg); }
.sub_visual .banner_img p { position: absolute; left: 0; bottom: 0; width: 100%; background-color: #f1f1f1; }
.sub_visual .banner_img p span { font-weight: 500; }
.sub_visual .tit_area { order: 1; display: flex; flex-flow: column; justify-content: flex-start; padding-top: 20px; padding-right: 20px; }
.sub_visual .tit_area em { align-self: flex-start; padding-left: 15px; padding-right: 15px; background-color: #0064FF; color: #fff; font-weight: 500; border-radius: 20px;  }
.sub_visual .tit_area .category { position: relative; align-self: flex-start; font-size: 18px; font-weight: 700; color: #333; }
.sub_visual .tit_area .category:before { position: absolute; content: ""; left: 0; bottom: 3px; width: 100%; height: 3px; background-color: #333; }
.sub_visual .tit_area h3 { position: relative; text-align: left; }
.sub_visual .tit_area h3:after { position: absolute; content: ""; left: 3px; bottom: 0; width: 2px; height: 35px; background-color: #333; transform: rotate(180deg); transform-origin: 0 100%; }
.sub_visual .tit_area h5 { font-weight: 700; }
.sub_visual .tit_area p { margin-top: auto; font-weight: 500; }
.sub_visual .tit_area .writer span { font-weight: 500; }
@media all and (max-width: 1280px) {
    .sub_visual { padding: 25px 20px; height: 560px; }
    .sub_visual .tit_area .category { font-size: 17px; }
    .sub_visual .tit_area h3:after { height: 35px; }
}
@media all and (max-width: 1024px) {
    .sub_visual { padding: 25px 20px; height: 500px; }
    .sub_visual .tit_area em { padding-left: 10px; padding-right: 10px; }
    .sub_visual .tit_area .category { font-size: 17px; }
    .sub_visual .tit_area h3:after { height: 15px; }
}
@media all and (max-width: 1023px) {
    .sub_visual { padding: 25px 20px; height: auto; }
    .sub_visual .outline { flex-flow: row wrap; }
    .sub_visual .outline > div { width: 100%; }
    .sub_visual .banner_img .img_wrap { height: auto; background: none; }
    .sub_visual .banner_img .img_wrap img.mo_1023_view { display: inline; }
    .sub_visual .banner_img .img_wrap.post_1 { background-image: none; }
    .sub_visual .tit_area { padding: 15px 10px; margin-bottom: 20px; background-color: #e1e1e1; }
    .sub_visual .tit_area .category { font-size: 17px; }
    .sub_visual .tit_area h5 { margin-bottom: 6.510vw; }
}
@media all and (max-width: 768px) {
    .sub_visual { padding: 25px 20px; }
    .sub_visual .tit_area .category { font-size: 16px; }
    .sub_visual .tit_area h3:after { height: 10px; }
}
@media all and (max-width: 480px) {
    .sub_visual { padding: 25px 20px;}
    .sub_visual .tit_area .category { font-size: 15px; }
    .sub_visual .tit_area h3:after { height: 6px; }
}

/* *** (1-2) *** */
.sub_visual.sub_visual_11 { margin-bottom: 140px; }
.sub_visual.sub_visual_11 .banner_img { transform: translateY(140px); }
@media all and (max-width: 1280px) {
    .sub_visual.sub_visual_11 { margin-bottom: 140px; height: 500px; }
}
@media all and (max-width: 1023px) {
    .sub_visual.sub_visual_11 { margin-bottom: 0; height: auto; }
    .sub_visual.sub_visual_11 .banner_img { transform: translateY(0); }
    .sub_visual.sub_visual_11 .tit_area { margin-bottom: 0; }
}
/* *** (2-1) *** */
.sub_visual_2 { position: relative; height: calc(100vh - 100px); }
.sub_visual_2:after { position: absolute; content: ""; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient( to right, #000 55%, rgba(0,0,0,.7) 75%, rgba(0,0,0,.0)); }
.sub_visual_2 .banner_img { text-align: right; height: 100%; }
.sub_visual_2 .banner_img .img_wrap { display: inline-block; height: 100%; }
.sub_visual_2 .banner_img .img_wrap img { width: auto; height: 100%; }
.sub_visual_2 .in_wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; }
.sub_visual_2 .in_wrap .outline { position: relative; }
.sub_visual_2 .in_wrap .tit_area { display: flex; flex-flow: column; justify-content: flex-start; padding-top: 100px; color: #fff; }
.sub_visual_2 .in_wrap .tit_area > * { width: 50%; color: #fff; }
.sub_visual_2 .in_wrap .tit_area em { align-self: flex-start; padding-left: 15px; padding-right: 15px; color: #333; font-weight: 500; width: auto; background-color: #fff; border-radius: 20px; }
.sub_visual_2 .in_wrap .tit_area span { position: relative; align-self: flex-start; font-size: 18px; font-weight: 700; width: auto; letter-spacing: 0; }
.sub_visual_2 .in_wrap .tit_area span:after { position: absolute; content: ""; bottom: 5px; left: 0; width: 100%; height: 10px; background-color: #0072bc; z-index: -1; }
.sub_visual_2 .in_wrap .tit_area h4 { font-weight: 500; }
.sub_visual_2 .in_wrap .tit_area h5 { font-weight: 300; }
.sub_visual_2 .in_wrap .outline .summary_txt { position: absolute; bottom: 0; left: 0; padding: 10px; width: 50%; background-color: #fff; }
.sub_visual_2 .in_wrap .outline .summary_txt p { font-weight: 500; }
.sub_visual_2 .in_wrap .outline .summary_txt .writer span { font-weight: 500; }
.sub_visual_2 .summary_bg { position: absolute; bottom: 0; left: 0; width: 50%; height: 100px; background-color: #fff; z-index: 4; }

@media all and (max-width: 1280px) {
    .sub_visual_2 { height: calc(100vh - 150px); }
    .sub_visual_2 .in_wrap .outline {  padding: 0 20px; }
    .sub_visual_2 .in_wrap .outline .summary_txt { padding: 10px 10px 10px 20px; }
}
@media all and (max-width: 1024px) {
    .sub_visual_2 { height: calc(100vh - 200px); }
    .sub_visual_2 .in_wrap .tit_area {  padding-top: 50px; }
}
@media all and (max-width: 768px) {
    .sub_visual_2 {  display: flex; flex-flow: column; height: auto; }
    .sub_visual_2:after { display: none; }
    .sub_visual_2 .banner_img {  width: 100%; height: auto; }
    .sub_visual_2 .banner_img .img_wrap { display: block; width: 100%; height: auto; }
    .sub_visual_2 .banner_img .img_wrap img { width: 100%; height: auto; }
    .sub_visual_2 .in_wrap { position: inherit; top: auto; left: auto; width: 100%; height: 100%; z-index: 5; margin-top: -100px; }
    .sub_visual_2 .in_wrap .outline {  background: linear-gradient( to top, #000 70%, rgba(0,0,0,.7) 85%, rgba(0,0,0,0)); }
    .sub_visual_2 .in_wrap .tit_area {  padding-top: 10px; }
    .sub_visual_2 .in_wrap .tit_area > * { width: 100%; color: #fff; }
    .sub_visual_2 .in_wrap .outline .summary_txt { position: inherit; bottom: auto; left: auto; margin-top: 3.906vw;  padding: 10px; width: 100%;}
    .sub_visual_2 .summary_bg { display: none; }
}
@media all and (max-width: 480px) {
    .sub_visual_2 .in_wrap {  margin-top: -16.667vw; }
    .sub_visual_2 .in_wrap .outline {  background: linear-gradient( to top, #000 80%, rgba(0,0,0,.7) 90%, rgba(0,0,0,0)); }
    .sub_visual_2 .in_wrap .outline .summary_txt {  padding: 10px; }
}




/* ****** 기타 요소 ****** */
/* *** QR바로가기 *** */
/* 1) QR바로가기 */
.qr_link { padding: 30px 50px; text-align: center; background-color: rgba(252, 232, 235, 1); }
.qr_link a { display: inline-block; }
.qr_link a img { max-width: 130px }
/* 2) 컬러박스 */
.color_box { padding: 40px; }
/* 2-1) 상/하 좁은 컬러박스 */
.color_box2 { padding: 10px 40px; }
@media all and (max-width: 1024px) {
    .qr_link a img { max-width: 110px }
    .color_box { padding: 30px; }
    .color_box2 { padding: 10px 30px; }
}
@media all and (max-width: 768px) {
    .qr_link { padding: 25px 50px; }
    .qr_link a img { max-width: 100px }
    .color_box { padding: 25px; }
    .color_box2 { padding: 10px 25px; }
}
@media all and (max-width: 480px) {
    .qr_link { padding: 25px 20px; }
    .qr_link a img { max-width: 80px }
    .color_box { padding: 10px; }
    .color_box2 { padding: 10px 20px; }
}