@charset "utf-8";


/* 기본공통 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
html {
	font-size:62.5%; /* 반응형 폰트사이즈 */
	
	/* 모바일 웹폰트 크기 자동조정 */
	-webkit-text-size-adjust:none; /* 크롬/사파리/오페라 신버전 */
	-moz-text-size-adjust:none; /* 파이어폭스 */
	-ms-text-size-adjust:none; /* 익스 */
	-o-text-size-adjust:none; /* 오페라 구버전 */
	text-size-adjust:none;
}
@media screen and (max-width: 1024px) {
	html {font-size:60%;}
}
@media screen and (max-width: 481px) { 
	html {font-size:57%;}
}

body {min-width:320px;} /* 반응형일 경우 최소넓이 */


/* 기본 레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.sub_wrap {position:relative; width:100%;}

/* header */
#headerUser {position:relative; z-index:80; width:100%; height:8rem; border-bottom:1px solid rgba(255,255,255,0.2); background:transparent;}
#headerUser .wrapper {width:100%; height:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; column-gap:5rem; padding:0 5rem 0 0; margin:0 auto;}

.ci_box {width:26rem; height:100%; display:flex; justify-content:center; align-items:center; text-align:center; padding:1rem 4rem; border-radius:0 0 3rem 0; background:var(--white);}
.ci_box a {display:block;}

.gnb_pc {display:flex; flex-wrap:wrap; align-items:center; column-gap:8rem;}
.gnb_pc li a {font-size:1.8rem; font-weight:400; color:var(--white); opacity:0.8;}
.gnb_pc li a:hover {opacity:1.0;}

.gnb_util {display:flex; justify-content:flex-end; align-items:center; gap:1rem;}
.gnb_util a {
	width:9rem; height:3.6rem; display:flex; justify-content:center; align-items:center; font-size:1.4rem; 
	color:var(--white); text-align:center; padding:4px 2rem; border-radius:50em; background:rgba(255,255,255,0.1);
}
.gnb_util a:hover {background:rgba(255,255,255,0.2);}

/* hamburger menu (mob) */
.hmg {display:none;}

/* overlay (mob) */
.overlay {display:none; position:fixed; left:0; top:0; z-index:50; width:100vw; height:100vh; margin:0; padding:0; background:rgba(0,0,0,0.65);}

/* mobile menu */
#mobileBox {display:none; position:fixed; top:0; right:0; z-index:90; height:100vh; height:-webkit-fill-available; height:fill-available; margin-right:-100%; background:var(--white); overflow-y:scroll; -ms-overflow-style:none;}
#mobileBox::-webkit-scrollbar {display:none;}

@media screen and (max-width: 1420px){
	#headerUser .wrapper {padding:0 3rem 0 0;}
}
@media screen and (max-width: 1200px){
	.gnb_util {display:none;} /* 바로가기 (웹) */
	.gnb_pc {display:none;} /* 메인메뉴 (웹) */
	
	#headerUser {height:6rem;}
	
	.ci_box {width:20rem; border-radius:0 0 2rem 0;}
	.ci_box a img {height:4rem;}
	
	/* hamburger menu */
	.hmg, .hmg span {display:inline-block; transition:all 0.3s; cursor:pointer;}
	.hmg {position:relative; z-index:10; width:24px; height:18px; padding:0; border:none; background:none;}
	.hmg span {position:absolute; left:0; width:100%; height:2px; border-radius:999px; background:var(--white); transition:transform 0.35s ease, width 0.25s ease, opacity 0.2s ease;}
	
	.hmg_open .bar_one {top:0; width:70%;}
	.hmg_open .bar_two {top:8px; width:100%;}
	.hmg_open .bar_three {top:16px; width:85%;}
	
	.hmg_close .bar_one {top:8px; width:100%; transform:rotate(45deg);}
	.hmg_close .bar_two {opacity:0; transform:scaleX(0);}
	.hmg_close .bar_three {top:8px; width:100%; transform:rotate(-45deg);}
	
	/* 메뉴 선택 시 노출되는 배경 */
	.overlay.open {display:block;}
	
	/* mobile menu */
	#mobileBox {display:flex; flex-direction:column; width:50vw;}
	
	.mob_util {display:flex; flex-direction:column; gap:3.6rem; padding:2.5rem 2rem; background:linear-gradient(210deg, var(--maincolor1), var(--subcolor2)); overflow:hidden;}
	.mob_util .mob_ci img {height:4rem;}
	
	.mob_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; column-gap:3rem;}
	.mob_head button {opacity:0.8;}
	
	.mob_info {display:flex; flex-direction:column; gap:2rem;}
	.mob_info > p {font-size:1.8rem; line-height:1.6; color:var(--white);}
	.mob_info > p b {display:block; font-size:2.2rem; font-weight:500;}
	.mob_info > p span {font-size:1.8rem; font-weight:normal;}
	.mob_info > div a {
		display:flex; justify-content:center; align-items:center; text-align:center; gap:1rem; font-size:1.5rem;
		color:var(--white); padding:1.2rem 1.8rem; border-radius:4px; border:1px solid var(--pointcolor1);
	}
	
	.mob_info > div a.fill {background:var(--pointcolor1);}
	.mob_info > div a.line {border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.1);}
	
	.mob_info .mob_info_btn {display:grid; grid-template-columns:repeat(auto-fit, minmax(33.333%, 1fr)); gap:1rem;}
	
	.mob_menu_box {padding:2rem; background:var(--white);}
	.mob_menu_box li a {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:0 1rem;}
	.mob_menu_box li a:hover {color:var(--fontcolor1);}
	.mob_menu_box li a i {font-size:1.2rem; opacity:0.3; transition:transform 0.3s;}
	.mob_menu_box li.on a i {transform:rotate(180deg);}
	.mob_menu_box > li > a {font-size:1.6rem; padding:2rem 1.5rem; border-bottom:1px solid #ddd;}
	.mob_menu_box > li.on > a {font-weight:bold; border-bottom:2px solid var(--fontcolor1);}
	.mob_menu_box > li > ul {padding:1rem;}
	.mob_menu_box > li > ul > li > a {font-size:1.6rem; padding:1rem;}
	.mob_menu_box > li > ul > li.on > a {font-weight:bold; color:var(--pointcolor1);}
	.mob_menu_box > li > ul > li > ul {padding:1rem; background:#eef1f5;}
	.mob_menu_box > li > ul > li > ul > li > a {position:relative; font-size:1.5rem; padding:1rem 1rem 1rem 2.5rem;}
	.mob_menu_box > li > ul > li > ul > li > a::after {content:""; display:block; position:absolute; left:1rem; top:17px; width:3px; height:3px; border-radius:50%; background:var(--pointcolor1);}
}
@media screen and (max-width: 1025px){
	#headerUser .wrapper {padding:0 2rem 0 0;}
}
@media screen and (max-width: 769px){
	#mobileBox {width:80vw;}
}
@media screen and (max-width: 481px){
	#mobileBox {width:100%;}
}

/* footer */
#footerUser * {font-size:1.5rem; color:var(--fontcolor5); line-height:1.4; word-break:keep-all;}
#footerUser {width:100%; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem 5rem; padding:4rem 5rem; background:var(--subcolor2);}
#footerUser strong {font-weight:500; color:var(--pointcolor2);}

#footerUser .footer_info {display:flex; flex-direction:column; gap:1.6rem;}
#footerUser .menu {display:flex; flex-wrap:wrap; align-items:center; gap:8px 3rem; margin-bottom:2rem;}
#footerUser .menu a {position:relative;}
#footerUser .menu a ~ a::after {content:""; display:block; position:absolute; left:-1.5rem; top:7px; width:1px; height:10px; background:var(--fontcolor4); opacity:0.6;}

#footerUser .addr {display:flex; flex-direction:column; gap:1.2rem;}
#footerUser .addr address {display:flex; flex-wrap:wrap; gap:6px 4rem;}
#footerUser .addr em {flex:1; display:grid; grid-template-columns:auto 1fr; gap:6px 2rem;}
#footerUser .addr span {display:flex; flex-wrap:wrap; gap:1rem 2rem;}

#footerUser .copy {line-height:1.6; letter-spacing:0.02em;}

@media screen and (max-width: 1200px){
	#footerUser {padding:3rem;}
}
@media screen and (max-width: 1025px){
	#footerUser {padding:3rem 2rem;}
	#footerUser .menu {margin-bottom:1.6rem;}
	#footerUser .footer_logo {display:none;}
}
@media screen and (max-width: 769px){
	#footerUser .addr address {flex-direction:column;}
}
@media screen and (max-width: 481px){
	#footerUser .menu {flex-direction:column; align-items:flex-start;}
	#footerUser .menu a ~ a::after {display:none;}
	
	#footerUser .addr em {grid-template-columns:1fr;}
}

/* 상단으로 이동 */
.go_top {
	position:fixed; right:2rem; bottom:2rem; z-index:5; width:6rem; height:6rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; 
	font-size:1.2rem; color:var(--white); text-align:center; border-radius:50%; background:linear-gradient(60deg, var(--pointcolor2), var(--pointcolor1));
}
.go_top::before {content: ""; position:absolute; width:110%; height:110%; border:1px solid var(--pointcolor1); border-radius:100%;  animation:blink 1s ease-in-out infinite; -webkit-animation:blink 1s linear infinite;}
@keyframes blink {
	0% {
		opacity: 1;
	}
	100% {
		width: 120%; 
		height: 120%;
		opacity: 0;
	}
}

/* subvisual */
#subVisual {position:relative; width:100%; height:36rem; margin-top:-8rem; background:url('../images/common/subVisual.jpg') center center no-repeat; background-size:cover;}
#subVisual::before {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(210deg, rgba(9,111,176,0.5), rgba(0,14,45,0.8));}
#subVisual > div {
	width:100%; max-width:1520px; height:100%; position:relative; z-index:2; display:flex; flex-wrap:wrap; flex-direction:column; 
	justify-content:center; align-items:center; gap:1.6rem; text-align:center; padding:8rem 5rem 0; margin:0 auto; overflow:hidden;
}
#subVisual > div h2 {font-family:var(--fontPre); font-size:5.2rem; font-weight:700; letter-spacing:0.02em; color:var(--white);}

@media screen and (max-width: 1200px){
	#subVisual {height:32rem; margin-top:-6rem;}
	#subVisual > div {padding:6rem 3rem 0;}
	#subVisual > div h2 {font-size:4.8rem;}
}
@media screen and (max-width: 1025px){
	#subVisual {height:28rem;}
	#subVisual > div {padding:6rem 2rem 0;}
	#subVisual > div h2 {font-size:4rem;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* navi-title */
#naviUser {width:100%; display:flex; justify-content:center; align-items:center; gap:5px; font-size:1.6rem; color:rgba(255,255,255,0.6); margin:0 auto; overflow:hidden;}
#naviUser i {font-size:1.8rem;}
#naviUser > span {font-weight:500; color:var(--white);}

#subTitleUser {font-family:var(--fontPre); font-size:3.6rem; font-weight:700; letter-spacing:0.02em; color:var(--black);}

@media screen and (max-width: 1200px){
	#subTitleUser {font-size:3.2rem;}
}
@media screen and (max-width: 1025px){
	#naviUser {font-size:1.5rem;}
	#subTitleUser {font-size:2.8rem;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* sub content */
/* 
#contentUser {max-width:1620px; display:flex; gap:5rem; margin:4rem auto; padding:0 5rem; background:var(--white);}
#contentUser #lnbUser {width:20rem;} 좌측영역-lnb
#contentUser #subLayoutUser {width:calc(100% - 20rem); flex:1; display:flex; flex-direction:column; gap:3rem; min-height:80rem; overflow:hidden;}
*/

#contentUser {max-width:1620px; display:flex; flex-direction:column; gap:0; margin:0 auto; padding:6rem 5rem; background:var(--white);}
#contentUser #lnbUser {width:100%; height:auto;}
#contentUser #subLayoutUser {width:100%; min-height:80rem; display:flex; flex-direction:column; gap:4rem;}

@media screen and (max-width: 1200px){
	#contentUser {padding:5rem 3rem;}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	#contentUser {padding:4rem 3rem;}
	#contentUser #subLayoutUser {gap:3rem;}
}
@media screen and (max-width: 481px){
}

/* lnb */
/* #lnbMenu h2 {
	position:relative; width:100%; display:flex; align-items:center; font-size:2rem; font-weight:bold; color:var(--black);
	padding:2rem 0; border-bottom:1px solid #ccc; background:var(--white); overflow:hidden;
}
#lnbMenu > ul {background:var(--white);}
#lnbMenu > ul > li {border-bottom:1px dashed #ccc;}
#lnbMenu > ul > li:last-child {border-bottom-style:solid;}
#lnbMenu > ul > li > a {position:relative; display:flex; justify-content:space-between; align-items:center; font-size:1.5rem; color:var(--fontcolor1); padding:1.6rem 1.6rem 1.6rem 8px;}
#lnbMenu > ul > li > a::after {
	content:"\f107"; display:block; position:absolute; right:8px; top:54%; transform:translateY(-50%);
	font-family:"Font Awesome 7 Free"; font-size:1rem; font-weight:900; line-height:0; color:var(--fontcolor5);
}
#lnbMenu > ul > li:has(a.on) > a::after {color:var(--maincolor1);}
#lnbMenu > ul > li:has(a.on) {border-bottom:none;} class "on"이 존재하는 경우 border 삭제
#lnbMenu > ul > li > a.on {font-weight:bold; color:var(--maincolor1); border-bottom:2px solid var(--maincolor1);}
#lnbMenu > ul > li:has(.lnb_depth2) > a {border-bottom:1px dashed #ccc;}
#lnbMenu > ul > li:has(.lnb_depth2 a.on) > a {font-weight:bold; color:var(--maincolor1); border-bottom:2px solid var(--maincolor1);} 2depth가 존재하는 경우
#lnbMenu > ul > li > ul {padding:8px 0; background:var(--bgblue);}
#lnbMenu > ul > li > ul > li {position:relative;}
#lnbMenu > ul > li > ul > li a {position:relative; display:flex; align-items:center; font-size:1.4rem; color:var(--fontcolor1); padding:4px 1.2rem 4px 2.2rem;}
#lnbMenu > ul > li > ul > li a::after {content:""; display:block; position:absolute; left:12px; top:12px; width:3px; height:3px; border-radius:50%; background:var(--maincolor1);}
#lnbMenu > ul > li > ul > li a:hover {color:var(--maincolor1);}
#lnbMenu > ul > li > ul > li a.on {color:var(--maincolor1);} */

#lnbMenu {display:none;}

/* mobile lnb */
#mobileSubTab {display:none; width:100%; height:6rem; position:relative; z-index:100; background:var(--subcolor2);}
#mobileSubTab.active {display:block;}

.mobile_sub_tab_inner {width:100%; max-width:1620px; height:100%; position:relative; margin:0 auto; padding:0 5rem;}
.mob_lnb_btn_wrap {width:100%; height:100%; display:flex; border-left:1px solid rgba(255,255,255,0.15); border-right:1px solid rgba(255,255,255,0.15);}
.mob_lnb_btn {
	flex:1; height:100%; display:flex; justify-content:space-between; align-items:center; font-size:1.6rem; font-weight:500; 
	color:var(--white); text-align:left; padding:1.2rem 1.6rem 1.2rem 2rem; white-space:nowrap; overflow:hidden; cursor:pointer;
}
.mob_lnb_btn ~ .mob_lnb_btn {border-left:1px solid rgba(255,255,255,0.15);}
.mob_lnb_btn_name {flex:1;}
.mob_lnb_btn i {flex-shrink:0; font-size:2rem; color:rgba(255,255,255,0.5); transition:transform 0.25s ease;}
.mob_lnb_btn.open i {transform:rotate(180deg);}
 
.mob_lnb_drop {display:none; width:calc(50% - 5rem); position:absolute; top:100%; z-index:200; background:var(--white); box-shadow:0 6px 16px rgba(0,0,0,0.12); animation:mobLnbSlideDown 0.2s ease;}
.mob_lnb_drop.open {display:block;}
 
@keyframes mobLnbSlideDown {
    from {
    	opacity:0;
    	transform:translateY(-6px);
    }
    to {
    	opacity:1;
    	transform:translateY(0);
    }
}
.mob_lnb_drop1 {left:5rem;}
.mob_lnb_drop2 {left:50%;}
 
.mob_lnb_depth {display:block; font-size:1.5rem; color:var(--fontcolor1); padding:1.2rem 1.6rem; border-bottom:1px solid #eee; transition:background 0.15s, color 0.15s;}
.mob_lnb_depth:hover {color:var(--maincolor1);}
.mob_lnb_depth.on {font-weight:500; color:var(--maincolor1); background:var(--subcolor3);}

#mobileTabOverlay {display:none; position:fixed; inset:0; z-index:99; background:transparent;} 외부 클릭 닫기 오버레이
#mobileTabOverlay.open {display:block;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	#mobileSubTab {height:auto;}
	
	.mobile_sub_tab_inner {max-width:100%; padding:0;}
	.mob_lnb_btn_wrap {border-left:none; border-right:none;}
	.mob_lnb_btn {font-size:1.5rem;}
	.mob_lnb_drop {width:50%;}
	.mob_lnb_drop1 {left:0;}
	
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}


/* 사용자UI /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 기기 분석>기기현황 리스트 */
.equip_list {display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem;}
.equip_list li {display:flex; flex-direction:column; gap:4rem; padding:2rem; border-radius:4px; border:1px solid #ccc; background:var(--white); overflow:hidden; transition:all 0.3s;}
.equip_list li * {word-break:keep-all;}
.equip_list li:hover {border:1px solid var(--maincolor1); box-shadow:5px 5px 10px rgba(0,0,0,0.1);}
.equip_list li.nodata {min-height:20rem; grid-column:span 3; justify-content:center; align-items:center; font-size:1.6rem; color:var(--fontcolor1); text-align:center; padding:3rem; border-color:#ddd; background:var(--bggray);}

.equip_list .head {flex:1; display:flex; flex-direction:column; gap:1.5rem;}
.equip_list .head h3 {
	height:50px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; font-size:1.8rem; font-weight:bold; color:var(--fontcolor1); 
	text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-binding:url(ellipsis.xml#ellipsis); overflow:hidden;
}
.equip_list .head p {
	height:68px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; white-space:normal; font-size:1.5rem; color:var(--fontcolor3);
	text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-binding:url(ellipsis.xml#ellipsis); overflow:hidden;
}
.equip_list .buttons {display:flex; flex-wrap:wrap; gap:5px;}
.equip_list .buttons button {flex:1;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.equip_list {grid-template-columns:repeat(2, 1fr);}
	.equip_list li.nodata {grid-column:span 2;}
}
@media screen and (max-width: 769px){
	.equip_list {grid-template-columns:1fr;}
	.equip_list li.nodata {grid-column:span 1;}
	
	.equip_list .head p {height:65px;}
}
@media screen and (max-width: 481px){
}