Template:KUAS Korea/head

 <meta charset="utf-8">
 <meta content="width=device-width, initial-scale=1.0" name="viewport">
 <title>KUAS Korea</title>

 <link href="/template/img/favicon.png" rel="icon">
 <link href="/template/img/apple-touch-icon.png" rel="apple-touch-icon">

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i%7CMontserrat:300,400,500,700" rel="stylesheet">

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.2.1/css/ionicons.min.css" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet">

 <style>

@charset "utf-8";

-webkit-scrollbar-track {

 -webkit-box-shadow: inset 0 0 6px rgba(40,39,44, 0.1);
 background-color: #f6f8f1;
 border-radius: 10px;

}

-webkit-scrollbar {

 width: 5px;height:5px;
 background-color:#f6f8f1;

}

-webkit-scrollbar-thumb {

 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 5px rgba(40,39,44, 0.1);
 background-image: -webkit-gradient(linear, left top, right top, from(#a54040), to(#582d32));
 background-image: -webkit-linear-gradient(left, #a54040 0%, #582d32 100%);
 background-image: linear-gradient(to right, #a54040 0%, #582d32 100%);

}

-moz-selection {

   text-shadow: none;
   color: #f6f8f1;
   background: #582d32;

}

selection {

   text-shadow: none;
   color: #f6f8f1;
   background: #582d32;

}

body {

 background: #f6f8f1;
 color: #28272c;
 font-family: "Open Sans", sans-serif;

}

a {

 color: #a54040;
 transition: 0.5s;

}

a:hover, a:active, a:focus {

 color: #582d32;
 outline: none;
 text-decoration: none;

}

p {

 padding: 0;
 margin: 0 0 30px 0;

}

h1, h2, h3, h4, h5, h6 {

 font-family: "Montserrat", sans-serif;
 font-weight: 400;
 margin: 0 0 20px 0;
 padding: 0;

}

/* Back to top button */ .back-to-top {

 position: fixed;
 display: none;
 background: #582d32;
 color: #f6f8f1;
 display: inline-block;
 width: 54px;
 height: 54px;
 text-align: center;
 line-height: 1;
 font-size: 16px;
 border-radius: 50%;
 right: 24px;
 bottom: 90px;
 transition: background 0.5s;
 z-index: 11;

}

.back-to-top i {

 padding-top: 16px;
 color: #f6f8f1;

} .sc-bwzfXH {right:24px!important;}

1. header {

 padding: 30px 0;
 height: 92px;
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 transition: all 0.5s;
 z-index: 997;

}

1. header.header-scrolled {

 background: #28272c;
 padding: 20px 0;
 height: 72px;
 transition: all 0.5s;

}

1. header #logo {

 float: left;

}

@media (min-width: 1024px) {

 #header #logo {
   padding-left: 60px;
 }

}

1. header #logo h1 {

 font-size: 34px;
 margin: 0;
 padding: 0;
 line-height: 1;
 font-family: "Montserrat", sans-serif;
 font-weight: 700;
 letter-spacing: 3px;

}

1. header #logo h1 a, #header #logo h1 a:hover {

 color: #f6f8f1;
 padding-left: 10px;
 border-left: 4px solid #a54040;

}

1. header #logo img {

 padding: 0;
 margin: 0;

}

@media (max-width: 768px) {

 #header #logo h1 {
   font-size: 28px;
 }
 #header #logo img {
   max-height: 40px;
 }

}

1. intro-title{display:table;width:100%;height:300px;background:#28272c;}
2. intro-title .section-header h3 {

 color: #f6f8f1;
 margin-top: 30px;
 font-size: 48px;
 font-weight: 700;

}

1. intro {

 display: table;
 width: 100%;
 height: 100vh;
 background: #28272c;

}

1. intro .carousel-item {

 width: 100%;
 height: 100vh;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

1. intro .carousel-item::before {

 content: ;
 background-color: rgba(40,39,44, 0.7);
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;

}

1. intro .carousel-container {

 display: flex;
 justify-content: center;
 align-items: center;
 position: absolute;
 bottom: 0;
 top: 0;
 left: 0;
 right: 0;

}

1. intro .carousel-content {

 text-align: center;

}

1. intro h2 {

 color: #f6f8f1;
 margin-bottom: 30px;
 font-size: 48px;
 font-weight: 700;

}

@media (max-width: 768px) {

 #intro h2 {
   font-size: 28px;
 }

}

1. intro p {

 width: 80%;
 margin: 0 auto 30px auto;
 color: #f6f8f1;

}

@media (min-width: 1024px) {

 #intro p {
   width: 60%;
 }

}

1. intro .carousel-fade .carousel-inner .carousel-item {

 -webkit-transition-property: opacity;
 transition-property: opacity;

}

1. intro .carousel-fade .carousel-inner .carousel-item,
2. intro .carousel-fade .carousel-inner .active.carousel-item-left,
3. intro .carousel-fade .carousel-inner .active.carousel-item-right {

 opacity: 0;

}

1. intro .carousel-fade .carousel-inner .active,
2. intro .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
3. intro .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {

 opacity: 1;
 transition: 0.5s;

}

1. intro .carousel-fade .carousel-inner .carousel-item-next,
2. intro .carousel-fade .carousel-inner .carousel-item-prev,
3. intro .carousel-fade .carousel-inner .active.carousel-item-left,
4. intro .carousel-fade .carousel-inner .active.carousel-item-right {

 left: 0;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);

}

1. intro .carousel-control-prev, #intro .carousel-control-next {

 width: 10%;

}

@media (min-width: 1024px) {

 #intro .carousel-control-prev, #intro .carousel-control-next {
   width: 5%;
 }

}

1. intro .carousel-control-next-icon, #intro .carousel-control-prev-icon {

 background: none;
 font-size: 32px;
 line-height: 1;

}

1. intro .carousel-indicators li {

 cursor: pointer;

}

1. intro .btn-get-started {

 font-family: "Montserrat", sans-serif;
 font-weight: 500;
 font-size: 16px;
 letter-spacing: 1px;
 display: inline-block;
 padding: 8px 32px;
 border-radius: 50px;
 transition: 0.5s;
 margin: 10px;
 color: #f6f8f1;
 background: #a54040;

}

1. intro .btn-get-started:hover {

 background: #f6f8f1;
 color: #a54040;

}

/*--------------------------------------------------------------

1. Navigation Menu

---

*/

/* Nav Menu Essentials */ .nav-menu, .nav-menu * {

 margin: 0;
 padding: 0;
 list-style: none;

}

.nav-menu ul {

 position: absolute;
 display: none;
 top: 100%;
 left: 0;
 z-index: 99;

}

.nav-menu li {

 position: relative;
 white-space: nowrap;

}

.nav-menu > li {

 float: left;

}

.nav-menu li:hover > ul, .nav-menu li.sfHover > ul {

 display: block;

}

.nav-menu ul ul {

 top: 0;
 left: 100%;

}

.nav-menu ul li {

 min-width: 180px;

}

/* Nav Menu Arrows */ .sf-arrows .sf-with-ul {

 padding-right: 30px;

}

.sf-arrows .sf-with-ul:after {

 content: "\f107";
 position: absolute;
 right: 15px;
 font-family: FontAwesome;
 font-style: normal;
 font-weight: normal;

}

.sf-arrows ul .sf-with-ul:after {

 content: "\f105";

}

/* Nav Meu Container */

1. nav-menu-container {

 float: right;
 margin: 0;

}

@media (min-width: 1024px) {

 #nav-menu-container {
   padding-right: 60px;
 }

}

@media (max-width: 768px) {

 #nav-menu-container {
   display: none;
 }

}

/* Nav Meu Styling */ .nav-menu a {

 padding: 0 8px 10px 8px;
 text-decoration: none;
 display: inline-block;
 color: #f6f8f1;
 font-family: "Montserrat", sans-serif;
 font-weight: 700;
 font-size: 13px;
 text-transform: uppercase;
 outline: none;

}

.nav-menu li:hover > a, .nav-menu > .menu-active > a {

 color: #a54040;

}

.nav-menu > li {

 margin-left: 10px;

}

.nav-menu ul {

 margin: 4px 0 0 0;
 padding: 10px;
 box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
 background: #f6f8f1;

}

.nav-menu ul li {

 transition: 0.3s;

}

.nav-menu ul li a {

 padding: 10px;
 color: #28272c;
 transition: 0.3s;
 display: block;
 font-size: 13px;
 text-transform: none;

}

.nav-menu ul li:hover > a {

 color: #a54040;

}

.nav-menu ul ul {

 margin: 0;

}

/* Mobile Nav Toggle */

1. mobile-nav-toggle {

 position: fixed;
 right: 0;
 top: 0;
 z-index: 999;
 margin: 20px 20px 0 0;
 border: 0;
 background: none;
 font-size: 24px;
 display: none;
 transition: all 0.4s;
 outline: none;
 cursor: pointer;

}

1. mobile-nav-toggle i {

 color: #f6f8f1;

}

@media (max-width: 768px) {

 #mobile-nav-toggle {
   display: inline;
 }

}

/* Mobile Nav Styling */

1. mobile-nav {

 position: fixed;
 top: 0;
 padding-top: 18px;
 bottom: 0;
 z-index: 998;
 background: rgba(40,39,44, 0.8);
 left: -260px;
 width: 260px;
 overflow-y: auto;
 transition: 0.4s;

}

1. mobile-nav ul {

 padding: 0;
 margin: 0;
 list-style: none;

}

1. mobile-nav ul li {

 position: relative;

}

1. mobile-nav ul li a {

 color: #f6f8f1;
 font-size: 13px;
 text-transform: uppercase;
 overflow: hidden;
 padding: 10px 22px 10px 15px;
 position: relative;
 text-decoration: none;
 width: 100%;
 display: block;
 outline: none;
 font-weight: 700;
 font-family: "Montserrat", sans-serif;

}

1. mobile-nav ul li a:hover {

 color: #f6f8f1;

}

1. mobile-nav ul li li {

 padding-left: 30px;

}

1. mobile-nav ul .menu-has-children i {

 position: absolute;
 right: 0;
 z-index: 99;
 padding: 15px;
 cursor: pointer;
 color: #f6f8f1;

}

1. mobile-nav ul .menu-has-children i.fa-chevron-up {

 color: #a54040;

}

1. mobile-nav ul .menu-has-children li a {

 text-transform: none;

}

1. mobile-nav ul .menu-item-active {

 color: #a54040;

}

1. mobile-body-overly {

 width: 100%;
 height: 100%;
 z-index: 997;
 top: 0;
 left: 0;
 position: fixed;
 background: rgba(40,39,44, 0.7);
 display: none;

}

/* Mobile Nav body classes */ body.mobile-nav-active {

 overflow: hidden;

}

body.mobile-nav-active #mobile-nav {

 left: 0;

}

body.mobile-nav-active #mobile-nav-toggle {

 color: #f6f8f1;

}

.section-header h3 {

 font-size: 32px;
 color: #28272c;
 text-transform: uppercase;
 text-align: center;
 font-weight: 700;
 position: relative;
 padding-bottom: 15px;

}

.section-header h3::before {

 content: ;
 position: absolute;
 display: block;
 width: 120px;
 height: 1px;
 background: #c2bcb9;
 bottom: 1px;
 left: calc(50% - 60px);

}

.section-header h3::after {

 content: ;
 position: absolute;
 display: block;
 width: 40px;
 height: 3px;
 background: #a54040;
 bottom: 0;
 left: calc(50% - 20px);

}

.section-header p {

 text-align: center;
 padding-bottom: 30px;
 color: #28272c;

}

.section-bg {

 background: #eae7e7;

}

1. about {

 background: url("/template/img/about-bg.jpg") center top no-repeat fixed;
 background-size: cover;
 padding: 60px 0 40px 0;
 position: relative;

}

1. about::before {

 content: ;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 background: rgba(255, 255, 255, 0.92);
 z-index: 9;

}

1. about .container {

 position: relative;
 z-index: 10;

}

1. about .about-col {

 background: #f6f8f1;
 border-radius: 0 0 4px 4px;
 box-shadow: 0px 2px 12px rgba(40,39,44, 0.08);
 margin-bottom: 20px;

}

1. about .about-col .img {

 position: relative;

}

1. about .about-col .img img {

 border-radius: 4px 4px 0 0;

}

1. about .about-col .icon {

 width: 64px;
 height: 64px;
 padding-top: 8px;
 text-align: center;
 position: absolute;
 background-color: #a54040;
 border-radius: 50%;
 text-align: center;
 border: 4px solid #f6f8f1;
 left: calc( 50% - 32px);
 bottom: -30px;
 transition: 0.3s;

}

1. about .about-col i {

 font-size: 36px;
 line-height: 1;
 color: #f6f8f1;
 transition: 0.3s;

}

1. about .about-col:hover .icon {

 background-color: #f6f8f1;

}

1. about .about-col:hover i {

 color: #a54040;

}

1. about .about-col h2 {

 color: #28272c;
 text-align: center;
 font-weight: 700;
 font-size: 20px;
 padding: 0;
 margin: 40px 0 12px 0;

}

1. about .about-col h2 a {

 color: #28272c;

}

1. about .about-col h2 a:hover {

 color: #a54040;

}

1. about .about-col p {

 font-size: 14px;
 line-height: 24px;
 color: #28272c;
 margin-bottom: 0;
 padding: 0 20px 20px 20px;

}

1. call-to-action {

 background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(40,39,44, 0.1)), url(/template/img/call-to-action-bg.jpg) fixed center center;
 background-size: cover;
 padding: 60px 0;

}

1. call-to-action h3 {

 color: #f6f8f1;
 font-size: 28px;
 font-weight: 700;

}

1. call-to-action p {

 color: #f6f8f1;

}

1. call-to-action .cta-btn {

 font-family: "Montserrat", sans-serif;
 text-transform: uppercase;
 font-weight: 500;
 font-size: 16px;
 letter-spacing: 1px;
 display: inline-block;
 padding: 8px 28px;
 border-radius: 25px;
 transition: 0.5s;
 margin-top: 10px;
 border: 2px solid #f6f8f1;
 color: #f6f8f1;

}

1. call-to-action .cta-btn:hover {

 background: #a54040;
 border: 2px solid #a54040;

}

/* Clients Section

---

*/

1. clients {

 padding: 60px 0;

}

1. clients img {

 max-width: 100%;
 opacity: 0.5;
 transition: 0.3s;
 padding: 15px 0;

}

1. clients img:hover {

 opacity: 1;

}

1. clients .owl-nav, #clients .owl-dots {

 margin-top: 5px;
 text-align: center;

}

1. clients .owl-dot {

 display: inline-block;
 margin: 0 5px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: #c2bcb9;

}

1. clients .owl-dot.active {

 background-color: #a54040;

}

/* Contact Section

---

*/

1. contact {

 padding: 60px 0;

}

1. contact .contact-info {

 margin-bottom: 20px;
 text-align: center;

}

1. contact .contact-info i {

 font-size: 48px;
 display: inline-block;
 margin-bottom: 10px;
 color: #a54040;

}

1. contact .contact-info address, #contact .contact-info p {

 margin-bottom: 0;
 color: #28272c;

}

1. contact .contact-info h3 {

 font-size: 18px;
 margin-bottom: 15px;
 font-weight: bold;
 text-transform: uppercase;
 color: #c2bcb9;

}

1. contact .contact-info a {

 color: #28272c;

}

1. contact .contact-info a:hover {

 color: #a54040;

}

1. contact .contact-address, #contact .contact-phone, #contact .contact-email {

 margin-bottom: 20px;

}

@media (min-width: 768px) {

 #contact .contact-address, #contact .contact-phone, #contact .contact-email {
   padding: 20px 0;
 }

}

@media (min-width: 768px) {

 #contact .contact-phone {
   border-left: 1px solid #c2bcb9;
   border-right: 1px solid #c2bcb9;
 }

}

1. contact .form #sendmessage {

 color: #a54040;
 border: 1px solid #a54040;
 display: none;
 text-align: center;
 padding: 15px;
 font-weight: 600;
 margin-bottom: 15px;

}

1. contact .form #errormessage {

 color: red;
 display: none;
 border: 1px solid red;
 text-align: center;
 padding: 15px;
 font-weight: 600;
 margin-bottom: 15px;

}

1. contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {

 display: block;

}

1. contact .form .validation {

 color: red;
 display: none;
 margin: 0 0 20px;
 font-weight: 400;
 font-size: 13px;

}

1. contact .form input, #contact .form textarea {

 padding: 10px 14px;
 border-radius: 0;
 box-shadow: none;
 font-size: 15px;

}

.btn-red {

 background: #a54040;
 padding: 10px 30px;
 color: #f6f8f1;

}

.btn-red:hover {

 background: #582d32;
 color: #c2bcb9;

}

1. footer {

 background: #28272c;
 padding: 0 0 30px 0;
 color: #eae7e7;
 font-size: 14px;

}

1. footer .footer-top {

 background: #28272c;
 padding: 60px 0 30px 0;

}

1. footer .footer-top .footer-info {

 margin-bottom: 30px;

}

1. footer .footer-top .footer-info h3 {

 font-size: 34px;
 margin: 0 0 20px 0;
 padding: 2px 0 2px 10px;
 line-height: 1;
 font-family: "Montserrat", sans-serif;
 font-weight: 700;
 letter-spacing: 3px;
 border-left: 4px solid #a54040;

}

1. footer .footer-top .footer-info p {

 font-size: 14px;
 line-height: 24px;
 margin-bottom: 0;
 font-family: "Montserrat", sans-serif;
 color: #eae7e7;

}

1. footer .footer-top .social-links a {

 font-size: 18px;
 display: inline-block;
 background: #28272c;
 color: #eae7e7;
 line-height: 1;
 padding: 8px 0;
 margin-right: 4px;
 border-radius: 50%;
 text-align: center;
 width: 36px;
 height: 36px;
 transition: 0.3s;

}

1. footer .footer-top .social-links a:hover {

 background: #a54040;
 color: #f6f8f1;

}

1. footer .footer-top h4 {

 font-size: 14px;
 font-weight: bold;
 color: #f6f8f1;
 text-transform: uppercase;
 position: relative;
 padding-bottom: 12px;

}

1. footer .footer-top h4::before, #footer .footer-top h4::after {

 content: ;
 position: absolute;
 left: 0;
 bottom: 0;
 height: 2px;

}

1. footer .footer-top h4::before {

 right: 0;
 background: #c2bcb9;

}

1. footer .footer-top h4::after {

 background: #a54040;
 width: 60px;

}

1. footer .footer-top .footer-links {

 margin-bottom: 30px;

}

1. footer .footer-top .footer-links ul {

 list-style: none;
 padding: 0;
 margin: 0;

}

1. footer .footer-top .footer-links ul i {

 padding-right: 8px;
 color: #c2bcb9;

}

1. footer .footer-top .footer-links ul li {

 border-bottom: 1px solid #28272c;
 padding: 10px 0;

}

1. footer .footer-top .footer-links ul li:first-child {

 padding-top: 0;

}

1. footer .footer-top .footer-links ul a {

 color: #eae7e7;

}

1. footer .footer-top .footer-links ul a:hover {

 color: #a54040;

}

1. footer .footer-top .footer-contact {

 margin-bottom: 30px;

}

1. footer .footer-top .footer-contact p {

 line-height: 26px;

}

1. footer .footer-top .footer-newsletter {

 margin-bottom: 30px;

}

1. footer .footer-top .footer-newsletter input[type="email"] {

 border: 0;
 padding: 6px 8px;
 width: 65%;

}

1. footer .footer-top .footer-newsletter input[type="submit"] {

 background: #a54040;
 border: 0;
 width: 35%;
 padding: 6px 0;
 text-align: center;
 color: #f6f8f1;
 transition: 0.3s;
 cursor: pointer;

}

1. footer .footer-top .footer-newsletter input[type="submit"]:hover {

 background: #28272c;

}

1. footer .copyright {

 text-align: center;
 padding-top: 30px;

}

1. footer .credits {

 text-align: center;
 font-size: 13px;
 color: #c2bcb9;

}

</style>