fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-07 10:41:40 +09:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'feature/xedition-responsive' into develop

Browse source 
Conflicts:
	layouts/xedition/css/layout.css
	layouts/xedition/css/welcome.css
	layouts/xedition/css/xeicon.css
	layouts/xedition/js/layout.js
	layouts/xedition/layout.html
This commit is contained in:
bnu 2015-07-06 18:15:09 +09:00
commit 3e7a1c1544
9 changed files with 5840 additions and 519 deletions
Download patch file Download diff file Expand all files Collapse all files

1654
layouts/xedition/css/layout.css
View file

File diff suppressed because it is too large Load diff

549
layouts/xedition/css/welcome.css
View file

@ -1,78 +1,503 @@
@charset "utf-8"; @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 {
.content + .welcomeXE { padding-top: 0;} padding-top: 50px;
.welcomeXE section{width:1200px;margin:0 auto} font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif
.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} .content + .welcomeXE {
.welcomeXE .intro{width:408px;height:600px;padding-right:792px;background:url(../img/intro.png) 100% 100% no-repeat} padding-top: 0;
.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 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:hover,
.welcomeXE .intro .btn_start:active .welcomeXE .intro .btn_start:active
.welcomeXE .intro .btn_start:focus{background-color:#cda25a;color:#fff} .welcomeXE .intro .btn_start:focus {
background-color: #cda25a;
color: #fff
}
.bg-holder {
background-image: url('../img/bg_stat.jpg');
}
/* section.xeicon */ /* section.xeicon */
.welcomeXE .xeicon{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 .xeicon {
.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; } overflow: hidden;
.welcomeXE .xeicon h1 a {color: #FFF; } position: static;
.welcomeXE .xeicon .button-area {text-align: center; } width: 100%;
.welcomeXE .xeicon .button-area .btn_item {font-size: 14px; letter-spacing: 2px;} 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 */ /* section.guide */
.welcomeXE .guide{height:640px;padding-top:80px} .welcomeXE .guide {
.welcomeXE .guide ul{padding-top:27px} height: 640px;
.welcomeXE .guide li{position:relative;float:left;width:314px;min-height:140px;padding:0 0 0 70px;margin:0 0 30px 0} padding-top: 80px
.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 ul {
.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} 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:hover,
.welcomeXE .guide .ico:active, .welcomeXE .guide .ico:active,
.welcomeXE .guide .ico:focus{background-color:#cda25a} .welcomeXE .guide .ico:focus {
.welcomeXE .guide p a{color:#444} background-color: #cda25a
}
.welcomeXE .guide p a {
color: #444
}
.welcomeXE .guide p a:hover, .welcomeXE .guide p a:hover,
.welcomeXE .guide p a:active, .welcomeXE .guide p a:active,
.welcomeXE .guide p a:focus{color:#cda25a;border-bottom:1px solid #cda25a} .welcomeXE .guide p a:focus {
color: #cda25a;
border-bottom: 1px solid #cda25a
}
/* section.features */ /* section.features */
.welcomeXE .features{width:100%;margin:0;height:800px;padding-top:80px;background-color:#444} .welcomeXE .features {
width: 100%;
margin: 0;
height: 800px;
padding-top: 80px;
background-color: #444
}
.welcomeXE .features .noti, .welcomeXE .features .noti,
.welcomeXE .features .tit, .welcomeXE .features .tit,
.welcomeXE .features .cont{width:1200px;margin-left:auto;margin-right:auto} .welcomeXE .features .cont {
.welcomeXE .features .tit{color:#f6f6f6} width: 1200px;
.welcomeXE .features .cont{font-size:15px;line-height:27px;color:#ddd} margin-left: auto;
.welcomeXE .features ul{overflow:hidden;margin-top:38px;padding:0 20px} margin-right: auto
.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 .tit {
.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} color: #f6f6f6
.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 .cont {
.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} font-size: 15px;
.welcomeXE .features .fe_box a:hover{background-color:#f6f6f6;border-color:#f6f6f6;color:#cda25a} line-height: 27px;
.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} color: #ddd
.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 ul {
.welcomeXE .features .fe_box.on .fe_top{top:-104px} overflow: hidden;
.welcomeXE .features .fe_box.on .fe_bottom{top:-67px} margin-top: 38px;
.welcomeXE .features .fe_box.on h2{color:#f6f6f6} padding: 0 20px
.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 li {
.welcomeXE .features .fe_box .ico3{background-position:-140px 0} float: left;
.welcomeXE .features .fe_box .ico4{background-position:-210px 0} width: 25%;
.welcomeXE .features .fe_box.on .ico2{background-position:-70px -70px} height: 480px
.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*/ /*section.connect*/
.welcomeXE .connect{height:344px;padding-top:80px} .welcomeXE .connect {
.welcomeXE .connect ul{overflow:hidden;padding:40px 0} height: 344px;
.welcomeXE .connect li{position:relative;float:left;width:180px;margin-left:24px;padding:4px 0 0 102px;min-height:78px} padding-top: 80px
.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 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:hover,
.welcomeXE .connect .ico:active, .welcomeXE .connect .ico:active,
.welcomeXE .connect .ico:focus{background-color:#555} .welcomeXE .connect .ico:focus {
.welcomeXE .connect .ico i{line-height:78px} background-color: #555
.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} .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;
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;
}
.welcomeXE .connect li {
margin-left: 0;
width: auto;
min-height: 78px;
margin-bottom: 20px;
}
}

673
layouts/xedition/css/widget.login.css
View file

@ -1,208 +1,535 @@
@charset "utf-8"; @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 {
.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} position: fixed;
.login_widget .blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0} top: 0;
.login_widget .ly_dimmed{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;filter:alpha(opacity=70);opacity:.7} left: 0;
.login_widget .signin{position:absolute;top:50%;margin-top:-224px;left:50%;width:380px;margin-left:-190px;background-color:#fff} z-index: 999999;
.login_widget .signin>.login-header{padding:30px} width: 100%;
.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} height: 100%;
.login_widget .signin>.login-body{padding:0 30px} font-family: '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
.login_widget .signin>.login-footer{padding:23px 0 42px;margin:20px 30px 0;text-align:center;color:#aaa} font-weight: 400
.login_widget .signin>.login-footer>a{text-decoration:none;font-size:13px;color:#aaa} }
.login_widget .signin>.login-footer>a:hover, .login_widget .btn_ly_popup {
.login_widget .signin>.login-footer>a:active, position: absolute;
.login_widget .signin>.login-footer>a:focus{text-decoration:underline} top: -41px;
.login_widget .signin>.login-footer>.f_bar{display:inline-block;margin:0 3px} right: 0;
.login_widget .signin .control-group{position:relative;padding:0;margin:0;clear:both} width: 32px;
.login_widget .signin .control-group:before{content:"";display:block;clear:both} height: 32px;
.login_widget .signin form{margin:0} background: url(../img/btn_close.png) 0 0 no-repeat
.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 .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="text"],
.login_widget .signin input[type="email"], .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 input[type="password"] {
.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} 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:hover,
.login_widget .signin .btn_submit:active{background-color:#333} .login_widget .signin .btn_submit:active {
background-color: #333
}
.login_widget .signin input[type="email"]:focus, .login_widget .signin input[type="email"]:focus,
.login_widget .signin input[type="password"]:focus, .login_widget .signin input[type="password"]:focus,
.login_widget .signin input[type="text"]:focus{outline:none} .login_widget .signin input[type="text"]:focus {
.login_widget .signin .error{margin:2px 0 19px;background:none;color:#fc0005;font-size:13px} outline: none
.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 .error {
.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} margin: 2px 0 19px;
.login_widget .group{position:relative;padding:21px 0 0} background: none;
.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} color: #fc0005;
.login_widget .group{margin-bottom:20px} 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:focus ~ .info_label,
.login_widget input.used ~ .info_label{top:1px;font-size:13px;color:#cda25a} .login_widget input.used ~ .info_label {
.login_widget .bar{position:relative;display:block;width:100%} top: 1px;
font-size: 13px;
color: #cda25a
}
.login_widget .bar {
position: relative;
display: block;
width: 100%
}
.login_widget .bar:before, .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:after {
.login_widget .bar:before{left:50%} height: 2px;
.login_widget .bar:after{right:50%} 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:before,
.login_widget input:focus ~ .bar:after{width:50%} .login_widget input:focus ~ .bar:after {
.login_widget .highlight {position: absolute;height: 60%; width: 100px; bottom: 1px; left: 0;pointer-events: none;opacity:0.5} width: 50%
.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 .highlight {
.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} position: absolute;
.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} height: 60%;
.login_widget .signin input[type=checkbox] ~ .checkbox:not(:hover) {-webkit-animation: checkboxOff 0s;animation: checkboxOff 0s} width: 100px;
.login_widget .signin input[type=checkbox] ~ .checkbox:not(:hover):before {-webkit-animation: checkboxRippleOn 0s;animation: checkboxRippleOn 0s} bottom: 1px;
.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} left: 0;
.login_widget .signin input[type=checkbox]:checked ~ .checkbox:before {-webkit-animation: checkboxRippleOff 0.5s;animation: checkboxRippleOff 0.5s} 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 */ /* Animations */
@-webkit-keyframes inputHighlighter { @-webkit-keyframes inputHighlighter {
from {background:#cda25a} from {
to {width:0;background:transparent} background: #cda25a
}
to {
width: 0;
background: transparent
}
} }
@keyframes inputHighlighter { @keyframes inputHighlighter {
from {background:#cda25a} from {
to {width:0;background:transparent} background: #cda25a
}
to {
width: 0;
background: transparent
}
} }
@-webkit-keyframes ripples { @-webkit-keyframes ripples {
0% {opacity:0} 0% {
25% {opacity:1} opacity: 0
100% {width:200%;padding-bottom:200%;opacity:0} }
25% {
opacity: 1
}
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0
}
} }
@keyframes ripples { @keyframes ripples {
0% {opacity:0} 0% {
25% {opacity:1} opacity: 0
100% {width:200%;padding-bottom:200%;opacity:0} }
25% {
opacity: 1
}
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0
}
} }
@-webkit-keyframes checkboxOn { @-webkit-keyframes checkboxOn {
0% {background-color: rgba(204, 162, 86, 0);background-image: none} 0% {
48% {background-color: #cda25a;background-image: none;} background-color: rgba(204, 162, 86, 0);
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)} background-image: none
50% { }
background-color: rgba(204, 162, 86, 0); 48% {
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-color: #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-image: none;
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 0px 0px; }
} 49% {
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: -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-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; 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 { @keyframes checkboxOn {
0% {background-color: rgba(204, 162, 86, 0);background-image: none} 0% {
48% {background-color: #cda25a;background-image: none;} background-color: rgba(204, 162, 86, 0);
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)} background-image: none
50% { }
background-color: rgba(204, 162, 86, 0); 48% {
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-color: #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-image: none;
background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 0px 0px; }
} 49% {
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: -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-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; 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 { @-webkit-keyframes checkboxOff {
0% { 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: -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-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; background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, -20px 0px;
} }
74% { 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: -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-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; box-shadow: inset 0 0 0 0 #cda25a;
} }
75% { 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: -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-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; box-shadow: inset 0 0 0 20px #cda25a;
} }
80% { 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: -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-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; background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 0px 0px;
} }
81% { 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: -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-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; background-position: -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px;
} }
100% { 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: -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-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; background-position: -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px;
box-shadow: inset 0 0 0 0 #cda25a; box-shadow: inset 0 0 0 0 #cda25a;
} }
} }
@keyframes checkboxOff { @keyframes checkboxOff {
0% { 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: -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-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; background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, -20px 0px;
} }
74% { 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: -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-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; box-shadow: inset 0 0 0 0 #cda25a;
} }
75% { 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: -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-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; box-shadow: inset 0 0 0 20px #cda25a;
} }
80% { 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: -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-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; background-position: 50% 3px, 5px -5px, -11px -5px, -9px 0px, -6px -2px, 0px -12px, 0px 0px;
} }
81% { 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: -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-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; background-position: -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px;
} }
100% { 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: -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-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; background-position: -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px, -100px 0px;
box-shadow: inset 0 0 0 0 #cda25a; box-shadow: inset 0 0 0 0 #cda25a;
} }
} }
@-webkit-keyframes checkboxRippleOn { @-webkit-keyframes checkboxRippleOn {
0% {-webkit-transform: scale(0);transform:scale(0);opacity:1} 0% {
40% {-webkit-transform: scale(1);transform: scale(1)} -webkit-transform: scale(0);
50% {opacity:0} transform: scale(0);
100% {-webkit-transform: scale(0);transform: scale(0);opacity:1} 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 { @keyframes checkboxRippleOn {
0% {transform: scale(0);transform: scale(0);opacity:1} 0% {
40% {transform: scale(1);transform: scale(1)} transform: scale(0);
50% {opacity:0} transform: scale(0);
100% {transform: scale(0);transform: scale(0);opacity:1} opacity: 1
}
40% {
transform: scale(1);
transform: scale(1)
}
50% {
opacity: 0
}
100% {
transform: scale(0);
transform: scale(0);
opacity: 1
}
} }
@-webkit-keyframes checkboxRippleOff { @-webkit-keyframes checkboxRippleOff {
0% {-webkit-transform: scale(0);transform: scale(0);opacity:1} 0% {
40% {-webkit-transform: scale(1);transform: scale(1)} -webkit-transform: scale(0);
50% {opacity:0} transform: scale(0);
100% {-webkit-transform: scale(0);transform: scale(0);opacity:1} 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 { @keyframes checkboxRippleOff {
0% {transform: scale(0);transform: scale(0);opacity:1} 0% {
40% {transform: scale(1);transform: scale(1)} transform: scale(0);
50% {opacity:0} transform: scale(0);
100% {transform: scale(0);transform: scale(0);opacity:1} opacity: 1
}
40% {
transform: scale(1);
transform: scale(1)
}
50% {
opacity: 0
}
100% {
transform: scale(0);
transform: scale(0);
opacity: 1
}
} }

290
layouts/xedition/css/xeicon.css
View file

@ -1,54 +1,266 @@
@charset "utf-8"; @charset "utf-8";
/* reset parent style */ /* reset parent style */
.body.sub {width:100% !important; margin:0;} .body.sub {
.body.sub.full_width .content {width:100% !important; padding-bottom:0px !important;} width: 100% !important;
margin: 0;
}
.body.sub.full_width .content {
width: 100% !important;
padding-bottom: 0px !important;
}
/* XEicon page common style */ /* XEicon page common style */
.XEicon { padding-top: 60px;} .XEicon {
.XEicon .fixedwidth {width:1200px; margin:0 auto;} padding-top: 60px;
.XEicon .tit {position:relative;} }
.XEicon .tit h1 {font-size:29px; text-align:center; letter-spacing:2px;} .XEicon .fixedwidth {
.XEicon .tit h1:after {position:absolute; top:115%; left:49%; width:20px; height:3px; background-color:#cda25a; content: "";} width: 1200px;
margin: 0 auto;
}
.XEicon .tit {
position: relative;
}
.XEicon .tit h1 {
font-size: 29px;
text-align: center;
letter-spacing: 2px;
}
.XEicon .tit h1:after {
position: absolute;
top: 115%;
left: 49%;
width: 20px;
height: 3px;
background-color: #cda25a;
content: "";
}
/* a tag style */ /* a tag style */
.XEicon p a{color:#444} .XEicon p a {
color: #444
}
.XEicon p a:hover, .XEicon p a:hover,
.XEicon p a:active, .XEicon p a:active,
.XEicon p a:focus{color:#cda25a;border-bottom:1px solid #cda25a} .XEicon p a:focus {
color: #cda25a;
border-bottom: 1px solid #cda25a
}
/* section .main_title */ /* section .main_title */
.XEicon .main_title h1 {margin-bottom: 47px;font-size: 34px;font-weight: 600;color: #cda25a;text-align: center;font-family: Raleway,'나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif;text-transform: uppercase;letter-spacing: 1px;} .XEicon .main_title h1 {
.XEicon .main_title p {font-size:15px;line-height:28px;color:#444;text-align:center} margin-bottom: 47px;
font-size: 34px;
font-weight: 600;
color: #cda25a;
text-align: center;
font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
.XEicon .main_title p {
font-size: 15px;
line-height: 28px;
color: #444;
text-align: center
}
/* section .feature */ /* section .feature */
.XEicon .feature{height:518px;padding-top:120px;} .XEicon .feature {
.XEicon .feature ul{padding-top:80px} height: 518px;
.XEicon .feature li{position:relative;float:left;width:314px;min-height:140px;padding:0 16px 0 70px;margin:0 0 30px 0} padding-top: 120px;
.XEicon .feature h2{padding:7px 24px 13px 0;font-size:17px;font-weight:600;line-height:23px;color:#333} }
.XEicon .feature p{padding:0 24px 0 0;font-size:14px;line-height:26px;color:#888} .XEicon .feature ul {
.XEicon .feature .ico{position:absolute;top:0;left:0;width:48px;height:48px;font-size:22px;text-align:center;line-height:50px;color:#555} padding-top: 80px
}
.XEicon .feature li {
position: relative;
float: left;
width: 314px;
min-height: 140px;
padding: 0 16px 0 70px;
margin: 0 0 30px 0
}
.XEicon .feature h2 {
padding: 7px 24px 13px 0;
font-size: 17px;
font-weight: 600;
line-height: 23px;
color: #333
}
.XEicon .feature p {
padding: 0 24px 0 0;
font-size: 14px;
line-height: 26px;
color: #888
}
.XEicon .feature .ico {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
font-size: 22px;
text-align: center;
line-height: 50px;
color: #555
}
/* section .get_started */ /* section .get_started */
.XEicon .get_started {height:550px; padding-top:80px; background: #f6f6f6; box-sizing:border-box;} .XEicon .get_started {
.XEicon .get_started .cont {font-size:15px; margin-top:75px; color:#888;} height: 550px;
.XEicon .get_started ul {margin-top:34px;} padding-top: 80px;
.XEicon .get_started li {position:relative; float:left; width:286px; height:212px; margin-right:15px; border:1px solid #e8e8e8; background:#fff; text-align:center;} background: #f6f6f6;
.XEicon .get_started li:last-child {margin-right:0;} box-sizing: border-box;
.XEicon .get_started li h2 {padding:33px 0 19px; font-size:17px; font-weight: 600} }
.XEicon .get_started li p {padding: 0 37px; font-size:14px; line-height: 26px; color:#888;} .XEicon .get_started .cont {
.XEicon .get_started li > a {position:absolute; display:block; bottom:0; width:100%; height:50px; background:#888; border-top:1px solid #e1e1e1; line-height: 50px; font-size:14px; font-weight:600; text-transform:uppercase; color:#fff; -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} font-size: 15px;
margin-top: 75px;
color: #888;
}
.XEicon .get_started ul {
margin:34px -16px 0 0;
}
.XEicon .get_started li {
position: relative;
float: left;
width: 286px;
height: 212px;
margin-right: 16px;
border: 1px solid #e8e8e8;
background: #fff;
text-align: center;
}
.XEicon .get_started li:last-child {
margin-right: 0;
}
.XEicon .get_started li h2 {
padding: 33px 0 19px;
font-size: 17px;
font-weight: 600
}
.XEicon .get_started li p {
padding: 0 37px;
font-size: 14px;
line-height: 26px;
color: #888;
}
.XEicon .get_started li > a {
position: absolute;
display: block;
bottom: 0;
width: 100%;
height: 50px;
background: #888;
border-top: 1px solid #e1e1e1;
line-height: 50px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: #fff;
-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
}
.XEicon .get_started li > a:hover, .XEicon .get_started li > a:hover,
.XEicon .get_started li > a:active, .XEicon .get_started li > a:active,
.XEicon .get_started li > a:focus {background-color:#cda25a;color:#fff;} .XEicon .get_started li > a:focus {
background-color: #cda25a;
.XEicon .get_started li > a .xeicon {display: none; margin-right:6px; font-size:140%; vertical-align: middle} color: #fff;
.XEicon .get_started li > a:hover .xeicon {display: inline-block; margin-top:-4px;} }
.XEicon .get_started li > a .xeicon {
display: none;
margin-right: 6px;
font-size: 140%;
vertical-align: middle
}
.XEicon .get_started li > a:hover .xeicon {
display: inline-block;
margin-top: -4px;
}
/* section .contribution */ /* section .contribution */
.XEicon .contribution {height:442px; padding-top:93px; box-sizing:border-box; text-align:center;} .XEicon .contribution {
.XEicon .contribution .cont {font-size:15px;line-height:26px;text-align:center; margin-top:58px; color:#888;} height: 442px;
.XEicon .contribution .btn_github{display:inline-block;margin:50px 0;padding:0 40px;height:52px;border:2px solid #cda25a;background-color:#fff;font-size:15px;line-height:52px;font-weight: 600;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} padding-top: 93px;
box-sizing: border-box;
text-align: center;
}
.XEicon .contribution .cont {
font-size: 15px;
line-height: 26px;
text-align: center;
margin-top: 58px;
color: #888;
}
.XEicon .contribution .btn_github {
display: inline-block;
margin: 50px 0;
padding: 0 40px;
height: 52px;
border: 2px solid #cda25a;
background-color: #fff;
font-size: 15px;
line-height: 52px;
font-weight: 600;
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
}
.XEicon .contribution .btn_github:hover, .XEicon .contribution .btn_github:hover,
.XEicon .contribution .btn_github:active .XEicon .contribution .btn_github:active
.XEicon .contribution .btn_github:focus{background-color:#cda25a;color:#fff} .XEicon .contribution .btn_github:focus {
background-color: #cda25a;
color: #fff
}
@media all and (max-width: 479px) {
.XEicon .fixedwidth {
width: auto;
}
.XEicon .main_title h1 {
margin-bottom: 28px;
font-size: 21px;
}
.XEicon .main_title p {
padding: 0 14px;
text-align: left;
}
.XEicon .tit h1 {
font-size: 20px;
text-align: center;
letter-spacing: 2px;
}
.XEicon .tit h1:after {
left: 50%;
margin-left: -10px;
}
.XEicon .feature {
height: auto;
padding-top: 90px;
}
.XEicon .feature ul {
padding: 50px 14px 0 14px;
}
.XEicon .feature li {
clear: both;
width: auto;
padding: 0 0 0 70px;
}
.XEicon .feature h2 {
padding-top:10px;
}
.XEicon .get_started {
height: auto;
padding: 80px 14px 20px 14px;
}
.XEicon .get_started li {
float: none;
width: auto;
margin-right: 0;
margin-bottom: 15px;
}
.XEicon .contribution .cont {
padding: 0 14px;
text-align: left;
}
}

2893
layouts/xedition/js/idangerous.swiper.js Normal file
View file

File diff suppressed because it is too large Load diff

126
layouts/xedition/js/jquery.parallax-scroll.js Normal file
View file

@ -0,0 +1,126 @@
/*
* Parallax-Scroll - v0.2.0
* jQuery plugin for background-attachment: scroll with friction, similar to the parallax scrolling effect on Spotify.
* http://parallax-scroll.aenism.com
*
* Made by Aen Tan
* Under MIT License
*/
;(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["jquery"], factory);
} else {
// Browser globals
factory(root.jQuery);
}
}(this, function ($) {
"use strict";
var ParallaxScroll,
defaults = {
friction: 0.5,
direction: "vertical"
},
$win = $(window),
lastTickTime = 0;
window.requestAnimationFrame = function (callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 5 - (currTime - lastTickTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTickTime = currTime + timeToCall;
return id;
};
ParallaxScroll = function (background, options) {
return {
init: function () {
this.$background = $(background);
this.settings = $.extend({}, defaults, options);
this._initStyles();
this._bindEvents();
},
_initStyles: function () {
this.$background.css({
"background-attachment": "scroll"
});
},
_visibleInViewport: function () {
var vpHeight = $win.height();
var rec = this.$background.get(0).getBoundingClientRect();
return (rec.top < vpHeight && rec.bottom > 0) || (rec.bottom <= vpHeight && rec.top > vpHeight);
},
_bindEvents: function () {
var self = this;
$win.on("load scroll resize", function () {
self._requestTick();
});
},
_requestTick: function () {
var self = this;
if (!this.ticking) {
this.ticking = true;
requestAnimationFrame(function () {
self._updateBgPos();
});
}
},
_updateBgPos: function () {
if (this._visibleInViewport()) {
var winW = $win.width();
var winH = $win.height();
var imgW = this.$background.data("width");
var imgH = this.$background.data("height");
var imgA = imgW / imgH;
var bgW = this.$background.width();
var bgH = this.$background.height();
var bgA = bgW / bgH;
var revA = bgA < imgA;
var bgScale = bgW / imgW;
var bgScaledH = imgH * bgScale;
var bgScaledW = imgW * bgScale;
var bgOffsetTop = this.$background.offset().top;
var winScrollTop = $win.scrollTop();
var bgScrollTop = winScrollTop - bgOffsetTop;
var xDistToMove = winH + bgScaledH;
var yDistToMove = winW + bgScaledW;
var xf1 = bgScrollTop * (winH / xDistToMove);
var xf2 = bgScrollTop / winH;
var yf1 = bgScrollTop * (winW / yDistToMove);
var yf2 = bgScrollTop / winW;
var centerOffsetY = (winH - bgH) / 2;
centerOffsetY = revA ? centerOffsetY * xf2 : centerOffsetY;
var centerOffsetX = (winW - bgW) / 2;
centerOffsetX = revA ? centerOffsetX : centerOffsetX * yf2;
var bgFriction = revA? this.settings.friction * (bgA * 2) : this.settings.friction * bgA;
var bgSize;
var bgPos;
if (this.settings.direction === "horizontal") {
bgSize = revA ? winW + "px auto" : "auto " + winH + "px";
bgPos = (centerOffsetX - (yf1 * bgFriction)) + "px 50%";
} else {
bgSize = revA ? "auto " + winH + "px" : winW + "px auto";
bgPos = "50% " + ((xf1 * bgFriction) - centerOffsetY) + "px";
}
this.$background.css({
"background-size": bgSize,
"background-position": bgPos
});
}
this.ticking = false;
}
};
};
ParallaxScroll.defaults = defaults;
$.fn.parallaxScroll = function (options) {
return this.each(function () {
new ParallaxScroll(this, options).init();
});
};
return ParallaxScroll;
}));

35
layouts/xedition/js/layout.js
View file

@ -1,4 +1,4 @@
(function($){ (function($){
"use strict"; "use strict";
$(function(){ $(function(){
var $shrinkHeaderHeight = 300; var $shrinkHeaderHeight = 300;
@ -38,9 +38,13 @@
}); });
$(window).triggerHandler('scroll'); $(window).triggerHandler('scroll');
} }
// Gnb // Gnb
$gnb.find('>ul>li>a') if($(document).width() > 480){
$gnb.addClass('pc-gnb');
}
var $pc_gnb = $('.pc-gnb');
$pc_gnb.find('>ul>li>a')
.mouseover(function(){ .mouseover(function(){
$gnb.find('>ul>li>ul:visible').hide().parent('li').removeClass('on'); $gnb.find('>ul>li>ul:visible').hide().parent('li').removeClass('on');
$(this).next('ul:hidden').stop().fadeIn(200).parent('li').addClass('on') $(this).next('ul:hidden').stop().fadeIn(200).parent('li').addClass('on')
@ -53,7 +57,7 @@
$gnb.find('>ul>li>ul').hide().parent().removeClass('on') $gnb.find('>ul>li>ul').hide().parent().removeClass('on')
}); });
$gnb.find('>ul>li>ul>li>a') $pc_gnb.find('>ul>li>ul>li>a')
.mouseover(function(){ .mouseover(function(){
$gnb.find('>ul>li>ul>li>ul:visible').hide().parent('li').removeClass('on'); $gnb.find('>ul>li>ul>li>ul:visible').hide().parent('li').removeClass('on');
$(this).next('ul:hidden').stop().fadeIn(200).parent('li').addClass('on') $(this).next('ul:hidden').stop().fadeIn(200).parent('li').addClass('on')
@ -65,7 +69,16 @@
.mouseleave(function(){ .mouseleave(function(){
$gnb.find('>ul>li>ul>li>ul').hide().parent().removeClass('on') $gnb.find('>ul>li>ul>li>ul').hide().parent().removeClass('on')
}); });
$("#mobile_menu_btn").on('click', function(){
var isOpened = $(this);
if(isOpened.hasClass('opened')){
$("#gnb").find(">ul").slideUp(200);
}else{
$("#gnb").find(">ul:not(:animated)").slideDown(200);
}
isOpened.toggleClass('opened');
});
// login popup // login popup
$hoverEl.on('mouseenter mouseleave focusin focusout',function(e){ $hoverEl.on('mouseenter mouseleave focusin focusout',function(e){
e.preventDefault(); e.preventDefault();
@ -75,8 +88,7 @@
$(this).removeClass('on'); $(this).removeClass('on');
} }
}); });
// Search
// Search
$searchEl.click(function(){ $searchEl.click(function(){
if($searchForm.is(':hidden')){ if($searchForm.is(':hidden')){
$searchForm.fadeIn().find('input').focus(); $searchForm.fadeIn().find('input').focus();
@ -139,7 +151,6 @@
$('.sub_type3 .bg_img').parallax('50%',0.4); $('.sub_type3 .bg_img').parallax('50%',0.4);
}) })
})(jQuery); })(jQuery);
(function($) { (function($) {
"use strict"; "use strict";
var $window = $(window); var $window = $(window);
@ -190,3 +201,11 @@
} }
})(jQuery); })(jQuery);
(function($){
$(function(){
$('.bg-holder').parallaxScroll({
friction: 0.2
});
});
})(jQuery);

137
layouts/xedition/layout.html
View file

@ -1,5 +1,5 @@
<!--// META --> <!--// META -->
{Context::addHtmlHeader('<meta name="viewport" content="width=1240">')} {Context::addHtmlHeader('<meta name="viewport" content="width=device-width, user-scalable=no">')}
<!--// LANG --> <!--// LANG -->
<load target="./lang" /> <load target="./lang" />
@ -145,17 +145,16 @@
<!--// CSS --> <!--// CSS -->
<load target="./css/layout.css" /> <load target="./css/layout.css" />
<load target="./css/camera.css" /> <load target="./css/idangerous.swiper.css" />
<load target="./css/welcome.css" /> <load target="./css/welcome.css" />
<load target="./css/webfont.css" /> <load target="./css/webfont.css" />
<load target="./css/xeicon.css" cond="$mid === 'xeicon'" /> <load target="./css/xeicon.css" cond="$mid === 'xeicon'" />
<load target="../../common/xeicon/xeicon.min.css" /> <load target="../../common/xeicon/xeicon.min.css" />
<!--// JS --> <!--// JS -->
<load target="./js/jquery.easing.js" /> <load cond="$_enable_slide" target="./js/idangerous.swiper.min.js" />
<load cond="$_enable_slide" target="./js/camera.min.js" />
<load target="./js/layout.js" /> <load target="./js/layout.js" />
<load cond="$layout_info->use_demo ==='Y'" target="./js/welcome.js" /> <load cond="$layout_info->use_demo ==='Y'" target="./js/welcome.js" />
<load target="./js/SmoothScroll.min.js" /> <load target="./js/jquery.parallax-scroll.min.js" />
<!--// BODY --> <!--// BODY -->
@ -178,7 +177,7 @@
</div> </div>
</div> </div>
<header class="header"> <header class="header {$_visual_class}">
<!--// LOGO --> <!--// LOGO -->
<h1 class="logo-item"> <h1 class="logo-item">
{@ $_logo_img = $layout_info->logo_img} {@ $_logo_img = $layout_info->logo_img}
@ -261,6 +260,13 @@
<!-- GNB --> <!-- GNB -->
<nav cond="$GNB->list" class="gnb" id="gnb"> <nav cond="$GNB->list" class="gnb" id="gnb">
<div id="mobile_menu_btn" class="menu_btn">
<div class="menu_bar">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
</div>
</div>
<ul> <ul>
<li loop="$GNB->list => $key1, $val1"> <li loop="$GNB->list => $key1, $val1">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'">{$val1['link']}</a> <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'">{$val1['link']}</a>
@ -294,52 +300,56 @@
<h1>{$sub_header_title}</h1> <h1>{$sub_header_title}</h1>
</div> </div>
</div> </div>
<!-- Swiper -->
<div cond="$layout_info->layout_type === 'main' && $_enable_slide" class="visual"> <div cond="$layout_info->layout_type === 'main' && $_enable_slide" class="visual swiper-container">
<!-- 슬라이드 --> <!-- 슬라이드 -->
<div class="camera_wrap"> <div class="swiper-wrapper">
<!--@if($_sample_slide)--> <!--@if($_sample_slide)-->
<include target="./demo/slide.html" /> <include target="./demo/slide.html" />
<!--@else--> <!--@else-->
<div cond="$layout_info->slide_img1" data-src="{$layout_info->slide_img1}"> <div cond="$layout_info->slide_img1" style="background-image:url('{$layout_info->slide_img1}');">
<div cond="$layout_info->slide_text1" class="camera_caption fadeIn"> <div cond="$layout_info->slide_text1">
<div class="camera_caption_wrap"> <div>
{$layout_info->slide_text1} {$layout_info->slide_text1}
</div>
</div> </div>
</div> </div>
<div cond="$layout_info->slide_img2" data-src="{$layout_info->slide_img2}">
<div cond="$layout_info->slide_text2" class="camera_caption fadeIn">
<div class="camera_caption_wrap">
{$layout_info->slide_text2}
</div>
</div>
</div>
<div cond="$layout_info->slide_img3" data-src="{$layout_info->slide_img3}">
<div cond="$layout_info->slide_text3" class="camera_caption fadeIn">
<div class="camera_caption_wrap">
{$layout_info->slide_text3}
</div>
</div>
</div>
<div cond="$layout_info->slide_img4" data-src="{$layout_info->slide_img4}">
<div cond="$layout_info->slide_text4" class="camera_caption fadeIn">
<div class="camera_caption_wrap">
{$layout_info->slide_text4}
</div>
</div>
</div>
<div cond="$layout_info->slide_img5" data-src="{$layout_info->slide_img5}">
<div cond="$layout_info->slide_text5" class="camera_caption fadeIn">
<div class="camera_caption_wrap">
{$layout_info->slide_text5}
</div>
</div>
</div>
<!--@end-->
</div> </div>
<!-- END:슬라이드 --> <div cond="$layout_info->slide_img2" style="background-image:url('{$layout_info->slide_img2}');">
</div> <div cond="$layout_info->slide_text2">
<div>
{$layout_info->slide_text2}
</div>
</div>
</div>
<div cond="$layout_info->slide_img3" style="background-image:url('{$layout_info->slide_img3}');">
<div cond="$layout_info->slide_text3">
<div>
{$layout_info->slide_text3}
</div>
</div>
</div>
<div cond="$layout_info->slide_img4" style="background-image:url('{$layout_info->slide_img4}');">
<div cond="$layout_info->slide_text4">
<div>
{$layout_info->slide_text4}
</div>
</div>
</div>
<div cond="$layout_info->slide_img5" style="background-image:url('{$layout_info->slide_img5}');">
<div cond="$layout_info->slide_text5">
<div>
{$layout_info->slide_text5}
</div>
</div>
</div>
<!--@end-->
</div>
<!-- END:슬라이드 -->
<!-- Add Pagination -->
<div class="pagination"></div>
<div class="swiper-button left"><button type="button" class="swiper-button-prev"><i class="xi-angle-left"></i></button></div>
<div class="swiper-button right"><button type="button" class="swiper-button-next"><i class="xi-angle-right"></i></button></div>
</div>
<!-- /VISUAL --> <!-- /VISUAL -->
<!-- BODY --> <!-- BODY -->
@ -412,6 +422,15 @@
<include target="./demo/copyright.html" /> <include target="./demo/copyright.html" />
<!--@end--> <!--@end-->
</p> </p>
<ul class="mobile-footer-member">
<!--@if(!$is_logged)-->
<li><a href="{getUrl('act','dispMemberLoginForm')}">{$lang->cmd_login}</a></li>
<li><a href="{getUrl('act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
<!--@else-->
<li><a href="{getUrl('act','dispMemberLogout')}">{$lang->cmd_logout}</a></li>
<li><a href="{getUrl('act','dispMemberInfo')}">{$lang->cmd_view_member_info}</a></li>
<!--@end-->
</ul>
</div> </div>
</footer> </footer>
</div> </div>
@ -504,4 +523,22 @@
}); });
</script> </script>
</section> </section>
<!-- /Login widget --> <!-- /Login widget -->
<script cond="$_enable_slide">
jQuery(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
autoplay: 6000,
loop: true,
pagination: '.pagination',
paginationClickable: true
});
jQuery('.swiper-button-next').on('click', function(e){
e.preventDefault();
swiper.swipeNext();
});
jQuery('.swiper-button-prev').on('click', function(e){
e.preventDefault();
swiper.swipePrev();
});
});
</script>

2
modules/install/script/xeicon_content/xeicon_content_ko_3.html
View file

@ -1,7 +1,7 @@
<section class="get_started"> <section class="get_started">
<div class="fixedwidth"> <div class="fixedwidth">
<div class="tit"><h1>GET STARTED</h1></div> <div class="tit"><h1>GET STARTED</h1></div>
<p class="cont">XEIcon 사용과 설치 방법은 매우 간단합니다. 자세한 사용방법을 <a href="#">XEIcon 공식사이트</a>에서 확인해보세요!</p> <p class="cont">XEIcon 사용과 설치 방법은 매우 간단합니다. 자세한 사용방법을 <a href="http://xpressengine.github.io/XEIcon/">XEIcon 공식사이트</a>에서 확인해보세요!</p>
<ul> <ul>
<li> <li>
<h2>최신버전 다운로드</h2> <h2>최신버전 다운로드</h2>