/* 로그인 */
#login-page{}
#login-page .title-sub{}
#login-page .login-header{display: flex;align-items: center;justify-content: space-between;padding: 17rem 0;}
#login-page .login-title{margin: 120rem 0 30rem;text-align: center;}
#login-page .login-title h3{font-size: 24rem;font-weight: 600;margin-bottom: 10rem;}
#login-page .form-login{}
#login-page .form-login input[type="text"],
#login-page .form-login input[type="password"]{display: block;width: 100%;height: 50rem;font-size: 14rem;background: whitesmoke;border: 1rem solid transparent;transition: border 0.4s;border-radius: 4rem;margin-bottom: 10rem;}
#login-page .form-login input[type="text"]:focus,
#login-page .form-login input[type="password"]:focus { border: 1rem solid #555; } 

#login-page .form-block__checkbox{display: flex;align-items: center;justify-content: end;}
#login-page .form-block__checkbox .security{margin: 15rem 0; font-size: 11rem; color: #aaa;}
#login-page .form-block__checkbox .security::before { content: ''; width: 13rem; height: 13rem; display: inline-block; background: url("../images/icon/lock.svg") no-repeat center center / 100% auto; vertical-align: middle; margin-top: -2rem; opacity: 0.4; } 

#login-page .form-block__login{}
#login-page .form-block__login button{background: #222;}

#login-page .login__util { margin: 25rem 0; } 
#login-page .login__util > ul { display: flex; align-items: center; justify-content: center; font-size: 14rem; } 
#login-page .login__util > ul > li { color: #555; } 
#login-page .login__util > ul > li::after { content: ''; width: 1rem; height: 8rem; background: #ccc; display: inline-block; margin: 0 8rem; } 
#login-page .login__util > ul > li:last-child { font-weight: 600; color: #000; } 
#login-page .login__util > ul > li:last-child::after { display: none; } 

/* common */
.resize-img{position: relative;font-size: 0;}
.resize-img .pc{display: block;}
.resize-img .mo{display: none;}

@media all and (max-width:660px) {
    .resize-img .pc{display: none;}
    .resize-img .mo{display: block;}
}

br.pc{display: block;}
br.mo{display: none;}

@media all and (max-width:660px) {
    br.pc{display: none;}
    br.mo{display: block;}
}

.text-pointer{background: var(--color-primary);color: #fff;min-width: 120rem;text-align: center;;padding: 5rem 20rem;border-radius: 10rem;display: inline-block;font-size: 24rem;font-weight: 600;}

@media all and (max-width:660px) {
    .text-pointer{min-width: 104rem;font-size: 20rem;}
}

.article-title{text-align: center;margin: 80rem 0 50rem;font-size: 30rem;font-weight: 600;margin-bottom: 30rem;line-height: 1.4;}
.article-title > span{color: var(--color-primary);}

@media all and (max-width:880px) {
    .article-title{font-size: 24rem;}
    .article-title{margin: 50rem 0 30rem;}
}
@media all and (max-width:660px) {
    .article-title{font-size: 28rem;text-align: left;}
}

.guide-wrap{margin-bottom: 50rem;}
.guide-wrap:last-child{margin-bottom: 0;}
.guide-wrap .guide-title{font-size: 28rem;font-weight: 600;margin-bottom: 16rem;position: relative;padding-left: 26rem;}
.guide-wrap .guide-title::before{content: '';width: 20rem;height: 20rem;box-shadow: inset 0 0 0 4rem var(--color-sub-1);border-radius: 50%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}

@media all and (max-width:660px) {
    .guide-wrap .guide-title{font-size: 26rem;}
    .guide-wrap .guide-title::before{width: 18rem;height: 18rem;}
}

.guide-wrap .guide-table{width: 100%;border-collapse: collapse;border: 1rem solid var(--color-neutral-2);}
.guide-wrap .guide-table th,
.guide-wrap .guide-table td{border: 1rem solid var(--color-neutral-2);padding: 16rem;font-size: 18rem;font-weight: 400;color: var(--color-neutral-5);line-height: 1.6;}
.guide-wrap .guide-table.table-top-header th{background: var(--color-primary);color: #fff;}
.guide-wrap .guide-table.table-left-header td.title{background: var(--color-bg-2);font-weight: 500;}

@media all and (max-width:660px) {
    .guide-wrap .guide-table th, 
    .guide-wrap .guide-table td{font-size: 16rem;}
}

.guide-wrap .guide-table-2{width: 100%;border-collapse: collapse;border: 1rem solid var(--color-neutral-2);border-top: 2rem solid var(--color-primary);}
.guide-wrap .guide-table-2 th,
.guide-wrap .guide-table-2 td{border: 1rem solid var(--color-neutral-2);padding: 16rem;font-size: 18rem;font-weight: 400;color: var(--color-neutral-5);}
.guide-wrap .guide-table-2.table-top-header th{background: var(--color-bg-2);color: var(--color-primary);}
.guide-wrap .guide-table-2.table-left-header td.title{background: var(--color-bg-2);font-weight: 500;}

@media all and (max-width:660px) {
    .guide-wrap .guide-table-2 th,
    .guide-wrap .guide-table-2 td{font-size: 16rem;}
}

.guide-wrap .guide-table.pc{display: table;}
.guide-wrap .guide-table.mo{display: none;}

@media all and (max-width:660px) {
    .guide-wrap .guide-table.pc{display: none;}
    .guide-wrap .guide-table.mo{display: table;}
}

.guide-wrap .guide-text{color: var(--color-neutral-5);font-size: 18rem;line-height: 1.6;}

.guide-wrap .guide-list{}
.guide-wrap .guide-list > li{color: var(--color-neutral-5);line-height: 1.6;font-size: 18rem;margin-bottom: 5rem;position: relative;padding-left: 15rem;}
.guide-wrap .guide-list > li::before{content: '';width: 5rem;height: 5rem;border-radius: 50%;background: var(--color-neutral-3);position: absolute;top: 10rem;left: 0;}

.guide-wrap .guide-list-2{}
.guide-wrap .guide-list-2 > li{color: var(--color-neutral-5);line-height: 1.6;font-size: 18rem;margin-bottom: 20rem;}
.guide-wrap .guide-list-2 > li:last-child{margin-bottom: 0;}
.guide-wrap .guide-list-2 > li > p{font-size: 20rem;font-weight: 600;color: var(--color-sub-1);margin-bottom: 8rem;}

.guide-wrap .guide-img-list{}
.guide-wrap .guide-img-list > li{margin-bottom: 50rem;position: relative;padding-left: 130rem;display: flex;align-items: center;min-height: 110rem;}
.guide-wrap .guide-img-list > li:last-child{margin-bottom: 0;}
.guide-wrap .guide-img-list > li .img-box{font-size: 0;position: absolute;top:50%;left: 0;transform: translateY(-50%);}
.guide-wrap .guide-img-list > li .text-box{line-height: 1.6;}
.guide-wrap .guide-img-list > li .text-box > h4{font-size: 20rem;font-weight: 500;color: var(--color-primary);margin-bottom: 4rem;}
.guide-wrap .guide-img-list > li .text-box > p{font-size: 15rem;color: var(--color-neutral-5);}

@media all and (max-width:1050px) {
    .guide-wrap .guide-img-list > li{padding-left: 110rem;}
    .guide-wrap .guide-img-list > li .img-box img{width: 90rem;}
}

@media all and (max-width:660px) {
    .guide-wrap .guide-text{font-size: 16rem;}

    .guide-wrap .guide-list > li{font-size: 16rem;}
    .guide-wrap .guide-list > li::before{}

    .guide-wrap .guide-list-2 > li{font-size: 16rem;}
    .guide-wrap .guide-list-2 > li > p{font-size: 18rem;}

    .guide-wrap .guide-img-list{}
    .guide-wrap .guide-img-list > li{padding: 0;display: block;margin-bottom: 20rem;}
    .guide-wrap .guide-img-list > li .img-box{transform: none;top:auto;left: auto;}
    .guide-wrap .guide-img-list > li .img-box img{width: 60rem;}
    .guide-wrap .guide-img-list > li .text-box > h4{min-height: 60rem;padding-left: 70rem;display: flex;align-items: center;margin-bottom: 6rem;}
    .guide-wrap .guide-img-list > li .text-box > p{font-size: 16rem;}
}

.guide-process{display: flex;align-items: center;gap:0 16rem;margin-bottom: 16rem;}
.guide-process .process-title{background: var(--color-primary);color: #fff;text-align: center; min-width: 110rem;min-height: 100rem; border-radius: 10rem;font-size: 20rem;display: flex;align-items: center;justify-content: center;}
.guide-process.color-1 .process-title{background: var(--color-primary);}
.guide-process.color-2 .process-title{background: var(--color-sub-1);}
.guide-process .process-list{display: flex;align-items: center;gap:0 16rem;font-size: 0;}
.guide-process .process-list > div{background: var(--color-bg-2);min-width: 220rem;min-height: 100rem; border-radius: 10rem;font-size: 17rem;display: flex;align-items: center;justify-content: center;line-height: 1.6;text-align: center;color: var(--color-neutral-5);}

.guide-process.type-2{}
.guide-process.type-2 .process-title{min-height: 144rem;}
.guide-process.type-2 .process-list > div{display: block;overflow: hidden;min-height: 0;}
.guide-process.type-2 .process-list > div > .process-sub-title{font-weight: 500;padding: 8rem 0;}
.guide-process.type-2 .process-list > div > p{min-height: 100rem;display: flex;align-items: center;justify-content: center;padding: 0 15rem;}

.guide-process.type-2.color-1 .process-list > div > .process-sub-title{background: #D1DCFA;color: var(--color-primary);}
.guide-process.type-2.color-2 .process-list > div > .process-sub-title{background: #D4EFC0;color: #417818;}
.guide-process.type-2.color-1 .process-list > div:last-child > .process-sub-title{background: var(--color-primary);color: #fff;}
.guide-process.type-2.color-2 .process-list > div:last-child > .process-sub-title{background: var(--color-sub-1);color: #fff;}

@media all and (max-width:860px) {
    .guide-process{gap:0 10rem;margin-bottom: 10rem;}
    .guide-process .process-title{min-width: 80rem;min-height: 80rem;font-size: 16rem;}
    .guide-process .process-list{gap:0 10rem;}
    .guide-process .process-list > div{min-width: 170rem;min-height: 80rem;font-size: 14rem;}
}

@media all and (max-width:660px) {
    .guide-process{flex-direction: column;margin-bottom: 30rem;}
    .guide-process .process-title{width: 100%;margin-bottom: 10rem;min-height: 60rem;font-size: 18rem;}
    .guide-process .process-list{flex-direction: column;gap:10rem;width: 100%;gap:5rem}
    .guide-process .process-list > div{width: 100%;min-height: 0;padding: 22rem 0;font-size: 16rem;}
    .guide-process .process-list > svg{transform: rotate(90deg);}

    .guide-process.type-2 .process-title{min-height: 60rem;}
}

.guide-bar{width: 100%;height: 1rem;background: var(--color-neutral-2);margin: 30rem 0;}



/* about */
.about__wr{text-align: center;}
.about__wr .article-header h2.title-main{text-align: left;}
.about__wr .about-desc{line-height: 1.6;}
.about__wr .about-desc > div{padding-bottom: 200rem;display: flex;flex-direction: column;gap: 25rem;}
.about__wr .about-desc > div > p{font-size: 16rem;font-weight: 300;}
.about__wr .about-desc > div > p > span{display: inline-block;font-weight: 600;}
.about__wr .about-desc > ul{text-align: left;width: max-content;margin: 0 auto;}
.about__wr .about-desc > ul > li{font-size: 16rem;font-weight: 300;}

@media all and (max-width:767px) {
    .about__wr .about-desc > div{padding-bottom: 150rem;}
    .about__wr .about-desc > div > p{font-size: 14rem;}
    .about__wr .about-desc > ul > li{font-size: 14rem;}
}



/* contact */
.contact__wr{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));}
.contact__wr .article-header h2.title-main{text-align: left;}
.contact__wr .article-body{margin-top: 80rem;}
.contact__wr div img{display: block;width: 40%;}
.contact__wr .contact-desc{margin-top: 40rem; display: flex;gap: 150rem;color: var(--color-neutral-5);}
.contact__wr .contact-desc > li{font-size: 14rem;line-height: 1.4;}
.contact__wr .contact-desc > li > h3{margin-bottom: 12rem;font-weight: 400;font-size: 14rem;}
.contact__wr .contact-desc > li > p{display: flex;align-items: center;gap: 12rem;}
.contact__wr .contact-desc > li > p > span{display: block;}
.contact__wr .contact-desc > li > span{display: block;font-size: 13rem;margin-top: 12rem;}

@media all and (max-width:1920px) {
    .contact__wr div img{width: 50%;}
    .contact__wr .contact-desc{gap: 60rem;}
}

@media all and (max-width:1440px) {
    .contact__wr div img{width: 80%;}

    .contact__wr .contact-desc{margin-top: 30rem;gap: 0;justify-content: space-between;}
    .contact__wr .contact-desc > li{font-size: 13rem;}
    .contact__wr .contact-desc > li > h3{font-size: 13rem;}
    .contact__wr .contact-desc > li > span{font-size: 11rem;}
}

@media all and (max-width:1023px) {
    .contact__wr{grid-template-columns: 1fr;}
    .contact__wr .article-body{margin-top: 0;}
    .contact__wr div img{width: 100%;}
}

@media all and (max-width:767px) {
    .contact__wr .contact-desc{flex-direction: column;gap: 40rem;}
}



/* project */
.project_wr{}

.project_wr .article-header h2.title-main{text-align: left;}

.project_wr .search-keyword{display: none;}
.project_wr .total-count{margin-bottom: 15rem;font-size: 14rem;color: var(--color-neutral-4);}
.project_wr .total-count > span{display: inline-block;color: var(--color-primary);}
.project_wr .project-list{transform: translateY(50rem);transition: transform 1.2s;}
.project_wr .project-list.sticky-list{padding-bottom: 60rem;margin-bottom: 60rem; border-bottom: 1px solid var(--color-neutral-2);}
.project_wr .project-list.sticky-list .sticky-label{position: absolute; top: 10px; left: 10px; background: #000; color: #fff; padding: 2px 8px; font-size: 12px;display: none;}
.project_wr .project-list.active{transform: translateY(0);}
.project_wr .project-item{}
.project_wr .project-item .project-thumb{display: block;position: relative;}
.project_wr .project-item .project-thumb img{display: block;width: 100%;}
.project_wr .project-item .project-thumb::after{content: "";background: #00000080 url(../images/main/plus.svg) no-repeat center center / 50rem 50rem; width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: .3s;}
.project_wr .project-item .project-thumb:hover::after{opacity: 1;visibility: visible;}
.project_wr .project-item .project-info{margin-top: 15rem;}
.project_wr .project-item .project-info .title{color: var(--color-neutral-5);font-size: 14rem;font-weight: 500;margin-bottom: 7rem;}
.project_wr .project-item .project-info .subtitle{color: var(--color-neutral-5);font-weight: 300;display: flex;align-items: center;gap: 16rem;}
.project_wr .project-item .project-info .subtitle span{display: inline-block;font-size: 12rem;position: relative;}
.project_wr .project-item .project-info .subtitle span:last-child::after{content: "";width: 1px;height: 10rem;background: var(--color-neutral-2);position: absolute;top: 50%;left: -8rem;transform: translateY(-50%);}
.project_wr .no-project{text-align: center;margin-top: 35rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

@media all and (max-width:1440px) {
    .project_wr .project-item .project-info{margin-top: 15rem;}
    .project_wr .project-item .project-info .title{margin-bottom: 5rem;}
}

@media all and (max-width:767px) {
    .project_wr .project-item .project-thumb::after{display: none;}
    .project_wr .project-item .project-info{margin-top: 12rem;}
    .project_wr .project-item .project-info .subtitle{gap: 12rem;}
    .project_wr .project-item .project-info .subtitle span{font-size: 11rem;}
    .project_wr .project-item .project-info .subtitle span:last-child::after{height: 8rem;left: -6rem;}
}



.project_wr .detail-inner{margin-top: 80rem;display: flex;}
.project_wr .detail-info{width: calc(100% * (1/3));}
.project_wr .detail-info .title{font-weight: 500;font-size: 16rem;margin-bottom: 5rem;color: #737373;}
.project_wr .detail-info .subtitle{display: flex;align-items: center;gap: 16rem;margin-bottom: 60rem;font-weight: 300;}
.project_wr .detail-info .subtitle span{display: inline-block;font-size: 13rem;color: var(--color-neutral-5);position: relative;}
.project_wr .detail-info .subtitle span:last-child::after{content: "";width: 1px;height: 10rem;background: var(--color-neutral-2);position: absolute;top: 50%;left: -8rem;transform: translateY(-50%);}
.project_wr .detail-info .desc{display: flex;flex-direction: column;gap: 16rem;}
.project_wr .detail-info .desc p{font-size: 13rem;line-height: 1.6;color: var(--color-neutral-5);}
.project_wr .detail-image{width: calc(100% * (2/3));padding-left: calc(100% * (1/12));display: flex;flex-wrap: wrap;gap: 16rem;align-items: flex-start;}
.project_wr .detail-image br{display: none;}
.project_wr .detail-image p{display: contents;}
.project_wr .detail-image img{display: block;width: 100%;margin: 0;padding: 0;}
.project_wr .detail-image img.col1{width: 100%;}
.project_wr .detail-image img.col2{width: calc(50% - 8rem);}

@media all and (max-width:1023px) {
    .project_wr .detail-inner{margin-top: 50rem;flex-direction: column;gap: 75rem;}
    .project_wr .detail-info{width: 100%;}
    .project_wr .detail-info .subtitle{margin-bottom: 40rem;}
    .project_wr .detail-image{width: 100%;padding-left: 0;}
}

@media all and (max-width:767px) {
    .project_wr .detail-inner{gap: 50rem;}
    .project_wr .detail-info .title{font-size: 16rem;}
    .project_wr .detail-info .subtitle span{font-size: 12rem;}
    .project_wr .detail-image img.col2{width: 100%;}
}


.content{line-height: 1.6;font-size: 14rem;padding: 20rem;border: 1px solid #e8e8e8;}
.content table{border-collapse: collapse;margin-block: 15rem}
.content table td{border: 1px solid #e8e8e8;text-align: center;}
.content table tr:last-child td{border-top: none;}

@media all and (max-width:767px) {
    .content{padding: 15rem;}
    .content table{font-size: 12rem;}
}