@charset "UTF-8";

html {
    height:100%;
}

body {
    min-height:100%;
    overflow: hidden;
}

html,body {
    position: relative;
    font-family:'Pretendard',sans-serif;
    overflow-x: hidden;
    background-color:#ebedf5;
}

#intro {
    width:100%;
    height:100%;
}

#intro::before {
    content:"";
    display:block;
    width:754px;
    height:754px;
    background-image:url(../images/wrap_bg01.png);
    position:absolute;
    left:-372px;
    top:-240px;
}

#intro::after {
    content:"";
    display:block;
    width:388px;
    height:1102px;
    background-image:url(../images/wrap_bg02.png);
    position:absolute;
    right:-50px;
    bottom:-80px;
}

#introwrap {
    position:relative;
    z-index:1;
}

#intro-con {
    width:100%;
    max-width:1060px;
    margin:0 auto;
    padding:50px 0 0 0;
}

#logo {
    text-align: center;
}

.quicklinks {
    position:fixed;
    right:2%;
    top:50%;
    transform: translateY(-50%);
}

.quicklinks ul li {
    margin-bottom:20px;
}

.quicklinks ul li:last-child {
    margin-bottom:0;
}

.quicklinks ul li a {
    width:55px;
    height:55px;
    border-radius:50%;
    background-color:#ffffff;
    display:block;
    background-position:center;
    background-repeat:no-repeat;
    font-size:0;
    text-indent:-99999999em;
    box-shadow:0 0 30px rgba(207,216,244,0.3);
}

.quicklinks ul li.youtube a {
    background-image:url(../images/q_youtube.png);
}

.quicklinks ul li.blog a {
    background-image:url(../images/q_blog.png);
}

.quicklinks ul li.insta a {
    background-image:url(../images/q_insta.png);
}


.intro-top p.headtxt {
    text-align: center;
    font-family:'GmarketSans','Pretendard',sans-serif;
    font-size:42px;
    color:#222222;
    font-weight:600;
    letter-spacing: -0.05em;
    margin:25px 0;
    line-height: 1.2;
}

.intro-top p.subtxt {
    position:relative;
    text-align: center;
    display:flex;
    align-items: center;
    flex-wrap:wrap;
    justify-content: center;
    width:100%;
    max-width:570px;
    border-radius:50px;
    background-color:#4e73ff;
    margin:0 auto;
    color:#ffffff;
    font-size:20px;
    letter-spacing: -0.03em;
    padding:13px 8px;
    box-sizing: border-box;
}

.intro-top p.subtxt span {
    margin:0 4px;
}


.intro-top p.subtxt::after {
    content:"";
    display:block;
    width:19px;
    height:18px;
    background-image:url(../images/subtxt_arrow.png);
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    bottom:-15px;
}

.intro-info {
    padding:35px;
    background-color:rgba(255,255,255,0.5);
    border-radius:24px;
    margin-top:30px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.intro-info .gchome {
    width:100%;
    max-width:456px;
}

.intro-info .gchome a {
    width:100%;
    background-color:#5942d0;
    border-radius:20px;
    height: 261px;
    box-shadow:0 0 30px rgba(207,216,244,0.3);
    background-image:url(../images/home_bg.png);
    background-repeat:no-repeat;
    background-position:right -85% top -230%;
    display:flex;
    align-items: flex-end;
    justify-content: space-between;
    padding:30px;
    box-sizing: border-box;
}

.intro-info .gchome .gchome-con span {
    display:block;
    color:#ffffff;
    font-size:30px;
    font-weight:800;
    letter-spacing: -0.03em;
    line-height:1.3;
    margin:15px 0 10px 0;
}

.intro-info .gchome .gchome-con .button {
    display:flex;
    align-items: center;
    justify-content: space-between;
    height:32px;
    background-color:rgba(255,255,255,0.15);
    padding:0 15px;
    color:#ffffff;
    box-sizing: border-box;
    letter-spacing: -0.03em;
    font-weight:500;
    font-size:18px;
    border-radius:16px;
    line-height:1;
}

.intro-info .gchome .gchome-con .button::after {
    content:"";
    display:block;
    width:8px;
    height:14px;
    background-image:url(../images/homelink_arrow.png);
    background-repeat:no-repeat;
    background-position:center;
}

.intro-info .intro-info-right {
    width:100%;
    max-width:calc(100% - 476px);
}

.intro-info .intro-info-right .intro-right-links {
    display:flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:16px;
}

.intro-info .intro-info-right .intro-right-links a {
    display:flex;
    align-items: center;
    width:calc((100% - 15px) / 2);
    height:70px;
    background-color:#ffffff;
    border-radius:10px;
    padding:8px;
    box-sizing: border-box;
    box-shadow:0 0 30px rgba(207,216,244,0.3);

}

.intro-info .intro-info-right .intro-right-links a .ico {
    width:54px;
    height:54px;
    background-position:center;
    background-repeat:no-repeat;
    border-radius:12px;
}

.intro-info .intro-info-right .intro-right-links a .ico.depart {
    background-image:url(../images/depart_ico.png);
    background-color:#eaf6ff
}

.intro-info .intro-info-right .intro-right-links a .ico.kakao {
    background-image:url(../images/kakao_ico.png);
    background-color:#f8e049;
}

.intro-info .intro-info-right .intro-right-links a span {
    text-decoration: none;
    color:#222222;
    font-weight:600;
    letter-spacing: -0.03em;
    margin-left:15px;
    font-size:20px;
    width:calc(100% - 69px);
}

.intro-info .intro-info-right .intro-info-number {
    width:100%;
    height: 175px;
    background-color:#ffffff;
    border-radius:14px;
    box-shadow:0 0 30px rgba(207,216,244,0.3);
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:15px;
    box-sizing: border-box;
}

.intro-info .intro-info-right .intro-info-number .ico.number {
    width: 154.5px;
    height: 154.5px;
    background-color:#fff0ef;
    border-radius: 15px;
    background-image:url(../images/number_ico.png);
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
}

.intro-info .intro-info-right .intro-info-number .ico.number button {
    width:100%;
    height:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
}

.intro-info .intro-info-right .intro-info-number .number-list {
    width: calc(100% - 169.5px);
}

.intro-info .intro-info-right .intro-info-number .number-list dl {
    display:flex;
    align-items: center;
    margin-bottom:8px;
}

.intro-info .intro-info-right .intro-info-number .number-list dl:last-of-type {
    margin-bottom:0;
}

.intro-info .intro-info-right .intro-info-number .number-list dl dt {
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /*width:146px;*/
    width:170px;
    min-height: 45px;
    box-sizing: border-box;
    border-radius: 45px;
    font-weight:600;
    letter-spacing: -0.03em;
    font-size:18px;
    line-height: 1.125;
    padding: 4px 0;
    color:#ffffff;
}

.intro-info .intro-info-right .intro-info-number .number-list dl dt span.small {
    font-size:15px
}

.intro-info .intro-info-right .intro-info-number .number-list dl dt.bokji {
    background-color:#2fb264;
}

.intro-info .intro-info-right .intro-info-number .number-list dl dt.ilban {
    background-color:#4d83f1;
}

.intro-info .intro-info-right .intro-info-number .number-list dl dt.mayorsms {
    background-color:#f89200;
}

.intro-info .intro-info-right .intro-info-number .number-list dl dd {
    width:calc(100% - 156px);
    margin-left:10px;
    font-weight:500;
    letter-spacing: -0.03em;
    font-size:18px;
}

.intro-info .m-intro-quick {
    display:none;
    width:100%;
    max-width:520px;
    margin:0 auto;
}

.intro-info .m-intro-quick ul {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content: space-between;
}

.intro-info .m-intro-quick ul li {
    width:calc((100% - 80px) / 3);
    margin-bottom:40px;
}

.intro-info .m-intro-quick ul li:nth-child(n+4) {
    margin-bottom:0;
}

.intro-info .m-intro-quick ul li .ico {
    width:100%;
    aspect-ratio: 1 / 1;
    border-radius:50px;
    box-shadow:0 0 30px rgba(207,216,244,0.3);
    background-color:#ffffff;
    background-position:center;
    background-repeat:no-repeat;
    background-size:45%;
}

.intro-info .m-intro-quick ul li.btel .ico {
    background-image:url(../images/btel_ico.png)
}

.intro-info .m-intro-quick ul li.gtel .ico {
    background-image:url(../images/itel_ico.png)
}

.intro-info .m-intro-quick ul li.fdepart .ico {
    background-image:url(../images/fdepart_ico.png)
}

.intro-info .m-intro-quick ul li.myrsms .ico {
    background-image:url(../images/myrsms_ico.png)
}

.intro-info .m-intro-quick ul li.gtktk .ico {
    background-image:url(../images/gtktk_ico.png)
}

.intro-info .m-intro-quick ul li.ghome .ico {
    background-color:#614bd2;
    background-image:url(../images/ghome_ico.png)
}

.intro-info .m-intro-quick ul li span {
    display:block;
    text-align: center;
    margin-top:15px;
    font-size:18px;
    color:#222222;
    font-weight:600;
    letter-spacing: -0.03em;
}

.intro-service {
    margin-top:30px;
}

.intro-service h2 {
    font-size:22px;
    letter-spacing: -0.03em;
    color:#222222;
    font-weight:800;
    margin-bottom:12px;
}

.intro-service .service-list.pc {
    display:block;
}

.intro-service .service-list.mo { 
    display:none;
}


.intro-service .service-list ul {
    display:flex;
    align-items: center;
    justify-content: space-between;
    width:100%;
}

.intro-service .service-list ul li {
    width:calc((100% - 40px) / 3);
}

.intro-service .service-list ul li a {
    display:flex;
    align-items: center;
    justify-content:space-between;
    padding:12px;
    box-sizing: border-box;
    width:100%;
    height:100px;
    background-color:#ffffff;
    box-shadow:0 0 30px rgba(207,216,244,0.3);
    border-radius:14px;
}

.intro-service .service-list ul li a .ico {
    width:76px;
    height:76px;
    background-position:center;
    background-repeat:no-repeat;
    border-radius:16px;
}

.intro-service .service-list ul li:nth-child(1) a .ico {
    background-color:#e3f7ea;
    background-image:url(../images/service_ico03.png)
}

.intro-service .service-list ul li:nth-child(2) a .ico {
    background-color:#fff1d0;
    background-image:url(../images/service_ico02.png)
}

.intro-service .service-list ul li:nth-child(3) a .ico {
    background-color:#ffeeed;
    background-image:url(../images/service_ico01.png)
}

.intro-service .service-list ul li a span.service-name {
    display:block;
    margin:0 8px 0 20px;
    font-size:20px;
    font-weight:600;
    letter-spacing: -0.03em;
    line-height:1.3;
    color:#222222;
    width:calc(100% - 134px)
}

.intro-service .service-list ul li a span.arrow {
    display:block;
    width:30px;
    height:30px;
    border:1px solid #e1e1e1;
    box-sizing: border-box;
    background-repeat:no-repeat;
    background-position:center;
    background-image:url(../images/service_arrow.png);
    border-radius:50%;
}

address {
    margin-top:35px;
    text-align: center;
    font-size:16px;
    font-weight:500;
    letter-spacing: -0.03em;
    line-height:1.5;
}

@media (max-width:1280px){
    .quicklinks {
        display:none;
    }
}

@media (max-width:1080px) {
    #intro-con {
        padding:50px 15px 0 15px;
        box-sizing: border-box;
    }

    .intro-info .gchome {
        max-width:400px;
    }

    .intro-info .intro-info-right {
        max-width:calc(100% - 420px);
    }
}

@media (max-width:980px) {

    .intro-info  {
        flex-wrap:wrap
    }

    .intro-info .gchome {
        max-width:100%;
    }

    .intro-info .intro-info-right {
        max-width:100%;
        margin-top:15px;
    }

    .intro-service .service-list ul li {
        width:calc((100% - 20px) / 3);
    }

    .intro-service .service-list ul li a .ico {
        width:65px;
        height:65px;
    }

    .intro-service .service-list ul li a span.service-name {
        font-size:17px;
        width:calc(100% - 108px);
        margin:0 8px 0 10px;
    }

    .intro-service .service-list ul li a span.arrow {
        width:25px;
        height:25px;
        background-size:5px;
    }

}

@media (max-width:820px) {
    .intro-service .service-list.pc {
        display:none;
    }

    .intro-service .service-list.mo { 
        display:block;
    }

    .intro-service .service-list ul {
        flex-wrap:wrap;
    }

    .intro-service .service-list ul li {
        width:100%;
        margin-bottom:12px;
    }

    .intro-service .service-list ul li:last-child {
        margin-bottom:0;
    }

    .intro-service .service-list ul li a .ico {
        width: 76px;
        height: 76px;
    }

    .intro-service .service-list ul li a span.service-name {
        margin:0 8px 0 20px;
        width: calc(100% - 119px);
    }

    .intro-service .service-list ul li a span.service-name br {
        display:none;
    }

}

@media (max-width:768px) {

    #intro::before {
        width:640px;
        height:640px;
        left:-320px;
        top:140px;
        background-size:cover;
    }
    
    #intro::after {
        width:200px;
        height:568px;
        background-size:cover;
        right:0;
        bottom:0;
    }

    .intro-top p.headtxt {
        font-size:2rem;
        word-break: keep-all;
    }

    .intro-info .gchome,
    .intro-info .intro-info-right .intro-right-links,
    .intro-info .intro-info-right .intro-info-number .number-list {
        display:none;
    }

    .intro-info .intro-info-right .intro-info-number  {
        padding:0;
        width:95px;
        height:95px;
        padding:5px;
        box-sizing:border-box;
        position:fixed;
        right:12px;
        bottom:4%;
        background-color:#fff0ef;
        box-shadow:0 0 8px rgba(0,0,0,0.2);
    }

    .intro-info .intro-info-right .intro-info-number .ico.number {
        width:100%;
        height:100%;
        background-image:none;
    }

    .intro-info .intro-info-right .intro-info-number .ico.number button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding:0;
    }
    
    .intro-info .intro-info-right .intro-info-number .ico.number img {
        /* width:auto !important; */
        height:100%;
    }
    
    .intro-info .m-intro-quick {
        display:block;
    }
    

    .intro-service .service-list ul li a span.service-name {
        font-size:1rem;
        margin:0 8px 0 12px;
        width: calc(100% - 121px);
    }

    address {
        font-size:0.9125rem;
        word-break: keep-all;
    }

}

@media (max-width:640px) {
    .intro-info .m-intro-quick ul li {
        width:calc((100% - 40px) / 3);
        margin-bottom:20px;
    }

    .intro-info .m-intro-quick ul li a .ico {
        border-radius:16%
    }

    .intro-info .m-intro-quick ul li span {
        font-size:1rem;
    }

}


@media (max-width:480px) {

    #intro::before {
        width:420px;
        height:420px;
        left:-220px;
        top:120px;
        background-size:cover;
    }
    
    #intro::after {
        width:200px;
        height:568px;
        background-size:cover;
        right:0;
        bottom:0;
    }

    #intro-con {
        padding:15px;
    }

    #logo img {
        width:240px;
    }

    .intro-top p.headtxt {
        font-size:1.7125rem;
        margin:15px 0;
    }

    .intro-top p.subtxt {
        font-size:18px;
        width:auto;
    }

    .intro-info {
        padding:15px; 
    }

    .intro-info .m-intro-quick ul li {
        width:calc((100% - 30px) / 3);
    }

    .intro-info .m-intro-quick ul li span {
        font-size:0.9125rem;
    }

    .intro-service .service-list ul li a .ico {
        width:65px;
        height:65px;
    }

    .intro-service .service-list ul li a span.service-name {
        font-size:0.9125rem;
        width: calc(100% - 110px);
    }
}