@charset "utf-8";

/** CSS reset **/
@import url("/styles/reset.css");
/** web fonts **/
@import url("/styles/webfont-NanumSquare.css");
@import url("/styles/webfont-SpoqaHanSansNeo.css");
/*@import url("/styles/webfont-NotoSansKR.css");*/
/** only applied to IE11 **/
@import url("/styles/ie11-patch.css");

/** common **/
html, html * {
    box-sizing: border-box;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
}
.images {
    position: relative;
    text-align: center;
}
.images img {
    max-width: 70%;
    padding: 1rem;
}
h5 {
    margin: 0.85rem 0;
    font-weight: 400;
}
h6 {
    font-weight: 500;
    text-transform: uppercase;
}

/** typography **/
html {
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: 'Spoqa Han Sans Neo', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 15px;
    font-weight: 300;
}
strong {
    font-weight: 500;
}
em {
    font-weight: 400;
}
.signature {
    font-style: italic;
    text-align: left;
}
code {
    font-family: 'Consolas', monospace;
}

/** layout **/
html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    min-height: 100%;
}

/* BEGIN::body */
body {
    overflow-x: auto;
    overflow-y: scroll;
    position: relative;
}
/* END::body */

/* BEGIN::header */
header {
    position: absolute;
    width: 100%;
    height: 90px;
    background: #ffffff;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.30);
}
header > .inner {
    max-width: calc(1152px - 2rem);
    height: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}
header:after {
    content: ' ';
    display: block;
    clear: both;
}

header h1 {
    float: left;
}
header h1 > a, 
header h1 > a > img {
    display: block;
}
header h1 > a > img {
    margin: 10px 13px 8px 0;
}

@media screen and (max-width: 640px) {
    header {
        height: 70px;
    }
    header > .inner {
        padding: 0 0.5rem;
    }
    header h1 img {
        width: auto;
        height: 50px;
    }
}
/* END::header */

/* BEGIN::gnb */
#gnb {
    float: right;
}
#gnb > ul {
    margin-top: 44px;
}
#gnb > ul > li {
    float: left;
}
#gnb > ul:after {
    content: ' ';
    display: block;
    clear: both;
}
#gnb a {
    display: block;
    padding: 12px 9px;
    font-family: 'NanumSquare', sans-serif;
    font-size: 1.04rem;
    font-weight: 400;
    text-decoration: none;
    color: #000000;
}
#gnb li:last-child > a {
    padding-right: 0;
}
#gnb .btn-menu {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
}
#gnb .btn-menu > span {
    font-size: 0;
}

@media screen and (max-width: 640px) {
    #gnb > ul {
        display: none;
    }
    #gnb {
        position: absolute;
        width: 70px;
        height: 70px;
        right: 0;
    }
    #gnb > ul::after {
        content: '';
        display: none;
    }
    #gnb .btn-menu {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 16px;
        margin-top: -22px;
        margin-left: -24px;
        padding: 25px;
        cursor: pointer;
        clip: auto;
    }
    #gnb .btn-menu > span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 3px;
        margin-top: -1.5px;
        margin-left: -12px;
        background-color: #000000;
        font-size: 0;
    }
    #gnb .btn-menu > span::before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 3px;
        margin-top: -7px;
        background-color: #000000;
    }
    #gnb .btn-menu > span::after {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 3px;
        margin-top: 7px;
        background-color: #000000;
    }
    #gnb.open {
        background-color: #000000;
        opacity: 0.75;
    }
    #gnb.open .btn-menu > span, 
    #gnb.open .btn-menu > span::before, 
    #gnb.open .btn-menu > span::after {
        background-color: #ffffff;
    }
    #gnb.open > ul {
        display: block;
        position: absolute;
        left: calc(-100vw + 100%);
        width: 100vw;
        margin-top: 70px;
    }
    #gnb.open > ul > li {
        z-index: 100;
        float: none;
    }
    #gnb.open > ul > li > a {
        background-color: #000000;
        opacity: 0.79;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
    }
    #gnb.open > ul > li > a:hover, 
    #gnb.open > ul > li > a:focus {
        background-color: #000000;
        opacity: 0.93;
    }
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
}
/* END::gnb */

/* BEGIN::carousel */
.page-main #carousel {
    width: 100%;
    height: 500px;
    background: transparent url('/images/bg-carousel05.jpg') no-repeat scroll;
    background-position: 42% 71%;
}
.page-sub #carousel {
    height: 350px;
    background: transparent url('/images/bg-carousel01.jpg') no-repeat scroll;
    background-position: 27% 65%;
}
.page-sub#services-page #carousel {
    background: transparent url('/images/bg-carousel06.jpg') no-repeat scroll;
    background-position: 46% 44%;
}
.page-sub#contact-page #carousel {
    background: transparent url('/images/bg-carousel07.jpg') no-repeat scroll;
    background-position: 26% 36%;
}
.page-sub#work-page #carousel {
    background: transparent url('/images/bg-carousel08.jpg') no-repeat scroll;
    background-position: 26% 26%;
}

@media screen and (max-width: 640px) {
    .page-main #carousel {
        height: 350px;
        background-position: 48% 70%;
    }
    .page-sub #carousel {
        height: 250px;
    }
}
/* END::carousel */

/* BEGIN::main */
main {
    min-height: calc(100vh - 500px - 80px - 3rem);
}
.page-sub main {
    min-height: calc(100vh - 350px - 80px - 3rem);
}
main > .inner {
    max-width: calc(1152px - 2rem);
    margin: 0 auto;
    padding: 1rem;
}
main > .inner:after {
    content: ' ';
    display: block;
    clear: both;
}
@media screen and (max-width: 640px) {
    main {
        min-height: calc(100vh - 350px - 80px - 3rem);
    }
    .page-sub main {
        min-height: calc(100vh - 250px - 80px - 3rem);
    }
}

/** sections **/
section {
}
section h3 {
    border-bottom: 1px solid #000000;
    font-size: 1.33rem;
    font-weight: 700;
    line-height: 45px;
}
section h4 {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.7rem 0;
}
section .heading .datetime {
    font-size: 0.85rem;
    margin: 0;
}
section p {
    margin: 0.85rem 0;
    font-weight: 300;
    line-height: 1.5;
    text-align: justify;
}
section#announcement {
    float: left;
    width: calc(100% - 1rem - 220px);
}
section#recent-work {
    float: right;
    width: 220px;
    position: relative;
}
section#recent-work .thumbnail {
    position: relative;
    top: -30px;
    left: 0;
    width: 100%;
    height: 150px;
    margin: 0;
    border: 1px solid #DDDDDD;
    background: url('/images/recent-work-adenum-services.jpg') no-repeat scroll;
    background-position: -37px -6px;
}
section#recent-work .thumbnail > a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.23);
    font-size: 0;
    color: transparent;
}
section#recent-work .project-name {
    position: relative;
    top: 165px;
    left: 0;
    width: 100%;
    text-align: center;
}
section#what-is-adenum, 
section#adenum-intro {
    float: left;
}
.adenum-gem {
    float: right;
}
.adenum-gem img {
    width: 9rem;
    height: auto;
    padding: 0 1rem;
}
section#adenum-admin {
    clear: both;
}
section#portfolio p img {
    width: auto;
    height: 17px;
    vertical-align: middle;
}
section#pricing {
    margin: 0.85rem 0;
}
section#pricing table {
    width: 100%;
    border: 1px solid #000000;
    border-collapse: collapse;
    box-sizing: content-box;
    table-layout: fixed;
}
section#pricing th {
    font-weight: 400;
    text-align: right;
}
section#pricing thead th {
    text-align: left;
}
section#pricing thead th:nth-child(1) {
    width: 6.5rem;
}
section#pricing thead th:nth-child(2), 
section#pricing thead th:nth-child(3), 
section#pricing thead th:nth-child(4) {
    width: auto;
}
section#pricing th, 
section#pricing td {
    padding: 0.3rem;
    border: 1px solid #000000;
}
section#pricing tbody th {
    width: 6.5rem;
}
section#pricing thead th, 
section#pricing tbody td, 
section#pricing tbody dt, 
section#pricing tbody dd {
    line-height: 1.6;
}
section#pricing tbody dt {
    font-weight: 400;
}
section#pricing > section {
    float: left;
    width: calc(100% / 3);
}
section#pricing > section p {
    text-align: left;
}
section#pricing > section.common {
    clear: both;
    width: 100%;
}
section#pricing li {
    line-height: 1.5;
}
section#pricing li::before {
    content: '- ';
}
section#pricing ul {
    margin: 0.85rem 0;
}
@media screen and (max-width: 640px) {
    section#pricing > section {
        float: none;
        width: 100%;
    }
}

section#note {
    margin: 0.85rem 0;
}
section#note li {
    position: relative;
    margin-left: 1.5rem;
    line-height: 1.6;
}
section#note li::before {
    position: absolute;
    margin-left: -12px;
    content: '-  ';
}

section#contact .slogan {
    margin: 1rem 0;
    padding: 1rem;
    background-color: #eaeaea;
}
section#contact .slogan p {
    font-size: 1.15rem;
}
section#contact p {
    text-align: center;
}
section#contact .slogan p:first-child {
    margin-top: 0;
    margin-bottom: 0.25rem;
}
section#contact .slogan p:last-child {
    margin-top: 0.25rem;
    margin-bottom: 0;
}
section#contact #contact-info {
    margin: 2.0rem 0;
}
section#contact #contact-info dl img {
    width: auto;
    height: 17px;
    vertical-align: middle;
}
section#contact dt {
    padding: 0.5rem 0;
    font-weight: 500;
    text-align: center;
}
section#contact dd {
    margin-bottom: 1.25rem;
    text-align: center;
}
/*
main > .inner > section::after {
    content: ' ';
    display: block;
    clear: both;
}
*/

@media screen and (max-width: 640px) {
    section#announcement {
        float: none;
        width: 100%;
    }
    section#announcement .news p {
    }
    section#recent-work {
        float: none;
        width: 100%;
        height: 248px;
    }
    main > .inner:after {
        content: ' ';
        display: block;
        clear: both;
    }
}
/* END::main */

/* BEGIN::footer */
footer {
    width: 100%;
    min-height: 80px;
    margin: 3rem 0 0;
    padding: 5px 0;
    border-top: 2px solid #a8713a;
    background: transparent url('/images/bg-footer-light.jpg') no-repeat scroll;
    background-position: 0 50%;
}
footer > .inner {
    /*
    width: calc(100% - 2rem);
    */
    max-width: calc(1152px - 2rem);
    margin: 0 auto;
}
footer p, 
footer address {
    margin: 12px 0;
    padding: 0 1rem;
    font-weight: 400;
}
footer address img {
    width: auto;
    height: 17px;
    vertical-align: middle;
}
@media screen and (max-width: 640px) {
    footer {
    }
    footer .copyright {
    }
}
/* END::footer */