@charset "utf-8";
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;background:#f1f1f1; -webkit-font-smoothing: antialiased; color:#2d2d2d}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif; font-weight: normal;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0; border-radius: 0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
br{font-family: dotum}
*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
select::-ms-expand {display:none}
input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}


/*-----------------------------------------------------------------------------------------------------------------------------*/


.webzine_area{
    display: block; width:100%; margin:0 auto; background:#efefef;
}
.webzine_bx{
    display: flex; flex-direction: row; justify-content: center; align-items: flex-start; width: 100%; min-width: 1550px; position: relative; margin:0 auto; box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
}
.webzine_left_side{
    display: block; width:446px; height: 100vh; background:url(img/left_bg.png) no-repeat bottom right / cover; position: relative; top:0; left:0; padding:61px;
}
.webzine_right_side{
    display: block; width:1475px; height: 100vh; overflow-y: scroll; position: relative;    -ms-overflow-style: none; scrollbar-width: none;
}
.webzine_right_side::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.wz_h1{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;color:#fff; font-family: 'GmarketSansMedium'; text-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}
.wz_h1 > .subtitle{
     font-size:18px; line-height: 1.4em; margin-bottom:30px; font-family: 'GmarketSansLight'
}
.wz_h1 > .title{
    font-size: 50px; line-height: 1.2em;
}

.wz_h1 > .title > strong{
}
.wz_h2{
    display: flex; flex-direction: column;justify-content: flex-start;align-items: flex-end; position: absolute; top:50px; right:20px;  font-family: 'NanumSquare', sans-serif;color:#a746ae;
}
.wz_h2 > .month{
    font-size:72px; font-weight: 700;
}
.wz_h2_item{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin-right:-40px;
}
.wz_h2_item > .bx{
    display: block; width:2px; height: 240px; background:#a746ae; margin-bottom:60px;
}
.wz_h2_item > .year{
    transform: rotate(90deg); display: block; font-size:20px; font-weight: 600;

}

.menu_list_area{
display: block;top:0px; left:0; width:80px;background:#efefef; height:100vh; overflow-y: scroll;   -ms-overflow-style: none; scrollbar-width: none;
}
.menu_list_area::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera*/
}
.menu_list_area > ul{
    display: flex; flex-direction: column-reverse; justify-content: flex-start; align-items: stretch; margin-right: 10px;
}
.menu_list_area > ul > li{
    font-size:15px; background:#fff; border-bottom-right-radius: 20px; border-top-right-radius: 20px; box-shadow: 2px -1px 5px rgba(0,0,0,0.3); margin-top: -15px; display: flex; flex-direction: column; justify-content: center; align-items: center; position:relative; height:calc(14vh); min-height:180px;
}
.menu_list_area > ul > li:last-child{
    height:calc(12vh); min-height:110px;
}
.menu_list_area > ul > li:nth-child(5){
    height:calc(15vh);
    min-height:200px;
}
.menu_list_area > ul > li:nth-child(5)>a{
    min-width: 180px;
}
.menu_list_area > ul > li > a{
    font-family: 'Noto Sans KR', sans-serif;color:#333; font-weight:500; padding:10px 5px 10px 10px; display: block;
   /*writing-mode: vertical-rl;*/ text-orientation: sideways; text-align: center; flex-direction:row; align-items:stretch; justify-content:center; min-width:150px; transform:rotate(90deg);
}
.menu_list_area > ul > li.on{
    background:#ab62b0; z-index: 10;
}
.menu_list_area > ul > li.on > a{
    color:#fff;
}
.content_area{
    display: block; width:100%; max-width: 1170px; margin: 0 auto; box-sizing: border-box; padding-top:3.29vh;
}
.content_top_bx{
    display: flex; flex-direction: row; justify-content: flex-end; align-items: center; width:100%; margin-bottom:25px;
}

.content_top_bx > a{
    margin-right:15px;
}
.content_top_bx > select{
    padding:11px 17px 11px 17px; width:200px; background:url(img/select_more.png) no-repeat center right 17px / auto, #fff; border:0;-moz-appearance:none; -webkit-appearance:none; appearance:none;
}

.content_item_bx{
    display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; width:100%; margin-bottom:40px; min-width: 1110px;
}
.content_list_2_2{
    width:32%;
}
.content_list_2_2 > li{
    display: block; width:100%;
}
.content_list_2_2 > li:first-child{
    margin-bottom: 30px;
}
.content_list_2_2 > li:first-child:hover{
    margin-bottom: 0px;
    padding-bottom: 30px;
}
.content_list_2_2 > li > a{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background:#fff; border-radius: 10px; width:100%; overflow: hidden; padding-bottom:20px; height: 100%;
}
.content_list_2_2 > li > a > .img_bx{
    display: block; width:100%; margin:0 auto;
}
.content_list_2_2 > li > a > .img_bx > img{
    display: block; width:100%; height: 220px; object-fit: cover;
}

.content_list_1_1 > li > a > .img_bx{
    position: relative; width:100%;
}
.content_list_1_1 > li > a > .img_bx > img{
    display: block; width:100%; height: 250px; object-fit: cover;
}
.txt_bx{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding:18px 0 0; width:100%;
}
.txt_bx > .menu{
color:#ff831d; font-size:13px; font-weight: 700; letter-spacing: 0.15em; margin-bottom:15px;line-height: 1em;
}
.txt_bx > .title{
    color:#2d2d2d; font-size:24px; font-weight: 600; margin-bottom:17px;line-height: 1em;
}
.txt_bx > .content_info{
    color:#2d2d2d; font-size:15px; font-weight: 400;margin-bottom:25px; line-height: 1.4em; text-align: center;
}
.txt_bx > span:last-child{
    margin-bottom:25px;
}


.content_list_1_1{
    display: block; width: 32%;
}
.content_list_1_1 > li{
    display: block; width:100%; height: 100%;
}
.content_list_1_1 > li > a{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background:#fff; padding:22px 18px 0; border-radius: 10px; overflow: hidden; padding-bottom:20px; height: 100%;
}
.content_list_1_1 > li > a > .img_bx > .content_info{
    display: block; width:100%; margin:0 auto; text-align: center;  background:#f8f8f8; padding:16px 0; margin-bottom:20px; font-size:15px; line-height: 1.1em;
}
.content_list_1_1 > li > a > .txt_bx{
    margin-bottom:30px;
}

.content_badge{
    padding:9px 13px; color:#fff; font-weight: 500; position: absolute;top:0; left:0; background:#ab62b0; z-index: 10;
}


.content_list_2_2 > li:hover> a {
    margin-top: -15px; box-shadow: 3px 3px 20px rgba(0,0,0,0.15), -3px -3px 20px rgba(0,0,0,0.15); margin-bottom:15px; transition: all 0.3s;
}
.content_list_1_1 > li:hover > a{
    margin-top:-15px; box-shadow: 3px 3px 20px rgba(0,0,0,0.15), -3px -3px 20px rgba(0,0,0,0.15);transition: all 0.3s;
}

.footer_area{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-top:40px; margin-bottom:60px;
}
.footer_info{
    display: block; margin-left:18px; padding-left:18px; border-left:1px solid #a0a0a0; color:#666; font-size:15px; line-height: 1.1em;
}

.main_con3{margin-bottom:41px !important;}

.content_ad_bx {display: flex; justify-content: space-between;}
.main_video1388 {border-radius:10px; overflow:hidden; position:relative; cursor:pointer; background:#fff;}
.main_video1388:after {
  position:absolute;
  content:"[충청남도 1388청소년지원단 홍보동영상]"; color:#fff; font-size:18px;padding-top:6px;
  text-align:center; bottom:0; left:0; right:0; width:100%; height:40px; background:rgba(0,0,0,0.5);
  display:none
}
.main_video1388:hover:after {display:block}
.main_video1388 video::-webkit-media-controls-fullscreen-button {display: none !important;} /* 일시정지, 재생 버튼 */
.main_video1388 video::-webkit-media-controls-play-button {display: none !important;} /* 재생 슬라이드..? */
.main_video1388 video::-webkit-media-controls-timeline {display: none !important;} /* 현재 진행 시간 */
.main_video1388 video::-webkit-media-controls-current-time-display{display: none !important;} /* 전체 시간 */
.main_video1388 video::-webkit-media-controls-time-remaining-display {display: none !important;} /* 음소거 버튼 */
.main_video1388 video::-webkit-media-controls-mute-button {display: none !important;} /* 볼륨 조절 슬라이드 */
.main_video1388 video::-webkit-media-controls-volume-slider {display: none !important;}


.fil_1_12{filter: brightness(1.12);}