@charset "utf-8";

/* 색 설정 */
:root {
    --main-color: #0060B4;
    --black-color : #222;
    --white-color : #fff
}

/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* 스크롤 커스텀 */
html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: var(--main-color); border-radius: 10px;}

/* 드래그 블록 커스텀 */
::selection { background-color:var(--main-color); color:#fff; }



/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
}

body{ font-family: 'Pretendard', sans-serif; font-weight:400; font-size: 16px; letter-spacing: -0.04em; }
section{ display:block; }
a{ color:inherit; }

.inner{ width:1200px; margin:0 auto; }

.paging_box{ padding:60px 0; display:flex; align-items: center; justify-content: center; }
.paging_box .pg_page{ background-color:#fff; border:1px solid #E6E6E6; }
.paging_box .pg_current{ background-color: #023756; border-color: #023756; }
select{
    -webkit-appearance: none; -moz-appearance: none;  appearance: none;
    background: url('../img/common/select-icon.png') no-repeat 98% 50% #fff; 
}
select::-ms-expand{ display:none; }
p{ word-break: keep-all; }

@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 3vw; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */


.sub-section{ overflow: hidden; padding: 100px 0; }
.sub-section h2{ font-family: "Paperlogy"; font-size: 32px; font-weight: 600; }

@media screen and (max-width: 1250px) { 
    .sub-section h2{ font-size: 25px; }
}
@media screen and (max-width: 650px) { 
    .sub-section{ padding: 50px 0; }
    .sub-section h2{ font-size: 20px; }
}

/* .learn .sub-section */
.sub .menu-list{ margin-top: 45px; display: flex; flex-wrap: wrap; }
.sub .menu-list + .boardArti{ margin-top: 40px; }
.sub .menu-list > li{ flex-grow: 1;  }
.sub .menu-list .item{ font-weight: 600; display: block; width: 100%; text-align: center; background-color: #fff; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15); padding: 16px 10px; }
.sub .menu-list .item.on{ background-color: #023756; color: #fff; }

.learn .sub-menu{ display: flex; align-items: center; position: relative; margin-top:20px; }
.learn .sub-menu .pn-btn-div{ display: flex; align-items: center; justify-content: space-between; position: absolute; width: calc(100% + 40px); margin-left: -20px; }
.learn .sub-menu .pn-btn-div .pnBtn{ position: relative; z-index: 1; background-color: transparent; border: none; }
.learn .sub-menu .swiper{ overflow: hidden; width: 100%; }
.learn .sub-menu .item{ transition: color .3s, border .3s; font-size: 18px; border-radius: 4px; border: 1px solid #CCC; display: block; width: 100%; padding: 15px; text-align: center;  }
.learn .sub-menu .item.on{ color: #023756; border-color: #023756; }
.learn .sub-menu .item:hover{ color: #023756; border-color: #023756; }

.learn .search-div{ margin-top: 16px; background-color: #F7F7F7; border-radius: 4px; padding: 20px 14px; display: flex; align-items: center; gap: 8px; }
.learn .search-div .ipt{ border-radius: 4px; padding: 20px; }
.learn .search-div .search-wrap{ display: flex; align-items: center; position: relative; width: 888px; flex-shrink: 0; position: relative; }
.learn .search-div .search-wrap .search-btn{ padding: 10px; top: 0; height: 100%; background: transparent; border: none; position: absolute; right: 10px;  }
.learn .search-div select.ipt.sort{ background-position: right 20px center; }

@media screen and (max-width: 1250px) { 
    .learn .sub-menu .item{ font-size: 16px;  }
    .learn .search-div .search-wrap{ width: 60%; }
    .learn .sub-menu .pn-btn-div{ width: calc(100% + 5vw); margin-left: -2.5vw;  }
    .learn .search-div .search-wrap .search-btn{ right: 0; }
}
@media screen and (max-width: 950px) { 
    .learn .search-div .search-wrap .search-btn .icon{ width: 20px; }
    .learn .search-div .ipt{ padding: 10px; }
    .learn .sub-menu{ padding: 0 4vw; }
    .learn .sub-menu .pn-btn-div { margin-left: 0; width: 100%; left: 0; }
    .learn .sub-menu .pn-btn-div .icon{ width: 2vw; }
}
@media screen and (max-width: 650px) { 
    .sub .menu-list .item{ font-size: 14px; }   
    .learn .sub-menu .item{ font-size: 14px; padding: 10px 5px; }
    .learn .search-div{ flex-wrap: wrap; }
    .learn .search-div .search-wrap{ width: 100%; }
    .learn .search-div select.ipt.sort{ width: calc(50% - 4px); }
}


.sub .all-check{ display: flex; align-items: center; gap: 10px; margin-top: 60px; }
.sub .learn-list{ margin-top: 30px; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 18px; }
.sub .learn-list > li{ align-items: flex-start; gap: 10px; display: flex; flex-direction: column; }
.sub .empty_list{ width: 100%; margin: 50px 0; text-align: center; }
.sub .learn-list > li > a{ width: 100%; flex-grow: 1; }
.sub .learn-list .item{ width: 100%; display: flex; flex-direction: column; height: 100%; flex-grow: 1; overflow: hidden; }
.sub .learn-list .item .img-box{ position: relative; height: 218px; background-image: url('../img/sub/learn/example.svg'); background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px; }
.sub .learn-list .item .img-box a{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sub .learn-list .item .img-box .heart{ z-index: 9; display: flex; align-items: center; justify-content: center; background-color: #023756; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: none; }
.sub .learn-list .item .img-box .heart .active{ display: none; }
.sub .learn-list .item .img-box .heart.on .active{ display: block; }
.sub .learn-list .item .img-box .heart.on .default{ display: none; }
.sub .learn-list .item .title{ transition: color .3s; font-weight: 600; font-size:18px; padding:15px 0 5px 0; border-bottom: 1px solid #92BCE2; }
.sub .learn-list .item:hover .title{ color: #023756; }
.sub .learn-list.talk .item .title{ padding: 15px 0; padding-bottom: 0; font-weight: 600; background-color: unset; color: #222; }
.sub .learn-list .item .title .text{ line-height: 1.8em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;  }
.sub .learn-list .item .content{ color: #7F7F7F; flex-grow: 1; width: 100%; padding: 11px 0; line-height: 1.5em; }
.sub .learn-list.hit-list .item .content{ color: #777; }
.sub .learn-list .item .content .text{ width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;  }
.tag-list{ padding: 15px 0; padding-top: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.tag-list.view{ margin-top: 30px; padding: 0; }
.tag-list .tag{ border-radius: 100px; color: #fff; padding: 5px 10px; font-size: 14px; background-color: #2F72AF; }
.sub .learn-list .item .hit{ padding: 15px 0; padding-top: 0; font-size: .9em; }

@media screen and (max-width: 1250px) { 
    .sub .learn-list .item .img-box{ height: 16.5vw; }
    .sub .learn-list .item .content{ padding: 10px 0; }
    .sub .learn-list .item .title{ padding: 10px 0; }
    .sub .learn-list.talk .item .title{ padding: 20px 20px; padding-bottom: 0; }
    .tag-list{ padding: 20px 0; padding-top: 0; }
     .sub .learn-list .item .hit{ padding: 20px 20px; padding-top: 0; }
}
@media screen and (max-width: 950px) { 
    .sub .learn-list{ grid-template-columns: repeat(2,1fr); }
    .sub .learn-list .item .img-box{ height: 25vw; }
}
@media screen and (max-width: 650px) { 
    .sub .learn-list{ grid-gap: 10px; }
    .sub .learn-list .item .title{ padding: 10px 0; font-size: 16px; }
    .sub .learn-list .item .content{ padding: 10px 5px; font-size: 14px; }
    .sub .learn-list.talk .item .title{ padding: 20px 5px; padding-bottom: 0; }
    .tag-list{ padding: 20px 5px; padding-top: 0; }
    .tag-list .tag{ font-size: 13px; }
    .sub .learn-list .item .hit{ padding: 20px 5px; padding-top: 0; }
}
@media screen and (max-width: 400px) { 
    .sub .learn-list{ grid-template-columns: repeat(1,1fr); }
    .sub .learn-list .item .img-box{ height: 58vw; }
    .sub .learn-list .item .title{ padding: 10px 0; }
    .sub .learn-list .item .content{ padding: 10px 0; padding-bottom: 20px;  }
    .sub .learn-list.talk .item .title{ padding: 20px 20px; padding-bottom: 0; }
    .tag-list{ padding: 20px 0; padding-top: 0; }
    .sub .learn-list .item .hit{ padding: 20px; padding-top: 0; }
}

/* .learning-path */
.learning-path .img-box-div{ padding: 20px 15px; padding-right: 80px; color: #fff; margin-top: 34px; display: flex; align-items: center; gap: 22px; border-radius: 10px; background-color: #023756; }
.learning-path .img-box-div .img-box{ flex-shrink: 0; width: 360px; height: 200px; border-radius: 10px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; }
.learning-path .img-box-div .title{ width: 100%; word-break: keep-all; padding-bottom: 10px; border-bottom: 1px solid #66A0D2; line-height: 1.5em; font-weight: 600; font-size: 22px; }
.learning-path .img-box-div .content{ margin-top: 10px; line-height: 1.5em; }
.learning-path .img-box-div .content b{ font-weight: 600; }
.learning-path .content-div{ width: 100%; }
.learning-path .ipt{ line-height: 1.25em; color: #222; }
.learning-path .ipt.small{  max-width:100%; width: 250px; } 
.learning-path .ipt#title{ min-height: 50px; }
.learning-path .ipt.topmargin{ margin-top: 5px; }
.learning-path textarea.ipt{ font-size: 16px; height: auto; resize: vertical; min-height: 140px; }
@media screen and (max-width: 1250px) { 
    .learning-path .img-box-div{ padding: 20px 15px; }
    .learning-path .img-box-div .title{ font-size: 18px; }
}
@media screen and (max-width: 950px) { 
    .learning-path .img-box-div{ flex-direction: column; }
    .learning-path .img-box-div .img-box{ width: 100%; height: 50vw; }
}
@media screen and (max-width: 650px) { 
    .learning-path .img-box-div{ padding: 10px; gap: 10px; }
    .learning-path .img-box-div .title{ font-size: 16px; }
    .learning-path .img-box-div .content{ font-size: 14px; padding-bottom: 10px; }
}



/* .sub.qna */
.sub.qna .qna-list{ margin-top: 28px; }
.sub.qna .qna-list > li + li{ margin-top: 6px; }
.sub.qna .qna-list .item{ background-color: #fff; border-radius: 10px; box-shadow: 4px 10px 4px 0 rgba(0, 0, 0, 0.15); }
.sub.qna .qna-list .item .qabox{ line-height: 1.5em; position: relative; font-size: 18px; font-weight: 600; padding: 20px; padding-left: 60px; display: flex; gap: 10px; justify-content: space-between; background-repeat: no-repeat; background-position: left 20px top 20px;  }
.sub.qna .qna-list .item .qbox{ background-image: url('../img/sub/sub4_3/q-icon.svg'); }
.sub.qna .qna-list .item .abox{ display: none; background-image: url('../img/sub/sub4_3/a-icon.svg'); }
.sub.qna .qna-list .item .abox::after{ content:''; position: absolute; width: calc(100% - 40px); background-color: #E4E4E4; height: 1px; left: 20px; top:0; }
.sub.qna .qna-list .item .arrow-btn{ flex-shrink: 0; border: none; background: transparent; }
.sub.qna .qna-list .item.on .arrow-btn .icon{ transform: rotate(180deg); }


@media screen and (max-width: 650px) { 
    .sub.qna .qna-list .item .qabox{ font-size: 16px; background-size: 20px; padding-left: 50px; }
}



/* header */
header{ background-color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); position: fixed; left: 0; top: 0; z-index: 99; width: 100%; padding: 15px 0; }
header .inner{ display: flex; align-items: center; justify-content: space-between; }
header .logo.white{ display: none; }
header .menu-list{ color: #8A8C8F; display: flex; align-items: center; gap: 50px; }
header .menu-list > li{ display: flex; align-items: center; justify-content: center; }
header .menu-list > li > a{ font-weight: 600; transition: color .5s; position: relative; }
header .menu-list > li > a::before{ content:''; display: block; background-color: #2F72AF; height: 4px; width: 0%; position: absolute; left: 0; bottom: -10px; transition: width .5s; }
header .menu-list > li > a:hover{ color: #023756; }
header .menu-list > li > a:hover::before{ width: 100%; }
header .menu-list .sub-list{ 
  padding-top: 10px;  transition: opacity .5s, visibility .5s; opacity:0; visibility: hidden; 
  flex-direction: column; position: relative; display: flex; align-items: center; justify-content: center; 
  color:#222; line-height: 2em; position: absolute; top: calc(100%); font-weight: 600; width: 220px; 
  text-align: center; border-radius: 4px; 
}
header .menu-list .sub-list.show{ opacity: 1; visibility: visible; }
header .menu-list .sub-list::before{ content:''; display: block; width: 10px; height: 10px; background-color: #204F79; position: absolute; top: 5px; transform: rotate(45deg); } 
header .menu-list .sub-list > li{ width: 100%;  background-color: #fff;  }
header .menu-list .sub-list > li:nth-child(1){ border-radius: 4px 4px 0 0 ; display: flex; align-items: center; justify-content: center; position: relative; background-color: #204F79; padding: 7px; font-size: 17px; color: #fff; }
header .menu-list .sub-list > li:nth-child(2){ padding-top:8px; }
header .menu-list .sub-list > li:last-child{ border-radius: 0 0 4px 4px; padding-bottom:12px; }
header .menu-list .sub-list > li > a{ transition: color .5s; }
header .menu-list .sub-list > li > a:hover{ color: #2F72AF; }
header .member-div{ display: flex; align-items: center; gap: 6px; }
header .member-div .item{ padding: 10px 30px; background-color: #023756; border-radius: 4px; color: #fff; font-weight: 600; }
header .menu-icon{ background-color: transparent; border: none; display: none; }
header .menu-icon .icon.white{ display: none; }

header.blue{ background-color: #0060B4; }
header.blue .logo.white{ display: block; }
header.blue .logo.default{ display: none; }
header.blue .menu-list{ color: #fff; }
header.blue .member-div .item{ background-color: #fff; color: #0060B4; }
header.blue .menu-icon .icon.white{ display: block; }
header.blue .menu-icon .icon.default{ display: none; }

@media screen and (max-width: 1100px) { 
    header .menu-list{ display: none; }
    header .menu-icon{ margin-left: 10px; display: block; }
    header .menu-icon .icon{ width: 20px; }
}
@media screen and (max-width: 650px) { 
    header .logo{ width: 100px; }
    header .member-div .item{ display: none; }
}


/* footer */
footer{ background-color: #222; color: #7F7F7F; padding: 22px 0; }
footer .inner{ gap: 20px; align-items: flex-end; display: flex; justify-content: space-between; flex-wrap: wrap; }
footer .full{ width: 100%; }
footer .logo{ display: block; }
footer .info-list{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
footer .info-list > li{ padding-right: 5px; }
footer .copy-right{ margin-top:10px; display: inline-block; opacity:.4; font-size: .8em; }
footer .privacy-btn{ color: #fff; }

@media screen and (max-width: 650px) { 
    footer{ font-size: 14px; }
    footer .logo{ width: 100px; }
}

/* .slide-menu */
.slide-menu{ transition: right .5s; overflow-y: scroll; padding: 50px 20px; width: 90%; max-width: 300px; background-color: #fff; color: #023756; position: fixed; right: -300px; top: 0; z-index: 999; height: 100%; }
.slide-menu.show{ right: 0; }
.slide-menu .btn-div{ display: flex; align-items: center; justify-content: flex-end; }
.slide-menu .btn-div .closeBtn{ background: transparent; border: none; }
.slide-menu .btn-div .closeBtn .icon{ width:20px; }
.slide-menu .menu-list{ font-family: 'Paperlogy'; margin-top: 30px; display: flex; flex-direction: column; }
.slide-menu .menu-list .item{ font-family: 'Paperlogy'; font-weight: 600; font-size: 20px; background: transparent; border: none; cursor: pointer; padding: 15px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.slide-menu .menu-list .item .arrow{ width: 10px; transition: transform .5s; }
.slide-menu .menu-list .item.on .arrow{ transform: rotate(-180deg); }
.slide-menu .menu-list .sub-menu{ display: none; }
.slide-menu .menu-list .sub-menu > li > a{ display: block; padding: 10px; color: #7f7f7f; }

.slide-menu .member-menu{ display: flex; align-items: center; justify-content: center; gap: 20px; }

.slide-menu-close-bg{ opacity: 0; visibility: hidden; cursor: pointer; position: fixed; z-index: 99; background-color: rgba(0, 0, 0, 0.15); width: 100%; height: 100%; left: 0; top: 0; }
.slide-menu-close-bg.show{ opacity: 1; visibility: visible; }


/* .pc-slide-menu */
.pc-slide-menu{ display: none; transition: opacity .3s, visibility .3s; opacity: 0; visibility: hidden; color: #fff; padding-top: 74px; position: fixed; left: 0; top: 0; width: 100%; background-color: #0060B4; z-index:97; }
.pc-slide-menu.show{ opacity: 1; visibility: visible; }
.pc-slide-menu .inner{ display: flex; }
.pc-slide-menu .item-div{ width: calc(100% / 4); padding: 30px 20px; border-left: 1px solid rgba(255,255,255,.4); }
.pc-slide-menu .item-div .item-title{ font-weight: 700; }
.pc-slide-menu .item-div .sub-list{ font-size: 14px; margin-top: 10px; line-height: 1.5em; }
.pc-slide-menu .item-div .sub-list > li + li{ margin-top: 5px; }

.pc-slide-close{ transition: opacity .3s, visibility .3s; opacity: 0; visibility: hidden; cursor: pointer; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color:rgba(0,0,0,.1); z-index: 96; }
.pc-slide-close.show{ opacity: 1; visibility: visible; }

@media screen and (max-width: 1100px) { 
    .pc-slide-close{ display: none; }
    .pc-slide-menu{ display: none; }
}


/* .main .video-section */
.main .video-section { background-color: hsl(208, 100%, 35%); min-height: 100vh; }
.main .video-section .video-content{ display: flex;  align-items: center; justify-content: center; position: relative; width: 100%; height: 100vh; overflow: hidden; }
.sec_top{ padding-top: 75px; }

@media screen and (max-width: 1440px) { 
  .main .video-section .video-content video{ width: auto !important; height: 100vh !important; }
}
@media screen and (max-width: 650px) { 
    .sec_top{ padding-top: 63px; }
}


/* .boardArti .lecture-label */
.boardArti .lecture-label{ margin-top: 20px; font-size: 18px; }
.boardArti .lecture-video{ height: 650px; }
.boardArti .lecture-info .title{ font-size: 20px; margin-top: 10px; color: #fff; padding: 14px; background-color: #023756; display: flex; align-items: center; justify-content: space-between;  }
.boardArti .lecture-info .heart_btn{ flex-shrink: 0; background: transparent; border: none; }
.boardArti .lecture-info .heart_btn .active{ display: none; }

.boardArti .lecture-info .heart_btn.on{ background: transparent; border: none; }
.boardArti .lecture-info .heart_btn.on .active{ display: block; }
.boardArti .lecture-info .heart_btn.on .default{ display: none; }

.boardArti .lecture-info .content{ padding: 14px; background-color: #F5F5F5; }
.boardArti .lecture-info .content b{ font-weight:700; }
.boardArti .lecture-info .content .viewContent{ font-size: 16px; }
.boardArti .lecture-info .content .viewContent p{ word-break: break-all; }
.boardArti .board-bottom-btn-div{ display: flex; align-items: center; justify-content: center; margin-top: 30px; }
.boardArti .board-bottom-btn-div .btn{ width: 100%; max-width: 194px; border-radius: 4px; text-align: center; color: #fff; background: #023756; padding: 12px 10px; font-size: 16px; font-weight: 400; height: auto; line-height: 1.5em;  }

@media screen and (max-width: 1250px) { 
    .boardArti .lecture-info .title{ font-size: 18px; }
    .boardArti .lecture-video{ height: 50vw; }
}
@media screen and (max-width: 950px) { 

}
@media screen and (max-width: 650px) { 
    .boardArti .lecture-info .content .viewContent{ font-size: 14px; }
    .boardArti .board-bottom-btn-div .btn{ padding: 10px; font-size: 14px; }
}

/* main.login */
main.login{ min-height: 100vh; padding: 100px 0; display: flex; align-items: center; justify-content: center; background-image: url('../img/login/login-background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
main.login .inner{ display:flex; align-items: center; justify-content: center; }
main.login .login-box{ background-color: #fff; width: 100%; max-width: 620px; border-radius: 10px; overflow-y: hidden; box-shadow: 10px 20px 15px 0 rgba(0, 0, 0, 0.15); }
main.login .login-box .login-title{ background: #023756; padding: 20px 10px; text-align: center; font-weight: 700; color: #fff; font-size: 26px; }
main.login .login-box .login-content{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px; }
main.login .login-box .form-list{ margin: 0 auto; width: 100%; max-width: 428px;  }
main.login .login-box .form-list > li + li{ margin-top: 10px; }
main.login .login-box .form-list .input{ background-repeat: no-repeat; background-size: 20px; background-position: left 20px center; border: none; width: 100%; padding: 20px; padding-left: 50px; border-radius: 100px; background-color: #f8f8f8; border: 1px solid #f8f8f8; }
main.login .login-box .form-list .input.id{ background-image: url('../img/login/id-icon.png'); }
main.login .login-box .form-list .input.pw{ background-image: url('../img/login/pw-icon.png'); }
main.login .login-box .form-list .input:focus-visible{ border: none; outline: none; }
main.login .login-box .loginBtn{ text-align: center; color: #7F7F7F; display: block; border: none; padding: 20px; margin-top: 14px; width: 100%; background-color: #D9D9D9; border-radius: 20px; max-width: 446px; }
main.login .login-box .loginBtn.bg-black{ background-color: #222; color: #fff; }
main.login .login-box .center-div{ margin-top: 13px; color: #7f7f7f; text-align: center; }
main.login .login-box .sns-login-div{ width: 100%; margin-top: 20px; display: flex; gap: 16px; }
main.login .login-box .sns-login-div .social-btn{ word-break: keep-all; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #391B1B; font-size: 14px; flex-grow: 1; padding: 12px; background-color: #FAE301; }
main.login .login-box .sns-login-div .social-btn.naver{ background-color: #01C73C; color: #fff; }


@media screen and (max-width: 650px) { 
    main.login .login-box .login-title{ font-size: 18px; padding: 20px 0; }
    main.login .login-box .login-content{ padding:40px 20px; }
    main.login .login-box .loginBtn{ padding:15px 10px; border-radius: 10px; }
    main.login .login-box .sns-login-div{ gap : 5px ; flex-direction: column; }
}

main.signup .signup-div{ margin: 0 auto; max-width: 380px; padding: 44px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center;  }
main.signup .signup-div .step-icon{ max-width: 80%; }
main.signup .signup-div .all_chk{ width: 100%; font-size: 14px; color: #fff; background-color: #023756; display: flex; align-items: center; gap: 5px; padding: 15px; margin-top: 24px; }
main.signup .signup-div .all_chk input[type="checkbox"]{ display: none; }
main.signup .signup-div .all_chk input[type="checkbox"] + .text{ position: relative; padding-left: 30px; }
main.signup .signup-div .all_chk input[type="checkbox"] + .text::before{ content:''; display: block; width: 20px; height: 20px; border: 1px solid #fff; position: absolute; left: 0; top: 0; }
main.signup .signup-div .all_chk input[type="checkbox"]:checked + .text::before{ background-image: url('../img/signup/wthie-check-icon.svg'); background-size: 60%; background-repeat: no-repeat; background-position: center; }

main.signup .signup-div .check_label{ padding: 10px 0; width: 100%; font-size: 14px; display: flex; align-items: center; gap: 5px; margin-top: 10px; }
main.signup .signup-div .check_label input[type="checkbox"]{ display: none; }
main.signup .signup-div .check_label input[type="checkbox"] + .text{ color: #7F7F7F; position: relative; padding-left: 30px; }
main.signup .signup-div .check_label input[type="checkbox"] + .text::before{ content:''; display: block; width: 20px; height: 20px; border: 1px solid #E4E4E4; position: absolute; left: 0; top: 0; }
main.signup .signup-div .check_label input[type="checkbox"]:checked + .text::before{ background-image: url('../img/common/checkbox_icon.png'); background-size: 100%; background-repeat: no-repeat; background-position: center; }

main.signup .signup-div .sroll-box{ margin-top:10px; border: 1px solid #D9D9D9; padding: 10px; font-size: 14px; line-height: 1.5em; color: #7f7f7f; height: 120px; overflow-y: scroll; }

main.signup .signup-div .next-btn{ max-width: 380px; border: none; display: block; margin: 15px auto; width: 100%; background-color: #023756; color: #fff; text-align: center; padding: 15px; }

main.signup .signup-div.result{ max-width: 100%; width: 100%; }
main.signup .signup-div.result .sign-up-title{ margin-top: 30px; font-size: 18px; color: #7f7f7f; }
main.signup .signup-div.result .sign-up-content{ word-break: keep-all; margin-top: 20px; text-align: center; color: #7f7f7f; line-height: 1.5em; margin-bottom: 30px; }

@media screen and (max-width: 650px) { 
    main.signup .signup-div.result{ max-width: 320px; }
    main.signup .signup-div.result .step-icon{ width: 50px; }
    main.signup .signup-div.result .sign-up-title{ font-size: 18px; }
    main.signup .signup-div.result .sign-up-content{ font-size: 14px; }
}

/* main.mypage */
main.mypage .mypage-title{ background-color: #023756; border-radius: 10px 10px 0 0; padding: 20px 35px; color: #fff; font-weight: 700; font-size: 24px; }
main.mypage .mypage-margin{ height: 50px; }
main.mypage .mypage-bar-title{ padding-bottom: 10px; border-bottom: 1px solid #E4E4E4; font-size: 26px; font-weight: 700; }
main.mypage .info-div{ margin-top: 10px; display: grid; grid-gap: 14px; grid-template-columns: repeat(3,1fr); }
main.mypage .info-div .item{ background-color: #FAFBFC; padding: 35px; border-radius: 10px; }
main.mypage .info-div .item .title{ color: #7f7f7f; }
main.mypage .info-div .item .content{ margin-top: 6px; }
main.mypage .info-div .item .mypage-btn{ display: inline-block; background: #023756; color: #fff; padding: 10px 15px; border-radius: 4px; }

main.mypage .formList .label{ color: #7f7f7f; }
main.mypage .formList > li.half{ width: calc(100% / 3); } 

main.mypage .mypage-btn-div{ display: flex; align-items: center; justify-content: center; margin-top: 40px; }
main.mypage .mypage-btn-div .modify-btn{ border-radius: 4px; padding: 20px 10px; text-align: center; background: #222; color: #fff; width: 100%; max-width: 340px; }


@media screen and (max-width: 1250px) { 
    main.mypage .mypage-title{ font-size: 18px; padding: 20px; }
    main.mypage .mypage-bar-title{ font-size: 20px; }
    main.mypage .info-div .item{ padding: 20px; }
}
@media screen and (max-width: 650px) { 
    main.mypage .info-div{ grid-gap: 5px; }
    main.mypage .info-div .item{ font-size: 14px; }
    main.mypage .formList > li.half{ width: calc(100%); } 
    main.mypage .info-div .item .title{ font-size: 13px; }
    main.mypage .info-div .item .mypage-btn{ padding: 5px; }
}


.modify-btn{ display: inline-block; padding: 0px 10px; border: 1px solid #efefef; border-radius: 4px; color: #7f7f7f; font-size: 14px; font-weight: 500; }






#find_info{ max-width: 350px; margin: 0 auto; }
#find_info .btn_submit{ margin-top: 30px; }

@media screen and (max-width: 650px) { 
  #find_info{ font-size: 14px; }
}

.admin_modify_menu{ margin-top: 10px; display: flex; justify-content: flex-end; gap: 5px; }
.admin_modify_menu .admin_btn{ padding: 5px 10px; border-radius: 4px; background-color: #fff; color: #7f7f7f; border:1px solid #7f7f7f; font-size: 14px;  }



#bo_list_total{ margin-top:20px; display: block; float: unset !important; }


#hd_pop{ width: 100%; }
@media screen and (max-width: 700px) {
    .hd_pops_con{ max-width: 100%; height:auto !important; min-height: 200px; }
    .hd_pops{ max-width: 95%; left: 2.5% !important; height: auto !important; min-height: 200px;  }
}