@charset "utf-8";
/*@import url(https://db.onlinewebfonts.com/c/86203afc717c0d2960e0b34fd4041e95?family=Ticking+Timebomb+BB);*/
@import url(https://fonts.googleapis.com/css?family=Exo+2);
@import url(https://fonts.googleapis.com/css?family=Exo+2:700);

@font-face {font-family: "Ticking Timebomb BB";
    src: url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.eot"); /* IE9*/
    src: url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.woff2") format("woff2"), /* chrome firefox */
    url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.woff") format("woff"), /* chrome firefox */
    url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.svg#Ticking Timebomb BB") format("svg"); /* iOS 4.1- */
}

@font-face {
  font-family: 'Spoqa Han Sans';
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/Spoqa_Han_Sans_Light.ttf") format('opentype');
}
@font-face {
  font-family: 'Spoqa Han Sans';
  font-style: normal;
  font-weight: 500;
  src: url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/Spoqa_Han_Sans_Regular.ttf") format('opentype');
}
@font-face {
  font-family: 'Spoqa Han Sans';
  font-style: normal;
  font-weight: 600;
  src: url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/Spoqa_Han_Sans_Bold.ttf") format('opentype');
}

@font-face {
	font-family: "Ticking Timebomb";
    /*src: url("https://db.onlinewebfonts.com/t/86203afc717c0d2960e0b34fd4041e95.eot");
    src: url("https://db.onlinewebfonts.com/t/86203afc717c0d2960e0b34fd4041e95.eot?#iefix") format("embedded-opentype"),
	*/
	src: url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.eot");
	src: url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.eot?#iefix") format("embedded-opentype"),
	


    /*url("http://db.onlinewebfonts.com/t/86203afc717c0d2960e0b34fd4041e95.woff2") format("woff2"),*/
    /*
    url("https://db.onlinewebfonts.com/t/86203afc717c0d2960e0b34fd4041e95.woff") format("woff"),
    url("https://db.onlinewebfonts.com/t/86203afc717c0d2960e0b34fd4041e95.ttf") format("truetype"),
    */
	url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.woff") format("woff"),
    url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.ttf") format("truetype"),

    /*url("https://db.onlinewebfonts.com/t/86203afc717c0d2960e0b34fd4041e95.svg#Ticking Timebomb BB") format("svg");*/
	url("https://cdn.klpga.co.kr/DATA/resources/datacenter/fonts/86203afc717c0d2960e0b34fd4041e95.svg#Ticking Timebomb BB") format("svg");
}

body {
    background-color: #fff;
    font-family: 'Spoqa Han Sans', sans-serif;
    line-height: 24px;
    font-size: 0.6667rem;
    color: #22272a;
    font-weight:500;
    font-smoothing: antialiased;
    letter-spacing: -0.2px;
    position: relative;
    overflow-x: hidden;
}
ol, ul {list-style: none; margin:0; padding:0;}
figure, p, address {
    margin: 0;
}

p {
    line-height: 25px;
}

iframe {
    border: 0;
}

a {
	cursor: pointer !important;
    -webkit-transition: all 0.3s ease-out 0s;
       -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
         -o-transition: all 0.3s ease-out 0s;
            transition: all 0.3s ease-out 0s;
}

a, a:hover, a:focus, .btn:focus {
    text-decoration: none;
    outline: none;
	color: #22272a;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    /* font-family: 'Spoqa Han Sans', sans-serif; */
    color: #22272a;
}

main > section {
    padding: 2.083rem 0;
}

.btn {
    border-radius: 0;
    border: 0;
    position: relative;
    text-transform: uppercase;
}

.btn-blue {
    background-color: rgba(0,158,227, 0.78);
    box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.15) inset;
    padding: 15px 55px;
    color: #fff;
}

.btn-border {
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 35px;
}

.bg-blue {
    background-color: #009EE3;
}

/* Sweep To Right */
.btn-effect {
	vertical-align: middle;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
	display: inline-block;

	-webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
		-ms-transform: translateZ(0);
		 -o-transform: translateZ(0);
			transform: translateZ(0);
		  
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
			backface-visibility: hidden;
		  
	-webkit-transition-property: color;
	   -moz-transition-property: color;
		-ms-transition-property: color;
			transition-property: color;
		  
	-webkit-transition-duration: 0.3s;
	   -moz-transition-duration: 0.3s;
		-ms-transition-duration: 0.3s;
			transition-duration: 0.3s;
		  
	-moz-osx-font-smoothing: grayscale;
}

.btn-effect:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	
	-webkit-transform: scaleX(0);
	   -moz-transform: scaleX(0);
		-ms-transform: scaleX(0);
			transform: scaleX(0);
			
	-webkit-transform-origin: 0 50%;
	   -moz-transform-origin: 0 50%;
		-ms-transform-origin: 0 50%;
			transform-origin: 0 50%;
			
	-webkit-transition-property: transform;
	   -moz-transition-property: transform;
		-ms-transition-property: transform;
			transition-property: transform;
			
	-webkit-transition-duration: 0.3s;
	   -moz-transition-duration: 0.3s;
		-ms-transition-duration: 0.3s;
			transition-duration: 0.3s;
			
	-webkit-transition-timing-function: ease-out;
	   -moz-transition-timing-function: ease-out;
		-ms-transition-timing-function: ease-out;
			transition-timing-function: ease-out;
}

.btn-effect:hover, .btn-effect:focus, .btn-effect:active {
	color: #009EE3;
}

.btn-effect:hover:before, .btn-effect:focus:before, .btn-effect:active:before {
	-webkit-transform: scaleX(1);
	   -moz-transform: scaleX(1);
	    -ms-transform: scaleX(1);
			transform: scaleX(1);
}

.sec-title {
    margin-bottom: 50px;
}

.sec-title.white {
    color: #fff;
}

.sec-title h2 {
    font-size: 1.5rem;
    margin: 0 0 30px;
    padding-bottom: 30px;
    position: relative;
    text-transform: uppercase;
}

.sec-title.white h2 {
    color: #fff;
}

.sec-title h2:after {
    border-bottom: 1px solid #009ee3;
    content: "";
    display: block;
    left: 45%;
    bottom: 0;
    position: absolute;
    width: 115px;
}

.sec-title.white h2:after {
    border-bottom: 1px solid #fff;
}

.parallax {
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}


/**
/*	Preloader
/* ==========================================*/

#preloader {
    background-color: #fff;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

/*Battery*/
.loder-box {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 1px;
  height: 100px;
  left: 50%;
  margin-left: -64px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
  width: 128px;
}

.battery{
    width: 60px;
    height: 25px;
    top: 35%;
    border: 1px #2E2E2E solid;
    border-radius: 2px;
    position: relative;
    -webkit-animation: charge 5s linear infinite;
       -moz-animation: charge 5s linear infinite;
            animation: charge 5s linear infinite;
    margin: 0 auto;
}

.battery:after {
  background-color: #2E2E2E;
  border-radius: 0 1px 1px 0;
  content: "";
  height: 10px;
  position: absolute;
  right: -5px;
  top: 7px;
  width: 3px;
}

@-webkit-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
    100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}

@-moz-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
    100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}

@keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
    100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}





/**
/*	Header
/* ==========================================*/

#navigation {
    /* -webkit-transition: all 0.8s ease 0s;
       -moz-transition: all 0.8s ease 0s;
        -ms-transition: all 0.8s ease 0s;
         -o-transition: all 0.8s ease 0s;
            transition: all 0.8s ease 0s;

    background-color: rgba(0,0,0,.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); */
    padding: 0;
}

#navigation.animated-header {
    padding: 0; background: #22272a;
}

.home #navigation.animated-header {
    background: none;
}

#navigation.navbar-fixed-top .navbar-nav>li>a {
	color: #abb9c1;
}

h1.navbar-brand {
    /* font-size: 20px; */
    /* font-weight: 700; */
    margin: 0;
    /* text-transform: uppercase; */
    padding: 15px 0 0 20px;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
    font-size: 0.625rem;
    padding-top:20px;
    text-transform: uppercase;
}

.animated-header .topNav {
	display: block !important;
}

/* 페이지 선택 */
.topNav .tn-ul li.on a {
	border-bottom: #fff 5px solid;
}

/*=================================================================
	Home Slider
==================================================================*/


#home-slider {
    position: relative;
    /* padding: 0; */
     background:url(../images/bg_main.png) no-repeat;
}

.sl-slider-wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.sl-slider {
    position: absolute;
    top: 0;
    left: 0;
}

/* Slide wrapper and slides */

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
} 

.sl-slide {
    z-index: 1;
}

.slide-caption {
    color: #fff;
    display: table;
    height: 100%;
    left: 0;
    min-height: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 11;
}

.slide-caption .caption-content {
    vertical-align: middle;
    display: table-cell;
}

.caption-content h2 {
    color: #fff;
    font-size: 2.167rem;
    font-weight: 400;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.caption-content > span {
    display: block;
    font-size: 1rem ;
    margin-bottom: 45px;
    text-transform: capitalize;
}

.caption-content p {
    font-size: 1.208rem;
    margin-bottom: 65px;
}

/* The duplicate parts/slices */

.sl-content-slice {
    overflow: hidden;
    position: absolute;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: #fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity : 1;
}

/* Horizontal slice */

.sl-slide-horizontal .sl-content-slice {
    width: 100%;
    height: 50%;
    left: -200px;
    -webkit-transform: translateY(0%) scale(1);
    -moz-transform: translateY(0%) scale(1);
    -o-transform: translateY(0%) scale(1);
    -ms-transform: translateY(0%) scale(1);
    transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
    top: -200px;
    padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
    top: 50%;
    padding: 0px 200px 200px 200px;
}

/* Vertical slice */

.sl-slide-vertical .sl-content-slice {
    width: 50%;
    height: 100%;
    top: -200px;
    -webkit-transform: translateX(0%) scale(1);
    -moz-transform: translateX(0%) scale(1);
    -o-transform: translateX(0%) scale(1);
    -ms-transform: translateX(0%) scale(1);
    transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
    left: -200px;
    padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
    left: 50%;
    padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
    position: absolute;
}

.sl-content {
    width: 100%;
    height: 100%;
}

/* Default styles for background colors

.btn-effect:after {
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
    content: "";
    position: absolute;
    z-index: -1;

    -webkit-transition: all 0.3s ease-out 0s;
       -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
         -o-transition: all 0.3s ease-out 0s;
            transition: all 0.3s ease-out 0s;
}

.btn-effect:hover,
.btn-effect:active {
    color: #0e83cd;
}

.btn-effect:hover:after,
.btn-effect:active:after {
    width: 100%;
} */


/* Project laughtbox setup */

.fancybox-item.fancybox-close {
    background: url("../img/icons/close.png") no-repeat scroll 0 0 transparent;
    height: 50px;
    right: 0;
    top: 0;
    width: 50px;
}

.fancybox-next span {
    background: url("../img/right.png") no-repeat scroll center center #009ee3;
    height: 50px;
    width: 50px;
    right: 0;
}

.fancybox-prev span {
    background: url("../img/left.png") no-repeat scroll center center #009ee3;
    height: 50px;
    width: 50px;
    left: 0;
}

/*=================================================================
	About
==================================================================*/

#about {
    background-color: #009EE3;
    color: #fff;
}

#about h3 {
    color: #fff;
    margin: 0 0 35px;
    text-transform: uppercase;
}

#about .welcome-block h3 {
    margin: 0 0 65px;
}

#about .welcome-block img {
    border: 3px solid #fff;
    border-radius: 50%;
    margin-right: 35px;
    max-width: 100px;
}

#about .message-body {
    font-size: 0.5417rem;
    line-height: 20px;
    margin-bottom: 70px;
}

.owl-buttons {
    border: 2px solid #fff;
    display: inline-block;
    float: right;
    padding: 1px 8px 5px;
}

.owl-buttons > div {
    display: inline-block;
    padding: 0 5px;
}

.welcome-message {
    padding: 0 50px;
}

.welcome-message img {
    display: block;
    height: auto;
    max-width: 100px;
    float: left;
}

.welcome-message p {
    font-size: 0.5417rem;
    margin-left: 135px;
}

/*=================================================================
	Services
==================================================================*/

.service-icon {
    border: 3px solid transparent;
    display: inline-block;
    height: 85px;
    width: 85px;
    line-height: 101px;

    -webkit-transform: rotate(47deg);
       -moz-transform: rotate(47deg);
        -ms-transform: rotate(47deg);
         -o-transform: rotate(47deg);
            transform: rotate(47deg);

    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
         -o-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}

.service-item:hover .service-icon {
    border: 3px solid #009ee3;
    margin-bottom: 20px;
    color: #009ee3;
}

.service-icon i {
    -webkit-transform: rotate(-48deg);
       -moz-transform: rotate(-48deg);
        -ms-transform: rotate(-48deg);
         -o-transform: rotate(-48deg);
            transform: rotate(-48deg);
}

.service-item h3 {
    font-size: 0.8333rem;
    text-transform: uppercase;
}

/*=================================================================
	Portfolio
==================================================================*/

.project-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.project-wrapper li {
    display: inline-block;
}

.portfolio-item {
    cursor: pointer;
    margin: 0 1% 1% 0;
    overflow: hidden;
    position: relative;
    width: 32%;
}

figcaption.mask {
    background-color: rgba(54, 55, 50, 0.79);
    bottom: -126px;
    color: #fff;
    padding: 25px;
    position: absolute;
    width: 100%;
    text-align: left;
    
    -webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}

.portfolio-item:hover figcaption.mask {
    bottom: 0;
}

figcaption.mask h3 {
    margin: 0;
    color: #fff;
}

ul.external {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: -47px;
    
    -webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}

ul.external li {
    display: inline-block;
}

ul.external li a {
    background-color: rgba(255, 255, 255, 0.9);
    color: #818181;
    display: block;
    padding: 10px 18px 13px;
    
    -webkit-transition: all 0.5s ease 0s;
       -moz-transition: all 0.5s ease 0s;
        -ms-transition: all 0.5s ease 0s;
         -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
}

ul.external li a:hover {
    background-color: #009EE3;
    color: #fff;
}

.portfolio-item:hover ul.external {
    top: 0;
}

.fancybox-skin {
    border-radius: 0;
}

.fancybox-title.fancybox-title-inside-wrap {
    padding: 15px;
}

.fancybox-title h3 {
    margin: 0 0 15px;
}

.fancybox-title p {
    color: #818181;
    font-size: 0.6667rem;
    line-height: 22px;
}

.fancybox-title-inside-wrap {
    padding-top: 0;
}

/*=================================================================
	Testimonials
==================================================================*/


#testimonials {
    background-image: url(../img/parallax/testimonial.jpg);
    padding: 0;
    color: #fff;
}

#testimonials .sec-title h2:after {
    border-bottom: 1px solid #fff;
}

#testimonials .overlay {
    background-color: rgba(15,155,224, 0.78);
    padding: 70px 0 40px;
}

.testimonial-item {
    margin: 0 auto;
    padding-bottom: 50px;
    width: 64%;
}

.testimonial-item img {
    border: 3px solid #fff;
    border-radius: 50%;
    display: inline-block;
    height: auto;
    max-width: 100px;
}

.testimonial-item > div {
    line-height: 30px;
    position: relative;
}

.testimonial-item > div:before {
    background-image: url("../img/icons/quotes.png");
    background-repeat: no-repeat;
    bottom: 127px;
    height: 33px;
    left: -35px;
    position: absolute;
    width: 45px;
}

.testimonial-item > div:after {
    background-image: url("../img/icons/quotes.png");
    background-position: -58px 0;
    background-repeat: no-repeat;
    bottom: -50px;
    height: 33px;
    position: absolute;
    right: 0;
    width: 45px;
}

.testimonial-item > div > span {
    display: inline-block;
    font-weight: 700;
    margin: 40px 0 30px;
    text-transform: uppercase;
}

#testimonials .owl-controls.clickable {
    margin-top: 20px;
    text-align: center;
}

#testimonials .owl-buttons {
    border: 2px solid #fff;
    float: inherit;
}

#testimonials .owl-prev:hover,
#testimonials .owl-next:hover {
    color: #fff;
}

.price-table {
    border: 1px solid #e3e3e3;
}

.price-table.featured {
    -webkit-box-shadow: 0 4px 5px rgba(0,0,0,0.19);
       -moz-box-shadow: 0 4px 5px rgba(0,0,0,0.19);
            box-shadow: 0 4px 5px rgba(0,0,0,0.19);
}

.price-table > span {
    color: #22272a;
    display: block;
    font-size: 1rem ;
    padding: 30px 0;
    text-transform: uppercase;
}

.price-table .value {
    background-color: #f8f8f8;
    color: #727272;
    padding: 20px 0;

    -webkit-transition: all 0.7s ease 0s;
       -moz-transition: all 0.7s ease 0s;
        -ms-transition: all 0.7s ease 0s;
         -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
}

.price-table.featured .value {
    background-color: #009EE3;
    color: #fff;
}

.price-table .value span {
    display: inline-block;
}

.price-table .value span:first-child {
    font-size: 1.333rem;
    line-height: 32px;
}

.price-table .value span:nth-child(2) {
    font-size: 2.708rem;
    line-height: 65px;
    margin-bottom: 25px;
}

.price-table .value span:last-child {
    font-size: 0.6667rem;
}

.price-table ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.price-table ul li {
    border-top: 1px solid #e3e3e3;
    display: block;
    padding: 25px 0;

    -webkit-transition: all 0.7s ease 0s;
       -moz-transition: all 0.7s ease 0s;
        -ms-transition: all 0.7s ease 0s;
         -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
}

.price-table ul li a {
    display: block;
    text-transform: uppercase;
}

.price-table.featured ul li:last-child,
.price-table ul li:last-child:hover {
    background-color: #009EE3;
}

.price-table.featured ul li:last-child a,
.price-table ul li:last-child:hover a {
    color: #fff;
}


/*=================================================================
	Price
==================================================================*/

#social {
    background-image: url(../img/slider/banner.jpg);
    padding: 0;
}

#social .overlay {
    background: url("../img/slide_bg.png") repeat scroll 0 0 transparent;
    padding: 100px 0 120px;
}

.social-button {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.social-button li {
    display: inline-block;
}

.social-button li:nth-child(2) {
    margin: 0 75px;
}

.social-button li a {
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: block;
    height: 90px;
    line-height: 96px;
    width: 90px;
    
    -webkit-transition: all 0.2s ease 0s;
       -moz-transition: all 0.2s ease 0s;
        -ms-transition: all 0.2s ease 0s;
         -o-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}

.social-button li a:hover {
    color: #008ECC;
    border: 2px solid #008ECC;
}


/*=================================================================
	Contact
==================================================================*/

.input-field {
    margin-bottom: 10px;
}

.form-control {
    border: 1px solid #ececec;
    border-radius: 0;
    box-shadow: none;
    color: #22272a;
    font-size: 0.6667rem;
    height: 2.083rem;
    border-radius: 10px;
    padding: 0.25rem 0.5rem;
}

textarea.form-control {
    width: 100%;
    height: 165px;
}

#submit:hover {
  color: #fff;
}

#submit:before {
  background-color: #0A85BB;
}

#submit.btn-effect:after {
  background: #2E2E2E;
}

.contact-details h3 {
    border-bottom: 1px solid #008ecc;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 15px;
    text-transform: uppercase;
}

.contact-details p {
    line-height: 30px;
}

.contact-details p i {
    margin-right: 10px;
}

.contact-details span {
    display: block;
    margin-left: 24px;
}


/*============================================================
	Google Maps
==============================================================*/

#google-map {
    padding: 0;
}

#map-canvas {
    width: 100%;
    height: 300px;
}


/*============================================================
	Footer
==============================================================*/

#footer {
    background-color: #22272a;
    padding: 2.917rem 0 3.333rem 0;
    color: #fff;
    clear: both;
}

.footer-content {
    width: 100%;
    margin: 0 auto;
}
.footer-content > img{width:6.417rem; height:2.042rem;}

.footer-content > div {
    margin-bottom: 1.667rem;
    color: #6a7175;
    font-size: 0.5833rem;
    margin-top: 1.125rem;
}

.footer-content > div > p:first-child {
    /* margin-bottom: 15px; */
    text-transform: uppercase;
}

.subscribe-form {
    position: relative;
}

.subscribe.form-control {
    background-color: transparent;
    border: 1px solid #7f7f7f;
}

.subscribe.form-control:focus {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}

.submit-icon {
    background-color: #7f7f7f;
    border: 0 none;
    border-radius: 0;
    color: #c1c1c1;
    padding: 13px 20px;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
}

.submit-icon .fa-paper-plane {
    position: relative;
    top: 0;
    
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);

    -webkit-transition: all 0.3s ease 0.2s;
       -moz-transition: all 0.3s ease 0.2s;
        -ms-transition: all 0.3s ease 0.2s;
         -o-transition: all 0.3s ease 0.2s;
            transition: all 0.3s ease 0.2s;
}

.submit-icon:hover .fa-paper-plane {
    position: relative;
    top: -37px;
    
    -webkit-transform: translateX(30px);
       -moz-transform: translateX(30px);
        -ms-transform: translateX(30px);
         -o-transform: translateX(30px);
            transform: translateX(30px);
}

.footer-content .footer-social {
    margin: 40px 0 35px;
}

.footer-social ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.footer-social ul li {
    display: inline-block;
    margin: 0 10px;
}

.footer-social ul li a {
    color: #7f7f7f;
    display: block;
    
    -webkit-transition: all 0.2s ease 0s;
       -moz-transition: all 0.2s ease 0s;
        -ms-transition: all 0.2s ease 0s;
         -o-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}

.footer-social ul li a:hover {
    color: #009EE3;
}

.footer-content > p {
    color: #ababab;
    font-size: 0.5833rem;
    color: #6a7175;
}



/*============================================================ 
	Responsive Styles
 ============================================================*/

/*============================================================
	For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

/*about*/
    #about .welcome-block img {
        margin-bottom: 30px;
    }

/* portfolio */
    figcaption.mask {
        bottom: -151px;
    }

    .testimonial-item > div:after {
        bottom: -40px;
    }
}


/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {

/* home slider  */
    .caption-content h2 {
        font-size: 1.667rem;
    }

    .caption-content p {
        font-size: 1.042rem;
    }

    .caption-content strong {
        font-size: 1.875rem;
    }

/* about */
    .recent-works {
        margin-bottom: 50px;
    }

    .service-item {
        margin-bottom: 50px;
    }

/* portfolio */
    .portfolio-item {
        width: 48%;
    }

/* testimonial */
    .testimonial-item {
        width: 100%;
    }

    .testimonial-item {
        width: 80%;
    }

    .testimonial-item > div:after {
        bottom: -35px;
    }

/* price */
    .price-table {
        margin-bottom: 50px;
    }

/* contact form */
    .contact-form {
        margin-bottom: 50px;
    }
}


/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {

    body {
        font-size: 0.5833rem;
    }

    .parallax {
        background-position: centet tip !important;
    }

    .sec-title h2 {
        font-size: 1.042rem;
    }

    .sec-title h2:after {
        left: 30%;
    }

/*navigation*/
    .navbar-inverse .navbar-toggle {
        border-color: #fff;
    }

    .navbar-inverse .navbar-toggle:hover,
    .navbar-inverse .navbar-toggle:focus {
        background-color: transparent;
    }

/* slider */
    .caption-content h2 {
        font-size: 0.75rem;
    }

    .caption-content > span {
        font-size: 0.6667rem;
        margin-bottom: 20px;
    }

    .caption-content p {
        font-size: 0.6667rem;
        margin-bottom: 30px;
    }

    .caption-content strong {
        font-size: 0.9167rem;
    }

/* about */
    .recent-works {
        margin-bottom: 85px;
    }

    #about h3 {
        font-size: 0.75rem;
        margin: 0 0 35px !important;
    }

    #about .owl-buttons {
        margin-top: 20px;
    }

    #about .message-body {
        margin-bottom: 45px;
    }

    #about .welcome-block img {
        margin: 0 25px 15px 0;
    }

/* service */
    .service-item {
        width: 100%;
    }

/*portfolio*/
    .portfolio-item {
        margin: 0 auto 10px;
        font-size: 0.5833rem;
        width: 280px;
    }

    figcaption.mask {
        bottom: -107px;
        color: #fff;
        padding: 15px;
    }

/* lightbox */
    .fancybox-title h3 {
        font-size: 0.8333rem;
    }

    .fancybox-title p {
        font-size: 0.5833rem;
    }

/* testimonial */
    .testimonial-item {
        width: 95%;
    }

    .testimonial-item > div:before,
    .testimonial-item > div:after {
        background-image: none;
    }

    .testimonial-item > div > span {
        margin: 30px 0 20px;
    }

/* price */
    .price-table {
        margin-bottom: 50px;
    }

/* follow us */
    .social-button li:nth-child(2) {
        margin: 0 25px;
    }

    .social-button li a {

        height: 65px;
        line-height: 71px;
        width: 65px;
    }

/* contact form */
    .contact-form {
        margin-bottom: 50px;
    }

/* footer */
    .footer-content {
        width: 100%;
    }

    .footer-social ul li {
        margin: 0 7px;
    }
}


/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

    .sec-title h2:after {
        left: 38%;
    }

/* home slider */
    .caption-content h2 {
        font-size: 1.458rem;
    }

    .caption-content p {
        font-size: 1.042rem;
    }

    .caption-content strong {
        font-size: 1.458rem;
    }

/*about*/

    #about .welcome-block h3 {
        margin: 0 0 35px;
    }

/* service */

    .service-item {
        margin: 0 auto 50px;
        width: 55%;
    }

/* portfolio */
    .portfolio-item {
        width: 48%;
    }

    figcaption.mask {
        bottom: -132px;
    }

/* testimonial */
    .testimonial-item {
        width: 80%;
    }

    .testimonial-item > div:before {
        bottom: 160px;
    }

/* social */
    .social-button li:nth-child(2) {
        margin: 0 50px;
    }

    .social-button li a {
        height: 90px;
        line-height: 96px;
        width: 90px;
    }

/* price */
    .price-table {
        margin-bottom: 50px;
    }

/* contact form */
    .contact-form {
        margin-bottom: 50px;
    }

/* footer */
    .footer-content {
        width: 380px;
    }
}
.navbar-fixed-top.animated-header{background:none;}
.navbar-fixed-top{background:#22272a;}

#ranking-box{float:right;width:196px;position: relative;}
#ranking-box::after{content:"";width: 14px;height: 8px;background: url("../images/arr.png");position: absolute;right: 20px;top: 28px;z-index: 999999;}
#ranking-box .ranking{height:64px;line-height: 64px;background: rgba(34, 39, 42, 0.3);}
#ranking-box .ranking .rank-auto{margin: 0; height: 100%; position: relative;}
#ranking-box .ranking .rank-auto .ap1{display:inline-block;color:#ffffff;padding-left: 19px;position: absolute;left: 0;top: 0;}
#ranking-box .ranking .rank-auto .ap2{display:inline-block;color:#ffffff;padding-left: 53px;}
#ranking-box .ranking dl{ margin: 0; height: 100%; position: relative;}
#ranking-box .ranking dl dt{display:inline-block;color:#ffffff;padding-left: 19px;position: absolute;left: 0;top: 21px;}
#ranking-box .ranking dl dd{display:inline-block;color:#ffffff;padding-left: 53px;}
#ranking-box .ranking-list{display: none;position: absolute;top: 0;width:196px;min-height: 353px;background: #fff;padding: 15px 0;z-index: 1;}
#ranking-box .ranking-list dl{margin: 0 0 8px 0;font-size: 0.6667rem;}
#ranking-box .ranking-list dl dt{display:inline-block;color: #000;width: 30px;margin-left: 11px;vertical-align: top; padding-left:12px;}
#ranking-box .ranking-list dl dd{display:inline-block;color: #000;padding-left: 17px;padding-right: 30px;vertical-align: top;}
#ranking-box .ranking-list.hover{display:block;}
#js-rotating span span { width:80%; height:60px; overflow:hidden; display:inline-block; }


#ranking-box.rankingOver .ranking-list{display:block;}
#ranking-box.rankingOut{}



nav.nav{ margin-top:8px;}
.navbar-nav>li{position:relative;}
.navbar-nav>li>a{background:none; color:#fff;}
.navbar-nav>li:hover>a{background:none; color:#fff;}
.navbar-nav>li:after{content:""; width:1px; height:14px; background-color:#6c7275; position:absolute; top:19px; right:0;}
.navbar-nav>li:last-child:after{ display:none;}


.form-search{height: 2.667rem;}
.form-search #express-form-typeahead{height:100%;margin: 0 0 0 0.6667rem;padding-right: 1rem;}

.section-1{background-image: url("../images/bg_record.png");background-repeat: no-repeat;background-color: #fafafa;padding: 2.083rem 0.4167rem;}
.section-2{background-image: url("../images/bg_historyrecord.png");background-repeat: no-repeat;background-color: #fafafa;}

.se-box{
    text-align: center;
}
.se-box .se-img{}
.se-box .se-h2{
    font-size: 2.25rem;
    font-weight: 300;
    margin-top: 1.625rem;
    letter-spacing: -3.3px;
    padding: 0 0.4167rem;
}
.se-box .se-span{font-size: 0.5833rem;color:#ea203f;margin-top: 1.75rem;display:block;font-weight: 500;margin-bottom: 1rem;}
.se-box2{
    text-align: center;
}
.se-box2 .se-img{}
.se-box2 .se-h2{
    font-size: 2.25rem;
    margin-top: 1.625rem;
    letter-spacing: 0;
    color:#fff;
    font-weight:600;
    margin-bottom: 4rem;
}
.se-box2 .se-span{font-size:0.5rem; color:#ea203f;}

.se-box3{
    text-align: center;
}
.se-box3 .se-img{}
.se-box3 .se-h2{
    font-size: 1rem;
    font-weight: 300;
    margin-top: 0.625rem;
	margin-bottom: 0.5rem;
    color:#fff;}





.se-ul{
    text-align: center;
    margin-top: 4.167rem;
    margin-bottom: 3.333rem;
    width: 550px;display: table;margin-left: auto;margin-right: auto;
}
.se-ul li{
    margin-right: 2rem;
    width: 33%;
    /* margin-right: 0rem; */
    display: table-cell;
    padding: 0 0.2083rem;
}
.se-ul li span{
    width: 2rem;
    height: 2rem;
    line-height: 1.958rem;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 50%;
    color: #fff;
    margin-bottom: 0.5417rem;
    font-family: 'Exo 2';
    letter-spacing: -1.2px;
}
.se-ul li p{
    font-size: 1rem ;
    font-weight: 500;
}
.se-ul li:last-child{
    margin-right: 0;
}

.card{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem 1.292rem 1.458rem 1.292rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 11px #dadada;
}
.card-left{
    max-width: 570px;
    margin: 0 auto;
    padding: 1.25rem 1.292rem 1.458rem 1.292rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 11px #dadada;
	float: left;
}
.card-right{
    max-width: 570px;
    margin: 0 auto;
    padding: 1.25rem 1.292rem 1.458rem 1.292rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 11px #dadada;
	float: right;
}
.card .card-body{}
.card .card-body .card-title{
    font-weight: 600;
    font-size: 1.167rem;
    margin: 0;
    letter-spacing: -0.2px;
}

.card-filter{
	position: relative;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 1.25rem 1.292rem;
	background: #f6f6f6;
	border-radius: 10px;
	border: #d8d8d8 1px solid;
	z-index: 9;
}
.card-filter .filter-body{}
.card-filter .filter-body .filter-title{
	/* padding-bottom: 35px; */
}
.card-filter .filter-body .filter-title h3{
	font-weight: 600;
	font-size: 0.8333rem;
	margin: 0;
	display: inline-block;
}
.card-filter .filter-body .filter-title .reset{
    float: right;
    background: none;
    border: none;
    font-size: 0.5rem;
    padding-left: 24px;
    margin-right: 18px;
    margin-top: 4px;
    background-image:url(../images/reset-icon.png);
    background-repeat: no-repeat;
    background-position: left 3px;
}
.card-filter .filter-body .filter-title .reset-btn{
    border-radius: 6px;
    float: right;
    background: none;
    border: none;
    font-size: 0.5833rem;
    width: 60px;
    height: 36px;
    background-color: #d63b47;
    color: #fff;
}
.filter-search{
    position: absolute;
    right: 54px;
    bottom: -24px;
    display: inline-block;
    cursor: pointer;
}

.home-main{
    padding-top: 150px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}
.home-main .datos{
    position: relative;
}
.home-main .datos .da-title{
    font-size: 1.333rem;
    display: block;
    line-height: 1.25;
    color: #fff;
    padding-left: 2.083rem;
    background-image: url(../images/ic_won.png);
    background-repeat: no-repeat;
    margin-left: 0.625rem;
    margin-bottom: 5px;
    background-size: 1.667rem;
}
.home-main .datos .data1{
    display: block;
    height: 100%;
    font-size: 3.625rem;
    line-height: 1;
    color: #fff;
    font-family:'Ticking Timebomb', sans-serif;
    margin-bottom: 8px;
}
.home-main .datos .data2{
    font-size: 1.125rem;
    line-height: 1;
    color: #fff;
    font-family:'Ticking Timebomb', sans-serif;
}
.home-main .datos .data2 img{
    margin-top: -3px;
}
.home-main .datos .data3{
    font-size: 1.125rem;
    line-height: 1;
    color: #fff;
    margin-left: 28px;
    font-family:'Ticking Timebomb', sans-serif;
}
.home-main .datos .data3 img{margin-top: -3px;}
.home-main .data-ul{
    margin-top: 63px;
}
.home-main .data-ul li{color: #fff;margin-bottom: 4px;}
.home-main .data-ul li .du1{
    font-size: 0.6667rem;
}
.home-main .data-ul li .du2{
    font-size: 0.75rem;
    font-family:'Ticking Timebomb', sans-serif;
    padding-left: 26px;
	float: right;
    padding-top: 0.1rem;
	padding-right: 0.5rem;
}
.home-main .data-ul li .du3{
    font-size: 0.6667rem; 
}
.home-main .data-ul li .du4{
    font-size: 0.75rem;
    font-family:'Ticking Timebomb', sans-serif;
    padding-top: 2px;
}
.home-main .data-ul li .du5{
    font-size: 0.75rem;
    font-family:'Ticking Timebomb', sans-serif;
    padding-top: 2px;
	text-align: right;
}

.home-main .data-ul li .du1 img{}
.home-main .data-ul li .du2 img{}
.home-main .data-ul li .du3 img{}
.home-main .data-ul li .du4 img{
    margin-top: -3px;
}
.home-main .data-ul li .du5 img{
    margin-top: -3px;
}

.tags-box{
    width: 100%;
    margin: 3.875rem auto 2.083rem auto;
    text-align: center;
    position: absolute;
    z-index: 1;
}
.tags-box img{
    margin: 0 1rem; margin-top: -1rem;
}

.tags-box .tags1, .tags-box .tags2 { border-radius: 11px; width: 8.333rem; height: 40px; font-size: 0.75rem; color: #fff; z-index: 99999; position: relative; }
.tags-box .tags1{
    display: inline-block;
    position: relative;
	background-color: #ea203f;
    border: #ea203f 1px solid;
    border-radius: 11px;
    width: 8.333rem;
	height: 2rem;
	vertical-align: bottom;
}
.tags-box .tags1 .select2-selection--single { display: block; padding: 0.5em 0 0 0.6em; text-align: left; }
.tags-box .tags1 input{
    border-radius: 11px;
    width: 1.333rem;
    font-size: 0.75rem;
    color: #fff;
    z-index: 99999;
    position: absolute;
    right: 10px;
	top: 5px;
	outline: 0;
}
.tags-box .tags1 .tags-list{
    text-align: left;
    padding: 20px 0 10px 22px;
    background-color: #d63b47;
    position: absolute;
    top: 35px;
    width: 100%;
    z-index: 1;
    display: none;
    border-radius:0 0 10px 10px;
}
.tags-box .tags1 .tags-list p{
    margin-bottom: 13px;
    color: #fff;
    font-size: 0.75rem;
}

.tags-box .tags2{
    display: inline-block;
    position: relative;
	background-color: #334a78;
	border: #334a78 1px solid;
    border-radius: 11px;
    width: 8.333rem;
	height: 2rem;
	vertical-align: bottom;
}
.tags-box .tags2 input{
	border-radius: 11px;
	width: 1.333rem;
	font-size: 0.75rem;
	color: #fff;
	z-index: 99999;
	position: absolute;
    right: 10px;
	top: 5px;
	outline: 0;
}
.tags-box .tags2 .tags-list{
	text-align: left;
	padding: 20px 0 10px 22px;
	background-color: #243b68;
	position: absolute;
	top: 35px;
	width: 100%;
	z-index: 1;
	display: none;
	border-radius:0 0 10px 10px;
}
.tags-box .tags2 .tags-list p{
	margin-bottom: 13px;
    color: #fff;
    font-size: 0.75rem;
}
.tags-box .on .tags-list{ display:block;}

.tags-box .tags1 select {
    background: none;
    border: none;
	outline: 0;
    border-radius: 11px;
    width: 6.333rem;
    padding: 0.375rem 0 0.375rem 0.875rem;
    font-size: 0.75rem;
    color: #fff;
    z-index: 99999;
    position: relative;
	float: left;
	line-height: 1.6em;
}
.tags-box .tags2 select {
    background: none;
    border: none;
	outline: 0;
    border-radius: 11px;
    width: 6.333rem;
    padding: 0.375rem 0 0.375rem 0.875rem;
    font-size: 0.75rem;
    color: #fff;
    z-index: 99999;
    position: relative;
	float: left;
	line-height: 1.6em;
}

.dd-s1{
    padding-right: 0 !important;
    text-align: center;
    padding-left: 0 !important;
    width: 30px;
    text-align: center;
    vertical-align: middle;
    padding-top:1px;
}
.dd-s2{
    width: 100px;
    padding-right: 0 !important;
}

.chart-td { width: 100%; }
.trank { display: inline-block; width: 35px; text-align: left; }
.tmoney { display: inline-block; width: 105px; text-align: right; }
.twon { display: inline-block; width: 10px; text-align: right; }

@media (min-width: 1200px){
	.container{width:100%;}	
}

@media (min-width: 1921px){
	#home-slider{background-size:cover; }
	.section-1{background-size:contain;}
	.section-2{background-size:cover;}
	.section-style4{background-size:cover;}
	.section-history-3{background-size:100% 34.6%;}
	.section-history-5{background-size:cover;}
}



/*============================================================
	Chart.js 
==============================================================*/

@-webkit-keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}@keyframes chartjs-render-animation{from{opacity:0.99}to{opacity:1}}.chartjs-render-monitor{-webkit-animation:chartjs-render-animation 0.001s;animation:chartjs-render-animation 0.001s;}



/*============================================================
	attach-label
==============================================================*/

.compare { }
.attach-label { position: absolute; left: 15px; top: 36px; color: #999; font-size: 0.5rem; letter-spacing: 1px; font-family: 'Roboto', Arial, sans-serif; display: none; }
.attach-label input { padding: 0 0 15px 15px; border: none!important; outline: none!important; box-shadow: none; line-height: 50px; width: 75%; margin: 0 auto; letter-spacing: 1px; }
.attach-label input.input-icon { width: auto; float: right; }


/*============================================================
	ranking table
==============================================================*/

.ranking-list { border: none !important; }
.ranking-list.table>thead>tr>th { text-align: center; height: 1.8rem; line-height: 1rem; vertical-align: middle; padding: 8px; }
.ranking-list.table>tbody>tr>td { text-align: center; vertical-align: middle; }
.ranking-list .name { min-width: 50px; }
.table>thead>tr>th.keycolumn, .table>tbody>tr>td.keycolumn { background: #f8d7d7 !important; }
.description { line-height: 1rem; padding-left: 1em; background: url(../images/notice.png) no-repeat 0px 0.3em; }
.ranking-list .asc { font-weight: 600; color: #22272a; }
.jointable { position: relative; }
.jointable.table>tbody>tr:nth-child(2n) td { background-color: #fff; }
.jointable.table>tbody>tr>td { line-height: 0.8em; }
.jointable.table>tbody>tr>td:first-child:before { position:absolute; left: 0; margin-top: -0.5rem; width: 100%; height: 1px; /* background: #22272a; */ content: ""; display: block;}
.jointable.table>tbody:after { position:absolute; left: 0; width: 100%; height: 1px; background: #22272a; content: ""; display: block;}
.inouttable.table>tbody>tr>td:first-child { background-color: #f0f1f2; font-size: 1.167rem; line-height: 30px; width: 16.66666667%; }
.inouttable.table>tbody>tr>td:nth-child(2n) { text-transform: uppercase; }
.inouttable.table>tbody>tr>td:nth-child(3n) { text-align: center; }
.score-table.table>tbody>tr>td { vertical-align: middle; }
.ranking-list.fixed-top.table>thead>tr>th { width: 140px; position: sticky; top: 0px; background: #fcfcfc; border-bottom: 1px solid #22272a; }
.ranking-list.fixed-top.table>thead>tr>th:first-child { left: 0px !important; z-index: 9; }
.ranking-list.fixed-left.table>thead>tr>td { width: 64px; position: sticky; left: 0px; }

/*============================================================
	select vs select 
==============================================================*/

.select2-container { display: block !important; }
.select2-container--default .select2-selection--single { background: none !important; border: none !important; height: 1.9rem !important; border-radius: 0 !important; padding: 0.5em 0; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #fff !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff !important; line-height: 1.4em !important; text-align: left; padding-right: 0px !important;;  }
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none; }
.select2-container--open .select2-dropdown--below { width: 8.333rem !important; /* background-color: #334a78; border: #334a78 1px solid; border-radius: 11px; color: #fff; */ }
#tableSearch .select2-container { border: 1px solid #ececec; width: auto !important; border-radius: 10px; box-shadow: 0 5px 11px #e2e2e2; }
#tableSearch .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444 !important; line-height: 1.8em !important; }
#tableSearch select { box-shadow: 0 5px 11px #e2e2e2; border: #ececec 1px solid; height: 2.083rem; border-radius: 10px; padding: 6px 0 6px 12px !important; min-width: 60px; }
#photoSearch .select2-container { border: 1px solid #ececec; width: auto !important; border-radius: 10px; background: #fff !important; }
#photoSearch .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444 !important; line-height: 1.8em !important; }
#photoSearch .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #444 !important; line-height: 1.8em !important; }
#photoSearch select { box-shadow: 0 5px 11px #e2e2e2; border: #ececec 1px solid; height: 2.083rem; border-radius: 10px; padding: 6px 0 6px 12px !important; min-width: 60px; }


/*============================================================
	media channel 
==============================================================*/

.login-navi { margin: 24px 0 0; font-size: 13px; padding: 0 24px; text-align: center; }
.login-navi a { padding: 0 8px; }
.sut-caption { font-size: 0.6667rem; margin-top: -0.8rem; }
.step-list { width: 100%; background-color: rgba(27, 36, 45, 0.5); margin-top: 1.292rem; }
.step-list ul { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; }
.step-list ul li { display: inline-block; text-align: center; padding: 1.667rem 0; position: relative; flex: 1; }
.step-list ul li.active { background-color: #d63b47; }
.step-list ul li p { display: inline-block; margin-left: 10px; vertical-align: middle; line-height: 1; padding-top: 0.08333rem; color: #fff; font-size: 1rem; font-weight: 600; text-align: left; }
.step-list ul li p span { display: block; font-size: 0.4583rem; height: 0.7083rem; }
.join-dialog { margin-top: 2rem !important; margin-bottom: 3.333rem !important; }
.join-bg { background-color: #f2f4f5; padding: 2rem 2rem 3.333rem !important; }
.join-content { padding: 1.667rem 1.667rem 1.333rem 1.667rem; box-shadow: 0 5px 11px #e2e2e2;  margin-bottom: 0.8333rem; border-radius: 10px; min-height: 5rem; background-color: #f6f6f6; }
.join-body { position: relative; padding: 15px; }
.join-div { width: 100%; padding: 0 15%; margin-bottom: 0.8333rem; }
	.join-div h3 { font-size: 18px; }
	.join-div .kg-select {vertical-align: baseline; }
	.join-div:after { display: block; width: 100%; margin: 0.25em 0; height: 1px; background: none; content: "";  }
	.address { width: 80%; }
	.join-notice { margin-top: 0.5rem; font-size: 0.6rem; color: #999; }
	.join-paper { color: #22272a; font-size: 0.6667rem; height: 2.083rem; border-radius: 10px; padding: 0.5rem; background: #ddd; text-align: center; }
	.join-input-left { display: inline-block; float: left; text-align: center; color: #999; font-size: 0.6667rem; line-height: 2.083rem; padding: 0; border-radius: 10px 0 0 10px; background: #fff; text-align: center; }
	.join-input-right { display: inline-block; }
	.join-input-right input { border-radius: 0 10px 10px 0 !important; }
	.red { color: #f00; }
	.at { line-height: 2.083rem; }
	.join-div input, .join-div select, .join-div button { margin-bottom: 0.25rem; }
	.join-div:after { content: ""; display: block; width: 100%; clear: both; }
.join-footer { padding: 15px; text-align: right; }
.agreechk { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; }
.agreechk .chk { display: inline-block; width: 20px; height: 20px; margin: -2px 10px 0 0; vertical-align: middle; }
.chk-txt { padding-left: 30px; border-bottom: 1px solid #dadada; line-height: 1.4rem; padding-bottom: 0.5em; margin-bottom: 1.4em; }
.agreechk label { color: #22272a !important; }
.agreechk label i.necessary { font-size: 0.903em; color: #ea203f; padding-left: 0.4em; font-style: normal; }
.agreebox { position: relative; overflow: auto; height: 120px; margin-top: 8px; padding: 12px; background: #fff; border: 1px solid #dadada; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.ag-title { font-size: 1.2em; }
.box-shadow { box-shadow: 0 5px 11px #e2e2e2; }
.attach-btn { background-color: #989fa6; border: none; color: #ffffff; vertical-align: middle; font-size: 0.6667rem; height: 1.8rem; border-radius: 5px; padding: 0rem 0.5rem; margin: 0.25rem 0.25rem 0.3rem; }
.crt-num { width: 100%;  border: none;  border-bottom: #d63b47 1px solid;  font-size: 0.75rem;  color: #d63b47; text-align: center; margin-bottom: 20px; padding: 10px 0; background: none; outline: 0; }
.join-complete { text-align: center; max-width: 340px; margin: 0 auto; }
.join-complete h2 { font-size: 1.2rem; }
.join-complete .approval { opacity: 0.5; }

.guide-line { display: flex; margin-top: 1.45rem; padding: 1rem; box-shadow: 0 5px 11px #e2e2e2; border-radius: 12px; vertical-align: top; min-height: 4rem; }
	.guide-left { text-align: right; }
	.guide-center { text-align: center; }
	.guide-right { text-align: left; }
	.guide-line h3 { margin: 0; padding: 0.3rem 0; font-size: 1rem; }
.period-line { padding: 1rem; vertical-align: top; min-height: 4rem; }
	.period-line h3 { margin: 0; padding: 0.6rem 0; font-size: 0.6667rem; text-align: right; }
	.md-select .btn-period { padding: 6px 18px 6px 18px !important; background: #ddd url(../images/media/period-icon.png) no-repeat center !important; background-size: contain !important; text-indent: -999px; outline: 0 !important; }
.period-line .kg-select { right: 0; }
.period-btn-box { }
.period-search, .media-search { background-color: #d63b47; border: 0; color: #fff; font-size: 0.6667rem; border-radius: 10px; padding: 0.5rem 0.4167rem 0.6rem 0.4167rem; width: 100%; }
.apply-btn-box { margin-top: 1.4rem; }
.btn-apply { background-color: #d63b47; border: 0; color: #fff; font-size: 0.6667rem; border-radius: 10px; padding: 0.3333rem 0.4167rem 0.4167rem 0.4167rem; min-width: 5rem; }
.btn-apply.gray { background-color: #ccc; }

.inline-search { margin-top: 1.45rem; margin-bottom: 1.45rem; padding: 1rem; box-shadow: 0 5px 11px #e2e2e2; border-radius: 12px; vertical-align: top; min-height: 4rem; }
.inline-search.tags-box { position: relative; margin: 0rem auto 2.083rem auto; }
.inline-search.tags-box .tags1, .inline-search.tags-box .tags2 { width: 100%; margin: 0.25rem 0; }
.inline-search.tags-box .tags1 select, .inline-search.tags-box .tags2 select { width: 100%; }
.inline-search:after { content: ""; display: block; width: 100%; clear: both; }

.expand .apply-more-box { display: block !important; margin-top: 1rem; }
.apply-more-box { width: 100%;  }
.card-list:hover .apply-more-list { border-top: 1px solid #e3c7c7; }
.card-list.card-link .card-ul li.expand:hover { background-color: #fff; }
.apply-btn-group { font-size: 0.6rem; line-height: 1rem; padding-top: 0.2rem; padding-left: 1.2rem; padding-right: 1.2rem; }
.apply-btn-group .close, .apply-btn-group .close:hover { background: none; font-size: 0.8rem; color: #000; opacity: 0.2; cursor: no-drop; }
.apply-btn-group button:hover { background: #d63b47; color: #fff; }
.apply-btn-group button.static:hover { background: #ddd; color: #22272a; }
.apply-btn-group input[type=button]:hover { background: #d63b47; color: #fff; }
.apply-btn-group input[type=button].wait:hover { background: #ddd; color: #22272a; cursor: wait; }
.apply-btn-full { display: inline-block; background: #ddd; border: none; border-radius: 4px; width: 99%; text-align: center; }
.apply-btn-half { display: inline-block; background: #ddd; border: none; border-radius: 4px; width: 49%; text-align: center; }
.yellow { background: #ffc648; font-weight: bold; }
.pink { background: #f8d7d7; }
.apply-list { border-top: #22272a 1px solid; }
.apply-list .apply-more-list { border-top: none; border-bottom: 1px solid #ddd; }
.apply-more-list .red a { font-weight: bold; }

.overlay { z-index: 3; position: absolute; top: 0; left: 0; display: block; background: rgba(0,0,0,.3); width: 100%; height: 100%; opacity: 0; -webkit-transition: .3s ease; transition: .3s ease; }
.overlay:before { content: ""; position: absolute; top: 60%; left: 50%; display: inline-block; -webkit-transition: .3s ease; transition: .3s ease; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-size: 32px; line-height: 32px; }
.overlay:before { color: #fff; font-style: normal; font-weight: 400; background: url(../images/media/down-icon.png) no-repeat center; width: 100%; height: 100%; }
.overlay:hover { opacity: 1; }
.overlay:hover:before { top: 50%; }

.down-btn-box { margin-top: 1.4rem; }
.btn-down { background-color: #d63b47; border: 0; color: #fff; font-size: 0.6667rem; border-radius: 10px; padding: 0.3333rem 0.4167rem 0.4167rem 0.4167rem; width: 100%; }
.down-info-box { margin: 20px 0 10px; padding: 15px 20px; background: #f2f4f5; line-height: 1.5; }

.photodown-div .gallery-thumbs .swiper-slide { opacity: 1; cursor: pointer; }

.section-title.news-section { padding-left: 0; padding-top: 1.083rem; margin-bottom: 1.083rem;}
.page-news img { max-width: 100% !important; height: auto !important; }
.alignCenter { display: block; text-align: center; margin: 0 auto; }

.player-sponsor { padding-top: 1rem; width: 100%; } 
.player-sponsor-list { margin-top: 0.5rem; display: inline-block; background-color: #d63b47; border: 0; color: #fff; font-size: 0.6667rem; border-radius: 10px; padding: 0.5rem 0.4167rem 0.6rem 0.4167rem; width: 100%; } 
.player-sponsor-list li { float: left; width: 12.5%; text-align: center; font-size: 0.75rem; }
.player-sponsor-list li a { color: #fff; }
.player-sponsor-list li a.active { color: #ffc648; font-weight: bold; }

/*============================================================
	My Page 
==============================================================*/
.apply-more-list { display: inline-block; width: 100%; border-top: 1px solid #ddd; padding: 0.4rem; line-height: 1.2rem; }
.apply-more-list:hover { background: rgba( 255, 255, 255, 0.1 ); }
.apply-status { font-size: 0.8rem; }
.apply-status span { padding-left: 0.5rem; }
.data-down-box { text-align: center; background-color: #f2f4f5; border-radius: 12px; padding: 1rem; margin: 1rem 0; }
.card-box { margin-bottom: 1rem; }
.apply-card { background: #ccc; border-radius: 12px; padding-bottom: 1rem; }
.apply-card-img { width: 100%; text-align: center; margin: 0 auto; }
.apply-card-img img { width: 60%; }
.apply-card-text { position: absolute; width: 100%; top: 50%; text-align: center; }
.apply-card h3 { font-size: 0.6rem; }
.apply-card h1 { font-size: 3rem; font-weight:900; color: #d63b47; }
.apply-card h1 span { font-weight: normal; }
.btn-apply-card { background-color: #ffc648; color: #000; font-size: 0.6667rem; border: 0; border-radius: 10px; padding: 0.5rem 0.4167rem 0.6rem 0.4167rem; width: 7rem; outline: 0; margin: 2.2rem; }
.card-status { color: #fff; margin: 2.2rem; padding-right: 1rem; }
.copy-url { background: #fafafa url(../images/icon-copyurl.png) no-repeat 12px center; background-size: 1em; border: #d8d8d8 1px solid; color: #22272a; font-size: 0.6667rem; border-radius: 10px; padding: 0.3333rem 0.6rem 0.4167rem 0.6rem; min-width: 4.833rem; padding-left: 2.4em; }

/*============================================================
	FAQs 
==============================================================*/
.faq li { padding: 15px; }
.faq li.q { background: #fff; font-size: 0.75rem; border: 1px #e6e6e6 solid; cursor: pointer; margin-top: 15px; }
.faq li.a { background: #f2f2f2; display: none; }
.faq li.q:before { float: left; display: inline-block; content: " "; background: url(../images/con-faq-q.png) no-repeat center center; background-size: contain; width: 30px; height: 30px; margin: 0 10px; }
.faq li.a:before { float: left; display: inline-block; content: " "; background: url(../images/con-faq-a.png) no-repeat center center; background-size: contain; width: 30px; height: 36px; margin: 0 10px; }


@media only screen and (max-width: 767px) {
	.step-list ul li p { text-align: center;  margin: 0.5rem 0; }
	.step-icon { display: block; text-align: center; margin: 0 auto; }
	.step-icon img { width: 20px; height: auto; }
	.join-div { padding: 0; }
	.guide-left, .guide-right { text-align: center; }
	.period-line { min-height: 7rem; }
	.period-line .kg-select { margin-bottom: 0.8rem;}
	.period-btn-box { text-align: center; }
	.period-search { padding: 0.3rem 0; text-indent: -999px; background: #d63b47 url(../images/icon/search-icon.png) no-repeat center; }
	.media-search { padding: 0.3rem 0; }
	.player-sponsor { padding: 1rem 1rem 0; }
	.player-sponsor-list li { width: 25%; }
	.topNav .tn-ul li{ line-height: 1.4rem !important; }
	#mySidenav ul li a:after { height: 1rem; top: 0.8rem !important; }
}