/* 전체공통 */
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }



	/* Common style */
	.grid figure {
		position: relative;
		overflow: hidden;
		margin: 0px;
		background: #787878;
		text-align: center;
		cursor: pointer;
		 -webkit-box-sizing: border-box; 
		 box-sizing: border-box; 
	}
	.grid figure.width300 {
		 max-width:300px;
		 max-height:328px;
		 min-width:100px;
		 width: 100%;
	}

	.grid figure img {
		position: relative;
		display: block;
		max-width: 100%;
	}

	.grid figure figcaption {
		/* text-transform: uppercase; */
		font-size: 1.25em;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.grid figure figcaption::before,
	.grid figure figcaption::after {
		pointer-events: none;
	}

	.grid figure figcaption,
	.grid figure  > a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* Anchor will cover the whole item by default */
	/* For some effects it will show as a button */
	.grid figure > figcaption > a {
		z-index: 1000;
		text-indent: -10000px;
		white-space: nowrap;
		position:absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
	}

	/* 폰트 속성 공통- 건드리면 다 바뀜 */
	figure h2{
		font-weight: 500;
		letter-spacing: -2px;
		font-size:1.15em;
		line-height:110%;
	}
	figure p.txt_eng {
		font-size:12px;
		letter-spacing: 0px;
		padding-bottom:10px;
		font-weight: bold;
	}
	figure p {
		letter-spacing: -0.7px;
		font-size: 0.8em;
		line-height:120%;
	}


	/* 폰트 속성 #software */

	#software figure h2{ padding-top:25px; color: #363636 !important;}
	#software figure:hover h2{ color: #fff !important;font-size: 1.25em;}
	#software figure { color: #fff;}
	#software figure p.txt_exam{}
	#software figure p.txt_goto { 
		background:#fff;
		color:#59861a;
		display:inline-block; 
		padding:4% 10%;
		margin-top:1em;
	}
	#software .grid figure > figcaption > a:hover {
		background: url("../images/main/arrow_02.gif") no-repeat 50% 85%;
	}


	
	


/* Individual effects */

	/*---------------*/
	/***** Sarah *****/
	/*---------------*/

	figure.effect-sarah { background: linear-gradient(-180deg, #00a8e7, #0041b9); margin-top:25px;}

	figure.effect-sarah img {
		max-width: none;
		width: -webkit-calc(100% + 20px);
		width: calc(100% + 20px);
		-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		transition: opacity 0.35s, transform 0.35s;
		-webkit-transform: translate3d(-10px,0,0);
		transform: translate3d(-15px,0,0);
	}

	figure.effect-sarah:hover img {
		opacity: 0.2;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	figure.effect-sarah figcaption {text-align: left;}

	figure.effect-sarah div {
		width:120%;
		background:rgba(255,255,255,1);
		position: absolute;
		top: 95%;
		left: 50%;
		text-align:center;
		transform: translateX(-50%) translateY(-50%);
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		-webkit-transition: -webkit-transform 0.35s;
		transition: transform 0.35s;
	}
	figure.effect-sarah:hover div {
		width:90%;
		top: 60%;
		transform: translateX(-50%) translateY(-70%);
		-webkit-transform: translateX(-50%) translateY(-70%);
		background:rgba(255,255,255,0);
	}
	figure.effect-sarah h2 {
		position: relative;
		overflow: hidden;
		padding: 0 0 2%;
		font-family:"Noto Sans KR","Nanum Gothic","Malgun Gothic","돋움","굴림",sans-serif;
		font-weight:500;
	}

	figure.effect-sarah .white_t h2::after {background: #fff;}
	figure.effect-sarah p {
		padding: 5% 15% 15%;
		opacity: 0;
		-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
		transition: opacity 0.35s, transform 0.35s;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	figure.effect-sarah:hover p {
		opacity: 1;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		display:block;
	}




/* 작은 기기들 (태블릿, 768px 이하) */
@media (max-width: 768px) {
	#software figure h2 { font-size: 1.2em; padding:25px 0;}
	#software figure .txt_st01 { display:none; }
	figure.effect-sarah div {
		top: 92%;
	}
}
/* 작은 기기들 (태블릿, 768px 이하) */
@media (max-width: 500px) {
	#software figure h2 { font-size: 1em; padding:15px 0;}
	#software figure:hover h2 { font-size: 1em;}
}