@charset "utf-8";
/* --------------------------------------------------
sub
----------------------------------------------------- */
/* *** Progress Bar *** */
#progressCon .progressBar { position: relative; display: block; height: 5px; width: 0%; background: linear-gradient(-45deg, #ee7752, #e73c73, #23a6d5, #23d5ab); background-size: 400% 400%; animation: back_ani 5s linear infinite; z-index: 10; }
@keyframes back_ani {
    0% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* sub header */
#container.sub { position: relative; padding-top: 94px; }
#container.sub #header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; }
#container.sub #subconWrap { position: relative; padding: 4rem 0; }

/* post tit area */
#subconWrap .outline { position: relative; margin: 0 auto; max-width: 1300px; }
#subconWrap .pageTitBx .cateTit { position: relative; padding-bottom: 1em; margin-bottom: 1.25em; font-size: clamp(20px, 1.458vw, 28px); font-family: 'PreGOV-Bo'; font-weight: 700; color: #444; line-height: 1; letter-spacing: -0.05em; }
#subconWrap .pageTitBx .cateTit::after { position: absolute; content: ""; left: 0; bottom: 0; width: 3rem; height: 4px; background-color: #444; }
#subconWrap .pageTitBx .postTit { font-size: clamp(30px, 3.646vw, 70px); font-family: 'SeoulAlrimExtraBold'; font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; }
#subconWrap .postVisual { position: relative; margin-top: 3rem; }
#subconWrap .postVisual picture { position: relative; display: block; }
#subconWrap .postVisual picture img { width: 100%; }
#subconWrap .pageDeco { position: relative; padding: 1rem 0; text-align: center; }
#subconWrap .pageDeco img { width: clamp(70px, 5.208vw, 100px); }

/* 본문 */
#subconWrap #subcon { position: relative; }
#subconWrap #subcon .outline { position: relative; margin: 0 auto; padding: 2rem 0; max-width: 1024px; }
#subconWrap #subcon .summary { padding: 2rem; background-color: #f5f5f5; }
#subconWrap #subcon .summary h3 { text-align: center; }
#subconWrap #subcon .summary h4 { margin-bottom: 1.5rem; text-align: center; }
#subconWrap #subcon .summary figure { position: relative; display: block; text-align: center; }
#subconWrap #subcon .summary figure img { width: 100%; }
#subconWrap #subcon .summary figure img.no01 { max-width: 240px; }
#subconWrap #subcon .summary figure img.no02 { max-width: 500px; }
#subconWrap #subcon .summary ul { margin: 0 auto; padding: 1rem; max-width: 700px; border: 1px solid #d5d5d5; }
#subconWrap #subcon .summary ul li { font-size: 1rem; font-family: 'PreGOV-Me'; font-weight: 500; }
#subconWrap #subcon .summary figure + ul { margin-top: 2rem; }
#subconWrap #subcon .summary ul + figure { margin-top: 2rem; }
#subconWrap #subcon section { padding: 1.5rem 1rem; }
#subconWrap #subcon section.bg { background-color: #f5f5f5; }
#subconWrap #subcon section.shareBx { position: relative; }
#subconWrap #subcon section.shareBx ol { position: relative; display: flex; justify-content: center; align-items: center; gap: 1rem; }
#subconWrap #subcon section.shareBx ol li { display: inline-block; width: 50px; height: 50px; background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; }
#subconWrap #subcon section.shareBx ol li:nth-child(1) { background-image: url(../img/common/bg_sns_twitter.png); }
#subconWrap #subcon section.shareBx ol li:nth-child(2) { background-image: url(../img/common/bg_sns_facebook.png); }
#subconWrap #subcon section.shareBx ol li:nth-child(3) { background-image: url(../img/common/bg_sns_katok.png); }
#subconWrap #subcon section.shareBx ol li:nth-child(4) { background-image: url(../img/common/bg_sns_subscribe.png); }
#subconWrap #subcon section.shareBx ol li a { display: block; width: 100%; height: 50px; }
#subconWrap #subcon .postLinkBx { position: relative; }
#subconWrap #subcon .postLinkBx .outline { padding: 0; }
#subconWrap #subcon .postLinkBx .outline ol { position: relative; display: flex; flex-flow: row nowrap; gap: 0.5rem; }
#subconWrap #subcon .postLinkBx .outline ol li { position: relative; padding: 0.75rem; width: calc(50% - 0.5rem / 2); overflow: hidden; background-color: #e5e5e5; }
#subconWrap #subcon .postLinkBx .outline ol li::before { position: absolute; content: ""; left: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 20px 0px 0px 20px; border-color: transparent transparent transparent #fff; }
#subconWrap #subcon .postLinkBx .outline ol li.next::before { right: 0; left: auto; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0px 0px 20px 20px; border-color: transparent transparent #fff transparent; }
#subconWrap #subcon .postLinkBx .outline ol li a { display: block; font-family: 'PreGOV-Bo'; font-weight: 700; color: #000; text-align: left; }
#subconWrap #subcon .postLinkBx .outline ol li.next a { text-align: right; }
#subconWrap #subcon .postLinkBx .outline ol li a span { position: relative; display: block; padding-bottom: 0.25rem; margin-bottom: 0.25rem; font-size: 0.9rem; font-family: 'PreGOV-Bo'; font-weight: 700; color: #333; text-align: left; width: 100%; line-height: 1; }
#subconWrap #subcon .postLinkBx .outline ol li a span i { transform: rotate(45deg); }
#subconWrap #subcon .postLinkBx .outline ol li.next a span { text-align: right; }
#subconWrap #subcon .scrollTop { position: absolute; right: 1rem; bottom: 0; transform: translateY(50%); display: flex; justify-content: center; align-items: center; font-size: 1.4rem; color: #fff; width: 2.25rem; height: 2.25rem; background-color: #E64D24; cursor: pointer; border-bottom-left-radius: 0.5rem; opacity: 0; visibility: hidden; transition: opacity 0.3s; z-index: 80; }
#subconWrap #subcon .scrollTop.fixed { position: fixed; bottom: 1.5rem; right: 1rem; opacity: 1; visibility: visible; }
#subconWrap #subcon .scrollTop.at_home { position: absolute; opacity: 1; visibility: visible; }

/* context style */
#subconWrap #subcon h2,
#subconWrap #subcon h3,
#subconWrap #subcon h4,
#subconWrap #subcon h5,
#subconWrap #subcon h6 { margin-bottom: 0.5em; }
#subconWrap #subcon p + p { margin-top: 1em; }
#subconWrap #subcon p + p { margin-top: 1em; }
#subconWrap #subcon p + div { margin-top: 1em; }
#subconWrap #subcon .innerBox + .innerBox { margin-top: 3em; }
#subconWrap #subcon .innerBox + p { margin-top: 2em; }
.expertWrap { position: relative; }
.expertWrap figure { display: block; margin-bottom: 1em; text-align: center; }
.expertWrap figure img { max-width: 150px; border-radius: 0.5em; }
.expertWrap h4 { position: relative; font-size: clamp(26px, 1.667vw, 32px); font-family: 'PreGOV-Bo'; font-weight: 700; text-align: center; }
.expertWrap .deco { margin-bottom: 0.5em; font-size: 1.4em; text-align: center; line-height: 1; }
.expertWrap h6 { margin-bottom: 1.5em !important; font-size: 1.1rem; text-align: center; }
.expertWrap p { padding: 0 1em; text-align: center; }
@media all and (max-width: 1024px){
    #container.sub { padding-top: 72px; }
    #container.sub #subconWrap { padding: 3rem 0 4rem; }
    #subconWrap .postVisual { margin-top: 2rem; }
}
@media all and (max-width: 767px){
    #subconWrap #subcon .summary { padding: 2rem 1rem; }
    #subconWrap #subcon section.shareBx ol li { width: 40px; height: 40px; }
    #subconWrap #subcon .postLinkBx .outline ol li::before { border-width: 15px 0px 0px 15px; }
    #subconWrap #subcon .postLinkBx .outline ol li.next::before { border-width: 0px 0px 15px 15px; }
    .expertWrap figure img { max-width: 120px; }
    #subconWrap #subcon section.shareBx ol li a { height: 40px; }
}

/* post detail */
/* post 02 */
.post02 #subconWrap #subcon .post02QuBx { position: relative; display: inline-block; margin-bottom: 0.5em; padding: 0 1.5rem; font-size: clamp(22px, 1.458vw, 28px); font-family: 'PreGOV-Bo'; font-weight: 700; color: var(--secondClr1); line-height: 1.4em; border: 3px solid var(--secondClr1); border-radius: 1.5rem; }
.post02 #subconWrap #subcon h5 { position: relative; font-size: clamp(21px, 1.25vw, 24px); color: var(--secondClr1); }
.post02 #subconWrap #subcon h5 + .post02AnBx { margin-top: 1em; }
.post02 #subconWrap #subcon .post02AnBx { position: relative; display: inline-block; margin-bottom: 0.5em; padding: 0 1.5rem; font-size: clamp(22px, 1.458vw, 28px); font-family: 'PreGOV-Bo'; font-weight: 700; color: #000; line-height: 1.4em; border: 3px solid #000; border-radius: 1.5rem; }
.post02 #subconWrap #subcon h6 { font-size: clamp(19px, 1.146vw, 22px); }

/* post 04 */
.post04 #subconWrap #subcon figure.cartoon { position: relative; margin-bottom: 2rem; }
.post04 #subconWrap #subcon figure.cartoon img { width: 100%; }
.post04 #subconWrap #subcon P { text-align: center; }
.post04 #subconWrap #subcon .linkBtnWrap { justify-content: center; }

/* post 05 */
.post05 #subconWrap #subcon .GMBold02 { text-align: center; }
.post05 #subconWrap #subcon h5.GMBold04 { position: relative; padding-bottom: 1.5em; text-align: center; }
.post05 #subconWrap #subcon h5.GMBold04::after { position: absolute; content: "\ea1d"; left: 50%; transform: translateX(-50%); bottom: 0; font-size: 0.85em; color: #E64D24; font-family: xeicon !important; }
.post05 #subconWrap #subcon h5.GMBold04 + .inBx { margin-top: 2em; }
.post05 #subconWrap #subcon .newBox + .newBox { margin-top: 2rem; }
.post05 #subconWrap #subcon .inBx { position: relative; padding: 2rem 1.5rem; border-radius: 0.7rem; background-color: #f5f5f5; }
.post05 #subconWrap #subcon .bg .inBx { background-color: #ffff; }
.post05 #subconWrap #subcon .inBx h6 { font-size: clamp(20px, 1.25vw, 24px); text-align: center; }
.post05 #subconWrap #subcon .inBx p + .date { margin-top: 2em; }
.post05 #subconWrap #subcon .inBx .date { font-family: 'PreGOV-Bo'; font-weight: 700; text-align: center; }
.post05 #subconWrap #subcon .inBx .date + .linkBtnWrap { margin-top: 0.5rem; }
.post05 #subconWrap #subcon .inBx .linkBtnWrap { justify-content: center; }
@media all and (max-width: 767px){
    .post05 #subconWrap #subcon .inBx { padding: 1.5rem 1rem; }
}

/* post 06 */
.post06 #subconWrap #subcon .inBx { padding: 2rem 1.5rem; background-color: #f5f5f5; border-radius: 0.7rem; }
.post06 #subconWrap #subcon .bg .inBx { background-color: #fff; }
.post06 #subconWrap #subcon .inBx h3 { font-size: clamp(23px, 1.563vw, 30px); text-align: center; }
.post06 #subconWrap #subcon .inBx p + .other01List { margin-top: 1rem; }
.post06 #subconWrap #subcon .inBx .other01List { padding: 1rem; background-color: #fff; border-radius: 0.5rem; }
.post06 #subconWrap #subcon .bg .inBx .other01List { background-color: #f5f5f5; }
@media all and (max-width: 767px){
    .post06 #subconWrap #subcon .inBx { padding: 1.5rem 1rem; }
}

/* post 07 */
.post07 #subconWrap #subcon .summary { border-radius: 0.75rem; }
.post07 #subconWrap #subcon .summary h3.GMBold04 { margin-bottom: 1em; }
.post07 #subconWrap #subcon .summary h6.colBolTit04 { margin-bottom: 1em; text-align: center; line-height: 1.3; }
.post07 #subconWrap #subcon .summary .numCircle { display: flex; flex-flow: column; justify-content: center; align-items: center; margin-bottom: 2em; }
.post07 #subconWrap #subcon .GMBold04 { text-align: center; color: var(--secondClr1); }
.post07 #subconWrap #subcon .numParent { padding: 1rem; background-color: #fff; }
.post07 #subconWrap #subcon .numParent + h6 { margin-top: 0.5em; padding-left: 1rem; }
.post07 #subconWrap #subcon h6 + p { margin-top: 2em; text-align: center; }
.post07 #subconWrap #subcon p + ol { margin-top: 1em; }
.post07 #subconWrap #subcon ol { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; gap: 1.5em; }
.post07 #subconWrap #subcon .allBx { position: relative; padding: 1rem; border-radius: 0.5rem; background-color: #f5f5f5; }
.post07 #subconWrap #subcon .allBx h4 { text-align: center; }
.post07 #subconWrap #subcon .allBx .box2n1 .bx { padding: 1rem; background-color: #fff; border-radius: 0.5rem; }
.post07 #subconWrap #subcon .allBx .box2n1 .bx h5 { text-align: center; }
.post07 #subconWrap #subcon #subscribe .subscription { padding: 2rem 1rem; background-color: #fff; border-radius: 0.75rem; }
.post07 #subconWrap #subcon #subscribe .subscription h6 { text-align: center; }
.post07 #subconWrap #subcon #subscribe .subscription .linkBtnWrap { justify-content: center; }
.post07 #subconWrap #subcon #subscribe .subscription .linkBtnWrap + figure { margin-top: 1rem; }
.post07 #subconWrap #subcon #subscribe .subscription figure + ul { margin-top: 2rem; }
.post07 #subconWrap #subcon #subscribe .subscription ul { position: relative; display: flex; flex-flow: row wrap; justify-content: center; gap: 1rem 1.5rem; padding: 0 3rem; }
.post07 #subconWrap #subcon #subscribe .subscription ul li { font-size: clamp(19px, 2.19vw, 28px); line-height: 1; }
@media all and (max-width: 767px){
    .post07 #subconWrap #subcon .box2n1 .bx { width: 100%; }
}
@media all and (max-width: 599px){
    .post07 #subconWrap #subcon #subscribe .subscription ul { gap: 0.8rem 1.2rem; padding: 0 0; }
}
@media all and (max-width: 480px){
    .post07 #subconWrap #subcon .summary .numCircle { align-items: flex-start; }
}