@charset "euc-kr";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
img {border:0px;}
*{font-family: 'Pretendard-Regular' !important;}
body {margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;}
body, td, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, textarea{font-family:Nanum Gothic, sans-serif; font-size:9.5pt;  -webkit-text-size-adjust:none;}

/* main */
.main {width:100%; height:783px; background-color:#fbfbfb; border-bottom:3px solid #b6b6b6;}
.m1 {float:left; margin-left:-750px; left:50%; position:absolute; z-index:1;} /* img rolling */
.m2 {position:relative; width:1100px; z-index:2; color:#fff; font-size:30pt; top:70px; line-height:20px; line-height: 200%; font-weight: bold;} /* txt */
.m2 b {font-size:50px;}
.m2 span {font-size:50px; font-weight:bold;}
.m3 {position:relative; width:100%; z-index:3; top:120px;} /* quick */
.m4 {position:relative; width:100%; height:175px; z-index:100; top:242px; clear:both; background:url(../images/m4bg.png) left top repeat;}

#banner1 {width:1100px;}
#banner1 a div {float:left; border:3px solid #fff; color:#fff; font-size:17pt; width:286px; line-height:87px; margin-left:60px; cursor:pointer; text-decoration:none; transition: 0.3s;}
#banner1 a div:hover{background-color: rgba(24, 61, 80, 0.5); /* 투명도 80% */ transform: scale(1.1);}
.banner2 td {color:#7e8d95; padding:20px; vertical-align:top;}
#botit, #botit a {color:#bcc2c6; font-size:14pt; font-weight:bold; margin-bottom:10px; text-decoration:none;}

.tel div {float:left; color: #fff;}
.tel .number {padding-left:20px; color:#fff; font-size:10pt;}
.tel .number b {font-size:18pt; letter-spacing:2;}

#more {border-top:1px solid #7e8d95; color:#7e8d95; text-decoration:none; width:100%; display:inline-block; clear:both; margin-top:30px; padding-right:15px; text-align:right; cursor:pointer; background:url(../images/btn-more.jpg) right 5px no-repeat;}


/* sub from */
.subtop {color:#fff; font-size:12pt; text-align:center; height:130px; background:url(../images/subtop.jpg) center top no-repeat #fbfbfb;}
.sp20{height: 20px;}
.copy {padding:30px 0px 30px 30px; text-align: left; color: #333; font-size: 16px; line-height: 180%; background: #f8f8f8;}
.copy b{font-size: 20px;}
.copy .bc{color: #ff4003;}
.bigtitle {color:#b9b9b9; font-size:8pt; padding:25px 0px 25px 0px;}
.bigtitle b{color:#1f1f1f; font-size:17pt; font-weight:bold; letter-spacing:-1px; }


/* menu */
#topbn a {font-size:8pt; color:#ffffff; font-weight:bold; line-height:25px; background-color:#183d50; padding:10px; text-decoration:none;}

#topmenu a {font-size:12pt; color:#666; font-weight:bold; padding:0px 0px 0px 60px; text-decoration:none; line-height:90px;}
#topmenu a:hover {color:#183d50;}

#menu a {color:#585858; font-size:11pt; background:url(../images/smbg.jpg) left 50% no-repeat; text-decoration:none; width:200px; line-height:32px; float:left;}
#menu a:hover {color:#1f1f1f; background:url(../images/smbg-on.jpg) left 50% no-repeat; font-weight:bold;}



/* sub content */
.con, .con td, .con div {font-size:11pt; line-height:160%; color:#525252;}
.con .con2 {text-align:justify;}

.con .bar {width:80px; height:50px; border-bottom:3px solid #1e1e1e; margin-bottom:50px;}

.con .btxt {color:#424242; font-size:16pt; line-height:140%;}
.con .btxt b {color:#1e1e1e; font-size:30pt; line-height:140%;}
.con .mtxt {font-size:13pt;}

.con .sign {color:#a1a1a1; font-size:10pt; text-align:right;}
.con .sign b {color:#575757; font-size:20pt;}

.con .color1 {color:#1e1e1e;} /* black */
.con .color2 {color:#183d50;} /* blue */

<style media="screen">
.container {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background: white;
  padding: 20px;
  border-radius: 8px;
}

.container h1.title {
  text-align: center;
  color: #183d50;
  font-size: 25px;
}

.container h2.subtitle {
  border-bottom: 2px solid #183d50;
  padding-bottom: 5px;
  color: #183d50;
  font-size: 18px;
}

.container h3.subheading {
  color: #27566b;
  font-size: 17px;
}

.section {
  margin-bottom: 20px;
  padding: 15px;
  background: #eef3f7;
  border-radius: 5px;
}
.section p{font-size: 15px !important;}
.container ul, ol {
  padding-left: 20px;
}

.container ul li, ol li {
  margin-bottom: 5px;
  font-size: 15px;
}

.request-button {
  display: block;
  width: 100%;
  max-width: 200px;
  padding: 10px;
  background: #183d50;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, opacity 0.2s;
}

.request-button:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
.process-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.process-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 220px;
    text-align: center;
}

.process-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.process-card p {
    font-size: 14px;
    color: #555;
}
.section .container h1.title{margin-bottom: 10px;}
.button-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    list-style-type: none;
    padding: 0;
}

.download-button {
    padding: 10px;
    background: #183d50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, opacity 0.2s;
    width: auto;
}

.download-button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}
</style>