/*
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
*/
@import url('./font.css');

*{
    margin:0;
    padding:0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-style: normal;  
}
:root {
    --primary-color: #000;
    --sub-color: #4f4f4f;
    --act-color: #0B30E1;
    --line-color: #e4e4e4;
    --act-sub-color: #5C79FF;
    --primary-bg-color: #f4f4f4;
}

body, html{
    font-size: 62.5%;
    height: 100%; /*최대높이설정*/
    overflow: auto;
	font-family: 'Noto Sans KR';
}
.container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    /* background: blueviolet; */
}
header, section, footer{
    max-width: 113rem;
}

/*header*/
header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;    
    padding: 2rem .5rem;
    gap: 1rem;
	position: relative;  
}
.logo a{
    font-size: 1.6rem;
    letter-spacing: -.1rem;
    font-weight: 500;
    vertical-align: middle;
	color: var(--primary-color);
}
.logo::before{
    content: '';
    background: url(../img/logo.png) no-repeat center center;
    background-size: contain;
    width: 2.6rem;
    height: 2.6rem;
    vertical-align:middle;
    margin-right: .5rem;
    display: inline-block;
    position: relative;
    top:.1rem;
	left: 0;
}
.nav-menu{
	padding: 0 15px;
}
.menu > .menu-item{
	display: inline-block;
	margin-left: 30px;
	position: relative;
}
.menu > .menu-item > a{
	display: block;
	padding: 12px 0;
	font-size: 1.5rem;
	color: var(--sub-color);
	/* text-transform: capitalize; */
	font-weight: 600;
	letter-spacing: -1px;
	transition: all 0.3s ease;
}

.triangle-down {
    display: inline-block;
	position: relative;
	top: -2px;
	margin-left:5px; 
	pointer-events: none;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--sub-color);
    transition: all 0.3s ease;
}

.menu > .menu-item:hover .triangle-down{
    transform: rotate(180deg);
	border-top: 6px solid rgb(70, 144, 255);
}
.menu > .menu-item > .sub-menu{
	box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.1);
	width: 130px;
	position: absolute;
	left:-35px;
	top:100%;
	background-color: #ffffff;
	padding: 10px 0;
	border: 1px solid rgb(70, 144, 255);
	border-radius: 6px;
	transform: translateY(10px);
	transition: all 0.3s ease;
	opacity:0;
	visibility: hidden;
	/* display: none; */
	z-index: 99;
}

.menu > .menu-item-has-children:hover > .sub-menu{
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	/* display: block; */
}
.menu > .menu-item > .sub-menu > .menu-item > a:hover,
.menu > .menu-item:hover > a{
	/* color: #e91e63; */
	color: var(--act-sub-color);
    font-weight: 600;
}

.menu > .menu-item > .sub-menu > .menu-item{
	display: block;
}
.menu > .menu-item > .sub-menu > .menu-item > a{
	display: block;
	padding: 10px 40px 10px 40px;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -1px;
	color: var(--sub-color);
	transition: all 0.3s ease;
}
.open-nav-menu{
	height: 34px;
	width: 40px;
	margin-right: .5rem;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.open-nav-menu span{
	display: block;
	height: 3px;
	width: 24px;
	background-color: #000000;
    position: relative;
}
.open-nav-menu span:before, .open-nav-menu span:after{
	content: '';
	position: absolute;
	left:0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	box-sizing: border-box;
}
.open-nav-menu span:before{
	top:-7px;
}
.open-nav-menu span:after{
	top:7px;
}
.close-nav-menu{
	margin:0 .5rem;
	cursor: pointer;
    display: none;   
}
.close-nav-menu img{
	width: 4rem;
}
.menu-overlay{
	position: fixed;
	z-index: 200;
	background-color: rgba(0,0,0,0.4);
	left:0;
	top:0;
	height: 100%;
	width: 100%;
	visibility: hidden;
	opacity:0;
	transition: all 0.3s ease;
}
.login{    
    font-size: 1.4rem;
    letter-spacing: -.1rem;
    color: var(--sub-color);
    font-weight: 400;
    z-index: 300;
	cursor: pointer;
}
.login > img{
    display: inline-block;
    width: 1.5rem;
    vertical-align: middle;
    position: relative;
    top: -.2rem;
    margin-right: 1rem;
}
.content{
    width: 100%;
    flex-grow: 1;
    /* background: coral; */
}
.title{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
    height:18.5rem;
	padding: 0 .5rem;
	background: #f4f4f4;
}
.title-txt{
	display: flex;
	align-items: center;
	gap: 2rem;
	width: 113rem;
}
.title-txt h2{
	font-size: 6.2rem;
	letter-spacing: -.5rem;
}
.title-txt p{
	font-size: 1.4rem;
	margin-top: 2.5rem;
}

/* 컨텐츠외곽 */
.content.wrap{
    display: flex;
    justify-content: center;
	flex-direction: column;
    align-items:flex-start;
    gap: 1rem;
    max-width: 113rem;
    margin: 0 auto;
    position: relative;
	padding: 0 .5rem;
}

/* 타이틀아래 서브메뉴 */
.nav-submenu{
	margin: 6rem 0;
	width: 100%;
	height: 4.5rem;
    border-radius: 1rem;
    border: 1px solid var(--line-color);
    display: flex;
	align-items: center;

}
.nav-submenu ul{
	width: 100%;
	display: flex;
	align-items: center;
}
.nav-submenu ul li{
	height: 4.5rem;
	width: 100%;
    /* width: calc(100%/4); */
	text-align: center;    
    border-right: 1px solid var(--line-color);
    display: flex;
	align-items: center;
	justify-content: center;
}
.nav-submenu ul li a{
	color: var(--sub-color);
	font-size: 1.5rem;
	letter-spacing: -.1rem;
}
.nav-submenu ul li:first-child{
    border-radius: 1rem 0 0 1rem;
}

.nav-submenu ul li:last-child{
    border-right: 0;
	border-radius: 0 1rem 1rem 0;
}
.nav-submenu ul li.active {	
	background: var(--act-color);
}
.nav-submenu ul li.active a{
	color: var(--primary-bg-color);
	font-weight: 600;
}

/* 버튼류 */
.bigBtn{
	display: inline-block;
	padding: 2rem 4rem;
	font-size: 2rem;
	font-weight: 500;
	border-radius: .8rem;
	letter-spacing: -.1rem;
	background: var(--act-sub-color);
	color:var(--primary-bg-color);
	margin-top: 3rem;
	margin-bottom:6rem;
	cursor: pointer;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.registrationBtn{
	display: inline-block;
	padding: 2rem 2rem;
	font-size: 2rem;
	border-radius: .8rem;
	letter-spacing: -.1rem;
	margin: 3rem 0;
	cursor: pointer;
}
.registrationBtn.ok{
	background: var(--act-sub-color);
	color:var(--primary-bg-color);
}
.registrationBtn.cancel{
	border: 1px solid #C4C4C4;
	color: #7c7c7c;
}

/* footer */
.foot{    
    width: 100%;
    height: 13.5rem;
    background: #555;
}
.foot.wrap{
    display: flex;
    justify-content: space-between;
    align-items:center;
    gap: 1rem;
    max-width: 113rem;
    margin: 0 auto;
    position: relative;
	padding: 0 .5rem;
    /* background: rgb(7, 190, 16); */
}
.foot > div > .logo > p{
	font-size: 1.4rem;
    display: inline-block;
	vertical-align: middle;
    color: var(--primary-bg-color);
}
.foot-logo-txt{
	display: inline-block;
    font-size: 1.2rem;
    font-weight: 300;
    margin-top: .5rem;
    padding-left: 3rem;
    letter-spacing: -.03rem;
	color: #ccc;
}
.foot-right{
    display: flex;
    justify-content: space-between;
    align-items:center;
    gap: .5rem;
}
.copyright{
    font-family: 'Roboto', sans-serif;
}
.copyright-txt{
    font-size: 1.2rem;
    color: #ccc;
}
.copyright p{
    display: inline-block;
    padding: .8rem 2rem .8rem 0;    
}

/* 스크롤 */
textarea::-webkit-scrollbar, .accounts-wrap-list::-webkit-scrollbar, .list-wrap::-webkit-scrollbar{
	/* 스크롤바 전체폭을 설정 */
    width: 16px;
    height: 16px;
    background-clip: padding-box;
    border: 8px solid transparent;
}
textarea::-webkit-scrollbar-thumb, .accounts-wrap-list::-webkit-scrollbar-thumb, .list-wrap::-webkit-scrollbar-thumb{
    border-radius: 8px;
	background: #aabaff;
    background-clip: padding-box;
    border: 5px solid transparent;
	/* 버튼의 보이는크기조절부 */
}
textarea::-webkit-scrollbar-track, .accounts-wrap-list::-webkit-scrollbar-track, .list-wrap::-webkit-scrollbar-track{
    background-color: #e4e4e4;
    background-clip: padding-box;
    border: 7px solid transparent;
	/* 트랙의 폭조절(좌우투명선으로 줄임) */
}

/* responsive */
/*header */
@media(max-width: 1025px){
	.menu-overlay.active{
		visibility: visible;
		opacity: 1;
	}
	.menu-overlay.active ~ .open-nav-menu{
		display:none;
	}
    .login{
        position: absolute;
        top: 1.7rem;
        left: -12rem;
        color: var(--sub-color);
		transition: all 0.5s ease;      
        visibility: hidden;
    }
	.nav-menu.open ~ .login{
		left: 12rem;
		visibility: visible;
	}
	header > .close-nav-menu{
		display: none;
	}
	.nav-menu{
		position: fixed;
		left: -31rem;
		visibility: hidden;
		width: 31rem;
		height: 100%;
		top:0;
		overflow-y: auto;
		background-color: #f4f4f4;
		z-index: 3000;
		padding: 5rem 0 1rem 0;
		transition: all 0.5s ease;
        box-shadow: 0 0 1rem 1.5rem rgba(0,0,0,0.1);
	}
	.nav-menu.open ~ .close-nav-menu{
		display: block;
	}
	.nav-menu.open{
		visibility: visible;
		left: 0px;
	}
	.menu > .menu-item{
		display: block;
		margin:0;
	}
	.menu > .menu-item-has-children > a{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.menu > .menu-item > a{
		color: var(--primary-color);
		padding: 1.5rem 1.5rem 1.5rem 3rem;
		border-bottom: 1px solid #e4e4e4;
	}
	.menu > .menu-item:first-child > a{
	    border-top: 1px solid #e4e4e4;	
	}
	.triangle-down {
		border-top: 6px solid var(--sub-color);
	}
	.menu > .menu-item:hover .triangle-down{
		border-top: 6px solid var(--act-sub-color);
	}	
	.menu > .menu-item > .sub-menu{
		width: 100%;
		position: relative;
		opacity: 1;
		visibility: visible;
		border:none;
		background-color: transparent;
		box-shadow: none;
		transform: translateY(0px);
		padding: 0px;
		left: auto;
		top:auto;
		max-height: 0;
        border-radius: 0;
		overflow: hidden;
	}
	.menu > .menu-item > .sub-menu > .menu-item > a{
		padding: 1.2rem 1.2rem 1.2rem 6rem;
		color: var(--sub-color);
        background: #fff;     
		border-bottom: 1px solid #e4e4e4;
	}
	.close-nav-menu, .open-nav-menu{
		display: flex;
        position: absolute;
        top: 1.6rem;
		right:.3rem;     
        z-index: 300;
	}	

	/* 상단타이틀 */
	.content{
		padding: 0 1.5rem;
	}
	.title{
		width: 100%;
		height:auto;
		padding: 2.3rem 2rem;
		border-radius: 1rem;
		background: #f4f4f4;
	}
	.title-txt{
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.title-txt h2{
		font-size: 3.6rem;
		letter-spacing: -.2rem;
	}
	.title-txt p{
		font-size: 1.4rem;
		letter-spacing: -.1rem;
		margin-top: 0;
	}	
	/* footer */
	.foot{
		height: 8.5rem;
	}
	.foot.wrap .foot-right{
		display: none;
	}
	.logo::before{
		width: 1.6rem;
		height: 1.6rem;
		margin-left: 1rem;
	}
	.foot.wrap > div{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.foot-logo-txt{
		padding-left: 0;
	}
}

@media(max-width: 768px){
	.title-txt h2{
		font-size: 2.4rem;		
	}
	.title-txt p{
		font-size: 1.3rem;
		letter-spacing: -.1rem;		
	}
	.nav-submenu{
		margin: 6vw 0;
	}
	.nav-submenu ul li a{
		font-size: 1.4rem;
	}
	.content.wrap{
		padding: 0;
	}	
}