/* --- Color Variable Definitions --- */
:root {
  /* Primary Colors */
  --primary-color: #09BEC5;
  --primary-light: #C1EEF0;
  --primary-headset: #1DB0A4;
  --primary-iconbg: rgba(9, 190, 197, 0.07);

  /* Text Colors */
  --text-white: #fff;
  --text-dark: #333;
  --text-dark-2: #353841;
  --text-medium: #454545;
  --text-medium-2: #4B4F5C;
  --text-medium-3: #555;
  --text-light: #666;
  --text-light-2: #616678;
  --text-light-3: #6B7280;
  --text-subtle: #8C92A4;
  --text-subtle-2: #6D758F;
  --text-disabled: #a9a9a9;
  --text-placeholder: #B3B3B3;

  /* Background Colors */
  --bg-white: #fff;
  --bg-light-gray: #F7F8F9;
  --bg-light-gray-2: #F3F4F5;

  /* Border & Line Colors */
  --border-light: #E5E5E5;
  --border-medium: #DFE1E8;
  --border-dark: #AAAFBC;

  /* Gradient & Specific Component Colors */
  --gradient-start-dark: rgba(0, 0, 0, 0.70);
  --gradient-end-transparent: rgba(0, 0, 0, 0.00);
  --tag-bg-green: #6EE7B7;
  --tag-text-green: #065F46;
}

/* --- Font Definitions --- */
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(/common/font/Pretendard-Black.woff2) format('woff2'), url(/common/font/Pretendard-Black.woff) format('woff');
}

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

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

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

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

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

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(/common/font/Pretendard-Light.woff2) format('woff2'), url(/common/font/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(/common/font/Pretendard-ExtraLight.woff2) format('woff2'), url(/common/font/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(/common/font/Pretendard-Thin.woff2) format('woff2'), url(/common/font/Pretendard-Thin.woff) format('woff');
}
.wrapnew{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;font-weight:400;}
.wrapnew ul:after{display:none;}
.wrapnew .seo-text-blind {position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);clip-path: inset(50%);margin: -1pxtext-indent: -9999px;}
.wrapnew .space{padding:0;}
.con-section {display:flex;flex-direction: column;gap:100px;margin-top:40px;}
.con-section .ach3{font-size:20px;font-weight:700;color: var(--text-dark);line-height:140%;}
.con-section .article-01{display:flex;align-items: flex-start;gap: 20px;align-self: stretch; flex-wrap: wrap;}
.con-section .article-01 .taptilte{position: relative;width:calc(50% - 10px);border-radius: 8px;overflow: hidden;}
.con-section .article-01 .taptilte .tcopy{position: absolute;top:0;width:100%;height:100%;color: var(--text-white);padding:24px;display:flex;flex-direction: column;gap:6px;}
.con-section .article-01 .taptilte .tcopy .ach3{font-size:20px;font-weight:700;color: var(--text-white);padding:0;letter-spacing:0;}
.con-section .article-01 .taptilte .tcopy .ach2{font-size:26px;font-weight:700;color: var(--text-white);margin:0;line-height:130%;padding:0;letter-spacing:0;}
.con-section .article-01 .taptilte .tcopy .ach4{font-size:22px;font-weight:700;color: var(--text-dark);line-height:130%;padding:0;letter-spacing:0;}
.con-section .article-01 .taptilte .tcopy .acspan{font-size:14px;font-weight:500;color: var(--text-white);line-height:140%;letter-spacing:0;}
.con-section .article-01 .taptilte .tcopy .acspan2{font-size:15px;font-weight:400;color: var(--text-subtle-2);line-height:140%;}
.con-section .article-04{background: var(--bg-light-gray);display:flex;flex-direction: column;gap:0;padding:80px 50px;overflow: hidden;}
.con-section .article-04 .viewstepWapper{display:flex;flex-direction: column;gap:30px;}
.con-section .article-04 .viewstep{display:flex;flex-direction: column;gap:24px;padding:0;overflow: hidden;width:100%;}
.con-section .article-04 .viewstep .butclick{display: flex;padding: 13px 18px;justify-content: center;align-items: center;gap: 3px;align-self: stretch;border-radius: 4px;border: 1px solid var(--border-dark);width:100%;font-size:15px;color: var(--text-medium-2);font-weight: 400;}
.con-section .article-04 .viewstep .imgphoto .preface{display: inline-block;font-size:16px;padding: 8px 15px;flex-direction: column;justify-content: center;align-items: flex-start;border-radius: 100px;background: var(--primary-color);color: var(--text-white);margin-bottom:16px;font-weight:500;line-height:100%;}
.con-section .article-04 .viewstep .imgphoto .month{display:flex;flex-direction: row;gap:0px;}
.con-section .article-04 .viewstep .imgphoto .month img{width:100%;height:100%;border-radius: 8px;overflow: hidden;vertical-align: top;}
.con-section .article-04 .viewstep .imgphoto .month .osli{display:flex;flex-direction: column;gap:10px;height:auto;}
.con-section .article-04 .viewstep .imgphoto .month .oslivw{display:flex;flex-direction: column;gap:4px;justify-content:space-between;height:100%;}
.con-section .article-04 .viewstep .imgphoto .info{display: flex;flex-direction: column;align-items: flex-start;gap: 4px;align-self: stretch;color: var(--text-dark-2);width:auto;}
.con-section .article-04 .viewstep .imgphoto .info .subtitle{font-size: 15px;font-weight: 400;line-height: 150%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100%;max-width:250px;letter-spacing: -0.3px;}
.con-section .info .subject-container{color: var(--text-subtle);font-size: 12px;font-weight: 400;line-height: 100%;letter-spacing: -0.2px;}
.con-section .info .subject-container .subject {position: relative; padding:0 6px;}
.con-section .info .subject-container .subject::before {content: '';position: absolute;left: -1px;top: 50%;transform: translateY(-50%);width: 1px;height: 60%;background-color: var(--text-subtle);}
.con-section .info .subject-container .subject:first-child::before {display: none;}
.con-section .info .subject-container .subject:first-child {padding-left: 0;}
.con-section .article-04 .viewstep .imgphoto .xbox{width:calc(100% - 87px);justify-content: space-between;}
.con-section .article-04 .viewstep .imgphoto .xbox .suhead{width:100%;display:flex;flex-direction: column;gap:0px;}
.con-section .article-04 .viewstep .imgphoto .info .tit11{color: var(--text-dark-2);text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width:100%;}
.con-section .article-04 .viewstep .imgphoto .info .tit21{color: var(--text-light-2);font-size:14px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width:100%;}
.con-section .article-04 .viewstep .imgphoto .list{display:flex;gap:20px;flex-wrap:wrap;width:775px;justify-content: space-between;}
.con-section .article-04 .viewstep .imgphoto .list li{display: flex;justify-content: space-between;align-items: flex-start;align-self: stretch;flex-direction:row;gap:10px;/* width:calc(50% - 10px); */width:365px;}
.con-section .article-04 .viewstep .imgphoto .list .mirr{display: flex;justify-content: space-between;align-items: flex-start;align-self: stretch;flex-direction:row;gap:10px;width:100%;}
.con-section .article-04 .viewstep .imgphoto .list .mirr .vewimg{width:82.5px;height:55px;vertical-align: top;border-radius: 6px;overflow: hidden;}
.con-section .article-04 .viewstep .imgphoto .list .mirr img{width:100%;}
.con-section .article-06{display: flex;flex-direction: column;gap: 50px;}
.con-section .article-06 .text-sequence-section{padding:0 16px;}
.con-section .article-07{display: flex;flex-direction: column;gap: 50px;}
.con-section .article-12{display: flex;flex-direction: column;gap: 50px;}
.con-section .article-12 .moveinbanner{display: flex;flex-direction: column;gap: 30px;}
.con-section .article-13{}
.con-section .article-13 .headset{display: inline-flex;padding: 8px 24px;justify-content: center;align-items: center;gap: 8px;border-radius: 50px;background: var(--bg-light-gray-2);color: var(--text-medium);font-family: Pretendard;font-size: 20px;font-style: normal;font-weight: 600;line-height: 150%;margin:15px 0;}
.con-section .article-13 .headset .headset_path{fill:var(--primary-headset);}
.con-section .article-15 .faq-section{margin-top:16px;}
.con-section .article-16{display: flex;flex-direction: column;gap: 30px;}
.con-section .article-17{display: flex;flex-direction: column;gap: 30px;}
.con-section .article-17 .moveinbanner2{display: flex;flex-direction: row;gap: 16px;}

/* --- 1. Photo Gallery Styles --- */
.photo-gallery-section .mobile-container {width: 100%; padding-left:0px;}
.photo-gallery-section .swiper-container-clean1 {width: 100%;padding:0;overflow: hidden;}
.photo-gallery-section .swiper-container-clean1 .swiper-slide {background: transparent;display: flex;justify-content: center;align-items: center;}
.photo-gallery-section .swiper-container-clean1 .swiper-slide img {display: block;width: 100%;height: auto;object-fit: cover;border-radius: 8px;aspect-ratio: 4 / 3;}

/* --- 4. Building Slider Styles --- */
.article-07{}
.building-section{position: relative;}
.building-section .container-wrapper{width: 100%;overflow: hidden;}
.building-section .building{position: relative;margin-bottom:50px;}
.building-section .map-button {position: absolute;cursor: pointer;transition: all 0.3s ease; display: inline-flex;padding: 4px 10px;justify-content: center;align-items: center;border-radius:50px;background: var(--primary-color);color: var(--text-white);font-family: Pretendard;font-size: 15px;font-weight: 700;line-height: 140%;letter-spacing: -0.2px;}
.building-section .map-button.active {background-color: var(--primary-color);}
.building-section .map-button.inactive {background-color: var(--primary-color);}
.building-section .swiper-slide{height:auto;}
.building-section .swiper-slide .card {background-color: var(--bg-light-gray);border: 2px solid transparent;border-radius: 12px;padding:16px;height: 100%;transition: border-color 0.3s ease;}
.building-section .swiper-slide-active .card {border-color: var(--primary-color); background: var(--bg-white);}
.building-section .card-title {display: inline-block;background-color: var(--tag-bg-green);color: var(--tag-text-green);padding: 4px 16px;border-radius: 9999px;font-weight: bold;margin-bottom: 16px;padding: 4px 10px;border-radius: 50px;background: var(--primary-color);color: var(--text-white);font-family: Pretendard;font-size: 15px;font-weight: 700;line-height: 140%;letter-spacing: -0.26px;}     
.building-section .check-item {display: flex;align-items: center;gap:4px;margin-bottom:6px;}
.building-section .check-item .svgicon{width:16px;height:auto;}
.building-section .check-item .svgicon .svgimg{fill:var(--primary-color);}
.building-section .check-item .checon{color: var(--primary-color);font-family: Pretendard;font-size: 14px;font-weight: 500;line-height: 100%;}      
.building-section .list-item {position: relative;padding:0 0 0 10px;margin-left:7px;color: var(--text-light-2);font-family: Pretendard;font-size: 14px;font-weight: 400;line-height: 140%;letter-spacing:0;}
.building-section .list-item::before {content: '';position: absolute;left: 0;top: 7px;width:3px;height:3px;border-radius: 50px;background: var(--text-light-2);}
.building-section .list-item-small {font-size: 14px;color: var(--text-light-3);padding-left:20px;letter-spacing:-1px;line-height:100%;}
.building-section .swiper-button-next,
.building-section .swiper-button-prev { top: 84%; transform: translateY(-50%);background-image: none;width:40px;height:40px;}
.building-section .swiper-button-next{transform: translateX(30px) !important;}
.building-section .swiper-button-prev{transform: translateX(-30px) !important;}
.building-section .swiper-button-next::after,
.building-section .swiper-button-prev::after { font-size: 0; }
.building-section .swiper-button-prev svg, .building-section .swiper-button-next svg{display:none;}
.building-section .swiper-wrapper { padding-left: 0px; }
.building-section .swiper-button-prev img, .building-section .swiper-button-next img{width:40px;height:40px;background: var(--bg-white); overflow: hidden;border-radius: 50%;border:1px solid var(--border-medium);}
.article-07 .operate{display:none;padding: 8px 16px;justify-content: flex-start;align-items: center;gap: 2px;align-self: stretch;margin-top:-34px;border-radius: 6px;background:var(--bg-light-gray);}
.article-07 .operate img{display: flex;width: 32px;height: 32px;padding: 0px;flex-direction: column;justify-content: center;align-items: center;gap: 10px;border-radius: 50px;background: #B9C2C8;}
.article-07 .operate .list-item {position: relative;padding:0 0 0 10px;margin-left:7px;color: var(--text-light);font-family: Pretendard;font-size: 13px;font-weight: 400;line-height: 140%; letter-spacing:-1px;}
.article-07 .operate .list-item::before {content: '';position: absolute;left: 0;top: 7px;width:3px;height:3px;border-radius: 50px;background: var(--text-light);}

/* --- 6. FAQ Styles --- */ 
.faq-section .accordion-panel {max-height: 0;overflow: hidden;transition: 0.1s; padding: 0 24px;}
.faq-section .accordion-item{border-bottom:1px solid var(--border-medium);}
.faq-section .accordion-item.activeon .accordion-panel {max-height: 500px; padding: 16px 24px; transition: 0.5s; background: var(--bg-light-gray-2);}
.faq-section .accordion-item.activeon .accordion-panel .answer{color: var(--text-light); font-family: Pretendard; font-size: 14px; font-weight: 400;line-height:150%;}
.faq-section .accordion-item.activeon .arrow-icon {transform: rotate(180deg);}
.faq-section .accordion-item .accordion-header{display:flex;justify-content: space-between;align-items: center;cursor: pointer;padding:16px 16px;color: var(--text-medium); font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: 0px;width:100%;}
.faq-section .arrow-icon {transition: transform 0.3s ease-out;width:16px;height:16px;}

/* --- 7. Swiper Tab Menu Styles --- */
.mobile-wrapper {margin:20px 0 80px;overflow: hidden;}
.tabs-menu {padding:0;border-bottom: 1px solid var(--border-light);}
.tabs-menu .swiper-slide { width: auto;flex:1;text-align:center;}
.tabs-menu .swiper-slide a { display: inline-block; padding: 14px 12px; position: relative;color: var(--text-placeholder);font-size: 17px;font-style: normal;font-weight: 400;line-height: 120%;width:100%;}
.tabs-menu .swiper-slide a.active { font-weight: 400; color: var(--text-medium-3);}
.tabs-menu .swiper-slide a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--text-medium-3); }
    
.artice-16{}
.processing-con{display: flex;padding: 0;flex-direction: column;align-items: flex-start;gap:30px;align-self: stretch;}
.processing-con .list-ul{display: flex;flex-direction: column;padding: 25px 20px;justify-content: center;align-items: self-start;align-self: stretch;border-radius: 6px;background: var(--bg-light-gray);}
.processing-con .list-ul .list-con{color: var(--text-light);font-size: 14px;font-style: normal;font-weight: 400;line-height: 150%;position: relative;padding-left: 10px;letter-spacing:0;}
.processing-con .list-ul .list-con:before{content: '';position: absolute;left: 0;top: 7px;width: 3px;height: 3px;border-radius: 50px;background: var(--text-light-2);}
.processing-con .diploman{display: flex;width: 100%;flex-direction: row;align-items: flex-start;gap: 20px;}
.processing-con .diploman .botclick{display: flex;padding: 10px 18px;justify-content: space-between;align-items: center;align-self: stretch;border-radius: 4px;border: 1px solid var(--border-dark);color: var(--text-medium-2);font-size: 15px;font-weight: 400;line-height: 150%;letter-spacing: -0.2px;width:100%;}
.processing-con .diploman .botclick img{width:16px;height:16px;} 

/* --- [추가] 7. PC형 사진+텍스트 슬라이더 스타일 --- */
.pc-photo-text-slider-section .mobile-container { width: 100%; max-width:875px; margin: auto; background-color: var(--bg-light-gray); position: relative; padding:80px 0; }
.pc-photo-text-slider-section .swiper-container { width: 100%; height: 100%; overflow: hidden; padding-left:50px; }
.pc-photo-text-slider-section .swiper-slide { text-align: center; font-size: 18px; background: var(--bg-white); display: flex; justify-content: center; align-items: center; border-radius: 16px; overflow: hidden; position: relative;width:383px;}
.pc-photo-text-slider-section .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-photo-text-slider-section .slide-caption { position: absolute; top: 0; right:0; left:0; padding: 12px 16px 30px 16px; background: linear-gradient(180deg, var(--gradient-start-dark) 20%, var(--gradient-end-transparent) 90%); color: var(--text-white); font-family: Pretendard; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; text-align:left; }
.pc-photo-text-slider-section .swiper-button-next,
.pc-photo-text-slider-section .swiper-button-prev { top: 51%; transform: translateY(-50%);background-image: none;width:40px;height:40px;}
.pc-photo-text-slider-section .swiper-button-next{transform: translateX(30px) !important;}
.pc-photo-text-slider-section .swiper-button-prev{transform: translateX(-30px) !important;}
.pc-photo-text-slider-section .swiper-button-next::after,
.pc-photo-text-slider-section .swiper-button-prev::after { font-size: 0; }
.pc-photo-text-slider-section .swiper-button-prev svg, .pc-photo-text-slider-section .swiper-button-next svg{display:none;}
.pc-photo-text-slider-section .swiper-wrapper { padding-left: 0px; }
.pc-photo-text-slider-section .swiper-button-prev img, .pc-photo-text-slider-section .swiper-button-next img{width:40px;height:40px;background: var(--bg-white); overflow: hidden;border-radius: 50%;border:1px solid var(--border-medium);}

/* --- [추가] 8. PC형 텍스트 스텝퍼 스타일 --- */
.pc-stepper-section { padding-bottom: 40px; }
.pc-stepper-section .container { width: 100%; max-width: 900px; margin: 0 auto; box-sizing: border-box; }
.pc-stepper-section .stepper-wrapper { display: flex; justify-content: space-between; position: relative; }
.pc-stepper-section .stepper-wrapper::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--primary-light); z-index: 1; width: calc(100% - 100px); margin: auto; }
.pc-stepper-section .stepper-item { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2;width:91px;float:left;text-align:center; }
.pc-stepper-section .stepper-dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--primary-light); background-color: var(--bg-white); transition: background-color 0.4s, border-color 0.4s; }
.pc-stepper-section .stepper-number { color: var(--text-disabled); text-align: center; font-family: Pretendard; font-size: 26px; font-weight: 400; line-height: 100%; margin-top:16px; }
.pc-stepper-section .stepper-label { color: var(--text-disabled); text-align: center; font-family: Pretendard; font-size: 17px; font-weight: 400; letter-spacing: -0.3px; word-break: keep-all; transition: color 0.4s; margin-top:8px; }
.pc-stepper-section .stepper-item.active .stepper-dot { background-color: var(--primary-color); border-color: var(--primary-color); }
.pc-stepper-section .stepper-item.active .stepper-number { color: var(--primary-color); font-weight:700; }
.pc-stepper-section .stepper-item.active .stepper-label { color: var(--text-medium); font-weight: 500; }

.premium-pa50{background:#382E28;padding:40px 50px 0px;margin:0;}
.premium-pa50 .tabs-menu .swiper-slide a.active{color:var(--bg-white);}
.premium-pa50 .tabs-menu .swiper-slide a.active::after{background-color:var(--bg-white);}
.premiumbox .card-title{color:var(--primary-color);background:#382E28;}

.article-11 {width: 100%;margin: 0 auto;}
.listicon {display: flex;align-items: center;justify-content: space-between;align-self: stretch;flex-wrap:wrap;flex-shrink: 0;position: relative;gap:45px;padding: 0 50px 0 50px;margin-top:50px;}
.iconclick {display: flex;flex-direction: column;align-items: center;flex-wrap: nowrap;flex-shrink: 0;gap: 16px;position: relative;width: 130px;z-index: 1;}
.iconclick .texticon{display: flex;flex-direction: column; gap:16px;align-items: center;}
.iconclick .ellipse {flex-shrink: 0;position: relative;width: 120px;height: 120px;z-index: 2;border-radius: 50%;overflow: hidden;background:var(--primary-iconbg);}
.iconclick .ellipse .iconsvgbut{width:120px;height:120px;}
.iconclick .ellipse .iconsvgbut .iconsvgfill{fill:var(--primary-color);}
.iconclick .packaging-move {display: flex;align-items: flex-start;justify-content: center;flex-shrink: 0;flex-basis: auto;position: relative;width: 70px;height: 24px;color: #666666;font-family: Pretendard, var(--default-font-family);font-size: 20px;font-weight: 500;line-height: 24px;text-align: center;white-space: nowrap;z-index: 3;}