body {width: 100%;/* letter-spacing: -0.25px; */position: relative;font-family: 'Noto Sans KR', sans-serif;overflow-x:hidden !important;} /* 공통요소 */ caption, .label {position: absolute;width: 1px;height: 1px;margin: -1px;border: none;clip: rect(0,0,0,0);overflow: hidden;} .clearfix::after{display:block;content:"";clear:both;} /* layout */ .main .inner {max-width: 1400px;} .inner {width:100%;max-width:1300px;height: 100%; margin: 0 auto;position: relative;} .cont {padding-top: 177px;} .cont.sub .inner {padding: 20px 0 70px 0;min-width: 1240px;} /* //공통요소 */ /* //관리자 화면에서 사용자 코드 사용하기 */ .admCont {padding-top: 30px;} .admCont.sub .inner {padding: 20px 0 70px 0;min-width: 1240px;} /* 바로가기 */ .skip_menu a {position: absolute;background: rgba(255,255,255,0.95);width: 100%;height: 40px;text-align: center;color: #000;z-index: 100;line-height: 40px; top: -40px;font-weight: 600;opacity: 0;} /* //바로가기 */ /* header */ .header {position: fixed;top: 0;left: 0;width: 100%;min-width: 1240px; z-index: 10;box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.1);} /* header top */ .header .header_top {background-color: #393939;color: #d1d1d1;height: 40px;font-weight: 300;font-size: 14px;font-weight: 300;transition: all 0.2s ease-in-out;} .header .header_top .menu_left {left: 0;position: absolute;top: 50%;transform: translateY(-50%); display: flex;} .header .header_top .menu_left li {margin-right: 25px;} .header .header_top .menu_left li:hover {color: #fff;text-decoration: underline;} .header .header_top .menu_left i {padding-right: 4px;} .header .header_top .menu_left .hdTop_fav {background-image: url(/publish/images/hdTop_FavStar.png);width: 15px;height: 15px;} .header .header_top .menu_left .hdTop_mypage {background-image: url(/publish/images/hdTop_mypage.png);width: 13px;height: 13px;} .header .header_top .menu_left .hdTop_center {background-image: url(/publish/images/hdTop_center.png);width: 13px;height: 13px;} .header .header_top .menu_right {right: 0;position: absolute;top: 50%;transform: translateY(-50%);background-color: #2c2c2c;height: 100%;line-height: 40px; display: flex;} .header .header_top .menu_right li {padding: 0 20px;} .header .header_top .menu_right li:hover {background-color: #1c1c1c;color: #fff;text-decoration: underline;} /* header body */ .header .header_body {background-color: #fff;height: 75px;border-bottom: 1px solid #dcdee0; } .header .header_body .logo {position: absolute;top: 50%;left: 0;transform: translateY(-50%);} .header .header_body .gnbWrap {width: 100%;margin: 0 auto;text-align: center;font-size: 18px;color: #222;font-weight: 500;} /* header body _ gnb */ .header .header_body .gnbWrap li {display: inline-block;margin: 0 20px;} .header .header_body .gnbWrap li:first-child{margin: 0 22px 0 -32px;} .header .header_body .gnbWrap li:last-child{margin: 0 0 0 22px;} .header .header_body .gnbWrap li a {position: relative;width: 100%;} .header .header_body .gnbWrap li a::before {left: 50%} .header .header_body .gnbWrap li a::after {right: 50%} .header .header_body .gnbWrap li a::before, .header .header_body .gnbWrap li a::after {content: '';position: absolute;bottom: -10px;width:0;height: 2px;background-color: #002c9a;transition: all 0.2s ease-in-out;} .header .header_body .gnbWrap li.new{position: relative;} .header .header_body .gnbWrap li.new::after{position: absolute; content: " "; width:100%; height: 47px; background: no-repeat url(/publish/images/content/new.gif); left: 67%; top: -39px; transform: translateX(-50%);} /* header gnb 오버시 */ .header .gnbWrap li.over {color: #002c9a;} .header .header_body .gnbWrap li.over a::before {left: 0;} .header .header_body .gnbWrap li.over a::after {right: 0;} .header .header_body .gnbWrap li.over a::before, .header .header_body .gnbWrap li.over a::after{width: 51%;transition: all 0.2s ease-in-out;} .header .header_body .s_menu {position: absolute;top: 50%;right: 0;transform: translateY(-50%);} .header .header_body .s_menu button {margin-left: 32px;} .header .header_body .s_menu .allSitemap {width:29px;height:24px;background:url(/publish/images/all_menu.png) no-repeat center center;} .header .header_body .s_menu .allSitemap.active {background-image:url(/publish/images/btn_searchclose.png);background-size:auto auto;} .header .header_body .s_menu .allSearch_info {position: absolute;content: "";width: 65px;height: 23px;top:-16px;left:-38px;background-image: url(/publish/images/searchInfo.png);} .header .header_body .s_menu .allSearch_info span {font-size: 14px;margin-left: 4px;color: #fff;} /* IE미지원 탑배너 */ .header .topbanner {display:none;height:45px;background:url(/publish/images/main/banner_ie_top01.jpg) no-repeat center top;} .header .topbanner .inner:after {content:'';display:block;clear:both;} .header .topbanner .inner .today_close {position:relative;float:right;display:flex;height:45px;align-items:center;} .header .topbanner .inner .today_close input[type=checkbox] {vertical-align:top;} .header .topbanner .inner .today_close input[type=checkbox] + label {padding:0 0 0 8px;font-size:15px;line-height:16px;vertical-align:top;color:#000;opacity:0.8;filter:opacity(80);} .header .topbanner .inner .today_close button {display:inline-block;width:16px;height:40px;margin:0 0 0 30px;font-size:0;text-indent:-9999em;background:url(/publish/images/main/icon_topbanner_close01.png) no-repeat left top;} /* login - 로그인 전 */ .login {background-color: #eaecee;width: 100%; height: 60px;} .login .inner {display:flex;justify-content:space-between;align-items:center;} .login .login_left {display:flex;align-items:center;} .login .login_left .login_put>div {position: relative; display: inline-block;} .login .login_left .login_put input {width: 200px; height: 36px;border-radius: 3px; border: 1px solid #c6c9cb; font-size: 15px;} .login .login_left .login_put input:focus {border: 2px solid #002c9a;outline:none;} .login .login_left .login_put input::placeholder {color: #999; font-weight: 300; font-size: 15px;} .login .login_left .login_put input:-ms-input-placeholder {color: #999; font-weight: 300; font-size: 15px;} .login .login_left .login_put .password_text {padding: 0 10px; margin: 0 5px 0 2px;} .login .login_left .login_save {color: #555;margin: 0 30px 0 10px;} .login .login_left .login_save input+label {margin-left: 3px;} .login .login_left .login_find {color: #555;margin-right: 18px;position: relative;} .login .login_left .login_find::before {content: "";position: absolute;top: 50%;left: -18px; width: 1px;height: 19px;background: #d2d4d7;transform: translateY(-50%);} .login .login_left .login_find a {display: inline-block;} .login .login_left div:last-child button:last-child {margin-left: 2px;} .login_right {vertical-align: middle; text-align: right;} .login .login_right span {color: #222;font-weight: 500;margin-right: 8px;font-size:16px;} .login .login_right span i {position: relative; background-image: url(/publish/images/login_gift.png);width: 25px;height: 25px; margin-bottom: 5px;margin-right: 4px;} .login .login_right span i::after{position: absolute; content: " "; width: 20px; height: 20px; background-image: url(/publish/images/event.gif); left: -12px; top: -5px;} .login .login_right .btnType {width:26px;height:26px;margin:-2px 0 0;padding:0;font-size:12px;line-height:24px;} /* header , login 스크롤 내릴 시 */ .header.scroll .header_top {height: 0;transition: all 0.2s ease-in-out;} .header.scroll .header_top .menu_left,.header.scroll .header_top .menu_right {display: none;} /* login2 - 로그인 후 */ .login2 {background-color: #eaecee;width: 100%; height: 60px;border-bottom: 1px solid #d4d5d7;color: #222;} .login2 .inner {display:flex;justify-content:space-between;align-items:center;} .login2 .login_left {display:flex;width:100%;justify-content:space-between;align-items:center;} .login2 .login_info {position: relative;vertical-align: middle;} /*.login2 .login_info::after {content: "";position: absolute;width: 1px;height: 30px;background-color: #d3d3d3;top: 50%;right: -15px;transform: translateY(-50%);}*/ .login2 .login_info p {display: inline-block;vertical-align: middle; max-width: 180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .login2 .login_info .login2_name {display: inline-block; min-width: 155px; position: relative; vertical-align: middle;} .login2 .login_info .login2_name p {color: #222; font-weight: 400; vertical-align: top; font-weight: 500; height: 16px; white-space:nowrap;} .login2 .login_info .login2_name span {width: 61px;padding:0 10px 0 0;margin: 0 0 0 -5px;} .login2 .login_info i {background-image: url(/publish/images/mypageIcon2.png);width: 34px;height: 34px;margin-right: 5px;} /*등급별 아이콘*/ .login2 .login_info i.vvip{background-image: url(/publish/images/level/level_icon/vvip_icon.png);} .login2 .login_info i.vip{background-image: url(/publish/images/level/level_icon/vip_icon.png);} .login2 .login_info i.gold{background-image: url(/publish/images/level/level_icon/gold_icon.png);} .login2 .login_info i.sliver{background-image: url(/publish/images/level/level_icon/sliver_icon.png);} .login2 .login_info i.black{background-image: url(/publish/images/level/level_icon/black_icon.png);} .login2 .login_info i.red{background-image: url(/publish/images/level/level_icon/red_icon.png);} .login2 .login_info i.purple{background-image: url(/publish/images/level/level_icon/purple_icon.png);} .login2 .login_info i.blue{background-image: url(/publish/images/level/level_icon/blue_icon.png);} .login2 .login_info i.orange{background-image: url(/publish/images/level/level_icon/orange_icon.png);} .login2 .login_info i.green{background-image: url(/publish/images/level/level_icon/green_icon.png);} .login2 .login_info i.yellow{background-image: url(/publish/images/level/level_icon/yellow_icon.png);} .login2 .login_info i.white{background-image: url(/publish/images/level/level_icon/white_icon.png);} /*등급별 아이콘 끝*/ .login2 .login_info button {margin-right: 2px;} .login2 .login_pay {display:flex;} .login2 .check_money p span, .login2 .point p span {padding-left: 4px;} .login2 .check_money {margin-right: 20px; display: inline-flex;} .login2 .check_money p {padding-right: 6px;display: inline-block;vertical-align: middle;} .login2 .check_money i {background-image: url(/publish/images/check_money2.png);width: 29px;height: 30px;margin-right: 3px;} .login2 .check_money button {margin-right: 2px;} .login2 .check_money .account_box {position:relative;display:inline-block;} .login2 .check_money .account_box dl {display:none;position:absolute;left:50%;top:41px;padding:12px 24px 14px 14px;border:2px solid #002c9a;background:#fff;border-radius:10px;box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.5);transform:translateX(-50%);} .login2 .check_money .account_box dl:after {content:'';position:absolute;left:50%;top:-10px;width:16px;height:10px;margin:0 0 0 -8px;background:url(/publish/images/content/icon_account_arrow.png) no-repeat left top;} .login2 .check_money .account_box dl dt {font-size:16px;line-height:18px;} .login2 .check_money .account_box dl dt:before {content:'';display:inline-block;width:22px;height:20px;margin:0 5px 0 0;vertical-align:top;background:url(/publish/images/content/icon_account_layer.png) no-repeat left top;} .login2 .check_money .account_box dl dd {margin:7px 0 0;font-size:15px;font-weight:500;white-space:nowrap;} .login2 .check_money .account_box:hover dl {display:block;} /*후불 회원에게만 노출되는 안내레이어*/ .login2 .check_money .holdingsum_box {position: relative;} .login2 .check_money .holdingsum_box dl {display:none;position:absolute;left:50%;top:41px;padding:12px;border:2px solid #002c9a;background:#fff;border-radius:10px;box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.5);transform:translateX(-50%);} .login2 .check_money .holdingsum_box dl:after {content:'';position:absolute;left:50%;top:-10px;width:16px;height:10px;margin:0 0 0 -8px;background:url(../images/content/icon_account_arrow.png) no-repeat left top;} .login2 .check_money .holdingsum_box dl dd {margin:3px;font-size:15px;font-weight:500;white-space:nowrap; line-height:20px;} .login2 .check_money .holdingsum_box:hover dl {display:block;} .login2 .point p {padding-right: 6px;display: inline-block; vertical-align: middle;} .login2 .point i {background-image: url(/publish/images/pointIcon2.png);width: 30px;height: 28px;margin-right: 3px;margin-top: -2px;} .login2 .login_right button i {background-image: url(/publish/images/login_introIcon.png);width: 20px;height: 18px;margin: 0 6px 3px 0;} /* 로그인 세션 */ .login2 .session {display: inline-block; width: 95px; height: 36px; border: 1px solid #bdc2c9; border-radius: 5px; margin-right: 10px; background-color:#d9dfeb; box-sizing: border-box; vertical-align: middle;} .login2 .session span {font-size: 16px; float: left; line-height: 32px; color: #002c9a; text-align: center; padding: 0 6px;} .login2 .session button {padding: 0 4.5px; height: 100%; font-size: 16px; color: #0f2866; background-color: #cfd6e6; float: right; border-left: 1px solid #bdc2c9; margin-right: 0;} .login2 .event {padding:5px 0 0 20px;} .login2 .event span {color: #222;font-weight: 500;margin-right: 3px;font-size:16px;} .login2 .event span i {position: relative; background-image: url(/publish/images/login_gift.png);width: 25px;height: 25px; margin-bottom: 5px;margin-right: 4px;} .login2 .event span i::after{position: absolute; content: " "; width: 20px; height: 20px; background-image: url(/publish/images/event.gif); left: -12px; top: -5px;} .login2 .event .btnType {width:26px;height:26px;margin:-2px 0 0;padding:0;font-size:12px;line-height:24px;} .login2 .login_info, .login2 .check_money, .login2 .point, .login2 .event {white-space:nowrap;} /* //header */ /* 검색 */ .pop_search{display: block; width: 100%;background-color: #Fff; border-top: 1px solid #d5d5d5; position: relative; height: 0; overflow: hidden;} .pop_search .inner {padding: 55px 0;} .pop_search.on{z-index: 10;height: auto; overflow: visible;box-shadow:0px 40px 45px -30px rgb(0 0 0 / 30%);} .header+.mask2.on{width: 100%;min-width: 1240px; height: 100%; background-color: rgba(0,0,0,0.7); display: block; position: absolute; z-index: 9;} .area_search{max-width: 570px; margin: 0 auto;position: relative;} .area_search select{width: 170px; height: 50px; padding-left: 15px;border: 1px solid #000; border-radius: 5px;margin-right: 1px; font-size: 18px; background-image: url(/publish/images/select_search.png); background-repeat: no-repeat; background-position: 85% center; position: relative;color: #555;} .area_search input[type="text"]{width: calc(100% - 180px);height: 50px;padding-left: 20px;border: 1px solid #000; border-radius: 5px; box-sizing: border-box;font-size: 18px; font-weight: 300;box-sizing: border-box;} .area_search button {position: absolute;right: 0;width: 55px;height: 50px;border: 1px solid #000; border-radius: 0 5px 5px 0; background-color: #ffcc33;} .area_search button:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);} .area_popular{max-width: 1400px; margin: 20px auto 0; display: flex; justify-content: center;} .area_popular p{font-size: 16px; color: #000; font-weight: 500;width: 95px; margin-right: 32px; line-height: 2.2;position: relative;} .area_popular p::after {width: 95px; content: "";position: absolute;width: 2px;height: 15px;background-color: #ffcc33;top: 50%;transform: translateY(-50%);right: -17px;} .area_popular p i {background-image: url(/publish/images/search_popular.png);width: 16px;height: 16px;margin-right: 5px;margin-bottom: 3px;} .area_popular ul{display: flex;} .area_popular ul li{margin: 2px 3px 0 3px;} .area_popular ul li a{color: #999; font-size: 16px; padding: 7px 15px; border-radius: 20px; border: 1px solid #bbbbbb; font-weight: 300;} .area_popular ul li:hover a{border: 1px solid #000;background-color: #ffcc33; color: #000;} .pop_search .btn_close{position: absolute; top: 24px;right: 14px;} /* //검색 */ /* 사이트맵 */ .layer_sitemap {overflow:hidden;position:relative;display:block;width:100%;height:0;border-bottom:1px solid #d5d5d5;background:#fff;z-index:16;/*transition:height 0.4s;*/} .layer_sitemap.active {height:635px;box-shadow:0px 20px 30px 0px rgba(0, 0, 0, 0.1);} .layer_sitemap .inner {padding:0;letter-spacing:-0.025em;} .layer_sitemap .menu {display:flex;justify-content:space-between;} /*.layer_sitemap .menu > li {width:calc(100%/7);}*/ .layer_sitemap .menu dl dt {margin:54px 0 0;} .layer_sitemap .menu dl dt a {position:relative;display:inline-block;font-family:'GmarketSansMedium';font-size:22px;} .layer_sitemap .menu dl dt a:hover:after {content:'';position:absolute;left:0;bottom:2px;width:100%;height:7px;background:#002c9a;opacity:0.2;filter:opacity(20);} .layer_sitemap .menu dl dd {margin:18px 0 0;} .layer_sitemap .menu dl dd li {line-height:40px;} .layer_sitemap .menu dl dd li a {display:inline-block;font-size:18px;font-weight:300;white-space:nowrap;color:#444;} .layer_sitemap .menu dl dd li a:hover {font-weight:400;color:#002c9a;} /* //사이트맵 */ /* footer */ .footer {font-weight: 300;min-width: 1240px;height:206px;} .footer .footer_top {background-color: #323232;height: 56px;} .footer .footer_top ul li {display: inline-block;padding: 0 25px;color: #adadad;} .footer .footer_top ul li:first-child {padding: 0 25px 0 0;} .footer .footer_top ul li:hover {color: #fff;text-decoration: underline;} .footer .footer_top ul li a {font-size:16px;} .footer .footer_top ul li.about a {padding-left:34px;line-height:22px;background:url(/publish/images/icon_footer_about.png) no-repeat left center;} .footer .footer_body {background-color: #3f3f3f;height: 150px;color: #919191;} .footer .footer_body .inner {height:150px;} .footer .footer_body .inner .table_cell {height:150px;} .footer .footer_body .footer_logo {display: inline-block;} .footer .footer_body .footer_info {display: inline-block;vertical-align: middle;} .footer .footer_body .footer_info p {padding: 5px 0 5px 25px; font-size: 15px; letter-spacing: -0.05em;} /* footer 고객센터 */ .footer .footer_body .footer_service_center {overflow:hidden;position:absolute;right:0;top:50%;display:flex;height:90px;background:#fff;border-radius:10px;transform:translateY(-50%);} .footer .footer_body .footer_service_center dt {width:65px;padding:55px 0 0;font-size:14px;font-weight:500;text-align:center;color:#222;background:url(/publish/images/footer_serive_center.png) #ffcc33 no-repeat center 12px;} .footer .footer_body .footer_service_center dd {padding:22px 10px 0 13px;} .footer .footer_body .footer_service_center dd p {font-size:21px;font-weight:700;line-height:24px;letter-spacing:-0.01em;color:#304b8f;} .footer .footer_body .footer_service_center dd span {font-size:13px;color:#666;letter-spacing:-0.02em;} /* //footer */ /* quick Menu */ .quickMenu {position: fixed;top: 190px;right:15px;text-align: center;z-index: 15;box-shadow: 3px 3px 10px 4px rgba(0,0,0,0.1);border-radius: 8px;transition:right 0.3s ease-in-out, top 0.2s ease-in-out;width: 90px;} .quickMenu.quickSub.active {top:150px;} .quickMenu>div {width: 90px;} .quickMenu.main {right: 20px;top:150px;} .quickMenu .quick_title {padding: 10px 0px; font-size: 13px;color: #fff;background-color: #424463;border-radius: 8px 8px 0 0;line-height: 1.3;} .quickMenu .quick_title2 {padding: 10px 0px; font-size: 13px;color: #fff;background-color: #424463;border-radius: 8px 8px 0 0;line-height: 1.3;display: none;} .quickMenu .quickMenuIn {background-color: #fff;} .quickMenu .quickMenuIn > li {height: 55px;position: relative;} .quickMenu .quickMenuIn > li::before {content: "";background-color: #e5e5e5;width: 70px;height: 1px;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);} .quickMenu .quickMenuIn > li:last-child:before {display: none;} .quickMenu .quickMenuIn > li a {padding-top: 5px; display: block;} .quickMenu .quickMenuIn li i {display: inline-block;} .quickMenu .quickMenuIn li i.quick1 {background-image: url(/publish/images/quick1.png);width: 20px; height:18px;} .quickMenu .quickMenuIn li i.quick2 {background-image: url(/publish/images/quick2.png);width: 20px; height:18px;} .quickMenu .quickMenuIn li i.quick3 {background-image: url(/publish/images/quick3.png);width: 28px; height:24px;} .quickMenu .quickMenuIn li i.quick4 {background-image: url(/publish/images/quick4.png);width: 24px; height:22px;} .quickMenu .quickMenuIn li i.quick5 {background-image: url(/publish/images/quick5.png);width: 14px; height:24px;} .quickMenu .quickMenuIn li i.quick6 {background-image: url(/publish/images/quick6.png);width: 24px; height:16px;} .quickMenu .quickMenuIn li i.quick7 {background-image: url(/publish/images/quick7.png);width: 34px; height:16px;} .quickMenu .quickMenuIn li i.quick8 {background-image: url(/publish/images/quick8.png);width: 22px; height:16px;} .quickMenu .quickMenuIn li i.quick9 {background-image: url(/publish/images/quick9.png);width: 24px; height:20px;} .quickMenu .quickMenuIn li i.quick10 {background-image: url(/publish/images/quick10.png);width: 21px; height:20px;} .quickMenu .quickMenuIn li i.quick11 {background-image: url(/publish/images/quick11.png);width: 20px; height:20px;} .quickMenu .quickMenuIn li i.quick12 {background-image: url(/publish/images/level/quick12.png);width: 20px; height:20px;} .quickMenu .quickMenuIn li span {display: block;font-size: 12px;color: #555;padding-top: 8px;} .quickMenu .goTop {background-color: #929599;color: #fff;width: 90px;padding: 10px 0;border-radius: 0 0 8px 8px;font-size: 20px;} .quickMenu .goTop i {background-image: url(/publish/images/goTop.png);width: 12px;height: 10px;margin-left: 5px;margin-bottom: 5px;} .quickMenu .quickMenuIn li:hover i.quick1 {background-image: url(/publish/images/quick1_hover.png);width: 20px; height:18px;} .quickMenu .quickMenuIn li:hover i.quick2 {background-image: url(/publish/images/quick2_hover.png);width: 20px; height:18px;} .quickMenu .quickMenuIn li:hover i.quick3 {background-image: url(/publish/images/quick3_hover.png);width: 28px; height:24px;} .quickMenu .quickMenuIn li:hover i.quick4 {background-image: url(/publish/images/quick4_hover.png);width: 24px; height:22px;} .quickMenu .quickMenuIn li:hover i.quick5 {background-image: url(/publish/images/quick5_hover.png);width: 14px; height:24px;} .quickMenu .quickMenuIn li:hover i.quick6 {background-image: url(/publish/images/quick6_hover.png);width: 24px; height:16px;} .quickMenu .quickMenuIn li:hover i.quick7 {background-image: url(/publish/images/quick7_hover.png);width: 34px; height:16px;} .quickMenu .quickMenuIn li:hover i.quick8 {background-image: url(/publish/images/quick8_hover.png);width: 22px; height:16px;} .quickMenu .quickMenuIn li:hover i.quick9 {background-image: url(/publish/images/quick9_hover.png);width: 24px; height:20px;} .quickMenu .quickMenuIn li:hover i.quick10 {background-image: url(/publish/images/quick10_hover.png);width: 21px; height:20px;} .quickMenu .quickMenuIn li:hover i.quick11 {background-image: url(/publish/images/quick11_hover.png);width: 20px; height:20px;} .quickMenu .quickMenuIn li:hover i.quick12 {background-image: url(/publish/images/level/quick12_hover.png);width: 20px; height:20px;} .quickMenu .quickMenuIn li:hover span {color: #002c9a;font-weight: 500;} .quickMenu .quick_kakaobtn {position:absolute;right:0;bottom:-100px;width:90px;height:90px;font-size:0;text-indent:-9999em;background:url(/publish/images/content/icon_quick_kakao.png) no-repeat left top;z-index:15;} .quickMenu .quick_kakaobtn a {display:block;width:100%;height:100%;} /* 퀵메뉴 세로 스크롤 시 */ .quickMenu.main.scroll {transition: all 0.3s ease-in-out;right:-100px;} /* 퀵메뉴 1440px부터 메뉴 호버 시 말풍선 */ .quickMenu .hover_cont {width: 80px;position: absolute;height: auto;background-color: #fff;box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.1);padding: 8px;border: 1px solid #d5d5d5; border-radius: 5px; font-size: 14px;top:18px; right: 45px;z-index: 1;line-height: 1.3;display: none;} .quickMenu .cscenter .hover_cont {display:none;top:inherit;bottom:-49px;right:90px;width:220px;height:auto;padding:19px 0 19px 15px;letter-spacing:-0.05em;text-align:left;border:1px solid #e5e5e5;background:#fff;border-radius:5px;box-sizing:border-box;box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.2);} .quickMenu .cscenter .hover_cont .title {height:26px;padding:0 0 0 35px;font-size:16px;font-weight:500;line-height:24px;background:url(/publish/images/icon_qucik_cscenter.png) no-repeat left top;} .quickMenu .cscenter .hover_cont .number {margin:2px 0 0;font-size:30px;font-weight:700;color:#002c9a;} .quickMenu .cscenter .hover_cont .email {margin:2px 0;font-size:14px;font-weight:300;color:#666;} .quickMenu .cscenter .hover_cont ul {margin:7px 15px 0 0;padding:6px 0 12px 9px;background:#f5f5f5;border-radius:5px;} .quickMenu .cscenter .hover_cont ul li {font-size:14px;line-height:22px;color:#444;} .quickMenu .cscenter .hover_cont .cskakao {padding:10px 19px 0 0;} .quickMenu .cscenter .hover_cont .cskakao a {position:relative;display:block;float:left;width:50%;height:36px;padding:0;font-size:14px;line-height:34px;text-align:center;color:#333;border:1px solid #d5d5d5;box-sizing:border-box;border-radius:5px 0 0 5px;} .quickMenu .cscenter .hover_cont .cskakao a.kakao {border-right:0;} .quickMenu .cscenter .hover_cont .cskakao a.remote {border-radius:0 5px 5px 0;} .quickMenu .cscenter .hover_cont .cskakao a.kakao:before {content:'';display:inline-block;width:20px;height:34px;margin:0 5px 0 0;vertical-align:top;background:url(/publish/images/icon_cscenter_kakao.png) no-repeat left top;} .quickMenu .cscenter .hover_cont .cskakao a.remote:before {content:'';display:inline-block;width:17px;height:34px;margin:0 5px 0 0;vertical-align:top;background:url(/publish/images/icon_cscenter_remote.png) no-repeat left top;} .quickMenu .cscenter .hover_cont .cskakao a:hover:after {content:'';position:absolute;left:-1px;top:-2px;width:100%;height:100%;border:2px solid #fbc72b;box-shadow:2px 2px 6px 2px rgba(0 0 0 / 0.15);z-index:1;} .quickMenu .cscenter .hover_cont .cskakao a.kakao:hover:after {border-radius:5px 0 0 5px;} .quickMenu .cscenter .hover_cont .cskakao a.remote:hover:after {border-radius:0 5px 5px 0;} .quickMenu .cscenter:hover .hover_cont {display:block;} /* //quick Menu */ /* pagenation */ .pagination{width: 40%; margin: 0 auto 40px auto; display: flex; justify-content: center;} .pagination li button{width: 32px; height: 34px; margin: 0 2px; letter-spacing: -0.5px; border: 1px solid #d5d5d5; border-radius: 3px; text-align: center; color: #666; background-color: #fff;} .pagination li.on button{background-color: #002c9a; border: 1px solid #002c9a; color: #fff; font-weight: 500;} .pagination li button:hover {box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.1);} .pagination li.page_first button,.pagination li.page_prev button,.pagination li.page_next button,.pagination li.page_last button{background-color: #f5f5f5; line-height: 1; font-size: 13px;} .pagination li.page_prev button {margin-right: 5px;} .pagination li.page_next button {margin-left: 5px;} .pagination li.page_first button img,.area_page li.page_prev button img{margin-left: -2px;} .pagination li.page_next button img,.area_page li.page_last button img{margin-right: -2px;} /* //pagenation */ /* 광고배너 */ .main_cont4{min-width: 1200px; background-color: #f5f5f5; padding: 30px 0;} .main_cont4 .inner{height: auto;} .adv_list{display: flex; justify-content: space-between; align-items: center;} .adv_list li{width: calc((100% / 4) - 27px); background-color: #fff; border: 2px solid #808080; border-radius: 5px; text-align: center; height: 96px; max-height: 96px; overflow: hidden;} .adv_list li a{height: 100%;} .adv_list li img{max-height: 96px; height: 100%; object-fit: scale-down;} .login_wrap .adv_list{margin: 68px 0 0 0;} .login_wrap .adv_list li{width: calc((100% / 2) - 10px); border: 0;} .login_wrap .adv_list li img{margin-left: -10px;} /* ie */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* login */ .login .login_left .login_put input {width: 200px;} } @media only screen and (max-width:1540px){ .header .inner {padding:0 30px;box-sizing:border-box;} .header .header_top .menu_left {left:30px;} .header .header_top .menu_right {right:30px;} .header .header_body .logo {left:30px;} .header .header_body .s_menu {right:30px;} .header .header_body .gnbWrap li {margin: 0 13px;} .header .header_body .gnbWrap li:first-child{margin: 0 17px 0 -33px;} .header .header_body .gnbWrap li:last-child{margin: 0 0 0 10px;} .pop_search .inner {padding:40px 0;} } /* media queries */ @media only screen and (max-width:1480px){ /* header */ .header .inner {padding:0 70px;box-sizing:border-box;} .header .login .inner {padding:0 46px 0 48px;} .header .header_top .menu_left {left:70px;} .header .header_top .menu_right {right:70px;} .header .header_body .logo {left:70px;} .header .header_body .s_menu {right:70px;} .header .header_body .s_menu button {margin-left: 20px;} .header .header_body .gnbWrap li:first-child{margin: 0 17px 0 -18px;} .pop_search .inner {padding:30px 0;} /* login */ .login_right {margin-right: 20px; text-align: inherit;} .login2 .login_info {margin-right: 30px;} .login2 .login_info::after {right: -25px;} .login2 .check_money {margin-right: 15px;} .login2 .login_right button {padding: 0 8px; margin-right: 20px;} /* quick Menu */ .quickMenu {right: 0px;width: 60px;border-radius: 8px 0 0 8px;} .quickMenu.main {right: 0px;} .quickMenu>div {width: 60px;} .quickMenu .quick_title {display: none;} .quickMenu .quick_title2 {border-radius: 8px 0 0 0;display: block;} .quickMenu .quickMenuIn li {height: 40px;} .quickMenu .quickMenuIn li::before {width: 45px;} .quickMenu .quickMenuIn li:hover .hover_cont{display: block;} .quickMenu .quickMenuIn li a {padding-top: 7px;} .quickMenu .quickMenuIn li i.quick3 {margin-left: 3px;} .quickMenu .quickMenuIn li i.quick4 {margin-left: 5px;} .quickMenu .quickMenuIn li i.quick7 {margin-left: 3px;} .quickMenu .quickMenuIn li span {display: none;} .quickMenu .quickMenuIn li.cscenter .hover_cont {bottom:-35px;right:60px;} .quickMenu .quickMenuIn li.cscenter .hover_cont .info li {height:auto;} .quickMenu .quick_kakaobtn {bottom:-70px;width:60px;height:60px;background-size:100%;} .quickMenu .goTop {border-radius: 0 0 0 8px;font-size: 16px;width: 60px; padding:5px 0;} .quickMenu .goTop i {margin-left: 3px;} /* footer */ .footer .footer_top {padding: 0 20px;} .footer .footer_body {padding: 0 20px;} .footer .footer_body .footer_info {font-size:14px;} } @media only screen and (max-width:1380px){ /* login */ .login .login_right span {margin-right: 0;font-size:15px;} .login .login_left .login_save {margin:0 20px 0 10px;} .login .login_left .login_find::before {left: -8px;} .login .login_left .login_find {margin-right: 0;} .login .login_right span i {margin-right: 0;} .login2 .login_info button {margin-right: 0;} .login2 .login_info {margin-right: 25px;} .login2 .login_info::after {right: -15px;} .login2 .login_info p {padding-right: 5px;} .login2 .check_money {margin-right: 10px;} .login2 .check_money p {padding-right: 0px;} .login2 .check_money p span, .login2 .point p span {padding-left: 0;} .login2 .check_money button {margin-right: 0;} .login2 .point p {padding-right: 0px;} .login2 .login_right button {padding: 0 5px; margin-right: 0;} .login2 .session {margin-right: 5px;} .header .header_body .gnbWrap{letter-spacing: -1px;} .header .header_body .gnbWrap li{margin: 0 9px;} /* footer */ .footer .footer_body .footer_info p {padding: 5px 0 5px 15px; letter-spacing: -0.08em;} .footer .footer_body .footer_service_center dt {width: 60px;} .footer .footer_body .footer_service_center dd span {letter-spacing: -0.04em;} } @media only screen and (max-width:1300px){ /* login */ .login2 .login_info {margin-right: 10px;} .login2 .login_info::after {right: -10px;} } /* 모바일 */ @media screen and (max-width: 767px){ .login2 .check_money i, .login2 .check_money p em, .login2 .point i, .login2 .point p em, .login2 .event span i {display:none;} .login2 .login_info, .login2 .check_money, .login2 .point, .login2 .event {white-space:nowrap;} }