html { font-family: "M PLUS 1p", sans-serif; min-width: 500px; }
body { background-color: #161D20; margin: 0px; }

a { text-decoration: none; color: inherit; }
h1, h2, h3, h4 { padding: 0; margin: 0; }
.d-n { display: none; }

header { background-color: #161D20; box-shadow: 0px 0px 3px 0px #FFF; z-index: 9999; position: fixed; width: 100%; }
header > div.top { display: flex; max-width: 1360px; margin: 0px auto; }
header > div.top > div.logo { cursor: pointer; background-image: url("../asset/logo.png"); background-repeat: no-repeat; background-size: contain; width: 400px; height: 80px; }
header > div.top > div.space { flex: 1 1; }
header > div.top > nav { color: #edeff0; padding: 20px 0px; font-size: 12px; letter-spacing: 1px; font-weight: 600; width: 1000px; display: flex; gap: 30px; }
header > div.top > nav > a { flex: 1 1; }
header > div.top > nav > a.active { color: #f46530; }
header > div.top > .burger { cursor: pointer; display: none; color: #edeff0; line-height: 80px; width: 80px; text-align: center; font-size: 28px; }

header > div.top2 { color: #edeff0; }
header > div.top2 > nav > a { display: block; text-align: center; padding: 20px 5px; font-size: 14px; }
header > div.top2 > nav > a.active { color: #f46530; }

@media (min-width: 1281px) {
  header > div.top2 { display: none !important; }
}
@media (max-width: 1280px) {
  header > div.top > nav { display: none; }
  header > div.top > .burger { display: block; }
}

.content { max-width: 1260px; margin: 0px auto; padding: 0px 50px; }

.p_1_1 { min-height: 100vh; background-size: cover; background-position: center; }
.p_1_1 h1 { color: #f46530; width: 50%; font-weight: 900; padding-top: 30vh; }
.p_1_1 h2 { color: #197496; width: 60%; padding: 20px 0px; font-weight: 900; }
.p_1_1 p { color: #edeff0; width: 40%; }
.p_1_1 .bottom { color: #f46530; position: absolute; bottom: 0; width: 100%; text-align: center; padding: 50px 0px;  }

@media (max-width: 1000px) {
  .p_1_1 h1 { width: 85%; padding-top: 20vh; }
  .p_1_1 h2 { width: 85%; }
  .p_1_1 p { width: 80%; }
  .p_1_1 .bottom { display: none; }
}

.p_1_2 .left { display: flex; gap: 150px; padding: 70px 100px; border-bottom: 1px solid #197496; }
.p_1_2 .left .info { flex: 1 1; padding: 40px 0px; }
.p_1_2 .left .info .title { color: #197496; font-weight: 900; }
.p_1_2 .left .info .text { color: #edeff0; padding: 30px 0px; }
.p_1_2 .left .info .button { cursor: pointer; padding: 5px 0px; color: #f46530; border-radius: 20px; border: 1px solid #f46530; text-align: center; }
.p_1_2 .left .info .button:hover { background-color: #f46530; color: #edeff0; }
.p_1_2 .left .img { flex: 1 1; }
.p_1_2 .left .img img { width: 100%; border-radius: 20px; }

.p_1_2 .right { display: flex; gap: 150px; padding: 70px 100px; border-bottom: 1px solid #197496; }
.p_1_2 .right .info { flex: 1 1; padding: 40px 0px; }
.p_1_2 .right .info .title { color: #197496; font-weight: 900; }
.p_1_2 .right .info .text { color: #edeff0; padding: 30px 0px; }
.p_1_2 .right .info .button { cursor: pointer; padding: 5px 0px; color: #f46530; border-radius: 20px; border: 1px solid #f46530; text-align: center; }
.p_1_2 .right .info .button:hover { background-color: #f46530; color: #edeff0; }
.p_1_2 .right .img { flex: 1 1; }
.p_1_2 .right .img img { width: 100%; border-radius: 20px; }

@media (max-width: 1000px) {
  .p_1_2 .left { display: block; gap: 0px; padding: 70px 40px;  }
  .p_1_2 .right { display: block; gap: 0px; padding: 70px 40px;  }
}

.p_1_3 { text-align: center; background-color: #00394D; padding: 70px 0px; }
.p_1_3 .title { color: #f46530; font-size: 28px; font-weight: 900; }
.p_1_3 .text { color: #edeff0; padding-top: 30px; font-size: 13px; }

.p_2_1 { text-align: center; background-color: #D7D7D7; padding: 70px 0px; }
.p_2_1 .title { color: #f46530; font-size: 28px; font-weight: 900; }
.p_2_1 .subtitle { color: #197496; font-size: 24px; font-weight: 900; padding-top: 30px; }
.p_2_1 .text { color: #2A2E30; padding-top: 30px; font-size: 13px; }

.p_2_2 { background-color: #161D20; padding: 70px 0px; }
.p_2_2 h3 { color: #F46530; text-align: center; padding-bottom: 30px; }
.p_2_2 .items { display: flex; gap: 40px; max-width: 800px; margin: 0px auto; margin-top: 40px; }
.p_2_2 .items > div { flex: 1 1; border: 1px solid #0E5068; border-radius: 10px; background-color: #152228; padding: 40px; }
.p_2_2 .items > div h4 { color: #F46530; }
.p_2_2 .items > div p { color: #EDEFF0; font-size: 13px; }

@media (max-width: 1000px) {
  .p_2_2 .items { display: block; }
}

.p_2_3 { background-color: #161D20; padding: 70px 0px; }
.p_2_3 .box { border-radius: 10px; border: 2px solid #F46530; max-width: 450px; margin: 0px auto; padding: 40px; }
.p_2_3 .box h3 { color: #F46530; font-size: 28px; }
.p_2_3 .box p { color: #EDEFF0; font-size: 13px; }

.p_3_1 { background-color: #161D20; padding: 70px 0px; }
.p_3_1 h3 { color: #197496; text-align: center; font-size: 24px; }
.p_3_1 p { color: #edeff0; font-size: 14px; max-width: 800px; margin: 0px auto; margin-top: 30px; }

footer { padding: 70px 0px; color: #edeff0; font-size: 13px; }
footer > div { display: flex; gap: 30px; }
footer > div > div { flex: 1 1; }
footer > div > .logo { background-image: url("../asset/logo.png"); background-position: center; background-size: contain; background-repeat: no-repeat; }

@media (max-width: 1000px) {
  footer > div > .nav { display: none; }
}