@font-face {
    font-family: 'Taenada';
    src: url('../font/Tenada.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pyeongchang';
    src: url('../font/PyeongChang-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Pyeongchang';
    src: url('../font/PyeongChang-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'PpObBat';
    src: url('../font/printingboxMedium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'PpObBat';
    src: url('../font/printingboxBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'BagelFat';
    src: url('../font/BagelFatOne-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

/* @font-face {
    font-family: 'Bebas Neue';
    src: url('../font/BebasNeue-Regular.ttf') format('ttf');
    font-weight: normal;
    font-display: swap;
} */

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../font/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'KboDiamondGothic';
    src: url('../font/KBO-Dia-Gothic_bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'PyeongchangPeace';
    src: url('../font/PyeongChangPeace-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Interitalic';
    src: url('../font/Inter-BlackItalic.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Interitalic';
    src: url('../font/Inter-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'NanumBarunGothic';
    src: url('../font/NanumBarunGothic.otf') format('otf');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NanumBarunGothic';
    src: url('../font/NanumBarunGothicBold.otf') format('otf');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Moneygraphy';
    src: url('../font/Moneygraphy-Rounded.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}




* {padding: 0; margin: 0; font-size: 10px; font-family: 'Pyeongchang'; font-weight: normal; }

ul li {list-style: none;}
a { color: #fff; text-decoration: none;}

.blind{
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}


.wrap { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }

header .top {width: 100%; height: 50px; background:#5EC8F2; display: flex; align-items: center; justify-content: center;}
header .top img {width: 30px; height: 30px;}


header nav a {font-family: 'Taenada'; font-size: 2.4rem; color: #fff; width: 212px; height: 58px; display: flex; align-items: center; justify-content: center; transition: .3s;}
header nav li {background: url(../images/menu_img.png) center center; width: 212px; height: 58px; transition: .3s;}
header nav ul {display: flex; gap: 26px; position: fixed; z-index: 999; top: 100px; left: 50%; transform: translateX(-50%); }
header nav {display: flex; justify-content: center; align-items: center; margin-top: 63px; }
header nav li:hover , header nav li[active="1"] {transform: rotate(-5deg); filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 25%)); transition: 0.3s; }
header nav li:hover a , header nav li[active="1"] a {font-size: 3rem; filter: drop-shadow(4px 4px 0px rgba(207, 0, 0, 25%)); transition: 0.3s;}



/* 메인 시작 */
/* 어바웃미 */
.about_me {width: 100%; height: 935px; background: url(../images/pattern.png); margin-top: -63px; padding-top: 190px; box-sizing: border-box; position: relative;} 
.about_me .profile {width: 1460px; height: 630px; background: #fff; border-radius: 40px; border: 3px solid #C0C0C0; margin: 0 auto; position: relative; right: 10px;}
.about_me .profile .clip {position: absolute; right: 100px; top: -71px; z-index: 888;}

.profile .left {display: flex; flex-direction: column; align-items: center; position: absolute; left: 140px; top: 126px;}
.profile .left .face {width: 280px; height: 280px; background: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)), url(../images/sujin.jpg) no-repeat center; background-size: 224px auto; background-position: top 10px center; border-radius: 500px; border: 1px solid #ccc;}
.profile .left .name {display: flex;  flex-direction: column; align-items: center; margin-top: 20px;}
.profile .left .name .b {font-size: 2.2rem; color: #808080;}
.profile .left .name .n {font-size: 2.4rem; font-weight: 700; color: #9e9e9e;}
.profile .left .name span {font-size: 3.2rem; font-weight: 700; color: #373737; margin-right: 10px;}

.profile .right {position: absolute; right: 540px; top: 154px;}
.profile .right .tit {font-family: 'PpObBat'; font-weight: 600; font-size: 3.8rem; color: #5EC8F2;}
.profile .right ul {margin-top: 30px;}
.profile .right .year {font-size: 1.8rem; margin-left: 10px; color: #9e9e9e;}
.profile .right p {font-size: 2.2rem; color: #373737;}
.profile .right .first li:last-child {margin-bottom: 80px;}
.profile .right .second {display: flex; flex-direction: column;}
.profile .right .second ul {display: flex; gap: 15px;}

/* 소개 */
.produce {width: 1460px; height: 630px; position: absolute; left: 50%;  transform: translate(-50%, 0%); top: 190px;}
.produce .card_01 {position: absolute; right: -30px; width: 474px; height: 622px; bottom: -40px;} 
.produce .letter {font-size: 3.5rem; font-family: 'BagelFat'; text-shadow: -2.5px 0 #000, 0 2.5px #000, 2.5px 0 #000, 0 -2.5px #000; color: #fff; text-align: center; position: absolute; right: 15px; top: 320px;}
.produce .under_line .line_01 { width: 323px; height: 26px; background-color: #FFFCD5 ; z-index: -100; margin-top: -170px; margin-left: 29px;}
.produce .under_line .line_02 { width: 225px; height: 26px; background-color: #FFFCD5;  z-index: -100; margin-top: 70px; margin-left: 2px;}
.produce .under_line .line_03 { width: 270px; height: 26px; background-color: #FFFCD5;  z-index: -100; margin-top: 30px; margin-left: 53px;}


@media only screen and (min-width: 865px) {
    .works { height: 900px !important; }
}
@media only screen and (min-width: 686px) {
    .contact { height: 800px !important; }
}
@media only screen and (min-width: 240px) {
    footer { height: 300px !important; }
}

/* 워크 */
.works {display: flex; flex-direction: column; align-items: center;  background: #FFFCD5; width: 100%; height: 865px;}
.works .tit {font-size: 4.5rem; font-family: 'Taenada'; color: #DF2736; margin-bottom: 100px; margin-top: 150px;}

.works .content {display: flex; justify-content: space-between; gap: 70px;}
.works .content .box_wrap { width: 330px; height: 490px; position: relative; opacity: 0; transform: translateY(40px); transition: opacity 0.3s, transform 0.3s;}
.works .content .box {width: 330px; height: 418px; background: #DF2736; border-radius: 40px; position: absolute; margin-top: 60px; z-index: 2;}
.works .paper {width: 297px; height: 431px; background: #fff; border-radius: 40px; margin: 0 auto; transition: 0.3s; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); box-shadow: 0 0 10px rgba(253, 231, 231, 90%);}
.works .content .box .ent {width: 100px; height: 50px; background: #fff; border-radius: 0 0 100px 100px; margin: 0 auto; margin-bottom: 70px; }
.works .content .prj_name {position: absolute; left: 50%; transform: translateX(-50%);}
.works .content .box span {font-size: 7rem; font-family: 'PpObBat'; font-weight: 600; color: #fff; }
.works .content .box li {min-width: none; max-width: 106px; height: 30px; border: 1px solid #fff; border-radius: 50px; color: #fff; font-size: 1.8rem; padding: 6px 12px 6px 12px; box-sizing: border-box; display: flex; align-items: center;} 
.works .content .box ul {display: flex; gap: 5px; margin-top: 60px; margin-bottom: 15px;}
.works .content .box .white {width: 235px; height: 80px; background-color: #fff; border-radius: 10px ; font-size: 2.6rem; font-weight: 700; display: flex; justify-content: center; align-items: center; color: #404040;}

/* 워크 호버시 */
.works .box_wrap:hover .paper {transform: translateX(-50%) translateY(-40%); transition: transform 0.7s; }
.works .box_wrap:hover .paper_01 {background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), #fff url(../images/prj_hover_01.png) no-repeat; background-position: center 20px;}
.works .box_wrap:hover .paper_02 {background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), #fff url(../images/prj_hover_02.png) no-repeat; background-position: center 20px;}
.works .box_wrap:hover .paper_03 {background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), #fff url(../images/prj_hover_03.png) no-repeat; background-position: center 20px;}
.works .box_wrap:hover .paper_04 {background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), #fff url(../images/prj_hover_04.png) no-repeat; background-position: center 20px;}


/* 컨택 */
.contact {width: 100%; height: 686px; background: #5EC8F2; position: relative; display: flex; align-items: center; justify-content: center;}
.contact .tit {font-size: 4.5rem; font-family: 'Taenada'; color: #70CA5D; text-shadow: -2.5px 0 #fff, 0 2.5px #fff, 2.5px 0 #fff , 0 -2.5px #fff; margin-bottom: 75px;}
.contact .ct_wrap {width: 100%; height: 580px; border-top: 10px solid #fff; border-bottom: 10px solid #fff; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.contact .info ul {display: flex; flex-direction: column; gap: 20px;}
.contact .info li {font-size: 2.6rem; font-family: 'Pyeongchang'; width: 640px; height: 60px; border-radius: 50px;  display: flex; align-items: center; justify-content: center; box-shadow: 5px 5px 0px #FF9630; }
.contact .info li:first-child {background: #fff url(../images/contact_ico_01.png) no-repeat 20px;}
.contact .info li:nth-child(2) {background: #fff url(../images/contact_ico_02.png) no-repeat 20px;}
.contact .info li:nth-child(3) {background: #fff url(../images/contact_ico_03.png) no-repeat 20px;}
.contact .info li button[type="button"] {font-size: 2.6rem; font-family: 'Pyeongchang'; background: none; color: inherit; cursor: pointer; border: none; text-decoration: underline; text-underline-offset: 5px;}
.contact .info li button[type="button"]:hover {color: #FF9630; font-weight: 700;}

/* 메인 팝업 */
#popup {width: 480px; height: 400px; background: none; border: none; position:fixed; top: 50%; left: 70%; transform: translate(-50%, -50%);}
#popup img {position: relative;}
#popup > div {position: absolute; right: 23px; bottom: 43px;}
#popup > div p:first-child {font-size: 2.2rem; color: #70CA5D; border: 2px solid #70CA5D; border-radius: 50px; width: 185px; height: 40px; box-shadow: 5px 5px 0px #fff; font-family: 'PpObBat'; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; background-color: #fff;}
#popup > div p:last-child {font-size: 2.2rem; color: #fff; border-radius: 50px; width: 285px; height: 40px; background-color: #70CA5D; box-shadow: 5px 5px 0px #fff; font-family: 'PpObBat'; font-weight: 600; display: flex; align-items: center; justify-content: center;}
#popup::backdrop {background-color: rgba(0,0,0, 0.3);}



/* 푸터 */
footer { width: 100%; height: 240px; background: url(../images/pattern.png); display: flex; flex-direction: column; justify-content: center; align-items: center;}
footer img {width: 50px; height: 50px; margin-bottom: 20px;}
footer .letter_wrap {display: flex; flex-direction: column; align-items: center; position: relative;}
footer .letter_wrap .tape_01 {width: 415px; height: 100px; position: absolute;}
footer .letter_wrap .tape_02 {width: 302px; height: 130px; position: absolute; top: -20px;}
footer .letter_wrap p {font-size: 3.8rem; font-family: 'Taenada'; color: #FFA3BC; position: relative ; text-align: center;}


/* 서브01 */
.sl_wrap {width: 100%; min-height: 200vh; background-color: #F3F3F3; position: relative; z-index: 56;}

/* 탑버튼 */
.sl_wrap #top_btn {width: 90px; height: 80px; position: fixed; bottom: 50px; right: 50px; cursor: pointer; z-index: 999; background-color: #fff; border: 2px solid #5EC8F2;  border-radius: 30px; display: none; align-items: center; justify-content: center; color: #FFA3BC; font-size: 2.4rem; font-family: 'PyeongchangPeace'; }

/* 네비바 */
.sub_nav ul {display: flex; justify-content: space-between; align-items: center; padding: 70px 170px 0px 170px; box-sizing: border-box;}
.sub_nav li {width: 240px; height: 50px; background-color: #F2A0B6; border-radius: 50px; display: flex; align-items: center; justify-content: center;}
.sub_nav li a {width: 240px; font-size: 2.4rem; font-family: 'Taenada'; display: flex; align-items: center; justify-content: space-between;}
.sub_nav li:first-child {padding-left: 20px; padding-right: 30px; box-sizing: border-box;}
.sub_nav li:last-child {padding-left: 30px; padding-right: 15px; box-sizing: border-box;}

/* 서브01-메인 */
.sl_main .main_img {position: absolute; top: 0; z-index: -55; }
.sl_produce {width: 510px; height: 700px; border: 3px solid #5EC8F2; border-radius: 20px; position: absolute; right: 0; background-color: #fff; overflow: hidden; right: 0px; margin-top: 120px; animation: r-to-l 1s; animation-fill-mode: forwards; opacity: 0; animation-delay: 0.1s; animation-timing-function: ease-in;}

@keyframes r-to-l {
    from {right: 0}
    to {right: 170px; opacity: 1;}
}

.sl_produce .top ul {display: flex; gap: 10px; margin-left: 20px; }
.sl_produce .top li {width: 18px; height: 18px; background-color: #FFFCD5; border-radius: 50px; } 
.sl_produce .top {width: 100%; height: 50px; background-color:#5EC8F2; display: flex; align-items: center;}
.sl_produce .sl_tit {font-size: 5.2rem; color:#5EC8F2; font-family: "Bebas Neue"; margin-left: 40px; margin-top: 50px;}
.sl_produce .sl_con {margin-left: 40px; margin-top: 60px;}
.sl_produce .sl_con p {margin-top: 10px;}
.sl_produce .sl_con p, b {font-size: 1.8rem; color: #7B7B7B;}
.sl_produce .sl_con b {font-weight: bold; color: #5E5E5E;}
.sl_produce .bottom {display: flex; align-items: center; justify-self: flex-end; gap: 10px; position: absolute; right: 40px; bottom: 40px;}

/* 서브1 팝업 */
.sl_produce .popover {display: flex; }
.sl_produce .popover button {border: none; background-color: transparent; cursor: pointer; position: relative; anchor-name: --info-button;}
.sl_main #popup1 {width: 327px; height: 192px; background-color: #5EC8F2; border-radius: 30px; border: none; position-anchor: --info-button; position: absolute; top: anchor(top); left: anchor(left); margin-top: -150px; margin-left: -337px; }
.sl_main #popup1 ul {position: absolute; top: 50%; left: 20%; transform: translate(-20%, -50%); display: flex; gap: 15px; flex-direction: column;}
.sl_main #popup1 li {display: flex; align-items: center;}
.sl_main #popup1 li p {font-size: 2.2rem; color: #fff; margin-bottom: 2px; font-weight: 700;}
.sl_main #popup1 li img {margin-right: 20px;}

.sl_produce .watch_www {padding: 9px 15px; box-sizing: border-box; border-radius: 50px; border: 2px solid #5EC8F2; background-color: #fff; box-shadow: 2px 2px 0 #DADADA;}
.sl_produce .watch_www a {font-size: 1.6rem; color: #787878; font-family: 'PpObBat'; display: flex; align-items: center; justify-content: center; gap: 8px;}

/* 컬러설명 */
.sl_color {width: 1580px; min-height: 100vh; position: relative; top: 1100px; margin: 0 auto;}

.sl_color_pr {width: 1347px; height: 435px; border: 3px solid #aeaeae; border-radius: 20px; background-color: #fff; overflow: hidden; }
.sl_color_pr .top {width: 100%; height: 50px; background-color:#AEAEAE; display: flex; align-items: center; }
.sl_color_pr .top ul {display: flex; gap: 10px; margin-left: 20px; }
.sl_color_pr .top li {width: 18px; height: 18px; background-color: #FFFCD5; border-radius: 50px; } 
.sl_color_pr .tit {font-size: 4.2rem; font-family: 'PpObBat'; font-weight: 600; color: #3C3C3C; margin-top: 150px; margin-left: 50px; line-height: 150%; opacity: 0; transform: translateY(30px); transition: opacity 3.5s, transform 1.8s;}
.sl_color_pr .tit.active { opacity: 1; transform: translateY(0);}
.sl_color_pr .con {margin-top: 30px; margin-left: 50px; opacity: 0; transform: translateY(30px); transition: opacity 4s, transform .6s;}
.sl_color_pr .con.active { opacity: 1; transform: translateY(0);}

.sl_color_pr .con p {font-size: 2rem; color: #737373; }
.sl_color_pr .con span {font-size: 2rem; color: #FFA701; font-weight: 700;}

.sl_color .color_palette > div { width: 210px; height: 280px; background-color: #fff; border: 2px solid #AEAEAE; border-radius: 20px; position: relative; box-sizing: border-box;}
.sl_color .color_palette > div .circle {width: 22px; height: 22px; background-color: #C4C4C4; border: #aeaeae; border-radius: 50%; position: absolute; right: 15px; top: 10px; }
.sl_color .color_palette > div .color_box {width: 181px; height: 144px; border-radius: 5px; margin: 0 auto; margin-top: 48px;}
.sl_color .color_palette > div p {font-size: 1.8rem; color: #3F3F3F; font-family: 'Pretendard'; font-weight: 500; margin-left: 15px; margin-top: 15px; margin-bottom: 5px;}
.sl_color .color_palette > div span {font-size: 1.8rem; color: #A4A4A4; font-family: 'Pretendard'; font-weight: 500; margin-left: 15px;}

.sl_color .color_palette > div:nth-child(1) {position: absolute; right: 455px; top: 80px; transform: translateX(30px); transition: opacity 0.6s, transform 0.6s; opacity: 0;}
.sl_color .color_palette > div:nth-child(1).active { opacity: 1; transform: translateX(0);}
.sl_color .color_palette > div:nth-child(2) {position: absolute; right: 300px; top: 250px; transform: translateX(60px); transition: opacity 1.2s, transform 1.2s; opacity: 0;}
.sl_color .color_palette > div:nth-child(2).active { opacity: 1; transform: translateX(0);}
.sl_color .color_palette > div:nth-child(3) {position: absolute; right: 150px; top: 20px; transform: translateX(90px); transition: opacity 1.8s, transform 1.8s; opacity: 0;}
.sl_color .color_palette > div:nth-child(3).active { opacity: 1; transform: translateX(0);}
.sl_color .color_palette > div:nth-child(4) {position: absolute; right: 0px; top: 210px; transform: translateX(90px); transition: opacity 2.4s, transform 2.4s; opacity: 0;}
.sl_color .color_palette > div:nth-child(4).active { opacity: 1; transform: translateX(0);}

/* 디자인컨셉 */

.sl_concept {width: 100%; height: 2185px; background-color: #D6E2EF; margin-top: 830px; position: relative;;}
.sl_concept .font {width: 367px; height: 337px; border: 3px solid #FFA556; border-radius: 20px; overflow: hidden; position: relative; background-color: #fff; left: 170px; top: -80px;}
.sl_concept .top {width: 100%; height: 50px; background-color:#FFA556; display: flex; align-items: center; }
.sl_concept .top ul {display: flex; gap: 10px; margin-left: 20px; }
.sl_concept .top li {width: 18px; height: 18px; background-color: #FFFCD5; border-radius: 50px; }

.sl_concept .font .sl_tit {font-size: 6.8rem; font-family: 'PpObBat'; font-weight: 600; color: #3C3C3C; margin-bottom: 50px; margin-top: 40px; margin-left: 40px; opacity: 0; transform: translateY(30px); transition: opacity 2s, transform 2s;}
.sl_concept .font .sl_tit.active { opacity: 1; transform: translateY(0);}

.sl_concept .font .sl_con {margin-left: 40px; opacity: 0; transform: translateY(30px); transition: opacity 2.5s, transform 2.5s;}
.sl_concept .font .sl_con.active { opacity: 1; transform: translateY(0);}

.sl_concept .font .sl_con p:first-child{font-size: 2.8rem; font-family: 'KboDiamondGothic'; color: #7C7C7C;}
.sl_concept .font .sl_con p:last-child {font-size: 3.2rem; color: #7C7C7C; font-family: 'Pretendard'; font-weight: 700; margin-top: 10px;}

.sl_concept img {border-radius: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 15%);}
.sl_concept img:first-child {position: absolute; right: 170px; top: 80px;}
.sl_concept img:last-child {position: absolute; right: 50%; transform: translateX(50%); top: 870px;}

.sl_concept .letter {padding-left: 170px; padding-right: 170px; box-sizing: border-box; display: flex; flex-direction: column;}
.sl_concept .letter p,span {font-size: 2rem;}
.sl_concept .letter p {padding: 25px 50px; box-sizing: border-box; line-height: 150%;}
.sl_concept .letter .b_box {display: inline-block; align-self: flex-start;  background-color: #415CB4; border-radius: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 25%); color: #fff;}
.sl_concept .letter .b_box span {color:#FFA556; font-weight: 700;}
.sl_concept .letter .wh_box {display: inline-block; align-self: flex-start; background-color: #fff; border-radius: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 25%); color: #333;}
.sl_concept .letter .wh_box span {color: #102185; font-weight: 700;}

.sl_concept .letter .right {text-align: left; position: relative; display: flex; flex-direction: column;}
.sl_concept .letter .left {text-align: right; position: relative;}

.sl_concept .letter > div:nth-child(1) {margin-bottom: 30px; opacity: 0; transform: translateX(-80px); transition: opacity 2.5s, transform 2.5s;}
.sl_concept .letter > div:nth-child(1).active { opacity: 1; transform: translateX(0);}

.sl_concept .letter > div:nth-child(2) {margin-bottom: 80px; opacity: 0; transform: translateX(-80px); transition: opacity 3.2s, transform 2s;}
.sl_concept .letter > div:nth-child(2).active { opacity: 1; transform: translateX(0);}

.sl_concept .letter > div:nth-child(3) {margin-bottom: 30px; opacity: 0; transform: translateX(80px); transition: opacity 3s, transform 3s;}
.sl_concept .letter > div:nth-child(3).active { opacity: 1; transform: translateX(0);}

.sl_concept .letter > div:nth-child(4) {margin-bottom: 260px; opacity: 0; transform: translateX(80px); transition: opacity 3.5s, transform 2s;}
.sl_concept .letter > div:nth-child(4).active { opacity: 1; transform: translateX(0);}

.sl_concept .letter > div:nth-child(5) {margin-bottom: 260px; opacity: 0; transform: translateX(-80px); transition: opacity 1.5s, transform 1.5s;}
.sl_concept .letter > div:nth-child(5).active { opacity: 1; transform: translateX(0);}

.sl_concept .letter > div:nth-child(6) {margin-bottom: 320px; opacity: 0; transform: translateX(80px); transition: opacity 1.5s, transform 1.5s;}
.sl_concept .letter > div:nth-child(6).active { opacity: 1; transform: translateX(0);}

.sl_concept .letter > div:nth-child(7) {opacity: 0; transform: translateX(-80px); transition: opacity 1.5s, transform 1.5s;}
.sl_concept .letter > div:nth-child(7).active { opacity: 1; transform: translateX(0);}

/* 디자인 나열 */
.sl_designs {width: 100%; height: 5060px; background-color: #F2F3F3; padding-left: 170px; padding-right: 170px; box-sizing: border-box; display: flex; justify-content: center; gap: 140px; padding: 100px 0; box-sizing: border-box;}


.sl_designs .pc > div {border-radius: 20px; overflow: hidden; margin-bottom: 60px;}
.sl_designs .pc > div:nth-child(1) {width: 970px; height: 1695px; border: 2px solid #5EC8F2;}
.sl_designs .pc > div:nth-child(2) {width: 970px; height: 1179px; border: 2px solid #AEAEAE;}
.sl_designs .pc > div:nth-child(3) {width: 970px; height: 917px; border: 2px solid #5EC8F2;}
.sl_designs .pc > div:nth-child(4) {width: 970px; height: 788px; border: 2px solid #AEAEAE; margin-bottom: 0;}
.sl_designs .pc > div img {width: 970px;}
.sl_designs .pc p {font-size: 1.8rem; font-family: 'PpObBat'; color: #fff; margin-left: 30px;}
.sl_designs .mobile p {font-size: 1.8rem; font-family: 'PpObBat'; color: #fff; margin-bottom: 20px; background-color: #AEAEAE; border-radius: 30px; display: flex; align-items: center; justify-content: center; width: 102px; height: 32px;}

.sl_designs .pc > div:nth-child(odd) .top {background-color:#5EC8F2; width: 100%; height: 50px; display: flex; align-items: center; }
.sl_designs .pc > div:nth-child(even) .top {width: 100%; height: 50px; background-color:#AEAEAE; display: flex; align-items: center; }
.sl_designs .pc .top ul {display: flex; gap: 10px; margin-left: 20px; }
.sl_designs .pc .top li {width: 18px; height: 18px; background-color: #FFFCD5; border-radius: 30px;} 

.sl_designs > div:first-child {display: flex; flex-direction: column; gap: 60px; margin-top: 70px; opacity: 0; transition: 1s;}
.sl_designs > div:first-child.active { opacity: 1;}
.sl_designs > div img {align-self: flex-start;}
.sl_designs > div:last-child img {border-radius: 20px; border: 1px solid #aeaeae;}
.sl_designs > div:last-child {margin-top: 300px; opacity: 0; transition: 1.5s}
.sl_designs > div:last-child.active { opacity: 1;}

/* 서브02 */
.khd_wrap {width: 100%; min-height: 100vh; background-color: #DADADA; }

/* 탑버튼 */
.khd_wrap #top_btn {width: 90px; height: 80px; position: fixed; bottom: 50px; right: 50px; cursor: pointer; z-index: 999; background-color: #fff; border: 2px solid #171717;  border-radius: 30px; display: none; align-items: center; justify-content: center; color: #171717; font-size: 2.4rem; font-family: 'PyeongchangPeace'; }

/* 네비바 */
.khd_sub_nav ul {display: flex; justify-content: space-between; align-items: center; padding: 70px 170px 0px 170px; box-sizing: border-box;}
.khd_sub_nav li {width: 240px; height: 50px; background-color: #171717; border-radius: 50px; display: flex; align-items: center; justify-content: center;}
.khd_sub_nav li a {width: 240px; font-size: 2.4rem; font-family: 'Taenada'; display: flex; align-items: center; justify-content: space-between;}
.khd_sub_nav li:first-child {padding-left: 20px; padding-right: 30px; box-sizing: border-box; }
.khd_sub_nav li:last-child {padding-left: 30px; padding-right: 15px; box-sizing: border-box;}

/* 메인화면 */
.khd_main {width: 1580px; margin: 0 auto; margin-top: 90px; position: relative;}
.khd_main .main_img {margin-left: 120px; position: relative; z-index: 25; }
.khd_main .tit p:first-child {position: absolute; top: 0; right: 260px; font-size: 12rem; color: #171717; font-family: 'Interitalic'; font-weight: normal;}
.khd_main .tit p:last-child {position: absolute; top: 130px; right: 0; font-size: 10rem; color: #171717; font-family: 'Interitalic'; font-weight: 800;}


.swiper-container {position: relative; overflow: hidden; left: 280px; width: 1300px; top:-400px; height: 305px;}
.swiper-container .swiper-wrapper {transition-timing-function: linear !important; position: relative;}
.swiper-container .swiper-slide {width: auto; padding: 0px;}

/* 김홍도 팝오버 */
.khd_main .popover {display: flex; align-items: center; gap: 10px; position: absolute; right: 0; top:630px ; z-index: 60; anchor-name: --info-button;}

.khd_main .popover a {font-size: 2.2rem; font-family: 'NanumBarunGothic'; font-weight: 800; color: #4D4D4D; text-decoration: underline; text-underline-offset: 6px;}
.khd_main .popover a img {margin-left: 10px;}
.khd_main .popover .btn-open {border: none; background: none;}
.khd_main #popup2 {width: 327px; height: 192px; background-color: #4D4D4D; border-radius: 30px; border: none; position-anchor: --info-button; position: absolute; top: anchor(top); left: anchor(left); margin-top: -150px; margin-left: -340px;}
.khd_main #popup2 ul {position: absolute; top: 50%; left: 20%; transform: translate(-20%, -50%); display: flex; gap: 15px; flex-direction: column;}
.khd_main #popup2 li {display: flex; align-items: center;}
.khd_main #popup2 li p {font-size: 2.2rem; color: #fff; margin-bottom: 2px; font-weight: 700;}
.khd_main #popup2 li img {margin-right: 20px;}

/* 오버뷰&디자인가이드 */
.khd_sub_cont {margin: 0 auto; width: 1580px; display: flex; justify-content: space-between; margin-top: -20px;}
.khd_sub_cont .tit p {font-size: 3.8rem; font-family: 'PpObBat'; font-weight: 600; color: #454545;}
.khd_sub_cont .tit p:last-child {margin-top: 420px;}
.khd_sub_cont .wh_bg {width: 1230px; height: auto; border-radius: 20px; display: flex; flex-direction: column; padding: 70px 50px; box-sizing: border-box; position: relative; background: #fff url(../images/sub_2/muk_02.png) no-repeat right center; margin-bottom: 280px;}
.khd_sub_cont .muk img:first-child {position: absolute; top: -70px; left: 40px; z-index: 80;}
.khd_sub_cont .muk img:last-child {position: absolute; bottom: -190px; right: 280px;}
.khd_sub_cont .overview p:first-child {font-size: 2rem; font-family: 'NanumBarunGothic'; color: #383838; width: 872px; height: 140px; background-color: #E0E0E0; border-radius: 30px; display: flex; align-items: center;  justify-content: center; line-height: 150%; margin: 0 auto; font-weight: normal;}
.khd_sub_cont .overview p:nth-child(2) {font-size: 2rem; font-family: 'NanumBarunGothic';  color: #fff; border-radius: 30px; background-color: #323232; width: 822px; height: 83px; display: flex; align-items: center; justify-content: center; margin-top: 40px;}
.khd_sub_cont .overview img {position: absolute; right: 40px; top: 60px; z-index: 80;}

.khd_sub_cont .color_wrap {display: flex; justify-content: space-between; margin-top: 135px; align-items: flex-end;}

.khd_sub_cont .sub_tit {font-size: 3.8rem; color: #C5C5C5; font-family: 'NanumBarunGothic'; margin-bottom: 20px; font-weight: 800;}
.khd_sub_cont .design_guide .color {margin-bottom: 40px;}
.khd_sub_cont .design_guide .color .cont {font-size: 2rem; font-family: 'NanumBarunGothic'; color: #353535; line-height: 150%;}
.khd_sub_cont .color_box ul {display: flex; gap: 10px;}
.khd_sub_cont .color_box li p, span {font-size: 2rem; font-family: 'Pretendard'; font-weight: 500;}
.khd_sub_cont .color_box li span {display: flex; margin-top: 215px; margin-left: 25px;}
.khd_sub_cont .color_box li:nth-child(1) {width: 260px; height: 350px; border-radius: 20px; background-color: #fff; color: #353535; border: 1px solid #6E6E6E;}
.khd_sub_cont .color_box li:not(:nth-child(1)) {width: 150px; height: 350px; border-radius: 20px; color: #fff;}
.khd_sub_cont .color_box li {
    &:nth-child(2) {background-color: #171717; }
    &:nth-child(3) {background-color: #4B785C; }
    &:nth-child(4) {background-color: #684733; }
}
.khd_sub_cont .color_box li > div {display: flex; justify-content: flex-end; margin-top: 20px; margin-right: 20px; gap: 10px;}

.khd_sub_cont .design_guide .Typo_wrap {margin-top: 120px;}
.khd_sub_cont .design_guide .Typo_wrap .card_wrap {display: flex; justify-content: space-between; 
    & > div p:nth-child(1) {font-size: 2rem; font-family: 'NanumBarunGothic'; color: #373737; margin-bottom: 20px;}
    & .frst p:nth-child(2) {font-family: 'Pretendard'; font-weight: 700; font-size: 5rem; margin-bottom: 20px; color: #303030;}
    & .frst p:nth-child(3) {font-family: 'Pretendard'; font-weight: 600; font-size: 2.2rem; color: #666;}
    & .frst p:nth-child(4) {font-family: 'Pretendard'; font-weight: 600; font-size: 1.6rem; color: #666;}
    & .scnd p:nth-child(2) {font-family: 'Moneygraphy'; font-size: 4.8rem; color: #303030; margin-bottom: 20px;}
    & .scnd p:nth-child(3) {font-family: 'Moneygraphy'; font-size: 2.2rem; color: #666;}
}
.khd_sub_cont .design_guide .Typo_wrap .card_wrap > div {width: 553px; height: 233px; background-color: #E6E6E6; border-radius: 10px; padding: 25px 0 0 30px; box-sizing: border-box;}

/* 디자인 컨셉 */
.khd_mobile {background-color: #4E4E4E; position: relative; height: 1710px; width: auto;}
.khd_mobile > div {display: flex; gap: 20px; }
.khd_mobile > div:nth-child(3) {position: absolute; top: 250px; left: 330px; text-align: right;}
.khd_mobile > div:nth-child(4) {position: absolute; top: 360px; left: 1210px; text-align: left;}
.khd_mobile > div:nth-child(5) {position: absolute; top: 565px; left: 266px; text-align: right;}
.khd_mobile > div:nth-child(6) {position: absolute; top: 1208px; left: 240px; text-align: right;}
.khd_mobile .khd_mobile_img {position: absolute; left: 98%; top: 50%; transform: translate(-98%,-50%);}
.khd_mobile p {font-size: 2rem; font-family: 'NanumBarunGothic'; font-weight: 800; color: #fff; line-height: 150%; margin-top: -5px;}

.khd_last {
    overflow: hidden; /* 스크롤 안 보이게 */
    width: 100%;
    position: relative;
}

.khd_last ul {
    display: flex;
    width: max-content; /* 콘텐츠 길이만큼 늘어남 */
    animation: scrollLeft 40s linear infinite;
    margin: 120px 170px 160px 170px;
}

.khd_last li {
    flex: 0 0 auto; /* 아이템이 줄 바꿈 없이 한 줄로 나열 */
}

.khd_last img {
    display: block;
    width: 300px; /* 이미지 크기는 상황에 맞게 조정 */
    height: auto;
    margin-right: 20px;
}

/* 👇 핵심 애니메이션 */
@keyframes scrollLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* 절반만큼 이동 후 반복 → 무한 루프처럼 보임 */
    }
}

/* 👇 호버 시 멈춤 효과 추가 */
.khd_last ul:hover {
    animation-play-state: paused;
}

/* 서브3 - 리스테린 */
/* 탑버튼 */
.listerine_wrap #top_btn {width: 90px; height: 80px; position: fixed; bottom: 50px; right: 50px; cursor: pointer; z-index: 999; background-color: #fff; border: 2px solid #171717;  border-radius: 30px; display: none; align-items: center; justify-content: center; color: #171717; font-size: 2.4rem; font-family: 'PyeongchangPeace'; }
/* 네비바 */
.listerine_nav ul {display: flex; justify-content: space-between; align-items: center; padding: 70px 170px 0px 170px; box-sizing: border-box;}
.listerine_nav li {width: 240px; height: 50px; background-color: #fff; border-radius: 50px; display: flex; align-items: center; justify-content: center; border: 2px solid #656565;}
.listerine_nav li a {width: 240px; font-size: 2.4rem; font-family: 'Taenada'; display: flex; align-items: center; justify-content: space-between; color: #656565;}
.listerine_nav li:first-child {padding-left: 20px; padding-right: 30px; box-sizing: border-box; }
.listerine_nav li:last-child {padding-left: 30px; padding-right: 13px; box-sizing: border-box;}

/* 서브3_리스테린 메인화면 */
.lt_main {padding: 0 170px; margin-top: 60px; display: flex; align-items: flex-end; justify-content: center; gap: 20px;}
.lt_main .overview {width: 1350px; height: 690px; background: #fff; border: 2px solid #686868;}
.lt_main .overview .top {width: 100%; height: 75px; border-bottom: 2px solid #686868; display: flex; align-items: center; justify-content: space-between;}
.lt_main .overview .top .x {width: 60px; height: 60px; position: relative; margin-left: 10px;}
.lt_main .overview .top .x > div {width: 56px; height: 2px; background-color: #686868; }
.lt_main .overview .top .x > div:first-child {position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg);}
.lt_main .overview .top .x > div:last-child {position: absolute; top: 50%; transform: translateY(-50%) rotate(-45deg);}

/* 리스테린 팝오버 */
.lt_main .popover {anchor-name: --info-button;}

.lt_main .popover .btn-open {border: none; background: #939393; width: 75px; height: 75px; font-size: 3rem; font-weight: 700; color: #fff; transition: .2s;}
.lt_main #popup3 {width: 327px; height: 192px; background-color: #fff; border: 2px solid #919191; position-anchor: --info-button; position: absolute; top: anchor(top); left: anchor(left); margin-left: -340px; margin-top: 20px;}
.lt_main #popup3 ul {position: absolute; top: 50%; left: 20%; transform: translate(-20%, -50%); display: flex; gap: 15px; flex-direction: column;}
.lt_main #popup3 li {display: flex; align-items: center;}
.lt_main #popup3 li p {font-size: 2rem; color: #1c1c1c; margin-bottom: 2px; font-weight: 700; font-family: 'Pyeongchang';}
.lt_main #popup3 li span {font-size: 2rem; color: #686868; font-weight: normal; margin-right: 20px;}
.lt_main #popup3 li img {margin-right: 20px;}

.lt_main .popover .btn-open:hover {background-color: #1c1c1c; transition: .6s;}

/* 서브3_메인 컨텐츠 */
.lt_main .overview .cont_wrap {display: flex;}
.lt_main .overview .cont_wrap .photo {width: 684px; height: 613px; background: url(../images/sub_3/main_img.jpg) no-repeat left top; background-size: 140%; background-position-y: -60px; border-right: 2px solid #686868;}
.lt_main .overview .cont_wrap > div:last-child {margin-left: 60px;}

/* 서브3_오버뷰 */
.lt_main .overview .cont_wrap .letter {width: 551px; margin-top: 170px;}
.lt_main .overview .cont_wrap .letter .tit {font-size: 10rem; color: #DBDBDB; font-family: "Bebas Neue"; line-height: 100%;}
.lt_main .overview .cont_wrap .letter p {font-size: 1.8rem; color: #000; line-height: 170%; margin-top: 20px;}
.lt_main .overview .cont_wrap .letter p span {font-size: 2.8rem; color: #000;}

/* 글자 올라오는 효과 */
.lt_main .overview .cont_wrap .letter .tit_wrap {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.lt_main .overview .cont_wrap .letter .tit.active {
    display: inline-block;
    animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    transform: translateY(0) rotate(0);
    opacity: 1;
}

@keyframes reveal {
    0% {
        transform: translateY(100%) rotate(8deg);
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

/* 마우스 포인터 */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none; /* 마우스 이벤트 무시 */
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out; /* 부드럽게 따라다님 */
    z-index: 9999;
    opacity: 0; /* 처음에는 숨김 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: bold;
    color: #383838;
    background: rgba(255,255,255,0.4);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: 700;
    border: 2px solid #B4B4B4;
    backdrop-filter: blur(3px); /* 배경 블러 */
    -webkit-backdrop-filter: blur(3px); /* 사파리 지원 */
}

.custom-cursor img {animation: moved .6s ease-in-out infinite alternate;} 

@keyframes moved {
    from {
    transform: translateX(0px);
    }
    50% {
    transform: translateX(5px);
    }
    to {
    transform: translateX(0px);
    }
}


/* 호버 시 나타나게 */
.cont_wrap:hover ~ .custom-cursor,
.cont_wrap:hover + .custom-cursor {
    opacity: 1;
}
.cont_wrap:hover {cursor: none;}

/* 서브3_컬러 팔레트 */
.lt_color {width: 100% ; height: auto; display: flex; flex-direction: column; margin-top: 200px; justify-content: center; align-items: center;}
.lt_color .tit_wrap {overflow: hidden; width: 100%; height: auto; text-align: center;}
.lt_color .tit {font-size: 8rem; color: #303030; font-family: "Bebas Neue"; text-align: center; margin: 0 auto; line-height: 100%;}
.lt_color .cont {font-size: 2rem; color: #4B4B4B; text-align: center; width: 1067px; margin-top: 20px;}

.lt_color .palette {margin-top: 80px;}
.lt_color .palette ul {
    width: 1400px;
    display: flex;
    flex-wrap: wrap; /* 화면 크기에 따라 줄 바꿈 */
    align-items: center;
    justify-content: center;
    gap: 40px;       /* 아이템 간격 */
    padding: 0;
    margin: 0;
    list-style: none;
}

.lt_color .palette li {width: 432px; height: 152px; border: 2px solid #D4D4D4; display: flex; justify-content: space-between; padding: 15px 20px; box-sizing: border-box; background-color: #fff;}
.lt_color .palette li > div:last-child {width: 164px; height: 116px; border: 2px solid #D4D4D4; display: flex;}
.lt_color .palette .letter_wrap {display: flex; flex-direction: column; justify-content: end;}
.lt_color .palette .letter_wrap p {font-size: 2.4rem; color: #525252; font-weight: 700;}
.lt_color .palette .letter_wrap span {font-size: 2rem; font-weight: 700; color: #D4D4D4; font-family: 'Pyeongchang';}
.lt_color .palette li:nth-child(1) > div:last-child { background-color: #b36bd0; }
.lt_color .palette li:nth-child(2) > div:last-child { background-color: #a2e0e2; }
.lt_color .palette li:nth-child(3) > div:last-child { background-color: #169056; }
.lt_color .palette li:nth-child(4) > div:last-child { background-color: #1c1c1c; }
.lt_color .palette li:nth-child(5) > div:last-child { background-color: #ffffff; }

.lt_font {width: 100%; height: auto; margin: 0 auto; margin-top: 160px; padding: 0 170px; box-sizing: border-box; display: flex; align-items: end; justify-content: center;}
.lt_font .left {display: flex; flex-direction: column; align-items: center;}
.lt_font .left .tit {font-size: 8rem; font-family: "Bebas Neue"; color: #A3A3A3;}
.lt_font .left .box {width: 780px; height: 341px; border-radius: 30px; background-color: #f5f5f5; display: flex; flex-direction: column; justify-content: center; margin-top: 40px; padding: 0 80px; box-sizing: border-box;}
.lt_font .left .box .semi_tit {font-size: 2.8rem; font-family: 'Pretendard'; font-weight: 500; color: #9F9F9F; margin-bottom: 20px;}
.lt_font .left .box p {font-size: 2rem; color: #353535; line-height: 150%;}
.lt_font .left .box p span {font-size: 3rem;}
.lt_font .left .box p:last-child {margin-left: 10px;}
.lt_font .right {width: 780px; height: 530px; border: 2px solid #E8E8E8; box-sizing: border-box; margin-left: 20px; padding: 0 80px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative;}
.lt_font .right .semi_tit {font-size: 2.8rem; color: #BCBCBC; font-family: 'Pretendard'; margin-bottom: 30px;}
.lt_font .right li {color: #404040;}
.lt_font .right ul {margin-left: 10px;}
.lt_font .right li:first-child {margin-bottom: 20px;}
.lt_font .right > div:first-child {margin-bottom: 70px;}
.lt_font .right > div:first-child li:first-child {font-size: 7.2rem; font-family: 'Taenada';}
.lt_font .right > div:first-child li:last-child {font-size: 3.2rem; font-family: 'Pretendard'; font-weight: 600;}
.lt_font .right > div:nth-child(2) li:first-child {font-size: 3.2rem; font-family: 'Pretendard'; font-weight: 700;}
.lt_font .right > div:nth-child(2) li:last-child {font-size: 1.8rem; font-family: 'Pretendard'; font-weight: 500;}
.lt_font .right > div:last-child {font-size: 28rem; color: #F5F5F5; font-family: 'Pretendard'; font-weight: 700; position: absolute; right: -40px; bottom: -50px; z-index: -50;}


/* 서브3_디자인 컨셉 */

.lt_concept {margin:0 auto;}
.lt_concept .letter {width: 100%; height: 603px; background-color: #242424; display: flex; justify-content: center; align-items: center; margin-top: 120px;}
.lt_concept .letter > div {margin-top: -140px; display: flex; gap: 60px;}
.lt_concept .top_wrap .tit_wrap {display: inline-block; overflow: hidden;}
.lt_concept .top_wrap .tit {font-size: 8rem; font-family: "Bebas Neue"; color: #fff;} 
.lt_concept .top_wrap .tit.active {
    display: inline-block;
    animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    transform: translateY(0) rotate(0);
    opacity: 1;
}

.lt_concept .top_wrap p {font-size: 2rem; color: #fff; width: 811px; line-height: 150%;}
.lt_concept .letter a {border: 2px solid #fff; width: 200px; height: 200px; background-color: #242424; border-radius: 50%; display: flex; flex-direction: column; gap: 10px; font-size: 2.8rem; color: #fff; align-items: center; justify-content: center; margin-top: 40px; transition: .6s;}
.lt_concept .letter a img {width: 33px; height: 11px;}
.lt_concept .bot_img img {position: relative; left: 50%; transform: translateX(-50%); top: -150px;}

.lt_concept .letter a:hover {background-color: rgba(255, 255, 255, .3); transition: .6s;}

/* 서브3_uiux */
.lt_uiux {width: 1581px; height: 1110px; margin: 0 auto; margin: 0 auto; background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url(../images/sub_3/last_img.png); border-radius: 10px; padding: 50px 80px; box-sizing: border-box;}
.lt_uiux ul {display: flex; align-items: center; justify-content: space-between;}
.lt_uiux li img {width: 450px; height: auto; border-radius: 15px; border: 2px solid #ADADAD;}

/* 서브3-푸터 */
.lt_bottom {width: 100%; height: auto; padding: 15px; box-sizing: border-box; background-color: #242424; overflow: hidden; margin-top: 80px;}
.lt_bottom .slide {display: flex; width: max-content; animation: slideLeft 30s linear infinite; gap: 70px;}
.lt_bottom ul {display: flex; gap: 70px; }

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* 움직이는 거리 */
    }
}


/* 서브4-광동제약 */
.kwangdong_wrap {background-color: #000; height: 100%; color: #fff;}
/* 탑버튼 */
.kwangdong_wrap #top_btn {width: 90px; height: 80px; position: fixed; bottom: 50px; right: 50px; cursor: pointer; z-index: 999; background-color: #fff; border: 2px solid #171717;  border-radius: 30px; display: none; align-items: center; justify-content: center; color: #171717; font-size: 2.4rem; font-family: 'PyeongchangPeace'; }
/* 네비바 */
.kwangdong_nav ul {display: flex; justify-content: space-between; align-items: center; padding: 70px 170px 0px 170px; box-sizing: border-box;}
.kwangdong_nav li {width: 240px; height: 50px; background-color: #000; border-radius: 50px; display: flex; align-items: center; justify-content: center;}
.kwangdong_nav li a {width: 240px; font-size: 2.4rem; font-family: 'Taenada'; display: flex; align-items: center; justify-content: space-between; color: #fff; top: 0;}
.kwangdong_nav li a:first-child img {margin-top: -4px;}
.kwangdong_nav li:first-child {padding-left: 20px; padding-right: 30px; box-sizing: border-box; }
.kwangdong_nav li:last-child {padding-left: 30px; padding-right: 13px; box-sizing: border-box;}

/* 광동제약 메인 */
.kd_main {width: 1580px; height: 100%; margin: 0 auto; margin-top: 75px; padding-bottom: 160px; box-sizing: border-box;}

/* 탑 */
.kd_main .top {display: flex; justify-content: space-between;}
.kd_main .top .kd_logo {width: 350px; height: 244px; background-color: #4C4A49; border-radius: 15px; border: 1.5px solid #929292;}
.kd_main .top .kd_logo p {font-size: 2.8rem; font-weight: 800; font-family: 'Tenada'; margin-top: 40px; margin-left: 30px; color: #939393;}
.kd_main .top .kd_logo img {margin-left: 65px; margin-top: 20px;}

.kd_main .top .project {width: 677px; height: 244px; background-color: #272727; border-radius: 15px; padding: 30px 40px; box-sizing: border-box;}
.kd_main .top .project .tit {width: fit-content; font-size: 2.8rem; font-weight: 800; font-family: 'Tenada'; background: linear-gradient(to right, #FAA1A1, #FFB5B5, #E8C9C9, #F2DDDD, #E2E2E2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.kd_main .top .project .cont {margin-top: 20px; margin-left: 10px;}
.kd_main .top .project .cont p {font-size: 4.2rem; font-weight: 700; font-family: 'Pretendard';}
.kd_main .top .project .cont span {font-size: 2rem; font-weight: 400; margin-top: 5px; line-height: 1.5;}

.kd_main .top .overview {width: 510px; height: 244px; background-color: #F4F4F4; color: #000; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.kd_main .top .overview .tit {width: fit-content; font-size: 2.8rem; font-weight: 800; font-family: 'Tenada'; background: linear-gradient(to right, #676767, #BABABA); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.kd_main .top .overview .cont {margin-top: 20px; width: 423px;}
.kd_main .top .overview .cont p {font-size: 2rem; font-family: 'Pretendard'; line-height: 1.5;}
.kd_main .top .overview .cont span {font-size: 2rem; font-weight: 700;}

/* 바텀 */
.kd_main .bot {margin-top: 20px; display: flex; justify-content: space-between; gap: 20px;}
.kd_main .bot .grid {width: 247px; height: 310px; border-radius: 15px; border: 1.5px solid #929292; display: flex; flex-direction: column; align-items: center;}
.kd_main .bot .grid .tit {font-size: 2.8rem; font-weight: 800; font-family: 'Tenada'; color: #DFDFDF; margin-top: 40px;}
.kd_main .bot .grid .cont {display: flex; gap: 20px; margin-top: 50px;}
.kd_main .bot .grid .cont ul li {margin-bottom: 30px;}
.kd_main .bot .grid .cont ul:first-child li {font-size: 2.2rem; font-weight: 700; color: #939393; font-family: 'Pretendard';}
.kd_main .bot .grid .cont ul:last-child li {font-size: 2.2rem; font-weight: 500; color: #fff; font-family: 'Pretendard';}

.kd_main .bot .proposal a {width: 247px; height: 315px; border-radius: 15px; background: url(../images/sub_4/proposal_img.png) no-repeat; margin-top: 20px; font-size: 3.4rem; font-weight: 800; display: flex; font-family: 'Pretendard'; flex-direction: column; gap: 20px; align-items: center; justify-content: center; text-align: center; transition: .3s;}
.kd_main .bot .proposal a:hover {transform: scale(0.98); transition: .3s; font-size: 3.8rem;}

.kd_main .bot .design_giude {width: 513px; height: 645px; background-color: #262626; border-radius: 15px; display: flex; flex-direction: column; align-items: center;}
.kd_main .bot .design_giude .tit {width: fit-content; font-size: 3.8rem; font-weight: 800; font-family: 'Tenada'; background: linear-gradient(to right, #B9B9B9, #DEDEDE, #A7A7A7, #BCBCBC, #E2E2E2, #FFFFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 50px; margin-bottom: 60px;}
.kd_main .bot .design_giude .cont .color {margin-top: 40px;}
.kd_main .design_giude .cont > div > p {font-size: 3rem; color: #939393; font-family: 'Pretendard'; font-weight: 900; margin-bottom: 30px;}
.kd_main .design_giude .font > div {display: flex; gap: 20px; margin-left: 10px;}
.kd_main .design_giude .font > div ul:nth-child(1) {margin-right: 30px;}
.kd_main .design_giude .font > div ul:nth-child(1) li:first-child {font-size: 2rem; font-weight: 700; font-family: 'Pretendard';}
.kd_main .design_giude .font > div ul:nth-child(1) li:nth-child(2) {font-size: 7rem; font-weight: 700; font-family: 'Pretendard';}
.kd_main .design_giude .font > div ul:nth-child(1) li:nth-child(3) {font-weight: 500; font-size: 2rem; font-family: 'Pretendard';}
.kd_main .design_giude .font > div ul:nth-child(2), 
.kd_main .design_giude .font > div ul:nth-child(3), 
.kd_main .design_giude .font > div ul:nth-child(4) {display: flex; flex-direction: column; gap: 30px; text-align: center;}
.kd_main .design_giude .font > div ul:nth-child(2) li, 
.kd_main .design_giude .font > div ul:nth-child(3) li, 
.kd_main .design_giude .font > div ul:nth-child(4) li {font-size: 2rem; font-weight: 400; font-family: 'Pretendard';}
.kd_main .design_giude .color ul {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 20px; margin-left: 30px;}
.kd_main .design_giude .color ul li {display: flex; gap: 20px; align-items: center;}
.kd_main .design_giude .color ul li p {font-size: 2rem; font-family: 'Pretendard';}
.kd_main .design_giude .color span {width: 40px; height: 45px; border-radius: 50px; border: 1px solid #9D9D9D; display: inline-block;}
.kd_main .design_giude .color ul li:nth-child(1) span {background-color: #fff;}
.kd_main .design_giude .color ul li:nth-child(2) span {background-color: #181818;}
.kd_main .design_giude .color ul li:nth-child(3) span {background-color: #ef4023;}

.kd_main .bot .top_wrap {display: flex; gap: 20px;}
.kd_main .bot .view a {width: 380px; height: 396px; border-radius: 15px; border: 1.5px solid #AAAAAA; display: inline-block; background: url(../images/sub_4/view_img.png) no-repeat left; position: relative; transition: .3s;}
.kd_main .bot .view a:hover {scale: 0.98; transition: .3s;}
.kd_main .bot .view a p {font-size: 8.2rem; font-weight: 800; font-family: 'Pretendard'; width: fit-content; background: linear-gradient(130deg, #55597E, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 50px; margin-left: 40px; transition: .3s;}
.kd_main .bot .view a img {position: absolute; right: 20px; bottom: 40px; transition: .3s; transform: scale(.5);}

.kd_main .bot .concept {background-color: #262626; width: 377px; height: 396px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; }
.kd_main .bot .concept .tit {width: fit-content; font-size: 2.8rem; font-weight: 800; font-family: 'Tenada'; background: linear-gradient(to right, #A7A7A7, #FFFFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 40px; margin-bottom: 30px;}
.kd_main .bot .concept p {line-height: 1.5; font-size: 2rem; font-family: 'Pretendard'; font-weight: 400; width: 277px;}
.kd_main .bot .concept p span {font-weight: 700;}

.kd_main .bot .info {width: 777px; height: 229px; border-radius: 15px; border: 1.5px solid #929292; margin-top: 20px; display: flex; align-items: center;}
.kd_main .bot .info .tit {font-size: 2.8rem; font-weight: 800; font-family: 'Pretendard'; width: fit-content; background: linear-gradient(130deg, #A7A7A7, #BCBCBC, #E2E2E2, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; rotate: 270deg; margin-left: -40px;}
.kd_main .bot .info .cont {display: flex; text-align: center; gap: 100px; margin-left: 40px; margin-top: 10px;}
.kd_main .bot .info .cont li { font-size: 2.2rem; font-family: 'Pretendard'; margin-bottom: 20px;}
.kd_main .bot .info .cont .semi_tit {color: #939393; font-weight: 900; margin-bottom: 30px;}
.kd_main .bot .info .cont ul:last-child li:last-child {margin-top: 50px;}

/* 광동제약 UIUX */
.kd_uiux {width: 100%; height: auto; background-color: #BFBFBF; padding-top: 80px; box-sizing: border-box; padding-bottom: 120px;}
.kd_uiux .tit {font-size: 6rem; font-weight: 700; color: #fff; font-family: 'Pretendard'; text-align: center; margin-bottom: 70px;}
.kd_uiux .main_wrap {display: flex; justify-content: center; gap: 20px;}
.kd_uiux .main_wrap img:first-child {width: 779px; height: 1080px; transition-delay: 0;}
.kd_uiux .main_wrap img:last-child {margin-top: 310px; transition-delay: 0.3s;}

.kd_uiux .main_wrap img {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease;
}

.kd_uiux.show .main_wrap img {
    opacity: 1;
    transform: translateY(0);
}

.kd_main .top > div,
.kd_main .bot > div,
.kd_main .bot > div > div {
    opacity: 0;
    transform: translateY(200px);
    transition: all 1s ease;
}

/* 보일 때 */
.kd_main .top > div.show,
.kd_main .bot > div.show,
.kd_main .bot > div > div.show {
    opacity: 1;
    transform: translateY(0);
}

/* clip */
.kd_main .clip {position: absolute; top: 410px; right: 120px; opacity: 0; animation: opacity .6s forwards; animation-delay: 1.5s;}

@keyframes opacity {
    from {
        opacity: 0;
        transform: rotate(-45deg);
    }
    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}