@charset "utf-8";
/* =========================================================
   introNew02.css
   - introNew.css 기반, section1 시안(1920 x 1080) 리뉴얼 반영
   - 기존 section1 규칙(그라데이션, searchWrap, visTitle, bannerWrap, siteWrap, icoScroll)은 제거
   ========================================================= */

/* ---------- 공통 / section2 (introNew.css 유지) ---------- */
.introWrap{background:#f2f5fa;}
.introWrap *{box-sizing:border-box;}
.introWrap .inner{width:90%;margin:0 auto;}
.introWrap .section2{background:#fff;}
.introWrap .section2 .inner{width:1284px;}

.introWrap .section{width:100%;height:100%;display:table;position:relative;}

.introWrap .title{margin:30px 0;font-size:35px;font-family:'NanumSquare';color:#000;}
.logoLi{display:flex;flex-wrap:wrap;/*ustify-content:space-between;*/margin-left:-41px;}/* 20250205 수정 */

.logoLi li{margin-bottom:40px;/* 20250205 수정 */margin-left:41px;border:1px solid #e0e0e0;border-radius:60px 15px 60px 15px;width:290px;height:214px;transition:0.4s;background:#fff}
.logoLi li:hover{margin-top:-10px;box-shadow:10px 10px 10px 1px rgba(104, 106, 124, 0.8);background-image:linear-gradient(#fff, #fff),linear-gradient(to right, #c12a7c, #118ad9);background-origin:border-box;background-clip:content-box,border-box;border:1px solid transparent;}

.logoLi li a{display:block;}
.logoLi li a span{display:flex;justify-content:center;align-items:center;}
.logoLi .img{height:160px;padding:0 15px;}
.logoLi .txt{height:50px;border-top:1px dashed #c2c2cc;font-size:16px;}

@media screen and (min-width: 1620px){
	.introWrap .inner{width:1600px;}
}

@media all and (max-width : 1400px){
	.introWrap .section2 .inner{width:90%;}
	.logoLi li{width:calc(25% - 41px);}
}

@media all and (max-width : 1200px){
	.introWrap .inner, .introWrap .section2 .inner{width:calc(100% - 80px);}
	.logoLi li{width:calc(50% - 41px);}

	.fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell, .fp-scrollable {height: auto !important;}
}

@media all and (max-width : 1024px){
	.introWrap .title{font-size:28px;margin-bottom:20px;}
}

@media all and (max-width : 960px){
	.introWrap .inner, .introWrap .inner, .introWrap .section2 .inner{width:calc(100% - 60px);}
}

@media all and (max-width : 750px){
	.introWrap .title{font-size:25px;margin-bottom:10px;}
	.logoLi li{margin-bottom:20px;}
}

@media all and (max-width : 480px){
	.introWrap .inner, .introWrap .inner, .introWrap .section2 .inner{width:calc(100% - 40px);}
	.introWrap .title{font-size:20px;}
	.logoLi li{width:100%;height:174px;}
	.logoLi .img{height:130px;}
	.logoLi .txt{height:44px;font-size:14px;}
}

@media screen and (min-height: 961px){
	.introWrap .section{height:100vh;}
}


/* =========================================================
   section1
   ========================================================= */
:root{
	--s1-navy:#071b51;
	--s1-blue:#0042a1;
	--s1-pale:#ebf0f6;
	--s1-line:#c3cad6;
	--s1-text:#333;
}

.introWrap .section1{background:#fff;}
.introWrap .section1 .fp-tableCell{vertical-align:top;position:relative;}

.s1-blind{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.s1 *{box-sizing:border-box;font-family:'Noto Sans KR','Noto Sans CJK KR','Source Han Sans KR',sans-serif;letter-spacing:-0.02em;}
.s1-inner{position:relative;width:calc(100% - 280px);max-width:1640px;margin:0 auto;}

/* ---------- 상단 비주얼 (네이비) ---------- */
.s1-top{position:relative;height:510px;background:var(--s1-navy);overflow:hidden;}
.s1-top .s1-inner{height:100%;}

.s1-logo{position:absolute;top:57px;left:0;z-index:2;margin:0;line-height:1;}
.s1-logo a{display:block;width:261px;height:36px;background:url(/assets/images/introNew/logo_white.png) 0 0/100% 100% no-repeat;text-indent:-9999px;overflow:hidden;}

/* 검색 */
.s1-search{position:absolute;top:57px;right:0;z-index:2;width:693px;}
.s1-search fieldset{border:0;margin:0;padding:0;}
.s1-search legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.s1-search .bg{position:relative;display:flex;align-items:center;height:82px;background:#fff;border-radius:41px;}
.s1-search input{flex:1;min-width:0;height:100%;padding:0 30px 0 40px;border:0;background:transparent;border-radius:41px 0 0 41px;font-size:24px;font-weight:500;color:var(--s1-navy);outline:none;}
.s1-search input::placeholder{color:var(--s1-navy);opacity:1;}
.s1-search input:focus{box-shadow:inset 0 0 0 3px var(--s1-blue);}
.s1-search button{flex:none;width:82px;height:82px;margin-right:0;border:0;border-radius:50%;background:var(--s1-blue);color:#fff;font-size:19px;font-weight:500;cursor:pointer;transition:background .2s;}
.s1-search button span{color:inherit;font:inherit;}
.s1-search button:hover,
.s1-search button:focus{background:#0a55c8;outline:3px solid #fff;outline-offset:-6px;}

/* 타이틀 */
.s1-title{position:absolute;left:0;top:226px;z-index:2;color:#fff;}
.s1-title p{margin:0;color:#fff;line-height:1.3;word-break:keep-all;}
.s1-title strong{display:block;font-size:63px;font-weight:700;color:#fff;letter-spacing:-0.035em;}
.s1-title span{display:block;margin-top:16px;font-size:55px;font-weight:300;color:#fff;letter-spacing:-0.03em;}

/* 우측 arko 워드마크 */
.s1-wordmark{position:absolute;right:0;bottom:0;z-index:1;width:676px;height:269px;background:url(/assets/images/introNew/arko_wordmark2x.png) right bottom/contain no-repeat;pointer-events:none;}

/* ---------- 바로가기 배너 ---------- */
.s1-links{display:grid;grid-template-columns:970fr 670fr;margin-top:76px;}
.s1-links li{min-width:0;}
/* 링크 영역은 텍스트 + 화살표 크기만큼만 (좌측) / 우측은 시안대로 화살표가 컬럼 끝에 붙음 */
.s1-link{position:relative;display:inline-block;vertical-align:top;max-width:100%;padding-right:184px;}
.s1-link.is-intro{display:block;}
.s1-link h2{margin:0;font-size:65px;font-weight:700;line-height:1.16;color:var(--s1-navy);letter-spacing:-0.04em;word-break:keep-all;}
.s1-link p{margin:22px 0 0;font-size:24px;font-weight:500;line-height:1.38;color:var(--s1-navy);word-break:keep-all;}
.s1-link .arrow{position:absolute;top:6px;right:0;width:120px;height:100px;color:var(--s1-navy);transition:transform .35s ease;}
.s1-link .arrow svg{display:block;width:100%;height:100%;}
.s1-link:hover .arrow,
.s1-link:focus .arrow{transform:translateX(16px);}
.s1-link:hover h2{color:var(--s1-blue);}
.s1-link:focus{outline:3px solid var(--s1-blue);outline-offset:4px;}

/* ---------- 운영시설 바 ---------- */
.s1-site{display:flex;align-items:center;justify-content:center;height:60px;margin-top:72px;padding:0 30px;background:var(--s1-pale);border-radius:30px;}
.s1-site .tit{display:flex;align-items:center;margin:0 50px 0 0;font-size:20px;font-weight:700;line-height:1;color:var(--s1-navy);white-space:nowrap;}
.s1-site .tit svg{width:31px;height:31px;flex:none;margin-right:12px;}
.s1-site ul{display:flex;align-items:center;margin:0;padding:0;}
.s1-site li{position:relative;display:flex;align-items:center;}
.s1-site li~li::before{content:'';display:block;width:11px;height:1px;margin:0 22px;background:var(--s1-line);transform:rotate(-55deg);}
.s1-site a{font-size:18px;color:var(--s1-text);white-space:nowrap;line-height:1.4;transition:color .2s;}
.s1-site a:hover,
.s1-site a:focus{outline:2px solid var(--s1-blue);outline-offset:3px;color:var(--s1-blue);text-decoration:underline;text-underline-offset:4px;}

/* ---------- 스크롤 다운 ---------- */
.s1-scroll{position:absolute;left:50%;bottom:22px;z-index:3;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);font-size:17px;color:var(--s1-navy);}
.s1-scroll svg{width:20px;height:28px;margin-bottom:6px;animation:s1Mouse 1s ease-in-out infinite alternate;}
@keyframes s1Mouse{from{transform:translateY(0);}to{transform:translateY(-8px);}}

/* =========================================================
   반응형
   ========================================================= */
@media all and (max-width:1700px){
	.s1-inner{width:calc(100% - 160px);}
	.s1-search{width:560px;}
	.s1-title strong,.s1-link h2{font-size:58px;}
	.s1-title span{font-size:46px;}
	.s1-wordmark{width:560px;height:224px;}
	.s1-site .tit{margin-right:30px;}
	.s1-site li~li::before{margin:0 14px;}
	.s1-site a{font-size:16px;}
}

@media all and (max-width:1400px){
	.s1-top{height:460px;}
	.s1-title{top:200px;}
	.s1-title strong,.s1-link h2{font-size:50px;}
	.s1-title span{font-size:38px;margin-top:10px;}
	.s1-wordmark{width:460px;height:184px;}
	.s1-link{padding-right:150px;}
	.s1-link .arrow{width:90px;height:76px;}
	.s1-link p{font-size:19px;margin-top:28px;}
	.s1-site .tit{font-size:17px;margin-right:20px;}
	.s1-site .tit svg{width:24px;height:24px;}
	.s1-site li~li::before{margin:0 8px;}
	.s1-site a{font-size:15px;}
}

@media all and (max-width:1200px){
	.s1-inner{width:calc(100% - 80px);}
	.s1-site{height:auto;padding:16px 30px;border-radius:30px;flex-wrap:wrap;}
	.s1-site ul{flex-wrap:wrap;justify-content:center;}
	.s1-site li{margin:3px 0;}
	.s1-bottom{padding-bottom:110px;}
}

@media all and (max-width:1024px){
	.s1-top{height:auto;padding:150px 0 220px;}
	.s1-logo{top:40px;left:40px;}
	.s1-search{position:relative;top:auto;right:auto;width:100%;margin-bottom:50px;}
	.s1-title{position:relative;top:auto;}
	.s1-wordmark{width:400px;height:160px;}
	.s1-top .s1-inner{position:static;}
	.s1-links{grid-template-columns:1fr;gap:50px;margin-top:60px;}
	.s1-link{display:block;padding-right:130px;}
	.s1-site{margin-top:60px;}
	.s1-site .tit{width:100%;justify-content:center;margin:0 0 10px;}
}

@media all and (max-width:750px){
	.s1-inner{width:calc(100% - 40px);}
	.s1-top{padding:100px 0 150px;}
	.s1-logo{top:30px;left:20px;}
	.s1-logo a{width:217px;height:30px;}
	.s1-search .bg{height:58px;}
	.s1-search input{font-size:17px;padding-left:24px;}
	.s1-search button{width:58px;height:58px;font-size:14px;}
	.s1-search{margin-bottom:36px;}
	.s1-title strong,.s1-link h2{font-size:36px;}
	.s1-title span{font-size:26px;}
	.s1-wordmark{width:280px;height:112px;}
	.s1-links{gap:40px;margin-top:44px;}
	.s1-link{padding-right:70px;}
	.s1-link .arrow{width:52px;height:44px;}
	.s1-link p{font-size:16px;margin-top:16px;}
	.s1-link p br{display:none;}
	.s1-site{margin-top:44px;padding:16px 20px;}
	.s1-site a{font-size:14px;}
	.s1-bottom{padding-bottom:40px;}
	.s1-scroll{display:none;}
}

@media all and (max-width:480px){
	.s1-top{padding:96px 0 130px;}
	.s1-search .bg{height:52px;}
	.s1-search input{font-size:16px;padding:0 12px 0 20px;}
	.s1-search button{width:52px;height:52px;font-size:13px;}
	.s1-title strong{font-size:30px;}
	.s1-title span{font-size:21px;margin-top:6px;}
	.s1-wordmark{width:240px;height:96px;}
	.s1-links{gap:36px;margin-top:40px;}
	.s1-link{padding-right:60px;}
	.s1-link h2{font-size:30px;line-height:1.25;}
	.s1-link .arrow{top:2px;width:44px;height:37px;}
	.s1-link p{font-size:15px;line-height:1.5;margin-top:12px;}
	/* 운영시설: 구분선 대신 2열 목록 */
	.s1-site{display:block;padding:18px 20px 16px;border-radius:20px;}
	.s1-site .tit{justify-content:flex-start;margin:0 0 10px;font-size:16px;}
	.s1-site .tit svg{width:22px;height:22px;margin-right:8px;}
	.s1-site ul{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;}
	.s1-site li{margin:0;}
	.s1-site li~li::before{display:none;}
	.s1-site a{display:block;padding:5px 0;font-size:14px;white-space:normal;word-break:keep-all;}
}

@media all and (max-width:360px){
	.s1-inner{width:calc(100% - 32px);}
	.s1-logo{left:16px;}
	.s1-logo a{width:188px;height:26px;}
	.s1-top{padding:84px 0 110px;}
	.s1-search{margin-bottom:28px;}
	.s1-search input{font-size:15px;padding-left:16px;}
	.s1-title strong{font-size:26px;}
	.s1-title span{font-size:18px;}
	.s1-wordmark{width:200px;height:80px;}
	.s1-link{padding-right:50px;}
	.s1-link h2{font-size:26px;}
	.s1-link .arrow{width:38px;height:32px;}
	.s1-link p{font-size:14px;}
	.s1-site{padding:16px;}
	.s1-site a{font-size:13px;}
}

/* 낮은 화면 높이 대응 (데스크톱) */
@media screen and (min-width:1201px) and (max-height:960px){
	.s1-top{height:420px;}
	.s1-title{top:175px;}
	.s1-title strong,.s1-link h2{font-size:54px;}
	.s1-title span{font-size:42px;margin-top:8px;}
	.s1-wordmark{width:520px;height:208px;}
	/*.s1-links{margin-top:44px;}*/
	.s1-links{margin-top:clamp(44px, calc(50vh - 387px), 90px);}
	.s1-link{padding-right:156px;}
	.s1-link .arrow{width:96px;height:80px;}
	.s1-link p{margin-top:16px;font-size:20px;}
	/*.s1-site{margin-top:40px;}*/
	.s1-site{margin-top:clamp(40px, calc(50vh - 404px), 73px);}
	.s1-scroll{bottom:12px;}
}
@media screen and (min-width:1201px) and (max-height:820px){
	.s1-top{height:380px;}
	.s1-title{top:150px;}
	.s1-title strong,.s1-link h2{font-size:46px;}
	.s1-title span{font-size:36px;margin-top:6px;}
	.s1-wordmark{width:420px;height:168px;}
	.s1-links{margin-top:40px;}
	.s1-link{padding-right:140px;}
	.s1-link .arrow{width:80px;height:68px;}
	.s1-site{margin-top:34px;}
	.s1-scroll{display:none;}
}

/* 움직임 줄이기 설정 사용자 대응 */
@media (prefers-reduced-motion: reduce){
	.s1-scroll svg{animation:none;}
	.s1-link .arrow,.s1-search button,.s1-site a{transition:none;}
}

/* 검색어 삭제 버튼 추가 */
.s1-search .bg input{padding-right:12px;}
.s1-search .bg input:focus{box-shadow:none;}
.s1-search .bg:focus-within{box-shadow:inset 0 0 0 3px var(--s1-blue);}
.s1-search .bg .btn_delete_kw{
	position:relative;flex:none;width:32px;height:32px;margin-right:12px;padding:0;
	border:0;border-radius:50%;background:#e6e8ef;cursor:pointer;
}
.s1-search .bg .btn_delete_kw:before,
.s1-search .bg .btn_delete_kw:after{
	content:'';position:absolute;top:50%;left:50%;width:14px;height:2px;margin:-1px 0 0 -7px;
	background:var(--s1-navy);border-radius:1px;
}
.s1-search .bg .btn_delete_kw:before{transform:rotate(45deg);}
.s1-search .bg .btn_delete_kw:after{transform:rotate(-45deg);}
.s1-search .bg .btn_delete_kw:hover{background:#d5d9e4;outline:0;}
.s1-search .bg .btn_delete_kw:focus{background:#e6e8ef;outline:0;}
.s1-search .bg .btn_delete_kw:focus-visible{outline:2px solid var(--s1-blue);outline-offset:2px;}
.s1-search .bg .btn_delete_kw[hidden]{display:none;}
/* //검색어 삭제 버튼 추가 */