body {
  font-family: 'Montserrat';
}
img {
  vertical-align: bottom; /*4px만큼 아래에 생기는것을 삭제*/
}

/* Menu#1 시작 */
  nav {
    position: fixed;
    width: 100%; top: 0px; z-index: 999;
    background-color: rgba(255, 255, 255, 0.95);
  }
  nav div.navigation {
    max-width: 1100px;
    height: 60px;
    margin: 0 auto; padding: 0 90px;
  }
  nav div.logo1 {
    margin-top: 12px;
    float: left;
  }
  nav div a img {
    height: 36px;
  }
  nav ul {
    float: right;
  }
  nav ul li {
    float: left;
    line-height: 60px;
    margin-left: 54px;
    color: #9a9a9a; font-size: 16px; font-weight: 400; text-align: center;
  }
  nav ul li a:link {color: #9a9a9a; text-decoration: none;}
  nav ul li a:visited {color: #9a9a9a; text-decoration: none;}
  nav ul li a.selected {color: #00A0E9; font-weight: 600;}
  nav ul li a:hover{color: #00A0E9;}
  nav div.icon {display: none;}
/* Menu#1 끝 */

/* Menu#2 시작 : 추후에 보강해서 띄울 것.*/
  .bottomnav {
    position: fixed;
    width: 100%; bottom: 0px; z-index: 999;
    background-color: rgba(255, 255, 255, 0.90);
  }
  .bottomnav div.navigation {
    height: 60px;
    margin: 0 90px;
  }
  .bottomnav ul {
    text-align: center;
  }
  .bottomnav ul li {
    display: inline-block;
    line-height: 60px;
    margin: 0 9px;
    color: #9a9a9a; font-size: 15px; font-weight: 400;
  }
  .bottomnav ul li a:visited {color: #9a9a9a; text-decoration: none;}
  .bottomnav ul li a:link {color: #9a9a9a; text-decoration: none;}
  .bottomnav ul li a.active {color: #00A0E9; font-weight: 600;}
  .bottomnav ul li a:hover{color: #00A0E9;}
/* Menu#2 끝 */

/* Main 시작 */
  #main {
    height: 100vh;
    background-color: #ffffff;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    align-items: center; justify-content: center;
  }
  #main img {
    height: 150px;
  }
/* Main 끝 */

/* Header 시작 */
  #header {
    margin: 0 auto; padding: 0 90px;
    max-width: 1100px; height: 100vh;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    align-items: center; justify-content: center;
    overflow: hidden;
    text-align: center;
  }
  #header .box {
    padding: 60px;
    border: 9px solid;
  }
  #header .box h1 {
    font-size: 48px; font-weight: 600;
  }
  #header .box p {
    margin-top: 30px;
    font-size: 24px; font-weight: 400;
  }
/* Header 끝 */

/* Process 시작 */
  #process {
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    align-items: center;
    max-width: 1100px; height: 100vh;
    margin: 0 auto; padding: 0 90px;
    overflow: hidden;
    text-align: center;
  }
  #process h2 {
    font-size: 48px; font-weight: 600;
  }
  #process p.title {
    margin: 15px auto 30px auto;
    font-size: 24px; font-weight: 400;
  }
  #process .diagram {
    width: 1100px;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    flex-wrap: wrap; justify-content: space-between;
  }
  #process .subpro {
    margin-top: 15px;
    width: 33.3%;
  }
  #process .subpro img {
    width: 270px; height: 270px;
  }
  #process .subpro h3 {
    margin: 15px 0 9px 0;
    font-size: 24px; font-weight: 500;
  }
  #process .subpro p {
    font-size: 18px; font-weight: 300;
  }
/* Process 끝 */

/* Process 시작 */
  #partners {
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    align-items: center;
    max-width: 1100px; height: 100vh;
    margin: 0 auto; padding: 0 90px;
    overflow: hidden;
    text-align: center;
  }
  #partners h2 {
    font-size: 48px; font-weight: 600;
  }
  #partners p.title {
    margin: 15px auto 30px auto;
    font-size: 24px; font-weight: 400;
  }
  #partners .client {
    width: 1100px;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    flex-wrap: wrap; justify-content: space-between;
  }
  #partners .client .clientlogo {
    margin-top: 15px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    width: 24%; height: 60px;
  
  }
  #partners .client .clientlogo img.client1 {height: 42px; margin-top: 9px;}
  #partners .client .clientlogo img.client2 {height: 30px; margin-top: 15px;}
  #partners .client .clientlogo img.client3 {height: 24px; margin-top: 18px;}
  #partners .client .clientlogo img.client4 {height: 30px; margin-top: 15px;}
  #partners .client .clientlogo img.client5 {height: 30px; margin-top: 15px;}
  #partners .client .clientlogo img.client6 {height: 30px; margin-top: 15px;}
  #partners .client .clientlogo img.client7 {height: 39px; margin-top: 12px;}
  #partners .client .clientlogo img.client8 {height: 30px; margin-top: 15px;}
/* Process 끝 */

/* Info 시작 */
  #footer {
    max-width: 1100px;
    margin: 0 auto; padding: 150px 90px;
  }
  #footer .info {
    padding-left: 6px;
  }
  #footer .info img {
    height: 96px;
  }
  #footer .info h3 {
    margin: 15px 0 21px 0;
    font-size: 18px; font-weight: 300; color: #000000;
  }
  #footer .info p.contact {
    font-size: 24px; font-weight: 500;
  }
  #footer .info p.copyright {
    margin-top: 21px;
    font-size: 18px; font-weight: 300;
  }
/* Info 끝 */

/* Section 시작 */
  .section {
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    align-items: center;
    max-width: 1100px; height: 100vh;
    margin: 0 auto; padding: 0 90px;
    overflow: hidden;
  }
  .content {
    width: 100%; height: 480px;
    position: relative;
  }
  .content .text {
    position: absolute; top: 0px;
    width: 420px;
  }
  .content .text h2 {
    font-size: 48px; font-weight: 600;
  }
  .content .text p {
    padding-top: 30px;
    font-size: 18px; font-weight: 400;
  }

/*큰 이미지 설정 부분*/  
  .content .tab {
    position: absolute; right: 0px;
    height: 100%;
  }
  .content .tab img {
    height: 100%;
  }
  .content .tab div {
    display: none;
    position: absolute; right: 0px; bottom: 0px;
    text-align: right;
    width: 100%;
  }
  .content .tab h3 {
    padding: 90px 9px 0 0;
    font-size: 21px; font-weight: 500;
  }
  .content .tab p {
    padding: 3px 9px 9px 0;
    font-size: 15px; font-weight: 300;
  }

/*작은 이미지 설정 부분*/
  .content ul {
    position: absolute; bottom: 0px;
    width: 420px;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    justify-content: space-between;
  }
  .content ul li {
    cursor: pointer;
    position: relative;
    height: 90px;
  }
  .content ul li .overlay {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    height: 100%; width: 100%;
    opacity: 0.7; transition: 0.2s ease;
  }
  .content ul li:hover .overlay, .content ul li.active .overlay {
    opacity: 0;
  }
  .content ul li img {
    width: 90px; height: 90px;
  }
  
  #i1-2, #i1-3, #i1-4, #i2-2, #i2-3, #i2-4, #i3-2, #i3-3, #i3-4,
  #s1-2, #s1-3, #s1-4, #s2-2, #s2-3, #s2-4, #s3-2, #s3-3, #s3-4,
  #p1-2, #p1-3, #p1-4, #p2-2, #p2-3, #p2-4, #p3-2, #p3-3, #p3-4,
  #t1-2, #t1-3, #t1-4, #t2-2, #t2-3, #t2-4, #t3-2, #t3-3, #t3-4{
    display: none;
  }
/* Section 끝 */

.first {
  background-color: #FFFFFF;
  color: #00A0E9;
}
.second {
  background-color: #00A0E9;
  color: #FFFFFF;
}
.third {
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
.fourth {
  background-image: linear-gradient(rgba(0, 160, 233, 0), rgba(0, 160, 233, 1));

}