@charset "utf-8";

.banner-area { background: url("../img/common/main_bg.PNG"); background-position: center; background-size: cover; }
.banner-area .banner { width: 1280px; padding: 200px 50px 150px; margin: 0 auto; }
.banner-area .banner .banner-header { color: #fff; font-size: 3.8rem; font-weight: 400; letter-spacing: -2px; margin-bottom: 20px; text-shadow: 0 0 5px rgba(0,0,0,0.1); }
.banner-area .banner .banner-txt { color: #fff; font-size: 1.8rem; font-weight: 100; text-shadow: 0 0 5px rgba(0,0,0,0.1); }
.banner-area .banner .banner-txt .imp { color: #ffdf0a; }

.banner-area .banner .btn-wrap { margin-top: 35px; }
.banner-area .banner .btn-wrap .banner-btn { height: 45px; display: inline-block; line-height: 45px; color: #fff; letter-spacing: 0; padding: 0 40px; border-radius: 30px; margin-right: 10px; float: left; font-size: 1.35rem; }
.banner-area .banner .btn-wrap .banner-btn:last-child { margin-right: 0; }
.banner-area .banner .btn-wrap .banner-btn.start-btn { background: #001ad9; font-weight: 500; box-shadow: 0 10px 20px 0px rgba(0,0,0,0.3); transition: background .25s ease;  }
.banner-area .banner .btn-wrap .banner-btn.start-btn:hover { background: #0017C1; }
.banner-area .banner .btn-wrap .banner-btn.trs-btn { border: 1px solid rgba(255,255,255,0.5); line-height: 43px; }

.sub-content-area { padding-top: 80px; padding-bottom: 80px; }

@media all and (max-width: 1279px)
{
	.banner-area .banner { width: 100%; padding: 200px 30px 150px; }
}
@media all and (max-width: 639px)
	{
	.banner-area .banner { text-align: center; word-break: keep-all; padding: 120px 30px 40px; }
	.banner-area .banner .banner-header { font-size: 2.7rem; margin-bottom: 10px;}
	.banner-area .banner .banner-txt { font-size: 1.6rem; }
	.banner-area .banner .btn-wrap { margin-top: 20px; }
	.banner-area .banner .btn-wrap .banner-btn { float: none; }
	.banner-area .banner .banner-txt br { display: none; }
}

.breadcrumb-area { border-bottom: 1px solid #dee3eb; height: 70px; }
.breadcrumb-area .breadcrumb { width: 1180px; margin: 0 auto; }
.breadcrumb-area .breadcrumb .align { float: left; }
.breadcrumb-area .breadcrumb .align .head { font-size: 1.5rem; color: #999; font-weight: 500; cursor: default; display: inline-block; line-height: 69px; position: relative; margin-right: 20px; }
.breadcrumb-area .breadcrumb .align .head:after { width: 1px; height: 14px; position: absolute; content: ''; background: #bbb; top: 50%; margin-top: -7px; right: -10px; }
.breadcrumb-area .breadcrumb .align ul { display: inline-block; }
.breadcrumb-area .breadcrumb .align ul li { display: inline-block; margin-right: 10px; }
.breadcrumb-area .breadcrumb .align ul li:last-child { margin-right: 0; }
.breadcrumb-area .breadcrumb .align ul li a { font-weight: 500; line-height: 69px; font-size: 1.5rem; color: #999; }
.breadcrumb-area .breadcrumb .align ul li.select a { color: #222; }
.breadcrumb-area .breadcrumb .search-area { float: right; width: 400px; padding-top: 12px; position: relative; }
.breadcrumb-area .breadcrumb .search-area input[type=text] { display: block; width: 100%; border: none; height: 40px; outline: 0; transition: background .5s; letter-spacing: 0; font-size: 1.5rem; padding: 0 10px; transition: border-color .5s ease,background .5s ease; background: #f8f8f8; font-size: 1.4rem; font-weight: 400; }
.breadcrumb-area .breadcrumb .search-area .search-btn { height: 40px; width: 40px; position: absolute; z-index: 2; right: 0; top: 12px; background: transparent; border: none; outline: 0; padding: 8px; opacity: .3; }
.breadcrumb-area .breadcrumb .search-area .search-btn:hover { opacity: .5; }
.breadcrumb-area .breadcrumb .search-area .search-btn img { width: 100%; height: 100%; }

@media all and (max-width: 1279px)
{
	.breadcrumb-area .breadcrumb { width: 100%; padding: 0 30px; }
}
@media all and (max-width: 960px)
{
	.breadcrumb-area .breadcrumb .search-area { width: 100%; }
}
@media all and (max-width: 639px)
{
	.breadcrumb-area { height: 55px; }
	.breadcrumb-area .breadcrumb .align .head,
	.breadcrumb-area .breadcrumb .align ul li a { line-height: 54px; }
}
/* 페이징 */
.paging { margin-top: 50px; }
.paging ul {  display: block; text-align: center; }
.paging ul li { display: inline-block; margin-right: 5px; }
.paging ul li:last-child { margin-right: 0; }
.paging ul li a { display: block; width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; font-weight: bold; color: #999; line-height: 40px; transition: background .25s ease, color .25s ease; }
.paging ul li a:hover,
.paging ul li.select a { background: #001AD9; color: #fff; }
@media all and (max-width: 768px) {
	.paging ul li { margin-right: 2px; }
	.paging ul li a { width: 21px; height: 21px; line-height: 21px; font-size: 1.25rem;}
}
@media all and (max-width: 325px) {
	.paging ul li { margin-right: 2px; }
	.paging ul li a { width: 17px; height: 17px; line-height: 17px; font-size: 1.2rem;}
}

/* 버튼 스타일 */
.blue-bg { background: #001ad9; transition: background .25s ease; }
.blue-bg:hover { background: #0017C1; }
button.com-btn { font-weight: 500; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.0); transition: box-shadow .25s ease; border: none; display: block; width: 100%; margin-top: 30px; color: #fff; height: 55px; border-radius: 30px; line-height: 55px; font-weight: 400; outline: 0; }
button.com-btn:hover { box-shadow: 0 5px 10px 0px rgba(0,0,0,0.3); }


/* input file */
.file-input { display: inline-block; text-align: left; width: 400px; position: relative; padding-left: 10px; font-size: 1.4rem; line-height: 45px; vertical-align: middle; background-color: #fff; cursor: pointer; background: #fafafa; font-weight: 400;border-bottom: 1px solid #555;}
.file-input > input[type='file'] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer; }
.file-input > input[type='file']:hover {border-color: #a8a8a8;}
.file-input > .button { display: inline-block; padding: 0; font-size: 1.4rem; vertical-align: top; background-color: #001ad9; cursor: pointer; border: 1px solid #4a54ff; border-bottom-color: #4a54ff; font-weight: 400; color: #fff; height: 47px; border-top-left-radius: 0; border-bottom-left-radius: 0; position: absolute; z-index: 2; top: -1px; right: -1px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; width: 80px; text-align: center; line-height: 45px; }
.file-input:hover > .button { background: #0017C1; color: #fff; border-color: #0017C1; }
.file-input > .label { color: #333; white-space: nowrap; opacity: .5; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 55px; display: block;}
.file-input.-chosen > .label { opacity: 1; }
.file-row:not(:first-child) { margin: 10px 0 0; }
.file-row .add-wrap { display: inline-block; margin-left: 10px; position: relative; top: 10px; }
.file-row .add-wrap button { border-style: none; background: transparent; margin-right: 5px; font-size: 1.2rem; color: #999; }
.file-row .add-wrap button img {opacity: .4; cursor: pointer; width: 16px; height: 16px; margin-right: 2px; position: relative; top: 2px;}
.file-row .add-wrap button:hover img {opacity: .6;}

@media all and (max-width: 768px) {
	.file-row:after { content: ''; display: block; clear: both; }
	.file-input { float: left; width: calc(100% - 95px); }
	.file-input > .button { width: 70px; }
	.file-row .add-wrap { float: left; width: 85px; margin-left: 10px; }
	.file-row .add-wrap button { margin-right: 3px; }
	.file-row .add-wrap button img { margin-right: 1px; }
}
@media all and (max-width: 768px) {
	.file-input > .button { width: 60px; }
}