@charset "UTF-8";

img { display: block; }
.imageblock {border: 0px; padding: 0px; margin: 0px;}

/**
 * [커버] 유튜브 스타일 변경
 * 로고 이미지의 변경은 HTML > 119 ~ 120번째줄 참고
 */
/* 배경 */
.cover-youtube {
    background-color: #6361ff; /*#771df1;*/ /*#DEDDF4;*/    /*배경*/
}
/* 버튼 - 기본 */
.cover-youtube .data .btn {
    color: #DEDDF4;             /*글자*/
    background-color: #2E008B;  /*배경*/
    border-color: #2E008B;      /*테두리*/
}
/* 버튼 - 마우스오버 */
.cover-youtube .data .btn:hover {
    color: #2E008B;             /*글자*/
    background-color: #6361ff; /*#771df1;*/ /*#DEDDF4;*/    /*배경*/
    border-color: #ffffff; /*#2E008B;*/     /*테두리*/
}
/* 메뉴 */
.jmenu a { padding: 10px !important; }
@media (max-width: 874px) {
    .gnb {
        display: none !important;
    }
    #header .sidebar-btn {
        display: block !important;
    }
}


.cover-youtube-wrapper {
    margin-top: 6em;
}
.cover-youtube-wrapper .title {
    margin-bottom: calc(60*100vw/1920);
    font-size: 35pt;
}
@media (max-width: 769px) {
    .cover-youtube-wrapper .title { font-size: 20pt; }
}
@media (max-width: 400px) {
    .cover-youtube-wrapper .title { font-size: 12pt; }
}

.cover-youtube-container {
    background-color: #fff;
    height: auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.cover-youtube-container > div {
    display: flex;
    flex-direction: column;
    /* flex: 1 1; */
    
}
.cover-youtube-container .youtube-container {
    position: relative;
    float: left;
    display: inline-block;
    width: 91%;
}
.cover-youtube-container .youtube {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}
.cover-youtube-container .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}
.cover-youtube-container .data {
    float: left;
    width: 9%;
    position: relative;
}
.cover-youtube-container .data .data-container {
    position: relative;
    height: 100%;
}
.cover-youtube-container .data .logo {
    float: right;
}
.cover-youtube-container .data .title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #868686;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    letter-spacing: -0.1em;
}

.cover-youtube-container .data .title,
.cover-youtube-container .data .logo {
    display: none;
}

@media screen and (max-width: 767px) {
    .cover-youtube-container {
        display: block;
    }
    .cover-youtube-container .youtube-container {
        width: 100%;
        float: right;
    }
    .cover-youtube-container .data {
        display: none;
    }
}



/**
 * 추가 CSS
 * 스킨 개발에 작성된 CSS보다 더 높은 우선권을 가집니다.
 */
.container-lg { max-width: 1300px; }
 #header .container-lg { max-width: 1640px; }

/**
 * slider
 */
.cover-slider a {
    height: calc(600*100vw/1920);
    max-height: 600px;
    background-position: center center;
}
@media (max-width: 768px) {
    /* .cover-slider a { height: 240px; } */
    .cover-youtube-wrapper { margin-top: calc(6em*768/1052); } 
}

@media (max-width: 400px) {
    /* .cover-slider a { height: 164px;} */
    .cover-youtube-wrapper { margin-top: calc(6em*400/1052); } 
}
.cover-slider li {
    border-radius: 0 !important;
}

.container-fluid { width: 100%; max-width: 1920px; margin-left: auto; margin-right: auto; }
.cover-slider {  width: 100%; max-width: 1920px; }


@font-face {
    font-family: 'NewHyosungBold';
    font-style: normal;
    font-weight: 800;
    src: url(images/Brand_New_Hyosung_OTF_Bold.otf') format('opentype');
}
@font-face {
    font-family: 'NewHyosungMedium';
    font-style: normal;
    src: url(images/Brand_New_Hyosung_OTF_Medium.otf') format('opentype');
}
@font-face {
    font-family: 'NewHyosungLight';
    font-style: normal;
    src: url(images/Brand_New_Hyosung_OTF_Light.otf') format('opentype');
}

.tabs-content { padding-bottom: 100px; }

.justify-content-center { justify-content: center !important; }
ul.tabs { padding: 100px 0; display: flex; flex-wrap: wrap; list-style: none; margin: 0; }
ul.tabs li { float: left; margin: 0; padding: 0; }
ul.tabs li a { display: block; color: #032cd5; padding: 12px 17px; text-decoration: none; cursor: pointer;  border-radius: 40px; }
ul.tabs li a:hover { font-weight: bole; }
ul.tabs li a.active { border: solid 2px #032cd5; font-weight: bold; }

div[role="tabpanel"] { display: none; }
.tabs-content.active { display: block !important; }

.tabs-content ul { padding: 0; margin: 0 -15px; display: flex; flex-wrap: wrap; list-style: none; }
.tabs-content li { width: 25%; margin: 0; padding: 0 15px; display: list-item; }
.tabs-content-item a { position: relative; }
.tabs-content-item .thumb img { width: 100%; }
.tabs-content-item .article-desc { 
    display: none;
    position: absolute; 
    top: calc(50*100%/446); 
    bottom: calc(30*100%/446); 
    left: calc(25*100%/307);
    right: calc(25*100%/307);
}
.tabs-content-item .article-desc .title { 
    color: #fff; 
    font-family: 'NewHyosungBold'; 
    font-size: 2.1em; 
    line-height: 1.1em; 
}
.tabs-content-item .article-desc .bottom { 
    position: absolute;
    bottom: 0; 
    left: 0;
    right: 0;
    display: flex; 
    flex-direction: row; 
    align-items: flex-end; 
}
.tabs-content-item .article-desc .desc { 
    flex-grow: 1; 
    color: #fff; 
    font-family: 'NewHyosungMedium'; 
    font-size: 1.6em; 
    line-height: 1.2em;
    letter-spacing: -0.05em;
    padding-right: 8px;
}
.tabs-content-item .article-desc .more {
    width: calc(43*100%/307);
}

@media (max-width: 768px) {
    .cover-slider a { height: 240px; }
    ul.tabs { padding: 75px 0 60px; }
    ul.tabs li a { padding: 9px 12px; }
    .tabs-content { padding-bottom: 70px; }
    .tabs-content ul { margin: 0; }
    .tabs-content li { width: 50%; padding: 0; margin: 8px 0; }
    .tabs-content li:nth-child(odd) { padding-right: 8px; }
    .tabs-content li:nth-child(even) { padding-left: 8px; }
    .tabs-content-item .article-desc .title { font-size: 1.8em; }
    .tabs-content-item .article-desc .desc { font-size: 1.45em; }
}
@media (max-width: 568px) {
    .cover-slider a { height: 164px; }
    ul.tabs { padding: 40px 0 35px; }
    ul.tabs li a { padding: 5px 10px; }
    .tabs-content { padding-bottom: 40px; }
    .tabs-content ul { margin: 0; }
    .tabs-content li { width: 50%; }
    .tabs-content li { width: 50%; padding: 0; margin: 4px 0; }
    .tabs-content li:nth-child(odd) { padding-right: 4px; }
    .tabs-content li:nth-child(even) { padding-left: 4px; }
    .tabs-content-item .article-desc .title { font-size: 1.5em; }
    .tabs-content-item .article-desc .desc { font-size: 1.2em; }
}

/* hot keyword */
.cover-keywords {
    display: table;
    width: 100%;
    margin-top: 3em;
    margin-bottom: 3em;
}

.cover-keywords .title-sup {
    font-size: 1.5em;
    letter-spacing: -0.05em;
    display: block;
    color: #032cd5;
    font-family: 'NewHyosungBold';
    font-weight: bold;
}
.cover-keywords h3.title {
    font-size: 4em;
    font-family: 'NewHyosungLight';
    letter-spacing: -0.05em;
    border-bottom: 3px solid #000;
    padding-bottom: 45px;
    margin-bottom: 40px;
    line-height: 1em;
}
.cover-keywords .keywords ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    align-items: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
    /* padding: 2em 0 0; */
}
.cover-keywords .keywords li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.cover-keywords .keywords li.keyword a {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-right: 20px;
    margin-top: 15px;
}
.cover-keywords .keywords li.keyword a:hover {
    cursor: pointer;
}
/* 태그 텍스트 */
.cover-keywords .keywords li.keyword a .tag {
    font-size: 3em;
    line-height: 1.2em;
    color: #000;
    font-weight: bold;
    font-family: 'NewHyosungBold';
}
.cover-keywords .keywords li.keyword a:hover .tag {
    color: #270089 !important;
    font-size: 3.3em;
    line-height: 1.2em;
}
.cover-keywords .keywords li.keyword .tag_img {
    padding-left: 10px;
}
.cover-keywords .keywords li.keyword .tag_img img {
    max-height: 52px;
    display: block;
}
.cover-keywords .keywords li.keyword .tag_subtext {
    color: #7d7d7d;
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 0.4em;
    padding-left: 10px;
    letter-spacing: -0.1em;;
    white-space: nowrap;
}

.cover-keywords .keywords-thumb img {
    width: 100%;
    max-width: 100%;
}
@media screen and (max-width: 767px) {
    .cover-keywords > div {
        display: block;
        width: 100%;
    }           
    .cover-keywords .keywords-thumb {
        margin-top: 2em;
    }
}

@media (max-width: 768px) {
    .cover-keywords .title-sup { font-size: 1em; }
    .cover-keywords h3.title { font-size: 3em; padding-bottom: 35px; margin-bottom: 30px; }
    .cover-keywords .keywords li.keyword a { padding-right: 14px; margin-top: 14px; }
    .cover-keywords .keywords li.keyword a .tag { font-size: 1.4em;}
    .cover-keywords .keywords li.keyword .tag_img { padding-left: 7px; }
    .cover-keywords .keywords li.keyword .tag_img { padding-bottom: 5px; }
    .cover-keywords .keywords li.keyword .tag_img img { max-height: 39px; }
    .cover-keywords .keywords li.keyword .tag_subtext { font-size: 1em; padding-left: 7px;}
}
@media (max-width: 400px) {
    .cover-keywords .title-sup { font-size: 0.8em; }
    .cover-keywords h3.title { font-size: 2em; padding-bottom: 17px; margin-bottom: 15px; }
    .cover-keywords .keywords li.keyword a { padding-right: 8px; margin-top: 8px; }
    .cover-keywords .keywords li.keyword a .tag { font-size: 1.4em;}
    .cover-keywords .keywords li.keyword .tag_img { padding-left: 5px; }
    .cover-keywords .keywords li.keyword .tag_img img { max-height: 25px; }
    .cover-keywords .keywords li.keyword .tag_subtext { font-size: 0.8em; padding-left: 5px; }
}

/* <div data-tistory-react-app="Namecard>...</div> 수정 */
div[data-tistory-react-app="Namecard"] {
    padding: 0 9px;
}
.tt_box_namecard {
    width: 100%;
    max-width: 1282px;
    margin-left: auto;
    margin-right: auto;
}

/* 메뉴 사이즈 조정 */
.jmenu a.gnb {
    font-size: 1.5em !important;
}

section#list .container,
section#post .container,
section#post .container {
    max-width: 1300px !important;
}


/* cover-grid-2x2 */
.cover-grid-2x2 {}
.cover-grid-2x2 .title { 
    font-size: 4em;
    font-family: 'NewHyosungLight';
    letter-spacing: -0.05em;
    color: #183dd7;
    margin-top: 40px;
    margin-bottom: 30px;    
}
.cover-grid-2x2 ul { padding: 0; list-style: none; margin: 0 -15px; display: flex; flex-wrap: wrap; }
.cover-grid-2x2 ul li { padding:10px; margin: 0; width: 50%; display: list-item; }
.cover-grid-2x2 ul li img { width: 100%; }
@media (max-width: 769px) {
}
@media (max-width: 400px) {
    .cover-grid-2x2 .title { font-size: 2em; margin-top: 20px; margin-bottom: 20px;;}
    .cover-grid-2x2 ul { margin: 0 -10px; }
}

/* full-width */
.cover-full-width {}
.cover-full-width a { 
    height: calc(600*100vw/1920); 
    display: block; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    position: relative; 
}
.cover-full-width .texts {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    color: #fff; 
    font-family: 'NewHyosungLight'; 
    letter-spacing: -0.05em;
    text-align: center;
    font-size: 30pt;
    width: 100%;
}
.cover-full-width .texts h1 { line-height: 1; margin-bottom: 30pt; font-weight: bold; }
.cover-full-width .texts p {
    line-height: 1.5em;
    font-weight: bold;
    font-size: 0.6em;
}
@media (max-width: 769px) {
    .cover-full-width .texts { font-size: 20pt; }
    .cover-full-width .texts h1 { margin-bottom: 20pt; }
    .cover-full-width .texts p { }
}
@media (max-width: 400px) {
    .cover-full-width .texts { font-size: 11pt; }
    .cover-full-width .texts h1 { margin-bottom: 10pt; }
    .cover-full-width .texts p { font-size: 0.8em}
}
/* slide pieces */
.slide-pieces { padding: 4em 0 3em; }
.slide-pieces .title {
    font-size: 4em;
    margin-bottom: 60px;
    font-family: 'NewHyosungLight';
    color: #183dd7;
}
.slider-pieces-4,
.slider-pieces-3 { overflow: hidden; }
ul.slide-pieces { margin: 0; padding: 0; list-style: none; }
ul.slide-pieces li { padding: 0; overflow: hidden; }
.slide-pieces .slide-pieces-pagination {
    /* display: none; */
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    padding-top: 20px;
}
.slide-pieces-pagination .slide-pieces-pagination-bullet {
    display: block;
    margin: 0 5px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    border: 0;
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
    /* background-color: #183dd7; */
    background-color: #ccc;
}
.slide-pieces-pagination .slide-pieces-pagination-bullet-active {
    width: 30px;
}

.slide-pieces-container { position: relative; }
div[class^='slide-pieces-button-'] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
}
.slide-pieces-button-prev { left: -70px; }
.slide-pieces-button-next { right: -70px; }

.cover-full-width {
    padding: 5em 0;

}
@media (max-width: 769px) {
    .slide-pieces .slide-pieces-pagination { display: none; }
    .cover-full-width { padding: 30px 0; }
    .slide-pieces { padding: 1em 0; }
    .slide-pieces .title { font-size: 3em; margin-top: 10px; margin-bottom: 10px; }
}
@media (max-width: 400px) {
    .slide-pieces .slide-pieces-pagination { display: flex; }
    .cover-full-width { padding: 20px 0; }
    .slide-pieces { padding: 1em 0; }
    .slide-pieces .title { font-size: 2em; margin-top: 10px; margin-bottom: 10px; }
}