@import "reset.css";
/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body { font-family: "Noto Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #fff; background: #14161a; }
/* 공통 Content width */
.conWidth { max-width: 1620px; margin: auto; }
/* Header */
header { width: 100%; padding: 2rem 0 2rem 0; }
header .conWidth { display: flex; justify-content: space-between; }
/* Content */
.titGrp { margin-top: 3rem;}
.titGrp h2 { font-size: 2rem; font-weight: bold; letter-spacing: normal; color: #ffffff; } 
.titGrp p { margin-top: 0.75rem; font-size: 1.25rem; font-weight: normal; color: #7c7e81;}
.conGrp { margin-top: 4rem; margin-bottom: 8rem; }
.conGrp ol { display: flex; justify-content: space-between; flex-wrap: wrap; }
.conGrp ol li { width: calc(25% - 1.5rem); cursor: pointer; }
.conGrp ol li a { display: flex; flex-direction: column; text-decoration: none; }
.conGrp ol li img { width: 100%; }
.conGrp ol li .titmvBox { position: relative; /* 애니메이션을 위한 기준 설정 */  padding: 2rem 1.8rem; border-radius: 0px 0px 13px 13px; background: #1d2027; cursor: pointer; }
.conGrp ol li .titmvBox div { display: flex; }
.conGrp ol li .titmvBox div h3 { font-family: "Montserrat"; font-size: 1.35rem; font-weight: bold; letter-spacing: normal; color: #fff;}
.conGrp ol li .titmvBox div img { width: 20px; /* 화살표 크기 조정 */ transition: transform 0.3s, opacity 0.3s; opacity: 0; /* 초기 상태에서 숨김 */ margin-left: 10px; /* 텍스트와 화살표 사이에 간격 추가 */ }
.conGrp ol li .titmvBox p { margin-top: 0.625rem; font-size: 0.92rem; font-weight: normal; line-height: 1.39; letter-spacing: normal; color: #fff; opacity: 0.7;  }
.conGrp ol li a:hover .titmvBox { background: #0f0f0f; transition: all .2s ease-in-out; }
.conGrp ol li a:hover .ico-arr { opacity: 1; /* hover 시 화살표 보이도록 */ transform: translateX(5px); /* 화살표를 오른쪽으로 이동시키는 애니메이션 */ }
.conGrp ol li .titmvBox:hover { background: #0f0f0f; transition: all .2s ease-in-out; }
.conGrp ol li .titmvBox:hover img { opacity: 1; /* hover 시 화살표 보이도록 */ transform: translateX(5px); /* 화살표를 오른쪽으로 이동시키는 애니메이션 */ }
.conGrp ol li a:hover .titmvClr-1 { background: #07B28C; }
.conGrp ol li a:hover .titmvClr-2 { background: #2271C7 ; }
.conGrp ol li a:hover .titmvClr-3 { background: #DB820C; }
.conGrp ol li a:hover .titmvClr-4 { background: #1447BF; }
/* footer */
footer { position: fixed; bottom: 0; left: 0; width: 100%; padding: 1.5rem 0 1.75rem 0; background: #22252b; }
footer .ft_info { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: normal; line-height: 1.57; letter-spacing: normal; color: #8C949D; }

@media all and (max-width:1700px) { 
    .conWidth { max-width: 90%; width: 90%; margin: 0 auto; }
} 
@media all and (max-width:1400px) { 
    .conGrp ol li { width: calc(50% - 1rem); padding-bottom: 2rem; }
} 
/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ 
@media all and (max-width:1279px) { 
} 
/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (max-width:1023px) { 
} 
/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .conGrp ol li { width: 100%; }
    footer .ft_info { flex-direction: column; }
} 
/* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) {
}