diff --git a/html/css/common.css b/html/css/common.css index f1925a6..57c637c 100644 --- a/html/css/common.css +++ b/html/css/common.css @@ -11,7 +11,7 @@ body,html{overflow-x: hidden;} .pal-icon{vertical-align: middle;} /*header*/ #hd {background:rgba(0, 0, 0, 0);z-index:1000;position:fixed;width:100%; top:0;overflow:hidden; transition:0.6s ease; -webkit-transition:0.6s ease;} -#hd:hover{background:#fff; border-bottom:1px solid rgba(0, 0, 0, 0.5);} +/* #hd:hover{background:#fff; border-bottom:1px solid rgba(0, 0, 0, 0.5);} */ .color_logo{display:none;} .wh_logo{display:block;} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} @@ -116,7 +116,7 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c .topBtn i{font-size:20px;color:#fff;} /*footer*/ -#footer{min-width:1280px;background:#21272e;position:absolute;bottom:0;width:100%;height:200px;} +#footer{background:#21272e;position:absolute;bottom:0;width:100%;height:200px;} .footer-box{display:flex;} .ft-logo{padding-right:80px;} .ft-logo img{width:200px;} @@ -324,4 +324,54 @@ position: absolute;top:-25px;left:50%;transform: translateX(-50%);box-shadow:2px .example-box-txt li{flex:0 0 25%;text-align:center;margin-top:40px;} .example-box-txt li span{display:block;width:250px;min-height:58px;background:#fff;border-radius:30px;border:1px solid #2290c9; padding:18px 20px 15px 20px;font-weight:500;margin: 0px auto;font-size:1rem;box-shadow:3px 6px 5px #ddd;} -.example-info + .example-info .example-box-ti{border-top:0;} \ No newline at end of file +.example-info + .example-info .example-box-ti{border-top:0;} + + +.mg_box{display:none;} +.mg_box{width:100%; overflow:hidden;top:0; right:0; z-index:9;} +.mg_box.on{z-index:9999;} +.m_gnb{position:absolute; top:0; right:-100%; width:100%; z-index:9; transition:0.3s ease; -webkit-transition:0.3s ease;} +.m_gnb.on{z-index:9999; right:0;} +div.mg_btn{position:absolute; top:15px; right:10px; z-index:99999; +transition:0.5s ease; -webkit-transition:0.5s ease; -o-transition:0.5s ease; +transition-delay:0.3s; -webkit-transition-delay:0.3s; -o-transition-delay:0.3s; +} +div.mg_btn span{display:block; width:42px; height:2px; margin:10px; background:#fff; transition:0.5s ease; -webkit-transition:0.5s ease;} +div.mg_btn.on{transform:rotate(45deg);} +div.mg_btn.on span{width:0px; height:2px; background:#000;} +div.mg_btn.on span:first-child{width:42px; transform:translateY(12px)} +div.mg_btn.on span:last-child{width:42px; transform:translateY(-12px) rotate(90deg);} +.m_gnb div.mg_wrap{width:500px; background:#fff;} +.m_gnb div.mg_wrap.on{position:Absolute; right:0; z-index:999;} +.m_gnb div.mg_wrap>ul{padding:100px;} +.m_gnb div.mg_wrap>ul>li{padding:5px 0;} +.m_gnb div.mg_wrap>ul>li>a{font-size:26px; font-weight:900; color:#444!important;} +.m_gnb div.mg_wrap>ul>li>ul{display:none;padding:10px 0;} +.m_gnb div.mg_wrap>ul>li>ul>li{padding:5px 0;} +.m_gnb div.mg_wrap>ul>li>ul>li>a{font-size:20px;color:#444;} +.m_gnb div.mg_bk{display:none; width:100%; height:100%; background:#222; opacity:0; transition:0.5s ease; -webkit-transition:0.5s ease;} +.m_gnb div.mg_bk.on{display:block; opacity:0.9;} + +/*1024이하 메인*/ +#mo-main .swiper-button-next:after, #mo-main .swiper-rtl .swiper-button-prev:after{color:#fff;font-size:25px;} +#mo-main .swiper-button-prev:after, #mo-main .swiper-rtl .swiper-button-next:after{color:#fff;font-size:25px;} + +@media screen and (max-width:1024px){ + #fullpage{display:none} + .pc-hd{display:none} + html,body{height:100%!important;} + #hd:hover{background:inherit!important;} + #mo-main .main-bn{height:520px;background-size:cover;} + #container{height:100%;} + .inner{width:100%;padding:0 20px;} + .bg-square{width:200px;height:200px;top:-50px} + .main-txt-box{padding:0 40px;} + .main-bn .inner{padding-top:60px;} + .bg01 .inner{padding:0 60px;} + .bg02 .main-txt-box, .bg03 .main-txt-box{padding-left:40px;} + .mg_btn{display:block;} + .main-bn h2{font-size:2rem} + .main-bn .big{font-size:4rem} + .main-txt-box b{font-size:2.5rem;} + .main-txt-box{font-size:1.25rem;word-break: keep-all;} +} \ No newline at end of file diff --git a/html/include/header.html b/html/include/header.html index a5d77ee..594382a 100644 --- a/html/include/header.html +++ b/html/include/header.html @@ -19,7 +19,36 @@ // $('.hd-sub .wh_logo').css('display', 'none'); }); - }); + + $('html.on #hd_wrapper').css('height', '100vh'); + + //햄버거메뉴 X버튼 활성화 및 메뉴바 슬라이딩 + $('.mg_btn').click(function(){ + $('.mg_box').toggleClass('on'); + $('.m_gnb').toggleClass('on'); + $('.mg_btn').toggleClass('on'); + $('.mg_wrap').toggleClass('on'); + $('.mg_bk').toggleClass('on'); + $('html').toggleClass('on'); + $('#logo').toggleClass('on'); + $('.mg_wrap>ul>li>ul').slideUp(100); + }); + //메뉴바 FULL HEIGHT + + $('.mg_box').css('height', $(window).height()); + $('.m_gnb').css('height', $(window).height()); + $('.mg_wrap').css('height', $(window).height()); + $(window).resize(function(){ + $('.mg_box').css('height', $(window).height()); + $('.m_gnb').css('height', $(window).height()); + $('.mg_wrap').css('height', $(window).height()); + }); + + //리스트제목 클릭시 리스트 노출 + $('.mg_wrap>ul>li').click(function(){ + $(this).children('ul:not(:animated)').slideToggle(500); + }); +});
@@ -36,7 +65,7 @@
-