@charset "utf-8";
/* 공통영역 */
body.bg {position: relative;}
body.bg::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 99;}
header, section, footer {width: 100%; position: relative;}
.inHeader,.container {position: relative; width: 84%; margin: 0 auto;}
.inHeader {padding-left: 1.2rem; box-sizing: border-box;}
.container {z-index: 2;}
/* contWrap */
.contWrap {background-color: var(--yellow);}
/* contArea */
.contArea {position: relative; background-color: var(--white); background-repeat: no-repeat; padding: 7rem 0 13.5rem 0; border-top-right-radius: 180px; overflow: hidden; box-shadow: -2px 20px 20px rgba(0, 0, 0, 0.8);}

/* header */
header {background: var(--yellow);}
header::before {content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 0; background: var(--yellow); opacity: 0.7; z-index: 10;}
header.on::before {height: 7.2rem;}
header .topHeader {padding: 1.2rem 0; background: #30302c;}
header .topHeader .inHeader {display: flex; justify-content: space-between; align-items: center;}
header .topHeader .userMenu {display: flex; align-items: center; gap: 3.6rem;}
header .topHeader .userMenu li {position: relative;}
header .topHeader .userMenu li:not(:last-of-type)::before {content: ''; position: absolute; top: 0.3rem; right: -1.8rem; width: 0.1rem; height: 1.2rem; background: #dbd8ba;}
header .topHeader .userMenu li a {font-size: 1.5rem; color: var(--white);}
header .mdHeader {padding: 3.5rem 9.5rem 1.7rem 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.63); box-sizing: border-box;}
header .mdHeader .rightMenu {position: relative; display: flex; align-items: center; gap: 5.5rem;z-index: 11;}
header .mdHeader .rightMenu li {position: relative;}
header .mdHeader .rightMenu li:not(:last-of-type)::before {content: ''; position: absolute; top: 0; right: -2.7rem; width: 0.1rem; height: 6.6rem; background: rgba(255,255,255,0.58);}
header .mdHeader .rightMenu li a {display: flex; align-items: center; gap: 1.7rem;}
header .mdHeader .rightMenu li a .text {font-size: 1.7rem; letter-spacing:-0.05em; font-weight:500}
header .mdHeader .rightMenu li a .text p {margin-bottom: 1rem; line-height: 1.2;}
header .mdHeader .rightMenu li a .text img {transition: all 0.3s;}
header .mdHeader .rightMenu li a:hover .text img {transform: translateX(0.5rem);}
header .mdHeader .rightMenu li:first-child .text span {color: var(--blue);}
header .mdHeader .rightMenu li:nth-child(2) .text span {color: var(--purple);}
header .mdHeader .moMenu {display: none;}
header .btHeader {position: relative; display: flex; align-items: center; justify-content: space-between; padding-right: 11.5rem; box-sizing: border-box;}
header .btHeader .nav {display: flex;}
header .btHeader .nav>li {padding: 3.5rem 6rem 2.8rem 0; box-sizing: border-box;}
header .btHeader .nav>li a {display: flex; align-items: center; gap: 1.1rem; font-size: 2rem; font-weight: 700; }
header .btHeader .nav>li:hover a {color: var(--pink);}
header .btHeader .nav>li .dept2 {position: absolute; top: 8.7rem; left: 0; width: 100%; display: none; gap: 3.3rem; padding: 2.5rem 0; z-index: 99;}
header .btHeader .nav>li:hover .dept2 {display: flex;}
header .btHeader .nav>li .dept2 a {font-size: 1.8rem; color: #222; font-weight: 500;}
header .btHeader .nav>li .dept2 a:hover {color: #222222; text-decoration: underline;}
header .btHeader .reporterMenu {position: relative; z-index: 11; display: flex; align-items: center; gap: 4rem;}
header .btHeader .reporterMenu li a {display: block; position: relative; font-size: 1.7rem;font-weight:500; letter-spacing:-0.05em;padding-right: 1.7rem; box-sizing: border-box;}
header .btHeader .reporterMenu li a::before {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url('/kids/images/layout/report_menu_arr.png') no-repeat; width: 0.7rem; height: 0.9rem; transition: all 0.3s;}
header .btHeader .reporterMenu li a:hover::before {right: -0.5rem;}
header .bugiImg {position: absolute; right: -7.5rem; bottom: -1.6rem; z-index: 10;}
header .bugiImg a {display: block;}
header .bugiImg img.on {display: none;}
header .bugiImg:hover img.on {display: block;}
header .bugiImg:hover img.off {display: none;}

/* 독자 캐릭터 */
header .bugiImg.user a {position: relative;}
header .bugiImg.user a::before {content: ''; position: absolute; right: -0.8rem; top: 1rem; background: url('/kids/images/layout/boogi_check.png') no-repeat; background-size: 100%; width: 10.6rem; height: 9.8rem; z-index: -1;}
header .bugiImg.user a img {width: 19rem;}
header .moMenuWrap {display: none;}

/* moSubWrap */
.moSubWrap {display: none;}

/* footer */
footer {background: #3e3c3c; padding: 3.5rem 0 5rem 0;}
footer .container {display: flex; justify-content: space-between; align-items: flex-start;}
footer .leftFt .logo {display: block; margin-bottom: 2.8rem;}
footer .leftFt p {font-size: 1.6rem;}
footer .leftFt p.address {color: var(--white); margin-bottom: 1.2rem;}
footer .leftFt p.copyright {color: #c0c0c0;}
footer .rightFt {flex-shrink: 0; display: flex; gap: 3.6rem;}
footer .rightFt li {position: relative;}
footer .rightFt li:not(:last-of-type)::before {content: ''; position: absolute; top: 2px; right: -1.8rem; width: 1px; height: 1.2rem; background: #888888;}
footer .rightFt a {font-size: 1.5rem; color: var(--white);}

/* 반응형 */
@media screen and (max-width: 1600px) {
    /* header */
    header .btHeader .nav>li {padding-right: 4rem;}
}

@media screen and (max-width: 1400px) {
    /* 공통영역 */
    .inHeader, .container {width: 100%; padding: 0 5rem; box-sizing: border-box;}
    .inHeader {padding-left: 5rem;}
    /* contArea */
    .contArea {border-top-right-radius: 105px;}

    /* header */
    header .bugiImg {right: 0.5rem;}
    header .bugiImg.user {right: 1rem;}
    header .mdHeader {padding-right: 13.5rem;}
    header .btHeader {padding-right: 13.5rem;}
}

@media screen and (max-width: 1280px) {
    /* 공통영역 */
    .inHeader, .container {padding: 0 3rem;}

    /* header */
    header.on::before {height: 6.6rem;}
    header .btHeader .nav>li {padding-right: 3rem;}
    header .btHeader .nav>li a {font-size: 1.8rem;}
    header .btHeader .nav>li .dept2 a {font-size: 1.8rem;}
    header .btHeader .reporterMenu {padding-top: 0.5rem;}

    /* footer */
    footer .rightFt {width: 50%; flex-wrap: wrap; row-gap: 1.5rem;}
}

@media screen and (max-width: 1025px) {
    /* 공통영역 */
    body {background: #49c0ff; overflow-y: scroll;}
    body.on {overflow-y: hidden;}
    .inHeader {padding: 0 5rem;}
    .container {padding: 0 2.5rem;}
    /* contArea */
    .contArea {padding: 5rem 0 0 0; border-top-right-radius: 80px; box-shadow: none;}

    /* header */
    header .topHeader, header .mdHeader .rightMenu, header .btHeader, header .bugiImg {display: none;}
    header.blogHeader .topHeader {display: block;}
    header .mdHeader {border-bottom: none; padding: 3.5rem 0;}
    header .mdHeader .moMenu {display: block; width: 3.4rem; height: 2.7rem; border: none; background: url('/kids/images/layout/mo_menu.png') no-repeat; background-size: 100%; font-size: 0; cursor: pointer;}
    header .moMenuWrap {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow-y: scroll; z-index: 999; background: var(--white);}
    header .moMenuWrap.on {display: block;}
    header .moMenuWrap .moMenuTop {padding: 4rem 4rem 1.5rem 5rem; box-sizing: border-box; background: var(--yellow);}
    header .moMenuWrap .moMenuTop .logoArea {display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;}
    header .moMenuWrap .moMenuTop .logoArea .btnArea {display: flex; align-items: center; gap: 2.2rem;}
    header .moMenuWrap .moMenuTop .logoArea .btnArea a {font-size: 0;}
    header .moMenuWrap .moMenuTop .userArea {display: flex; align-items: center; gap: 7rem;}
    header .moMenuWrap .moMenuTop .userArea .userImg {width: 13.7rem; height: 13.7rem; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #f8f09e;}
    header .moMenuWrap .moMenuTop .userArea .userImg img {display: block; width: 100%; height: 100%; object-fit: cover;}
    header .moMenuWrap .moMenuTop .userArea .userList {display: flex; gap: 7rem;}
    header .moMenuWrap .moMenuTop .userArea .userList li a {display: flex; flex-direction: column; align-items: center; gap: 0.5rem;}
    header .moMenuWrap .moMenuTop .userArea .userList li.logOut .in {display: none;}
    header .moMenuWrap .moMenuTop .userArea .userList li.logIn .out {display: block;}
    header .moMenuWrap .moMenuTop .userArea .userList li a span {font-size: 1.6rem;}
    header .moMenuWrap .moMenuArea {padding: 3rem 2rem; box-sizing: border-box;}
    header .moMenuWrap .moMenuArea .applyList {display: flex; gap: 2.8rem; margin-bottom: 3.5rem;}
    header .moMenuWrap .moMenuArea .applyList li {width: calc(50% - 1.4rem);}
    header .moMenuWrap .moMenuArea .applyList li a {display: block; padding: 2.2rem 4rem; box-sizing: border-box; border-radius: 32px; font-size: 1.8rem; background: url('/kids/images/layout/apply_arr.png') right 30px center no-repeat #ebe9eb;}
    header .moMenuWrap .moMenuArea .moNav .dept1:not(:last-of-type) {margin-bottom: 6rem;}
    header .moMenuWrap .moMenuArea .moNav .dept1>a {display: flex; align-items: center; gap: 2rem; font-size: 2.6rem; width: 100%; padding: 2.2rem 4rem; box-sizing: border-box; border-radius: 32px; margin-bottom: 3.8rem;}
    header .moMenuWrap .moMenuArea .moNav .dept1>a[data-menu="1"] {background: #dde8ff; color: #217abf;} 
    header .moMenuWrap .moMenuArea .moNav .dept1>a[data-menu="2"] {background: #f9e4c5; color: #d25f13;} 
    header .moMenuWrap .moMenuArea .moNav .dept1>a[data-menu="3"] {background: #e5f0e4; color: #2b9d22;} 
    header .moMenuWrap .moMenuArea .moNav .dept1>a[data-menu="4"] {background: #e8c9d5; color: #f5317c;} 
    header .moMenuWrap .moMenuArea .moNav .dept2 {padding: 0 4rem; box-sizing: border-box; display: flex; flex-wrap: wrap; row-gap: 2.4rem;}
    header .moMenuWrap .moMenuArea .moNav .dept2 li {width: 50%;}
    header .moMenuWrap .moMenuArea .moNav .dept2 a {display: block; position: relative; font-size: 1.8rem; padding-left: 2.3rem; box-sizing: border-box;}
    header .moMenuWrap .moMenuArea .moNav .dept2 a::before {content: ''; position: absolute; left: 0; top: 0.8rem; width: 0.9rem; height: 0.3rem; background: #171312;}

    /* moSubWrap */
    .moSubWrap {display: block; position: sticky; bottom: 0; width: 100%; padding: 1.5rem 1rem; box-sizing: border-box; background: rgba(255,255, 255, 0.9); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 7px rgba(0,0,0,0.09); z-index: 99;}
    .moSubWrap .moSubBox {position: relative; display: flex; justify-content: space-around; gap: 18rem;}
    .moSubWrap .moSubBox .menu {display: flex; gap: 13rem;}
    .moSubWrap .moSubBox .menu a {display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
    .moSubWrap .moSubBox .menu a img.moImg {display: none;}
    .moSubWrap .moSubBox .menu a .tit {font-size: 1.6rem; font-weight: 600; color: #222222; margin-top: 1.3rem;}
    .moSubWrap .moSubBox .check {position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);}
    .moSubWrap .moSubBox .check .img .imgArea {width: 12.4rem; height: 12.4rem; overflow: hidden; border-radius: 50%; background: #f6e53f;}
    .moSubWrap .moSubBox .check .imgArea img {width: 100%; object-fit: cover;}
    .moSubWrap .moSubBox .check .img {position: relative;}
    .moSubWrap .moSubBox .check .img .assets {position: absolute; top: 4.4rem; right: -3rem;}
    .moSubWrap .moSubBox .check .tit {position: absolute; bottom: -2rem; left: 50%; transform: translateX(-50%); width: 12.5rem; border-radius: 18px; background: #524f64; color: var(--white); font-size: 1.6rem; font-weight: 600; padding: 1rem 0; text-align: center;}
    
    /* footer */
    footer {padding: 3.7rem 0 2.7rem 0;}
    footer .container {padding: 0 0 0 7.5rem;}
    footer .leftFt p {font-size: 1.4rem;}
    footer .rightFt {display: none;}
}

@media screen and (max-width: 768px) {
    /* 공통영역 */
    .inHeader {padding: 0 4rem;}
    /* contArea */
    .contArea {border-top-right-radius: 30px; padding:3rem 0 0 0}
	

    /* header */
    header .mdHeader .logo img, header .moMenuWrap .moMenuTop .logoArea .logo img {width: 20rem;}
	header .mdHeader{padding:2.5rem 0;}
    header .moMenuWrap .moMenuTop {padding: 3rem 3rem 1.5rem 3rem;}
    header .moMenuWrap .moMenuTop .userArea {gap: 4rem;}
    header .moMenuWrap .moMenuTop .userArea .userImg {width: 11rem; height: 11rem;}
    header .moMenuWrap .moMenuTop .userArea .userList {gap: 3rem;}
    header .moMenuWrap .moMenuTop .userArea .userList li a span {font-size: 1.5rem;}
    header .moMenuWrap .moMenuArea .moNav .dept2 {padding: 0 3rem;}

    /* moSubWrap */
    .moSubWrap .moSubBox {gap: 14rem;}
    .moSubWrap .moSubBox .menu {gap: 7rem;}

    /* footer */
    footer .container {padding: 0 4rem;}
}

@media screen and (max-width: 640px) {
    /* moSubWrap */
    .moSubWrap .moSubBox {gap: 16rem;}
    .moSubWrap .moSubBox .menu {gap: 3.4rem;}
}

@media screen and (max-width: 480px) {
    /* 공통영역 */
    .inHeader {padding: 0 2.5rem;}
    .container {padding: 0 2rem;}

    /* header */
    header .mdHeader .logo img,
    header .moMenuWrap .moMenuTop .logoArea .logo img {width: 16rem;}
    header .mdHeader .moMenu {width: 2.8rem; height: 2.3rem;}
    header .moMenuWrap .moMenuTop {padding: 3rem 2.5rem 1.5rem 2.5rem;}
    header .moMenuWrap .moMenuTop .logoArea .btnArea {gap: 1.5rem;}
    header .moMenuWrap .moMenuTop .userArea .userImg {display: none;}
    header .moMenuWrap .moMenuTop .userArea .userList {width: 100%;}
    header .moMenuWrap .moMenuArea .applyList {flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem;}
    header .moMenuWrap .moMenuArea .applyList li a {padding: 1.8rem 2.5rem; background-position: right 25px center !important; font-size: 1.6rem;}
    header .moMenuWrap .moMenuArea .moNav .dept1:not(:last-of-type) {margin-bottom: 4rem;}
    header .moMenuWrap .moMenuArea .moNav .dept1>a {padding: 1.8rem 2.5rem; margin-bottom: 2.5rem; font-size: 2.2rem; gap: 1.4rem;}
    header .moMenuWrap .moMenuArea .moNav .dept2 {padding: 0 2rem; row-gap: 1.8rem;}
    header .moMenuWrap .moMenuArea .moNav .dept2 li {width: 100%;}
    header .moMenuWrap .moMenuArea .moNav .dept2 a {font-size: 1.6rem;}

    /* moSubWrap */
    .moSubWrap {padding: 1.5rem 1rem;}
    .moSubWrap .moSubBox {gap: 8rem;}
    .moSubWrap .moSubBox .menu {gap: 2rem;}
    .moSubWrap .moSubBox .menu a img {width: 2rem;}
    .moSubWrap .moSubBox .menu a img.pcImg {display: none;}
    .moSubWrap .moSubBox .menu a img.moImg {display: block;}
    .moSubWrap .moSubBox .menu a .tit {font-size: 1.3rem; white-space: nowrap;}
    .moSubWrap .moSubBox .check .img .imgArea {width: 8rem; height: 8rem;}
    .moSubWrap .moSubBox .check .img .assets {display: none;}
    .moSubWrap .moSubBox .check .tit {width: 7rem; padding: 0.8rem 0; font-size: 1.3rem; bottom: -2rem;}

    /* footer */
    footer .container {padding: 0 2.5rem;}
    footer .leftFt p.address {margin-bottom: 1rem;}
    footer .leftFt p {line-height: 1.2;}
}

@media screen and (max-width: 320px) {
    /* moSubWrap */
    .moSubWrap .moSubBox .menu {gap: 0.5rem;}
}