body { 

    background-color: #b4f5ff;
	background-image: linear-gradient(62deg, #b4f5ff 0%, #e6cdfd 52%, #ffb8f0 100%);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
	color: #fff
}
.bootstrap { float: left; max-height: 125px; }

/* main box */
.box { margin: 50px auto 0; }

/* login box */
.box .login { background:hsl(0, 0%, 100%); border-radius: 10px; box-shadow: 15px 15px 0px hsl(0deg 0% 72%) }
.box .login-box { padding: 30px 30px; position: relative; }
.box .login-box h2 { margin: 0 0 25px; border-bottom: dotted 1px #aaa; padding: 10px 10px 10px 0; }
.box .login-box a { text-decoration: none; color: #aaa }
.box .login-box a:hover { text-decoration: underline; }
.box .login-box .nav-link.active { background: #6F2F9C  }
.box .agree { margin: 10px 0 }

/* carousel box */
.box .carousel-box { background-size:cover; border-radius: 0 10px 10px 0; padding:0;}
.box .carousel-inner{border-radius:0 10px 10px 0;}
.box .carousel-inner .carousel-item { max-height: 435px; background-size:cover; }
.box .carousel-indicators { display: none }
.box .carousel-caption{ text-align: left; position: absolute; bottom: 0; width: 33.2%; height: 100%; right: 0; left: 0; background: #6F2F9C; padding-top: 30px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; ;opacity: .95; top: 0; }
.box .carousel-caption h5 { color:#fff; font-size: 1.50rem; font-weight: bold; }
.box .carousel-caption p { color:#fff }
.box .carousel-caption a { text-decoration: none; color: #fff }
.box .carousel-caption a:hover { color: #fff; text-decoration: underline; }
.box .carousel-control-next { width: auto; bottom: 10%; top: 90%; }
.box .carousel-control-prev { width: auto; bottom: 10%; top: 90%; }
.box .carousel-control-prev { left: 2%; }
.box .carousel-control-next { left: 17%; }