457 lines
35 KiB
CSS
457 lines
35 KiB
CSS
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{display:flex;height:100%;align-items:center;gap:20px;}
|
|
.header .header_top .menu_left li {}
|
|
.header .header_top .menu_left li:hover {color: #fff;text-decoration: underline;}
|
|
.header .header_top .menu_left i {padding-right: 7px;vertical-align:bottom;}
|
|
.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_center.png);width: 13px;height: 13px;}
|
|
.header .header_top .menu_left .hdTop_center {background-image: url(/publish/images/hdTop_mypage.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-flex; min-width: 110px; position: relative; vertical-align: middle;align-items:center; cursor:pointer;}
|
|
.login2 .login_info .login2_name p {color: #002c9a; font-weight: 600; vertical-align: top; height: 16px; white-space:nowrap;}
|
|
.login2 .login_info .login2_name span {width: 61px;padding:0 10px 0 0;margin:0 0 0 0;}
|
|
.login2 .login_info .icon_user{background-image: url(/publish/images/icon_header_user.png);width: 28px;height: 28px;}
|
|
/*등급별 아이콘*/
|
|
.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 {padding:0 14px;}
|
|
.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>.holdingsum_box>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 .user_money_wrap{display:flex;align-items:center;gap:4px;margin:0 6px 0 0;}
|
|
.login2 .check_money .hover_content_wrap{display:inline-block;position:relative;}
|
|
.login2 .check_money .hover_content_wrap .qmMark{width:17px;height:17px;margin:0 4px 0 0;background:#6a6c72;border-radius:100%;color:#fff;text-align:center;}
|
|
.login2 .check_money .hover_content_wrap .qmMark:hover+.hover_content{display:block;}
|
|
.login2 .check_money .hover_content{display:none;position:absolute;padding:12px 12px 8px 12px;border:2px solid #002c9a;background:#fff;box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);transform:translateX(-50%);border-radius:5px;top:34px;left:8px;}
|
|
.login2 .check_money .hover_content::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 .hover_content .hover_content_title{font-size:14px;font-weight:600;margin:0 0 10px 0;}
|
|
.login2 .check_money .hover_content .hover_content_title span{padding:0;font-size:13px;font-weight:400;}
|
|
.login2 .check_money .hover_content .hover_content_title img{width:16px;margin:-4px 0 0 0;}
|
|
.login2 .check_money .hover_content .send_available_number{display:flex;flex-direction:column;gap:7px;}
|
|
.login2 .check_money .hover_content .send_available_number li{display:flex;justify-content:space-between;font-size:13px;}
|
|
.login2 .check_money .hover_content .title{min-width:70px;}
|
|
.login2 .check_money .hover_content .number{text-align:right;padding:0;}
|
|
.login2 .check_money .hover_content .event_term{display:flex;width:100%;padding:4px 5px 4px 7px;margin:8px 0 0 0;background:#FFE5E5;font-size:13px;color:#e40000;text-align:center;border-radius:25px;justify-content:space-between;box-sizing:border-box;}
|
|
.login2 .check_money .hover_content .event_term p:last-child{color:#222;}
|
|
.login2 .check_money .hover_content .event_term p:last-child span{color:#e40000;}
|
|
|
|
/*후불 회원에게만 노출되는 안내레이어*/
|
|
.login2 .check_money .holdingsum_box {position: relative; display:flex; align-items: center;}
|
|
.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;}
|
|
|
|
/* 보안로그인 */
|
|
.security_box{display:inline-flex;height:36px;font-weight:500;background:#fff;padding:0 8px 0 11px;margin:0 0 0 3px;vertical-align:middle;border-radius:5px;align-items:center;box-sizing:border-box;}
|
|
.security_box.red_box{border:1px solid #ca1a1a;}
|
|
.security_box.green_box{border:1px solid #0ca448;}
|
|
.security_box p{cursor:pointer;}
|
|
.security_box .state{display:flex;width:40px;height:25px;font-size:13px;font-weight:600;margin:0 0 0 5px;border-radius:5px;justify-content:center;align-items:center;cursor:pointer;}
|
|
.security_box .state.on{background:#18bb59;color:#fff;}
|
|
.security_box .state.off{background:#e62c2c;color:#fff;}
|
|
|
|
/* //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 대량문자 전송자격 인증마크_241202 */
|
|
.footer .footer_body .footer_info p{padding: 3px 0 3px 25px;}
|
|
.footer .footer_body .footer_info .info_te{line-height: 1.4;}
|
|
.footer .footer_body .footer_service_center{right: 10%; height: 80px;}
|
|
.footer .footer_body .footer_service_center dt{padding: 48px 0 0; background: url(/publish/images/footer_serive_center.png) #ffcc33 no-repeat center 6px;}
|
|
.footer .footer_body .footer_service_center dd{padding: 18px 10px 0 13px;}
|
|
.footer .footer_body .footer_mark{position: absolute; top: 18%; right: 0; cursor: pointer; width: 95px; height: 95px;}
|
|
|
|
/* //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 .login_info .login2_name p{font-size:14px;}
|
|
.login2 .login_info button.btn_36.fill_gray{padding:0 8px;font-size:14px;}
|
|
.security_box,.login2 .check_money .user_money_wrap, .login2 .point,.login2 .session span,.login2 .login_info .login2_name span{font-size:14px;}
|
|
.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;}
|
|
|
|
} |