@charset "utf-8";
/*************************************************************************
작성자 : 김은정
작성일 : 2024년 10월11일
2024 클라우드지원센터 콘텐츠
*************************************************************************/

/* 서브 페이지 공통 상단 */
.cpcp { font-size:16px; color: #333; margin-bottom: 100px; position: relative}
.cpcp .container {position:relative; width:100%; padding: 0; font-size:1rem;}
.cpcp .content { width: 1020px; margin: 30px auto 0; }
.cpcp .intro { font-size: 16px;  }
.cpcp .intro li { font-size: 16px; margin-bottom: 10px; line-height: 1.5em; letter-spacing: 0;}
.cpcp .intro li:last-child { margin-bottom: 0 }
.cpcp .title { font-size: 20px; font-weight: 600;padding-bottom: 20px;padding-top: 40px; color: #333;}
.cpcp .list li { font-size: 16px; margin-bottom: 10px; line-height: 1.5em; letter-spacing: 0; }
.cpcp .list li:last-child { margin-bottom: 0 }
/* 센터 소개 */
.cpcp .logo { display: inline-block; width: 289px; height: 44px; background-image: url(../images/logo-color.png); background-repeat: no-repeat; background-size: contain; margin-bottom: 13px;}
.cpcp .slogan { height: 106px; font-size: 24px; color: #fff; background-image: url("../images/img_main-bg.png"); text-align: center; padding: 40px; line-height: 24px; font-weight: 300; margin-bottom: 20px; letter-spacing: 0;}
.cpcp .slogan p {font-size: 24px; }
.cpcp .slogan strong { font-size: 24px; font-weight: 500;}
.cpcp .contact { display: flex; justify-content: center; margin-bottom: 30px;}
.cpcp .contact dd { padding: 0 20px; position: relative; }
.cpcp .contact dd:before { position: absolute; left: 0; top: 4px; display: inline-block; content:''; width: 16px; height: 16px; background-size: auto; background-repeat: no-repeat;}
.cpcp .contact dd.tel {margin: 0;}
.cpcp .contact dd.tel:before { background-image: url("../images/ic_tel.png");}
.cpcp .contact dd.email:before { background-image: url("../images/ic_email.png");}
.cpcp .contact span { font-size: 16px; letter-spacing: 0; font-weight: 500;}
.cpcp .contact em { font-size: 14px; letter-spacing: 0}
.cpcp .list.style_bullet li { padding-left: 25px; position: relative; margin-bottom: 5px; }
.cpcp .list.style_bullet li:before {content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: #333333; position: absolute; left: 10px; top: 10px; }
.cpcp .list.style_image { display: flex; justify-content: center; height: 292px;  }
.cpcp .list.style_image li { border: solid 1px #ECECEC; width: 100%; display: flex; align-items: center; justify-content: space-around; margin-bottom: 0; padding-bottom: 20px;}
.cpcp .list.style_image li:nth-child(2){ border-width: 1px 0 }
.cpcp .list.style_image li:nth-child(3) img { width: 66px;}
.btn_wrap { margin-top: 20px; overflow: hidden}
.btn_download {  position: relative;  display: inline-block;   color: #333;  border: 1px solid #ECECEC;  font-size: 1rem; text-align: left; padding-left: 20px; line-height: 38px; width: 170px; height: 40px; box-sizing: border-box; overflow: hidden; color: #1B1B1B}
.btn_download i { position: absolute;  right: 0; width: 40px; height: 40px; background:#125FA8 url(../images/icon_download.png) no-repeat center; background-size: 90%;
background-color: #125FA8; background-image: url(../images/icon_download.png) ; background-size:auto; background-position-y: 10px }
.btn_wrap .btn_download { float: right; }
/* 서비스 맵 */
.tab-container { display: flex; flex-direction: column; }
.tabs{ display: flex; justify-content: space-between; margin-bottom: 30px; flex-wrap: wrap; gap: 8px; }
.tab_btn { width: 24.4%; padding: 8px; background-color:rgba(18, 95, 168, 8%); font-size: 16px; color: #515151; }
.tab_btn:last-child { margin-right: 0;}
.tab_btn[aria-selected="true"] { background-color: #125FA8; color: #fff; }
.tab-panel:focus { box-shadow: none;}
.tab-panel .intro { margin-bottom: 30px;}
.tab-panel[hidden] { display: none;}
.panel { display: flex; flex-direction: column; margin-bottom: 10px;}
.panel .panel-heading { color: #fff; background: #054d92; padding: 6px 15px; }
.panel .panel-body { background: #fff; padding: 25px 30px;  border: 1px solid #ddd; display: inline-block; }
.panel .panel-heading .panel-title {  display: inline;  font-size: 15px; letter-spacing: 0; font-weight: 600 }
.panel .panel-heading .cont{ letter-spacing: 0; font-size: 15px; font-weight: 300; }
.panel .depops_detail{ }
.panel .panel-body .tit{ white-space: nowrap; font-weight:700; font-size: 16px; letter-spacing: -1px; line-height: 16px }
.panel .panel-body .cont{ font-size: 15px; letter-spacing: 0; font-size: 16px; letter-spacing: -1px; line-height: 16px}
.csp_links { display: flex; margin-top: 9px;flex-wrap: wrap; gap: 30px; }
.csp_info {position:absolute;width:100%;bottom:0px;}
.csp_btn {border:1px solid #d6d6d6;border-radius:5px;height:35px;padding-top:9px;padding-left:95px;vertical-align:middle;}
.csp_btn2 {border:1px solid #d6d6d6;border-radius:5px;height:35px;padding-top:9px;padding-left:95px;vertical-align:middle;}
.csp_btn2::after{content: url('../img/servicemap/csap.png');display:inline-block;vertical-align:middle;}
.csp_btn3 { font-size: 13px; line-height: 13px; color: #333; padding-top:14px; padding-bottom: 5px; vertical-align:middle;background-size: auto 12px; background-repeat: no-repeat; background-position: 0 0; }
.csp_list {  display:block; }
.csp_list li{float:left;width:100%;margin-bottom:15px; }
.csp_list li:last-child{margin-bottom: 0;}
.csp_list .naver{background-image: url('../images/servicemap/navercloud30.png'); min-width: 72px; }
.csp_list .kt{background-image: url('../images/servicemap/kt_cloud_gov.png'); min-width: 74px; }
.csp_list .nhn{background-image: url('../images/servicemap/logo_nhn_cloud_color_gov.svg');  background-size: auto 11px; min-width: 120px;}
.csp_list .koreav{background-image: url('../images/servicemap/koreav.png'); }
.csp_list .gabia{background-image: url('../images/servicemap/gabia.png'); background-size: auto 13px; min-width: 36px;}
.csp_list .dooray{background-image: url('../images/servicemap/dooray.svg'); min-width: 50px;}
.csp_list .cloudv{background-image: url('../images/servicemap/koreav.png'); min-width: 48px; }

.panel.panel_marketplace  { background-color: #F6F6F6; margin-top: 60px; padding: 30px; }
.panel.panel_marketplace .panel-heading { color: #333; background-color: transparent; padding: 0; margin-bottom: 30px; }
.panel.panel_marketplace .panel-heading .panel-title{ display: block; font-size: 16px; line-height: 16px; font-weight: 700; margin-bottom: 10px; padding-left: 24px; background-image: url("../../../new_cloud/cpcp/images/servicemap/icon_location-home.png"); background-repeat: no-repeat; background-position: 0 0; }
.panel.panel_marketplace .panel-heading .cont{ font-size: 16px; font-weight: 400;}
.panel.panel_marketplace .panel-body { padding: 0;  background-color: transparent; border: none;}
.panel.panel_marketplace .csp_list { display: flex; gap: 10px;}
.panel.panel_marketplace .csp_list li {background: #fff; border: 1px solid #ddd; display: inline-block; margin: 0;}
.panel.panel_marketplace .csp_links { margin: 0;  text-align: right}
.panel.panel_marketplace .csp_links .csp_btn3 { font-size: 16px; width: 100%; background-size: auto 18px; padding: 12px 16px; line-height: 18px; background-position: 16px 13px; }
.cpcp .btn_top {  position: fixed; display: inline-block; background-color: #f5f5f5; width: 44px; height: 44px; bottom: 40px; left: calc(50% + 650px); background-image: url("../../cpcp/images/servicemap/ic_top.png"); background-repeat: no-repeat; background-position: center; border-radius: 50%; z-index: 10; display: none; }
.btn_top:hover { background-color:rgba(18, 95, 168, 25%);}
.btn_top:focus {box-shadow : none;}
 /* 클라우드 플랫폼 생태계 조성 */
 .passta .ftrs{display: flex;position: relative;}
 .passta .ftrs::before{background: url("../images/bg_ftrs_kpaas.png") no-repeat;content: "";display: block;width: 174px; height: 110px;position: absolute;top: 34%;left: 50%; margin-left: -90px;background-size: contain;   background-position: center;}
 .passta .ftrs div{width:50%;padding:0 0 25px;}
 .passta .ftrs1{background:url(../images/bg_ftrs01.png) no-repeat top right;}
 .passta .ftrs2{background: url(../images/bg_ftrs02.png) no-repeat top left;}
 .passta .ftrs div ul{display: flex; flex-direction: column; gap: 90px; }
 .passta .ftrs div ul li span { font-size: 18px;font-weight: 500; display: inline-block}
 .passta .ftrs div ul li p {font-size: 16px; color: #666; line-height: 1.3em;padding-top: 5px; }

 .passta .ftrs1 li{text-align: right; padding-right: 32%;}
 .passta .ftrs1 li:nth-of-type(2){padding-right: 56%; margin-top: -25px;}
 .passta .ftrs1 li:nth-of-type(3){padding-right: 56%; margin-top: -26px; }
 .passta .ftrs1 li:nth-of-type(4){padding-right: 35%; margin-top: -32px; }

 .passta .ftrs2 li{padding-left: 34%;}
 .passta .ftrs2 li:nth-of-type(2){padding-left: 58%;margin-top: -48px;}
 .passta .ftrs2 li:nth-of-type(3){padding-left: 58%; margin-top: -24px;}
 .passta .ftrs2 li:nth-of-type(4){padding-left: 37%; margin-top: -34px;}

 .passta .benefit{}
 .passta .benefit ul{display: flex; text-align: center;justify-content: center;gap:5px;}
 .passta .benefit ul li{background: #f6f6f6 ; flex-basis: 220px;border-radius: 20px; padding-bottom: 20px}
 .passta .benefit ul li dl{position: relative; padding: 10px 20px;}
 .passta .benefit ul li dl dt{font-weight: 600; color: #333;margin-top:120px; padding-bottom: 20px;padding: 0 15px 20px;line-height: 1.5rem;font-size: 18px;}
 .passta .benefit ul li dl dd{line-height: 1.5rem;font-size: 16px; text-align: initial; word-break: break-word; color: #666;}
 .passta .benefit ul li dl::before{position: absolute;top: 40px; left:40%;content: "";width: 51px;height: 51px;display: inline-block;}
 .passta .benefit ul li:nth-of-type(1) dl::before{background: url(../images/icon_benefit01.png);}
 .passta .benefit ul li:nth-of-type(2) dl::before{background: url(../images/icon_benefit02.png);}
 .passta .benefit ul li:nth-of-type(3) dl::before{background: url(../images/icon_benefit03.png);}
 .passta .benefit ul li:nth-of-type(4) dl::before{background: url(../images/icon_benefit04.png);}
 .passta .benefit ul li:nth-of-type(5) dl::before{background: url(../images/icon_benefit05.png);}

/* 공통 */
.pl10 {padding-left:10px !important;}
.pd20 {padding:10px !important;}
.requ:before { content: '* ';  color: #ff0000 } /* 강조 및 필수 입력표시 */
.list_normal li { position: relative; line-height: 1.5rem; margin-bottom: 8px;} /* 디지털서비스 이용확산지원 */
.content-box .sub_title { font-size: 1.625rem;  display: inline-block; margin-bottom: 30px;color: #000; letter-spacing: -1px; font-weight: 500; }
/* public_SaaS : 공공 SaaS 개발·검증 */
.diagram_box { margin-top: 70px;}
.dia-list{ background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; position: relative; overflow: hidden; }
.dia-list li{width:50%; height: 50%; padding-top: 50px;overflow: hidden;}
.dia-list li:nth-of-type(2n-1){float: left;text-align: right;padding-right:20% ;padding-left:6%}
.dia-list li:nth-of-type(2n){float: right;padding-left: 20%;padding-right:5%}
.dia-list li dl{position: relative;} 
.dia-list li dl dt{font-weight: 500;margin-bottom: 10px;font-size: 1.125rem;}
.dia-list li dt::before{content: ""; display: block;width: 60px;height: 25px;position: absolute;top: 10px;border-top: 1px solid #c7c7c7; z-index: -1}
.dia-list li:nth-of-type(2n-1) dt:before{right: -85px ;transform: skewX(40deg);border-right: 1px solid #c7c7c7;}
.dia-list li:nth-of-type(2n) dt:before{left: -85px;transform: skewX(-40deg);border-left: 1px solid #c7c7c7;}
.dia-list li dt::after {content: '';display: block;width: 5px;height: 5px;background: #c7c7c7;position: absolute;top: 8px; border-radius: 50%}
.dia-list li:nth-of-type(2n-1) dt::after{right: -15px;}
.dia-list li:nth-of-type(2n) dt::after{left: -15px;}
.dia-list li dl dd{line-height: 1.3em;color: #666;min-height: 85px; font-size: 16px;}
/* 공공 saas 개발검증 */
.type_div4 .dia-list{ background-image: url("../images/bg_public_saas.png"); height: 317px}
 /* 디지털서비스 이용확산지원 */
.type_div3 .dia-list { background-image: url("../images/bg_digitalsupport.png"); background-position-y: 100px; padding-top: 100px; height: 400px; }
.type_div3 .dia-list li { position: absolute; }
.type_div3 .dia-list li:nth-of-type(1) { width: 100%; text-align: center; position: absolute; top: 0; padding: 0;}
.type_div3 .dia-list li:nth-of-type(1) dt::before { right: calc(50% + 2px); top: 70px; width: 1px; height: 30px; transform: skewX(0deg)}
.type_div3 .dia-list li:nth-of-type(1) dt::after { right: 50%; top: 70px}
.type_div3 .dia-list li:nth-of-type(1) dd {margin-bottom: 20px;}
.type_div3 .dia-list li:nth-of-type(2) { right: 0; bottom: -52px; }
.type_div3 .dia-list li:nth-of-type(3) {  left: 0; bottom: -52px; }
/* K-PaaS */
.passta .ftrs::before {background-size: 86% 100%; top: 160px}