@charset "UTF-8";

#header .header_wrap { background-color: rgba(255, 255, 255, 1); /*position:fixed; left: 0; top: 0; z-index: 14;*/ width: 100%; text-align: center; transition: top 0.3s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* =====================
CSS VARIABLES
===================== */
:root { --header-h: 0px; --header-gap: 30px; --section-left: 0px; --left-width: 746px; --col-gap: 74px; --footer-h: 0px; --footer-gap: 20px; }
.section { max-width: 1566px; margin: 0 auto; position: relative; padding-top: /*calc(var(--header-h) + var(--header-gap))*/ 30px; box-sizing: border-box;}
/* =========================
MAIN SLIDER (FINAL) - pager + stick 구조
범위: .main_left .imgBox 내부만
========================= */
.main_left{ position: absolute; /*top: calc(var(--header-h) + var(--header-gap)) 30px; left: var(--section-left) 0;*/ width: var(--left-width); max-width: none; box-sizing: border-box;}
.main_left .imgBox { width: 100% ; height: auto; position: relative; isolation: isolate; background-color: #fff; --bar-h: 36px; box-sizing: border-box;}

/* slick 레이어 안정화 */
.main_left .imgBox .slick-list{ overflow: hidden; position: relative; z-index: 1;}
.main_left .imgBox .slick-track{ position: relative; z-index: 1;}
.main_left .imgBox .slick-slide{ position: relative; z-index: 1;}
/* 초기화 전: 숨김(레이아웃은 유지해서 덜 흔들림) */
.main_left .imgBox.jsMainSlick{ opacity: 0; visibility: hidden;}
/* 초기화 후: 노출 */
.main_left .imgBox.jsMainSlick.is-ready{ opacity: 1; visibility: visible; transition: opacity .15s ease;}

.main_left .imgBox .imgSlide{  display: flex; flex-direction: column;}
.main_left .imgBox .imgSlide > div{ aspect-ratio: 746 / 430;}
.main_left .imgBox .imgSlide img{ width: 100%; height: auto; object-fit: cover; display: block;}
/*.main_left .imgBox .imgSlide > span{ font-size: 16px;  margin-top: 14px; height: var(--bar-h); line-height: var(--bar-h); display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 190px; box-sizing: border-box;}*/

.main_left .imgBox .captionBar{ margin-top: 14px; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 14px;}
.main_left .imgBox .captionText{ flex: 1; min-width: 0; font-size: 16px; line-height: 1; white-space: nowrap; overflow: clip; text-overflow: ellipsis;}

/* 컨트롤 */
.main_left .imgBox .img_btn{ position: static !important; 
    transform: none !important; right: 0; bottom: 0; transform: translateY(0);   margin: 0; width: 160px; height: var(--bar-h); z-index: 10; border-radius: 50px; background-color: #5b5b5b; color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 16px; box-sizing: border-box; pointer-events: auto;}

/* pager*/
.main_left .imgBox .img_btn .pager{ display: flex; align-items: center; gap: 8px;}
/* 버튼 reset */
.main_left .imgBox .img_btn button{ background: transparent; border: 0; color: inherit; padding: 0; cursor: pointer; line-height: 1;}
/* prev/next */
.main_left .imgBox .img_btn .btn_prev,
.main_left .imgBox .img_btn .btn_next{ font-size: 20px;}/* 숫자 */
.main_left .imgBox .img_btn .count{ margin: 0; display: flex; align-items: center; gap: 4px; font-size: 20px; line-height: 1;}
.main_left .imgBox .img_btn .count .total{ opacity: .9;}
/* stick(재생/멈춤) */
.main_left .imgBox .img_btn .stick{ width: 24px; height: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; /* || 간격 */}
/* || 막대 */
.main_left .imgBox .img_btn .stick span{ display: block; width: 4px; height: 22px; background-color: #fff;}
/* ▶ 상태 */
.main_left .imgBox .img_btn .stick.is-paused span{ display:none; }
.main_left .imgBox .img_btn .stick.is-paused::before{ content:""; display:block; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:14px solid #fff; margin-left:4px;}
/* 1개면 비활성 */
.main_left .imgBox .img_btn.is-single{ opacity: .35; pointer-events: none;}


.main_right                             { max-width: 746px; margin-left: calc(var(--left-width) + var(--col-gap)); max-width: 746px; display: flex; flex-wrap: wrap; gap: 46px;}
.main_right ul                          { max-width: 350px; width: 100%;}
.main_right ul > h2                     { font-size: 28px; font-weight: 500; padding-bottom: 20px; border-bottom: 1px solid #000;}
.main_right ul li                       { height: auto; margin-top: 20px; border: 1px solid #fff; padding-top: 12px; transition: all 0.5s; padding-bottom: 12px;}
.main_right ul li p                     { font-size: 18px; color: #666; font-weight: 400;}
.main_right ul li span { font-size: 22px; background-size: 0 2px; transition: background-size 0.5s; font-weight: 500; word-wrap: break-word; word-break: keep-all; word-break: auto-phrase;}
.main_right ul li:hover span            { background-size: 100% 2px; background-image: linear-gradient(#0060ff, #0060ff); background-repeat: no-repeat; background-position: left bottom; color: #0060ff;}
.main_right ul li:hover                 { border: 1px solid #0060ff; transition: all 0.5s; padding-left: 20px;}
.main_right ul li:hover span:active     { color: #5e9bff; background-image: linear-gradient(#5e9bff, #5e9bff);}


.main_right ul.list_box1 { order:1;}
.main_right ul.list_box2 { order:2;}
.main_right ul.list_box3 { order:3;}
.main_right ul.list_box4 { order:4;}

/*.list_box3                              { margin-bottom: 40px;}*/
.main_right ul:nth-child(3) li          { height: 87px;}


/*.list_box4 */
.main_right ul:nth-child(4)                     { margin-top: 50px;}
.main_right ul.list_box4 li                  { height: 87px; border: 1px solid #ccc; padding-left: 20px;}
.main_right ul.list_box4 a li p              { font-size: 16px;}
.main_right ul.list_box4 a li span           { font-size: 18px;}
.main_right ul.list_box4 a li:hover          {padding-left: 20px;}
.main_right ul.list_box4 a li:hover span     { background-image: none; color: #000;}
.main_right ul.list_box4 a:nth-child(1) li   { padding-top: 27px; background: url(/webzine/202602/img/common/main_btn3.png) no-repeat; background-position: 300px 34px;}
.main_right ul.list_box4 a:nth-child(2) li   { padding-top: 27px; background: url(/webzine/202602/img/common/main_btn3.png) no-repeat; background-position: 300px 34px;}


footer { position: sticky; left: var(--section-left); bottom: 20px; width: var(--left-width); box-sizing: border-box; display:flex; flex-wrap:wrap; align-items:center; gap: 16px 20px;}
.sns_group { order: 1; flex: 0 0 100%; margin-bottom: 0;}
address { order: 2; flex: 1 1 auto; min-width: 260px; }
address p               { font-size: 14px; font-weight: 300;}
address p:last-child    { letter-spacing: -0.04em;}
.issue_group { order: 3; flex: 0 0 auto; margin-left: auto;}
.footer_link { display:flex; align-items:center; gap: 10px;}
.link_1         { display: flex; align-items: center; justify-content: space-evenly; background-color: black; color: #fff; width: 150px; height: 38px; border-radius: 20px; font-size: 16px;}
.link_2         { display: flex; align-items: center; justify-content: space-evenly; background-color: #fff; color: #000; width: 148px; height: 36px; border-radius: 20px; border: 1px solid #000; cursor: pointer; margin-left: 10px; font-size: 16px;}

/*웹진 지난호 보기*/
.issue-select { position: relative; width: auto; display: inline-block; margin-left: 10px;}
/* "웹진 지난호 보기" 버튼 */
.issue-select-btn { font-weight: 400; font-size: 16px; padding-left: 20px; border: 1px solid #000; border-radius: 30px; background-color: #fff; cursor: pointer; position: relative; width: 130px; height: 38px; display: flex; align-items: center;}
/* 셀렉트 아이콘 */
.issue-select-btn::after { content: ''; position: absolute; right: 18px; top: 50%; transform: rotate(-180deg) translateY(50%); width: 24px; height: 24px; background-image: url('/webzine/202602/img/common/icon_arrow_down.svg'); background-repeat: no-repeat; background-size: 24px 24px; transition: transform 0.25s ease;}
/* 리스트 */
.issue-select-list { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: 100%; border: 1px solid #ccc; border-radius: 30px; background-color: #fff; padding: 10px 0; overflow: overlay; box-shadow: 0 6px 18px rgba(0,0,0,0.1); max-height: 175px;}
/* 리스트 보이기 */
.issue-select.open .issue-select-list { display: block;}
/* 리스트 내 항목 */
.issue-select-list li { padding: 12px 32px;}
.issue-select-list li a { font-size: 1.125rem; font-weight: 400; color: #222; display: block; text-align: center;}
.issue-select-list li:hover { background-color: #f5f5f5;}
/* 아이콘 회전 */
.issue-select.open .issue-select-btn::after { transform: translateY(-50%) rotate(0deg);}

.pc480          { display: block;}
.mob480         { display: none;}

@media (max-width: 1600px){ 
    :root{ --left-width: 680px; --col-gap: 48px; }
    .section { padding-left: 28px; padding-right: 28px;}
    .main_left .imgBox{ height: 100%; }

    .sns_group      {flex: 0 0 35%;}
    .issue_group    {order: 2;}
    address         {order: 3;}
}
@media (max-width: 1540px){

    .main_right ul { max-width: 100%; width: 100%;}
}

@media (max-width: 1520px){
    :root{ --left-width: 640px;  }
}

@media (max-width: 1320px){
    :root{ --left-width: 620px; --col-gap: 36px; }
    /*.main_left { position: fixed; top: calc(var(--header-h) + var(--header-gap)); }
    .section { padding-top: calc(var(--header-h) + var(--header-gap)); }*/
}

@media (max-width: 1280px){
    :root{ --left-width: 580px; }
    .main_left .imgBox{ height: 100%; }
}

@media (max-width: 1080px){
    .main_left{ position: static; top: auto; left: auto; bottom: auto; width: 100%; }
    
    .main_right{ width: 100%; max-width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-items: stretch; margin-left: 0;margin: 72px auto 0;}
    .main_right ul { box-sizing: border-box; flex: 0 0 calc((100% - 46px) / 2); }
    .list_box3 { margin-bottom: 0; }
    .main_right ul.list_box4 { margin-top: 0; }

    footer{ position: static; width: auto; flex-wrap: wrap; align-items: flex-start; margin: 60px auto; padding-left: 28px; padding-right: 28px;}
    .sns_group{ order: 1; flex: 0 0 auto; white-space: nowrap; }
    .sns{ display:flex; gap: 10px; }
    .issue_group{ order: 2; flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
    .issue-select   { margin-left: 0;}
    .footer_link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-direction: column ; }
    address{ order: 3; flex: 0 0 100%; }
}



@media (max-width: 960px) {
    .pc                                     { display: none !important;}
    .mob                                    { display: block !important;}
    #header .header_wrap > .inner           { height: 100px !important;}
    #header .inner .logo h1 img             { width: 68% !important;}
    #header .inner aside                    { height: 32px !important;}
    #header .inner aside .mi h1 img         { width: 68% !important;}

    .hambuger                               { right: 28px !important;}
    /*.hambuger_menu                          { height: calc(600px) !important;}*/
    .hambuger_menu.active                   { right: 0px;}

    .section                                { height: auto; padding-left: 0;padding-right: 0; min-height: 970px; }
    .section2                               { padding: 0 28px;}
    
    .main_left{ /*margin: 120px auto 0;*/ max-width: 100%; height: auto; position: unset; top: auto; }
    .main_left .imgBox{ --bar-h: 30px; }
    .main_left .imgBox .imgSlide > span{ font-size: 14px; margin-top: 12px; max-width: calc(100% - 160px); height: var(--bar-h); line-height: 1; }
    .main_left .imgBox .img_btn { width: 142px; height: var(--bar-h); }
    .main_left .imgBox .img_btn .btn_prev, .main_left .imgBox .img_btn .btn_next,
    .main_left .imgBox .img_btn .count{ font-size: 16px; }
    .main_left .imgBox .img_btn .stick{ width: 22px; height: 18px; gap: 6px; }
    .main_left .imgBox .img_btn .stick span{ width: 3px; height: 18px; }

    .main_left .imgBox .captionText         { text-align: center;}
    .main_left .imgBox .img_btn             { margin-right: 28px;}

    .main_right{ padding: 0 28px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 46px; justify-content: flex-start; }
    .main_right > ul{ width: auto; flex: 0 0 calc((100% - 46px) / 2); max-width: none; box-sizing: border-box; min-width: 0; }
    .main_right ul > h2                     { font-size: 24px;}
    .main_right ul li                       { max-height: 190px;}
    .main_right ul li p                     { font-size: 16px;}
    .main_right ul li span                  { font-size: 18px;}


    .main_right ul.list_box4  li                { height: 87px;  margin: 20px auto;}
    .main_right ul.list_box4  li a  div                           { padding-top: 14px; padding-left: 20px; background: url(/webzine/202602/img/common/main_btn3.png) no-repeat; background-position: 390px 52px;}
    .main_right ul.list_box4  li a  div p                       { font-size: 16px; margin-bottom: 8px; color: #666666; font-weight: 400;}
    .main_right ul.list_box4  li a div span                    { font-size: 18px; font-weight: 500;}
    .main_right ul.list_box4  li a  div                           { padding-top: 28px; padding-left: 20px; background: url(/webzine/202602/img/common/main_btn3.png) no-repeat; background-position: 390px 34px;}
    .main_right ul.list_box4  li a div span                    { font-size: 18px; font-weight: 500;}


    .mob_list_box4              { padding: 30px 28px;}
    .mob_list_box4 h2           { font-size: 24px; font-weight: 500; padding-bottom: 20px; border-bottom: 1px solid #000;}
    .mob_list_box4 ul li        { min-height: 87px; margin-top: 20px; border: 1px solid #fff; padding: 12px 0; transition: all 0.5s;}
    .mob_list_box4 ul li p      { font-size: 16px; color: #666; font-weight: 400;}
    .mob_list_box4 ul li span   { font-size: 18px; background-size: 0 2px; transition: background-size 0.5s; font-weight: 500;}

    .mob_list_box4 ul li:hover                 { border: 1px solid #0060ff; transition: all 0.5s; padding-left: 20px;}
    .mob_list_box4 ul li:hover span:active     { color: #5e9bff; background-image: linear-gradient(#5e9bff, #5e9bff);}
    .mob_list_box4 ul li:hover span            { background-size: 100% 2px; background-image: linear-gradient(#0060ff, #0060ff); background-repeat: no-repeat; background-position: left bottom; color: #0060ff;}


    .mob_box1                   { display: grid; grid-template-columns: 1fr 1fr; gap: 46px;}
    

    /*.mob_box2 */
    .mob_box2                         { padding-top: 30px;}
    .mob_box2 a div                   { height: 87px; border: 1px solid #ccc; padding-left: 20px;}
    .mob_box2 a div p                 { font-size: 16px; margin-top: 24px;}
    .mob_box2 a:nth-child(2) div p    { margin-top: 24px;}
    .mob_box2 a div span              { font-size: 18px; font-weight: 500;}
    .mob_box2 a div:hover             { padding-left: 20px;}
    .mob_box2 a div:hover span        { background-image: none; color: #000;}
    .mob_box2 a:nth-child(1) div      { background: url(/webzine/202602/img/common/main_btn3.png) no-repeat; background-position: right 5% bottom 35px; margin-bottom: 30px;}
    .mob_box2 a:nth-child(2) div      { background: url(/webzine/202602/img/common/main_btn3.png) no-repeat; background-position: right 5% bottom 35px;}

    .issue-select                      { margin-left: 0;}
    .sns_group                          { margin-top: 48px;}

}


@media (max-width: 480px){

    .main_left{ position: relative; top: auto; left: auto; width: 100%; margin: calc(var(--header-h) + -100px) auto 0; }
    .main_left .imgBox .img_btn .pager{ gap: 3px;}
    .main_left .imgBox .captionBar      { gap: 0px;}
    .main_left .imgBox .captionText     { font-size: 14px; text-align: left; margin-left: 10px;}
    .main_left .imgBox .img_btn .count{ font-size: 14px; }

    .list_box3 { margin-bottom: 0; }
    .main_right ul.list_box4 { margin-top: 0; max-width: 100%; }

    footer      {margin-top: 20px;}
    .sns_group  {order: 2; margin-top: 0; position: absolute; bottom: 156px;}
    .issue_group    {order: 1;}

    .sns            { gap: 0;}
    .sns a img      { width: 80%;}
    .link_1         { width: 146px; height: 36px; font-size: 14px;}
    .issue-select-btn   { width: 126px; height: 34px; font-size: 14px;}
    address p       { font-size: 13px;}

    .pc480          { display: none !important;}
    .mob480         { display: block !important;}
}
@media (max-width: 460px){
    .main_right { gap: 24px; }
    .main_right > ul{ flex: 0 0 calc((100% - 24px) / 2);}
    .main_left .imgBox .captionBar { /*flex-direction: column;*/}
    .main_left .imgBox .img_btn { width: 32%; margin-right: 4px;}
    .main_right ul li { max-height: 220px; min-height: 200px;}


}

@media (max-width: 370px){
    address p   {font-size: 12px;}
    .sns_group  {bottom: 114px;}
}