body {font-family: 'pretendard';}
.wrap {position: relative; overflow: hidden;}
.wrap .visual-mask {position: absolute;inset: 0;background: var(--white); z-index: 9999; opacity: 1;transition: background-color 2s ease-in-out, opacity 2s ease-in-out; pointer-events: none;}
.wrap.is-loaded .visual-mask {opacity: 0;}
section {position: relative; padding: 160px 0;}
section .inner {position: relative; width: 100%; height: 100%;}
section .title-wrap {margin-bottom: 50px;}
section .title-wrap h2 {font-size: var(--fs-h3);}
section .title-wrap h2 span {color: var(--primary-1);}
section .title-wrap > div {display: flex; align-items: center; gap: 30px;}
section .title-wrap p {color: var(--text-muted);}
section h3 {font-size: var(--fs-24);}

@media screen and (max-width:1200px){
  section {padding: 80px 0;}
  section .title-wrap {margin-bottom: 30px;}
}

/**************************************************
  visual
***************************************************/
#visual { position: relative; width: 100%; overflow: hidden; margin-top: 90px;}
#visual .inner { position: relative; height: 0; /*padding-bottom: 48.15%;*/padding-bottom: calc(100vh - 90px); min-height: 520px; border-radius: 24px; overflow: hidden; }
#visual .visual-swiper { position: relative; overflow: hidden; border-radius: 24px;  width: 100%; transform-origin: center center; will-change: transform; backface-visibility: hidden;}
#visual .swiper-slide, #visual .inner {backface-visibility: hidden;transform: translateZ(0);}
#visual .swiper-slide { position: relative; overflow: hidden; border-radius: 30px; }
#visual .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#visual .bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
#visual .visual-txt { position: absolute; left: 150px; bottom: 180px; z-index: 2; color: #fff; }
#visual .visual-txt p { margin: 0 0 22px; font-size: 28px; font-weight: 400; line-height: 1.3; letter-spacing: -0.04em; opacity: 0.95; }
#visual .visual-txt h1 { margin: 0; font-size: 72px; font-weight: 700; line-height: 1.08;  word-break: keep-all; }
#visual .visual-pager { position: absolute; left: 205px; bottom: 94px; z-index: 3; display: flex; align-items: center; gap: 18px; }
#visual .vis-prev, #visual .vis-next, #visual .vis-stop, #visual .vis-play { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
#visual .crnt-page { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-width: 86px; font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.75); }
#visual .crnt-page strong { font-weight: 700; color: #fff; }
#visual .crnt-page em { position: relative; padding-left: 19px; font-style: normal; }
#visual .crnt-page em::before { content: ""; position: absolute; top: 50%; left: 0; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.55); transform: translateY(-50%); border-radius: 50px; }
#visual .vis-prev::before, #visual .vis-next::before { content: ""; position: absolute; top: 50%; width: 14px; height: 2px; background: #fff; transform: translateY(-50%); opacity: 0.95; }
#visual .vis-prev::after, #visual .vis-next::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; opacity: 0.95; }
#visual .vis-prev::before { left: 7px; }
#visual .vis-prev::after { left: 7px; transform: translateY(-50%) rotate(-135deg); }
#visual .vis-next::before { right: 7px; }
#visual .vis-next::after { right: 7px; transform: translateY(-50%) rotate(45deg); }
#visual .vis-stop::before, #visual .vis-stop::after { content: ""; position: absolute; top: 50%; width: 2px; height: 12px; background: #fff; transform: translateY(-50%); opacity: 0.95; }
#visual .vis-stop::before { left: 8px; }
#visual .vis-stop::after { right: 8px; }
#visual .vis-play::before { content: ""; position: absolute; top: 50%; left: 9px; transform: translateY(-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #fff; opacity: 0.95; }

#visual .vis-prev:focus-visible, 
#visual .vis-next:focus-visible, 
#visual .vis-stop:focus-visible, 
#visual .vis-play:focus-visible {
    outline: 2px solid #fff; 
    outline-offset: 3px;
    border-radius: 2px;
}


@media (max-width:1200px){
  #visual .visual-txt{left:60px;bottom:96px;}
  #visual .visual-pager{left:60px;bottom:42px;}
  #visual .visual-txt h1{font-size:64px;}
}

@media (max-width:1024px){
  #visual .inner{padding-bottom:58%;min-height:460px;}
  #visual .visual-txt{left:40px;bottom:88px;}
  #visual .visual-pager{left:40px;bottom:36px;}
  #visual .visual-txt h1{font-size:54px;}
  #visual .visual-txt p{margin-bottom:18px;font-size:2rem;}
}

@media (max-width:768px){
  #visual .visual-swiper,
  #visual .swiper-slide,
  #visual .inner{border-radius:18px;}
  #visual .inner{padding-bottom:72%;min-height:420px;}
  #visual .visual-txt{left:24px;right:24px;bottom:82px;}
  #visual .visual-pager{left:40px;bottom:28px;gap:14px;}
  #visual .visual-txt p{margin-bottom:14px;font-size:1.6rem;}
  #visual .visual-txt h1{font-size:48px;line-height:1.18;}
  #visual .crnt-page{min-width:auto;font-size:16px;}
}

@media (max-width:480px){
    #visual .visual-txt h1{font-size:38px;}
}


/**************************************************
    about kps
***************************************************/
#aboutKps {position:relative; z-index:2; background:var(--white); will-change:transform;}
#aboutKps .inner {display:flex; align-items:flex-start; justify-content:space-between; gap:0px;}

#aboutKps .about-left {flex:1; min-width:0;}
#aboutKps .main-tit-box .tit {font-size: var(--fs-h2); word-break: keep-all; color: var(--dark); line-height: 1.2;}
#aboutKps .main-tit-box .tit span {color: var(--primary-1);}
#aboutKps .about-btn-box {display:flex; align-items:center; gap:25px; margin-top:4rem;}
#aboutKps .about-right {width: 48%; flex-shrink: 0;}
#aboutKps .kps-card {display:flex; gap:30px;}
#aboutKps .kps-card + .kps-card {margin-top:30px;}
#aboutKps .kps-card li { position: relative;flex: 1;aspect-ratio: 1 / 1; border-radius: 24px;overflow: hidden; color: var(--white); padding: 50px; display: flex; flex-direction: column; justify-content: flex-end;}
#aboutKps .kps-card-top li:nth-child(1) {background:url(/resources/user/eng/images/main/img_about_01.jpg) center/cover no-repeat;}
#aboutKps .kps-card-top li:nth-child(2) {background:url(/resources/user/eng/images/main/img_about_02.jpg) center/cover no-repeat;}
#aboutKps .kps-card-btm li:nth-child(1) {background:url(/resources/user/eng/images/main/img_about_03.jpg) center/cover no-repeat;}
#aboutKps .kps-card-btm li:nth-child(2) {background:url(/resources/user/eng/images/main/img_about_04.jpg) center/cover no-repeat;}
#aboutKps .kps-card li::before {content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05)); pointer-events:none;}
#aboutKps .kps-card li > * {position:relative; z-index:1;}
#aboutKps .kps-card .card-tit {font-size: var(--fs-24); font-weight:500; opacity:.95; margin-bottom:34px;}
#aboutKps .kps-card .card-txt {font-size: var(--fs-24); font-weight:var(--fw-500); display:flex; align-items:flex-end; gap:6px;}
#aboutKps .kps-card .card-txt strong {font-size: var(--fs-h1); line-height:1; font-weight:700; letter-spacing:-0.02em;}
#aboutKps .kps-card-btm {transform: translateX(calc(-50% - 14px)) translateY(20px);}

@media screen and (max-width: 1400px) {
  #aboutKps .about-btn-box {margin: 30px 0;}
  #aboutKps .about-btn-box a{margin-right: auto;}
  #aboutKps .kps-card {gap: 20px;}
  #aboutKps .kps-card + .kps-card {margin-top: 10px;}
}

@media screen and (max-width: 1200px) {
  #aboutKps .inner {flex-direction: column; }
  #aboutKps .about-left {width: 100%; align-items: center;}
  #aboutKps .about-btn-box {justify-content: center;}
  #aboutKps .about-right {width: 100%;}
  #aboutKps .kps-card-btm {transform: none;} 
  #aboutKps .kps-card li {padding: 30px;}
  #aboutKps .kps-card .card-tit {margin-bottom: 25px;}
  #aboutKps .kps-card + .kps-card {margin-top: 20px;}
}

@media screen and (max-width: 768px) {
  #aboutKps .kps-card li {padding: 25px;}
  #aboutKps .kps-card .card-tit {margin-bottom: 15px;}
  #aboutKps .kps-card .card-txt strong {font-size: 30px;}
}

@media screen and (max-width: 480px) {
  #aboutKps .main-tit-box .tit {font-size: 28px;}
  #aboutKps .kps-card {gap: 15px;}
  #aboutKps .kps-card + .kps-card {margin-top: 15px;}
}


/**************************************************
  business
***************************************************/
#business {padding-top:0;}
#business .inner {position: relative}
#business a.more-btn {position:absolute;top:4px;right:0;}
#business .title-wrap {text-align:center;margin-bottom:40px;}
#business .business-list {display:flex;align-items:flex-end;gap:24px;height:640px;}
#business .business-item {position:relative;flex:1;height:540px;border-radius:20px;background-color:#fff;overflow:hidden;cursor:pointer;transition:all 0.5s cubic-bezier(0.25,0.8,0.25,1);}
#business .business-item .thumb {width:100%;height:100%;transition:height 0.5s ease; border-radius: 20px; overflow: hidden;}
#business .business-item .thumb img {width:100%;height:100%;object-fit:cover;border-radius:20px;transition:border-radius 0.5s ease;}
#business .business-item .cont {position:absolute;bottom:0;left:0;width:100%;min-height:150px;padding:30px;background:#fff;box-sizing:border-box;opacity:0;transform:translateY(20px);transition:all 0.4s ease;}
#business .business-item .cont .tit {display:block;font-size:var(--fs-36);font-weight:bold;color:#333;margin-bottom:8px;}
#business .business-item .cont .exp {display:block;font-size:var(--fs-24);color:#777;line-height:1.4;word-break:keep-all;}
#business .business-item .cont .icon {position:absolute;top:-60px;right:50px;background:var(--primary-1);width:120px;height:130px;display:flex;align-items:center;justify-content:center;}
#business .business-item .cont .icon::before {content: ''; width: 53px; height: 52px;}
#business .business-item:nth-child(1) .cont .icon:before { background: url(/resources/user/eng/images/icon/icon_sprite_main.svg) no-repeat -452px 0;}
#business .business-item:nth-child(2) .cont .icon:before { background: url(/resources/user/eng/images/icon/icon_sprite_main.svg) no-repeat -532px 0;}
#business .business-item:nth-child(3) .cont .icon:before { background: url(/resources/user/eng/images/icon/icon_sprite_main.svg) no-repeat -614px 0; }
#business .business-item:nth-child(4) .cont .icon:before { background: url(/resources/user/eng/images/icon/icon_sprite_main.svg) no-repeat -696px 0; }
#business .business-item.active {flex:4.5;height:600px;}
#business .business-item.active .thumb {height:calc(100% - 150px);}
#business .business-item.active .thumb img {border-bottom-left-radius:0;border-bottom-right-radius:0;}
#business .business-item.active .cont {opacity:1;transform:translateY(0);transition-delay:0.1s;}

@media screen and (max-width: 1500px) {
  #business a.more-btn {right: 48px;}
}

@media screen and (max-width: 1200px) {
    #business .business-list {flex-wrap: wrap; height: auto; align-items: stretch;}
    #business .business-item, #business .business-item.active {flex: 0 0 calc(50% - 12px); height: auto; transform: translateY(0); box-shadow: 0 5px 20px rgba(0,0,0,0.08); display: flex; flex-direction: column;transition: none;}
    #business .business-item .thumb, #business .business-item.active .thumb {height: 300px; overflow: hidden;}
    #business .business-item .thumb img {border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: .3s;}
    #business .business-item .thumb:hover img {transform: scale(1.1);}
    #business .business-item .cont, #business .business-item.active .cont {position: relative; opacity: 1; transform: translateY(0); flex: 1;}
    #business .business-item .cont .icon {top: -45px; right: 30px; width: 80px; height: 80px;}
}

@media screen and (max-width: 768px) {
    #business .title-wrap {text-align: left; margin-bottom: 30px; padding-bottom: 30px;}
    #business a.more-btn {right: 20px; top: 40px }
    #business .business-list {gap: 50px;}
    #business .business-item {border-radius: 0;}
    #business .business-item, #business .business-item.active {flex: 0 0 100%; box-shadow: none; }
    #business .business-item .thumb, #business .business-item.active .thumb {height: 280px; border-radius: 20px;}
    #business .business-item .cont {min-height: auto; padding: 0; margin-top: 10px; }
    #business .business-item .cont .icon {display: none;}
}


/**************************************************
  stock
***************************************************/
#stock { background: var(--surface); padding: 40px 0; }
#stock .inner { display: flex; align-items: center; justify-content:center; gap: 60px; }

#stock .title-wrap {margin: 0;}
#stock .stock-item { display: flex; align-items: center; gap: 30px; }
#stock .stock-price { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#stock .stock-price .arrow { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }

#stock .stock-item.up .arrow::before { content: '▲'; color: var(--point-red); }
#stock .stock-item.up .value { color: var(--point-red); }
#stock .stock-item.down .arrow::before { content: '▼'; color: var(--point-blue); }
#stock .stock-item.down .value { color: var(--point-blue); }

#stock .stock-price strong { font-size: var(--fs-h2, 32px); font-weight: 700; line-height: 1; color: #111; }
#stock .stock-price .unit { font-size: var(--fs-16, 16px); font-weight: 500; color: #111; }
#stock .divider { width: 1px; height: 70px; background: var(--gray-300); }

#stock .stock-change { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
#stock .stock-change li { display: flex; align-items: center; font-size: var(--fs-20); line-height: 1; }
#stock .stock-change .label {display: inline-block; width: 230px;color: var(--text-muted); }
#stock .stock-change .value { display: flex; align-items:center; gap:6px; font-weight: 500; }
#stock .stock-change b.arrow { font-size: var(--fs-14);}

#stock .btn-group { display: flex; align-items: center; gap: 20px; margin-left: auto; } 
#stock .stock-btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; width:300px; height: 110px; padding: 0 20px; background: var(--white); border-radius: 4px; font-size: var(--fs-24); font-weight: 600; text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,0.01); transition: border-color 0.2s; border-radius: 10px; transition: .3s; }
#stock .stock-btn:hover { transform: translateY(-10px);}
#stock .stock-btn .icon {background: url('/resources/user/eng/images/icon/icon_sprite_main.svg') no-repeat -779px -2px; width: 36px; height: 34px;}
#stock .stock-btn:last-child .icon {background-position: -845px -1px;}

@media screen and (max-width: 1500px) {
    #stock .inner { gap: 40px; }
    #stock .stock-btn { width: 240px; height: 80px; }
}
@media screen and (max-width: 1200px) {
    #stock .inner { flex-direction: column; gap: 30px; align-items: stretch; }
    #stock .title-wrap { text-align: center; }
    #stock .title-wrap h2 br {display: none;}
    #stock .stock-item { justify-content: center; }
    #stock .btn-group { margin-left: 0; width: 100%; justify-content: center; }
    #stock .stock-btn { flex: 1; max-width: 50%; height: 80px; }
}

@media screen and (max-width: 768px) {
    #stock .stock-item { flex-direction: column; gap: 20px; }
    #stock .divider { width: 100%; height: 1px; } 
    
    #stock .stock-change li { justify-content: center; }
    #stock .stock-change .label { width: 200px; }
    
    #stock .btn-group { gap: 10px; }
    #stock .stock-btn { gap: 8px; padding: 14px 10px; }
    #stock .stock-btn .icon { transform: scale(0.7); } 
}

@media screen and (max-width: 480px) {
    #stock .btn-group { flex-direction: column; }
    #stock .stock-btn { max-width: 100%; width: 100%; padding: 10px;}
}

/**************************************************
  egs
***************************************************/
#esg .inner {background:url(/resources/user/eng/images/main/esg_bg.jpg) center no-repeat; background-size:cover; width:100%; height:750px; padding:90px 100px; border-radius:50px; display:flex; justify-content:space-between; gap:80px; color:var(--white);}
#esg .title-wrap {flex:0 0 35%; margin-bottom:0; color:var(--white);}
#esg .title-wrap h2 {margin-bottom:60px;}
#esg .title-wrap a {max-width: 150px;}
#esg .esg-list-wrap {flex:1; min-width:0;}
#esg .esg-list {display:grid; grid-template-columns:repeat(2, 1fr); gap:50px;}
#esg .esg-list li {width:100%; min-width:0; border-radius:20px; border:1px solid rgba(255,255,255,0.7); background:linear-gradient(120deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.08) 100%); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); box-shadow:0 10px 40px rgba(0,0,0,0.18); padding:35px 30px; position:relative; overflow:hidden; text-shadow:0 0 10px rgba(0,0,0,.3); transition:.3s;}
#esg .esg-list li::before {content:""; position:absolute; inset:0; border-radius:20px; background:linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 22%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 62%); pointer-events:none;}
#esg .esg-list li::after {content:""; position:absolute; inset:1px; border-radius:19px; border:1px solid rgba(255,255,255,.18); pointer-events:none;}
#esg .esg-list li:nth-child(2) {transform:translateY(70px);}
#esg .esg-list li:nth-child(4) {transform:translateY(70px);}
#esg .esg-list li h3 {min-height: 68px;}
#esg .esg-list li .esg-btn {display:flex; margin-top:40px; font-size:var(--fs-16); padding-bottom:8px; border-bottom:1px solid #fff; align-items:center; justify-content:space-between; padding:0 15px 8px;}
#esg .esg-list li:is(:hover, :focus-within) {transform:translateY(-10px);}
#esg .esg-list li:nth-child(2):is(:hover, :focus-within) {transform:translateY(60px);}
#esg .esg-list li:nth-child(4):is(:hover, :focus-within) {transform:translateY(60px);}
#esg .esg-list li a:focus-visible {outline:none !important;}
#esg .esg-list li:focus-within::after {border:2px solid var(--focus) !important; box-shadow:inset 0 0 0 2px var(--focus);}
#esg .esg-list li .esg-btn .esg-arrow {position: relative; display: inline-block; width: 18px; height: 2px; background-color: var(--white); opacity: .7; transition: transform .35s ease;}
#esg .esg-list li .esg-btn .esg-arrow::after {content: ''; position: absolute; top: 50%; right: 1px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg);}
#esg .esg-list li a:hover .esg-btn .esg-arrow,
#esg .esg-list li a:focus-visible .esg-btn .esg-arrow {transform: translateX(6px);}
#esg .esg-controls {display:none; gap:12px; margin-top:24px;}
#esg .esg-controls button {width:28px; height:28px; border-radius:50%; background-color:rgba(255,255,255,0.8); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background-color 0.3s; position:relative; z-index:10;}
#esg .esg-controls button:hover {background-color:#fff;}
#esg .esg-controls button::after {content:""; display:block; width:7px; height:7px; border-top:2px solid #333; border-right:2px solid #333; transition:transform 0.3s;}
#esg .esg-controls .btn-next::after {transform:rotate(45deg); margin-left:-2px;}
#esg .esg-controls .btn-prev::after {transform:rotate(-135deg); margin-right:-2px;}
#esg .esg-controls button:hover::after {border-color:#000;}

@media screen and (max-width: 1500px) {
    #esg .inner {width:calc(100% - 96px); padding:80px 60px; gap: 40px;}
}

@media screen and (max-width: 1200px) {
    #esg .inner {flex-direction:column; height:auto; padding:60px 40px; padding-right: 0; border-radius:30px;}
    #esg .title-wrap, #esg .esg-list-wrap {flex:auto; width:100%;}
    #esg .title-wrap {margin-bottom:40px;}
    #esg .title-wrap h2 {margin-bottom:20px;}
    #esg .esg-list {display:flex; flex-wrap:nowrap; overflow-x:auto; gap:30px; padding-bottom:20px; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none;}
    #esg .esg-list::-webkit-scrollbar {display:none;}
    #esg .esg-list li {flex:0 0 calc(100% - 60px); max-width:320px; scroll-snap-align:start; transform:translateY(0) !important;}
    #esg .esg-list li:hover, #esg .esg-list li:focus-within {transform:translateY(0) !important;}
    #esg .esg-controls {display:flex;}
}

@media screen and (max-width: 768px) {
    #esg .inner {width:calc(100% - 40px); padding:40px 30px; padding-right: 0; border-radius:20px; gap: 50px;}
    #esg .title-wrap {margin-bottom: 0;}
    #esg .esg-list {margin:0;}
    #esg .esg-list li {flex:0 0 280px; max-width:none;}
}

@media screen and (max-width: 480px) {
  #esg .esg-list {gap: 20px;}
  #esg .esg-list li {flex:0 0 220px; padding: 25px;}
}



/**************************************************
  kpsFeed 
***************************************************/
#kpsFeed { position: relative; padding-top: 0; }
#kpsFeed::before {content: '';width: 823px;height: 582px;border-radius: 170px 0 0 0; background: linear-gradient(90deg, #F2F3FC 0%, rgba(252, 242, 247, 0.00) 100%); position: absolute; left: 0;bottom: 90px;}
#kpsFeed .inner { display: flex; justify-content: space-between; gap: 60px; }
#story { flex: 1.1 1 0%; min-width: 0; background: url(/resources/user/eng/images/main/story_bg.png) bottom left no-repeat; }
#story .webzine-wrap { display: flex; align-items: center; }
#story .webzine-wrap .thumb { flex: 0 1 429px; max-width: 429px; aspect-ratio: 429 / 535; filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.20)); }
#story .webzine-wrap .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#story .webzine-wrap .text { flex: 1; }
#story .webzine-wrap p { font-size: 28px; color: #666; text-align: center; margin-bottom: 50px; }
#story .webzine-wrap .com-btn-box a { min-width: 220px; }
#sns { flex: 1 1 0%; max-width: 640px; min-width: 0; }
#sns .title-wrap { display: flex; justify-content: space-between; align-items: center; }
#sns .sns-links { display: flex; gap: 10px; }
#sns .sns-links li { transition: transform .35s ease; transform: translateY(0); }
#sns .sns-links li:is(:hover, :focus-visible) { transform: translateY(-10px); }
#sns .sns-links li a { display: block; position: relative; border-radius: 50%; width: 44px; height: 44px;}
#sns .sns-links li.sns-youtube a {background: url('/resources/user/eng/images/icon/icon_sprite_main.svg') no-repeat -911px 0;}
#sns .sns-links li.sns-instagram a {background: url('/resources/user/eng/images/icon/icon_sprite_main.svg') no-repeat -985px -1px;}
#sns .sns-links li.sns-facebook a {background: url('/resources/user/eng/images/icon/icon_sprite_main.svg') no-repeat -1059px 0;}
#sns .sns-links li.sns-naverblog a {background: url('/resources/user/eng/images/icon/icon_sprite_main.svg') no-repeat -1133px 0;}
#sns .sns-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; width: 100%; }
#sns .sns-content .sns-thumb { width: 100%; max-width: 640px; aspect-ratio: 16 / 9; overflow: hidden; transition: .3s; }
#sns .sns-content .sns-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: .3s; }
#sns .sns-content .sns-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 30px; margin-top: 20px; min-width: 0;width: 100%; }
#sns .sns-content .sns-text > div { width: 100%; min-width: 0;}
#sns .sns-content .tit { display: block; width: 100%; font-size: var(--fs-24); font-weight: bold; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;
}
#sns .sns-content .exp {display: block;  width: 100%; color: var(--text-muted); margin-top: 10px; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;
}
#sns .sns-content:has(a:hover, a:focus-visible) .sns-thumb img { transform: scale(1.05); }

@media screen and (max-width: 1500px) {
  #story .webzine-wrap .text { margin-left: 30px; }
}


@media screen and (max-width: 1080px) {
  #sns .sns-content {flex-direction: column;}
  #sns .sns-content .sns-thumb {max-width: 100%;}
  #sns .sns-content .sns-text {width: 100%;}
  
}

@media screen and (max-width: 1200px) {
  #kpsFeed::before {bottom: auto;top: 90px; max-width: 100%; }
  #kpsFeed .inner { flex-direction: column; gap: 80px; }
  #story { flex: none; width: 100%; }
  #sns { flex: none; width: 100%; max-width: 100%; }
  #sns .sns-content { flex-direction: row; align-items: center; gap: 40px; }
  #sns .sns-content .sns-thumb { flex: 1; max-width: 50%; }
  #sns .sns-content .sns-text { flex: 1; margin-top: 0; }
}
@media screen and (max-width: 1024px) {
#story .webzine-wrap .com-btn-box a.ebook{display:none;}
}
@media screen and (max-width: 768px) {
  #kpsFeed::before  {display: none;}
  #sns .sns-content {flex-direction: column;}
  #sns .sns-content .sns-thumb {max-width: 100%;}
  #sns .sns-links {gap:0;}
  #sns .sns-links li a{transform: scale(.8);}
}

@media screen and (max-width: 640px) {
  #story .webzine-wrap {flex-direction: column;}
  #story .webzine-wrap .text {margin-left: 0; margin-top: 40px;}
  #story .webzine-wrap .com-btn-box {flex-direction: column; }
  #story .webzine-wrap .thumb {flex: 0 1 100%;max-width: 100%;aspect-ratio: 429 / 535;filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.20));}
}







/**************************************************
  scroll motion
***************************************************/
.motion-up{opacity: 0;transform: translateY(60px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform;}
.motion-up.is-show{opacity: 1; transform: translateY(0);}