@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=NTR&family=Nanum+Gothic&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=NTR&family=Nanum+Gothic&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

* {
  margin: 0;
  padding: 0;
}

:root {
  --font1: "Nanum Gothic", sans-serif;
  --font2: "Nunito Sans", sans-serif;
  --font3: "NTR", sans-serif;
  --font4: "Amita", serif;

  --color1: #89152cff;
  --color2: #27c097ff;
  --color3: #2f6b5cff;
}

.fsb {
  display: flex;
  justify-content: space-between;
}
.fsa {
  display: flex;
  justify-content: space-around;
}

h1 {
  font-family: var(--font1);
  margin: 0px;
  font-weight: bolder;
  font-size: 30px;
  color: var(--color1);
  letter-spacing: 2px;
  text-align: center;
}
h2,
h3 {
  font-family: var(--font1);
}
a {
  font-family: var(--font2);
  text-decoration: none;
}
span {
  font-family: var(--font3);
}
p {
  font-family: var(--font2);
  font-size: 16px;
  margin: 0px;
  padding: 10px 0px;
  color: #666666ff;
}
.w {
  width: 1200px;
  margin: 0 auto;
}

/* header  */
#d2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#d4 {
  display: flex;
  align-items: center;
}
#s2 {
  padding: 0px 25px;
  color: #000;
}
#s1 {
  font-family: var(--font3);
  font-size: 18px;
  color: black;
}
#i1 {
  width: 388px;
}
.i2 {
  padding: 0px 4px;
  width: 30px;
}
#a2,
#a3,
#a5 {
  font-size: 13px;
  color: white;
  font-weight: bold;
  padding: 13px;
  border-radius: 6px;
}
#a2 {
  background-color: var(--color1);
  margin-right: 3px;
}
#a3 {
  background-color: var(--color3);
  margin-right: 3px;
}
#a5 {
  background-color: grey;
}
#d1 {
  padding: 10px 0px;
}
#d8 {
  display: flex;
  justify-content: space-between;
}
#n1 {
  display: flex;
  background-color: var(--color2);
  margin-top: 5px;
  padding: 0px 12px;
  border-radius: 10px;
  border: 1px solid white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  justify-content: space-evenly;
}
.a4 {
  color: white;
  font-weight: bold;
}
.s3 {
  color: white;
  padding: 0px 15px;
  font-size: 25px;
}
#d7 {
  z-index: 2;
  margin-top: 65px;
}
#hd {
  position: relative;
  top: 0;
  width: 100%;
  z-index: 1000;
}
#d8 {
  position: relative;
  z-index: 1;
}
#d9 {
  position: relative;
  z-index: 2;
}

#i100 {
  width: 30px;
  display: none;
}
#d101 {
  margin-top: 10px;
}
#i10 {
  display: none;
}
.d10 {
  display: flex;
  align-items: center;
}
#a2:hover,
#a3:hover,
#a5:hover {
  background-color: #4fbb10;
}
.a4:hover {
  color: #2f6b5cff;
}
.i2 {
  position: relative;
  overflow: hidden;
}
.i2:hover {
  transform: scale(1.05);
}

.d10 {
  position: relative;
}

.d11 {
  display: none; /* Hide by default */
  position: absolute; /* Position relative to the parent */
  background-color: #27c097ff; /* Dropdown background */
  min-width: 215px; /* Minimum width */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
  z-index: 1; /* Ensure it appears above other content */
  right: -20px;
  top: 53px;
  border-radius: 10px;
  border: 1px solid white;
}

.d11 a {
  color: #000; /* Link color */
  padding: 8px 16px; /* Padding for links */
  text-decoration: none; /* No underline */
  display: block; /* Block layout for each link */
  color: white;
  font-weight: bold;
}

.d11 a:hover {
  color: #2f6b5cff; /* Hover effect for links */
  border-radius: 10px;
}

#d75, #d80{
  display: none;
  position: absolute;
  background-color: #fff;
  width: 1132px;
  z-index: 1;
  top: 55px;
  padding: 20px 30px;
  border-radius: 10px;
  border-left: 2px solid  var(--color3);
  border-right: 2px solid  var(--color3);
  border-bottom: 2px solid  var(--color3);
}
#d75{
  left: -80px;
}
#d80{
  left: -600px;
}

.s75:hover{
  color: var(--color2);
} 

.d10:hover #d75 , .d10:hover #d80{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
}

.a75{
  display: flex;
  width: 22%;
  align-items: center;
  padding: 9px 0;
}
.s75 {
  line-height: 1;
  color: #383838;;
}
.i75{
  height: 25px;
  width: 25px;
  margin-right: 8px;
}

/* Show the dropdown content when hovering over the MORE link or its parent container */
.d10:hover .d11 {
  display: block;
  /* border-radius: 10px; */
}

/* footer  */
#d11 {
  display: flex;
  justify-content: space-between;
  padding: 25px 0px;
}
#ft {
  background-color: var(--color3);
  margin-top: 20px;
}
.hh1 {
  font-family: var(--font1);
  color: var(--color2);
  font-size: 18px;
  font-weight: normal;
}
.a6 {
  color: white;
  font-weight: normal;
  font-size: 14px;
}
.a6:hover {
  font-weight: bold;
}

.li1 {
  padding: 4px 0px;
  color: yellow;
}
.u1 {
  margin-top: 20px;
  margin-left: 15px;
}
.d14 {
  display: flex;
  margin-bottom: 5px;
}
.hhh1 {
  font-family: var(--font1);
  margin-left: 10px;
  color: var(--color2);
  font-weight: normal;
  font-size: 16px;
}
.s10 {
  font-size: 14px;
  color: white;
  margin-left: 30px;
  font-family: var(--font1);
  margin-top: 10px;
  font-weight: normal;
  margin-top: 10px;
}
.d13 {
  margin-bottom: 20px;
}
#d20 {
  margin-top: 30px;
}

#ad1 {
  font-family: var(--font1);
  font-size: 14px;
  color: white;
  margin-left: 30px;
  margin-top: 5px;
  font-weight: normal;
  line-height: 1.5;
  font-style: normal;
}
.d12 {
  width: 18%;
}
#s5 {
  color: white;
  cursor: pointer;
  font-family: var(--font1);
  padding-bottom: 20px;
  font-size: 12px;
}
#d15 {
  text-align: end;
}
#i11 {
  width: 40px;
  margin-right: 10px;
  cursor: pointer;
}

/* responsive  */

@media screen and (max-width: 1240px) {
  .w {
    width: 96%;
    padding: 0 2%;
  }

  /* header  */
  #d4 {
    flex-direction: column;
    text-align: center;
  }
  #s2 {
    display: none;
  }
  #n1 {
    display: block;
    width: fit-content;
    padding: 22px 0;
  }
  .s3 {
    display: none;
  }
  .d10 {
    padding: 8px 50px;
  }
  /* #d101 {display: none;} */
  #d9 {
    position: absolute;
    display: none;
  }
  #i100 {
    display: block;
  }
  #d100 {
    margin-top: 15px;
  }

  /* footer  */
  #d11 {
    flex-wrap: wrap;
  }
  .d12 {
    width: 33%;
    padding: 15px 0px;
  }
  #d11 {
    padding: 20px 0px;
    justify-content: start;
  }

  #i11 {
    margin-right: 50px;
  }
  #s5 {
    margin-right: 40px;
  }
  .d11 {
    left: -14px;
    top: 38px;
    width: 20%;
  }
  #d75 , #d80 {
    border-top: 2px solid  var(--color3);
    width: 678px;
    top: 0;
    left: 217px;
    padding: 20px 18px;
  }
  .a75 {
    width: 31%;
  }
}
@media screen and (max-width: 950px) {
  .d12 {
    width: 50%;
  }
  .a75 {
    width: 46%;
  }
  #d75 , #d80 {
    width: 560px;
  }
}
@media screen and (max-width: 850px) {
  .d12 {
    width: 50%;
  }
  #d75, #d80 {
    width: 480px;
  }
}
@media screen and (max-width: 750px) {
  /* header  */
  /* #i1 {width: 100%;} */
  #d4 {
    margin-top: 20px;
  }
  #d2 {
    flex-direction: column;
  }
  #d7 {
    margin-top: 50px;
  }
  #d5 {
    display: none;
  }
  #d6 {
    margin-top: 20px;
  }
  #i10 {
    display: block;
  }
  #d6 {
    display: flex;
  }
  #a2,
  #a3 {
    font-size: 13px;
  }
  #d100 {
    margin-top: 15px;
  }
  #n1 {
    padding: 22px 45px;
  }
  #d75, #d80 {
    width: 290px;
  }
  .a75 {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .d12 {
    width: 100%;
  }
  #d11 {
    padding: 20px 0px;
  }
  #i100 {
    width: 25px;
  }
  #d15 {
    text-align: center;
  }
  #i11 {
    margin-right: 1px;
  }
  #s5 {
    margin-right: 0px;
  }
  #a2,
  #a3,
  #a5 {
    padding: 8px;
  }
  #d11 {
    text-align: center;
  }
  .li1 {
    list-style: none;
  }
  .u1 {
    margin-left: 0px;
  }
  .d14 {
    justify-content: center;
    margin-bottom: 20px;
  }
  .s10 {
    margin-left: 0px;
    margin-top: 10px;
  }
  #ad1 {
    margin-left: 0px;
    margin-top: 20px;
  }
  /* #d7 {margin-top: 26px;} */
  /* .i3 {margin-right: 10px;} */
  /* #d100 {margin-top: 4px;} */
  #d75, #d80 {
    width: 280px;
    top: 42px;
    left: -45px;
  }
}
@media screen and (max-width: 400px) {
  #i1 {
    width: 300px;
  }
  #d4 {
    margin-top: 8px;
  }
  #d7 {
    margin-top: 33px;
  }
  #n1 {
    width: auto;
  }
  #d8 {
    flex-direction: column-reverse;
  }
  /* #d101 {text-align: center;}
    #a2, #a3, #a5 {margin: 0px 25px;} */
  #a2,
  #a3,
  #a5 {
    margin-right: 0px;
    font-size: 12px;
    padding: 7px;
  }
  #d101 {
    text-align: center;
  }
  #d101 {
    margin-top: 7px;
  }
  #d100 {
    margin-top: 20px;
    margin-left: 20px;
  }
  .d11 {
    width: 50%;
  }
}