diff --git a/layouts/xedition/css/layout.css b/layouts/xedition/css/layout.css index fa1e43b8a..8407da5a0 100644 --- a/layouts/xedition/css/layout.css +++ b/layouts/xedition/css/layout.css @@ -1,395 +1,1448 @@ @charset "utf-8"; /* Common */ -body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0;-webkit-text-size-adjust:none} -body, html { width:100%; height:100%; min-width:1240px; } -body,input,textarea,select,button,table{font-family:'Open Sans','나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif;font-size:12px;-webkit-font-smoothing:antialiased} -img,fieldset,button{border:0} -ul,ol{list-style:none} -em,address{font-style:normal} -a{text-decoration:none} -a:hover,a:active,a:focus{text-decoration:none} -.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0} -.edge{position:absolute;top:12px;right:4px;width:0;height:0;border-width:0 8px 8px;border-style:solid;border-color:transparent transparent #333} -.clear{clear:both} - +body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { + margin: 0; + padding: 0; + -webkit-text-size-adjust: none +} +body, html { + width: 100%; + height: 100%; + min-width: 1240px; +} +body, input, textarea, select, button, table { + font-family: 'Open Sans', '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif; + font-size: 12px; + -webkit-font-smoothing: antialiased +} +img, fieldset, button { + border: 0 +} +ul, ol { + list-style: none +} +em, address { + font-style: normal +} +a { + text-decoration: none +} +a:hover, a:active, a:focus { + text-decoration: none +} +.blind { + overflow: hidden; + position: absolute; + top: 0; + left: 0; + width: 1px; + height: 1px; + font-size: 0; + line-height: 0 +} +.edge { + position: absolute; + top: 12px; + right: 4px; + width: 0; + height: 0; + border-width: 0 8px 8px; + border-style: solid; + border-color: transparent transparent #333 +} +.clear { + clear: both +} /* Skip to content */ -.skip{margin:0} -.skip>a{display:block;overflow:hidden;height:0;line-height:28px;text-align:center} -.skip>a:focus{height:auto} - +.skip { + margin: 0 +} +.skip > a { + display: block; + overflow: hidden; + height: 0; + line-height: 28px; + text-align: center +} +.skip > a:focus { + height: auto +} /* Layout */ -.container{min-width:1240px;background-color:#fff} -.header{position:relative;z-index:2;width:1200px;height:100%;margin:0 auto;zoom:1} -.header>.side{float:right;z-index:2;margin:39px 0 0 22px;line-height:20px} -.visual{overflow:hidden;position:relative;z-index:1;width:100%} -.body{position:relative;padding:30px 0} -.body .content{} -.body.fixed-width {width:1200px;margin:0 auto} - -.header:after,.body:after{display:block;clear:both;content:''} -.content{zoom:1} -.content:after{display:block;clear:both;content:''} -.content>:first-child{margin-top:0} -.content img{max-width:100%;height:auto} - +.container { + min-width: 1240px; + background-color: #fff +} +.header { + position: relative; + z-index: 2; + width: 1200px; + height: 100%; + margin: 0 auto; + zoom: 1 +} +.header > .side { + float: right; + z-index: 2; + margin: 39px 0 0 22px; + line-height: 20px +} +.visual { + overflow: hidden; + position: relative; + z-index: 1; + width: 100% +} +.body { + position: relative; + padding: 30px 0 +} +.body .content { +} +.body.fixed-width { + width: 1200px; + margin: 0 auto +} +.header:after, .body:after { + display: block; + clear: both; + content: '' +} +.content { + zoom: 1 +} +.content:after { + display: block; + clear: both; + content: '' +} +.content > :first-child { + margin-top: 0 +} +.content img { + max-width: 100%; + height: auto +} /* Header */ -.header>h1{float:left;padding:20px 0;margin-right:32px;line-height:60px;} -.header>h1 img{vertical-align:middle; max-height:40px; } - +.header > h1 { + float: left; + padding: 20px 0; + margin-right: 32px; + line-height: 60px; +} +.header > h1 img { + vertical-align: middle; + max-height: 40px; +} /* Fixed Header */ -.container.fixed_header{padding-top:100px} -.fixed_header .header_wrap{position:absolute;top:0;left:0;right:0;width:auto;z-index:1000;padding:0;} -.fixed_header .header_wrap.shrink{position:fixed;top:0;width:auto;z-index:1000;border-bottom:1px solid #e1e1e1;background-color:#fff;-webkit-animation:ani-header 0.5s forwards;animation:ani-header 0.5s forwards;left:0;right:0;} -.fixed_header .header_wrap.shrink .header>h1{padding:0} -.fixed_header .header_wrap.shrink .gnb>ul>li>a{line-height:60px} -.fixed_header .header_wrap.shrink .header>.side{margin:19px 0 0 22px} -.fixed_header .header_wrap.shrink .search_area{padding:0 20px} - +.container.fixed_header { + padding-top: 100px +} +.fixed_header .header_wrap { + position: absolute; + top: 0; + left: 0; + right: 0; + width: auto; + z-index: 1000; + padding: 0; +} +.fixed_header .header_wrap.shrink { + position: fixed; + top: 0; + width: auto; + z-index: 1000; + border-bottom: 1px solid #e1e1e1; + background-color: #fff; + -webkit-animation: ani-header 0.5s forwards; + animation: ani-header 0.5s forwards; + left: 0; + right: 0; +} +.fixed_header .header_wrap.shrink .header > h1 { + padding: 0 +} +.fixed_header .header_wrap.shrink .gnb > ul > li > a { + line-height: 60px +} +.fixed_header .header_wrap.shrink .header > .side { + margin: 19px 0 0 22px +} +.fixed_header .header_wrap.shrink .search_area { + padding: 0 20px +} /* Footer */ -.footer{border-top:1px solid #e4e4e4;border-bottom:3px solid #cda25a;background-color:#f1f1f1;font-family:'Open Sans','나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif} -.footer a:hover,.footer a:focus{text-decoration:none} -.footer .f_info_area{overflow:hidden;width:1200px;margin:0 auto;padding:48px 0 40px} -.footer .f_cr_area{padding:19px;background-color:#555} -.footer .copyright{width:1200px;margin:0 auto;font-size:13px;color:#f1f1f1;line-height:16px} -.footer .copyright a{color:#f1f1f1} +.footer { + border-top: 1px solid #e4e4e4; + border-bottom: 3px solid #cda25a; + background-color: #f1f1f1; + font-family: 'Open Sans', '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif +} +.footer a:hover, .footer a:focus { + text-decoration: none +} +.footer .f_info_area { + overflow: hidden; + width: 1200px; + margin: 0 auto; + padding: 48px 0 40px +} +.footer .f_cr_area { + padding: 19px; + background-color: #555 +} +.footer .copyright { + width: 1200px; + margin: 0 auto; + font-size: 13px; + color: #f1f1f1; + line-height: 16px +} +.footer .copyright a { + color: #f1f1f1 +} .footer .copyright a:hover, .footer .copyright a:focus, -.footer .copyright a:active{color:#cda25a} -.footer .copyright span{display:inline-block;margin-left:60px} -.footer .sub_desc{margin-bottom:16px;font-size:13px;color:#888;line-height:22px} -.footer .f_info{float:left;width:240px;margin-right:65px} -.footer .f_logo{overflow:hidden;max-width:100%;margin-bottom:16px;font-size:24px;color:#555} -.footer .f_logo.log_txt a{font-size:24px;font-weight:bold;color:#555} -.footer .f_logo img{max-width:240px} -.footer .f_info2{overflow:hidden;margin-top:7px} -.footer .site_map > ul{display:inline-block;overflow:hidden;background:url(../img/bg_sitemap.png) repeat-y} -.footer .site_map > ul li{float:left;width:282px;margin:0 0 0 24px} -.footer .site_map > ul li:first-child,.footer .site_map > ul li.clear{clear:both;margin-left:0} -.footer .site_map > ul li a{display:inline-block;margin:0 0 20px;padding:0 23px;font-size:15px;font-weight:bold;color:#555} -.footer .site_map > ul ul{overflow:hidden;margin:0 0 10px} -.footer .site_map > ul ul li{margin-left:0} -.footer .site_map > ul ul a{margin:0 0 13px;font-size:13px;font-weight:normal;color:#888;line-height:18px} +.footer .copyright a:active { + color: #cda25a +} +.footer .copyright span { + display: inline-block; + margin-left: 60px +} +.footer .sub_desc { + margin-bottom: 16px; + font-size: 13px; + color: #888; + line-height: 22px +} +.footer .f_info { + float: left; + width: 240px; + margin-right: 65px +} +.footer .f_logo { + overflow: hidden; + max-width: 100%; + margin-bottom: 16px; + font-size: 24px; + color: #555 +} +.footer .f_logo.log_txt a { + font-size: 24px; + font-weight: bold; + color: #555 +} +.footer .f_logo img { + max-width: 240px +} +.footer .f_info2 { + overflow: hidden; + margin-top: 7px +} +.footer .site_map > ul { + display: inline-block; + overflow: hidden; + background: url(../img/bg_sitemap.png) repeat-y +} +.footer .site_map > ul li { + float: left; + width: 282px; + margin: 0 0 0 24px +} +.footer .site_map > ul li:first-child, .footer .site_map > ul li.clear { + clear: both; + margin-left: 0 +} +.footer .site_map > ul li a { + display: inline-block; + margin: 0 0 20px; + padding: 0 23px; + font-size: 15px; + font-weight: bold; + color: #555 +} +.footer .site_map > ul ul { + overflow: hidden; + margin: 0 0 10px +} +.footer .site_map > ul ul li { + margin-left: 0 +} +.footer .site_map > ul ul a { + margin: 0 0 13px; + font-size: 13px; + font-weight: normal; + color: #888; + line-height: 18px +} .footer .site_map > ul ul a:hover, .footer .site_map > ul ul a:focus, -.footer .site_map > ul ul a:active{color:#555} -.footer .f_cr_area .mobile-footer-member { display:none; } - - +.footer .site_map > ul ul a:active { + color: #555 +} +.footer .f_cr_area .mobile-footer-member { + display: none; +} /* button */ -.btn_item{display:inline-block;margin:35px 0;padding:0 27px;height:50px;font-family: "Open Sans";background-color:#555;font-size:14px;line-height:50px;letter-spacing:1px;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} +.btn_item { + display: inline-block; + margin: 35px 0; + padding: 0 27px; + height: 50px; + font-family: "Open Sans"; + background-color: #555; + font-size: 14px; + line-height: 50px; + letter-spacing: 1px; + 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 +} .btn_item:hover, .btn_item:active -.btn_item:focus{background-color:#CBA061;color:#fff} -.btn_item + .btn_item {margin-left: 10px; } - +.btn_item:focus { + background-color: #CBA061; + color: #fff +} +.btn_item + .btn_item { + margin-left: 10px; +} /* Login */ -.header>.side>ul>li{float:left;position:relative} -.header>.side>ul:after{display:block;clear:both;content:''} -.header>.side>ul>li>a{display:block;width:22px;height:22px;margin-left:12px;font-size:22px;line-height:22px;color:#888;text-align:center} -.header>.side>ul>li>a:hover,.header>.side>ul>li>a:focus,.header>.side>ul>li>a:active,.header>.side>ul>li.on>a{color:#444} -.header>.side>ul .ly{position:relative;position:absolute;top:100%;right:0;margin-top:13px;background-color:#f9f9f9} -.header>.side>ul .ly.ly_login{overflow:hidden;margin-top:0;background:url('../img/blank.gif') 0 0 repeat;height:0} -.header>.side>ul .ly.ly_login ul{position:relative;margin-top:18px;padding:8px 0;background-color:#333;z-index:3} -.header>.side>ul .on .ly.ly_login{height:auto} -.header>.side>ul .ly a{display:block;min-width:120px;height:40px;padding:0 20px;line-height:40px;font-size:13px;color:#9d9d9d} -.header>.side>ul .ly a:hover{color:#cda25a;text-decoration:none} -.header>.side>ul>li .login_after{overflow:hidden;width:40px;height:40px;margin-top:-9px;border-radius:100%} -.header>.side>ul>li .login_after img{width:40px;height:40px} -.header>.side>ul>li .login_after ~ .ly_login .edge{right:11px} - +.header > .side > ul > li { + float: left; + position: relative +} +.header > .side > ul:after { + display: block; + clear: both; + content: '' +} +.header > .side > ul > li > a { + display: block; + width: 22px; + height: 22px; + margin-left: 12px; + font-size: 22px; + line-height: 22px; + color: #888; + text-align: center +} +.header > .side > ul > li > a:hover, .header > .side > ul > li > a:focus, .header > .side > ul > li > a:active, .header > .side > ul > li.on > a { + color: #444 +} +.header > .side > ul .ly { + position: relative; + position: absolute; + top: 100%; + right: 0; + margin-top: 13px; + background-color: #f9f9f9 +} +.header > .side > ul .ly.ly_login { + overflow: hidden; + margin-top: 0; + background: url('../img/blank.gif') 0 0 repeat; + height: 0 +} +.header > .side > ul .ly.ly_login ul { + position: relative; + margin-top: 18px; + padding: 8px 0; + background-color: #333; + z-index: 3 +} +.header > .side > ul .on .ly.ly_login { + height: auto +} +.header > .side > ul .ly a { + display: block; + min-width: 120px; + height: 40px; + padding: 0 20px; + line-height: 40px; + font-size: 13px; + color: #9d9d9d +} +.header > .side > ul .ly a:hover { + color: #cda25a; + text-decoration: none +} +.header > .side > ul > li .login_after { + overflow: hidden; + width: 40px; + height: 40px; + margin-top: -9px; + border-radius: 100% +} +.header > .side > ul > li .login_after img { + width: 40px; + height: 40px +} +.header > .side > ul > li .login_after ~ .ly_login .edge { + right: 11px +} /* Magazine Header Type */ -.custom_area{display:none} -.magazine .header{text-align:center} -.magazine .header>h1{float:none;display:inline-block;margin:0;padding:80px 0 20px;vertical-align:top} -.magazine .header>.side{float:none;position:absolute;top:0;right:0;margin:30px 0 0} -.magazine .gnb{float:none;max-width:100%;margin-bottom:40px} -.magazine .gnb>ul{display:inline-block;vertical-align:top} -.magazine .gnb>ul>li>a{position:relative;line-height:60px} -.magazine .gnb>ul>li>a:after{position:absolute;top:50%;left:-1px;width:1px;height:16px;margin-top:-8px;background-color:#888;content:''} -.magazine .gnb>ul>li:first-child>a:after{background:none} -.magazine .gnb>ul .depth2:after{background:none} -.magazine .gnb>ul .depth2,.magazine .gnb>ul .depth3{background-color:#f7f7f7} -.magazine .gnb>ul .depth2 a,.magazine .header>.side>ul .ly a{color:#999} -.magazine .header>.side>ul .ly a:hover{color:red} -.magazine .gnb>ul>li>a:hover,.magazine .gnb>ul>li>a:focus,.magazine .gnb>ul>li>a:focus,.magazine .gnb>ul>li.on>a,.magazine .header>.side>ul>li.on>a,.magazine .header>.side>ul .ly a:hover{color:#cda25a} -.magazine .header>.side>ul .ly.ly_login ul{background-color:#f7f7f7;text-align:left} -.magazine .edge{border-color:transparent transparent #f7f7f7} -.magazine .header>.side>ul>li>a:hover, -.magazine .header>.side>ul>li>a:focus, -.magazine .header>.side>ul>li>a:active{color:#cda25a} -.magazine .custom_area{display:block;position:absolute;top:30px;left:0} -.magazine .custom_area li{float:left;margin-right:30px} -.magazine .custom_area a{font-size:13px;line-height:15px;color:#999} -.magazine .custom_area a:hover,.magazine .custom_area a:hover,.magazine .custom_area a:hover{color:#cda25a} -.magazine .search_area{padding:10px 20px} - +.custom_area { + display: none +} +.magazine .header { + text-align: center +} +.magazine .header > h1 { + float: none; + display: inline-block; + margin: 0; + padding: 80px 0 20px; + vertical-align: top +} +.magazine .header > .side { + float: none; + position: absolute; + top: 0; + right: 0; + margin: 30px 0 0 +} +.magazine .gnb { + float: none; + max-width: 100%; + margin-bottom: 40px +} +.magazine .gnb > ul { + display: inline-block; + vertical-align: top +} +.magazine .gnb > ul > li > a { + position: relative; + line-height: 60px +} +.magazine .gnb > ul > li > a:after { + position: absolute; + top: 50%; + left: -1px; + width: 1px; + height: 16px; + margin-top: -8px; + background-color: #888; + content: '' +} +.magazine .gnb > ul > li:first-child > a:after { + background: none +} +.magazine .gnb > ul .depth2:after { + background: none +} +.magazine .gnb > ul .depth2, .magazine .gnb > ul .depth3 { + background-color: #f7f7f7 +} +.magazine .gnb > ul .depth2 a, .magazine .header > .side > ul .ly a { + color: #999 +} +.magazine .header > .side > ul .ly a:hover { + color: red +} +.magazine .gnb > ul > li > a:hover, .magazine .gnb > ul > li > a:focus, .magazine .gnb > ul > li > a:focus, .magazine .gnb > ul > li.on > a, .magazine .header > .side > ul > li.on > a, .magazine .header > .side > ul .ly a:hover { + color: #cda25a +} +.magazine .header > .side > ul .ly.ly_login ul { + background-color: #f7f7f7; + text-align: left +} +.magazine .edge { + border-color: transparent transparent #f7f7f7 +} +.magazine .header > .side > ul > li > a:hover, +.magazine .header > .side > ul > li > a:focus, +.magazine .header > .side > ul > li > a:active { + color: #cda25a +} +.magazine .custom_area { + display: block; + position: absolute; + top: 30px; + left: 0 +} +.magazine .custom_area li { + float: left; + margin-right: 30px +} +.magazine .custom_area a { + font-size: 13px; + line-height: 15px; + color: #999 +} +.magazine .custom_area a:hover, .magazine .custom_area a:hover, .magazine .custom_area a:hover { + color: #cda25a +} +.magazine .search_area { + padding: 10px 20px +} /* Onepage Header Type */ -.onepage .header_wrap{position:absolute;top:0;left:0;width:100%;z-index:1000} -.onepage .gnb>ul{background:url(../img/blank.gif) 0 0 repeat} -.onepage .gnb>ul>li>a{line-height:60px;color:#f6f6f6} -.onepage .gnb>ul>li>a:hover,.onepage .gnb>ul>li>a:focus,.onepage .gnb>ul>li>a:focus,.onepage .gnb>ul>li.on>a{color:#fff} -.onepage .shrink .gnb>ul>li>a{color:#888} -.onepage .shrink .gnb>ul>li>a:hover,.onepage .shrink .gnb>ul>li>a:focus,.onepage .shrink .gnb>ul>li>a:focus,.onepage .shrink .gnb>ul>li.on>a{color:#444} -.onepage .header>.side>ul>li>a{color:#f6f6f6} -.onepage .header>.side>ul>li>a:hover, .onepage .header>.side>ul>li>a:focus,.onepage .header>.side>ul>li>a:active,.onepage .header>.side>ul>li.on>a{color:#fff} -.onepage .search_area .btn_close{color:#f6f6f6} -.onepage .shrink .search_area .btn_close{color:#888} -.onepage .gnb>ul .depth2:after{background:none} -.onepage .gnb{margin-top:20px} -.onepage .header>h1{padding:20px 0 0} -.onepage .search_area input[type=text]{color:#f6f6f6} -.onepage .shrink .search_area input[type=text]{color:#888} -.onepage .visual.sub.sub_type3 {margin-top:-100px;} - +.onepage .header_wrap { + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 1000 +} +.onepage .gnb > ul { + background: url(../img/blank.gif) 0 0 repeat +} +.onepage .gnb > ul > li > a { + line-height: 60px; + color: #f6f6f6 +} +.onepage .gnb > ul > li > a:hover, .onepage .gnb > ul > li > a:focus, .onepage .gnb > ul > li > a:focus, .onepage .gnb > ul > li.on > a { + color: #fff +} +.onepage .shrink .gnb > ul > li > a { + color: #888 +} +.onepage .shrink .gnb > ul > li > a:hover, .onepage .shrink .gnb > ul > li > a:focus, .onepage .shrink .gnb > ul > li > a:focus, .onepage .shrink .gnb > ul > li.on > a { + color: #444 +} +.onepage .header > .side > ul > li > a { + color: #f6f6f6 +} +.onepage .header > .side > ul > li > a:hover, .onepage .header > .side > ul > li > a:focus, .onepage .header > .side > ul > li > a:active, .onepage .header > .side > ul > li.on > a { + color: #fff +} +.onepage .search_area .btn_close { + color: #f6f6f6 +} +.onepage .shrink .search_area .btn_close { + color: #888 +} +.onepage .gnb > ul .depth2:after { + background: none +} +.onepage .gnb { + margin-top: 20px +} +.onepage .header > h1 { + padding: 20px 0 0 +} +.onepage .search_area input[type=text] { + color: #f6f6f6 +} +.onepage .shrink .search_area input[type=text] { + color: #888 +} +.onepage .visual.sub.sub_type3 { + margin-top: -100px; +} /* Search */ -.search_wrap{position:relative;width:1200px;margin:0 auto} -.search_area{display:none;position:absolute;top:0;left:0;width:1160px;padding:20px;z-index:3;z-index:3} -.search_area input{font-size:13px;vertical-align:top} -.search_area input[type=text]{position:relative;width:100%;height:40px;padding:10px 0;border:0;background-color:transparent;font-size:40px;color:#444;-webkit-appearance:none;} -.search_area input[type=text]:focus{outline:0} -.search_area input[type=text]::-ms-clear{display:none} -.search_area .btn_close{position:absolute;top:50%;right:0;width:20px;height:20px;margin-top:-10px;font-size:22px;color:#888;text-align:center;line-height:20px} - +.search_wrap { + position: relative; + width: 1200px; + margin: 0 auto +} +.search_area { + display: none; + position: absolute; + top: 0; + left: 0; + width: 1160px; + padding: 20px; + z-index: 3; + z-index: 3 +} +.search_area input { + font-size: 13px; + vertical-align: top +} +.search_area input[type=text] { + position: relative; + width: 100%; + height: 40px; + padding: 10px 0; + border: 0; + background-color: transparent; + font-size: 40px; + color: #444; + -webkit-appearance: none; +} +.search_area input[type=text]:focus { + outline: 0 +} +.search_area input[type=text]::-ms-clear { + display: none +} +.search_area .btn_close { + position: absolute; + top: 50%; + right: 0; + width: 20px; + height: 20px; + margin-top: -10px; + font-size: 22px; + color: #888; + text-align: center; + line-height: 20px +} /* GNB */ -.gnb{float:right;position:relative;z-index:1;max-width:742px;height:100%;font-size:13px} -.gnb a{text-decoration:none;white-space:nowrap} -.gnb>ul>li{float:left;position:relative;text-align:left} -.gnb>ul:after{display:block;clear:both;content:''} -.gnb>ul>li>a{display:block;position:relative;padding:0 20px;line-height:100px;font-size:15px;font-weight:700;color:#888} -.gnb>ul>li>a:hover,.gnb>ul>li>a:focus,.gnb>ul>li>a:focus,.gnb>ul>li.on>a{color:#444} -.gnb>ul .depth2{display:none;position:absolute;top:100%;left:0;z-index:2;padding:8px 0;background-color:#333} -.gnb>ul .depth2>li{position:relative} -.gnb>ul .depth2:after{position:absolute;top:-3px;left:0;width:100%;height:3px;background-color:#cda25a;content:''} -.gnb>ul .depth2 a{display:block;position:relative;min-width:170px;height:40px;padding:0 30px 0 20px;line-height:40px;font-size:13px;color:#9d9d9d} -.gnb>ul .depth2 a:hover,.gnb>ul .depth2 a:active,.gnb>ul .depth2 a:focus,.gnb>ul .depth2>li.on>a{color:#cda25a} -.gnb>ul .depth3{display:none;position:absolute;top:-8px;left:100%;z-index:2;padding:8px 0;background-color:#333} -.gnb>ul .depth2>li.more>a:after{position:absolute;right:20px;content:'>'} -.onepage .shrink .header > .side > ul > li > a {color: #444; } -.onepage .shrink .gnb {margin-top: 0; } -.magazine .shrink .gnb {margin-bottom: 10px; } -.magazine .shrink h1 {margin-top: 10px; } -.magazine .header_wrap.shrink .gnb > ul > li > a {line-height: 40px; } - +.gnb { + float: right; + position: relative; + z-index: 1; + max-width: 742px; + height: 100%; + font-size: 13px +} +.gnb a { + text-decoration: none; + white-space: nowrap +} +.gnb > ul > li { + float: left; + position: relative; + text-align: left +} +.gnb > ul:after { + display: block; + clear: both; + content: '' +} +.gnb > ul > li > a { + display: block; + position: relative; + padding: 0 20px; + line-height: 100px; + font-size: 15px; + font-weight: 700; + color: #888 +} +.gnb > ul > li > a:hover, .gnb > ul > li > a:focus, .gnb > ul > li > a:focus, .gnb > ul > li.on > a { + color: #444 +} +.gnb > ul .depth2 { + display: none; + position: absolute; + top: 100%; + left: 0; + z-index: 2; + padding: 8px 0; + background-color: #333 +} +.gnb > ul .depth2 > li { + position: relative +} +.gnb > ul .depth2:after { + position: absolute; + top: -3px; + left: 0; + width: 100%; + height: 3px; + background-color: #cda25a; + content: '' +} +.gnb > ul .depth2 a { + display: block; + position: relative; + min-width: 170px; + height: 40px; + padding: 0 30px 0 20px; + line-height: 40px; + font-size: 13px; + color: #9d9d9d +} +.gnb > ul .depth2 a:hover, .gnb > ul .depth2 a:active, .gnb > ul .depth2 a:focus, .gnb > ul .depth2 > li.on > a { + color: #cda25a +} +.gnb > ul .depth3 { + display: none; + position: absolute; + top: -8px; + left: 100%; + z-index: 2; + padding: 8px 0; + background-color: #333 +} +.gnb > ul .depth2 > li.more > a:after { + position: absolute; + right: 20px; + content: '>' +} +.onepage .shrink .header > .side > ul > li > a { + color: #444; +} +.onepage .shrink .gnb { + margin-top: 0; +} +.magazine .shrink .gnb { + margin-bottom: 10px; +} +.magazine .shrink h1 { + margin-top: 10px; +} +.magazine .header_wrap.shrink .gnb > ul > li > a { + line-height: 40px; +} /* VISUAL */ -.visual.sub{position:relative;padding:35px 0;background-color:#f6f6f6;line-height:30px} -.visual.sub .sub_title{position:relative;z-index:2;width:1200px;margin:0 auto} -.visual.sub .sub_title h1{position:relative;font-weight:700;font-family:Raleway,'나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif;font-size:17px;color:#444} -.visual.sub .sub_title h1:after{position:absolute;top:115%;left:0;width:22px;height:2px;background-color:#444;content:''} -.visual.sub .bg_img{display:none;position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;background-size:cover} -.visual.sub.sub_type2{padding:70px 0} -.visual.sub.sub_type2 .bg_img{display:block} -.visual.sub.sub_type2 .sub_title h1{color:#fff;font-weight:400;font-size:23px;letter-spacing:1px} +.visual.sub { + position: relative; + padding: 35px 0; + background-color: #f6f6f6; + line-height: 30px +} +.visual.sub .sub_title { + position: relative; + z-index: 2; + width: 1200px; + margin: 0 auto +} +.visual.sub .sub_title h1 { + position: relative; + font-weight: 700; + font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif; + font-size: 17px; + color: #444 +} +.visual.sub .sub_title h1:after { + position: absolute; + top: 115%; + left: 0; + width: 22px; + height: 2px; + background-color: #444; + content: '' +} +.visual.sub .bg_img { + display: none; + position: absolute; + top: 0; + left: 0; + z-index: 0; + width: 100%; + height: 100%; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover +} +.visual.sub.sub_type2 { + padding: 70px 0 +} +.visual.sub.sub_type2 .bg_img { + display: block +} +.visual.sub.sub_type2 .sub_title h1 { + color: #fff; + font-weight: 400; + font-size: 23px; + letter-spacing: 1px +} .visual.sub.sub_type2 .sub_title h1:after, -.visual.sub.sub_type3 .sub_title h1:after{background:none} -.visual.sub.sub_type3{padding:250px 0 210px;line-height:40px;text-align:center} -.visual.sub.sub_type3 .bg_img{display:block;background-attachment:fixed;background-size:auto auto} -.visual.sub.sub_type3 .sub_title h1{font-size:39px;font-weight:400;color:#fff;letter-spacing:2px} - +.visual.sub.sub_type3 .sub_title h1:after { + background: none +} +.visual.sub.sub_type3 { + padding: 250px 0 210px; + line-height: 40px; + text-align: center +} +.visual.sub.sub_type3 .bg_img { + display: block; + background-attachment: fixed; + background-size: auto auto +} +.visual.sub.sub_type3 .sub_title h1 { + font-size: 39px; + font-weight: 400; + color: #fff; + letter-spacing: 2px +} /* LNB */ -.body.fixed-width .lnb>ul{position:relative;z-index:1;margin:0;padding:40px 0 0} -.body.fixed-width .lnb>ul>li{margin-bottom:40px} -.body.fixed-width .lnb>ul>li>a,.body.fixed-width .lnb>ul>li>span{display:block;line-height:21px;margin-bottom:14px;font-size:15px;color:#444} -.body.fixed-width .lnb ul ul li.on a{color:#cda25a} -.body.fixed-width .lnb ul ul a{display:block;padding:10px 0;font-size:14px;line-height:20px;color:#888;text-decoration:none} +.body.fixed-width .lnb > ul { + position: relative; + z-index: 1; + margin: 0; + padding: 40px 0 0 +} +.body.fixed-width .lnb > ul > li { + margin-bottom: 40px +} +.body.fixed-width .lnb > ul > li > a, .body.fixed-width .lnb > ul > li > span { + display: block; + line-height: 21px; + margin-bottom: 14px; + font-size: 15px; + color: #444 +} +.body.fixed-width .lnb ul ul li.on a { + color: #cda25a +} +.body.fixed-width .lnb ul ul a { + display: block; + padding: 10px 0; + font-size: 14px; + line-height: 20px; + color: #888; + text-decoration: none +} .body.fixed-width .lnb ul ul a:hover, .body.fixed-width .lnb ul ul a:focus, -.body.fixed-width .lnb ul ul a:active{color:#cda25a} -.body.fixed-width .lnb img{vertical-align:top} +.body.fixed-width .lnb ul ul a:active { + color: #cda25a +} +.body.fixed-width .lnb img { + vertical-align: top +} .body.fixed-width.left .lnb, -.body.fixed-width.right .lnb{float:left;width:260px;padding:0 0 16px} +.body.fixed-width.right .lnb { + float: left; + width: 260px; + padding: 0 0 16px +} .body.fixed-width.left .content, -.body.fixed-width.right .content{float:right;width:900px;min-height:400px;padding:40px 0 100px} -.body.fixed-width.right .lnb{float:right} -.body.fixed-width.right .content{float:left} -.body.fixed-width.none .lnb{display:none} -.body.fixed-width.none .content{float:none;width:1200px} - +.body.fixed-width.right .content { + float: right; + width: 900px; + min-height: 400px; + padding: 40px 0 100px +} +.body.fixed-width.right .lnb { + float: right +} +.body.fixed-width.right .content { + float: left +} +.body.fixed-width.none .lnb { + display: none +} +.body.fixed-width.none .content { + float: none; + width: 1200px +} /* Scroll to top link */ -.btn_top{display:none;position:fixed;right:0;bottom:57px;z-index:1000;width:48px;height:48px;background-color:#555;font-size:24px;color:#fff;text-align:center;opacity:0.8;filter:alpha(opacity=80)} -.btn_top:hover{background-color:#cda25a;color:#fff;text-decoration:none;opacity:1;filter:alpha(opacity=100)} -.btn_top i{line-height:48px} - -.swiper-container { height:600px; font-family: Raleway,'나눔바른고딕',NanumBarunGothic,ng,'돋움',Dotum,AppleGothic,Helvetica,serif; } -.swiper-container > div > div { display: table; height:600px; color:#fff; background-size:cover; } -.swiper-container > div > div > div { display: table-cell; vertical-align: middle; } -.swiper-container > div > div > div > div { width:1200px; margin:0 auto; } -.swiper-container h1 { font-weight:700; margin:0 0 19px 0; font-size:60px; line-height:70px; text-decoration: none; } -.swiper-container p { font-size: 20px; line-height: 22px; } - -.swiper-button { position:absolute; top:50%; display:none; margin-bottom:25px; } -.swiper-container:hover .swiper-button { display:block; } -.swiper-button.left { left:20px; } -.swiper-button.right { right:20px; } -.swiper-button i { width:50px; line-height:50px; text-align:center; font-size:24px; color:#fff; } -.swiper-button button { background-color:#333; border-radius:50px; background-color:rgba(0,0,0,0.2); cursor:pointer; } +.btn_top { + display: none; + position: fixed; + right: 0; + bottom: 57px; + z-index: 1000; + width: 48px; + height: 48px; + background-color: #555; + font-size: 24px; + color: #fff; + text-align: center; + opacity: 0.8; + filter: alpha(opacity=80) +} +.btn_top:hover { + background-color: #cda25a; + color: #fff; + text-decoration: none; + opacity: 1; + filter: alpha(opacity=100) +} +.btn_top i { + line-height: 48px +} +.swiper-container { + height: 600px; + font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '돋움', Dotum, AppleGothic, Helvetica, serif; +} +.swiper-container > div > div { + display: table; + height: 600px; + color: #fff; + background-size: cover; +} +.swiper-container > div > div > div { + display: table-cell; + vertical-align: middle; +} +.swiper-container > div > div > div > div { + width: 1200px; + margin: 0 auto; +} +.swiper-container h1 { + font-weight: 700; + margin: 0 0 19px 0; + font-size: 60px; + line-height: 70px; + text-decoration: none; +} +.swiper-container p { + font-size: 20px; + line-height: 22px; +} +.swiper-button { + position: absolute; + top: 50%; + display: none; + margin-bottom: 25px; +} +.swiper-container:hover .swiper-button { + display: block; +} +.swiper-button.left { + left: 20px; +} +.swiper-button.right { + right: 20px; +} +.swiper-button i { + width: 50px; + line-height: 50px; + text-align: center; + font-size: 24px; + color: #fff; +} +.swiper-button button { + background-color: #333; + border-radius: 50px; + background-color: rgba(0, 0, 0, 0.2); + cursor: pointer; +} .pagination { - position: absolute; - left: 0; - text-align: center; - bottom:5px; - width: 100%; + position: absolute; + left: 0; + text-align: center; + bottom: 5px; + width: 100%; } .swiper-pagination-switch { - display: inline-block; - width: 10px; - height: 10px; - border-radius: 10px; - background: #fff; - opacity: 0.6; - margin: 0 3px; - cursor: pointer; + display: inline-block; + width: 10px; + height: 10px; + border-radius: 10px; + background: #fff; + opacity: 0.6; + margin: 0 3px; + cursor: pointer; } .swiper-active-switch { - background: #fff; - opacity: 1; + background: #fff; + opacity: 1; } +@media all and (max-width: 479px) { + body, html { + min-width: 100%; + } + a.btn_top { + display: none; + } + /* Layout */ + .container { + min-width: 100%; + background-color: #fff + } + .header { + position: relative; + z-index: 2; + width: 100%; + height: auto; + margin: 0 auto; + zoom: 1 + } + .header > .side { + display: none; + } + .body.fixed-width { + width: auto; + margin: 0 + } + .header:after, .body:after { + clear: both; + content: '' + } + .body { + padding: 0; + } + .content { + zoom: 1; + } + .content:after { + clear: both; + content: '' + } + .content > :first-child { + margin-top: 0; + } + .content img { + max-width: 100%; + height: auto + } + .body.fixed-width.right .content { + width: auto; + float: none; + min-height: 100%; + padding: 40px 0; + } + /* Header */ + .header > h1 { + float: none; + margin-right: 0; + padding: 0 15px; + line-height: 50px; + display: block; + } + .header > h1 img { + max-height: 15px; + padding: 0; + margin: 0; + } + .header.sub_type3 { + position: absolute; + } + /* Fixed Header */ + .container.fixed_header { + padding-top: 0 + } + .header_wrap.shrink { + display: none; + } + .onepage .header > h1 { + padding: 0 14px; + } + .fixed_header .header_wrap { + position: static; + top: 0; + left: 0; + width: 100%; + z-index: 1000 + } + .fixed_header .header_wrap.shrink { + position: fixed; + top: 0; + width: 100%; + z-index: 1000; + border-bottom: 1px solid #e1e1e1; + background-color: #fff; + -webkit-animation: ani-header 0.5s forwards; + animation: ani-header 0.5s forwards + } + .fixed_header .header_wrap.shrink .header > h1 { + padding: 0 + } + .fixed_header .header_wrap.shrink .gnb > ul > li > a { + line-height: 60px + } + .fixed_header .header_wrap.shrink .header > .side { + margin: 19px 0 0 22px + } + .fixed_header .header_wrap.shrink .search_area { + padding: 0 20px + } + /* Footer */ + .footer { + border-top: 1px solid #e4e4e4; + border-bottom: 3px solid #cda25a; + background-color: #f1f1f1; + } + .footer a:hover, .footer a:focus { + text-decoration: none + } + .footer .f_info_area { + width: auto; + margin: 0; + padding: 0; + } + .footer .f_cr_area { + padding: 0; + background-color: #555; + color: #fff; + } + .footer .copyright { + width: auto; + margin: 0; + font-size: 12px; + color: #f1f1f1; + line-height: 16px + } + .footer .copyright span { + display: inline-block; + margin-left: 0px + } + .footer .sub_desc { + display: none; + } + .footer .f_info { + float: none; + width: auto; + margin-left: 0; + margin-right: 0; + } + .footer .f_logo { + padding: 8px 15px; + margin-bottom: 0; + } + .footer .f_logo.log_txt a { + font-size: 16px; + font-weight: bold; + color: #555 + } + .footer .f_logo img { + max-width: auto; + max-height: 30px; + } + .footer .f_info2 { + display: none; + } + .footer .site_map { + display: none; + } + .footer .f_info2 { + display: none; + } + .footer .f_logo { + padding: 8px 15px; + } + .footer .f_logo img { + max-height: 30px; + } + .footer .sub_desc { + display: none; + } + .footer .f_cr_area { + padding: 0; + background-color: #555; + color: #fff; + } + .footer .f_cr_area p { + margin: 0; + padding: 8px 14px; + } + .footer .f_cr_area a { + color: #fff; + } + .footer .f_cr_area .mobile-footer-member { + padding: 0; + margin: 0; + border-top: 1px solid #444; + list-style: none; + overflow: hidden; + display: block; + } + .footer .f_cr_area .mobile-footer-member li { + float: left; + width: 33.3%; + border-left: 1px solid #444; + box-sizing: border-box; + } + .footer .f_cr_area .mobile-footer-member li:first-child { + border-left: 0; + } + .footer .f_cr_area .mobile-footer-member li a { + display: block; + line-height: 32px; + text-align: center; + } + /* button */ + .btn_item { + display: inline-block; + margin: 35px 0; + padding: 0 27px; + height: 50px; + font-family: "Open Sans"; + background-color: #555; + font-size: 14px; + line-height: 50px; + letter-spacing: 1px; + 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 + } + .btn_item:hover, + .btn_item:active + .btn_item:focus { + background-color: #CBA061; + color: #fff + } + .btn_item + .btn_item { + margin-left: 10px; + } + /* Login */ + .header > .side { + display: none; + } + /* Search */ + .search_wrap { + display: none; + } + .gnb { + float: none; + position: static; + z-index: 1; + max-width: 100%; + height: 100%; + font-size: 1em; + background: #fff; + } + .gnb a { + white-space: normal; + font-size: 14px; + display: block; + padding: 10px 0; + border-top: 1px solid #eee; + } + .gnb > ul { + display: none; + padding: 0 14px 14px 14px; + max-height: 240px; + overflow-x: scroll; + border-bottom: 1px solid #eaeaea; + background: #fff; + -webkit-overflow-scrolling: touch; + } + .gnb > ul > li { + float: none; + position: static; + } + .gnb > ul > li:first-child > a { + border-top: 0; + } + .gnb > ul:after { + display: none; + } + .gnb > ul > li > a { + position: static; + padding: 10px 0; + line-height: normal; + font-size: normal; + color: #555; + font-weight: bold; + } + .onepage .gnb > ul > li > a { + color: #555; + line-height: normal + } + .gnb > ul .depth2 { + display: block; + position: static; + padding: 0; + background-color: #fff + } + .gnb > ul .depth2 > li { + position: static + } + .gnb > ul .depth2:after { + display: none + } + .gnb > ul .depth2 a { + position: static; + min-width: 100%; + height: auto; + padding: 10px 0; + line-height: normal; + color: #555; + } + .gnb > ul .depth3 { + display: block; + position: static; + background-color: #fff; + padding: 0; + } + .gnb > ul .depth3 a { + color: #999; + } + .gnb > ul .depth2 > li.more > a:after { + display: none; + } + /* GNB */ + .gnb { + float: none; + position: static; + z-index: 1; + max-width: 100%; + height: 100%; + font-size: 1em; + display: block; + } + .gnb #mobile_menu_btn { + display: block; + } + .gnb .menu_btn { + height: 22px; + width: 44px; + display: block; + position: absolute; + top: 14px; + right: 3px; + display: inline-block; + } + .gnb .menu_btn .menu_bar { + width: 20px; + height: 14px; + position: relative; + top: 4px; + left: 12px; + } + .gnb .menu_btn .menu_bar div { + height: 0; + border-top: 2px solid #383431; + position: absolute; + } + .header.sub_type3 .gnb .menu_btn .menu_bar div { + border-top: 2px solid #fff; + } + .gnb .menu_btn .menu_bar div.btn1 { + width: 20px; + top: 0; + } + .gnb .menu_btn .menu_bar div.btn2 { + width: 20px; + top: 6px; + transition: all 0.1s + } + .gnb .menu_btn .menu_bar div.btn3 { + width: 20px; + bottom: 0; + } + .gnb .menu_btn.opened .menu_bar div.btn1 { + top: 6px; + width: 20px; + -webkit-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + } + .gnb .menu_btn.opened .menu_bar div.btn2 { + top: 6px; + display: none; + } + .gnb .menu_btn.opened .menu_bar div.btn3 { + top: 6px; + width: 20px; + -webkit-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + transform: rotate(-45deg); + } + .body { + } + .body .lnb { + display: none; + } + .body .content { + overflow: hidden; + } + .visual { + box-sizing: border-box; + } + .visual.sub { + position: relative; + padding: 15px 14px 30px 14px; + background-color: #f6f6f6; + line-height: 30px + } + .visual.sub .sub_title { + position: relative; + z-index: 2; + width:; + margin: 0 auto + } + .visual.sub .sub_title h1 { + position: relative; + font-weight: 700; + font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif; + font-size: 17px; + color: #444 + } + .visual.sub .sub_title h1:after { + position: absolute; + top: 115%; + left: 0; + width: 22px; + height: 2px; + background-color: #444; + content: '' + } + .visual.sub .bg_img { + display: none; + position: absolute; + top: 0; + left: 0; + z-index: 0; + width: 100%; + height: 100%; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover + } + .visual.sub.sub_type2 { + padding: 70px 0 + } + .visual.sub.sub_type2 .bg_img { + display: block + } + .visual.sub.sub_type2 .sub_title h1 { + color: #fff; + font-weight: 400; + font-size: 23px; + letter-spacing: 1px + } + .visual.sub.sub_type2 .sub_title h1:after, + .visual.sub.sub_type3 .sub_title h1:after { + background: none + } + .visual.sub.sub_type3 { + padding: 100px 0 90px; + line-height: 40px; + text-align: center + } + .visual.sub.sub_type3 .bg_img { + display: block; + background-attachment: fixed; + background-size: auto auto + } + .visual.sub.sub_type3 .sub_title h1 { + font-size: 39px; + font-weight: 400; + color: #fff; + letter-spacing: 2px + } + .swiper-container { + height: 270px; + font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '돋움', Dotum, AppleGothic, Helvetica, serif; + } + .swiper-container > div > div { + display: table; + height: 270px; + color: #fff; + } + .swiper-container > div > div > div { + display: table-cell; + vertical-align: middle; + } + .swiper-container > div > div > div > div { + padding: 0 14px; + width: auto; + margin: 0; + } + .swiper-container h1 { + font-weight: 600; + margin: 0 0 10px 0; + font-size: 30px; + line-height: 40px; + text-decoration: none; + } + .swiper-container p { + font-size: 15px; + line-height: 18px; + } -@media all and (max-width:479px) { - body, html { min-width:100%; } - a.btn_top { display:none; } - /* Layout */ - .container{min-width:100%;background-color:#fff} - .header{position:relative;z-index:2;width:100%;height:auto;margin:0 auto;zoom:1} - .header>.side{display: none;} - .body.fixed-width {width:auto;margin:0} - - .header:after,.body:after{clear:both;content:''} - .body { padding:0; } - .content{zoom:1;} - .content:after{clear:both;content:''} - .content>:first-child{margin-top:0;} - .content img{max-width:100%;height:auto} - .body.fixed-width.right .content {width:auto;float:none;min-height: 100%;padding:40px 0;} - - /* Header */ - .header > h1 { float:none; margin-right:0; padding:0 15px; line-height:50px; display:block; } - .header > h1 img { max-height:15px; padding:0; margin:0; } - .header.sub_type3 { position:absolute; } - - /* Fixed Header */ - .container.fixed_header{padding-top:0} - .header_wrap.shrink { display:none; } - .onepage .header>h1 { padding:0 14px; } - .fixed_header .header_wrap{position:static;top:0;left:0;width:100%;z-index:1000} - .fixed_header .header_wrap.shrink{position:fixed;top:0;width:100%;z-index:1000;border-bottom:1px solid #e1e1e1;background-color:#fff;-webkit-animation:ani-header 0.5s forwards;animation:ani-header 0.5s forwards} - .fixed_header .header_wrap.shrink .header>h1{padding:0} - .fixed_header .header_wrap.shrink .gnb>ul>li>a{line-height:60px} - .fixed_header .header_wrap.shrink .header>.side{margin:19px 0 0 22px} - .fixed_header .header_wrap.shrink .search_area{padding:0 20px} - - - /* Footer */ - .footer { border-top:1px solid #e4e4e4; border-bottom:3px solid #cda25a; background-color:#f1f1f1; } - .footer a:hover,.footer a:focus{text-decoration:none} - .footer .f_info_area{ width:auto; margin:0; padding:0; } - .footer .f_cr_area { padding:0;background-color:#555; color:#fff; } - .footer .copyright{width:auto;margin:0;font-size:12px;color:#f1f1f1;line-height:16px} - .footer .copyright span{display:inline-block;margin-left:0px} - .footer .sub_desc{display:none;} - .footer .f_info{float:none;width:auto;margin-left:0;margin-right:0;} - .footer .f_logo { padding:8px 15px; margin-bottom:0; } - .footer .f_logo.log_txt a{font-size:16px;font-weight:bold;color:#555} - .footer .f_logo img{max-width:auto; max-height: 30px;} - .footer .f_info2{ display:none; } - .footer .site_map { display:none; } - .footer .f_info2{ display:none; } - .footer .f_logo { padding:8px 15px; } - .footer .f_logo img { max-height:30px; } - .footer .sub_desc { display:none; } - .footer .f_cr_area { padding:0;background-color:#555; color:#fff; } - .footer .f_cr_area p { margin:0; padding:8px 14px; } - .footer .f_cr_area a { color:#fff; } - .footer .f_cr_area .mobile-footer-member { padding:0; margin:0; border-top:1px solid #444; list-style:none; overflow:hidden; display:block; } - .footer .f_cr_area .mobile-footer-member li { float:left; width:33.3%; border-left:1px solid #444; box-sizing:border-box; } - .footer .f_cr_area .mobile-footer-member li:first-child { border-left:0; } - .footer .f_cr_area .mobile-footer-member li a { display:block; line-height:32px; text-align:center; } - - /* button */ - .btn_item{display:inline-block;margin:35px 0;padding:0 27px;height:50px;font-family: "Open Sans";background-color:#555;font-size:14px;line-height:50px;letter-spacing:1px;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} - .btn_item:hover, - .btn_item:active - .btn_item:focus{background-color:#CBA061;color:#fff} - .btn_item + .btn_item {margin-left: 10px; } - - /* Login */ - .header>.side { display:none; } - - /* Search */ - .search_wrap{display:none;} - - - .gnb{float:none;position:static;z-index:1;max-width:100%;height:100%;font-size:1em;background:#fff;} - .gnb a{white-space: normal;font-size:14px; display:block; padding:10px 0; border-top:1px solid #eee;} - .gnb > ul { display:none; padding:0 14px 14px 14px; max-height:240px; overflow-x: scroll; border-bottom:1px solid #eaeaea; background:#fff; -webkit-overflow-scrolling:touch; } - .gnb>ul>li{float:none;position:static;} - .gnb > ul > li:first-child > a { border-top:0; } - .gnb>ul:after{display:none;} - .gnb>ul>li>a{position:static;padding:10px 0;line-height:normal;font-size:normal;color:#555; font-weight:bold;} - .onepage .gnb>ul>li>a { color:#555; line-height:normal } - - .gnb>ul .depth2{display:block;position:static;padding:0;background-color:#fff} - .gnb>ul .depth2>li{position:static} - .gnb>ul .depth2:after{display: none} - .gnb>ul .depth2 a{position:static;min-width:100%;height:auto;padding:10px 0;line-height:normal;color:#555;} - .gnb>ul .depth3{display:block;position:static;background-color:#fff;padding:0;} - .gnb>ul .depth3 a { color:#999; } - .gnb>ul .depth2>li.more>a:after{display:none;} - - /* GNB */ - .gnb{ float:none;position:static;z-index:1;max-width:100%;height:100%;font-size:1em; display:block; } - .gnb #mobile_menu_btn { display:block; } - .gnb .menu_btn { height:22px; width:44px; display:block; position:absolute; top:14px; right:3px; display:inline-block; } - .gnb .menu_btn .menu_bar { width:20px; height:14px;position:relative; top:4px; left:12px; } - .gnb .menu_btn .menu_bar div { height:0; border-top:2px solid #383431; position:absolute; } - .header.sub_type3 .gnb .menu_btn .menu_bar div { border-top:2px solid #fff; } - .gnb .menu_btn .menu_bar div.btn1 { width:20px; top:0; } - .gnb .menu_btn .menu_bar div.btn2 { width:20px; top:6px; transition:all 0.1s } - .gnb .menu_btn .menu_bar div.btn3 { width:20px; bottom:0; } - - .gnb .menu_btn.opened .menu_bar div.btn1 { top:6px; width:20px; -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } - .gnb .menu_btn.opened .menu_bar div.btn2 { top:6px; display:none; } - .gnb .menu_btn.opened .menu_bar div.btn3 { top:6px; width:20px; -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } - - - .body { } - .body .lnb { display:none; } - .body .content { overflow:hidden; } - - .visual { box-sizing:border-box; } - .visual.sub{position:relative;padding:15px 14px 30px 14px;background-color:#f6f6f6;line-height:30px} - .visual.sub .sub_title{position:relative;z-index:2;width:;margin:0 auto} - .visual.sub .sub_title h1{position:relative;font-weight:700;font-family:Raleway,'나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif;font-size:17px;color:#444} - .visual.sub .sub_title h1:after{position:absolute;top:115%;left:0;width:22px;height:2px;background-color:#444;content:''} - .visual.sub .bg_img{display:none;position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;background-size:cover} - .visual.sub.sub_type2{padding:70px 0} - .visual.sub.sub_type2 .bg_img{display:block} - .visual.sub.sub_type2 .sub_title h1{color:#fff;font-weight:400;font-size:23px;letter-spacing:1px} - .visual.sub.sub_type2 .sub_title h1:after, - .visual.sub.sub_type3 .sub_title h1:after{background:none} - .visual.sub.sub_type3{padding:100px 0 90px;line-height:40px;text-align:center} - .visual.sub.sub_type3 .bg_img{display:block;background-attachment:fixed;background-size:auto auto} - .visual.sub.sub_type3 .sub_title h1{font-size:39px;font-weight:400;color:#fff;letter-spacing:2px} - - .swiper-container { height:270px; font-family: Raleway,'나눔바른고딕',NanumBarunGothic,ng,'돋움',Dotum,AppleGothic,Helvetica,serif; } - .swiper-container > div > div { display: table; height:270px; color:#fff; } - .swiper-container > div > div > div { display: table-cell; vertical-align: middle; } - .swiper-container > div > div > div > div { padding:0 14px; width:auto; margin:0; } - .swiper-container h1 { font-weight:600; margin:0 0 10px 0; font-size:30px; line-height:40px; text-decoration: none; } - .swiper-container p { font-size: 15px; line-height: 18px; } - } - - - - /* header animation */ @-webkit-keyframes ani-header { - 0% {top: -60px} - 100% {top: 0px} + 0% { + top: -60px + } + 100% { + top: 0px + } } - @keyframes ani-header { - 0% {top: -60px} - 100% {top: 0px} + 0% { + top: -60px + } + 100% { + top: 0px + } } diff --git a/layouts/xedition/css/welcome.css b/layouts/xedition/css/welcome.css index 8157142df..27c5c39b1 100644 --- a/layouts/xedition/css/welcome.css +++ b/layouts/xedition/css/welcome.css @@ -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; } - } diff --git a/layouts/xedition/css/widget.login.css b/layouts/xedition/css/widget.login.css index 46ba99b2c..9396774e4 100644 --- a/layouts/xedition/css/widget.login.css +++ b/layouts/xedition/css/widget.login.css @@ -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 + } } \ No newline at end of file diff --git a/layouts/xedition/css/xeicon.css b/layouts/xedition/css/xeicon.css index 5ab3aee9f..d759d2911 100644 --- a/layouts/xedition/css/xeicon.css +++ b/layouts/xedition/css/xeicon.css @@ -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; + } } \ No newline at end of file