@charset "utf-8";

/* Font */
@import url(font.css);

/* Guide
----------------------------------------------------------------------------------------------------------------------------------------------------------

▶사이즈
pc : 1200px
tablet : 980px ~
mobile : 767px ~ 320px

▶미디어쿼리는 (주석으로 구분 되어있는)파트마다 각각 작성함.

*/


/* Reset
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	*{margin:0; padding:0;}
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0; padding:0;}
	body,th,td,input,select,textarea,button{font-family:'NotoSansKR', sans-serif; font-weight:400; font-size:15px; color:#333;}
	dl,ul,ol,menu,li {list-style:none;}
	body{height:100%; overflow-y:scroll;}
	*, *:before, *:after{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	:focus{outline:0 !important;}
	iframe{border:none; width:100%;}
	a{color:inherit; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out;}
	a:hover, a:focus ,a:active{text-decoration:none; color:#005a94;}
	textarea{max-width:100%; resize:none;}

	.hidden{font-size:0; line-height:0; text-indent:-9999em; overflow:hidden;}


/* Parallax
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.parallax{background-position:0 0; background-repeat:no-repeat; background-size:100% auto; width:100%; background-size:cover; background-attachment:fixed;}


/* Preloader
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.animationload{position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index:999999;}
	.loader {width:200px; height:200px; font-size: 24px; text-align: center; position:absolute; left:50%; top:50%; background-image:url(/images/basic_resp/img/preloader.gif); background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px;}


/* Back to top (탑 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.back-to-top{width:40px; height:40px; position:fixed; bottom:10px; right:20px; display:none; text-align: center; z-index: 10000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius:50%; background:#337ab7;}
	.back-to-top i{color: #fff; font-size: 15px; display: block; line-height: 33px;}


/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#wrapper{width:100%; min-width:1250px; position:relative;}


/* Header
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
		#header{width:100%; background:#fff;}
		#header .util-menu{width:100%; height:40px; background:#f1f1f1; border-bottom:1px solid #dcdcdc; z-index:555; position:relative;}
		#header .util-menu ul{width:1200px; margin:0 auto; overflow:hidden; text-align:right; padding:6px 0;}
		.util-menu li{display:inline-block; margin-left:10px; padding-left:10px; position:relative;}
		.util-menu li:before{position:absolute; background:#c1c1c1; width:1px; height:10px; content:''; left:-2px; top:8px;}
		.util-menu li:first-child:before{display:none;}
		.util-menu li:first-child{margin-left:0; padding-left:0; border-left:0;}
		.util-menu a{display:inline-block; line-height:10px; font-size:12px; color:#8d8d8d;}
		.util-menu li:first-child a{color:#8d8d8d;}
		
		#header .header_area{position:relative; z-index:555; background:#fff;}
		
		#header > div{width:100%;}
		#header > div .top_menu{position:relative; margin:0 auto; width:1200px; height:120px;}

		#header h1{float:left;}
		#header h1 a{display:block; line-height:110px;}

		.nav-btn{display:none;}

		.nav-bg{z-index:888; display:none; position:absolute; top:120px; left:0%; width:100%; height:307px; background:#f9f9f9;border-top:1px solid #eee;border-bottom:4px solid #005a94;}
		.black_bg{z-index:444; top:0; display:none; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.8);}
		#nav{float:left; margin-top:0px; margin-left:125px;}

		.navigation:after{content:""; display:block; clear:both;}
		.navigation > li{position:relative; float:left; width:150px; height:120px;text-align:center;}
		
		.navigation .main-menu{display:block; padding:45px 0 42px; width:100%; font-weight:400; font-size:20px; color:#333;}
		.navigation li:hover .main-menu{color:#005a94; border-bottom:5px solid #005a94; -webkit-transition:all .0s ease-out; -moz-transition:all .0s ease-out; transition:all .0s ease-out;}

		.navigation .sub-menu{display:none; z-index:999; position:absolute; top:120px; left:0; padding:15px 0; width:150px; height:303px; border-right:1px solid #eee;}
		.navigation li:first-child .sub-menu{border-left:1px solid #eee;}
		.navigation .sub-menu a{display:block; text-align:center; font-weight:400; line-height:35px; letter-spacing:-1px; font-size:15px; color:#333;}
		.navigation .sub-menu .intro-menu{display:none;}
		
		.navigation > li:hover .sub-menu{}
		.navigation > li:hover .sub-menu a{}
		.navigation .sub-menu a:hover{background:#0e639a;color:#fff;}

		.top_sns{float:right; margin-top:45px;}
		.top_sns ul{overflow:hidden;}
		.top_sns li{float:left; margin-left:10px;}
		.top_sns li:first-child{margin-left:0px;}

/* Button (공통 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.btn{text-transform:uppercase; border-radius:0; line-height:24px;}
	.btn:focus, .btn:active{outline:none; color:#fff;}

	.btn-custom{border-radius:3px; padding:0.8em 1.8em; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:#509591; border-color: #509591; color:#fff;}
	.btn-custom:hover, .btn-custom:focus{background-color: #447774; border-color: #447774; color:#fff;}

	.btn-custom-outline{border-radius:3px; padding:0.8em 1.8em; color:#fff; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:transparent; border-color:#fff;}
	.btn-custom-outline:hover, .btn-custom-outline:focus{color:#fff; background-color:rgba(255,255,255,.5);}
	.btn-bar a{margin-right:10px;}

	.form-control{box-shadow:none; -webkit-box-shadow:none; border-radius:0px; height:38px;}
	.form-control:focus{outline:none; box-shadow:none; -webkit-box-shadow:none; border-color: #509591;}


/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */	
	#footer{padding:30px 0px; width:100%; background:#fff; color:#9c9a9a;}
	.footer-area{margin:0 auto; padding:0 20px; width:100%; border-top:1px solid #eee; border-bottom:1px solid #eee; box-sizing:border-box;}
	.footer-info{width:1200px; margin:0 auto; position:relative; overflow:hidden;}
	.footer-menu{width:450px; float:left; padding:30px 0px;}
	.footer-menu li{display:inline-block; margin-left:10px; padding-left:10px; vertical-align:middle; line-height:10px; border-left:1px solid #9c9a9a;}
	.footer-menu li:first-child{margin-left:0; padding-left:0; border-left:0;}
	.footer-menu li a{line-height:10px; font-size:16px; color:#333; font-weight:400;}

	.f_sns{/* width:120px; */position:absolute; right:0; top:25px;}
	.f_sns li{display:inline-block; margin-left:5px;	padding-left:5px;}
	.f_sns li:first-child{margin-left:0; padding-left:0;}
	.f_sns li a{line-height:10px; font-size:14px;}

	.foot-address{width:1200px; margin:0 auto; overflow:hidden; margin-top:50px;}


	.foot-logo{float:left; margin-right:50px;}
	.address_area{float:left; padding-left:70px; border-left:1px solid #eee;}
	.address_area p{color:#333; font-weight:400;}
	.address_area p.copy{margin-top:20px; color:#333;}


/* Main Visual (메인이미지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.carousel-inner > .item{height:600px;}
	.carousel-inner > .main-img01{background:url('/images/kor06r-18-0404/main/main_visual_1.jpg') no-repeat center center/cover;}
	.carousel-inner > .main-img02{background:url('/images/kor06r-18-0404/main/main_visual_2.jpg') no-repeat center center/cover;}

	.main-visual .carousel-caption{top:35%; left:0; right:0; bottom:auto; -webkit-transform:translateY(-50%);- ms-transform:translateY(-50%); transform:translateY(-50%); margin:auto; width:1200px; text-shadow:none; color:#fff; padding-bottom:20px;}
	.main-visual .carousel-caption .slogan{padding:50px 40px; width:495px; text-align:left; line-height:1.3; font-size:18px; color:#fff; border:2px solid #fff; word-break:keep-all; display:none;}
	.main-visual .carousel-caption .slogan .main-copy{margin-bottom:20px; font-size:68px; letter-spacing:-3px; line-height:1.1;}

	.main-visual .carousel-control{background:none; text-shadow:none; width:10%; text-indent:-9999em; overflow:hidden;}
	.main-visual .carousel-control, .main-visual .carousel-control:focus, .main-visual .carousel-control:hover{opacity:1;}
	.main-visual .carousel-control.left{background:url('/images/kor06r-18-0404/main/visual_btn_prev.png') no-repeat center center;}
	.main-visual .carousel-control.right{background:url('/images/kor06r-18-0404/main/visual_btn_next.png') no-repeat center center;}

	.main-visual .carousel-indicators li{width:45px; height:6px; box-sizing:border-box; vertical-align:middle; border:1px solid #fff; border-radius:0;}
	.main-visual .carousel-indicators .active{width:45px; height:6px; box-sizing:border-box; background:#fff; border-radius:0;}

/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */

	#mainContainer{padding:0px 0 50px; margin:0 auto; z-index:555; width:100%;}

	#service{width:100%; height:452px; background:url('/images/kor06r-18-0404/main/con_bg.jpg')no-repeat center center/cover;}
	#service h2{text-align:center; color:#fff; padding:70px 45px; font-size:30px; position:relative; width:1200px; margin:0 auto;}
	#service h2:before{content:''; background:url('/images/kor06r-18-0404/main/title_line.jpg')no-repeat; position:absolute; width:100px; height:4px; left:46%; bottom:50px;}
	#service .service-list{width:1200px; margin:0 auto; padding:0 40px;}
	#service .service-list .owl-stage-outer,
	#service .service-list .owl-stage-outer .owl-stage,
	#service .service-list .owl-stage-outer .owl-stage .owl-item {height:100%; overflow:hidden;}
	#service .service-list .owl-carousel-item{text-align:center;}

	#service .service-list .viewport {position:relative; float:left; width:100%; height:220px; box-sizing:border-box; overflow:hidden;}
	#service .service-list .viewport .img-frame{position:absolute;  width:100%; height:100%; text-align:center;}
	#service .service-list .viewport .img-frame a{display:block; width:100%; height:100%; -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition:.3s;}
	#service .service-list .viewport .img-frame a span{display:block; color:#fff; margin-top:25px; font-size:18px; font-weight:400;}
	#service .service-list .owl-controls i{font-size:20px; color:#fff;}

	#service .service-list .owl-controls .owl-prev {cursor:pointer; position: absolute; left:0px; top:70px;}
	#service .service-list .owl-controls .owl-next {cursor:pointer; position: absolute; right:0px; top:70px;}

	#service .service-list .owl-controls .owl-dots {display:inline-block; overflow:hidden; margin:0 auto;}

	#service .service-list .owl-controls .owl-dots .owl-dot {background: #ccc; border-radius: 50%; cursor: pointer; float: left; height: 10px; margin: 2px; width: 10px;}
	#service .service-list .owl-controls .owl-dots .owl-dot.active {background: #000;}

	.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}


	#system{width:100%; padding-bottom:60px; border-bottom:1px solid #eee;}
	#system .system-list{width:1200px; margin:0 auto; padding:0 40px;}
	#system h2{text-align:center; color:#333; padding:70px 45px; font-size:30px; position:relative; width:1200px; margin:0 auto;}
	#system h2:before{content:''; background:url('/images/kor06r-18-0404/main/title_line.jpg')no-repeat; position:absolute; width:100px; height:4px; left:46%; bottom:50px;}
	#system .system-list .owl-stage-outer,
	#system .system-list .owl-stage-outer .owl-stage,
	#system .system-list .owl-stage-outer .owl-stage .owl-item {height:100%; overflow:hidden;}
	#system .system-list .owl-carousel-item{text-align:center;}
	#system .system-list .viewport {position:relative; float:left; width:100%; height:250px; box-sizing:border-box; overflow:hidden; }
	#system .system-list .viewport .img-txt{position:absolute; width:270px; height:190px; background:rgba(255,255,255,0.7); z-index:1; top:30px; left:30px;}
	#system .system-list .viewport .img-txt h3{padding:35px; position:relative; margin-bottom:0; font-size:26px; font-weight:500; color:#333;}
	#system .system-list .viewport .img-txt h3:before{width:40px; height:2px; content:''; position:absolute; bottom:20px; left:42%; background:#333;}
	#system .system-list .viewport .img-txt p{font-size:15px; color:#333; font-weight:400; letter-spacing:-0.5px;}
	#system .system-list .viewport .img-frame{position:absolute;  width:100%; height:100%; text-align:center;}
	#system .system-list .viewport .img-frame a{display:block; width:100%; height:100%;}


	#system .system-list .owl-controls i{font-size:20px; color:#000;}

	#system .system-list .owl-controls .owl-prev {cursor:pointer; position: absolute; left:0px; top:50%; margin-top:-10px; opacity:0.2;}
	#system .system-list .owl-controls .owl-next {cursor:pointer; position: absolute; right:0px; top:50%; margin-top:-20px; opacity:0.2;}

	#system .system-list .owl-controls .owl-prev:hover,
	#system .system-list .owl-controls .owl-prev:active,
	#system .system-list .owl-controls .owl-next:hover,
	#system .system-list .owl-controls .owl-next:active{opacity:0.7;}

	#system .system-list .owl-controls .owl-dots {display:inline-block; overflow:hidden; margin:0 auto;}

	#system .system-list .owl-controls .owl-dots .owl-dot {background: #ccc; border-radius: 50%; cursor: pointer; float: left; height: 10px; margin: 2px; width: 10px;}
	#system .system-list .owl-controls .owl-dots .owl-dot.active {background: #000;}
	
	#notice{width:1200px; margin:80px auto; overflow:hidden; margin-bottom:0;}
	#notice .notice_area{width:570px; height:217px; margin:0 auto; float:left; overflow:hidden;}

	.notice_area .tabs {border-left:1px solid #d9d9d9; font-size:16px; overflow:hidden;}
	.notice_area .tabs li {float: left; color:#333; font-weight:400; border:1px solid #d9d9d9; text-align:center; cursor: pointer; width:284px; line-height:50px; border-bottom: 1px solid #0072af; border-left: none; font-weight:400; background: #fff; overflow: hidden; position:relative;}
	.notice_area .tabs li.active {background: #0072af; border-bottom: 1px solid #0072af; color:#fff;}
	.notice_area .tab_container {border-top: none; clear: both; float: left; width: 100%; background: #fff;}
	.notice_area .tab_container .tab_content ul {width:100%; margin-top:10px;}
	.notice_area .tab_container .tab_content ul li {padding:5px;}

	.notice_btn{width:570px; float:left; margin-left:60px;}
	.notice_btn ul{overflow:hidden;}
	.notice_btn ul li{display:inline-block; position:relative;}
	.notice_btn ul li a .banner_txt{position:absolute; color:#fff; bottom:30px; left:40px;}
	.notice_btn ul li a .banner_txt h3{font-size:22px; padding-bottom:10px; font-weight:400;}
	.notice_btn ul li a .banner_txt p{font-size:15px; letter-spacing:-0.5px;}
	.notice_btn ul li:first-child{margin-right:26px;}