@charset "utf-8";

/***************** 사랑의열매 서브 메인 css 추가 *****************/
/* font */
@import url("/common/mainRenewal2023/css/font.css");

.cck-wrap { font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD 산돌고딕 Neo', sans-serif; padding-top: 259px; }
.cck-wrap button { font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD 산돌고딕 Neo', sans-serif; }

.cck-wrap .sub-tit { display: block; font-size: 36px; font-weight: 800; color: #1F2937; line-height: 1.1; }
.cck-wrap .title-wrap { display: flex; align-items: center; justify-content: space-between; }
.cck-wrap .btn-more { border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border: 1px solid #645F60; padding: 13px 32px; font-size: 20px; font-weight: 600; color: #808080; line-height: 1.0; background-color: #fff; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
.cck-wrap li a .btn-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #8B8788; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; flex-shrink: 0; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
.cck-wrap li a .btn-link::after { content: ""; display: block; width: 9px; height: 12px; background-image: url(../img/common/icon_more.svg); background-repeat: no-repeat; background-size: 9px 12px; }
.cck-wrap li a .btn-link.red { background-color: #E30613; border: none; }
.cck-wrap li a .btn-link.red::after { background-image: url(../img/common/icon_more_w.svg); }

.cck-section-1 { padding-bottom: 164px; }
.cck-section-1 .headline-wrap h2 > strong { font-size: 120px; font-weight: 800; color: #1F1F1F; line-height: 1.1; margin-bottom: 18px; }
.cck-section-1 .headline-wrap p { font-size: 40px; color: #334155; }
.cck-section-1 .sub-menu-wrap { padding-top: 110px; display: flex; }
.cck-section-1 .sub-menu-wrap li { width: 100%; padding-right: 46px; }
.cck-section-1 .sub-menu-wrap li + li { border-left: 1px solid #6D6D6D; padding-left: 79px; padding-right: 0; }
.cck-section-1 .sub-menu-wrap li a { position: relative; display: block; }
.cck-section-1 .sub-menu-wrap li a > strong { display: block; font-size: 32px; font-weight: bold; color: #334155; margin-bottom: 22px; }
.cck-section-1 .sub-menu-wrap li a > span { font-size: 18px; font-weight: 500; color: #334155; }
.cck-section-1 .sub-menu-wrap li a .btn-link { margin-top: 26px; }

.cck-section-2 { position: relative; }
.cck-section-2 .banner-wrap.slick-dotted.slick-slider { margin-bottom: 0; }
.cck-section-2 .banner-wrap .banner-item { position: relative; width: 100%; height: 839px; background-repeat: no-repeat; background-position: center; background-size: cover; }
/* .cck-section-2 .banner-wrap .banner-item::after { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); position: absolute; top: 0; left: 0; } */
.cck-section-2 .banner-wrap .banner-item.banner1 { background-image: url(../img/cck/banner_list01.jpg); }
.cck-section-2 .banner-wrap .banner-item.banner2 { background-image: url(../img/cck/banner_list02.jpg); }
.cck-section-2 .banner-wrap .banner-item.banner3 { background-image: url(../img/cck/banner_list03.jpg); }
.cck-section-2 .banner-wrap .banner-item .txt-wrap { max-width: 880px; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); text-align: center; width: 100%; padding: 0 24px; z-index: 1; }
.cck-section-2 .banner-wrap .banner-item .txt-wrap strong { display: block; font-size: 58px; font-weight: bold; color: #fff; line-height: 1.3; margin-bottom: 10px; }
.cck-section-2 .banner-wrap .banner-item .txt-wrap p { font-size: 28px; font-weight: 500; line-height: 1.3; color: #fff; }
.cck-section-2 .banner-wrap .slick-dots { display: flex; align-items: center; justify-content: center; gap: 30px; bottom: 34%; left: 50%; transform: translateX(calc(-50% - 10px)); -webkit-transform: translateX(calc(-50% - 10px)); -moz-transform: translateX(calc(-50% - 10px)); -ms-transform: translateX(calc(-50% - 10px)); -o-transform: translateX(calc(-50% - 10px)); }
.cck-section-2 .banner-wrap .slick-dots li { position: relative; width: 16px; height: 16px; background-color: rgba(255,255,255,.5); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; margin: 0; }
/* .cck-section-2 .banner-wrap .slick-dots li + li::before { content: ""; display: block; width: 34px; height: 1px; background-color: rgba(255,255,255,.5); position: absolute; top: 50%; left: -34px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } */
.cck-section-2 .banner-wrap .slick-dots li button { width: 16px; height: 16px; text-indent: -9999px; overflow: hidden; }
.cck-section-2 .banner-wrap .slick-dots li button:before { width: 16px; height: 16px; }
.cck-section-2 .banner-wrap .slick-dots li button:focus-visible { outline: 2px solid #2460C5; }
.cck-section-2 .banner-wrap .slick-dots li.slick-active { background-color: #D41616; }

.cck-section-2 .controls-wrap { width: 16px; height: 16px; position: absolute; bottom: 35.2%; left: calc(50% - -82px); transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
.cck-section-2 .controls-wrap > button { width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain; }
.cck-section-2 .controls-wrap .btn-pause { background-image: url(../img/cck/icon_pause.svg); }
.cck-section-2 .controls-wrap .btn-play { display: none; background-image: url(../img/cck/icon_play.svg); }


.cck-section-3 { padding-top: 108px; padding-bottom: 127px; background-color: #F4F3F8; }
.cck-section-3 .title-wrap { margin-bottom: 34px; }
.cck-section-3 .tab-menu { display: flex; gap: 5px; padding-left: 47px; }
.cck-section-3 .tab-menu li { background-color: #6B7280; border-top-left-radius: 32px; border-top-right-radius: 32px; }
.cck-section-3 .tab-menu li > button { padding: 16px 30px; font-size: 20px; font-weight: bold; color: #fff; }
.cck-section-3 .tab-menu li.active { background-color: #fff; }
.cck-section-3 .tab-menu li.active > button { color: #808080; }
.cck-section-3 .tab-contents-wrap [class*="tab-"] { display: none; max-width: 1426px; width: 100%; background-color: #fff; border-radius: 32px; -webkit-border-radius: 32px; -moz-border-radius: 32px; -ms-border-radius: 32px; -o-border-radius: 32px; padding: 32px 80px 32px 67px; }
.cck-section-3 .tab-contents-wrap [class*="tab-"].active { display: block; }
.cck-section-3 .tab-contents-wrap [class*="tab-"] .canvas-wrap { position: relative; overflow: hidden; padding-left: 51px; }
.cck-section-3 .tab-contents-wrap [class*="tab-"] .canvas-inner { width: 100%; height: 100%; overflow-x: auto; }
.cck-section-3 .tab-contents-wrap [class*="tab-"] .canvas-inner > canvas { margin: 0 auto; position: relative; z-index: 1; }
.cck-section-3 .tab-contents-wrap [class*="tab-"] .canvas-wrap .yAxes { position: absolute; bottom: 18px; left: 0; pointer-events: none; }
.cck-section-3 .chart-legend { display: flex; flex-direction: row-reverse; gap: 38px; }
.cck-section-3 .chart-legend > span { font-size: 16px; color: #808080; }
.cck-section-3 #chartLegend ul { display: flex; gap: 22px; }
.cck-section-3 #chartLegend ul li { font-size: 16px; color: #808080; }
.cck-section-3 #chartLegend ul li span { display: inline-block; width: 11px; height: 11px; margin-right: 5px; }
.cck-section-3 .tab-contents-wrap .tab-1 .canvas-inner { padding-top: 80px; }
.cck-section-3 .tab-contents-wrap .tab-2 .canvas-inner { padding-top: 50px; }
.cck-section-3 .tab-contents-wrap .tab-3 .canvas-inner { padding-top: 50px; }
/* 웹접근성 관련 작업 */
.cck-section-3 .acce-list-hidden { width: 100%; height: 95%; position: absolute; top: 0; left: 0; }
.cck-section-3 .acce-list-hidden:focus-visible { border: 2px solid #2460C5; }

.cck-section-4 { padding-top: 118px; padding-bottom: 140px; }
.cck-section-4 .title-wrap { margin-bottom: 90px; }
.cck-section-4 .list-wrap { display: flex; justify-content: space-between; gap: 32px; }
.cck-section-4 .list-wrap .list-item ul > li { border-bottom: 1px solid #BEBEBE; }
.cck-section-4 .list-wrap .item1 { max-width: 578px; width: 100%; }
.cck-section-4 .list-wrap .item1 ul > li:nth-child(n+4) { display: none; }
.cck-section-4 .list-wrap .item1 ul > li > div { display: flex; justify-content: space-between; width: 100%; padding: 24px 0 22px; }
.cck-section-4 .list-wrap .item1 ul > li .info-area { width: 100%; }
.cck-section-4 .list-wrap .item1 ul > li .info-area > span { display: block; }
.cck-section-4 .list-wrap .item1 ul > li .info-area .name { font-size: 24px; font-weight: bold; color: #000; line-height: 1.3; }
.cck-section-4 .list-wrap .item1 ul > li .info-area .desc { margin: 14px 0 11px; }
.cck-section-4 .list-wrap .item1 ul > li .info-area .desc,
.cck-section-4 .list-wrap .item1 ul > li .info-area .date { font-size: 18px; color: #000; line-height: 1.4;}
.cck-section-4 .list-wrap .item1 ul > li .image-area { max-width: 190px; width: 100%; height: 146px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; overflow: hidden; }
.cck-section-4 .list-wrap .item1 ul > li .image-area > img { width: 100%; height: 100%; object-fit: cover; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
.cck-section-4 .list-wrap .item2 { max-width: 698px; width: 100%; }
.cck-section-4 .list-wrap .item2 ul > li:nth-child(n+6) { display: none; }
.cck-section-4 .list-wrap .item2 ul > li > a { display: flex; align-items: center; gap: 18px; padding: 34px 12px 34px 4px; }
.cck-section-4 .list-wrap .item2 .icon-area { width: 47px; height: 47px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.cck-section-4 .list-wrap .item2 .icon-area::after { content: ""; display: block; width: 47px; height: 47px; background-repeat: no-repeat; background-size: 20px 20px; background-position: center; }
.cck-section-4 .list-wrap .item2 .icon-area.notice { background-color: #D41616; }
.cck-section-4 .list-wrap .item2 .icon-area.notice::after { background-image: url(../img/cck/icon_notice.svg); }
.cck-section-4 .list-wrap .item2 .icon-area.news { background-color: #CC21F6; }
.cck-section-4 .list-wrap .item2 .icon-area.news::after { background-image: url(../img/cck/icon_news.svg); }
.cck-section-4 .list-wrap .item2 .list-txt { width: calc(100% - 123px); }
.cck-section-4 .list-wrap .item2 .list-txt > strong { display: block; font-size: 24px; font-weight: bold; color: #1F2937; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cck-section-4 .list-wrap .item2 .list-txt > span { display: block; font-size: 18px; color: #1F2937; line-height: 1.3; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media all and (max-width:1024px){
    .cck-wrap { padding-top: 224px; }
    .cck-wrap .sub-tit { font-size: 28px; }
    .cck-wrap .btn-more { height: 31px; line-height: 28px; font-size: 14px; padding: 0 18px 0 18px; }

    .cck-section-1 { padding-bottom: 51px; }
    .cck-section-1 .headline-wrap h2 > strong { font-size: 60px; }
    .cck-section-1 .headline-wrap p { font-size: 22px; }
    .cck-section-1 .sub-menu-wrap { flex-direction: column; padding-top: 61px; }
    .cck-section-1 .sub-menu-wrap li { padding: 49px 0; }
    .cck-section-1 .sub-menu-wrap li + li { padding-left: 0; border-left: none; border-top: 1px solid #6D6D6D; }
    .cck-section-1 .sub-menu-wrap li a .btn-link { margin-top: 0; position: absolute; top: 4px; right: 0; }

    .cck-section-2 .banner-wrap .banner-item { height: 420px; }
    .cck-section-2 .banner-wrap .banner-item .txt-wrap { max-width: 338px; top: 45%; }
    .cck-section-2 .banner-wrap .banner-item .txt-wrap strong { font-size: 28px; margin-bottom: 15px; }
    .cck-section-2 .banner-wrap .banner-item .txt-wrap p { font-size: 16px; }
    .cck-section-2 .banner-wrap .slick-dots { gap: 20px; bottom: 36px; }
    .cck-section-2 .controls-wrap { bottom: 45px; left: calc(50% - -62px); }
    .cck-section-2 .controls-wrap > button { width: 16px; height: 16px; }

    .cck-section-3 { padding-top: 100px; padding-bottom: 45px; }
    .cck-section-3 .tab-menu { display: none; }
    .cck-section-3 .tab-contents-wrap [class*="tab-"] { display: block; padding: 35px 34px; }
    .cck-section-3 .tab-contents-wrap [class*="tab-"] + [class*="tab-"] { margin-top: 30px; }
    .cck-section-3 .tab-contents-wrap [class*="tab-"] .canvas-inner { padding-top: 70px; }
    .cck-section-3 .chart-legend { flex-direction: column; gap: 47px; }
    .cck-section-3 .chart-legend .txt-area { display: flex; justify-content: space-between; align-items: center; }
    .cck-section-3 .chart-legend .txt-area p { font-size: 20px; font-weight: bold; color: #808080; }

    .cck-section-4 { padding-top: 72px; padding-bottom: 120px; }
    .cck-section-4 .default-wrap.new.big { padding-left: 0; padding-right: 0; }
    .cck-section-4 .list-wrap { flex-direction: column; gap: 80px; }
    .cck-section-4 .title-wrap { margin-bottom: 39px; padding-left: 24px; padding-right: 24px; }
    .cck-section-4 .list-wrap .item1 { max-width: 100%; }
    .cck-section-4 .list-wrap .item1 ul { display: flex; gap: 20px; overflow-x: auto; padding-left: 24px; padding-right: 24px; padding-bottom: 20px; }
    .cck-section-4 .list-wrap .item1 ul::-webkit-scrollbar { width: 3px; height: 3px; background-color: transparent; }
    .cck-section-4 .list-wrap .item1 ul::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.3); border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; }
    .cck-section-4 .list-wrap .item1 ul::-webkit-scrollbar-track { margin-left: 24px; margin-right: 24px; }
    .cck-section-4 .list-wrap .item1 ul > li { max-width: 190px; border-bottom: none; }
    .cck-section-4 .list-wrap .item1 ul > li:nth-child(n+4) { display: block; }
    .cck-section-4 .list-wrap .item1 ul > li:nth-child(n+11) { display: none; }
    .cck-section-4 .list-wrap .item1 ul > li > div { flex-direction: column-reverse; gap: 12px; padding: 0; }
    .cck-section-4 .list-wrap .item1 ul > li .image-area { min-width: 190px; }
    .cck-section-4 .list-wrap .item1 ul > li .info-area .desc { font-size: 16px; margin: 5px 0; }
    .cck-section-4 .list-wrap .item1 ul > li .info-area .date { font-size: 12px; }
    .cck-section-4 .list-wrap .item2 { max-width: 100%; }
    .cck-section-4 .list-wrap .item2 ul { padding-left: 24px; padding-right: 24px; }
    .cck-section-4 .list-wrap .item2 ul > li > a { padding: 20px 0; }
    .cck-section-4 .list-wrap .item2 ul > li:first-child > a { padding-top: 0; }
    .cck-section-4 .list-wrap .item2 .list-txt > strong { font-size: 20px; display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .cck-section-4 .list-wrap .item2 .list-txt > span { font-size: 16px; margin-top: 5px; display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

}

@media all and (max-width:640px){
    .cck-section-2 .banner-wrap .banner-item .txt-wrap { top: 40%; }
    /* .cck-section-2 .banner-wrap .banner-item { background-position: right 50%  center; background-size: 130%; } */
}

@media all and (max-width:500px){
    /* .cck-section-2 .banner-wrap .banner-item { background-position: right 45%  center; background-size: 200%; } */
    .cck-section-4 .list-wrap .item2 ul > li > a .btn-link { display: none; }
    .cck-section-4 .list-wrap .item2 .list-txt { width: calc(100% - 65px); }
}

@media all and (min-width: 1024px){
    .cck-wrap .btn-more:hover,
    .cck-wrap .btn-more:focus-visible { background-color: #B91C1C; border-color: #B91C1C; color: #fff !important; }
    .cck-wrap li a:hover .btn-link,
    .cck-wrap li a:focus-visible .btn-link { background-color: #1a1e27 !important; border: 1px solid #1a1e27; }
    .cck-wrap li a:hover .btn-link::after,
    .cck-wrap li a:focus-visible .btn-link::after { background-image: url(../img/common/icon_more_w.svg); }

    /* .cck-section-4 .list-wrap .item1 ul > li > a:hover .image-area img { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); } */
}