@charset "utf-8";
/* CSS Document */
*{	margin:0;padding:0;text-decoration:none;}
*::before, *::after {  	-webkit-box-sizing: unset;	-moz-box-sizing: unset;	box-sizing: unset}
body {	background: #ffffff; position:relative;	margin:0; padding:0;overflow-x: hidden  }
body, input, select, textarea {color: #000; font:16px/20px 'Lato';}
a {	-moz-transition:0.2s ease-in-out;	-webkit-transition:0.2s ease-in-out;	-ms-transition:0.2s ease-in-out;	transition:0.2s ease-in-out;	color: #000;	text-decoration: none;}
a:hover {	color:#f3371a;	text-decoration:none} 
h1,h2,h3,h4,h5,h6{ margin:0; padding:0; font-size:inherit; color:inherit}
p{ margin:0 0 5px 0}


/* font */
@font-face {
  font-family: 'Lato';
  src: url('../font/myriadproregular.eot');
  src: url('../font/myriadproregular.eot?#iefix&v=4.5.0') format('embedded-opentype'), 
  url('../font/myriadproregular.woff') format('woff'), 
  url('../font/myriadproregular.ttf') format('truetype'), 
  url('../font/myriadproregular.svg#Latoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lato-Light';
  src: url('../font/myriadprolight.eot');
  src: url('../font/myriadprolight.eot?#iefix&v=4.5.0') format('embedded-opentype'), 
  url('../font/myriadprolight.woff') format('woff'), 
  url('../font/myriadprolight.ttf') format('truetype'), 
  url('../font/myriadprolight.svg#Lato-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Lato-Black';
  src: url('../font/myriadprobold.eot');
  src: url('../font/myriadprobold.eot?#iefix&v=4.5.0') format('embedded-opentype'), 
  url('../font/myriadprobold.woff') format('woff'), 
  url('../font/myriadprobold.ttf') format('truetype'), 
  url('../font/myriadprobold.svg#Lato-Black') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*************************************************************/
.header{
    float: left;
    width: 100%;
    /*background: url("/resources/images/bg.jpg") no-repeat;*/
    background-size: cover;
}
.title-main{ float: left; width: 100%; font-size: 25px;font-family: Arial,sans-serif; color: #06337b; margin: 15px 0; text-align: center;}
.text-main{ float: left; width: 100%; font: 24px/34px 'Lato-Light'; color: #fff; text-align: center;}
.form-main{ float: left; width: 100%;}
.form-main .form-control{
    border-radius: 0px;
    /*border: none;*/
    -webkit-box-shadow: inset 10px 10px 5px -8px rgba(0,0,0,0.31);
    -moz-box-shadow: inset 10px 10px 5px -8px rgba(0,0,0,0.31);
    box-shadow: inset 10px 10px 5px -8px rgba(0,0,0,0.31);
}
#form1 label span {
color: #f00;
}
.form-main h3{
    color: #06337b;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
    margin: 0px;
    margin-bottom: 15px;
}
.form-main .input-group-text{border-radius: 0px; background: #ffd200; color: #000; border: none;}
.form-main .form-control.code{
    border-radius: 0px;
    box-shadow: none;
    background: rgba(127, 127, 127, 0.7);
    border: none;
    color: #fff;
}
.input-group input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ffd200;
}
.input-group input::-moz-placeholder { /* Firefox 19+ */
color: #ffd200;
}
.input-group input:-ms-input-placeholder { /* IE 10+ */
color: #ffd200;
}
.input-group input:-moz-placeholder { /* Firefox 18- */
color: #ffd200;
}
.link-code{ float: left; width: 100%; background: #0b333c; color: #fff; border: none; padding: 28px 0; font-size: 18px; position: relative; text-align: center;}
.link-code:hover{ float: left; width: 100%; background: #ffd200; color: #fff;}
.b-code{position: absolute; top: 10px;right: -20px;}
.content{ float: left; width: 100%; background: #b6b7b6;}
.bg-content{ float: left; width: 100%; background: #e0ebed; margin-top: -25px;}
.title-cont{float: left; width: 100%; font: 30px/40px 'Lato-Light'; color: #000; text-align: center; text-transform: uppercase; margin: 25px 0;}
.title-guide{
    position: relative;
    width:120px;
    background: #000;
    height:40px;
    line-height: 40px;
    margin-bottom:30px; 
    text-align:center;
    color:#fff;
    font-size: 18px;
    text-transform: uppercase;
}
/*right arrow*/
.arrow-right:after{
    content: "";
    position: absolute;
    right: -20px;
    top: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #000; 
}
.title-sup{
    float: left;
    padding: 9px 9px;
    font-size: 18px;
    line-height: normal;
    color: #000;
    text-transform: uppercase;
}
.po-picguide{ float: left; width: 100%; margin-top: -5%; text-align: center;}
.box-form{ 
    float: left; width: 100%;
    background: #fff;
    padding: 12%;
    -webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.25);
}
.box-form .form-control{
    border-bottom: 1px solid #b2b2b2;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0px;
}
.de{ padding: 10px 35px; font-size: 18px; background: #b6b7b6; border: none; color: #fff;}
.de:hover{background: #c9c9c9;}
.ag{ padding: 10px 35px; font-size: 18px; background: #ffd200; border: none; color: #0b333c;}
.ag:hover{background: #ffe259;}
.bg-white-last{ float: left; width: 100%; background: #fff; margin-top: -50px;}
.cap-grey{ float: left; width: 100%; font: 16px/22px 'Lato-Black'; color: #000; text-transform: uppercase;}
.cap-grey span{ float: left; width: 100%; font: 16px/22px 'Lato'; color: #000; text-transform: none; margin-bottom: 10px;}
.color-grey{color: #717171;}
.color-green{color: #87bb33;}
.footer{ float: left; width: 100%; background: #0b333c; padding-top: 15px; padding-bottom: 15px;position: fixed;bottom: 0;}
.cap-footer{ float: left; width: 100%; font-size: 14px; color: #8d8d8d; text-align: center;}
/********************************************************/

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    /*.title-main { font: 22px/40px 'Lato-Black';}*/
    .form-main {float: left; width: 100%;}
    .step .pr-5{padding-right: 1rem !important ;}
    body {
        padding-right: 0px!important;
        padding-left: 0px!important;
    }
    .p-5 {
        padding: 2rem 1rem 2rem 1rem !important;
    }
    .container{
        width:100%!important;
    }
}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
    body {
        padding-right: 0px!important;
        padding-left: 0px!important;
    }
    .p-5 {
        padding: 2rem 1rem 2rem 1rem !important;
    }
    .container{
        width:100%!important;
    }
	
}
@media (max-width: 767px)
 {
     body{
        padding-right: 0px!important;
        padding-left: 0px!important;
     }
     .p-5 {
        padding: 2rem 1rem 2rem 1rem !important;
    }
    .container{
        width:100%!important;
    }
/*    .modal.fade {
    top: -150px!important;
    }*/
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .form-main {float: left; width: 100%;}
    .de {padding: 10px 26px;}
    .p-5 {
        padding: 3rem!important;
    }
    .container{
        width:95%!important;
    }
	
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
    .form-main {float: left; width: 100%;}
    .p-5 {
        padding: 3rem!important;
    }
    .container{
        width:80%!important;
    }
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) and (max-width: 1799px) { 
    .p-5 {
        padding: 3rem!important;
    }
    .container{
        width:80%!important;
    }
}
@media (min-width: 1600px){
    .p-5 {
        padding: 3rem!important;
    }
    .container{
        width:75%!important;
    }
}

.align-items-center {
-ms-flex-align: center!important;
align-items: center!important;
}
.flex-column {
-ms-flex-direction: column!important;
flex-direction: column!important;
}
.d-flex {
display: -ms-flexbox!important;
display: flex!important;
}
.widget.green {
border: 1px solid #74B749;
}
.widget {
background: #fff;
clear: both;
margin-bottom: 20px;
margin-top: 0;
border: 1px solid #404040;
}
.btn {
    background-color: #1a3d75 !important;
    background-image:none !important;
    color: #fff;
    border-bottom: 0px;
}
.btn:hover{
     background-color: #dc1011 !important;
     background-image:none !important;
     color:#fff;
}
.form-main .content_article{
    font-size: 15px;
}

.form-main .content_article span{
    color: #06337b;
    font-size: 11px;
}

.ug_link span{
    font-size: 20px!important;
}

.ug_link a{
    color: #06337b;
    font-weight: 600;
}

.ug_link a:hover{
    color: #f00;
}
.kmt_note {
color: #cd0000;
}
.space5 {
    display: block;
    height: 5px !important;
    clear: both;
}

.space10 {
    height: 10px !important;
    clear: both;
}

.space12 {
    height: 12px !important;
    clear: both;
}

.space15 {
    height: 15px !important;
    clear: both;
}

.space20 {
    height: 20px !important;
    clear: both;
}
select[multiple], select[size] {
    height: 30px !important;
}
.row-fluid [class*="span3"] {
    min-height: 1px!important;
}