@charset "utf-8";

/* =========================== PAGE */
.pagecommon{position:relative;padding-bottom:100px;font-size:14px;letter-spacing:-.3px;line-height:1.5;color:#777}
.pagecommon .pl{white-space:pre-line}
.pagecommon *{word-break:keep-all}
.pagecommon .inner{max-width:var(--mainsize);margin:0 auto;padding:0 30px;}

#contact1003 .tit{height:400px;background:#f2f2f2}
#contact1003 .tit .inner{position:relative;display:flex;align-items:center;width:100%;height:100%}
#contact1003 .tit span{display:inline-block;width:85px;padding:5px 0;border-radius:50px;font-size:14px;font-weight:700;text-align:center;color:#fff;background:var(--primary)}
#contact1003 .tit p{margin-top:30px;font-size:25px;font-weight:700;color:#aaa}
#contact1003 .tit b{font-size:45px;font-weight:700;color:#111}
#contact1003 .tit img{position:absolute;bottom:0;right:0}

#contact1003 .tabs {
    display: flex;
    gap: 20px;
    font-size: 17px;
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin:auto 30px;
}
#contact1003 .tabs li{padding:5px 20px;font-weight:700;cursor:pointer;color:#aaa;}
#contact1003 .tabs li.on{border-bottom:3px solid #111;color:#111}
#contact1003 .tab_cont{display:none;margin-top:50px}

#contact1003 .faq{position:relative;margin-top:-40px}
#contact1003 .faq .tab_cont li{border-bottom:1px solid #e1e1e1;font-size:15px}
#contact1003 .faq button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:20px;border:none;background:none;font-size:15px;text-align:left;font-family:'Pretendard'}
#contact1003 .faq button div{display:flex;gap:20px}
#contact1003 .faq button span{font-weight:700;color:var(--primary);white-space:nowrap;}
#contact1003 .faq button p{font-weight:700;color:#111}
#contact1003 .faq button svg{min-width:24px;color:#777;transition:all .3s}
#contact1003 .faq .cont_q.open svg{color:#111;transform:rotate(180deg)}
#contact1003 .faq .cont_a{display:none;padding:10px 20px 30px 100px;}
#contact1003 .faq .cont_faq:first-child .cont_a{display:block}
#contact1003 .faq .tab_cont3 .cont_a{padding:10px 20px 30px 140px}

#contact1003 .cont02{margin-top:100px}
#contact1003 .cont02 ul{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
#contact1003 .cont02 ul li{padding:35px 40px;border-radius:13px;color:#fff;background:var(--primary)}
#contact1003 .cont02 ul li:nth-child(2){background:#27c3bf}
#contact1003 .cont02 ul li>p{font-size:35px;font-weight:700}
#contact1003 .cont02 div{margin-bottom:40px}
#contact1003 .cont02 div p{font-size:25px;font-weight:700}
#contact1003 .cont02 div span{opacity:.5}
#contact1003 .cont02 a{display:inline-block;width:185px;padding:10px 0;border-radius:50px;border:2px solid #27c3bf;font-size:18px;font-weight:700;text-align:center;color:#27c3bf;background:#fff;transition:all .3s}


@media(hover:hover){
#contact1003 .cont02 a:hover{border:2px solid #fff;color:#fff;background:#27c3bf}
}

@media(max-width:1024px){
.pagecommon .inner{padding:0 15px}
#contact1003 .tit img{right:15px;width:40%}
#contact1003 .tit p{font-size:22px}
#contact1003 .tit b{font-size:40px}
}
@media(max-width:768px) {
    #contact1003 .cont02 ul li{
        padding: 25px 30px !important;
    }
    #contact1003 .tit {
        height: 300px
    }

        #contact1003 .tit p {
            font-size: 13px
        }

        #contact1003 .tit b {
            font-size: 25px
        }

    #contact1003 .cont01 {
        margin-top: 40px
    }

    #contact1003 .tab_cont {
        margin-top: 20px
    }

    #contact1003 .cont02 ul {
        display: block
    }

        #contact1003 .cont02 ul li + li {
            margin-top: 10px
        }

    #contact1003 .cont02 div p {
        font-size: 22px
    }

    #contact1003 .cont02 ul li > p {
        font-size: 30px
    }

    #contact1003 .cont02 div {
        margin-bottom: 25px
    }

    #contact1003 .tabs {
        margin: auto 30px !important;
        font-size: 15px !important;
    }

    #contact1003 .faq button div {
        flex-direction: column !important;
    }

    #contact1003 .faq .tab_cont3 .cont_a {
        padding: 10px 20px 30px 20px !important;
    }

    #contact1003 .faq .cont_a {
        padding: 10px 20px 30px 20px !important;
    }
    #contact1003 .faq button {
        font-size:13px !important;
    }
}

    @media(max-width:480px) {
        #contact1003 .tit {
            height: 245px
        }

            #contact1003 .tit .inner {
                justify-content: center;
                text-align: center
            }

            #contact1003 .tit b {
                font-size: 23px
            }

            #contact1003 .tit img {
                display: none
            }

        #contact1003 .tabs {
            gap: 10px;
            font-size: 12px !important;
            margin: auto 40px;
        }

            #contact1003 .tabs li {
                padding: 5px 10px
            }

        #contact1003 .cont01 button div {
            display: block
        }

        #contact1003 .cont01 button span {
            color: var(--primary)
        }

        #contact1003 .cont01 button p {
            margin-top: 5px
        }

        #contact1003 .cont01 .cont_a {
            padding: 10px 20px 20px
        }

        #contact1003 .cont01 .tab_cont3 .cont_a {
            padding: 10px 20px 20px
        }

        #contact1003 .cont02 {
            margin-top: 45px
        }

            #contact1003 .cont02 ul li {
                padding: 30px 35px
            }

            #contact1003 .cont02 div p {
                font-size: 18px
            }

            #contact1003 .cont02 ul li > p {
                font-size: 25px
            }

            #contact1003 .cont02 a {
                width: 160px;
                font-size: 15px
            }

        #contact1003 .faq .tab_cont li {
            font-size: 12px !important;
        }

        #contact1003 .faq button {
            font-size:13px !important;
        }
    }