@font-face{
    font-family:RixSGo;
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/RixSGoExtraBold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RixSGoExtraBold.woff') format('woff');
}

@font-face{
    font-family:RixSGo;
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/RixSGoBold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RixSGoBold.woff') format('woff');
}

@font-face{
    font-family:RixSGo;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/RixSGoMedium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RixSGoMedium.woff') format('woff');
}

@font-face{
    font-family:RixSGo;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/RixSGoLight.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RixSGoLight.woff') format('woff');
}

@font-face{
    font-family:NanumBarunGothic;
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/NanumBarunGothicBold_Rixshop.eot');
    src: url('../fonts/NanumBarunGothicBold_Rixshop.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NanumBarunGothicBold_Rixshop.woff') format('woff');
    src: local(※), url('../fonts/NanumBarunGothicBold_Rixshop.woff') format('woff');
}

@font-face{
    font-family:NanumBarunGothic;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/NanumBarunGothic_Rixshop.eot');
    src: url('../fonts/NanumBarunGothic_Rixshop.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NanumBarunGothic_Rixshop.woff') format('woff');
    src: local(※), url('../fonts/NanumBarunGothic_Rixshop.woff') format('woff');
}

@font-face{
    font-family:NanumBarunGothic;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/NanumBarunGothicLight_RixShop.eot');
    src: url('../fonts/NanumBarunGothicLight_RixShop.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NanumBarunGothicLight_RixShop.woff') format('woff');
    src: local(※), url('../fonts/NanumBarunGothicLight_RixShop.woff') format('woff');
}

@font-face{
    font-family:NanumBarunGothic;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/NanumBarunGothicUltraLight_Rixshop.eot');
    src: url('../fonts/NanumBarunGothicUltraLight_Rixshop.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NanumBarunGothicUltraLight_Rixshop.woff') format('woff');
    src: local(※), url('../fonts/NanumBarunGothicUltraLight_Rixshop.woff') format('woff');
}

.page-wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 145%;
}
.page-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body {
}

ul { list-style: none;margin: 0;padding: 0;}
li {}

.page-banner { list-style: none;margin: 0;padding: 0;}
.page-banner li {}

.page-banner-button-left 
{
    position: absolute; 
    width: 15%; 
    height: 11%; 
    top: 45%; 
    left: 5%; 
    cursor: pointer; 
    text-align: left;
}
.page-banner-button-right 
{
    position: absolute; 
    width: 15%; 
    height: 11%; 
    top: 45%; 
    right: 5%; 
    cursor: pointer; 
    text-align: right;
}

.page-banner-sub { list-style: none;margin: 0;padding: 0;}
.page-banner-sub li {}

.page-banner-sub-button-left {position: absolute; width: 15%; height: 11%; top: 43%; left: 5%; cursor: pointer; text-align: left;}
.page-banner-sub-button-right {position: absolute; width: 15%; height: 11%; top: 43%; right: 5%; cursor: pointer; text-align: right;}

.text-title {font-family: 'NanumBarunGothic';font-weight: 700; font-size: 2.6rem;line-height: 3.1rem;letter-spacing: -0.05rem; }
.text-title span { font-size: 1.5rem;}
.text-title-sub {font-family: 'NanumBarunGothic';font-weight: 300; font-size: 1.8rem;}
.text-title-sub b {font-family: 'NanumBarunGothic';font-weight: 700; font-size: 1.8rem;}

.text-content { font-family: 'RixSGo'; font-weight: 300; font-size: 1.5rem; line-height: 2.3rem; margin-top: 1.2rem;}
.text-content b { font-family: 'RixSGo'; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.01rem;}
.text-content-sub { font-family: 'RixSGo'; font-weight: 300; font-size: 1.5rem; line-height: 1.8rem; margin-top: 1.2rem; letter-spacing: -0.01rem;}

.text-bar-top {font-size: 0px; display: inline-block; height: 3px; top: -0; bottom: -0.5rem; position: relative;}
.text-bar {font-size: 0px; display: inline-block; height: 3px; top: -0.7rem; position: relative;}

.dim-layer {display: none; position: fixed;top: 0;left: 0;width: 100%;height: 120%;z-index: 9990;text-align: center;}
.dim-layer-bg { position: absolute;top: 0;left: 0;width: 100%;height: 120%;background: #000000;opacity: 0.5;filter: alpah(opacity=50);z-index: 9991;}

.pop-layer { width: 100%; text-align: center;margin-top: 10rem;position: absolute;z-index: 9992;}
.pop-layer-banner { width: 33rem;position: relative;display: inline-block;}

.pop-layer-top { position: absolute;top: 0.2rem;right: 0.2rem;cursor: pointer;}

.pop-layer-bottom {background-color: #ffffff; height: 6rem; width: 33rem; display: inline-block; position: relative;}
.pop-layer-button {border: 0.2rem solid #E4E4E4; width: 15rem; height: 4rem; border-radius: 1rem; position: absolute; top: 1rem; }
.pop-layer-button-text { font-family: 'RixSGo'; font-weight: 500; font-size: 1.5rem; line-height: 3.6rem;color: #666666;}

.footer-wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 50%;
    background-color: #222222;
}
.footer-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.footer-text {
    font-family: 'RixSGo';
    font-weight: 300; 
    font-size: 1rem;
    color: white;
    position: absolute;
    top: 50%;
    text-align: center;
}
.footer-button-wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 45%;
    background-color: #E9EDF0;
}
.footer-button-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.footer-button-container a {
    display: inline-block;
    margin-top: 9%;
}
.footer-button-top {
    cursor: pointer;
}
.footer-button-list {
    list-style: none;
}
.footer-button-list li {
    float: left;
    margin-top: 2.7em;
    margin-left: 2em;
}
.footer-button-list li:first-child {
    margin-left: 0;
}
.project-button-more {
    cursor: pointer;
}
.font-button-more {
    cursor: pointer;
}
.technology-button-more {
    cursor: pointer;
}
.cloud-list {
    list-style: none;
    padding: 0;
}
.cloud-list li
{
}
.cloud-license-button {
    cursor: pointer;
}
.cloud-license-button-more {
    cursor: pointer;
}
.license-table {
    border-collapse: collapse;
}
.license-table th {
    font-family: 'NanumBarunGothic'; 
    font-weight: 700; 
    font-size: 1.1rem;
    line-height: 2rem;
}
.license-table th span
{
    color: red;
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 1rem;
}
.license-table td {
    font-family: 'NanumBarunGothic'; 
    font-weight: 300; 
    font-size: 1.05rem;
}
.license-table td ul {
    padding: 0;
    padding-left: 2rem;
}
.license-table td ul li
{
    line-height: 2rem;
}
.license-title {
    font-family: 'NanumBarunGothic'; 
    font-weight: 700; 
    font-size: 1.2rem;
    margin: 1rem 0 1rem 1rem;
}
.license-content {
    font-family: 'NanumBarunGothic'; 
    font-weight: 300; 
    font-size: 1rem;
    margin: 1rem 0 1rem 1rem;
}
@media all and (min-width: 256px) and (max-width: 512px) 
{
    html { font-size: 10px;}
}

@media all and (min-width: 513px) and (max-width: 896px) 
{
    html { font-size: 14px;}
}

@media all and (min-width: 897px) and (max-width: 1151px) 
{
    html { font-size: 24px;}
    
    .pop-layer { width: 100%; text-align: center;margin-top: 1rem;position: absolute;z-index: 9992;}
    .pop-layer-banner { width: 28rem;}
    .pop-layer-bottom {background-color: #ffffff; height: 4rem; width: 28rem; display: inline-block; position: relative;}
    .pop-layer-button {border: 0.2rem solid #E4E4E4; width: 12.5rem; height: 3rem; border-radius: 1rem; position: absolute; top: 0.5rem;cursor: pointer; }
    .pop-layer-button-text { font-family: 'RixSGo'; font-weight: 800; font-size: 1.3rem; line-height: 2.8rem;}
}

@media all and (min-width: 1152px) 
{
    html { font-size: 30px;}

    .pop-layer { width: 100%; text-align: center;margin-top: 1rem;position: absolute;z-index: 9992;}
    .pop-layer-banner { width: 28rem;}
    .pop-layer-bottom {background-color: #ffffff; height: 4rem; width: 28rem; display: inline-block; position: relative;}
    .pop-layer-button {border: 0.2rem solid #E4E4E4; width: 12.5rem; height: 3rem; border-radius: 1rem; position: absolute; top: 0.5rem;cursor: pointer; }
    .pop-layer-button-text { font-family: 'RixSGo'; font-weight: 800; font-size: 1.3rem; line-height: 2.8rem;}
}