@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

.nanum-brush-script-regular {
  font-family: "Nanum Brush Script", cursive;
  font-weight: 400;
  font-style: normal;
}

.nanum-pen-script-regular {
  font-family: "Nanum Pen Script", cursive;
  font-weight: 400;
  font-style: normal;
}









.a1 {}
.a1_wrap {max-width: 1240px; margin: 0 auto;}
.a1_wrap h2 {font-size: 20px; color: #999; margin-bottom: 20px;}
.a1_wrap h3 {font-size: 40px; line-height: 1.4;margin-bottom: 30px; word-break: keep-all;}
.a1_wrap p {font-size: 20px; color: #333; word-break: keep-all; margin-bottom: 10px;}
.a1_wrap p:last-child {margin-bottom: 0;}
.a1_wrap p b {color: #0258b5;}
.a1_wrap p strong {}
.a1_wrap span {display: block; text-align: right; margin-top: 30px; font-size: 30px; font-family: "Nanum Pen Script", cursive;}

.a1 .container {display: flex;justify-content: center;align-items: center; margin-top: 30px;}
.a1 .img-width {height: 500px;border-radius: 30px;background: url(../img/a1_img1.jpg) no-repeat center;opacity: 1;width: 0; transition: width 1.5s ease; }

@media screen and (max-width: 960px) {
	.a1_wrap h3 {font-size: 30px;}
	.a1_wrap p {font-size: 18px;}
}

@media screen and (max-width: 640px) {
	.a1_wrap h2 {font-size: 16px;}
	.a1_wrap h3 {font-size: 20px; margin-bottom: 20px;}
	.a1_wrap p {font-size: 14px; margin-bottom: 5px;}
	.a1_wrap p br {display: none;}
	.a1_wrap span {font-size: 24px;}
	.a1 .img-width {height: 300px;}
}




.a3 {margin-bottom: 200px;}
.a3>h2 {font-size: 20px; color: #999;max-width: 1440px; margin: 0 auto 20px auto; padding: 0 20px;}
.a3>h3 {max-width: 1440px; margin: 0 auto; padding: 0 20px 50px 20px; font-size: 40px; word-break: keep-all;}
.a3_con {position:relative; padding-left:50%; padding-bottom: 100px;}/*padding-bottom: 300px;*/
.a3_con .years_tit {position:absolute; top:0; left:0; width:50%; height:100vh; max-height:calc(var(--vh, 1vh) * 100); background:url('../img/a3_img.jpg') no-repeat 50% 50% / cover; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;}
.a3_con .years_tit .tit {font-size:20px; color:#fff; font-weight:300; line-height:1.4; margin-bottom:80px; text-align:center; word-break: keep-all;}
.a3_con .years_tit .tit strong {font-weight: 500; font-size: 45px;}
.a3_con .years_tit ul {display:flex; flex-direction:column; gap:20px;}
.a3_con .years_tit li {font-size:60px; color:rgba(255,255,255,0); font-weight:700; line-height:84px; -webkit-text-stroke:1px rgba(255,255,255,.3)}
.a3_con .years_tit li.on {color:#fff; -webkit-text-stroke:0;}
.a3_con .years_tit li p {display:block; color:inherit;}
.a3_con .years_con {padding:80px 0 100px 80px;}
.a3_con .years_con dl {margin-bottom:100px;}
.a3_con .years_con dl:last-child {margin-bottom:0;}
.a3_con .years_con dt {position:relative; font-size:45px; color:#000; font-weight:700; line-height:1.2;}
.a3_con .years_con dt .ypoint {position:absolute; top:-50vh;}
.a3_con .years_con dd {padding-top:20px; display:flex; flex-direction:column; gap:17px;}
.a3_con .years_con dd p {position:relative; color:#333; line-height:1.6; padding-left:45px;font-size: 20px; word-break: keep-all;}
.a3_con .years_con dd p strong {position:absolute; top:0; left:0; color:#28738b; font-weight:700;}
.a3_con .hispoint {position:absolute; top:0;}
.a3_con .setpoint {position:absolute; top:-40px;}
.upset .a3_con .setpoint {top:-100px;}
.a3_con .his_end {top:calc(100% - 100vh);}
.a3_con.start .years_tit {position:fixed;}
.a3_con.end .years_tit {position:absolute; bottom:0; top:auto;}

@media screen and (max-width: 960px) {
	.a3_con {padding-left:0; padding-bottom: 0px;}
	.a3_con .years_tit {display: none;}
	.a3_con .years_con {padding:40px 20px 150px 20px;}
	.a3_con .years_con dt {font-size:25px;}
	.a3_con .years_con dl {margin-bottom: 50px;}
	.a3_con .years_con dd {gap:5px; padding-top: 20px;}
	.a3_con .years_con dd p {padding-left:30px; font-size: 16px;}
}


@media screen and (max-width: 640px) {
	.a3 {margin-bottom: 100px;}
	.a3_con .years_con {padding-bottom: 50px;}
	.a3>h2 {font-size: 16px; margin-bottom: 10px;}
    .a3>h3 {font-size: 24px; padding: 0 20px;}
	.a3_con .years_con dd p {font-size: 14px;}
	.a3_con .years_con dl {margin-bottom: 30px;}
}





.a4 {max-width: 1600px; margin: 0 auto;}
.a4_wrap {display: flex; flex-wrap: wrap; align-items: flex-start;}

.a4 .a4_title {text-align: center; width: 100%; margin-bottom: 50px;}
.a4 .a4_title h1 { position:relative; display:inline-block; font-size:50px; line-height:1.3; color:#ccc; /* 회색 배경 글자 */ font-weight:600; overflow:hidden; white-space:nowrap; /* 줄바꿈 방지 */}
.a4 .a4_title h1 span { position:absolute; left:0; top:0; width:0; white-space:nowrap; overflow:hidden; color:#104c77; /* 파란 애니메이션 글자 */ animation:highlight 2s forwards; font-weight:600; display:block;}
.a4 .a4_title div:nth-child(2) h1 span {animation-delay:2.2s}

.map_wrap{position:relative;width:100%;padding-bottom:38%;height:0;overflow:hidden;max-height:650px;margin:0 auto;}
.map_wrap .g_map{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}


.a4 .a4_txt {width: 100%; margin: 50px auto 0 auto;}
.a4 .a4_txt ul {display: flex; flex-wrap: wrap;}
.a4 .a4_txt ul li {width: 25%; border-right: 1px solid #ccc; padding: 0 3%;}
.a4 .a4_txt ul li:last-child {border-right: 0;}
.a4 .a4_txt ul li span {display: block; color: #0258b5; font-size: 20px; font-weight: bold; margin-bottom: 10px;}
.a4 .a4_txt ul li span i {font-size: 16px; margin-right: 10px;}
.a4 .a4_txt ul li p {font-size: 18px; color: #333; word-break: keep-all; line-height: 1.4;}


@keyframes highlight{
    0%{width:0}
    100%{width:100%}
}


@media screen and (max-width: 960px) {
	.a4 .a4_title {margin-bottom: 30px;}
	.a4 .a4_title h1 {font-size: 40px;}

	.a4 .a4_txt ul li {width: 50%; padding: 30px;}
	.a4 .a4_txt ul li:nth-child(1) {border-bottom: 1px solid #ccc;}
	.a4 .a4_txt ul li:nth-child(2) {border-right: 0; border-bottom: 1px solid #ccc;}
	.a4 .g_map{height: 450px;}
}


@media screen and (max-width: 640px) {
	.a4 .g_map {height: 320px;}
	.a4 .a4_title {margin-bottom: 20px;}
	.a4 .a4_title h1 {font-size: 22px;}

	.map_wrap {padding-bottom: 60%;}

	.a4 .a4_txt {margin: 0 auto;}
	.a4 .a4_txt ul li {width: 100%; padding: 15px;}
	.a4 .a4_txt ul li:nth-child(1) {border-right: 0;}
	.a4 .a4_txt ul li:nth-child(3) {border-right: 0; border-bottom: 1px solid #ccc;}
	.a4 .a4_txt ul li span {font-size: 16px; margin-bottom: 2px;}
	.a4 .a4_txt ul li p {font-size: 14px;}
}









.b1 {}

.b1_wrap {padding: 50px 0;}
.b1_wrap:first-child {padding: 0px 0 50px 0;}

.b1_tit {}
.b1_tit h2 {font-size: 34px; margin-bottom: 30px;}
.b1_tit p {font-size: 20px; color: #fff; text-align: center; padding: 80px 10%; word-break: keep-all;}

#b1 .b1_tit p {background: url(../img/b1_bg.jpg) no-repeat center; background-size: cover; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;}
#b2 .b1_tit p {background: url(../img/b2_bg.jpg) no-repeat center; background-size: cover; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;}
#b3 .b1_tit p {background: url(../img/b3_bg.jpg) no-repeat center; background-size: cover; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;}
#b4 .b1_tit p {background: url(../img/b4_bg.jpg) no-repeat center; background-size: cover; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;}
#b5 .b1_tit p {background: url(../img/b5_bg.jpg) no-repeat center; background-size: cover; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;}
#b6 .b1_tit p {background: url(../img/b6_bg.jpg) no-repeat center; background-size: cover; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: darken;}

.b1_txt {margin-top: 20px;}
.b1_txt ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.b1_txt ul li {padding: 20px; background: #f1f1f4; position:relative;overflow:hidden;z-index:0}
.b1_txt ul li::before, .b1_txt ul li::after{content:"";position:absolute;background-color:#104c77;transition:all 0.4s ease;z-index:2}
.b1_txt ul li::before{height:2px;width:0;top:0;left:0}
.b1_txt ul li:hover::before{width:100%;transition-delay:0s}
.b1_txt ul li::after{width:2px;height:0;top:0;right:0}
.b1_txt ul li:hover::after{height:100%;transition-delay:0.4s}
.b1_txt ul li .line-bottom, .b1_txt ul li .line-left{content:"";position:absolute;background-color:#104c77;z-index:2;transition:all 0.4s ease}
.b1_txt ul li .line-bottom{height:2px;width:0;bottom:0;right:0}
.b1_txt ul li:hover .line-bottom{width:100%;transition-delay:0.8s}
.b1_txt ul li .line-left{width:2px;height:0;bottom:0;left:0}
.b1_txt ul li:hover .line-left{height:100%;transition-delay:1.2s}
.b1_txt ul li h2 {font-size: 22px; margin-bottom: 20px; word-break: keep-all;}
.b1_txt ul li p {font-size: 16px; color: #333; line-height: 1.4; word-break: keep-all;}
.b1_txt ul li p b {display: inline-block; color: #073e91; margin-bottom: 5px;}



@media screen and (max-width: 960px) {
	.b1_txt ul {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 640px) {
	.b1_wrap {padding: 30px 0;}
	.b1_wrap:first-child {padding: 0px 0 30px 0;}
	.b1_tit h2 {font-size: 22px; margin-bottom: 15px;}
	.b1_tit p {font-size: 14px; padding: 20px;}
	.b1_txt {margin-top: 10px;}
	.b1_txt ul {grid-template-columns: repeat(1, 1fr); gap: 10px;}
	.b1_txt ul li {padding: 15px;}
	.b1_txt ul li h2 {font-size: 16px; margin-bottom: 5px;}
	.b1_txt ul li p {font-size: 14px;}
}





.c1_wrap{display:flex;align-items: center;gap:30px}
.c1_img{flex:0.3;text-align:center}
.c1_img img{max-width:100%;height:auto;object-fit:contain;}
.c1_txt{flex:0.7;padding:30px;background:#f9f9fb}
.c1_title{font-size:30px;font-weight:700;margin-bottom:10px}
.c1_title span{color:#0258b5}
.c1_desc{font-size:18px;word-break:keep-all;line-height:1.6;font-weight:400;margin-bottom:20px}
.c1_wrap .feature_list{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;list-style:none;padding:0;margin:0}
.c1_wrap .feature_list>li{background:#fff;padding:20px;border:1px solid #eee}
.c1_wrap .feature_list h3{font-size:18px;margin-bottom:12px;font-weight:700;color:#0258b5}

/* 내부 서브리스트 (불릿 표시 강제) */
.c1_wrap .sublist{list-style-type:disc !important;list-style-position:outside !important;margin:0;padding-left:20px}
.c1_wrap .sublist li{list-style-type:disc !important;font-size:16px;line-height:1.6;color:#333;word-break: keep-all;}

@media(max-width:1200px){
	.c1_wrap{gap:30px}
	.c1_title{font-size:25px}
	.c1_desc{font-size:16px}
	.c1_wrap .feature_list{grid-template-columns:repeat(2,1fr)}
}


@media(max-width:960px){
	.c1_wrap{flex-direction:column}
	.c1_img,.c1_txt{flex:none;width:100%}
	.c1_img img{max-width:100%}
	/* .c1_txt{padding:40px 20px} */
	.c1_title{font-size:24px}
	.c1_desc{font-size:15px}
	.c1_wrap .feature_list{grid-template-columns:1fr}
}
@media(max-width:640px){
	.c1_wrap{gap:10px}
	.c1_title {font-size: 20px;}
	.c1_txt {padding: 20px;}
	.c1_wrap .feature_list {gap: 10px;}
	.c1_wrap .feature_list>li {padding: 15px;}
	.c1_wrap .feature_list h3 {margin-bottom: 5px; font-size: 16px;}
	.c1_wrap .sublist li {font-size: 14px;}
}




.d1_wrap{display:flex;align-items: center;gap:30px}
.d1_img{flex:0.3;text-align:center}
.d1_img img{max-width:100%;height:auto;object-fit:contain;}
.d1_txt{flex:0.7;padding:30px;background:#f9f9fb}
.d1_title{font-size:30px;font-weight:700;margin-bottom:10px}
.d1_title span{color:#0258b5}
.d1_desc{font-size:18px;word-break:keep-all;line-height:1.6;font-weight:400;margin-bottom:20px}
.d1_wrap .feature_list{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;list-style:none;padding:0;margin:0}
.d1_wrap .feature_list>li{background:#fff;padding:20px;border:1px solid #eee}
.d1_wrap .feature_list h3{font-size:18px;margin-bottom:12px;font-weight:700;color:#0258b5}

/* 내부 서브리스트 (불릿 표시 강제) */
.d1_wrap .sublist{list-style-type:disc !important;list-style-position:outside !important;margin:0;padding-left:20px}
.d1_wrap .sublist li{list-style-type:disc !important;font-size:16px;line-height:1.6;color:#333; word-break: keep-all;}

@media(max-width:1200px){
	.d1_title{font-size:25px}
	.d1_desc{font-size:16px}
	.d1_wrap .feature_list{grid-template-columns:repeat(2,1fr)}
}


@media(max-width:960px){
	.d1_wrap{flex-direction:column}
	.d1_img,.d1_txt{flex:none;width:100%}
	.d1_img img{max-width:100%}
	/* .d1_txt{padding:40px 20px} */
	.d1_title{font-size:24px}
	.d1_desc{font-size:15px}
	.d1_wrap .feature_list{grid-template-columns:1fr}
}
@media(max-width:640px){
	.d1_wrap{gap:10px}
	.d1_title {font-size: 20px;}
	.d1_txt {padding: 20px;}
	.d1_wrap .feature_list {gap: 10px;}
	.d1_wrap .feature_list>li {padding: 15px;}
	.d1_wrap .feature_list h3 {margin-bottom: 5px; font-size: 16px;}
	.d1_wrap .sublist li {font-size: 14px;}
}














.e1_title{font-size:38px;font-weight:800;line-height:1.6;margin:0 0 20px}
.e1_title span{color:#0258b5}
.e1_lead{font-size:20px;color:#333;line-height:1.8;word-break:keep-all;margin-bottom:10px}
.e1_stitle{font-size:26px;font-weight:800;margin:0 0 20px}

/* Section spacing */
.e1_models,.e1_features,.e1_monitor,.e1_specs{padding:40px 0}

/* Models */
.e1-models-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;list-style:none;padding:0;margin:0}
.e1-models-item{border:1px solid #e6e8ef;padding:20px; text-align: center;}
.e1-models-item img {width: 100%; max-width: 400px; padding: 0 20px;}
.e1-models-name{font-size:22px;font-weight:700;}
.e1-models-desc{font-size:18px;color:#555;margin:0;}

/* Features */
.e1-features-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;padding:0;margin:0}
.e1-features-item{border:1px solid #e6e8ef;padding:30px}
.e1-features-item .flex_box {display: flex; gap: 10px; align-items: center;margin:0 0 10px}
.e1-features-item i{ display:block; font-size:22px; color:#999;}
.e1-features-item h3{font-size:18px;font-weight:700;color:#0258b5;}
.e1-features-item p{font-size:18px;color:#555;line-height:1.7;margin:0}

/* Monitor */
.e1-monitor-list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;list-style:none;padding:0;margin:0}
.e1-monitor-list li{position:relative;padding-left:16px;font-size:18px;color:#333;line-height:1.6}
.e1-monitor-list li::before{content:"";position:absolute;left:0;top:0.7em;width:7px;height:7px;background:#0258b5;border-radius:50%}

/* Specs */
.e1-specs-table{width:100%;border-collapse:collapse;font-size:18px;color:#333;margin-bottom:30px; max-width: 900px;}
.e1-specs-table th,.e1-specs-table td{border:1px solid #ccc;padding:5px;text-align:left;vertical-align:middle;font-size:16px; text-align: center;}
.e1-specs-table th{background:#333; color: #fff; font-weight:700;}
.e1-specs-table td.color {background: #f5f5f5; text-align: center;}
/* .e1-specs-table td{line-height:1.7} */

.e1_add {padding: 0px 0 0 0;}



@media (max-width:1200px){
	.e1_models,.e1_features,.e1_monitor,.e1_specs{padding:30px 0}
	.e1-features-list{grid-template-columns:repeat(2,1fr)}
	.e1-monitor-list{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:680px){
	.e1_title{font-size:20px; margin-bottom: 10px;}
	.e1_lead{font-size:14px}
	.e1-models-desc {font-size: 14px;}
	.e1-monitor-list li {font-size: 14px;}
	.e1_stitle {font-size: 20px; margin-bottom: 10px;}
	.e1-models-name {font-size: 18px;}
	.e1-models-list{grid-template-columns:1fr}
	.e1-features-list{grid-template-columns:1fr; gap: 10px;}
	.e1-features-item {padding: 20px;}
	.e1-features-item .flex_box {margin-bottom: 5px;}
	.e1-features-item h3 {font-size: 16px;}
	.e1-features-item i {font-size: 20px;}
	.e1-monitor-list{grid-template-columns:1fr}
	.e1-specs-table{font-size:15px}
	.e1-features-item p {font-size: 14px;}
	.e1-specs-table {margin-bottom: 20px;}
	.e1-specs-table th, .e1-specs-table td {font-size: 14px;}
	.e1_add {padding: 0px 0 0 0;}
	.e1-monitor-list li {padding-left: 12px;}
	.e1-monitor-list li::before {width: 4px; height: 4px;}
	.e1_title span {display: block;}
}