@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-10-25
******************************************************** */


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:570px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	 -webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.05,1.05);
     transform: scale(1.05,1.05);
	-webkit-transition:transform 5000ms  ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	top:50%; left:0px; margin-top: -40px;
	width:100%; 
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:20px; font-weight:500; letter-spacing:-0.35px; color:rgba(255,255,255,0.5); margin-bottom:15px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:50px; font-weight: 600; line-height: 1.28; letter-spacing:-0.5px; color:#fff;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.7s; animation-delay:0.7s;}
.main-visual-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; top: 50%; margin-top: 113px; width:100%; text-align:left; z-index:11;}
.main-visual-con .slick-dots{margin-left: 90px; display:inline-block; vertical-align:top; *display:inline;*zoom:1;}
.main-visual-con .slick-dots li{float:left; margin-left:10px;}
.main-visual-con .slick-dots li:first-child{margin-left:0}
.main-visual-con .slick-dots li button{position: relative; cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:56px; height:6px; background-color:rgba(255,255,255,0.25); font-size:0; -webkit-transform: skew(-40deg); transform: skew(-40deg);}
.main-visual-con .slick-dots li button:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 0; height: 6px; background-color: #fff;}
.main-visual-con .slick-dots li.slick-active button:before{-webkit-animation: dot-width-full 4s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: dot-width-full 4s cubic-bezier(0.4, 0, 0.2, 1) both;}

@keyframes dot-width-full {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

/* 메인 비주얼 :: 화살표 */
.main-visual-arrow{position:absolute; top: 50%; margin-top: 100px; left:0; width:100%; font-size:14px; color:#fff; letter-spacing:-0.5px;}
.main-visual-arrow button{display: inline-block; vertical-align: middle; position: relative; z-index: 11;}
.main-visual-arrow button + button{margin-left: 10px;}
.main-visual-arrow button i{font-size: 30px; color: #fff;}

@media all and ( max-width: 800px ){
	#mainVisual{height: 570px;}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	.main-visual-m-img img{width:100%;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{top: 14.5%; margin-top: 0; -webkit-transform: translateY(0); transform: translateY(0);}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:15px; margin-bottom:10px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:34px;}
	/* 메인 비주얼 :: Dots */
	.main-visual-con .slick-dots-wrapper{top: auto; bottom: 6.5%; margin-top: 0;}
	.main-visual-con .slick-dots{margin-left: 80px;}
	.main-visual-con .slick-dots li{margin-left:5px;}
	.main-visual-con .slick-dots li button{width:40px; height:5px;}
	.main-visual-con .slick-dots li button:before{height: 5px;}
	/* 메인 비주얼 :: 화살표 */
	.main-visual-arrow{top: auto; bottom: 6.1%; margin-top: 0;}
	.main-visual-arrow button + button{margin-left: 10px;}
	.main-visual-arrow button i{font-size: 28px;}
	
}

@media all and (max-width:640px){
	.main-visual-arrow{display:none;}
	.main-visual-con .slick-dots-wrapper{display:none;}
}

/* 로그인 */
/*220829수정*/.main-login-con{position: absolute;width: 100%;top: 50%; margin-top: -183px;}
/*220829수정*/.main-login-wrapper{position: relative; width: 240px; float: right; z-index: 999;}
.main-login-btn{position: absolute; top: -30px; right: -30px; display: block; width: 60px; height: 60px; text-align: center; -webkit-border-radius: 100%; border-radius: 100%; z-index: 1;}
.main-login-btn.close{background-color: #000;}
.main-login-btn.open{background-color: #fff; display: none;}
.main-login-btn.open .tit{position: absolute; top: 50%; margin-top: -8px; right: 70px; font-size: 16px; letter-spacing: -0.5px; color: #fff; display: inline-block;}
.main-login-btn i{font-size: 24px; line-height: 60px; color: #fff;}
.main-login-btn.open i{position: relative; z-index: 1; color: #000;}
.main-login-top{padding: 26px 20px; background-color: #fff; -webkit-border-radius: 20px 0 0 0; border-radius: 20px 0 0 0;}
.main-login-top h5{margin-bottom: 24px; font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: #000; text-align: center;}
.main-login-top ul{}
.main-login-top ul li{padding: 0 15px; width: 100%; height: 40px; background-color: #eee; -webkit-border-radius: 40px; border-radius: 40px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-login-top ul li + li{margin-top: 10px;}
.main-login-top ul li .tit{float: left; width: 55px; font-size: 13px; line-height: 40px; letter-spacing: -0.25px; color: #000;}
.main-login-top ul li input{float: left; width: calc(100% - 55px); border-bottom-color: transparent;}
.main-login-top .login-check{margin: 12px 0; text-align: center;}
.main-login-top .cm-custom-checkbox .checkbox-item label:before{top: 0;}
.main-login-top .login-btn{display: block; width: 100%; height: 40px; font-size: 15px; font-weight: 600; letter-spacing: -0.25px; color: #fff; background-color: #e62913; -webkit-border-radius: 40px; border-radius: 40px;}
.main-login-bottom{-webkit-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; overflow: hidden;}
.main-login-bottom a{display: block; width: 50%; height: 50px; float: left; background-color: #000; font-size: 13px; line-height: 50px; letter-spacing: -0.25px; color: #fff; text-align: center;}
.main-login-bottom a:first-child{background-color: #333;}

.main-login-btn.open > span:nth-child(2) {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s; 
}
.main-login-btn.open > span:nth-child(3) {
	-webkit-animation-delay: 0.6s;
		animation-delay: 0.6s;
}
.main-login-btn.open > span:nth-child(4) {
	-webkit-animation-delay: 0.9s;
		animation-delay:0.9s;
}
.main-login-btn.open > span:nth-child(5) {
	-webkit-animation-delay: 1.2s;
		animation-delay:1.2s;
}
.main-login-btn.open > span:nth-child(6) {
	-webkit-animation-delay: 1.5s;
		animation-delay:1.5s;
}
.main-login-btn.open > span {
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-animation: login-circle 3s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
			animation: login-circle 3s cubic-bezier(1, 2, 0.66, 3) infinite; 
}
@keyframes login-circle {
  0% {
	-webkit-transform: scale(0);
	transform: scale(0);
	opacity: 0.5; 
   }
  50% {
	opacity: 1.0; 
   }
  100% {
	-webkit-transform: scale(1);
			transform: scale(1);
	opacity: 0; } 
}

.main-login-inner{position: absolute; top: 0; right: 0; opacity: 0; transition-property: opacity,transform; transform: translate3d(120px,-150px,120px) scale(.1); transition-duration: 0.7s;}
.main-login-inner.open{opacity: 1; transform: translateZ(0) scale(1); transition-timing-function: cubic-bezier(.175,.885,.32,1.275);}

@media all and (max-width:1260px){
	.main-login-wrapper{margin-right: 35px;}
}
@media all and (max-width:1220px){
	.main-login-con .area{padding: 0;}
	.main-login-wrapper{margin-right: 50px;}
}
@media all and (max-width:800px){
	.main-login-con{top: auto; bottom: 7.5%; margin-top: 0;}
	.main-login-wrapper{margin-right: 0px;}
	.main-login-btn{top: -20px; right: -20px; width: 40px; height: 40px;}
	.main-login-btn.open .tit{margin-top: -6px; right: 52px; font-size: 12px;}
	.main-login-btn i{font-size: 18px; line-height: 40px;}
	.main-login-top{padding: 15px;}
	.main-login-top h5{margin-bottom: 15px; font-size: 17px;}
	.main-login-top ul li{padding: 0 10px; height: 40px;}
	.main-login-top ul li + li{margin-top: 10px;}
	.main-login-top ul li .tit{width: 50px; font-size: 11px;}
	.main-login-top ul li input{width: calc(100% - 50px);}
	.main-login-top .login-check{margin: 12px 0;}
	.main-login-top .login-btn{height: 35px; font-size: 13px;}
	.main-login-bottom a{height: 40px; font-size: 11px; line-height: 40px;}

	.main-login-inner{top: auto; bottom: 0; right: 0; transform: translate3d(120px,150px,120px) scale(.1);}

	.main-login-inner.open {transform:translateZ(0) scale(0.9);}
}
@media all and (max-width:640px){
	#mainVisual{height: auto;}
	.main-login-con{bottom: 8%;}
}
@media all and (max-width:480px){
	.main-login-inner.open {transform:translateZ(0) scale(0.7);}
	.main-login-con{bottom: 0%;}
	.main-login-inner{bottom:0;}
}




/* 로그인(실행하기)***/
.main-login-box{width:220px;height:auto !important;padding:30px 20px 20px 20px;background:#fff;border-radius:30px 0 30px 0;text-align:center;position:relative;z-index:1000;}
.main-login-box li{height:110px; margin-bottom:10px;}
.main-login-box li:first-child{height:50px;}
/* .main-login-box li:first-child p {padding-top:10px;} */
.main-login-box.logout li:first-child p{padding-top:0;}
.main-login-box li:last-child{height:120px; margin-bottom:0; padding-top:10px;}
.main-login-box p{font-size:15px;line-height:1.6;}
.main-login-box b{position:relative;font-weight:normal;font-size:18px;color:#0082FF;}
.main-login-box i.circle{position:absolute;top:0;right:0;display: inline-block; width: 3px; height: 3px; border-radius: 100%; margin-right: 10px; background-color:#0082FF}
.main-login-box i.circle:before{content:'';position:absolute;right:15px;width: 3px; height: 3px; border-radius: 100%; background-color:#0082FF}
.main-login-box i.circle:after{content:'';position:absolute;right:30px;width: 3px; height: 3px; border-radius: 100%; background-color:#0082FF}


.main-start-btn{display:inline-block; width:200px;height:100px;border-radius:20px;text-align:center; color:#fff;
background: #007cef; /* Old browsers */
background: -moz-linear-gradient(left,  #007cef 0%, #002d96 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #007cef 0%,#002d96 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #007cef 0%,#002d96 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007cef', endColorstr='#002d96',GradientType=1 ); /* IE6-9 */}
.main-start-btn p{font-size:18px;}
.main-start-btn i{display:inline-block;margin:20px 0 5px 0;width:30px;height:30px;background: url(/home/images/content/intro_tit_icon2.png)center no-repeat;}

.main-login-box table{width:100%;font-weight:400;line-height:1.2}
.main-login-box table th{vertical-align:top;font-size:16px;color:#000;font-weight:800}
.main-login-box table td{vertical-align:top;font-size:15px;}


.main-login-start-btn{display:inline-block; width:200px; height:50px; line-height:50px; font-size:16px; border-radius:50px; tcext-align:center; color:#fff; 
background: #007cef; /* Old browsers */
background: -moz-linear-gradient(left,  #007cef 0%, #002d96 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #007cef 0%,#002d96 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #007cef 0%,#002d96 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007cef', endColorstr='#002d96',GradientType=1 ); /* IE6-9 */}

.main-login-start-btn.logout{margin-top:10px;background:#f1f1f1 !important;color:#999;}

@media all and (max-width:800px){
	.main-login-box li:last-child{display:none;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
.cm-main-tit{font-size: 24px; line-height: 1.47; letter-spacing: -0.5px; font-weight: 500; color: #000; text-align: center;}
.cm-main-tit span{color: #0070e3;}

@media all and ( max-width: 800px ){
	.cm-main-tit{font-size: 17px;}
}

/* -------- 메인 컨텐츠 :: 01 퀵메뉴 -------- */
#mainQuickCon{position: relative; z-index: 1; width: 100%; height: 160px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007cef+0,002d96+100 */
background: #0051c4; /* Old browsers */
background: -moz-linear-gradient(left,  #0064d4 0%, #002d96 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #0064d4 0%,#002d96 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #0064d4 0%,#002d96 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007cef', endColorstr='#002d96',GradientType=1 ); /* IE6-9 */}
.main-quick-list{}
/*220829수정*/.main-quick-item{float: left; width: 16.66%; height: 160px; position: relative;}
.main-quick-item:first-child a span {position: relative; top: 0px; animation-duration: 2s; animation-iteration-count: infinite; animation-name: jump;}
/*220829수정*//*.main-quick-item:nth-child(2n+1) {background-color: #0170e3;}*/
.main-quick-item:nth-child(2n+1) a:hover:before{height: 200px; background-color: #0170e3;}
.main-quick-item a{position: relative; top: 0; width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; flex-direction: column; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-quick-item a:before{position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 160px; background-color: transparent; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-quick-item a .icon{display: block; height: 54px; position: relative; z-index: 1;}
.main-quick-item a .icon01{width: 50px; background: url("/home/images/main/main_quick_img01.png") 0 0 no-repeat;}
.main-quick-item a .icon02{width: 47px; background: url("/home/images/main/main_quick_img02.png") 0 0 no-repeat;}
.main-quick-item a .icon03{width: 42px; background: url("/home/images/main/main_quick_img03.png") 0 0 no-repeat;}
.main-quick-item a .icon04{width: 48px; background: url("/home/images/main/main_quick_img04.png") 0 0 no-repeat;}
.main-quick-item a .icon05{width: 53px; background: url("/home/images/main/main_quick_img05.png") 0 0 no-repeat;}
.main-quick-item a .icon06{width: 48px; background: url("/home/images/main/main_quick_img06.png") 0 0 no-repeat;}
.main-quick-item a p{margin-top: 15px; font-size: 16px; line-height: 1.25; letter-spacing: -0.35px; color: #fff; position: relative; z-index: 1;}

@media all and ( min-width: 801px ){
	.main-quick-item a:hover{top: -40px; height: 200px;}
	.main-quick-item a:hover:before{height: 200px; background-color: #0082ff; -webkit-border-radius: 15px 0 0 0; border-radius: 15px 0 0 0; -webkit-box-shadow: 25px -25px 20px -10px rgba(0,0,0,0.1); box-shadow: 25px -25px 20px -10px rgba(0,0,0,0.1);}
	.main-quick-item a:hover .icon01{background: url("/home/images/main/main_quick_img01_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon02{background: url("/home/images/main/main_quick_img02_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon03{background: url("/home/images/main/main_quick_img03_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon04{background: url("/home/images/main/main_quick_img04_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon05{background: url("/home/images/main/main_quick_img05_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon06{background: url("/home/images/main/main_quick_img06_on.png") 0 0 no-repeat;}
}

@media all and ( max-width: 1024px ){
	.main-quick-item a p {font-size: 15px;}
}
@media all and ( max-width: 800px ){
	#mainQuickCon{height: auto; background: none;}
	#mainQuickCon .area{padding: 0;}
	.main-quick-item{width: 33.33%; height: 100px; background-color: #0070e3;}
	.main-quick-list .main-quick-item:nth-child(even){background-color: #0051c4;}
	.main-quick-item a{height: 100px;}
	.main-quick-item a:before{display: none;}
	.main-quick-item a .icon{height: 35px;}
	.main-quick-item a .icon01{width: 32px; background: url("/home/images/main/main_quick_img01.png") center/cover no-repeat;}
	.main-quick-item a .icon02{width: 30px; background: url("/home/images/main/main_quick_img02.png") center/cover no-repeat;}
	.main-quick-item a .icon03{width: 27px; background: url("/home/images/main/main_quick_img03.png") center/cover no-repeat;}
	.main-quick-item a .icon04{width: 31px; background: url("/home/images/main/main_quick_img04.png") center/cover no-repeat;}
	.main-quick-item a .icon05{width: 34px; background: url("/home/images/main/main_quick_img05.png") center/cover no-repeat;}
	.main-quick-item a .icon06{width: 31px; background: url("/home/images/main/main_quick_img06.png") center/cover no-repeat;}
	.main-quick-item a p{margin-top: 10px; font-size: 12px;}
}

/*220829수정*/
.quickMenu {width: 120px; z-index: 10; right: 30px; text-align: center; border-radius: 15px 0 15px 0 ; position:fixed; top:200px; overflow:hidden;  box-shadow: 0 3px 5px 5px rgba(0,0,0,0.1)} 
.quickMenu .quickMenu-pc-title {display: block; height: 40px; line-height:40px; color: #fff; font-size: 16px; width: 100%;
background: #2892ec; /* Old browsers */
background: -moz-linear-gradient(left,  #2892ec 0%, #2965f1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #2892ec 0%,#2965f1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #2892ec 0%,#2965f1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007cef', endColorstr='#002d96',GradientType=1 ); /* IE6-9 */}
.quickMenu .qm-list {width: 100%; padding: 0 12px;  background: #fff;}
.quickMenu .qm-list .side-quick-item {width: 100px; height: 90px; display:block; border-bottom: 1px solid #ccc; padding: 15px 0px; box-sizing:border-box;  background: #fff; }
.quickMenu .qm-list .side-quick-item:last-child {border: 0;}
.quickMenu .qm-list .side-quick-item p {font-size: 13px; color: #222; font-weight:400; letter-spacing: -0.75px;}
.quickMenu .qm-list a .sq-icon{width: 40px; height: 40px; margin: 0 auto 10px auto;}

.quickMenu .qm-list a .sq-icon01{background: url("../images/main/side_quick_img01.png?1") 0px 0px no-repeat; }
.quickMenu .qm-list a .sq-icon02{background: url("../images/main/side_quick_img02.png?1") 0px 0px no-repeat; }
.quickMenu .qm-list a .sq-icon03{background: url("../images/main/side_quick_img03.png?1") 0px 0px no-repeat;}
.quickMenu .qm-list a .sq-icon04{background: url("../images/main/side_quick_img04.png?1") 0px 0px no-repeat;}

.quickMenu .go-to-top {height: 30px; width: 100%; background:#2f3438; color: #fff; line-height:30px; cursor:pointer;}
.quickMenu .go-to-top:hover {background: #1a1a1d;}


@media all and ( min-width: 801px ){
.quickMenu .qm-list a:hover p {font-weight:900;}
.quickMenu .qm-list a:hover .sq-icon01{background: url("../images/main/side_quick_img01_on.png?1") 0px 0px no-repeat;}
.quickMenu .qm-list a:hover .sq-icon02{background: url("../images/main/side_quick_img02_on.png?1") 0px 0px no-repeat;}
.quickMenu .qm-list a:hover .sq-icon03{background: url("../images/main/side_quick_img03_on.png?1") 0px 0px no-repeat;}
.quickMenu .qm-list a:hover .sq-icon04{background: url("../images/main/side_quick_img04_on.png?1") 0px 0px no-repeat;}
.quickMenu #side-quick-title,.quickMenu #side-quick-close {display: none;}
}

@media all and ( max-width: 800px ){
.quickMenu {display: none;}
}

/*--------------------------------------------------------*/


/* -------- 메인 컨텐츠 :: 02 공지사항 & 업데이트 -------- */
#mainNoticeCon{width: 100%; padding: 20px 0;}
.main-notice-con{position: relative;}
.main-notice-tit{float: left; width: 16.66%; font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: -0.35px; color: #000;}
.main-notice-board{float: left; width: 66.64%;}
.main-notice-list{height: 20px;}
.main-notice-list li{float: left; width: 100%; height: 20px;}
.main-notice-list li a{display: block; width: 100%; font-size: 16px; line-height: 20px; letter-spacing: -0.35px; color: #000;}
.main-notice-list li a p{width: calc(100% - 100px); float: left;}
.main-notice-list li a span{float: right; width: 100px; display: inline-block; font-size: 14px; opacity: 0.5;}
.main-notice-arrow{position: absolute; top: 50%; margin-top: -12px; right: 0;}
.main-notice-arrow button{display: inline-block; vertical-align: middle;}
.main-notice-arrow button + button{margin-left: 17px;}
.main-notice-arrow button i{font-size: 24px; color: #000;}

@media all and ( max-width: 1024px ){
	.main-notice-tit{width: 150px;}
	.main-notice-board{width: calc(100% - 240px);}
	.main-notice-arrow {right: 15px;}
}
@media all and ( max-width: 800px ){
	#mainNoticeCon{padding: 20px 0 17px;}
	.main-notice-con{padding-right: 85px !important;}
	.main-notice-tit{float: none; width: 100%; font-size: 12px; line-height: 1.3;}
	.main-notice-board{margin-top: 8px; float: none; width: 100%;}
	.main-notice-list{height: 45px;}
	.main-notice-list li a{font-size: 17px;}
	.main-notice-list li a p{width: 100%; float: none;}
	.main-notice-list li a span{margin-top: 3px; float: none; width: 100%; display: block; font-size: 12px;}
	.main-notice-arrow{top: 50%; margin-top: -12px; right: 15px;}
	.main-notice-arrow button + button{margin-left: 12px;}
	.main-notice-arrow button i{font-size: 24px;}
}


/* -------- 메인 컨텐츠 :: 03 이지케어를 선택한 이유 -------- */
#mainSelcetCon{position: relative; padding: 65px 0 40px; background-color: #f7f7f7;}
#mainSelcetCon:before{position: absolute; bottom: -50px; left: 50%; margin-left: -950px; content: ''; width: 171px; height: 211px; background: url("/home/images/main/main_notice_bg01.png") 0 0 no-repeat; z-index: 2;}
#mainSelcetCon:after{position: absolute; top: 0; left: 50%; margin-left: 585px; content: ''; width:276px; height: 167px; background: url("/home/images/main/main_notice_bg02.png") 0 0 no-repeat;}
.main-selcet-tit{font-size: 40px; line-height: 1.2; letter-spacing: -0.65px; color: #000; text-align: center;}
.main-selcet-tit span{color: #0070e3;}
.main-selcet-con{margin-top: 50px;}
.main-selcet-list{}
.main-selcet-item{width: 25%; float: left; text-align: center; letter-spacing: -0.35px; color: #000;}
.main-selcet-item .top-group{}
.main-selcet-item .top-group i{font-size: 32px;}
.main-selcet-item .top-group .tit{margin-top: 35px; font-size: 16px; font-weight: 600;}
.main-selcet-item .top-group .tit strong{font-size: 40px; font-weight: 900;}
.main-selcet-item .txt{margin-top: 20px; font-size: 16px; line-height: 1.25;}
.main-selcet-txt{margin-top: 50px; font-size: 15px; line-height: 1.7; letter-spacing: -0.5px; color: #999; text-align: center;}

@media all and ( min-width: 1921px ){
	#mainSelcetCon:before{left: 0; margin-left: 0;}
	#mainSelcetCon:after{left: auto; right: 107px; margin-left: 0;}
}

@media all and ( max-width: 1024px ){
	.main-selcet-tit{font-size: 35px;}
	.main-selcet-item .top-group .tit{margin-top: 30px; font-size: 16px;}
	.main-selcet-item .top-group .tit strong{font-size: 35px;}
	.main-selcet-item .txt{margin-top: 15px;}
}
@media all and ( max-width: 800px ){
	#mainSelcetCon{padding: 40px 0 30px;}
	#mainSelcetCon:before,
	#mainSelcetCon:after{display: none;}
	.main-selcet-tit{font-size: 25px;}
	.main-selcet-con{margin-top: 30px;}
	.main-selcet-list{}
	.main-selcet-item{width: 100%; float: none; text-align: left;}
	.main-selcet-item + .main-selcet-item{margin-top: 20px;}
	.main-selcet-item .top-group{float: left;}
	.main-selcet-item .top-group i{display: inline-block; vertical-align: middle; font-size: 24px;}
	.main-selcet-item .top-group .tit{margin-left: 20px; display: inline-block; vertical-align: middle; margin-top: 0; font-size: 12px; line-height: 30px;}
	.main-selcet-item .top-group .tit strong{font-size: 25px;}
	.main-selcet-item .txt{float: right; margin-top: 0; font-size: 15px; line-height: 30px;}
	.main-selcet-txt{margin-top: 40px; font-size: 11px;}
}

/* -------- 메인 컨텐츠 :: 04 탭 컨텐츠 -------- */
#mainTabCon{position: relative; padding: 0 0 65px;}
#mainTabCon:before{position: absolute; top: 107px; left: 50%; margin-left: -803px; content: ''; width: 257px; height: 476px; background: url("/home/images/main/main_tab_bg01.png") 0 0 no-repeat;}
#mainTabCon:after{position: absolute; top: 76px; left: 50%; margin-left: 805px; content: ''; width: 438px; height: 419px; background: url("/home/images/main/main_tab_bg02.png") 0 0 no-repeat;}
.cm-tab-container-JS{position: relative; z-index: 1;}
.main-tab-wrapper-style{height:50px; background-color: #f7f7f7;}
.main-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-tab-list-style ul:after{display:none}
.main-tab-list-style ul li{display:table-cell; vertical-align:middle; position:relative; width:25%; background-color: #eee; border:1px solid #ddd; border-top: 1px solid #000; border-left:0;}
.main-tab-list-style ul li:first-child{border-left:1px solid #ddd;}
.main-tab-list-style ul li a{display:table; height:48px; width:100%;}
.main-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#000; font-size:15px; letter-spacing:-0.35px; font-weight: 500; text-align:center;}
.main-tab-list-style ul li.selected{z-index:1; border-bottom-color: #fff;}
.main-tab-list-style ul li.selected a{background-color:#fff;}

/* 탭 안 컨텐츠 */
.main-tab-con{padding-top: 80px;}
/* 고객 탐방 이야기 */
.main-story-wrapper{margin-top: 45px;}
.main-story-list{margin: 0 -15px;}
.main-story-item{width: calc(33.33% - 30px); margin: 0 15px; float: left;}
.main-story-item a{display: block;}
.main-story-img{position: relative; width: 100%; height: 0; padding-top: 63.15%; overflow: hidden;}
.main-story-img .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-story-img .category{display: block; min-width: 90px; height: 30px; line-height: 30px; position: absolute; top: 20px; left: 0; background-color: #fff; -webkit-border-radius: 0 30px 30px 0; border-radius: 0 30px 30px 0; font-size: 13px; letter-spacing: -0.35px; color: #000; text-align: center; z-index: 1;}
.main-story-img .new {position: absolute; min-width: 100px; background: #eec800; color: rgba(0,0,0,0.8); font-size: 12px; text-align:center ; transform: rotate(45deg); top: 10px; right: -30px; font-weight: 600; padding: 4px 0; z-index: 10;  box-shadow: 2pt 2pt 5px 0 rgba(0,0,0,0.2);}
.main-story-txt{padding: 20px 0;}
.main-story-txt .tit{line-height: 24px; letter-spacing: -0.35px; color: #000;}
.main-story-txt .tit h5{float: left; width: calc(100% - 140px); font-size: 18px; font-weight: 500;}
.main-story-txt .tit span{float: right; width: 125px; display: inline-block; font-size: 13px; font-weight: 400; text-align: right;}
.main-story-txt .txt{margin-top: 15px; font-size: 15px; line-height: 1.8; height: 3.6em; letter-spacing: -0.35px; color: #000;}

.main-tab-con .paging{margin-top: 70px;}

@media all and ( min-width: 1921px ){
	#mainTabCon:before{left: 107px; margin-left: 0;}
	#mainTabCon:after{left: auto; right: 0; margin-left: 0;}
}
@media all and ( min-width: 801px ){
	.main-story-item a:hover .bg{-webkit-transform: scale(1.05); transform: scale(1.05);}
}

@media all and ( max-width: 800px ){
	#mainTabCon{padding: 0 0 45px;}
	#mainTabCon:before,
	#mainTabCon:after{display: none;}
	.main-tab-wrapper-style{height:30px;}
	.main-tab-list-style ul{padding: 0;}
	.main-tab-list-style ul li a{height:28px;}
	.main-tab-list-style ul li a em{font-size:11px;}

	/* 탭 안 컨텐츠 */
	.main-tab-con{padding-top: 42px;}
	/* 고객 탐방 이야기 */
	.main-story-wrapper{margin-top: 27px;}
	.main-story-list{margin: -5px;}
	.main-story-item{width: calc(100% - 10px); margin: 5px;}
	.main-story-img .category{min-width: 75px; height: 25px; line-height: 25px; top: 20px; font-size: 11px;}
	.main-story-txt{padding: 20px 0;}
	.main-story-txt .tit{line-height: 24px;}
	.main-story-txt .tit h5{width: calc(100% - 130px); font-size: 17px;}
	.main-story-txt .tit span{width: 115px; font-size: 11px;}
	.main-story-txt .txt{margin-top: 15px; font-size: 12px;}

	.main-tab-con .paging{margin-top: 30px;}
}


/* -------- 메인 컨텐츠 :: 05 홍보영상 -------- */
#mainVideoCon{position: relative; padding: 80px 0 90px; background-color: #daecf1;}
#mainVideoCon:before{position: absolute; top: 69px; left: 50%; margin-left: -960px; content: ''; width: 163px; height: 307px; background: url("/home/images/main/main_video_bg01.png") 0 0 no-repeat;}
#mainVideoCon:after{position: absolute; top: -42px; left: 50%; margin-left: 356px; content: ''; width: 542px; height: 527px; background: url("/home/images/main/main_video_bg02.png") 0 0 no-repeat;}

.main-video-wrapper{margin-top: 65px; position: relative; z-index: 1;}
.main-video-list{margin: 0 -15px;}
.main-video-item{width: calc(33.33% - 30px); margin: 0 15px; float: left;}
.main-video-item a{display: block;}
.main-video-img{position: relative; width: 100%; height: 0; padding-top: 63.15%; overflow: hidden; -webkit-border-radius: 30px 0 0 0; border-radius: 30px 0 0 0;}
.main-video-img:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.2) url("/home/images/main/main_video_cover.png") center/contain no-repeat; z-index: 2;}
.main-video-img .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-video-txt{background-color: #fff; width: 100%; height: 70px; -webkit-border-radius: 0 0 30px 0; border-radius: 0 0 30px 0; text-align: center;}
.main-video-txt h5{font-size: 18px; line-height: 70px; font-weight: 500; letter-spacing: -0.35px; color: #000; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box;}

.main-video-list .slick-arrow{position: absolute; top: 50%; margin-top: -30px; width: 60px; height: 60px; -webkit-border-radius: 100%; border-radius: 100%; background-color: #fff; text-align: center;}
.main-video-list .slick-arrow.slick-prev{left: -81px; text-indent: -2px;}
.main-video-list .slick-arrow.slick-next{right: -81px; text-indent: 2px;}
.main-video-list .slick-arrow i{font-size: 24px; line-height: 60px; color: #000;}

/* 팝업 */
#popupMainVideo{}
/* 비디오 영역 :: 모달 */
.video-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; }
.video-modal-content .modal-close-btn{top:-50px; right:0px;}
.video-modal-content h1 + .modal-close-btn{top:0px;}
.video-modal-content h1{line-height:1.5; padding:0 30px; margin-bottom:15px; font-size:24px; font-weight:400; letter-spacing:-0.5px; text-align:center; color:#fff;}
.video-modal-inner{width:100%;}
.video-modal-inner .video-container{position:relative; width:100%; height:0; padding-top:65%; }
.video-modal-inner .video-container iframe{position:absolute; top:0px; left:0px; right:0px; bottom:0px;}

@media all and ( min-width: 1921px ){
	#mainVideoCon:before{left: 0; margin-left: 0;}
	#mainVideoCon:after{left: auto; right: 62px; margin-left: 0;}
}
@media all and ( min-width: 801px ){
	.main-video-item a:hover .bg{-webkit-transform: scale(1.05); transform: scale(1.05);}
}


@media all and ( max-width: 1440px ){
	#mainVideoCon .area{max-width: none; padding: 0 115px;}
}
@media all and ( max-width: 800px ){
	#mainVideoCon{padding: 45px 0 55px;}
	#mainVideoCon .area{max-width: none; padding: 0 70px;}
	#mainVideoCon .cm-main-tit {margin: 0 -70px;}
	#mainVideoCon:before,
	#mainVideoCon:after{display: none;}

	.main-video-wrapper{margin-top: 25px;}
	.main-video-list{margin: 0 -15px;}
	.main-video-item{width: calc(33.33% - 30px); margin: 0 15px;}
	.main-video-txt{height: 45px;}
	.main-video-txt h5{font-size: 15px; line-height: 45px;}

	.main-video-list .slick-arrow{margin-top: -20px; width: 40px; height: 40px;}
	.main-video-list .slick-arrow.slick-prev{left: -40px; text-indent: -1px;}
	.main-video-list .slick-arrow.slick-next{right: -40px; text-indent: 1px;}
	.main-video-list .slick-arrow i{font-size: 20px; line-height: 40px;}
	/* 팝업 */
	.video-modal-content h1{font-size:18px;}
}


/* -------- 메인 컨텐츠 :: 06 가입 상담 신청 -------- */
#mainMemberCon{position: relative; padding: 100px 0 105px; background-color: #f5f5f5;}
#mainMemberCon:before{position: absolute; bottom: 0; left: 50%; margin-left: -960px; content: ''; width: 443px; height: 285px; background: url("/home/images/main/main_member_bg01.png") 0 0 no-repeat;}
#mainMemberCon:after{position: absolute; bottom: 66px; left: 50%; margin-left: 545px; content: ''; width: 413px; height: 555px; background: url("/home/images/main/main_member_bg03.png") 0 0 no-repeat;}
#mainMemberCon .area:before{position: absolute; top: 0; left: 50%; margin-left: -705px; content: ''; width: 188px; height: 63px; background: url("/home/images/main/main_member_bg02.png") 0 0 no-repeat;}
.main-member-wrapper{position: relative; z-index: 1;}
.main-member-list{margin: 0 -15px; display: flex; flex-wrap: wrap;}
.main-member-item{position: relative; width: calc(33.33% - 30px); margin: 0 15px; background-color: #fff; text-align: center; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-member-item:after{position: absolute; bottom: -380px; left: 50%; margin-left: -250px; display: block; content: ''; width: 500px; height: 300px; background-color: #005fc1; -webkit-border-radius: 100%; border-radius: 100%; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-member-item:before{position: absolute; bottom: 40px; left: 50%; margin-left: -16px; font-size: 32px; color: #000; display: block; content: '\e913'; z-index: 1; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-member-item .a-tag-style{display: block; width: 100%; height: 100%; padding: 60px 40px 130px; letter-spacing: -0.5px; color: #000; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-member-item .tit{font-size: 30px; line-height: 1.2;}
.main-member-item .txt{margin-top: 30px; font-size: 18px; line-height: 1.7;}
.button-box{margin-top: 45px;}
.button-box a{display: block; margin: 0 auto; width: 200px; height: 50px; font-size: 18px; letter-spacing: -0.35px; font-weight: 500; line-height: 46px; border: 2px solid #000; color: #000; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50px; border-radius: 50px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;}
.button-box a + a{margin-top: 10px;}
.num-txt-box, .only-txt-box{margin-top: 20px; padding-top: 25px; border-top: 1px solid #e5e5e5; font-size: 15px; line-height: 1.8; letter-spacing: -0.35px; color: #aaa; -webkit-transition: all 0.3s; transition: all 0.3s;}
.num-txt-box p{position: relative; padding-left: 35px; text-align: left;}
.num-txt-box span{position: absolute; top: 0; left: 5px; display: inline-block;}
.only-txt-box{padding-top: 50px;}
.only-txt-box p{}

@media all and ( min-width: 801px ){
	.main-member-item:hover{background-color: #0070e3;}
	.main-member-item:hover:before{-webkit-transform: rotate(180deg); transform: rotate(180deg); color: #fff;}
	.main-member-item:hover:after{bottom: -190px;}
	.main-member-item:hover .a-tag-style,
	.main-member-item:hover .num-txt-box, 
	.main-member-item:hover .only-txt-box{color: #fff;}
	.main-member-item:hover .button-box a{border-color: #fff; color: #fff;}
	.main-member-item:hover .button-box a:hover{background-color: #fff; color: #000;}
}
@media all and ( min-width: 1025px ){
	.main-member-item:hover:after{bottom: -200px;}
}
@media all and ( min-width: 1921px ){
	#mainMemberCon:before{left: 0; margin-left: 0;}
	#mainMemberCon:after{left: auto; right: 62px; margin-left: 0;}
}

@media all and ( max-width: 1024px ){
	.main-member-list{margin: -15px;}
	.main-member-item{width: calc(100% - 30px); margin: 15px;}
	.main-member-item:after {bottom: -400px; margin-left: -500px; width: 1000px;}
	.button-box {margin-top: 25px;}
	.button-box a {display: inline-block; margin: 0 5px;}
	.button-box a + a{margin-top: 0;}
}
@media all and ( max-width: 800px ){
	#mainMemberCon{padding: 20px 0;}
	#mainMemberCon:before,
	#mainMemberCon:after,
	#mainMemberCon .area:before{display: none;}
	.main-member-list{margin: -7.5px;}
	.main-member-item{position: relative; width: calc(100% - 15px); margin: 7.5px; height: 250px;/* height: 270px; */}
	.main-member-item:after{bottom: -230px; margin-left: -400px; width: 800px; height: 300px; display: none;}
	.main-member-item:before{bottom: 20px; margin-left: -12px; font-size: 24px;}
	.main-member-item .a-tag-style{padding: 40px 0 50px;}
	.main-member-item .tit{font-size: 20px;}
	.main-member-item .txt{margin-top: 10px; font-size: 12px;}
	.button-box{margin-top: 25px;}
	.button-box a{width: 130px; height: 34px; font-size: 12px; line-height: 30px;}
	.num-txt-box, .only-txt-box{margin: 20px 15px 0; padding: 15px 10px 0; font-size: 11px; width: calc(100% - 30px); -webkit-box-sizing: border-box; box-sizing: border-box;}
	.num-txt-box p{padding-left: 30px;}
	.num-txt-box span{position: absolute; top: 0; left: 5px; display: inline-block;}
	.only-txt-box{padding-top: 15px;}
}




















