@charset "UTF-8";

body {}

/* Area */
section {width: 100%; height: auto;}
section:after {display: block; content:""; clear: both;}
section .wrap:after {display: block; content:""; clear: both;}
section a.box {display:block; overflow:hidden;}


.wrap {width:1400px; margin: 0 auto;}


#index_content {padding:89px 0 150px;}

/* mainVisual */
#mainVisual {position:relative; width:100%; height:800px;}
/*#mainVisual .visualWrap {position:absolute; top:0; right:0; width:60%; height:100%; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.7));}*/
#mainVisual .visual_txt {position:absolute; top:10%; right:10%; font-family: 'GmarketSansMedium'; text-align:right; font-size:1.25rem; color:#333;}
#mainVisual .visual_txt>h2 {font-size:2rem; color:#39b8b0; font-family: 'GmarketSansBold'; margin-bottom:1rem;}

.cont_txt {font-family: 'GmarketSansMedium'; font-size:1.125rem; line-height:1.5; word-break: break-all; letter-spacing: -0.04rem;}
.cont_img {overflow:hidden;}

/* cont1 */
#cont1 {margin-top:90px;}
#cont1 .cont_txt {display: inline-block; padding:1.5rem 2rem;}
#cont1 .cont_txt h2 {margin-bottom:10px;}

#cont1 .left {float: left; width:44%;}
#cont1 .left a {position:relative;}
#cont1 .left a:first-child {margin-bottom:20px;}
#cont1 .left a .cont_img img {height: 300px; transition: all 0.3s ease-in-out;}
#cont1 .left a:hover .cont_img img {transform:scale(1.1);}
#cont1 .left a .cont_txt {position:absolute; top:0; left:0; color:#fff;}
#cont1 .left a .cont_txt h2 {font-family: 'GmarketSansBold'; font-size:1.25rem;}

#cont1 .right {float: right; width: 54%; box-sizing: border-box; background: #e0f2fc;}
#cont1 .right .cont_txt {font-family: 'Eulyoo1945-Regular'; color:#fff; height: 620px; text-align: justify;}
#cont1 .right .cont_txt h2 {font-size:1.5rem; margin-bottom:2rem;}

/* cont2 */
#cont2 {margin-top:90px; padding: 90px 0; background: linear-gradient(120deg, #e9f4f5, #f8f1f5);}
#cont2 a {float:left; width:calc((100% / 3) - (4% / 3)); vertical-align:top; margin-right:2%; border-radius:30px; border:1px solid #ddd; background:#fff; transition: all 0.3s ease-in-out;}
#cont2 a:hover {transform: translateY(-4%); box-shadow: 0.3rem 0.3rem 0.6rem #ccc;}
#cont2 a:last-child {margin-right:0px;}
#cont2 a .cont_txt h2 {width:75%; font-family: 'GmarketSansBold'; font-size:1.25rem; color:#c16ba8; padding: 1rem 2rem 0.5rem; border-bottom: 5px solid #c16ba8;}
#cont2 a .cont_txt>div {padding: 1rem 2rem 0; height:120px;}
#cont2 a .cont_img {width:75%; margin: 0 auto 35px;}
#cont2 a .cont_img img {width:100%;}
#cont2 a:hover .cont_img img {opacity:0.7; transition: all 0.3s ease-in-out;}

/* cont3 */
#cont3 {margin-top:90px;}
#cont3 a {position:relative;}
#cont3 .left {float:left; width:49%;}
#cont3 .right {float:right; width:49%;}
#cont3 a img {height: 290px; transition: all 0.3s ease-in-out;}
#cont3 a:hover img {transform:scale(1.1);}
#cont3 a .cont_txt {display: inline-block; text-align: right; padding: 1.5rem 2rem; position:absolute; top:0; right:0; color:#fff;}
#cont3 a .cont_txt h2 {display: inline-block; font-family: 'GmarketSansMedium'; font-size:1.125rem; line-height:32px; text-align: center; width: 150px; height:32px; margin-bottom:10px;}
#cont3 a:hover .cont_txt>h2.para {background:url("../images/para02.png") no-repeat; color:#666;}
.para {background:url("../images/para01.png") no-repeat; background-size:cover;}

/* cont4 */
#cont4 {margin-top:40px;}
#cont4 a {float:left; width:calc((100% / 3) - (4% / 3)); vertical-align:top; margin-right:2%; border:1px solid #ddd; background:#f8f8f8;}
#cont4 a:last-child {margin-right:0px;}
#cont4 a .cont_img img {width:100%; transition: all 0.3s ease-in-out;}
#cont4 a:hover .cont_img img {transform:scale(1.1);}
#cont4 a .cont_txt {position:relative; width:100%; height:140px; text-align:center;}
#cont4 a .cont_txt h2 {position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-family: 'GmarketSansMedium'; font-size:1.125rem; color:#fff; background:#c16ba8; width: 220px; height:34px; line-height:34px; border-radius:50px;}
#cont4 a .cont_txt>div {position:absolute; width:100%; top:54%; left:50%; transform:translate(-50%,-50%);}

.noto {font-family: 'Noto Sans KR'; font-weight:400;}

/* setting */
.M_hide {display: block; color: rgba(0,0,0,0);}  /* 768 */
.M_hide2 {display: block; color: rgba(0,0,0,0);}  /* 1240 */
.M_hide3 {display: block; color: rgba(0,0,0,0);}  /* 1440 */
.M_hide4 {display: block; color: rgba(0,0,0,0);} /* 580 */


.M_block4 {display:none;} /* 580 */

/* media css */
@media (max-width: 1440px) {
	.wrap {width:96%; margin: 0 auto;}
	.M_hide3 {display:none;}

	/* mainVisual */
	#mainVisual {height:650px;}
	#mainVisual .visual_txt {font-size:1.2rem; top:5%; right:3%;}

	/*cont_margin-top*/
	#cont1 {margin-top:60px;}
	#cont2 {margin-top:60px; padding: 60px 0;}
	#cont3 {margin-top:60px;}
}

@media (max-width: 1240px) {
	.M_hide2 {display: none;}

	/*cont_margin-top*/
	#cont1 {margin-top:60px;}
	#cont2 {margin-top:60px; padding: 60px 0;}
	#cont3 {margin-top:60px;}
}


@media (max-width: 940px) {
	/* mainVisual */
	#mainVisual {height:500px;}
	#mainVisual .visual_txt {font-size:1.125rem;}
	#mainVisual .visual_txt>h2 {font-size:1.5rem;}
	/*cont_margin-top*/
	#cont1 {margin-top:40px;}
	#cont2 {margin-top:40px; padding: 40px 0;}
	#cont3 {margin-top:40px;}

	/*cont1*/
	#cont1 .left {float: none; width:100%; margin-bottom:20px;}
	#cont1 .left:after {display: block; content:""; clear: both;}
	#cont1 .left a:first-child {float:left; width:49%; margin-bottom:0;}
	#cont1 .left a:last-child {float:right; width:49%;}

	#cont1 .right {float: none; width: 100%; position:relative; box-sizing: border-box;}
	#cont1 .right .cont_txt {height: auto; padding-bottom:3rem;}
	#cont1 .right .cont_img img {width:100%; height: auto;}

	/*cont2*/
	#cont2 a {float:none; width:100%; margin-right:0; margin-bottom:20px;}
	#cont2 a:last-child {margin-bottom:0;}
	#cont2 a:hover {transform: translateY(0); box-shadow: 0.2rem 0.2rem 0.4rem #ccc;}
	#cont2 a:after {display: block; content:""; clear: both;}
	#cont2 a .cont_txt {float:left; width:52%;}
	#cont2 a .cont_txt h2 {width:100%;}
	#cont2 a .cont_txt>div {padding: 1rem 2rem; height:auto;}
	#cont2 a .cont_img {float:right; width:35%; margin: 20px 2rem;}

	/*cont4*/
	#cont4 a {float:none; width:100%; margin-right:0; margin-bottom:20px; transition: all 0.3s ease-in-out;}
	#cont4 a:last-child {margin-bottom:0;}
	#cont4 a:hover {transform: translateY(0); box-shadow: 0.2rem 0.2rem 0.4rem #ccc;}
	#cont4 a:after {display: block; content:""; clear: both;}
	#cont4 a .cont_img {float:left; width:50%;}
	#cont4 a .cont_txt {float:right; width:50%; position:relative; height:100%;}
	#cont4 a .cont_txt>img {width:100%;}
	#cont4 a .cont_txt h2 {position:absolute; top:18%; left:50%; transform:translateX(-50%);}
	#cont4 a .cont_txt>div {position:absolute; width:100%; top:62%; left:50%; transform:translate(-50%,-50%);}
}

@media (max-width: 768px) {
	.M_hide {display: none;}

	#index_content {padding:69px 0 100px;}
}

@media (max-width: 680px) {
	/*cont1*/
	#cont1 .left a:first-child {float:none; width:100%; margin-bottom:20px;}
	#cont1 .left a:last-child {float:none; width:100%;}
	#cont1 .left a .cont_img img {width:100%; height: auto;}

	/* cont3 */
	#cont3 a.left {float:none; width:100%; margin-bottom:20px;}
	#cont3 a.right {float:none; width:100%;}
	#cont3 a img {width:100%; height:auto; transition: all 0.3s ease-in-out;}
	#cont3 a:hover img {transform:scale(1.1);}
}

@media (max-width: 580px) {
	.M_hide4 {display: none;}
	.M_block4 {display:block;}

	.wrap {width:94%; margin: 0 auto;}

	/* mainVisual */
	#mainVisual {height:400px;}

	/*cont_margin-top*/
	#cont1 {margin-top:30px;}

	/*cont2*/
	#cont2 {padding: 40px 0;}
	#cont2 a .cont_txt {float:none; width:100%; display: block;}
	#cont2 a .cont_img {float:none; width:60%; margin: 10px auto 30px;}

	/*cont4*/
	#cont4 a .cont_img {float:none; width:100%;}
	#cont4 a .cont_txt {float:none; width:100%; position:relative; height:140px;}
	#cont4 a .cont_txt h2 {position:absolute; top:-17px; left:50%; transform:translateX(-50%);}
	#cont4 a .cont_txt>div {position:absolute; width:100%; top:54%; left:50%; transform:translate(-50%,-50%);}
}

@media (max-width: 420px) {
	/*cont1*/
	#cont1 .cont_txt {padding: 0.8rem 1rem;}
	#cont1 .cont_txt h2 {margin-bottom:5px;}

	/*cont2*/
	#cont2 a .cont_txt h2 {padding: 1rem;}
	#cont2 a .cont_txt>div {padding: 1rem;}
	#cont2 a .cont_img {width:70%; margin: 0 auto 20px;}

	/*cont3*/
	#cont3 a .cont_txt {padding: 0.8rem 1rem;}
	#cont3 a .cont_txt h2 {margin-bottom:5px;}

	/*cont4*/
	#cont4 a .cont_txt {height:120px;}
}

@media (max-width: 280px) {
	#cont1 .left a .cont_txt>div {display:none;}
	#cont3 a .cont_txt>div {display:none;}
}