main { max-width: unset;}

.company_title { max-width: 1200px; padding: 3rem 0; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.company_title .left { display: flex; align-items: center; gap: 1.5rem;}
.company_title .left .img_wrap img { width: 80px;border: 1px solid #ddd; border-radius: .5rem}
.company_title .left .title_wrap h3 { font-size: 1.8rem; font-weight: bold; margin-bottom: 1rem;}
.company_title .left .title_wrap p { font-size: 1.4rem;}
.company_title .right button { border-radius: 10px; font-weight: 500;padding: .7rem 1rem;background:#f8fafb; font-size: 1.2rem;}

.content_list { max-width: 1200px; margin: 0 auto; display: flex; }
.content_list a,
.content_list p { padding: .8rem 1.2rem ; font-weight: 600; display: block; font-size: 1.2rem;} 
.content_list p.on { border-bottom: 2px solid #3571e3; color: #3571e3; }

.content_area { background: #f8fafb; padding: 4rem 0;}
.content_area .inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 30px;}
.content_area .inner h2 { font-size: 1.8rem; font-weight: 600; padding-left: 2.5rem;}
.content_area .inner .left { width: 75%;}
.content_area .inner .left .box { margin-top: 1.2rem;border-radius: 10px; border: solid 1px #ebebeb; padding: 3rem 4rem; background: #fff;}
.content_area .inner .left .box .top { display: flex; justify-content: space-around; text-align: center; border-bottom: 1px solid #ebebeb; padding-bottom: 2rem; margin-bottom: 2rem;}
.content_area .inner .left .box .top li .img_wrap { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;}
.content_area .inner .left .box .top li p:nth-child(2) { font-size: 1.1rem; color: #c2c2c2; font-weight: 500;}
.content_area .inner .left .box .top li p:nth-child(3) { font-size: 1.4rem; margin-top: .7rem; font-weight: 600;}
.content_area .inner .left .box .bottom { width: 80%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap ;}
.content_area .inner .left .box .bottom li { width: 48%; display: flex; padding: 1.2rem 0;}
.content_area .inner .left .box .bottom li p { font-size: 1.2rem;}
.content_area .inner .left .box .bottom li p:nth-child(1) { width: 30%; color: #c2c2c2;font-weight: 500;}
.content_area .inner .left .box .bottom li p:nth-child(2) { width: 60%; font-weight: 600;}

/* 취업공고 */
.content_area .inner .left .gonggo_wrap { }
.content_area .inner .left .gonggo_wrap > ul { display: flex; flex-direction: column; margin-top: 1.2rem;border-radius: 10px; border: solid 1px #ebebeb; padding: 0 1.5rem; background: #fff;}
.content_area .inner .left .gonggo_wrap > ul > li { border-bottom: 1px solid #ebebeb; padding: 1.5rem 0;}
.content_area .inner .left .gonggo_wrap > ul > li:nth-last-child(1) { border-bottom: none; }
.content_area .inner .left .gonggo_wrap > ul > li .top { display: flex; justify-content: space-between;align-items: flex-start; }
.content_area .inner .left .gonggo_wrap > ul > li .top .text .name_dist { font-weight: 500;}
.content_area .inner .left .gonggo_wrap > ul > li .top .text .title { font-weight: 700; font-size: 1.4rem; margin: .5rem 0; height: 1.4rem; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.content_area .inner .left .gonggo_wrap > ul > li .top .text .title:hover { text-decoration: underline;}
.content_area .inner .left .gonggo_wrap > ul > li .top > a { padding: .5rem 1rem; background: #f7f7f7; font-weight: 600; border-radius: 5px; border: 1px solid #e6e7e8; color: #306ee2;}
.content_area .inner .left .gonggo_wrap > ul > li .top > a:hover { background: #e2ecff;}
.content_area .inner .left .gonggo_wrap > ul > li .cate { color: #959595; }
.content_area .inner .left .gonggo_wrap > ul > li .spec { display: flex; gap: 1rem; margin: 1rem auto;}
.content_area .inner .left .gonggo_wrap > ul > li .spec li { padding: .4rem 1rem; background: #d1e2ff; border-radius: 30px;}
.content_area .inner .left .gonggo_wrap > ul > li .info { color: #8f8f8f;}
.content_area .inner .left .gonggo_wrap button { display: block; width: fit-content; margin: 0 auto; padding: .5rem 1rem; color: #929292; font-weight: 600; border: 1px solid #dedfe0; background: #fff; margin: 1.5rem auto ; border-radius: 30px;}

.content_area .inner .left .map_wrap { margin-top: 4rem; }
.content_area .inner .left .map_wrap > p { padding-left: 2.5rem; font-size: 1.2rem; margin: 1rem 0;font-weight: 500;}
.content_area .inner .left .map_wrap .map_box { background: #fff; border-radius: 10px; border: solid 1px #ebebeb;}
.content_area .inner .left .map_wrap .map_box .info { padding: 1rem; text-align: center; }
.content_area .inner .left .map_wrap .map_box .info p { color:#c2c2c2;}

.content_area .inner .right { width: 300px; }
.content_area .inner .right > a img:nth-child(2) { display: none;}
.content_area .inner .right .box { margin-top: 2.5rem; padding: 2.5rem;  background: #fff;border: solid 1px #ebebeb; border-radius: 10px;}
.content_area .inner .right .box h2 { padding-left: unset; margin-bottom: 2rem;}
.content_area .inner .right .box ul li { margin-bottom: 1.3rem;}
.content_area .inner .right .box ul li a { display: flex; gap: 1.5rem; align-items: center;}
.content_area .inner .right .box ul li a img {border: 1px solid #ddd; border-radius: .5rem}
.content_area .inner .right .box ul li a .text_wrap h3 { font-size: 1.2rem; font-weight: 500;margin-bottom: 0.5rem;}
.content_area .inner .right .box ul li a .text_wrap p { color: #c2c2c2;}

.content_area .inner .left .graph_wrap .label_wrap { display: flex; justify-content: right; gap: 1rem; margin: 0 0 3rem;}
.content_area .inner .left .graph_wrap .label_wrap li { display: flex; align-items: center; gap: 0.5rem;}
.content_area .inner .left .graph_wrap .label_wrap li:nth-child(1) div { width: 12px; height: 12px; border-radius: 50%; background: #3571e3;}
.content_area .inner .left .graph_wrap .label_wrap li:nth-child(2) div { width: 25px; height: 10px; background: #3571e3;}
.content_area .inner .left .graph_wrap .label_wrap li:nth-child(3) div { width: 25px; height: 10px; background: #ecf3ff;}

.content_area .inner .left .graph_wrap ul.num_ul { margin-top: 4rem; display: flex ; justify-content: space-around; text-align: center;}
.content_area .inner .left .graph_wrap ul.num_ul li p:nth-child(1) { font-size: 1.2rem;font-weight: 500;}
.content_area .inner .left .graph_wrap ul.num_ul li p:nth-child(2) { font-size: 1.8rem; margin-top: .6rem; font-weight: bold;}
.content_area .inner .left .graph_wrap ul.num_ul li:nth-child(2) p:nth-child(2) { color: #3571e3;}


.content_area .inner .left .recom_wrap { margin-top: 3.5rem;}
.content_area .inner .left .recom_wrap h2 span { color: #3571e3; font-size: 1.8rem; font-weight: 600; }
.content_area .inner .left .recom_wrap ul { display: flex; background: #fff;border: solid 1px #ebebeb; border-radius: 10px;justify-content: space-around; padding: 2.5rem 0; margin-top: 1.2rem;}
.content_area .inner .left .recom_wrap ul li { width: 33.3333%; border-right: 1px solid #ebebeb; padding: 0 2.5rem;}
.content_area .inner .left .recom_wrap ul li:nth-last-child(1) { border-right: unset;}
.content_area .inner .left .recom_wrap ul li a { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;}
.content_area .inner .left .recom_wrap ul li a .top { min-height: 4.5rem;}
.content_area .inner .left .recom_wrap ul li a h3 { font-weight: 600; font-size: 1.4rem; margin-bottom: .3rem;width: 100%; text-overflow: ellipsis;overflow: hidden; white-space: nowrap; }
.content_area .inner .left .recom_wrap ul li a > p { font-size: 1.1rem; font-weight: 500; margin-bottom: 1.5rem; color:#666;}
.content_area .inner .left .recom_wrap ul li a .aver { display: flex; justify-content: space-between; }
.content_area .inner .left .recom_wrap ul li a .aver p { font-size: 1.2rem; font-weight: 500; }
.content_area .inner .left .recom_wrap ul li a .aver p span { font-weight: 500;font-size: 1.2rem; color: #0061ff;}

.content_area .inner .left .aver_wrap .box { display: flex; align-items: center; padding: 3rem 0; }
.content_area .inner .left .aver_wrap .box li { width: 50%; padding: 0 4rem; text-align: center;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) { border-right: 1px solid #ebebeb;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > p:nth-child(1) { font-size: 1.2rem; margin-bottom: 1rem; font-weight: 500;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > p:nth-child(2) { font-size: 1.2rem; font-weight: 500;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > p:nth-child(2) span { font-size: 3rem; font-weight: bold; color: #3571e3;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > .fl { width: 80%; margin: 2.5rem auto 0;display: flex; justify-content: space-between; }
.content_area .inner .left .aver_wrap .box li:nth-child(1) > .fl p { font-size: 1.2rem; font-weight: 500;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > .fl p span { font-size: 1.2rem; font-weight: 500;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > .fl p:nth-child(2) { color: #666;}
.content_area .inner .left .aver_wrap .box li:nth-child(2) > p { font-size: 1.2rem; font-weight: 500; margin-bottom: 1.5rem;}
.content_area .inner .left .aver_wrap .box li:nth-child(2) > div { display: flex; justify-content: center; align-items: center; font-size: 1.8rem; font-weight: bold; gap: 1rem;}
.content_area .inner .left .aver_wrap .box li:nth-child(2) > div.up span { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid red;}
.content_area .inner .left .aver_wrap .box li:nth-child(2) > div.down span { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid blue;}

.content_area .inner .left .estim_wrap { margin-top: 3.5rem;}
.content_area .inner .left .estim_wrap .label_wrap { margin-bottom: 3rem;}
.content_area .inner .left .estim_wrap .label_wrap li { justify-content: right; display: flex; align-items: center; gap: 0.5rem;}
.content_area .inner .left .estim_wrap .label_wrap li:nth-child(1) div { width: 12px; height: 12px; border-radius: 50%; background: #3571e3;}

.content_area .inner .left .rank_wrap { margin-top:3.5rem;}
.content_area .inner .left .rank_wrap h2 span { font-size: 1.8rem; font-weight: 600; color: #3571e3;}
.content_area .inner .left .rank_wrap .box { display: flex; flex-wrap: wrap; padding-right: 4rem;}
.content_area .inner .left .rank_wrap .box li {width: 50%; }
.content_area .inner .left .rank_wrap .box li a { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid #ebebeb;}
.content_area .inner .left .rank_wrap .box li:nth-child(even) a { padding-right: 0;}
.content_area .inner .left .rank_wrap .box li:nth-last-child(1) a,
.content_area .inner .left .rank_wrap .box li:nth-last-child(2) a { border-bottom: none;}
.content_area .inner .left .rank_wrap .box li a .fl { display: flex; align-items: center; gap: 1rem;}
.content_area .inner .left .rank_wrap .box li a .fl .rank { background: #d1e2ff; padding: .3rem .5rem;}
.content_area .inner .left .rank_wrap .box li a .fl .name { width: 85%;}
.content_area .inner .left .rank_wrap .box li a .fl .name h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: .3rem;}
.content_area .inner .left .rank_wrap .box li a .fl .name p { color: #666; height: 1rem;text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.content_area .inner .left .rank_wrap .box li a > p span { color:#3571e3; font-size: 1.2rem; font-weight: 500;}


.contact_modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none;}
.contact_modal.on { display: block;}
.contact_modal.on:before { content: ''; position: absolute; width: 100%; height: 100%; background: #31313173;}
.contact_modal.on .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 1.5rem 1.5rem 3rem; border-radius: 1rem; text-align: center;}
.contact_modal.on .inner button { display: block; margin: 0 0 1.5rem auto;}
.contact_modal.on .inner p { font-size: 1.4rem; line-height: 1.3;}
.contact_modal.on .inner p span { font-size: 1.4rem; font-weight: bold;}

/* 임시css */
.content_area .inner .left .aver_wrap .box { justify-content: center;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) { border:none;}


@media screen and (max-width: 1200px) {

.content_area .inner .left .rank_wrap .box {padding: 3rem 1.5rem;}
.content_area .inner .left .rank_wrap .box li a { gap: .5rem;}
.content_area .inner .left .rank_wrap .box li a .fl { gap: .5rem;}
}
@media screen and (max-width: 767px) {
.company_title { flex-wrap: wrap; padding:  1.5rem;}
.company_title .left { width: 100%;}
.company_title .left .img_wrap img { width: 60px;}
.company_title .right { margin-top: 1.5rem;}
.content_list { padding: 0 1.5rem;}
.content_area { padding: 4rem 1.5rem;}
.content_area .inner { flex-wrap: wrap;}
.content_area .inner h2 { padding-left: 1rem; font-size: 1.6rem;}
.content_area .inner .left { width: 100%;}
.content_area .inner .left .box { padding: 3rem 1.5rem;}
.content_area .inner .left .box .bottom { flex-direction: column; width: 100%; }
.content_area .inner .left .box .bottom li { width: 100%; padding: .5rem 0;}

.content_area .inner .left .gonggo_wrap > ul > li .top > a { font-size: 1.2rem;}
.content_area .inner .left .gonggo_wrap > ul > li .cate { font-size: 1.2rem;}
.content_area .inner .left .gonggo_wrap > ul > li .info { font-size: 1.2rem;}

.content_area .inner .left .map_wrap > p { padding-left: 1rem;}

.content_area .inner .left .aver_wrap .box { padding: 2rem 0;}
.content_area .inner .left .aver_wrap .box li { justify-content: space-between; align-items: center; padding: 0; width: 80%; display: flex; flex-wrap: wrap;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > p:nth-child(1) { margin-bottom: unset; font-weight: 600;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > p:nth-child(2) span { font-size: 2rem;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > .fl { width: 100%;margin: 1rem 0 0;}
.content_area .inner .left .aver_wrap .box li:nth-child(1) > .fl p { font-weight: 600; }

.content_area .inner .left .recom_wrap h2 span { font-size: 1.6rem;}
.content_area .inner .left .rank_wrap h2 span { font-size: 1.6rem;}

.content_area .inner .left .recom_wrap ul { flex-direction: column; padding: 2.5rem 1.5rem;}
.content_area .inner .left .recom_wrap ul li { padding: 0;width: 100%; margin-bottom: 1.5rem; padding-bottom: 1.5rem;border-right: none; border-bottom: 1px solid #ebebeb; }
.content_area .inner .left .recom_wrap ul li:nth-last-child(1) { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.content_area .inner .left .recom_wrap ul li a { flex-direction: unset; align-items: center; padding: 0 1rem;}
.content_area .inner .left .recom_wrap ul li a .aver p:nth-child(1) { display: none;} 
.content_area .inner .left .recom_wrap ul li a .top { min-height: unset;}

.content_area .inner .left .rank_wrap .box { flex-direction: column;padding-right: 1.5rem;}
.content_area .inner .left .rank_wrap .box li { width: 100%;}
.content_area .inner .left .rank_wrap .box li:nth-child(n+5) { display: none;}
.content_area .inner .left .rank_wrap .box li a { padding-right: 0;}
.content_area .inner .left .rank_wrap .box li:nth-child(1) a { padding-top: 0;}
.content_area .inner .left .rank_wrap .box li:nth-child(4) a { border-bottom: none; padding-bottom: 0;}

.content_area .inner .right { width: 100%; padding-top: unset;}
.content_area .inner .right > a img:nth-child(1) { display: none;}
.content_area .inner .right > a img:nth-child(2) { display: block; width: 100%;}
.content_area .inner .right .box { background: unset; padding: 0; border: none;}
.content_area .inner .right .box ul { background: #fff; padding: 1.5rem; border-radius: 10px;border: solid 1px #ebebeb;}
.content_area .inner .right .box ul li:nth-last-child(1) { margin-bottom: unset;}

}