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

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

/*메뉴*/
.toparea {z-index: 999; position: relative;}
.toparea .d_area {display: flex; display:-webkit-flex; justify-content: space-between; align-items: center;}
.toparea .topmenu {z-index: 900; position: absolute; left: 0; top: 0; width: 100%; border-bottom: 1px solid #fff;}
.toparea .topmenu h1 {z-index: 900;}
.toparea .topmenu h1 a {display: block; width: 227px; height: 66px; background: url('../../images/hmpg/logo_active.png') no-repeat;}
.toparea .topmenu .gnb {margin: 0 auto; display: flex; display:-webkit-flex; justify-content: space-between; width: 700px;}
.toparea .topmenu .gnb > li {width: 100%; text-align: center; cursor: pointer;}
.toparea .topmenu .gnb > li > a {transition: none; position: relative; display: inline-block; line-height: 90px; font-size: 22px; font-weight: 500; color: #222;}
.toparea .topmenu .gnb > li:hover > a {color: #0b6ae0;}
.toparea .topmenu .topbtn {z-index: 900;}
.toparea .topmenu .topbtn button.btn_join,
.toparea .topmenu .topbtn button.btn_log {width: 95px; height: 35px; font-size: 14px; font-weight: 400; text-align: center; border-radius: 35px; border: 1px solid #222; color: #222;}
.toparea .topmenu .topbtn button.btn_log {margin: 0 20px 0 10px;}
.toparea .topmenu .topbtn button.btn_search .icon::before {background-color: #222;}
.toparea .topmenu .topbtn button.btn_search .icon::after {border-color: #222;}
.toparea .total_search_area {z-index: 999; display: none; position: absolute; left: 0; top: 91px; padding: 40px 0; width: 100%; background-color: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.toparea .total_search_area .btn_close {position: absolute; top: -60px; right: calc(50% - 650px); background-color: #fff;}
.toparea .total_search_area .search_box {position: relative; margin: 0 auto; width: 700px; height: 55px; border: 1px solid #ddd; border-radius: 8px;}
.toparea .total_search_area .search_box input {padding: 0 40px 0 20px; width: 100%; height: 100%; font-size: 16px; background-color: transparent;}
.toparea .total_search_area .search_box input:focus {outline: none;}
.toparea .total_search_area .search_box button.btn_search {position: absolute; right: 20px; top: calc(50% - 13px);}
.toparea .topmenu .btn_allgnb {display: none;}
.toparea .allmenu-category {display: none !important;}
.toparea .allmenu-category .membership {display: none;}

.casearea {z-index: 99; width: 100%; background-color: #383533;}
.casearea ul {display: flex; display:-webkit-flex; justify-content: center; margin: 0 auto; width: 1300px; border-left: 1px solid rgba(255, 255, 255, 0.15);}
.casearea ul li {width: 100%; border-right: 1px solid rgba(255, 255, 255, 0.15);}
.casearea ul li a {display: block; font-size: 15px; height: 50px; line-height: 48px; font-weight: 400; text-align: center; color: #fff;}
.casearea ul li a span {margin: 0 3px; font-size: 24px; font-weight: 600;}

.maincontents .section {position: relative;}
.maincontents .section.section1 {position: relative; padding: 170px 0 70px;}
.maincontents .section.section1 .d_area {position: relative; margin: 0 auto; padding: 20px 0 0; height: 950px; background: url('../../images/hmpg/bg_section1.gif') no-repeat bottom center;}
.maincontents .section.section1 .d_area .title {line-height: 54px; font-size: 54px; text-align: center; font-family:'ONEMobilePOP', sans-serif;}
.maincontents .section.section1 .d_area .title .tit1 {color: #e73754;}
.maincontents .section.section1 .d_area .title .tit2 {color: #5cb802;}
.maincontents .section.section1 .d_area .title .tit3 {color: #018cf6;}
.maincontents .section.section1 .d_area .title .tit4 {line-height: 70px; font-size: 50px; color: #153aab;}
.maincontents .section.section1 .d_area .section1_list li.list {width: 320px; box-shadow: 0 8px 8px -8px #888;}
.maincontents .section.section1 .d_area .section1_list li.list.list1 {position: absolute; top: 170px; left: 160px; border-radius: 20px 20px 0 20px;}
.maincontents .section.section1 .d_area .section1_list li.list.list1::before {position: absolute; bottom: 0; right: -15px; content: ''; display: block; width: 15px; height: 18px; background: url('../../images/hmpg/icon_section1_list_pink.png') no-repeat;}
.maincontents .section.section1 .d_area .section1_list li.list.list2 {position: absolute; top: 140px; right: 180px; border-radius: 20px 20px 20px 0;}
.maincontents .section.section1 .d_area .section1_list li.list.list2::before {position: absolute; bottom: 0; left: -15px; content: ''; display: block; width: 15px; height: 18px; background: url('../../images/hmpg/icon_section1_list_blue.png') no-repeat; transform: scaleX(-1);}
.maincontents .section.section1 .d_area .section1_list li.list.list3 {position: absolute; top: 330px; left: 5px; border-radius: 20px 20px 0 20px;}
.maincontents .section.section1 .d_area .section1_list li.list.list3::before {position: absolute; bottom: 0; right: -15px; content: ''; display: block; width: 15px; height: 18px; background: url('../../images/hmpg/icon_section1_list_yellow.png') no-repeat;}
.maincontents .section.section1 .d_area .section1_list li.list.list3::after {position: absolute; top: -25px; left: 45px; content: ''; display: block; width: 38px; height: 36px; background: url('../../images/hmpg/icon_main_section1_like.png') no-repeat;}
.maincontents .section.section1 .d_area .section1_list li.list.list4 {position: absolute; top: 315px; right: 35px; border-radius: 20px 20px 20px 0;}
.maincontents .section.section1 .d_area .section1_list li.list.list4::before {position: absolute; bottom: 0; left: -15px; content: ''; display: block; width: 15px; height: 18px; background: url('../../images/hmpg/icon_section1_list_green.png') no-repeat; transform: scaleX(-1);}
.maincontents .section.section1 .d_area .section1_list li.list.list5 {position: absolute; top: 490px; left: 40px; border-radius: 20px 20px 0 20px;}
.maincontents .section.section1 .d_area .section1_list li.list.list5::before {position: absolute; bottom: 0; right: -15px; content: ''; display: block; width: 15px; height: 18px; background: url('../../images/hmpg/icon_section1_list_green.png') no-repeat;}
.maincontents .section.section1 .d_area .section1_list li.list.list6 {position: absolute; top: 490px; right: 0; border-radius: 20px 20px 20px 0;}
.maincontents .section.section1 .d_area .section1_list li.list.list6::before {position: absolute; bottom: 0; left: -15px; content: ''; display: block; width: 15px; height: 18px; background: url('../../images/hmpg/icon_section1_list_pink.png') no-repeat; transform: scaleX(-1);}
.maincontents .section.section1 .d_area .section1_list li.list.list7 {position: absolute; top: 700px; left: 75px; border-radius: 20px 20px 0 20px;}
.maincontents .section.section1 .d_area .section1_list li.list.list7::before {position: absolute; bottom: 0; right: -15px; content: ''; display: block; width: 15px; height: 18px; background: url('../../images/hmpg/icon_section1_list_blue.png') no-repeat;}
.maincontents .section.section1 .d_area .section1_list li.list.list8 {position: absolute; top: 680px; right: 50px; border-radius: 20px 20px 20px 0;}
.maincontents .section.section1 .d_area .section1_list li.list.list8::before {position: absolute; bottom: 0; left: -15px; content: ''; display: block; width: 15px; height: 18px; background: url('../../images/hmpg/icon_section1_list_yellow.png') no-repeat; transform: scaleX(-1);}
.maincontents .section.section1 .d_area .section1_list li.list.list8::after {position: absolute; top: -25px; left: 35px; content: ''; display: block; width: 36px; height: 37px; background: url('../../images/hmpg/icon_main_section1_heart.png') no-repeat;}
.maincontents .section.section1 .d_area .section1_list li.list.pink {background-color: #f65670;}
.maincontents .section.section1 .d_area .section1_list li.list.blue {background-color: #0091ff;}
.maincontents .section.section1 .d_area .section1_list li.list.yellow {background-color: #fcb223;}
.maincontents .section.section1 .d_area .section1_list li.list.green {background-color: #65cc00;}
.maincontents .section.section1 .d_area .section1_list li.list a {padding: 15px 20px 20px; display: block; width: 100%; height: 100%;}
.maincontents .section.section1 .d_area .section1_list li.list a .tit {height: 52px; line-height: 26px; font-size: 18px; font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.maincontents .section.section1 .d_area .section1_list li.list a .txt {margin-top: 15px; display: flex; display:-webkit-flex; align-items: center; gap: 10px;}
.maincontents .section.section1 .d_area .section1_list li.list a .txt .category {width: 63px; height: 25px; line-height: 25px; font-size: 13px; font-weight: 400; text-align: center; border-radius: 25px; background-color: #fff;}
.maincontents .section.section1 .d_area .section1_list li.list.pink a .txt .category {color: #d81535;}
.maincontents .section.section1 .d_area .section1_list li.list.blue a .txt .category {color: #016fc3;}
.maincontents .section.section1 .d_area .section1_list li.list.yellow a .txt .category {color: #cf8902;}
.maincontents .section.section1 .d_area .section1_list li.list.green a .txt .category {color: #50a100;}
.maincontents .section.section1 .d_area .section1_list li.list a .txt .name {font-size: 15px; font-weight: 400; color: #fff;}
.maincontents .section.section1 .proposalarea {margin: 0 auto; width: 1300px; max-width: calc(100% - 30px);}
.maincontents .section.section1 .proposalarea ul {padding: 20px 0 25px; display: flex; display:-webkit-flex; justify-content: center; flex-wrap: wrap; border-radius: 20px; background-color: #ffb0c8;border: 3px solid #ff87ab;}
.maincontents .section.section1 .proposalarea ul li {position: relative; width: 25%; text-align: center;}
.maincontents .section.section1 .proposalarea ul li::after {position: absolute; top: 10px; right: 0; content: ''; display: block; width: 1px; height: calc(100% - 10px); background-color: #3a5584;}
.maincontents .section.section1 .proposalarea ul li:last-child:after {display: none;}
.maincontents .section.section1 .proposalarea ul li {line-height: 36px; font-size: 18px; font-weight: 400; color: #000;}
.maincontents .section.section1 .proposalarea ul li a {line-height: 36px; font-size: 18px; font-weight: 400; color: #000;}
.maincontents .section.section1 .proposalarea ul li span {font-size: 36px; font-weight: 700;}

.maincontents .section.section2 .d_area {position: relative;}
.maincontents .section.section2 .d_area .title {margin-bottom: 25px; line-height: 30px; font-size: 30px; font-weight: 500;}
.maincontents .section.section2 .d_area .main_slide {margin-left: -20px; width: calc(100% + 40px);} 
.maincontents .section.section2 .d_area .main_slide .slick-slider {overflow: hidden;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide {margin: 0 20px;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a {display: block;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a .img {position: relative; height: 0; padding-bottom: 92.54237288135593%; border-radius: 20px 20px 0 0; background-position: center 0; background-size: cover; background-repeat: no-repeat;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a .box {padding: 15px 20px; border-radius: 0 0 20px 20px; background-color: #f4f1fe;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a .box .category {font-weight: 500; color: #3120cf;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a .box .tit {margin-top: 10px; line-height: 30px; font-size: 22px; font-weight: 700; word-break: keep-all; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a dl {margin-top: 15px; display: flex; display:-webkit-flex; align-items: center; gap: 10px;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a dl dt {padding: 0 10px; height: 26px; line-height: 26px; font-size: 13px; font-weight: 400; text-align: center; border-radius: 26px;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a dl dt.type1 {color: #fff; background-color: #0c6edc;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a dl dt.type2 {color: #fff; background-color: #666;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a dl dt.type3 {color: #fff; background-color: #01b770;}
.maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a dl dd {width: calc(100% - 80px); font-size: 13px; font-weight: 400;}
.maincontents .section.section2 .d_area .slick-arrow {z-index: 10; opacity: 1; position: absolute; top: -10px; width: 45px; height: 45px; font-size: 0; color: transparent; border-radius: 45px; background: #fff url('../../images/hmpg/icon_main_section2_arrow.png') no-repeat center;}
.maincontents .section.section2 .d_area .slick-arrow::after, 
.maincontents .section.section2 .d_area .slick-arrow::before {display: none;}
.maincontents .section.section2 .d_area .slick-arrow.slick-prev {right: 110px;}
.maincontents .section.section2 .d_area .slick-arrow.slick-next {right: 0;}
.maincontents .section.section2 .slick-pause {position: absolute; top: -10px; right: 55px; width: 45px; height: 45px; background: url('../../images/hmpg/icon_stop.png') no-repeat center;}
.maincontents .section.section2 .slick-pause.pause {background: url('../../images/hmpg/icon_play.png') no-repeat center;}

.maincontents .section.section3 {padding: 90px 0 130px;}
.maincontents .section.section3 .d_area {display: flex; display:-webkit-flex; flex-wrap: wrap; gap: 60px;}
.maincontents .section.section3 .d_area .award {width: calc(50% - 30px);}
.maincontents .section.section3 .d_area .award .title {margin-bottom: 7px; font-size: 30px; font-weight: 600; display: flex; display:-webkit-flex; align-items: center; gap: 10px;}
.maincontents .section.section3 .d_area .award .award_tab {position: relative; display: flex; display:-webkit-flex; align-items: flex-end;}
.maincontents .section.section3 .d_area .award .award_tab li {margin-right: -1px; width: calc(33.3333333333% + 1px); height: 72px; line-height: 72px; background-color: #f8f8f8; border-radius: 20px 20px 0 0; border: 1px solid #ddd; border-bottom: 0;}
.maincontents .section.section3 .d_area .award .award_tab li:first-child {margin-right: 0;}
.maincontents .section.section3 .d_area .award .award_tab li > a {display: flex; display:-webkit-flex; justify-content: center; align-items: center; gap: 15px; width: 100%; height: 100%; font-size: 20px; font-weight: 600; text-align: center;}
.maincontents .section.section3 .d_area .award .award_tab li > a .icon {width: 45px; height: 60px;}
.maincontents .section.section3 .d_area .award .award_tab li.tab1 > a .icon {background: url('../../images/hmpg/icon_main_section3_award_tab1.png') no-repeat}
.maincontents .section.section3 .d_area .award .award_tab li.tab2 > a .icon {background: url('../../images/hmpg/icon_main_section3_award_tab2.png') no-repeat}
.maincontents .section.section3 .d_area .award .award_tab li.tab3 > a .icon {background: url('../../images/hmpg/icon_main_section3_award_tab3.png') no-repeat}
.maincontents .section.section3 .d_area .award .award_tab li.active {height: 80px; line-height: 80px; background-color: #ffb0c8; border-color: #ff87ab;}
.maincontents .section.section3 .d_area .award .award_tab li.active > a {color: #000;}
.maincontents .section.section3 .d_area .award .award_list {padding: 15px 40px; height: 270px; border-radius: 0 0 20px 20px; border: 1px solid #ddd; box-shadow: rgba(0, 0, 0, 0.01) 0px 10px 10px -2px, rgba(0, 0, 0, 0.05) 0px 10px 10px -2px;}
.maincontents .section.section3 .d_area .award .award_list .tab_list ul li {position: relative; width: 100%; border-bottom: 1px solid #ddd;}
/* 우수제안 스크롤 */

 .award .award_list .tab_list ul{overflow-y: scroll;height: 230px;}
/*  */
.maincontents .section.section3 .d_area .award .award_list .tab_list ul li a {display: block; padding: 20px 0 10px; display: flex; display:-webkit-flex; align-items: center; justify-content: space-between;}
.maincontents .section.section3 .d_area .award .award_list .tab_list ul li a .tit {width: 100%; font-size: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.maincontents .section.section3 .d_area .notice {width: calc(50% - 30px);}
.maincontents .section.section3 .d_area .notice .notice_tab {position: relative; display: flex; display:-webkit-flex;}
.maincontents .section.section3 .d_area .notice .notice_tab li {margin-right: 30px;}
.maincontents .section.section3 .d_area .notice .notice_tab li > a {font-size: 24px; font-weight: 400; color: #666;}
.maincontents .section.section3 .d_area .notice .notice_tab li a.btn_more {display: none; position: absolute; top: 0; right: 0; font-size: 16px;}
.maincontents .section.section3 .d_area .notice .notice_tab li a.btn_more .icon {margin-left: 10px; width: 14px; height: 14px;}
.maincontents .section.section3 .d_area .notice .notice_tab li a.btn_more .icon::after, 
.maincontents .section.section3 .d_area .notice .notice_tab li a.btn_more .icon::before {top: calc(50% - 1px); height: 2px; background-color: #666;} 
.maincontents .section.section3 .d_area .notice .notice_tab li.active > a {font-weight: 500; color: #222;}
.maincontents .section.section3 .d_area .notice .notice_tab li.active a.btn_more {display: block; font-weight: 400; color: #666;}
.maincontents .section.section3 .d_area .notice .notice_list {margin-top: 20px;}
.maincontents .section.section3 .d_area .notice .notice_list .tab_list ul {border-top: 1px solid #ddd;}
.maincontents .section.section3 .d_area .notice .notice_list .tab_list ul li {position: relative; width: 100%; border-bottom: 1px solid #ddd;}
.maincontents .section.section3 .d_area .notice .notice_list .tab_list ul li a {display: block; padding: 22px 0; display: flex; display:-webkit-flex; align-items: center; justify-content: space-between;}
.maincontents .section.section3 .d_area .notice .notice_list .tab_list ul li a .tit {width: calc(100% - 150px); font-size: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.maincontents .section.section3 .d_area .notice .notice_list .tab_list ul li a .date {font-size: 18px; font-weight: 400; color: #666;}

.bottomarea {background-color: #f1f4f8; border-top: 1px solid #ccc;}
.bottomarea .d_area {position: relative; padding: 30px 0 40px;}
.bottomarea .d_area .agree_area {margin-bottom: 35px; display: flex; display:-webkit-flex;}
.bottomarea .d_area .agree_area > li {margin-right: 20px; padding-right: 20px; position: relative;}
.bottomarea .d_area .agree_area > li:last-child {margin-right: 0; padding-right: 0;}
.bottomarea .d_area .agree_area > li::after {display: block; content: ''; position: absolute; top: 5px; right: 0; width: 1px; height: 15px; background-color: #ccc;}
.bottomarea .d_area .agree_area > li:last-child::after {display: none;}
.bottomarea .d_area .agree_area > li a {font-weight: 400; color: #666;}
.bottomarea .d_area .agree_area > li.pri a {font-weight: 500; color: #0447b6;}
.bottomarea .familysite {position: absolute; right: 0; top: 30px; display: flex; display:-webkit-flex;}
.bottomarea .dropdown {position: relative; display: flex; display:-webkit-flex;}
.bottomarea .dropdown .select {z-index: 999; position: relative; padding-right: 30px; min-width: 180px; height: 35px; font-size: 16px; line-height: 35px; border-radius: 8px; border: 1px solid #0b6ae0; background-color: #f1f4f8;}
.bottomarea .dropdown .select::after {content: ''; position: absolute; top: calc(50% - 8px); right: 10px; width: 10px; height: 16px; background: url('../../images/hmpg/icon_arrow_dropdown.png') no-repeat center / 100%; transition: 0.3s;}
.bottomarea .dropdown.open .select::after {transform: rotate(-180deg);}
.bottomarea .dropdown .select .dropdown-label {overflow: hidden; padding-left: 15px; display: block; font-weight: 400; color: #0b6ae0; text-overflow: ellipsis; white-space: nowrap;}
.bottomarea .dropdown .dropdown-menu {overflow-y: auto; position: absolute; left: 0; bottom: 0; padding: 20px 15px; width: 180px; height: 35px; max-height: 220px; border-radius: 8px 8px 0 0; border: 1px solid #0b6ae0; background-color: #fff; transition: 0.3s; opacity: 0;}
.bottomarea .dropdown .dropdown-menu::-webkit-scrollbar-track {border-radius: 6px; background-color: #fff;}
.bottomarea .dropdown .dropdown-menu::-webkit-scrollbar {width: 6px; background-color: #fff;}
.bottomarea .dropdown .dropdown-menu::-webkit-scrollbar-thumb {border-radius: 6px; background-color: #818185;}
.bottomarea .dropdown.open .dropdown-menu {bottom: 30px; height: auto; opacity: 1; z-index: 99;}
.bottomarea .dropdown.open .dropdown-menu li {margin-bottom: 12px;}
.bottomarea .dropdown.open .dropdown-menu li:last-child {margin-bottom: 0;}
.bottomarea .dropdown.open .dropdown-menu a {display: block; font-size: 15px; font-weight: 400; line-height: 20px; color: #666;}
.bottomarea .d_area .address_box {display: flex; display:-webkit-flex; align-items: flex-start;}
.bottomarea .d_area .address_box img {margin-right: 30px;}
.bottomarea .d_area .address_box address p {font-size: 14px; font-weight: 400; line-height: 14px; color: #666;}
.bottomarea .d_area .address_box address .info.m_hidden p {margin-bottom: 10px;}
.bottomarea .d_area .address_box address .info.m_hidden p span {position: relative; padding-right: 15px; margin-right: 15px;}
.bottomarea .d_area .address_box address .info.m_hidden p span::after {display: block; content: ''; position: absolute; top: 2px; right: -1px; width: 1px; height: 12px; background-color: #ccc;}
.bottomarea .d_area .address_box address .copyright {margin-top: 20px;}

/*팝업*/
.modal {display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1101; -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: 700px; max-width: calc(100% - 40px); max-height: calc(100% - 40px); background: #fff; border-radius: 30px 0 30px 30px;}
.popup .modal_close {position: absolute; top: 0; right: -50px; width: 50px; height: 50px; border-radius: 0 0 10px 0; background-color: #4b4c51;}
.popup .modal_close::after, .popup .modal_close::before {content: ''; position: absolute; left: 7px; top: calc(50% - 0.5px); width: 35px; height: 1px; background-color: #fff; border-radius: 3px;}
.popup .modal_close::after {transform: rotate(-45deg);}
.popup .modal_close::before {transform: rotate(45deg);}
.popup .popup_scroll {overflow-y: auto; max-height: calc(100vh - 40px);}
.popup .popup_title {padding: 40px 40px 0;}
.popup .popup_title h3 {padding-right: 30px; color: #222; font-size: 24px; font-weight: 500;}
.popup .popup_inner {padding: 0 40px 50px;}
.popup .popup_inner .popup_txt {margin-top: 20px; font-size: 16px; line-height: 26px; color: #666;}
.popup .popup_inner .button_box {margin-top: 25px;}
.popup .popup_inner .button_box button.agree img,
.popup .popup_inner .button_box button.disagree img {margin-left: 10px;}
.popup .boardview {margin-top: 30px;}
.popup .boardview h4 {margin-bottom: 5px; font-size: 18px; color: #222;}
.popup .boardview table thead tr th {padding: 12px 15px;}
.popup .boardview table tr th {font-size: 15px;}
.popup .boardview table tr td {font-size: 15px;}
.boardview.boardpopup table thead tr th {text-align: center; border-left: 1px solid #ddd;}
.boardview.boardpopup table thead tr th:first-child {border-left: 0;}
.boardview.boardpopup table tr td {text-align: center; border-left: 1px solid #ddd;}
.boardview.boardpopup table tr td:first-child {border-left: 0;}
.boardview.boardpopup table tr td .file a {font-size: 15px;}

/*메인팝업*/
.popup.main {padding: 0; transform: translate(0, 0); border-radius: 25px 25px 27px 27px;}
.popup.main .popup_title {margin-bottom: 25px; padding: 0;}
.popup.main .popup_title h3 {color: #222; font-size: 22px;}
.popup.main .popup_inner {padding: 30px 30px 40px;}
.popup.main .popup_inner img {max-width: 100%;}
.popup.main .popup_inner .content_box {margin-bottom: 20px; line-height: 24px; color: #666;}
.popup.main .popup_inner .file_box {padding-top: 25px; border-top: 1px solid #ddd;}
.popup.main .button_box {margin-top: 0;}
.popup.main .button_box button {margin-left: 0; width: 100%; height: 55px; font-size: 15px; font-weight: 500; color: #fff;}
.popup.main .button_box button:first-child {background-color: #0f6de2; border-radius: 0 0 0 25px;}
.popup.main .button_box button:last-child {background-color: #4b4c51; border-radius: 0 0 25px 0;}
.popup.main.img .popup_inner {padding: 0;}

/*에러페이지*/
.error {position: fixed; width: 100%; height: 100%; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-flow: column; align-items: center; justify-content: center;}
.error h1 {margin-bottom: 30px;}
.error .error_box {padding: 40px 50px 60px; width: 800px; text-align: center; word-break: keep-all; box-shadow: 12px 16px 16px -16px #ddd; border-radius: 15px; border: 1px solid #ddd;}
.error .error_box .txt1 {padding: 140px 0 15px; font-size: 26px; background: #fff url('../../images/hmpg/icon_error_warning.png') no-repeat center 0;}
.error .error_box .txt2 {font-size: 16px; line-height: 24px; color: #666;}
.error .error_box .button_box {margin-top: 50px;}
.error .error_box .button_box button {width: 200px; height: 55px; background-color: #0b6ae0; color: #fff; border-radius: 8px;}
.error .error_box .button_box button.btn_prev img {margin: -4px 10px 0 0;}
.error .error_box .button_box button.btn_home img {margin: -4px 0 0 8px;}



@media screen and (max-width:1366px) {
    .toparea .total_search_area .btn_close {right: 15px;}
    .casearea ul {width: 100%;}
    .bottomarea .d_area {position: relative; padding: 30px 0 40px;}
    .bottomarea .familysite {right: 0;}
}
@media screen and (max-width:1280px) {
    .toparea .topmenu .gnb {width: 550px;}
    .toparea .topmenu .gnb > li > a {font-size: 18px;}
    .casearea ul li a {font-size: 14px; letter-spacing: -0.7px;}
    .casearea ul li a span {font-size: 22px;}
}
@media screen and (max-width:1100px) {
    .toparea .topmenu .gnb {width: 450px;}
    .toparea .topmenu .gnb > li > a {font-size: 17px;}
}
@media screen and (max-width:1024px) {
    /*메뉴*/
    .toparea {z-index: 200; position: relative; padding-bottom: 0;}
    .toparea .topmenu {top: 0; height: 60px; border-top: 0; border-bottom: 1px solid #fff;}
    .toparea .topmenu h1 {position: absolute; top: 10px; left: 15px;}
    .toparea .topmenu h1 a {width: 128px; height: 37px; background-size: cover;}
    .toparea .topmenu .gnb {display: none; display:-webkit-none;}
    .toparea .topmenu .topbtn button.btn_join,
    .toparea .topmenu .topbtn button.btn_log {display: none;}
    .toparea .topmenu .topbtn button.btn_search {position: absolute; right: 55px; top: 18px; transform: scale(0.84);}
    .toparea .topmenu.active {border-bottom: 1px solid #fff; background-color: transparent;}
    .toparea .topmenu.active h1 a {width: 120px; height: 35px; background: url('../../images/hmpg/logo.png') no-repeat center / cover;}
    .toparea .topmenu.active .topbtn button.btn_search .icon::before {background-color: #fff;}
    .toparea .topmenu.active .topbtn button.btn_search .icon::after {border-color: #fff;}
    .toparea .total_search_area {z-index: 902; top: 0; padding: 80px 15px 40px; height: auto; background-color: #fff; border-top: 0; box-shadow: none;}
    .toparea .total_search_area .btn_close {top: 20px; right: 15px; transform: scale(0.8);}
    .toparea .total_search_area .search_box {width: 100%; height: 45px;}
    .toparea .total_search_area .search_box input {padding: 0 35px 0 15px; font-size: 15px;}
    .toparea .total_search_area .search_box button.btn_search {right: 10px; top: calc(50% - 13px); transform: scale(0.8);}
    .toparea .bg_total_search_area {z-index: 901; display: none; position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8);}
    .toparea .bg_total_search_area.active {display: block;}
    .toparea .topmenu .btn_allgnb {display: block; z-index: 999; position: absolute; right: 15px; top: 22px; transform: translateY(0); width: 20px; height: 14px;}
    .toparea .topmenu .btn_allgnb span {position: absolute; left: 0; display: block; width: 20px; height: 2px; background-color: #222; border-radius: 2px;}
    .toparea .topmenu .btn_allgnb span.line1 {left: 0; top: 0; width: 12px;}
    .toparea .topmenu .btn_allgnb span.line2 {left: auto; right: 0; width: 12px; top: calc(100% + 1px); transform: translateY(-50%);}
    .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.8); animation: allmenu 1s 1;}
    @keyframes allmenu {
        0% {left: 0;}
        99% {left: 100%;}
        100% {display: none;}
   }
    .toparea .allmenu-category.active {display: flex !important; display: -webkit-flex !important; justify-content: right; animation: allmenu2 1s 1;}
    @keyframes allmenu2 {
        0% {left: 100%;}
        1% {display: block;}
        100% {left: 0;}
   }
    .toparea .allmenu-category .btn_close {position: absolute; top: 19px; right: 15px; transform: scale(0.8);}
    .toparea .allmenu-category h1 {padding: 10px 15px 15px;}
    .toparea .allmenu-category h1 a {display: block; width: 128px; height: 37px; background: url('../../images/hmpg/logo_active.png') no-repeat center / auto 100%;}
    .toparea .allmenu-category .topbtn {padding: 0 15px 15px;}
    .toparea .allmenu-category .topbtn button {font-size: 11px; width: 70px; height: 25px; font-weight: 500; text-align: center; border-radius: 25px; border: 1px solid #222; color: #222;}
    .toparea .allmenu-category .topbtn button.btn_join {margin-right: 5px;}
    .toparea .allmenu-category .menu_box {overflow-y: auto; position: relative; width: 100%; height: 100%; background-color: #fff;}
    .toparea .allmenu-category .menu_box .all_gnb {display: block; margin: 0 15px; border-top: 1px solid #ccc;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a {z-index: 99; padding: 0 15px; position: relative; display: block; width: 100%; height: 50px; line-height: 50px; font-size: 18px; font-weight: 400; border-bottom: 1px solid #ccc; color: #222;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a .icon {position: absolute; top: calc(50% - 7px); right: 15px; display: inline-block; width: 13px; height: 13px;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a .icon::after, .toparea .allmenu-category .menu_box .all_gnb > li > a .icon::before {content: ''; position: absolute; left: 0; top: calc(50% - 0.5px); width: 100%; height: 1px; background-color: #222;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a .icon::before {transform: rotate(90deg);}
    .toparea .allmenu-category .menu_box .all_gnb > li.active > a .icon::before {transform: rotate(0deg);}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list {z-index: 9; display: none; padding: 25px 0; width: 100%; border-bottom: 1px solid #ccc; background-color: #f1f4f8;}
    .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: 20px;}
    .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 {margin: 0 20px; display: block; position: relative; font-size: 15px; color: #000;}

    #main .toparea .topmenu {border-bottom: 1px solid #fff; background-color: transparent;}
    #main .toparea .topmenu h1 a {background: url('../../images/hmpg/logo_active.png') no-repeat center / cover;}
    #main .toparea .topmenu .btn_allgnb span {background-color: #222;}
    #main .toparea .total_search_area {top: 0;}

    .casearea ul {margin: 0 auto; width: 100%;}
    .casearea ul li a {height: 30px; line-height: 29px; font-size: 10px;}
    .casearea ul li a span {font-size: 15px;}

    .maincontents .section.section1 {padding: 80px 0 40px; margin-left: -15px; width: calc(100% + 30px);}
    .maincontents .section.section1 .d_area {height: 580px; background: url('../../images/hmpg/bg_section1.gif') no-repeat bottom center / 700px auto;}
    .maincontents .section.section1 .d_area .title {line-height: 32px; font-size: 24px;}
    .maincontents .section.section1 .d_area .title .tit4 {line-height: 40px; font-size: 25px;}
    .maincontents .section.section1 .d_area .section1_list {margin-left: -50px; width: calc(100% + 100px); display: flex; display:-webkit-flex; flex-wrap: wrap;}
    .maincontents .section.section1 .d_area .section1_list li.list {border-radius: 10px 10px 0 10px !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: 150px; box-shadow: 0 4px 4px -4px #888;}
    .maincontents .section.section1 .d_area .section1_list li.list::before {left: auto !important; right: -8px !important; width: 8px !important; height: 10px !important; transform: none !important; background-size: 100% auto !important;}
    .maincontents .section.section1 .d_area .section1_list li.list.list3::after {top: -20px; left: 20px; width: 27px; height: 27px; background-size: 100% auto;}
    .maincontents .section.section1 .d_area .section1_list li.list.list8::after {top: -20px; left: 15px; width: 26px; height: 37px; background-size: 100% auto;}
    .maincontents .section.section1 .d_area .section1_list li.list a {padding: 10px;}
    .maincontents .section.section1 .d_area .section1_list li.list a .tit {height: 32px; line-height: 16px; font-size: 12px;}
    .maincontents .section.section1 .d_area .section1_list li.list a .txt {margin-top: 8px; gap: 5px;}
    .maincontents .section.section1 .d_area .section1_list li.list a .txt .category {width: 40px; height: 20px; line-height: 20px; font-size: 10px; border-radius: 20px;}
    .maincontents .section.section1 .d_area .section1_list li.list a .txt .name {font-size: 11px;}
    .maincontents .section.section1 .d_area .section1_list .slick-list {padding: 30px 0 0;}
    .maincontents .section.section1 .d_area .section1_list .slick-list .slick-slide {margin: 0 10px;}
    .maincontents .section.section1 .d_area .section1_list .slick-dots {display: none !important;}
    .maincontents .section.section1 .proposalarea ul {margin: 0 15px; padding: 15px 0 20px; border-radius: 10px;}
    .maincontents .section.section1 .proposalarea ul li::after {top: 5px; height: calc(100% - 5px);}
    .maincontents .section.section1 .proposalarea ul li {line-height: 20px; font-size: 11px;}
    .maincontents .section.section1 .proposalarea ul li a {line-height: 20px; font-size: 11px;}
    .maincontents .section.section1 .proposalarea ul li span {font-size: 20px;}

    .maincontents .section.section2 .d_area .title {margin-bottom: 15px; line-height: 24px; font-size: 24px;}
    .maincontents .section.section2 .d_area .main_slide {margin-left: -10px; width: calc(100% + 20px);}
    .maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide {margin: 0 10px;}
    .maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a .img {border-radius: 10px 10px 0 0;}
    .maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a .box {padding: 15px; border-radius: 0 0 10px 10px;}
    .maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a .box .tit {margin-top: 5px; line-height: 24px; font-size: 18px;}
    .maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a dl {margin-top: 10px; gap: 5px;}
    .maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a dl dt {height: 24px; line-height: 24px; font-size: 11px; border-radius: 24px;}
    .maincontents .section.section2 .d_area .main_slide .slick-slider .slick-slide a dl dd {width: calc(100% - 67px); font-size: 12px;}
    .maincontents .section.section2 .d_area .slick-arrow {top: -3px; width: 30px; height: 30px; border-radius: 30px; background-size: 100% auto;}
    .maincontents .section.section2 .d_area .slick-arrow.slick-prev {right: 74px;}
    .maincontents .section.section2 .d_area .slick-arrow.slick-next {right: 0;}
    .maincontents .section.section2 .slick-pause {top: -3px; right: 37px; width: 30px; height: 30px; background-size: 100% auto;}
    .maincontents .section.section2 .slick-pause.pause {background-size: 100% auto;}


    .maincontents .section.section3 {padding: 40px 0 80px;}
    .maincontents .section.section3 .d_area {gap: 40px;}
    .maincontents .section.section3 .d_area .award {width: 100%;}
    .maincontents .section.section3 .d_area .award .title {font-size: 24px;}
    .maincontents .section.section3 .d_area .award .title img {width: 46px; height: auto;}
    .maincontents .section.section3 .d_area .award .award_tab li {height: 52px; line-height: 52px; border-radius: 10px 10px 0 0;}
    .maincontents .section.section3 .d_area .award .award_tab li > a {gap: 10px; font-size: 17px;}
    .maincontents .section.section3 .d_area .award .award_tab li > a .icon {width: 30px; height: 40px; background-size: 100% auto !important;}
    .maincontents .section.section3 .d_area .award .award_tab li.active {height: 60px; line-height: 60px;}
    .maincontents .section.section3 .d_area .award .award_list {padding: 10px 20px; height: 220px; border-radius: 0 0 10px 10px; box-shadow: rgba(0, 0, 0, 0.01) 0px 10px 10px -2px, rgba(0, 0, 0, 0.05) 0px 10px 10px -2px;}
    .maincontents .section.section3 .d_area .award .award_list .tab_list ul li a {padding: 15px 0 10px;}
    .maincontents .section.section3 .d_area .award .award_list .tab_list ul li a .tit {font-size: 14px;}
    .maincontents .section.section3 .d_area .notice {width: 100%;}
    .maincontents .section.section3 .d_area .notice .notice_tab li {margin-right: 20px;}
    .maincontents .section.section3 .d_area .notice .notice_tab li > a {font-size: 17px;}
    .maincontents .section.section3 .d_area .notice .notice_tab li a.btn_more {font-size: 14px;}
    .maincontents .section.section3 .d_area .notice .notice_tab li a.btn_more .icon {margin-left: 10px; width: 12px; height: 12px;}
    .maincontents .section.section3 .d_area .notice .notice_list {margin-top: 15px;}
    .maincontents .section.section3 .d_area .notice .notice_list .tab_list ul li a {padding: 17px 0;}
    .maincontents .section.section3 .d_area .notice .notice_list .tab_list ul li a .tit {width: calc(100% - 100px); font-size: 14px;}
    .maincontents .section.section3 .d_area .notice .notice_list .tab_list ul li a .date {font-size: 12px;}
    .award .award_list .tab_list ul{height: 190px;}

    .bottomarea .d_area {padding: 20px 15px;}
    .bottomarea .d_area .agree_area {margin-bottom: 70px; justify-content: center; text-align: center;}
    .bottomarea .d_area .agree_area > li {margin-right: 10px; padding-right: 10px;}
    .bottomarea .d_area .agree_area > li::after {top: 4px; right: -1px; height: 12px;}
    .bottomarea .familysite {top: 60px; left: calc(50% - 100px);}
    .bottomarea .dropdown .select {padding-right: 25px; min-width: 0; width: 200px; height: 30px; line-height: 30px; font-size: 11px; border-radius: 5px;}
    .bottomarea .dropdown .select::after {width: 8px;}
    .bottomarea .dropdown .select .dropdown-label {padding-left: 10px;}
    .bottomarea .dropdown .dropdown-menu {padding: 15px 10px; width: 200px; max-height: 190px; border-radius: 5px 5px 0 0;}
    .bottomarea .dropdown .dropdown-menu::-webkit-scrollbar-track {border-radius: 4px;}
    .bottomarea .dropdown .dropdown-menu::-webkit-scrollbar {width: 4px;}
    .bottomarea .dropdown .dropdown-menu::-webkit-scrollbar-thumb {border-radius: 4px;}
    .bottomarea .dropdown.open .dropdown-menu {bottom: 25px;}
    .bottomarea .dropdown.open .dropdown-menu li {margin-bottom: 8px;}
    .bottomarea .dropdown.open .dropdown-menu a {font-size: 11px; line-height: 20px;}
    .bottomarea .d_area .address_box {display: block; text-align: center;}
    .bottomarea .d_area .address_box img {margin-right: 0; width: 170px;}
    .bottomarea .d_area .address_box address {display: block; margin-top: 15px;}
    .bottomarea .d_area .address_box address .info.w_hidden p {margin-bottom: 5px; font-size: 11px; line-height: 17px; color: #666;}
    .bottomarea .d_area .address_box address .copyright {margin-top: 15px; font-size: 10px; line-height: 15px;}

    /*팝업*/
    .popup {border-radius: 20px 0 20px 20px;}
    .popup .modal_close {position: absolute; top: 15px; right: 15px; width: 20px; height: 20px; border-radius: 0; background: 0;}
    .popup .modal_close::after, .popup .modal_close::before {left: -2px; top: calc(50% - 0.5px); width: 23px; height: 1px; background-color: #000;}
    .popup .popup_title {position: relative; padding: 15px 15px 0;}
    .popup .popup_title h3 {padding-right: 0; font-size: 20px;}
    .popup .popup_inner {padding: 0 15px 20px;}
    .popup .popup_inner .popup_txt {margin-top: 15px; font-size: 14px; line-height: 20px;}
    .popup .popup_inner .button_box {margin-top: 20px;}
    .popup .popup_inner .button_box button.agree img,
    .popup .popup_inner .button_box button.disagree img {margin-left: 5px; width: 16px; height: auto; }
    .popup .boardview {margin-top: 15px;}
    .popup .boardview h4 {font-size: 16px;}
    .popup .boardview table thead tr th {padding: 12px 15px;}
    .popup .boardview table tr th {font-size: 13px;}
    .popup .boardview table tr td {font-size: 13px;}
    .boardview.boardpopup table thead tr {display: none;}
    .boardview.boardpopup table thead tr th {text-align: left; border-left: 0;}
    .boardview.boardpopup table tr td {text-align: left; border-left: 0;}
    .boardview.boardpopup table tr td .w_hidden {display: inline-block !important; margin-right: 5px;}
    .boardview.boardpopup table tr td .file a {font-size: 13px;}
    
    /*메인팝업*/
    .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 h1 {margin-bottom: 20px;}
    .error h1 img {width: auto; height: 31px;}
    .error .error_box {margin: 0 15px; padding: 40px 35px 40px; width: calc(100% - 30px); box-shadow: 0 8px 8px -8px #ddd; border-radius: 8px;}
    .error .error_box .txt1 {padding: 100px 0 15px; font-size: 15px; background-size: 70px auto;}
    .error .error_box .txt2 {font-size: 13px; line-height: 20px;}
    .error .error_box .button_box {margin-top: 30px;}
    .error .error_box .button_box button {width: 100%; height: 45px; font-size: 15px; border-radius: 5px;}
    .error .error_box .button_box button img {display: none;}
}
@media screen and (max-width:800px){
    .toparea .topmenu {top: 0;}
    .casearea ul {flex-wrap: wrap;}
    .casearea ul li {width: 25%; height: 30px; line-height: 30px;}
    .casearea ul li:nth-child(5),
    .casearea ul li:nth-child(6),
    .casearea ul li:nth-child(7) {width: 33.33333333%; border-top: 1px solid rgba(255, 255, 255, 0.15);}
}
@media screen and (max-width:640px){
    .maincontents .section.section1 .proposalarea ul li {width: 50%;}
    .maincontents .section.section1 .proposalarea ul li:nth-child(3),
    .maincontents .section.section1 .proposalarea ul li:nth-child(4) {margin-top: 10px;}
    .maincontents .section.section1 .proposalarea ul li:nth-child(2n):after {display: none;}
    .maincontents .section.section2 .d_area ul {flex-wrap: wrap;}
    .maincontents .section.section2 .d_area ul li {width: 50%;}
    .maincontents .section.section2 .d_area ul li:nth-child(2n) {border-right: 0;}
    .maincontents .section.section2 .d_area ul li:nth-child(1),
    .maincontents .section.section2 .d_area ul li:nth-child(2) {border-bottom: 1px solid rgba(255, 255, 255, 0.15)}
}
@media screen and (max-width:360px){
    .casearea ul li a {font-size: 9px;}
    .casearea ul li a span {font-size: 14px;}
}
@media screen and (max-width:320px){   
}