@charset "UTF-8";
/*-------------------------------------------------
Author : KIM KYE YOUNG 김계영
Last update :2021. 08. 27.
-------------------------------------------------*/

#btn {
    width: 300px;
    height: 50px;
    background-color: #fff;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
}

#slideTogglebox {
    width: 300px;
    height: 300px;
    background-color: beige;
    display: none;
}

/* 서브 이미지 */
.sub-visual, .sub-visual2 {
    z-index: 1;
    overflow: hidden;
    width: 100%;
}

.sub-visual::after, .sub-visual2::after {
    content: '';
    position: absolute;
    display: block;
    background-color: rgba(4, 14, 39, .7);
    width: 100%;
    height: 220px;
    top: 80px;
}

.sub-visual2::after {
    height: 280px;
}

.sub-visual div, .sub-visual2 div {
    height: auto;
    max-width: 100%;
    animation: fadein 2s;
    background-image: url("../images/sub-visual01.png");
    background-size: cover;
}

.sub-visual img {
    height: 300px;
}

.sub-visual2 img {
    height: 360px;
}

/* 서브 메뉴 */
#subgnb-wrap {
    position: absolute;
    top: -60px;
    z-index: 900;
    text-align: center;
    height: 60px;
    background: rgba(4, 14, 39, .5);
    width: 100%;
}

.submenu-list {
    max-width: 1280px;
    display: flex;
    line-height: 60px;
}

.submenu-list > li {
    color: #fff;
    flex: 1;
    font-size: 20px;
    border-right: 1px solid rgba(255, 255, 255, .2);
    font-weight: 500;
    transition-duration: .3s;
}

.submenu-list > li:last-child {
    border-right: none;
}

.submenu-list > li a {
    position: relative;
    display: block;
}

.submenu-list > li.active a {
    background: #fff;
}

.submenu-list > li:hover a {
    color: #fff;
    transition: all 0.3s;
}

.submenu-list > li > a::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 5px;
    background-color: transparent;
    transition-duration: .3s;
}

.submenu-list > li:hover > a::after {
    width: 100%;
    background-color: #2C87F0;
}

.submenu-list > li.active a {
    color: #2C87F0;
}

.submenu-list > li.active > a::after {
    height: 0
}

/* 서브 컨텐츠 */
.sub-wrap {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 100%;
    padding: 30px 0 100px;
    text-align: center;
}

.sub-wrap h2.subject {
    position: relative;
    top: -160px;
    font-size: 40px;
    font-weight: 500;
    color: #fff;
    text-align: center;
}

.sub-wrap h2.subject2 {
    position: relative;
    top: -220px;
    font-size: 40px;
    font-weight: 500;
    color: #fff;
    text-align: center;
}

.sub-wrap .sub-name {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 700;
    text-align: left;
}

.sub-wrap .sub-title {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 400;
}

.sub-wrap .sub-table-title {
    font-size: 16px;
    font-weight: 400;
    float: left;
    line-height: 40px;
}

.sub-wrap .small-title {
    font-size: 14px;
    line-height: 25px;
    font-weight: 400;
    text-align: left;
}

.mw700 {
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
}

/* 회원가입 */
.join-wrap {
    margin: 0 auto;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 50px 0;
    font-size: 16px;
    margin-bottom: 50px;
}

.label-input-group {
    display: flex;
    line-height: 50px;
    margin-bottom: 10px;
}

.label-input-group label {
    width: 170px;
    text-align: left;
    font-weight: 500
}

.label-input-group input, .label-input-group select, .label-input-group textarea {
    max-width: 530px;
    width: 100%;
    height: 50px;
    text-indent: 10px;
}

.label-input-group button {
    font-size: 16px;
}

.label-input-group span {
    max-width: 530px;
    width: 100%;
    display: flex;
}

.label-input-group span.column {
    display: inline-block;
    text-align: left
}

.label-input-group span.column label {
    margin-right: 10px;
}

.label-input-group textarea {
    height: 300px;
}

/* 마이페이지 수정 */
.mw1280 .label-input-group input, .mw1280 .label-input-group select, .mw1280 .label-input-group textarea {
    max-width: 1110px;
    width: 100%;
    height: 50px;
    text-indent: 10px;
}

.mw1280 .label-input-group span {
    max-width: 1110px;
    width: 100%;
    display: flex;
}

.mw1280 .label-input-group span.column {
    display: inline-block;
    text-align: left;
}

.mw1280 .label-input-group textarea {
    height: 300px;
}

.btn-contract {
    float: right;
    margin-top: -4rem;
}

.btn-contract a {
    display: block;
    margin-bottom: 5px;
}

/* 회원가입 전체동의 */
.agree-box {
    text-align: left;
    border: 1px solid #ddd
}

.agree-box > .input-group {
    text-align: left;
    padding: 16px;
    border-bottom: 1px solid #ddd;
}

.agree-box > .input-group .checkbox-label {
    font-family: 'NotoSans', sans-serif;
    font-weight: 700;
}

.agree-box .input-group .checkbox-label {
    font-size: 13px;
    color: #222
}

.agree-box .input-grid2 {
    padding: 16px 16px 0 16px
}

.agree-box .input-grid2:last-child {
    padding-bottom: 16px
}

.agree-box .input-grid2 + .input-grid2 {
    margin-top: 8px;
    padding-top: 0;
}

.agree-box .input-grid2 .input-group {
    width: auto;
    line-height: 26px;
}

.agree-box .input-grid2 .input-group + .input-group {
    float: right;
    line-height: 22px
}

/*.agree-box .input-grid2 .input-group.view-btn1, .agree-box .input-grid2 .input-group.view-btn2 {font-size:12px;color:#888;text-decoration:underline; cursor: pointer;}*/
.agree-box .view-btn1, .agree-box .view-btn2, .agree-box .view-btn3 {
    font-size: 12px;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
}

.agree-box .clause, .agree-box .personal, .agree-box .letter {
    clear: both;
    font-size: 13px;
    line-height: 20px;
    display: none;
    background: #f5f5f5;
    padding: 0 20px 20px;
    margin-top: 40px;
}

.agree-box .clause2 {
    clear: both;
    font-size: 13px;
    line-height: 20px;
    background: #f5f5f5;
    padding: 0 20px 20px;
    margin-top: 10px;
}

.agree-box .clause h6, .agree-box .personal h6 {
    font-size: 15px;
    padding-top: 20px;
}

.agree-box .clause .ol-number li {
    padding-left: 20px;
}

.agree-box .clause li span {
    font-size: 11px;
    width: 14px;
    height: 14px;
    line-height: 15px;
    top: 3px;
}

.agree-box .clause .box03, .agree-box .personal .box03 {
    padding: 10px;
    font-size: 12px;
    background: #fff;
}

.agree-box .personal table, .agree-box .letter table {
    font-size: 12px;
}

.input-grid2 {
    overflow: hidden
}

.input-grid2 .input-group {
    float: left;
    width: 50%
}

.input-group .checkbox-type {
    visibility: hidden;
    position: absolute;
}

.input-group .checkbox-label {
    display: inline-block;
    position: relative;
    padding-left: 32px;
    font-size: 13px;
    cursor: pointer;
    line-height: 24px;
    outline: none;
    color: #888;
    letter-spacing: -0.26px;
}

.input-group .checkbox-label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    border: 1px solid #ddd;
    transform: rotate(0);
}

.input-group .checkbox-label:after {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    left: 9px;
    width: 5px;
    height: 8px;
    border: solid #ddd;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}

.input-group .checkbox-type:checked + .checkbox-label {
    color: #222
}

.input-group .checkbox-type:checked + .checkbox-label:before {
    border-color: #222;
    background-color: #222;
}

.input-group .checkbox-type:checked + .checkbox-label:after {
    border-color: #fff;
    transform: rotate(45deg);
}

/* 버튼 영역 */
.button-area, .button-area3 {
    margin-top: 50px;
}

.button-area .agree {
    font-size: 14px;
    text-align: left;
    margin-bottom: 15px;
}

.button-area button, .button-area1 button {
    height: 60px;
    display: block;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
}

.button-area1 {
    max-width: 500px;
    margin: 0 auto;
    margin-top: 50px;
}

.button-area2 {
    display: flex;
    max-width: 700px;
    margin: 0 auto;
    margin-top: 50px;
}

.button-area2 button {
    flex: 1;
}

.button-area3 {
    display: flex;
    justify-content: center;
}

/* 파일 찾기 */
input[type="file"].filebox {
    position: absolute;
    width: 150px;
    border: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 100;
}

.label-input-group .flie {
    position: relative;
}

.label-input-group .flie em {
    line-height: 40px;
    font-size: 16px;
    height: 50px;
    vertical-align: middle;
}

/* 아이디 찾기 */
.find-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-image: url(../images/find-visual01.png);
    background-position: 50% 50%;
    background-size: cover;
    height: 100%;
    opacity: 0.9;
}

.find-visual::before {
    content: '';
    position: absolute;
    display: block;
    background-color: rgba(4, 14, 39, .7);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.find {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    width: 500px;
    background: rgba(255, 255, 255, .95);
    padding: 50px 0;
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
    font-size: 15px;
    animation: slidein 1.2s 0s 1 cubic-bezier(0, 0, 0.2, 1) forwards;
}

.find h2 {
    font-size: 40px;
    height: 40px;
    line-height: 40px;
    color: #222;
    text-align: center;
    font-weight: normal;
    margin-bottom: 40px;
}

.findBox fieldset {
    width: 400px;
    margin: 0 auto;
}

.findBox label {
    display: none;
}

.findBox p {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
}

.findBox input {
    width: 100%;
    height: 50px;
    border: 1px solid #bbb;
    margin-bottom: 20px;
    text-indent: 10px;
}

.findBox input[type=submit] {
    width: 100%;
    height: 60px;
    background: #2C87F0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-indent: 0;
    transition: all 0.3s;
}

.findBox input[type=submit]:hover {
    background: rgba(4, 14, 39, .5);
    color: #fff;
    cursor: pointer;
}

@keyframes slidein {
    from {
        margin-top: 5px;
        opacity: 0;
    }
    to {
        margin-top: -150px;
        opacity: 1;
    }
}

/* 찾기 모달 */
.modalDialog {
    z-index: 1001;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 1;
    display: none;
    background: rgba(4, 14, 39, .7);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}

.find-modalBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    padding-top: 30px;
    background: #fff;
    z-index: 100;
    text-align: center;
}

.find-modalBox strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #254799;
}

.find-modalBox p {
    font-size: 14px;
    line-height: 20px;
    padding: 30px 0;
}

.find-modalBox input {
    width: 300px;
    height: 40px;
    border: 1px solid #bbb;
    margin-bottom: 10px;
    text-indent: 10px;
    font-size: 16px;
}

.find-modalBox input:last-child {
    margin-bottom: 0
}

.open-modal {
    z-index: 1001;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 1;
    background: rgba(4, 14, 39, .7);
    transition: all 0.4s;
}

.modalDialog2 {
    z-index: 1001;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 1;
    background: rgba(4, 14, 39, .7);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.modalDialog2:target {
    opacity: 0;
    pointer-events: auto;
}

.find-modalBox2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    padding-top: 30px;
    background: #fff;
    z-index: 1003;
    text-align: center;
}

.find-modalBox2 strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #254799;
}

.find-modalBox2 p {
    font-size: 14px;
    line-height: 20px;
    padding: 30px 0;
}

.find-modalBox2 input {
    width: 300px;
    height: 40px;
    border: 1px solid #bbb;
    margin-bottom: 10px;
    text-indent: 10px;
    font-size: 16px;
}

.find-modalBox2 input:last-child {
    margin-bottom: 0
}

.open-modal2 {
    z-index: 1001;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 1;
    background: rgba(4, 14, 39, .7);
    transition: all 0.4s;
}

/* 작업내역, 크레딧 정산 */
.work-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 50px;
}

.work-box .work, .work-box .credit {
    width: 47%;
}

.work-box .work strong, .work-box .credit strong {
    float: left;
    width: 40%;
    background: #33D4D6;
    line-height: 70px;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
}

.work-box .credit strong {
    background: #2C87F0;
}

.work-box ul {
    width: 60%;
    background: #F5F5F5;
    padding: 9px 30px;
    display: inline-block;
}

.work-box li {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 26px;
    text-align: left;
}

.work-box li span {
    text-align: right;
}

/* list */
.table-box {
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}

.table-box table thead {
    border-bottom: 1px solid #ddd
}

.table-box table tr + tr {
    border-top: 1px solid #ddd
}

.table-box table th,
.table-box table td {
    color: #222;
}

.table-box table th {
    padding: 16px 12px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -.3px;
    color: #222;
    font-weight: 700;
}

.table-box table td {
    padding: 16px 15px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -.3px;
    color: #222;
}

.table-box table td a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #222;
    text-align: left;
}

.table-box table td a:hover {
    text-decoration: underline;
}

.table-box table .list-date {
    color: #888;
}

.table-box table .category {
    color: #254799;
    font-weight: 400;
}

.table-box table .complete {
    color: #2C87F0;
}

.table-box table .ing {
    color: #333;
}

.table-box table .add {
    color: #254799;
}

.table-box table span.list-important {
    display: inline-block;
    text-align: center;
    width: 36px;
    height: 20px;
    line-height: 18px;
    font-size: 11px;
    color: #FF781C;
    border: 1px solid #FF781C;
    font-weight: 700;
    border-radius: 50px;
    margin-right: 5px;
}

.table-box .list-none {
    padding: 30px;
    text-align: center;
}

.table-box .list-none i {
    color: #aaa;
    display: block;
    margin-bottom: 10px;
}

/* list 검색 */
.list-form-box {
    position: relative;
    display: flex;
    justify-content: flex-end;
    font-size: 15px;
    margin-bottom: 20px;
}

.list-form-box label {
    line-height: 40px;
    font-weight: 500;
    width: 80px;
}

.list-form-box select, .list-form-box input, .list-form-box button, .list-form-box label {
    height: 40px;
}

.list-form-box input {
    max-width: 200px;
    text-indent: 10px;
}

.list-form-box button {
    width: 40px;
}

.list-form-box .search:after {
    content: '\e97a';
    font-family: 'xeicon';
    font-size: 20px;
    width: 40px;
    height: 40px;
    position: relative;
    display: inline-block;
    top: 4px;
    pointer-events: none;
    margin-left: -40px;
    color: #fff;
}

/* list 상세보기 */
.list-view {
    font-size: 16px;
}

.list-view .list-top {
    text-align: center;
    padding-bottom: 50px;
}

.list-view .list-top .list-important {
    display: inline-block;
    text-align: center;
    width: 60px;
    height: 30px;
    line-height: 28px;
    font-size: 18px;
    color: #FF781C;
    border: 1px solid #FF781C;
    font-weight: 700;
    border-radius: 50px;
}

.list-view .list-top .list-important + .view-title {
    margin-top: 16px
}

.list-view .list-top .view-title {
    font-size: 30px;
    line-height: 45px;
    letter-spacing: -.6px;
    font-weight: 400;
}

.list-view .list-top .list-date {
    margin-top: 24px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -.3px;
    color: #888
}

.list-view .list-top .file {
    float: right;
}

.list-view .view-area {
    max-width: 1280px;
    margin: 0 auto;
    padding: 50px 20px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    text-align: left;
    line-height: 25px;
}

.list-view .prev-next {
    max-width: 1280px;
    margin: 0 auto;
    font-size: 15px;
    border-top: 1px solid #ddd
}

.list-view .prev-next li {
    position: relative;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #ddd
}

.list-view .prev-next p {
    position: relative;
    width: 100%;
    padding: 0 110px 0 100px;
    letter-spacing: -.3px;
    text-align: left;
}

.list-view .prev-next p a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #222;
}

.list-view .prev-next p a:hover {
    text-decoration: underline;
    color: #254799
}

.list-view .prev-next p:after {
    content: '';
    display: block;
    width: 1px;
    height: 13px;
    position: absolute;
    top: 50%;
    left: 80px;
    margin-top: -6px;
    background: #ddd
}

.list-view .prev-next span {
    position: absolute;
    top: 0;
    left: 20px;
}

.list-view .prev-next .update-date {
    right: 20px;
    left: inherit;
    color: #888;
}

.list-view .prev-next a span.list-important {
    position: relative;
    display: inline-block;
    left: 0;
    text-align: center;
    width: 36px;
    height: 20px;
    line-height: 18px;
    font-size: 11px;
    color: #FF781C;
    border: 1px solid #FF781C;
    font-weight: 700;
    border-radius: 50px;
    margin-right: 5px;
}

.list-middle {
    border-top: 1px solid #222;
}

.list-middle table th {
    color: #444;
    border: 1px solid #ddd;
    padding: 20px;
    background-color: #F5F7F9;
    border-bottom: none;
}

.list-middle table td {
    border: 1px solid #ddd;
    padding: 20px;
    text-align: left;
    background: #fff;
    border-bottom: none;
}

.list-middle table th:first-child {
    border-left: none;
}

.list-middle table td:last-child {
    border-right: none;
}

.list-admin {
    font-size: 14px;
    padding: 30px;
    background: #F5F7F9;
    margin-bottom: 50px;
}

.list-admin table th {
    background: #EBF1F8;
}

.list-admin .view-area {
    border-bottom: none;
    padding: 30px 0 0 0;
}

.list-btn {
    float: right;
}

/* 페이지 */
.page {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    font-family: 'Roboto';
    font-size: 17px;
}

.page ul {
    margin-top: 30px;
}

.page li {
    display: inline-block;
}

.page li a {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    line-height: 30px;
    color: #254799;
    margin-right: 5px;
    font-size: 15px;
    font-weight: 300;
    background: #fff;
}

.page li a.next {
    width: auto;
    padding: 0 10px;
}

.page li.pages {
    margin-right: 10px;
}

.page a.active {
    background-color: #254799;
    border-color: #254799;
    color: #fff;
}

/* 페이지 */
.page1 {
    text-align: center;
    margin: 0 auto;
    font-weight: 400;
    font-family: "Roboto";
    font-size: 17px;
}

.page1 ul {
    margin-top: -80px;
}

.page1 li {
    display: inline-block;
}

.page1 li a {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    line-height: 30px;
    color: #254799;
    margin-right: 5px;
    font-size: 15px;
    font-weight: 300;
    background: #fff;
}

.page1 li a.next {
    width: auto;
    padding: 0 10px;
}

.page1 li.pages {
    margin-right: 10px;
}

.page1 a.active {
    background-color: #254799;
    border-color: #254799;
    color: #fff;
}

.first.xi-angle-left::after {
    content: "\e93b";
    position: relative;
    left: -5px;
}

.first.xi-angle-left::before {
    content: "\e93b";
    position: relative;
    left: 3px;
}

.last.xi-angle-right::after {
    content: "\e93e";
    position: relative;
    right: 5px;
}

.last.xi-angle-right::before {
    content: "\e93e";
    position: relative;
    right: -3px;
}

/* 약관 */
.clause, .personal, .letter {
    text-align: left;
    font-size: 16px;
    line-height: 28px;
}

.clause ol, .personal ol {
    padding: 0;
}

.clause li, .personal li {
    margin-bottom: 5px;
    list-style: none;
}

.clause .ol-number li {
    position: relative;
    padding-left: 30px;
}

.clause li span {
    position: absolute;
    left: 0;
    top: 5px;
    display: inline-block;
    text-align: center;
    font-weight: 500;
    font-family: 'Roboto';
    width: 20px;
    height: 20px;
    background: #D3E0EF;
    border-radius: 50%;
    line-height: 22px;
    font-size: 14px;
}

.clause .box01, .personal .box01 {
    padding: 30px 30px;
    background: #F5F7F9;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

.clause .box03, .personal .box03 {
    padding: 20px 30px;
    margin-top: 10px;
    border: 1px solid #ddd;
    background: #F5F7F9;
    font-size: 14px
}

.clause .box03 li, .personal .box03 li {
    padding-left: 0;
}

.clause table, .personal table, .letter table {
    clear: both;
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #777;
    text-align: center;
    font-size: 14px;
}

.clause table caption, .personal table caption {
    display: none;
}

.clause table th, .personal table th, .letter table th {
    color: #444;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #F5F7F9;
}

.clause table td, .personal table td, .letter table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    background: #fff;
}

.clause h6, .personal h6 {
    padding-top: 40px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
    line-height: 20px;
}

/* faq */
.faq {
    margin-top: 50px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
}

.faq i {
    vertical-align: middle;
    margin-right: 10px;
}

.q {
    color: #222;
    padding: 30px 50px 30px 20px;
    background-color: #fff;
    cursor: pointer;
}

.q img {
    margin-right: 11px;
}

.q:after {
    position: absolute;
    content: '\e91b';
    font-size: 20px;
    font-family: "xeicon";
    right: 20px;
}

.q.active:after {
    content: '\e914';
}

.faq-list dd p {
    padding: 30px;
    background-color: #F5F7F9;
    color: #555;
    margin: 20px;
    font-size: 14px;
    line-height: 25px;
}

.faq-list dd {
    display: none;
    border-bottom: 1px solid #ddd;
}

.faq-list dd:last-child, .faq-list dt:last-child {
    border: none;
}

.faq-list > dt {
    border-bottom: 1px solid #ddd;
}

/* 탭 */
.tabsnav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tabs {
    font-size: 18px;
    flex: 1;
    margin-right: 1px;
    height: 60px;
    padding: 21px 0;
    color: #555;
    background: #D3E0EF;
    text-align: center;
    transition: color .3s;
    font-weight: 400;
}

.tabs:last-child {
    margin-right: 0;
}

.tabs:hover {
    background: rgba(37, 71, 153, .7);
    color: #eee;
}

.tabs.is-active {
    color: #fff;
    background: #254799;
    font-weight: 500;
}

.contab {
    display: none;
}

.contab.is-active {
    display: block;
}

/* 프로젝트 홈 */
.subproject-wrap {
    position: relative;
    width: 100vw;
    z-index: 100;
    margin-left: calc(-50vw + 50%);
    margin-bottom: -100px;
    background: #F5F7F9;
    padding: 70px 20px;
    border-top: 1px solid #ddd;
}

.subproject-box {
    max-width: 1280px;
    margin: 0 auto;
}

.subproject-box .table-box {
    background: #fff;
}

.grade {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
    padding: 30px 0;
    margin-top: -70px;
}

.grade p {
    font-size: 20px;
    flex: 1 1 50%;
    padding: 0 50px 0 70px;
    line-height: 50px;
    height: 50px;
}

.grade p strong {
    color: #254799;
}

.grade button {
    flex: 1 1 50%;
}

.grade .tester::before, .grade .beginner::before, .grade .intermediate::before, .grade .advanced::before, .grade .premium::before {
    position: absolute;
    left: 0;
    display: inline-block;
    color: #fff;
    width: 50px;
    height: 50px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    margin-right: 20px;
}

.list-order-box {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.list-order {
    margin-right: 20px;
}

.list-order li:before {
    content: '';
    position: relative;
    display: inline-block;
    width: 1px;
    height: 15px;
    background: #bbb;
    vertical-align: middle;
    margin: 0 10px;
}

.list-order li:first-child:before {
    display: none;
}

.list-order li {
    font-size: 16px;
    display: inline-block;
    line-height: 30px;
    cursor: pointer;
}

.list-order li:hover, .list-order li.active {
    color: #2C87F0;
}

.subproject-wrap .section3-box {
    margin-top: 70px;
}

.subproject-wrap .section3-box li, .subproject-wrap .section3-box li.reviewer {
    background: #fff;
}

.subproject-wrap .section3-box li:hover {
    background: #254799;
}

.subproject-wrap .section3-box li span:nth-of-type(2) {
    margin-bottom: 0;
}

.subproject-wrap .section3-box li span:nth-of-type(3) {
    background: #254799;
    color: #fff;
    margin-bottom: 0;
    margin-top: 20px;
    padding: 10px 0;
}

.subproject-wrap .section3-box li:hover span:nth-of-type(3) {
    color: #fff;
    background: #2C87F0;
}

.subproject-wrap .section3-box li.reviewer .hexagon {
    background: #33D4D6;
}

.subproject-wrap .section3-box li.reviewer .hexagon:before {
    border-bottom: 22px solid #33D4D6;
}

.subproject-wrap .section3-box li.reviewer .hexagon:after {
    border-top: 22px solid #33D4D6;
}

.subproject-wrap .section3-box li.reviewer .top {
    color: #00A2A4;
}

.subproject-wrap .section3-box li.reviewer .top span:nth-of-type(1)::before {
    background: #00A2A4;
}

.subproject-wrap .section3-box li.reviewer span:nth-of-type(2) {
    color: #00A2A4;
    margin-bottom: 0
}

.subproject-wrap .section3-box li.reviewer span:nth-of-type(3) {
    background: #33D4D6;
}

.subproject-wrap .section3-box li.reviewer:hover {
    background: #00A2A4;
}

.subproject-wrap .section3-box li.reviewer:hover .hexagon {
    background: #33D4D6;
}

.subproject-wrap .section3-box li.reviewer:hover .hexagon:before {
    border-bottom: 22px solid #33D4D6;
}

.subproject-wrap .section3-box li.reviewer:hover .hexagon:after {
    border-top: 22px solid #33D4D6;
}

.subproject-wrap .section3-box li.reviewer:hover .top {
    background: #33D4D6;
}

.subproject-wrap .section3-box li.reviewer:hover .top span:nth-of-type(1)::before {
    background: #fff;
    color: #33D4D6;
}

.subproject-wrap .section3-box li.reviewer:hover span:nth-of-type(2) {
    color: #fff;
}

/* 프로젝트 작업내역 */
.project-history {
    padding: 30px 0;
    margin-top: -70px;
}

.project-history p {
    font-size: 20px;
    line-height: 50px;
    height: 50px;
}

.project-history-btn {
    float: left;
}

.project-history-btn button {
    height: 40px;
    margin-right: 5px;
    width: 100px;
}

.project-history i {
    color: #555;
    margin-right: 10px;
    vertical-align: sub;
}

.subproject-wrap .history-tr:hover {
    background-color: #F3F6F9;
    cursor: pointer;
}

/* error */

.error_box {
    width: 100%;
    height: 100vh;
    -webkit-height: 100%;
    background: #F5F7F9;
}

.error {
    position: relative;
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 5px;
    top: 25%;
    background: #fff;
}

.error h3 {
    font-size: 50px;
    line-height: 50px;
    font-family: 'Roboto';
    color: #000;
    font-weight: 700;
    padding-top: 70px;
    display: flex;
    justify-content: center;
}

.error p {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding-top: 20px;
    font-size: 16px;
    color: #666;
    font-weight: 400;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    word-break: keep-all;
    flex-wrap: wrap;
}

.error p i {
    position: relative;
    /* top: 8px; */
    /* margin-right: 10px; */
    font-size: 30px;
}

.error .btn_box {
    background: #254799;
    margin-top: 70px;
    padding: 70px 10px;
    border-radius: 0 0 5px 5px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.error .btn_box a {
    display: inline-block;
    width: 100%;
    max-width: 200px;
    padding: 15px 0;
    /* height: 50px;
    line-height: 50px; */
    color: #fff;
    border-radius: 25px;
    background: #2C87F0;
    font-size: 16px;
    /* margin: 0 10px; */
    font-weight: 400;
}

.error .btn_box a:hover {
    background: #fff;
    color: #02007c;
}

.error .btn_box a i {
    position: relative;
    top: 2px;
    margin-right: 10px;
    font-size: 20px;
}

#code {
    position: absolute;
    top: -62px;
    width: 100%;
    max-width: 500px;
    text-align: center;
    font-size: 7em;
    font-weight: 600;
    color: white;
}

@media(max-width:499px) {
    .error .btn_box a {
        max-width: none;
    }

    .error .btn_box {
        padding: 50px 10px;
        margin-top: 50px;
    }

    .error h3 {
        padding-top: 50px;
    }

    .error p {
        padding: 10px 10px 0;
    }
}

@media(max-width:357px) {
    .error p {
        gap: 0;
    }
}

/* error */

/* numbercheck */
.nc_box {
    height: 0vh;
    -webkit-height: 100%;
    background: #F5F7F9;
}

.nc {
    position: relative;
    text-align: center;
    width: 500px;
    margin: 0 auto;
    border-radius: 5px;
    top: 25%;
    background: #fff;
}

.nc h3 {
    font-size: 50px;
    line-height: 50px;
    font-family: 'Roboto';
    color: #000;
    font-weight: 700;
    padding-top: 70px;
}

.nc p {
    width: 400px;
    margin: 0 auto;
    padding-top: 20px;
    font-size: 16px;
    color: #666;
    font-weight: 400;
    text-align: center;
}

.nc p i {
    position: relative;
    top: 8px;
    margin-right: 10px;
    font-size: 30px;
}

.nc .btn_box {
    background: #254799;
    margin-top: 70px;
    padding: 70px 0;
    border-radius: 0 0 5px 5px;
}

.nc .btn_box a {
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    border-radius: 25px;
    background: #2C87F0;
    font-size: 16px;
    margin: 0 10px;
    font-weight: 400;
}

.nc .btn_box a:hover {
    background: #fff;
    color: #02007c;
}

.nc .btn_box a i {
    position: relative;
    top: 2px;
    margin-right: 10px;
    font-size: 20px;
}

/* 진행중 프로젝트 없음 */
.subproject-wrap .section3-box li.project-none, .subproject-wrap .section3-box li.project-none:hover {
    background: #fff;
}

.section3-box li.project-none {
    max-width: 1280px;
    text-align: center;
    margin-bottom: 80px;
    flex: auto;
    font-size: 20px;
    padding: 50px 0;
}

.section3-box li.project-none p {
    background: #F5F7F9;
    padding: 50px 0;
    font-size: 20px;
    font-weight: 400;
}

.section3-box li.project-none i {
    color: #aaa;
    display: block;
    margin-bottom: 20px;
}

.section3-box li.project-none:hover {
    transform: none;
    box-shadow: none;
    background: #F5F7F9;
}

/* 설명 박스 */
.text-box01::before {
    content: '\ea38';
    font-family: 'xeicon';
    font-size: 100px;
    position: absolute;
    left: 30px;
    top: 45%;
    display: inline-block;
    color: #bbb;
}

.text-box01 {
    position: relative;
    font-size: 16px;
    line-height: 25px;
    padding: 20px 30px 20px 160px;
    margin-bottom: 50px;
    text-align: left;
    border: 1px solid #ddd;
    background: #F5F7F9;
    font-weight: 400;
}

.text-box01 .text-small {
    margin: 10px 0;
    font-size: 14px;
    font-weight: 300;
}

/* 홈페이지 서비스 제한 안내 */
.service-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-image: url("../images/service-visual01.png");
    background-position: 50% 50%;
    background-size: cover;
    height: 100%;
    opacity: 0.9;
}

.service-visual::before {
    content: '';
    position: absolute;
    display: block;
    background-color: rgba(4, 14, 39, .5);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.service {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: 50%;
    width: 500px;
    background: rgba(255, 255, 255, .95);
    padding: 50px 0;
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
    font-size: 15px;
}

.service h2 {
    font-size: 35px;
    height: 35px;
    line-height: 35px;
    color: #222;
    text-align: center;
    font-weight: normal;
    margin-bottom: 40px;
}

.service-box {
    font-size: 15px;
    line-height: 28px;
    text-align: center;
    font-weight: 400;
}

.service-box .service-bg {
    background: #2C87F0;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
    padding: 20px 0;
    margin: 20px 0;
}

/* 회사소개 */
.company {
    margin-top: 50px;
    text-align: left;
    word-break: keep-all
}

.company strong {
    display: block;
    font-size: 30px;
    font-weight: 400;
    padding-bottom: 40px;
}

.company strong span {
    color: #2C87F0;
    font-weight: 700;
}

.company p {
    font-size: 20px;
    line-height: 35px;
    font-weight: 400;
    max-width: 600px;
}

.company1, .company2, .company3 {
    max-height: 350px;
    padding: 88px 0;
}

.company1 {
    background: url("../images/company-visual01.png") no-repeat;
    padding-left: 680px;
}

.company2 {
    background: url("../images/company-visual02.png") right no-repeat;
    margin: 70px 0;
    padding-right: 680px;
}

.company3 {
    background: url("../images/company-visual03.png") no-repeat;
    padding-left: 680px;
}

/* 프로젝트 체험하기 */
.experience-top, .experience {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #ddd;
}

.experience-top h4 {
    font-size: 30px;
    margin-bottom: 20px;
}

.experience-top p {
    font-size: 16px;
    color: #254799;
}

.experience h5 span, .project-way h5 span {
    position: relative;
    font-size: 25px;
    margin-bottom: 30px;
    display: inline-block;
}

.experience h5 span::after, .project-way h5 span::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -5%;
    bottom: 0px;
    width: 110%;
    height: 10px;
    background: #2C87F0;
    opacity: 0.5;
}

.experience .regular .slider-box {
    display: inline-block;
    background: #F5F7F9;
    margin: 0 12px 30px;
    text-align: left;
}

.experience .regular img {
    margin-bottom: 20px;
}

.experience .regular strong {
    font-size: 20px;
    padding: 0 20px;
    font-weight: 500;
}

.experience .regular p {
    height: 120px;
    font-size: 15px;
    padding: 20px;
    line-height: 20px;
}

.experience .regular a {
    font-size: 16px;
    font-weight: 400;
    color: #2C87F0;
    border: 1px solid #2C87F0;
    height: 40px;
    line-height: 40px;
    width: 100px;
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    margin: 0 0 20px 20px;
}

.experience .regular a:hover {
    transition: .3s all ease-in-out;
    background: #2C87F0;
    color: #fff;
}

.experience .regular .slider-box {
    position: relative;
    max-width: 250px;
    overflow: hidden;
}

.experience .regular .slider-box:hover {
    top: -10px;
    box-shadow: 0 2px 22px -1px rgba(0, 0, 0, 0.5);
    transition: .3s all ease-in-out;
}

.experience .regular .slider-box:hover img {
    transform: scale(1.1);
    transition: .3s all ease-in-out;
}

.experience .regular .experience-infor {
    height: auto;
    padding: 0;
    font-size: 16px;
}

.project-way .method {
    font-size: 16px;
    text-align: center;
}

.project-way .method p {
    margin-bottom: 20px;
}

.project-way .method li span {
    position: absolute;
    top: -15px;
    left: calc(50% - 15px);
    background: #2C87F0;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    color: #fff;
    line-height: 30px;
    font-family: 'Roboto';
    margin: 0 auto;
    font-weight: 500;
}

.project-way .method li {
    position: relative;
    width: 250px;
    height: 100px;
    padding: 20px 0;
    display: inline-block;
    background: #F5F7F9;
    line-height: 30px;
    margin: 0 11px;
    margin-top: 30px;
}

.project-way .method .red {
    font-size: 22px;
    font-weight: 600;
}

/* 프로젝트 소개 */
.project-infor {
    margin-top: 50px;
}

.project-infor h4 {
    font-size: 30px;
    text-align: center;
    margin-bottom: 50px;
}

.project-infor ol {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.project-infor li {
    width: 152px;
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin: 0 15px 20px;
}

.project-infor li::before {
    content: "";
    width: 152px;
    height: 152px;
    border: 1px solid #ddd;
    display: block;
    margin-bottom: 20px;
    background: center center no-repeat;
}

.project-infor li::after {
    content: "\e93e";
    position: absolute;
    font-family: "xeicon";
    font-size: 20px;
    top: 70px;
    right: -25px;
}

.project-infor li:last-child::after {
    display: none;
}

.project-infor .project-con {
    display: flex;
    align-items: center;
    margin-bottom: 5rem;
}

.project-infor .project-con > div, .project-infor .project-con > ol {
    width: 50%;
}

.project-infor.project04 ol, .project-infor.project05 ol, .project-infor.project06 ol, .project-infor.project07 ol {
    width: 100%;
}

.project-infor.project01 li:nth-of-type(1)::before {
    background-image: url("../images/project-01-01.png");
}

.project-infor.project01 li:nth-of-type(2)::before {
    background-image: url("../images/project-01-02.png");
}

.project-infor.project01 li:nth-of-type(3)::before {
    background-image: url("../images/project-01-03.png");
}

.project-infor.project04 li:nth-of-type(1)::before {
    background-image: url("../images/project-04-01.png");
}

.project-infor.project04 li:nth-of-type(2)::before {
    background-image: url("../images/project-04-02.png");
}

.project-infor.project04 li:nth-of-type(3)::before {
    background-image: url("../images/project-04-03.png");
}

.project-infor.project04 li:nth-of-type(4)::before {
    background-image: url("../images/project-04-04.png");
}

.project-infor.project04 li:nth-of-type(5)::before {
    background-image: url("../images/project-04-05.png");
}

.project-infor.project05 li:nth-of-type(1)::before {
    background-image: url("../images/project-05-01.png");
}

.project-infor.project05 li:nth-of-type(2)::before {
    background-image: url("../images/project-05-02.png");
}

.project-infor.project05 li:nth-of-type(3)::before {
    background-image: url("../images/project-05-03.png");
}

.project-infor.project06 li:nth-of-type(1)::before {
    background-image: url("../images/project-06-01.png");
}

.project-infor.project06 li:nth-of-type(2)::before {
    background-image: url("../images/project-06-02.png");
}

.project-infor.project06 li:nth-of-type(3)::before {
    background-image: url("../images/project-06-03.png");
}

.project-infor.project06 li:nth-of-type(4)::before {
    background-image: url("../images/project-06-04.png");
}

.project-infor.project06 li:nth-of-type(5)::before {
    background-image: url("../images/project-06-05.png");
}

.project-infor.project07 li:nth-of-type(1)::before {
    background-image: url("../images/project-07-01.png");
}

.project-infor.project07 li:nth-of-type(2)::before {
    background-image: url("../images/project-07-02.png");
}

.project-infor.project07 li:nth-of-type(3)::before {
    background-image: url("../images/project-07-03.png");
}

.project-work {
    display: flex;
    justify-content: space-between;
    text-align: left;
    font-size: 16px;
    line-height: 24px;
}

.project-work h5 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
}

.project-work > div:nth-of-type(2) {
    margin-left: 30px;
}

.project-work > div {
    flex: 1;
    background: #F5F7F9;
    border: 1px solid #ddd;
    padding: 30px;
}

.project-work dt {
    color: #254799;
    font-weight: bold;
    float: left;
    margin: 0 10px 15px 0;
}

.project-work dd {
    margin-bottom: 15px;
}

.project-work dd:last-child {
    margin-bottom: 0;
}

.vqainfor .project-work dd {
    padding-left: 96px;
}

.tqainfor .project-work {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.tsinfor .project-work dd {
    padding-left: 195px;
}

/* 프로젝트소개 탭 */
.tabsnav.proinfor {
    flex-wrap: wrap;
    justify-content: center;
}

.tabsnav.proinfor .tabs {
    font-size: 18px;
    flex: auto;
    margin: 0 1px 1px 0;
    height: 60px;
    padding: 21px 5px;
    color: #555;
    background: #D3E0EF;
    text-align: center;
    transition: color .3s;
    font-weight: 400;
}

.tabsnav.proinfor .tabs:hover {
    background: rgba(37, 71, 153, .7);
    color: #eee;
}

.tabsnav.proinfor .tabs.is-active {
    color: #fff;
    background: #254799;
    font-weight: 500;
}

/* 이미지 모달 */
.imgModalDialog {
    z-index: 1001;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 1;
    background: rgba(4, 14, 39, .7);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.imgModalDialog:target {
    opacity: 1;
    pointer-events: auto;
}

.find-imgModalBox {
    position: absolute;
    width: 1000px;
    height: auto;
    background: rgba(0, 0, 0, .5);
    z-index: 100;
    left: calc(50% - 200px);
    top: calc(50% - 300px);
    text-align: center;
}

.find-imgModalBox .img {
    width: auto;
    height: auto;
}

/* temp 모달 */
.tempModalDialog {
    z-index: 1001;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 1;
    background: rgba(4, 14, 39, .7);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.tempModalDialog:target {
    opacity: 1;
    pointer-events: auto;
}

.find-tempModalBox {
    position: absolute;
    width: 500px;
    height: auto;
    background: rgba(255, 255, 255, 1);
    z-index: 100;
    left: calc(50% - 200px);
    top: calc(50% - 300px);
    text-align: center;
    max-height: 600px;
    overflow: auto;
}

.find-tempModalBox .temp {
    width: auto;
    height: auto;
}

.find-tempModalBox table tr {
    border-top: 1px solid #ddd
}

.find-tempModalBox table th,
.find-tempModalBox table td {
    color: #222;
    border-left: 1px solid #ddd;
}

.find-tempModalBox table th {
    padding: 15px 5px;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: -.3px;
    color: #222;
    font-weight: 700;
}

.find-tempModalBox table td {
    padding: 15px 5px;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: -.3px;
    color: #222;
}

/* sub이벤트 */
.sub-event > div span {
    font-size: 2rem;
    font-weight: 500;
    background: #eee;
    display: block;
    padding: 1.5rem 0;
    margin-bottom: 5rem;
    line-height: 3rem;
}

.sub-event > div:last-child span {
    margin-bottom: 0;
}

.sub-event em {
    padding: 0 1rem;
    margin-left: 2rem;
    color: #fff !important;
}

.sub-event em.green {
    background: #007677;
}

.sub-event em.blue {
    background: #254799;
}

.sub-event em.gray {
    background: #888;
}

/* 이벤트 */
.event-wrap {
    position: relative;
    min-height: 100%;
    text-align: center;
    font-weight: 400;
}

.event-top {
    background: url("../images/event01.png") bottom center #254799 no-repeat;
    height: 450px;
    padding: 170px 20px 0 20px;
}

.event-top h2 {
    font-size: 50px;
    color: #fff;
}

.event-top h2 span {
    font-size: 35px;
    display: block;
    font-weight: 400;
    color: #6BFDFF;
    margin-bottom: 20px;
}

.event-top p {
    margin-top: 30px;
    color: #B9F3FF;
    line-height: 30px;
    font-size: 20px;
}

.event-con {
    background: #2C87F0;
    padding: 50px 20px 100px 20px;
}

.event-con01 {
    font-size: 22px;
    line-height: 40px;
    color: #fff;
}

.event-con01 li:last-child {
    font-size: 17px;
}

.event-con01 strong {
    display: inline-block;
    font-size: 30px;
    font-weight: 500;
    line-height: 70px;
    width: 300px;
    height: 70px;
    background: #254799;
    margin: 20px 0 50px;
}

.event-con02, .event-con03, .event-con04, .event-con07, .event-con08, .event-con09 {
    background: #fff;
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px;
}

.event-con02 ol {
    margin-top: 10px;
}

.event-con02 li {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin: 0 15px;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    padding-top: 20px;
}

.event-con02 li:nth-of-type(1) {
    background: #254799;
}

.event-con02 li:nth-of-type(2) {
    background: #2959CC;
}

.event-con02 li:nth-of-type(3) {
    background: #2C87F0;
}

.event-con02 li:nth-of-type(4) {
    background: #64ACFF;
}

.event-con02 li:nth-of-type(5) {
    background: #91C4FF;
}

.event-con02 p {
    margin-top: 15px;
    font-size: 17px;
}

.event-con02 p:nth-of-type(2) {
    color: #777;
}

.event-con03 {
    margin-top: 30px;
    padding: 30px 15px;
}

.event-con03 h3, .event-con07 h3, .event-con08 h3, .event-con09 h3 {
    font-size: 30px;
    color: #254799;
    font-weight: 500;
}

.event-con03 li {
    display: inline-block;
    width: calc(50% - 32px);
    background: #f5f5f5;
    font-size: 20px;
    line-height: 35px;
    padding: 25px 0;
    margin: 30px 15px 0 15px;
}

.event-con03 li strong {
    display: block;
    color: #254799;
}

.event-con04 {
    background: #eee !important;
    margin-top: 30px;
    padding: 30px 15px;
}

.event-con04 div {
    width: calc(48% - 15px);
    display: inline-block;
    vertical-align: text-top;
    text-align: left;
    font-size: 15px;
    line-height: 30px;
    padding: 0 15px;
}

.event-con04 div:last-child {
    width: calc(52% - 15px);
}

.event-con04 h4 {
    background: #2C87F0;
    width: 100px;
    height: 30px;
    color: #fff;
    line-height: 30px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
}

.event-con04 a, .event-con09 a {
    color: #fff;
    background: #2959CC;
    width: 200px;
    border-radius: 20px;
    display: block;
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    font-size: 17px;
}

.event-con04 a:hover {
    background: #254799
}

.event-con05 {
    max-width: 1280px;
    margin: 0 auto;
    color: #fff;
    text-align: right;
    font-size: 15px;
    line-height: 25px;
    padding-top: 20px;
}

.event-ranking {
    display: flex;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
}

.event-ranking div {
    margin: 0;
}

.event-ranking .event-con02 {
    width: 57%;
}

.event-con06 {
    width: 40%;
    background: #fff;
    max-width: 1280px;
    margin: 0 auto;
    font-size: 17px;
    margin-left: 30px;
    line-height: 25px;
}

.event-con06 h4 {
    position: relative;
    background: #91C4FF;
    line-height: 40px;
}

.event-con06 h4 span {
    position: absolute;
    right: 30px;
    font-size: 13px;
    font-weight: 400;
}

.event-con06 ol {
    padding: 15px;
}

.event-con06 strong {
    color: #2959CC;
    font-size: 20px;
}

.event-con06 p {
    color: #FF781C;
    font-size: 15px;
    margin-top: 15px;
}

.event-con07 {
    margin-top: 30px;
    padding: 30px 15px;
}

.event-con07 p {
    font-size: 20px;
    margin: 20px 0;
    line-height: 30px;
}

.event-con07 ul {
    display: flex;
    font-size: 16px;
}

.event-con07 li {
    margin: 0 15px;
    width: calc(50% - 32px);
    background: #f6f6f6;
    padding: 20px;
}

.event-con07 li span {
    line-height: 30px;
    display: block;
}

.event-con07 li strong {
    font-size: 20px;
}

.event-con07 li img {
    margin-top: 20px;
}

/* 이벤트2 */
.event2 .event-top {
    background: url("../images/event09.png") bottom center #33D4D6 no-repeat;
    height: 420px;
    padding: 140px 20px 0 20px;
}

.event2 .event-top h2 {
    color: #00595A;
}

.event2 .event-top h2 span {
    color: #FFFB70;
}

.event2 .event-top p {
    color: #DFFAFF;
}

.event2 .event-con {
    background: #007677;
}

.event2 .event-con03 h3, .event2 .event-con03 li strong, .event-con08 h3, .event-con09 h3, .event2 .event-con07 h3 {
    color: #007677;
}

.event2 .event-con03 li strong span {
    text-decoration: line-through;
}

.event2 .event-con03 li strong em {
    background: #007677;
    color: #fff;
    padding: 0 3px;
}

.event2 .event-con04 h4 {
    background: #007677;
}

.event2 .event-con04 a, .event-con09 a {
    background: #33D4D6;
}

.event2 .event-con04 a:hover, .event2 .event-con09 a:hover {
    background: #007677;
}

.event2 .event-con07 ul {
    margin-top: 30px;
}

.event-con08, .event-con09 {
    margin-top: 30px;
    padding: 30px 15px;
}

.event-con08 ul {
    font-size: 16px;
}

.event-con08 li {
    margin: 0 15px;
    background: #f6f6f6;
    padding: 20px;
    margin-top: 20px;
}

.event-con08 li span {
    line-height: 30px;
    display: block;
}

.event-con08 li strong {
    font-size: 20px;
}

.event-con09 ul {
    background: #f5f5f5;
    margin: 30px 15px;
    padding: 20px;
}

.event-con09 li {
    font-size: 16px;
    line-height: 30px;
    display: block;
}

.event-con09 a {
    display: inline-block;
    margin-top: 0;
}

/* 이벤트3 */
.event3 .event-top {
    background: url("../images/event06.png") bottom center #254799 no-repeat;
    height: 450px;
    padding: 170px 20px 0 20px;
}

.event3-con01, .event3-con02 {
    background: #fff;
    max-width: 1280px;
    margin: 0 auto;
    font-size: 25px;
    margin-bottom: 30px;
    line-height: 40px;
    font-weight: 500;
}

.event3-con01 h4, .event3-con02 h4 {
    position: relative;
    background: #B4D7FF;
    line-height: 50px;
    font-size: 20px;
}

.event3-con01 ol {
    padding: 30px;
    display: inline-block;
}

.event3-con01 ol li {
    color: #333;
    line-height: 40px;
}

.event3-con01 ol li span {
    margin-left: 10px;
}

.event3-con01 ol > li:first-child {
    font-size: 30px;
    color: #254799;
    font-weight: 700;
    margin-bottom: 20px;
}

.event3-con01 ol div {
    text-align: left;
    display: inline-block
}

.event3-con01 ol li strong {
    background: #2C87F0;
    color: #fff;
    width: 60px;
    line-height: 30px;
    display: inline-block;
    margin-right: 10px;
    text-align: center;
}

.event3-con01 ol > li:first-child strong {
    background: #254799;
    width: 75px;
    line-height: 40px;
}

.event3-con02 p {
    padding: 30px;
}

.event3-con02:nth-of-type(3) p {
    max-width: 770px;
    margin: 0 auto;
}

.event3-con03 {
    max-width: 1280px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 35px;
    color: #fff;
}

/* 이벤트2 */
.event2 .event3-con01 {
    margin-bottom: 0;
    font-size: 20px;
}

.event2 .event3-con01 h4 {
    background: #33D4D6;
    color: #fff;
}

.event2 .event3-con01 ol > li:first-child {
    font-size: 20px;
    color: #007677;
    margin-bottom: 0
}

.event2 .event3-con01 ol > li:first-child strong {
    background: #007677;
    line-height: 30px;
}

.event2 .event3-con01 ol li strong {
    background: #33D4D6;
}

/* 이벤트2 결과발표 */
.event2 .event3-con01 div {
    text-align: center;
}

.event2 .event3-con01 span {
    padding: 2rem 1rem 0 0;
    display: inline-block;
}

.event2 .event3-con01 img {
    padding: 2rem 0;
}

.event2 .event3-anking {
    max-width: 128rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.event2 .event3-anking div {
    flex: 1
}

.event2 .event3-anking > div:nth-of-type(1) {
    margin-right: 1rem;
}

/* 이벤트4, 이벤트5 */
.event4 .event-top {
    max-width: 128rem;
    margin: 0 auto;
    background: url("../images/event15.png") right 10rem #fff no-repeat;
    height: 45rem;
    padding: 15rem 2rem 0 2rem;
    text-align: left;
}

.event4 .event-top h2 {
    font-size: 5rem;
    color: #33D4D6;
}

.event4 .event-top h2 span {
    display: inline;
    font-size: 5rem;
    font-weight: 600;
    margin-left: 1rem;
    color: #007677;
}

.event4 .event-top strong {
    margin: 3.5rem 0;
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 500;
}

.event4 .event-top p {
    color: #333;
    margin-top: 0;
    line-height: 2.5rem;
    font-size: 1.6rem;
}

.event4 .event-top p.sharp {
    font-size: 2rem;
    font-weight: 400;
    line-height: 3.2rem;
}

.event4 .event-top p.sharp span {
    background: #007677;
    color: #fff;
    padding: 0 .5rem;
}

.event4 .event-top p.sharp span:nth-of-type(2) {
    background: #0ba5a7;
}

.event4 .event-top p.sharp span:nth-of-type(3) {
    background: #33D4D6;
}

.event4 .event-con {
    background: #D4F5F9;
}

.event4 .event-con .event-con01 {
    color: #333;
}

.event4 .event-con .event-con01 p {
    margin-bottom: 2rem;
}

.event4 .event-con .event-con01 em {
    display: block;
    color: #007677;
    font-weight: 600;
}

.event4 .event-con .event-con01 .event-con01-small {
    font-size: 95%;
}

.event4 .event-con .event-con07 h3 span {
    display: block;
    font-size: 2rem;
    margin: 1rem 0;
    color: #333;
    font-weight: 400;
}

.event4 .event-con09 a {
    margin: 1rem;
}

.event4 .table-box {
    margin: 0 1.5rem;
}

.event4 .table-box table {
    display: table;
}

.event4 .table-box table thead, .event4 .table-box table tbody {
    display: table-header-group;
}

.event4 .table-box table th, .event4 .table-box table td {
    display: table-row;
}

.event4 .table-box table tr {
    position: inherit;
    display: table-row;
    padding: 0;
}

.event4 .table-box table th {
    display: table-cell;
    background: #f5f5f5;
}

.event4 .table-box table td {
    text-align: center;
    padding: 0.5rem;
    display: table-cell;
}

.event4 .table-box td + td, .event4 .table-box th + th {
    border-left: 1px solid #ddd;
}

.event4 .event-con04 h4 {
    background: #007677;
}

.event4 .event-con04 div {
    vertical-align: top;
}

.event4 .event-con04 div:nth-of-type(1) {
    width: 59%;
}

.event4 .event-con04 div:nth-of-type(2) {
    width: 39%;
}

.event4 .event3-anking {
    max-width: 128rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.event4 .event3-anking div {
    flex: 1;
    font-size: 2rem;
}

.event4 .event3-anking div div {
    padding: 3rem 0;
}

.event4 .event3-anking > div:nth-of-type(1) {
    margin-right: 1rem;
}

.event4 .event3-con01 h4 {
    background: #8BE4E5;
}

.event4 .event3-anking .event3-con01 {
    margin-bottom: 0;
}

.event4 .event3-con01 .ranking li {
    font-size: 2rem;
    color: #333;
    font-weight: 400;
}

.event4 .event3-con01 .ranking li:first-child {
    margin-bottom: 0;
}

.event4 .event-con07 h3 {
    color: #007677;
}

.event5 h3 {
    color: #254799;
}

.event5 .event-top {
    max-width: 128rem;
    margin: 0 auto;
    background: url("../images/event16.png") right 8rem #fff no-repeat;
    height: 45rem;
    padding: 17rem 2rem 0 2rem;
    text-align: left;
}

.event5 .event-top h2 {
    font-size: 3rem;
    color: #2C87F0;
}

.event5 .event-top h2 span {
    display: block;
    font-size: 5rem;
    font-weight: 600;
    margin-left: 0;
    color: #254799;
    margin-top: 1rem;
}

.event5 .event-top p {
    color: #333;
    margin-top: 3rem;
    line-height: 3rem;
    font-size: 2rem;
}

.event5 .event-con {
    background: #E2F6FF;
}

.event5 .event-con .event-con01 em {
    color: #2C87F0;
}

.event5 .event-con09 a {
    background: #2C87F0;
    margin: 0;
}

.event5 .event-con04 h4 {
    background: #2C87F0;
}

.event5 .event-con09 ul {
    margin-bottom: 0;
}

.event5 .event3-anking {
    max-width: 128rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.event5 .event3-anking div {
    flex: 1;
    font-size: 2rem;
}

.event5 .event3-anking div div {
    padding: 3rem 0;
}

.event5 .event3-anking > div:nth-of-type(1) {
    margin-right: 1rem;
}

.event5 .event3-con01 h4 {
    background: #B4D7FF;
}

.event5 .event3-anking .event3-con01 {
    margin-bottom: 0;
}

.event5 .event3-con01 .ranking li {
    font-size: 2rem;
    color: #333;
    font-weight: 400;
}

.event5 .event3-con01 .ranking li:first-child {
    margin-bottom: 0;
}

.event5 .event-con07 h3 {
    color: #254799;
}

.ranking-table {
    max-width: 128rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: 2rem;
}

.ranking-table div {
    flex: 1;
    font-size: 2rem;
    margin: 15px
}

.ranking-table div div {
    padding: 3rem 0;
}

/*.ranking-table > div:nth-of-type(1) { margin-right: 1rem;}*/
.ranking-table .event3-con01 h4 {
    background: #8BE4E5;
}

.ranking-table .event3-con01 {
    margin-bottom: 0;
}

.ranking-table .table {
    margin: 0;
    border-top: 1px solid #55CDC6;
    border-bottom: 1px solid #D3E6E5;
    padding: 0 !important;
    font-size: 1.6rem !important;
    font-weight: 400;
    word-break: break-all;
}

.ranking-table .table table thead {
    border-bottom: 1px solid #D3E6E5;
}

.ranking-table .table table tr + tr {
    border-top: 1px solid #D3E6E5;
}

.ranking-table .table table th {
    padding: 1rem;
    width: 25%;
    line-height: 2.5rem;
    font-weight: 500;
    background: #F5FCFB;
    text-align: center;
    border-right: 1px solid #D3E6E5;
    border-left: 1px solid #D3E6E5;
}

.ranking-table .table table td {
    padding: 1.8rem 1rem;
    line-height: 2.5rem;
    text-align: center;
    border-right: 1px solid #D3E6E5;
    border-left: 1px solid #D3E6E5;
}

.ranking-table div:nth-of-type(2) table td {
    padding: .1rem;
}

.ranking-table .table th + th, .ranking-table td + td {
    border-left: 1px solid #D3E6E5;
}

.ranking-text {
    font-size: 1.6rem !important;
}

@media all and (max-width: 1279px) {
    .sub-wrap {
        padding: 30px 20px 100px;
    }

    #subgnb-wrap {
        margin-left: -20px;
    }

    /* 회사소개 */
    .company strong {
        display: block;
        font-size: 25px;
        font-weight: 400;
        padding-bottom: 30px;
    }

    .company strong span {
        color: #2C87F0;
        font-weight: 700;
    }

    .company p {
        font-size: 16px;
        line-height: 30px;
        font-weight: 400;
        max-width: 600px;
    }

    /* 이벤트 */
    .event-ranking {
        display: block;
    }

    .event-ranking div {
        margin: 0 auto;
    }

    .event-ranking .event-con02 {
        width: 100%;
        margin-bottom: 30px;
    }

    .event-con06 {
        width: 100%;
    }
}

@media all and (max-width: 1135px) {
    /* 프로젝트 소개 */
    .project-infor .project-con {
        display: block;
        margin-bottom: 3rem;
    }

    .project-infor .project-con > div, .project-infor .project-con > ol {
        width: 100%;
    }

    .project-infor .project-con > ol {
        margin-top: 5rem;
    }
}

@media all and (max-width: 1023px) {
    .submenu-list > li {
        font-size: 16px;
    }

    /* 공지사항 list */
    .list-wrap .table-box table td {
        padding: 0 20px
    }

    .table-box table {
        display: block;
        width: 100%;
    }

    .table-box table thead {
        display: none;
    }

    .table-box table tbody, .table-box table td {
        display: block;
    }

    .table-box table tr {
        position: relative;
        display: block;
        padding: 24px 0
    }

    .table-box table td {
        overflow: hidden;
        text-align: left;
        padding: 0;
    }

    .table-box table td a {
        display: block;
    }

    .table-box table .list-important a {
        padding-left: 0;
    }

    .table-box table .list-important a:before {
        position: static;
        margin-right: 5px
    }

    .table-box table td a:hover {
        text-decoration: none
    }

    .table-box table td.list-number {
        display: none;
    }

    .table-box table td.category {
        display: block;
    }

    .table-box table .list-date, .table-box table .complete, .table-box table .ing, .table-box table .add {
        display: table-cell;
        vertical-align: middle;
    }

    .table-cell.table-box table tr {
        overflow: hidden;
    }

    .table-cell.table-box table td.cell {
        width: 25%;
        display: inline-block;
        float: left;
        height: 30px;
        line-height: 30px;
    }

    /* 회사소개 */
    .company {
        text-align: center;
    }

    .company1, .company2, .company3 {
        max-height: 350px;
        padding: 0;
    }

    .company p {
        max-width: 600px;
        margin: 0 auto;
    }

    .company1 {
        background: url("../images/company-visual01.png") center top no-repeat;
        padding: 380px 0 120px;
    }

    .company2 {
        background: url("../images/company-visual02.png") center top no-repeat;
        padding: 380px 0 120px;
    }

    .company3 {
        background: url("../images/company-visual03.png") center top no-repeat;
        padding: 380px 0 120px;
    }

    /* 이벤트 */
    .event-top {
        background-size: 90%;
    }

    .event-con03 li {
        font-size: 15px;
        line-height: 25px;
    }

    .event-con04 div {
        width: 100%;
    }

    .event-con04 div:last-child {
        width: 100%;
        margin-top: 30px;
    }

    .event2 .event-top {
        background-size: 90%;
    }

    .event3 .event-top {
        background-size: 90%;
    }

    .event4 .event-top {
        background-size: 40%;
        background-position: right 140%;
    }

    .event4 .event-con04 div:nth-of-type(n) {
        width: 100%;
    }

    .event5 .event-top {
        background-size: 40%;
        background-position: right 130%;
    }

    .ranking-table {
        position: relative;
        display: block;
    }

    .ranking-table .table table td {
        padding: 1rem;
    }

    .ranking-table div {
        overflow: hidden;
    }

    .ranking-table > div:nth-of-type(1) {
        margin-bottom: 3rem;
    }
}

@media all and (max-width: 824px) {
    /* 이벤트 */
    .event-con02 li {
        width: 70px;
        height: 70px;
        margin: 0 10px;
        font-size: 15px;
        line-height: 15px;
        color: #fff;
        padding-top: 20px;
    }

    .event-con03 li {
        font-size: 13px;
        line-height: 20px;
    }
}

@media all and (max-width: 767px) {
    .submenu-list > li {
        font-size: 12px;
        flex: auto;
    }

    .sub-wrap .sub-table-title {
        font-size: 16px;
        font-weight: 400;
        float: none;
        margin-bottom: 10px;
    }

    .work-box .work, .work-box .credit {
        width: 100%;
    }

    .work-box .work {
        margin-bottom: 10px;
    }

    .grade p {
        line-height: 25px;
        font-size: 15px;
    }

    .project-history p {
        font-size: 15px;
    }

    .project-history-btn {
        float: none;
        margin-bottom: 20px;
    }

    .list-form-box {
        justify-content: center;
    }

    /* 프로젝트 소개 */
    .project-work {
        display: block;
        max-width: 640px;
        margin: 0 auto;
    }

    .project-work > div:nth-of-type(2) {
        margin-left: 0;
        margin-top: 30px;
    }

    /* 이벤트 */
    .event-con03 li {
        display: block;
        width: calc(100% - 30px);
        font-size: 17px;
        line-height: 35px;
        padding: 15px;
        margin-top: 20px;
    }

    .event-con07 p {
        font-size: 15px;
    }

    .event-con07 ul {
        display: block;
        font-size: 14px;
    }

    .event-con07 li {
        width: calc(100% - 30px);
    }

    .event-con07 li img {
        margin-top: 0;
    }

    .event-con07 li:last-child {
        margin-top: 20px
    }

    .event3-con01, .event3-con02 {
        font-size: 17px;
        line-height: 35px;
    }

    .event3-con01 ol > li:first-child {
        font-size: 25px;
    }

    .event3-con03 {
        font-size: 15px;
        line-height: 30px;
    }

    .event2 .event3-con01 {
        font-size: 17px;
        line-height: 35px;
    }

    .event4 .event-top {
        background-size: 40%;
        background-position: right 110%;
        padding-top: 14rem;
    }

    .event4 .event-top h2 {
        font-size: 3.5rem;
    }

    .event4 .event-top h2 span {
        font-size: 3.5rem;
        display: block;
        margin-left: 0;
        margin-top: 1rem;
    }

    .event4 .event-top strong {
        margin: 2rem 0;
        display: inline-block;
        font-size: 2rem;
    }

    .event4 .event-top p.sharp {
        font-size: 1.6rem;
        line-height: 2.5rem;
    }

    .event5 .event-top {
        background-size: 40%;
        background-position: right 115%;
        padding-top: 17rem;
    }

    .event5 .event-top h2 {
        font-size: 2.5rem;
    }

    .event5 .event-top p {
        font-size: 1.6rem;
        line-height: 2.5rem
    }

    /* sub이벤트 */
    .sub-event > div span {
        font-size: 1.4rem;
        padding: 1rem 0;
        margin-bottom: 3rem;
    }
}

@media all and (max-width: 600px) {
    /* 서브 이미지 */
    .sub-visual2::after {
        height: 180px;
    }

    .sub-visual2 img {
        height: 260px;
    }

    .sub-wrap h2.subject2 {
        position: relative;
        top: -160px;
        font-size: 30px;
        font-weight: 500;
        color: #fff;
        text-align: center;
    }

    .sub-wrap .sub-title {
        font-size: 14px;
        margin-bottom: 20px;
        font-weight: 400;
    }

    .label-input-group {
        display: block;
        text-align: left;
        line-height: inherit;
        margin-bottom: 15px;
    }

    .label-input-group label {
        line-height: 16px;
    }

    .label-input-group input, .label-input-group select, .label-input-group textarea, .label-input-group .flie em {
        margin-top: 10px;
    }

    .label-input-group button {
        margin-top: 10px;
    }

    .label-input-group .radio {
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: 14px;
    }

    .label-input-group span.column {
        margin-top: 10px;
        margin-bottom: 10px
    }

    .label-input-group span.column label {
        margin-right: 5px;
        line-height: 30px;
        font-size: 14px;
    }

    .list-btn {
        float: none;
    }

    .btn.listbtn1 {
        padding: 15px 70px !important;
        font-size: 20px;
        font-weight: 700;
    }

    /* 설명 박스 */
    .text-box01::before {
        position: absolute;
        left: 10px;
        top: 35px;
        display: block;
        font-size: 50px;
    }

    .text-box01 {
        padding: 20px 30px 20px 70px;
    }

    input[type="checkbox"] + label, input[type="radio"] + label {
        padding-left: 20px;
    }

    /* 프로젝트 소개 */
    .tsinfor .project-work dt {
        width: 130px;
    }

    .tsinfor .project-work dd {
        padding-left: 130px;
    }

    /* 이벤트 */
    .event-top h2 {
        font-size: 35px;
    }

    .event-top h2 span {
        font-size: 30px;
    }

    .event-top p {
        font-size: 15px;
    }

    .event-con01 {
        font-size: 15px;
        line-height: 25px;
        color: #fff;
    }

    .event-con01 li:last-child {
        font-size: 13px;
        line-height: 20px;
    }

    .event-con05 {
        font-size: 13px;
        text-align: center;
    }

    .event-con03 li {
        font-size: 15px;
        line-height: 25px;
    }

    .event3-con01, .event3-con02 {
        font-size: 15px;
        line-height: 25px;
    }

    .event3-con01 ol > li:first-child {
        font-size: 20px;
    }

    .event3-con03 {
        font-size: 15px;
        line-height: 25px;
    }

    .event3-con01 ol div {
        text-align: center;
    }

    .event3-con01 ol li {
        line-height: 25px;
        margin-top: 10px;
    }

    .event2 .event3-con01 {
        font-size: 15px;
        line-height: 25px;
    }

    .event2 .event3-con01 ol > li:first-child {
        font-size: 20px;
    }

    .event2 .event3-anking {
        display: block;
    }

    .event2 .event3-anking div:nth-of-type(1) {
        margin-right: 0;
    }

    .event4 .event-top {
        height: 42rem;
    }

    .event4 .event-top strong {
        font-size: 1.5rem;
    }

    .event4 .event-top p {
        font-size: 1.3rem;
    }

    .event4 .event-top p.sharp {
        font-size: 1.3rem;
        line-height: 2.5rem;
    }

    .event5 .event-top h2 {
        font-size: 2rem;
    }

    .event5 .event3-anking {
        display: block;
    }

    .event5 .event3-anking div:nth-of-type(1) {
        margin-right: 0;
    }
}

@media all and (max-width: 404px) {
    /* 프로젝트 소개 */
    .project-infor li {
        width: 110px;
    }

    .project-infor li::before {
        width: 110px;
        height: 110px;
        background-size: 50%;
    }

    .project-infor li::after {
        top: 45px;
        right: -25px;
    }

    /* 체험하기 */
    .experience-top h4 {
        font-size: 25px;
        letter-spacing: -0.05em;
    }

    .experience-top p {
        font-size: 14px;
        letter-spacing: -0.05em;
    }

    /* 이벤트 */
    .event-con05 {
        font-size: 11px;
    }

    .event2 .event-top h2 span {
        font-size: 25px;
    }

    .event2 .event-top p {
        font-size: 12px;
    }

    .event3-con01 ol li span {
        display: block;
        margin-left: 0;
    }

    .event4 .event-top h2 span {
        font-size: 3rem;
    }

    .event4 .event-top p {
        font-size: 1.2rem;
    }

    .event5 .event-top h2 {
        font-size: 1.5rem;
    }
}