html {
margin-top: 0 !important;
}
body { }
.fw600 {
font-weight: 600;
}
.hissu {
color: #f00;
}
a.unlink:hover, a.unlink:focus {
color:#666;
text-decoration: none;
}
.btn, button, a, a:active, a:visited, a:focus {
outline: none !important;
}
a:hover,
.btn:hover {
cursor: pointer;
}
.term-desc ul,
.term-desc ol {
margin: 0;
padding: 0;
margin-left: 3rem;
}
.header-menu {
margin: 0;
}
.header-title div {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
h1.page-title {
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
font-weight: 600;
color: #333;
font-size: 2.8rem; text-align: center; }
.logo {
text-align: center;
height: 60px;
}
.logo-company {
text-align: left;
float: left;
}
.header-title {
margin-top: 0;
clear: both;
}
.logo span {
margin-left: 1rem;
font-size: 1.4rem;
text-align: right; vertical-align: baseline;
vertical-align: -webkit-baseline-middle;
}
.navbar-brand {
display: flex;
align-items: center;
}
.navbar-brand img { vertical-align: middle;
max-height: 60px;
max-width: 200px;
width: auto;
height: auto;
}
.navbar-brand span {
margin-left: 1rem;
}
ul.navbar-nav {
width: 100%;
justify-content: flex-end;
}
.navbar-nav .nav-item {
padding-left: 1rem;
}
.navbar-nav .nav-item.login {
padding-left: 2rem;
}
.navbar-toggler {
border: 1px solid #999;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
a.nav-link {
color: #333;
font-size: 1.6rem;
}
ul.navbar-nav>li>a:hover,
ul.navbar-nav>li>a:active,
ul.navbar-nav>li>a:focus { }
nav {
padding-left: 0 !important;
padding-right: 0 !important;
}
.nav-global>ul>li>a {
padding: 1rem;
font-size: 1.4rem;
}
.nav-page a.nav-link li:not(:last-child)::after {
position: absolute;
top: 50%;
right: 0px;
margin: -8px 0px 0px;
width: 2px;
height: 16px;
background: rgb(215, 217, 217);
}
.header-menu-content {
float: right;
}
.main-bnr {
position: relative;
width: 100%;
}
.main-bnr h1.page-title, .main-bnr h1.page-title a {
color: #fff;
}
.main-bnr h1.page-title {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
z-index: 1000;
width: calc(100% - 30px);
}
.content-inner p {
font-size: 1.4rem;
}
.term-desc {
padding: 1.4rem;
border: 1px solid #ccc;
background: #f6f6f6;
font-size: 1.4rem;
}
i.fa-lock, i.fa-angle-right {
font-size: 1.6rem;
margin-right: 0.75rem;
}
i.fa-lock.big {
color: #ff0200;
font-size: 2.2rem;
}
.content-fluid.infomation-block {
margin-top: 30px;
}
h2#infomation,
#infomation { font-size: 1.8rem; border-radius: 0.5rem;
}
h3.child-cate-title {
border-top-left-radius: 0.5rem;
border-top-right-radius: 2rem; background: rgba(205, 43, 30, 0.75);
padding: 1.4rem;
padding-left: 2rem;
color: #fff;
font-size: 1.8rem;  border-bottom: none;
}
.thumb-wrapper {
padding: 0 15px;
}
.cont-box {
padding: 1.4rem;
margin: 0;
}
.cont-box img { width: auto;
height: auto;
max-width: 100%;  }
.cont-box img.playmark-thumb {
border: none;
}
.list-thumb {
max-width: initial;
max-width: 100%;
text-align: center;
}
.list-title {
margin: 0;
margin-bottom: 1rem;
}
.list-desc {
margin: 0.5em 0 0;
}
.list-text-docs {
max-width: 100%; text-align: center;
}
.btn.btn-header-login {
background: #ff6347;
color: #fff;
border: 1px solid #ff6347;
padding: 0.5rem 0.75rem;
border-radius: 2rem;
min-width: 14rem;
margin-left: 2rem;
font-size: 1.6rem;
}
.btn.btn-header-login::before {
color: #fff;
border-top: 1px solid #fff;
border-right: 1px solid #fff
}
.btn.btn-header-login:hover {
background: #fff;
color: #ff6347;
}
.btn.btn-header-login:hover::before {
color: #ff6347;
border-top: 1px solid #ff6347;
border-right: 1px solid #ff6347
}
.btn-nav-menu {
position: relative;
z-index: 1000;
padding: 1rem;
border: 1px solid #666;
color: #666;
background: #fff;
border-radius: 0.25rem;
display: none;
}
.btn-nav-menu .fa {
font-size: 24px;
}
.btn.btn-view {
background: #ff6347;
border-color: #ff6347 !important;
}
.btn.btn-view:hover, .btn.btn-view:active, .btn.btn-view:focus {
border-color: #ff6347;
color: #ff6347;
}
.btn-default {
font-size: 1.4rem;
}
.btn-download {
width: 100%;
font-size: 12px;
}
.page-title span {
font-size: 1.4rem;
}
.btn-download.btn {
white-space: initial;
width: 100%;
text-align: left; font-size: 1.2rem;
text-align: center;
}
.btn-download.btn p {
font-weight: 600;
text-align: center;
font-size: 1.4rem;
width: 100%;
border-bottom: 1px solid #ff6347;
margin-bottom: 0.6rem;
}
.btn-download.btn:hover p {
border-bottom: 1px solid #fff;
}
.btn-closed.btn {
min-width: initial;
padding: 4px 8px 4px 22px;
background: #cd2b1e;
border-color: #cd2b1e !important;
color: #fff;
border-radius: 6px;
}
.btn-opened.btn {
min-width: initial;
padding: 4px 8px 4px 22px;
background: #04c1b2;
border-color: #04c1b2 !important;
color: #fff;
border-radius: 6px;
}
.btn-closed.btn:hover {
background: #fff;
color: #cd2b1e;
}
.btn-opened.btn:hover {
background: #fff;
color: #04c1b2;
}
.btn-opened.btn p,
.btn-closed.btn p {
margin: 0;
}
.btn-opened.btn::before,
.btn-closed.btn::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.btn-opened.btn:hover::before {
border-top: 1px solid #04c1b2;
border-right: 1px solid #04c1b2;
}
.btn-closed.btn:hover::before {
border-top: 1px solid #cd2b1e;
border-right: 1px solid #cd2b1e;
}
.logo li span.uname {
display: block;
padding: 1rem;
font-size: 1.4rem;
color: #555;
}
.logo li span.login-sts {
display: block;
font-weight: 400;
vertical-align: top;
background: #ff6347;
color: #fff;
padding: 0.2rem 0.6rem; }
@media screen and (max-width: 800px) {
.list-box {
text-align: center;
}
.cont-box img {
width: 300px;
max-width: 50%;
max-height: initial; }
.thumb-wrapper i {
font-size: 12rem;
opacity: 0.4;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
display: block !important;
}
.list-title {
margin-top: 2rem;
}
.cont-box img.playmark-thumb { max-width: 180px;
}
.thumb-wrapper i {
display: none !important;
}
}
.form-horizontal .control-label .form-check {
text-align: left;
}
#page-top {
position: fixed;
z-index: 999;
bottom: 20px;
right: -5px;
}
.pt0-imp {
padding-top: 0 !important
}
.pb0-imp {
padding-bottom: 0 !important
}
.mt0-imp {
margin-top: 0 !important
}
.pd30 {
padding: 30px 0 !important;
}
*:focus {
outline: none !important;
} .sp {
display: none;
}
#infomation p {
margin-bottom: 0;
}
a.cat-p-name {
font-size: 2.0rem;
font-weight: 600;
text-align: center;
width: 100%;
margin: 4rem 0 0;
display: block;
padding: 1rem;
color: #fff;
}
h3.hdg-p-l2 {
font-size: 2.4rem;
font-weight: 600;
text-align: center;
margin: 4em 0 1.4em;
}
h3.child-cate-title {
margin-top: 1.4rem;
margin-bottom: 1.4rem;
}
.child-cate-block .session {
border-bottom: 1px solid #ccc;
}
.child-cate-block .session:last-of-type {
border-bottom: none;
}
.header-title .page-title a span {
line-height: initial;
}
.speaker {
margin-top: 2rem;
color: #333;
}
.modal-header {
padding: 1rem 2rem;
}
#modal-login .modal-title,
.font-weight-bold {
font-weight: 600;
font-size: 1.8rem;
}
#modal-login .modal-body {
padding: 2rem 4rem;
}
#modal-login .form-lead {
margin: 0;
font-size: 1.6rem;
line-height: 1.8;
}
#modal-login .form-lead p {
margin: 0;
}
#form-login {
margin-top: 30px;
}
#form-login label {
font-size: 1.6rem;
font-weight: 600;
}
#form-login input.login-input,
#form-login input[type="text"] {
font-size: 1.6rem;
width: 40rem;
max-width: 100%; border: 1px solid #ccc;
}
#modal-login .btn {
font-size: 1.6rem;
min-width: 20rem;
}
#modal-login .need-entry {
font-size: 1.6rem;
font-weight: 600;
} .formError {
border-radius: initial;
}
.formError .formErrorContent {
font-size: 1.2rem;
font-weight: 400;
border: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
border-radius: initial;
-moz-border-radius: initial;
-webkit-border-radius: initial;
-o-border-radius: initial;
}
.formError .formErrorArrow div {
border-left: none;
border-right: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
font-size: 0px;
} #modal-iframe .player-iframe {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
#modal-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 480px) { .sp {
display:block;
}
} h2#infomation,
#infomation {
padding: 0 !important;
}
.infomation-text {
padding: 20px 30px;
}
.list-text-docs .banner-box {
margin-top: 15px;
}
@media screen and (max-width: 991px) {
.cont-box img {
margin-bottom: 30px;
}
.btn-nav-menu {
position: relative;
z-index: 1000;
display: flex;
}
.btn-nav-menu.white {
color: #fff;
background: none;
border: 1px solid #fff;
}
.navbar-collapse {
z-index: 100;
position: fixed;
top: 0;
right: 0;
z-index: 1;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.75);
font-size: 1.6rem;
}
.nav-item {
width: 100%;
height: auto;
padding: 0.75em 1em;
text-align: center;
color: #fff;
box-sizing: border-box;
}
a.nav-link,
a.nav-link:visited,
a.nav-link:active,
a.nav-link:focus,
a.nav-link:hover,
.btn-header-login {
color: #fff;
font-size: 1.6rem;
}
.btn.btn-header-login {
margin-top: 0.75rem;
min-width: 30rem;
} .navbar-collapse {
transform: translateX(100vw);
transition: all .3s linear;
} .navbar-collapse.show {
transform: translateX(0);
}
}
@media screen and (max-width: 800px) {
.logo span {
text-align: center;
display: inline-block;
margin: 2rem 0;
}
}
@media screen and (max-width: 480px) {
body {
padding-top: 15px !important;
}
.navbar-brand {
align-items: flex-start;
flex-flow: column;
width: calc(100% - 60px);
}
.navbar-brand span {
display: block;
margin-top: 1rem;
margin-left: 0;
}
.navbar-toggler-icon {
width: 30px;
height: 30px;
}
.navbar-nav .nav-item {
padding-left: 0;
}
.btn.btn-header-login {
margin-left: 0;
}
h1.page-title {
font-size: 2.2rem;
}
.thumb-wrapper i {
display: none !important;
}
.sp {
display: block;
} img.logo {
max-width: 200px;
}
.header-title,
.logo-company {
text-align: center !important;
}
.cont-box img {
width: 100%;
max-height: initial; }
.cont-box img.playmark-thumb {
width: 40%;
display: block;
margin-left: auto;
margin-right: auto;
}
.list-thumb {
width: 100%;
text-align: center;
}
.list-thumb a {
display: block;
}
.list-title {
margin-top: 2rem;
}
.list-desc {
text-align: left;
}
.cont-box img.playmark-thumb {
max-width: 50%;
}
}
@media (min-width: 800px) {
.modal-dialog {
width: 940px;
max-width: 100%;
}
.form-horizontal .control-label {
text-align: left;
}
.list-text-docs .banner-box {
padding-left: 0; }
} .header {
border-bottom: none;
box-shadow: none;
}
h1.page-title {
padding: 30px 0px 20px;
line-height: 1.4;
}
.link-entry a.link-bnr {
margin-top: 1rem;
}
#btn-entry {
border-color: #fff !important;
}
#btn-entry.btn::before {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
#btn-entry:hover {
border-color: #cd2b1e !important;
}
#btn-entry.btn:hover::before {
border-top: 1px solid #cd2b1e;
border-right: 1px solid #cd2b1e;
}
.btn-main {
font-size: 1.8rem;
}
p.lock-desc {
margin: 30px 0px 30px;
}
.banner-box.link-entry {
margin-top: 30px;
}
#infomation p {
margin-block-start: 0;
margin-block-end: 0;
} h2#infomation,
#infomation {
font-weight: 400;
font-size: 1.6rem;
line-height: 1.4;
text-align: left; padding: 0 !important;
}
.infomation-text {
padding: 20px 30px;
}
h2#infomation .list-btn,
#infomation .list-btn {
display: block;
margin-left: 0;
margin-top: 3rem;
text-align: center;
}
h3.child-cate-title {
margin-bottom: 0;
}
.cont-box .row {
padding: 30px 0;
}
.content-fluid { padding: 0;
}
.cont-box {
padding: 0 1.4rem;
}
.nav-page { margin: 0 0 30px;
}
.nav-page.no-top-border {
border-top: none;
}
.nav-page .nav-link {
margin-top: -10px;
padding: 20px;
} a.unlink:hover {
cursor: initial;
text-decoration: none;
}
#infomation a,
.privacy-box a {
color: #3a8ff9;
text-decoration: underline;
} .flex-block {
position: fixed;
top: 10;
left: 10;
z-index: 1000;
}
.flex-block button.btn-set-flex {
font-size: 1.8rem;
border-radius: 3rem;
border-color: #f00 !important;
color: #f00;
background: rgba(255,0,0,0.1);
}
.flex-block button.btn-set-flex::before {
border-color: #f00 !important;
color: #f00;
}
.flex-block button.btn-set-flex:hover {
border-color: #f00 !important;
color: #fff;
background: #f00;
}
.flex-block button.btn-set-flex:hover::before {
border-color: #fff !important;
color: #fff;
}
.maintenance {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: rgba(110, 167, 218, 0.5);
}
.maintenance p.msg {
text-align: center;
margin: 0;
padding: 0;
line-height: 1.8;
font-size: 2.4rem;
font-weight: 600;
color: #fff;
}