@charset 'utf-8';
@import url('font.css');
html,body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width:100%;height:100%;-ms-text-size-adjust:none;-webkit-text-size-adjust:none; text-size-adjust:none}
* {-webkit-appearance:none; -webkit-border-radius:0; max-height: 100000px; }
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button{margin:0;padding:0;}
body,input,textarea,select,table,button{font-family:'Pretendard', sans-serif; font-size:14px; font-weight: 400; line-height:1.25em; color: #111;}
body{word-wrap:break-word;word-break:break-all; touch-action: pan-x pan-y}
img,fieldset{border:0; display: block;}
ul,ol{list-style:none}
a{text-decoration:none;cursor:pointer; color: #111;}
button {cursor:pointer; border:none;}
em,address{font-style:normal}
input { overflow:visible }
*,*::before,*::after {  box-sizing: border-box;}


.wrap {margin:0 auto; width: 100%; max-width:1200px; min-width:320px; height: 100%; position: relative;}


@media(hover: hover) and (pointer: fine) {
}

ul, li {list-style: none;}
input:focus {outline: none;} /* outline 테두리 없애기 */

input::-moz-placeholder {color:#999;opacity:1; font-weight: 300;}
input:-ms-input-placeholder {color:#999;  font-weight: 300;}
input::-webkit-input-placeholder {color:#999;  font-weight: 300;}


header {background: #fff; z-index: 100; position: relative;}
header .wrap {display: flex; justify-content: space-between; align-items: center; background:#fff; z-index: 10; position: relative; padding:14px 30px}
.h_logo {font-weight: bold;}
.h_menu {display: flex;gap: 10px;}
.h_menu a {font-weight: 500;}
.h_menu a img {width:42px;}
.hamburger, .mobile-menu {display: none;}

.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);opacity: 0;visibility: hidden;transition: opacity 0.3s ease;z-index: 1000;}
.overlay.active {opacity: 1;visibility: visible;}

footer {background: #fff;}
footer .wrap {display: flex; justify-content: center; flex-direction:column; padding:28px 0 40px}
.footer_txt {color: #999; text-align:center; padding-bottom: 10px;}
.footer_logo {display: flex; justify-content: center; }
.footer_logo img {width:190px; }
.footer_btn {position: absolute; right: 10px; top: 22px;}
.footer_btn a {display:block; padding:8px 16px; border-radius:2px; background: #f2f2f2; color: #777; font-size: 13px; line-height: 1;}

.main_top_bg {background: url("../../img/main_img_w.jpg") center top no-repeat; height: 1175px;}
.main_top_img {position: absolute; right:150px; top:120px; animation: float 2s ease-in-out infinite; }

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(10px); }
  100% { transform: translateY(0px); }
}
.main_top_tit {padding:90px 0 0 10%;}
.main_top_tit1 {padding-bottom:22px;}
.main_top_tit2 {padding-left:14px;}
.main_top_tit3 {padding:30px 0 0 12px;}
.main_top_tit3 span {background: #01425e; border-radius:24px; font-size: 27px; color: #fff; display:inline-block; line-height: 1; padding:8px 22px;}
.main_top_tit1 { display: flex;}
.main_top_tit1 span { display: inline-block; opacity: 0; transform: translateY(-30px); animation: drop-in 0.6s ease-out forwards;}
.main_top_tit1 span:nth-child(1) { animation-delay: 0s;}
.main_top_tit1 span:nth-child(2) { animation-delay: 0.3s;}
.main_top_tit1 span:nth-child(3) { animation-delay: 0.6s;}
@keyframes drop-in {to { opacity: 1; transform: translateY(0);}}
.main_top_tit2, .main_top_tit3 {opacity: 0; animation-fill-mode: forwards;}
.main_top_tit2 { opacity: 0;  transform: scale(0.8); animation: zoomFadeIn 1s ease-out forwards;}
@keyframes zoomFadeIn {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.main_top_tit3 { animation: slideUp 1s ease-out 0.4s forwards;}
@keyframes slideUp {
0% { transform: translateY(40px); opacity: 0;}
100% { transform: translateY(0); opacity: 1;}
}

.main_mark {padding:80px 0; width: 86%; display: flex; flex-wrap: wrap; gap:25px; margin:0 auto}
.main_mark li {width:calc((100% - 25px) / 2); display: flex; align-items: center; justify-content: flex-start; position: relative; padding:56px 36px; border-radius: 30px; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(20px); overflow: hidden; z-index: 0; animation: grow 1s ease-out forwards; box-shadow: 0 0 12px rgba(255,255,255,0.8), inset 0 0 14px rgba(255,255,255,0.8);}
.main_mark li::before {content: ""; position: absolute; inset: 0; border-radius: 30px; padding:6px;  animation: borderGlow 6s linear infinite; z-index: -1; filter: blur(20px) brightness(1.3); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out;}
.main_mark li:nth-child(1)::before {background: linear-gradient(120deg, #fff00e,#ffa1e8,#37fffd,#9bff64); background-size: 300% 300%;}
.main_mark li:nth-child(2)::before {background: linear-gradient(120deg, #51fffd,#9bff64,#ffa1e8,#fff00e); background-size: 300% 300%;}
.main_mark li:nth-child(3)::before {background: linear-gradient(120deg, #ff5ff2,#fff341,#fff,#51fffd); background-size: 300% 300%;}
.main_mark li:nth-child(4)::before {background: linear-gradient(120deg, #9bff64,#51fffd,#ffa1e8,#fff00e); background-size: 300% 300%;}
.main_mark_img {padding-right:28px;}
.main_mark_img img {width: 136px;}
@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.main_mark_cont {}
.main_mark_cont a { padding:8px 45px 8px 22px; line-height: 1; background: url("../../img/icon_arrow1.png") #004f9f right 15px center no-repeat; background-size: 18px; color: #fff; font-size: 23px; border-radius: 22px; display:inline-block; margin-left: -4px; margin-top:20px;}


.sub_bg .wrap {padding-bottom: 70px; padding-left: 1%; padding-right: 1%;}
.sub_bg.sub1 {background:url("../../img/sub1_img_w.jpg") #f3e5cf no-repeat; background-position: calc(50% + 300px) top;}
.sub_bg.sub2 {background:url("../../img/sub2_img_w.jpg") #d6f8f8 no-repeat; background-position:center top;}
.sub_bg.sub3 {background:url("../../img/sub3_img_w.jpg") #f3e5cf no-repeat; background-position:center top;}
.sub_bg.sub4 {background:url("../../img/sub4_img_w.jpg") #f3e5cf no-repeat; background-position:center top;}
.sub_top_tit {display: flex; align-items:flex-start; padding: 80px 40px 0; height: 320px;}

.sub_top_mark {padding-right: 26px;}
.sub_top_mark img {width: 130px;}
.sub_top_tit1 {padding-bottom:15px;}
.sub_top_tit2 {font-size:20px; padding: 0 4px 16px; line-height: 1.3;}
.sub_top_tit3 a {padding:9px 60px 9px 25px; line-height: 1; background: url("../../img/icon_arrow1.png") #8497aa right 20px center no-repeat; background-size: 18px; color: #fff; font-size: 22px; border-radius: 22px; display:inline-block; margin-left: -2px; box-shadow: 0 4px 0 rgba(0,0,0,0.12); }
.sub_area {padding: 45px 6% 100px; background: #fff; border-radius:30px;}
.sub_menu { position: fixed; top: 140px; left:50%; margin-left:616px; width: 200px; background: #fff; border: 1px solid #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: top 0.5s ease; z-index:10; box-shadow: 0 2px 6px rgba(0,0,0,0.2); border-radius:16px; padding:90px 15px 10px;}
.sub_menu.scrolled { top:65px;}
.sub_menu_t {background: #8497aa; color: #fff; font-size:21px; position: absolute; left: 50%; top:-14px; width: 180px; text-align: center; line-height: 1.2; font-weight:500; border-radius: 12px 12px 0 0; margin-left: -90px; z-index: 11; padding:36px 0 18px; box-shadow: 0 3px 4px rgba(0,0,0,0.15);}
.sub_menu_line {position: absolute; top:-136px; left: 50%; margin-left: -9px; z-index: 12;}
.sub_menu li a {color: #666; font-size: 18px; border-bottom: 1px dashed #ddd; display: block; text-align: center; padding:16px 0; line-height: 1.2; letter-spacing: -0.04em;}
.sub_menu li a:hover, .sub_menu li a.active {color: #104393; font-weight:600;}
.sub_menu li:last-child a {border-bottom: none;}
.tab_mn {padding-bottom: 24px; display: grid;}
.tab_mn ul {border-bottom: 1px solid #dfdfdf; display: flex; width: 100%;}
.tab_mn li a {color: #888; font-size: 18px; padding:16px 22px; line-height: 1; display: block;}
.tab_mn li a.active {color: #000; border:  1px solid #dfdfdf; border-bottom: none; background: #fff; margin-bottom:-2px; border-radius: 6px 6px 0 0;}
.btn_download {padding-bottom:20px; display: flex; justify-content: flex-end;}
.btn_download a {background: url("../../img/icon_down.png") right 18px top 10px no-repeat; background-size: 18px; color: #888; font-size: 16px; border-radius: 4px; display:inline-block; border: 1px solid #bfbfbf; padding:12px 46px 11px 26px; line-height: 1;}
.pdt_list ul {display: flex; flex-wrap: wrap; gap:25px}
.pdt_list ul li {width:calc((100% - 25px) / 2); border: 1px solid #adc3cd; border-radius:16px; overflow: hidden; margin-bottom:10px;}
.pdt_list_t {background: #edf4f7; font-size: 22px; text-align: center; letter-spacing: -0.03em; font-weight:500; padding:30px 10px 25px; line-height: 1.2;}
.pdt_list_pic {padding:30px 35px;}
.pdt_list_img {display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px;}
.list_img_a {width: 66px;}
.list_img_a a {display: flex; justify-content: center;}
.list_img_a.disable a {pointer-events: none; cursor: default;opacity:0.4}
.list_img_a img {width: 22px;}
.pdt_list_page { display: flex; justify-content: center; gap:6px; height: 10px;}
.pdt_list_page span {width: 10px; height: 10px; border: 1px solid #cacaca; display: inline-block; border-radius: 5px;}
.pdt_list_page span.active {background: #cacaca;}
.pdt_list_cont {display:flex; flex-direction:column; padding:0 35px 25px}
.list_cont_in {display: flex; padding-bottom: 16px; font-size: 16px; align-items: center;}
.list_cont_in.align_t {align-items: flex-start;}
.list_cont_in1 {width:84px; min-width:84px;}
.list_cont_in1 span {background:#adc3cd; padding:8px 0; line-height: 1; border-radius:18px; display: block; text-align: center; color:#fff; font-weight: 600;}
.list_cont_in2 {padding:0 0 0 15px; line-height: 1.3;}
.list_cont_in2 a.go {background: url("../../img/icon_go.png") right 12px top 7px no-repeat; background-size: 14px; font-size: 14px; color: #888; border-radius:4px; display:inline-block; border: 1px solid #bfbfbf; padding:8px 30px 8px 15px; line-height: 1}
.list_img_i { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; position: relative;}
.list_img_i img { width: 100%; height: 100%; object-fit: contain; }
.pdt_list_more {display: flex; justify-content: center; padding:30px 0;}
.pdt_list_more a {border: 1px solid #d9d9d9; font-size: 22px; line-height: 1; background: url("../../img/icon_arrow3.png") right 32px center no-repeat; background-size:20px; padding: 12px 60px 12px 40px; border-radius:30px; color: #a5a5a5;}

body.modal-open { overflow: hidden;}
.modal-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: 999;}
.modal {background: #fff;  border-radius:12px; padding:10px 40px; width:90%; max-height:92vh; overflow: auto; max-width: 900px; position: relative;}
.modal-close { position: absolute; top:20px; right:20px; background: none; border: none; width: 40px; height: 40px; cursor: pointer;}
.modal-close::before, .modal-close::after {  content: '';  position: absolute;  left: 50%;  top: 50%;  width: 2px; height:30px;  background-color: #aaa;  transform-origin: center;}
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg);}
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg);}
.sub_top_tit.st2 {padding:30px 0 20px; height: 320px; align-items:center; height:auto; border-bottom: 1px solid #cedceb}
.sub_top_tit.st2 .sub_top_tit3 {font-size:28px; color: #666; font-weight:600; letter-spacing: -0.04em; padding:5px 0 0 2px}
.sub_view {padding:30px 12px;}
.sub_view_in {display: flex; padding-bottom: 30px;}
.sub_view_in.st2 {flex-direction: column;}
.sub_view_in.align_c {align-items: center;}
.sub_view_in p {padding-right: 16px;}
.sub_view_in p span {font-size:20px; font-weight:600; padding:9px 0; border-radius:20px; display: block; color: #0a509d; line-height: 1; border: 1px solid #b5cae1; width: 120px; text-align: center;}
.sub_view_in ul li {font-size: 16px; background: url("../../img/icon_dot.png") left top 12px no-repeat; background-size: 4px; padding:6px 0 6px 7px; line-height: 1.3;}
.sub_view_cont img {max-width: 100%;}
.sub_view_cont2 {padding: 18px 20px 0;}
.sub_view_cont2_1 {background: #0a509d; color: #fff; font-size: 18px; font-weight:600; line-height: 1; display: inline-block; padding:3px 5px!important; margin-bottom:4px;}
.sub_view_cont2_2 {background: url("../img/icon_dot.png") left top 12px no-repeat; font-size: 16px; font-weight:600; background-size: 4px; padding:6px 0 6px 7px; }
.sub_view_cont2_2 b {color: #888; font-weight: normal; font-size: 16px; padding-left: 4px ; line-height: 1.3;}

.__model__{display: none;}
footer .pc-only{display: none;}
body.pc-mode footer .pc-only{display: block;}
.list-content2 .list-box2 .list-item .product-content{padding:0 15px;height: calc(100% - 32px);}
.list-content2 .list-box2 .list-item .img-box{ width: 100%;height:334px;padding:34px 0 40px;aspect-ratio: 1 / 1;position: relative;/*box-sizing: content-box;*/}
.list-content2 .list-box2 .list-item .img-box .imageSwiper{height:266px;position: relative;overflow: hidden;margin:0 25px;}
.list-content2 .list-box2 .list-item .img-box .img-item{width: 250px;height: 100%;    aspect-ratio: 1 / 1;overflow: hidden;}
.list-content2 .list-box2 .list-item .img-box .img-item > img{width: 100%;height: 100%;object-fit: contain;background-color: #ffffff;}

/* Prev 버튼 */
.swiper-button-prev {
  background: url('/new_2025/img/icon_arrow2_prev.png') no-repeat center;
  background-size: contain;
  width: 20px;  /* 이미지 크기에 맞게 조정 */
  height: 40px;
}

/* Next 버튼 */
.swiper-button-next {
  background: url('/new_2025/img/icon_arrow2_next.png') no-repeat center;
  background-size: contain;
  width: 20px;
  height: 40px;
}

/* Swiper의 기본 화살표 제거 */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* 비활성 상태의 점 색상 */
.swiper-pagination-bullet {
  background: #fff; /* 원하는 색 */
  opacity: 1; /* 기본은 0.2라서 색이 흐림 → 진하게 */
}

/* 활성화된 점 색상 */
.swiper-pagination-bullet-active {
  background: #cacaca; /* 원하는 활성 색 */
}

.sub_top_mark {animation: scaleUp 0.6s ease-in-out;}
@keyframes scaleUp {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.sub_top_tit1 { opacity: 0; transform: translateY(-30px);  animation: fadeDown 1s ease-out forwards;}
@keyframes fadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sub_top_tit2 {opacity: 0; transform: translateY(30px);  animation: fadeUp 1s ease-out forwards;}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sub_top_tit3 { opacity: 0; animation: fadeIn 2s forwards; animation-delay: 0.8s;}
@keyframes fadeIn {
  to { opacity: 1; }
}






.if_mob {display: none;}


@media (max-width:1024px) {
.main_mark {width: 100%;}
.main_top_tit {padding-left:80px}
.sub_menu {display: none;}
}

@media (max-width:850px) {
footer .wrap {padding:26px 12px 28px; border-top: 1px solid #eee;}
header {height: 60px;}
.menu {display: none;}
.hamburger {display: block;cursor: pointer; }
.mobile-menu {position: fixed;top: 0;right: 0;width:76%;height: 100%;background: white;box-shadow: -2px 0 5px rgba(0,0,0,0.1);transform: translateX(100%);transition: transform 0.3s ease;padding:1.2rem 1.5rem;display: flex;flex-direction: column; z-index: 1001; }
.mobile-menu.active {transform: translateX(0);}
.mobileMenu_mn {display: flex;flex-direction: column; border-top: 1px dashed #ddd; margin-top: 16px;}
.mobileMenu_mn a {color: #777;text-decoration: none;font-size:18px; text-align: center; border-bottom: 1px dashed #ddd; padding: 16px 0;}
.mobileMenu_mn a.active {color: #104393; font-weight:600;}
.mobileMenu_link {display: flex; gap:18px; justify-content: center; padding: 20px 0;}
.mobileMenu_link a img {width:36px;}
.mobileMenu_pc {text-align: center; padding-top:20px;}
.mobileMenu_pc a {color: #999; font-size: 14px; border: 1px solid #eee; border-radius:20px; padding:8px 18px; display: inline-block;}
.close-btn {align-self: flex-end;font-size: 1.5rem;cursor: pointer;}
.if_mob {display:block;}
.if_web {display:none;}
.h_logo img {height:40px;}
header .wrap {padding: 13px 14px;}
.h_menu {gap:6px;}
.h_menu a img {width:32px}
.hamburger img {width:26px; margin:3px 4px 0;}
.main_mark {flex-direction: column; padding-left:30px; padding-right:30px; padding-top:20px;}
.main_mark li {width: 100%;}

.main_top_bg {background: url("../../img/main_img_m.jpg") center top no-repeat; background-size: cover; height: auto;}
.main_top_img {position: absolute; left:50%; top:400px; margin-left: -90px; }
.main_top_img img {width:200px;}
.main_top_tit {padding:30px 2% 0; display: flex; justify-content: flex-start; flex-direction: column; height: 590px;}
.main_top_tit1 {padding: 20px 10% 12px}
.main_top_tit1 img {max-width:100%}
.main_top_tit1, .main_top_tit2.if_mob, .main_top_tit3  {justify-content: center; display: flex; text-align: center}
.main_top_tit2 img {width:80%;}
.main_top_tit3 {padding-top:1.4rem;}
.main_top_tit3 span {font-size:20px;}
.sub_area {padding:26px 5% 0; border-radius:16px}
.tab_mn {overflow-x: auto;  white-space: nowrap; -webkit-overflow-scrolling: touch; margin-right: -4%; padding-bottom: 4px; margin-bottom:18px;}
.tab_mn ul { display: inline-flex; padding: 0; margin: 0; list-style: none;}
.tab_mn li { display: inline-block; white-space: nowrap;}
.tab_mn li a {padding: 12px 16px; font-size: 16px;}
.pdt_list ul {flex-direction: column;}
.pdt_list ul li {width: 100%;}
.sub_top_tit {flex-direction:row-reverse; height: 400px; padding:60px 6% 0; justify-content:space-between; padding-top: 40px;}
.sub_top_tit.st2 {flex-direction:row; justify-content: flex-start; gap:20px;}

.sub_top_tit2 {font-size: 15px; padding-bottom: 10px;}
.sub_top_tit2 br {display: none;}
.sub_top_tit3 a {padding:7px 34px 7px 20px; line-height: 1; background: url("../../img/icon_arrow1.png") #8497aa right 14px top 7px no-repeat; background-size: 14px; font-size: 15px; border-radius: 22px;}
.sub_top_mark {padding-right: 0;}
.sub_top_mark img {width: 90px;}
.sub_bg .wrap {padding-left: 0; padding-right: 0;}
.sub_bg.sub1, .sub_bg.sub2, .sub_bg.sub3, .sub_bg.sub4 {background: none;}
.sub_bg.sub1 .sub_top_tit {background:url("../../img/sub1_img_m.jpg") #fff no-repeat; background-position:center center; background-size: cover}
.sub_bg.sub2 .sub_top_tit {background:url("../../img/sub2_img_m.jpg") #fff no-repeat; background-position:center bottom; background-size: cover}
.sub_bg.sub3 .sub_top_tit {background:url("../../img/sub3_img_m.jpg") #fff no-repeat; background-position:center center; background-size: cover}
.sub_bg.sub4 .sub_top_tit {background:url("../../img/sub4_img_m.jpg") #fff no-repeat; background-position:center center; background-size: cover}
.sub_top_tit1 img {width:90%; max-width:260px;}
.pdt_list_more a {font-size: 18px; padding:10px 60px 10px 40px; }

}

@media (max-width:650px) {
.modal {padding: 10px 15px; width: 96%;}
.sub_top_tit.st2 .sub_top_tit1 {padding-bottom: 12px}
.sub_top_tit.st2 .sub_top_tit1 img {width: 80%}
.sub_top_tit.st2 {gap:10px}
.sub_top_tit.st2 .sub_top_tit3 {font-size:18px;}
.sub_view {padding: 20px 6px;}
.sub_view_in p span {font-size: 18px;}
.sub_view_cont2 {padding: 16px 4px 0;}
.sub_view_in p {padding-right: 0;}
.sub_view_in {flex-direction: column; }
.sub_view_in ul {padding-top: 6px}
.sub_view_in ul li {font-size: 15px;}
.modal-close {top:10px; right:5px;}
.sub_view_in.align_c {align-items: flex-start;}

}

@media (max-width:460px) {

.footer_txt {font-size: 12px;}
.footer_logo img {width: 160px;}
.main_mark {padding-top: 0; padding-left:10px; padding-right:10px;}
.main_mark li {padding: 20px 20px; border-radius: 16px}
.main_mark li::before {border-radius: 16px; padding: 4px;}
.main_mark_img  {padding-right: 14px}
.main_mark_img img {max-width:100px;}
.main_mark_cont img {max-width:90%;}
.main_mark_cont a {font-size: 18px; margin-top: 12px;}
.main_top_img {top:270px; margin-left: -60px;  }
.main_top_img img {width:180px;}
.main_top_tit {height: 510px}
.main_top_tit3 span {padding: 8px 12px}
.pdt_list_pic {padding: 20px 15px;}
.pdt_list_cont {padding: 0 15px 10px}
.pdt_list_t {font-size: 20px; padding: 20px 12px 15px}
.list_cont_in {font-size: 14px;}
.pdt_list ul li {border-radius: 10px}
.list_cont_in1 {width: 74px; min-width: 74px;}
.list_cont_in2 a.go {padding: 6px 30px 6px 14px; font-size:13px}
.btn_download a {padding:10px 36px 9px 16px; font-size: 15px; background: url("../../img/icon_down.png") right 14px top 8px no-repeat; background-size:17px}

}