@charset "utf-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * common *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.section-title:before {background-color: var(--point);}
.btn-default, .btn-default:focus {border-color: var(--point); color: var(--point) !important;}
.btn-default:hover, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {background-color: var(--point); border-color: var(--point); color: #fff !important;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * header *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#header .navbar{font-size: var(--fz-20); font-weight: 600; letter-spacing: -0.025em; color: #444;}
#header .navbar .nav li a.active{color: var(--point);}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
.nav > li > a:hover,
.nav > li > a:focus,
.navbar-nav > li > a.active{color: var(--point);}
.dropdown-menu li{font-size: var(--fz-18); letter-spacing: -0.025em; color: #444;}
.dropdown-menu li a:hover{color: var(--point) !important;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_visual *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main_visual .video_box {
    position: relative;
    top: 0;
    height: 0;
    padding-bottom: 36.25%;
    /*padding-bottom: 56.25%;*/
    background-color: #000;
}
.main_visual .video_box:before{position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;}

.main_visual .video_box .banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media all and (max-width:650px){
    .main_visual .video_box{padding-bottom: 56.25%;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con01 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main_con01 .txt_box h2{font-size: var(--fz-36); font-weight: bold; letter-spacing: -0.025em; line-height: 1.2em; color: var(--sub-black); margin-bottom: 18px;}
.main_con01 .txt_box p{font-size: var(--fz-18); padding-top: 10px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.5em; color: var(--main-black-7c);}

.main_con01 .row{display: flex; align-items: center; flex-wrap: wrap;}

@media all and (max-width:767px) {
    .main_con01 .row #corporate-highlight {margin-top: 32px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con02 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.main_con02{background-color: var(--bg-light-gray); }
.main_con02 .item p{font-size: var(--fz-22); font-weight: 500; letter-spacing: -0.025em; color: #fff; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap;}
.main_con02 .carousel-style-1 .item img{max-width: none;}
.main_con02 .carousel-style-1 .item::before{background-color:rgba(0,36,69,0.7);}
.carousel-style-1 .item i:hover {color: var(--point);}
.main_con02 #our-work-carousel{padding: 0;}
.owl-carousel .owl-dots .owl-dot.active span, 
.owl-carousel .owl-dots .owl-dot:hover span {background-color: var(--main);}
.owl-carousel .owl-dots .owl-dot span{ border-color: var(--main);}
.owl-carousel > .owl-nav .owl-prev, 
.owl-carousel > .owl-nav .owl-next{border-color: var(--main);}
.owl-carousel > .owl-nav .owl-prev:hover, 
.owl-carousel > .owl-nav .owl-next:hover{background-color: var(--main);}
.owl-carousel > .owl-nav .owl-prev::before, 
.owl-carousel > .owl-nav .owl-next::before{color: var(--main);}
.owl-carousel > .owl-nav .owl-prev:hover::before, 
.owl-carousel > .owl-nav .owl-next:hover::before{color: #fff;}

.main_con02 .row-work {
    display: flex;
    flex-direction: row;
    /* flex-wrap: wrap; */
    justify-content: center;
}
.main_con02 .row-work .item{
    margin-right: 8px;
    margin-top: 8px;
}


@media all and (max-width:756px) {
    .main_con02 .item img{max-width: unset;}
    .main_con02 .item p{font-size: var(--fz-28);}
}

@media all and (max-width:992px) {
    .main_con02 .row-work {
        flex-wrap: wrap;
    }
}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * main_con03 *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
#our-clients .clients .item{padding: 0; background-color: #fff; box-sizing: border-box; margin-right: 6px; margin-top: 6px; max-width: 220px; overflow: hidden;}
#our-clients .clients .item a{display: inline-block; width: 218px; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;}

#our-clients .clients .item a:before{position: absolute; content: ''; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: .3s; z-index: 1; opacity: 0;}
#our-clients .clients .item a:hover:before{opacity: 1;}
#our-clients .clients .item.on a:before{width: 100%; height: 100%; opacity: 1;}
#our-clients .clients .item a.re_size{padding: 0 20px;}

#our-clients .clients .item a img{transition: all 0.3s; max-width: 94%;}
#our-clients .clients .item:hover a img{scale: 1.1;}
#our-clients .clients{margin-bottom: 0;display: flex; flex-wrap: wrap; justify-content: center;}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * sub_visual *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.sub_visual{background: no-repeat center center /cover; padding: 50px 0;}
.sub_visual .sub_path{padding-top: 15px; display: flex; gap: 5px;}
.sub_visual .sub_path > div{width: fit-content;}
.sub_visual .sub_path > div + div::before{content: '/'; display: inline-block; margin: 0 8px; font-size: 15px;}
.sub_visual .sub_path > div:nth-child(2n){display: none;}
.sub_visual .sub_path p{font-size: 18px; display: inline-block; color: var(--sub-coolgray-7c)}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * intro *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.intro .con01 .owl-carousel .owl-stage{margin: 0 auto;}
.intro .con01 .row {display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap;}
.intro .con01 .row h3.main_tit{font-size: var(--fz-40);}
.intro .con01 .row:last-child{margin-top: 40px; position: relative;}
.intro .con01 .item{width: 18vw; height: calc(18vw); border-radius:999px; display: flex; flex-direction:column; align-items: center; justify-content: center;background-color: rgba(0,32,63,0.65); min-width: 240px; min-height: 240px; margin-bottom: 20px; max-width: 320px; max-height: 320px;}
.intro .con01 .item h3{color: #fff; padding-top: 8px; font-size: var(--fz-24)}
.intro .con01 .item h2{color: #fff; font-size: var(--fz-28);}
.intro .con01 .item:hover{ background-color: var(--point);}

.intro .con01 .item:first-child{background-color: #00C08B; z-index: 2}
.intro .con01 .item:nth-child(2){background-color: #2A9F7C; z-index: 2}
.intro .con01 .item:nth-child(3){background-color: #177E61; z-index: 2}

.intro .con01 .thin-line{border-top: 2px solid var(--sub-coolgray-4c); position: absolute; top: 50%; width: 720px; z-index: 1;}

@media (max-width: 992px) {

    .intro .con01 .item {
       min-width: 200px;
       min-height: 200px;
    }
    .intro .con01 .thin-line{width: 620px;}
}

@media (max-width: 768px) {
    .intro .con01 .row {
        flex-direction: column;
        align-items: center;
    }
    .intro .con01 .item {
        min-width: 240px;
        min-height: 240px;
     }
    .intro .con01 .row h3.main_tit{font-size: var(--fz-34);}
    .intro .con01 .thin-line{transform: rotate(90deg); width: 720px;}
}


/* .intro .con01 .item .icon{margin: 0 auto 35px; width: fit-content; position: relative;}
.intro .con01 .item .icon img{width: 100px; height: 100px;}
.intro .con01 .item .icon .on{transition: opacity 0.3s; position: absolute; top: 0; left: 0; opacity: 0;}
.intro .con01 .item:hover .icon .on{opacity: 1;} */
/* .intro .con01 .item h1{margin-bottom: 0 !important;} */
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * chart *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.chart .img_box{text-align: center;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * location *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.location .map_box{overflow: hidden;}
.location .col-sm-4{padding-left: 32px;}
.location .map_box .root_daum_roughmap{width: 100%; height: 100%;}
.location .map_box .root_daum_roughmap .wrap_map{}

@media (max-width: 768px) {
    .location .col-sm-4 {
        padding-top: 24px;
    }
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * business *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.services-2 {display: flex;}
.services-2 .col-sm-custom {width: 20% !important; padding-left: 10px; padding-right: 10px;}
.services-2 .left p {text-align: left; font-size: 16px;}

.services-2 ul {list-style-type: disc; padding-left: 20px; box-sizing: border-box; font-size: 16px; text-align: left;}
.services-2 ul > ul {list-style-type: circle;}

@media all and (max-width: 767px) {
    .services-2 {flex-wrap: wrap;}
    .services-2 .col-sm-custom {width: 100% !important;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * referr *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.refer table, .refer table th, .refer table td {border-color: #dbdbdb;}
.refer table {width: 100%; table-layout: fixed;}
.refer table  tr {height: 60px;}
.refer table th {background-color: #cc2431; color: #fff; text-align: center; font-weight: 600; font-size: 18px; letter-spacing: -0.024em;}
.refer table td {text-align: center;}
/* icon */
.refer i.icon {display: inline-block; width: 24px; height: 24px; background: no-repeat center center / contain;}
.refer i.total {background-image: url(../img/total-icon.png);}
.refer i.part {background-image: url(../img/part-icon.png);}
.refer .note {margin-top: 20px;}
.refer .note p {font-size: 18px; text-align: right;}
.refer .note p > * {vertical-align: middle;}
.refer .anchor {transform: translateY(-100px); visibility: hidden; opacity: 0;}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * business *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.business .anchor {opacity: 0; visibility: hidden; transform: translateY(-100px);}
.business .con01 .btn_wrap {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 20px; gap: 10px;}
.business .highlight-text {margin-bottom: 40px !important;}
.business .con02 .pricing-2 {display: flex; flex-wrap: wrap; align-items: stretch; margin-bottom: 0;}
.business .con02 .pricing-2 li {background: var(--point); width: 19%; min-height: 200px !important; height: auto !important; padding: 20px 20px; box-sizing: border-box; color: #000; position: relative; z-index: 9; display: flex; flex-direction: column; justify-content: flex-start;}
.business .con02 .pricing-2 li h4 {color: #000; font-size: 22px; margin-bottom: 10px; flex-shrink: 0;}
.business .con02 .pricing-2 li p {position: relative; z-index: 2; font-size: 14px; margin-top: 10px !important; line-height: 1.4; text-wrap-mode: wrap; flex-grow: 1;}
/* .business .con02 .pricing-2 li::before{background-color: var(--point); z-index: -1;} */
.business .con02 .pricing-2 li + li::after {
    opacity: 1;
    content: '';
    position: absolute;
    top: 56%;
    transform: translateY(-50%);
    right: calc(100% - 14px);
    width: 40px;
    height: 40px;
    background: url('../img/cosmetics_con05_arrow.png') no-repeat center center / contain;
    z-index: 10;
}

@media (max-width: 1200px) {
    .business .con02 .pricing-2{justify-content: center;}
    .business .con02 .pricing-2 li {width: 32.333%;}
    .business .con02 .pricing-2 li + li::after{content: none;}
}

@media (max-width: 768px) {
    .business .con02 .pricing-2 li {width: 49%;}
}

.business .main-img {margin: 0;}

.business .check_list p {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.045em;
    color: var(--main-black-7c);
    position: relative;
    width: 90%;
    margin: 0 auto !important;
    border-bottom: 1px solid var(--sub-coolgray-7c);
    text-align: left;
    padding-left: 30px;
    margin-top: 50px !important;
}

.business .check_list p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    background: url('../img/check-icon.png') no-repeat center;
}

.business .con07 ul {
    font-size: 0;
    letter-spacing: -4px;
    margin-top: 40px;
}

.business .con07 ul:after {
    content: '';
    display: block;
    clear: both;
}

.business .con07 ul li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(25% - 15px);
    min-height: 270px;
    padding: 40px 10px 0;
    background: var(--bg-light-gray);
    text-align: center;
    box-sizing: border-box;
}

.business .con07 ul li:before {
    content: '';
    position: absolute;
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
    background: url('../img/cosmetics_con05_arrow.png') no-repeat center center / contain;
    z-index: 10;
}

.business .con07 ul li .img_box img {
    max-width: fit-content;
}

.business .con07 ul li p {
    font-size: 22px;
    color: var(--sub-black);
    letter-spacing: -0.045em;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    margin-top: 10px;
}

.business .con07 ul.ul_left li {
    float: left;
    margin-right: 20px;
}

.business .con07 ul.ul_left li:last-of-type {
    margin-right: 0;
}

.business .con07 ul.ul_left li:before {
    right: -33px;
}

.business .con07 ul.ul_left li:last-of-type:before {
    display: none;
}

.business .con07 ul.ul_left li:last-of-type:after {
    content: '';
    position: absolute;
    left: calc(50% - 24px);
    bottom: -33px;
    width: 48px;
    height: 48px;
    background: url('../img/cosmetics_con05_arrow.png') no-repeat center center / contain;
    z-index: 10;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

.business .con07 ul.ul_right li {
    float: right;
    margin-right: 20px;
}

.business .con07 ul.ul_right li:first-of-type {
    margin-right: 0;
}

.business .con07 ul.ul_right li:before {
    right: -33px;
}

.business .con07 ul.ul_right li:first-of-type:before {
    display: none;
}

@media all and (max-width: 767px) {
    .business .con07 ul li {
        width:calc(50% - 10px);
    }

    .business .con07 ul.ul_left li {
        float: none;
    }

    .business .con07 ul.ul_left li:nth-of-type(2n) {
        margin-right: 0;
    }

    .business .con07 ul.ul_left li:nth-of-type(n+3) {
        margin-top: 20px;
    }

    .business .con07 ul.ul_left li:before {
        display: none;
    }

    .business .con07 ul.ul_left li:last-of-type:after {
        display: none;
    }

    .business .con07 ul.ul_right li {
        float: none;
    }

    .business .con07 ul.ul_right li:first-of-type {
        margin-right: 20px;
    }

    .business .con07 ul.ul_right li:nth-of-type(2n) {
        margin-right: 0;
    }

    .business .con07 ul.ul_right li:nth-of-type(n+3) {
        margin-top: 20px;
    }

    .business .con07 ul.ul_right li:before {
        display: none;
    }
}

@media all and (max-width: 640px) {
    .business .con07 ul li {
        width:100%;
        min-height: 0;
        padding: 20px 10px;
    }

    .business .con07 ul.ul_left li {
        margin-right: 0;
    }

    .business .con07 ul.ul_left li:nth-of-type(n+2) {
        margin-top: 20px;
    }

    .business .con07 ul.ul_right li {
        margin-right: 0;
    }

    .business .con07 ul.ul_right li:nth-of-type(n+2) {
        margin-top: 20px;
    }
}