.ani {
	transition-property: all;
	transition-duration: .2s
}
*, *::before, *::after {
    box-sizing: border-box;
}
html,
body {
	font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	color: #333;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -0.01em;
	line-height: 1.75em;
	-moz-font-feature-settings: 'ss01', 'ss02', 'ss03', 'ss05', 'ss07', 'ss08', 'calt';
	-webkit-font-feature-settings: 'ss01', 'ss02', 'ss03', 'ss05', 'ss07', 'ss08', 'calt';
	font-feature-settings: 'ss01', 'ss02', 'ss03', 'ss05', 'ss07', 'ss08', 'calt';

}
.ani {
	transition-property: all;
	transition-duration: .2s
}
.wrap{
	min-height: calc(100vh - 250px);
}
div,
section{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
table {
	border-spacing: 0;
	width:100%;
}
.square{
	width:100%;
}
.square:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.clear::after{
	clear:both;
	content:"";
	display:table;
}
.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-break: break-all;
}
.height-fixed{
	height: 1.2em;
    line-height: 1em;
    width: 200px;
    display: block;
}


header{
	background:#3c4046;
	width:100%;
	background-image: url(/assets/img/index_main_01.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	
}
.indexHeader{
	height:740px;
}
.indexHeader > .indexImgMain{
	height:100%;
	width:1920px;
	margin:0 auto;
	position: relative;

}

.indexHeader > .indexImgMain .IndexMainTextGroup{
	position: absolute;
	top:calc(50% + 45px);
	left:100px;
	transform: translateY(-50%);
	text-align: left;
}
.indexHeader > .indexImgMain h3{

	color:#fff;
	font-size:50px;
	line-height:125%;
}
.indexHeader > .indexImgMain .h3Sub{
	color:#ffffff;
	font-size:20px;
	margin-top:20px;
}

.subHeader{
	height:450px;
}
.subImgMain{
	height:100%;

	margin:0 auto;
	position: relative;
}
.subMainTextGroup{
	position: absolute;
	top:calc(50% + 25px);
	width: 100%;
	transform: translateY(-50%);
	text-align: center;
}
.subHeader > .subImgMain h3{

	color:#fff;
	font-size:50px;
	line-height:125%;
}
.subHeader > .subImgMain .h3Sub{
	color:#ffffff99;
	font-size:15px;
	margin-top:20px;
	font-weight: 400;
}
h1,h2,h3,h4,h5,h6,ul,li{
	padding:0;
	margin:0;
	list-style: none;
}
a{
	text-decoration: none;
}
nav,
nav > div > ul > li > a,
nav > div > ul > li > ul,
nav > div > ul > li > a::after{
	transition-property: all;
	transition-duration: .2s

}



nav {
	position: fixed;
	left:0;
	top:0;
	width:100%;
	background: transparent;/* #655DC6; */
	height: 110px;
	z-index: 1000;
	border-bottom:1px solid #ffffff77;
}
nav > div {
	margin:0 auto;
	position: relative;
	height: 100%;
}
nav > div > ul{
	width:1200px;
	margin: 0 auto;
	display: block;
	text-align: center;
}
nav:hover{
	
	height: 90px;
}
nav > div > ul > li{
	display: inline-block;
	width:150px;
	position: relative;
}
nav > div > ul > li > a{
	color:#fff;
	font-weight: 800;
	padding:38px 0;
	display: block;	
	position: relative;
	height:90px;
}
nav > div > ul > li::after{
	content:"";
	width:100%;
	height:5px;
	display: block;
	position: absolute;
	background-color: #3A8DDE;
	bottom:0px;
	left:0;
	opacity: 0;
}
nav > div > ul > li:hover::after{
	opacity: 1;
}

nav:hover > div > ul > li > a{
	padding:30px 0;
}
nav > div > ul > li > ul{
	position: absolute;
	width:100%;
	left:0;
	top:110px;
	background-color: #fff;
	visibility: hidden;
	opacity: 0;
	border:0;
}
nav > div > ul > li:hover > ul{
	top:90px;
	display: block;
	visibility: visible;
	opacity: 1;
	border:1px solid #ddd;
	padding:10px 0;
}
nav > div > ul > li > ul > li > a {
	font-size:16px;
	display: block;
	padding:5px 0;
	color:#333;
	font-weight: 600;
}
nav > div > ul > li > ul > li > a:hover{
	color:#3A8DDE;
}
nav > div > a > img{
	padding:10px;
	height:70px;
	position: absolute;
	left:50px;
	top:calc(50% - 35px);
}
nav.on{
	background-color: #fff;
	box-shadow: 0 0 30px 0 #00000033 ;
}

nav.on > div > ul > li > a{
	color:#191919;
	
}

h2{
	color:#444;
	text-align:center;
	font-size:46px;
	line-height: 46px;
	font-weight: bolder;
}

.idxSecBox{
	padding:100px 0;
}
.idxSecBox .sub{
	max-width:1120px;
	margin:50px auto;
	text-align: center;
	padding:20px
}
.idxSecBox .subpage{
	margin:0px auto 5px;
	padding:0px 0 20px
}

.idxSecBox .btns{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 30px;
	max-width:1920px;
	width:100%;
	margin:0 auto;
	padding:40px;
}
.idxSecBox .btns > div{
	border-radius: 10px;
    box-shadow: 5px 5px 25px 0 rgb(0 0 0 / 15%);
	font-size:16px;
	padding-bottom:30px;
	background-size: 100px;
	background-position: calc(66.67% + 60px) bottom;
}

.idxSecBox .btns > div a{

	font-weight: 600;
	color:#191919;
	width:100%;
	height:60px;
	display: grid;
	grid-template-columns: 1fr 60px;
	line-height: 60px;
	border-bottom: 1px solid #eee;
	
}
.idxSecBox .btns > div a > div:first-child{
	padding-left:30px;
}
.idxSecBox .btns > div a > div:last-child{
	padding-right:30px;
	text-align: right;
}
.idxSecBox .btns .cont{
	padding:30px;
	line-height: 140%;
	font-size:22px;
	font-weight: 800;
}
.idxSecBox .btns p{
    padding: 0 30px;
    font-size: 14px;
    font-weight: 400;
    color: #777;
    line-height: 140%;
    margin: 0;
    display: block;
    width: 66.67%;
}

.darknessBg{
	background:#3c4046;
	color:#e6e6e6;
}

.darknessBg h2,
.darknessBg .btns > div a{

	color:#e6e6e6;
}
.btns2 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 30px;	
	max-width:1920px;
	width:100%;
	margin:0 auto;
	padding:40px;
}
.btns2 > a{
	display: block;
	background-color: crimson;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}
.btns2 > a > div{
	position: absolute;
	bottom:0;
	width:100%;
	background-color: #19191977;
	color:#e6e6e6;
	font-weight: 600;
	font-size:24px;
	padding:24px 30px;
}

.btns3{
	height:500px;
	background-color: #3c4046;
	display: grid;
	grid-template-columns: 1fr 1fr;
	

}
.btns3 .inBox{
	position: relative;
}
.btns3 .inBox > div{
	top:50%;
	width:100%;
	position: absolute;
	transform: translateY(-50%);
}
.btns3 div{
	display: block;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
}
.btns3 div h3{
	font-size:46px;
	font-weight: 800;
	color:#e6e6e6;
	text-align: center;
	line-height: 46px;
}
.btns3 div {
	text-align: center;
	color:#e6e6e6;
	padding:1em 0;
}

.btns3 div > a{
    border: 1px solid #e6e6e6;
    color: #e6e6e6;
    font-size: 13px;
    padding: 7px 25px;
    border-radius: 30px;
    margin-top: 20px;
    display: inline-block;
}
.btns3 div > a:hover{
    border: 1px solid #e6e6e6;
    color: #191919;
	background-color: #e6e6e6;;

}

footer{
	font-size: 14px;
	background-color: #111;
	color:#e6e6e6;
	height:250px;
	overflow: hidden;
}

footer > div{
	width:100%;
	max-width:1440px;
	margin:0 auto;
	padding:30px;
	font-weight: 300;
	color:#888;
	line-height: 175%;
	padding:40px 0;
}
.ftLogo img{
	height:30px;
	width:auto;
	opacity: .5;
	margin-bottom:10px;
}

footer > .link{
	width:100%;
	max-width: 100%;
	padding:0;
	border-bottom:1px solid #ffffff22;
}

footer > .link > div{
	width:100%;
	max-width:1440px;
	margin:0 auto;
	height:72px;
}
footer > .link > div > div{
	float:left;
}
footer > .link > div > div:last-child{
	float:right;
}
footer > .link > div > div:last-child span{
	margin-right:40px;
}
footer > .link > div > div > a{
	line-height: 72px;
	color:#aaa;
	font-weight:400;
	font-size:15px;
	display: inline-block;
	margin-right: 40px;
}

.subcont{
	width:100%;
	max-width:1440px;
	padding:20px;
	margin:0 auto;
}

.subcont h3{
	font-size:40px;
	font-weight: 800;
	color:#3c4046;
}
.subcont h4{
	font-size:32px;
	font-weight: 800;
	margin-top:80px;
	color:#3c4046;
}
.subcont .h3sub,
.subcont p{
	font-size:24px;
	font-weight: 400;
	line-height: 1.65em;
	
	color:#3c4046;
}
.aboutus-dis{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 130px;
}
.aboutusImg{
	height:calc(100% - 100px);
	margin-top:80px;
	border-radius: 20px;
}

.aboutus-dis img{
	width:100%;
	margin-top:60px;
}

.signatureColor {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top:100px;
	grid-gap: 50px;
}

.signatureColor > div > div:first-child{
	height: 20px;
}

.history{
	
	position: relative;
}
.history > div {
	width:50%;
	float:left;
	position: relative;
}
.history > div > h5{
	font-size:26px;
	padding:40px 0 20px
}
.history > div:nth-child(even){
	margin-top:100px;
	padding-left:100px;
}
.history > div:nth-child(odd){
	text-align:right;
	padding-right:100px;
}

.history::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    left: 50%;
    top: 0;
    background-color: #000;
}

.history > div:nth-child(odd) h5::after{
	content: "";
	width:80px;
	height:1px;
	background-color: #000;
	position: absolute;
	top:55px;
	left:calc(100% - 80px);
}

.history > div:nth-child(even) h5::after{
	content: "";
	width:80px;
	height:1px;
	background-color: #000;
	position: absolute;
	top:55px;
	right:calc(100% - 80px);
}

.coreValueImg{
	width:50%;
	height: auto;
	display: block;
	margin:50px auto 0;

}
.coreValueCont > div > h5{
	font-size:32px;
	font-weight: 800;
	margin-top:1.5em;
	margin-bottom:0.5em;
}
.coreValueCont > div > div{
	font-size:24px;
	font-weight: 300;
	line-height: 174%;
}

.map{
	position: relative;
	z-index: 0;
}
.map::after{
	content:"";
	position: absolute;
	background-color: #00000000;
	width:calc(100% - 40px);
	height:calc(100% - 32px);
	left:0;
	top:0;
	z-index: 1;
}

.mapInfoBox{
	background: linear-gradient( to right, #655DC6,#3A8DDE, #AFE2E3 );
	color:#fff;
	text-align: center;
	font-size:24px;
	line-height: 1.6em;
	padding:50px 0;
	border-radius: 10px;
	margin-top:-125px;
	position: relative;
	z-index: 1;
	box-shadow: 15px 15px 25px 0 #0d477f57;
}

.mapInfoBox > div:nth-child(2){
	font-size:20px;
}
.mapInfoBox > div:nth-child(2) > span{
	color:lime
}
.mapInfoBox > div a{
	display: inline-block;
	font-size:16px;
	border:1px solid #fff;
	color:#fff;
	padding:4px 30px;
	margin-top:30px;
	border-radius: 30px;;
}
.mapInfoBox > div a img{
	height: 20px;
    width: 20px;
    background-color: #fff;
    vertical-align: -4px;
    border-radius: 31.4%;
    margin-right: 10px;
}
.businessTxt span{
    font-size: 20px;
    color: #aaa;
    margin-top: 8px;
    display: block;
}
.businessTxt p{
margin-top:10px;
}

.bannerList{
	display: grid;
	grid-gap: 15px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	width:100%;
	margin-top:50px;
}
.bannerList a{
	display: block;
	padding:15px;
	border:15px solid #eee;
}
.bannerList img{
	width:100%;
	display: block;
}
.bannerH3{
	margin-top:100px;
}

.mo-menu{
    color:#fff;
	display: block;
	position: absolute;
    right: 50px;
    top: 50%;
	transform: translateY(-50%);
	font-size:28px;
	padding:5px;
}

.mo-menu-wrap{
	display: block;
	position: fixed;
	background-color: #fff;
	width:100vw;
	height:100vh;
	left:0;
	top:0;
	opacity: 1;
	z-index: 10000;
	display: none;
	overflow: auto;
}

.mo-menu-list{
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin:30px ;
	border-bottom:1px solid rgba(0 0 0 / .07);
	padding-bottom: 30px;
}
.mo-menu-list a{
	display: block;
}
.mo-menu-list > a {
	font-weight: 800;
	font-size:24px;
	color:#333;
}

.mo-menu-list > ul > li > a{
	font-size:20px;
	color:#333;
	padding:10px 0;
	display: block;

}

.mo-menu-wrap .mo-menu{
	position: static;
	transform: none;
	padding:20px;
	font-size:32px;
}
.mo-menu-wrap .mo-close i,
.mo-menu-wrap .mo-close{

	color:#333;
}
.mo-menu-wrap > div:first-child{
	text-align:right;
	padding:5px 10px;
}
.mo-menu-wrap > div:last-child{
	width:100%;
	max-width: 1000px;
	margin:0 auto;
}