@charset "utf-8";


@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@font-face {
    font-family: 'KOROADB';
    src: url('../font/KOROAD_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'KOROADB';
    src: url('../font/KOROAD_Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'KOROADB';
    src: url('../font/KOROAD_Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'TTSamlipCreamyWhiteR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-4@1.0/TTSamlipCreamyWhiteR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RixXladywatermelonR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-4@1.0/RixXladywatermelonR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* css reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	vertical-align: baseline;
    color: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
}
:focus {outline: none;}


sub, sup {font-size: 1em;}


/*초기 설정*/
html {
   --news_color : #c270d7;
   --culture_color : #ff5959;
   --family_color : #5884f3;
   --tv_color :#e6456b;
   --talk_edu_color : #ec7322;
   --wave_color: #125ecf;
   font-size: 10px;
   color: #222;
}

* {
	font-family: 'KOROADB';
	word-break: keep-all;
}

b {font-weight: 600;}

/* 텍스트 컬러 및 폰트 class  */
.ff_pret {font-family: 'Pretendard' !important;}
.ff_ko {font-family: 'KOROADB' !important;}
.ff_sc {font-family: 'TTSamlipCreamyWhiteR' !important;}
.ff_wm {font-family: 'RixXladywatermelonR' !important;}


/*공통css*/
.flx1 {display: flex; flex-flow: row wrap;}
.flx2 {display: flex; flex-flow: column wrap;}
.inner {width: 100%; max-width: 1710px; margin: 0 auto;}

img {max-width: 100%;}

.show-800 {display: none;}
.show-500 {display: none;}

@media (max-width:1710px) {
    .inner {padding: 0 2%;}
}

@media (max-width:1400px) {
    html {font-size: 9px;}
    .inner {padding: 0 4%;}

}

@media (max-width:1080px) {
    html {font-size: 8px;}
}


@media (max-width:800px) {
    html {font-size: 7px;}
    .show-800 {display: block;}
}

@media (max-width:500px) {
    .show-500 {display: block;}
}


/* 헤더 */
header {position: fixed; top:0; left: 0; width: 100%; z-index: 999; transition: all 0.3s; background: rgba(255,255,255,0.6);}
header.f-nav2 {top: -10rem; }
header.f-nav {background: #fff;}

.header_t {width: 100%; justify-content: space-between; align-items: center; height: 100px;}
.header_t .logo {width: 190px;}
.header_t .logo a {font-size: max(28px,3.6rem); font-weight: 700; line-height: 1.2; color: #301a60;}
.header_t .logo a span {font-size: max(14px,1.6rem); font-weight: 700; color: #000;}

.header_t .pc-menu {width: calc(100% - 380px); max-width: 880px; justify-content: space-between;}
.header_t .pc-menu > li {position: relative;}
.header_t .pc-menu > li > a {font-size: 2rem; padding-bottom: 1.5rem; font-weight: 700;}
.header_t .pc-menu ul {position: absolute; top:calc(100% + 1.5rem); left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.8); display: none; z-index: 997; width: 20rem; padding: 1.5rem 0;}
.header_t .pc-menu ul li {font-size: 1.9rem; text-align: center; padding: 0.5rem 0;}
.header_t .pc-menu ul li:hover a {color: #301a60;}

.header_t .etc {width: 190px; justify-content: flex-end;}
.header_t .webzine_list img {width: 3rem; margin-right: 1.5rem;}
.header_t .webzine_list > li {position: relative;}
.header_t .webzine_list > li > a {align-items: center; font-size: 2rem; font-weight: 700; padding: 0 2rem;}
.header_t .webzine_list ul {position: absolute; top:calc(100% + 1.5rem); left:0; width: 100%; background: #000; overflow: hidden; height: 0;  z-index: 99;}
.header_t .webzine_list > li.on ul {height: max-content;  padding: 1rem 0;}
.header_t .webzine_list ul li {text-align: center; padding: .75rem 0; color: #fff;}
.header_t .webzine_list ul li a {font-size: max(13px,1.6rem);}
.header_t .webzine_list ul li:hover {font-weight: 700;}

.header_t .mo_menu_btn {display: none; cursor: pointer; margin-left: 3rem;}
.header_t .mo_menu_btn img {width: 5rem;}

.header_t .mo_menu {position: fixed; top:0; right:0; z-index: 999; width: min(440px,80%); height: 100%; background: #fff; transform: translateX(100%);transition: all 0.2s;}
.header_t .mo_menu.on {transform: translateX(0);}
.header_t .mo_menu .top {text-align: right; padding:4% 10%; border-bottom: 1px solid #c4c4c4; justify-content: space-between; align-content: center;}
.header_t .mo_menu .home-btn {width: 49px; }
.header_t .mo_menu .close-btn {cursor: pointer; display: flex; align-items: center; width: 30px; display: flex;}
.header_t .mo_menu .menu { padding:7% 10%; }
.header_t .mo_menu .menu > li {margin-bottom: 6%;}
.header_t .mo_menu .menu > li > a {display: inline-block; font-size: min(34px,6.3vw);}
.header_t .mo_menu .menu ul {display: none; margin-top: min(15px,6%);}
.header_t .mo_menu .menu ul li a  {display: inline-block; font-size: 2.8rem; font-weight: 700; padding: 3.5% 0;}
.header_t .mo_menu .link {position: absolute; bottom:4%; padding: 0 10%; width: 100%; gap: 20px;}
.header_t .mo_menu .link a {padding: 5% 0; background: #f3f3f3; border: 1px solid #e1e1e1; border-radius: 10px; justify-content: center;     align-items: center; width: calc(50% - 20px); max-width: 140px;}
.header_t .mo_menu .link .subscribe img {width: 78px;}
.header_t .mo_menu .link .youtube img {width: 45px;}
.header_t .mo_menu .link p {font-size: 2.4rem; margin-top: 1rem; font-weight: 700; text-align: center;} 

.header_t .bg {position: fixed; top:0; left:0; z-index: 998; width: 100%; height: 100%; background: rgba(0,0,0,0.4); visibility: hidden; opacity: 0; transition: all 0.2s;}
.header_t .bg.on {visibility: visible; opacity: 1;}
@media (max-width:1480px) {
    .header_t  {padding: 1.5em 2%;}
}
@media (max-width:1280px) {
}
@media (max-width:1080px) {
    .header_t  {padding: 1.5em 4%;}
    .header_t .pc-menu {display: none;}
    .header_t .logo {width: auto;}
    .header_t .etc {width: max-content; align-items: center;}
    .header_t .mo_menu_btn {display: block;}
}
@media (max-width:800px) {
    .header_t {height: 80px;}
    .header_t .mo_menu_btn {margin-left: 2em;}
    
}

/*플로팅 메뉴*/
.ft_menu {position: fixed; right:2%; top:75%; transform: translateY(-50%); z-index: 99; align-items: center;}
.ft_menu a { align-items: center; justify-content: center;}
.ft_menu .subscribe div {width: 13rem; justify-content: center; align-items: center;}
.ft_menu .subscribe p {font-size: 1.7rem; font-weight: 700;}
.ft_menu .top_btn {margin-top: 2rem;}
.ft_menu .top_btn a {width: 6rem; height: 6rem; border-radius: 50%; background: #fff; border: 2px solid #000;}
.ft_menu .top_btn a img {width: 70%; margin-bottom: .5rem;}
@media (max-width:800px) {
    .ft_menu {display: none;}
}

/* 푸터 */
footer * {font-family: 'Pretendard'; color: #fff;}
footer {padding: 5rem 0 ; background: #32186c;}
footer .ft_logo {width: 17%;}
footer .txt {width: calc(83% - 25rem); padding-left: 5%; margin-top: 8px;}
footer .txt p {font-size: 1.8rem; line-height: 2;}
footer .txt p br {display: none;}
footer .txt p span {margin: 0 1rem;}
footer .txt p:last-child {font-weight: 300; color: #8b8b8b;}

footer .family_site {justify-content: flex-end;}
footer .family_site_list > li {border:1px solid #fff;}
footer .family_site_list li {font-size: 1.8rem; position: relative; line-height: 5rem;  cursor: pointer; align-items: center; }
footer .family_site_list li p {padding: 0 3rem; border-right: 1px solid #fff;}
footer .family_site_list li img {padding: 0 1.5rem; transition: all 0.2s;}
footer .family_site_list li.up  img {transform: scale(1,-1);}
footer .family_site_list ul {position: absolute; top:-1px; left: 0; transform: translateY(-100%); width: 100%; border:1px solid #fff; border-bottom: 0; background: #333; display: none;}
footer .family_site_list ul li {padding-left: 3rem; font-size: 1.6rem; transition: all 0.2s;}
footer .family_site_list ul li:hover {background: #919191;}

@media (max-width:1400px) {
    footer .ft_logo {width: 20%;}
    footer .txt {width: calc(80% - 25rem); padding-left: 3%;}
}

@media (max-width:1080px) {
    footer .inner {justify-content: space-between; align-items: center;}
    footer .family_site {order:2;}
    footer .family_site_list li p {padding: 0 2rem;}
    footer .family_site_list ul li {padding-left: 2rem;}
    footer .family_site_list li img {padding: 0 1rem; width: 4rem;}
    footer .ft_logo {width: min(190px,40%); order: 1;} 
    footer .txt {width: 100%; padding-left: 0; order: 3; margin-top: 3%;}
}
@media (max-width:800px) {
    footer .txt p br {display: block;}
    footer .txt p span:first-of-type {margin-left: 0;}
}