Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- charset "UTF-8";
- .checkbox {
- height: 19px;
- width: 19px;
- border-radius: 3px;
- border: 1px solid #ced1d7;
- overflow: hidden;
- -webkit-appearance: none;
- outline: none;
- display: inline;
- cursor: pointer;
- margin-right: 10px;
- }
- .checkbox .checked {
- cursor: pointer;
- display: inline;
- }
- .btn_c {
- padding-top: 29px;
- text-align: center;
- }
- .btn_c a {
- display: inline-block;
- text-align: center;
- }
- .btn_del {
- display: inline-block;
- font-size: 12px;
- color: #a7adb1;
- }
- .btn_del:hover {
- color: #7f858b;
- }
- /*
- input[type='radio']{background:#fff;border:solid 2px #ccc;height:15px;width:15px;-webkit-appearance:none;-webkit-border-radius:100px;}
- input[type='radio']:checked {background:#fff;border:solid 2px #ADABA8;}
- input[type='radio']:checked:after{content:' ';display:block;width:9px;height:9px;background:#fe0000;position:relative;top:1px;left:1px;-webkit-border-radius:100px;}
- */
- .btn_tip {
- position: absolute;
- display: inline-block;
- width: 14px;
- height: 14px;
- background: url(../../imgs/icon.png) no-repeat 0 -123px;
- font-size: 0;
- }
- .btn_tip:hover,.btn_tip.on {
- background-position: 0 -137px;
- }
- .tip {
- width: 248px;
- padding: 23px;
- position: absolute;
- top: 35px;
- left: 0;
- background: #fff;
- box-shadow: 0 0 2px #aaa;
- font-size: 12px;
- color: #7f858b;
- line-height: 1.5em;
- display: none;
- z-index: 100;
- }
- .tip:after {
- content: '';
- display: block;
- width: 22px;
- height: 10px;
- position: absolute;
- top: -10px;
- left: 50%;
- margin-left: -11px;
- background: url(../../imgs/icon.png) no-repeat 0 -194px;
- }
- .btn_c a,.btn_c button {
- display: inline-block;
- width: 273px;
- height: 53px;
- line-height: 53px;
- margin: 0 3px;
- background: #0075ff;
- text-align: center;
- font-size: 14px;
- color: #fff;
- font-weight: bold;
- }
- .btn_c a:hover,.btn_c button:hover {
- background: #0069e5;
- }
- .btn_c .gray {
- background: #cad2d7;
- margin-left: 0px;
- margin-right: 10px;
- }
- .btn_c .gray:hover,.btn_c .gray:hover {
- background: #b5bdc1;
- }
- /*.error {
- padding-top: 5px;
- text-align: center;
- font-size: 12px;
- color: #ff1800; }*/
- /*μΉ΄λ곡ν΅*/
- .step {
- position: relative;
- background: #fff;
- box-shadow: 1px 1px 3px #bbb;
- margin-bottom: 29px;
- }
- .step h4 {
- position: relative;
- box-sizing: border-box;
- min-height: 58px;
- line-height: 1.2em;
- border-bottom: 1px solid #eaeaea;
- padding-right: 29px;
- padding-left: 29px;
- padding-top: 19px;
- padding-bottom: 19px;
- font-size: 17px;
- color: #000;
- vertical-align: middle;
- font-weight: bold;
- }
- .step h4 p {
- position: absolute;
- top: 25px;
- left: 30px;
- width: 29px;
- height: 29px;
- text-align: center;
- background: url(../../imgs/icon_title.png) no-repeat 0 -19px;
- }
- .step h4 p span,.step h4 p:before,.step h4 p:after {
- display: inline-block;
- width: 4px;
- height: 4px;
- background: url(../../imgs/title_dot.png) no-repeat center;
- background-size: 100% auto;
- position: absolute;
- top: 13px;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation: load7 2s infinite ease-in-out;
- animation: load7 2s infinite ease-in-out;
- }
- .step h4 p span {
- left: 13px;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-animation-delay: -0.16s;
- animation-delay: -0.16s;
- }
- .step h4 p:before {
- content: '';
- left: 8px;
- -webkit-animation-delay: -0.32s;
- animation-delay: -0.32s;
- }
- .step h4 p:after {
- content: '';
- left: 18px;
- }
- @-webkit-keyframes load7 {
- 0%, 80%, 100% {
- background-size: 100% auto;
- }
- 40% {
- background-size: 0;
- }
- }
- @keyframes load7 {
- 0%, 80%, 100% {
- background-size: 100% auto;
- }
- 40% {
- background-size: 0;
- }
- }
- .step.close h4 p {
- background-position: 0 -155px;
- }
- .step.end h4 {
- background: url(../../imgs/icon_title_end.png) no-repeat 30px 25px;
- padding-right: 20px;
- }
- .step.error h4 {
- background: url(../../imgs/icon_title.png) no-repeat 30px -336px;
- text-align: left;
- color: #ff1800;
- }
- .step.error h4 p {
- display: none;
- }
- .step h5 {
- box-sizing: border-box;
- max-width: 556px;
- margin: 0 auto;
- padding-bottom: 29px;
- color: #7f858b;
- font-size: 12px;
- line-height: 1.5em;
- border-bottom: 1px solid #eaeaea;
- margin-bottom: 29px;
- }
- .step .more {
- position: absolute;
- top: 0;
- right: 37px;
- padding: 30px 0;
- line-height: 80px;
- font-size: 17px;
- color: #a7adb1;
- margin-top: 19px;
- }
- .step .more:after {
- content: '';
- display: inline-block;
- width: 14px;
- height: 8px;
- margin-left: 10px;
- background: url(../../imgs/icon.png) no-repeat 0 -70px;
- }
- .step .more:hover,.step .more.on {
- color: #7f858b;
- }
- .step .more:hover:after,.step .more.on:after {
- background-position: 0 -78px;
- }
- .step .more + div {
- display: none;
- }
- .step .more.new:after {
- width: 21px;
- height: 20px;
- background-position: 0 -377px;
- vertical-align: -3px;
- }
- .step .more.new:hover:after,.step .more.new.on:after {
- background-position: 0 -398px;
- }
- .step .content {
- text-align: left;
- padding-top: 58px;
- padding-bottom: 58px;
- padding-left: 76px;
- padding-right: 76px;
- }
- .step fieldset {
- position: relative;
- margin: 18px 87px 0;
- }
- .step .add_input {
- box-sizing: border-box;
- width: 100%;
- height: 67px;
- background: none;
- border: none;
- padding: 15px 18px 15px 9px;
- }
- .step .add_input b {
- position: relative;
- display: block;
- box-sizing: border-box;
- width: 50%;
- float: left;
- padding-left: 9px;
- }
- .step .add_input b .btn_tip {
- top: 12px;
- right: 16px;
- }
- .step .add_input b .tip {
- margin: 2px 0 0 95px;
- }
- .step .add_input:after {
- content: '';
- clear: both;
- }
- .step .add_input:hover {
- background: None;
- }
- .step1 fieldset {
- border-top: 1px solid #eaeaea;
- max-width: 556px;
- padding: 9px 0 0;
- margin: 0 auto;
- padding-top: 29px;
- }
- .step1 fieldset p {
- position: relative;
- padding-bottom: 19px;
- }
- .step1 fieldset p label {
- color: #7f858b;
- margin-right: 30px;
- font-size: 12px;
- }
- .step1 fieldset p label.on {
- color: #0075ff;
- }
- .step1 fieldset p label input {
- margin-right: 9px;
- vertical-align: -5px;
- }
- .step1 fieldset p .txt {
- font-size: 17px;
- }
- .step1 fieldset p .btn_tip {
- top: 16px;
- right: 19px;
- }
- .step1 fieldset p .tip {
- left: auto;
- right: -122px;
- }
- .step1 fieldset:first-child {
- border-top: 0;
- padding: 0 87px 18px !important;
- }
- .step2 fieldset {
- max-width: 556px;
- margin: 0 auto;
- border: 1px solid #eaeaea;
- }
- .step2 fieldset dl {
- width: 55%;
- float: left;
- box-sizing: border-box;
- }
- .step2 fieldset dl dt {
- position: relative;
- height: 41px;
- line-height: 41px;
- border-bottom: 1px solid #eaeaea;
- }
- .step2 fieldset dl dt .btn_tip {
- top: 14px;
- margin-left: 5px;
- }
- .step2 fieldset dl dt .tip {
- margin: 2px 0 0 -54px;
- }
- .step2 fieldset dl dt b {
- font-weight: normal;
- color: #7f858b;
- }
- .step2 fieldset dl dd {
- padding: 18px 60px 18px 0;
- }
- .step2 fieldset .btn_add {
- clear: both;
- position: absolute;
- top: 60px;
- right: 17px;
- display: inline-block;
- width: 37px;
- height: 37px;
- background: #0075ff;
- font-size: 0;
- }
- .step2 fieldset .btn_add:hover {
- background: #0069e5;
- }
- .step2 fieldset .btn_add:after {
- content: '';
- position: absolute;
- top: 12px;
- left: 12px;
- display: inline-block;
- width: 12px;
- height: 12px;
- background: url(../../imgs/icon.png) no-repeat 0 -177px;
- }
- .step2 fieldset dl:first-child {
- width: 45%;
- }
- .step2 fieldset dl:first-child dt {
- padding-left: 17px;
- }
- .step2 fieldset dl:first-child dt .tip {
- margin: 2px 0 0 -25px;
- }
- .step2 fieldset dl:first-child dd {
- padding: 18px 9px 18px 17px;
- }
- .step2 fieldset p {
- clear: both;
- position: relative;
- height: 40px;
- border-top: 1px solid #eaeaea;
- background: #f8f9fb;
- }
- .step2 fieldset p:hover {
- background: #e6f1ff;
- }
- .step2 fieldset p > span {
- display: inline-block;
- width: 44%;
- height: 40px;
- line-height: 40px;
- color: #14171a;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .step2 fieldset p > span:first-child {
- text-indent: 17px;
- }
- .step2 fieldset p .btn_del {
- position: absolute;
- top: 12px;
- right: 19px;
- }
- .step3 fieldset {
- max-width: 556px;
- margin: 0 auto;
- border: 1px solid #eaeaea;
- }
- .step3 fieldset dl {
- float: left;
- width: 50%;
- height: 206px;
- box-sizing: border-box;
- text-align: center;
- }
- .step3 fieldset dl dt {
- padding: 20px 0 12px;
- font-size: 17px;
- color: #333d47;
- }
- .step3 fieldset dl dd {
- padding: 0 27px;
- color: #a7adb1;
- }
- .step3 fieldset dl dd input {
- margin-top: 5px;
- }
- .step3 fieldset dl dd a,.step3 fieldset dl dd button {
- display: inline-block;
- width: 143px;
- height: 37px;
- line-height: 37px;
- margin-top: 18px;
- background: #0075ff;
- text-align: center;
- color: #fff;
- }
- .step3 fieldset dl dd a:hover,.step3 fieldset dl dd button:hover {
- background: #0069e5;
- }
- .step3 fieldset dl:first-child {
- border-right: 1px solid #eaeaea;
- }
- .step3 fieldset dl:first-child dt {
- padding-bottom: 25px;
- }
- .step3 fieldset dl:first-child dd a {
- margin-top: 25px;
- }
- .step3 fieldset:after {
- content: '';
- clear: both;
- }
- .step3 > div > dl {
- max-width: 556px;
- margin: 18px auto 0;
- border: 1px solid #eaeaea;
- padding: 0;
- }
- .step3 > div > dl dt {
- position: relative;
- height: 41px;
- line-height: 41px;
- padding-left: 17px;
- color: #333d47;
- }
- .step3 > div > dl dt .btn_tip {
- margin: 14px 0 0 10px;
- }
- .step3 > div > dl dt .tip {
- margin: 2px 0 0 -56px;
- }
- .step3 > div > dl dd {
- height: 40px;
- line-height: 40px;
- position: relative;
- background: #f8f9fb;
- border-top: 1px solid #eaeaea;
- padding-left: 17px;
- }
- .step3 > div > dl dd b {
- font-weight: normal;
- color: #14171a;
- }
- .step3 > div > dl dd > span {
- display: inline-block;
- height: 40px;
- line-height: 40px;
- position: absolute;
- top: 0;
- right: 15px;
- padding-right: 20px;
- color: #a7adb1;
- }
- .step3 > div > dl dd > span.on {
- color: #0075ff;
- padding: 0;
- }
- .step3 > div > dl dd > span.on:after {
- content: '';
- display: inline-block;
- width: 14px;
- height: 11px;
- background: url(../../imgs/icon.png) no-repeat 0 -11px;
- margin-left: 5px;
- }
- .step4 fieldset {
- min-width: 556px;
- max-width: 556px;
- margin: 0 auto;
- border: 1px solid #eaeaea;
- }
- .step4 fieldset dl {
- float: left;
- width: 50%;
- }
- .step4 fieldset dl dt {
- position: relative;
- height: 41px;
- line-height: 41px;
- border-bottom: 1px solid #eaeaea;
- }
- .step4 fieldset dl dt b {
- font-weight: normal;
- color: #7f858b;
- }
- .step4 fieldset dl dt .btn_tip {
- top: 14px;
- margin-left: 5px;
- }
- .step4 fieldset dl dt .tip {
- margin: 2px 0 0 -32px;
- }
- .step4 fieldset dl dd {
- padding: 18px 18px 13px 0;
- }
- .step4 fieldset dl:first-child dt {
- padding-left: 17px;
- }
- .step4 fieldset dl:first-child dt .tip {
- margin-left: -2px;
- }
- .step4 fieldset dl:first-child dd {
- padding: 18px 9px 13px 18px;
- }
- .step4 .page {
- clear: both;
- }
- .step4 .page div {
- position: relative;
- margin: 9px 19px 0;
- padding: 0 18px 0 105px;
- }
- .step4 .page label {
- display: block;
- width: 80px;
- position: absolute;
- top: 5px;
- left: 18px;
- font-size: 14px;
- color: #14171a;
- }
- .step4 .page label .btn_tip {
- display: inline-block;
- top: 4px;
- margin-left: 5px;
- }
- .step4 .page .an .tip {
- margin: -6px 0 0 -84px;
- }
- .step4 .page .ios .tip {
- margin: -6px 0 0 -114px;
- }
- .step4 .page .web .tip {
- margin: -6px 0 0 -108px;
- }
- .step4 .page div > input {
- background: #f8f9fb;
- color: #7f858b;
- }
- .step4 .page div > input.bg {
- background: #fff;
- }
- .step4 .page button {
- display: block;
- position: absolute;
- }
- .step4 .page button:nth-child(3) {
- top: 10px;
- right: 56px;
- height: 10px;
- font-size: 12px;
- color: #66acff;
- }
- .step4 .page button:nth-child(4) {
- top: 15px;
- right: 33px;
- width: 14px;
- height: 8px;
- background: url(../../imgs/icon.png) no-repeat 0 -70px;
- font-size: 0;
- }
- .step4 .page button:nth-child(4).on {
- background-position: 0 -78px;
- }
- .step4 .page .btn_input_edit {
- position: absolute;
- top: 7px;
- right: 26px;
- display: block;
- width: 80px;
- z-index: 10;
- }
- .step4 .page .btn_input_edit button {
- position: relative;
- display: inline-block;
- width: 29px;
- height: 19px;
- line-height: 19px;
- margin-left: 10px;
- font-size: 12px;
- color: #0075ff;
- text-align: center;
- }
- .step4 .page .btn_input_edit button:first-child {
- color: #a7adb1;
- }
- .step4 .page ul {
- max-height: 185px;
- overflow: auto;
- overflow-x: hidden;
- display: none;
- }
- .step4 .page ul li {
- box-sizing: border-box;
- border: 1px solid #eaeaea;
- border-top: 0;
- background: #f8f9fb;
- width: 100%;
- height: 37px;
- line-height: 37px;
- padding: 0 14px;
- color: #7f858b;
- }
- .step4 .page ul li:hover {
- background: #e6f1ff;
- }
- .step4 .page ul li.on {
- color: #333;
- }
- .step4 .page ul li.on:before {
- content: '';
- display: inline-block;
- width: 20px;
- height: 11px;
- background: url(../../imgs/icon.png) no-repeat 0 -11px;
- }
- .step4 .page.an {
- border-top: 1px solid #eaeaea;
- padding-top: 13px;
- margin-top: 0;
- }
- .step4 .page.an label {
- top: 18px;
- }
- .step4 .page.an button:nth-child(3) {
- top: 23px;
- }
- .step4 .page.an button:nth-child(4) {
- top: 28px;
- }
- .step4 fieldset .btn_c {
- padding: 15px 0 18px;
- background: none;
- border: none;
- }
- .step4 fieldset .btn_c button {
- height: 37px;
- line-height: 37px;
- margin-right: 0px;
- margin-left: 10px;
- }
- .step4 fieldset .btn_c button:before {
- content: '';
- display: inline-block;
- width: 13px;
- height: 12px;
- background: url(../../imgs/icon.png) no-repeat 0 -178px;
- margin-right: 8px;
- }
- .step4 .template {
- clear: both;
- }
- .step4 .template p {
- position: relative;
- height: 40px;
- border-top: 1px solid #eaeaea;
- background: #f8f9fb;
- }
- .step4 .template p > span {
- display: inline-block;
- width: 44%;
- height: 40px;
- line-height: 40px;
- color: #14171a;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .step4 .template p > span:first-child {
- text-indent: 17px;
- }
- .step4 .template p button:nth-child(3) {
- position: absolute;
- top: 16px;
- right: 14px;
- width: 14px;
- height: 8px;
- background: url(../../imgs/icon.png) no-repeat 0 -70px;
- font-size: 0;
- }
- .step4 .template p button:nth-child(3).on {
- background-position: 0 -78px;
- }
- .step4 .template p .btn_del {
- position: absolute;
- top: 13px;
- right: 19px;
- }
- .step4 .template > p.on,.step4 .template > p:hover {
- background: #e6f1ff;
- }
- .step4 .template > ul {
- border-top: 1px solid #cad2d7;
- background: #e6f1ff;
- box-sizing: border-box;
- padding: 15px 38px;
- display: none;
- }
- .step4 .template > ul.on {
- display: block;
- }
- .step4 .template > ul li {
- position: relative;
- box-sizing: border-box;
- padding: 0 0 7px 100px;
- line-height: 1.4em;
- }
- .step4 .template > ul li:last-child {
- text-align: right;
- }
- .step4 .template > ul li:hover label,.step4 .template > ul li:hover span {
- color: #0075ff;
- }
- .step4 .template > ul label {
- position: absolute;
- left: 0;
- font-size: 12px;
- color: #7f858b;
- }
- .step4 .template > ul span {
- font-size: 12px;
- color: #7f858b;
- word-break: break-all;
- }
- .step.end fieldset {
- max-width: 556px;
- margin: 0 auto;
- border: 1px solid #eaeaea;
- border-bottom: 0;
- box-sizing: border-box;
- padding: 0 20px;
- }
- .step.end fieldset h6 {
- padding: 19px 0 29px;
- font-size: 12px;
- color: #a7adb1;
- word-break: keep-all;
- }
- .step.end fieldset h6 a {
- font-size: 12px;
- color: #66acff;
- }
- .step.end fieldset h6 a:hover {
- color: #0075ff;
- }
- .step.end fieldset div {
- position: relative;
- padding: 0 0 14px 128px;
- }
- .step.end fieldset div label {
- position: absolute;
- top: 5px;
- left: 18px;
- display: block;
- width: 103px;
- color: #14171a;
- }
- .step.end fieldset div label .btn_tip {
- top: 4px;
- margin-left: 8px;
- }
- .step.end fieldset div label .tip {
- margin: -7px 0 0 -106px;
- }
- .step.end fieldset div p {
- position: relative;
- box-sizing: border-box;
- width: 100%;
- height: 40px;
- line-height: 40px;
- border: 1px solid #eaeaea;
- background: #f8f9fb;
- padding-left: 14px;
- color: #7f858b;
- cursor: pointer;
- }
- .step.end fieldset div p:hover,.step.end fieldset div p.on {
- background: #e6f1fe;
- }
- .step.end fieldset div p button {
- display: block;
- width: 14px;
- height: 8px;
- background: url(../../imgs/icon.png) no-repeat 0 -70px;
- position: absolute;
- top: 15px;
- right: 18px;
- font-size: 0;
- }
- .step.end fieldset div p button.on {
- background-position: 0 -78px;
- }
- .step.end fieldset div ul {
- max-height: 200px;
- overflow: auto;
- overflow-x: hidden;
- background: #f8f9fb;
- display: none;
- }
- .step.end fieldset div ul li {
- box-sizing: border-box;
- height: 40px;
- line-height: 40px;
- border: 1px solid #eaeaea;
- border-top: 0;
- padding-left: 14px;
- color: #7f858b;
- cursor: pointer;
- }
- .step.end fieldset div ul li:hover {
- background: #e6f1ff;
- }
- .step.end fieldset div ul li.on {
- color: #333;
- }
- .step.end fieldset div ul li.on:before {
- content: '';
- display: inline-block;
- width: 20px;
- height: 11px;
- background: url(../../imgs/icon.png) no-repeat 0 -11px;
- }
- .step.end fieldset h6 + div p,.step.end fieldset h6 + div ul li {
- height: 57px;
- line-height: 1.4em;
- padding-top: 8px;
- }
- .step.end fieldset h6 + div p b,.step.end fieldset h6 + div ul li b {
- color: #14171a;
- }
- .step.end fieldset h6 + div p span,.step.end fieldset h6 + div ul li span {
- display: block;
- color: #0075ff;
- font-size: 12px;
- }
- .step.end fieldset h6 + div p button {
- top: 21px;
- }
- .step.end fieldset h6 + div label .tip {
- margin: -7px 0 0 -55px;
- }
- .step.end fieldset h6 + div ul {
- max-height: 171px;
- }
- .step.end fieldset h6 + div ul li.on {
- position: relative;
- padding-left: 38px;
- }
- .step.end fieldset h6 + div ul li.on:before {
- position: absolute;
- left: 14px;
- margin-top: 15px;
- }
- .step.end fieldset .btn_c {
- border-top: 1px solid #eaeaea;
- padding-top: 14px;
- }
- .step.end fieldset .btn_c a {
- width: 274px;
- height: 37px;
- line-height: 37px;
- font-size: 14px;
- }
- .step.end fieldset .btn_c span {
- display: block;
- padding: 5px 0 10px;
- font-size: 12px;
- color: #a7adb1;
- }
- .step.end > div > div {
- position: relative;
- max-width: 556px;
- margin: 0 auto;
- box-sizing: border-box;
- border: 1px solid #eaeaea;
- border-top: none;
- padding: 0 340px 19px 19px;
- }
- .step.end > div > div dl {
- border: 1px solid #eaeaea;
- height: 483px;
- }
- .step.end > div > div dl dt {
- height: 66px;
- padding: 19px 0;
- text-align: center;
- color: #a7adb1;
- }
- .step.end > div > div dl dt span {
- color: #a7adb1;
- }
- .step.end > div > div dl dt a,.step.end > div > div dl dt b {
- display: block;
- padding-top: 5px;
- font-weight: Normal;
- color: #0075ff;
- line-height: 1.4em;
- }
- .step.end > div > div dl dt a:after {
- content: '';
- display: block;
- margin: 8px auto 0;
- width: 15px;
- height: 15px;
- background: url(../../imgs/icon.png) no-repeat 0 -222px;
- }
- .step.end > div > div dl dt a:hover {
- color: #0069e5;
- }
- .step.end > div > div dl dt a:hover:after {
- background-position: 0 -237px;
- }
- .step.end > div > div dl dd {
- padding: 0 19px 19px;
- box-sizing: border-box;
- height: 379px;
- }
- .step.end > div > div dl + dl {
- position: absolute;
- top: 0;
- right: 19px;
- width: 320px;
- background: #f8f9fb;
- }
- .step.end > div > div dl + dl dd {
- border-top: 1px solid #eaeaea;
- background: url(../../imgs/bg_post.png) no-repeat 0 center;
- padding: 0;
- font-size: 0;
- overflow: auto;
- }
- .step.end > div > div dl + dl dd img {
- width: 100%;
- }
- /*νμ΄μ§ν νλ¦Ώ κ΄λ¦¬ λ° λͺ©νμ‘μ κ΄λ¦¬*/
- .management .step h4 {
- padding-left: 29px;
- padding-top: 19px;
- padding-right: 29px;
- height: 60px;
- }
- .management .step fieldset dl:first-child {
- width: 44%;
- }
- .management .step fieldset dl dt {
- border-bottom: 0;
- }
- .management .step fieldset dl dd {
- display: none;
- }
- .management .step fieldset div.web {
- padding-bottom: 13px;
- }
- .management .btn_c button {
- width: 325px;
- }
- @media screen and (min-width: 1024px) {
- #start .info div {
- height: 377px;
- }
- #start .info div dl {
- max-width: 100%;
- }
- #start .info div:first-child dl dt {
- padding-bottom: 28px;
- }
- }
- /* ===============================================
- bridge_stats
- =================================================*/
- /* ===============================================
- * Mixin and Variables
- =================================================*/
- /* ===============================================
- * λ§ν¬λ³ ν΅κ³ κ΄λ ¨ scssμ λλ€.
- =================================================*/
- .ab-sub-title:hover .tip {
- display: block;
- }
- .ab-sub-title .tip {
- left: 240px;
- top: 50px;
- width: 80px;
- }
- .ab-export-csv-btn {
- float: right;
- margin-right: 29px;
- margin-top: 17px;
- cursor: pointer;
- width: 20px;
- height: 27px;
- display: inline-block;
- background-image: url(../../imgs/ic_csv.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- /* ===============================================
- * ν΅κ³ νμ΄μ§ Header
- =================================================*/
- .ab-big-stat-view {
- display: inline-block;
- float: right;
- }
- .ab-day-counter {
- display: inline-block;
- font-size: 14px;
- color: #a7adb1;
- vertical-align: middle;
- height: 50px;
- line-height: 52px;
- padding: 0 29px;
- border-right: 1px solid #cad2d7;
- /* font-family: Open Sans-serif; */
- font-weight: bold;
- }
- .ab-launch-count {
- text-align: center;
- display: inline-block;
- vertical-align: middle;
- }
- .ab-install-count {
- text-align: center;
- display: inline-block;
- padding: 0 38px 0 29px;
- vertical-align: middle;
- }
- .ab-stat-big-num {
- font-size: 20px;
- color: #0075ff;
- letter-spacing: 0;
- font-family: Open Sans-serif;
- height: 30px;
- }
- .ab-stat-big-title {
- text-align: center;
- font-size: 12px;
- color: #0075ff;
- font-weight: bold;
- }
- .ab-stat-page-wrapper {
- position: relative;
- /*padding-bottom: 29px;*/
- }
- .ab-page-header {
- position: relative;
- }
- .ab-page-header .ab-refresh-tooltip {
- display: inline-block;
- float: right;
- margin-top: 1px;
- }
- .ab-page-header .ab-refresh-tooltip .ab-bullet-img {
- vertical-align: middle;
- }
- .ab-page-header .ab-refresh-tooltip .ab-tooltip-desc {
- vertical-align: middle;
- }
- .ab-page-header .ab-refresh-img {
- float: right;
- margin: 1px 9px 0 9px;
- }
- .ab-menu-title {
- display: inline-block;
- font-size: 25px;
- color: #576069;
- width: 75%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .ab-menu-description {
- display: inline-block;
- position: relative;
- margin-top: 19px;
- color: #a7adb1;
- font-size: 12px;
- }
- .ab-menu-refresh-bar {
- position: absolute;
- top: 0px;
- right: 0px;
- display: inline-block;
- width: 150px;
- }
- .ab-refresh-time {
- display: inline-block;
- float: right;
- font-size: 12px;
- color: #a7adb1;
- letter-spacing: 0;
- font-family: Open Sans-serif;
- }
- .ab-info-img {
- cursor: pointer;
- width: 12px;
- height: 12px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_info_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-info-img:hover {
- background-image: url(../../imgs/ic_info_over.png);
- }
- .ab-refresh-img {
- cursor: pointer;
- width: 12px;
- height: 12px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_refresh_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-refresh-img:hover {
- background-image: url(../../imgs/ic_refresh_over.png);
- }
- .ab-setting-img {
- cursor: pointer;
- width: 12px;
- height: 12px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_setting_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-setting-img:hover {
- display: inline-block;
- background-image: url(../../imgs/ic_setting_over.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-page-header:after {
- content: "";
- display: block;
- clear: both;
- }
- .ab-view-bar {
- margin-top: 29px;
- margin-bottom: 58px;
- border-top: 1px solid #cad2d7;
- padding-top: 29px;
- }
- .ab-view-bar:after {
- content: "";
- display: block;
- clear: both;
- }
- .ab-time-selector {
- display: inline-block;
- margin-top: 10px;
- float: left;
- }
- .ab-date-select {
- display: inline-block;
- font-size: 17px;
- color: #576069;
- margin: 0 19px;
- vertical-align: text-top;
- }
- .ab-go-first-img {
- cursor: pointer;
- width: 11px;
- height: 9px;
- margin-right: 9px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_goFirst_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-go-first-img:hover {
- background-image: url(../../imgs/ic_goFirst_over.png);
- }
- .ab-prev-img {
- cursor: pointer;
- width: 6px;
- height: 9px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_prev_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-prev-img:hover {
- background-image: url(../../imgs/ic_prev_over.png);
- }
- .ab-after-img {
- cursor: pointer;
- width: 6px;
- height: 9px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_after_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-after-img:hover {
- background-image: url(../../imgs/ic_after_over.png);
- }
- .ab-go-last-img {
- cursor: pointer;
- width: 11px;
- height: 9px;
- margin-left: 9px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_goLast_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-go-last-img:hover {
- background-image: url(../../imgs/ic_goLast_over.png);
- }
- .ab-select-term-img {
- cursor: pointer;
- width: 11px;
- height: 4px;
- margin-left: 19px;
- margin-right: 19px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_selectTerm_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-select-term-img:hover {
- background-image: url(../../imgs/ic_selectTerm_over.png);
- }
- /* ===============================================
- * ν΅κ³ νμ΄μ§ Body
- =================================================*/
- .ab-page-no-description {
- padding: 0px;
- }
- .ab-page-description {
- text-align: center;
- font-size: 14px;
- color: #a7adb1;
- padding-top: 0px;
- padding-bottom: 0px;
- height: 0px;
- }
- .ab-card-header {
- height: 57px;
- background-color: #f7f9fb;
- border-bottom: solid 1px #eaeaea;
- }
- .ab-stat-table-wrapper {
- position: relative;
- /*margin-bottom: 29px;*/
- }
- .ab-stat-table-container {
- background: #e5e7ec;
- overflow: auto;
- }
- .ab-line-chart-container {
- width: 100%;
- float: left;
- margin-bottom: 29px;
- }
- .ab-line-chart-container .ab-info-img {
- /* quite strange.. */
- vertical-align: sub;
- margin-bottom: 2px;
- }
- .ab-bridge-page-container {
- width: 21%;
- float: right;
- margin-bottom: 9px;
- }
- .ab-bridge-page-container .ab-setting-img {
- float: right;
- margin: 11px 19px 0 0;
- }
- .ab-sankey-chart-container {
- font-size: 16px;
- clear: both;
- margin-bottom: 38px;
- }
- .ab-card-header-title {
- margin: 13px 5px 13px 19px;
- display: inline-block;
- font-size: 13px;
- font-weight: bold;
- color: #0075ff;
- margin-top: 19px;
- margin-bottom: 19px;
- margin-left: 29px;
- margin-right: 9px;
- height: 19px;
- }
- .ab-line-chart {
- background-color: #fff;
- height: 280px;
- }
- .ab-bridge-page {
- background-color: #fff;
- height: 280px;
- padding: 19px;
- }
- /* ===============================================
- * ν΅κ³ νμ΄μ§ μλ΄λ©μμ§ (ν΅κ³ μμλ)
- =================================================*/
- .ab-post-info-block {
- height: 100%;
- width: 100%;
- display: table-cell;
- vertical-align: middle;
- position: absolute;
- /*background-color: rgba(255,255,255,0.8);*/
- text-align: center;
- z-index: 10;
- }
- .ab-post-info-container {
- /*height: 250px;*/
- padding: 25px 0;
- width: 100%;
- vertical-align: middle;
- bottom: -179px;
- background-color: rgba(255, 255, 255, 0.8);
- text-align: center;
- box-shadow: 1px 1px 3px #a7adb1;
- z-index: 10;
- }
- .ab-post-info {
- font-size: 20px;
- line-height: 60px;
- /*margin-top: 110px;*/
- margin-bottom: 30px;
- }
- .ab-post-info-button {
- cursor: pointer;
- font-size: 16px;
- width: 200px;
- margin: 0 auto;
- padding: 10px 0;
- border: 1px solid #555;
- }
- /* ===============================================
- * ν΅κ³ Table
- =================================================*/
- .ab-stat-table {
- background-color: #fff;
- width: 100%;
- text-align: center;
- font-size: 14px;
- font-weight: bold;
- color: #000;
- /*.ab-col.second {*/
- /*width: 11.8%;*/
- /*}*/
- /*.ab-col.third {*/
- /*width: 35%;*/
- /*padding: 9px 0;*/
- /*}*/
- /*.ab-col.fourth {*/
- /*width: 35%;*/
- /*padding: 9px 0;*/
- /*}*/
- }
- .ab-stat-table .ab-info-img {
- margin-left: 9px;
- margin-bottom: 2px;
- }
- .ab-stat-table .ab-sorting-img {
- margin-left: 9px;
- }
- .ab-stat-table .ab-column-img {
- margin-right: 9px;
- }
- .ab-stat-table tbody tr:nth-child(odd) {
- /* background-color: #f8f9fb; */
- border-bottom: 1px solid #eaeaea;
- border-top: 1px solid #eaeaea;
- }
- .ab-stat-table tbody tr:hover {
- cursor: pointer;
- background-color: #f2f8ff;
- }
- .ab-stat-table .non-hover:hover {
- cursor: initial;
- /* background-color: #e6f1ff; */
- }
- .ab-stat-table th {
- /* border: 1px solid #eaeaea; */
- text-align: center;
- }
- .ab-stat-table td {
- text-align: center;
- font-family: Open Sans-serif;
- }
- .ab-stat-table .ab-col {
- min-width: 100px;
- padding: 12px 0;
- background-color: #f7f9fb;
- padding-top: 19px;
- padding-bottom: 19px;
- padding-left: 29px;
- padding-right: 29px;
- border-bottom: 1px solid #eaeaea;
- border-left: 1px solid #eaeaea;
- }
- .ab-stat-table .ab-col-name {
- vertical-align: center;
- font-size: 13px;
- font-weight: bold;
- color: #000;
- }
- .ab-stat-table .ab-col.first-col {
- text-align: left !important;
- padding-left: 29px;
- width: 22.2%;
- background-color: #f7f9fb;
- border-right: 1px solid #eaeaea;
- border-left-width: 0px;
- }
- .ab-stat-table .ab-sub-col {
- padding: 12px;
- min-width: 75px;
- background-color: #f7f9fb;
- padding-top: 19px;
- padding-bottom: 19px;
- padding-left: 29px;
- padding-right: 29px;
- border-left: 1px solid #eaeaea;
- border-bottom: 1px solid #eaeaea;
- }
- .ab-stat-table .ab-table-td.first-td {
- text-align: left;
- padding-top: 19px;
- padding-left: 29px;
- padding-right: 29px;
- padding-bottom: 19px;
- }
- .ab-stat-table .ab-table-td-title {
- color: #000;
- font-size: 17px;
- letter-spacing: 0;
- padding-bottom: 2px;
- font-weight: bold;
- }
- .ab-stat-table .ab-table-td-desc {
- font-size: 12px;
- color: #a7adb1;
- }
- .ab-stat-table .ab-table-td-link {
- font-size: 12px;
- color: #0075ff;
- font-family: Open Sans-serif;
- letter-spacing: 0;
- }
- .ab-stat-table .ab-table-td-link:hover {
- color: rgba(0, 117, 255, 0.7);
- }
- .ab-percent {
- color: #a7adb1;
- }
- .ab-table-pagenation {
- text-align: center;
- font-size: 14px;
- font-weight: bold;
- color: #7f858b;
- height: 55px;
- margin-top: 28px;
- font-family: Open Sans-serif;
- }
- .ab-table-pagenation .ab-prev-img {
- margin-right: 19px;
- }
- .ab-table-pagenation .ab-pagination-list {
- display: inline-block;
- margin: 19px auto 38px auto;
- }
- .ab-table-pagenation .ab-pagination-list span {
- cursor: pointer;
- margin-right: 19px;
- }
- .ab-table-pagenation .ab-pagination-list span:hover {
- color: #333d47;
- }
- .ab-page-body-button {
- display: inline-block;
- padding: 12px 19px;
- font-size: 14px;
- color: #7f858b;
- padding-top: 19px;
- padding-bottom: 19px;
- padding-left: 29px;
- padding-right: 29px;
- }
- .ab-page-body-button .ab-info-img {
- /*vertical-align: text-top;*/
- }
- .ab-btn-title {
- display: inline-block;
- margin: 0 9px 0 9px;
- vertical-align: middle;
- color: #a7adb1;
- font-weight: bold;
- font-size: 13px;
- }
- .ab-main-title {
- cursor: pointer;
- vertical-align: middle;
- color: #000;
- font-weight: bold;
- height: 32px;
- }
- .ab-breadcrumb-img {
- margin-left: 19px;
- margin-right: 19px;
- width: 8px;
- height: 20px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_breadcrumb.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-detail-page-name {
- vertical-align: middle;
- font-size: 25px;
- font-weight: bold;
- color: #7f858b;
- white-space: nowrap;
- cursor: pointer;
- }
- .ab-detail-page-url {
- color: #0075ff;
- margin-left: 9px;
- vertical-align: middle;
- font-size: 25px;
- font-family: Open Sans-serif;
- letter-spacing: 0;
- white-space: nowrap;
- cursor: pointer;
- }
- .ab-detail-page-url:hover {
- color: rgba(0, 117, 255, 0.7);
- }
- .ab-sub-title:hover {
- text-decoration: underline;
- }
- .ab-plus-btn-img {
- cursor: pointer;
- width: 12px;
- height: 12px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_add_gray_opacity50.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-plus-btn-img:hover {
- color: #576069;
- display: inline-block;
- background-image: url(../../imgs/ic_add_gray_opacity100.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-sorting-img {
- cursor: pointer;
- width: 6px;
- height: 6px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_sorting_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-column-img-btn {
- display: inline-block;
- padding: 8px 0;
- cursor: pointer;
- }
- .ab-column-img {
- width: 10px;
- height: 2px;
- vertical-align: middle;
- display: inline-block;
- background-image: url(../../imgs/ic_columnSubtract_default.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- .ab-column-img {
- display: inline-block;
- background-image: url(../../imgs/ic_columnSubtract_over.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- }
- /* ===============================================
- * Alert Animation
- =================================================*/
- .ab-alert-enter {
- opacity: 0.01;
- top: 0;
- }
- .ab-alert-enter.ab-alert-enter-active {
- opacity: 1;
- top: 100px;
- transition: opacity, .5s, ease-in, top, .5s, ease;
- }
- ::selection {
- background-color: #0075ff;
- color: white;
- }
- /* ===============================================
- * Date Picker
- =================================================*/
- .step .more {
- position: absolute;
- top: 0;
- right: 37px;
- padding: 0 0;
- line-height: 80px;
- font-size: 17px;
- color: #a7adb1;
- cursor: pointer;
- }
- /* ===============================================
- dashboard
- =================================================*/
- #dashboard-layout-container {
- position: relative;
- min-width: 970px;
- height: 100%;
- box-sizing: border-box;
- padding-left: 200px;
- transition: 0.1s;
- -webkit-transition: 0.1s;
- transition-timing-function: ease-out;
- }
- #dashboard-layout-container .contents {
- padding: 30px 30px 40px;
- }
- #dashboard-layout-container .footer {
- position: relative;
- height: 120px;
- background: #e5e7ec;
- border-top: 1px solid #ced1d7;
- padding: 30px 60px 30px 60px;
- }
- #dashboard-layout-container .menu-group {
- position: relative;
- float: left;
- width: 150px;
- height: 120px;
- }
- #dashboard-layout-container .menu-title > p {
- margin: 0px 0px 15px 0px;
- color: #838a92;
- font-size: 12px;
- font-weight: 700;
- line-height: 1em;
- }
- #dashboard-layout-container .menu-link > p {
- color: #838a92;
- font-size: 12px;
- text-decoration: none;
- font-weight: normal;
- margin: 6px auto;
- }
- #dashboard-layout-container .menu-link:hover > p {
- color: #444d57;
- }
- #dashboard-layout-container .contact-group {
- position: relative;
- float: right;
- width: 150px;
- height: 120px;
- }
- #dashboard-layout-container .footer-logo {
- width: 160px;
- height: 50px;
- }
- #dashboard-layout-container .menu-subtitle {
- color: #838a92;
- font-size: 10px;
- text-decoration: none;
- font-weight: normal;
- }
- #dashboard-layout-container .menu-subtitle > p {
- color: #838a92;
- font-size: 10px;
- text-decoration: none;
- font-weight: normal;
- }
- #more_app {
- position: fixed;
- top: 60px;
- left: 79px;
- box-sizing: border-box;
- width: 120px;
- height: 100%;
- background: #ced1d7;
- overflow: auto;
- overflow-x: hidden;
- transition: 0.1s;
- -webkit-transition: 0.1s;
- -moz-transition: 0.1s;
- -o-transition: 0.1s;
- transition-timing-function: ease-out;
- z-index: 50;
- padding-bottom: 60px;
- }
- #more_app li {
- width: 90px;
- margin: 0 auto;
- }
- #more_app li:first-child {
- margin-top: 15px;
- }
- #more_app li a,#more_app li button {
- display: block;
- box-sizing: border-box;
- width: 100%;
- height: 105px;
- padding-top: 10px;
- margin: 0;
- }
- #more_app li span {
- display: block;
- width: 60px;
- height: 60px;
- margin: 0 auto;
- border-radius: 10px;
- overflow: Hidden;
- font-size: 0;
- }
- #more_app li span i {
- font-size: 22px;
- color: #0075ff;
- margin-top: 19px;
- }
- #more_app li span img {
- width: 100%;
- }
- #more_app li span img.add-app-img {
- width: auto;
- padding-top: 19px;
- }
- #more_app li.add-app {
- margin-bottom: 40px;
- }
- #more_app li.add-app b {
- white-space: normal;
- }
- #more_app li b {
- display: block;
- width: 60px;
- margin: 0 auto;
- padding-top: 5px;
- font-weight: 500;
- font-size: 13px;
- color: #444d57;
- letter-spacing: 0;
- text-align: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- #more_app li.add-app b {
- color: #838a92;
- }
- #more_app li:hover {
- background: #e5e7ec;
- }
- #more_app li.on {
- background: #bdc0c5;
- border-radius: 3px;
- }
- #more_app li.on b {
- color: #000e1f;
- }
- #more_app li.add span {
- margin-bottom: 3px;
- }
- #more_app li.add a {
- padding-top: 10px;
- }
- #more_app li.add a:before {
- position: absolute;
- display: block;
- width: 90px;
- line-height: 60px;
- text-align: center;
- color: #bdc0c5;
- font-size: 18px;
- opacity: 1;
- }
- #more_app li.add:hover {
- background: none;
- }
- #more_app li.add:hover span {
- background: #f7f8fa;
- }
- #more_app li.add a b {
- color: #838a92;
- font-weight: 600;
- }
- #dashboard-layout-container.open {
- padding-left: 320px;
- }
- #dashboard-layout-container.open #more_app {
- left: 200px;
- }
- #dashboard-layout-container #link_search {
- position: relative;
- border-bottom: 1px solid #ced1d7;
- box-sizing: border-box;
- height: 49px;
- padding: 12px 200px 0 64px;
- }
- #dashboard-layout-container #link_search:before {
- font-family: FontAwesome;
- content: "\f002";
- position: absolute;
- top: 13px;
- left: 30px;
- color: #5ba5fd;
- font-size: 15px;
- }
- #dashboard-layout-container #link_search input {
- border: none;
- box-sizing: border-box;
- width: 100%;
- height: 20px;
- line-height: 20px;
- background: #e5e7ec;
- color: #000e1f;
- font-size: 15px;
- }
- #dashboard-layout-container #link_search ::-webkit-input-placeholder {
- color: #5ba5fd;
- }
- #dashboard-layout-container .my-tap {
- position: fixed;
- bottom: 0px;
- left: 200px;
- width: 180px;
- background: #fff;
- z-index: 51;
- box-sizing: border-box;
- width: 160px;
- padding: 10px 20px;
- border: 1px solid #bdc0c5;
- box-shadow: 0 0 3px rgba(0,0,0,0.2);
- display: none;
- }
- #dashboard-layout-container .my-tap.on {
- display: block;
- }
- #dashboard-layout-container .my-tap a {
- display: block;
- height: 34px;
- line-height: 34px;
- font-size: 13px;
- color: #5f6165;
- cursor: pointer;
- }
- #dashboard-layout-container #my {
- position: absolute;
- top: 0;
- right: 0;
- width: 180px;
- background: #e5e7ec;
- z-index: 10;
- }
- #dashboard-layout-container #my dt {
- height: 48px;
- line-height: 48px;
- padding: 0 52px 0 20px;
- cursor: pointer;
- font-size: 13px;
- color: #828a92;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- text-align: right;
- }
- #dashboard-layout-container #my dt:after {
- font-family: FontAwesome;
- content: "\f107";
- position: absolute;
- top: 0;
- right: 21px;
- color: #bdc0c5;
- font-size: 30px;
- }
- #dashboard-layout-container #my dt:hover {
- color: #838a92;
- }
- #dashboard-layout-container #my dt.on {
- color: #444d57;
- }
- #dashboard-layout-container #my dt:hover:after,#dashboard-layout-container #my dt.on:after {
- opacity: .5;
- }
- #dashboard-layout-container #my dd {
- position: absolute;
- top: 40px;
- right: 10px;
- box-sizing: border-box;
- width: 160px;
- padding: 10px 20px;
- background: #fff;
- border: 1px solid #bdc0c5;
- box-shadow: 0 0 3px rgba(0,0,0,0.2);
- display: none;
- }
- #dashboard-layout-container #my dd.on {
- display: block;
- }
- #dashboard-layout-container #my dd a {
- display: block;
- height: 34px;
- line-height: 34px;
- font-size: 13px;
- color: #5f6165;
- cursor: pointer;
- }
- #dashboard-layout-container #my dd a:before {
- font-family: FontAwesome;
- content: "\f08b";
- display: inline-block;
- width: 29px;
- color: #000;
- font-size: 17px;
- vertical-align: -2px;
- opacity: .3;
- }
- #dashboard-layout-container #my dd a:first-child:before {
- content: "\f013";
- }
- #dashboard-layout-container #my dd a:hover {
- color: #000e1f;
- }
- #dashboard-layout-container #my dd a:hover:before {
- opacity: .7;
- }
- #dashboard-layout-container .contents h3 {
- padding-bottom: 58px;
- }
- #dashboard-layout-container .contents h3 b {
- cursor: pointer;
- vertical-align: middle;
- color: #000;
- font-weight: bold;
- height: 32px;
- font-size: 25px;
- }
- #dashboard-layout-container .contents h3 em {
- display: block;
- position: relative;
- margin-top: 19px;
- color: #a7adb1;
- font-size: 12px;
- line-height: 1.5em;
- }
- .load2 {
- padding: 20px 0;
- }
- .load2 .loader,.load2 .loader:before,.load2 .loader:after {
- border-radius: 50%;
- }
- .load2 .loader:before,.load2 .loader:after {
- position: absolute;
- content: '';
- }
- .load2 .loader:before {
- width: 5.2em;
- height: 10.2em;
- background: rgba(229, 231, 236, 0.9);
- border-radius: 10.2em 0 0 10.2em;
- top: -0.1em;
- left: -0.1em;
- -webkit-transform-origin: 5.2em 5.1em;
- transform-origin: 5.2em 5.1em;
- -webkit-animation: load2 2s infinite ease 1.5s;
- animation: load2 2s infinite ease 1.5s;
- }
- .load2 .loader {
- font-size: 11px;
- text-indent: -99999em;
- margin: 0px auto;
- position: relative;
- width: 10em;
- height: 10em;
- box-shadow: inset 0 0 0 1em #FFF;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- }
- .load2 .loader:after {
- width: 5.2em;
- height: 10.2em;
- background: rgba(229, 231, 236, 0.9);
- border-radius: 0 10.2em 10.2em 0;
- top: -0.1em;
- left: 5.1em;
- -webkit-transform-origin: 0px 5.1em;
- transform-origin: 0px 5.1em;
- -webkit-animation: load2 2s infinite ease;
- animation: load2 2s infinite ease;
- }
- @-webkit-keyframes load2 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes load2 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- /* ===============================================
- * μ λ‘μ¬ν
- =================================================*/
- .qa-input {
- display: block;
- padding: 12px;
- width: 100%;
- min-width: 280px;
- margin: 0px;
- }
- .qa-input.question {
- height: 180px;
- }
- .qa-button {
- width: 100%;
- height: 50px;
- font-size: 14px;
- display: block;
- margin: 0 auto;
- color: #fff;
- border: 1px solid #fff;
- }
- @media screen and (max-width: 720px) {
- .qa-input.question {
- display: none;
- }
- }
- /*
- #dashboard-layout-container{padding: 0px 0 0 173px;}
- @media screen and (min-width:1024px){
- #dashboard-layout-container{padding: 0px 0 0 10.9%;}
- #dashboard-layout-container .ab-logo-top-wrapper {
- left: 2.5%;
- }
- }
- */
- /* ===============================================
- * text overflow dotdotdot
- =================================================*/
- .dot3 {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .dot3.line {
- white-space: nowrap;
- }
- .blue-color {
- color: #0075ff !important;
- }
- .bold {
- font-weight: bold;
- }
- .pointer {
- cursor: pointer;
- }
- /* ===============================================
- landing
- =================================================*/
- /* ===============================================
- λΆλͺ
- =================================================*/
- .loading-backdrop {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 1000;
- opacity: 0.6;
- background-color: #000;
- width: 100%;
- height: 100%;
- display: none;
- }
- .loading-backdrop.active {
- display: block;
- }
- .alert-auth {
- position: fixed;
- top: 80px;
- right: 0;
- z-index: 1001;
- width: 120px;
- height: 22px;
- position: fixed;
- padding: 2%;
- background-color: #000;
- color: #fff;
- text-align: center;
- opacity: .8;
- display: none;
- }
- .alert-auth.active {
- display: block;
- animation: fadeOut 5s linear forwards;
- }
- @keyframes fadeOut {
- 0% {
- opacity: 0;
- }
- 10% {
- opacity: 1;
- }
- 90% {
- opacity: 1;
- transform: translateY(0px);
- }
- 99% {
- opacity: 0;
- transform: translateY(-30px);
- }
- 100% {
- opacity: 0;
- }
- }
- /* ===============================================
- myinfo
- =================================================*/
- #myinfo form input {
- margin: 5px 0px;
- }
- #myinfo form p span.error {
- padding-top: 9px;
- padding-bottom: 19px;
- font-size: 12px;
- font-weight: bold;
- }
- /* ===============================================
- templates
- =================================================*/
- .management .step h4 {
- padding-left: 29px;
- }
- .management .step fieldset {
- margin: 0 auto;
- }
- .management .step fieldset dl:first-child {
- width: 44%;
- }
- .management .step fieldset dl dt {
- border-bottom: 0;
- }
- .management .step fieldset dl dd {
- display: none;
- }
- .management .step fieldset div.web {
- padding-bottom: 13px;
- }
- .management .btn_c button {
- width: 325px;
- }
- .alert-enter {
- opacity: 0.01;
- }
- .alert-enter.alert-enter-active {
- opacity: 1;
- transition: opacity 500ms ease-in;
- }
- .alert {
- position: fixed;
- top: 50px;
- right: 50px;
- background: #14171a;
- height: 31px;
- padding: 10px 16px;
- }
- .alert p {
- color: #fff;
- font-size: 14px;
- line-height: 31px;
- }
- .alert:nth-child(2) {
- top: 111px !important;
- }
- .alert:nth-child(3) {
- top: 172px !important;
- }
- .step4 .page label.web {
- left: 119px;
- top: 8px;
- }
- .error.hide {
- display: none;
- }
- .btn_tip:hover + span.tip {
- display: block;
- }
- .animated.flipOutX {
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
- }
- @keyframes flipInX {
- from {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- opacity: 0;
- }
- 40% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- }
- 60% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
- transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
- opacity: 1;
- }
- 80% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
- transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
- }
- to {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- }
- @-webkit-keyframes flipOutX {
- from {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- 30% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- opacity: 1;
- }
- to {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- opacity: 0;
- }
- }
- @keyframes flipOutX {
- from {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- 30% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
- opacity: 1;
- }
- to {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
- opacity: 0;
- }
- }
- .flipOutX {
- -webkit-animation-name: flipOutX;
- animation-name: flipOutX;
- -webkit-backface-visibility: visible !important;
- backface-visibility: visible !important;
- }
- /*page*/
- .page-header {
- position: relative;
- padding-bottom: 30px;
- width: 100%;
- display: table;
- table-layout: fixed;
- }
- .page-header .history-back {
- font-size: 30px;
- color: #bdc0c5;
- cursor: pointer;
- }
- .page-header .history-back:hover {
- color: #838a92;
- }
- /*.page-title{
- font-size:25px;color:#2d2d3c;font-weight:normal;line-height:1em;
- }
- .page-title+.refresh{
- vertical-align:5px
- }*/
- .refresh:hover .text-sub-small {
- color: #444d57;
- }
- .refresh:hover .icon-sub-small {
- color: #838a92;
- }
- .page-header .page-title-desc-wrapper {
- display: table-cell;
- vertical-align: top;
- }
- .page-header .page-header-button-wrapper {
- display: table-cell;
- vertical-align: middle;
- text-align: right;
- }
- .page-header .page-header-button {
- background-color: #0075ff;
- border-radius: 3px;
- width: 300px;
- height: 50px;
- font-size: 15px;
- color: #fff;
- text-align: center;
- line-height: 50px;
- }
- /* ===============================================
- * νΈλνΉ λ§ν¬λ³ ν΅κ³μ μμ κ²μμ°½
- =================================================*/
- .simplelink-search {
- display: inline-block;
- vertical-align: middle;
- height: 30px;
- line-height: 35px;
- }
- .vertical-line-30 {
- display: inline-block;
- vertical-align: middle;
- height: 30px;
- width: 1px;
- border-left: 1px solid #ced1d7;
- }
- .simplelink-search-undo {
- vertical-align: middle;
- position: relative;
- width: 30px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- background-color: #fff;
- border: none;
- }
- .simplelink-search-undo:hover {
- color: #838a92;
- cursor: pointer;
- }
- .text-input-normal-small {
- box-sizing: border-box;
- float: left;
- width: 150px;
- height: 30px;
- line-height: 30px;
- border: 1px solid #ced1d7;
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- padding: 0 10px;
- font-size: 13px;
- }
- .text-input-normal-small:focus {
- outline: none;
- }
- .input-search-button {
- position: relative;
- float: left;
- left: -1px;
- width: 30px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- border: 1px solid #ced1d7;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- background-color: #ced1d7;
- font-size: 13px;
- color: #fff;
- }
- /* ===============================================
- * κ²μκ²°κ³Ό μ΄κΈ°ν λ²νΌ
- =================================================*/
- /*card*/
- /*.card-title{
- position: relative;
- padding: 15px 20px;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- background-color: #fff;
- border-left: 1px solid #e3e5e8;
- border-right: 1px solid #e3e5e8;
- border-top: 1px solid #e3e5e8;
- box-sizing: border-box;
- font-size: 15px;
- color: #2d2d3c;
- }*/
- .card-title > span {
- font-weight: 500;
- }
- .card-title .button-normal-small-dropdown-label {
- position: absolute;
- top: 10px;
- right: 10px;
- }
- .card-title .button-normal-small-dropdown-label a {
- height: 30px;
- }
- .card-title-search .button-normal-small-dropdown-label {
- position: absolute;
- top: 10px;
- right: 10px;
- }
- .card-title-search .button-normal-small-dropdown-label a {
- height: 30px;
- }
- .card .button-normal-small-dropdown-label {
- position: absolute;
- top: 10px;
- right: 10px;
- }
- .card .button-normal-small-dropdown-label a {
- height: 30px;
- }
- .card-body-w-title {
- position: relative;
- padding: 20px;
- background-color: #fff;
- border-left: 1px solid #e3e5e8;
- border-right: 1px solid #e3e5e8;
- border-bottom: 1px solid #e3e5e8;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- box-sizing: border-box;
- }
- .card-body-normal {
- position: relative;
- padding: 20px;
- background-color: #fff;
- border-left: 1px solid #e3e5e8;
- border-right: 1px solid #e3e5e8;
- border-bottom: 1px solid #e3e5e8;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- box-sizing: border-box;
- }
- .input-w-guide .text-normal-small {
- font-weight: bold;
- }
- .card-body-normal .input-w-guide button {
- width: 300px;
- }
- .card-title-search {
- position: relative;
- background: #fff;
- padding: 10px 20px;
- border-top: 1px solid #e5e7ec;
- border-left: 1px solid #e5e7ec;
- border-right: 1px solid #e5e7ec;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- }
- .card-title-search .simplelink-search {
- position: relative;
- height: 30px;
- line-height: 35px;
- }
- .card-title-search .text-input-normal-small.undo {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- padding: 0 30px;
- font-size: 13px;
- }
- .card-title-search .text-input-normal-small-button-undo {
- font-size: 13px;
- color: #bdc0c5;
- }
- .card-title-search .text-input-normal-small-button-undo:hover {
- color: #838a92;
- cursor: pointer;
- }
- .card-title-search .input-search-button {
- width: 30px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- border: 1px solid #ced1d7;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- background-color: #ced1d7;
- font-size: 13px;
- color: #fff;
- }
- .card-title-search .input-search-button:hover {
- background-color: #bdc0c5;
- cursor: pointer;
- }
- /*table*/
- .table-wrap {
- width: 100%;
- overflow: auto;
- border-right: 1px solid #e5e7ec;
- border-left: 1px solid #e5e7ec;
- border-bottom: 1px solid #e5e7ec;
- border-bottom-right-radius: 3px;
- border-bottom-left-radius: 3px;
- box-sizing: border-box;
- }
- .table-normal {
- position: relative;
- width: 100%;
- background: #fff;
- margin-left: -1px;
- table-layout: fixed;
- }
- .table-normal th {
- height: 35px;
- padding: 10px 15px;
- background: #f7f8fa;
- border: 1px solid #ced1d7;
- border-right: 0;
- text-align: left;
- font-size: 13px;
- color: #444d57;
- }
- .table-normal th:hover {
- cursor: pointer;
- background: #e5e7ec;
- }
- .table-normal th .icon-arrow-down {
- color: #0075ff;
- }
- .table-normal th .icon-arrow-up {
- color: #0075ff;
- }
- .table-normal td {
- height: 42px;
- padding: 10px 15px;
- border: 1px solid #ced1d7;
- border-right: 0;
- border-bottom: 0;
- text-align: right;
- font-size: 15px;
- color: #000e1f;
- }
- table .table-width {
- width: 100px;
- }
- table .table-2-width {
- width: 230px;
- }
- table .table-content-label {
- text-align: left;
- padding-left: 15px;
- font-size: 13px;
- word-wrap: break-word;
- }
- table .table-content-label.default {
- text-align: left;
- padding-left: 15px;
- font-size: 11px;
- color: #bdc0c5;
- }
- table .table-content-sort {
- background: #f7f8fa;
- color: #000e1f;
- font-weight: 600;
- }
- table .table-content-tag {
- padding-left: 30px;
- text-align: left;
- line-height: 1.2em;
- }
- table .table-content-tag .icon-sub-small {
- position: absolute;
- margin: 7px 0 0 -15px;
- }
- table .table-content-date {
- text-align: center;
- padding-right: 5px;
- font-size: 13px;
- color: #838a92;
- }
- table .table-content-goalstatus {
- font-size: 15px;
- text-align: center;
- }
- table .table-content-goalstatus .register {
- color: #bdc0c5;
- }
- /*etc*/
- /*.pagination{
- padding:30px 0 40px;
- text-align:center
- }
- .pagination a{
- display:inline-block;
- width:30px;height:30px;line-height:30px;
- margin-left:1px;
- background:#f7f8fa;
- text-align:center;font-size:15px;color:#838a92;
- cursor: pointer;
- }
- .pagination a:hover{background:#ced1d7}
- .pagination a.on{
- background:#838a92;
- color:#fff
- }*/
- .box-small {
- box-sizing: border-box;
- height: 30px;
- line-height: 28px;
- border: 1px solid #ced1d7;
- border-radius: 3px;
- background: #fff;
- }
- .search-count {
- font-size: 13px;
- color: #bdc0c5;
- }
- .search-count .search-count-desc {
- font-size: 13px;
- color: #838a92;
- }
- .search-count .search-count-result {
- color: #838a92;
- }
- .border-sub {
- display: block;
- width: 100%;
- height: 1px;
- background: #eaeaea;
- border: none;
- overflow: hidden;
- font-size: 0;
- }
- /*ν΅κ³*/
- #simple_stats {
- position: relative;
- }
- #simple_stats .datepicker {
- position: absolute;
- top: 0;
- right: 0;
- }
- .summary {
- position: relative;
- width: 100%;
- display: table;
- background: #f7f8fa;
- margin: 1px;
- }
- .summary-content {
- display: inline-table;
- width: 33.3%;
- height: 60px;
- vertical-align: top;
- text-align: center;
- margin: 40px 0px 40px 0px;
- }
- .summary-content>b {
- padding-right: 10px;
- font-size: 30px;
- font-weight: normal;
- letter-spacing: -2px;
- }
- .summary-content em {
- display: inline-block;
- height: 40px;
- vertical-align: middle;
- text-align: left;
- }
- .banner-important-airbanner {
- width: 100%;
- min-height: 140px;
- background: #fff;
- border-radius: 3px;
- margin-bottom: 30px;
- box-shadow: 1px 1px 3px #838a92;
- padding: 30px 40px 30px 40px;
- box-sizing: border-box;
- display: table;
- }
- .banner-important-airbanner-content {
- width: 70%;
- display: table-cell;
- }
- .banner-important-airbanner-content > h1 {
- font-size: 30px;
- color: #444d57;
- margin-top: 10px;
- }
- .banner-important-airbanner-content > p {
- font-size: 15px;
- color: #838a92;
- }
- .banner-important-airbanner-button {
- width: 30%;
- text-align: center;
- display: table-cell;
- vertical-align: middle;
- cursor: pointer;
- }
- .banner-important-airbanner-button > p {
- font-size: 15px;
- color: #0075ff;
- line-height: 50px;
- font-weight: 700;
- text-decoration: none;
- }
- .banner-important-airbanner-button:hover > p {
- color: #074DD9;
- }
- /*λ‘κ·ΈμΈ & νμκ°μ */
- .header_new {
- position: absolute;
- top: 0;
- left: 0;
- height: 50px;
- width: 100%;
- min-width: 1022px;
- background: #0075ff;
- }
- .header_new .header {
- position: relative;
- width: 1022px;
- margin: 0 auto;
- }
- .header_new .header h1 {
- padding: 13px 0 0 30px;
- }
- .header_new .header p {
- position: absolute;
- top: 10px;
- right: 20px;
- }
- .header_new .header p a {
- display: block;
- box-sizing: border-box;
- width: 175px;
- height: 30px;
- line-height: 28px;
- border: 1px solid #fff;
- border-radius: 30px;
- text-align: center;
- font-size: 15px;
- color: #fff;
- opacity: 0.7;
- }
- .header_new .header p a:after {
- content: '';
- font-family: FontAwesome;
- content: "\f105";
- padding-left: 8px;
- }
- .header_new .header p a:hover {
- opacity: 1;
- }
- .header_new .header ul {
- position: absolute;
- top: 10px;
- right: 220px;
- text-align: right;
- }
- .header_new .header ul li {
- display: inline-block;
- }
- .header_new .header ul li a {
- display: inline-block;
- height: 30px;
- line-height: 30px;
- padding: 0 18px;
- font-size: 15px;
- color: #fff;
- opacity: 0.7;
- }
- .header_new .header ul li a:hover {
- opacity: 1;
- }
- .wrap_signup {
- background: #fff;
- min-width: 1022px;
- height: 100%;
- min-height: 620px;
- margin: 0 auto;
- }
- .wrap_signup footer {
- position: absolute;
- left: 0;
- bottom: 40px;
- width: 100%;
- text-align: center;
- }
- .wrap_signup footer .icon-normal-small {
- padding: 0 5px;
- }
- .signup {
- position: absolute;
- left: 50%;
- top: 50%;
- width: 300px;
- margin: -180px 0 0 -150px;
- }
- .signup h2 {
- padding: 70px 0 30px;
- text-align: center;
- background-size: 200px;
- }
- .signup fieldset .text-error,.signup fieldset .txt {
- display: block;
- margin-bottom: 10px;
- border-color: #ced1d7;
- border-radius: 3px;
- font-size: 15px;
- }
- .signup fieldset .txt::-webkit-input-placeholder,.signup fieldset .txt::-moz-placeholder,.signup fieldset .txt:-ms-input-placeholder,.signup fieldset .txt:-moz-placeholder {
- color: #bdc0c5;
- }
- .signup .btn {
- margin-top: 40px;
- text-align: center;
- }
- /*νΈλνΉ λ§ν¬ μμ±*/
- .card-body-info {
- position: relative;
- box-sizing: border-box;
- width: 100%;
- overflow: hidden;
- padding: 40px 25px;
- background: #f7f8fa;
- }
- .card-body-info .list {
- position: relative;
- box-sizing: border-box;
- width: 50%;
- max-width: 500px;
- padding: 0 15px;
- }
- .card-body-info .list .icon {
- width: 50px;
- height: 50px;
- line-height: 50px;
- border-radius: 50%;
- margin: 0 auto 20px;
- background: #bdc0c5;
- font-family: FontAwesome;
- text-align: center;
- color: #fff;
- font-size: 22px;
- }
- .card-body-info .list .goal-icon {
- width: 50px;
- height: 50px;
- line-height: 50px;
- border-radius: 50%;
- margin: 0 auto 10px;
- border: 1px solid #bdc0c5;
- text-align: center;
- color: #bdc0c5;
- font-size: 22px;
- }
- .card-body-info .list .goal-text {
- font-size: 30px;
- color: #bdc0c5;
- text-align: center;
- margin-bottom: 10px;
- }
- .card-body-info .list .icon.i2 {
- background: #444d57;
- }
- .card-body-info .list .txt {
- height: 90px;
- word-break: keep-all;
- }
- .card-body-info .list .img {
- display: block;
- text-align: center;
- }
- .card-body-info .list .img img {
- width: 300px;
- }
- .card-body-info .goal-list {
- position: relative;
- box-sizing: border-box;
- width: 33.3%;
- max-width: 500px;
- padding: 0 15px;
- display: table-cell;
- }
- .card-body-info .goal-list .goal-button {
- width: 100%;
- max-width: 300px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .card-body-info .goal-list .icon {
- width: 50px;
- height: 50px;
- line-height: 50px;
- border-radius: 50%;
- margin: 0 auto 20px;
- background: #bdc0c5;
- font-family: FontAwesome;
- text-align: center;
- color: #fff;
- font-size: 22px;
- }
- .card-body-info .goal-list .goal-icon {
- width: 50px;
- height: 50px;
- line-height: 50px;
- border-radius: 50%;
- margin: 0 auto 10px;
- border: 1px solid #bdc0c5;
- text-align: center;
- color: #bdc0c5;
- font-size: 22px;
- }
- .card-body-info .goal-list .goal-icon.fa-check {
- font-family: FontAwesome;
- }
- .card-body-info .goal-list .goal-text {
- font-size: 30px;
- color: #bdc0c5;
- text-align: center;
- margin-bottom: 10px;
- }
- .card-body-info .goal-list .goal-text.fa-line-chart {
- font-family: FontAwesome;
- }
- .card-body-info .goal-list .icon.i2 {
- background: #444d57;
- }
- .card-body-info .goal-list .txt {
- height: 90px;
- word-break: keep-all;
- }
- .card-body-info .goal-list .img {
- display: block;
- text-align: center;
- }
- .card-body-info .goal-list .img img {
- width: 300px;
- }
- .more-input-w-guide .input-w-guide {
- padding-top: 30px;
- }
- .input-w-guide .input-normal-medium {
- display: block;
- width: 100%;
- margin-top: 10px;
- }
- .input-w-guide+.btn button {
- display: block;
- width: 100%;
- margin-top: 30px;
- }
- .input-w-guide .box-info-confirm {
- box-sizing: border-box;
- width: 100%;
- margin-top: 10px;
- padding: 8px 15px;
- }
- .link_add_box .box-info-confirm {
- display: inline-block;
- box-sizing: border-box;
- width: 61.5%;
- max-width: 463px;
- height: 36px;
- line-height: 36px;
- padding: 0 15px;
- }
- .link_add_box button {
- width: 205px;
- }
- .link_add_confirm {
- text-align: center;
- }
- .link_add_confirm dt .icon {
- display: block;
- width: 70px;
- height: 70px;
- line-height: 74px;
- background: #e5e7ec;
- border-radius: 50%;
- margin: 0 auto 20px;
- font-family: FontAwesome;
- text-align: center;
- font-size: 30px;
- color: #bdc0c5;
- }
- .link_add_confirm dd {
- padding: 30px 0 20px;
- }
- .card-link_add_detail dl {
- width: 520px;
- overflow: hidden;
- margin: 20px 0 30px;
- }
- .card-link_add_detail dl dt {
- float: left;
- width: 86px;
- height: 21px;
- }
- .card-link_add_detail dl dd {
- float: left;
- width: 144px;
- margin-right: 30px;
- margin-bottom: 10px;
- }
- .card-normal-body {
- position: relative;
- background: #fff;
- padding: 30px 40px 40px;
- }
- .card-normal-body .button-normal-medium,.card-normal-body .button-important-medium {
- width: 200px;
- }
- .selected-app {
- width: 420px;
- background: #fff;
- box-shadow: 0 0 5px rgba(0,0,0,0.2);
- max-height: 281px;
- overflow: auto;
- overflow-x: hidden;
- position: relative;
- box-sizing: border-box;
- height: 79px;
- line-height: 79px;
- border-bottom: 1px solid #eaeaea;
- padding: 0 10px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- display: table;
- }
- .selected-app .app-wrapper {
- display: inline-block;
- display: table-cell;
- vertical-align: middle;
- }
- .selected-app .logo {
- display: inline-block;
- width: 60px;
- height: 60px;
- border-radius: 13px;
- overflow: hidden;
- vertical-align: middle;
- margin-right: 20px;
- font-size: 0;
- }
- .selected-app .logo img {
- width: 100%;
- }
- .daterangepicker.dropdown-menu {
- padding: 5px 2px;
- margin: 2px 0px 0px 0px;
- }
- .daterangepicker.dropdown-menu .range_inputs {
- text-align: center;
- }
- .table-data-empty {
- width: 100%;
- height: 200px;
- background: #f7f8fa;
- padding: 30px 40px 30px 40px;
- }
- .table-data-empty td {
- width: 100%;
- height: 200px;
- background: #f7f8fa;
- padding: 0px;
- }
- .table-data-empty p {
- font-size: 17px;
- color: #bdc0c5;
- line-height: 200px;
- text-align: center;
- margin: 0px;
- }
- #not-found-container {
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -122px;
- margin-left: -109px;
- }
- #not-found-container .error-message-container {
- top: 35%;
- left: 50%;
- }
- #not-found-container .error-code {
- font-size: 120px;
- font-weight: bold;
- font-family: initial;
- color: #838a92;
- line-height: 1.5em;
- }
- #not-found-container .error-message {
- font-size: 30px;
- font-family: initial;
- color: #838a92;
- line-height: 1.5em;
- }
- /*paper-plane*/
- #not-found-container .icon-normal-small {
- font-family: 'FontAwesome';
- font-size: 12px;
- color: #838a92;
- }
- #not-found-container footer {
- text-align: center;
- }
- @keyframes para {
- 0% {
- left: 0.0%;
- top: 100.0%;
- transform: rotate(10.0deg);
- }
- 10% {
- left: 10.0%;
- top: 64.0%;
- transform: rotate(16.3401917459deg);
- }
- 20% {
- left: 20.0%;
- top: 36.0%;
- transform: rotate(24.0362434679deg);
- }
- 30% {
- left: 30.0%;
- top: 16.0%;
- transform: rotate(33.1985905136deg);
- }
- 40% {
- left: 40.0%;
- top: 4.0%;
- transform: rotate(43.690067526deg);
- }
- 50% {
- left: 50.0%;
- top: 0.0%;
- transform: rotate(180.0deg);
- }
- 60% {
- left: 60.0%;
- top: 4.0%;
- transform: rotate(191.309932474deg);
- opacity: 0.8;
- }
- 70% {
- left: 70.0%;
- top: 16.0%;
- transform: rotate(201.801409486deg);
- opacity: 0.6;
- }
- 80% {
- left: 80.0%;
- top: 36.0%;
- transform: rotate(210.963756532deg);
- opacity: 0.4;
- }
- 90% {
- left: 90.0%;
- top: 64.0%;
- transform: rotate(218.659808254deg);
- opacity: 0.2;
- }
- 100% {
- left: 100.0%;
- top: 100.0%;
- transform: rotate(225.0deg);
- opacity: 0;
- }
- }
- @charset "UTF-8";
- @import url(//static.airbridge.io/fonts/spoqa/ab_spoqasans.css);
- @import url('https://fonts.googleapis.com/css?family=BioRhyme:200');
- /*------------------------------βΌβΌβΌ λλ© βΌβΌβΌ------------------------------------*/
- /*///////////// λλ©_GNB /////////////*/
- /*
- by IUEditor 2.0.2.14 (00001),and fixed by soo at 2016.06.01.
- */
- ::selection {
- background: #0082ff;
- color: #fff;
- }
- ::-webkit-scrollbar {
- width: 8px;
- height: 8px;
- }
- ::-webkit-scrollbar-track {
- border-radius: 4px;
- }
- ::-webkit-scrollbar-track-piece {
- background-color: #fafafa;
- }
- ::-webkit-scrollbar-thumb {
- border-radius: 4px;
- background-color: #c1c1c1;
- }
- html,body {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- vertical-align: baseline;
- font-weight: normal;
- font-size: 100%;
- word-break: keep-all;
- }
- * {
- font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';
- }
- object,address,code,del,img,q,small,sub,var,dl,dt,dd,ul,li,fieldset,form,label,legend,footer,header,menu,nav,section,summary,time,mark,video,div,h1,h2,h3,h4,h5,h6,b,i,button {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- vertical-align: baseline;
- background: transparent;
- }
- h1,h2,h3,h4,h5,h6,b,i {
- font-size: inherit;
- font-weight: inherit;
- }
- p {
- word-break: keep-all;
- }
- p,span {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- }
- a {
- color: inherit;
- cursor: pointer;
- text-decoration: none;
- }
- footer,header,group,menu,nav,section {
- display: block;
- }
- nav ul {
- list-style: none;
- }
- ul {
- list-style-type: none;
- }
- q {
- quotes: none;
- }
- q:before,q:after {
- content: '';
- content: none;
- }
- a {
- margin: 0;
- padding: 0;
- font-size: 100%;
- vertical-align: baseline;
- background: transparent;
- }
- /* change colors to suit your needs */
- /* change colors to suit your needs */
- mark {
- background-color: #ff9;
- color: #000;
- font-style: italic;
- font-weight: bold;
- }
- del {
- text-decoration: line-through;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- /* change border color to suit your needs */
- input {
- padding: 0;
- margin: 0;
- }
- input,select {
- vertical-align: middle;
- border-style: none;
- }
- input[type=submit],input[type=button],input[type=reset] {
- -webkit-tap-highlight-color: transparent;
- -webkit-appearance: none;
- -moz-appearance: none;
- }
- body {
- /*line-height:1.5;*/
- -webkit-text-size-adjust: none;
- -moz-text-size-adjust: none;
- -ms-text-size-adjust: none;
- /* repaint text - font problem
- -webkit-animation-delay: 0.1s;
- -webkit-animation-name: fontfix;
- -webkit-animation-duration: 0.1s;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function: linear;*/
- }
- /* repaint text - font problem*/
- @-webkit-keyframes fontfix {
- from {
- opacity: 1;
- }
- to {
- opacity: 1;
- }
- }
- button {
- cursor: pointer;
- }
- /* the end of resetter */
- /* landing starts */
- @media (min-width: 0px) {
- .web {
- display: none;
- }
- .mobile {
- display: none;
- }
- }
- @media (min-width: 320px) {
- .web {
- display: none;
- }
- .mobile {
- display: block;
- }
- }
- @media (min-width: 768px) {
- .web {
- display: block;
- }
- .mobile {
- display: none;
- }
- .gnb-width {
- max-width: 1200px;
- margin: auto;
- }
- }
- @media (min-width: 992px) {
- .web {
- display: block;
- }
- .mobile {
- display: none;
- }
- }
- @media (min-width: 1200px) {
- .web {
- display: block;
- }
- .mobile {
- display: none;
- }
- }
- .header {
- width: 100%;
- /*height: 40px; TODO κΈ°μ‘΄ CSS μ λ€μ΄λ° μΆ©λ μ΄μκ° μμ΄μ μμλ‘ μ£Όμμ²λ¦¬. μμ΄λ λμ΄κ° λ³νμ§λ μμ.*/
- background: #000;
- text-align: right;
- }
- .header-menu {
- display: inline-block;
- padding: 0 15px;
- line-height: 40px;
- font-size: 13px;
- font-weight: 200;
- color: rgba(255, 255, 255, .7);
- transition: color .2s;
- }
- .header-menu:hover {
- color: rgba(255, 255, 255, 1);
- }
- .header-menu.on {
- color: rgba(255, 255, 255, 1);
- }
- .language-menu {
- position: relative;
- display: inline-block;
- padding: 0 50px 0 15px;
- }
- .language-btn {
- color: rgba(255, 255, 255, .5);
- padding: 4px 7px 4px 15px;
- font-size: 13px;
- font-weight: 200;
- border: 1px solid rgba(255, 255, 255, .5);
- border-radius: 3px;
- cursor: pointer;
- }
- .language-btn:hover,.language-btn:focus {
- color: #fff;
- }
- .language-btn >i {
- padding-left: 15px;
- line-height: 5px;
- vertical-align: middle;
- }
- .language-menu-list {
- display: none;
- position: absolute;
- background: #222;
- min-width: 95px;
- overflow: auto;
- box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
- z-index: 3;
- }
- .language-menu-list a {
- color: #fff;
- font-size: 13px;
- font-weight: 100;
- padding: 12px 16px;
- text-decoration: none;
- display: block;
- }
- .language-menu-list a:hover {
- background: #333;
- }
- .show {
- display: block;
- }
- .gnb {
- width: 100%;
- height: 120px;
- /*
- background: #000;
- /*
- box-shadow: 0 1px 12px rgba(255,255,255,.5);
- */
- }
- .border {
- box-shadow: 0 0 1px rgba(255,255,255,.7);
- }
- .gnb.type2 {
- height: 60px;
- border-bottom: 1px solid rgba(0, 0, 0, .12);
- }
- .gnb-logo-wrap.type2 {
- padding: 10px 30px 30px 30px;
- }
- .gnb-menu.type2 {
- padding: 20px 15px 15px 30px;
- }
- .gnb-menu-login.type2 {
- padding: 10px 30px 30px 30px;
- }
- .gnb-menu-btn-wrap.type2 {
- padding: 8px 30px 30px 15px;
- }
- .gnb-menu-dash {
- position: relative;
- padding: 8px 30px;
- font-size: 14px;
- font-weight: 100;
- text-align: center;
- color: #fff;
- background: #0082ff;
- border-radius: 50em;
- }
- .gnb-menu-dash:hover {
- background: #006bd1;
- cursor: pointer;
- }
- .gnb-menu-dash i {
- font-size: 16px;
- vertical-align: top;
- padding-top: 2px;
- }
- .gnb-logo-wrap {
- padding: 70px 30px 30px 30px;
- transition: opacity .2s;
- }
- .gnb-logo {
- position: relative;
- top: 7px;
- height: 30px;
- }
- .gnb-menu {
- padding: 70px 15px 30px 30px;
- display: inline-block;
- color: rgba(255, 255, 255, .7);
- font-size: 14.5px;
- font-weight: 200;
- box-sizing: border-box;
- }
- .gnb-menu a {
- margin: 0 15px;
- transition: color .2s;
- }
- .gnb-menu a:hover {
- color: #fff;
- }
- .gnb-menu a.on {
- color: #fff;
- border-bottom: 2px solid #fff;
- padding: 0 0 15px 0;
- }
- .gnb-menu-login {
- padding: 70px 30px 30px 30px;
- display: inline-block;
- }
- .gnb-menu-login a {
- color: rgba(255, 255, 255, .7);
- font-size: 14.5px;
- font-weight: 200;
- }
- .gnb-menu-login a:hover {
- color: #fff;
- }
- .gnb-menu-btn-wrap {
- padding: 71px 30px 30px 15px;
- display: inline-block;
- }
- .gnb-mobile {
- padding: 15px;
- width: 100%;
- height: 60px;
- background: #000;
- border-bottom: 1px solid rgba(0, 0, 0, .12);
- }
- .gnb-mobile-logo-wrap {
- display: inline-block;
- height: 60px;
- transition: opacity .2s;
- }
- .gnb-mobile-logo-wrap:hover {
- opacity: .7;
- cursor: pointer;
- }
- .gnb-logo-mobile {
- position: relative;
- top: 5px;
- height: 20px;
- }
- .gnb-mobile-ic-wrap {
- display: inline-block;
- float: right;
- }
- .gnb-mobile-ic-wrap i {
- color: #fff;
- font-size: 24px;
- }
- .gnb-mobile-ic-wrap i:hover {
- opacity: .7;
- cursor: pointer;
- }
- .gnb-mobile-ic-wrap div {
- position: absolute;
- right: 70px;
- top: 18px;
- }
- .gnb-mobile-login {
- font-size: 14px;
- font-weight: 200;
- color: #fff;
- }
- .gnb-mobile-ic-wrap div:hover {
- opacity: .7;
- cursor: pointer;
- }
- .gnb-mobile-menu {
- padding: 15px;
- background: #fff;
- }
- .collapse {
- display: none;
- }
- .collapse.in {
- display: block;
- }
- tr.collapse.in {
- display: table-row;
- }
- tbody.collapse.in {
- display: table-row-group;
- }
- .gnb-mobile-menu ul {
- padding: 15px;
- }
- .gnb-mobile-menu li {
- padding: 12px;
- color: #1e88e5;
- font-size: 16px;
- font-weight: 500;
- border-bottom: 1px solid rgba(0, 0, 0, .12);
- }
- .gnb-mobile-menu a li {
- padding-left: 30px;
- color: rgba(0, 0, 0, .54);
- font-size: 14.5px;
- font-weight: 500;
- }
- .gnb-mobile-menu a li.on {
- color: #1e88e5;
- background: #eff1f5;
- }
- .gnb-mobile-menu li.list:hover {
- background: #eff1f5;
- }
- .gnb-mobile-menu a li:hover {
- color: rgba(0, 0, 0, .87);
- }
- /*///////////// 161215 λλ©_Footer /////////////*/
- @media (min-width: 320px) {
- .randing-footer-input[type=text] {
- width: 100%;
- padding: 12px 0;
- border-radius: 3px;
- text-align: center;
- }
- .randing-footer-input-btn {
- width: 100%;
- padding: 12px 30px;
- border-radius: 3px;
- margin-top: 10px;
- }
- .randing-footer-logo-wrap {
- text-align: left;
- }
- }
- @media (min-width: 768px) {
- .randing-footer-wrap {
- max-width: 1225px;
- margin: auto;
- }
- .randing-footer-input[type=text] {
- width: 50%;
- padding: 12px 0 12px 0;
- border-radius: 3px;
- text-align: center;
- }
- .randing-footer-input-btn {
- width: 50%;
- padding: 12px 30px;
- border-radius: 3px;
- margin-top: 10px;
- }
- }
- @media (min-width: 992px) {
- .randing-footer-input[type=text] {
- width: 100%;
- padding: 12px 0 12px 0;
- border-radius: 3px;
- text-align: center;
- }
- .randing-footer-input-btn {
- width: 100%;
- padding: 12px 30px;
- border-radius: 3px;
- margin-top: 10px;
- }
- .randing-footer-logo-wrap {
- text-align: right;
- }
- }
- .randing-footer-banner {
- border-top: 1px solid #rgba(0, 0, 0, .06);
- background: #f8fafb;
- color: #4d5256;
- font-size: 18px;
- font-weight: 300;
- text-align: center;
- padding: 30px;
- box-sizing: border-box;
- }
- .randing-footer {
- background: #000;
- }
- .randing-footer-list {
- padding: 30px 15px;
- display: inline-block;
- }
- .randing-footer-list ul li:first-child {
- padding: 20px 15px;
- color: #fff;
- font-size: 14px;
- font-weight: 300;
- }
- .randing-footer-list ul li:first-child:hover {
- text-decoration: none;
- color: #fff;
- cursor: initial;
- }
- .randing-footer-list ul li {
- padding: 10px 15px;
- color: #a9afb3;
- font-size: 14px;
- font-weight: 300;
- }
- .randing-footer-list ul li:hover {
- color: #fff;
- cursor: pointer;
- }
- .randing-footer-input-wrap {
- padding: 50px 30px 30px 30px;
- }
- .randing-footer-input-wrap label {
- color: #fff;
- font-size: 14px;
- font-weight: 300;
- }
- .randing-footer-input-content {
- position: relative;
- padding-top: 30px;
- }
- .randing-footer-input-content i {
- position: absolute;
- left: 12px;
- top: 41px;
- font-size: 18px;
- color: #a9afb3;
- }
- .randing-footer-input {
- display: block;
- background: #fff;
- color: #878d91;
- font-size: 13px;
- font-weight: 300;
- }
- .randing-footer-input[type=text]:focus {
- background: #fff;
- color: #4d5256;
- outline: none;
- }
- .randing-footer-input-btn {
- height: 43px;
- background: #0082ff;
- color: #fff;
- font-size: 14px;
- font-weight: 300;
- text-align: center;
- vertical-align: top;
- word-break: break-all;
- transition: background .2s;
- }
- .randing-footer-input-btn:hover {
- background: #0874de;
- cursor: pointer;
- }
- .randing-footer-add {
- padding: 30px;
- line-height: 22px;
- font-size: 12px;
- font-weight: 300;
- color: #a9afb3;
- }
- .randing-footer-logo-wrap {
- padding: 20px 30px;
- }
- .randing-footer-logo img {
- padding-top: 40px;
- padding-right: 8px;
- max-width: 200px;
- opacity: .7;
- }
- .randing-footer-social {
- display: block;
- padding-top: 10px;
- }
- .randing-footer-social p {
- display: inline-block;
- padding-right: 5px;
- font-size: 12px;
- font-weight: 300;
- color: #a9afb3;
- }
- .randing-footer-social img {
- padding: 15px 5px 0;
- max-width: 36px;
- display: inline-block;
- opacity: .2;
- }
- /*///////////// 170213 νμ΄λ³΄κΈ° /////////////*/
- @media (min-width: 320px) {
- .randing-trial {
- width: 100%;
- }
- .randing-trial-input[type=text] {
- width: 100%;
- padding: 10px 30px 10px 45px;
- border-radius: 3px;
- text-align: center;
- }
- .randing-trial-btn {
- display: block;
- padding: 10px 30px;
- border-radius: 3px;
- margin-top: 10px;
- width: 100%;
- }
- .randing-section-width {
- margin: 30px 15px;
- }
- .randing-section-height-lg {
- padding-top: 5px;
- height: 80%;
- }
- .randing-section-height-price {
- padding-top: 0;
- height: 90%;
- }
- .randing-main-content {
- padding: 0 15px 0 15px;
- }
- .main-feature-card {
- padding: 15px 30px 45px;
- text-align: center;
- }
- .support-platform-title {
- text-align: center;
- padding: 30px 0 15px 0;
- }
- .randing-section-width-align-preview.first {
- padding: 60px 0 30px 0;
- }
- .randing-section-width-align-preview {
- padding: 30px 0;
- }
- .randing-section-width-align-preview.last {
- padding: 30px 0 60px 0;
- }
- .main-preview-card {
- text-align: center;
- padding: 0;
- }
- .preview-wrap {
- padding: 15px 45px 0 45px;
- }
- .randing-main-content button {
- margin-top: 15px;
- display: block;
- width: 100%;
- }
- }
- @media (min-width: 768px) {
- .randing-trial {
- max-width: 720px;
- }
- .randing-trial-input[type=text] {
- width: 50%;
- border-radius: 3px;
- text-align: left;
- }
- .randing-trial-btn {
- display: inline-block;
- margin-left: 10px;
- border-radius: 3px;
- margin-top: 0;
- width: 26%;
- }
- .randing-section-width-align-preview.first {
- padding: 35px 0 0 0;
- }
- .randing-section-width-align-preview {
- padding: 0;
- }
- .randing-section-width-align-preview.last {
- padding: 0 0 35px 0;
- }
- .randing-section-width {
- margin: auto;
- width: 720px;
- }
- .randing-section-width.sm-width {
- width: 520px;
- }
- .randing-section-height-sm {
- height: 200px;
- }
- .randing-section-height-md {
- height: 800px;
- }
- .randing-section-height-lg {
- padding-top: 0px;
- height: 80%;
- }
- .randing-section-height-price {
- padding-top: 0;
- height: 100%;
- }
- .randing-main-content {
- padding: 150px 50px 15px;
- }
- .main-feature-card {
- padding: 15px 30px 45px;
- text-align: center;
- }
- .support-platform-title {
- text-align: center;
- padding: 30px 0 0 0;
- }
- .preview-wrap {
- padding: 0 45px;
- }
- }
- @media (min-width: 992px) {
- .main-feature-card {
- padding: 10px 30px 45px;
- text-align: center;
- }
- .randing-main-content {
- padding: 120px 30px;
- }
- .randing-section-width {
- margin: 0;
- width: 920px;
- }
- .randing-section-width.sm-width {
- width: 520px;
- }
- .randing-section-width.lg-width {
- margin: 0;
- width: 960px;
- }
- .randing-section-align-center {
- margin: auto;
- position: absolute;
- top: 50%;
- left: 50%;
- -ms-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- }
- .main-preview-card {
- text-align: right;
- padding: 0 0 30px 0;
- }
- .randing-section-height-sm {
- height: 200px;
- }
- .randing-section-height-md {
- height: 800px;
- }
- .randing-section-height-lg {
- padding-top: 0;
- margin: 30px 0;
- }
- .randing-section-height-customer {
- padding-top: 0;
- height: 270px;
- }
- .randing-section-height-price {
- padding-top: 0;
- height: 700px;
- }
- .preview-wrap {
- padding: 30px 45px;
- }
- .randing-section-price-pd-new {
- padding: 75px 0 55px;
- }
- .randing-main-content button {
- margin-top: 45px;
- display: inline-block;
- width: none;
- }
- }
- @media (min-width: 1200px) {
- .main-feature-card {
- padding: 10px 30px 45px;
- text-align: center;
- }
- .randing-section-feature-pd {
- margin: 0 auto;
- max-width: 1200px;
- }
- .randing-section-price-pd-new {
- padding: 75px 0 55px;
- margin: 0 auto;
- max-width: 1160px;
- }
- .randing-section-width {
- margin: auto;
- width: 1200px;
- }
- .randing-section-width.sm-width {
- margin: auto;
- width: 700px;
- }
- .randing-section-width.lg-width {
- margin: auto;
- width: 1200px;
- }
- .randing-section-height-sm {
- height: 180px;
- }
- .randing-section-height-md {
- height: 400px;
- }
- .support-platform-title h1 {
- padding: 45px 0;
- }
- .support-platform-title {
- text-align: left;
- }
- .support-platform-ic img {
- padding-top: 10px;
- }
- .preview-wrap {
- padding: 0 45px;
- }
- }
- .randing-trial {
- position: relative;
- padding-top: 20px;
- }
- .randing-trial i {
- position: absolute;
- left: 12px;
- top: 31px;
- font-size: 18px;
- color: #a9afb3;
- }
- .randing-trial-input[type=text] {
- display: lnline-block;
- background: #fff;
- color: #a9afb3;
- font-size: 14px;
- font-weight: 300;
- }
- .randing-trial-input[type=text]:focus {
- background: #fff;
- color: #4d5256;
- outline: none;
- }
- .randing-trial-btn {
- background: #0082ff;
- color: #fff;
- font-size: 14px;
- font-weight: 200;
- text-align: center;
- vertical-align: top;
- word-break: break-all;
- transition: background .2s;
- }
- .randing-trial-btn:hover {
- background: #006bd1;
- cursor: pointer;
- }
- .landing-try-comment {
- font-size: 13px;
- font-weight: 100;
- color: #a9a9a9;
- margin-top: 10px;
- }
- .main-feature-card h1 {
- font-size: 16px;
- font-weight: 300;
- color: #4d5256;
- }
- .main-feature-card p {
- padding-top: 10px;
- text-align: center;
- font-size: 14px;
- font-weight: 300;
- line-height: 1.7em;
- color: #878d91;
- word-break: keep-all;
- }
- .main-feature-card-img {
- margin-bottom: 15px;
- text-align: center;
- }
- .main-feature-card-img img {
- max-width: 192px;
- padding: 15px;
- }
- .main-feature-card-img2 {
- margin-bottom: 15px;
- text-align: center;
- }
- .main-feature-card-img2 img {
- max-width: 128px;
- padding: 15px;
- }
- .support-platform-title h1 {
- font-size: 14px;
- font-weight: 300;
- color: #4d5256;
- }
- .support-platform-ic {
- padding: 30px 15px;
- text-align: center;
- }
- .support-platform-ic img {
- opacity: 0.5;
- }
- .support-platform-ic img:hover {
- opacity: 0.87;
- }
- .support-platform-ic p {
- padding-top: 10px;
- font-size: 14px;
- font-weight: 300;
- color: #a9afb3;
- }
- .bg-blue {
- background: #f8fafb;
- border-top: 1px solid rgba(0, 0, 0, .06);
- border-bottom: 1px solid rgba(0, 0, 0, .06);
- }
- .randing-main-content h1 {
- font-size: 14px;
- font-weight: 300;
- color: #0082ff;
- padding-bottom: 8px;
- }
- .randing-main-content h2 {
- font-size: 23px;
- font-weight: 300;
- color: #4d5256;
- line-height: 1.3em;
- padding-bottom: 13px;
- word-break: keep-all;
- }
- .randing-main-content p {
- font-size: 14px;
- font-weight: 300;
- color: #878d91;
- line-height: 1.7em;
- word-break: keep-all;
- }
- .landing-learnmore-btn {
- padding: 12px 20px;
- border-radius: 4px;
- font-size: 14px;
- font-weight: 300;
- color: #0082ff;
- box-shadow: inset 0 0 0 1px #0082ff;
- }
- .landing-learnmore-btn:hover {
- background: #0051fb;
- font-weight: 100;
- color: #fff;
- }
- .randing-section-width-align-preview {
- max-width: 1190px;
- margin: auto;
- }
- .preview-browser {
- box-sizing: inherit;
- vertical-align: middle;
- background: #f7f8fa;
- border: 1px solid #d0d2d7;
- border-bottom: none;
- border-radius: 3px 3px 0 0;
- padding: 5px 8px;
- height: 1rem;
- }
- .preview-browser i {
- background: rgba(0, 0, 0, .2);
- border-radius: 89012542px;
- width: 6px;
- height: 6px;
- margin-right: 4px;
- display: inline-block;
- }
- .preview-card {
- box-sizing: inherit;
- border: 1px solid #d0d2d7;
- }
- .preview-card.notline {
- border: none;
- }
- .preview-card img {
- width: 100%;
- }
- .main-preview-card img {
- width: 90%;
- }
- .tooltip-name {
- position: relative;
- display: inline-block;
- }
- .tooltip-name .tooltip-name-text {
- visibility: hidden;
- width: 160px;
- background-color: #2d2d3c;
- color: #fff;
- text-align: center;
- border-radius: 5px;
- padding: 7px 15px;
- position: absolute;
- z-index: 1;
- bottom: 120%;
- left: 5%;
- margin-left: -60px;
- font-size: 13px;
- font-weight: 200;
- box-shadow: 1px 0 10px rgba(0, 0, 0, .30);
- }
- .tooltip-name .tooltip-name-text:after {
- content: "";
- position: absolute;
- top: 98%;
- left: 50%;
- margin-left: -5px;
- border-width: 7px;
- border-style: solid;
- border-color: #2d2d3c transparent transparent transparent;
- }
- .tooltip-name:hover .tooltip-name-text {
- visibility: visible;
- }
- .randing-section-price-btn {
- padding-top: 15px;
- text-align: center;
- }
- .randing-section-price-btn button {
- position: relative;
- padding: 15px 15px;
- font-size: 14px;
- text-align: center;
- transition: background .2s !important;
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- word-break: break-all;
- border-radius: 3px;
- background: #F7F8FA;
- border: 1px solid rgba(0, 0, 0, .12);
- color: rgba(0, 0, 0, .6);
- font-weight: 600;
- width: 98%;
- }
- .randing-section-price-btn button:hover {
- background: #E3E5E8;
- cursor: pointer;
- }
- .randing-login-dash-headding-btn-wrap {
- padding: 30px 0 5px 0;
- }
- .randing-login-dash-headding-btn {
- position: relative;
- padding: 10px 60px;
- font-size: 14px;
- text-align: center;
- border-radius: 3px;
- color: #fff;
- font-weight: 100;
- background: #0082ff;
- }
- .randing-login-dash-headding-btn:hover {
- background: #0874de;
- cursor: pointer;
- }
- .randing-login-dash-headding-btn i {
- font-size: 18px;
- }
- /* μ¬μ©μ νκΈ° */
- @media (min-width: 320px) {
- .customer-comment-wrap {
- padding-top: 60px;
- }
- .customer-comment {
- display: inline-block;
- }
- .customer-comment h1 {
- max-width: 420px;
- }
- .customer-comment-picture {
- display: inline-block;
- margin-left: 225px;
- }
- .customer-comment-arrow {
- top: 15px;
- left: 95px;
- width: 150px;
- height: auto;
- content: url('//static.airbridge.io/images/2017_randing/main-1/customer_comment/randing_arrow_mobile.png');
- }
- }
- @media (min-width: 768px) {
- .customer-comment-arrow {
- top: 15px;
- left: 95px;
- width: 150px;
- height: auto;
- }
- .customer-comment-picture {
- display: inline-block;
- margin-left: 320px;
- }
- }
- @media (min-width: 992px) {
- .customer-comment-wrap {
- float: right;
- padding-top: 0;
- }
- .customer-comment {
- display: block;
- }
- .customer-comment h1 {
- max-width: 195px;
- }
- .customer-comment-picture {
- display: inline-block;
- margin-left: 0;
- }
- .customer-comment-arrow {
- left: 0;
- right: 80px;
- top: -260px;
- width: auto;
- height: 300px;
- content: url('//static.airbridge.io/images/2017_randing/main-1/customer_comment/randing_arrow_pc.png');
- }
- }
- .customer-comment-wrap {
- display: inline-block;
- position: relative;
- text-align: right;
- }
- .customer-comment-arrow {
- position: absolute;
- opacity: .7;
- user-select: none;
- }
- .customer-comment-picture {
- width: 72px;
- height: 72px;
- background: #eff1f5;
- border-radius: 50em;
- margin-bottom: 10px;
- content: url('//static.airbridge.io/images/2017_randing/main-1/customer_comment/socar_cto.png');
- }
- .customer-comment {
- font-size: 13px;
- line-height: 25px;
- }
- .customer-comment h1 {
- font-weight: 100;
- color: #fff;
- margin-bottom: 10px;
- word-break: keep-all;
- }
- .customer-comment h2 {
- padding-right: 5px;
- font-weight: 300;
- color: #a9a9a9;
- }
- /*///////////// 170215 μ λ리ν±μ€/μ°¨λ³μ /κΈ°μ λ° λͺ¨λ /////////////*/
- @media (min-width: 320px) {
- .title-banner-bg {
- text-align: left;
- }
- .title-banner {
- padding: 100px 20px 40px 20px;
- }
- .title-banner-trial-input[type=text] {
- width: 100%;
- border-radius: 3px;
- text-align: center;
- }
- .title-banner-trial i {
- position: absolute;
- left: 12px;
- top: 42px;
- }
- .module {
- padding: 50px 20px 50px 20px;
- }
- .module.center {
- padding: 20px 30px 20px 30px;
- }
- .module-text-l, .module-text-r {
- padding-top: 55px;
- padding-left: 0;
- }
- .module button {
- float: center;
- }
- .modul-preview-wrap {
- padding: 45px 0 0 0;
- }
- .price-card-pd.l-side {
- padding: 10px 0;
- }
- .price-card-pd.r-side {
- padding: 10px 0;
- }
- .module h5 {
- font-size: 28px;
- }
- .module h4 {
- padding: 0;
- }
- }
- @media (min-width: 768px) {
- .title-banner-bg {
- text-align: left;
- }
- .title-banner {
- padding: 250px 30px 50px 30px;
- }
- .title-banner-trial {
- max-width: 620px;
- }
- .title-banner-trial-input[type=text] {
- max-width: 350px;
- border-radius: 3px;
- text-align: left;
- }
- .title-banner-trial i {
- position: absolute;
- left: 15px;
- top: 42px;
- }
- .module p {
- margin-bottom: 0;
- }
- .module {
- padding: 60px 30px 40px 30px;
- }
- .module.center {
- padding: 40px 30px 20px 30px;
- }
- .modul-preview-wrap {
- padding: 15px 0 30px 0;
- }
- .price-card-pd.l-side {
- padding: 5px;
- }
- .price-card-pd.r-side {
- padding: 5px;
- }
- .module h5 {
- font-size: 28px;
- }
- .module h4 {
- padding: 0 30px;
- }
- }
- @media (min-width: 992px) {
- .module-text-l {
- padding-top: 55px;
- padding-right: 60px;
- }
- .module-text-r {
- padding-top: 55px;
- padding-left: 60px;
- }
- .price-card-pd.l-side {
- padding: 5px;
- }
- .price-card-pd.r-side {
- padding: 5px 0 5px 5px;
- }
- .module h5 {
- font-size: 23px;
- }
- .module.center {
- padding: 0 30px 20px 30px;
- }
- }
- @media (min-width: 1200px) {
- .module h5 {
- font-size: 32px;
- }
- .module h4 {
- padding: 0;
- }
- }
- .title-banner-bg {
- background: #000;
- background-image: url(//static.airbridge.io/images/2017_brand/graphic_comp4.png);
- }
- .title-banner {
- max-width: 1200px;
- margin: auto;
- }
- .title-banner h1 {
- font-size: 28px;
- font-weight: 100;
- letter-spacing: 0.5px;
- color: #fff;
- line-height: 36px;
- font-family: 'BioRhyme';
- }
- .title-banner p {
- margin-top: 8px;
- font-size: 14px;
- font-weight: 300;
- color: #a9afb3;
- letter-spacing: 0.5px;
- line-height: 1.7em;
- }
- .title-banner h3 {
- margin-top: 10px;
- font-size: 13px;
- font-weight: 300;
- color: #a9afb3;
- letter-spacing: 0.5px;
- }
- .title-banner-trial {
- position: relative;
- padding-top: 30px;
- }
- .title-banner-trial i {
- font-size: 18px;
- color: #a9afb3;
- }
- .title-banner-trial-input[type=text] {
- display: lnline-block;
- padding: 10px 30px 10px 45px;
- background: #fff;
- color: #a9afb3;
- font-size: 14px;
- font-weight: 300;
- }
- .title-banner-trial-input[type=text]:focus {
- background: #fff;
- color: #4d5256;
- outline: none;
- }
- .module-section {
- background: #f6cb2e;
- }
- .module-bg1 {
- background: #fff;
- }
- .module-bg2 {
- background: #1e88e5;
- }
- .module-bg3 {
- background: #f8fafb;
- }
- .module {
- max-width: 1200px;
- margin: auto;
- }
- .module-line {
- background: #0082ff;
- height: 2px;
- width: 32px;
- margin-bottom: 30px;
- }
- .module h1 {
- margin-bottom: 5px;
- font-size: 18px;
- font-weight: 300;
- color: #0082ff;
- }
- .module p {
- font-size: 14px;
- font-weight: 300;
- color: #4D5256;
- line-height: 22px;
- }
- .module-btn {
- margin-top: 23px;
- position: relative;
- padding: 10px 40px;
- font-size: 14px;
- font-weight: 300;
- text-align: center;
- transition: background .2s !important;
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- word-break: break-all;
- border-radius: 3px;
- box-shadow: inset 0 0 0 1px #0082ff;
- color: #0082ff;
- }
- .module-btn:hover {
- background: #0082ff;
- color: #fff;
- font-weight: 100;
- cursor: pointer;
- }
- .module-vertical-1 {
- float: right;
- }
- .module-vertical-2 {
- float: left;
- }
- .preview-browser {
- box-sizing: inherit;
- vertical-align: middle;
- background: #f7f8fa;
- border: 1px solid #d0d2d7;
- border-bottom: none;
- border-radius: 3px 3px 0 0;
- padding: 5px 8px;
- height: 1rem;
- }
- .preview-browser i {
- background: rgba(0, 0, 0, .2);
- border-radius: 89012542px;
- width: 6px;
- height: 6px;
- margin-right: 4px;
- display: inline-block;
- }
- .preview-card {
- border: 1px solid #d0d2d7;
- }
- .preview-card img {
- width: 100%;
- }
- .etc-feature-card {
- text-align: center;
- padding: 180px 0;
- }
- .etc-feature-card h2 {
- font-size: 18px;
- font-weight: 300;
- color: #878d91;
- }
- .module h3 {
- font-size: 18px;
- font-weight: 300;
- color: #4d5256;
- word-break: keep-all;
- }
- .module h4 {
- margin-top: 10px;
- text-align: left;
- font-size: 14px;
- font-weight: 300;
- color: #878d91;
- word-break: keep-all;
- }
- .module h5 {
- font-weight: 500;
- color: rgba(0, 0, 0, .87);
- }
- /*/////////////////// 170217 νμκ°μ ,λ‘κ·ΈμΈ ///////////////////*/
- @media (min-width: 320px) {
- .signup-side {
- display: none;
- }
- .signup-switch span {
- display: none;
- }
- .signup-table-cell {
- height: 70vh;
- }
- .signup-side-mobile {
- padding: 35px 20px;
- }
- .signup-switch {
- margin-right: 25px;
- }
- }
- @media (min-width: 768px) {
- .signup-side {
- display: none;
- }
- .signup-side-mobile {
- padding: 35px 20px 35px 35px;
- }
- .signup-inside {
- height: 100%;
- }
- .signup-switch {
- margin-right: 38px;
- }
- .signup-switch span {
- display: inline-block;
- }
- }
- @media (min-width: 992px) {
- .signup-side {
- display: block;
- }
- .signup-inside {
- height: 100%;
- margin-left: 460px;
- }
- .signup-side-mobile {
- display: none;
- }
- .signup-table-cell.log {
- height: 90vh;
- }
- .signup-table-cell {
- height: 95vh;
- }
- }
- .sign-wrap {
- font-size: 0;
- height: 100%;
- }
- .signup-side {
- position: fixed;
- width: 460px;
- height: 100%;
- top: 0;
- left: 0;
- background: #000;
- }
- .signup-side img {
- padding: 35px 0;
- width: 130px;
- }
- .signup-side i {
- padding: 35px 20px 35px 35px;
- font-size: 24px;
- color: #fff;
- vertical-align: top;
- }
- .signup-side-mobile {
- position: fixed;
- z-index: 99;
- }
- .signup-side-mobile i {
- font-size: 24px;
- color: #1e88e5;
- }
- .signup-side-mobile:hover {
- cursor: pointer;
- }
- .signup-table {
- display: table;
- width: 100%;
- }
- .signup-table-cell {
- display: table-cell;
- position: relative;
- vertical-align: middle;
- }
- .signup-switch {
- position: absolute;
- right: 0;
- top: 0;
- margin-top: 38px;
- margin-bottom: 46px;
- }
- .signup-switch span {
- padding-right: 30px;
- font-size: 13px;
- font-weight: 300;
- color: #a9afb3;
- }
- .signup-content {
- display: block;
- box-sizing: border-box;
- clear: both;
- max-width: 500px;
- margin: auto;
- margin-top: 100px;
- padding: 0 30px;
- }
- .signup-container-wrap {
- padding-top: 5px;
- }
- .signup-container {
- margin: 10px 0;
- width: 100%;
- padding: 20px 0;
- }
- .signup-container.next {
- margin-top: 45px;
- }
- .signup-input {
- position: relative;
- }
- .signup-input i.valid {
- position: absolute;
- right: 0;
- bottom: 13px;
- font-size: 18px;
- color: #1e88e5;
- }
- .signup-input i.error {
- position: absolute;
- right: 0;
- bottom: 13px;
- font-size: 18px;
- color: #ff0000;
- }
- .login-container-wrap {
- padding-top: 30px;
- }
- .login-container {
- margin-right: 0;
- width: 100%;
- padding: 20px 0;
- }
- .login-input {
- position: relative;
- margin-bottom: 15px;
- }
- .login-input i.valid {
- position: absolute;
- right: 0;
- bottom: 13px;
- font-size: 18px;
- color: #1e88e5;
- }
- .login-input i.error {
- position: absolute;
- right: 0;
- bottom: 13px;
- font-size: 18px;
- color: #ff0000;
- }
- .input-error-message {
- position: absolute;
- bottom: -23px;
- left: 2px;
- font-size: 12px;
- font-weight: 400;
- color: #ff0000;
- display: none;
- }
- .input-error-message.normal {
- position: relative;
- bottom: -5px;
- }
- .signup-input input {
- font-size: 15px;
- font-weight: 300;
- padding: 12px 0;
- width: 100%;
- max-width: 500px;
- border: none;
- color: #4d5256;
- border-bottom: 1px solid rgba(0, 0, 0, .38);
- }
- .login-input input {
- font-size: 23px;
- font-weight: 300;
- padding: 10px 0;
- width: 100%;
- max-width: 500px;
- border: none;
- color: #4d5256;
- border-bottom: 1px solid rgba(0, 0, 0, .38);
- }
- input:focus {
- outline: none;
- }
- .signup-input label {
- color: #a9acb6;
- font-size: 16px;
- font-weight: 300;
- position: absolute;
- pointer-events: none;
- left: 1px;
- top: 15px;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- .login-input label {
- color: #a9acb6;
- font-size: 23px;
- font-weight: 300;
- position: absolute;
- pointer-events: none;
- left: 2px;
- top: 15px;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- input:focus ~ label,input:valid ~ label {
- top: -10px;
- left: 0;
- font-size: 13px;
- font-weight: 500;
- color: #9a9a9a;
- }
- input:focus ~ label.error,input:valid ~ label.error {
- color: #9a9a9a;
- }
- .signup-bar {
- position: relative;
- display: block;
- width: 100%;
- max-width: 500px;
- }
- .signup-bar.error:before,.signup-bar.error:after {
- background: #ff0000;
- }
- .signup-bar:before,.signup-bar:after {
- content: '';
- height: 2px;
- width: 0;
- bottom: 1px;
- position: absolute;
- background: #0082ff;
- transition: 0.2s ease all;
- -moz-transition: 0.2s ease all;
- -webkit-transition: 0.2s ease all;
- }
- .signup-bar:before {
- left: 50%;
- }
- .signup-bar:after {
- right: 50%;
- }
- input:focus ~ .signup-bar:before,input:focus ~ .signup-bar:after {
- width: 50%;
- }
- .signup-highlight {
- position: absolute;
- height: 60%;
- width: 100px;
- top: 25%;
- left: 0;
- pointer-events: none;
- opacity: 0.5;
- }
- input:focus ~ .signup-highlight {
- -webkit-animation: inputHighlighter 0.3s ease;
- -moz-animation: inputHighlighter 0.3s ease;
- animation: inputHighlighter 0.3s ease;
- }
- @-webkit-keyframes inputHighlighter {
- from {
- background: #0082ff;
- }
- to {
- width: 0;
- background: transparent;
- }
- }
- @-moz-keyframes inputHighlighter {
- from {
- background: #0082ff;
- }
- to {
- width: 0;
- background: transparent;
- }
- }
- @keyframes inputHighlighter {
- from {
- background: #0082ff;
- }
- to {
- width: 0;
- background: transparent;
- }
- }
- .login-failed-text {
- font-size: 13px;
- font-weight: 500;
- color: #ff0000;
- line-height: 20px;
- }
- .signup-btn-wrap {
- margin: 35px auto 60px;
- width: 100%;
- max-width: 500px;
- text-align: center;
- }
- .signup-btn-wrap.login {
- margin: 60px auto 0;
- }
- /*///////////// 170120 λΉλ°λ²νΈ μ°ΎκΈ° : modal /////////////*/
- @media (min-width: 320px) {
- .randing-modal-head, .randing-modal-body {
- margin-left: 30px;
- margin-right: 30px;
- }
- .randing-modal-close-wrap {
- right: 50px;
- top: 20px;
- }
- .modal-close-btn {
- color: rgba(0, 0, 0, .54);
- }
- .modal-close-btn:hover {
- color: rgba(0, 0, 0, .87);
- }
- .btn-gap {
- padding-top: 10px;
- }
- .randing-modal {
- margin: auto;
- max-width: 710px;
- animation-duration: .2s;
- }
- }
- @media (min-width: 768px) {
- .randing-modal-head, .randing-modal-body {
- margin-left: 0;
- margin-right: 0;
- }
- .randing-modal-close-wrap {
- right: -50px;
- top: 0;
- }
- .modal-close-btn {
- color: rgba(255, 255, 255, .7);
- }
- .modal-close-btn:hover {
- color: rgba(255, 255, 255, 1);
- }
- .btn-gap {
- padding-right: 10px;
- }
- .randing-modal {
- margin: auto;
- min-width: 720px;
- animation-duration: .2s;
- }
- }
- @media (min-width: 992px) {
- .randing-modal-head, .randing-modal-body {
- margin-left: 0;
- margin-right: 0;
- }
- .modal-close-btn {
- color: rgba(255, 255, 255, .7);
- }
- .modal-close-btn:hover {
- color: rgba(255, 255, 255, 1);
- }
- .btn-gap {
- padding-right: 10px;
- }
- }
- @media (min-width: 1200px) {
- .randing-modal-head, .randing-modal-body {
- margin-left: 0;
- margin-right: 0;
- }
- .modal-close-btn {
- color: rgba(255, 255, 255, .7);
- }
- .modal-close-btn:hover {
- color: rgba(255, 255, 255, 1);
- }
- .btn-gap {
- padding-right: 10px;
- }
- }
- .randing-modal-content-wrap {
- position: relative;
- }
- .randing-modal-close-wrap {
- position: absolute;
- }
- .randing-modal-head {
- padding: 15px;
- background: #fff;
- border-radius: 3px 3px 0 0;
- }
- .randing-modal-body {
- border-top: 1px solid rgba(0, 0, 0, .12);
- padding: 15px;
- background: #fff;
- border-radius: 0 0 3px 3px;
- }
- .randing-modal-title {
- padding: 10px 15px 10px 10px;
- color: rgba(0, 0, 0, .87);
- font-size: 18px;
- font-weight: 400;
- }
- .randing-modal-desc {
- padding: 10px 10px 10px 10px;
- color: rgba(0, 0, 0, .54);
- font-size: 14.5px;
- line-height: 22px;
- font-weight: 500;
- }
- .randing-modal-input-title {
- padding: 10px 10px 5px 10px;
- color: #0082ff;
- font-size: 14.5px;
- font-weight: 400;
- }
- .randing-modal-input-title i {
- font-size: 16px;
- padding-right: 10px;
- }
- .randing-modal-input {
- padding: 0 10px 20px 10px;
- }
- .input[type=email] {
- box-sizing: border-box;
- padding: 10px 15px;
- border-radius: 3px;
- transition: background .2s;
- border: 2px solid rgba(0, 0, 0, .20);
- color: rgba(0, 0, 0, .87);
- font-size: 13px;
- }
- .input[type=email]:focus {
- border: 2px solid #0082ff;
- outline: none;
- }
- .input[type=email].invalid {
- border: 2px solid #ff0000;
- outline: none;
- }
- #input-invalid {
- -vender-animation-duration: .2s;
- }
- .randing-modal-btn {
- padding: 15px 10px 5px 10px;
- text-align: right;
- }
- .btn-cancel {
- font-size: 14px;
- font-weight: 500;
- width: 100%;
- color: rgba(0, 0, 0, .54);
- box-sizing: border-box;
- padding: 12px 15px 10px;
- border-radius: 3px;
- transition: background, box-shadow .2s;
- background: #E1E7EA;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
- text-align: center;
- }
- .btn-cancel:hover {
- background: #C6D2D5;
- cursor: pointer;
- }
- .btn-agree {
- font-size: 14px;
- font-weight: 100;
- color: #fff;
- width: 100%;
- box-sizing: border-box;
- padding: 12px 15px 10px;
- border-radius: 3px;
- transition: background, box-shadow .2s;
- background: #0082ff;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- text-align: center;
- }
- .btn-agree:hover {
- background: #0874de;
- cursor: pointer;
- }
- .modal-close-btn i {
- font-size: 36px;
- }
- /*///////////// 170123 λͺ¨λ°μΌλ‘κ·ΈμΈμ μλ΄ /////////////*/
- .mobile-login-info-wrap {
- padding: 60px;
- }
- .mobile-login-info-sub {
- padding-bottom: 10px;
- font-size: 13px;
- font-weight: 600;
- color: rgba(0, 0, 0, .54);
- }
- .mobile-login-info-title {
- font-size: 23px;
- font-weight: 500;
- color: rgba(0, 0, 0, .38);
- }
- .mobile-login-enter-btn {
- text-align: center;
- }
- .mobile-login-enter-btn a {
- color: #0082ff;
- text-decoration: underline;
- }
- .mobile-login-enter-btn a:hover {
- color: #006bd1;
- }
- /*///////////// 170215 μ΄μ©μκΈ /////////////*/
- @media (min-width: 320px) {
- .price-function-list {
- display: none;
- }
- .price-card-head h1 {
- font-size: 20px;
- }
- .price-card-body h1, .price-card-body h5 {
- font-size: 23px;
- }
- .price-card-head, .price-card-body {
- width: 82vw;
- }
- .price-card-pd {
- padding: 10px 0;
- }
- .price-center {
- text-align: center;
- }
- .price-start-btn {
- padding: 5px 0 30px 45px;
- }
- }
- @media (min-width: 768px) {
- .price-function-list {
- display: none;
- }
- .price-card-head h1 {
- font-size: 20px;
- }
- .price-card-body {
- height: 330px;
- }
- .price-card-body h1, .price-card-body h5 {
- font-size: 23px;
- }
- .price-card-head, .price-card-body {
- width: 100%;
- }
- .price-card-pd {
- padding: 5px;
- }
- .price-center {
- text-align: left;
- }
- .price-card-body button {
- top: 130px;
- }
- .price-start-btn {
- padding: 5px 0 30px 20px;
- }
- }
- @media (min-width: 992px) {
- .price-function-list {
- display: none;
- }
- .price-card-head h1 {
- font-size: 18px;
- }
- .price-card-body {
- height: 370px;
- }
- .price-card-body h1, .price-card-body h5 {
- font-size: 2vw;
- }
- .price-card-pd {
- padding: 5px;
- }
- .price-center {
- text-align: left;
- }
- .price-card-body button {
- top: 175px;
- }
- .price-start-btn {
- padding: 0;
- }
- }
- @media (min-width: 1200px) {
- .price-function-list {
- display: block;
- }
- .price-card-head h1 {
- font-size: 20px;
- }
- .price-card-body {
- height: 350px;
- }
- .price-card-body h1, .price-card-body h5 {
- font-size: 23px;
- }
- .price-card-pd {
- padding: 5px;
- }
- .price-card-body button {
- top: 150px;
- }
- }
- .price-list-width {
- max-width: 1200px;
- margin: auto;
- }
- .price-list-wrap {
- padding: 100px 30px 5px 30px;
- }
- .head-line {
- background: #1e88e5;
- height: 2px;
- width: 32px;
- margin-bottom: 20px;
- }
- .price-list-wrap h1 {
- font-size: 14.5;
- font-weight: 500;
- color: rgba(0, 0, 0, .87);
- padding-bottom: 15px;
- }
- .price-list-wrap p {
- font-size: 13px;
- font-weight: 600;
- color: rgba(0, 0, 0, .38);
- margin-bottom: 30px;
- word-break: keep-all;
- }
- .price-card-head {
- padding: 25px 15px;
- border-right: 1px solid #d0d2d7;
- border-left: 1px solid #d0d2d7;
- border-top: 1px solid #d0d2d7;
- border-bottom: 1px solid #d0d2d7;
- background: #f8fafb;
- border-radius: 3px 3px 0 0;
- }
- .price-card-head h1 {
- font-weight: 100;
- color: #4d5256;
- padding-bottom: 0;
- }
- .price-card-head p {
- font-size: 13px;
- font-weight: 300;
- color: #4d5256;
- }
- .price-card-body {
- display: flex;
- flex-direction: column;
- border-right: 1px solid #d0d2d7;
- border-left: 1px solid #d0d2d7;
- border-bottom: 1px solid #d0d2d7;
- padding: 15px;
- border-radius: 0 0 3px 3px;
- }
- .price-card-body h1,.price-card-body h5 {
- font-weight: 100;
- color: #4d5256;
- padding-bottom: 0;
- }
- .price-card-body h2 {
- font-size: 13px;
- font-weight: 300;
- color: #0082ff;
- }
- .price-card-body p {
- padding: 15px 0;
- font-size: 13px;
- font-weight: 300;
- color: #4d5256;
- line-height: 1.7em;
- height: 72px;
- margin-bottom: 0;
- word-break: keep-all;
- }
- .price-start-btn-wrap {
- display: inline-block;
- padding-left: 5px;
- padding-bottom: 15px;
- }
- .price-start-btn {
- color: #878d91;
- font-size: 14px;
- font-weight: 300;
- }
- .price-start-btn:hover {
- color: #4d5256;
- cursor: pointer;
- }
- .price-start-btn i {
- position: relative;
- top: -1px;
- font-size: 18px;
- }
- .price-card-btn {
- position: relative;
- display: block;
- width: 100%;
- padding: 12px 15px;
- font-size: 14px;
- text-align: center;
- transition: background .2s !important;
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- word-break: break-all;
- border-radius: 3px;
- background: #eff1f5;
- border: 1px solid rgba(0, 0, 0, .05);
- color: rgba(0, 0, 0, .38);
- font-weight: 500;
- }
- .price-card-btn:hover {
- cursor: not-allowed;
- }
- .price-card-head.business h1,.price-card-head.business p,.price-card-head.business,.price-card-btn.business {
- background: #00a9fd;
- color: #fff;
- font-weight: 100;
- }
- .price-card-btn.business:hover {
- cursor: pointer;
- background: #1976D2;
- }
- .price-card-head.first h1,.price-card-head.first p,.price-card-head.first,.price-card-btn.first {
- background: #0082ff;
- color: #fff;
- font-weight: 100;
- }
- .price-card-btn.first:hover {
- cursor: pointer;
- background: #092e67;
- }
- .price-card-head.enter h1,.price-card-head.enter p,.price-card-head.enter,.price-card-btn.enter {
- background: #0051fb;
- color: #fff;
- font-weight: 100;
- }
- .price-card-btn.enter:hover {
- cursor: pointer;
- background: #0082ff;
- }
- .randing-price-list {
- padding-top: 15px;
- }
- .randing-price-list ul.list-on {
- padding: 0 0 0 30px;
- font-size: 12px;
- font-weight: 300;
- color: #878d91;
- }
- .randing-price-list ul i {
- font-size: 15px;
- color: #6CB970;
- margin-left: -30px;
- }
- .randing-price-list ul.list-off {
- padding: 0 0 0 30px;
- font-size: 13px;
- font-weight: 500;
- color: rgba(0, 0, 0, .38);
- text-decoration: line-through;
- }
- .randing-price-list ul.list-off i {
- font-size: 18px;
- color: rgba(0, 0, 0, .0);
- margin-left: -22px;
- }
- .randing-price-list ul li {
- padding: 0 0 5px 0;
- word-break: keep-all;
- }
- .randing-price-table {
- width: 100%;
- text-align: left;
- margin-bottom: 120px;
- }
- .randing-price-table thead tr {
- background: #00a9fd;
- height: 48px;
- border-top: 1px solid rgba(0, 0, 0, .06);
- border-bottom: 1px solid rgba(0, 0, 0, .06);
- }
- .randing-price-table thead tr th {
- padding: 0 15px;
- color: #fff;
- font-size: 14px;
- font-weight: 100;
- }
- .randing-price-table tbody tr {
- height: 48px;
- border-bottom: 1px solid rgba(0, 0, 0, .06);
- }
- .randing-price-table tbody tr th {
- width: 680px;
- padding: 0 15px;
- font-size: 14px;
- font-weight: 400;
- color: #4d5256;
- }
- .randing-price-table tbody tr td {
- padding: 0 15px;
- font-size: 14px;
- font-weight: 400;
- color: #4d5256;
- }
- .randing-price-table tbody tr td i {
- color: #0082ff;
- }
- .randing-price-table tbody tr td i.ng {
- color: #ff0000;
- }
- /*///////////// 170216 ν /////////////*/
- @media (min-width: 320px) {
- .team-address-text-pd-l {
- padding: 15px 0;
- }
- .team-address-text-pd-r {
- padding: 15px 0;
- }
- }
- @media (min-width: 768px) {
- .team-address-text-pd-l {
- padding: 15px 15px 15px 0;
- }
- .team-address-text-pd-r {
- padding: 15px 0 15px 15px;
- }
- }
- .team-profile-wrap {
- padding: 100px 30px 30px 30px;
- }
- .team-profile-wrap h1 {
- font-size: 14px;
- font-weight: 400;
- color: #4d5256;
- padding-bottom: 10px;
- }
- .team-profile-wrap p {
- padding-top: 30px;
- font-size: 14px;
- font-weight: 300;
- color: #878d91;
- line-height: 26px;
- }
- .team-profile-width {
- max-width: 1140px;
- margin: auto;
- }
- .profile-wrap {
- position: relative;
- border: 1px solid rgba(0, 0, 0, .12);
- max-width: 262px;
- margin: 0 auto;
- }
- .profile-picture {
- width: 100%;
- height: 270px;
- overflow: hidden;
- }
- .profile-picture img {
- width: 100%;
- height: auto;
- }
- #hunjae:hover {
- content: url('//static.airbridge.io/images/2017_randing/main-8-team/team_profile/hunjae_2.png');
- }
- .profile-card {
- position: relative;
- height: 180px;
- padding: 20px;
- background: #fff;
- }
- .profile-card h4 {
- font-size: 16px;
- font-weight: 400;
- color: #4d5256;
- padding-bottom: 5px;
- }
- .profile-card h2 {
- font-size: 12px;
- font-weight: 400;
- color: #878d91;
- }
- .profile-card h3 {
- padding-top: 20px;
- font-size: 12px;
- font-weight: 400;
- color: #4d5256;
- line-height: 20px;
- }
- .profile-card span {
- position: absolute;
- top: 20px;
- right: 15px;
- padding: 1px 6px;
- border-radius: 2px;
- font-size: 11px;
- font-weight: 400;
- color: #fff;
- }
- .profile-card span.dev {
- background-color: #008DA6;
- }
- .team-address-text {
- padding-bottom: 30px;
- }
- .team-address-text h5 {
- font-size: 14px;
- font-weight: 300;
- color: #4d5256;
- line-height: 23px;
- padding-bottom: 10px;
- }
- .team-address-text h6 {
- font-size: 14px;
- font-weight: 300;
- color: #878d91;
- line-height: 23px;
- }
- .team-address-text h6.sub {
- padding-top: 5px;
- font-size: 14px;
- font-weight: 300;
- color: #878d91;
- line-height: 20px;
- }
- .team-profile-wrap.bg {
- margin-top: 60px;
- padding: 60px 0;
- background: #0082ff;
- }
- .team-to-recruit {
- text-align: center;
- }
- .team-to-recruit-text {
- font-size: 18px;
- font-weight: 100;
- color: #fff;
- padding-bottom: 20px;
- }
- .team-to-recruit-btn {
- position: relative;
- padding: 12px 40px;
- font-size: 14px;
- text-align: center;
- border-radius: 3px;
- box-shadow: inset 0 0 0 1px #fff;
- color: #fff;
- font-weight: 100;
- }
- .team-to-recruit-btn:hover {
- background: #fff;
- color: #0082ff;
- font-weight: 300;
- cursor: pointer;
- }
- /*///////////// 170203 μ±μ© /////////////*/
- .recruit-wrap.first {
- padding: 100px 30px 60px 30px;
- }
- .recruit-wrap {
- padding: 60px 30px;
- }
- .recruit-wrap h1 {
- font-size: 14px;
- font-weight: 400;
- color: #4d5256;
- }
- .recruit-wrap p {
- padding-top: 30px;
- font-size: 14px;
- font-weight: 400;
- color: #878d91;
- line-height: 26px;
- }
- .recruit-wrap ul {
- padding-top: 10px;
- line-height: 26px;
- }
- .recruit-wrap li {
- font-size: 14px;
- font-weight: 400;
- color: #878d91;
- margin-left: 20px;
- list-style-type: disc;
- }
- .recruit-width {
- max-width: 1140px;
- margin: auto;
- }
- .recruit-notice-wrap {
- padding: 5px 0;
- }
- .recruit-notice-wrap.first {
- padding: 35px 0 5px 0;
- }
- .recruit-notice {
- padding: 20px 15px;
- border: 1px solid rgba(0, 0, 0, .12);
- border-radius: 3px;
- }
- .recruit-notice.on {
- border-radius: 3px 3px 0 0;
- }
- .recruit-notice:hover {
- border: 1px solid rgba(0, 0, 0, .2);
- cursor: pointer;
- }
- .recruit-notice h1 {
- display: inline-block;
- font-size: 14px;
- font-weight: 400;
- color: #4d5256;
- }
- .recruit-notice h1.on {
- color: #878d91;
- }
- .recruit-notice i {
- display: inline-block;
- float: right;
- font-size: 24px;
- color: #4d5256;
- }
- .recruit-notice i.on {
- color: #878d91;
- }
- .recruit-notice-content {
- padding: 30px;
- background: #f8fafb;
- border-right: 1px solid rgba(0, 0, 0, .12);
- border-left: 1px solid rgba(0, 0, 0, .12);
- border-bottom: 1px solid rgba(0, 0, 0, .12);
- border-radius: 0 0 3px 3px;
- }
- .recruit-notice-content h1 {
- font-size: 16px;
- font-weight: 500;
- color: rgba(0, 0, 0, .87);
- padding-bottom: 15px;
- }
- .recruit-notice-content h2 {
- font-size: 16px;
- font-weight: 400;
- color: #4d5256;
- padding: 45px 0 15px 0;
- }
- .recruit-notice-content ul {
- line-height: 23px;
- }
- .recruit-notice-content li {
- font-size: 13px;
- font-weight: 400;
- color: #4d5256;
- margin-left: 20px;
- list-style-type: disc;
- }
- .recruit-picture-wrap {
- padding: 90px 0 0 0;
- }
- .recruit-picture-wrap img {
- width: 100%;
- overflow: hidden;
- }
- /*///////////// 170206 footer_λ°λͺ¨μ μ²(modal) /////////////*/
- @media (min-width: 320px) {
- .randing-modal-complete {
- margin-left: 30px;
- margin-right: 30px;
- }
- }
- @media (min-width: 768px) {
- .randing-modal-complete {
- margin-left: 0;
- margin-right: 0;
- }
- }
- .randing-modal-head h1 {
- padding: 10px 15px 10px 10px;
- color: rgba(0, 0, 0, .87);
- font-size: 18px;
- font-weight: 400;
- }
- .randing-modal-head p {
- padding: 0 10px;
- color: rgba(0, 0, 0, .87);
- font-size: 13px;
- font-weight: 400;
- }
- .randing-modal-input label {
- padding: 10px 10px 10px 0;
- color: #0082ff;
- font-size: 14.5px;
- font-weight: 400;
- }
- .randing-modal-input label.invalid {
- color: #ff0000;
- }
- .randing-modal-complete {
- padding: 15px;
- background: #fff;
- border-radius: 3px 3px 0 0;
- text-align: center;
- }
- .randing-modal-complete i {
- padding-top: 20px;
- color: #6cb970;
- font-size: 48px;
- }
- .randing-modal-complete h1 {
- padding: 30px 15px 10px 10px;
- color: rgba(0, 0, 0, .87);
- font-size: 23px;
- font-weight: 600;
- }
- .randing-modal-complete p {
- color: #59985c;
- font-size: 14.5px;
- font-weight: 600;
- }
- .randing-body-btn {
- margin-top: 15px;
- margin-bottom: 10px;
- font-size: 14px;
- color: #fff;
- box-sizing: border-box;
- padding: 12px 15px 10px;
- border-radius: 3px;
- transition: background, box-shadow .2s;
- background: #F7F8FA;
- border: 1px solid rgba(0, 0, 0, .12);
- color: rgba(0, 0, 0, .6);
- font-weight: 600;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- text-align: center;
- }
- .randing-body-btn:hover {
- background: #E3E5E8;
- cursor: pointer;
- }
- /*///////////// 170320 μλΉμ€μ΄μ©μ½κ΄,κ°μΈμ 보취κΈλ°©μΉ¨ /////////////*/
- @media (min-width: 320px) {
- .policy-banner {
- padding: 30px 20px 30px 20px;
- }
- }
- @media (min-width: 768px) {
- .policy-banner {
- padding: 150px 30px 50px 30px;
- }
- }
- .policy-banner {
- max-width: 1190px;
- margin: auto;
- }
- .policy-banner h1 {
- font-size: 23px;
- font-weight: 200;
- letter-spacing: 0.5px;
- color: #fff;
- }
- .policy-width {
- max-width: 1140px;
- margin: auto;
- }
- .policy-text {
- padding-bottom: 25px;
- }
- .policy-text > h1 {
- font-size: 14px;
- font-weight: 500;
- color: rgba(0, 0, 0, .87);
- padding-bottom: 10px;
- }
- .policy-text > h2 {
- font-size: 14px;
- font-weight: 500;
- color: #0082ff;
- padding-bottom: 10px;
- }
- .policy-text-body {
- font-size: 13px;
- font-weight: 400;
- color: #757575;
- line-height: 22px;
- }
- .policy-text-body p {
- display: inline-block;
- padding-right: 5px;
- }
- .policy-text-body h2 {
- margin-left: 20px;
- }
- .policy-text-body li {
- margin-left: 30px;
- list-style-type: disc;
- list-style-position: outside;
- }
- .policy-text-body h3 {
- color: #757575;
- padding-bottom: 10px;
- }
- .policy-text-body table {
- margin: 15px 0;
- width: 100%;
- border: 1px solid #d0d2d7;
- color: rgba(0, 0, 0, .87);
- }
- .policy-text-body tr {
- border: 1px solid #d0d2d7;
- padding: 15px;
- }
- .policy-text-body th {
- border: 1px solid #d0d2d7;
- background: #e7f3ff;
- }
- .policy-text-body td {
- border: 1px solid #d0d2d7;
- padding: 15px;
- }
- /*------------------------------β²β²β² λλ© β²β²β²-------------------------------------*/
- /* grid */
- .container-mail {
- box-sizing: border-box;
- padding-right: 10px;
- padding-left: 10px;
- margin-right: auto;
- margin-left: auto;
- }
- .dashboard-container-set,.dashboard-container-set-w-lnb,.dashboard-container-stats {
- padding: 15px;
- box-sizing: border-box;
- }
- @media (min-width: 320px) {
- .dashboard-container-set {
- width: 568px;
- }
- .dashboard-container-set-w-lnb {
- width: 710px;
- }
- .dashboard-container-stats {
- width: 568px;
- }
- .container {
- width: 320px;
- }
- .container-mail {
- width: 100%;
- }
- .m-margin-t-10 {
- margin-top: 10px;
- }
- .m-margin-b-10 {
- margin-bottom: 10px;
- }
- .m-center {
- text-align: center;
- }
- }
- @media (min-width: 768px) {
- .dashboard-container-set {
- width: 100%;
- }
- .dashboard-container-set-w-lnb {
- width: 100%;
- min-width: 710px;
- }
- .dashboard-container-stats {
- width: 100%;
- }
- .container {
- width: 100%;
- }
- .container-mail {
- width: 710px;
- }
- .m-margin-t-10 {
- margin-top: 10px;
- }
- .m-margin-b-10 {
- margin-bottom: 10px;
- }
- .m-center {
- text-align: left;
- }
- }
- @media (min-width: 992px) {
- .dashboard-container-set {
- width: 100%;
- }
- .dashboard-container-set-w-lnb {
- width: 100%;
- }
- .dashboard-container-stats {
- width: 100%;
- }
- .container {
- width: 100%;
- }
- .container-mail {
- width: 710px;
- }
- .m-center {
- text-align: left;
- }
- }
- @media (min-width: 1200px) {
- .dashboard-container-set {
- max-width: 1166px;
- width: 100%;
- }
- .dashboard-container-set-w-lnb {
- max-width: 1166px;
- width: 100%;
- }
- .dashboard-container-stats {
- width: 100%;
- }
- .container {
- width: 1366px;
- }
- .container-mail {
- width: 710px;
- }
- .m-center {
- text-align: left;
- }
- }
- .guide-home-wrapper {
- position: relative;
- background-color: #005B95;
- }
- .row {
- font-size: 0;
- position: relative;
- }
- .row-d {
- margin-top: 30px;
- margin-bottom: 30px;
- }
- .row-d-md {
- margin-top: 20px;
- margin-bottom: 20px;
- }
- .row-d-sm {
- margin-top: 10px;
- margin-bottom: 10px;
- }
- .row-d:last-child {
- margin-bottom: 0;
- }
- .col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12 {
- position: relative;
- min-height: 1px;
- margin-right: 15px;
- margin-left: 15px;
- }
- .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
- /* float: left; */
- }
- .col-xs-12 {
- width: 100%;
- }
- .col-xs-11 {
- width: 91.66666667%;
- }
- .col-xs-10 {
- width: 83.33333333%;
- }
- .col-xs-9 {
- width: 75%;
- }
- .col-xs-8 {
- width: 66.66666667%;
- }
- .col-xs-7 {
- width: 58.33333333%;
- }
- .col-xs-6 {
- width: 50%;
- }
- .col-xs-5 {
- width: 41.66666667%;
- }
- .col-xs-4 {
- width: 33.33333333%;
- }
- .col-xs-3 {
- width: 25%;
- }
- .col-xs-2 {
- width: 16.66666667%;
- }
- .col-xs-1 {
- width: 8.33333333%;
- }
- .col-xs-pull-12 {
- right: 100%;
- }
- .col-xs-pull-11 {
- right: 91.66666667%;
- }
- .col-xs-pull-10 {
- right: 83.33333333%;
- }
- .col-xs-pull-9 {
- right: 75%;
- }
- .col-xs-pull-8 {
- right: 66.66666667%;
- }
- .col-xs-pull-7 {
- right: 58.33333333%;
- }
- .col-xs-pull-6 {
- right: 50%;
- }
- .col-xs-pull-5 {
- right: 41.66666667%;
- }
- .col-xs-pull-4 {
- right: 33.33333333%;
- }
- .col-xs-pull-3 {
- right: 25%;
- }
- .col-xs-pull-2 {
- right: 16.66666667%;
- }
- .col-xs-pull-1 {
- right: 8.33333333%;
- }
- .col-xs-pull-0 {
- right: auto;
- }
- .col-xs-push-12 {
- left: 100%;
- }
- .col-xs-push-11 {
- left: 91.66666667%;
- }
- .col-xs-push-10 {
- left: 83.33333333%;
- }
- .col-xs-push-9 {
- left: 75%;
- }
- .col-xs-push-8 {
- left: 66.66666667%;
- }
- .col-xs-push-7 {
- left: 58.33333333%;
- }
- .col-xs-push-6 {
- left: 50%;
- }
- .col-xs-push-5 {
- left: 41.66666667%;
- }
- .col-xs-push-4 {
- left: 33.33333333%;
- }
- .col-xs-push-3 {
- left: 25%;
- }
- .col-xs-push-2 {
- left: 16.66666667%;
- }
- .col-xs-push-1 {
- left: 8.33333333%;
- }
- .col-xs-push-0 {
- left: auto;
- }
- .col-xs-offset-12 {
- margin-left: 100%;
- }
- .col-xs-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-xs-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-xs-offset-9 {
- margin-left: 75%;
- }
- .col-xs-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-xs-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-xs-offset-6 {
- margin-left: 50%;
- }
- .col-xs-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-xs-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-xs-offset-3 {
- margin-left: 25%;
- }
- .col-xs-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-xs-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-xs-offset-0 {
- margin-left: 0;
- }
- @media (min-width: 768px) {
- .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
- /* float: left; */
- }
- .col-sm-12 {
- width: 100%;
- }
- .col-sm-11 {
- width: 91.66666667%;
- }
- .col-sm-10 {
- width: 83.33333333%;
- }
- .col-sm-9 {
- width: 75%;
- }
- .col-sm-8 {
- width: 66.66666667%;
- }
- .col-sm-7 {
- width: 58.33333333%;
- }
- .col-sm-6 {
- width: 50%;
- }
- .col-sm-5 {
- width: 41.66666667%;
- }
- .col-sm-4 {
- width: 33.33333333%;
- }
- .col-sm-3 {
- width: 25%;
- }
- .col-sm-2 {
- width: 16.66666667%;
- }
- .col-sm-1 {
- width: 8.33333333%;
- }
- .col-sm-0 {
- width: 0;
- }
- .col-sm-pull-12 {
- right: 100%;
- }
- .col-sm-pull-11 {
- right: 91.66666667%;
- }
- .col-sm-pull-10 {
- right: 83.33333333%;
- }
- .col-sm-pull-9 {
- right: 75%;
- }
- .col-sm-pull-8 {
- right: 66.66666667%;
- }
- .col-sm-pull-7 {
- right: 58.33333333%;
- }
- .col-sm-pull-6 {
- right: 50%;
- }
- .col-sm-pull-5 {
- right: 41.66666667%;
- }
- .col-sm-pull-4 {
- right: 33.33333333%;
- }
- .col-sm-pull-3 {
- right: 25%;
- }
- .col-sm-pull-2 {
- right: 16.66666667%;
- }
- .col-sm-pull-1 {
- right: 8.33333333%;
- }
- .col-sm-pull-0 {
- right: auto;
- }
- .col-sm-push-12 {
- left: 100%;
- }
- .col-sm-push-11 {
- left: 91.66666667%;
- }
- .col-sm-push-10 {
- left: 83.33333333%;
- }
- .col-sm-push-9 {
- left: 75%;
- }
- .col-sm-push-8 {
- left: 66.66666667%;
- }
- .col-sm-push-7 {
- left: 58.33333333%;
- }
- .col-sm-push-6 {
- left: 50%;
- }
- .col-sm-push-5 {
- left: 41.66666667%;
- }
- .col-sm-push-4 {
- left: 33.33333333%;
- }
- .col-sm-push-3 {
- left: 25%;
- }
- .col-sm-push-2 {
- left: 16.66666667%;
- }
- .col-sm-push-1 {
- left: 8.33333333%;
- }
- .col-sm-push-0 {
- left: auto;
- }
- .col-sm-offset-12 {
- margin-left: 100%;
- }
- .col-sm-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-sm-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-sm-offset-9 {
- margin-left: 75%;
- }
- .col-sm-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-sm-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-sm-offset-6 {
- margin-left: 50%;
- }
- .col-sm-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-sm-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-sm-offset-3 {
- margin-left: 25%;
- }
- .col-sm-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-sm-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-sm-offset-0 {
- margin-left: 0;
- }
- }
- @media (min-width: 992px) {
- .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
- /* float: left; */
- }
- .col-md-12 {
- width: 100%;
- }
- .col-md-11 {
- width: 91.66666667%;
- }
- .col-md-10 {
- width: 83.33333333%;
- }
- .col-md-9 {
- width: 75%;
- }
- .col-md-8 {
- width: 66.66666667%;
- }
- .col-md-7 {
- width: 58.33333333%;
- }
- .col-md-6 {
- width: 50%;
- }
- .col-md-5 {
- width: 41.66666667%;
- }
- .col-md-4 {
- width: 33.33333333%;
- }
- .col-md-3 {
- width: 25%;
- }
- .col-md-2 {
- width: 16.66666667%;
- }
- .col-md-1 {
- width: 8.33333333%;
- }
- .col-md-0 {
- width: 0;
- }
- .col-md-pull-12 {
- right: 100%;
- }
- .col-md-pull-11 {
- right: 91.66666667%;
- }
- .col-md-pull-10 {
- right: 83.33333333%;
- }
- .col-md-pull-9 {
- right: 75%;
- }
- .col-md-pull-8 {
- right: 66.66666667%;
- }
- .col-md-pull-7 {
- right: 58.33333333%;
- }
- .col-md-pull-6 {
- right: 50%;
- }
- .col-md-pull-5 {
- right: 41.66666667%;
- }
- .col-md-pull-4 {
- right: 33.33333333%;
- }
- .col-md-pull-3 {
- right: 25%;
- }
- .col-md-pull-2 {
- right: 16.66666667%;
- }
- .col-md-pull-1 {
- right: 8.33333333%;
- }
- .col-md-pull-0 {
- right: auto;
- }
- .col-md-push-12 {
- left: 100%;
- }
- .col-md-push-11 {
- left: 91.66666667%;
- }
- .col-md-push-10 {
- left: 83.33333333%;
- }
- .col-md-push-9 {
- left: 75%;
- }
- .col-md-push-8 {
- left: 66.66666667%;
- }
- .col-md-push-7 {
- left: 58.33333333%;
- }
- .col-md-push-6 {
- left: 50%;
- }
- .col-md-push-5 {
- left: 41.66666667%;
- }
- .col-md-push-4 {
- left: 33.33333333%;
- }
- .col-md-push-3 {
- left: 25%;
- }
- .col-md-push-2 {
- left: 16.66666667%;
- }
- .col-md-push-1 {
- left: 8.33333333%;
- }
- .col-md-push-0 {
- left: auto;
- }
- .col-md-offset-12 {
- margin-left: 100%;
- }
- .col-md-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-md-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-md-offset-9 {
- margin-left: 75%;
- }
- .col-md-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-md-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-md-offset-6 {
- margin-left: 50%;
- }
- .col-md-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-md-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-md-offset-3 {
- margin-left: 25%;
- }
- .col-md-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-md-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-md-offset-0 {
- margin-left: 0;
- }
- }
- @media (min-width: 1200px) {
- .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
- /* float: left; */
- }
- .col-lg-12 {
- width: 100%;
- }
- .col-lg-11 {
- width: 91.66666667%;
- }
- .col-lg-10 {
- width: 83.33333333%;
- }
- .col-lg-9 {
- width: 75%;
- }
- .col-lg-8 {
- width: 66.66666667%;
- }
- .col-lg-7 {
- width: 58.33333333%;
- }
- .col-lg-6 {
- width: 50%;
- }
- .col-lg-5 {
- width: 41.66666667%;
- }
- .col-lg-4 {
- width: 33.33333333%;
- }
- .col-lg-3 {
- width: 25%;
- }
- .col-lg-2 {
- width: 16.66666667%;
- }
- .col-lg-1 {
- width: 8.33333333%;
- }
- .col-lg-0 {
- width: 0;
- }
- .col-lg-pull-12 {
- right: 100%;
- }
- .col-lg-pull-11 {
- right: 91.66666667%;
- }
- .col-lg-pull-10 {
- right: 83.33333333%;
- }
- .col-lg-pull-9 {
- right: 75%;
- }
- .col-lg-pull-8 {
- right: 66.66666667%;
- }
- .col-lg-pull-7 {
- right: 58.33333333%;
- }
- .col-lg-pull-6 {
- right: 50%;
- }
- .col-lg-pull-5 {
- right: 41.66666667%;
- }
- .col-lg-pull-4 {
- right: 33.33333333%;
- }
- .col-lg-pull-3 {
- right: 25%;
- }
- .col-lg-pull-2 {
- right: 16.66666667%;
- }
- .col-lg-pull-1 {
- right: 8.33333333%;
- }
- .col-lg-pull-0 {
- right: auto;
- }
- .col-lg-push-12 {
- left: 100%;
- }
- .col-lg-push-11 {
- left: 91.66666667%;
- }
- .col-lg-push-10 {
- left: 83.33333333%;
- }
- .col-lg-push-9 {
- left: 75%;
- }
- .col-lg-push-8 {
- left: 66.66666667%;
- }
- .col-lg-push-7 {
- left: 58.33333333%;
- }
- .col-lg-push-6 {
- left: 50%;
- }
- .col-lg-push-5 {
- left: 41.66666667%;
- }
- .col-lg-push-4 {
- left: 33.33333333%;
- }
- .col-lg-push-3 {
- left: 25%;
- }
- .col-lg-push-2 {
- left: 16.66666667%;
- }
- .col-lg-push-1 {
- left: 8.33333333%;
- }
- .col-lg-push-0 {
- left: auto;
- }
- .col-lg-offset-12 {
- margin-left: 100%;
- }
- .col-lg-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-lg-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-lg-offset-9 {
- margin-left: 75%;
- }
- .col-lg-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-lg-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-lg-offset-6 {
- margin-left: 50%;
- }
- .col-lg-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-lg-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-lg-offset-3 {
- margin-left: 25%;
- }
- .col-lg-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-lg-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-lg-offset-0 {
- margin-left: 0;
- }
- }
- /* buttons */
- .btn {
- position: relative;
- padding: 12px 15px;
- font-size: 14px;
- text-align: center;
- }
- .btn-action {
- border-radius: 3px;
- background: #6CB970;
- border: 1px solid rgba(0, 0, 0, .12);
- color: #fff;
- font-weight: 300;
- }
- .btn-action:hover {
- background: #59985C;
- cursor: pointer;
- }
- .btn-key {
- border-radius: 3px;
- background: #1E88E5;
- border: 1px solid rgba(0, 0, 0, .12);
- color: #fff;
- font-weight: 300;
- }
- .btn-key:hover {
- background: #1976D2;
- cursor: pointer;
- }
- .btn-sub {
- border-radius: 3px;
- background: #F7F8FA;
- border: 1px solid rgba(0, 0, 0, .12);
- color: rgba(0, 0, 0, .6);
- font-weight: 600;
- }
- .btn-sub:hover {
- background: #E3E5E8;
- cursor: pointer;
- }
- .btn-sub-round {
- border-radius: 50em;
- border: 1px solid rgba(0, 0, 0, .2);
- color: rgba(0, 0, 0, .6);
- font-weight: 600;
- }
- .btn-sub-round:hover {
- background: #1e88e5;
- color: #fff;
- cursor: pointer;
- }
- .btn-disabled {
- border-radius: 3px;
- background: rgba(0, 0, 0, .12);
- border: 1px solid rgba(0, 0, 0, .05);
- color: rgba(0, 0, 0, .20);
- font-weight: 500;
- cursor: not-allowed;
- }
- .btn-round {
- border-radius: 50em;
- background: rgba(255, 255, 255, .2);
- border: 1px solid transparent;
- color: #fff;
- font-weight: 300;
- }
- .btn-round:hover {
- background: rgba(0, 0, 0, .12);
- cursor: pointer;
- }
- .btn-border {
- border-radius: 3px;
- border: 1px solid #fff;
- color: #fff;
- font-weight: 300;
- }
- .btn-border:hover {
- background: rgba(255, 255, 255, .12);
- cursor: pointer;
- }
- .btn-border.round {
- border-radius: 50em;
- }
- .btn i {
- font-size: 16px;
- margin-top: 1px;
- vertical-align: top;
- box-sizing: border-box;
- }
- .ic-right {
- padding-right: 5px;
- }
- .ic-left {
- padding-left: 5px;
- }
- .btn-block {
- display: block;
- width: 100%;
- }
- .btn-icon {
- position: relative;
- padding: 2px;
- width: 35px;
- height: 35px;
- text-align: center;
- }
- .btn-icon i {
- margin-right: -1px;
- font-size: 18px;
- }
- .btn-key-ic {
- border-radius: 3px;
- background: #1E88E5;
- border: 1px solid rgba(0, 0, 0, .12);
- color: #fff;
- }
- .btn-key-ic:hover {
- background: #1976D2;
- cursor: pointer;
- }
- .btn-sub-ic {
- border-radius: 3px;
- background: #F7F8FA;
- border: 1px solid rgba(0, 0, 0, .12);
- color: rgba(0, 0, 0, .54);
- }
- .btn-sub-ic:hover {
- background: #E3E5E8;
- cursor: pointer;
- }
- .btn-round-ic {
- border-radius: 50em;
- background: rgba(255, 255, 255, .20);
- border: 1px solid transparent;
- color: #fff;
- }
- .btn-round-ic:hover {
- background: rgba(0, 0, 0, .20);
- cursor: pointer;
- }
- .btn-key-flat {
- color: #0082FF;
- font-size: 13px;
- font-weight: 400;
- }
- .btn-key-flat:hover {
- color: #2962ff;
- cursor: pointer;
- }
- .btn-sub-flat {
- color: rgba(0, 0, 0, .38);
- font-size: 14px;
- font-weight: 500;
- }
- .btn-sub-flat:hover {
- color: rgba(0, 0, 0, .54);
- cursor: pointer;
- }
- *,*:before,*:after {
- /*transition: background .2s !important;*/
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- word-break: break-all;
- }
- /* βμμ λ° μ μ©λ CSSβ */
- .btn-lg {
- position: relative;
- box-sizing: border-box;
- padding: 17px 20px 15px;
- border-radius: 3px;
- transition: background, box-shadow .2s;
- border: 0;
- outline: none;
- word-break: break-all;
- }
- .btn-xs {
- position: relative;
- box-sizing: border-box;
- padding: 7px 10px 5px;
- border-radius: 3px;
- transition: background, box-shadow .2s;
- outline: none;
- word-break: break-all;
- }
- .btn-xxs {
- position: relative;
- box-sizing: border-box;
- padding: 0px 5px;
- border-radius: 3px;
- transition: background, box-shadow .2s;
- outline: none;
- word-break: break-all;
- }
- .btn-premium {
- cursor: pointer;
- background: #e7f3ff;
- color: #0082ff;
- border: 0;
- transition: background .2s;
- }
- .btn-premium:hover {
- background: #cbe5ff;
- }
- .btn-added {
- padding: 10px 15px;
- border-radius: 30px;
- background: #e7f3ff;
- color: #0874de;
- display: inline-block;
- }
- .btn-added.invalid {
- background: #fcecef;
- }
- .btn-tag {
- position: relative;
- top: -2px;
- padding: 1px 3px;
- color: #fff;
- background: #0082ff;
- border-radius: 3px;
- display: inline-block;
- }
- .btn-tag-action,.btn-tag-key {
- position: relative;
- line-height: 1em;
- font-weight: 500;
- display: inline-block;
- z-index: 2;
- padding: 2px 3px;
- border-radius: 3px;
- }
- .btn-tag-key {
- top: -1px;
- color: #0082ff;
- }
- .btn-tag-action {
- top: -1px;
- color: #35BC8A;
- }
- .btn-tag-sub {
- position: relative;
- top: -1px;
- padding: 2px 3px;
- line-height: 1em;
- color: #838794;
- background: #d0d2d7;
- font-weight: 500;
- background: #e3e5e8;
- border-radius: 3px;
- display: inline-block;
- }
- .btn-close {
- cursor: pointer;
- width: 15px;
- background: 0;
- color: #a0acb6;
- transition: color .2s;
- position: relative;
- display: inline-block;
- font-size: 15px;
- }
- .btn-close:hover {
- color: #969aa5;
- }
- .btn.selected {
- border: 1px solid #0082ff;
- box-shadow: 0 0 0 1px #0082ff;
- }
- .btn-tab,.btn-tab-lg {
- position: relative;
- background: #f7f8fa;
- color: #2d2d3c;
- transition: background .2s;
- box-sizing: border-box;
- border-left: 1px solid #e3e5e8;
- border-bottom: 1px solid #e3e5e8;
- vertical-align: bottom;
- }
- .btn-tab {
- padding: 10px 15px;
- }
- .btn-tab-lg {
- padding: 15px 20px;
- }
- .btn-tab.on,.btn-tab-lg.on {
- background: #fff;
- color: #0082ff;
- font-size: 17px;
- border-bottom: 1px solid #fff;
- padding: 17px 22px;
- }
- .btn-tab:first-child,.btn-tab-lg:first-child {
- border-left: 0;
- }
- ul.pagination {
- display: inline-block;
- padding: 0;
- margin: 0;
- }
- ul.pagination li {
- display: inline;
- }
- ul.pagination li a {
- color: #53596a;
- font-size: 13px;
- font-weight: 600;
- padding: 7px 13px;
- text-decoration: none;
- transition: color .2s;
- }
- ul.pagination li a:hover {
- color: #2d2d3c;
- background: #e3e5e8;
- }
- ul.pagination li a.active {
- background: #838794;
- color: #fff;
- transition: background .2s;
- }
- .btn-pagination {
- position: relative;
- background: #f7f8fa;
- color: #2d2d3c;
- transition: background .2s;
- box-sizing: border-box;
- padding: 7px 12px;
- border: 1px solid #d0d2d7;
- outline: none;
- border-right: 0;
- }
- .btn-pagination:first-child {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
- .btn-pagination:last-child {
- border-right: 1px solid #d0d2d7;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
- .btn-pagination:first-child {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
- .btn-pagination:last-child {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- border-right: 1px solid #d0d2d7;
- }
- .btn-tab-vertical.on {
- background: #fff;
- color: #2d2d3c;
- font-weight: 500;
- }
- .btn-pagination.on {
- background: #fff;
- font-weight: 500;
- color: #0082ff;
- box-sizing: border-box;
- }
- .btn-tab:hover,.btn-tab-lg:hover,.btn-tab-vertical:hover,.btn-tab-vertical-round:hover,.btn-pagination:hover {
- cursor: pointer;
- background: #eff1f5;
- }
- .btn-tab-vertical {
- position: relative;
- background: #f7f8fa;
- color: #53596a;
- transition: background .2s;
- box-sizing: border-box;
- padding: 10px 15px;
- border-bottom: 1px solid #e3e5e8;
- outline: none;
- }
- .btn-tab-vertical:last-child {
- border-bottom: 0;
- }
- .btn-tab-vertical.on {
- background: #fff;
- color: #2d2d3c;
- font-weight: 500;
- border-bottom: 0;
- }
- .btn-tab-vertical-round {
- position: relative;
- background: #f7f8fa;
- color: #53596a;
- font-size: 14px;
- transition: background .2s;
- box-sizing: border-box;
- padding: 10px 15px;
- border-top: 1px solid rgba(0, 0, 0, .15);
- border-right: 1px solid rgba(0, 0, 0, .15);
- border-left: 1px solid rgba(0, 0, 0, .15);
- outline: none;
- }
- .btn-tab-vertical-round:last-child {
- border-bottom: 1px solid rgba(0, 0, 0, .15);
- }
- .btn-tab-vertical-round.on {
- background: #fff;
- color: #2d2d3c;
- border-right: 0;
- }
- .btn-tab-vertical-round-ic {
- width: 25px;
- }
- /* tab */
- .tab-vertical ul {
- background: #f7f8fa;
- border-radius: 3px;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
- font-size: 14.5px;
- letter-spacing: -0.5px;
- }
- .tab-vertical>ul li {
- color: rgba(0, 0, 0, .38);
- border-bottom: 1px solid rgba(0, 0, 0, .06);
- position: relative;
- transition: background .2s;
- padding: 10px 15px;
- }
- .tab-vertical>ul li:hover {
- background: #e3e5e8;
- cursor: pointer;
- }
- .tab-vertical>ul li i {
- width: 23px;
- }
- .tab-vertical>ul li.on {
- color: rgba(0, 0, 0, .87);
- background: #fff;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
- z-index: 1;
- }
- .tab-vertical-title {
- font-size: 20px;
- font-weight: 300;
- color: rgba(0, 0, 0, .54);
- }
- .tab-vertical-desc {
- font-size: 12px;
- color: rgba(0, 0, 0, .54);
- padding-top: 15px;
- }
- .tab-title {
- font-size: 20px;
- font-weight: 300;
- color: rgba(0, 0, 0, .54);
- }
- .tab-desc {
- font-size: 12px;
- color: rgba(0, 0, 0, .54);
- padding-top: 15px;
- }
- .tab-horizontal {
- background: #f7f8fa;
- font-size: 14.5px;
- letter-spacing: -0.5px;
- color: rgba(0, 0, 0, .38);
- border-right: 1px solid rgba(0, 0, 0, .06);
- border-bottom: 1px solid rgba(0, 0, 0, .06);
- position: relative;
- transition: background .2s;
- padding: 20px 30px;
- }
- .tab-horizontal:hover {
- background: #e3e5e8;
- cursor: pointer;
- }
- .tab-horizontal>i {
- width: 23px;
- }
- .tab-horizontal.on {
- color: #0082ff;
- background: #fff;
- border-bottom: 1px solid #fff;
- }
- .menu-lg>ul {
- position: absolute;
- box-sizing: border-box;
- overflow: auto;
- border: 1px solid #d0d2d7;
- background: #fff;
- max-height: 300px;
- box-shadow: 3px 5px 3px rgba(0, 0, 0, .4);
- padding: 0;
- z-index: 2;
- }
- .menu-md>ul,.menu-sm>ul {
- position: absolute;
- box-sizing: border-box;
- overflow: auto;
- border: 1px solid #d0d2d7;
- background: #fff;
- max-height: 170px;
- box-shadow: 3px 5px 3px rgba(0, 0, 0, .4);
- padding: 0;
- z-index: 2;
- }
- .menu-lg>ul li {
- box-sizing: border-box;
- position: relative;
- width: auto;
- height: 55px;
- padding: 10px;
- line-height: 35px;
- font-size: 13px;
- color: #2d2d3c;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- transition: background .2s;
- border-top: 1px solid #e3e5e8;
- }
- .menu-md>ul li {
- box-sizing: border-box;
- position: relative;
- width: auto;
- height: 40px;
- padding: 0px 15px;
- line-height: 40px;
- font-size: 13px;
- color: #2d2d3c;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- transition: background .2s;
- border-top: 1px solid #e3e5e8;
- }
- .menu-sm>ul li {
- box-sizing: border-box;
- position: relative;
- width: auto;
- height: 30px;
- padding: 0px 10px;
- line-height: 30px;
- font-size: 13px;
- color: #2d2d3c;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- transition: background .2s;
- border-top: 1px solid #e3e5e8;
- }
- .menu-lg>ul li:hover,.menu-md>ul li:hover,.menu-sm>ul li:hover {
- background: #eff1f5;
- cursor: pointer;
- }
- .menu-lg>ul li:first-child,.menu-md>ul li:first-child,.menu-sm>ul li:first-child {
- border: 0;
- }
- .menu-lg>ul li.on,.menu-md>ul li.on,.menu-sm>ul li.on {
- color: #0082ff;
- font-weight: 500;
- }
- .btn>ul {
- position: absolute;
- box-sizing: border-box;
- overflow: auto;
- border: 1px solid #d0d2d7;
- background: #fff;
- max-height: 110px;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- box-shadow: 5px 5px 5px #838794;
- padding: 0;
- z-index: 2;
- }
- .btn-alert {
- position: relative;
- box-sizing: border-box;
- padding: 15px 20px;
- word-break: break-all;
- transition: background .2s;
- animation-duration: .5s;
- }
- .btn-alert.error.action-btn {
- background: #fcecef;
- border: 1px solid #f7cad2;
- transition: background .2s;
- }
- .btn-alert.error {
- background: #e34360;
- border-right: 1px solid #e8657d;
- border-bottom: 1px solid #e8657d;
- color: #fff;
- transition: background .2s;
- }
- .btn-alert.error.action-btn:hover {
- background: #f7cad2;
- cursor: pointer;
- }
- .btn-alert.guide {
- background: #3a9fff;
- border-right: 1px solid #74bbff;
- border-bottom: 1px solid #74bbff;
- color: #fff;
- transition: background .2s;
- }
- .btn-alert.guide.action-btn {
- background: #e7f3ff;
- border: 1px solid #aed7ff;
- transition: background .2s;
- }
- .btn-alert.guide.action-btn:hover {
- background: #cbe5ff;
- cursor: pointer;
- }
- .btn-airpage-sms {
- position: relative;
- width: 300px;
- height: 60px;
- line-height: 60px;
- text-align: center;
- border-radius: 3px;
- background: rgba(45, 45, 60, .3);
- transition: background .2s;
- z-index: 1;
- }
- .btn-airpage-sms:hover {
- background: rgba(45, 45, 60, .5);
- }
- .btn-toggle-bg {
- background: #f7f8fa;
- height: 30px;
- border-radius: 15px;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- }
- .btn-toggle-group {
- position: relative;
- top: -30px;
- }
- .btn-toggle-on {
- height: 30px;
- background: #0082ff;
- color: #fff;
- font-size: 13px;
- line-height: 30px;
- text-align: center;
- border-radius: 15px;
- transition: background .2s;
- }
- .btn-toggle-on:hover {
- background: #0874de;
- cursor: pointer;
- }
- .btn-toggle-off {
- height: 30px;
- color: #838794;
- font-size: 13px;
- line-height: 30px;
- text-align: center;
- border-radius: 15px;
- transition: background .2s;
- }
- .btn-toggle-off:hover {
- background: #eff1f5;
- cursor: pointer;
- }
- /* \s */
- .checkbox-label {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- line-height: 17px;
- color: #2d2d3c;
- }
- .checkbox:checked + .checkbox-label {
- color: #0082ff;
- }
- .radio-label {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- }
- /* typography old */
- .xhg {
- font-size: 25px;
- font-weight: 300;
- }
- .hg {
- font-size: 23px;
- font-weight: 500;
- }
- .lg {
- font-size: 16px;
- font-weight: normal;
- }
- .md {
- font-size: 14.5px;
- font-weight: 500;
- }
- .sm {
- font-size: 14.5px;
- font-weight: normal;
- }
- .xs12 {
- font-size: 13px;
- }
- .xs11 {
- font-size: 13px;
- }
- .xs {
- font-size: 10px;
- }
- /* typography new */
- .display {
- font-size: 50px;
- font-weight: 400;
- }
- .headline {
- font-size: 36px;
- font-weight: 400;
- }
- .page-title {
- font-size: 28px;
- font-weight: 500;
- }
- .title {
- font-size: 23px;
- font-weight: 500;
- }
- .title.light {
- font-weight: 400;
- }
- .subtitle {
- font-size: 18px;
- font-weight: 400;
- }
- .subtitle.light {
- font-weight: 200;
- }
- .body1 {
- font-size: 14.5px;
- font-weight: 500;
- }
- .body1.light {
- font-weight: 400;
- }
- .body2 {
- font-size: 14.5px;
- font-weight: 400;
- }
- .body2.light {
- font-weight: 200;
- }
- .description {
- font-size: 13px;
- font-weight: 500;
- }
- .description.light {
- font-weight: 200;
- }
- .button {
- font-size: 14px;
- font-weight: 500;
- }
- .button.light {
- font-weight: 300;
- }
- /* typography color */
- .primary {
- color: rgba(0, 0, 0, .87);
- }
- .secondary {
- color: rgba(0, 0, 0, .54);
- }
- .disabled {
- color: rgba(0, 0, 0, .38);
- }
- .accent1 {
- color: #0082ff !important;
- }
- .accent2 {
- color: #00d046 !important;
- }
- .error {
- color: #ff0000;
- }
- .primary.ng {
- color: #fff;
- }
- .secondary.ng {
- color: rgba(255, 255, 255, .7);
- }
- .disabled.ng {
- color: rgba(255, 255, 255, .5);
- }
- .accent1.ng {
- color: #448AFF;
- }
- .accent2.ng {
- color: #61D67F;
- }
- .error.ng {
- color: #e34360;
- }
- /* color */
- .action {
- color: #35BC8A;
- }
- .action-txt {
- color: #34B384;
- }
- .key {
- color: #0082ff !important;
- }
- .black {
- color: #2d2d3c !important;
- }
- .gray {
- color: #666b7b !important;
- }
- .desc {
- color: #969aa5;
- }
- .white {
- color: #fff;
- }
- .d0d2d7 {
- color: #d0d2d7;
- }
- .lightgray {
- color: #a9acb6;
- }
- .invalid {
- color: #ff0000;
- }
- .negative {
- color: #e34360;
- }
- .prev {
- color: #f39b32;
- }
- .bold {
- font-weight: 600;
- }
- .normal {
- font-weight: normal;
- }
- .lighter {
- font-weight: 300;
- }
- .link {
- color: rgba(0, 0, 0, .54);
- transition: color .2s;
- }
- .link:hover {
- color: #2d2d3c;
- cursor: pointer;
- }
- .link-sub {
- color: #969aa5;
- transition: color .2s;
- }
- .link-sub:hover {
- color: #838794;
- cursor: pointer;
- }
- .link-key {
- color: #0082ff;
- transition: color .2s;
- }
- .link-key:hover {
- color: #0874de;
- cursor: pointer;
- }
- .link-white {
- color: rgba(255, 255, 255, .7);
- transition: color .2s;
- }
- .link-white:hover {
- color: rgba(255, 255, 255, 1);
- cursor: pointer;
- }
- .link-copy {
- color: #53596a;
- background: #e3e5e8;
- padding: 3px 8px;
- border-radius: 3px;
- transition: background .2s;
- word-break: break-all;
- }
- .link-copy:hover {
- background: #d0d2d7;
- cursor: copy;
- }
- .ud {
- text-decoration: underline;
- }
- .lh-1em {
- line-height: 1em;
- }
- .lh-20 {
- line-height: 20px;
- }
- .lh-22 {
- line-height: 22px;
- }
- .lh-25 {
- line-height: 25px;
- }
- .lh-30 {
- line-height: 30px;
- }
- .lh-35 {
- line-height: 35px;
- }
- .lh-40 {
- line-height: 40px;
- }
- /* step */
- .step-count,.tip-ic {
- position: absolute;
- left: 30px;
- width: 30px;
- height: 30px;
- border-radius: 100%;
- background: #d0d2d7;
- text-align: center;
- padding-top: 4px;
- box-sizing: border-box;
- font-size: 15px;
- text-align: center;
- color: #fff;
- }
- .step-count.selected {
- background: #0082ff;
- }
- .step-count.completed {
- background: #37bf82;
- }
- .step-title {
- font-size: 17px;
- color: #969aa5;
- }
- .step-title.selected {
- color: #0082ff;
- }
- .step-subtitle {
- font-size: 13px;
- color: #969aa5;
- padding-top: 15px;
- }
- .step-subtitle.selected {
- color: #2d2d3c;
- }
- .step-desc {
- font-size: 12px;
- color: #969aa5;
- padding-top: 5px;
- }
- .copy-label {
- font-size: 11px;
- color: #969aa5;
- }
- /* tip */
- .tip-title {
- color: #969aa5;
- font-size: 16px;
- width: 350px;
- }
- .tip-desc {
- color: #a9acb6;
- font-size: 13px;
- padding-top: 5px;
- width: 350px;
- }
- .tip-desc:first-child {
- padding-top: 5px;
- }
- /* margin, padding */
- .mt5 {
- margin-top: 5px;
- }
- .mt7 {
- margin-top: 7px;
- }
- .mt10 {
- margin-top: 10px;
- }
- .mt15 {
- margin-top: 15px;
- }
- .mt20 {
- margin-top: 20px;
- }
- .mt30 {
- margin-top: 30px;
- }
- .mt40 {
- margin-top: 40px;
- }
- .mt60 {
- margin-top: 60px;
- }
- .mb5 {
- margin-bottom: 5px;
- }
- .mb7 {
- margin-bottom: 7px;
- }
- .mb10 {
- margin-bottom: 10px;
- }
- .mb15 {
- margin-bottom: 15px;
- }
- .mb20 {
- margin-bottom: 20px;
- }
- .mb30 {
- margin-bottom: 30px;
- }
- .ml2 {
- margin-left: 2px;
- }
- .ml3 {
- margin-left: 3px;
- }
- .ml5 {
- margin-left: 5px;
- }
- .ml10 {
- margin-left: 10px;
- }
- .ml15 {
- margin-left: 15px;
- }
- .ml20 {
- margin-left: 20px;
- }
- .ml30 {
- margin-left: 30px;
- }
- .mr3 {
- margin-right: 3px;
- }
- .mr5 {
- margin-right: 5px;
- }
- .mr10 {
- margin-right: 10px;
- }
- .mr15 {
- margin-right: 15px;
- }
- .mr20 {
- margin-right: 20px;
- }
- .mr30 {
- margin-right: 30px;
- }
- .pl7 {
- padding-left: 7px;
- }
- .pl10 {
- padding-left: 10px;
- }
- .pl15 {
- padding-left: 15px;
- }
- .pl20 {
- padding-left: 20px;
- }
- .pl25 {
- padding-left: 25px;
- }
- .pl30 {
- padding-left: 30px;
- }
- .pr2 {
- padding-right: 2px;
- }
- .pr5 {
- padding-right: 5px;
- }
- .pr7 {
- padding-right: 7px;
- }
- .pr10 {
- padding-right: 10px;
- }
- .pr15 {
- padding-right: 15px;
- }
- .pr20 {
- padding-right: 20px;
- }
- .pr30 {
- padding-right: 30px;
- }
- .pt5 {
- padding-top: 5px;
- }
- .pt10 {
- padding-top: 10px;
- }
- .pt15 {
- padding-top: 15px;
- }
- .pt20 {
- padding-top: 20px;
- }
- .pt30 {
- padding-top: 30px;
- }
- .pb1 {
- padding-bottom: 1px;
- }
- .pb5 {
- padding-bottom: 5px;
- }
- .pb10 {
- padding-bottom: 10px;
- }
- .pb15 {
- padding-bottom: 15px;
- }
- .pb20 {
- padding-bottom: 20px;
- }
- .pb30 {
- padding-bottom: 30px;
- }
- /* position */
- .top-negative-4 {
- position: relative;
- top: -4px;
- }
- .top-negative-5 {
- position: relative;
- top: -5px;
- }
- .bottom-0 {
- position: relative;
- bottom: 0;
- }
- /* size */
- .width-20 {
- width: 20%;
- }
- .width-30 {
- width: 30%;
- }
- .width-33 {
- width: 33.33333333%;
- }
- .width-40 {
- width: 40%;
- }
- .width-50 {
- width: 50%;
- }
- .width-60 {
- width: 60%;
- }
- .width-70 {
- width: 70%;
- }
- .width-100 {
- width: 100%;
- }
- .height-70 {
- height: 70%;
- }
- .height-80 {
- height: 80%;
- }
- .height-100 {
- height: 100%;
- }
- /* card */
- .card {
- position: relative;
- padding: 15px;
- box-sizing: border-box;
- background-color: #fff;
- }
- .card-btn-ic {
- position: absolute;
- top: 15px;
- right: 15px;
- z-index: 2;
- }
- @media (min-width: 992px) {
- .card.summary-wrap {
- height: 271px;
- }
- .card.summary-wrap-2 {
- height: 202px;
- }
- }
- @media (min-width: 1200px) {
- .card.summary-wrap, .card.summary-wrap-2 {
- height: 200px;
- }
- }
- .card.summary-1depth {
- height: 127px;
- }
- .card.channel {
- height: 58px;
- line-height: 28px;
- }
- .card-dimmed {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(255, 255, 255, .7);
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- z-index: 1;
- }
- .card-sm {
- position: relative;
- padding: 15px 30px;
- background-color: #fff;
- }
- .card-xs {
- position: relative;
- padding: 10px 30px;
- background-color: #fff;
- }
- .card>p {
- margin: 0;
- }
- .card-1depth {
- position: relative;
- padding: 30px;
- box-sizing: border-box;
- border: 1px solid #e3e5e8;
- border-radius: 3px;
- }
- .card-filter {
- position: relative;
- width: 100%;
- padding: 0px 20px;
- font-size: 0;
- background: #f7f8fa;
- box-sizing: border-box;
- }
- .card-filter-label {
- position: relative;
- padding: 5px 10px;
- color: #a9acb6;
- font-size: 12px;
- border-bottom: 2px solid #eff1f5;
- transition: color, border-bottom .2s;
- box-sizing: border-box;
- }
- .card-filter-label:hover {
- color: #53596a;
- border-bottom: 2px solid #d0d2d7;
- cursor: pointer;
- }
- .card-filter-label.on {
- color: #0082ff;
- font-weight: 500;
- border-bottom: 2px solid #0082ff;
- }
- /* table */
- tbody.stats {
- background: #fff;
- }
- table.stats {
- border: 1px solid #e3e5e8;
- border-collapse: collapse;
- }
- table.stats th {
- border: 1px solid #e3e5e8;
- border-collapse: collapse;
- padding: 5px 10px;
- text-align: left;
- }
- table.stats td {
- border: 1px solid #e3e5e8;
- border-collapse: collapse;
- padding: 5px 10px;
- text-align: left;
- }
- table.stats td>p {
- margin: 0;
- }
- table.stats tr,table.stats tr.view {
- background: #fff;
- transition: background .2s;
- }
- table.stats tr:hover {
- background: rgba(0, 130, 255, .01);
- cursor: pointer;
- }
- table.stats tr.view:hover {
- cursor: default;
- background: #fff;
- }
- .col-label {
- font-size: 13px;
- font-weight: 500;
- color: #2d2d3c;
- background: #f7f8fa;
- min-width: 70px;
- word-break: keep-all;
- }
- .col-label:hover {
- cursor: default;
- }
- .col-label.invalid.sort,.col-label.invalid {
- font-size: 13px;
- font-weight: 500;
- color: #a9acb6;
- background: rgba(208, 210, 215, .3);
- }
- .col-label.sort.on {
- background: #eff1f5;
- }
- .col-label.sort {
- font-size: 13px;
- color: #2d2d3c;
- background: #f7f8fa;
- transition: background .2s;
- }
- .col-label.sort:hover {
- background: #e3e5e8;
- cursor: pointer;
- }
- .col-label.min-width-170 {
- min-width: 170px;
- }
- .col-label.min-width-100 {
- min-width: 100px;
- }
- .cel {
- min-width: 70px;
- font-size: 14.5px;
- color: #2d2d3c;
- text-align: right !important;
- word-break: keep-all;
- vertical-align: top;
- }
- .cel.invalid {
- font-size: 14.5px;
- color: #a9acb6;
- background: rgba(208, 210, 215, .3);
- cursor: not-allowed;
- }
- .cel.on {
- background: rgba(208, 210, 215, .15);
- font-weight: 400;
- }
- .cel-txt {
- font-size: 14.5px;
- color: #838794;
- min-width: 70px;
- word-break: keep-all;
- }
- .cel-txt-key {
- font-size: 14.5px;
- color: #0874de;
- min-width: 70px;
- word-break: keep-all;
- }
- .cel-txt.on,.cel-txt-key.on {
- background: rgba(208, 210, 215, .15);
- }
- .cel-txt-sub {
- font-size: 13px;
- color: #a9acb6;
- padding-top: 3px;
- }
- .cel-device {
- color: #a9acb6;
- padding: 5px 0;
- border-top: 1px solid rgba(0, 0, 0, .06);
- }
- .cel-device:first-child {
- margin-top: 5px;
- }
- .cel-channel-img {
- width: 13px;
- height: 13px;
- position: relative;
- top: 1px;
- border-radius: 3px;
- margin-right: 5px;
- }
- tbody.compare-table {
- background: 0;
- }
- table.compare-table {
- width: 100%;
- border: 0;
- padding: 10px 15px;
- text-align: left;
- border-collapse: collapse;
- }
- table.compare-table.device {
- padding: 0;
- }
- table.compare-table th {
- border-bottom: 1px solid #e3e5e8;
- border-collapse: collapse;
- font-weight: normal;
- padding: 10px 15px;
- text-align: left;
- border: 1px solid #e3e5e8;
- border-width: 1px 0 1px 0;
- }
- table.compare-table td {
- padding: 10px 15px;
- text-align: left;
- border-collapse: collapse;
- border: 1px solid #e3e5e8;
- border-width: 1px 0 1px 0;
- }
- table.compare-table.device td {
- padding: 7px 5px 0;
- min-width: 50px;
- font-size: 10px;
- line-height: 1.3em;
- border-bottom: 0;
- border-top: 1px solid rgba(0, 0, 0, .06);
- }
- table.compare-table tr {
- border: 1px solid #e3e5e8;
- border-width: 0 0 1px 0;
- font-weight: normal;
- transition: background .2s;
- }
- table.compare-table.device tr {
- background: none;
- border-bottom: 0;
- }
- table.compare-table tr.on {
- background: rgba(0, 130, 255, .07);
- }
- table.compare-table.xs td {
- padding: 2px 0px;
- border: 1px solid #e3e5e8;
- border-width: 1px 0 1px 0;
- }
- table.compare-table.xs tr {
- background: none;
- }
- table.bz.summary,table.bz.device {
- width: 100%;
- }
- table.bz th,table.bz td {
- padding: 5px 15px;
- font-size: 13px;
- box-sizing: border-box;
- word-break: break-all;
- vertical-align: top;
- line-height: 1.5em;
- }
- table.bz.device th {
- font-size: 15px;
- color: #d0d2d7;
- }
- table.bz.device td {
- font-size: 13px;
- color: #a9acb6;
- }
- table.bz th {
- color: #a9acb6;
- text-align: left;
- font-weight: normal;
- vertical-align: top;
- }
- table.bz.simplelink-detail th {
- min-width: 80px;
- }
- table.bz.summary th {
- width: 50%;
- }
- table.bz.device.all th {
- width: 33.33333333%;
- }
- table.bz.device.mobile th {
- width: 50%;
- }
- table.bz td {
- color: #666b7b;
- max-width: 350px;
- }
- .url {
- cursor: copy;
- font-size: 10px !important;
- word-break: break-all;
- line-height: 1.3em !important;
- }
- /* modal */
- .modal {
- display: none;
- position: fixed;
- z-index: 1000;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(45, 45, 60, .7);
- text-align: initial;
- }
- .modal-content {
- margin-left: calc(50% - 260px);
- margin-top: 170px;
- min-width: 490px;
- max-width: 710px;
- animation-duration: .2s;
- }
- .modal-content-xs {
- margin: 5% auto;
- width: 490px;
- animation-duration: .2s;
- }
- .modal-header {
- position: relative;
- top: 0;
- left: 0;
- background: #fff;
- padding: 20px;
- box-sizing: border-box;
- border-bottom: 1px solid rgba(0, 0, 0, .04);
- }
- .modal-action {
- position: relative;
- bottom: 0;
- left: 0;
- background: #fff;
- border-top: 1px solid rgba(0, 0, 0, .04);
- padding: 20px;
- box-sizing: border-box;
- }
- .modal-close-btn {
- color: rgba(255, 255, 255, .7);
- text-align: center;
- font-size: 30px;
- transition: color .2s;
- }
- .modal-close-btn:hover {
- color: rgba(255, 255, 255, .9);
- cursor: pointer;
- }
- /* popover Layer */
- .popover-layer-right {
- top: 100%;
- right: 0;
- background-color: #eff1f5;
- box-shadow: 5px 5px 5px #838794;
- padding: 10px;
- position: absolute;
- z-index: 1;
- }
- .popover-layer-left {
- top: 100%;
- left: 0;
- background-color: #eff1f5;
- box-shadow: 5px 5px 5px #838794;
- padding: 10px;
- position: absolute;
- z-index: 1;
- }
- /* og-tag-setting */
- .og-tag-setting {
- width: 350px;
- border-radius: 3px;
- border: 1px solid #d0d2d7;
- }
- .og-tag-img {
- width: 350px;
- height: 185px;
- background: #e3e5e8;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- font-size: 30px;
- vertical-align: middle;
- color: #fff;
- padding: 15px;
- position: relative;
- background-size: cover;
- background-position: 50%;
- }
- .og-tag-img>i {
- position: absolute;
- text-align: center;
- line-height: 155px;
- width: 320px;
- }
- .og-tag-text {
- padding: 10px 15px;
- }
- .og-tag-upload {
- width: 130px;
- height: 32px;
- padding: 5px 15px;
- box-sizing: border-box;
- border-radius: 30px;
- position: relative;
- background: rgba(255, 255, 255, .7);
- transition: background .2s;
- color: #2d2d3c;
- text-align: left;
- border: 1px solid #d0d2d7;
- outline: none;
- }
- .og-tag-upload.on {
- background: rgba(255, 255, 255, .9);
- }
- .og-tag-upload:hover {
- background: rgba(255, 255, 255, .9);
- cursor: pointer;
- }
- .og-tag-url {
- width: 300px;
- right: 0;
- }
- .og-tag-upload-group {
- position: absolute;
- width: 130px;
- right: 15px;
- bottom: 15px;
- }
- /* snackbar */
- .snackbar {
- position: fixed;
- width: 500px;
- bottom: 0;
- left: 0;
- right: 0;
- margin-left: auto;
- margin-right: auto;
- background: #2d2d3c;
- color: #fff;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- padding: 15px;
- text-align: center;
- box-sizing: border-box;
- z-index: 999;
- }
- /* etc */
- .ib {
- display: inline-block;
- }
- .fl-l {
- float: left;
- }
- .fl-r {
- float: right;
- }
- .bb {
- box-sizing: border-box;
- }
- .el {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .mz {
- margin: 0;
- }
- .ml-z {
- margin-left: 0;
- }
- .mr-z {
- margin-right: 0;
- }
- .v-top {
- vertical-align: top;
- }
- .v-middle {
- vertical-align: middle;
- }
- .v-bottom {
- vertical-align: bottom;
- }
- .border-fff {
- border: 1px solid #fff;
- }
- .border-bottom {
- border-bottom: 1px solid rgba(0, 0, 0, .04);
- }
- .border-top {
- border-top: 1px solid rgba(0, 0, 0, .04);
- }
- .border-right {
- border-right: 1px solid rgba(0, 0, 0, .04);
- }
- .border-left {
- border-left: 1px solid rgba(0, 0, 0, .04);
- }
- .center {
- text-align: center !important;
- }
- .right {
- text-align: right !important;
- }
- .left {
- text-align: left !important;
- }
- .vertical-horizontal-center {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .copy:hover {
- cursor: copy;
- }
- .bg-white {
- background: #fff;
- }
- .bg-f7f8fa {
- background: #f7f8fa;
- }
- .bg-eff1f5 {
- background: #eff1f5;
- }
- .bg-e3e5e8 {
- background: #e3e5e8;
- }
- .bg-838794 {
- background: #838794;
- }
- .bg-key {
- background: #0082ff;
- }
- .pd-z {
- padding: 0;
- }
- .mt-z {
- margin-top: 0 !important;
- }
- .mb-z {
- margin-bottom: 0 !important;
- }
- .pt-z {
- padding-top: 0;
- }
- .br-z {
- border-right: 0;
- }
- .btlr-z {
- border-top-left-radius: 0 !important;
- }
- a {
- text-decoration: none;
- }
- .ic_login-w-google {
- position: relative;
- top: 3px;
- }
- .pd {
- padding: 15px;
- }
- .pd-sm {
- padding: 15px 20px;
- }
- .pd-md {
- padding: 30px;
- }
- .pd-lg {
- padding: 40px;
- }
- .bar {
- color: #e3e5e8;
- padding: 0 3px;
- }
- .code {
- background: #eff1f5;
- padding: 0px 3px;
- color: #c43d5b;
- font-size: 12px;
- border-radius: 3px;
- }
- .overflow-auto {
- overflow: auto;
- }
- .font-z {
- font-size: 0 !important;
- }
- .display-block {
- display: block;
- }
- .display-none {
- display: none;
- }
- .m-auto {
- margin-left: auto;
- margin-right: auto;
- }
- .word-break {
- word-break: break-all;
- }
- .vertical-line {
- width: 1px;
- background: linear-gradient(#d0d2d7, #f7f8fa);
- }
- .bullet {
- width: 3px;
- height: 3px;
- border-radius: 100%;
- background: #838794;
- position: relative;
- bottom: 3px;
- margin-right: 5px;
- }
- .width-200px {
- width: 200px;
- }
- .border-0 {
- border: 0 !important;
- }
- .ic-right {
- padding-right: 5px;
- }
- .ic-left {
- padding-left: 5px;
- }
- .view-row {
- width: 109px;
- }
- /* description */
- .description-right {
- background: #fff;
- border: 2px solid #000;
- position: absolute;
- right: -110%;
- width: 300px;
- padding: 10px;
- font-size: 11px;
- }
- /* sidebar */
- .d-sidebar {
- width: 200px;
- height: 100%;
- font-weight: 300;
- position: fixed;
- background-color: #2d2d3c;
- top: 0;
- left: 0;
- z-index: 51;
- box-sizing: border-box;
- }
- .d-sidebar-logo {
- position: relative;
- background: #2d2d3c;
- width: 200px;
- height: 60px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
- box-sizing: border-box;
- }
- .d-sidebar-logo-img:hover {
- cursor: pointer;
- opacity: .7;
- }
- .d-sidebar-logo-img {
- transition: opacity .2s;
- position: relative;
- width: 150px;
- padding: 21px 20px 19px 20px;
- box-sizing: border-box;
- }
- .d-app {
- position: relative;
- width: 200px;
- height: 150px;
- box-sizing: border-box;
- padding: 40px 15px 20px;
- transition: background .2s;
- }
- .d-app:hover {
- cursor: pointer;
- }
- .d-app-logo {
- box-sizing: border-box;
- position: relative;
- z-index: 2;
- width: 60px;
- height: 60px;
- border-radius: 20%;
- border: 2px solid rgba(255, 255, 255, .06);
- }
- .d-app-account {
- padding: 15px;
- font-size: 12px;
- display: inline-block;
- font-weight: 300;
- color: rgba(255, 255, 255, .6);
- position: absolute;
- transition: color .2s;
- top: 0;
- left: 0;
- }
- .d-app-account:hover {
- color: rgba(255, 255, 255, 1);
- cursor: pointer;
- }
- .d-app-list {
- position: absolute;
- top: 0;
- right: 0;
- padding: 15px;
- color: rgba(255, 255, 255, .6);
- font-size: 20px;
- line-height: 20px;
- text-align: center;
- transition: color .2s;
- }
- .d-app-list:hover {
- color: rgba(255, 255, 255, 1);
- cursor: pointer;
- }
- .d-sidebar-menu-group {
- overflow: auto;
- }
- .d-sidebar-menu-category {
- padding: 15px 0;
- color: rgba(255, 255, 255, .3);
- font-size: 12px;
- }
- .d-sidebar-menu-category:first-child {
- padding-top: 30px;
- }
- .d-sidebar-menu-category-txt {
- font-size: 11px;
- color: rgba(255, 255, 255, .3);
- padding: 5px 15px;
- box-sizing: border-box;
- }
- .d-sidebar-menu {
- padding: 10px 15px;
- box-sizing: border-box;
- font-size: 14px;
- color: rgba(255, 255, 255, .7);
- cursor: pointer;
- }
- .d-sidebar-menu.on,.d-sidebar-menu.on .d-sidebar-menu-ic,.d-sidebar-menu.on .d-sidebar-menu-ic.right,.d-sidebar-menu.on:hover {
- background: #0082ff;
- color: #fff;
- }
- .d-sidebar-menu.guide {
- font-size: 11px;
- color: rgba(255, 255, 255, .4);
- }
- .d-sidebar-menu.guide:hover:before {
- content: "\f08e";
- float: right;
- }
- .d-sidebar-menu:hover {
- background: rgba(255, 255, 255, .06);
- }
- .d-sidebar-menu-ic {
- font-size: 15px;
- width: 15px;
- text-align: center;
- padding-right: 13px;
- color: rgba(255, 255, 255, .2);
- }
- .d-sidebar-menu-ic.right {
- float: right;
- position: relative;
- top: 5px;
- font-size: 10px;
- color: #0082ff;
- right: -10px;
- }
- .d-app-list-layer {
- width: 150px;
- height: 100%;
- box-sizing: border-box;
- padding: 30px 15px;
- position: fixed;
- background-color: #43435A;
- color: #fff;
- font-weight: 300;
- top: 0;
- left: 200px;
- z-index: 48;
- box-sizing: border-box;
- text-align: center;
- }
- .d-app-list-item,.d-app-list-item.add {
- width: 100%;
- box-sizing: border-box;
- padding: 15px;
- transition: background .2s;
- border-radius: 3px;
- cursor: pointer;
- font-size: 14.5px;
- }
- .d-app-list-item-add {
- position: relative;
- box-sizing: border-box;
- padding: 10px 15px;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- outline: none;
- word-break: break-all;
- background: rgba(255, 255, 255, .1);
- font-size: 30px;
- color: rgba(255, 255, 255, .6);
- }
- .d-app-list-item:hover {
- background: rgba(255, 255, 255, .1);
- }
- .d-app-list-item-add {
- cursor: pointer;
- background: rgba(255, 255, 255, .1);
- }
- .d-app-list-item-add:hover {
- background: rgba(255, 255, 255, .2);
- }
- /* GNB */
- .d-gnb {
- width: 100%;
- height: 60px;
- font-weight: 300;
- background: #2d2d3c;
- box-sizing: border-box;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 49;
- min-width: 768px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
- }
- .d-gnb-profile {
- position: relative;
- height: 60px;
- box-sizing: border-box;
- padding: 13px 15px;
- transition: background .2s;
- border-left: 1px solid rgba(255, 255, 255, .1);
- }
- .d-gnb-profile-txt {
- width: 150px;
- font-size: 13px;
- color: #fff;
- }
- .d-gnb-profile:hover {
- cursor: pointer;
- background: rgba(255, 255, 255, .1);
- }
- .d-gnb-profile-img {
- width: 35px;
- height: 35px;
- border-radius: 100%;
- box-sizing: border-box;
- border: 1px solid rgba(0, 0, 0, .04);
- }
- .d-gnb-profile-menu {
- position: relative;
- min-width: 140px;
- }
- .d-gnb-profile-menu-ic {
- width: 25px;
- }
- .d-gnb-guide {
- cursor: pointer;
- color: rgba(255, 255, 255, .7);
- transition: color .2s;
- }
- .d-gnb-guide:hover {
- color: rgba(255, 255, 255, 1);
- }
- /* lnb */
- .d-lnb {
- padding: 15px;
- box-sizing: border-box;
- }
- @media (min-width: 320px) {
- .d-lnb {
- width: 568px;
- }
- }
- @media (min-width: 768px) {
- .d-lnb {
- width: 100%;
- }
- }
- @media (min-width: 992px) {
- .d-lnb {
- width: 100%;
- }
- }
- @media (min-width: 1200px) {
- .d-lnb {
- width: 100%;
- }
- }
- .page-breadcrumbs {
- font-size: 12px;
- color: #a9acb6;
- margin-bottom: 15px;
- }
- .page-title {
- font-size: 23px;
- color: #2d2d3c;
- }
- .page-desc {
- font-size: 13px;
- color: #a9acb6;
- margin-top: 15px;
- line-height: 1.5em;
- }
- /* footer */
- .d-footer {
- width: 100%;
- box-sizing: border-box;
- padding: 15px 15px 15px 215px;
- border-top: 1px solid #e3e5e8;
- font-size: 0;
- }
- @media (min-width: 320px) {
- .m-left {
- text-align: left;
- }
- }
- @media (min-width: 992px) {
- .m-left {
- text-align: right;
- }
- }
- .og-tag-upload input#input-file {
- position: absolute;
- left: 0px;
- width: 130px;
- font-size: 20px;
- cursor: pointer;
- /* good browser */
- opacity: 0;
- /* IE 5-7 */
- filter: alpha(opacity=0);
- /* IE 8 */
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- /* Netscape */
- -moz-opacity: 0;
- /* Safari 1.x */
- -khtml-opacity: 0;
- }
- /* app setting */
- .app-setting>ul {
- /* position: absolute; */
- box-sizing: border-box;
- overflow: auto;
- border: 1px solid #d0d2d7;
- background: #fff;
- max-height: 195px;
- box-shadow: 5px 5px 5px #838794;
- padding: 0;
- z-index: 2;
- }
- .app-setting>ul li {
- box-sizing: border-box;
- position: relative;
- width: auto;
- height: 55px;
- padding: 10px;
- line-height: 50px;
- font-size: 15px;
- color: #2d2d3c;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- border-top: 1px solid #e3e5e8;
- transition: background .2s;
- }
- .app-setting>ul li:hover {
- background: #eff1f5;
- cursor: pointer;
- }
- .app-setting>ul li:first-child {
- border: 0;
- }
- .app-setting-app-img {
- width: 35px;
- height: 35px;
- border: 1px solid #e3e5e8;
- border-radius: 3px;
- }
- .app-setting-app-label {
- width: 330px;
- line-height: 35px;
- }
- .app-setting-app-selected {
- float: right;
- line-height: 19px;
- text-align: right;
- }
- .app-setting-third-party-logo {
- height: 12px;
- }
- .app-setting-third-party-status {
- width: 100px;
- float: right;
- line-height: 19px;
- text-align: right;
- }
- .app-setting-premium-business {
- background: #f7f8fa;
- height: 260px;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- padding: 20px;
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- color: #37bf8e;
- }
- .app-setting-premium-first {
- background: #f7f8fa;
- height: 260px;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- padding: 20px;
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- color: #0082ff;
- }
- .app-setting-premium-business.on {
- background: #fff;
- border: 1px solid #37bf8e;
- box-shadow: 0 0 0 1px #37bf8e;
- }
- .app-setting-premium-first.on {
- background: #fff;
- border: 1px solid #0082ff;
- box-shadow: 0 0 0 1px #0082ff;
- }
- .app-setting-premium-market-business {
- width: 3px;
- height: 50px;
- border-top: 50px solid #37bf8e;
- border-left: 50px solid transparent;
- position: absolute;
- top: 0;
- right: 14px;
- border-radius: 3px;
- }
- .app-setting-premium-marker-first {
- width: 3px;
- height: 50px;
- border-top: 50px solid #0082ff;
- border-left: 50px solid transparent;
- position: absolute;
- top: 0;
- right: 14px;
- border-radius: 3px;
- }
- .app-setting-premium-marker-ic {
- position: absolute;
- top: -43px;
- right: 7px;
- color: #fff;
- }
- /* ad-channel connect */
- .paid-ad {
- height: 95px;
- padding: 30px;
- }
- .paid-ad-logo.off {
- opacity: .7;
- }
- .paid-ad-logo.on {
- opacity: 1;
- }
- .paid-ad-status {
- width: 35px;
- text-align: center;
- float: right;
- }
- /* progress */
- .progress-number {
- width: 20px;
- height: 20px;
- border-radius: 100%;
- font-size: 10px;
- line-height: 20px;
- text-align: center;
- display: inline-block;
- background: #a9acb6;
- color: #fff;
- }
- .progress-number.completed {
- background: #35bc8a;
- }
- .progress-number.selected {
- background: #0082ff;
- }
- .progress-title {
- font-size: 17px;
- color: #2d2d3c;
- font-weight: 500;
- }
- .progress-subtitle.selected {
- color: #0082ff;
- }
- .progress-subtitle {
- font-size: 14px;
- color: #969aa5;
- font-weight: 500;
- }
- .progress-desc.selected {
- color: #2d2d3c;
- }
- .progress-desc {
- font-size: 13px;
- color: #969aa5;
- font-weight: 500;
- }
- .progress-step {
- font-size: 11px;
- color: #969aa5;
- }
- .progress-copy-label {
- font-size: 11px;
- font-weight: 500;
- color: #969aa5;
- }
- /* from developer */
- .loading {
- position: fixed;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- padding-top: 35%;
- background: rgba(239, 241, 245, .9);
- text-align: center;
- color: #a9acb6;
- font-size: 50px;
- z-index: 1000;
- }
- .snackbar {
- cursor: pointer;
- }
- .d-app-list-layer {
- z-index: 50 !important;
- }
- /* trash */
- .btn-tag-negative {
- position: relative;
- top: -2px;
- padding: 0px 3px;
- border: 1px solid #0082ff;
- color: #fff;
- background: #0082ff;
- display: inline-block;
- border-radius: 3px;
- }
- .btn-tag-sub-negative {
- position: relative;
- top: -2px;
- padding: 0px 3px;
- border: 1px solid #969aa5;
- color: #fff;
- background: #969aa5;
- display: inline-block;
- border-radius: 3px;
- }
- .btn-tab:first-child,.btn-tab-lg:first-child {
- border-left: 0;
- }
- .checkbox-sm {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- font-size: 13px;
- line-height: 22px;
- }
- .radio-sm {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- font-size: 13px;
- line-height: 22px;
- }
- /* Rules for sizing the icon. */
- .material-icons {
- vertical-align: middle;
- }
- .material-icons.md-13 {
- font-size: 13px;
- }
- .material-icons.md-18 {
- font-size: 18px;
- }
- .material-icons.md-24 {
- font-size: 24px;
- }
- .material-icons.md-36 {
- font-size: 36px;
- }
- .material-icons.md-48 {
- font-size: 48px;
- }
- .btn-disabled:hover {
- background: rgba(0, 0, 0, .12);
- cursor: not-allowed;
- }
- @charset "UTF-8";
- @import url(//static.airbridge.io/fonts/spoqa/ab_spoqasans.css);
- @import url('https://fonts.googleapis.com/css?family=BioRhyme:200');
- html,body {
- box-sizing: border-box;
- background: #f1f5f5;
- min-width: 768px;
- position: relative;
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- vertical-align: baseline;
- }
- * {
- font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif';
- }
- /* grid */
- .container-mail {
- box-sizing: border-box;
- padding: 10px;
- margin-right: auto;
- margin-left: auto;
- }
- .dashboard-container-set,.dashboard-container-set-w-lnb,.dashboard-container-stats {
- padding: 15px;
- box-sizing: border-box;
- position: relative;
- font-size: 0;
- }
- @media (min-width: 320px) {
- .dashboard-container-set {
- width: 568px;
- }
- .dashboard-container-set-w-lnb {
- width: 710px;
- }
- .dashboard-container-stats {
- width: 568px;
- }
- .container {
- width: 320px;
- }
- .container-mail {
- width: 100%;
- }
- .m-margin-t-10 {
- margin-top: 10px;
- }
- .m-margin-b-10 {
- margin-bottom: 10px;
- }
- .m-center {
- text-align: center;
- }
- }
- @media (min-width: 768px) {
- .dashboard-container-set {
- width: 100%;
- }
- .dashboard-container-set-w-lnb {
- width: 100%;
- min-width: 710px;
- }
- .dashboard-container-stats {
- width: 100%;
- }
- .container {
- width: 100%;
- }
- .container-mail {
- width: 710px;
- }
- .m-margin-t-10 {
- margin-top: 10px;
- }
- .m-margin-b-10 {
- margin-bottom: 10px;
- }
- .m-center {
- text-align: left;
- }
- }
- @media (min-width: 992px) {
- .dashboard-container-set {
- width: 100%;
- }
- .dashboard-container-set-w-lnb {
- width: 100%;
- }
- .dashboard-container-stats {
- width: 100%;
- }
- .container {
- width: 100%;
- }
- .container-mail {
- width: 710px;
- }
- .m-center {
- text-align: left;
- }
- }
- @media (min-width: 1200px) {
- .dashboard-container-set {
- max-width: 1166px;
- width: 100%;
- }
- .dashboard-container-set-w-lnb {
- max-width: 1166px;
- width: 100%;
- }
- .dashboard-container-stats {
- width: 100%;
- }
- .container {
- width: 1366px;
- }
- .container-mail {
- width: 710px;
- }
- .m-center {
- text-align: left;
- }
- }
- .row {
- font-size: 0;
- /*position: relative;*/
- }
- .row-d {
- margin-top: 30px;
- margin-bottom: 30px;
- }
- .row-d-md {
- margin-top: 20px;
- margin-bottom: 20px;
- }
- .row-d-sm {
- margin-top: 10px;
- margin-bottom: 10px;
- }
- .row-d:last-child {
- margin-bottom: 0;
- }
- .col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12 {
- position: relative;
- min-height: 1px;
- margin-right: 15px;
- margin-left: 15px;
- }
- .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
- /* float: left; */
- }
- .col-xs-12 {
- width: 100%;
- }
- .col-xs-11 {
- width: 91.66666667%;
- }
- .col-xs-10 {
- width: 83.33333333%;
- }
- .col-xs-9 {
- width: 75%;
- }
- .col-xs-8 {
- width: 66.66666667%;
- }
- .col-xs-7 {
- width: 58.33333333%;
- }
- .col-xs-6 {
- width: 50%;
- }
- .col-xs-5 {
- width: 41.66666667%;
- }
- .col-xs-4 {
- width: 33.33333333%;
- }
- .col-xs-3 {
- width: 25%;
- }
- .col-xs-2 {
- width: 16.66666667%;
- }
- .col-xs-1 {
- width: 8.33333333%;
- }
- .col-xs-pull-12 {
- right: 100%;
- }
- .col-xs-pull-11 {
- right: 91.66666667%;
- }
- .col-xs-pull-10 {
- right: 83.33333333%;
- }
- .col-xs-pull-9 {
- right: 75%;
- }
- .col-xs-pull-8 {
- right: 66.66666667%;
- }
- .col-xs-pull-7 {
- right: 58.33333333%;
- }
- .col-xs-pull-6 {
- right: 50%;
- }
- .col-xs-pull-5 {
- right: 41.66666667%;
- }
- .col-xs-pull-4 {
- right: 33.33333333%;
- }
- .col-xs-pull-3 {
- right: 25%;
- }
- .col-xs-pull-2 {
- right: 16.66666667%;
- }
- .col-xs-pull-1 {
- right: 8.33333333%;
- }
- .col-xs-pull-0 {
- right: auto;
- }
- .col-xs-push-12 {
- left: 100%;
- }
- .col-xs-push-11 {
- left: 91.66666667%;
- }
- .col-xs-push-10 {
- left: 83.33333333%;
- }
- .col-xs-push-9 {
- left: 75%;
- }
- .col-xs-push-8 {
- left: 66.66666667%;
- }
- .col-xs-push-7 {
- left: 58.33333333%;
- }
- .col-xs-push-6 {
- left: 50%;
- }
- .col-xs-push-5 {
- left: 41.66666667%;
- }
- .col-xs-push-4 {
- left: 33.33333333%;
- }
- .col-xs-push-3 {
- left: 25%;
- }
- .col-xs-push-2 {
- left: 16.66666667%;
- }
- .col-xs-push-1 {
- left: 8.33333333%;
- }
- .col-xs-push-0 {
- left: auto;
- }
- .col-xs-offset-12 {
- margin-left: 100%;
- }
- .col-xs-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-xs-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-xs-offset-9 {
- margin-left: 75%;
- }
- .col-xs-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-xs-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-xs-offset-6 {
- margin-left: 50%;
- }
- .col-xs-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-xs-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-xs-offset-3 {
- margin-left: 25%;
- }
- .col-xs-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-xs-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-xs-offset-0 {
- margin-left: 0;
- }
- @media (min-width: 768px) {
- .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
- /* float: left; */
- }
- .col-sm-12 {
- width: 100%;
- }
- .col-sm-11 {
- width: 91.66666667%;
- }
- .col-sm-10 {
- width: 83.33333333%;
- }
- .col-sm-9 {
- width: 75%;
- }
- .col-sm-8 {
- width: 66.66666667%;
- }
- .col-sm-7 {
- width: 58.33333333%;
- }
- .col-sm-6 {
- width: 50%;
- }
- .col-sm-5 {
- width: 41.66666667%;
- }
- .col-sm-4 {
- width: 33.33333333%;
- }
- .col-sm-3 {
- width: 25%;
- }
- .col-sm-2 {
- width: 16.66666667%;
- }
- .col-sm-1 {
- width: 8.33333333%;
- }
- .col-sm-0 {
- width: 0;
- }
- .col-sm-pull-12 {
- right: 100%;
- }
- .col-sm-pull-11 {
- right: 91.66666667%;
- }
- .col-sm-pull-10 {
- right: 83.33333333%;
- }
- .col-sm-pull-9 {
- right: 75%;
- }
- .col-sm-pull-8 {
- right: 66.66666667%;
- }
- .col-sm-pull-7 {
- right: 58.33333333%;
- }
- .col-sm-pull-6 {
- right: 50%;
- }
- .col-sm-pull-5 {
- right: 41.66666667%;
- }
- .col-sm-pull-4 {
- right: 33.33333333%;
- }
- .col-sm-pull-3 {
- right: 25%;
- }
- .col-sm-pull-2 {
- right: 16.66666667%;
- }
- .col-sm-pull-1 {
- right: 8.33333333%;
- }
- .col-sm-pull-0 {
- right: auto;
- }
- .col-sm-push-12 {
- left: 100%;
- }
- .col-sm-push-11 {
- left: 91.66666667%;
- }
- .col-sm-push-10 {
- left: 83.33333333%;
- }
- .col-sm-push-9 {
- left: 75%;
- }
- .col-sm-push-8 {
- left: 66.66666667%;
- }
- .col-sm-push-7 {
- left: 58.33333333%;
- }
- .col-sm-push-6 {
- left: 50%;
- }
- .col-sm-push-5 {
- left: 41.66666667%;
- }
- .col-sm-push-4 {
- left: 33.33333333%;
- }
- .col-sm-push-3 {
- left: 25%;
- }
- .col-sm-push-2 {
- left: 16.66666667%;
- }
- .col-sm-push-1 {
- left: 8.33333333%;
- }
- .col-sm-push-0 {
- left: auto;
- }
- .col-sm-offset-12 {
- margin-left: 100%;
- }
- .col-sm-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-sm-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-sm-offset-9 {
- margin-left: 75%;
- }
- .col-sm-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-sm-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-sm-offset-6 {
- margin-left: 50%;
- }
- .col-sm-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-sm-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-sm-offset-3 {
- margin-left: 25%;
- }
- .col-sm-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-sm-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-sm-offset-0 {
- margin-left: 0;
- }
- }
- @media (min-width: 992px) {
- .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
- /* float: left; */
- }
- .col-md-12 {
- width: 100%;
- }
- .col-md-11 {
- width: 91.66666667%;
- }
- .col-md-10 {
- width: 83.33333333%;
- }
- .col-md-9 {
- width: 75%;
- }
- .col-md-8 {
- width: 66.66666667%;
- }
- .col-md-7 {
- width: 58.33333333%;
- }
- .col-md-6 {
- width: 50%;
- }
- .col-md-5 {
- width: 41.66666667%;
- }
- .col-md-4 {
- width: 33.33333333%;
- }
- .col-md-3 {
- width: 25%;
- }
- .col-md-2 {
- width: 16.66666667%;
- }
- .col-md-1 {
- width: 8.33333333%;
- }
- .col-md-0 {
- width: 0;
- }
- .col-md-pull-12 {
- right: 100%;
- }
- .col-md-pull-11 {
- right: 91.66666667%;
- }
- .col-md-pull-10 {
- right: 83.33333333%;
- }
- .col-md-pull-9 {
- right: 75%;
- }
- .col-md-pull-8 {
- right: 66.66666667%;
- }
- .col-md-pull-7 {
- right: 58.33333333%;
- }
- .col-md-pull-6 {
- right: 50%;
- }
- .col-md-pull-5 {
- right: 41.66666667%;
- }
- .col-md-pull-4 {
- right: 33.33333333%;
- }
- .col-md-pull-3 {
- right: 25%;
- }
- .col-md-pull-2 {
- right: 16.66666667%;
- }
- .col-md-pull-1 {
- right: 8.33333333%;
- }
- .col-md-pull-0 {
- right: auto;
- }
- .col-md-push-12 {
- left: 100%;
- }
- .col-md-push-11 {
- left: 91.66666667%;
- }
- .col-md-push-10 {
- left: 83.33333333%;
- }
- .col-md-push-9 {
- left: 75%;
- }
- .col-md-push-8 {
- left: 66.66666667%;
- }
- .col-md-push-7 {
- left: 58.33333333%;
- }
- .col-md-push-6 {
- left: 50%;
- }
- .col-md-push-5 {
- left: 41.66666667%;
- }
- .col-md-push-4 {
- left: 33.33333333%;
- }
- .col-md-push-3 {
- left: 25%;
- }
- .col-md-push-2 {
- left: 16.66666667%;
- }
- .col-md-push-1 {
- left: 8.33333333%;
- }
- .col-md-push-0 {
- left: auto;
- }
- .col-md-offset-12 {
- margin-left: 100%;
- }
- .col-md-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-md-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-md-offset-9 {
- margin-left: 75%;
- }
- .col-md-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-md-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-md-offset-6 {
- margin-left: 50%;
- }
- .col-md-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-md-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-md-offset-3 {
- margin-left: 25%;
- }
- .col-md-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-md-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-md-offset-0 {
- margin-left: 0;
- }
- }
- @media (min-width: 1200px) {
- .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
- /* float: left; */
- }
- .col-lg-12 {
- width: 100%;
- }
- .col-lg-11 {
- width: 91.66666667%;
- }
- .col-lg-10 {
- width: 83.33333333%;
- }
- .col-lg-9 {
- width: 75%;
- }
- .col-lg-8 {
- width: 66.66666667%;
- }
- .col-lg-7 {
- width: 58.33333333%;
- }
- .col-lg-6 {
- width: 50%;
- }
- .col-lg-5 {
- width: 41.66666667%;
- }
- .col-lg-4 {
- width: 33.33333333%;
- }
- .col-lg-3 {
- width: 25%;
- }
- .col-lg-2 {
- width: 16.66666667%;
- }
- .col-lg-1 {
- width: 8.33333333%;
- }
- .col-lg-0 {
- width: 0;
- }
- .col-lg-pull-12 {
- right: 100%;
- }
- .col-lg-pull-11 {
- right: 91.66666667%;
- }
- .col-lg-pull-10 {
- right: 83.33333333%;
- }
- .col-lg-pull-9 {
- right: 75%;
- }
- .col-lg-pull-8 {
- right: 66.66666667%;
- }
- .col-lg-pull-7 {
- right: 58.33333333%;
- }
- .col-lg-pull-6 {
- right: 50%;
- }
- .col-lg-pull-5 {
- right: 41.66666667%;
- }
- .col-lg-pull-4 {
- right: 33.33333333%;
- }
- .col-lg-pull-3 {
- right: 25%;
- }
- .col-lg-pull-2 {
- right: 16.66666667%;
- }
- .col-lg-pull-1 {
- right: 8.33333333%;
- }
- .col-lg-pull-0 {
- right: auto;
- }
- .col-lg-push-12 {
- left: 100%;
- }
- .col-lg-push-11 {
- left: 91.66666667%;
- }
- .col-lg-push-10 {
- left: 83.33333333%;
- }
- .col-lg-push-9 {
- left: 75%;
- }
- .col-lg-push-8 {
- left: 66.66666667%;
- }
- .col-lg-push-7 {
- left: 58.33333333%;
- }
- .col-lg-push-6 {
- left: 50%;
- }
- .col-lg-push-5 {
- left: 41.66666667%;
- }
- .col-lg-push-4 {
- left: 33.33333333%;
- }
- .col-lg-push-3 {
- left: 25%;
- }
- .col-lg-push-2 {
- left: 16.66666667%;
- }
- .col-lg-push-1 {
- left: 8.33333333%;
- }
- .col-lg-push-0 {
- left: auto;
- }
- .col-lg-offset-12 {
- margin-left: 100%;
- }
- .col-lg-offset-11 {
- margin-left: 91.66666667%;
- }
- .col-lg-offset-10 {
- margin-left: 83.33333333%;
- }
- .col-lg-offset-9 {
- margin-left: 75%;
- }
- .col-lg-offset-8 {
- margin-left: 66.66666667%;
- }
- .col-lg-offset-7 {
- margin-left: 58.33333333%;
- }
- .col-lg-offset-6 {
- margin-left: 50%;
- }
- .col-lg-offset-5 {
- margin-left: 41.66666667%;
- }
- .col-lg-offset-4 {
- margin-left: 33.33333333%;
- }
- .col-lg-offset-3 {
- margin-left: 25%;
- }
- .col-lg-offset-2 {
- margin-left: 16.66666667%;
- }
- .col-lg-offset-1 {
- margin-left: 8.33333333%;
- }
- .col-lg-offset-0 {
- margin-left: 0;
- }
- }
- /* buttons */
- .btn.border {
- border: 1px solid #e3e5e8;
- border-radius: 3px;
- }
- .btn.md,.input.lg,.menu-wrapper.lg {
- max-width: 600px;
- }
- .btn.md,.input.md,.menu-wrapper.md {
- max-width: 400px;
- }
- .addtrackinglink {
- width: 320px;
- }
- .btn.sm,.input.sm {
- max-width: 200px;
- }
- .btn-lg {
- position: relative;
- box-sizing: border-box;
- padding: 17px 20px 15px;
- border-radius: 3px;
- transition: background, box-shadow .2s;
- border: 0;
- outline: none;
- word-break: break-all;
- }
- .btn-xs {
- position: relative;
- box-sizing: border-box;
- padding: 7px 10px 5px;
- border-radius: 3px;
- transition: background, box-shadow .2s;
- outline: none;
- word-break: break-all;
- }
- .btn-xxs {
- position: relative;
- box-sizing: border-box;
- padding: 0px 5px;
- border-radius: 3px;
- transition: background, box-shadow .2s;
- outline: none;
- word-break: break-all;
- }
- .btn-sub.fff {
- background: #fff;
- }
- .btn-sub-gray {
- background: #eff1f5;
- color: #878d91;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- }
- .btn-sub-fff {
- background: #fff;
- color: #878d91;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- }
- .btn-sub-gray:hover,.btn-sub-fff:hover {
- background: #e3e5e8;
- cursor: pointer;
- }
- .btn-sub-fff.selected {
- border: 2px solid #66b5ff;
- }
- .btn-gray {
- border-radius: 3px;
- background: #838794;
- color: #fff;
- font-weight: 300 !important;
- }
- .btn-gray:hover {
- background: #666b77;
- cursor: pointer;
- }
- .btn-1depth:hover {
- background: #e3e5e8;
- cursor: pointer;
- }
- .btn-premium {
- cursor: pointer;
- background: #e7f3ff;
- color: #0082ff;
- border: 0;
- transition: background .2s;
- }
- .btn-premium:hover {
- background: #cbe5ff;
- }
- .btn-added {
- padding: 10px 15px;
- border-radius: 30px;
- background: #e7f3ff;
- color: #0874de;
- display: inline-block;
- }
- .btn-added.invalid {
- background: #fcecef;
- }
- .btn-tag {
- position: relative;
- top: -2px;
- padding: 1px 3px;
- color: #fff;
- background: #0082ff;
- border-radius: 3px;
- display: inline-block;
- }
- .btn-tag-action,.btn-tag-key {
- position: relative;
- line-height: 1em;
- font-weight: 500;
- display: inline-block;
- z-index: 2;
- padding: 2px 3px;
- border-radius: 3px;
- }
- .btn-tag-key {
- top: -1px;
- color: #0082ff;
- }
- .btn-tag-action {
- top: -1px;
- color: #35BC8A;
- }
- .btn-tag-sub {
- position: relative;
- top: -1px;
- padding: 2px 3px;
- line-height: 1em;
- color: #838794;
- background: #d0d2d7;
- font-weight: 500;
- background: #e3e5e8;
- border-radius: 3px;
- display: inline-block;
- }
- .btn-close {
- cursor: pointer;
- width: 15px;
- background: 0;
- color: #a0acb6;
- transition: color .2s;
- position: relative;
- display: inline-block;
- font-size: 15px;
- }
- .btn-close:hover {
- color: #969aa5;
- }
- .btn-ic {
- cursor: pointer;
- background: 0;
- color: rgba(0,0,0,.38);
- transition: color .2s;
- position: relative;
- display: inline-block;
- margin-left: 2px;
- vertical-align: middle;
- white-space: initial;
- }
- .btn-ic.negative {
- color: #666b7b;
- }
- .btn-ic:hover {
- color: #969aa5;
- }
- .btn-ic:hover .tooltip-left,.btn-ic:hover .tooltip-center,.btn-ic:hover .tooltip-right {
- display: block !important;
- line-height: 1.5em;
- font-weight: 500;
- }
- .btn-ic .tooltip-left {
- width: 200px;
- top: 110%;
- left: 0;
- background-color: #e7f3ff;
- box-shadow: 0px 7px 15px rgba(0, 0, 0, .3);
- color: #2d2d3c;
- font-size: 12px;
- text-align: left;
- padding: 8px 10px;
- position: absolute;
- z-index: 200;
- display: none;
- }
- .btn-ic .tooltip-center {
- width: 200px;
- top: 110%;
- left: -100px;
- background-color: #e7f3ff;
- box-shadow: 0px 7px 15px rgba(0, 0, 0, .3);
- color: #2d2d3c;
- font-size: 12px;
- text-align: left;
- padding: 8px 10px;
- position: absolute;
- z-index: 200;
- display: none;
- }
- .btn-ic .tooltip-right {
- width: 200px;
- top: 100%;
- right: 0;
- background-color: #e7f3ff;
- box-shadow: 0px 7px 15px rgba(0, 0, 0, .3);
- color: #2d2d3c;
- font-size: 12px;
- text-align: left;
- padding: 8px 10px;
- position: absolute;
- z-index: 200;
- display: none;
- }
- .tooltip-center.sm {
- width: 100px;
- left: -55px;
- }
- .btn.selected {
- border: 1px solid #0082ff;
- box-shadow: 0 0 0 1px #0082ff;
- background: #fff;
- color: #0082ff;
- }
- .btn-tab,.btn-tab-lg {
- position: relative;
- background: #f7f8fa;
- color: #2d2d3c;
- transition: background .2s;
- box-sizing: border-box;
- border-left: 1px solid #e3e5e8;
- border-bottom: 1px solid #e3e5e8;
- vertical-align: bottom;
- }
- .btn-tab {
- padding: 10px 15px;
- }
- .btn-tab-lg {
- padding: 15px 20px;
- }
- .btn-tab.on,.btn-tab-lg.on {
- background: #fff;
- color: #0082ff;
- font-size: 17px;
- border-bottom: 1px solid #fff;
- padding: 17px 22px;
- }
- .btn-tab:first-child,.btn-tab-lg:first-child {
- border-left: 0;
- }
- ul.pagination {
- display: inlnie-block;
- padding: 0;
- margin: 0;
- }
- ul.pagination li {
- display: inline;
- }
- ul.pagination li a {
- color: #878d91;
- font-size: 14px;
- font-weight: 400;
- padding: 10px;
- text-decoration: none;
- transition: color .2s;
- }
- ul.pagination li a > i {
- font-size: 18px;
- }
- ul.pagination li a.active {
- color: #0082ff;
- font-weight: 400;
- transition: background .2s;
- }
- .btn-pagination {
- position: relative;
- background: #f7f8fa;
- color: #2d2d3c;
- transition: background .2s;
- box-sizing: border-box;
- padding: 7px 12px;
- border: 1px solid #d0d2d7;
- outline: none;
- border-right: 0;
- }
- .btn-pagination:first-child {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
- .btn-pagination:last-child {
- border-right: 1px solid #d0d2d7;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
- .btn-pagination:first-child {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
- .btn-pagination:last-child {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- border-right: 1px solid #d0d2d7;
- }
- .btn-tab-vertical.on {
- background: #fff;
- color: #2d2d3c;
- font-weight: 500;
- }
- .btn-pagination.on {
- background: #fff;
- font-weight: 500;
- color: #0082ff;
- box-sizing: border-box;
- }
- .btn-tab:hover,.btn-tab-lg:hover,.btn-tab-vertical:hover,.btn-tab-vertical-round:hover,.btn-pagination:hover {
- cursor: pointer;
- background: #eff1f5;
- }
- .btn-tab-vertical {
- position: relative;
- background: #f7f8fa;
- color: #53596a;
- transition: background .2s;
- box-sizing: border-box;
- padding: 10px 15px;
- border-bottom: 1px solid #e3e5e8;
- outline: none;
- }
- .btn-tab-vertical:last-child {
- border-bottom: 0;
- }
- .btn-tab-vertical.on {
- background: #fff;
- color: #2d2d3c;
- font-weight: 500;
- border-bottom: 0;
- }
- .btn-tab-vertical-round {
- position: relative;
- background: #f7f8fa;
- color: #53596a;
- font-size: 14px;
- transition: background .2s;
- box-sizing: border-box;
- padding: 10px 15px;
- border-top: 1px solid rgba(0, 0, 0, .15);
- border-right: 1px solid rgba(0, 0, 0, .15);
- border-left: 1px solid rgba(0, 0, 0, .15);
- outline: none;
- }
- .btn-tab-vertical-round:last-child {
- border-bottom: 1px solid rgba(0, 0, 0, .15);
- }
- .btn-tab-vertical-round.on {
- background: #fff;
- color: #2d2d3c;
- border-right: 0;
- }
- .btn-tab-vertical-round-ic {
- width: 25px;
- }
- /* btn (170104 updated) */
- .btn {
- position: relative;
- padding: 8px 10px;
- font-size: 14px;
- text-align: center;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .btn-action {
- border-radius: 3px;
- background: #6CB970;
- border: 1px solid rgba(0, 0, 0, .12);
- color: #fff;
- font-weight: 300;
- }
- .btn-action:hover {
- background: #59985C;
- cursor: pointer;
- }
- .btn-key {
- border-radius: 3px;
- background: #1E88E5;
- border: 1px solid rgba(0, 0, 0, .12);
- color: #fff;
- font-weight: 300;
- }
- .btn-key:hover {
- background: #1976D2;
- cursor: pointer;
- }
- .btn-sub {
- border-radius: 3px;
- background: #f8fafb;
- border: 1px solid rgba(0, 0, 0, .12);
- color: #6D7174;
- font-weight: 400;
- }
- .btn-sub:hover,.btn-sub:focus {
- background: #eaeeef;
- cursor: pointer;
- }
- .btn-disabled {
- border-radius: 3px;
- background: rgba(0, 0, 0, .12);
- border: 1px solid rgba(0, 0, 0, .05);
- color: #a9afb3;
- font-weight: 500;
- cursor: not-allowed;
- }
- .btn-round {
- border-radius: 50em;
- background: rgba(255, 255, 255, .2);
- border: 1px solid transparent;
- color: #fff;
- font-weight: 300;
- }
- .btn-round:hover {
- background: rgba(0, 0, 0, .12);
- cursor: pointer;
- }
- .btn-border {
- border-radius: 3px;
- border: 1px solid rgba(255,255,255,.3);
- color: #a9afb3;
- font-weight: 300;
- }
- .btn-border:hover {
- background: rgba(0,0,0,.12);
- cursor: pointer;
- }
- .btn-border.round {
- border-radius: 50em;
- }
- .ic-right {
- padding-right: 5px;
- }
- .ic-left {
- padding-left: 5px;
- }
- .btn-block {
- display: block;
- width: 100%;
- }
- .btn-icon {
- position: relative;
- padding: 2px;
- width: 35px;
- height: 35px;
- text-align: center;
- }
- .btn-icon i {
- margin-right: -1px;
- font-size: 18px;
- }
- .btn-key-ic {
- border-radius: 3px;
- background: #1E88E5;
- border: 1px solid rgba(0, 0, 0, .12);
- color: #fff;
- }
- .btn-key-ic:hover {
- background: #1976D2;
- cursor: pointer;
- }
- .btn-sub-ic {
- border-radius: 3px;
- background: #F7F8FA;
- border: 1px solid rgba(0, 0, 0, .12);
- color: rgba(0, 0, 0, .54);
- }
- .btn-sub-ic:hover {
- background: #E3E5E8;
- cursor: pointer;
- }
- .btn-round-ic {
- border-radius: 50em;
- background: rgba(255, 255, 255, .20);
- border: 1px solid transparent;
- color: #fff;
- }
- .btn-round-ic:hover {
- background: rgba(0, 0, 0, .20);
- cursor: pointer;
- }
- .btn-key-flat {
- color: #0082FF;
- font-size: 14px;
- font-weight: 500;
- }
- .btn-key-flat:hover {
- color: #2962ff;
- cursor: pointer;
- }
- .btn-sub-flat {
- color: rgba(0, 0, 0, .38);
- font-size: 14px;
- font-weight: 500;
- }
- .btn-sub-flat:hover {
- color: rgba(0, 0, 0, .54);
- cursor: pointer;
- }
- .btn-sub-flat {
- color: rgba(0, 0, 0, .38);
- font-size: 14px;
- font-weight: 500;
- }
- .btn-sub-flat:hover {
- color: rgba(0, 0, 0, .54);
- cursor: pointer;
- }
- .btn-sub-flat.disabled {
- color: rgba(0, 0, 0, .20) !important;
- font-size: 14px;
- font-weight: 500;
- }
- .btn-sub-flat.disabled:hover {
- cursor: not-allowed;
- }
- .btn-tab-horiz {
- position: relative;
- padding: 15px;
- box-sizing: border-box;
- border: 0;
- background: #f7f8fa;
- color: rgba(0,0,0,.87);
- }
- .btn-tab-horiz.on {
- background: #fff;
- color: #0082ff;
- }
- .btn-tab-horiz:hover {
- background: rgba(0,0,0,.12);
- cursor: pointer;
- }
- .btn-tab-horiz.not-allowed {
- background: #e3e5e8;
- color: #969aa5;
- }
- .btn-tab-horiz.not-allowed:hover {
- cursor: not-allowed;
- }
- /* tab */
- .tab-vertical ul {
- background: #f7f8fa;
- border-radius: 3px;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
- font-size: 14.5px;
- letter-spacing: -0.5px;
- }
- .tab-vertical>ul li {
- color: #a9afb3;
- border-bottom: 1px solid rgba(0, 0, 0, .06);
- position: relative;
- transition: background .2s;
- padding: 10px 15px;
- }
- .tab-vertical>ul li:hover {
- background: #e3e5e8;
- cursor: pointer;
- }
- .tab-vertical>ul li i {
- width: 23px;
- }
- .tab-vertical>ul li.on {
- color: #4d5256;
- background: #fff;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
- z-index: 1;
- }
- .tab-vertical-title {
- font-size: 20px;
- font-weight: 400;
- color: #878d91;
- }
- .tab-vertical-desc {
- font-size: 12px;
- color: #878d91;
- padding-top: 15px;
- }
- .tab-title {
- font-size: 20px;
- font-weight: 400;
- color: #878d91;
- }
- .tab-desc {
- font-size: 12px;
- color: #878d91;
- padding-top: 15px;
- }
- .tab-horizontal {
- background: #e3e5e8;
- font-size: 14px;
- font-weight: 400;
- color: #878d91;
- text-align: center;
- padding: 25px;
- cursor: pointer;
- }
- .tab-horizontal:hover {
- background: #d0d2d7;
- }
- .tab-horizontal.on {
- background: #fff;
- color: #2d2d3c;
- }
- .tab-horizontal.disabled {
- background: rgba(0, 0, 0, .12);
- color: rgba(0, 0, 0, .20) !important;
- cursor: not-allowed;
- }
- .dashboard-set-tab {
- padding: 10px 15px;
- box-sizing: border-box;
- color: #4d5256;
- font-size: 14px;
- font-weight: 400;
- transition: backbground .2s;
- border-radius: 3px;
- vertical-align: top;
- }
- .dashboard-set-tab:hover {
- cursor: pointer;
- background: #eff1f3;
- }
- .dashboard-set-tab.on {
- font-weight: 500;
- color: #0082ff;
- }
- .dashboard-set-tab.disabled {
- padding: 10px 15px;
- box-sizing: border-box;
- color: rgba(0, 0, 0, .3);
- font-size: 14.5px;
- font-weight: 400;
- transition: backbground .2;
- border-radius: 3px;
- }
- .dashboard-set-tab.disabled:hover {
- cursor: not-allowed;
- background: none;
- }
- @media (min-width: 320px),@media (min-width: 768px) {
- .dashboard-set-tab {
- width: 33.33333333%;
- display: inline-block;
- }
- }
- @media (min-width: 992px),@media (min-width: 1200px) {
- .dashboard-set-tab {
- width: 100%;
- display: block;
- }
- }
- .menu-wrapper {
- position: relative;
- }
- .menu-lg>ul {
- position: absolute;
- box-sizing: border-box;
- overflow: auto;
- background: #fff;
- max-height: 300px;
- box-shadow: 0px 0px 15px rgba(0, 0, 0, .3);
- padding: 0;
- z-index: 2;
- text-align: left;
- }
- .menu-md>ul,.menu-sm>ul {
- position: absolute;
- box-sizing: border-box;
- overflow: auto;
- background: #fff;
- width: 100%;
- max-height: 200px;
- box-shadow: 0px 5px 12px rgba(0, 0, 0, .38);
- padding: 0;
- z-index: 2;
- text-align: left;
- }
- .menu-lg>ul li {
- box-sizing: border-box;
- position: relative;
- width: auto;
- height: 55px;
- padding: 10px 15px;
- font-size: 14px;
- font-weight: 400;
- color: #2d2d3c;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- transition: background .2s;
- border-top: 1px solid #e3e5e8;
- }
- .menu-md>ul li,.menu-sm>ul li {
- box-sizing: border-box;
- position: relative;
- width: 100%;
- padding: 8px 10px;
- font-size: 13px;
- font-weight: 400;
- color: #4d5256;
- /*overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;*/
- transition: background .2s;
- }
- .menu-lg>ul li:hover,.menu-md>ul li:hover,.menu-sm>ul li:hover {
- background: #eff1f5;
- cursor: pointer;
- }
- .menu-lg>ul li:first-child,.menu-md>ul li:first-child,.menu-sm>ul li:first-child {
- margin-top: 0px;
- }
- .menu-lg>ul li:last-child,.menu-md>ul li:last-child,.menu-sm>ul li:last-child {
- margin-bottom: 10px;
- }
- .menu-md>ul li.not-found {
- cursor: default;
- overflow: 0;
- white-space: inherit;
- text-overflow: clip;
- position: relative;
- }
- .menu-md>ul li.not-found:hover {
- background: #fff;
- }
- .menu-lg>ul li.on,.menu-md>ul li.on,.menu-sm>ul li.on {
- color: #0082ff;
- font-weight: 500;
- }
- .btn>ul {
- position: absolute;
- box-sizing: border-box;
- overflow: auto;
- border: 1px solid #d0d2d7;
- background: #fff;
- max-height: 110px;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- box-shadow: 5px 5px 5px #838794;
- padding: 0;
- z-index: 2;
- }
- .btn-alert {
- position: relative;
- box-sizing: border-box;
- padding: 15px 20px;
- word-break: break-all;
- transition: background .2s;
- animation-duration: .5s;
- }
- .btn-alert.error.action-btn {
- background: #fcecef;
- border: 1px solid #f7cad2;
- transition: background .2s;
- }
- .btn-alert.error {
- background: #e34360;
- border-right: 1px solid #e8657d;
- border-bottom: 1px solid #e8657d;
- color: #fff;
- transition: background .2s;
- }
- .btn-alert.error.action-btn:hover {
- background: #f7cad2;
- cursor: pointer;
- }
- .btn-alert.guide {
- background: #3a9fff;
- border-right: 1px solid #74bbff;
- border-bottom: 1px solid #74bbff;
- color: #fff;
- transition: background .2s;
- }
- .btn-alert.guide.action-btn {
- background: #e7f3ff;
- border: 1px solid #aed7ff;
- transition: background .2s;
- }
- .btn-alert.guide.action-btn:hover {
- background: #cbe5ff;
- cursor: pointer;
- }
- .btn-airpage-sms {
- position: relative;
- width: 300px;
- height: 60px;
- line-height: 60px;
- text-align: center;
- border-radius: 3px;
- background: rgba(45, 45, 60, .3);
- transition: background .2s;
- z-index: 1;
- }
- .btn-airpage-sms:hover {
- background: rgba(45, 45, 60, .5);
- }
- .btn-toggle-bg {
- background: #f7f8fa;
- height: 30px;
- border-radius: 15px;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- }
- .btn-toggle-group {
- position: relative;
- top: -30px;
- }
- .btn-toggle-on {
- height: 30px;
- background: #0082ff;
- color: #fff;
- font-size: 13px;
- line-height: 30px;
- text-align: center;
- border-radius: 15px;
- transition: background .2s;
- }
- .btn-toggle-on:hover {
- background: #0874de;
- cursor: pointer;
- }
- .btn-toggle-off {
- height: 30px;
- color: #838794;
- font-size: 13px;
- line-height: 30px;
- text-align: center;
- border-radius: 15px;
- transition: background .2s;
- }
- .btn-toggle-off:hover {
- background: #eff1f5;
- cursor: pointer;
- }
- /* \s */
- input[type=checkbox] {
- display: none;
- }
- input[type=checkbox] + label {
- display: inline-block;
- cursor: pointer;
- position: relative;
- padding-left: 25px;
- }
- input[type=checkbox].disabled + label {
- cursor: not-allowed;
- }
- input[type=checkbox] + label:before {
- content: "";
- display: inline-block;
- width: 15px;
- height: 15px;
- position: absolute;
- left: 0;
- bottom: 1px;
- background-color: #fff;
- border-radius: 3px;
- border: 2px solid #a9acb6;
- box-sizing: border-box;
- }
- input[type=checkbox].disabled + label:before {
- border: 2px solid #a9acb2;
- }
- input[type=checkbox]:checked + label:before {
- font-family: "Material Icons";
- content: "\E5CA";
- font-size: 12px;
- line-height: 12px;
- color: #fff;
- border: 2px solid #0082ff;
- background: #0082ff;
- text-align: center;
- }
- input[type=checkbox].disabled:checked + label:before {
- border: 2px solid #a9acb2;
- background: #a9acb2;
- }
- .checkbox-label {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- line-height: 17px;
- }
- input[type=checkbox] + .checkbox-label {
- color: #4d5256;
- }
- input[type=checkbox]:checked + .checkbox-label {
- color: #0082ff;
- }
- input[type=checkbox].disabled + .checkbox-label,input[type=checkbox].disabled:checked + .checkbox-label {
- color: #a9afb3;
- }
- .checkbox {
- cursor: pointer;
- color: #878d91;
- display: inline-block;
- }
- .checkbox.checked {
- color: #0082ff;
- }
- .checkbox.disabled {
- cursor: not-allowed;
- color: rgba(0,0,0,.4);
- }
- input[type=radio] {
- display: none;
- }
- input[type=radio] + label {
- display: inline-block;
- cursor: pointer;
- position: relative;
- padding-left: 25px;
- }
- input[type=radio] + label:before {
- content: "";
- display: inline-block;
- width: 15px;
- height: 15px;
- position: absolute;
- left: 0;
- bottom: 1px;
- background-color: #fff;
- border-radius: 100%;
- border: 2px solid #a9acb6;
- box-sizing: border-box;
- }
- input[type=radio]:checked + label:before {
- font-family: FontAwesome;
- content: "\f00c";
- font-size: 10px;
- line-height: 12px;
- color: #fff;
- border: 2px solid #0082ff;
- background: #0082ff;
- text-align: center;
- }
- .radio-label {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- }
- .btn-radio {
- border-top: 1px solid rgba(0, 0, 0, .12);
- border-bottom: 1px solid rgba(0, 0, 0, .12);
- border-left: 1px solid rgba(0, 0, 0, .12);
- color: rgba(0,0,0,.6);
- background: #f7f8fa;
- cursor: pointer;
- display: inline-block;
- }
- .btn-radio:hover {
- background: #E3E5E8;
- }
- .btn-radio:first-child {
- border-top-left-radius: 2em;
- border-bottom-left-radius: 2em;
- }
- .btn-radio:last-child {
- border-right: 1px solid rgba(0,0,0,.12);
- border-top-right-radius: 2em;
- border-bottom-right-radius: 2em;
- }
- .btn-radio.checked {
- background: #0082ff;
- color: #fff;
- font-weight: 300;
- }
- .btn-radio.checked:hover {
- background: #1976D2;
- }
- .btn-radio.disabled {
- background: rgba(0, 0, 0, .12);
- color: rgba(0, 0, 0, .20);
- font-weight: 500;
- cursor: not-allowed;
- }
- .btn-radio.disabled:hover {
- background: rgba(0, 0, 0, .12);
- }
- /* Input */
- .input[type=text],.input[type=search] {
- box-sizing: border-box;
- padding: 8px 10px;
- border-radius: 3px;
- transition: background .2s;
- border: 2px solid rgba(0, 0, 0, .25);
- color: #4d5256;
- }
- .input.custom-domain,.btn.custom-domain {
- padding: 10px 15px 10px 52px;
- }
- i.input-realtime-search {
- position: absolute;
- display: inline-block;
- vertical-align: middle;
- margin-left: 5px;
- top: 10px;
- }
- .input.input-xs[type=text] {
- box-sizing: border-box;
- padding: 5px 10px;
- border-radius: 3px;
- transition: background .2s;
- border: 2px solid rgba(0, 0, 0, .3);
- color: #2d2d3c;
- }
- .input-search[type=search] {
- box-sizing: border-box;
- padding: 10px 15px 10px 35px;
- border: 2px solid rgba(0, 0, 0, .3);
- border-radius: 3px;
- color: rgba(0,0,0,.87);
- width: 100%;
- }
- .input-search-wrap,.input-absolute-wrap {
- position: relative;
- }
- .input-search-wrap span,.input-absolute-wrap span {
- position: absolute;
- display: inline-block;
- vertical-align: middle;
- left: 10px;
- top: 13px;
- color: rgba(0,0,0,.38);
- font-size: 14.5px;
- font-weight: 500;
- }
- .input-search-wrap i,.input-absolute-wrap i {
- position: absolute;
- top: 9px;
- left: 9px;
- color: rgba(0,0,0,.38);
- }
- .input[type=text]:focus,.input[type=search]:focus,.input-search[type=search]:focus {
- border: 2px solid #0082ff;
- outline: none;
- }
- .input[type=text].invalid,.input[type=search].invalid {
- border: 2px solid #ff0000;
- outline: none;
- }
- .input[type=password] {
- box-sizing: border-box;
- padding: 10px 15px;
- border-radius: 3px;
- transition: background .2s;
- border: 2px solid rgba(0, 0, 0, .3);
- color: #2d2d3c;
- }
- .input.input-xs[type=password] {
- box-sizing: border-box;
- padding: 5px 7px;
- border-radius: 3px;
- transition: background .2s;
- border: 2px solid rgba(0, 0, 0, .3);
- color: #2d2d3c;
- }
- .input[type=password]:focus {
- border: 1px solid #0082ff;
- box-shadow: 0 0 0 1px #0082ff;
- outline: none;
- }
- .input[type=password].invalid {
- border: 2px solid #ff0000;
- outline: none;
- }
- .input-5 {
- width: 80px;
- }
- .input-4 {
- width: 75px;
- }
- .input-3 {
- width: 65px;
- }
- .input-2 {
- width: 60px;
- }
- .input-title {
- font-size: 13px;
- color: #2d2d3c;
- font-weight: 500;
- }
- .input-desc {
- font-size: 11px;
- color: #a9acb6;
- padding-top: 3px;
- }
- #input-invalid {
- -vender-animation-duration: .2s;
- }
- /* typography old */
- .xhg {
- font-size: 24px;
- font-weight: 400;
- }
- .hg {
- font-size: 20px;
- font-weight: 400;
- }
- .lg {
- font-size: 16px;
- font-weight: 400;
- }
- .md {
- font-size: 14px;
- font-weight: 400;
- }
- .sm {
- font-size: 14px;
- font-weight: 400;
- }
- .xs12 {
- font-size: 13px;
- }
- .xs11 {
- font-size: 13px;
- }
- .xs {
- font-size: 10px;
- }
- /* typography new */
- .display {
- font-size: 48px;
- font-weight: 100;
- }
- .headline {
- font-size: 32px;
- font-weight: 300;
- }
- .page-title {
- font-size: 24px;
- font-weight: 400;
- }
- .page-title.light {
- font-weight: 300;
- }
- .title {
- font-size: 20px;
- font-weight: 400;
- }
- .title.light {
- font-weight: 300;
- }
- .subtitle {
- font-size: 16px;
- font-weight: 400;
- }
- .subtitle.light {
- font-weight: 300;
- }
- .body1 {
- font-size: 14px;
- font-weight: 400;
- }
- .body1.light {
- font-weight: 300;
- }
- .body2 {
- font-size: 14px;
- font-weight: 400;
- }
- .body2.light {
- font-weight: 300;
- }
- .description {
- font-size: 13px;
- font-weight: 400;
- }
- .description.light {
- font-weight: 300;
- }
- .button {
- font-size: 13px;
- font-weight: 400;
- text-align: center;
- }
- .button.light {
- font-weight: 300;
- }
- .caption {
- font-size: 12px;
- font-weight: 700;
- }
- .caption.light {
- font-weight: 300;
- }
- .paragraph>p {
- padding: 7.5px 0;
- }
- .paragraph>p.subtitle {
- padding-top: 20px;
- }
- .paragraph>p.description {
- line-height: 1.5em;
- }
- .paragraph {
- padding: 15px 0;
- }
- .paragraph:first-child {
- padding-top: 0;
- }
- .page-info:hover {
- color: #a9afb3 !important;
- }
- /* new typography color */
- .primary-a {
- color: rgba(255,255,255,1);
- }
- .secondary-a {
- color: rgba(255,255,255,.6);
- }
- .disabled-a {
- color: rgba(255,255,255,.4);
- }
- .primary {
- color: #4D5256;
- }
- .secondary {
- color: #878D91;
- }
- .disabled {
- color: #A9AFB3;
- }
- .accent1.ng,.accent1 {
- color: #4C80F1;
- }
- .accent2.ng,.accent2 {
- color: #00D046;
- }
- .error.ng,.error {
- color: #F24147;
- }
- .primary.ng {
- color: #fff;
- }
- .secondary.ng {
- color: #A9AFB3;
- }
- .disabled.ng {
- color: #7B8083;
- }
- /* color */
- .action {
- color: #35BC8A;
- }
- .action-txt {
- color: #34B384;
- }
- .key {
- color: #0082ff !important;
- }
- .black {
- color: #2d2d3c !important;
- }
- .gray {
- color: #666b7b !important;
- }
- .desc {
- color: #969aa5;
- }
- .white {
- color: #fff;
- }
- .d0d2d7 {
- color: #d0d2d7;
- }
- .lightgray {
- color: #a9acb6;
- }
- .invalid {
- color: #ff0000;
- }
- .negative {
- color: #e34360;
- }
- .prev {
- color: #4c80f1;
- }
- .bold {
- font-weight: 400;
- }
- .normal {
- font-weight: normal;
- }
- .lighter {
- font-weight: 300;
- }
- .link {
- color: #a9afb3;
- transition: color .2s;
- }
- .link:hover {
- color: #878d91;
- cursor: pointer;
- text-decoration: underline;
- }
- .link-sub {
- color: #969aa5;
- font-weight: 400;
- transition: color .2s;
- }
- .link-sub:hover {
- color: #838794;
- cursor: pointer;
- }
- .link-key {
- color: #0082ff;
- transition: color .2s;
- }
- .link-key:hover {
- color: #0874de;
- }
- .link-action {
- color: #6CB970;
- }
- .link-action:hover {
- color: #86c58a;
- }
- .link-white {
- color: #7b8083;
- transition: color .2s;
- }
- .link-white:hover {
- color: #a9afb3;
- cursor: pointer;
- }
- .link-copy {
- color: #53596a;
- background: #e3e5e8;
- padding: 3px 8px;
- border-radius: 3px;
- transition: background .2s;
- word-break: break-all;
- }
- .link-copy:hover {
- background: #d0d2d7;
- cursor: copy;
- }
- .link-ui-wrapper:hover .link-ui,.link-ui:hover {
- color: #4d5256;
- }
- .link-ui {
- color: #878d91;
- }
- .ud {
- text-decoration: underline;
- }
- .lh-1em {
- line-height: 1em;
- }
- .lh-1p5em {
- line-height: 1.5em;
- }
- .lh-20 {
- line-height: 20px;
- }
- .lh-22 {
- line-height: 22px;
- }
- .lh-25 {
- line-height: 25px;
- }
- .lh-30 {
- line-height: 30px;
- }
- .lh-35 {
- line-height: 35px;
- }
- .lh-40 {
- line-height: 40px;
- }
- /* step */
- .step-count,.tip-ic {
- position: absolute;
- left: 30px;
- width: 30px;
- height: 30px;
- border-radius: 100%;
- background: #d0d2d7;
- text-align: center;
- padding-top: 4px;
- box-sizing: border-box;
- font-size: 15px;
- text-align: center;
- color: #fff;
- }
- .step-count.selected {
- background: #0082ff;
- }
- .step-count.completed {
- background: #37bf82;
- }
- .step-title {
- font-size: 17px;
- color: #969aa5;
- }
- .step-title.selected {
- color: #0082ff;
- }
- .step-subtitle {
- font-size: 13px;
- color: #969aa5;
- padding-top: 15px;
- }
- .step-subtitle.selected {
- color: #2d2d3c;
- }
- .step-desc {
- font-size: 12px;
- color: #969aa5;
- padding-top: 5px;
- }
- .copy-label {
- font-size: 11px;
- color: #969aa5;
- }
- /* tip */
- .tip-title {
- color: #969aa5;
- font-size: 16px;
- width: 350px;
- }
- .tip-desc {
- color: #a9acb6;
- font-size: 13px;
- padding-top: 5px;
- width: 350px;
- }
- .tip-desc:first-child {
- padding-top: 5px;
- }
- /* margin, padding */
- .mt5 {
- margin-top: 5px;
- }
- .mt7 {
- margin-top: 7px;
- }
- .mt10 {
- margin-top: 10px;
- }
- .mt15 {
- margin-top: 15px;
- }
- .mt20 {
- margin-top: 20px;
- }
- .mt30 {
- margin-top: 30px;
- }
- .mt40 {
- margin-top: 40px;
- }
- .mt60 {
- margin-top: 60px;
- }
- .mb5 {
- margin-bottom: 5px;
- }
- .mb7 {
- margin-bottom: 7px;
- }
- .mb10 {
- margin-bottom: 10px;
- }
- .mb15 {
- margin-bottom: 15px;
- }
- .mb20 {
- margin-bottom: 20px;
- }
- .mb30 {
- margin-bottom: 30px;
- }
- .ml2 {
- margin-left: 2px;
- }
- .ml3 {
- margin-left: 3px;
- }
- .ml5 {
- margin-left: 5px;
- }
- .ml10 {
- margin-left: 10px;
- }
- .ml15 {
- margin-left: 15px;
- }
- .ml20 {
- margin-left: 20px;
- }
- .ml30 {
- margin-left: 30px;
- }
- .mr3 {
- margin-right: 3px;
- }
- .mr5 {
- margin-right: 5px;
- }
- .mr10 {
- margin-right: 10px;
- }
- .mr15 {
- margin-right: 15px;
- }
- .mr20 {
- margin-right: 20px;
- }
- .mr30 {
- margin-right: 30px;
- }
- .pl3 {
- padding-left: 3px;
- }
- .pl7 {
- padding-left: 7px;
- }
- .pl10 {
- padding-left: 10px;
- }
- .pl15 {
- padding-left: 15px;
- }
- .pl20 {
- padding-left: 20px;
- }
- .pl25 {
- padding-left: 25px;
- }
- .pl30 {
- padding-left: 30px;
- }
- .pr2 {
- padding-right: 2px;
- }
- .pr5 {
- padding-right: 5px;
- }
- .pr7 {
- padding-right: 7px;
- }
- .pr10 {
- padding-right: 10px;
- }
- .pr15 {
- padding-right: 15px;
- }
- .pr20 {
- padding-right: 20px;
- }
- .pr30 {
- padding-right: 30px;
- }
- .pt5 {
- padding-top: 5px;
- }
- .pt10 {
- padding-top: 10px;
- }
- .pt15 {
- padding-top: 15px;
- }
- .pt20 {
- padding-top: 20px;
- }
- .pt30 {
- padding-top: 30px;
- }
- .pb1 {
- padding-bottom: 1px;
- }
- .pb5 {
- padding-bottom: 5px;
- }
- .pb10 {
- padding-bottom: 10px;
- }
- .pb15 {
- padding-bottom: 15px;
- }
- .pb20 {
- padding-bottom: 20px;
- }
- .pb30 {
- padding-bottom: 30px;
- }
- /* position */
- .top-negative-4 {
- position: relative;
- top: -4px;
- }
- .top-negative-5 {
- position: relative;
- top: -5px;
- }
- .bottom-0 {
- position: relative;
- bottom: 0;
- }
- /* size */
- .width-20 {
- width: 20%;
- }
- .width-30 {
- width: 30%;
- }
- .width-33 {
- width: 33.33333333%;
- }
- .width-40 {
- width: 40%;
- }
- .width-50 {
- width: 50%;
- }
- .width-60 {
- width: 60%;
- }
- .width-70 {
- width: 70%;
- }
- .width-100 {
- width: 100%;
- }
- .height-70 {
- height: 70%;
- }
- .height-80 {
- height: 80%;
- }
- .height-100 {
- height: 100%;
- }
- /* card */
- .card {
- position: relative;
- padding: 10px;
- box-sizing: border-box;
- background-color: #fff;
- }
- .card-btn-ic {
- position: absolute;
- top: 15px;
- right: 15px;
- z-index: 2;
- }
- @media (min-width: 992px) {
- .card.summary-wrap {
- height: 300px;
- }
- .card.summary-wrap-2 {
- height: 202px;
- }
- }
- @media (min-width: 1200px) {
- .card.summary-wrap, .card.summary-wrap-2 {
- height: 200px;
- }
- }
- .card.summary-1depth {
- height: 127px;
- }
- .card.info {
- padding-left: 75px;
- background: #f7f8fa;
- }
- .card.channel {
- height: 61px;
- line-height: 33px;
- }
- .card.step {
- padding-left: 75px;
- }
- .card.list-bordered {
- border: 1px solid #e3e5e8;
- border-width: 1px 1px 0px 1px;
- word-break: break-all;
- }
- .card.list-bordered:first-child {
- margin-top: 15px;
- }
- .card.list-bordered:last-child {
- border-width: 1px;
- }
- .card.layer {
- box-shadow: 5px 5px 5px rgba(0, 0, 0, .15);
- position: absolute;
- z-index: 2;
- }
- .card-dimmed {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(255, 255, 255, .9);
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- padding: 15px;
- z-index: 3;
- }
- .page-dimmed {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- background: rgba(239, 241, 245, .9);
- padding: 15px;
- box-sizing: border-box;
- z-index: 3;
- }
- .card-wrapper {
- position: relative;
- }
- .card-sm {
- position: relative;
- padding: 15px 30px;
- background-color: #fff;
- }
- .card-xs {
- position: relative;
- padding: 10px 30px;
- background-color: #fff;
- }
- .card>p {
- margin: 0;
- }
- .card-1depth {
- position: relative;
- padding: 30px;
- box-sizing: border-box;
- border: 1px solid #e3e5e8;
- border-radius: 3px;
- }
- .card-filter {
- position: relative;
- width: 100%;
- padding: 0px 20px;
- font-size: 0;
- background: #f7f8fa;
- box-sizing: border-box;
- }
- .card-filter-label {
- position: relative;
- padding: 5px 10px;
- color: #a9acb6;
- font-size: 12px;
- border-bottom: 2px solid #eff1f5;
- transition: color, border-bottom .2s;
- box-sizing: border-box;
- }
- .card-filter-label:hover {
- color: #53596a;
- border-bottom: 2px solid #d0d2d7;
- cursor: pointer;
- }
- .card-filter-label.on {
- color: #0082ff;
- font-weight: 500;
- border-bottom: 2px solid #0082ff;
- }
- /* table */
- *,*:before,*:after {
- transition: background .2s !important;
- box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- word-break: break-all;
- }
- span,a,i {
- vertical-align: middle;
- }
- ul {
- list-style-position: inside;
- }
- table.stats-new {
- width: 100%;
- border: 1px solid #e3e5e8;
- }
- table.stats-new tr.th,table.stats-new tr.th:hover {
- background: 0;
- }
- table.stats-new tr {
- background: #fff;
- cursor: pointer;
- }
- table.stats-new tr:hover td {
- /*background: rgba(0,0,0,.01);*/
- background: #fcfcfc;
- }
- table.stats-new tr:hover td.sort {
- background: #e3f2fd;
- }
- table.stats-new th {
- background: rgb(244, 245, 248);
- font-size: 13px;
- color: #4d5256;
- font-weight: 400;
- text-align: left;
- padding: 10px;
- border: 1px solid #d0d2d7;
- border-collapse: collapse;
- min-width: 135px;
- }
- table.stats-new th:hover,table.stats-new th.sort:hover td,table.stats-new th.in-app-event:hover td {
- background: rgb(230, 232, 235);
- cursor: pointer;
- }
- table.stats-new th.sort-not-available:hover {
- background: rgb(244, 245, 248);
- cursor: default;
- }
- table.stats-new th.sort {
- background: #e3f2fd;
- }
- table.stats-new th.list-select {
- min-width: 50px !important;
- }
- table.stats-new th.not-allowed,table.stats-new td.not-allowed {
- background: #a9acb6 !important;
- color: #879d91 !important;
- }
- table.stats-new td.not-allowed > p {
- color: #a9afb3;
- }
- table.stats-new th.in-app-event-label {
- position: relative;
- padding: 10px 40px 10px 10px;
- }
- table.stats-new th.in-app-event {
- background: #e3e5e8;
- }
- table.stats-new td.in-app-event {
- background: rgba(227, 229, 232, .5);
- }
- table.stats-new th.table-key {
- z-index: 1;
- }
- table.stats-new td.table-key {
- background: white;
- }
- table.stats-new td {
- font-size: 13px;
- color: #222222;
- font-weight: normal;
- text-align: right;
- padding: 10px;
- border: 1px solid #d0d2d7;
- border-collapse: collapse;
- vertical-align: top;
- }
- table.stats-new td.text {
- color: #4c80f1;
- text-align: left;
- }
- table.stats-new td.sort {
- background: #f1f8fe;
- }
- table.stats-new td.fixed-col {
- position: absolute;
- width: 135px;
- top: auto;
- left: auto;
- border-bottom: 0;
- background-color: white;
- }
- table.stats-new td>p {
- font-size: 12px;
- color: #a9afb3;
- padding: 2px 0;
- }
- table.stats-new td>p:first-child {
- padding-top: 5px;
- }
- .device-view {
- padding: 7px 7px 7px 0;
- border-bottom: 1px solid rgba(0,0,0,.04);
- color: #a9afb3;
- font-size: 12px;
- }
- .device-view:first-child {
- border-top: 1px solid rgba(0,0,0,.04);
- margin-top: 5px;
- }
- .device-view:last-child {
- border-bottom: 0;
- padding-bottom: 0;
- }
- .device-view i {
- color: rgba(0,0,0,.2);
- width: 25px;
- }
- .device-view i.fa {
- font-size: 16px;
- }
- .device-view>p {
- text-align: left;
- padding: 2px 2px 2px 27px;
- font-size: 12px;
- }
- .device-view>p:first-child {
- padding: 2px;
- font-size: 12px;
- }
- /* */
- tbody.stats {
- background: #fff;
- width: 100%;
- }
- table.stats {
- border: 1px solid #e3e5e8;
- border-collapse: collapse;
- }
- table.stats th {
- border: 1px solid #e3e5e8;
- border-collapse: collapse;
- padding: 5px 10px;
- text-align: left;
- }
- table.stats td {
- border: 1px solid #e3e5e8;
- border-collapse: collapse;
- padding: 5px 10px;
- text-align: left;
- }
- table.stats td>p {
- margin: 0;
- }
- table.stats tr,table.stats tr.view {
- background: #fff;
- transition: background .2s;
- }
- table.stats tr:hover {
- background: rgba(0, 130, 255, .01);
- cursor: pointer;
- }
- table.stats tr.view:hover {
- cursor: default;
- background: #fff;
- }
- .col-label {
- font-size: 13px;
- font-weight: 500;
- color: #2d2d3c;
- background: #f7f8fa;
- min-width: 70px;
- word-break: keep-all;
- }
- .col-label:hover {
- cursor: default;
- }
- .col-label.invalid.sort,.col-label.invalid {
- font-size: 13px;
- font-weight: 500;
- color: #a9acb6;
- background: rgba(208, 210, 215, .3);
- }
- .col-label.sort.on {
- background: #eff1f5;
- }
- .col-label.sort {
- font-size: 13px;
- color: #2d2d3c;
- background: #f7f8fa;
- transition: background .2s;
- }
- .col-label.sort:hover {
- background: #e3e5e8;
- cursor: pointer;
- }
- .col-label.min-width-170 {
- min-width: 170px;
- }
- .col-label.min-width-100 {
- min-width: 100px;
- }
- .cel {
- min-width: 70px;
- font-size: 14.5px;
- color: #2d2d3c;
- word-break: keep-all;
- vertical-align: top;
- }
- .cel.invalid {
- font-size: 14.5px;
- color: #a9acb6;
- background: rgba(208, 210, 215, .3);
- cursor: not-allowed;
- }
- .cel.on {
- background: rgba(208, 210, 215, .15);
- font-weight: 400;
- }
- .cel-txt {
- font-size: 14.5px;
- color: #838794;
- min-width: 70px;
- word-break: keep-all;
- }
- .cel-txt-key {
- font-size: 14.5px;
- color: #0874de;
- min-width: 70px;
- word-break: keep-all;
- }
- .cel-txt.on,.cel-txt-key.on {
- background: rgba(208, 210, 215, .15);
- }
- .cel-txt-sub {
- font-size: 13px;
- color: #a9acb6;
- padding-top: 3px;
- }
- .cel-device {
- color: #a9acb6;
- padding: 5px 0;
- border-top: 1px solid rgba(0, 0, 0, .06);
- }
- .cel-device:first-child {
- margin-top: 5px;
- }
- .cel-channel-img {
- width: 13px;
- height: 13px;
- position: relative;
- top: 1px;
- border-radius: 3px;
- margin-right: 5px;
- }
- tbody.compare-table {
- background: 0;
- }
- table.compare-table {
- width: 100%;
- border: 0;
- padding: 10px 15px;
- text-align: left;
- border-collapse: collapse;
- }
- table.compare-table.device {
- padding: 0;
- }
- table.compare-table th {
- border-bottom: 1px solid #e3e5e8;
- border-collapse: collapse;
- font-weight: normal;
- padding: 10px 15px;
- text-align: left;
- border: 1px solid #e3e5e8;
- border-width: 1px 0 1px 0;
- }
- table.compare-table td {
- padding: 10px 15px;
- text-align: left;
- border-collapse: collapse;
- border: 1px solid #e3e5e8;
- border-width: 1px 0 1px 0;
- }
- table.compare-table.device td {
- padding: 7px 5px 0;
- min-width: 50px;
- font-size: 10px;
- line-height: 1.3em;
- border-bottom: 0;
- border-top: 1px solid rgba(0, 0, 0, .06);
- }
- table.compare-table tr {
- border: 1px solid #e3e5e8;
- border-width: 0 0 1px 0;
- font-weight: normal;
- transition: background .2s;
- }
- table.compare-table.device tr {
- background: none;
- border-bottom: 0;
- }
- table.compare-table tr.on {
- background: rgba(0, 130, 255, .07);
- }
- table.compare-table.xs td {
- padding: 2px 0px;
- border: 1px solid #e3e5e8;
- border-width: 1px 0 1px 0;
- }
- table.compare-table.xs tr {
- background: none;
- }
- table.bz.summary,table.bz.device {
- width: 100%;
- }
- table.bz th,table.bz td {
- padding: 5px 15px;
- font-size: 13px;
- box-sizing: border-box;
- word-break: break-all;
- vertical-align: top;
- line-height: 1.5em;
- }
- table.bz.device th {
- font-size: 15px;
- color: #d0d2d7;
- }
- table.bz.device td {
- font-size: 13px;
- color: #a9acb6;
- }
- table.bz th {
- color: #a9acb6;
- text-align: left;
- font-weight: normal;
- vertical-align: top;
- }
- table.bz.simplelink-detail th {
- min-width: 80px;
- }
- table.bz.summary th {
- width: 50%;
- }
- table.bz.device.all th {
- width: 33.33333333%;
- }
- table.bz.device.mobile th {
- width: 50%;
- }
- table.bz td {
- color: #666b7b;
- max-width: 350px;
- }
- .url {
- cursor: copy;
- font-size: 10px !important;
- word-break: break-all;
- line-height: 1.3em !important;
- }
- table.retention {
- border-collapse: collapse;
- cursor: default;
- }
- table.retention th {
- background: #f7f8fa;
- border-top: 1px solid rgba(0, 0, 0, .04);
- padding: 15px 20px;
- color: #a9afb3;
- font-size: 14.5px;
- font-weight: 400;
- }
- table.retention td {
- background: #fff;
- padding: 15px 20px;
- color: #fff;
- font-size: 14.5px;
- font-weight: 500;
- text-align: center;
- text-shadow: 0px 1px 3px rgba(0, 0, 0, .87);
- }
- table.retention td:first-child {
- text-align: left;
- color: #4d5256;
- font-size: 14.5px;
- font-weight: 500;
- text-shadow: none;
- }
- table.retention td>span {
- font-size: 13px;
- padding-top: 5px;
- display: block;
- }
- table.retention td:hover {
- -moz-box-shadow: inset 0 0 2px #fff;
- -webkit-box-shadow: inset 0 0 2px #fff;
- box-shadow: inset 0 0 2px #fff;
- position: relative;
- }
- table.retention td[data-title]:hover:after {
- content: attr(data-title);
- min-width: 100%;
- font-size: 12px;
- text-align: center;
- padding: 5px 10px;
- box-sizing: border-box;
- color: #fff;
- font-weight: 300;
- position: absolute;
- left: 0;
- top: 100%;
- z-index: 2;
- white-space: nowrap;
- background: #000;
- }
- .retention-filter {
- background: rgba(0, 0, 0, .05);
- position: relative;
- padding: 10px;
- font-size: 13px;
- font-weight: 400;
- color: #878d91;
- display: inline-block;
- cursor: default;
- }
- .retention-filter:hover {
- color: #4d5256;
- }
- table.info {
- width: 100%;
- }
- table.info tr {
- border-bottom: 1px solid #e3e5e8;
- text-align: left;
- }
- table.info th {
- padding: 15px 20px;
- color: #878d91;
- font-size: 13px;
- font-weight: 400;
- }
- table.info.sm th {
- padding: 5px 15px;
- font-size: 13px;
- }
- table.info td {
- padding: 15px 20px;
- color: #4d5256;
- font-size: 13px;
- font-weight: 400;
- vertical-align: middle;
- }
- .app-info-wrap {
- padding: 10px 0px;
- border-bottom: 1px solid rgba(0, 0, 0, .04);
- }
- .app-info-wrap:last-child {
- border-bottom: 0;
- }
- .app-icon-wrap {
- width: 50px;
- height: 35px;
- display: inline-block;
- vertical-align: middle;
- }
- .app-icon-wrap>img {
- width: 35px;
- height: 35px;
- border-radius: 20%;
- border: 1px solid rgba(0, 0, 0, .04);
- }
- .app-name {
- max-width: 200px;
- display: inline-block;
- vertical-align: middle;
- color: #4d5256;
- }
- .app-info-wrap>.app-name {
- color: #878d91;
- }
- /* modal */
- .modal {
- position: fixed;
- z-index: 4000;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(45, 45, 60, .7);
- text-align: initial;
- color: #4d5256;
- }
- .modal-content {
- margin: 10% auto;
- min-width: 490px;
- max-width: 710px;
- animation-duration: .5s;
- }
- .modal-content-xs {
- margin: 5% auto;
- width: 490px;
- animation-duration: .5s;
- }
- .modal-slide {
- min-width: 490px;
- max-width: 710px;
- animation-duration: .5s;
- position: absolute;
- right: 0;
- }
- .modal-header {
- position: relative;
- top: 0;
- left: 0;
- background: #fff;
- padding: 20px;
- box-sizing: border-box;
- border-bottom: 1px solid rgba(0, 0, 0, .06);
- }
- .modal-action {
- position: relative;
- bottom: 0;
- left: 0;
- background: #fff;
- border-top: 1px solid rgba(0, 0, 0, .04);
- padding: 10px;
- box-sizing: border-box;
- text-align: right;
- }
- .modal-close-btn {
- color: rgba(255, 255, 255, .7);
- text-align: center;
- font-size: 50px;
- transition: color .2s;
- }
- .modal-close-btn i {
- vertical-align: top;
- }
- .modal-close-btn:hover {
- color: rgba(255, 255, 255, .9);
- cursor: pointer;
- }
- /* popover Layer */
- .popover-layer-right {
- top: 100%;
- right: 0;
- background-color: #eff1f5;
- box-shadow: 5px 5px 5px #838794;
- padding: 10px;
- position: absolute;
- z-index: 1;
- }
- .popover-layer-left {
- top: 100%;
- left: 0;
- background-color: #eff1f5;
- box-shadow: 5px 5px 5px #838794;
- padding: 10px;
- position: absolute;
- z-index: 1;
- }
- /* og-tag-setting */
- .og-tag-setting {
- width: 350px;
- border-radius: 3px;
- border: 1px solid #d0d2d7;
- }
- .og-tag-img {
- width: 350px;
- height: 185px;
- background: #e3e5e8;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- font-size: 30px;
- vertical-align: middle;
- color: #fff;
- padding: 15px;
- position: relative;
- background-size: cover;
- background-position: 50%;
- }
- .og-tag-img>i {
- position: absolute;
- text-align: center;
- line-height: 155px;
- width: 320px;
- }
- .og-tag-text {
- padding: 10px 15px;
- }
- .og-tag-upload {
- width: 130px;
- height: 32px;
- padding: 5px 15px;
- box-sizing: border-box;
- border-radius: 30px;
- position: relative;
- background: rgba(255, 255, 255, .7);
- transition: background .2s;
- color: #2d2d3c;
- text-align: left;
- border: 1px solid #d0d2d7;
- outline: none;
- }
- .og-tag-upload.on {
- background: rgba(255, 255, 255, .9);
- }
- .og-tag-upload:hover {
- background: rgba(255, 255, 255, .9);
- cursor: pointer;
- }
- .og-tag-url {
- width: 300px;
- right: 0;
- }
- .og-tag-upload-group {
- position: absolute;
- width: 130px;
- right: 15px;
- bottom: 15px;
- }
- /* sns-preview (og-tag-setting new) */
- .sns-preview-wrap {
- width: 400px;
- }
- .sns-preview {
- width: 400px;
- text-align: center;
- border: 1px solid rgba(0,0,0,.12);
- background: #fff;
- box-shadow: 0 1px 2px rgba(0,0,0,.3);
- border-radius: 3px;
- }
- .sns-preview img {
- width: auto;
- height: 200px;
- padding: 20px;
- display: inline;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- }
- .sns-preview-info {
- padding: 15px;
- text-align: left;
- }
- .sns-preview-info p {
- width: 368px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- /* snackbar */
- .snackbar {
- position: fixed;
- width: 500px;
- bottom: 0;
- left: 0;
- right: 0;
- margin-left: auto;
- margin-right: auto;
- background: #2d2d3c;
- color: #fff;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- padding: 15px;
- text-align: center;
- box-sizing: border-box;
- z-index: 9999;
- }
- /* etc */
- .ib {
- display: inline-block;
- }
- .fl-l {
- float: left;
- }
- .fl-r {
- float: right;
- }
- .bb {
- box-sizing: border-box;
- }
- .el {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .mz {
- margin: 0;
- }
- .ml-z {
- margin-left: 0;
- }
- .mr-z {
- margin-right: 0;
- }
- .v-top {
- vertical-align: top;
- }
- .v-middle {
- vertical-align: middle;
- }
- .v-bottom {
- vertical-align: bottom;
- }
- .border {
- border: 1px solid rgba(0, 0, 0, .15);
- }
- .border-fff {
- border: 1px solid #fff;
- }
- .border-bottom {
- border-bottom: 1px solid rgba(0, 0, 0, .06);
- }
- .border-top {
- border-top: 1px solid rgba(0, 0, 0, .06);
- }
- .border-right {
- border-right: 1px solid rgba(0, 0, 0, .06);
- }
- .border-left {
- border-left: 1px solid rgba(0, 0, 0, .06);
- }
- .center {
- text-align: center !important;
- margin: 0 auto;
- }
- .right {
- text-align: right !important;
- }
- .left {
- text-align: left !important;
- }
- .vertical-horizontal-center {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .copy:hover {
- cursor: copy !important;
- }
- .bg-white {
- background: #fff;
- }
- .bg-f7f8fa {
- background: #f7f8fa;
- }
- .bg-eff1f5 {
- background: #eff1f5;
- }
- .bg-e3e5e8 {
- background: #e3e5e8;
- }
- .bg-838794 {
- background: #838794;
- }
- .bg-key {
- background: #0082ff;
- }
- .pd-z {
- padding: 0;
- }
- .mt-z {
- margin-top: 0 !important;
- }
- .mb-z {
- margin-bottom: 0 !important;
- }
- .pt-z {
- padding-top: 0;
- }
- .br-z {
- border-right: 0;
- }
- .btlr-z {
- border-top-left-radius: 0 !important;
- }
- a {
- text-decoration: none;
- }
- .ic_login-w-google {
- position: relative;
- top: 3px;
- }
- .pd {
- padding: 10px;
- }
- .pd-5 {
- padding: 5px;
- }
- .pd-sm {
- padding: 15px 20px;
- }
- .pd-md {
- padding: 30px;
- }
- .pd-lg {
- padding: 40px;
- }
- .bar {
- color: #e3e5e8;
- padding: 0 3px;
- }
- .code {
- font-family: Roboto Mono, Monaco, "Courier New", monospace;
- padding: .3em .5em;
- line-height: 1em;
- font-size: 13px;
- color: rgba(0,0,0,.7);
- border: 1px solid rgba(0,0,0,.12);
- background: rgba(0,0,0,.05);
- vertical-align: middle;
- border-radius: 3px;
- }
- .overflow-auto {
- overflow: auto;
- }
- .font-z {
- font-size: 0 !important;
- }
- .display-block {
- display: block;
- }
- .display-none {
- display: none;
- }
- .m-auto {
- margin-left: auto;
- margin-right: auto;
- }
- .word-break {
- word-break: break-all;
- }
- .vertical-line {
- width: 1px;
- background: linear-gradient(#d0d2d7, #f7f8fa);
- }
- .bullet {
- width: 3px;
- height: 3px;
- border-radius: 100%;
- background: #838794;
- position: relative;
- bottom: 3px;
- margin-right: 5px;
- }
- .width-200px {
- width: 200px;
- }
- .border-0 {
- border: 0 !important;
- }
- .ic-right {
- padding-right: 5px;
- }
- .ic-left {
- padding-left: 5px;
- }
- .view-row {
- width: 109px;
- }
- .add-admin-select-app {
- width: 100%;
- max-height: 250px;
- border: 1px solid rgba(0, 0, 0, .15);
- overflow: auto;
- margin-top: 15px;
- }
- .add-admin-email-input-wrap {
- width: 100%;
- height: auto;
- box-sizing: border-box;
- padding: 10px 15px;
- border: 2px solid rgba(0, 0, 0, .3);
- border-radius: 3px;
- margin-top: 15px;
- }
- .add-admin-email-input-wrap.invalid {
- border: 2px solid #ff0000;
- }
- .add-admin-email-input-error {
- box-sizing: border-box;
- padding: 5px 10px;
- background: #fee7e8;
- font-size: 14.5px;
- color: #ff0000;
- display: inline-block;
- word-break: break-all;
- cursor: default;
- }
- .add-admin-email-input-error:focus {
- background: #f5505b;
- color: #fff;
- }
- .add-admin-email-input-completed {
- box-sizing: border-box;
- padding: 5px 10px;
- background: #dbf0e7;
- font-size: 14.5px;
- color: #278b67;
- display: inline-block;
- word-break: break-all;
- cursor: default;
- }
- .add-admin-email-input-completed:focus {
- background: #32b384;
- color: #fff;
- }
- .add-admin-email-input-completed i,.add-admin-email-input-error i {
- font-size: 16px;
- }
- .add-admin-email-input-wrap.selected {
- border: 2px solid #0082ff;
- }
- .add-admin-email-wrap {
- margin-top: 10px;
- }
- .add-admin-email-wrap:first-child {
- margin-top: 0;
- }
- .add-admin-email-input {
- font-size: 14px;
- color: #4d5256;
- box-sizing: border-box;
- padding: 5px 10px;
- }
- .add-admin-email-input-edit {
- font-size: 14px;
- color: #4d5256;
- box-sizing: border-box;
- background: none;
- }
- ul.dashed {
- list-style-position: inside;
- list-style-type: none;
- padding-left: 10px;
- }
- ul.dashed > li {
- text-indent: -11px;
- padding-top: 5px;
- line-height: 1.6em;
- }
- ul.dashed > li:first-child {
- padding-top: 0;
- }
- ul.dashed > li:before {
- padding-right: 5px;
- content: "-";
- }
- ul.dashed > li i {
- text-indent: 0;
- }
- .animation {
- animation-duration: .5s;
- }
- .info-error {
- background: #fce4ec;
- position: relative;
- padding: 12px 15px;
- border-radius: 3px;
- }
- .add-filter-input-wrap {
- width: 100%;
- height: auto;
- box-sizing: border-box;
- padding: 4px 6px;
- border: 2px solid rgba(0, 0, 0, .25);
- border-radius: 3px;
- overflow: hidden;
- overflow-x: scroll;
- }
- .add-filter-input-wrap::-webkit-scrollbar {
- display: none;
- }
- .filter-added-wrapper {
- display: inline-block;
- vertical-align: top;
- padding: 5px;
- }
- .filter-added {
- display: inline-block;
- padding: 3px 5px;
- margin-right: 5px;
- font-size: 13px;
- color: #53596a;
- border-radius: 3px;
- background: #eff1f5;
- position: relative;
- cursor: pointer;
- border: 1px solid rgba(0,0,0,.05);
- }
- .filter-added:hover,.filter-added:focus {
- background: #e3e5e8;
- }
- .filter-added > a {
- color: #969aa5;
- padding: 0 1px;
- }
- .filter-added > a :hover {
- color: #53596a;
- }
- .filter-added > a > i {
- font-size: 13px;
- }
- .filter-added.cursor {
- background: none;
- border: none;
- cursor: text;
- }
- .filter-added-edit {
- font-size: 13px;
- color: #53596a;
- box-sizing: border-box;
- background: none;
- }
- /* description */
- .description-right {
- background: #fff;
- border: 2px solid #000;
- position: absolute;
- right: -110%;
- width: 300px;
- padding: 10px;
- font-size: 11px;
- }
- /* sidebar */
- .d-sidebar {
- width: 220px;
- height: 100%;
- font-weight: 300;
- position: fixed;
- background-color: #474855;
- top: 50px;
- left: 0;
- z-index: 1999;
- box-sizing: border-box;
- }
- .d-app:hover {
- cursor: pointer;
- }
- .d-sidebar-appinfo-wrapper:hover .d-sidebar-appinfo {
- color: #fff;
- }
- .d-sidebar-appinfo {
- font-size: 13px;
- font-weight: 300;
- color: #fff;
- vertical-align: middle;
- }
- .d-sidebar-appinfo.sub {
- font-size: 12px;
- color: rgba(255,255,255,.6);
- }
- .d-sidebar-appinfo.sub:hover {
- color: #fff;
- }
- .d-sidebar-menu {
- padding: 8px 12px;
- font-size: 13px;
- color: rgba(255,255,255,.9);
- font-weight: 300;
- display: block;
- }
- .d-sidebar-menu:hover {
- background-color: rgba(0,0,0,.1);
- }
- .d-sidebar-menu.on {
- color: #5cafff !important;
- background-color: #3C3D47;
- }
- .d-sidebar-menu.edit {
- box-sizing: border-box;
- border-bottom: 1px solid #fff;
- cursor: pointer;
- }
- .d-sidebar-menu.edit:first-child {
- border-top: 1px solid #fff;
- }
- .d-sidebar-menu.edit:hover {
- background: rgba(255,255,255,.2);
- }
- /* GNB */
- .d-gnb {
- width: 100%;
- height: 50px;
- background: #2D2E35;
- box-sizing: border-box;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 2000;
- min-width: 768px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
- }
- .d-gnb-ui {
- padding: 10px;
- line-height: 30px;
- display: inline-block;
- vertical-align: top;
- color: rgba(255, 255, 255, .7);
- }
- .d-gnb-ui:hover,.d-gnb-ui-wrapper:hover .d-gnb-ui {
- color: rgba(255, 255, 255, .9);
- }
- /* lnb */
- .d-lnb {
- padding: 15px;
- box-sizing: border-box;
- }
- @media (min-width: 320px) {
- .d-lnb {
- width: 568px;
- }
- }
- @media (min-width: 768px) {
- .d-lnb {
- width: 100%;
- }
- }
- @media (min-width: 992px) {
- .d-lnb {
- width: 100%;
- }
- }
- @media (min-width: 1200px) {
- .d-lnb {
- width: 100%;
- }
- }
- .page-breadcrumb {
- vertical-align: middle;
- }
- .page-breadcrumb:hover {
- cursor: pointer;
- color: #4d5256;
- }
- .page-desc {
- margin-top: 10px;
- }
- /* footer */
- .d-footer {
- width: 100%;
- box-sizing: border-box;
- padding: 30px 30px 30px 230px;
- border-top: 1px solid #e3e5e8;
- position: relative;
- display: block;
- }
- @media (min-width: 320px),@media (min-width: 768px) {
- .d-footer-label {
- text-align: left;
- padding-top: 15px;
- }
- }
- @media (min-width: 992px),@media (min-width: 1200px) {
- .d-footer-label {
- text-align: right;
- padding-top: 0;
- }
- }
- .og-tag-upload input#input-file {
- position: absolute;
- left: 0px;
- width: 130px;
- font-size: 20px;
- cursor: pointer;
- /* good browser */
- opacity: 0;
- /* IE 5-7 */
- filter: alpha(opacity=0);
- /* IE 8 */
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- /* Netscape */
- -moz-opacity: 0;
- /* Safari 1.x */
- -khtml-opacity: 0;
- }
- /* app setting */
- .app-setting>ul {
- /* position: absolute; */
- box-sizing: border-box;
- overflow: auto;
- border: 1px solid #d0d2d7;
- background: #fff;
- max-height: 195px;
- box-shadow: 5px 5px 5px #838794;
- padding: 0;
- z-index: 2;
- }
- .app-setting>ul li {
- box-sizing: border-box;
- position: relative;
- width: auto;
- height: 55px;
- padding: 10px;
- line-height: 50px;
- font-size: 15px;
- color: #2d2d3c;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- border-top: 1px solid #e3e5e8;
- transition: background .2s;
- }
- .app-setting>ul li:hover {
- background: #eff1f5;
- cursor: pointer;
- }
- .app-setting>ul li:first-child {
- border: 0;
- }
- .app-setting-app-img {
- width: 35px;
- height: 35px;
- border: 1px solid #e3e5e8;
- border-radius: 3px;
- }
- .app-setting-app-label {
- width: 330px;
- line-height: 35px;
- }
- .app-setting-app-selected {
- float: right;
- line-height: 19px;
- text-align: right;
- }
- .app-setting-third-party-logo {
- height: 12px;
- }
- .app-setting-third-party-status {
- width: 100px;
- float: right;
- line-height: 19px;
- text-align: right;
- }
- .app-setting-premium-business {
- background: #f7f8fa;
- height: 260px;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- padding: 20px;
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- color: #37bf8e;
- }
- .app-setting-premium-first {
- background: #f7f8fa;
- height: 260px;
- box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
- padding: 20px;
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- color: #0082ff;
- }
- .app-setting-premium-business.on {
- background: #fff;
- border: 1px solid #37bf8e;
- box-shadow: 0 0 0 1px #37bf8e;
- }
- .app-setting-premium-first.on {
- background: #fff;
- border: 1px solid #0082ff;
- box-shadow: 0 0 0 1px #0082ff;
- }
- .app-setting-premium-marker-business {
- width: 3px;
- height: 50px;
- border-top: 30px solid #37bf8e;
- border-right: 30px solid #37bf8e;
- position: absolute;
- top: 0;
- right: 14px;
- border-radius: 3px;
- }
- .app-setting-premium-marker-first {
- width: 3px;
- height: 50px;
- border-top: 30px solid #0082ff;
- border-right: 30px solid #0082ff;
- position: absolute;
- top: 0;
- right: 14px;
- border-radius: 3px;
- }
- .app-setting-premium-marker-business,.app-setting-premium-marker-first {
- width: 0px;
- height: 0px;
- border-left: 30px solid transparent;
- border-bottom: 30px solid transparent;
- position: absolute;
- top: 0;
- right: 14px;
- border-radius: 3px;
- }
- .app-setting-premium-marker-ic {
- position: absolute;
- top: -20px;
- right: -20px;
- color: #fff;
- }
- /* ad-channel connect */
- .paid-ad {
- height: 95px;
- padding: 30px;
- }
- .paid-ad-logo.off {
- opacity: .7;
- }
- .paid-ad-logo.on {
- opacity: 1;
- }
- .paid-ad-status {
- width: 35px;
- text-align: center;
- float: right;
- }
- /* progress */
- .progress-number {
- width: 20px;
- height: 20px;
- border-radius: 100%;
- font-size: 10px;
- line-height: 20px;
- text-align: center;
- display: inline-block;
- background: #a9acb6;
- color: #fff;
- }
- .progress-number.completed {
- background: #35bc8a;
- }
- .progress-number.selected {
- background: #0082ff;
- }
- .progress-title {
- font-size: 17px;
- color: #2d2d3c;
- font-weight: 500;
- }
- .progress-subtitle.selected {
- color: #0082ff;
- }
- .progress-subtitle {
- font-size: 14px;
- color: #969aa5;
- font-weight: 500;
- }
- .progress-desc.selected {
- color: #2d2d3c;
- }
- .progress-desc {
- font-size: 13px;
- color: #969aa5;
- font-weight: 500;
- }
- .progress-step {
- font-size: 11px;
- color: #969aa5;
- }
- .progress-copy-label {
- font-size: 11px;
- font-weight: 500;
- color: #969aa5;
- }
- @charset "UTF-8";
- /*
- html5doctor.com Reset Stylesheet
- v1.6.1
- Last Updated: 2010-09-17
- Author: Richard Clark - http://richclarkdesign.com
- Twitter: @rich_clark
- */
- /*
- by IUEditor 2.0.2.14 (00001),and fixed by soo at 2016.06.01.
- */
- ::-webkit-scrollbar {
- width: 8px;
- height: 8px;
- }
- ::-webkit-scrollbar-track {
- border-radius: 4px;
- }
- ::-webkit-scrollbar-track-piece {
- background-color: #e1e4e6;
- }
- ::-webkit-scrollbar-thumb {
- border-radius: 0px;
- background-color: #a9afb3;
- }
- html,body {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- vertical-align: baseline;
- font-family: 'Noto Sans KR', Hevetica, "Apple SD Gothic Neo", βμ ν SD μ°λκ³ λ Neoβ, Apple SD Gothic Neo, λλλ°λ₯Έκ³ λ, NanumBarunGothic, λλλ°λ₯Έκ³ λOTF, NanumBarunGothicOTF, 'Nanum Barun Gothic', λλκ³ λ, "NanumGothic", "Nanum Gothic", "λ§μ κ³ λ", "Malgun Gothic", Ngothic, Arial, sans-serif;
- font-weight: normal;
- font-size: 100%;
- /*background: #f3f5f6;*/
- }
- object,address,code,del,img,q,small,sub,var,dl,dt,dd,ul,li,fieldset,form,label,legend,footer,header,menu,nav,section,summary,time,mark,video,div,h1,h2,h3,h4,h5,h6,b,i,button {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- vertical-align: baseline;
- background: transparent;
- }
- h1,h2,h3,h4,h5,h6,b,i {
- font-size: inherit;
- font-weight: inherit;
- }
- p,span {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- }
- a {
- color: inherit;
- cursor: pointer;
- text-decoration: none;
- }
- footer,header,group,menu,nav,section {
- display: block;
- }
- nav ul {
- list-style: none;
- }
- ul {
- list-style-type: none;
- }
- q {
- quotes: none;
- }
- q:before,q:after {
- content: '';
- content: none;
- }
- a {
- margin: 0;
- padding: 0;
- font-size: 100%;
- vertical-align: baseline;
- background: transparent;
- }
- /* change colors to suit your needs */
- /* change colors to suit your needs */
- mark {
- background-color: #ff9;
- color: #000;
- font-style: italic;
- font-weight: bold;
- }
- del {
- text-decoration: line-through;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- /* change border color to suit your needs */
- input {
- padding: 0;
- margin: 0;
- }
- input,select {
- vertical-align: middle;
- border-style: none;
- }
- input[type=submit],input[type=button],input[type=search],input[type=reset] {
- -webkit-tap-highlight-color: transparent;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- }
- body {
- /*line-height:1.5;*/
- -webkit-text-size-adjust: none;
- -moz-text-size-adjust: none;
- -ms-text-size-adjust: none;
- /* repaint text - font problem
- -webkit-animation-delay: 0.1s;
- -webkit-animation-name: fontfix;
- -webkit-animation-duration: 0.1s;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function: linear;*/
- }
- /* repaint text - font problem*/
- @-webkit-keyframes fontfix {
- from {
- opacity: 1;
- }
- to {
- opacity: 1;
- }
- }
- button {
- cursor: pointer;
- }
- /* from developer */
- .loading {
- position: fixed;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- padding-top: 35%;
- background: rgba(239, 241, 245, .9);
- text-align: center;
- color: #a9acb6;
- font-size: 50px;
- z-index: 1000;
- }
- .snackbar {
- cursor: pointer;
- }
- .d-app-list-layer {
- z-index: 50 !important;
- }
- /* page-progress-bar */
- progress {
- width: 100%;
- border: 0;
- height: 5px;
- top: -13px;
- position: relative;
- }
- progress::-webkit-progress-bar {
- background-color: #fff;
- }
- progress::-webkit-progress-value {
- background-color: #0082ff;
- }
- progress::-moz-progress-bar {
- background-color: #fff;
- }
- /* trash */
- .btn-tag-negative {
- position: relative;
- top: -2px;
- padding: 0px 3px;
- border: 1px solid #0082ff;
- color: #fff;
- background: #0082ff;
- display: inline-block;
- border-radius: 3px;
- }
- .btn-tag-sub-negative {
- position: relative;
- top: -2px;
- padding: 0px 3px;
- border: 1px solid #969aa5;
- color: #fff;
- background: #969aa5;
- display: inline-block;
- border-radius: 3px;
- }
- .btn-tab:first-child,.btn-tab-lg:first-child {
- border-left: 0;
- }
- .checkbox-sm {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- font-size: 13px;
- line-height: 22px;
- }
- .radio-sm {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- font-size: 13px;
- line-height: 22px;
- }
- .box-black {
- top: 0;
- width: 100%;
- height: 100%;
- background: #1d1f20;
- box-sizing: border-box;
- padding: 6%;
- }
- .box-blue {
- top: 0;
- width: 100%;
- height: 100%;
- background: #0082ff;
- box-sizing: border-box;
- padding: 6%;
- }
- .box-w {
- top: 0;
- width: 100%;
- height: 100%;
- background: #fff;
- box-sizing: border-box;
- padding: 5%;
- }
- .add-btn-lnb {
- color: rgba(255,255,255,.6);
- cursor: pointer;
- }
- .add-btn-lnb:hover {
- background-color: #3C3D47;
- color: #fff;
- }
- /* Rules for sizing the icon. */
- i {
- position: relative;
- }
- .material-icons {
- vertical-align: middle;
- }
- .material-icons.md-13 {
- font-size: 13px;
- }
- .material-icons.md-16 {
- font-size: 16px;
- }
- .material-icons.md-18 {
- font-size: 18px;
- }
- .material-icons.md-24 {
- font-size: 24px;
- }
- .material-icons.md-36 {
- font-size: 36px;
- }
- .material-icons.md-48 {
- font-size: 48px;
- }
- /* badge */
- .badge-normal {
- padding: 1px 2px;
- border: 1px solid #a9acb2;
- border-radius: 3px;
- color: #a9acb2;
- font-size: 12px;
- cursor: default;
- display: inline-block;
- text-align: center;
- line-height: 1em;
- }
- .badge-owner {
- padding: 1px 2px;
- border: 1px solid #a9acb2;
- border-radius: 3px;
- color: #a9acb2;
- font-size: 12px;
- cursor: default;
- display: inline-block;
- text-align: center;
- line-height: 1em;
- }
- .badge-master,.badge-paid {
- padding: 1px 2px;
- border: 1px solid #42a5f5;
- border-radius: 3px;
- color: #42a5f5;
- font-size: 12px;
- cursor: default;
- display: inline-block;
- text-align: center;
- line-height: 1em;
- }
- .badge-marketer,.badge-viral {
- padding: 1px 2px;
- border: 1px solid #32b384;
- border-radius: 3px;
- color: #32b384;
- font-size: 12px;
- cursor: default;
- display: inline-block;
- text-align: center;
- line-height: 1em;
- }
- /* fallback λμλμ΄ μΆκ°νμ css*/
- /*@font-face {
- font-family: 'Material Icons';
- font-style: normal;
- font-weight: 400;
- src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
- }*/
- /*
- .material-icons {
- font-family: 'Material Icons';
- font-weight: normal;
- font-style: normal;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- -webkit-font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- }*/
- .btn-search {
- position: relative;
- box-sizing: border-box;
- padding: 3px 10px;
- border-radius: 3px;
- transition: background .2s;
- outline: none;
- }
- .btn-tag-negative {
- position: relative;
- top: -2px;
- padding: 0px 3px;
- border: 1px solid #0082ff;
- color: #fff;
- background: #0082ff;
- display: inline-block;
- border-radius: 3px;
- }
- .btn-key {
- color: #fff;
- background: #0082ff;
- box-shadow: 0 1px 0 rgba(0,0,0,.06);
- }
- .btn-tag-sub-negative {
- position: relative;
- top: -2px;
- padding: 0px 3px;
- border: 1px solid #969aa5;
- color: #fff;
- background: #969aa5;
- display: inline-block;
- border-radius: 3px;
- }
- .btn-tag-key.app,.btn-tag-action.app,.btn-tag-sub.app {
- position: absolute;
- top: 13px;
- font-size: 10px;
- background: none;
- z-index: 2;
- border: 1px solid rgba(255,255,255,.5);
- }
- .btn-tag-key.app {
- color: #aed7ff;
- }
- .btn-tag-action.app {
- color: #a3e1cb;
- }
- .btn-tag-sub.app {
- color: #e3e5e8;
- }
- .btn-tab:first-child,.btn-tab-lg:first-child {
- border-left: 0;
- }
- .checkbox-sm {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- font-size: 13px;
- line-height: 22px;
- }
- .radio-sm {
- box-sizing: border-box;
- border-radius: 3px;
- transition: background .2s;
- border: 0;
- display: inline-block;
- font-size: 13px;
- line-height: 22px;
- }
- .col-label {
- font-size: 13px;
- font-weight: 500;
- color: #2d2d3c;
- background: #f7f8fa;
- /* νμ λ°μ΄ν°κ° μμ κ²½μ° νκ° νμ΄μ§λ λ¬Έμ ν΄κ²°μ μν΄ νμ */
- min-width: 70px;
- word-break: keep-all;
- }
- .cel-channel-img {
- width: 13px;
- height: 13px;
- position: relative;
- top: 1px;
- border-radius: 3px;
- }
- .cel.device-view {
- font-size: 17px;
- }
- .cel.invalid {
- font-size: 14px;
- color: #a9acb6;
- background: rgba(208, 210, 215, .3);
- cursor: not-allowed;
- }
- table.compare-table.xs td {
- padding: 2px 0px;
- border: 1px solid #e3e5e8;
- border-width: 1px 0 1px 0;
- }
- table.compare-table.xs tr {
- background: none;
- }
- .d-app-layer {
- position: absolute;
- width: 200px;
- height: 60px;
- background: rgba(45, 45, 60, .3);
- z-index: 1;
- top: 0;
- left: 0;
- transition: background .2s;
- }
- .d-app-txt {
- position: relative;
- width: 90px;
- z-index: 2;
- color: #fff;
- font-weight: 500;
- line-height: 35px;
- }
- .d-app-setting {
- position: relative;
- z-index: 2;
- color: #fff;
- font-size: 15px;
- }
- .loading {
- position: fixed;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- padding-top: 35%;
- background: rgba(239, 241, 245, .9);
- text-align: center;
- color: #a9acb6;
- font-size: 50px;
- z-index: 1000;
- }
- .d-sidebar-menu-1depth {
- display: block;
- padding: 10px 15px;
- color: rgba(255, 255, 255, .7);
- font-size: 13px;
- transition: background .2s;
- /* border-top: 1px solid rgba(0,0,0,.04); */
- }
- .d-sidebar-menu-1depth:hover {
- cursor: pointer;
- background: rgba(255, 255, 255, .1);
- }
- .snackbar {
- cursor: pointer;
- }
- .d-app-list-layer {
- z-index: 2001 !important;
- }
- .layout-slide-right {
- transform: translate3d(150px, 0, 100px);
- -webkit-transform: translate3d(150px, 0, 100px);
- }
- .sidebar-slide-right {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- visibility: visible;
- }
- .sidebar-slide-left {
- -webkit-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- visibility: visible;
- }
- .progress-bar {
- background-color: 0;
- height: 4px;
- width: 100%;
- position: fixed;
- margin-top: -19px;
- z-index: 500;
- }
- .progress-bar span {
- display: inline-block;
- height: 100%;
- position: relative;
- top: -4px;
- transition: width .4s ease-in-out;
- box-shadow: 0 3px 5px rgba(0,0,0,.15);
- }
- /* μλ‘ λ°μλ λΆλΆμ μμ΄μ μΌλ¨ μ£Όμμ²λ¦¬. κΉ¨μ§μ§ μλμ§ νμΈν΄λ³΄κΈ°.*/
- /*
- .d-lnb-channel {
- cursor: pointer;
- transition: opacity .2s;
- display: inline-block;
- }
- .d-lnb-channel:hover {
- opacity: .7;
- }
- .d-lnb-channel-ic {
- width: 28px;
- height: 28px;
- border: 1px solid rgba(0,0,0,.04);
- border-radius: 3px;
- }
- .datepicker {
- position: relative;
- right: 0;
- height: 59px;
- border-left: 1px solid #e3e5e8;
- box-sizing: border-box;
- padding: 10px 20px;
- color: #2d2d3c;
- transition: background .2s;
- line-height: 1.3em;
- }
- .datepicker:hover {
- cursor: pointer;
- background: #e3e5e8;
- }
- .data-update {
- position: relative;
- box-sizing: border-box;
- height: 60px;
- padding: 15px;
- color: #838784;
- }
- .page-historyback {
- position: relative;
- width: 25px;
- height: 25px;
- color: #a9acb6;
- transition: color .2s;
- }
- .page-historyback:hover {
- color: #969aa5;
- cursor: pointer
- }
- */
- .blue span {
- background-color: #2962FF;
- }
- .stripes span {
- background-size: 5px 5px;
- background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
- animation: animate-stripes 2s linear infinite;
- }
- @keyframes animate-stripes {
- 0% {
- background-position: 0 0;
- }
- 100% {
- background-position: 60px 0;
- }
- }
- .secondary {
- word-break: break-all;
- }
- .hoverList {
- background: #eff1f5;
- cursor: pointer;
- }
- .content {
- font-size: 14.5px;
- }
- li .highlight {
- color: #0082ff;
- }
- .btn-block input[type="file"] {
- position: absolute;
- top: 0px;
- left: 0px;
- width: 157px;
- height: 47px;
- font-size: 20px;
- cursor: pointer;
- /* good browser */
- opacity: 0;
- /* IE 5-7 */
- filter: alpha(opacity=0);
- /* IE 8 */
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- /* Netscape */
- -moz-opacity: 0;
- /* Safari 1.x */
- -khtml-opacity: 0;
- }
- .date {
- font-size: 14px !important;
- color: rgba(0,0,0,.38) !important;
- font-weight: 400 !important;
- }
- .input-group {
- border: 2px solid rgba(0, 0, 0, .3);
- border-radius: 3px;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- }
- .input-group input {
- flex-grow: 1;
- border: none !important;
- text-overflow: ellipsis;
- }
- .chip {
- background-color: #e5e5e5;
- border-radius: 25px;
- position: relative;
- margin: 5px;
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- .clicked {
- background: #E3E5E8;
- }
- table.stats-new td {
- min-width: 135px;
- }
- table.stats-new td.list-select,table.stats-new th.list-select {
- min-width: 50px !important;
- }
- .invisible-scrollbar::-webkit-scrollbar {
- display: none !important;
- }
- .invisible-scrollbar {
- -ms-overflow-style: none;
- }
- /* fallback */
- @font-face {
- font-family: 'Material Icons';
- font-style: normal;
- font-weight: 400;
- src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v19/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2'), url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff) format('woff'), url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.ttf) format('truetype');
- }
- .material-icons {
- font-family: 'Material Icons';
- font-weight: normal;
- font-style: normal;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- -webkit-font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- /* Support for Safari and Chrome. */
- text-rendering: optimizeLegibility;
- /* Support for Firefox. */
- -moz-osx-font-smoothing: grayscale;
- /* Support for IE. */
- font-feature-settings: 'liga';
- }
- .d-app-list-menu {
- width: 180px;
- position: relative;
- top: 5px;
- }
- .d-app-list-txt {
- width: 80px;
- }
- .d-service-menu-1depth {
- display: block;
- position: relative;
- width: 200px;
- padding: 15px 20px;
- font-size: 13px;
- color: #404353;
- box-sizing: border-box;
- transition: background .2s;
- }
- .d-service-menu-1depth.on,.d-service-menu-1depth.on:hover {
- background: #f7f8fa;
- color: #2d2d3c;
- font-weight: 500;
- }
- .d-service-menu-1depth-on-bar {
- border-left: 4px solid #0082ff;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- cursor: pointer;
- }
- .d-service-menu-1depth:hover {
- cursor: pointer;
- background: #eff1f5;
- }
- .d-service-menu-1depth-ic {
- width: 30px;
- font-size: 17px;
- }
- .d-ads-set {
- width: 199px;
- background: #fff;
- border-right: 1px solid #e3e5e8;
- box-sizing: border-box;
- position: relative;
- }
- /* header */
- .d-header {
- width: 100%;
- height: 60px;
- background: #fff;
- box-sizing: border-box;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 49;
- min-width: 768px;
- box-shadow: 0 1px 1px rgba(0,0,0,.06);
- }
- .d-header-service-menu {
- position: relative;
- left: 230px;
- height: 60px;
- box-sizing: border-box;
- padding: 20px;
- color: #404353;
- transition: background .2s;
- }
- .d-header-service-menu.on,.d-header-service-menu.on:hover {
- color: #2d2d3c;
- background: #f7f8fa;
- font-weight: 500;
- border-bottom: 4px solid #0082ff;
- }
- .d-header-service-menu:hover {
- background: #eff1f5;
- cursor: pointer;
- }
- .d-header-profile {
- position: relative;
- /* νλ‘νμΌ κΈΈμ΄ λλ κΈΈ κ²½μ° λλΉ */
- width: 215px;
- height: 60px;
- box-sizing: border-box;
- padding: 13px 20px;
- transition: background .2s;
- }
- .d-header-profile-txt {
- width: 150px;
- position: relative;
- /*top: 10px;*/
- }
- .d-header-profile:hover {
- cursor: pointer;
- background: #eff1f5;
- }
- .d-header-profile-img {
- width: 35px;
- height: 35px;
- border-radius: 100%;
- box-sizing: border-box;
- border: 1px solid rgba(0,0,0,.04);
- }
- .d-header-profile-menu {
- position: relative;
- /* line hight λΆμΌμΉ λ¬Έμ λ‘ νμ */
- min-width: 130px;
- }
- .d-header-profile-menu-ic {
- width: 25px;
- }
- /* create simplelink */
- .simplelink-channel-list {
- overflow: auto;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- .simplelink-channel-group {
- /*width: 100%;*/
- height: 40px;
- padding: 10px;
- }
- .simplelink-channel-img {
- position: relative;
- left: -5px;
- width: 35px;
- height: 35px;
- line-height: 35px;
- border: 1px solid #e3e5e8;
- border-radius: 3px;
- box-sizing: border-box;
- }
- .simplelink-channel-label {
- max-width: 75px;
- font-size: 13px;
- }
- .simplelink-channel-count {
- position: relative;
- min-width: 45px;
- text-align: right;
- right: 0;
- }
- .simplelink-channel-ic-group {
- position: relative;
- /*left: -5px;*/
- width: 35px;
- height: 35px;
- text-align: center;
- }
- .simplelink-channel-ic-desktop {
- position: absolute;
- top: 4px;
- left: 7px;
- font-size: 20px;
- }
- .simplelink-channel-ic-mobile {
- position: absolute;
- top: -4px;
- left: 10px;
- font-size: 30px;
- }
- .simplelink-channel-ic-delete {
- position: absolute;
- top: -2px;
- left: 5px;
- font-size: 15px;
- }
- .simplelink-medium-ic {
- position: relative;
- top: 3px;
- width: 35px;
- height: 40px;
- margin-right: 10px;
- text-align: center;
- font-size: 30px;
- color: #a9acb6;
- }
- .simplelink-medium-txt {
- position: relative;
- color: #2d2d3c;
- font-size: 13px;
- max-width: 110px;
- }
- .simplelink-channel-delete {
- position: relative;
- top: -12px;
- }
- .simplelink-channel-add {
- height: 105px;
- text-align: center;
- /*line-height: 85px;*/
- }
- .simplelink-campaign-add {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-top: 0;
- }
- .simplelink-added-value {
- width: 340px;
- }
- /* web-to-app btn */
- .web-to-app-input {
- width: 90px;
- color: #2d2d3c;
- font-size: 9px;
- font-weight: 500;
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- box-sizing: border-box;
- padding: 0 5px;
- height: 20px;
- line-height: 20px;
- border-top: 1px solid rgba(0,0,0,.3);
- border-left: 1px solid rgba(0,0,0,.3);
- border-bottom: 1px solid rgba(0,0,0,.3);
- box-shadow: 0 0 0 1px rgba(0,0,0,.3);
- position: relative;
- right: -2px;
- }
- .web-to-app-input:focus {
- border-top: 1px solid #0082ff;
- border-left: 1px solid #0082ff;
- border-bottom: 1px solid #0082ff;
- box-shadow: 0 0 0 1px #0082ff;
- outline: none;
- }
- .web-to-app-btn {
- display: inline-block;
- position: relative;
- float: right;
- margin-right: 15px;
- width: 80px;
- height: 22px;
- background: #0082ff;
- color: #fff;
- font-size: 9px;
- text-align: center;
- line-height: 22px;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- vertical-align: top;
- top: 19px;
- font-weight: 500;
- transition: background .2s;
- z-index: 1;
- box-shadow: 0 1px 0 rgba(0,0,0,.06);
- }
- .web-to-app-btn:hover {
- background: #0874de;
- cursor: pointer;
- }
- .transition {
- transition: .3s;
- -webkit-transition: .3s;
- -moz-transition: .3s;
- -ms-transition: .3s;
- }
- .transition-fast {
- transition: .15s;
- -webkit-transition: .015s;
- -moz-transition: .015s;
- -ms-transition: .015s;
- }
- .animated {
- -webkit-animation-duration: .3s;
- animation-duration: .3s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- }
- @-webkit-keyframes bounceInDown {
- from, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, -3000px, 0);
- transform: translate3d(0, -3000px, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, 25px, 0);
- transform: translate3d(0, 25px, 0);
- }
- 75% {
- -webkit-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
- 90% {
- -webkit-transform: translate3d(0, 5px, 0);
- transform: translate3d(0, 5px, 0);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes bounceInDown {
- from, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, -3000px, 0);
- transform: translate3d(0, -3000px, 0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, 25px, 0);
- transform: translate3d(0, 25px, 0);
- }
- 75% {
- -webkit-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
- 90% {
- -webkit-transform: translate3d(0, 5px, 0);
- transform: translate3d(0, 5px, 0);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes slideInUp {
- from {
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- visibility: visible;
- }
- to {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- @keyframes slideInUp {
- from {
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- visibility: visible;
- }
- to {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- .slideInUp {
- -webkit-animation-name: slideInUp;
- animation-name: slideInUp;
- }
- @-webkit-keyframes slideOutDown {
- from {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- }
- }
- @keyframes slideOutDown {
- from {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- }
- }
- .slideOutDown {
- -webkit-animation-name: slideOutDown;
- animation-name: slideOutDown;
- animation-iteration-count: infinite;
- }
- @-webkit-keyframes slideInDown {
- from {
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- visibility: visible;
- }
- to {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- @keyframes slideInDown {
- from {
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- visibility: visible;
- }
- to {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- .slideInDown {
- -webkit-animation-name: slideInDown;
- animation-name: slideInDown;
- }
- @-webkit-keyframes fadeInDown {
- from {
- opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes slideInRight {
- from {
- -webkit-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- visibility: visible;
- }
- to {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- @keyframes slideInRight {
- from {
- -webkit-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- visibility: visible;
- }
- to {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- .slideInRight {
- -webkit-animation-name: slideInRight;
- animation-name: slideInRight;
- }
- @-webkit-keyframes fadeInDown {
- from {
- opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInDown {
- from {
- opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- .fadeInDown {
- -webkit-animation-name: fadeInDown;
- animation-name: fadeInDown;
- }
- @-webkit-keyframes fadeInDownBig {
- from {
- opacity: 0;
- -webkit-transform: translate3d(0, -2000px, 0);
- transform: translate3d(0, -2000px, 0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes fadeOutUp {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- display: none;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- }
- }
- @keyframes fadeOutUp {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0, -100%, 0);
- transform: translate3d(0, -100%, 0);
- }
- }
- @-webkit-keyframes fadeOutLeft {
- from {
- opacity: 1;
- }
- to {
- -webkit-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- }
- }
- @keyframes fadeOutLeft {
- from {
- opacity: 1;
- }
- to {
- -webkit-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- }
- }
- /*λ μ΄μμμ 컨ν μΈ λΆλΆμ΄ λ°λ €λλ λΆλΆ.*/
- @keyframes slideDown {
- 0% {
- opacity: 0;
- transform: translateY(-100%);
- }
- 50% {
- transform: translateY(8%);
- }
- 65% {
- transform: translateY(-4%);
- }
- 80% {
- transform: translateY(4%);
- }
- 95% {
- transform: translateY(-2%);
- }
- 100% {
- opacity: 1;
- transform: translateY(0%);
- }
- }
- @-webkit-keyframes slideDown {
- 0% {
- opacity: 0;
- -webkit-transform: translateY(-100%);
- }
- 50% {
- -webkit-transform: translateY(8%);
- }
- 65% {
- -webkit-transform: translateY(-4%);
- }
- 80% {
- -webkit-transform: translateY(4%);
- }
- 95% {
- -webkit-transform: translateY(-2%);
- }
- 100% {
- opacity: 1;
- -webkit-transform: translateY(0%);
- }
- }
- @charset "UTF-8";
- /*!
- * animate.css -http://daneden.me/animate
- * Version - 3.5.0
- * Licensed under the MIT license - http://opensource.org/licenses/MIT
- *
- * Copyright (c) 2016 Daniel Eden
- */
- .animated {
- -webkit-animation-duration: 1s;
- animation-duration: 1s;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- }
- .animated.infinite {
- -webkit-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- }
- .animated.flipOutX {
- -webkit-animation-duration: .75s;
- animation-duration: .75s;
- }
- @-webkit-keyframes bounce {
- 0%, 20%, 53%, 80%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- 40%, 43% {
- -webkit-transform: translate3d(0,-30px,0);
- transform: translate3d(0,-30px,0);
- }
- 40%, 43%, 70% {
- -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
- animation-timing-function: cubic-bezier(.755,.05,.855,.06);
- }
- 70% {
- -webkit-transform: translate3d(0,-15px,0);
- transform: translate3d(0,-15px,0);
- }
- 90% {
- -webkit-transform: translate3d(0,-4px,0);
- transform: translate3d(0,-4px,0);
- }
- }
- @keyframes bounce {
- 0%, 20%, 53%, 80%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- 40%, 43% {
- -webkit-transform: translate3d(0,-30px,0);
- transform: translate3d(0,-30px,0);
- }
- 40%, 43%, 70% {
- -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
- animation-timing-function: cubic-bezier(.755,.05,.855,.06);
- }
- 70% {
- -webkit-transform: translate3d(0,-15px,0);
- transform: translate3d(0,-15px,0);
- }
- 90% {
- -webkit-transform: translate3d(0,-4px,0);
- transform: translate3d(0,-4px,0);
- }
- }
- @-webkit-keyframes flash {
- 0%, 50%, to {
- opacity: 1;
- }
- 25%, 75% {
- opacity: 0;
- }
- }
- @keyframes flash {
- 0%, 50%, to {
- opacity: 1;
- }
- 25%, 75% {
- opacity: 0;
- }
- }
- @-webkit-keyframes pulse {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- 50% {
- -webkit-transform: scale3d(1.05,1.05,1.05);
- transform: scale3d(1.05,1.05,1.05);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
- @keyframes pulse {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- 50% {
- -webkit-transform: scale3d(1.05,1.05,1.05);
- transform: scale3d(1.05,1.05,1.05);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
- @-webkit-keyframes rubberBand {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- 30% {
- -webkit-transform: scale3d(1.25,.75,1);
- transform: scale3d(1.25,.75,1);
- }
- 40% {
- -webkit-transform: scale3d(.75,1.25,1);
- transform: scale3d(.75,1.25,1);
- }
- 50% {
- -webkit-transform: scale3d(1.15,.85,1);
- transform: scale3d(1.15,.85,1);
- }
- 65% {
- -webkit-transform: scale3d(.95,1.05,1);
- transform: scale3d(.95,1.05,1);
- }
- 75% {
- -webkit-transform: scale3d(1.05,.95,1);
- transform: scale3d(1.05,.95,1);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
- @keyframes rubberBand {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- 30% {
- -webkit-transform: scale3d(1.25,.75,1);
- transform: scale3d(1.25,.75,1);
- }
- 40% {
- -webkit-transform: scale3d(.75,1.25,1);
- transform: scale3d(.75,1.25,1);
- }
- 50% {
- -webkit-transform: scale3d(1.15,.85,1);
- transform: scale3d(1.15,.85,1);
- }
- 65% {
- -webkit-transform: scale3d(.95,1.05,1);
- transform: scale3d(.95,1.05,1);
- }
- 75% {
- -webkit-transform: scale3d(1.05,.95,1);
- transform: scale3d(1.05,.95,1);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
- @-webkit-keyframes shake {
- 0%, to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- 10%, 30%, 50%, 70%, 90% {
- -webkit-transform: translate3d(-10px,0,0);
- transform: translate3d(-10px,0,0);
- }
- 20%, 40%, 60%, 80% {
- -webkit-transform: translate3d(10px,0,0);
- transform: translate3d(10px,0,0);
- }
- }
- @keyframes shake {
- 0%, to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- 10%, 30%, 50%, 70%, 90% {
- -webkit-transform: translate3d(-10px,0,0);
- transform: translate3d(-10px,0,0);
- }
- 20%, 40%, 60%, 80% {
- -webkit-transform: translate3d(10px,0,0);
- transform: translate3d(10px,0,0);
- }
- }
- .shake {
- -webkit-animation-name: shake;
- animation-name: shake;
- }
- @-webkit-keyframes headShake {
- 0% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- }
- 6.5% {
- -webkit-transform: translateX(-6px) rotateY(-9deg);
- transform: translateX(-6px) rotateY(-9deg);
- }
- 18.5% {
- -webkit-transform: translateX(5px) rotateY(7deg);
- transform: translateX(5px) rotateY(7deg);
- }
- 31.5% {
- -webkit-transform: translateX(-3px) rotateY(-5deg);
- transform: translateX(-3px) rotateY(-5deg);
- }
- 43.5% {
- -webkit-transform: translateX(2px) rotateY(3deg);
- transform: translateX(2px) rotateY(3deg);
- }
- 50% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- }
- }
- @keyframes headShake {
- 0% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- }
- 6.5% {
- -webkit-transform: translateX(-6px) rotateY(-9deg);
- transform: translateX(-6px) rotateY(-9deg);
- }
- 18.5% {
- -webkit-transform: translateX(5px) rotateY(7deg);
- transform: translateX(5px) rotateY(7deg);
- }
- 31.5% {
- -webkit-transform: translateX(-3px) rotateY(-5deg);
- transform: translateX(-3px) rotateY(-5deg);
- }
- 43.5% {
- -webkit-transform: translateX(2px) rotateY(3deg);
- transform: translateX(2px) rotateY(3deg);
- }
- 50% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- }
- }
- @-webkit-keyframes swing {
- 20% {
- -webkit-transform: rotate(15deg);
- transform: rotate(15deg);
- }
- 40% {
- -webkit-transform: rotate(-10deg);
- transform: rotate(-10deg);
- }
- 60% {
- -webkit-transform: rotate(5deg);
- transform: rotate(5deg);
- }
- 80% {
- -webkit-transform: rotate(-5deg);
- transform: rotate(-5deg);
- }
- to {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- }
- @keyframes swing {
- 20% {
- -webkit-transform: rotate(15deg);
- transform: rotate(15deg);
- }
- 40% {
- -webkit-transform: rotate(-10deg);
- transform: rotate(-10deg);
- }
- 60% {
- -webkit-transform: rotate(5deg);
- transform: rotate(5deg);
- }
- 80% {
- -webkit-transform: rotate(-5deg);
- transform: rotate(-5deg);
- }
- to {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- }
- @-webkit-keyframes tada {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- 10%, 20% {
- -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);
- transform: scale3d(.9,.9,.9) rotate(-3deg);
- }
- 30%, 50%, 70%, 90% {
- -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg);
- transform: scale3d(1.1,1.1,1.1) rotate(3deg);
- }
- 40%, 60%, 80% {
- -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
- transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
- @keyframes tada {
- 0% {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- 10%, 20% {
- -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);
- transform: scale3d(.9,.9,.9) rotate(-3deg);
- }
- 30%, 50%, 70%, 90% {
- -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg);
- transform: scale3d(1.1,1.1,1.1) rotate(3deg);
- }
- 40%, 60%, 80% {
- -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
- transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
- }
- to {
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
- @-webkit-keyframes wobble {
- 0% {
- -webkit-transform: none;
- transform: none;
- }
- 15% {
- -webkit-transform: translate3d(-25%,0,0) rotate(-5deg);
- transform: translate3d(-25%,0,0) rotate(-5deg);
- }
- 30% {
- -webkit-transform: translate3d(20%,0,0) rotate(3deg);
- transform: translate3d(20%,0,0) rotate(3deg);
- }
- 45% {
- -webkit-transform: translate3d(-15%,0,0) rotate(-3deg);
- transform: translate3d(-15%,0,0) rotate(-3deg);
- }
- 60% {
- -webkit-transform: translate3d(10%,0,0) rotate(2deg);
- transform: translate3d(10%,0,0) rotate(2deg);
- }
- 75% {
- -webkit-transform: translate3d(-5%,0,0) rotate(-1deg);
- transform: translate3d(-5%,0,0) rotate(-1deg);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes wobble {
- 0% {
- -webkit-transform: none;
- transform: none;
- }
- 15% {
- -webkit-transform: translate3d(-25%,0,0) rotate(-5deg);
- transform: translate3d(-25%,0,0) rotate(-5deg);
- }
- 30% {
- -webkit-transform: translate3d(20%,0,0) rotate(3deg);
- transform: translate3d(20%,0,0) rotate(3deg);
- }
- 45% {
- -webkit-transform: translate3d(-15%,0,0) rotate(-3deg);
- transform: translate3d(-15%,0,0) rotate(-3deg);
- }
- 60% {
- -webkit-transform: translate3d(10%,0,0) rotate(2deg);
- transform: translate3d(10%,0,0) rotate(2deg);
- }
- 75% {
- -webkit-transform: translate3d(-5%,0,0) rotate(-1deg);
- transform: translate3d(-5%,0,0) rotate(-1deg);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes jello {
- 0%, 11.1%, to {
- -webkit-transform: none;
- transform: none;
- }
- 22.2% {
- -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
- transform: skewX(-12.5deg) skewY(-12.5deg);
- }
- 33.3% {
- -webkit-transform: skewX(6.25deg) skewY(6.25deg);
- transform: skewX(6.25deg) skewY(6.25deg);
- }
- 44.4% {
- -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
- transform: skewX(-3.125deg) skewY(-3.125deg);
- }
- 55.5% {
- -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
- transform: skewX(1.5625deg) skewY(1.5625deg);
- }
- 66.6% {
- -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
- transform: skewX(-.78125deg) skewY(-.78125deg);
- }
- 77.7% {
- -webkit-transform: skewX(.390625deg) skewY(.390625deg);
- transform: skewX(.390625deg) skewY(.390625deg);
- }
- 88.8% {
- -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
- transform: skewX(-.1953125deg) skewY(-.1953125deg);
- }
- }
- @keyframes jello {
- 0%, 11.1%, to {
- -webkit-transform: none;
- transform: none;
- }
- 22.2% {
- -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
- transform: skewX(-12.5deg) skewY(-12.5deg);
- }
- 33.3% {
- -webkit-transform: skewX(6.25deg) skewY(6.25deg);
- transform: skewX(6.25deg) skewY(6.25deg);
- }
- 44.4% {
- -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
- transform: skewX(-3.125deg) skewY(-3.125deg);
- }
- 55.5% {
- -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
- transform: skewX(1.5625deg) skewY(1.5625deg);
- }
- 66.6% {
- -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
- transform: skewX(-.78125deg) skewY(-.78125deg);
- }
- 77.7% {
- -webkit-transform: skewX(.390625deg) skewY(.390625deg);
- transform: skewX(.390625deg) skewY(.390625deg);
- }
- 88.8% {
- -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
- transform: skewX(-.1953125deg) skewY(-.1953125deg);
- }
- }
- @-webkit-keyframes bounceIn {
- 0%, 20%, 40%, 60%, 80%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.3,.3,.3);
- transform: scale3d(.3,.3,.3);
- }
- 20% {
- -webkit-transform: scale3d(1.1,1.1,1.1);
- transform: scale3d(1.1,1.1,1.1);
- }
- 40% {
- -webkit-transform: scale3d(.9,.9,.9);
- transform: scale3d(.9,.9,.9);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(1.03,1.03,1.03);
- transform: scale3d(1.03,1.03,1.03);
- }
- 80% {
- -webkit-transform: scale3d(.97,.97,.97);
- transform: scale3d(.97,.97,.97);
- }
- to {
- opacity: 1;
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
- @keyframes bounceIn {
- 0%, 20%, 40%, 60%, 80%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.3,.3,.3);
- transform: scale3d(.3,.3,.3);
- }
- 20% {
- -webkit-transform: scale3d(1.1,1.1,1.1);
- transform: scale3d(1.1,1.1,1.1);
- }
- 40% {
- -webkit-transform: scale3d(.9,.9,.9);
- transform: scale3d(.9,.9,.9);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(1.03,1.03,1.03);
- transform: scale3d(1.03,1.03,1.03);
- }
- 80% {
- -webkit-transform: scale3d(.97,.97,.97);
- transform: scale3d(.97,.97,.97);
- }
- to {
- opacity: 1;
- -webkit-transform: scaleX(1);
- transform: scaleX(1);
- }
- }
- @-webkit-keyframes bounceInDown {
- 0%, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,-3000px,0);
- transform: translate3d(0,-3000px,0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0,25px,0);
- transform: translate3d(0,25px,0);
- }
- 75% {
- -webkit-transform: translate3d(0,-10px,0);
- transform: translate3d(0,-10px,0);
- }
- 90% {
- -webkit-transform: translate3d(0,5px,0);
- transform: translate3d(0,5px,0);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes bounceInDown {
- 0%, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,-3000px,0);
- transform: translate3d(0,-3000px,0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0,25px,0);
- transform: translate3d(0,25px,0);
- }
- 75% {
- -webkit-transform: translate3d(0,-10px,0);
- transform: translate3d(0,-10px,0);
- }
- 90% {
- -webkit-transform: translate3d(0,5px,0);
- transform: translate3d(0,5px,0);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes bounceInLeft {
- 0%, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-3000px,0,0);
- transform: translate3d(-3000px,0,0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(25px,0,0);
- transform: translate3d(25px,0,0);
- }
- 75% {
- -webkit-transform: translate3d(-10px,0,0);
- transform: translate3d(-10px,0,0);
- }
- 90% {
- -webkit-transform: translate3d(5px,0,0);
- transform: translate3d(5px,0,0);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes bounceInLeft {
- 0%, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-3000px,0,0);
- transform: translate3d(-3000px,0,0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(25px,0,0);
- transform: translate3d(25px,0,0);
- }
- 75% {
- -webkit-transform: translate3d(-10px,0,0);
- transform: translate3d(-10px,0,0);
- }
- 90% {
- -webkit-transform: translate3d(5px,0,0);
- transform: translate3d(5px,0,0);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes bounceInRight {
- 0%, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(3000px,0,0);
- transform: translate3d(3000px,0,0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(-25px,0,0);
- transform: translate3d(-25px,0,0);
- }
- 75% {
- -webkit-transform: translate3d(10px,0,0);
- transform: translate3d(10px,0,0);
- }
- 90% {
- -webkit-transform: translate3d(-5px,0,0);
- transform: translate3d(-5px,0,0);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes bounceInRight {
- 0%, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(3000px,0,0);
- transform: translate3d(3000px,0,0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(-25px,0,0);
- transform: translate3d(-25px,0,0);
- }
- 75% {
- -webkit-transform: translate3d(10px,0,0);
- transform: translate3d(10px,0,0);
- }
- 90% {
- -webkit-transform: translate3d(-5px,0,0);
- transform: translate3d(-5px,0,0);
- }
- to {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes bounceInUp {
- 0%, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,3000px,0);
- transform: translate3d(0,3000px,0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0,-20px,0);
- transform: translate3d(0,-20px,0);
- }
- 75% {
- -webkit-transform: translate3d(0,10px,0);
- transform: translate3d(0,10px,0);
- }
- 90% {
- -webkit-transform: translate3d(0,-5px,0);
- transform: translate3d(0,-5px,0);
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- @keyframes bounceInUp {
- 0%, 60%, 75%, 90%, to {
- -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
- animation-timing-function: cubic-bezier(.215,.61,.355,1);
- }
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,3000px,0);
- transform: translate3d(0,3000px,0);
- }
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0,-20px,0);
- transform: translate3d(0,-20px,0);
- }
- 75% {
- -webkit-transform: translate3d(0,10px,0);
- transform: translate3d(0,10px,0);
- }
- 90% {
- -webkit-transform: translate3d(0,-5px,0);
- transform: translate3d(0,-5px,0);
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- @-webkit-keyframes bounceOut {
- 20% {
- -webkit-transform: scale3d(.9,.9,.9);
- transform: scale3d(.9,.9,.9);
- }
- 50%, 55% {
- opacity: 1;
- -webkit-transform: scale3d(1.1,1.1,1.1);
- transform: scale3d(1.1,1.1,1.1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale3d(.3,.3,.3);
- transform: scale3d(.3,.3,.3);
- }
- }
- @keyframes bounceOut {
- 20% {
- -webkit-transform: scale3d(.9,.9,.9);
- transform: scale3d(.9,.9,.9);
- }
- 50%, 55% {
- opacity: 1;
- -webkit-transform: scale3d(1.1,1.1,1.1);
- transform: scale3d(1.1,1.1,1.1);
- }
- to {
- opacity: 0;
- -webkit-transform: scale3d(.3,.3,.3);
- transform: scale3d(.3,.3,.3);
- }
- }
- @-webkit-keyframes bounceOutDown {
- 20% {
- -webkit-transform: translate3d(0,10px,0);
- transform: translate3d(0,10px,0);
- }
- 40%, 45% {
- opacity: 1;
- -webkit-transform: translate3d(0,-20px,0);
- transform: translate3d(0,-20px,0);
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,2000px,0);
- transform: translate3d(0,2000px,0);
- }
- }
- @keyframes bounceOutDown {
- 20% {
- -webkit-transform: translate3d(0,10px,0);
- transform: translate3d(0,10px,0);
- }
- 40%, 45% {
- opacity: 1;
- -webkit-transform: translate3d(0,-20px,0);
- transform: translate3d(0,-20px,0);
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,2000px,0);
- transform: translate3d(0,2000px,0);
- }
- }
- @-webkit-keyframes bounceOutLeft {
- 20% {
- opacity: 1;
- -webkit-transform: translate3d(20px,0,0);
- transform: translate3d(20px,0,0);
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(-2000px,0,0);
- transform: translate3d(-2000px,0,0);
- }
- }
- @keyframes bounceOutLeft {
- 20% {
- opacity: 1;
- -webkit-transform: translate3d(20px,0,0);
- transform: translate3d(20px,0,0);
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(-2000px,0,0);
- transform: translate3d(-2000px,0,0);
- }
- }
- @-webkit-keyframes bounceOutRight {
- 20% {
- opacity: 1;
- -webkit-transform: translate3d(-20px,0,0);
- transform: translate3d(-20px,0,0);
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(2000px,0,0);
- transform: translate3d(2000px,0,0);
- }
- }
- @keyframes bounceOutRight {
- 20% {
- opacity: 1;
- -webkit-transform: translate3d(-20px,0,0);
- transform: translate3d(-20px,0,0);
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(2000px,0,0);
- transform: translate3d(2000px,0,0);
- }
- }
- @-webkit-keyframes bounceOutUp {
- 20% {
- -webkit-transform: translate3d(0,-10px,0);
- transform: translate3d(0,-10px,0);
- }
- 40%, 45% {
- opacity: 1;
- -webkit-transform: translate3d(0,20px,0);
- transform: translate3d(0,20px,0);
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,-2000px,0);
- transform: translate3d(0,-2000px,0);
- }
- }
- @keyframes bounceOutUp {
- 20% {
- -webkit-transform: translate3d(0,-10px,0);
- transform: translate3d(0,-10px,0);
- }
- 40%, 45% {
- opacity: 1;
- -webkit-transform: translate3d(0,20px,0);
- transform: translate3d(0,20px,0);
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,-2000px,0);
- transform: translate3d(0,-2000px,0);
- }
- }
- @-webkit-keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
- @keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
- }
- @-webkit-keyframes fadeInDown {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,-100%,0);
- transform: translate3d(0,-100%,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInDown {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,-100%,0);
- transform: translate3d(0,-100%,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- .fadeInDown {
- -webkit-animation-name: fadeInDown;
- animation-name: fadeInDown;
- }
- @-webkit-keyframes fadeInDownBig {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,-2000px,0);
- transform: translate3d(0,-2000px,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInDownBig {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,-2000px,0);
- transform: translate3d(0,-2000px,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes fadeInLeft {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInLeft {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes fadeInLeftBig {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-2000px,0,0);
- transform: translate3d(-2000px,0,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInLeftBig {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-2000px,0,0);
- transform: translate3d(-2000px,0,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes fadeInRight {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(100%,0,0);
- transform: translate3d(100%,0,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInRight {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(100%,0,0);
- transform: translate3d(100%,0,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes fadeInRightBig {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(2000px,0,0);
- transform: translate3d(2000px,0,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInRightBig {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(2000px,0,0);
- transform: translate3d(2000px,0,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes fadeInUp {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,100%,0);
- transform: translate3d(0,100%,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInUp {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,100%,0);
- transform: translate3d(0,100%,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes fadeInUpBig {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,2000px,0);
- transform: translate3d(0,2000px,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInUpBig {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0,2000px,0);
- transform: translate3d(0,2000px,0);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes fadeOut {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
- @keyframes fadeOut {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
- }
- @-webkit-keyframes fadeOutDown {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,100%,0);
- transform: translate3d(0,100%,0);
- }
- }
- @keyframes fadeOutDown {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,100%,0);
- transform: translate3d(0,100%,0);
- }
- }
- @-webkit-keyframes fadeOutDownBig {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,2000px,0);
- transform: translate3d(0,2000px,0);
- }
- }
- @keyframes fadeOutDownBig {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,2000px,0);
- transform: translate3d(0,2000px,0);
- }
- }
- @-webkit-keyframes fadeOutLeft {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- }
- }
- @keyframes fadeOutLeft {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- }
- }
- @-webkit-keyframes fadeOutLeftBig {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(-2000px,0,0);
- transform: translate3d(-2000px,0,0);
- }
- }
- @keyframes fadeOutLeftBig {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(-2000px,0,0);
- transform: translate3d(-2000px,0,0);
- }
- }
- @-webkit-keyframes fadeOutRight {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(100%,0,0);
- transform: translate3d(100%,0,0);
- }
- }
- @keyframes fadeOutRight {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(100%,0,0);
- transform: translate3d(100%,0,0);
- }
- }
- @-webkit-keyframes fadeOutRightBig {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(2000px,0,0);
- transform: translate3d(2000px,0,0);
- }
- }
- @keyframes fadeOutRightBig {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(2000px,0,0);
- transform: translate3d(2000px,0,0);
- }
- }
- @-webkit-keyframes fadeOutUp {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,-100%,0);
- transform: translate3d(0,-100%,0);
- }
- }
- @keyframes fadeOutUp {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,-100%,0);
- transform: translate3d(0,-100%,0);
- }
- }
- @-webkit-keyframes fadeOutUpBig {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,-2000px,0);
- transform: translate3d(0,-2000px,0);
- }
- }
- @keyframes fadeOutUpBig {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(0,-2000px,0);
- transform: translate3d(0,-2000px,0);
- }
- }
- @-webkit-keyframes flip {
- 0% {
- -webkit-transform: perspective(400px) rotateY(-1turn);
- transform: perspective(400px) rotateY(-1turn);
- }
- 0%, 40% {
- -webkit-animation-timing-function: ease-out;
- animation-timing-function: ease-out;
- }
- 40% {
- -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg);
- transform: perspective(400px) translateZ(150px) rotateY(-190deg);
- }
- 50% {
- -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg);
- transform: perspective(400px) translateZ(150px) rotateY(-170deg);
- }
- 50%, 80% {
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- }
- 80% {
- -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
- transform: perspective(400px) scale3d(.95,.95,.95);
- }
- to {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- }
- }
- @keyframes flip {
- 0% {
- -webkit-transform: perspective(400px) rotateY(-1turn);
- transform: perspective(400px) rotateY(-1turn);
- }
- 0%, 40% {
- -webkit-animation-timing-function: ease-out;
- animation-timing-function: ease-out;
- }
- 40% {
- -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg);
- transform: perspective(400px) translateZ(150px) rotateY(-190deg);
- }
- 50% {
- -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg);
- transform: perspective(400px) translateZ(150px) rotateY(-170deg);
- }
- 50%, 80% {
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- }
- 80% {
- -webkit-transform: perspective(400px) scale3d(.95,.95,.95);
- transform: perspective(400px) scale3d(.95,.95,.95);
- }
- to {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- }
- }
- @-webkit-keyframes flipInX {
- 0% {
- -webkit-transform: perspective(400px) rotateX(90deg);
- transform: perspective(400px) rotateX(90deg);
- opacity: 0;
- }
- 0%, 40% {
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- }
- 40% {
- -webkit-transform: perspective(400px) rotateX(-20deg);
- transform: perspective(400px) rotateX(-20deg);
- }
- 60% {
- -webkit-transform: perspective(400px) rotateX(10deg);
- transform: perspective(400px) rotateX(10deg);
- opacity: 1;
- }
- 80% {
- -webkit-transform: perspective(400px) rotateX(-5deg);
- transform: perspective(400px) rotateX(-5deg);
- }
- to {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- }
- @keyframes flipInX {
- 0% {
- -webkit-transform: perspective(400px) rotateX(90deg);
- transform: perspective(400px) rotateX(90deg);
- opacity: 0;
- }
- 0%, 40% {
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- }
- 40% {
- -webkit-transform: perspective(400px) rotateX(-20deg);
- transform: perspective(400px) rotateX(-20deg);
- }
- 60% {
- -webkit-transform: perspective(400px) rotateX(10deg);
- transform: perspective(400px) rotateX(10deg);
- opacity: 1;
- }
- 80% {
- -webkit-transform: perspective(400px) rotateX(-5deg);
- transform: perspective(400px) rotateX(-5deg);
- }
- to {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- }
- @-webkit-keyframes flipInY {
- 0% {
- -webkit-transform: perspective(400px) rotateY(90deg);
- transform: perspective(400px) rotateY(90deg);
- opacity: 0;
- }
- 0%, 40% {
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- }
- 40% {
- -webkit-transform: perspective(400px) rotateY(-20deg);
- transform: perspective(400px) rotateY(-20deg);
- }
- 60% {
- -webkit-transform: perspective(400px) rotateY(10deg);
- transform: perspective(400px) rotateY(10deg);
- opacity: 1;
- }
- 80% {
- -webkit-transform: perspective(400px) rotateY(-5deg);
- transform: perspective(400px) rotateY(-5deg);
- }
- to {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- }
- @keyframes flipInY {
- 0% {
- -webkit-transform: perspective(400px) rotateY(90deg);
- transform: perspective(400px) rotateY(90deg);
- opacity: 0;
- }
- 0%, 40% {
- -webkit-animation-timing-function: ease-in;
- animation-timing-function: ease-in;
- }
- 40% {
- -webkit-transform: perspective(400px) rotateY(-20deg);
- transform: perspective(400px) rotateY(-20deg);
- }
- 60% {
- -webkit-transform: perspective(400px) rotateY(10deg);
- transform: perspective(400px) rotateY(10deg);
- opacity: 1;
- }
- 80% {
- -webkit-transform: perspective(400px) rotateY(-5deg);
- transform: perspective(400px) rotateY(-5deg);
- }
- to {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- }
- @-webkit-keyframes flipOutX {
- 0% {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- 30% {
- -webkit-transform: perspective(400px) rotateX(-20deg);
- transform: perspective(400px) rotateX(-20deg);
- opacity: 1;
- }
- to {
- -webkit-transform: perspective(400px) rotateX(90deg);
- transform: perspective(400px) rotateX(90deg);
- opacity: 0;
- }
- }
- @keyframes flipOutX {
- 0% {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- 30% {
- -webkit-transform: perspective(400px) rotateX(-20deg);
- transform: perspective(400px) rotateX(-20deg);
- opacity: 1;
- }
- to {
- -webkit-transform: perspective(400px) rotateX(90deg);
- transform: perspective(400px) rotateX(90deg);
- opacity: 0;
- }
- }
- .flipOutX {
- -webkit-animation-name: flipOutX;
- animation-name: flipOutX;
- -webkit-backface-visibility: visible!important;
- backface-visibility: visible!important;
- }
- @-webkit-keyframes flipOutY {
- 0% {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- 30% {
- -webkit-transform: perspective(400px) rotateY(-15deg);
- transform: perspective(400px) rotateY(-15deg);
- opacity: 1;
- }
- to {
- -webkit-transform: perspective(400px) rotateY(90deg);
- transform: perspective(400px) rotateY(90deg);
- opacity: 0;
- }
- }
- @keyframes flipOutY {
- 0% {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- 30% {
- -webkit-transform: perspective(400px) rotateY(-15deg);
- transform: perspective(400px) rotateY(-15deg);
- opacity: 1;
- }
- to {
- -webkit-transform: perspective(400px) rotateY(90deg);
- transform: perspective(400px) rotateY(90deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes lightSpeedIn {
- 0% {
- -webkit-transform: translate3d(100%,0,0) skewX(-30deg);
- transform: translate3d(100%,0,0) skewX(-30deg);
- opacity: 0;
- }
- 60% {
- -webkit-transform: skewX(20deg);
- transform: skewX(20deg);
- }
- 60%, 80% {
- opacity: 1;
- }
- 80% {
- -webkit-transform: skewX(-5deg);
- transform: skewX(-5deg);
- }
- to {
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @keyframes lightSpeedIn {
- 0% {
- -webkit-transform: translate3d(100%,0,0) skewX(-30deg);
- transform: translate3d(100%,0,0) skewX(-30deg);
- opacity: 0;
- }
- 60% {
- -webkit-transform: skewX(20deg);
- transform: skewX(20deg);
- }
- 60%, 80% {
- opacity: 1;
- }
- 80% {
- -webkit-transform: skewX(-5deg);
- transform: skewX(-5deg);
- }
- to {
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @-webkit-keyframes lightSpeedOut {
- 0% {
- opacity: 1;
- }
- to {
- -webkit-transform: translate3d(100%,0,0) skewX(30deg);
- transform: translate3d(100%,0,0) skewX(30deg);
- opacity: 0;
- }
- }
- @keyframes lightSpeedOut {
- 0% {
- opacity: 1;
- }
- to {
- -webkit-transform: translate3d(100%,0,0) skewX(30deg);
- transform: translate3d(100%,0,0) skewX(30deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes rotateIn {
- 0% {
- transform-origin: center;
- -webkit-transform: rotate(-200deg);
- transform: rotate(-200deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: center;
- }
- to {
- transform-origin: center;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @keyframes rotateIn {
- 0% {
- transform-origin: center;
- -webkit-transform: rotate(-200deg);
- transform: rotate(-200deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: center;
- }
- to {
- transform-origin: center;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @-webkit-keyframes rotateInDownLeft {
- 0% {
- transform-origin: left bottom;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: left bottom;
- }
- to {
- transform-origin: left bottom;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @keyframes rotateInDownLeft {
- 0% {
- transform-origin: left bottom;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: left bottom;
- }
- to {
- transform-origin: left bottom;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @-webkit-keyframes rotateInDownRight {
- 0% {
- transform-origin: right bottom;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: right bottom;
- }
- to {
- transform-origin: right bottom;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @keyframes rotateInDownRight {
- 0% {
- transform-origin: right bottom;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: right bottom;
- }
- to {
- transform-origin: right bottom;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @-webkit-keyframes rotateInUpLeft {
- 0% {
- transform-origin: left bottom;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: left bottom;
- }
- to {
- transform-origin: left bottom;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @keyframes rotateInUpLeft {
- 0% {
- transform-origin: left bottom;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: left bottom;
- }
- to {
- transform-origin: left bottom;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @-webkit-keyframes rotateInUpRight {
- 0% {
- transform-origin: right bottom;
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: right bottom;
- }
- to {
- transform-origin: right bottom;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @keyframes rotateInUpRight {
- 0% {
- transform-origin: right bottom;
- -webkit-transform: rotate(-90deg);
- transform: rotate(-90deg);
- opacity: 0;
- }
- 0%, to {
- -webkit-transform-origin: right bottom;
- }
- to {
- transform-origin: right bottom;
- -webkit-transform: none;
- transform: none;
- opacity: 1;
- }
- }
- @-webkit-keyframes rotateOut {
- 0% {
- transform-origin: center;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: center;
- }
- to {
- transform-origin: center;
- -webkit-transform: rotate(200deg);
- transform: rotate(200deg);
- opacity: 0;
- }
- }
- @keyframes rotateOut {
- 0% {
- transform-origin: center;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: center;
- }
- to {
- transform-origin: center;
- -webkit-transform: rotate(200deg);
- transform: rotate(200deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes rotateOutDownLeft {
- 0% {
- transform-origin: left bottom;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: left bottom;
- }
- to {
- transform-origin: left bottom;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- opacity: 0;
- }
- }
- @keyframes rotateOutDownLeft {
- 0% {
- transform-origin: left bottom;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: left bottom;
- }
- to {
- transform-origin: left bottom;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes rotateOutDownRight {
- 0% {
- transform-origin: right bottom;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: right bottom;
- }
- to {
- transform-origin: right bottom;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- opacity: 0;
- }
- }
- @keyframes rotateOutDownRight {
- 0% {
- transform-origin: right bottom;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: right bottom;
- }
- to {
- transform-origin: right bottom;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes rotateOutUpLeft {
- 0% {
- transform-origin: left bottom;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: left bottom;
- }
- to {
- transform-origin: left bottom;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- opacity: 0;
- }
- }
- @keyframes rotateOutUpLeft {
- 0% {
- transform-origin: left bottom;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: left bottom;
- }
- to {
- transform-origin: left bottom;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes rotateOutUpRight {
- 0% {
- transform-origin: right bottom;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: right bottom;
- }
- to {
- transform-origin: right bottom;
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- opacity: 0;
- }
- }
- @keyframes rotateOutUpRight {
- 0% {
- transform-origin: right bottom;
- opacity: 1;
- }
- 0%, to {
- -webkit-transform-origin: right bottom;
- }
- to {
- transform-origin: right bottom;
- -webkit-transform: rotate(90deg);
- transform: rotate(90deg);
- opacity: 0;
- }
- }
- @-webkit-keyframes hinge {
- 0% {
- transform-origin: top left;
- }
- 0%, 20%, 60% {
- -webkit-transform-origin: top left;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- }
- 20%, 60% {
- -webkit-transform: rotate(80deg);
- transform: rotate(80deg);
- transform-origin: top left;
- }
- 40%, 80% {
- -webkit-transform: rotate(60deg);
- transform: rotate(60deg);
- -webkit-transform-origin: top left;
- transform-origin: top left;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- opacity: 1;
- }
- to {
- -webkit-transform: translate3d(0,700px,0);
- transform: translate3d(0,700px,0);
- opacity: 0;
- }
- }
- @keyframes hinge {
- 0% {
- transform-origin: top left;
- }
- 0%, 20%, 60% {
- -webkit-transform-origin: top left;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- }
- 20%, 60% {
- -webkit-transform: rotate(80deg);
- transform: rotate(80deg);
- transform-origin: top left;
- }
- 40%, 80% {
- -webkit-transform: rotate(60deg);
- transform: rotate(60deg);
- -webkit-transform-origin: top left;
- transform-origin: top left;
- -webkit-animation-timing-function: ease-in-out;
- animation-timing-function: ease-in-out;
- opacity: 1;
- }
- to {
- -webkit-transform: translate3d(0,700px,0);
- transform: translate3d(0,700px,0);
- opacity: 0;
- }
- }
- @-webkit-keyframes rollIn {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-100%,0,0) rotate(-120deg);
- transform: translate3d(-100%,0,0) rotate(-120deg);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes rollIn {
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-100%,0,0) rotate(-120deg);
- transform: translate3d(-100%,0,0) rotate(-120deg);
- }
- to {
- opacity: 1;
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes rollOut {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(100%,0,0) rotate(120deg);
- transform: translate3d(100%,0,0) rotate(120deg);
- }
- }
- @keyframes rollOut {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0;
- -webkit-transform: translate3d(100%,0,0) rotate(120deg);
- transform: translate3d(100%,0,0) rotate(120deg);
- }
- }
- @-webkit-keyframes zoomIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.3,.3,.3);
- transform: scale3d(.3,.3,.3);
- }
- 50% {
- opacity: 1;
- }
- }
- @keyframes zoomIn {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.3,.3,.3);
- transform: scale3d(.3,.3,.3);
- }
- 50% {
- opacity: 1;
- }
- }
- .zoomIn {
- -webkit-animation-name: zoomIn;
- animation-name: zoomIn;
- }
- @-webkit-keyframes zoomInDown {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
- transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
- transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @keyframes zoomInDown {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
- transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
- transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @-webkit-keyframes zoomInLeft {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
- transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
- transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @keyframes zoomInLeft {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
- transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
- transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @-webkit-keyframes zoomInRight {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
- transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
- transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @keyframes zoomInRight {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
- transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
- transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @-webkit-keyframes zoomInUp {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
- transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
- transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @keyframes zoomInUp {
- 0% {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
- transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- 60% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
- transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @-webkit-keyframes zoomOut {
- 0% {
- opacity: 1;
- }
- 50% {
- -webkit-transform: scale3d(.3,.3,.3);
- transform: scale3d(.3,.3,.3);
- }
- 50%, to {
- opacity: 0;
- }
- }
- @keyframes zoomOut {
- 0% {
- opacity: 1;
- }
- 50% {
- -webkit-transform: scale3d(.3,.3,.3);
- transform: scale3d(.3,.3,.3);
- }
- 50%, to {
- opacity: 0;
- }
- }
- @-webkit-keyframes zoomOutDown {
- 40% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
- transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- to {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
- transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
- -webkit-transform-origin: center bottom;
- transform-origin: center bottom;
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @keyframes zoomOutDown {
- 40% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
- transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- to {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
- transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
- -webkit-transform-origin: center bottom;
- transform-origin: center bottom;
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @-webkit-keyframes zoomOutLeft {
- 40% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
- transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(.1) translate3d(-2000px,0,0);
- transform: scale(.1) translate3d(-2000px,0,0);
- -webkit-transform-origin: left center;
- transform-origin: left center;
- }
- }
- @keyframes zoomOutLeft {
- 40% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
- transform: scale3d(.475,.475,.475) translate3d(42px,0,0);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(.1) translate3d(-2000px,0,0);
- transform: scale(.1) translate3d(-2000px,0,0);
- -webkit-transform-origin: left center;
- transform-origin: left center;
- }
- }
- @-webkit-keyframes zoomOutRight {
- 40% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
- transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(.1) translate3d(2000px,0,0);
- transform: scale(.1) translate3d(2000px,0,0);
- -webkit-transform-origin: right center;
- transform-origin: right center;
- }
- }
- @keyframes zoomOutRight {
- 40% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
- transform: scale3d(.475,.475,.475) translate3d(-42px,0,0);
- }
- to {
- opacity: 0;
- -webkit-transform: scale(.1) translate3d(2000px,0,0);
- transform: scale(.1) translate3d(2000px,0,0);
- -webkit-transform-origin: right center;
- transform-origin: right center;
- }
- }
- @-webkit-keyframes zoomOutUp {
- 40% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
- transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- to {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
- transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
- -webkit-transform-origin: center bottom;
- transform-origin: center bottom;
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @keyframes zoomOutUp {
- 40% {
- opacity: 1;
- -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
- transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
- -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- animation-timing-function: cubic-bezier(.55,.055,.675,.19);
- }
- to {
- opacity: 0;
- -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
- transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
- -webkit-transform-origin: center bottom;
- transform-origin: center bottom;
- -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
- animation-timing-function: cubic-bezier(.175,.885,.32,1);
- }
- }
- @-webkit-keyframes slideInDown {
- 0% {
- -webkit-transform: translate3d(0,-100%,0);
- transform: translate3d(0,-100%,0);
- visibility: visible;
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- @keyframes slideInDown {
- 0% {
- -webkit-transform: translate3d(0,-100%,0);
- transform: translate3d(0,-100%,0);
- visibility: visible;
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- .slideInDown {
- -webkit-animation-name: slideInDown;
- animation-name: slideInDown;
- }
- @-webkit-keyframes slideInLeft {
- 0% {
- -webkit-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- visibility: visible;
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- @keyframes slideInLeft {
- 0% {
- -webkit-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- visibility: visible;
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- @-webkit-keyframes slideInRight {
- 0% {
- -webkit-transform: translate3d(100%,0,0);
- transform: translate3d(100%,0,0);
- visibility: visible;
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- @keyframes slideInRight {
- 0% {
- -webkit-transform: translate3d(100%,0,0);
- transform: translate3d(100%,0,0);
- visibility: visible;
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- .slideInRight {
- -webkit-animation-name: slideInRight;
- animation-name: slideInRight;
- }
- @-webkit-keyframes slideInUp {
- 0% {
- -webkit-transform: translate3d(0,100%,0);
- transform: translate3d(0,100%,0);
- visibility: visible;
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- @keyframes slideInUp {
- 0% {
- -webkit-transform: translate3d(0,100%,0);
- transform: translate3d(0,100%,0);
- visibility: visible;
- }
- to {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
- .slideInUp {
- -webkit-animation-name: slideInUp;
- animation-name: slideInUp;
- }
- @-webkit-keyframes slideOutDown {
- 0% {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(0,100%,0);
- transform: translate3d(0,100%,0);
- }
- }
- @keyframes slideOutDown {
- 0% {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(0,100%,0);
- transform: translate3d(0,100%,0);
- }
- }
- .slideOutDown {
- -webkit-animation-name: slideOutDown;
- animation-name: slideOutDown;
- }
- @-webkit-keyframes slideOutLeft {
- 0% {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- }
- }
- @keyframes slideOutLeft {
- 0% {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(-100%,0,0);
- transform: translate3d(-100%,0,0);
- }
- }
- @-webkit-keyframes slideOutRight {
- 0% {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(100%,0,0);
- transform: translate3d(100%,0,0);
- }
- }
- @keyframes slideOutRight {
- 0% {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(100%,0,0);
- transform: translate3d(100%,0,0);
- }
- }
- @-webkit-keyframes slideOutUp {
- 0% {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(0,-100%,0);
- transform: translate3d(0,-100%,0);
- }
- }
- @keyframes slideOutUp {
- 0% {
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- to {
- visibility: hidden;
- -webkit-transform: translate3d(0,-100%,0);
- transform: translate3d(0,-100%,0);
- }
- }
- /*margin padding class*/
- .pt5 {
- padding-top: 5px;
- }
- .pt10 {
- padding-top: 10px;
- }
- .pt15 {
- padding-top: 15px;
- }
- .pt20 {
- padding-top: 20px;
- }
- .pt30 {
- padding-top: 30px;
- }
- .pt40 {
- padding-top: 40px;
- }
- .pl5 {
- padding-left: 5px;
- }
- .pl10 {
- padding-left: 10px;
- }
- .pl15 {
- padding-left: 15px;
- }
- .pl20 {
- padding-left: 20px;
- }
- .pl30 {
- padding-left: 30px;
- }
- .pl40 {
- padding-left: 40px;
- }
- .pr5 {
- padding-right: 5px;
- }
- .pr10 {
- padding-right: 10px;
- }
- .pr15 {
- padding-right: 15px;
- }
- .pr20 {
- padding-right: 20px;
- }
- .pr30 {
- padding-right: 30px;
- }
- .pr40 {
- padding-right: 40px;
- }
- .pb5 {
- padding-bottom: 5px;
- }
- .pb10 {
- padding-bottom: 10px;
- }
- .pb15 {
- padding-bottom: 15px;
- }
- .pb20 {
- padding-bottom: 20px;
- }
- .pb30 {
- padding-bottom: 30px;
- }
- .pb40 {
- padding-bottom: 40px;
- }
- .mt5 {
- margin-top: 5px;
- }
- .mt10 {
- margin-top: 10px;
- }
- .mt15 {
- margin-top: 15px;
- }
- .mt20 {
- margin-top: 20px;
- }
- .mt30 {
- margin-top: 30px;
- }
- .mt40 {
- margin-top: 40px;
- }
- .mt60 {
- margin-top: 60px;
- }
- .mt120 {
- margin-top: 120px;
- }
- .ml5 {
- margin-left: 5px;
- }
- .ml10 {
- margin-left: 10px;
- }
- .ml15 {
- margin-left: 15px;
- }
- .ml20 {
- margin-left: 20px;
- }
- .ml30 {
- margin-left: 30px;
- }
- .ml40 {
- margin-left: 40px;
- }
- .mr5 {
- margin-right: 5px;
- }
- .mr10 {
- margin-right: 10px;
- }
- .mr15 {
- margin-right: 15px;
- }
- .mr20 {
- margin-right: 20px;
- }
- .mr30 {
- margin-right: 30px;
- }
- .mr40 {
- margin-right: 40px;
- }
- .mb5 {
- margin-bottom: 5px;
- }
- .mb10 {
- margin-bottom: 10px;
- }
- .mb15 {
- margin-bottom: 15px;
- }
- .mb20 {
- margin-bottom: 20px;
- }
- .mb30 {
- margin-bottom: 30px;
- }
- .mb40 {
- margin-bottom: 40px;
- }
- .margin-0-auto {
- margin: 0 auto;
- }
- .mt30center {
- margin: 30px auto 0 auto;
- max-width: 730px;
- }
- .max-width730 {
- max-width: 730px;
- }
- .float-left {
- float: left;
- }
- .float-right {
- float: right;
- }
- /*font class*/
- .text-sub-small {
- font-size: 13px;
- color: #838a92;
- }
- a.text-sub-small:hover,button.text-sub-small:hover {
- border-bottom: 1px solid #a7abb1;
- }
- .text-sub-small-underline {
- font-size: 13px;
- color: #838a92;
- border-bottom: 1px solid #838a92;
- }
- a.text-sub-small-underline:hover,button.text-sub-small-underline:hover {
- color: #444d57;
- border-color: #444d57;
- }
- .text-sub-medium {
- font-size: 15px;
- color: #838a92;
- }
- .text-normal-small {
- font-size: 13px;
- color: #444d57;
- }
- .text-normal-medium {
- font-size: 15px;
- color: #444d57;
- }
- .text-important-small {
- font-size: 13px;
- color: #000e1f;
- }
- .text-important-small-blue {
- font-size: 13px;
- color: #0075ff;
- }
- a.text-important-small-blue:hover,button.text-important-small-blue:hover {
- border-bottom: 1px solid #0075ff;
- }
- .text-important-medium {
- font-size: 15px;
- color: #000e1f;
- }
- .text-important-medium-bold {
- font-size: 15px;
- color: #000e1f;
- font-weight: 600;
- }
- .text-important-medium-blue {
- font-size: 15px;
- color: #0075ff;
- }
- .text-important-medium-blue:hover {
- color: #0069e5;
- border-bottom: 1px solid #0075ff;
- }
- .text-title-blue {
- font-size: 25px;
- color: #0075ff;
- }
- a.text-title-blue:hover,button.text-title-blue:hover {
- color: #0069e5;
- border-bottom: 1px solid #0075ff;
- }
- .text-error {
- font-size: 13px !important;
- color: #ff0000 !important;
- }
- .icon-sub-small {
- font-family: FontAwesome;
- font-size: 14px;
- color: #bdc0c5;
- }
- a.icon-sub-small:hover,button.icon-sub-small:hover {
- color: #838a92;
- }
- .icon-sub-medium {
- font-family: FontAwesome;
- font-size: 15px;
- color: #bdc0c5;
- }
- .icon-normal-small {
- font-family: FontAwesome;
- font-size: 14px;
- color: #838a92;
- }
- a.icon-normal-small:hover,button.icon-normal-small:hover {
- color: #444d57;
- }
- .icon-important-small-blue {
- font-family: FontAwesome;
- font-size: 12px;
- color: #0075ff;
- }
- .icon-important-small-blue:hover {
- color: #0069e5;
- }
- .text-important-medium-blue:hover > .icon-important-small-blue {
- color: #0069e5;
- }
- .icon-important-medium {
- font-family: FontAwesome;
- font-size: 17px;
- color: #444d57;
- }
- .icon-important-medium-blue {
- font-family: FontAwesome;
- font-size: 17px;
- color: #0075ff;
- }
- a.icon-important-medium-blue:hover,button.icon-important-medium-blue:hover {
- color: #0069e5;
- }
- .icon-normal-small-link {
- font-family: FontAwesome;
- font-size: 15px;
- color: #bdc0c5;
- }
- .icon-normal-small-link:hover {
- color: #838a92;
- }
- .blue {
- color: #117eff !important;
- }
- /*button*/
- .button-normal-small {
- display: inline-block;
- box-sizing: border-box;
- height: 30px;
- padding: 0 15px;
- background: #f7f8fa;
- border: 1px solid rgba(0,0,0,.12);
- border-radius: 3px;
- text-align: center;
- font-size: 13px;
- color: #838a92;
- font-weight: 300;
- cursor: pointer;
- vertical-align: top;
- }
- .button-normal-small .icon {
- padding-right: 10px;
- font-family: FontAwesome;
- }
- .button-normal-small .icon-normal-small {
- vertical-align: -2px;
- }
- .button-normal-small:hover {
- border-color: #bdc0c5;
- }
- .button-normal-small.selected {
- background: #838a92;
- color: #fff;
- }
- .button-normal-medium {
- display: inline-block;
- box-sizing: border-box;
- height: 40px;
- line-height: 40px;
- background: #f7f8fa;
- border: 1px solid #ced1d7;
- border-radius: 3px;
- text-align: center;
- font-size: 15px;
- color: #838a92;
- cursor: pointer;
- font-weight: Normal;
- }
- .button-normal-medium:hover {
- border-color: #bdc0c5;
- }
- .button-important-small {
- display: inline-block;
- box-sizing: border-box;
- height: 30px;
- padding: 0 15px;
- background: #00d046;
- border-radius: 3px;
- text-align: center;
- font-size: 13px;
- color: #fff;
- vertical-align: top;
- cursor: pointer;
- }
- .button-important-small .icon {
- padding-right: 10px;
- font-family: FontAwesome;
- font-size: 13px;
- color: #fff;
- font-weight: 300;
- }
- .button-important-small.on,.button-important-small:hover {
- background: #009833;
- border-color: #bdc0c5;
- }
- .button-important-medium {
- display: inline-block;
- box-sizing: border-box;
- height: 40px;
- padding: 0 15px;
- background: #0075ff;
- border: 1px solid #ced1d7;
- border-radius: 3px;
- text-align: center;
- font-size: 15px;
- color: #fff;
- vertical-align: top;
- cursor: pointer;
- }
- .button-important-medium.on,.button-important-medium:hover {
- background: #0069e5;
- border-color: #bdc0c5;
- }
- .button-normal-small-dropdown {
- position: relative;
- display: inline-block;
- }
- .button-normal-small-dropdown.graph > span {
- width: 200px;
- }
- .button-normal-small-dropdown>span {
- display: inline-block;
- position: relative;
- box-sizing: border-box;
- width: 130px;
- height: 30px;
- line-height: 30px;
- padding-left: 15px;
- background: #f7f8fa;
- border: 1px solid #ced1d7;
- border-radius: 3px;
- font-size: 13px;
- color: #838a92;
- cursor: pointer;
- padding-right: 35px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .button-normal-small-dropdown>span:after {
- font-family: FontAwesome;
- content: "\f107";
- position: absolute;
- top: 0;
- right: 15px;
- font-size: 18px;
- color: #838a92;
- }
- .button-normal-small-dropdown>span>span {
- text-align: left;
- }
- .button-normal-small-dropdown>ul {
- position: absolute;
- margin-top: 4px;
- box-sizing: border-box;
- width: 100%;
- overflow: auto;
- border: 1px solid #bdc0c5;
- background: #fff;
- box-shadow: rgba(0,0,0,0.2);
- display: none;
- max-height: 200px;
- }
- .button-normal-small-dropdown>ul li {
- box-sizing: border-box;
- position: relative;
- height: 40px;
- line-height: 40px;
- padding-left: 19px;
- padding-right: 19px;
- border-top: 1px solid #eaeaea;
- font-size: 13px;
- color: #838a92;
- cursor: pointer;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .button-normal-small-dropdown>ul li:hover {
- background: #e5e7ec;
- }
- .button-normal-small-dropdown>ul li.on {
- /*color:#444d57;*/
- color: #0075ff;
- }
- .button-normal-small-dropdown>ul li.on:after {
- font-family: FontAwesome;
- content: "\f00c";
- padding-left: 5px;
- }
- .button-normal-small-dropdown>ul li:first-child {
- border: 0;
- }
- .button-normal-small-dropdown.on>ul {
- display: block;
- z-index: 10;
- }
- .button-normal-small-dropdown-label>span {
- vertical-align: super;
- }
- .button-normal-small-dropdown-label .button-normal-small-dropdown {
- margin-left: 10px;
- }
- .button-sub-flat {
- font-size: 13px;
- color: #bdc0c5;
- }
- .button-sub-flat .icon {
- padding-right: 10px;
- font-family: FontAwesome;
- font-size: 15px;
- }
- .button-sub-flat:hover {
- color: #838a92;
- }
- .button-sign-in {
- width: 100%;
- }
- /*input*/
- .input-normal-small {
- box-sizing: border-box;
- width: 150px;
- height: 30px;
- line-height: 30px;
- border: 1px solid #ced1d7;
- border-radius: 3px;
- padding: 0 10px;
- font-size: 13px;
- color: #bdc0c5;
- }
- .text-input-normal-small {
- box-sizing: border-box;
- width: 150px;
- height: 30px;
- line-height: 30px;
- border: 1px solid #ced1d7;
- border-radius: 3px;
- padding: 0 10px;
- font-size: 13px;
- color: #000e1f;
- }
- .input-normal-medium {
- display: inline-block;
- box-sizing: border-box;
- height: 40px;
- line-height: 40px;
- padding: 0 10px;
- border-radius: 3px;
- border: 1px solid #ced1d7;
- font-size: 15px;
- color: #000e1f;
- }
- .input-normal-medium:focus {
- border-color: #0075ff;
- outline: none;
- }
- .input-normal-medium.error {
- border-color: #ff0000;
- }
- /*layer*/
- .icon_question {
- position: relative;
- vertical-align: -2px;
- }
- .icon_question:hover .layer-question-description {
- display: inline-block;
- z-index: 100;
- }
- .layer-question-description {
- position: absolute;
- top: 15px;
- left: -150px;
- box-sizing: border-box;
- width: 300px;
- padding: 20px 30px;
- border: 1px solid #bdc0c5;
- background: #fff;
- box-shadow: 0 0 5px rgba(0,0,0,0.2);
- display: none;
- }
- .layer-question-description.right {
- left: auto;
- right: 0;
- }
- .layer-question-description.bottom {
- top: auto;
- bottom: 15px;
- }
- .layer-question-description.left {
- left: 0;
- }
- .layer-question-description>b {
- display: block;
- padding-bottom: 10px;
- font-size: 13px;
- color: #444d57;
- line-height: 1em;
- }
- .layer-question-description>span {
- font-size: 13px;
- color: #838a92;
- }
- /*box*/
- .box-info-confirm {
- background: #f7f8fa;
- border-radius: 3px;
- word-break: break-all;
- }
- /* cursor control */
- .cursor-pointer {
- cursor: pointer;
- }
- /* spiner */
- .input-spinner {
- font-size: 15px;
- color: #bdc0c5;
- margin-top: 5px;
- }
- /* display: inline-block */
- .display-line-block {
- display: inline-block !important;
- }
- /* display: inline-block */
- .border-bottom {
- border-bottom: 1px solid #bdc0c5;
- }
- .dashboard-loading {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 1000;
- width: 100%;
- height: 100%;
- background: #f7f8fa;
- text-align: center;
- opacity: .9;
- display: none;
- }
- .dashboard-loading.active {
- display: block;
- }
- .dashboard-loading > i {
- position: fixed;
- top: 50%;
- left: 50%;
- z-index: 1001;
- font-size: 50px;
- color: #ced1d7;
- display: none;
- }
- .dashboard-loading.active > i {
- display: block;
- }
- .table-wrap .card-body-loading {
- width: 100%;
- height: 100%;
- background: #f7f8fa;
- padding: 30px 40px 30px 40px;
- text-align: center;
- opacity: .9;
- display: none;
- }
- .table-wrap .card-body-loading.active {
- display: block;
- }
- .table-wrap .card-body-loading > i {
- font-size: 50px;
- color: #ced1d7;
- display: none;
- margin: 0 auto;
- }
- .table-wrap .card-body-loading.active > i {
- display: block;
- }
- .table-data-loading {
- width: 100%;
- height: 200px;
- background: #f7f8fa;
- padding: 30px 40px 30px 40px;
- }
- .table-data-loading p {
- font-size: 50px;
- color: #ced1d7;
- text-align: center;
- margin: 0 auto;
- }
- /* icon */
- .ic-question {
- margin-left: 2px;
- font-size: 13px;
- color: #d0d2d7;
- -webkit-transition: color .3s;
- display: inline-block;
- font-family: FontAwesome;
- cursor: pointer;
- }
- .ic-question:hover {
- color: #a9acb6;
- }
- .ic-question:hover .layer-question-description {
- display: inline-block;
- z-index: 100;
- }
- /* common */
- .pl2 {
- padding-left: 2px;
- }
- .pr2 {
- padding-right: 2px;
- }
- /*!
- * Font Awesome 4.6.2 by @davegandy - http://fontawesome.io - @fontawesome
- * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */
- /* FONT PATH
- * -------------------------- */
- @font-face {
- font-family: 'FontAwesome';
- src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- .fa {
- display: inline-block;
- font: normal normal normal 14px/1 FontAwesome;
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- /* makes the font 33% larger relative to the icon container */
- .fa-lg {
- font-size: 1.33333333em;
- line-height: 0.75em;
- vertical-align: -15%;
- }
- .fa-2x {
- font-size: 2em;
- }
- .fa-3x {
- font-size: 3em;
- }
- .fa-4x {
- font-size: 4em;
- }
- .fa-5x {
- font-size: 5em;
- }
- .fa-ul {
- padding-left: 0;
- margin-left: 2.14285714em;
- list-style-type: none;
- }
- .fa-ul > li {
- position: relative;
- }
- .fa-li {
- position: absolute;
- left: -2.14285714em;
- width: 2.14285714em;
- top: 0.14285714em;
- text-align: center;
- }
- .fa-li.fa-lg {
- left: -1.85714286em;
- }
- .fa-border {
- padding: .2em .25em .15em;
- border: solid 0.08em #eeeeee;
- border-radius: .1em;
- }
- .fa-pull-left {
- float: left;
- }
- .fa-pull-right {
- float: right;
- }
- .fa.fa-pull-left {
- margin-right: .3em;
- }
- .fa.fa-pull-right {
- margin-left: .3em;
- }
- /* Deprecated as of 4.4.0 */
- .pull-right {
- float: right;
- }
- .pull-left {
- float: left;
- }
- .fa.pull-left {
- margin-right: .3em;
- }
- .fa.pull-right {
- margin-left: .3em;
- }
- .fa-spin {
- -webkit-animation: fa-spin 2s infinite linear;
- animation: fa-spin 2s infinite linear;
- }
- @-webkit-keyframes fa-spin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(359deg);
- transform: rotate(359deg);
- }
- }
- @keyframes fa-spin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(359deg);
- transform: rotate(359deg);
- }
- }
- .fa-rotate-90 {
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
- -webkit-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- transform: rotate(90deg);
- }
- .fa-rotate-180 {
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
- -webkit-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- .fa-rotate-270 {
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
- -webkit-transform: rotate(270deg);
- -ms-transform: rotate(270deg);
- transform: rotate(270deg);
- }
- :root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270 {
- filter: none;
- }
- /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
- readers do not read off random characters that represent icons */
- .fa-search:before {
- content: "\f002";
- }
- .fa-user:before {
- content: "\f007";
- }
- .fa-th:before {
- content: "\f00a";
- }
- .fa-th-list:before {
- content: "\f00b";
- }
- .fa-check:before {
- content: "\f00c";
- }
- .fa-remove:before,.fa-close:before,.fa-times:before {
- content: "\f00d";
- }
- .fa-search-plus:before {
- content: "\f00e";
- }
- .fa-search-minus:before {
- content: "\f010";
- }
- .fa-cog:before {
- content: "\f013";
- }
- .fa-trash-o:before {
- content: "\f014";
- }
- .fa-home:before {
- content: "\f015";
- }
- .fa-file-o:before {
- content: "\f016";
- }
- .fa-download:before {
- content: "\f019";
- }
- .fa-arrow-circle-o-down:before {
- content: "\f01a";
- }
- .fa-arrow-circle-o-up:before {
- content: "\f01b";
- }
- .fa-inbox:before {
- content: "\f01c";
- }
- .fa-play-circle-o:before {
- content: "\f01d";
- }
- .fa-rotate-right:before,.fa-repeat:before {
- content: "\f01e";
- }
- .fa-refresh:before {
- content: "\f021";
- }
- .fa-list-alt:before {
- content: "\f022";
- }
- .fa-flag:before {
- content: "\f024";
- }
- .fa-tag:before {
- content: "\f02b";
- }
- .fa-font:before {
- content: "\f031";
- }
- .fa-bold:before {
- content: "\f032";
- }
- .fa-text-height:before {
- content: "\f034";
- }
- .fa-text-width:before {
- content: "\f035";
- }
- .fa-align-left:before {
- content: "\f036";
- }
- .fa-align-center:before {
- content: "\f037";
- }
- .fa-align-right:before {
- content: "\f038";
- }
- .fa-list:before {
- content: "\f03a";
- }
- .fa-photo:before,.fa-image:before,.fa-picture-o:before {
- content: "\f03e";
- }
- .fa-map-marker:before {
- content: "\f041";
- }
- .fa-adjust:before {
- content: "\f042";
- }
- .fa-edit:before {
- content: "\f044";
- }
- .fa-play:before {
- content: "\f04b";
- }
- .fa-stop:before {
- content: "\f04d";
- }
- .fa-plus-circle:before {
- content: "\f055";
- }
- .fa-minus-circle:before {
- content: "\f056";
- }
- .fa-times-circle:before {
- content: "\f057";
- }
- .fa-check-circle:before {
- content: "\f058";
- }
- .fa-question-circle:before {
- content: "\f059";
- }
- .fa-info-circle:before {
- content: "\f05a";
- }
- .fa-times-circle-o:before {
- content: "\f05c";
- }
- .fa-check-circle-o:before {
- content: "\f05d";
- }
- .fa-ban:before {
- content: "\f05e";
- }
- .fa-arrow-left:before {
- content: "\f060";
- }
- .fa-arrow-right:before {
- content: "\f061";
- }
- .fa-arrow-up:before {
- content: "\f062";
- }
- .fa-arrow-down:before {
- content: "\f063";
- }
- .fa-share:before {
- content: "\f064";
- }
- .fa-plus:before {
- content: "\f067";
- }
- .fa-minus:before {
- content: "\f068";
- }
- .fa-exclamation-circle:before {
- content: "\f06a";
- }
- .fa-warning:before,.fa-exclamation-triangle:before {
- content: "\f071";
- }
- .fa-calendar:before {
- content: "\f073";
- }
- .fa-random:before {
- content: "\f074";
- }
- .fa-comment:before {
- content: "\f075";
- }
- .fa-bar-chart-o:before,.fa-bar-chart:before {
- content: "\f080";
- }
- .fa-key:before {
- content: "\f084";
- }
- .fa-comments:before {
- content: "\f086";
- }
- .fa-sign-out:before {
- content: "\f08b";
- }
- .fa-external-link:before {
- content: "\f08e";
- }
- .fa-sign-in:before {
- content: "\f090";
- }
- .fa-upload:before {
- content: "\f093";
- }
- .fa-phone:before {
- content: "\f095";
- }
- .fa-facebook-f:before,.fa-facebook:before {
- content: "\f09a";
- }
- .fa-github:before {
- content: "\f09b";
- }
- .fa-credit-card:before {
- content: "\f09d";
- }
- .fa-arrow-circle-left:before {
- content: "\f0a8";
- }
- .fa-arrow-circle-right:before {
- content: "\f0a9";
- }
- .fa-arrow-circle-up:before {
- content: "\f0aa";
- }
- .fa-arrow-circle-down:before {
- content: "\f0ab";
- }
- .fa-filter:before {
- content: "\f0b0";
- }
- .fa-group:before,.fa-users:before {
- content: "\f0c0";
- }
- .fa-link:before {
- content: "\f0c1";
- }
- .fa-cloud:before {
- content: "\f0c2";
- }
- .fa-copy:before,.fa-files-o:before {
- content: "\f0c5";
- }
- .fa-save:before {
- content: "\f0c7";
- }
- .fa-list-ul:before {
- content: "\f0ca";
- }
- .fa-underline:before {
- content: "\f0cd";
- }
- .fa-table:before {
- content: "\f0ce";
- }
- .fa-google-plus:before {
- content: "\f0d5";
- }
- .fa-caret-down:before {
- content: "\f0d7";
- }
- .fa-caret-up:before {
- content: "\f0d8";
- }
- .fa-caret-left:before {
- content: "\f0d9";
- }
- .fa-caret-right:before {
- content: "\f0da";
- }
- .fa-columns:before {
- content: "\f0db";
- }
- .fa-sort:before {
- content: "\f0dc";
- }
- .fa-sort-down:before,.fa-sort-desc:before {
- content: "\f0dd";
- }
- .fa-sort-up:before,.fa-sort-asc:before {
- content: "\f0de";
- }
- .fa-rotate-left:before,.fa-undo:before {
- content: "\f0e2";
- }
- .fa-dashboard:before {
- content: "\f0e4";
- }
- .fa-comment-o:before {
- content: "\f0e5";
- }
- .fa-comments-o:before {
- content: "\f0e6";
- }
- .fa-clipboard:before {
- content: "\f0ea";
- }
- .fa-cloud-download:before {
- content: "\f0ed";
- }
- .fa-cloud-upload:before {
- content: "\f0ee";
- }
- .fa-user-md:before {
- content: "\f0f0";
- }
- .fa-file-text-o:before {
- content: "\f0f6";
- }
- .fa-angle-double-left:before {
- content: "\f100";
- }
- .fa-angle-double-right:before {
- content: "\f101";
- }
- .fa-angle-double-up:before {
- content: "\f102";
- }
- .fa-angle-double-down:before {
- content: "\f103";
- }
- .fa-angle-left:before {
- content: "\f104";
- }
- .fa-angle-right:before {
- content: "\f105";
- }
- .fa-angle-up:before {
- content: "\f106";
- }
- .fa-angle-down:before {
- content: "\f107";
- }
- .fa-desktop:before {
- content: "\f108";
- }
- .fa-mobile-phone:before,.fa-mobile:before {
- content: "\f10b";
- }
- .fa-circle-o:before {
- content: "\f10c";
- }
- .fa-spinner:before {
- content: "\f110";
- }
- .fa-circle:before {
- content: "\f111";
- }
- .fa-github-alt:before {
- content: "\f113";
- }
- .fa-smile-o:before {
- content: "\f118";
- }
- .fa-keyboard-o:before {
- content: "\f11c";
- }
- .fa-flag-o:before {
- content: "\f11d";
- }
- .fa-code:before {
- content: "\f121";
- }
- .fa-location-arrow:before {
- content: "\f124";
- }
- .fa-question:before {
- content: "\f128";
- }
- .fa-info:before {
- content: "\f129";
- }
- .fa-exclamation:before {
- content: "\f12a";
- }
- .fa-calendar-o:before {
- content: "\f133";
- }
- .fa-html5:before {
- content: "\f13b";
- }
- .fa-css3:before {
- content: "\f13c";
- }
- .fa-anchor:before {
- content: "\f13d";
- }
- .fa-ellipsis-h:before {
- content: "\f141";
- }
- .fa-ellipsis-v:before {
- content: "\f142";
- }
- .fa-play-circle:before {
- content: "\f144";
- }
- .fa-ticket:before {
- content: "\f145";
- }
- .fa-toggle-down:before {
- content: "\f150";
- }
- .fa-toggle-up:before {
- content: "\f151";
- }
- .fa-toggle-right:before {
- content: "\f152";
- }
- .fa-krw:before {
- content: "\f159";
- }
- .fa-file:before {
- content: "\f15b";
- }
- .fa-file-text:before {
- content: "\f15c";
- }
- .fa-youtube:before {
- content: "\f167";
- }
- .fa-youtube-play:before {
- content: "\f16a";
- }
- .fa-long-arrow-down:before {
- content: "\f175";
- }
- .fa-long-arrow-up:before {
- content: "\f176";
- }
- .fa-long-arrow-left:before {
- content: "\f177";
- }
- .fa-long-arrow-right:before {
- content: "\f178";
- }
- .fa-apple:before {
- content: "\f179";
- }
- .fa-windows:before {
- content: "\f17a";
- }
- .fa-android:before {
- content: "\f17b";
- }
- .fa-bug:before {
- content: "\f188";
- }
- .fa-arrow-circle-o-right:before {
- content: "\f18e";
- }
- .fa-arrow-circle-o-left:before {
- content: "\f190";
- }
- .fa-toggle-left:before {
- content: "\f191";
- }
- .fa-dot-circle-o:before {
- content: "\f192";
- }
- .fa-try:before {
- content: "\f195";
- }
- .fa-google:before {
- content: "\f1a0";
- }
- .fa-language:before {
- content: "\f1ab";
- }
- .fa-child:before {
- content: "\f1ae";
- }
- .fa-database:before {
- content: "\f1c0";
- }
- .fa-file-word-o:before {
- content: "\f1c2";
- }
- .fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before {
- content: "\f1c5";
- }
- .fa-file-video-o:before {
- content: "\f1c8";
- }
- .fa-file-code-o:before {
- content: "\f1c9";
- }
- .fa-support:before {
- content: "\f1cd";
- }
- .fa-circle-o-notch:before {
- content: "\f1ce";
- }
- .fa-ge:before {
- content: "\f1d1";
- }
- .fa-send:before {
- content: "\f1d8";
- }
- .fa-send-o:before {
- content: "\f1d9";
- }
- .fa-history:before {
- content: "\f1da";
- }
- .fa-header:before {
- content: "\f1dc";
- }
- .fa-paragraph:before {
- content: "\f1dd";
- }
- .fa-share-alt:before {
- content: "\f1e0";
- }
- .fa-trash:before {
- content: "\f1f8";
- }
- .fa-copyright:before {
- content: "\f1f9";
- }
- .fa-at:before {
- content: "\f1fa";
- }
- .fa-area-chart:before {
- content: "\f1fe";
- }
- .fa-line-chart:before {
- content: "\f201";
- }
- .fa-toggle-off:before {
- content: "\f204";
- }
- .fa-toggle-on:before {
- content: "\f205";
- }
- .fa-user-secret:before {
- content: "\f21b";
- }
- .fa-server:before {
- content: "\f233";
- }
- .fa-user-plus:before {
- content: "\f234";
- }
- .fa-user-times:before {
- content: "\f235";
- }
- .fa-medium:before {
- content: "\f23a";
- }
- .fa-mouse-pointer:before {
- content: "\f245";
- }
- .fa-i-cursor:before {
- content: "\f246";
- }
- .fa-object-group:before {
- content: "\f247";
- }
- .fa-clone:before {
- content: "\f24d";
- }
- .fa-registered:before {
- content: "\f25d";
- }
- .fa-safari:before {
- content: "\f267";
- }
- .fa-chrome:before {
- content: "\f268";
- }
- .fa-500px:before {
- content: "\f26e";
- }
- .fa-amazon:before {
- content: "\f270";
- }
- .fa-calendar-plus-o:before {
- content: "\f271";
- }
- .fa-calendar-minus-o:before {
- content: "\f272";
- }
- .fa-calendar-times-o:before {
- content: "\f273";
- }
- .fa-calendar-check-o:before {
- content: "\f274";
- }
- .fa-map-o:before {
- content: "\f278";
- }
- .fa-map:before {
- content: "\f279";
- }
- .fa-credit-card-alt:before {
- content: "\f283";
- }
- .fa-stop-circle:before {
- content: "\f28d";
- }
- .fa-stop-circle-o:before {
- content: "\f28e";
- }
- .fa-percent:before {
- content: "\f295";
- }
- .fa-universal-access:before {
- content: "\f29a";
- }
- .fa-question-circle-o:before {
- content: "\f29c";
- }
- .fa-sign-language:before {
- content: "\f2a7";
- }
- .fa-first-order:before {
- content: "\f2b0";
- }
- /*
- * Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess
- */
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 100;
- src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 300;
- src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 400;
- src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 500;
- src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 700;
- src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 900;
- src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
- }
- /*
- * Nanum Barun Gothic Web Fonts
- * https://github.com/hiun/NanumBarunGothic
- * Copyright (c) 2010, NAVER Corporation (http://www.nhncorp.com)
- */
- @font-face {
- font-family: 'Nanum Barun Gothic';
- font-style: normal;
- font-weight: 200;
- src: url(../font/NanumBarunGothicUltraLight.eot);
- src: local('Nanum Barun Gothic UltraLight'), local('NanumBarunGothicUltraLight'), url(../font/NanumBarunGothicUltraLight.eot?#iefix) format('embedded-opentype'), url(../font/NanumBarunGothicUltraLight.woff2) format('woff2'), url(../font/NanumBarunGothicUltraLight.woff) format('woff'), url(../font/NanumBarunGothicUltraLight.ttf) format('truetype');
- }
- @font-face {
- font-family: 'Nanum Barun Gothic';
- font-style: normal;
- font-weight: 300;
- src: url(../font/NanumBarunGothicLight.eot);
- src: local('Nanum Barun Gothic Light'), local('NanumBarunGothicLight'), url(../font/NanumBarunGothicLight.eot?#iefix) format('embedded-opentype'), url(../font/NanumBarunGothicLight.woff2) format('woff2'), url(../font/NanumBarunGothicLight.woff) format('woff'), url(../font/NanumBarunGothicLight.ttf) format('truetype');
- }
- @font-face {
- font-family: 'Nanum Barun Gothic';
- font-style: normal;
- font-weight: 400;
- src: url(../font/NanumBarunGothic.eot);
- src: local('Nanum Barun Gothic'), local('NanumBarunGothic'), url(../font/NanumBarunGothic.eot?#iefix) format('embedded-opentype'), url(../font/NanumBarunGothic.woff2) format('woff2'), url(../font/NanumBarunGothic.woff) format('woff'), url(../font/NanumBarunGothic.ttf) format('truetype');
- }
- @font-face {
- font-family: 'Nanum Barun Gothic';
- font-style: normal;
- font-weight: 700;
- src: url(../font/NanumBarunGothicBold.eot);
- src: local('Nanum Barun Gothic Bold'), local('NanumBarunGothicBold'), url(../font/NanumBarunGothicBold.eot?#iefix) format('embedded-opentype'), url(../font/NanumBarunGothicBold.woff2) format('woff2'), url(../font/NanumBarunGothicBold.woff) format('woff'), url(../font/NanumBarunGothicBold.ttf) format('truetype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 100;
- src: url(../font/NotoSans-Thin.eot);
- src: local('Noto Sans CJK KR Thin'), local('Noto Sans CJK KR-Thin'), local('NotoSansCJKKR Thin'), local('NotoSansCJKkr-Thin'), url(../font/NotoSans-Thin.eot?#iefix) format('embedded-opentype'), url(../font/NotoSans-Thin.woff2) format('woff2'), url(../font/NotoSans-Thin.woff) format('woff'), url(../font/NotoSans-Thin.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 300;
- src: url(../font/NotoSans-Light.eot);
- src: local('Noto Sans CJK KR Light'), local('Noto Sans CJK KR-Light'), local('NotoSansCJKKR Light'), local('NotoSansCJKkr-Light'), url(../font/NotoSans-Light.eot?#iefix) format('embedded-opentype'), url(../font/NotoSans-Light.woff2) format('woff2'), url(../font/NotoSans-Light.woff) format('woff'), url(../font/NotoSans-Light.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 400;
- src: url(../font/NotoSans-Regular.eot);
- src: local('Noto Sans CJK KR Regular'), local('Noto Sans CJK KR-Regular'), local('NotoSansCJKKR Regular'), local('NotoSansCJKkr-Regular'), url(../font/NotoSans-Regular.eot?#iefix) format('embedded-opentype'), url(../font/NotoSans-Regular.woff2) format('woff2'), url(../font/NotoSans-Regular.woff) format('woff'), url(../font/NotoSans-Regular.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 500;
- src: url(../font/NotoSans-Medium.eot);
- src: local('Noto Sans CJK KR Medium'), local('Noto Sans CJK KR-Medium'), local('NotoSansCJKKR Medium'), local('NotoSansCJKkr-Medium'), url(../font/NotoSans-Medium.eot?#iefix) format('embedded-opentype'), url(../font/NotoSans-Medium.woff2) format('woff2'), url(../font/NotoSans-Medium.woff) format('woff'), url(../font/NotoSans-Medium.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 700;
- src: url(../font/NotoSans-Bold.eot);
- src: local('Noto Sans CJK KR Bold'), local('Noto Sans CJK KR-Bold'), local('NotoSansCJKKR Bold'), local('NotoSansCJKkr-Bold'), url(../font/NotoSans-Bold.eot?#iefix) format('embedded-opentype'), url(../font/NotoSans-Bold.woff2) format('woff2'), url(../font/NotoSans-Bold.woff) format('woff'), url(../font/NotoSans-Bold.otf) format('opentype');
- }
- @font-face {
- font-family: 'Noto Sans KR';
- font-style: normal;
- font-weight: 900;
- src: url(../font/NotoSans-Black.eot);
- src: local('Noto Sans CJK KR Black'), local('Noto Sans CJK KR-Black'), local('NotoSansCJKKR Black'), local('NotoSansCJKkr-Black'), url(../font/NotoSans-Black.eot?#iefix) format('embedded-opentype'), url(../font/NotoSans-Black.woff2) format('woff2'), url(../font/NotoSans-Black.woff) format('woff'), url(../font/NotoSans-Black.otf) format('opentype');
- }
- /* fallback */
- @font-face {
- font-family: 'Material Icons';
- font-style: normal;
- font-weight: 400;
- src: url(../font/material-icons.eot);
- src: local('Material Icons'), local('MaterialIcons-Regular'), url(../font/material-icons.woff2) format('woff2'), url(../font/material-icons.woff) format('woff'), url(../font/material-icons.ttf) format('truetype');
- }
- .material-icons {
- font-family: 'Material Icons';
- font-weight: normal;
- font-style: normal;
- font-size: 24px;
- line-height: 1;
- letter-spacing: normal;
- text-transform: none;
- display: inline-block;
- white-space: nowrap;
- word-wrap: normal;
- direction: ltr;
- -webkit-font-feature-settings: 'liga';
- -webkit-font-smoothing: antialiased;
- }
- /* ===============================================
- * Line μ°¨νΈ (nvd3)
- * nvd3 version 1.8.1-dev (https://github.com/novus/nvd3)
- =================================================*/
- .nvd3 .nv-axis {
- pointer-events: none;
- /*y axis*/
- opacity: 1;
- }
- .nvd3 .nv-axis path {
- fill: none;
- /*stroke: #e5e5e5;*/
- /*UDL Stroke Color*/
- stroke-opacity: .75;
- shape-rendering: crispEdges;
- }
- .nvd3 .nv-axis path.domain {
- stroke-opacity: .75;
- }
- .nvd3 .nv-axis.nv-x path.domain {
- stroke-opacity: 0;
- }
- .nvd3 .nv-axis line {
- fill: none;
- stroke: #e5e5e5;
- /*UDL Stroke Color*/
- shape-rendering: crispEdges;
- }
- .nv-x .nv-axis line {
- /*UDL Stroke Color*/
- fill: none;
- stroke: #e5e5e5;
- /*stroke: none;*/
- shape-rendering: crispEdges;
- }
- .nvd3 .nv-axis.nv-disabled {
- opacity: 0;
- }
- /* boxplot CSS */
- /* bullet */
- .nvd3.nv-bullet {
- font: 10px sans-serif;
- }
- .nvd3.nv-bullet .nv-marker {
- stroke: #000;
- stroke-width: 2px;
- }
- .nvd3.nv-bullet .nv-range.nv-s0 {
- fill: #eee;
- }
- .nvd3.nv-bullet .nv-range.nv-s1 {
- fill: #ddd;
- }
- .nvd3.nv-bullet .nv-range.nv-s2 {
- fill: #ccc;
- }
- .nvd3.nv-bullet .nv-title {
- font-size: 14px;
- font-weight: bold;
- }
- .nvd3.nv-bullet .nv-subtitle {
- fill: #999;
- }
- .nvd3.nv-bullet .nv-range {
- fill: #bababa;
- fill-opacity: .4;
- }
- .nvd3.nv-bullet .nv-range:hover {
- fill-opacity: .7;
- }
- .nvd3 .nv-legend .nv-disabled rect {
- /*fill-opacity: 0;*/
- }
- .nvd3 .nv-check-box .nv-box {
- fill-opacity: 0;
- stroke-width: 2;
- }
- .nvd3 .nv-check-box .nv-check {
- fill-opacity: 0;
- stroke-width: 4;
- }
- .nvd3 .nv-series.nv-disabled .nv-check-box .nv-check {
- fill-opacity: 0;
- stroke-opacity: 0;
- }
- /* line plus bar */
- /********************
- * SVG CSS
- */
- /********************
- Default CSS for an svg element nvd3 used
- */
- svg.nvd3-svg {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -ms-user-select: none;
- -moz-user-select: none;
- user-select: none;
- display: block;
- width: 100%;
- height: 100%;
- }
- /********************
- Box shadow and border radius styling
- */
- /*.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {*/
- /*-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
- /*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
- /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
- /*-webkit-border-radius: 5px;*/
- /*-moz-border-radius: 5px;*/
- /*border-radius: 5px; }*/
- /* UDL y-axis font */
- .nv-y .nvd3 text {
- color: #7f858b;
- font-size: 12px;
- }
- /* UDL x-axis font */
- .nv-x .nvd3 text {
- color: #7f858b;
- font-size: 12px;
- }
- .nvd3 .title {
- font: bold 14px Arial;
- }
- .nvd3 .nv-background {
- fill: white;
- fill-opacity: 0;
- }
- /**********
- * Brush
- */
- /**********
- * Legend
- */
- .nvd3 .nv-legend .nv-series {
- cursor: pointer;
- }
- .nvd3 .nv-legend .nv-disabled circle {
- fill-opacity: 0;
- }
- /* focus */
- .nvd3 .background path {
- fill: none;
- stroke: #EEE;
- stroke-opacity: .4;
- shape-rendering: crispEdges;
- }
- /* scatter */
- /* sparkline */
- /* stacked area */
- /*.nvtooltip {*/
- /*background: rgba(255, 255, 255, 0.8);*/
- /*border: 1px solid rgba(0, 0, 0, 0.5);*/
- /*border-radius: 4px; }*/
- /*Give tooltips that old fade in transition by
- putting a "with-transitions" class on the container div.
- */
- /****
- Interactive Layer
- */
- .nvd3 line.nv-guideline {
- stroke-width: 3px;
- stroke: #ced1d7;
- }
- /* ===============================================
- * λΌμΈμ°¨νΈ Custom Style
- =================================================*/
- .udl-lc-tooltip-title {
- margin-top: 9px;
- margin-bottom: 9px;
- font-size: 14px;
- color: #a7adb1;
- text-align: center;
- }
- .udl-lc-tooltip-circle {
- display: inline-block;
- border-radius: 50%;
- margin-right: 7px;
- position: relative;
- bottom: 1px;
- width: 7px;
- height: 7px;
- }
- .udl-lc-tooltip-list {
- font-size: 11px;
- width: 140px;
- margin: 0 14px 14px 14px;
- }
- .udl-lc-tooltip-desc {
- vertical-align: middle;
- text-align: center;
- color: #fff;
- font-size: 14px;
- }
- .udl-lc-tooltip-desc.reach-after {
- margin-left: 7px;
- }
- .udl-lc-tooltip-value {
- font-weight: bold;
- position: relative;
- color: #fff;
- top: 1px;
- text-align: center;
- font-size: 18px;
- }
- .udl-daily-bcolor-1-th {
- background-color: #0075ff;
- }
- .udl-daily-bcolor-2-th {
- background-color: #E67E22;
- }
- .udl-lc-reach-after-install-icon {
- color: #0075ff;
- width: 9px;
- display: inline-block;
- }
- .simplelink-home-graph-layer {
- position: relative;
- float: left;
- width: 200px;
- padding: 10px 15px 10px 15px !important;
- font-size: 13px !important;
- color: #000e1f !important;
- box-shadow: 1px 1px 3px #838a92;
- background: #fff;
- border-radius: 3px;
- font-weight: 300 !important;
- }
- .simplelink-home-graph-layer-title {
- color: #838794 !important;
- width: 100%;
- position: relative;
- float: left;
- text-align: left;
- padding-bottom: 10px !important;
- }
- .simplelink-home-graph-layer-title>label {
- width: 130px;
- font-size: 17px !important;
- color: #838794 !important;
- font-weight: 300 !important;
- position: relative;
- float: left;
- text-align: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .simplelink-home-graph-layer-date-group {
- width: 100%;
- position: relative;
- float: left;
- padding-bottom: 5px !important;
- }
- .simplelink-home-graph-layer-date {
- width: 130px;
- position: relative;
- float: left;
- text-align: left;
- font-weight: 300 !important;
- font-size: 13px !important;
- }
- .simplelink-home-graph-layer-number {
- width: 70px;
- position: relative;
- float: left;
- text-align: right;
- font-weight: bold !important;
- font-size: 13px !important;
- }
- /* ===============================================
- * Sankey μ°¨νΈ
- =================================================*/
- .ab-sankey-chart {
- background-color: #fff;
- width: 100%;
- height: 280px;
- position: relative;
- }
- .ab-no-click-event {
- display: table;
- margin: 0 auto;
- height: 100%;
- }
- .ab-no-click-event span {
- margin: 0 auto;
- display: table-cell;
- font-size: 16px;
- vertical-align: middle;
- color: #a7adb1;
- }
- .ab-sankey-info-num-container {
- font-size: 12px;
- margin-top: 19px;
- display: inline-block;
- padding: 0 19px;
- float: right;
- color: #ff1800;
- font-weight: bold;
- }
- .ab-sankey-info-num-container.left {
- color: #00c3ff;
- border-right: 1px solid #eaeaea;
- margin-top: 19px;
- font-size: 12px;
- font-weight: bold;
- }
- .ab-sankey-info-num {
- margin: 0 4px 0 9px;
- font-weight: bold;
- font-size: 14px;
- display: inline-block;
- }
- .node rect {
- color: #fff;
- /*fill-opacity: .9;*/
- shape-rendering: crispEdges;
- }
- .link {
- fill: none;
- stroke: #ecf5ff;
- stroke-opacity: .85;
- }
- .link:hover {
- stroke: #dfe8ef;
- stroke-opacity: .95;
- }
- .udl-sankey-detail-info {
- position: absolute;
- right: 18px;
- bottom: 0;
- font-size: 12px;
- color: #00042d;
- vertical-align: middle;
- }
- .udl-sankey-tooltip-wrapper {
- position: absolute;
- min-width: 96px;
- min-height: 86px;
- /*border: 1px solid #0075ff;*/
- border-radius: 5px;
- background-color: #333d47;
- padding: 15px 19px;
- text-align: center;
- display: none;
- }
- .udl-sankey-tooltip-source {
- font-size: 15px;
- color: #a7adb1;
- /*margin-bottom: 4px;*/
- }
- .udl-sankey-tooltip-to {
- font-size: 14px;
- color: #a7adb1;
- /*margin-bottom: 4px;*/
- }
- .udl-sankey-tooltip-target {
- font-size: 15px;
- color: #a7adb1;
- margin-bottom: 10px;
- }
- .udl-sankey-tooltip-value {
- line-height: 20px;
- font-size: 20px;
- color: #0075ff;
- }
- /* daily graph line chart */
- .daily-graph-line-chart {
- background-color: #fff;
- height: 280px;
- }
- @charset "UTF-8";
- /*
- html5doctor.com Reset Stylesheet
- v1.6.1
- Last Updated: 2010-09-17
- Author: Richard Clark - http://richclarkdesign.com
- Twitter: @rich_clark
- */
- /*
- by IUEditor 2.0.2.14 (00001),and fixed by soo at 2016.06.01.
- */
- ::-webkit-scrollbar {
- width: 8px;
- height: 8px;
- }
- ::-webkit-scrollbar-track {
- border-radius: 4px;
- }
- ::-webkit-scrollbar-track-piece {
- background-color: #fafafa;
- }
- ::-webkit-scrollbar-thumb {
- border-radius: 4px;
- background-color: #c1c1c1;
- }
- html,body {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- vertical-align: baseline;
- font-family: 'Noto Sans KR', Hevetica, "Apple SD Gothic Neo", βμ ν SD μ°λκ³ λ Neoβ, Apple SD Gothic Neo, λλλ°λ₯Έκ³ λ, NanumBarunGothic, λλλ°λ₯Έκ³ λOTF, NanumBarunGothicOTF, λλκ³ λ, "NanumGothic", "Nanum Gothic", "λ§μ κ³ λ", "Malgun Gothic", Ngothic, Arial, sans-serif;
- font-weight: normal;
- font-size: 100%;
- /*background: #f3f5f6;*/
- }
- object,address,code,del,img,q,small,sub,var,dl,dt,dd,ul,li,fieldset,form,label,legend,footer,header,menu,nav,section,summary,time,mark,video,div,h1,h2,h3,h4,h5,h6,b,i,button {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- vertical-align: baseline;
- background: transparent;
- }
- h1,h2,h3,h4,h5,h6,b,i {
- font-size: inherit;
- font-weight: inherit;
- }
- p,span {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- }
- a {
- color: inherit;
- cursor: pointer;
- text-decoration: none;
- }
- footer,header,menu,nav,section {
- display: block;
- }
- nav ul {
- list-style: none;
- }
- ul {
- list-style-type: none;
- }
- q {
- quotes: none;
- }
- q:before,q:after {
- content: '';
- content: none;
- }
- a {
- margin: 0;
- padding: 0;
- font-size: 100%;
- vertical-align: baseline;
- background: transparent;
- }
- /* change colours to suit your needs */
- /* change colours to suit your needs */
- mark {
- background-color: #ff9;
- color: #000;
- font-style: italic;
- font-weight: bold;
- }
- del {
- text-decoration: line-through;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- /* change border colour to suit your needs */
- input {
- padding: 0;
- margin: 0;
- }
- input,select {
- vertical-align: middle;
- border-style: none;
- }
- input[type=submit],input[type=button],input[type=reset] {
- -webkit-tap-highlight-color: transparent;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- }
- body {
- /*line-height:1.5;*/
- -webkit-text-size-adjust: none;
- -moz-text-size-adjust: none;
- -ms-text-size-adjust: none;
- /* repaint text - font problem
- -webkit-animation-delay: 0.1s;
- -webkit-animation-name: fontfix;
- -webkit-animation-duration: 0.1s;
- -webkit-animation-iteration-count: 1;
- -webkit-animation-timing-function: linear;*/
- }
- /* repaint text - font problem*/
- @-webkit-keyframes fontfix {
- from {
- opacity: 1;
- }
- to {
- opacity: 1;
- }
- }
- button {
- cursor: pointer;
- }
- .material-icons {
- vertical-align: middle;
- }
- .material-icons.md-13 {
- font-size: 13px;
- }
- .material-icons.md-18 {
- font-size: 18px;
- }
- .material-icons.md-24 {
- font-size: 24px;
- }
- .material-icons.md-36 {
- font-size: 36px;
- }
- .material-icons.md-48 {
- font-size: 48px;
- }
- .code-wrapper {
- background: #e3f2fd;
- border: 1px solid rgba(0, 0, 0, 0.12);
- display: block;
- margin-top: 0;
- margin-bottom: 1rem;
- padding: 15px;
- color: rgba(0,0,0, .87);
- font-size: 12px;
- font-weight: 400 !important;
- line-height: 1.4;
- border-radius: 3px;
- white-space: pre;
- white-space: pre-wrap;
- word-break: break-all;
- word-wrap: break-word;
- }
- code {
- font-family: Roboto Mono, Monaco, "Courier New", monospace;
- }
- .highlight .c {
- color: #8f5902;
- font-style: italic;
- }
- /* Comment */
- .highlight .err {
- color: #a40000;
- }
- /* Error */
- .highlight .g {
- color: #000000;
- }
- /* Generic */
- .highlight .k {
- color: #204a87;
- font-weight: bold;
- }
- /* Keyword */
- .highlight .l {
- color: #000000;
- }
- /* Literal */
- .highlight .n {
- color: #000000;
- }
- /* Name */
- .highlight .o {
- color: #ce5c00;
- font-weight: bold;
- }
- /* Operator */
- .highlight .x {
- color: #000000;
- }
- /* Other */
- .highlight .p {
- color: #000000;
- font-weight: bold;
- }
- /* Punctuation */
- /* Comment.Multiline */
- /* Comment.Preproc */
- .highlight .c1 {
- color: #8f5902;
- font-style: italic;
- }
- /* Comment.Single */
- /* Comment.Special */
- /* Generic.Deleted */
- .highlight .ge {
- color: #000000;
- font-style: italic;
- }
- /* Generic.Emph */
- /* Generic.Error */
- /* Generic.Heading */
- .highlight .gi {
- color: #00A000;
- }
- /* Generic.Inserted */
- .highlight .go {
- color: #000000;
- font-style: italic;
- }
- /* Generic.Output */
- /* Generic.Prompt */
- /* Generic.Strong */
- /* Generic.Subheading */
- /* Generic.Traceback */
- /* Keyword.Constant */
- /* Keyword.Declaration */
- /* Keyword.Namespace */
- /* Keyword.Pseudo */
- .highlight .kr {
- color: #204a87;
- font-weight: bold;
- }
- /* Keyword.Reserved */
- /* Keyword.Type */
- /* Literal.Date */
- .highlight .m {
- color: #0000cf;
- font-weight: bold;
- }
- /* Literal.Number */
- .highlight .s {
- color: #4e9a06;
- }
- /* Literal.String */
- .highlight .na {
- color: #c4a000;
- }
- /* Name.Attribute */
- /* Name.Builtin */
- /* Name.Class */
- .highlight .no {
- color: #000000;
- }
- /* Name.Constant */
- /* Name.Decorator */
- /* Name.Entity */
- /* Name.Exception */
- .highlight .nf {
- color: #000000;
- }
- /* Name.Function */
- /* Name.Label */
- /* Name.Namespace */
- /* Name.Other */
- /* Name.Property */
- /* Name.Tag */
- .highlight .nv {
- color: #000000;
- }
- /* Name.Variable */
- /* Operator.Word */
- .highlight .w {
- color: #f8f8f8;
- text-decoration: underline;
- }
- /* Text.Whitespace */
- /* Literal.Number.Float */
- /* Literal.Number.Hex */
- /* Literal.Number.Integer */
- /* Literal.Number.Oct */
- /* Literal.String.Backtick */
- /* Literal.String.Char */
- .highlight .sd {
- color: #8f5902;
- font-style: italic;
- }
- /* Literal.String.Doc */
- .highlight .s2 {
- color: #4e9a06;
- }
- /* Literal.String.Double */
- /* Literal.String.Escape */
- /* Literal.String.Heredoc */
- /* Literal.String.Interpol */
- /* Literal.String.Other */
- /* Literal.String.Regex */
- .highlight .s1 {
- color: #4e9a06;
- }
- /* Literal.String.Single */
- .highlight .ss {
- color: #4e9a06;
- }
- /* Literal.String.Symbol */
- /* Name.Builtin.Pseudo */
- /* Name.Variable.Class */
- /* Name.Variable.Global */
- /* Name.Variable.Instance */
- /* Literal.Number.Integer.Long */
- .layer_app_select {
- position: absolute;
- width: 512px;
- background: #fff;
- box-shadow: 0 0 5px rgba(0,0,0,0.2);
- z-index: 10;
- }
- .layer_app_select ul {
- max-height: 281px;
- overflow: auto;
- overflow-x: hidden;
- }
- .layer_app_select ul li {
- position: relative;
- box-sizing: border-box;
- line-height: 35px;
- border-bottom: 1px solid #eaeaea;
- padding: 10px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- cursor: pointer;
- }
- .app-logo {
- display: inline-block;
- width: 40px;
- height: 40px;
- overflow: hidden;
- vertical-align: middle;
- margin-right: 20px;
- font-size: 0;
- }
- .app-logo img {
- width: 100%;
- }
- .layer_app_select ul li:hover {
- background: #f7f8fa;
- }
- .input-selected {
- width: 512px;
- padding: 12px 15px;
- border-radius: 3px;
- border: 1px solid #d0d2d7;
- font-size: 15px;
- color: #2d2d3c;
- font-weight: 600;
- word-break: break-all;
- -webkit-transition: background-color .3s;
- box-sizing: border-box;
- display: inline-block;
- cursor: pointer;
- }
- .input-selected:hover {
- background-color: #EFF1F5;
- }
- .input-delete {
- position: relative;
- float: right;
- color: #838794;
- }
- .modal-backdrop {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 1040;
- background-color: rgba(45, 45, 60, .7);
- text-align: center;
- }
- .modal-backdrop:before {
- content: '';
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- }
- .modal-backdrop .modal-dialog {
- display: inline-block;
- vertical-align: middle;
- text-align: left;
- }
- .dashboard-sidebar {
- width: 200px;
- height: 100%;
- position: fixed;
- background-color: #f3f5f6;
- /*font-size: 15px;
- color: #2d2d3c;*/
- top: 0;
- left: 0;
- z-index: 51;
- border-right: 1px solid #e3e5e8;
- box-sizing: border-box;
- }
- .dashboard-sidebar-top {
- width: 200px;
- height: 60px;
- background-color: #fff;
- text-align: center;
- }
- .dashboard-sidebar-app {
- position: relative;
- /*width: 165px;*/
- height: 120px;
- background: no-repeat center;
- background-size: 110%;
- overflow: hidden;
- /*filter: blur(10px);
- -webkit-filter: blur(10px);
- -moz-filter: blur(10px);
- -o-filter: blur(10px);*/
- }
- .dashboard-sidebar-app:before {
- content: '';
- position: absolute;
- top: -50%;
- left: -5%;
- width: 110%;
- height: 200%;
- background: inherit;
- filter: blur(10px);
- }
- .dashboard-sidebar-app .app-info {
- position: relative;
- float: left;
- width: 150px;
- height: 120px;
- color: #fff;
- padding-left: 15px;
- cursor: pointer;
- background: rgba(0, 14, 31, 0.5);
- }
- .dashboard-sidebar-app .app-info:hover {
- background-color: rgba(45, 45, 60, .7);
- }
- .dashboard-sidebar-app .app-list {
- position: absolute;
- float: right;
- width: 35px;
- height: 120px;
- background: rgba(0, 14, 31, 0.5);
- }
- .dashboard-sidebar-app .app-list:hover {
- background-color: rgba(45, 45, 60, .7);
- cursor: pointer;
- }
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
- /* IE10+ CSS styles go here */
- .dashboard-sidebar-app .app-info {
- background: rgba(0, 14, 31, 0.5);
- }
- .dashboard-sidebar-app .app-info:hover {
- background-color: rgba(45, 45, 60, .7);
- }
- .dashboard-sidebar-app .app-list {
- background: rgba(0, 14, 31, 0.5);
- }
- .dashboard-sidebar-app .app-list:hover {
- background-color: rgba(45, 45, 60, .7);
- }
- }
- .dashboard-sidebar-app .app-logo {
- position: relative;
- float: left;
- margin: 15px 0 0 35px;
- width: 60px;
- height: 60px;
- border-radius: 14px;
- /*border: 1px solid #fff;*/
- }
- /*.app-name {
- position: relative;
- float: left;
- padding-top: 15px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 115px;
- }*/
- .fa.app-setting {
- position: relative;
- float: left;
- padding-top: 17px;
- width: 28px;
- height: 15px;
- text-align: center;
- }
- .app-list-btn {
- position: absolute;
- margin: 15px 0;
- width: 100%;
- height: 90px;
- line-height: 90px;
- text-align: center;
- border-left: 1px solid rgba(255, 255, 255, .3);
- color: #fff;
- }
- .dashboard-sidebar-menu {
- font-size: 14px;
- }
- .category-title {
- font-size: 17px;
- padding: 15px;
- color: #2d2d3c;
- cursor: default;
- }
- .menu-action-btn {
- padding: 10px 20px;
- color: #0082ff;
- display: block;
- }
- .menu-action-btn:hover {
- background-color: #d0d2d7;
- cursor: pointer;
- }
- .menu-action-btn.on {
- background-color: #0082ff;
- color: #fff;
- }
- .menu-title {
- padding: 10px 20px;
- color: #2d2d3c;
- display: block;
- }
- .menu-title:hover {
- background-color: #d0d2d7;
- cursor: pointer;
- }
- .menu-title.on {
- background-color: #0082ff;
- color: #fff;
- }
- .dashboard-sidebar-bottom {
- position: fixed;
- bottom: 0;
- width: 200px;
- height: 100px;
- background-color: #f3f5f6;
- border-right: 1px solid #e3e5e8;
- box-sizing: border-box;
- /*background-color: #e5e7ec;*/
- }
- /*.guide{
- width: 170px;
- height: 20px;
- padding: 15px;
- font-size: 15px;
- color: #2d2d3c;
- }
- .guide:hover{
- background-color: #d0d2d7;
- cursor: pointer;
- }*/
- .user-id {
- position: relative;
- float: left;
- width: 150px;
- font-size: 14px;
- font-weight: 600;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: #2d2d3c;
- }
- .setting-btn {
- position: relative;
- float: right;
- color: #838794;
- font-size: 15px;
- }
- .my:hover {
- background-color: #d0d2d7;
- cursor: pointer;
- }
- .dashboard-sidebar-bottom {
- z-index: 51;
- }
- .dropdown-menu {
- border-radius: 0px !important;
- -webkit-box-shadow: 0px 7px 15px rgba(0, 0, 0, .3) !important;
- box-shadow: 0px 7px 15px rgba(0, 0, 0, .3) !important;
- border: none !important;
- }
- .daterangepicker.dashboard-style-wrapper:after {
- border: none !important;
- }
- .daterangepicker.dashboard-style-wrapper:before {
- border: none !important;
- }
- .range_customize {
- position: relative;
- top: 200px;
- right: -30px;
- }
- .page-title-section {
- position: relative;
- width: 500px;
- display: inline-block;
- }
- /*.page-title-section>p {
- margin: 0;
- }*/
- .simplelink-detail-title {
- font-size: 25px;
- color: #0082ff;
- border-radius: 3px;
- padding: 2px 7px 0 7px;
- background-color: #eff1f5;
- transition: background-color .3s;
- }
- .simplelink-detail-title:hover {
- cursor: copy;
- background-color: #e3e5e8;
- }
- .simplelink-detail-ic {
- font-size: 20px;
- color: #a9acb6;
- position: relative;
- font-family: FontAwesome;
- }
- .simplelink-detail-ic:hover {
- color: #969aa5;
- cursor: pointer;
- }
- .simplelink-detail-info-group {
- margin-top: 10px;
- padding-top: 10px;
- border-top: 1px solid #e3e5e8;
- }
- .simplelink-detail-info-group.first {
- margin-top: 20px;
- border-top: 0;
- }
- .simplelink-detail-info-label {
- /*float: left;*/
- vertical-align: top;
- box-sizing: border-box;
- width: 100px;
- font-size: 13px;
- color: #838794;
- display: inline-block;
- padding-left: 7px;
- }
- .simplelink-detail-info-desc {
- box-sizing: border-box;
- width: 400px;
- display: inline-block;
- font-size: 13px;
- color: #666b7b;
- word-break: break-all;
- }
- .simplelink-detail-info-desc-link {
- box-sizing: border-box;
- width: 400px;
- display: inline-block;
- font-size: 13px;
- color: #666b7b;
- word-break: break-all;
- transition: color .3s;
- }
- .simplelink-detail-info-desc-link:hover {
- cursor: pointer;
- color: #53596a;
- }
- .page-update-section {
- position: relative;
- float: right;
- /*width: 155px;*/
- box-sizing: border-box;
- margin-left: 30px;
- padding: 5px 10px;
- border-radius: 3px;
- font-size: 13px;
- color: #a9acb6;
- text-align: center;
- top: 5px;
- }
- .page-update-section:hover {
- cursor: pointer;
- background-color: #e3e5e8;
- }
- /*
- .page-title {
- font-size: 25px;
- color: #2d2d3c;
- }
- .page-desc {
- font-size: 13px;
- padding-top: 5px;
- color: #a9acb6;
- }
- */
- /* button */
- /* global test */
- .input-desc {
- font-size: 13px;
- color: #a9acb6;
- }
- /* og-tag */
- .og-tag-upload input#input-file {
- position: absolute;
- top: 0;
- bottom: 0;
- right: 0;
- left: 0;
- width: 140px;
- font-size: 20px;
- cursor: pointer;
- /* good browser */
- opacity: 0;
- /* IE 5-7 */
- filter: alpha(opacity=0);
- /* IE 8 */
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- /* Netscape */
- -moz-opacity: 0;
- /* Safari 1.x */
- -khtml-opacity: 0;
- }
- .dashboard-container-set,.dashboard-container-set-w-lnb,.dashboard-container-stats {
- padding: 30px;
- box-sizing: border-box;
- }
- .vertical-line {
- width: 1px;
- background: linear-gradient(#d0d2d7, #f7f8fa) !important;
- }
- /* ad-channel connect */
- .ad-channel {
- height: 110px;
- }
- /* progress */
- .progress-number {
- width: 20px;
- height: 20px;
- border-radius: 100%;
- font-size: 10px;
- line-height: 20px;
- text-align: center;
- display: inline-block;
- background: #a9acb6;
- color: #fff;
- }
- .progress-number.completed {
- background: #35bc8a;
- }
- .progress-number.selected {
- background: #0082ff;
- }
- .progress-title {
- font-size: 17px;
- color: #2d2d3c;
- font-weight: 500;
- }
- .progress-subtitle.selected {
- color: #0082ff;
- }
- .progress-subtitle {
- font-size: 14px;
- color: #969aa5;
- font-weight: 500;
- }
- .progress-desc.selected {
- color: #2d2d3c;
- }
- .progress-desc {
- font-size: 13px;
- color: #969aa5;
- font-weight: 500;
- }
- .progress-step {
- font-size: 11px;
- color: #969aa5;
- }
- .progress-copy-label {
- font-size: 11px;
- font-weight: 500;
- color: #969aa5;
- }
- .long-link .tooltip {
- z-index: 1;
- max-width: 100%;
- position: absolute;
- padding: 10px 15px;
- margin-top: -40px;
- background-color: #e7f3ff;
- box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
- font-size: 9pt;
- color: #2d2d3c;
- }
- .long-link .tooltip {
- display: none;
- }
- .long-link:hover .tooltip {
- display: block !important;
- }
- .footer {
- background-color: rgb(60,60,75);
- left: 0;
- padding-bottom: 50px;
- padding-top: 50px;
- position: relative;
- top: 0;
- width: 100%;
- }
- .box-121 {
- float: none;
- margin-left: auto;
- margin-right: auto;
- position: relative;
- width: 1000px;
- }
- .box-122 {
- float: left;
- height: 150px;
- position: relative;
- width: 100px;
- }
- .cell-124 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 700;
- height: 30px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-124.iux-hover,.cell-124.iux-active {
- opacity: 0.50;
- }
- .cell-124 > a {
- line-height: 30px;
- }
- .cell-484 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 400;
- height: 30px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-484.iux-hover,.cell-484.iux-active {
- opacity: 0.50;
- }
- .cell-484 > a {
- line-height: 30px;
- }
- .cell-126 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 400;
- height: 30px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-126.iux-hover,.cell-126.iux-active {
- opacity: 0.50;
- }
- .cell-126 > a {
- line-height: 30px;
- }
- .box-127 {
- float: left;
- height: 150px;
- position: relative;
- width: 100px;
- }
- .cell-128 {
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 700;
- height: 30px;
- line-height: 30px;
- position: relative;
- text-align: left;
- }
- .cell-485 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 400;
- height: 30px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-485.iux-hover,.cell-485.iux-active {
- opacity: 0.50;
- }
- .cell-485 > a {
- line-height: 30px;
- }
- .cell-499 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 400;
- height: 30px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-499 > a {
- line-height: 30px;
- }
- .cell-499.iux-hover,.cell-499.iux-active {
- opacity: 0.50;
- }
- .cell-129 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 400;
- height: 30px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-129.iux-hover,.cell-129.iux-active {
- opacity: 0.50;
- }
- .cell-129 > a {
- line-height: 30px;
- }
- .box-132 {
- float: left;
- height: 150px;
- position: relative;
- width: 100px;
- }
- .cell-133 {
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 700;
- height: 30px;
- line-height: 30px;
- position: relative;
- text-align: left;
- }
- .cell-480 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 400;
- height: 30px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-480.iux-hover,.cell-480.iux-active {
- opacity: 0.50;
- }
- .cell-480 > a {
- line-height: 30px;
- }
- .cell-136 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 400;
- height: 30px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-136 > a {
- line-height: 30px;
- }
- .cell-136.iux-hover,.cell-136.iux-active {
- opacity: 0.50;
- }
- .cell-135 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: none;
- font-size: 12px;
- font-weight: 400;
- height: 30px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-135 > a {
- line-height: 30px;
- }
- .cell-135.iux-hover,.cell-135.iux-active {
- opacity: 0.50;
- }
- .box-168 {
- float: right;
- position: relative;
- right: 0;
- width: 50%;
- }
- .text-202 {
- color: rgb(255,255,255);
- float: right;
- font-size: 11px;
- line-height: 2;
- position: relative;
- right: 0;
- text-align: right;
- width: 100%;
- }
- .text-255 {
- color: rgb(255,255,255);
- display: none;
- float: right;
- font-size: 11px;
- line-height: 1.90;
- position: relative;
- right: 0;
- text-align: left;
- width: 400px;
- }
- .box-266 {
- float: right;
- height: 32px;
- margin-top: 60px;
- position: relative;
- right: 0;
- width: 185px;
- }
- .svg-168.iux-hover,.svg-168.iux-active {
- opacity: 0.50;
- }
- .svg-168 {
- -webkit-transition: opacity 0.2s;
- background-image: url('/resource/project/ab180_logo_white-01.svg');
- background-position: right;
- background-size: contain;
- float: left;
- height: 32px;
- opacity: 1;
- position: relative;
- transition: opacity 0.2s;
- width: 90px;
- }
- .svg-197 {
- -webkit-transition: opacity 0.2s;
- background-image: url('/resource/project/facebook_white.svg');
- background-position: center center;
- background-size: 27px 27px;
- float: left;
- height: 32px;
- margin-left: 20px;
- opacity: 1;
- position: relative;
- transition: opacity 0.2s;
- width: 32px;
- }
- .svg-197.iux-hover,.svg-197.iux-active {
- opacity: 0.50;
- }
- .svg-198.iux-hover,.svg-198.iux-active {
- opacity: 0.50;
- }
- .svg-198 {
- -webkit-transition: opacity 0.2s;
- background-image: url('/resource/project/rocketpunch_white.svg');
- background-position: center center;
- background-size: 27px 27px;
- float: left;
- height: 32px;
- margin-left: 10px;
- opacity: 1;
- position: relative;
- transition: opacity 0.2s;
- width: 32px;
- }
- .box-136 {
- bottom: 0;
- height: 17px;
- }
- .cell-137 {
- -webkit-transition: opacity 0.2s;
- border-width: 0;
- color: rgb(255,255,255);
- float: left;
- font-size: 10px;
- font-weight: 400;
- height: 17px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-137.iux-hover,.cell-137.iux-active {
- opacity: 0.50;
- }
- .cell-137 > a {
- line-height: 17px;
- }
- .box-139 {
- border-color: rgb(255,255,255);
- border-left-width: 1px;
- float: left;
- height: 17px;
- margin-left: 15px;
- position: relative;
- }
- .cell-140 {
- -webkit-transition: opacity 0.2s;
- border-width: 0;
- color: rgb(255,255,255);
- float: left;
- font-size: 10px;
- font-weight: 400;
- height: 17px;
- margin-left: 15px;
- opacity: 1;
- padding: 0;
- position: relative;
- text-align: center;
- transition: opacity 0.2s;
- }
- .cell-140 > a {
- line-height: 17px;
- }
- .cell-140.iux-hover,.cell-140.iux-active {
- opacity: 0.50;
- }
- .box-481 {
- border-color: rgb(255,255,255);
- border-left-width: 1px;
- float: left;
- height: 17px;
- margin-left: 15px;
- position: relative;
- }
- .cell-142 {
- -webkit-transition: opacity 0.2s;
- color: rgb(255,255,255);
- float: left;
- font-size: 10px;
- font-weight: 400;
- height: 17px;
- margin-left: 15px;
- opacity: 1;
- position: relative;
- text-align: left;
- transition: opacity 0.2s;
- }
- .cell-142.iux-hover,.cell-142.iux-active {
- opacity: 0.50;
- }
- .cell-142 > a {
- line-height: 17px;
- }
- @media screen and (max-width:1365px) {
- .box-121 {
- float: none;
- margin-left: auto;
- margin-right: auto;
- width: 800px;
- }
- .box-168 {
- float: right;
- right: 0;
- }
- .text-202 {
- float: right;
- right: 0;
- }
- .text-255 {
- float: right;
- right: 0;
- width: 380px;
- }
- .box-266 {
- float: right;
- right: 0;
- }
- .svg-168 {
- background-position: right;
- }
- .box-136 {
- bottom: 0;
- }
- }
- @media screen and (max-width:969px) {
- .box-121 {
- float: none;
- margin-left: auto;
- margin-right: auto;
- width: 680px;
- }
- .box-168 {
- float: right;
- right: 0;
- width: 50.00%;
- width: calc(100% - 300px);
- width: -moz-calc(100% - 300px);
- width: -webkit-calc(100% - 300px);
- }
- .text-202 {
- float: right;
- right: 0;
- width: 100%;
- }
- .text-255 {
- float: right;
- right: 0;
- width: 380px;
- }
- .box-266 {
- float: right;
- right: 0;
- }
- .svg-168 {
- background-position: right;
- }
- .box-136 {
- bottom: 0;
- }
- }
- @media screen and (max-width:759px) {
- .box-121 {
- float: none;
- margin-left: auto;
- margin-right: auto;
- width: 680.00%;
- width: calc(100% - 50px);
- width: -moz-calc(100% - 50px);
- width: -webkit-calc(100% - 50px);
- }
- .box-122 {
- height: 120px;
- max-width: 180px;
- width: 33.30%;
- }
- .box-127 {
- height: 120px;
- max-width: 180px;
- width: 33.30%;
- }
- .box-132 {
- height: 120px;
- max-width: 180px;
- width: 33.30%;
- }
- .box-168 {
- float: left;
- margin-right: initial;
- margin-right: auto;
- margin-top: 20px;
- position: relative;
- width: 100%;
- }
- .text-202 {
- display: none;
- float: left;
- font-size: 10px;
- height: 140px;
- margin-right: initial;
- margin-right: auto;
- text-align: left;
- width: 103.85%;
- }
- .text-255 {
- display: inherit;
- float: left;
- font-size: 10px;
- margin-right: initial;
- margin-right: auto;
- text-align: left;
- width: 100%;
- }
- .box-266 {
- float: left;
- margin-right: initial;
- margin-right: auto;
- margin-top: 20px;
- position: relative;
- width: 100%;
- }
- .svg-168 {
- background-position: center;
- background-size: contain;
- float: left;
- }
- .svg-197 {
- background-size: 25px 25px;
- }
- .svg-198 {
- background-size: 25px 25px;
- }
- .box-136 {
- bottom: initial;
- bottom: auto;
- float: left;
- left: initial;
- left: auto;
- margin-top: 10px;
- position: relative;
- width: 100%;
- }
- }
- .header {
- -webkit-box-shadow: 0px 0px 2px 2px rgba(102,107,123,0.20);
- background-color: rgb(60,60,75);
- box-shadow: 0px 0px 2px 2px rgba(102,107,123,0.20);
- color: rgb(0,0,0);
- float: none;
- height: 60px;
- left: 0px;
- position: fixed;
- top: 0px;
- width: 100%;
- z-index: 11;
- }
- .box-106 {
- border-bottom-width: 1px;
- border-color: rgb(60,60,75);
- float: none;
- height: 100%;
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- top: 0px;
- width: 100%;
- }
- .box-477 {
- float: none;
- height: 100%;
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- top: 0px;
- width: 1004px;
- }
- .svg-480 {
- -webkit-transition: opacity 0.2s;
- background-image: url('/resource/project/airbridge_beta_white.svg');
- background-position: left center;
- background-size: contain;
- float: none;
- height: 25px;
- left: 6px;
- opacity: 1;
- top: 18px;
- transition: opacity 0.2s;
- width: 200px;
- }
- .svg-480.iux-hover,.svg-480.iux-active {
- opacity: 0.70;
- }
- .cell-481 {
- -webkit-transition: background-color 0.2s;
- background-color: rgb(255,255,255);
- border-radius: 3px;
- color: rgb(0,130,255);
- float: right;
- font-size: 14px;
- font-weight: 700;
- height: 30px;
- margin-right: 3px;
- margin-top: 15px;
- opacity: 1;
- padding-left: 15px;
- padding-right: 15px;
- position: relative;
- right: 0px;
- text-align: center;
- transition: background-color 0.2s;
- }
- .cell-481 > a {
- line-height: 30px;
- }
- .cell-481.iux-hover,.cell-481.iux-active {
- background-color: rgb(203,229,255);
- }
- .box-479 {
- float: right;
- height: 60px;
- margin-right: 25px;
- position: relative;
- right: 0px;
- width: 50px;
- }
- .cell-483 {
- -webkit-transition: border-color 0.2s;
- border-bottom-width: 3px;
- border-color: transparent;
- bottom: 0px;
- color: rgb(255,255,255);
- font-size: 14px;
- font-weight: 400;
- height: 54px;
- opacity: 1;
- text-align: center;
- transition: border-color 0.2s;
- width: 50px;
- }
- .cell-483.iux-hover,.cell-483.iux-active {
- border-color: rgb(255,255,255);
- }
- .cell-483 > a {
- line-height: 54px;
- }
- .box-484 {
- float: right;
- height: 60px;
- margin-right: 20px;
- position: relative;
- right: 0px;
- width: 50px;
- }
- .cell-489 {
- -webkit-transition: border-color 0.2s;
- border-bottom-width: 3px;
- border-color: transparent;
- bottom: 0px;
- color: rgb(255,255,255);
- font-size: 14px;
- font-weight: 400;
- height: 54px;
- opacity: 1;
- text-align: center;
- transition: border-color 0.2s;
- width: 50px;
- }
- .cell-489.iux-hover,.cell-489.iux-active {
- border-color: rgb(255,255,255);
- }
- .cell-489 > a {
- line-height: 54px;
- }
- .box-485 {
- float: right;
- height: 60px;
- margin-right: 20px;
- position: relative;
- right: 0px;
- width: 40px;
- }
- .cell-488 {
- -webkit-transition: border-color 0.2s;
- border-bottom-width: 3px;
- border-color: transparent;
- bottom: 0px;
- color: rgb(255,255,255);
- font-size: 14px;
- font-weight: 400;
- height: 54px;
- opacity: 1;
- text-align: center;
- transition: border-color 0.2s;
- width: 40px;
- }
- .cell-488 > a {
- line-height: 54px;
- }
- .cell-488.iux-hover,.cell-488.iux-active {
- border-color: rgb(255,255,255);
- }
- .box-487 {
- float: right;
- height: 60px;
- margin-right: 20px;
- position: relative;
- right: 0px;
- width: 80px;
- }
- .cell-491 {
- -webkit-transition: border-color 0.2s;
- border-bottom-width: 3px;
- border-color: transparent;
- bottom: 0px;
- color: rgb(255,255,255);
- font-size: 14px;
- font-weight: 400;
- height: 54px;
- opacity: 1;
- text-align: center;
- transition: border-color 0.2s;
- width: 80px;
- }
- .cell-491.iux-hover,.cell-491.iux-active {
- border-color: rgb(255,255,255);
- }
- .cell-491 > a {
- line-height: 54px;
- }
- .box-482 {
- height: 0px;
- left: 778px;
- top: 52px;
- width: 0px;
- }
- .box-478 {
- display: none;
- float: none;
- height: 100px;
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- top: 0px;
- width: 1012px;
- }
- .cell-482 {
- color: rgb(60,60,75);
- float: left;
- font-size: 15px;
- height: 40px;
- position: relative;
- text-align: center;
- width: 33.30%;
- }
- .cell-482 > a {
- line-height: 40px;
- }
- .cell-486 {
- color: rgb(60,60,75);
- float: left;
- font-size: 15px;
- height: 40px;
- position: relative;
- text-align: center;
- width: 33.30%;
- }
- .cell-486 > a {
- line-height: 40px;
- }
- .cell-490 {
- color: rgb(60,60,75);
- float: left;
- font-size: 15px;
- height: 40px;
- position: relative;
- text-align: center;
- width: 33.30%;
- }
- .cell-490 > a {
- line-height: 40px;
- }
- @media screen and (max-width:1365px) {
- .box-106 {
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- }
- .box-477 {
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- width: 800px;
- }
- .cell-481 {
- right: 0px;
- }
- .box-479 {
- right: 0px;
- }
- .cell-483 {
- bottom: 0px;
- }
- .box-484 {
- right: 0px;
- }
- .cell-489 {
- bottom: 0px;
- }
- .box-485 {
- right: 0px;
- }
- .cell-488 {
- bottom: 0px;
- }
- .box-487 {
- right: 0px;
- }
- .cell-491 {
- bottom: 0px;
- }
- .box-478 {
- display: none;
- float: none;
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- }
- .cell-482 {
- float: none;
- }
- .cell-486 {
- float: none;
- }
- .cell-490 {
- float: none;
- }
- }
- @media screen and (max-width:969px) {
- .box-106 {
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- }
- .box-477 {
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- width: 680px;
- }
- .cell-481 {
- right: 0px;
- }
- .box-479 {
- right: 0px;
- }
- .cell-483 {
- bottom: 0px;
- }
- .box-484 {
- right: 0px;
- }
- .cell-489 {
- bottom: 0px;
- }
- .box-485 {
- right: 0px;
- }
- .cell-488 {
- bottom: 0px;
- }
- .box-487 {
- right: 0px;
- }
- .cell-491 {
- bottom: 0px;
- }
- .box-478 {
- display: none;
- float: none;
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- }
- .cell-482 {
- float: none;
- }
- .cell-486 {
- float: none;
- }
- .cell-490 {
- float: none;
- }
- }
- @media screen and (max-width:759px) {
- .header {
- height: 90px;
- }
- .box-106 {
- height: 89px;
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- width: 100%;
- }
- .box-477 {
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- width: 100%;
- }
- .svg-480 {
- background-position: center;
- float: left;
- height: 33px;
- left: initial;
- left: auto;
- margin-left: 5%;
- margin-top: 10px;
- position: relative;
- top: initial;
- top: auto;
- width: 113px;
- }
- .cell-481 {
- font-size: 13px;
- height: 33px;
- margin-right: 5%;
- margin-top: 9px;
- right: 0px;
- }
- .cell-481 > a {
- line-height: 33px;
- }
- .box-479 {
- float: right;
- height: 50px;
- right: 0px;
- }
- .cell-483 {
- bottom: initial;
- bottom: auto;
- float: none;
- height: 50px;
- }
- .cell-483 > a {
- line-height: 50px;
- }
- .box-484 {
- display: none;
- float: left;
- margin-right: initial;
- margin-right: auto;
- margin-top: 60px;
- }
- .cell-489 {
- bottom: initial;
- bottom: auto;
- display: none;
- float: none;
- }
- .box-485 {
- display: none;
- float: left;
- margin-right: initial;
- margin-right: auto;
- margin-top: 60px;
- }
- .cell-488 {
- bottom: initial;
- bottom: auto;
- display: none;
- float: none;
- }
- .box-487 {
- display: none;
- float: left;
- margin-right: initial;
- margin-right: auto;
- margin-top: 60px;
- }
- .cell-491 {
- bottom: initial;
- bottom: auto;
- display: none;
- float: none;
- }
- .box-478 {
- background-color: rgb(247,248,250);
- border-bottom-width: 1px;
- border-color: rgb(247,248,250);
- bottom: 0px;
- display: inherit;
- height: 40px;
- left: 0px;
- margin-left: auto;
- margin-right: auto;
- right: 0px;
- top: initial;
- top: auto;
- width: 100%;
- }
- .cell-482 {
- border-bottom-width: 3px;
- border-color: transparent;
- color: rgb(60,60,75);
- float: left;
- font-size: 14px;
- height: 35px;
- margin-top: 3px;
- position: relative;
- }
- .cell-482 > a {
- line-height: 35px;
- }
- .cell-486 {
- border-bottom-width: 3px;
- border-color: transparent;
- color: rgb(60,60,75);
- float: left;
- font-size: 14px;
- height: 35px;
- margin-top: 3px;
- position: relative;
- }
- .cell-486 > a {
- line-height: 35px;
- }
- .cell-490 {
- border-bottom-width: 3px;
- border-color: transparent;
- color: rgb(60,60,75);
- float: left;
- font-size: 14px;
- height: 35px;
- margin-top: 3px;
- position: relative;
- }
- .cell-490 > a {
- line-height: 35px;
- }
- }
- .page-content {
- background-color: rgb(255,255,255);
- }
- .section-109 {
- height: 60px;
- }
- .section {
- background-color: rgb(247,248,250);
- padding-bottom: 80px;
- padding-top: 65px;
- }
- .text-115 {
- color: rgb(83,89,106);
- float: none;
- font-size: 15px;
- font-weight: 400;
- line-height: 1.90;
- margin-left: auto;
- margin-right: auto;
- opacity: 1;
- position: relative;
- text-align: center;
- width: 100.00%;
- width: calc(100% - 50px);
- width: -moz-calc(100% - 50px);
- width: -webkit-calc(100% - 50px);
- }
- .text-57 {
- color: rgb(83,89,106);
- float: none;
- font-size: 15px;
- font-weight: 400;
- line-height: 1.90;
- margin-left: auto;
- margin-right: auto;
- opacity: 1;
- position: relative;
- text-align: center;
- width: 100.00%;
- width: calc(100% - 50px);
- width: -moz-calc(100% - 50px);
- width: -webkit-calc(100% - 50px);
- }
- .cell {
- float: none;
- font-size: 13px;
- height: 33px;
- line-height: 33px;
- margin-left: auto;
- margin-right: auto;
- margin-top: 30px;
- position: relative;
- text-align: center;
- width: 160px;
- }
- .section-169 {
- overflow: visible;
- }
- .cell-170 {
- -webkit-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.23);
- background-color: rgb(0,130,255);
- background-image: url('/resource/project/icon-launcher-acquire@2x.8a739dbd.png');
- background-position: center center;
- background-size: 30px 30px;
- border-color: rgb(0,90,215);
- border-radius: 100px;
- border-width: 1px;
- bottom: 15px;
- box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.23);
- color: rgb(255,255,255);
- font-size: 11px;
- font-weight: 500;
- height: 48px;
- line-height: 48px;
- position: fixed;
- right: 15px;
- text-align: center;
- width: 48px;
- z-index: 11;
- }
- @media screen and (max-width:1365px) {
- .text-115 {
- margin-left: auto;
- margin-right: auto;
- }
- .text-57 {
- margin-left: auto;
- margin-right: auto;
- }
- .cell {
- margin-left: auto;
- margin-right: auto;
- }
- }
- @media screen and (max-width:969px) {
- .text-115 {
- margin-left: auto;
- margin-right: auto;
- }
- .text-57 {
- margin-left: auto;
- margin-right: auto;
- }
- .cell {
- margin-left: auto;
- margin-right: auto;
- }
- }
- @media screen and (max-width:759px) {
- .section-109 {
- height: 90px;
- }
- .section {
- background-color: rgb(243,245,246);
- }
- .text-115 {
- float: none;
- font-weight: 400;
- margin-left: auto;
- margin-right: auto;
- max-width: 450px;
- position: relative;
- }
- .text-57 {
- float: none;
- font-weight: 400;
- margin-left: auto;
- margin-right: auto;
- max-width: 450px;
- position: relative;
- }
- .cell {
- float: none;
- margin-left: auto;
- margin-right: auto;
- max-width: 450px;
- }
- }
- .log_in .register-wrap {
- margin: 160px auto 100px auto;
- }
- @media screen and (max-width:759px) {
- .log_in .register-wrap {
- margin: 160px auto 70px auto;
- }
- }
- .log_in .reset-password-wrap {
- margin: 160px auto 100px auto;
- }
- @media screen and (max-width:759px) {
- .log_in .reset-password-wrap {
- margin: 160px auto 70px auto;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement