@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600;700&display=swap');

#site {
    padding-top: 0;
    font-size: 16px;
    font-family: 'Inter', 'notokr', sans-serif;
    letter-spacing: -0.034em;
    word-break: keep-all;
}

a,
button {
    transition: all ease .15s;
    -webkit-transition: all ease .15s;
    -moz-transition: all ease .15s;
    -ms-transition: all ease .15s;
    -o-transition: all ease .15s;
}

a,
a:hover,
a:focus {
    color: inherit;
}

p {
    line-height: 1.6em;
}

a[href^="mailto"] {
    color: inherit;
}

.btn.btn-primary {
    background-color: transparent;
    border: 1px solid #333;
    color: #445166;
    font-weight: 500;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: #223656;
    color: #fff;
}

.cke_screen_reader_only{
    height: 0 !important;
}

h1, h2, h3, h4, h5, h6, p, li, td, dt, dd, figcaption {
    word-break: keep-all;
}

/* RapidSSL SEAL */
.menu-top {
    top: 25px;
    left: 25px;
    position: absolute;
}

/* 불필요 항목 삭제 */
.navbar .caret {
    display: none;
}

/* 상단 메뉴 */
.navbar-inverse {
    background: #fff;
    position: static;
    margin-bottom: 0;
    border: 0
}

.navbar-inverse .navbar-brand img {
    margin-top: -4px;
}

.navbar-inverse .navbar-nav>li>a {
    font-size: 17px;
    font-weight: 500;
    color: #333;
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
    color: #223656;
}

.navbar-inverse .navbar-nav .dropdown.open .dropdown-toggle,
.navbar-inverse .navbar-nav .dropdown.open:hover .dropdown-toggle,
.navbar-inverse .navbar-nav .dropdown.open:focus .dropdown-toggle {
    background: none;
    color: #222;
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-toggle {
        border: 0;
        padding: 18px 0;
    }
    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: #333;
        transition: ease-in-out .15s all;
        opacity: 1;
        position: relative;
    }
    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        background: none;
        border-color: #223656;
    }
    .navbar-inverse .navbar-toggle:hover .icon-bar,
    .navbar-inverse .navbar-toggle:focus .icon-bar {
        background-color: #223656;
    }
    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
        border-color: transparent;
    }
    .navbar-inverse.open .navbar-toggle>.icon-bar:nth-of-type(1) {
        transform: rotate(45deg);
        top: 6px;
    }
    .navbar-inverse.open .navbar-toggle>.icon-bar:nth-of-type(2) {
        opacity: 0;
    }
    .navbar-inverse.open .navbar-toggle>.icon-bar:nth-of-type(3) {
        transform: rotate(-45deg);
        top: -6px;
    }
}

@media (min-width: 768px) {
    .navbar-inverse .navbar-nav .dropdown-menu {
        left: 50%;
        right: auto;
        transform: translate(-50%, 0);
        border-radius: .25rem;
        padding: 10px 0;
        -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, .125);
        box-shadow: 0px 4px 8px rgba(0, 0, 0, .125);
        background: #223656;
        font-size: 14px;
        text-align: center;
    }

    .navbar-inverse .navbar-nav .dropdown-menu>li>a {
        padding: 7px 20px;
        color: #fff;
        letter-spacing: 0;
    }

    .navbar-inverse .navbar-nav .dropdown-menu>li>a:hover,
    .navbar-inverse .navbar-nav .dropdown-menu>li>a:focus {
        background: none;
        color: #b6dbff;
    }
}

@media (min-width: 992px) {
    .navbar-inverse .navbar-right {
        margin-right: -30px;
    }

    .navbar-inverse .navbar-nav>li>a {
        padding: 40px 35px;
    }
}

/* 슬라이드 공통 */
.carousel-control {
    text-shadow: 0px 2px 6px rgba(0, 0, 0, .125);
    transition: ease-in-out .15s all;
}

.carousel-control.left .glyphicon::before {
    content: '\f053';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.carousel-control.right .glyphicon::before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

/* indicators */
.carousel-indicators {
    bottom: 40px;
}

.carousel-indicators :is(li, li.active) {
    aspect-ratio: 1/1;
    width: 13px;
    height: auto;
    border-radius: 50%;
    margin: 0 5px;
}

.carousel-indicators li {
    border: 0;
    background-color: rgba(255, 255, 255, .6);
    transition: ease-in-out .15s all;
}

.carousel-indicators li.active {
    background: #fff;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .0);
}

@media (max-width: 767px) {
    .carousel-control {
        font-size: 14px;
    }
    .carousel-indicators {
        bottom: 5px;
    }
    .carousel-indicators :is(li, li.active) {
        width: 11px;
    }
}

/* 푸터 */
#site footer {
    margin-top: 0px;
    background-color: #1c2633;
}

#site footer .footer-info {
    padding: 50px 0 60px;
}

#site footer .footer-info ul {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0
}

#site footer .footer-info ul li {
    list-style: none;
    display: inline-block;
    font-size: 15px;
    margin-right: 17px;
    line-height: 28px;
    letter-spacing: -0.02em;
    color: #bebfc5;
}
#site footer .footer-info .copy {
    display: block;
    margin-top: 15px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    opacity: 0.5;
}

/* 메인 페이지 */
#mainCarousel .carousel-inner .item {
    height: 700px;
}
#mainCarousel .carousel-inner .item::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    opacity: .6;
}

#mainCarousel .carousel-caption{
    top: 47%;
    text-shadow: none;
}

#mainCarousel .carousel-caption h1{
    margin-bottom: 50px;
    position: relative;
}
#mainCarousel .carousel-caption h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    background: #fff;
    margin: 50px auto;
}
#mainCarousel .carousel-caption p{
    font-size: 26px;
    letter-spacing: -0.034em;
    line-height: 1.5em;
}

#mainCarousel .carousel-caption h1 img{
    margin: 0 auto;
    width: 270px;
}

@media (max-width: 767px) {
    #mainCarousel .carousel-control {display:none}
    #mainCarousel .carousel-inner .item{height:300px}
    #mainCarousel .carousel-caption{right:2%;left:2%}
    #mainCarousel .carousel-caption h1 {
        margin: 0 0 18px;
        font-size: 26px;
    }
    #mainCarousel .carousel-caption h1::after {
        width: 45px;
        margin: 30px auto;
    }
    #mainCarousel .carousel-caption h1 img {
        width: 130px;
    }
    #mainCarousel .carousel-caption p{font-size:13px;}
}

#section_a684ec {
    padding: 20px 0;
}

#section_b53b3a {
    min-height: 400px;
}

#section_b53b3a .container {
    width: 100%;
    padding: 0;
}

.root_daum_roughmap {
    width: 100% !important;
    padding: 0 !important;
}

.root_daum_roughmap .map_border {
    display: none !important;
}

@media (min-width: 767px) {
    #section_a684ec div[class^="board_box_"] {
        width: 50%;
    }
}

.board_box_blog2 .row {
    margin-left: -5px;
    margin-right: -5px;
}

.board_box_blog2 .row>div[class^="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

.board_box_blog2 .inner {
    margin-top: 0;
    margin-bottom: 0;
}

.board_box_blog2 .inner .bottom {
    padding: 12px 10px;
}

.board_box_blog2 .inner .bottom .title {
    margin-bottom: 0;
}

.board_box_blog2 .inner .bottom .title a {
    font-size: 14px;
}

.board_box_blog2 .inner .bottom .info {
    display: none;
}

.board_box_blog2 .inner .top a .thumb {
    height: 100px;
}


/* 메인 추가 스타일 */
.mainpage h3{
    text-align: center;
    margin: 0 0 80px;
    font-size: 48px;
    font-weight: 700;
    color: #222;
    font-family: 'Montserrat', sans-serif;
}
.main-service{
    padding: 100px 0 130px;
}
.service-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    background: #fff;
    gap: 20px 0;
}
.service-wrap > div {
    padding: 0 10px;
}
.service-wrap .item{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    color: #333;
    border: 1px solid #d9e0e5;
    text-decoration: none;
    border-radius: 20px;
}
.service-wrap .item:hover{
    z-index: 100;
    border: 2px solid #4873b9;
    box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.05);
}
.service-wrap .item:hover i {
    color: #002562;
}

.service-wrap .item:hover p {
    font-weight: 700;
}
.service-wrap .item i{
    font-size: 54px;
    margin-bottom: 20px;
}

.service-wrap .item p{
    margin-bottom: 0;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0;
    font-family: 'Montserrat', sans-serif;
}

.main-contact {
    position: relative;
    display: flex;
    flex-flow: wrap;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(/public/img/main/m-con-bg.jpg);
    height: 300px;
    padding: 0;
}

.main-contact::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    opacity: .5;
}

.main-contact .text {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    text-align: center;
    color: #fff;
}

.main-contact .text .inner {
    flex: 1 1 0;
}

.main-contact .text .inner:nth-child(1) {
    text-align: left;
}

.main-contact .text .inner:nth-child(3) {
    text-align: right;
}

.main-contact .text h3 {
    display: inline-block;
    font-weight: 700;
    font-size: 25px;
    /* font-size: 20px; */
    margin: 0;
    letter-spacing: 1px;
    color: inherit;
    font-family: 'Montserrat', sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    padding-top: 7px;
}
.main-contact .text ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-contact .text li {
    font-size: 50px;
    font-weight: 500;
    /* font-weight: 400; */
    margin-bottom: 0;
    line-height: 1;
    letter-spacing: 0.02em;
    font-family: 'Montserrat', sans-serif;
}
.main-contact .text li + li {
    margin-top: 15px;
}
.main-contact .text li.email {
    font-size: 18px;
    letter-spacing: 0.3em;
    font-weight: 700;
    /* font-weight: 500; */
}
.main-contact .more-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    /* width: 250px; */
    height: 55px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    border: 1px solid #fff;
    line-height: 1;
    transition: all 0.25s;
    text-decoration: none;
}

.main-contact .more-btn i {
    font-size: 20px;
    margin-left: 20px;
}

.main-contact .more-btn:hover {
    background: #fff;
    color: #223656;
    font-weight: 700;
}

/*************** 서브 시작 ***************/
/* 공통 스타일 */
.navbar-inverse+.container {
    width: 100%;
    padding: 0;
}

.subPage>.pageTop {
    height: 320px;
    position: relative;
    color: #fff;
    text-align: center;
    background: #333 url(/public/img/sub/back_page_top.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.subPage>.pageTop::before {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    background: #000;
    opacity: 0.4;
}

.subPage>.pageTop>.container {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.subPage>.pageTop .tit {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.034em;
    margin-top: 50px;
}

/* Breadcrumb */
.subPage .breadcrumb {
    top: 70%;
    left: 15px;
    position: absolute;
    margin: 0;
    padding: 0 0 0 8px;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0;
    background-color: transparent;
    color: #cfd6e6;
}

.subPage .breadcrumb .current {
    font-weight: 400;
}

.subPage .breadcrumb>li:first-child::before {
    content: '\f015';
    top: 2px;
    left: 0;
    position: absolute;
    font-size: 0.8em;
    font-weight: 900;
    font-family: 'Font Awesome 6 Free';
    color: #a3adc4;
}

.subPage .breadcrumb>li+li:before {
    content: '\f054';
    padding: 0 6px;
    font-size: 8px;
    font-weight: 900;
    font-family: 'Font Awesome 6 Free';
    color: #bfc7db;
}

.subPage>.contents {
    padding: 100px 0 150px;
}

.subPage>.contents .row:not(.page-title)+.row {
    margin-top: 90px;
}

.title-lv-1 {
    margin: 0 0 80px;
    font-size: 44px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.034em;
    text-align: center;
    font-family: 'Montserrat', 'notokr','Noto Sans KR', sans-serif;
}

.title-lv-2 {
    position: relative;
    margin: 0 0 20px;
    font-size: 30px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.05em;
    padding-left: 12px;
}

.title-lv-3 {
    position: relative;
    margin: 0 0 15px;
    padding-left: 12px;
    font-size: 19px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.05em;
}

.title-lv-3::before {
    content: '';
    display: block;
    position: absolute;
    width: 5px;
    height: 5px;
    background: #333;
    border-radius: 50%;
    left: 0;
    top: 6px;
}

.title-lv-2::before {
    content: '';
    background: #222;
    top: 2px;
    left: 0;
    position: absolute;
    width: 4px;
    height: 27px;
}

.list-default {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

.list-default>li {
    position: relative;
}

table.tb-default {
    margin-bottom: 0;
}

table.tb-default>thead>tr>th,
table.tb-default>tbody>tr>th,
table.tb-default>tbody>tr>td {
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
}

table.tb-default>thead>tr>th,
table.tb-default>tbody>tr>th {
    text-align: center;
}

table.tb-style-1 {
    border-top: 2px solid #333;
}

table.tb-style-1>thead>tr>th,
table.tb-style-1>tbody>tr>th,
table.tb-style-1>tbody>tr>td {
    padding: 15px;
    font-size: 15px;
    text-align: center;
}

table.tb-style-1>thead>tr>th {
    letter-spacing: -0.02em;
    background: #f7f7f7;
}

/* CEO 인사말 (페이지) */
#ceo_message .box-top {
    text-align: center;
    display: flex;
    background: #f5f8fd;
    padding: 50px;
    border-radius: 20px;
}

#ceo_message .box-top .logo {
    aspect-ratio: 1/1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 7px;
    font-size: 28px;
    font-weight: 700;
    font-family: 'K2D', sans-serif;
    color: #fff;
    letter-spacing: 0.02em;
    background: #223656;
    border-radius: 100%;
}
#ceo_message .box-top .logo img{
    width: 52%;
}
#ceo_message .box-top .text {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 0px 10px;
    margin: 0 0 0 50px;
    align-items: center;
}
#ceo_message .box-top .text li {
    position: relative;
    display: block;
    font-weight: 400;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    color: #171956;
    letter-spacing: 0;
}
#ceo_message .box-top .text li+li {
    margin-left: 50px;
}
#ceo_message .box-top .text li+li::before {
    content: "\f531";
    top: 52%;
    left: -50px;
    position: absolute;
    padding: 7px;
    font: normal normal normal 1em/1 "Phosphor";
    font-size: 26px;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
}
#ceo_message .box-top .text li:last-child:before {
    display: none;
}
#ceo_message .box-top .text li span {
    padding-right: 2px;
    font-weight: 800;
    font-style: normal;
    color: #103877;
    font-size: 48px;
    line-height: 1em;
}
/* #ceo_message .box-top .text li i[class^='ph-'] {
    transform: translateY(2px);
    line-height: 1em;
    font-size: 26px;
    font-style: normal;
    color: #333;
    background: #fff;
    border-radius: 50%;
    padding: 7px;
} */

#ceo_message .box-bottom {
    padding: 80px 50px 0 50px;
    position: relative;
}

#ceo_message .box-bottom h3 {
    margin: 0 0 35px;
    font-size: 28px;
    font-weight: 600;
    color: #333;
    line-height: 1.45em;
    letter-spacing: -0.05em;
}
#ceo_message .box-bottom p {
    font-size: 19px;
    line-height: 1.8em;
    /* font-size: 17px;
    line-height: 1.7em; */
}
#ceo_message .box-bottom .from {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Noto Serif KR', serif;
    text-align: right;
}

#ceo_message .box-bottom .from>.name {
    padding-left: 8px;
    font-size: 1.3em;
    letter-spacing: 0.06em;
    font-weight: 700;
}

/* 오시는 길 (페이지) */
#location .box-contact {
    display: flex;
    margin-top: 50px;
}
#location .box-contact .image {
    flex-basis: 40%;
}
#location .box-contact .image img {
    width: 100%;
    height: 100%;
}
#location .box-contact .detail {
    flex-basis: 60%;
}
#location .list-contact {
    position: relative;
}
#location .list-contact::before {
    content: '';
    display: block;
    width: 150px;
    height: 1px;
    background: #999;
    position: absolute;
    left: -180px;
    top: 13px;
}
#location .box-contact .detail>.inner {
    height: 100%;
    padding: 100px 0 0 100px;
    margin-left: 50px;
}

#location ul.list-contact>li:not(.addr) {
    padding-left: 96px;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: -0.034em;
    line-height: 33px;
}

#location ul.list-contact>li.addr {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 500;
}
#location ul.list-contact>li.addr i {
    width: 28px;
    height: 28px;
    margin-right: 3px;
    font-size: 15px;
    color: #fff;
    line-height: 29px;
    text-align: center;
    background: #333;
    border-radius: 50%;
}
#location ul.list-contact>li .tit {
    left: 3px;
    position: absolute;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
}
#location ul.list-contact>li .tit::after {
    content: '';
    top: 4px;
    right: -12px;
    width: 1px;
    height: 12px;
    position: absolute;
    background: #fff;
    border-radius: 30px;
    opacity: 0.3;
}

/* IT 인프라 컨설팅 및 구축 (페이지) */
#business01 #row1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#business01 .con-left {
    padding: 0 30px;
}
#business01 .con-right {
    padding-left: 58px;
}

.box-consult {
    width: 100%;
    padding-top: 100%;
    display: inline-block;
    text-align: center;
    position: relative;
}
.box-consult::before {
    content: '';
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    position: absolute;
    border: 20px solid #f5f8fd;
    border-radius: 100%;
    transform: translate(-50%,-50%);
}
.box-consult .tit {
    top: 50%;
    left: 50%;
    width: 230px;
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3em;
    background: #223656;
    border-radius: 100%;
    transform: translate(-50%,-50%);
}

.box-consult .tit .inner {
    margin-top: 17px;
}
.box-consult .tit .en {
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0;
    font-size: 14px;
}
.box-consult .cate {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    padding-top: 30px;
    font-size: 18px;
    font-weight: 600;
    color: #223656;
    background: #fff;
    border: 1px solid #d9e0e5;
    border-radius: 100%;
    box-shadow: 7px 7px 15px rgb(0 0 0 / 5%);
}
.box-consult .cate1 {
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
}
.box-consult .cate2,
.box-consult .cate3 {
    top: 40%;
}
.box-consult .cate2 {
    left: -5%;
    transform: translateY(-50%);
}
.box-consult .cate3 {
    right: -5%;
    transform: translateY(-50%);
}
.box-consult .cate4,
.box-consult .cate5 {
    bottom: 2%;
}
.box-consult .cate4 {
    left: 12%;
}
.box-consult .cate5 {
    right: 12%;
}
.box-consult .cate i {
    top: 40px;
    position: absolute;
    font-size: 32px;
}
.box-biz-detail {
    position: relative;
    padding-top: 40px;
}
.box-biz-detail::before {
    content: '';
    top: 10px;
    left: 0;
    width: 70px;
    position: absolute;
    border-top: 2px solid #333;
}
.box-biz-detail .tit {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.05em;
    display: none;
}
.box-biz-detail p {
    font-size: 20px;
    font-weight: 500;
}

/* 220726 작업자 양지섭 */
.pd-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 0;
    margin: 0 -10px;
}
.pd-wrap > div[class^='col-'] {
    padding: 0 10px;
}
#product11 .pd-wrap > div {
    padding: 0 55px;
}
.pd-wrap .item > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 15px 0;
    text-decoration: none;
    border: 1px solid #d9e0e5;
    padding: 15px 25px 25px;
    border-radius: 30px;
}
.pd-wrap .item > a::before {
    content: '';
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    position: absolute;
    border: 2px solid transparent;
    border-radius: 30px;
}
.pd-wrap .item > a:hover::before {
    border-color: #4873b9;
    box-shadow: 7px 7px 15px rgb(0 0 0 / 5%);
}
.pd-wrap :where(.col-md-6, .col-md-12) .item > a {
    padding: 15px 30px 25px;
}
.pd-wrap .logo img {
    margin: 0 auto;
    height: 70px;
}

#product09 .pd-wrap .logo img {
    height: auto;
}

#product09 .pd-wrap .logo {padding: 0 30px;}

.pd-wrap .img-box {
    width: 100%;
    margin: 0;
    padding: 0 10px;
}

.pd-wrap .row.img-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.pd-wrap .img-box img {
    mix-blend-mode: multiply;
    margin-top: 20px;
}

.pd-wrap .more-btn {
    line-height: 1;
    font-size: 16px;
    text-decoration: none;
    font-weight: 700;
    padding: 35px 0 30px;
    position: relative;
    display: block;
    width: 120px;
    letter-spacing: -0.06em;
    background: center;
    color: #666;
}
.pd-wrap .more-btn::after {
    content: '';
    background: url(/public/img/sub/go_b.png) no-repeat center;
    width: 25px;
    height: 15px;
    position: relative;
    display: inline-block;
    margin-left: 10px;
    transition: all ease .3s;
}
.pd-wrap .more-btn::before {
    content: '';
    height: 12px;
    background: #bef3ff;
    position: absolute;
    bottom: 25px;
    z-index: -1;
    width: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    left: 0;
}
.pd-wrap .more-btn:hover::before {
    width: 110px;
}
.pd-wrap :where(.col-md-6, .col-md-12) .more-btn {
    margin: 0 auto;
}

.pd-wrap .col-md-12 img+.more-btn {
    padding-top: 20px;
}

.pd-wrap .more-btn:hover {color: #000;font-weight: 700;}

.pd-wrap .img-text p {
    margin: 30px 0 30px;
}

.pd-wrap .li-box {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.pd-wrap .li-box li {
    margin-bottom: 5px;
    padding: 15px 10px;
    font-size: 15px;
    text-align: center;
    color: #263d60;
    background: #ebf0f9;
    font-weight: 500;
}

.pd-wrap .item-text {
    font-size: 18px;
    text-align: center;
    margin: 0;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.pd-wrap .adv-box {
    margin-top: 20px !important;
    margin-bottom: 20px;
}

.pd-wrap .adv-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px 0;
}

.pd-wrap .adv-item h5 {
    margin: 0;
    font-size: 20px;
}

.pd-wrap .adv-item p {
    font-size: 15px;
    text-align: center;
}

.pd-wrap .li-dash {
    margin: 0;
    padding: 20px 0 0;
    list-style: none;
}

.pd-wrap .li-dash li {
    font-size: 16px;
    line-height: 1.35em;
}
.pd-wrap .li-dash li strong {
    display: block;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
    font-size: 15px;
}
.pd-wrap .li-dash li+li {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px dotted #eee;
}

/* Document Centralization */
#product11 .pd-wrap .item > a {
    flex-wrap: wrap;
    flex-direction: row;
}
#product11 .pd-wrap  .logo {
    flex-basis: 100%;
    margin-bottom: 20px;
}
#product11 .pd-wrap .img-box {
    flex-basis: 55%;
}
#product11 .pd-wrap .img-text p {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 500;
    color: #000;
    text-align: center;
    letter-spacing: -0.06em;
}

#product11 .icon-box {
    flex-basis: 45%;
    margin: 0 -5px 30px;
    padding: 15px 0 0 30px;
}
#product11 .icon-box > .box {
    flex-basis: 33.3%;
    padding: 0 5px;
}
#product11 .icon-box > .box+.box {
    margin-top: 20px;
}
#product11 .icon-box .inner {
    height: 100%;
    padding: 18px 30px;
    background: #f4f7fb;
    border-radius: 20px;
}
#product11 .icon-box img {
    width: 85px;
}
#product11 .icon-box .tit {
    margin: 5px 0 18px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
}
#product11 .icon-box .tit span {
    color: #2267af;
}
#product11 .icon-box ul li {
    padding-left: 8px;
    font-size: 0.9em;
    line-height: 1.5em;
}
#product11 .icon-box ul li::before {
    content: '';
    top: 8px;
    left: 0;
    width: 4px;
    height: 4px;
    position: absolute;
    background: #263d60;
    border-radius: 30px;
}

/* 게시판, 주문폼 공통 스타일 */
.board-area{
    min-height: 250px;
}
/* :is(.board_wrapper, .pagination_wrap, .search_wrap){
    content-visibility: hidden;
}

.board-area :is(.board_wrapper, .pagination_wrap, .search_wrap){
    content-visibility: auto;
} */

.board_wrapper,
.calendar_wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

.search_wrap {
    margin-bottom: 0;
}

.board_wrapper .table.table_default {
    border-top: 1px solid #333;
}

.table.table_default tr th,
.table.table_default tr td {
    padding: 17px 0px;
    font-size: 15px;
    border-color: #e6e6e6;
    letter-spacing: -0.015em;
}

.table.table_default tr td.subject {
    color: #333;
    position: relative;
}

.board_wrapper .table.table_default thead th {
    color: #222;
    font-weight: 700;
    background: #fff;
    border-color: #e3e3e3;
    font-size: 16px;
    letter-spacing: 0;
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
}

.table.table_default tbody .subject .badge {
    top: 18px;
    padding: 4px 6px 3px;
    position: absolute;
    font-weight: 500;
    line-height: 1.3em;
    background: #5685cd;
    font-size: 13px;
    border-radius: 0;
}

.table.table_default tbody .subject a {
    font-size: 18px;
}

.table.table_default tbody .subject a:hover {
    text-decoration: underline;
}

.table.table_default tbody .subject span>.badge+a {
    padding-left: 67px;
}

.board_data_view {

    border-bottom: 1px solid #ccc;
    border-top: 1px solid #333;
}

.board_data_view .header_wrap {
    padding: 0;

    border-bottom: 1px solid #ccc;
}

.board_data_view .header_wrap .title {
    padding: 40px 5px 5px;
    font-size: 26px;
    color: #111;
    text-align: left;
}

.board_data_view .header_wrap .info {
    margin: 0;
    padding: 15px 8px 20px;
    text-align: left;
}

.board_data_view .header_wrap .info span {
    font-size: 14px;
    color: #909090;
}

.board_data_view .header_wrap .info span+span {
    margin-left: 10px;
}

.board_data_view p {
    line-height: 1.65em;
    font-size: 18px;
}

.board_data_view p strong {
    line-height: normal;
    font-weight: 500 !important;
    letter-spacing: -0.05em;
}

.board_data_view p strong span {
    font-size: 18px !important;
}

.pagination_wrap ul li.active a,
.pagination_wrap ul li.active a:hover,
.pagination_wrap ul li.active a:focus {
    color: #386daf;
}

.pagination_wrap ul li.box a {
    border: none;
}

.pagination_wrap ul li.box:hover a,
.pagination_wrap ul li.box:focus a {
    color: #386daf;
}

.board_wrapper .text-center {
    margin-bottom: 0;
}

#reply_list span {
    font-size: 16px !important;
}

/* 게시글 작성 */
.board_wrapper .table.board_write_table tbody tr th,
.board_wrapper .table.board_write_table tbody tr td {
    font-size: 15px;
    letter-spacing: -0.04em;
    border-color: #e6e6e6;
}

.board_wrapper .table.board_write_table {
    border-top: 2px solid #333;
}

.board_wrapper .table.board_write_table tbody tr th {
    width: 200px;
    font-weight: 700;
    color: #222;
    background: #fff;
    padding-left: 10px;
}

.board_wrapper .table.board_write_table tbody tr th>span.required_text {
    color: #ff0000;
}

.board_wrapper .table.board_write_table .files .fileInput .file_add {
    padding: 3px 5px;
}
#item_0 td {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}
#request_quote #item_0 .checkbox-inline {
    flex-basis: calc(100%/7);
    padding: 0 5px;
}
#request_quote #item_0 .custom_checkbox+span {
    width: 100%;
    height: 110px;
    padding: 15px 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.88em;
    letter-spacing: -0.03em;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #d9e0e5;
}
#request_quote #item_0 .checked.custom_checkbox+span {
    font-weight: 600;
    color: #2267af;
    background: #f4f7fb;
    border-color: #2267af;
}
#request_quote #item_0 .custom_checkbox+span::before {
    top: 10px;
    left: 20px;
    position: absolute;
    margin: 0;
    color: #999;
}
#request_quote #item_0 .checked.custom_checkbox+span::before {
    color: #2267af;
}
#request_quote #item_0 .custom_checkbox+span i {
    display: block;
    margin-bottom: 5px;
    text-align: center;
    font-size: 30px;
    line-height: 1em;
}
.checkbox-inline+.checkbox-inline{
    margin: 0;
}
/* #request_quote #list_btn {
    display: none;
}
html.logined #request_quote #list_btn.list-logined {
    display: inline-block;
}
html:not(.logined) #request_quote #list_btn.list-nologined {
    display: inline-block;
} */

.form-control {
    letter-spacing: -0.03em;
    font-size: 15px;
}

/* 주문폼 */
.board_wrapper .table.board_write_table tbody tr td .form-control {
    width: 350px;
}

.board_wrapper .table.board_write_table tbody tr td .text-muted {
    margin-top: 10px !important;
    font-size: 14px;
}

.board_wrapper .table.board_write_table .checkbox a {
    font-weight: 500;
    color: #0a79cb;
    text-decoration: underline;
}

.form-control:not([readonly]):focus {
    border-color: #555;
}
.alert-info {
    border: 0;
    background: #f5f5f5;
    border-radius: 0;
    padding: 25px 25px;
    margin-bottom: 40px;
}

.alert-info ul li {
    color: #333;
    letter-spacing: -0.034em;
    line-height: 1.8em;
    font-size: 15px;
}

.alert-info ul {
    padding-left: 25px;
}

.alert-info ul li::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #333;
    border-radius: 50%;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
}

/**************** 서브 끝 ****************/

/*********** 모바일 최적화 시작 ***********/
@media (max-width: 767px) {    /* Small devices (col-xs-*) 모바일 */
    #site{padding-top:67px;font-size:15px}
    p{line-height:1.5em}

    .menu-top {
        top: 18px;
        left: 85px;
    }
    .menu-top .ssl-seal > img {
        width: 60px;
    }

    .navbar-inverse{position:fixed;border-bottom:1px solid #ddd}
    .navbar-inverse .navbar-brand img{height:48px;margin-top:-6px}
    .navbar-inverse .navbar-nav{margin:0 -15px}
    .navbar-inverse .navbar-nav > .open{background-color:#f6f6f6}
    .navbar-inverse .navbar-nav > li > a{padding:10px 15px;font-size:16px}
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus{color:#223656}
    .navbar-inverse .navbar-nav .dropdown.open .dropdown-toggle,
    .navbar-inverse .navbar-nav .dropdown.open:hover .dropdown-toggle,
    .navbar-inverse .navbar-nav .dropdown.open:focus .dropdown-toggle{color:#fff !important;background:#223656}
    .navbar-inverse .navbar-nav .dropdown.open .dropdown-toggle .caret,
    .navbar-inverse .navbar-nav .dropdown.open:hover .dropdown-toggle .caret,
    .navbar-inverse .navbar-nav .dropdown.open:focus .dropdown-toggle .caret{border-top-color:#fff}
    .navbar-inverse .navbar-nav > .open .dropdown-menu{padding:10px 0}
    .navbar-inverse .navbar-nav > .open .dropdown-menu > li > a{font-size:15px;color:#111}
    .navbar-inverse .navbar-nav > .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav > .open .dropdown-menu > li > a:focus{font-weight:600;color:#111}

    .main-service{padding:60px 0}
    .mainpage h3{margin:0 0 50px;font-size:40px}
    .service-wrap{margin:0 -15px;gap:10px 0}
    .service-wrap > div{flex-basis:33.3%;padding:0 5px}
    .service-wrap .item i{font-size:40px;margin-bottom:15px}
    .service-wrap .item p{font-size:13px}
    .main-contact{background-position:30% 50%}
    .main-contact .text{flex-wrap:wrap;padding:30px 0}
    .main-contact .text .inner:nth-child(1),
    .main-contact .text .inner:nth-child(3){text-align:center}
    .main-contact .text h3{font-size:22px}
    .main-contact .text ul{margin:15px 0}
    .main-contact .text li{font-size:40px}
    .main-contact .text li.email{font-size:14px}
    .main-contact .more-btn{width:200px;height:52px;font-size:15px}
    .main-contact .more-btn i{font-size:18px}

    #site footer .footer-info{padding:30px 0}
    #site footer .footer-info .logo img{height:48px;margin-bottom:15px}
    #site footer .footer-info ul li{font-size:12px;margin-right:12px;line-height:20px}
    #site footer .footer-info .copy{margin-top:5px;font-size:11px}

    .subPage > .pageTop{height:180px}
    .subPage > .pageTop .tit{margin-top:0;font-size:40px}
    .subPage .breadcrumb{top:62%;font-size:12px}
    .subPage .breadcrumb>li:first-child::before{top:1px}
    .subPage .breadcrumb>li+li:before{padding:0 4px}
    .subPage > .contents{padding:60px 0 80px}
    .subPage>.contents .row:not(.page-title)+.row{margin-top:60px}
    .title-lv-1{margin:0 0 50px;font-size:35px}
    .title-lv-2{margin:0 0 15px;font-size:28px}
    .title-lv-2::before{top:3px;height:24px}

    #ceo_message .box-top{flex-wrap:wrap;padding:35px;justify-content:center}
    #ceo_message .box-top .text {
        display: block;
        margin: 15px 0 0;
        text-align: left;
    }
    #ceo_message .box-top .text li{font-size:17px}
    #ceo_message .box-top .text li+li::before {
        top: -22px;
        left: 50%;
        padding: 5px;
        font-size: 21px;
        transform: translate(-50%);
    }
    #ceo_message .box-top .text li+li{margin:30px 0 0}
    #ceo_message .box-top .text li:last-child {
        margin: 40px 0 0;
        text-align: center;
    }
    #ceo_message .box-top .text li:last-child::before{top:-35px}
    #ceo_message .box-top .text li span{font-size:38px}
    #ceo_message .box-bottom{padding:50px 0 0;text-align:center}
    #ceo_message .box-bottom h3 {
        margin: 0 0 25px;
        font-size: 22px;
        /* font-size: 25px; */
    }
    #ceo_message .box-bottom p {
        font-size: 15px;
        /* font-size: 17px; */
        line-height: 1.6em;
        letter-spacing: -0.045em;
    }
    #ceo_message .box-bottom .from{margin-right:15px;font-size:18px}
    #location .root_daum_roughmap{height:350px}
    #location .box-contact{flex-wrap:wrap}
    #location .box-contact .image,
    #location .box-contact .detail{flex-basis:100%}
    #location .box-contact .detail > .inner{padding:60px 0 0;margin-left:0}
    #location .root_daum_roughmap{height:350px}
    #location .box-contact{flex-wrap:wrap}
    #location .list-contact::before{left:12px;top:-70px;width:1px;height:60px}
    #location .box-contact .detail > .inner{padding:50px 0 0;margin-left:0}
    #location ul.list-contact>li:not(.addr){padding-left:86px;font-size:16px}
    #location ul.list-contact > li .tit{font-size:16px}
    #location ul.list-contact > li.addr{margin-bottom:20px;padding-left:40px;font-size:19px}
    #location ul.list-contact > li.addr i{left:0;width:25px;height:25px;position:absolute;font-size:13px;line-height:27px}
    #business01 .con-left{padding:0 15px}
    #business01 .con-right{padding-top:30px;padding-left:15px}
    .box-consult{padding-top:0}
    .box-consult::before{border:none}
    .box-consult .tit{width:100%;height:110px;position:static;margin:0 0 5px;border-radius:20px;transform:none}
    .box-consult .tit .inner{margin-top:5px}
    .box-consult .wrap{display:flex;flex-wrap:wrap;gap:5px}
    .box-consult .cate{top:0;left:0;position:relative;flex:1 1 auto;border-radius:20px;transform:none}
    .box-biz-detail::before{left:50%;width:60px;transform:translateX(-50%)}
    .box-biz-detail p{font-size:18px;text-align:center}
    .pd-wrap{gap:15px 0}
    #product11 .pd-wrap > div{padding:0 10px}
    #product11 .pd-wrap .item > a{padding:15px 0}
    #product11 .pd-wrap .img-box{flex-basis:100%;padding-top:20px;padding-bottom:30px}
    #product11 .pd-wrap .logo{margin-bottom:10px}
    #product11 .pd-wrap .img-box img{margin-top:0}
    #product11 .pd-wrap .img-text p{margin:0;font-size:18px}
    #product11 .icon-box{flex-basis:100%;margin:0;padding:0 10px}
    #product11 .icon-box > .box+.box{margin-top:15px}
    #product11 .icon-box .tit{margin:5px 0 13px;font-size:19px}
    #product11 .icon-box .inner{padding:18px 15px}
    #request_quote #item_0 .checkbox-inline{flex-basis:50%;width:49.4%}
    #request_quote #item_0 .custom_checkbox+span {font-size:0.83em}

    .board_wrapper .table colgroup,
    .board_wrapper .table tr .num,
    .board_wrapper .table tr .hits{display:none}
    .board_wrapper .table .subject{width:55%}
    .board_wrapper .table .writer{width:20%}
    .board_wrapper .table .regdate{width:25%}
    .board_wrapper .table.table_default tr th,
    .board_wrapper .table.table_default tr td{padding:10px;font-size:12px}
    .table.table_default tbody .subject .badge{font-size:10px;top:11px;}
    .table.table_default tr td.subject a{font-size:13px}
    .table.table_default tbody .subject span > .badge + a{padding-left:55px}
    .board_data_view .header_wrap .title{padding:30px 5px 5px;font-size:22px}
    .board_data_view .header_wrap .info{padding:5px 8px 20px;}
    .board_data_view .header_wrap .info span{font-size:11px}
    .board_wrapper .table.board_write_table tbody tr td .form-control,
    .board_wrapper .table.board_write_table .form-control.form-control-big,
    .member_wrapper #join_form .table .form-control,
    .member_wrapper #join_form .table .form-control.form-control-big{width:100%}
    .board_wrapper .table.board_write_table .files .fileInput .file_add{width:100%;margin:0 0 15px;padding:6px 12px}
    .member_wrapper .text-center .btn.btn-lg,
    .board_wrapper .text-center .btn.btn-lg{width:100%;margin:0;padding:9px}
    .board_wrapper .text-center .btn#write_btn,
    .member_wrapper .text-center .btn#join_btn,
    .board_wrapper .text-center .btn#list_btn{margin-top:20px}
    .member_wrapper{padding-top:60px;padding-bottom:100px}
}
@media (min-width: 768px) and (max-width: 1199px) {    /* Medium·Large devices */
    .navbar .container{width:100%;padding:0}
    .container > .navbar-header{width:100%;padding:20px 0;text-align:center}
    .navbar-inverse .navbar-brand{float:none;display:inline-block;margin:0 auto !important;padding:0 !important}
    .navbar-inverse .navbar-brand img{margin-top:0}
    .navbar-inverse .navbar-collapse{text-align:center;line-height:0}
    .navbar-inverse .navbar-right{width:100%;float:none !important;display:flex;margin-right:0}
    .navbar-inverse .navbar-nav > li {flex:1 1 0;}
    .navbar-inverse .navbar-nav > li > a{padding:30px 5px}

    #mainCarousel .carousel-caption{right:10%;left:10%}
    #ceo_message .box-top{flex-wrap:wrap;justify-content:center}
    #ceo_message .box-top .logo{margin-bottom:30px}
    #request_quote #item_0 .checkbox-inline{flex-basis:calc(100% / 5)}
}
@media (min-width: 1200px) and (max-width: 1499px) {
    .navbar-inverse > .container {
        padding-left: 100px;
    }
}
/************ 모바일 최적화 끝 ************/