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

XEDITION CSS 포맷 변경

Browse source
This commit is contained in:
bnu 2015-07-06 15:06:04 +09:00
parent 9d5566e12e
commit 6a1307a3c3
4 changed files with 2635 additions and 692 deletions
Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because it is too large Load diff

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

@ -1,130 +1,502 @@
@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}
.bg-holder {
background-image: url('../img/bg_stat.jpg');
.welcomeXE .intro .btn_start:focus {
background-color: #cda25a;
color: #fff
}
.bg-holder {
background-image: url('../img/bg_stat.jpg');
}
/* section.xeicon */
.welcomeXE .xeicon{overflow:hidden;position:static;width:100%;margin:0;height:100%;}
.welcomeXE .xeicon h1 {margin-top: 170px; font-size: 40px; color: #f6f6f6; text-align: center; letter-spacing: 3px; font-weight: 400; line-height: 1.2em; text-transform: uppercase; }
.welcomeXE .xeicon h1 a {color: #FFF; }
.welcomeXE .xeicon .button-area {text-align: center; margin-bottom:140px; }
.welcomeXE .xeicon .button-area .btn_item {font-size: 14px; letter-spacing: 2px;}
.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;
}
@media all and (max-width:479px) {
.welcomeXE { padding-top: 0 }
.welcomeXE section{width:100%; box-sizing:border-box; overflow:hidden;}
.welcomeXE .tit{padding-bottom:16px;font-size:30px;color:#333;font-weight:700;letter-spacing:1px;line-height:40px}
.welcomeXE .intro{width:100%; box-sizing:border-box; padding:0 14px; height:auto; background:#fff; }
.welcomeXE .intro .cont{padding-bottom:17px;}
.welcomeXE .intro .btn_start { margin:20px 0 50px 0; }
.welcomeXE .xeicon { height:auto; }
.welcomeXE .xeicon h1 { margin-top:70px; }
.welcomeXE .xeicon .button-area { margin-bottom:50px; }
.welcomeXE .xeicon .button-area .btn_item {font-size: 14px; letter-spacing: 2px;margin:20px 0;}
.welcomeXE .xeicon{background-position:0 0;background-attachment: inherit;}
.welcomeXE .guide{ padding:0 14px; height:auto;padding-top:40px}
.welcomeXE .guide li { width:auto; margin:0 0 20px 0; }
.welcomeXE .features { padding:40px 14px 0 14px; height:auto; }
.welcomeXE .features .noti,
.welcomeXE .features .tit,
.welcomeXE .features .cont{width:100%;margin-left:auto;margin-right:auto}
.welcomeXE .features ul { padding:0; }
.welcomeXE .features li{clear:both;width:100%;height:auto;margin:0 0 20px 0;}
.welcomeXE .features li .fe_box { margin:0;padding:20px;border:1px solid #333;background-color:#cda25a; position:relative; height:auto; text-align:left; }
.welcomeXE .features .fe_box .ico{display:inline-block;width:70px;position:absolute;top:0;left:0;height:70px;margin:0;background-color:#f6f6f6;background:url(../img/sp_feature.png) 0 -70px no-repeat;text-align:center;font-size:20px;line-height:70px;text-align:left;}
.welcomeXE .features .fe_box h2{color:#f6f6f6;font-weight:normal; padding-left:80px}
.welcomeXE .features .fe_box a{height:30px;padding:0 20px;line-height:30px;float:right;}
.welcomeXE .features .fe_bottom { padding-left:80px; overflow:hidden; position:static; }
.welcomeXE .features .fe_box p{margin-bottom:40px;margin-top:10px;font-size:13px;line-height:20px;}
.welcomeXE .features .fe_box .ico2{background-position:-70px -70px}
.welcomeXE .features .fe_box .ico3{background-position:-140px -70px}
.welcomeXE .features .fe_box .ico4{background-position:-210px -70px}
.welcomeXE .features .fe_box.on .fe_top{top:0}
.welcomeXE .features .fe_box.on .fe_bottom{top:0}
.welcomeXE .connect{height:auto;padding:80px 14px 0 14px;}
.welcomeXE .connect ul { padding-top:0; }
.welcomeXE .connect li { margin-left:0; width:auto; min-height:78px; margin-bottom:20px; }
}

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

@ -1,208 +1,535 @@
@charset "utf-8";
.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
}
}

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

@ -1,72 +1,263 @@
@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-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 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}
@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 .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; }
.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 .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;
}
}