@charset "utf-8";


.dficare_btn1 {display:block; width:fit-content; background:#0097e0; font-size:1.125em; color:#fff; font-weight:600; font-family:var(--font-outfit); padding:12px 32px; border-radius:30px; transition:background 0.5s, color 0.5s, border-color 0.5s;}
.dficare_btn1:hover {background:#003894;}
.dficare_btn1.case2 {background:none; border:2px solid #fff;}
.dficare_btn1.case2:hover {background:#0097e0; border-color:#0097e0; color:#fff;}

.dficare_btn2 {display:block; width:fit-content; background:#0097e0; font-size:1.125em; color:#fff; font-weight:600; font-family:var(--font-outfit); padding:16px 40px; border-radius:35px; transition:background 0.5s, color 0.5s, border-color 0.5s;}
.dficare_btn2:hover {background:#003894;}
.dficare_btn2.case2 {background:none; border:2px solid #0097e0; color:#0097e0;}
.dficare_btn2.case2:hover {background:#0097e0; border-color:#0097e0; color:#fff;}

@media screen and (max-width:1024px){
    .dficare_btn1 {font-size:1em; padding:10px 20px;}
    
    .dficare_btn2 {font-size:1em; padding:12px 25px;}
}

@media screen and (max-width:767px){
    .dficare_btn1 {padding:8px 16px;}

    .dficare_btn2 {padding:10px 20px;}
}


/* header */
#dficare_header {display:flex; justify-content:space-between; align-items:center; width:100%; height:104px; padding:0 40px; position:fixed; left:0; top:0; z-index:500; transition:all 0.5s; transition-property:height, background;}

#dficare_header .h_util {display:flex; align-items:center; gap:24px; position:relative; z-index:10;}
#dficare_header .h_lang {position:relative;}
#dficare_header .h_lang:before {content:''; display:block; width:100%; height:34px; background:rgba(0,151,224,0.5); border-radius:17px; position:absolute; left:0; top:0; z-index:0; transition:height 0.5s 0.1s}
#dficare_header .h_lang button {display:block; height:34px; font-size:0.875em; color:#fff; font-family:var(--font-outfit); font-weight:500; padding:0 16px; position:relative; z-index:5;}
#dficare_header .h_lang button:after {content:'\f0ac'; font-size:1em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'; margin-left:8px;}
#dficare_header .h_lang ul {display:none; width:100%; position:absolute; left:0; top:100%; z-index:5;}
#dficare_header .h_lang ul li a {display:flex; align-items:center; height:34px; font-size:0.875em; color:#fff; font-family:var(--font-outfit); font-weight:500; padding:0 16px;}
#dficare_header .h_lang.on:before {height:68px; transition-delay:0s;}

#dficare_logo {width:117px; height:56px; background:url(../images/logo_w.svg) no-repeat center center; background-size:contain; position:relative; z-index:10;}
#dficare_logo a {display:block; width:100%; height:100%;}

#dficare_gnb {width:100%; position:absolute; left:0; top:0;}
#dficare_gnb > ul {display:flex; justify-content:center; align-items:center; width:100%;}
#dficare_gnb > ul > li {position:relative;}
#dficare_gnb > ul > li > a {display:block; font-size:1.25em; color:#fff; line-height:104px; font-weight:600; font-family:var(--font-outfit); padding:0 32px; transition:line-height 0.5s;}
#dficare_gnb > ul > li > ul {width:210px; background:rgba(0,151,224,0.7); border-radius:10px; position:absolute; left:50%; top:100%; transform:translateX(-50%); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:all 0.6s; transition-property:opacity, visibility, margin-top;}
#dficare_gnb > ul > li > ul > li:not(:last-child):after {content:''; display:block; width :100%; height:1px; background:linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.50) 50.03%, rgba(255, 255, 255, 0.00) 100%, rgba(255, 255, 255, 0.00) 100.01%)}
#dficare_gnb > ul > li > ul > li > a {display:block; font-size:1em; color:#fff; font-family:var(--font-outfit); text-align:center; padding:20px 0; transition:color 0.3s;}
#dficare_gnb > ul > li > ul:hover > li > a {color:rgba(255,255,255,0.4);}
#dficare_gnb > ul > li > ul > li > a:hover {color:#fff;}
#dficare_gnb > ul > li > a.link:after {content:'\e09f'; display:inline-block; font-size:0.9em; font-weight:400; line-height:1.2em; font-family:'Font Awesome 6 Pro'; margin-left:8px;}
#dficare_gnb > ul > li > a.link:hover:after {animation:gnbLink 1s ease-in-out infinite;}
#dficare_gnb > ul > li:hover > ul {opacity:1; visibility:visible;}

#all_gnb {width:100%; height:100vh; background:#11181c url(../images/sitemap_bg.png) no-repeat right bottom; position:fixed; left:0; top:0; z-index:40; padding:0 13%; opacity:0; visibility:hidden; transition:all 0.6s; transition-property:opacity, visibility;}
#all_gnb > ul {display:flex; justify-content:center; flex-direction:column; width:100%; height:100%; border-left:1px solid rgba(255,255,255,0.15); position:relative;}
#all_gnb > ul:after {content:''; display:block; width:1px; height:100%; background:rgba(255,255,255,0.15); position:absolute; left:600px; top:0; pointer-events:none;}
#all_gnb > ul > li {width:600px; position:relative;}
#all_gnb > ul > li > a {display:block; width:100%; font-size:3.125em; color:#666; font-weight:600; line-height:1.5em; font-family:var(--font-outfit); padding:15px 0 15px 80px; transition:color 0.5s;}
#all_gnb > ul > li > ul {display:flex; flex-wrap:wrap; gap:20px 40px; width:calc(100vw - 13% - 600px); position:absolute; left:100%; top:50%; transform:translateY(-50%); padding-left:100px; opacity:0; visibility:hidden; transition:all 0.5s; transition-property:opacity, visibility;}
#all_gnb > ul > li > ul > li > a {font-size:1.375em; color:#fff; font-weight:500; font-family:var(--font-outfit); white-space:nowrap; transition:color 0.4s;}
#all_gnb > ul > li > ul.on > li > a {color:#666;}
#all_gnb > ul > li > ul > li > a:hover {color:#fff;}
#all_gnb > ul > li > a.link:after {content:'\e09f'; display:inline-block; font-size:0.9em; font-weight:400; line-height:1em; font-family:'Font Awesome 6 Pro'; margin-left:25px;}
#all_gnb > ul > li > a.link:hover:after {animation:gnbLink 1s ease-in-out infinite;}

#menuOpen {display:flex; justify-content:space-between; flex-direction:column; width:16px; height:16px;}
#menuOpen span {display:flex; justify-content:space-between; width:100%; height:6px;}
#menuOpen span:before, #menuOpen span:after {content:''; display:block; width:6px; height:100%; background:#fff;}

#menuClose {position:absolute; width:36px; height:36px; top:40px; right:80px;}
#menuClose span {display:block; width:20px; height:2px; background:#fff; position:absolute; left:50%; top:50%;}
#menuClose span:nth-child(1) {transform:translate(-50%, -50%) rotate(45deg)}
#menuClose span:nth-child(2) {transform:translate(-50%, -50%) rotate(-45deg)}

#dficare_header.on #all_gnb {opacity:1; visibility:visible;}

#dficare_header.scroll_on {background:rgba(17,24,28,0.8); backdrop-filter:blur(15px);}
#dficare_header.scroll_on #dficare_gnb > ul > li > a {line-height:90px;}
#dficare_header.scroll_on #dficare_gnb > ul > li > ul {margin-top:10px;}

@keyframes gnbLink {
    0% {transform:translate(0, 0); opacity:1;}
    35% {transform:translate(130%, -130%); opacity:0;}
    36% {transform:translate(-130%, 130%); opacity:0;}
    70% {transform:translate(0, 0); opacity:1;}
    100% {transform:translate(0, 0); opacity:1;}
}

@media screen and (min-width:1025px){
    #all_gnb > ul > li:hover > a {color:#fff;}
    #all_gnb > ul > li:hover > ul {opacity:1; visibility:visible;}

    #dficare_header.scroll_on {height:90px;}
}

@media screen and (max-width:1599px){
    #all_gnb {padding:0 6%;}
    #all_gnb > ul:after {left:450px;}
    #all_gnb > ul > li {width:450px;}
    #all_gnb > ul > li > a {font-size:2.5em; padding-left:40px;}
    #all_gnb > ul > li > ul {width:calc(100vw - 12% - 450px); padding-left:50px;}
    #all_gnb > ul > li > ul > li > a {font-size:1.25em;}
}

@media screen and (max-width:1220px){
    #dficare_header {padding:0 6%;}

    #dficare_gnb > ul > li > a {font-size:1.125em; padding:0 20px;}

    #menuClose {right:3%; top:15px;}
}

@media screen and (max-width:1024px){
    #dficare_header {height:50px;}

    #dficare_header .h_util {gap:0 15px;}
    #dficare_header .h_lang:before {height:32px; border-radius:16px;}
    #dficare_header .h_lang button {height:32px; padding:0 12px;}
    #dficare_header .h_lang ul li a {height:32px; padding:0 12px;}
    #dficare_header .h_lang.on:before {height:64px;}

    #dficare_logo {width:73px; height:35px;}

    #dficare_gnb {display:none;}

    #all_gnb {background-size:100% auto;}
    #all_gnb > ul {border-left:0;}
    #all_gnb > ul:after {left:260px;}
    #all_gnb > ul > li {width:260px;}
    #all_gnb > ul > li > a {font-size:1.8em; padding:15px 0;}
    #all_gnb > ul > li > ul {gap:15px 20px; width:calc(100vw - 12% - 260px); padding-left:30px;}
    #all_gnb > ul > li > ul > li > a {font-size:1.125em;}
    #all_gnb > ul > li > a.link:after {margin-left:15px;}
    #all_gnb > ul > li.on > a {color:#fff;}
    #all_gnb > ul > li.on > ul {opacity:1; visibility:visible;}
}

@media screen and (max-width:767px){
    #dficare_header .h_lang:before {height:28px; border-radius:14px;}
    #dficare_header .h_lang button {height:28px; padding:0 10px;}
    #dficare_header .h_lang ul li a {height:28px; padding:0 10px;}
    #dficare_header .h_lang.on:before {height:56px;}
    
    #all_gnb > ul {justify-content:start; border-left:0; padding-top:100px;}
    #all_gnb > ul:after {left:170px;}
    #all_gnb > ul > li {width:170px;}
    #all_gnb > ul > li > a {font-size:1.4em; padding:10px 0;}
    #all_gnb > ul > li > ul {gap:15px; flex-direction:column; width:calc(100vw - 12% - 170px); padding-left:20px; top:13px; transform:translateY(0)}
    #all_gnb > ul > li > ul > li > a {font-size:1.125em; white-space:unset}
    #all_gnb > ul > li > a.link:after {margin-left:8px;}

    #menuOpen {width:14px; height:14px;}
    #menuOpen span {height:5px;}
    #menuOpen span:before, #menuOpen span:after {width:5px;}
}


/* footer */
#dficare_footer {width:100%; background:#11181c; padding:40px 0 70px;}
#dficare_footer .box1 {display:flex; align-items:end; gap:16px}
#dficare_footer .f_logo {height:48px;}
#dficare_footer .f_logo img {height:73%;}
#dficare_footer .f_member {display:flex; align-items:center; gap:5px;}
#dficare_footer .f_member a {display:block; border:1px solid #666; border-radius:30px; font-size:0.875em; color:#666; font-family:'Pretendard'; padding:4px 10px;}
#dficare_footer .f_info {margin-top:20px;}
#dficare_footer .f_info li {display:inline-block; font-size:1em; color:#fff; font-weight:500; margin:4px 16px 0 0; line-height:1.4em;}
#dficare_footer .f_info li strong {font-weight:700;}
#dficare_footer .f_info li a {color:#fff;}
#dficare_footer .f_info li b {color:#666; font-weight:700; margin-right:8px;}
#dficare_footer .copy {font-size:1em; color:#fff; font-weight:600; margin-top:20px;}

@media screen and (max-width:1024px){
    #dficare_footer {padding:5% 0;}
    #dficare_footer .f_logo {height:40px;}
}

@media screen and (max-width:767px){
    #dficare_footer .box1 {gap:10px;}
    #dficare_footer .f_logo {height:35px;}
    #dficare_footer .f_info {margin-top:15px}
    #dficare_footer .f_info li {margin:4px 12px 0 0;}
    #dficare_footer .f_info br {display:none;}
    #dficare_footer .f_info li b {margin-right:5px;}
    #dficare_footer .copy {margin-top:15px;}
}

#Quick {width:72px; position:fixed; right:40px; bottom:40px; z-index:150;}
#Quick a {float:right; display:block; width:72px; height:72px; position:relative; margin-bottom:4px; transition:width 0.5s ease-in-out}
#Quick a i {display:flex; justify-content:center; align-items:center; width:72px; height:100%; background:#0097e0; border-radius:50%; font-size:1.5em; color:#fff; position:absolute; left:0; top:0; z-index:3;}
#Quick a span {display:flex; align-items:center; width:100%; height:100%; background:#0097e0; border-radius:36px; font-size:1.125em; color:#fff; font-weight:600; font-family:var(--font-outfit); position:absolute; left:0; top:0; z-index:2; white-space:nowrap; overflow:hidden; padding-left:72px;}
#Quick a:hover {width:190px;}
#Quick .go_top {display:block; width:48px; height:48px; background:rgba(102,102,102,0.3); border-radius:50%; font-size:1em; color:#fff; clear:both; margin:0 auto;}

@media screen and (max-width:1220px){
    #Quick {right:6%;}
}

@media screen and (max-width:1024px){
    #Quick {width:60px; bottom:30px;}
    #Quick a {width:60px; height:60px;}
    #Quick a i {width:60px; font-size:1.3em;}
    #Quick a span {font-size:1em; padding-left:60px;}
    #Quick a:hover {width:160px;}
    #Quick .go_top {width:40px; height:40px; font-size:0.875em;}
}

@media screen and (max-width:767px){
    #Quick {width:32px; bottom:15px;}
    #Quick a {width:32px; height:32px; margin-bottom:3px;}
    #Quick a i {width:32px; font-size:1em;}
    #Quick a span {padding-left:32px;}
    #Quick a:hover {width:32px;}
    #Quick .go_top {width:32px; height:32px;}
}


/* main */
#mVisu {width:100%; height:100vh; overflow:hidden; position:relative;}
#mVisu .scroll_box {position:absolute; left:50%; bottom:55px; transform:translateX(-50%); z-index:50;}
#mVisu .scroll_box i {display:block; width:6px; height:36px; background:rgba(255,255,255,0.5); border-radius:10px; margin:0 auto; position:relative; overflow:hidden;}
#mVisu .scroll_box i:before {content:''; display:block; width:6px; height:6px; background:#fff; border-radius:50%; position:absolute; left:0; top:0; animation:mVisuScroll 2s ease-in-out infinite;}
#mVisu .scroll_box p {font-size:0.875em; color:#fff; line-height:1.2em; font-weight:600; font-family:var(--font-outfit); margin-top:16px;}
.mVisu_slide {width:100%; height:100%; position:relative}
.mVisu_slide .swiper-slide {display:flex; justify-content:center; align-items:center;}
.mVisu_slide .img {width:100%; height:100%; background-color:#11181c; background-repeat:no-repeat; background-position:center center; background-size:cover; position:absolute; left:0; top:0; transform:scale(1.1);}
.mVisu_slide .txt_box {position:relative; z-index:30; margin-top:-80px;}
.mVisu_slide .txt_box .tit {font-size:7.5em; color:#fff; line-height:1em; font-weight:500; font-family:var(--font-outfit);}
.mVisu_slide .txt_box .txt {font-size:1.5em; color:#fff; line-height:1.4em; font-weight:300; margin-top:24px;}
.mVisu_slide .txt_box span {display:block; opacity:0; transform:translateY(100%);}
.mVisu_slide .btn_box {display:flex; align-items:center; gap:0 32px; width:1200px; position:absolute; left:50%; top:50%; transform:translateX(-50%); margin-top:170px; z-index:30;}
.mVisu_slide .swiper-button-prev, .mVisu_slide .swiper-button-next {width:auto; height:auto; font-size:1.125em; color:#fff; position:relative; left:0; top:0; right:0; margin-top:0;}
.mVisu_slide .swiper-button-prev:after, .mVisu_slide .swiper-button-next:after {font-size:1em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'}
.mVisu_slide .swiper-button-prev:after {content:'\f104';}
.mVisu_slide .swiper-button-next:after {content:'\f105';}
.mVisu_slide .swiper-pagination {display:flex; align-items:center; gap:0 10px; position:relative; bottom:0;}
.mVisu_slide .swiper-pagination-bullet {width:20px; height:20px; background:none; opacity:1; position:relative;}
.mVisu_slide .swiper-pagination-bullet:before {content:''; display:block; width:6px; height:6px; background:rgba(255,255,255,0.5); border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)}
.mVisu_slide .swiper-pagination-bullet-active:before {background:#fff;}
.mVisu_slide .swiper-pagination-bullet-active:after {content:''; display:block; width:100%; height:100%; border-radius:50%; padding:2px; background:conic-gradient(#fff var(--progress, 0%), transparent 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transform:scaleX(-1); animation:swiper-ring-fill 5s linear forwards;}

.mVisu_slide .swiper-slide-active .img {transform:scale(1); transition:transform 4700ms ease-in-out}
.mVisu_slide .swiper-slide-active .txt_box span {transition:all 1.5s; transition-property:opacity, transform;}
.mVisu_slide .swiper-slide-active .txt_box .tit span {opacity:1; transform:translateY(0)}
.mVisu_slide .swiper-slide-active .txt_box .txt span {opacity:1; transform:translateY(0); transition-delay:0.8s}

@property --progress {
    syntax:'<percentage>'; inherits:false; initial-value:0%;
}
@keyframes swiper-ring-fill {
    from {--progress:0%;}
    to {--progress:100%;}
}

@keyframes mVisuScroll {
	0% {top:-6px; opacity:0;}
	10% {top:-6px; opacity:1;}
	32% {top:-6px; opacity:1;}
	80% {top:calc(100% + 6px); opacity:1;}
	100% {top:calc(100% + 6px); opacity:0;}
}

@media screen and (max-width:1220px){
    .mVisu_slide .txt_box .tit {font-size:6em;}
    .mVisu_slide .btn_box {width:88%}
}

@media screen and (max-width:1024px){
    #mVisu .scroll_box {bottom:35px;}
    #mVisu .scroll_box p {margin-top:10px;}
    .mVisu_slide .txt_box .tit {font-size:4.5em;}
    .mVisu_slide .txt_box .txt {font-size:1.3em; margin-top:15px;}
    .mVisu_slide .btn_box {gap:0 25px; margin-top:120px;}
    .mVisu_slide .swiper-pagination {gap:0 8px;}
}

@media screen and (max-width:767px){
    #mVisu .scroll_box {bottom:25px;}
    #mVisu .scroll_box i {width:4px; height:26px;}
    #mVisu .scroll_box i:before {width:4px; height:4px;}
    .mVisu_slide .txt_box {margin-top:-50px;}
    .mVisu_slide .txt_box .tit {font-size:2.7em;}
    .mVisu_slide .txt_box .txt {font-size:1.125em; margin-top:10px;}
    .mVisu_slide .btn_box {gap:0 15px; margin-top:80px;}
    .mVisu_slide .swiper-pagination {gap:0 6px;}
    .mVisu_slide .swiper-pagination-bullet {width:16px; height:16px;}
    .mVisu_slide .swiper-pagination-bullet:before {width:4px; height:4px;}
}


.main_title h2 {display:flex; align-items:center; font-size:1.25em; color:#0097e0; font-weight:600; font-family:var(--font-outfit); margin-bottom:24px;}
.main_title h2:after {content:''; display:block; width:40px; height:1px; background:#0097e0; margin-left:16px;}
.main_title .tit {font-size:3.125em; line-height:1.2em; font-weight:700;}
.main_title .txt {font-size:1.25em; color:#666; line-height:1.5em; margin-top:24px;}

@media screen and (max-width:1024px){
    .main_title h2 {font-size:1.125em; margin-bottom:15px;}
    .main_title h2:after {width:35px; margin-left:10px;}
    .main_title .tit {font-size:2.7em;}
    .main_title .txt {font-size:1.125em; margin-top:15px;}
}

@media screen and (max-width:767px){
    .main_title h2 {margin-bottom:2%;}
    .main_title h2:after {width:30px;}
    .main_title .tit {font-size:2em;}
    .main_title .txt {font-size:1em; margin-top:2%;}
}


#mAbout {width:100%; position:relative; padding-top:160px;}
#mAbout:before {content:''; display:block; width:100%; height:100%; background:url(../images/mAboutBG.png) no-repeat right top; position:absolute; right:40px; top:40px;}
#mAbout > div {position:relative; z-index:10;}
#mAbout .main_title {position:relative; padding-right:160px;}
#mAbout .main_title .dficare_btn1 {position:absolute; right:0; bottom:0;}
#mAbout .img_box {width:100%; height:400px; background:url(../images/mAbout_img1.png) no-repeat center center; background-size:cover; border-radius:20px;}
#mAbout ul {display:flex; flex-wrap:wrap; width:100%; margin-top:120px;}
#mAbout ul li {width:33.33%;}
#mAbout ul li .icon {display:block; width:100%; height:256px; background-repeat:no-repeat; background-position:center center; background-size:auto 100%;}
#mAbout ul li dl {margin-top:24px; text-align:center;}
#mAbout ul li dl dt {font-size:1.5em; color:#0097e0; line-height:1.3em; font-weight:600; font-family:var(--font-outfit)}
#mAbout ul li dl dd {font-size:1.25em; color:#666; line-height:1.5em; margin-top:16px;}

#mAbout ul li .icon1 {background-image:url(../images/mAbout_icon1.svg)}
#mAbout ul li .icon2 {background-image:url(../images/mAbout_icon2.svg)}
#mAbout ul li .icon3 {background-image:url(../images/mAbout_icon3.svg)}

@media screen and (max-width:1220px){
    #mAbout .img_box {height:32vw; border-radius:15px;}
}

@media screen and (max-width:1024px){
    #mAbout {padding-top:16%;}
    #mAbout .main_title {padding-right:120px;}
    #mAbout:before {background-size:60% auto; right:25px; top:25px;}
    #mAbout ul {margin-top:8%;}
    #mAbout ul li .icon {height:200px;}
    #mAbout ul li dl {margin-top:15px;}
    #mAbout ul li dl dt {font-size:1.3em;}
    #mAbout ul li dl dd {font-size:1.125em; margin-top:10px;}
}

@media screen and (max-width:767px){
    #mAbout > div {padding-bottom:45px;}
    #mAbout .main_title {padding-right:0; position:unset}
    #mAbout .main_title .dficare_btn1 {
        right:50%; 
        transform:translateX(50%);
        /* 버튼이 나중에 나타나도록 애니메이션 지연 추가 */
        animation-delay: 0.8s !important; 
        transition-delay: 0.8s !important;
    }
    #mAbout:before {right:0px; top:0px;}
    #mAbout .img_box {height:35vw; border-radius:10px;}
    #mAbout ul {margin-top:5%;}
    #mAbout ul li {
        display:flex; align-items:center; width:100%;
        /* 리스트 항목 간의 여백 2배로 추가 */
        margin-bottom: 40px; 
    }
    #mAbout ul li:last-child {
        /* 마지막 리스트는 여백 제외 */
        margin-bottom: 0; 
    }
    #mAbout ul li .icon {width:110px; height:90px;}
    #mAbout ul li dl {width:calc(100% - 110px); margin-top:0; text-align:left; padding-left:10px;}
    #mAbout ul li dl dt {font-size:1.2em;}
    #mAbout ul li dl dd {font-size:1em; margin-top:5px;}
}


#mProduct {width:100%; padding-top:160px; overflow:hidden;}
#mProduct .tab_box {width:100%;}
#mProduct .tab_box > button {display:none;}
#mProduct .tab_box ul {justify-content:space-between; width:100%;}
#mProduct .tab_box ul li {width:calc(33.33% - 8px);}
#mProduct .tab_box ul li button {display:block; width:100%; height:63px; background:#f5f5f5; border-radius:5px; font-size:1.125em; color:#666; font-family:var(--font-outfit); transition:all 0.4s; transition-property:background, color;}
#mProduct .tab_box ul li button:hover {color:#0097e0;}
#mProduct .tab_box ul li.on button {background:#0097e0; color:#fff; font-weight:600;}
#mProduct .cont_box > div:not(.on) {display:none;}
.mProduct_slide {width:100%;}
.mProduct_slide .swiper-slide {width:360px;}
.mProduct_slide .img {display:flex; justify-content:center; align-items:center; width:100%; height:360px; overflow:hidden;}
.mProduct_slide .img img {width:auto !important; height:auto !important; max-width:100%; max-height:100%;; transition:transform 0.6s}
.mProduct_slide .subject {font-size:1.25em; line-height:1.5em; font-weight:600; text-align:center; margin-top:16px;}
.mProduct_slide .btn_box {display:flex; justify-content:center; align-items:center; gap:0 24px; width:100%; margin-top:55px;}
.mProduct_slide .swiper-button-prev, .mProduct_slide .swiper-button-next {width:48px; height:48px; background:#f5f5f5; border-radius:50%; font-size:1.25em; color:#11181c; position:relative; left:0; top:0; right:0; margin-top:0; transition:all 0.5s; transition-property:background, color;}
.mProduct_slide .swiper-button-prev:after, .mProduct_slide .swiper-button-next:after {font-size:1em; font-weight:400; font-family:'Font Awesome 6 Pro'}
.mProduct_slide .swiper-button-prev:after {content:'\f104';}
.mProduct_slide .swiper-button-next:after {content:'\f105';}
.mProduct_slide .swiper-button-prev:hover, .mProduct_slide .swiper-button-next:hover {background:#0097e0; color:#fff;}
.mProduct_slide .swiper-pagination {display:flex; align-items:center; gap:0 8px; position:relative; bottom:0;}
.mProduct_slide .swiper-pagination-bullet {width:8px; height:8px; background:#ccc; opacity:1; position:relative;}
.mProduct_slide .swiper-pagination-bullet-active {background:#0097e0;}
.mProduct_slide a:hover .img img {transform:scale(1.1)}

@media screen and (min-width:768px){
    #mProduct .tab_box ul {display:flex !important;}
}

@media screen and (max-width:1024px){
    #mProduct {padding-top:16%;}
    #mProduct .tab_box ul li {width:calc(33.33% - 3.33px)}
    #mProduct .tab_box ul li button {height:50px; font-size:1em;}
    .mProduct_slide .swiper-slide {width:300px;}
	.mProduct_slide .img {height:300px;}
    .mProduct_slide .subject {font-size:1.125em; margin-top:10px;}
    .mProduct_slide .btn_box {gap:0 15px; margin-top:5.5%;}
    .mProduct_slide .swiper-button-prev, .mProduct_slide .swiper-button-next {width:40px; height:40px; font-size:1.125em;}
}

@media screen and (max-width:767px){
    #mProduct .tab_box {position:relative}
    #mProduct .tab_box > button {display:block; width:100%; height:38px; background:#0097e0; border-radius:5px; font-size:1em; color:#fff; font-weight:600; font-family:var(--font-outfit); text-align:left; padding:0 15px; position:relative; z-index:40;}
    #mProduct .tab_box > button:after {content:'\2b'; font-size:0.9em; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:15px; top:50%; transform:translateY(-50%)}
    #mProduct .tab_box > button.on:after {content:'\f068'}
    #mProduct .tab_box ul {display:none; background:#f5f5f5; border-radius:5px; position:absolute; left:0; top:0; padding-top:38px; z-index:30;}
    #mProduct .tab_box ul li {width:100%; border-bottom:1px solid rgba(0,0,0,0.05);}
    #mProduct .tab_box ul li:last-child {border-bottom:0;}
    #mProduct .tab_box ul li button {height:38px; background:none; border-radius:0; font-size:1em; text-align:left; padding:0 15px;}
    #mProduct .tab_box ul li.on button {background:none; color:#0097e0;}
    .mProduct_slide .btn_box {gap:0 12px;}
    .mProduct_slide .swiper-slide {width:250px;}
	.mProduct_slide .img {height:250px;}
    .mProduct_slide .subject {font-size:1.125em; margin-top:5px;}
    .mProduct_slide .swiper-button-prev, .mProduct_slide .swiper-button-next {width:34px; height:34px; font-size:1em;}
    .mProduct_slide .swiper-pagination {gap:0 6px;}
    .mProduct_slide .swiper-pagination-bullet {width:6px; height:6px;}
}


#mNews {width:100%; padding:160px 0; overflow:hidden;}
#mNews .box1 {display:flex; align-items:start; flex-wrap:wrap; width:100%;}
#mNews .main_title {width:calc(100% - 690px)}
#mNews .main_title .dficare_btn1 {margin-top:40px;}
#mNews .notice_box {width:690px; border-top:2px solid #11181c;}
#mNews .notice_box a {display:flex; justify-content:space-between; align-items:center; width:100%; padding:30px 16px; border-bottom:1px solid #ccc;}
#mNews .notice_box .subject {width:calc(100% - 100px); font-size:1.25em; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color 0.4s}
#mNews .notice_box .date {width:100px; font-size:1em; color:#666; text-align:right;}
#mNews .notice_box a:hover .subject {color:#0097e0;}
.mVideo_slide .img {width:100%; height:216px; border-radius:10px; overflow:hidden;}
.mVideo_slide .img div {width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transition:transform 0.5s;}
.mVideo_slide .subject {font-size:1.25em; font-weight:600; text-align:center; margin-top:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mVideo_slide a:hover .img div {transform:scale(1.1)}

@media screen and (max-width:1220px){
    #mNews .main_title {width:400px;}
    #mNews .notice_box {width:calc(100% - 400px)}
    .mVideo_slide .img {height:16vw;}
}

@media screen and (max-width:1024px){
    #mNews {padding:16% 0;}
    #mNews .main_title {width:320px;}
    #mNews .main_title .dficare_btn1 {margin-top:30px;}
    #mNews .notice_box {width:calc(100% - 320px)}
    #mNews .notice_box a {padding:20px 12px;}
    #mNews .notice_box .subject {width:calc(100% - 90px); font-size:1.125em;}
    #mNews .notice_box .date {width:90px;}
    .mVideo_slide .subject {font-size:1.125em;}
}

@media screen and (max-width:767px){
    #mNews .main_title {width:100%; position:relative; margin-bottom:5%;}
    #mNews .main_title .dficare_btn1 {display:none; margin-top:0; position:absolute; right:0; bottom:0;}
    #mNews .notice_box {width:100%}
    #mNews .notice_box a {padding:15px 10px;}
    #mNews .notice_box .subject {width:calc(100% - 70px); font-size:1em;}
    #mNews .notice_box .date {width:70px; font-size:0.9375em;}
    .mVideo_slide .img {height:50vw;}
    .mVideo_slide .subject {font-size:1em; margin-top:10px;}
}


#mContact {width:100%; height:400px; background:#11181c url(../images/mContactBG.png) no-repeat center center; background-size:cover; background-attachment:fixed;}
#mContact > div {display:flex; justify-content:space-between; align-items:center; height:100%;}
#mContact .tit_box h2 {font-size:4.375em; color:#fff; line-height:1em; font-weight:600; font-family:var(--font-outfit)}
#mContact .tit_box p {font-size:1.25em; color:#fff; line-height:1.5em; font-weight:500; margin-top:8px;}

@media screen and (max-width:1024px){
    #mContact {height:auto; padding:15% 0; background-attachment:unset;}
    #mContact .tit_box h2 {font-size:3.7em;}
    #mContact .tit_box p {font-size:1.125em;}
}

@media screen and (max-width:767px){
    #mContact > div {justify-content:center; flex-direction:column; text-align:center;}
    #mContact .tit_box h2 {font-size:2.4em;}
    #mContact .tit_box p {font-size:1em;}
    #mContact .dficare_btn1 {margin-top:20px;}
}


/* sub */
#sVisu {display:flex; justify-content:center; align-items:end; width:100%; height:100vh; padding-bottom:160px;}
#sVisu:before {content:''; display:block; width:100%; height:100vh; background-color:#11181c; background-repeat:no-repeat; background-position:center center; background-size:cover; position:fixed; left:0; top:0; z-index:-1;}
#sVisu > div {display:flex; align-items:end; flex-wrap:wrap;}
#sVisu .txt_box {width:calc(50% + 5px); padding-right:30px; box-sizing:border-box;}
#sVisu .txt_box h2 {font-size:4.375em; color:#fff; font-weight:500; line-height:1.1em; font-family:var(--font-outfit)}
#sVisu .txt_box p {font-size:1.5em; color:#fff; line-height:1.4em; font-weight:700; margin-top:16px;}

.sVisu1:before {background-image:url(../images/sVisu_img1.png)}
.sVisu2:before {background-image:url(../images/sVisu_img2.png)}
.sVisu3:before {background-image:url(../images/sVisu_img3.png)}
.sVisu4:before {background-image:url(../images/sVisu_img4.png)}

@media screen and (max-width:1024px){
    #sVisu {padding-bottom:16%;}
    #sVisu .txt_box h2 {font-size:3.7em;}
    #sVisu .txt_box p {font-size:1.3em;}
}

@media screen and (max-width:767px){
	#sVisu {height:320px; padding-bottom:6%}
    #sVisu .txt_box {width:100%; padding-right:0;}
    #sVisu .txt_box h2 {font-size:2.7em;}
    #sVisu .txt_box p {font-size:1.125em; margin-top:2%;}
}


.sub_menu_wrap {display:flex; width:calc(50% - 5px); background:rgba(255,255,255,0.2); backdrop-filter:blur(20px); border-radius:30px; position:relative; z-index:30;}
.sub_menu_wrap > div {position:relative;}
.sub_menu_wrap > div button {display:block; width:100%; height:60px; font-size:1.125em; color:#fff; font-weight:600; padding:0 24px; text-align:left; position:relative; z-index:10; transition:background 0.2s 0.4s, border-radius 0s 0.6s;}
.sub_menu_wrap > div button:after {content:'\f107'; font-size:0.77em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:24px; top:50%; transform:translateY(-50%)}
.sub_menu_wrap > div button.on:after {content:'\f106'}
.sub_menu_wrap > div ul {display:none; width:100%; background:#0097e0; border-radius:0 0 30px 30px; padding:30px 0 10px; position:absolute; left:0; top:50%; overflow:hidden;}
.sub_menu_wrap > div ul li a {display:block; font-size:1em; color:rgba(255,255,255,0.7); font-weight:500; padding:10px 24px; transition:color 0.4s, background 0.4s}
.sub_menu_wrap > div ul li a.link:after {content:'\e09f'; display:inline-block; font-size:0.9em; font-weight:400; line-height:1.2em; font-family:'Font Awesome 6 Pro'; margin-left:8px;}
.sub_menu_wrap > div ul li.on a, .sub_menu_wrap > div ul li a:hover {color:#fff;}
.sub_menu_wrap .depth1 {width:calc(50% + 7px)}
.sub_menu_wrap .depth1 button {border-radius:30px; background:#0097e0}
.sub_menu_wrap .depth2 {width:calc(50% - 7px)}
.sub_menu_wrap .depth2 button.on {border-radius:30px; background:#003894; transition:background 0s 0s, border-radius 0s 0s;}
.sub_menu_wrap .depth2 ul {background:#003894;}

@media screen and (max-width:1024px){
    .sub_menu_wrap > div button {height:48px; font-size:1em; padding:0 15px;}
    .sub_menu_wrap > div button:after {right:15px;}
    .sub_menu_wrap > div ul {border-radius:0 0 24px 24px; padding:24px 0 10px;}
    .sub_menu_wrap > div ul li a {font-size:0.9375em; padding:8px 15px;}
}

@media screen and (max-width:1024px){
    .sub_menu_wrap {width:100%; margin-top:7%;}
    .sub_menu_wrap > div button {height:38px;}
    .sub_menu_wrap > div ul {border-radius:0 0 19px 19px; padding:19px 0 8px;}
    .sub_menu_wrap > div ul li a.link:after {margin-left:5px;}
}

#sub_content {width:100%; background:#fff; padding:120px 0;}

.sub_title p {display:flex; align-items:center; font-size:1.25em; color:#0097e0; font-weight:600; font-family:var(--font-outfit); margin-bottom:24px;}
.sub_title p:after {content:''; display:block; width:40px; height:1px; background:#0097e0; margin-left:16px;}
.sub_title h3 {font-size:3.125em; line-height:1.2em; font-weight:500; font-family:var(--font-outfit);}

.s_tit1 {font-size:1.875em; line-height:1.33em; font-weight:600;}
.s_tit2 {font-size:1.375em; line-height:1.45em; font-weight:600;}

.s_txt1 {font-size:1.125em; color:#666; line-height:1.55em;}

@media screen and (max-width:1024px){
    #sub_content {padding:12% 0;}
    
    .sub_title p {font-size:1.125em; margin-bottom:15px;}
    .sub_title p:after {width:35px; margin-left:10px;}
    .sub_title h3 {font-size:2.7em;}

    .s_tit1 {font-size:1.5em;}
	.s_tit2 {font-size:1.2em;}

    .s_txt1 {font-size:1em;}
}

@media screen and (max-width:767px){
    .sub_title p {margin-bottom:2%;}
    .sub_title p:after {width:30px;}
    .sub_title h3 {font-size:2em;}
    
    .s_tit1 {font-size:1.3em;}
	.s_tit2 {font-size:1.125em;}
}


.sub_img_box1 {width:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:20px;}
.sub_img_box1.h_520 {height:520px;}

.sub_img_box2 > div {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; width:100%; margin-bottom:40px;}
.sub_img_box2 > div:nth-child(even) {flex-direction:row-reverse;}
.sub_img_box2 > div:last-child {margin-bottom:0;}
.sub_img_box2 > div .img_box {width:50%; height:400px; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:20px;}
.sub_img_box2 > div .txt_box {width:calc(50% - 40px); padding:0 40px;}
.sub_img_box2 > div .txt_box dl dt {font-size:1.875em; line-height:1.33em; font-weight:600;}
.sub_img_box2 > div .txt_box dl dd {font-size:1.125em; color:#666; line-height:1.55em; margin-top:24px;}

@media screen and (max-width:1220px){
    .sub_img_box1.h_520 {height:40vw;}

    .sub_img_box2 > div .img_box {height:29vw;}
    .sub_img_box2 > div .txt_box {width:50%;}
}

@media screen and (max-width:1024px){
    .sub_img_box1 {border-radius:15px;}

    .sub_img_box2 > div {margin-bottom:4%;}
    .sub_img_box2 > div .img_box {border-radius:15px;}
    .sub_img_box2 > div .txt_box {width:calc(50% - 30px); padding:0;}
    .sub_img_box2 > div .txt_box dl dt {font-size:1.5em;}
    .sub_img_box2 > div .txt_box dl dd {font-size:1em; margin-top:15px;}
}

@media screen and (max-width:767px){
    .sub_img_box1 {border-radius:10px;}

    .sub_img_box2 > div {margin-bottom:8%;}
    .sub_img_box2 > div .img_box {width:100%; height:53vw; border-radius:10px;}
    .sub_img_box2 > div .txt_box {width:100%; margin-top:3%;}
    .sub_img_box2 > div .txt_box dl dt {font-size:1.3em;}
    .sub_img_box2 > div .txt_box dl dd {margin-top:1.5%;}
}


.sub_list_box1 > li {font-size:1.125em; color:#666; line-height:1.55em; padding-left:28px; position:relative;}
.sub_list_box1 > li:before {content:''; display:block; width:3px; height:3px; background:#666; border-radius:50%; position:absolute; left:12px; top:12px;}

@media screen and (max-width:1024px){
    .sub_list_box1 > li {font-size:1em; padding-left:20px;}
    .sub_list_box1 > li:before {left:8px; top:9px;}
}

@media screen and (max-width:767px){
    .sub_list_box1 > li {padding-left:15px;}
    .sub_list_box1 > li:before {left:5px; top:8px;}
}


.sAbout_case1 {display:flex; justify-content:center; width:100%;}
.sAbout_case1 > div {width:480px; height:480px; border-radius:50%; padding:40px;}
.sAbout_case1 > div dl {display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; height:100%; background:#fff; border-radius:50%; position:relative; text-align:center;}
.sAbout_case1 > div dl:before {content:''; display:block; width:calc(100% - 40px); height:calc(100% - 40px); border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); pointer-events:none;}
.sAbout_case1 > div dl dt {font-size:1.875em; line-height:1.3em; font-weight:500; font-family:var(--font-outfit)}
.sAbout_case1 > div dl dd {font-size:1.125em; color:#666; line-height:1.55em; margin-top:8px}

.sAbout_case1 > div:first-child {background:rgba(0,56,148,0.1)}
.sAbout_case1 > div:first-child dl {border:2px solid #003894}
.sAbout_case1 > div:first-child dl:before {border:4px solid rgba(0,56,148,0.1)}
.sAbout_case1 > div:last-child {background:rgba(0,151,224,0.1); margin-left:-24px;}
.sAbout_case1 > div:last-child dl {border:2px solid #0097e0}
.sAbout_case1 > div:last-child dl:before {border:4px solid rgba(0,151,224,0.1)}

.sAbout_case2 {display:flex; flex-wrap:wrap; gap:55px 0; width:100%;}
.sAbout_case2 > div {width:33.33%;}
.sAbout_case2 > div .img img {width:100%;}
.sAbout_case2 > div p {font-size:1.125em; color:#666; line-height:1.55em; text-align:center; margin-top:15px;}

@media screen and (max-width:1220px){
    .sAbout_case1 > div {width:450px; height:450px;}
}

@media screen and (max-width:1024px){
    .sAbout_case1 > div {width:320px; height:320px; padding:20px;}
    .sAbout_case1 > div dl:before {width:calc(100% - 20px); height:calc(100% - 20px)}
    .sAbout_case1 > div dl dt {font-size:1.5em;}
    .sAbout_case1 > div dl dd {font-size:1em; margin-top:5px;}

    .sAbout_case1 > div:last-child {margin-left:-10px;}

    .sAbout_case2 {gap:40px 0;}
    .sAbout_case2 > div p {font-size:1em;}
}

@media screen and (max-width:767px){
    /* 위아래 세로 배치로 변경 */
    .sAbout_case1 {flex-direction: column; align-items: center;}
    
    /* 텍스트가 공중에 떠있으므로, 원형 박스의 하단 마진을 120px로 넉넉하게 주어 텍스트와 다음 요소 간의 여백 확보 */
    .sAbout_case1 > div {width:155px; height:155px; padding:10px; margin-bottom:120px !important;}
    
    .sAbout_case1 > div dl:before {width:calc(100% - 10px); height:calc(100% - 10px); border-width:2px !important;}
    .sAbout_case1 > div dl dt {font-size:1.4em;}
    
    /* 모바일에서 텍스트가 너무 찌그러지지 않도록 width를 220px로 살짝 넓힘 */
    .sAbout_case1 > div dl dd {width:220px; position:absolute; left:50%; top:100%; margin-top:25px; padding:0 10px; transform:translateX(-50%)}
    .sAbout_case1 > div dl dd br {display:none;}
    
    /* 두 번째 원(Mission) 좌측으로 당기던 마진 제거하고, Certificate 섹션과의 최종 여백 확보 */
    .sAbout_case1 > div:last-child {margin-left:0 !important; margin-bottom:80px !important;}

    .sAbout_case2 {gap:25px 0;}
    .sAbout_case2 > div {width:50%;}
    .sAbout_case2 > div p {margin-top:8px;}
}


.sHistory_case1 {display:flex; justify-content:end; flex-wrap:wrap; position:relative;}
.sHistory_case1 .sub_title {width:100%; position:sticky; left:0; top:130px;}
.sHistory_case1 .box {width:530px;}
.sHistory_case1 .box > div {margin-bottom:55px;}
.sHistory_case1 .box > div:last-child {margin-bottom:0;}
.sHistory_case1 .box > div .year {font-size:2.5em; line-height:1.1em; font-weight:500; font-family:var(--font-outfit); margin-bottom:15px;}

@media screen and (max-width:1024px){
    .sHistory_case1 .box {width:480px;}
    .sHistory_case1 .box > div {margin-bottom:5.5%;}
    .sHistory_case1 .box > div .year {font-size:2em; margin-bottom:10px;}
}

@media screen and (max-width:767px){
    .sHistory_case1 .sub_title {position:relative; top:0;}
    .sHistory_case1 .box {width:100%;}
    .sHistory_case1 .box > div .year {font-size:1.7em; margin-bottom:2%;}
}


.sLocation_case1 .map_box {width:100%; height:520px; border-radius:20px; overflow:hidden;}
.sLocation_case1 .map_box iframe {width:100%; height:100%;}
.sLocation_case1 .info_box {position:relative; padding-right:170px;}
.sLocation_case1 .info_box .add {font-size:1.5em; line-height:1.4em; font-weight:600;}
.sLocation_case1 .info_box ul {display:flex; flex-wrap:wrap; gap:5px 0; margin-top:16px;}
.sLocation_case1 .info_box ul li {display:flex; align-items:center;}
.sLocation_case1 .info_box ul li:before {content:''; display:block; width:1px; height:16px; background:#ccc; margin:0 15px;}
.sLocation_case1 .info_box ul li:first-child:before {display:none;}
.sLocation_case1 .info_box ul li dl {display:flex; align-items:center;}
.sLocation_case1 .info_box ul li dl dt {font-size:1.125em; font-weight:600; margin-right:8px;}
.sLocation_case1 .info_box ul li dl dd {font-size:1.125em; color:#666;}
.sLocation_case1 .info_box .dficare_btn2 {position:absolute; right:0; top:50%; transform:translateY(-50%)}

@media screen and (max-width:1024px){
    .sLocation_case1 .map_box {height:400px; border-radius:15px;}
    .sLocation_case1 .info_box {padding-right:150px;}
    .sLocation_case1 .info_box .add {font-size:1.3em;}
    .sLocation_case1 .info_box ul li:before {height:14px; margin:0 10px;}
    .sLocation_case1 .info_box ul li dl dt {font-size:1em;}
    .sLocation_case1 .info_box ul li dl dd {font-size:1em;}
}

@media screen and (max-width:767px){
    .sLocation_case1 .map_box {height:220px; border-radius:10px;}
    .sLocation_case1 .info_box {padding-right:0;}
    .sLocation_case1 .info_box .add {font-size:1.2em;}
    .sLocation_case1 .info_box ul {flex-direction:column;}
    .sLocation_case1 .info_box ul li:before {display:none;}
    .sLocation_case1 .info_box .dficare_btn2 {top:auto; bottom:0; transform:translateY(0)}
}


.sContact_case1 .form_box > div {display:flex; align-items:center; flex-wrap:wrap; width:100%; margin-bottom:16px;}
.sContact_case1 .form_box > div > label {display:block; width:118px; font-size:1.125em; line-height:1.55em; font-weight:600;}
.sContact_case1 .form_box > div > label i {color:#0097e0; font-style:normal;}
.sContact_case1 .form_box > div > div {width:calc(100% - 118px)}
.sContact_case1 .form_box > div .form_txt {display:block; width:100%; max-width:432px; height:60px; background:#f5f5f5; border-radius:0; font-size:1.125em; padding:0 20px; border:0;}
.sContact_case1 .form_box > div .form_txt::placeholder {color:#666;}
.sContact_case1 .form_box > div .form_txt::-webkit-input-placeholder {color:#666;}
.sContact_case1 .form_box > div .form_txt:-ms-input-placeholder {color:#666;}
.sContact_case1 .form_box > div .form_txt:focus {outline:none; border:0 !important; box-shadow:none !important;}
.sContact_case1 .form_box > div .form_textarea {display:block; width:100%; height:400px; background:#f5f5f5; border-radius:0; font-size:1.125em; padding:20px; border:0; resize:none;}
.sContact_case1 .form_box > div .form_textarea::placeholder {color:#666;}
.sContact_case1 .form_box > div .form_textarea::-webkit-input-placeholder {color:#666;}
.sContact_case1 .form_box > div .form_textarea:-ms-input-placeholder {color:#666;}
.sContact_case1 .form_box > div .form_textarea:focus {outline:none; border:0 !important; box-shadow:none !important;}
.sContact_case1 .form_box > div .select_box {width:100%; position:relative;}
.sContact_case1 .form_box > div .select_box:after {content:'\f107'; font-size:0.875em; color:#666; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:20px; top:50%; transform:translateY(-50%); pointer-events:none;}
.sContact_case1 .form_box > div .select_box select {display:block; width:100%; height:60px; background:#f5f5f5; border-radius:0; font-size:1.125em; color:#666; padding:0 20px; border:0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.sContact_case1 .form_box > div .select_box select:focus {outline:none; border:0 !important; box-shadow:none !important;}

.sContact_case1 .form_box > div .email_box {display:flex; align-items:center; gap:0 8px;}
.sContact_case1 .form_box > div .email_box .form_txt {max-width:200px;}
.sContact_case1 .form_box > div .email_box .select_box {max-width:200px;}
.sContact_case1 .form_box > div .email_box span {font-size:1.125em; color:#666;}

.sContact_case1 .form_box > div .privacy_box {width:100%; height:160px; background:#f5f5f5; padding:20px; overflow-y:auto;}
.sContact_case1 .form_box > div .privacy_box p {font-size:1.125em; color:#666; line-height:1.55em;}

.sContact_case1 .check_box input {display:none;}
.sContact_case1 .check_box label {display:flex; justify-content:end; align-items:center;}
.sContact_case1 .check_box label:before {content:''; display:flex; justify-content:center; align-items:center; width:24px; height:24px; border:1px solid #ccc; border-radius:5px; font-size:0.875em; color:#fff; font-weight:400; font-family:'Font Awesome 6 Pro'}
.sContact_case1 .check_box label p {font-size:1em; font-weight:600; margin-left:8px;}
.sContact_case1 .check_box input:checked + label:before {content:'\f00c'; border-color:#0097e0; background:#0097e0;}

.sContact_case1 button {margin:16px auto 0;}

@media screen and (max-width:1024px){
    .sContact_case1 .form_box > div {margin-bottom:2%;}
    .sContact_case1 .form_box > div > label {width:90px; font-size:1em;}
    .sContact_case1 .form_box > div > div {width:calc(100% - 90px)}
    .sContact_case1 .form_box > div .form_txt {height:50px; font-size:1em; padding:0 15px;}
    .sContact_case1 .form_box > div .form_textarea {height:250px; font-size:1em; padding:15px;}
    .sContact_case1 .form_box > div .select_box:after {right:15px;}
    .sContact_case1 .form_box > div .select_box select {height:50px; font-size:1em; padding:0 15px;}

    .sContact_case1 .form_box > div .email_box span {font-size:1em;}

    .sContact_case1 .form_box > div .privacy_box {height:130px; padding:15px;}
    .sContact_case1 .form_box > div .privacy_box p {font-size:1em;}
}

@media screen and (max-width:767px){
    .sContact_case1 .form_box > div > label {width:60px;}
    .sContact_case1 .form_box > div > div {width:calc(100% - 60px)}
    .sContact_case1 .form_box > div .form_txt {height:40px; padding:0 10px;}
    .sContact_case1 .form_box > div .form_textarea {height:110px; padding:10px;}
    .sContact_case1 .form_box > div .select_box:after {right:10px;}
    .sContact_case1 .form_box > div .select_box select {height:40px; padding:0 10px;}

    .sContact_case1 .form_box > div .email_box {gap:0; flex-wrap:wrap;}
    .sContact_case1 .form_box > div .email_box .form_txt {width:calc(50% - 10px); max-width:calc(50% - 10px)}
    .sContact_case1 .form_box > div .email_box span {display:block; width:20px; text-align:center;}
    .sContact_case1 .form_box > div .email_box .select_box {width:100%; max-width:100%; margin-top:5px;}

    .sContact_case1 .form_box > div .privacy_box {height:80px; padding:10px;}

    .sContact_case1 .check_box label:before {width:20px; height:20px; border-radius:3px;}
    .sContact_case1 .check_box label p {font-size:0.9375em; margin-left:5px;}
}


.sFaq_case1 .box {width:100%; border-top:2px solid #11181c;}
.sFaq_case1 .box > div button {display:block; width:100%; border-bottom:1px solid #ccc; font-size:1.125em; font-weight:500; text-align:left; padding:24px 40px 24px 20px; position:relative; }
.sFaq_case1 .box > div button:after {content:'\2b'; font-size:0.77em; font-weight:400; font-family:'Font Awesome 6 Pro'; position:absolute; right:20px; top:50%; transform:translateY(-50%)}
.sFaq_case1 .box > div button.on:after {content:'\f068'}
.sFaq_case1 .box > div .cont {display:none; width:100%; background:#f5f5f5; font-size:1.125em; color:#666; line-height:1.55em; padding:20px 20px 40px;}
.sFaq_case1 .box > div button.on + .cont {display:block;}

@media screen and (max-width:1024px){
    .sFaq_case1 .box > div button {font-size:1em; padding:20px 30px 20px 15px;}
    .sFaq_case1 .box > div button:after {font-size:0.875em; right:15px;}
    .sFaq_case1 .box > div .cont {font-size:1em; padding:20px 15px;}
}

@media screen and (max-width:767px){
    .sFaq_case1 .box > div button {padding:15px 30px 15px 10px;}
    .sFaq_case1 .box > div button:after {right:10px;}
    .sFaq_case1 .box > div .cont {padding:15px 10px;}
}

@media screen and (min-width: 767px) {
  .mo_only_br {display: none;}
}



/* Product */
.sProduct_wrap {border-top:2px solid #11181c; margin-top:95px;}
.sProduct_wrap > div {width:100%; margin-top:95px;}
.sProduct_wrap > div .title {font-size:1.875em; line-height:1.3em; font-weight:600; position:relative; padding-left:20px; margin-bottom:40px;}
.sProduct_wrap > div .title:before {content:''; display:block; width:4px; height:24px; background:#0097e0; position:absolute; left:0; top:8px;}

.sProduct_wrap .txt_list1 dt {font-size:1.375em; line-height:1.45em; font-weight:600; margin-top:32px;}
.sProduct_wrap .txt_list1 dt:first-of-type {margin-top:0;}
.sProduct_wrap .txt_list1 dd {font-size:1.125em; color:#666; line-height:1.55em; margin-top:5px;}

.sProduct_wrap .txt_list2 {counter-reset:counter;}
.sProduct_wrap .txt_list2 > li {font-size:1.125em; color:#666; line-height:1.5em; padding-left:26px; position:relative;}
.sProduct_wrap .txt_list2 > li:before {content:counter(counter)'.'; counter-increment:counter; position:absolute; left:0; top:0;}

.sProduct_wrap .table_wrap {overflow-x:auto;}
.sProduct_wrap .table_wrap > table {min-width:600px;}

.sProduct_wrap .table_box1 {width:100%; border-collapse:collapse; }
.sProduct_wrap .table_box1 thead th {background:#0097e0; border-right:1px solid #ccc; font-size:1.125em; color:#fff; line-height:1.5em; font-weight:600; padding:24px 40px; text-align:left;}
.sProduct_wrap .table_box1 tbody th {background:#0097e0; border-bottom:1px solid #ccc; border-top:1px solid #ccc; font-size:1.125em; color:#fff; line-height:1.5em; font-weight:600; padding:24px 24px 24px 40px; text-align:left;}
.sProduct_wrap .table_box1 tbody td {border-top:1px solid #ccc; border-bottom:1px solid #ccc; font-size:1.125em; color:#666; line-height:1.5em; padding:24px;}
.sProduct_wrap .table_box1.w_260 thead th:first-child, .sProduct_wrap .table_box1.w_260 tbody th {width:260px;}

.sProduct_wrap .table_box2 {width:100%; border-collapse:collapse; text-align:center;}
.sProduct_wrap .table_box2 thead th {background:#0097e0; border-right:1px solid #ccc; font-size:1.125em; color:#fff; line-height:1.5em; font-weight:600; padding:24px;}
.sProduct_wrap .table_box2 thead th:last-child {border-right:0;}
.sProduct_wrap .table_box2 tbody td {border-right:1px solid #ccc; border-bottom:1px solid #ccc; font-size:1.125em; color:#666; line-height:1.5em; padding:24px;}
.sProduct_wrap .table_box2 tbody td:last-child {border-right:0;}
.sProduct_wrap .table_box2 tbody td img {max-width:40%;}

.sProduct_wrap .table_box3 {width:100%; border-collapse:collapse; text-align:center;}
.sProduct_wrap .table_box3 thead th {background:#0097e0; border-right:1px solid #ccc; font-size:1.125em; color:#fff; line-height:1.5em; font-weight:600; padding:24px; width:20%;}
.sProduct_wrap .table_box3 thead th:last-child {border-right:0;}
.sProduct_wrap .table_box3 tbody td {border-right:1px solid #ccc; border-bottom:1px solid #ccc; font-size:1.125em; color:#666; line-height:1.5em; padding:24px; width:20%;}
.sProduct_wrap .table_box3 tbody td.borderR {border-right:1px solid #ccc !important;}
.sProduct_wrap .table_box3 tbody td:last-child {border-right:0; border-left:1px solid #ccc;}
.sProduct_wrap .table_box3 tbody td img {max-width:40%;}

.sProduct_wrap .img_list1 {display:flex; flex-wrap:wrap; gap:24px 16px; width:100%;}
.sProduct_wrap .img_list1 > div {width:calc(50% - 8px)}
.sProduct_wrap .img_list1 > div .img {width: 100%; border: 1px solid #ccc; margin-bottom: 16px; /*aspect-ratio: 16/9;*/ overflow: hidden;}

.sProduct_wrap .img_list1 > div .img img {width: 100%; height: 100%; object-fit: cover; /*transform: scale(1.15);*/ object-position: center bottom;}

.sProduct_wrap .img_list2 {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; width:100%;}
.sProduct_wrap .img_list2 .img {width:50%; border:1px solid #ccc;}
.sProduct_wrap .img_list2 .img img {width:100%;}
.sProduct_wrap .img_list2 .txt_box {width:calc(50% - 40px)}

.sProduct_wrap .img_list3 {width: 100%; max-width: 1200px; margin: 0 auto; }
.sProduct_wrap .img_list3 .img {display:flex; justify-content:center; align-items:center; width:100%; border: 1px solid #ccc; padding:50px 0;}
.sProduct_wrap .img_list3 .img img {max-width:100%; display: block;}

.sProduct_wrap .color_list1 > div {display:flex; align-items:center; margin-bottom:30px;}
.sProduct_wrap .color_list1 > div:last-child {margin-bottom:0;}
.sProduct_wrap .color_list1 > div i {display:block; width:120px; height:60px;}
.sProduct_wrap .color_list1 > div dl {width:calc(100% - 120px); padding-left:30px;}
.sProduct_wrap .color_list1 > div dl dt {font-size:1.375em; line-height:1.45em; font-weight:600;}
.sProduct_wrap .color_list1 > div dl dd {font-size:1.125em; color:#666; line-height:1.55em; margin-top:5px;}

.sProduct_wrap .color_list2 > div {display:flex; align-items:center; margin-bottom:30px;}
.sProduct_wrap .color_list2 > div:last-child {margin-bottom:0;}
.sProduct_wrap .color_list2 > div .color {width:120px;}
.sProduct_wrap .color_list2 > div i {display:block; width:100%; height:60px; margin-bottom:5px;}
.sProduct_wrap .color_list2 > div dl {width:calc(100% - 120px); padding-left:30px;}
.sProduct_wrap .color_list2 > div dl dt {font-size:1.375em; line-height:1.45em; font-weight:600;}
.sProduct_wrap .color_list2 > div dl dd {font-size:1.125em; color:#666; line-height:1.55em; margin-top:5px;}

@media screen and (max-width:1024px){
    .sProduct_wrap {margin-top:10%;}
    .sProduct_wrap > div {margin-top:10%;}
    .sProduct_wrap > div .title {font-size:1.5em; margin-bottom:4%; padding-left:15px;}
    .sProduct_wrap > div .title:before {width:3px; height:18px; top:5px;}

    .sProduct_wrap .txt_list1 dt {font-size:1.2em; margin-top:20px;}
    .sProduct_wrap .txt_list1 dd {font-size:1em; margin-top:3px;}

    .sProduct_wrap .txt_list2 > li {font-size:1em; padding-left:20px;}

	.sProduct_wrap .table_box1 thead th {font-size:1em; padding:15px;}
    .sProduct_wrap .table_box1 tbody th {font-size:1em; padding:15px;}
    .sProduct_wrap .table_box1 tbody td {font-size:1em; padding:15px;}
    .sProduct_wrap .table_box1.w_260 thead th:first-child, .sProduct_wrap .table_box1.w_260 tbody th {width:200px;}

    .sProduct_wrap .table_box2 thead th {font-size:1em; padding:15px;}
    .sProduct_wrap .table_box2 tbody td {font-size:1em; padding:15px;}

    .sProduct_wrap .table_box3 thead th {font-size:1em; padding:15px;}
    .sProduct_wrap .table_box3 tbody td {font-size:1em; padding:15px;}

    .sProduct_wrap .img_list1 {gap:20px 10px;}
    .sProduct_wrap .img_list1 > div {width:calc(50% - 5px)}
    .sProduct_wrap .img_list1 > div .img {margin-bottom:10px;}

    .sProduct_wrap .img_list2 .txt_box {width:calc(50% - 25px)}

    .sProduct_wrap .img_list3 {margin-top: 5%;}
	.sProduct_wrap .img_list3 .img {padding:25px 0;}
	
	.sProduct_wrap .color_list1 > div {margin-bottom:25px;}
	.sProduct_wrap .color_list1 > div i {width:100px; height:50px;}
	.sProduct_wrap .color_list1 > div dl {width:calc(100% - 100px); padding-left:20px;}
	.sProduct_wrap .color_list1 > div dl dt {font-size:1.2em;}
	.sProduct_wrap .color_list1 > div dl dd {font-size:1em; margin-top:3px;}
	
	.sProduct_wrap .color_list2 > div {margin-bottom:25px;}
	.sProduct_wrap .color_list2 > div .color {width:100px;}
	.sProduct_wrap .color_list2 > div i {height:50px;}
	.sProduct_wrap .color_list2 > div dl {width:calc(100% - 100px); padding-left:20px;}
	.sProduct_wrap .color_list2 > div dl dt {font-size:1.2em;}
	.sProduct_wrap .color_list2 > div dl dd {font-size:1em; margin-top:3px;}
}

@media screen and (max-width:767px){
    .sProduct_wrap > div .title {font-size:1.3em; padding-left:10px;}
    .sProduct_wrap > div .title:before {width:2px; height:14px; top:3px;}
    
    .sProduct_wrap .txt_list1 dt {font-size:1.125em; margin-top:15px;}

    .sProduct_wrap .txt_list2 > li {padding-left:18px;}

	.sProduct_wrap .table_box1 thead th {padding:12px;}
    .sProduct_wrap .table_box1 tbody th {padding:12px;}
    .sProduct_wrap .table_box1 tbody td {padding:12px;}
    .sProduct_wrap .table_box1.w_260 thead th:first-child, .sProduct_wrap .table_box1.w_260 tbody th {width:120px;}

    .sProduct_wrap .table_box2 thead th {padding:12px;}
    .sProduct_wrap .table_box2 tbody td {padding:12px;}

    .sProduct_wrap .table_box3 thead th {padding:12px;}
    .sProduct_wrap .table_box3 tbody td {padding:12px;}

    .sProduct_wrap .img_list1 {gap:20px 0;}
    .sProduct_wrap .img_list1 > div {width:100%}
    .sProduct_wrap .img_list1 > div .img {margin-bottom:10px;}

    .sProduct_wrap .img_list2 .img {width:100%;}
    .sProduct_wrap .img_list2 .txt_box {width:100%; margin-top:4%;}

    .sProduct_wrap .img_list3 .img {border: 1px solid #ccc; padding: 20px 0;}
	
	.sProduct_wrap .color_list1 > div {margin-bottom:4%;}
	.sProduct_wrap .color_list1 > div i {width:80px; height:45px;}
	.sProduct_wrap .color_list1 > div dl {width:calc(100% - 80px); padding-left:15px;}
	.sProduct_wrap .color_list1 > div dl dt {font-size:1.125em;}
	
	.sProduct_wrap .color_list2 > div {margin-bottom:4%;}
	.sProduct_wrap .color_list2 > div .color {width:80px;}
	.sProduct_wrap .color_list2 > div i {height:45px;}
	.sProduct_wrap .color_list2 > div dl {width:calc(100% - 80px); padding-left:15px;}
	.sProduct_wrap .color_list2 > div dl dt {font-size:1.125em;}
}


.sProduct_wrap .s_txt1 + .img_list2 {margin-top: 45px !important;}

.sProduct_wrap .s_txt1 + .txt_list1,
.sProduct_wrap p + .txt_list1 {margin-top: 45px !important;}
.sProduct_wrap .txt_list2.mt5,
.sProduct_wrap .txt_list1.mt5 {margin-top: 30px !important;}

@media screen and (max-width: 1024px) {
    .sProduct_wrap .s_txt1 + .img_list2,
    .sProduct_wrap .s_txt1 + .txt_list1,
    .sProduct_wrap p + .txt_list1 {margin-top: 30px !important;}
}

.product_slide_thumb img {width: 100% !important; aspect-ratio: 1 / 1 !important; height: 100% !important; object-fit: contain !important; object-position: center !important; background-color: #ffffff !important; }


.link_box ul li a {transition: background-color 0.3s ease !important;}
.link_box ul li a:hover {background-color: #003894 !important;}


.sProduct_wrap .table_box1 tbody tr:only-child th {background: #ffffff !important; color: #11181c !important; border-right: 1px solid #ccc !important;}
#bo_sch .select_box, .bo_sch .select_box {width: 155px !important; min-width: 155px !important;}
#bo_sch .select_box select, .bo_sch .select_box select, #sfl {width: 100% !important; min-width: 100% !important; max-width: none !important; padding-left: 10px !important; padding-right: 30px !important;}
#bo_sch input[type="text"], .bo_sch input[type="text"], #stx {margin-left: 0 !important;}
#bo_list .gall_img, #bo_list .webzine_img, #bo_list .img_wrap, #bo_list .list_img {overflow: hidden !important;}
#bo_list .gall_img img, #bo_list .webzine_img img, #bo_list .img_wrap img, #bo_list .list_img img {transition: transform 0.4s ease-in-out !important;}
#bo_list tbody tr:hover .gall_img img, #bo_list tbody tr:hover .webzine_img img, #bo_list tbody tr:hover .img_wrap img, #bo_list tbody tr:hover .list_img img, #bo_list li:hover .gall_img img, #bo_list li:hover .webzine_img img, #bo_list li:hover .img_wrap img, #bo_list li:hover .list_img img, #bo_list a:hover .gall_img img, #bo_list a:hover .webzine_img img, #bo_list a:hover .img_wrap img, #bo_list a:hover .list_img img {transform: scale(1.1) !important;}
#bo_list tbody tr:hover .td_subject a, #bo_list tbody tr:hover .td_subject a strong, #bo_list .td_subject a:hover, #bo_list .td_subject a:hover strong, .bo_list .subject a:hover, li:hover > .list_subject a {color: #0097e0 !important; transition: color 0.3s ease !important;}

@media screen and (max-width: 767px) {
    #bo_cate {position: relative !important; overflow: hidden !important;}
    #bo_cate::after {content: ''; display: block; position: absolute; top: 0; right: 0; width: 45px; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); pointer-events: none; z-index: 10;}
    
    /* gap을 이용해 간격을 15px로 예쁘게 좁히고, 마지막 메뉴 스크롤 여유 공간을 ul에 직접 부여 */
    #bo_cate ul, #bo_cate_ul {display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 15px !important; padding-right: 45px !important;}
    #bo_cate ul::-webkit-scrollbar, #bo_cate_ul::-webkit-scrollbar {display: none;}
    
    #bo_cate ul li, #bo_cate_ul li {flex-shrink: 0 !important;}
    
    /* a 태그의 강제 여백을 제거하여 밑줄이 글자 길이에 딱 맞게 떨어지도록 복구 */
    #bo_cate ul li a, #bo_cate_ul li a {display: inline-block !important; white-space: nowrap !important;}
}

#bo_v_file {max-width: 100% !important; box-sizing: border-box !important;}
#bo_v_file ul li, #bo_v_file a {word-break: break-all !important; overflow-wrap: break-word !important; white-space: normal !important;}

#bo_list #gall_ul {border-top: 2px solid #11181c !important; padding-top: 20px !important; margin-top: 15px !important; clear: both !important;}