.change {position:fixed; top:0; left:0; width:100%; height:100%; background:var(--body_bg); z-index:10000000;transform:translateX(-100%); display:none;} .change.act {transform:translateX(0);} #wrapper {position:relative; width:100%; height:auto; min-height:calc(100% + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch;opacity:1; transition:all .5s;padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: calc(var(--side_wd) + env(safe-area-inset-left)); padding-right: env(safe-area-inset-right);} #wrapper:after {content:""; position:fixed; top:0; left:0; width:100%; height:env(safe-area-inset-top); background:var(--safe_area_bg); z-index:1000000;} #wrapper.wide {padding-left:0;} #wrapper.hidden { transition:all .3s;} #wrapper.move {/* animation-name: body_move; animation-duration:0.5s;animation-iteration-count: 1; animation-direction:normal;animation-fill-mode: forwards; */} #wrapper header {position:fixed; top:calc(0px + env(safe-area-inset-top)); right:0; width:calc(100% - var(--side_wd)); height: var(--hd_size); z-index:1000001;transform:translateY(0%); background:var(--topmenu-color); overflow:hidden; border-bottom: 1px solid var(--header_line);transition: all .3s; } #wrapper header.wide {padding:0;} #wrapper header.open {height:var(--bg_top_space); background:#ebf7ff; border-color:#d9e9f5;transition: all .3s; } #wrapper header.hid {transform:translateY(-100%); border-color: transparent; opacity:0;} #wrapper header .top_pos {position:relative; /*max-width:var(--default_wd);*/ width:100%; height:100%; left:0; right:0; margin:auto; font-size:0; z-index: 3; transition:all .3s; overflow:hidden; border-bottom:0px solid transparent;} /*#wrapper header .top_pos.open {height:400px; background:#ebf7ff; border-color:#d9e9f5;}*/ #wrapper header .top_pos .logo {position: absolute; transform: translate(-50%, -50%); top:50%; left: 50%; height: 100%; visibility: hidden; opacity:0; line-height:100%; } #wrapper header .top_pos .logo .pos {position: absolute; transform: translate(-50%, -50%); top:50%; left: 50%; display: inline-block; } #wrapper header .top_pos .logo .pos name {position: absolute; transform: translate(-50%, -50%); top:calc(50% + 5px); left: 50%; line-height: 100%; white-space:nowrap;letter-spacing:-0.05em; font-size:0;} #wrapper header .top_pos .logo .pos name st { vertical-align:middle; font-size: 50px; font-family: var(--GB); color: #fafafa; font-weight: normal; line-height: 100%; letter-spacing:-0.05em; width:auto; opacity:1; display:none;} #wrapper header .top_pos .logo .pos name st.c {color: var(--sym_color); opacity:1;display:inline-block !important;} #wrapper header .top_pos .logo .pos name em {position:absolute; top:-4px; right:-7px; font-family:var(--neo); font-weight:500; font-size:10px; color:var(--default_color3); font-style:normal; line-height:100%; letter-spacing:0.0em;} #wrapper header .top_pos .logo .pos name em no {font-weight:600; color:var(--default_color1);} #wrapper header .top_pos .logo .pos ul.logo_symbol_default {width:var(--logo_symbol_top); height:var(--logo_symbol_top);} #wrapper header .top_pos .logo .pos ul.logo_symbol_default li {width: var(--logo_symbol_top); opacity:0.3;} #wrapper header .top_pos .logo .pos ul.logo_symbol_default li em {top:-4px; right:0; font-size:7px; display:block;} #wrapper header .top_pos .logo .pos ul.logo_symbol_default li.t1 .line {background:var(--sym_color); } #wrapper header .top_pos .rest_icon {position:absolute; top:50%; right:15px; font-size:0; transform:translateY(-50%); display:none;} #wrapper header .top_pos .rest_icon > div, #wrapper header .top_pos .rest_icon > button {display:inline-block; vertical-align:middle; position:relative; cursor: pointer;} #wrapper header .top_pos .rest_icon > div {width:45px;} #wrapper header .top_pos .rest_icon > div:after {content:""; display:block; padding-top:100%;} #wrapper header .top_pos .rest_icon > div i, #wrapper header .top_pos .rest_icon > div img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } #wrapper header .top_pos .rest_icon > div.open_popup {display:none;} #wrapper header .top_pos .rest_icon > div.ri_home {display:none;} #wrapper header .top_pos .rest_icon > div.ri_bell {di splay:none;} #wrapper header .top_pos .rest_icon > div.ri_bell span {position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:2px; background:red;} #wrapper header .top_pos .rest_icon > button span {font-size:15px;} #wrapper header .top_pos .rest_icon > button.mode_btn { cursor: pointer; font-size:0; white-space:nowrap; border:0; background:transparent; width:45px; padding:0;} #wrapper header .top_pos .rest_icon > button.mode_btn:after {content:""; display:block; padding-top:100%;} #wrapper header .top_pos .rest_icon > button.mode_btn i, #wrapper header .top_pos .rest_icon > button.mode_btn span {display:inline-block; vertical-align:middle; line-height:110%;} #wrapper header .top_pos .rest_icon > button.mode_btn i {color:var(--mode_icon); position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } #wrapper header .top_pos .rest_icon > button.mode_btn span {font-size:11px; color:var(--mode_span); font-weight:500; width:calc(100% - 20px); display:none;} #wrapper header .top_pos .rest_icon i {font-size:27px !important; color:var(--top_icon);} #wrapper header .top_pos .rest_icon img {width:20px;} #wrapper header .pa_wd {position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width:calc(var(--default_wd)/2); width:100%;} #wrapper header .pa_wd .lastest {position:relative; padding-right:70px;} #wrapper header .pa_wd .kakao {position: absolute; top: 50%; right: 25px; transform: translateY(-50%); width:30px; font-size:0; background:#ffe500; text-align:left; border-radius:100%;} #wrapper header .pa_wd .kakao:after {content:""; display:block; padding-top:100%;} #wrapper header .pa_wd .kakao i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:22px; color:#000;} #wrapper header .pa_wd .kakao span {display:inline-block; vertical-align:middle; font-size:12px; color:#333; padding-left:10px; display:none;} #wrapper header .pa_wd .kakao_channel a {position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid red; opacity:0;} #wrapper header .pa_wd .kakao_channel a img {position:absolute; top:0; left:0; width:100%; height:100%;} #wrapper header button.tg_menu {position:absolute; top:0; left:0; width:var(--hd_size); border: 0; padding:0; margin: 0; cursor: pointer; background: transparent; display:none; } #wrapper header button.tg_menu:after {content:""; display: block; padding-top:100%;} #wrapper header button.tg_menu i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:var(--default_color1);transition:all .3s; } #wrapper header .icon {position:absolute; top:0; width:80px; border: 0; padding:0; margin: 0; cursor: pointer; background: transparent; transition:all .3s;} #wrapper header .icon:after {content:""; display: block; padding-top:100%;} #wrapper header .icon i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:#fff;transition:all .3s; } #wrapper header .icon.user {right:80;} #wrapper header .icon.cart {right:0; z-index:1;} #wrapper header .top_pos ul.lng_kind {display:inline-block; vertical-align:middle; position: relative;line-height: 100%; font-size:0; padding:0; white-space: normal; display:none;} #wrapper header .top_pos ul.lng_kind li {display:inline-block; vertical-align:middle; width:auto; line-height: 100%; text-align: center; padding: 0px 15px; border-right:1px solid rgba(0,0,0,0.1); cursor:pointer; position:relative;} #wrapper header .top_pos ul.lng_kind li:last-child {border:0;} #wrapper header .top_pos ul.lng_kind li a {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;} #wrapper header .top_pos ul.lng_kind li i, #wrapper header .top_pos ul.lng_kind li span {display:inline-block; width:100%; line-height: 100%;} #wrapper header .top_pos ul.lng_kind li i {font-size: 22px; color:#333; padding-bottom:7px; display:none;} #wrapper header .top_pos ul.lng_kind li span {font-size: 11px; font-weight: 800; color:#999; letter-spacing:0em; transition:all .3s; text-transform:uppercase; font-family:var(--neo) !important;} #wrapper header .top_pos ul.lng_kind li:hover span {color:#000;} #wrapper header .top_pos ul.lng_kind li.sel span, #wrapper header .top_pos ul.lng_kind li.sel:hover span {color:#7bafc7;font-weight: 900;} #wrapper header .top_pos ul.sns_kind {display:inline-block; vertical-align:middle; position: relative;line-height: 100%; font-size:0; padding:0; white-space: normal; margin-left:20px;} #wrapper header .top_pos ul.sns_kind li {display:inline-block; vertical-align:middle; width:auto; line-height: 100%; text-align: center; padding: 0px 5px; position:relative;} #wrapper header .top_pos ul.sns_kind li a {display:block; font-size:18px; color:#333; transition:all .3s;} #wrapper header .top_pos ul.sns_kind li a:hover {color:#000; } #wrapper header .top_pos ul.sns_kind li.facebook a {color:#333;} #wrapper header .top_pos ul.sns_kind li.instagram a {color:#333;} #wrapper header .top_pos ul.log_mem {display:inline-block; vertical-align:middle; position: relative;line-height: 100%; font-size:0; padding:0 0 0 0; white-space: normal;} #wrapper header .top_pos ul.log_mem.connect {padding:0 30px 0 0;} #wrapper header .top_pos ul.log_mem.connect {margin-top:10px; opacity: 0; transition: all .3s;} #wrapper header.open .top_pos ul.log_mem.connect {margin-top: 0; opacity: 1;} #wrapper header .top_pos ul.log_mem li {display:inline-block; vertical-align:middle; width:auto; line-height: 100%; text-align: center; padding: 0px 10px; border-right:1px solid rgba(0,0,0,0.05); cursor:pointer; position:relative;} #wrapper header .top_pos ul.log_mem li.my_class {width:100%; border:1px solid red;} #wrapper header .top_pos ul.log_mem li:last-child {border:0;} #wrapper header .top_pos ul.log_mem li a {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;} #wrapper header .top_pos ul.log_mem li i, #wrapper header .top_pos ul.log_mem li span {display:inline-block; width:100%; line-height: 100%;} #wrapper header .top_pos ul.log_mem li i {font-size: 22px; color:#333; padding-bottom:7px; display:none;} #wrapper header .top_pos ul.log_mem li span {font-size: 12px; font-weight: 600; color:#333; letter-spacing:-0.05em; transition:all .3s;} #wrapper header .top_pos ul.log_mem li:hover span {color:#000;} #wrapper header .top_pos ul.log_mem li.logout {position: absolute; top: -14px; right: -10px; width: 40px; height: 40px;} #wrapper header .top_pos ul.log_mem li.logout i {font-size: 20px; color:var(--sym_color); padding-bottom:0; display:inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #wrapper header .top_pos ul.log_mem li.logout:hover i {color: #000;} #wrapper header .top_pos ul.log_mem li.logout span {font-size: 12px; font-weight: 600; color:#333; letter-spacing:-0.05em; transition:all .3s; display: none;} #wrapper header .top_pos ul.log_mem li.logout:hover span {color:#000;} #wrapper header .my_class_btn {position: relative; font-size: 0; text-align: center; padding: 8px 20px;border-radius: 30px; margin: -8px 10px 15px 10px; background: #03b; /*margin: 40px 10px 0 10px;*/ transition: all .3s; opaci ty: 0; cursor: pointer; width:calc(100% - 20px);} #wrapper header.open .my_class_btn {/*margin: 27px 10px 0 10px; opacity: 1;*/} #wrapper header .my_class_btn i, #wrapper header .my_class_btn span {display: inline-block; vertical-align: middle; transition: all .2s;} #wrapper header .my_class_btn i {font-size: 15px; color: #fff; padding: 0 7px 0 0;} #wrapper header .my_class_btn span {font-size: 12px; color: #fff; font-weight: 700} #wrapper header .my_class_btn:hover {background:var(--sym_color) ;} #wrapper header .my_class_btn:hover {color: rgba(255,255,255,1)} #wrapper .contents {position:relative; min-height:100vh; height:auto; padding: var(--bg_top_space) 0 var(--bottom_padding) 0; transition:all .3s; font-size:15px; /*padding: var(--bg_top_space) var(--side_wd2) var(--bottom_padding) 0; background:var(--in_bg_color);*/ } #wrapper .contents .nav_sub_area {position:relative; width:100%; left:0; right:0; margin:auto; padding:0; transition:all .3s; overflow:hidden; z-index:10;} #wrapper .contents .q_area {position:relative; max-width:var(--default_wd); width:100%; left:0; right:0; margin:0 auto; padding:0 28px; font-size:0; border:0px solid #eee; } #wrapper .contents .q_area:before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:300%; height:1px; z-index:1; border-top:1px dashed #eee;} #wrapper .contents .q_area > i {display:inline-block; vertical-align:middle; font-size: 18px; color:#000; background: #fff; position: relative; z-index: 1;} #wrapper .contents .q_area > img {display:none;} #wrapper .contents .plus_area {position:absolute; top:90px; right:0; width:50%; height:60px; background:#f4f4f4;border-radius: 35px 0 0 35px; z-index: 100;/*-webkit-backdrop-filter: blur(50px); backdrop-filter: blur(5px);*/} #wrapper .contents .pa_wd {position: absolute; top: 50%; left: 0; transform: translateY(-50%); max-width:calc(var(--default_wd)/2); width:100%;} #wrapper .contents .pa_wd .lastest {position:relative;/* padding-right:70px;*/} #wrapper .contents .pa_wd .kakao {position: absolute; top: 50%; right: 25px; transform: translateY(-50%); width:30px; font-size:0; background:#ffe500; text-align:left; border-radius:100%; display:none;} #wrapper .contents .pa_wd .kakao:after {content:""; display:block; padding-top:100%;} #wrapper .contents .pa_wd .kakao i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:22px; color:#000;} #wrapper .contents .pa_wd .kakao span {display:inline-block; vertical-align:middle; font-size:12px; color:#333; padding-left:10px; display:none;} #wrapper .contents .pa_wd .kakao_channel a {position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid red; opacity:0;} #wrapper .contents .pa_wd .kakao_channel a img {position:absolute; top:0; left:0; width:100%; height:100%;} #wrapper .contents > ul.sub_cate1 {position: absolute; top: 245px; left: 0; right: 0; margin: auto; max-width:var(--max_top_bg); font-size: 0; width:100%; padding:0 30px; text-align:left; z-index:5;} #wrapper .contents > ul.sub_cate1 > li {display:inline-block; vertical-align: top; line-height: 100%; z-index: 1; position:relative;} #wrapper .contents > ul.sub_cate1 > li a {display:block; line-height: 100%; padding:0px 5px;} #wrapper .contents > ul.sub_cate1 > li a span {font-size: 14px;line-height: 100%; font-weight: 700; color:rgba(0,0,0,0.4); letter-spacing:0em; padding:7px 5px;transition:all .3s;} #wrapper .contents > ul.sub_cate1 > li a:hover span {color:rgba(0,0,0,0.8);} #wrapper .contents > ul.sub_cate1 > li:last-child a {border:0;} #wrapper .contents > ul.sub_cate1 > li.on > a span, #wrapper .contents > ul.sub_cate1 > li.on:hover > a span {color:var(--sym_color); border-bottom:1px dotted rgba(0,0,0,.1);} #wrapper ul.hot_place {position:fixed; top:0; left:var(--side_wd) ;max-width: 500px; width:calc(100% - var(--side_wd)); height: var(--latest_size); overflow: hidden; z-index: 100000;} #wrapper ul.hot_place:before {content:"NEW"; position:absolute; top:50%; left:25px ;width:35px; transform: translateY(-50%); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; background: red; border: 0px solid #ffeeee; line-height: 100%; color: #fff; text-align: center; padding: 4px 0; border-radius: 3px;} #wrapper ul.hot_place.move {transform:translateY(-100%);} #wrapper ul.hot_place li {position: absolute;top: 0; left: 0;width: 100%;height: var(--hd_size);transition: all 1s;transform: translateY(100%); opacity: 0;} #wrapper ul.hot_place li a {position: absolute;top: 0; left: 0;width: 100%;height:100%; font-size: 0; } #wrapper ul.hot_place li.active {transform: translateY(0%); opacity: 1;} #wrapper ul.hot_place li.prev {transform: translateY(-100%); opacity: 0;} #wrapper ul.hot_place li .pos {position: absolute;top: 50%; left: 0;width: 100%; transform: translateY(-50%); font-size: 0; padding: 0 0 0 70px; } #wrapper ul.hot_place li .pos h4, #wrapper ul.hot_place li .pos .heart, #wrapper ul.hot_place li .pos who, #wrapper ul.hot_place li .pos date {display: inline-block; vertical-align: middle; position: relative; } #wrapper ul.hot_place li .pos h4 {width:100%; font-size: 0;text-overflow: ellipsis; white-space: nowrap; overflow:hidden;} #wrapper ul.hot_place li .pos h4 span {display: inline-block; vertical-align: middle; line-height:100%;} #wrapper ul.hot_place li .pos h4 span.name {font-size:12px; font-weight: 600; color: var(--default_color1);} #wrapper ul.hot_place li .pos h4 span.addr {font-size:11px; font-weight: 500; color: var(--default_color4); padding-left:5px; border-left:1px solid var(--header_line); margin-left:5px;} #wrapper ul.hot_place li .pos .heart {font-size:0; padding:0 0 0 3px;} #wrapper ul.hot_place li .pos .heart i, #wrapper ul.hot_place li .pos .heart em {display:inline-block; vertical-align:middle; line-height:100%; font-style:normal;} #wrapper ul.hot_place li .pos .heart i {font-size:12px; color:red;} #wrapper ul.hot_place li .pos .heart em {font-size:10px; color:var(--default_color2); padding-left:2px;} #wrapper ul.hot_place li .pos who {width:90px; font-size: 11px; display: none;} #wrapper ul.hot_place li .pos date {display: none;} #wrapper footer {position:absolute; left: 0;bottom: 0; width:100%; height:var(--bottom_padding);/* background:#fafafa;*/ z-index:5; overflow: hidden; } #wrapper header.dark.open {background:rgba(0,0,0,0.9); border-color:transparent;} #wrapper header.dark.open .top_pos ul.c1_cate > li.on {background:rgba(0,21,45,0.8);} #wrapper header.dark.open .top_pos ul.c1_cate > li {border-color:rgba(255,255,255,0.0); background:rgba(0,0,0,0.5);} #wrapper header.dark .top_pos ul.c1_cate > li:hover {background:rgba(0,15,40,0.8);} #wrapper header.dark .top_pos ul.c1_cate > li > a > span {color:#eee; } #wrapper header.dark .top_pos ul.c1_cate > li.on > a > {color:#fff;} #wrapper header.dark .top_pos ul.c1_cate > li.on > a > span {border-color:rgba(255,255,255,0.1); color:#00c8ff;} #wrapper header.dark .top_pos ul.c1_cate > li ul.sub_cate1 > li a span {color:rgba(255,255,255,0.5); } #wrapper header.dark .top_pos ul.c1_cate > li ul.sub_cate1 > li a:hover span {color:rgba(255,255,255,0.8);} #wrapper header.dark .top_pos ul.c1_cate > li ul.sub_cate1 > li.on > a span, #wrapper header.dark .top_pos ul.c1_cate > li ul.sub_cate1 > li.on:hover > a span {color:#00c8ff; } #wrapper header.dark .top_pos ul.log_mem li {border:0; padding: 0 10px;} #wrapper header.dark .top_pos ul.log_mem li i {color:#eee; } #wrapper header.dark .top_pos ul.log_mem li span {color:rgba(255,255,255,0.4); font-size: 11px;} #wrapper header.dark .top_pos ul.log_mem li:hover span {color:rgba(255,255,255,0.8);} @media screen and (max-width: 1400px){ #wrapper .contents {padding: var(--bg_top_space) 0 var(--bottom_padding) 0;} } @media screen and (max-width: 1160px){ #wrapper {padding:calc(var(--hd_size) + 0px) calc(0px + env(safe-area-inset-right)) calc(var(--btm_fix_hd) + env(safe-area-inset-bottom)) calc(0px + env(safe-area-inset-left));} #wrapper header, #wrapper header.open {background:var(--body_bg); width: 100%; border-radius: 0; border-width:0; height:var(--hd_size); border-bottom:0/*;animation-name: list_join_frm; animation-duration:1.2s;animation-iteration-count: 1; animation-direction:normal;animation-fill-mode: forwards; opacity:0; transition:all .1s;transform: translateY(20px);*/} #wrapper header .hd_bg {display:none;} #wrapper header .top_pos, #wrapper header .top_pos:hover {height:100%;} #wrapper header .top_pos .logo { visibility: visible; opacity:1; } #wrapper header .top_pos .rest_icon {top:50%; transform:translateY(-50%); } #wrapper header .top_pos .rest_icon > div.app {display:none;} #wrapper header button.tg_menu {width:80px; display:block;} #wrapper header button.tg_menu i {} #wrapper header .icon i {color:#000;} #wrapper .contents {min-height:auto; padding: 0 0 0 0;} #wrapper .contents .nav_sub_area {display:none;} #wrapper .contents .plus_area {position:fixed; top:0; width:80px; height:80px; background:none;border-radius: 0; transform:translateY(0); transition: all .3s; z-index:102;} #wrapper .contents .plus_area.hid {transform:translateY(-100%);} #wrapper .contents .pa_wd {left:50%; transform: translate(-50%, -50%); max-width:auto; width:auto;} #wrapper .contents .pa_wd .lastest {display:none;} #wrapper .contents .pa_wd .kakao {left:50%; right:initial; transform: translate(-50%, -50%); width:35px; font-size:0; background:#ffe500; text-align:left; border-radius:100%;} #wrapper .contents > ul.sub_cate1 {display:none;} #wrapper ul.hot_place {position: relative; top:0; left:0; /*margin-top: var(--hd_size);*/ max-width:100%; width:100%;background:var(--hot_bg); border-radius:0;} #wrapper ul.hot_place:before {left:20px ;} #wrapper ul.hot_place.move {transform:translateY(0%);} #wrapper ul.hot_place li {height: 45px;} #wrapper footer {} } @media screen and (max-width: 900px){ } @media screen and (max-width: 650px){ #wrapper.hidden {} #wrapper header, #wrapper header.open {height:var(--hd_size); } #wrapper header.hid {transform:translateY(0); opacity:1;} #wrapper:after {content:""; position:fixed; top:calc(0px + env(safe-area-inset-top)); left:0; width:100%; height:100px; transform:translateY(-100%); background:var(--body_bg); z-index:100000;} #wrapper header .top_pos .logo .pos name {top:calc(50% + 1px);} #wrapper header .top_pos .logo .pos name st.c {font-size: 30px;} #wrapper header .top_pos .logo .pos name em {top:-6px; right:-6px; font-size:8px; color:#999;} #wrapper header .top_pos ul.dt_text li {height: 23px;} #wrapper header .top_pos ul.dt_text li.t1 {border-width: 9px 9px 0 0;width: 23px; } #wrapper header .top_pos ul.dt_text li em {position:absolute; top:-21px; left:20px; font-size:8px;} #wrapper header .top_pos .rest_icon {right:8px;} #wrapper header .top_pos .rest_icon > div {width:35px;} #wrapper header .top_pos .rest_icon i {font-size:22px !important;} #wrapper header .top_pos .rest_icon > button.mode_btn { width:35px;} #wrapper header button.tg_menu {width:var(--hd_size); } #wrapper header button.tg_menu i {font-size:30px;} #wrapper header .icon {width:var(--hd_size);} #wrapper header .icon i {font-size:20px;} #wrapper header .icon.user {right:35px;} #wrapper header .icon.cart {right:0;} #wrapper .contents {} #wrapper .contents .nav_sub_area {padding:25px 22px 0 22px;} #wrapper .contents .plus_area { width:var(--hd_size); height:var(--hd_size); } #wrapper .contents .pa_wd .kakao {width:25px; } #wrapper .contents .pa_wd .kakao i {font-size:18px;} #wrapper ul.hot_place:before {left:15px ;width:27px; padding: 3px 0; font-size: 8px;} #wrapper ul.hot_place li .pos {padding: 0 0 0 50px; } #wrapper ul.hot_place li .pos h4 span.name {font-size:11px;} #wrapper ul.hot_place li .pos h4 span.addr {font-size:10px; padding-left:3px;} } /**/ /* ul.c1_cate > li.home > a i:before {content:"leaderboard";} ul.c1_cate > li.ggi > a i:before {content:"location_on";} ul.c1_cate > li.talk > a i:before {content:"communities";} ul.c1_cate > li.chart > a i:before {content:"bar_chart_4_bars";} ul.c1_cate > li.notice > a i:before {content:"crossword";} ul.c1_cate > li.faq > a i:before {content:"help";} ul.c1_cate > li.on > a i:before {font-variation-settings: 'wght' 400, 'FILL' 1;} */ /**/ .title_area {position:sticky; top:calc(0px + env(safe-area-inset-top)); left:0;background:var(--body_bg); height:var(--title_hsize); z-index:1000001; border-bottom:1px solid transparent; border-width:0 0 0 0;} .title_area.stop {/*background:var(--body_bg_title);border-color:var(--header_line);*/} .title_area.stop:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:yellow; transform:translateY(-100%); transition:all .3s; display:none;} .title_area h2 {position:absolute; top:50%; left:0; transform:translateY(-50%); font-size:25px;padding:0 30px; font-weight:600; color:var(--default_color1);} .title_area h2 ul.logo_symbol_default {width:calc(calc(var(--logo_symbol_title) * 2) + 6px ); height:var(--logo_symbol_title);} .title_area h2 ul.logo_symbol_default li {width: var(--logo_symbol_title); opacity:0.15;} .title_area h2 ul.logo_symbol_default li em {top:-4px; right:0; font-size:10px; } @media screen and (max-width: 1400px){ .title_area { border-width:0 0 1px 0;} } @media screen and (max-width: 1160px){ .title_area {animation-name: slide_up_default; animation-duration:0.8s;animation-iteration-count: 1; animation-direction:normal;animation-fill-mode: forwards; opacity:0; transition:all .1s;} .title_area.stop {background:var(--body_bg);} .title_area h2 {font-size:20px;padding:30px 30px 30px 30px;} .title_area h2 ul.logo_symbol_default {animation-name: default_fadein; animation-duration:0.8s;animation-iteration-count: 1; animation-direction:normal;animation-fill-mode: forwards; opacity:0; transition:all .1s;} } @media screen and (max-width: 650px){ .title_area h2 {font-size:15px;padding:0 20px;} .title_area h2 ul.logo_symbol_default {width:calc(calc(var(--logo_symbol_title) * 2) + 6px ); margin-top: 4px;} } /**/ .search_content {position: absolute; top: 0; right: 0; width:90%; height: 100%; transform: translateX(5%); visibility: hidden; opacity: 0;} .search_content.show {transform: translateX(0); opacity: 1; visibility: visible;width:100%;} .search_content i.back {position:absolute; top:0%; left:0%; width:var(--hd_size); height: var(--hd_size); line-height: var(--hd_size); text-align: center; font-size:35px; color:var(--top_icon);transition:all .3s; cursor: pointer; z-index: 1;} .search_content i.back:hover {color: var(--sym_color);} .search_content input {width:100%; height: var(--hd_size); padding: 0 calc(var(--hd_size) + 5px); border:0; font-size:18px; text-align:left; transition:all .2s; color:var(--search_color);; background: var(--body_bg);font-family: var(--neo); font-weight:600; } .search_content input:focus {outline:none; border:0; background: var(--body_bg);} .search_content input::placeholder {color: #ddd; font-size:11px; font-family: var(--neo); font-weight:300; } .search_content button {outline:none; border-color:red;} .search_content button.search {position:absolute; top:0; right:0; width:var(--hd_size); border: 0; padding:0; margin: 0; cursor: pointer; background: transparent;} .search_content button.search:after {content:""; display: block; padding-top:100%;} .search_content button.search i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:var(--top_icon);;transition:all .3s; } @media screen and (max-width: 650px){ .search_content i.back {font-size:25px;} .search_content input {font-size:12px;} .search_content input:focus {} .search_content button.search i {font-size:25px; } } /**/ .btm_wrap {position:relative; font-size:0; top: 50%; transform: translateY(-50%); text-align:center; padding: 0 40px 0 40px; line-height: 100%;} .btm_wrap .logo {position: relative; top:0; left:0; transform:none; width:auto; margin-bottom: 15px; border-radius:0;} .btm_wrap .logo:before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .btm_wrap .logo span {position: relative; top: 0; left: 0; transform:none; font-size: 18px; font-family: var(--GB); color: #000; font-weight: normal; line-height: 100%; white-space: nowrap;} .btm_wrap .logo span .hd {display: none;} .btm_wrap ul.rule_nav {display:inline-block; vertical-align:middle; position: relative;line-height: 100%; font-size:0; padding:0px 0 10px 0; white-space: normal;} .btm_wrap ul.rule_nav li {display:inline-block; vertical-align:middle; width:auto; line-height: 100%; text-align: center; position:relative;padding: 0; margin:0 0 0 10px; } .btm_wrap ul.rule_nav li:first-child {margin-left:0;} .btm_wrap ul.rule_nav li a {display:block; } .btm_wrap ul.rule_nav li, .btm_wrap ul.rule_nav li a {font-size: 11px; font-weight: 600; color:#333; letter-spacing:-0.05em; transition:all .3s; line-height:100%; cursor:pointer;} .btm_wrap ul.rule_nav li:last-child {border:0;} .btm_wrap ul.rule_nav li:hover a {color:#eee;} .btm_wrap .info {display:inline-block; vertical-align:top; width:100%; font-size:0; line-height: 100%; padding-bottom:15px; } .btm_wrap .info span {display:inline-block; vertical-align:middle; padding:0 0 0 10px; font-size:10px; color:#333; font-weight:600; line-height:140%; letter-spacing:0; font-family:var(--neo) !important;} .btm_wrap .info span a {color:#aaa;} .btm_wrap .info span i {display:inline-block; vertical-align:middle; font-weight:bold; padding-right:5px;} .btm_wrap .info span.addr i {display:none;} .btm_wrap .info span em {display:inline-block; padding-right:5px; font-style:normal; color:#999; font-weight:700;} .btm_wrap .copy {position:relative; font-size:9px; color:#999; font-family:var(--neo) !important; line-height: 100%;} .btm_wrap .copy span {color:#555; display:inline-block; padding:0 5px; font-weight:800;} .btm_wrap .logo, .btm_wrap ul.rule_nav, .btm_wrap .info {display:none; } @media screen and (max-width: 650px){ .btm_wrap {padding: 0 25px;} .btm_wrap .logo {position: relative; top:0; left:0; transform:none; width:auto; margin-bottom: 15px; border-radius:0;} .btm_wrap .logo:before {display: none;} .btm_wrap .logo:after {display: none;} .btm_wrap .logo span {position: relative; top: 0; left: 0; transform:none; font-size: 20px; } .btm_wrap .logo span .hd {display: none;} .btm_wrap ul.rule_nav li {margin:0 5px; } .btm_wrap ul.rule_nav li, .btm_wrap ul.rule_nav li a {font-size: 10px;} } /**/ .pop_layer_box {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); visibility: hidden; transition:all .5s; opacity:0;z-index:11111111;} .pop_layer_box.show {visibility: visible; transition:all .5s; opacity:1;} .pop_layer_box .plb_pos {position:absolute; left:50%; top:calc(50% + 15px);transform:translate(-50%, -50%); max-width:600px; width:100%; max-height:800px; height:100%; text-align:center; color:black; border-radius:10px; overflow:hidden;opacity:0;transition: all .3s;} .pop_layer_box.show .plb_pos {top:50%; opacity:1;} .pop_layer_box .plb_pos .pp_head {position:relative; height:calc(50px + env(safe-area-inset-top)); line-height:50px; text-align:left; letter-spacing:-0.05em; z-index:1; padding-left:20px; background:var(--ax_pop_head); } .pop_layer_box .plb_pos .pp_head h2 {position:absolute; bottom:0; left:0px; font-size:16px; color:var(--default_color1); font-weight:700; height:50px; line-height:50px; text-align:left; letter-spacing:-0.05em; z-index:1; padding-left:20px; width: 100%;} .pop_layer_box .plb_pos .pp_head h2 span {color:#00365b;} .pop_layer_box .plb_pos .pp_head h2 who {display:inline-block; padding:0 5px 0 0 ;} .pop_layer_box .plb_pos .pp_head i {position: absolute; bottom: 0; right: 0;width: 50px;height: 50px;line-height: 50px;text-align: center;font-size: 25px;color: var(--default_color1);transition: all .3s;z-index: 1;cursor: pointer; } .pop_layer_box .plb_pos .pp_head i:before {content:"close";} .pop_layer_box .plb_pos .con {position:absolute; top:calc(env(safe-area-inset-top) + 50px); left:0; width:100%; height:calc(100% - calc(calc(env(safe-area-inset-top) + env(safe-area-inset-bottom)) + 120px)); background:var(--place_bg); overflow-y:overlay; padding:30px; } .pop_layer_box .plb_pos .con.full {height:calc(100% - calc(env(safe-area-inset-top) + 50px)); } .pop_layer_box .plb_pos .con.no_pad {padding:20px;} .pop_layer_box .plb_pos .con:: {-ms-overflow-style: none;} .pop_layer_box .plb_pos .con::-webkit-scrollbar {background: transparent; width:5px; height:5px; border-radius:15px;} .pop_layer_box .plb_pos .con::-webkit-scrollbar-thumb {background:rgba(0,0,0,0); border-radius:15px; transition:all .3s;} .pop_layer_box .plb_pos .con:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); transition:all .3s;} .pop_layer_box .plb_pos .unjoin {position:absolute; top:25px; right:25px; font-size:0; white-space:nowrap; z-index:1; cursor:pointer;} .pop_layer_box .plb_pos .unjoin i, .pop_layer_box .plb_pos .unjoin span {display:inline-block; vertical-align:middle; position:relative; width:auto; height:auto; line-height:100%;} .pop_layer_box .plb_pos .unjoin i {font-size:15px; padding-right:5px; color:var(--default_color2); display:none;} .pop_layer_box .plb_pos .unjoin i:before {content:"east";} .pop_layer_box .plb_pos .unjoin span {font-size:11px; color:var(--default_color2); padding:5px 3px;} .pop_layer_box .plb_pos .unjoin span:after {content:""; position:absolute; bottom:0; left:0; width:100%; border-bottom:1px dashed var(--default_color4); opacity:0.5;} .pop_layer_box .plb_pos ul.pop_view {position:relative; font-size:0;} .pop_layer_box .plb_pos ul.pop_view.h_full {height:100%;} .pop_layer_box .plb_pos ul.pop_view > li {display:inline-block; vertical-align:middle; position:relative; width:100%; margin-bottom:5px; } .pop_layer_box .plb_pos ul.pop_view > li.half {width:50%;} .pop_layer_box .plb_pos ul.pop_view > li:last-child {margin:0;} .pop_layer_box .plb_pos ul.pop_view > li.title {font-size:14px; color:var(--default_color1); margin-top:20px; font-weight:600; text-align:left;} .pop_layer_box .plb_pos ul.pop_view > li.title:first-child {margin-top:0;} .pop_layer_box .plb_pos ul.pop_view > li.title post {position:absolute; bottom:5px; right:0; font-size:12px; font-weight:normal; color:#333; font-family:var(--bar); line-height:100%;} .pop_layer_box .plb_pos ul.pop_view > li.title mg {display:inline-block; width:100%; font-size:11px; font-weight:500; color:var(--default_color1); line-height:100%; opacity:0.6; padding:3px 0 10px 0;} .pop_layer_box .plb_pos ul.pop_view > li.title.line {border-top:1px dashed var(--header_line); margin-top:20px; padding-top:25px;} .pop_layer_box .plb_pos ul.pop_view > li.ment {font-size:13px; font-weight:600; color:#333; padding:5px 2px;} .pop_layer_box .plb_pos ul.pop_view > li.photo {margin-top:8px;} .pop_layer_box .plb_pos ul.pop_view > li .pic, .pop_layer_box .plb_pos ul.pop_view > li .edit {display:inline-block; vertical-align:middle; position:relative; } .pop_layer_box .plb_pos ul.pop_view > li .pic {width:100px; background-size:cover !important; background-position:center center !important;} .pop_layer_box .plb_pos ul.pop_view > li .pic:before {content: "\e9f2"; font-family: xeicon !important; display: inline-block; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; position: absolute; top: 50%; left: 50%; font-size: 100px; line-height: 100%; transform: translate(-50%, -50%); color: var(--default_color1); opacity: 0.2;} .pop_layer_box .plb_pos ul.pop_view > li .pic:after {content:""; display:block; padding-top:100%; } .pop_layer_box .plb_pos ul.pop_view > li .pic .us_p {position:absolute; top:0; left:0;width:100%; height:100%; background-size:cover !important; background-position:center center !important; z-index:1;border-radius:100%; overflow:hidden;} .pop_layer_box .plb_pos ul.pop_view > li .pic i {position:absolute; top:-10px; right:-10px;line-height:100%; color:red; z-index:2; font-size:20px; cursor:pointer;} .pop_layer_box .plb_pos ul.pop_view > li .edit {width:calc(100% - 100px); padding:0px 0 0 20px; text-align:left;} .pop_layer_box .plb_pos ul.pop_view > li .edit .btn {position:relative;} .pop_layer_box .plb_pos ul.pop_view > li .edit .btn label {position:relative; cursor: pointer; padding: 5px 10px; background: #3899cb; color: white; border-radius: 5px; display:inline-block; font-size:12px;} .pop_layer_box .plb_pos ul.pop_view > li .edit .btn label.del_user {background:red; margin-left:5px;} .pop_layer_box .plb_pos ul.pop_view > li .edit p {position:relative; font-size:11px; color:var(--default_color1); opacity:0.5; padding:10px 0 0 0; font-weight:500; line-height:135%;} .pop_layer_box .plb_pos ul.pop_view > li > span {position:absolute; top:50%; left:10px; transform:translateY(-50%); font-size:12px; font-weight:700; line-height:100%; color:var(--default_color4); z-index:1;} .pop_layer_box .plb_pos ul.pop_view > li > input {padding:0 10px 0 100px; height:45px; font-weight:700; border: 1px solid var(--bdr_write_out); background: var(--bdr_write_bg); font-size: 12px; text-align: left; transition: all .2s; color: var(--default_color2); border-radius: 7px; width:100%;} .pop_layer_box .plb_pos ul.pop_view > li > select, .pop_layer_box .plb_pos ul.pop_view > li > select option {padding:0 10px 0 10px; font-size:12px; height:45px;} .pop_layer_box .plb_pos ul.pop_view > li > em {position:absolute; top:50%; right:10px; transform:translateY(-50%); font-size:11px; color:#fff; line-height:100%; font-style:normal; background:#333; padding:5px 10px; border-radius:20px; font-weight:normal; font-family:var(--bar); cursor:pointer;} .pop_layer_box .plb_pos ul.pop_view > li > etc {position:absolute; top:50%; right:15px; transform:translateY(-50%); font-size:11px; color:#333; line-height:100%; font-style:normal; font-weight:normal; font-family:var(--bar);} .pop_layer_box .plb_pos ul.pop_view > li ul.time_list li {margin:2px;} .pop_layer_box .plb_pos ul.pop_view > li ul.detail {position:relative;} .pop_layer_box .plb_pos ul.pop_view > li ul.detail li {position:relative; font-size:0; padding:5px 3px; border-bottom:1px dashed #ddd;} .pop_layer_box .plb_pos ul.pop_view > li ul.detail li span {display:inline-block; vertical-align:top; position:relative; font-size:12px;} .pop_layer_box .plb_pos ul.pop_view > li ul.detail li span.tit {width:80px; } .pop_layer_box .plb_pos ul.pop_view > li ul.detail li span.tit:before {content:"ㆍ";} .pop_layer_box .plb_pos ul.pop_view > li ul.detail li span.txt {width:calc(100% - 80px); font-weight:700;} .pop_layer_box .plb_pos ul.pop_view > li ul.match_info {position:relative; font-size:0;} .pop_layer_box .plb_pos ul.pop_view > li ul.match_info li {display:inline-block; vertical-align:top; width:25%; position:relative; font-size:0; } .pop_layer_box .plb_pos ul.pop_view > li ul.match_info li span {display:inline-block; vertical-align:top; position:relative; width:100%;} .pop_layer_box .plb_pos ul.pop_view > li ul.match_info li span.tit {font-size:11px;} .pop_layer_box .plb_pos ul.pop_view > li ul.match_info li span.txt {font-size:13px; font-weight:700; letter-spacing:-0.05em; line-height:100%; padding-top:2px; color:#000;} .pop_layer_box .plb_pos ul.pop_view > li ul.match_info li span.txt em {display:inline-block; width:100%;font-weight:normal; font-family:tahoma; font-style:normal; font-size:11px; color:#777; padding-top:3px;} .pop_layer_box .plb_pos textarea {width:100%; height:250px; padding:20px; border: 1px solid var(--bdr_write_out); background: var(--bdr_write_bg); font-size: 12px; text-align: left; transition: all .2s; color: var(--default_color2); border-radius:7px;overflow-y:overlay; line-height:180%;} .pop_layer_box .plb_pos textarea:focus {outline:none; background:var(--bdr_write_bg); transition:all .2s;} .pop_layer_box .plb_pos textarea:: {-ms-overflow-style: none;} .pop_layer_box .plb_pos textarea::-webkit-scrollbar {background: transparent; width:5px; height:5px; border-radius:15px;} .pop_layer_box .plb_pos textarea::-webkit-scrollbar-thumb {background:rgba(0,0,0,0); border-radius:15px; transition:all .3s;} .pop_layer_box .plb_pos textarea:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); transition:all .3s;} .pop_layer_box .plb_pos textarea.h_full {height:100%; } .pop_layer_box .plb_pos ul.pop_btn {position:absolute; bottom:0; width:100%; display:flex; height:calc(70px + env(safe-area-inset-bottom)); background:var(--sym_color_hover);} .pop_layer_box .plb_pos ul.pop_btn.choice {} .pop_layer_box .plb_pos ul.pop_btn.choice:after {content:""; position:absolute; top:0; left:0; width:50%; height:100%; background:rgba(0,0,0,0.1);} .pop_layer_box .plb_pos ul.pop_btn li {flex:1; height: 70px; z-index:1; position:relative;} .pop_layer_box .plb_pos ul.pop_btn li input, .pop_layer_box .plb_pos ul.pop_btn li a {max-width:100%; width:100%; height:100%; text-align:center; cursor:pointer;font-size:15px; font-weight:700; color:#fff; border:0; margin:0; border-radius:0; font-family:var(--neo); background: transparent;} .pop_layer_box .plb_pos ul.pop_btn li input.del {background:#005ca1;} .pop_layer_box .plb_pos ul.pop_btn li a {position:absolute; top:0; left:0;} .pop_layer_box .plb_pos ul.pop_btn li a span {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} .pop_layer_box .plb_pos ul.cc_btn {position:relative; display:flex; justify-content: center; margin-top:35px;} .pop_layer_box .plb_pos ul.cc_btn li {flex:1; margin:0 5px; max-width:150px;} .pop_layer_box .plb_pos ul.cc_btn li a {display:block; text-align:center; font-size:13px; font-weight:600; color:#333; border-radius:35px; border:1px solid #eee; padding:12px 0; transition:all .2s;} .pop_layer_box .plb_pos ul.cc_btn li.login a {background:#006ad7; border-color:#006ad7; color:#fff;} .pop_layer_box .plb_pos ul.cc_btn li.login:hover a {background:#0057b1; border-color:#0057b1;} .pop_layer_box .plb_pos ul.cc_btn li.join a {background:#fafafa; color:#000;} .pop_layer_box .plb_pos ul.cc_btn li.join:hover a {background:#fff; border-color:#f5f3f3; } .pop_layer_box .plb_pos .message {position:relative;font-size:13px; font-weight:500; color:#333; line-height:150%;} .pop_layer_box .rule_box {display:inline-block; width:100%; text-align:left;font-size:12px; line-height: 180%; color:var(--default_color1); font-weight:300;} .pop_layer_box .rule_box h2 {display:inline-block; width:100%; font-size:13px;font-weight:500; padding:15px 0; color:var(--default_color1);} .pop_layer_box .rule_box p {display:inline-block; width:100%; font-size:12px; line-height: 180%; color:var(--default_color1); opacity:0.6; font-weight:300;} @media screen and (max-width: 1160px) { .pop_layer_box {transform:translateX(100%); transition:all .4s; opacity:0; background:var(--place_head) !important;} .pop_layer_box.show {transform:translateX(0);transition:all .4s;} .pop_layer_box .plb_pos {top:50%; max-width:100%; width:100%; max-height:100%; height:100%; border-radius:0px; opacity:1;} .pop_layer_box .plb_pos .pp_head i:before {content:"east";} } @media screen and (max-width: 650px) { .pop_layer_box .plb_pos .pp_head h2 {font-size:14px !important;} .pop_layer_box .plb_pos .con {padding:25px; } .pop_layer_box .plb_pos .con.full {padding:20px; } .pop_layer_box .plb_pos .con.no_pad {padding:10px; } .pop_layer_box .rule_box {font-size:10px; line-height:150%;} .pop_layer_box .rule_box h2 {font-size:11px; padding:15px 0 5px 0;} .pop_layer_box .rule_box p {font-size:10px; line-height:150%;} } /**/ .write_notice_box {position:relative; text-align:left; padding:15px 5px 0px 5px;} /**/ .nav_sec {position:fixed; bottom:0; left:0; width:100%; height:calc(var(--btm_fix_hd) + env(safe-area-inset-bottom)); background:var(--btm_nav_bg); border-top:1px solid var(--btm_nav_line); font-size:15px; color:#fff; z-index:10000000;padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: all .3s;} .nav_sec ul.c1_cate {position: relative; line-height: 100%; padding:0; display:flex;} .nav_sec ul.c1_cate > li {flex:1; line-height: 100%; text-align:center; opacity:1; position:relative;} .nav_sec ul.c1_cate > li.on {} .nav_sec ul.c1_cate > li.on:after {content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:3px; height:3px; border-radius:100%; background:var(--sym_color); display:none;/*border-top:5px solid red; border-left:5px solid transparent; border-right:5px solid transparent;*/} .nav_sec ul.c1_cate > li > a {display:block; position:relative; padding:16px 0; z-index:2;} .nav_sec ul.c1_cate > li > a i, .nav_sec ul.c1_cate > li > a span {position:relative; display:inline-block; width:100%;line-height: 100%;} .nav_sec ul.c1_cate > li > a i {font-size:18px; color:var(--cate_link);} .nav_sec ul.c1_cate > li > a span {font-size: 10px; font-weight: 500; padding: 8px 0px 0 0; color:var(--cate_link_name); letter-spacing:-0.05em;} .nav_sec ul.c1_cate > li > a em {display:none;} .nav_sec ul.c1_cate > li.on > a i {color:var(--sym_color)/*var(--cate_link_on_icon)*/; font-weight: 900; } .nav_sec ul.c1_cate > li.on > a span {color:var(--default_color1);font-weight: 500; } .nav_sec ul.c1_cate > li > a span.main {} .nav_sec ul.c1_cate > li > a span.main smtx {display:none;} .nav_sec ul.c1_cate > li > a span.main ul.logo_symbol_default {width:calc(calc(var(--logo_symbol_btm) * 2) + 4px ); height:var(--logo_symbol_btm);} .nav_sec ul.c1_cate > li > a span.main ul.logo_symbol_default li {width: var(--logo_symbol_btm); opacity:1;} .nav_sec ul.c1_cate > li > a span.main ul.logo_symbol_default li em {top:-4px; right:0; font-size:10px; } .nav_sec ul.c1_cate > li > a span.main ul.logo_symbol_default li .line {background:var(--logo_bg_nav_off); } .nav_sec ul.c1_cate > li > a span.main ul.logo_symbol_default li.t1 .line {background:var(--logo_bg_nav); } .nav_sec ul.c1_cate > li > a span.main ul.logo_symbol_default li.t3 .line.top {background:transparent !important; } .nav_sec ul.c1_cate > li.on > a span.main ul.logo_symbol_default li {opacity:1;} .nav_sec ul.c1_cate > li.on > a span.main ul.logo_symbol_default li .line {background:var(--logo_bg_nav_on); } .nav_sec ul.c1_cate > li.on > a span.main ul.logo_symbol_default li.t1 .line {background:var(--sym_color); } @media screen and (max-width: 1160px){ .nav_sec {transform: translateY(100%); animation-name: btm_nav_act; animation-duration:0.5s;animation-iteration-count: 1; animation-direction:normal;animation-fill-mode: forwards; transition:all .1s;-webkit-animation-delay: 0s; animation-delay: 0s; opa city:0;/*visibility: hidden;opacity:0;*/} .nav_sec ul.c1_cate {} .nav_sec ul.c1_cate > li {animation-name: slide_up_default; animation-duration:0.35s;animation-iteration-count: 1; animation-direction:normal;animation-fill-mode: forwards; transition:all .1s;-webkit-animation-delay: 0.5s; animation-delay: 0.5s; opacity:0;} .nav_sec ul.c1_cate > li:nth-child(10n+1) {-webkit-animation-delay: 0.3s; animation-delay: 0.2s;} .nav_sec ul.c1_cate > li:nth-child(10n+2) {-webkit-animation-delay: 0.4s; animation-delay: 0.3s;} .nav_sec ul.c1_cate > li:nth-child(10n+3) {-webkit-animation-delay: 0.5s; animation-delay: 0.4s;} .nav_sec ul.c1_cate > li:nth-child(10n+4) {-webkit-animation-delay: 0.6s; animation-delay: 0.5s;} .nav_sec ul.c1_cate > li:nth-child(10n+5) {-webkit-animation-delay: 0.7s; animation-delay: 0.6s;} .nav_sec ul.c1_cate > li:nth-child(10n+6) {-webkit-animation-delay: 0.8s; animation-delay: 0.7s;} .nav_sec ul.c1_cate > li:nth-child(10n+7) {-webkit-animation-delay: 0.9s; animation-delay: 0.8s;} .nav_sec ul.c1_cate > li:nth-child(10n+8) {-webkit-animation-delay: 1.0s; animation-delay: 0.9s;} .nav_sec ul.c1_cate > li:nth-child(10n+9) {-webkit-animation-delay: 1.1s; animation-delay: 1.0s;} .nav_sec ul.c1_cate > li:nth-child(10n+10) {-webkit-animation-delay: 1.2s; animation-delay: 1.1s;} }