/* 웹폰트 */
 @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
 /* 여백 초기화 */
 * {
     margin: 0;
     padding: 0;
     font-size: 16px;
     line-height: 1.6;
     font-family: "NexonLv1Gothic";
 }
 /* 링크 초기화 */
 a {
     text-decoration: none;
     color: #222;
 }
 /* 제목 초기화 */
 h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
 }
 /* 목록 초기화 */
 ul, li, ol {
     list-style: none;
 }
 /* 전체 영역 */
 body {
     padding: 40px;
 }
 /* 헤더 영역 */
 #header {
     text-align: center;
     padding-bottom: 40px;
     border-bottom: 1px dashed #dcdcdc;
 }
 #header h1 a {
     font-size: 80px;
     font-weight: 800;
     color: #844aa3;
 }
 #header nav ul li {
     display: inline;
 }
 #header nav ul li a {
    border-radius: 2px;
     border: 1px dashed #844aa3;
     color: #844aa3;
     padding: 10px 20px;
     margin: 6px 3px;
     display: inline-block;
     transition: background-color 0.3s, color 0.3s;
 }
 #header nav ul li a:hover {
     background-color: #844aa3;
     color: #fff;
 }
 #header nav ul li.active a {
     background-color: #844aa3;
     color: #fff;
 }
 @media (max-width: 600px){
     body {
         padding: 20px;
     }
     #header h1 {
         margin-bottom: 10px;
     }
     #header h1 a {
         font-size: 40px;
     }
     #header nav ul li a {
         padding: 5px 10px;
         margin: 3px 1px;
         font-size: 14px;
     }
 }
 /* 메인 영역 */
 #main {
     padding: 40px 0;
     border-bottom: 1px dashed #dcdcdc;
 }
 .main__menu {
     padding-bottom: 40px;
     border-bottom: 1px dashed #dcdcdc;
 }
 .main__menu li {
     line-height: 2;
 }
 .main__menu li strong {
     position: relative;
 }
 .main__menu li strong::before {
     content: '';
     background: #d380ff;
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 50%;
     z-index: -1;
     border-radius: 20px;
     transition: all 0.3s;
 }
 .main__menu li:hover strong::before {
     height: 100%;
 }
 .main__menu > span {
    font-size: 18px;
    margin-bottom: 5px;
    background-color: #660c96d7;
    border-radius: 5px;
    padding: 5px;
    color: #fff;
}
 .main__desc h3 {
     font-size: 24px;
     margin-bottom: 5px;
 }
 .main__desc p {
     margin-bottom: 15px;
     border-left: 5px solid #844aa3;
     padding: 12px 10px 10px 20px;
     background-color: #F5F5F5;
     border-radius: 2px;
 }
 .main__desc ul {
     padding-left: 15px;
     margin-bottom: 5px;
 }
 .main__desc li {
     list-style: square;
 }
 .main__desc a {
     display: block;
     border: 1px dotted #ccc;
     margin: 10px 0;
     text-align: center;
     padding: 10px;
     margin-bottom: 50px;
     transition: all 0.2s;
     border-radius: 2px;
 }
 .main__desc a:hover {
     border-color: #844aa3;
     background-color: #dae4ff;
 }
 .main__sample {
     padding-top: 40px;
 }

 .main__sample .sample {
     margin-top: 100px;
 }
 
 .main__sample .sample:first-child {
     margin-top: 0;
 }
 .main__sample .sample h3 {
     font-size: 20px;
     margin-bottom: 10px;
 }
 .main__sample .sample p {
     margin-bottom: 10px;
     color: #666;
 }
 .main__sample .result {
     margin-top: 10px;
     background-color: #f3f3f3;
     padding: 1em;
     border-radius: 5px;
     margin-bottom: 10px;
 }
 .main__sample .notice {
     border-left: 5px solid #844aa3;
     padding: 13px 10px 10px 15px;
     background-color: #f6f6f6;
 }
 .main__sample .notice p {
     margin-bottom: 5px;
 }
 .main__sample .notice p {
     margin-bottom: 0;
 }
 .main__sample ul {
     margin: 20px 0;
 }
 .main__sample li {
     position: relative;
     padding-left: 12px;
 }
 .main__sample li::before {
     content: '';
     width: 5px;
     height: 5px;
     background-color: #844aa3;
     position: absolute;
     left: 0;
     top: 9px;
 }
 .main__sample table{
     width: 100%;
 }
 .main__sample table th{
     background-color: #f5f5f5;
     padding: 2px;
 }
 .main__sample table td{
     text-align: center;
     border: 1px solid #f5f5f5;
     padding: 2px;
 }
 .main__sample table button{
     cursor: pointer;
     padding: 3px 20px;
 }
 
 
 /* 푸터 영역 */
 #footer {
     padding: 40px;
     text-align: center;
 }