@charset "utf-8";
@import url("font.css");

/* Default Layout */
#wrap {width:100%; height: 100%;}

/*toparea*/
.toparea {z-index: 9999; position: absolute; top: 90px; left: 50%; transform: translate(-50%, -50%); max-width: 1920px; width: 100%; background-color: #8cded0;}
.toparea .topmenu {padding: 0 70px; width: 100%; height: 180px; display: flex; display:-webkit-flex; justify-content: space-between;}
.toparea .topmenu h1 {z-index: 900; margin-top: 40px; display: flex; display:-webkit-flex;}
.toparea .topmenu h1 a {display: block; width: 159px; height: 64px; background: url('../../images/hmpg/logo.png') no-repeat;}
.toparea .topmenu .membership {margin-top: 50px; display: flex; display:-webkit-flex;}
.toparea .topmenu .membership li {margin-left: 10px;}
.toparea .topmenu .membership li:first-child {margin-left: 0;}
.toparea .topmenu .membership li a {display: flex; display:-webkit-flex; justify-content: center; align-items: center; width: 80px; height: 36px; line-height: 34px; font-size: 14px; border-radius: 10px;}
.toparea .topmenu .membership li.log a {border: 1px solid #d8d8d8; background-color: #fff;}
.toparea .topmenu .membership li.log a img {margin-right: 8px;}
.toparea .topmenu .membership li.join a {border: 1px solid #1d1d1d; background-color: #1d1d1d; color: #fff;}
.toparea .topmenu .gnb {margin-top: 50px; padding: 0 60px; display: flex; display:-webkit-flex; justify-content: center; height: 80px; border-radius: 80px; background-color: #fff; box-shadow: 7px 7px 0px 0px #47a3a1; font-family: 'TheJamsil', sans-serif;}
.toparea .topmenu .gnb > li {position: relative;}
.toparea .topmenu .gnb > li > a {padding: 0 30px; position: relative; display: flex; display:-webkit-flex; justify-content: center; align-items: center; line-height: 80px; font-size: 20px; font-weight: 400; text-align: center; color: #1d1d1d;}
.toparea .topmenu .gnb > li .menu_list {z-index: 206; position: absolute; left: 0; top: 80px; padding: 15px 15px 50px; display: none; width: 100%; background-color: #269694; border-radius: 0 0 40px 40px;}
.toparea .topmenu .gnb > li:nth-child(6) .menu_list {padding: 15px 0 50px 10px;}
.toparea .topmenu .gnb > li .menu_list > li {margin-bottom: 10px;}
.toparea .topmenu .gnb > li .menu_list > li:last-child {margin-bottom: 0;}
.toparea .topmenu .gnb > li .menu_list > li > a {padding-left: 10px; position: relative; font-size: 15px; font-weight: 400; color: #fff; letter-spacing: -1.5px;}
.toparea .topmenu .gnb > li .menu_list > li > a::before {content: ''; position: absolute; top: 7px; left: 0; display: block; width: 4px; height: 4px; border-radius: 4px; background-color: #fff;}
.toparea .topmenu .gnb > li.active > a {background-color: #269694; color: #fff;}
.toparea .topmenu .gnb > li.hasmenu.active > a {/*background: #269694 url('../../images/hmpg/icon_topmenu_gnb_active.png') no-repeat right 20px center;*/}

.toparea .topmenu .btn_allgnb {display: none;}
.toparea .allmenu-category {display: none !important;}
.toparea .allmenu-category .membership {display: none;}
#sub .toparea {top: 50px; background-color: #fff;}
#sub .toparea .topmenu {height: 100px; align-items: center;}
#sub .toparea .topmenu h1 {margin-top: 0;}
#sub .toparea .topmenu .membership {margin-top: 0;}
#sub .toparea .topmenu .gnb {margin-top: 0; box-shadow: none;}

/*section*/
#main .midarea {padding-top: 180px;}
.maincontents {min-height: auto !important;}
.section {margin: 0 auto; position: relative; max-width: 1920px;}
.section .title_box {margin-bottom: 40px; position: relative; font-family: 'TheJamsil', sans-serif; color: #fff;}
.section .title_box p {margin-bottom: 20px; line-height: 19px; font-size: 19px; font-weight: 400;}
.section .title_box h3 {line-height: 34px; font-size: 34px; font-weight: 500;}
.section .title_box .btn_more {position: absolute; bottom: 5px; right: 0; display: block; width: 54px; height: 20px; background: url('../../images/hmpg/icon_main_titlebox_arrow.png') no-repeat;}

/*section1*/
.section.section1 {height: 613px; text-align: center; background: url('../../images/hmpg/bg_main_section1.png') no-repeat center bottom / auto 100%; font-family: 'TheJamsil', sans-serif;} 
.section.section1 .section1_title {padding: 25px 0 35px;}
.section.section1 .section1_title .tit {line-height: 58px; font-size: 48px; font-weight: 500;}
.section.section1 .section1_title .txt {margin-top: 20px; line-height: 28px; font-size: 20px; font-weight: 300;}
.section.section1 .section1_list {display: flex; display:-webkit-flex; justify-content: center; gap: 30px;}
.section.section1 .section1_list li {width: 180px; height: 180px;}
.section.section1 .section1_list li a {position: relative; display: block; width: 100%; height: 100%; line-height: 36px; font-size: 24px; font-weight: 500; border-radius: 50%; color: #fff;}
.section.section1 .section1_list li.list1 a {background-color: #004d87; border: 1px solid #072131;}
.section.section1 .section1_list li.list2 a {background-color: #42b419; border: 1px solid #19460f;}
.section.section1 .section1_list li a::after {content: ''; position: absolute; top: 32px; right: 42px; display: block; width: 10px; height: 10px; border-radius: 10px; background-color: #fff;}
.section.section1 .section1_list li a span {position: absolute; top: calc(50% + 15px); left: 50%; transform: translate(-50%, -50%); width: 100%;}

/*section2*/
.section.section2 {padding: 0 35px 50px; font-family: 'TheJamsil', sans-serif;} 
.section.section2 .section2_list {display: flex; display:-webkit-flex; gap: 6px;}
.section.section2 .section2_list li {width: calc(50% - 3px); transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s;}
.section.section2 .section2_list li a {display: block; padding: 100px 95px 0; width: 100%; height: 920px; border-radius: 60px;}
.section.section2 .section2_list li.list1 a {background: url('../../images/hmpg/bg_section2_list1.png') no-repeat center / cover;}
.section.section2 .section2_list li.list2 a {background: url('../../images/hmpg/bg_section2_list2.png') no-repeat center / cover;}
.section.section2 .section2_list li.list1:hover a {background: url('../../images/hmpg/bg_section2_list1_hover.png') no-repeat center / cover;}
.section.section2 .section2_list li.list2:hover a {background: url('../../images/hmpg/bg_section2_list2_hover.png') no-repeat center / cover;}

.section.section2 .section2_list li a .title {line-height: 20px; font-size: 20px; font-weight: 500;}
.section.section2 .section2_list li a .title span {margin-top: 20px; display: block; line-height: 52px; font-size: 52px; font-weight: 600;}
.section.section2 .section2_list li a .cont {opacity: 0; padding: 45px 0 0; font-size: 20px; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s;}
.section.section2 .section2_list li a .cont p {margin-bottom: 35px;}
.section.section2 .section2_list li a .cont .line {margin-bottom: 10px; display: flex; display:-webkit-flex; align-items: center; gap: 20px;}
.section.section2 .section2_list li a .cont .line .tit {width: 85px; height: 50px; line-height: 48px; text-align: center; border-radius: 50px; border: 1px solid #1d1d1d;}
.section.section2 .section2_list.on li {width: calc(26% - 3px);}
.section.section2 .section2_list.on li.active {width: calc(74% - 3px);}
.section.section2 .section2_list.on li a {padding: 100px 50px 0;}
.section.section2 .section2_list.on li.active a {padding: 140px 115px 0;}
.section.section2 .section2_list.on li.active a .cont {opacity: 1;}

/*section3*/
.section.section3 {padding: 90px 0 130px; background-color: #009290;} 
.section.section3 .d_area {margin: 0 auto; max-width: 1280px; width: 100%;}
.section.section3 .d_area .title_box .btn_more {left: calc(51.5625% - 54px);}
.section.section3 .section3_wrap {display: flex; display:-webkit-flex; gap: 70px;}
.section.section3 .section3_wrap .section3_board {width: 51.5625%;}
.section.section3 .section3_wrap .section3_board li {margin-bottom: 30px;}
.section.section3 .section3_wrap .section3_board li a {padding: 30px 35px; display: block; border-radius: 20px; background-color: #fff;}
.section.section3 .section3_wrap .section3_board li a .line {margin-bottom: 11px; display: flex; display:-webkit-flex; gap: 20px;}
.section.section3 .section3_wrap .section3_board li a .line:last-child {margin-bottom: 0;}
.section.section3 .section3_wrap .section3_board li a .line .tit {width: 75px; height: 25px; line-height: 23px; font-size: 13px; text-align: center; border-radius: 25px; border: 1px solid #1d1d1d;}
.section.section3 .section3_wrap .section3_board li a .line .txt {width: calc(100% - 95px); font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.section.section3 .section3_wrap .section3_board li a .line .date {width: calc(100% - 95px); font-size: 16px; color: #7d7d7d;}
.section.section3 .section3_wrap .section3_board li:hover a .line .txt {text-decoration: underline;}
.section.section3 .section3_wrap .section3_banner {padding-bottom: 55px; position: relative; width: calc(48.4375% - 70px);}
.section.section3 .section3_wrap .section3_banner .slick-slider a {border-radius: 30px;}
.section.section3 .section3_wrap .section3_banner .slick-slider a .thumb {width: 100%; height: 430px; border-radius: 30px; background-size: cover; background-position: center; background-repeat: no-repeat;} 
.section.section3 .section3_wrap .section3_banner .slick-arrow {z-index: 11; opacity: 1; top: auto; bottom: 0; width: 15px; height: 27px; background: url('../../images/hmpg/icon_main_section3_arrow.png') no-repeat;}
.section.section3 .section3_wrap .section3_banner .slick-prev.slick-arrow {right : 80px;}
.section.section3 .section3_wrap .section3_banner .slick-next.slick-arrow {right: 20px;}
.section.section3 .section3_wrap .section3_banner .slick-arrow::after,
.section.section3 .section3_wrap .section3_banner .slick-arrow::before {display: none;}
.section.section3 .section3_wrap .section3_banner .slick-pause {z-index: 11; position: absolute; right: 160px; top: auto; bottom: 3px; width: 17px; height: 19px; font-size: 0; background: url('../../images/hmpg/icon_main_section3_stop.png') no-repeat center;} 
.section.section3 .section3_wrap .section3_banner .slick-pause.pause {background: url('../../images/hmpg/icon_main_section3_play.png') no-repeat center;} 
.section.section3 .section3_wrap .section3_banner .sr-only {overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); border: 0;} 
.section.section3 .section3_wrap .section3_banner .progress {position: absolute; left: 12px; bottom: 10px; overflow: hidden; display: block; width: calc(100% - 230px); height: 3px; background-color: #001e1e; background-image: linear-gradient(to right, #00edea, #00edea); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .4s ease-in-out;}

/*bottomarea*/
.bottomarea {margin: 0 auto; position: relative; max-width: 1920px; background-color: #2b2f36;}
.bottomarea .bottom_wrap {display: flex; display:-webkit-flex; background-color: #202328;}
.bottomarea .bottom_wrap .d_area {position: relative;}
.bottomarea .bottom_wrap .bottom_corp {padding: 30px 0; display: flex; display:-webkit-flex;}
.bottomarea .bottom_wrap .bottom_corp li {margin-right: 56px; position: relative; line-height: 17px;}
.bottomarea .bottom_wrap .bottom_corp li::after {content: ''; display: block; position: absolute; top: calc(50% - 10px); right: -28px; width: 1px; height: 20px; background-color: #a6a7a9;}
.bottomarea .bottom_wrap .bottom_corp li:last-child::after {display: none;}
.bottomarea .bottom_wrap .bottom_corp li a {font-size: 17px; color: #fff;}
.bottomarea .bottom_wrap .bottom_corp li:nth-child(1) a {font-weight: 600; color: #4eae2c; border-bottom: 1px solid #4eae2c;}
.bottomarea .bottom_wrap .bottom_familysite {position: absolute; right: 0; top: 18px;}
.bottomarea .bottom_wrap .dropdown {position: relative; display: flex; display:-webkit-flex;}
.bottomarea .bottom_wrap .dropdown .select {z-index: 21; position: relative; padding-right: 35px; width: 180px; height: 40px; line-height: 40px; font-size: 16px; text-align: left; border-radius: 10px; background-color: #3c4047;}
.bottomarea .bottom_wrap .dropdown .select::after {content: '▲'; position: absolute; top: 0; right: 20px; font-size: 9px; color: #fafafa; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.bottomarea .bottom_wrap .dropdown.open .select::after {transform: rotate(-180deg);}
.bottomarea .bottom_wrap .dropdown .select .dropdown-label {padding-left: 20px; overflow: hidden; display: block; color: #fff; text-overflow: ellipsis; white-space: nowrap;}
.bottomarea .bottom_wrap .dropdown .dropdown-menu {opacity: 0; overflow-y: auto; position: absolute; left: 0; bottom: 0; padding: 10px 0; width: 100%; height: 49px; border-radius: 10px; border: 1px solid #7090e5; background-color: #fff; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;}
.bottomarea .bottom_wrap .dropdown:nth-child(1) .dropdown-menu {width: 100%;}
.bottomarea .bottom_wrap .dropdown.open .dropdown-menu {opacity: 1; z-index: 999; bottom: -205px; height: 204px;}
.bottomarea .bottom_wrap .dropdown.open .dropdown-menu li {margin-bottom: 10px; padding: 9px 20px;}
.bottomarea .bottom_wrap .dropdown.open .dropdown-menu li:hover {background-color: #f1f4fc;}
.bottomarea .bottom_wrap .dropdown.open .dropdown-menu li:last-child {margin-bottom: 0;}
.bottomarea .bottom_wrap .dropdown.open .dropdown-menu a {display: block; line-height: 20px; font-size: 15px; color: #7d7d7d;}
.bottomarea .bottom_wrap .dropdown.open .dropdown-menu li:hover a {color: #223f92; text-decoration: underline;}
.bottomarea > .d_area {padding: 30px 0 55px;}
.bottomarea > .d_area .bottom_logo {margin: 0 0 30px; width: 187px; height: 47px; background: url('../../images/hmpg/logo_bottom.png') no-repeat;}
.bottomarea > .d_area .bottom_address {display: flex; display:-webkit-flex; align-items: center;}
.bottomarea > .d_area .bottom_address address p {font-size: 16px; color: #c2c2c2;}
.bottomarea > .d_area .bottom_address address p.copyright {font-size: 15px;}

/*팝업*/
.modal {display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 9999; -webkit-overflow-scrolling: touch; outline: 0; background-color: rgba(0, 0, 0, 0.8);}
.modal.on {display: block;}
.popup {z-index: 1100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 520px; max-width: calc(100% - 40px); max-height: calc(100% - 40px); background: #fff; border-radius: 10px;}
.popup .modal_close {position: absolute; top: 12px; right: 20px; width: 18px; height: 18px;}
.popup .modal_close::after, .popup .modal_close::before {content: ''; position: absolute; left: 0; top: calc(50% - 2px); width: 100%; height: 3px; background-color: #fff;}
.popup .modal_close::after {transform: rotate(-45deg);}
.popup .modal_close::before {transform: rotate(45deg);}
.popup .popup_scroll {overflow-y: auto; position: relative; max-height: calc(100vh - 40px);}
.popup .popup_title {padding: 0 20px; position: relative; height: 44px; line-height: 44px; border-radius: 10px 10px 0 0; background: #577bc4;}
.popup .popup_title h3 {font-size: 16px; color: #fff;}
.popup .popup_inner {padding: 20px 20px 50px;}
.popup .popup_inner .button_box {margin-top: 40px;}
.popup .popup_inner h4 {font-size: 21px; text-align: center;}
.popup .popup_inner .popup_txt {margin: 10px 0 0; font-size: 16px; text-align: center;}
.popup .popup_inner .popup_txt2 {margin: 30px 0 0; font-size: 16px; text-align: center; word-break: keep-all;}
.popup .popup_inner .popup_txt3 {padding-left: 15px; position: relative; font-size: 16px;}
.popup .popup_inner .popup_txt3::before {content: ''; display: block; position: absolute; top: 11px; left: 0; width: 4px; height: 4px; border-radius: 4px; background-color: #000;}
.popup .popup_inner .popup_txt_wrap {margin: 30px 0 40px; padding: 30px 35px; border-radius: 20px; background-color: #f5f5f5;}
.popup .popup_inner .boardview table tr td .doubleCheck .optionbox {width: 150px;}
.popup .popup_inner .boardview table tr td .doubleCheck button {margin-left: 5px; padding: 0 15px; height: 38px; font-size: 15px; border-radius: 5px;}
.popup .popup_inner .add_list {padding: 10px 20px;}
.popup .popup_inner .add_list p {font-size: 15px; color: #8b949e;}
.popup .popup_inner .add_list p .btn_close {background-color: #ed5e5e;}

/*레이어팝업*/
.popup.password {width: 420px;} 
.popup.password .popup_inner .password_box {padding-top: 40px; text-align: center; color: #666; word-break: keep-all;} 
.popup.password .popup_inner .password_box .inpbox {margin: 30px auto 0; max-width: 250px;} 
.popup.password .popup_inner .button_box {margin-top: 40px;} 

/*메인팝업*/
.popup.main {padding: 0; transform: translate(0, 0); border: 1px solid #000; border-radius: 0;}
.popup.main .popup_title {margin-bottom: 25px; padding: 0;}
.popup.main .popup_title h3 {color: #333; font-size: 22px;}
.popup.main .popup_inner {padding: 40px;}
.popup.main .popup_inner img {max-width: 100%;}
.popup.main .popup_inner .content_box {margin-bottom: 20px;}
.popup.main .button_box {margin-top: 0;}
.popup.main .button_box button {margin-left: 0; width: 100%; height: 40px; color: #d2d2d2; font-size: 15px; font-weight: 500; background-color: #0b0e16;}
.popup.main .button_box button:first-child {border-right: 1px solid #393c48;}
.popup.main.img .popup_inner {padding: 0;}

/*에러페이지*/
.error {margin: 0 30px 40px; padding: 150px 0 200px; text-align: center; border-radius: 30px; background-color: #f3f7ff;}
.error .box {padding: 270px 0 0; background: url('../../images/hmpg/bg_error.png') no-repeat center 0;}
.error .box .txt1 {font-size: 32px; font-weight: 600; font font-family: 'TheJamsil', sans-serif;}
.error .box .txt1 span {color: #0aa4b4;}
.error .box .txt2 {margin: 35px 0; font-size: 18px;}
.error .box .txt3 {line-height: 24px; font-size: 18px; font-weight: 300; color: #7d7d7d;}

@media screen and (max-width:1280px) {
}
@media screen and (max-width:1024px) {
    /*toparea*/
    .toparea {z-index: 200; position: relative; top: 0 !important; left: 0; transform: none;}
    .toparea .topmenu {padding: 0 20px; height: 70px !important; align-items: center;}
    .toparea .topmenu h1 {z-index: 900; margin-top: 0;}
    .toparea .topmenu h1 a {width: 104px; height: 42px; background-size: 100% auto;}
    .toparea .topmenu .membership {display: none;}
    .toparea .topmenu .gnb {display: none;}
    .toparea .topmenu .btn_allgnb {display: block; z-index: 210; position: absolute; right: 20px; top: 20px; width: 26px; height: 26px; background: url('../../images/hmpg/icon_btn_allgnb.png') no-repeat center / 100% auto;}
    .toparea .allmenu-category {z-index: 9999; position: fixed; top: 0; transform: translateX(0); width: 100%; height: 100% !important; background-color: rgba(0, 0, 0, 0.45); animation: allmenu 1s 1;}
    .toparea .allmenu-category.active {display: flex !important; display: -webkit-flex !important; justify-content: right; animation: allmenu2 1s 1;}
    @keyframes allmenu {
        0% {left: 0;}
        99% {left: 100%;}
        100% {display: none;}
    }
    @keyframes allmenu2 {
        0% {left: 100%;}
        1% {display: block;}
        100% {left: 0;}
    }
    .toparea .allmenu-category .all_top {width: 100%; height: 60px;}
    .toparea .allmenu-category .all_logo {position: absolute; top: 14px; left: 20px;}
    .toparea .allmenu-category .all_logo a {display: block; width: 104px; height: 42px; background: url('../../images/hmpg/logo.png') no-repeat center / 100% auto;}
    .toparea .allmenu-category .btn_close {position: absolute; top: 20px; right: 22px; transform: scale(0.9);}
    .toparea .allmenu-category .btn_close .icon {width: 20px; height: 20px;}
    .toparea .allmenu-category .btn_close .icon::after, .toparea .allmenu-category .btn_close .icon::before {top: 9px; width: 25px; height: 2px; background-color: #1d1d1d;}
    .toparea .allmenu-category .btn_wrap {padding: 10px 20px 20px; display: flex; display:-webkit-flex; flex-wrap: wrap; gap: 10px;}
    .toparea .allmenu-category .btn_mypage {display: block; width: 100%; height: 42px; line-height: 40px; text-align: center; border-radius: 5px; border: 1px solid #1d1d1d; background-color: #1d1d1d;}
    .toparea .allmenu-category .btn_mypage span {padding-left: 28px; display: inline-block; font-size: 15px; color: #fff; background: url('../../images/hmpg/icon_gnb_mypage.png') no-repeat 0 center / 19px 19px;}
    .toparea .allmenu-category .btn_login {display: block; width: calc(50% - 5px); height: 42px; line-height: 40px; text-align: center; border-radius: 5px; border: 1px solid #d8d8d8; background-color: #fff;}
    .toparea .allmenu-category .btn_login span {padding-left: 22px; display: inline-block; font-size: 15px; color: #1d1d1d; background: url('../../images/hmpg/icon_topmenu_membership.png') no-repeat 0 center / 14px auto;}
    .toparea .allmenu-category .btn_join {display: block; width: calc(50% - 5px); height: 42px; line-height: 40px; text-align: center; border-radius: 5px; border: 1px solid #1d1d1d; background-color: #1d1d1d;}
    .toparea .allmenu-category .btn_join span {display: inline-block; font-size: 15px; color: #fff;}
    .toparea .allmenu-category .menu_box {overflow-y: auto; position: relative; width: 100%; height: 100%; background-color: #fff;}
    .toparea .allmenu-category .menu_box .all_gnb {margin: 0 20px; display: block;}
    .toparea .allmenu-category .menu_box .all_gnb > li {position: relative; width: 100%;}
    .toparea .allmenu-category .menu_box .all_gnb > li.active {background-color: #269694; border-radius: 10px;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a {z-index: 99; padding: 0 20px; display: block; width: 100%; height: 60px; line-height: 60px; font-size: 18px; font-weight: 400; color: #1d1d1d; font-family: 'TheJamsil', sans-serif;}
    .toparea .allmenu-category .menu_box .all_gnb > li.active > a {color: #fff;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a .icon {position: absolute; top: 22px; right: 20px; width: 19px; height: 11px; background: url('../../images/hmpg/icon_gnb_arrow.png') no-repeat center / 100% auto;}
    .toparea .allmenu-category .menu_box .all_gnb > li.active > a .icon {background: url('../../images/hmpg/icon_gnb_arrow_active.png') no-repeat center / 100% auto;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list {display: none; padding: 0 20px 20px; width: 100%;}
    .toparea .allmenu-category .menu_box .all_gnb > li.active .menu_list {display: block;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li {margin-bottom: 10px;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li.active {position: relative;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li:last-child {margin-bottom: 0;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li > a {padding-left: 10px; position: relative; font-size: 18px;}
    .toparea .allmenu-category .menu_box .all_gnb > li.active .menu_list > li > a {color: #fff;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li > a::before {content: ''; position: absolute; top: 8px; left: 0; display: block; width: 4px; height: 4px; border-radius: 4px; background-color: #fff;}

    /*section*/
    #main .midarea {padding-top: 0;}
    .section .title_box {margin-bottom: 20px;}
    .section .title_box p {margin-bottom: 10px; line-height: 12px; font-size: 12px;}
    .section .title_box h3 {line-height: 18px; font-size: 18px;}
    .section .title_box .btn_more {bottom: 0; right: 0; width: 26px; height: 10px; background-size: 100% auto;}

    /*section1*/
    .section.section1 {height: auto; padding: 0 20px 20px; text-align: center; background: #8cded0;} 
    .section.section1 .section1_title {padding: 15px 0;}
    .section.section1 .section1_title .tit {line-height: 29px; font-size: 24px; font-weight: 500;}
    .section.section1 .section1_title .tit img {width: 120px; height: auto;}
    .section.section1 .section1_title .txt {margin-top: 15px; line-height: 20px; font-size: 15px;}
    .section.section1 .section1_list {gap: 15px;}
    .section.section1 .section1_list li {width: 100px; height: 100px;}
    .section.section1 .section1_list li a {line-height: 20px; font-size: 14px;}
    .section.section1 .section1_list li a::after {top: 17px; right: 25px; width: 6px; height: 6px; border-radius: 6px;}
    .section.section1 .section1_list li a span {top: calc(50% + 5px);}

    /*section2*/
    .section.section2 {padding: 10px;} 
    .section.section2 .section2_list {flex-wrap: wrap; gap: 10px;}
    .section.section2 .section2_list li {width: calc(50% - 5px);}
    .section.section2 .section2_list li a {padding: 30px 25px 0; height: 0; padding-bottom: 115.4411764705882%; border-radius: 20px;}
    .section.section2 .section2_list li a .title {line-height: 13px; font-size: 13px;}
    .section.section2 .section2_list li a .title span {margin-top: 10px; line-height: 26px; font-size: 26px;}
    .section.section2 .section2_list li a .cont {opacity: 1; padding: 15px 0 0; font-size: 13px; word-break: keep-all;}
    .section.section2 .section2_list li a .cont p {margin-bottom: 20px;}
    .section.section2 .section2_list li a .cont .line {margin-bottom: 5px; gap: 10px;}
    .section.section2 .section2_list li a .cont .line .tit {width: 45px; height: 28px; line-height: 28px; font-size: 12px; border-radius: 25px;}
    .section.section2 .section2_list li a .cont .line .txt {width: calc(100% - 55px);}

    /*section3*/
    .section.section3 {padding: 25px 0 40px;} 
    .section.section3 .d_area .title_box .btn_more {left: auto; right: 0;}
    .section.section3 .section3_wrap {flex-wrap: wrap; gap: 40px;}
    .section.section3 .section3_wrap .section3_board {width: 100%;}
    .section.section3 .section3_wrap .section3_board li {margin-bottom: 5px;}
    .section.section3 .section3_wrap .section3_board li a {padding: 12px 15px; border-radius: 10px;}
    .section.section3 .section3_wrap .section3_board li a .line {margin-bottom: 10px; flex-wrap: wrap; gap: 10px;}
    .section.section3 .section3_wrap .section3_board li a .line .tit {width: 65px; height: 22px; line-height: 20px; font-size: 12px; border-radius: 22px;}
    .section.section3 .section3_wrap .section3_board li a .line .txt {width: 100%; font-size: 16px;}
    .section.section3 .section3_wrap .section3_board li a .line .date {width: calc(100% - 75px); font-size: 13px;}
    .section.section3 .section3_wrap .section3_banner {padding-bottom: 40px; width: 100%;}
    .section.section3 .section3_wrap .section3_banner .slick-slider a {border-radius: 20px;}
    .section.section3 .section3_wrap .section3_banner .slick-slider a .thumb {height: 0; padding-bottom: 78%; border-radius: 20px;} 
    .section.section3 .section3_wrap .section3_banner .slick-arrow {width: 10px; height: 18px; background-size: 100% auto;}
    .section.section3 .section3_wrap .section3_banner .slick-prev.slick-arrow {right : 50px;}
    .section.section3 .section3_wrap .section3_banner .slick-next.slick-arrow {right: 10px;}
    .section.section3 .section3_wrap .section3_banner .slick-pause {right: 100px; width: 10px; height: 12px; background-size: 100% auto;} 
    .section.section3 .section3_wrap .section3_banner .slick-pause.pause {background-size: 100% auto;} 
    .section.section3 .section3_wrap .section3_banner .progress {left: 8px; bottom: 8px; width: calc(100% - 145px); height: 2px;}

    /*bottomarea*/
    .bottomarea .bottom_wrap {display: flex; display:-webkit-flex; background-color: #202328;}
    .bottomarea .bottom_wrap .d_area {padding: 0;}
    .bottomarea .bottom_wrap .bottom_corp {padding: 15px 0; justify-content: center;}
    .bottomarea .bottom_wrap .bottom_corp li {margin-right: 80px; line-height: 15px;}
    .bottomarea .bottom_wrap .bottom_corp li::after {display: none;}
    .bottomarea .bottom_wrap .bottom_corp li:last-child {margin-right: 0;}
    .bottomarea .bottom_wrap .bottom_corp li a {font-size: 15px; color: #fff;}
    .bottomarea .bottom_wrap .bottom_familysite {position: static; background-color: #3c4047;}
    .bottomarea .bottom_wrap .dropdown {margin: 0 auto;}
    .bottomarea .bottom_wrap .dropdown .select {padding-right: 70px; width: 100%; height: 48px; line-height: 48px; font-size: 15px; border-radius: 0;}
    .bottomarea .bottom_wrap .dropdown .select::after {right: 50px;}
    .bottomarea .bottom_wrap .dropdown .select .dropdown-label {padding-left: 45px;}
    .bottomarea .bottom_wrap .dropdown .dropdown-menu {padding: 10px 0; width: 100%; height: 49px; border-radius: 0px;}
    .bottomarea .bottom_wrap .dropdown.open .dropdown-menu {width: calc(100% - 60px); left: 30px; bottom: -173px; height: 173px;}
    .bottomarea .bottom_wrap .dropdown.open .dropdown-menu li {margin-bottom: 5px; padding: 7px 15px;}
    .bottomarea .bottom_wrap .dropdown.open .dropdown-menu a {line-height: 20px; font-size: 15px;}
    .bottomarea > .d_area {padding: 35px 30px 50px;}
    .bottomarea > .d_area .bottom_logo {margin: 0 0 20px; width: 133px; height: 34px; background-size: 100% auto;}
    .bottomarea > .d_area .bottom_address address p {line-height: 18px; font-size: 14px;}
    .bottomarea > .d_area .bottom_address address p.copyright {margin: 10px 0 0; font-size: 12px;}

    /*팝업*/
    .popup {border-radius: 5px;}
    .popup .modal_close {top: 10px; right: 12px; width: 12px; height: 12px;}
    .popup .modal_close::after, .popup .modal_close::before {top: calc(50% - 0px); height: 2px;}
    .popup .popup_title {padding: 0 12px; height: 36px; line-height: 36px; border-radius: 5px 5px 0 0;}
    .popup .popup_title h3 {font-size: 15px;}
    .popup .popup_inner {padding: 12px 12px 30px;}
    .popup .popup_inner .button_box {margin-top: 20px;}
    .popup .popup_inner h4 {font-size: 16px;}
    .popup .popup_inner .popup_txt {margin: 5px 0 0; font-size: 13px;}
    .popup .popup_inner .popup_txt2 {margin: 20px 0 0; line-height: 17px; font-size: 11px;}
    .popup .popup_inner .popup_txt3 {padding-left: 11px; font-size: 11px;}
    .popup .popup_inner .popup_txt3::before {top: 8px; width: 3px; height: 3px; border-radius: 3px;}
    .popup .popup_inner .popup_txt_wrap {margin: 20px 0 15px; padding: 10px 13px;}
    .popup .popup_inner .boardview table tr td .doubleCheck {justify-content: center;}
    .popup .popup_inner .boardview table tr td .doubleCheck .optionbox {width: 210px;}
    .popup .popup_inner .boardview table tr td .doubleCheck button {padding: 0 10px; height: 34px; border-radius: 3px;}
    .popup .popup_inner .add_list {padding: 10px 25px;}
    .popup .popup_inner .add_list p {font-size: 14px;}

    /*레이어팝업*/
    .popup.password .popup_inner .password_box {padding-top: 20px;} 
    .popup.password .popup_inner .password_box .inpbox {margin: 15px auto 0;} 
    .popup.password .popup_inner .button_box {margin-top: 20px;} 

    /*메인팝업*/
    .popup.main {transform: translate(-50%, 0); width: 100% !important; height: auto !important; left: 50% !important;}
    .popup.main.img {top: 220px !important;}
    .popup.main .popup_title {margin-bottom: 10px;}
    .popup.main .popup_title h3 {font-size: 16px;}
    .popup.main .popup_inner {padding: 20px;}
    .popup.main .popup_inner .content_box {margin-bottom: 10px;}
    .popup.main .button_box button {height: 35px; font-size: 12px;}

    /*에러페이지*/
    .error {margin: 0 20px 30px; padding: 60px 0 90px;border-radius: 20px;}
    .error .box {padding: 135px 0 0; background-size: 185px auto;}
    .error .box .txt1 {font-size: 20px;}
    .error .box .txt2 {margin: 20px 0; font-size: 14px;}
    .error .box .txt3 {line-height: 18px; font-size: 14px;}
}
@media screen and (max-width:800px){
    /*section2*/
    .m_hidden2 {display: none;}
    .section.section2 .section2_list li {width: 100%;}
    .section.section2 .section2_list li.list1 a {background: url('../../images/hmpg/bg_section2_list1_m.png') no-repeat center / cover;}
    .section.section2 .section2_list li.list2 a {background: url('../../images/hmpg/bg_section2_list2_m.png') no-repeat center / cover;}
}
@media screen and (max-width:640px){
    /*사이트맵팝업*/
    .popup.sitemap .popup_scroll {padding: 35px 10px 35px 25px;}
    .sitemap_list {flex-wrap: wrap;}
    .sitemap_list > li {margin-bottom: 15px; width: calc(50% - 7.5px);}
}
@media screen and (max-width:540px){
}
@media screen and (max-width:480px){
}
@media screen and (max-width:360px){
}
@media screen and (max-width:320px){ 
}