@charset "utf-8";
/* 메인 롤링 이미지 */
#mainSlider {position:relative; margin-top:110px; overflow:hidden}
@media screen and (max-width:1024px) {
	#mainSlider {margin-top:70px;}
}
#mainSlider ul.imgList {position:relative; width:1000%}
#mainSlider ul.imgList li {position:relative; float:left; min-width:100vw; height:600px; background-size:cover !important; overflow:hidden}

#mainSlider ul.imgList li.item1 {background:url(../img/main/pc_banner1.png) center top no-repeat}
@media screen and (max-width:1024px) {
	#mainSlider ul.imgList {display:none}
}
#mainSlider ul.imgList li img {position:absolute; display:block; top:0; left:0; width:100%; height:100%}
#mainSlider ul.imgList li .caption {position:relative; top:20%; max-width:1400px; margin:0 auto; padding:0 50px; z-index:20}
#mainSlider ul.imgList li .caption h2 {font-size:56px; font-weight:600; color:#000; line-height:1.1; max-width:75%}
#mainSlider ul.imgList li .caption h2:after {display:block; width:60px; height:3px; content:''; margin:30px 0; background:#000}
#mainSlider ul.imgList li .caption p {font-size:15px; color:#000; max-width:75%}
#mainSlider ul.imgList li .caption a.btn_main {position:relative; display:inline-block; margin-top:60px; padding:10px 35px; font-size:15px; font-weight:600; color:#000; border:2px solid #000}
#mainSlider ul.imgList li .caption a.btn_main span {position:relative; transition:all .3s ease; z-index:10}
#mainSlider ul.imgList li .caption a.btn_main:before {position:absolute; top:0; left:0; width:100%; height:0; content:''; background:#000; transition:all .3s ease}
#mainSlider ul.imgList li .caption a.btn_main:hover:before {height:100%}
#mainSlider ul.imgList li .caption a.btn_main:hover span {color:#fff}
#mainSlider ul.imgList li .caption.white h2 {color:#fff !important}
#mainSlider ul.imgList li .caption.white h2:after {background:#fff !important}
#mainSlider ul.imgList li .caption.white p {color:#fff !important}
#mainSlider ul.imgList li .caption.white a.btn_main {color:#fff; border:2px solid #fff}
#mainSlider ul.imgList li .caption.white a.btn_main:before {background:#fff}
#mainSlider ul.imgList li .caption.white a.btn_main:hover span {color:#000}
#mainSlider ul.pagination {display:none; position:absolute; bottom:30px; left:0; width:100%; text-align:center; z-index:50}
#mainSlider ul.pagination li {display:inline-block; width:16px; height:16px; margin:0 3px; border:2px solid #fff; border-radius:50%; transition:all .3s ease; cursor:pointer}
#mainSlider ul.pagination li.active {background:#fff}
#mainSlider a.control {position:absolute; width:40px; height:50px; top:50%; margin-top:-25px; text-align:center; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .2s ease; z-index:50}
#mainSlider a.control:hover {opacity:.7 !important; filter:alpha(opacity='70') !important}
#mainSlider a.control i {color:#fff; line-height:50px}
#mainSlider a.control.prev {left:30px}
#mainSlider a.control.prev:hover {left:25px}
#mainSlider a.control.next {right:30px}
#mainSlider a.control.next:hover {right:25px}
/* 메인 섹션 */
#container .mainSection {position:relative; padding:30px 0}
#container .mainSection .inner {position:relative; max-width:1400px; margin:0 auto; padding:0 50px}
#container .mainSection .inner:after {clear:both; display:block; content:''}
/*#container .mainSection .inner .title {text-align:center; margin-bottom:30px}*/
#container .mainSection .inner .title h2 {font-size:36px; font-weight:300; color:#555; line-height:1}
#container .mainSection .inner .title h2:after {display:block; width:40px; height:1px; content:''; margin:20px auto 40px auto; background:#999}
#container .popup{position:absolute;top:100px;left:100px;z-index:100;background:#fff}
#container .popup .todayclose{float:left;margin-left:20px;padding-bottom:5px;cursor:pointer}
#container .popup .close{float:right;margin-right:20px;padding-bottom:5px;cursor:pointer}
/* 상단 섹션 */
.mainSection.section1 .inner .latestBox {float:left; width:30%; margin-right:3%}
.mainSection.section1 .inner > div .tit {text-align:left; margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid #eee; overflow:hidden}
.mainSection.section1 .inner > div .tit h3 {float:left; font-size:16px; color:#444; line-height:1}
.mainSection.section1 .inner .latestBox > .board_output td {line-height:2; color:#ccc}
.mainSection.section1 .inner .latestBox > .board_output td a {color:#666}
.mainSection.section1 .inner .latestBox > .board_output td a:hover {text-decoration:none}
.mainSection.section1 .inner .photoBox {display:inline-block;float:left; width:44%}
.mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td {float:left; width:30%; height:157px; margin-left:5%; overflow:hidden}
.mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td:first-child {margin-left:0}
.mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td table {width:100% !important}
.mainSection.section1 .inner .photoBox > .tbl_photo > tbody img {display:block; width:100% !important; height:auto !important}
.mainSection.section1 .inner .customerBox {float:right; width:20%}
.mainSection.section1 .inner .customerBox .info h4 {font-size:28px; color:#444; line-height:1.2; margin-bottom:10px}
.mainSection.section1 .inner .customerBox .info h4 a {font-size:28px !important; color:#444}
.mainSection.section1 .inner .customerBox .info p {color:#777; margin-bottom:20px}
.mainSection.section1 .inner .customerBox .info p span {font-weight:600}
.mainSection.section1 .inner .customerBox .info i {font-weight:normal; color:#aaa; margin-right:8px}
.mainSection.section1 .inner .customerBox .info a.btnContact {display:block; width:100%; height:50px; font-size:inherit; color:#fff; text-align:center; line-height:46px; border:2px solid #000; background:#000; transition:all .3s ease}
.mainSection.section1 .inner .customerBox .info a.btnContact:hover {color:#000; background:#fff}

/* 하단 섹션 */
.mainSection.section2 {padding-top:0 !important}
.mainSection.section2:before {display:block; max-width:1300px; margin:0 auto 30px auto; content:''; border-top:1px solid #ececec}
.mainSection.section2 .inner .imgArea {float:left; width:30%; height:300px; margin-right:3%}
.mainSection.section2 .inner .desc {float:left; width:44%}
.mainSection.section2 .inner .desc span {font-size:15px; color:#999; letter-spacing:2px}
.mainSection.section2 .inner .desc h2 {font-size:34px; font-weight:600; color:#444; line-height:1; margin:10px 0 30px 0}
.mainSection.section2 .inner .desc p {margin-bottom:30px; text-align:justify}
.mainSection.section2 .inner .desc a.btn_main {display:inline-block; padding:6px 30px; color:#444; border:2px solid #ececec; border-radius:4px; background:#fff; transition:all .3s ease}
.mainSection.section2 .inner .desc a.btn_main:hover {color:#fff; border-color:#000; background:#000}
.mainSection.section2 .inner .rBanner {float:right; width:20%; height:300px}
.mainSection.section2 .inner .rBanner img {display:block; width:100%; height:100%}
/* 하단 좌측 페이드 슬라이더 */
#fadeSlider {position:relative}
#fadeSlider > ul {position:relative; overflow:hidden}
#fadeSlider > ul > li {position:absolute; top:0; left:0; z-index:5}
#fadeSlider > ul > li.active {position:relative; z-index:30}
#fadeSlider > ul > li > img {width:100%; height:100%}
#fadeSlider > ol.indicator {position:absolute; top:30px; right:30px; z-index:50}
#fadeSlider > ol.indicator > li {display:inline-block; width:14px; height:14px; margin:0 3px; border-radius:50%; border:2px solid #000; cursor:pointer; transition:all .3s ease}
#fadeSlider > ol.indicator > li.on {background:#000}
/* 미디어 쿼리 */
@media screen and (max-width:1024px) {
 /* 메인 롤링 이미지 */
 #mainSlider ul.imgList li {height:500px}
 #mainSlider ul.imgList li .caption h2 {font-size:38px}
 #mainSlider ul.imgList li .caption p {font-size:13px}
 #mainSlider ul.imgList li .caption a.btn {font-size:13px; margin-top:40px}
 /* 상단 섹션 */
 .mainSection.section1 .inner .latestBox {float:none; width:100%; margin-bottom:30px}
 .mainSection.section1 .inner .photoBox {float:none; width:100%; margin-bottom:30px}
 .mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td {width:32%; margin-left:2%; height:auto}
 .mainSection.section1 .inner .customerBox {float:none; width:100%}
 /* 하단 섹션 */
 .mainSection.section2 .inner .imgArea {float:none; width:100%; height:auto; margin:0 0 30px 0}
 .mainSection.section2 .inner .desc {float:none; width:100%; margin-bottom:50px}
 .mainSection.section2 .inner .rBanner {float:none; width:60%; height:auto; margin:0 auto}
}
@media screen and (max-width:640px) {
 /* 메인 롤링 이미지 */
 #mainSlider ul.imgList li {height:430px}
 #mainSlider ul.imgList li img {width:auto !important}
 #mainSlider ul.imgList li .caption {top:15%; padding:0 20px}
 #mainSlider ul.imgList li .caption h2 {font-size:24px; max-width:100%}
 #mainSlider ul.imgList li .caption h2:after {margin:15px 0; width:40px; height:1px}
 #mainSlider ul.imgList li .caption p {font-size:12px; max-width:100%}
 #mainSlider ul.imgList li .caption a.btn {font-size:12px; padding:8px 25px}
 /* 메인 섹션 */
 #container .mainSection .inner {padding:0 20px}
 #container .mainSection .inner .title h2 {font-size:24px; font-weight:500}
 /* 상단 섹션 */
 .mainSection.section1 .inner .latestBox > .board_output td {font-size:12px}
 .mainSection.section1 .inner .latestBox > .board_output td a {font-size:12px}
 .mainSection.section1 .inner .photoBox ul li {width:32%; height:120px}
 /* 하단 섹션 */
 .mainSection.section2 .inner span {font-size:11px !important}
 .mainSection.section2 .inner .desc h2 {font-size:24px; margin:0 0 15px 0}
 .mainSection.section2 .inner .desc a.btn {width:100%; text-align:center}
 .mainSection.section2 .inner .rBanner {width:100%}
}

.text_red{
	color:#ff1a1a
}
.none{
	display:none;
}
.hand{
	cursor:pointer;
}

#banner_page{
	position:absolute;	
	top:90%;
	left:50%;
	transform:translate(-50%,0);
}
#banner_page span{
	font-size:20px;
	color: #fff;
    position: relative;
    top: -10px;
}
#banner_page i{
	color: #fff;
}
#banner_page i.fa-angle-left{
    position: relative;
    left: -30px;
	cursor:pointer;
}
#banner_page i.fa-angle-right{
    position: relative;
    right: -30px;
	cursor:pointer;
}
.banner{
	position:relative
}
.banner .banner_text{
	position: absolute;
	top: 50%;
	color: #fff;
	left:50%;
	transform:translate(-50%,-50%);
	font-family:'agotic';
    width: 85%;
    text-align: center;
}
.banner .banner_text .text1{
	font-size: 45px;
	color: #fff;
	line-height: 78px;
}
.banner .banner_text .text2{
	font-size: 20px;
	color: #fff;
	line-height: 15px;
}
.banner .banner_text .text3{
	color: #DDD;
	font-size: 15px;
	line-height:31px;
}

#gnb_wrap .menu_wrap{
	height:40px;
}
#gnb_wrap .menu_wrap ul{
    height: 50px;
    display: inline-block;
}
#gnb_wrap .menu_wrap li {
	position: relative;
    float: left;
    height: 100%;
	padding: 15px 42px 5px 0px;
	width:100px;
	text-align:center;
}
#header .submenu_box li.on a{
	color:#ff8a00;
}
#gnb_wrap .menu_wrap li a{
	color:#fff;
}
@media screen and (max-width:1024px) {
	#banner_page{
		top:88%;
	}
	.banner .banner_text .text1{
		font-size: 33px;
		color: #fff;
		line-height: 56px;
	}
	.banner .banner_text .text2{
		font-size: 20px;
		color: #fff;
		line-height: 23px;
	}
	.banner .banner_text .text3{
		color: #DDD;
		font-size: 15px;
	}
}
@media screen and (max-width:640px) {
	.banner .banner_text .text1{
		font-size: 25px;
		color: #fff;
		line-height: 40px;
	}
	.banner .banner_text .text2{
		font-size: 15px;
		color: #fff;
		line-height: 11px;
	}
	.banner .banner_text .text3{
		color: #DDD;
		font-size: 12px;
	}
}
@media screen and (max-width:426px) {
	.banner .banner_text .text1{
		font-size: 26px;
		color: #fff;
		line-height: 36px;
	}
	.banner .banner_text .text2{
		font-size: 15px;
		color: #fff;
		line-height: 23px;
	}
	.banner .banner_text .text3{
		color: #DDD;
		font-size: 12px;
	}
}
#header .mobilemenu{
	display:none;
}
#gnb_wrap .mobilemenu{
	display:none;
}
#gnb_wrap .mobilemenu span{
	color:#000;
}
#header .mobile_cafe{
	display:none;
}
@media screen and (max-width:1024px) {
	#header .mobilemenu{
		display:inline-block;
		/* position:absolute; */
	}

	#gnb_wrap .mobilemenu{
		display:block;
	}
	#gnb .pcmenu{
		display:none;
	}
	#gnb_wrap .menu_wrap{
		display:none;
	}
	#header a.mobile_cafe{
		display:inline-block;
		color:#fff
	}
	#header > .navbar{
		height: 70px;
	}
}

#header{
	background: rgba(0,0,0,.6);
}
#header.scroll{
	background: rgba(0,0,0,.6);
}

#mainSlider{
	margin-top:70px;
}
#gnb > li > a{
	color:#fff;
}
.mainSection.section1 .inner .latestBox2{
	width:47%;
	float: left;
	margin-right: 3%;
}
@media screen and (max-width: 1024px){
	.mainSection.section1 .inner .latestBox2 {
		float: none;
		width: 100%;
		margin-bottom: 30px;
	}
}
.mainSection.section1 .inner .latestBox2{
	display:flex;
}
.mainSection.section1 .inner .latestBox2 .imgbox{
	width:43%;
}
.mainSection.section1 .inner .latestBox2 .imgbox img{
	width:100%;
	padding:10px;
}
.mainSection.section1 .inner .latestBox2 .textbox{
	width:57%;
}
@media screen and (max-width: 640px){
	.mainSection.section1 .inner .latestBox2{
		display:block;
	}
	.mainSection.section1 .inner .latestBox2 .imgbox{
		width:100%;
	}
	.mainSection.section1 .inner .latestBox2 .textbox{
		width:100%;
	}
}
#banner_page{
	top:70%;
}
#banner_menu{
	position:absolute;
	width:100%;
	bottom:0;
	background:rgba(0,0,0,.2);

	
}
#banner_menu .menu_box{
    margin: 0 auto;max-width: 1350px;width:100%;
	display:flex;
	justify-content: space-between;
}

#banner_menu img{
	width:50px;
	margin:20px;
	vertical-align: middle;
}
@media screen and (max-width: 1024px){
	#banner_menu img{
		width:45px;
		margin:10px;
		margin-right: 50px;
	}
	.pc_view{
		display:none;
	}
	#banner_menu{
		overflow:hidden;
	}
	#banner_menu .menu_box{
		overflow-x:scroll;
		-ms-overflow-style: none;
	}
	#banner_menu .menu_box::-webkit-scrollbar{ 
		display:none; 
	}

}
@media screen and (max-width: 640px){
	#banner_menu img{
		width:50px;
		margin:5px;
		margin-right: 50px;
	}
}
@media screen and (max-width: 425px){
	#banner_menu img{
		margin:5px;
		width:40px;
		margin-right: 50px;
	}
}

.menu_wrap .openright{
left: -36px;width:25px;height: 25px;position: absolute;top: 15px;
}
.menu_wrap .search_box{
	display:none;margin:0 auto;color: #fff;    
	position: absolute;
	right: 105%;
    top: 7px;overflow:hidden;width: 225px;
	opacity:0;
    z-index: 1000;

}
.menu_wrap .search{
    height: 40px;
    font-size: 13px;
	width:200px;
	padding-left: 36px;
}
.menu_wrap .search_img{
    width: 25px;
    height: 25px;
    vertical-align: top;
    position: relative;
    left: 31px;
    z-index: 10;
    top: 7px;
}
.menu_wrap .search_cancel{
    background: #303030;
    border: 0px;
    width: 40px;
    height: 40px;
    color: #fff;
    position: relative;
    right: 15px;
	opacity:0;
	top: 7px;
	z-index: 1010;
	display:none;
}
#header .m_search_img{
	display:none;
    width: 25px;
    height: 25px;
	float:right;
	margin-top: 23px;
    margin-right: 68px;
	cursor:pointer;
}
@media screen and (max-width: 1024px){
	#header .m_search_img{
		display:inline-block;
	}
}

#header .m_search_wrap{
	opacity:0;
    position: absolute;
    top: -70px;
    height: 70px;
    width: 100%;
    background: #000;
	z-index:1000;
	display:none;
}
#header .m_search_wrap .m_search{
	height: 70px;
    width: calc(100% - 70px);
	padding-left: 70px;
	font-size: 20px;
}
#header .m_search_wrap .m_search_cancel{
	float: right;
    height: 70px;
    width: 70px;
    font-size: 17px;
    background: #303030;
    border: 0px;
    color: #fff;
	z-index:100;
}
#header .m_search_wrap .m_search_img2{
	position:absolute;
	z-index:10;
	left: 24px;
	cursor:pointer;
    width: 36px;
    top: 15px;
}
#btnNav{
	z-index:10;
}
@media screen and (max-width: 1024px){
	#header .m_search_wrap{
		display:block;
	}
}