* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:"Noto Sans KR", sans-serif;
  overflow-x: hidden;
  font-weight: 400;
}
/* 기본 사용 */

/* Noto Sans KR */
@font-face {
  font-family: 'Noto Sans KR';
  src:  url('../../fonts/NotoSansKR-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans KR';
  src:  url('../../fonts/NotoSansKR-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Medium (500) */
@font-face {
  font-family: 'Noto Sans KR';
  src:url('../../fonts/NotoSansKR-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../../fonts/NotoSansKR-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.goods-view { max-width:600px;
  width:100%; margin:0 auto; padding:16px; font-family:'Noto Sans KR',sans-serif;font-weight: 500; color:#333}

.goods-hero img { width:100%; border-radius:12px; display:block; }

.goods-title { margin:16px 0; font-size:20px; font-weight:bold; }

.goods-info { border:1px solid #ddd; border-radius:8px; overflow:hidden; margin-bottom:20px; }

.info-row { display:flex; border-bottom:1px solid #eee; }
.info-row:last-child { border-bottom:none; }
.info-label { flex:0 0 100px; background:#f5f5f5; padding:10px; font-weight:bold; font-size:14px; }
.info-value { flex:1; padding:10px; font-size:14px; }

.schedule { margin-bottom:20px; }
.schedule h2 { font-size:18px; margin-bottom:10px; }
.schedule-item { border:1px solid #ddd; border-radius:8px; padding:10px; margin-bottom:10px; }
.schedule-item h3 { margin:0 0 6px; font-size:16px; }
.schedule-item p { padding-left: 10px; font-size:14px;color:#444; }
.goods-actions { display:flex; gap:10px; }
.btn { flex:1; text-align:center; padding:12px; border-radius:8px; text-decoration:none; font-weight:bold;transition: background-color 0.3s; }
.btn.primary { background:#333; color:#fff; }
.btn.outline { border:1px solid #333; color:#333; background:#fff; }
.btn:active, .btn_white:active {
  transform: scale(0.96); /* 살짝 눌린 듯 축소 */
}
.btn:active {
  background-color: #1565c0; 
   color: #021B33;
}


/*section*/
section{
  position: relative;
  font-family:'Noto Sans KR', sans-serif;
  font-weight: 500;
  padding:0;
  margin:50px auto;
  align-items: center;
  justify-content: center;
}
section + section {
  margin-top: 100px;    /* 첫 번째 이후 간격 늘리기 */
}
section >.container{
  margin:0 auto;
  align-items: center;
  justify-content: center;
  width:100%;
}
section .left-slide{
  margin:0;
  width:100%;
  padding: 5px 20px;
}

section .line{
width:80%;
background-color: rgb(190, 191, 196);
height: 1px;
margin-top:20px;
margin-bottom: 20px;
}


section .left-slide > .title > h1{
  font-size:1.5em;
  text-transform: capitalize;
  color: #333;
  font-weight: bold;
 
}
section .p{
  font-style: 1em;
  line-height: 1.2;
  font-weight: 500;
  padding:10px;
  color:#444;
}
section button {
  display: block;
  background:#1565c0; 
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  border-radius: 8px;
  margin:10px;
  font-weight:bold;
border:0.5px solid #1488CC;
}

section button:active ,section button:hover{
  background-color: #60a3f1; 
   color: #021B33;
   transform: scale(0.96); 
}


section .right-slide{
  margin:5px auto;
  width:100%;
  font-weight: 500;
  padding:5px;
  
}
section .right-slide>.image{
  width:100%;
  height:100%;
  object-fit: cover;
}
section .left-slide>.image{
  width:100%;
  height:100%;
  object-fit: cover;
}
section .type{
  font-style: 1em;
  line-height: 1.2;
  font-weight: 500;
  padding:10px;
  color:#444;
}
section .type p{
  padding:0 auto;
  overflow-y: hidden;
}




section .line-blue{
  background: linear-gradient(to right,#5c60b0, #1488CC);

}

.section-three{
  padding:10px;
  margin:50px auto;
  position: relative;
  box-sizing: border-box;
  width:100%;

}

.section-three >.container{
position: relative;
margin:100px 0;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.section-three > .container>.card{
  position: relative;
  display: flex;
  background-color: #ecf8fc;
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  width:100%;
  margin:10px 0;
}
.section-three > .container> .right-slide {
font-style: 1rem;
margin:10px 0 100px;
}
.section-three > .container> .right-slide >.p{
  list-style-type: disc;   /* 기본 동그라미 */
  padding-left: 20px;      /* 왼쪽 여백 */
  font-size: 16px;
  line-height: 1.6;
}
.section-three > .container> .right-slide >.p li {
  margin-bottom: 8px;      /* li 간격 */
}
.section-three > .container > .card>.rotation{
  position: relative;   /* absolute 제거 */
  top: auto;
  left: auto;
  transform: none;      /* 가운데 고정 풀기 */
  width: 100%;
  max-width: 300px;
}
.section-three > .container > .card>.img-card{ 
width: 100%;
height:auto;
}

.section-three > .container > .card:hover,.section-three > .container > .card:active,.section-three > .container > .card:focus{
  background: #1488CC;
}
.section-three > .container > .card >.color{
  position: relative; 
  width:100%; 
  bottom: auto;
  text-align: left;
  padding-left: 20px;
  margin: 10px 0 10px;
  font-size: 14px;
}

.section-three > .container >.card:hover .color,
.section-three > .container >.card:active .color{
  color:#fff;
  opacity: 1;
}

.section-port{
  margin: 0 auto;
  padding: 0;
  background: #323c50;
  position: relative;
  width:100%;
  font-family:'Noto Sans KR', sans-serif;
  font-weight: 500;
}
.section-port> .container >h1{
  line-height: 2em;
  text-align: center;
  color:#fff;
  margin-top: 20px;

}
.section-port>.container >p {
  line-height: 1.5em;
  font-style: italic;
  font-size: 1.5em;
  text-align: center;
  color: #8ad9f1;
}

.section-port> .container> .sub {
  max-width: 600px;
  width: 100%;
  margin: 10px auto;
  display: flex;
  flex-direction: column;     /* 이미지 위, 텍스트 아래면 column */
  justify-content: center;    /* 세로 중앙 (높이가 있을 때) */
  align-items: center;   
  
}
.section-port> .sub>.imgBg{
  position: absolute;
  top:50%;
  left: 50%;
  transform:translate(-50%, -50%);
}
.section-port> .container>.sub>.imgBg>img{

max-width:100%;
height:auto;
border-radius: 20px;
}
.section-port> .container>.sub>.strtext{
margin:20px auto;
line-height: 1.5em;
color:#eee;
font-weight: 300;
text-align: center;
}
.section-port> .container>.sub>.strtext>h2{
padding-bottom:30px;
color:#1488CC;

}
.footer{padding:16px;background:#fff;color:#333}
.footer> .foot_title> h1{margin:0 0 6px;font-size:1.5em;font-weight: 500;}
.footer> .foot_title > h2{margin:0 0 10px;font-size:15px;color:#1565c0;font-weight: 400;}

.footer> .tags span{padding-left:0;padding-right:10px;color:#444;line-height:1.2em;font-size:1em;}

.footer> ul.menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;}
.footer> ul.menu > li{
  flex:0 0 50%;   /* 가로 50% = 한 줄에 2개 */
  max-width:50%;
  text-align:left; 
  padding:6px 10px;
  font-size: 14px; 
  font-weight: 400;
  
}