/* 금양 sub - 2024.07.29 */

/* subtit */
.subtit h6{font-size: 50px; line-height: 1.2; font-family: 'SUIT'; font-weight: 700;}
.subtit > span{font-size: 22px; line-height: 1.2; color: var(--main-color); margin-bottom: 14px; display: inline-block;}
.subtit p{color: #666; font-size: 20px; line-height: 1.4; font-weight: 400; margin-top: 1.2em;}
.subtit{margin-bottom: 90px;}

/* .people2 .subtit, .people1 .subtit {background: url(../img/sub/title-bg.png)no-repeat; background-size: cover; background-position: bottom;} */


.rec {overflow-x:hidden;}
.comp1 .con {overflow-x:hidden;}


.flex{display: flex; }
.ac{align-items: center;}
.sb{justify-content: space-between;}
.fe{align-items: flex-end;}

label {cursor: pointer;}

/* company */
/* company - 계열사소개 */

.but button{padding:14px 14px;border:1px solid #eee; border-radius: 60px; color: #333;width: 180px; display: flex; justify-content: center; font-size: 16px; align-items: center;}
.but button span{transition-duration: 0.3s;width: 9px;position: relative; margin-left: 8px;display: block; height:20px; top:-1px}
.but button span::before{ content:'';display: block;;width: 100%;width:9px;height:9px;background: var(--main-color); border-radius: 2px;transition-duration: 0.3s;}
.but button span::after{ content:'';display: block;;width: 100%;width:9px;height:9px; background: #89898A; border-radius: 2px; margin-top: 2px;transition-duration: 0.3s;}
.but button:hover span{width: 20px;}
.but button:hover span::before, .but button:hover span::after{width: 100%;}

.comp_2 .comp_li ul li {cursor: pointer;}

.comp_li ul{display: flex; gap: 80px 30px; flex-wrap: wrap;}
.comp_li ul li{width: calc((100% - 90px) / 4); }
.comp_li .imgwrap{position: relative; width:100%; padding-bottom: 68%;}
.comp_li .imgwrap img{position: absolute; width: 100%; height:100%; left:50%; top:50%; transform: translate(-50%, -50%); object-fit: cover;}
.comp_li .txt > div{padding: 24px 0; height: 103px;}
.comp_li .txt h6{font-weight: 600; font-size: 28px; line-height: 1; margin-bottom: 12px; display: flex; align-items: center;}
.comp_li .txt h6 .link_btn{margin-left: 8px; display: inline-block;}
.comp_li .txt p{color: var(--main-color); font-weight: 400; font-size: 15px; line-height: 1;}
.comp_li .txt dl dt, .comp_li .txt dl dd{display: inline-block; height: 56px; line-height: 56px; box-sizing: border-box; padding-left: 20px; border-top: 1px solid #eee;} 
.comp_li .txt dl dt{width: 24%; background-color: #f9f9f9; font-weight: 500;}
.comp_li .txt dl dd{width: 75%; font-weight: 400; color: #444;}
.comp_li .txt dl{border-bottom: 1px solid #eee;}

/* 직무소개-디테일 */
.cus-btn {margin-top: 30px;}  
.careers {display: flex; row-gap: 80px; column-gap: 100px; margin-top: 80px; flex-wrap: wrap;}
.careers .care-con strong {font-size: 24px; margin-bottom: 15px; display: inline-block; position: relative;}
/* .careers .care-con strong::after {content: ""; display: block; position: absolute; width: 100%; height: 3px; background-color: var(--main-color); bottom: -6px; left: 0;} */
/* .careers .care-con div {width: 100%; height: 160px; border-radius: 20px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; padding: 0 150px;} */
.careers .care-con div p {font-size: 18px; font-weight: 500; color: #555; line-height: 1.5; font-weight: 400;}
.detail-tit {display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff;  height: 350px; border-radius: 10px; overflow: hidden; position: relative;}
.detail-tit::before {content: ""; display: block; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.5); top: 0; left: 0;}
.detail-tit strong {position: relative; z-index: 2;  font-family: 'GmarketSans'; font-weight: 500;}
/* .con2 {margin-top: 80px;} */
.detail-tit1 {background: url(../img/sub/detail-bg4.jpg) no-repeat center/cover;}
.detail-tit2 {background: url(../img/sub/detail-bg2.jpg) no-repeat center/cover;}
.detail-tit3 {background: url(../img/sub/detail-bg03.jpg) no-repeat center/cover;}
.detail-tit4 {background: url(../img/sub/detail-bg4.jpg) no-repeat center/cover;}
.detail-tit5 {background: url(../img/sub/detail-bg5.jpg) no-repeat center/cover; background-position: 50% 28%;}
.detail-tit6 {background: url(../img/sub/detail-bg06.jpg) no-repeat center/cover; background-position: 50% 28%;}
.detail-tit7 {background: url(../img/sub/detail-bg7.jpg) no-repeat center/cover; background-position: 50% 28%;}
.detail-tit9 {background: url(../img/sub/detail-bg8.jpg) no-repeat center/cover; background-position: 50% 40%;}
.detail-tit10 {background: url(../img/sub/detail-bg9.jpg) no-repeat center/cover; background-position: 50% 66%;}
.detail-tit11 {background: url(../img/sub/detail-bg010.jpg) no-repeat center/cover; background-position: 50% 49%;}
.detail-tit12 {background: url(../img/sub/detail-bg11.jpg) no-repeat center/cover; background-position: 50% 61%;}
.detail-tit13 {background: url(../img/sub/detail-bg012.jpg) no-repeat center/cover; background-position: 50% 78%;}
.detail-tit14 {background: url(../img/sub/detail-bg13.jpg) no-repeat center/cover; background-position: 50% 78%;}
.detail-tit15 {background: url(../img/sub/detail-bg14.jpg) no-repeat center/cover; background-position: 50% 78%;}
.detail-tit16 {background: url(../img/sub/detail-bg15.jpg) no-repeat center/cover; background-position: 50% 78%;}
.detail-extra1 {background: url(../img/sub/engineer.jpg) no-repeat center/cover; background-position: 50% 36%;}
.detail-extra2 {background: url(../img/sub/constru.jpg) no-repeat center/cover; background-position: 50% 36%;}
.detail-extra3 {background: url(../img/sub/detail-bg4.jpg) no-repeat center/cover;}
.detail-extra4 {background: url(../img/sub/front.jpg) no-repeat center/cover;}
.detail-extra5 {background: url(../img/sub/food.jpg) no-repeat center/cover;}
.detail-extra6 {background: url(../img/sub/spa.jpg) no-repeat center/cover;}
.detail-extra7 {background: url(../img/sub/facility.jpg) no-repeat center/cover;}
.detail-extra8 {background: url(../img/sub/leasing.jpg) no-repeat center/cover;}
.detail-extra9 {background: url(../img/sub/golf1.jpg) no-repeat center/cover;}
.detail-extra10 {background: url(../img/sub/golf2.jpg) no-repeat center/cover;}
.detail-extra11 {background: url(../img/sub/golf3.jpg) no-repeat center/cover;}
.detail-extra12 {background: url(../img/sub/golf4.jpg) no-repeat center/cover;}
.detail-extra13 {background: url(../img/sub/golf5.jpg) no-repeat center/cover; background-position: 50% 80%;}
.detail-extra14 {background: url(../img/sub/golf6.jpg) no-repeat center/cover;}
.detail-extra15 {background: url(../img/sub/golf7.jpg) no-repeat center/cover;}
.detail-extra16 {background: url(../img/sub/detail-bg12.jpg) no-repeat center/cover;}
.detail-extra17 {background: url(../img/sub/trading.jpg) no-repeat center/cover;}
.detail-extra18 {background: url(../img/sub/gold.jpg) no-repeat center/cover;}
.but.morebtn {margin-top: 20px;}

/* .careers .care-con {width: calc((100% - 100px) / 2); gap: 25px;} */

.care-con {display: flex; align-items: center; justify-content: space-between;width: calc((100% - 100px) / 2); gap: 30px;}
.care-con .care-icon {width: 136px; border-radius: 100%; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center; padding: 20px; aspect-ratio: 1 / 1;}
.care-con .care-icon img {width: 52px;}
.care-con .care-tit {width: calc(100% - 166px);}

.company .tab_comp.tab01_tit,
.company .tab_in_menu.tab_comp,
.comp1 .comp_1.sel_tit{display: block;}

.people .tab_hr.tab01_tit {display: block;}
.people1 .hr_1.sel_tit {display: block;}
.people1 .sel_tit.hr_1 {display: block;}

.people2 .sel_tit.hr_2 {display: block;}
.people .tab_in_menu.tab_hr {display: block;}
.people .tab_in_menu.tab_hr {display: block;}
.guide1 .sel_tit.guide_1 {display: block;}

/* 채용공고 recruit */

.tabs{margin-top: 30px;}
.tabs ul{display: flex;}
.tabs li+ li{margin-left: 12px;}
.tabs li.on a{background: var(--main-color); color: #fff;font-weight: 400;border-color: var(--main-color);}
.tabs li a{padding:12px 25px;border-radius: 30px;border:1px solid #eee;background: #f9f9f9; color: #333; font-weight: 400;}
.tabs li:hover a{background: var(--main-color); color: #fff;border-color: var(--main-color);}

/* 채용공고 디테일 recruit-view */
.review-top {display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 40px 0; border-top: 2px solid var(--main-color); border-bottom: 1px solid #ddd;}
.review-top .due-date {background-color: var(--main-color); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; padding: 7px 19px; border-radius: 50px;}
.recview-tit {display: flex; flex-direction: column; align-items: center; gap: 15px;}
.recview-tit .recview-detail {display: flex; gap: 20px;}
.recview-tit .recview-detail ul {display: flex; }
.recview-tit .recview-detail ul li {padding: 0 10px; position: relative; font-weight: 400;}
.recview-tit .recview-detail ul li:first-child::after {content: none;}
.recview-tit .recview-detail ul li::after {content: ""; display: block; width: 1px; height: 12px; background: #111; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.recview-tit .recview-detail ul li:first-child {padding-left: 0;}
.recview-tit .recview-detail .day {display: flex; gap: 10px; font-weight: 400; color: #888;}
.recview-tit > p {font-size: 32px; text-align: center;}
.recview_content {padding: 50px 0; width: 60vw; margin: 0 auto; border-bottom: 1px solid #ddd;}

.btn-wrap02 {display: flex; gap: 20px; justify-content: center; margin-top: 50px;}
.btn-wrap02 button {padding: 17px 0px; width: 155px; font-size: 16px; border-radius: 50px !important;}
.btn-wrap02 .apply-btn {border:1px solid var(--main-color); color: var(--main-color);}
.btn-wrap02 .list-btn {background-color: #f9f9f9; color: #555; border: 1px solid #ddd;}

/* 체크 */
.check{position: relative;}
.check_label { display: inline-block; position: relative;  font-size:1em; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none;
    text-align: left; padding-left:24px; vertical-align: middle; font-weight: 500;}
.check_label input {position: absolute;opacity: 0;cursor: pointer; visibility: hidden;}

/* 체크 크기 */
.checkmark {position: absolute; top:50%; transform:translateY(-50%); left: 0; height: 18px; width: 18px; background-color:#fff; border-radius:4px; border: 6px solid #ddd; }
.check_label:hover input ~ .checkmark {background-color: #efefef;}
.check_label input:checked ~ .checkmark {border:1px solid transparent; background-color: #999;}
.checkmark:after { content: ""; position: absolute; display: none;}
.check_label input:checked ~ .checkmark:after {display: block;}

/* 체크박스 */
.check_label .checkmark:after {left: 5px; top:1px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
/* 라디오 */
.checkmark.radio{border-radius: 50%;}
.check_label .checkmark.radio:after{ top: 5px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background:#fff;
  -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); border:0;}

  /* form */
input:checked + .slider{background-color: var(--main-color);}
.insert-wrap .insert.insert-chk .check_label input:checked ~ .checkmark, .check_label input:checked ~ .checkmark{background-color: var(--main-color);}
.form input{height:50px;}
input[type=text], input[type=password]{padding-left: 14px; padding-right: 14px; height: 50px; font-size: 15px; border-color: #ddd !important;}
textarea{padding:12px; font-size: 15px;}
.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container .select2-selection--single{height: 50px !important; line-height: 50px !important; font-size: 1em; font-weight: 500 !important;}
.select2-container .select2-selection--single .select2-selection__rendered{padding-left: 18px !important;;}
.select2-results__option{padding: 13px 18px !important; font-size: 1em; font-weight: 500;}
.table1 .select2-container, .table3 .select2-container{min-width: 100px;}
.box-search-container input, .box-search-container .select2-container{box-shadow: none;}
.switch input{display: none;}
textarea{line-height: 1.4;}

form input{font-size: 16px;}
form input[type=text], .form input[type=password]{padding: 0 18px;}

.select2-container{min-width: 160px; border-radius: 4px;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 50px; text-align: left;}
.select2-container .select2-selection--single{height:50px; border-radius: 4px;}
.select2-container--default .select2-selection--single{border:1px solid #dcdee1; background-color:#fff;}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:50%; right:12px !important;
  transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.select2-selection--single:focus{outline:none;}
.insert-select{position: relative;}
.select2-dropdown{border:1px solid #dcdee1;}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#f1f1f1; color:#222;}

.select2-container--default .select2-selection--single .select2-selection__arrow b{border: transparent; position: absolute;
  top: 57%; transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);
  background-size: 9px 5px; width: 9px; height: 5px; background-repeat: no-repeat; background-image: url(https://lbcontents.s3.ap-northeast-2.amazonaws.com/images/admin/icon-arrow-st2.png);}

.select2-container--open .select2-selection--single .select2-selection__arrow{
  transform:translateY(-50%) rotate(180deg); -ms-transform:translateY(-50%) rotate(180deg); -webkit-transform:translateY(-50%) rotate(180deg);}
  .select2-container--default .select2-results>.select2-results__options{max-height: 400px !important;}

  .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar{width: 8px;}
  .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb{background-color: #888;}
  .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track{background-color: #ddd;}


/* select-list */
.select-list{width: 100%; background-color:#f5f7fa; height:210px;}
.select-list option{padding:8px 16px;}

.select-list option:checked {
  background: #c1c4c9  linear-gradient(0deg, #c1c4c9  0%, #c1c4c9  100%);
}

.rec{position: relative; height: 100%;}
.rec ul{width: 100%;}
.rec form ul li + li{ border-top: 1px solid #ddd;}
.rec form input, .rec form input, .rec form select {width: 100%;}
.rec form ul li:first-child p{padding-bottom: 0; margin-bottom: 15px;}
.rec form ul li:first-child{margin-bottom: 30px;}

.rec{display: flex; gap: 100px;}
.rec .rec_filter{width: 306px; box-sizing: border-box; height: 100%; position: sticky; top: 110px;}
.rec .rectit{display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #000; margin-bottom: 20px;}
.rec .rectit p{font-size: 24px; font-weight: 600; color: #000;}
.rec .rectit button{color: #333; font-size: 15px; display: flex; align-items: center; gap: 2px;}
.rec .rectit button span{height: 16px; width: 16px; display: inline-block; margin-left: 2px;}

.searchbox{position: relative; height: 50px; border-radius: 4px; background-color: #f9f9f9;}
.searchbox input[type=text]{border: none; width: calc(100% - 50px); height: 100%; padding-right: 0; background-color: #f9f9f9;}
.searchbox input:focus{outline: none;}
.search_btn{position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 14px;}

.rec .rec_filter .btn_flex{gap: 4px; flex-direction: column; margin-bottom: 30px;}
.rec .rec_filter .btn_flex div{padding: 8px 14px 7px; font-weight: 400; border-radius: 20px; background-color: #fff; border: 1px solid #ddd; line-height: 1; font-size: 15px; cursor: pointer;}
.rec .rec_filter .btn_flex div:hover{background-color: var(--main-color)15; color: var(--main-color); border-color: var(--main-color)50;} 
.rec .rec_filter .btn_flex div.on{color: #fff; border-color: var(--main-color); background-color: var(--main-color);}
.rec .rec_filter ul li.btn{padding-top: 0; border-top: none;}

.rec .rec_filter ul li.btn button{width: 100%; background-color: var(--main-color); border-radius: 30px; padding: 14px 0; color: #fff; font-size: 16px;}  

.rec .rec_filter ul li p{font-size: 18px; line-height: 1; color: #333; padding: 15px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.rec .rec_filter ul li p i.rotate img{content: url(../img/sub/minus.svg);}



.noPost{}
.noPost > div {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px;}
.noPost i{display: block; width: 60px; height: 60px; margin: 0 auto; margin-bottom: 10px;}
.noPost p{font-weight: 500; font-size: 18px; color: #888;}


.rec_list{width: calc(100% - 480px);}
.rec_list .total{padding-bottom: 25px; border-bottom: 1px solid #222; }
.rec_list .total p{font-size: 18px; font-weight: 400;}
.rec_list .total p span{color: var(--main-color); font-weight: 600;}

.apply_list {display:flex;flex-direction:column;}
.apply_list li{cursor: pointer; border-bottom: 1px solid #ddd; position: relative;}
.apply_list li > div{  padding:30px 0;background: #fff; display: flex; gap: 50px;}
.apply_list li .top{flex-shrink: 0;}
.apply_list li .top b{ font-weight: 600; padding: 6px 10px; font-size: 14px; background: var(--main-color); color: #fff; position: relative; top: 3px;}
.apply_list li .top b span{ font-weight: inherit;} 
.apply_list li .top p{ margin-left: 12px; color: #111; font-weight: 600; font-size: 18px;;}
.apply_list li .top b.done {background-color: #AFAFAF; color: #fff;}

.apply_list li em{ font-size: 22px; line-height: 1.3; margin-bottom:15px; display: block; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #000; font-weight: 600;}

.apply_list li .bot{flex: 1; padding-right: 50px;}
.apply_list li .bot p {font-weight: 300;}
.apply_list li .bot p span{color: #666;}
.apply_list li .bot p span + span{margin-left: 10px;padding-left: 10px;position: relative;;}
.apply_list li .bot p span + span::after{content:''; display: block; width: 1px;height: 12px;background: #ddd;position: absolute;left:0;top:50%;transform: translateY(-50%);}


.apply_list li .arrow{position: absolute; right: 0; top:50%; transform: translateY(-50%); opacity: .3; transition: all .15s;} 
.apply_list li:hover .arrow{opacity: 1;}





/* 
.apply_list li{cursor: pointer; border-bottom: 1px solid #ddd; position: relative;}
.apply_list li > div{  padding:30px 0;background: #fff; display: flex; gap: 50px;}
.apply_list li .top{flex-shrink: 0;}
.apply_list li .top b{ font-weight: 600; padding: 6px 10px; font-size: 14px; background: var(--main-color); color: #fff; position: relative; top: 3px;}
.apply_list li .top b span{ font-weight: inherit;} 
.apply_list li .top p{ margin-left: 12px; color: #111; font-weight: 600; font-size: 18px;;}
.apply_list li .top b.done {background-color: #AFAFAF; color: #fff;}

.apply_list li em{ font-size: 22px; line-height: 1.3; margin-bottom:15px; display: block; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #000; font-weight: 600;}

.apply_list li .bot{flex: 1; padding-right: 50px;}
.apply_list li .bot p {font-weight: 300;}
.apply_list li .bot p span{color: #666;}
.apply_list li .bot p span + span{margin-left: 10px;padding-left: 10px;position: relative;;}
.apply_list li .bot p span + span::after{content:''; display: block; width: 1px;height: 12px;background: #ddd;position: absolute;left:0;top:50%;transform: translateY(-50%);}


.apply_list li .arrow{position: absolute; right: 0; top:50%; transform: translateY(-50%); opacity: .3; transition: all .15s;} 
.apply_list li:hover .arrow{opacity: 1;} */




/* faq */
.guide2 .sel_tit.guide_2{display: block;}
.guide2 .con {display:flex;}
.guide2 .subtit {width:20%;}
.guide2 .faq-box {width:80%;}

.faqlist{border-bottom: 1px solid #eee; border-top: 1px solid #eee; border-top: 2px solid var(--main-color);}
.faqlist li + li{border-top: 1px solid #eee;}
.faqlist li .faq_title{padding: 30px 40px; cursor: pointer; background-color: #f9f9f9; }
.faqlist li .faq_title .q{position: relative; font-weight: 600; font-size: 20px; color: #555; line-height: 1.3em; padding-right: 40px;}
.faqlist li .faq_title .q::before{ content: 'Q.'; color: #555; font-weight: 600; display: inline-block; position: relative; padding-right: 20px;}
.faq_answer{padding: 40px 80px; font-weight: 500; font-size: 18px; line-height: 1.5; display: none; color: #333; border-top: 1px solid #eee;}
.faqlist li .faq_title .q::after{content: ''; width: 40px; height: 40px; background: url(../img/sub/plus.svg) no-repeat center; position: absolute; display: block; top: 50%; transform: translateY(-50%); right: 0;}
.faqlist li.turn .faq_title .q::after{background-image: url(../img/sub/minus.svg);}

.faqlist li.turn .faq_title{background-color: #fff;}
.faqlist li.turn .faq_title .q{color: #000;}
.faqlist li.turn .faq_title .q::before{color: #000;}

.faq-top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px;}
.faq-tab ul{display: flex; align-items: center; gap: 20px;}
.faq-tab ul li{padding: 18px 30px; font-size: 18px; font-weight: 400; line-height: 1; color: #000; border: 1px solid #eee; cursor: pointer; transition: all .15s;}
.faq-tab ul li.on{background-color: #3D3D3D; color: #fff; border-color: #3d3d3d;}
.faq-tab ul li:hover:not(.on){background-color: #f5f5f5;}
.faq-top .searchbox{width: 291px;}


/* 직무소개 */
.comp3 .faqlist li .faq_title .q::before{display: none;}
.comp3 .faqlist{border-top: 2px solid #666;}
.comp3 .faqlist li .faq_title .q{font-size: 24px;}
.comp3 .faqlist li .faq_title{padding: 25px 30px;}

.comp3 .faqlist {background-color: #fff;}
.comp3 .faqlist li .faq_title .q::before{display: none;}
.comp3 .faqlist{border-top: 2px solid #666;}
.comp3 .faqlist li .faq_title .q{font-size: 24px; padding: 0;}
.comp3 .faqlist li .faq_title .q:after{right: -10px;}
.comp3 .faqlist li .faq_title{padding: 25px 30px;}
.comp3 .faqlist li .faq_answer{padding: 0; }
.comp3 .faqlist li .faq_answer > div{display: flex; gap: 35px; padding: 25px 30px; }
.comp3 .faqlist li .faq_answer .img{width: 520px; position: relative; aspect-ratio: 1 / 0.51; flex-shrink: 0; display: none;}
.comp3 .faqlist li .faq_answer .img img{position: absolute; width: 100%; height:100%; left:50%; top:50%;transform: translate(-50%, -50%); object-fit: cover;}
.comp3 .faqlist li .faq_answer .txt{display: flex; flex-direction: column; gap: 25px; flex: 1; }
.comp3 .faqlist li .faq_answer .txt p{font-size: 18px; line-height: 1.5; color: #444; font-weight: 400;}
.comp3 .faqlist li .faq_answer .txt .btmbox{background-color: #0023e60a; }
.comp3 .faqlist li .faq_answer .txt .btmbox ul{padding: 25px;}
.comp3 .faqlist li .faq_answer .txt .btmbox ul li{color: #333; font-weight: 500; line-height: 1.5; position: relative; padding-left: 12px; border-top: none; font-size: 16px;}
.comp3 .faqlist li .faq_answer .txt .btmbox ul li:before{content: ''; width: 3px; height: 3px; border-radius: 50%; position: absolute; display: block; top: 9px; left: 0; background-color: #333;}
.comp3 .faqlist li .faq_answer .txt .btmbox ul li + li{margin-top: 3px;}

.comp3 .faqlist li .faq_answer .txt .btmbox p {font-weight:800;font-size:16px;padding-bottom:6px;}
.comp3 .faqlist li .faq_answer .txt .btmbox2 {background-color: #ffffff;border:1px solid #e6001b1f;}
.comp3 .faqlist li .faq_answer .txt .btmbox2 ul li{padding-left: 0px;}
.comp3 .faqlist li .faq_answer .txt .btmbox2 ul li:before{display: none;}









.page-nav {display: flex; align-items: center; gap: 50px; justify-content: center; margin-top: 60px;}
.page-nav ul {display: flex; align-items: center; gap: 28px;}
.page-nav ul li {border: none; color: #aaa; font-size: 18px; cursor: pointer; font-weight: 300;}
.page-nav ul li.page-on {color: #333; position: relative; font-weight: 900;}
.page-nav ul li.page-on::before {content: ""; display: block; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #333;}
.page-nav .page-btn i {font-size: 20px; display: block; color: #aaa;}
.page-nav .page-btn.btn-on i {cursor: pointer; color: #333;}

/* qna */
.guide3 .sel_tit.guide_3{display: block;}
.qna {overflow: hidden;}
.qnaform form {display: flex; flex-direction: column; gap: 0;}

.qnaform dl {display: flex; align-items: center; padding: 25px 30px; border-bottom: 1px solid #eee;}
.qnaform dl dd {width: 220px; font-size: 20px;}
.qnaform dl dt {width: calc(100% - 220px);}

.qnaform dl select {padding: 0 18px; background-color: #f5f5f5 !important; border: none;  width: 790px !important; height: 50px; border-radius: 4px; font-size: 15px; background: url(../img/sub/angle.png) no-repeat; background-position: 98% 50%;}
/* .qnaform dl input {width: 60%; border: none; background-color: #f5f5f5;} */
.qnaform dl input {width: 790px;}

select {
  -webkit-appearance:none; /* for chrome */
  -moz-appearance:none; /*for firefox*/
  appearance:none;
  outline: none;
}

select::-ms-expand{
  display:none;/*for IE10,11*/
}

.qnaform input[type="text"] {border-color: #ddd;}
/* .qnaform textarea {resize: none; width: 100%; height: 200px; border:none; border-radius: 4px; background-color: #f5f5f5; padding: 18px; outline: none;} */
.qnaform textarea {resize: none; width: 100%; height: 200px; border-radius: 4px; padding: 18px; outline: none; border: 1px solid #ddd;}
.qnaform .privacy-con {border: 1px solid #ddd; border-radius: 4px; padding: 18px; height: 150px; overflow-y: scroll; font-weight: 400; color: #777;}
.chk-wrap {display: flex; align-items: center; margin-top: 10px;}
input[type="checkbox"] {display: none;}
.chk-wrap span {width: 20px; height: 20px; display: inline-block; background: url(../img/sub/chk-none.png) no-repeat center/cover;}
.label-wrap {display: flex; align-items: center; gap: 5px;}
.label-wrap p {font-weight: 400;}
.chk-wrap input:checked ~ label span {background: url(../img/sub/chked.png) no-repeat center/cover;}
.chk-wrap input:checked ~ label p {font-weight: 600;}

.qnaform .form-top {border-top: 2px solid var(--main-color);}
/* .qnaform .form-top {display: flex; width: 100%;}
.qnaform .form-top dl {width: 50%;}
.qnaform .form-top dl dd {width: 220px;}
.qnaform .form-top select {width: 90%;} */

.btn-wrap {display: flex; justify-content: center; margin-top: 50px;}
.btn-wrap button {padding: 20px 0px; width: 230px; border: 2px solid var(--main-color);  color: var(--main-color); font-size: 20px; border-radius: 50px; transition: all 0.3s;}
.btn-wrap button:hover {background-color: var(--main-color); color: white;}

/* 2024-08-05 css custom */

/* hoban_company - 회사소개 (계열사 소개) */

/* hoban_affiliate - 회사소개 (직무 소개) */

.subtab > ul {width: 100%; display: flex;}
.hoban_affiliate .subtab > ul > li {width: calc(100% / 7); text-align: center; padding: 10px 0; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: 500; color: #ddd; cursor: pointer;}
.hoban_affiliate .subtab > ul > li.on {border-bottom: 3px solid var(--main-color); color: #111; font-weight: 700;}
.hoban_affiliate .comp_li { margin-top: 60px;}

.comp_2 .sel_tit.comp_2 {display: block;}

/* 채용절차 */
.guide1 .sel_tit.guide_{display: block;}
.process {margin-bottom: 150px;}
.process .process-tit {font-size: 35px; display: flex; align-items: center;}
.process .process-tit span {width: 9px; position: relative; margin-right: 10px; display: inline-block; }
.process .process-tit span::before {content: ""; display: block; width: 12px; height: 12px; background-color: var(--main-color); border-radius: 2px;}
.process .process-tit span::after {content: ""; display: block; width: 12px; height: 12px; background-color: #89898a; border-radius: 2px; margin-top: 3px;}
/* .process .process-wrap {display: flex; width: 100%; justify-content: space-between; position: relative; margin-top: 50px;} */
.process .process-wrap {display: flex; width: 100%; justify-content: space-between; position: relative; margin-top: 50px; padding: 30px 40px; border: 1px dashed  #bbb; border-radius: 150px;}
.process .process-wrap::before {content: ""; display: block; height: 1px; width: 88%; border-top: 1px dashed #bbb; position: absolute; top: 50%;}
/* .process .process-wrap .circle {width: 220px; height: 220px; border-radius: 50%; border: 2px solid #f1f1f1; display: flex; align-items: center; justify-content: center; position: relative; background-color: white;} */
.process .process-wrap .circle {width: 220px; height: 220px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background-color: #dbe0ff;}
/* .process .process-wrap > div:last-child {border: 5px solid var(--main-color);} */
/* .process .process-wrap .circle::before {content: ""; display: block; position: absolute; width: 90%; height: 90%; border-radius: 50%; background-color: #fff3e7; left: 50%; top: 50%; transform: translate(-50%,-50%);} */
.process .process-wrap .circle:last-child {border:2px solid var(--main-color); background-color: var(--main-color);}
/* .process .process-wrap .circle:last-child::before {background-color: var(--main-color); width: 100%;height: 100%;} */
.process .process-wrap .circle:last-child .circle-txt { color: #fff;}
.circle-txt {display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; gap: 5px;}
.circle-txt span {font-size: 22px; font-weight: 700;}
.circle-txt strong {font-size: 22px; font-weight: 500;}

.con-top {border-top: 2px solid #333;}
.process-con {margin-top: 100px;}
.process-con dl {display: flex; align-items: flex-start; padding: 60px 30px; border-bottom: 1px solid #ececec;}
.process-con dl dd {width: 360px; font-size: 26px;}
.process-con dl dt {width: calc(100% - 360px); padding-top: 3px;}
.process-con dl dt > ul {display: flex; flex-direction: column; gap: 25px;}
.process-con dl dt ul > li.main-pro {font-size: 20px; font-weight: 400; color: #222;}
/* .process-con dl dt ul > li.main-pro::before {content: "•"; display: inline-block; margin-right: 5px; font-size: 20px; line-height: 0.2;} */
.process-con dl dt ul > li ul li {font-size: 17px; color: #777; text-indent: 5px;}
.process-con dl dt ul > li > ul { margin-top: 10px; display: flex; flex-direction: column; gap: 10px;}
.process-con dl dt ul > li > ul > li::before {content: "-"; display: inline-block; color: #777; margin-right: 5px;}

.re-notice {padding: 40px 30px; border-radius: 10px; background-color: #f5f5f5; margin-top: -80px;}
.re-notice h3 {font-size: 18px; color: #555; margin-bottom: 15px; display: flex; align-items: center; gap: 3px;}
.re-notice .notice-txt {font-size: 16px; color: #777; font-weight: 300; display: flex; flex-direction: column; gap: 8px;}

/* 사내복지 */

.welfare-wrap {display: flex; flex-direction: column; gap: 120px;}
.welfare-wrap > div:first-child {padding-top: 0;}
.welfare-con {display: flex; flex-direction: column; gap: 50px;}
.welfare-con .wel-tit {display: flex; flex-direction: column; text-align: center;}
.welfare-con .wel-tit strong {font-size: 40px; margin-bottom: 10px;}
.welfare-con .wel-tit span {font-size: 20px; font-weight: 400; color: #666;}
.welfare-con .wel-box {display: flex; column-gap: 30px; row-gap: 40px; flex-wrap: wrap;}
.welfare-con .welfare {width: calc((100% - 90px) / 4); padding: 40px; border-radius: 20px; background-color: #fff; border: 1px solid #eee; transition: all 0.2s; box-sizing: border-box;}
.welfare-con .welfare .welfare-icon {width: 85px; height: 85px; background-color:#eef5ff; display: flex; align-items: center; justify-content: center; border-radius: 20px; margin-bottom: 25px;}
.welfare-con .welfare .welfare-icon i {width: 50px; display: inline-block;}
.welfare-con .welfare .wel-txt {display: flex; flex-direction: column; gap: 10px;}
.welfare-con .welfare .wel-txt p {font-size: 24px;}
.welfare-con .welfare .wel-txt span {font-size: 18px; font-weight: 400; color: #666;}

.welfare-con .welfare:hover {box-shadow: 0 4px 10px rgba(197,197,197,.3); border:1px solid var(--main-color); outline: 1px solid var(--main-color);}

/* 인재상 */
.value-sub0 h6 {font-size:60px;font-weight:700;}
.value-sub0 p {display: block;font-size: clamp(20px, 7vw, 30px);font-weight: 500;margin-top:0.5em}

.people-wrap {padding-bottom: 70px;}
.out-circle {position: relative; width: 460px; aspect-ratio: 1 / 1; border-radius: 100%; border: 1px solid #0e45a4;; padding: 40px; margin: 0 auto;}
.out-circle .inner-circle {border-radius: 100%; width: 100%; height: 100%; background: linear-gradient(180deg, #0c7cc6, #1962BA, #0E45A4, #021c4a);}
.out-circle .circle-con  {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5;}

.out-circle .ball-holder {position: absolute; width: 100%; height: 100%; border-radius: 50%; top: 0; left: 0; z-index: 1;}
.out-circle .ball-holder .ball {position: absolute; border-radius: 50%; background-color: #021c4a;;}
.out-circle .holder01 .ball { top: 50%;  width: 12px; height: 12px; left: -6px;}
.out-circle .holder02 .ball {bottom: 50%; right: -9px; width: 18px; height: 18px;}
.out-circle .holder01 {animation: ball01 16s linear infinite;}
.out-circle .holder02 {animation: ball01 16s linear infinite;}

@keyframes ball01 {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.circle-ball {position: absolute; width: 56%; aspect-ratio: 1 / 1; border-radius: 100%; background-color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(107,107,107,.3);}
/* .circle-ball::before {content: ""; display: block; position: absolute; width: 12px; height: 12px; border-radius: 100%; background-color: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%);} */
.circle-ball.ball1 {top: -115px; left: 100px; border:2px solid #0E45A4;;}
.circle-ball.ball2 {bottom: -90px; right: -95px; border: 2px solid #0E45A4;}
.circle-ball.ball3 {bottom: -90px; left: -95px; border: 2px solid #0E45A4; }
.circle-ball.ball4 {bottom: -90px; right: -95px; border: 2px solid var(--main-color);}

.circle-tit {display: flex; flex-direction: column; align-items: center; width: fit-content;}
.circle-tit em {display: flex; width: 65px; margin-bottom: 10px;}
.circle-tit p {font-size: 26px;font-weight:800;}
.circle-tit span {font-size: 20px; color: #9a9a9a; font-weight: 500;}


.talent {margin: 140px 0;}

.inner-tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center;}
.inner-tit p {font-size: 54px; color: white; margin-top: -16px;}
.inner-tit i {display: inline-block; width: 280px;}

.people-tit {display: flex; gap: 100px; align-items: center;}
.people-tit strong {font-size: 35px;}
.people-tit span {font-size: 20px; font-weight: 400; color: #555;}

.people-tit2 {width: 100%; height: 250px; border-radius: 20px; background:url(../img/sub/value.jpg) no-repeat center/cover;}

.value-tabs .tabs {margin: 0 !important;}
/* .subtit.value-sub {margin-top: 70px;} */

/* 핵심가치 */
.con2 {overflow: hidden;}
.core-value {background: url(../img/sub/main-bg.png), url(../img/sub/main-bg02.png); background-repeat: no-repeat; background-size: 37%, 50%; background-position: 100% -12% ,0 85%;}

/* .value-bg {background: url(../img/sub/value02-2.jpg) no-repeat center/cover; overflow: hidden; background-attachment: fixed;} */

.value-bg {width: 100%; height: 550px; position: relative; overflow-x: hidden;}
.value-bg-wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.value-bg-wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/sub/value02-2.jpg) no-repeat center/cover; transform: translateZ(0); will-change: transform;}
/* .value-bg {height: 1000px; position: relative;}
.value-bg .bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%;background: url(../img/sub/value02-2.jpg); background-size: cover; background-position: center center; transform: translateZ(0); will-change: transform;}  */

.value-inner {padding: 0 0 150px;}
.value-inner.win {padding: 150px 0 0;}
.value-inner:last-child {padding-bottom: 0;}



.growth {display: flex; justify-content: space-between; background: url(../img/sub/main-bg03.png) no-repeat; background-size: 9%; background-position: 0 107%; }
.value-tit {display: flex; flex-direction: column; width: 40%;}
.value-tit em {display: block; width: 75px; margin-bottom: 50px;}
.value-tit h3 {font-size: 50px; font-weight: 700; margin-bottom: 25px;}
.value-tit p {font-size: 22px; color: #666; font-weight: 300;}

.value-con {width: 60%;}
.value-con .value-sub-tit {display: flex; flex-direction: column; gap: 25px;}
.value-con .value-sub-tit p {font-size: 30px; font-weight: 600;}
.value-con .value-sub-tit span {font-size: 20px; font-weight: 400; color: #555; line-height: 1.6;}


.value-con {display: flex; flex-direction: column; gap: 90px;}
.value-con .growht-con ul {display: flex; flex-wrap: wrap; column-gap: 35px; row-gap: 35px; }
/* .value-con .growht-con ul li {width: calc((100% - 105px) / 3); padding: 25px; border: 1px solid #88b7ff; border-radius: 10px; display: flex; flex-direction: column; gap: 15px; transition: all 0.2s; background-color: #fff;} */
.value-con .growht-con ul li {width: 100%;aspect-ratio: 3.5 / 1; padding: 25px; border-radius: 10px; display: flex; flex-direction: column;justify-content: flex-end; gap: 15px; transition: all 0.2s; background-color: #fff;}
.value-con .growht-con ul li:nth-child(1) {background: url(../img/sub/value-01.png) no-repeat center/cover;} 
.value-con .growht-con ul li:nth-child(2) {background: url(../img/sub/value-02.png) no-repeat center/cover;} 
.value-con .growht-con ul li:nth-child(3) {background: url(../img/sub/value-03.png) no-repeat center/cover;} 
.value-con .growht-con ul li:hover {box-shadow:0 4px 10px rgba(197,197,197,.3)}
/* .value-con .growht-con ul li:nth-child(2n) {border-color: #ddd;} */
.value-con .growht-con ul li em {display: block; width: 55px;}
.value-con .growht-con ul li div {display: flex; flex-direction: column; gap: 3px;color:#fff}
.value-con .growht-con ul li div p {font-size: 40px;font-weight:800;}
.value-con .growht-con ul li div span {font-size: 20px; color: #ddd; font-weight: 400;}

.win .value-tit {position: sticky; top: 130px; left: 0; align-items: flex-start; justify-content: flex-start; height: fit-content;}
/* .win {background: url(../img/sub/win-bg.png) no-repeat; height: 1000px; background-attachment: fixed;} */

.win {width: 100%; height: 1000px; position: relative;}
.win-bg-wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.win-bg-wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%;transform: translateZ(0); will-change: transform;}
.win-bg-wrap .bg {background: url(../img/sub/win-bg.png) no-repeat center/cover;}

.win .value-tit h3 {color: #fff;}
.win .value-tit p {color: rgba(255, 255, 255, .85); font-weight: 200;}
/* .win .value-con {margin-top: 110px;} */
.win-con {display: flex;  height: 100%;}
.win-tit em {font-size: 26px; color: #fff; margin-bottom: 15px; display: block;transition: all 0.2s;}
.win-tit p {font-size: 32px; font-weight: 100; color: #fff;transition: all 0.2s;}
.win-tit > div {font-size: 19px; font-weight: 100; color: #fff; padding: 35px 0; border-bottom: 1px solid rgba(255, 255, 255, .5); overflow: hidden; width: 0; height: 0; padding: 0;}
.win-tit {transition: all 0.3s; cursor: default;}
.win-tit:hover em {color: #a4c9ff;}
.win-tit:hover p {font-size: 40px; font-weight: bold;}
.win-tit:hover span {opacity: 1;}
.win-tit:hover > div {padding: 35px 0; overflow: auto; width: 100%; height: fit-content;}

.scroll {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; width: 100%; background-color: pink; text-align: center;}

.future {display: flex; justify-content: space-between;padding-top:150px;}
.future-con { width: 60%;}
.future-con ul {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px; width: 100%;}
.future-con ul li { width: 100%; height: 430px; border-radius: 20px; overflow: hidden; position: relative; transition: all 0.3s;}
/* .future-con ul li:hover {background-size: 200% !important;} */
/* .future-con ul li::after {content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); position: absolute; top: 0; left: 0;} */
.future-con ul li:first-child {background: url(../img/sub/growth1.jpg) no-repeat center/cover; grid-column-start: 2;}
.future-con ul li:nth-child(2) {background: url(../img/sub/stability2.jpg) no-repeat center/cover; grid-column-start: 1; margin-top: -100px;}
.future-con ul li:nth-child(3) {background: url(../img/sub/youth1.jpg) no-repeat center/cover; margin-top: 200px;}
.future-con ul li:nth-child(4) {background: url(../img/sub/stability1.jpg) no-repeat center/cover; margin-top: -100px;;}
.future-con ul li em {font-size: 80px; font-weight: 900; color: rgba(255, 255, 255, .35); position: absolute; bottom: 0; right: 0; line-height: 0.6;}

.future-con ul li .fu-txt {display: flex; flex-direction: column; position: absolute; bottom: 37px; left: 30px; z-index: 2;}
.future-con ul li .fu-txt span {font-size: 16px; color: rgba(255, 255, 255, .92); font-weight: 200;}
.future-con ul li .fu-txt p {font-size: 46px; color: #fff; font-weight: bold;}


/* ********************************************* *
* 1630px
* ********************************************* */
@media screen and (max-width: 1630px){
  .value-inner {padding: 150px 20px;}
  .win {padding: 150px 0;}
  .growth {background-position: 20px 107%; gap: 20px;}
}

/* ********************************************* *
* 1500px
* ********************************************* */
@media screen and (max-width: 1500px){

}

/* ********************************************* *
* 1420px
* ********************************************* */
@media screen and (max-width: 1420px){
  .value-con .growht-con ul {column-gap: 20px;}

  .win-con {justify-content: space-between;}
  .win .value-con {width: 55%;}

  .future {flex-direction: column;}
  .future .value-tit {width: 36%;}
  .future-con {width: 70%; margin-left: auto; margin-top: -130px;}
  .future-con ul li {width: 100%; height: auto; aspect-ratio: 1.8 / 2;}

  .process .process-wrap .circle {width: 200px; height: 200px;}
}

/* ********************************************* *
* 1240px
* ********************************************* */
@media screen and (max-width: 1240px){
  .comp_li .txt dl dd {width: 74%;}
  .comp_li .txt dl dt, .comp_li .txt dl dd {padding-left: 12px;}

  .careers {column-gap: 65px;}
  .care-con {width: calc((100% - 65px) / 2);}
  .careers .care-con strong {margin-bottom: 12px;}
  .careers .care-con div p {font-size: 17px;}

  .out-circle {width: 400px;}
  .circle-tit p {font-size: 24px;}
  .circle-tit span {font-size: 18px;}

  .value-tit {width:100%;}
  .value-con {gap: 60px;margin:0 auto;}
  .value-tit em {width: 70px; margin-bottom: 45px;}
  .value-tit h3 {font-size: 55px;}
  .value-tit p {font-size: 20px;}
  .value-tit p br {display: none;}
  .value-con .value-sub-tit p {font-size: 27px;}
  .value-con .value-sub-tit span {font-size: 18px;}

  .growth {flex-direction: column; gap: 80px; background-size: 12%;}
  .value-con {width: 80%; margin-left: auto; gap: 50px; margin-top: 0;}

  .win {height: 960px;}
  .win-tit p {font-size: 29px;}
  .win-tit:hover p {font-size: 36px;}

  .future-con {width: 77%;}

  .welfare-con .welfare .wel-txt p {font-size: 22px;}
  .welfare-con .welfare {padding: 40px 30px; width: calc((100% - 60px) / 3);}
 
  .recview-tit > p {font-size: 30px;}
  .recview-tit {gap: 12px;}

  .process .process-wrap {padding: 30px;}
  .process .process-wrap .circle {width: 170px; height: 170px;}
  .process-con dl dd {width: 300px;}

  .comp_2 .comp_li ul {row-gap: 60px;}

  .btn-wrap button {width: 195px; padding: 17px 0;}


  .guide2 .con {flex-direction: column;}
  .guide2 .subtit {width:100%;}
  .guide2 .faq-box {width:100%;}


}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){
  
  .comp_li ul {gap: 80px 20px;}
  .comp_li ul li {width: calc((100% - 40px) / 3);}
  .comp_li .txt h6 {font-size: 26px;}
  .comp_li .txt dl dt, .comp_li .txt dl dd {padding-left: 10px;}
  .comp_li .txt dl dt {width: 26%;}
  .comp_li .txt dl dd {width: 72%;}

  .hoban_affiliate .subtab > ul > li {font-size: 17px;}

  .care-con {width: 100%;}
  /* .value-con {margin-top: 320px;} */

  .win-tit p {font-size: 27px;}
  .win-tit:hover p {font-size: 31px;}
  .win-tit em {font-size: 24px;}
  .win-tit > div {font-size: 18px;}

  .future-con ul {grid-column-gap: 50px;}
  .future-con ul li em {font-size: 66px;}
  .future-con ul li .fu-txt p {font-size: 42px;}

  .rec {gap: 30px; justify-content: space-between;}
  .rec_list {width: calc(100% - 415px);}
  .select2-container {width: 100% !important;}
  .qnaform dl select {width: 100% !important;}
  .qnaform dl input {width: 100%;}
  .rec .rec_filter {width: 385px;}

  .review-top {gap: 30px;}
  /* .review-top .due-date {width: 75px; height: 75px;} */

  .process .process-wrap {flex-wrap: wrap; column-gap: 130px; row-gap: 50px; justify-content: flex-start;}
  .process .process-wrap .circle {width: calc((100% - 260px) / 3); aspect-ratio: 1 / 1; height: auto;}
  .process .process-wrap .circle:first-child {position: relative;}
  .process .process-wrap .circle:first-child::after {content: ""; display: block; position: absolute; width: 80vw; height: 1px; border: 1px dashed #eee; top: 50%; left: 0; z-index: -1;}
  .process .process-wrap .circle:nth-child(4) {position: relative;}
  .process.newjob .process-wrap .circle:nth-child(4)::after {content: ""; display: block; position: absolute; width: 40vw; height: 1px; border: 1px dashed #eee; top: 50%; left: 0; z-index: -1;}
  .process .process-wrap::before {content: none;}

  .process-con dl dd {font-size: 24px;}
  .process .process-tit {font-size: 32px;}
  .process-con dl dt ul > li.main-pro {font-size: 18px;}
  .process .process-wrap {border-radius: 70px;}

  .btn-wrap button {font-size: 18px;}

}

/* ********************************************* *
* 890px
* ********************************************* */
@media screen and (max-width: 890px){
  .subtit h6 {font-size: 45px;margin-bottom: 20px;}
  .subtit p {font-size: 18px;}

  .comp_li ul {gap: 80px 30px;}
  .comp_li ul li {width: calc((100% - 30px) / 2);}
  .comp_li .txt dl dt, .comp_li .txt dl dd {padding-left: 17px;}
  .company.comp2 .comt_text_01 > p {font-size:18px;}




  .subtab {width: 100%; overflow-x: scroll;}
  .subtab > ul {width: max-content;}
  .hoban_affiliate .subtab > ul > li {padding: 10px 25px; width: max-content;}

  .out-circle {width: 360px; padding: 25px;}
  .circle-ball.ball1 {top: -100px; left: 50%; transform:translateX(-50%)}
  .circle-ball.ball2 {bottom: -60px; right: -77px; }
  .circle-ball.ball3 {bottom: -60px; left: -77px; }
  .circle-tit em {width: 58px;}
  .circle-tit p {font-size: 22px;}
  .circle-tit span {font-size: 16px;}
  .inner-tit i {width: 100%;}

  .value-con {width: 100%;}
  .value-tit {width: 100%;}
  .value-tit p br {display: block;}
  
  .value-tit h3 {font-size: 52px; margin-bottom: 20px;}
  .value-tit p {font-size: 18px;}
  .value-con .value-sub-tit {gap: 20px;}
  .value-con .value-sub-tit p {font-size: 24px;}
  .value-con .value-sub-tit span {font-size: 16px;}

  .value-con .growht-con ul {row-gap: 20px;}
  .value-con .growht-con ul li {padding: 15px 20px;}
  .value-con .growht-con ul li div p {font-size: 18px;}
  .value-con .growht-con ul li div span {font-size: 16px;width:70%;}

  .win-con {flex-direction: column;}
  .win .value-con {width: 60%;}
  .win .value-tit {position: static;}
  .win {height: fit-content;}
  .win .value-con {margin-top: 80px;}
  .win-tit p {font-size: 24px;}
  .win-tit:hover p {font-size: 28px;}
  .win-tit > div {font-size: 16px;}

  .value-inner:last-child {padding-bottom: 70px;}

  .future .value-tit {width: 100%;}
  .future-con {width: 100%; margin-top: 50px;}
  .future-con ul {width: 100%;}
  /* .future-con ul li {aspect-ratio: 1 / 1;} */

  .welfare-con .wel-tit strong {font-size: 36px;}
  .welfare-con .wel-tit span {font-size: 18px;}

  .welfare-con .welfare {width: calc((100% - 30px) / 2);}

  .rec {flex-direction: column; gap: 50px;}
  .rec .rec_filter {position: static; width: 100%;}
  .rec_list {width: 100%;}
  .rec_list .total p {font-size:16px;}
  .apply_list li em {font-size:20px;}
  .apply_list li .bot p {font-size:15px}
  .apply_list li .top b {font-size:14px;}
  .apply_list li > div {gap:30px}
  .recview-tit > p {font-size: 27px;}
  .review-top .due-date {font-size: 18px;}

  .process .process-wrap {column-gap: 80px;}
  .process .process-wrap .circle {width: calc((100% - 160px) / 3);}

  .growth .subtit {margin-bottom:0;}
  .growth {gap:50px;}

  .job_intro .intro_sub {font-size:18px;}

}

/* ********************************************* *
* 750px
* ********************************************* */
@media screen and (max-width: 750px){
  .process .process-wrap {column-gap: 50px;}
  .process .process-wrap .circle {width: calc((100% - 100px) / 3);}
  .circle-txt span {font-size: 20px;}
  .circle-txt strong {font-size: 20px;}

  .process-con dl dd {width: 240px;}

  .page-nav {gap: 40px;}

  .service_title_box > div > h2 {font-size: 40px;}
  .service_title_box {padding-bottom: 40px;}

  .qnaform dl dd {width: 150px; font-size: 18px;}
  .qnaform dl dt {width: calc(100% - 150px);}

  .btn-wrap button {width: 175px; padding: 15px 0;}

  .recview_content {width: 80vw;}
}

/* ********************************************* *
* 690px
* ********************************************* */
@media screen and (max-width: 690px){
  .subtit {margin-bottom:41px;}
  .subtit h6 {font-size: 42px;}
  .subtit > div {flex-direction: column; align-items: flex-start !important; gap: 30px;}

  .comp_li ul {gap: 60px 20px;}
  .comp_li ul li {width: calc((100% - 20px) / 2);}
  .comp_li .txt dl dt, .comp_li .txt dl dd {padding-left: 10px;}
  .comp_li .txt dl dd {width: 69%; font-size: 15px;}
  .comp_li .txt dl dt {width: 26%; font-size: 14px;}

  .detail-tit {font-size: 29px;}

  .out-circle {width: 60%;}


  .value-tit h3 {font-size: 46px; margin-bottom: 15px;}
  .value-tit em {width: 65px; margin-bottom: 40px;}

  .future-con ul li:nth-child(3) {margin-top: 140px;}
  .future-con ul li .fu-txt p {font-size: 36px;}
  .future-con ul li em {font-size: 55px;}
  .future-con ul li .fu-txt {bottom: 20px; left: 20px;}

  .welfare-con .wel-tit strong {font-size: 32px;}
  .welfare-con .wel-tit span {font-size: 17px;}

  .recview-tit .recview-detail {flex-direction: column; gap: 5px; align-items: center;}
  .circle-txt span {font-size: 18px;}
  .circle-txt strong {font-size: 18px;}

  .process-con dl {flex-direction: column; gap: 30px;}
  .process-con dl dt {width: 100%;}
  .process .process-tit {font-size: 26px;}
  .process .process-wrap {margin-top: 35px;}
  .process-con {margin-top: 70px;}
  .process-con dl {padding: 40px 20px;}
  .process-con dl dt > ul {gap: 20px;}
  .process {margin-bottom: 100px;}

  .comp_2 .comp_li ul {row-gap: 40px;}

  
  .circle-con .circle-tit p {font-size:20px;}
}

/* ********************************************* *
* 580px
* ********************************************* */
@media screen and (max-width: 580px){
  .comp_li ul li {width: 100%;}
  .comp_li .txt dl dd {font-size: 16px;}
  .comp_li .txt dl dt {font-size: 16px;}
  .comp_li .txt h6 {font-size: 24px;}

  .subtit h6 {font-size: 40px;}

  .sub_tab_wrap > div {padding: 0;}
  .sub_tab_home {width: 55px !important;}
  .sub_tab_menu>li {width: calc((100% - 55px) / 2); font-size: 15px;}
  .sub_tab_title_box>span {padding: 0 15px;}
  .sub_tab_title_box>span:after {right: 15px;}

  .care-con {gap: 20px;}
  .care-con .care-icon {width: 125px;}
  .care-con .care-tit {width: calc(100% - 145px);}
  .care-con .care-icon img {width: 46px;}

  .out-circle {width: 67%;}


  .win-tit p {font-size: 24px; font-weight: bold;}
  .win-tit:hover p {font-size: 24px;}
  .win-tit > div { height: fit-content; width: 100%; padding: 35px 0; overflow: auto; font-weight: 300;}
  .win .value-tit p {color: rgba(255, 255, 255, .95);}
  .win-tit em {color: #ff7d00;}
  .win .value-con {width: 100%; gap: 45px;}
  

  .future-con ul {display: flex; flex-direction: column; gap: 20px;}
  .future-con ul li {margin: 0 !important; height: 250px; aspect-ratio: auto;}
  .future-con ul li em {font-size: 66px;}

  .welfare-con .wel-box {column-gap: 20px;}
  .welfare-con .welfare {padding: 30px 25px;width: calc((100% - 20px) / 2); }
  .welfare-con .welfare .welfare-icon {width: 80px; height: 80px;}
  .welfare-con .welfare .welfare-icon i {width: 45px;}
  .welfare-con .welfare .wel-txt p {font-size: 20px;}
  .welfare-con .welfare .wel-txt span {font-size: 16px;}

  .apply_list li em {font-size: 20px;}
  .apply_list li .bot p {font-size: 14px;}
  .apply_list li .top b {font-size: 14px;}
  .apply_list li .top b {padding: 6px 15px;}

  .review-top .due-date {font-size: 16px;}
  .recview-tit > p {font-size: 25px;}

  .process .process-wrap .circle {width: 150px;}
  .process .process-wrap {flex-direction: column;  align-items: center;}
  .process .process-wrap .circle:first-child::after {content: none;}
  .process.newjob .process-wrap .circle:nth-child(4)::after {content: none;}
  .process .process-wrap::before {content: ""; display: block; width: 1px; height: 85%; border: 1px dashed #eee; position: absolute; top: 30px; left: 50%;}

  .faqlist li .faq_title .q {font-size: 18px; display: flex;}
  .faqlist li .faq_title .q::before {padding-right: 15px;}
  .faqlist li .faq_title .q span {width: 90%; display: inline-block;}
  .faqlist li .faq_title .q::after {top: 40%;}
  .faq_answer {padding: 30px; font-size: 16px;}
  .faqlist li .faq_title {padding: 25px 10px;}

  .qnaform dl {flex-direction: column; align-items: flex-start; padding: 20px 10px; gap: 15px; padding: 20px 10px;}
  .qnaform dl dt {width: 100%;}

  .btn-wrap button {width: 160px; padding: 13px 0; font-size: 16px;}

  .apply_list li > div {padding: 25px 20px;}
  .rec .rec_filter {padding: 25px 20px;}
  .apply_list li .top p {font-size: 17px; margin-left: 10px;}

  .apply_list li em {font-size:18px;}
  .apply_list li .bot p {font-size:13px;}
  .apply_list li .top b {font-size:13px;padding:5px 8px}
  .apply_list .bay {margin-left:0 !important;padding-left:0 !important;display:block;}
  .apply_list .bay::after {display:none !important;}


  .circle-con .circle-tit p {font-size:16px;}
  .value-tit p {font-size:16px;}
  .value-con .growht-con ul li {aspect-ratio: 2 / 1;}

  .subtit p {font-size:16px;}

  .process-con dl dd {font-size:20px;}
  .process-con dl dt ul > li.main-pro {font-size:16px;}
  .process-con dl dt ul > li ul li {font-size:16px;}
  .re-notice .notice-txt {font-size:14px;}
  .process-con dl {gap:10px;}
  .process-con dl dt > ul {gap:10px;}
  .process-con dl dt ul > li > ul {margin-top:5px;}

}

/* ********************************************* *
* 470px
* ********************************************* */
@media screen and (max-width: 470px){
  .subtit {margin-bottom: 60px;}
  .subtit h6 {font-size: 36px;}
  .subtit p {font-size: 17px;}
  .subtit > span {margin-bottom: 10px;}

  .hoban_affiliate .subtab > ul > li {font-size: 16px;}

  .care-con {flex-direction: column; align-items: center;}
  .care-con .care-tit {width: 100%;}
  .careers .care-con strong {font-size: 21px;}
  .careers .care-con div p {font-size: 16px;}

  .detail-tit {height: 275px; font-size: 26px;}

  
  .out-circle {padding: 20px; width: 70%;}
  .circle-ball.ball1 {top: -80px; left: 50%; transform:translateX(-50%)}
  .circle-ball.ball2 {bottom: -50px; right: -55px; }
  .circle-ball.ball3 {bottom: -50px; left: -55px; }
  /* .circle-ball.ball1 {top: -55px; left: -55px; }
  .circle-ball.ball2 {top: -55px; right: -55px; }
  .circle-ball.ball3 {bottom: -55px; left: -55px;  }
  .circle-ball.ball4 {bottom: -55px; right: -55px;} */
  .circle-tit em {width: 50px;}
  .circle-tit p {font-size: 18px;}
  .circle-tit span {font-size: 14px;}
  .circle-con .circle-tit p {font-size:14px;}

  @supports (-webkit-touch-callout: none)  {
    .out-circle {width: 70%; aspect-ratio: 1 / 0.9;} 
    }

  .value-tit p br {display: none;}
  .value-tit p {font-size: 17px; font-weight: 400;}
  .value-tit h3 {font-size: 37px;}

  .future-con ul li .fu-txt p {font-size: 30px;}
  .future-con ul li em {font-size: 56px; font-weight: bolder; bottom: -5px;}

  .welfare-con .welfare {width: 100%;}
  .welfare-con .wel-box {row-gap: 20px;}

  .tabs {margin-top: 20px; height: 50px; width: 100%; overflow-x: scroll; display: flex; align-items: center;}
  .tabs ul {width: max-content;}
  .rec .rec_filter .btn_flex {gap: 10px;}

  .recview-tit > p {font-size: 22px;}
  .recview-tit .recview-detail {font-size: 14px;}
  .review-top {gap: 25px; padding: 30px 0;}

  .btn-wrap02 button {font-size: 15px; width: 135px; padding: 15px 0;}
  .recview-tit .recview-detail .day {flex-direction: column; align-items: center; gap: 0;}
  .recview-tit .recview-detail {gap: 15px;}

  .process .process-tit {font-size: 26px;}
  .process-con dl {gap: 20px;}

  .process .process-tit span {margin-bottom: 2px;}
  .process-con dl dd {font-size: 22px;}
  .re-notice {padding: 30px 20px;}
  .process-con dl {padding: 40px 10px;}

  .faqlist li .faq_title .q span {width: 85%;}

  .page-nav ul li {font-size: 17px;}
  .page-nav ul {gap: 25px;}

  .value-tit em {width: 55px; margin-bottom: 35px;}

  .growth {background-size: 21%; background-position: 20px 101%;}
  .core-value {background-size: 69%, 93%; background-position: 97% -9%, 0 77%;}
  .future-con ul li {height: 200px;}
  .future-con ul li .fu-txt span {font-weight: 400;}
  .win .value-tit p {font-weight: 400;}
  .value-con .value-sub-tit p br {display: none;}
  .value-con .value-sub-tit p {font-size: 22px;}
  .welfare-con .wel-tit strong {font-size: 30px;}
  .welfare-con {gap: 30px;}
  .tabs li a {padding: 10px 22px;}
  .process-con dl dt ul > li ul li {font-size: 16px;}
  .process-con dl dt ul > li > ul {margin-top: 10px;}
  .process-con dl dt > ul {gap: 25px;}
  .process-con dl dt ul > li.main-pro {font-size: 17px;}
  .process .process-wrap {row-gap: 30px;}

  .qnaform dl dd {font-size: 17px;}
  .welfare-wrap {gap: 80px;}
  .rec .rec_filter ul li p {font-size: 17px;}
  /* .apply_list li .top p {margin-left: 10px;} */

  .recview_content {width: auto;}
}

/* ********************************************* *
* 380px
* ********************************************* */
@media screen and (max-width: 380px){
  .detail-tit {font-size: 24px;}
  .out-circle {padding: 15px;}
  .circle-tit em {width: 33%; margin-bottom: 5px;}

  .out-circle {width: 77%;}
  .circle-ball.ball1 {top: -70px; left: 50%; transform:translateX(-50%)}
  .circle-ball.ball2 {bottom: -50px; right: -40px; }
  .circle-ball.ball3 {bottom: -50px; left: -40px; }
  .faqlist li .faq_title .q span {font-size: 17px;}
  .circle-ball {width:50%;}

}

/* ********************************************* *
* 320px
* ********************************************* */
@media screen and (max-width: 320px){
  .subtit h6 {font-size: 32px;}
  .subtit p {font-size: 16px;}
  .subtit > span {font-size: 20px;}

  .comp_li .txt h6 {font-size: 23px; margin-bottom: 10px;}
  .comp_li .txt dl dd {font-size: 14px;}
  .comp_li .txt dl dt {font-size: 14px;}
  .comp_li .txt > div {padding: 20px 0; height: 90px;}

  .circle-tit em {width: 32%;}
  .circle-tit p {font-size: 16px;}
  .circle-tit span {font-size: 13px;}
  .circle-ball {width: 60%;}

  .value-con .growht-con ul li {width: 100%;}

  .page-nav .page-btn i {font-size: 18px;}
}