@import url('slider.css');

/* ------------------------------------------------------------------ */
/* Color
main : 8ebf06   green 1
point : a9c265   green 2
point : ded9bd
point : e0e0de

@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
'Noto Sans KR', 'notokr', sans-serif   'FontAwesome',
/* ------------------------------------------------------------------ */


/* box Section - Main Page
/* ------------------------------------------------------------------ */
#box1 {
    margin: 0px 0 0px;
	padding: 0px 0;
	height: 100%;
	width: 100%;
    /* border-bottom: 1px solid #e5e5e5; */
}
#box1 .box-wrap {
	display: flex;
	align-items: stretch;

}
#box1 .box-wrap .box_container {
    position: relative;
	width: calc(100% / 4);
	margin: 0;
    transition: all .2s ease-in-out;
}
#box1 .box-wrap .box_container:after {
    display: block; content:"";
    width: 1px; height: 100%;
    background: #e5e5e5;
    position: absolute; right:0; top:50%; transform:translateY(-50%);
}
#box1 .box-wrap .box_container:hover:after {display: none;}
#box1 .box-wrap .box_container:hover {background: rgba(142, 191, 6, 1) !important; }
/* #box1 .box-wrap .box_container:nth-child(1) { background: linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(27, 31, 37, 0.7))}
#box1 .box-wrap .box_container:nth-child(2) { background: linear-gradient(45deg, rgba(0, 52, 131,0.7), rgba(0, 52, 131,0.4))}
#box1 .box-wrap .box_container:nth-child(3) { background: linear-gradient(45deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5))}
#box1 .box-wrap .box_container:nth-child(4) { background: linear-gradient(45deg, rgba(44, 93, 147, 0.9), rgba(0, 52, 131, 0.9))} */
#box1 .box-wrap .box_container:nth-child(4) {background: rgba(169, 194, 101, 1) }
#box1 .box-wrap .box_container:nth-child(4) a {color: #fff;}

#box1 .box-wrap .box_container .box-inner {position: relative; height: 100%; padding: 40px 35px 40px; }
#box1 .box-wrap .box_container .box-inner:hover {color: #fff;}
#box1 .box-wrap .box_container .box-inner h4 {font-weight: 700; line-height: 1.2; margin-bottom: 20px; text-transform: uppercase;}
#box1 .box-wrap .box_container .box-inner h6 {font-weight: 700; line-height: 1.2; color: #aaa; }
#box1 .box-wrap .box_container .box-inner p {font-size: 15px; line-height: 1.5;}
@media screen and (max-width: 810px) {
    #box1 { padding: 0px 0px;}
	#box1 .box-wrap { flex-wrap: wrap; margin: 0; padding: 0;}
	#box1 .box-wrap .box_container { width: 50%; margin: 0; min-height: 160px; border-bottom: 1px solid #e5e5e5;}
    #box1 .box-wrap .box_container .box-inner { padding: 30px 20px;}
	#box1 .box-wrap .box_container .box-inner h1 {margin-bottom: 20px; font-size: 20px;}
	#box1 .box-wrap .box_container .box-inner a {right: 0; bottom: 5px;}
}

@media screen and (max-width: 640px) {
	#box1 { padding: 0px 0px;}
	#box1 .box-wrap { flex-wrap: wrap; margin: 0; padding: 0;}
	#box1 .box-wrap .box_container { width: 50%; margin: 0; }
    #box1 .box-wrap .box_container .box-inner { padding: 30px 20px;}
	#box1 .box-wrap .box_container .box-inner h1 {margin-bottom: 20px; font-size: 20px;}
	#box1 .box-wrap .box_container .box-inner a {right: 0; bottom: 5px;}
    #box1 .box-wrap .box_container .box-inner p {font-size: 13px;}
}

/* ------------------------------------------------------------------ */
/* box2 Section - Main Page
/* ------------------------------------------------------------------ */
#box-2 {padding: 100px 0; background: #f8f8f8; border-bottom: 1px solid #eee}
#box-2 .box-wrap {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 0px);
	margin-left: 0px;
}
#box-2 .box_container {
	width: 100%;
	margin: 0 0px;
    padding: 40px 40px 30px;
	/* transition:width .3s ease, transform .3s ease; */
	 -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
 }
#box-2 .box_container:hover {
	transform:translateY(0px);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
 }
 #box-2 .box_container:nth-child(1) {
     background: linear-gradient(rgba(248, 21, 21, 0.7),rgba(237, 28, 36, 0.7)), url("../images/quick_bg02.jpg") no-repeat 50% 50% / cover;
 }
#box-2 .box_container:nth-child(2) {
    padding: 40px 40px;
	background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(31, 38, 34, 0.9)), url("../images/quick_bg01.jpg") no-repeat 50% 50% / cover;
}
#box-2 .box_container:nth-child(2) .box-inner h1 {margin-bottom: 10px; font-size: 28px;}


#box-2 .box_container .box-inner {position: relative; height: 100%; color: #fff;}
#box-2 .box_container .box-inner h1 {font-size: 40px; font-weight: 300; line-height: 1.2; text-transform: uppercase;}
#box-2 .box_container .box-inner h1 span {font-weight: 700;}
#box-2 .box_container .box-inner h3 {font-size: 20px; font-weight: 700; line-height: 1.2;}
#box-2 .box_container .box-inner .phone {display: block; font-size: 36px; font-weight: 700; line-height: 1;}
#box-2 .box_container .box-inner p {font-size: 18px;}

#box-2 .notice {margin-top: 20px;}
#box-2 .notice h4 {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ccc;}
/* #box-2 .box_container .box-inner a {position: absolute; bottom: 0; font-size: 14px; font-weight: 700; color: #fff; border-bottom: 2px solid #fff;margin-left: 5px;} */
@media screen and (max-width: 1280px) {
	#box-2 .box_container {float: left; width: calc(50% - 20px); padding: 40px 35px 25px 35px;}
	#box-2 .box_container .box-inner h1 {font-size: 36px;}
	#box-2 .box_container .box-inner h3 {font-size: 24px;}
}
@media screen and (max-width: 810px) {
	#box-2 {padding: 0 5px;}
	#box-2 .box-wrap {flex-wrap: wrap; width: 100%; margin-left: 0;}
	#box-2 .box_container {float: left; width: calc(50% - 10px); margin: 5px; }
}

@media screen and (max-width: 640px) {
	#box-2 { flex-direction: column; padding: 50px 10px 0;}
    #box-2 .notice {margin-bottom: 30px;}
	#box-2 .box-wrap {}
	#box-2 .box_container { width: 100%; min-height: auto; margin: 5px 0; padding: 40px 25px 25px !important;}
	#box-2 .box_container .box-inner h1 {margin-bottom: 30px; font-size: 24px !important;}
    #box-2 .box_container .box-inner .phone {font-size: 24px;}
	#box-2 .box_container .box-inner a {right: 0; bottom: 5px;}
}



/* ------------------------------------------------------------------ */
/* box2 Section - Main Page
/* ------------------------------------------------------------------ */
#product {
    display: flex;
    flex-wrap: wrap;
    background: #a9c265;
    overflow: hidden;
}

#product .board-ttl {
    width: calc(50% - 240px);
    padding: 0px 0; background: rgba(255, 255, 255, 0.0);
}
#product .board-ttl .inner-wrap { width: 100%; padding:80px 60px; color: #fff; text-align: right; }
#product .board-ttl .inner-wrap h2 {margin-bottom: 30px; font-weight: 900;}
#product .half-bg {
    width: calc(50% + 240px);
    height: 100%;

}

body:before {
    display: none; content: '';
    position: absolute;s
    top: 0;
    left: 50%;
    width: 100%;
    height: 100vh;
    transform: translateX(-320px);
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(3, 3, 27, 0.5)), url('../images/board-bg.jpg') no-repeat 50% 50% / cover;
}
@media screen and (max-width: 1080px) {
    #product {margin-bottom: 0px; padding: 0; }
    #product .board-ttl {width: 100%;}
    #product .board-ttl .inner-wrap {padding: 60px 0; text-align: center; }
    #product .half-bg {width: 100%;}
}
@media screen and (max-width: 480px) {
    #product .board-ttl .inner-wrap {padding: 40px 0 40px; }
}
/* ------------------------------------------------------------------ */
/* Output Section - Main Page
/* ------------------------------------------------------------------ */
.portfolio h3 {margin-bottom: 20px;}
#output {position: relative; padding: 100px 0; background: #eee; overflow: hidden;}
#output:before {
    display: block; content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #e5e5e5;
}
#output .output-wrap h6 {
	position: relative;
	margin-bottom: 20px; font-weight: 500; color: #666; text-transform: uppercase;
	border-bottom: 0px solid #ccc;
}
#output .output-wrap h6 .more {position: absolute;right: 0; }
#output .output-wrap h6 .more a {padding: 5px; font-size: 24px; font-weight: 300;}
#output .output-wrap  hr {
	border: solid #666;
	border-width: 3px 0 0;
	width: 100%;
	margin: 5px 0 10px;
	height: 0;
	clear: both;
	text-align: left;
}

#output .output-wrap:hover hr {border-color: #444; width: 100%; text-align: left;}
#output .output-wrap.contact .tel { margin-bottom: 10px !important; font-size: 36px; color: #666; line-height: 1;letter-spacing: 0em; font-weight: 700;}
#output .output-wrap.contact ul li {margin-bottom: 5px; font-size: 13px;}
#output .output-wrap.contact .button {width: 100%; margin-top: 20px; text-align: center;}

/* Board Output */
#output .output-wrap table.board_out {}
#output .output-wrap table.board_output {}
#output .output-wrap table.board_output tbody {}
#output .output-wrap table.board_output tbody tr td {}
#output .output-wrap table.board_output tbody tr td:nth-child(1) img {display: none;} /* dot img */
#output .output-wrap table.board_output tbody tr td:nth-child(3) {color: #aaa; line-height: 30px;} /* date */
#output .output-wrap table.board_output tbody tr td a {line-height: 30px;}

#output .output-wrap table.board_output tbody .board_output_1_tr {line-height: 30px;}
#output .output-wrap table.board_output .board_output_1_tr .bd_out1 {}
#output .output-wrap table.board_output .board_output_1_tr .bd_out1 a {}
#output .output-wrap table.board_output .board_output_1_tr .bd_out1 a:hover {}


@media screen and (max-width: 810px) {
    #output {padding: 60px 10px; }
	#output .output-wrap {margin-bottom: 30px;}
    #output .output-wrap .board_out {margin-bottom: 30px;}
    #output .output-box:last-child {margin-bottom: 0;}

}
@media screen and (max-width: 640px) {
    #output {padding: 60px 20px; }
    #output:before {display: none;}
}