layout.css 문의드려요. 도와주세욥!
본문
http://mowoolim.com/?device=mobile
메뉴에 position: fixed; 로 설정했더니,
첫번째 비쥬얼이 메뉴에 가려져서 짤려보입니다 ㅠ
아무리 해봐도 잘 되네요;; 어디를 만져야하는지 모르겠습니다;;
30분동안 해봤는데 못찾았네요.
고수님들 알려주세요~~
@charset "utf-8";
#wrapper {position:relative;overflow:hidden;width:100%;}
/* 전체 메뉴 버튼 */
.btn-allmenu {float:right; position:relative; width:40px; height:40px; border:none; background:transparent; cursor:pointer; outline:none}
.btn-allmenu span {position:absolute; left:50%; display:block; width:30px; height:3px; margin-left:-15px; background:#fff; transition:all .25s ease-in}
.btn-allmenu span.line1 {top:10px}
.btn-allmenu span.line2 {top:18px}
.btn-allmenu span.line3 {top:26px}
/* 전체 메뉴 버튼 */
/* 전체 메뉴 */
#m_menu_toggle {display: block;position: absolute;top: 5px;right: 10px;cursor: pointer;z-index: 25;}
.mobile_menu {position: absolute;top: 0px;right: -80%;width: 80%;height: 100%;background:#000;}
.mobile_right_menu {}
.moblie_right_menu_body {position: relative;top: 0;left: 0;}
.m_menu {margin-top:81px;}
.m_menu>li {line-height:36px;border-top:solid 1px #222;}
.m_menu li>a {color: #fff;font-size:14px;text-decoration: none;display:block;margin-left:30px;}
.m_menu li a.active {font-weight: bold;line-height:36px;}
#m_close {position: absolute;top: 35px;right: 20px;cursor: pointer;}
ul.menu2 {display: none;margin-top: 6px;margin-bottom:-20px;}
ul.menu2 li {padding: 6px 0;}
ul.menu2 li a {color: rgba(255, 255, 255, 0.7);font-size: 13px;}
ul.menu2 li a:hover {color:#;font-weight: normal;}
ul.m_menu2 {display: none;margin: 6px 0 0px 0px;}
ul.m_menu2 li {padding: 0px 0;background:#2e2e2e;}
ul.m_menu2 li a {color:#999;font-size:13px;display:block;line-height:36px;}
ul.m_menu2 li a:hover {color:#fff;font-weight: normal;}
/* 전체 메뉴 */
/* 상단 레이아웃 */
#hd {width:100%;z-index: 20 !important;position: absolute; min-width: 100%;}
.hd_zindex {z-index:10 !important}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_wrapper {position:relative;margin:0 auto;padding:26px 0;width:970px;zoom:1}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#logo {float:left;padding-top: 10px;padding-left: 10px;}
#main_hd_wrapper {position: fixed;margin: 0px auto;width: 100%;zoom: 1;background:#1c1c1c;padding-bottom:10px;border-top:solid 1px #292828;}
#main_hd_wrapper:after {display: block;visibility: hidden;clear: both;content: "";}
#hd_lang {position:relative;z-index:20;width:100%;min-width:100%;min-height:30px;background:#000;}
#hd_lang .hd_lang_wrapper {width: 100%;margin: 0 auto;}
#hd_lang .hd_lang_txt {text-align: right;color: #fefefe;padding-top: 9px;padding-right:15px;font-size:10px;letter-spacing:1px;}
#hd_lang .hd_lang_txt a {color: #fefefe;margin-left:10px;}
/* 상단 레이아웃 */
/* 모바일메뉴 */
.mobile_menu {
-webkit-transition: -webkit-transform 600ms ease;
-moz-transition: -moz-transform 600ms ease;
-o-transition: -o-transform 600ms ease;
transition: transform 600ms ease;
-webkit-font-smoothing: subpixel-antialiased;
}
.mobile_right_menu_open {
transform: translate3d(-100%, 0, 0);
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
}
.moblie_right_menu_body {
-webkit-transition: -webkit-transform 600ms ease;
-moz-transition: -moz-transform 600ms ease;
-o-transition: -o-transform 600ms ease;
transition: transform 600ms ease;
-webkit-font-smoothing: subpixel-antialiased;
}
.moblie_right_menu_toright {
transform: translate3d(-80%, 0, 0);
-webkit-transform: translate3d(-80%, 0, 0);
-moz-transform: translate3d(-80%, 0, 0);
-ms-transform: translate3d(-80%, 0, 0);
-o-transform: translate3d(-80%, 0, 0);
}
/* 모바일메뉴 */
/* 모바일추가메뉴 */
.mobile_fix {top:80px;position:fixed;z-index:90;background:#fff;width:100%;}
.mobile_fix ul {font-size:0px;}
.mobile_fix .depth1 > li {display:inline-block;font-size:12px;width:25%;text-align:center;border-right:solid 1px #f1f1f1;border-bottom:solid 1px #f1f1f1;height:35px;padding-top:10px;}
.mobile_fix .depth1 > li a {display:block;}
.mobile_fix .depth1 > li:nth-child(4) {border-right:0px;}
.mobile_fix .depth1 > li:nth-child(8) {border-right:0px;}
.mobile_fix .depth1 > li > .depth2 {display:none; position:absolute; top:35px; left:50%; width:100vw; background-color:#f7f7f7; transform:translateX(-50%); text-align:left;}
.mobile_fix .depth1 > li.active > .depth2 {display:block;}
.mobile_fix .depth1 > li > .depth2 > li {display:inline-block; width:25%;text-align:center;border-right:solid 1px #f1f1f1;border-bottom:solid 1px #f1f1f1;height:35px;padding-top:10px; text-align:center;}
.mobile_fix .depth1 > li:nth-child(3) > .depth2 > li:nth-child(3){width:50%;}
.mobile_fix .depth1 > li > .depth2 > li a{color:#666; font-size:11px;}
.mobile_fix.fix0 .depth1 > li:nth-child(5),
.mobile_fix.fix0 .depth1 > li:nth-child(6),
.mobile_fix.fix0 .depth1 > li:nth-child(7),
.mobile_fix.fix0 .depth1 > li:nth-child(8){margin-top:70px;}
.mobile_fix.fix1 .depth1 > li:nth-child(5),
.mobile_fix.fix1 .depth1 > li:nth-child(6),
.mobile_fix.fix1 .depth1 > li:nth-child(7),
.mobile_fix.fix1 .depth1 > li:nth-child(8){margin-top:70px;}
.mobile_fix.fix2 .depth1 > li:nth-child(5),
.mobile_fix.fix2 .depth1 > li:nth-child(6),
.mobile_fix.fix2 .depth1 > li:nth-child(7),
.mobile_fix.fix2 .depth1 > li:nth-child(8){margin-top:35px;}
.mobile_fix.fix3 .depth1 > li:nth-child(5),
.mobile_fix.fix3 .depth1 > li:nth-child(6),
.mobile_fix.fix3 .depth1 > li:nth-child(7),
.mobile_fix.fix3 .depth1 > li:nth-child(8){margin-top:35px;}
.mobile_fix.fix4 .depth1 > li > .depth2,
.mobile_fix.fix5 .depth1 > li > .depth2,
.mobile_fix.fix6 .depth1 > li > .depth2,
.mobile_fix.fix7 .depth1 > li > .depth2{top:70px;}
#container .inner {padding:0px 20px;}