@charset "utf-8";

#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: 48.9%; }
.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: 16px;}
.footnote .star-dot.star2::before{color: #b82f30; 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;}
}