@charset "UTF-8";

#wrap {overflow:hidden; width:100%; box-sizing: border-box;}
.inner { max-width:1660px; margin: 0 auto; box-sizing: border-box;}

/* 메인 - 스타일 */
.main section { padding:180px 0;}
.main .top_txt > span { display: inline-block; margin-bottom: 20px; font-size:clamp(20px,1.25vw,24px); color: var(--color-point02); font-weight: 500;}
.main .top_txt > strong { display: block; font-size: clamp(24px,2.2917vw,44px); font-weight: 700; line-height: 1.4;}
.main .top_txt > p{ margin-top: 24px; font-size:clamp(16px,1.0417vw,20px); line-height:1.5;}

#section01 {padding:0;}
#section01 .visual { overflow: hidden;; width: 100%; height: 100vh;}
#section01 .visual .bg { position: absolute; left:0; right:0; top:0; bottom:0; background-position: center; background-repeat: no-repeat; background-size: cover; transition:2s; transform: scale(1.15);}
#section01 .visual .sd1 .bg { background-image: url(../images/visual_bg.jpg);}
#section01 .visual .txt_wrap { position:absolute; left:0; bottom:0; z-index: 2; padding:0 0 150px 132px; color:var(--color-white);}
#section01 .visual .txt_wrap span { display: inline-block; transform: translateY(100%); transition: 1s; opacity:0; transition-delay: 0.4s;}
#section01 .visual .txt_wrap dt { overflow: hidden; font-size: clamp(16px,1.25vw,24px); font-weight: 500;}
#section01 .visual .txt_wrap dd { overflow: hidden; margin-top: 20px; font-size: clamp(30px,3.3333vw,64px); font-weight: 700; line-height: 1.4;}
#section01 .visual .txt_wrap dd span {transition-delay: 0.8s;}
#section01 .visual .swiper-slide-active .bg,
#section01 .visual .swiper-slide-active .txt_wrap span { transform: none; opacity:1;}
#section01 .open_pop { position: absolute; right:32px; bottom:100px; z-index: 11; display: flex; align-items: center; padding:0 24px; height:56px; border-radius: 100px; background: #0054C7; line-height: 1; opacity: 0; transition:1s; transition-delay: .5s;}
#section01 .open_pop span { padding-left: 32px; background: url(../images/arrow_left01.svg) left center no-repeat; font-size: clamp(15px,0.9375vw,18px); color:var(--color-white); font-weight: 700;}
.open #section01 .open_pop { right:132px; opacity: 1;}
.open #section01 .open_pop.none { right:100px; opacity:0; transition-delay: 0s;} 
#section01 .vis_pop { overflow:hidden; position: absolute; right:0; bottom:100px; z-index: 10; padding-left: 50px; max-width:420px; border-radius: 20px; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition:.8s;}
#section01 .vis_pop.active { opacity: 1; right:132px;} 
#section01 .vis_pop .lef { position:absolute; left:0; top:0; bottom:0; width:50px; border-right: 1px solid rgba(255, 255, 255, 0.20);}
#section01 .vis_pop .lef .close_pop { position:absolute; left:0; top:0; width:100%; height:50px; background:url(../images/arrow_right01.svg) no-repeat center / auto 13px;}
#section01 .vis_pop .rig { padding:20px;}
#section01 .vis_pop .rig .img_box { overflow:hidden; border-radius: 10px;}
#section01 .vis_pop .rig .img_box img { border-radius:10px;}
#section01 .vis_pop .rig .txt_box { margin-top: 20px; font-size: clamp(14px,0.9375vw,18px); color:var(--color-white); line-height: 1.4;}
#section01 .vis_pop .rig .txt_box b { font-weight: 700;}

#section02 { overflow: hidden; position: relative;}
#section02 .bg { position: absolute; left:0; right: 0; top:0; bottom:0; z-index: -1; background: url(../images/section02_bg.jpg) center top no-repeat; background-size: cover;}
#section02 .top_txt { color:var(--color-white); text-align: center;}
#section02 .list { margin-top: 330px;}
#section02 .list strong { font-size: clamp(24px,2.0833vw,40px); color:var(--color-white); font-weight: 700;}
#section02 .list ul { display: flex; gap:0 20px; align-items: stretch; margin-top: 60px;}
#section02 .list ul li { flex:1; padding:40px; border-radius: 17px; background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); cursor: default; transition:.5s;}
#section02 .list ul li:hover { background:rgba(255,255,255,1);}
#section02 .list ul li .ico { display: flex; justify-content: flex-end;}
#section02 .list ul li:hover .ico img { transform: scale(1.1); transition: .5s;}
#section02 .list ul li .txt { margin-top: 30px; color:var(--color-white);}
#section02 .list ul li:hover .txt { color:var(--color-black);}
#section02 .list ul li .txt span { font-size:16px; text-transform: uppercase;}
#section02 .list ul li .txt p { margin-top: 14px; font-size:20px; font-weight: 700;}
#section02.en .list ul li .txt p br { display:none;}

#section03 { background-color:#F3F9FF;}
#section03 .top_txt { color:var(--color-black); text-align: center;}
#section03 .top_txt p { color:var(--color-text-secondary); }
#section03.en .top_txt br { display:none;}
#section03 .list { margin-top: 160px;}
#section03 .list ul { position: relative; display: flex; gap:0 20px;}
#section03 .list ul li { position:relative; overflow: hidden; border-radius: 20px;}
#section03 .list ul li:nth-child(odd) { position:relative; top:-100px;}
#section03 .list ul li .img { width:100%;}
#section03 .list ul li .img img { transition:.5s;}
#section03 .list ul li:hover .img img { transform:scale(1.1);}
#section03 .list ul li .txt { position:absolute; left:0; right:0; bottom:0; padding:60px 40px; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%, #111 100%); color:var(--color-white);}
#section03 .list ul li .txt span { font-size:clamp(16px,0.9375vw,18px); font-weight: 500;}
#section03 .list ul li .txt p { margin-top: 20px; font-size:clamp(20px,1.5625vw,30px); font-weight: 700; line-height:1.4;}

#section04 {overflow: hidden; position: relative;}
#section04 .bg { position: absolute; left:0; right: 0; top:0; bottom:0; z-index: -1; background: url(../images/section04_bg.jpg) center top no-repeat; background-size: cover; background-attachment: fixed;}
#section04 .top_txt { color:var(--color-white);}
#section04 .process { margin-top: 100px;}
#section04 .process ul { display: flex; align-items: center; justify-content: space-between; position:relative;}
#section04 .process ul::before { content:''; position:absolute; left: -130px; top:50px; width:calc(100% + 260px); height:2px; background-color:var(--color-white);}
#section04 .process ul li { flex:1; display: flex; flex-direction: column; align-items: center; text-align: center; cursor:pointer;}
#section04 .process ul li span { display: inline-block; font-size:clamp(12px,0.8333vw,16px); font-weight: 500; color:var(--color-white); line-height: 20px;}
#section04 .process ul li .circle { position:relative; display: block; margin:26px 0 25px; width:10px; height:10px; border-radius: 50%; background-color: var(--color-white);}
#section04 .process ul li .circle::after { content:''; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:37px; height:37px; border-radius: 37px;
    background: radial-gradient(50% 50% at 50% 50%, #00E5FF 0%, rgba(0, 229, 255, 0.00) 100%); filter: blur(5px); opacity:0;}
#section04 .process ul li strong {font-size:clamp(16px,1.25vw,24px); color:var(--color-white); font-weight: 700;}
#section04 .process ul li p { margin-top: 16px; font-size:clamp(14px,0.9375vw,18px); color: rgba(255, 255, 255, 0.70);}
#section04 .process ul li.active span { color:var(--color-point02); transition:.3s;}
#section04 .process ul li.active .circle {background: var(--color-point02); transition:.3s;}
#section04 .process ul li.active .circle::after { opacity:1; transition:.3s;}
#section04 .process ul li:hover span { color:var(--color-point02); transition:.3s;}
#section04 .process ul li:hover .circle {background: var(--color-point02); transition:.3s;}
#section04 .process ul li:hover .circle::after { opacity:1; transition:.3s;}

#section05 { overflow: hidden; position: relative;}
.main #section05 { padding-top: 218px;}
#section05 .marquee {position:absolute; left:0; top:60px;}
#section05 .marquee .marquee_list { display: flex; width: max-content;}
#section05 .marquee .marquee_list li { font-size: clamp(60px,7.8125vw,150px); color:#004098; font-weight: 700; opacity: 0.1;}
#section05 .sec05_con {overflow:hidden; padding:178px 138px; border-radius: 30px; background:url(../images/section05_img01.jpg) center no-repeat; background-size: cover;}
#section05 .sec05_con .top_txt { color:var(--color-white);}
#section05 .sec05_con .top_txt .btn { display: inline-flex; align-items: center; margin-top: 60px; height:60px; padding:0 34px; border-radius: 100px; background: #0054C7;}
#section05 .sec05_con .top_txt .btn span { padding-right: 34px; background:url(../images/arrow_right02.svg) right center no-repeat; font-size:clamp(15px,0.9375vw,18px); color:var(--color-white); font-weight: 700;}

/* 메인 - 반응형 */
@media all and (max-width: 1300px){
    .main section { padding:120px 0;}
    .inner { padding:0 60px; max-width: 100%;}
    #section01 .visual .txt_wrap { padding:0 0 100px 60px;}
    #section01 .vis_pop.active,
    .open #section01 .open_pop { right:60px;}
}

@media all and (max-width: 1200px){
    #section02 .list ul li {padding:30px 24px;}
    #section03 .list ul li .txt { padding:30px 24px;}
    #section05 .sec05_con { padding:80px 20px;}
}

@media all and (max-width: 1024px){
    .main section { padding:80px 0;}

    #section01 .visual .txt_wrap { padding: 40px 20px; bottom: auto; top: 70px;}
    #section01 .vis_pop,
    #section01 .open_pop {bottom:40px;}
    #section01 .vis_pop.active, 
    .open #section01 .open_pop { right:20px;}
    #section01 .open_pop { padding:0 20px; height:44px;}
    #section01 .vis_pop {border-radius: 10px;}
    #section01 .vis_pop .lef { width:36px;}
    #section01 .vis_pop .rig { padding:12px;}

    #section02 .list { margin-top: 80px;}
    #section02 .list ul { flex-direction: column; gap:16px; margin-top: 40px;}
    #section02 .list ul li { border-radius: 10px;}

    #section03 .list { margin-top: 40px;}
    #section03 .list ul { flex-direction: column; gap:16px;}
    #section03 .list ul li:nth-child(odd) { top:0;}
    #section03 .list ul li .img img { width:100%; object-fit: cover;}
    #section03 .list ul li .txt { background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%, #111 100%);}
    #section03 .list ul li .txt p { margin-top: 14px;}

    #section04 .process ul { flex-direction: column; gap:30px; align-items: flex-start; justify-content: flex-start;}
    #section04 .process ul::before { width:1px; left:0; top:26px; height:calc(100% - 82px);}
	#section04 .process.en ul::before { height:calc(100% - 65px);}
    #section04 .process ul li { position:relative; padding-left: 30px; text-align: left; align-items:flex-start;}
    #section04 .process ul li .circle { position:absolute; left:-3px; top:0; width:8px; height:8px;}
    #section04 .process ul li .txt { margin-top: 8px;}
    #section04 .process ul li p { margin-top: 8px;}

    .main #section05 { padding-top: 107px;}
    #section05 .marquee {top:44px;}
}

@media all and (max-width: 768px){
    .inner { padding:0 20px;}
    .main .top_txt > p {margin-top: 16px;}

    #section01 .visual .sd1 .bg { background-image: url(../images/mobile/visual_bg.jpg);}
    #section01 .vis_pop {max-width: calc(100% - 40px);}
    #section01 .vis_pop .rig .img_box { max-width: 216px;}

    #section02 .bg { background-image: url(../images/mobile/section02_bg.jpg);}
    #section02 .list ul li .ico img { max-height: 60px;}

    #section04 .bg { background-image: url(../images/mobile/section04_bg.jpg);}

    #section05 .sec05_con { text-align: center; border-radius: 10px; background-image: url(../images/mobile/section05_img01.jpg);}
    #section05 .sec05_con .top_txt .btn {padding:0 20px; margin-top: 40px; height:44px;}
    #section05 .sec05_con .top_txt .btn span { padding-right: 25px; background-size: auto 10px;;}
}

/* 회사소개 - about */
.about_wrap section { padding:180px 0;}
.about_wrap .top_txt {margin-bottom: 60px; text-align: center; line-height: 1.4;}
.about_wrap .top_txt span {display: inline-block; font-size:clamp(20px,1.25vw,24px); color:var(--color-point01); font-weight: 500;}
.about_wrap .top_txt strong { display: block; margin:20px 0 24px; font-size:clamp(24px,2.2917vw,44px); color:var(--color-black); font-weight: 700;}
.about_wrap .top_txt p { font-size: clamp(16px,1.0417vw,20px); color:var(--color-text-secondary);}

.about_sec01 {overflow:hidden; position:relative; height: 100vh;}
.about_sec01 .bg { position:absolute; left:0; right:0; top:0; bottom:0; background:url(../images/sub01_bg.jpg) no-repeat left center / cover; transform:scale(1.1); transition:2s;}
.open .about_sec01 .bg { transform:none;}
.about_sec01 .txt_wrap {position:absolute; left:0; right:0; bottom:0; display: flex; padding:120px 0; align-items: flex-end; color: var(--color-white);}
.about_sec01 .txt_wrap .inner {display: flex; justify-content: space-between; align-items: flex-end; padding:0 130px; width:100%; max-width: 100%;}
.about_sec01 .txt_wrap strong {font-size: clamp(30px,3.3333vw,64px);font-weight: 700; line-height:1.4;}
.about_sec01 .txt_wrap .txt { text-align: right; line-height: 1.4;}
.about_sec01 .txt_wrap .txt span { font-size:clamp(20px,1.25vw,24px); font-weight: 600;}
.about_sec01 .txt_wrap .txt span b { color:var(--color-point02); font-weight: 600;}
.about_sec01 .txt_wrap .txt p { margin-top: 20px; font-size:clamp(16px,1.0417vw,20px);}

.about_sec02 .top_txt { margin-bottom: 40px; text-align: center;}
.about_sec02 .top_txt p { font-size: clamp(24px,2.0833vw,40px); color:var(--color-text-tertiary); line-height:1.4;}
.about_sec02 .bot_txt { text-align: center; margin-top: 44px;}
.about_sec02 .bot_txt p { font-size:clamp(20px,1.5625vw,30px); color:var(--color-text-tertiary); line-height:1.4;}
.about_sec02 .top_txt p b,
.about_sec02 .bot_txt p b { font-weight: 700;}
.about_sec02 .compare_wrap {position: relative; display: flex; align-items: stretch; width: 100%; height:520px; overflow: hidden;}
.about_sec02 .compare_img { position: relative; flex:1;}
.about_sec02 .compare_img img { width: 100%; height:100%; display: block; object-fit: cover;}
.about_sec02 .compare_img span { display: flex; align-items: center; justify-content: center; position:absolute; left:0; right:0; top:0; bottom:0; font-size: clamp(20px,4.1667vw,80px); color:var(--color-white); font-weight: 700;}
.about_sec02 .handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: #0054C7 url(../images/ico_plus.svg) center no-repeat; border-radius: 100%; z-index: 10; }

.about_sec03 { background: #E9F4FF;}
.about_sec03 .list { display: flex; align-items: stretch; gap:0 20px; height:700px;}
.about_sec03 .list li { flex:1; height:100%; overflow: hidden; position: relative; transition: all 0.4s ease; border-radius: 20px; cursor: pointer;}
.about_sec03 .list li:first-child { flex:3;}
.about_sec03 .list:hover li {flex: 0.7;}
.about_sec03 .list li:hover {flex: 3.16;}
.about_sec03 .list li .img {overflow: hidden; position:absolute; left:0; top:0; width:100%; height:100%;}
.about_sec03 .list li .img::before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.2);}
.about_sec03 .list li .img img { width:100%; height:100%; object-fit: cover;}
.about_sec03 .list li .txt { position:absolute; left:0; bottom:0; padding:50px; color:var(--color-white); text-align: center;}
.about_sec03 .list li .txt span { font-size: 20px; font-weight: 500;}
.about_sec03 .list li .txt p { display: none; opacity:0; margin-top: 24px; font-size: clamp(20px,1.7708vw,34px); font-weight: 700; line-height:1.4; transition:.4s; transform: translateY(100%);}
.about_sec03 .list li:first-child .txt { text-align: left;}
.about_sec03 .list li:first-child .txt p { display: block; opacity: 1;  transform: none;}
.about_sec03 .list:hover li .txt {text-align: center;}
.about_sec03 .list:hover li .txt p { display: none; opacity:0; transform: translateY(100%);}
.about_sec03 .list li:hover .txt { text-align: left;}
.about_sec03 .list li:hover .txt p { display: block; opacity: 1; transform: none;}

.about_sec04 .list { display: flex; flex-direction: column; gap:20px; width:100%; height:740px;}
.about_sec04 .list li { flex:0.6; height:100%; overflow: hidden; position: relative; transition: all 0.4s ease; border-radius: 20px; cursor: pointer;}
.about_sec04 .list li:first-child { flex:3;}
.about_sec04 .list:hover li {flex: 0.6;}
.about_sec04 .list li:hover {flex:3;}
.about_sec04 .list li .img {overflow: hidden; position:absolute; left:0; top:0; width:100%; height:100%;}
.about_sec04 .list li .img::before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.3);}
.about_sec04 .list li .img img { width:100%; height:100%; object-fit: cover;}
.about_sec04 .list .txt_wrap { display: flex; flex-direction: column; justify-content: space-between; position:absolute; left:0; top:0; bottom:0; padding:30px 50px 50px; color:var(--color-white); line-height: 1.4; transition:.4s;}
.about_sec04 .list .txt_wrap .tit { display: flex; align-items: center; gap:0 16px;}
.about_sec04 .list .txt_wrap .tit span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height:40px; border-radius: 5px; background: rgba(217, 217, 217, 0.30); font-size: clamp(14px,0.8333vw,16px);}
.about_sec04 .list .txt_wrap .tit strong { font-size: clamp(18px,1.25vw,24px); font-weight: 700;}
.about_sec04 .list .txt_wrap .txt {display: none;}
.about_sec04 .list .txt_wrap .txt strong { font-size: clamp(20px,1.5625vw,30px); font-weight: 700;}
.about_sec04 .list .txt_wrap .txt p { margin-top: 20px; font-size: clamp(16px,1.0417vw,20px);}
.about_sec04 .list li:first-child .txt_wrap { padding-top: 50px;}
.about_sec04 .list li:first-child .txt_wrap .txt { display: block;}
.about_sec04 .list:hover .txt_wrap {padding-top:30px;}
.about_sec04 .list li:hover .txt_wrap { padding-top:50px;}
.about_sec04 .list:hover .txt_wrap .txt,
.about_sec04 .list:hover li:first-child .txt_wrap .txt {display: none;}
.about_sec04 .list:hover li:first-child .txt_wrap { padding-top: 30px;}
.about_sec04 .list li:hover .txt_wrap .txt {display: block;}
/* 기존 규칙들 아래에 추가 */
.about_sec04 .list li:first-child:hover .txt_wrap { padding-top: 50px;}
.about_sec04 .list li:first-child:hover .txt_wrap .txt { display: block; }

.about_sec05 { background: linear-gradient(180deg, #E9F4FF 0%, #7CBDFF 100%);}
.about_sec05 .list {display: flex; align-items: stretch;}
.about_sec05 .list li {flex:1; display: flex; flex-direction: column; justify-content: space-between; padding:34px 38px; height:332px; background: #E9F4FF;}
.about_sec05.en .list li { height:380px;}
.about_sec05 .list li ~ li {border-left: 1px solid #CDCDCD;}
.about_sec05 .list li .txt .num {display: inline-flex; align-items: center; padding:0 12px; height:26px; border-radius: 100px; background: var(--color-point01); color:var(--color-white); font-size: clamp(12px,0.7292vw,14px); font-weight: 600;}
.about_sec05 .list li .txt span:not(.num) {display: block; margin:24px 0 12px; font-size: clamp(14px,0.7813vw,15px); color:var(--color-text-secondary); text-transform: uppercase; line-height: 1;}
.about_sec05 .list li .txt p {font-size:clamp(20px,1.25vw,24px); font-weight:700; color:var(--color-black); line-height: 1.4;}
.about_sec05 .list li .txt p em {display: block; font-size:clamp(12px,0.7292vw,14px);}
.about_sec05.en .list li .txt p em { margin-top:8px;}
.about_sec05 .list li:hover .ico img { transform: scale(1.1); transition:.6s;}

.about_sec05.en .list li .txt p { word-break:keep-all;}

@media all and (max-width: 1400px){
    .about_sec01 .txt_wrap .inner { padding:0 60px;}

    .about_sec02 .inner { padding:0;}

    .about_sec03 .list li .txt{ padding:16px;}

    .about_sec05 .list li { padding:16px 8px; word-break: keep-all;}
	.about_sec05.en .list li { height:auto;}
    .about_sec05 .list li .txt span { display: none;}
}

@media all and (max-width: 1024px){
    .about_wrap section { padding:80px 0;}

    .about_sec01 .txt_wrap{ padding:80px 0;}
    .about_sec01 .txt_wrap .inner { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:30px;}
    .about_sec01 .txt_wrap .txt { text-align: left;}

    .about_sec02 .compare_wrap { height:320px;}

    .about_sec03 .list { flex-direction: column; gap:16px; height:748px;}
    .about_sec03 .list li { border-radius: 10px; flex:1.06;}
    .about_sec03 .list li .txt { display: flex; flex-direction: column; align-items: center; justify-content: center; padding:30px 24px; width:100%; height:100%; text-align: left;}
    .about_sec03 .list li:first-child .txt,
    .about_sec03 .list li:hover .txt { align-items: flex-start; justify-content: flex-end;}

    .about_sec05 .list { flex-direction: column; max-width: 50%; margin:0 auto;}
    .about_sec05 .list li { gap:24px; align-items: center; padding:30px; height:auto; flex:none; width:100%;}
    .about_sec05 .list li ~ li { border-left: 0; border-top:1px solid #CDCDCD;}
    .about_sec05 .list li .txt { text-align: center;}

}

@media all and (max-width: 768px){
    .about_wrap .top_txt {margin-bottom: 40px; padding:0 20px;}
    .about_wrap .top_txt strong { margin:18px 0 16px;}

    .about_sec01 .bg {background-image: url(../images/mobile/sub01_bg.jpg);}
    .about_sec01 .txt_wrap .inner { padding:0 20px;}
    .about_sec01 .txt_wrap .txt p {margin-top: 16px;}

    .about_sec02 .compare_wrap { height:150px;} 
    .about_sec02 .bot_txt { margin-top: 40px;}
    .about_sec02 .handle { width:40px; height:40px; background-size: 12px;}
	.en .about_sec02 .top_txt br { display:none;}
	.about_sec02 .bot_txt {padding:0 20px;}
	.en .about_sec02 .bot_txt br { display:none;}

    .about_sec03 .list li .txt p { margin-top: 16px;}

    .about_sec04 .list { height:672px; gap:16px;}
    .about_sec04 .list li { border-radius: 10px;}
	.about_sec04 .list li:first-child { flex:none; height:400px;}
	.about_sec04 .list:hover li {flex: none; height:120px;}
	.about_sec04 .list li:hover {flex:none; height:400px;}
    .about_sec04 .list .txt_wrap { padding:43px 24px 30px; width:100%;}
    .about_sec04 .list .txt_wrap .tit { gap:10px;}
    .about_sec04 .list .txt_wrap .tit span {width:34px; height:34px;}
    .about_sec04 .list li:first-child .txt_wrap { padding-top: 30px;}
    .about_sec04 .list .txt_wrap .txt p { margin-top: 16px;}
    .about_sec04 .list:hover .txt_wrap {padding-top:43px;}
    .about_sec04 .list li:hover .txt_wrap { padding-top:30px;}
	.about_sec04 .list li:first-child:hover .txt_wrap { padding-top: 30px;}
	.about_sec04 .list li:first-child:hover .txt_wrap .txt { display: block; }

    .about_sec05 .list { max-width: 100%;}
    .about_sec05 .list li .txt span:not(.num) {margin:16px 0 12px;}
    .about_sec05 .list li .txt br { display: none;}
}

/* 서비스 - service */
.service_wrap section { padding:180px 0;}

.service_sec01 {overflow:hidden; position: relative; width:100%; aspect-ratio: 32 / 15; min-height:900px;}
.service_sec01 .bg { position:absolute; left:0; right:0; top:0; bottom:0; background:url(../images/sub02_bg.jpg) no-repeat left center / cover; transform:scale(1.1); transition:2s;}
.open .service_sec01 .bg { transform:none;}
.service_sec01 .txt_wrap { position:absolute; left:0; bottom:0; padding:100px 0; width:100%; color:var(--color-white); line-height:1.4;}
.service_sec01 .txt_wrap .inner { padding:0 130px; width:100%; max-width: 100%;}
.service_sec01 .txt_wrap strong {display:block; font-size:clamp(30px,3.3333vw,64px); font-weight: 700;}
.service_sec01 .txt_wrap p { margin-top: 30px; font-size:clamp(16px,1.25vw,24px);}

.service_wrap .service_sec02 { padding-bottom: 325px;}
.service_sec02 {position: relative;}
.service_sec02 .list { display: flex; gap:0 30px; justify-content: center;}
.service_sec02 .list li { position: relative; overflow: hidden; border-radius: 20px; cursor: pointer;}
.service_sec02 .list li:last-child { top:150px; text-align: right;}
.service_sec02 .list li .img img { transition:.4s;}
.service_sec02 .list li:hover .img img {transform:scale(1.1);}
.service_sec02 .list li .top { position:absolute; right:40px; top:40px; font-size:clamp(14px,1.0417vw,20px); font-weight: 700; color:var(--color-white);}
.service_sec02 .list li:last-child .top { right:auto; left:40px;}
.service_sec02 .list li .txt { position:absolute; left:0; right:0; bottom:0; padding:50px 40px 40px; color:var(--color-white); line-height:1.4;background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%, #111 100%);}
.service_sec02 .list li .txt strong { font-size: clamp(20px,1.7708vw,34px); font-weight: 700;}
.service_sec02 .list li .txt p { margin-top: 18px; font-size: clamp(16px,1.0417vw,20px);}
.service_sec02 .marquee {position:absolute; left:0; bottom:60px; z-index: -1;}
.service_sec02 .marquee .marquee_list { display: flex; width: max-content;}
.service_sec02 .marquee .marquee_list li { font-size: clamp(60px,7.8125vw,150px); color:#004098; font-weight: 700; opacity: 0.1;}

.service_sec03 .list { display: flex; gap:0 30px; justify-content: center;}
.service_sec03 .list li {overflow:hidden; flex:1; position:relative; border-radius: 20px; cursor: pointer;}
.service_sec03 .list li:first-child { top:-120px;}
.service_sec03 .list li:nth-child(2) { top:-60px;}
.service_sec03 .list li:hover img { transform: scale(1.1); transition:.6s;}
.service_sec03 .list li .txt_wrap {position:absolute; left:0; right:0; bottom:0; z-index: 2; display: flex; flex-direction: column; padding:50px; height:auto; background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%, #111 100%); transition: .8s;}
.service_sec03 .list li:hover .txt_wrap {justify-content: space-between; height:100%; background:linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(0,0,0,0) 100%);}
.service_sec03 .list li::after { content:''; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%) scale(0); width:200%; height:200%; border-radius: 50%; background:#0063EA; transition:0.3s; opacity:0;}
.service_sec03 .list li:hover::after {transform: translate(-50%,-50%) scale(1); transition:.8s; opacity:1;}
.service_sec03 .list li .txt_wrap span { display: inline-block; margin-bottom: 12px; font-size:clamp(14px,0.9375vw,18px); color:var(--color-point02); font-weight: 700;}
.service_sec03 .list li .txt_wrap .txt { color:var(--color-white); line-height: 1.4;}
.service_sec03 .list li .txt_wrap .txt strong { font-size:clamp(20px,1.5625vw,30px); font-weight: 700;}
.service_sec03 .list li .txt_wrap .txt p { display: none; margin-top: 18px; font-size:clamp(16px,1.0417vw,20px);}
.service_sec03 .list li:hover .txt_wrap .txt p {display: block;}

.service_wrap .service_sec04 {padding-top: 0;}
.service_sec04 .sec04_con { display: flex; align-items: center; width:100%; height:500px; background:url(../images/sub02_img06.jpg) center no-repeat; background-size: cover; border-radius: 274.5px; padding:0 133px;}
.service_sec04 .top_txt { color:var(--color-white); line-height:1.4;}
.service_sec04 .top_txt span {display: inline-block; font-size:clamp(16px,0.9375vw,18px); color:var(--color-point02); font-weight: 500;}
.service_sec04 .top_txt strong { display: block; margin:30px 0 18px; font-size:clamp(20px,1.5625vw,30px); font-weight: 700;}
.service_sec04 .top_txt p { font-size: clamp(16px,1.0417vw,20px);}


@media all and (max-width: 1400px){
    .service_sec01 .txt_wrap .inner { padding:0 60px;}
    .service_sec03 .list li .txt_wrap { padding:24px;}
}

@media all and (max-width: 1024px){
    .service_wrap section { padding:80px 0;}
    .service_sec01 { min-height: auto; max-height: 100vh; aspect-ratio: 75 / 136;}
    .service_wrap .service_sec02 { padding-bottom: 260px;}
    .service_sec02 .list li {border-radius: 10px;}
    .service_sec02 .list li .top { right:24px; top:30px;}
    .service_sec02 .list li:last-child .top { right:auto; left:24px;}
    .service_sec02 .list li .txt { padding:30px 24px;}
    .service_sec02 .list li .txt p br { display: none;}

    .service_sec03 .list {flex-direction: column; gap:16px; align-items: center;}
    .service_sec03 .list li {max-width: 50%;}
    .service_sec03 .list li:first-child,
    .service_sec03 .list li:nth-child(2) { top:0;}
    .service_sec03 .list li .img img { width: 100%; object-fit: cover;}

    .service_sec04 .sec04_con { padding:0 50px; height:320px;}
    
}

@media all and (max-width: 768px){
    .service_sec01 .bg {background-image: url(../images/mobile/sub02_bg.jpg);}
    .service_sec01 .txt_wrap { padding:80px 0;}
    .service_sec01 .txt_wrap .inner { padding:0 20px;}
    .service_sec01 .txt_wrap p {margin-top: 16px;}

    .service_wrap .service_sec02 { padding-bottom: 112px;}
    .service_sec02 .list { flex-direction: column; gap:16px;}
    .service_sec02 .list li { width:100%;}
	.service_sec02 .list li .img img { width:100%;}
    .service_sec02 .list li:last-child {top:0;}
    .service_sec02 .list li .txt p { margin-top: 16px;}
    .service_sec02 .list li .txt p .mob { display: block;}
	
	.service_sec03 .list { align-items:normal;}
    .service_sec03 .list li {max-width: 100%; border-radius: 10px;}
    .service_sec03 .list li .txt_wrap span {margin-bottom: 16px;}
    .service_sec03 .list li .txt_wrap .txt p { margin-top: 12px;}

    .service_sec04 .sec04_con { padding:0 20px; height:auto; aspect-ratio: 335 / 515; background-image: url(../images/mobile/sub02_img06.jpg);}
    .service_sec04 .top_txt strong { margin:20px 0 16px;}
}

/* 게시판 - board */
.board_wrap {padding:240px 0; min-height:calc(100vh - 444px);}
.board_wrap .board_tit { margin-bottom: 60px;}
.board_wrap .board_tit h2 { font-size: clamp(30px,6.25vw,120px); color:var(--color-black); font-weight: 700;}
.board_wrap .board_tit p { margin-top: 24px; font-size: clamp(18px,1.0417vw,20px); color:var(--color-black); word-break:keep-all; line-height:1.4;}
.board_wrap .board_menu { display: flex; align-items: center; gap:0 10px; margin-bottom: 40px;}
.board_wrap .board_menu a {display: flex; align-items: center; height: 50px; padding: 0 18px; border-radius: 10px; background: #F8F8F8;}
.board_wrap .board_menu a span { font-size: clamp(15px,0.8333vw,16px); color:#909090; font-weight: 700;}
.board_wrap .board_menu a.active { background:var(--color-point01);}
.board_wrap .board_menu a.active span { color:var(--color-white);}
.board_wrap .board_list { display: flex; flex-wrap:wrap; gap:30px 20px; align-items: stretch;}
.board_wrap .board_list .board_item { width:calc((100% - 40px)/3); min-height:257px; border-radius: 20px; background: #F8F8F8; border: 2px solid #F8F8F8; transition:.4s;}
.board_wrap .board_list .board_item a { display: flex; flex-direction: column; justify-content: space-between; padding:40px; height:100%;}
.board_wrap .board_list .board_item .txt span { font-size: 14px; color:var(--color-point01); font-weight:500;}
.board_wrap .board_list .board_item .txt strong { display: block; margin-top: 14px; font-size:clamp(20px,1.25vw,24px); color:var(--color-black); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.board_wrap .board_list .board_item .date { font-size:14px; color:var(--color-text-secondary);}
.board_wrap .board_list .board_item:hover {border: 2px solid var(--color-point01); background:var(--color-white);box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);}
.board_wrap .pagination { display:flex; justify-content: center; margin-top: 54px;}
.board_wrap .pagination ul { display: inline-flex; align-items: center;}
.board_wrap .pagination ul li { overflow: hidden; display:flex; align-items: center; justify-content: center; width:32px; height:32px; border-radius: 5px;}
.board_wrap .pagination ul li a { font-size: 12px; color:#9BA5B3;}
.board_wrap .pagination ul li:not(.arrow).active { background-color:var(--color-point01);}
.board_wrap .pagination ul li.active a { color:var(--color-white);}
.no_data { text-align:center; width:100%;}

@media all and (max-width: 1024px){
    .board_wrap .board_list .board_item { width:calc((100% - 40px)/2);}
}

@media all and (max-width: 768px){
    .board_wrap {padding:120px 0;}
    .board_wrap .board_tit { margin-bottom: 40px;}
    .board_wrap .board_tit p {margin-top: 16px;}
    .board_wrap .board_menu a {height:44px; border-radius: 5px;}
    .board_wrap .board_list .board_item {width:100%; min-height: 192px;}
    .board_wrap .board_list .board_item a {padding:30px 24px;}
}

.contact_vis { display: flex; align-items: center; height:600px; background: url(../images/contact_bg.jpg) center no-repeat; background-size: cover;}
.contact_vis .inner { width:100%;}
.contact_vis .tit h2 { font-size:clamp(30px,4.1667vw,80px); font-weight: 700;}
.contact_vis .tit p { margin-top: 24px; font-size:clamp(18px,1.0417vw,20px); line-height:1.4;}
.contact_wrap .form_wrap { padding:100px 0 220px;}
.contact_wrap .form_con { display: flex; flex-wrap: wrap; gap:34px 30px;}
.contact_wrap .form_con .form_box {width:calc((100% - 30px)/2); line-height:1.4;}
.contact_wrap .form_con .form_box.w-100 { width:100%;}
.contact_wrap .form_con .form_box .type_label { display: block; margin-bottom: 12px; font-size:clamp(18px,1.0417vw,20px); color:var(--color-black); font-weight: 700;}
.contact_wrap .form_con .form_box .type_label em { color:var(--color-point01);}
.contact_wrap .form_con .form_box input:not([type="radio"],[type="checkbox"]) { display: block; padding:0 20px; width:100%; height:60px; border-radius: 10px; background: #F4F4F4; border:2px solid #F4F4F4; font-size: clamp(14px,0.9375vw,18px); color:var(--color-black);}
.contact_wrap .form_con .form_box input::placeholder,
.contact_wrap .form_con .form_box textarea::placeholder { color:#8c8c8c;}
.contact_wrap .form_con .form_box input:not([type="radio"],[type="checkbox"]):focus,
.contact_wrap .form_con .form_box textarea:focus{ background:var(--color-white); border-color: var(--color-point01);}
.contact_wrap .form_con .form_box .radio_wrap { display: flex; gap:12px; flex-wrap:wrap;}
.contact_wrap .form_con .form_box .inp_radio {flex:auto; cursor:pointer;}
.contact_wrap .form_con .form_box .inp_radio input { position:absolute; left:-9999px; opacity: 0;}
.contact_wrap .form_con .form_box .inp_radio span { display: flex; justify-content:center; align-items: center; padding:0 20px; height:60px; font-size: clamp(16px,0.9375vw,18px); color:var(--color-black); border-radius: 10px; background: #F4F4F4; text-align:center;}
.contact_wrap .form_con .form_box .inp_radio input:checked + span {background-color: var(--color-point01); color:var(--color-white);}
.contact_wrap .form_con .form_box textarea { display: block; padding:17px 20px; width:100%; height:260px; border-radius: 10px; background: #F4F4F4; border:2px solid #F4F4F4; font-size: clamp(14px,0.9375vw,18px); color:var(--color-black);}
.contact_wrap .form_con .form_box .chk { display: inline-flex; align-items: center; gap:0 12px; margin-bottom: 0; cursor: pointer;}
.contact_wrap .form_con .form_box .chk input { width:20px; height: 20px; border-radius: 5px; border: 1px solid #000;}
.contact_wrap .form_con .form_box .chk input[type="checkbox"]:checked { outline:none; border-radius: 5px;}
.contact_wrap .form_wrap .btn_wrap { display: flex; justify-content: center; margin-top: 60px;}
.contact_wrap .form_wrap .btn_form { display: inline-flex; align-items: center; padding:0 40px; height:60px; border-radius: 100px; background-color:var(--color-point01);}
.contact_wrap .form_wrap .btn_form span { font-size:clamp(15px,1.0417vw,20px); font-weight: 700; color:var(--color-white);}

@media all and (max-width: 1200px){
    .contact_wrap .form_con .form_box .radio_wrap { flex-wrap:wrap;}
}

@media all and (max-width: 1024px){
    .contact_wrap .form_wrap { padding:100px 0 120px;}
    .contact_wrap .form_con .form_box .radio_wrap { gap:10px;}
}

@media all and (max-width: 768px){
    .contact_vis {height:380px; background-image: url(../images/mobile/contact_bg.jpg);}
    .contact_vis .tit p {margin-top: 16px;}   
    .contact_wrap .form_wrap { padding:80px 0;}
    .contact_wrap .form_con {gap:24px;}
    .contact_wrap .form_con .form_box {width:100%;}
    .contact_wrap .form_con .form_box input:not([type="radio"],[type="checkbox"]) { padding:0 16px; height:44px; border-radius: 5px;}
    .contact_wrap .form_con .form_box .inp_radio span {padding:0 16px; height:54px; border-radius: 5px;}
    .contact_wrap .form_con .form_box textarea { padding:17px 16px; height:200px; border-radius: 5px;}
    .contact_wrap .form_wrap .btn_wrap {margin-top: 40px;}
    .contact_wrap .form_wrap .btn_form { padding:0 20px; height:44px;}
}