@charset "utf-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

* { 
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

html { font-size: calc(0.32vw + 3.85px);}

/* 초기화 */
html { width:100%; height:100%;}
body {margin:0;padding:0;font-family:'Pretendard'; background:#fff; -webkit-text-size-adjust: 100%; letter-spacing:-0.5px; width:100%; height:100%;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em; font-family:'Pretendard';}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
em, address {font-style: normal;}
ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999rem;overflow:hidden;}
label, input, button, select, img {vertical-align:middle;font-size:1.4rem;}
input, button {margin:0;padding:0;font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;font-size:1.4rem;}
input[type="submit"] {cursor:pointer}
button {cursor:pointer;  -webkit-appearance: none;}
img {max-width:100%; height:auto;}
textarea, select {font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;font-size:1.4rem;}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.2rem}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  outline:none;
}

input[type=text],input[type=password], textarea {outline:none; -webkit-appearance: none;}


/* common module */
h1, .h1 { font-size: 6.4rem;}
h2, .h2 { font-size: 6.0rem;}
h3, .h3 { font-size: 5.6rem;}
h4, .h4 { font-size: 4.8rem;}

.ft-16 { font-size: 1.6rem;}
.ft-18 { font-size: 1.8rem;}
.ft-20 { font-size: 2.0rem;}
.ft-22 { font-size: 2.2rem;}
.ft-24 { font-size: 2.4rem;}
.ft-26 { font-size: 2.6rem;}
.ft-32 { font-size: 3.2rem;}
.ft-36 { font-size: 3.6rem;}

.ft-bold { font-weight: 700;}
.ft-nomal { font-weight: 400;}
.ft-light { font-weight: 200;}

.txt-stoke { text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}

.fc-wh { color: #fff;}
.fc-bk { color: #000;}
.fc-dk { color: #444;}
.fc-midgr { color: #666;}
.fc-gr { color: #999;}
.fc-ligr { color: #ccc;}

.flx-c { display: flex; justify-content: center; align-items: center;}
.flx-st { display: flex; justify-content: flex-start; align-items: center;}
.flx-bt { display: flex; justify-content: space-between; align-items: center;}
.flx-fs { display: flex; justify-content: flex-start; align-items: flex-start;}
.flx-ed { display: flex; justify-content: flex-end; align-items: center;}
.flx-ar { display: flex; justify-content: space-around; align-items: center;}
.flx-ev { display: flex; justify-content: space-evenly; align-items: center;}

.flx-row { flex-flow: row wrap;}
.flx-row-rv { flex-flow: row-reverse wrap;}
.flx-row-nw { flex-flow: row nowrap;}

.flx-colm { flex-flow: column wrap;}
.flx-colm-rv { flex-flow: column-reverse wrap;}
.flx-colm-nw { flex-flow: column nowrap;}

.flx-vc {display: flex; align-items: center;}
.flx-hc {display: flex; justify-content: center; }

.flx-inline { display: inline-flex;}
.flx-glow { flex-grow: 0;}

.img-s1 {background-size: cover;}

.w144 { width: 144rem;}
.mg-t-32 { margin-top: 3.2rem;}
.mg-t-05{ margin-top: .5rem;}


/* custom */
.fc-pir { color: #0bbcb7;}

.btn { width: 18vh; height: 4.8vh; border-radius: 21rem;}
.btn-64 { width: 32vh; height: 5.6vh; border-radius: 30rem;}

.colr-pri { background-color: #0bbcb7; color: #fff;}
.colr-bk { background-color: #000; color: #fff;}



/* 스크롤 다운 */
.scolldw-ic{ display: none;}

.scolldw-ic { position: fixed; right: 5rem; bottom: 5rem; width: 50px; height: 50px; cursor: pointer;}


.scolldw-ic a{ width: 100%; height: 100%; position: relative;}


.scolldw-ic .ic-arrow{ width: 100%; height: 100%; background: url('../img/ic-arrow.svg') no-repeat center center; text-indent: -9999px; transform: translate(0, 0) rotate(90deg); }

.scolldw-ic .dot{ position: absolute;
	content: " "; bottom: 0; opacity: .5;
	width: 100%; height: 100%; 
	background : #fff; z-index: -1;
	transition: all .5s;
}

.scolldw-ic a:hover .dot{ border-radius: 50%; opacity: 1; bottom: -15px;}

.scolldw-ic a:hover .ic-arrow{ animation: scrDown linear 1s infinite;  }


@keyframes scrDown{
	0%{
		transform: translate(0, 0) rotate(90deg);
	}
	50%{
		transform: translate(0, 10px) rotate(90deg);
	}
	100%{
		transform: translate(0, 0) rotate(90deg);
	}
}




/* 페이지 번호 && 버튼 */
.indexWrap{ position: fixed; left: 5rem; bottom: 5rem; transform: translateY(-50%); z-index: 10; color: #fff; }
.index-st { font-size: 3.2rem;}
.currentIdx { font-weight: 600;}
.panelsNum { font-weight: 200;}

.paginate-btn { width: 3.2rem; height: 3.2rem; border: solid 1px #fff; margin-top: 1rem; background-color: rgb(255,255,255,0);}
.paginate-btn span{ width: 1.4rem; height:1.4rem; position: relative;}
.paginate-btn i{ position: absolute; top: 0; left: 0; border-top: 2px solid #fff; border-right: 2px solid #fff; width: 100%; height: 100%; }
.paginate-btn.up { margin-right: 2px;}
.paginate-btn.up i { transform: translate(0, 0px) rotate(315deg); top: .4rem;}
.paginate-btn.down i {transform: translate(0, 0) rotate(135deg); top: -0.4rem;}
.paginate-btn.up i:hover { transform: translate(0, -2px) rotate(315deg); top: .4rem;}
.paginate-btn.down i:hover { transform: translate(0, 2px) rotate(135deg); top: -0.4rem;}

.change-bk.indexWrap{ color: #000;}
.change-bk .paginate-btn, .change-bk .paginate-btn i{border-color: #000}


/* pagination */
.pagination { position: fixed; right: 2rem; top: 50%; transform: translateY(-50%); z-index: 10; }

@media ( max-width:1000px ) {
    .pagination { top:auto; right:auto; left:50%; bottom:4rem; transform: translateY(0) translateX(-50%);}
    .pagination > li { float:left; }
	.pagination a { color: #fff;}

	.change-bk.pagination a { color: #000;}
	
}

.pagination a { display: block; position: relative; padding: 2rem; }
.pagination a.active:after { box-shadow: inset 0 0 0 5px; }
.pagination a .hover-text { position: absolute; right: 2rem; top: 50%; transform:translateY(-50%); opacity: 0; transition: opacity 0.5s ease; padding-right: 1.5rem; white-space:nowrap; }
.pagination a:hover .hover-text { opacity: 0; }
.pagination a:after { content: ""; transition: box-shadow 0.5s ease; width: 10px; height: 10px; display: block; border: 1px solid; border-radius: 50%; position: absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }

.pagination a { color: #fff;}

.change-bk.pagination a { color: #000;}


/* body */
nav { height: 8vh; }

/* header */
.p-hd-min { width: 100%; margin: 0 10rem; }
.hd-logo { width: 18vh; height: 7.2vh; background: url('../img/logo_small.png') no-repeat top left; text-indent: -9999px; background-size: contain; margin-top: 27px; }
#p-gnb {position:fixed; top:0; left:0; right:0; z-index:99; }

.p-hd-min button{ color: #fff; border: 2px solid #fff; 
	background: linear-gradient(90deg, rgb(11, 188, 183, 0), rgb(11, 188, 183, 0) 50%, rgb(30, 202, 211, 0) 0px, rgb(30, 202, 211, 0)) 100% 100% / 200% 100% no-repeat;}
.p-hd-min button:hover{ background: linear-gradient(90deg, rgb(11, 188, 183), rgb(11, 188, 183) 50%, rgb(30, 202, 211, 0) 0px, rgb(30, 202, 211, 0))  0% 100% / 200% 100% no-repeat; transition: all 0.3s ease-out 0s;}

/*.change-hd .hd-logo{background: url('../img/logo_small.png') no-repeat top left; }*/
.change-hd.p-hd{ }
.change-hd .p-hd-min button{ color: #4EA1EC; border-color: #4EA1EC;}
.change-hd .p-hd-min button:hover{ color: #fff;}


/* panel */
.panel { padding-top: 5vh;}
.sec-01 { background: 0;}
.sec-02 { background: #eee;}
.sec-03 { background: 0;}
.sec-04 { background: #eee;}
.sec-05 { background: 0; }
.sec-06 { background: 0;}

.s1-wrap, .s-wrap { margin-top: -12vh;}
.sec-title-wrap { margin-left: 10vw; }
.sec-title-txt { line-height: 8rem; font-weight: 100;}
.sec-m-img { background-color: darkslategrey; width: 50%; height:auto;}






/* section 01 */
.sec-01 { background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/img-main-4.jpg) no-repeat top left; background-size: cover; }
.s1-wrap{ width: 100%; height: auto; position: relative;}
.sec-01 h1 {font-family: 'Pretendard'; line-height: 12vh; position: absolute; top: -5rem;  left: 10rem; font-size: 8vh;}
.copyrigt-2{ font-weight: 400; color: #fff;}
.copyrigt-2 p{ font-size: 3.6vh;}

.text-effect{ font-size: 4.8vh; margin: 2vh 0; overflow: hidden; font-weight: 700;}
.text-effect::before { content: "["; padding: 0 5rem; font-weight: 800;}
.text-effect::after { content: "]"; padding: 0 5rem; font-weight: 800;}
	
.txt-slide{ height: 6vh; width: 32rem;}
.txt-slide .sl-txt{ height: auto; margin-bottom: 2rem;}
.sl-txt{ text-align: center;}


@keyframes shrink {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

.slick-current{ animation: shrink1 linear 1s; -webkit-animation: shrink1 linear 1s;}
.slick-current + .slick-slide { animation: grow1 linear 1s; animation-duration: 1s; -webkit- animation: grow1 linear 1s; animation-duration: 1s; }


/* section 02 */
.btn-go-cta{ margin-top: 6rem; position: relative; width: 26vh; height: 5.6vh; border-radius: 30px; }
.btn-go-cta a{ z-index: 5; height: 100%; width: 100%; font-size: 2vh; }
.btn-go-cta > a > .ic-arrow { width: 5vh; background: url('../img/ic-arrow.svg') no-repeat center center; text-indent: -9999px; background-size: 60%; }
.btn-deco { height: 100%; width: 100%; position: absolute; left: 0; text-indent: -9999px;}
.btn-deco::before { background-color: #19bdb2; width: 5.6vh; height: 5.6vh;  content: ""; border-radius: 2.8vh; transition: all .5s ease 0s; position: absolute; left: 0; opacity: .2;}

.btn-go-cta:hover .btn-deco::before{ width: 100%;}
.btn-go-cta:hover .ic-arrow { animation: headShake 3s linear infinite; animation-delay: .3s; -webkit-animation: headShake 3s linear infinite; -webkit-animation-delay: .3s }


/* section 03, 04 */
.business-artcle { margin-top:5rem;}
.business-artcle .bu-caption { color: #999; margin-right: 1rem;}
.business-artcle .bu-subject { text-transform: uppercase;}
.bu-list-wrap { margin-top: 2rem;}
.bu-list-wrap li {height: 8vh; margin-top: 1.5vh;}
.bu-list-wrap li > div > p:last-child { margin-top: .5rem; color: #666;}
.bu-ic{ width: 5.6rem; height: 5.6rem; margin-right: 2rem;  background-color: red; text-indent: -9999px;}
.bu-ic-mk {  background: url('../img/ic-bu-marketing.svg') no-repeat top left; background-size: contain;}
.bu-ic-bl {  background: url('../img/ic-bu-branding.svg') no-repeat top left; background-size: contain;}
.bu-ic-ad {  background: url('../img/ic-bu-ad.svg') no-repeat top left; background-size: contain;}
.bu-ic-wb {  background: url('../img/ic-bu-web.svg') no-repeat top left; background-size: contain;}
.bu-ic-pg {  background: url('../img/ic-bu-program.svg') no-repeat top left; background-size: contain;}


/* section 05 */
.s5-wrap{ width: 100%;}
.s5-wrap h4 { margin-right: 40rem;}
.s5-txt{ line-height: 4.8rem;}

.bl-work-wrap { position: relative; margin: 5rem 0 0 10vw; height: auto;}
.bl-w-filter{ margin-bottom: 3rem;}
.bl-w-filter span{ margin-right: 1rem; flex-grow: 0; padding: .5rem 2rem; cursor: pointer; }
.active-fil{ color: #1ecad3; font-weight: 600; border-bottom: 2px solid #1ecad3; }

.bl-box{ width: 100%; height: 50rem; }
.bl-box .item{ width: 62rem; height:auto; margin-right: 4rem; cursor: pointer;} 
.bl-box{ display: flex;}


.slider {width: 100%; list-style: none; position: relative; overflow-x: auto; overflow-y: hidden; transition: all 0.2s; transform: scale(1); will-change: transform; user-select: none; cursor: pointer; display: grid; grid-auto-flow: column; grid-column-gap: var(--items-gap); justify-content: start; white-space: nowrap; padding: 0; }

.slider::before, .slider::after { content: ""; display: block; min-width: 0.01em; }

.slider.active .item{ background: rgba(255, 255, 255, 0.3); cursor: grabbing; cursor: -webkit-grabbing; transform: scale(1.02);
}

.slider img {
	pointer-events: none;
  }



.item-img-box{ width: 100%; aspect-ratio: 16 / 9; background: url('../img/logo.png') no-repeat center center; background-size: 25%; background-color: lightgray;} 
.bl-box img{ display: block; object-fit: cover;}

.item-txt{ background-color: #fff;  height: auto; padding: 2rem 0;}
.item-cate{ margin-right: 2rem; font-size: 1.8vh; color: #333;}
.item-desc { }
.it-d-subject { font-size: 2.6vh; color: #000; margin-bottom: 1rem; text-align: left; font-weight: 600;}
.it-d-caption { font-size: 1.8vh; color: #666; text-align: left;}







/* section 06 */
.sec-06{background: linear-gradient(to top, #1ecad3, #0088b6);}
.s6-wrap{ width: 100%; background: url('../img/logo-symbol.svg') no-repeat -10% center; }
.s6-wrap .sec-title-wrap{ margin-top: -25rem;}
.s6-wrap .sec-title-wrap p { margin-top: 5rem;}
.artice-right { width: 65%;}

/* form style */
.input-box input, .ip-label, .ta-label, .chk-box .chk-label, .btn-sumit{ font-size: 2vh;}

.form-wrap { width: 80rem;  padding: 5rem;}
.input-box { border-bottom: 1px solid #fff; color: #fff; height: 5.6vh; position: relative; margin-bottom: 2rem; }
.input-box input { width: 100%; height: 100%; border: none; outline: none; background: 0, 0;  padding-left: 10vh; color: #fff; }
.ip-label { position: absolute; top: 25%; left: 0; font-weight: 600; }
.text-box{ width: 100%; height: 20vh; background: rgb(225,255,255,.2); border: 1px solid #fff; position: relative;}
.text-box textarea{ width: 100%; height: 100%; padding: 6rem 2rem 2rem; background: 0, 0; border: none; font-size: 1.8vh; color: #fff;  resize: none; }
.ta-label{ position: absolute; top: 2rem; left: 2rem; font-weight: 600; color: #fff;}

.chk-box{ padding: 2rem 0; color: #fff; position: relative;}
.chk-box .chk-label{ margin-left: 1rem; font-weight: 600; cursor: pointer;}
.chk-box .chk-label a{ color: #fff; text-decoration: underline;}

.input-chk { width: 2.4vh; height: 2.4vh; position: relative; }
.input-chk input { display: none; }
.input-chk input:checked + .inp-chk-box:after { top: 0;  }
.input-chk input:checked + .inp-chk-box { background: rgb(255,255,255,1); }

.inp-chk-box { width: 100%; height: 100%; transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1); border: 2px solid #fff; background: rgb(255,255,255,.4); position: relative; overflow: hidden; cursor: pointer; border-radius: 3px; }
.input-chk .inp-chk-box:after { width: 50%; height: 30%; content: ''; position: absolute; border-left: 2px solid; border-bottom: 2px solid; border-color: #0bbcb7; transform: rotate(-45deg) translate3d(0, 0, 0); transform-origin: center center; transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1); left: 0; right: 0; top: 200%; bottom: 5%; margin: auto; }

.form-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem; /* 인풋 사이 여백 */
}

/* 기존 input-box에 너비 추가 */
.input-box {
  width: calc(50% - 1rem); /* 두 개씩 정렬, gap 고려 */
  box-sizing: border-box;
}

.input-box.full-width {
  width: 100%;
}

.input-box.full-width input {
  padding-left: 20vh;
}

/* 예외 항목은 전체 너비 */
.text-box,
.chk-box,
.form-btn {
  width: 100%;
}

.input-box select {
  width: 100%;
  height: 100%;
  background: 0 0;
  padding-left: 10vh; /* 기존 input 스타일에 맞춘 패딩 */
  color: #fff;
  border: none;
  outline: none;
  font-size: 1.8vh; /* 글자 크기 조정 */
}

.input-box select:focus {
  border: none;
  outline: none;
}

/* Option 스타일 */
.input-box select option {
  
  background: #fff; /* 어두운 배경 */
  color: #000; /* 흰색 텍스트 */
  padding: 1rem; /* 패딩 추가 */
  font-size: 1.8vh; /* 텍스트 크기 맞추기 */
}

/* 선택된 option 스타일 */
.input-box select option:checked {
  
  color: #000; /* 선택된 항목 글자색 */
}

/* 반응형: 모바일에선 한 줄에 하나씩 */
@media screen and (max-width: 768px) {
  .input-box.full-width {
    width: 100%;
  }
}

/* IE10 이상을 위한 css */
input::placeholder, textarea::placeholder { color: #fff; opacity: .9; font-size: 2vh; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #fff; opacity: .9; font-size: 2vh;  }
/* IE9 이하를 위한 css */
.placeholder , .textarea { color: #fff; opacity: .9; font-size: 2rem; }
/* IE */
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #fff; opacity: .9; font-size: 2vh;  }

.btn-sumit{ border: 2px solid #fff; width: 20vh; height: 5.6vh; background: none; border-radius: 4rem; color: #fff; padding-left: 3.5rem;}

.btn-sumit .ic-arrow { width: 5vh; background: url('../img/ic-arrow-wh.svg') no-repeat center center; text-indent: -9999px; background-size: 60%; padding-left: 2rem; }

.form-btn button{ color: #fff; border: 2px solid #fff; 
	background: linear-gradient(90deg, rgb(255, 255, 255, 0), rgb(255, 255, 255, 0) 50%, rgb(30255 255, 255, 0) 0px, rgb(255, 255, 255, 0)) 100% 100% / 200% 100% no-repeat;}
.form-btn button:hover{ color: #111; background: linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255) 50%, rgb(255, 255, 255, 0) 0px, rgb(255, 255, 255, 0))  0% 100% / 200% 100% no-repeat; transition: all 0.3s ease-out 0s;}

.form-btn button:hover .ic-arrow{ background: url('../img/ic-arrow.svg') no-repeat center center;}



/* footer */
.footer{ background-color: #222; height: 15vh;}
.ft-wrap { width: 100%; padding: 0 10rem; color: #fff;}
.ft-logo { width: 11vh; height: 4.2vh; background: url('../img/logo.png') no-repeat top left; text-indent: -9999px; background-size: contain; }
.ft-info { font-size: 1.4vh;}
.ft-info li{ margin-left: 1rem;}
..ft-info li::after{ content: " "; border-right: 2px solid #999; height: 10px; padding: 0 1rem; }
.ft-info li span{ display: block; background-color: #666; width: 2px; height: 1.4vh;}
.ft-copi{ color: #999; font-size: 1.4vh; margin-top: 4rem;}




/* Animation */



.bk{transition: opacity 3s 2s ease ;}

.img_no{ opacity: 0;}



.anii.sec-02 .sec-m-img, .anii.sec-04 .sec-m-img{ 
	animation: fadeIn 1s cubic-bezier(0.2,-2,0.8,2) 1 forwards;
	}
.anii.sec-03 .sec-m-img{ animation: fadeIn 1s cubic-bezier(0.2,-2,0.8,2) 1;}



.sec-01 .copyrigt-1 div > p{ opacity: 0;}

.anii.sec-01 .copyrigt-1 div:first-child > p:nth-child(1){ animation: flipInn 1s .1s linear 1 forwards;}
.anii.sec-01 .copyrigt-1 div:first-child > p:nth-child(2){ animation: flipInn 1s .2s linear 1 forwards;}
.anii.sec-01 .copyrigt-1 div:first-child > p:nth-child(3){ animation: flipInn 1s .3s linear 1 forwards;}
.anii.sec-01 .copyrigt-1 div:first-child > p:nth-child(4){ animation: flipInn 1s .4s linear 1 forwards;}

.anii.sec-01 .copyrigt-1 div:last-child > p:nth-child(1){ animation: flipInn 1s .5s linear 1 forwards;}
.anii.sec-01 .copyrigt-1 div:last-child > p:nth-child(2){ animation: flipInn 1s .6s linear 1 forwards;}
.anii.sec-01 .copyrigt-1 div:last-child > p:nth-child(3){ animation: flipInn 1s .7s linear 1 forwards;}
.anii.sec-01 .copyrigt-1 div:last-child > p:nth-child(4){ animation: flipInn 1s .8s linear 1 forwards;}


.sec-02 .hc-txt{ position: relative; z-index: 1;}
.sec-02 .highlight:before {
content: "  "; opacity: .5;
background: #19bdb2;
box-sizing: border-box;
width: 0; height: 2rem;
position: absolute;
left: -.5rem; bottom: 0;
z-index: -1;
will-change: width;
}
.anii.sec-02 .hc-txt:first-child .highlight:before {
  animation: highlight 1s 1s ease-in-out;
}
.anii.sec-02 .hc-txt:last-child .highlight:before {
  animation: highlight 1s 2s ease-in-out ;
}

.anii.sec-03 .sec-title-txt p:last-child, .anii.sec-03 .sec-title-txt p:first-child span{ opacity: 0;}

.anii.sec-03 .sec-title-txt p:first-child span:nth-child(1){ animation: fadeIn 1s .7s ease-in-out forwards; }
.anii.sec-03 .sec-title-txt p:first-child span:nth-child(2){ animation: fadeIn 1s 1.2s ease-in-out forwards; }
.anii.sec-03 .sec-title-txt p:first-child span:nth-child(3){ animation: fadeIn 1s 1.7s ease-in-out forwards; }

.anii.sec-03 .sec-title-txt p:last-child { animation: fadeIn 1s 2.2s ease-in-out forwards, pulse 1.3s 1.5s ease-in-out 1; }


.sec-04 .sec-title-txt { font-weight: 700; }
.anii.sec-04 .sec-title-txt div p{ opacity: 0;}

.anii.sec-04 .sec-title-txt div:nth-of-type(1) p{ animation: aslideUp .5s .5s ease-in-out forwards;}
.anii.sec-04 .sec-title-txt div:nth-of-type(2) p{ animation: aslideUp .5s .8s ease-in-out forwards;}
.anii.sec-04 .sec-title-txt div:nth-of-type(3) p{ animation: aslideUp .5s 1s ease-in-out forwards;}


.anii.sec-05 .bl-box .item{ animation: pulse 1s ease-in-out forwards;}


.popup-overlay {
  position: fixed; /* 화면에 고정 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 반투명 배경 */
  display: none; /* 기본적으로 숨김 */
  justify-content: center; /* 수평 및 수직 중앙 정렬 */
  align-items: center;
  z-index: 9999; /* 다른 요소들 위에 올리기 */
}

.popup-content {
  position: relative;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 1000px;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
  padding-right: 40px; /* 닫기 버튼을 위해 오른쪽 패딩 추가 */
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* 팝업 내용 내에서만 스타일을 적용 */
.popup-content h3 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.popup-content h4 {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #2d3748;
}

.popup-content p, .popup-content ul, .popup-content ol {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 10px;
  color: #4a5568;
}

.popup-content ul, .popup-content ol {
  margin-left: 20px;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 25px;
  cursor: pointer;
  color: #333;
  font-weight: bold;
}

/* 팝업을 연 후 보여주기 */
.popup-overlay.show {
  display: flex;
}

/* keyframes */

@-webkit-keyframes flipInn {
  from { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to { opacity: 1;
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}



@keyframes highlight {
  0% {
    width: 0;
    left: 0;
  }
  44% { 
    width: 100%;
    left: 0;
  }
  54% { 
    width: 100%;
    left: 0;
  }
  100% { 
    width: 0;
    left: 100%;
  }
}



@keyframes aslideUp {
  from { opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* media */


@media (max-width:1368px) and (orientation: landscape) { 


}


@media (max-width:1280px)  { 
	

}


@media (max-width:1024px) and (orientation: portrait) {

	
}


@media (max-width:900px) and (orientation: portrait){
	

.ft-16 { font-size: 1.6vh;}
.ft-18 { font-size: 1.8vh;}
.ft-20 { font-size: 2.0vh;}
.ft-22 { font-size: 2.2vh;}
.ft-24 { font-size: 2.4vh;}
.ft-26 { font-size: 2.6vh;}
.ft-32 { font-size: 3.2vh;}
.ft-36 { font-size: 3.6vh;}


	.p-hd-min { margin: 0 4rem; }
	.indexWrap{ display: none;}
	.nav { height: 8vh; background-color: red; }
	.hd-logo { }
	
	.sec-01 h1 { position: inherit;  top: -16vh; left: 0;}
	.copyrigt-2{ margin-top: -10vh;}
	
	.sec-title-wrap { margin-top: 4vh; }
	.sec-02 .sec-title-wrap, .sec-04 .sec-title-wrap { margin-right: 4vh;}
	.sec-03 .sec-title-wrap, .sec-05 .sec-title-wrap, .sec-06 .sec-title-wrap, .sec-05 .bl-work-wrap { margin-left: 4vw;}
	

	.sec-02 .sec-title-wrap .h3, .sec-04 .sec-title-wrap .h3{ text-align: right;}
	
	
	.sec-m-img { width: 96%;}
 
	.sec-04 .business-artcle > p{ display: flex; justify-content: flex-end; align-items: center;}
	
	.sec-04 .bu-list-wrap{ width: auto; float: right;}
	
	.sec-04 .bu-list-wrap li { width: auto; }
	
	.sec-05 .sec-title-wrap p, .sec-06 .sec-title-wrap p{ margin: 3rem 0;}

	.bl-work-wrap { margin: 2rem 0 0 10rem; }
	
	.bl-w-filter{ margin-bottom: 5rem; font-size: 2.8rem;}
	
	
	
	.sec-06 .sec-title-wrap { margin-top: -10rem;}
	
	.sec-05 .sec-title-wrap p, .sec-06 .sec-title-wrap .h4{ font-size: 3.2rem; line-height: 4.8rem;}
	
	.artice-right { width: 100%;}
	
	.s6-wrap.flx-row-nw{ flex-direction: column;}
	.s6-wrap.flx-bt{ align-items:flex-start;}
	
	.form-wrap { width: 100%;  padding: 4rem;}

	
	.footer{ background-color: #222; height: 20vh;}
	.ft-wrap { padding: 0 4rem;}
	
	.ft-sumery.flx-bt { justify-content: flex-start; flex-flow: column wrap;}
	.ft-info { font-size: 1.8vh; margin-top: 2rem;}
	.ft-info li span{ height: 1.8vh;}
	.ft-copi{ font-size: 1.8vh; margin-top: 2rem;}

	
}


@media (max-width:768px) {

}


@media (max-width:640px) {

	
}