/* Page title */
.m-title {
    font-size: 26px;
    color: #333;
    text-align: center;
    padding: 20px 0 50px;
    position: relative;
    word-break: keep-all;
}

.m-title:before {
    content:'';
    position: absolute;
    bottom: 30px;
    width: 70px;
    height: 2px;
    background: #333;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.m-subtitle {
    font-size: 18px;
    color: #333;
    text-align: center;
    padding: 20px 0 40px;
    word-break: keep-all;
    font-weight: bold;
}

.m-subtitle02 {
    font-size: 16px;
    color: #333;
    text-align: center;
    padding: 10px 0 5px;
    word-break: keep-all;
    font-weight: bold;
}

.contact-info .m-subtitle {
    text-decoration: underline;
}

.content > div.lang-ver {
    display: none;
}

.btn-wrapper {
    text-align: center;
    padding: 15px;
}

.lang-btn {
    display: inline-block;
    width: 120px;
    height: 50px;
    text-align: center;
    color: #fff;
    background: #fff;
    border: 2px solid #00316b;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

.lang-btn i {
    font-size: 30px;
    color: #00316b;
    vertical-align: middle;
}

.lang-btn > span {
    display: none;
    font-size: 20px;
    color: #00316b;
    font-weight: bold;
    vertical-align: middle;
    padding-left: 5px;
}

.m-art {
    padding: 20px 5px;
}

.m-art > *:first-child {
    font-size: 17px;
    font-weight: bold;
    padding-bottom: 10px;
}

.m-art > p {
    padding: 10px 0;
    font-size: 15px;
    line-height: 20px;
}

.m-timeline > ul {
    position: relative;
    padding: 50px 0;
}

.m-timeline > ul:first-child {
    padding-top: 0;
}

.m-timeline > ul:before {
    content: "";
    width: 4px;
    height: 97%;
    background-color: #00316b;
    position: absolute;
    top: 0;
    left: 0;
}

.m-timeline .group {
    position: relative;
    padding-top: 60px;
}

.m-timeline .group:not(:first-of-type){
  margin-top: 55px;
}

.m-timeline .year {
    padding: 10px 20px;
    font-size: 21px;
    color: #fff;
    background-color: #00316b;
    position: absolute;
    border-radius: 4px;
    transition: .4s;
    top: 0;
    left: 0;
}

.m-timeline .year:after {
    content:'년';
    display: inline-block;
    padding-left: 2px;
    font-size: 15px;
    color: #fff;
    transition: .4s;
}

.time-box {
    position: relative;
    padding-top: 80px;
    padding-left: 30px;
    margin-bottom: 30px;
}

.time-box:before{
    content: "";
    width: 100%;
    height: 2px;
    background-color: #00316b;
    position: absolute;
    top: 90px;
    left: 0;
}

.time-box .date {
    min-width: 65px;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px 20px;
    text-align: center;
    transition: .4s;
    background-color: #00316b;
    color: #fff;
}

.time-box .month {
  display: block;
  font-size: 18px;
  text-transform: uppercase;
}

.time-box .month:after {
    content:'월';
    display: inline-block;
    padding-left: 2px;
    font-size: 15px;
    color: #fff;
    transition: .4s;
}

.time-box .event {
  padding: 20px 30px;
  border-radius: 4px;
  background: #e2e4f0;
  border-left: 3px solid #00316b;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 
              0 1px 2px 0 rgba(0, 0, 0, .24);
  position: relative;
  transition: .4s;
  box-sizing: border-box;
  border-top: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.time-box .event p {
    line-height: 24px;
}

.m-para {
    padding-bottom: 50px;
}

.m-para .img {
    text-align: center;
    padding: 10px 0;
}

.m-para.project .img {
    width: 80%;
    margin: 0 auto;
    padding: 20px 0;
}

.m-para.project .img img {
    width: 100%;
}

.m-para p {
    font-size: 16px;
    color: #333;
    padding: 10px 0;
    line-height: 25px;
}

.m-para ul {
    padding: 10px 0;
}

.m-para ul li {
    padding: 5px 0;
}

.m-para ul li i {
    font-size: 5px;
    display: inline-block;
    vertical-align: middle;
}

.m-para ul li span {
    display: inline-block;
    font-size: 15px;
    vertical-align: middle;
}


.pull-r {
    text-align: right;
    padding-top: 30px;
}

.project-heading {
    text-align: center;
    padding: 20px 0;
}
.project-heading span {
    display: inline-block;
    padding: 10px 5px;
    border-radius: 5px;
    background: rgba(92, 91, 89, 0.3);
    color: #333;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 1px 1px 1px 1px #333;
}

.circles {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
}

.circles img {
    width: 100%;
}


.struct-sm {
    text-align: center;
}

.struct-lg {
    text-align: center;
    display: none;
}

.together-sm {
    padding: 40px 0;
}

.together-sm > div {
    text-align: center;
}

.together-lg {
    display: none;
}


div.root_daum_roughmap {
    width: 95%;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

.post-thumbnail {
    box-sizing: border-box;
    padding: 10px 0;
}

.post-thumbnail > a {
    display: block;
    max-width: 250px;
    margin: 0 auto;
    height: 100%;
    position: relative;
    border: 1px solid #ccc;
    transition: .3s;
}

.post-thumbnail > a > span {
    display: block;
    position: relative;
    padding-top: 70%;
    overflow: hidden;
}

.post-thumbnail > a > span img {
    /* max-width: 100%; */
    width: 100%;
    height: 100%;
    /* height: auto; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;    
}

.caption {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0;
    left: 0;
    background:
    url(../../images/sub/placeholder_bt_grad.png)
    repeat-x 0 bottom; 
    box-sizing: border-box;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

.caption span {
    color: #fff;
    font-size: 14px;
    line-height: 30px;
}

.m-pagination {
    text-align: center;
}

.m-pagination ul {
    width: auto;
    max-width: none;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
    text-align:center;
    margin: 30px auto 60px;
}

.m-pagination ul li {
    margin: 0;
    float: left;
    border-right: 1px solid #e6e6e6;
    transition: .3s;
    display: none;
}

.m-pagination ul li:last-child {
    border-right: none;
}

.m-pagination ul li.current {
    background: #00316b;
}

.m-pagination ul li.current a {
    color: #fff;
}

.m-pagination ul li a {
    /* float: left; */
    border-radius: 0;
    padding: 14px 17px;
    border: 0;
    display: inline-block;
    box-sizing: border-box;
    font-size: 16px;
}

.m-pagination ul li.button {
    display: inline-block;
}

.m-pagination ul li:first-of-type {
    border-radius: 4px 0 0 4px;
}

.m-pagination ul li.button a {
    width: 40px;
    vertical-align: middle;
    box-sizing: content-box;
}

.m-pagination ul li.button a i {
    font-size: 14px;
}

.m-pagination ul li span {
    vertical-align: middle;
    /* float: left; */
    display: block;
    border-radius: 0;
    padding: 14px 17px;
    border: 0;
    user-select: none;
    font-size: 16px;
}

.m-gallery {
    width: 250px;
    margin: 0 auto;
    padding: 20px 0;
}

.m-gallery img {
    width: 100%;
}

.img-caption {
    padding: 20px 0;
    text-align: center;
}

/* Contact form */
.contact-form {
    display: block;
    padding: 20px 0;
}

.contact-form label,
.contact-form input,
.contact-form textarea {
    font-size: 16px;
} 

.contact-form > div > label {
    display: block;
    text-align: center;
    height: 50px;
    line-height: 50px;
    background: #c9def0;
    font-weight: bold;
}

.contact-form > div input {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    transition: .4s;
    height: 50px;
    border-radius: 0;
    -webkit-appearance: none;
}

.contact-form > div > label + * {
    display: block;
}

div.submit {
    text-align: center;
    padding: 50px 0 ;
}

div.submit > input {
    width: 40%;
    margin: 0 10px;
    background: #00316b;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    -webkit-appearance: none;
    border: 2px solid #00316b;
    cursor: pointer;
}

#timepicker > div {
    text-align: justify;
    border: 1px solid #ddd;
    box-sizing: border-box;
    height: 50px;
    position: relative;
}

#timepicker > div > div {
    display: inline-block;
    font-size: 20px;
    line-height: 50px;
}

#timepicker > div.time-inner:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

#timepicker > div > select {
    display: inline-block;
    width: 45%;
    border: none;
    box-sizing: border-box;
    height: 100%;
    outline: none;
    border-radius: 0;
}

@media (min-width:480px) {

    .m-title {
        font-size: 28px;
    }

    .m-timeline > ul {
        width: 90%;
        margin: 0 auto;
    }

    .m-para {
        width: 95%;
        margin: 0 auto;
    }

    .project-heading span {
        font-size: 20px;
        padding: 15px 10px;
    }

    .circles {
        width: 400px;
    }

    .together-sm {
        text-align: center;
    }

    .together-sm > div {
        display: inline-block;
        width: 45%;
    }

}
/* min-width:480px ends */

@media (min-width:768px) {

    .m-title {
        font-size: 30px;
        padding: 50px 0 90px;
    }

    .m-subtitle {
        font-size: 20px;
    }

    .m-subtitle02 {
        font-size: 17px;
    }

    .m-title:before {
        bottom: 70px;
    }

    .m-timeline > ul {
        width: 70%;
    }

    .m-timeline > ul:before{
        left: 30px;
    }

    .m-timeline .group {
        padding-top: 55px;
    }

    .time-box{
        padding-top: 0;
        padding-left: 120px;
    }

    .time-box:before{
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .time-box .date{
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .m-para {
        width: 80%;
    }

    .m-para .img {
        float: right;
        padding: 10px 0 0 60px;
    }

    .m-para.project .img {
        width: 260px;
        padding: 0 0 20px 20px;
    }

    .m-para p {
        font-size: 17px;
    }

    .circles {
        width: 500px;
        padding: 20px 0 40px;
    }

    div.root_daum_roughmap {
        width: 80%;
    }

/* Company structure */
    .struct-sm {
        display: none;
    }

    .struct-lg {
        display: block;
    }

    .together-sm {
        display: none;
    }

    .together-lg {
        padding: 40px 0;
        display: block;
        text-align: center;
    }

    .m-post-list ul {
        margin: 0 auto;
        width: 545px;
    }    

    .m-post-list ul li {
        padding: 10px;
        float: left;
    }

    .post-thumbnail > a {
        width: 250px;
        box-sizing: border-box;
    }

    .m-pagination ul li {
        display: inline-block;
    }

    .m-pagination ul li.button a {
        box-sizing: border-box;
    }

    .m-gallery {
        width: auto;
        max-width: 700px;
        text-align: center;
    }

    .m-gallery img {
        max-width: 100%;
        height: auto;
        width: auto;
    }

    /* Contact form */
    .contact-form > div {
        font-size: 0;
    }

    .contact-form label,
    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
    } 

    .contact-form > div.usr-story > label {
        height: 100px;
        vertical-align: top;
        line-height: 100px; 
    }

    .contact-form > div > label {
        display: inline-block;
        width: 30%;
        vertical-align: top;
        text-align: center;
        box-sizing: border-box;
    }

    .contact-form > div > label + * {
        width: 70%;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px solid #ddd;
    }

    .datepicker > input {
        border-bottom: none;
    }

    .contact-form > div > label + div.textarea-wrapper {
        display: inline-block;
        width: 70%;
        height: 100px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        overflow: hidden;
    }

    .contact-form > div > label + div.textarea-wrapper textarea {
        box-sizing: border-box;
        border: none;
        height: 100%;
    }

    #timepicker > div {
        border-top: none;
        border-left: none;
        border-right: none;
    }

    div.submit > input {
        width: 150px;
        margin: 0 20px;
    }

    .btn-wrapper {
        text-align: left;
    }

}
/* min-width:768px ends */

@media (min-width: 1025px) {
    
    .m-title {
        font-size: 32px;
    }

    .m-subtitle {
        font-size: 22px;
    }

    .m-art {
        width: 80%;
        margin: 0 auto;
    }

    .m-art > *:first-child {
        font-size: 18px;
    }

    .m-art > p {
        font-size: 16px;
    }


    .m-timeline > ul {
        width: 60%;
    }

    .group .year {
        border: 2px solid transparent;
        cursor: pointer;
    }

    .time-box .date {
        border: 2px solid transparent;
        cursor: pointer;
    }

    .time-box .event {
        cursor: pointer;
    }

    .m-para .img {
        padding: 10px 0 0 90px;
    }
    
    .project-heading span {
        font-size: 25px;
    }

    div.root_daum_roughmap {
        width: 70%;
        padding: 20px 40px;
    }

    /* Contact form */
    .contact-form {
        width: 70%;
        margin: 0 auto;
        border: 1px solid #ddd;
        padding: 0;
    }

    .contact-form div.textarea-wrapper textarea {
        padding: 0 5px;
    }

    .contact-info {
        width: 70%;
        margin: 0 auto;
        padding: 20px 0;
    }

    #timepicker > div > div {
    padding: 0 10px;
    }

}
/* min-width:1025px ends */

@media (min-width: 1200px) {
    
    .m-pagination ul li.button a {
        box-sizing: content-box;
    }

    .m-post-list ul {
        width: 1085px;
    }
}
/* min-width:1200px ends */