@charset "utf-8";

/* ==========================================================================
	01. reset
   ========================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {margin:0; padding:0; border:0; vertical-align:baseline; box-sizing:border-box;}
input, select, textarea {margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box;}
textarea {resize:none;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}
i, em {font-style:normal;}
blockquote, q {quotes:none;}
sub {vertical-align:sub; font-size:smaller; line-height:0;}
sup {vertical-align:super; font-size:smaller; line-height:0;}
img, fieldset {vertical-align:middle;}
a {color:inherit; vertical-align:inherit; text-decoration:none;}
/* a:link, a:hover {text-decoration:none;} */
h1,h2,h3,h4,h5,h6 {color:inherit; font-weight:inherit; font-size: inherit;}
ol, ul, li {list-style:none;}
table {width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; word-break:normal;}
th, td {text-align:center; vertical-align:middle;}
caption, legend {width:1px; height:1px; margin:-1px 0 0 0; padding:0; border:0;overflow:hidden; font-size:0; color:transparent; line-height:0;}
fieldset, legend {border:0; background-color:transparent;}
hr {height:0; border:0; background-color:transparent;}
button {display:inline-block; border:0; background-color:transparent; font-size:inherit; text-align:center; cursor:pointer; overflow:visible; -webkit-appearance:button; font-family: var(--font-display);}
[role="button"] {cursor:pointer;}
a[href^=tel] {cursor:text; pointer-events:none;}
a[href^=tel]:hover {color:currentColor; text-decoration:none;}
button:focus-visible,
[role="button"]:focus-visible {outline:2px solid #000; -webkit-transition:none !important;}
br{margin: 0;padding: 0;line-height: 1;}
p{word-break: keep-all;}

html {font-size:16px;}
body {min-height:100%;font-size:16px;font-weight:400;color: #555;line-height:1.5;}
html, body {font-family: var(--font-display);}

a,
a:link
a:visited,
a:hover,
a:active,
a:focus {color:#333;vertical-align: top;}

.hidden {display: block; position: absolute; overflow: hidden; top: -999999px; left: -999999px; width: 1px; height: 1px; font-size: 0; text-indent: -999999px; line-height: 0;}
.blind {display:none}
.transition {transition: 0.4s;-webkit-transition: 0.4s;-moz-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s;}

#skip_nav {height:0;}
#skip_nav a {display: block; position: absolute; left: 0; top: -100px; width: 100%; height: 1px; text-align: center}
#skip_nav a:focus, #skip_nav a:active {position: absolute; top: 0; z-index: 999999; height:30px; padding: 5px 0;font-weight: 600; color: #fff; background: #222;}
em {font-style:normal;}


/* ============layout============== */
#wrap{overflow: hidden;}
header{position: absolute;top:40px;left:40px;z-index: 99999;}
header h1{width: 130px;height: 42px;background: url(../images/logo_w.png) no-repeat 0 0;background-size: cover;font-size: 0;}

.tit_area{line-height: 1.3; position:relative;}
.tit_area h2{font-family: var(--font-display);font-size: 50px;font-weight: 700;color: var(--clr-text);}    /* PC H2 톤 통일 — Bold (2026-05-11) */
.tit_area .tit{font-family: var(--font-display);font-size: 55px;font-weight: 500;color: var(--clr-primary);}
.tit_area .text{font-size: 22px;color: #555;margin-top: 20px;margin-bottom: 60px;}
.tit_area .go {position: absolute; bottom: 0;right: 0; font-size: 18px; color: #6e757d; text-align: right;}
.tit_area .go p {position: relative; padding-right: 15px;}
.tit_area .go p::before {content:''; position: absolute; top: 50%; right: 0; width: 8px; height: 18px; margin-top: -9px; background: url('../images/icon_dot02.png') no-repeat center center; background-size: contain;}

.main{height: 913px;}
.main::after{content: "";display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 50%;background: url(../images/main.jpg) no-repeat center 0;background-size: cover;transform: translateX(-50%);z-index: -1;box-sizing: border-box;}
.main .con{position: relative;max-width: 1200px;margin: 0 auto;}
.main .tit_area{padding-top: 300px;animation-name: main_tit;animation-duration: 1s;}
.main .tit_area h2{font-size: 60px;color: #fff;}
.main .tit_area h2 strong{display: block;color: var(--clr-primary);}
.main .tit_area .text{font-size: 24px;color: #fff;}
.main .image1{position: absolute;top:130px;right:0;opacity: 0;animation: slideIn 1s ease-out forwards;}
@keyframes slideIn{
    0% {
        transform: translateX(150px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.container{position: relative;max-width: 1200px;margin: 0 auto;}
.container > div{position: relative;}

.image1{display: inline-block;width: 330px;height: 680px;background: url(../images/mockup.png) no-repeat center 0;background-size: contain;}
.image2{display: inline-block;width: 520px;height: 310px;background: url(../images/icon01.png) no-repeat center 0;background-size: contain;}
.image3{display: inline-block;width: 340px;height: 340px;background: url(../images/icon02.png) no-repeat center 0;background-size: contain;}
.image4{display: inline-block;width: 370px;height: 330px;background: url(../images/icon03.png) no-repeat center 0;background-size: contain;}
.image5{display: inline-block;width: 355px;height: 300px;background: url(../images/icon04.png) no-repeat center 0;background-size: contain;}
.image6{display: inline-block;width: 450px;height: 390px;background: url(../images/icon05.png) no-repeat center 0;background-size: contain;}
.image7{display: inline-block;width: 380px;height: 433px;background: url(../images/service01.png) no-repeat center 0;background-size: contain;}
.image8{display: inline-block;width: 380px;height: 433px;background: url(../images/service02.png) no-repeat center 0;background-size: contain;}

.section1{padding-top: 120px;text-align: center;}
.section1::after{content: "";display: block;width: 200%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background-color: #f5f5f5;z-index: -1;box-sizing: border-box;}
.section2{overflow: hidden;display: flex;justify-content: space-around;align-items: center;height: 730px;}
.section3{height: 750px;text-align: center;padding-top: 100px;}
.section3::after{content: "";display: block;width: 200%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background-color: #f5f5f5;z-index: -1;box-sizing: border-box;}
.section3 .tit_area .text{margin-bottom: 40px;}
.section.homrun{height: 950px;padding-top: 150px;text-align: center;}
.homrun .image6{margin-top: 30px;animation: Jump 1s infinite;}
@keyframes Jump {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(10px)
    }

    to {
        transform: translateY(0)
    }
}
.section.service{text-align: center;display: flex;padding: 140px 0;}
.section.service::after{content: "";display: block;width: 200%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);background-color: var(--clr-primary);z-index: -1;box-sizing: border-box;}
.section.service > div{width: 50%;}
.section.service .tit_area h2{color: #fff;}
.section.service .tit_area .text{color: #fff;}

.main_cont {width: 100%; margin: 0 auto; padding: 150px 0;}
.section_bottom{}

.section {padding: 50px 0;}

.box_area {display: flex; flex-direction: row; flex-wrap: wrap; gap: 50px; margin: 40px auto 0; max-width: 1200px; padding: 0 30px;}
.box_area p.person01::before{background: url(../images/person01.png) no-repeat center center #fff; background-size: cover;}
.box_area p.person02::before{background: url(../images/person02.png) no-repeat center center #fff; background-size: cover;}

.dot_area {padding: 50px 0; display: flex; justify-content: center;}
.dot_area ul {display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px;}
.dot_area ul li {width: 22px;height: 22px; border-radius: 50px; overflow: hidden;}
.dot_area ul li.on {position: relative;}
.dot_area ul li.on a::before {content: ''; position: absolute; top: 50%; left: 50%;  width: 22px; height: 22px; margin-top: -12px; margin-left: -12px; background: url('../images/ball.png') no-repeat center center; z-index: 1;background-size: 100%;}
.dot_area ul li a {display: block; width: 15px; height: 15px; margin: 4px 3.5px 3px 3.5px; border-radius: 50px; overflow: hidden; background-color: #c0c0c0; text-align: center;}

/* section01 */
.section1 .box_area {min-width: 1200px; gap: 70px;}
.section1 .chat_box {min-width: 420px;}
.section1 .chat_box p {display: block; position: relative; min-height: 141px; margin-left: 87px; padding: 30px; border-radius: 17px 17px 17px 0px; background-color: #e8e9eb; font-size: 18px; font-weight: 700; color: #343a40; text-align: left;}
.section1 .chat_box p::before {content: ''; position: absolute; left: 0; bottom: 0; width: 80px; height: 80px; margin-left: -87px; border-radius: 50%;}

/* QNA */
.question {position: relative;min-height: 630px;height: auto;padding: 100px 0;}
.question .box_area .qna_box {display: inline-block; width: 55%; min-width: 450px; padding: 35px; border-radius: 20px; background-color: var(--clr-faq-bg);}
.question .qna_box .quest {position: relative; margin-bottom: 50px; padding-left: 100px; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: #222; line-height: 1.2;} 
.question .qna_box .quest::before {content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 80px; border-radius: 50px;}
.question .qna_box .answer {font-size: 18px; color: #222;}
.section .tit_area{max-width: 1200px;margin: 0 auto;}
.section .tit_area h2{font-size: 44px;} /* C3: 45→44 통일 */

/* 메인 배너 */
.banner .box_area .ban_box {display: block; width: 25%; min-width: 370px;}
.banner .ban_box .ban_img img {margin-bottom: 15px;}
.banner .ban_box .ban_img img {width: 100%;}
.banner .ban_box a {color: #222;}
.banner .ban_box a:hover {text-decoration: underline; text-underline-offset: 2px; transition: ease-in-out 0.3s;}
.banner .ban_box a .tit {display: block; margin-bottom: 15px; font-family: var(--font-display); font-size: 24px; font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.banner .ban_box a .txt {display: -webkit-box; overflow: hidden; margin-bottom: 10px; font-size: 18px; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
.banner .ban_box p {font-size: 18px; color: #6e757d; text-align: right;}

/* 하단 배너 */
.advertise .ad_area {max-width: 1200px; margin: 0px auto;}
.advertise .ad_area a {display: block; position: relative; width: 100%; height: 100%; padding: 80px; border-radius: 15px; background-color: #ffe7a1; font-size: 22px; font-weight: 700; color: #000; text-align: center;}
.advertise .ad_area a span {position: relative;}
.advertise .ad_area a::before {content: ''; position: absolute; top: 50%; left: 60px; width: 140px; height: 155px; margin-top: -77px; background: url('../images/icon06.png') no-repeat center center; background-size: 100%;}

/* footer */
.footer {padding: 30px; font-size: 18px;}
.footer footer .footer_area {text-align: center;}
.footer footer .footer_area ul {display: inline-block; overflow: hidden; margin: 0 auto; padding-bottom: 15px;; color: #495057;}
.footer footer .footer_area ul li {float: left; padding: 0 10px; font-weight: 700;}
.footer footer .footer_area address {font-style: normal; color: #6e757d;}
.footer footer .footer_area address p {line-height: 30px;}
.footer footer .footer_area address .mail a {color: #6e757d; text-decoration: underline; text-underline-offset: 3px;}
.footer footer .footer_area address .copy {font-weight: 700; color: #343a40;}

@media screen and (max-width:1200px){
    .main{padding: 0 30px;}
    .section .tit_area {padding: 0 30px;}
    .tit_area .go {right: 30px;}

    /* 하단배너 */
    /* .advertise .ad_area a p {padding-left: 270px; text-align: left;} */
}
@media screen and (max-width:1000px){
    .main{height: 1260px;padding: 0 30px;text-align: center;}
    .main::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 800px;background-color: var(--clr-primary);clip-path: polygon(0% 100%, 100% 50%, 100% 0%, 0% 0%);}
    .main::after{top: 350px;}
    .main .tit_area {padding-top: 160px;}
    .main .tit_area h2 strong{color: #fff;}
    .main .image1{position: relative;top: auto;right: auto;transform: translateX(-50%);}
    
    .section.service{display: block;padding: 120px 0;}
    .section.service > div{width: 100%;}
    .section.service > div:first-child{margin-bottom: 60px;}

    /* 하단배너 */
    .advertise .ad_area a p {margin-left: 60px;}  
    
}
@media screen and (max-width:800px){
    .tit_area {padding: 0 30px;}
}
@media screen and (max-width:640px){/* mobile version */
    body{font-size: 16px;}
    header {left: 20px; top: 13px;}

    /* .container {padding: 0 10px;} */
    .main {height: 1000px;}
    .main .tit_area{animation-name: main_tit;animation-duration: 1s;}
    .main .tit_area h2{font-size: var(--fs-h2-mobile, 28px);}
    .main .tit_area h2 strong {display: inline;}
    .main .tit_area .text{font-size: var(--fs-caption-mobile, 13px);color: #fff;}
    .main .tit_area {padding-top: 110px; text-align: left;}
    
    .section .tit_area, .tit_area{line-height: 1.3; text-align: left; padding: 0 10px;}
    .tit_area h2 {font-family: var(--font-display);font-size: var(--fs-h2-mobile, 28px);font-weight: 500;color: var(--clr-text);}
    .tit_area .tit{font-family: var(--font-display);font-size: var(--fs-h2-mobile, 28px);font-weight: 500;color: var(--clr-primary);}
    .tit_area .text{font-size: var(--fs-body-mobile, 14px);color: #555;margin-top: 10px;margin-bottom: 50px;}
    .tit_area .go {right: 10px;}
    .tit_area .go p {font-size: var(--fs-caption-mobile, 13px); padding-right: 10px;}
    .tit_area .go p::before {width: 4px; height: 9px; margin-top: -5px;}
    .section .tit_area h2 {font-size: var(--fs-h2-mobile, 28px);}
    .section.service .tit_area .text {margin-top: 5px; margin-bottom: 30px;}

    .image2 {width: 300px; height: 180px;}
    .image3 {width: 200px; height: 197px; margin-bottom: 100px;}
    .image4 {width: 200px; height: 176px; margin-top: 50px;}
    .image5 {width: 200px; height: 168px; margin-bottom: 100px;}
    .image6 {width: 200px; height: 174px; margin-top: 50px!important;}
    .image7,.image8 {width: 381px; height: 434px;}
    

    .section1 {height: 592px; padding-top: 40px;}
    .section1 .tit_area h2 {font-size: var(--fs-h2-mobile, 28px);}
    .section1 .box_area {gap: 10px;}
    .section1 .chat_box {width: 310px;}
    .section1 .chat_box p {min-height: 90px; padding: 15px; font-size: 16px;}
    .section1 .chat_box p::before {width: 50px; height: 50px; margin-left: -55px;}
    .section2 {flex-direction: column-reverse; height: 543px;}
    .section2 .tit_area {width: 100%; margin-top: 30px;}
    .section3 {height: 522px; padding-top: 45px;}
    .section2.bg_type2 {height: 514px; flex-direction: column;}
    .section.homrun {height: 520px; padding: 30px 0;}
    .section.service {height: 1330px; padding: 60px 0;}
    .section.service > div:first-child {margin-bottom: 100px;}
    .section.question {min-height: 415px; height: auto; padding: 60px 0;}
    .section.question .box_area .qna_box {min-width: 310px; min-height: 158px; height: auto; padding: 20px; min-width: auto;}
    .section.question .qna_box .quest {margin-bottom: 30px; padding-left: 60px; font-size: var(--fs-h3-mobile, 18px);}
    .section.question .qna_box .quest::before {width: 50px; height: 50px;}
    .section.question .qna_box .answer {font-size: var(--fs-body-mobile, 14px);}
    .section.banner {height: 505px; padding: 60px 0;}
    .section.banner .ban_box {width: 250px; min-width: auto;}
    .section.banner .ban_box .ban_img {width: 250px; height: 150px; margin-bottom: 10px;}
    .section.banner .ban_box a {margin-top: 10px;}
    .section.banner .ban_box a .tit {margin-bottom: 15px; font-size: 16px;}
    .section.banner .ban_box a .txt {font-size: 13px;}
    .section.banner .ban_box span {font-size: 13px;}
    .section.advertise {padding: 50px;}
    .section.advertise .ad_area a {display: flex; align-items: center; min-height: 170px; margin-left: 0px; padding: 20px; font-size: 16px;}
    .section.advertise .ad_area a::before {left: 20px; width: 120px; height: 130px; margin-top: -65px;}
    .section.advertise .ad_area a span {text-align: left; margin-left: 160px;}

    .box_area {gap: 20px; margin-top: 70px;} 
    .dot_area {padding: 20px 0;}   
    .dot_area ul {gap: 7px;}
    .dot_area ul li {width: 13px; height: 16px;}
    .dot_area ul li a {width: 10px; height: 10px;}
    .dot_area ul li.on a::before {width: 13px; height: 16px; margin-top: -8px; margin-left: -6px;}

    .footer {padding: 30px 10px; font-size: var(--fs-caption-mobile, 13px);}
    .footer footer .footer_area ul {padding: 0;}
    .footer footer .footer_area address p {line-height: 25px;}
}
@media screen and (max-width:430px) {
    .main {height: 705px; padding: 0 10px;}
    .main::before {height: 500px;}
    .main::after {top: 50px;}
    .main .tit_area .text {margin-bottom: 50px;}
    .main .image1 {width: 200px; height: 410px;}
}