@charset "utf-8";

/* 내용관리 */
.company{background: var(--white);}
.sb_cont{padding: 0 1.5rem; max-width: 143rem; margin: 0 auto;}
#comp_nav{display: flex; flex-wrap: wrap;}
#comp_nav a{padding: 1.5rem; margin-right: 3.4rem; font-size: 1.8rem; line-height: 1.5; font-weight: var(--font-weight400); color: var(--black); text-transform: uppercase; display: inline-flex; position: relative; transition: color 0.3s;}
#comp_nav a:after{top: 2rem; right: -2rem; height: 1.8rem; background: var(--color-cccccc); width: 1px; position: absolute; content: "";}
#comp_nav a:last-of-type{margin-right: 0;}
#comp_nav a:last-of-type:after{display: none;}
#comp_nav a:hover{color: var(--primary-3059c7);}

.comp_wrap{}
.comp_sec{padding: 15rem 0; width: 100%; position: relative;}
.comp_title{font-size: 3rem; line-height: 1.4; font-weight: var(--font-weight600); color: var(--black); text-align: center; width: 100%; text-transform: uppercase;}
.comp_inner{margin-top: 4rem;}

/* VISION */
.vs_lists{width: 100%; max-width: 100rem; margin: 0 auto;}
.vs_items{display: flex; align-items: center;}
.vs_items + .vs_items{margin-top: 4rem;}
.vs_items p{width: 25rem; height: 5.5rem; border-radius: 5rem; font-size: 2rem; line-height: 1.4; font-weight: var(--font-weight500); background: var(--primary-3059c7); color: var(--white); display: flex; align-items: center; justify-content: center;}
.vs_items span{width: calc(100% - 25rem); padding: 0 2rem; font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black); word-break: keep-all;}

/* MEMBERS*/
.mem_list{padding-top: 4rem; display: flex; align-items: stretch; flex-wrap: wrap;}
.mem_items{padding: 1rem; width: 30%; margin: 0 5% 0 0; transition: all 0.3s; border: 1px solid var(--color-707070);}
.mem_items:last-of-type{margin-right: 0;}
.mem_area{padding: 4rem 2rem; display: flex; flex-direction: column; background: var(--color-f3f3f3);}
.mem_area .mem_img{width: 17rem; height: 17rem; border-radius: 50%; margin: 0 auto 3.8rem; overflow: hidden; display: block;}
.mem_area .mem_img img{width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1); transition: transform 0.3s;}
.mem_area .mem_info{width: 100%; line-height: 1.4; font-weight: var(--font-weight600); color: var(--black); display: flex; flex-direction: column; align-items: center;}
.mem_area .mem_info .position{font-size: 2rem;}
.mem_area .mem_info .name{font-size: 2.5rem;}
.mem_area .mem_info .mem_sns{margin-top: 2rem; display: flex; align-items: center; justify-content: center;}
.mem_area .mem_info .mem_sns a{width: 4rem; height: 4rem; margin-right: 1rem; border-radius: 50%; overflow: hidden; background: var(--black); display: flex; align-items: center; justify-content: center;}
.mem_area .mem_info .mem_sns a:last-of-type{margin-right: 0;}
.mem_area .mem_info .mem_sns a img{max-width: 3rem; max-height: 3rem; width: auto; height: auto; display: block; object-fit: cover;}
.mem_items:hover .mem_area .mem_img img{transform: scale(1.1);}

/* SERVICES */
.ser_area{padding-top: 4rem;}
.ser_img{height: 50rem; width: 100%; position: relative; overflow: hidden;}
.ser_img img{width: auto; height: auto; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;}
.ser_list{margin-top: 5rem; width: 100%; display: flex; align-items: stretch;}
.ser_items{padding: 2rem 1rem; width: calc(100%/3); display: flex; flex-direction: column; border-right: 1px solid var(--color-cccccc); text-align: center;}
.ser_items:last-of-type{border-right: 0;}
.ser_items p{font-size: 2rem; line-height: 1.4; font-weight: var(--font-weight600); color: var(--primary-3059c7);}
.ser_items ul{margin-top: 3rem; width: 100%;}
.ser_items ul li{font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black); word-break: keep-all;}
.ser_items ul li + li{margin-top: 1rem;}
.ser_review{margin-top: 5rem; padding: 5rem; background: var(--color-f7f7f7);}
.ser_review_imgs{max-width: 120rem; margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between;}
.ser_review_imgs img{width: 30%}
.ser_review_desc{ max-width: 120rem; margin: 10rem auto 0;}
.ser_review_desc .review_list{width: 100%; display: flex; justify-content: space-between;}
.ser_review_desc .review_list li{width: 22%; display: flex; flex-direction: column;}
.ser_review_desc .review_list li span{font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight600); color: var(--black); word-break: keep-all; display: block;}
.ser_review_desc .review_list li p{margin-top: 2rem; font-size: 1.6rem; line-height: 1.4; font-weight: var(--font-weight200); color: var(--black); word-break: keep-all;}
.ser_review_desc .review_list li p b{font-weight: var(--font-weight600);}
.ser_review_desc .review_text{padding: 2rem; margin-top: 5rem; background: var(--white);}
.ser_review_desc .review_text p{font-size: 1.6rem; line-height:2; font-weight: var(--font-weight300); color: var(--black); word-break: keep-all;}
.ser_years{margin-top: 10rem; display: flex; align-items: center; justify-content: space-between;}
.ser_years .img{padding: 0 2rem; width: 50%;}
.ser_years .img img{width: 100%; display: block;}
.ser_years .text{padding: 0 2rem; width: 45%;}
.ser_years .text h4{font-size: 3.2rem; line-height: 1.4; font-weight: var(--font-weight600); color: var(--black);}
.ser_years .text p{margin-top: 2rem; font-size: 1.8rem; line-height:1.8; font-weight: var(--font-weight300); color: var(--black); word-break: keep-all;}
.ser_years .text span{margin-top: 2rem; font-size: 1.6rem; line-height: 1.8; font-weight: var(--font-weight400); color: var(--color-c01d22); word-break: keep-all; display: block;}
.ser_years .text a{margin-top: 3rem; padding: 0.5rem 2.5rem; border-radius: 0.4rem; font-size: 1.6rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--white); background: var(--black); display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s;}
.ser_years .text a:hover{background: var(--primary-3059c7);}

    /* HISTORY */
.his_list{padding-top: 4rem; display: flex; flex-wrap: wrap;}
.his_items{width: 50%; margin-top: 10rem; display: flex; flex-direction: column;}
.his_items:nth-of-type(1),
.his_items:nth-of-type(2){margin-top: 0;}
.his_items p{font-size: 2.4rem; line-height: 1.4; font-weight: var(--font-weight600); color: var(--black); width: max-content; display: inline-flex; border-bottom: 2px solid var(--primary-3059c7);}
.his_items ul{margin-top: 4rem; width: 100%;}
.his_items ul li{padding: 0 2rem 0 2rem; font-size: 1.8rem; line-height: 2; font-weight: var(--font-weight400); color: var(--black); position: relative; word-break: keep-all;}
.his_items ul li:before{font-size: inherit; line-height:inherit; font-weight: inherit; color: inherit; content: "·"; position: absolute; top: 0; left: 0;}

/* BENEFITS */
.bef_list{padding-top: 4rem; display: flex; flex-wrap: wrap;}
.bef_items{padding: 4rem 5rem; width: calc(50% - 1.5rem); margin-right: 3rem; margin-top: 10rem; display: flex; flex-direction: column; position: relative; border: 2px solid var(--primary-3059c7);}
.bef_items:nth-of-type(2n){margin-right: 0;}
.bef_items .num{width: 4.8rem; height: 4.8rem; top: -2.4rem; font-size: 2rem; position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; justify-content: center; align-items: center; color: var(--primary-3059c7); background: var(--white); border: 2px solid var(--primary-3059c7); border-radius: 50%;}
.bef_items p{font-size: 2.4rem; line-height: 1.4; font-weight: var(--font-weight600); color: var(--black); text-align: center;}
.bef_items .bar{width: 6.5rem; margin: 2rem auto; display: block; height: 2px; background: var(--primary-3059c7);}
.bef_items span{font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--black); display: block; word-break: keep-all; text-align: center;}

/* LOCATION */
.loc_area{padding-top: 4rem;}
.map_cont{}
.map{width: 100%;}
.map .root_daum_roughmap{width: 100%;}
.map .root_daum_roughmap .wrap_map{height: 45rem;}
.map .wrap_controllers,
.map .cont{display: none}
.map_info{width: 100%; background: var(--primary-3059c7);}
.map_info ul{padding: 2rem; width: 100%; overflow: hidden; display: flex; align-items: stretch;}
.map_info ul li{padding: 2rem; width: calc(100%/3); text-align: center; border-right: 1px solid var(--white); display: flex; flex-direction: column; align-items: center;}
.map_info ul li:last-of-type{border-right: 0;}
.map_info ul li span{font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight400); color: var(--white);}
.map_info ul li p{margin-top: 1rem; font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight600); color: var(--white); word-break: keep-all;}
.other{margin-top: 10rem;}
.other ul{gap: 2.33%; display: flex; align-items: stretch; justify-content: space-between;}
.other ul li{width: 23%; word-break: keep-all;}
.other ul li p{padding: 0 0 2rem 0; font-size: 2.2rem; line-height: 1.4; font-weight: var(--font-weight300); color: var(--primary-3059c7); border-bottom: 2px solid var(--primary-3059c7);}
.other ul li span{margin: 2rem 0 0.5rem; font-size: 2rem; line-height: 1.4; font-weight: var(--font-weight300); color: var(--black); display: block;}
.other ul li a{font-size: 1.8rem; line-height: 1.4; font-weight: var(--font-weight300); color: var(--color-949494); display: inline-block; vertical-align: top;}

/* CLIENTS */
.cli_list{display: flex; flex-wrap: wrap; background: var(--white);}
.cli_list li{margin-top: 3rem; padding: 4rem; height: 25rem; width: calc(100%/3); overflow: hidden; display: flex; align-items: center; justify-content: center;}
.cli_list li:nth-of-type(1),
.cli_list li:nth-of-type(2),
.cli_list li:nth-of-type(3){margin-top: 0;}
.cli_list li img{transition: all 0.3s; max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;}
.cli_list li:hover img{transform: scale(1.1);}

@media all and (max-width: 1430px) {
    #comp_nav a{margin-right: 3rem;}
    #comp_nav a:after{right: -1.8rem;}
}

@media all and (max-width: 991px) {
    /* 내용관리 */
    .sb_cont{padding: 0 15px;}
    #comp_nav{padding-top: 20px;}
    #comp_nav a{padding: 15px; width: 33.33%; margin-right: 0; font-size: 16px; display: flex; justify-content: center;}
    #comp_nav a:after{top: 50%; right: 0; height: 18px; transform: translateY(-50%);}
    #comp_nav a:last-of-type{margin-right: 0;}
    #comp_nav a:nth-of-type(3n):after{display: none;}
    #comp_nav a:last-of-type:after{display: none;}

    .comp_wrap{}
    .comp_sec{padding: 80px 0;}
    .comp_title{font-size: 20px; word-break: keep-all;}
    .comp_inner{margin-top: 40px;}

    /* VISION */
    .vs_items{display: flex; flex-direction: column; align-items: center;}
    .vs_items + .vs_items{margin-top: 50px;}
    .vs_items p{width: 100%; max-width: 250px; height: 40px; border-radius: 40px; font-size: 18px;}
    .vs_items span{margin-top: 20px; width: 100%; padding: 0 15px; font-size: 16px; text-align: center;}

    /* MEMBERS*/
    .mem_list{padding-top: 0; display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap;}
    .mem_items{padding: 10px; width: 100%; margin: 0 0 5% 0;}
    .mem_items:last-of-type{margin-right: 0;}
    .mem_area{padding: 30px 15px;}
    .mem_area .mem_img{width: 140px; height: 140px; margin: 0 auto 30px;}
    .mem_items:hover .mem_area .mem_img img{transform: scale(1);}
    .mem_area .mem_info .position{font-size: 16px;}
    .mem_area .mem_info .name{font-size: 20px;}
    .mem_area .mem_info .mem_sns{margin-top: 20px;}
    .mem_area .mem_info .mem_sns a{width: 35px; height: 35px; margin-right: 10px;}
    .mem_area .mem_info .mem_sns a img{max-width: 18px; max-height: 18px;}

    /* SERVICES */
    .ser_area{padding-top: 0;}
    .ser_img{height: 300px;}
    .ser_list{margin-top: 40px; display: flex; align-items: center; flex-direction: column;}
    .ser_items{width: 100%; padding: 20px 10px; border-right: 0;}
    .ser_items p{font-size: 18px;}
    .ser_items ul{margin-top: 30px;}
    .ser_items ul li{font-size: 16px;}
    .ser_items ul li + li{margin-top: 10px;}
    .ser_review{margin-top: 40px; padding: 40px 20px;}
    .ser_review_imgs{width: 100%; align-items: center; justify-content: center;}
    .ser_review_imgs img{width: 100%; max-width: 250px;}
    .ser_review_desc{margin: 40px auto 0; width: 100%;}
    .ser_review_desc .review_list{flex-direction: column; justify-content: flex-start;}
    .ser_review_desc .review_list li{width: 100%;}
    .ser_review_desc .review_list li + li{margin-top: 20px;}
    .ser_review_desc .review_list li span{font-size: 18px;}
    .ser_review_desc .review_list li p{margin-top: 10px; font-size: 16px;}
    .ser_review_desc .review_text{padding: 20px; margin-top: 40px;}
    .ser_review_desc .review_text p{font-size: 16px;}
    .ser_years{margin-top: 80px; flex-direction: column; align-items: center; justify-content: flex-start;}
    .ser_years .img{padding: 0; width: 100%; max-width: 500px;}
    .ser_years .img img{width: 100%; display: block;}
    .ser_years .text{padding: 0; margin-top: 40px; width: 100%; max-width: 500px;}
    .ser_years .text h4{font-size: 24px;}
    .ser_years .text p{margin-top: 20px; font-size: 16px;}
    .ser_years .text span{margin-top: 20px; font-size: 14px;}
    .ser_years .text a{margin-top: 30px; padding: 5px 20px; border-radius: 4px; font-size: 14px;}
    .ser_years .text a:hover{background: var(--black);}

    /* HISTORY */
    .his_list{padding-top: 0;}
    .his_items{width: 100%; margin-top: 50px;}
    .his_items:nth-of-type(1){margin-top: 0;}
    .his_items:nth-of-type(2){margin-top: 50px;}
    .his_items p{font-size: 18px;}
    .his_items ul{margin-top: 30px;}
    .his_items ul li{padding: 0 0 0 15px; font-size: 16px;}

    /* BENEFITS */
    .bef_list{padding-top: 0; max-width: 640px; margin: 0 auto;}
    .bef_items{padding: 40px 30px; width: 100%; margin-right: 0; margin-top: 40px;}
    .bef_items:first-of-type{margin-top: 20px;}
    .bef_items .num{width: 48px; height: 48px; top: -24px; font-size: 18px;}
    .bef_items p{font-size: 20px;}
    .bef_items .bar{width: 65px; margin: 20px auto;}
    .bef_items span{font-size: 16px;}

    /* LOCATION */
    .loc_area{padding-top: 0;}
    .map .root_daum_roughmap .wrap_map{height: 300px;}
    .map_info ul{padding: 20px; flex-direction: column; align-items: center;}
    .map_info ul li{gap: 10px; padding: 0; width: 100%; display: block; flex-direction: row; align-items: center; justify-content: center; border-right: 0; flex-wrap: wrap;}
    .map_info ul li + li{margin-top: 10px;}
    .map_info ul li:last-of-type{border-right: 0;}
    .map_info ul li span{font-size: 14px; margin-right: 5px; display: inline;}
    .map_info ul li p{margin-top: 0; font-size: 14px; display: inline;}
    .other{margin-top: 50px;}
    .other ul{gap: 0; flex-wrap: wrap;}
    .other ul li{width: 100%; margin-bottom: 20px;}
    .other ul li:last-of-type{margin-bottom: 0;}
    .other ul li p{padding: 0 0 20px 0; font-size: 18px;}
    .other ul li span{margin: 20px 0 5px; font-size: 18px;}
    .other ul li a{font-size: 16px;}

    /* CLIENTS */
    .cli_list{padding: 20px 10px;}
    .cli_list li{margin-top: 40px; margin-right: 10%; padding: 20px; height: auto; width: 45%;}
    .cli_list li:nth-of-type(1),
    .cli_list li:nth-of-type(2){margin-top: 0;}
    .cli_list li:nth-of-type(2n){margin-right: 0;}
    .cli_list li:nth-of-type(3){margin-top: 40px}
    .cli_list li img{transition: all 0.3s; max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;}
    .cli_list li:hover img{transform: scale(1);}
}

@media all and (max-width: 820px) {
    .ser_review_imgs img:last-of-type{display: none;}
}

@media all and (max-width: 600px) {
    .ser_review_imgs img:not(:first-of-type){display: none;}
}