/*===========================================================================
    초기화
============================================================================*/
* { font-family: 'Pretendard', sans-serif; box-sizing: border-box; margin: 0; padding: 0;}
html, body {font-size:62.5%;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, em, img, strong, b, i, dl, dt, dd, ol, ul, li, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, menu, nav, section, video, a {
    font-size: var(--basic-font);
    color: #111;
    font-weight: 500;
    line-height: 1;
    scroll-behavior: smooth;
    outline: 0;
}

:root {
    --basic-font : 16px;
    --basic-border : #dddddd;
    --main-color: #2a88f9;
    --box-shadow: 3px 3px 9px 0 rgba(0,0,0,0.03);
}

h1, h2, h3, h4, h5, h6 {line-height: 1; font-weight: 500; word-break: keep-all;}
body { line-height: 1;}
body.disabled {overflow: hidden;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul, ol, li { list-style: none;  word-break: keep-all;}
strong { display: inline-block; font-size: inherit; }
i {display: inline-block; font-style: normal;}
a { margin: 0; padding: 0; font-size: 100%; }
b {font-weight: bold;}
em {display: inline-block; font-style: normal;}
table { width: 100%; border-collapse: collapse; border-spacing: 0; border: 0; table-layout: fixed; border-bottom: 1px solid #ddd;}
table colgroup {word-wrap: break-word;}
table thead {border-bottom: 1px solid #ddd;}
table tr { }
/* thead */
table thead {}
table thead tr {border-top: 1px solid #333333; }
table thead th {height: 50px; font-size:var(--basic-font); padding:10px; text-align: center;}
/* tbody */
table tbody tr {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
table tbody th {background: #f4f6f9; padding: 10px 20px 10px 32px; font-weight: 600;}
table tbody td {padding: 10px 20px; font-size:var(--basic-font); height: 50px; font-weight: 500; text-align: center;}
table tbody td.left {text-align: left;}
table tbody td.right {text-align: right;}
table tbody td .detail-button {height: auto; border: 0; padding: 0;}
table tbody td input:not(input[type="radio"], input[type="checkbox"]), table tbody td select {width: 100%;}

table.table-left tbody tr th {height: 60px; text-align: left;}
table.table-left tbody tr td {height: 60px; text-align: left; padding: 20px;}

.main-wrap .main-content table:not(:last-child) {margin-bottom: 34px;}


.single-line-ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.two-lines-ellipsis {display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}


input,select { vertical-align: middle; padding: 10px 12px;}
select {max-width: 400px; width: 100%; border: 1px solid #dddddd; font-size: var(--basic-font); border-radius: 4px; appearance: none; position: relative; background: url(../img/icon/icon-select-arrow.svg) calc(100% - 16px) center no-repeat; background-size: 12px; outline: none; }
select:active {outline: none;}
select option {display: block; height: 40px; font-size: var(--basic-font); padding: 10px; color: #999; border: 1px solid #ddd; border-radius: 4px;}
select option:checked {background-color: #f4f6f9;}
p {font-weight: 500; line-height: 1.6; word-break: keep-all;}
img { display: block; width: 100%; object-fit: cover; }
span { display: inline-block; }
label {}
textarea {width: 100%; height: 140px; font-size: var(--basic-font); border: 1px solid #dddddd; border-radius: 4px;}
textarea::placeholder {font-size: var(--basic-font);}
a { display: block; text-decoration: none; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"]{
    display: block;
    width: 100%;
    height: 45px;
    border: 1px solid #dddddd;
    font-size: var(--basic-font);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 4px;
    padding:4px 16px;
    background: #fff;
    outline: none;
}
input:read-only {background: #f9f9f9;}
input::placeholder { font-size:inherit; color:#999999;}
button {min-height: 35px; font-size:var(--basic-font); padding: 0 20px; border-radius: 4px; background: initial; border: 1px solid #dddddd; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;}
textarea { resize: none; padding: 14px; font-size: 1.6rem; outline: 0;}

/* 텍스트 */
.alarm-text {color: #e74a3b;}

/* 아이콘 */
i {display: flex; background: none; background-repeat: no-repeat;}
i.icon-magnifier {width: 20px; height: 20px; background: url('../img/icon/icon-magnifier.svg') no-repeat;}
.icon-info {font-size: 1rem !important; padding: 4px 6px; color: #fff !important; border-radius: 8px; line-height: 1; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; font-style: normal;}
.icon-info.new {background: #e42e2f !important;}
.icon-info.update {background: var(--main-color) !important;}
/* 아이콘 - 서비스 상단 타이틀 */
i.vm-instance {background: url('../img/service/icon/icon-a-vm-instance.svg');}
i.gpu-instance {background: url('../img/service/icon/icon-a-gpu-instance.svg');}
i.vm-backup {background: url('../img/service/icon/icon-a-vm-backup.svg');}
i.user-template {background: url('../img/service/icon/icon-a-user-template.svg');}
i.auto-scaling {background: url('../img/service/icon/icon-a-auto-scaling-group.svg');}
i.block-storage {background: url('../img/service/icon/icon-a-block-storage.svg');}
i.file-storage {background: url('../img/service/icon/icon-a-file-storage.svg');}
i.object-storage {background: url('../img/service/icon/icon-a-object-storage.svg');}
i.persistent-volume {background: url('../img/service/icon/icon-a-persistent-volume.svg');}
i.snapshot {background: url('../img/service/icon/icon-a-snapshot.svg');}
i.file-backup {background: url('../img/service/icon/icon-a-file-backup.svg');}
i.container {background: url('../img/service/icon/icon-a-container.svg'); max-width: initial; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;}
i.container-terminal {background: url('../img/service/icon/icon-a-container-terminal.svg');}
i.api-gate {background: url('../img/service/icon/icon-a-api-gate.svg');}
i.oracle {background: url('../img/service/icon/icon-a-oracle.svg');}
i.publicip {background: url('../img/service/icon/icon-a-publicip.svg');}
i.sub-domain {background: url('../img/service/icon/icon-a-sub-domain.svg');}
i.direct-connect {background: url('../img/service/icon/icon-a-direct-connect.svg');}
i.load-balancer {background: url('../img/service/icon/icon-a-load-balancer.svg');}
i.ssl-vpn {background: url('../img/service/icon/icon-a-ssl-vpn.svg');}
i.basic-security {background: url('../img/service/icon/icon-a-basic-security.svg');}
i.industry-security {background: url('../img/service/icon/icon-a-industry-security.svg');}
i.infra-security {background: url('../img/service/icon/icon-a-infra-security.svg');}
i.ip-vpn-security {background: url('../img/service/icon/icon-a-ip-vpn-security.svg');}
i.biztalk {background: url('../img/service/icon/icon-a-biztalk.svg');}
i.cms {background: url('../img/service/icon/icon-a-bizsw.svg');}
i.tech-support {background: url('../img/service/icon/icon-a-tech-support.svg');}
i.server-managed {background: url('../img/service/icon/icon-a-server-managed.svg');}
i.baremetal {background: url('../img/service/icon/icon-a-baremetal-server.svg');}


/* 아이콘 - 솔루션 */
/* 공공 범용 클라우드 */
.energy-industry-cloud {background: url('../img/solution/icon/icon-a-energy-industry-cloud.svg');}

main {min-height: calc(100vh - 100px);}

@media (max-width:1300px) {
    main {min-height: calc(100vh - 60px);}
}

/*===========================================================================
    공통요소
============================================================================*/
.container {max-width: 1460px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;}

.agree-box {position: relative;}
.agree-box label { position: relative; display: flex; align-items: center; padding-left:25px; margin: 0; font-size: 1.4rem; cursor: pointer; }
.agree-box input { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1px; height: 1px; }
.agree-box label::before { content: ''; position: absolute; top: 50%; left: 0; display: block; width: 20px; height: 20px; margin-top: -10px; background: url('../img/icon-before-checkbox.svg') no-repeat 0 0; background-size: 20px 20px; }
.agree-box input:checked+label { color:#191919; }
.agree-box input:checked+label::before { content: ''; background: url('../img/icon-after-checkbox.svg') no-repeat 0 0; background-size: 20px 20px; }

/* select box */
.select-box {position:relative;}
.select-box .select-txt {width: 100%; padding: 14px 20px; border:1px solid #dfe2f8; font-size: 1.4rem; color:#191919; background:#fff; border-radius: 15px; cursor: pointer;}
.select-box .select-txt::after {content:''; position: absolute; top:8px; right: 4px; width: 30px; height: 30px; background: url(../img/icon/icon-arrow-bottom-blue.svg) no-repeat center / 100%; transition:0.2s}
.select-box .select-txt.rotate::after {transform: rotate(-180deg);}
.option-box {z-index: 10; display: none; position:absolute; left:0; top: 100%; width: 100%; padding: 10px; border-radius: 15px; box-shadow: 0 4px 7px 2px rgba(190, 191, 201, 0.2); border: solid 1px #dfe2f8; background-color: #fff;}
.option-box.show {display: block;}
.option-box li {font-size: 1.4rem; padding: 8px 10px; margin-bottom: 4px; line-height: 30px; border-radius: 10px; cursor: pointer;}
.option-box li:hover {color:#606cdb; background:rgba(223, 226, 248, 0.5);}


/* 파일 추가 및 삭제 */
.file-button {width: 100px; height: 42px; border: 1px solid #dddddd; border-radius: 4px; overflow: hidden; position: relative;}
.file-button input[type="file"] {opacity: 0; position: absolute; width: 100%; height: 100%;}
.file-button button {border: 0; width: 100%; height: 100%; line-height: 44px; padding: 0; display: flex; align-items: baseline; justify-content: center;}
.file-button button i {font-size: 2.3rem; font-weight: 300; margin-right: 4px;}
.file-list {margin-top: 16px;}
.file-list li {display: flex; align-items: baseline; margin-bottom: 10px;}
.file-list li:last-child {margin-bottom: 0;}
.file-list li > i {width: 9px; height: 11px; margin-right: 8px; background: url(../img/icon/icon-file.svg) no-repeat center / 100%;}
.file-list li .name {font-size: 1.4rem; line-height: 1;}
.file-list li .delete-button {min-height: auto; padding: 0; border: 0;}
.file-list li .delete-button i {width: 9px; height: 9px; margin-left: 12px; background: url(../img/icon/icon-file-delete.svg) no-repeat center / 100%;}
.file-info-text {font-size: 1.4rem; color: #707070; line-height: 1; margin-top: 20px;}

/*===========================================================================
    헤더
============================================================================*/
header {z-index: 5000; border-bottom: 1px solid #dddddd; position: sticky; top: 0; left: 0; width: 100%; height: 100px; background: #fff;}
header.static {position:static;}
header .pc {display: block;}
header .mobile {display: none;}
header .container {height: 100%; display: flex; align-items: center;}
header .logo {width: 140px; margin-right: 80px;}
header .logo img {width: 100%;}
header nav {display: flex; align-self: normal; align-items: center;}
header nav a {position: relative; font-size: 1.8rem; line-height: 100px; margin-right: 64px;}
header nav a.marketplace::after {display:none !important;}
header nav a.marketplace {display: flex; align-items: center;}
header nav a.marketplace:hover::after {display:none !important;}
header nav a.marketplace i {width: 12px; height: 10px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner.svg) no-repeat center center / cover; }
header nav a.marketplace:hover i {width: 12px; height: 10px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-active.svg) no-repeat center center / cover; }
header nav a:last-child {margin-right: 0;}
header nav a.partner {display: flex; align-items: center;}
header nav a.partner:hover::after {display: none;}
header nav a.partner i {width: 12px; height: 10px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner.svg) no-repeat center center / cover; }
header nav a.partner:hover i {width: 12px; height: 10px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-active.svg) no-repeat center center / cover; }
header nav a.hover, header nav a:hover {color: var(--main-color); font-weight: 600;}
header nav a.hover::before, header nav a:hover::before {content:''; position: absolute; left: 50%; top: calc(50% + 10px); width: 100%; height: 2px; background: var(--main-color); transform: translateX(-50%);}
header nav a.hover::after, header nav a:hover::after {content:''; z-index: 10; position: absolute; left: 50%; top: calc(100% - 15px); width:22px; height: 16px; background: url('../img/icon/icon-detail-menu-arrow.svg'); transform: translateX(-50%);}
header nav a.hover-effect::before {content:''; position: absolute; left: 50%; top: calc(50% + 10px); width: 100%; height: 2px; background: var(--main-color); transform: translateX(-50%);}
header nav a.hover-effect::after {content:''; z-index: 10; position: absolute; left: 50%; top: calc(100% - 15px); width:22px; height: 16px; background: url('../img/icon/icon-detail-menu-arrow.svg'); transform: translateX(-50%);}
header .register-box {margin-left: auto; display: flex; align-items: center;}
header .register-box a {font-size: 1.4rem; color: #707070;}
header .register-box a:first-child {position: relative; margin-right: 10px; padding-right: 10px;}
header .register-box a:first-child::after {content:''; width: 1px; height: 12px; background: #707070; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
header .register-box a:last-child {width: 120px; height: 34px; line-height: 34px; color:#fff; background-color:var(--main-color); border-radius: 16px; margin-left: 30px; text-align: center;}
header .register-box a.signup {padding-right: 0; margin-right: 0;}
header .register-box a.signup::after {display: none;}
header .register-box a.logout {padding-right: 0; margin-right: 0;}
header .register-box a.logout::after {display: none;}
header .register-box a.console {display: flex; align-items: center; justify-content:center;}
header .register-box a.console i {width: 12px; height: 10px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-white.svg) no-repeat center center / cover; }

/* 서브 헤더 */

header .detail-menu {display: none !important; max-width: 1300px; width: 100%; min-height: 340px; display: flex; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 1px solid #dddddd; border-radius: 12px; background: #fff; overflow: hidden;}
header .detail-menu.show {display: flex !important;}
header .detail-menu .title-box {padding: 46px 40px 46px 60px; width: 298px; border-right: 1px solid #dddddd;}
header .detail-menu .title-box h3 {font-size: 2.4rem; margin-bottom: 24px; font-weight: bold;}
header .detail-menu .title-box p {color: #555555;}
header .detail-menu .overflow-y-box {width:calc(100% - 300px); max-height:calc(100vh - 140px); overflow-y:auto;}
header .detail-menu .nav-box {flex: 1; display: flex; flex-wrap: wrap;}
header .detail-menu .nav-box li {max-width: calc(1300px - 300px); width: 100%; padding: 40px 10px 40px 40px;}
header .detail-menu .nav-box li p {margin-bottom: 30px; font-weight: 600; line-height: 1;}
header .detail-menu .nav-box li a {margin-bottom: 20px; font-weight: 300; color: #555555; display: inline-block; flex-wrap: wrap;}
header .detail-menu .nav-box li a:not(:last-child) {margin-right: 20px;}
header .detail-menu .nav-box li a:hover {font-weight: 400; color: #111;}
header .detail-menu .nav-box li a.report i {width: 12px; height: 10px; margin-left: 2px; background: url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover; display: inline-block; vertical-align: middle;}
header .detail-menu .nav-box li a.report:hover i {width: 12px; height: 10px; margin-left: 2px; background: url(../img/icon/icon-gnb-partner.svg) no-repeat center center / cover; display: inline-block; vertical-align: middle;}
header .detail-menu .nav-box li a.guide i {width: 12px; height: 10px; margin-left: 2px; background: url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover; display: inline-block; vertical-align: middle;}
header .detail-menu .nav-box li a.guide:hover i {width: 12px; height: 10px; margin-left: 2px; background: url(../img/icon/icon-gnb-partner.svg) no-repeat center center / cover; display: inline-block; vertical-align: middle;}

header .detail-menu.service .nav-box li {width: 245px; max-width: auto; padding: 40px 10px 40px 40px; border-right: 1px solid #dddddd; display: block;}
header .detail-menu.service .nav-box li:nth-child(4), header .detail-menu.service .nav-box li:nth-child(8) {border-right:0;}
header .detail-menu.service .nav-box li a {display: block;}

header .detail-menu.market-detail-menu {display:none !important;}

@media (max-width:1300px) {
    header .pc {display: none;}
    header .mobile {display: block; height: 100%;}
    header {height: 60px; padding: 16px 0;}
    header .container {justify-content: space-between;}
    header .logo {width: 120px; margin-right: 0;}
    header .logo img {}
    header .register-box {}
    header .register-box button {padding: 0; border: 0; border-radius: 0;}
    header .register-box button:last-child {margin:2px 0 0 20px;}
    header .register-box button img {width: 20px;}
    header .mobile-menu {z-index: 5200; background: #fff; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; transform: translateX(140%); transition: 0.2s;}
    header .mobile-menu.active {transform: translateX(0);}
    header .mobile-menu .top {height: 60px; padding: 0 22px 0 30px; border-bottom: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: space-between;}
    header .mobile-menu .top .register-box {margin: initial;}
    header .mobile-menu .top .register-box a {font-size: 1.5rem; color: #999;}
    header .mobile-menu .top .register-box a:first-child::after {background: #999;}
    header .mobile-menu .top .register-box a:last-child {width: auto; height: auto; background: initial; border-radius: 0; margin: 0;}
    header .mobile-menu .top .close-button {min-height: auto; width: 18px; border: 0; padding: 0;}
    header .mobile-menu .service-menu-group .sub-menu {display: none; padding-top: 0;}
    header .mobile-menu .service-menu-group.show .sub-menu {display: block;}
    header .mobile-menu nav {padding: 0 22px 0 30px; height: calc(100vh - 80px); overflow-y: auto; display: block;}
    header .mobile-menu nav ul {}
    header .mobile-menu nav a {position: static; line-height: 1;}
    header .mobile-menu nav a::before, header .mobile-menu nav a::after {display: none;}
    header .mobile-menu nav ul > li > a, header .mobile-menu nav ul > li > p {font-size: 1.6rem; border-bottom: 1px solid #e6e6e6; font-weight: 500; min-height: 60px; line-height: 1; display: flex; align-items: center; cursor: pointer;}
    header .mobile-menu nav p i {margin-left: auto; width: 30px; height: 30px; line-height: 30px; text-align: center; justify-content: flex-end;}
    header .mobile-menu nav p i::after {content:'+'; font-size: 30px; font-weight: 200; font-style: normal;}
    header .mobile-menu nav p.is-open i::after {content:'-'; font-size: 44px; font-weight: 100; font-style: normal;}
    header .mobile-menu nav ul > li .sub-menu {display: none; padding-top: 20px;}
    header .mobile-menu nav ul > li .sub-menu.show {display: block;}
    header .mobile-menu nav ul > li .sub-menu p {height: 54px; font-size: 1.5rem; margin-left:10px; display: flex; align-items: center; cursor: pointer;}
    header .mobile-menu nav ul > li .sub-menu a {font-size: 1.6rem; margin:0 0 20px 10px; font-weight: 400; color: #777777; line-height: 1;}
    header .mobile-menu nav ul > li .sub-menu a:hover {color: #333; font-weight: 500;}
    header .mobile-menu nav ul > li .sub-menu a.active {color: var(--main-color); font-weight: 500;}
    header .mobile-menu nav ul > li .sub-menu .list-box {display: none;}
    header .mobile-menu nav ul > li .sub-menu .list-box.show {display: block;}
    header .mobile-menu nav ul > li .sub-menu a.partner i {background:url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover;}
    header .mobile-menu nav ul > li .sub-menu a.partner:hover i {background:url(../img/icon/icon-gnb-partner.svg) no-repeat center center / cover;}
    header .mobile-menu nav ul > li .sub-menu a.marketplace i {background:url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover;}
    header .mobile-menu nav ul > li .sub-menu a.marketplace:hover i {background:url(../img/icon/icon-gnb-partner.svg) no-repeat center center / cover;}
}

@media (max-width:800px) {
    header nav a.partner i {background:url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover; margin-top:-1px; margin-left:6px;}
}



/*===========================================================================
    푸터
============================================================================*/
footer {background: #222222;}
footer > .container {padding: 80px 20px 20px;}
footer .top {display: flex;}
footer .top .sns-box {display: flex; margin-right: 90px;}
footer .top .sns-box a {position: relative; width: 60px; height: 60px; background: #151517; border-radius: 50%;}
footer .top .sns-box a.youtube {margin-right: 10px; background: url(../img/icon/icon-footer-youtube.svg) no-repeat center center / cover;}
footer .top .sns-box a.instagram {background: url(../img/icon/icon-footer-instagram.svg) no-repeat center center / cover;}
footer .top .sns-box a.blog {margin-left: 10px;background: #151517 url(../img/icon/icon-footer-blog.svg) no-repeat center center / cover;}
footer .top	.sns-box a {
		    position: relative;
		    display: inline-block;
		}

footer .top	.sns-box a::after {
		    content: attr(data-tooltip);
		    position: absolute;
		    bottom: 100%; /* 툴팁을 링크 위에 표시 */
		    left: 50%;
		    transform: translateX(-50%);
		    background-color: #192733;
		    color: white;
		    padding: 10px 15px 10px 15px;
		    border-radius: 4px;
		    font-size: 12px;
		    white-space: nowrap;
		    opacity: 0;
		    visibility: hidden;
		    transition: opacity 0.2s;
		    pointer-events: none;
		    z-index: 1;
		}

footer .top .sns-box a:hover::after {
		    opacity: 1;
		    visibility: visible;
		}
footer .top .fnb ul {display: flex;}
footer .top .fnb li {width: 150px;}
footer .top nav li p {font-size: 1.8rem; margin-bottom: 34px; line-height: 1; font-weight: bold; color: #dddddd;}
footer .top .fnb li a {font-size: 1.4rem; color: #999999; margin-bottom: 16px;}
footer .top .fnb li a:last-child {margin-bottom: 0;}
footer .top .fnb a.partner {display: flex; align-items: center;}
footer .top .fnb a.partner i {width: 8px; height: 8px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover; }
footer .top .fnb a.marketplace {display: flex; align-items: center; }
footer .top .fnb a.marketplace i {width: 8px; height: 8px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover; }
footer .top .fnb a.guide {display: flex; align-items: center; }
footer .top .fnb a.guide i {width: 8px; height: 8px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover; }
footer .bottom {margin-top: 60px; display: flex; justify-content: space-between;}
footer .bottom .left {display: flex; align-items: flex-end;}
footer .bottom .right {z-index:3000; position:fixed; right:40px; bottom:40px;}
footer .bottom .right.static {position:static;}
footer .bottom .right button {width: 60px; height: 60px; background: #333333; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 0; flex-direction: column; padding: 0;}
footer .bottom .right button img {width: auto;}
footer .bottom .right button.top-button {color: #fff; margin-bottom: 10px;}
footer .bottom .right button.top-button img {width:12px; margin-bottom: 6px;}
footer .bottom .right button.home-button {}
footer .bottom .logo {width: 140px; margin-right: 34px;}
footer .bottom .footer-policy {display: flex; align-items: center;}
footer .bottom .footer-policy a {position: relative; margin-right: 15px; font-size: 1.4rem; padding-right: 15px; color: #999999; white-space: nowrap;}
footer .bottom .footer-policy a::after {content:''; width: 1px; height: 12px; background: #999999; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
footer .bottom .footer-policy a:last-child::after {display: none;}
footer .bottom .footer-policy a.policy {display: flex; align-items: center; font-weight: bold; color: #ffffff !important; }
footer .bottom .footer-policy a.policy:link,
footer .bottom .footer-policy a.policy:visited,
footer .bottom .footer-policy a.policy:hover,
footer .bottom .footer-policy a.policy:active,
footer .bottom .footer-policy a.policy:focus {color: #ffffff !important; }
footer .bottom .footer-policy a.policy i {width: 8px; height: 8px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover; filter: brightness(0) invert(1) !important; }
footer .bottom .footer-policy a.deny-email {display: flex; align-items: center; }
footer .bottom .footer-policy a.deny-email i {width: 8px; height: 8px; margin-left: 4px; background: url(../img/icon/icon-gnb-partner-gray.svg) no-repeat center center / cover; }
footer .copyright {padding: 30px 0; background:#111111;}
footer .copyright .container {display: flex; align-items: center; justify-content: space-between;}
footer .copyright p {font-size: 1.4rem; color:#777777;}

@media (max-width:1300px) {
    footer > .container {padding: 36px 20px 0;}
    footer .top {display: block;}
    footer .top .sns-box {margin-right: 0; margin-bottom: 24px;}
    footer .top .sns-box a {width: 40px; height: 40px;}
    footer .top .fnb ul {display: block; border-bottom: 1px solid #555555; }
    footer .top .fnb ul li {width: 100%; border-top: 1px solid #555555;}
    footer .top .fnb ul li p {height: 56px; line-height: 56px; font-size: 1.6rem; padding: 0 10px; margin-bottom: 0; display: flex; font-weight: 500; align-items: center; cursor: pointer;}
    footer .top .fnb ul li p i {margin-left: auto; width: 30px; height: 30px; line-height: 30px; text-align: center;}
    footer .top .fnb ul li p i::after {content:'+'; font-size: 30px; font-weight: 200; font-style: normal; color: #fff;}
    footer .top .fnb ul li p.is-open i::after {content:'-'; font-size: 44px; font-weight: 100; font-style: normal;}
    footer .top .fnb ul li .list-box {display: none; padding: 20px 10px; border-top: 1px solid #555555; border-bottom: 1px solid #555555;}
    footer .top .fnb ul li .list-box.show {display: block;}
    footer .bottom {margin-top: 40px;}
    footer .bottom .left {flex-direction: column; align-items: normal; justify-content: flex-end;}
    footer .bottom .logo {width: 120px; margin:0 0 20px;}
    footer .bottom .footer-policy {flex-wrap: wrap;}
    footer .bottom .footer-policy a {line-height: 1.5; margin-right: 14px; padding-right: 0;}
    footer .bottom .footer-policy a::after {display: none;}
    footer .copyright {padding: 4px 0 40px; background: #222;}
    footer .copyright .container {display: block;}
    footer .copyright .container p:first-child {margin-bottom: 4px;}

}


@media (max-width:800px) {
	footer .bottom .right {right:20px;}
	footer .bottom .right button {width:52px; height:52px;}
	footer .bottom .right button.top-button img {display:none; width:14px;}
}
/*===========================================================================
    Swiper
============================================================================*/
.swiper .swiper-pagination { top: initial; bottom: 74px;}
.swiper .swiper-pagination .swiper-pagination-bullet {width: 60px; height: 5px; margin-right: 14px; background: rgba(255, 255, 255, 0.35); border-radius: 0;}
.swiper .swiper-pagination .swiper-pagination-bullet:last-child {margin-right: 0;}
.swiper .swiper-pagination .swiper-pagination-bullet-active {background: #fff;}

.swiper-button-prev {color: #999; line-height:0; text-indent:-9999px; font-size:0;}
.swiper-button-prev::after {content:''; width:6px; height:10px; background: url('../img/icon/icon-main-prev.svg') no-repeat center center / cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.swiper-button-next {line-height:0; text-indent:-9999px; font-size:0;}
.swiper-button-next::after {content:''; width:6px; height:10px; background: url('../img/icon/icon-main-next.svg') no-repeat center center / cover; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

@media (max-width:1300px) {
    .swiper .swiper-pagination {bottom: 40px;}
}

@media (max-width:800px) {
    .swiper .swiper-pagination {bottom: 30px;}
    .swiper .swiper-pagination .swiper-pagination-bullet {width:46px;}
}


/* 텍스트 */
.critical {color: #e42e2f;}

/* 버튼 */
.main-button {background: var(--main-color); border: 1px solid var(--main-color); color: #fff;}
.main-button i {width: 12px; height: 10px; margin-left: 2px; background: url(../img/icon/icon-gnb-partner-white.svg) no-repeat center center / cover; display: inline-block; vertical-align: middle;}
/* .main-button:hover {color: var(--main-color); border: 1px solid var(--main-color);} */
.main-outline-button {color: var(--main-color); border: 1px solid var(--main-color);}
/* .main-outline-button:hover {background: var(--main-color); border: 1px solid var(--main-color); color: #fff;} */

/* 그룹(버튼, 샐랙트) */
.button-group {display: flex; align-items: center;}
.button-group.left {justify-content: start;}
.button-group.right {justify-content: end;}
.button-group.center {justify-content: center; gap: 20px;}
.button-group button,
.button-group a.main-button,
.button-group a.main-outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    width: 80px;
    height: 35px;
    line-height: 35px;
    margin-right: 8px;
    border: 1px solid #dddddd;
    font-size: 1.4rem;
    border-radius: 28px;
}
.button-group button:last-child,
.button-group a.main-button:last-child,
.button-group a.main-outline-button:last-child {margin-right: 0;}
/* .button-group .main-button {color: fff; background: var(--main-color); border: 1px solid var(--main-color);} */
.button-group .main-outline-button {color: var(--main-color); border: 1px solid var(--main-color);}
.button-group .main-outline-button i{width: 12px; height: 10px; margin-left: 2px; background: url(../img/icon/icon-gnb-partner-white.svg) no-repeat center center / cover; display: inline-block; vertical-align: middle; filter: invert(60%) sepia(600%) saturate(1000%) hue-rotate(200deg);}
.button-group .stop-button {background: #dddddd; border: 0;}
/* .button-group .delete-button {background: ;} */

.select-group {display: flex; align-items: center;}
.select-group select {width: 100%; flex: 1;}
.select-group select:not(:last-child) {margin-right: 8px;}


/* 탭 기능 */
.nav-tabs {display: flex; margin-bottom: 50px;}
.tab-group {display: flex; margin-bottom: 50px;}
.tab-btn {width: 120px; padding: 10px 10px 20px; color: #777777; border: none; font-size: 1.6rem; border-bottom: 2px solid #eeeeee; transition: border-bottom-color 0.3s ease; font-weight: 500; border-radius: 0; text-align: center; cursor: pointer;}
.tab-btn.active {border-bottom-color: #007bff; font-weight: bold; color: #333333;}
.tab-content {display: none;}
.tab-content.active {display: block; }

.main-color {color: var(--main-color) !important;}



/*===========================================================================
    모달
============================================================================*/
.modal {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 10000;}

.modal-content {background-color: #fff; padding: 30px 30px 35px; max-width: 600px; min-width:460px; border-radius: 10px; overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow:0 3px 14px rgba(20,20,20,.02);}
.modal-content .modal-head {padding-bottom: 10px; border-bottom: 1px solid #222; display: flex; align-items: center;}
.modal-content .modal-head h3 {font-size: 2.4rem; font-weight: bold;}
.modal-content .modal-head .close-button {margin-left: auto; cursor: pointer; border: 0; padding: 0;}
.modal-content .modal-head .close-button i {width: 18px; height: 18px; background: url(../img/icon/icon-modal-close.svg) no-repeat center center / 100%;}
.modal-content .modal-body {padding: 20px 0 0;}
.modal-content .modal-body .textarea {padding: 14px; line-height: 1.5; font-weight: 400; border:1px solid #dadada; background: #f6f7f8;}
.modal-content .modal-body .textarea em a {color: var(--main-color);}
.modal-content .button-group {margin-top: 30px;}
.modal-content .button-group button {width: 140px; height: 40px; font-size: 1.6rem;}


@media (max-width:800px) {
    .modal-content .modal-head h3 {font-size:1.8rem;}
    .modal-content {width: 90%; min-width: initial;}
    .modal-content .modal-body .textarea {max-height: 400px; overflow-y: auto;}
}



/*===========================================================================
    페이지네이션
============================================================================*/
.pagination {display: flex; align-items: center; justify-content: center; margin-top: 50px;}
.pagination a {width: 20px; height:20px; text-align:center; line-height:20px; font-size: 1.8rem; margin-right: 20px; color: #aaaaaa;}
.pagination a.active {font-weight: bold; color: #111111;}
.pagination a:hover {font-weight: bold; color: #111111;}
.pagination a.pagination-prev {color: #999;}
.pagination a.pagination-prev i {margin-right: 10px; background-image: url('../img/icon/icon-pagination-prev.svg');}
.pagination a.pagination-next {}
.pagination a.pagination-next i {margin-left: 10px; background-image: url('../img/icon/icon-pagination-next.svg');}
.pagination a[class^="pagination-"] {display: flex; align-items: center;}
.pagination a[class^="pagination-"] i {width: 6px; height: 11px; background-repeat: no-repeat; background-position: center center; background-size: 100%;}


.pagination .paginate_button.active a {font-weight: bold; color: #111111;}
.pagination li:nth-last-child(2) a {margin-right:0;}
.pagination a.pagination-prev {color: #999;}
.pagination .paginate_button.previous a {margin-right: 10px; background: url('../img/icon/icon-pagination-prev.svg') no-repeat center center; font-size:0;}
.pagination a.pagination-next {}
.pagination .paginate_button.next a {margin-left: 10px; margin-right:0; background: url('../img/icon/icon-pagination-next.svg') no-repeat center center; font-size:0;}
.pagination a[class^="pagination-"] {display: flex; align-items: center;}
.pagination a[class^="pagination-"] i {width: 6px; height: 11px; background-repeat: no-repeat; background-position: center center; background-size: 100%;}


@media (max-width:800px) {
    .pagination a {width: 14px; font-size: 1.6rem; margin-right: 14px;}
}
/*===========================================================================
	에러페이지
============================================================================*/
.error404-wrap { height: calc(100vh - 60px); background:#f1f1f1; }
.error404-wrap .container { display: flex; justify-content: center; align-items: center; height: 100%; text-align: center; }
.error404-wrap .txt-box h2 { font-size: 100px; margin-bottom: 20px; }
.error404-wrap .txt-box h3 { font-size:32px; margin-bottom: 20px; }
.error404-wrap .txt-box h4 { font-size:24px; color:#999; margin-bottom: 40px; }
.error404-wrap .txt-box a { display: inline-block; width: auto; width: 240px; height: 56px; line-height: 56px; font-size:22px; background:#00125E; color: #fff;; border-radius: 40px; }


/*===========================================================================
    반응형
============================================================================*/
@media (max-width:1200px){


}


@media (max-width:800px){

}

@media (max-width:500px) {

}





/* 추가 */
i.industry-public-cloud {background: url('../img/solution/icon/icon-a-industry-public-cloud.svg');}
i.public-universal-cloud {background: url('../img/solution/icon/icon-a-public-universal-cloud.svg');}
i.cloud-enabled-management {background: url('../img/solution/icon/icon-a-cloud-enabled-management.svg');}
i.build-private-cloud {background: url('../img/solution/icon/icon-a-build-private-cloud.svg');}

i.kata {background: url('../img/solution/icon/icon-a-energy-ict-platform.svg');}
i.kgrid-mg {background: url('../img/solution/icon/icon-a-kgrid-mg.svg');}
i.evc {background: url('../img/solution/icon/icon-a-evc.svg');}

i.ai-maritime-service {background: url('../img/solution/icon/icon-a-ai-maritime-service.svg');}
i.apc {background: url('../img/solution/icon/icon-a-apc.svg');}
i.k-ciren {background: url('../img/solution/icon/icon-solution10-character01.svg');}

i.k-erp {background: url('../img/solution/icon/icon-a-k-erp.svg');}
i.kdn-vpp {background: url('../img/solution/icon/icon-a-industry-public-cloud.svg');}

i.vpp {background: url('../img/solution/icon/icon-a-vpp.svg');}
i.mycontents {background: url('../img/solution/icon/icon-a-mycontents.svg');}
i.escape-route {background: url('../img/solution/icon/icon-a-escape-route.svg');}