welcome css 반응화 작업에서 media 쿼리 관련 IE8 대응 및 css 간결화

This commit is contained in:
dlehdanakf 2015-07-06 14:12:36 +09:00
parent 408fe730fc
commit a770b2295a
3 changed files with 29 additions and 29 deletions

View file

@ -266,7 +266,6 @@ a:hover,a:active,a:focus{text-decoration:none}
.header > h1 img { max-height:15px; padding:0; margin:0; }
.header.sub_type3 { position:absolute; }
/* Fixed Header */
/* Fixed Header */
.container.fixed_header{padding-top:0}
.header_wrap.shrink { display:none; }

View file

@ -49,29 +49,28 @@
.welcomeXE .features ul{overflow:hidden;margin-top:38px;padding:0 20px}
.welcomeXE .features li{float:left;width:25%;height:480px}
@media all and (min-width:480px) {
.welcomeXE .features li .fe_box{height:478px;margin:0 10px;padding:0 20px;border:1px solid #333;background-color:#f6f6f6;text-align:center;-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out}
.welcomeXE .features .fe_box .ico{display:inline-block;width:70px;height:70px;margin:162px 0 27px;background-color:#cda25a;background:url(../img/sp_feature.png) 0 0 no-repeat;text-align:center;font-size:60px;line-height:70px}
.welcomeXE .features .fe_box h2{font-size:21px;color:#555;font-weight:normal}
.welcomeXE .features .fe_box p{margin-bottom:80px;font-size:15px;line-height:24px;color:#f6f6f6}
.welcomeXE .features .fe_box a{display:inline-block;height:40px;padding:0 40px;border:2px solid #f6f6f6;font-family:'Open Sans',sans-serif;font-size:13px;letter-spacing:1px;color:#f6f6f6;line-height:40px;font-weight:600;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
.welcomeXE .features .fe_box a:hover{background-color:#f6f6f6;border-color:#f6f6f6;color:#cda25a}
.welcomeXE .features .fe_top{position:relative;top:0;-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out}
.welcomeXE .features .fe_bottom{position:relative;top:192px;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out}
.welcomeXE .features .fe_box.on{background-color:#cda25a}
.welcomeXE .features .fe_box.on .fe_top{top:-104px}
.welcomeXE .features .fe_box.on .fe_bottom{top:-67px}
.welcomeXE .features .fe_box.on h2{color:#f6f6f6}
.welcomeXE .features .fe_box.on .ico{background-color:#f6f6f6;background:url(../img/sp_feature.png) 0 -70px no-repeat}
.welcomeXE .features .fe_box .ico2{background-position:-70px 0}
.welcomeXE .features .fe_box .ico3{background-position:-140px 0}
.welcomeXE .features .fe_box .ico4{background-position:-210px 0}
.welcomeXE .features .fe_box.on .ico2{background-position:-70px -70px}
.welcomeXE .features .fe_box.on .ico3{background-position:-140px -70px}
.welcomeXE .features .fe_box.on .ico4{background-position:-210px -70px}
.welcomeXE .features li .fe_box{height:478px;margin:0 10px;padding:0 20px;border:1px solid #333;background-color:#f6f6f6;text-align:center;-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out}
.welcomeXE .features .fe_box .ico{display:inline-block;width:70px;height:70px;margin:162px 0 27px;background-color:#cda25a;background:url(../img/sp_feature.png) 0 0 no-repeat;text-align:center;font-size:60px;line-height:70px}
.welcomeXE .features .fe_box h2{font-size:21px;color:#555;font-weight:normal}
.welcomeXE .features .fe_box p{margin-bottom:80px;font-size:15px;line-height:24px;color:#f6f6f6}
.welcomeXE .features .fe_box a{display:inline-block;height:40px;padding:0 40px;border:2px solid #f6f6f6;font-family:'Open Sans',sans-serif;font-size:13px;letter-spacing:1px;color:#f6f6f6;line-height:40px;font-weight:600;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
.welcomeXE .features .fe_box a:hover{background-color:#f6f6f6;border-color:#f6f6f6;color:#cda25a}
.welcomeXE .features .fe_top{position:relative;top:0;-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out}
.welcomeXE .features .fe_bottom{position:relative;top:192px;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out}
.welcomeXE .features .fe_box.on{background-color:#cda25a}
.welcomeXE .features .fe_box.on .fe_top{top:-104px}
.welcomeXE .features .fe_box.on .fe_bottom{top:-67px}
.welcomeXE .features .fe_box.on h2{color:#f6f6f6}
.welcomeXE .features .fe_box.on .ico{background-color:#f6f6f6;background:url(../img/sp_feature.png) 0 -70px no-repeat}
.welcomeXE .features .fe_box .ico2{background-position:-70px 0}
.welcomeXE .features .fe_box .ico3{background-position:-140px 0}
.welcomeXE .features .fe_box .ico4{background-position:-210px 0}
.welcomeXE .features .fe_box.on .ico2{background-position:-70px -70px}
.welcomeXE .features .fe_box.on .ico3{background-position:-140px -70px}
.welcomeXE .features .fe_box.on .ico4{background-position:-210px -70px}
}
/*section.connect*/
.welcomeXE .connect{height:344px;padding-top:80px}
@ -110,15 +109,17 @@
.welcomeXE .features .cont{width:100%;margin-left:auto;margin-right:auto}
.welcomeXE .features ul { padding:0; }
.welcomeXE .features li{clear:both;width:100%;height:auto;margin:0 0 20px 0;}
.welcomeXE .features li .fe_box { margin:0;padding:20px;border:1px solid #333;background-color:#cda25a; position:relative; }
.welcomeXE .features .fe_box .ico{display:inline-block;width:70px;position:absolute;top:20px;left:20px;height:70px;margin:0;background-color:#f6f6f6;background:url(../img/sp_feature.png) 0 -70px no-repeat;text-align:center;font-size:20px;line-height:70px}
.welcomeXE .features .fe_box h2{font-size:21px;color:#f6f6f6;font-weight:normal; padding-left:80px}
.welcomeXE .features .fe_box a{display:inline-block;height:30px;padding:0 20px;border:2px solid #f6f6f6;font-family:'Open Sans',sans-serif;font-size:13px;letter-spacing:1px;color:#f6f6f6;line-height:30px;font-weight:600;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;float:right;}
.welcomeXE .features .fe_bottom { padding-left:80px; overflow:hidden; }
.welcomeXE .features .fe_box p{margin-bottom:40px;margin-top:10px;font-size:13px;line-height:20px;color:#f6f6f6}
.welcomeXE .features li .fe_box { margin:0;padding:20px;border:1px solid #333;background-color:#cda25a; position:relative; height:auto; text-align:left; }
.welcomeXE .features .fe_box .ico{display:inline-block;width:70px;position:absolute;top:0;left:0;height:70px;margin:0;background-color:#f6f6f6;background:url(../img/sp_feature.png) 0 -70px no-repeat;text-align:center;font-size:20px;line-height:70px;text-align:left;}
.welcomeXE .features .fe_box h2{color:#f6f6f6;font-weight:normal; padding-left:80px}
.welcomeXE .features .fe_box a{height:30px;padding:0 20px;line-height:30px;float:right;}
.welcomeXE .features .fe_bottom { padding-left:80px; overflow:hidden; position:static; }
.welcomeXE .features .fe_box p{margin-bottom:40px;margin-top:10px;font-size:13px;line-height:20px;}
.welcomeXE .features .fe_box .ico2{background-position:-70px -70px}
.welcomeXE .features .fe_box .ico3{background-position:-140px -70px}
.welcomeXE .features .fe_box .ico4{background-position:-210px -70px}
.welcomeXE .features .fe_box.on .fe_top{top:0}
.welcomeXE .features .fe_box.on .fe_bottom{top:0}
.welcomeXE .connect{height:auto;padding:80px 14px 0 14px;}
.welcomeXE .connect ul { padding-top:0; }

View file

@ -155,7 +155,7 @@
<load cond="$_enable_slide" target="./js/idangerous.swiper.min.js" />
<load target="./js/layout.js" />
<load cond="$layout_info->use_demo ==='Y' && !Mobile::isMobileCheckByAgent()" target="./js/welcome.js" />
<load cond="$layout_info->use_demo ==='Y'" target="./js/welcome.js" />
<load target="./js/jquery.parallax-scroll.min.js" />