@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);

/* 초기화 */
html, body {margin:0; padding:0; height:100%; overflow:hidden;}
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_wrap {display:flex; flex-direction:row; align-items:flex-start; justify-content:flex-start; margin:0; padding:0; width:100%; height:100%;}
#webzine_sbj_wrap {position:relative; display:block; margin:0; padding:60px; width:410px; height:100%; background-image:url('./img/left_bg.png'); background-position:center bottom; background-size:cover;}
#webzine_sbj_wrap > .sbj_box1 > .sbj_p1 {margin:0; margin-bottom:30px; padding:0; font-family:'GmarketSansLight'; font-weight:600; font-size:18px; line-height:1.2em; color:#fff; text-shadow:1px 2px 4px #666;}
#webzine_sbj_wrap > .sbj_box1 > .sbj_p2 {margin:0; padding:0; font-family:'GmarketSansMedium'; font-size:45px; line-height:1em; color:#fff; text-shadow:1px 2px 4px #666;}
#webzine_sbj_wrap > .sbj_box1 > .sbj_p3 {margin:0; padding:0; font-family:'GmarketSansMedium'; font-weight:800; font-size:65px; color:#fff; text-shadow:1px 2px 4px #666;}
#webzine_sbj_wrap > .sbj_box2 {position:absolute; right:0px; top:32px; margin:0; padding:0; text-align:center;}
#webzine_sbj_wrap > .sbj_box2 > .sbj_sp1 {display:block; margin:0; padding:0; font-family:'NanumSquare', sans-serif; font-weight:700; font-size:70px; color:#ff7e00;}
#webzine_sbj_wrap > .sbj_box2 > .sbj_sp2 {display:block; margin:0 auto; margin-bottom:50px; padding:0; width:2px; height:230px; background:#ff7e00;}
#webzine_sbj_wrap > .sbj_box2 > .sbj_sp3 {display:block; margin:0; padding:0; font-family:'NanumSquare', sans-serif; font-weight:600; font-size:20px; color:#ff7e00; transform:rotate(90deg);}

#webzine_menu_wrap {margin:0; margin-left:-1px; padding:0; height:100%; overflow:hidden;}
#webzine_menu_box {margin:0; padding:0; padding-right:10px; height:100%; overflow-x:hidden; overflow-y:scroll; -ms-overflow-style:none; scrollbar-width:none;}
#webzine_menu_box::-webkit-scrollbar {display:none;}
#webzine_menu_box > li {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; padding:0; width:60px; height:calc(12vh); min-height:110px; border:0; border-radius:0 20px 20px 0; background:#fff; box-shadow:0 2px 10px #939393;}
#webzine_menu_box > li > a {display:block; margin:0; padding:10px; min-width:110px; transform:rotate(90deg); font-family:'Noto Sans KR',sans-serif; color:#333; font-weight:500; font-size:15px; text-align:center;}
#webzine_menu_box > li:nth-child(2) {height:190px;}
#webzine_menu_box > li:nth-child(2) > a {min-width:190px;}
#webzine_menu_box > li:nth-child(3) {height:160px;}
#webzine_menu_box > li:nth-child(3) > a {min-width:160px;}
#webzine_menu_box > li:nth-child(4) {height:150px;}
#webzine_menu_box > li:nth-child(4) > a {min-width:150px;}
#webzine_menu_box > li:nth-child(5) {height:150px;}
#webzine_menu_box > li:nth-child(5) > a {min-width:150px;}
li#menu_on {background:#ff7e00;}
li#menu_on > a {color:#fff;}

#webzine_main_wrap {flex:1 1 0%; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; margin:0; padding:0; padding-top:3.29vh; height:100%; overflow-x:scroll; overflow-y:hidden;}
#webzine_main_box {display:flex; flex-direction:column; margin:0; padding:0; width:1200px; max-width:1200px; height:100%; overflow-y:hidden;}
#webzine_main_hd {display:flex; flex-direction:row; align-items:center; justify-content:flex-end; margin:0; padding:0 25px; padding-bottom:20px; width:100%;}
#select_webzine {margin:0; margin-left:15px; 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; font-size:13px;}
#webzine_main_content {display:flex; flex-direction:row; justify-content:space-between; align-items:stretch; flex-wrap:wrap; margin:0; margin-top:-20px; padding:0 25px; padding-top:40px; width:100%; height:100%; overflow-y:scroll; -ms-overflow-style:none; scrollbar-width:none;}
#webzine_main_content::-webkit-scrollbar {display:none;}
#webzine_main_content > ul {display:block; margin:0; padding:0; width:32%;}
#webzine_main_content > ul > li {display:block; margin:0; padding:0; width:100%; margin-bottom:30px;}
#webzine_main_content > ul > 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%; transition: all 0.3s;}
#webzine_main_content > ul > li > a:hover {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;}
.list_ea {padding:0 0 20px 0 !important;}
#webzine_main_content > ul > li > a > div > h2 {margin:10px auto 25px; font-weight:600; font-size:24px; color:#2d2d2d; text-align:center;}
.webzine_main_list {position:relative; margin:0; padding:0; width:100%;}
.webzine_main_list > img {display:block; width:100%; object-fit:cover; /*filter:brightness(1.12);*/}
.webzine_main_list > p {display:block; margin:0 auto; margin-bottom:20px; padding:16px 0; width:100%; background:#f8f8f8; font-size:15px; line-height:1.1em; text-align:center;}
.list_badge {padding:9px 13px; color:#fff; font-weight: 500; position: absolute;top:0; left:0; background:#ff7e00; z-index: 10;}
.img_bx {display: block; width:100%; margin:0 auto;}
.img_bx > img {display: block; width:100%; height: 220px; 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.1em; text-align:center;}
.txt_bx > span:last-child{margin-bottom:25px;}

.webzine_banner_box {display:flex; flex-direction:row; align-items:center; justify-content:space-between; margin:20px auto; padding:0; width:100%;}
.webzine_banner_box > a {display:block; margin:0; padding:0;}

.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;
}