mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-09 03:32:00 +09:00
130 lines
8.9 KiB
CSS
130 lines
8.9 KiB
CSS
@charset "utf-8";
|
|
|
|
.welcomeXE{padding-top:50px;font-family:Raleway,'나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif}
|
|
.content + .welcomeXE { padding-top: 0;}
|
|
.welcomeXE section{width:1200px;margin:0 auto}
|
|
.welcomeXE .tit{padding-bottom:32px;font-size:40px;color:#333;font-weight:700;letter-spacing:1px;line-height:50px}
|
|
.welcomeXE .noti{display:block;padding:28px 0 0;margin:0 0 12px;font-size:14px;font-weight:bold;color:#cda25a;letter-spacing:1px;line-height:20px}
|
|
|
|
.welcomeXE .intro{width:408px;height:600px;padding-right:792px;background:url(../img/intro.png) 100% 100% no-repeat}
|
|
.welcomeXE .intro .cont{padding-bottom:37px;font-size:15px;font-weight:400;color:#888;line-height:27px}
|
|
.welcomeXE .intro .btn_start{display:inline-block;margin:50px 0;padding:0 27px;height:40px;border:2px solid #cda25a;background-color:#fff;font-size:13px;line-height:40px;letter-spacing:1px;color:#cda25a;-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 .intro .btn_start:hover,
|
|
.welcomeXE .intro .btn_start:active
|
|
.welcomeXE .intro .btn_start:focus{background-color:#cda25a;color:#fff}
|
|
|
|
.bg-holder {
|
|
background-image: url('../img/bg_stat.jpg');
|
|
}
|
|
|
|
/* section.xeicon */
|
|
.welcomeXE .xeicon{overflow:hidden;position:static;width:100%;margin:0;height:100%;}
|
|
.welcomeXE .xeicon h1 {margin-top: 170px; font-size: 40px; color: #f6f6f6; text-align: center; letter-spacing: 3px; font-weight: 400; line-height: 1.2em; text-transform: uppercase; }
|
|
.welcomeXE .xeicon h1 a {color: #FFF; }
|
|
.welcomeXE .xeicon .button-area {text-align: center; margin-bottom:140px; }
|
|
.welcomeXE .xeicon .button-area .btn_item {font-size: 14px; letter-spacing: 2px;}
|
|
|
|
/* section.guide */
|
|
.welcomeXE .guide{height:640px;padding-top:80px}
|
|
.welcomeXE .guide ul{padding-top:27px}
|
|
.welcomeXE .guide li{position:relative;float:left;width:314px;min-height:140px;padding:0 0 0 70px;margin:0 0 30px 0}
|
|
.welcomeXE .guide h2{padding:7px 24px 13px 0;font-size:17px;font-weight:normal;line-height:23px;color:#333}
|
|
.welcomeXE .guide p{padding:0 24px 0 0;font-size:14px;line-height:26px;color:#888}
|
|
.welcomeXE .guide .ico{position:absolute;top:0;left:0;width:48px;height:48px;border-radius:100%;background-color:#555;font-size:22px;text-align:center;line-height:50px;color:#efefef}
|
|
.welcomeXE .guide .ico:hover,
|
|
.welcomeXE .guide .ico:active,
|
|
.welcomeXE .guide .ico:focus{background-color:#cda25a}
|
|
.welcomeXE .guide p a{color:#444}
|
|
.welcomeXE .guide p a:hover,
|
|
.welcomeXE .guide p a:active,
|
|
.welcomeXE .guide p a:focus{color:#cda25a;border-bottom:1px solid #cda25a}
|
|
|
|
/* section.features */
|
|
.welcomeXE .features{width:100%;margin:0;height:800px;padding-top:80px;background-color:#444}
|
|
.welcomeXE .features .noti,
|
|
.welcomeXE .features .tit,
|
|
.welcomeXE .features .cont{width:1200px;margin-left:auto;margin-right:auto}
|
|
.welcomeXE .features .tit{color:#f6f6f6}
|
|
.welcomeXE .features .cont{font-size:15px;line-height:27px;color:#ddd}
|
|
.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}
|
|
|
|
}
|
|
|
|
/*section.connect*/
|
|
.welcomeXE .connect{height:344px;padding-top:80px}
|
|
.welcomeXE .connect ul{overflow:hidden;padding:40px 0}
|
|
.welcomeXE .connect li{position:relative;float:left;width:180px;margin-left:24px;padding:4px 0 0 102px;min-height:78px}
|
|
.welcomeXE .connect li:first-child{margin-left:0}
|
|
.welcomeXE .connect .ico{position:absolute;top:0;left:0;width:78px;height:78px;border-radius:100%;background-color:#cda25a;text-align:center;font-size:40px;color:#fff}
|
|
.welcomeXE .connect .ico:hover,
|
|
.welcomeXE .connect .ico:active,
|
|
.welcomeXE .connect .ico:focus{background-color:#555}
|
|
.welcomeXE .connect .ico i{line-height:78px}
|
|
.welcomeXE .connect h2{margin-bottom:16px;font-size:15px;font-weight:600;letter-spacing:1px;line-height:18px;color:#333}
|
|
.welcomeXE .connect p{font-size:13px;color:#888;line-height:21px}
|
|
|
|
@media all and (max-width:479px) {
|
|
.welcomeXE { padding-top: 0 }
|
|
.welcomeXE section{width:100%; box-sizing:border-box; overflow:hidden;}
|
|
.welcomeXE .tit{padding-bottom:16px;font-size:30px;color:#333;font-weight:700;letter-spacing:1px;line-height:40px}
|
|
|
|
.welcomeXE .intro{width:100%; box-sizing:border-box; padding:0 14px; height:auto; background:#fff; }
|
|
.welcomeXE .intro .cont{padding-bottom:17px;}
|
|
.welcomeXE .intro .btn_start { margin:20px 0 50px 0; }
|
|
|
|
.welcomeXE .xeicon { height:auto; }
|
|
.welcomeXE .xeicon h1 { margin-top:70px; }
|
|
.welcomeXE .xeicon .button-area { margin-bottom:50px; }
|
|
.welcomeXE .xeicon .button-area .btn_item {font-size: 14px; letter-spacing: 2px;margin:20px 0;}
|
|
.welcomeXE .xeicon{background-position:0 0;background-attachment: inherit;}
|
|
|
|
.welcomeXE .guide{ padding:0 14px; height:auto;padding-top:40px}
|
|
.welcomeXE .guide li { width:auto; margin:0 0 20px 0; }
|
|
|
|
.welcomeXE .features { padding:40px 14px 0 14px; height:auto; }
|
|
.welcomeXE .features .noti,
|
|
.welcomeXE .features .tit,
|
|
.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 .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 .connect{height:auto;padding:80px 14px 0 14px;}
|
|
.welcomeXE .connect ul { padding-top:0; }
|
|
.welcomeXE .connect li { margin-left:0; width:auto; min-height:78px; margin-bottom:20px; }
|
|
|
|
}
|
|
|
|
|
|
|