@charset "utf-8";
/* 메인페이지 */
#spobee_container { width: 100%; height: 100%; }
.header-container { position: fixed; }
.body-container {width: 100%; height: 100%;}

.blue { color: #2ca6df !important; }

/* fullpage section */
.mainfullbox { width: 100%; height: 100%; background-color: #111525; padding: 80px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.mainfullbox.footerbox { height: auto; padding: 0; }
.mainfullbox.section-banner { padding: 0; }

@media (max-width: 1220px) {
	#spobee_container { height: auto; }
	.mainfullbox { height: auto; }
}
@media (max-width: 640px) {
	.mainfullbox { padding:0; }
}


/* fullpage navigation */
#mainfull_navi { position: fixed; top: 50%; right: 30px; transform: translateY(-50%); z-index: 1;}
#mainfull_navi .navi:not(:last-child) { margin-bottom: 5px; }
#mainfull_navi p { position: relative; text-align: center; margin: 0 auto; font-size: 12px; color: #fff; vertical-align: middle; line-height: 10px; width: 27px; height: 27px; border: 4px solid rgba(255,255,255,0); border-radius: 50%;}
#mainfull_navi p:after { content: ''; position: absolute; top:50%; left: 50%; margin-left: -3px; margin-top: -3px; display: block; width: 6px; height: 6px; background:#fff; border-radius: 10px;}
#mainfull_navi p.on { border-color: rgba(255,255,255,0.2)}
@media (max-width: 475px) {
	#mainfull_navi { display: none; }
}


/* ********** 공통 타이틀, 설명 텍스트 ********** */
.section-title { position: relative; width: 100%; text-align: center; margin-bottom: 30px;}
.section-title .text-area { font-size: 1.7rem; font-weight: 100; line-height: 1.8; color: #fff; word-break: keep-all; padding-top: 30px;}
.section-title .title-area { display: inline-block; text-align: center; position: relative; padding: 10px 70px; }
.section-title .title-area:before { position: absolute; content: ''; z-index: 1; left: 0; top: 0; width: 32px; height: 32px; border-top: 7px solid #2ca6df; border-left: 7px solid #2ca6df; }
.section-title .title-area:after { position: absolute; content: ''; z-index: 1; bottom: 0; right: 0; width: 32px; height: 32px; border-bottom: 7px solid #2ca6df; border-right: 7px solid #2ca6df; }
.section-title .title-area h4 { font-size: 3.3rem; margin-bottom: 5px; color: #fff;}
.section-title .title-area p { font-size: 1.7rem; color: rgba(255,255,255,0.5); }
@media (max-width: 640px) {
	.section-title .text-area { font-size: 1.4rem; }
	.section-title .text-area br { display: none; }
	.section-title .title-area { width: 100%; padding: 15px; height: auto; margin-bottom: 20px;}
	.section-title .title-area:after,
	.section-title .title-area:before { border-width: 5px; width: 20px; height: 20px; }
	.section-title .title-area h4 { font-size: 2.5rem !important;}
	.section-title .title-area p { font-size: 1.5rem;}
}

/* 공통 fadein-out */
.fade-class { position: relative; top: 30px; opacity: 0; transition: top 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s linear;}
.fade-in {transition: top 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s linear; top: 0px; opacity: 1;}


/* ********** 공통 more button ********** */

.more-btn-wrap { text-align: center; margin-top: 100px;}
.more-btn-wrap .btn { position: relative; font-weight: 600; font-size: 1.6rem; height: 50px; padding: 0 100px; letter-spacing: 0; overflow: hidden; border: 0; margin-right:10px; }
.more-btn-wrap .btn:last-child {margin-right:0}
.more-btn-wrap .btn p { position: relative; z-index: 1;}
.more-btn-wrap .btn.type-bg {background:#fff; color: #012c40; border: 1px solid #fff; }
.more-btn-wrap .btn.type-border { background:transparent; color: #fff; border: 1px solid #fff; }

.more-btn-wrap .btn.type-border:before, 
.more-btn-wrap .btn.type-border:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: transform .25s; }
.more-btn-wrap .btn.type-border:before { right: -50px; border-right: 50px solid transparent; border-bottom: 80px solid #fff; transform: translateX(-100%); }
.more-btn-wrap .btn.type-border:after { left: -50px; border-left: 50px solid transparent; border-top: 80px solid #fff; transform: translateX(100%); }
.more-btn-wrap .btn.type-border:hover { color: #012c40; }
.more-btn-wrap .btn.type-border:hover:before { transform: translateX(-49%); }
.more-btn-wrap .btn.type-border:hover:after { transform: translateX(49%); }

.more-btn-wrap .btn.type-bg:before, 
.more-btn-wrap .btn.type-bg:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: transform .25s; }
.more-btn-wrap .btn.type-bg:before { right: -50px; border-right: 50px solid transparent; border-bottom: 80px solid #111525; transform: translateX(-100%); }
.more-btn-wrap .btn.type-bg:after { left: -50px; border-left: 50px solid transparent; border-top: 80px solid #111525; transform: translateX(100%); }
.more-btn-wrap .btn.type-bg:hover { color: #fff; }
.more-btn-wrap .btn.type-bg:hover:before { transform: translateX(-49%); }
.more-btn-wrap .btn.type-bg:hover:after { transform: translateX(49%); }
@media (max-width: 475px) {
	.more-btn-wrap { margin-top: 20px; }
}


/* ********** 배너 ********** */
.banner-container { position: relative; background-color:#111525; width: 100%; height: 100%; }
.banner-container:before {content: ''; position: absolute; bottom:180px; left:100px; display: block; width:765px; height: 735px;
	background-image: url(../../img/main/banner_bg.svg); background-size: cover; background-repeat: no-repeat; }
.banner-wrap { position: relative; width: 100%; margin: 0 auto; padding: 0 200px;}
@media (max-width: 1510px) {
	.banner-container:before {width: 600px; height: 550px; bottom: 200px; left: 50px; }
}
@media (max-width: 1220px) {
	.banner-container { height: auto; }
	.banner-container:before { display: none; }
}

/* map SVG */
.banner-wrap .map-wrap { float: right; position: relative; top: 80px; }
.banner-wrap .map-wrap .svg-area svg { width: 800px; display: block; }

/* banner text */
.banner-wrap .text-wrap { float: left; padding-top: 13%; }
.banner-wrap .text-wrap .text-area p { color: #fff; }
.banner-wrap .text-wrap .text-area p.s-tit { font-size: 2.5rem;}
.banner-wrap .text-wrap .text-area p.tit { font-size: 6rem; font-weight: 900; padding-top: 15px;}
.banner-wrap .text-wrap .text-area p.txt { font-weight: 100; font-size: 1.7rem; line-height: 1.8; padding-top: 20px;}
.banner-wrap .text-wrap .count-area { position: relative; }
.banner-wrap .text-wrap .count-area { padding-top: 80px;}
.banner-wrap .text-wrap .count-area .item-group .item { float: left; position: relative; }
.banner-wrap .text-wrap .count-area .item-group .item:not(:last-child) { margin-right: 70px;}
.banner-wrap .text-wrap .count-area .item-group .item .img-area { float: left; height: 80px; }
.banner-wrap .text-wrap .count-area .item-group .item .img-area img { width: auto; height: 100%; }
.banner-wrap .text-wrap .count-area .item-group .item .txt-area { float: left; padding-left: 20px;}
.banner-wrap .text-wrap .count-area .item-group .item .txt-area .tit { font-size: 1.6rem; color: #fff; padding-bottom: 10px;}
.banner-wrap .text-wrap .count-area .item-group .item .txt-area .count { font-size: 4.2rem; color: #fff; font-weight: 900; }
.banner-wrap .text-wrap .count-area .item-group .item .txt-area .count .num { display: inline-block; }
.banner-wrap .text-wrap .count-area .item-group .item .txt-area .count .s-txt { font-size: 2.1rem; font-weight: 500; }

@media (max-width: 1880px) {
	.banner-wrap { padding: 0 100px;}
	.banner-wrap .map-wrap .svg-area svg { width: 760px; }
}
@media (max-width: 1510px) {
	.banner-wrap { padding: 0 50px; }
	.banner-wrap .map-wrap .svg-area svg { width: 670px; }
	.banner-wrap .text-wrap .text-area p.tit { font-size: 5rem; }
	.banner-wrap .text-wrap .text-area p.s-tit { font-size: 2rem; }
	.banner-wrap .text-wrap .text-area p.txt { font-size: 1.5rem; }
	.banner-wrap .text-wrap .count-area .item-group .item:not(:last-child) { margin-right: 50px;}
	.banner-wrap .text-wrap .count-area .item-group .item .img-area { height: 60px; }
	.banner-wrap .text-wrap .count-area .item-group .item .txt-area .tit { font-size: 1.4rem; }
	.banner-wrap .text-wrap .count-area .item-group .item .txt-area .count { font-size: 3.5rem; }
}
@media (max-width: 1220px) {
	.banner-wrap {padding:0 50px 50px;}
	.banner-wrap .map-wrap { float: none; width: 100%; text-align: center; top: 0; left: 70px; margin-top: 50px;}
	.banner-wrap .map-wrap .svg-area svg { margin: 0 auto; width: 60%; }
	.banner-wrap .text-wrap { float: none; width: 100%; padding-top: 150px; }
	.banner-wrap .text-wrap .text-area {text-align: center; }
	.banner-wrap .text-wrap .text-area p.tit { font-size: 4rem; }
	.banner-wrap .text-wrap .text-area p.s-tit { font-size: 1.7rem; }
	.banner-wrap .text-wrap .text-area p.txt { font-size: 1.3rem; }
	.banner-wrap .text-wrap .count-area { text-align: center; padding-top: 40px;}
	.banner-wrap .text-wrap .count-area .item-group .item { float: none; display: inline-block; }
	.banner-wrap .text-wrap .count-area .item-group .item .txt-area { text-align: left; }
	.banner-wrap .text-wrap .count-area .item-group .item .img-area { height: 50px; }
	.banner-wrap .text-wrap .count-area .item-group .item { margin: 0 0 20px; }
	.banner-wrap .text-wrap .count-area .item-group .item .txt-area .tit { font-size: 1.2rem; }
	.banner-wrap .text-wrap .count-area .item-group .item .txt-area .count { font-size: 3rem; }
}
@media (max-width: 768px) {
	.banner-wrap {padding:0 20px 50px;}
	.banner-wrap .map-wrap { left: auto; margin-top: 30px;}
	.banner-wrap .map-wrap .svg-area svg { width: 100%; }
	.banner-wrap .text-wrap { padding-top: 120px;}
	.banner-wrap .text-wrap .count-area .item-group .item:not(:last-child) { margin-right: 30px; }
	.banner-wrap .text-wrap .count-area .item-group .item .img-area { height: 40px; }
	.banner-wrap .text-wrap .count-area .item-group .item .txt-area { padding-left: 10px; }
	.banner-wrap .text-wrap .count-area .item-group .item .txt-area .tit { padding-bottom: 5px;}
	.banner-wrap .text-wrap .count-area .item-group .item .txt-area .count { font-size: 2.5rem;}
}


/* banner 협회 리스트 */
.baseball-list-wrap {position: absolute; bottom:0; left: 0; width: 100%; height: 200px; border-top: 1px solid rgba(255,255,255,0.2); background:#111525;}
.baseball-list-wrap .depth-01 { float: left; height: 100%; padding: 20px 10px 15px 30px; width: 650px; border-right: 1px solid rgba(255,255,255,0.2);}
.baseball-list-wrap .depth-01 ul { height: 100%; overflow-y: auto; }
.baseball-list-wrap .depth-01 ul::-webkit-scrollbar {	width: 4px;	height: 20px; }
.baseball-list-wrap .depth-01 ul::-webkit-scrollbar-track {	background-color: transparent; }
.baseball-list-wrap .depth-01 ul::-webkit-scrollbar-thumb {	border-radius: 10px; background-color: #3C3F4F; }
.baseball-list-wrap .depth-01 ul li { float: left; width: calc(14% - 5px); text-align: center; padding: 15px 5px 10px; border-radius: 8px; cursor: pointer; margin-right: 5px; }
.baseball-list-wrap .depth-01 ul li .logo { width: auto; height: 26px; }
.baseball-list-wrap .depth-01 ul li .tit { color: rgba(255,255,255,0.5); font-size: 1.25rem; padding-top: 10px;}
.baseball-list-wrap .depth-01 ul li:hover .tit { color: #fff;}
.baseball-list-wrap .depth-01 ul li:hover,
.baseball-list-wrap .depth-01 ul li.on { background: rgba(255,255,255,0.08); }
.baseball-list-wrap .depth-01 ul li.all { padding-top: 20px }
.baseball-list-wrap .depth-01 ul li.all .logo { width: auto; height: 20px; }

.baseball-list-wrap .depth-02 { float: left; height: 100%; padding: 25px 10px 10px 30px; width: calc(100% - 650px); }
.baseball-list-wrap .depth-02 ul { height: 100%; overflow-y: auto; }
.baseball-list-wrap .depth-02 ul::-webkit-scrollbar {	width: 4px;	height: 20px; }
.baseball-list-wrap .depth-02 ul::-webkit-scrollbar-track {	background-color: transparent; }
.baseball-list-wrap .depth-02 ul::-webkit-scrollbar-thumb {	border-radius: 10px; background-color: #3C3F4F; }
.baseball-list-wrap .depth-02 ul li { float: left; width: calc(20% - 25px); padding:15px 10px 15px 20px; background: rgba(255,255,255,0.1); border-radius: 8px; margin: 0 25px 20px 0; border:1px solid rgba(255,255,255,0); }
.baseball-list-wrap .depth-02 ul li:hover { border-color: rgba(255,255,255,0.1); }
.baseball-list-wrap .depth-02 ul li .logo { float: left; position: relative; width: 30px; height: 30px; border-radius: 5px; background:#fff; margin-right: 15px; }
.baseball-list-wrap .depth-02 ul li .logo img { max-width: 100%; max-height: 100%; padding: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.baseball-list-wrap .depth-02 ul li .tit { float: left; width: calc(100% - 45px); color: #fff; font-size: 1.3rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position:relative; top: 5px;}

@media (max-width: 1510px) {
	.baseball-list-wrap .depth-01 { width: 500px; }
	.baseball-list-wrap .depth-02 { width: calc(100% - 500px); padding: 25px 10px 10px 20px; }
	.baseball-list-wrap .depth-02 ul li { padding: 10px; margin: 0 5px 10px 5px; width: calc(20% - 15px); }
	.baseball-list-wrap .depth-02 ul li .logo { margin-right: 10px; width: 25px; height: 25px; }
	.baseball-list-wrap .depth-02 ul li .tit { font-size: 1.2rem; top: 3px; width: calc(100% - 35px); }
}
@media (max-width: 1220px) {
	.baseball-list-wrap { position: static; height: auto; }
	.baseball-list-wrap .depth-01 { float: none; width: 100%; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 20px;}
	.baseball-list-wrap .depth-02 { float: none; width: 100%; padding:20px 20px 10px;}
	.baseball-list-wrap .depth-02 ul li { float: none; display: inline-block; vertical-align: top; width: auto; }
	.baseball-list-wrap .depth-02 ul li .tit { text-overflow: unset; white-space: normal; }
}
@media (max-width: 590px) { 
	.baseball-list-wrap .depth-01 ul li { width: calc(20% - 5px); }
	.baseball-list-wrap .depth-02 ul { text-align: center; }
	.baseball-list-wrap .depth-02 ul li { width: 45%; }
	.baseball-list-wrap .depth-02 ul li .tit { text-align: left; }
}

/* ********** 스포비 소개 why spobee ********** */
.section01 { position: relative; }
.section01:before { content: ''; position: absolute; top:0; left: 0; width: 100%; height: 100%; opacity: .07;
	background-image: url(../../img/main/intro_bg.webp);
	background-size: cover;
	background-position: center; 
	background-repeat: no-repeat;
}
.section01 .section-title h4 { position: relative; font-size: 4rem; }
.section01 .section-title h4:before { content: '?'; position: absolute; top: -60px; right: -45px; font-size: 18rem; color: rgba(255,255,255,0.05); transform: rotate(15deg); }
.section01 .content-area { text-align: center; }
.section01 .content-area .item-group { padding-top: 80px;}
.section01 .content-area .item-group .item { float: left; width: 25%; padding: 0 20px; }
.section01 .content-area .item-group .item .img { width: auto; height: 120px;}
.section01 .content-area .item-group .item .img img { max-width: 100%; height: 100%; position: relative; top:0; transition: top .25s; }
.section01 .content-area .item-group .item:hover .img img { top: -10px; }
.section01 .content-area .item-group .item .tit {color: #fff; font-size: 1.8rem; padding-top: 30px;}

@media (max-width: 640px) {
	.section01 .section-title h4 { font-size: 3rem; }
	.section01 .content-area .item-group { padding-top: 50px; }
	.section01 .content-area .item-group .item {padding: 0}
	.section01 .content-area .item-group .item .img { height: 60px; }
	.section01 .content-area .item-group .item .tit { padding-top: 15px; font-size: 1.5rem;}
}
@media (max-width: 475px) {
	.section01 { padding: 0;}
	.section01 .content-area .item-group .item { width: 50%; padding-bottom: 50px;}
}

/* ********** 기록관리 홈페이지 서비스  ********** */
.section02 .more-btn-wrap { margin-top: 50px;}
.section02 .content-area { text-align: center; }
.section02 .service-list { padding-top: 50px; }
.section02 .service-list ul { overflow: hidden; }
.section02 .service-list ul li { position: relative; padding-bottom: 15%; height: 0; float: left; text-align: center; margin: 0 10px 20px; background: #000; width: calc(33.33% - 20px); overflow: hidden; border-radius: 10px; }
.section02 .service-list ul li.lg-box { padding-bottom: calc(30% + 20px); }
.section02 .service-list ul li:after { position: absolute; content: ''; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.5; }

.section02 .service-list ul li a { position: absolute; top:0; left:0; display: block; width: 100%; height: 100%; z-index: 2; }
.section02 .service-list ul li a .box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%);  transform: translate(50%,50%); width: 100%; height: 100%; z-index: 1; }
.section02 .service-list ul li a img { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg);  transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1;transition: all .7s ease; opacity: 0.4; }
.section02 .service-list ul li a:hover img { -webkit-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); }
.section02 .service-list ul li a .text-box { color: #fff; position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); text-align: center; z-index: 2; }
.section02 .service-list ul li a .text-box p.tit { font-size: 1.5rem; font-weight: 500; position: relative; text-shadow: 0 0 3px rgba(0,0,0,0.5); top: 15px; }
.section02 .service-list ul li a .text-box p.tit:after { width: 20px; height: 2px; background: #fff; position: absolute; content: ''; left: 50%; margin-left: -10px; top: -15px; }
.section02 .service-list ul li a .text-box p.txt { padding-top: 25px; font-weight: 100; font-size: 1.2rem; transform: scaleY(0); transition: transform .25s; transform-origin: top; height: 0; }
.section02 .service-list ul li a:hover .text-box p.txt { transform: scaleY(1); height: auto; }

.section02 .service-list ul li a .line { position: absolute; z-index: 3; background: #fff; opacity: .1; transition: top .7s ease, left .7s ease, bottom .7s ease, right .7s ease, opacity 1s ease; }
.section02 .service-list ul li a:hover .line { opacity: 1; }
.section02 .service-list ul li a .line:nth-child(1) { width: calc(100% - 20px); height: 1px; top: 10px; left: 100%; }
.section02 .service-list ul li a .line:nth-child(2) { width: 1px; height: calc(100% - 20px); top: 100%; left: 10px; }
.section02 .service-list ul li a .line:nth-child(3) { width: calc(100% - 20px); height: 1px; bottom: 10px; right: 100%; }
.section02 .service-list ul li a .line:nth-child(4) { width: 1px; height: calc(100% - 20px); bottom: 100%; right: 10px; }
.section02 .service-list ul li a:hover .line:nth-child(1) { width: calc(100% - 20px); height: 1px; top: 10px; left: 10px; }
.section02 .service-list ul li a:hover .line:nth-child(2) { width: 1px; height: calc(100% - 20px); top: 10px; left: 10px; }
.section02 .service-list ul li a:hover .line:nth-child(3) { width: calc(100% - 20px); height: 1px; bottom: 10px; right: 10px; }
.section02 .service-list ul li a:hover .line:nth-child(4) { width: 1px; height: calc(100% - 20px); bottom: 10px; right: 10px; }

@media (max-width: 768px) {
	.section02 .service-list ul li { width: calc(50% - 20px); }
	.section02 .service-list ul li { padding-bottom: 20%; }
	.section02 .service-list ul li.lg-box { padding-bottom: calc(40% + 19px); }
}
@media (max-width: 475px) {
	.section02 .service-list ul li p.tit { font-size: 1.4rem; }
	.section02 .service-list ul li a .text-box p.tit:after { top:	-8px; }
	.section02 .service-list ul li p.txt { display: none; }
}


/* ********** 기록 대행 서비스  ********** */
.section03 .more-btn-wrap { margin-top: 120px; }
.section03 .item-group { margin-top: 140px; }
.section03 .item-group .item {float:left; width:calc(33.3% - 20px); margin-right:20px; background: #1b2032;
padding: 40px 20px;	border-radius: 10px;}
.section03 .item-group .item .img-area {width:95px; margin:0 auto; padding-bottom:40px}
.section03 .item-group .item .img-area img {max-width:100% ;width:100%; height:82px;}
.section03 .item-group .item .txt-area {width: 100%; color: #fff; text-align: center; }
.section03 .item-group .item .txt-area .tit { font-size: 2rem; font-weight: 600; padding-bottom: 15px; }
.section03 .item-group .item .txt-area .txt { font-size: 1.4rem; font-weight: 100; line-height: 1.7; }


@media(max-width:768px) {
	.section03 .more-btn-wrap { margin-top: 45px; }
	.section03 .item-group { margin-top: 0px; }
	.section03 .item-group {text-align:center}
	.section03 .item-group .item {margin-bottom:30px; width:100%; float:none;}
	.section03 .item-group .item .img-area {padding-bottom:25px;}
	.section03 .item-group .item .txt-area .tit {font-size:1.7rem;}
	.section03 .item-group .item:nth-child(2) .img-area img {width:70%}
	.section03 .item-group .item:last-child .img-area img {width:70%} 
}

@media(max-width:500px) {
	.section03 .item-group .item {padding:30px 15px;}
	.section03 .item-group .item .img-area img {height:60px}
} 

/* ********** 하이라이트 영상 서비스  ********** */
.section04 .video-list ul li { width: calc(33.3% - 17px); float: left; margin-right: 20px; margin-bottom: 20px; border-radius: 10px; border-radius: 10px; overflow: hidden;}
.section04 .video-list ul li:nth-child(3n) { margin-right: 0; }
.section04 .video-list ul li a { display: block; }
.section04 .video-list ul li a .img-area { height: 127px; width: 100%; position: relative; overflow: hidden; background: #111525;  }
.section04 .video-list ul li a .thumbnail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); width: 100%; height: 100%; z-index: 1; }
.section04 .video-list ul li a .thumbnail img { position: absolute; top: 0; left: 0; width:100%; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: all 0.7s ease; }
.section04 .video-list ul li a:hover .thumbnail img { -webkit-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); }
.section04 .video-list ul li a .txt-area { height: 85px; background: #1b2032; padding: 15px; position: relative; overflow: hidden;  }
.section04 .video-list ul li a .txt-area .title { font-size: 1.6rem; font-weight: 500; word-wrap: break-word; text-overflow: ellipsis; white-space:nowrap; color:#fff; display: block; overflow: hidden;}
.section04 .video-list ul li a .txt-area .detail { position: absolute; bottom: 18px; left: 18px; width: calc(100% - 36px); overflow: hidden; font-size: 1.4rem; color: #727685; }
.section04 .video-list ul li a .txt-area .detail .subject { float: left; }
.section04 .video-list ul li a .txt-area .detail .date { float: right; }
.section04 .more-btn-wrap {margin-top:35px;}

@media all and (max-width: 960px)
{
	.section04 .video-list ul li a .txt-area .detail .date { display: none; }
	.section04 .video-list ul li a .txt-area .detail .subject { float: none; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media all and (max-width: 768px)
{
	.section04 .video-list ul li { width: calc(50% - 10px); }
	.section04 .video-list ul li:nth-child(3n) { margin-right: 20px; }
	.section04 .video-list ul li:nth-child(2n) { margin-right: 0; }	
	.section04 .video-list ul li a .img-area { height: 100px; }
	.section04 .video-list ul li a .txt-area .title { font-size: 1.6rem; }
	.section04 .video-list ul li a .txt-area .detail { font-size: 1.3rem; left: 13px; width: calc(100% - 26px); bottom: 13px;}
	.section04 .more-btn-wrap .btn {width:calc(50% - 10px); padding: 0 40px}
}

@media(max-width:550px) {
	.section04 .video-list ul li { width: 100%; margin-right: 0; }
	.section04 .more-btn-wrap .btn {float:none; width:100%; margin-right:0; margin-bottom:10px;}
	.section04 .video-list ul li a .img-area {height:130px}
	.section04 .more-btn-wrap .btn:last-child {margin-bottom:0}
	.section04 .video-list ul li:nth-child(4), 
	.section04 .video-list ul li:nth-child(5),
	.section04 .video-list ul li:nth-child(6) {display: none;} 
}


/* ********** 대회 개최 및 시행관리 서비스  ********** */

.section05 {overflow:hidden}
.section05 .contents .slide-area {padding-top:40px;}
.section05 .contents .slide-area .slider-wrap .box-wrap { opacity: .5; transform: scale(0.85); transition: transform .2s; padding:20px;}
.section05 .contents .slide-area .slider-wrap .box-wrap.slick-current { opacity: 1; transform: scale(1); }
.section05 .contents .slide-area .slider-wrap .box-wrap img {width:100%;  margin:0 auto; border-radius: 10px; height:auto;}
.section05 .contents .slick-prev { top: -23px;left: calc(50% - 68px);	width: 29px;}
.section05 .contents .slick-next { top:-23px; right: calc(50% - 68px);	width:29px }
.section05 .more-btn-wrap {margin-top:40px}



/* ********** QNA 영역  ********** */
.section06 .more-btn-wrap { margin-top: 40px; }
.section06 .text {text-align: center; font-size:2rem;  color:#fff;}
.section06 .content-area {width:900px; margin:40px auto 0;}
.section06 .qna-box {margin-bottom:50px}
.section06 .qna-box .qna {cursor: pointer; margin-bottom:10px; width:400px; height:94px;background-image:url('../../img/main/qna_chat01.svg'); background-position: left; background-repeat: no-repeat;
}
.section06 .qna-box .qna:hover span {text-decoration: underline;}
.section06 .qna-box .answer {display: none; width:100%; height:100px;background-image:url('../../img/main/qna_chat02.svg'); background-position: right; background-repeat: no-repeat;height:84px;}
.section06 .qna-box.on .answer {display: block;}
.section06 .qna-box .qna span {position:relative; top:20px; left:40px; color:#fff; font-size:1.7rem;}
.section06 .qna-box .answer span {position:relative; top:15px; right:25px; color:#fff; font-size:1.7rem; display: block; text-align: right;}
.section06 .qna-box .answer span a {font-weight:600; text-decoration: underline; color:#fff; transition:opacity .3s ease}
.section06 .qna-box .answer span a:hover {opacity:0.9}

@media(max-width:1024px) {
	.section06 .content-area {width:100%;}	
}

@media(max-width:768px) {
	.section06 .qna-box .qna span, .section06 .qna-box .answer span {font-size:1.6rem}
	.section06 .qna-box .qna {width:355px; height:90px;}
	.section06 .qna-box .answer {height:90px;}	
}

@media(max-width:500px) {
	.section06 .qna-box {margin-bottom:20px;}
	.section06 .qna-box .qna {width:100%;}
	.section06 .qna-box .qna span, .section06 .qna-box .answer span {font-size:1.4rem;}
	.section06 .qna-box .qna span {left:20px; top:22px}
	.section06 .qna-box .answer span {top:22px; right:20px}
	.section06 .text {font-size:1.7rem;}
}

@media(max-width:345px) {
	.section06 .qna-box .qna span, .section06 .qna-box .answer span {font-size:1.3rem;}
}


/* ********** 공지사항 영역 ********** */
.section07 .board-area {margin-top:100px;}
.section07 .more-btn-wrap {margin-top:40px;}
.section07 .board-area ul li .box {color:#fff; padding:20px; background:#1b2032; font-size:1.6rem; border:1px solid #404450; margin-bottom:20px; border-radius: 10px;}
.section07 .board-area ul li .box .left {float:left; cursor:pointer; overflow: hidden;width: calc(100% - 132px); text-overflow: ellipsis;	white-space: nowrap; word-break: break-word;}
.section07 .board-area ul li .box .right {float:right;color:#8f95a9}
.section07 .board-area ul li .box .left:hover {text-decoration: underline;}
.section07 .board-area ul li .box .left .label {color:#2ca6df; margin-right:10px; display: inline-block;width:70px; font-weight:600;}

@media(max-width:768px) {
	.section07 .board-area {margin-top:30px;}
	.section07 .board-area ul li .box {font-size:1.5rem;}
}

@media(max-width:500px) {
	.section07 .board-area ul li .box {padding:15px; }
	.section07 .board-area ul li .box .left {float:none; width:100%;}
	.section07 .board-area ul li .box .left .label {width:40px;}
	.section07 .board-area ul li .box .right {float:none; margin-top:10px;}
}