/*
	Copyright 2020 Raonbnp
	http://raonbnp.com, http://raonwebstore.com
*/
@charset "UTF-8";
@import '/_css/common.css'; /* front, admin 공통*/
@import '/_css/member.css'; /* front member 공통*/
@import '/_css/board.css'; /* front member 공통*/
@import 'loading.css';
@import 'fontSet.css';
@import 'basic.css';
@import 'layout.css';


/* 서브공통 */
#sub_wrap { overflow:hidden; }
.sub-wrap {
	position:relative;
	box-sizing:border-box;
	padding:12rem 0 0;
	overflow:hidden;
}
.sub-wrap section {
	position:relative;
	box-sizing:border-box;
	overflow:hidden;
}
.sub-wrap h2 {
	font-size:4rem;
	font-weight:700;
	color:#000;
}
@media (max-width: 991.98px) {
	.sub-wrap {
		padding:6rem 0 0;
	}
	.sub-wrap h2 {
		font-size:2.8rem;
	}
}



/* about */
.about-wrap .sec01:before {
	content:"";
	position:absolute;
	width:100%;
	height:32rem;
	background:#f4f8ff;
	left:0;
	bottom:0;
	z-index:-1;
}
.about-wrap .sec01 p {
	text-align:center;
	font-size:3rem;
	font-weight:500;
	color:#222;
	line-height:1.3;
}
.about-wrap .sec01 p > b {
	font-weight:600;
	color:#000068;
}
.about-wrap .sec01 .img {
	margin-top:8rem;
}
@media (max-width: 1199.98px) {
	.about-wrap .sec01:before {
		height:20rem;
	}
}
@media (max-width: 991.98px) {
	.about-wrap .sec01 p {
		font-size:2.2rem;
	}
	.about-wrap .sec01 .img {
		margin-top:4rem;
	}
}
@media (max-width: 767.98px) {
	.tcp-wrap .sec01:before {
		height:14rem;
	}
}
@media (max-width: 575.98px) {
	.about-wrap .sec01:before {
		height:10rem;
	}
}


.about-wrap .sec02 {
	padding:8rem 0 12rem;
	background:#f4f8ff;
}
.about-wrap .sec02 .inner {
	display:flex;
	align-items:flex-start;
}
.about-wrap .sec02 .inner h2 {
	max-width:33%;
	flex:0 0 33%;
}
.about-wrap .sec02 .inner p {
	max-width:67%;
	flex:0 0 67%;
	font-size:1.7rem;
	font-weight:300;
	color:#555;
	line-height:1.6;
}
@media (max-width: 991.98px) {
	.about-wrap .sec02 {
		padding:4rem 0 6rem;
	}
	.about-wrap .sec02 .inner {
		display:block;
	}
	.about-wrap .sec02 .inner h2 {
		max-width:100%;
		flex:0 0 100%;
	}
	.about-wrap .sec02 .inner p {
		max-width:100%;
		flex:0 0 100%;
		margin-top:1rem;
	}
}

.about-wrap .sec03 {
	padding:14rem 0 10rem;
}
.about-wrap .sec03 h2 {
	margin-bottom:6rem;
}
.about-wrap .sec03 .row {
	margin-top:10rem;
}
.about-wrap .sec03 .row > div[class^='col-'] {
	margin-bottom:4rem;
}
.about-wrap .sec03 .row > div[class^='col-'] > .box > .title {
	box-sizing:border-box;
	padding:2rem 0;
	background:var(--darkBlue);
	color:#fff;
	font-size:2rem;
	font-weight:500;
}
.about-wrap .sec03 .row > div[class^='col-'] > .box > .inner {
	box-sizing:border-box;
	border:1px solid #ddd;
	border-top:0;
	padding:2rem 5rem;
}
.about-wrap .sec03 .row > div[class^='col-'] > .box .in {
	display:flex;
	flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	align-items:center;
	margin:3rem 0;
}
.about-wrap .sec03 .row > div[class^='col-'] > .box .in > .icon {
	max-width:6.4rem;
	flex:0 0 6.4rem;
}
.about-wrap .sec03 .row > div[class^='col-'] > .box .in > .txt {
	--wid : calc(100% - 6.4rem);
	max-width:var(--wid);
	flex:0 0 var(--wid);
	box-sizing:border-box;
	padding-left:5rem;
	font-size:1.7rem;
	font-weight:300;
	color:#555;
}
.about-wrap .sec03 .row > div[class^='col-'] > .box .in > .txt > b {
	font-weight:600;
	color:#222;
}

@media (max-width: 991.98px) {
	.about-wrap .sec03 {
		padding:7rem 0 5rem;
	}
	.about-wrap .sec03 h2 {
		margin-bottom:4rem;
	}
	.about-wrap .sec03 .row {
		margin-top:4rem;
	}
	.about-wrap .sec03 .row > div[class^='col-'] {
		margin-bottom:2rem;
	}
	.about-wrap .sec03 .row > div[class^='col-'] > .box > .title {
		padding:1.5rem 0;
	}
	.about-wrap .sec03 .row > div[class^='col-'] > .box > .inner {
		padding:1rem 3rem;
	}
	.about-wrap .sec03 .row > div[class^='col-'] > .box .in {
		margin:2rem 0;
	}
	.about-wrap .sec03 .row > div[class^='col-'] > .box .in > .txt {
		padding-left:4rem;
	}
}
@media (max-width: 575.98px) {
	.about-wrap .sec03 .row > div[class^='col-'] > .box .in {
		display:block;
		margin:3rem 0;
	}
	.about-wrap .sec03 .row > div[class^='col-'] > .box .in > .icon {
		max-width:100%;
		flex:0 0 100%;
		text-align:center;
	}
	.about-wrap .sec03 .row > div[class^='col-'] > .box .in > .icon > img {
		max-width:5rem;
	}
	.about-wrap .sec03 .row > div[class^='col-'] > .box .in > .txt {
		--wid : 100%;
		padding-left:0;
		text-align:center;
		margin-top:1rem;
	}
}




/* our service */
.service-wrap .sec01 {
	padding-bottom:8rem;
}
.service-wrap .sec01 p {
	text-align:center;
	font-size:3rem;
	font-weight:500;
	color:#222;
	line-height:1.3;
}
.service-wrap .sec01 p > b {
	font-weight:600;
	color:#000068;
}
@media (max-width: 991.98px) {
	.service-wrap .sec01 {
		padding-bottom:4rem;
	}
	.service-wrap .sec01 p {
		font-size:2.2rem;
	}
}


.service-wrap .sec02 {
	padding:0 0 6rem;
	background:#f4f8ff;
}
.service-wrap .sec02:before {
	content:"";
	position:absolute;
	width:100%;
	height:10%;
	background:#fff;
	left:0;
	top:0;
}
.service-wrap .sec02 .row {
	margin-left:-3rem;
	margin-right:-3rem;
}
.service-wrap .sec02 .row > div[class^='col-'] {
	margin-bottom:6rem;
	padding-left:3rem;
	padding-right:3rem;
}
.service-wrap .sec02 .row > div[class^='col-'] > .box {
	position:relative;
	box-sizing:border-box;
	padding:6rem 4rem;
	border:1px solid #eee;
	box-shadow:0 10px 20px rgba(0,0,0,0.08);
	background:#fff;
	height:100%;
}
.service-wrap .sec02 .row > div[class^='col-'] > .box:hover {
	border:1px solid var(--blue);
}
.service-wrap .sec02 .row > div[class^='col-'] > .box > .icon {
	margin-bottom:4rem;
}
.service-wrap .sec02 .row > div[class^='col-'] > .box > h3 {
	font-size:3rem;
	font-weight:600;
	color:#000;
	margin-bottom:2rem;
}
.service-wrap .sec02 .row > div[class^='col-'] > .box > p {
	font-size:1.7rem;
	font-weight:300;
	color:#555;
}
.service-wrap .sec02 .row > div[class^='col-'] > .box > .btn-contact {
	position:absolute;
	right:4rem;
	top:6rem;
	display:inline-block;
	box-sizing:border-box;
	padding:1rem 3.5rem;
	border-radius:4rem;
	text-align:center;
	border:1px solid var(--blue);
	color:var(--blue);
	font-size:1.6rem;
	font-weight:500;
}
.service-wrap .sec02 .row > div[class^='col-'] > .box > .btn-contact:hover {
	background:var(--blue);
	color:#fff;
}
@media (max-width: 1280px) {
	.service-wrap .sec02 .row {
		margin-left:-2rem;
		margin-right:-2rem;
	}
	.service-wrap .sec02 .row > div[class^='col-'] {
		margin-bottom:4rem;
		padding-left:2rem;
		padding-right:2rem;
	}
}
@media (max-width: 991.98px) {
	.service-wrap .sec02 {
		padding:0 0 4rem;
	}
	.service-wrap .sec02 .row > div[class^='col-'] {
		margin-bottom:2rem;
	}
	.service-wrap .sec02 .row > div[class^='col-'] > .box {
		padding:4rem 3rem;
	}
	.service-wrap .sec02 .row > div[class^='col-'] > .box > .icon {
		margin-bottom:3rem;
	}
	.service-wrap .sec02 .row > div[class^='col-'] > .box > .icon > img {
		max-width:5rem;
	}
	.service-wrap .sec02 .row > div[class^='col-'] > .box > h3 {
		font-size:2.4rem;
		margin-bottom:1rem;
	}
	.service-wrap .sec02 .row > div[class^='col-'] > .box > .btn-contact {
		right:3rem;
		top:4rem;
		padding:0.8rem 3rem;
	}
}



/* tcp */
.tcp-wrap .sec01 {
	padding-bottom:8rem;
}
.tcp-wrap .sec01 p {
	text-align:center;
	font-size:3rem;
	font-weight:500;
	color:#222;
	line-height:1.3;
}
.tcp-wrap .sec01 p > b {
	font-weight:600;
	color:#000068;
}
@media (max-width: 991.98px) {
	.tcp-wrap .sec01 {
		padding-bottom:4rem;
	}
	.tcp-wrap .sec01 p {
		font-size:2.2rem;
	}
}

.tcp-wrap .sec02 {
	padding-bottom:22rem;
}
.tcp-wrap .sec02 .row {
	margin-left:2.5rem;
	margin-right:2.5rem;
}
.tcp-wrap .sec02 .row > div[class^='col-'] {
	padding-left:2.5rem;
	padding-right:2.5rem;
}
.tcp-wrap .sec02 .row > div[class^='col-']:nth-of-type(2){
	position:relative;
	top:10rem;
}
.tcp-wrap .sec02 .row > div[class^='col-'] > .inner > p {
	margin-top:2rem;
	font-size:1.7rem;
	font-weight:300;
	line-height:1.6;
	color:#555;
}
@media (max-width: 1280px) {
	.tcp-wrap .sec02 .row {
		margin-left:-1.5rem;
		margin-right:-1.5rem;
	}
	.tcp-wrap .sec02 .row > div[class^='col-'] {
		padding-left:1.5rem;
		padding-right:1.5rem;
	}
}
@media (max-width: 991.98px) {
	.tcp-wrap .sec02 {
		padding-bottom:6rem;
	}
	.tcp-wrap .sec02 .row > div[class^='col-'] {
		margin-bottom:4rem;
	}
	.tcp-wrap .sec02 .row > div[class^='col-']:nth-of-type(2){
		top:0;
	}
}


/* contact */
.contact-wrap .sec01 {
	padding-bottom:14rem; 
}
.contact-wrap .sec01 h2 {
	font-weight:600;
	margin-bottom:4rem;
}
.contact-wrap .sec01 .table-wrap table {
	width:100%;
	box-sizing:border-box;
	border-top:2px solid #000;
}
.contact-wrap .sec01 .table-wrap table th,
.contact-wrap .sec01 .table-wrap table td {
	box-sizing:border-box;
	padding:5rem 2rem;
	font-size:2rem;
	font-weight:300;
	color:#555;
	border-bottom:1px solid #ddd;
}
.contact-wrap .sec01 .table-wrap table th {
	font-weight:600;
	color:#000;
}
@media (max-width: 991.98px) {
	.contact-wrap .sec01 {
		padding-bottom:7rem; 
	}
	.contact-wrap .sec01 h2 {
		margin-bottom:2rem;
	}
	.contact-wrap .sec01 .table-wrap table th,
	.contact-wrap .sec01 .table-wrap table td {
		padding:2rem 1.5rem;
		font-size:1.6rem;
	}
	.contact-wrap .sec01 .table-wrap table th {
		font-weight:600;
	}
}



.contact-wrap .sec02 {
	background: linear-gradient(45deg, rgba(49,108,225,1) 50%, rgba(29,54,144,1) 100%);
	padding:9rem 0;
}
.contact-wrap .sec02:before {
	content:"";
	position:absolute;
	width:50%;
	height:100%;
	left:0;
	top:0;
	background:url('../_img/sub/contact_sec02_img.jpg') no-repeat center center / cover;
}
.contact-wrap .sec02 .inner {
	box-sizing:border-box;
	padding-left:calc(50% + 8rem);
	color:#fff;
	transition:all 0.3s ease;
}
.contact-wrap .sec02 .inner .row {
	margin-left:-3rem;
	margin-right:-3rem;
}
.contact-wrap .sec02 .inner .row > div[class^='col-'] {
	margin-bottom:4rem;
	padding-left:3rem;
	padding-right:3rem;
}
.contact-wrap .sec02 .inner .row > div[class^='col-']:last-child {
	margin-bottom:0;
}
.contact-wrap .sec02 .inner h2 {
	color:#fff;
	font-weight:600;
	margin-bottom:7rem;
}
.contact-wrap .sec02 .inner form label {
	display:inline-block;
	position:relative;
	font-size:1.7rem;
	font-weight:500;
}
.contact-wrap .sec02 .inner form label:before {
	content:"*";
	position:absolute;
	right:-1.5rem;
	top:0;
	color:#ebee6c;
	z-index:1;
}
.contact-wrap .sec02 .inner form input[type="text"] {
	display:block;
	margin-top:1rem;
	width:100%;
	box-sizing:border-box;
	border:1px solid #97b2ea;
	border-radius:0.4rem;
	padding:1rem;
	height:6rem;
	color:#fff;
	background:none;
	outline:none;
	font-size:1.7rem;
}
.contact-wrap .sec02 .inner form textarea {
	display:block;
	margin-top:1rem;
	width:100%;
	box-sizing:border-box;
	border:1px solid #97b2ea;
	border-radius:0.4rem;
	padding:1rem;
	height:13rem;
	color:#fff;
	background:none;
	outline:none;
	font-size:1.7rem;
}
.contact-wrap .sec02 .inner .agree_box {
	margin-top:2rem;
}
.contact-wrap .sec02 .inner p[class^="checkbox_"] {
	color:#fff;
}
.contact-wrap .sec02 .inner .btnArea {
	text-align:center;
	margin-top:4rem;
}
.contact-wrap .sec02 .inner .btnArea .btn-black {
	box-sizing:border-box;
	border:2px solid #fff;
	padding:1.8rem 6rem;
	font-size:1.6rem;
	font-weight:500;
	background:#4f69b8;
	color:#fff;
	border-radius:5rem;
}

@media (max-width: 1400px) {
	.contact-wrap .sec02 .inner {
		padding-left:calc(50% + 4rem);
	}
	.contact-wrap .sec02 .inner .row {
		margin-left:-1.5rem;
		margin-right:-1.5rem;
	}
	.contact-wrap .sec02 .inner .row > div[class^='col-'] {
		margin-bottom:4rem;
		padding-left:1.5rem;
		padding-right:1.5rem;
	}
}
@media (max-width: 1199.98px) {
	.contact-wrap .sec02 .inner .row > div[class^='col-'] {
		margin-bottom:2rem;
	}
}
@media (max-width: 991.98px) {
	.contact-wrap .sec02 {
		padding:0 0 6rem;
	}
	.contact-wrap .sec02:before {
		position:relative;
		display:block;
		width:100%;
		height:48rem;
	}
		.contact-wrap .sec02 .inner {
		padding-left:0;
	}
	.contact-wrap .sec02 .inner h2 {
		margin-bottom:4rem;
		margin-top:3rem;
	}
	.contact-wrap .sec02 .inner form input[type="text"] {
		height:5rem;
	}
	.contact-wrap .sec02 .inner .agree_box {
		margin-top:1rem;
	}
	.contact-wrap .sec02 .inner .btnArea {
		margin-top:3rem;
	}
	.contact-wrap .sec02 .inner .btnArea .btn-black {
		padding:1.4rem 5rem;
	}
}
@media (max-width: 575.98px) {
	.contact-wrap .sec02:before {
		height:24rem;
	}
}