@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');

.welcomeXE {
	padding-top: 50px;
	font-family: Raleway,'나눔바른고딕',NanumBarunGothic,ng,'맑은 고딕','Malgun Gothic','돋움',Dotum,'애플 SD 산돌고딕 Neo','Apple SD Gothic Neo',AppleGothic,Helvetica,sans-serif,Tossface
}

.content + .welcomeXE {
	padding-top: 0
}

.welcomeXE section {
	width: 1200px;
	margin: 0 auto
}

.welcomeXE .tit {
	padding-bottom: 32px;
	font-size: 40px;
	color: #333;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 50px
}

.welcomeXE .noti {
	display: block;
	padding: 28px 0 0;
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: #a374db;
	letter-spacing: 1px;
	line-height: 20px
}

.welcomeXE .intro {
	width: 408px;
	height: 600px;
	padding-right: 792px;
	background: url(../img/intro.png) 100% 100% no-repeat
}

	.welcomeXE .intro .cont {
		padding-bottom: 37px;
		font-size: 15px;
		font-weight: 400;
		color: #888;
		line-height: 27px
	}

	.welcomeXE .intro .btn_start {
		display: inline-block;
		margin: 50px 0;
		padding: 0 27px;
		height: 40px;
		border: 2px solid #a374db;
		background-color: #fff;
		font-size: 13px;
		line-height: 40px;
		letter-spacing: 1px;
		color: #a374db;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out
	}

		.welcomeXE .intro .btn_start:active .welcomeXE .intro .btn_start:focus, .welcomeXE .intro .btn_start:hover {
			background-color: #a374db;
			color: #fff
		}

.bg-holder {
	background-image: url(../img/bg_stat.jpg)
}

.welcomeXE .xeicon {
	overflow: hidden;
	position: static;
	width: 100%;
	margin: 0;
	height: 100%
}

	.welcomeXE .xeicon h1 {
		margin-top: 170px;
		font-size: 40px;
		color: #f6f6f6;
		text-align: center;
		letter-spacing: 3px;
		font-weight: 400;
		line-height: 1.2em;
		text-transform: uppercase
	}

		.welcomeXE .xeicon h1 a {
			color: #FFF
		}

	.welcomeXE .xeicon .button-area {
		text-align: center;
		margin-bottom: 140px
	}

		.welcomeXE .xeicon .button-area .btn_item {
			font-size: 14px;
			letter-spacing: 2px
		}

.welcomeXE .guide {
	height: 640px;
	padding-top: 80px
}

	.welcomeXE .guide ul {
		padding-top: 27px
	}

	.welcomeXE .guide li {
		position: relative;
		float: left;
		width: 314px;
		min-height: 140px;
		padding: 0 0 0 70px;
		margin: 0 0 30px
	}

	.welcomeXE .guide h2 {
		padding: 7px 24px 13px 0;
		font-size: 17px;
		font-weight: 400;
		line-height: 23px;
		color: #333
	}

	.welcomeXE .guide p {
		padding: 0 24px 0 0;
		font-size: 14px;
		line-height: 26px;
		color: #888
	}

	.welcomeXE .guide .ico {
		position: absolute;
		top: 0;
		left: 0;
		width: 48px;
		height: 48px;
		border-radius: 100%;
		background-color: #555;
		font-size: 22px;
		text-align: center;
		line-height: 50px;
		color: #efefef
	}

		.welcomeXE .guide .ico:active, .welcomeXE .guide .ico:focus, .welcomeXE .guide .ico:hover {
			background-color: #a374db
		}

	.welcomeXE .guide p a {
		color: #444
	}

		.welcomeXE .guide p a:active, .welcomeXE .guide p a:focus, .welcomeXE .guide p a:hover {
			color: #a374db;
			border-bottom: 1px solid #a374db
		}

.welcomeXE .features {
	width: 100%;
	margin: 0;
	height: 800px;
	padding-top: 80px;
	background-color: #444
}

	.welcomeXE .features .cont, .welcomeXE .features .noti, .welcomeXE .features .tit {
		width: 1200px;
		margin-left: auto;
		margin-right: auto
	}

	.welcomeXE .features .tit {
		color: #f6f6f6
	}

	.welcomeXE .features .cont {
		font-size: 15px;
		line-height: 27px;
		color: #ddd
	}

	.welcomeXE .features ul {
		overflow: hidden;
		margin-top: 38px;
		padding: 0 20px
	}

	.welcomeXE .features li {
		float: left;
		width: 25%;
		height: 480px
	}

		.welcomeXE .features li .fe_box {
			height: 478px;
			margin: 0 10px;
			padding: 0 20px;
			border: 1px solid #333;
			background-color: #f6f6f6;
			text-align: center;
			-webkit-transition: all .2s ease-out;
			-moz-transition: all .2s ease-out;
			-o-transition: all .2s ease-out;
			transition: all .2s ease-out
		}

	.welcomeXE .features .fe_box .ico {
		display: inline-block;
		width: 70px;
		height: 70px;
		margin: 162px 0 27px;
		background: url(../img/sp_feature.png) 0 0 no-repeat;
		text-align: center;
		font-size: 60px;
		line-height: 70px
	}

	.welcomeXE .features .fe_box h2 {
		font-size: 21px;
		color: #555;
		font-weight: 400
	}

	.welcomeXE .features .fe_box p {
		margin-bottom: 80px;
		font-size: 15px;
		line-height: 24px;
		color: #f6f6f6
	}

	.welcomeXE .features .fe_box a {
		display: inline-block;
		height: 40px;
		padding: 0 40px;
		border: 2px solid #f6f6f6;
		font-family: 'Open Sans',sans-serif;
		font-size: 13px;
		letter-spacing: 1px;
		color: #f6f6f6;
		line-height: 40px;
		font-weight: 600;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out
	}

		.welcomeXE .features .fe_box a:hover {
			background-color: #f6f6f6;
			border-color: #f6f6f6;
			color: #a374db
		}

	.welcomeXE .features .fe_top {
		position: relative;
		top: 0;
		-webkit-transition: all .2s ease-out;
		-moz-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
		transition: all .2s ease-out
	}

	.welcomeXE .features .fe_bottom {
		position: relative;
		top: 192px;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out
	}

	.welcomeXE .features .fe_box.on {
		background-color: #a374db
	}

		.welcomeXE .features .fe_box.on .fe_top {
			top: -104px
		}

		.welcomeXE .features .fe_box.on .fe_bottom {
			top: -67px
		}

		.welcomeXE .features .fe_box.on h2 {
			color: #f6f6f6
		}

		.welcomeXE .features .fe_box.on .ico {
			background: url(../img/sp_feature.png) 0 -70px no-repeat
		}

	.welcomeXE .features .fe_box .ico2 {
		background-position: -70px 0
	}

	.welcomeXE .features .fe_box .ico3 {
		background-position: -140px 0
	}

	.welcomeXE .features .fe_box .ico4 {
		background-position: -210px 0
	}

	.welcomeXE .features .fe_box.on .ico2 {
		background-position: -70px -70px
	}

	.welcomeXE .features .fe_box.on .ico3 {
		background-position: -140px -70px
	}

	.welcomeXE .features .fe_box.on .ico4 {
		background-position: -210px -70px
	}

.welcomeXE .connect {
	height: 344px;
	padding-top: 80px
}

	.welcomeXE .connect ul {
		overflow: hidden;
		padding: 40px 0
	}

	.welcomeXE .connect li {
		position: relative;
		float: left;
		width: 180px;
		margin-left: 24px;
		padding: 4px 0 0 102px;
		min-height: 78px
	}

		.welcomeXE .connect li:first-child {
			margin-left: 0
		}

	.welcomeXE .connect .ico {
		position: absolute;
		top: 0;
		left: 0;
		width: 78px;
		height: 78px;
		border-radius: 100%;
		background-color: #a374db;
		text-align: center;
		font-size: 40px;
		color: #fff
	}

		.welcomeXE .connect .ico:active, .welcomeXE .connect .ico:focus, .welcomeXE .connect .ico:hover {
			background-color: #555
		}

		.welcomeXE .connect .ico i {
			line-height: 78px
		}

	.welcomeXE .connect h2 {
		margin-bottom: 16px;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 18px;
		color: #333
	}

	.welcomeXE .connect p {
		font-size: 13px;
		color: #888;
		line-height: 21px
	}

@media all and (max-width:479px) {
	.welcomeXE {
		padding-top: 0
	}

		.welcomeXE section {
			width: 100%;
			box-sizing: border-box;
			overflow: hidden
		}

		.welcomeXE .tit {
			padding-bottom: 16px;
			font-size: 30px;
			color: #333;
			font-weight: 700;
			letter-spacing: 1px;
			line-height: 40px
		}

		.welcomeXE .intro {
			width: 100%;
			box-sizing: border-box;
			padding: 0 14px;
			height: auto;
			background: #fff
		}

			.welcomeXE .intro .cont {
				padding-bottom: 17px
			}

			.welcomeXE .intro .btn_start {
				margin: 20px 0 50px
			}

		.welcomeXE .xeicon {
			height: auto
		}

			.welcomeXE .xeicon h1 {
				margin-top: 70px
			}

			.welcomeXE .xeicon .button-area {
				margin-bottom: 50px
			}

				.welcomeXE .xeicon .button-area .btn_item {
					font-size: 14px;
					letter-spacing: 2px;
					margin: 20px 0
				}

		.welcomeXE .xeicon {
			background-position: 0 0;
			background-attachment: inherit
		}

		.welcomeXE .guide {
			padding: 0 14px;
			height: auto;
			padding-top: 40px
		}

			.welcomeXE .guide li {
				width: auto;
				margin: 0 0 20px
			}

		.welcomeXE .features {
			padding: 40px 14px 0;
			height: auto
		}

			.welcomeXE .features .cont, .welcomeXE .features .noti, .welcomeXE .features .tit {
				width: 100%;
				margin-left: auto;
				margin-right: auto
			}

			.welcomeXE .features ul {
				padding: 0
			}

			.welcomeXE .features li {
				clear: both;
				width: 100%;
				height: auto;
				margin: 0 0 20px
			}

				.welcomeXE .features li .fe_box {
					margin: 0;
					padding: 20px;
					border: 1px solid #333;
					background-color: #a374db;
					position: relative;
					height: auto;
					text-align: left
				}

			.welcomeXE .features .fe_box .ico {
				display: inline-block;
				width: 70px;
				position: absolute;
				top: 0;
				left: 0;
				height: 70px;
				margin: 0;
				background: url(../img/sp_feature.png) 0 -70px no-repeat;
				font-size: 20px;
				line-height: 70px;
				text-align: left
			}

			.welcomeXE .features .fe_box h2 {
				color: #f6f6f6;
				font-weight: 400;
				padding-left: 80px
			}

			.welcomeXE .features .fe_box a {
				height: 30px;
				padding: 0 20px;
				line-height: 30px;
				float: right
			}

			.welcomeXE .features .fe_bottom {
				padding-left: 80px;
				overflow: hidden;
				position: static
			}

			.welcomeXE .features .fe_box p {
				margin-bottom: 40px;
				margin-top: 10px;
				font-size: 13px;
				line-height: 20px
			}

			.welcomeXE .features .fe_box .ico2 {
				background-position: -70px -70px
			}

			.welcomeXE .features .fe_box .ico3 {
				background-position: -140px -70px
			}

			.welcomeXE .features .fe_box .ico4 {
				background-position: -210px -70px
			}

			.welcomeXE .features .fe_box.on .fe_bottom, .welcomeXE .features .fe_box.on .fe_top {
				top: 0
			}

		.welcomeXE .connect {
			height: auto;
			padding: 80px 14px 0
		}

			.welcomeXE .connect ul {
				padding-top: 0
			}

			.welcomeXE .connect li {
				margin-left: 0;
				width: auto;
				min-height: 78px;
				margin-bottom: 20px
			}
}