@font-face {
    font-family: 'ptr';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
  font-family: 'ptsb';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'ptb';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}



* { margin:0; padding:0; }
li { list-style:none; }
img { vertical-align: top; object-fit: cover; }
a { text-decoration: none; color:inherit; cursor: pointer;}

body { font-family: ptr; font-size:16px; color:#333; }

.wrap { max-width: 94%; margin:0 auto; position: relative; width: 1200px; }

#w_header { height: 80px; background: rgba(255,255,255,.9); position: fixed; left: 0; top: 0; width: 100%; z-index: 100; }
#w_header img { height: 80px; }
#w_header ul { line-height:80px; position: absolute; right: 0; top: 0; }
#w_header ul li { margin-left: 40px; float:left; }
#w_header #nav_btn { display: none; }

section { background:url(https://smartpowerful.co.kr/images/bg_intro.png) no-repeat center/cover;  }
section .wrap { height: calc(100vh - 111px); display: flex; flex-direction:column; align-items: flex-start; justify-content: center; color:#fff; box-sizing: border-box; }
section p { font-size:18px; }
section h2 { font-size:56px; font-weight: 900; margin-top: 20px; font-family: ptb; }
section ul { margin-top: 40px; }
section ul li { float:left; margin-right: 10px; }
section ul li a {cursor: pointer; display:flex; align-items: center; justify-content: center; width: 240px; height: 54px; border:2px solid #fff; border-radius: 100px; font-size:18px; transition:0.3s; font-family: ptsb; }
section ul li a:hover { background: #1f305e; color:#fff; border-color:#1f305e;}

.modalAlert { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 9999; display:none; align-items: center; justify-content: center; }
.modalAlert.on { display: flex; }
.modalAlert div { background: #fff; border-radius: 8px; padding:30px 0; text-align: center; width:400px; display:flex; flex-direction: column; align-items: center; justify-content: center; }
.modalAlert div p { margin:20px 0; font-size:18px;  }
.modalAlert div button { background: #1f305e; color:#fff; width: 60px; height: 40px; border-radius: 4px; font-size:16px; border:none; cursor: pointer; }

footer { background: #111; padding:30px 0; height: 111px; box-sizing: border-box; }
footer address { color:#999; font-size:14px; font-style: normal; position: relative; line-height:1.8;}
footer address span { font-size:12px; margin:0 4px;}
footer address span + br { display: none; }
footer address p { position: absolute; right: 0; bottom: 0; }

@media screen and (max-width: 768px) {
    #w_header { height: 60px; overflow: hidden; transition:0.3s;  }
    #w_header.down { height: 100vh; background: #fff; }
    #w_header img { height: 60px; }
    #w_header ul { line-height:60px; position: static; width:260px; margin:40px auto 0; }
    #w_header ul li { float:none; margin-left: 0; text-align: center; font-size:20px; border-bottom:1px solid #ddd; }
    #w_header ul li:last-child { border-bottom:none; }
    #w_header ul li a { display: block; font-family: ptsb; }
    section { background:url(https://smartpowerful.co.kr/images/bg_intro_m.png) no-repeat left top/cover; }
    section:before { content:""; position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.3); }
    section .wrap { padding: 100px 0 0; justify-content: flex-start; height: calc(100vh - 238px);}
    section h2 { font-size: 32px; line-height:1.4; }
    section ul { margin-top: 40px; }
    section ul li { float:none; margin-bottom: 10px; }
    section ul li a { width: 200px; height: 50px; }
    

    #w_header #nav_btn { position:absolute; right:0; top:12px; display: block; }
    #nav_btn .line{  width: 40px; height: 2px; background-color: #333; display: block; margin: 8px auto; transition: all 0.3s ease-in-out;}
    #nav_btn:hover{ cursor: pointer;}
    #nav_btn.act .line:nth-child(2){ opacity: 0;}
    #nav_btn.act .line:nth-child(1){ transform: translateY(10px) rotate(45deg);}
    #nav_btn.act .line:nth-child(3){ transform: translateY(-10px) rotate(-45deg);}  

    .modalAlert div { width:300px;  }

    footer { height: 238px; padding:20px 0; }
    footer address { font-size:13px; }
    footer address span { display: none;  }
    footer address span.add { display: inline;  }
    footer address span + br { display: block; }
    footer address p { position: static; margin-top: 10px;}
}