/*******************************************************************
	Font
********************************************************************/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
/* Roboto */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean'); /*  NotoSans KR */

/*******************************************************************
	Reset
********************************************************************/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, button, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
    display: block;
    border: 0;
    *margin: 0;
    *padding: 0;
    *font-size: 0
}

/* html5 */
table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset, img, iframe {
    border: 0
}

img {
    max-width: 100%;
    height: auto !important;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
    image-rendering: -moz-auto;
    image-rendering: -o-auto;
    image-rendering: webkit-optimize-contrast;
    image-rendering: auto;
    -ms-interpolation-mode: nearest-neighbor;
}

ul, ol {
    list-style: none
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%
}

caption, legend {
    display: none
}

html {font-size: 62.5%;}

body {
    position: relative;
    -webkit-overflow-scrolling: touch;
    font-family: 'Noto Sans KR', 'Sans-serif';
    width: 100%;
    height: 100%;
    color: #191919;
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #191919;
}

a[href^="tel"] {
    font-style: normal;
}

input, button, select, textarea {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

b,
i,
em {
    font-style: normal;
    font-size: inherit;
    color: inherit
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

/*******************************************************************
	Clear
********************************************************************/
.clear::after {
    content: " ";
    display: block;
    clear: both;
}

/*******************************************************************
	Common
********************************************************************/
#wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    padding-top: 6rem;
}

.wrap {
    position: relative;
    width: 100%;
    height: 100vh;
}

.cr_saas {
    color: #FF5831;
}

.cr_iaas {
    color: #FCD532;
}

.cr_paas {
    color: #FC8738;
}

.cr_managed {
    color: #129612;
}

.cr_consulting {
    color: #91E213;
}

.cr_operation {
    color: #00949B;
}

.cr_migration {
    color: #00D3AA;
}

.cr_convergence {
    color: #7A51BC;
}

input {
    /*ios*/
    appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

select{
    /*ios대응*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select::-ms-expand{
    /* 화살표 없애기 for IE10, 11*/
    display:none;
}

/*******************************************************************
	Header
********************************************************************/
header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 99999;
}

header.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 99999;
}

header > section {
    position: relative;
    height: 6rem;
    border-bottom: 1px solid #e5e5e5;
}

header .logo {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
}

header .logo img {
    width: 13rem;
}

header .gnb_icon {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
}

header .gnb_icon ul {}

header .gnb_icon ul li {
    float: left;
    margin-left: 0.5rem;
}

header .gnb_icon ul li img {
    width: 3rem;
}

header .gnb_wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: -100%;
    background: #fff;
    z-index: 10000;
    transition: 0.3s;
}

header .gnb_wrap.gnb_on {
    right: 0;
}

header .gnb_wrap .gnb {
    position: relative;
    height: 6rem;
    border-bottom: 1px solid #e5e5e5;
}

header .gnb_wrap .gnb > div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

header .gnb_wrap .gnb > div img {
    width: 3rem;
}

header .gnb_wrap .gnb > div > a {
    font-size: 1.3rem;
}

.gnb_member {
    left: 1.5rem;
}

.gnb_login {
}

.gnb_join {
    margin-right: 1rem;
}

.gnb_user {
    font-size: 1.3rem;
    left: 1.5rem;
}

.gnb_user > span {
    font-weight: 600;
}

.gnb_close {
    width: 3rem;
    right: 1.5rem;
}

.menu_wrap {
    width: 100%;
    height: calc(100% - 6rem);
}

.tab_menu {
    float: left;
    width: 40%;
    height: 100%;
    overflow-y: auto;
    background: #f6f6f6;
}

.tab_btn {}

.tab_btn li {}
.tab_btn li a {
    display: block;
    word-break: keep-all;
    padding: 2rem;
    font-size: 1.4rem;
}

.tab_btn li.active a {
    color: #fff;
    background: #0b4da2;
}

.tab_cont {
    float: left;
    width: 60%;
    height: 100%;
    padding: 0 2rem;
    font-size: 1.4rem;
    overflow-y: auto;
}

.tab_cont > div {
    overflow: auto;
}

.tab_group {
    padding: 2rem 0;
    border-bottom: 1px solid #e5e5e5;
}

.tab_cont div .tab_group:last-child {
    border: none;
}

.tab_cont div .tab_group h2 {
    font-size: 1.5rem;
    letter-spacing: -1px;
}

.tab_cont div .tab_group h2.mbt {
    margin-bottom: 1rem;
}

.tab_cont div .tab_group h2 > a {
    display: block;
}

.tab_cont div .tab_group > a {
    content: "- ";
    display: block;
    margin: 1rem 0;
}

.tab_cont div .tab_group > a:last-child {
    margin-bottom: 0;
}

.login_error_txt {
    word-break: keep-all;
    margin-bottom: 2rem;
}

.login_error_link a {
    font-size: 2.1rem;
}

.login_error_link img {
    width: 2.5rem;
    vertical-align: text-top;
}

/* 통합검색 창 */
.total_search {
    position: relative;
    top: -15rem;
    width: 100%;
    height: 15rem;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 10000;
    transition: 0.3s;
}

.search_on {
    top: 0;
}

.total_search_close {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 1.5rem;
    right: 1.5rem;
}

.overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.total_search_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 3rem);
    transform: translate(-50%, -50%);
}

.total_search .total_search_inner input[type="text"] {
    float: left;
    width: 80%;
    height: 4.5rem;
    border: 1px solid #4e4e4e;
    padding: 0 1rem;
    outline: none;
    border-top-left-radius: 0.4rem;
    border-bottom-left-radius: 0.4rem;
}

.total_search .total_search_inner input[type="button"] {
    width: 20%;
    height: 4.5rem;
    color: #fff;
    background: #4e4e4e;
    border: 1px solid #4e4e4e;
    outline: none;
    border-top-right-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
}

/*******************************************************************
	Container
********************************************************************/
.container {
    font-size: 1.3rem;
    background: #fff;
}


/*******************************************************************
	Location
********************************************************************/
.lnb_wrap {
    padding: 0 2rem;
    background: #f6f6f6;
    border-bottom: 1px solid #e5e5e5;
}

.lnb_wrap ul {}
.lnb_wrap ul li {
    float: left;
    position: relative;
    font-size: 1.3rem;
    color: #696969;
    padding-right: 1.1rem;
    margin-right: 0.5rem;
    line-height: 3.5rem;
    letter-spacing: -1px;
}

.lnb_wrap ul li:last-child {
    margin-right: 0;
    padding-right: 0;
}

.lnb_wrap ul li::after {
    position: absolute;
    content: "\003E";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.lnb_wrap ul li:last-child::after {
    display: none;
    margin-right: 0;
}
/*******************************************************************
	paging
********************************************************************/
.paging {
    padding: 2rem 2rem 4rem 2rem;
    text-align: center;
}

.paging span {
    display: inline-block;
    width: auto;
    height: 100%;
}

.paging span a {
    display: inline-block;
    font-size: 1.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
}

.paging span a.on {
    color: #fff;
    background: #0b4da2;
}

/*******************************************************************
	Footer
********************************************************************/
footer {
    border-top: 1rem solid #e5e5e5;
}

.footer_link {
}

.footer_link ul {}

.footer_link ul li {
    float: left;
    text-align: left;
    margin-right: 2rem;
}

.footer_link ul li:last-child {
    margin-bottom: 0;
}

.footer_select {
    width: 100%;
    background: #fff;
    cursor: pointer;
}

.footer_select_box {
    padding: 1rem;
    position: relative;
    border: 1px solid #E5E5E5;
}

.footer_select_box img {
    position: absolute;
    top: 50%;
    right: 1rem;
    margin-top: -0.35rem;
    transition: 0.2s;
}

.footer_select_box img.arrowRotate {
    transform: rotate(180deg);
}

.footer_select_link ul {
    display: none;
    width: 100%;
    max-height: 15rem;
    overflow-y: scroll;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-top: none;
}

.footer_select_link ul li {
    padding: 1rem;
}

.footer_select_link ul li:hover {
    background: #e5e5e5;
}

.footer_select_link ul.selectOpen {
    display: block;
}

.footer_info_wrap {
    font-size: 1.3rem;
    padding: 2rem;
}

.footer_info_img {
    text-align: center;
    margin: 0 auto 2rem auto;
}

.footer_info_img a {
    width: 50%;
    text-align: center;
    float: left;
}

.footer_info_img img {
    max-width: 100%;
}

.footer_info_txt {}

.footer_info_txt > ul {}

.footer_info_txt > ul > li {
    float: left;
    letter-spacing: -0.1rem;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.footer_info_txt > ul > li > span {
    font-weight: 600;
    margin-right: 1rem;
}

.copyright {
    padding: 1rem 0;
}

@media screen and (min-width: 280px) and (max-width: 319px) {
    html {
        font-size: 58.5%;
    }
}

@media screen and (min-width: 768px) {
    .tab_menu {
        width: 30%;
    }
    .tab_cont {
        width: 70%;
    }
    .footer_info_img img {
        max-width: 70%;
    }
    .total_search .total_search_inner input[type="text"] {
        float: left;
        width: 90%;
    }
    .total_search .total_search_inner input[type="button"] {
        width: 10%;
    }
}

/*.top_menu {*/
/*    height: 4.7rem;*/
/*    padding: 0 1rem;*/
/*    font-size: 1.5rem;*/
/*}*/

/*.frame {*/
/*    overflow: hidden;*/
/*}*/

/*.frame ul {*/
/*    list-style: none;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    height: 100%;*/
/*    width: none;*/
/*}*/
/*.frame ul li {*/
/*    float: left;*/
/*    height: 100%;*/
/*    padding: 0 1rem;*/
/*    background: #fff;*/
/*    color: #000;*/
/*    text-align: center;*/
/*    cursor: pointer;*/
/*}*/

/*.topmenu ul li ul li ul li, .activetop > a {*/
/*    color: #0b4da2;*/
/*    font-weight: 600;*/
/*}*/

/*.topmenu ul li ul li ul li, .activetop > a:after {*/
/*    content: "";*/
/*    display: block;*/
/*    width:100%;*/
/*    border-bottom: 2px solid #0b4da2;*/
/*    margin: 15px 0px 0px 0px;*/
/*}*/