@charset "utf-8";
/* ========================================================================
    Main CSS 
    Project  : AP CSR Webzine 웹사이트 구축
    Writer   : Ajin Lee (Weaverloft Corp.)
    Date     : 2026-06
    Description   : 메인 페이지 전용 css
======================================================================== */
[data-elementor-type="wp-page"]:has(.main-section) { position: relative; }
.main-section{padding:130px 0 !important;}
.main-section.e-con>.e-con-inner {gap: 0 !important; padding: 0 !important; margin: 0 !important;}
.main-section .btn-more {height: 50px;padding: 8px 24px;font-weight: 700;font-variation-settings: 'wght' 700; font-size: 1.125rem;letter-spacing: -2%;}
.main-section .btn-more i[class^="icon-"] {width: 24px; height: 24px;margin-left: 24px;}

@media screen and (max-width:768px){
    .main-section{padding:80px 0 !important;}
    .main-section .btn-more {height: 40px;padding: 8px 18px;font-size: 15px;}
    .main-section .btn-more i[class^="icon-"] {margin-left: 20px;}
}

/* =====================
   Hero 섹션
===================== */
.main-hero {overflow:hidden;position:relative;width:100%; padding: 88px 0 0 !important;}
.main-hero * :focus-visible {opacity: 1 !important; outline: 2px dashed #fff !important;}
.main-hero .swiper-slide {max-height: 830px;min-height:600px;}
.main-hero .elementor-slides .swiper-slide-inner {padding: 0 !important;}
.main-hero .swiper-slide-bg {position: relative;}
.main-hero .swiper-slide-contents {position: relative; z-index: 3; width: 100%;}
.main-hero .elementor-slide-heading {margin: 0 !important; padding: 0 !important; font-size:clamp(4.5rem,4.6875vw,5.625rem) !important;font-weight:700 !important;font-variation-settings: 'wght' 700 !important;font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;color:#fff !important;line-height:110% !important;letter-spacing:-2% !important;word-break:keep-all !important;text-align:center !important;}
.main-hero .elementor-slide-description {margin-top: 20px !important;}
.main-hero .elementor-slide-description > span {display: flex !important;justify-content: center; align-items: center; width: auto;max-width: 100%; background-color: transparent !important;}
.main-hero .elementor-slide-description > span svg {width: 100%;}
.main-hero .elementor-slide-description > span svg * {line-height: 120%;letter-spacing: -1.5% !important;}
.main-hero__desc {display: block; margin-top:24px;font-size:clamp(1.5rem,1.5625vw,1.88rem);font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;font-weight:500;font-variation-settings: 'wght' 500;color:#fff;line-height:130%;letter-spacing:-2%;text-align:center;}
.main-hero .swiper-pagination {display: flex; justify-content: center; align-items: center; gap: 6px; bottom: 60px !important;}
.main-hero .swiper-pagination .swiper-pagination-bullet { margin: 0; transition: width 300ms, border-radius 300ms ease; -webkit-transition: width 300ms, border-radius 300ms ease; -moz-transition: width 300ms, border-radius 300ms ease; -ms-transition: width 300ms, border-radius 300ms ease; -o-transition: width 300ms, border-radius 300ms ease; }
.main-hero .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 24px !important;border-radius: 4px;}
.main-hero .elementor-swiper-button {width: clamp(74px,5.2083vw,100px); aspect-ratio: 1 / 1; background-image:url('/wp-content/uploads/2026/06/icon-slide-arrow.svg'); background-position: center; background-size: auto 100%; background-repeat: no-repeat;transition: opacity 300ms;}
.main-hero .elementor-swiper-button:hover {opacity: 0.6;}
.main-hero .elementor-swiper-button svg {display: none !important;}
.main-hero .elementor-swiper-button.elementor-swiper-button-prev { opacity: 0.4; left: clamp(40px,4.1667vw,80px); transition: opacity 300ms; }
.main-hero .elementor-swiper-button.elementor-swiper-button-next { opacity: 0.4; right: clamp(40px,4.1667vw,80px);transform: translateY(-50%) rotate(-180deg); transition: opacity 300ms;}
.main-hero .elementor-swiper-button.elementor-swiper-button-prev:hover,.main-hero .elementor-swiper-button.elementor-swiper-button-next:hover {opacity: 1;}
.main-hero,.main-hero .elementor-background-slideshow,.main-hero .elementor-slides-wrapper,.main-hero .swiper-wrapper { background-color: #a6a6a6;}
.main-hero .elementor-slide-heading,.main-hero .main-hero__sub-title,.main-hero .main-hero__desc { opacity: 0; transform: translate3d(0, 40px, 0); will-change: opacity, transform; backface-visibility: hidden;}
.main-hero .swiper-slide-active .elementor-slide-heading,.main-hero .swiper-slide-active .main-hero__sub-title,.main-hero .swiper-slide-active .main-hero__desc { animation: csr-hero-fadeup 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards; -webkit-animation: csr-hero-fadeup 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards; }
@keyframes csr-hero-fadeup { 
    to { opacity: 1; transform: translate3d(0, 0, 0);}
}
@media (prefers-reduced-motion: reduce) {
    .main-hero .elementor-slide-heading,
    .main-hero .main-hero__sub-title,
    .main-hero .main-hero__desc { opacity: 1; transform: none; animation: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; }
}

/* 동적 생성된 재생/정지 버튼 스타일 */
.swiper-pagination .csr-hero__autoplay-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:none;padding:0;margin-left:4px;cursor:pointer;z-index:15;}
.swiper-pagination .csr-hero__autoplay-btn img[loading="lazy"] {background-color: transparent;}
.csr-hero__autoplay-icon{width:100%;height:100%;display:block;}
.csr-hero__autoplay-btn .csr-hero__autoplay-icon--play{display:none;}
.csr-hero__autoplay-btn.is-paused .csr-hero__autoplay-icon--pause{display:none;}
.csr-hero__autoplay-btn.is-paused .csr-hero__autoplay-icon--play{display:block;}
.csr-hero__autoplay-btn:focus-visible{outline:2px solid #0066ff;outline-offset:2px;border-radius:4px;}

@media screen and (max-width:1180px) {
    .main-hero {padding: 58px 0 0 !important;}
}
@media screen and (max-width:1024px){
    #main-initiative.e-con { overflow: visible !important; }
    #main-initiative .e-con-inner { overflow: visible !important; }
    .main-initiative__swiper .swiper-slide:last-child { margin-right: 70px;}
    .main-hero .elementor-slide-heading {font-size:clamp(46px,7.0313vw,4.5rem) !important;}
    .main-hero__desc{margin-top:20px;font-size:clamp(16px,2.3438vw,1.5rem);}
}
@media screen and (max-width:768px){
    .main-hero .swiper-slide {max-height: 650px; min-height: 580px;}
    .main-hero .swiper-slide-contents {padding: 0 28px;}
    .main-hero .elementor-slide-description {margin-top: 16px !important;}
    .main-hero__desc{margin-top:18px;}
    .main-hero .swiper-pagination {bottom: 30px !important;}
}

/* =====================
   CSR Mission 섹션
===================== */
.main-mission.e-con>.e-con-inner {display: block !important; width: 100% !important;max-width: 1240px !important;margin: 0 auto !important;box-sizing: border-box !important;padding: 0 20px !important;}
.main-mission__inner{display:flex;flex-direction:column;gap:60px;}
.main-mission__content{flex:1;}
.main-section .e-heading-base {margin-bottom:20px;}
.main-mission__desc{font-size:1.5rem;line-height:150%;letter-spacing:-2%;word-break:keep-all;}
.main-mission__link{margin-top:50px;}
.main-mission__media{margin-top: 50px;}
.main-mission__media[data-ani="fade-up"] { opacity: 0; transform: none; transition: opacity 0.8s ease-out; }
.main-mission__media[data-ani="fade-up"].is-animated { opacity: 1; }
@media screen and (max-width:1024px){
    .main-section .e-heading-base {font-size:clamp(36px,5.468vw,3.5rem);}
    .main-mission__desc {font-size:clamp(16px,2.3438vw,1.5rem);}
}
@media screen and (max-width:768px){
    .main-mission.e-con>.e-con-inner {padding: 0 !important;}
    .main-section .e-heading-base {margin:0 0 10px;}
    .main-mission__link{margin-top:30px;}
    .main-mission__media{margin-top: 60px;}
    .main-mission .elementor-widget-html {margin: 0 20px !important;}
    .main-mission .elementor-widget-html:has(.main-mission__media) {margin: 0 !important;}
}

/* =====================
   이니셔티브 섹션
===================== */
.main-initiative{background-color:#111;}
.main-initiative.e-con>.e-con-inner {width: 100% !important;max-width: 1240px !important;margin: 0 auto !important;box-sizing: border-box !important;padding: 0 20px !important;}
.main-initiative__title{color:#fff;}
.main-initiative__swiper{margin-top:50px;position:relative;}
.main-initiative__list{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:24px !important;}
.main-initiative__card{display: flex;flex-direction: column;position:relative;overflow:hidden;height:100%;border-radius:20px;cursor:pointer;}
.main-initiative__item {min-width: 300px;}
.main-initiative__item.youth .main-initiative__card{background-color:#494dd1;}
.main-initiative__item.planet .main-initiative__card{background-color:#1ae652;}
.main-initiative__item.culture .main-initiative__card{background-color:#FF7733;}
.main-initiative__card-thumb{position:relative;width:100%;border:20px solid #494dd1;}
.main-initiative__card-thumb figure{ position:relative; overflow:hidden; aspect-ratio:347/388; border-radius:16px 16px 16px 0; background-color:transparent; -webkit-border-radius:16px 16px 16px 0; -moz-border-radius:16px 16px 16px 0; -ms-border-radius:16px 16px 16px 0; -o-border-radius:16px 16px 16px 0; }
.main-initiative__card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;background-color:transparent;}
.main-initiative__card-thumb .main-initiative__card-category{ display:flex; justify-content:center; align-items:center; position:absolute; bottom:-4px; left:-2px; z-index:1; min-height:1.31em; padding:10px 20px 10px 4px; border-radius:0 10px 0 0; font-size:2rem; font-weight:700; font-variation-settings: 'wght' 700; line-height:100%; letter-spacing:-2%; text-transform:uppercase; }
.main-initiative__item.youth .main-initiative__card-category{background-color:#494dd1;color:#fff;}
.main-initiative__item.planet .main-initiative__card-category{background-color:#1ae652;}
.main-initiative__item.culture .main-initiative__card-category{background-color:#FF7733;}
.main-initiative__card:hover .main-initiative__card-thumb img{ transform:scale(1.04); -webkit-transform:scale(1.04); -moz-transform:scale(1.04); -ms-transform:scale(1.04); -o-transform:scale(1.04); }
.main-initiative__item.youth .main-initiative__card-thumb{border-color:#494dd1;}
.main-initiative__item.planet .main-initiative__card-thumb{border-color:#1ae652;}
.main-initiative__item.culture .main-initiative__card-thumb{border-color:#FF7733;}
.main-initiative__card-body{display: flex; flex-direction: column; gap: 35px; height: 100%; padding:0 24px 36px;}
.main-initiative__card-body .main-initiative__card-link {margin-top: auto;}
.main-initiative__card-title{font-size:1.25rem;font-weight:700;font-variation-settings: wght 700;color:#fff;margin-bottom:12px;line-height:1.3;}
.main-initiative__card-desc{font-size:1.5rem;line-height:160%;letter-spacing:-2%;font-weight:400;font-variation-settings: 'wght' 400;word-break:keep-all;}
.main-initiative__item.youth .main-initiative__card-desc{color:#fff;}
.main-initiative__card-link{margin-top:35px;}
.main-initiative__pagination{position:static;display:none;justify-content:center;gap:4px;margin-top:20px;padding-bottom:40px;}
.main-initiative__pagination .swiper-pagination-bullet{background:rgba(255,255,255,.4);opacity:1;}
.main-initiative__pagination .swiper-pagination-bullet-active{background:#fff;}
.main-initiative__card:hover .btn-more{background-color:#121212;color:#fff;}
.main-initiative__card:hover .btn-more i.icon-btn-arrow{background-image:url('/wp-content/uploads/2026/06/icon-btn-arrow-white.svg');}
.main-initiative__card:hover .btn-more.white{background-color:#fff;color:#111;}
.main-initiative__card:hover .btn-more.white i.icon-btn-arrow-white{background-image:url('/wp-content/uploads/2026/06/icon-btn-arrow.svg');}
.main-initiative .btn-more:focus-visible {outline: 2px dashed #fff !important;}
@media screen and (max-width:1024px){
    .main-initiative .inner{padding:0 0 0 20px;}
    .main-initiative.e-con>.e-con-inner {padding:0 !important;}
    .main-initiative__title {padding: 0 20px;}
    .main-initiative__list{overflow-y: hidden;overflow-x: auto; scrollbar-width: none; cursor: grab; display:flex !important;flex-wrap:nowrap !important;gap:16px !important;}
    .main-initiative__item.youth {margin-left: 20px;}
    .main-initiative__item.culture {margin-right: 20px;}
    .main-initiative__list::-webkit-scrollbar { display: none; }
    .main-initiative__list.is-grabbing { cursor: grabbing; }
    .main-initiative__card-thumb .main-initiative__card-category {font-size:clamp(26px,3.1250vw,2rem);}
    .main-initiative__card-desc {font-size:clamp(16px,2.3438vw,2rem);}
    .main-initiative__pagination{display:flex;}
}
@media screen and (max-width:768px){
    .main-initiative__swiper {margin-top: 30px;}
    .main-initiative__card { border-radius:16px; }
    .main-initiative__card-thumb {border-width: 16px;}
    .main-initiative__card-thumb figure{ border-radius:16px 16px 16px 0;}
    .main-initiative__card-thumb .main-initiative__card-category {min-height: 42px;padding: 6px 10px;}
    .main-initiative__card-body {gap: 25px; padding-bottom: 30px;}
    .main-initiative__card-link {margin-top: 26px;}
}

/* =====================
   최신 콘텐츠 섹션
===================== */
.main-latest{padding:130px 0;background-color:#fff45f;;}
#main-latest .e-tabs-content-area-base {width: auto !important;}
.main-latest * {font-family: 'Pretendard Variable', 'Pretendard', sans-serif !important;}
.main-latest.e-con>.e-con-inner {width: 100% !important;max-width: 1240px !important;margin: 0 auto !important;box-sizing: border-box !important;padding: 0 20px !important;}
.main-latest .e-heading-base {margin-bottom: 50px;}
.main-latest__title{font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;font-variation-settings: 'wght' 700;line-height:1.3;color:#111;margin-bottom:32px;word-break:keep-all;}
.main-latest__tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:40px;cursor:grab;}
.main-latest__tab-wrap::-webkit-scrollbar{display:none;}
.main-latest__tab-wrap.is-grabbing{cursor:grabbing;}
.main-latest__tab{display:flex;flex-wrap:nowrap;gap:8px;width:max-content;}
.main-latest__tab-slide{width:auto!important;flex-shrink:0;}
.main-latest__tab-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 30px;border:1px solid #ccc;background-color:#fff;border-radius:24px;font-size:1.125rem;font-weight:700;font-variation-settings: 'wght' 700;letter-spacing:-2%;cursor:pointer;white-space:nowrap;transition:all .3s ease;line-height:1;}
.main-latest__tab-btn:hover,.main-latest__tab-btn[aria-selected=true]{background-color:#111;border-color:#111;color:#fff;}
.main-latest__panel[aria-hidden=true]{visibility:hidden;pointer-events:none;}
.main-latest .sub-3depth__related {padding: 0 !important;}
.main-latest .sub-3depth__related-list {margin-top: 0;}
.main-latest .sub-3depth__related .e-heading-base{display:none;}
.main-latest .sub-3depth__related .elementor-pagination{display:none;}
/* 탭 메뉴 wrap */
.main-latest .e-tabs-menu-base { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 50px; cursor: grab; }
.main-latest .e-tabs-menu-base::-webkit-scrollbar { display: none; }
.main-latest .e-tabs-menu-base.is-grabbing { cursor: grabbing; }

/* 탭 버튼 */
.main-latest .e-tabs-content-area-base {padding: 0 !important;}
#main-latest .e-tabs-menu-base:has(.e-tab-base:focus-visible) {padding: 4px !important;}
.main-latest .elementor .e-tab-content-base {padding: 0 !important;}
.main-latest .elementor .e-div-block-base {padding: 0 !important;}
.main-latest .elementor .e-flexbox-base {padding: 0 !important;}
.main-latest .elementor-widget .elementor-icon-list-items.elementor-inline-items {margin: 0 !important;}
.main-latest .elementor-widget .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {margin-inline: 0 !important;}
.main-latest .e-tab-content-base .elementor-widget-loop-grid .elementor-grid {display: flex;gap: 32px;}
.main-latest .e-tabs-base {display: block !important; padding: 0 !important;}
.main-latest .e-tab-base { display: inline-flex; align-items: center; justify-content: center; padding: 0.72em 1.67em; border: 1px solid #ccc; background-color: #fff; border-radius: 30px; font-size: 1.125rem; font-weight: 700; font-variation-settings: 'wght' 700; letter-spacing: -0.02em; cursor: pointer; white-space: nowrap; transition: all .3s ease; line-height: 1; flex-shrink: 0; width: auto !important; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; }
.main-latest .e-tab-base:hover, .main-latest .e-tab-base.e--selected { background-color: #111; border-color: #111; color: #fff; }
.main-latest .e-tab-base .e-paragraph-base { pointer-events: none; }
.main-latest .e-tabs-menu-base {justify-content: flex-start;padding: 0;}
.main-latest .elementor-widget-html:has(> .main-latest__link) {display: flex; justify-content: center; align-items: center;margin-top: 50px;}
.main-latest .elementor-loop-container.elementor-grid .e-loop-item { flex: 0 0 calc((100% - 64px) / 3); max-width: 378px; min-width: 0; cursor: pointer; transition: none; transform: translateY(0);}
.main-latest .e-tabs-content-area-base .elementor-heading-title {background-image: linear-gradient(transparent calc(100% - 1px), #333 1px);background-repeat: no-repeat;background-size: 0% 100%;transition: background-size 400ms ease-in-out;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;line-clamp: 1;-webkit-line-clamp: 1;-webkit-box-orient: vertical;width: fit-content;font-weight: 700;font-variation-settings: 'wght' 700;font-size: inherit;line-height: 130%;letter-spacing: -2%;}
@media (hover: hover) {
    @media screen and (max-width:768px){    
        .main-latest .elementor-loop-container.elementor-grid .e-loop-item a:hover .elementor-heading-title {background-size: 100% 100%;}
    }
}
@media screen and (max-width:1024px) {
    .main-latest .e-tab-base {font-size:clamp(15px,1.7578vw,1.125rem);}
}
@media screen and (max-width:768px){
    .main-latest{padding:60px 0;}
    .main-latest .inner{padding:0;}
    .main-latest.e-con>.e-con-inner {padding: 0 !important;}
    .main-latest .e-heading-base {margin: 0 20px 30px;}
    .main-latest__tab-wrap{padding-left:20px;}
    .main-latest .e-tabs-menu-base {gap: 6px; margin-bottom: 30px; padding-inline:20px;}
    .main-latest__list{display:flex;flex-direction:column;gap:20px;}
    .main-latest__page{padding-inline:20px;}

    .main-latest .e-tabs-content-area-base {margin: 0 20px;}
    .main-latest .elementor-loop-container.elementor-grid .e-loop-item {max-width: 100%;}
    .main-latest .e-tab-content-base .elementor-widget-loop-grid .elementor-grid {flex-direction: column; gap: 16px;}
    .main-latest .e-tab-content-base .post__list.e-flexbox-base {flex-direction: row !important;}
    .main-latest .elementor-widget-html:has(> .main-latest__link) {margin-top: 30px;}
    .main-latest .elementor .e-flexbox-base {width: 100%;}
    .main-latest .sub-3depth__post-img {margin: 0 20px 0 0;}
    .main-latest .elementor .e-div-block-base:has( > .sub-3depth__post-title) {display: flex; flex-direction: column; justify-content: center;}
    .main-latest .e-tabs-content-area-base .elementor-heading-title {line-clamp: 2;-webkit-line-clamp: 2;}
}