/***************************************
Template Name: Green Fair
Author: Md Foysal Ahamed
Created: July 05 2016
Version: 1.2
****************************************/


/*CSS Style Structure
1. General Or Universal code,
2. Import Google's Fonts,
3. Header,
4. Slider,
5. Welcome,
6. Volunteer,
7. Portfolio,
8. Achivment,
9. Event,
10. Testimonial,
11. Latest Blog,
12. Purches,
13. Contact,
14. Footer.
*/


/*
font-family: 'Roboto Slab', serif;
*/

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
* { font-family: 'Spoqa Han Sans Neo', 'sans-serif' !important; }
@font-face {
    font-family: 'Cafe24Shiningstar';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSansKR-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
    font-family: 'GangwonEdu_OTFBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.serif {font-family: 'Cafe24Shiningstar' !important;}

/*UNIVERSAL CODE*/

* {
    margin: 0;
    padding: 0;
}
.alignleft {
    float: left;
    margin-right: 15px
}
.alignright {
    float: right;
    margin-left: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto
}
.floatleft {
    float: left
}
.floatright {
    float: right
}
.fix {
    overflow: hidden
}
.clear {
    clear: both
}
.container {
    transition: all 0.9s ease 0s;
    -webkit-transition: all 0.9s ease 0s;
    -moz-transition: all 0.9s ease 0s;
    -o-transition: all 0.9s ease 0s;
    -ms-transition: all 0.9s ease 0s;
}
.pt-1 {
	padding-top:1rem;
}
.pt-2 {
	padding-top:2rem;
}
.pt-3 {
	padding-top:3rem;
}
.pt-4 {
	padding-top:4rem;
}
.pr-0 {
	padding-right:0
}
.pl-0 {
	padding-left:0
}
.pl-1 {
	padding-left:1rem
}
.pl-2 {
	padding-left:2rem
}
.pl-3 {
	padding-left:3rem
}
.pl-4 {
	padding-left:4rem
}
.pl-5 {
	padding-left:5rem
}
.pb-1 {
	padding-bottom:1rem;
}
.pb-2 {
	padding-bottom:2rem;
}
.pb-3 {
	padding-bottom:3rem;
}
.pb-4 {
	padding-bottom:4rem;
}
.word-keep {
	word-break:keep-all
}

.font-18 { font-size:18px}
.font-24 { font-size:24px}
.font-30 { font-size:30px}


.flex-box {display:flex;}

.ellipsis {text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a,
a:hover,
a:focus,
a:visited,
a:hover {
    text-decoration: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
p {
    padding: 0;
    margin: 0;
}
img {
    max-width: 100%;
    height: auto;
}
html {
    height: 100%
}
body {
	max-width:100vw;
	overflow-x:hidden;
}

/*Remove chrome Input Field’s Unwanted Yellow Background Color*/

input: -webkit-autofill,
input: -webkit-autofill:hover,
input: -webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px white inset !important;
}

/*Input focus color removed*/

:focus {
    outline: -webkit-focus-ring-color auto 0px;
}

/*Bootstrap Form Control Focus*/

.form-control:focus {
    border-color: #fff;
    border: 0px;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/***************************/

.zero_mp {
    padding: 0;
    margin: 0;
}
.margin_btm {
    margin-bottom: 0px !important;
}
.sections{
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}
.min-spacing{
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}
/***********************************************/


/*header*/

#header .header_menu {
    min-height: 110px;
    z-index: 9999
}
#header .header_menu .navbar {
    border: 0px solid transparent;
}
#header .header_menu .custom_navbar-brand {
    padding:33px 0;
	padding-left: 0;
	text-align:left;
}
#header .header_menu .custom_navbar-brand img:first-child {
	padding-right:15px
}
#header .header_menu .navbar-default {
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);
}
#header .header_menu .navbar-default .navbar-nav>.active>a,
#header .header_menu .navbar-default .navbar-nav>.active>a:focus,
#header .header_menu .navbar-default .navbar-nav>.active>a:hover {
    background-color: rgba(255, 255, 255, 0);
}
#header .header_menu .main_menu {
    padding-top: 23px;
}
#header .header_menu ul.main_menu > li > a {
    color: #666;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 400;
	line-height:31px;
	min-width:165px;
	font-family: 'GmarketSansMedium' !important;
}
#header .header_menu ul.main_menu li a .on_show {
    display:none;
	font-family: 'GmarketSansMedium' !important;
	color: #555;
}
#header .header_menu ul.main_menu li a:hover .on_hide{
    display:none;
	font-family: 'GmarketSansMedium' !important;
}
#header .header_menu ul.main_menu li a:hover .on_show{
    display:block
}
#header .header_menu ul.main_menu li.active a {
    color: #555;
}
#header .header_menu ul.main_menu li,
#header .header_menu ul.main_menu li.active a {
    display: block;
    position: relative;
}

#header .header_menu ul.main_menu li .dropdown-menu li ul {
	display:none;
	
} 
#header .header_menu ul.main_menu li .dropdown-menu li a {
	font-size:16px;
	font-family: 'GmarketSansMedium' !important;
}



/*Slider*/
#slider { min-height: 490px;	position:relative}
#slider .carousel-caption { top: 15%}
#slider .slider_text { padding-bottom: 13%;  padding-bottom: 8%;}
#slider .slider_text h2 {
    font-size: 60px;
    padding: 10px 0;
    font-weight: 600;
	line-height:1.35;
	margin-bottom:30px
}
#slider .slider_text h3 {
    font-size: 45px;
    color: #fff;
	line-height:1.35;
}
#slider .slider_text p {
    font-size: 20px;
    padding-bottom: 60px;
    font-weight: 400;
	line-height:1.35;
}
#slider .slider_text a.custom_btn {
    font-size: 18px;
    color: #fff;
    text-align:left;
	display:block;
	padding:0px 25px 10px 0px;
    background: url(/img/common/icon_arrow_lg.png) no-repeat left bottom;
    margin-top: 20px;
    font-weight: 400;
	position:relative;
	margin-left:40px;
	outline:none;
}
#slider .slider_text a.custom_btn span {
	position:absolute;
	display:block;
	width:95px;
	height:95px;
	transform:translate(-50%,-35%);
	left:0;
	top:0;
	background:rgba(29,89,129,0.85);
	z-index:-1;
	border-radius:50%;
}

#slider .slider_text h3 {
    font-size: 45px;
    padding: 10px 0;
    font-weight: normal;
}
#slider .slider_overlay {
    position: relative;width: 100%
}
#slider .slider_overlay:after {
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.3);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#slider .item img { width: 100%}
/*Slider Fade In*/

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}

/*Welcome Section*/
#welcome {
    min-height: 350px;
    background: #fff;
    padding: 80px 0;
}
.wel_header {
    color: #191919;
    padding-top: 0;
}
.fw-heading.fw-heading-center {
    padding-bottom: 40px;

}
.wel_header h2 {
    font-size: 36px;
    font-weight: 700;
    padding-bottom: 25px;
    color: #222222;
}
.wel_header p {
    font-size: 22px;
	color:#666;
	font-weight:400;
}

#welcome .img-wrap {
	height:490px;
	background:url('/img/sec2_1.png') no-repeat center center;
}
#welcome .single_item {
    padding-top: 30px;
    text-align: center;
}
#welcome .welcome_icon {
    width: 100px;
    height: 100px;
    text-align: center;
    margin: 0 auto;
    transition: .7s;
}
#welcome .welcome_icon i {
    margin-top: 25%;
    font-size: 50px;
    transition: .7s;
}
#welcome .item_list h4 {
    padding: 20px;
    font-weight: 700;
    font-size: 26px;
    color: #191919;
    transition: 0.7s;
}
#welcome .item_list p {
    font-size: 18px;
    color: #666;
}


/*Portfolio*/

#portfolio {
    min-height: 780px;
    padding: 80px 0;
}

#portfolio .portfolio_title h2 {
    font-size: 36px;
    font-weight: 700;
    padding-bottom: 15px;
    color: #222222;
}
#portfolio .portfolio_title p {
    font-size: 16px;
    color: #393939;
    padding-bottom: 25px;
    padding-top: 0;
}

/*Customise Portfolio*/

#portfolio ul {
    display:flex;
	justify-content: space-between;
}
#portfolio ul li {
	margin:0 5px;
}
#portfolio ul li .img-wrap {
	position:relative;
}
#portfolio ul li .overlay {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.55);
	transition:0.3s

}
#portfolio ul li.down {
	margin-top:50px;
}
#portfolio ul li a p {
	font-size:26px; 
	font-weight:800;
	color:#191919;
	margin-top:15px;
}

#portfolio ul li a p img {
	padding-left:10px
}
#portfolio ul li p .on_show, #portfolio ul li p img {
	display:none;
}
#portfolio ul li:hover .on_show , #portfolio ul li:hover p img  {
	display:inline-block
}
#portfolio ul li:hover .on_hide {
	display:none
}
#portfolio ul li:hover .overlay {
	opacity:0;
}



section#news {
    background: url('/img/sec4_bg.png') no-repeat scroll top center / cover;
    color: #fff;
}
section#news .max-row {
	max-width:1250px;
	margin:0 auto;
}
#news .border-left {
	border-left:1px solid rgba(255,255,255,0.5)
}
.counter_img_overlay {
    position: relative;
    padding: 80px 0;
    text-align: center;
    width: 100%;
    height: 100%;
}
.news_header h2 {
    font-size: 45px;
    font-weight: 700;
    padding-bottom: 10px;
}
.news_header p {
    font-size: 20px;
    padding-bottom: 60px;
    padding-top: 15px;
}
.news_text {
    color: #fff;
    font-weight: 700;
}
.sigle_news_item {
    padding-top: 20px;
    padding-bottom: 0px;
}
.sigle_news_item .bod_img {height:180px; width:100%; overflow:hidden; margin-bottom:10px}
.sigle_news_item .bod_img img {height:100%; min-width:100%; transition:0.5s}
.sigle_news_item:hover .bod_img img {transform:scale(1.1)}
.sigle_news_item .bod_subject {
	font-size:16px;
	font-weight:600;
	margin-bottom: 20px;
}
.sigle_news_item .bod_subject.bod1 {
	color:#feaf3f;
}
.sigle_news_item .bod_subject.bod2 {
	color:#3f99fe;
}
.bod_cont a {
    font-size: 20px;
	color:#fff;
    font-weight: 600;

	margin-bottom:30px;
}
.bod_cont .bod_title b{
	overflow: hidden;
    margin-top: 5px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em;

}
.sigle_news_item .cont {
	overflow: hidden;
    margin: 50px 0 60px;
    font-size: 18px;
    color: #fff;
	font-weight:400;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.5;
}
.bod_cont span {
    font-size: 16px;
	color:#aaa;
    padding-bottom: 10px;
    font-weight: 600;
	display:block;
	margin-bottom:30px;
}
.bod_cont button {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
	text-decoration:underline;
	cursor:pointer;
	border:0;
	background:none;
	display:block;
}


/*Footer*/

#footer {
    min-height: 100px;
    background: #f5f5f5;
    color: #b1b1b1;
}
#footer .copyright {
    padding: 45px 0; 
    font-size: 16px;
}
#footer .footer_menu {
    text-align: center;
	padding-top:40px;
}
#footer .footer_menu li {
	display: inline-block;
	margin:0 5px
}
#footer .footer_menu li a {
	color:#333;
	font-weight:500;
	font-size:16px
}
#footer .copyright p {
    text-align: center;
	color:#b1b1b1;
	margin: 10px;
}
#footer .copyright p span {
	padding:0 5px
}



/*Back to Top*/

#back-to-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: rgba(84, 225, 0, 0.18);
    color: #ffffff;
    cursor: pointer;
    border: 0;
    text-decoration: none;
    transition: all 0.5s ease;
    opacity: 0;
    display: none;
    background: #43a906;
}
#back-to-top:hover {
    color: #fff;
    border-radius: 50%;
}
#back-to-top.show {
    opacity: 1;
}

.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    background: #fff;
    padding-top:0px;
}



/**/

.section-wraper {
    position: relative;
}
.section-edit {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 1;
}
.section-abc {
    background: rgba(255, 255, 255, 0.68);
    padding: 2px 5px;
    font-size: 12px;
    display:none;
}
.section-edit:hover .section-abc{
    display:inline;
}
.section-edit .post-edit-link {
    margin: 10px 0;
    padding: 2px 12px;
}
.section-edit .post-edit-link {
    margin: 3px 0;
    padding: 2px 12px;
    font-size: 12px;
    line-height: 1.45;
}
.section-edit .post-edit-link {
    margin: 10px 0;
    display: inline-block;
    background: #E85757 ;
    color: #fff!important;
    padding: 2px 12px;
    border-radius: 3px;
}
   margin: 0 auto;
}

#slider .slick-dots {
    bottom: 70px;
}

ul.entry-meta {
    text-align: left;
}
.btn-primmary{
    background-color: #43a906;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 700;
}
.btn.focus, .btn:focus, .btn:hover {
    color: #ffffff;
}
#commentform #comment {
    padding-left: 10px;
    margin-top: 10px;
}
.widget_search .search-form input[type="submit"], .widget_search input[type="submit"] {
    font-weight: 700;
}
.widget_search .search-form input[type="search"], .widget_search input[type="search"] {
    padding: 0 40px;
}
.main-content.blog-w.rap,.main-content.container.blog-wrap.single-blog {
    margin-top: 80px;
}



/*SUB PAGE*/


#subvisual {width:100; height:435px; background:url('/img/sub1.png') no-repeat center center; background-size:cover; position:relative;}
#subvisual .sub_title {position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align:center}
#subvisual .sub_title p {font-size:20px; font-weight:400;}
#subvisual .sub_title h2 {font-size:60px; font-weight:800;}

.page_container {margin:0 auto; width:1250px}

#lnb {transform:translate(0,-100%)}
#lnb ul {display:flex; flex-wrap:nowrap; justify-content:center; width:100%;}
#lnb ul li {flex:1}
#lnb ul li a {display:block; text-align:center; color:#fff; font-size:20px; height:80px; line-height:80px; background:#1d5981}
#lnb ul li.active a {color:#1d5981; background:#fff}


#wrap {position:relative; padding:40px 0 100px; background:url('/img/sub_bg.png') no-repeat center bottom; background-size:100%}
.page_title {margin-bottom:40px; font-weight:900; text-align:center; letter-spacing:5px; }
.page_title span {display:inline-block; padding-bottom:10px; border-bottom:3px solid #191919; }
.section_title {font-weight:900; font-size:30px; border-bottom:1px solid #191919; padding:10px;}


.pagination {margin:60px auto 100px; display:block !important}
.pagination ul {font-size: 0; text-align: center; line-height: 1;}
.pagination li {display: inline-block; width: auto; min-width: 28px; height: 28px; box-sizing: border-box; border: 1px solid #cccdd1; padding: 0 5px; margin: 0 5px;}
.pagination li a {line-height: 26px;display: block;font-size: 12px;color:#888}
.pagination li.on {background:#1d5981}
.pagination li.on a {color:#fff}

.bod_search_box {float: right; text-align: right; width: 620px; border: 0; padding: 0; background-color: transparent; margin:0px 0 40px}
.bod_search_inner {margin: 0; max-width: none; position:relative;}
.bod_search_box .search_select {float: left; width: 115px; height: 45px; border: 1px solid #d9d9d9; margin-right: 5px; background-color: #fff; font-size: 16px; color: #333; letter-spacing: -0.3px;}
.bod_search_box .search_word {float: left; width: calc(100% - 120px);height: 45px; border: 1px solid #d9d9d9; padding: 0; text-indent: 10px; color: #333; font-size: 16px; letter-spacing: -0.3px; border-radius: 0;}
.bod_search_box .search_btn {position: absolute; top: 0px;right: 0px;margin: 0px;border: 0;width: 107px;height: 45px;font-size: 16px;letter-spacing: -0.5px;background: #333;color: #fff;cursor: pointer;vertical-align: top;}



/*********************
* popup * 
*********************/

/* layerpop */
#layerpopWrap {z-index:9999999;position:fixed;margin:0 auto;width:100%;height:0;max-width:100%; top:150px; left:100px; text-align:left; /*transform: translateX(-50%);-webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);-moz-transform: translateX(-50%);*/ line-height:0; font-size:0; background:rgba(0,0,0,1)}
#layerpopWrap h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.layerpopup {border:1px solid #000;background:#fff; display:none; margin:0 2px 2px}
.layerpopCont { width:auto; height:auto; overflow-y:auto; overflow-x:hidden; line-height:1.0}
.layerpopCont img {max-width:100%;}
.layerpopCont_btn {font-size:1.0rem; padding:0;background:#393B4D;color:#fff;text-align:center}
.layerpopCont_btn button { min-height:40px; border:none; font-size:14px; display:inline-block; float:left; cursor: pointer; border:0; outline:0}
.layerpopCont_btn button.btn_cont {width:70%; background:#393b4d; color:#fff; font-size:12px}
.layerpopCont_btn button.btn_close {width:30%; background:#151515; color:#fff}
@media (max-width: 1250px) {
   .layerpopup { width:auto; margin:0 10px 10px}
}
@media (max-width: 768.98px) { 
   .layerpopup { width:auto; }
}