/* =================================== 기본레이아웃 */ /*body {background:#fff;}*/ #wrapper { position:relative; width:100%; height:auto; min-height:100%;padding-top:0; padding-bottom:480px; /*padding-top: 0 0 calc(constant(safe-area-inset-top) + 150px); padding-top: 0 0 calc(env(safe-area-inset-top) + 150px);*/ -webkit-overflow-scrolling:touch; /*background:#e4e5ea;*/ /*margin-top: env(safe-area-inset-top); margin-bottom: env(safe-area-inset-bottom);*/ opacity:1; /*animation-name: loading_wrap; animation-duration:1s;animation-iteration-count: 1; animation-direction:normal;animation-fill-mode: forwards; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;*/ } #wrapper:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/images/logo_mobile_2.png); background-size:50px auto; opacity: 0.0; } #header {position:fixed; top:0; left:0; width:100%; height:auto; z-index:7; transition:all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; background: linear-gradient(to bottom, #fff, #e4e5ea);} #content {position:relative; width:100%; min-height: calc(100% - 480px); z-index:5;} #footer {position:relative; width:100%; height:480px;text-align:center; padding-bottom:80px; z-index:2; margin-top:-480px;/* transform:translateY(-100%);*/ display:none;} #top_fix {position: relative; width:100%; height: auto; top: 0px; z-index:10; transition:all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease;} .app_top_fix {position:fixed; top:0; height:200px; width:100%; /*z-index:3;*/ /*background: linear-gradient(to bottom, #fff, #e4e5ea);*/} .backgroundFix {position: fixed; width: 100%; height: 100%; z-index: -10;} .backgroundFix.f_top {background: #fff; top: 0; z-index: -11;} .backgroundFix.f_bottom {background: #610d00; top: 0; -webkit-animation-name: bg_ios; -webkit-animation-duration: 1.5s; animation-name: bg_ios; animation-duration: 1.5s;-webkit-animation-delay: 5s; animation-delay: 5s; z-index: -10;} .backgroundFix.f_bottom:after {content:""; position:absolute; top:0; left:0; width:100%; height:50%; background: #fff;} @-webkit-keyframes loading_wrap { 0% {opacity: .0;} 25% {opacity: 0;} 50% {opacity: 1;} 75% {opacity: 1;} 100% {opacity: 1;} } @-webkit-keyframes index_show { from {transform:translateY(0); opacity:0;} to {transform:translateY(0); opacity:1;} } @keyframes bg_ios { from { opacity:0;} to { opacity:1;} } #navi_head.nv_wrp {position: relative; top:0; left:0; right:0; margin:0 auto; width:100%; height:auto; transition:all .3s; } #navi_head.top1 {background: white; box-shadow: -15px 15px 15px -15px rgba(0,0,0,0.1), 15px 15px 15px -15px rgba(0,0,0,0.1);} #navi_head.top2 {background:white; box-shadow: -15px 15px 15px -15px rgba(0,0,0,0.1), 15px 15px 15px -15px rgba(0,0,0,0.1);} #navi_head .t_pos {position:relative; top:0; left:0; right:0; margin:0 auto; max-width:1000px; width:100%; min-width:1000px; height:100px; } #navi_head .logo_mb {position:absolute; top:0; right:0; margin:auto; width:100%; height:100%; text-align:center; z-index:1; } #navi_head .logo_mb span {position:absolute; top:0; left:0; right:0; margin:auto; width:150px; height:100%; font-size:0; background:url(/images/logo_mobile_1.png) no-repeat; background-position:center center; /*background-size:auto 50px; */} #navi_head .logo_mb img {height:50px;} #navi_head .app_ver {position:absolute; top:30px; left:75px; font-size:11px; } #navi_head .icon_area {position:absolute; top:0; right:30px; height:100%; text-align:right; z-index:2; font-size:0;} #navi_head .icon_area .ia_pos {display:inline-block; vertical-align:middle;font-size:25px; width:70px; height:100%; text-align:center; padding-top:34px; } #navi_head .icon_area .ia_pos.ia_pop {position:relative; display:none;} #navi_head .icon_area .ia_pos.ia_pop a {position:relative;} #navi_head .icon_area .ia_pos.ia_pop a:after {content:"popup"; position:absolute; top:-20px; left:50%; line-height:100%; font-family:arial; font-size:10px; border-radius:3px; transform:translateX(-50%); color:#fff; display:none;} #navi_head .icon_area .ia_pos.ia_pop .e_ment {position:absolute; top:13px; left:0; right:0; margin:0 auto; width:40px; background:#d70051; font-size:11px; border-radius:35px; line-height:18px; color:white; padding:0 3px; font-family:tahoma; display:none;} #navi_head .icon_area .ia_pos.ia_search {} #navi_head .icon_area .ia_pos.msg_icon {position:relative;} #navi_head .icon_area .ia_pos.msg_icon span {position:absolute; top:15px; right:15px; background:orange; font-size:11px; border-radius:35px; min-width:20px; line-height:20px; color:white; padding:0 5px; font-family:tahoma;} #navi_head.top1 .logo_mb span {background:url(/images/logo_mobile_2.png) no-repeat; background-position:center 10px; background-size:auto 55%; transition:all .3s;} #navi_head.top2 .logo_mb span {background:url(/images/logo_mobile_2.png) no-repeat; background-position:center 10px; background-size:auto 55%; transition:all .3s;} #navi_head.top1 .icon_area .ia_pos, #navi_head.top1 .icon_area .ia_pos a {color:black;} #navi_head.top2 .icon_area .ia_pos, #navi_head.top2 .icon_area .ia_pos a {color:black;} #navi_head.top1 .icon_area .ia_pos.ia_pop a {color:orange;} #navi_head.top2 .icon_area .ia_pos.ia_pop a {color:orange;} #navi_head.top1 .app_ver, #navi_head.top2 .app_ver {color:rgba(0,0,0,0.4);} #navi_head.top1 .app_ver span, #navi_head.top2 .app_ver span {color:rgba(0,0,0,0.7);} .content_wrap {position:relative; top:0px; margin:auto; width:800px; overflow:hidden;} .content_wrap .cw_in {display:inline-block; width:100%; min-height: calc(100% - 590px); padding:0; margin:120px 0 20px 0; background:white; border-radius:20px; border:1px solid #d1d7de; /*overflow:hidden;*/ position:relative;} .content_wrap .cw_in .ci_content {display:inline-block; width:100%;/* padding:80px; */ position:relative; border-radius:0 0 20px 20px; /*overflow:hidden;*/} .block_ani {animation: fadein .3s; -moz-animation: fadein .3s; -webkit-animation: fadein .3s; -o-animation: fadein .3s;} .bottom_space {position:fixed; bottom:0; height:30%; width:100%; background:#002748; z-index:0;} /* =================================== 스크롤탑세팅 */ .go-top {width:35px; height:35px; padding-top:8px; text-align:center; font-size:18px; position:fixed; bottom:-40px; right:20px;background:rgba(0,0,0,0.6); color:#FFFFFF; border-radius:100%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; -moz-border-radius:100%; -webkit-border-radius:100%; z-index:1; display:none;} .go-top.show{bottom:20px;} .go-top:hover{background:rgba(0,0,0,1);} /* 하단정보 */ .btm_wrap {display:inline-block; width:800px; padding:50px 80px; background:#610d00; border-radius:20px 20px 0 0; position:absolute; bottom:0; left:0; right:0; margin:0 auto; height:480px; z-index:1;} .btm_wrap .brand {position:absolute; top:35px; right:35px; z-index:1; width:150px; text-align:center;} .btm_wrap .brand img {max-width:115px; width:100%;} .btm_wrap .brand .br_exp {display:inline-block; width:100%; padding-top:10px;} .btm_wrap .brand .br_exp h4 {display:inline-block; width:100%; font-weight:normal; font-size:14px; color:rgba(255,255,255,0.8); letter-spacing:-0.05em;} .btm_wrap .brand .br_exp p {display:inline-block; width:100%; font-size:13px;color:rgba(255,255,255,0.9); padding-top:5px;} .btm_wrap .brand .br_exp p span {color:#ff9c00;} .btm_wrap .btm_logo {float:left; width:100%; text-align:left;} .btm_wrap .btm_logo img {width:110px;} .btm_wrap .bgm_nav {float:left; width:100%; font-size:0; padding:30px 0 20px 0; text-align:left;} .btm_wrap .bgm_nav li {display:inline-block; vertical-align:middle; border-right:1px solid rgba(255,255,255,0.2); padding:0 10px 0 0; margin:0 10px 0 0;} .btm_wrap .bgm_nav li:last-child {border-right:0;} .btm_wrap .bgm_nav li a {display:block; font-size:12px; padding:0; color:rgba(255,255,255,0.7); line-height:100%; transition:all .2s;} .btm_wrap .bgm_nav li a:hover {color:#fff; transition:all .2s;} .btm_wrap .btm_iwrp .bi_info {float:left; width:100%; font-size:0; padding:0; text-align:left;} .btm_wrap .btm_iwrp .bi_info span {display:inline-block; font-size:12px; color:rgba(255,255,255,0.5); line-height:200%; padding:0 10px 0 0;} .btm_wrap .btm_iwrp .bi_info span i {color:white; margin-right:5px;} .btm_wrap .btm_iwrp .bi_info span a {color:rgba(255,255,255,0.5);} .btm_wrap .btm_iwrp .bi_info span.ad_wrp {display:inline-block; width:100%;} .btm_wrap .btm_iwrp .bi_msg {float:left; font-size:12px; width:100%; padding:15px 0 30px 0; color:rgba(255,255,255,0.5); text-align:left;} .btm_wrap .btm_iwrp .bi_copy {float:left; font-size:12px; width:100%; font-family:'Roboto', sans-serif; font-weight:400; color:rgba(255,255,255,0.5); text-align:left;} .btm_wrap .btm_iwrp .bi_copy span {display:inline-block; padding:0 10px; font-family:Noto Sans KR, sans-serif; font-weight:500;color:white;} /* 하단네비 */ .q_nav_bx {position:fixed; bottom:0; left:0; right:0; max-width:1000px; min-width:1000px; width:100%; height:80px; background:#9e1500; text-align:center; z-index:3; margin: 0 auto; -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; border-radius: 15px 15px 0 0;} .q_nav_bx.apple {} .q_nav_bx.st_basic {background:#9e1500; } .q_nav_bx ul {position:relative; top:0; left:0; right:0; margin:auto; width:800px; height:100%; font-size:0;} .q_nav_bx ul li {display:inline-block; width:20%; height:100%; text-align:center; position:relative;} .q_nav_bx ul li a {color:rgba(255,255,255,1); transition:all .2s; position:absolute; top:0; left:0; width:100%;} .q_nav_bx ul li a:hover {color:white; transition:all .2s;} .q_nav_bx ul li a.on {color:rgba(255,255,255,1);} .q_nav_bx ul li .sta_light {position:absolute; top:8px; left:23px; right:-23px; width:40px; margin:0 auto; text-align:center; padding:4px 0; line-height:100%; font-size:11px; color:#fff; border-radius:20px;} .q_nav_bx ul li .sta_light.s_on {background:red;} .q_nav_bx ul li .sta_light.s_off {background:#700000; display:none;} .q_nav_bx ul li i {display:inline-block; width:auto; font-size:22px; padding:18px 0 7px 0; position:relative;} .q_nav_bx ul li span {display:inline-block; width:100%; font-size:12px;} .st_area {position:fixed; bottom:0; left:0; right:0; margin:0 auto; max-width:1050px; width:100%; height:80px; background:#9e1500; line-height:80px; font-family:Noto Sans KR, sans-serif; font-weight:500; color:white; font-size:18px; transition:all .3s;z-index:5; text-align:center; -webkit-animation-name: spc_btn; -webkit-animation-duration: 1.5s; animation-name: spc_btn; animation-duration: 1.5s;border-radius:20px 20px 0 0;} @keyframes spc_btn { from { height:0; background:#c71a00} to { height: 80px; background:#9e1500} } .st_area:hover {background:#da1d00; transition:all .3s;} .st_area a {display:block; color:white; position:relative; width:100%; } .st_pay {background:#9e1500; } /* sub_layout */ .sub_head_bx {display:inline-block; width:100%; border-bottom:1px solid #eeeeee; background:#fafafa; z-index:5; border-radius:20px 20px 0 0; -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease;} .sub_head_bx .shb_wrp {display:inline-block; width:100%; position:relative;} .sub_head_bx h2 {float:left; width:100%; height:80px; text-align:left; line-height:80px; font-family:Noto Sans KR, sans-serif; font-weight:500;color:black; font-size:19px; letter-spacing:-0.05em; padding:0 50px;} /*.sub_head_bx h2:before {content: '\f6d3'; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-right:10px; color:rgba(0,0,0,1);}*/ .lr_icon {position:absolute; width:80px; height:100%; text-align:center; font-size:22px; color:black; transition:all .2s; } .lr_icon.main {padding-top:0px; top:0;} .lr_icon.sub {padding-top:30px; top:0;} .lr_icon:hover {color:red; transition:all .2s;} .lr_icon.back {left:0;} .lr_icon.map {right:0;} .pstn {} .pstn .lr_icon.map.off {color:#555555; transition:all .3s;} .pstn:hover .lr_icon.map.off {color:#333333; transition:all .3s;} .pstn .lr_icon.map.on {color:black;transition:all .3s;} .pstn:hover .lr_icon.map.on {color:#ff5e00; transition:all .3s;} .pstn .lr_icon.map.off:after, .pstn .lr_icon.map.on:after {content:""; position:absolute; top:-10px; right:-5px; line-height:100%; font-size:11px; display:none;} .pstn .lr_icon.map.off:after {content:""; background:#ddd;} .pstn .lr_icon.map.on:after {content:""; background:red;} .pstn .stm {position:absolute; top:0; bottom:0; right:65px; margin:auto 0; background:red; color:white; width:auto;height:25px; line-height:25px; padding:0 10px;font-size:11px; border-radius:5px; z-index:1;} .pstn .arrow {position:absolute; top:0; bottom:0; right:-2px; margin:auto 0; width:15px;height:15px;transform:rotate(45deg); z-index:-1;} .pstn .bg_off {background:#999999; transition:all .3s;} .pstn:hover .bg_off {background:#333333; transition:all .3s;} .pstn .bg_off .arrow {background:#999999; transition:all .3s;} .pstn:hover .bg_off .arrow {background:#333333; transition:all .3s;} .pstn .bg_on {background:#ff5e00; transition:all .3s;} .pstn:hover .bg_on {background:#ff0000; transition:all .3s;} .pstn .bg_on:before {content:"기준"; color:rgba(255,255,255,0.7); margin-right:5px;} .pstn .bg_on .arrow {background:#ff5e00; transition:all .3s;} .pstn:hover .bg_on .arrow {background:#ff0000; transition:all .3s;} .pst_bx .lr_icon.map {top:-5px; right:0;padding:0; width:auto;} .pst_bx .pstn .stm {top:-20px; right:35px; z-index:2;} .pst_bx .pstn .arrow {top:-20px; right:33px; z-index:1;} .mloc_icon {position:absolute; top:0; right:0; width:80px; height:80px; border:1px solid #eee; background:#fff; border-radius:5px; text-align:center; transition:all .2s; } .mloc_icon:hover {border:1px solid #ddd; transition:all .2s; } .mloc_icon i {display:inline-block; width:100%; font-size:20px; padding:18px 0 5px 0; color:red;} .mloc_icon .stt {display:inline-block; width:100%; font-size:12px; color:red; font-weight:bold;} .mloc_icon:hover .stt {color:red; transition:all .2s; } .mloc_icon .now {position:absolute; top:-7px; right:-7px; font-size:11px; color:#fff; line-height:100%; padding:5px 5px; transition:all .2s; border-radius:3px;} .mloc_icon.on .now {background:red;} .mloc_icon.off .now {background:#333;} /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 추가레이아웃 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */ /* 기본검색 */ .src_section {float:left; width:100%; border-bottom:2px solid white; transition:all .2s;} .src_section .frm_ar {float:left; width:calc(100% - 50px); } .src_section .frm_ar input {border:0; background:transparent; width:100%; font-size:13px; height:50px; padding:0 15px; color:white;} .src_section .frm_ar input::placeholder {color:gray;} .src_section .btn_ar {float:left; width:50px; text-align:center;} .src_section .btn_ar a {font-size:20px; height:50px; padding-top:16px; display:block; cursor:pointer; color:white; transition:all .2s;} /* 기본검색 - 레이어스타일 */ .scbox_wrap{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:9999999;} .scbox_wrap .mask_back {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:#000; opacity: .7; filter:alpha(opacity=70);} .scbox_wrap .content {display:block; max-width:750px; width:90%; height:90%;position:absolute;top:0;left:0; right:0; bottom:0; margin:auto; z-index:999999;background:#771b00; /* 키프레임 제일 마지막 */-webkit-animation-name: map_p; -webkit-animation-duration: 0.2s; animation-name: map_p; animation-duration: 0.2s; border-radius:35px; overflow:hidden;} .scbox_wrap .src_txbx {float:left; width:100%; height:240px; text-align:left; color:black; background:white; padding:70px 70px 45px 70px;} .scbox_wrap .src_txbx .btn {position:absolute;top:0; right:0; font-size:30px; padding:30px; color:rgba(0,0,0,0.7); cursor:pointer;transition: all .2s; -webkit-tap-highlight-color:transparent;} .scbox_wrap .src_txbx .btn:hover {color:rgba(0,0,0,1);transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); transition:all .2s;} .scbox_wrap .src_txbx .st_lgbx {float:left; width:200px; } .scbox_wrap .src_txbx .st_tbx {float:left; width:calc(100% - 200px); height:140px; padding:30px 0 0 50px; border:1px solid #eeeeee; border-width:0 0 0 1px; } .scbox_wrap .src_txbx h1 {float:left; width:100%; font-family:Noto Sans KR, sans-serif; font-weight:500; font-size:22px; letter-spacing:-0.05em;color:#522b00;} .scbox_wrap .src_txbx h1 span {color:black;} .scbox_wrap .src_txbx .h_exp {float:left; width:100%; font-size:13px; color:rgba(0,0,0,0.7); padding-top:20px; line-height:170%;} .scbox_wrap .src_section {float:left; width:100%; padding:45px 70px; border:0; background:#fafafa; border-top:1px solid #eeeeee; } .scbox_wrap .src_section .frm_ar {float:left; width:calc(100% - 60px); border:0px solid red;} .scbox_wrap .src_section .frm_ar input {border:0; background:white; width:100%; font-size:13px; height:60px; padding:0 15px; border:5px solid #771b00; border-width:5px 0 5px 5px; color:#771b00;} .scbox_wrap .src_section .frm_ar input::placeholder {color:rgba(0,0,0,0.4);} .scbox_wrap .src_section .btn_ar {float:left; width:60px; } .scbox_wrap .src_section .btn_ar a {font-size:25px; height:60px; padding-top:18px; display:block; cursor:pointer; color:white; background:#771b00;} .scbox_wrap .banner_api {position:absolute; bottom:0; left:0; width:100%;} .scbox_wrap .banner_api img {width:100%;} .src_keyword {float:left; width:100%; text-align:left; color:white; padding:50px 70px 0 70px; } .src_keyword .ktt {float:left; width:100%; color:white; font-size:18px; padding-bottom:15px;} .src_keyword ul.word {float:left; padding:5px 20px 0 0; } .src_keyword ul.word li {float:left; } .src_keyword ul.word li a {float:left; padding:2px 5px; font-size:13px; color:rgba(255,255,255,0.9);} .src_keyword ul.word li a span{color:rgba(255,255,255,0.7); display:inline-block; padding-right:3px;} .src_keyword ul.word li a:hover {color:rgba(255,255,255,1);} /* 파트너전용 퀵메뉴 */ .navi_partner_pos {position:fixed; bottom:30px; right:30px; width:100px; z-index:1;} .navi_partner_pos a {display:block; width:100%; background:#333; text-align:center; line-height:120%; border-radius:20px;padding:20px 0; transition:all .3s;} .navi_partner_pos a i {display:inline-block; width:auto; font-size:30px; color:white; line-height:100%; transition:all .3s;} .navi_partner_pos a .btt {display:inline-block; width:100%; font-size:11px; color:rgba(255,255,255,0.7);padding-top:7px; transition:all .3s;} .navi_partner_pos a .dday {display:inline-block; width:100%; font-family:Noto Sans KR, sans-serif; font-weight:500; font-size:20px; line-height:110%; color:rgba(255,255,255,0.5); padding-top:10px; } .navi_partner_pos a .dday .dno {color:white; } .navi_partner_pos a:hover {background:#005591; transition:all .3s;} .navi_partner_pos a:hover i {transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); transition:all .3s;} .navi_partner_pos a:hover .btt {color:white;} /* 팝업창 */ .util_pop {border:0px solid #9d9d9d;} .util_pop .box {height:40px; background:#001d37; border-radius:5px 5px 0 0; line-height:100%; } .util_pop .box .close {position:relative; width:100%; height:0px;} .util_pop .box .close .pos {position:absolute; top:7px; right:5px;color:white; font-size:11px; line-height:100%;} .util_pop .box .close .pos .btn {cursor:pointer; color:white; font-size:25px; transition:all .2s;} .util_pop .box .close .pos .btn:hover {transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); transition:all .2s;} .util_pop .box .head {float:left; width:100%; cursor:move;color:white; padding:13px 0px 0px 10px; font-size:11px; text-overflow: ellipsis; white-space: nowrap; text-align:left;} .util_pop .box .head .sname {float:left; width:80px; padding:1px 0 0 7px; font-family:Noto Sans KR, sans-serif; font-weight:500; font-size:12px; opacity:0.7;} .util_pop .box .head .pname {float:left; width:auto; padding:1px 10px 0 0; font-family:Noto Sans KR, sans-serif; font-weight:500; font-size:12px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .util_pop .box .content {position:relative;overflow:hidden; background:#ffffff; text-align:left;} .util_pop .btm {padding:12px 0px; text-align:center; background:#eeeeee; font-size:11px; line-height:100%; color:rgba(0,0,0,0.7); border-radius:0 0 5px 5px;} .util_pop .btm .txt {padding-top:4px;} /* .util_pop {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);} .util_pop .up_pos {position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; max-width:90%; width:600px; max-height:90%; height:800px; } .util_pop .box {height:40px; background:#001d37; border-radius:5px 5px 0 0; line-height:100%; } .util_pop .box .close {position:relative; width:100%; height:0px;} .util_pop .box .close .pos {position:absolute; top:7px; right:5px;color:white; font-size:11px; line-height:100%;} .util_pop .box .close .pos .btn {cursor:pointer; color:white; font-size:25px; transition:all .2s;} .util_pop .box .close .pos .btn:hover {transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); transition:all .2s;} .util_pop .box .head {float:left; width:100%; cursor:move;color:white; padding:13px 0px 0px 10px; font-size:11px; text-overflow: ellipsis; white-space: nowrap; text-align:left;} .util_pop .box .head .sname {float:left; width:80px; padding:1px 0 0 7px; font-family:Noto Sans KR, sans-serif; font-weight:500; font-size:12px; opacity:0.7;} .util_pop .box .head .pname {float:left; width:auto; padding:1px 10px 0 0; font-family:Noto Sans KR, sans-serif; font-weight:500; font-size:12px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} .util_pop .content {position:relative;overflow:hidden; background:#ffffff; text-align:left; border:10px solid red;} .util_pop .call_pop {position:relative;overflow:hidden; background:#ffffff; text-align:left; top:0; left:0; width:100%; height:calc(100% - 85px); } .util_pop .call_pop iframe {width:100%; height:100%; } .util_pop .call_pop iframe img {width:100%;} .util_pop .btm {position:absolute; bottom:0; left:0; width:100%; height:45px; text-align:center; background:#eeeeee; font-size:11px; padding-top:9px; line-height:100%; color:rgba(0,0,0,0.7); border-radius:0 0 5px 5px;} .util_pop .btm .txt {padding-top:2px;} */ /* =================================== 서브메뉴스타일 - 셀렉트형 / 레이아웃 */ .sub_sel_nav {position:fixed; top:0; width:100%; text-align:center; padding-top:0; background:#fff; z-index:9; border-bottom:1px solid #eeeeee;} .sub_sel_nav .sn_space {display:inline-block; width:100%; height:100px;background:#333333;} .sub_sel_nav ul {display:inline-block; width:1260px; background:white;} .sub_sel_nav ul li {float:left; width:250px; text-align:left; margin-right:-1px; } .sub_sel_nav ul li a {float:left; display:block; width:100%; height:70px; border:1px solid #eeeeee; border-width:0 1px; padding:27px 25px; font-size:15px; font-weight:bold; color:rgba(0,0,0,0.8); transition:all .2s;} .sub_sel_nav ul li a span {float:right; font-size:17px; color:#383838; margin-top:2px;} .sub_sel_nav ul li a.sel_mn {display:block; cursor:pointer; background:white;} .sub_sel_nav .home {width:75px; text-align:center; } .sub_sel_nav .home a {width:100%; font-size:16px; padding:27px 0; background:white;border-width:0 1px 0 0;} .sub_sel_nav .pos {position:relative; width:100%; z-index:20;} .sub_sel_nav .pos .list {border:1px solid #eeeeee; border-width:0 1px 1px 1px; position:absolute; top:70px; left:0; width:100%; background:#fafafa;} /* 서브페이지 메뉴 셀렉트바 - depth1 css */ #sub_sel_cate {text-align:left; float:left;} #sub_sel_cate ul {float:left; width:100%; margin:0; padding:0;} #sub_sel_cate ul.depth1 li {float:left; letter-spacing:0em; width:100%; font-family:NanumBarunGothic, sans-serif;border-top:1px solid #eeeeee;} #sub_sel_cate ul.depth1 li a {float:left; width:100%; padding:15px 25px; height:auto; background:#fafafa; color:rgba(0,0,0,0.7); transition:all .2s; font-size:13px; border:0;} #sub_sel_cate ul.depth1 li a:hover {transition:all .2s;color:rgba(0,0,0,1); background:white;} #sub_sel_cate ul.depth1 li .on {color:red; background:white;} #sub_sel_cate ul.depth1 li .on:hover {color:red;} /* 서브페이지 메뉴 셀렉트바 - depth2 css */ #sub_sel_li {float:left; padding:0px 0; width:100%; text-align:left;} #sub_sel_li ul {float:left; width:100%; margin:0; padding:0;} #sub_sel_li ul.depth2 li {float:left; width:100%; font-family:NanumBarunGothic, sans-serif;} #sub_sel_li ul.depth2 li a {float:left; width:100%; height:auto; padding:15px 25px; font-size:13px; background:#fafafa; color:rgba(0,0,0,0.7); border:1px solid #eeeeee; border-width:1px 0 0 0;} #sub_sel_li ul.depth2 li a:hover {color:red;background:#ffffff;} #sub_sel_li ul.depth2 .on a {background:#ffffff; color:red;} #sub_sel_li ul.depth2 .depth3 li {float:left; width:100%; font-family:NanumBarunGothic, sans-serif;} #sub_sel_li ul.depth2 .depth3 a {padding:2px 0 2px 30px; font-size:12px; color:rgba(0,0,0,0.6); border:0; background:white;} #sub_sel_li ul.depth2 .depth3 a:hover {color:red;} #sub_sel_li ul.depth2 .depth3 .on3 a {color:red;} #sub_sel_li ul.depth2 .depth3 .depth4 li {float:left; width:100%;} #sub_sel_li ul.depth2 .depth3 .depth4 a {padding:0px 0 0px 43px; font-size:11px; color:rgba(0,0,0,0.5); } #sub_sel_li ul.depth2 .depth3 .depth4 a:hover {color:red;} #sub_sel_li ul.depth2 .depth3 .depth4 .on4 a {color:red;} #sub_sel_li .icon2 {font-size:11px; opacity:0.7; margin-right:10px;} #sub_sel_li .icon3 {font-size:11px; opacity:0.7; margin-right:10px; color:black;} #sub_sel_li .here {float:right; font-size:9px; color:red; padding:4px 20px 0 0;} /* 하위메뉴 출력시 여백을 위아래로 주고 싶을때 대비 넣어둠 */ #sub_sel_li .space1 {float:left; width:100%; padding:15px 0; background:white; border-top:1px dotted #eeeeee;} #sub_sel_li .space2 {float:left; width:100%; padding:5px 0 15px 0; background:white; } /* 위치설정 맵 레이어 */ .mbx_wrap{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:99999999999;} .mbx_wrap .mask_back {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:#000; opacity: .7; filter:alpha(opacity=70);} .mbx_wrap .content {display:block; max-width:750px; width:90%; max-height:900px; height:90%; position:absolute;top:0;left:0; right:0; bottom:0; margin:auto; z-index:999999;background:#00365b; border-radius:7px; overflow:hidden; /* 키프레임 제일 마지막 */-webkit-animation-name: map_p; -webkit-animation-duration: 0.2s; animation-name: map_p; animation-duration: 0.2s;} .mbx_wrap .src_txbx {position:relative; width:100%; height:60px; text-align:center; color:black; background:white; border-bottom:1px solid #eeeeee;} .mbx_wrap .src_txbx .btn {position:absolute;top:0; right:0; width:60px; height:60px; padding:15px 0 0 0; transition: all .2s; -webkit-tap-highlight-color:transparent; z-index:1; cursor:pointer; } .mbx_wrap .src_txbx .btn i {font-size:25px; color:rgba(0,0,0,1);transition: all .2s;} .mbx_wrap .src_txbx .btn:hover i {color:rgba(0,0,0,1);transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); transition:all .2s;} .mbx_wrap .src_txbx h2 {position:absolute; top:0; left:0; width:100%; height:100%; padding:22px 0 0 20px; font-family:Noto Sans KR, sans-serif; font-weight:500; font-size:18px; letter-spacing:-0.05em; text-align:left;} .mbx_wrap .src_txbx h2 span {color:#00365b;} .mbx_wrap .ly_map {position:relative; width:100%; height:calc(100% - 60px); text-align:center; color:black; background:white; } /* 카카오맵 출력 */ .my_loc_setting {position:relative; top:0; left:0; width:100%; height:100%; } .my_loc_setting .mmp_pos {position:absolute;top:0;left:0;width:100%; height:calc(100% - 50px);} .my_loc_setting .line_x {position:absolute;top:0;left:0; right:0; bottom:0; margin:auto; width:100%; height:1px; border-bottom:1px dashed red; z-index:20;} .my_loc_setting .line_xd {position:absolute;top:0; bottom:0; margin:auto 0; height:1px; border-bottom:1px dashed red; z-index:20;} .my_loc_setting .line_xd.x1 {left:0; width:calc(50% - 5px);} .my_loc_setting .line_xd.x2 {right:0; width:calc(50% - 5px);} .my_loc_setting .line_y {position:absolute;top:0;left:0; right:0; bottom:0; margin:auto; width:1px; height:100%; border-right:1px dashed red; z-index:20;} .my_loc_setting .line_yd {position:absolute;left:0; right:0; margin:0 auto; width:1px; border-right:1px dashed red; z-index:20;} .my_loc_setting .line_yd.y1 {top:0; height:calc(50% - 5px);} .my_loc_setting .line_yd.y2 {bottom:0; height:calc(50% - 5px);} .my_loc_setting .target_circle {position:absolute;top:0;left:0; right:0; bottom:0; margin:auto; width:11px; height:11px; border:1px solid red; background:rgba(255,0,0,0.3); z-index:20;} .my_loc_setting .target_icon {position:absolute;top:0;left:0; right:0; bottom:45px; margin:auto; width:40px; height:40px; color:red; font-size:40px; text-align:center; z-index:20;} /* 주소검색 및 선택 */ .my_loc_setting .scr_wrt_bx {position:absolute;bottom:0;left:0;width:100%; height:50px; background:#fafafa; border-top:0px solid #eeeeee; z-index:21; padding:0; text-align:left;} .my_loc_setting .scr_wrt_bx .scr_frm {display:inline-block; width:100%; font-size:0; position:relative;} .my_loc_setting .scr_wrt_bx .scr_frm .frm_bx {display:inline-block; vertical-align:middle;width:100%;} .my_loc_setting .scr_wrt_bx .scr_frm .frm_bx input {width:100%; height:50px; border:1px solid #eeeeee; border-width:1px 0 0 0; padding:0 90px 0 15px; background:#fafafa; font-size:12px; text-align:left; transition:all .2s; color:red;} .my_loc_setting .scr_wrt_bx .scr_frm .frm_bx input:focus {outline:none; background: white !important; border-top:1px solid #dddddd; transition:all .2s;} .my_loc_setting .scr_wrt_bx .scr_frm .frm_bx input::placeholder {color: rgba(0,0,0,0.3); font-size:11px;} .my_loc_setting .scr_wrt_bx .scr_frm .btn {position:absolute; top:0; right:0; width:50px; height:100%; border:0;} .my_loc_setting .scr_wrt_bx .scr_frm .btn button {width: 100%; height: 100%; border: 0px; background: transparent; font-size: 20px; text-align: center; color:rgba(0,0,0,0.5); cursor: pointer; transition: all .2s; outline:none;} .my_loc_setting .scr_wrt_bx .scr_frm .btn button:hover {color:black; transition:all .2s;} .my_loc_setting .scr_wrt_bx .scr_frm .pick {display:inline-block; vertical-align:middle; width:80px; } .my_loc_setting .scr_wrt_bx .scr_frm .pick input {width: 100%; height: 50px; border: 0px; background: #591b7e; font-size: 12px; text-align: center; color: white; cursor: pointer; transition: all .2s;} .my_loc_setting .scr_wrt_bx .scr_frm .pick input:hover {background:#e00034;transition:all .2s;} /* 현재주소 / 위도 + 경도 */ .my_loc_setting .pos_info {position:absolute;top:15px; bottom:-15px; left:0; right:0; margin:auto;width:350px; height:0; z-index:22; color:white; } .my_loc_setting .pos_info .ang {position:absolute; top:0; left:0; right:0; margin:0 auto; width: 0px; height: 0px; border-bottom: 10px solid transparent; border-left: 10px solid rgba(0,0,0,0.6);transform:rotate(45deg);} .my_loc_setting .pos_info .here_pick {position:absolute; top:-25px; right:-25px; background:#f96700; color:white; font-size:12px; padding-top:15px; line-height:140%; width:60px; height:60px; border-radius:100%; text-align:center; transition:all .3s; cursor:pointer;} .my_loc_setting .pos_info .here_pick:hover {background:#f99500; transition:all .3s;} .my_loc_setting .pos_info .pi_data {display:inline-block; width:100%; background:rgba(0,0,0,0.7); padding:15px 20px; text-align:left; border-radius:10px; margin-top:5px; position:relative;} .my_loc_setting .pos_info .now_here {display:inline-block; vertical-align:middle; width:100%; color:white; font-size:11px; padding-bottom:5px; text-overflow: ellipsis; white-space: nowrap; /*overflow:hidden; box-shadow: -15px 15px 15px -15px rgba(0,0,0,0.1), 15px 15px 15px -15px rgba(0,0,0,0.1);*/} .my_loc_setting .pos_info ul.cross_data {display:inline-block; vertical-align:middle; width:100%; font-size:0;background:rgba(0,0,0,0.0);} .my_loc_setting .pos_info ul.cross_data li {float:left; width:50%;font-size:0; padding:0;} .my_loc_setting .pos_info ul.cross_data li.cs_msg {width:100%;font-size:11px; padding:5px 0 0 0; color:rgba(255,255,255,0.5);} .my_loc_setting .pos_info ul.cross_data li .cd_name {display:inline-block; vertical-align:middle; font-size:11px; font-family:tahoma; letter-spacing:0.05em; width:30px; color:rgba(255,255,255,0.7); line-height:100%;} .my_loc_setting .pos_info ul.cross_data li .cd_data {display:inline-block; vertical-align:middle; width:calc(100% - 30px); line-height:100%;} .my_loc_setting .pos_info ul.cross_data li .cd_data input {width:100%; height:12px; padding:0; border:0px solid #eeeeee; background:transparent; color:yellow; font-size:11px; font-family:tahoma; text-align:left; transition:all .2s;} /* 현재위치 / GPS 버튼 */ .my_loc_setting .ctrl_post {position:absolute;bottom:15px; right:15px; width:70px; text-align:center; z-index:22; } .my_loc_setting .gps_bx {display:inline-block; width:100%; height:70px; border-radius:100%; color:black; background:#fafafa; border:1px solid #eeeeee; box-shadow: -15px 15px 15px -15px rgba(0,0,0,0.1), 15px 15px 15px -15px rgba(0,0,0,0.1); padding:10px 0 0 0; cursor:pointer; transition:all .3s; margin-top:10px;} .my_loc_setting .gps_bx.here {} .my_loc_setting .gps_bx.reset {} .my_loc_setting .gps_bx:hover {background:white; border:1px solid #dddddd; transition:all .3s;} .my_loc_setting .gps_bx i {display:inline-block; vertical-align:middle; width:100%; font-size:25px; transition:all .3s; color:rgba(0,0,0,1);} .my_loc_setting .gps_bx .gb_name {display:inline-block; vertical-align:middle; width:100%; font-size:11px; padding-top:3px;transition:all .3s; color:rgba(0,0,0,0.7);} .my_loc_setting .gps_bx:hover i {color:black; transition:all .3s;} .my_loc_setting .gps_bx:hover .gb_name {color: color:rgba(0,0,0,1);; transition:all .3s;} /* 검색결과 */ .my_loc_setting .nw_scbx {position: absolute; bottom: 0px; width:300px; height:0; z-index: 23; } .my_loc_setting #id_search_res {position: absolute; bottom: 0px; width:100%; height:450px;background: white; display: none; padding: 35px; border:1px solid #eeeeee; border-width:1px 1px 0 0;} .my_loc_setting #id_search_res .s_box {display:inline-block; width:100%; line-height:20px; cursor:pointer; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; padding:2px 0; text-align:left;} .my_loc_setting #id_search_res .s_box strong { color:#3396ff; font-weight:bold; } .my_loc_setting #id_search_res .s_box span { color:rgba(0,0,0,0.5); font-weight:bold; } .my_loc_setting #id_search_res .s_box i { color:#3396ff; display:none;} .my_loc_setting #id_search_res .s_box:hover { color:#cc0000; } .my_loc_setting #id_search_res .s_box:hover strong { color:#ff0000; } .my_loc_setting #id_search_res .s_box:hover span { color:black; } .my_loc_setting #id_search_res .s_box:hover i { color:#ff0000; } .my_loc_setting #id_search_res hr { border-bottom:1px solid #eeeeee; border-top:0; } .my_loc_setting #sch_c_btn { position:absolute; top:-465px; right:-15px; width:30px; height:30px; font-size:13px;background:#333333; text-align:center; padding-top:8px;color:white; z-index:25;cursor:pointer; border-radius:100%;} .my_loc_setting #sch_c_btn:hover { background:#cc002f;} /* 레이어 공통 키프레임 */ @keyframes map_p { from { bottom:-100px; } to { bottom:0; } } /* 전체카테고리네비 */ #pop_cate_nav {position:fixed; display:none; top:0; left:0; background:rgba(0,0,0,0.6); width:100%; height:100%; z-index:88888; } #pop_cate_nav .close_bg {position:absolute; top:0; left:0; width:100%; height:100%; } #pop_cate_nav .pdp_wrp {position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; max-width:580px; width:100%; max-height:560px; height:100%; z-index:1;-webkit-animation-name: cate_p; -webkit-animation-duration: 0.2s; animation-name: cate_p; animation-duration: 0.2s; border-radius:25px; overflow:hidden; background:white; } #pop_cate_nav .p_head {position:relative; top:0; left:0; width:100%; height:80px; text-align:left; padding:0 35px; background:#ffffff; color:black; border-bottom:1px solid #eeeeee; font-size:0;} #pop_cate_nav .p_head .logo {display:inline-block; vertical-align:middle; width:65px; padding-bottom:10px;} #pop_cate_nav .p_head .logo img {width:100%;} #pop_cate_nav .p_head h2 {display:inline-block; vertical-align:middle; width:calc(100% - 65px); font-family:Noto Sans KR, sans-serif; font-weight:500; font-size:18px; letter-spacing:-0.05em; line-height:80px; padding-left:15px;} #pop_cate_nav .p_head h2 span {color:#00376b;} #pop_cate_nav .p_head p {display:inline-block; width:100%; font-size:12px; opacity:0.6;} #pop_cate_nav .close_lay {position:absolute; top:30px; right:35px; font-size:20px; color:black; transition:all .2s; cursor:pointer; outline:none;} #pop_cate_nav .close_lay:hover {transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); transition:all .2s;} #pop_cate_nav .p_wrp {position:relative; width:100%; height:calc(100% - 145px); background:#fafafa;} #pop_cate_nav ul.cate_menu {position:absolute; top:0; left:0; width:100%; height:100%; font-size:0; padding:32px;} #pop_cate_nav ul.cate_menu li {display:inline-block; vertical-align:top; width:calc(33.3333% - 6px); margin:3px; position:relative; height:calc(50% - 6px);} #pop_cate_nav ul.cate_menu li a {position:absolute; top:0; left::0; width:100%; height:100%; text-align:center; color:black; border-radius:10px; border:1px solid #eeeeee; background:#ffffff; transition:all .3s;display:block;} #pop_cate_nav ul.cate_menu li a:hover {background:#ffffff; border:1px solid #dddddd; box-shadow: -15px 15px 15px -15px rgba(0,0,0,0.1), 15px 15px 15px -15px rgba(0,0,0,0.1); transition:all .3s;} #pop_cate_nav ul.cate_menu li .icon {display:inline-block; width:100%; font-size:30px; padding:45px 0 10px 0; transition:all .3s;color:rgba(0,0,0,0.9);} #pop_cate_nav ul.cate_menu li .lk_name {display:inline-block; width:100%; font-size:13px;transition:all .3s; padding-top:10px; color:black;} #pop_cate_nav ul.cate_menu li .counter {display:inline-block; width:100%; font-family: 'Roboto', sans-serif; font-weight: 300;color:rgba(0,0,0,0.7); transition:all .3s; padding-top:8px; font-size:13px;} #pop_cate_nav ul.cate_menu li a:hover .icon {color:black; transition:all .3s;} #pop_cate_nav ul.cate_menu li a:hover .lk_name {color:black; transition:all .3s;} #pop_cate_nav ul.cate_menu li a:hover .counter {color:red; transition:all .3s;} #pop_cate_nav .p_etc {position:relative; width:100%; height:65px; line-height:65px; font-size:13px; border-top:1px solid #eeeeee; padding:0 35px; font-size:0;} #pop_cate_nav .p_etc i {display:inline-block; vertical-align:middle; width:30px; font-size:15px; text-align:center;} #pop_cate_nav .p_etc .loc {display:inline-block; vertical-align:middle; width:calc(100% - 30px); font-size:12px; color:black;} #pop_cate_nav .p_etc .loc:before {content:"위치 "; color:rgba(0,0,0,0.5);} #pop_cate_nav .p_etc .km {float:right; color:black;} #pop_cate_nav .p_etc .km:before {content:"반경 "; color:rgba(0,0,0,0.5);} @keyframes cate_p { from { bottom:-100px; } to { bottom:0; } } /* alert 대용 팝레이어 */ .event_pop_default {display: none; /*숨기기*/ position: fixed; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index:99999999;} .event_pop_default .ep_content {position: absolute; left: 0; top: 0; bottom:0; right:0; margin:auto; width: 300px; height: 200px; text-align: center; background: #333333; z-index:1;border-radius:15px; overflow:hidden;} .event_pop_default .ep_content p {position:relative; top:0; left:0; width:100%; height:calc(100% - 50px); font-family: 'GmSansM'; color:black; font-size:18px; line-height:110%; letter-spacing:-0.05em; background:white; padding:65px 10px 0 10px;} .event_pop_default .ep_content ul.btn_set {position:relative; top:0; left:0; width:100%; height:50px;} .event_pop_default .ep_content ul.btn_set li {position:absolute; top:0; width:50%; height:100%; transition:all .3s;} .event_pop_default .ep_content ul.btn_set li a {display:block; line-height:50px; color:white;} .event_pop_default .ep_content ul.btn_set li.ok {left:0; background:#e10000;} .event_pop_default .ep_content ul.btn_set li.cancel {right:0; background:#8d0027;} .event_pop_default .ep_content ul.btn_set li.ok:hover { background:#c10000; transition:all .3s;} .event_pop_default .ep_content ul.btn_set li.cancel:hover { background:#c10000; transition:all .3s;}