@charset "utf-8";
/**
 * intro.css
 * Layout[intro] + Contents[login,signup]
 * 20230117 | @m | 최초작성
 * 20230117 | @m | 요구반영. 결함개선. 고도화 
 * 20230130 | @m | 
 */


/* Base ◆◆◆ */


/* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */



/* 배치 20230130 */
html, body{
	height:100%;
}
#container{
	position:relative;
	min-height:100%;
	background:linear-gradient(120deg, #f8fafc 0, #f1f5f9 100%);
}
#container>.bg1{
	position:absolute;left:0;right:0;top:0;bottom:0;
	
}


/* ◇◆ 공통 조정 ◇◆ */


input::placeholder,
textarea::placeholder{
	color:#b2c2b8;
}


/* #container */



/* 인트로(로그인,회원가입) 20230130 */
.intro1{
	position:relative;
	width:100%;
	min-width:360px;
	max-width:480px;
	margin:auto;
	text-align:center;
	word-wrap:break-word;
	word-break:keep-all;
}
/* 제목그룹1 */
.intro1 .hg1{
	width:80%;
	margin:3rem auto;
}
.intro1 .hg1 .h1{
	margin:0 0 .8125em;
	font-size:.5em;
	line-height:1.25;
}
.intro1 .hg1 .h1t1{
	display:block;
	color:#fff;
	font-weight:700;
	font-size:5em;
}
.intro1 .hg1 .h1t2{
	display:inline-block;
	padding:0 .25em;
	border-left:1rem solid #0c9;
	/* border-right:1rem solid transparent; */
	background:#fff;
	color:#0c9;
	font-weight:700;
	font-size:5em;
}
.intro1 .hg1 .t1{
	display:block;
	color:#fff;
	font-size:1em;
	line-height:1.375;
}
.intro1 .hg1 img{
	width:100%;
	height:auto;
}
/*  */
.intro1 .w1{	}
.intro1 .w2{
	position:relative;
	margin:0 20px 4.375em; /* (70/16) */
	color:#658b7e;
	text-align:center;
}
.intro1 .w2w1{
	position:relative;
	box-sizing:border-box; /* ☆ */
	padding:10%;
	border-radius:1.25em;
	background:#fff;
	box-shadow:0 4px 50px rgba(0, 0, 0, .25);
}
/* 제목그룹2 */
.intro1 .hg2{
	margin:0 0 1.75em;
}
.intro1 .hg2 .h1{
	display:block;
	margin:0;
	font-size:.75em;
}
.intro1 .hg2 .h1t1{
	color:#0c9;
	font-weight:700;
	font-size:2.1875em;
	letter-spacing:0;
}
/* 탭 */
.intro1 .introtab{
	display:flex; /* ☆ */
	margin:0 0 2.375em;
}
.intro1 .introtab .a1{
	display:block;
	width:50%;
	padding:.625em;
	border-bottom:3px solid #658b7e;
	color:#658b7e;
	font-size:1.25em;
}
.intro1 .introtab .a1t1{
	position:relative;
}
.intro1 .introtab .a1:hover{
	/* border-bottom-color:#0c9; */
	font-weight:600;
	color:#0c9;
}
.intro1 .introtab .a1.active{
	border-bottom-color:#0c9;
	color:#0c9;
	font-weight:600;
}
.intro1 .introtab .a1.active .a1t1:before{content:''; /* ○ */
	display:block;
	position:absolute;right:0;top:0;
	width:6px;height:6px;
	margin:-2px -10px;
	border-radius:50%;
	background:#0c9;
}
/* 폼항목 */
.intro1 .item{
	position:relative;
	margin:0;
}
.intro1 .input{
	display:block;
	box-sizing:border-box; /* ☆ */
	width:100%;
	height:auto;
	margin:0 0 1em;
	padding:1em 1.375em;
	border:0;
	border-radius:.625em;
	background:#f7f7f7;
}
.intro1 .input:focus{
	color:#000;
}
.intro1 .submit{
	display:block;
	width:100%;
	height:auto;
	margin:2em 0 0;
	padding:1em 1.375em;
	border:0;
	border-radius:.625em;
	background:#0c9;
	color:#fff;
	text-align:center;
}
.intro1 .submit .t1{
	font-weight:600;
	font-size:1em;
}
/*  */
.intro1 .fg1{
	margin:2.375em 0 0;
}
.intro1 .fg1 .a2{}
/*  */
.intro1 .company{
	display:block;
	margin:2.375em 0 0;
}
.intro1 .company .logo1{
	width:90px;
	height:auto;
}
.intro1 .copyright{
	display:block;
	margin:1em 0;
	font-size:.75em;
	letter-spacing:0;
}



/* ◇◆ StyleName. YYYYMMDD. @Who	 ◇◆ */



/* RWD ◇◆◇◆◇◆◇◆◇◆◇◆ */
/* 콘텐츠 마다 미디어쿼리 중단점을 다르게 표현할 때는 각 콘텐츠 CSS 아래 바로 선언 */
/* 여기는 전체 콘텐츠 배치 관련 CSS 만 모아서 정의한다. */
@media all and (min-width:768px){/* medium ◇◆◇◆◇◆◇◆◇◆ */
} /* /(min-width:768px) */
@media all and (min-width:1000px){ /* large ◇◆◇◆◇◆◇◆◇◆ */
} /* /(min-width:1000px) */
@media all and (min-width:1260px){ /* xlarge (1200+20*2+16+2*2) ◇◆◇◆◇◆◇◆◇◆ */


#container{
	display:flex; /* ☆ */
	justify-content:center;
	align-items:center;
}
#container>.bg1{
	
}


.intro1{
	display:flex; /* ☆ */
	justify-content:space-between;
	width:81.25%; /* (1560/1920) */
	max-width:1560px;
}
.intro1 .w1{
	flex:none;
	text-align:left;
}
.intro1 .w2{
	width:39.744%; /* (620/1560) */
	margin:30px;
}
.intro1 .w2w1{}
.intro1 .w2w2{
	display:none;
}
.intro1 .hg1{
	width:auto;
	margin:0;
}
.intro1 .hg1 .h1{
	font-size:1em;
}
.intro1 .hg1 .t1{
	max-width:560px;
	margin:0 0 0 2em;
	font-size:1.25em;
}
.intro1 .hg2 .h1{
	font-size:1em;
}
.intro1 .company .logo1{
	width:90px;
}


/* ◇◆◇◆ */
} /* /(min-width:1260px) */
/* /RWD ◇◆◇◆◇◆◇◆◇◆◇◆ */


/* ◇◆ animation ◇◆◇◆◇◆◇◆◇◆ */
/* ◇◆ /animation ◇◆◇◆◇◆◇◆◇◆ */