@charset "UTF-8";

/* title */
.titDiv{ color:#000000; text-align: center; margin-bottom:50px; }
.titDiv .fs01{ display: inline-block; color:#b11116; font-size: 1rem; margin-bottom: 15px; line-height: 18px; position: relative; padding: 0 10px; }
.titDiv .fs01:before{ display: block; width: 6px; height: 18px; content: ""; background: url(../images/common/logo_simple01.png) no-repeat 50% 50%; position: absolute; top: 50%; left: 0; z-index: 10; transform: translateY(-50%); -webkit-transform:translateY(-50%); }
.titDiv .fs01:after{ display: block; width: 6px; height: 18px; content: ""; background: url(../images/common/logo_simple01.png) no-repeat 50% 50%; position: absolute; top: 50%; right: 0; z-index: 10; transform: translateY(-50%); -webkit-transform:translateY(-50%); }
.titDiv .fs02{ font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -1px; }
.titDiv .fs03{ color: #424242; font-weight: 700; font-size: 1.4rem; line-height: 1; letter-spacing: -1px; }
.titDiv .fs03 img{ vertical-align:middle; width: 40%; max-width: 269px; margin: 0 0 2px 5px; }
.titDiv .fs04{ font-size: 1.2rem; margin-top: 20px; line-height: 1; }
.titDiv .fs04 p{ display: inline-block; border-top: 2px solid #b11116; border-bottom: 2px solid #b11116; padding: 10px 20px; letter-spacing: -1px; }
.titDiv .fs04 span{ font-weight: 900; color: #b11116; }
.titDiv .fs05{ font-size: 1.5rem; line-height: 1; letter-spacing: -1px; }
@media all and (min-width:970px){
	.titDiv{ margin-bottom:100px; }
	.titDiv .fs01{ font-size: 16px; }
	.titDiv .fs02{ font-size: 30px; }
	.titDiv .fs03{ font-size: 52px; }
	.titDiv .fs03 img{ margin: 0 0 5px 10px; }
	.titDiv .fs04{ font-size: 26px; }
	.titDiv .fs05{ font-size: 32px; }
}

/* =========================
	슬라이더 dot
========================= */
.sliderDot01 .slick-dots{ position: absolute; width: 100%; bottom: 20px; text-align: center; left: 0; padding: 0 20px; box-sizing: border-box; }
.sliderDot01 .slick-dots li{ display: inline-block; }
.sliderDot01 .slick-dots li button{ display:block; font-size: 0; line-height: 0; width: 10px; height: 10px; background: rgba(7,55,95,0.5); transition: background 0.3s; -webkit-transition: background 0.3s; overflow: hidden; margin: 0 10px; }
.sliderDot01 .slick-dots li.slick-active button{background: rgba(255,255,255,1);}

.sliderDot02 .slick-dots{ position: absolute; width: 100%; bottom: 20px; text-align: center; left: 0; padding: 0 20px; box-sizing: border-box; }
.sliderDot02 .slick-dots li{ display: inline-block; }
.sliderDot02 .slick-dots li button{ display:block; font-size: 0; line-height: 0; width: 10px; height: 10px; background: rgba(7,55,95,0.1); transition: background 0.3s; -webkit-transition: background 0.3s; overflow: hidden; margin: 0 10px;  border: 1px solid rgba(255,255,255,0); }
.sliderDot02 .slick-dots li.slick-active button{ background: rgba(7,55,95,0.5); border: 1px solid rgba(255,255,255,0.5); }

/* controls */
.sliderArrow01 .slick-arrow{ position: absolute; top: 50%; display: block; outline: none; text-align: left; z-index: 1000; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 0; line-height: 0; overflow: hidden;  }
.sliderArrow01 .slick-prev{ background: url('../images/common/slider02_prev.png') no-repeat 0 0; background-size: contain; }
.sliderArrow01 .slick-next{ background: url('../images/common/slider02_next.png') no-repeat 0 0; background-size: contain; }
@media all and (max-width:1169px){
	.sliderArrow01 .slick-arrow{width:15px; height: 24px;}
	.sliderArrow01 .slick-prev{ left: -20px;}
	.sliderArrow01 .slick-next{ right:-20px;}
	
}
@media all and (min-width:1170px){
	.sliderArrow01 .slick-arrow{width:24px; height: 43px;}
	.sliderArrow01 .slick-prev{ left: 0}
	.sliderArrow01 .slick-next{ right: 0;}
}

/* =========================
	버튼
========================= */
.button01{ color: #fff; font-size: 1rem; display: inline-block; padding: 15px 10px; text-align: center; box-sizing: border-box; margin: 0 auto; background: #8a1013; border-radius: 30px; overflow: hidden; width: 175px; box-sizing: border-box; border: 2px solid #fff; letter-spacing: -1px;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-ms-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out; }
.button01 img{ margin-left: 20px; vertical-align: middle; margin-bottom: 3px; }
.button01:hover{ }
@media all and (min-width:970px){
	.button01{ font-size: 15px; }
}

/* 리더기 */
.s-only{ position: absolute; font-size: 0; text-indent: -9999em; line-height: 0;    overflow: hidden; }
.sound_only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
 overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* list */
.floatlist li{ display: inline-block; vertical-align: middle; }
.floatlist li:after{ display: inline-block; content: ""; height: 12px; vertical-align: middle; width: 1px; margin: 0 6px; background: #848484; }
.floatlist li:last-child:after{ display: none; }

/* position */
.str{ position: relative; }
.str > .left{ position: absolute; top: 50%; left: 20px; transform: translateY(-50%); -webkit-transform:translateY(-50%); }
.str > .right{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); -webkit-transform:translateY(-50%); }
.str > .center{ position: absolute; top: 50%; left: 50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
.str > .caption{ position: absolute; top: 50%; left: 0; width: 100%; transform:translateY(-50%); -webkit-transform:translateY(-50%); text-align: center; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; z-index: 10; }

.wCommon{ max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; }
.w1200{ max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; }
.w1300{ max-width: 1340px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; }
.w1400{ max-width: 1440px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; }

.imgDiv img{ width: 100%; }
/* 반응형 */
@media all and (max-width:969px){
	.con_pc{ display: none !important; }
	.con_m{ display: block !important; }
}
@media all and (min-width:970px){
	.con_pc{ display: block !important; }
	.con_m{ display: none !important; }
}

/* iframe */
.youtube{ position: relative; box-shadow:7px 7px 11px rgba(0,0,0,0.45);  }
.youtube:after{ display: block; content: ""; padding-top: 56.25%; }
.youtube iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.boxmov01{ overflow:hidden;  position: relative; }
.boxmov01:after{ display: block; content: ""; width: 100%; height:13.75%; background:#fff; position: absolute; left: 0; bottom:0; }
.boxmov01 .over{ position: relative;  left: 0; top:0; }
.boxmov01 .over:after{ display: block; content: ""; width: 100%; padding-top: 70%; }
.boxmov01 iframe{ position: absolute; left: 0; top:0; height: 100%; width: 100%; }
.boxmov01 .scroll{ display: block; position: absolute; left: 50%; bottom:13%; z-index: 1000; }
@media all and (min-width:780px){
	.boxmov01{ margin-top:-8.75%; }
	.boxmov01:after{ height:8.75%;  }
	.boxmov01 .over:after{ padding-top: 65%;  }
	.boxmov01 iframe{ pointer-events: none; }
}


/* float */
.clear:after{ display: block; content: ""; clear: both; }
.clear > .left{float: left;}
.clear > .right{float: right;}

/* 디스플레이 테이블 */
.dis-t{ display: table; }
.dis-tc{ display: table-cell; }
.dis-tc.tit{ white-space: nowrap; }
.dis-tc.dot{ width: 15px; text-align: center; }
.dis-tc.pl{ padding-left: 5px; }
@media all and (min-width:970px){
	.dis_t_pc{ display: table; }
	.dis_tc_pc{ display: table-cell; }
} 

/* 정렬 */
.ta-c{ text-align: center !important; }
.va-m{ vertical-align: middle !important; }
.va-t{ vertical-align: top; }

/* margin-bottom */
.mb30{ margin-bottom: 30px; }
.mb35{ margin-bottom: 35px; }
.mb40{ margin-bottom: 40px !important; }
.mb65{ margin-bottom: 65px !important; }
.mb70{ margin-bottom: 70px !important; }
.mb145{ margin-bottom: 145px !important; }



/* =========================
	공지사항
========================= */
#notiBoard .titDiv{ margin-bottom: 40px; }
#notiBoard .notiUl{ border-top: 1px solid #ebebeb; }
#notiBoard .notiUl .notiLi{ border-bottom: 1px solid #ebebeb; }
#notiBoard .notiUl .notiLi.notiCon{ background: #fff0f0 !important; }
#notiBoard .notiUl .notiLi a{ display: block; padding: 20px; }
#notiBoard .notiUl .notiLi .cate{ font-size: 0.8rem; color: #ed1c25; font-weight: 700; margin-bottom: 5px; }
#notiBoard .notiUl .notiLi .nocon{ font-size: 1.1rem; color: #363636; font-weight: 900; letter-spacing: -1px; text-align:center; padding: 20px; }
#notiBoard .notiUl .notiLi .tit{ font-size: 1.1rem; color: #363636; font-weight: 900; letter-spacing: -1px; }
#notiBoard .notiUl .notiLi .date{ font-size: 0.8rem; color: #858585; }
@media all and (min-width:450px){
	#notiBoard .notiUl .notiLi .tit{ float: left; }
	#notiBoard .notiUl .notiLi .date{ float: right; margin-top:5px; }
}
@media all and (min-width:970px){
	#notiBoard .titDiv{ margin-bottom: 80px; }
	#notiBoard .notiUl .notiLi a{ padding: 30px 40px; }
	#notiBoard .notiUl .notiLi .cate{ font-size: 13px; }
	#notiBoard .notiUl .notiLi .nocon{ font-size: 20px; padding: 30px 40px; }
	#notiBoard .notiUl .notiLi .tit{ font-size: 20px; }
	#notiBoard .notiUl .notiLi .date{ font-size: 13px; margin-top: 10px; }
	
}


/* =========================
	지도
========================= */
#mainMap{ color: #fff; padding: 40px 0;}
#mainMap .mapDiv .mapImg img{ display: block; width: 100%; max-width: 647px; margin: 0 auto; }
#mainMap .mapDiv .mapTxtUl .mapTxtLi{ padding:6px 0; display: table; width: 100%; }
#mainMap .mapDiv .mapTxtUl .mapTxtLi:last-child{ border-bottom: none; }
#mainMap .mapDiv .mapTxtUl .mapTxtLi .num{ display: table-cell; vertical-align: middle; font-size: 2rem; font-weight: 900; width: 50px; text-align: center; } 
#mainMap .mapDiv .mapTxtUl .mapTxtLi .con{ display: table-cell; vertical-align: middle; } 
#mainMap .mapDiv .mapTxtUl .mapTxtLi .con .fs01{ font-size: 1rem; font-weight: 700; margin-bottom:3px; }
#mainMap .mapDiv .mapTxtUl .mapTxtLi .con .fs02{ font-size: 0.8rem; font-weight: 500; }
@media all and (max-width:969px){
	#mainMap .mapDiv .mapImg{ margin-bottom: 50px; }
}
@media all and (min-width:970px){
	#mainMap{ padding: 50px 0 70px; }
	#mainMap .mapDiv .mapImg{ float: right; width: 55%; max-width: 647px; margin-top: 50px; }
	#mainMap .mapDiv .mapTxt{ float: left; width: 40%; }
	#mainMap .mapDiv .mapTxtUl .mapTxtLi .num{font-size: 55px; width: 70px; }
	#mainMap .mapDiv .mapTxtUl .mapTxtLi .con .fs01{font-size: 18px;}
	#mainMap .mapDiv .mapTxtUl .mapTxtLi .con .fs02{font-size: 14px;}
	
}


/* =========================
	four firm choices
========================= */
#FourCho{ margin-bottom:50px; background: url(../images/main/qbox01_bg.jpg) no-repeat 50% 100%; background-size: contain; }
#FourCho .boxUl{ padding-bottom: 30px; }
#FourCho .boxUl .boxLi{ float: left; text-align: center; cursor: pointer; -webkit-transition: transform 0.2s ease-in-out; -moz-transition: transform 0.2s ease-in-out; -ms-transition: transform 0.2s ease-in-out; -o-transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; }
#FourCho .boxUl .boxLi:last-child{ margin-right: 0; }
#FourCho .boxUl .boxImg .on{ display: none; }
#FourCho .boxUl .boxImg .off{ display: block; }
#FourCho .boxUl .boxImg img{ display: block; width: 100%;}
#FourCho .boxUl .txtImg{ position: relative; background:#f6f6f6; box-sizing: border-box; width: 90%; max-width: 285px; margin: 0 auto; }
#FourCho .boxUl .txtImg .num{ position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); -webkit-transform:translateY(-50%); z-index: 10; color: #000000; opacity: 0.04; font-weight: 900; font-size: 5rem; line-height: 1; letter-spacing: -2px; }
#FourCho .boxUl .txtImg .txt{ font-size: 0.8rem; letter-spacing: -1px; padding:0 10px;}
#FourCho .boxUl .txtImg .txt:before{ display: block; content: ""; height: 21px; background: url(../images/common/logo_simple.png) no-repeat 50% 50%; background-size: contain; margin-bottom: 15px; }
#FourCho .boxUl .txtImg .txt span{ font-weight: 700; color: #b11116; }
/* hover */
#FourCho .boxUl .boxLi:hover{ transform:scale(1.05); z-index: 100; }
#FourCho .boxUl .boxLi:hover .boxImg{ box-shadow:5px 5px 7px rgba(0,0,0,0.4); }
#FourCho .boxUl .boxLi:hover .boxImg .on{ display: block; }
#FourCho .boxUl .boxLi:hover .boxImg .off{ display: none; }
#FourCho .boxUl .boxLi:hover .txtImg{ box-shadow:5px 5px 7px rgba(0,0,0,0.4); }
#FourCho .boxUl .boxLi:hover .txtImg:before{ display: block; content: ""; width: 12px; height: 12px; background: url(../images/common/icon_boxlt.png) no-repeat 50% 50%; background-size: contain; position: absolute; top:10px; left:10px; z-index: 10; }
#FourCho .boxUl .boxLi:hover .txtImg:after{ display: block; content: ""; width: 12px; height: 12px; background: url(../images/common/icon_boxrb.png) no-repeat 50% 50%; background-size: contain; position: absolute; bottom:10px; right:10px; z-index: 10; }
@media all and (max-width:959px){
	#FourCho .boxUl .boxLi{ width: 48%; margin-right: 4%; margin-bottom: 50px; }
	#FourCho .boxUl .boxLi:nth-child(2n){ margin-right: 0; }
	#FourCho .boxUl .txtImg{ height: 150px; padding: 20px 10px; margin-top: -30px; }
}
@media all and (min-width:960px){
	#FourCho{ margin-bottom: 115px; }
	#FourCho .boxUl{ padding-bottom: 60px; }
	#FourCho .boxUl .boxLi{ width: 23.125%; margin-right: 2.5%; }
	#FourCho .boxUl .txtImg{ height: 168px; padding-top: 30px; margin-top: -45px; }
	#FourCho .boxUl .txtImg .num{ font-size: 150px; }
	#FourCho .boxUl .txtImg .txt{ font-size: 21px; }
}
@media all and (min-width:1260px){
	#FourCho .boxUl .txtImg{ height: 168px; padding-top: 50px;}
	
}