@charset "utf-8";

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * sub_visual *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.sub_visual{height:500px; background:#aaa;  background-size:cover; background-repeat:no-repeat; background-position:center; margin-top: 90px;}
.sub_visual .inner{display:table; height:100%; margin:0 auto;}
.sub_visual .text{display:table-cell; vertical-align:middle; text-align:center;}
.sub_visual .text h2{font-size:var(--fz-72); color:#fff; letter-spacing:0em; font-weight:700; line-height:1; margin:0;}
.sub_visual .text p{font-size:18px; color:#fff; letter-spacing:0em; font-weight:400; line-height:1.6; margin-top:20px;}

.sub_path{width:calc(100% - calc( calc(100% - 1400px) / 2)); box-sizing:border-box; display: flex; background-color: #fff; margin-left: auto; margin-top:-35px; border-radius: 10px 0 0 10px; box-shadow: 0px 4px 29px 0px rgba(34, 34, 34, 0.1); position: relative;}
.sub_path a.home{width:70px;display:flex; text-align:center; box-sizing:border-box; aspect-ratio: 1/1; align-items: center; justify-content: center; position: relative; z-index: 1; border-right: 1px solid #e5e5e5;}
.sub_path a.home span{display:none;}
.sub_path [class^='depth']{width:calc(50% - 30px); max-width:326px; position:relative; box-sizing:border-box;  border-right: 1px solid #e5e5e5;}
.sub_path [class^='depth'] > p{cursor:pointer; height:70px; line-height:70px; font-size:15px; color:var(--gray); letter-spacing:-0.02em; font-weight:600; padding:0 50px 0 30px; position:relative; overflow:hidden; white-space: nowrap;}
.sub_path [class^='depth'] > p:before{content:''; position:absolute; top:50%; right:25px; transform: translateY(-50%); display:block; width:14px; height:8px; background:url('/img/sub_arrow01_new.png') no-repeat center center / contain; transition: .3s;}
.sub_path [class^='depth'] > p.on:before{transform: translateY(-50%) rotate(180deg);}
.sub_path [class^='depth'] ul{display:none; background:#fff; position:absolute; left:0; top:100%; z-index:49; width:100%; border:1px solid #e5e5e5; box-sizing:border-box;}
.sub_path [class^='depth'] ul li.hide {display: none;}
.sub_path [class^='depth'] ul li a{display:block; padding:20px 25px; font-size:15px; color:var(--gray); letter-spacing:-0.02em; font-weight:600;}
.sub_path [class^='depth'] ul li + li a{border-top: 1px solid #e5e5e5;}

.sub_path [class^='depth'] ul li a:hover{color: var(--main); background-color: #f9f9f9;}

@media all and (max-width:1400px){
    .sub_path{width: 96.75%;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

ABOUT US > Management Team

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.team .con01{background: url(/img/team_con01_bg01.png)no-repeat top -280px right -60px;}
.team .con01 .team_list{display: flex; gap: 100px; flex-wrap: wrap;}
.team .con01 .team_list > li{width: calc(33.333% - 66.666px); box-sizing: border-box;}
.team .con01 .team_list .top_box{position: relative;}
.team .con01 .team_list .img_box{text-align: center;}
.team .con01 .team_list .name_box{position: absolute; bottom: -20px; left: 0; background-color: #fff; padding: 15px 20px;}
.team .con01 .team_list .name_box p{font-size: var(--fz-28); color:#333333; font-weight: 600; letter-spacing: -0.02em;}

.team .con01 .team_list .bot_box{margin-top: 40px; padding: 0 20px;}
.team .con01 .team_list .eng_box{margin-bottom: 30px;}
.team .con01 .team_list .eng_box p{font-size: 16px; color:#555555; font-weight: 600; letter-spacing: -0.02em; line-height: 1.625em;}
.team .con01 .team_list .career_list{position: relative; padding-top: 30px;}
.team .con01 .team_list .career_list:before{position: absolute; content: ''; width: 80px; height: 2px; background-color: #c7d7f5; content: ''; top: 0; left: 0;}
.team .con01 .team_list .career_list li{font-size: 16px; color:var(--gray); letter-spacing: -0.02em; line-height: 1.625em;}

@media all and (max-width:1024px){
    .team .con01 .team_list{gap:80px 50px;}
    .team .con01 .team_list > li{width: calc(50% - 25px);}
}

@media all and (max-width:700px){
    .team .con01 .team_list{gap:80px;}
    .team .con01 .team_list > li{width: 100%;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

ABOUT US > Our story

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.story .con01{background: linear-gradient(180deg, rgba(255,255,255,1) 47%, rgba(249,249,249,1) 30%);}
.story .con01 .flex_row01 .inner{display: flex; align-items: center; gap: 70px;}
.story .con01 .flex_row01 .left_box{width: calc(50% - 70px);}
.story .con01 .flex_row01 .left_box .img_box{text-align: center;}
.story .con01 .flex_row01 .left_box .img_box img{border-radius: 20px; box-shadow: 10px 17px 40px 0px rgba(0, 0, 0, 0.1);}
.story .con01 .flex_row01 .right_box{width: 50%;}
.story .con01 .tit p{font-weight: 700; font-size: var(--fz-34); letter-spacing: -0.02em; line-height: 1.294em;}
.story .con01 .txt{margin-top: 100px;}
.story .con01 .txt p{font-size: 16px; color:var(--gray); letter-spacing: -0.02em; line-height: 1.625em;}
.story .con01 .txt p + p{margin-top: 30px;}

@media all and (max-width:1024px){
    .story .con01 .flex_row01 .inner{flex-wrap: wrap;}
    .story .con01 .flex_row01 .left_box,
    .story .con01 .flex_row01 .right_box{width: 100%;}
    .story .con01 .txt{margin-top: 50px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

ABOUT US > Our Commitment

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* 구버전 삭제 20230811 백업 참고 */
.commit .list_wrap {position: relative;}
.commit .list_wrap ul {display: flex; flex-wrap: wrap; gap: 15px;}
.commit .list_wrap ul li {width: calc(50% - 8px); border-radius: 20px; background-color: #fff; box-shadow: 10px 17px 40px 0px rgba(0, 0, 0, 0.1); padding: 100px 80px; box-sizing: border-box;}
.commit .list_wrap ul li.gray {background-color: #f9f9f9;}
.commit .list_wrap ul li:nth-child(2n){text-align: right;}
.commit .list_wrap ul li h5 {font-weight: 700; font-size: var(--fz-24); letter-spacing: -0.02em; color: #444; margin-bottom: 30px;}
.commit .list_wrap ul li p {font-size: 16px; line-height: 1.625em; letter-spacing: -0.02em; color: var(--gray);}
.commit .list_wrap .circle {display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: fit-content; aspect-ratio: 1/1; border-radius: 50%; border: 7px solid var(--main); background-color: #fff; padding: 70px; box-shadow: 10px 17px 40px 17px rgba(0, 0, 0, 0.1) inset;}
.commit .list_wrap .circle h3 {font-family: 'Montserrat'; font-weight: 700; font-size: var(--fz-42); line-height: 1.23em; letter-spacing: -0.02em; color: #222; text-align: center;}
.commit .list_wrap .circle h3::first-letter {color: var(--main);}

@media all and (max-width: 1024px) {
    .commit .list_wrap ul li {padding: 100px 40px;}
    .commit .list_wrap .circle {padding: 35px;}
}

@media all and (max-width: 767px) {
    .commit .list_wrap ul li {padding: 100px 20px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

    product(구버전)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.prod .prod_list ul{display: flex; flex-wrap: wrap; gap: 60px;}
.prod .prod_list ul li{width: calc(33.333% - 40px); box-sizing: border-box; border-radius: 20px; border: 1px solid #dcdcdc;}
.prod .prod_list ul li a{ position: relative; transition: .3s; display: block;}
.prod .prod_list ul li a:before{content: ''; width: 100%; height: 100%; border-radius: 20px; border: 2px solid transparent; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; transition: .3s; box-sizing: border-box; z-index: 1;}
.prod .prod_list ul li:hover{ box-shadow: 10px 17px 40px 0px rgba(0, 0, 0, 0.1);}
.prod .prod_list ul li:hover a:before{border-color: var(--main);}

.prod .prod_list ul li .img_box {aspect-ratio: 1/1;}
.prod .prod_list ul li .img_box img{border-radius: 20px; max-width: unset; height: 100%; width: 100%; object-fit: cover; object-position: center center;}
.prod .prod_list ul li .img_box img.m {display: none;}
.prod .prod_list ul li .txt_box{position: absolute; bottom: 0; left: 0; width: 100%; min-height: 150px; background-color: #ffffff; border-radius: 0 0 20px 20px; padding: 30px; box-sizing: border-box;}

.prod .prod_list ul li .txt_box .tit p{font-weight: 700; font-size: var(--fz-20); color:#444444; letter-spacing: -0.02em; line-height: 1.5em;}
.prod .prod_list ul li .txt_box .txt p{ font-size: 16px; color:var(--gray); letter-spacing: -0.02em; line-height: 1.625em; margin-top: 5px;}
.prod .prod_list ul li .txt_box .date p{font-weight: 500; font-size: 15px; color:#888888; letter-spacing: -0.02em; line-height: 1.666em; text-align: right; margin-top: 15px;}

.prod .prod_list ul li .txt_box p{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.prod .prod_list .programPage{margin-top: 80px;}
.prod .prod_list .programPage a{border-radius: 50%;}
.prod .prod_list .programPage a.active{background-color: var(--main); color:#fff;}
.prod .prod_list .programPage a.page_btn{display: inline-flex; align-items: center; justify-content: center; margin: 0 20px;}

@media all and (max-width:1024px){
    .prod .prod_list ul{gap: 30px;}
    .prod .prod_list ul li{width: calc(50% - 15px);}
}
@media all and (max-width:700px){
    .prod .prod_list ul{gap: 50px;}
    .prod .prod_list ul li{width: 100%;}
    .prod .prod_list ul li .img_box img.pc {display: none;}
    .prod .prod_list ul li .img_box img.m {display: block;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

    product(신버전)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.prod_list_con .heading {display: flex; gap: 40px; justify-content: space-between;}
.prod_list_con .sub_main_tit {text-align: left;}

/* swiper */
.prod_list_con .swiper .swiper-slide {cursor: pointer; width: calc(25% - 53px); margin-right: 70px; color: #fff;}
.prod_list_con .swiper-initialized .swiper-slide {margin-right: 0;}
.prod_list_con .swiper-btns {display: flex; gap: 10px;}
.prod_list_con .swiper-btns a {display: block; width: 70px; aspect-ratio: 1/1; border-radius: 20px; background-color: #b4caf2; background-position: center center; background-repeat: no-repeat; transition: .3s;}
.prod_list_con .swiper-btns a:hover{background-color: var(--main);}
.prod_list_con .swiper-btns .prev{background-image: url(/img/main_con03_prev.png);}
.prod_list_con .swiper-btns .next{background-image: url(/img/main_con03_next.png);}

.prod_list_con .swiper-slide:hover .img_box {border-color: var(--main);}
.prod_list_con .img_box {width: 100%; aspect-ratio: 1/1; border: 2px solid transparent; box-sizing: border-box; overflow: hidden; border-radius: 30px; position: relative; background-color: rgba(0, 0, 0, 0.1); transition: 0.25s;}
.prod_list_con .img_box img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: fit-content;}
.prod_list_con .txt_box {text-align: center; margin-top: 15px;}
.prod_list_con .txt_box h6 {font-weight: 700; font-size: var(--fz-20); color:#444; letter-spacing: -0.02em; line-height: 1.5em;}

@media all and (max-width: 1200px) {
    .prod_list_con .swiper .swiper-slide {width: calc(33.3333% - 34px);}
}

@media all and (max-width: 767px) {
    .prod_list_con .swiper .swiper-slide {width: calc(50% - 15px);}
    .prod_list_con .heading{flex-direction: column; justify-content: center;}
    .prod_list_con .swiper-btns{justify-content: center;}
    .prod_list_con .heading .pc_only{display: none;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

CONTECT US > Contact info

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.info .map_box iframe{width: 100%; height: 480px;}
.info .map_box iframe .gm-inset-light{display: none !important;}
.info .txt_box{width: 100%; border-radius: 0 0 0 60px; background-color: var(--main); margin-left: auto; box-shadow: 10px 17px 40px 0px rgba(0, 0, 0, 0.2); margin-top: -84px; position: relative;}
.info .txt_box ul{display: flex; justify-content: center; gap: 10%; padding: 35px 0; }
.info .txt_box ul li{display: flex; gap: 20px;}
.info .txt_box ul li .icon_box{border-radius: 50%; width: 67px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background-color: #fff;}
.info .txt_box ul  li .tit p{font-weight: 700; color:#ffffff; font-size: var(--fz-20); letter-spacing: -0.02em; line-height: 1.4em; margin-top: 5px;}
.info .txt_box ul  li .txt p{color:#ffffff; font-size: var(--fz-18); letter-spacing: -0.02em; line-height: 1.555em; margin-top: 10px;}

@media all and (max-width:1024px){
    .info .txt_box{border-radius: 0 0 0 100px; margin-top: -110px;}
    .info .txt_box ul{flex-direction: column; align-items: center; gap: 10px;}
    .info .txt_box ul li{width: 300px; align-items: center;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

CAREERS > Core Values

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.value .con01 .value_list{display: flex; flex-direction: column; gap: 40px;}
.value .con01 .value_list li{display: flex; align-items: center; gap: 20px;}
.value .con01 .value_list li .img_box{width: calc(50% - 20px); box-sizing: border-box;}
.value .con01 .value_list li .img_box img{border-radius: 20px 20px 0 20px; box-shadow: 10px 17px 40px 0px rgba(0, 0, 0, 0.1); max-width: none;}
.value .con01 .value_list li .txt_box{width: 50%; box-sizing: border-box; padding: 0 100px;}
.value .con01 .value_list li .txt_box .tit p{font-family: 'Montserrat'; font-weight: 700; font-size: var(--fz-34); letter-spacing: -0.02em; line-height: 1.294em; color: var(--main); position: relative;}
.value .con01 .value_list li .txt_box .tit p:before{content: ''; position: absolute; left: -15px; top: -20px; width: 8px; border-radius: 50%; box-sizing: border-box; aspect-ratio: 1/1; background-color: var(--main);}

.value .con01 .value_list li .txt_box .txt{margin-top: 20px;}
.value .con01 .value_list li .txt_box .txt p{font-weight: 500; color:var(--gray); font-size: var(--fz-18); letter-spacing: -0.02em; line-height: 1.555em;}
.value .con01 .value_list li .txt_box .txt p + p{margin-top: 20px;}

.value .con01 .value_list li:nth-child(even){flex-direction: row-reverse;}
.value .con01 .value_list li:nth-child(even) .img_box img{border-radius: 20px 20px 20px 0;}
.value .con01 .value_list li:nth-child(even) .txt_box p{text-align: right;}
.value .con01 .value_list li:nth-child(even) .txt_box .tit p:before{left: auto; right: -15px;}

@media all and (max-width:1024px){
    .value .con01 .value_list li .txt_box{padding: 0 30px;}
}

@media all and (max-width:767px){
    .value .con01 .value_list{gap: 80px;}
    .value .con01 .value_list li,
    .value .con01 .value_list li:nth-child(even){flex-direction: column-reverse;}
    .value .con01 .value_list li .img_box,
    .value .con01 .value_list li .txt_box{width: 100%;}
    .value .con01 .value_list li:nth-child(even) .txt_box p{text-align: left;}
    .value .con01 .value_list li:nth-child(even) .txt_box .tit p:before{right: auto; left: -15px;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

job common

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.job .sub_con_tit {text-align: center;}
.job .heading .sub_main_tit {margin-bottom: 50px;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

job con01
* 기존 작업내용 삭제 20230810 백업본 참고

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.job .con01 table {width: 100%; font-weight: 600; font-size: var(--fz-18); line-height: 1.55em; letter-spacing: -0.02em;}
.job .con01 table tr * + * {border-left: 1px solid #d9e0ef;}
.job .con01 table tr * {padding: 5px 10px; box-sizing: border-box;}
.job .con01 thead th {background-color: var(--main); color: #fff; height: 50px;;}
.job .con01 tbody tr {height: 60px; border-bottom: 1px solid #d9e0ef;}
.job .con01 tbody th {color: #444;}
.job .con01 tbody td {font-weight: 400; color: var(--gray); text-align: center;}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

job con02

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.job .con02 .box {display: flex; background: url(/img/job_con02_bg.jpg) no-repeat center center / cover; border-radius: 20px; padding: 60px 100px; box-sizing: border-box; gap: 30px; justify-content: center; align-items: center;}
.job .con02 .txt_box p {font-weight: 500; font-size: var(--fz-18); line-height: 1.55em; letter-spacing: -0.02em; color: var(--gray);}
.job .con02 .txt_box b {font-weight: 700; font-size: var(--fz-22); color: #444;}
.job .con02 .btn_box {display: flex; gap: 10px;}

@media all and (max-width: 1024px) {
    .job .con02 .box {flex-wrap: wrap; text-align: center;}
    .job .con02 .txt_box {width: 100%;}
    .job .con02 .btn_box {width: 100%; justify-content: center;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

job con03

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.job .con03 ul {display: flex; gap: 25px;}
.job .con03 ul li {width: calc(20% - 20px); background-color: #fff; border-radius: 20px; border: 1px solid #dcdcdc; box-sizing: border-box; text-align: center; padding: 40px; box-sizing: border-box; position: relative;}
.job .con03 ul li .arrow {position: absolute; top: 50%; right: -13px; transform: translate(50%, -50%); width: 60px; height: 60px; border-radius: 50%; background-color: #e6ecf6; z-index: 1; display: flex; align-items: center; justify-content: center;}
.job .con03 ul li .arrow::before {content: url(/img/arrow_10x16.png);}
.job .con03 ul li .icon_box {width: 100%; max-width: 120px; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--main); margin: auto; position: relative; padding: 20px; box-sizing: border-box;}
.job .con03 ul li .icon_box img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: fit-content;}
.job .con03 ul li .txt_box {margin-top: 10px;}
.job .con03 ul li .txt_box h6 {font-weight: 700; font-size: var(--fz-22); line-height: 1.27em; color: #444;}

@media all and (max-width:1024px){
    .job .con03 ul {flex-wrap: wrap; justify-content: center;}
    .job .con03 ul li {width: calc(33.333% - 16.666px);}
}

@media all and (max-width: 767px) {
    .job .con03 ul li {width: 100%;}
    .job .con03 ul li .arrow {top: calc(100% + 5px); right: 50%; transform: translate(50%, -50%) rotate(90deg);}
}