@font-face {
  font-family: "Noto Sans KR Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../font/Noto_Sans_KR/NotoSansKR-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Noto Sans KR Bold";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../font/Noto_Sans_KR/NotoSansKR-Bold.otf") format("opentype");
}

*{
  font-family: 'Noto Sans KR Regular';
}

a{
	text-decoration : none;
	color : black;
}

body{
	background : #e0ddd5;
}

th{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 5px;
  width: 50px;
}

table{
  font-size: 17px;
}


.subHeader{
	display : grid;
  grid-template-columns: 1fr 1fr 1fr;
	width : 96vw;
  margin: auto;
  padding-top: 50px;
  padding-bottom: 30px;
}

.headerLeft{
	display : flex;
	flex-direction : row;
	align-items : center;
	justify-content : flex-start;
	margin-left: 5vw;
	gap : 10px;
}

.toWeekMain{
	width : 50px; height : 50px; background-color: pink; border-radius : 50%;
	display: flex;
    align-items: center;
    justify-content: center;
}
.toShpMainLinkBox span{
    font-family: "Noto Sans KR Regular", sans-serif;
    padding-left: 8px;
    padding-right: 16px;
    font-weight : normal;
}

.hafRectangle{
	border-bottom: 2px solid white;
    border-left: 2px solid white;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    margin-left: 10px;
}

.emptySpace{
  padding-top: 150px;
}

.centerImgBox{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.leftLinkBox{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-right: 5vw;
}


.toShpMainLinkBox{
  height: 42px;
    border: 2px solid #ce90b8;
    border-radius: 8px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 18px;
    color: #3476ff;
    font-weight : bold;
}

.subContents{
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-start;
  justify-content: center;
  background-color: rgb(224, 221, 213);
  width: 96vw;
  margin: auto;
}

.subContentsLeftBox, .subContentsRightBox{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.contentsUnderLine{
  border: 0;
  height: 1px;
  background-color: #ce90b8;
}

.contentBox {
  background-color: white;
  border-radius: 10px;
  width: 45vw;
  height: fit-content;
  padding-bottom : 20px;
  display: flex;
  flex-direction: row;
  margin-bottom: 4vw;
  margin-top : 4vw;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;              /* 처음엔 안 보임 */
  transform: translateY(50px); /* 살짝 아래 위치 */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.contentBox.show {
  opacity: 1;
  transform: translateY(0); /* 원래 위치 */
}


.contentTitle{
  font-size: 1.5vw;
  display: flex;
  justify-content: flex-start;
  padding: 5px;
  padding-top : 20px;
  color : #4465a1;
  font-family: 'Noto Sans KR Bold';
  flex-direction : column;
}

.contentLeft {
  width: 45%;
  padding: 20px;
  padding-top : 25px;
  box-sizing: border-box; /* border와 margin 포함 계산 */
  min-width: 350px;
}

.contentLeft .contentImage {
  width: 100%;       /* 부모의 너비에 맞춤 */
  height: auto;      /* 비율 유지 */
  display: block;    /* inline-block 특성 제거 → 여백 방지 */
  border-radius: 15px;
}
.contentInfo{
  margin: auto;
  padding: 5px;
}

.linkBtn{
 	border: #ce90b8 1px solid;
	border-radius: 5px;
    padding: 5px;
    top: 25px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition : all 0.3s ease;
    margin : auto;
}

.linkBtn:hover {
	color : white;
	background : #4465a1;
}

.linkBtn a{
  color: black;
  text-decoration: none;
  width: 100%;
  height: 100%;
  transition : all 0.3s ease;
  text-align: center;
  font-size: 0.9vw;
}

.linkBtn a:hover{
	color : white;
}

.headerLeft a div > div:last-child {
  font-size: 1.2vw;
  text-decoration: underline;
  color: #636363;
  margin-left : 10px;
}

.showContentAt1500{
  display : none;
}

@media(max-width : 1500px){
	
  .showContentAt1500{
    display: flex;
    margin : auto;
    width: 92vw;
  }

  .hideContentAt1500{
    display : none;
  }
	.subContentsLeftBox, .subContentsRightBox{
		align-items : center;
	}
	.contentBox{
        flex-direction: row;
        justify-content: center;
        align-items: center;
width : 90vw;
	}
	
	table{
		font-size : 15px;
	}
	
	th{
		font-size : 17px;
	}
	
	.linkBtn a{
		font-size : 15px;
	}

  .contentTitle{
    font-size : 20px;
  }

}


/* 태블릿 */
@media(max-width : 1400px){
	
	.contentTitle{
		font-size : 23px;
	}
	
	.subHeader {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 96vw;
        margin: auto;
        padding-top: 50px;
        padding-bottom: 30px;
    }
    
    .leftLinkBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin-left: 5vw;
	}

}

/* 모바일 */
@media(max-width : 800px){
	
	
	.contentBox > div{
		align-items : center;
		width : 100%;
	}
	
	table{
		fonst-size: 13px;
	}
	
		.subHeader {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    	.contentTitle {
	    font-size: 5vw;
  	}

}