mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-06 02:01:40 +09:00
Merge branch 'feature/xedition-responsive' into develop
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
commit
3e7a1c1544
9 changed files with 5840 additions and 519 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,78 +1,503 @@
|
|||
@charset "utf-8";
|
||||
|
||||
.welcomeXE{padding-top:50px;font-family:Raleway,'나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif}
|
||||
.content + .welcomeXE { padding-top: 0;}
|
||||
.welcomeXE section{width:1200px;margin:0 auto}
|
||||
.welcomeXE .tit{padding-bottom:32px;font-size:40px;color:#333;font-weight:700;letter-spacing:1px;line-height:50px}
|
||||
.welcomeXE .noti{display:block;padding:28px 0 0;margin:0 0 12px;font-size:14px;font-weight:bold;color:#cda25a;letter-spacing:1px;line-height:20px}
|
||||
.welcomeXE .intro{width:408px;height:600px;padding-right:792px;background:url(../img/intro.png) 100% 100% no-repeat}
|
||||
.welcomeXE .intro .cont{padding-bottom:37px;font-size:15px;font-weight:400;color:#888;line-height:27px}
|
||||
.welcomeXE .intro .btn_start{display:inline-block;margin:50px 0;padding:0 27px;height:40px;border:2px solid #cda25a;background-color:#fff;font-size:13px;line-height:40px;letter-spacing:1px;color:#cda25a;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
|
||||
.welcomeXE {
|
||||
padding-top: 50px;
|
||||
font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif
|
||||
}
|
||||
.content + .welcomeXE {
|
||||
padding-top: 0;
|
||||
}
|
||||
.welcomeXE section {
|
||||
width: 1200px;
|
||||
margin: 0 auto
|
||||
}
|
||||
.welcomeXE .tit {
|
||||
padding-bottom: 32px;
|
||||
font-size: 40px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
line-height: 50px
|
||||
}
|
||||
.welcomeXE .noti {
|
||||
display: block;
|
||||
padding: 28px 0 0;
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #cda25a;
|
||||
letter-spacing: 1px;
|
||||
line-height: 20px
|
||||
}
|
||||
.welcomeXE .intro {
|
||||
width: 408px;
|
||||
height: 600px;
|
||||
padding-right: 792px;
|
||||
background: url(../img/intro.png) 100% 100% no-repeat
|
||||
}
|
||||
.welcomeXE .intro .cont {
|
||||
padding-bottom: 37px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
line-height: 27px
|
||||
}
|
||||
.welcomeXE .intro .btn_start {
|
||||
display: inline-block;
|
||||
margin: 50px 0;
|
||||
padding: 0 27px;
|
||||
height: 40px;
|
||||
border: 2px solid #cda25a;
|
||||
background-color: #fff;
|
||||
font-size: 13px;
|
||||
line-height: 40px;
|
||||
letter-spacing: 1px;
|
||||
color: #cda25a;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
-moz-transition: all .2s ease-in-out;
|
||||
-ms-transition: all .2s ease-in-out;
|
||||
-o-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out
|
||||
}
|
||||
.welcomeXE .intro .btn_start:hover,
|
||||
.welcomeXE .intro .btn_start:active
|
||||
.welcomeXE .intro .btn_start:focus{background-color:#cda25a;color:#fff}
|
||||
|
||||
.welcomeXE .intro .btn_start:focus {
|
||||
background-color: #cda25a;
|
||||
color: #fff
|
||||
}
|
||||
.bg-holder {
|
||||
background-image: url('../img/bg_stat.jpg');
|
||||
}
|
||||
/* section.xeicon */
|
||||
.welcomeXE .xeicon{overflow:hidden;position:static;width:100%;margin:0;height:500px;background-image:url(../img/bg_stat.jpg);background-position:50% 0;background-attachment:fixed;background-repeat:no-repeat}
|
||||
.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; }
|
||||
.welcomeXE .xeicon .button-area .btn_item {font-size: 14px; letter-spacing: 2px;}
|
||||
|
||||
.welcomeXE .xeicon {
|
||||
overflow: hidden;
|
||||
position: static;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.welcomeXE .xeicon h1 {
|
||||
margin-top: 170px;
|
||||
font-size: 40px;
|
||||
color: #f6f6f6;
|
||||
text-align: center;
|
||||
letter-spacing: 3px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.welcomeXE .xeicon h1 a {
|
||||
color: #FFF;
|
||||
}
|
||||
.welcomeXE .xeicon .button-area {
|
||||
text-align: center;
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
.welcomeXE .xeicon .button-area .btn_item {
|
||||
font-size: 14px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
/* section.guide */
|
||||
.welcomeXE .guide{height:640px;padding-top:80px}
|
||||
.welcomeXE .guide ul{padding-top:27px}
|
||||
.welcomeXE .guide li{position:relative;float:left;width:314px;min-height:140px;padding:0 0 0 70px;margin:0 0 30px 0}
|
||||
.welcomeXE .guide h2{padding:7px 24px 13px 0;font-size:17px;font-weight:normal;line-height:23px;color:#333}
|
||||
.welcomeXE .guide p{padding:0 24px 0 0;font-size:14px;line-height:26px;color:#888}
|
||||
.welcomeXE .guide .ico{position:absolute;top:0;left:0;width:48px;height:48px;border-radius:100%;background-color:#555;font-size:22px;text-align:center;line-height:50px;color:#efefef}
|
||||
.welcomeXE .guide {
|
||||
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 .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 .guide p a:focus {
|
||||
color: #cda25a;
|
||||
border-bottom: 1px solid #cda25a
|
||||
}
|
||||
/* section.features */
|
||||
.welcomeXE .features{width:100%;margin:0;height:800px;padding-top:80px;background-color:#444}
|
||||
.welcomeXE .features {
|
||||
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 .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
|
||||
}
|
||||
/*section.connect*/
|
||||
.welcomeXE .connect{height:344px;padding-top:80px}
|
||||
.welcomeXE .connect ul{overflow:hidden;padding:40px 0}
|
||||
.welcomeXE .connect li{position:relative;float:left;width:180px;margin-left:24px;padding:4px 0 0 102px;min-height:78px}
|
||||
.welcomeXE .connect li:first-child{margin-left:0}
|
||||
.welcomeXE .connect .ico{position:absolute;top:0;left:0;width:78px;height:78px;border-radius:100%;background-color:#cda25a;text-align:center;font-size:40px;color:#fff}
|
||||
.welcomeXE .connect {
|
||||
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}
|
||||
.welcomeXE .connect .ico:focus {
|
||||
background-color: #555
|
||||
}
|
||||
.welcomeXE .connect .ico i {
|
||||
line-height: 78px
|
||||
}
|
||||
.welcomeXE .connect h2 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
line-height: 18px;
|
||||
color: #333
|
||||
}
|
||||
.welcomeXE .connect p {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
line-height: 21px
|
||||
}
|
||||
@media all and (max-width: 479px) {
|
||||
.welcomeXE {
|
||||
padding-top: 0
|
||||
}
|
||||
.welcomeXE section {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.welcomeXE .tit {
|
||||
padding-bottom: 16px;
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
line-height: 40px
|
||||
}
|
||||
.welcomeXE .intro {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 14px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
}
|
||||
.welcomeXE .intro .cont {
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
.welcomeXE .intro .btn_start {
|
||||
margin: 20px 0 50px 0;
|
||||
}
|
||||
.welcomeXE .xeicon {
|
||||
height: auto;
|
||||
}
|
||||
.welcomeXE .xeicon h1 {
|
||||
margin-top: 70px;
|
||||
}
|
||||
.welcomeXE .xeicon .button-area {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.welcomeXE .xeicon .button-area .btn_item {
|
||||
font-size: 14px;
|
||||
letter-spacing: 2px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.welcomeXE .xeicon {
|
||||
background-position: 0 0;
|
||||
background-attachment: inherit;
|
||||
}
|
||||
.welcomeXE .guide {
|
||||
padding: 0 14px;
|
||||
height: auto;
|
||||
padding-top: 40px
|
||||
}
|
||||
.welcomeXE .guide li {
|
||||
width: auto;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.welcomeXE .features {
|
||||
padding: 40px 14px 0 14px;
|
||||
height: auto;
|
||||
}
|
||||
.welcomeXE .features .noti,
|
||||
.welcomeXE .features .tit,
|
||||
.welcomeXE .features .cont {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto
|
||||
}
|
||||
.welcomeXE .features ul {
|
||||
padding: 0;
|
||||
}
|
||||
.welcomeXE .features li {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.welcomeXE .features li .fe_box {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid #333;
|
||||
background-color: #cda25a;
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,208 +1,535 @@
|
|||
@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 {
|
||||
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 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 .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 .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 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 .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}
|
||||
|
||||
.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}
|
||||
from {
|
||||
background: #cda25a
|
||||
}
|
||||
to {
|
||||
width: 0;
|
||||
background: transparent
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes inputHighlighter {
|
||||
from {background:#cda25a}
|
||||
to {width:0;background:transparent}
|
||||
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}
|
||||
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}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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}
|
||||
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}
|
||||
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}
|
||||
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}
|
||||
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
|
||||
}
|
||||
}
|
||||
|
|
@ -1,54 +1,266 @@
|
|||
@charset "utf-8";
|
||||
|
||||
/* reset parent style */
|
||||
.body.sub {width:100% !important; margin:0;}
|
||||
.body.sub.full_width .content {width:100% !important; padding-bottom:0px !important;}
|
||||
|
||||
.body.sub {
|
||||
width: 100% !important;
|
||||
margin: 0;
|
||||
}
|
||||
.body.sub.full_width .content {
|
||||
width: 100% !important;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
/* XEicon page common style */
|
||||
.XEicon { padding-top: 60px;}
|
||||
.XEicon .fixedwidth {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: "";}
|
||||
|
||||
.XEicon {
|
||||
padding-top: 60px;
|
||||
}
|
||||
.XEicon .fixedwidth {
|
||||
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 */
|
||||
.XEicon p a{color:#444}
|
||||
.XEicon p a {
|
||||
color: #444
|
||||
}
|
||||
.XEicon p a:hover,
|
||||
.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 */
|
||||
.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 p {font-size:15px;line-height:28px;color:#444;text-align:center}
|
||||
|
||||
.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 p {
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
color: #444;
|
||||
text-align: center
|
||||
}
|
||||
/* section .feature */
|
||||
.XEicon .feature{height:518px;padding-top:120px;}
|
||||
.XEicon .feature ul{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}
|
||||
|
||||
.XEicon .feature {
|
||||
height: 518px;
|
||||
padding-top: 120px;
|
||||
}
|
||||
.XEicon .feature ul {
|
||||
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 */
|
||||
.XEicon .get_started {height:550px; padding-top:80px; background: #f6f6f6; box-sizing:border-box;}
|
||||
.XEicon .get_started .cont {font-size:15px; margin-top:75px; color:#888;}
|
||||
.XEicon .get_started ul {margin-top:34px;}
|
||||
.XEicon .get_started li {position:relative; float:left; width:286px; height:212px; margin-right:15px; 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 {
|
||||
height: 550px;
|
||||
padding-top: 80px;
|
||||
background: #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.XEicon .get_started .cont {
|
||||
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:active,
|
||||
.XEicon .get_started li > a:focus {background-color:#cda25a;color:#fff;}
|
||||
|
||||
.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;}
|
||||
|
||||
.XEicon .get_started li > a:focus {
|
||||
background-color: #cda25a;
|
||||
color: #fff;
|
||||
}
|
||||
.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 */
|
||||
.XEicon .contribution {height:442px; 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 {
|
||||
height: 442px;
|
||||
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: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
2893
layouts/xedition/js/idangerous.swiper.js
Normal file
File diff suppressed because it is too large
Load diff
126
layouts/xedition/js/jquery.parallax-scroll.js
Normal file
126
layouts/xedition/js/jquery.parallax-scroll.js
Normal 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;
|
||||
}));
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
(function($){
|
||||
(function($){
|
||||
"use strict";
|
||||
$(function(){
|
||||
var $shrinkHeaderHeight = 300;
|
||||
|
|
@ -38,9 +38,13 @@
|
|||
});
|
||||
$(window).triggerHandler('scroll');
|
||||
}
|
||||
|
||||
// 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(){
|
||||
$gnb.find('>ul>li>ul:visible').hide().parent('li').removeClass('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>li>a')
|
||||
$pc_gnb.find('>ul>li>ul>li>a')
|
||||
.mouseover(function(){
|
||||
$gnb.find('>ul>li>ul>li>ul:visible').hide().parent('li').removeClass('on');
|
||||
$(this).next('ul:hidden').stop().fadeIn(200).parent('li').addClass('on')
|
||||
|
|
@ -65,7 +69,16 @@
|
|||
.mouseleave(function(){
|
||||
$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
|
||||
$hoverEl.on('mouseenter mouseleave focusin focusout',function(e){
|
||||
e.preventDefault();
|
||||
|
|
@ -75,8 +88,7 @@
|
|||
$(this).removeClass('on');
|
||||
}
|
||||
});
|
||||
|
||||
// Search
|
||||
// Search
|
||||
$searchEl.click(function(){
|
||||
if($searchForm.is(':hidden')){
|
||||
$searchForm.fadeIn().find('input').focus();
|
||||
|
|
@ -139,7 +151,6 @@
|
|||
$('.sub_type3 .bg_img').parallax('50%',0.4);
|
||||
})
|
||||
})(jQuery);
|
||||
|
||||
(function($) {
|
||||
"use strict";
|
||||
var $window = $(window);
|
||||
|
|
@ -190,3 +201,11 @@
|
|||
}
|
||||
})(jQuery);
|
||||
|
||||
|
||||
(function($){
|
||||
$(function(){
|
||||
$('.bg-holder').parallaxScroll({
|
||||
friction: 0.2
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!--// META -->
|
||||
{Context::addHtmlHeader('<meta name="viewport" content="width=1240">')}
|
||||
{Context::addHtmlHeader('<meta name="viewport" content="width=device-width, user-scalable=no">')}
|
||||
<!--// LANG -->
|
||||
<load target="./lang" />
|
||||
|
||||
|
|
@ -145,17 +145,16 @@
|
|||
|
||||
<!--// 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/webfont.css" />
|
||||
<load target="./css/xeicon.css" cond="$mid === 'xeicon'" />
|
||||
<load target="../../common/xeicon/xeicon.min.css" />
|
||||
<!--// JS -->
|
||||
<load target="./js/jquery.easing.js" />
|
||||
<load cond="$_enable_slide" target="./js/camera.min.js" />
|
||||
<load cond="$_enable_slide" target="./js/idangerous.swiper.min.js" />
|
||||
<load target="./js/layout.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 -->
|
||||
|
|
@ -178,7 +177,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<header class="header">
|
||||
<header class="header {$_visual_class}">
|
||||
<!--// LOGO -->
|
||||
<h1 class="logo-item">
|
||||
{@ $_logo_img = $layout_info->logo_img}
|
||||
|
|
@ -261,6 +260,13 @@
|
|||
|
||||
<!-- 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>
|
||||
<li loop="$GNB->list => $key1, $val1">
|
||||
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window'] == 'Y'">{$val1['link']}</a>
|
||||
|
|
@ -294,52 +300,56 @@
|
|||
<h1>{$sub_header_title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div cond="$layout_info->layout_type === 'main' && $_enable_slide" class="visual">
|
||||
<!-- 슬라이드 -->
|
||||
<div class="camera_wrap">
|
||||
<!--@if($_sample_slide)-->
|
||||
<include target="./demo/slide.html" />
|
||||
<!--@else-->
|
||||
<div cond="$layout_info->slide_img1" data-src="{$layout_info->slide_img1}">
|
||||
<div cond="$layout_info->slide_text1" class="camera_caption fadeIn">
|
||||
<div class="camera_caption_wrap">
|
||||
{$layout_info->slide_text1}
|
||||
</div>
|
||||
<!-- Swiper -->
|
||||
<div cond="$layout_info->layout_type === 'main' && $_enable_slide" class="visual swiper-container">
|
||||
<!-- 슬라이드 -->
|
||||
<div class="swiper-wrapper">
|
||||
<!--@if($_sample_slide)-->
|
||||
<include target="./demo/slide.html" />
|
||||
<!--@else-->
|
||||
<div cond="$layout_info->slide_img1" style="background-image:url('{$layout_info->slide_img1}');">
|
||||
<div cond="$layout_info->slide_text1">
|
||||
<div>
|
||||
{$layout_info->slide_text1}
|
||||
</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>
|
||||
<!-- END:슬라이드 -->
|
||||
</div>
|
||||
<div cond="$layout_info->slide_img2" style="background-image:url('{$layout_info->slide_img2}');">
|
||||
<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 -->
|
||||
|
||||
<!-- BODY -->
|
||||
|
|
@ -412,6 +422,15 @@
|
|||
<include target="./demo/copyright.html" />
|
||||
<!--@end-->
|
||||
</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>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
@ -504,4 +523,22 @@
|
|||
});
|
||||
</script>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue