@charset "UTF-8";

/* #임포트 CSS
================================================== */
@import url("font.css");
@import url("default.css");

/* #로그인
================================================== */
.login-box {
	width: 100%;
	height:100%;
}

.login-box input {
    outline: none;
    border: none
}

.login-box label {
    display: block;
    margin: 0
}

.login-box button {
    outline: none !important;
    border: none;
    background: 0 0
}

.login-box button:hover {
    cursor: pointer
}

.login-box .login-box {
    width: 100%;
    margin: 0 auto
}

.login-box .head-login {
	width: 100%;
	height:23.5rem;
}

.login-box .head-login img {
	width:75%;
	position:relative;
	top:19.6rem;
	z-index:-1;
}

.login-box .container-login {
    width: 100%;
	height:39rem;
	
    background: linear-gradient(-90deg, rgba(0, 0, 0, .02) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px), #f2f2f2;
	background-size: 14px 14px, 14px 14px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
	background-color: #fff;
    display: flex;
	padding:0 2.7rem;
}

.login-box .container-login img {
	max-width:8.3rem;
	margin-top:2rem;
	margin-left:-0.6rem;
}

.login-box .wrap-login {
    position: relative;
	width:100%;
}

.login-box .login-form {
    width: 100%;
	margin-top:3.1rem;
}

.login-box .login-form label.label-login-form {
	font-family: 'Noto Sans M', sans-serif;
    font-weight:bold;
	color:#ec1c4e;
}

.login-box .wrap-input100 {
    width: 100%;
    position: relative;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #ec1c4e 9%,  #bbb 9%);
	background-origin: border-box;
    background-clip: content-box, border-box;
    border-bottom: 0.14em solid transparent;
}

.login-box .input100 {
    font-family:'IBM Plex Sans KR', 'Noto Sans M', sans-serif;
	font-weight:500;
    color: #403866;
    line-height: 1.2;
    font-size: 1rem;
    display: block;
    width: 100%;
    height: 2.3rem;
	margin-top:0.2rem;
    padding: 0.1rem 0.8rem 0 0.3rem;
}

.login-box .focus-input100 {
    position: absolute;
    display: block;
    width: calc(100% + 0.2rem);
    height: calc(100% + 0.2rem);
    top: -0.1rem;
    left: -0.1rem;
    pointer-events: none;
    border: 0.1em solid #ec1c4e;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    -webkit-transform: scaleX(1.1) scaleY(1.3);
    -moz-transform: scaleX(1.1) scaleY(1.3);
    -ms-transform: scaleX(1.1) scaleY(1.3);
    -o-transform: scaleX(1.1) scaleY(1.3);
    transform: scaleX(1.1) scaleY(1.3)
}

.login-box .input100:focus+.focus-input100 {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
	color:#ec1c4e;
}

.login-box .eff-focus-selection {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}

.login-box .input-checkbox100 {
    display: none
}

.login-box .label-checkbox100 {
    font-family:'IBM Plex Sans KR', 'Noto Sans M', sans-serif;
	font-weight:600;
    font-size: 1.1rem;
    color: #999;
    line-height: 1.2;
    display: block;
    position: relative;
    padding-left: 1.8rem;
    cursor: pointer
}

.login-box .label-checkbox100::before {
    content: "✓";
    font-size: 1rem;
    color: transparent;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 0.2rem;
    background: #fff;
    border: 0.16rem solid #ec1c4e;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.login-box .contact100-form-checkbox {
	float:right;
}
.login-box .input-checkbox100:checked+.label-checkbox100::before {
    color: #ec1c4e;
	-webkit-text-stroke: 0.05rem #ec1c4e;
}

.login-box .container-login-form-btn {
    width: 100%;
	margin-top:calc(100% - 18.5rem);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap
}

.login-box .login-form-btn {
    font-family:'GmarketSansBold', 'Noto Sans M', sans-serif;
    font-size: 1.8rem;
	font-weight:bold;
	letter-spacing:0.22rem;
    color: #fff;
    text-transform: uppercase;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.8rem 1.6rem 1.6rem 1.6rem;
    width: 100%;
    height: 4.4rem;
    background-color: #ec1c4e;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s
}

.login-box .login-form-btn:hover {
    background-color: #c00101
}

.login-box .container-login-bottom {
	margin:0 1rem ;
	width:23.6rem;
}

.login-box .alert-validate::before {
    content: attr(data-validate);
    position: absolute;
	top: 40%;
    max-width: 70%;
    background-color: #ec1c4e;
    border-radius: 0.45rem;
    padding: 0.3rem 0.45rem 0.15rem 0.45rem;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0.35rem;
    pointer-events: none;
    font-family:'GmarketSansMedium', 'Noto Sans M', sans-serif;
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    -moz-transition: opacity .4s;
    transition: opacity .4s
}

.login-box .alert-validate::before {
	visibility: visible;
	opacity: 1
}

.login-box .alert-validate:hover:before {
    visibility: visible;
    opacity: 1
}


/* #FA 아이콘
================================================== */

.icon {
	filter: invert(100%);
	position:relative;
	top:-0.1rem;
}

.icon_gray {
	filter: invert(50%);
}

.icon_black {
	filter: none;
}

.icon_red {
	filter: brightness(0) saturate(100%) invert(20%) sepia(84%) saturate(6052%) hue-rotate(338deg) brightness(98%) contrast(89%);
}


/* #기본 프레임 스타일
================================================== */
.frame-box {
	width: 100%;
	height:100%;
}

.frame-box .head-frame {
	width: 100%;
	height:3.4rem;
	padding:0.9rem;
	position:relative;
}

.frame-box .head-frame a {
	color:#fff;
}

.frame-box .head-frame > div {
	width:50%;
	height:100%;
	display:inline-block;
	float:left;
}

.frame-box .head-frame > div.logo > img {
	width:17rem;
	position:relative;
	top:-0.4rem;
	left:-0.93rem;
}

.frame-box .head-frame > div img.icon {
	-webkit-text-stroke: 0.15rem white;
	text-shadow: 0.12em 0.12em 0 rgba(16, 16, 16, 0.70);

}

.frame-box .head-frame > div:last-child i {
	font-size:1.7rem;
	-webkit-text-stroke: 0;
}

.frame-box .container-frame {
    width: 100%;
	height:100%;
	margin-top:2.8rem;
	padding:0;
	background: linear-gradient(-90deg, rgba(0, 0, 0, .02) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px), #f2f2f2;
	background-size: 14px 14px, 14px 14px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
	background-color: #fff;
    display: flex;
}

.frame-box .wrap-frame {
	width:100%;
	height:100vh;
	margin-top:-2.8rem;
    background: linear-gradient(-90deg, rgba(0, 0, 0, .02) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px), #f2f2f2;
	background-size: 14px 14px, 14px 14px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
	background-color: #fff;
    padding:0 1.5rem;
}

.frame-box .wrap-frame .frame-head {
	width:100%;
	margin-top:2rem;
	background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #bbb 91%,  #ec1c4e 91%);
	background-origin: border-box;
    background-clip: content-box, border-box;
    border-bottom: 0.2rem solid transparent;
	height:2.2rem;
}
.frame-box .wrap-frame .frame-head .frame-head-body {
	width:100%;
	height:100%;
	background: linear-gradient(-90deg, rgba(0, 0, 0, .02) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px), #f2f2f2;
	background-size: 14px 14px, 14px 14px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
	background-color: #fff;
}

.frame-box .wrap-frame .frame-head .frame-head-section {
	margin-top:0.5rem;
	width:100%;
	padding:0 0.3rem;
}

.frame-box .wrap-frame .frame-head .frame-head-body h5 {
	font-family:'Noto Sans B', sans-serif;
	color:#000;
	float:left;
}

.frame-box .wrap-frame .frame-head .frame-head-body img {
	height:80%;
	float:right;
	position:relative;
	bottom:-0.1rem;
}



.frame-box .wrap-frame .frame-head .area-line {
	width:100%;
	display:inline-block;
	content:' ';
	height:1rem;
	background-color:#fff;
	border-top:solid 0.15rem #aaa;
	margin-top:1rem;
	padding:0!important;
	
}

.frame-box .wrap-frame .frame-body {
	width:100%;
	margin-top:10.7rem;
	padding:0;
	height:calc(100% - 19.4rem);
	overflow-x:hidden;
	overflow-y:auto;
}

.frame-box .wrap-frame .menu-area {
	margin-top:2rem;
	height:calc(100% - 8rem);
}

.frame-box .wrap-frame .search-area {
	margin-top:9.8rem;
	height:calc(100% - 21rem);
}

.frame-box .wrap-frame .search-area2 {
	margin-top:6.3rem;
	height:calc(100% - 17.5rem);
}

.frame-box .wrap-frame .mold-area {
	margin-top:21.3rem;
	height:calc(100% - 31.3rem);
}

.frame-box .wrap-frame .bt-area {
	margin-top:6.5rem;
	height:calc(100% - 11.8rem);
}

.frame-box .wrap-frame .mold-tag-area {
	margin-top:17.1rem;
	height:calc(100% - 26.9rem);
}

.frame-box .wrap-frame .inventory-area {
	margin-top:6.6rem;
	height:calc(100% - 16.4rem);
}

.frame-box .wrap-frame .frame-body .menu {
	width:12.75rem;
	height:12.75rem;
	display:inline-block;
	margin:0.5rem;
	text-align:center;
	font-family:'Noto Sans B', sans-serif;
	border-radius:.5rem;
	font-size:1.6rem;
	padding-top:3.5rem;
	text-shadow: 0.09em 0.09em 0 rgba(16, 16, 16, 0.30);
}

.frame-box .wrap-frame .frame-body .menu img {
	top:-0.3rem;
	display:block;
	margin:0 auto;
}

.frame-box .wrap-frame .frame-body .card:hover,
.frame-box .wrap-frame .frame-body .card:active {
	outline:0.15rem solid #ec1c4e;
}

.frame-bottom {
    position: fixed;
	bottom:0;
	height:3.6rem;
	width:100%;
}

.frame-bottom section {
	width:100%;
	height:100%;
	background-color:#252726;
}

.frame-bottom div {
	margin:0.72rem;
}

.frame-bottom div button {
	padding:0.3rem 0.8rem 0.3rem 0.8rem;
	font-size:1rem;
}

.frame-bottom div.bottom-btn-left {
	float:left;
}

.frame-bottom div.bottom-btn-right {
	float:right;
	padding-right:0.3rem;
}

.frame-bottom div.bottom-btn-right button {
	margin-left:0.2rem;
}

/* #우측 상단 햄버거 버튼 관련
================================================== */
details {
	position: relative;
	display: inline-block;
	right:0.2rem;
}

details[open] .balloon {
	display: block; /* details가 열릴 때 말풍선 표시 */
}

summary {
	list-style: none;
	cursor: pointer;
	height:1.6rem;
}

.balloon {
	display: none;
	width:7.8rem;
	color:#bbb;
	padding:0.4rem 0.5rem;
	text-align:center;
	position: absolute;
	background-color: #fff;
	border: 0.1rem solid #ccc;
	border-radius: 0.5rem;
	box-shadow: 0.25rem 0.15rem 0.25rem rgba(0, 0, 0, 0.1);
	z-index: 10;
	top: 2.2rem; /* 버튼 바로 아래 */
	right: -0.7rem; /* 버튼 왼쪽 정렬 */
}

.balloon::after {
	content: '';
	position: absolute;
	width:1rem;
	height:1rem;
	top: -0.4rem; /* 말풍선의 위쪽 위치 조정 */
	right: 0.45rem; /* 말풍선의 왼쪽 위치 조정 */
	width: 0;
	height: 0;
	border-left: 0.9rem solid transparent; /* 왼쪽 경계 */
	border-right: 0.9rem solid transparent; /* 오른쪽 경계 */
	border-bottom: 0.7rem solid #fff; /* 아래쪽 경계 (테두리 색상) */
	z-index: -1; /* 배경이 삼각형 뒤에 오도록 설정 */;
}

.balloon div {
	width:100%;
}

.balloon div b {
	font-family:'Noto Sans B', sans-serif;
	font-weight:800;
	color:#ec1c4e;
}

.balloon div:first-child {
	border-bottom:0.15rem solid #eee;
	padding-bottom:0.3rem;
}

.balloon div:last-child {
	padding-top:0.3rem;
}

.balloon a {
	color:#aaa!important;
}

.balloon a i {
	color:#444!important;
	font-size:1.1rem!important;
}

.btn-danger {
	background-color:#ec1c4e!important;
}

/* 체크박스를 화면에서 완전히 숨겨요 */
.hidden-radio {
  display: none;
}

/* block 역할을 할 label의 스타일 */
.bt-block {
    display: block;
    cursor: pointer;
	margin:0 0.4rem 0.4rem 0.4rem;
}

/* 실제 내용물과 배경색이 바뀔 div 스타일 */
.bt-block div {
    display: flex; /* 이미지와 텍스트를 가로로 배열하기 위해 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 10px; /* 이미지와 텍스트 사이 간격 */
    border-radius: 5px; /* 모서리 둥글게 */
    transition: background-color 0.3s ease; /* 배경색 변경 애니메이션 */
	border:1px solid #ddd;
	border-radius:5px;
	padding:4px 8px;
	height:2.65rem;
}


.bt-block div img {
	height:1.5rem;
	filter: brightness(0) saturate(100%) invert(20%) sepia(84%) saturate(6052%) hue-rotate(240deg) brightness(98%) contrast(89%);
}

.bt-block div p {
	font-family:'IBM Plex Sans KR', 'Noto Sans M', sans-serif;
	display:inline-block;
	position:relative;
	top:0.5rem;
	left:-0.4rem;
	font-weight:600;
}

.bt-block div p small {
	font-weight:400;
}


/* 숨겨진 체크박스가 :checked 상태일 때, 그 바로 옆 형제인 .content-to-style div의 배경색 변경 */
/* label 안에 있지만 input 바로 뒤에 오는 형제이므로 + 선택자로 선택 가능 */
input[type="radio"].hidden-radio:checked + div {
	background-color: #0B5ED7; /* 클릭된 상태의 배경색 */
	border:1px solid #466dcf;
	color:#fff;
}

/* 체크된 상태의 div p 태그 글자색 변경 (선택 사항) */
input[type="radio"].hidden-radio:checked + div p {
    color: #fff;
	font-weight:600;
}

input[type="radio"].hidden-radio:checked + div img {
	filter: brightness(100%) brightness(100%) invert(100%) ;
}

.connection_label {
	margin-top:0.5rem;
}