@charset "utf-8";
@import url('aos.css');
@import url('swiper.min.css');
@import url('fullpage.css');
@import url('nice-select.css');

@font-face {
	font-family: 'Pretendard';
	src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
  }

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}


@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}


@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 100;
    src: local('Noto Sans Thin'), local('NotoSans-Thin'),
    url(../fonts/NotoSansKR-Thin-Hestia.eot),
    url(../fonts/NotoSansKR-Thin-Hestia.eot?#iefix) format('embedded-opentype'),
    /* url(../fonts/NotoSansKR-Thin-Hestia.woff) format('woff'),
    url(../fonts/NotoSansKR-Thin-Hestia.otf) format('opentype'); */
}


/**************************************************************************************************************
	공통
**************************************************************************************************************/
.m0 { margin:0  !important }
.mb0 { margin-bottom:0 !important }
.mb2 { margin-bottom:2px !important }
.mb4 { margin-bottom:4px !important }
.mb5 { margin-bottom:5px !important }
.mb6 { margin-bottom:6px !important }
.mb10 { margin-bottom:10px !important }
.mb15 { margin-bottom:15px !important }
.mb20 { margin-bottom:20px !important }
.mb25 { margin-bottom:25px !important }
.mb30 { margin-bottom:30px !important }
.mb35 { margin-bottom:35px !important }
.mb40 { margin-bottom:40px !important }
.mb45 { margin-bottom:45px !important }
.mb50 { margin-bottom:50px !important }
.mb55 { margin-bottom:55px !important }
.mb60 { margin-bottom:60px !important }
.mb70 { margin-bottom:70px !important }
.mb80 { margin-bottom:80px !important }
.mb90 { margin-bottom:90px !important }
.mb110 { margin-bottom:110px !important }
.mb140 { margin-bottom:140px !important }
.pd0 { padding:0 !important }
.mbr10 { margin-right:10px }
.pdl50 { padding-left:50px !important }
.pdtop90 { padding-top:90px }
.none-bor { border:0 !important }
.text-center { text-align:center !important }
.text-left { text-align:left !important }
.text-right { text-align:right !important }
.f12 { font-size:12px !important; line-height: 1.4em; }
.f16 { font-size:16px !important; line-height: 1.4em; }
.f17 { font-size:17px !important; line-height: 1.4em; }
.f18 { font-size:18px !important; line-height: 1.4em; }
.f19 { font-size:19px !important; line-height: 1.4em; }
.f20 { font-size:20px !important; line-height: 1.4em; }
.f24 { font-size:24px !important; line-height: 1.4em; }
.f25 { font-size:25px !important; line-height: 1.4em; }
.f29 { font-size:29px !important; line-height: 1.4em; }
.f31 { font-size:31px !important; line-height: 1.4em; }
.f34 { font-size:34px !important; line-height: 1.4em; }

.lh34 { line-height: 34px !important; }
.lh44 { line-height: 44px !important; }
.clear:after { display: block; content: ''; clear: both; }
.fl { float:left; }
.fr { float:right; }

/***********************************************************************************
	Common
************************************************************************************/

html,body,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,em,font,img,ins,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,ul,ol,li,dl,dt,dd,table,caption,tbody,tfoot,thead,tr,th,td,fieldset,fo7m,label,legend,input,button,textarea,select{margin:0;padding:0}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;margin:0;padding:0}
legend{display:block;overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;text-indent:-999em;white-space:nowrap; }
fieldset,img,table,caption,tbody,tfoot,thead,tr,th,td,button,hr{border:0 none}
img{vertical-align:middle}
ul li{list-style:none; padding:0; margin:0;}
table{border-collapse:collapse}
th { background: #eee;}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
button{overflow:visible;border:0 none;cursor:pointer}
button::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner {padding: 0;border: 0 none}
a { text-decoration:none; color:#404040;  }
address,
em { font-style:normal }
body,input,select,textarea,button,h1,h2,h3,h4,h5,h6 { font-family:'noto', sans-serif; font-size:13px; color: #262626;}
body,textarea,input,select { font-family:'noto', sans-serif; font-size:13px; color: #262626; text-decoration: none; } 
textarea,.inp,select { border:0; outline:none; border-radius:0; resize:none; box-shadow:none; -webkit-appearance:none; appearance:none; font-weight: normal;}
a:hover { text-decoration: none;}
body { -webkit-text-size-adjust: none; background:none; }
form { padding: 0; margin: 0; }
* {box-sizing: border-box; -webkit-box-sizing:border-box;}
::-ms-clear { display: none;}
select::-ms-expand { display:none; }



::-webkit-input-placeholder { color: #888;}
:-moz-placeholder { color: #888;}
:-ms-input-placeholder {  color: #888;}
:-moz-placeholder {  color: #888;}

a,a:active,a:visited { text-decoration:none !important; }
p,div { word-break:keep-all; }
img { max-width:100%; }

:root { 
    --red:#cf000b;
}




.hidden { overflow: hidden; } /* 애니메이션 하단 잘리는 효과 적용 */
body,html { height: 100%; overflow-x: hidden;}

/******************************************************************
    공통
******************************************************************/
.inner { max-width:1200px; margin: 0 auto; padding:0 20px; }
body.active header { transform: translateY(-101%);}
body.active .main-tabs {  top:0; }
header { position: fixed; top:0; left:0; width:100%; height:80px; background:#fff; z-index:1000; box-shadow: 0 2px 6px rgba(0,0,0,.1);  transition: all 0.5s ease;}
header .inner { display: flex; justify-content: space-between; align-items: center;}
header h1 a { display: block; background: url(../img/common/logo.svg) no-repeat 0 50%; background-size: contain; width:200px; height:80px;  font-size:0; text-indent: -9999px; }
header .right { display: flex; align-items: center; gap:30px; }
header nav ul { display: flex; }
header nav ul li a { display: block; font-size:18px; color:#262626; padding:0 20px; font-weight:500; }
header nav ul li a:hover { color:var(--red); }
header .lang { position: relative;}

header .lang a { line-height:40px; border-radius:5px; font-size:15px;  }
header .lang a img { width:20px; }
header .lang .btn-open { display: flex; align-items: center; gap:10px; width:180px; padding:0 30px 0 10px;  background: #f8f8f8 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10" fill="none"><path d="M14 2L8 8L2 2" stroke="%231C1C1C" stroke-width="2" stroke-linecap="square"/></svg>') no-repeat 93% 50%/ 15px auto; ;}
header .lang ul { display: none; position: absolute; left: 0; right:0; top:calc(100% + 5px); background-color: #f8f8f8; border-radius:5px;  box-shadow:0 0 5px rgba(0,0,0,0.1); }
header .lang ul li a { display: flex; align-items: center; gap:10px;   padding:0 0 0 10px;  color:#999; transition: all 0.3s ease;}
header .lang ul li a img { width:20px; }
header .lang ul li a:hover { color:#000; }
header .btn-m  { display: none;}
header .btn-m svg {  width:34px; height: auto; vertical-align: middle;}
.m-gnb { position: fixed; right: 0; top:0;  bottom:0; background-color: #000; width:70vw; z-index:9999; transition: all 0.5s ease;transform: translateX(100%);}
.m-gnb .btn-close { position: absolute; right:10px; top:10px; padding:5px; }
.m-gnb .btn-close svg { width:25px; height: auto;}
.m-gnb .btn-close svg path { fill:#fff; }
.m-gnb nav { padding-top:70px; }
.m-gnb nav ul li a { display: block; line-height: 50px; padding-left: 20px; font-size:18px; color:#fff; ;}
.m-gnb .lang { display: flex; padding-left: 20px; gap:15px; border-top:1px solid rgba(255,255,255,0.1); padding-top:15px; margin-top:15px; }
.m-gnb .lang a { font-size:14px; color:#efefef; }
.m-gnb .lang a.active { text-decoration: underline !important; text-underline-offset: 6px; font-weight: 700    ;}
.bg-gnb{  position: fixed; left: 0; top:0; right:0; bottom:0; background-color: rgba(0,0,0,0.7); z-index:9000; visibility: hidden; opacity:0; transition: all 0.5s ease;;}
body.menu-on { overflow: hidden;}
body.menu-on .m-gnb { right:0; opacity:1; transform: unset; }
body.menu-on .bg-gnb {  opacity:1; visibility: visible; }

footer { padding:80px 0; background-color: #000;}
footer .inner { display: flex; justify-content: space-between; align-items: flex-end;}
footer .left .logo { margin-bottom: 40px; ;}
footer .left .addr { font-size:12px; color:#909191; }
footer .left .menu{margin:24px 0 40px;}
footer .left .menu a { font-size:20px; color:#909191;   margin-right:20px; display: inline-block; position: relative; transition: all 1s ease;}
footer .left .menu a:before {content: ''; position: absolute; left: 0; bottom:-5px; height: 1px; width:0; background-color: #fff; transition: all 1s ease;}
footer .left .menu a:hover { color:#fff;}
footer .left .menu a:hover:before { width:100%; }
footer .left .copy { font-size:12px; color:#909191; }
footer .nice-select { background-color: #000; border:1px solid #909191; color:#909191; padding-left:30px; padding-right:60px;}
footer .nice-select:after { border-width:1px; height:8px; width:8px;}
footer .nice-select:active, 
footer .nice-select.open, 
footer .nice-select:focus { border-color:#909191;}
footer .nice-select .list { top:inherit; bottom:100%; width:100%; }
footer .nice-select li[data-value="family"] { display: none;}

.btn-top { position: fixed; right:20px; bottom:20px; width:50px; height: 50px; border-radius:8px; background:#333333; display: flex; align-items: center; justify-content: center; z-index:100; transform: translateY(30px); opacity:0; visibility: hidden; transition: all 0.5s ease;}
.btn-top.active { transform: unset; opacity:1; visibility: visible;}

/******************************************************************
    메인
******************************************************************/

.main1{ background: url("../img/main/main1_bg.png") no-repeat 50% 50%; background-size: cover; }
.main1 .inner { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; padding-bottom:40px;;}
/* 신규 */
.main1 .item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.main1 .img {padding:20px 0;}
.main1 .img img { max-width:30vw;}
.main1 .subj .t1 { font-size:34px; font-weight:700; margin-bottom: 20px; /* 추가 */ color: #fff; }
.main1 .subj .t2 { font-size:20px; font-weight:400; /* 추가 */ color: #fff; }
.main1 .down { position: absolute; left: 50%; bottom:40px; width:20px; height:90px; background: url(../img/main/main_arr.png) no-repeat 50% 50%; background-size: contain; animation: scrollAni 1s linear infinite alternate;}
@keyframes scrollAni {
	from {bottom:0; }
	to { bottom:40px; 	}
}

.main-tabs { padding:20px; display: flex; justify-content: center; align-items: center; ; background-color: #fff; position: sticky; top:80px;  gap:10px;  transition: all 0.5s ease;z-index:10;}
.main-tabs a { padding:8px 0; width:150px; border-radius:8px; font-size:18px; transition: all 0.5s ease; text-align: center; font-weight:500;}
.main-tabs a.active,
.main-tabs a:hover { background-color: var(--red); color:#fff; }

.main2 {padding:40px 0; background: url(../img/main/main2_bg.jpg) no-repeat 50% 50%; background-size: cover;  }
.main h2 { text-align: center; font-size:18px; margin-bottom: 15px;}
.main h3 { text-align: center; font-size:30px; line-height: 1.3; margin-bottom: 20px ;}
.main h4 { text-align: center; font-size:16px; margin-bottom: 20px ;}
.main .desc { text-align: center; font-size:18px; line-height: 1.5; margin-bottom: 20px; }

.main2 h2 { text-decoration: underline; text-underline-offset: 10px; color:var(--red);}
.main2 .box { display: flex; flex-direction: row-reverse; padding-top:20px; gap:40px; justify-content: center;}
.main2 .box .img { width:55%; flex-shrink: 0; }
/* 기존 방법 */
/* .main2 .box .img img { border-radius:10px; box-shadow:20px 20px 30px rgba(0,0,0,0.1); aspect-ratio: 17/11; object-fit: cover;} */
.main2 .box .img img { border-radius:10px; box-shadow:20px 20px 30px rgba(0,0,0,0.1); width: 100%; height: 100%; object-fit: cover; /* 또는 contain */ object-position: left top;  /* ← 왼쪽 상단 기준 */ }
.main2 .box .text dl + dl { margin-top:40px; }
.main2 .box .text dl dt { font-size:20px; font-weight:800; margin-bottom: 10px;}
.main2 .box .text dl dd { font-size:15px; line-height: 1.2;}
.main  .btns { display: flex; justify-content: center; text-align: center; margin-top:40px;}
.main  .btns a { padding:10px; width:220px; height: 50px; background-color: var(--red); font-size:18px; color:#fff; font-weight:600; transition: all 0.5s ease;}
.main  .btns a:hover { background-color: #000; ;}

/* 기존 방법 */
/* .main3 { padding:20px 0; background: url(../img/main/main3_bg.jpg) no-repeat 50% 50% / cover;} */
.main3{ position: relative; overflow: hidden; background: none; }
.main3 .bg-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.main3 .inner{ position: relative; z-index: 1; }

.main3 h2, .main4 h2 {
    color: var(--red) !important;
    text-decoration: underline;
    text-underline-offset: 10px;
}
.main3 h3,
.main3 .desc { color:#fff; }
.main3 .box { padding:40px 40px; background-color: #dcdcdc; border-radius:10px; box-shadow:20px 20px 30px rgba(0,0,0,0.1);}
.main3 .box .img { text-align: center; ;}
.main3 .box .img img { max-width:50%; object-fit: cover;}
.main3 .box ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.main3 .box ul li {
  border-radius: 0;
  background-color: #f1f1f1;
  padding: 26px 24px 24px;
  box-shadow: none;
  text-align: left;
}
/* 기존 방법 */
.main3 .box ul li .tit {
  position: static;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 0;
}

.main3 .box ul li .tit img {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: 28px;
  display: block;
}

.main3 .box ul li .tit strong {
  display: block;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  color: #222;
}

.main3 .box ul li .txt {
  font-size: 15px;
  line-height: 1.25;
}

/* 기존 방법 */
.main4 { padding:20px 0; background-color: #eeeeee;}
.main4 .feature { margin-bottom: 80px; }
.main4 .feature ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:28px; }
/* .main4 .feature ul li { padding:50px 32px; border-radius:16px; border:2px solid #c6c6c6; } */
.main4 .feature ul li{
    padding: 40px 32px 120px;
    border-radius:16px;
    border:2px solid #c6c6c6;
    position:relative;
    min-height: 240px;
}
.main4 .feature ul li strong { font-size:32px; font-weight:600; }
.main4 .feature ul li p { font-size:20px; margin:8px 0 28px; }
.main4 .feature ul li i {
    position: absolute;
    left: 32px;
    bottom: 40px;
    width: 140px;
    height: 110px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
/* .main4 .feature ul li img { max-width:120px; } */
.main4 .feature ul li i img {
    max-width: 80px;
    height: auto;
}

.main4 .partner ul { display: flex; flex-wrap: wrap; text-align: center; gap:20px 0;}
.main4 .partner ul li { width:20%; }
.main4 .partner ul li:nth-child(1),
.main4 .partner ul li:nth-child(2),
.main4 .partner ul li:nth-child(3),
.main4 .partner ul li:nth-child(4) { width:25%; }

.main4 .partner { 
  display: flex; 
  flex-wrap: nowrap; 
  overflow: hidden;
  margin: 0;
}
    .main4 .partner::-webkit-scrollbar { display: none;}
    /* 기존 방법 */
    /* .main4 .partner ul { display: flex; flex-wrap: nowrap; overflow: hidden; flex-shrink: 0; animation: textLoop 30s linear infinite;} */
    .main4 .partner ul { display: flex; flex-wrap: nowrap; overflow: hidden; flex-shrink: 0; animation: textLoop 100s linear infinite; gap: 80px; padding-right: 80px; }
    .main4 .partner ul li { width:200px !important; flex-shrink: 0;}

/* 기존 방법 */
/* .main5 { padding:20px 0; background: url(../img/main/main5_bg.jpg) no-repeat 50% 50% / cover; overflow: hidden;} */
.main5 { position: relative; overflow: hidden; background: none; }
.main5 .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.main5 .inner { position: relative; z-index: 1; }

.main5 h2,
.main5 h3 { color:#fff; }

/* 추가 */
.main5 .review { position:relative; z-index:1; }

.main5 .review .list { display: flex; flex-wrap: nowrap;}
.main5 .review .item { padding:0 15px; height: 100%; width:100%;}
.main5 .review .item a { display: flex; flex-direction: column; justify-content: space-between; height: 100%; border-radius:10px; background-color: #eeeeee; padding:25px; transition: all 0.5s ease;}
.main5 .review .item a .tit { font-size:22px; font-weight:600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main5 .review .item a .txt { margin:15px 0 10px; font-size:15px; overflow: hidden;  text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.main5 .review .item a .cl { font-size:15px; }
.main5 .review .item a .btns { justify-content: flex-end;margin-top:15px;}
.main5 .review .item a .btns span { display: inline-flex; align-items: center; gap:10px; ; padding:5px 20px 8px;  border:2px solid var(--red); font-size:16px; ; transition: all 0.5s ease;;}
.main5 .review .item a .btns span path { stroke:var(--red);transition: all 0.5s ease;}
.main5 .review .item a:hover { transform: translateY(-20px);}
.main5 .review .item a:hover .tit { color:var(--red); }
.main5 .review .item a:hover .btns span { background-color: var(--red); color:#fff;;}
.main5 .review .item a:hover .btns span path { stroke:#fff; }
.main5 .review2 { padding-top:30px; }

.marquee-swiper .swiper-wrapper { transition-timing-function: linear !important; height:280px;  }
.marquee-swiper .swiper-slide {  width: 480px;   display: flex;  align-items: center;  justify-content: center;}

.main-foot { padding:80px 20px; background-color: #222222; color:#fff; text-align: center;}
.main-foot .t1 { font-size:30px; font-weight:600; }
.main-foot .t2 { font-size:16px;line-height: 1.3; margin:15px 0 40px; ;}
.main-foot .btns2 a { display:inline-block; padding:8px 50px 10px; background-color: #fff; font-size:18px; color:#222; font-weight:600;  transition: all 0.5s ease;}  
.main-foot .btns2 a:hover { background-color: var(--red); color:#fff;}


#fp-nav.fp-left { left: 90px; }
/* #fp-nav ul li .fp-tooltip { } */
#fp-nav ul li .fp-tooltip.fp-right { right:30px; color:#888; }
#fp-nav ul li:last-child { display: none; }
#fp-nav ul li a span:before { content: ''; position: absolute;left: -8px;right:-8px; top:-8px; bottom:-8px;border-radius:100%; background:rgba(135,135,135,0.15); opacity:0; transition: all 0.3s ease;}
#fp-nav ul li a.active span:before { opacity:1;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span { margin:0; }
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span { width:8px; height: 8px; }
#fp-nav ul li a span { width:8px; height: 8px; background: rgba(135,135,135,0.5); background: #888; transition: all 0.3s ease;opacity:0.5;  margin: 0 !important; }
#fp-nav ul li a.active span { opacity:1;}

.fp-viewing-page0 #fp-nav,
.fp-viewing-page5 #fp-nav { opacity:0; }
.fp-viewing-page2 #fp-nav ul li a span { background: #fff }
.fp-viewing-page2 #fp-nav ul li a.active span { background: #fff;}
.fp-viewing-page2 #fp-nav ul li a span:before {  background:rgba(255,255,255,0.15);}


/******************************************************************
    서브페이지
******************************************************************/
.sub-head { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color:#fff; background: url(../img/service/bg_head.jpg) no-repeat 50% 50% / cover; text-align: center; padding-left: 20px; padding-right:20px;;}
.sub-head .t1 { font-size:55px; font-weight:700; margin-bottom: 50px; ;}
.sub-head .t2 { font-size:23px; margin-bottom: 20px; ; }
.sub-head .t3 { font-size:23px; margin-bottom: 60px; color:#fff600; }
.sub-head .btns { display: flex; justify-content: center; gap:15px; }
.sub-head .btns a { width:200px; line-height: 45px; border:2px solid #fff; font-size:18px; color:#fff; transition: all 0.5s ease;}
.sub-head .btns a:hover { background-color: var(--red); border-color:var(--red);}

.h2 { text-align: center; font-size:22px; font-weight:700;margin-bottom: 40px;}
.h3 { text-align: center; font-size:50px; font-weight:700;margin-bottom: 60px;}
.desc1 {text-align: center; font-size:20px; margin-bottom: 70px; }

.service1 { padding:20px 0;background: linear-gradient(-45deg, #c6c6c6, #fff, #d3d3d3, #f2f2f2);background-size: 400% 400%;	animation: gradient 15s ease infinite;}
@keyframes gradient {
	0% {background-position: 0% 50%;	}
	50% {		background-position: 100% 50%;	}
	100% {		background-position: 0% 50%;	}
}
.service1 .swiper-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:60px; padding:0 5%;  box-sizing: border-box;}
.service1 .swiper-wrapper .swiper-slide { background-color: #eee; border-radius:10px; overflow: hidden;}
.service1 .swiper-wrapper .swiper-slide dl { padding:50px 20px; text-align: center; ;}
.service1 .swiper-wrapper .swiper-slide dl dt{ font-size:34px; font-weight:700; margin-bottom: 20px; ;}
.service1 .swiper-wrapper .swiper-slide dl dd { font-size:18px; }
.service2 { padding:20px 0; background-color: #f4f4f4; ;}
.service2 .list1 ul { display:grid;grid-template-columns: repeat(3, minmax(0, 1fr)); gap:60px; }
.service2 .list1 ul li { padding:20px; border:1px solid #000; border-radius:8px; display: flex;; align-items: center;;}
.service2 .list1 ul li i { flex-shrink: 0; margin-right:15px;}
.service2 .list1 ul li i img { width:110px; }
.service2 .list1 ul li dl dt { font-size:30px; font-weight:700; margin-bottom: 8px;}
.service2 .list1 ul li dl dd { font-size:18px; }
.service3 { padding:20px 0; }
.service3 .list2 ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:60px; }
.service3 .list2 ul li img { max-width:110px; }
.service3 .list2 ul li dl dt { font-size:34px; font-weight:700; margin-bottom: 10px; margin-top:10px; }
.service3 .list2 ul li dl dd { font-size:18px; }
.service4 { padding:20px 0;background: linear-gradient(-45deg, #c6c6c6, #fff, #d3d3d3, #f2f2f2);background-size: 400% 400%;	animation: gradient 15s ease infinite; }
.service4 .icons { display: flex; justify-content: center ; text-align: center; gap:50px; margin-bottom: 80px;}
.service4 .icons i { width:100px; height: 100px; display: flex; align-items: center; ;justify-content: center; margin:0 auto;}
.service4 .icons p { margin-top:20px; font-size:30px; font-weight:700; }
.service4 .banner { display: flex; gap:40px; }
.service4 .banner .img { position: relative;}
.service4 .banner .img .text { position: absolute; left:30px; color:#fff; padding-right:20px;}
.service4 .banner .img .text .t1 { font-size:30px; font-weight:700; margin-bottom: 20px; }
.service4 .banner .img .text .t2 { font-size:18px; margin-bottom: 20px;; }
.service4 .banner .img .text .t3 { font-size:18px; }
.service4 .banner .img:nth-child(1) .text { bottom:70px; }
.service4 .banner .img:nth-child(2) .text { top:70px; }
.service5 { padding:20px 0;  text-align: center; ;}
.service5 .btns { display: flex; justify-content: center; gap:20px;  margin-bottom: 70px;}
.service5 .btns a { flex:0 1 1; display: flex; align-items: center; gap:10px; line-height: 70px; font-size:22px; font-weight:700; padding:0 50px; background-color: #9d9d9d;; color:#000; }
.service5 .btns a svg { width:30px; height: auto; transition: all 0.5s ease;}
.service5 .btns a:hover svg { transform: translateX(10px);}
.service5 .btns a:nth-child(2) { background-color: #5b5b5b; color:#9d9d9d;}
.service5 .btns a:nth-child(2) path { stroke:#9d9d9d}
.service5 .btns a:nth-child(3) { background-color: #222; color:#c8c8c8;}
.service5 .btns a:nth-child(3) path { stroke:#c8c8c8}
.service5 .box { display: flex; justify-content: space-between; align-items: center;}
.service5 .box .text { text-align: left; flex-shrink: 0;}
.service5 .box .text .t1 { font-size:60px; font-weight:700; color:#000; }
.service5 .box .text .t2 { font-size:18px; margin:20px 0 40px; }
.service5 .box .text .t3 a { display: inline-block; padding:8px 50px 10px; background-color: var(--red); font-size:18px; font-weight:700; color:#fff; transition: all 0.5s ease;}
.service5 .box .text .t3 a:hover { background-color: #000;}
.service5 .box .apps a { display: block; margin-bottom: 15px;}
.service5 .box .apps a img { width:220px; }



.mobile { display: none; }


@media all and (max-width:1170px) {
    header h1 a { width:180px; }
    header nav ul li a { font-size:15px; padding:0 10px; }
    header .lang .btn-open { width:145px; }
    header .lang a { font-size:13px; }
    header .lang a img { display: none;}
    header .right { gap:10px; }
}


@media all and (max-width:1024px) {
	
	.pc { display: none; }
	.mobile { display: inherit; }

    .main2 h2 { font-size:20px; margin-bottom: 15px; }
    .main h2 { margin-bottom: 15px;}
    .main h3 { font-size:30px; margin-bottom: 30px;}
    .main .desc { font-size:18px; margin-bottom: 20px;;}
	  .main2 .box .text dl dt { font-size:20px; line-height: 1.35;margin-bottom: 10px;}
    .main2 .box .text dl dd { font-size:15px;}
    .main .btns a { width:160px; height: 40px; font-size:15px; ;}
    .main3 .box { padding:20px 40px;}
    .main4 .feature ul {     grid-template-columns: repeat(2, minmax(0, 1fr));}
    .main4 .feature ul li { padding:20px; }
    .main4 .feature ul li img { max-width:100px; }
    .sub-head .t1 { font-size:40px; margin-bottom: 30px;}
    .sub-head .t2 { font-size:18px; }
    .sub-head .t3 { font-size:18px; }
    .sub-head .btns a { width:150px; line-height: 40px; font-size:15px; ;}
    .h2 { font-size:20px; margin-bottom: 25px;}
    .h3 { font-size:30px; margin-bottom: 35px;;}
    .desc1 { font-size:15px; margin-bottom: 40px;}
    .service1 .swiper-wrapper { padding:0; gap:20px; }
    .service1 .swiper-wrapper .swiper-slide dl { padding:30px 15px; }
    .service1 .swiper-wrapper .swiper-slide dl dt { font-size:24px; margin-bottom: 12px;}
    .service1 .swiper-wrapper .swiper-slide dl dd { font-size:15px; }
    .service1 .swiper-wrapper .swiper-slide dl dd br { display: none;}
    .service2 .list1 ul { display: block;}
    .service2 .list1 ul li + li { margin-top:15px;}
    .service2 .list1 ul li i img { max-width:90px; }
    .service2 .list1 ul li dl dt { font-size:22px; }
    .service2 .list1 ul li dl dd { font-size:16px; }
    .service3 .list2 ul { gap:20px; }
    .service3 .list2 ul li img { max-width:90px; }
    .service3 .list2 ul li dl dt { font-size:25px; }
    .service3 .list2 ul li dl dd { font-size:16px; }
    .service4 .icons i { width:70px; height:70px; }
    .service4 .icons p { font-size:20px; margin-top:15px; }
	.service4 .banner { display: block;}
    .service4 .banner .img + .img { margin-top:20px; }
    .service4 .banner .img img { width:100%; height:auto; aspect-ratio: 16/9; object-fit: cover;}
    .service4 .banner .img .text { left:20px; }
    .service4 .banner .img:nth-child(1) .text { bottom:inherit; top:20px; }
    .service4 .banner .img:nth-child(2) .text { top:20px; }
    .service5 .box .text .t1 { font-size:40px; }
    .service5 .box .text .t2 { font-size:16px; margin:10px 0 30px; }
    .service5 .btns a { font-size:15px; line-height:50px; padding:0 20px; }
    .main-foot .t1 { font-size:40px; }
    .main-foot .t2 { font-size:20px; }
    .main-foot .btns2 a { font-size:16px; }
}

@media all and (max-width:768px) {
    header { height:50px; }
    header h1 a { width:130px;  height: 50px;}
    .main1 .img img { max-width:80vw; }
    header nav { display: none;}
    header .lang { display: none;}
    header .btn-m  { display: block;}
    .main1 { margin-top:50px; height:calc(100vh - 50px); height:calc(100dvh - 50px);}
    .main1 .subj .t1 { font-size:24px; }
    .main1 .subj .t2 {font-size:15px; }
    .main-tabs { padding:10px; gap:5px;  top:50px; }
    .main-tabs a { flex:1; width:auto; font-size:14px; letter-spacing: -1px; }
    .main2, .main3, .main4, .main5 { padding:60px 0; }
    .main h2 { font-size:16px; }
    .main h3 { font-size:25px; margin-bottom: 20px;}
    .main .desc { font-size:14px; margin-bottom: 12px;}
    .main2 .box { flex-direction: column; gap:25px;}
    .main2 .box .img { width:auto}
    .main2 .box .text dl dt { font-size:18px; line-height:1.4; margin-bottom:8px; }
    .main2 .box .text dl dd { font-size:14px; }
    .main2 .box .text dl + dl { margin-top:25px;}
    .main3 .box { padding:20px; overflow: hidden;}
    .main3 .box .img { margin:0 -40px;}
    .main3 .box ul { display: block;}
    .main3 .box ul li { padding:20px 20px 20px 40px; }
    .main3 .box ul li + li { margin-top:10px;}
    .main3 .box ul li .tit { font-size:17px; gap:10px; margin-bottom:14px; }
    .main3 .box ul li .tit img { width:24px; height:auto; left:-25px;}
    .main3 .box ul li .tit strong { font-size:18px; line-height:1.45; }
    .main3 .box ul li .txt { font-size:14px; }
    .main3 .box ul li .txt br { display: none;}
    .main4 .feature ul { gap:10px; }
    .main4 .feature ul li { padding:15px; }
    .main4 .feature ul li strong { font-size:22px; }
    .main4 .feature ul li p { font-size:16px; margin:5px 0 20px; }
    .main4 .feature ul li img { max-width:85px; }
    
    .review1 .marquee-swiper .swiper-slide,
    .review2 .marquee-swiper .swiper-slide { width:auto; }
    .review1 .marquee-swiper .swiper-wrapper,
    .review2 .marquee-swiper .swiper-wrapper { height:auto; transition-timing-function: ease !important; }
    .main5 .review .item { padding:0 5px;}
    .main5 .review .item a { padding:15px; }
    .main5 .review .item a .tit { font-size:18px; }
    .main5 .review .item a .txt { margin:10px 0 7px; font-size:14px; }
    .main5 .review .item a .cl { font-size:14px; }
    .main5 .review .item a .btns span { font-size:14px; gap:5px; }
    .main5 .review .item a .btns svg { width:14px; height: auto;}
    .main5 .review .swiper-pagination { position: static; margin-top:10px;}
    .main5 .review .swiper-pagination .swiper-pagination-bullet { width:10px; height:10px; opacity:0.4; background:#fff; transition: all 0.5s ease; }
    .main5 .review .swiper-pagination .swiper-pagination-bullet-active { opacity:1; background:#fff; }
    .main-foot .t1 { font-size:30px; }
    .main-foot .t2 { font-size:16px; margin-bottom: 30px; ;}
    .main-foot .btns2 a { font-size:15px; }
    footer { padding:40px 0;}
    footer .inner { display: block;}
    footer .left { margin-bottom: 20px;;}
    footer .left .logo img { width:110px; }
    footer .left .addr { font-size:12px; }
    footer .left .menu { margin-bottom: 20px;;}
    footer .left .menu a { font-size:13px; margin-right:10px;}
    footer .nice-select { width:150px; padding-left:15px; }
    .btn-top { width:40px; height: 40px;;}

    .sub-head .t1 { font-size:32px; margin-bottom: 20px;}
    .sub-head .t2 { font-size:16px; }
    .sub-head .t2 br { display: none;}
    .sub-head .t3 { font-size:16px; }
    .sub-head .btns a { width:130px; }
    .service1,
    .service2,
    .service3,
    .service4,
    .service5 { padding:60px 0;}
    .service1 .swiper-container { margin:0 -20px;}
    .service1 .item { height: 100%;}
    .service1 .swiper-wrapper { display:flex; padding:0; gap:0; }
    .service1 .swiper-wrapper .swiper-slide { width:auto; flex-shrink:0; height: auto; }
    .service1 .swiper-wrapper .swiper-slide dl { padding:20px 15px; }
    .service1 .swiper-wrapper .swiper-slide dl dt { font-size:20px; margin-bottom: 10px;}
    .service1 .swiper-wrapper .swiper-slide dl dd { font-size:14px; }
    .service1 .swiper-wrapper .swiper-slide img { width:100%; }
    .service1 .swiper-pagination { position: static; margin-top:15px;}
    .service1 .swiper-pagination .swiper-pagination-bullet { width:10px; height:10px; opacity:0.3; background:#000; transition: all 0.5s ease; }
    .service1 .swiper-pagination .swiper-pagination-bullet-active { opacity:1; background:var(--red); }
    .h2 { font-size:16px; }
    .h3 { font-size:25px; }
    .desc1 { font-size:14px; margin-bottom: 25px;}
    .desc1 br { display: none;}
    .service2 .list1 ul li { padding:15px; }
    .service2 .list1 ul li i { margin-right:10px; }
    .service2 .list1 ul li i img { max-width:80px; }
    .service2 .list1 ul li dl dt { font-size:18px; }
    .service2 .list1 ul li dl dd { font-size:14px; }
    .service3 .list2 ul { display: block;}
    .service3 .list2 ul li + li { margin-top:15px; }
    .service3 .list2 ul li img { max-width:70px; }
    .service3 .list2 ul li dl dt { font-size:20px; }
    .service3 .list2 ul li dl dd { font-size:14px; }
    .service4 .icons { gap:20px; margin-bottom: 40px; }
    .service4 .icons i { width:50px; height:50px; }
    .service4 .icons p { font-size:14px; margin-top:10px;}
    .service4 .banner .img .text .t1 { font-size:20px; margin-bottom: 10px;}
    .service4 .banner .img .text .t2 { font-size:13px; margin-bottom: 10px;}
    .service4 .banner .img .text .t3 { font-size:13px; }
    .service5 .btns { margin-bottom: 40px; ;}
    .service5 .btns { display: block;;}
    .service5 .btns a { display: flex;justify-content: space-between; align-items: center; width:80%; margin:0 auto 10px; line-height: 40px;}
    .service5 .btns a svg { width:20px; height: auto; }
    .service5 .box { display: block;;}
    .service5 .box .text { text-align: center; margin-bottom: 20px;;}
    .service5 .box .text .t1 { font-size:30px; }
    .service5 .box .text .t2 { font-size:14px; margin:10px 0 20px; }
    .service5 .box .text .t3 a { display: inline-block; padding:5px 20px 7px; font-size:14px; }
    .service5 .box .apps { display: flex; justify-content: center; gap:10px; margin-bottom: 20px; margin-top:20px}
    .service5 .box .apps a { width:130px; }
}

@keyframes textLoop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

/* Fullpage 네비 전역 숨김 */
#fp-nav,
.fp-slidesNav{
  display: none !important;
}

/* ======================================================
   FOOTER GLOBAL
====================================================== */
footer{
  position: relative;
}

/* ======================================================
   FOOTER PC LAYOUT
====================================================== */
@media all and (min-width: 769px){

  footer{
    padding: 40px 0 28px;
  }

  footer:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:132px;
    height:1px;
    background:rgba(144,145,145,0.2);
  }

  footer .inner{
    position:relative;
    display:block;
  }

  footer .left,
  footer .right{
    width:100%;
  }

  footer .left{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo family"
    "addr addr"
    "menu copy";
  row-gap: 22px;
  column-gap: 40px;
  align-items:center;
  padding-bottom: 18px;
}

  footer .left .logo{
    grid-area: logo;
    margin-bottom: 0;
  }

  footer .left .logo img{
    width: 200px;
    max-width: 100%;
    height: auto;
    display: block;
  }

  footer .left .addr{
    grid-area: addr;
    font-size: 14px;
    line-height: 1.4;
    color:#909191;
  }

  footer .left .menu{
    grid-area: menu;
    margin: 40px 0 0;
    display:flex;
    flex-wrap:wrap;
    gap: 0 40px;
    align-items:center;
  }

  footer .left .menu a{
    font-size: 14px;
    margin-right: 0;
    color:#909191;
    line-height: 1.3;
  }

  footer .left .copy{
    grid-area: copy;
    text-align:right;
    font-size: 13px;
    color:#909191;
    align-self:end;
    white-space: nowrap;
    margin-top: 14px;
  }

  footer .right{
    position:absolute;
    right:20px;
    top:0;
    width:auto;
  }

  footer .nice-select,
  footer select{
    min-width: 200px;
    height: 58px;
    line-height: 56px;
    border-radius: 12px;
    font-size: 16px;
  }
}

/* ======================================================
   FOOTER MOBILE TUNE
====================================================== */
@media all and (max-width:768px){

  footer{
    padding:36px 0 34px;
  }

  footer:before{
    display:none;
  }

  footer .inner{
    display:block;
  }

  footer .left{
    margin-bottom:24px;
  }

  footer .left .logo{
    margin-bottom:18px;
    text-align:center;
  }

  footer .left .logo img{
    width:120px;
    height:auto;
  }

  footer .left .addr{
    font-size:13px;
    line-height:1.7;
    text-align:center;
    word-break:keep-all;
  }

  footer .left .menu{
    margin:18px 0 18px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 14px;
  }

  footer .left .menu a{
    font-size:14px;
    margin-right:0;
    line-height:1.5;
    padding:2px 0;
  }

  footer .left .copy{
    font-size:12px;
    text-align:center;
    line-height:1.5;
  }

  footer .right{
    display:flex;
    justify-content:center;
  }

  footer .nice-select,
  footer select{
    width:100%;
    max-width:160px;
    min-width:0;
    height:42px;
    line-height:40px;
    font-size:13px;
    border-radius:8px;
  }
}

/* ======================================================
   HEADER SERVICE SHORTCUT header 안에 들어가는 작은 버전
====================================================== */
.service-shortcut{
  position: relative;
  flex-shrink: 0;
}

.service-shortcut .btn-open{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 240px;
  height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid #eeeeee;
}

.service-shortcut .btn-open .ico{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
}

.service-shortcut .btn-open .txt{
  flex: 1 1 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.service-shortcut .btn-open .arr{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  transition: transform 0.25s ease;
}

.service-shortcut.active .btn-open .arr{
  transform: rotate(180deg);
}

.service-shortcut ul{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  padding: 14px 0;
  border-radius: 18px;
  background: #f7f7f7;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  z-index: 2000;
}

.service-shortcut ul li + li{
  margin-top: 4px;
}

.service-shortcut ul li a{
  display: block;
  padding: 10px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: #111;
  line-height: 1.4;
}

.service-shortcut ul li a:hover{
  color: var(--red);
}

header .right{
  gap: 16px;
}

@media all and (max-width: 1170px){
  .service-shortcut .btn-open{
    min-width: 200px;
    height: 48px;
    padding: 0 16px;
    border-radius: 14px;
  }

  .service-shortcut .btn-open .txt{
    font-size: 14px;
  }

  .service-shortcut ul{
    min-width: 200px;
  }

  .service-shortcut ul li a{
    font-size: 14px;
  }
}

@media all and (max-width: 768px){
  .service-shortcut{
    display: none;
  }
}