/* ----------------------------------------
section
---------------------------------------- */
section{text-align:center}
section .section-subject{display:inline-block; padding:4px 12px; font-size:13px; color:var(--smt-brand-b); border:solid 1px var(--smt-brand-b); border-radius:999px}
section .section-subject + .section-title{margin-top:16px; margin-bottom:32px}
section .section-title{font-size:20px; line-height:1.5}
section .item-title{font-size:17px; font-weight:600; line-height:1.4}
section .item-desc{font-size:14px; color:var(--smt-text-sub); line-height:1.4}

@media(min-width:768px){
  section .section-title{font-size:26px}
}

@media(min-width:1070px){
  section .section-subject{padding:6px 14px; font-size:14px; line-height:1.4}
  section .section-subject + .section-title{margin-top:20px; margin-bottom:40px}
  section .section-title{font-size:30px}
  section .item-title{font-size:18px}
  section .item-desc{font-size:15px}
}


/* ----------------------------------------
visual
---------------------------------------- */
.visual-carousel.overlay-element .item{min-height:460px; height:inherit; max-height:inherit; align-items:center}
.visual-carousel.overlay-dots .owl-dots .owl-dot span{background-color:rgba(255, 255, 255, 0.2)}
.visual-carousel.overlay-dots .owl-dots .owl-dot:hover span,
.visual-carousel.overlay-dots .owl-dots .owl-dot.active span{background-color:rgba(255, 255, 255, 0.5)}
.visual-carousel .photo::before{background-color:#342508; opacity:0.4; z-index:1}
.visual-carousel .text-info{height:fit-content; align-items:center; margin-top:80px; margin-bottom:80px; z-index:10}
.visual-carousel .text-info .subject{font-size:14px; color:var(--white-80)}
.visual-carousel .text-info .title{font-size:27px; line-height:1.3}
.visual-carousel .text-info .sub-title{font-size:18px; color:var(--white-80)}
.visual-carousel .text-info .desc{font-size:15px; color:var(--white-80); line-height:1.6}
.visual-carousel .text-info .btn{margin-top:24px}

@media(min-width:1070px){
  .visual-carousel.overlay-element .item{min-height:800px}
  .visual-carousel .text-info{margin-top:120px; margin-bottom:120px}
  .visual-carousel .text-info .subject{font-size:16px}
  .visual-carousel .text-info .title{font-size:50px}
  .visual-carousel .text-info .sub-title{font-size:26px}
  .visual-carousel .text-info .desc{font-size:17px}
  .visual-carousel .text-info .btn{margin-top:40px}
}

.visual-carousel .owl-item .photo{overflow:hidden}
.visual-carousel .owl-item .photo img{transform:scale(1.01); transition:transform 8s ease}
.visual-carousel .owl-item.active .photo img{animation-fill-mode:forwards; transform:scale(1.2)}




/* ----------------------------------------
플라워레터
---------------------------------------- */
.flower-letter{padding:40px 20px 130px; background-color:#fffaf0; position:relative; overflow:hidden}
.flower-letter *{font-family:'NanumBarunpen', sans-serif !important}
.flower-letter::after{content:''; background-image:url('../images/home/flowerletter_03.png'); width:168px; height:140px; position:absolute; bottom:-40px; margin-left:-84px}
.flower-letter .info{position:relative; max-width:480px}
.flower-letter .info .logo{width:76px; margin-bottom:16px}
.flower-letter .info .title{font-weight:400; color:#9C7475; position:relative; line-height:1.3}
.flower-letter .info .title span{display:block}
.flower-letter .info::before{content:''; background-image:url('../images/home/flowerletter_01.png'); display:inline-block; width:170px; height:170px; position:absolute; top:0; left:-70px}
.flower-letter .info::after{content:''; background-image:url('../images/home/flowerletter_02.png'); display:inline-block; width:170px; height:170px; position:absolute; top:0; right:-70px}
.flower-letter .info .desc{margin-top:32px; font-size:16px; color:#896047; line-height:1.7}
.flower-letter .info .btn{margin-top:20px; display:inline-block; background-color:#f06868; font-size:14px; color:var(--smt-text-white)}
.flower-letter .info .btn:hover{background-color:#cb5555}
.flower-letter .btn .ico-arrow-right, .btn .ico-arrow-left{width:12px}
.flower-letter .btn .ico-arrow-right::before, .btn .ico-arrow-left::before{margin:0; margin-top:1px; margin-left:4px}

@media(min-width:1070px){
  .flower-letter{padding-top:80px; padding-bottom:220px}
  .flower-letter::after{width:260px; height:226px; margin-left:-120px; bottom:-66px}
  .flower-letter .info .logo{width:96px; margin-bottom:24px}
  .flower-letter .info .title span{display:inline-block}
  .flower-letter .info::before{width:484px; height:473px; top:0; left:-440px}
  .flower-letter .info::after{width:484px; height:473px; top:0; right:-440px}
  .flower-letter .info .desc{font-size:19px}
  .flower-letter .info .btn{margin-top:32px; font-size:17px}
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .flower-letter::after{background-image:url('../images/home/flowerletter_03@2x.png')}
  .flower-letter .info::before{background-image:url('../images/home/flowerletter_01@2x.png')}
  .flower-letter .info::after{background-image:url('../images/home/flowerletter_02@2x.png')}
}


/* ----------------------------------------
전시회 소개
---------------------------------------- */
.intro-section{background-color:#F6F5F5}

/* 전시현황 */ 
.state .state-list{max-width:80%; margin-top:32px; margin-left:auto; margin-right:auto; display:flex; flex-wrap:wrap; row-gap:16px; justify-content:center; z-index:1}
.state .state-item{flex:0 1 calc(50% - 8px); display:flex; flex-direction:column; align-items:center; text-align:center}
.state .value{font-weight:600; color:var(--smt-brand-b); letter-spacing:inherit}
.state .value strong{font-size:22px}
.state .label{margin-top:4px; font-size:14px; color:var(--smt-brand-d)}
.state .date{margin-top:32px; font-size:14px; color:#666666}

@media(min-width:468px){
  .state .state-list{gap:24px}
  .state .state-item{flex:0 1 auto; min-width:0}
}

@media(min-width:1070px){
  .state .state-list{margin-top:40px; flex-wrap:nowrap; gap:40px}
  .state .value{font-size:24px}
  .state .value strong{font-size:40px}
  .state .label{margin-top:4px; font-size:16px; text-align:center}
  .state .date{margin-top:40px; font-size:15px; text-align:center}
}

/* 전시관 소개 */ 
.intro-section .exhibits-zone .zone-item{padding-left:8px; padding-right:8px}
.intro-section .exhibits-zone .zone{display:flex; align-items:center; background-color:var(--white); margin-bottom:16px; box-shadow:0 2px 2px rgba(0, 0, 0, 0.07)}
.intro-section .exhibits-zone .zone .zone-info{width:100%; padding:24px; flex:1 1 50%}
.intro-section .exhibits-zone .zone .zone-info .number{font-size:14px; font-weight:600; color:var(--smt-brand-a)}
.intro-section .exhibits-zone .zone .zone-info .item-desc{line-height:1.4}
.intro-section .exhibits-zone .zone .photo{flex:0 0 50%; max-width:160px; padding:16px}
.intro-section .exhibits-zone .zone .photo img{width:100%; height:auto; object-fit:cover}
.intro-section .btn{margin-top:8px}

@media(min-width:768px){
  .intro-section .exhibits-zone .zone .photo{padding:0px}
}

@media(min-width:1070px){
  .intro-section .exhibits-zone .zone-item{padding-left:12px; padding-right:12px}
  .intro-section .exhibits-zone .zone{margin-bottom:24px}
  .intro-section .exhibits-zone .zone .zone-info{flex:1 1 60%; padding:32px}
  .intro-section .exhibits-zone .zone .photo{flex:0 0 40%; max-width:260px}
  .intro-section .btn{margin-top:24px}
}





/* ----------------------------------------
부대행사장
---------------------------------------- */
.addition-section{background-color:var(--white)}
.addition-event{row-gap:32px}
.addition-event .addition-item{padding-left:8px; padding-right:8px}
.addition-event .photo{position:relative; width:100%; padding-top:56.25%; overflow:hidden}
.addition-event .photo img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover}

@media(min-width:1070px){
  .addition-event .addition-info .item-desc{font-size:14px}
}


/* ----------------------------------------
진행중인 전시관
---------------------------------------- */
.guide-section{background-color:#FBFAF9}
.guide-section .section-head{display:flex; flex-direction:column; gap:16px}
.guide-section .section-head .text-wrap{flex:1}
.guide-section .section-head .section-title{margin-bottom:8px}
.guide-section .section-head .desc{color:var(--smt-text-desc)}
.guide-section .section-head .desc li{padding-left:20px; position:relative}
.guide-section .section-head .desc li:not(:first-child){margin-top:2px}
.guide-section .section-head .desc li::before{content:'';width:3px; height:3px; left:8px; top:11px; border-radius:999px; display:in; position:absolute; background-color:var(--black-60)}

@media(min-width:768px){
  .guide-section .section-head{gap:32px}
}

@media(min-width:1070px){
  .guide-section .section-head{flex-direction:row; gap:32px; align-items:flex-end}
  .guide-section .section-head .section-title{margin-bottom:16px}
}

/* lists */
.guide-section .lists{width:100%; margin-left:auto; margin-right:auto; display:grid; gap:16px}
.guide-section .guide-item{width:100%; padding:24px 16px 40px; display:flex; gap:8px; flex-direction:column; background-color:var(--white); line-height:1.35; transition:all 0.3s}
.guide-section .guide-item .guide-title::before{content:''; background-image:url('../images/guide/guide_shoes.png'); width:100px; height:80px; display:block; background-size:100%; margin:0 auto 10px; opacity:0.8}
.guide-item .guide-title{font-size:20px; line-height:1.35; font-weight:500}
.guide-item .time{padding-top:4px; padding-bottom:4px; color:var(--black-60); line-height:1.3}
.guide-item .time li{font-size:15px; line-height:1.4}
.guide-item .time li:not(:first-child){margin-top:4px}
.guide-item .phone{margin-top:6px; display:flex; justify-content:center; align-items:center; gap:4px; font-size:15px; color:var(--black-60)}
.guide-item .time strong{font-weight:inherit; color:var(--smt-brand-b)}
.guide-item .phone::before{content:''; background-image:url('../images/ui/ico_phone.svg'); width:16px; height:16px; display:block; background-size:100%; filter:invert(73%) sepia(0%) saturate(2394%) hue-rotate(353deg) brightness(86%) contrast(89%); margin:0}

.guide-section .guide-item:hover{transform:scale(1.03); box-shadow:0 10px 30px rgba(0, 0, 0, 0.1)}

@media(min-width:768px){
  .guide-section .lists{grid-template-columns:repeat(2 ,1fr)}
}

@media(min-width:1070px){
  .guide-section .lists{grid-template-columns:repeat(3 ,1fr); gap:24px}
  .guide-section .guide-item{padding:60px 32px 100px; gap:16px}
  .guide-section .guide-item .guide-title{font-size:24px}
  .guide-section .guide-item .guide-title::before{width:180px; height:150px; margin-bottom:16px}
}


/* ----------------------------------------
바로가기
---------------------------------------- */
.shortcut-section .card-list{row-gap:16px}
.shortcut-section .card-item{width:100%; min-height:360px; display:flex; flex-direction:column; position:relative}
.shortcut-section .card-item .thum{width:100%; height:100%; position:absolute; inset:0; overflow:hidden}
.shortcut-section .card-item .thum .thum-img{width:auto; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; transition:all 0.3s}
.shortcut-section .card-item .info{max-width:320px; height:fit-content;margin-left:auto; margin-right:auto;  padding:40px 24px; position:relative; display:flex; flex-direction:column; gap:8px}
.shortcut-section .card-item .info .category{font-size:15px; color:var(--smt-brand-b)}
.shortcut-section .card-item .info .section-title{font-size:22px; line-height:1.3}
.shortcut-section .card-item .info .desc{color:var(--smt-text-desc)}
.shortcut-section .card-item strong{display:none}
.shortcut-section .card-item:hover .thum-img{transform:scale(1.05)}

/* 중앙 정렬 (아이콘형) */
.shortcut-section .card-item.layout-center{padding:24px; justify-content:center; gap:24px; background-color:#FBFAF9}
.shortcut-section .card-item.layout-center .info{padding:0 20px}
.card-item.layout-center .thum{width:120px; height:120px; margin:0 auto; position:inherit; flex-shrink:0; overflow:unset}

@media(min-width:1070px){
  .shortcut-section .card-list{row-gap:24px}
  .shortcut-section .card-item{min-height:520px}
  .shortcut-section .card-item .info{padding:80px 40px}
  .shortcut-section .card-item .info .section-title{font-size:26px}
  
  /* 중앙 정렬 (아이콘형) */
  .card-item.layout-center{padding:40px; gap:40px}
  .shortcut-section .card-item.layout-center .info{padding:16px 20px}
  .card-item.layout-center .thum{width:200px; height:200px}
}

.card-item.faq .thum-img{background-image:url('../images/home/shortcut_faq.jpg')}
.card-item.invite .thum-img{background-image:url('../images/home/shortcut_invite.jpg')}
.card-item.episode .thum-img{background-image:url('../images/home/shortcut_episode.jpg')}
.card-item.review .thum-img{background-image:url('../images/home/shortcut_review.jpg')}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .card-item.faq .thum-img{background-image:url('../images/home/shortcut_faq@2x.jpg')}
  .card-item.invite .thum-img{background-image:url('../images/home/shortcut_invite@2x.jpg')}
}


/* ----------------------------------------
캠페인
---------------------------------------- */
.campaign-section{padding-bottom:0}
.campaign-step .step{position:relative; overflow:hidden; margin:0 auto; padding-top:24px; padding-bottom:24px}
.campaign-step .step .campaign-info{max-width:480px; padding:32px; margin:0 auto; position:relative}
.campaign-step .step .campaign-info .number{margin-bottom:4px; font-size:14px; color:#79716B}
.campaign-step .step .campaign-info .number.point{color:var(--smt-brand-c)}
.campaign-step .step .campaign-info .campaign-title{margin-top:10px; font-size:19px; font-weight:600; color:#371F0A}
.campaign-step .step .campaign-info .campaign-title.point{color:var(--smt-brand-d)}
.campaign-step .step .campaign-info .desc{font-size:16px; color:#615B56; line-height:1.6}
.campaign-step .step .campaign-info .btn{margin-top:32px}
.campaign-step .step1 .campaign-info{padding-top:0; padding-left:0; padding-right:0}
.campaign-step .step2{padding-top:70px; background-color:#b89e77}
.campaign-step .step2 .campaign-info .info-inner{padding:60px 24px; background-color:#F4E4C1; position:relative; overflow:hidden}
.campaign-step .step3{background-color:#f4edde}

.campaign-step .step1::after{content:''; background-image:url('../images/home/campaign_01.jpg'); background-size:contain; display:inline-block; width:120px; height:120px; position:absolute; bottom:0; right:0; z-index:-1}
.campaign-step .step2 .campaign-info::before{content:''; background-image:url('../images/home/campaign_02.png'); background-size:contain; position:absolute; width:140px; height:80px; top:-14px; left:calc(50% - 74px); z-index:1}
.campaign-step .step2 .campaign-info .info-inner::after{content:''; background-image:url('../images/home/campaign_03.png'); background-size:contain; display:inline-block; position:absolute; bottom:0px; left:calc(50% - 139px); width:280px; height:12px}
.campaign-step .step3::before{content:''; background-image:url('../images/home/campaign_04.png'); display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:520px; height:100%}

@media(min-width:768px){
  .campaign-step .step1::after{width:200px; height:200px}
}

@media(min-width:1070px){
  .campaign-step .step{padding-top:40px; padding-bottom:40px}
  .campaign-step .step .campaign-info{max-width:700px; padding:40px}
  .campaign-step .step .campaign-info .number{margin-bottom:6px; font-size:15px}
  .campaign-step .step .campaign-info .campaign-title{font-size:23px}
  .campaign-step .step .campaign-info .desc{font-size:17px}
  .campaign-step .step .campaign-info .item-desc{margin-top:6px}
  .campaign-step .step .campaign-info .btn{margin-top:32px}
  .campaign-step .step1::after{width:240px; height:240px; right:0}
  .campaign-step .step2 .campaign-info::before{width:180px; height:90px; top:-20px; left:calc(50% - 90px)}
  .campaign-step .step2{padding-top:80px; background-color:#b89e77}
  .campaign-step .step3::before{width:600px}
}