@charset "utf-8";

@font-face {
    font-family: 'GmarketSansTTFBold';
    src: url('../../font/GmarketSansTTFBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* -----------------------------------	main  -------------------------------------------------*/

#main .section{	max-width: inherit !important;}

/******** key box ***********/

#sectionM{position: relative;  display: block;  width: 100%; height: auto; box-sizing: border-box; background-color: #57bef0;}
#sectionM .container1{max-width: inherit;}
.keyBox{position: relative; display: inline-block; width: 100%; height: auto; margin: 0 auto; padding: 1.5% 0;  box-sizing: border-box;}
.wz-keyword{position: relative; display: block; width: 100%;	margin: 0px auto; font-weight: bold; font-family: 'GmarketSansTTFBold', 'sans-serif'; color:#fff; text-align:center;}
.wz-keyword p{	display:inline-block; font-size:20px; padding-bottom:9px; line-height: 150%;}
.wz-keyword-con{font-family: 'GmarketSansTTFBold';}

.wz-keyword-con{width: 100%; position: absolute; bottom: 11%; box-sizing: border-box; padding: 1% 0; overflow: hidden;}
.keytag{display: inline-block;	margin-right: calc(1.8vw + 5px);}
.keytag a{ transition:opacity .3s;   text-decoration: none; font-size: calc(2vw + 0.5rem);	color: #0473b6; text-shadow: -2px 0px #fff, 0px 2px #fff, 2px 0px #fff, 0px -2px #fff; opacity:.5;}
.keytag a:hover{ opacity:1; color: #fff; text-shadow: none; transition:opacity .3s; font-weight: bold;}
	
.keytag {text-align:center; white-space: nowrap; }
.keytag.main_color1 a{color: #ef8129; opacity: .8;}
.keytag.main_color1 a:hover{opacity: 1;}

@media all and (max-width:1089px){
#sectionM{padding: 10px 0;}
.wz-keyword-con ul {padding: 10px 0;}
.wz-keyword li a{font-size: 2rem;}
}

@media all and (max-width:768px){
#sectionM{padding-bottom: 40px;}
.wz-keyword p{margin-bottom: 30px; padding-bottom: 0px;	}
.wz-keyword-con ul {padding: 5px 0;}
.wz-keyword li{line-height: 1;}
.wz-keyword li a{font-size: 1.8rem;}
}

/* 공통 */
body{font-size: 18px;}
.main_tit{text-align: center; margin-bottom: 150px; padding-top: 74px;}
.mainSection{padding: 0 20px; box-sizing: border-box;}

/* section1 */
.mainSection1{height: 90vh; position: relative; background: url(../image/main/mainVisual01.svg) 50% 0/cover no-repeat; padding: 70px 0 30px; text-align: center;}
.mainSection1::before{
	content: "";
	position: absolute;
	bottom: 30%;
	left: 0%;
	width: 30%;
	padding-top: 24%;
	background: url(../image/main/main_tit_ico_bottom.png) 0 100%/cover no-repeat;
}
.mainSection1::after{
	content: "";
	position: absolute;
	top: 70px;
	right: 0%;
	width: 30%;
	padding-top: 24%;
	background: url(../image/main/main_tit_ico_top.png) 100% 0%/cover no-repeat;
}
.mainVisual{position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1920px; margin: 0 auto;}
.mainVisual img{width: 30%;}
.mainVisual .mainVisualImg{
	width: 100%;
	height: auto;
	object-fit: contain; /* 또는 cover */
}

/* section2 */
.main_wave{width: 100%; height: 54px; background: url(../image/main/main_wave.png) 0 0 repeat;}
.main_wave2{position: absolute; bottom: 0; left: 0; background-image: url(../image/main/main_wave2.png);}

/* main_list */
.main_list p{font-size: 35px; word-break: keep-all;}
.main_list p span{font-size: 30px; color: #000;}

/* section3 */
.mainSection3{position: relative; padding-bottom: 100px;}
.mainSection3 .main_list1{max-width: 1500px; margin: 0 auto; display: flex; justify-content: center; align-items: flex-start;}
.mainSection3 .main_list li{width: 40%; margin: 0 60px 50px; text-align: center; font-weight: bold; color: #000;}
.mainSection3 .main_list li a{display: block; margin: 0 auto;}
.mainSection3 .main_list li p{width: 100%; transition: 0.3s; margin-top: 20px;}
.mainSection3 .main_list li p span{display: block; border-bottom: 1px solid #000;}
.mainSection3 .main_list li p small{display: block; font-size: 26px;}

/* Section4 */
.mainSection4{position: relative; background: url(../image/main/mainVisual02.svg) 0 0/cover no-repeat; padding: 150px 0 250px;}
.mainSection4::before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0%;
	width: 14%;
	padding-top: 16%;
	background: url(../image/main/sub_tit_ico_bottom.png) 0 100%/cover no-repeat;
}
.mainSection4::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0%;
	width: 30%;
	padding-top: 15%;
	background: url(../image/main/sub_tit_ico_top.png) 100% 0%/cover no-repeat;
}
.mainSection4 a{
	max-width: 1800px;
	display: block;
	font-size: 35px;
	font-weight: bold;
	margin: 0 auto;
	text-align: center;
}
.mainSection4 a p{width: 60%; margin: 60px auto 0; color: #fff; transition: 0.3s;}
.mainSection4 a p span{display: block; border-bottom: 1px solid #fff; color: #fff;}

/* Section5 */
.mainSection5{background: url(../image/main/main_bg05.png) 50% 10%/100% repeat;}
.mainSection5 .main_list2{max-width: 1400px; margin: 0 auto;}
.mainSection5 .main_list2 li:last-child{margin-bottom: 100px;}
.mainSection5 .main_list2 li a{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.mainSection5 .main_list2 li a img{width: 45%;}
.mainSection5 .main_list2 li a p{width: 55%; font-weight: bold;}
.mainSection5 .main_list2 li:nth-child(odd) a p{text-align: right;}
.mainSection5 .main_list2 li a p span{display: block; border-bottom: 1px solid #000;}

/* Section6 */
.mainSection6 {background: linear-gradient(to bottom, #eaf4f8, #ffffff);}
.mainSection6 .main_list3{max-width: 1400px; margin: 0 auto;}
.mainSection6 .main_list3{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.mainSection6 .main_list3 li{width: 30%; margin-bottom: 100px;}
.mainSection6 .main_list3 li a{display: block; text-align: center;}
.mainSection6 .main_list3 li a p{font-weight: bold; margin-top: 20px;}
.mainSection6 .main_list3 li a p span{display: block; border-bottom: 1px solid #000;}


@media all and (max-width:1600px){
	.mainSection1{height: 70vh;}
}
@media all and (max-width:1089px){
	/* 공통 */
	.main_tit{width: 30%; margin: 0 auto 60px;}
	/* section1 */
	.mainSection1{height: 60vh;}
	.mainSection1::after{top: 55px;}
	.mainVisual{top: 30%;}
	/* main_list */
	.main_list p{font-size: 30px;}
	.main_list p span{font-size: 25px;}
}

@media all and (max-width:768px){
	/* main_list */
	.main_list p{font-size: 26px;}
	.main_list p span{font-size: 22px;}

	.mainSection1{height: 50vh;}
	.mainSection3 .main_list1{display: block;}
	.mainSection3 .main_list li{width: 100%; margin: 0 0 40px;}
	.mainSection3 .main_list li a{flex-direction: column; text-align: center;}
	.mainSection3 .main_list li:nth-child(even) a{flex-direction: column; text-align: center;}
	.mainSection3 .main_list li a img{width: 70%; margin: 20px 0 0;}
	.mainSection3 .main_list li:nth-child(2) a img{width: 70%;}
	.mainSection3 .main_list li:last-child a img{width: 70%;}
	.mainSection3 .main_list li p{margin: 20px 0 0;}
	.mainSection4{padding: 100px 0 200px;}
	.mainSection4::before{width: 24%; padding-top: 28%;}
	.mainSection4::after{width: 50%;padding-top: 20%;}
	.mainSection4 a p{width: 80%;}
	.mainSection6 .main_list3 li{width: 48%;}
}
@media all and (max-width:500px){
	.mainSection1{height: 40vh;}
	.main_tit{width: 50%; margin-bottom: 30px;}
	.mainSection3 .main_tit{width: 60%;}
	.mainSection3 .main_list li{margin: 0 auto 40px;}
	.mainSection3 .main_list li p small{font-size: 23px;}
	.mainSection4{padding: 50px 0 100px;}
	.mainSection5 .main_list2 li{margin-bottom: 40px;}
	.mainSection5 .main_list2 li a{flex-direction: column; align-items: center; justify-content: center; text-align: center;}
	.mainSection5 .main_list2 li:nth-child(even) a{flex-direction: column-reverse;}
	.mainSection5 .main_list2 li:nth-child(odd) a p{text-align: center;}
	.mainSection5 .main_list2 li a p{width: 100%; margin-top: 20px;}
	.mainSection5 .main_list2 li a img{width: 100%;}
	.mainSection6 .main_list3 li{width: 100%;}
}