Created
December 19, 2016 11:24
-
-
Save gnujoow/09223a6a899039c8dd36a2a3fc213c3e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
box-sizing: border-box; | |
background: #fff; | |
font-family: "Roboto", sans-serif !important; | |
font-family: "Noto Sans KR", Hevetica, "Apple SD Gothic Neo", "애플 SD 산돌고딕 Neo", "맑은 고딕", "Malgun Gothic", Ngothic, Arial, sans-serif; | |
} | |
/* 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; | |
} | |
.container-fluid { | |
padding-right: 15px; | |
padding-left: 15px; | |
margin-right: auto; | |
margin-left: auto; | |
padding-top: 90px; | |
} | |
.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; | |
box-sizing: border-box; | |
padding: 12px 15px 10px; | |
border-radius: 3px; | |
transition: background, box-shadow .2s; | |
border: 0; | |
outline: none; | |
word-break: break-all; | |
} | |
.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-action { | |
color: #fff; | |
background: #2FA479; | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .06); | |
} | |
.btn-action:hover { | |
background: #278764; | |
cursor: pointer; | |
} | |
.btn-key { | |
color: #fff; | |
background: #0082ff; | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .06); | |
} | |
.btn-key:hover { | |
background: #0874de; | |
cursor: pointer; | |
} | |
.btn-sub { | |
background: #f7f8fa; | |
color: rgba(0, 0, 0, .54); | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .06); | |
} | |
.btn-sub.fff { | |
background: #fff; | |
} | |
.btn-sub-gray { | |
background: #eff1f5; | |
color: rgba(0, 0, 0, .54); | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .06); | |
} | |
.btn-sub-fff { | |
background: #fff; | |
color: rgba(0, 0, 0, .54); | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .06); | |
} | |
.btn-sub:hover, | |
.btn-sub-gray:hover, | |
.btn-sub-fff:hover { | |
background: #e3e5e8; | |
cursor: pointer; | |
} | |
.btn-sub-fff.selected { | |
border: 2px solid #66b5ff; | |
} | |
.btn-gray { | |
background: #969aa5; | |
color: #fff; | |
} | |
.btn-gray:hover { | |
background: #838794; | |
cursor: pointer; | |
} | |
.btn-1depth:hover { | |
background: #e3e5e8; | |
cursor: pointer; | |
} | |
.btn-disabled { | |
cursor: not-allowed; | |
background: #e3e5e8; | |
color: #a9acb6; | |
border: 0; | |
} | |
.btn-ghost { | |
display: inline-block; | |
padding: 10px 15px 10px 45px; | |
color: rgba(0, 0, 0, .38); | |
} | |
.btn-ghost:hover { | |
color: rgba(0, 0, 0, .54); | |
background: #f7f8fa; | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .06); | |
cursor: pointer; | |
} | |
.btn-ghost>i:first-child { | |
position: absolute; | |
top: 10px; | |
left: 15px; | |
font-size: 20px; | |
} | |
.btn-ghost-arrow { | |
position: absolute; | |
top: 0; | |
font-size: 20px; | |
color: #e3e5e8; | |
} | |
.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: #d0d2d7; | |
transition: color .2s; | |
position: relative; | |
display: inline-block; | |
margin-left: 3px; | |
} | |
.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; | |
} | |
.btn-ic .tooltip-left { | |
width: 200px; | |
top: 110%; | |
left: 0; | |
background-color: #e7f3ff; | |
box-shadow: 0px 3px 5px rgba(0, 0, 0, .3); | |
color: #2d2d3c; | |
font-size: 13px; | |
text-align: left; | |
padding: 10px 15px; | |
border-radius: 3px; | |
border: 1px solid rgba(0, 0, 0, .06); | |
position: absolute; | |
z-index: 1; | |
display: none; | |
} | |
.btn-ic .tooltip-center { | |
width: 200px; | |
top: 110%; | |
left: -100px; | |
background-color: #e7f3ff; | |
box-shadow: 0px 3px 5px rgba(0, 0, 0, .3); | |
color: #2d2d3c; | |
font-size: 13px; | |
text-align: left; | |
padding: 10px 15px; | |
border-radius: 3px; | |
border: 1px solid rgba(0, 0, 0, .06); | |
position: absolute; | |
z-index: 1; | |
display: none; | |
} | |
.tooltip-center.sm { | |
width: 100px; | |
left: -55px; | |
} | |
.btn-ic .tooltip-right { | |
width: 200px; | |
top: 100%; | |
right: 0; | |
background-color: #e7f3ff; | |
box-shadow: 0px 3px 5px rgba(0, 0, 0, .3); | |
color: #2d2d3c; | |
font-size: 13px; | |
text-align: left; | |
padding: 10px 15px; | |
border-radius: 3px; | |
border: 1px solid rgba(0, 0, 0, .06); | |
position: absolute; | |
z-index: 1; | |
display: none; | |
} | |
.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: 34px; | |
font-weight: 100; | |
} | |
.headline { | |
font-size: 25px; | |
font-weight: 300; | |
} | |
.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; | |
} | |
.bt-z { | |
border-top: 0; | |
} | |
.br-z { | |
border-right: 0; | |
} | |
.btrr-z { | |
border-top-right-radius: 0 !important; | |
} | |
.btlr-z { | |
border-top-left-radius: 0 !important; | |
} | |
.bbrr-z { | |
border-bottom-right-radius: 0 !important; | |
} | |
.bblr-z { | |
border-bottom-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-marker-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; | |
} | |
@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, 'Nanum Barun Gothic', 나눔고딕, "NanumGothic", "Nanum Gothic", "맑은 고딕", "Malgun Gothic", Ngothic, Arial, sans-serif; | |
font-weight: normal; | |
font-size: 100%; | |
/*background: #f3f5f6;*/ | |
} | |
object, | |
iframe, | |
blockquote, | |
pre, | |
abbr, | |
address, | |
cite, | |
code, | |
del, | |
dfn, | |
img, | |
ins, | |
kbd, | |
q, | |
samp, | |
small, | |
sub, | |
sup, | |
var, | |
dl, | |
dt, | |
dd, | |
ol, | |
ul, | |
li, | |
fieldset, | |
form, | |
label, | |
legend, | |
article, | |
aside, | |
canvas, | |
details, | |
figcaption, | |
figure, | |
footer, | |
header, | |
hgroup, | |
menu, | |
nav, | |
section, | |
summary, | |
time, | |
mark, | |
audio, | |
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; | |
} | |
article, | |
aside, | |
details, | |
fig caption, | |
figure, | |
footer, | |
header, | |
group, | |
menu, | |
nav, | |
section { | |
display: block; | |
} | |
nav ul { | |
list-style: none; | |
} | |
ul { | |
list-style-type: none; | |
} | |
blockquote, | |
q { | |
quotes: none; | |
} | |
block quote:before, | |
block quote:after, | |
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 */ | |
ins { | |
background-color: #ff9; | |
color: #000; | |
text-decoration: none; | |
} | |
/* change colors to suit your needs */ | |
mark { | |
background-color: #ff9; | |
color: #000; | |
font-style: italic; | |
font-weight: bold; | |
} | |
del { | |
text-decoration: line-through; | |
} | |
abbr[title], | |
dfn[title] { | |
border-bottom: 1px dotted; | |
cursor: help; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
/* change border color to suit your needs */ | |
hr { | |
display: block; | |
height: 1px; | |
border: 0; | |
border-top: 1px solid #cccccc; | |
margin: 1em 0; | |
padding: 0; | |
} | |
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; | |
} | |
/* from developer */ | |
.pushedToRight { | |
margin-left: 350px !important; | |
} | |
.fadeOut { | |
opacity: 0; | |
height: 0; | |
padding: 0 8px; | |
overflow: hidden; | |
transition: all .15s | |
} | |
.fadeIn { | |
opacity: 1; | |
transition: all .15s | |
} | |
.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; | |
} | |
.mini-loading { | |
width: 100%; | |
height: 100%; | |
box-sizing: border-box; | |
padding-top: 2%; | |
padding-bottom: 2%; | |
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; } | |
/* 161205 GNB */ | |
@media only screen and (min-width: 0px) { | |
.doc-web { | |
display: none; | |
} | |
.doc-mobile { | |
display: none; | |
} | |
} | |
@media only screen and (min-width: 320px) { | |
.doc-web { | |
display: none; | |
} | |
.doc-mobile { | |
display: inline; | |
} | |
} | |
@media (min-width: 768px) { | |
.doc-web { | |
display: inline; | |
} | |
.doc-mobile { | |
display: none; | |
} | |
} | |
@media (min-width: 992px) { | |
.doc-web { | |
display: inline; | |
} | |
.doc-mobile { | |
display: none; | |
} | |
} | |
@media (min-width: 1200px) { | |
.doc-web { | |
display: inline; | |
} | |
.doc-mobile { | |
display: none; | |
} | |
} | |
.doc-header { | |
width: 100%; | |
height: 40px; | |
background: #222222; | |
text-align: right; | |
} | |
.doc-header-menu { | |
display: inline-block; | |
padding: 0 15px; | |
line-height: 40px; | |
font-size: 13px; | |
color: rgba(255, 255, 255, .7); | |
transition: color .2s; | |
} | |
.doc-header-menu:hover { | |
color: rgba(255, 255, 255, 1); | |
} | |
.doc-header-menu.on { | |
color: rgba(255, 255, 255, 1); | |
} | |
.doc-web { | |
width: 100%; | |
position: fixed; | |
top: 0px; | |
z-index: 100; | |
} | |
.doc-gnb { | |
width: 100%; | |
height: 60px; | |
background: #1E88E5; | |
box-shadow: 0 1px 10px rgba(0, 0, 0, .30); | |
} | |
.doc-gnb-logo-wrap { | |
padding: 15px; | |
transition: opacity .2s; | |
} | |
.doc-gnb-logo-wrap:hover { | |
opacity: .7; | |
} | |
.doc-gnb-logo { | |
position: relative; | |
top: 3px; | |
height: 25px; | |
} | |
.doc-gnb-logo-wrap > span { | |
position: relative; | |
top: -5px; | |
padding-left: 15px; | |
} | |
.doc-gnb-search[type=search] { | |
width: 100%; | |
padding: 12px 15px 12px 45px; | |
border-radius: 3px; | |
background-color: rgba(255, 255, 255, .12); | |
font-size: 14.5px; | |
position: relative; | |
top: -11px; | |
} | |
.doc-gnb-search[type=search]:focus { | |
background-color: #fff; | |
color: rgba(0, 0, 0, .87); | |
outline: none; | |
} | |
.doc-gnb-search[type=search]:focus + i { | |
color: rgba(0, 0, 0, .38); | |
} | |
.doc-gnb-search-wrap { | |
position: relative; | |
width: calc(100% - 257px); | |
max-width: 500px; | |
padding: 15px 15px 15px 45px; | |
box-sizing: border-box; | |
display: inline-block; | |
} | |
.doc-gnb-search-wrap > i { | |
position: absolute; | |
left: 55px; | |
top: 12px; | |
color: rgba(255, 255, 255, .5); | |
} | |
.doc-gnb-dash-btn { | |
position: relative; | |
top: -6px; | |
box-sizing: border-box; | |
background: rgba(255, 255, 255, .12); | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .1); | |
padding: 12px 30px; | |
border-radius: 3px; | |
transition: background, box-shadow .2s; | |
} | |
.doc-gnb-dash-btn:hover { | |
background: rgba(0, 0, 0, .12); | |
cursor: pointer; | |
} | |
.doc-gnb-draw-wrap-mobile { | |
padding: 15px; | |
height: 60px; | |
box-sizing: border-box; | |
transition: opacity .2s; | |
} | |
.doc-gnb-draw-wrap-mobile:hover { | |
background-color: rgba(0, 0, 0, .12); | |
cursor: pointer; | |
} | |
.doc-gnb-draw-wrap-mobile > span { | |
position: relative; | |
top: 4px; | |
padding-left: 15px; | |
} | |
.doc-gnb-menu-ic-mobile { | |
position: relative; | |
top: -2px; | |
display: inline-block; | |
} | |
.doc-gnb-search-ic-mobile { | |
padding: 15px; | |
height: 60px; | |
box-sizing: border-box; | |
line-height: 30px; | |
} | |
.doc-gnb-search-ic-mobile:hover { | |
background-color: rgba(0, 0, 0, .12); | |
} | |
input { | |
} | |
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ | |
color: #fff; | |
font-weight: 200; | |
} | |
/*///////////// 161206 LNB /////////////*/ | |
.doc-lnb { | |
margin-top: 100px; | |
position: fixed; | |
width: 260px; | |
height: calc(100vh - 60px); | |
background: #eff1f3; | |
border-right: 1px solid rgba(0, 0, 0, .12); | |
box-sizing: border-box; | |
overflow-y: auto; | |
overflow-x: hidden; | |
} | |
.doc-lng-wrap{ | |
min-height: 100%; | |
margin-bottom: -212px; | |
} | |
.doc-lng-wrap.mobile{ | |
margin-bottom: -212px; | |
} | |
.doc-lng-wrap:after{ | |
content: ""; | |
display: block; | |
} | |
.footer, | |
.doc-lng-wrap:after{ | |
height: 125px; | |
} | |
.doc-lnb-0-depth { | |
padding: 15px; | |
font-size: 14.5px; | |
font-weight: 500; | |
color: rgba(0,0,0,.87); | |
position: relative; | |
} | |
.doc-lnb a { | |
display: block; | |
} | |
.doc-lnb a:hover { | |
background: #eff1f3; | |
} | |
.doc-lnb-0-depth:hover { | |
background: rgba(0,0,0, .12); | |
} | |
.doc-lnb-1-depth-wrap { | |
border-top: 1px solid rgba(0,0,0,.12); | |
border-bottom: 1px solid rgba(0,0,0,.12); | |
background: #fff; | |
} | |
.doc-lnb-1-depth { | |
padding: 15px 15px 15px 30px; | |
font-size: 14.5px; | |
font-weight: 500; | |
color: rgba(0,0,0,.54); | |
position: relative; | |
} | |
.doc-lnb-1-depth.on { | |
color: rgba(0,0,0,.87); | |
} | |
.doc-lnb-1-depth >i { | |
position: absolute; | |
left: 10px; | |
top: 14px; | |
color: rgba(0,0,0,.54); | |
} | |
.rotate-270 { | |
transform: rotate(270deg); | |
} | |
.doc-lnb-2-depth { | |
padding: 15px 15px 15px 45px; | |
font-size: 14.5px; | |
font-weight: 500; | |
color: rgba(0,0,0,.54); | |
position: relative; | |
} | |
.doc-lnb-2-depth >i { | |
position: absolute; | |
left: 25px; | |
top: 14px; | |
color: rgba(0,0,0,.54); | |
} | |
.doc-lnb-2-depth.on { | |
color: rgba(0,0,0,.87); | |
} | |
.doc-lnb-3-depth { | |
padding: 15px 15px 15px 60px; | |
font-size: 14.5px; | |
font-weight: 500; | |
color: rgba(0,0,0,.54); | |
position: relative; | |
} | |
.doc-lnb-3-depth.on { | |
color: #0082ff; | |
} | |
.footer { | |
position: absolute; | |
text-align: right; | |
box-sizing: border-box; | |
padding: 70px 15px 15px 15px; | |
width: 260px; | |
font-size: 13px; | |
font-weight: 500; | |
color: rgba(0, 0, 0, .87); | |
} | |
.doc-lnb footer li { | |
padding-top: 5px; | |
color: rgba(0, 0, 0, .54); | |
display: block; | |
} | |
.doc-lnb footer a { | |
padding-bottom: 5px; | |
display: inline-block; | |
color: rgba(0, 0, 0, .87); | |
} | |
.doc-lnb footer a:hover { | |
background: none; | |
} | |
.doc-lnb-mobile footer a:hover { | |
background: none; | |
} | |
.doc-lnb.mobile { | |
width: 290px; | |
} | |
.doc-lnb-logo-mobile { | |
display: inline-block; | |
padding: 10px 15px; | |
box-sizing: border-box; | |
transition: opacity .2s; | |
height: 48px; | |
width: 290px; | |
background-color: #005A97; | |
} | |
.doc-lnb-logo-mobile-height { | |
height: 47px; | |
} | |
.footer.mobile { | |
width: 290px; | |
} | |
.doc-lnb-mobile footer li { | |
padding-top: 5px; | |
color: rgba(0, 0, 0, .54); | |
} | |
.doc-lnb-mobile footer a { | |
padding-bottom: 5px; | |
display: inline-block; | |
color: rgba(0, 0, 0, .87); | |
} | |
/*///////////// 161207 이용가이드 상세 /////////////*/ | |
@media (min-width: 320px) { | |
.container-doc-detail { | |
width: 100%; | |
padding: 15px; | |
box-sizing: border-box; | |
} | |
.doc-markdown img { | |
width: 100%; | |
} | |
.doc-markdown table { | |
width: 100% | |
} | |
.container-doc-detail-footer { | |
padding: 200px 0 0 0; | |
width: 100%; | |
box-sizing: border-box; | |
} | |
.container-doc-detail-footer { | |
line-height: 0; | |
} | |
} | |
@media (min-width: 768px) { | |
.container-doc-detail { | |
width: 100%; | |
padding: 15px; | |
box-sizing: border-box; | |
} | |
.doc-markdown img { | |
width: 100%; | |
} | |
.doc-markdown table { | |
width: 100% | |
} | |
.container-doc-detail-footer { | |
padding: 200px 0 0 0; | |
width: 100%; | |
box-sizing: border-box; | |
} | |
} | |
@media (min-width: 992px) { | |
.container-doc-detail { | |
padding: 115px 15px 15px 275px; | |
width: 100%; | |
box-sizing: border-box; | |
} | |
.doc-markdown img { | |
width: 100%; | |
} | |
.doc-markdown table { | |
width: 100% | |
} | |
.container-doc-detail-footer { | |
padding: 200px 0 0 260px; | |
width: 100%; | |
box-sizing: border-box; | |
} | |
} | |
@media (min-width: 1200px) { | |
.container-doc-detail { | |
padding: 115px 15px 15px 275px; | |
min-width: 948px; | |
box-sizing: border-box; | |
} | |
hr { | |
width: 978px; | |
} | |
.doc-markdown p, | |
.doc-markdown ol, | |
.doc-markdown ul, | |
.doc-markdown img { | |
width: 948px; | |
} | |
.doc-markdown h5, | |
.doc-markdown blockquotes, | |
.doc-markdown table { | |
width: 918px; | |
} | |
.doc-markdown pre { | |
width: 890px; | |
} | |
.container-doc-detail-footer { | |
padding: 200px 0 0 260px; | |
width: 100%; | |
box-sizing: border-box; | |
} | |
} | |
.doc-breadcrumbs { | |
font-size: 13px; | |
padding: 15px; | |
color: rgba(0, 0, 0, .54); | |
} | |
.doc-breadcrumbs span { | |
vertical-align: middle; | |
} | |
.doc-breadcrumbs a:hover { | |
color: rgba(0, 0, 0, .87); | |
} | |
.doc-breadcrumbs> i { | |
padding: 0 5px; | |
font-size: 16px; | |
} | |
.doc-detail-title { | |
font-size: 23px; | |
font-weight: 500; | |
color: rgba(0, 0, 0, .87); | |
padding: 15px; | |
} | |
.doc-detail-summary { | |
font-size: 13px; | |
font-weight: 500; | |
color: rgba(0, 0, 0, .54); | |
padding: 0 15px 15px 15px; | |
} | |
.doc-markdown { | |
font-size: 14.5px; | |
font-weight: 400; | |
color: rgba(0, 0, 0, .87); | |
} | |
.doc-markdown h1 { | |
padding: 30px 15px 15px 15px; | |
font-size: 36px; | |
font-weight: 400; | |
} | |
.doc-markdown h1 + h4 { | |
line-height: 40px; | |
} | |
.doc-markdown h2 { | |
padding: 15px; | |
font-size: 23px; | |
font-weight: 500; | |
} | |
.doc-markdown h4 { | |
padding: 0 15px 15px 15px; | |
font-weight: 500; | |
color: rgba(0, 0, 0, .54); | |
} | |
.doc-markdown h5 { | |
padding: 0 15px 15px 15px; | |
text-align: center; | |
font-size: 13px; | |
font-weight: 500; | |
color: rgba(0, 0, 0, .54); | |
box-sizing: border-box; | |
} | |
.doc-markdown ul { | |
padding: 15px 15px 15px 30px; | |
list-style-type: disc; | |
box-sizing: border-box; | |
} | |
.doc-markdown li > ul { | |
padding: 0 15px; | |
list-style-type: circle; | |
} | |
.doc-markdown ol { | |
padding: 15px 15px 15px 30px; | |
list-style-type: nember; | |
box-sizing: border-box; | |
} | |
.doc-markdown img { | |
padding: 15px; | |
box-sizing: border-box; | |
} | |
.doc-markdown blockquotes { | |
display: block; | |
padding-left: 15px; | |
margin: 15px; | |
border-left: 4px solid #C5CCD3; | |
color: rgba(0, 0, 0, .54); | |
box-sizing: border-box; | |
} | |
.doc-markdown-link { | |
font-weight: 500; | |
text-decoration: underline; | |
color: #0082ff; | |
margin: 0 3px; | |
} | |
.doc-markdown table-wrap table { | |
padding: 15px; | |
} | |
.doc-markdown table { | |
padding: 15px 15px 15px 30px; | |
} | |
.doc-markdown table th { | |
padding: 10px 15px; | |
background: #C5CCD3; | |
color: #fff; | |
font-weight: 200; | |
} | |
.doc-markdown table td { | |
padding: 10px 15px; | |
text-align: center; | |
border-bottom: 1px solid rgba(0, 0, 0, .12); | |
} | |
.doc-markdown table td.secondary { | |
padding: 10px 15px; | |
color: rgba(0, 0, 0, .54); | |
} | |
.doc-markdown p:first-child { | |
padding: 15px; | |
} | |
.doc-markdown p { | |
padding: 3px 15px 15px 15px; | |
box-sizing: border-box; | |
} | |
.doc-markdown code { | |
padding: .25em .5em; | |
font-size: 85%; | |
color: #448aff; | |
background: #e3e5e8; | |
border-radius: 3px; | |
} | |
.doc-markdown pre { | |
display: block; | |
margin-top: 0; | |
margin-bottom: 1rem; | |
margin-left: 15px; | |
padding: 15px; | |
font-size: 14.5px; | |
line-height: 1.4; | |
white-space: pre; | |
white-space: pre-wrap; | |
word-break: break-all; | |
word-wrap: break-word; | |
} | |
.doc-markdown pre code { | |
padding: 0; | |
font-size: 100%; | |
color: white; | |
background-color: transparent; | |
} | |
code, | |
pre { | |
font-family: Roboto Mono, Monaco, "Courier New", monospace; | |
} | |
.doc-page-l { | |
font-size: 14.5px; | |
color: #fff; | |
background: #1E88E5; | |
width: 100%; | |
height: 100px; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
white-space: nowrap; | |
} | |
.doc-page-l:hover { | |
background: #1976d2; | |
} | |
.doc-page-l i { | |
padding-right: 10px; | |
font-size: 18px; | |
color: #fff; | |
} | |
.doc-page-l div:first-child { | |
padding: 15px; | |
font-size: 13px; | |
color: rgba(255,255,255, .5); | |
} | |
.doc-page-l div { | |
padding: 15px; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
color: #fff; | |
} | |
.doc-page-r { | |
font-size: 14.5px; | |
color: #fff; | |
background: #1E88E5; | |
width: 100%; | |
height: 100px; | |
text-align: right; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
white-space: nowrap; | |
} | |
.doc-page-r:hover { | |
background: #1976d2; | |
} | |
.doc-page-r i { | |
padding-left: 10px; | |
font-size: 18px; | |
color: #fff; | |
} | |
.doc-page-r div:first-child { | |
padding: 15px; | |
font-size: 13px; | |
color: rgba(255,255,255, .5); | |
} | |
.doc-page-r div { | |
padding: 15px; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
color: #fff; | |
} | |
/*///////////// 161208 이용가이드홈 /////////////*/ | |
@media (min-width: 320px) { | |
.container-doc-wrap { | |
width: 100%; | |
} | |
.doc-home-card-main-1 img { | |
width: auto; | |
height: 200px; | |
border-top-left-radius: 3px; | |
border-top-right-radius: 3px; | |
} | |
.doc-home-card-main-1 { | |
height: 200px; | |
overflow: hidden; | |
border-top-left-radius: 3px; | |
border-top-right-radius: 3px; | |
background: #90caf9; | |
text-align: right; | |
} | |
.doc-home-card-main-1.r { | |
background: #6ec4a0; | |
} | |
.doc-home-footer-r { | |
display: inline-block; | |
} | |
.doc-home-footer { | |
height: 100%; | |
} | |
} | |
@media (min-width: 768px), | |
@media (min-width: 992px) { | |
.container-doc-wrap { | |
width: 100%; | |
} | |
.doc-home-card-main-1 img { | |
width: auto; | |
height: 320px; | |
border-top-left-radius: 3px; | |
border-top-right-radius: 3px; | |
} | |
.doc-home-card-main-1 { | |
height: 320px; | |
width: auto; | |
overflow: hidden; | |
border-top-left-radius: 3px; | |
border-top-right-radius: 3px; | |
background: #90caf9; | |
} | |
.doc-home-card-main-1.r { | |
background: #6ec4a0; | |
} | |
.doc-home-footer-r { | |
display: inline-block; | |
float: right; | |
} | |
} | |
@media (min-width: 1200px) { | |
.container-doc-wrap { | |
width: 930px; | |
margin: 0 auto; | |
} | |
.doc-home-card-main-1 img, | |
.doc-home-card-main-1 { | |
height: 320px; | |
border-top-left-radius: 3px; | |
border-top-right-radius: 3px; | |
} | |
.doc-home-footer-r { | |
display: inline-block; | |
float: right; | |
} | |
} | |
.container-doc-home { | |
position: relative; | |
height: 100vh; | |
} | |
.container-doc-home-wrap-wrap { | |
background: #1e88e5; | |
min-height: 100%; | |
padding-top: 100px; | |
margin-bottom: -60px; | |
} | |
.container-doc-home-wrap-wrap:after { | |
content: ""; | |
display: block; | |
} | |
.doc-home-footer, | |
.container-doc-home-wrap-wrap:after { | |
height: 60px; | |
} | |
.doc-home-footer{ | |
padding: 15px; | |
width: 100%; | |
background: #222; | |
box-sizing: border-box; | |
color: rgba(255,255,255, .5); | |
font-size: 13px; | |
font-weight: 200; | |
} | |
.doc-home-footer a { | |
padding: 0 10px; | |
} | |
.doc-home-footer-r span{ | |
color: #fff; | |
} | |
.doc-home-card { | |
background: #fff; | |
border-radius: 3px; | |
box-shadow: 0 3px 5px rgba(0,0,0, .35); | |
transition: background .2s; | |
} | |
.doc-home-card:hover { | |
box-shadow: 0 6px 10px rgba(0,0,0, .5); | |
} | |
.doc-home-card-main-2 { | |
padding: 15px; | |
font-size: 23px; | |
font-weight: 500; | |
color: rgba(0,0,0, .87); | |
background: #fff; | |
} | |
.doc-home-card-main-3 { | |
padding: 0 15px 15px 15px; | |
font-size: 14px; | |
font-weight: 500; | |
color: rgba(0,0,0, .54); | |
} | |
.doc-home-card-border-top { | |
height: 5px; | |
border-top-left-radius: 3px; | |
border-top-right-radius: 3px; | |
} | |
.doc-home-card-border-top.paidchannel { | |
background: #32b384; | |
} | |
.doc-home-card-border-top.tech { | |
background: #f5505b; | |
} | |
.doc-home-card-border-top.faq { | |
background: #ff9943; | |
} | |
.doc-home-card-border-top.support { | |
background: #990099; | |
} | |
.doc-home-card-title { | |
padding: 15px; | |
font-size: 14.5px; | |
color: rgba(0,0,0, .87); | |
font-weight: 500; | |
} | |
.doc-home-card-desc { | |
padding: 15px; | |
font-size: 14.5px; | |
color: rgba(0,0,0, .54); | |
font-weight: 500; | |
height: 100px; | |
box-sizing: border-box; | |
} | |
.doc-home-card-ic { | |
padding: 15px; | |
height: 60px; | |
box-sizing: border-box; | |
text-align: right; | |
display: inline-block; | |
} | |
.doc-home-card-ic img { | |
width: 36px; | |
float: right; | |
color: rgba(0,0,0, .38); | |
} | |
.doc-home-card-main-1 img { | |
height: 100%; | |
} | |
/*///////////// 161209 시작하기 /////////////*/ | |
@media (min-width: 320px) { | |
.doc-step-card { | |
padding: 75px 15px 15px 15px; | |
} | |
.doc-step-card-label { | |
left: 0; | |
top: 0; | |
border-top-left-radius: 3px; | |
border-top-right-radius: 3px; | |
border-bottom-left-radius: 0px; | |
border-bottom-right-radius: 0px; | |
width: 100%; | |
height: auto; | |
text-align: left; | |
} | |
.doc-step-card-label-txt { | |
display: inline-block; | |
} | |
} | |
@media (min-width: 768px) { | |
.doc-step-card { | |
padding: 15px 15px 15px 95px; | |
} | |
.doc-step-card-label { | |
left: 0; | |
top: 0; | |
border-top-left-radius: 3px; | |
border-bottom-left-radius: 3px; | |
border-top-right-radius: 0px; | |
border-bottom-right-radius: 0px; | |
height: 100%; | |
width: auto; | |
text-align: center; | |
} | |
.doc-step-card-label-txt { | |
display: block; | |
} | |
} | |
@media (min-width: 992px) { | |
.doc-step-card { | |
padding: 15px 15px 15px 95px; | |
} | |
.doc-step-card-label { | |
left: 0; | |
top: 0; | |
border-top-left-radius: 3px; | |
border-bottom-left-radius: 3px; | |
border-top-right-radius: 0px; | |
border-bottom-right-radius: 0px; | |
height: 100%; | |
width: auto; | |
text-align: center; | |
} | |
.doc-step-card-label-txt { | |
display: block; | |
} | |
} | |
@media (min-width: 1200px) { | |
.doc-step-card { | |
padding: 15px 15px 15px 95px; | |
max-width: 978px; | |
width: 100%; | |
} | |
.doc-step-card-label { | |
left: 0; | |
top: 0; | |
border-top-left-radius: 3px; | |
border-bottom-left-radius: 3px; | |
border-top-right-radius: 0px; | |
border-bottom-right-radius: 0px; | |
height: 100%; | |
width: auto; | |
text-align: center; | |
} | |
.doc-step-card-label-txt { | |
display: block; | |
} | |
} | |
.doc-step-card { | |
position: relative; | |
background: #fff; | |
box-shadow: 0 1px 6px rgba(0, 0, 0, .30); | |
border-radius: 3px; | |
} | |
.doc-step-card-label { | |
background: #0082ff; | |
padding: 15px; | |
box-sizing: border-box; | |
position: absolute; | |
} | |
.doc-step-card-label.next { | |
background: #42a5f5; | |
} | |
.doc-step-card-detail { | |
border-radius: 3px; | |
border: 1px solid rgba(0, 0, 0, .12); | |
} | |
.doc-step-card-detail-title { | |
position: relative; | |
padding: 15px 45px 15px 15px; | |
border-top-left-radius: 3px; | |
border-top-right-radius: 3px; | |
} | |
.doc-step-card-detail-title > i { | |
position: absolute; | |
top: 17px; | |
right: 15px; | |
} | |
.doc-step-card-detail-btn > i { | |
font-size: 18px; | |
position: absolute; | |
left: 15px; | |
top: 14px; | |
} | |
.doc-step-card-detail-img { | |
height: 200px; | |
background: #e0e0e0; | |
} | |
.doc-step-bullet-detail { | |
padding: 15px; | |
font-size: 14.5px; | |
font-weight: 400; | |
color: rgba(0,0,0, .54); | |
} | |
.doc-step-bullet-detail:hover { | |
color: rgba(0,0,0, .87); | |
} | |
li.doc-step-bullet-detail { | |
box-sizing: border-box; | |
list-style-position: outside; | |
display: list-item; | |
} | |
.doc-step-bullet-detail li > i { | |
line-height: 50px; | |
} | |
/*///////////// 161213 심화기능, 기술, 고객지원, 광고채널트래킹 /////////////*/ | |
@media (min-width: 1200px) { | |
.doc-list-card { | |
max-width: 978px; | |
} | |
} | |
.doc-list-card { | |
background: #fff; | |
box-shadow: 0 1px 6px rgba(0, 0, 0, .30); | |
border-radius: 3px; | |
} | |
.doc-expert-bullet ul { | |
padding: 0 15px 15px 30px; | |
box-sizing: border-box; | |
list-style-type: disc; | |
} | |
.doc-expert-bullet ul > li { | |
position: relative; | |
line-height: 25px; | |
font-size: 14.5px; | |
color: rgba(0,0,0, .54); | |
} | |
.doc-expert-bullet ul > li:hover { | |
color: rgba(0,0,0, .87); | |
cursor: pointer; | |
} | |
.doc-expert-bullet ul li a > i { | |
position: absolute; | |
top: 3px; | |
} | |
/*///////////// 161213 FAQ /////////////*/ | |
@media (min-width: 1200px) { | |
.doc-faq-card { | |
max-width: 978px; | |
} | |
} | |
.doc-faq-card { | |
box-sizing: border-box; | |
border-radius: 3px; | |
box-shadow: 0 1px 6px rgba(0, 0, 0, .30); | |
} | |
.doc-faq-title:hover { | |
background: #0082ff; | |
cursor: pointer; | |
color: #fff; | |
font-weight: 200; | |
} | |
.doc-faq-title { | |
box-sizing: border-box; | |
padding: 15px; | |
background: #fff; | |
font-size: 14.5px; | |
font-weight: 500; | |
color: rgba(0,0,0, .87); | |
border-radius: 3px; | |
} | |
.doc-faq-title.on { | |
border-radius: 3px 3px 0 0; | |
} | |
.doc-faq-content { | |
box-sizing: border-box; | |
padding: 15px; | |
font-size: 14.5px; | |
font-weight: 400; | |
color: rgba(0,0,0, .87); | |
background: #eff1f3; | |
} | |
/*///////////// 161213 개발자에게SDK설치요청하기 /////////////*/ | |
@media (min-width: 320px) { | |
.btn-gap { | |
padding-bottom: 10px; | |
} | |
.doc-modal-body, | |
.doc-modal-body2 { | |
margin-left: 30px; | |
margin-right: 30px; | |
} | |
.doc-modal-wrap2 { | |
right: 50px; | |
top: 20px; | |
} | |
.modal-close-btn { | |
color: rgba(0,0,0, .54); | |
} | |
.modal-close-btn:hover { | |
color: rgba(0,0,0, .87); | |
} | |
} | |
@media (min-width: 768px) { | |
.btn-gap { | |
padding-right: 10px; | |
} | |
.doc-modal-body, | |
.doc-modal-body2 { | |
margin-left: 0; | |
margin-right: 0; | |
} | |
.doc-modal-wrap2 { | |
right: -50px; | |
top: 0; | |
} | |
.modal-close-btn { | |
color: rgba(255,255,255, .7); | |
} | |
.modal-close-btn:hover { | |
color: rgba(255,255,255, 1); | |
} | |
} | |
@media (min-width: 992px) { | |
.btn-gap { | |
padding-right: 10px; | |
} | |
.doc-modal-body, | |
.doc-modal-body2 { | |
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); | |
} | |
} | |
@media (min-width: 1200px) { | |
.btn-gap { | |
padding-right: 10px; | |
} | |
.doc-modal-body, | |
.doc-modal-body2 { | |
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); | |
} | |
} | |
.doc-modal-wrap { | |
position: relative; | |
} | |
.doc-modal-wrap2 { | |
position: absolute; | |
} | |
.doc-modal { | |
margin: auto; | |
margin-top: 170px; | |
max-width: 710px; | |
animation-duration: .2s; | |
} | |
.doc-modal-body { | |
padding: 15px; | |
background: #fff; | |
border-radius: 3px 3px 0 0; | |
} | |
.doc-modal-body2 { | |
border-top: 1px solid rgba(0,0,0, .12); | |
padding: 15px; | |
background: #fff; | |
border-radius: 0 0 3px 3px; | |
} | |
.doc-modal-title { | |
padding: 10px 15px 10px 10px; | |
color: rgba(0,0,0, .87); | |
font-size: 18px; | |
font-weight: 400; | |
} | |
.doc-modal-desc { | |
padding: 10px 10px 10px 10px; | |
color: rgba(0,0,0, .54); | |
font-size: 14.5px; | |
line-height: 22px; | |
font-weight: 500; | |
} | |
.doc-modal-input-title { | |
padding: 10px 10px 5px 10px; | |
color: #0082ff; | |
font-size: 14.5px; | |
font-weight: 400; | |
} | |
.doc-modal-input { | |
padding: 0 10px 40px 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; | |
} | |
.doc-modal-btn { | |
padding: 25px 0 0 0; | |
} | |
.btn-cancel { | |
font-size: 14px; | |
font-weight: 500; | |
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); | |
} | |
.btn-cancel:hover { | |
background: #C6D2D5; | |
cursor: pointer; | |
} | |
.btn-agree { | |
font-size: 14px; | |
font-weight: 200; | |
color: #fff; | |
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); | |
} | |
.btn-agree:hover { | |
background: #0874de; | |
cursor: pointer; | |
} | |
/*///////////// 161214 검색결과 /////////////*/ | |
@media (min-width: 1200px) { | |
.doc-result-content, | |
.doc-result-loading, | |
.doc-result-copyright{ | |
max-width: 978px; | |
} | |
} | |
.doc-search-head { | |
display: inline-block; | |
padding: 15px; | |
font-size: 23px; | |
font-weight: 500; | |
color: rgba(0,0,0, .38); | |
} | |
.doc-search-btn { | |
display: inline-block; | |
font-size: 14px; | |
font-weight: 500; | |
color: rgba(0, 0, 0, .54); | |
box-sizing: border-box; | |
padding: 12px 15px 10px 40px; | |
border-radius: 3px; | |
transition: background, box-shadow .2s; | |
background: #E1E7EA; | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .12); | |
position: relative; | |
} | |
.doc-search-btn:hover { | |
background: #C6D2D5; | |
cursor: pointer; | |
} | |
.doc-search-btn > i { | |
padding-right: 5px; | |
position: absolute; | |
left: 15px; | |
} | |
.doc-result { | |
padding-top: 15px; | |
} | |
.doc-result span { | |
color: #0082ff; | |
} | |
.doc-result-title { | |
font-size: 23px; | |
font-weight: 500; | |
color: rgba(0, 0, 0, .87); | |
padding: 15px; | |
} | |
.doc-result-summary { | |
display: inline-block; | |
font-size: 14.5px; | |
font-weight: 400; | |
color: rgba(0, 0, 0, .87); | |
padding: 0 15px 15px 15px; | |
position: relative; | |
} | |
.doc-result-summary a > i { | |
position: absolute; | |
top: 0; | |
padding-left: 5px; | |
color: rgba(0,0,0, .54); | |
display: inline-block; | |
} | |
.doc-result-content { | |
font-size: 14.5px; | |
font-weight: 400; | |
color: rgba(0,0,0, .87); | |
padding: 15px; | |
} | |
.doc-result-content p { | |
overflow: hidden; | |
text-overflow: ellipsis; | |
display: -webkit-box; | |
-webkit-line-clamp: 2; | |
-webkit-box-orient: vertical; | |
word-wrap:break-word; | |
} | |
.doc-result-loading { | |
padding: 15px; | |
text-align: center; | |
color: rgba(0,0,0, .38); | |
} | |
.doc-result-copyright { | |
text-align: right; | |
} | |
/*///////////// 161214 404오류안내 /////////////*/ | |
.doc-error { | |
text-align: center; | |
padding: 30px 15px 15px 15px; | |
} | |
.doc-error-ic { | |
color: rgba(0,0,0, .38); | |
} | |
.doc-error-txt { | |
padding: 15px; | |
font-size: 18px; | |
font-weight: 400; | |
color: rgba(0,0,0, .38); | |
} | |
.doc-error-btn { | |
display: inline-block; | |
font-size: 14px; | |
font-weight: 500; | |
color: rgba(0, 0, 0, .54); | |
box-sizing: border-box; | |
padding: 12px 15px; | |
border-radius: 3px; | |
transition: background, box-shadow .2s; | |
background: #E1E7EA; | |
box-shadow: 0 1px 0 rgba(0, 0, 0, .12); | |
} | |
.doc-error-btn:hover { | |
background: #C6D2D5; | |
cursor: pointer; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment