﻿
/* float */
.fl{float:left;}
.fr{float:right;}
.clearfix{*zoom: 1;}
.clearfix:after{content:'';display:block;clear:both;}

/* Common */
.blind,legend{display:block;overflow:hidden;position:absolute;top:-1000em;left:0}

/*기본*/
html.fixed, body.fixed{overflow:hidden;}
#warp{ 
	margin: 0 auto;
	width:100%;
	max-width:1920px;
	overflow:hidden;
}
#header{position:relative;}
#container{position:relative;}
#footer{position:relative;}


/*  */
.only_mo{display:none !important;}
.only_web{}
.modal{
	display:none;
	position:fixed;
	top:53px;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.7);
}
.modal.open{display:block;}

/* top_btn */
.top_btn{
	display:block;
	position:fixed;
	bottom:60px;
	right:60px;
	width:80px;
	height:80px;
	border-radius:100%;
	background:#8a8788 url('../image/top_arrow.png')no-repeat center / 25px;
	box-shadow: 0 5px 15px -5px;
	z-index:100;
    transition: all 0.5s;
	opacity:0;
}
.top_btn:hover{background-color:#69c4d1;}
.top_btn.show{opacity:1;}
.top_btn.show.finish{position:absolute;}
/*///////////////////// header /////////////////////*/
#header{
	padding-bottom:60px;
	position:relative;
	margin:0;
	width:100%;
	z-index:120;
	background:#3a5554;
	transition:0 all;
}
#header.fixed{
	margin-top:-216px;
	position:fixed;
	transition:0.5s all;
	top: 0;
}
#header.fixed.bottom{margin-top:-156px}
#header.fixed.top{margin-top:0;}
#main.fixed, .sub.fixed{margin-top:150px;}
#header .container{width:1400px;}
#header .header_t{padding:10px 0; border-bottom:1px solid #2f4847;}
.bookmark{
	margin-top:0px;
	padding:0 10px 0 20px;
	display:inline-block;
	font-size:12px;
	font-weight:500;
	color:#ddd;
	line-height:1.5;
	text-transform:uppercase;
	border-right:1px solid #3e3e3e;
	background:url('../image/bookmark.png')no-repeat left center;
}
.lang_con{
	margin-left:1px;
	display:inline-block;
	clear:both;
	overflow:hidden;
}
.lang_con li{
	margin-left:5px;
	float:left;
}
.mc {margin-top:3px;}
.mc li{
	padding:0 10px;
    display: inline-block;
	border-right:1px solid #333;
	line-height:1;
    vertical-align: baseline;
}
.mc li a{
	display:block;
	font-size:12px;
	font-weight:500;
	color:#ddd;
	line-height:1;
	text-transform:uppercase;
}
.mc li.member_val a{color:#ddd;}
.header_t .footer_sns{
	position:static;
	float:right;
    clear: right;
    overflow: visible;
    bottom: 0;
}
.header_t .footer_sns li a{
	width:26px;
	height:26px;
	background-size:cover !important
}
.header_t .footer_sns li:nth-child(1) a{background:url('../image/ico_header_csns.png')no-repeat left center;}
.header_t .footer_sns li:nth-child(2) a{background:url('../image/ico_header_csns.png')no-repeat 33% center;}
.header_t .footer_sns li:nth-child(3) a{background:url('../image/ico_header_csns.png')no-repeat 67% center;}
.header_t .footer_sns li:nth-child(4) a{background:url('../image/ico_header_csns.png')no-repeat right center;}
#header .header_m{
	padding:32px 0 30px;
	text-align:center;
}
#header .header_m .container{
	position:relative;
}
#header .header_m h1{
	display:inline-block;
}
#header .header_m h1 a{
	display:block;
	width:230px;
	height:47px;
	background:url('../image/logo.png')no-repeat center;
	background-size:contain !important;
}
/*190418 전화아이콘 추가*/
#header .header_m .container .wonjin_num{display:none}
.header_m .container > .fl, .header_m .container > .fr{position:absolute;}
.header_m .container > .fl{
	top:0;
	left:0;
	clear:both;
	overflow:hidden;
}
.sns_link{float:left;}
.sns_link li{float:left;}
.sns_link li a{
	margin-right:12px;
	display:block;
	width:43px;
	height:43px;
	font-size:0;
}
.sns_link li:nth-child(1) a{background:url('../image/ico_sns02_cn.png')no-repeat left center;}
.sns_link li:nth-child(2) a{background:url('../image/ico_sns02.png')no-repeat center;}
.sns_link li:nth-child(3) a{background:url('../image/ico_sns02.png')no-repeat right center;}
.review_link{
	margin-top:15px;
	float:left;
}
.review_link li{
	padding-right:30px;
	float:left;
	position:relative;
}
.review_link li:after{
	content:'';
	display:block;
	position:absolute;
	top:7px;
	right:15px;
	width:2px;
	height:2px;
	background:#888;
}
.review_link li:last-child:after{display:none;}
.review_link li a{
	display:block;
	font-size:15px;
	font-weight:700;
	color:#e6e3dc;
	line-height:1;
	text-transform:uppercase;
}
.review_link li a:hover{color:#3eafbf;}
.sns_link_img img{position: relative;}
.sns_link_img .kakao_qr{
	display:none;
	position: absolute;
    left: 0px;
    top: 52px;
    z-index: 100;
}
.sns_link_img .line_qr{
	display:none;
    position: absolute;
    left: 57px;
    top: 52px;
    z-index: 100;
}
.header_m .container > .fr{
	top:-7px;
	right:0;
}
.contact_link{}
.contact_link li{
	margin-left:35px;
	display:inline-block;
	text-align:center;
}
.contact_link li a{
	padding-top:45px;
	display:block;
	font-size:14px;
	font-weight:600;
	line-height:1;
}
.contact_link li:nth-child(1) a{
	color:#fec9b9;
	background:url('../image/cs_menu01.png')no-repeat center 0;
}
.contact_link li:nth-child(2) a{
	color:#f2ca80;
	background:url('../image/cs_menu02.png')no-repeat center 3px;
}
.contact_link li:nth-child(3) a{
	color:#bbfcf4;
	background:url('../image/cs_menu03.png')no-repeat center 6px;
}
.contact_link li:nth-child(4) a{
	color:#e4c6f1;
	background:url('../image/cs_menu04.png')no-repeat center 0;
}
#header .header_b{
	position: absolute;
    width: 100%;
	overflow:hidden;
	height:60px;
	background:#2f4847;
	transition:all 1s;
	z-index:11;
}
#header .header_b:hover{
	height:350px;
}
.navi{
	text-align:center;
}
.navi li{
	display:inline-block;
	padding:0 40px 0 41px; 
	/* padding:0 10px 0 15px;*/
	/* padding:0 22px 0 26px;*/
	line-height:1;
}
.navi li:first-child{padding-left:0;}
/* .navi li:nth-child(8){padding-right:0;} */
.navi li:nth-child(9){padding-right:0}
.navi li:nth-child(10){display:none;}
.navi li a{
	margin-bottom:-1px;
	padding:22px 0;
	display:block;
	font-size:16px;
	font-weight:600;
	color:#eee;
	line-height:1;
	text-transform:uppercase;
	letter-spacing:0;
}
.navi li a:hover, .navi li a.on{
	padding-bottom:18px;
	border-bottom:4px solid #146e68;
}
.menu_box{
	padding:40px 0 70px;
	display:none;
	border-top:1px solid #253c3b;
}
.menu_box#menu01{display:block;}
.menu_box .menu_name{
	padding-top:115px;
	display:inline-block;
	width:225px;
	font-size:20px;
	font-weight:500;
	color:#eee;
	text-align:center;
	text-transform:uppercase;
}
.menu_box#menu01 .menu_name{background:url('../image/ico_menu09.png')no-repeat center 10px;}
.menu_box#menu02 .menu_name{background:url('../image/ico_menu01.png')no-repeat center 10px;}
.menu_box#menu03 .menu_name{background:url('../image/ico_menu02.png')no-repeat center 15px;}
.menu_box#menu04 .menu_name{background:url('../image/ico_menu03.png')no-repeat center 5px;}
.menu_box#menu05 .menu_name{background:url('../image/ico_menu04.png')no-repeat center 10px;}
.menu_box#menu06 .menu_name{background:url('../image/ico_menu05.png')no-repeat center 10px;}
.menu_box#menu07 .menu_name{background:url('../image/ico_menu06.png')no-repeat center 5px;}
.menu_box#menu08 .menu_name{background:url('../image/ico_menu07.png')no-repeat center 2px;}
.menu_box#menu09 .menu_name{background:url('../image/ico_menu08.png')no-repeat center 10px;}
.menu_box .menu_2dp{
	display:inline-block;
	width:calc(100% - 225px);
	clear:both;
	overflow:hidden;
}
.menu_box .menu_2dp ul{
	margin-left:160px;
	float:left;
	/*width:calc(100%/3 - 50px)*/
}
.menu_box .menu_2dp ul:first-child{margin-left:0;}
.menu_box .menu_2dp ul li{
	margin-bottom:20px;
}
.menu_box .menu_2dp ul li a,
#header .header_b:visited .menu_box .menu_2dp ul li a{
	font-size:16px;
	font-weight:350;
	color:#eeeeee;
	border-bottom:0 none
}
.menu_box .menu_2dp ul li a:hover{
	color:#3eafbf;
	border-bottom:1px solid #3eafbf;
}
.member_box, .mobile_quick, .mobile_quick_box{display:none;}
/*///////////////////// header End /////////////////////*/

/*///////////////////// footer /////////////////////*/
#footer{
	padding:35px 0 45px;
	background:#3d3d3d;
}
#footer .container{
	position:relative;
	width:1400px;
}
.footer_logo{
	position:absolute;
	top:5px;
	left:0;
}
.footer_info{padding-left:190px;}
.footer_link{
	clear:both;
	overflow:hidden;
}
.footer_link li{
	padding:0 10px;
	float:left;
	line-height:1;
	border-left:1px solid #444;
}
.footer_link li:hover a{
	color:#ddd
}
.footer_link li:first-child{
	padding-left:0;
	border-left:0 none;
}
.footer_link li a{
	font-size:13px;
	font-weight:350;
	color:#888;
	line-height:1;
}
.company_info{
	margin-top:20px;
	clear:both;
	overflow:hidden;
}
.company_info li{
	padding-right:5px;
	display:block;
	float:left;
	font-size:13px;
	font-weight:350;
	color:#ddd;
	line-height:1.2;
	letter-spacing:0;
}
.company_info li:last-child{
	padding-top:10px;
	float:none;
	clear:both;
	overflow:hidden;
	display:block;
}
.footer_sns{
	position:absolute;
	clear:both;
	overflow:hidden;
	bottom:-10px;
	right:0;
}
.footer_sns li{
	margin-left:10px;
	float:left;
}
.footer_sns li:first-child{margin-left:0;}
.footer_sns li a{
	display:block;
	width:32px;
	height:32px;
	font-size:0;
}
.footer_sns li:nth-child(1) a{background:url('../image/ico_footer_csns.png')no-repeat left center;}
.footer_sns li:nth-child(2) a{background:url('../image/ico_footer_csns.png')no-repeat 33.4% center;}
.footer_sns li:nth-child(3) a{background:url('../image/ico_footer_csns.png')no-repeat 67% center;}
.footer_sns li:nth-child(4) a{background:url('../image/ico_footer_csns.png')no-repeat right center;}
/*///////////////////// footer End /////////////////////*/

/* ie 대응 */
@media screen and (min-width:0\0){
	.navi > li:first-child{padding-left:0;}
	.navi > li:last-child{padding-right:0;}
}

/* 웹 반응형 */
@media screen and (max-width:1450px){
	/* header common */
	#header .container{width:calc(100% - 40px);}
	.navi li{/* padding:0 1px 0 5px; */padding:0 30px 0 25px;}
	.navi li a{letter-spacing:-0.5px;}

	/* footer */
	#footer .container{width:calc(100% - 40px);}

}
/* 태블릿 반응형 */
@media screen and (max-width:1279px){
	/* header */
	.navi li a, .menu_box .menu_2dp ul li a{font-size:14px;}

}
@media screen and (max-width:1110px){
	/* header */
	#header{
		padding-bottom:0;
		border-bottom:3px solid #ededed;
	}
	#header.fixed{margin-top:0;}
	#main.fixed, .sub.fixed{margin-top:78px;}
	#header .container{width:100%;}
	#header .header_b, #header .header_b:hover{height:auto;}
	#header .header_t{display:none;}
	#header .header_m{
		position:relative;
		padding-top:25px;
		padding-bottom:20px;
		border-bottom:1px solid #595959;
	}
	#header .header_m h1 a{height:30px;}
	.header_m .container > .fl{display:none;}
	.member_box, .header_m .container > .fr, #header .header_b{display:none;}
	.header_m .container > .fr{
		margin:0 0 -20px;
		padding:20px;
		float:none;
		position:static;
		background:#3d3d3d;
		border-top:1px solid #595959;
	}
	
	.member_box{
		padding:15px 0;
		display:none;
		background:#3d3d3d;
	}
	.fixed .member_box{margin-top:20px;}
	.member_box a{
		margin:0 7.5px;
		padding:12.5px 0;
		display:inline-block;
		width:160px;
		font-size:16px;
		line-height:1;
		border:2px solid #eeeeee;
		color:#eeeeee;
		text-transform:uppercase;
	}
	#header .header_m .container .wonjin_num{width: 35px;display: inline-block;position: absolute;left: 64px;top: -3px;}
	.mo_menu_btn{
		position:absolute;
		top:5px;
		left:20px;
		width:25px;
		height:20px;
	}
	.mo_menu_btn span{
		display:block;
		position:absolute;
		width:100%;
		height:3px;
		background:#fff;
	}
	.mo_menu_btn span.middle{top:calc(50% - 1.5px);}
	.mo_menu_btn span.bottom{bottom:0;}
	.mo_menu_btn.on span.top{
		top:8px;
		transform: rotate(45deg);
	}
	.mo_menu_btn.on span.middle{display:none;}
	.mo_menu_btn.on span.bottom{
		bottom:9px;
		transform: rotate(-45deg);
	}
	.mobile_quick{
		padding-top:21px;
		display:block;
		position:absolute;
		top:0px;
		right:20px;
		font-size:10px;
		color:#fff;
		background:url('../image/ico_molang.png')no-repeat center top / contain;
	}
	.mobile_quick.sns{
		right:50px;
		background:url('../image/ico_mobile_sns.png')no-repeat center top / 15px;
	}
	.mobile_quick:hover, .mobile_quick.on{
		color:#69c4d1;
		background-image:url('../image/ico_mohlang.png');
	}
	.mobile_quick.sns:hover, .mobile_quick.sns.on{
		background:url('../image/ico_mobile_hsns.png')no-repeat center top / 15px;
	}
	.mobile_quick_box{
		display:none;
		position:absolute;
		top:50px;
		right:0;
		width:80px;
	}
	.mobile_quick_box.sns{right:28px;}
	.mobile_quick_box:after{
		content: '';
		position: absolute;
		top: -10px;
		right: calc(50% - 20px);
		width: 20px;
		height: 20px;
		transform: rotate(45deg);
		background:#3d3d3d;
	}
	.mobile_quick_box li{
		width:100%;
		border-top:1px solid #4c4c4c;
	}
	.mobile_quick_box li a{
		padding:20px 0;
		display:block;
		background:#3d3d3d;
	}
	.mobile_quick_box li a img{
		margin:0 auto;
		display:block;
		width:40px;
	}

	#header .header_b, #header .header_b:hover{
		position:fixed;
		overflow-y:auto;
		height:calc(100% - 250px);
		background:#f7f7f7;
		z-index:10;
	}
	.navi{
		display:inline-block;
		width:120px;
		overflow:auto;
	}
	.navi li{
		margin:0;
		padding:0;
		display:block;
		background:#3d3d3d;
		border-bottom:1px solid #595959;
	}
	.navi li:nth-child(10){display:block;}
	.navi li a{
		margin:0;
		font-size:15px;
		font-weight:500;
		color:#fff;
	}
	.navi li a:hover, .navi li a.on{
		padding:22px 0;
		border:0 none;
		background-color:#ff3f6e;
	}
	.navi li:nth-child(1) a:hover, .navi li:nth-child(1) a.on{background-color:#3eafbf}
	.navi li:nth-child(2) a:hover, .navi li:nth-child(2) a.on{background-color:#ff3f6e}
	.navi li:nth-child(3) a:hover, .navi li:nth-child(3) a.on{background-color:#6e3696}
	.navi li:nth-child(4) a:hover, .navi li:nth-child(4) a.on{background-color:#00bb70}
	.navi li:nth-child(5) a:hover, .navi li:nth-child(5) a.on{background-color:#198bcb}
	.navi li:nth-child(6) a:hover, .navi li:nth-child(6) a.on{background-color:#ef7470}
	.navi li:nth-child(7) a:hover, .navi li:nth-child(7) a.on{background-color:#a9040a}
	.navi li:nth-child(8) a:hover, .navi li:nth-child(8) a.on{background-color:#0f9e8a}
	.navi li:nth-child(9) a:hover, .navi li:nth-child(9) a.on{background-color:#4188ff}
	.navi li:nth-child(10) a:hover, .navi li:nth-child(10) a.on{background-color:#3eafbf}
	.menu_box{
		padding:0;
		position:absolute;
		top:-1px;
		right:0;
		width:calc(100% - 120px);
	}
	.menu_box .menu_name{display:none;}
	.menu_box .menu_2dp{width:100%;}
	.menu_box .menu_2dp ul{
		margin-left:0;
		width:100%;
	}
	.menu_box .menu_2dp ul li{margin:0;}
	.menu_box .menu_2dp ul li a, 
	#header .header_b:visited .menu_box .menu_2dp ul li a{
		padding:15px 0 15px 10px;
		display:block;
		font-size:19px;
		color:#000000;
		border-bottom:1px solid #dddddd;
	}
	.menu_box .menu_2dp ul li a:hover{
		border-bottom:1px solid #dddddd;
		color:#000;
	}
}

@media screen and (max-width:960px){
	/*  */
	.only_mo{display:block !important;}
	.only_web{display:none !important;}

	/* footer */
	#footer{padding:33px 0 30px;}
	#footer *{font-size:10px;}
	.footer_logo{
		top:0;
		left:calc(50% - 48.5px);
		height:20px;
	}
	.footer_info{
		padding:0;
		padding-top:36px;
		text-align:center;
	}
	.footer_link, .company_info{text-align:center;}
	.company_info{
		margin-top:15px;
		padding-bottom:80px;
	}
	.footer_link li, .company_info li{
		padding:0;
		float:none;
		display:inline-block;
	}
	.footer_link li{
		display:block;
		font-size:15px;
		line-height:1.5;
	}
	.company_info li{
		display:block;
		line-height:1.5;
	}
	.company_info li:nth-child(1),
	.company_info li:nth-child(2){display:inline-block;}
	.footer_sns{
		bottom:0;
		right:calc(50% - 136px);
	}
	.footer_sns li{margin-left:20px;}
	.footer_sns li a{
		width:50px;
		height:50px;
		font-size:0 !important;
		background-image: url(../image/ico_mofooter_csns.png) !important;
		background-size:cover !important;
	}
	
	.mobile_question.only_mo{display:none !important;}
	#warp {padding-bottom: 75px;}
}

/* 모바일 반응형 */
@media screen and (max-width:768px){
	/**/
	.top_btn{
		bottom:95px;
		right:15px;
		width:40px;
		height:40px;
		background-size:10px;
		opacity:1;
	}
	
	/* header */
	#main.fixed, .sub.fixed{margin-top:53px;}
	#header .header_m{padding:15px 0;}
	#header .header_m h1 a{height:20px;}
	.mo_menu_btn{
		top:3px;
		width:16.5px;
		height:13.5px;
	}
	.mo_menu_btn span{height:2px;}
	.mo_menu_btn.on span.top{top:6px;}
	.mo_menu_btn span.middle{top:calc(50% - 1px);}
	.mo_menu_btn.on span.bottom{bottom:6px;}
	.mobile_quick{
		top:-5px;
		font-size:12px;
		background-size:17.5px;
	}
	.fixed .member_box{
		padding:10px 0;
		margin-top:15px;
	}
	.member_box a{
		margin:0 5px;
		padding:7px 0;
		width:105px;
		font-size:13px;
		border-width:1px;
	}
	.header_m .container > .fr{
		margin-bottom:-15px;
		padding:15px 0 20px;
	}
	#header .header_b, #header .header_b:hover{height:calc(100% - 175px);}
	.navi li a{
		padding:50px 0 15px !important;
		font-size:10px;
		background-repeat:no-repeat;
		background-position:center 15px;
	}
	.navi li:nth-child(1) a{
		background-image: url('../image/ico_menu09.png');
		background-position-y:;
		background-size:25px;
	}
	.navi li:nth-child(2) a{
		background-image: url('../image/ico_menu01.png');
		background-position-y:;
		background-size:27px;
	}
	.navi li:nth-child(3) a{
		background-image: url('../image/ico_menu02.png');
		background-position-y:;
		background-size:20px;
	}
	.navi li:nth-child(4) a{
		background-image: url('../image/ico_menu03.png');
		background-position-y:;
		background-size:20px;
	}
	.navi li:nth-child(5) a{
		background-image: url('../image/ico_menu04.png');
		background-position-y:;
		background-size:30px;
	}
	.navi li:nth-child(6) a{
		background-image: url('../image/ico_menu05.png');
		background-position-y:;
		background-size:25px;
	}
	.navi li:nth-child(7) a{
		background-image: url('../image/ico_menu06.png');
		background-position-y:;
		background-size:23px;
	}
	.navi li:nth-child(8) a{
		background-image: url('../image/ico_menu07.png');
		background-position-y:;
		background-size:25px;
	}
	.navi li:nth-child(9) a{
		background-image: url('../image/ico_menu08.png');
		background-position-y:;
		background-size:27px;
	}
	.navi li:nth-child(10) a{
		background-image: url('../image/ico_menu10.png');
		background-position-y:;
		background-size:20px;
	}

	.contact_link li{margin:0 10px;}
	.contact_link li a{
		padding-top:30px;
		font-size:10px;
	}
	.contact_link li:nth-child(1) a {
		background: url('../image/mocs_menu01.png')no-repeat center 0;
		background-size:18px;
	}
	.contact_link li:nth-child(2) a {
		background: url('../image/mocs_menu02.png')no-repeat center 3px;
		background-size:20px;
	}
	.contact_link li:nth-child(3) a {
		background: url('../image/mocs_menu03.png')no-repeat center 4px;
		background-size:19px;
	}
	.contact_link li:nth-child(4) a {
		background: url('../image/mocs_menu04.png')no-repeat center 0;
		background-size:17px;
	}
	.menu_box .menu_2dp ul, .menu_box .menu_2dp ul:first-child{margin-left:15px;}
	.menu_box .menu_2dp ul li a, #header .header_b:visited .menu_box .menu_2dp ul li a{
		padding:15px 0 15px 5px;
		font-size:13.5px;
	}
	.mobile_quick_box{
		top:34px;
		right:5px;
		width:55px;
	}
	.mobile_quick.sns{right:60px;}
	.mobile_quick_box.sns{right:44px;}
	.mobile_quick_box:after{
		top: -3.5px;
		right: calc(50% - 7.5px);
		width:15px;
		height:15px;

	}
	.mobile_quick_box li a{
		padding:15px 0;
	}
	.mobile_quick_box li a img{width:25px;}
	#header .header_m .container .wonjin_num{width: 25px;display: inline-block;position: absolute;left: 53px; top: -2px;}

	/* mobile_question */
	.mobile_question.only_mo{
		padding:10px 0;
		display:block !important;
		position:fixed;
		clear:both;
		overflow:hidden;
		bottom:0;
		left:0;
		width:100%;
		background:#3d3d3d;
		z-index:100;
	}
	.mobile_question li{float:left;width:25%;}
	.mobile_question li a{
		padding-top:45px;
		display:block;
		font-size:10px;
		font-weight:500;
		text-align:center;
	}
	.mobile_question li:nth-child(1) a{background:url('../image/mobile_quick01.png')no-repeat center top / 40px; color:#fec9b9;}
	.mobile_question li:nth-child(2) a{background:url('../image/mobile_quick02.png')no-repeat center top / 40px; color:#f2ca80;}
	.mobile_question li:nth-child(3) a{background:url('../image/mobile_quick03.png')no-repeat center top / 40px; color:#5bb7c4;}
	.mobile_question li:nth-child(4) a{background:url('../image/mobile_quick04.png')no-repeat center top / 40px; color:#e4c6f1;}

	#tocplusWindow{display:none !important;}
}
@media screen and (max-width:350px){
	.contact_link li {width: calc(25% - 23px); }
}

/* ie 대응 */
@media screen and (min-width:0\0){
	
}