@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
/* reset */
html,body{margin:0px;padding:0px;width:100%;font-size:10px; font-family:"Nanum Gothic", "Dotum", "돋움", sans-serif; /*-webkit-text-size-adjust:none*/}
ul,ol,li,dl,dd,dt,input,h1,h2,h3,h4,h5,h6,p,b,input,button,textarea,fieldset,legend,td,th{margin:0px;padding:0px;font-weight:normal}
li{list-style:none}
fieldset,img,a{border:0px; vertical-align: top;}
a{text-decoration:none}
legend,.blind{position:absolute;top:0;left:-10000px;width:0;height:0;overflow:hidden;font-size:0;line-height:0}
caption{display:none}
button,label{cursor:pointer}
button{overflow:visible\9}	/* button fix for ie8 */
input,textarea,select,button{font-family:"Dotum", "돋움", sans-serif;/*-webkit-appearance:none;*/border-radius:0}
table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}
table th, table td{text-align:left}
input::-webkit-input-placeholder{color:#bdbdbd}
input::-moz-placeholder{color:#bdbdbd}
input:-moz-placeholder{color:#bdbdbd}
input:-ms-input-placeholder{color:#bdbdbd}
textarea::-webkit-input-placeholder{color:#bdbdbd}
textarea::-moz-placeholder{color:#bdbdbd}
textarea:-moz-placeholder{color:#bdbdbd}
textarea:-ms-input-placeholder{color:#bdbdbd}
input:focus::-webkit-input-placeholder{color:transparent!important}
input:focus::-moz-placeholder{color:transparent!important}
input:focus:-moz-placeholder{color:transparent!important}
input:focus:-ms-input-placeholder{color:transparent!important}
textarea:focus::-webkit-input-placeholder{color:transparent!important}
textarea:focus::-moz-placeholder{color:transparent!important}
textarea:focus:-moz-placeholder{color:transparent!important}
textarea:focus:-ms-input-placeholder{color:transparent!important}
header, footer, section, article, aside, nav, address { display: block; margin:0; } /* ie8 */

/* ---------------------------------------------------------------------- 공통 ---------------------------------------------------------------------- */
.clear_wrap:before,.clear_wrap:after{content:" ";display:table}
.clear_wrap:after{clear:both}
.clear_wrap{*zoom:1}
.clear_ine{clear:both}
.bold{font-weight:bold!important;}
.upper{text-transform: uppercase;}
.col000{color:#000;}
.colf00000{color:#f00000!important;}
.col666{color:#666;}
.col333{color:#333;}


.pd_t20{padding-top:20px;}

.mg_t18{margin-top:18px;}
.mg_t20{margin-top:20px;}
.mg_t29{margin-top:27px;}
.mg_t30{margin-top:30px;}
.mg_t44{margin-top:44px;}
.mg_t54{margin-top:54px;}
.mg_t62{margin-top:62px;}
.mg_t67{margin-top:67px;}
.mg_t100{margin-top:100px;}

.mg_b12{margin-bottom:12px;}
.mg_b18{margin-bottom:18px;}
.mg_b20{margin-bottom:20px;}
.mg_b30{margin-bottom:30px;}
.mg_b45{margin-bottom:45px;}
.mg_b58{margin-bottom:58px;}
.mg_b80{margin-bottom:80px;}
.mg_b90{margin-bottom:90px;}

.fs16{font-size:16px!important;}
.fs17{font-size:17px!important;}
.fs20{font-size:20px!important;}
.fs25{font-size:25px!important;}

.lh1_4{line-height:1.4;}
.tidn15{padding-left:15px;}
.tidn23{padding-left:23px;}

/*.ltsp_m1{letter-spacing: -1px}*/
.ltsp_m1 p{letter-spacing: -1px}


.basic_tit{width:100%; text-align:center; margin-top:94px;}
.basic_tit p{text-transform: uppercase;}
.basic_tit .s_tit{ font-size:20px; color:#6f6f6f;}
.basic_tit .s_tit a{color:#6f6f6f;}
.basic_tit .l_tit{ font-size:45px; color:#051a25; font-weight:bold; padding-bottom:29px; position:relative; z-index:10; margin-bottom:75px;}
.basic_tit .l_tit a{color:#051a25;}
.basic_tit .l_tit .bar_l_tit{position: absolute; bottom:0px; width:30px; height:6px; background:#142048; left:50%; margin-left:-15px;}
.basic_tit .subj_normal{font-size:16px; color:#666;}
.basic_tit .l_align{text-align:left;}
/************ 메인 **************/
#viewport{}
	#viewport #header{ position:fixed; top:0px; left:0px; z-index:30; width:100%;}
	#viewport #header .header_content{ height:61px; width:100%; position:relative; z-index:10;}
	#viewport #header .header_content .logo{margin-left:40px; padding-top:11px;}
	#viewport #header .header_content .opa_box{position:absolute; top:0px; left:0px; height:61px; width:100%; z-index:-1; background:#000; opacity:0.1;}
	#viewport #contains{width:100%;}

	#viewport #contains .main_roll{width:100%; position:relative;}
	#viewport #contains .main_roll .roll_banner{width:auto; position:absolute; top:0px; left:0px; z-index:10;}
	#viewport #contains .main_roll span{position:absolute; bottom:15px; left:50%; z-index:1000; margin-left:-142px;}

	#viewport #contains .contentwrap{max-width:1344px; margin:0 auto;}
	#viewport #contains .contentwrap img{}
	#viewport #contains .contentwrap .content .main_content{width:100%; margin-top:49px; max-width:1344px;}
	#viewport #contains .contentwrap .content .main_content img{width:100%;}	
	#viewport #contains .contentwrap .content .main_content .chart_normal{border-top:2px solid #424242; margin-top:29px;}
	#viewport #contains .contentwrap .content .main_content .chart_normal th{height:47px; font-size:16px; font-family:'Nanum Gothic'; text-align:right; background:#fafafa; border-bottom:1px solid #c6c6c6; padding-right:30px;}
	#viewport #contains .contentwrap .content .main_content .chart_normal td{height:47px; font-size:16px; font-family:'Nanum Gothic'; text-align:left; border-bottom:1px solid #c6c6c6; padding-left:25px;}
	#viewport #contains .contentwrap .content .main_content .chart_normal td img{width:auto!important; margin:24px 0px;}
	

	#viewport #contains .contentwrap .content .main_content .ban_c div{width:50%; float:left;}


	#viewport #contains .contentwrap .content .main_content .cibi_tit{position: relative; z-index:10; font-family:'Nanum Gothic'; font-size:20px; padding-left:30px;}
	#viewport #contains .contentwrap .content .main_content .g_bar{width:16px; height:6px; display: block; background:#142048; position:absolute; top:45%; left:0px; }

	
	#viewport #contains .contentwrap .content .main_content .map_info{border-top:1px solid #525252; margin-top:29px;}
	#viewport #contains .contentwrap .content .main_content .map_info th{font-size:16px; font-family:'Nanum Gothic'; font-weight:bold; text-align:right; background:#fafafa; border-bottom:1px solid #c6c6c6; padding:20px 30px; color:#333;}
	#viewport #contains .contentwrap .content .main_content .map_info td{font-size:16px; font-family:'Nanum Gothic'; text-align:left; border-bottom:1px solid #c6c6c6; padding:20px 30px; line-height:1.4;}
	#viewport #contains .contentwrap .content .main_content .map_info td img{width:auto!important; margin:24px 0px;}

	#viewport #footer{width:100%; height:77px; border-top:1px solid #ebebeb; text-align:center; margin-top:300px;}
	#viewport #footer p{height: 77px; line-height: 77px; font-size:13px; color:#8d8d8d;}





/** 토글 버튼 **/	
.toggle-menu-wrap{position:absolute; top:5px; right:52px;}
#toggle-menu{display:block;width:50px;height:15px;padding:20px;cursor:pointer; position:relative;} 	
.toggle-menu-default-state{display:none;}
.toggle-menu-hidden{display:none;}
.toggle-menu-visible{display:block;}

.title{padding-top:15px; font-size:20px; color:#333; font-weight:bold;}
.load_wrap div{font-size:14px; color:#666666;}
.load_wrap .load_text_1{float:left; height:30px;}
.load_wrap .load_text_2 div{padding-bottom:5px;}
.load_wrap .load_text_3{padding-top: 40px; padding-bottom: 100px;}
.load_wrap .load_tit{font-weight:bold; color:#333333!important; padding-bottom:14px;}
.text_wrap{padding-top:15px;}
.text_wrap p{padding-left:20px; background:url(/img/ferrino/bullet.jpg) 2px 9px no-repeat;}

#toggle-menu div{width:30px;height:15px;position:relative;}
#toggle-menu span{display:block;width:30px;height:3px;background:#fff;position:absolute;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;}
#toggle-menu span.top{top:0px;}
#toggle-menu span.middle{top:6px;}
#toggle-menu span.bottom{top:12px;}
#toggle-menu span.menu_text{font-family:"Nanum Gothic"; font-size:14px; color:#fff; position:absolute; top:19px; right:0px; z-index:10; background:none;}

#toggle-menu.toggle-menu-visible span.top{
	-webkit-animation:inTop 0.8s 
	forwards;-moz-animation:inTop 0.8s 
	forwards;animation:inTop 0.8s forwards;
}

#toggle-menu.toggle-menu-visible span.middle{
	-webkit-animation:inMiddle 0.8s 
	forwards;-moz-animation:inMiddle 0.8s 
	forwards;animation:inMiddle 0.8s forwards;
}

#toggle-menu.toggle-menu-visible span.bottom{
	-webkit-animation:inBottom 0.8s forwards;
	-moz-animation:inBottom 0.8s forwards;
	animation:inBottom 0.8s forwards;
}

#toggle-menu.toggle-menu-hidden span.top{
	-webkit-animation:outTop 0.8s backwards;
	-webkit-animation-direction:reverse;
	-moz-animation:outTop 0.8s backwards;
	-moz-animation-direction:reverse;
	animation:outTop 0.8s backwards;
	animation-direction:reverse;
}

#toggle-menu.toggle-menu-hidden span.middle{
	-webkit-animation:outMiddle 0.8s backwards;
	-webkit-animation-direction:reverse;
	-moz-animation:outMiddle 0.8s backwards;
	-moz-animation-direction:reverse;
	animation:outMiddle 0.8s 
	backwards;animation-direction:reverse;
}
#toggle-menu.toggle-menu-hidden span.bottom{
	-webkit-animation:outBottom 0.8s backwards;
	-webkit-animation-direction:reverse;
	-moz-animation:outBottom 0.8s backwards;
	-moz-animation-direction:reverse;
	animation:outBottom 0.8s backwards;
	animation-direction:reverse;
}

@-webkit-keyframes inMiddle{
	50%{-webkit-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(45deg);}
}

@-moz-keyframes inMiddle{
	50%{-moz-transform:rotate(0deg);}
	100%{-moz-transform:rotate(45deg);}
}

@keyframes inMiddle{
	50%{transform:rotate(0deg);}
	100%{transform:rotate(45deg);}
}

@-webkit-keyframes outMiddle{
	50%{-webkit-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(45deg);}
}

@-moz-keyframes outMiddle{
	50%{-moz-transform:rotate(0deg);}
	100%{-moz-transform:rotate(45deg);}
}

@keyframes outMiddle{
	50%{transform:rotate(0deg);}
	100%{transform:rotate(45deg);}
}

@-webkit-keyframes inTop{
	0%{top:0;}
	50%{top:6px;-webkit-transform:rotate(0deg);}
	100%{top:6px;-webkit-transform:rotate(135deg);}
}

@-moz-keyframes inTop{
	0%{top:0;}
	50%{top:6px;-moz-transform:rotate(0deg);}
	100%{top:6px;-moz-transform:rotate(135deg);}
}

@keyframes inTop{
	0%{top:0;}
	50%{top:6px;transform:rotate(0deg);}
	100%{top:6px;transform:rotate(135deg);}
}

@-webkit-keyframes outTop{
	0%{top:0;}
	50%{top:6px;-webkit-transform:rotate(0deg);}
	100%{top:6px;-webkit-transform:rotate(135deg);}
}

@-moz-keyframes outTop{
	0%{top:0;}
	50%{top:6px;-moz-transform:rotate(0deg);}
	100%{top:6px;-moz-transform:rotate(135deg);}
}

@keyframes outTop{
	0%{top:0;}
	50%{top:6px;transform:rotate(0deg);}
	100%{top:6px;transform:rotate(135deg);}
}

@-webkit-keyframes inBottom{
	0%{top:12px;}
	50%{top:6px;-webkit-transform:rotate(0deg);}
	100%{top:6px;-webkit-transform:rotate(135deg);}
}

@-moz-keyframes inBottom{
	0%{top:12px;}
	50%{top:6px;-moz-transform:rotate(0deg);}
	100%{top:6px;-moz-transform:rotate(135deg);}
}

@keyframes inBottom{
	0%{top:12px;}
	50%{top:6px;transform:rotate(0deg);}
	100%{top:6px;transform:rotate(135deg);}
}

@-webkit-keyframes outBottom{
	0%{top:12px;}
	50%{top:6px;-webkit-transform:rotate(0deg);}
	100%{top:6px;-webkit-transform:rotate(135deg);}
}

@-moz-keyframes outBottom{
	0%{top:12px;}
	50%{top:6px;-moz-transform:rotate(0deg);}
	100%{top:6px;-moz-transform:rotate(135deg);}
}

@keyframes outBottom{
	0%{top:12px;}
	50%{top:6px;transform:rotate(0deg);}
	100%{top:6px;transform:rotate(135deg);}
}

.nvflas{position:absolute; top:24px; right:150px; z-index:10;}

.fixed_menu .close_btn #toggle-menu span{height:6px!important;} /** 버튼 굵기  **/

.fixed_menu{position:fixed; top:0px; right:-261px; z-index:30; width:261px; background:#242424;}
.fixed_menu .close_btn{height:61px; background:#25272c;}
.fixed_menu .close_btn .toggle-menu-wrap{right:148px;}
.fixed_menu .cate_wrapper .t_cate{background:#181818; height:46px; line-height: 46px; font-size:17px; font-weight:bold; margin-bottom:13px; margin-top:5px; color:#fff;}
.fixed_menu .cate_wrapper ul{padding-bottom:40px;}
.fixed_menu .cate_wrapper li{margin-bottom:6px; text-indent:48px; font-family:'Nanum Gothic';}
.fixed_menu .cate_wrapper a{font-size:14px; color:#bcbcbc; font-family:'Nanum Gothic'; }
.fixed_menu .cate_wrapper a:hover{color:#fff;}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    	background-image: url("/img/main/right_roll_btn.png")!important;
    	right: 10px;
    	left: auto;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url("/img/main/left_roll_btn.png")!important;
    left: 10px;
    right: auto;
}
.swiper-button-prev, .swiper-button-next{
	top:auto!important;
	bottom:40px!important;
	width:47px!important; 
	height:67px!important;
	background-size: 47px 67px!important;
}


.img_content01{background:url(/img/main/ulvine-1.jpg) no-repeat center center; background-size:cover; background-position:50% 50%;}
.img_content02{background:url(/img/main/ssen10-1.jpg) no-repeat center center; background-size:cover; background-position:50% 50%;}
.img_content03{background:url(/img/main/ulvine-3.jpg) no-repeat center center; background-size:cover; background-position:50% 50%;}
.img_content04{background:url(/img/main/ssen10-2.jpg) no-repeat center center; background-size:cover; background-position:50% 50%;}
.img_content05{background:url(/img/main/ulvine-4.jpg) no-repeat center center; background-size:cover; background-position:50% 50%;}
.img_content06{background:url(/img/main/ssen10-3.jpg) no-repeat center center; background-size:cover; background-position:50% 50%;}
.img_content07{background:url(/img/main/ulvine-2.jpg) no-repeat center center; background-size:cover; background-position:50% 50%;}
.img_content08{background:url(/img/main/ssen10-4.jpg) no-repeat center center; background-size:cover; background-position:50% 50%;}
.swiper-slide span{position:absolute; bottom:0px; left:50%; z-index:200;}
.swiper-slide span img{width:auto!important; height:auto!important;}

.pager{position: absolute; top:45%; left:65px; z-index: 90; width:800px!important;}
.pager span{display:block; width:12px; font-size:16px; color:#FFF; margin-bottom:15px; height:2px; border-radius:50px; background:white;}
.swiper-pagination{display:none;}

/*.swiper-pagination{position:absolute; top:45%; left:0px; z-index:90; width:290px!important;}
.swiper-pagination span{display:block; width:100%; background:none!important;}*/

div.open_popup {position:absolute; top:0px; left:1000px; width:690px; height:350px; z-index:500;}
div.open_popup img {width:690px; height:350px;}
div.open_popup > div.popup_switch {position:relative; margin-left:667px; margin-top:-22px; width:11px; height:9px; font-size:18px; font-weight:normal; line-height:9px; text-align:center; background-color:#ddd; border:1px solid #333; padding:5px; cursor:pointer; z-index:600;}