@charset "utf-8";

/********** PC 반응형 **********/

@media all and (min-width:800px) {

    /********** 스타일 변수 **********/
    :root {
        /***** 사이즈 *****/
        --pf01-header-width: 220px;
        --hp01-header-height: 70px;
        --footer-height: 470px;
        --hp01-contents-width: 1200px;
        --auto-margin: 0 auto;
        --pf01-padding: 80px;
    }

    /********** 공통 스타일 **********/
    .wrap {
        min-width: 1100px;
    }

    /************************************/
    /********** 키워드랩 홈페이지 **********/
    /************************************/
    #main {
        padding-bottom: 0;
    }

    .service-title {
        padding: 200px 0;
    }

    #main .contents-wrap {
        flex-wrap: nowrap;
        padding-top: 150px;
        padding-bottom: 150px;
        justify-content: space-between;
    }

    #main .top-section + .section .contents-wrap {
        padding-top: 220px;
    }

    #main .section:first-child .contents-wrap,
    #main .bottom-section .contents-wrap {
        padding-top: 120px;
    }

    #home-partner .contents-wrap {
        width: 100%;
        margin: 0;
        padding-top: 200px;
        padding-bottom: 150px;
    }

    #home-partner .content {
        width: var(--hp01-contents-width);
        margin: var(--auto-margin);
    }

    #main .home-service .contents-wrap {
        padding-top: 80px;
        padding-bottom: 80px;
        gap: 100px;
    }

    #main #contact-section .contents-wrap {
        padding-top: 150px;
    }

    #main .section.top-section .contents-wrap {
        width: var(--hp01-contents-width);
        padding-top: 0;
    }

    #main .service-detail .contents-wrap {
        flex-wrap: wrap;
        gap: 180px;
    }

    #main .service-epilogue .contents-wrap {
        flex-direction: column;
        width: 100%;
        justify-content: center;
    }

    #main .home-section .contents-wrap {
        align-items: center;
    }

    #about-vision .contents-wrap,
    #about-location .contents-wrap {
        gap: 100px;
        align-items: flex-end;
    }

    #main .content,
    #main #home-partner .contents-wrap {
        gap: 60px;
    }

    #main .service-epilogue .contents-wrap,
    #about-hire .contents-wrap .content {
        gap: 50px;
    }

    #about-location .contents-wrap {
        flex-direction: row-reverse;
    }

    #main .bottom-section .content,
    #main .service-detail .content,
    #about-history .content {
        justify-content: space-between;
    }

    #main .top-section .content {
        text-align: left;
        justify-content: flex-start;
        gap: 50px;
    }

    #main .bottom-section .content {
        padding: 60px 100px;
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    #main .service-detail .content {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    #about-history .content {
        flex-direction: row;
    }

    #main .service-epilogue .content {
        width: var(--hp01-contents-width);
        margin: var(--auto-margin);
    }

    #about-vision .content {
        width: 65%;
    }

    .service-detail-sec {
        top: -80px;
    }

    #main .top-section .btn-wrap {
        justify-content: flex-start;
    }

    #main .top-section .btn-wrap.center {
        justify-content: center;
    }

    /***** 텍스트 *****/
    .txt-wrap {
        gap: 25px;
    }

    .bottom-section .txt-wrap,
    #about-hire .txt-wrap {
        gap: 15px;
    }

    .top-section .main-title {
        font-size: 46px;
    }

    #home-main .main-title {
        font-size: 48px;
    }

    #about-location .txt-wrap {
        position: absolute;
        top: 150px;
        left: 25px;
    }

    #main .top-section .btn-wrap .btn {
        padding: 12px 22px;
        height: auto;
        font-size: 16px;
        border-radius: 10px;
    }

    .section-title {
        font-size: 36px;
    }

    .bottom-section .section-title {
        font-size: 28px;
    }

    .content-txt {
        font-size: 20px;
    }

    .bottom-section .content-txt {
        font-size: 18px;
        text-align: left;
    }

    /***** 리스트 *****/
    .card-list {
        flex-wrap: nowrap;
        gap: 30px;
    }

    .card-list.scroll {
        width: 2700px;
        position: relative;
        left: calc(50% - 600px);
    }

    .card-list.scroll.hasVid {
        width: 2700px;
        gap: 40px;
    }

    .card-list.basic.wide {
        flex-direction: column;
        gap: 50px;
    }

    #about-vision .card-list.basic.wide {
        width: 60%;
    }

    .card-list.hasVid > li {
        width: 600px;
        min-width: 600px;
        height: 338px;
    }

    .card-list.scroll > li {
        width: 500px;
        flex-direction: row;
    }

    .card-list > li {
        padding: 30px;
    }

    .card-list.basic > li {
        gap: 20px;
    }

    .card-list.wide > li {
        flex-direction: column;
    }

    .card-icon,
    .card-list.wide .card-icon {
        width: 54px;
        min-width: 54px;
        height: 53px;
    }

    .card-list.basic .card-icon {
        width: 60px;
        height: 60px;
    }

    .card-icon .icon {
        width: 26px;
        height: 26px;
    }
    
    .card-list.basic > li .card-txt {
        gap: 1px;
    }

    .card-txt p {
        font-size: 17px;
        line-height: 1.5;
    }

    .intro-section .card-txt p {
        font-size: 18px;
        line-height: 1.4;
    }

    .card-list.basic .card-txt p.bold {
        font-size: 26px;
    }

    .card-list.basic.wide .card-txt p.bold {
        font-size: 22px;
    }

    .card-txt p.card-title {
        margin-top: 0;
        font-size: 20px;
    }

    .toggle-top p {
        font-size: 20px;
    }

    .toggle-main p {
        font-size: 17px;
    }

    .line-list,
    .line-list > li {
        gap: 60px;
    }

    .line-list > li::after {
        left: 122px;
        height: calc(100% + 60px);
    }

    .year {
        font-size: 38px;
        width: 95px;
    }

    .year::after {
        width: 9px;
        height: 9px;
        top: 15px;
        right: -32px;
    }

    .line-detail {
        margin-top: 8px;
    }

    .line-detail > li {
        font-size: 17px;
    }


    .basic-list > li p {
        font-size: 18px;
    }

    /********** 애니메이션 **********/
    .animation-section {
        margin-top: 20px;
    }

    .animation-section::before,
    .animation-section::after {
        width: 15%;
    }

    .logo-list,
    .logo-list.mob {
        margin-bottom: 50px;
    }

    .logo-list > li {
        margin-right: 60px;
    }

    .logo-list.slide-left {
        width: 4200px;
        animation: slide-left 50s infinite linear;
    }

    .logo-list.slide-right {
        width: 4800px;
        animation: slide-right 50s infinite linear;
        transform: translateX(-2890px);
    }

    @keyframes slide-left {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-2290px);
        }
    }

    @keyframes slide-right {
        0% {
            transform: translateX(-2890px);
        }

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

    /***** 배경 이미지 *****/
    #place-main {
        background-size: cover;
        background-position: 66% 50%;
    }

    #store-main {
        background-position: center top;
    }

    #store-point .service-point-img,
    #exper-point .service-point-img,
    #blog-point .service-point-img {
        background-size: cover;
    }

    #blog-point .service-point-img {
        background-position: center 30%;
    }

    .service-point-img {
        height: 500px;
    }

    #home-about .service-point-img {
        height: 350px;
    }

    #about-mission .service-point-img {
        background-size: cover;
        background-position: center 40%;
    }

    #about-vision .service-point-img {
        background-size: 170%;
        background-position: 20% 20%;
        height: 560px;
    }

    #about-hire .service-point-img {
        background-size: 110%;
        background-position: center 85%;
    }

    /***** 서비스별 이미지 *****/
    .service-detail .img-wrap {
        width: 55%;
        min-width: 55%;
    }

    .service-detail .txt-wrap {
        width: calc(45% - 60px);
        min-width: calc(45% - 60px);
    }

    /* 플레이스 */
    #place-service-img01 {
        height: 220px;
    }

    #place-service-img01 img {
        width: 120px;
    }

    #pmt-img01 {
        top: 40px;
        left: calc(50% - 340px);
    }

    #pmt-img02 {
        top: 0px;
        left: calc(50% - 240px);
    }

    #pmt-img03 {
        top: 90px;
        left: calc(50% - 60px);
    }

    #pmt-img04 {
        top: 50px;
        left: calc(50% + 80px);
    }

    #pmt-img05 {
        top: 30px;
        left: calc(50% + 280px);
    }

    #pmt-img06 {
        top: 100px;
        left: calc(50% + 370px);
    }

    #place-service-img02 {
        height: 310px;
    }

    #pmb-img01 {
        top: 0px;
        left: calc(50% - 370px);
        width: 270px;
    }

    #pmb-img02 {
        width: 230px;
        top: 70px;
        left: calc(50% - 155px);
    }

    #pmb-img03 {
        width: 220px;
        top: 40px;
        left: calc(50% + 130px);
    }

    #pmb-img04 {
        width: 230px;
        top: 10px;
        left: calc(50% + 400px);
    }

    /* 스토어 */
    #store-service-img01 {
        height: 230px;
    }

    #smt-img01 {
        width: 310px;
        top: 30px;
        left: calc(50% - 0px);
    }

    #smt-img02 {
        width: 180px;
        left: calc(50% - 290px);
    }

    #smt-img03 {
        width: 210px;
        top: 150px;
        left: calc(50% - 360px);
    }

    #smt-img04 {
        width: 145px;
        top: 160px;
        left: calc(50% + 120px);
    }

    #smt-img05 {
        width: 220px;
        top: 80px;
        left: calc(50% + 300px);
    }

    #store-service-img02 {
        height: 310px;
    }

    #smb-img01 {
        width: 280px;
        top: 50px;
        left: calc(50% - 0px);
    }

    #smb-img02 {
        width: 230px;
        top: 0px;
        left: calc(50% - 300px);
    }

    #smb-img03 {
        width: 230px;
        top: 220px;
        left: calc(50% - 180px);
        z-index: 1;
    }

    #smb-img04 {
        width: 160px;
        top: 20px;
        left: calc(50% + 300px);
    }

    #smb-img05 {
        width: 160px;
        top: 130px;
        left: calc(50% + 400px);
    }

    #smb-img06 {
        width: 230px;
        top: 140px;
        left: calc(50% - 380px);
    }

    #smb-img07 {
        width: 160px;
        top: 170px;
        left: calc(50% + 110px);
    }

    /* 블로그 */
    #blog-service-img01 {
        height: 340px;
    }

    #bmt-img01 {
        width: 330px;
        top: 20px;
        left: calc(50% - 40px);
    }

    #bmt-img02 {
        width: 330px;
        top: 180px;
        left: calc(50% + 60px);
    }

    #bmt-img03 {
        width: 140px;
        top: 70px;
        left: calc(50% - 420px);
    }

    #bmt-img04 {
        width: 140px;
        top: 0px;
        left: calc(50% - 300px);
    }

    #bmt-img05 {
        width: 140px;
        top: 140px;
        left: calc(50% + 320px);
    }

    #bmt-img06 {
        width: 140px;
        top: 80px;
        left: calc(50% + 420px);
    }

    #blog-service-img02 {
        height: 400px;
    }

    #bmb-img01 {
        width: 290px;
        top: 35px;
        left: calc(50% - 430px);
    }

    #bmb-img02 {
        width: 290px;
        top: 0px;
        left: calc(50% - 290px);
    }

    #bmb-img03 {
        width: 240px;
        top: 90px;
        left: calc(50% - 130px);
        border-radius: 10px;
    }

    #bmb-img04 {
        width: 290px;
        top: 325px;
        left: calc(50% + 250px);
        border-radius: 8px;
    }

    #bmb-img05 {
        width: 290px;
        top: 290px;
        left: calc(50% + 430px);
        border-radius: 8px;
    }

    #bmb-img06 {
        width: 240px;
        top: 20px;
        left: calc(50% + 140px);
        border-radius: 10px;
    }

    /* 체험단 */
    #exper-service-img01 {
        height: 320px;
    }

    #emt-img01 {
        width: 245px;
        top: 60px;
        left: calc(50% - 400px);
    }

    #emt-img02 {
        width: 230px;
        top: 100px;
        left: calc(50% + 50px);
    }

    #emt-img03 {
        width: 330px;
        top: 50px;
        left: calc(50% + 365px);
    }

    #emt-img04 {
        width: 230px;
        top: 0px;
        left: calc(50% - 120px);
    }

    #exper-service-img02 {
        height: 320px;
    }

    #emb-img01 {
        width: 260px;
        top: 20px;
        left: calc(50% - 360px);
    }

    #emb-img02 {
        width: 245px;
        top: 45px;
        left: calc(50% + 120px);
    }

    #emb-img03 {
        width: 200px;
        top: 0px;
        left: calc(50% + 380px);
    }

    #emb-img04 {
        width: 245px;
        top: 110px;
        left: calc(50% - 80px);
    }

    /***** 메인 서비스 이미지 *****/
    .home-img-content {
        width: calc(55% - 50px);
        min-width: calc(55% - 50px);
    }

    .home-img-content .img-wrap .basic {
        width: 400px;
    }

    #home-exper .home-img-content .img-box {
        height: 400px;
        width: 100%;
    }

    #home-exper .home-img-content .img-box {
        background-size: 120%;
        background-position: 70% center;
    }

    /* 플레이스 */
    #hplace-img02 {
        width: 210px;
        top: 190px;
        left: calc(50% - 170px);
    }

    #hplace-img03 {
        width: 190px;
        top: 280px;
        left: calc(50% + 160px);
    }

    #hplace-img04 {
        width: 110px;
        top: 255px;
        left: calc(50% - 210px);
    }

    #hplace-img05 {
        width: 110px;
        top: 380px;
        left: calc(50% - 210px);
    }

    #hplace-img06 {
        width: 235px;
        top: 170px;
        left: calc(50% + 150px);
    }

    /* 스토어 */
    #hstore-img02 {
        width: 70px;
        top: 140px;
        left: calc(50% - 185px);
    }

    #hstore-img03 {
        width: 150px;
        top: 240px;
        left: calc(50% - 170px);
    }

    #hstore-img04 {
        width: 170px;
        top: 300px;
        left: calc(50% - 120px);
    }

    #hstore-img05 {
        width: 280px;
        top: 210px;
        left: calc(50% + 190px);
    }

    #hstore-img06 {
        width: 145px;
        top: 170px;
        left: calc(50% - 140px);
    }

    #hstore-img07 {
        width: 120px;
        top: 280px;
        left: calc(50% - 210px);
    }

    #hstore-img08 {
        width: 150px;
        top: 260px;
        left: calc(50% + 130px);
    }

    #hstore-img09 {
        width: 70px;
        top: 355px;
        left: calc(50% + 200px);
    }

    /* 블로그 */
    #hblog-img01 {
        margin: 80px 0;
        width: 105%;
    }

    #hblog-img02 {
        width: 280px;
        top: 200px;
        left: calc(50% - 220px);
    }

    #hblog-img03 {
        width: 190px;
        top: 280px;
        left: calc(50% + 220px);
    }

    #hblog-img04 {
        width: 180px;
        top: 70px;
        left: calc(50% - 160px);
    }

    #hblog-img05 {
        width: 180px;
        top: 210px;
        left: calc(50% + 220px);
    }

    /* 체험단 */
    #hexper-img01 {
        width: 200px;
        top: 0px;
        left: calc(50% - 160px);
    }

    #hexper-img02 {
        width: 220px;
        top: 320px;
        left: calc(50% + 220px);
    }

    #hexper-img03 {
        width: 220px;
        top: 60px;
        left: calc(50% - 150px);
    }

    #hexper-img04 {
        width: 250px;
        top: 310px;
        left: calc(50% + 220px);
    }

    /***** 기타 *****/
    .badge-wrap {
        gap: 8px;
    }
    
    .checkbox-btn {
        width: 20px;
        height: 20px;
    }

    /************************************/
    /************************************/

    /********** 헤더 **********/
    .pf01 .header {
        position: inherit;
        background-color: transparent;
        height: auto;
    }

    .pf01 .header.slide {
        box-shadow: none;
    }

    .hp01 .header {
        height: var(--hp01-header-height);
        overflow: hidden;
    }

    .hp01 .header.slide {
        /* 전체 메뉴 높이 지정 */
        height: 235px;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
    }

    .pf01 .header .contents-wrap {
        padding: 0;
    }

    .pf01 .header .content {
        padding-top: 25px;
        padding-right: var(--pf01-padding);
        justify-content: flex-end;
        height: auto;
    }

    .hp01 .header .content {
        width: auto;
        display: inherit;
        height: auto;
        position: absolute;
        top: 22px;
        left: 24px;
    }

    .logo {
        width: 170px;
        height: 23px;
    }

    .pf01 .header .logo {
        position: fixed;
        left: 24px;
        top: 25px;
    }

    .header.invert .gnb-name p {
        color: var(--white);
    }

    .header.invert.slide .gnb-name p {
        color: var(--black);
    }

    .header-btn-wrap {
        gap: 20px;
    }

    .header-btn {
        color: var(--gray70);
    }

    .menu-modal {
        left: 50%;
        transform: translateX(-50%);
    }

    #footer .menu-modal {
        bottom: 50px;
        top: inherit;
        left: 0;
        transform: none;
    }

    /***** 메뉴 *****/
    .menu {
        display: block !important;
    }

    .pf01 .menu {
        width: var(--pf01-header-width);
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        padding: 80px 24px 30px 24px;
        border-right: 1px solid var(--gray15);
    }

    .hp01 .menu {
        width: 100%;
        padding: 0;
        background-color: transparent;
    }

    .pf01 .gnb {
        margin-top: 0;
    }

    .hp01 .gnb {
        position: absolute;
        top: 22px;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 0;
        flex-direction: row;
        gap: 70px;
    }

    .hp01 .gnb > li {
        margin-bottom: 0;
    }

    .hp01 .gnb-name {
        margin-bottom: 0;
    }

    .hp01 .gnb > li:hover .gnb-name {
        color: var(--blue50);
    }

    .hp01 .gnb-name .icon.arrow-icon {
        display: none;
    }

    .pf01 .gnb-name p {
        font-size: 15px;
        font-weight: 400;
    }

    .hp01 .gnb-name p {
        white-space: nowrap;
    }

    .hp01 .lnb > li {
        text-align: center;
    }

    .hp01 .lnb {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 10px;
        width: auto;
        padding-top: 28px;
    }

    .pf01 .lnb a,
    .pf01 .lnb p {
        font-size: 15px;
    }

    .hp01 .lnb a,
    .hp01 .lnb p {
        white-space: nowrap;
    }

    .pf01 .sub-menu {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0px 24px 30px 24px;
    }

    .pf01 .sub-menu .btn-wrap {
        flex-wrap: wrap;
    }

    .pf01 .sub-menu .btn-wrap .btn {
        width: 100%;
    }

    .hp01 .sub-menu {
        position: absolute;
        right: 0;
        top: 16px;
        margin-top: 0;
    }

    .hp01 .sub-menu,
    .hp01 .sub-menu .btn-wrap {
        width: auto;
    }

    .hp01 .sub-menu .btn-wrap .btn {
        width: auto;
        padding: 7px 14px;
        height: auto;
        font-size: 14px;
    }

    /********** 푸터 **********/
    .pf01 #footer {
        padding-left: var(--pf01-header-width);
    }

    #footer .contents-wrap {
        padding-top: 50px;
        padding-bottom: 40px;
        justify-content: space-between;
    }

    .pf01 #footer .contents-wrap {
        padding: 50px var(--pf01-padding);
    }

    #footer .content {
        width: auto;
        flex-direction: column;
    }

    .fnb.single {
        gap: 30px;
    }

    .footer-channel {
        margin-bottom: 0;
        margin-top: 10px;
        gap: 20px;
    }

    .fnb {
        width: auto;
        flex-direction: row;
        gap: 60px;
    }

    .fnb-sub {
        margin-top: 20px;
        gap: 15px;
        padding-left: 0;
    }

    #footer .content.footer-bottom {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

    .info-list.copyright > li {
        text-align: right;
    }


    /***** 수상 *****/
    .award {
        justify-content: flex-end;
    }

    /********** 플로팅 **********/
    #floating-wrap {
        right: 40px;
        bottom: 80px;
    }

    /********** 유틸리티 **********/
    /***** 반응형 *****/
    .pc:nth-child(n) {
        display: block !important;
    }

    .pcFlex:nth-child(n) {
        display: flex !important;
    }

    .mob:nth-child(n),
    .mobFlex:nth-child(n) {
        display: none !important;
    }

    .mobFlex:nth-child(n) {
        display: none !important;
    }

}

@media all and (min-width:1200px) {
    .hp01 .contents-wrap {
        width: var(--hp01-contents-width);
        margin: var(--auto-margin);
    }

}