/* common */ * { padding: 0; margin: 0; position: relative } body { font-family: Roboto-Regular, Sans-Serif, Verdana; font-size: 14px } a, a:hover { text-decoration: none } table { border-spacing: 0 } /* backgrounds */ .bg-logo-1 { background-image: url('/image/logo-1.png'); background-repeat: no-repeat; background-position: left 2px; background-size: 24px } .bg-logo-1:hover { background-image: url('/image/logo-0.png'); } .bg-c-0 { background-color: #FFF } .bg-c-1 { background-color: #4A5466 } .bg-c-2 { background-color: #111 } .bg-c-3 { background-color: #596374 } .bg-c-101 { background-color: #596a74 /* branding namespace reserved from 100-199 */ } .bg-c-102 { background-color: #5e5974 /* branding namespace reserved from 100-199 */ } .bg-img-1 { background-image: url('/image/bg-1.png') } .bg-img-2 { background-image: url('/image/bg-2.png') } /* fonts */ .t-center { text-align: center } .t-right { text-align: right } .t-left { text-align: left } .f-size-10 { font-size: 10px } .f-size-16 { font-size: 16px } .f-size-18 { font-size: 18px } .f-size-20 { font-size: 20px } .f-size-26 { font-size: 26px } .f-normal { font-weight: normal } .lh-48 { line-height: 48px } /* links */ .c-0, a.c-0:active, a.c-0:visited, a.c-0:hover { color: #fff } .c-1, a.c-1:active, a.c-1:visited { color: #96a0b4 } a.c-1:hover { color: #fff } .c-2, a.c-2:active, a.c-2:visited { color: #9ba5af } a.c-2:hover { color: #fff } .c-3, a.c-3:active, a.c-3:visited { color: #becae0 } a.c-3:hover { color: #fff } .c-4, a.c-4:active, a.c-4:visited { color: #fdebd7 } a.c-4:hover { color: #fff } .c-5 { color: #ff7f7f } .c-6 { color: #ddab22 } .c-7 { color: #44c508 } /* dimensions */ .w-100-100 { width: 100% } .w-33-100 { width: 33% } .w-50-100 { width: 50% } .h-28 { height: 28px } .h-48 { height: 48px } .h-100 { height: 100px } /* paddings */ .mw-680 { max-width: 680px } .mw-1024 { max-width: 1024px } .mx-auto { margin-left: auto; margin-right: auto } .mx-16 { margin-left: 16px; margin-right: 16px } .my-36 { margin-top: 36px; margin-bottom: 36px } .my-48 { margin-top: 48px; margin-bottom: 48px } .my-100 { margin-top: 100px; margin-bottom: 100px } .mt-100 { margin-top: 100px } .mt-10 { margin-top: 10px } .mt-20 { margin-top: 20px } .mt-24 { margin-top: 24px } .mt-48 { margin-top: 48px } .mr-6 { margin-right: 6px } .ml-16 { margin-left: 16px } .mb-16 { margin-bottom: 16px } .mb-22 { margin-bottom: 22px } .mb-48 { margin-bottom: 48px } .px-8 { padding-left: 8px; padding-right: 8px } .py-16 { padding-top: 16px; padding-bottom: 16px } .p-8 { padding: 8px } .p-16 { padding: 16px } .pt-16 { padding-top: 16px } .pb-10 { padding-bottom: 10px } .pb-20 { padding-bottom: 20px } .pb-36 { padding-bottom: 36px } .px-16 { padding-left: 16px; padding-right: 16px } /* positioning */ .o-h { overflow: hidden } .d-inline-block { display: inline-block } .float-left { float: left } .float-right { float: right } .of-hidden { overflow: hidden } /* buttons */ .btn { font-family: Roboto-Regular; padding: 10px 16px; border-radius: 4px } .btn-1 { color: #fff; border: 1px #2e6da4 solid; background-color: #337ab7 } .btn-1:hover { background-color: #286090; border-color: #204d74 } /* borders */ .b-r-3 { border-radius: 3px } .b-1 { border-width: 1px; border-style: solid } .b-2 { border-width: 1px; border-style: dashed } .bb-1 { border-bottom-width: 1px; border-bottom-style: solid } .bb-1-2 { border-bottom-width: 1px; border-bottom-style: dashed } .bb-2 { border-bottom-width: 2px; border-bottom-style: solid } .b-c-0 { border-color: #fff } .b-c-4 { border-color: #ccc } .b-c-5 { border-color: #b9aa96 } .b-c-6 { border-color: #4A5466 } .b-c-101 { /* branding namespace reserved from 100-199 */ border-color: #c7ffe9 } .b-c-102 { /* branding namespace reserved from 100-199 */ border-color: #dd92e4; } .b-c-103 { /* branding namespace reserved from 100-199 */ border-color: #9bb6da; }