@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
.notosanskr * { 
 font-family: 'Noto Sans KR', sans-serif;
}


/*디지털아카이브*/
.da_content {
    background: #fec013;
}
.da_content_wrap {
    background: #fff;
    margin: 0 auto;
    width: 94%;
    min-height: 600px;
    border-radius: 17px;
    padding: 10px;
    box-sizing: border-box;
}
.da_content_wrap .da_tab ul {
    display: flex;
    justify-content: space-around;
    gap: 14px;
    border-bottom: 1px solid #ddd;
    padding: 0;
}
.da_content_wrap .da_tab ul li {
    width: auto;
    text-align: center;
    list-style: none;
}
.da_content_wrap .da_tab ul li.on {
    border-bottom: 1px solid #573d1c;
}
.da_content_wrap .da_tab ul li a {
    display: block;
    width: 100%;
    color:#b2b2b2;
    font-size: 4vw;
    font-weight: 900;
    padding: 1vw 0;
    box-sizing: border-box;
    text-decoration-line: none;
}
.da_content_wrap .da_tab ul li.on a {
    color:#573d1c;
}
.swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .swiper-slide {
    background-size: cover;
    background-position: center;
  }
  .mySwiper2 {
    height: 80%;
    width: 100%;
  }
  .mySwiper {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
  }
  .mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
  }
  .mySwiper .swiper-slide-thumb-active {
    opacity: 1;
  }
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .da_tab {
    margin-bottom: 30px;
  }
 
  .DigitalArchive01 .swiper-slide .info {
    padding-top: 20px;
    margin-top: 20px;
    border-top:1px solid #ddd;
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
    color:#000;
    font-weight: 700;
    min-height: 100px;
  }

  .DigitalArchive03 .img_box,
  .DigitalArchive07 .img_box {
	text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #b2b2b2;
    margin: 0 auto;
  }
  .DigitalArchive03 .img_box img,
  .DigitalArchive07 .img_box img {
    /*width: 100%;
    height: 100%;*/
	height:50vh;
    object-fit: cover;
  }
  .DigitalArchive03 .info,
  .DigitalArchive07 .info {
    margin: 15px 0 30px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
  }
  .DigitalArchive03 .info li,
  .DigitalArchive07 .info li {
    display: flex;
  }
  .DigitalArchive03 .info li span,
  .DigitalArchive07 .info li span {
    color:#573d1c;
    font-size: 15px;
    font-weight: 600;
  }
  .DigitalArchive03 .info li p,
  .DigitalArchive07 .info li p {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
  }
  .DigitalArchive07 .info li input {
    border: 1px solid #573d1c;
    padding: 4px;
    box-sizing: border-box;
    width: 60%;
  }
  .DigitalArchive03 .history,
  .DigitalArchive07 .history {
    font-size: 12px;
    line-height: 1.5;
    color:#000;
    font-weight: 600;
  }
  .DigitalArchive04 .DigitalArchive04_menu {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .DigitalArchive04 .DigitalArchive04_menu li {
    border-bottom: 1px solid #ddd;
    padding: 14px 2px;
    box-sizing: border-box;
    list-style: none;
  }
  .DigitalArchive04 .DigitalArchive04_menu li a {
    display: flex;
    justify-content: space-between;
    color:#000;
    text-decoration-line: none;
  }
  .DigitalArchive04 .DigitalArchive04_menu li a span {
    font-size: 15px;
    font-weight: 600;
  }
  .DigitalArchive05 .info {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #d7d7d7;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .DigitalArchive05 .info textarea {
    border: 1px solid #573d1c;
    min-height: 78px;
    font-size: 15px;
    text-align: left;
    font-family: "NanumSquare", sans-serif;
    width: 80%;
  }
  .DigitalArchive05 .info button {
    background: #573d1c;
    color:#fff;
    font-size: 15px;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
    border: none;
  }
  .DigitalArchive05 .mySwiper {
    margin: 8px 0;
  }
  .DigitalArchive05 .btn_box button {
    background: #573d1c;
    color:#fff;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    width: 48px;
    height: 36px;
    border: none;
  }
  .DigitalArchive06 .img_box {
    position: relative;
    margin: 0 auto;
  }
  .DigitalArchive06 .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .DigitalArchive06 .btn_box {
    display: flex;
    justify-content: space-between;
    margin-top: 2%;
  }
  .DigitalArchive06 .btn_box button {
    background: #573d1c;
    border: none;
    color:#fff;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    padding: 8px;
    box-sizing: border-box;
    width: 48%;
  }
  .DigitalArchive07 .btn_box {
    margin: 30px auto;
  }
  .DigitalArchive07 .btn_box button {
    width: 100%;
    padding: 8px 0;
    box-sizing: border-box;
    background: #573d1c;
    color:#fff;
    font-weight: 600;
    text-align: center;
    border: none;
  }
  .DigitalArchive08 h3,
  .DigitalArchive08 .img_box {
    text-align: center;
    margin-bottom: 20px;
    font-size: 15px;
  }
  .DigitalArchive08 textarea {
    width: 100%;
    border: none;
  }
  .DigitalArchive08 textarea:focus {
    outline: transparent;
  }
  .DigitalArchive08 textarea::selection {
    color: #000;  
    background-color: transparent;
  }
  .DigitalArchive08 .label_box {
    display: block;
    margin: 23px 0;
  }
  .DigitalArchive08 .label_box .QRcopy {
    background: #573d1c;
    color:#fff;
    text-align: center;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 700;
    box-sizing: border-box;
    width: 100%;
    border: none;
    display: block;
  }
/*공용스타일*/
.popcorn_bg {
    background: url(../img/mian_bg.png) no-repeat center top/cover;
     position: fixed;
     top: 0;
     width: 100%;
     height: 100vh;
     min-height: 100vh;
     z-index: -1;
     font-family: 'Noto Sans KR', sans-serif;
     overflow-x: auto;
}
input[type="checkbox"]  {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    width: 5.3vw;
    height: 5.3vw;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 1.3vw;
    background: white;
}
input[type="checkbox"]:checked {
    background: #57a5f0 url(../img/sub/checked.png) no-repeat top/cover;
}
input[type="checkbox"]:checked::after {
    display: block;
}
input::placeholder {
    color: #cac8c8;
    font-size: 3.5vw;
}
button.close {
    background: url(../img/sub/email-icon.png) no-repeat center/cover;
    border: none;
    position: absolute;
    top: 50%;
    right: 19px;
    margin-top: -2.5vw;
    width: 4.3421vw;
    height: 4.3421vw;
    font-size: 0;
}
a.eyes {
    background: url(../img/sub/pw-icon.png) no-repeat center/cover;
    position: absolute;
    top: 50%;
    right: 19px;
    margin-top: -2.5vw;
    width: 4.3421vw;
    height: 4.3421vw;
    font-size: 0;
}
a.eyes-off {
    background: url(../img/sub/pw-icon-off.png) no-repeat center/cover;
}
label {
    font-size: 3.2vw;
    position: relative;
}
/*로그인화면*/
#login_wrap .login_head {
    text-align: center;
    padding: 22.3684vw 11.1842vw 7.8947vw;
    box-sizing: border-box;
}
#login_wrap .login_head img {
    width: 50vw;
}
#login_wrap .login_head h1 {
    font-size: 5.6842vw;
    font-weight: 700;
    color: white;
    letter-spacing: 5.8px;
    margin-top: 5.2632vw;
}
#login_wrap .login_form_wrap {
    position: relative;
    text-align: center;
    padding: 0 11vw 10vw 11vw;
}
#login_wrap .login_text_wrap input {
    border:2px solid #ec0;
    border-radius: 5px;
    padding: 0 12vw 0 4vw;
    width: 100%;
    height: 14vw;
    font-size: 3.9vw;
    box-sizing: border-box;
}
#login_wrap .login_text_wrap input:focus {
    outline: none;
    border-color: #ff0;
}
#login_wrap .login_text_wrap > div {
    position: relative;
    margin-bottom: 2.8947vw;
}
#login_wrap .login_chkbox_wrap label {
    color:#fff;
    margin-left: 2vw;
    top: -7px;
}
#login_wrap .login_btn_wrap button,
#login_wrap .login_btn_wrap a {
    font-family: 'Noto Sans KR', sans-serif;
    border: none;
    border-radius: 1.3vw;
    font-size: 4vw;
    text-align: center;
    width: 100%;
    height: 12vw;
    line-height: 12vw;
    font-weight: 500;
}
#login_wrap .login_btn_wrap button {
    background-color: #ec0;
    color:#fff;
    margin-top: 6vw;
}
#login_wrap .login_btn_wrap a {
    display: block;
    background-color: #fff;
    color:#167ad8;
    margin-top: 1.7vw;
}
#login_wrap a.password_link {
    display: block;
    margin-top: 8vw;
    font-size: 4.5vw;
    color:#666;
    text-decoration: underline;
}
/*로그인화면 end*/

/*회원가입화면*/
.top_menu_wrap {
    /*height: 31.6842vw;*/
    background: url(../img/mian_bg.png) no-repeat center top/cover;
}
.top_text {
    position: absolute;
    top: 22.6842vw;
    width: 100%;
}
.popcorn_bg_top {
    position: static;
}
.top_text a {
    width: 5.2632vw;
    height: 4.4737vw;
    position: absolute;
    left: 3.9473vw;
    top: 0;
    background: url(../img/sub/arrow03.png) no-repeat center/cover;
}
.top_text h2 {
    display: inline-block;
    font-size: 4.6053vw;
    font-weight: 700;
    color:#fff;
    padding-left: 12.5vw;
}
.sub_bg_wrap{
    background-color: white;
    height: auto;
    #min-height: 100vh;
    padding: 5px;
}
.register_content, .register_form_content, .Term_content {
    background-color: white;
    height: auto;
    min-height: 100%;
    padding: 5px;
}
.Term_content h3 {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}
.register_content {
    padding: 1vw 3.9vw;
}
.register_content_wrap ul li {
    position: relative;
    padding: 2vw 4.6053vw;
    box-sizing: border-box;
}
.register_content_wrap ul li:first-child {
 /*   border-bottom: 1px solid #e1e1e1;*/
}
.register_content_wrap ul li label {
    color: red;
    padding-left: 2.3684vw;
    top: -9px;
}
.register_content_wrap ul li a {
    color:#333;
    position: absolute;
    right: 0;
    top: 44%;
    background: url(../img/sub/arrow04.png) no-repeat right;
    background-size: 2.5vw ;
    padding-right: 3.9474vw;
    font-size: 3.2vw;
}
.all-agree_wrap {
    position: relative;
    left: 50%;
    text-align: center;
    margin:  8.6316vw -14.3684vw 8.6316vw;
    padding: 0 1.9737vw;
    background: #daedff;
    width: 30.6579vw;
    height: 10.9211vw;
    border-radius: 50px;
    box-sizing: border-box;
}
.all-agree_wrap input[type="checkbox"]  {
    color:#333;
    font-size: 3.9473vw;
    width: 6.5789vw;
    height: 6.5789vw;
    top: 6px;
    border-radius: 50%;
}
.all-agree_wrap label {
    color:#333;
    top: -4px;
}
.register_content_wrap .register_submit,
.register_form_content .register_submit {
    font-weight: 500;
    width: 100%;
    height: 13.8158vw;
    border-radius: 1.3157vw;
    border:none;
    background-color: #167ad8;
    line-height: 13.8158vw;
    text-align: center;
    font-size: 3.9473vw;
    color:#fff;
    display: block;
    letter-spacing: 1.2px;
}
.register_form_content form {
    padding: 4.1842vw;
    box-sizing: border-box;
    width: 100%;
}
.register_form_content ul {
    margin-bottom: 6.0526vw;
}
.register_form_content ul li {
    position: relative;
}
.register_form_content p {
    font-size: 3.981vw;
    padding: 10px 0 2px 0;
    color: #5a5a5a;
}
.register_form_content input {
    border: 2px solid #e1e1e1;
    border-radius: 1.3157vw;
    padding: 0 12.5vw 0 1vw;
    width: 100%;
    height: 12.0789vw;
    font-size: 3.9vw;
    box-sizing: border-box;
}
.register_form_content input:focus {
    outline: none;
    border-color: #ff0;
}
.register_form_content .PhoneNumber input {
    width: 31%;
}
.register_form_content button.close,
.register_form_content a.eyes {
    top: 69%;
}

/*240128 추가*/
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    vertical-align:middle;
}
.switch input {
    display:none;
}
.switch_slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.switch_slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.switch input:checked + .switch_slider {
background-color: #ffbd07;
}
.switch input:focus + .switch_slider {
box-shadow: 0 0 1px #ffbd07;
}
.switch input:checked + .switch_slider:before {
-webkit-transform: translateX(16px);
-ms-transform: translateX(16px);
transform: translateX(16px);
}
.switch .switch_slider.round {
border-radius: 34px;
}
.switch .switch_slider.round:before {
border-radius: 50%;
}
.setting_content_wrap {
    padding: 7.8947vw 3.9vw 1vw;
}
.setting_content_wrap h3 {
    font-size: 3.2vw;
    font-weight: 500;
    color:#ffbd07;
    border-bottom: 1px solid #ffbd07;
    padding-bottom: 5px;
}
.setting_content_wrap ul li {
    display: flex;
    justify-content: space-between;
    padding: 5.2632vw 0;
}
.setting_content_wrap ul li.arrow04 a {
    width: 100%;
    background: url(../img/sub/arrow05.png) no-repeat right;
    background-size:2.5vw;
}
.setting_content_wrap ul li a,
.setting_content_wrap ul li p {
    display: inline-block;
    font-size: 3.6vw;
    color:#222;
}
.setting_content_wrap ul li p span {
    position: absolute;
    right: 4vw;
    color:red;
    font-size: 3.2vw;
}
.top_menu_wrap.mypage_top_menu {
   /* height: 67.6242vw;*/
   padding:1%;
}
.mypage_content {
    #min-height: 68vh;
}
.mypage_content_wrap .mypage_box {
    background-color: #fff;
   #position: absolute;
    #top: 35vw;
    #left: 50%;
    #margin-left: -47.5%;
    border-radius: 3vw;
    border:1px solid #ddd;
    #width: 95%;
    height: 50vw;
    text-align: center;
}
.mypage_content_wrap .mypage_box > p {
    font-size: 5.5vw;
    height: 25vw;
    line-height: 25vw;
}
.mypage_content_wrap .mypage_box > p span {
    font-weight: 900;
}
.mypage_content_wrap .mypage_box ul {
    height: 25vw;
    display: flex;
    justify-content: space-between;
    border-top:1px solid #ddd;
}
.mypage_content_wrap .mypage_box ul li {
    padding-top: 7vw;
    width: 50%;
    border-right: 1px solid #ddd;
}
.mypage_content_wrap .mypage_box ul li:last-child {
    border: none;
}
.mypage_content_wrap .mypage_box ul li h5 {
    letter-spacing: -1.5px;
}
.mypage_content_wrap .mypage_box ul li h5 img {
    width: 25px;
    position: relative;
    top: -5px;
    left: -5px;
}
.mypage_content_wrap .mypage_box ul li b {
    display: block;
    font-size: 5.5vw;
}
.mypage_content_wrap .mypage_box ul li b span {
    font-size: 4vw;
}
.mypage_content_wrap .attendance {
	margin-top: 5vw;
    /*margin-top: 30vw;*/
}
.mypage_content_wrap .attendance > div {
    display: flex;
    justify-content: space-between;
   /* padding: 0 3.9vw 7vw 3.9vw;*/
}
.mypage_content_wrap .attendance > ul {
    display: flex;
    justify-content: space-between;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid #ffbd07;
    border-bottom: 1px solid #ffbd07;
}
.mypage_content_wrap .attendance > ul li {
    width: 50%;
/*    padding: 7vw 0;*/
	padding: 4vw 0;
    border-right: 1px solid #ffbd07;
}
.mypage_content_wrap .attendance > ul li:last-child {
    border-right: none;
}
.mypage_content_wrap .attendance > ul h4 {
    margin-bottom: 10px;
}
.service_content_wrap ul.service_list,
.notice_content_wrap ul.notice_list {
    padding: 7.8947vw 3.9vw 1vw;
}
.service_content_wrap ul.service_list li,
.notice_content_wrap ul.notice_list li {
    padding: 5.2632vw 0;
    border-bottom: 1px solid #ffbd07;
}
.service_content_wrap ul.service_list li a,
.notice_content_wrap ul.notice_list li a {
    display: block;
    width: 100%;
    background: url(../img/sub/arrow05.png) no-repeat right;
    background-size:2.5vw;
    font-size: 3.6vw;
    color:#222;
}
.service_content_wrap .service_info {
    padding: 27.8947vw 3.9vw 1vw;
}
.service_content_wrap .service_info h3 {
    font-size: 3.6vw;
    font-weight: 500;
    color:#222;
}
.service_content_wrap .service_info p {
    font-size: 3vw;
    color: #666;
    padding: 2vw 0;
}
.service_content_wrap .service_info .service_info_box {
    color:#fff;
    background-color: #ffbd07;
    border-radius: 3vw;
    border:1px solid #ddd;
    width: 100%;
    height: 30vw;
    margin-top: 5.3vw;
}
.service_content_wrap .service_info .service_info_box a {
    text-align: center;
    font-size: 5vw;
    font-weight: 900;
    display: block;
    color:#fff;
    margin: 5vw 0;
}
.service_content_wrap .service_info .service_info_box a img {
    width: 4.5vw;
    padding-right: 2vw;
}
.service_content_wrap .service_info .service_info_box li {
    font-size: 3vw;
    padding: 0 0 2vw 3vw;
    list-style: inside;
}
.faq_wrap .item_tab {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    border-bottom: 1px solid #ddd;
    overflow: auto;
    white-space: nowrap;
}
.faq_wrap .item_tab::-webkit-scrollbar {
    display: none;
}
.faq_wrap .item_tab a {
    display: inline-block;
    font-size: 4.2vw;
    color:#999;
    padding: 3vw;
    font-weight: 600;
}
.faq_wrap .item_tab a.on {
    color:#000;
    border-bottom: 1px solid #000;
}
.faq_wrap .faq_content_wrap {
    padding: 0 3.9vw 1vw;
}
.faq_wrap .faq_content_wrap .search_wrap {
    position: relative;
    height: 20vw;
}
.faq_wrap .faq_content_wrap .search_wrap input {
    border-top: none;
    border-bottom: 1px solid #222;
    border-left: none;
    border-right: none;
    width: 100%;
    position: absolute;
    top: 40%;
    background-color: rgba(0,0,0,0);
    padding: 2vw 0;
}
.faq_wrap .faq_content_wrap .search_wrap input:focus {
    outline: none;
}
.faq_wrap .faq_content_wrap .search_wrap input::placeholder {
    font-size: 3.2vw;
}
.faq_wrap .faq_content_wrap .search_wrap button {
    position: absolute;
    right: 0;
    top: 56%;
    margin-top: -2vw;
    background-color: rgba(0,0,0,0);
    border: none;
}  
.faq_wrap .faq_content_wrap .search_wrap button img {
    width: 4vw;
}
.faq_content_wrap .items li,
.notice_content_wrap .items li {
    padding: 5.2632vw 0;
}
.faq_content_wrap .items a,
.notice_content_wrap .items a {
    display: block;
    width: 98%;
    background: url(../img/sub/arrow05.png) no-repeat right;
    background-size:2.5vw;
    font-size: 3.6vw;
    color:#222;
    line-height: 1.4;
    padding-right: 3.5vw;
    box-sizing: border-box;
}
.notice_content_wrap .items a {
    font-weight: 600;
}
.faq_page_wrap,
.notice_page_wrap {
    padding: 5vw 3vw;
}
.faq_page_wrap h2,
.notice_page_wrap h2 {
    font-size: 4.2vw;
    font-weight: 500;
    margin-bottom: 5vw;
    padding-bottom: 5vw;
    border-bottom: 1px solid #ddd;
}
.faq_page_wrap p,
.notice_page_wrap p {
    font-size: 3.6vw;
    color:#222;
    word-break: keep-all;
    line-height: 1.4;
}
.notice_content_wrap .items {
    padding: 5vw 3vw;
}
.notice_page_wrap h2 span {
    display: block;
    padding-top: 1.5vw;
    font-size: 3vw;
    color:#999;
}

@media screen and (min-width:600px) and (max-width: 2000px) {
	.top_text {
		position: absolute;
		top: 13%;
		width: 100%;
	}
	.popcorn_bg_top {
		position: static;
	}
	.top_text a {
		width: 5.2632vw;
		height: 4.4737vw;
		position: absolute;
		left: 3.9473vw;
		top: 0;
		background: url(../img/sub/arrow03.png) no-repeat center/cover;
	}
	.top_text h2 {
		display: inline-block;
		font-size: 4.6053vw;
		font-weight: 700;
		color:#fff;
		padding-left: 12.5vw;
	}
}