@charset "utf-8";

@import url('reset.css');
@import url('font.css');

/* common */
:root {
								--color-white : #ffffff;  /* 부분 텍스트  화이트 */
								--color-navy: #212c3c;			/* 메인 텍스트 네이비 */
								--color-gray: #787d87;   /* 텍스트 그레이 */
								--color-gray2: #7a7a7a; /* 포인트 텍스트 그레이  */
								--color-lightgray: #eeeeee; /* 포인트 텍스트 라이트 그레이 */
								--color-gray3: #cccccc; /* 포인트 라인 그레이 */
								--color-red: #ed1d3b;   /* 포인트 텍스트 레드 */
								--color-blue: #273372; /* 포인트 텍스트 블루  */
								--color-blue2: #548cb2; /* 푸터 포인트 텍스트 블루2 */
								--color-blue3: #195ad0; /* 포인트 텍스트 블루3  */
								--color-black: #000000; /* 포인트 텍스트 블랙  */
								--color-navy2: #001f57; /* 포인트 텍스트 네이비2  */
								--color-lightnavy: #667288; /* 포인트 텍스트 밝은네이비 (히스토리)  */
								--color-yellow: #e9aa00; /* 포인트 도트 옐로우 */

								--bold-font-100: 100;
								--bold-font-200: 200;
								--bold-font-300: 300;
								--bold-font-350: 350;
								--bold-font-400: 400;
								--bold-font-500: 500;
								--bold-font-400: 700;
								--bold-font-500: 900;

						}
.hidden { visibility: hidden; }

.flex { display: flex; }
.fl-jc-between { justify-content: space-between; }

/*  버튼  */
.btn_black { background: var(--color-black); color: var(--color-white); text-align: center; width:100%; max-width:312px; border-radius: 5px; padding:12px 0; cursor:pointer; transition: all 0.5s;}
.btn_black span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; }
.btn_black span::after { content: '\226B'; position: absolute; font-size: 0.8em; opacity: 0; top:4px; right:-20px; transition: 0.5s;}
.btn_black:hover span { padding-right: 25px;  }
.btn_black:hover span::after { opacity: 1; right: 0;  }

/* layout */
html,
body {width:100%; min-height:100%; background-color:#f9f9f9; color:#212c3c; font-family:'Roboto', 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'cuprum', sans-serif; font-size:18px; line-height:1.5; word-break:break-all; word-wrap:break-word; overscroll-behavior-y:none; font-weight: 350;}

.Wrapper { width: 100%; height: 100vh; position: relative; }
.inner { width: 100%; max-width: 90rem; margin: 0 auto; position: relative; padding: 0 20px;}
.section1, .section2, .section3, .section4, .section5 { position: relative; width:100%;}
.section3 .inner h2.sec-h2, .section4 .inner h2.sec-h2, .section5 .inner h2.sec-h2, .map-content .inner h2.sec-h2 { font-family: 'cuprum'; color: var(--color-navy); font-size:4.4em; /*font-size: clamp(18px, 4vw, 79px)*/ position: relative;}
.section3 .inner h2.sec-h2::after, .section4 .inner h2.sec-h2::after, .section5 .inner h2.sec-h2::after, .map-content .inner h2.sec-h2::after { content: ''; position: absolute; background: url('../images/colon.png') no-repeat; background-size: contain; display: inline-block; width: 15px; height: 100%; top:28px; margin-left: 15px;}
/* .section3 .inner,  .section4 .inner, .section5 .inner { padding: 115px 0; } */
.section3 .inner .comment, .section4 .inner .comment /* .section5 .inner .comment */ { display: flex; flex-direction: column; font-weight: 400; padding-top: 2%; padding-bottom: 3%;}

/* section 1 메인 */
.section1 { height: 100dvh; }
.section1.sec1Bg {  background:url('../images/bg03.png') no-repeat; background-size: cover;}
/* .video1 { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; min-width: 1900px; min-height: 115none; { position: relative; height:100%;}*/
.main-top { position: fixed; width: 100%; top: 0; left: 0; padding: 30px 0 45px 0; z-index: 1000; box-sizing:border-box; background-color: rgba(0, 0, 0, 0.3) }
.main-top .logo { position: absolute; }
.main-top .logo a { background: url('../images/logo.png') no-repeat; background-size: contain; }
.main-top .inner .Gnb { position: relative ; width: 50%; top: 10px; display: flex; justify-content: space-between; margin: 0 auto;  }
.main-top .inner .Gnb a { margin-right: 114px; font-weight: var(--bold-font-400); color: var(--color-white);}
.main-top .inner .Gnb a:last-child { margin: 0; }
.main-top .inner .mobileGnb { display: none; }
.main-top .inner .mobileGnb .M-Gnb { display: inline-block; cursor: pointer;  float: right; position: relative; top:-10px}
.bar1, .bar2, .bar3 { width: 30px; height: 4px; background-color: #ffffff; margin: 5px 0; transition: 0.4s; }
.change .bar1 { transform: translate(0, 9px) rotate(-45deg);}
.change .bar2 {opacity: 0;}
.change .bar3 { transform: translate(0, -9px) rotate(45deg);}

.sidenav { height: 100%;  width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s;}
.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s;}
.sidenav a:hover { color: #f1f1f1;}
.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px;}




.section1 .main-bottom { position: absolute; bottom:100px; text-align:center; color: var(--color-white); padding: 0 20px; width: 100%;}
.section1 .main-bottom .caption { /*font-size: 2.7em;*/ font-size: clamp(18px, 3vw, 49px);}
.section1 .main-bottom .caption span {  font-size: clamp(16px, 2vw, 24px); padding-bottom: 4rem; display:inline-block;}
.section1 .main-bottom .caption { /*font-size: 2.7em;*/ font-size: clamp(18px, 3vw, 49px);}
.section1 .main-bottom .caption p { font-weight: var(--bold-font-400); padding: 1em 0;}
.section1 .main-bottom .caption p span { font-size: clamp(18px,3vw, 49px); font-weight: var(--bold-font-400); display:inline-block; padding-bottom: 0;}
.pagination { margin: 0 auto;  text-align:center;}
.pagination a { display: inline-block; background-color: var( --color-white); opacity:0.5; width:75px; height:4px; margin-right:10px;}
.pagination a:last-child { margin-right: 0; }
.pagination > .On { opacity: 1; }

/*  section 2  */
.section2 { height: 100dvh; }
.section2 .inner {}
.section2.sec2Bg { background: url('../images/sec2Bg2.png') #ffffff left top no-repeat; }
.section2 .contents::before { content: ''; width: 3px; height: 106px; background: url('../images/sec2_topBg.png') center no-repeat; position:absolute; top:-70px;}
.section2 .contents { position: relative; text-align: center; /* fullPage를 사용하면 top: 350px; */  height: auto;}
.section2 .contents p:nth-child(1) { color: var( --color-red); font-weight: var( --bold-font-400);  /*font-size: 3.3em;*/ font-size: clamp(30px, 4.5vw, 60px); padding:100px 0 20px 0;}
.section2 .contents p:nth-child(2) { color: var( --color-blue); font-weight: var( --bold-font-350); /*font-size: 2.7em;*/ font-size: clamp(17px, 3vw, 4px); line-height:1.2em; padding-bottom: 140px;}
.section2 .bottom { position: absolute; bottom: 0; width: 100%; }
.section2 .bottom .rollingTxt { width: 100%; background: var(--color-white); overflow: hidden;}
/* .section2 .bottom .rollingTxt p.startMark {
	opacity: 0.2;
} */
.section2 .bottom .rollingTxt p { display: inline-block; padding-right: 42px; color: var( --color-black ); font-size: 5.5vw; font-weight: var( --bold-font-400); opacity: 0.07;  white-space: nowrap;}
/* 2025.03.05 송인호 p태그 롤링 기능 추가 */
.section2 .bottom .rollingTxt .rollingWrapper { display: flex; min-width: 200dvh; animation: rolling 20s linear infinite; width: max-content;}
@keyframes rolling {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

.pop { position:fixed; z-index: 10; background:#fff; border:solid 1px red;}

/*  section3  */
.section3 { height: 100dvh;}
.section3 .inner { display:flex; padding-top: 115px;}
.section3.sec3Bg { background: url('../images/sec3Bg.png') no-repeat #f0f5fb ; background-size: cover; }
.section3 .inner h2 { }
.section3 .inner h3 { /*font-size: 2.7em;*/ font-size: clamp(18px, 3vw, 48px); font-weight: var( --bold_font-350); width: 50%; padding-top: 35px;}
.section3 .inner .left-tit { width: 100%; top: 10%;  }
.section3 .inner .right-cont { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: space-between;}
.section3 .inner .right-cont .thumb:nth-child(1), .section3 .inner .right-cont .thumb:nth-child(3) { top: 5%;}
.section3 .inner .right-cont .thumb:nth-child(2), .section3 .inner .right-cont .thumb:nth-child(4) { }
.section3 .inner .right-cont .thumb { position: relative; width: 50%; max-width: 385px; height: 40dvh;  position:relative; }
.section3 .inner .right-cont .img-cont { border-radius: 10px; display: block; }
.section3 .inner .right-cont .img01 { background: url('../images/biz01.jpg') no-repeat center; width: 100%; height: 73%;  /* max-width:385px; max-height: 30dvh; */ }
.section3 .inner .right-cont .img02 { background: url('../images/biz02.jpg') no-repeat center; width: 100%; height: 73%; /* max-width:385px; max-height: 30dvh; */ }
.section3 .inner .right-cont .img03 { background: url('../images/biz03.jpg') no-repeat center; width: 100%; height: 73%; /* max-width:385px; max-height: 30dvh; */ }
.section3 .inner .right-cont .img04 { background: url('../images/biz04.jpg') no-repeat center; width: 100%; height: 73%; /* max-width:385px; max-height: 30dvh; */}
.section3 .inner .right-cont .cont { position:absolute; width: 100%;  opacity: 0; transition:  0.6s ease; background-color:#000000; border-radius: 10px; height:100%; /*max-height:388px;*/ position:relative;}
.section3 .inner .right-cont .cont ul { position:relative; top: 2%}
.section3 .inner .right-cont .cont ul li { color: var( --color-white); padding-left: 14%;  padding-top: 3%; padding-bottom: 1%; font-size: clamp(14px, 1vw, 18px);}
.section3 .inner .right-cont .cont ul li::before { content: '\25B8'; width: 100%; height: 100%; position: absolute; left: 30px; }
.section3 .inner .right-cont .img-cont:hover .cont { opacity: 0.8; }
.section3 .inner .biz_tit { padding-top: 30px; }
.section3 .inner .biz_tit h4 { color: var( --color-gray); font-size: clamp(14px, 1vw, 18px); }
.section3 .inner .biz_tit h5 { font-size: clamp( 18px, 2vw, 25px);}

/*  section4  */
.section4 { position: relative; height: 100dvh;}
.section4 .inner { padding-top: 5%;  height: 95%; max-height: 96%;}
.section4::before{ content: ''; height: 100%; position: absolute; width: 100%; background: url('../images/sec4Bg.png') no-repeat ; background-size: cover; opacity:0.5;}
.section4 .history { padding-top: 2%; height: 100%; display:flex;}
.section4 .left-his { display: flex ; flex-direction: column; width: 32%; position: relative;}
.section4 .left-his::before { content: ''; position: absolute; width: 1px; height: 60%; left: 100%; background-color: #273372; }
.section4 .left-his .left-year { /*font-size: 2em;*/ font-size: clamp(18px, 2vw, 36px); font-family: 'Exo 2'; letter-spacing: -1px; font-weight: 600; color:var(--color-lightnavy); text-align: right; width: 100%; padding-right: 3.5rem; position: relative; padding-bottom: 1rem;}
.section4 .left-his .left-year.twoTxt { line-height:1.9rem;}
.section4 .left-his .left-year.On.twoTxt { line-height:3rem; /*font-size:3em*/ font-size: clamp(18px, 3.5vw, 54px);}
.section4 .left-his .left-year span { display:block; padding-right: 1rem}
.section4 .left-his .left-year.On span { padding-right: 1.65rem;}
.section4 .left-his .left-year:first-child { padding-top: 1rem; }
.section4 .left-his .left-year:first-child::before { top: 38px; }
.section4 .left-his .left-year::before { content: ''; position: absolute; width:15px; height:15px; border-radius:8px; background-color:#667288; right: -8px; top:21px; }
.section4 .left-his .left-year.On { color:var(--color-navy2); /*font-size:2.8rem;*/ font-size: clamp( 18px, 3.5vw, 50px); padding-top: 2rem; padding-bottom: 2rem; position: relative;}
.section4 .left-his .left-year.On::before { content: ''; position: absolute; width:21px; height:21px; border-radius:12px; background-color:#273372; right: -11px; top:64px;}
.section4 .right-his { width: 100%; padding-left: 3rem; height: 65%; overflow-y: hidden; }
.section4 .right-his .history-cont { padding-left: 3%; padding-top: 2rem; height: 50%; display: none; opacity: 0; transform: translateY(30px); transition: opacity 0.4s ease, transform 0.4s ease;}
.section4 .right-his .history-cont.active { position: absolute; width: 75%; display: block; opacity: 1; transform: translateY(0); padding-bottom: 1rem; overflow-y: auto;}
.section4 .right-his .history-cont dl {  }
.section4 .right-his .history-cont dl dt { font-size: 2.2em; font-family: 'Exo 2'; letter-spacing: - 1px; font-weight: 600; color:var(--color-navy2); padding-bottom: 1.5rem;}
.section4 .right-his .history-cont dl ul {}
.section4 .right-his .history-cont dl ul li { display: flex; padding-bottom: 1.5em;}
.section4 .right-his .history-cont dl ul li strong { display: block; min-width:6%; text-align: center; }
.section4 .right-his .history-cont dl ul li div { display: flex; position: relative; padding-left: 10px;}
.section4 .right-his .history-cont dl ul li div::before { content:''; position:absolute; width:2px; height:2px; background-color: var(--color-yellow); left: 0; top:11px;}
.section4 .right-his .history-cont dl ul li div p:first-child { font-weight: 600; min-width: 15rem; }
.section4 .right-his .history-cont dl ul li div p span { display: block; font-size: 0.89rem; }

.fade-item { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease;}
.fade-item.active { opacity: 1; transform: translateY(0);}
/*  section5  */
.section5 { background: #e4e4e4; height: 100dvh;}
.section5 .inner { padding-top: 6%; padding-bottom:2%; height: 75dvh;}
.section5 .inner .comment { display: flex; flex-direction: column; font-weight: 400; padding-bottom: 3%;}
.section5 .inner .clientList { padding-top: 3%;  padding-bottom: 1%; display:flex; flex-wrap: wrap; width: 100%;}
.section5 .inner .clientList li { cursor: pointer; padding-bottom: 1rem; padding-right: 1rem; display:block;}

.section5 .inner .clientList li a { display: block; width: 100%; height: 100%; }
.section5 .inner .clientList li:nth-child(1) a { background: url('../images/client04.png') no-repeat #ffffff center; height:106px;}
.section5 .inner .clientList li:nth-child(2) a { background: url('../images/client02.png') no-repeat #ffffff center; height:106px;}
.section5 .inner .clientList li:nth-child(3) a { background: url('../images/client03.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(4) a { background: url('../images/client01.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(5) a { background: url('../images/client05.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(6) a { background: url('../images/client06.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(7) a { background: url('../images/client07.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(8) a { background: url('../images/client08.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(9) a { background: url('../images/client09.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(10) a { background: url('../images/client10.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(11) a { background: url('../images/client11.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(12) a { background: url('../images/client12.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(13) a { background: url('../images/client13.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(14) a { background: url('../images/client14.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(15) a { background: url('../images/client15.png') no-repeat #ffffff center; height:106px; }
.section5 .inner .clientList li:nth-child(16) a { background: url('../images/client16.png') no-repeat #ffffff center; height:106px; }

.section4 .pagination a, .section5 .pagination a { background-color: #061c3a; opacity:0.5; width:55px; height:7px; margin-right:2px;}
.section4 .pagination a:last-child, .section5 .pagination a:last-child { margin-right: 0; }
.section4 .pagination > .On, .section5 .pagination > .On { opacity: 1; }

/* footer */
.footer { background: #061c3a; color: var( --color-white ); width: 100%; height: 25dvh;  font-size: clamp(14px, 1vw, 18px); }
.footer .inner { padding-top: 3%; height: 25dvh;}
.footer h2 { position: relative; font-weight: var(--bold-font-400); opacity: 0.7; padding-left:180px; font-size: 1.2rem;}
.footer h2::before { content: ''; position: absolute; background: url('../images/logo.png') no-repeat; background-size: contain ; width: 141px; height: 100%; left:0;}
.footer .right-cont { font-weight: var( --bold-font-350); display: flex; flex-wrap: wrap; align-content: space-between; flex-basis: 230px; justify-content: space-between; }
.footer .right-cont button { color: var( --color-white ); }
.footer .right-cont button:last-child { font-weight: var( --bold-font-350); padding:0 22px 0 0; position:relative;}
.footer .right-cont button:last-child::before { position: absolute; display: inline-block;
content:''; width:9px; height:9px; top: 6px; right:2px; border-top:solid 2px var( --color-white ); border-right: solid 2px var( --color-white ); transform: rotate(135deg); }
.footer .footBt { position: relative; padding-top: 3%; padding-bottom: 3%; font-size: clamp(14px, 1vw, 18px); }
.footer ul { padding-bottom: 20px; }
.footer ul li { display: inline-flex; padding-right: 55px; }
.footer ul li:last-child { padding: 0; }

.footer ul li strong { color: var( --color-blue2 ); font-weight: var(--bold-font-350); padding-right: 10px; }

/* map-content */
.map-content {display: none; position: fixed; z-index: 9999; width: 40%; height: 87dvh; top: 11.3dvh; left: 30%; margin: 0 auto; background-color: #fefefe; padding: 1rem; }
.map-content .inner { position: relative; }
.map-header { display: flex; justify-content: space-between; align-items: center;}
.map-content .inner .close-btn { position: absolute; right: 2dvh; font-size: 2.5dvh; font-weight: bold; color: var(--color-blue2); background: transparent; border: none; cursor: pointer; transition: color 0.3s ease; }
.map-content .inner .close-btn:hover { color: #fc0000; }
.map-content h2.sec-h2 { padding-bottom: ;}
.map-content .content .map { border-radius: 25px; width:100%; height: 40dvh;}
.map-content .content .info { display: flex; padding-top: 1%;}
.map-content .content .info p { font-size: 4dvh; width: 40%; padding-top: 3dvh; }
.map-content .content .info ul { width: 100%; }
.map-content .content .info ul li { border-bottom: 1px solid var(--color-gray3); padding-top: 2.5dvh; padding-bottom: 2dvh; }
.map-content .content .info ul li:last-child { border-bottom: none; }
.map-content .content .info ul li strong {  width:15%; display: inline-block; position:relative; padding-left: 2dvh; }
.map-content .content .info ul li strong::before { content: ''; position: absolute; width:  10px; border-radius: 10px; height: 10px; background-color: var(--color-blue2); top: 7px; left: 0;  }