#wrap {max-width: 1200px; width: 100%; height: auto; margin: 0 auto;}

/* download-area */
.download-area {}
.download-area .bt-box {padding-bottom: 10px; display:none;}
.download-area .bt-box > p {font-size: 12px; font-weight: 400; line-height: 1.17; color: var(--pr);}
.download-area .download-txt {width: 100%; height: auto !important; padding: 20px 15px;  overflow: auto; border: 1px solid var(--btn); border-radius: 5px; box-sizing: border-box;}
.download-area .download-txt p {font-size: 16px; font-weight: 400; line-height: 1.19; color: var(--pr); box-sizing: border-box;}
.download-area .download-txt p::-webkit-scrollbar{width: 7px;}
.download-area .download-txt p::-webkit-scrollbar-thumb{background-color: var(--btn); border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; border-radius: 5px;}
.download-area .download-txt p::-webkit-scrollbar-track{background-color: var(--wt); border-radius: 0;}

/* download-btn */
.download-btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 10px; border-radius: 5px; background: var(--btn); font-size: 15px; font-weight: bold; line-height: 1.2; color: var(--wt);}

/* form-area */
.form-area {width: 100%; height: auto;}
.input-box {width: 100%; margin-bottom: 10px;}
.input-box .d-flex {position: relative; gap: 10px; margin-bottom: 10px;}
.input-box .d-flex:last-of-type {margin-bottom: 0;}
.input-box .form-btn {min-width: 100px; height: 50px; border-radius: 5px; background: var(--pr); font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--wt);}
.input-box input[type="text"],.input-box input[type="password"] {width: 100%; height: 50px; padding: 0 15px; margin-bottom: 10px; border-radius: 5px; border: 1px solid var(--btn); box-sizing: border-box; font-size: 15px; font-weight: 300; line-height: 1.2; color: var(--ab);}
.input-box input[type="text"]:last-of-type,.input-box input[type="password"]:last-of-type {margin-bottom: 0;}
.input-box .textarea {width: 100%; height: 150px; overflow: hidden; border-radius: 5px; border: 1px solid var(--btn); box-sizing: border-box;}
.input-box textarea {width: 100%; height: 100%; padding: 12px 15px 10px; box-sizing: border-box; resize: none; font-size: 13px; font-weight: 300; line-height: 1.15; color: var(--pr);}
.input-box select {min-width: 100px; width: 100px; height: 50px; padding: 0 15px; border-radius: 5px; border: 1px solid var(--btn); box-sizing: border-box; appearance: none; background: url(./../img/select_arrow.png)no-repeat calc(100% - 8px) 50%; background-size: 13px 7px; font-size: 13px; font-weight: 300; line-height: 1.15; color: var(--pr);}
 
.input-box textarea::-webkit-scrollbar{width: 7px;}
.input-box textarea::-webkit-scrollbar-thumb{background-color: var(--btn); border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; border-radius: 5px;}
.input-box textarea::-webkit-scrollbar-track{background-color: var(--wt); border-radius: 0;}
.input-box .count {position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 15px; font-weight: 300; line-height: 1.2; color: var(--pr);}

.ckd-box {padding-top: 10px; margin-bottom: 10px;}
.ckd-box input[type="checkbox"] {display: none;}
.ckd-box .ckd_label {display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 300; line-height: 1.14; color: var(--pr);}
.ckd-box .ckd_label:before {content: ''; display: block; width: 20px; height: 20px; border-radius: 4px; background: url(./../img/chk_off.png)no-repeat 50% 50%; background-size: cover;}
.ckd-box input[type="checkbox"]:checked ~ .ckd_label:before {content: ''; display: block; width: 20px; height: 20px; border-radius: 4px; background: url(./../img/chk_on.png)no-repeat 50% 50%; background-size: cover;}

/* description */
.description {margin-top: 20px; font-size: 18px; font-weight: 400; line-height: 1.17; color: var(--pr); text-align: center;}

/* submit-btn */
.submit-btn {width: 100%; height: 50px; margin-top: 30px; border-radius: 5px; background: var(--pr); font-size: 15px; font-weight: bold; line-height: 1.2; color: var(--wt);}

/* list-area */
.list-area {width: 100%; height: 293px; padding: 20px; border: 1px solid var(--btn); border-radius: 5px; box-sizing: border-box;}
.list-area ul {display: flex; flex-flow: column; gap: 7px;}
.list-area ul li {display: flex; align-items: center; justify-content: space-between; width: 100%;}
.list-area ul li p {font-size: 16px; font-weight: 300; line-height: 1.19; color: var(--pr);}
.list-area ul li .emphasis {font-weight: 400; color: var(--btn);}

/* pager */
.pager {width: 100%; height: auto; margin-top: 50px;}
.pager ul {display: flex; align-items: center; justify-content: center; width: 100%; height: auto;}
.pager ul .arrow {width: 25px; height: auto;}
.pager ul .arrow img {width: 100%; height: auto;}
.pager ul .all-prev {margin-right: 5px;}
.pager ul .prev {margin-right: 25px;}
.pager ul .all-next {margin-left: 5px;}
.pager ul .next {margin-left: 25px;}

.pager ul .number {margin: 0 3px;}
.pager ul .number:last-of-type {margin-right: 0;}
.pager ul .number a {display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 2px; background: #eee; font-size: 15px; font-weight: 400; line-height: 1.53; color: #949494;}
.pager ul .number.active a {background: var(--btn); color: var(--wt);}

/* tit-sub */
.tit-sub {width: 100%; height: auto; margin-bottom: 50px;}
.tit-sub .tit {margin-bottom: 20px; font-family: 'SeoulNamsanM'; font-size: 30px; font-weight: 400; line-height: 1.17; color: var(--pr); text-align: center;}
.tit-sub .tit .mo {display: none;}
.tit-sub .sub {font-size: 16px; font-weight: 400; line-height: 1.19; color: var(--gray_94);}

/* img-list */
.img-list {width: 100%; height: auto;}
.img-list ul {display: flex; flex-flow: column; gap: 20px;}
.img-list ul li {width: 100%;}
.img-list ul li .child-box {width: 100%; padding: 30px 25px 20px; box-sizing: border-box; border: 1px solid var(--btn); border-radius: 5px; cursor: pointer;}
.img-list ul li .child-box .tit {width: 100%; height: auto; margin-bottom: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; font-weight: 600; line-height: 1.28; color: var(--pr);}
.img-list ul li .child-box .sub {width: 100%; margin-bottom: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; font-weight: 300; line-height: 1.2; letter-spacing: -0.3px; color: var(--gray_58);}
.img-list ul li .child-box .img-box {width: 100%; overflow: hidden; border-radius: 5px;}
.img-list ul li .child-box .img-box img {width: 100%; height: 100%; object-fit: cover;}
.img-list ul li .child-box .bt-box {margin-top: 10px;}
.img-list ul li .child-box .bt-box .user {font-size: 13px; font-weight: 300; line-height: 1.23; letter-spacing: -0.26px; color: var(--gray_94);}
.img-list ul li .child-box .bt-box .name {font-size: 13px; font-weight: 300; line-height: 1.23; letter-spacing: -0.26px; color: var(--gray_94);}

/* sub-detail */
.sub-detail {}
.sub-detail .detail-tit {margin-bottom: 25px; font-size: 32px; font-weight: 600; line-height: 1.25; color: var(--pr);}
.sub-detail .bt-box {margin-bottom: 45px;}
.sub-detail .user {font-size: 16px; font-weight: 300; line-height: 1; letter-spacing: -0.32px; color: var(--gray_94);}
.sub-detail .date {font-size: 16px; font-weight: 300; line-height: 1; letter-spacing: -0.32px; color: var(--gray_94);}

.detail-content {width: 100%; height: auto; display: flex; flex-flow: column; gap: 25px;}
.detail-area .detail-content {gap: initial;}
.detail-content p {font-size: 16px; font-weight: 300; line-height: 1.25; letter-spacing: -0.32px; color: var(--pr);}
.detail-content figure {width: 100%; height: auto;}
.detail-content figure img {width: 100%; height: auto;}


/* intro */
.intro {animation: intro_non 3s 3s linear both; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--pr); z-index: 9999;}
@keyframes intro_non {
  0% {top: 0;}
  100% {top: -9999px;}
}
.intro img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.intro .fist-img {width: 200px; animation: ping 1s ease-in-out 3 both;}
@keyframes ping {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.2);
            transform: translate(-50%, -50%) scale(0.2);
    opacity: 0.8;
  }
  80% {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
            transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(2.2);
            transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}
.intro .last-img {animation: txt 1s 2s linear both; top: 65%; opacity: 0; width: 400px;}
@keyframes txt {
  0% {opacity: 0; top: 65%;}
  100% {opacity: 1; top: 50%;}
}