/* --- Color Variable Definitions --- */
:root {
  /* Primary Colors */
  --primary-color: #09BEC5;
  --primary-light: #C1EEF0;
  --primary-headset: #1DB0A4;
  --primary-transparent: rgba(49, 224, 230, 0.20);
  --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;
  --border-extra-light: #e0e0e0;
  
  /* Specific Component Colors */
  --tag-bg-green: #6EE7B7;
  --tag-text-green: #065F46;
}

@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');
}

.cleanlayout{margin:0;padding:0;}
.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;}
.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 16px;}
.con-section {display:flex;flex-direction: column;gap:70px;margin-bottom:70px;}
.con-section .ach3{font-size:20px;font-weight:700;color: var(--text-dark);line-height:140%;}
.con-section .info .subject-container{color: var(--text-subtle);font-size: 10px;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-01{display:flex;flex-direction: column;gap:16px;}
.con-section .article-01 .taptilte{position: relative;}
.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);}
.con-section .article-01 .taptilte .tcopy .ach2{font-size:24px;font-weight:700;color: var(--text-white);margin:0;line-height:100%;}
.con-section .article-01 .taptilte .tcopy .ach4{font-size:18px;font-weight:700;color: var(--text-dark);line-height:130%;margin:0;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:130%;margin:0;line-height:130%;padding:0;letter-spacing:0;}
.con-section .article-01 .taptilte .tcopy .acspan2{font-size:12px;font-weight:400;color: var(--text-subtle-2);margin:0;line-height:130%;padding:0;letter-spacing:-0.5px;}
.con-section .article-04{background: var(--bg-light-gray);display:flex;flex-direction: column;gap:24px;padding:60px 0;overflow: hidden;}
.con-section .article-04 .viewstep{display:flex;flex-direction: column;gap:24px;padding:0 16px;}
.con-section .article-04 .viewstep .butclick{display: flex;padding: 10px 18px;justify-content: center;align-items: center;gap: 3px;align-self: stretch;border-radius: 4px;border: 1px solid var(--border-dark);width:100%;color: #4B4F5C;font-family: Pretendard;font-size: 12px;font-weight: 400;line-height: 150%;letter-spacing: -0.2px;}
.con-section .article-04 .viewstep .imgphoto .preface{display: inline-block;font-size:14px;padding: 6px 12px;flex-direction: column;justify-content: center;align-items: flex-start;border-radius: 100px;background: var(--primary-color);color: var(--text-white);margin-bottom:12px;}
.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:10px;justify-content:space-between;height:100%;}
.con-section .article-04 .viewstep .imgphoto .info{display: flex;flex-direction: column;align-items: flex-start;gap: 6px;align-self: stretch;color: var(--text-dark-2);width:auto;}
.con-section .article-04 .viewstep .imgphoto .info .subtitle{font-size: 14px;font-weight: 400;line-height: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100%;}
.con-section .article-04 .viewstep .imgphoto .info .con{color: var(--text-subtle);font-size: 10px;font-weight: 400;line-height: 100%;letter-spacing: -0.2px;}
.con-section .article-04 .viewstep .imgphoto .xbox{width:calc(100% - 83px);}
.con-section .article-04 .viewstep .imgphoto .xbox .suhead{width:100%;display:flex;flex-direction: column;gap:6px;}
.con-section .article-04 .viewstep .imgphoto .info .tit11{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width:100%;color:var(--text-dark-2);font-size:14px;}
.con-section .article-04 .viewstep .imgphoto .info .tit21{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width:100%;color:var(--text-light-2);font-size:11px;}
.con-section .article-04 .viewstep .imgphoto .list{display:flex;flex-direction: column;gap:20px;}
.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;}
.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: 0px;}
.con-section .article-06 .text-sequence-section{padding:24px 16px 0;}
.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-weight: 600;line-height: 150%;margin:15px 0;letter-spacing: 0px;}
.con-section .article-13 .headset .headset_path{fill:var(--primary-headset);}
.con-section .article-13 .headset span{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 !important;}
.con-section .moveinbanner{display: flex;flex-direction: column;gap: 20px;margin-top:24px;}

/* --- 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;}

/* --- 2. Text Sequence Slider Styles --- */
.text-sequence-section{margin-bottom:40px;}
.text-sequence-section .stepper-container {display: flex;align-items: center;justify-content: space-between;position: relative;width: 100%;margin-bottom: 16px;}
.text-sequence-section .stepper-line {position: absolute;top: 5px;left: 0;right: 0;height: 1px;background-color: var(--primary-light);z-index: 1;width: calc(100% - 10px);margin: auto;}
.text-sequence-section .step {display: flex;flex-direction: column;align-items: center;position: relative;z-index: 2;}
.text-sequence-section .step-circle {width: 11px;height: 11px;border-radius: 50%;background-color: var(--bg-white);border: 3px solid var(--primary-light);margin-bottom: 0.5rem;transition: all 0.3s ease;}
.text-sequence-section .step-number {color: var(--text-disabled);font-weight: bold;transition: all 0.3s ease;text-align: center;font-family: Pretendard;font-size: 15px;font-weight: 400;line-height: 100%;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 !important;}}
.text-sequence-section .step.active .step-circle {background-color: var(--primary-color);border-color: var(--primary-color); }
.text-sequence-section .step.active .step-number {color: var(--primary-color);font-weight: 700;}
.text-sequence-section .swiper-horizontal{overflow: hidden;border-radius: 6px;}
.text-sequence-section .next{background: var(--primary-transparent);padding:14px 0;justify-content: center;align-items: center;gap: 10px;align-self: stretch;text-align:center;font-size:15px;}

/* --- 3. Photo & Text Slider Styles --- */
.photo-text-section{}
.photo-text-section .slider-container { width: 100%; box-sizing: border-box; padding:40px 16px; background: var(--bg-light-gray); }
.photo-text-section .swiper-container { width: 100%; overflow: hidden; display:flex; flex-direction: column; gap:20px; }
.photo-text-section .swiper-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.photo-text-section .slide-content { width: 100%; margin: 0 auto; border: 1px solid var(--border-extra-light); border-radius: 6px; overflow: hidden; background-color: var(--bg-white);}
.photo-text-section .slide-content img { display: block; width: 100%; height: 100%; }
.photo-text-section .caption { color: var(--text-medium); text-align: center; font-family: Pretendard; font-size: 15px; font-weight: 500; }
.photo-text-section .swiper-pagination-container { position: relative; width: 100%; height: 11px; display: flex; justify-content: space-between; align-items: center; }
.photo-text-section .swiper-pagination-container::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--primary-light); transform: translateY(-50%); z-index: 0; width: calc(100% - 20px); margin: auto; }
.photo-text-section .swiper-pagination-custom { position: relative; z-index: 1; display: flex; width: 100%; justify-content: space-between; bottom: auto !important; }
.photo-text-section .swiper-pagination-bullet { width: 11px; height: 11px; background-color: var(--bg-white); border:3px solid var(--primary-light); opacity: 1; border-radius: 50%; transition: background-color 0.3s; }
.photo-text-section .swiper-pagination-bullet-active { background-color: var(--primary-color); border:3px solid var(--primary-color); }

/* --- 4. Building Slider Styles --- */
.article-07{}
.building-section .container-wrapper{width: 100%;overflow: hidden;margin-top:24px;}
.building-section .building{position: relative;aspect-ratio: 4 / 3;}
.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%; }       
.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-style: normal;font-weight: 400;line-height: 140%; letter-spacing:-1px;}
.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: 13px;color: var(--text-light-3);padding-left:20px;letter-spacing:-1px;line-height:100%;}
.article-07 .operate_bottom{padding:0 16px;}
.article-07 .operate{display: none;padding: 10px;justify-content: flex-start;align-items: center;gap: 2px;align-self: stretch;margin-top:24px;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: 12px;font-style: normal;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; font-family: Pretendard !important; font-size: 12px; font-weight: 400; line-height: 150%; letter-spacing: 0px;}
.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 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 !important;}
.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:14px;color: var(--text-medium); font-size: 14px; font-weight: 400; line-height: 100%; letter-spacing: -0.2px;width:100%;}
.faq-section .arrow-icon {transition: transform 0.3s ease-out;width:16px;height:16px;}

/* --- 7. Swiper Tab Menu Styles --- */
.mobile-wrapper {margin-bottom:10px;overflow: hidden;}
.tabs-menu {padding:0;border-bottom: 1px solid var(--border-light);}
.tabs-menu .swiper-slide { width: auto; }
.tabs-menu .swiper-slide a { display: inline-block; padding: 10px 12px; position: relative;color: var(--text-placeholder);font-family: NanumBarunGothic;font-size: 14px;font-style: normal;font-weight: 400;line-height: 120%; /* 16.8px */}
.tabs-menu .swiper-slide a.active { font-weight: 400; color: var(--text-medium-3);font-size:14px; }
.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-15{display: flex;flex-direction: column;gap:16px;}    
.artice-16{display: flex;flex-direction: column;gap:20px;}
.processing-con{display: flex;padding: 0 16px;flex-direction: column;align-items: flex-start;gap: 20px;align-self: stretch;}
.processing-con .list-ul{display: flex;flex-direction: column;padding: 14px 16px;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: 12px;font-style: normal;font-weight: 400;line-height: 150%;position: relative;padding-left: 7px;}
.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: column;align-items: flex-start;gap: 12px;}
.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: 12px;font-weight: 400;line-height: 150%;letter-spacing: -0.2px;}
.processing-con .diploman .botclick img{width:16px;height:16px;}

.article-11 {width: 100%;margin: 0 auto;display: flex;flex-direction: column;gap:24px;}
.listicon {display: grid;grid-template-columns: repeat(4, 1fr);align-items: center;justify-content: space-between;align-self: stretch;flex-wrap:wrap;flex-shrink: 0;position: relative;;width:calc(100% - 32px);margin:auto;}
.iconclick {display: flex;flex-direction: column;align-items: center;flex-wrap: nowrap;flex-shrink: 0;position: relative;z-index: 1;margin:auto;padding-bottom:20px;}
.iconclick .texticon{display: flex;flex-direction: column; align-items: center;}
.iconclick .ellipse {position: relative;width:56px;height:56px;z-index: 2;border-radius: 50%;overflow: hidden;background:var(--primary-iconbg);}
.iconclick .ellipse .iconsvgbut{width:100%;height:100%;}
.iconclick .ellipse .iconsvgbut .iconsvgfill{fill:var(--primary-color);}
.iconclick .packaging-move {position: relative;color: #666666;font-size: 14px;font-weight: 500;text-align: center;padding-top:8px;}

@media all and (min-width:480px) {
	.iconclick .ellipse {width:80px;height:80px;}
}