/* 공통 */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&display=swap&subset=korean');
* { font-family: 'Nanum Gothic', sans-serif !important; box-sizing: border-box; }
img { vertical-align: middle !important }
/* header */
header > div:nth-of-type(1) { display: flex; justify-content: flex-end; align-items: center; padding: 10px 20px; border-bottom: 1px solid #ddd; }
header > div:nth-of-type(1) > p { width: 130px; text-align: right; }
header > div:nth-of-type(1) > p, header > div:nth-of-type(1) > p > a { color: #999999; font-size: 16px; }
header > div:nth-of-type(2) { padding: 20px; }
header > div > ul { display: flex; justify-content: space-between; align-items: center; }
header > div > ul > li { display: flex; justify-content: space-between; align-items: center; }
header > div > ul > li > #burgur { margin-left: 10px;}
#bg_bk { display: none; background: rgba(0,0,0,0.5); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10; }
#mobile_gnb { width: 220px; height: 100%; position: fixed; top: 0; right: -220px; background: #333; z-index: 50; }
#mobile_gnb > dl > dt { padding: 15px 20px; font-size: 27px; letter-spacing: -1px; color: #ffffff; }
#mobile_gnb > dl > dd { padding: 15px 20px; border-bottom: 1px solid #555555; }
#mobile_gnb > dl > dd > a { font-size: 20px; letter-spacing: -1px; color: #999999; }
#mobile_gnb > dl > dd > ul { margin: 15px 0 0; display: none; }
#mobile_gnb > dl > dd > ul > li { line-height: 33px; }
#mobile_gnb > dl > dd > ul > li > a { font-size: 17px; color: #999999; }
#close_gnb { width: 180px; height: 40px; line-height: 40px; margin: 20px auto; background: #666666; color: #ffffff; font-size: 15px; display: block; text-align: center; }
/* sub head */
.sub_head > div:nth-of-type(1) { display: flex; justify-content: center; align-items: center; width: 100%; height: 150px; background: url('../img/m/m_common.jpg'); background-position: center; background-size: cover; }
.sub_head > div:nth-of-type(2) { border-bottom: 1px solid #ddd; }
.sub_head > div:nth-of-type(2) > ul { display: flex; justify-content: space-between; }
.sub_head > div:nth-of-type(2) > ul > li { position: relative; width: 50%; padding: 17px; }
.sub_head > div:nth-of-type(2) > ul > li:nth-of-type(1) { border-right: 1px solid #ddd; }
.sub_head > div:nth-of-type(2) > ul > li > p { font-size: 17px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.sub_head > div:nth-of-type(2) > ul > li > ol { display: none; width: 100%; z-index: 9; position: absolute; top: 54px; left: 0; background: #ffffff; padding: 10px 17px; border: 1px solid #ddd;  }
.sub_head > div:nth-of-type(2) > ul > li > ol > li { line-height: 30px }
.sub_head > div:nth-of-type(2) > ul > li > ol > li > a { font-size: 15px; }
.sub_head > div:nth-of-type(3) { display: flex; justify-content: center; align-items: center; width: 100%; height: 100px; }
.sub_head .main_title { font-size: 33px; font-weight: bold; letter-spacing: -1px; color: #ffffff; }
.sub_head .sub_title { font-size: 28px; font-weight: bold; letter-spacing: -1px; }

@media (max-width: 400px){
	header > div > ul > li:nth-of-type(1) > a > img { width: 170px; }
	header > div > ul > li:nth-of-type(2) > a > img { width: 38px; }
	.sub_head .main_title { font-size: 28px; }
	.sub_head .sub_title { font-size: 25px; }
}

/* index */
.visual { width: 100%; height: 440px; }
.swiper-slide { background-position: center !important; background-size: cover !important; }
.m_slide01 { background: url('../img/m/main_slide_01.jpg'); }
.m_slide02 { background: url('../img/m/main_slide_02.jpg'); }
.m_slide03 { background: url('../img/m/main_slide_03.jpg'); }

.m_content { width: 100%; }
.m_content > ul > li { word-break: keep-all; padding: 45px 30px; border-bottom: 1px solid #dddddd; }
.m_content > ul > li > h4 { display: flex; justify-content: space-between; align-items: center; color: #253f94; font-size: 28px; font-weight: 800; }
.m_content > ul > li > h4 > a { color: #253f94; font-size: 32px; font-weight: 800; }
.m_content > ul > li > div { padding: 30px 3px; }
.m_content > ul > li > div > .lt li { font-size: 18px; font-weight: 700; color: #555555; }
.m_content > ul > li:nth-of-type(2) > h3 { width: 100%; max-width: 350px; word-break: keep-all; font-size: 18px; margin: 30px 0; color: #555555; line-height: 32px; }
.m_content > ul > li:nth-of-type(3) { position: relative; background: #f5f5f5; }
.m_content > ul > li:nth-of-type(3) > h5 { font-size: 24px; font-weight: 800; color: #4a4a4b; letter-spacing: -1px; line-height: 35px; margin: 22px 0; }
.m_content > ul > li:nth-of-type(3) > h5 > span { font-size: 30px; font-weight: 800; }
.m_content > ul > li:nth-of-type(3) > p { font-size: 20px; color: #777777; line-height: 28px; }
.m_content > ul > li:nth-of-type(3) > a { position: absolute; bottom: 60px; right: 30px;  }
@media (max-width: 430px){
	.m_content > ul > li:nth-of-type(3) > a { right: 15px; bottom: 35px; }
	.m_content > ul > li:nth-of-type(3) > a > img { width: 75px; }
	.m_content > ul > li:nth-of-type(3) > p { font-size: 16px; }
}
@media (max-width: 400px){
	.m_content > ul > li { padding: 40px 20px; }
	.m_content > ul > li:nth-of-type(2) > h3 { font-size: 17px; }
}

/* 회사소개 */
.m_greeting { width: 100%; padding: 0 20px 50px; }
.m_greeting > div > h4 { font-size: 30px; color: #253f94; }
.m_greeting > div > p { font-size: 17px; margin: 25px 0; line-height: 27px; word-break: keep-all; }
.m_greeting > div > h5 { font-size: 16px; font-weight: 500; letter-spacing: -1px; display: flex; justify-content: flex-end; align-items: center; }

/* 오시는길 */
.m_location { width: 100%; padding: 0 20px 50px; }
.m_location .root_daum_roughmap { width: 100% !important; padding: 0; border: none; border-bottom: 1px solid #ddd; }
.m_location > ul { border: 1px solid #ddd; margin-top: 20px; padding: 20px 10px; }
.m_location > ul > li { display: flex; justify-content: flex-start; line-height: 30px }
.m_location > ul > li > span { width: 20%; font-size: 18px; font-weight: bold; color: red; }
.m_location > ul > li > p { width: 80%; font-size: 17px; word-break: keep-all; }
@media (max-width: 400px){
	.m_location > ul > li > span { font-size: 15px; }
	.m_location > ul > li > p { font-size: 15px; }
}

/* footer */
footer { width: 100%; background: #3d3f43; padding: 30px 20px; }
footer > p { word-break: keep-all; text-align: center; color: #999999; font-size: 17px; letter-spacing: -.5px; line-height: 30px }
footer > p:nth-of-type(2) { width: 100%; max-width: 330px; margin: auto; }
@media (max-width: 400px){
	footer > p { font-size: 15px; line-height: 27px }
}