.intro_area {
  padding: 20px 0;
}
.intro_area .section {
  padding: 80px 40px;
}
.intro_area .section .content-box {
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .intro_area .section {
    padding: 40px 20px;
  }
}

.parallax-wrap {
  position: relative;
  height: 300px;
  overflow: hidden;
  z-index: 1;
}
.parallax-wrap .parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/") no-repeat center/cover;
  z-index: 0;
}
.parallax-wrap .parallax-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
@media (max-width: 768px) {
  .parallax-wrap {
    height: 200px;
  }
}

.main-intro {
  position: relative;
  background: #d9e7fa;
  padding-top: 100px;
  z-index: 2;
}
.main-intro .headline-box {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  padding: 30px 20px;
  width: calc(100% - 240px);
  border-top: 3px solid #446cf9;
  border-bottom: 3px solid #446cf9;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  z-index: 5;
}
.main-intro .headline-box .banner-subtitle {
  color: #446cf9;
  font-size: 24px;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 10px;
}
.main-intro .headline-box .banner-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 120%;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .main-intro .headline-box {
    width: calc(100% - 80px);
  }
  .main-intro .headline-box .banner-subtitle {
    font-size: 18px;
  }
  .main-intro .headline-box .banner-title {
    font-size: 34px;
  }
}
.main-intro .content-box {
  max-width: 1200px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 100px 40px 100px;
  margin: 0 auto;
  flex-flow: row nowrap;
}
.main-intro .content-box .intro-text {
  flex: 1 1 500px;
}
.main-intro .content-box .intro-text .section-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 120%;
  color: #446cf9;
  margin-bottom: 20px;
  text-align: left;
}
.main-intro .content-box .intro-text .section-desc {
  font-size: 16px;
  line-height: 150%;
}
.main-intro .content-box .intro-img {
  flex: 1 1 280px;
}
.main-intro .content-box .intro-img img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .main-intro .content-box {
    padding: 20px;
    flex-flow: column nowrap;
  }
  .main-intro .content-box > .intro-text {
    flex: 1 1 auto;
    text-align: center;
  }
  .main-intro .content-box > .intro-text > .section-title {
    text-align: center;
  }
  .main-intro .content-box > .intro-img {
    flex: 1 1 auto;
    max-width: 200px;
  }
}

.section-head {
  text-align: center;
  margin-bottom: 40px;
}
.section-head .section-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 120%;
}
.section-head .section-subtitle {
  font-size: 15px;
  line-height: 150%;
  color: #777777;
  margin-top: 12px;
}
@media (max-width: 768px) {
  .section-head .section-title {
    font-size: 28px;
  }
  .section-head .section-desc {
    font-size: 15px;
  }
}

.purpose {
  text-align: center;
}
.purpose .steps {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.purpose .steps .step {
  position: relative;
  background: #f7f7f7;
  padding: 40px 20px;
  border-radius: 12px;
  text-align: center;
}
.purpose .steps .step .step-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -15px);
  display: inline-block;
  background-color: #446cf9;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 30px;
  border-radius: 999px;
}
.purpose .steps .step .step-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 120%;
  color: #446cf9;
  margin-bottom: 14px;
}
.purpose .steps .step .step-desc {
  font-size: 16px;
  line-height: 150%;
}
@media (max-width: 768px) {
  .purpose .steps .step .step-title {
    font-size: 18px;
  }
}

.principle {
  background: #446cf9;
  color: #ffffff;
  text-align: center;
}
.principle .section-head .section-subtitle {
  color: #ffffff;
}
.principle .principle-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.principle .principle-list .item {
  background: #ffffff;
  flex: 1 1 30%;
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: center;
}
.principle .principle-list .item img {
  width: 90%;
  margin-bottom: 16px;
}
.principle .principle-list .item .item-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 120%;
  color: #446cf9;
  margin-bottom: 16px;
}
.principle .principle-list .item .item-desc {
  font-size: 16px;
  line-height: 150%;
  color: #1d1d1d;
}
@media (max-width: 768px) {
  .principle .principle-list .item .item-title {
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  .principle {
    padding: 40px 20px;
  }
  .principle .principle-list {
    flex-direction: column;
    align-items: center;
  }
  .principle .principle-list .item {
    flex: 1 1 auto;
    width: 100%;
    max-width: 400px;
  }
  .principle .principle-list .item img {
    width: 80%;
  }
}

.vision {
  position: relative;
  background: #d9e7fa;
}
.vision::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("/img/sub/intro_vision_bg.png") no-repeat center bottom/cover;
  z-index: 0;
}
@media (max-width: 768px) {
  .vision::after {
    height: 80px;
  }
}
.vision .vision-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.vision .vision-list .vision-item {
  display: flex;
  border: 1px solid #dddddd;
  overflow: hidden;
  background: #ffffff;
  z-index: 1;
}
.vision .vision-list .vision-item .icon-box {
  flex: 0 0 160px;
  background: #446cf9;
  color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  font-size: 18px;
  gap: 8px;
}
.vision .vision-list .vision-item .icon-box img {
  height: 40px;
  margin-bottom: 12px;
}
.vision .vision-list .vision-item .icon-box .label {
  font-weight: 600;
}
.vision .vision-list .vision-item .text-box {
  flex: 1;
  padding: 24px;
  display: flex;
  align-items: center;
}
.vision .vision-list .vision-item .text-box .vision-desc {
  font-size: 16px;
  line-height: 150%;
}
.vision .vision-list .vision-item.green .icon-box {
  background: #39bf50;
}
.vision .vision-list .vision-item.deep-blue .icon-box {
  background: #031b6d;
}
@media (max-width: 768px) {
  .vision .vision-list .vision-item {
    flex-flow: column nowrap;
  }
  .vision .vision-list .vision-item .icon-box {
    flex: 0 1 auto;
    text-align: center;
  }
  .vision .vision-list .vision-item .text-box {
    text-align: center;
  }
}

.footer-banner {
  background: url("/img/sub/intro_bottom_banner.jpg") no-repeat center/cover;
  text-align: center;
  color: #ffffff;
  padding: 60px 20px;
}
.footer-banner .footer-text {
  font-size: 24px;
  font-weight: 600;
  line-height: 150%;
}
@media (max-width: 768px) {
  .footer-banner .footer-text {
    font-size: 21px;
  }
}/*# sourceMappingURL=intro.css.map */









/* ½Å±Ô ȨÆäÀÌÁö ¾È³» intro */ 
.intro-area {position:relative; margin:0; padding:0; width:100%; min-height:100%; color:#333333; line-height:1.3; box-sizing:border-box;
	&::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url("/img/main/intro_bg.png") no-repeat center top; background-size:100% 100%;}
	.inner {position:relative; margin:0 auto; padding-top:80px; width:1600px; max-width:100%; box-sizing:border-box;
	
		/* °øÅë¿ä¼Ò */
		.tit {
			h2 {font-size:60px;}
			h3 {font-size:48px;}
			p {font-size:21px;}
		}
		.btn {
			.old {background:#ED1E21;
				&:hover {background:#333;}
			 }
			 .new {background:#0045A6;
				&:hover {background:#0A8CF1;}
			 }
			 i {margin-left:8px;}
		}

		/* header */
		.intro-header {width:100%; display:flex; align-items:end; justify-content:space-between;
			.tit {display:flex; flex-direction:column; align-items:start; gap:16px; text-align:left;
				h1 img {width:auto; height:60px;}
				h2 {margin-top:12px;
					span {display:block; color:#0A8CF1;}
				}
				.btn {margin-top:24px; display:flex; align-items:center; gap:30px;
					 a {padding:16px 40px; font-size:18px; font-weight:700; color:#ffffff; border-radius:8px;}
				}
			}
			.img img {width:auto; height:340px; animation:bannerFloat 4s ease-in-out infinite;}
		}
		
		/* con */
		.intro-con {margin:100px 0; padding:60px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:60px; text-align:center; background:#E6F6FF; border:2px solid #C2EAFF; border-radius:16px; box-sizing:border-box;
			.tit {display:flex; flex-direction:column; align-items:center; gap:16px;
				h3 {color:#0C497C;
					span {display:block; color:#0A8CF1;}
				}
				p {color:#4F6887;}
			}
			.con-box {padding:60px; width:100%; display:flex; flex-direction:column; align-items:center; gap:30px; border-radius:16px; background:#fff; box-sizing:border-box;
				.tit {display:flex; flex-direction:column; align-items:center; gap:12px;
					div {font-size:60px; color:#354F70;}
					p {font-size:40px; font-weight:700; color:#354F70;}
					span {font-size:18px; color:#4F6887;}
				}
				.box {width:100%; max-width:800px; display:flex; align-items:center; justify-content:center;}
			}
			.con01 {
				.tit div {width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:1000px; background:#354F70; color:#fff; font-size:36px;}
				.box {gap:30px;
					& > ul {width:100%; padding:16px; display:flex; flex-direction:column; align-items:stretch; gap:16px; border-radius:12px; box-sizing:border-box;
						li:first-child {font-size:24px; font-weight:600;}
						li:nth-child(2) {font-size:18px; font-weight:600;}
						li a {display:block; padding:12px; width:100%; color:#fff; font-weight:600; border-radius:8px; box-sizing:border-box;
							i {margin-left:8px;}
						}
					}
					ul.old {background:#FEEEF4; border:1px solid #ED1E21;
						li:first-child {color:#ED1E21;}
					}
					ul.new {background:#E6F6FF; border:1px solid #0045A6;
						li:first-child	{color:#0045A6;}
					}
				}
			}
			.con02 {
				.tit div {width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:1000px; background:#354F70; color:#fff; font-size:36px;}
				.calendar {padding:12px 30px; display:flex; align-items:center; gap:16px; font-size:21px; font-weight:600; background:#0045A6; color:#fff; border-radius:1000px; }
				.box {flex-direction:column; gap:30px;
					& > ul {width:100%; display:flex; align-items:start; gap:8px;
						li {flex:0 0 160px; padding:12px 16px; background:#E5ECF4; color:#4F6887; border-radius:4px;}
						li:last-child {flex:1; font-weight:600;}
					}
					.old li:last-child {background:#FEEEF4; color:#ED1E21;}
					.new li:last-child {background:#E6F6FF; color:#0045A6;}
				}
			}
			.con03 {
				.tit div {color:#FFC400;}
				.box {flex-direction:column; gap:30px;
					p {padding:16px; width:100%; background:#f7f7f7; border-radius:8px; box-sizing:border-box;}
					span {font-size:14px; color:#4F6887;}
				}
			}
		}
	}
	/* footer */
	.intro-footer {position:relative; margin:0 auto; padding:16px; width:100%; border-top:1px solid #e5ecf4; font-size:13px; color:#999; text-align:center; box-sizing:border-box;}
}
@keyframes bannerFloat {
    0%, 100% {transform:translateY(0);}
    50% {transform:translateY(-15px);}
}

@media (max-width: 1640px) {
	.intro-area .inner {padding:80px 30px 0 30px; width:100%;
		.intro-con {margin:80px 0;}
	}
}

@media (max-width: 1240px) {
	.intro-area .inner {padding:60px 16px 0 16px; width:100%;
		.tit {
			h2 {font-size:48px;}
			h3 {font-size:36px;}
			p {font-size:18px;}
		}

		.intro-header {flex-direction:column; align-items:center; gap:30px;
			.tit {align-items:center; text-align:center;
				.btn {flex-direction:column; align-items:stretch; gap:16px;}
			}
			.img {display:flex; align-items:center; justify-content:center;
				img {width:80%; height:auto;}
			}
		}

		.intro-con {margin:60px 0; padding:30px 16px; gap:30px;
			.con-box {padding:30px;
				.tit p {font-size:28px;}
				.tit span {font-size:15px;}
			}
			.con01 .box {flex-direction:column;}
			.con02 .calendar {flex-direction:column; gap:8px; font-size:18px;}
			.con02 .box > ul {flex-direction:column; align-items:stretch;}
			.con02 .box > ul li {flex:1;}
		}
	}
}