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

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

/*상단*/
.toparea .topmenu {z-index: 9999; position: absolute; left: 0; top: 0; width: 100%; background: #fff url('../../images/hmpg/bg_topmenu.png') repeat-x center 139px;}
.toparea .topmenu.active {box-shadow: 0 16px 16px -16px rgba(0, 0, 0, 0.1);}
.toparea .topmenu .topbar {margin: 10px auto 12px; max-width: 100%; width: 1400px; display: flex; display:-webkit-flex; justify-content: space-between;}
.toparea .topmenu .center_box ul {padding: 5px 0 0; display: flex; display:-webkit-flex; align-items: center;}
.toparea .topmenu .center_box ul li {position: relative; padding-right: 22px;}
.toparea .topmenu .center_box ul li::after {content: ''; position: absolute; right: 11px; top: 8px; width: 1px; height: 10px; background-color: #cecece;}
.toparea .topmenu .center_box ul li:last-child {padding-right: 0;}
.toparea .topmenu .center_box ul li:last-child::after {display: none;}
.toparea .topmenu .center_box ul li a {font-size: 14px; color: #666;}
.toparea .topmenu .log_box > ul {padding: 5px 0 0; display: flex; display:-webkit-flex; align-items: center;}
.toparea .topmenu .log_box > ul > li {position: relative; padding-right: 22px;}
.toparea .topmenu .log_box > ul > li::after {content: ''; position: absolute; right: 11px; top: 8px; width: 1px; height: 10px; background-color: #cecece;}
.toparea .topmenu .log_box > ul > li:last-child {padding-right: 0;}
.toparea .topmenu .log_box > ul > li:last-child::after {display: none;}
.toparea .topmenu .log_box > ul > li > a {font-size: 14px; color: #666;}
.toparea .topmenu .log_box > ul > li.login a {padding-left: 22px; display: block; width: 97px; height: 34px; line-height: 32px; font-weight: 500; text-align: center; border-radius: 34px; border: 1px solid #ddd; background: #fff url('../../images/hmpg/icon_login.png') no-repeat 18px center;}
.toparea .topmenu .log_box > ul > li.join a {padding-left: 22px; display: block; width: 109px; height: 34px; line-height: 32px; font-weight: 500; text-align: center; border-radius: 34px; border: 1px solid #ddd; background: #fff url('../../images/hmpg/icon_join.png') no-repeat 18px center;}
.toparea .topmenu .log_box > ul > li.mypage {position: relative;}
.toparea .topmenu .log_box > ul > li.mypage .mypage_box {display: none; z-index: 1; padding: 20px; position: absolute; top: 25px; left: calc(50% - 77px); width: 155px; border-radius: 10px; border: 1px solid #dd2f4f; background-color: #fff; box-shadow: 0px 5px 8px -5px #ddd;}
.toparea .topmenu .log_box > ul > li.mypage .mypage_box ul li {margin-bottom: 12px; line-height: 15px;}
.toparea .topmenu .log_box > ul > li.mypage .mypage_box ul li:last-child {margin-bottom: 0;}
.toparea .topmenu .log_box > ul > li.mypage .mypage_box ul li a {font-size: 15px; color: #666;}
.toparea .topmenu .log_box > ul > li.mypage .mypage_box ul li:hover a {color: #dd2f4f;}
.toparea .topmenu .log_box > ul > li.mypage:hover a + .mypage_box {display: block;}
.toparea .topmenu .log_box.logout ul li {padding-right: 10px;}
.toparea .topmenu .log_box.logout ul li:last-child {padding-right: 0;}
.toparea .topmenu .log_box.logout ul li::after {display: none;}
.toparea .topmenu .gnb {margin: 0 auto; max-width: 100%; width: 1400px; display: flex; display:-webkit-flex; justify-content: center;}
.toparea .topmenu .gnb > li {flex: 1 0; width: 100%; text-align: center;}
.toparea .topmenu .gnb > li > a {padding: 0 35px; transition: none; display: block; line-height: 60px; font-size: 20px; font-weight: 500;}
.toparea .topmenu .gnb > li:hover > a {color: #dd2f4f;}
.toparea .topmenu .gnb > li > a span {position: relative;}
.toparea .topmenu .gnb > li:hover > a span::after {content: ''; padding: 0 30px; display: block; position: absolute; bottom: -20px; left: -30px; width: 100%; height: 3px; background-color: #dd2f4f;}
.toparea .topmenu .gnb > li .menu_list {display: none; margin-top: 0px !important; padding: 20px 0 30px 95px !important; width: 100%; text-align: left;}
.toparea .topmenu .gnb > li:nth-child(1) .menu_list {padding: 20px 0 30px 85px !important;}
.toparea .topmenu .gnb > li:nth-child(5) .menu_list {padding: 20px 0 30px 105px !important;}
.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 {line-height: 16px; font-size: 16px; color: #666;}
.toparea .topmenu .gnb > li .menu_list > li:hover > a {font-weight: 500; color: #dd2f4f;}
.toparea .topmenu .bg_topmenu {display: none; position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);}
.toparea .topmenu.active .bg_topmenu {display: block;}
.toparea .topmenu .btn_allgnb {display: none;}
.toparea .allmenu-category {display: none !important;}

/*메인*/
.maincontents {padding: 140px 0 0;}
.maincontents .section {position: relative;}
.maincontents .section .title_box {margin-bottom: 35px; position: relative; display: flex; display:-webkit-flex; justify-content: center; }
.maincontents .section .title_box h3 {font-size: 45px; line-height: 45px; font-weight: 600; text-align: center;}
.maincontents .section .title_box p {margin-top: 20px; font-size: 20px; text-align: center; color: #666;}
.maincontents .section .title_box .btn_more {position: absolute; top: 0; right: 0; width: 102px; height: 45px; line-height: 45px; font-size: 16px; text-align: center; border-radius: 45px; background-color: #fff; color: #666;}
.maincontents .section .title_box .btn_more .icon {margin-right: 10px; width: 15px; height: 15px;}
.maincontents .section .title_box .btn_more .icon::after, .maincontents .section .title_box .btn_more .icon::before {height: 3px; background-color: #625aa5;}
.maincontents .section .tab_box ul {display:flex; display:-webkit-flex;}
.maincontents .section .tab_box ul li {background-color: #f4f4f4;}
.maincontents .section .tab_box ul li:first-child {border-radius: 55px 0 0 55px;}
.maincontents .section .tab_box ul li:last-child {border-radius: 0 55px 55px 0;}
.maincontents .section .tab_box ul li a {padding: 0 30px; display: block; width: 100%; height: 55px; line-height: 55px; font-size: 20px; font-weight: 500; border-radius: 55px; color: #2d2d2d;}
.maincontents .section .tab_box ul li.active a {background-color: #dd2f4f; color: #fff;}

.maincontents .section.section1 {padding: 45px 0 35px; height: 590px; background: #fdfbf4 url('../../images/hmpg/bg_section1.png') no-repeat center / auto 100%;}
.maincontents .section.section1 .d_area h3 {margin-bottom: 20px; line-height: 50px; font-size: 50px; font-weight: 700; text-align: center;}
.maincontents .section.section1 .d_area h3 span {color: #dd2f4f;}
.maincontents .section.section1 .d_area p {line-height: 32px; font-size: 22px; font-weight: 500; text-align: center;}
.maincontents .section.section1 .d_area .search_box {margin: 184px auto 0; padding: 30px 55px; width: 1002px; height: 190px; border-radius: 18px; background-color: rgba(252, 211, 105, 0.93); box-shadow: 0 0 24px -8px rgba(0, 0, 0, 0.3);}
.maincontents .section.section1 .d_area .search_box .top {margin-bottom: 20px; display: flex; display:-webkit-flex; align-items: center; gap: 5px;}
.maincontents .section.section1 .d_area .search_box .top .tit {padding: 0 30px; height: 70px; line-height: 70px; font-size: 22px; font-weight: 500; border-radius: 70px; color: #fff; background-color: #625ba6;}
.maincontents .section.section1 .d_area .search_box .top .optionbox {width: 155px; height: 70px; border-radius: 70px; border: 0;}
.maincontents .section.section1 .d_area .search_box .top .optionbox::after {top: calc(50% - 4px); right: 20px; width: 19px; height: 9px; border: 0; background: url('../../images/hmpg/icon_section1_select.png') no-repeat;}
.maincontents .section.section1 .d_area .search_box .top .optionbox select {padding: 0 45px 0 20px; font-size: 18px; font-weight: 500; color: #625ba6; border-radius: 70px;}
.maincontents .section.section1 .d_area .search_box .top .search {display: flex; display:-webkit-flex; align-items: center; gap: 5px;}
.maincontents .section.section1 .d_area .search_box .top .search .inpbox {width: 347px; height: 70px; border-radius: 70px; border: 0;}
.maincontents .section.section1 .d_area .search_box .top .search .inpbox input {padding: 0 20px; font-size: 18px; color: #666; border-radius: 70px;}
.maincontents .section.section1 .d_area .search_box .top .search .btn_search {width: 70px; height: 70px; background-color: #625ba6; border-radius: 70px;}
.maincontents .section.section1 .d_area .search_box .top .search .btn_search .icon {margin: 0 auto; width: 24px; height: 24px;}
.maincontents .section.section1 .d_area .search_box .top .search .btn_search .icon::before {width: 9px; background-color: #fff;}
.maincontents .section.section1 .d_area .search_box .top .search .btn_search .icon::after {width: 16px; height: 16px; border: 2px solid #fff;}
.maincontents .section.section1 .d_area .search_box .bottom {display: flex; display:-webkit-flex; align-items: center; gap: 20px;}
.maincontents .section.section1 .d_area .search_box .bottom .tit {padding: 0 20px; height: 40px; line-height: 38px; font-weight: 500; color: #473f95; border-radius: 40px; border: 1px solid #473f95;}
.maincontents .section.section1 .d_area .search_box .bottom .popular_list {display: flex; display:-webkit-flex; align-items: center; gap: 15px;}
.maincontents .section.section1 .d_area .search_box .bottom .popular_list li a {color: #473f95;}

.maincontents .section.section2 {padding: 80px 0 110px;}
.maincontents .section.section2 .d_area {position: relative;}
.maincontents .section.section2 .d_area .slide_box.program {overflow: hidden; padding: 25px 0 0;}
.maincontents .section.section2 .d_area .slide_box.program .slick-list {overflow: visible;}
.maincontents .section.section2 .d_area .slide_box.program .slick-list .slick-slide {margin: 0 15px;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a {padding: 0 0 55px; position: relative; border-radius: 20px; border: 2px solid #ddd; background-color: #fff; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s;} 
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a:hover {margin-top: -25px; box-shadow: 0 0 24px -8px rgba(0, 0, 0, 0.3);}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a.type1:hover {border-color: #dd2f4f;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a.type2:hover {border-color: #8d6db0;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a .category {padding: 0 30px; display: inline-block; position: absolute; top: -2px; left: -2px; height: 40px; line-height: 40px; font-size: 16px; border-radius: 20px 0 20px 0; background-color: #000; color: #fff;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a.type1 .category {background-color: #dd2f4f;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a.type2 .category {background-color: #8d6db0;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a .thumb {height: 0; padding-bottom: 62%; border-radius: 20px 20px 0 0; background-repeat: no-repeat; background-position: center; background-size: cover;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a .tit {margin: 15px 15px 10px; height: 56px; line-height: 28px; font-size: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a .keyword {margin: 0 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 26px;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a .keyword span {margin-right: 5px; font-size: 14px; color: #666;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a .btn_detail {padding: 0 50px 0 20px; display: inline-block; position: absolute; bottom: -2px; right: -2px; height: 40px; line-height: 40px; font-size: 14px; border-radius: 20px 0 20px 0; background: url('../../images/hmpg/icon_main_section2_arrow.png') no-repeat center right 20px; color: #666;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a:hover .btn_detail {color: #fff; background: url('../../images/hmpg/icon_main_section2_arrow_active.png') no-repeat center right 20px;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a.type1:hover .btn_detail {background-color: #dd2f4f;}
.maincontents .section.section2 .d_area .slide_box.program .slick-slider a.type2:hover .btn_detail {background-color: #8d6db0;}
.maincontents .section.section2 .d_area .slide_box.program .progress {cursor: pointer; margin: 40px auto 0; overflow: hidden; display: block; width: calc(100% - 440px); height: 6px; border-radius: 6px; background-color: #d9d9d9; background-image: linear-gradient(to right, #6c6c6c, #6c6c6c); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .4s ease-in-out;}
.maincontents .section.section2 .d_area .slide_box.program .slick-pause {z-index: 11; position: absolute; left: calc(100% - 200px); bottom: -7px; width: 20px; height: 20px; font-size: 0; border-radius: 20px; background: #6f6f6f url('../../images/hmpg/icon_section2_stop.png') no-repeat center;}
.maincontents .section.section2 .d_area .slide_box.program .slick-pause.pause {background: #6f6f6f url('../../images/hmpg/icon_section2_play.png') no-repeat center;}
.maincontents .section.section2 .d_area .slide_box.program .slick-arrow {display: none !important;}
.maincontents .section.section2 .d_area .slide_box.program .slick-dots {display: none !important;}

.maincontents .section.section3 {padding: 0 0 125px;}
.maincontents .section.section3 .box {padding: 40px 80px 60px; position: relative; border-radius: 200px; background-color: #faf6ea;}
.maincontents .section.section3 .box::after {content: ''; display: block; width: 311px; height: 233px; position: absolute; bottom: 0; right: 40px; background: url('../../images/hmpg/img_section3_people.png') no-repeat;}
.maincontents .section.section3 .box .txt {margin-bottom: 18px; font-size: 22px; font-weight: 500;}
.maincontents .section.section3 .box .txt span {color: #dd2f4f;}
.maincontents .section.section3 .box .step_box {display: flex; display:-webkit-flex; flex-wrap: wrap; gap: 20px;}
.maincontents .section.section3 .box .step_box li {padding: 0 24px; position: relative; height: 56px; line-height: 50px; font-size: 18px; border-radius: 20px; border: 3px solid #dd2f4f; background-color: #fff;}
.maincontents .section.section3 .box .step_box li::after {content: ''; display: block; width: 16px; height: 16px; position: absolute; top: calc(50% - 8px); right: -17px; background: url('../../images/hmpg/icon_section3_arrow.png') no-repeat;}
.maincontents .section.section3 .box .step_box li:last-child:after {display: none;}
.maincontents .section.section3 .box .button_box {position: absolute; bottom: -30px; left: 0; width: 100%;}
.maincontents .section.section3 .box .button_box button {padding: 0 30px; height: 60px; font-size: 18px; border-radius: 60px;}
.maincontents .section.section3 .box .button_box button .icon {margin-left: 10px; display: inline-block;}
.maincontents .section.section3 .box .button_box .btn_shortcut .icon {width: 19px; height: 14px; background: url('../../images/hmpg/icon_section3_shortcut.png') no-repeat;}
.maincontents .section.section3 .box .button_box .btn_download .icon {width: 18px; height: 18px; background: url('../../images/hmpg/icon_section3_download.png') no-repeat;}

.maincontents .section.section4 {padding: 60px 0 40px; background-color: #f5f5f8;}
.maincontents .section.section4 .d_area .faq {display: flex; display:-webkit-flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;}
.maincontents .section.section4 .d_area .faq li {width: calc(50% - 20px); border-radius: 10px; border: 1px solid #ddd; background-color: #fff; box-shadow: 0px 5px 8px -3px #ddd;}
.maincontents .section.section4 .d_area .faq li:hover {border: 1px solid #625aa5;}
.maincontents .section.section4 .d_area .faq li a {padding: 0 20px; display: block; height: 70px; line-height: 70px; font-size: 20px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.maincontents .section.section4 .d_area .faq li:hover a {color: #625aa5;}
.maincontents .section.section4 .d_area .button_box {margin-top: 40px;}
.maincontents .section.section4 .d_area .button_box button {width: 180px; height: 60px; font-size: 20px; border-radius: 60px;}

.maincontents .section.section5 {padding: 85px 0 95px;}
.maincontents .section.section5 .d_area {display: flex; display:-webkit-flex; justify-content: space-between; gap: 50px;}
.maincontents .section.section5 .d_area .title_box {display: block;}
.maincontents .section.section5 .d_area .title_box .btn_more {background-color: #f4f4f4;}
.maincontents .section.section5 .d_area .title_box .btn_more .icon::after, .maincontents .section.section5 .d_area .title_box .btn_more .icon::before {background-color: #dd2f4f;}
.maincontents .section.section5 .d_area .left {width: calc(100% - 340px);}
.maincontents .section.section5 .d_area .left .gallery_list {display: flex; display:-webkit-flex; justify-content: space-between; gap: 20px;}
.maincontents .section.section5 .d_area .left .gallery_list li {width: calc(25% - 15px);}
.maincontents .section.section5 .d_area .left .gallery_list li a .thumb {height: 0; padding-bottom: 66%; border-radius: 20px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.maincontents .section.section5 .d_area .left .gallery_list li a .tit {margin: 20px 0 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.maincontents .section.section5 .d_area .right {padding: 35px; width: 290px; border-radius: 50px 15px 50px 50px; background-color: #f5c74f;}
.maincontents .section.section5 .d_area .right h3 {margin-bottom: 15px; font-size: 24px; font-weight: 600;}
.maincontents .section.section5 .d_area .right .service_list li {margin-bottom: 10px;}
.maincontents .section.section5 .d_area .right .service_list li:last-child {margin-bottom: 0;}
.maincontents .section.section5 .d_area .right .service_list li a {padding-left: 55px; display: block; width: 100%; height: 55px; line-height: 55px; font-size: 17px; font-weight: 500; border-radius: 10px; background-color: #fff;}
.maincontents .section.section5 .d_area .right .service_list li.list1 a {background: #fff url('../../images/hmpg/icon_section5_service_list1.png') no-repeat 12px center;}
.maincontents .section.section5 .d_area .right .service_list li.list2 a {background: #fff url('../../images/hmpg/icon_section5_service_list2.png') no-repeat 18px center;}
.maincontents .section.section5 .d_area .right .service_list li.list3 a {background: #fff url('../../images/hmpg/icon_section5_service_list3.png') no-repeat 15px center;}
.maincontents .section.section5 .d_area .right .service_list li:hover a {background-color: #dd2f4f;}

.maincontents .section.section6 {padding: 25px 0; background-color: #f6f6f6;}
.maincontents .section.section6 .d_area .slide_box.site {position: relative; padding-left: 180px; width: 100%;}
.maincontents .section.section6 .d_area .slide_box.site .slick-slider .slick-slide {padding: 0 5px;}
.maincontents .section.section6 .d_area .slide_box.site .slick-slider .slick-slide a {width: 100%; height: 70px; display: flex !important; display:-webkit-flex !important; align-items: center; justify-content: center; border-radius: 20px; border: 1px solid #d7d7d7; background-color: #fff;}
.maincontents .section.section6 .d_area .slide_box.site .slick-slider .slick-slide a img {max-width: 90%; max-height: 90%; border-radius: 20px;}
.maincontents .section.section6 .d_area .slide_box.site .slick-arrow {opacity: 1; top: calc(50% - 25px); width: 50px; height: 50px; border-radius: 50px; border: 1px solid #ccc; background-color: #fff;}
.maincontents .section.section6 .d_area .slide_box.site .slick-prev.slick-arrow {left: 0;}
.maincontents .section.section6 .d_area .slide_box.site .slick-next.slick-arrow {left: 112px;}
.maincontents .section.section6 .d_area .slide_box.site .slick-arrow::after, 
.maincontents .section.section6 .d_area .slide_box.site .slick-arrow::before {left: 18px; top: 24px; width: 11px; height: 1px; background-color: #333;}
.maincontents .section.section6 .d_area .slide_box.site .slick-pause {z-index: 11; position: absolute; left: 56px; top: calc(50% - 25px); width: 50px; height: 50px; font-size: 0; border-radius: 50px; border: 1px solid #ccc; background: #fff url('../../images/hmpg/icon_section6_stop.png') no-repeat center;}
.maincontents .section.section6 .d_area .slide_box.site .slick-pause.pause {background: #fff url('../../images/hmpg/icon_section6_play.png') no-repeat center;}

/*하단*/
.bottomarea {padding: 40px 0 60px; position: relative; background-color: #52555e;}
.bottomarea .d_area {position: relative;}
.bottomarea .d_area .policy_area {display: flex; display:-webkit-flex; flex-wrap: wrap;}
.bottomarea .d_area .policy_area > li {position: relative; margin-right: 20px; padding-right: 20px;}
.bottomarea .d_area .policy_area > li:last-child {margin-right: 0; padding-right: 0;}
.bottomarea .d_area .policy_area > li::after {content: ''; position: absolute; right: 0; top: 8px; width: 1px; height: 14px; background-color: #838588;}
.bottomarea .d_area .policy_area > li:last-child::after {display: none;}
.bottomarea .d_area .policy_area > li a {font-size: 18px; font-weight: 500; color: #d5d5d5;}
.bottomarea .d_area .policy_area > li.pri a {color: #feedc0;}
.bottomarea .d_area .address_area {padding: 30px 0 0;}
.bottomarea .d_area .address_area address p {font-size: 14px; line-height: 24px; color: #dbdada;}
.bottomarea .d_area .address_area address p span {margin-right: 15px;}
.bottomarea .d_area .address_area address p.copyright {margin-top: 5px; font-size: 13px;}
.bottomarea .btn_top {z-index: 99; position: absolute; right: -80px; top: -70px;}
.bottomarea .btn_top a {font-size: 0; text-indent: -9999px;}

/*팝업*/
.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: 9999; 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: 12px; top: calc(50% - 0.5px); width: 27px; 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: 30px 35px 0;}
.popup .popup_title h3 {padding-right: 30px; color: #333; font-size: 24px; font-weight: 500;}
.popup .popup_inner {padding: 0 35px 40px;}
.popup .popup_inner .button_box {margin-top: 20px;}

/*레이어팝업*/
.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-radius: 27px; border: 1px solid #ccc;}
.popup.main .popup_title {margin-bottom: 25px; padding: 0;}
.popup.main .popup_title h3 {font-size: 24px; color: #222;}
.popup.main .popup_inner {padding: 30px 30px 35px;}
.popup.main .popup_inner img {max-width: 100%; border-radius: 27px 27px 0 0;}
.popup.main .popup_inner .content_box {color: #666;}
.popup.main .popup_inner .file_box {margin-top: 20px; padding-top: 20px; 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; background-color: #5f6169;}
.popup.main .button_box button:first-child {border-radius: 0 0 0 25px; background-color: var(--color-active);}
.popup.main .button_box button:last-child {border-radius: 0 0 25px 0;}
.popup.main.img .popup_inner {padding: 0;}

/*사이트맵*/
.popup.sitemap {top: 0; left: 0; transform: none; width: 100%; max-width: 100%; max-height: auto; border-radius: 0;}
.popup.sitemap .modal_close {top: 55px; right: 0; width: 28px; height: 28px; border-radius: 0; background-color: #fff;}
.popup.sitemap .modal_close::after, .popup.sitemap .modal_close::before {left: -3px; top: calc(50% - 1px); width: 34px; height: 2px; background-color: #000; border-radius: 0;}
.popup.sitemap .popup_scroll {overflow-y: auto; margin: 0 auto; max-width: 100%; max-height: 100%; width: 1400px;}
.popup.sitemap .popup_title {padding: 50px 0 30px; position: relative; border-bottom: 1px solid #555;}
.popup.sitemap .popup_title h3 {padding-right: 0; font-size: 26px;}
.popup.sitemap .popup_inner {padding: 0 0 100px;}
.popup.sitemap .popup_inner .sitemap_list > li {padding: 30px 0; display:flex; display:-webkit-flex; border-bottom: 1px solid #ddd;}
.popup.sitemap .popup_inner .sitemap_list > li:last-child {border-bottom: 0;}
.popup.sitemap .popup_inner .sitemap_list > li .tit {width: 230px; font-size: 22px; font-weight: 500; color: #dd2f4f;}
.popup.sitemap .popup_inner .sitemap_list > li > ul {width: calc(100% - 230px); display:flex; display:-webkit-flex;}
.popup.sitemap .popup_inner .sitemap_list > li > ul > li {width: 20%;}
.popup.sitemap .popup_inner .sitemap_list > li > ul > li a {font-size: 18px;}
.popup.sitemap .popup_inner .sitemap_list > li > ul > li:hover a {color: #dd2f4f;}

/*추가정보입력*/
.popup.addinfo .popup_title {padding: 40px 40px 0;}
.popup.addinfo .popup_title h3 span {color: #dd2f4f;}
.popup.addinfo .popup_inner {padding: 0 40px 35px;}
.popup.addinfo .popup_inner p {margin: 15px 0; line-height: 24px; font-size: 15px; color: #666;}
.popup.addinfo .popup_inner .switch_checkbox {margin-bottom: 10px; text-align: right;}
.popup.addinfo .popup_inner .switch_checkbox span {margin-left: 10px; font-size: 16px; color: #666;}
.popup.addinfo .popup_inner .radio_box2 input[type=radio]:checked + label {color: #fff; background-color: #625aa5; border: 1px solid #625aa5;}
.popup.addinfo .popup_inner .check_box2 input[type=checkbox]:checked + label {color: #fff; background-color: #625aa5; border: 1px solid #625aa5;}
.popup.addinfo .popup_inner .addinfo_list {border-top: 1px solid #222;}
.popup.addinfo .popup_inner .addinfo_list > li {padding: 15px 0; display:flex; display:-webkit-flex; flex-wrap: wrap; border-bottom: 1px solid #ddd;}
.popup.addinfo .popup_inner .addinfo_list > li .tit {width: 100px; font-size: 18px; font-weight: 500; color: #625aa5;}
.popup.addinfo .popup_inner .addinfo_list > li > ul {width: calc(100% - 100px); display:flex; display:-webkit-flex;}
.popup.addinfo .popup_inner .addinfo_list > li > .box_wrap {width: calc(100% - 100px);}
.popup.addinfo .popup_inner .addinfo_list > li > .box_wrap .box {display:flex; display:-webkit-flex;}
.popup.addinfo .popup_inner .addinfo_list > li > .box_wrap .box .tit2 {width: 80px;}
.popup.addinfo .popup_inner .addinfo_list > li > .box_wrap .box .radio_box2 {width: calc(100% - 80px);}
.popup.addinfo .popup_inner .addinfo_list > li > .box_wrap .box:first-child {margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd;}
.popup.addinfo .popup_inner .button_box {margin-top: 35px;}

/*이용약관동의*/
.popup.termsagree .popup_title {padding: 40px 40px 0;}
.popup.termsagree .popup_title h3 span {color: #dd2f4f;}
.popup.termsagree .popup_inner {padding: 0 40px;}
.popup.termsagree .popup_inner p {margin: 15px 0; line-height: 24px; font-size: 15px; color: #666;}
.popup.termsagree .popup_inner .agree_area .agree_title {margin-bottom: 10px; font-size: 18px; font-weight: 500;}
.popup.termsagree .popup_inner .agree_area .agree_box {max-height: 300px;}
.popup.termsagree .popup_inner .button_box {margin-top: 0; margin-left: -40px; width: calc(100% + 80px);}
.popup.termsagree .popup_inner .button_box button {width: 100%; height: 50px; font-size: 18px; border-radius: 0 0 30px 30px;}

/*에러페이지*/
.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 .error_box {padding: 50px; width: 780px; text-align: center; word-break: keep-all; border-radius: 20px; border: 1px solid #ccc; box-shadow: 0px 8px 8px -8px #ddd;}
.error .error_box p.p1 {margin: 60px 0; font-size: 40px; font-weight: 600;}
.error .error_box p.p2 {font-size: 18px;}
.error .error_box .button_box {margin: 60px 0 0;}

@media screen and (max-width:1400px) {
    /*메인*/
    .maincontents .section.section3 .box::after {display: none;}

    /*사이트맵*/
    .popup.sitemap .popup_scroll {padding: 0 20px;}
}
@media screen and (max-width:1050px) {
    .maincontents .section.section1 .d_area .search_box {margin: 184px 0 0 -20px; width: calc(100% + 40px); border-radius: 0;}
}
@media screen and (max-width:1024px) {
    /*상단*/
    .toparea {padding: 0; border-bottom: 1px solid #e3e3e3;}
    .toparea .topmenu {background-color: #fff; border-bottom: 1px solid #ddd;}
    .toparea .topmenu .topbar {margin: 0; height: 70px; align-items: center;}
    .toparea .topmenu h1 {display: block; left: 20px; top: 20px;}
    .toparea .topmenu h1 img {width: auto; height: 29px;}
    .toparea .topmenu .center_box {display: none;}
    .toparea .topmenu .log_box {display: none;}
    .toparea .topmenu .gnb {display: none;}
    .toparea .topmenu .btn_allgnb {display: block; z-index: 210; position: absolute; right: 20px; top: 26px; transform: translateY(0); width: 20px; height: 12px;}
    .toparea .topmenu .btn_allgnb span {position: absolute; left: 0; display: block; width: 20px; height: 3px; background-color: #000;}
    .toparea .topmenu .btn_allgnb span.line1 {top: 0;}
    .toparea .topmenu .btn_allgnb span.line2 {top: calc(100% + 2px); transform: translateY(-50%);}
    .toparea .allmenu-category {z-index: 9999; display: none; position: fixed; top: 0; transform: translateX(0); width: 100%; height: 100% !important; background-color: rgba(0, 0, 0, 0.45); animation: allmenu 1s 1;}
    @keyframes allmenu {
        0% {left: 0;}
        99% {left: 100%;}
        100% {display: none;}
    }
    .toparea .allmenu-category.active {display: block !important; animation: allmenu2 1s 1;}
    @keyframes allmenu2 {
        0% {left: 100%;}
        1% {display: block;}
        100% {left: 0;}
    }
    .toparea .allmenu-category .btn_close {position: absolute; top: 25px; right: 20px; transform: scale(0.86); background-color: #fff;}
    .toparea .allmenu-category .btn_close .icon::after, .toparea .allmenu-category .btn_close .icon::before {height: 3px;}
    .toparea .allmenu-category .menu_box {overflow-y: auto; padding: 0 20px; position: absolute; top: 0; right: 0; width: 270px; height: 100%; background-color: #fff;}
    .toparea .allmenu-category .menu_box .logo {padding: 20px 0 12px;}
    .toparea .allmenu-category .menu_box .logo img {width: auto; height: 29px;}
    .toparea .allmenu-category .menu_box .center_box {padding: 10px 0;}
    .toparea .allmenu-category .menu_box .center_box ul {display: flex; display:-webkit-flex; justify-content: center; align-items: center;}
    .toparea .allmenu-category .menu_box .center_box ul li {position: relative; padding-right: 50px;}
    .toparea .allmenu-category .menu_box .center_box ul li a {font-size: 12px; color: #666;}
    .toparea .allmenu-category .menu_box .center_box ul li::after {content: ''; position: absolute; right: 25px; top: 6px; width: 1px; height: 10px; background-color: #ccc;}
    .toparea .allmenu-category .menu_box .center_box ul li:last-child {padding-right: 0;}
    .toparea .allmenu-category .menu_box .center_box ul li:last-child::after {display: none;}
    .toparea .allmenu-category .menu_box .log_box {margin: 0 0 15px;}
    .toparea .allmenu-category .menu_box .log_box ul li {margin-bottom: 5px;}
    .toparea .allmenu-category .menu_box .log_box ul li:last-child {margin-bottom: 0;}
    .toparea .allmenu-category .menu_box .log_box ul li a {display: block; width: 100%; height: 30px; line-height: 28px; font-size: 12px; text-align: center; color: #666; border-radius: 10px; border: 1px solid #c5c5c5;}
    .toparea .allmenu-category .menu_box .all_gnb {display: block;}
    .toparea .allmenu-category .menu_box .all_gnb > li {width: 100%;}
    .toparea .allmenu-category .menu_box .all_gnb > li > a {z-index: 99; padding: 0 15px; display: block; width: 100%; font-size: 18px; height: 55px; line-height: 55px; border-top: 1px solid #ddd; color: #222;}
    .toparea .allmenu-category .menu_box .all_gnb > li:first-child > a {border-top: 0;}
    .toparea .allmenu-category .menu_box .all_gnb > li.active > a {border-radius: 10px; color: #fff; background: #dd2f4f url('../../images/hmpg/icon_allmenu_active.png') no-repeat center right 20px / 28px auto;}
    .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-top: 15px; 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-top: 15px;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li:first-child {margin-top: 0;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li > a {margin: 0 15px 15px; display: block; font-size: 16px; color: #222;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li.active > a {color: #dd2f4f;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li > ul {padding: 18px; background: #868e96;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li > ul li {margin-bottom: 10px;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li > ul li:last-child {margin-bottom: 0;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li > ul li a {position: relative; padding-left: 8px; font-size: 12px; color: #fff;}
    .toparea .allmenu-category .menu_box .all_gnb > li .menu_list > li > ul li a::before {position: absolute; top: -0; left: 0; content: '-'; color: #fff;}

    /*메인*/
    .maincontents {padding: 70px 0 0;}
    .maincontents .section .title_box {margin-bottom: 25px; justify-content: left; }
    .maincontents .section .title_box h3 {font-size: 22px; line-height: 22px; text-align: left;}
    .maincontents .section .title_box p {margin-top: 15px; font-size: 12px; text-align: left;}
    .maincontents .section .title_box .btn_more {top: -10px; width: 100px; height: 40px; line-height: 40px; font-size: 15px; border-radius: 40px;}
    .maincontents .section .title_box .btn_more .icon {width: 13px; height: 13px;}
    .maincontents .section .title_box .btn_more .icon::after, .maincontents .section .title_box .btn_more .icon::before {height: 2px;}
    .maincontents .section .tab_box ul li {width: 100%;}
    .maincontents .section .tab_box ul li:first-child {border-radius: 42px 0 0 42px;}
    .maincontents .section .tab_box ul li:last-child {border-radius: 0 42px 42px 0;}
    .maincontents .section .tab_box ul li a {padding: 0; height: 42px; line-height: 42px; font-size: 17px; text-align: center; border-radius: 42px;}

    .maincontents .section.section1 {padding: 20px 0 0; height: auto; background: #fdfbf4 url('../../images/hmpg/bg_section1.png') no-repeat center / auto 230px;}
    .maincontents .section.section1 .d_area h3 {margin-bottom: 10px; line-height: 30px; font-size: 25px;}
    .maincontents .section.section1 .d_area p {line-height: 19px; font-size: 13px;}
    .maincontents .section.section1 .d_area .search_box {margin: 90px 0 0 -20px; padding: 20px 20px 15px; height: auto; border-radius: 0; background-color: #fcd369;}
    .maincontents .section.section1 .d_area .search_box .top {margin-bottom: 15px; flex-wrap: wrap;}
    .maincontents .section.section1 .d_area .search_box .top .tit {padding: 0; width: 110px; height: 35px; line-height: 35px; font-size: 12px; text-align: center; border-radius: 35px;}
    .maincontents .section.section1 .d_area .search_box .top .optionbox {width: 100px; height: 35px; border-radius: 35px;}
    .maincontents .section.section1 .d_area .search_box .top .optionbox::after {top: calc(50% - 3px); right: 10px; width: 10px; height: 5px; background-size: 100% auto;}
    .maincontents .section.section1 .d_area .search_box .top .optionbox select {padding: 0 25px 0 10px; font-size: 10px; border-radius: 35px;}
    .maincontents .section.section1 .d_area .search_box .top .search {width: calc(100% - 325px);}
    .maincontents .section.section1 .d_area .search_box .top .search .inpbox {width: calc(100% - 40px); height: 35px; border-radius: 35px;}
    .maincontents .section.section1 .d_area .search_box .top .search .inpbox input {padding: 0 15px; font-size: 12px; border-radius: 35px;}
    .maincontents .section.section1 .d_area .search_box .top .search .btn_search {width: 35px; height: 35px; border-radius: 35px;}
    .maincontents .section.section1 .d_area .search_box .top .search .btn_search .icon {width: 14px; height: 14px;}
    .maincontents .section.section1 .d_area .search_box .top .search .btn_search .icon::before {width: 6px; height: 1px;}
    .maincontents .section.section1 .d_area .search_box .top .search .btn_search .icon::after {width: 8px; height: 8px; border: 1px solid #fff;}
    .maincontents .section.section1 .d_area .search_box .bottom {align-items: flex-start; gap: 15px;}
    .maincontents .section.section1 .d_area .search_box .bottom .tit {padding: 0 15px; height: 30px; line-height: 28px; border-radius: 30px;}
    .maincontents .section.section1 .d_area .search_box .bottom .popular_list {margin-top: 5px; width: calc(100% - 105px); flex-wrap: wrap; gap: 8px;}

    .maincontents .section.section2 {padding: 40px 0 55px;}
    .maincontents .section.section2 .d_area .slide_box.program {padding: 0;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-list .slick-slide {margin: 0 7px;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-slider a {padding: 0 0 35px; border-radius: 15px; border: 1px solid #ddd;} 
    .maincontents .section.section2 .d_area .slide_box.program .slick-slider a:hover {margin-top: 0; box-shadow: none;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-slider a .category {padding: 0 15px; top: -1px; left: -1px; height: 26px; line-height: 26px; font-size: 12px; border-radius: 14px 0 14px 0;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-slider a .thumb {border-radius: 14px 14px 0 0;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-slider a .tit {margin: 15px 15px 10px; height: 44px; line-height: 22px; font-size: 14px;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-slider a .keyword {height: 14px;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-slider a .keyword span {font-size: 12px;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-slider a .btn_detail {padding: 0 40px 0 15px; bottom: -1px; right: -1px; height: 30px; line-height: 30px; font-size: 11px; border-radius: 14px 0 14px 0; background: url('../../images/hmpg/icon_main_section2_arrow.png') no-repeat center right 15px / 16px auto;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-slider a:hover .btn_detail {background: url('../../images/hmpg/icon_main_section2_arrow_active.png') no-repeat center right 15px / 16px auto;}
    .maincontents .section.section2 .d_area .slide_box.program .progress {margin: 25px 0 0; width: calc(100% - 35px); height: 5px; border-radius: 5px;}
    .maincontents .section.section2 .d_area .slide_box.program .slick-pause {left: auto; right: 20px; bottom: -6px;}

    .maincontents .section.section3 {padding: 0 0 60px;}
    .maincontents .section.section3 .box {margin-left: -20px; padding: 15px 20px 50px; width: calc(100% + 40px); border-radius: 0;}
    .maincontents .section.section3 .box::after {display: none;}
    .maincontents .section.section3 .box .txt {margin-bottom: 10px; font-size: 13px;}
    .maincontents .section.section3 .box .step_box li {padding: 0 13px; height: 35px; line-height: 31px; font-size: 13px; border-radius: 10px; border: 2px solid #dd2f4f;}
    .maincontents .section.section3 .box .step_box li::after {width: 14px; height: 14px; top: calc(50% - 7px); right: -15px; background-size: 100% auto;}
    .maincontents .section.section3 .box .button_box {bottom: -22px; left: 20px; width: calc(100% - 40px);}
    .maincontents .section.section3 .box .button_box button {padding: 0 20px; height: 45px; font-size: 17px; border-radius: 45px;}
    .maincontents .section.section3 .box .button_box button .icon {margin-left: 15px;}
    .maincontents .section.section3 .box .button_box .btn_shortcut .icon {width: 15px; height: 11px; background-size: 100% auto;}
    .maincontents .section.section3 .box .button_box .btn_download .icon {width: 13px; height: 13px; background-size: 100% auto;}

    .maincontents .section.section4 {padding: 20px 0 25px;}
    .maincontents .section.section4 .d_area .faq {gap: 5px;}
    .maincontents .section.section4 .d_area .faq li {width: 100%; border-radius: 5px;}
    .maincontents .section.section4 .d_area .faq li a {padding: 0 10px; height: 40px; line-height: 40px; font-size: 12px;}
    .maincontents .section.section4 .d_area .button_box {margin-top: 25px;}
    .maincontents .section.section4 .d_area .button_box button {width: 100%; height: 45px; font-size: 17px; border-radius: 45px;}

    .maincontents .section.section5 {padding: 50px 0;}
    .maincontents .section.section5 .d_area {display: block;}
    .maincontents .section.section5 .d_area .title_box {position: static; display: block;}
    .maincontents .section.section5 .d_area .title_box .btn_more {position: absolute; top: auto; bottom: 50px; right: calc(50% - 50px);}
    .maincontents .section.section5 .d_area .left {padding-bottom: 110px; position: relative; width: 100%;}
    .maincontents .section.section5 .d_area .left .gallery_list li a .thumb {border-radius: 15px;}
    .maincontents .section.section5 .d_area .left .gallery_list li a .tit {margin: 10px 0 0; font-size: 14px;}
    .maincontents .section.section5 .d_area .right {padding: 35px; width: 100%;}
    .maincontents .section.section5 .d_area .right h3 {margin-bottom: 20px; font-size: 22px;}
    .maincontents .section.section5 .d_area .right .service_list li a {padding-left: 60px; width: 100%; height: 60px; line-height: 60px; font-size: 18px; border-radius: 10px;}
    .maincontents .section.section5 .d_area .right .service_list li.list1 a {background: #fff url('../../images/hmpg/icon_section5_service_list1.png') no-repeat 16px center / 36px auto;}
    .maincontents .section.section5 .d_area .right .service_list li.list2 a {background: #fff url('../../images/hmpg/icon_section5_service_list2.png') no-repeat 20px center / 25px auto;}
    .maincontents .section.section5 .d_area .right .service_list li.list3 a {background: #fff url('../../images/hmpg/icon_section5_service_list3.png') no-repeat 19px center / 30px auto;}

    .maincontents .section.section6 {padding: 15px 0; overflow: hidden;}
    .maincontents .section.section6 .d_area {padding: 0 0 0 20px;}
    .maincontents .section.section6 .d_area .slide_box.site {padding-left: 115px; width: calc(100% + 30px);}
    .maincontents .section.section6 .d_area .slide_box.site .slick-slider .slick-slide {padding: 0 3px;}
    .maincontents .section.section6 .d_area .slide_box.site .slick-slider .slick-slide a {height: 40px; border-radius: 10px;}
    .maincontents .section.section6 .d_area .slide_box.site .slick-arrow {top: calc(50% - 15px); width: 30px; height: 30px; border-radius: 30px;}
    .maincontents .section.section6 .d_area .slide_box.site .slick-prev.slick-arrow {left: 0;}
    .maincontents .section.section6 .d_area .slide_box.site .slick-next.slick-arrow {left: 72px;}
    .maincontents .section.section6 .d_area .slide_box.site .slick-arrow::after, 
    .maincontents .section.section6 .d_area .slide_box.site .slick-arrow::before {left: 10px; top: 14px; width: 6px; border-radius: 0px;}
    .maincontents .section.section6 .d_area .slide_box.site .slick-pause {left: 36px; top: calc(50% - 15px); width: 30px; height: 30px; border-radius: 30px; background-size: 6px auto;}
    .maincontents .section.section6 .d_area .slide_box.site .slick-pause.pause {background-size: 6px auto;}

    /*하단*/
    .bottomarea {padding: 60px 0 30px;}
    .bottomarea .d_area .policy_area {justify-content: center;}
    .bottomarea .d_area .policy_area > li {margin-right: 10px; padding-right: 10px;}
    .bottomarea .d_area .policy_area > li::after {top: 5px; height: 10px;}
    .bottomarea .d_area .policy_area > li.pri {margin-right: 0; padding-right: 0; position: absolute; top: -35px; left: 0; width: 100%; text-align: center;}
    .bottomarea .d_area .policy_area > li a {font-size: 13px;}
    .bottomarea .d_area .address_area {padding: 30px 0 0; text-align: center;}
    .bottomarea .d_area .address_area address p {font-size: 12px; line-height: 20px;}
    .bottomarea .d_area .address_area address p span {margin: 0;}
    .bottomarea .d_area .address_area address p.copyright {margin-top: 25px; font-size: 11px; line-height: 12px;}
    .bottomarea .btn_top {display: none;}

    /*팝업*/
    .popup .modal_close {top: 13px; right: 15px; width: 13px; height: 13px;}
    .popup .modal_close::after, .popup .modal_close::before {left: -3px; width: 18px;}
    .popup .popup_title {padding: 0 15px !important; width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #ddd;}
    .popup .popup_title h3 {padding: 0; line-height: 40px; font-size: 15px;}
    .popup .popup_inner {padding: 15px;}
    .popup .popup_inner .popup_text {padding: 0 20px; word-break: keep-all;}
    .popup .popup_inner .popup_table_text {margin-bottom: 10px;}
    .popup .popup_inner .button_box {margin-top: 15px;}
    .popup .boardview h4 {margin: 15px 0 5px; font-size: 15px;}
    .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 {border-radius: 20px 0 20px 20px;}
    .popup .modal_close {position: absolute; top: 7px; right: 15px; width: 25px; height: 25px; border-radius: 0; background: 0;}
    .popup .modal_close::after, .popup .modal_close::before {left: 2px; top: calc(50% - 0.5px); width: 20px; height: 2px; background-color: #000;}
    .popup .popup_title {position: relative; padding: 15px 15px 0;}
    .popup .popup_title h3 {padding-right: 0; font-size: 15px;}
    .popup .popup_inner {padding: 0 15px 20px;}
    .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.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 {margin-top: 0;}
    .popup.main .button_box button {height: 35px; font-size: 12px;}

    /*사이트맵*/
    .popup.sitemap .modal_close {top: 30px; width: 20px; height: 20px;}
    .popup.sitemap .modal_close::after, .popup.sitemap .modal_close::before {left: -2px; width: 24px;}
    .popup.sitemap .popup_title {padding: 30px 0 20px !important; height: auto; line-height: 15px;}
    .popup.sitemap .popup_title h3 {line-height: 20px; font-size: 20px;}
    .popup.sitemap .popup_inner {padding: 0 0 50px;}
    .popup.sitemap .popup_inner .sitemap_list > li {padding: 20px 0;}
    .popup.sitemap .popup_inner .sitemap_list > li .tit {width: 150px; font-size: 16px;}
    .popup.sitemap .popup_inner .sitemap_list > li > ul {width: calc(100% - 150px);}
    .popup.sitemap .popup_inner .sitemap_list > li > ul > li a {font-size: 13px;}

    /*추가정보입력*/
    .popup.addinfo .popup_title {padding: 0 15px;}
    .popup.addinfo .popup_inner {padding: 0 15px 20px;}
    .popup.addinfo .popup_inner p {margin: 12px 0; line-height: 20px; font-size: 13px;}
    .popup.addinfo .popup_inner .switch_checkbox {margin-bottom: 5px;}
    .popup.addinfo .popup_inner .switch_checkbox span {margin-left: 5px; font-size: 14px;}
    .popup.addinfo .popup_inner .addinfo_list > li {padding: 12px 0; display: block;}
    .popup.addinfo .popup_inner .addinfo_list > li .tit {padding: 0 5px 12px; width: 100%; font-size: 16px;}
    .popup.addinfo .popup_inner .addinfo_list > li > ul {width: 100%;}
    .popup.addinfo .popup_inner .addinfo_list > li > .box_wrap {width: 100%;}
    .popup.addinfo .popup_inner .addinfo_list > li > .box_wrap .box {padding: 0 5px;}
    .popup.addinfo .popup_inner .addinfo_list > li > .box_wrap .box .tit2 {width: 65px;}
    .popup.addinfo .popup_inner .addinfo_list > li > .box_wrap .box .radio_box2 {width: calc(100% - 65px);}
    .popup.addinfo .popup_inner .addinfo_list > li > .box_wrap .box:first-child {margin-bottom: 12px; padding-bottom: 12px;}
    .popup.addinfo .popup_inner .button_box {margin-top: 20px;}

    /*이용약관동의*/
    .popup.termsagree .popup_title {padding: 0 15px;}
    .popup.termsagree .popup_inner {padding: 0 15px;}
    .popup.termsagree .popup_inner p {margin: 12px 0; line-height: 20px; font-size: 13px;}
    .popup.termsagree .popup_inner .agree_area .agree_title {margin-bottom: 5px; font-size: 15px;}
    .popup.termsagree .popup_inner .agree_area .agree_box {max-height: 200px;}
    .popup.termsagree .popup_inner .button_box {margin-left: -15px; width: calc(100% + 30px);}
    .popup.termsagree .popup_inner .button_box button {height: 40px; font-size: 15px; border-radius: 0 0 20px 20px;}

    /*에러페이지*/
    .error .error_box {padding: 0 20px; width: 100%; border: 0; box-shadow: none;}
    .error .error_box img {width: auto; height: 40px;}
    .error .error_box p.p1 {margin: 30px 0; font-size: 20px;}
    .error .error_box p.p2 {font-size: 13px;}
    .error .error_box .button_box {margin: 30px 0 0; padding: 0 15px; width: 100%;}
}
@media screen and (max-width:720px){
    /*메인*/
    .maincontents .section.section3 .box .step_box {gap: 10px;}
    .maincontents .section.section3 .box .step_box li {margin-right: 10px;}
    .maincontents .section.section3 .box .button_box button {position: relative; width: 100%; text-align: left;}
    .maincontents .section.section3 .box .button_box button .icon {margin-left: 0; position: absolute; top: 0; right: 20px;}
    .maincontents .section.section3 .box .button_box .btn_shortcut .icon {top: calc(50% - 6px);}
    .maincontents .section.section3 .box .button_box .btn_download .icon {top: calc(50% - 7px);}

    /*사이트맵*/
    .popup.sitemap .popup_inner .sitemap_list > li {padding: 15px 0; display: block;}
    .popup.sitemap .popup_inner .sitemap_list > li .tit {width: 100%; font-size: 16px;}
    .popup.sitemap .popup_inner .sitemap_list > li > ul {margin-top: 8px; width: 100%; gap: 20px;}
    .popup.sitemap .popup_inner .sitemap_list > li > ul > li {width: auto;}
}
@media screen and (max-width:640px){
    /*메인*/
    .maincontents .section.section1 .d_area .search_box .top .optionbox {width: calc(50% - 60px);}
    .maincontents .section.section1 .d_area .search_box .top .search {margin-top: 5px; width: 100%;}
    .maincontents .section.section5 .d_area .left .gallery_list {flex-wrap: wrap;}
    .maincontents .section.section5 .d_area .left .gallery_list li {width: calc(50% - 10px);}
}
@media screen and (max-width:480px){
    /*메인*/
    .maincontents .section.section5 .d_area .left .gallery_list li {width: 100%;}
}
@media screen and (max-width:360px){
}
@media screen and (max-width:320px){   
}