@charset "utf-8"; /* TITLE : 현장특수교육 웹진 (호별 POST Define) WORKER : HSG DATE : 2021.04.22 VERSION : Ver 1.0 - Ver 1.0 : 최초 작업. - 매호마다 정의 / 반복되는 요소는 Element로 이동. */ /* *** 각 포스트별 스타일(post 공통) *** */ /* 상단 summary box 배경 */ #container .top.post_02 .summary.summary1 .img_box { background-color: #9da3d1; } #container .top.post_02 .summary.summary2 .img_box { background-color: #04857F; } #container .top.post_04_2.post_04 .summary.summary1 .img_box { background-color: #e9e4f1; } #container .top.post_04_2.post_09 .summary.summary1 .img_box { background-color: #fbe6e3; } #container .top.post_04_2.post_10 .summary.summary1 .img_box { background-color: #18b6a7; } #container .top.post_04_2.post_11 .summary.summary2 .img_box { background-color: #ec7db2; } #container .top.post_04_2.post_12 .summary.summary1 .img_box { background-color: #787dbc; } #container .top.post_04_2.post_13 .summary.summary2 .img_box { background-color: #01A7EE; } #container .top.post_04_2.post_17 .summary.summary2 .img_box { background-color: #FFF6DC; } #container .top.post_04_2.post_18 .summary.summary1 .img_box { background-color: #f8b6b6; } #container .top.post_04_2.post_19 .summary.summary1 .img_box { background-color: #d5e5bc; } /* post banner image */ #container .sub_visual .vi_box, #container .sub_visual2 .vi_box { background-repeat: no-repeat; background-size: cover; background-position: center; } #container .sub_visual.post_01 .vi_box { background-image: url(../img/sub/bg_banner_post01.jpg); } #container .sub_visual.post_02 .vi_box { background-image: url(../img/sub/bg_banner_post02.jpg); } #container .sub_visual.post_31 .vi_box { background-image: url(../img/sub/bg_banner_post31.jpg); } #container .sub_visual.post_04 .vi_box { background-image: url(../img/sub/bg_banner_post04.jpg); } #container .sub_visual.post_02.post_05 .vi_box { background-image: url(../img/sub/bg_banner_post05.jpg); } #container .sub_visual.post_02.post_06_1 .vi_box { background-image: url(../img/sub/bg_banner_post06.jpg); } #container .sub_visual.post_02.post_06_1.post_07 .vi_box { background-image: url(../img/sub/bg_banner_post07.jpg); } #container .sub_visual.post_02.post_06_1.post_08 .vi_box { background-image: url(../img/sub/bg_banner_post08.jpg); } #container .sub_visual.post_02.post_06_1.post_09 .vi_box { background-image: url(../img/sub/bg_banner_post09.jpg); } #container .sub_visual2.post_02.post_10 .vi_box { background-image: url(../img/sub/bg_banner_post10.jpg); } #container .sub_visual2.post_02.post_11 .vi_box { background-image: url(../img/sub/bg_banner_post11.jpg); } #container .sub_visual2.post_02.post_12 .vi_box { background-image: url(../img/sub/bg_banner_post12.jpg); } #container .sub_visual2.post_02.post_13 .vi_box { background-image: url(../img/sub/bg_banner_post13.jpg); } #container .sub_visual.post_02.post_06_1.post_14 .vi_box { background-image: url(../img/sub/bg_banner_post14.jpg); } #container .sub_visual.post_02.post_06_1.post_15 .vi_box { background-image: url(../img/sub/bg_banner_post15.jpg); } #container .sub_visual.post_02.post_06_1.post_16 .vi_box { background-image: url(../img/sub/bg_banner_post16.jpg); } #container .sub_visual.post_03.post_06_1.post_17 .vi_box { background-image: url(../img/sub/bg_banner_post17.jpg); } #container .sub_visual.post_03.post_06_1.post_18 .vi_box { background-image: url(../img/sub/bg_banner_post18.jpg); } #container .sub_visual.post_03.post_06_1.post_19 .vi_box { background-image: url(../img/sub/bg_banner_post19.jpg); } #container .sub_visual.post_03.post_06_1.post_20 .vi_box { background-image: url(../img/sub/bg_banner_post20.jpg); } #container .sub_visual.post_03.post_06_1.post_21 .vi_box { background-image: url(../img/sub/bg_banner_post21.jpg); } #container .sub_visual.post_02.post_06_1.post_22 .vi_box { background-image: url(../img/sub/bg_banner_post22.jpg); } #container .sub_visual.post_03.post_06_1.post_32 .vi_box { background-image: url(../img/sub/bg_banner_post32.jpg); } /* post 03 */ @media all and (max-width: 480px) { #container .sub_visual.non_visual.post_01.post_03 .outline .bg { height: 145.833vw; background: url(../img/sub/bg_post_03_1.png) no-repeat center / cover; } #container .sub_visual.non_visual.post_01.post_03 .outline .bg img { display: none; } } /* post 04 */ @media all and (max-width: 480px) { #container .post_04_4 .quoto p { word-break: keep-all; } #container .post_04_4 .quoto p br { display: none; } } /* post 20 */ #container .post_20 .img_box { margin-bottom: 0.75rem; } #container .post_20 .title.title_1 { padding-left: 1rem; margin-bottom: 0.75rem; text-align: left; background-color: #f08c83; } #container .post_20 .title.title_1 span { position: relative; display: inline-block; top: -2px; width: 1.579rem; height: 1.579rem; border-radius: 0.8rem; background-color: #fff; text-align: center; font-size: 0.8em; line-height: 1.50rem; color: #333; } #container .post_20 .title.title_21 { position: relative; text-align: center; } #container .post_20 .title.title_21:before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 3px; background-color: #f08c83; text-align: center; z-index: -1; } #container .post_20 .title.title_21 span { display: inline-block; padding: 0 1.25rem; background-color: #e9e9e9; border-radius: 10px; font-weight: 500; } #container .post_20 .col_5 { font-weight: 400; } #container .post_20 .col_5 .dot_title li { font-weight: 300; } #container .post_20 .dot_title li { font-weight: 300; } #container .post_20 .dot_title li strong { font-weight: 400; } /* ***** 2021년 가을호 ***** */ /* *** 각 포스트별 스타일(개별 post) *** */ /* post 01 */ #container .sub_visual.post_01 .tit_box .img_box img { width: 260px; height: auto; border-radius: 5px; } /* 타입 #2 */ /* post 02 */ #container .post_02 .table_wrap.table_1 table .first { width: 200px; } #container .post_02 .table_wrap.table_1 table .second { width: auto; } #container .post_02 .table_wrap.table_1 table tr td:first-child { text-align: center; } /* post 31 */ #container .post_31 .dot_title li:before { background-color: #202020; } /* post 05 */ #container .post_05 .table_wrap .table_01 .first { width: 200px; } #container .post_05 .table_wrap .table_01 .second { width: auto; } #container .post_05 .table_wrap .table_01 tr:nth-child(1) td { border-top: 2px solid #000; } #container .post_05 .table_wrap .table_01 tr td:nth-child(1) { text-align: center; } #container .post_05 .table_wrap .table_01 tr td span { display: inline-block; margin: 0 4px 5px; min-width: 80px; text-align: center; } #container .post_05 .table_wrap .table_01 tr td span em { display: block; margin: 0 auto 4px; width: 20px; height: 20px; border-radius: 20px; } #container .post_05 .table_wrap .table_01 tr td span em.none { display: block; margin: 0 auto 0; text-align: center; width: auto; height: auto; border-radius: 0; } #container .post_05 .table_wrap .table_01 tr td span em.none img { width: 22px; height: auto; } #container .post_05 .table_wrap .table_02 .first { width: 200px; } #container .post_05 .table_wrap .table_02 .second { width: 200px; } #container .post_05 .table_wrap .table_02 .third { width: auto; } #container .post_05 .table_wrap .table_02 tr:nth-child(1) td { border-top: 2px solid #000; } #container .post_05 .table_wrap .table_02 tr td.cen { text-align: center; font-weight: 500; } /* post 07 */ #container .post_07 .source.source_3 .number li:nth-child(1):before { content: "1."; font-weight: 500; } #container .post_07 .source.source_3 .number li:nth-child(2):before { content: "2."; font-weight: 500; } #container .post_07 .source.source_3 .number li:nth-child(3):before { content: "3."; font-weight: 500; } #container .post_07 .table_wrap .table_01 .no1 { width: 16.6667%; } #container .post_07 .table_wrap .table_01 .no2 { width: 16.6667%; } #container .post_07 .table_wrap .table_01 .no3 { width: 16.6667%; } #container .post_07 .table_wrap .table_01 .no4 { width: 16.6667%; } #container .post_07 .table_wrap .table_01 .no5 { width: 16.6667%; } #container .post_07 .table_wrap .table_01 .no6 { width: 16.6667%; } #container .post_07 .float_layout .float_ele { width: 400px; max-width: 250px; } /* post 10 */ #container .post_10 .source.source_5 .dot_normal li { padding-left: 1.6rem; } #container .post_10 .source.source_5 .dot_normal li:nth-child(1):before { content: "*"; top: 4px; width: 15px; height: auto; border-radius: 0; background-color: inherit; } #container .post_10 .source.source_5 .dot_normal li:nth-child(2):before { content: "**"; top: 4px; width: 15px; height: auto; border-radius: 0; background-color: inherit; } #container .post_10 .table_wrap .table_01 col { width: 50%; } #container .post_10 .table_wrap .table_01 .first { border-top: 2px solid #000; } #container .post_10 .table_wrap .table_02 .no1 { width: 100px; } #container .post_10 .table_wrap .table_02 .no2 { width: 100px; } #container .post_10 .table_wrap .table_02 .no3 { width: 25%; } #container .post_10 .table_wrap .table_02 .no4 { width: 15%; } #container .post_10 .table_wrap .table_02 .no5 { width: auto; } #container .post_10 .table_wrap .table_02 .no6 { width: 15%; } #container .post_10 .table_wrap .table_02 thead .cross { position: relative; overflow: hidden; } #container .post_10 .table_wrap .table_02 thead .cross:after { position: absolute; content: ""; top: 0; left: -350px; width: 700px; height: 1px; background-color: #fff; transform: rotate(20deg); } #container .post_10 .table_wrap .table_02 thead .cross span { position: absolute; left: 2px; bottom: 2px; font-size: inherit; font-weight: inherit; color: inherit; } #container .post_10 .table_wrap .table_02 thead .cross em { position: absolute; right: 2px; top: 2px; font-size: inherit; font-weight: inherit; color: inherit; } #container .post_10 .table_wrap .table_02 tr th, #container .post_10 .table_wrap .table_02 tr td { text-align: center; } #container .post_10 .float_layout .float_ele { width: 200px; } /* post 11 */ #container .post_11 .source.source_5 ul.dot_normal li { padding-left: 0; } #container .post_11 .source.source_5 ul.dot_normal li:before { display: none;} /* post 14 */ #container .post_14 .title { padding: 4px 0; text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; } /* post 15 */ #container .post_15 .title { padding: 4px 0; text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; } #container .post_15 .col_5.cir_number.no_2:before { content: "②"; } #container .post_15 .col_5.cir_number.no_3:before { content: "③"; } /* post 16 */ #container .post_16 .title { padding: 4px 0; text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; } /* post 22 */ #container .post_22 .title { padding: 4px 0; text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; } /* post 17 */ #container .post_17 .table_01 .no_1 { width: 10%; } #container .post_17 .table_01 .no_2 { width: 40%; } #container .post_17 .table_01 .no_3 { width: auto; } #container .post_17 .table_01 tr td:nth-child(1) { text-align: center; } #container .post_17 .table_01 tr td:nth-child(2) { text-align: center; } /* post 21 */ #container .post_21 .roundbox { padding: 15px; background-color: #f9f9f9; border-radius: 20px; } #container .post_21 .roundbox .in_roundbox { padding: 15px; margin-bottom: 15px; border: 1px solid #d9d9d9; background-color: #fff; border-radius: 20px; } #container .post_21 .roundbox .in_roundbox:last-child { margin-bottom: 0; } #container .post_21 .roundbox .in_roundbox > h5 { margin-bottom: 8px; font-size: 28px; color: #000; font-weight: 700; text-align: center; line-height: 60px; } #container .post_21 .roundbox .in_roundbox > h5 span { position: relative; display: inline-block; font-size: 0; width: 60px; height: 60px; vertical-align: middle; border: 3px solid #000; top: -2px; border-radius: 60px; } #container .post_21 .roundbox .in_roundbox > h5 span.first { background: url(../img/sub/img_post21_01.png) no-repeat center / 40px auto; } #container .post_21 .roundbox .in_roundbox > h5 span.second { background: url(../img/sub/img_post21_02.png) no-repeat center / 40px auto; } #container .post_21 .roundbox .in_roundbox > h6 { position: relative; margin-bottom: 15px; text-align: center; } #container .post_21 .roundbox .in_roundbox > h6:after { position: absolute; content:""; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 3px; background-color: #f1f1f1; z-index: 0; } #container .post_21 .roundbox .in_roundbox > h6 span { position: relative; display: inline-block; padding: 2px 20px; background-color: #000; color: #fff; font-size: 1rem; font-weight: 500; border-radius: 10px; z-index: 10; } #container .post_21 .roundbox .in_roundbox .box_wrap { display: flex; flex-flow: row wrap; justify-content: space-between; } #container .post_21 .roundbox .in_roundbox .box_wrap > div { padding: 10px 5px; width: 48%; } #container .post_21 .roundbox .in_roundbox .box_wrap > div.mb { margin-bottom: 1.5rem; } #container .post_21 .roundbox .in_roundbox .box_wrap > div a { display: block; transition: transform 0.2s ease-in-out; background-color: #fff; } #container .post_21 .roundbox .in_roundbox .box_wrap > div a:hover { transform: translateY(-5px); } #container .post_21 .roundbox .in_roundbox .box_wrap div h4 { font-size: 1.05rem; font-weight: 700; } #container .post_21 .roundbox .in_roundbox .box_wrap div h5 { font-size: 1rem; font-weight: 400; color: #000; } #container .post_21 .roundbox .in_roundbox .box_wrap div p { margin-bottom: 6px; font-size: 0.9rem; font-weight: 300; color: #000; } #container .post_21 .roundbox .in_roundbox .box_wrap div img { width: 100%; } #container .post_21 .roundbox .in_roundbox .box_wrap div span { display: block; padding: 4px 2px; font-size: 0.8rem; text-align: center; } #container .post_21 .roundbox .in_roundbox .box_wrap div span em { font-size: 0.9em; } #container .post_21 .roundbox .in_roundbox .box_wrap.box_wrap3x1 > div { width: 32%; } /* post 19 */ #container .post_19 .boXLayout > div { transition: transform ease-in-out .3s; } #container .post_19 .boXLayout > div:hover { transform: translateY(-6px); } /* post 32 */ #container .post_32 .txt ul li { position: relative; margin-bottom: 8px; } #container .post_32 .txt ul.first li { padding-left: 25px; } #container .post_32 .txt ul.first li:before { position: absolute; content:"※"; left: 0; } #container .post_32 .txt ul.second li { padding-left: 70px; } #container .post_32 .txt ul.second li:last-child { margin-bottom: 0; } #container .post_32 .txt ul.second li span { position: absolute; left: 0; width: 60px; background: #d9d9d9; text-align: center; border-radius: 8px; } #container .post_32 .outline h4 { display: inline-block; padding: 0 20px; margin-bottom: 10px; background: #d9d9d9; text-align: center; border-radius: 10px; } #container .post_32 .outline .in_wrap table { border-top: 2px solid #333; } #container .post_32 .outline .in_wrap table.table_1 .no1 { width: 10%; } #container .post_32 .outline .in_wrap table.table_1 .no2 { width: 200px; } #container .post_32 .outline .in_wrap table.table_1 .no3 { width: auto; } #container .post_32 .outline .in_wrap table.table_1 tr td { text-align: center; word-break: keep-all; } #container .post_32 .outline .in_wrap table.table_1 tr td:nth-child(1) { background-color: #e9e9e9; font-weight: 500; } #container .post_32 .outline .in_wrap table.table_1 tr td:nth-child(2) { background-color: #d9d9d9; font-weight: 500; } #container .post_32 .outline .in_wrap table.table_1 tr td:last-child { text-align: left; } #container .post_32 .outline .dot_title li { font-size: 0.9rem; } #container .post_32 .outline .dot_title li:before { background-color: #333; } #container .post_32 .outline .in_wrap table.table_2 .no1 { width: 10%; } #container .post_32 .outline .in_wrap table.table_2 .no2 { width: auto; } #container .post_32 .outline .in_wrap table.table_2 tr td:nth-child(1) { background-color: #e9e9e9; font-weight: 500; text-align: center; } #container .post_32 .outline .img_wrap.img_wrap_3 span { text-align: left; } #container .post_32 .outline .img_wrap.img_wrap_3 img { max-width: 310px; border: 1px solid #e9e9e9; } /* ***** 2021년 가을호 (미디어쿼리) ***** */ /* *** 각 포스트별 스타일(개별 post) *** */ @media all and (max-width: 1280px) { #container .sub_visual.post_01 .tit_box .img_box img { width: 300px;} } @media all and (max-width: 1024px) { #container .sub_visual.post_01 .tit_box .img_box img { width: 230px;} } @media all and (max-width: 1023px) { #container .sub_visual.post_01 .tit_box .img_box { right: 1rem; } #container .sub_visual.post_01 .tit_box .img_box img { width: 170px; } /* post 05 */ #container .post_05 .table_wrap .table_01 .first { width: 160px; } /* post 10 */ #container .post_10 .table_wrap .table_02 thead .cross:after { transform: rotate(20deg); } /* post 21 */ #container .post_21 .roundbox .in_roundbox { padding: 10px; } #container .post_21 .roundbox .in_roundbox > h5 { margin-bottom: 6px; font-size: 26px; line-height: 50px; } #container .post_21 .roundbox .in_roundbox > h5 span { width: 50px; height: 50px; border-radius: 50px; } #container .post_21 .roundbox .in_roundbox > h5 span.first { background: url(../img/sub/img_post21_01.png) no-repeat center / 36px auto; } #container .post_21 .roundbox .in_roundbox > h5 span.second { background: url(../img/sub/img_post21_02.png) no-repeat center / 36px auto; } #container .post_21 .roundbox .in_roundbox .box_wrap > div { width: 48%; } #container .post_21 .roundbox .in_roundbox .box_wrap > div.mb { margin-bottom: 1.5rem; } #container .post_21 .roundbox .in_roundbox .box_wrap div h4 { font-size: 1rem; letter-spacing: -0.6px; } #container .post_21 .roundbox .in_roundbox .box_wrap div h5 { font-size: 0.9rem; letter-spacing: -0.6px; } #container .post_21 .roundbox .in_roundbox .box_wrap div p { margin-bottom: 6px; font-size: 0.8rem; letter-spacing: -0.8px; } #container .post_21 .roundbox .in_roundbox .box_wrap div span { font-size: 0.8rem; letter-spacing: -0.8px; } #container .post_21 .roundbox .in_roundbox .box_wrap div span em { font-size: 0.9em; } #container .post_21 .roundbox .in_roundbox .box_wrap.box_wrap3x1 > div { width: 32%; } } @media all and (max-width: 768px) { #container .post_32 .outline .in_wrap table.table_1 .no1 { width: 80px; } #container .post_32 .outline .in_wrap table.table_2 .no1 { width: 80px; } } @media all and (max-width: 767px) { #container .sub_visual.post_01 .tit_box .img_box { bottom: 10px; } #container .sub_visual.post_01 .tit_box .img_box img { width: 150px; } /* post 02 */ #container .post_02 .table_wrap.table_1 table .first { width: 100px; } /* post 05 */ #container .post_05 .table_wrap .table_01 .first { width: 120px; } #container .post_05 .table_wrap .table_01 tr td span { min-width: 65px; } #container .post_05 .table_wrap .table_02 .first { width: 150px; } #container .post_05 .table_wrap .table_02 .second { width: 150px; } /* post 10 */ #container .post_10 .table_wrap .in_wrap {overflow: hidden; overflow-x: auto; } #container .post_10 .table_wrap .table_02 { min-width: 700px; } #container .post_10 .table_wrap .table_02 thead .cross:after { transform: rotate(17.5deg); } /* post 21 */ #container .post_21 .roundbox .in_roundbox > h5 { font-size: 24px; line-height: 44px; } #container .post_21 .roundbox .in_roundbox > h5 span { width: 44px; height: 44px; border-radius: 44px; } #container .post_21 .roundbox .in_roundbox > h5 span.first { background: url(../img/sub/img_post21_01.png) no-repeat center / 30px auto; } #container .post_21 .roundbox .in_roundbox > h5 span.second { background: url(../img/sub/img_post21_02.png) no-repeat center / 30px auto; } #container .post_21 .roundbox .in_roundbox .box_wrap > div { width: 100%; margin-bottom: 1rem; } #container .post_21 .roundbox .in_roundbox .box_wrap > div.mb { margin-bottom: 1rem; } #container .post_21 .roundbox .in_roundbox .box_wrap div h5 { font-size: 0.95rem; } #container .post_21 .roundbox .in_roundbox .box_wrap div p { margin-bottom: 6px; font-size: 0.95rem; } #container .post_21 .roundbox .in_roundbox .box_wrap div span { font-size: 0.95rem; } #container .post_21 .roundbox .in_roundbox .box_wrap div span em { font-size: 0.9em; } #container .post_21 .roundbox .in_roundbox .box_wrap.box_wrap3x1 > div { width: 100%; } #container .post_32 .outline .in_wrap table { width: 768px; } } @media all and (max-width: 480px) { #container section.sub_visual.post_01 .tit_box h2 { margin-bottom: 7rem; } #container .sub_visual.post_01 .tit_box .img_box { bottom: 54px; right: auto; left: 1rem; } /* 수정을 하였음. */ /* post 05 */ #container .post_05 .table_wrap .table_02 .first { width: 90px; } #container .post_05 .table_wrap .table_02 .second { width: 90px; } #container .post_05 .table_wrap .table_02 tr td { word-break: keep-all; } /* post 10 */ #container .post_10 .table_wrap .table_02 thead .cross:after { transform: rotate(30deg); } #container .post_07 .float_layout .float_ele { width: 100%; max-width: 100%; text-align: center; } #container .post_10 .float_layout .float_ele { width: 100%; max-width: 100%; text-align: center; } } @media all and (max-width: 414px) { #container .post_32 .outline .img_wrap.img_wrap_3 img { max-width: 100%; } } @media all and (max-width: 320px) { }