mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-05-09 12:02:24 +09:00
XEDTION
This commit is contained in:
izuzero
parent
7daf31956c
commit
b5e67beacd
50 changed files with 8295 additions and 0 deletions
1087
layouts/xedition/css/camera.css
Normal file
1087
layouts/xedition/css/camera.css
Normal file
File diff suppressed because it is too large
Load diff
202
layouts/xedition/css/layout.css
Normal file
202
layouts/xedition/css/layout.css
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
@charset "utf-8";
|
||||
|
||||
/* Common */
|
||||
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0;-webkit-text-size-adjust:none}
|
||||
body,input,textarea,select,button,table{font-family:'Open Sans','나눔바른고딕',NanumBarunGothic,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif;font-size:12px;-webkit-font-smoothing:antialiased}
|
||||
img,fieldset,button{border:0}
|
||||
ul,ol{list-style:none}
|
||||
em,address{font-style:normal}
|
||||
a{text-decoration:none}
|
||||
a:hover,a:active,a:focus{text-decoration:none}
|
||||
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
|
||||
.edge{position:absolute;top:12px;right:4px;width:0;height:0;border-width:0 8px 8px;border-style:solid;border-color:transparent transparent #333}
|
||||
.clear{clear:both}
|
||||
|
||||
/* Skip to content */
|
||||
.skip{margin:0}
|
||||
.skip>a{display:block;overflow:hidden;height:0;line-height:28px;text-align:center}
|
||||
.skip>a:focus{height:auto}
|
||||
|
||||
/* Layout */
|
||||
.container{min-width:1240px;background-color:#fff}
|
||||
.header{position:relative;z-index:2;width:1200px;height:100%;margin:0 auto;zoom:1}
|
||||
.header>.side{float:right;z-index:2;margin:39px 0 0 22px;line-height:20px}
|
||||
.visual{overflow:hidden;position:relative;z-index:1;width:100%}
|
||||
.body{position:relative;padding:30px 0}
|
||||
.body.main .content{width:1200px;margin:0 auto}
|
||||
.body.sub{width:1200px;margin:0 auto}
|
||||
|
||||
.header:after,.body:after{display:block;clear:both;content:''}
|
||||
.content{zoom:1}
|
||||
.content:after{display:block;clear:both;content:''}
|
||||
.content>:first-child{margin-top:0}
|
||||
.content img{max-width:100%;height:auto}
|
||||
|
||||
/* Header */
|
||||
.header>h1{float:left;padding:20px 0;margin-right:32px}
|
||||
.header>h1 img{vertical-align:top}
|
||||
|
||||
/* Fixed Header */
|
||||
.container.fixed_header{padding-top:100px}
|
||||
.fixed_header .header_wrap{position:absolute;top:0;left:0;width:100%;z-index:1000}
|
||||
.fixed_header .header_wrap.shrink{position:fixed;border-bottom:1px solid #e1e1e1;background-color:#fff;-webkit-animation:ani-header 0.5s forwards;animation:ani-header 0.5s forwards}
|
||||
.fixed_header .header_wrap.shrink .header>h1{padding:0}
|
||||
.fixed_header .header_wrap.shrink .gnb>ul>li>a{line-height:60px}
|
||||
.fixed_header .header_wrap.shrink .header>.side{margin:19px 0 0 22px}
|
||||
.fixed_header .header_wrap.shrink .search_area{padding:0 20px}
|
||||
|
||||
/* Footer */
|
||||
.footer{border-top:1px solid #e4e4e4;border-bottom:3px solid #cda25a;background-color:#f1f1f1;font-family:'Open Sans','나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif}
|
||||
.footer a:hover,.footer a:focus{text-decoration:none}
|
||||
.footer .f_info_area{overflow:hidden;width:1200px;margin:0 auto;padding:48px 0 40px}
|
||||
.footer .f_cr_area{padding:19px;background-color:#555}
|
||||
.footer .copyright{width:1200px;margin:0 auto;font-size:13px;color:#f1f1f1;line-height:16px}
|
||||
.footer .copyright a{color:#f1f1f1}
|
||||
.footer .copyright a:hover,
|
||||
.footer .copyright a:focus,
|
||||
.footer .copyright a:active{color:#cda25a}
|
||||
.footer .copyright span{display:inline-block;margin-left:60px}
|
||||
.footer .sub_desc{margin-bottom:16px;font-size:13px;color:#888;line-height:22px}
|
||||
.footer .f_info{float:left;width:240px;margin-right:65px}
|
||||
.footer .f_logo{overflow:hidden;max-width:100%;margin-bottom:16px;font-size:24px;color:#555}
|
||||
.footer .f_logo.log_txt a{font-size:24px;font-weight:bold;color:#555}
|
||||
.footer .f_logo img{width:240px;height:50px}
|
||||
.footer .f_info2{overflow:hidden;margin-top:7px}
|
||||
.footer .site_map > ul{display:inline-block;overflow:hidden;background:url(../img/bg_sitemap.png) repeat-y}
|
||||
.footer .site_map > ul li{float:left;width:282px;margin:0 0 0 24px}
|
||||
.footer .site_map > ul li:first-child,.footer .site_map > ul li.clear{clear:both;margin-left:0}
|
||||
.footer .site_map > ul li a{display:inline-block;margin:0 0 20px;padding:0 23px;font-size:15px;font-weight:bold;color:#555}
|
||||
.footer .site_map > ul ul{overflow:hidden;margin:0 0 10px}
|
||||
.footer .site_map > ul ul li{margin-left:0}
|
||||
.footer .site_map > ul ul a{margin:0 0 13px;font-size:13px;font-weight:normal;color:#888;line-height:18px}
|
||||
.footer .site_map > ul ul a:hover,
|
||||
.footer .site_map > ul ul a:focus,
|
||||
.footer .site_map > ul ul a:active{color:#555}
|
||||
|
||||
/* Login */
|
||||
.header>.side>ul>li{float:left;position:relative}
|
||||
.header>.side>ul>li>a{display:block;width:22px;height:22px;margin-left:12px;font-size:22px;line-height:22px;color:#888;text-align:center}
|
||||
.header>.side>ul>li>a:hover,.header>.side>ul>li>a:focus,.header>.side>ul>li>a:active,.header>.side>ul>li.on>a{color:#444}
|
||||
.header>.side>ul .ly{position:relative;position:absolute;top:100%;right:0;margin-top:13px;background-color:#f9f9f9}
|
||||
.header>.side>ul .ly.ly_login{overflow:hidden;margin-top:0;background:none;height:0}
|
||||
.header>.side>ul .ly.ly_login ul{position:relative;margin-top:18px;padding:8px 0;background-color:#333;z-index:3}
|
||||
.header>.side>ul .on .ly.ly_login{height:auto}
|
||||
.header>.side>ul .ly a{display:block;min-width:120px;height:40px;padding:0 20px;line-height:40px;font-size:13px;color:#9d9d9d}
|
||||
.header>.side>ul .ly a:hover{color:#cda25a;text-decoration:none}
|
||||
.header>.side>ul>li .login_after{overflow:hidden;width:40px;height:40px;margin-top:-9px;border-radius:100%}
|
||||
.header>.side>ul>li .login_after img{width:40px;height:40px}
|
||||
.header>.side>ul>li .login_after ~ .ly_login .edge{right:11px}
|
||||
|
||||
/* Magazine Header Type */
|
||||
.custom_area{display:none}
|
||||
.magazine .header{text-align:center}
|
||||
.magazine .header>h1{float:none;display:inline-block;margin:0;padding:80px 0 20px;vertical-align:top}
|
||||
.magazine .header>.side{float:none;position:absolute;top:0;right:0;margin:30px 0 0}
|
||||
.magazine .gnb{float:none;max-width:100%;margin-bottom:40px}
|
||||
.magazine .gnb>ul{display:inline-block;vertical-align:top}
|
||||
.magazine .gnb>ul>li>a{position:relative;line-height:60px}
|
||||
.magazine .gnb>ul>li>a:after{position:absolute;top:50%;left:-1px;width:1px;height:16px;margin-top:-8px;background-color:#888;content:''}
|
||||
.magazine .gnb>ul>li:first-child>a:after{background:none}
|
||||
.magazine .gnb>ul .depth2:after{background:none}
|
||||
.magazine .gnb>ul .depth2,.magazine .gnb>ul .depth3{background-color:#f7f7f7}
|
||||
.magazine .gnb>ul .depth2 a,.magazine .header>.side>ul .ly a{color:#999}
|
||||
.magazine .header>.side>ul .ly a:hover{color:red}
|
||||
.magazine .gnb>ul>li>a:hover,.magazine .gnb>ul>li>a:focus,.magazine .gnb>ul>li>a:focus,.magazine .gnb>ul>li.on>a,.magazine .header>.side>ul>li.on>a,.magazine .header>.side>ul .ly a:hover{color:#cda25a}
|
||||
.magazine .header>.side>ul .ly.ly_login ul{background-color:#f7f7f7;text-align:left}
|
||||
.magazine .edge{border-color:transparent transparent #f7f7f7}
|
||||
.magazine .header>.side>ul>li>a:hover,
|
||||
.magazine .header>.side>ul>li>a:focus,
|
||||
.magazine .header>.side>ul>li>a:active{color:#cda25a}
|
||||
.magazine .custom_area{display:block;position:absolute;top:30px;left:0}
|
||||
.magazine .custom_area li{float:left;margin-right:30px}
|
||||
.magazine .custom_area a{font-size:13px;line-height:15px;color:#999}
|
||||
.magazine .custom_area a:hover,.magazine .custom_area a:hover,.magazine .custom_area a:hover{color:#cda25a}
|
||||
.magazine .search_area{padding:10px 20px}
|
||||
|
||||
/* Onepage Header Type */
|
||||
.onepage .header_wrap{position:absolute;top:0;left:0;width:100%;z-index:1000}
|
||||
.onepage .gnb>ul{background:transparent}
|
||||
.onepage .gnb>ul>li>a{line-height:60px;color:#f6f6f6}
|
||||
.onepage .gnb>ul>li>a:hover,.onepage .gnb>ul>li>a:focus,.onepage .gnb>ul>li>a:focus,.onepage .gnb>ul>li.on>a{color:#fff}
|
||||
.onepage .header>.side>ul>li>a{color:#f6f6f6}
|
||||
.onepage .header>.side>ul>li>a:hover, .onepage .header>.side>ul>li>a:focus,.onepage .header>.side>ul>li>a:active,.onepage .header>.side>ul>li.on>a{color:#fff}
|
||||
.onepage .search_area .btn_close{color:#f6f6f6}
|
||||
.onepage .gnb>ul .depth2:after{background:none}
|
||||
.onepage .gnb{margin-top:20px}
|
||||
.onepage .header>h1{padding:20px 0 0}
|
||||
.onepage .search_area input[type=text]{color:#f6f6f6}
|
||||
|
||||
/* Search */
|
||||
.search_wrap{position:relative;width:1200px;margin:0 auto}
|
||||
.search_area{display:none;position:absolute;top:0;left:0;width:1160px;padding:20px;z-index:3;z-index:3}
|
||||
.search_area input{font-size:13px;vertical-align:top}
|
||||
.search_area input[type=text]{position:relative;width:100%;height:40px;padding:10px 0;border:0;background-color:transparent;font-size:40px;color:#444;-webkit-appearance:none;}
|
||||
.search_area input[type=text]:focus{outline:0}
|
||||
.search_area input[type=text]::-ms-clear{display:none}
|
||||
.search_area .btn_close{position:absolute;top:50%;right:0;width:20px;height:20px;margin-top:-10px;font-size:22px;color:#888;text-align:center;line-height:20px}
|
||||
|
||||
/* GNB */
|
||||
.gnb{float:right;position:relative;z-index:1;max-width:742px;height:100%;font-size:13px}
|
||||
.gnb a{text-decoration:none;white-space:nowrap}
|
||||
.gnb>ul:after{display:block;clear:both;content:''}
|
||||
.gnb>ul>li{float:left;position:relative;text-align:left}
|
||||
.gnb>ul>li>a{display:block;position:relative;padding:0 20px;line-height:100px;font-size:15px;font-weight:700;color:#888}
|
||||
.gnb>ul>li>a:hover,.gnb>ul>li>a:focus,.gnb>ul>li>a:focus,.gnb>ul>li.on>a{color:#444}
|
||||
.gnb>ul .depth2{display:none;position:absolute;top:100%;left:0;z-index:2;padding:8px 0;background-color:#333}
|
||||
.gnb>ul .depth2>li{position:relative}
|
||||
.gnb>ul .depth2:after{position:absolute;top:-3px;left:0;width:100%;height:3px;background-color:#cda25a;content:''}
|
||||
.gnb>ul .depth2 a{display:block;position:relative;min-width:170px;height:40px;padding:0 30px 0 20px;line-height:40px;font-size:13px;color:#9d9d9d}
|
||||
.gnb>ul .depth2 a:hover,.gnb>ul .depth2 a:active,.gnb>ul .depth2 a:focus,.gnb>ul .depth2>li.on>a{color:#cda25a}
|
||||
.gnb>ul .depth3{display:none;position:absolute;top:-8px;left:100%;z-index:2;padding:8px 0;background-color:#333}
|
||||
.gnb>ul .depth2>li.more>a:after{position:absolute;right:20px;content:'>'}
|
||||
|
||||
/* VISUAL */
|
||||
.visual.sub{position:relative;padding:35px 0;background-color:#f6f6f6;line-height:30px}
|
||||
.visual.sub .sub_title{position:relative;z-index:2;width:1200px;margin:0 auto}
|
||||
.visual.sub .sub_title h1{position:relative;font-weight:700;font-family:Raleway,'나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif;font-size:17px;color:#444}
|
||||
.visual.sub .sub_title h1:after{position:absolute;top:115%;left:0;width:22px;height:2px;background-color:#444;content:''}
|
||||
.visual.sub .bg_img{display:none;position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;background-size:cover}
|
||||
.visual.sub.sub_type2{padding:70px 0}
|
||||
.visual.sub.sub_type2 .bg_img{display:block}
|
||||
.visual.sub.sub_type2 .sub_title h1{color:#fff;font-weight:400;font-size:23px;letter-spacing:1px}
|
||||
.visual.sub.sub_type2 .sub_title h1:after,
|
||||
.visual.sub.sub_type3 .sub_title h1:after{background:none}
|
||||
.visual.sub.sub_type3{padding:250px 0 210px;line-height:40px;text-align:center}
|
||||
.visual.sub.sub_type3 .bg_img{display:block;background-attachment:fixed;background-size:auto auto}
|
||||
.visual.sub.sub_type3 .sub_title h1{font-size:39px;font-weight:400;color:#fff;letter-spacing:2px}
|
||||
|
||||
/* LNB */
|
||||
.body.sub .lnb{float:left;width:260px;padding:0 0 16px}
|
||||
.body.sub .content{float:right;width:900px;min-height:400px;padding:40px 0 100px}
|
||||
.body.sub .lnb>ul{position:relative;z-index:1;margin:0;padding:40px 0 0}
|
||||
.body.sub .lnb>ul>li{margin-bottom:40px}
|
||||
.body.sub .lnb>ul>li>a,.body.sub .lnb>ul>li>span{display:block;line-height:21px;margin-bottom:14px;font-size:15px;color:#444}
|
||||
.body.sub .lnb ul ul li.on a{color:#cda25a}
|
||||
.body.sub .lnb ul ul a{display:block;padding:10px 0;font-size:14px;line-height:20px;color:#888;text-decoration:none}
|
||||
.body.sub .lnb ul ul a:hover,
|
||||
.body.sub .lnb ul ul a:focus,
|
||||
.body.sub .lnb ul ul a:active{color:#cda25a}
|
||||
.body.sub .lnb img{vertical-align:top}
|
||||
.body.sub.right .lnb{float:right}
|
||||
.body.sub.right .content{float:left}
|
||||
.body.sub.full_width .lnb{display:none}
|
||||
.body.sub.full_width .content{float:none;width:1200px}
|
||||
|
||||
/* Scroll to top link */
|
||||
.btn_top{display:none;position:fixed;right:0;bottom:57px;z-index:1000;width:48px;height:48px;background-color:#555;font-size:24px;color:#fff;text-align:center;opacity:0.8;filter:alpha(opacity=80)}
|
||||
.btn_top:hover{background-color:#cda25a;color:#fff;text-decoration:none;opacity:1;filter:alpha(opacity=100)}
|
||||
.btn_top i{line-height:48px}
|
||||
|
||||
/* ie */
|
||||
.gnb>ul{background-color:#fff\9;filter:alpha(opacity=0)}
|
||||
|
||||
/* header animation */
|
||||
@-webkit-keyframes ani-header {
|
||||
0% {top: -60px}
|
||||
100% {top: 0px}
|
||||
}
|
||||
|
||||
@keyframes ani-header {
|
||||
0% {top: -60px}
|
||||
100% {top: 0px}
|
||||
}
|
||||
74
layouts/xedition/css/welcome.css
Normal file
74
layouts/xedition/css/welcome.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
@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}
|
||||
.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}
|
||||
|
||||
.welcomeXE .statistics{overflow:hidden;position:static;width:100%;margin:0;height:500px;background-image:url(../img/bg_stat.jpg);background-position:50% 0;background-attachment:fixed;background-repeat:no-repeat}
|
||||
.welcomeXE .statistics ul{overflow:hidden;width:1200px;margin:220px auto 0}
|
||||
.welcomeXE .statistics li{float:left;width:384px;margin-left:24px;text-align:center}
|
||||
.welcomeXE .statistics li:first-child{margin-left:0}
|
||||
.welcomeXE .statistics li span{display:block}
|
||||
.welcomeXE .statistics .number{font-family:'Open sans',sans-serif;font-size:48px;color:#333;line-height:60px}
|
||||
.welcomeXE .statistics .text{font-size:16px;line-height:20px;padding:20px 0;font-weight:600}
|
||||
|
||||
.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}
|
||||
|
||||
.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}
|
||||
.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 .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}
|
||||
208
layouts/xedition/css/widget.login.css
Normal file
208
layouts/xedition/css/widget.login.css
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
@charset "utf-8";
|
||||
|
||||
.login_widget{position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;font-family:'나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif;font-weight:400}
|
||||
.login_widget .btn_ly_popup{position:absolute;top:-41px;right:0;width:32px;height:32px;background:url(../img/btn_close.png) 0 0 no-repeat}
|
||||
.login_widget .blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
|
||||
.login_widget .ly_dimmed{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;filter:alpha(opacity=70);opacity:.7}
|
||||
.login_widget .signin{position:absolute;top:50%;margin-top:-224px;left:50%;width:380px;margin-left:-190px;background-color:#fff}
|
||||
.login_widget .signin>.login-header{padding:30px}
|
||||
.login_widget .signin>.login-header>h1{font-family:Raleway,'나눔바른고딕',NanumBarunGothic,ng,AppleGothic,Helvetica,sans-serif;font-size:40px;line-height:50px;font-weight:400;color:#444}
|
||||
.login_widget .signin>.login-body{padding:0 30px}
|
||||
.login_widget .signin>.login-footer{padding:23px 0 42px;margin:20px 30px 0;text-align:center;color:#aaa}
|
||||
.login_widget .signin>.login-footer>a{text-decoration:none;font-size:13px;color:#aaa}
|
||||
.login_widget .signin>.login-footer>a:hover,
|
||||
.login_widget .signin>.login-footer>a:active,
|
||||
.login_widget .signin>.login-footer>a:focus{text-decoration:underline}
|
||||
.login_widget .signin>.login-footer>.f_bar{display:inline-block;margin:0 3px}
|
||||
.login_widget .signin .control-group{position:relative;padding:0;margin:0;clear:both}
|
||||
.login_widget .signin .control-group:before{content:"";display:block;clear:both}
|
||||
.login_widget .signin form{margin:0}
|
||||
.login_widget .signin fieldset{margin:0}
|
||||
.login_widget .signin .chk_label{cursor:pointer;display:inline-block;margin:4px 0 0;color:#999;line-height:20px;font-size:13px}
|
||||
.login_widget .signin input[type="text"],
|
||||
.login_widget .signin input[type="email"],
|
||||
.login_widget .signin input[type="password"]{font-size:16px;width:100%;height:28px;padding:0 6px 3px 1px;border:0;border-bottom:1px solid #aaa;background-color:#fff;line-height:20px;color:#444;box-sizing:border-box}
|
||||
.login_widget .signin .btn_submit{position:relative;font-size:16px;color:#eee;background-color:#444;width:100%;margin:20px 0 0;padding:18px 0px 19px;border:0;cursor:pointer}
|
||||
.login_widget .signin .btn_submit:hover,
|
||||
.login_widget .signin .btn_submit:active{background-color:#333}
|
||||
.login_widget .signin input[type="email"]:focus,
|
||||
.login_widget .signin input[type="password"]:focus,
|
||||
.login_widget .signin input[type="text"]:focus{outline:none}
|
||||
.login_widget .signin .error{margin:2px 0 19px;background:none;color:#fc0005;font-size:13px}
|
||||
.login_widget .signin #warning{display:none;position:absolute;top:44px;left:0;z-index:100;padding:11px 15px;background-color:#444}
|
||||
.login_widget .signin #warning>p{color:#fff;font-size:13px;font-weight:300;line-height:19px}
|
||||
.login_widget .signin #warning .edge{position:absolute;top:-7px;left:40px;width:0;height:0;border-width:0 8px 8px;border-style:solid;border-color:transparent transparent #444}
|
||||
.login_widget .group{position:relative;padding:21px 0 0}
|
||||
.login_widget .info_label{color: #999; font-size: 16px;position: absolute;pointer-events: none;left: 1px;top:23px;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}
|
||||
.login_widget .group{margin-bottom:20px}
|
||||
.login_widget input:focus ~ .info_label,
|
||||
.login_widget input.used ~ .info_label{top:1px;font-size:13px;color:#cda25a}
|
||||
.login_widget .bar{position:relative;display:block;width:100%}
|
||||
.login_widget .bar:before,
|
||||
.login_widget .bar:after{height:2px;width:0;bottom:0;position:absolute;background:#cda25a;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;content:''}
|
||||
.login_widget .bar:before{left:50%}
|
||||
.login_widget .bar:after{right:50%}
|
||||
.login_widget input:focus ~ .bar:before,
|
||||
.login_widget input:focus ~ .bar:after{width:50%}
|
||||
.login_widget .highlight {position: absolute;height: 60%; width: 100px; bottom: 1px; left: 0;pointer-events: none;opacity:0.5}
|
||||
.login_widget input:focus ~ .highlight{-webkit-animation:inputHighlighter 0.3s ease;animation:inputHighlighter 0.3s ease}
|
||||
.login_widget .signin input[type=checkbox]{position:absolute;width:20px;height:20px;opacity:0;opacity:100\9;vertical-align:top}
|
||||
.login_widget .signin input[type=checkbox] ~ .checkbox {box-sizing: border-box;display: inline-block;width: 20px;height: 20px;margin:-1px 9px 0 0;border: 1px solid;background-repeat: no-repeat;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;-webkit-animation: checkboxOff 0.5s;animation: checkboxOff 0.5s;border-color: #c9c9c9;cursor: pointer;position: relative;vertical-align:middle}
|
||||
.login_widget .signin input[type=checkbox] ~ .checkbox:before {content: "";display: block;width: 60px;height: 60px;background: rgba(0, 0, 0, 0.1);position: absolute;top: -22px;left: -22px;z-index: 0;border-radius: 100%;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-animation: checkboxRippleOn 0.5s;animation: checkboxRippleOn 0.5s}
|
||||
.login_widget .signin input[type=checkbox] ~ .checkbox:not(:hover) {-webkit-animation: checkboxOff 0s;animation: checkboxOff 0s}
|
||||
.login_widget .signin input[type=checkbox] ~ .checkbox:not(:hover):before {-webkit-animation: checkboxRippleOn 0s;animation: checkboxRippleOn 0s}
|
||||
.login_widget .signin input[type=checkbox]:checked ~ .checkbox {-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;-webkit-animation: checkboxOn 0.5s;animation: checkboxOn 0.5s;border-color: #cda25a;background-image: -webkit-linear-gradient(315deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);background-image: linear-gradient(135deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a); background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 40px 0px}
|
||||
.login_widget .signin input[type=checkbox]:checked ~ .checkbox:before {-webkit-animation: checkboxRippleOff 0.5s;animation: checkboxRippleOff 0.5s}
|
||||
|
||||
/* Animations */
|
||||
@-webkit-keyframes inputHighlighter {
|
||||
from {background:#cda25a}
|
||||
to {width:0;background:transparent}
|
||||
}
|
||||
|
||||
@keyframes inputHighlighter {
|
||||
from {background:#cda25a}
|
||||
to {width:0;background:transparent}
|
||||
}
|
||||
|
||||
@-webkit-keyframes ripples {
|
||||
0% {opacity:0}
|
||||
25% {opacity:1}
|
||||
100% {width:200%;padding-bottom:200%;opacity:0}
|
||||
}
|
||||
|
||||
@keyframes ripples {
|
||||
0% {opacity:0}
|
||||
25% {opacity:1}
|
||||
100% {width:200%;padding-bottom:200%;opacity:0}
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkboxOn {
|
||||
0% {background-color: rgba(204, 162, 86, 0);background-image: none}
|
||||
48% {background-color: #cda25a;background-image: none;}
|
||||
49% {background-image: -webkit-linear-gradient(315deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);background-image: linear-gradient(135deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a)}
|
||||
50% {
|
||||
background-color: rgba(204, 162, 86, 0);
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 0px 0px;
|
||||
}
|
||||
100% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 40px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkboxOn {
|
||||
0% {background-color: rgba(204, 162, 86, 0);background-image: none}
|
||||
48% {background-color: #cda25a;background-image: none;}
|
||||
49% {background-image: -webkit-linear-gradient(315deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);background-image: linear-gradient(135deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a)}
|
||||
50% {
|
||||
background-color: rgba(204, 162, 86, 0);
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 0px 0px;
|
||||
}
|
||||
100% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), -webkit-linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(204, 162, 86, 0) 50%), linear-gradient(45deg, rgba(204, 162, 86, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 40px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkboxOff {
|
||||
0% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, -20px 0px;
|
||||
}
|
||||
74% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
box-shadow: inset 0 0 0 0 #cda25a;
|
||||
}
|
||||
75% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
box-shadow: inset 0 0 0 20px #cda25a;
|
||||
}
|
||||
80% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 0px 0px;
|
||||
}
|
||||
81% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px;
|
||||
}
|
||||
100% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px;
|
||||
box-shadow: inset 0 0 0 0 #cda25a;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkboxOff {
|
||||
0% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, -20px 0px;
|
||||
}
|
||||
74% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
box-shadow: inset 0 0 0 0 #cda25a;
|
||||
}
|
||||
75% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
box-shadow: inset 0 0 0 20px #cda25a;
|
||||
}
|
||||
80% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 0px 0px;
|
||||
}
|
||||
81% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px;
|
||||
}
|
||||
100% {
|
||||
background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(315deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), -webkit-linear-gradient(#cda25a, #cda25a);
|
||||
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(45deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(135deg, #cda25a 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #cda25a 50%), linear-gradient(#cda25a, #cda25a);
|
||||
background-position: -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px;
|
||||
box-shadow: inset 0 0 0 0 #cda25a;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkboxRippleOn {
|
||||
0% {-webkit-transform: scale(0);transform:scale(0);opacity:1}
|
||||
40% {-webkit-transform: scale(1);transform: scale(1)}
|
||||
50% {opacity:0}
|
||||
100% {-webkit-transform: scale(0);transform: scale(0);opacity:1}
|
||||
}
|
||||
|
||||
@keyframes checkboxRippleOn {
|
||||
0% {transform: scale(0);transform: scale(0);opacity:1}
|
||||
40% {transform: scale(1);transform: scale(1)}
|
||||
50% {opacity:0}
|
||||
100% {transform: scale(0);transform: scale(0);opacity:1}
|
||||
}
|
||||
|
||||
@-webkit-keyframes checkboxRippleOff {
|
||||
0% {-webkit-transform: scale(0);transform: scale(0);opacity:1}
|
||||
40% {-webkit-transform: scale(1);transform: scale(1)}
|
||||
50% {opacity:0}
|
||||
100% {-webkit-transform: scale(0);transform: scale(0);opacity:1}
|
||||
}
|
||||
|
||||
@keyframes checkboxRippleOff {
|
||||
0% {transform: scale(0);transform: scale(0);opacity:1}
|
||||
40% {transform: scale(1);transform: scale(1)}
|
||||
50% {opacity:0}
|
||||
100% {transform: scale(0);transform: scale(0);opacity:1}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue