@charset "utf-8";
/* *******************************************************
 * filename : new_main.css
 * description : 퀵허브 리뉴얼 메인 레이아웃 및 컨텐츠 CSS
 * 최종수정일 : 2023.08.18
******************************************************** */


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:570px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */

/* 메인비쥬얼 세로값 변경 220922 - 위탁사용메인때문에 세로값 css 분리*/
.newmain{height:400px !important;}
.newmain .main-login-con{margin-top: -143px !important; } /* 로그인박스위치 변경 */
/* //메인비쥬얼 세로값 변경 220922 - 위탁사용메인때문에 세로값 css 분리*/

.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: -30px;
	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:600; letter-spacing:-0.35px; color:rgba(51,51,51,0.6); margin-bottom:15px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:42px; font-weight: 700; line-height: 1.28; letter-spacing:-0.5px; color:#333;}
/* 2번째 텍스트 opacity 값 변경 */
.main-visual-item .main-visual-txt-con .visual02-txt{font-size:40px; font-weight: 700; line-height: 1.28; color:rgba(51,51,51,1) !important; margin-bottom:15px;}
.main-visual-item .main-visual-txt-con .visual02-txt span{line-height:1 !important;}

/* 메인 비주얼 :: 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;
}

/* 메인비쥬얼 2번째 버전 */
.main-visual-txt-ver2{margin-top:20px; font-size:20px !important; font-weight: 400 !important; line-height: 1.28;}
.main-visual-txt-ver2 span{position:relative;display:block; padding:0 30px; margin:5px 0;}
.main-visual-txt-ver2 span i{position:absolute;top:0; left:0; font-size:24px; color:#783cb3; font-weight:bold;}

/* 20221124 메인비쥬얼 4번째 버튼*/
.main-visual-item .main-btn{display: block; width: 160px; height: 42px; line-height:40px; font-size: 15px; font-weight: 400; letter-spacing: -0.25px; color: #fff; background-color: #8329db; -webkit-border-radius: 40px; border-radius: 40px;}
.main-visual-item .main-btn i{margin-left:8px;}

/* 2023.08.16 메인비쥬얼 부가세신고 추가 */
.main-visual-txt-ver3{position:absolute; top:0;left:50%; margin-left:-240px;}
@media all and ( max-width: 1180px ){
	.main-visual-txt-ver3{margin-left:-180px;}
	.main-visual-txt-ver3 img{width:80%;}
}
@media all and ( max-width: 800px ){
	.main-visual-txt-ver3{position: relative; top:auto; left:auto; margin-left:auto; margin-top:20px;}
	.main-visual-txt-ver3 img{width:100%;}
}


@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: 53%; 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(0,0,0,0.15); 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: #79658d;}
.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: 53%; 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: #79658d;}

@media all and ( max-width: 800px ){
	#mainVisual{height: auto;}
	
	.newmain{height:auto !important;}
	/* 메인 비주얼 :: 이미지 */
	.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); padding:0 10px;}
	.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:30px;}
	/* 메인 비주얼 :: 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:35px; 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;}
	
	/* 메인 비쥬얼 :: 2번째 텍스트 opacity 값 변경 */
	.main-visual-item .main-visual-txt-con .visual02-txt{font-size:26px;}
	
	/* 메인 비쥬얼 :: 2번째 텍스트 opacity 값 변경 */
	.main-visual-txt-ver2 span{display:block; border:0; font-size:17px; font-weight:400;margin:5px 0; width:100%;}
	/*.main-visual-txt-ver2 span em{position:absolute; top:17px;left:28px;}*/
}

/* 로그인 */
.main-login-con{position: absolute; width: 100%; top: 50%; margin-top: -183px; left: 0;}
.main-login-wrapper{position: relative; width: 240px; float: right; z-index: 999; margin-right: 15px;}
.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: #333; 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; line-height:1;}
.main-login-top h5{margin-bottom: 18px; font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: #000; text-align: center;}
.main-login-top .login-inner 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 .login-inner li + li{margin-top: 10px;}
.main-login-top .login-inner li .tit{float: left; width: 55px; font-size: 13px; line-height: 40px; letter-spacing: -0.25px; color: #000;}
.main-login-top .login-inner li input{float: left; width: calc(100% - 55px); border-bottom-color: transparent; border:none;}
.main-login-top .login-inner li input:focus{border:none; -webkit-box-shadow: none; box-shadow: none;}
.main-login-top .login-check{margin: 10px 0 12px; text-align: left; padding-left:5px; line-height:1 }
.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: #8329db; -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: 45px; float: left; background-color: #000; font-size: 13px; line-height: 45px; letter-spacing: -0.25px; color: #fff; text-align: center;}
.main-login-bottom a:first-child{background-color: #333;}
/* 로그인 후 버튼- 2개*/
.main-login-bottom.after-login-btn a{}
.main-login-bottom.after-login-btn a:first-child{background-color: #8329db;}
.main-login-bottom.after-login-btn a:last-child{background-color: #333;}

/* 로그인 후 버튼 - 1개*/
.main-login-bottom.after-login-btn2 a{width:100%; clear:both; background:#eee; color:#666;}

/* 로그인 후 컨텐츠 */
.main-login-top .after-login-inner {font-size:13px;}
.main-login-top .after-login-inner li{padding: 8px 5px; width: 100%; display:table; border-bottom:1px solid #ddd;  -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-login-top .after-login-inner li:last-child{border-bottom:none; }
.main-login-top .after-login-inner li span{display:inline-block; display:table-cell; vertical-align:middle; text-align:left; white-space:nowrap;}
.main-login-top .after-login-inner li span:nth-child(1){color:#666;}
.main-login-top .after-login-inner li span:nth-child(2){text-align:right;}
.main-login-top .after-login-inner li span button{ vertical-align:middle;margin-right:5px;}
.main-login-top .after-login-inner li span i{ vertical-align:middle;}
.main-login-top .after-login-inner li span u a{color:#ee3e67}
/* 로그인 후 컨텐츠 : 확인 메세지*/
.main-notice-message{position:relative; width:100%; height:32px; margin:25px 0 5px; font-size:13px; background:#fad549;padding:7px 8px; color:#000;white-space:nowrap; box-sizing:border-box;}
.main-notice-message:before{content:"";position:absolute;display:inline-block;border-width:8px;border-style:solid; top:30px; left:10px; border-color:#fad549  transparent transparent transparent;}
.main-notice-message span{vertical-align:middle; padding-right:50px;}
.main-notice-message i{font-size:18px; vertical-align:middle; }
.main-notice-message a.btn-more{position:absolute; top:9px; right:8px; font-size:12px; display:inline-block;}

.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: 40px;}
	.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);}
}
@media all and (max-width:640px){
	.main-login-con{bottom: 8%;}
}
@media all and (max-width:480px){
	.main-login-con{bottom: 9%;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
.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: #8329db;}

@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/#007df0+0,002d95+100 */
background: #8329db; /* Old browsers */
background: -moz-linear-gradient(left,  #8329db 0%, #7918d8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #8329db 0%,#7918d8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #8329db 0%,#7918d8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8329db', endColorstr='#7918d8',GradientType=1 ); /* IE6-9 */}
.main-quick-list{}
.main-quick-item{float: left;/* width: 16.66%;*/ width:20%; height: 160px; position: relative;}
.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: 58px; position: relative; z-index: 1;}
.main-quick-item a .icon01{width: 54px; background: url("../img/main/main_quick_img01.png") 0 0 no-repeat;}
.main-quick-item a .icon02{width: 44px; background: url("../img/main/main_quick_img02.png") 0 0 no-repeat;}
.main-quick-item a .icon03{width: 47px; background: url("../img/main/main_quick_img03.png") 0 0 no-repeat;}
.main-quick-item a .icon04{width: 48px; background: url("../img/main/main_quick_img04.png") 0 0 no-repeat;}
.main-quick-item a .icon05{width: 57px; background: url("../img/main/main_quick_img05.png") 0 0 no-repeat;}
.main-quick-item a .icon06{width: 49px; background: url("../img/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;}
.main-quick-item a div.sub-txt{display:none; opacity:0;filter:Alpha(opacity=0);-webkit-transition: all 0.3s; transition: all 0.3s;}

#main-quick-slide-area{display:none;}

@media all and ( min-width: 801px ){
	.main-quick-item a:hover,
	.main-quick-item.on a{top: -20px; height: 180px;}
	.main-quick-item a:hover:before,
	.main-quick-item.on a{height: 180px; background-color: #9f41fb; -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.on a:hover:before{box-shadow:none;}
	.main-quick-item:last-child a:hover:before,
	.main-quick-item:last-child.on a{background-color: #6864ff !important;}
	.main-quick-item a:hover .icon,
	.main-quick-item.on a .icon{margin-top:-10px;}
	.main-quick-item a:hover .icon01,
	.main-quick-item.on a .icon01{background: url("../img/main/main_quick_img01_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon02,
	.main-quick-item.on a .icon02{background: url("../img/main/main_quick_img02_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon03,
	.main-quick-item.on a .icon03{background: url("../img/main/main_quick_img03_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon04,
	.main-quick-item.on a .icon04{background: url("../img/main/main_quick_img04_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon05,
	.main-quick-item.on a .icon05{background: url("../img/main/main_quick_img05_on.png") 0 0 no-repeat;}
	.main-quick-item a:hover .icon06,
	.main-quick-item.on a .icon06{background: url("../img/main/main_quick_img06_on.png") 0 0 no-repeat;}
	
	.main-quick-item a:hover p,
	.main-quick-item.on a p{margin-top: 12px; -webkit-transition: all 0.3s; transition: all 0.3s;}
	.main-quick-item a:hover div.sub-txt,
	.main-quick-item.on a div.sub-txt{display:block; width:100%;padding:10px 20px 0; color:#ffffff; opacity:1.0; filter:Alpha(opacity=100); text-align:center; font-weight:200; font-size:14px; z-index: 2;}
}

@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; background-color: #9f41fb;}
	.main-quick-item{width: 33.33%; height: 100px; background-color: #8329db;}
	.main-quick-list .main-quick-item:nth-child(even){background-color: #9f41fb;}
	.main-quick-list .main-quick-item:nth-child(5){background-color: #6864ff;} /* 연동서비스 색만 다름*/
	.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: 33px; background: url("../img/main/main_quick_img01.png") center/cover no-repeat;}
	.main-quick-item a .icon02{width: 27px; background: url("../img/main/main_quick_img02.png") center/cover no-repeat;}
	.main-quick-item a .icon03{width: 28px; background: url("../img/main/main_quick_img03.png") center/cover no-repeat;}
	.main-quick-item a .icon04{width: 29px; background: url("../img/main/main_quick_img04.png") center/cover no-repeat;}
	.main-quick-item a .icon05{width: 34px; background: url("../img/main/main_quick_img05.png") center/cover no-repeat;}
	.main-quick-item a .icon06{width: 30px; background: url("../img/main/main_quick_img06.png") center/cover no-repeat;}
	.main-quick-item a p{margin-top: 10px; font-size: 12px;}
}


/* -------- 메인 컨텐츠 :: 02 공지사항 & 업데이트 -------- */
#mainNoticeCon{width: 100%; margin-bottom:50px; padding: 20px 0; background:#f6f6f6; border-bottom:1px solid #EFEFEF}
.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: 15px; 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 탭 컨텐츠 -------- */
#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("../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("../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: #f8f8f8; 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:#7a19d8;}
.main-tab-list-style ul li.selected a em{color:#fff;}
.main-tab-list-style ul li.selected a:before{content:"";position:absolute;display:inline-block;border-width:8px;border-style:solid; top:48px; left:48%; border-color:#7a19d8  transparent transparent transparent;}


/* 탭 안 컨텐츠 */
.main-tab-con{padding-top: 30px;}
.main-tab-con .paging2{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-list-style ul li.selected a:before{border-width:6px; top:28px;}

	/* 탭 안 컨텐츠 */
	.main-tab-con{padding-top: 42px;}
	.main-tab-con .paging2{margin-top: 30px;}
}



/* -------- 2023.08.14 수정 메인 컨텐츠 :: 04 가입 상담 신청 -------- */
#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("../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("../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("../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; */ background:#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: #7918d8; -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 120px; letter-spacing: -0.5px; color: #000; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s; transition: all 0.3s;} /* 2023.08.14 수정*/
.main-member-item .tit{font-size: 30px; line-height: 1.2;}
.main-member-item .txt{margin-top: 30px; font-size: 18px; line-height: 1.4;}
.button-box{margin-top: 25px;} /* 2023.08.14 수정*/
.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: 16px; padding-top: 8px; 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;} /* 2023.08.14 수정*/
.num-txt-box p{position: relative; text-align: center;}
.num-txt-box em{ display: inline-block; color: #aaa; font-size:15px; min-width:98px; margin-top:-9px; vertical-align:middle; text-align:left;}
.num-txt-box span{font-size:25px; color:#000; font-weight:500;}
.only-txt-box{padding-top: 50px;}
.customer-txt{margin-top:0; font-size:13px; color:#666;} /* 2023.08.14 수정*/
.customer-txt h6{font-size:14px; font-weight:400;/* color: #aaa;*/}
/*.customer-txt i{font-size:16px; vertical-align:middle;}*/
.btn-go{display:none; position:absolute; bottom:-30px; -webkit-transition: all 0.3s; transition: all 0.3s;} /* 더보기 버튼 */

/* 20220824 추가 -위탁사용 1개만 나올때 */
.main-member-wrapper2 .main-member-item{position: relative; width: calc(58% - 30px); margin: 0 auto;/* background-color: #fff; */ background:#fff; text-align: center; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s;}

@media all and ( min-width: 801px ){
	.main-member-item:hover{ background:#8329db url("../img/main/main_customer_bg01.png") left/contain no-repeat; -webkit-transition: all 0.3s; transition: all 0.3s;}
	.main-member-item:hover:nth-child(2){background:#8329db url("../img/main/main_customer_bg02.png") left/cover no-repeat;} /* 2번째만 배경틀림 */ /* 2023.08.14 cover로 변경*/
	.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;}
	
	.main-member-item:hover .num-txt-box p,
	.main-member-item:hover .num-txt-box span,
	.main-member-item:hover .num-txt-box em{color: #fff;}
	
	.main-member-item:hover .customer-txt{color: #fff;}
	.main-member-item:hover .btn-go{display:block; bottom:30px; left:50%; margin-left:-19px; color:#fff; z-index:9998;}

}
@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-item:hover{ background-image:none;}
	.main-member-item:hover:nth-child(2){ background-image:none;}
		
	.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;}
	.num-txt-box p{text-align:center;}
	.num-txt-box em{margin-left:-30px;  min-width:90px; }
	
	/* 20220824 추가 -위탁사용 1개만 나올때 */
	.main-member-wrapper2 .main-member-item{position: relative; width: calc(100% - 30px); margin: 15px;} 
}
@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 em{font-size: 12px;  margin-top:-5px; }
	.num-txt-box span{font-size: 18px; }
	.only-txt-box{padding-top: 15px;}
	
	.customer-txt{font-size:12px;}
	.customer-txt h6{font-size:12px; color: #aaa;}
	
	/* 20220824 추가 -위탁사용 1개만 나올때 */
	.main-member-wrapper2 .main-member-item{position: relative; width: calc(100% - 15px);  margin: 7.5px;} 
}

/* 메인 컨텐츠 아코디언 list*/
.bbs-list-tbl + .main-bbsjoin .accordion-list,
.bbs-list-tbl + .main-faq .accordion-list{border-top: none;}
.accordion-list{width:100%;/* border-top:1px solid #ada8a8; */}
.accordion-list-item{border-bottom:1px solid #ddd;box-sizing:border-box;}
.accordion-title{width:100%;position:relative;padding:9px 0;display:table;cursor: pointer; font-size:14px;}
.accordion-title span{display:table-cell;vertical-align:middle; text-align:center;}
.accordion-title:hover{background:#f9f9f9;}

.main-bbsjoin .accordion-title .column1{width:10%;}
.main-bbsjoin .accordion-title .column2{width:75%;}
.main-bbsjoin .accordion-title .column3{width:15%;}

.main-faq .accordion-title .column1{width:9.5%;}
.main-faq .accordion-title .column2{width:8.5%;}
.main-faq .accordion-title .column3{width:67%;}
.main-faq .accordion-title .column4{width:15%;}

.accordion-title .title{text-align:left;}

.accordion-cont{width:100%;border-top:1px solid #eee;/*padding:21px;*/background:#fbfbfb;box-sizing:border-box;}
.accordion-cont .inner{width:100%; font-size:14px; display:inline-block;}
.main-bbsjoin .accordion-cont .inner{ padding:25px 120px; }
.main-faq .accordion-cont .inner{ padding:25px 133px;}
.accordion-cont .inner .cm-fl{width:30%;}
.accordion-cont .inner .cm-fr{width:70%;}
.accordion-cont .company-logo{ display:table; width:250px;height:100px; padding:10px; text-align:center; background:#fff; border:1px solid #ddd; overflow:hidden; box-sizing:border-box;}
.accordion-cont .company-logo span{display:table-cell; vertical-align:middle; text-align:center;}
.accordion-cont img{max-width:100%;}
.accordion-cont .inner h4{background:none; font-size:16px; font-weight:600;}
.accordion-cont .inner .cm-fr p{margin:10px 0;  word-wrap:break-word; white-space:normal;}
.accordion-cont .inner a{color:#8329db !important;}

@media all and (max-width:1160px){
	/* 메인 게시판 컨텐츠 아코디언 list*/
	.accordion-cont .inner .cm-fl{width:30%;}
	.accordion-cont .inner .cm-fr{width:70%;}
	
	.main-bbsjoin .accordion-cont .inner{ padding:25px 90px;}
	.main-faq .accordion-cont .inner{padding:25px 100px;}
	
}

@media all and (max-width:1024px){
	/* 메인 게시판 컨텐츠 아코디언 list*/
	.accordion-cont .inner .cm-fl{width:36%;}
	.accordion-cont .inner .cm-fr{width:64%;}
	
	.main-bbsjoin .accordion-cont .inner{ padding:25px 70px;}
	.main-faq .accordion-cont .inner{padding:25px 80px;}
	
}

@media all and (max-width:800px){
	/* 메인 게시판 컨텐츠 아코디언 list*/
	.accordion-tilte{position:relative; width:auto; padding:12px 10px; }
	.accordion-title span{display:block;}
	.accordion-title .column1,
	.accordion-title .column2,
	.accordion-title .column3,
	.accordion-title .column4{clear:both; width:100% !important; border-bottom:0; text-align:left; padding:5px 0; font-size:12px;}
	.accordion-title .bbs-inline{display:inline-block; width:auto; margin-right:4%;}
	.accordion-title .column1:not(.title):not(.bbs-no-data):before,
	.accordion-title .column2:not(.title):not(.bbs-no-data):before,
	.accordion-title .column3:not(.title):not(.bbs-no-data):before,
	.accordion-title .column4:not(.title):not(.bbs-no-data):before{padding-right:5px; color:#aaa; content: attr(data-label);}
	.accordion-title .title{padding: 5px 0; padding-bottom: 0;}
	
	.main-bbsjoin .accordion-cont .inner{ padding:20px; }
	.main-faq .accordion-cont .inner{ padding:20px;}
	
	.accordion-cont .inner{padding:25px; font-size:12px;}
	.accordion-cont .inner .cm-fl,
	.accordion-cont .inner .cm-fr{clear:both; display:block; width:100%;}
	.accordion-cont .inner h4{font-size:14px; margin-top:10px;}
	
}


/* right 퀵메뉴*/
.rightbanner-wrap{position: absolute ;/* top: 240px;*/ top:470px; left: 0%; width:120px;margin-left: 100px; background:#fff; border-radius: 20px 0 23px 0; -webkit-box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.15);box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.15);box-sizing:border-box; z-index: 999;}
.rightbanner-wrap{text-align:center;}
.rightbanner-wrap a{display:block; width:100%; height:100%; cursor:pointer;}
.rightbanner-wrap .title{ padding:12px 5px;background:#ebebeb; font-size:14px; color:#000; border-radius: 20px 0 0 0; font-weight:500}
.rightbanner-wrap .right-quick-menu{padding:0 10px;}
.rightbanner-wrap .right-quick-menu li{font-size:13px;}
.rightbanner-wrap .right-quick-menu li a{ width:100%;/* height:90px;*/padding:13px 3px 10px;border-bottom:1px solid #eee; -webkit-transition: all 0.3s; transition: all 0.3s;}
.rightbanner-wrap .right-quick-menu li a:hover{color:#8329db;}
.rightbanner-wrap .right-quick-menu li a span{display:block; margin:0 auto;}
.rightbanner-wrap .right-quick-menu li:last-child a{ border-bottom:none;}
.rightbanner-wrap .right-quick-menu li a p{margin-top:5px;}
.rightbanner-wrap .right-quick-menu li a.ico01 span{width: 42px; height:39px; background: url("../img/main/main_right_quickmenu01.png") 0 0 no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico02 span{width: 31px; height:38px; background: url("../img/main/main_right_quickmenu02.png") 0 0 no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico03 span{width: 40px; height:35px; background: url("../img/main/main_right_quickmenu03.png") 0 0 no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico04 span{width: 43px; height:39px; background: url("../img/main/main_right_quickmenu04.png") 0 0 no-repeat;}  /* 2023.03.15 추가 */
.rightbanner-wrap .right-quick-menu li a.ico01:hover span{ background: url("../img/main/main_right_quickmenu01_on.png") 0 0 no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico02:hover span{ background: url("../img/main/main_right_quickmenu02_on.png") 0 0 no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico03:hover span{ background: url("../img/main/main_right_quickmenu03_on.png") 0 0 no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico04:hover span{ background: url("../img/main/main_right_quickmenu04_on.png") 0 0 no-repeat;} /* 2023.03.15 추가 */

.rightbanner-wrap .foot-btn{ }
.rightbanner-wrap .foot-btn a{color:#fff; padding: 6px 5px; background:#333; border-radius: 0 0 20px 0; -webkit-transition: all 0.3s; transition: all 0.3s;}
.rightbanner-wrap .foot-btn a:hover{ background:#8329db;}

@media all and ( max-width: 1480px ){
/* right 퀵메뉴*/
.rightbanner-wrap { top:740px; margin-left: 0px; width:100px;}
.rightbanner-wrap .right-quick-menu li{font-size:12px;}
.rightbanner-wrap .right-quick-menu li a.ico01 span{width: 35px; height:33px; background: url("../img/main/main_right_quickmenu01.png") center/cover no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico02 span{width: 24px; height:29px; background: url("../img/main/main_right_quickmenu02.png") center/cover no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico03 span{width: 33px; height:29px; background: url("../img/main/main_right_quickmenu03.png") center/cover no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico01:hover span{ background: url("../img/main/main_right_quickmenu01_on.png") center/cover no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico02:hover span{ background: url("../img/main/main_right_quickmenu02_on.png") center/cover no-repeat;}
.rightbanner-wrap .right-quick-menu li a.ico03:hover span{ background: url("../img/main/main_right_quickmenu03_on.png") center/cover no-repeat;}
}

@media all and ( max-width: 800px ){
.rightbanner-wrap {display: none;}
}


/*********** 20220923 메인컨텐츠 도입사례 추가*************/
#mainIntroductionCon{position: relative; padding: 70px 0; margin-bottom:50px;}
#mainIntroductionCon .area{max-width:1207px;}
.main-intro-title:before{content:""; left:0; top:50%; position:absolute; background:#ddd; width:38%; height:1px; z-index:1;}
.main-intro-title:after{content:""; right:0; top:50%; position:absolute; background:#ddd; width:38%; height:1px; z-index:1;}
.main-intro-title{position:relative;height:45px; text-align:center; margin-bottom:24px; z-index:99;}
.main-intro-title span:before{content:""; display:inline-block; width:27px; height:29px; margin-top:-5px; margin-right:8px; background: url("../img/main/icon_intro_logo.png") center/contain no-repeat; vertical-align:middle;}
.main-intro-title span{position:absolute; top:0; left:50%; margin-left:-138px; padding:0 20px; display:inline-block;  font-size:30px; font-weight:600; color:#000; vertical-align:middle; background:#fff;  z-index:999;}
.main-intro-sub-con img{max-width:100%;text-align:center; margin:0 auto;}

@media all and (max-width:800px){
	#mainIntroductionCon {padding:30px 0; margin-bottom:20px;}
	.main-intro-title{height:30px;}	
	.main-intro-title span:before{ width:24px; height:24px; }
	.main-intro-title span{margin-left:-100px; font-size:20px;}
}

 /******************************
 	20220811 위탁사용 메인 
  ******************************/
 /*메인텍스트 style3추가 (main-visual-txt3)*/
.main-visual-item .main-visual-txt-con .main-visual-txt1.client-txt {color:#111; font-weight: 900; font-size: 32px; margin: 50px 0 10px 0}
.main-visual-item .main-visual-txt-con .main-visual-txt3{opacity:0;}
.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:16px; font-weight:400; letter-spacing:-0.35px; color:rgba(50,50,50,1); margin-bottom:20px;}
.main-visual-item.active-item .main-visual-txt3{-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-txt3{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item .main-visual-txt3.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;}

/*퀵 아이콘*/
.video-quick-item{width: 12.5%;}
.video-quick-item a .icon{display: block; height: 58px; position: relative; z-index: 1;}
.video-quick-item a .video-icon01{width: 60px; background: url("../img/main/client_quick_img01.png") 0 0 no-repeat;}
.video-quick-item a .video-icon02{width: 60px; background: url("../img/main/client_quick_img02.png") 0 0 no-repeat;}
.video-quick-item a .video-icon03{width: 60px; background: url("../img/main/client_quick_img03.png") 0 0 no-repeat;}
.video-quick-item a .video-icon04{width: 60px; background: url("../img/main/client_quick_img04.png") 0 0 no-repeat;}
.video-quick-item a .video-icon05{width: 60px; background: url("../img/main/client_quick_img05.png") 0 0 no-repeat;}
.video-quick-item a .video-icon06{width: 60px; background: url("../img/main/client_quick_img06.png") 0 0 no-repeat;}
.video-quick-item a .video-icon07{width: 60px; background: url("../img/main/client_quick_img07.png") 0 0 no-repeat;}
.video-quick-item a .video-icon08{width: 60px; background: url("../img/main/client_quick_img08.png") 0 0 no-repeat;}
.video-quick-item a p{margin-top: 15px; font-size: 16px; line-height: 1.25; letter-spacing: -0.35px; color: #fff;} 
@media all and ( min-width: 801px ){
.video-quick-item a:hover{top: -40px; height: 200px;}
.video-quick-item a:hover:before{height: 200px; background-color: #9f41fb; -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);}
.video-quick-item:last-child a:hover:before{background-color: #6864ff !important;}
.video-quick-item a:hover .icon{margin-top:-20px;}
.video-quick-item a:hover .video-icon01{background: url("../img/main/client_quick_img01_on.png") 0 0 no-repeat;}
.video-quick-item a:hover .video-icon02{background: url("../img/main/client_quick_img02_on.png") 0 0 no-repeat;}
.video-quick-item a:hover .video-icon03{background: url("../img/main/client_quick_img03_on.png") 0 0 no-repeat;}
.video-quick-item a:hover .video-icon04{background: url("../img/main/client_quick_img04_on.png") 0 0 no-repeat;}
.video-quick-item a:hover .video-icon05{background: url("../img/main/client_quick_img05_on.png") 0 0 no-repeat;}
.video-quick-item a:hover .video-icon06{background: url("../img/main/client_quick_img06_on.png") 0 0 no-repeat;}
.video-quick-item a:hover .video-icon07{background: url("../img/main/client_quick_img07_on.png") 0 0 no-repeat;}
.video-quick-item a:hover .video-icon08{background: url("../img/main/client_quick_img08_on.png") 0 0 no-repeat;}
.video-quick-item a:hover p{margin-top: 12px; -webkit-transition: all 0.3s; transition: all 0.3s;}
.video-quick-item a:hover div.sub-txt{display:block; width:100%;padding:10px 20px 0; color:#ffffff; opacity:1.0; filter:Alpha(opacity=100); text-align:center; font-weight:200; font-size:14px; z-index: 2;}
}
@media all and ( max-width: 800px ){
.main-visual-item .main-visual-txt-con :is(.main-visual-txt1.client-txt,.main-visual-txt3) {display: none;}
.client-main-visual-img {margin: -20px auto 0 auto ;}
.video-quick-item{width: 25%; height: 100px; background-color: #8329db;}
.main-quick-item a p{margin-top: 10px; font-size: 12px;}
}