@charset "utf-8";
/* =========================================================
   한국조형예술협회 (데모 시안) - style.css
   ========================================================= */

:root{
  --ppl:#8f6b91;        /* 메인 퍼플 */
  --ppl-lt:#a893be;     /* 라이트 퍼플 */
  --mg:#e14c9f;         /* 로고 마젠타 */
  --badge:#4f4040;      /* 서식다운 뱃지 */
  --txt:#333;
  --txt2:#666;
  --gray:#888;
  --line:#e5e5e5;
  --bg-gray:#fbfbfb;
  --inner:1284px;
  --hd-h:110px;
  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
  --sans:"Noto Sans KR",Roboto,"Malgun Gothic",AppleGothic,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  font-family:var(--sans);
  font-size:16px;line-height:1.6;color:var(--txt);
  background:#fff;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;vertical-align:top;border:0;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{font-family:inherit;background:none;border:0;cursor:pointer;color:inherit;}
input{font-family:inherit;}
dl,dt,dd{margin:0;}
em,i{font-style:normal;}
.noto-serif{font-family:var(--serif);}
.sound_only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.inner{width:100%;max-width:var(--inner);margin:0 auto;padding:0 20px;}

/* 스크롤 등장 모션 ------------------------------------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s cubic-bezier(.22,.8,.3,1),transform .9s cubic-bezier(.22,.8,.3,1);}
.reveal[data-anim="fade-left"]{transform:translateX(60px);}
.reveal.is-in{opacity:1;transform:none;}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;top:0;left:0;width:100%;height:var(--hd-h);
  background:#fff;z-index:900;
  transition:height .3s,box-shadow .3s;
}
.header.is-scroll{height:78px;box-shadow:0 2px 18px rgba(0,0,0,.07);}
.hd-inner{
  height:100%;padding:0 30px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:9px;}
.logo-mark{display:block;line-height:0;}
.logo-txt{display:block;line-height:1;}
.logo-txt em{display:inline-block;font-size:10px;color:#777;letter-spacing:-.02em;vertical-align:5px;margin-right:2px;}
.logo-txt strong{font-family:var(--serif);font-size:21px;font-weight:700;color:#2b2b2b;letter-spacing:-.03em;}
.logo-txt small{display:block;margin-top:4px;font-size:8.5px;letter-spacing:.055em;color:#6d6d6d;font-weight:500;}
.header.is-scroll .logo-mark svg{width:32px;height:32px;}
.header.is-scroll .logo-txt strong{font-size:18px;}

.hd-right{display:flex;align-items:center;gap:22px;padding-right:148px;}
.hd-search .sch-box{
  position:relative;width:260px;height:40px;background:#f8f8f8;border-radius:20px;
  display:flex;align-items:center;
}
.hd-search input{
  flex:1;height:100%;border:0;background:none;outline:none;
  padding:0 8px 0 20px;font-size:14px;color:#444;
}
.sch-submit{width:44px;height:100%;display:flex;align-items:center;justify-content:center;}

.menu-btn{width:28px;height:20px;position:relative;display:block;}
.menu-btn .bar{position:absolute;left:0;width:100%;height:2px;background:#333;border-radius:2px;transition:.35s;}
.menu-btn .bar:nth-child(1){top:0;}
.menu-btn .bar:nth-child(2){top:9px;}
.menu-btn .bar:nth-child(3){top:18px;}
body.menu-open .menu-btn .bar:nth-child(1){top:9px;transform:rotate(45deg);}
body.menu-open .menu-btn .bar:nth-child(2){opacity:0;}
body.menu-open .menu-btn .bar:nth-child(3){top:9px;transform:rotate(-45deg);}

.down-btn{
  position:absolute;top:0;right:19px;
  width:118px;height:96px;background:var(--badge);color:#fff;
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:18px;gap:6px;
  transition:background .3s,height .3s;
}
.header.is-scroll .down-btn{height:84px;padding-top:12px;}
.down-btn:hover{background:#6a5354;}
.down-btn .txt{font-size:12.5px;letter-spacing:-.02em;}

/* 전체메뉴 */
.all-menu{
  position:absolute;top:var(--hd-h);left:0;width:100%;
  background:#fff;border-top:1px solid transparent;
  max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1);
}
.header.is-scroll .all-menu{top:78px;}
body.menu-open .all-menu{max-height:640px;border-top-color:#eee;box-shadow:0 20px 40px rgba(0,0,0,.09);}
.all-menu-inner{max-width:1380px;margin:0 auto;padding:46px 30px 56px;}
.all-menu .list{display:flex;gap:10px;}
.all-menu .list>li{flex:1;min-width:0;}
.all-menu .list>li>strong{
  display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:#222;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #333;letter-spacing:-.03em;
}
.all-menu .depth2 a{
  display:block;font-size:14px;color:#777;line-height:1.5;padding:7px 0;letter-spacing:-.03em;
  transition:color .25s,padding-left .25s;
}
.all-menu .depth2 a:hover{color:var(--ppl);padding-left:5px;}
.menu-dim{
  position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;visibility:hidden;
  transition:.4s;z-index:880;
}
body.menu-open .menu-dim{opacity:1;visibility:visible;}

/* =========================================================
   섹션 인디케이터 (우측 고정 도트)
   ========================================================= */
.main-nav{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);
  z-index:800;opacity:0;visibility:hidden;transition:.5s;
}
.main-nav.is-show{opacity:1;visibility:visible;}
.main-nav li+li{margin-top:16px;}
.main-nav a{display:flex;align-items:center;justify-content:flex-end;gap:10px;}
.main-nav .txt{
  font-size:11.5px;color:#999;letter-spacing:-.02em;white-space:nowrap;
  opacity:0;transform:translateX(8px);transition:.35s;
}
.main-nav .txt strong{color:var(--ppl);font-weight:600;}
.main-nav a:hover .txt{opacity:1;transform:none;}
.main-nav .dot{
  width:8px;height:8px;border-radius:50%;background:#cfcfcf;display:block;transition:.35s;
}
.main-nav a:hover .dot,.main-nav a.is-active .dot{background:var(--ppl);transform:scale(1.35);}

/* =========================================================
   공통 파츠
   ========================================================= */
.m-titlebox h2{
  font-size:46px;font-weight:500;color:#2c2c2c;letter-spacing:-.045em;line-height:1.2;
}
.m-titlebox .desc{
  margin-top:20px;font-size:17px;font-weight:300;color:#999;letter-spacing:-.03em;
}
.m-titlebox.ta-c{text-align:center;}

.view-all-btn{
  display:inline-flex;align-items:center;gap:14px;font-size:14px;letter-spacing:.06em;
}
.view-all-btn::before{
  content:"";width:44px;height:1px;background:currentColor;display:block;transition:width .35s;
}
.view-all-btn:hover::before{width:66px;}
.clr-ppl-btn{color:var(--ppl);}
.clr-wht-btn{color:#5c4a5e;}

.main-btn01{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:213px;height:56px;border:1px solid var(--ppl-lt);color:var(--ppl);
  font-size:15px;letter-spacing:-.02em;background:rgba(255,255,255,.35);
  position:relative;transition:background .35s,color .35s;
}
.main-btn01::after{
  content:"";position:absolute;left:100%;top:50%;width:90px;height:1px;background:var(--ppl-lt);
}
.main-btn01:hover{background:var(--ppl);color:#fff;}

.linkbox{display:grid;gap:24px;}
.linkbox.fr-2{grid-template-columns:repeat(2,1fr);}
.linkbox.fr-3{grid-template-columns:repeat(3,1fr);}
.linkbox a{
  display:flex;align-items:center;gap:20px;padding:26px 28px;
  border:1px solid var(--line);background:#fff;transition:.35s;
}
.linkbox a:hover{border-color:var(--ppl-lt);box-shadow:0 14px 30px rgba(143,107,145,.12);transform:translateY(-3px);}
.linkbox .ico{flex:0 0 auto;line-height:0;}
.linkbox .txtbox{flex:1;min-width:0;}
.linkbox dt{font-size:19px;font-weight:500;color:#2c2c2c;letter-spacing:-.04em;}
.linkbox dd{margin-top:7px;font-size:14px;color:#999;letter-spacing:-.03em;}
.linkbox .arr{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;width:22px;}
.linkbox .arr .bar{display:block;height:1px;background:#c9c9c9;transition:.35s;}
.linkbox .arr .bar:nth-child(1){width:22px;}
.linkbox .arr .bar:nth-child(2){width:15px;}
.linkbox .arr .bar:nth-child(3){width:8px;}
.linkbox a:hover .arr .bar{background:var(--ppl);}
.linkbox a:hover .arr .bar:nth-child(2){width:22px;}
.linkbox a:hover .arr .bar:nth-child(3){width:22px;}

/* 탭 */
.tab{display:flex;gap:44px;}
.tab.ta-c{justify-content:center;}
.tab button{
  position:relative;font-family:var(--serif);font-size:30px;font-weight:400;
  color:#bdbdbd;letter-spacing:-.045em;padding-bottom:14px;transition:color .3s;
}
.tab button::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--ppl);transition:width .4s;
}
.tab button.active{color:#2c2c2c;}
.tab button.active::after{width:100%;}
.tab button:hover{color:#6b6b6b;}
.tab button.active:hover{color:#2c2c2c;}

.tab-inbox{display:none;}
.tab-inbox.active{display:block;animation:tabin .6s both;}
@keyframes tabin{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

.btnbox{margin-top:56px;text-align:center;}
.btnbox .main-btn01::after{display:none;}

/* =========================================================
   msec01 : 메인 비주얼
   ========================================================= */
.msec01{position:relative;padding-top:var(--hd-h);overflow:hidden;background:#fff;}
.blob{position:absolute;border-radius:50%;pointer-events:none;}
.blob-gray{
  left:-60px;top:170px;width:230px;height:230px;background:#f3f2f2;
}
.blob-green{
  left:57%;top:100px;width:300px;height:250px;
  background:radial-gradient(circle at 40% 40%,rgba(146,214,123,.85),rgba(190,229,160,.15) 70%);
  filter:blur(38px);
}
.blob-blue{
  left:63%;top:180px;width:330px;height:330px;
  background:radial-gradient(circle at 45% 45%,rgba(168,169,231,.8),rgba(203,190,235,.12) 72%);
  filter:blur(40px);
}
.main-tit{position:relative;z-index:2;height:465px;display:flex;align-items:center;}
.slogan-txt{position:relative;}
.slogan-txt h2{
  font-size:50px;font-weight:400;line-height:1.52;letter-spacing:-.055em;color:#3a3a3a;
}
.slogan-txt h2 strong{font-weight:700;color:#222;}
.slogan-txt .deco{
  position:absolute;left:-42px;top:-52px;width:132px;height:132px;border-radius:50%;
  background:rgba(168,147,190,.10);z-index:-1;
}

.mvisual{position:relative;z-index:2;width:calc(100% - 180px);height:937px;}
.mvisual .slidebox{position:absolute;inset:0;}
.mv-swiper{position:relative;width:100%;height:100%;overflow:hidden;background:#dfe0dc;}
.mv-slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;
}
.mv-slide.is-active{opacity:1;}
.mv-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6s linear;}
.mv-slide.is-active img{transform:scale(1);}

.mvisual .control{
  position:absolute;right:38px;bottom:34px;z-index:5;display:flex;align-items:center;gap:14px;
}
.mv-pagination{display:flex;gap:9px;}
.mv-pagination button{
  width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);transition:.3s;
}
.mv-pagination button.is-active{background:#fff;transform:scale(1.25);}
.ct-btn{
  width:26px;height:26px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.ct-btn .ic-play{display:none;}
.ct-btn.is-paused .ic-play{display:block;}
.ct-btn.is-paused .ic-pause{display:none;}

.scroll-down{
  position:absolute;right:-118px;top:110px;
  writing-mode:vertical-rl;font-size:12px;letter-spacing:.24em;color:#9c9c9c;
}
.scroll-down::after{
  content:"";position:absolute;left:50%;bottom:-70px;width:1px;height:56px;background:#d6d6d6;
}

/* =========================================================
   msec02 : 공지사항
   ========================================================= */
.msec02{padding:170px 0;background:#fff;}
.msec02 .row01{display:flex;gap:0;align-items:stretch;}
.msec02 .row01 .m-titlebox{flex:0 0 441px;padding-top:24px;}
.msec02 .row01 .m-titlebox .view-all-btn{margin-top:66px;}

.notice-box01{
  flex:1;min-width:0;position:relative;height:326px;padding:44px 48px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:#2b2b2b url("./img/notice-bg.png") center/cover no-repeat;
  color:#fff;overflow:hidden;
}
.notice-box01::before{
  content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(60,42,58,.82),rgba(25,25,30,.55));
  transition:background .4s;
}
.notice-box01>*{position:relative;z-index:2;}
.notice-box01:hover::before{background:linear-gradient(105deg,rgba(105,72,101,.86),rgba(30,28,36,.62));}
.notice-box01 .tit{
  font-size:22px;font-weight:500;line-height:1.5;letter-spacing:-.04em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.notice-box01 .desc{
  margin-top:16px;font-size:14.5px;font-weight:300;line-height:1.75;color:rgba(255,255,255,.72);
  letter-spacing:-.03em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.notice-box01 .date{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.85);}
.notice-box01 .date .ico{line-height:0;}

.msec02 .row02{
  margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.msec02 .row02 .box{
  min-height:197px;padding:34px 34px 30px;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background .35s;
}
.msec02 .row02 .box+.box{box-shadow:-1px 0 0 var(--line);}
.msec02 .row02 .box:hover{background:#faf9fb;}
.msec02 .row02 .tit{
  font-size:18px;font-weight:400;line-height:1.55;color:#3a3a3a;letter-spacing:-.045em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .3s;
}
.msec02 .row02 .box:hover .tit{color:var(--ppl);}
.msec02 .row02 .date{
  margin-top:26px;display:flex;align-items:center;gap:7px;font-size:13.5px;color:#a3a3a3;
}
.msec02 .row02 .date .ico{line-height:0;}
.msec02 .row03{margin-top:44px;}

/* =========================================================
   msec03 : 광고신청
   ========================================================= */
.msec03{
  padding:60px 0;background:#f5f5ef url("./img/sec-ad-bg.png") center/cover no-repeat;
}
.msec03 .inner{padding-left:80px;}
.msec03 h2{font-size:42px;}
.msec03 .desc{margin-top:16px;font-size:16px;}
.msec03 .main-btn01{margin-top:34px;}

/* =========================================================
   msec04 : 조형예술대전
   ========================================================= */
.msec04{position:relative;padding:150px 0 140px;background:#fff;overflow:hidden;}
.bg-deco{position:absolute;pointer-events:none;line-height:0;}
.bg-deco img{filter:invert(1);opacity:.07;}
.deco-a{right:-40px;top:200px;width:596px;}
.deco-b{left:-60px;top:100px;width:568px;transform:scaleX(-1);}
.msec04 .inner{position:relative;z-index:2;}
.msec04 .tab{margin-bottom:84px;}

.slidebox{display:flex;align-items:flex-end;position:relative;}
.slidebox .left{flex:0 0 549px;max-width:549px;position:relative;z-index:2;}
.img-track{position:relative;width:100%;height:742px;overflow:hidden;background:#f2f2f2;}
.img-slide{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .7s,transform .9s;}
.img-slide.is-active{opacity:1;transform:none;}
.img-slide .img{width:100%;height:100%;}

/* 포스터 (레퍼런스 포스터 대체 : CSS 그라디언트 + 타이포) */
.poster{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:48px 34px 44px;color:#fff;text-align:center;overflow:hidden;
}
.poster::after{
  content:"";position:absolute;left:-20%;bottom:-28%;width:140%;height:70%;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.22),transparent 62%);
}
.poster-c1{background:linear-gradient(165deg,#e5197f 0%,#c4147a 55%,#8e0f63 100%);}
.poster-c2{background:linear-gradient(165deg,#5cb531 0%,#3f9b28 55%,#1f6c1d 100%);}
.poster-c3{background:linear-gradient(165deg,#1aa5d8 0%,#1279bd 55%,#0d4f8e 100%);}
.poster-c4{background:linear-gradient(165deg,#f58220 0%,#e2621a 55%,#a83f12 100%);}
.poster-c5{background:linear-gradient(165deg,#8f6b91 0%,#6d4a75 55%,#412b4c 100%);}
.poster .p-top{
  font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.02em;
  background:#fff;color:#222;padding:3px 18px;border-radius:2px;
}
.poster .p-main{
  margin-top:20px;font-family:var(--serif);font-size:44px;font-weight:700;line-height:1.24;
  letter-spacing:-.05em;text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.poster .p-en{
  margin-top:14px;font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.88);
}
.poster .p-mark{
  position:relative;z-index:2;margin:42px 0 auto;width:164px;height:164px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.55);
  transform:rotate(45deg);
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.08);
}
.poster .p-mark::before{
  content:"";position:absolute;inset:34px;border:1px solid rgba(255,255,255,.7);
}
.poster .p-part{
  position:relative;z-index:2;margin-top:auto;
  font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.04em;
}
.poster .p-date{
  position:relative;z-index:2;margin-top:12px;font-size:13px;letter-spacing:.02em;
  color:rgba(255,255,255,.9);padding-top:12px;border-top:1px solid rgba(255,255,255,.4);
}
.poster-k1{background:linear-gradient(150deg,#7b3fa5 0%,#b2379b 45%,#e14c9f 100%);justify-content:center;}
.poster-k2{background:linear-gradient(150deg,#2a4f9b 0%,#6b46a8 48%,#c0479b 100%);justify-content:center;}
.poster-k3{background:linear-gradient(150deg,#123a63 0%,#4a3b86 50%,#8f3f8e 100%);justify-content:center;}
.poster .p-en2{
  position:absolute;left:0;top:0;width:100%;height:100%;padding:24px 16px;
  font-size:26px;font-weight:700;line-height:1.5;letter-spacing:.02em;
  color:rgba(255,255,255,.13);word-break:break-word;overflow:hidden;text-align:left;
}
.poster .p-badge{
  position:relative;z-index:2;width:270px;height:270px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  backdrop-filter:blur(2px);
}
.poster .p-badge em{font-size:14px;letter-spacing:.18em;color:rgba(255,255,255,.85);}
.poster .p-badge b{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.03em;}
.poster .p-badge i{font-family:var(--serif);font-size:20px;letter-spacing:-.04em;color:rgba(255,255,255,.92);}
.poster .p-big{
  position:relative;z-index:2;margin-top:26px;font-size:64px;font-weight:700;letter-spacing:.04em;
  text-shadow:0 3px 16px rgba(0,0,0,.25);
}

.slidebox .right{
  flex:1;min-width:0;margin-left:-57px;padding-bottom:0;position:relative;
}
.slidebox .right .control{
  position:absolute;left:57px;top:-52px;
}
.pagination{display:flex;gap:9px;}
.pagination button{width:9px;height:9px;border-radius:50%;background:#dcdcdc;transition:.3s;}
.pagination button.is-active{background:var(--ppl);transform:scale(1.3);}

.txt-track{
  position:relative;min-height:488px;
  background:#d7d3c6 url("./img/txtbox-bg.png") center/cover no-repeat;
}
.txt-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s;
  display:flex;align-items:center;
}
.txt-slide.is-active{opacity:1;visibility:visible;position:relative;}
.txt-slide .txtbox{width:100%;padding:60px 68px 60px 114px;}
.txt-slide .txtbox .tit{
  font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.45;
  letter-spacing:-.05em;color:#33291f;
}
.txt-slide .txtbox .detail{margin-top:34px;padding-top:30px;border-top:1px solid rgba(60,45,30,.22);}
.txt-slide .txtbox .detail dl{display:flex;gap:26px;padding:8px 0;}
.txt-slide .txtbox .detail dt{
  flex:0 0 78px;font-size:14.5px;font-weight:500;color:#5a4d3c;letter-spacing:.06em;
}
.txt-slide .txtbox .detail dd{flex:1;min-width:0;font-size:15px;color:#463b2d;letter-spacing:-.03em;}
.txt-slide .txtbox .view-all-btn{margin-top:38px;}

.navibox{position:absolute;right:0;bottom:-70px;display:flex;gap:10px;}
.navi-btn{
  width:48px;height:48px;border:1px solid var(--line);border-radius:50%;color:#8a8a8a;
  display:flex;align-items:center;justify-content:center;transition:.3s;background:#fff;
}
.navi-btn:hover{border-color:var(--ppl);color:var(--ppl);}
.navi-btn:disabled{opacity:.35;cursor:default;}
.msec04 .linkbox{margin-top:110px;}

/* =========================================================
   msec05 : 조형예술계 소식
   ========================================================= */
.msec05{position:relative;padding:150px 0 140px;background:var(--bg-gray);overflow:hidden;}
.msec05 .inner{position:relative;z-index:2;}
.msec05 .m-titlebox{margin-bottom:48px;}
.msec05 .tab{margin-bottom:64px;}
.msec05 .tab button{font-size:24px;}

.card-slidebox{position:relative;}
.card-track{
  display:flex;gap:26px;overflow-x:auto;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.card-track::-webkit-scrollbar{display:none;}
.card-track.is-drag{cursor:grabbing;scroll-behavior:auto;}
.card{flex:0 0 371px;max-width:calc(100% - 40px);min-width:0;}
.card .img{
  display:block;position:relative;width:100%;aspect-ratio:371/525;overflow:hidden;
  background:#e8e6ea;
}
.card .thumb::before{
  content:"";position:absolute;left:50%;top:44%;width:56%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 14px rgba(255,255,255,.10);
  transition:transform .8s;
}
.card .thumb::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 72% 14%,rgba(255,255,255,.34),transparent 58%);
  transition:transform .6s;
}
.card .img:hover::after{transform:scale(1.08);}
.card .img:hover::before{transform:translate(-50%,-50%) rotate(135deg);}
.card .thumb-a{background:linear-gradient(150deg,#c8b6d8,#8f6b91);}
.card .thumb-b{background:linear-gradient(150deg,#b7cde0,#4d6f93);}
.card .thumb-c{background:linear-gradient(150deg,#e9c3b3,#b06d63);}
.card .thumb-d{background:linear-gradient(150deg,#cfd9c2,#6c8560);}
.card .thumb-e{background:linear-gradient(150deg,#d9cdb5,#8a7351);}
.card .thumb-f{background:linear-gradient(150deg,#c6c3dd,#5f5c8c);}
.card .thumb-g{background:linear-gradient(150deg,#e3cfd8,#9c6a84);}
.card .thumb-h{background:linear-gradient(150deg,#cddbd6,#537169);}
.card .thumb-i{background:linear-gradient(150deg,#c3ccdf,#3f4f74);}
.card .thumb-j{background:linear-gradient(150deg,#d5e2ee,#7d9dbb);}
.card .thumb-k{background:linear-gradient(150deg,#e7dcc8,#a08a63);}
.card .thumb-l{background:linear-gradient(150deg,#d8c9dd,#77588a);}
.card .cate{
  position:absolute;left:0;top:0;z-index:2;min-width:74px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ppl);color:#fff;font-size:13px;letter-spacing:-.02em;
}
.card .txtbox{padding:24px 4px 0;}
.card .tit{
  display:block;font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.5;
  color:#2f2f2f;letter-spacing:-.045em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .3s;
}
.card .tit:hover{color:var(--ppl);}
.card .txtbox dl{display:flex;gap:12px;margin-top:9px;}
.card .txtbox dt{flex:0 0 58px;font-size:13px;color:#9a9a9a;letter-spacing:.02em;}
.card .txtbox dd{
  flex:1;min-width:0;font-size:13.5px;color:#7d7d7d;line-height:1.55;letter-spacing:-.03em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.progressbar{position:relative;margin-top:54px;height:2px;background:#e3e3e3;}
.progressbar .fill{
  position:absolute;left:0;top:0;height:100%;width:30%;background:var(--ppl);
  transition:width .25s,transform .25s;
}

/* =========================================================
   msec06 : 저작권 등록 · 유관기관
   ========================================================= */
.msec06{background:#fff;border-top:1px solid #f0f0f0;}
.msec06 .inner{display:flex;align-items:center;gap:34px;height:128px;}
.msec06 .title{
  flex:0 0 196px;height:76px;padding:12px 16px;
  background:linear-gradient(120deg,#6b5b4b,#8b7a63);color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  position:relative;overflow:hidden;
}
.msec06 .title::after{
  content:"";position:absolute;right:-18px;bottom:-18px;width:70px;height:70px;border-radius:50%;
  background:rgba(255,255,255,.12);
}
.msec06 .title .t1{font-size:14px;font-weight:500;letter-spacing:-.04em;}
.msec06 .title .t2{font-size:13px;color:rgba(255,255,255,.82);letter-spacing:-.03em;}
.msec06 .title .t2 em{font-size:11px;}
.msec06 .bnr-slidebox{flex:1;min-width:0;overflow:hidden;border-left:1px solid #ececec;padding-left:34px;}
.bnr-track{display:flex;gap:15px;transition:transform .8s cubic-bezier(.4,0,.2,1);}
.bnr-item{
  flex:0 0 197px;height:59px;border:1px solid #ededed;background:#fcfcfc;
  display:flex;align-items:center;justify-content:center;padding:0 10px;
  transition:.3s;
}
.bnr-item span{
  font-size:13.5px;color:#7b7b7b;letter-spacing:-.05em;text-align:center;line-height:1.35;
}
.bnr-item:hover{border-color:var(--ppl-lt);background:#fff;}
.bnr-item:hover span{color:var(--ppl);}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:#333;color:#a5a5a5;padding:40px 0 46px;}
.footer .ft-01{display:flex;gap:34px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer .ft-01 a{font-size:14px;color:#c2c2c2;letter-spacing:-.03em;transition:color .3s;}
.footer .ft-01 a:hover{color:#fff;}
.footer .ft-01 strong{font-weight:500;color:#fff;}
.footer .ft-02{display:flex;align-items:flex-start;gap:70px;padding-top:30px;}
.footer .logo{flex:0 0 auto;opacity:.85;}
.footer .logo-txt em{color:#9b9b9b;}
.footer .logo-txt strong{color:#f0f0f0;font-size:19px;}
.footer .logo-txt small{color:#9b9b9b;}
.footer .info{flex:1;min-width:0;font-size:13.5px;line-height:2;letter-spacing:-.02em;}
.footer .info li{display:inline-block;margin-right:14px;position:relative;}
.footer .info li::after{
  content:"";position:absolute;right:-9px;top:50%;width:1px;height:11px;
  background:rgba(255,255,255,.22);transform:translateY(-50%);
}
.footer .info li.lst::after,.footer .info li.copy::after,.footer .info li.note::after{display:none;}
.footer .info li.fst{clear:both;}
.footer .info .nm{color:#e2e2e2;font-weight:500;}
.footer .info .copy{display:block;margin-top:14px;color:#8e8e8e;font-size:13px;}
.footer .info .note{display:block;margin-top:6px;color:#6f6f6f;font-size:11.5px;}

.top-btn{
  position:fixed;right:26px;bottom:32px;width:48px;height:48px;border-radius:50%;
  background:rgba(60,48,60,.78);display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.35s;z-index:850;
}
.top-btn.is-show{opacity:1;visibility:visible;transform:none;}
.top-btn:hover{background:var(--ppl);}

/* =========================================================
   POPUP
   ========================================================= */
.popup{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:.3s;
}
.popup.is-open{opacity:1;visibility:visible;}
.popup .cont{
  position:relative;width:100%;max-width:720px;max-height:80vh;background:#fff;
  padding:46px 40px 38px;overflow:hidden;display:flex;flex-direction:column;
}
.pop-close-btn{position:absolute;right:18px;top:18px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;}
.pop-main h3{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.04em;color:#2c2c2c;}
.pop-main .scrollbox{margin-top:22px;overflow-y:auto;max-height:52vh;padding-right:8px;}
.pop-main p{font-size:14px;line-height:1.85;color:#6b6b6b;letter-spacing:-.02em;}
.pop-main p+p{margin-top:14px;}
.pop-main .pop-note{margin-top:22px;font-size:12.5px;color:#a89ab0;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1400px){
  .scroll-down{right:-92px;}
  .mvisual{width:calc(100% - 140px);}
}
@media (max-width:1280px){
  .reveal[data-anim="fade-left"]{transform:translateY(38px);}
  .msec02 .row01{flex-wrap:wrap;}
  .msec02 .row01 .m-titlebox{flex:0 0 100%;padding-top:0;margin-bottom:36px;}
  .msec02 .row01 .m-titlebox .view-all-btn{margin-top:28px;}
  .notice-box01{flex:0 0 100%;height:290px;padding:38px 40px;}
  .slidebox .left{flex:0 0 420px;max-width:420px;}
  .img-track{height:568px;}
  .slidebox .right{margin-left:-40px;}
  .slidebox .right .control{left:40px;}
  .txt-slide .txtbox{padding:48px 44px 48px 78px;}
  .txt-track{min-height:420px;}
  .txt-slide .txtbox .tit{font-size:23px;}
  .card{flex:0 0 calc((100% - 52px)/3);max-width:none;}
  .poster .p-main{font-size:36px;}
  .poster .p-mark{width:128px;height:128px;}
  .poster .p-badge{width:220px;height:220px;}
  .poster .p-big{font-size:52px;}
}
@media (max-width:1024px){
  :root{--hd-h:86px;}
  .hd-inner{padding:0 20px;}
  .hd-search .sch-box{width:190px;}
  .hd-right{padding-right:118px;gap:16px;}
  .down-btn{width:96px;height:80px;padding-top:12px;right:14px;}
  .header.is-scroll .down-btn{height:72px;padding-top:10px;}
  .down-btn .txt{font-size:11.5px;}
  .all-menu-inner{padding:32px 20px 40px;}
  .all-menu .list{flex-wrap:wrap;gap:24px 10px;}
  .all-menu .list>li{flex:0 0 calc((100% - 30px)/4);}
  body.menu-open .all-menu{max-height:900px;overflow-y:auto;}
  .main-nav{display:none;}

  .main-tit{height:340px;}
  .slogan-txt h2{font-size:38px;}
  .mvisual{width:calc(100% - 60px);height:620px;}
  .scroll-down{display:none;}
  .blob-green{left:52%;top:70px;width:220px;height:190px;}
  .blob-blue{left:60%;top:130px;width:240px;height:240px;}

  .msec02{padding:110px 0;}
  .m-titlebox h2{font-size:36px;}
  .msec02 .row02{grid-template-columns:repeat(2,1fr);}
  .msec03 .inner{padding-left:20px;}
  .msec03 h2{font-size:34px;}
  .msec04,.msec05{padding:100px 0;}
  .msec04 .tab{margin-bottom:56px;}
  .tab button{font-size:24px;}
  .msec05 .tab button{font-size:20px;}
  .slidebox{flex-direction:column;align-items:stretch;}
  .slidebox .left{flex:0 0 auto;max-width:none;width:100%;}
  .img-track{height:520px;}
  .slidebox .right{margin-left:0;}
  .slidebox .right .control{position:static;margin:24px 0 18px;}
  .txt-track{min-height:0;}
  .txt-slide{position:absolute;}
  .txt-slide.is-active{position:relative;}
  .txt-slide .txtbox{padding:40px 32px;}
  .navibox{position:static;justify-content:flex-end;margin-top:22px;}
  .msec04 .linkbox{margin-top:50px;}
  .linkbox.fr-3{grid-template-columns:1fr;}
  .deco-a,.deco-b{width:340px;}

  .card{flex:0 0 calc((100% - 26px)/2);max-width:none;}
  .msec06 .inner{height:auto;padding:26px 20px;flex-direction:column;align-items:flex-start;gap:20px;}
  .msec06 .bnr-slidebox{width:100%;border-left:0;padding-left:0;border-top:1px solid #ececec;padding-top:20px;}

  .footer .ft-02{flex-direction:column;gap:24px;}
}
@media (max-width:768px){
  .logo-txt strong{font-size:17px;}
  .logo-txt small{font-size:7px;letter-spacing:.03em;}
  .hd-search{display:none;}
  .all-menu .list>li{flex:0 0 calc((100% - 10px)/2);}
  .main-tit{height:260px;}
  .slogan-txt h2{font-size:30px;}
  .slogan-txt .deco{width:96px;height:96px;left:-24px;top:-34px;}
  .mvisual{width:100%;height:420px;}
  .mvisual .control{right:18px;bottom:18px;}
  .msec02{padding:80px 0;}
  .m-titlebox h2{font-size:30px;}
  .m-titlebox .desc{font-size:15px;margin-top:14px;}
  .notice-box01{height:auto;min-height:250px;padding:30px 26px;}
  .notice-box01 .tit{font-size:19px;}
  .msec02 .row02{grid-template-columns:1fr;margin-top:30px;}
  .msec02 .row02 .box{min-height:0;padding:26px 4px;}
  .msec02 .row02 .box+.box{box-shadow:none;}
  .msec02 .row03{margin-top:34px;}
  .linkbox.fr-2{grid-template-columns:1fr;}
  .linkbox a{padding:22px 20px;gap:14px;}
  .linkbox dt{font-size:17px;}
  .linkbox dd{font-size:13px;}
  .msec03{padding:56px 0;}
  .msec03 h2{font-size:28px;}
  .msec03 .desc{font-size:14.5px;}
  .main-btn01{min-width:180px;height:50px;font-size:14px;}
  .main-btn01::after{width:40px;}
  .msec04,.msec05{padding:76px 0;}
  .tab{gap:24px;}
  .tab button{font-size:20px;padding-bottom:10px;}
  .msec05 .tab button{font-size:17px;}
  .img-track{height:400px;}
  .poster{padding:32px 20px 30px;}
  .poster .p-top{font-size:18px;}
  .poster .p-main{font-size:27px;}
  .poster .p-en{font-size:10.5px;}
  .poster .p-mark{width:96px;height:96px;margin-top:26px;}
  .poster .p-mark::before{inset:20px;}
  .poster .p-part{font-size:22px;}
  .poster .p-badge{width:180px;height:180px;}
  .poster .p-badge b{font-size:24px;}
  .poster .p-badge i{font-size:16px;}
  .poster .p-big{font-size:40px;margin-top:18px;}
  .txt-slide .txtbox{padding:30px 22px;}
  .txt-slide .txtbox .tit{font-size:19px;}
  .txt-slide .txtbox .detail dl{gap:14px;}
  .txt-slide .txtbox .detail dt{flex:0 0 66px;font-size:13px;}
  .txt-slide .txtbox .detail dd{font-size:13.5px;}
  .navi-btn{width:42px;height:42px;}
  .card{flex:0 0 78%;max-width:none;}
  .card .tit{font-size:16px;}
  .btnbox{margin-top:36px;}
  .deco-a,.deco-b{width:230px;opacity:.7;}
  .footer{padding:30px 0 40px;}
  .footer .ft-01{gap:16px 18px;flex-wrap:wrap;padding-bottom:18px;}
  .footer .ft-01 a{font-size:13px;}
  .footer .info{font-size:12.5px;line-height:1.9;}
  .footer .info li{display:block;margin-right:0;}
  .footer .info li::after{display:none;}
  .top-btn{right:16px;bottom:18px;width:42px;height:42px;}
  .popup .cont{padding:38px 22px 28px;}
  .pop-main h3{font-size:21px;}
}
@media (max-width:420px){
  .tab{gap:16px;}
  .tab button{font-size:16.5px;}
  .msec05 .tab button{font-size:15.5px;}
  .hd-right{padding-right:96px;}
  .down-btn{width:82px;height:72px;padding-top:10px;}
  .down-btn .ico svg{width:20px;height:20px;}
  .down-btn .txt{font-size:11px;}
  .slogan-txt h2{font-size:26px;}
  .card{flex:0 0 86%;max-width:none;}
}