@import url("font.css");

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;line-height:150%;letter-spacing:normal} /* delete vertical-align,font:inherit; */

body,html {width:100%; height:100%; font-size:14px; color:#666; line-height:150%; word-break:break-all; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
* {font-family: Roboto,'Noto Sans KR', sans-serif; font-weight:400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
ol,ul,li {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table caption {overflow:hidden; font-size:0; line-height:0; font-size:13px;}
dt{display:block;}
hr{display:none;}
a{cursor:pointer;text-decoration:none;color:#666;}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
.input_search {border:0; background-color:#fff; height:23px; width:165px; font-size:12px; padding-left:5px; color:#888; }
img{max-width:100%}
* {word-break:keep-all;}

#menu a { transition: all 0.3s ease-out;}

/* 반응형 이미지 및 컨테이너 */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

.image-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* hero-section 관련 스타일 */
.hero-section {
    padding: 2rem 1rem;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-text h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.award-image {
    text-align: center;
    width: 100%;
}

.award-image img {
    max-width: 250px;
    height: auto;
}

/* stats-section 관련 스타일 */
.stats-section {
    padding: 2rem 1rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card {
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.stat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* award-section 관련 스타일 */
.award-section {
    padding: 2rem 1rem;
}

.award-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.award-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    justify-items: center;
}

.award-logos img {
    max-width: 100%;
    height: auto;
}

/* partner-logos 스타일 */
.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.partner-logos img {
    height: 30px;
    object-fit: contain;
}

/* cloud-logos 스타일 */
.cloud-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.cloud-logos img {
    height: 40px;
    object-fit: contain;
}

/* content-section 스타일 */
.content-section {
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* 레이아웃 */
#wrap {position:relative; width:100%; min-width:1100px; height:100%;}


/* 헤드 */
#header {
    position:relative; 
    width:100%; 
    background:#fff; 
    border-bottom:0px solid #ddd; 
    z-index:999; 
}

#header .top_right {float:right;margin-right:2%;overflow:hidden;}
#header h1 {float:left; position:static; margin-top:15px;width:20%;}
#header h1 img {padding:10px 5px 15px;}
#header p.link_list {float:right;overflow:hidden; padding-top:15px;}
#header p.link_list a:link {display:block;background:url(../imgs/common/dot_gray.gif) no-repeat left 13px; font-size:12px;font-weight:600; color:#444;padding:5px 20px 0px 7px}
#header p.link_list a:hover {color:#00aeef;background:url(../imgs/common/dot_sblue.gif) no-repeat left 13px; }



.header_mobile {display:none;}


/* TOP 메뉴 */
#menu {position:absolute; width:100%; top:0px;  z-index:1000;}

.topmenu {min-width:1180px; width:100%; position:absolute; top:0; left:0; z-index:100; z-index:99999; border-bottom:1px solid #ddd; background:rgba(255,255,255,0.9); background:rgba(255,255,255,0.7) url('../imgs/main/topmenu_bg.png') repeat center top;box-shadow:3px 3px 20px rgba(0,0,0,0.3);overflow:hidden;}
.topmenu .gnbWrap {position:absolute; top:3px; z-index:100; margin:0 auto; position: relative; width:1300px; z-index:100;} 
.topmenu .gnbWrap .gnb {width:1100px; z-index:100; margin:0 auto; }
.topmenu .gnbWrap .gnb .D01 {height:90px; line-height:80px; font-size:19px; color:#333;font-weight:600; letter-spacing:-0.4pt; font-family:Noto Sans KR, sans-serif;}
.topmenu .gnbWrap .gnb ul { width:57%;margin-left:30%;}
.topmenu .gnbWrap .gnb ul li {float:left; text-align:left; position:relative;border:0px solid red;} /* position:relative;*/
.topmenu .gnbWrap .gnb ul li.m01 {width:25%;} 
.topmenu .gnbWrap .gnb ul li.m02 {width:25%;}  
.topmenu .gnbWrap .gnb ul li.m03 {width:25%;} 
.topmenu .gnbWrap .gnb ul li.m04 {width:25%;} 
.topmenu .gnbWrap .gnb ul li a.D01 {display:block; position:relative; }
.topmenu .gnbWrap .gnb ul li.on a.D01 {color:#0068b7;}
.topmenu .gnbWrap .gnb ul li.on a.D01 span{background:url(/imgs/gnb_hover.gif) no-repeat center bottom; color:#0068b7; width:73px; height:4px; position:absolute; left:50%; bottom:-1px; margin-left:-36.5px;}
.topmenu .gnbWrap .gnb ul li:hover a.D01 {text-decoration:none; color:#0093ff !important;}
.topmenu .gnbWrap .gnb ul li:hover a.D01 span{background:url(/img/gnb_hover.gif) no-repeat center bottom; color:#0068b7; width:73px; height:4px; position:absolute; left:50%; bottom:-1px; margin-left:-36.5px;}
.topmenu .gnbWrap .D02 {position:absolute; width:100%; height:490px; z-index:3;  left:0; margin-top:1px; background:rgba(255,255,255,.0); box-sizing:border-box; padding:11px 0 10px 0;}  	/* background:#fff */

.topmenu .gnbWrap .D02 a {padding:5px 0}
.topmenu .gnbWrap .D02 a:link, 
.topmenu .gnbWrap .D02 a:visited {color:#555;line-height:1.5em;; letter-spacing:-0.4pt; font-size:15px;font-weight:500; width:100%; text-align:left;padding-left:1%;}
.topmenu .gnbWrap .D02 a:hover {color:#0068b7;}
.disB{display:block;}

.topmenu .gnbWrap .gnb ul li.m02 a {letter-spacing:0px;}

.topmenu .gnbWrap .D02 .d3 {display:block;font-size:12px;}
.topmenu .gnbWrap .D02 a.d3 {color:#888;padding:0px 0 0 1%;font-weight:400}

.twoDbg0{ position:absolute; top:90px; left:0; height:490px; width:100%; z-index:99; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}


/* 모바일 메뉴 : 슬라이드 메뉴 */




/* 푸터 */

#footMenu {background:#292929;width:100%;overflow:hidden}
#footMenu .footMenuInBox {width:100%;max-width:1200px;margin:15px auto 5px;overflow:hidden;padding:0 20px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;}
#footMenu .footMenuInBox ul {display:flex;align-items:center;gap:10px;}
#footMenu .footMenuInBox ul li a {color:#fff;padding:5px 15px 5px;font-size:17px;}
#footMenu .footMenuInBox .footCall {color:#009aff;font-size:25px;font-weight:700}
#footMenu .footMenuInBox .footCallm {display:none}
#footMenu .footMenuInBox .footCall img {margin-right:10px;margin-bottom:3px;}


#footer {width:100%; background:#333; position:relative;padding:0 0 3%;overflow:hidden}
#footer .foot_inner {width:100%; max-width:1200px; margin:2% auto; position:relative; padding:0 20px; box-sizing:border-box; display:flex; align-items:flex-start; gap:40px;}
#footer .foot_logo{ width:25%; text-align:left;}
#footer .foot_logo img {max-width:150px; height:auto;}
#footer .foot_txt {width:75%; color:#ddd; display:flex; gap:40px;}
#footer .foot_txt span, #footer div .foot_txt span a {color:#ddd}
#footer .copyright { font-size:12px; color:rgba(255,255,255,0.4); padding:20px 0; letter-spacing:0; font-family:Noto Sans KR, sans-serif; text-align:center; width:100%; max-width:1200px; margin:0 auto;}
#footer .copyright a{font-size:12px; color:rgba(255,255,255,0.4); font-family:Noto Sans KR, sans-serif;}

#footer p {padding-bottom:10px; text-align:left;}
#footer p .f_company {font-size:22px;font-weight:700}
#footer .footL {width:50%; text-align:left;}
#footer .footR {width:50%; text-align:left;}



/* 탑버튼 */
div.goTop { position:fixed; right:10px; bottom:10px; z-index:999; }
div.goTop #scroll { opacity:0; display:none; }
div.goTop div {background:#999;padding:10px 7px;border-radius:0 30px 30px 30px;color:#fff;font-size:12px;font-weight:500}
div.goTop div:hover {background:#ffde00;color:#000}


/* More 버튼*/

#btnMore a {color:#ffa200;font-size:13px;font-weight:600;padding:5px;border-top:2px solid #ffa200;border-bottom:2px solid #ffa200; transition: all 0.3s ease-out;}
#btnMore a:hover {color:#fff;background:#ffa200;}

#btnMoreBlue a {color:#6da2ff;font-size:13px;font-weight:600;padding:5px;border-top:2px solid #6da2ff;border-bottom:2px solid #6da2ff; transition: all 0.3s ease-out;}
#btnMoreBlue a:hover {color:#fff;background:#6da2ff;}

.poCenter {text-align:center}

/*******************************************************************************
	@media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){

.topmenu .gnbWrap { width:100%;max-width:1280px; box-sizing:border-box;}

}


/*******************************************************************************
	@media ~1180px
*******************************************************************************/
@media all and (max-width:1180px){

.topmenu { min-width:auto;   }
.topmenu .gnbWrap { width:100%; box-sizing:border-box;}
.topmenu .gnbWrap .gnb {width:100%;}
.topmenu .gnbWrap .D02 { width:100%; min-width:auto; padding:15px 4% 10px 4%; min-width:auto;}

.topmenu .gnbWrap .gnb ul { width:60%;margin-left:25%;}
.topmenu .gnbWrap .gnb ul li .D01{width:100% !important;} 
#header .header_in .searchZone {right:20px;}

#footer .foot_inner { width:100%; box-sizing:border-box; padding:0 20px; height:auto; }


#footMenu .footMenuInBox {width:95%;padding:0 2.5%}

}

/*******************************************************************************
	@media ~980px
*******************************************************************************/
@media all and (max-width:980px){

#menu ul, .link_list {display:none;}
#header .header_in p.sitemap {display:none;}
#header .top_right p.btn_en a {margin-right:15px;}

.header_mobile {display:block; position:absolute; right:48px; top:24px;}
.header_mobile button { background:none; border:none; cursor:pointer;}

#header h1 {margin-top:0; margin-left:0;width:40%}
#header .top_left {display:none;}
#header .top_right {padding:5px 5 0 0;}
#header .header_in .header_top {padding:0px 20px 0 20px; height:70px;}

#menu ul {display:none;}

.header_mobile {display:block; position:absolute; right:35px; top:15px;}
.header_mobile button { background:none; border:none; cursor:pointer;}


#header p.link_list { display:none; }


#footer .foot_inner {flex-direction:column; align-items:center; text-align:center; gap:20px;}
#footer .foot_logo {width:100%; text-align:center;}
#footer .foot_txt {width:100%; flex-direction:column; gap:20px;}
#footer .footL {width:100%; text-align:center;}
#footer .footR {width:100%; text-align:center;}

}


/*******************************************************************************
	@media ~640px
*******************************************************************************/
@media all and (max-width:640px){

body,html {font-size:13px;}

#header .header_in .header_top p.link_list { display:none; }

/* hero-section 모바일 반응형 */
.hero-section {
    padding: 2rem 1rem;
}

.hero-content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
}

.hero-text h1 {
    font-size: 1.8rem !important;
    line-height: 1.2;
}

.hero-text p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem;
}

.award-image img {
    max-width: 200px !important;
}

/* stats-section 모바일 반응형 */
.stats-section {
    padding: 2rem 1rem;
}

.stats-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
}

.stat-card {
    padding: 1.5rem;
}

/* award-section 모바일 반응형 */
.award-section {
    padding: 2rem 1rem;
}

.award-content {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
}

.award-logos {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
}

.award-logos img {
    max-width: 120px;
}

/* content-section 모바일 반응형 */
.content-section {
    padding: 1.5rem 1rem;
}

/* partner-logos 모바일 반응형 */
.partner-logos {
    gap: 15px;
    margin: 15px 0;
}

.partner-logos img {
    height: 25px;
}

/* cloud-logos 모바일 반응형 */
.cloud-logos {
    gap: 15px;
    margin: 15px 0;
}

.cloud-logos img {
    height: 30px;
}

/* 탑버튼 */
div.goTop { right:20px; bottom:20px;}
div.goTop #scroll img { width:50px; }



#footMenu .footMenuInBox .footCall img {margin-right:5px;margin-bottom:3px;width:20px}
#footer .foot_inner {flex-direction:column !important; align-items:center !important; text-align:center !important; gap:25px !important;}
#footer .foot_logo {width:100% !important;margin:15px 0 !important;text-align:center !important;}
#footer .foot_logo img {width:40% !important;max-width:180px !important}

#footer .foot_txt {width:100% !important;padding:0 !important; flex-direction:column !important; gap:15px !important;}
#footer .footL {width:100% !important;overflow:hidden !important;text-align:center !important;padding:0 !important; line-height:1.6 !important;}
#footer .footR {width:100% !important;padding:0 !important;overflow:hidden !important;text-align:center !important; line-height:1.6 !important;}
#footer .foot_txt span {font-size:15px; line-height:1.6;}
#footer .foot_txt a {color:#fff}
#footer .footL span, #footer .footR span {margin:3px 0; display:inline-block;}
#footer .f_company {font-size:18px !important; font-weight:700 !important; margin-bottom:8px !important; display:block !important;}

#footMenu {background:#292929;width:100%;border-bottom:1px solid #555;overflow:hidden}
#footMenu .footMenuInBox ul {display:none}
#footMenu .footMenuInBox ul li {float:left;width:25%}
#footMenu .footMenuInBox ul li a {color:#fff;padding:5px 5px 5px;text-align:center;font-size:13px;}
#footMenu .footMenuInBox .footCall {clear:both;;width:100%;color:#009aff;font-size:20px;font-weight:700;padding-top:0px;text-align:Center;}
.copyright {text-align:center;}

#footMenu .footMenuInBox {margin:0;padding:1% 0}
#footMenu .footMenuInBox .footCall {display:none}
#footMenu .footMenuInBox .footCallm {display:block;clear:both;;width:100%;padding-top:0px;text-align:Center;}
#footMenu .footMenuInBox .footCallm a {color:#009aff;font-size:20px;font-weight:700;}
#footMenu .footMenuInBox .footCallm img {margin-right:2%}


}

/*******************************************************************************
	@media ~460px
*******************************************************************************/
@media all and (max-width:460px){

#header h1 {margin-top:0; margin-left:0;width:40%}
#header .header_in .header_top { padding:2px 10px 0 10px; height:50px;}
#header .header_in .searchZone {right:15px;}
.header_mobile { right:2%; top:15px;}
#header .header_in .searchZone {top:14px;}

/* 더 작은 모바일 화면 대응 */
.hero-section {
    padding: 1.5rem 0.5rem;
}

.hero-text h1 {
    font-size: 1.5rem !important;
}

.hero-text p {
    font-size: 0.9rem !important;
}

.award-image img {
    max-width: 150px !important;
}

.stats-section, .award-section, .content-section {
    padding: 1.5rem 0.5rem;
}

.stat-card {
    padding: 1rem;
}

.award-logos {
    grid-template-columns: 1fr !important;
}

.partner-logos img {
    height: 20px;
}

.cloud-logos img {
    height: 25px;
}

#footer .foot_inner { padding:0 10px; }



}

/*******************************************************************************
	Header Navigation Styles - 헤더 네비게이션 공통 스타일
*******************************************************************************/

/* 현대적인 헤더 스타일 */
header {
    background: #fff;
    box-shadow: 0 0px 0px rgb(255, 255, 255);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: all 0.3s ease;
    font-family: "Thales Sans", Arial, sans-serif;
}

header.scrolled {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
}

nav {
    position: relative;
}

.nav-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 80px;
}

/* 메뉴 좌우 분리 */
.nav-left {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.logo {
    z-index: 1001;
}

.logo a {
    display: block;
}

.logo img {
    height: 60px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
}

.main-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav > li {
    position: relative;
    margin: 0 30px 0 0;
}

.main-nav > li:last-child {
    margin-right: 0;
}

.main-nav > li > a {
    display: block;
    padding: 20px 5px 20px;
    color: #212966;
    text-decoration: none;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.2px;
    text-transform: none;
    transition: all 0.3s ease;
    position: relative;
}

.main-nav > li > a:hover {
    color: #212966;
}

.main-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #212966;
    transition: width 0.3s ease;
}

.main-nav > li:hover > a::after,
.main-nav > li.active > a::after {
    width: 100%;
}

/* 활성 메뉴 스타일 */
.main-nav > li.active > a {
    color: #212966;
}

/* 드롭다운 메뉴 스타일 */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 250px;
    box-shadow: 0 3px 13px 1px rgba(0,0,0,0.15);
    border-top: 1px solid #f8f8f8;
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    transition: all 0.4s ease-in-out;
    padding: 10px 0;
    z-index: 8;
}

/* hover 효과를 JavaScript로 제어하기 위해 CSS hover 제거 */
.main-nav > li.menu-active .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 서브메뉴 제목 스타일 */
.sub-menu .menu-title {
    display: none;
}

.sub-menu a {
    display: block;
    padding: 10px 30px 10px 20px;
    color: #1d2369;
    text-decoration: none;
    font-family: "Thales Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    transition: all 0.4s ease;
    position: relative;
}

.sub-menu a:hover {
    background: #26add3;
    color: #ffffff;
}

.sub-menu a::after {
    display: none;
}

.sub-menu a:hover::after {
    display: none;
}

.sub-menu .d3 {
    padding-left: 40px;
    color: #666;
    font-size: 13px;
}

.sub-menu .d3:hover {
    padding-left: 45px;
}

/* 서브-서브 메뉴 스타일 */
.sub-sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    background: #ffffff;
    min-width: 250px;
    box-shadow: 0 3px 13px 1px rgba(0,0,0,0.15);
    border-top: 1px solid #f8f8f8;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.4s ease;
    padding: 0;
    z-index: 1001;
}

/* 서브메뉴 li 요소에 relative 포지션 추가 */
.sub-menu li {
    position: relative;
    margin: 0;
}

/* 서브-서브 메뉴도 JavaScript로 제어 */
.sub-menu li.submenu-active > .sub-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.sub-sub-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sub-sub-menu li {
    margin: 0;
}

.sub-sub-menu a {
    display: block;
    padding: 10px 20px;
    color: #1d2369;
    text-decoration: none;
    font-family: "Thales Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    transition: all 0.4s ease;
}

.sub-sub-menu a:hover {
    background: #26add3;
    color: #ffffff;
}

/* 3차 서브메뉴 (sub-sub-sub-menu) */
.sub-sub-sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 400px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    z-index: 10000;
    display: none;
}

.sub-sub-menu li:hover > .sub-sub-sub-menu,
.sub-sub-menu li.submenu-active > .sub-sub-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    display: block;
}

.sub-sub-sub-menu ul {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.sub-sub-sub-menu li {
    position: relative;
}

.sub-sub-sub-menu a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s ease;
}

.sub-sub-sub-menu a:hover {
    background: #26add3;
    color: #ffffff;
    padding-left: 25px;
}

/* 오른쪽 메뉴 */
.right-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-btn {
    background: #00bbdd;
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-btn:hover {
    background: #242a75;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,187,221,0.3);
}

/* 모바일 버튼 */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.mobile-menu-btn img {
    width: 24px;
    height: 24px;
}

/* 반응형 */
@media (max-width: 991px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .nav-container {
        height: 70px;
    }
}

@media (max-width: 768px) {
    .nav-container {
        padding: 0 15px;
    }
    
    .logo img {
        height: 50px;
        max-width: 220px;
        object-fit: contain;
    }
    
    /* 태블릿 크기 반응형 스타일 */
    .hero-section {
        padding: 2rem 1rem;
    }

    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .hero-text h1 {
        font-size: 2rem !important;
    }

    .hero-text p {
        font-size: 1rem !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }

    .award-content {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .award-logos {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem;
    }

    .partner-logos {
        gap: 15px;
    }

    .cloud-logos {
        gap: 15px;
    }
}

/*******************************************************************************
	Mobile Menu Styles - 모바일 메뉴 공통 스타일
*******************************************************************************/

/* 모바일 메뉴 : 현대적인 슬라이드 메뉴 */
#menuArea ul, #menuArea ol, #menuArea li {
    list-style: none;
}

#menuArea {
    max-width: 500px;
    width: 320px;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
}

#menuArea .menuList {
    width: 320px;
    min-height: 100%;
    background: #fff;
    position: absolute;
    right: -528px;
    box-sizing: border-box;
    overflow-y: auto;
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    border-radius: 20px 0 0 20px;
}

/* 닫기 버튼 */
#menuArea .menuList .btnMenu_mClose {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    z-index: 1001;
}

#menuArea .menuList .btnMenu_mClose a {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 16px;
    color: #666;
    text-decoration: none;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#menuArea .menuList .btnMenu_mClose a:hover {
    background: #f8f9fa;
    color: #333;
}

#menuArea .menuList .btnMenu_mClose img {
    width: 24px;
    height: 24px;
}

/* 메뉴 리스트 */
#menuArea .menuList > .list {
    padding: 0 !important;
    list-style: none;
    margin: 0 !important;
    border-top: 0;
}

#menuArea .menuList > .list > li {
    position: relative;
    list-style: none;
    border-bottom: 1px solid #f0f0f0;
}

#menuArea .menuList > .list > li > a {
    position: relative;
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #212966;
    font-family: canada-type-gibson, sans-serif;
    letter-spacing: -0.5px;
    line-height: 24px;
    padding: 18px 25px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    background: #fff;
    transition: all 0.3s ease;
}

#menuArea .menuList > .list > li > a:hover {
    background: #26add3;
    color: #ffffff;
    padding-left: 30px;
}

#menuArea .menuList > .list > li > a:after {
    position: absolute;
    top: 50%;
    right: 25px;
    display: block;
    content: "▼";
    font-size: 12px;
    color: #999;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

#menuArea .menuList > .list > li.active > a:after {
    transform: translateY(-50%) rotate(180deg);
}

/* 서브메뉴 */
#menuArea .menuList > .list .sMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 3px 13px 1px rgba(0,0,0,0.15);
}

#menuArea .menuList > .list .sMenu > li {
    position: relative;
}

#menuArea .menuList > .list .sMenu > li > a {
    display: block;
    color: #1d2369;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 500;
    line-height: 20px;
    font-size: 15px;
    padding: 15px 25px 15px 45px;
    transition: all 0.3s ease;
    position: relative;
}

#menuArea .menuList > .list .sMenu > li > a:hover {
    background: #26add3;
    color: #ffffff;
    padding-left: 50px;
}

/* 서브메뉴에 하위메뉴가 있는 경우 화살표 표시 */
#menuArea .menuList > .list .sMenu > li.has-submenu > a:after {
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    content: "▼";
    font-size: 10px;
    color: #999;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

#menuArea .menuList > .list .sMenu > li.has-submenu.active > a:after {
    transform: translateY(-50%) rotate(180deg);
}

/* 3차 서브메뉴 */
#menuArea .menuList > .list .sMenu .sub-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

#menuArea .menuList > .list .sMenu .sub-submenu > li > a {
    display: block;
    color: #1d2369;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 400;
    line-height: 18px;
    font-size: 14px;
    padding: 12px 25px 12px 65px;
    transition: all 0.3s ease;
}

#menuArea .menuList > .list .sMenu .sub-submenu > li > a:hover {
    background: #26add3;
    color: #ffffff;
    padding-left: 70px;
}

#menuArea .menuList > .list .sMenu .d3 {
    font-weight: 400;
    padding-left: 60px;
    font-size: 14px;
    color: #1d2369;
    font-family: canada-type-gibson, sans-serif;
}

#menuArea .menuList > .list .sMenu .d3:hover {
    background: #26add3;
    color: #ffffff;
    padding-left: 65px;
}

/* 모바일 3차 서브메뉴 */
#menuArea .menuList > .list .sMenu .has-third-submenu > a:after {
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    content: "▶";
    font-size: 10px;
    color: #999;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

#menuArea .menuList > .list .sMenu .has-third-submenu.active > a:after {
    transform: translateY(-50%) rotate(90deg);
}

#menuArea .menuList > .list .sMenu .sub-sub-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding-left: 15px;
}

#menuArea .menuList > .list .sMenu .sub-sub-submenu > li > a {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #495057;
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.3s ease;
    text-decoration: none;
}

#menuArea .menuList > .list .sMenu .sub-sub-submenu > li > a:hover {
    background: #26add3;
    color: #ffffff;
    padding-left: 20px;
}

/* 그레이 레이어 */
#grayLayer {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    backdrop-filter: blur(5px);
}

#grayLayer > a {
    display: block;
    width: 100%;
    height: 100%;
}

/* 애니메이션 */
@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.menu-slide-in {
    animation: slideIn 0.3s ease-out forwards;
}

.menu-slide-out {
    animation: slideOut 0.3s ease-in forwards;
}

/* 반응형 */
@media (max-width: 480px) {
    #menuArea {
        width: 280px;
    }
    
    #menuArea .menuList {
        width: 280px;
    }
    
    #menuArea .menuList > .list > li > a {
        font-size: 16px;
        padding: 16px 20px;
    }
    
    #menuArea .menuList .sMenu > li > a {
        font-size: 14px;
        padding: 12px 20px 12px 40px;
    }
}

/*******************************************************************************
	Product Page Styles - 제품 페이지 공통 스타일
*******************************************************************************/

/* 제품 헤더 */
.product-header {
	text-align: center;
	margin-bottom: 40px;
	padding: 30px 0;
	border-bottom: 2px solid #f0f0f0;
}

.main-title {
	font-size: 2.5em;
	color: #212966;
	margin-bottom: 10px;
	font-weight: 700;
}

.subtitle {
	font-size: 1.2em;
	color: #666;
	margin-bottom: 0;
}

.product-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.product-content h4 {
	color: #0066cc;
	margin-bottom: 15px;
	font-size: 20px;
}

.product-content p {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 15px;
	color: #666;
}

.product-content ul {
	margin-bottom: 20px;
	padding-left: 20px;
}

.product-content li {
	margin-bottom: 5px;
	font-size: 14px;
	color: #666;
}

/* 플렉스 레이아웃에서 사용되는 경우 */
.product-item .product-content {
	flex: 1;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
	.product-content {
		padding: 15px;
	}
}

/* 섹션 스타일 */
.section {
	margin-bottom: 40px;
	padding: 0 0;
}

.section h3 {
	font-size: 1.8em;
	color: #212966;
	margin-bottom: 20px;
	border-bottom: 3px solid #26add3;
	padding-bottom: 10px;
}

/* 기능 목록 */
.feature-list {
	list-style: none;
	padding: 0;
}

.feature-list li {
	margin-bottom: 15px;
	padding: 15px;
	border-radius: 0 8px 8px 0;
}

.feature-list strong {
	color: #212966;
}

/* 그리드 레이아웃 */
.threat-grid,
.attack-grid,
.monitoring-grid,
.platform-grid,
.api-types,
.detection-methods,
.protection-levels,
.level-card,
.dashboard-features,
.ai-features,
.integration-options,
.tech-stack {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

/* 위협/공격 관련 카드 */
.threat-item,
.attack-item {
	padding: 25px;
	background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
	border-radius: 10px;
	border: 2px solid #ff6b6b;
}

.threat-item h4,
.attack-item h4 {
	color: #d63031;
	margin-bottom: 15px;
}

/* 정보 카드 */
.monitoring-item,
.platform-card,
.api-card,
.method-card,
.level-card {
	padding: 25px;
	background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
	border-radius: 10px;
	border: 2px solid #26add3;
}

.monitoring-item h4,
.platform-card h4,
.api-card h4,
.method-card h4,
.level-card h4 {
	color: #212966;
	margin-bottom: 15px;
}

/* 대시보드 카드 */
.dashboard-card,
.dashboard-metric {
	padding: 25px;
	background: linear-gradient(135deg, #26add3 0%, #212966 100%);
	color: white !important;
	border-radius: 10px;
}

.dashboard-card h4,
.dashboard-metric h4 {
	color: white !important;
	margin-bottom: 15px;
}

.dashboard-card p,
.dashboard-metric p {
	color: white !important;
}

.dashboard-card ul,
.dashboard-card li {
	color: white !important;
}

.metric-value {
	font-size: 2em;
	font-weight: bold;
	color: white !important;
	margin-bottom: 10px;
}

/* 혜택 섹션 */
.benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.benefit-item {
	padding: 25px;
	background: linear-gradient(135deg, #26add3 0%, #212966 100%);
	color: white !important;
	border-radius: 10px;
}

.benefit-item h4 {
	color: white !important;
	margin-bottom: 15px;
}

.benefit-item p {
	color: white !important;
}

/* 배포 섹션 */
.deployment-section {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.deployment-item,
.integration-item {
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	border-left: 4px solid #26add3;
}

.deployment-item h4,
.integration-item h4 {
	color: #212966;
	margin-bottom: 10px;
}

/* CTA 섹션 */
.cta-section {
	text-align: center;
	padding: 40px;
	background: linear-gradient(135deg, #26add3 0%, #212966 100%);
	color: white !important;
	border-radius: 15px;
	margin-top: 40px;
}

.cta-section h3 {
	color: white !important;
	border-bottom: none;
	margin-bottom: 15px;
}

.cta-section p {
	color: white !important;
	margin-bottom: 25px;
	font-size: 1.1em;
}

.cta-button {
	display: inline-block;
	padding: 15px 30px;
	background: white;
	color: #212966 !important;
	text-decoration: none;
	border-radius: 8px;
	font-weight: bold;
	transition: all 0.3s ease;
}

.cta-button:hover {
	background: #f0f0f0;
	transform: translateY(-2px);
}

/* 특수 스타일 */
.capacity,
.attack-stats {
	margin-top: 15px;
	padding: 10px;
	background: rgba(214, 48, 49, 0.1);
	border-radius: 5px;
	font-weight: bold;
	color: #d63031;
	text-align: center;
}

.setup-time {
	margin-top: 15px;
	padding: 8px 12px;
	background: #26add3;
	color: white;
	border-radius: 5px;
	font-size: 0.9em;
	font-weight: bold;
}

/* AI 기능 */
.ai-item {
	padding: 25px;
	background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);
	border-radius: 10px;
	border: 2px solid #f39c12;
	position: relative;
}

.ai-item h4 {
	color: #e67e22;
	margin-bottom: 15px;
}

.feature-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #f39c12;
	color: white;
	padding: 5px 10px;
	border-radius: 15px;
	font-size: 0.8em;
	font-weight: bold;
}

/* 비교 테이블 */
.comparison-table {
	overflow-x: auto;
	margin: 20px 0;
}

.comparison-table table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.comparison-table th,
.comparison-table td {
	padding: 15px;
	text-align: center;
	border: 1px solid #e0e0e0;
}

.comparison-table th {
	background: linear-gradient(135deg, #26add3 0%, #212966 100%);
	color: white;
	font-weight: bold;
}

.comparison-table td.highlight {
	background: #e8f5e8;
	color: #00b894;
	font-weight: bold;
}

/* 단계별 과정 */
.implementation-steps,
.optimization-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin: 30px 0;
}

.step-item {
	display: flex;
	align-items: flex-start;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 10px;
	border-left: 4px solid #26add3;
}

.step-number {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #26add3 0%, #212966 100%);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	margin-right: 15px;
	flex-shrink: 0;
}

.step-content h4 {
	color: #212966;
	margin-bottom: 10px;
}

/* 기술 태그 */
.tech-tags,
.integration-features {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 15px;
}

.tech-tag,
.feature-tag {
	background: linear-gradient(135deg, #26add3 0%, #212966 100%);
	color: white;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 0.9em;
	font-weight: bold;
}

.feature-tag {
	padding: 5px 12px;
	border-radius: 15px;
	font-size: 0.8em;
}

/* 위험도 레벨 */
.response-levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.level-item {
	padding: 25px;
	border-radius: 10px;
	text-align: center;
	position: relative;
}

.level-item.low-risk {
	background: linear-gradient(135deg, #e8f5e8 0%, #c8f0c8 100%);
	border: 2px solid #00b894;
}

.level-item.medium-risk {
	background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);
	border: 2px solid #f39c12;
}

.level-item.high-risk {
	background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
	border: 2px solid #ff6b6b;
}

.risk-indicator {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 15px;
	border-radius: 15px;
	font-size: 0.8em;
	font-weight: bold;
}

.low-risk .risk-indicator {
	background: #00b894;
	color: white;
}

.medium-risk .risk-indicator {
	background: #f39c12;
	color: white;
}

.high-risk .risk-indicator {
	background: #ff6b6b;
	color: white;
}

.level-item h4 {
	margin-top: 15px;
	margin-bottom: 15px;
}

.low-risk h4 { color: #00b894; }
.medium-risk h4 { color: #f39c12; }
.high-risk h4 { color: #d63031; }

.action {
	margin-top: 15px;
	padding: 10px;
	background: rgba(255,255,255,0.8);
	border-radius: 5px;
	font-weight: bold;
}

/* 모니터링 아이템 */
.monitor-item {
	padding: 20px;
	background: linear-gradient(135deg, #fff5e6 0%, #ffe6cc 100%);
	border-radius: 8px;
	border: 2px solid #fd79a8;
}

.monitor-item h4 {
	color: #e84393;
	margin-bottom: 10px;
}

.monitoring-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
	.threat-grid,
	.attack-grid,
	.monitoring-grid,
	.platform-grid,
	.api-types,
	.detection-methods,
	.protection-levels,
	.dashboard-features,
	.ai-features,
	.benefits,
	.deployment-section,
	.implementation-steps,
	.optimization-steps,
	.integration-options,
	.monitoring-features,
	.response-levels {
		grid-template-columns: 1fr;
	}
	
	.main-title {
		font-size: 2em;
	}
	
	.comparison-table {
		font-size: 0.9em;
	}
	
	.tech-tags,
	.integration-features {
		justify-content: center;
	}
}

/* DSMP 페이지 전용 스타일 - feature-card는 common-components.css에서 정의됨 */

.lifecycle-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.step {
    padding: 25px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 15px;
    text-align: center;
    border: 2px solid #0891b2;
    position: relative;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #212966 0%, #26add3 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0 auto 15px;
}

.step h4 {
    color: #0c4a6e;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.environment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.env-card {
    padding: 25px;
    background: linear-gradient(135deg, #f0fff4 0%, #dcfce7 100%);
    border-radius: 15px;
    border: 2px solid #22c55e;
}

.env-card h4 {
    color: #166534;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.env-card ul {
    list-style: none;
    padding: 0;
}

.env-card li {
    padding: 5px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
}

.env-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: bold;
}

/* 추가 제품 페이지 전용 스타일 */
/* Multi-Factor Authentication 페이지 */
.auth-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.method-card {
    padding: 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    text-align: center;
    border: 2px solid #26add3;
    transition: transform 0.3s ease;
}

.method-card:hover {
    transform: translateY(-5px);
}

.method-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

/* License Management 페이지 */
.license-models,
.deployment-methods,
.business-benefits,
.industries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.model-card,
.method-item,
.benefit-card,
.industry-item {
    padding: 25px;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.model-card,
.method-item {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #0891b2;
}

.benefit-card {
    background: linear-gradient(135deg, #f0fff4 0%, #dcfce7 100%);
    border: 2px solid #22c55e;
    text-align: center;
}

.industry-item {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
}

.model-icon,
.benefit-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
}

/* Data Encryption 페이지 */
.algorithm-category,
.algorithm-list,
.algo-category,
.algo-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.algorithms,
.algorithms-support {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.algorithms span,
.algorithms-support span {
    background: rgba(38, 173, 211, 0.2);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    color: #212966;
    border: 1px solid #26add3;
}

/* Application Areas */
.application-areas,
.app-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.app-category,
.area-card {
    padding: 20px;
    background: linear-gradient(135deg, #f5f3ff 0%, #e9d5ff 100%);
    border-radius: 10px;
    border: 2px solid #8b5cf6;
}

.app-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.app-list span {
    background: rgba(139, 92, 246, 0.2);
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

/* Architecture and Access Control */
.architecture-options,
.arch-component,
.arch-option,
.access-control {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #26add3;
    margin-bottom: 15px;
}

.analytics-features,
.api-support {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Auto Icons */
.auto-icon,
.area-icon {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
}

/* Key Management 페이지 */
.lifecycle-stages,
.key-types,
.policy-features,
.integration-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.stage-card,
.key-type-card,
.policy-card,
.platform-category {
    padding: 25px;
    border-radius: 15px;
    border: 2px solid #0891b2;
}

.stage-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    text-align: center;
}

.key-type-card {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
}

.policy-card {
    background: linear-gradient(135deg, #f0fff4 0%, #dcfce7 100%);
    border: 2px solid #22c55e;
}

.platform-category {
    background: linear-gradient(135deg, #f5f3ff 0%, #e9d5ff 100%);
    border: 2px solid #8b5cf6;
}

.stage-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

.key-algorithms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.key-algorithms span {
    background: rgba(245, 158, 11, 0.2);
    padding: 6px 10px;
    border-radius: 15px;
    font-size: 0.85em;
    color: #92400e;
    border: 1px solid #f59e0b;
}

.platform-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.platform-list span {
    background: rgba(139, 92, 246, 0.2);
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    color: #5b21b6;
    border: 1px solid #8b5cf6;
}

/* Security Features */
.security-features,
.security-feature,
.protection-mechanisms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.security-card {
    padding: 25px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
    border-radius: 10px;
    border: 2px solid #ff6b6b;
    text-align: center;
}

.security-card h4 {
    color: #d63031;
    margin-bottom: 15px;
}

.protection-stats {
    margin-top: 15px;
    padding: 10px;
    background: rgba(214, 48, 49, 0.1);
    border-radius: 5px;
    font-weight: bold;
    color: #d63031;
    text-align: center;
}

/* Pipeline Stages */
.pipeline-stage {
    padding: 20px;
    background: linear-gradient(135deg, #e8f4f8 0%, #d1ecf1 100%);
    border-radius: 10px;
    border: 2px solid #26add3;
    margin-bottom: 15px;
    position: relative;
}

.pipeline-stage h4 {
    color: #212966;
    margin-bottom: 10px;
}

/* High Availability Features */
.ha-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.ha-feature {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #26add3;
}

/* Deployment and Scenarios */
.deployment-scenarios,
.scenario-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.scenario-card {
    padding: 25px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 10px;
    border: 2px solid #0891b2;
}

.scenario-card h4 {
    color: #0c4a6e;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.scenario-card ul {
    list-style: none;
    padding: 0;
}

.scenario-card li {
    padding: 5px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
}

.scenario-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0891b2;
    font-weight: bold;
}

/* Threat Protection */
.threat-protection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Network and Performance */
.network-features,
.performance-features,
.monitoring-capabilities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.network-card,
.performance-card,
.capability-card {
    padding: 25px;
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border-radius: 10px;
    border: 2px solid #26add3;
}

.network-card h4,
.performance-card h4,
.capability-card h4 {
    color: #212966;
    margin-bottom: 15px;
}

/* Integration Features */
.integration-features,
.integration-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.integration-card,
.option-card {
    padding: 25px;
    background: linear-gradient(135deg, #f5f3ff 0%, #e9d5ff 100%);
    border-radius: 10px;
    border: 2px solid #8b5cf6;
}

.integration-card h4,
.option-card h4 {
    color: #5b21b6;
    margin-bottom: 15px;
}

/* Use Cases and Industries */
.use-cases,
.industry-sectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.use-case,
.sector-card {
    padding: 20px;
    background: linear-gradient(135deg, #f0fff4 0%, #dcfce7 100%);
    border-radius: 10px;
    border: 2px solid #22c55e;
}

.use-case h4,
.sector-card h4 {
    color: #166534;
    margin-bottom: 10px;
}

/* Product and Protocol Grids */
.product-grid,
.protocol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.product-card,
.protocol-card {
    padding: 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    border: 2px solid #26add3;
    transition: transform 0.3s ease;
}

.product-card:hover,
.protocol-card:hover {
    transform: translateY(-5px);
}

.product-icon {
    font-size: 3em;
    margin-bottom: 15px;
    display: block;
    text-align: center;
}

.product-card h4,
.protocol-card h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.product-card ul,
.protocol-card ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.product-card li,
.protocol-card li {
    padding: 3px 0;
    color: #666;
    position: relative;
    padding-left: 20px;
}

.product-card li:before,
.protocol-card li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #26add3;
    font-weight: bold;
}

/* Performance Tables */
.performance-table {
    margin-top: 20px;
    overflow-x: auto;
}

.performance-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.performance-table th {
    background: linear-gradient(135deg, #212966 0%, #26add3 100%);
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: 600;
}

.performance-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    color: #666;
}

.performance-table tr:nth-child(even) {
    background: #f8f9fa;
}

.performance-table tr:hover {
    background: #e3f2fd;
}

/* HA Cards */
.ha-card {
    padding: 25px;
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border-radius: 15px;
    border: 2px solid #26add3;
    transition: transform 0.3s ease;
}

.ha-card:hover {
    transform: translateY(-3px);
}

.ha-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
    text-align: center;
    display: block;
}

.ha-card h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.2em;
}

/* 추가 공통 클래스들 */
/* Data Processing and Analytics */
.data-processing,
.analytics-dashboard,
.processing-pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.processing-card,
.analytics-card,
.pipeline-card {
    padding: 25px;
    background: linear-gradient(135deg, #f5f3ff 0%, #e9d5ff 100%);
    border-radius: 15px;
    border: 2px solid #8b5cf6;
}

/* Compliance and Standards */
.compliance-standards,
.regulatory-frameworks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.compliance-item,
.standard-item {
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    border: 2px solid #f59e0b;
    text-align: center;
}

.compliance-item h4,
.standard-item h4 {
    color: #92400e;
    margin-bottom: 10px;
}

/* Device and Hardware */
.device-grid,
.hardware-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.device-card,
.hardware-card {
    padding: 25px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    border: 2px solid #6c757d;
    transition: transform 0.3s ease;
}

.device-card:hover,
.hardware-card:hover {
    transform: translateY(-5px);
}

/* Configuration and Setup */
.configuration-steps,
.setup-process {
    margin-top: 20px;
}

.config-step,
.setup-step {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #26add3;
    margin-bottom: 15px;
}

.config-step h4,
.setup-step h4 {
    color: #212966;
    margin-bottom: 10px;
}

/* Metrics and Statistics */
.metrics-grid,
.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.metric-card,
.stat-card {
    padding: 20px;
    background: linear-gradient(135deg, #26add3 0%, #212966 100%);
    color: white;
    border-radius: 10px;
    text-align: center;
}

.metric-value,
.stat-value {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 5px;
    color: white;
}

.metric-label,
.stat-label {
    font-size: 0.9em;
    color: rgba(255,255,255,0.8);
}

/* Features and Capabilities */
.features,
.capabilities {
    margin-top: 20px;
}

.feature,
.capability {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #26add3;
    margin-bottom: 10px;
}

.feature h5,
.capability h5 {
    color: #212966;
    margin-bottom: 8px;
    font-size: 1.1em;
}

/* Responsive adjustments for new classes */
@media (max-width: 768px) {
    .data-processing,
    .analytics-dashboard,
    .processing-pipeline,
    .device-grid,
    .hardware-options {
        grid-template-columns: 1fr;
    }
    
    .metrics-grid,
    .stats-overview {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/* Secrets Management Specific Styles */
.secret-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.secret-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.secret-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.secret-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.secret-card h4 {
    color: #212966;
    margin: 10px 0;
    font-size: 1.1rem;
}

.secret-card ul {
    text-align: left;
    padding-left: 20px;
    margin: 10px 0;
}

.secret-card li {
    margin: 5px 0;
    color: #666;
}

.dynamic-engines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.engine-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.3s ease;
}

.engine-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.engine-card h4 {
    color: #212966;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.engine-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

.engine-list span {
    background: #26add3;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.control-feature {
    background: #f8f9fa;
    border-left: 4px solid #26add3;
    padding: 20px;
    margin: 15px 0;
    border-radius: 0 8px 8px 0;
}

.control-feature h4 {
    color: #212966;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.control-feature ul {
    padding-left: 20px;
    margin: 0;
}

.control-feature li {
    margin: 8px 0;
    color: #666;
}

.devops-integration {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.security-icon {
    font-size: 2rem;
    color: #26add3;
    margin-bottom: 15px;
    display: block;
    text-align: center;
}

.security-card .security-icon {
    margin-bottom: 10px;
}

/* Tokenization Specific Styles */
.tokenization-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.type-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.vault-architecture {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.process-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.compliance-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.implementation-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.impl-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.3s ease;
}

.impl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.impl-card h4 {
    color: #212966;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.impl-features {
    margin-top: 15px;
}

.impl-features li {
    margin: 8px 0;
    color: #666;
}

/* Secure File Sharing Specific Styles */
.features-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0;
}

.showcase-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #26add3;
}

.showcase-icon {
    font-size: 2rem;
    color: #26add3;
    flex-shrink: 0;
}

.showcase-details h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.showcase-details p {
    color: #666;
    margin: 5px 0;
}

.showcase-details ul {
    padding-left: 20px;
    margin: 10px 0;
}

.showcase-details li {
    margin: 5px 0;
    color: #666;
}

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.workflow-step {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.step-content h4 {
    color: #212966;
    margin: 10px 0;
    font-size: 1rem;
}

.step-content p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.case-category {
    margin: 20px 0;
}

.case-category h4 {
    color: #212966;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.case-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.case-example {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    border-left: 3px solid #26add3;
}

.case-example h5 {
    color: #212966;
    margin-bottom: 8px;
    font-size: 1rem;
}

.case-example p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.compliance-icon {
    font-size: 2rem;
    color: #26add3;
    text-align: center;
    margin-bottom: 10px;
}

.compliance-card h4 {
    color: #212966;
    margin: 10px 0;
    font-size: 1rem;
}

.compliance-card p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.integration-category {
    margin: 15px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.integration-category h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.integration-category ul {
    padding-left: 20px;
    margin: 0;
}

.integration-category li {
    margin: 5px 0;
    color: #666;
}

.deployment-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.deployment-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.deployment-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.deploy-icon {
    font-size: 2rem;
    color: #26add3;
    margin-bottom: 15px;
    display: block;
}

.deployment-card h4 {
    color: #212966;
    margin: 10px 0;
    font-size: 1.1rem;
}

.deployment-card p {
    color: #666;
    font-size: 0.9rem;
    margin: 8px 0;
}

.deployment-card ul {
    text-align: left;
    padding-left: 20px;
    margin: 10px 0;
}

.deployment-card li {
    margin: 5px 0;
    color: #666;
}

/* Additional Missing Classes */
.protocol-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.workflow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
    align-items: center;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

/* DevSecOps Specific Styles */
.pipeline-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.pipeline-arrow {
    color: #26add3;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 10px;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.solution-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.solution-icon {
    font-size: 2rem;
    color: #26add3;
    margin-bottom: 15px;
    display: block;
}

.solution-card h4 {
    color: #212966;
    margin: 10px 0;
    font-size: 1.1rem;
}

.integration-showcase {
    margin: 30px 0;
}

.integration-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 15px 0;
}

.item-logo {
    font-weight: 600;
    color: #212966;
    text-align: center;
    padding: 10px;
    background: #e9ecef;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.item-logo:hover {
    background: #26add3;
    color: white;
}

.automation-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0;
}

.automation-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #26add3;
}

.feature-details h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.feature-details p {
    color: #666;
    margin: 5px 0;
}

.feature-details ul {
    padding-left: 20px;
    margin: 10px 0;
}

.feature-details li {
    margin: 5px 0;
    color: #666;
}

.maturity-levels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 20px 0;
}

.maturity-level {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.level-number {
    background: #26add3;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.level-content h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.level-content p {
    color: #666;
    margin: 5px 0;
}

.level-content ul {
    padding-left: 20px;
    margin: 10px 0;
}

.level-content li {
    margin: 5px 0;
    color: #666;
}

/* HSM Specific Missing Classes */
.hsm-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0;
}

.product-specs span {
    background: #26add3;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.ha-architecture {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.specs-table {
    margin: 20px 0;
    overflow-x: auto;
}

.specs-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.specs-table th,
.specs-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.specs-table th {
    background: #212966;
    color: white;
    font-weight: 600;
}

.specs-table tr:last-child td {
    border-bottom: none;
}

.specs-table tr:nth-child(even) {
    background: #f8f9fa;
}

.cert-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border-left: 4px solid #26add3;
}

.cert-item h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.cert-item p {
    color: #666;
    margin: 0;
}

/* Performance Metrics Styles */
.performance-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
    padding: 20px;
    border-radius: 8px;
	background: linear-gradient(135deg, #26add3 0%, #212966 100%);

}

.metric-item {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #26add3 0%, #212966 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.metric-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.metric-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: #26add3;
    margin-bottom: 10px;
    display: block;
}

.metric-label {
    font-size: 0.9rem;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
}

/* Data Discovery Specific Styles */
.data-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.data-type-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.data-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.data-type-card h4 {
    color: #212966;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.data-type-card ul {
    padding-left: 20px;
    margin: 10px 0;
}

.data-type-card li {
    margin: 5px 0;
    color: #666;
}

.data-type {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border-left: 4px solid #26add3;
}

.data-type h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.scan-targets {
    margin: 20px 0;
}

.target-category {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.target-category h4 {
    color: #212966;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.target-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.target-list span {
    background: #26add3;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.classification-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.process-step {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    position: relative;
}

.process-step h4 {
    color: #212966;
    margin: 10px 0;
    font-size: 1rem;
}

.process-step p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.reporting-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.report-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.report-card h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.report-card p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* Risk Analytics & Monitoring Specific Styles */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.module-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.module-icon {
    font-size: 2rem;
    color: #26add3;
    margin-bottom: 15px;
    display: block;
}

.module-card h4 {
    color: #212966;
    margin: 10px 0;
    font-size: 1.1rem;
}

.feature-category {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.feature-category h4 {
    color: #212966;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.feature-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    margin: 10px 0;
    border-left: 3px solid #26add3;
}

.feature-item h5 {
    color: #212966;
    margin-bottom: 8px;
    font-size: 1rem;
}

.feature-item p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.dash-icon {
    font-size: 2rem;
    color: #26add3;
    margin-bottom: 15px;
    display: block;
    text-align: center;
}

.integration-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.benefits-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(135deg, #26add3 0%, #212966 100%);
    border-radius: 8px;
}

.benefit-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #26add3;
    margin-bottom: 10px;
    display: block;
    text-align: center;
}

.benefits-showcase .benefit-card {
    background: white;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.implementation-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 20px 0;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.timeline-number {
    background: #26add3;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.timeline-content h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.timeline-content p {
    color: #666;
    margin: 0;
}

/* Network Encryption Additional Styles */
.scenario {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    border-left: 4px solid #26add3;
}

.scenario h4 {
    color: #212966;
    margin-bottom: 8px;
    font-size: 1rem;
}

.scenario p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* Customer Identity Management Specific Styles */
.industry-solutions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.industry-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.industry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.industry-card h4 {
    color: #212966;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.industry-card ul {
    padding-left: 20px;
    margin: 10px 0;
}

.industry-card li {
    margin: 5px 0;
    color: #666;
}

.customer-journey {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.journey-step {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    position: relative;
}

.journey-step h4 {
    color: #212966;
    margin: 10px 0;
    font-size: 1rem;
}

.journey-step p {
    color: #666;
    font-size: 0.9rem;
    margin: 0;
}

/* Additional Missing Classes */
.industry-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.industry-list li {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px 15px;
    text-align: center;
    color: #212966;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.industry-list li:hover {
    background: #26add3;
    color: white;
    transform: translateY(-2px);
}

/* Business Page Specific Styles */
.cTit {
    text-align: center;
    font-size: 1.5rem;
    color: #212966;
    margin: 20px 0;
    font-weight: 600;
}

.cTit span {
    color: #26add3;
    margin: 0 10px;
}

.txtCenter {
    text-align: center;
}

/* Community/Board Specific Styles */
.pBbs {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

/* Data Protection on Demand - Service Grid */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.service-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e1e5e9;
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(38, 173, 211, 0.2);
    border-color: #26add3;
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.service-card h4 {
    color: #212966;
    margin: 15px 0 10px 0;
    font-size: 1.3rem;
}

/* Pricing Tiers */
.pricing-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.tier {
    background: white;
    border: 2px solid #e1e5e9;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.tier:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(38, 173, 211, 0.15);
}

.tier.popular {
    border-color: #26add3;
    background: linear-gradient(135deg, #f8fdff 0%, #e8f8fd 100%);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #26add3;
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

.tier h4 {
    color: #212966;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #26add3;
    margin: 20px 0;
}

.tier-button {
    display: inline-block;
    background: #26add3;
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.tier-button:hover {
    background: #1e8ba8;
    transform: translateY(-2px);
}

/* Partners Section */
.partners {
    margin: 40px 0;
}

.partner-category {
    margin-bottom: 30px;
}

.partner-category h4 {
    color: #212966;
    margin-bottom: 15px;
    font-size: 1.3rem;
    text-align: center;
}

.partner-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.partner-item {
    background: white;
    padding: 20px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    color: #212966;
    transition: all 0.3s ease;
}

.partner-item:hover {
    background: #f8fdff;
    border-color: #26add3;
    transform: translateY(-2px);
}

/* CTA Buttons Enhancement */
.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.cta-button.primary {
    background: #26add3;
    color: white;
}

.cta-button.secondary {
    background: transparent;
    color: #26add3;
    border: 2px solid #26add3;
}

.cta-button.secondary:hover {
    background: #26add3;
    color: white;
}

/* Implementation Roadmap */
.roadmap {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 30px 0;
    position: relative;
}

.roadmap::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #26add3 0%, #212966 100%);
    border-radius: 2px;
}

.roadmap-phase {
    position: relative;
    background: white;
    border-radius: 12px;
    border: 1px solid #e1e5e9;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-left: 60px;
    transition: all 0.3s ease;
}

.roadmap-phase:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 25px rgba(38, 173, 211, 0.15);
    border-color: #26add3;
}

.roadmap-phase::before {
    content: '';
    position: absolute;
    left: -44px;
    top: 25px;
    width: 20px;
    height: 20px;
    background: #26add3;
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #26add3;
    z-index: 2;
}

.roadmap-phase:nth-child(2)::before {
    background: #4CAF50;
    box-shadow: 0 0 0 3px #4CAF50;
}

.roadmap-phase:nth-child(3)::before {
    background: #FF9800;
    box-shadow: 0 0 0 3px #FF9800;
}

.roadmap-phase:nth-child(4)::before {
    background: #9C27B0;
    box-shadow: 0 0 0 3px #9C27B0;
}

.phase-header {
    background: linear-gradient(135deg, #26add3 0%, #212966 100%);
    color: white;
    padding: 20px 25px;
    border-radius: 12px 12px 0 0;
    position: relative;
}

.roadmap-phase:nth-child(2) .phase-header {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.roadmap-phase:nth-child(3) .phase-header {
    background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.roadmap-phase:nth-child(4) .phase-header {
    background: linear-gradient(135deg, #9C27B0 0%, #4A148C 100%);
}

.phase-header h4 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.phase-header h4::before {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.phase-content {
    padding: 25px;
}

.phase-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.phase-content li {
    padding: 12px 0;
    border-bottom: 1px solid #f0f4f8;
    position: relative;
    padding-left: 30px;
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.phase-content li:last-child {
    border-bottom: none;
}

.phase-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 12px;
    width: 20px;
    height: 20px;
    background: #26add3;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.roadmap-phase:nth-child(2) .phase-content li::before {
    background: #4CAF50;
}

.roadmap-phase:nth-child(3) .phase-content li::before {
    background: #FF9800;
}

.roadmap-phase:nth-child(4) .phase-content li::before {
    background: #9C27B0;
}

.phase-content li:hover {
    color: #212966;
    font-weight: 500;
    padding-left: 35px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .roadmap::before {
        left: 15px;
    }
    
    .roadmap-phase {
        margin-left: 40px;
    }
    
    .roadmap-phase::before {
        left: -29px;
        width: 16px;
        height: 16px;
    }
    
    .phase-header {
        padding: 15px 20px;
    }
    
    .phase-header h4 {
        font-size: 1.2rem;
    }
    
    .phase-content {
        padding: 20px;
    }
    
    .roadmap-phase:hover {
        transform: translateX(5px);
    }
}

.sub-sub-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    min-width: 500px !important;
}

.slider-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.slider-content h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slider-content p {
    font-size: 24px;
    line-height: 1.6;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.learn-more-btn {
    margin-top: 30px;
    position: relative;
    z-index: 100;
}

.learn-more-btn button.slogan-link {
    display: inline-block;
    padding: 10px 30px;
    background-color: #212966;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 2px solid #fff;
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 101;
}

.learn-more-btn button.slogan-link:hover {
    background-color: #fff;
    color: #212966;
    border-color: #212966;
}

.learn-more-btn button.slogan-link:active {
    transform: translateY(1px);
}