@charset "utf-8";

/* header 배너 */
.sky_banner {/*height: 100px;*/ position: relative;}
.sky_banner .swiper-wrapper {max-height: 100px;}
.sky_banner .swiper-button-next,
.sky_banner .swiper-button-prev {position: absolute; left: auto; right: 0; margin: 0; width: 16px; height: 16px;}
.sky_banner .swiper-button-prev {background: url(../img/ico/sky_arrow_up.png) no-repeat center/16px; top: 0; bottom: auto;}
.sky_banner .swiper-button-next {background: url(../img/ico/sky_arrow_down.png) no-repeat center/16px; bottom: 0; top: auto;}
.sky_banner .ctrl_wrap {position: absolute; right: 210px; top: 50%; transform: translateY(-50%); z-index: 1; width: 50px; height: 40px;}
.sky_banner .ctrl_wrap button {background: url(../img/ico/sky_x.png) no-repeat center/16px; border: 0; padding: 0; font-size: 0; width: 16px; height: 16px; position: absolute; left: 0; top: 50%; margin-top: -8px;}
.sky_banner .swiper-slide img {/*width: 100%; display: block;*/}

/* header 메뉴 */
.header_box {position: relative;}
.header_box .header_top {position: relative; width: 1450px; margin: 0 auto;}
.header_box .h_logo {position: absolute; left: 0; top: 10px;}
.header_box .h_logo a {display: block; font-size: 0;}
.header_box .h_logo a img {}

.top_member_box {position: absolute; right: 0; top: 15px;}
.top_member_box ul {font-size: 0;}
.top_member_box ul li {display: inline-block; padding: 0 24px; position: relative;}
.top_member_box ul li:after {content: ''; width: 1px; height: 19px; background: #a2a2a2; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.top_member_box ul li:last-child:after {display: none;}
.top_member_box ul li a {font-size: 16px; color: #717171;}

.top_member_box ul li span {display: inline-block;}
.top_member_box ul li.login span {padding-left: 26px; background: url(../img/ico/ico_header_join.png) no-repeat left center/16px 17px;}
.top_member_box ul li.join span {padding-left: 26px; background: url(../img/ico/ico_header_login.png) no-repeat left center/19px 17px;}

.gnb {padding: 60px 0 20px;}
.gnb ul {font-size: 0; text-align: center;}
.gnb ul li {display: inline-block; margin-right: 115px;}
.gnb ul li:last-child {margin-right: 0;}
.gnb ul li a {font-size: 20px; font-weight: bold; }

.all_menu_btn {position: absolute; right: 24px; bottom: 23px;}
.all_menu_btn button {background: url(../img/ico/ico_allmenu_open.png) no-repeat left center/36px 25px; font-size: 0; border: 0; padding: 0; width: 36px; height: 25px;}

.header_sub {background: #fff6e1; border-top: 1px solid #ababab; border-bottom: 1px solid #ababab;}
.header_sub ul {font-size: 0; text-align: center;}
.header_sub ul li {display: inline-block; margin-right: 75px;}
.header_sub ul li:last-child {margin-right: 0;}
.header_sub ul li a {font-size: 18px; display: block; line-height: 58px;}

/* 상단가기 버튼 */
.btn_scrolltop {position: fixed; right: 16px; bottom: 30px; display: none; z-index: 10;}
.btn_scrolltop button {font-size: 0; border: 0; padding: 0; display: inline-block; width: 48px; height: 48px; background: url(../img/ico/ico_scrolltop.png) no-repeat center/47px 48px; border-radius: 16px; border: 1px solid #fff; box-sizing: border-box;}
.btn_scrolltop .fix_menu {display: none;}
.btn_scrolltop .fix_menu img {width: 48px;}

/* 우측 스크롤 바 */
.fixed_right {position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 125px; padding: 40px 20px; box-sizing: border-box; background: #fff; box-shadow: 0px 8px 14px 0px rgba(6, 0, 1, 0.29); border-radius: 27px 0 0 27px; text-align: center; transition: all 0.35s; z-index: 2;}
.fixed_right.on {right: -125px;}
.fixed_right ul {}
.fixed_right ul li {margin-bottom: 20px; text-align: center;}
.fixed_right ul li img {display: block; margin: 0 auto;}
.fixed_right ul li span {font-size: 16px; display: block; padding: 10px 5px 0;}

.fixed_right dl {margin: 0 0 10px; font-size: 16px;}
.fixed_right dl:last-child {margin: 0;}
.fixed_right dl dt {padding: 0 0 5px;}
.fixed_right dl dt span {color: #fff; font-size: 16px; background: #202a60; border-radius: 9px; display: inline-block; padding: 0 8px; line-height: 27px;}
.fixed_right dl dd {}

.fixed_right button {background: url(../img/ico/btn_fixed_x.png) no-repeat center/26px 53px; width: 26px; height: 53px; position: absolute; left: -26px; top:50%; transform: translateY(-50%); font-size: 0;}
.fixed_right button.on {background: url(../img/ico/btn_fixed_open.png) no-repeat center/26px 53px;}

.inp_chk {position: relative;}
.inp_chk label {background: url(../img/ico/ico_chk.png) no-repeat left center/18px; padding-left: 30px; cursor: pointer; font-size: 16px;}
.inp_chk label.on {background: url(../img/ico/ico_chk_on.png) no-repeat left center/18px;} 
.inp_chk input {position: absolute; top: 3px; left: 1px; width: 0; z-index: -1; visibility: hidden;}

.input_wrap {margin: 0 0 10px;}
.input_wrap label {display: block; font-size: 18px; color: #333; padding: 0 0 6px;}
.input_wrap input {border: 1px solid #202a60; background: #ebeeff; width: 100%; height: 55px; padding: 0 18px; box-sizing: border-box; font-size: 18px;}
.input_wrap input::placeholder {color: #929292;}
.member_box .mem_cont.text .input_wrap {margin: 0 0 25px;}

.input_wrap.phone {position: relative; padding-right: 145px;}
.input_wrap.phone button {font-size: 18px; color: #ffffff; background: #202a60; width: 135px; height: 55px; position: absolute; right: 0; top: 0;}

.sub_content {background: #ededed; padding: 60px 0;}

footer {}
.foot_top {background: #a5a5a5; padding: 27px 0;}
.foot_top > div {width: 1450px; margin: 0 auto;}
.foot_top > div:after {content: ''; clear: both; display: block;}
.foot_top ul {font-size: 0;}
.foot_top ul li {display: inline-block; margin-right: 54px;}
.foot_top ul li:last-child {margin-right: 0;}
.foot_top ul li a {font-size: 18px; font-weight: bold; color: #fff;}
.foot_top ul li.privacy a {color: #202a60;}
.foot_top .left {float: left;}

.foot_top .right {float: right;}

.foot_cont {background: #202a60; padding: 65px 0;}
.foot_cont > div {width: 1450px; margin: 0 auto;}
.foot_cont > div:after {content: ''; clear: both; display: block;}

.foot_info {float: left;}
.foot_info .logo {font-size: 0; margin: 0 0 40px;}
.foot_info .logo img {vertical-align: middle; margin-right: 15px;}
.foot_info .logo span {font-size: 33px; font-weight: bold; color: #fff; vertical-align: middle;}

.info_num {}
.info_num p {font-size: 14px; color: #fff; font-weight: 300;}
.info_num dl {display: table; margin-bottom: 15px;}
.info_num dt,
.info_num dd {display: table-cell; vertical-align: middle; font-weight: 300;}
.info_num dt {}
.info_num dt span {font-size: 18px; color: #000; display: inline-block; background: #ffef18; border-radius: 6px; padding: 0 12px; line-height: 27px;}
.info_num dd {font-size: 33px; color: #ffffff; padding-left: 14px;}
.info_num strong {font-size: 14px; color: #648ec2; display: block; font-weight: 300;}

.foot_list {float: right;}
.foot_list ul {}
.foot_list ul li {font-size: 14px; color: #ffffff; margin: 0 0 4px; font-weight: 300;}
.foot_list ul li a{font-size: 14px; color: #ffffff; margin: 0 0 4px; font-weight: 300;}
.foot_list ul li span {color: #648ec2;}

.mmmm {opacity: 0; position: fixed; left: 0; top: 0; z-index: 1; background: #000; padding: 10px; height: 100%; overflow-y: auto; box-sizing: border-box;}
.mmmm.on {opacity: 1;}
.mmmm p {cursor: pointer; color: #fff;}
.mmmm li a {color: #999; padding-left: 10px;}

select {appearance: none; border: 1px solid #202a60; width: 100%; height: 55px; padding: 0 18px; box-sizing: border-box; font-size: 18px; cursor: pointer;}
.inp_sel {background: #ebeeff url(../img/ico/ico_select_arrow.png) no-repeat right 28px center/15px 13px;}

.pagination {text-align: center;}
.pagination ul {font-size: 0;}
.pagination ul li {margin-right: 5px; display: inline-block; vertical-align: middle;}
.pagination ul li a {font-size: 18px; color: #818181; border: 1px solid #808080; display: inline-block; border-radius: 7px; line-height: 38px; padding: 0 14px;}
.pagination ul li.on a {font-weight: bold; color: #202a60; border: 1px solid #202a60;}

.pagination ul li.btn_first a,
.pagination ul li.btn_prev a,
.pagination ul li.btn_next a,
.pagination ul li.btn_last a {border: 0; width: 17px; height: 17px; padding: 0;}

.pagination ul li.btn_first {margin-right: 17px;}
.pagination ul li.btn_first a {background: url(../img/mypage/ico_page_first.png) no-repeat center/15px 17px;}

.pagination ul li.btn_prev {margin-right: 20px;}
.pagination ul li.btn_prev a {background: url(../img/mypage/ico_page_prev.png) no-repeat center/9px 17px;}

.pagination ul li.btn_next {margin-left: 20px; margin-right: 0;}
.pagination ul li.btn_next a {background: url(../img/mypage/ico_page_next.png) no-repeat center/9px 17px;}

.pagination ul li.btn_last {margin-left: 17px; margin-right: 0;}
.pagination ul li.btn_last a {background: url(../img/mypage/ico_page_last.png) no-repeat center/15px 17px;}

.btn_center_box {text-align: center;}
.btn_center_box ul {font-size: 0; display: table; width: 100%;}
.btn_center_box ul li {display: table-cell; vertical-align: middle; width: 50%; padding: 0 5px 0 0; box-sizing: border-box;}
.btn_center_box ul li:last-child {padding: 0 0 0 5px;}

.btn_right_box {text-align: right;}

.btn_normal {font-size: 18px; width: 236px; height: 70px; line-height: 68px; text-align: center; border: 1px solid #202a60; border-radius: 13px; display: inline-block;}
.btn_normal.gray {background: #ededed;}
.btn_normal.yellow {background: #ffdc87;}
.btn_sm {font-size: 18px; width: 142px; height: 63px; line-height: 61px; text-align: center; border: 1px solid #202a60; border-radius: 10px; display: inline-block;}
.btn_sm.gray {background: #ededed;}

.pop_bg {background-color:rgba(0, 0, 0, .7); position:fixed; top:0; left:0; right:0; bottom:0; z-index:301;}
.pop_wrap {width:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); padding:30px 10px; box-sizing:border-box;}
.pop_wrap .pop_cover {position:relative;}
.pop_wrap .pop_cover .pop_cont {/* height:500px; overflow-y:auto; */ text-align: center;}
.pop_wrap .pop_cover .pop_cont .pop_slide {width: 1350px; margin: 0 auto; padding: 50px;}
.pop_wrap .pop_cover .pop_cont ul {font-size: 0; padding: 0 5px; box-sizing: border-box;}
.pop_wrap .pop_cover .pop_cont ul li {display: inline-block; width: 33.33%; vertical-align: top; padding: 0 15px; box-sizing: border-box;}
.pop_wrap .pop_cover .pop_cont ul li div {}
.pop_wrap .pop_cover .pop_cont ul li div img {width: 100%;}

.pop_slide {position: relative;}
.pop_slide .swiper-button-next {background: url(../img/main/ico_pop_next.png) no-repeat center/45px 66px; width: 45px; height: 66px; top: 50%; right: 0; margin: 0; transform: translateY(-50%);}
.pop_slide .swiper-button-prev {background: url(../img/main/ico_pop_prev.png) no-repeat center/45px 67px; width: 45px; height: 67px; top: 50%; left: 0; margin: 0; transform: translateY(-50%);}
.pop_slide .swiper-button-next.hide,
.pop_slide .swiper-button-prev.hide {display: none;}

.pop_slide .swiper-pagination {top: 0; bottom: auto; left: 0; right: 0; text-align: center;}
.pop_slide .swiper-pagination.hide {display: none;}
.pop_slide .swiper-pagination .swiper-pagination-bullet {background: #cccccc; border-radius: 0; margin: 0 3px; width: 25px; height: 5px;}
.pop_slide .swiper-pagination .swiper-pagination-bullet-active {background: #ffef18; width: 50px;}

.pop_wrap .pop_cover .btn_center_box {margin: 28px 0 0;}
.pop_wrap .pop_cover .btn_center_box ul {text-align: center;}
.pop_wrap .pop_cover .btn_center_box li {padding: 0 20px; display: inline-block; vertical-align: middle; width: 206px; box-sizing: border-box;}
.pop_wrap .pop_cover .btn_center_box button {width: 100%; height: 38px; border-radius: 18px; font-size: 16px; border: 2px solid #fff; color: #fff;}
.pop_wrap .pop_cover .btn_center_box button.no_see_today {background: #000;}
.pop_wrap .pop_cover .btn_center_box button.btn_close {background: #202a60;}

.pop_bg.mobile .pop_wrap .pop_cover .pop_cont .pop_slide {width: 100%; padding: 25px; box-sizing: border-box;}
.pop_bg.mobile .pop_wrap .pop_cover .pop_cont ul,
.pop_bg.mobile .pop_wrap .pop_cover .pop_cont ul li {padding: 0;}
.pop_bg.mobile .pop_slide .swiper-button-next {background: url(../img/main/ico_pop_next.png) no-repeat center/22px auto; width: 22px; height: 30px; top: 50%; right: 0; margin: 0; transform: translateY(-50%);}
.pop_bg.mobile .pop_slide .swiper-button-prev {background: url(../img/main/ico_pop_prev.png) no-repeat center/22px auto; width: 22px; height: 30px; top: 50%; left: 0; margin: 0; transform: translateY(-50%);}

.pop_bg.mobile .swiper-pagination {top: 0; bottom: auto; left: 0; right: 0; text-align: center;}
.pop_bg.mobile .swiper-pagination .swiper-pagination-bullet {background: #cccccc; border-radius: 0; margin: 0 3px; width: 25px; height: 5px;}
.pop_bg.mobile .swiper-pagination .swiper-pagination-bullet-active {background: #ffef18; width: 50px;}
.pop_bg.mobile .pop_wrap .pop_cover .btn_center_box ul {display: table; width: 100%;}
.pop_bg.mobile .pop_wrap .pop_cover .btn_center_box li {display: table-cell; vertical-align: middle; width: 50%; box-sizing: border-box; padding: 0 20px 0 0;}
.pop_bg.mobile .pop_wrap .pop_cover .btn_center_box li:last-child {padding: 0 0 0 20px;}
.pop_bg.mobile .pop_wrap .pop_cover .btn_center_box button {border-radius: 5px; font-size: 15px; height: 33px;}
.pop_bg.mobile .pop_wrap .pop_cover .btn_center_box {margin: 0;}


@media screen and (max-width: 1750px) {
	.sky_banner {display: none;}
	.header_box .header_top {width: 100%;}
	.header_box .h_logo {left: 24px;}
	.member_wrap {width: 100%; padding: 60px 0 90px;}

	.foot_top {padding: 20px 24px;}
	.foot_top > div {width: 100%;}
	.foot_cont {padding: 30px 24px;}
	.foot_cont > div {width: 100%;}
}

@media screen and (max-width: 1250px) {
	.sky_banner {display: none;}
	.header_box .header_top {width: 100%;}
	.header_box .h_logo a img {height: 40px;}
	.header_sub ul li {margin-right: 15px;}
	.header_sub ul li a {font-size: 15px;}

	.fixed_right {display: none;}
	.gnb ul li {margin-right: 70px;}
	.gnb ul li a {font-size: 18px;}

	.top_member_box ul li a {font-size: 14px;}

	.member_box .top h3 {font-size: 28px;}
	.member_box .top.bar {margin: 0 0 35px; padding: 0 0 30px;}

	.btn_center_box {padding: 0 24px;}

	.foot_top ul li {margin-right: 20px;}
	.foot_top ul li a {font-size: 15px;}
	.foot_top .right {float: left; margin-left: 30px;}

	.info_num dl {margin-bottom: 10px;}

	.mem_tab ul li a {font-size: 15px;}
}
@media screen and (max-width: 890px) {
	.gnb,
	.header_sub,
	.top_member_box {display: none;}
	select {font-size: 15px;}
	.header_box .header_top {position: relative; height: 60px;}
	.header_box .h_logo {top: 50%; transform: translateY(-50%);}
	.member_box {width: 100%;}
	.member_wrap {min-height: unset;}
	.mem_tab {padding: 0 24px;}

	.input_wrap {padding: 0 28px;}
	.input_wrap.phone {padding-right:169px;}
	.input_wrap.phone button {right: 24px; font-size: 15px;}
	.cert_confirm .btn_wrap {padding: 0;}
	.agreement_box {padding: 0 24px;}
	.btn_wrap {padding: 0 24px;}
	.find_result {margin: 13px 24px 0;}
	.join_cont,
	.join_cont.w450,
	.join_cont > p {width:100%;}
	.join_cont ul.join_tab {margin-top: 35px;}

	.btn_normal {width: 120px; height: 45px; line-height: 43px;}
	.btn_sm {height: 45px; line-height: 43px; width: 100px;}
	.input_wrap input {font-size: 15px;}
	.btn_full span {font-size: 15px;}
	.btn_center_box ul li a span {font-size: 15px;}
	.member_box .mem_cont.login {margin: 0 0 30px;}
	.btn_cert button {font-size: 15px;}
	.inp_chk label {font-size: 15px;}
	.agreement_box > p {font-size: 15px;}
	.mem_tab > p {font-size: 15px;}
	.input_wrap label {font-size: 15px;}
	.join_cont .navy_tit{margin: 40px 28px 20px;}
	.hackout_info {margin: 0 28px 20px;}
	.hackout_info p {font-size: 15px; line-height: 1.5;}
	.textarea_box {margin: 0 28px 20px;}
	.textarea_box p {font-size: 15px;}

	.foot_info,
	.foot_list {float: none;}
	.foot_info .logo {margin: 0 0 5px;}
	.foot_list {margin-top: 30px;}
	.foot_list ul li span {padding-left: 6px;}
}

@media screen and (max-width: 550px) {
	.foot_top .left,
	.foot_top .right {float: none;}
	.foot_top .right {margin-left: 0;}
	.foot_info .logo span {font-size: 20px;}
	.foot_info .logo img {width: 80px;}
	.info_num dd {font-size: 20px; padding-left: 8px;}
	.info_num dt span {font-size: 14px; padding: 0 6px;}
	.info_num dl {margin-bottom: 6px;}
	.foot_list ul li {font-size: 12px;}
	.foot_cont {padding: 20px 15px;}

	.btn_scrolltop .fix_menu {display: block;}
}