@charset "utf-8";
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/PretendardVariable.woff') format('woff-variations'), url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-7ExtraBold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-5Medium.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-4Regular.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

:root {
    --blue: #2441ad;
    --dark: #0e0e0e;
    --dark-11: #111111;
    --dark-22: #222222;
    --dark-33: #333333;
    --dark-66: #666666;
    --lightsky: #e5faff;
    --sky: #a2cffc;
    --deepsky: #00a5d6;
    --vividsky: #03d3ff;
    --emerald: #00f0dc;
    --yellow: #ffe788;
    --pink: #ff9fac;
    --violet: #4a33e6;

}

.bg_blue {background-color: var(--blue)!important;color:#fff}
.bg_sky {background-color: var(--sky)!important}
.bg_lightsky {background-color: var(--lightsky)!important}
.bg_sky {background-color: var(--sky)!important}
.bg_deepsky {background-color: var(--deepsky)!important}
.bg_emerald {background-color: var(--emerald)!important}
.bg_yellow {background-color: var(--yellow)!important}
.bg_pink {background-color: var(--pink)!important}
.bg_violet {background-color: var(--violet)!important;color:#fff}

body, html {margin: 0 auto;font-size: 16px;letter-spacing: -0.5px;font-family: 'Pretendard Variable';}
html {
    scroll-behavior: smooth
  }
body {overflow-x:hidden;background: url(../images/bg_main.png);background-repeat:no-repeat;background-size:cover;}


*:focus-visible {outline:dotted 2px red!important;outline-offset: -2px}

ul, ol {text-indent: 0;padding:0}
li {list-style: none}
caption { overflow: hidden; position: relative; left: 0; top: 0; width: 1px; height: 1px; background: 0 0; font-size: 0; color: transparent; line-height: 0; text-indent: 100%;}
h1,h2,h3,h4,h5,h6{margin:0;line-height: 1}
button {background: transparent;border:0;cursor: pointer;vertical-align: middle;white-space: nowrap;border-radius: 6px}
a {color: inherit; text-decoration: none}
a:hover {text-decoration: underline}

main {width:100%;display:flex;justify-content: center;}
* {box-sizing: border-box}
.container {max-width: 1440px;width:100%;padding:0 20px;display:flex;flex-direction: row;gap:60px;}
body.type2 {background:transparent;overflow:hidden}
body.type2 .container {gap: 20px}



img {max-width: 100%;height:auto}
.text_center {text-align: center!important}
.text_left {text-align: left!important}
.text_right {text-align: right!important}


.m-br {display: none}
.t-br {display: block}

@media (max-width:768px) {
    .m-br {display: block}
.t-br {display: none}
}

/*aside*/
aside {padding: 0;display: flex;flex-direction: column;gap:30px;align-items: center;padding-bottom:20px}
.aside_logo {width:100%;max-width:340px;height: 223px; border-radius: 0 0 80px 80px;display: flex;background: #fff;align-items: center;justify-content: center;margin:0;padding:50px;box-shadow: 15px 45px 45px rgba(0,0,0,0.1)}
.header_mo {display: none}
.aside_go {position:relative}
.aside_go svg {position: absolute;left:0;top:0;z-index: -1;filter: drop-shadow(30px 30px 30px rgba(0,0,0,0.15))}
.aside_go svg path {fill:#fff;}

/*content*/
#content {width:100%;max-width:1000px;border: solid 9px #f4f4fc; border-radius: 75px; background: #f4f4fc;display: flex;flex-direction:row;align-items: center;justify-content: center;margin: 20px 0;position: relative;}

/*스마트폰 버튼 모양 장식*/
.content_deco_area {position:absolute;left:-13px;top:120px;display: flex;flex-direction: column;gap:30px;align-items: start;justify-content: start}
.content_deco {width:4px;background:#e8e8f0;border-radius: 6px 0 0 6px;}
.content_deco.short {height:35px}
.content_deco.long {height:55px}

/*본문 영역*/
.content_area {border: solid 6px #efeff7;width:100%;box-shadow: 6px 6px 0px #f4f4fc; border-radius: 60px; background: #fff;display: flex;flex-direction:row;align-items: start;justify-content: center;position: relative;}

.content_section {width:50%;padding:30px;}
.content_article {margin-bottom: 30px;position: relative;}

.content_article:last-of-type {margin-bottom:0}

.content_title {width:100%;display: flex;justify-content: space-between;margin-bottom:10px}
.content_title h2 {font-weight: 900;font-size: 21px; color:var(--dark);line-height:1;}
.content_title h2 span {font-weight: inherit; font-size: inherit; color: var(--blue);position: relative;padding-left:20px}
.content_title h2 span:before {position: absolute;left:0;top:0;line-height:21px;text-align:center;content:'·';width:16px;font-size:30px;color:inherit}

a.content_title:hover {text-decoration: underline}

.content_quick {display: flex;flex-direction: row;gap:8px;width:100%;margin:0}
.content_quick li {color: var(--dark-33); border-radius: 12px;flex:1 1 0;display: flex;flex-direction: column;}
.content_quick li a {width:100%;height:100%;display:flex;flex-direction:column;gap:10px;align-items: center;justify-content: start;text-align: center;line-height: 1.2;font-weight: 500;padding: 15px 0;border-radius: inherit}
.content_quick li a img {flex-grow: 0}

.content_board {display: flex;flex-direction: column;gap:0;width:100%;margin:0}
.content_board li {height:36px; line-height:36px;border-bottom: solid 1px #e6e6e6; width:100%;text-overflow: ellipsis; -webkit-line-clamp: 1;white-space:nowrap;overflow: hidden;;font-size:15px
}

.content_board.narrow li {height: 36px;line-height: 36px;vertical-align: middle}
.content_board.narrow li a {display:block;font-size:15px}
.content_board li:first-child {border-top: solid 1px #e6e6e6}

.content_input_area {display: flex;flex-direction: row;gap: 8px;margin-bottom:10px}
.content_input {min-width:0;width:100%;border:solid 1px #adadad; border-radius: 6px; height: 30px; color: #707070; font-size: 14px;padding: 0 10px}
select.content_input {-webkit-appearance:none; -moz-appearance:none; appearance:none; background:url('../images/content_input_select_icon.png') no-repeat right center;min-width:100px}
select.content_input::-ms-expand{display:none;}
.content_button {min-width:68px;font-weight: 500}

.content_more {font-size: 14px;color:#626262;display: flex;align-items:center;line-height: 1;gap:5px}

.content_table {overflow: auto;height:100%;max-height:296px;}
.content_table table {border:0;width:100%;border-collapse: collapse; }
.content_table table th, .content_table table td {border: solid 1px #acacac; margin:0; padding: 10px 5px}
.content_table table th {background-color:var(--lightsky);font-weight: 600;text-align: center;font-size:14px}
.content_table table td {font-size:13px}
.content_table table * {word-break: keep-all;word-wrap: break-word}
.content_table table td a:hover {text-decoration: underline}

.content_label {display:inline-block; height: 22px; white-space: nowrap; width:80px;line-height: 22px; font-size:13px;border-radius: 22px;padding: 0 12px;text-align: center;}
.content_label.narrow {padding:0;width:68px;font-size:15px;color:#fff;font-weight: 500;margin-right:8px}

.content_links {text-align: right;display: flex;align-items: center;justify-content: end;align-self: end; gap: 5px; padding-right: 20px}

/*swiper*/
.content_article .swiper {overflow: hidden;}
/*260413 최종*/
.content_article.content_swiper_type1 img {width:100%;text-align: center}
.content_article.content_swiper_type2 {overflow: hidden}
.content_article.content_swiper_type2 .swiper {overflow: visible;}
.content_article.content_swiper_type2 .swiper-slide {width:260px;height:178px;box-sizing: border-box;overflow:hidden}
.content_article.content_swiper_type2 .swiper-slide a {overflow:hidden;height:100%;display:flex;align-items:center}
.content_article.content_swiper_type2 .swiper-slide.magazine a {align-items:start}
/*260413*/

.content_article .pagination {display: inline-block;font-size:15px;font-family: 'S-CoreDream';font-weight: 400; color:var(--dark-66);}
.content_article .swiper-pagination-current {font-weight: 700;color:var(--dark-11)}
.content_article .delimeter {font-weight: 300;color: #ccc;font-size: 13px;font-family: 'Pretendard Variable';padding: 4px;}
.content_article .controls {display: flex;flex-direction:row;gap:8px;justify-content: center}
.content_article .controls button, .controls a {flex-grow: 0; flex-shrink: 0;line-height: 1}
.content_article .controls button {padding: 0}
.content_article .content_article.content_swiper_type2 .controls {gap:5px}

.swiper_title {display:none}
.swiper_title h3 {font-size:20px;letter-spacing: -2px}
.swiper_title h3 span {color: var(--blue)}
.swiper_title .content_links {padding-right:0!important;gap:2px}
.fold {display:none}

@media (min-width: 1351px) {
    #content {position: relative;}
    .fold {display:flex;flex-grow:0;position: absolute;left:50%;transform:translate(-50%, -0%);top:-8px;height:calc(100% + 16px);width:max-content;z-index: 1;pointer-events: none!important}
}

@media (max-width: 1350px) {
    .container {gap: 20px;max-width:auto}
    .content_area {flex-direction: column}
    .content_section {width: 100%;}
    #content{max-width: calc(100% - 340px)}

}

@media (max-width: 1100px) {
    body {background: #6e7ff2 url()}
    .container {flex-direction: column;padding: 0;gap:0}
    aside,.content_deco_area {display: none}
    header {flex-direction: row;background: #2541ae url(../images/header_mo_bg.png); background-repeat: no-repeat; background-size:cover; background-position: center bottom;;padding:0;height:160px;display: flex;align-items: center;justify-content:center;width: 100%;}
    .header_mo {width:100%;max-width:420px;text-align: center;height:160px;display:flex;align-items: center;justify-content: center;position: relative;}

    .header_mo_character, .header_mo_go {position: absolute;top:0}
    .header_mo_character {left:0}
    .header_mo_go {right:-40px;top:25px}

    .header_mo h1 {font-size: 27px;color: #fff;}
    .header_mo h1 span { font-size:50px;color:#ffde00;font-weight: 900}
    #content{width:100%;max-width: 100%;background:transparent;border:0;border-radius: 0;padding: 10px 0}
    .content_area {box-shadow: none;background: transparent;border:0;padding:0}
    .content_section {padding: 0 15px}
    .content_section.right {padding-top: 30px}
    .content_article {background: #fff; border-radius: 20px; padding: 30px 25px;margin-bottom:30px;box-shadow: 15px 45px 45px rgba(0,0,0,0.1)}
    .content_quick {margin-bottom: 0}
}

@media (max-width: 768px) {
    .content_article { padding: 30px 15px;}
    .content_article.content_swiper_type1 .swiper-slide img {width:100%}
}

@media (max-width: 578px) {
    #content {margin-bottom: 0;padding-bottom: 0}
    .content_article.content_swiper_type2 .content_title .content_links {display: none}
    .content_article.content_swiper_type2 {background-image: linear-gradient(to right, #333ea7, #3437a5, #3530a3, #3728a1, #3a1e9e);margin: 0 -30px;border-radius: 0;padding:30px 45px}
    .content_article.content_swiper_type2 h2 {color: #fff}
    .content_article.content_swiper_type2 h2 span {color:var(--vividsky)}
    .content_article.content_swiper_type2 .swiper-slide {background: #fff; padding: 20px 15px 15px 15px!important; border-radius: 12px!important}
    .content_article.content_swiper_type2 .swiper-slide {height: 100%;}
    .content_article.content_swiper_type2 .swiper-slide img {width:100%;height:220px;}
    .swiper_title {display: flex;align-items: center;justify-content: space-between;margin-bottom:20px;overflow: hidden;word-break: keep-all;word-break:break-word}
}

@media (max-width: 440px) {
    .content_quick {flex-direction: column}
    .content_quick li a {flex-direction: row; padding: 12px 10px}
    .content_quick li a br {display: none}
    .swiper_title .content_links {height: 40px;align-items: end}
}

@media (max-width: 400px) {
    .header_mo {justify-content: start;text-align: left}
    .header_mo h1 {padding-left: 20px}
    .header_mo_character {display: none}

    .header_mo_go {right:-45px;}

}

/*type2 기존 홈페이지 레이어팝업형*/
.mini_layer_trigger {position:absolute;top:0;left:0}



/* Chrome, Whale, Edge */

/* 스크롤바 전체 기본 꾸미기 */
body::-webkit-scrollbar {
    display:none;
    width: 5px;
    height:20px;
}

/* 스크롤바 막대 꾸미기 */
body::-webkit-scrollbar-thumb {
    background: #fff; /* 스크롤바 막대 색상 */
    width:5px;
    border-radius:2px;

}

/* 스크롤바 트랙 꾸미기 */
body::-webkit-scrollbar-track {
	background: transparent; /* 스크롤바 뒷 배경 색상 */
    width: 12px;
}