.container {
    max-width: 1270px;
    padding: 0;
}
.ourworks {background-color: #f0f0f0;}
.ourworks ul {
    box-shadow: 3px 5px 15px rgba(0,0,0,0.2);
    height: 380px;
    text-align: left;
    position: relative;
}
.ourworks ul li:nth-child(n+2) {
    padding-left: 40px;
}
.ourworks ul li span {
    font-family: 'Lato'!important;
    font-size: 16px;
    color: #535353;
    position: absolute;
    bottom: 30px;
    left: 40px;
}
.ourworks ul:hover span {
    color: #d25400;
}
.goto_divs {
    padding: 40px 0;
}
.goto_divs ul {
    display: flex;
    max-width: 96%;
    margin: auto!important;
    justify-content: space-between;
}
.goto_divs ul li a {
    border: 1px solid #ddd;
    display: block;
}
.goto_divs ul li a:hover img {opacity: 0.7;}
.footer_mn {
    background-color: #0b3c79;
}
#footerarea .row {
    justify-content: center;
}
#footerarea .footer_mn a {
    display: block;
    padding: 10px 15px;
    color: #fff!important;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: -0.04em;
}
#footerarea .footer_mn a:hover {background-color: #222;}
#footerarea > .container {
    padding: 35px 0;
}
.footersubarea img {
    margin-bottom: 20px;
}




/*서브페이지*/

#subarea .container {
    max-width: 1170px;
}
#subarea .row {margin: 0;}
.txt-wrap {
    border: 1px solid #ddd;
    padding: 30px 50px 25px;
}
.subcontxt p {margin-bottom: 5px;}
.txt-wrap h3 {
    color: #333;
    font-size: 18px;
    margin-bottom: 10px!important;
}
.subcontxt p.sign {
    text-align: right;
    font-size: 1.4em!important;
    color: #333;
    font-family: 'SpoqaHanSans'!important;
    font-weight: 600;
}
.txt-wrap img {border: 1px solid #ddd;}
.txt-wrapper {padding: 30px 0;}
.name {
    font-size: 1.2em;
    line-height: 2.2;
    font-weight: 600;
    letter-spacing: 0.6em;
    color: #333;
}
.txt-wrap dd span {
    padding-left: 40px;
}

#subarea iframe {box-shadow: 10px 10px 50px rgba(0,0,0,0.2);}
.address {
    border-top: 1px solid #333;
    border-bottom: 1px solid #ddd;
    padding: 30px 0 15px;
}
.add-area dl dt {margin-top: 10px!important;}
.add-area dl dt:first-child {margin-top: 0px!important;}
.add-area dd {
    padding-left: 15px;
    position: relative;
    margin-bottom: 0px;
}
.add-area dl dd::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #666;
    top: 14px;
    left: 2px;
}

.att_title font {
    font-size: 16px!important;
}
.board > tbody > tr > td, .board .bbsnewf5 > a, .board > tbody > tr > td > font {
    font-size: 16px!important;
}
.qalist > tbody > tr:hover > td, .qalist > tbody > tr:hover > .bbsnewf5 > a {color: #0c3d7a!important;}
.board_desc {
    padding: 10px;
}
#post_area span {
    font-size: 15px!important;
}
.subcontxt table {
    width: 100%;
}

.subcontxt table {
    width: 100%;
}
.subcontxt table th {text-align: center;}
.container .subcontxt table th, .container .subcontxt table td {
    font-size: 16px!important;
    padding: 10px 20px;
    border: 1px solid #ddd!important;
}

.forensic dt {
    color: #c14f00;
    font-size: 18px;
    margin-bottom: 15px;
}
.forensic dd {
    margin-bottom: 30px;
}
.forensic dt span {
    font-size: 0.825em;
    font-weight: 400;
}

.subcontxt ol {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.subcontxt ol li {
    position: relative;
    width: 21%;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px 0;
    margin: 0px 4% 30px 0;
    cursor: pointer;
    transition: all 0.5s;
}
.subcontxt ol li:hover {
    background-color: #c34c03;
    color: #fff;
}
.subcontxt ol li::before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-left: 10px solid #c34c03;
    border-right: 10px solid none;
    border-bottom: 10px solid transparent;
    top: 20px;
    right: -30px;
    opacity: 0;
    animation-name: arrow;
    animation-duration: 10s;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

.subcontxt ol li:last-child::before {display: none;}

.subcontxt ol li:nth-child(1)::before{animation-delay: 0.5s;}
.subcontxt ol li:nth-child(2)::before{animation-delay: 1s;}
.subcontxt ol li:nth-child(3)::before{animation-delay: 1.5s;}
.subcontxt ol li:nth-child(4)::before{animation-delay: 2s;}
.subcontxt ol li:nth-child(5)::before{animation-delay: 2.5s;}
.subcontxt ol li:nth-child(6)::before{animation-delay: 3s;}
.subcontxt ol li:nth-child(7)::before{animation-delay: 3.5s;}
.subcontxt ol li:nth-child(8)::before{animation-delay: 4s;}
.subcontxt ol li:nth-child(9)::before{animation-delay: 4.5s;}
.subcontxt ol li:nth-child(10)::before{animation-delay: 5s;}
.subcontxt ol li:nth-child(11)::before{animation-delay: 5.5s;}
.subcontxt ol li:nth-child(12)::before{animation-delay: 6s;}

@keyframes arrow {
    0% {opacity: 0;}
    10% {opacity: 1;}
    100% {opacity: 1;}
}


.performance .bbsnewf5 {
    text-align: center!important;
}


.paging {padding: 30px 0 0;}
.paging a {font-family: 'Noto Sans KR' , 'Roboto', sans-serif !important;}
.paging b {color: #0b3c79!important;}

.submn {text-align: center; background-color: rgba(35,49,81,0.9);}

#subtitbg h2 {text-shadow: 1px 1px 5px rgba(0,0,0,0.7);letter-spacing: 0.3em;}




















/*반응형*/

@media (max-width: 1270px){
    .row {margin: 0;}
    .container {max-width: 100%; margin:0 auto!important;}
    img {max-width: 100%;}
    
}
@media (max-width: 1199px){
    .ourworks .container {
        max-width: 90%;
    }
    .ourworks ul li:nth-child(n+2) {
        padding: 0 10px;
        text-align: center;
    }
    .ourworks ul li br {display: none!important;}
    .ourworks ul {height: 350px;}
    .ourworks ul li span {
        left: 50%;
        transform: translateX(-50%);
    }
    .htitle {margin: 0 auto 30px;}
    .goto_divs ul li {
        width: 25%;
        padding: 0 10px;
    }
    .ourworks {padding: 50px 0;}
    .txt-wrapper .offset-xl-3, .cont-g > .row > .offset-xl-3 {margin-left: 25%;}
    .txt-wrapper .col-xl-3, .cont-g > .row > .col-xl-3 {flex: 0 0 25%;    max-width: 25%;}
    .txt-wrapper .col-xl-6,  .cont-g > .row > .col-xl-6 {flex: 0 0 50%;    max-width: 50%;}
    .txt-wrap .offset-xl-1 {margin-left: 8.333333%;}
    .txt-wrap .col-xl-5 {flex: 0 0 41.666667%;    max-width: 41.666667%;}
    .subcontxt > .row > .col-xl-4 {flex: 0 0 33.333333%;    max-width: 33.333333%;}
    .subcontxt > .row > .col-xl-8 {flex: 0 0 66.666667%;    max-width: 66.666667%;}
    .txt-wrap .col-xl-5 dd,.add-area dd {
        font-size: 0.895em;
        letter-spacing: -0.02em;
    }
    .add-area dl dd::before {top: 12px;}
    .subcontxt ol li {
        font-size: 0.9em;
        letter-spacing: -0.05em;
    }
}
@media (max-width: 811px){
    .col-md-3 {
        width: 50%;
        max-width: 100%;
        flex: auto;
        margin-bottom: 30px;
    }
    .ourworks ul {
        height: 380px;
    }
    .submn {background: none;}
    .txt-wrap {padding: 10px 20px 5px;}
    .txt-wrap .offset-xl-1 {margin-left: 0;}
    .txt-wrap .col-xl-5 {flex: 0 0 100%;    max-width: 100%; padding-left: 25%;}
    .subcontxt > .row > .col-xl-4,.subcontxt > .row > .col-xl-8 {flex: 0 0 100%;    max-width: 100%;}
    .subcontxt > .row > .col-xl-4 { text-align: center; margin-bottom: 20px;}
    .subcontxt ol li {width: 28.5%;}
    .subcontxt ol li::before {right: -20px;}
}
@media (max-width: 680px){
    #main_slide .slide_txtarea h2 {font-size: 2em!important;}
    #main_slide .slide_txtarea p {font-size: 1em !important;}
    .ourworks ul {
        width: 90%;
        height: auto;
        padding-bottom: 30px!important;
    }
    .ourworks ul li span {position: static;}
    .col-md-3 {width: 100%;}
    .goto_divs ul {flex-wrap: wrap;max-width: 100%;}
    .goto_divs ul li {width: 50%;padding: 2px;}
    .goto_divs {
        padding: 10px 0;
    }
    .ourworks ul li:last-child {
        margin-top: 15px;
    }
    #footerarea .footer_mn a {padding: 10px;}
    #footerarea .footer_mn a,#footerarea ul span {font-size: 0.895em;  line-height: 1.5;  letter-spacing: -0.05em;}
    .submn li a {padding: 0 6px;}
    .shtitle {margin: 0 auto 30px;}
    .subcontxt p {line-height: 1.5!important;}
    .subcontxt p.sign {font-size: 1.1em!important;}
    .txt-wrap h3 {text-align: center;}
    .txt-wrapper .offset-xl-3, .cont-g > .row > .offset-xl-3 {margin-left: 0;}
    .txt-wrapper .col-xl-3, .cont-g > .row > .col-xl-3 ,
    .txt-wrapper .col-xl-6,  .cont-g > .row > .col-xl-6 {flex: 0 0 100%;    max-width: 100%;
    text-align: center;}
    .txt-wrap .col-xl-5 {padding-left: 0;}
    .txt-wrapper {text-align: center;}
    .txt-wrap dd span {
        display: block;
        padding-left: 40px;
    }
    .forensic dt {
        font-size: 1.1em;
        margin-bottom: 5px;
    }
    .forensic dd {
        font-size: 0.895em;
        line-height: 1.5;
    }
    .board > tbody > tr > td {
        font-size: 0.895em!important;
        line-height: 1.5!important;
        padding: 10px 5px!important;
    }
    .board .bbsnewf5 > a, .board > tbody > tr > td > font {font-size: 1em!important;line-height: 1.5!important;}
    .qalist .bbsnewf5 {
        white-space: nowrap;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .container .subcontxt table th, .container .subcontxt table td {
        font-size: 0.895em!important;
        padding: 10px;
        text-align: center;
        line-height: 1.5!important;
    }
    .subcontxt ol li {
        width: 100%;
        padding: 15px;
        font-size: 1.1em;
    }
    .subcontxt ol li::before {
        border-top: 10px solid #c34c03;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        top: 100%;
        right: 50%;
        transform: translate(10px, 10px);
    }
    .txt-wrap li {
        font-size: 0.895em;
        line-height: 1.5;
        margin-bottom: 10px;
        letter-spacing: -0.05em;
    }
    #post_area span {font-size: 1em!important;}
}