@charset "utf-8";
/* --------------------------------------------------
sub
----------------------------------------------------- */
#subCon { position: relative; padding-top: 170px; }
#subCon .visual { position: relative; }
#subCon .visual .outline { padding: 4rem 1rem; }
#subCon .visual h4 { position: relative; padding-bottom: 1rem; margin-bottom: 1.5rem; color: #222; font-size: clamp(20px, 2.19vw, 28px); text-align: left; }
/* #subCon .visual h4::after { position: absolute; content: ""; left: 0; bottom: 0; width: 4rem; height: 5px; background-color: #222; } */
#subCon .visual h4 .decobar { position: absolute; content: ""; left: 0; bottom: 0; display: inline-block; width: 4rem; height: 5px; background-color: #222; }
#subCon .visual h1 { text-align: left; word-break: keep-all; }
#subCon .visual figure { position: relative; width: 100%; height: 30rem; border-radius: 0; box-shadow: none; /* transform: translateY(50px); */ opacity: 1; visibility: visible; /* transition: all 1.4s cubic-bezier(0.76, 0, 0.24, 1); */ }
/* #subCon .visual.active figure {  transform: translateY(0); opacity: 1; } */
#subCon .visual figure img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }
#subCon > .sectionTop .outline { padding: 3rem 1rem 3rem; }
#subCon > .sectionTop figure { text-align: center; box-shadow: none; }
#subCon > .sectionTop figure img { max-width: 100px; }
#subCon > .sectionTop .authorWrap figure img { max-width: 150px; border-radius: 1rem; }
#subCon > .sectionTop .authorWrap h3 { position: relative; margin-bottom: 1rem; padding-bottom: 0.5rem; text-align: center; }
#subCon > .sectionTop .authorWrap h3::before { position: absolute; content: ''; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 2px; background-color: #222; }
#subCon > .sectionTop .authorWrap h4 { position: relative; text-align: center; }
#subCon .section { background-color: #f1f1f1; }
#subCon .section:nth-child(odd) { background-color: #fff; }
#subCon .section:nth-child(even) .clrBx { background-color: #fff; }
#subCon .section .outline,
#subCon .section .outline01,
#subCon .section .outline02,
#subCon .section .outline03 { padding: 3rem 1rem; }
#subCon .section.last { background-color: #fff; }
#subCon .section.last .sns { margin-bottom: 40px; text-align: center;  }
#subCon .section.last .sns li { display: inline-block; width: 50px; height: 50px; margin-right: 10px; margin-left: 10px; background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; }
#subCon .section.last .sns li:nth-child(1) { background-image: url(../img/common/bg_sns_twitter.png); }
#subCon .section.last .sns li:nth-child(2) { background-image: url(../img/common/bg_sns_facebook.png); }
#subCon .section.last .sns li:nth-child(3) { background-image: url(../img/common/bg_sns_katok.png); }
#subCon .section.last .sns li:nth-child(4) { background-image: url(../img/common/bg_sns_subscribe.png); }
#subCon .section.last .sns li a { display: block; height: 100%; }
#subCon .section.last .postLink { position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; gap: 1rem; }
#subCon .section.last .postLink li { padding: 0.5rem 0.75rem; width: calc(50% - 1rem / 2); background-color: #e6e6e6; transition: all .3s cubic-bezier(0.76, 0, 0.24, 1); }
#subCon .section.last .postLink li:hover { box-shadow: 8px 8px 15px rgba(0,0,0,.2); }
#subCon .section.last .postLink li.prev { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#subCon .section.last .postLink li.next { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
#subCon .section.last .postLink li a span { position: relative; display: block; padding-bottom: 10px; margin-bottom: 15px; font-size: 15px; font-family: 'PreGOV-Bo'; font-weight: 700; color: #000; }
#subCon .section.last .postLink li.next a span { text-align: right; }
#subCon .section.last .postLink li a span::after { position: absolute; content: ''; left: 0; bottom: 0; width: 20px; height: 3px; background-color: #333; }
#subCon .section.last .postLink li.next a span::after { left: auto; right: 0; }
#subCon .section.last .postLink li a p { font-size: clamp(17px, 1.56vw, 20px); font-family: 'PreGOV-Re'; font-weight: 400; }
#subCon .section.last .postLink li.next a p { text-align: right; }
#subCon .section.last .scrollTop { position: absolute; top: 0; right: 1rem; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; color: #fff; width: 2.25rem; height: 2.25rem; background-color: var(--secondClr1);  cursor: pointer; border-bottom-left-radius: 0.5rem; }
/* sub content ani */
#subCon section .fadeUp { transform: translateY(30px); opacity: 0; transition: all .5s cubic-bezier(0.76, 0, 0.24, 1); }
#subCon section .fadeUp.active { transform: translateY(0); opacity: 1; }
@media all and (max-width: 1024px){
    /* #subCon .visual h4::after { width: 3rem; height: 4px; } */
    #subCon .visual h4 .decobar { width: 3rem; height: 4px; }
    #subCon .visual figure { height: 24rem; }
}
@media all and (max-width: 768px){
    #subCon { padding-top: 100px; }
    #subCon .visual figure { height: 20rem; }
    #subCon .section.last .sns li { width: 35px; height: 35px; }
}
@media all and (max-width: 599px){
    #subCon .visual figure { height: 18rem; }
    #subCon > .sectionTop figure img { max-width: 80px; }
    #subCon > .sectionTop .authorWrap figure img { max-width: 100px; border-radius: 0.5rem; }
}

/* sublayout01 */
#subCon.sublayout01 .section h3 { position: relative; margin: 0 auto 1rem; padding: 0.25rem 1rem; color: #fff; text-align: center; width: 15rem; background-color: var(--defaultClr3); border-radius: 1rem; }
#subCon.sublayout01 .section .clrBx { padding: 3rem; }
#subCon.sublayout01 .section .clrBx h4 { text-align: center; }
#subCon.sublayout01 .section .date { position: relative; display: flex; flex-flow: row wrap; justify-content: center; gap: 1rem; }
#subCon.sublayout01 .section .linkBtnWrap { position: relative; display: flex; flex-flow: row wrap; justify-content: center; gap: 1rem; }
@media all and (max-width: 599px){
    #subCon.sublayout01 .section .clrBx { padding: 3rem 1rem; }
    #subCon.sublayout01 .section .date { gap: 0.5rem; }
}

/* 윤리, 지금 (sub02) */
#subCon.sublayout01.sub02 .section h2 { text-align: center; }

/* 윤리 네컷 (sub07) */
#subCon.sub07 .section .linkBtnWrap { justify-content: center; }
/* 행사 소식 (sub08) */
#subCon.sub08 .section .other01List { padding: 1rem; background-color: #ededed; border-radius: 0.75rem; border: 1px solid #d5d5d5; }
#subCon.sub08 .section .other01List li:last-child { margin-bottom: 0; }

/* 독자 의견 (sub09) */
#subCon.sub09 section.section.section01 ul { display: flex; flex-flow: column; justify-content: center; align-items: center; padding: 1rem; background-color: #ededed; border-radius: 0.75rem; border: 1px solid #d5d5d5; }
#subCon.sub09 section.section.section01 ul li { color: #444; }
#subCon.sub09 section.section.section02 ul li { color: #444; }
#subCon.sub09 section.section.section02 ol { display: flex; flex-flow: row wrap; gap: 1.5rem; justify-content: center; }
#subCon.sub09 section.section.section02 .numParent { padding: 1rem; background-color: #f1f1f1; border-radius: 0.75rem; border: 1px solid #ccc; }
#subCon.sub09 section.section.section02 h5 { padding: 1rem; background-color: transparent; border-radius: 0.75rem; border: 1px solid #ccc; }
/* #subCon.sub09 section.section a { transition: color .3s cubic-bezier(0.76, 0, 0.24, 1); }
#subCon.sub09 section.section a:hover { color: var(--secondClr1); }
#subCon.sub09 section.section.last a { transition: none; }
#subCon.sub09 section.section.last a:hover { color: inherit; }
#subCon.sub09 section.section.last a.scrollTop:hover { color: #fff; } */
#subCon.sub09 section.section.section03 h5,
#subCon.sub09 section.section.section03 h6 { text-align: center; }
#subCon.sub09 section.section.section03 ul { display: flex; flex-flow: column; justify-content: flex-start; }
#subCon.sub09 section.section.section03 ul li strong { display: inline-block; width: 6.5rem; }
#subCon.sub09 section.section.section03 .inBx { position: relative; display: flex; flex-flow: row wrap; gap: 1rem; }
#subCon.sub09 section.section.section03 .inBx .bx { width: calc(50% - 1rem / 2); padding: 1rem; background-color: #fff; border-radius: 0.75rem; border: 1px solid #d5d5d5; }
#subCon.sub09 section.section.section03 .inBx .bx ul li { font-size: 1rem; }
#subCon.sub09 section.section.section03 .inBx .bx ul li + li { margin-top: 0.5rem; }
@media all and (max-width: 599px){
    #subCon.sub09 section.section.section03 .inBx .bx { width: 100%; }
    #subCon.sub09 section.section.section03 .inBx .bx h6 { text-align: left; }
    #subCon.sub09 section.section.section03 .inBx .bx h6 br { display: none; }
}

/* 브리프스 구독 (sub10) */
#subCon.sub10 .clrBx { padding: 2rem; }
#subCon.sub10 .clrBx .linkBtnWrap { justify-content: center; }
#subCon.sub10 .clrBx .linkBtnWrap a { font-size: 1rem; text-transform: lowercase; }
#subCon.sub10 .inBx { margin: 0 auto; }
#subCon.sub10 .inBx h3 { text-align: center; font-size: clamp(21px, 3.44vw, 44px); }
@media all and (max-width: 599px){
    #subCon.sub10 .clrBx { padding: 1.2rem; }
}
/* ETC */
#subCon section.section a { transition: color .3s cubic-bezier(0.76, 0, 0.24, 1); }
#subCon section.section a:hover { color: var(--secondClr1); }
#subCon section.section.last a { transition: none; }
#subCon section.section.last a:hover { color: inherit; }
#subCon section.section.last a.scrollTop:hover { color: #fff; }