@charset "utf-8";

@import url(../common.css);


@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

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

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

@font-face {
    font-family:'Pretendard';
    src: url(../font/Pretendard-SemiBold.woff) format('woff');
    font-style:normal;
    font-weight: 600;
}

@font-face {
    font-family:'Pretendard';
    src: url(../font/Pretendard-Bold.woff) format('woff');
    font-style:normal;
    font-weight: 700;
}

@font-face{
    font-family:'MICEGothic';
    src:url(../font/MICEGothic.eot) format('embedded-opentype'),
        url(../font/MICEGothic.woff) format('woff'),
        url(../font/MICEGothic.woff2) format('woff2');
    font-style:normal;
    font-weight:400
}

@font-face{
    font-family:'MICEGothic';
    src:url(../font/MICEGothic\ Bold.eot) format('embedded-opentype'),
        url(../font/MICEGothic\ Bold.woff) format('woff'),
        url(../font/MICEGothic\ Bold.woff2) format('woff2');
    font-style:normal;
    font-weight:700
}


html {height:100%;display:block;font-size:10px;} /* 62.5% //scroll-behavior: smooth;*/

/* reset */
* {margin:0; padding:0;outline:none !important;-moz-outline: none !important;box-sizing:border-box;}
*:before, *:after {box-sizing:initial}

html,body{width:100%;height:100%;min-height:100vh;-moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
body {position: relative; -webkit-text-size-adjust:none;word-break:break-all;font-size:18px;line-height:1.6;color:#000;background:#fff;font-family: 'Pretendard', "맑은고딕","Malgun Gothic",sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0;font-weight:300;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
fieldset,img{border:none;vertical-align:top}
dl,ul,ol,menu,li {list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
input,select,textarea,button{font-size:100%;vertical-align:middle;box-sizing:border-box}
input, select,textarea {font-family:'Pretendard',Sans-serif;-moz-appearance: none;appearance: none;-webkit-appearance:none;border-radius:0;border: none;}
button{border:none;cursor:pointer;font-family:'Pretendard',"맑은고딕","Malgun Gothic",sans-serif}
small{font-size:92%}
table{border-spacing:0;border-collapse:collapse;width:100%;table-layout:fixed}
body{-webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: subpixel-antialiased;font-smooth:always;text-shadow:0 0 1px rgba(0,0,0,0.1);    background: #fafafa;}/*transform: rotate(-0.0000000001deg);*/
input:checked[type='checkbox']{background-color:#666;}
input[type='submit'],input[type='reset'],input[type='file'] {border-radius:0;}
input[type='number'],input[type='tel'],input[type='date'],textarea,select {border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
textarea:focus {outline:none}
a {color:inherit;text-decoration:none;outline:none;}
/* a:active,a:hover{text-decoration:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}  아이폰 스크립트 오류때문에 제거*/
address,caption,cite,code,dfn,em,var,i{font-weight:normal;font-style:normal}
legend{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;line-height:0;white-space:normal;word-wrap:break-word;word-break:break-all;clip:rect(0,0,0,0)}
caption{overflow:hidden;width:1px;height:1px;margin-top:-1px;padding:0;font-size:1px;line-height:0;color:transparent;white-space:nowrap;text-overflow:ellipsis;text-indent:-999px}
caption.blind{position:static;margin:-1px 0 0;}
caption.blind:before{display:none}
caption .blind{position:static}
caption .blind:before{display:none}
strong{font-weight:600;}
div,p,span,li, a, button{box-sizing:border-box;}
pre{white-space:pre-wrap; font-family:'MICEGothic', '맑은 고딕', 'Malgun Gothic', sans-serif;}
.ui-btn, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {box-shadow:none;}
.progress, .progress-success .bar, .progress .bar-success, .progress-warning .bar, .progress .bar-warning, .progress-danger .bar, .progress .bar-danger, .progress-info .bar, .progress .bar-info, .btn, .btn-primary {background-image:none;}

input::-moz-placeholder{color:#888888;font-size:1.5rem}
input:-moz-placeholder{color:#888888;font-size:1.5rem}
input::-webkit-input-placeholder{color:#888888;font-size:1.5rem}
textarea::-moz-placeholder{color:#888888;font-size:1.5rem}
textarea:-moz-placeholder{color:#888888;font-size:1.5rem}
textarea::-webkit-input-placeholder{color:#888888;font-size:1.5rem}

/* 대체 텍스트 */
.blind {position:absolute; width:1px; height:1px; overflow:hidden; margin:-1px; -webkit-clip-path:polygon(0 0, 0 0, 0 0); clip-path:polygon(0 0, 0 0, 0 0); font-size:0; line-height:0;}



/* color */
.text_dark3 {color:#333 !important;}
.text_dark5 {color:#555 !important;}
.yellow {color:#EAB932 !important;}
.bg_pink {padding:0 2px;color:#333;background:#FFE3EE;}
.bg_yellow {padding:0 2px;color:#333;background:#FFF9C5;}
.bg_white {padding:0 2px;color:#222;background:#fff;}
.bg_purple {padding:0 2px;color:#222;background:#ccd4ff;}
.bg_blue {padding:0 2px;color:#222;background:#d6eeff;}
.bg_green {padding:0 2px;color:#222;background:#E5FEBC;}

/* font */
.fw400 {font-weight:400;}
.fw500 {font-weight:500;}
.fw600 {font-weight:600;}
.lh1 {line-height:1;}
.lh12 {line-height:1.2;}
.lh13 {line-height:1.3;}
.lh14 {line-height:1.4;}

/* col,text style */
.img_box {text-align:center;}
.txt_desc {font-size:16px;margin-top:10px;color:#747774;text-align:left;}
.txt_desc.up {margin:0 0 8px;}
.txt_desc.center {text-align:center;}
.txt_desc.right {text-align:right;}
.txt_desc.left {text-align:left;}
.col_box {display:flex;}
.col_box.end {align-items:end;}
.col_box.center {align-items:center;}
.col_box .col {width:50%;}
.col_box .col ~ .col {margin-left:20px;}
.col_box .col.txt  {text-align:left;}
.col_box .col.img  {text-align:center;}
.col_box.gap15 .col ~ .col {margin-left:15px;}
.dflex {display:flex;}
.flex_justify {display:flex;justify-content:center;}
.items_center {align-items:center;}
.mtm1 {margin-top:-25px;}
.mtm2 {margin-top:-15px;}
@media only all and (max-width:767px) {
    .col_box {display:block;text-align:center;}
    .col_box .col {width:100%;}
    .col_box .col ~ .col {margin:30px 0 0;}
	.col_box.gap15 .col ~ .col {margin:30px 0 0;}
    .txt_desc {text-align:center;font-size:14px;}
	.txt_desc.right {text-align:center;}
	.txt_desc.left {text-align:center;}
	.img_box .txt_desc {text-align:center;}
	.mtm1 {margin-top:-5px;}
	.mtm2 {margin-top:-5px;}
}

/* video */
.video_wrap {height:454px;}
@media only all and (max-width:767px) {
	.video_wrap {position:relative;width:100%;height:0;padding-bottom:56.25%;}
	.video_wrap iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
}

/*title*/
.htit2{font-size: 32px;font-weight: 600;}
.htit3{font-size: 24px;font-weight: bold;}
@media only all and (max-width:767px) {
.htit2{font-size: 22px;}
.htit3{font-size: 18px;}	
}

/* table */
.tbl_type {width:100%;border:1px solid #EBEBEB;}
.tbl_type > thead > tr > th,.tbl_type > tbody > tr > th {height:48px;padding:14px 10px;color:#333;font-weight:600;border-bottom:1px solid #EBEBEB;background-color:#FDF7EF;}
.tbl_type > tbody > tr > td {height:48px;padding:10px 10px;color:#333;background-color:#fff;border:1px solid #EBEBEB;}
.tbl_type > tbody > tr > th {height:48px;padding:10px 10px;color:#333;font-weight:600;border:1px solid #EBEBEB;}
.tbl_type.center > tbody > tr > td {text-align:center;}
.tbl_type .center {text-align:center;}
.tbl_type .left {text-align:left !important;}
.tbl_type .num {font-size:10px;}
.tbl_type.type2 {border:1px solid #6E48B1;}
.tbl_type.type2 > thead > tr > th,.tbl_type.type2 > tbody > tr > th {height:50px;padding:11px 10px;color:#fff;background-color:#6E48B1;border:1px solid #8C6AC8;}
.tbl_type.type2 > tbody > tr > td ul.bl li{display: block;margin: 0.1em 0;}
.tbl_type.type2 > tbody > tr > td ul.bl li::before {content: '·';margin-right: 0.25em;}
.tbl_type.type2 > tbody > tr > td {border-left:0;}
.tbl_type.type2 > tbody > tr > td:last-child {border-right:0;}
.tbl_type.type2 > tbody > tr:last-child > td {border-bottom:0;}
.tbl_type.type2 > tbody > tr:first-child > td {border-top:1px solid #6E48B1;}
.tbl_type.type2 .th01 {padding:20px 20px;font-size:18px;}
@media only all and (max-width:767px) {
	.tbl_type > thead > tr > th {height:auto;padding:8px;font-size:14px;line-height:normal;}
	.tbl_type > tbody > tr > td {height:auto;padding:8px;font-size:14px;}
	.tbl_type > tbody > tr > th {height:auto;padding:8px;font-size:14px;}
	.tbl_type.type2 .th01 {padding:10px;font-size:16px;}
}

/* sub01_01 */
.sub01_01 .bg_line {background:#F4E4FF;color:#000;}
.bl2{ display: block;}
.bl2 ul{display: flex;margin: 0.1em 0;}
.bl2 li::before{content: '·';margin-right: 0.25em;}

.gnb{ display: block;}
.list_type1{display: flex;flex-direction: row; align-items: center;  background: #F7F5FF; padding: 32px;}
.list_type1 .item:nth-child(1) {flex-shrink: 0;width: 140px; margin-right:30px;}
.list_type1 .item:nth-child(2) {flex-grow: 1;}
.list_type1 img{width:auto;}
.list_type1 dl{height:auto;}
.list_type1 dt{font-size:24px; font-weight: 600;}
.list_type1 dd{font-size:18px;}
.list_type1 dd{display: flex;margin: 0.1em 0;}
.list_type1 dd::before {content: '·';margin-right: 0.25em;}
@media only all and (max-width:1024px) {
.list_type1{display:block;}
.list_type1 img{width:30%;}
.list_type1 .item:nth-child(1) {flex-shrink: 0;width: 100%;}
.list_type1 dt{font-size:22px; }
.list_type1 dd{font-size:16px;}
}
@media only all and (max-width:767px) {
.list_type1 .item{ width: 100%; text-align: center;}	
.list_type1 img{width:60%;}
.list_type1 dl{ text-align: left;;}
}

h3.title{font-size: 24px;font-weight:800;text-align: center;}
.box_list{justify-content: space-between;display: flex; margin-top: 20px;}
.box_bg,.box_line{display: flex;width: 256px;height: 256px; align-items: center;justify-content: center;}
.box_bg{background: #2D399D; }
.box_bg .box_s dl{text-align: center;color:#fff;}
.box_bg .box_s dt{font-size: 20px; font-weight: 700;}
.box_line{background: #fff;border:1px solid #2D399D;}
.box_line .box_s dl{text-align: center; color:#333;}
.box_line .box_s dt{font-size: 20px; font-weight: 700;}

@media only all and (max-width:1024px) {
.box_list{display: flex; width: 100%;justify-content: center; margin-top: 20px;}
.box_bg,.box_line{align-items: center; width: 50%; margin-bottom: 10px;}
}
@media only all and (max-width:767px) {
.box_list{display:block;}
.box_bg,.box_line{width: 100%;}
}

.won_box{justify-content: flex-start;display: flex; align-items: center;margin-top: 20px; background: #fff;border-top-left-radius:500px;border-bottom-left-radius: 500px;}
.won_box .won:nth-child(1) {flex-shrink: 0;width: 160px; margin-right:30px;}
.won_box .won:nth-child(2) {flex-grow: 1;}
.won_box dl{height:auto;align-items: center; padding-right: 20px;}
.won_box dt{font-size:20px;font-weight:700;}
.won_box dd{display: flex;margin: 0.1em 0;font-size:18px;}
.won_box dd::before {content: '·';margin-right: 0.25em;}
.won_box img{width:auto;}
.won_box .won{display: flex;width: 160px;height: 160px; align-items: center;justify-content: center;}
@media only all and (max-width:1024px) {
.won_box {display: block;width: 100%;border-radius: 0px; padding: 20px;}
.won_box .won{display: flex;justify-content: center;width:100%!important; height: auto;}
.won_box .won img{margin-bottom: 10px; width: 30%;}
.won_box dl{height:auto;align-items: center; padding-right: 20px;}
.won_box dt{font-weight: 600;}
.won_box dd{display: flex;margin: 0.1em 0;font-size:16px;}	
}
@media only all and (max-width:767px) {
.won_box .won img{width: 40%!important;}
}

.text_storng{font-size: 24px; color: #7A1793; font-weight: 800; text-align: center; margin-top: 100px;}
@media only all and (max-width:1024px) {
.text_storng{font-size: 20px; margin-top: 60px;}
}
@media only all and (max-width:767px) {
.text_storng{font-size: 17px; margin-top: 50px;}
}


/* sub01_02 */
.qa{ background: #443E8C;padding: 10px;border-radius: 100px;align-items: center;}
.qa .q_icon{ background: #fff;}
.qa .item{display: flex; color: #fff;align-items: center;font-weight: bold;font-size: 24px;}
.qa .q_icon{width: 52px;height: 52px; color: #443E8C;font-weight: bold;border-radius: 50px;margin-right: 0.5em; text-align: center; align-items: center;padding-top: 0.25em;}
@media only all and (max-width:767px) {
.qa .item{font-size: 16px;}
.qa .q_icon{width: 42px;height: 42px;margin-right: 0.3em;padding-top: 0.5em;}}

.list_box4{justify-content: space-between;display: flex;}
.list_box4 .box4_bg{ display: block;}
.list_box4 .box4_bg .box_s img{ width: 200px; height: 200px;}
.list_box4 .box4_bg dl{text-align: center;color:#2D399D; line-height: 160%; margin-top: 0.5em;}
.list_box4 .box4_bg dt{font-size: 22px; font-weight: 700;}
.list_box4 .box4_bg dd{font-size: 18px; color: #333;}
.list_box4 .box4_bg .box_img{ width: 100%; text-align: center; margin-bottom: 20px;min-height:90px;}
.list_box4 .box4_bg .box_img img{ width: 120px; height: auto;}
@media only all and (max-width:1024px) {
.list_box4{flex-wrap: wrap;display: flex;}
.list_box4 .box4_bg{ text-align: center; width:50%; padding-bottom: 20px;}
.list_box4 .box4_bg .box_s img{ width: 80%; height: 50%;align-content: center; align-items: center;text-align: center;}
.list_box4 .box4_bg dl{line-height: 160%; margin-top: 0.5em;}
.list_box4 .box4_bg dt{font-size: 18px;}
.list_box4 .box4_bg dd{font-size: 16px;}
.list_box4 .box4_bg .box_img{ width: 100%; text-align: center; margin-bottom: 10px;}
.list_box4 .box4_bg .box_img img{ width: 120px; height: auto;}
}

.box3_list{justify-content: space-between;display: flex; margin-top: 20px;}
.box3_list .box3_bg{display: flex;width: 256px;height: 256px; align-items: center;justify-content: center;}
.box3_list .box3_bg{background: #FFEFEE; text-align: center;}
.box3_list .box3_bg img{ width: 70px; height: auto; margin-bottom: 20px;}
.box3_list .box3_bg .box3_s dl{text-align: center;color:#333;}
.box3_list .box3_bg .box3_s dt{font-size: 20px; font-weight: 700; color: #443E8C; margin-bottom: 10px;}
.box3_list .box3_bg .box3_s dd{font-size: 18px;color: #333; line-height: 140%;}

@media only all and (max-width:1024px) {
.box3_list{display: flex;justify-content: center; margin-top: 20px;}
.box3_list .box3_bg{align-items: center; width: 50%; margin-bottom: 10px;}
.box3_list .box3_bg .box3_s dt{font-size: 18px;margin-bottom: 10px;}
.box3_list .box3_bg .box3_s dd{font-size: 16px;}
}
@media only all and (max-width:767px) {
.box3_list{display:block;}
.box3_list .box3_bg{align-items: center; width: 100%; margin-bottom: 10px;}
}

.line3_list{justify-content: space-between;display: flex; margin-top: 20px;}
.line3_list .box_line{display: flex;width: 256px;height: 256px; align-items: center;justify-content: center;}
.line3_list .box_line{background: #fff;}
.line3_list .box_line .box_s{text-align: center;}
.line3_list .box_line .box_s p{height: 90px;align-content: center;}
.line3_list .box_line .box_s img{ width: 60px;}
.line3_list .box_line .box_s dl{text-align: center; color:#333;}
.line3_list .box_line .box_s dt{font-size: 20px; font-weight: 700;}
.line3_list .box_line .box_s dd{font-size: 18px;}

@media only all and (max-width:1024px) {
.line3_list{display: block;margin-top: 20px;display: flex;flex-wrap: wrap;}
.line3_list .box_line{ width: 49%;}
.line3_list .box_line .box_s img{ width: 50px;}
.line3_list .box_s,.box_line{align-items: center; width: 100%; margin-bottom: 10px;}
.line3_list .box_line .box_s dt{font-size: 18px;}
.line3_list .box_line .box_s dd{font-size: 16px;}
}
@media only all and (max-width:767px) {
.line3_list .box_line{ width: 100%;}
.line3_list .box_line .box_s img{ width: 50px;}
}

.q9_box{justify-content: space-between;display: flex;}
.q9_box .q9_bg{ display: block;width: 256px;}
.q9_box .q9_bg .box_s{ width: 100%;}
.q9_box .q9_bg .box_s img{ width: 256px; height: 256px;}
.q9_box .q9_bg dl{text-align: center;color:#2D399D; line-height: 160%; margin-top: 20px;}
.q9_box .q9_bg dt{font-size: 22px; font-weight: 700;}
.q9_box .q9_bg dd{font-size: 18px; color: #333; margin-top: 10px;}

@media only all and (max-width:1024px) {
.q9_box{display: flex;flex-wrap: wrap;align-content: center;}
.q9_box .q9_bg{ display: block;width: 50%; text-align: center; margin-bottom: 20px;;}
.q9_box .q9_bg .box_s img{ width: 140px; height: 140px;}
.q9_box .q9_bg dl{margin-top: 10px;}
.q9_box .q9_bg dt{font-size: 18px;}
.q9_box .q9_bg dd{font-size: 16px;}
}

.btn_homelink{background: #ED6767;font-size: 16px; font-size: 600; color: #fff;padding: 5px 10px;border-radius: 5px;}
.btn_homelink:hover{ color: #fff56f;background: #443e8c;}



#header{background-color: #fff;}

body.bg{background-color:#f6f9f9;}

#container .mainInner{grid-template-columns:78fr 22fr; padding-left: 20px;}

/* aside.rightWrap{height: auto;} */
aside{height: auto; padding:20px 20px; top: 6.2rem;}

.keywordsList li{justify-content: center;}

.contents{padding: 20px 0px;}

.subVisualArea{padding-top: 180px;}

h2.title{margin-bottom:1rem;}
.vol{margin-bottom:1rem;}
/* 메인 왼쪽에 top 영역 */
.main .main-top{position: relative; padding:20px; max-width: 1584px; margin: 0 auto; }
.main .main-top-article{width: 100%; height: auto;}
.main .main-top-article a{position: relative; display: inline-block;}
.main .main-top-article .img{position: relative; border-radius: 5px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24); overflow: hidden;}
.main .main-top-article .img::after{content: ''; z-index: 1; position: absolute; top: 15%; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,rgba(50,50,50,0) 0,rgba(16,15,15,.91) 89%,rgba(16,15,15,.93) 93%); opacity: .93;}
.main .main-top-article .img img{width: 100%; transition: all 0.3s ease-in-out; object-fit: cover; object-position: center;}
.main .main-top-article a:hover img{transform: scale(1.1);}
.main .main-top-article a .infoBox{bottom:0; transition: bottom .3s;}
.main .main-top-article a:hover .infoBox{bottom:10px;}
.main .main-top-article a .infoBox .line-wrap{display: -webkit-box; line-height: normal;}
.main .main-top-article a .infoBox .title{width: calc(100%); background-image: linear-gradient(transparent calc(100% - 1px),currentColor 1px); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .3s;}
.main .main-top-article a .infoBox:hover .title{ background-size: 100% 100%; transition: background-size .3s;}

/* 메인 왼쪽영역 */
.main .articleList .img{position: relative; border-radius: 5px;}
.main .articleList .img::after{content: ''; z-index: 1; position: absolute; top: 15%; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(to bottom,rgba(50,50,50,0) 0,rgba(16,15,15,.91) 89%,rgba(16,15,15,.93) 93%); opacity: .93;}

.main .articleList{width: 100%; height: auto;}
/* .articleList li.main{width: 100% !important; height: 100% !important;} */
.main .articleList li{display: inline-block; width: calc(50% - 10px);}
.main .articleList li:nth-child(2){margin: 0;}
.main .articleList li:nth-child(2n){float: right;}
.main .articleList li:nth-child(2n+1){float: left;}
.main .articleList li ~ li{margin-top: 20px;}
.main .articleList li a{position: relative; height: 100%;}
.main .articleList li a:hover{}
.main .articleList .img{}
.main .articleList li a img{width: 100%; height: auto; object-fit: cover; object-position: center;}
.main .articleList li a .infoBox{bottom:0; transition: bottom .3s;}
.main .articleList li a:hover .infoBox{bottom:10px;}
.main .articleList li a .infoBox .line-wrap{display: -webkit-box; line-height: normal;}
.main .articleList li a .infoBox .title{font-size: 2.2rem; width: calc(100%); background-image: linear-gradient(transparent calc(100% - 1px),currentColor 1px); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .3s;}
.main .articleList li a .infoBox:hover .title{ background-size: 100% 100%; transition: background-size .3s;}


.main .infoBox{position: absolute; z-index: 2; bottom:0; left: 0; padding: 20px 20px;}
.main .infoBox .caption{color: #fff; margin-bottom:0.3rem;}
.main .infoBox .title{color: #fff;}

.main .infoBox .text{color: #fff;}
.main .badgeCategory{margin-top: 10px; color: #fff;}
.main .badgeCategory span{color: #fff; border: 1px solid #fff;}


/* 메인 오른쪽 */
.main .keywordsList li a{border-radius: 16px 16px 5px 5px;}
.main .noteSliderWrap{border-radius: 5px;}
.main .globalSliderWrap{border-radius: 5px;}
.main .cardBox{border-radius: 5px;}
.main .cardBox a {width: 100%;}
.main .cardBox a .img{width: 100%;}
.main .cardBox a .img img {width:100%;}

.newList a .img > img{width: 100%; height: 100%; object-fit: cover; object-position: center;}

/* SCR-SPE-0210 */


/* SCR-SPE-0110 */
.color-list-top{text-align: center; background-color: #e4d8cc; font-size: 3.6rem; font-weight: 700;}
.color-list{text-align: center; display: flex;}
.color-list .list-item{padding: 10px; width: 20%;}
.color-list .list-item:nth-child(1){background-color: #c3d8eb;}
.color-list .list-item:nth-child(2){background-color: #caeeee;}
.color-list .list-item:nth-child(3){background-color: #e4f2d1;}
.color-list .list-item:nth-child(4){background-color: #fedfcd;}
.color-list .list-item:nth-child(5){background-color: #fcdad9;}
.color-list .list-item > img{width: 40px; height: auto; margin-bottom: 10px;}
.color-list .list-item .list-item-text{border-top: 1px solid #000; padding-top:10px; color: #35383B; font-weight: bold; font-size: 1.8rem; line-height: 1.7;}


/* SCR-SPE-0310 */
.qnaInfo{display: block;}
.hashtags{margin: 2px 0 4px 20px; display: flex; flex-wrap: wrap; gap: 10px;}
.hashtags .hash{display: inline-block; padding: 2px 6px; color: #08bc93; font-weight: bold; border: 2px solid #08bc93; border-radius: 20px;}

/* SCR-SPE-0211 */
.qaList li .textA .best{padding: 0 0 0 30px; color: var(--color_secondary); font-size: 1.8rem; font-weight: bold;}
.qaList li .textA .best > span{background: linear-gradient(to top, #bfffa1 40%, transparent 40%);}

.qaList li .textA .best1{background: url(../images/img/sub/icon_trophy.svg) 2px center no-repeat;}
.qaList li .textA .best2{background: url(../images/img/sub/icon_trophy.svg) 2px center no-repeat;}
.qaList li .textA .best3{background: url(../images/img/sub/icon_trophy.svg) 2px center no-repeat;}

/* SCR-TEC-0210 */
.introduce{color: #000; font-size: 2.4rem; font-weight: 700;  word-break: keep-all; padding:0 0 20px 30px;}

/* SCR-KNT-0110 */
.n-icon1::before {content: ''; width: 6.4rem; height: 5.4rem !important; background-size: 100%; margin: 0 0 1.2rem 0;border: 0;background: url(../images/img/sub/sub7_icon01.png) no-repeat 0 0;}

.materials{padding:0 20px 10px 20px; color: #000; font-size: 1.8rem; font-weight: 600; line-height: 1.7;}
.makeList {flex-wrap: wrap; gap: 10px; }
.makeList li {flex: none; width: 38%; }
.makeList li ~ li{margin: 0;}
.makeList .num{margin: -20px 0 10px;}
/* footnote */
.span-footnote{color: #b82f30;}
.footnote{color: #35383B;
    border: 1px dashed #35383B;
    border-radius: 20px;
    padding: 20px;}
.footnote .star-dot{position: relative; padding-left: 10px;}
.footnote .star-dot::before{color: red; content: "*"; position: absolute; left: 0;}
.footnote .star-dot.star2{position: relative; padding-left: 17px;}
.footnote .star-dot.star2::before{color: red; content: "**"; position: absolute; left: 0;}
.footnote .dashed{position: relative; padding-left: 18px;}
.footnote .kollon{position: relative; padding-left: 18px;}
.footnote .dashed::before{color: #35383B; content: "-"; position: absolute; left: 6px;}
.footnote .kollon::before{color: #35383B; content: ":"; position: absolute; left: 6px;}
.flexArea .img.fleximgleft{margin-right: 0; margin-left: 20px;}



@media (max-width: 1024px){
    .main .contents{padding: 0 0 20px 0;}
    .main .articleList li{width: 100%;}
    .main .articleList li:nth-child(2){margin-top: 20px;}
    #container .mainInner{padding: 0 20px;}
    .main aside{top: 0; padding:20px 0;}

    .color-list-top{font-size: 2.6rem; padding: 5px 0 5px 0; line-height: 1.4;}
    .color-list .list-item .list-item-text{padding-top:10px; font-size: 1.4rem; line-height: 1.7;}

    /* SCR-SPE-0210 */
    .flexBox.w1024{flex-direction: column;}
    .qnaList li .flexBox div{width: auto; }
    .qnaList li .flexBox div ~ div { border-left: 0; padding: 2.4rem 0 0; border-top: 1px #CDD0D4 solid; margin-top: 4rem;}

    .s1 .r.r2{background-position-x: 40%;}
}

@media (max-width: 768px){
    .main .subVisualArea .infoBox .title, .infoBox .title{font-size:2rem;}
    .main .subVisualArea .infoBox .title{font-size:2rem;}
    .main .articleList li a .infoBox .title{font-size:2rem;}
    .main .infoBox .caption{font-size: 1.4rem;}
    .main .infoBox .text{font-size: 1.4rem;}

    .main .badgeCategory span{height:2.6rem;}

    .color-list{display: block;}
    .color-list .list-item{width: 100%;}

    /* SCR-TEC-0210 */
    .introduce{font-size: 2rem; font-weight: 700; padding:0 0 15px 20px;}
    /* SCR-KNT-0110 */
    .materials{padding:0 20px 10px 20px; font-size: 1.5rem; line-height: 1.5;}
    .makeList {flex-wrap: wrap; gap: 10px; }
    .makeList li {flex: none; width: 100%; }
    .makeList li ~ li{margin: 0;}
    .makeList .num{margin: -20px 0 10px;}

    .footnote .star-dot{padding-left: 8px;}

    .flexArea .img.fleximgleft{margin-left: 0;}
}

@media (max-width: 380px){
    .main .infoBox{padding: 10px;}
}


@font-face {
    font-family: 'GangwonEduHyeonokT_OTFMediumA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduHyeonokT_OTFMediumA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.mo{display: none !important;}
#wrap {max-width:1600px; margin:0 auto;}
.text-black {color:#000 !important}
.wrap-wrap {flex-wrap: wrap;}
.spacing-1 {letter-spacing: -1px;}
.d-unset {display:unset;}
.block{display: block !important;}
.relative {position: relative;}
span.span_r{color: #e20707 !important;}
span.span_b{color: #3a6cff !important;}
.txt-Color2 {color: #518CFF !important;}
.txt-Color3 {color: #022F79 !important;}
.txt-Color4 {color: #FD5454 !important;}
.txt-Color5 {color: #00BC49 !important;}
.txt-Color6 {color: #5cc4f1 !important;}
.txt-white {color: #fff !important;}
.bg3 {background-color: #FFB2CB !important;}
.bg4 {background-color: #FAF5EC !important;}
.border-style2 {border: 3px solid #54afe6;}
.borderbox{padding:30px 35px; border: 1px solid #35383B; border-radius: 20px;}
.p-20 {padding:20px;}
.p-40 {padding:40px;}
.p-80 {padding:80px;}
.pt-10 {padding-top:10px;}
.pt-20 {padding-top:10px;}
.pt-40 {padding-top:40px;}
.m-20 {margin:20px;}
.m-40 {margin:40px;}
.mt-80 {margin-top:80px;}
.ml-10 {margin-left:10px;}
.ml-25 {margin-left:25px;}
.ml-40 {margin-left:40px;}
.mr-10 {margin-right:10px;}
.mr-20 {margin-right:20px;}
.mr-40 {margin-right:40px !important;}
.mt-20 {margin-top:20px;}
.mt-40 {margin-top:40px;}
.mt-60 {margin-top:60px;}
.mt-80 {margin-top:80px;}
.mt-100 {margin-top:100px;}
.mt-130 {margin-top:130px;}
.mt--50 {margin-top:-50px;}
.mb-5 {margin-bottom:5px !important;}
.mb-10 {margin-bottom:10px !important;}
.mb-20 {margin-bottom:20px !important;}
.mb-2rem {margin-bottom:2rem !important;}
.mb-40 {margin-bottom:40px !important;}
.mb-80 {margin-bottom:80px !important;}
.mb-120 {margin-bottom:120px !important;}
.d-flex-g8{display: flex; gap: 8px;}
.d-flex-g4{display: flex; gap: 4px;}
.d-flex-g50{display: flex; gap: 50px;}
.items-base {align-items: baseline;}
.items-start {align-items: flex-start;}
/*.flexArea .img {margin-right:0 !important;}*/
.text-left{text-align: left !important;}
.text-center{text-align: center !important;}
.text-right{text-align: right !important;}
.rotate180 {transform: rotate(180deg);}
.fs14 {font-size: 14px;}
.fs16 {font-size: 16px;}
.fs18 {font-size: 18px;}
.fs20 {font-size: 20px !important;}
.fs22 {font-size: 22px !important;}
.fs24 {font-size: 24px !important;}
.fs26 {font-size: 26px !important;}
.fs28 {font-size: 28px !important;}
.fs30 {font-size: 30px !important;}
.fs32 {font-size: 32px !important;}
.fs36 {font-size: 36px !important;}
.fs40 {font-size: 40px !important;}
.fs48 {font-size: 48px !important;}
.bold {font-weight: bold;}
.content-between{justify-content: space-between;}
.content-around {justify-content: space-around;}
.content-start {justify-content: flex-start;}
.column-gap{column-gap: 100px;}
.g-30 {gap:30px;}
.g-50 {gap:50px;}
.w50 {width: 50%;}
.w20 {width: 20%;}
.w30 {width: 30%;}
.w40 {width: 40%;}
.w60 {width: 60%;}
.w80 {width: 80%;}
.w90 {width: 90%;}
.w100 {width: 100%;}
.w44p {width: 44%;}
.items-end{align-items: flex-end;}
.rect-line {width:100%;height:59px; background: url(../images/img/mn01/mt/img-07.png) repeat-x;}

.footnote .star-dot.star3::before {
    color: #b82f30;
    content: "***";
    position: absolute;
    left: 0;
}

.footnote .star-dot.star4::before {
    color: #b82f30;
    content: "****";
    position: absolute;
    left: 0;
}

.footnote .star-dot.star5::before {
    color: #b82f30;
    content: "*****";
    position: absolute;
    left: 0;
}

/* .sectionBox.full{padding: 0;} */
.sectionBox.full .flexTextBox .title{width: auto;}

.graph{display: flex; justify-content: center; gap: 50px;}
.graph .graphlist .tit{text-align: center; color: #35383B; font-weight: bold; font-size: 2.2rem; margin-bottom: 4.8rem; line-height: 1.7;}

.graph .dotlist{display: flex; justify-content: center; gap: 10px; color: var(--color_secondary); font-family: 'SCoreDream'; font-size: 1.5rem; font-weight: 500; align-items: center; margin-top: 1.2rem; }
.graph .dotlist .dot{display: flex; color: var(--color_secondary); font-family: 'SCoreDream'; font-size: 1.5rem; font-weight: 500; align-items: center; margin-top: 1.2rem;}
.graph .dotlist .dot::before{ content: ''; width: 1.6rem; height: 1.6rem; border-radius: 50%; margin-right: 6px;}
.graph .dotlist .dot.dot1::before{background-color: var(--point_Green);}
.graph .dotlist .dot.dot2::before{background-color: var(--color_primary);}
.graph .dotlist .dot.dot3::before{background-color: #6e7780;}
.graph .dotlist .dot.dot4::before{background-color: #bc2884;}

.arrtbl.pc{display: table;}
.arrtbl.mo{display: none;}

.arrtbl {width:100%;font-size:16px;border-top:1px solid #434343;margin: 5% auto 20px auto;}
.arrtbl tr th,
.arrtbl tr td{border-left: 1px solid #434343;}
.arrtbl tr th{color:#fff; background-color: #1a79ba; text-align:center; padding:1% 0;line-height:180%; font-weight:700;border-right:1px solid #434343;border-bottom:1px solid #434343}
.arrtbl tr td{text-align:left;padding:1% 1%;line-height:200%;  vertical-align:middle;color:#707070;border-right:1px solid #434343; border-bottom:1px solid #434343}
.arrtbl tr td.left {text-align:center;padding-left:2%;}
.arrtbl tr th.last,
.arrtbl tr td.last{border-right:0px}
.arrtbl tr td span{font-weight:500;color:#252525}
.arrtbl tr td.center{text-align:center;}
.arrtbl tr th:first-child{width: 10%;}
/* .arrtbl tr td:first-child{color:#1a79ba; font-weight:700;} */
.arrtbl tr td:first-child{background-color: #1a79ba; color:#fff; font-weight:700;}

.arrtbl tr td span.span_b{color:#1a79ba;}

.graph.chartjs{display: flex; flex-direction: column; align-items: center; gap: 20px;}
.graph.chartjs .graphlist{width: 100%;}

.need-badge .title::before {
    content: '';
    display: flex;
    width: 4rem;
    height: 0.4rem;
    background-color: #E60012;
    margin-bottom: 5px;
}


.d-flex{display: flex; gap: 6px;}

@media (max-width: 1024px){
    .graph.chartjs{display: flex; flex-direction: column; align-items: center; gap: 20px;}
    .graph.chartjs .graphlist{width: 100%;}
}



@media (max-width: 768px){
    .d-flex-g8{gap: 6px;}
    .d-flex-g4{gap: 3px;}

    .graph{display: flex; flex-direction: column; align-items: center; gap: 20px;}
    .graph .graphlist{width: 100%;}

    .graph img { width: auto; max-width: 100%; }
    .arrtbl.pc{display: none;}
    .arrtbl.mo{display: table;}
    .arrtbl tr th:first-child{width: 30%;}
    /* .arrtbl tr td:first-child{width: 30%; color:#1a79ba; font-weight:700;} */
    .arrtbl tr td:first-child{width: 30%; background-color: #1a79ba; color:#fff; font-weight:700;}
    .pc{display: none !important;}
    .mo{display: block !important;}
}



.mo {display:block;}
.btn_iconAllMenu {display:block;}
#gnb{position: fixed; display:flex; top: 0; left: 0; width: 100%; height: auto; padding: 0px; justify-content: space-between; background-color: #fff; z-index: 999;}
.gnbWrap {display:none;}
#gnb::before {content:'';position:absolute;top:166px;left:0;width:100%;height:0;background-color:#fff;opacity:0;transition:all 0.2s linear;}
#gnb.on::before {height:21.8rem;border-bottom:1px #CDD0D4 solid;opacity:1;} 

#gnb.on{border-bottom: 1px #CDD0D4 solid;}

.gnbcontainer{display:flex; gap: 40px;}
.menuList{display: flex; gap: 100px;}
.menuList .depth1{font-size: 19px !important;}
.depth2List{top: 120px; margin-top: 0;}
.depth2List li a{font-size: 18px; letter-spacing:-1px;}
#gnb.on .depth2List {opacity:1;}
#gnb.on .depth2List li a {display:flex;}

.gnblogo a{display: flex; display: flex; flex-direction: column; align-items: center;margin-left: 80px;}
.gnblogo a strong { width: 28.1rem; height: 5.3rem; background: url(../../images/common/logo.png) no-repeat 0 50%; background-size: 100%;}
.gnblogo .txt {font-size:12px;}

.logotxt{display: flex; flex-direction: column; justify-content: center; gap: 4px;}
.logotxt .toptxt{font-weight: bold; line-height:normal;}
.logotxt .txt{color: var(--color_secondary); font-size: 12px; font-weight: 400; opacity: 1;}

/*공유하기*/
.shareWrap {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.shareBox {display:flex;margin-bottom:2.4rem;}
.shareWrap.top .shareBox {display:none;position:absolute;top:4rem;left:50%;background-color:#fff;border:1px #CDD0D4 solid;box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.12);border-radius:8px;padding:2rem;transform:translateX(-50%)}
.shareWrap.top .shareBox.open {display:flex;}
.shareWrap.top .shareBox  a ~ a {margin-left:0.8rem;}

.asideWrap{z-index: 999 !important;}

#gnb {justify-content: center;}
#gnb, .mainswiper-bg {background: #fafafa;}
#gnb .box {position:relative;margin:0 auto;display: flex;width: 100%;height: 80px;justify-content: space-between;    border-bottom: 2px solid #333333;align-items: center;}


.select-wrap{
  position: relative;
  display: inline-block;    margin-left: 20px;
}

.wolho{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  color: #222;
  background: #fff;
  border: 1px solid #1B6BBC;   /* 파란 테두리 */
  height: 35px;
  line-height: 32px;
  padding: 0 38px 0 14px;       /* 오른쪽 여백: 화살표 자리 */
  min-width: 160px;
  cursor: pointer;
  font-size: 16px;
}
.wolho:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,111,255,.18);
}

/* IE/Edge 레거시 화살표 제거 */
.wolho::-ms-expand { display: none; }

/* 파란 삼각형(▼) */
.select-wrap::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-35%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #1B6BBC;  /* 파란색 */
  pointer-events: none;            /* 클릭 방해 방지 */
}



/* .onlysitemap{display: none;}
.asideWrap.active .onlysitemap{display: block;} */
@media (max-width: 1920px){
    .menuList {gap:80px !important;}
}
@media (max-width: 1670px){
    .menuList {gap:40px !important;}
}
@media (max-width: 1530px){
    .gnbcontainer, .menuList {gap:0 !important;}
}
@media (max-width: 1400px){
}

@media (max-width: 1390px){
    .menuList {gap:0 !important;}
    .menuList .depth1 {padding:0 0px}
}

@media (max-width: 1280px){
    
    .gnblogo {}
    .gnblogo a {display: flex; justify-content: space-between;align-items: flex-start;}
    
    .logotxt {position: absolute;left: 35px;}
}

@media (max-width: 1150px){
    .logotxt {left:0 !important;}
}

@media (max-width: 1024px){
    #gnb .gnbWrap {position:fixed;display:flex;top:0;left:100%;width:100%;height:100%;background-color:#1B6BBC;transition:all 0.3s ease-in-out;opacity:0;}
    #gnb .gnbWrap.on {left:0;opacity:1;}
    .depth2List{top: 0;}
    .logotxt{display: none;}
    .gnblogo{width: auto; margin: 0;}
    /*.gnblogo a{display: flex; gap: 0; flex-direction:initial; justify-content:initial;}*/
    .gnblogo a {display: flex; justify-content: space-between;align-items: flex-start;margin-left: 0px;}
}
@media (max-width: 768px){
    #gnb .box{padding: 8px 20px;height: 50px;}
    .gnblogo a strong{    width: 9.1rem;background: url(../../images/common/logo_m.png) no-repeat 0 50%;background-size: contain;}
}
@media (max-width: 465px){
    .gnblogo a strong {}
}




/*color*/
:root {
    --color_primary:#FFCE2D;
    --color_secondary:#4A4F54;
    --color_tertiary:#6E7780;

    --color_gray400:#808890;

    --point_lightBlue:#33A9FF;
    --point_Green:#1FBF75;
    --point_Brown:#413B36;
    --point_Purple:#776BF8;
    --point_Indigo:#073288;
    --point_Blue:#3A6CFF;

    --swiper-theme-color:#2B64F8 !important;
}

img {max-width:100%;}

body.bg {background-color:#EFF1F7;}
#wrap {width:100%;height:100%;}
#header {display:flex;position:fixed;top:0;left:0;width:100%;align-items:center;justify-content:space-between;padding:3.2rem 9.6rem;transition:all 0.1s ease-in-out;z-index:3;}
#header.active {height:6.5rem;background-color:#fff;padding:0 9.6rem;border-bottom:1px #CDD0D4 solid;}
#header::before {content:'';position:absolute;top:65px;left:0;width:100%;height:0;background-color:#fff;opacity:0;transition:all 0.2s linear;}
#header.on::before {height:21.8rem;border-bottom:1px #CDD0D4 solid;opacity:1;} 

#container {display:flex;flex-direction:column;}
#container.main {display:block;padding-top:13.2rem;}
#container .mainInner {position:relative;display:grid;max-width:1584px;margin:0 auto;grid-template-columns:22fr 56fr 22fr}
aside {position:sticky;position:-webkit-sticky;top:13.2rem;height:calc(100vh - 13.3rem);/*overflow-y:auto;*/padding:3.2rem 4rem 10rem;}
aside.rightWrap {height:calc(100vh - 12.6rem)}

.footerWrap {display:flex;background-color:#333333;align-items:center;justify-content:center;padding:4rem 9.6rem;}

/*header*/
.headerBoxSlider {width:250px;overflow:hidden}
#header .headerText {display:flex;flex-direction:column;}
.headerText .tit {color:#000;font-size:2rem;font-weight:700;}
#header .txt {color:var(--color_secondary);font-size:1.3rem;font-weight:400;margin-top:2px;line-height:1.6;opacity:1;}
.headerImg {display:flex;align-items:center;}
.headerImg::before {content:'';width:43px;height:60px;background:url(../../images/common/img_header01.svg) no-repeat 0 0;background-size:43px 60px;margin-right:12px;}

.logo a {display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all 0.1s ease-in-out;}
.active .logo a {align-items:flex-start;} 
.logo strong {width:28.1rem;height:5.3rem;background:url(../../images/common/logo.png) no-repeat 0 50%;background-size:100%;}

#header .gnbWrap {display:none;}
.menuList {display:flex;}
.menuList > li {display:flex;flex-direction:column;width:12rem;height:6.5rem;align-items:center;justify-content:center;}
.menuList > li ~ li {margin-left:1.2rem;}
.menuList .depth1 {position:relative;display:flex;width:100%;height:100%;color:#000;font-size:1.6rem;font-weight:700;transition:all 0.3s ease-in-out;align-items:center;justify-content:center;}
.menuList .depth1 svg{margin-left: 20px;}
.menuList .depth1::before,
.menuList .depth1.active::before {content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background-color:var(--color_primary);transform:translateX(-50%);transition:all 0.3s ease-in-out;}
.menuList .depth1:hover,
.menuList .depth1.active,
.depth2List li a:hover  {color:var(--color_primary);}
.menuList .depth1:hover::before,
.menuList .depth1.active::before {width:100%;}
.depth2List {position:absolute;top:6.5rem;margin-top:2rem;transition:all 0.3s ease-in-out;opacity:0;}
.depth2List li {display:flex;margin-top:2rem;justify-content:center;}
.depth2List li a {display:none;align-items:center;font-size:1.6rem;color:var(--color_secondary);font-weight:500;transition: color 0.3s;}
#header.on .depth2List {opacity:1;}
#header.on .depth2List li a {display:flex;}

.utilWrap {display:flex;align-items:center;margin-right: 80px;    gap: 1.4rem;}
.utilWrap a img{    width: 32px;}
.utilWrap .btn_share {width:3.2rem;height:3.2rem;background:url(../../images/common/icon_share.svg) no-repeat 50%;background-size:2.4rem;margin-right:1.6rem;transition:all 0.3s;}
.utilWrap .btn_iconAllMenu {}
.utilWrap .btn_iconAllMenu.btn_css{width:3.6rem;height:2.6rem;background:url(../../images/common/icon_hamburger.png) no-repeat 50%;background-size:2.6rem;cursor: pointer;}
.utilWrap .btn_webZine {display:flex;align-items:center;justify-content:center;height:35px;background-color:var(--color_primary);color:#fff;font-size:1.6rem;font-weight:500;padding:10px 12px}
.utilWrap .btn_share.active {background-image:url(../../images/common/icon_share_close.svg);}

#header.active .headerBoxSlider {display:none;}
#header.active .logo strong {width:14rem;height:1.6rem}
#header.active .logo .txt {height:0;margin-top:0;visibility:hidden;opacity:0;}
#header.active .gnbWrap {display:flex;}

/*aside*/
.asideWrap {position:fixed;top:80px;display:flex;flex-direction:column;width:100%;height:100%;background-color:#1B6BBC;transition: transform 0.3s ease-in-out, opacity 0.3s;z-index:-1;opacity:0;max-width: 560px; transform: translateX(100%);right: 0;
}
.asideWrap.active {transform: translateX(0); z-index:3;opacity:1;}
.asideWrap .inner {position:relative;display:flex;flex-direction:column;max-width:1156px;width:100%;margin:0 auto;}
/*.asideWrap .inner::before {content:'';position:absolute;top:40px;left:48px;width:52.9rem;height:9.3rem;background:url(../../images/common/img_text_sitemap.png) no-repeat 0 0;background-size:100%;}*/
.asideWrap .inner.second .allMenuList{margin-top: 190px;}
.asideWrap .inner.second .allMenuList > li a{font-size:20px; cursor: pointer;font-weight: 600;color:#333;}
.asideWrap .inner.second .allMenuList > li a:hover{text-decoration:none;}

.asideWrap .title {margin-top:9rem;padding-left:4.8rem;font-size:4rem;font-weight:700;color:#fff}
.allMenuList {display:flex;margin-top:140px;justify-content:space-between;flex-direction: column;}
.allMenuList > li {position:relative;display:flex;flex-direction:column;padding:1.2rem;}
.allMenuList > li ~ li::before {content:'';position:absolute;top:0;left:0;width:1px;height:100%;}
.allMenuList > li a{width: fit-content;    color: #fff;font-weight:300;    font-size: 30px;display: flex;align-items: center;}
.allMenuList > li a:hover{color:#FFCE2D;text-decoration: underline;font-weight:700;}
.allMenuList > li a svg{margin-left: 20px;}
.allMenuList .tit {font-size:2.8rem;margin-bottom:4.8rem;}
.allMenuList .subList li ~ li {margin-top:1.6rem;}
.allMenuList .subList li a {font-size:1.8rem;font-weight:500;}
.asideWrap .btnClose {position:absolute;top:42px;right:42px;width:4rem;height:4rem;background:url(../../images/common/btn_close.png) no-repeat 0 0;background-size:100%;}

@media (max-width: 1024px){
.allMenuList > li a{font-size:20px; cursor: pointer;font-weight: 600;color:#333;}
.allMenuList > li a:hover{text-decoration:none;}
}

/*conteainer*/
aside::-webkit-scrollbar-track {border-radius:10px;background-color: transparent;}
aside::-webkit-scrollbar {width:8px;background-color:transparent;}
aside::-webkit-scrollbar-thumb {border-radius:4px;background-color: #D3D6DF;}

aside .section ~ .section {margin-top:6.4rem;}
.keywordsList {flex-direction:column;}
.keywordsList li {display:flex;width:auto;}
.keywordsList li ~ li {margin-top:3.2rem;}
.keywordsList li a {display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);}
.keywordsList li .textBox {display:flex;flex-direction:column;color:#fff;padding:2rem 2.4rem 2.4rem;}
.keywordsList li .img {overflow:hidden;}
.keywordsList li img {transition:all 0.3s ease-in-out;}
.keywordsList li a:hover img {transform:scale(1.1);}
.keywordsList li .textBox .tit {font-size:2.4rem;font-weight:700;margin-bottom:0.8rem}
.keywordsList li .textBox .info {display:flex;font-size:1.6rem;font-weight:400;}
.keywordsList li .textBox .info::after {content:'';width:20px;height:20px;background:url(../../images/common/icon_keyword_arrow.svg) no-repeat 0 0;background-size:100%;}
.month li:nth-child(1) a .textBox {background-color:var(--color_primary);}
.month li:nth-child(2) a .textBox {background-color:var(--point_lightBlue);}
.month li:nth-child(3) a .textBox {background-color:var(--point_Purple);}
.recom li:nth-child(1) a .textBox {background-color:var(--point_Green);}
.recom li:nth-child(2) a .textBox {background-color:var(--color_secondary);}

h2.title {color:var(--color_tertiary);font-size:1.6rem;font-weight:600;margin-bottom:2rem;}
.vol {color:var(--color_tertiary);font-size:1.6rem;font-weight:400;margin-bottom:2rem;}
.contents {padding:3.2rem 4rem;}
.titleArea {display:flex;align-items:center;justify-content:space-between;}

.articleList li {display:flex;width:100%}
.articleList li ~ li {margin-top:3.2rem;}
.articleList li a {display:flex;flex-direction:column;width:100%;}
.articleList .img {border-radius:16px;box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);overflow:hidden;}
.articleList li a img {width:100%;transition:all 0.3s ease-in-out;}
.articleList li a:hover img {transform:scale(1.1);}
.infoBox {display:flex;flex-direction:column;padding:2.4rem 0.4rem}
.infoBox .caption {color:var(--color_gray400);font-size:1.6rem;font-weight:600;margin-bottom:1.6rem;}
.infoBox .title {color:#000;font-size:3.2rem;font-weight:700;margin-bottom:0.8rem;}
.infoBox .text {color:var(--color_secondary);font-size:1.8rem;word-break:keep-all}
.badgeCategory {display:flex;align-items:center;margin-top:3.2rem;}
.badgeCategory span {display:inline-flex;padding:0.8rem 1.6rem;border:1px rgba(65, 69, 73, 0.40) solid;border-radius:20px;font-size:1.6rem;}
.badgeCategory span ~ span {margin-left:0.8rem;}

.noteSliderWrap {position:relative;width:100%;overflow:hidden;background-color:#fff;border-radius:16px;box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);}
h3.tit {position:absolute;top:2.4rem;left:2.4rem;font-size:1.4rem;color:var(--color_secondary);z-index:2}
.noteList li a {display:flex;flex-direction:column;border-radius:16px;}
.noteList .textBox {display:flex;padding:2.4rem;}
.noteList .textBox .tit {color:#000;font-size:2.2rem;margin-top:3.2rem;letter-spacing:-1px;}
.note .swiper-horizontal>.swiper-pagination-bullets, 
.note .swiper-pagination-bullets.swiper-pagination-horizontal {position:absolute;top:2.1rem;right:2.4rem;bottom:auto;left:auto;width:auto;z-index:1;}
.globalSliderWrap {position:relative;width:100%;margin-top:3.2rem;background-color:#B8D6FF;overflow:hidden;border-radius:16px;box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);}


.swiper-pagination-bullet {opacity:0.1 !important;}
.swiper-pagination-bullet-active {opacity:1 !important;}

.cardBox {position:relative;display:flex;border-radius:16px;box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);overflow:hidden;}
.cardBox .textBox {position:absolute;top:0;left:0;display:flex;flex-direction:column;;color:#fff;padding:2.4rem;}
.cardBox .textBox .tit {font-size:2.2rem;font-weight:700;}
.cardBox .textBox .info {font-size:1.4rem;font-weight:500;margin-top:0.8rem}

.newsSlider {position:relative;width:100%;overflow:hidden;}
.newList a {display:flex;flex-direction:column;}
.newList a .img {height:14.6rem;border-radius:16px;box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);overflow:hidden;}
.newList a .newText {display:flex;color:var(--color_secondary);font-size:1.5rem;margin-top:1.6rem;font-weight:400;}
.newsSlider .swiper-horizontal>.swiper-pagination-bullets,
.newsSlider .swiper-pagination-bullets.swiper-pagination-horizontal {position:absolute;top:0;right:0;bottom:auto;left:auto;width:auto;}

/*footer*/
.footerInfo {display:flex;flex-direction:column;color:#6E7780;font-size:1.2rem;font-weight:500;}
.fLogo {display:flex;margin-bottom:1.6rem;align-items:center;justify-content:center;}
.fLogo .text {color:#6E7780;font-size:1.6rem;font-weight:500;margin-left:1.6rem}
address {display:flex;text-align: center;font-weight:500;}
address .tel {display:flex;align-items:center;}
address .tel::before {content:'';width:1px;height:1rem;background-color:#4A4F54;margin:0 8px;}
.conpanyInfo {display:flex;}
.conpanyInfo span ~ span {display:flex;}
.conpanyInfo span ~ span::before {content:'';width:1px;height:12px;background-color:var(--color_tertiary);margin:0 0.8rem;}
copyright {text-align:center;}
.footerRight {width:56.4rem;}

/*공유하기*/
.shareWrap {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.shareBox {display:flex;margin-bottom:2.4rem;}
.shareWrap.top .shareBox {display:none;position:absolute;top:4rem;left:50%;background-color:#fff;border:1px #CDD0D4 solid;box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.12);border-radius:8px;padding:2rem;transform:translateX(-50%)}
.shareWrap.top .shareBox.open {display:flex;}
.shareWrap.top .shareBox  a ~ a {margin-left:0.8rem;}
.shareBox a {width:4.8rem;height:4.8rem;background-position:0 0;background-size:100%;background-repeat:no-repeat;}
.KTL {background-image:url(../../images/common/icon_share_ktl.png);}
.youtube {background-image:url(../../images/common/icon_share_you.png);}
.instagram {background-image:url(../../images/common/icon_share_insta.png);}
.facebook {background-image:url(../../images/common/icon_share_face.png);}
.blog {background-image:url(../../images/common/icon_share_blog.png);}
.kakao {background-image:url(../../images/common/icon_share_ch.png);}

/*floating*/
.floatList {display:flex;flex-direction:column;position:fixed;top:50%;right:3.2rem;transform:translateY(-50%);}
.floatList a,
.floatWrap button {display:flex;align-items:center;justify-content:center;width:4.8rem;height:4.8rem;background-size:100%;border-radius:50%;box-shadow: 0px 4px 6px 0px rgba(34, 34, 34, 0.15), 0px 1px 1px 0px rgba(0, 0, 0, 0.15);transition:all 0.5s ease-in-out;}
.floatList a ~ a {margin-top:0.8rem;}
.floatList a.naver {background:#2DB400 url(../../images/common/icon_naver.svg) no-repeat 50%;}
.floatList a.face {background:#3B5998 url(../../images/common/icon_Facebook.svg) no-repeat 50%;}
.floatList a.talk {background:#FEE719 url(../../images/common/icon_talk.svg) no-repeat 50%;}
.btn_float {position:fixed;bottom:4rem;right:3.2rem;background:#000 url(../../images/common/icon_top.svg) no-repeat 50%;background-size:24px !important;opacity:0;z-index:2;}
.btn_float.on {opacity:1;bottom:180px;}
.non_pc {display:none;}

.floating{display: flex; align-items: center; flex-direction: column; position: fixed; top: 45%; right: 30px; transform: translateY(-50%); z-index: 99;}
.floating .floating-year{font-size: 18px; color: rgb(44, 41, 40); font-weight: bold;}
.floating .vol-no{font-size: 16px; color: #117bc5; font-weight: bold;}
.floating .floating-month{margin-top: 5px; writing-mode: vertical-rl; padding: 10px 10px; font-size: 15px; line-height: normal; font-family: "PretendardVariable"; color: #fff; background-color: #0e5ca2;}
.floating .floating-link-wrap{margin-top: 10px; display: flex; flex-direction: column; gap: 4px;text-align: center;font-size: 14px;}
.floating .btnTop{position:initial; background: transparent; margin-top: 20px;}

.m480 {display:none;}

@media (max-width: 1024px){
    .floating{display: none;}
}

@media all and (max-width:1024px){
    .m480 {display:block;}
    .mNon {display:none !important;}
    #header {padding:2.2rem 1.6rem 0.8rem;align-items:baseline;}
    #header::before {display:none;}
    .headerBoxSlider {display:none;}
    .logo a {align-items:flex-start;}
    .logo strong {width:14rem;height:1.6rem;margin-top:1.2rem;}
    #header .txt {font-size:1rem;margin-top:0.8rem;line-height:1.3;}
	.utilWrap{margin-right:0;}
    .utilWrap .btn_iconAllMenu {margin-right:0;}
    .utilWrap .btn_webZine {width: max-content;}

    #header.active {height:auto;padding:1.2rem 1.6rem;align-items:center;}
    #header .gnbWrap {position:fixed;display:flex;top:0;left:100%;width:100%;height:100%;background-color:#000;transition:all 0.3s ease-in-out;opacity:0;}
    #header .gnbWrap.on {left:0;opacity:1;}
    .logo strong {margin-top:0;}
    .gnbMenu {width:100%;padding:0 3.2rem;}
    .menuList {flex-direction:column;margin-top:10.6rem}
    .menuList > li {width:100%;height:auto;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:1rem 0;}
    .menuList > li ~ li {margin-left:0;}
    .menuList .depth1 {height:auto;color:#fff;justify-content:flex-start;}
    .menuList .depth1::before, .menuList .depth1.active::before {display:none;}
    .depth2List {position:relative;top:0;margin-top:0;opacity:1;}
    .depth2List li {margin-top:0;justify-content:flex-start;}
    .depth2List li ~ li {margin-top:1.6rem}
    .depth2List li a {display:block;color:#fff;}

    .btnClose {display:flex;position:absolute;top:3.2rem;right:3.6rem;width:3.2rem;height:3.2rem;background:url(../../images/common/btn_close.png) no-repeat 0 0;background-size:100%;}

    #container.main {padding-top:8.8rem}
    #container .mainInner {display:flex;flex-direction:column;width:100%;}
    aside {position:relative;top:0;padding:2rem 1.6rem 6rem;height:auto;overflow:hidden;}
    aside.leftWrap {order:3;width:100%;height:auto;}
    aside.rightWrap {order:2;height:auto;}
    aside .section ~ .section {margin-top:4rem}
    .contents {order:1;padding:2rem 1.6rem}
    h2.title,
    .vol {font-size:1.5rem;margin-bottom:1.6rem;}
    .articleList .infoBox .caption {margin-bottom:0.8rem;}
    .articleList .infoBox .title {font-size:2.4rem;margin-bottom:0;}
    .articleList .infoBox .text {font-size:1.4rem;}
    .badgeCategory {margin-top:1.6rem}
    .articleList li ~ li {margin-top:1.6rem;}
    .keywordsList {display:flex;flex-direction:row;overflow-x:auto;padding-bottom:2rem;margin-right:-1.6rem;}
    .keywordsList li {display:block;min-width:23rem;margin-right:2.4rem}
    .keywordsList li ~ li {margin-top:0;}
    .keywordsList li .img {height:auto;}
    .keywordsList::-webkit-scrollbar {display:none;}

    .newList a .img {height:50vw;}

    /*footer*/
    .footerWrap {flex-direction:column;padding:3.2rem 1.6rem;}
    .footerInfo {font-size:1rem;}
    .conpanyInfo span ~ span::before {margin:0 0.4rem;}
    .footerRight {width:100%;margin-top:3.2rem}
    .fLogo img {width:10.4rem;height:2rem;}
    .fLogo .text {color:rgba(255, 255, 255, 0.60);font-size:1.2rem;}

    /*공유하기*/
    .shareWrap.top .shareBox {flex-flow:wrap;justify-content:space-between;width:20rem;padding:1.6rem;left:auto;right:-3rem;transform:translateX(0);}
    .shareWrap.top .shareBox a ~ a {margin:0;}

    .floatList {display:none;}
} 

@media all and (max-width:768px){    
    .subWrap #header .txt {display:none;}
    .infoBox {padding:2.4rem 0;}
    .badgeCategory span {height:3.6rem;font-size:1.3rem;padding:0 1.2rem;align-items:center;}
    /* 뉴스 */
    .newList a .img{height: 50vw; max-height: none;}
    
}


body > div {    margin-top: 80px;}
body > div > div:last-child{margin-bottom: 160px;}

@media (max-width: 768px){
  body > div {    margin-top: 50px;}
}
/* 메인슬라이드 영ㅇ역 */

.mySwiper{
  width:100%;   height: auto;    max-height: 900px;    border-bottom: 2px solid #333333;
}

.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  height:100%;
  background:#fff;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.kv-left{
  position:relative;
  background: var(--kv-bg, #FFD873); /* 기본 노랑, 슬라이드별 커스텀 가능 */
  display:flex; align-items:center; justify-content:center;
  
}
.kv-illust{
  max-width:100%;
  max-height:900px;
  height:auto; object-fit:contain; display:block;    width: 100%;
}

.kv-right{
  background:#f7f7f7;  
  padding:48px 40px;
  display:flex; flex-direction:column; justify-content:center;align-items: flex-start;}
.kv-eyebrow{ font-size:22px; line-height:1; margin-bottom:12px; }
.kv_icon_01{max-width: clamp(50px, 6vw, 70px);margin-right: 20px;}
.kv_icon_02{max-width: clamp(40px, 5vw, 50px);margin-right: 20px;}
.kv_icon_03{max-width: clamp(30px, 5vw, 40px);margin-right: 20px;}
.kv-title{
  font-size:clamp(24px, 4.0vw, 60px); line-height:1.4; font-weight:800;
  color:#111; margin:0 0 14px;
}
.kv-desc{ color:#555; margin:0 0 24px; font-size: clamp(16px, 3.5vw, 40px);}

.kv-dots{ /*margin-top:auto;*/ }
.mySwiper .swiper-pagination{
  position:static;   /* 우측 패널 안으로 */
  width:auto;
}
.mySwiper .swiper-pagination-bullet{
  width:8px; height:8px; background:#bbb; opacity:1; margin:0 6px !important;
}
.mySwiper .swiper-pagination-bullet-active{ background:#111; }

.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next{
  color:#111; /* 테마 색상 맞추기 */
}

/* 메인슬라이드 영ㅇ역 */

/* 태그 백그라운드 모션 영역 */

.monthly-keywords { position: relative; padding: 120px 16px; overflow: hidden; }
.monthly-keywords .content { position: relative; z-index: 2; text-align: center;     max-width: 1105px;
    margin: auto;}
.tags_title { font-size: 4rem; font-weight: 600; margin-bottom: 20px;color:#333333;}
.tags { display: inline-flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 0; list-style: none; }
.tags li {font-size: clamp(14px, 2.2vw, 18px); font-weight: 600;color:#333333;padding: 10px 20px; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* 배경 마키 */
.bg-marquee {
  --speed: 200s;                /* 속도 조절 */
  --tint: #E0F6F8; /* 글자색(투명도 낮게) */
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}

/* 트랙 2개를 이어붙여 무한 루프 */
.marquee-track {
  position: absolute; left: 0; top: 50%;
  white-space: nowrap; line-height: 1;
  font-weight: 900; letter-spacing: .04em;
  font-size: clamp(140px, 18vw, 480px); /* 화면에 맞춰 크게 */
  color: var(--tint);
  transform: translateY(-50%); /* 수직 중앙 정렬 */
  animation: marquee var(--speed) linear infinite;
}
.marquee-track.clone { left: 100%; }

/* 좌->우로 보이게 하려면 방향 반전: animation-direction: reverse; */
@keyframes marquee {
  from { transform: translate(0, -50%); }   /* X: 0% */
  to   { transform: translate(-100%, -50%); } /* 자신의 폭만큼 왼쪽으로 */
}

/* 모션 줄이기(접근성) */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-duration: 0.01ms; animation-iteration-count: 1; }
}

/* 태그 백그라운드 모션 영역 */



/* 카드영역 */

/* 레이아웃 */
.cards{
  max-width: 1200px;
  margin: 24px auto;
  display: flex;
    flex-direction: column;
  gap: 50px;
}

/* 공통 카드 */
.cards .feature{
  display: flex;
  min-height: 520px;             
  background: #fff;
  border: 2px solid #222;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* 이미지 패널 */
.cards .feature-media{
  position: relative;
  background: var(--bg, #eee);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cards .feature-media img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  /*filter: drop-shadow(0 6px 20px rgba(0,0,0,.12));*/
}

/* 텍스트 패널 */
.cards .feature-body{
  background: #F7F7F7;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;flex: 1;
}
.cards .eyebrow{ font-size: 22px; line-height: 1; }
.cards .title{
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.35;
  color: #222;
  margin: 0;    text-align: justify;
}
.cards .desc{ color:#555; margin:0 0 10px;font-size: clamp(16px, 2vw, 24px);}

/* 굵은 화살표 */
.cards .arrow{
  display: inline-flex;
  margin-top: 6px;
  color: #222;
}
.cards .feature:hover .arrow{ transform: translateX(15px); transition: transform .3s ease; }

/* 반전 레이아웃 */
.cards .feature.is-reverse {flex-direction: row-reverse;}

/* 카드영역 */



/* 반응형 */
@media (max-width: 1024px){
.mySwiper{ height:380px; }
  .kv-title{ font-size:24px; }
  .kv-desc{font-size:16px;}


  .cards .feature{ min-height: 300px; }
  .cards .feature-body{ padding: 36px 28px; }

  
}
@media (max-width: 768px){
    body > div > div:not(:last-child){}
    body > div > div:last-child{margin-bottom: 85px;}
  .mySwiper{ height:auto; }         
  .kv{ grid-template-columns:1fr; } /* 상하 스택 */
  .kv-right{ padding:28px 20px;        text-align: center;align-items: center;}

  .marquee-track{top: 15%;}
.monthly-keywords{padding: 50px 5px;}
.tags li{padding: 10px 8px;}

.cards{margin:0 auto;gap: 30px;}
  .cards .feature{flex-direction: column;}
  .cards .feature.is-reverse{        flex-direction: column;}
  .cards .feature-media{ padding: 20px; }
}



/* 반응형 */
@media (max-width: 1024px){
  
}
@media (max-width: 768px){

}



.footerWrap{display: flex; justify-content: center; padding: 50px;/*border-top-left-radius: 50px;border-top-right-radius: 50px;*/}
.footer{max-width: 1920px; display: flex; justify-content: space-between; align-items: flex-start; width: 100%;}
.footerInfo { display: flex; flex-direction: column; color: #6E7780; font-size: 1.2rem; font-weight: 500; align-items: flex-start;}

.address{font-size: 18px;}
.copyright{font-size: 14px;cursor: default;color:#999}
.share{cursor: pointer;}

.fLogo{cursor: pointer;}
.f-link-wrap{display: flex; align-items: center; gap: 35px;}
.f-link-box{display: flex; align-items: center; gap: 10px;}
.f-share-link-box{display: flex; align-items: center; gap: 15px;}
.f-link{display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; background: #333; color:#FFF;border-radius: 999px; padding:10px 20px;}

.f-share-link-box > a img{max-width: 42px;;}

@media (max-width: 1400px){
    .fLogo img{width: 100%; height: auto;}
    .address{font-size: 12px;}
    .copyright{font-size: 12px;}

    .f-share-link-box a{width: 40px; height: auto;}
    .f-link-wrap{gap: 20px;}
    .f-link{font-size: 16px; }
}

@media (max-width: 1024px){
    .footerWrap {flex-direction:column;padding:3.2rem 1.6rem;}
    .fLogo img{width: 100%; height: auto;}
    .address{font-size: 12px;}
    .copyright{font-size: 12px;}

    .f-share-link-box a{width: 30px;}
    .f-link-wrap{display: flex;
        align-items: center;
        flex-direction: column-reverse;}
    .f-link{font-size: 12px; gap:8px; padding: 5px 10px;}
    .f-link img{width: 14px;}
}
@media (max-width: 768px){
    .footer{display: flex;
        width: 100%;
        align-items: center;
        flex-direction: column; gap: 10px;
        padding-bottom: 15px;}
    .f-link-wrap{gap: 10px;}
    .footerInfo{align-items: center;}
}
@media (max-width: 465px){
    .address{flex-direction: column;
        align-items: center;}
    .address .tel::before{content: none;}
}

/*subtopimg*/
.subVisualArea .infoBox {border-bottom-left-radius: 80px;}
.subVisualArea .inner .img {border-bottom-right-radius: 80px;}

.contentsBox {background-color:#fff;border-radius:16px;padding:8rem 1rem;border-top-right-radius: 80px;border-top-left-radius: 80px;}

/*QuickMenu*/
.quickSlider {margin:8rem 0;overflow:hidden;}
.quickList {display:flex;}
.quickList li {width:21.2rem;height:21.2rem;border-radius:50%;overflow:hidden;border-radius:50%;}
.quickList li a {position:relative;display:flex;width:100%;height:100%;align-items:center;justify-content:center;border-radius:50%;}
.quickList li a >img{width: 100%; height: 100%; object-fit: cover; object-position: center;border-radius:50%;}
.quickList li a::after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(74, 79, 84, 0.8);transition:all 0.3s ease-in-out;opacity:0;border-radius:50%;}
.quickList li .tit {position:absolute;color:#fff;font-size:1.8rem;font-weight:700;z-index:1;opacity:0;}
.quickList li a:hover::after,
.quickList li a:hover .tit {opacity:1;}
.quickSlider .swiper-button-prev,
.quickSlider .swiper-button-next {width:5.6rem;height:5.6rem;border:1px #808890 solid;border-radius:50%;z-index:2;}
.quickSlider .swiper-button-next:after,
.quickSlider .swiper-button-prev:after {font-size:2rem;color:#000}
.quickSlider .swiper-button-next {right:-8rem;}
.quickSlider .swiper-button-prev {left:-8rem}

@media all and (max-width:1024px){

 .quickSlider .swiper-button-prev, 
 .quickSlider .swiper-button-next {display:none;}
 .quickSlider {margin:4rem 1.2rem;}

}
@media all and (max-width:768px){
.quickSlider {margin:4rem 1.2rem;}
}


/*QuickMenu*/
.quickList li a::after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(232, 90, 98, 0.8);transition:all 0.3s ease-in-out;opacity:0;border-radius:50%;}
.quickSlider .swiper-button-prev,
.quickSlider .swiper-button-next {width:5.6rem;height:5.6rem;border:1px #fff solid;border-radius:50%;z-index:2; background: #d6f5ff;}
.quickSlider .swiper-button-next:after,
.quickSlider .swiper-button-prev:after {font-size:2rem;color:#000}
.quickSlider .swiper-button-next {right:-8rem;}
.quickSlider .swiper-button-prev {left:-8rem}


/*서브페이지 상하단*/
:root{
  --fg:#222;
  --muted:#555;
  --line:#eee;
  --gap: clamp(8px, 1.2vw, 16px);
  --icon: clamp(22px, 2vw, 26px);
  --label: clamp(11px, 1.1vw, 14px);
}

.page-top{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--gap); 
  color: var(--fg);
  max-width: 1200px;
    margin: auto;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
      max-width: 856px;
    margin: 150px auto 0;
    border-top: 2px solid #333333;
    padding-top: 20px;

}
.footer-actions {
  display: flex;
  gap: 8px;
}
.footer-actions .btn {
  display: inline-block;
  padding: 6px 14px;
  background: #1B6BBC;
  color: #fff;
  border-radius: 1px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.breadcrumb{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--fg);}
.breadcrumb .home-ico{display:inline-flex; color:#444;}
.crumb-text{font-weight:500;}

.share{display:flex; align-items:center; gap: clamp(10px, 2vw, 12px); color:var(--muted);}
.share-label{font-size:16px; white-space:nowrap;cursor: default;   font-weight: 500; padding: 0 12px;color:#333;}

.share-btn{
  display:inline-flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; color:var(--fg);
  outline:none; border:0; background:none; cursor:pointer;
}
.share-btn .ico{
  display:grid; place-items:center;
  width:50px; height:50px; border-radius:999px; 
  font-weight:700; font-size: var(--icon); line-height:1;
}
.share-btn .ico{
  display:grid; place-items:center;
  width:50px; height:50px; border-radius:999px; 
  font-weight:700; font-size: var(--icon); line-height:1;
}
.share-btn .ico img{max-width: var(--icon);}
.share-btn .ico.b{font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
.share-btn .ico.x{font-weight:800;}
.share-btn .ico.f{font-weight:800;}
.share-btn .label{font-size: var(--label); color:var(--muted);}

.share-btn:hover .ico{background-color: #fff;}
.share-btn:focus-visible .ico{outline:2px solid #000; outline-offset:2px;}

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:#111; color:#fff; padding:8px 12px; border-radius:8px;
  font-size:12px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;z-index: 999;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0);}


.sns_share{position: absolute;
    right: -340px;
    bottom: 0;
    width: 264px;
    padding: 18px 25px 20px;
    background: #F3F5F8;
    border: 1px solid #D4D4D4;
    transition: all 0.3s;
    border-radius: 10px;}
.sns_share.on{right: 58px;}
@media (max-width:1220px){
  .page-top{padding: 0 20px;}
}
@media (max-width:520px){
  .page-top{flex-wrap:wrap; row-gap:8px;}
  .share{}
}

/*구독신청 모달*/
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); /* ✅ 회색 오버레이 */
}

/* 모달 내용 박스 */
.modal-content {
  background: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 10px solid #1B6BBC;
  width: 100%;
  max-width: 480px;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease; /* 부드러운 애니메이션 */
  color:#333;
      line-height: 27px;
}

.modal-content h2{    text-align: center;margin: 20px 0 35px;
    font-size: 29px;
    font-weight: 500;
    color: #2d2d2f;
    text-align: center;
    letter-spacing: -2px;
}
.modal-content p{    margin-bottom: 20px;
    padding: 25px 30px;
    font-size: 16px;
    background: #f8f8f8;}
.modal-content h2 span{    color: #1B6BBC;}
.modal-content .row{background: #1B6BBC;text-align: center;padding: 15px;display: flex;gap: 15px;    align-items: center;justify-content: center;}
.modal-content .row span{color:#fff;font-size: 20px;font-weight: 700;width: 100%;max-width: 55px;}
.modal-content .row img{height: fit-content;}
.modal-content .row input{height: 25px;    padding: 5px;    min-width: 100px;}
.modal-content button{margin: 20px auto;    display: block;    background: #d05151;    color: #fff;    padding: 5px 20px;
}
.modal-content button:nth-child(2){background: #4a4a4a;
}


/* 닫기 버튼(X) */
.close {
  position: absolute;
  right: 20px; top: 10px;
  font-size: 40px;
  cursor: pointer;
}

/* 애니메이션 */
@keyframes fadeIn {
  from {opacity: 0; transform: scale(0.9);}
  to {opacity: 1; transform: scale(1);}
}

#subscribeModal .modal-content.cancel { display: none; }

#subscribeModal.show-cancel .modal-content.apply { display: none; }
#subscribeModal.show-cancel .modal-content.cancel { display: block; }