@charset "utf-8"; 
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css);

.fNanum { font-family: 'NanumSquare', sans-serif; }
.taL { text-align: left !important; }
.taC { text-align: center !important; }
.taR { text-align: right !important; }
.c-purple { color: darkviolet; }

/* layout */
* { box-sizing: border-box; }
html, body { font-size: 62.5%; font-family:Pretendard; word-break: keep-all; color: #333; line-height: 1.4; }
body { background: url('common/bg.png')no-repeat center top / cover; }
dl#skipNavi { height: 0; width: 0; overflow: hidden; text-indent: -99999px; position: absolute; top: -99999px; left: -99999px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
.mobileOnly { display: none !important; }

.wrapper { width: 1000px; margin: 50px auto; border-radius: 5px 5px 0 0; font-size: 1.7rem; color: #333; box-shadow: 0 10px 10px rgba(0,0,0,.15); }
div#container { padding: 40px 40px 0px 40px; background-color: #fff; border-left: 1px solid #652128; border-right: 1px solid #652128; }
div#container.sub { padding: 40px; background-color: #fff; border-left: 1px solid #652128; border-right: 1px solid #6521283; }

.tabMenu { display: flex; justify-content: space-between; align-items: stretch; }
.tabMenu li { flex: 1; width: 100%; text-align: center; padding:20px 10px; background-color: #e9e9f0; border:1px solid #8b8b9d; border-left: 0; border-radius: 10px 10px 0 0;
    font-size: 2.4rem; font-weight: 500; color: #57575d; line-height: 1; }
.tabMenu li.on { background-color: #fff; border:1px solid #652128; border-bottom: 0; font-weight: 700; color:#17175f; }

div#headerWrap { position: relative; /*padding: 20px 40px;*/ background-color: #fff; border-left: 1px solid #652128; border-right: 1px solid #652128; }
div#headerWrap h1 { width: 100%; height: 232px; margin: 0 auto; background: url('common/webzine_tit.jpg') center center no-repeat; }
div#headerWrap h1 img { display: none;}

ul.gnbUtil { position: absolute; top: 50px; right: 40px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
    width: 60px; gap: 10px; }
ul.gnbUtil li a { display: block; width: 56px; height: 56px; text-indent: -9999px; border-radius: 10px;
    background-repeat: no-repeat; background-size: contain; background-position: center; background-color: #e6e9fe; background-size: 47px auto; }
ul.gnbUtil li.list a { background-image: url('common/btn_list.png');}
ul.gnbUtil li.home a { background-image: url('common/btn_home.png');  }
ul.gnbUtil li.menu a { background-image: url('common/btn_menu.png'); }
ul.gnbUtil li.sponsor a { background-image: url('common/btn_sponsor.png'); }

div.gnbWrap { display: none; z-index: 10; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.65); }
div.gnbWrap .list-close { position: absolute; right: 10px; top: 0; display: block; width: 36px; height: 36px; transform: translate(0,-50%); 
    border: 1px solid #dddddd; border-radius: 50%; text-indent: -9999px; background: #fff url('common/btn_close.png')no-repeat center / 15px auto; }
div#gnb { position: relative; max-width: 1000px; margin: 130px auto 0; }
div#gnb ul { overflow-y: auto; height: 100%; max-height: calc(100vh - 180px); padding: 10px 30px; background-color: #fff; }
div#gnb li a { display: block; padding: 15px 0; border-top: 1px dashed #a0a7c6; font-size: 2.4rem; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div#gnb li:first-child a { border-top: none; }

div#gnb ul::-webkit-scrollbar { overflow: hidden; width: 10px; }
div#gnb ul::-webkit-scrollbar-track {background-color: #fff; border-left: 1px solid #c7dadd; }
div#gnb ul::-webkit-scrollbar-thumb { background-color: #5f5f5f; }

div#footerWrap { position: relative; padding: 40px 50px; border-left: 1px solid #2d3083; border-right: 1px solid #2d3083; background-color: #373b4a;
        font-weight: 300; color: #fff; }
div#footerWrap strong { display: block; font-weight: 600; }


/* 메인 */
h3.con-tit { /*padding-bottom: 10px;*/ border-bottom: 2px solid #9b2a51; color:#9b2a51; font-size:2rem; font-weight: 600; }
h3.con-tit-point { border-bottom: 2px solid #af2b24; color:#af2b24;  }
h3.con-tit-spon {font-size:3rem;}
h3.con-tit ~ h3.con-tit { margin-top: 20px; }
div.mainCon { padding: 20px 0; }
div.mainCon .inner { display: flex; justify-content:space-between; align-items: stretch; padding: 20px 20px 20px 0; border-bottom: 1px solid #dddddd; }
div.mainCon .inner.border-none { border-bottom: 0; }
div.mainCon .img-wrap { /*width: 150px;*/ width: 100px; border: 1px solid #dddddd; border-radius: 5px; }
div.mainCon .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
div.mainCon .text-wrap { /*width: calc(100% - 170px);*/ width: calc(100% - 115px); display: flex; flex-direction: column; /*justify-content: space-between;*/ }
div.mainCon .subject { font-weight: 400;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/*div.mainCon .writer { font-size: 1.6rem; font-weight: 300; text-align: right; color: #565656; }*/
div.mainCon .writer { font-size: 1.4rem; font-weight: 300; color: #565656; }

div.mainCon ul.col1 { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; }
div.mainCon ul.col1 a { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #dddddd; }
div.mainCon ul.col1 .inner-wrap { display: flex; justify-content: space-between; align-items: flex-start; }
div.mainCon ul.col1 .text { padding-top: 20px; }
div.mainCon ul.col1 .inner { display: block; min-width: 170px; }
div.mainCon ul.col1 .img-wrap { width: 100%; }
div.mainCon ul.col1 .text-wrap { width: 100%; }

div.mainCon ul.col2 { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; }
div.mainCon ul.col2 > li { position: relative; width: calc(50% - 15px); }
div.mainCon ul.col2 > li.type1 .inner { padding: 30px 20px 30px 0; }
div.mainCon ul.col2 > li.type2 .inner { padding: 35px 20px 35px 0; }

div.mainCon ul.col2 .sponsor { display: flex; justify-content: center; align-items: center; flex-direction: column; width: calc(50% + 20px); padding: 30px 40px; 
    margin-right:-40px; margin-bottom: -20px; border-radius: 70px 0 0 0; background: url('common/sponsor_bg.png')no-repeat center / cover; }
div.mainCon .sponsor h3.con-tit { padding-bottom: 0; border-bottom: 0; text-align: center; }
div.mainCon .sponsor h3.con-tit span { box-shadow: inset 0 -15px 0 #fecbcb; }
div.mainCon .sponsor ul { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; margin-top: 20px; }
div.mainCon .sponsor li { width:49%; height: 60px; margin-top:10px; background-color: #fff; }
div.mainCon .sponsor li a { display: block; width: 100%; height: 100%; }
div.mainCon .sponsor li img { max-width: 100%; height: 100%; object-fit: cover; margin: 0 auto; display: block;}

/* 서브 레이아웃*/
div#container.sub { font-family: 'NanumSquare', sans-serif; }
.sub .sub-tit { padding-left: 50px; background:url('common/ic_sub_tit.png')no-repeat left top; font-weight: 800; font-size: 2.8rem; }
.sub .titArea { display: flex; justify-content: space-between; align-items: center; margin:15px 0 25px; padding: 35px; 
    background-color: #eef1f5; border-radius: 5px; }
.sub .titArea:has(img) { align-items: flex-start; }
.sub .titArea > p { font-size: 2.2rem; font-weight: bold; }
.sub .titArea .profile { width: 320px; flex-shrink: 0; text-align: right; font-size:1.5rem; }
.sub .titArea .profile img { margin-bottom: 10px; }
.sub .titArea .profile p { font-weight: bold; }

.sub .contents > p { margin: 15px 0; font-size: 1.7rem; text-align: justify;}
.sub .contents strong { font-weight: 800; }
.sub .contents ol { padding-left: 30px; }
.sub .contents ol li { margin: 5px 0; list-style: auto; }
.sub .contents ol li::marker { font-weight: 800; }
.sub .img-wrap { margin: 50px 0; text-align: center; }
.sub .img-wrap.margin-none { margin: 0; }
.sub .img-wrap p { margin-top: 20px; color: #56585b; }
.sub .contents .img-wrap:last-child { margin-bottom: 0; }



table.tableDef { table-layout: fixed; width: 100%; border-collapse: collapse; border-right: 1px solid #d6d6d6; border-top: 1px solid #d6d6d6;
    font-size: 14px; word-break: break-all; }
table.tableDef th {  padding: 10px; border-left: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; vertical-align:middle; text-align: left; font-weight: 400; }
table.tableDef td { padding: 10px; border-left: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6;  vertical-align:middle; }
table.tableDef thead th { text-align: center; font-weight: 600; background-color: #eef1f5; }



/*  Mobile : ~ width: 960px  */
@media (max-width: 999px) { 
    /* layout */ 
    html, body { font-size: 8px; }
    div#container { padding: 0 20px; }
    .wrapper { width: auto; min-width: auto; margin:25px 20px; }
    .pcOnly { display: none !important; }

    .tabMenu li { padding: 10px 5px; font-size: 12px; border-radius: 5px 5px 0 0; }

    div#headerWrap { min-height: 80px; padding: 15px 20px 25px; }
    div#headerWrap h1 { height: auto; background: none; }
    div#headerWrap h1 img { display: block;  width: 100%; }

    ul.gnbUtil { position: static; width: auto; flex-wrap:nowrap; gap:10px; margin-top: 20px; }
    ul.gnbUtil li { width: 100%; }
    ul.gnbUtil li a { width: 100%; border-radius: 5px; background-size: 46px auto; }
    ul.gnbUtil li.list a { background-image: url('common/btn_list_m.png');}
    ul.gnbUtil li.home a { background-image: url('common/btn_home_m.png');  }
    ul.gnbUtil li.menu a { background-image: url('common/btn_menu_m.png'); }
    ul.gnbUtil li.sponsor a { background-image: url('common/btn_sponsor_m.png'); }

    div.gnbWrap { padding: 20px; }
    div.gnbWrap .list-close { width: 30px; height: 30px; background-size: 12px; }
    div#gnb { margin-top: 60px; }
    div#gnb ul { max-height: calc(100vh - 100px); }
    div#gnb li a { padding: 10px 0; font-size: 14px; }

    div#footerWrap { padding: 15px 20px; font-size: 12px; }

    /* 메인 */
    div.mainCon { padding: 10px 0; }
    div.mainCon .inner { padding: 10px 0 !important; }
    div.mainCon .img-wrap { width: 95px; min-height: 110px; }
    div.mainCon .text-wrap { width: calc(100% - 110px); }
    div.mainCon .writer { margin-top: 20px; }
    
    div.mainCon ul.col1 a { flex-direction: column; }
    div.mainCon ul.col1 .inner { min-width:auto; max-width: 130px; margin-right: 20px; }
    div.mainCon ul.col1 .text { padding-top: 0; padding-bottom: 10px; }
    div.mainCon ul.col1 .writer { margin-top: 10px; }
    div.mainCon ul.col1 .img-wrap { min-height: auto; }

    div.mainCon ul.col2 > li { width: 100%; }
    div.mainCon ul.col2:not(.margin-none) > li + li { margin-top: 20px; }

    div.mainCon ul.col2 .sponsor { width: calc(100% + 40px); padding: 30px 20px 20px; margin: 0 -20px -10px; border-radius: 30px 0 0; 
        background-image: url('common/sponsor_bg_m.png');}
    div.mainCon .sponsor ul { margin-top: 10px; }
    div.mainCon .sponsor li { height: 40px; }

    /**/
    .sub .sub-tit { padding-left: 35px; font-size: 16px; background-size: 24px auto; }
    .sub .titArea { flex-direction: column; padding: 15px; }
    .sub .titArea > p { font-size: 16px; }
    .sub .titArea .profile { width: 100%; max-width: none; margin-top:10px; font-size:12px; }
    .sub .titArea .profile img { width: 100px; }

    .sub .img-wrap { margin:25px 0; }

    
    .sub .contents { padding-bottom: 20px; }
}


dl.sponsortit > dt.diamond {
    background-color: #db384e;
}

dl.sponsortit > dt.royal {
    background-color: #845ac7;
}

dl.sponsortit > dt.plat {
    background-color: #3166bf;
}

@media screen and (max-width: 960px) {
    dl.sponsortit > dt {
		margin-top:20px;
        width: 90px;
        font-size: 10px;
        line-height: 20px;
    }
}

@media screen and (min-width: 961px) {
    dl.sponsortit > dt {
		margin-top:20px;
        width: 100px;
        font-size: 12px;
        line-height: 30px;
    }
p.btn {
        min-width: 150px;
        font-size: 20px;
        line-height: 63px;
        padding: 0 20px;
		margin-top:20px;
		
    }
}
dl.sponsortit > dt {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    color: #fff;
    font-family: 'Roboto-Medium', 'NotoSansKR Medium', sans-serif;
}


p.acronyms { font-size:14px; }

@media screen and (max-width: 960px) {
p.acronyms { font-size: 12px; }

h3.con-tit { letter-spacing: -0.8px; }

p.btn {
        min-width: 80px;
        font-size: 16px;
        line-height: 63px;
        padding: 0 10px;
		margin-top:20px;
		
    }
}

a.btnDef {
	background-color: #9b2a51;
    border-color: #9b2a51;
    color: #fff;
	padding: 10px 40px;
}