/* 현대코퍼레이션 sub - 2024.07.29 */ /* subtit */ .subtit h6{font-size: 52px; line-height: 1.2; font-weight: 700; color: #fff; width: 30%;} .subtit > span{font-size: 22px; line-height: 1.2; color: var(--main-color); margin-bottom: 14px; display: inline-block;} .subtit p{color: #ccc; font-size: 20px; line-height: 1.5; font-weight: 400;} .subtit{margin-bottom: 120px; display: flex; width: 100%;} .subtit.none-flex{display: block; margin-bottom: 80px;} .subtit.none-flex h6{margin-bottom: 20px; width: 100%;} .flex{display: flex; } .ac{align-items: center;} .sb{justify-content: space-between;} .fe{align-items: flex-end;} label {cursor: pointer;} /* tab-large */ .tab-large ul{display: flex; padding: 10px; gap: 10px; background-color: #3d3d3d; border-radius: 100px;} .tab-large ul li{width: 50%; display: flex; align-items: center; justify-content: center; border-radius: 100px; cursor: pointer;} .tab-large ul li {font-weight: 400; padding: 22px 0; font-size: 20px; color: #aaa;} .tab-large ul li.on{background-color: var(--main-color-dark); color: #fff;} .tab-large ul li:hover:not(.on){background-color: #222;} /* company */ /* company - 계열사소개 */ .company .sub_header{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/sub_01.jpg) ; } .company.comp1 .company_title{display: block;} .company.business .company2_title{display: block;} .company .tab01_tit.tab_comp{display: block;} .company .tab_in_menu.tab_comp{display: block;} .comp1 .sel_tit.comp_1{display: block;} .company.comp3 .company3_title{display: block;} .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_li ul{display: flex; gap: 140px; flex-wrap: wrap;} .comp_li ul li{width: 100%; display: flex; gap: 70px; align-items: center;} .comp_li .imgwrap{position: relative; width:45%; aspect-ratio: 1.4 / 1 ; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg1.jpg) no-repeat center center; background-attachment: fixed; background-size: cover;} /* 철강 */ .comp_li .imgwrap.bs1{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg1.jpg);} /* 승용차량 */ .comp_li .imgwrap.bs2{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg2.jpg);} /* 상용차량 */ .comp_li .imgwrap.bs3{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg3.jpg);} /* 석유화학 */ .comp_li .imgwrap.bs4{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg4.jpg);} /* 전기전자 */ .comp_li .imgwrap.bs5{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg5.jpg);} /* 신재생에너지 */ .comp_li .imgwrap.bs6{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg6.jpg);} /* 선박 */ .comp_li .imgwrap.bs7{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg7.jpg);} /* 플랜트 */ .comp_li .imgwrap.bs8{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg8.jpg);} /* 건설장비 */ .comp_li .imgwrap.bs9{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg9.jpg);} /* 브랜드 */ .comp_li .imgwrap.bs10{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg10.jpg);} /* 농축산물 */ .comp_li .imgwrap.bs11{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg11.jpg);} /* 해상수출입 */ .comp_li .imgwrap.bs12{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg12.jpg);} /* 항공수출입 */ .comp_li .imgwrap.bs13{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg13.jpg);} /* 창고보관/육상운송 */ .comp_li .imgwrap.bs14{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg14.jpg);} /* 씨스퀘어 */ .comp_li .imgwrap.bs15{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg15.jpg);} .comp1 .comp_li .imgwrap {position: relative;width: 720px; padding-bottom: 520px; flex-shrink: 0;border-radius: 10px;overflow: hidden; background: none; aspect-ratio:unset;} .comp1 .comp_li .imgwrap img{position: absolute; width: 100%; height:100%; left:50%; top:50%; transform: translate(-50%, -50%) scale(1.05); object-fit: cover;} .comp_li .txt{flex: 1; display: flex; flex-direction: column; gap: 46px;} .comp_li .txt h6{font-weight: 600; font-size: 44px; line-height: 1.3; display: flex; align-items: center;} .comp_li .txt h6 .link_btn{margin-left: 6px; display: inline-block; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;} .comp_li .txt h6 .link_btn img{width: 28px; opacity: .4;} .comp_li .txt h6 .link_btn:hover img{opacity: 1;} .comp_li .txt{ font-weight: 300; font-size: 20px; line-height: 1.6;} .comp_li .txt dl dt, .comp_li .txt dl dd{height: 62px; line-height: 62px; box-sizing: border-box; padding-left: 26px; font-weight: 300; font-size: 18px;} .comp_li .txt dl dt{width: 24%;} .comp_li .txt dl dd{width: 75%; } .comp_li .txt dl{border-top: 1px solid #aaa; display: flex; width: 100%;} .comp_li .txt dl:last-child{border-bottom: 1px solid #aaa;} /* 직무소개-디테일 */ .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-weight: 500;} .con2 {margin-top: 80px;} .detail-tit1 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg4.jpg) no-repeat center/cover;} .detail-tit2 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg2.jpg) no-repeat center/cover;} .detail-tit3 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg03.jpg) no-repeat center/cover;} .detail-tit4 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg4.jpg) no-repeat center/cover;} .detail-tit5 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg5.jpg) no-repeat center/cover; background-position: 50% 28%;} .detail-tit6 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg06.jpg) no-repeat center/cover; background-position: 50% 28%;} .detail-tit7 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg7.jpg) no-repeat center/cover; background-position: 50% 28%;} .detail-tit9 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg8.jpg) no-repeat center/cover; background-position: 50% 40%;} .detail-tit10 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg9.jpg) no-repeat center/cover; background-position: 50% 66%;} .detail-tit11 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg010.jpg) no-repeat center/cover; background-position: 50% 49%;} .detail-tit12 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg11.jpg) no-repeat center/cover; background-position: 50% 61%;} .detail-tit13 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg012.jpg) no-repeat center/cover; background-position: 50% 78%;} .detail-tit14 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg13.jpg) no-repeat center/cover; background-position: 50% 78%;} .detail-tit15 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg14.jpg) no-repeat center/cover; background-position: 50% 78%;} .detail-tit16 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg15.jpg) no-repeat center/cover; background-position: 50% 78%;} .detail-extra1 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/engineer.jpg) no-repeat center/cover; background-position: 50% 36%;} .detail-extra2 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/constru.jpg) no-repeat center/cover; background-position: 50% 36%;} .detail-extra3 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg4.jpg) no-repeat center/cover;} .detail-extra4 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/front.jpg) no-repeat center/cover;} .detail-extra5 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/food.jpg) no-repeat center/cover;} .detail-extra6 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/spa.jpg) no-repeat center/cover;} .detail-extra7 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/facility.jpg) no-repeat center/cover;} .detail-extra8 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/leasing.jpg) no-repeat center/cover;} .detail-extra9 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/golf1.jpg) no-repeat center/cover;} .detail-extra10 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/golf2.jpg) no-repeat center/cover;} .detail-extra11 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/golf3.jpg) no-repeat center/cover;} .detail-extra12 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/golf4.jpg) no-repeat center/cover;} .detail-extra13 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/golf5.jpg) no-repeat center/cover; background-position: 50% 80%;} .detail-extra14 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/golf6.jpg) no-repeat center/cover;} .detail-extra15 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/golf7.jpg) no-repeat center/cover;} .detail-extra16 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/detail-bg12.jpg) no-repeat center/cover;} .detail-extra17 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/trading.jpg) no-repeat center/cover;} .detail-extra18 {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/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);} .people .sub_header{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/sub_02.jpg); } .people .hr_title {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 */ .recruit .sub_header{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/sub_03.jpg); } .recruit .recruit_title{display: block;} .recruit .tab01_tit.tab_rec{display: block;} .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 */ .rvtit{display: flex;} /* .review-top {padding: 40px 0; border-top: 2px solid var(--main-color); border-bottom: 1px solid #444;} */ .review-top {padding: 40px; border-radius: 10px; background-color: #333;} .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; width: max-content;} .recview-tit {display: flex; flex-direction: column; 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; font-size: 18px; color: #999;} .recview-tit .recview-detail ul li:first-child::after {content: none;} .recview-tit .recview-detail ul li::after {content:''; display: block; width: 3px;height: 3px; border-radius: 50%; background: #666;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: #999; font-size: 18px;} .recview-tit > p {font-size: 32px; color: #fff; font-weight: 600;} .recview_content {padding: 50px 0; width: 55vw; margin: 0 auto; } .recview_content p img{clip-path: inset(2px);} .btn-wrap02 {display: flex; gap: 16px; justify-content: center; padding-top: 50px; } .btn-wrap02 button {padding: 18px 0px; width: 170px; font-size: 18px; border-radius: 50px !important;} .btn-wrap02 .apply-btn {border:1px solid var(--main-color); color: #fff; background-color: var(--main-color);} .btn-wrap02 .list-btn { color: #555; border: 1px solid #ddd; color: #f5f5f5;} /* 체크 */ .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;} .form input[type=text], .form input[type=password]{padding-left: 17px; padding-right: 17px; 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{ padding-top: 30px;} */ .rec form ul li{ padding-top: 30px;} .rec form input, .rec form input, .rec form select {width: 100%;} .rec{display: flex; gap: 60px;} .rec .rec_filter{width: 420px; background-color: transparent; border: 1px solid #666; border-radius: 10px; box-sizing: border-box; padding: 30px; height: 100%; position: sticky; top: 116px; color: #fff;} .rec .rectit{display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #444;} .rec .rectit p{font-size: 26px; font-weight: 600; } .rec .rectit button{color: #999; font-size: 15px; display: flex; align-items: center;} .rec .rectit button span{height: 16px; width: 16px; display: inline-block; margin-left: 2px;} .rec .searchbox{position: relative; height: 54px; border-radius: 6px; background-color: #3d3d3d;} .rec .searchbox input[type=text]{border: none; width: calc(100% - 50px); height: 100%; padding-right: 0; background-color: transparent; color: #fff;} .rec .search_btn{position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 14px;} .rec .search_btn img{filter: brightness(150%);} .rec .searchbox input::placeholder{color: #888;} .rec .rec_filter .btn_flex{gap: 10px 8px; flex-wrap: wrap;} .rec .rec_filter .btn_flex div{padding: 10px 16px ; font-weight: 400; border-radius: 50px; border: 1px solid #888; line-height: 1; font-size: 16px; cursor: pointer;} .rec .rec_filter .btn_flex div:hover{ color: var(--main-color-light); border-color: var(--main-color-light);} .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, .rec .rec_filter ul li:nth-child(2){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: #ddd; font-size: 16px;} .rec .rec_filter ul li p{font-size: 18px; line-height: 1; margin-bottom: 14px; font-weight: 500;} .rec_list{width: calc(100% - 480px);} .rec_list .total{padding-bottom: 12px;} .rec_list .total p{font-size: 18px; font-weight: 500; color: #eee;} .rec_list .total p span{color: var(--main-color-light); font-weight: 800;} .apply_list li + li{margin-top: 16px;} .apply_list li{cursor: pointer;} .apply_list li:hover > div{border-color: var(--main-color); outline: 1px solid var(--main-color); box-shadow: 0 0 30px #5f6f86; background-color: #fff;} .apply_list li:hover .top p, .apply_list li:hover .bot p span, .apply_list li:hover .bot p.bay {color: #888;} .apply_list li:hover em{color: #222;} .apply_list li > div{ border:1px solid #666; padding:30px; border-radius: 10px; background: #2a2a2a; transition: all .15s; display: flex; align-items: center;} .apply_list li > div .info{width: calc(100% - 60px);} .apply_list li > div .go{display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background-color: #ffffff10; transition: all .15s;} .apply_list li > div .go img{width: 20px; opacity: .4;} .apply_list li:hover > div .go{background-color: var(--main-color);} .apply_list li:hover > div .go img{opacity: 1;} .apply_list li .top{display: flex; align-items: center;} .apply_list li .top b{ font-weight: 600; padding:8px 14px; line-height: 1; border-radius: 30px; background: var(--main-color); color: #fff;} .apply_list li .top b span{ font-weight: inherit;} .apply_list li .top p{ margin-left: 12px; color: #ccc; font-weight: 600; font-size: 18px;;} .apply_list li .top b.done {background-color: #bbb; color: #ccc;} .apply_list li em{ font-size: 23px; line-height: 1.3 ; margin:15px 0; display: block; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #fff; font-weight: 600;} .apply_list li .bot p {font-weight: 300;} .apply_list li .bot p span{color: #ccc;} .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: 3px;height: 3px; border-radius: 50%; background: #ccc;position: absolute;left:0;top:50%;transform: translateY(-50%);} .apply_list li .bot p.bay{color: #ccc; margin-top: 2px;} /* 지원가이드 */ .guide .sub_header{background-image: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/sub_01.jpg); } .guide .guide_title{display: block;} .guide .tab01_tit.tab_guide{display: block;} .guide .tab_in_menu.tab_guide{display: block;} /* faq */ .guide2 .sel_tit.guide_2{display: block;} /* .faqlist{border-bottom: 1px solid #eee; border-top: 1px solid #eee;} */ /* .faqlist{font-size: 28px;font-weight: 400; box-sizing: border-box; padding: 20px 50px; border-radius: 10px; background-color: rgba(0,0,0,.5); backdrop-filter: blur(20px); z-index: 2;} */ .faqlist{ border-top: 2px solid #ddd; border-bottom: 2px solid #ddd;} /* .faqlist li{padding: 30px 20px; border-bottom: 1px solid #444;} */ .faqlist li{border-bottom: 1px solid #444;} .faqlist li .faq_title{padding: 30px 20px;} .faq_answer{margin: 30px 20px;} .faqlist li.turn .faq_title .q{color: #fff;} .faqlist li .faq_title.on .q{color: #fff;} .faqlist li:last-child{border-bottom: none;} .faqlist li .faq_title{cursor: pointer;} .faqlist li .faq_title .q{position: relative; color: #bbb; font-weight: 600; font-size: 22px; padding-left: 50px;} .faqlist li .faq_title .q::before{ content: 'Q'; color: #fff; font-weight: 700; display: inline-block; position: absolute; font-family: 'SuseongDotum';color: #fff; font-size: 32px; left: 0; top: -7px;} .faq_answer{display: none; color: #f0f0f0;font-weight: 300; padding:30px 50px; background: rgba(0,0,0,.5); border-radius: 8px; font-size: 18px; line-height: 1.5;} /* .faqlist li .faq_title + .faq_answer{margin-top: 20px} */ .faqlist li .faq_title + .faq_answer{margin-top: 0 !important} /* .faqlist li .faq_title .q::after{content: ''; display: inline-block; position: absolute; width: 8px; height: 8px; right: 0; top: 20%; border-top: 1px solid #888; border-right: 1px solid #888; transform: rotate(-45deg); transition: all .2s;} */ /* .faqlist li.turn .faq_title .q::after{transform: rotate(135deg); border-color: var(--main-color);} */ .page-nav {display: flex; align-items: center; gap: 60px; justify-content: center; margin-top: 60px;} .page-nav ul {display: flex; align-items: center; gap: 28px;} .page-nav ul li {border: none; color: #d7d7d7; font-size: 18px; cursor: pointer; font-weight: 300;} .page-nav ul li.page-on {color: #f0f0f0; 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: #f0f0f0;} .page-nav .page-btn i {font-size: 20px; display: block; color: #ddd;} .page-nav .page-btn.btn-on i {cursor: pointer; color: #f0f0f0;} /* 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(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/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(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/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(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/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 */ /* company - 회사소개 (계열사 소개) */ .com-li {padding: 28px 16px; border-top: 1px solid #666; border-bottom: 1px solid #666; } .com-li p{font-size: 24px; font-weight: 500; margin-bottom: 20px; line-height: 1;} .com-li ul{display: flex; gap: 16px; flex-direction: row; flex-wrap: wrap;} .com-li ul li{width: calc((100% - 16px) / 2); width: max-content; padding: 12px 22px; line-height: 1; border-radius: 30px; border: 1px solid #ccc; color: #fff; font-size: 18px;} /* business - 회사소개 (사업소개) */ .subtab > ul {width: 100%; display: flex; gap: 8px; background-color: #3d3d3d; border-radius: 50px; padding: 8px; position: sticky; top: 10px;} .subtab > ul[hidden]{display:none} /* .business .subtab > ul > li {width: calc((100% - 64px) / 9); text-align: center; padding: 12px 24px; border-radius: 50px; border: 1px solid transparent; font-size: 18px; font-weight: 500; color: #aaa; cursor: pointer; min-width: max-content;} */ .business .subtab > ul > li { text-align: center; padding: 12px 24px; border-radius: 50px; border: 1px solid transparent; font-size: 19px; font-weight: 500; color: #aaa; cursor: pointer; width: 100%;} .business .subtab > ul > li.on {border-color: var(--main-color); color: #fff; background: var(--main-color);} .big-tab ul{display: flex; align-items: center;margin-bottom: 40px; } .big-tab ul li{width: calc(100% / 4); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 28px; padding: 26px 0; font-weight: 500;border-bottom: 2px solid #fff;transition: all .15s; opacity: .4;} .big-tab ul li.on{color:var(--main-color-light); border-color: var(--main-color-light); opacity: 1; font-weight: 600;} .big-tab ul li:hover:not(.on){opacity: 1;} .business .comp_li { margin-top: 50px;} .business .subtab > ul > li:hover:not(.on){background-color: #222;} .business .comp_li ul{display: block;} .business .comp_li ul.tab-content[hidden]{display:none} .business .comp_li > ul > li + li{margin-top: 80px; padding-top: 80px; border-top: 2px solid #888;} .business .comp_li ul li{display: block;} /* .business .comp_li ul li .left{width: 360px;} */ .business .comp_li ul li .left{margin-bottom: 50px;} .business .comp_li ul li .left p{font-size: 40px; font-weight: 600; } .business .sel_tit.comp_2 {display: block;} .business .comp_li ul li .left span{color: var(--main-color-light);text-transform: uppercase; font-size: 24px;} .business .comp_li ul li .right{width: 100%;} .business .comp_li ul li .imgwrap{width: 100%; aspect-ratio: 4.5 / 1;} .business .comp_li .txt{ margin-top: 60px; } .business .comp_li .txt p{line-height: 1.6; color: #eee;} .business .comp_li .txt p + p{margin-top: 16px;} .business .comp_li .txt{padding-top: 0; gap: 0;} .business .comp_li .txt > div{display: flex; width: 100%; padding: 60px 30px;} .business .comp_li .txt h6{font-size: 32px; width: 380px; flex-shrink: 0; display: block;} .business .comp_li .txt > div:last-child{padding-bottom: 0;} .business .comp_li .txt > div + div{border-top: 1px solid #444;} .business .comp_li ul.pd-list{display: flex; gap: 16px; width: 100%;} .business .comp_li ul.pd-list > li{width: calc((100% - 48px) / 4);background-color: #333; padding: 30px; border-radius: 10px; } .pd-list span{font-size: 22px; font-weight: 600; padding-bottom: 16px; display: block; margin-bottom: 16px; border-bottom: 1px solid #494949; color: var(--main-color-light);} .pd-list span b{font-size: .8em; font-weight: 600;} .pd-list ul li{color: #ddd; font-size: 18px;} .pd-list ul li:before{top: 14px;} .pd-list span i{font-size: .8em; opacity: .5; font-weight: 300; display: block; color: #fff;} .business .comp_li ul.pd-list.two > li{width: calc((100% - 16px) / 2);} .business .comp_li ul.pd-list.th > li{width: calc((100% - 32px) / 3);} .business .comp_li ul.pd-list.one > li{width: 100%;} .business .comp_li ul.pd-list.one span{margin-bottom: 0; border-bottom: none; padding-bottom: 12px;} /* 채용절차 */ .guide1 .sel_tit.guide_{display: block;} .process.mb {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: 16px 20px; border-radius: 22px; background-color: #2f2f2f;} /* .process .process-wrap::before {content: ""; display: block; height: 1px; width: 88%; border-top: 1px dashed #ececec; 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: calc((100% - 150px) / 6); aspect-ratio: 1; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 50px inset #00A0E960; background-color: #00A0E920;} .process .process-wrap .circle:after{content:''; display: block; position: absolute; right: -25px; top: 50%; transform: translateY(-50%); width: 15px; height: 20px; background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/arrow2-right.svg) no-repeat center; background-size: contain; opacity: .5;} .process .process-wrap .circle:last-child:after{display: none;} .process .process-wrap .circle i {width: 28%; margin-bottom: 22px;opacity: .8;} .process .process-wrap .circle:last-child i{width: 32%;} /* .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: 3px;} .circle-txt span {font-size: 17px; font-weight: 300; opacity: .8;} .circle-txt strong {font-size: 22px; font-weight: 500;} .con-top {border-top: 2px solid #ccc;} .con-bot {border-bottom: 2px solid #ccc !important;} .process-con {margin-top: 100px;} .nurture .process-con--first {margin-top: 30px;} .process-con dl {display: flex; align-items: flex-start; padding: 60px 30px; border-bottom: 1px solid #444; align-items: center;} .process-con dl dd {width: 360px; font-size: 32px;} .process-con dl dd span{display: block; font-size: 18px; font-weight: 500; color: var(--main-color-light); margin-bottom: 6px;} .process-con dl dt {width: calc(100% - 360px);} .process-con dl dt > ul {display: flex; flex-direction: column; gap: 30px;} .process-con dl dt ul > li.main-pro {font-size: 20px; font-weight: 400; color: #eee; line-height: 1.5;;} /* .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: #ccc; text-indent: 5px; position: relative; text-indent: 0;} .process-con dl dt ul > li > ul { margin-top: 15px; display: flex; flex-direction: column; gap: 10px;} .process-con dl dt ul > li > ul.list > li{padding-left: 14px;} .process-con dl dt ul > li > ul.list > li::before {content: ""; width: 4px; height: 4px; background: #888; display: inline-block; position: absolute; left: 5px; top: 8px; color: #ccc; margin-right: 5px;} .re-notice {padding: 40px 30px; border-radius: 10px; background-color: #3d3d3d; margin-top: -80px;} .re-notice h3 {font-size: 18px; color: #fff; margin-bottom: 15px; display: flex; align-items: center; gap: 3px; font-weight: 500;} .re-notice .notice-txt {font-size: 16px; color: #ccc; 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: 10px; background-color: #2a2a2a; border: 1px solid #666; transition: all 0.2s; box-sizing: border-box;} .welfare-con .welfare .welfare-icon { width: 95px; height: 75px;display: flex; align-items: center; justify-content: center; border-radius: 20px; margin: 0 auto 24px;} .welfare-con .welfare .welfare-icon i {width: 55px; display: inline-block;} .welfare-con .welfare .wel-txt {display: flex; flex-direction: column; gap: 14px;} .welfare-con .welfare .wel-txt p {font-size: 22px; font-weight: 600; color: var(--main-color-light); ;} .welfare-con .welfare .wel-txt p span{display: block; text-align: left;} .welfare-con .welfare .wel-txt span {font-size: 17px; font-weight: 300; color: #ccc;} .welfare-con .welfare .wel-txt p span + span{margin-top: 4px;} .welfare-con .welfare:hover {box-shadow: 0 4px 16px var(--main-color); border:1px solid var(--main-color); outline: 1px solid var(--main-color); background-color: #191919;} /* 인재상 */ .people-wrap {padding-bottom: 70px;} .out-circle {position: relative; width: 460px; aspect-ratio: 1 / 1; border-radius: 100%; border: 1px solid #FFC995; padding: 40px; margin: 0 auto;} .out-circle .inner-circle {border-radius: 100%; width: 100%; height: 100%; background: linear-gradient(143deg, #fcc42b, #fd9f1b, #fe7f0f, #ff7d00);} .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: #FFC995;} .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: -90px; left: -95px; border:2px solid var(--main-color);} .circle-ball.ball2 {top: -90px; right: -95px; border: 2px solid #FCC42B;} .circle-ball.ball3 {bottom: -90px; left: -95px; border: 2px solid #FCC42B; } .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;} .circle-tit span {font-size: 20px; color: #555; font-weight: 500;} .talent {margin-top: 120px; display: flex; align-items: center; gap: 90px;} .talent .img{width: 45%; flex-shrink: 0;} .talent .txt {flex: 1;} .talent .txt h6{position: relative; font-size: 32px; font-weight: 600; margin-bottom: 30px;} .talent .txt ul{display: flex; flex-direction: column; padding: 50px; border-radius: 10px; background: #3d3d3d; position: relative;} .talent .txt ul:after{content:'WHO WE WANT'; font-size: 80px; font-weight: 800; font-family: 'SuseongDotum'; color: #3d3d3d; display: block; position: absolute;right: 0; top: -80px; width: max-content; z-index: -1;} .talent .txt ul li{display: flex; gap: 30px; padding: 36px; border-radius: 6px; background-color: #333; align-items: center;} .talent .txt ul li + li{margin-top: 10px;} .talent .txt ul span,.talent .txt ul i{display: block;} .talent .txt ul div{width: 200px; border-right: 2px solid #3d3d3d;} .talent .txt ul i{color: var(--main-color-light); font-size: 25px; line-height: 1.3;} .talent .txt ul span{color: #ddd; font-weight: 300; font-size: 19px; margin-top: 10px;} .talent .txt ul p{font-size: 20px; font-weight: 300; line-height: 1.5;} .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: 215px;} .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(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/value.jpg) no-repeat center/cover;} .value-tabs .tabs {margin: 0 !important;} /* 핵심가치 */ .con2 {overflow: hidden;} .core-value {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/main-bg.png), url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/main-bg02.png); background-repeat: no-repeat; background-size: 37%, 50%; background-position: 100% -12% ,0 85%;} /* .value-bg {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/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(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/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(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/value02-2.jpg); background-size: cover; background-position: center center; transform: translateZ(0); will-change: transform;} */ .value-inner {padding: 150px 0;} .value-inner:last-child {padding-bottom: 0;} .growth {display: flex; justify-content: space-between; background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/main-bg03.png) no-repeat; background-size: 9%; background-position: 0 107%; } .value-tit {display: flex; flex-direction: column; } .value-tit em {display: block; width: 75px; margin-bottom: 50px;} .value-tit h3 {font-size: 60px; 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; margin-top: 200px;} .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) / 4); padding: 25px; border: 1px solid #ffcd9b; border-radius: 10px; display: flex; flex-direction: column; gap: 15px; transition: all 0.2s; background-color: #fff;} .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(2), .value-con .growht-con ul li:nth-child(4), .value-con .growht-con ul li:nth-child(5), .value-con .growht-con ul li:nth-child(7) {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;} .value-con .growht-con ul li div p {font-size: 20px;} .value-con .growht-con ul li div span {font-size: 16px; color: #999; 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(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/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%; background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/win-bg.png) no-repeat center/cover;transform: translateZ(0); will-change: transform;} .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: #ff7d00;} .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;} .future-con {margin-top: 150px; 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(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/growth1.jpg) no-repeat center/cover; grid-column-start: 2;} .future-con ul li:nth-child(2) {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/youth1.jpg) no-repeat center/cover; grid-column-start: 1; margin-top: -100px;} .future-con ul li:nth-child(3) {background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/stability1.jpg) no-repeat center/cover; margin-top: 200px;} .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;} /* 직급체계 */ .grade-wrap{display: flex;;gap: 70px;} .grade-wrap > div{width: calc(50% - 35px); } .grade-wrap .grade{background-color: #2a2a2a; padding: 40px; border-radius: 12px; aspect-ratio: 1.8 / 1;} .grade-wrap .txt{margin-top: 70px;} .grade-wrap .txt p{font-size: 20px; font-weight: 300; margin-top: 0; line-height: 1.5;} .grade-wrap .txt h6{font-size: 34px; font-weight: 600; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid #444;} .grade-wrap .txt > div + div{margin-top: 20px; padding-top: 20px; border-top: 1px solid #555;} .grade-wrap + .grade-wrap{margin-top: 60px;} /* 인재육성 */ .people .process-con dl{align-items: flex-start;} .people .process-con dl dt ul > li.main-pro .iconwrap{aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border-radius: 6px; background-color: rgba(0,0,0,.2); margin: 0 auto 28px; width: 100px;} .people .process-con dl dt ul > li.main-pro .iconwrap img{width: 55px; height: 55px;} .people .process-con dl dt ul > li.main-pro .iconwrap i{font-family: 'Pretendard' !important;} /* .br-list.br-round > li{border-radius: 50%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex-direction: column;} */ /* .people .process-con dl dt ul.br-round > li.main-pro .iconwrap{background-color: transparent; margin: 0 auto 12px;} */ .people .process-con dl dt ul.br-list > li{background: linear-gradient( #00A0E915 0%, #232525 100%);;} /* .people .process-con dl dt ul.br-round > li.main-pro .iconwrap img{width: 70px; height: 70px;} */ .service01_table_box .p_cate{width: 150px; min-width: 80px; box-sizing: border-box;} .fs_plus{font-size: 1.4em !important;} .cl8 .service01_info_box{border: none;} .service01_table {width: 100%; word-break: keep-all; border: 1px solid #666;} .service01_table > thead > tr > th {font-size: 16px; font-weight: 500; text-align: center; padding: 14px; border-bottom: 1px solid #666; background-color: #00A0E980; color: #fff; border-top: none;} .service01_table tr > td, .service01_table tr > th {font-size: 16px; padding: 14px; text-align: center; vertical-align: middle; background-color: transparent; color: #eee; font-weight: 400;} .cl7 .service01_table > thead > tr > th, .cl7 .service01_table > tbody > tr > td, .cl7 .service01_table tr > th {text-align: left; padding: 14px 18px;} .tc-table.service01_table td,.tc-table.service01_table th{text-align: center !important;} .bg-tr{background-color: #3d3d3d;} .service01_table > tbody > tr {border-bottom: 1px solid #666;} .service01_table > tbody > tr > th {padding: 14px; border-right: 1px solid #666; text-align: center; vertical-align: middle;} .rowspan-td {border-right: 1px solid #666;} .cl1 .service01_table > thead > tr > th, .cl1 .service01_table > tbody > tr > td{word-break: break-all; white-space: nowrap;} /* 비전/핵심가치 */ /* .wrap_padding.gradient{background: linear-gradient(#00A0E930 0%, #222 15%, #222 100%);} */ /* .valuebox .imgbox{width: 100%;padding: 130px 0; text-align: center; background-color: #666; background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/value-bg01.png) no-repeat top center; background-size: cover; background-attachment: fixed; display: flex; align-items: center; justify-content: center; gap: 20px; flex-direction: column; position: relative; margin-bottom: 280px;} .valuebox .imgbox::after{content:''; position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(to top, #0093D660, transparent);; width: 100%; height: 100%; opacity: 0; transition: all .15s;} .valuebox .imgbox:hover:after{opacity: 1;} .valuebox .imgbox i{font-size: 24px; color: var(--main-color-light); font-weight: 700 !important; display: block; opacity: .8 !important; position: relative ; z-index: 2;} .valuebox .imgbox p{font-size: 28px; font-weight: 500; line-height: 1.5; text-shadow: 0 0 16px rgba(0,0,0,.2);position: relative ; z-index: 2; opacity: .3;} .valuebox .imgbox span{display: block; font-size: 20px; font-weight: 300; line-height: 1.6; color: #ffffff90; position: relative ; z-index: 2;} .valuebox .imgbox .flow-txt{bottom: -150px;} */ .valuebox .imgbox{width: 100%;padding: 130px 0 140px; text-align: center;; display: flex; align-items: center; justify-content: center; gap: 18px; flex-direction: column; position: relative; margin-bottom: 260px; background: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/value-bg01.jpg) no-repeat top center; background-size: cover; background-attachment: fixed; margin-left: auto; margin-right: auto;} .valuebox .imgbox::after{content:''; position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(to top, #0093D675, transparent);; width: 100%; height: 100%; opacity: 0; transition: all .15s;} .valuebox .imgbox:hover:after{opacity: 1;} .valuebox .imgbox > i{font-size: 28px; color: var(--main-color-light); font-weight: 700 !important; display: block; position: relative ; z-index: 2;} .valuebox .imgbox p{font-size: 32px; font-weight: 500; line-height: 1.6; text-shadow: 0 0 16px rgba(0,0,0,.2);position: relative ; z-index: 2; color: #ffffff88;} .valuebox .imgbox p i{} .valuebox .imgbox span{display: block; font-size: 22px; font-weight: 300; line-height: 1.6; color: #ffffff90; position: relative ; z-index: 2;} .valuebox .imgbox .flow-txt{bottom: -150px;} .value-tit{font-size: 36px; font-weight: 600; color: var(--main-color-light);margin-bottom: 30px;} .value-tit p{color: #fff; opacity: .8; font-size: 26px; margin-top: 10px; font-weight: 400; } /* .valuebox .txtbox > ul {margin-top: 30px; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc;} */ .valuebox .txtbox > ul {} /* .valuebox .txtbox > ul > li{ display: flex; gap: 70px; } */ .valuebox .txtbox > ul > li{ display: flex; gap: 26px; flex-direction: column;} .valuebox:not(.bd-xl):not(.spititbox) .txtbox > ul > li:nth-child(1){display: none;} /* .valuebox .txtbox > ul > li > div{padding: 80px 0;} */ .valuebox .txtbox > ul > li > div{} .valuebox .txtbox > ul > li > div.main-bg-d{text-align: center; background-color: #191919;} .valuebox .txtbox > ul > li > div.main-bg-d p{font-size: 32px; margin-bottom: 10px;} .valuebox .txtbox > ul > li > div.main-bg-d i{font-size: 26px;} .valuebox .txtbox .right .top{text-align: center; position: relative;} /* .valuebox .txtbox .right .top p{font-size: 36px; padding-bottom: 16px; border-bottom: 2px solid var(--main-color); max-width: 500px; margin: 0 auto 16px;} */ .valuebox .txtbox .right .top p{font-size: 34px; margin: 0 auto 8px;} .valuebox .txtbox .right .top i{font-size: 26px;} .valuebox .txtbox .right .top:after {content: ''; display: block; margin: 28px auto; position: relative; height: 80px; width: 3px;background: linear-gradient(to bottom, var(--main-color) , transparent); border-radius: 3px; opacity: .8;} .valuebox .txtbox .right .list-circle{display: flex; justify-content: center; align-items: center;margin: 0 auto; position: relative; gap: 60px; position: relative; text-align: center;} .valuebox .txtbox .right .list-circle i{width: calc((100% - 450px) / 3); border: 2px solid var(--main-color-dark); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border-radius: 50%; aspect-ratio: 1; opacity: 1; background-color: #191919; position: relative; font-size: 24px; z-index: 2;} .valuebox .txtbox .right .list-circle:before{ width: 100%; content:''; position: absolute; display: block; height: 2px; border-top: 2px dashed #41464F; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;} .valuebox .txtbox .right .list-circle i:nth-child(2):before{content: ''; display: block; position: absolute; width: 115%; height: 115%; border-radius: 50%;opacity: .3; ; z-index: 1; box-shadow: 0 0 50px #00A0E990;} .valuebox .txtbox .right .list-circle i span{font-size: 18px; opacity: .5; font-weight: 400;} .valuebox .txtbox .right .list-circle b{font-weight: 500;} .valuebox .txtbox .right .br-list li{background: linear-gradient( #00A0E915 0%, #222 100%); padding: 40px 30px; text-align: center;} .valuebox .txtbox .right .br-list li p{font-size: 26px; margin-top: 5px;} .valuebox .txtbox .right .br-list li span{font-size: 24px; font-weight: 600; color: var(--main-color-light); opacity: .8;} /* .valuebox .txtbox > ul > li:last-child{padding-bottom: 0;} */ /* .valuebox .txtbox > ul > li + li{border-top: 1px solid #444;} */ .valuebox .txtbox > ul > li + li{margin-top: 80px;} .valuebox .txtbox > ul > li .left{width: 300px; flex-shrink:0; display: flex; flex-direction: column-reverse; } /* .valuebox .txtbox .left span{color: var(--main-color-light); font-size: 32px; line-height: 1.3;} .valuebox .txtbox .left p{color: #fff;font-weight: 500;font-size: 26px;margin-top: 10px;} */ .valuebox .txtbox .left p, .valuebox .txtbox.value-li > ul > li .right .tit{color: #fff; font-size: 36px; line-height: 1.3;} .valuebox .txtbox .left span{color: #fff;font-weight: 500;font-size: 22px;margin-top: 5px; opacity: .5;} .valuebox .txtbox .right{width: 100%; padding: 80px; border-radius: 10px; border: 1px; background-color: #191919;} .valuebox .txtbox .right p{font-size: 28px; font-weight: 500; line-height: 1.5;} .valuebox .txtbox .right i{font-size: 24px; font-weight: 400; opacity: .5; display: block;} .valuebox .txtbox .right .list {margin-top: 16px;} .valuebox .txtbox .right .list i{ margin-top: 8px; opacity: .8; position: relative; padding-left: 18px;} .valuebox .txtbox .right .list i:before{top: 14px;} /* .valuebox .txtbox .value-list{margin-top: 50px; width: 100%; background-color: #3d3d3d; border-radius: 10px; padding: 50px; } */ .valuebox .txtbox .value-list{margin: 0 auto; } .valuebox .txtbox .value-list{display: flex; justify-content: space-between;} /* .valuebox .txtbox .value-list li{width: calc((100% - 40px) / 3); display: flex; flex-direction: column; gap: 6px; padding: 40px; text-align: center; border-radius: 6px; background-color: #555; height: max-content;} */ .valuebox .txtbox .value-list li{width: calc((100% - 120px) / 3); display: flex; flex-direction: column; gap: 12px; padding: 40px; text-align: center; justify-content: center; border-radius: 6px; background-color: var(--main-color-dark); aspect-ratio: 1; border-radius: 50%;} /* .valuebox .txtbox .value-list li b{font-weight: 600; font-size: 24px; color: var(--main-color-light);} */ .valuebox .txtbox .value-list li b{font-weight: 600; font-size: 28px; color: #fff;} .valuebox .txtbox .value-list li span{font-weight: 300; font-size: 22px; color: #fff; opacity: .8;} .valuebox .txtbox .value-list li i{margin: 0 auto 15px; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; opacity: .8;} .valuebox .txtbox .value-list li i img{width: 80%;} .valuebox .txtbox .value-list li:first-child i img{width: 70%;} .valuebox + .valuebox {margin-top: 140px;} /* .valuebox .txtbox.value-li > ul{padding: 30px 0;} */ /* .valuebox .txtbox.value-li > ul > li{gap: 40px; } */ .valuebox .txtbox.value-li > ul > li{gap: 60px; background-color: #191919; padding: 0 80px; border-radius: 10px; flex-direction: row; padding: 80px;} .valuebox .txtbox.value-li > ul > li + li{margin-top: 20px;} .valuebox .txtbox.value-li .left i img{margin: 0 auto;} .valuebox .txtbox.value-li > ul > li .left{display: block;width: 150px;} .valuebox .txtbox.value-li > ul > li .right{padding: 0;} .valuebox .txtbox.value-li > ul > li .right .tit{color: var(--main-color-light);} .valuebox .txtbox.value-li > ul > li .right .tit span{font-size: 28px; font-weight: 600;} .valuebox .txtbox.value-li > ul > li .right .tit p{margin-bottom: 0; font-size: 20px;} .valuebox .txtbox.value-li > ul > li .right .flex{display: flex;gap: 20px; } .valuebox .txtbox.value-li > ul > li .right .flex i{opacity: 1; font-size: 20px;} .valuebox .txtbox.value-li > ul > li .right .flex > i{margin-top: 20px; padding-top: 20px; border-top: 1px solid #555; display: block; opacity: 1;} .valuebox .txtbox.value-li > ul > li .right .flex > i:first-child{width: 35%; font-size: 24px; line-height: 1.5;} .valuebox .txtbox.value-li > ul > li .right .flex > i:last-child{width: 65%; font-weight: 300; color: #eee; } .valuebox .txtbox.value-li > ul > li .right .flex > i > i + i{margin-top: 16px;} .value-li-img{max-width: 90%; margin: 0 auto;} /* 현대정신 */ .spirit-con{padding-top: 60px;} .spirit{padding: 120px 0; background: #191919; position: relative; background: linear-gradient(to bottom, #191919 70%, #19191950 100%);} .spirit:after{content: 'HYUNDAI SPIRIT';font-size: 120px; font-weight: 800; font-family: 'SuseongDotum'; color: #191919; display: block; position: absolute; right: 160px; top: -120px; width: max-content; z-index: -1;} .spirit > div{display: flex; gap: 100px; align-items: center; position: relative;} .spirit > div .img{ width: 600px;border-radius: 10px; overflow: hidden;} .spirit > div .img { filter: brightness(70%);} .spirit > div .txt{flex: 1; width:100%; overflow: hidden;} .spirit > div .quot{position: relative; } .spirit > div .quot em{display: block; padding-bottom: 40px;} .spirit > div .quot em img{width: 50px;} .spirit > div .quot p{font-size: 38px; font-weight: 300; line-height: 1.5; letter-spacing: -0.02em;} /* .spirit > div .quot p.p2{margin-left: 70px;} .spirit > div .quot p.p3{margin-left: 140px;} */ .spirit > div .quot span{display: block; font-size: 28px; font-weight: 300; opacity: .6; padding-top: 40px; } .spirit-con > div + div{margin-top: 120px;} .spirit-circle .circle{border-radius: 20px; background-color: #191919; padding: 80px; display: flex; align-items: center; justify-content: center;} .spirit-circle .circle img{width: 70%;} /* .valuebox .txtbox > ul > li{ display: flex; gap: 70px; } */ .valuebox .txtbox > ul > li{ display: flex; gap: 26px; flex-direction: column;} /* .valuebox .txtbox > ul > li > div{padding: 80px 0;} */ .spititbox.valuebox .txtbox > ul{gap: 0; margin-top: 20px;} .spititbox.valuebox .txtbox > ul > li{align-items: center; gap: 70px; flex-direction: row; } .spititbox.valuebox .txtbox > ul > li + li{border-top: 1px solid #3d3d3d; margin-top: 0;} .spititbox.valuebox .txtbox .left, .spititbox.valuebox .txtbox .right{ padding: 80px 0;} .spititbox.valuebox .txtbox .left{width: 300px; flex-direction: column; padding-left: 30px;} .spititbox.valuebox .txtbox .left span{ font-size: 32px; text-transform: uppercase; opacity: 1; margin-top: 0; color: var(--main-color-light); line-height: 1.3; font-weight: 600;} .spititbox.valuebox .txtbox .left p{ color: #fff; font-weight: 600;font-size: 26px; margin-top: 10px;} .spititbox.valuebox .txtbox .right {background-color: transparent; padding: 0;} .spititbox.valuebox .txtbox .right i{opacity: 1; font-weight: 300;; line-height: 1.5;} .spirit-circle .top-txt{margin-bottom: 80px; text-align: center;} .spirit-circle .top-txt h6{font-size: 65px; font-weight: 800; color: var(--main-color-light); margin-bottom: 10px; line-height: 1.3;} .spirit-circle .top-txt > div{text-indent: 0;} .spirit-circle .top-txt span{font-weight: 700; font-size: 30px; text-indent: 0;} .spirit-circle .top-txt span + span:before{content:''; width: 5px; height: 5px; background-color: var(--main-color-dark); display: inline-block; margin: 0 14px; position: relative; top: -10px;} .spirit-circle .top-txt .exp{position: relative;} .spirit-circle .top-txt .exp::before{content: ''; display: block; margin: 28px auto; position: relative; height: 80px; width: 3px;background: linear-gradient(to bottom, var(--main-color) , transparent); border-radius: 3px; opacity: .8;} .spirit-circle .top-txt .exp p{font-weight: 300; font-size: 22px; line-height: 1.6; color: #ddd;} .br-list{display: flex; width: 100%; gap: 16px; flex-wrap: wrap;} .br-list > li{width: calc((100% - 16px) / 2); border-radius: 10px; background-color: #3d3d3d; padding: 30px; display: inline-block; } .br-list.one > li{width: 100%;} .br-list.th > li{width: calc((100% - 32px) / 3);} .br-list.fo > li{width: calc((100% - 48px) / 4);} .br-list.fi > li{width: calc((100% - 64px) / 5);} /* .br-list > li .main-pro{font-size: 24px;} */ .spirit-con .br-none{display: none;} .process-con dl dt ul.br-list.fi > li.main-pro{font-size: 18px !important;} .process-con dl dt ul.br-list.fi > li{padding: 24px;} .br-list.br-list2{} .br-list.br-list2 > li{border-radius: 0; background-color: transparent; padding: 0; } .br-list > li .img{display: block; position: relative; width:100%; padding-bottom: 70%; overflow: hidden; margin-bottom: 22px; border-radius: 6px;} .br-list > li .img img{position: absolute; width: 100%; height:100%; left:50%; top:50%;transform: translate(-50%, -50%) scale(1.05); object-fit: cover;} /* ********************************************* * * 1630px * ********************************************* */ @media screen and (max-width: 1630px){ .value-inner {padding: 150px 20px;} .win {padding: 150px 0;} .growth {background-position: 20px 107%; gap: 20px;} .comp_li ul li{gap: 50px;} .comp1 .comp_li .imgwrap img{position: absolute; width: 100%; height:100%; left:50%; top:50%; transform: translate(-50%, -50%); object-fit: cover;} .comp_li .txt{font-size: 18px; gap: 36px;} .comp_li .txt h6{font-size: 36px;} .comp_li .txt h6 .link_btn{width: 42px; height: 42px;} .comp_li .txt h6 .link_btn img{width: 20px;} .spirit:after{right: 16px;} .spirit > div .quot p{font-size: 34px;} .spirit > div .quot span{font-size: 24px;} .spirit > div{gap: 80px;} } /* ********************************************* * * 1500px * ********************************************* */ @media screen and (max-width: 1500px){ .comp1 .comp_li .imgwrap {width: 640px; padding-bottom: 480px;} .talent .txt ul{padding: 40px;} .talent .txt ul:after{font-size: 70px; top: -70px;} .talent{gap: 80px;} .com-li p{font-size: 22px;} .com-li ul{gap: 12px;} .com-li ul li{padding: 10px 20px; font-size: 15px;} .business .comp_li .txt h6{width: 330px;} .business .comp_li ul.pd-list{gap: 12px;} .business .comp_li ul.pd-list > li{padding: 22px; width: calc((100% - 36px) / 4);} .business .comp_li ul.pd-list.two > li{width: calc((100% - 12px) / 2);} .business .comp_li ul.pd-list.th > li{width: calc((100% - 24px) / 3);} .pd-list span{font-size: 20px; padding-bottom: 14px; margin-bottom: 14px; line-height: 1.4;} .pd-list ul li{font-size: 16px;} .pd-list ul li:before{top: 10px;} .valuebox .txtbox .right .list-circle{gap: 40px;} .valuebox .txtbox .right .list-circle i{width: calc((100% - 350px) / 3);} } /* ********************************************* * * 1420px * ********************************************* */ @media screen and (max-width: 1420px){ .value-con .growht-con ul {column-gap: 20px;} .value-con .growht-con ul li {width: calc((100% - 60px) / 4);} .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;} .welfare-con .wel-box{gap: 20px;} .welfare-con .welfare {padding: 40px 30px; width: calc((100% - 40px) / 3);} .process .process-wrap{padding: 16px; border-radius: 16px;} .process .process-wrap .circle{border-radius: 8px; width: calc((100% - 100px) / 6);} .process .process-wrap .circle:after{width: 11px; right: -17px;} .circle-txt strong{font-size: 18px;} .circle-txt span{font-size: 15px;} .process .process-wrap .circle i{margin-bottom: 18px; width: 25%;} .spirit:after{font-size: 100px; top: -100px;} .spirit > div .img{width: 550px;} .spirit > div .quot p{font-size: 32px;} .spirit > div .quot span{font-size: 22px;} .spirit > div{justify-content: space-between;} .spirit-circle .top-txt h6{font-size: 58px;} .spirit-circle .top-txt span{font-size: 26px;} .spirit-circle .top-txt span + span:before{margin: 0 10px; width: 4px; height: 4px;} .spirit-circle .top-txt .exp p{font-size: 20px;} .spirit-circle .circle img{width: 80%;} .spititbox.valuebox .txtbox .left, .spititbox.valuebox .txtbox .right{padding: 60px 0;} .spititbox.valuebox .txtbox .left{width: 240px; padding-left: 30px;} .spititbox.valuebox .txtbox .left span{font-size: 26px;} .spititbox.valuebox .txtbox .left p{font-size: 22px; margin-top: 8px;} .spititbox.valuebox .txtbox > ul > li{gap: 50px;} .spititbox.valuebox .txtbox .right i{font-size: 20px;} .valuebox .txtbox .right .list-circle i{font-size: 20px;} .valuebox .txtbox .right .list-circle i span{font-size: 16px;} } /* ********************************************* * * 1240px * ********************************************* */ @media screen and (max-width: 1240px){ .wrap_padding{padding: 130px 0;} .subtit{margin-bottom: 90px;} .subtit h6 {font-size: 44px;} .subtit p {font-size: 18px;} .subtit.none-flex{margin-bottom: 80px;} .spirit-con > div + div{margin-top: 90px;} .comp1 .comp_li .imgwrap{width: 540px; padding-bottom: 430px;} .comp_li .txt dl dd {width: 74%;} .comp_li .txt dl dt, .comp_li .txt dl dd {padding-left: 12px; height: 58px; line-height: 58px; font-size: 16px;} .comp_li .txt h6{font-size: 32px;} .comp_li .txt{gap: 24px; font-size: 16px;} .com-li{padding: 24px 12px;} .com-li p{font-size: 20px;} .com-li ul{gap: 10px;} .com-li ul li{padding: 9px 16px; font-size: 15px;} .big-tab ul li{font-size: 24px; padding: 24px 0;} .business .subtab > ul > li{font-size: 16px; padding: 9px 20px;} .business .comp_li{margin-top: 70px;} .business .comp_li ul li .left span{font-size: 20px;} .business .comp_li ul li .left p{font-size: 34px;} .business .comp_li ul li .left{margin-bottom: 40px;} .business .comp_li .txt{margin-top: 20px;} .business .comp_li .txt h6{width: 300px; font-size: 28px;} .business .comp_li .txt > div{padding: 50px 20px;} .business .comp_li ul.pd-list > li{width: calc((100% - 24px) / 3);} .talent{gap: 40px;} .talent .txt ul{padding: 32px;} .talent .txt ul:after{font-size: 55px; top: -55px;} .talent .txt h6{font-size: 22px; margin-bottom: 12px;} .talent .txt ul li{padding: 20px; gap: 20px;} .talent .txt ul div{width: 150px;} .talent .txt ul i{font-size: 20px;} .talent .txt ul p{font-size: 17px;} .talent .txt ul span{font-size: 16px; margin-top: 8px;} .grade-wrap{gap: 50px;} .grade-wrap > div{width: calc(50% - 25px);} .grade-wrap .txt{margin-top: 50px;} .grade-wrap .txt h6{font-size: 30px; margin-bottom: 20px; padding-bottom: 18px;} .grade-wrap .txt p{font-size: 18px;} .apply_list li > div .go{width: 50px; height: 50px;} .apply_list li > div .info{width: calc(100% - 50px);} .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 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;} .value-con {gap: 60px;} .win-tit:hover p {font-size: 36px;} .future-con {width: 77%;} .process .process-wrap{padding: 10px; border-radius: 12px;} .review-top{padding: 34px;} .review-top .due-date{font-size: 18px; padding: 5px 15px;} .recview-tit > p {font-size: 28px;} .recview-tit {gap: 12px;} .rec {gap: 30px; justify-content: space-between;} .rec_list {width: calc(100% - 415px);} .rec .rec_filter {width: 385px;} .process-con dl dd {width: 300px;} .process-con dl dt{width: calc(100% - 300px);} .comp_2 .comp_li ul {row-gap: 60px;} .btn-wrap button {width: 195px; padding: 17px 0;} .br-list{gap: 12px;} .br-list > li{width: calc((100% - 12px) / 2); padding: 24px;} .br-list.one > li{width: 100%;} .br-list.th > li{width: calc((100% - 24px) / 3);} .br-list.fo > li{width: calc((100% - 12px) / 2);} .br-list.fi > li{width: calc((100% - 24px) / 3);} .nurture .process-con dl dt ul > li.main-pro{font-size: 17px;} .nurture .process-con dl dt ul > li ul li{font-size: 15px; } .nurture .process-con dl dd{width: 240px; font-size: 28px;} .nurture .process-con dl dt{width: calc(100% - 240px);} .people .process-con dl dt ul > li.main-pro .iconwrap{width: 90px; margin-bottom: 20px;} .people .process-con dl dt ul > li.main-pro .iconwrap img{width: 50px; height: 50px;} .process-con dl dt ul > li > ul{margin-top: 8px; gap: 6px;} .valuebox .txtbox .left p, .valuebox .txtbox.value-li > ul > li .right .tit{font-size: 32px;} .valuebox .txtbox.value-li > ul > li .right .flex > i{margin-top: 20px; padding-top: 20px;} .valuebox .txtbox.value-li > ul > li .right .flex > i:first-child{font-size: 20px;} .valuebox .txtbox.value-li > ul > li .right .flex i{font-size: 18px;} .valuebox .txtbox .right i{font-size: 18px;} .valuebox .txtbox.value-li > ul > li .right .tit span{font-size: 24px;} .valuebox .txtbox.value-li > ul > li .right .tit p{font-size: 18px;} .valuebox .txtbox.value-li .right p{font-size: .7em;} .valuebox .txtbox.value-li > ul > li .right .flex{gap: 20px;} /* .valuebox .txtbox.value-li .left i img{max-width: 60%;} */ .valuebox .txtbox.value-li > ul > li .left{width: 120px;} /* .valuebox .txtbox > ul > li .left{width: 260px; padding-left: 30px;} */ .valuebox .txtbox > ul > li .left{width: 100%;} /* .valuebox .txtbox > ul > li > div{padding: 60px 0;} */ .valuebox .txtbox.value-li > ul > li .right .flex > i > i + i{margin-top: 14px;} .valuebox .txtbox .right p{font-size: 22px;} .valuebox .txtbox > ul > li > div.main-bg-d p{font-size: 28px;} .valuebox .txtbox > ul > li > div.main-bg-d i{font-size: 20px;} .valuebox .txtbox .right .top p{font-size: 28px; max-width: 400px;} .valuebox .txtbox .right .top i{font-size: 20px;} .valuebox .txtbox .value-list li{width: calc((100% - 40px) / 3 ); padding: 0;} .valuebox .txtbox .value-list li b{font-size: 22px;} .valuebox .txtbox .value-list li span{font-size: 18px;} .value-li-img{max-width: 100%;} .valuebox .txtbox .right .br-list li span{font-size: 18px;} .valuebox .txtbox .right .br-list li p{font-size: 22px;} .valuebox .txtbox .right .br-list li{padding: 30px 24px;} .valuebox .txtbox .right .list-circle{gap: 30px;} .valuebox .txtbox .right .list-circle i{width: calc((100% - 260px) / 3);} .spirit{padding: 90px 0;} .spirit:after{font-size: 80px; top: -80px;} .spirit-con{padding-top: 30px;} .spirit > div{gap: 60px;} .spirit > div .quot em img{width: 30px;} .spirit > div .img{width: 460px;} .spirit > div .quot p{font-size: 28px;} .spirit > div .quot em{padding-bottom: 30px;} .spirit > div .quot span{font-size: 20px; padding-top: 30px;} .spirit-circle .top-txt .exp::before, .valuebox .txtbox .right .top:after{height: 60px; margin: 20px auto;} .spirit-circle .circle img{width: 85%;} .spirit-circle .top-txt .exp p{font-size: 18px;} .spititbox.valuebox .txtbox .right i{font-size: 18px;} .spititbox.valuebox .txtbox .left span{font-size: 24px;} .spititbox.valuebox .txtbox .left p{font-size: 20px; margin-top: 6px;} .spirit-circle .top-txt{margin-bottom: 60px;} } /* ********************************************* * * 1100px * ********************************************* */ @media screen and (max-width: 1100px){ .big-tab ul{margin-bottom: 30px;} .big-tab ul li{font-size: 22px; padding: 22px 0;} .business .comp_li{margin-top: 50px;} /* .business .subtab > ul{gap: 10px 0; flex-wrap: wrap; border-radius: 8px;} */ .business .subtab > ul > li{ padding: 10px 0;} .talent{gap: 40px; margin-top: 80px;} .talent .txt ul{padding: 28px;} /* .talent .txt ul:after{font-size: 55px; top: -55px;} */ .talent .txt h6{font-size: 20px; margin-bottom: 10px;} .talent .txt ul li{padding: 20px; gap: 20px;} .talent .txt ul div{width: 130px;} .talent .txt ul i{font-size: 18px;} .talent .txt ul p{font-size: 16px;} .talent .txt ul span{font-size: 16px; margin-top: 8px;} .welfare-con .welfare .wel-txt p{font-size: 20px;} .welfare-con .wel-box{gap: 16px;} .welfare-con .welfare {padding: 30px ; width: calc((100% - 32px) / 3);} .welfare-con .welfare .welfare-icon{margin: 0 auto 16px; width: 80px; height: 62px;} .valuebox .txtbox .right .list-circle i{width: calc((100% - 180px) / 3);} } /* ********************************************* * * 1024px * ********************************************* */ @media screen and (max-width: 1024px){ .wrap_padding{padding: 100px 0;} .subtit{margin-bottom: 70px;} .subtit.none-flex{margin-bottom: 60px;} .spirit-con > div + div{margin-top: 70px;} .comp_li ul{gap: 100px;} .comp1 .comp_li .imgwrap{width: 450px; padding-bottom: 400px;} .comp_li .txt dl dt{width: 27%;} .comp_li .txt dl dd {width: 73%;} .comp_li .txt dl dt, .comp_li .txt dl dd { height: 50px; line-height: 50px; font-size: 15px;} .comp_li .txt h6{font-size: 30px;} .comp_li .txt{gap: 20px; font-size: 15px;} .com-li p{margin-bottom: 16px;} .com-li ul{gap: 10px;} .talent{gap: 20px;} .talent .txt ul{padding: 28px 24px;} .talent .txt ul:after{font-size: 48px; top: -48px;} .talent .txt h6{font-size: 20px; margin-bottom: 10px;} /* .talent .txt ul li{flex-direction: column; align-items: flex-start; gap: 12px;} */ /* .talent .txt ul li{align-items: flex-start;} */ .talent .txt ul div{width: 130px; flex-shrink: 0; } .talent .txt ul i{font-size: 16px;} .talent .txt ul p{font-size: 16px;} .talent .txt ul p br{display: none;} .talent .txt ul span{font-size: 15px; margin-top: 4px;} /* .faqlist li{padding: 24px 20px;} */ .faqlist li .faq_title{padding: 24px 20px;} .faq_answer{margin: 24px 20px;} .faqlist li .faq_title .q{font-size: 20px;} .faq_answer{padding: 30px; font-size: 17px;} .grade-wrap{gap: 40px;} .grade-wrap > div{width: calc(50% - 20px);} .grade-wrap .txt{margin-top: 30px;} .grade-wrap .txt h6{font-size: 26px; margin-bottom: 16px; padding-bottom: 14px;} .grade-wrap .txt p{font-size: 17px;} .business .subtab > ul > li{font-size: 15px; ;} .business .comp_li{margin-top: 40px;} .business .comp_li ul li .left span{font-size: 18px;} .business .comp_li ul li .left p{font-size: 30px;} .business .comp_li ul li .left{margin-bottom: 28px;} .business .comp_li .txt{font-size: 16px;} .business .comp_li .txt h6{width: 240px; font-size: 24px;} .business .comp_li .txt > div{padding: 30px 10px;} .business .comp_li ul li .imgwrap{aspect-ratio: 3.8 / 1;} .business .comp_li ul.pd-list{gap: 12px;} .business .comp_li ul.pd-list > li{width: calc((100% - 24px) / 3);} .pd-list span{font-size: 20px; padding-bottom: 14px; margin-bottom: 14px; line-height: 1.4;} .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;} .select2-container {width: 100% !important;} .qnaform dl select {width: 100% !important;} .qnaform dl input {width: 100%;} .review-top {gap: 30px;} /* .review-top .due-date {width: 75px; height: 75px;} */ .process .process-wrap{padding: 10px; flex-wrap: wrap; gap: 30px; padding: 30px;} .process .process-wrap .circle{width: calc((100% - 60px) / 3);} .process .process-wrap .circle:nth-child(3):after{display: none;} .process .process-wrap .circle:after{width: 20px; right: -25px;} .circle-txt strong{font-size: 20px;} .circle-txt span{font-size: 16px;} .process .process-wrap .circle i{margin-bottom: 22px; width: 30%;} .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-con dl dd{width: 260px;} .process-con dl dt{width: calc(100% - 260px);} .btn-wrap button {font-size: 18px;} .recview_content{width: 65vw;} .btn-wrap02{gap: 12px; padding-top: 30px;} .btn-wrap02 button{font-size: 16px;padding: 16px 0 ;} .valuebox .txtbox > ul > li .left{width: 220px; padding-left: 20px;} .valuebox .txtbox > ul{margin-top: 20px;} .value-tit{font-size: 32px;} .valuebox .txtbox .left p, .valuebox .txtbox.value-li > ul > li .right .tit{font-size: 28px;} .value-tit p{font-size: 20px; margin-top: 6px;} .valuebox .txtbox.value-li > ul > li .right .tit span{font-size: 24px;} .valuebox .txtbox.value-li > ul > li .right .flex > i:first-child{font-size: 20px;} .valuebox .txtbox .value-list li b{font-size: 18px;} .valuebox .txtbox .value-list li span{font-size: 16px;} .valuebox .imgbox .flow-txt{bottom: -95px;} .valuebox .imgbox{padding: 100px 0 110px ; gap: 10px; margin-bottom: 180px;} .valuebox .imgbox > i{font-size: 22px;} .valuebox .imgbox p{font-size: 28px; line-height: 1.5;} .valuebox .txtbox .right .list-circle i{width: calc((100% - 140px) / 3);} .spirit:after{font-size: 70px; top: -70px;} .spirit > div .img{width: 400px;} .spirit > div{gap: 40px;} .spirit > div .quot em{padding-bottom: 20px;} .spirit > div .quot span{padding-top: 20px;} .spirit > div .quot em img{width: 24px;} .spirit > div .quot p{font-size: 24px;} .spirit{padding: 70px 0;} .spirit-circle .top-txt h6{font-size: 42px; margin-bottom: 8px;} .spirit-circle .top-txt span{font-size: 22px;} .spirit-circle .top-txt span + span:before{margin: 0 6px; width: 3px; height: 3px; top: -8px;} .spirit-circle .circle img{width: 90%;} .spirit-circle .circle{padding: 70px; border-radius: 10px;} .spirit-circle .top-txt{margin-bottom: 50px;} } /* ********************************************* * * 890px * ********************************************* */ @media screen and (max-width: 890px){ .big-tab ul li{font-size: 20px; padding: 18px 0;} .comp_li ul{gap: 80px;} .comp_li ul li{gap: 30px;} .comp1 .comp_li .imgwrap{width: 380px; padding-bottom: 400px;} .comp_li .txt dl dt, .comp_li .txt dl dd { font-size: 14px; height: 46px; line-height: 46px} .comp_li .txt h6{font-size: 26px;} .comp_li .txt{gap: 16px; font-size: 14px;} .comp_li .txt h6 .link_btn{width: 36px; height: 36px; margin-left: 0;} .comp_li .txt h6 .link_btn img{width: 16px; } .com-li{padding: 20px 12px;} .com-li ul{gap: 10px;} .talent .txt ul:after{font-size: 40px; top: -40px;} .talent .txt ul p{font-size: 15px;} .business .comp_li ul.pd-list > li{ width: calc((100% - 12px) / 2);} .business .comp_li ul.pd-list.th > li{width:100%;} .grade-wrap{gap: 30px; align-items: center;} .grade-wrap > div{width: calc(50% - 15px);} .grade-wrap .txt{margin-top: 0; position: relative; top: -4px;} .grade-wrap .txt h6{font-size: 24px;} .grade-wrap .txt p{font-size: 16px;} .grade-wrap .grade{padding: 20px; aspect-ratio: 1.6 / 1; display: flex; align-items: center; justify-content: center;} .subtit h6 {font-size: 40px;} .subtit p {font-size: 17px;} .faqlist li .faq_title .q::before{ font-size: 28px;} /* .faqlist li{padding: 24px 16px;} */ .faqlist li .faq_title .q{font-size: 19px;} .faq_answer{padding: 26px; margin-top: 10px; font-size: 16px;} .faqlist li .faq_title{padding: 24px 16px;} .faq_answer{margin: 24px 16px;} .recview-tit > p{font-size: 26px;} /* .subtab {width: 100%; overflow-x: scroll;} .subtab > ul {width: max-content;} */ .out-circle {width: 360px; padding: 25px;} .circle-ball.ball1 {top: -70px; left: -77px; } .circle-ball.ball2 {top: -70px; right: -77px; } .circle-ball.ball3 {bottom: -70px; left: -77px; } .circle-ball.ball4 {bottom: -70px; right: -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: 15px;} .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% - 16px) / 2); padding: 24px;} .welfare-con .welfare .wel-txt{gap: 10px;} .welfare-con .welfare .wel-txt span{font-size: 16px;} .welfare-con .welfare .welfare-icon{width: 70px; height: 56px; margin-bottom: 20px;} .rec {flex-direction: column; gap: 50px;} .rec .rec_filter {position: static; width: 100%;} .rec_list {width: 100%;} .recview-tit > p {font-size: 27px;} .review-top .due-date {font-size: 18px;} .br-list.th > li{width: 100%;} .br-list > li .img{padding-bottom: 50%;} .br-list > li .img img{height: max-content; top: 75%;} .br-list.fi > li{width: calc(50% - 6px);} .valuebox .txtbox .left span{font-size: 19px; margin-top: 2px;} .valuebox .txtbox .br-list.th > li{width: calc((100% - 24px) / 3);} .valuebox .txtbox .right .br-list li span{font-size: 16px;} .valuebox .txtbox .right .br-list li p{font-size: 18px; margin-top: 0;} .valuebox .txtbox .right .br-list li{padding: 26px 16px;} .valuebox .txtbox > ul > li + li{margin-top: 50px;} .valuebox .txtbox > ul > li{flex-direction: column; gap: 20px;} .valuebox .txtbox > ul > li > div.main-bg-d{padding: 50px 0;} .valuebox .txtbox > ul > li .left{width: 100%; padding: 0;} .valuebox .txtbox > ul{margin-top: 20px;} .valuebox .txtbox > ul > li > div{padding: 0 10px;} .valuebox .txtbox > ul > li > div.main-bg-d p{font-size: 22px; margin-bottom: 4px;} .valuebox .txtbox > ul > li > div.main-bg-d i{font-size: 18px;} .valuebox .txtbox .right p{font-size: 18px;} .valuebox .txtbox .right .list i{font-size: 16px; padding-left: 12px;} .valuebox .txtbox .right .list i:before{top: 8px;} .valuebox .txtbox .right .top{margin-bottom: 0;} .valuebox .txtbox .right .top p{font-size: 22px;} .valuebox .txtbox.value-li > ul > li{flex-direction: row; padding: 50px; gap: 30px;} .valuebox .txtbox.value-li > ul > li + li{margin-top: 16px;} /* .valuebox .txtbox.value-li > ul > li .left{width: 130px;} */ /* .valuebox .txtbox.value-li .left i img{max-width: 90%;} */ .valuebox .txtbox.value-li > ul > li .right .flex{flex-direction: column; gap: 0;} .valuebox .txtbox.value-li > ul > li .right .flex > i:first-child{width: 100%;} .valuebox .txtbox.value-li > ul > li .right .flex > i:last-child{width: 100%; border-color: #3d3d3d; border-width: 1px;} .valuebox .txtbox.value-li > ul > li .right .tit span{font-size: 20px;} .valuebox .txtbox.value-li .right p{font-size: 16px;} .valuebox .txtbox.value-li > ul > li .right .flex > i{margin-top: 14px; padding-top: 14px;} .valuebox .txtbox.value-li > ul > li .right .flex > i:first-child{font-size: 18px;} .valuebox .txtbox .right i{font-size: 16px;} .valuebox .txtbox.value-li > ul > li .right .flex > i > i + i{margin-top: 10px;} /* .valuebox .txtbox .right{max-width: calc(100% - 32px); margin: 0 auto;} */ .valuebox .txtbox .right{padding: 50px 20px;} .valuebox .txtbox .right .list-circle i{gap: 4px;} .valuebox .txtbox .right .list-circle i{font-size: 18px;} .valuebox .txtbox .right .list-circle i span{font-size: 15px;} .spirit-circle .top-txt .exp::before, .valuebox .txtbox .right .top:after{height: 50px; margin: 16px auto; width: 2px;} .spirit > div .img{width: 350px;} .spirit-circle .top-txt h6{font-size: 38px;} .spirit-circle .top-txt span{font-size: 20px;} .spirit-circle .top-txt .exp p{font-size: 17px;} .spititbox.valuebox .txtbox .right i{font-size: 17px;} .spirit > div .quot span{font-size: 18px} .spirit-circle .circle{padding: 60px;} .spititbox.valuebox .txtbox .left, .spititbox.valuebox .txtbox .right{padding: 50px 0; } .spititbox.valuebox .txtbox .left{width: 200px; padding-left: 20px;} .spititbox.valuebox .txtbox > ul > li{padding: 0;} .spititbox.valuebox .txtbox .left span{font-size: 22px;} .spititbox.valuebox .txtbox .left p{font-size: 18px;} } /* ********************************************* * * 768px * ********************************************* */ @media screen and (max-width: 768px){ .wrap_padding{padding: 80px 0;} .subtit{margin-bottom: 60px;} .subtit h6 {font-size: 36px;} .subtit p {font-size: 16px;} .subtit.none-flex{margin-bottom: 60px;} .spirit-con > div + div{margin-top: 60px;} .comp1 .comp_li ul li{flex-direction: column;} .comp1 .comp_li .imgwrap{width: 100%; padding-bottom: 40%;} .comp1 .comp_li .txt{width: 100%;} .comp_li .txt dl dt, .comp_li .txt dl dd{height: 54px; line-height: 54px;} .com-li{padding: 20px 8px;} .com-li p{font-size: 18px; margin-bottom: 14px;} .com-li ul li{padding: 8px 14px; font-size: 14px;} .business .comp_li > ul > li + li{margin-top: 60px; padding-top: 60px;} .big-tab ul li{font-size: 18px;} .business .subtab > ul > li{font-size: 15px; padding: 8px 0;} .business .comp_li ul li .left span{font-size: 15px;} .business .comp_li ul li .left p{font-size: 24px;} .business .comp_li ul li .left{margin-bottom: 28px;} .business .comp_li .txt{font-size: 15px; margin-top: 10px;} .business .comp_li .txt h6{width: 200px; font-size: 20px;} .subtab > ul{gap: 0; padding: 6px;} .talent{flex-direction: column; margin-top: 50px; gap: 100px;} .talent .img{width: 80vw;} .talent .txt ul div{width: 180px;} .talent .txt ul li{padding: 28px; gap: 32px;} .talent .txt ul:after{font-size: 60px; top: -60px; right: auto; left: 50%; transform: translateX(-50%);} .talent .txt ul i{font-size: 19px;} .talent .txt ul p, .talent .txt ul span{font-size: 16px;} .talent .txt h6{font-size: 26px;} .grade-wrap{gap: 20px;} .grade-wrap > div{width: calc(50% - 10px);} .grade-wrap .txt h6{font-size: 22px; margin-bottom: 12px; padding-bottom: 10px;} .grade-wrap .grade{padding: 20px; aspect-ratio: 1.6 / 1; border-radius: 8px;} .people .process-con dl dt ul > li.main-pro .iconwrap{width: 80px; margin-bottom: 16px;} .people .process-con dl dt ul > li.main-pro .iconwrap img{width: 44px; height: 44px;} .valuebox .txtbox .right .list-circle{gap: 20px;} .valuebox .txtbox .right .list-circle i{width: calc((100% - 80px) / 3);} .spirit-con{padding-top: 20px;} .spirit{padding: 60px 0;} .spirit:after{font-size: 55px; top: -55px;} .spirit > div .quot p{font-size: 22px;} .spirit > div .img{width: 300px;border-radius: 8px;} .spititbox.valuebox .txtbox .right i, .spirit-circle .top-txt .exp p{font-size: 16px;} .spirit-circle .circle img{width: 100%;} .spititbox.valuebox .txtbox > ul > li{gap: 0;} .spirit-circle .circle{border-radius: 8px;} } /* ********************************************* * * 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 .process-wrap{padding: 10px; border-radius: 10px; flex-wrap: wrap; gap: 20px; padding: 20px;} .process .process-wrap .circle{border-radius: 6px; width: calc((100% - 40px) / 3);} .process .process-wrap .circle:after{width: 11px; right: -17px;} .circle-txt strong{font-size: 18px;} .circle-txt span{font-size: 14px;} .process .process-wrap .circle i{margin-bottom: 18px; width: 25%;} .subtab > ul{background-color: transparent; padding: 0; gap: 10px; overflow-x: auto; border-radius: 0; -ms-overflow-style: none; margin-right: -16px; margin-left: -16px; padding-left: 16px; padding-right: 16px; width: calc(100% + 32px);} .subtab{position: relative;} .subtab:after{content:''; display: block; position: absolute; width:30px; height: 103%; right:-16px; top: 50%;transform: translateY(-50%); background: linear-gradient(to right, transparent, #222); pointer-events: none;} .subtab > ul::-webkit-scrollbar{display: none;} .business .subtab > ul > li{width: max-content; padding: 8px 20px ; background-color: #3d3d3d; flex-shrink: 0;} .process-con dl dd {width: 200px; font-size: 22px;} .process-con dl dt ul > li.main-pro{font-size: 17px;} .process-con dl{padding: 60px 20px;} .process-con dl dd span{font-size: 16px;} .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;} .faqlist li .faq_title .q::before{ font-size: 26px; top: -5px;} /* .faqlist li{padding: 22px 16px;} */ .faqlist li .faq_title .q{font-size: 18px; padding-left:40px ;} .faq_answer{padding: 20px;} .faqlist li .faq_title{padding: 22px 16px;} .faq_answer{margin: 22px 16px;} .btn-wrap02{gap: 10px; padding-top: 20px;} .btn-wrap02 button{font-size: 15px;padding: 14px 0; width: 150px;} .comp_li .imgwrap{background-color: cover; background-attachment: scroll;} } /* ********************************************* * * 690px * ********************************************* */ @media screen and (max-width: 690px){ .subtit {flex-direction: column; align-items: flex-start; gap: 16px;} /* .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-con .growht-con ul li {width: calc((100% - 40px) / 3);} .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: flex-start;} /* .circle-txt span {font-size: 18px;} .circle-txt strong {font-size: 18px;} */ .recview-tit .recview-detail ul li, .recview-tit .recview-detail .day{font-size: 16px;} .review-top .due-date{font-size: 16px; padding: 4px 13px 3px;} .recview-tit > p{font-size: 22px;} .review-top{padding: 28px 24px; border-radius: 6px;} .big-tab ul{margin-bottom: 24px;} .big-tab ul li{font-size: 18px; padding: 18px 0;} .process-con dl {flex-direction: column; gap: 16px;} .process-con dl dt {width: 100%;} .process-con dl dd {width: 100%;} .process-con dl dd span{margin-bottom: 2px;} .process .process-tit {font-size: 30px;} .process .process-wrap {margin-top: 35px;} .process-con {margin-top: 70px;} .process-con dl {padding: 40px 16px;} .process-con dl dt > ul {gap: 20px;} /* .process {margin-bottom: 100px;} */ .process-con dl dt ul > li.main-pro{font-size: 16px;} .business .subtab > ul > li{font-size: 15px; ;} .business .comp_li{margin-top: 34px;} .business .comp_li ul li .left span{font-size: 15px;} .business .comp_li ul li .left p{font-size: 24px;} .business .comp_li ul li .left{margin-bottom: 28px;} .business .comp_li .txt{font-size: 15px; margin-top: 0px;} .business .comp_li .txt h6{width: 100%; font-size: 22px;} .business .comp_li .txt > div{padding: 30px 8px; flex-direction:column ; gap: 14px; } .business .comp_li ul li .imgwrap{aspect-ratio: 3 / 1; border-radius: 6px;} .business .comp_li .txt p + p{margin-top: 12px;} .pd-list span{font-size: 18px;padding-bottom: 10px;margin-bottom: 10px;} .comp_li ul li{font-size: 15px;} .business .comp_li ul.pd-list > li{ padding: 18px; border-radius: 6px;} .business .comp_li ul.pd-list.two > li, .business .comp_li ul.pd-list.th > li{width: 100%;} .nurture .process-con dl dd{font-size: 24px;} .nurture .process-con dl dt{width: 100%;} .nurture .process-con dl dt ul > li.main-pro{font-size: 16px;} /* .comp_2 .comp_li ul {row-gap: 40px;} */ .valuebox .txtbox .left p, .valuebox .txtbox.value-li > ul > li .right .tit{font-size: 24px;} .valuebox .txtbox > ul > li > div.main-bg-d p{font-size: 20px;} .valuebox .txtbox > ul > li > div.main-bg-d i{font-size: 16px;} /* .valuebox .txtbox > ul > li{padding: 30px 0; gap: 16px;} */ .valuebox .txtbox > ul > li{gap: 16px;} .valuebox .txtbox .right p{font-size: 16px;} .value-tit{font-size: 28px;} .valuebox .txtbox > ul{margin-top: 14px;} .valuebox .txtbox .value-list li{gap: 8px; width: calc((100% - 32px) / 3 );} .valuebox .txtbox .value-list li b{font-size: 17px;} .valuebox .txtbox .value-list li span{font-size: 14px;} .valuebox .txtbox .right .top p{font-size: 20px; margin-bottom: 0;border-width: 1px;} .valuebox .txtbox .right .top i{font-size: 17px;} .valuebox .txtbox.value-li > ul > li{padding: 50px 20px;} .valuebox .txtbox.value-li > ul > li .right .flex i{font-size: 16px;} .valuebox .txtbox.value-li > ul > li .right .tit p{font-size: 16px;} .valuebox .txtbox.value-li > ul > li .right .flex > i:first-child{font-size: 17px;} .valuebox .txtbox .right i{font-size: 15px;} .valuebox .txtbox.value-li > ul > li .left{width: 140px;} /* .valuebox .txtbox.value-li > ul > li .right .tit span{font-size: 18px;} */ .valuebox .txtbox.value-li .right p{font-size: 15px;} .valuebox + .valuebox{margin-top: 70px;} .valuebox .txtbox.value-li > ul > li .left{width: 110px;} .valuebox .txtbox.value-li .left i img{max-width: 100%;} .welfare-con .welfare .wel-txt p{font-size: 18px;} .process .process-wrap .circle i{margin-bottom: 14px; } .spirit{ background: #191919;} /* .spirit > div .img{position: relative; width:100%; padding-bottom: 45%; overflow: hidden;} .spirit > div .img img{position: absolute; width: 100%; height: max-content; left:50%; top:65%; transform: translate(-50%, -50%); object-fit: cover;} */ .spirit-circle .top-txt{margin-bottom: 40px;} .spirit > div{flex-direction: column;} .spirit > div .quot p{font-size: 26px; text-align: center;} .spirit > div .quot em img{margin: 0 auto;} .spirit > div .quot span{text-align: center;} /* .spititbox.valuebox .txtbox > ul > li{flex-direction: column; align-items: flex-start;padding: 40px 16px; gap: 20px;} */ .spititbox.valuebox .txtbox > ul > li{flex-direction: column; align-items: flex-start; gap: 20px;} .spititbox.valuebox .txtbox .left{padding-left: 0; width: 100%; flex-direction: column-reverse;} .spititbox.valuebox .txtbox .left, .spititbox.valuebox .txtbox .right{padding: 0;} .spititbox.valuebox .txtbox > ul{margin-top: 0;} .spititbox.valuebox .txtbox .left span{font-size: 16px; margin-top: 4px;} .spititbox.valuebox .txtbox .left span br{display: none;} .spititbox.valuebox .txtbox .left p{margin-top: 0; font-size: 20px; font-weight: 600;} .spirit-circle .circle{padding: 60px 30px;} .spirit > div .img{ width:100%;} .spirit > div .img img{content: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/spirit-pic-mo.png);} } /* ********************************************* * * 640px * ********************************************* */ @media screen and (max-width: 640px){ .grade-wrap{gap: 24px; flex-direction: column; align-items: flex-start;} .grade-wrap > div{width: 100%;} .grade-wrap .grade{padding: 30px; aspect-ratio: 1.8 / 1;} .process .process-wrap{ flex-wrap: wrap; gap: 16px; padding: 16px;} .process .process-wrap .circle{ width: calc((100% - 32px) / 3);} .process .process-wrap .circle:after{width: 9px; right: -13px;} .circle-txt strong{font-size: 17px;} .circle-txt span{font-size: 14px;} .big-tab ul li{font-size: 17px; padding: 16px 0;} .valuebox .txtbox .br-list.th{gap: 10px;} .valuebox .txtbox .br-list.th > li{width: 100%;} .valuebox .txtbox .right .list-circle{gap: 16px;} .valuebox .txtbox .right .list-circle i{width: calc((100% - 60px) / 3); border-width: 1px; box-sizing: border-box; padding-top: 10px;} .valuebox .txtbox .right .list-circle i{font-size: 16px;} .valuebox .txtbox .right .list-circle i span{font-size: 14px;} .valuebox .txtbox .right .list-circle i:nth-child(2):before{box-shadow: 0 0 30px #00A0E990; top: -10px;} .valuebox .imgbox{gap: 6px; padding: 90px 0 100px; margin-bottom: 130px;} .valuebox .imgbox p{font-size: 24px;} .valuebox .imgbox > i{font-size: 19px;} .valuebox .imgbox .flow-txt{bottom: -70px;} } /* ********************************************* * * 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;} */ .spirit{padding: 50px 0;} .comp1 .comp_li .imgwrap{ padding-bottom: 60%;} .talent{flex-direction: column; margin-top: 50px; gap: 80px;} .talent .img{width: 80vw;} .talent .txt ul div{width: 140px;} .talent .txt ul li{padding: 22px; gap: 22px;} .talent .txt ul:after{font-size: 45px; top: -45px;} .talent .txt ul i{font-size: 17px;} .talent .txt ul p, .talent .txt ul span{font-size: 15px;} .talent .txt h6{font-size: 22px;} .wrap_padding{padding: 70px 0;} .subtit{margin-bottom: 50px;} .subtit h6 {font-size: 32px;} .subtit p {font-size: 15px;} .subtit.none-flex{margin-bottom: 50px;} .spirit-con > div + div{margin-top: 50px;} .apply_list li > div .go{display: none;} .big-tab ul{flex-direction: column; flex-wrap: wrap; outline: 1px solid #ffffff66; border-radius: 6px;} .big-tab ul li{font-size: 16px; padding: 15px 0; width: 100%; border-width: 1px;} .big-tab ul li.on{outline: 1px solid var(--main-color); border-color: transparent; position: relative; z-index: 2; background-color: #00A0E910;} .big-tab ul li:first-child{border-radius: 6px 6px 0 0;} .big-tab ul li:last-child{border-bottom: none; border-radius: 0 0 6px 6px;} .business .subtab > ul > li{padding: 6px 16px ;} .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%;} .value-con .growht-con ul li {width: calc((100% - 20px) / 2);} .valuebox .txtbox .right .list-circle i{width: 100%; font-size: 15px;} .valuebox .txtbox .right .list-circle i span{font-size: 13px;} .valuebox .txtbox .right .br-list li p{font-size: 17px;} .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 .welfare .welfare-icon i {width: 45px;} /* .welfare-con .welfare .wel-txt p {font-size: 20px;} */ /* .welfare-con .welfare .wel-txt span {font-size: 16px;} */ .welfare-con .welfare{padding: 20px 24px;} .apply_list li em {font-size: 20px;} .apply_list li .bot p {font-size: 14px;} .apply_list li .top b {padding: 6px 15px; font-size: 14px;} .apply_list li .top p {margin-left: 0; font-size: 17px;} .apply_list li > div .info{width: 100%;} .apply_list li > div{border-radius: 8px; padding: 22px;} .rec .rec_filter{border-radius: 8px; padding: 22px;} /* .apply_list li .top{flex-direction: row-reverse; justify-content: space-between;} */ .apply_list li .top{ justify-content: space-between;} /* .process .process-wrap .circle {width: 180px;} .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::before{ font-size: 24px; top: -5px;} /* .faqlist li{padding: 22px 12px;} */ .faqlist li .faq_title .q{font-size: 17px; padding-left:36px ;} .faq_answer{padding: 16px 20px; font-size: 15px;} .faqlist li .faq_title{padding: 22px 12px;} .faq_answer{margin: 22px 12px;} .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;} .valuebox .txtbox .left span{font-size: 16px;} .value-tit{font-size: 24px;} .value-tit p{font-size: 16px; margin-top: 3px;} .valuebox .txtbox .left p, .valuebox .txtbox.value-li > ul > li .right .tit{font-size: 20px;} .valuebox .txtbox .right p{font-size: 15px;} .valuebox .txtbox .right .list i{font-size: 14px;} .valuebox .txtbox > ul > li > div.main-bg-d p{font-size: 18px; margin-bottom: 2px;} .valuebox .txtbox > ul > li > div.main-bg-d i{font-size: 15px;} .valuebox .txtbox .right .top p{font-size: 18px; } .valuebox .txtbox .right .top{margin-bottom: 15px;} .valuebox .txtbox .value-list li{gap: 4px; width: calc((100% - 20px) / 3 ); } .valuebox .txtbox .value-list li b{font-size: 16px;} .valuebox + .valuebox{margin-top: 50px;} /* .valuebox .txtbox.value-li > ul > li{gap: 12px;} */ .valuebox .txtbox.value-li > ul > li .left{width: 100px;} .valuebox .txtbox.value-li > ul > li .right .flex > i:first-child{font-size: 16px;} .spirit:after{right: 50%; transform: translateX(50%); font-size: 50px; top: -50px;} .spirit > div{gap: 30px;} .spirit > div .quot p{font-size: 22px;} .spirit > div .quot span{font-size: 16px;} .spirit-circle .top-txt h6{font-size: 32px; margin-bottom: 6px;} .spirit-circle .top-txt span{font-size: 18px;} .spirit-circle .top-txt span + span:before{margin: 0 4px; width: 2px; height: 2px; top: -6px;} .spirit-circle .top-txt .exp::before, .valuebox .txtbox .right .top:after{height: 40px; } .spititbox.valuebox .txtbox .right i, .spirit-circle .top-txt .exp p{font-size: 15px;} .spititbox.valuebox .txtbox > ul > li{padding: 30px 16px; gap: 16px;} .spititbox.valuebox .txtbox .left span{margin-top: 4px; font-size: 15px;} } /* ********************************************* * * 500px * ********************************************* */ @media screen and (max-width: 500px){ .process .process-wrap{flex-direction: column; padding: 0; gap: 20px; background-color: transparent;} .process .process-wrap .circle{width: 100%; aspect-ratio: auto; padding: 24px 0; box-shadow: 0 0 22px inset #00A0E930; background-color: #00A0E910;} .circle-txt{width: 100%; align-items: flex-start; padding-left: 100px;} .process .process-wrap .circle:nth-child(3):after{display: block;} .process .process-wrap .circle i{position: absolute; margin-bottom: 0; left: 28px; top: 50%; transform: translateY(-50%); width: 40px; } .process .process-wrap .circle:last-child i{width: 50px;} .process .process-wrap .circle:nth-child(5) i{width: 48px;} .process .process-wrap .circle:after{transform: translate(-50%, -50%) rotate(90deg); bottom: -32%; left: 50%; top: auto; opacity: .3;} .recview-tit .recview-detail {gap: 3px;} /* .circle-txt span {font-size: 18px;} .circle-txt strong {font-size: 18px;} */ .recview-tit .recview-detail ul li, .recview-tit .recview-detail .day{font-size: 15px;} .review-top .due-date{font-size: 15px; padding: 3px 11px 2px; font-weight: 600;} .recview-tit > p{font-size: 20px;} .review-top{padding: 24px 20px;} .rec .rec_filter .btn_flex div{font-size: 15px; padding: 8px 14px;} .rec .rectit p{font-size: 22px;} .rec form ul li{padding-top: 24px;} .btn-wrap02{gap: 10px; padding-top: 10px;} .btn-wrap02 button{width: 100%;} .br-list > li{padding: 20px; border-radius: 6px;} .br-list.fo > li, .br-list.fi > li{width: 100%;} .process-con dl dt ul.br-list.fi > li.main-pro{font-size: 16px !important;} .nurture .process-con dl dt ul > li.main-pro{font-size: 15px;} .nurture .process-con dl dt ul.br-list > li.main-pro{font-size: 16px;} .nurture .process-con dl dt ul > li ul li{font-size: 14px;} .br-list > li .img{border-radius: 4px;} .valuebox .txtbox .value-list{flex-direction: column; gap: 16px; justify-content: center; align-content: center;} .valuebox .txtbox .value-list li{margin: 0 auto; width: 60%;} .valuebox .txtbox .value-list li b{font-size: 19px;} .valuebox .txtbox .value-list li span{font-size: 16px;} .value-li-img{max-width: 90%;} .value-li-img img{content: url(https://d2ydyuwy7153rz.cloudfront.net/static/homepage/img/sub/value-li-mo.png);} .valuebox .txtbox .right .list-circle{flex-direction: column; margin: 0 auto 0; width: 56%; gap: 30px; gap: 0;} .valuebox .txtbox .right .list-circle i:nth-child(1), .valuebox .txtbox .right .list-circle i:nth-child(3){background-color: transparent; z-index: 3;} .valuebox .txtbox .right .list-circle i:nth-child(1){top:30px; margin-top: -30px;} .valuebox .txtbox .right .list-circle i:nth-child(3){bottom: 30px;margin-bottom: -30px;} .valuebox .txtbox .right .list-circle i:nth-child(2):before{top: auto;} .valuebox .txtbox .right .list-circle i{padding-top: 0; font-size: 17px;} .valuebox .txtbox .right .list-circle i span{font-size: 14px;} /* .valuebox .txtbox .right .list-circle:before{width: 1px; height: 105%; border-top: none; border-right: 1px dashed #41464f;} */ .valuebox .txtbox .right .list-circle:before{display: none;} .valuebox .imgbox{padding: 80px 0 85px; margin-bottom: 120px;} .valuebox .imgbox p{font-size: 20px; line-height: 1.6;} .valuebox .imgbox > i{font-size: 17px;} .valuebox .imgbox .flow-txt{bottom: -66px;} .subtab > ul{gap: 8px;} .big-tab ul li{font-size: 15px; padding: 14px 0;} .spirit:after{font-size: 40px; top: -40px;} .spirit > div .quot p{font-size: 20px;} .spirit-circle .circle{padding: 50px 16px;} .spirit-circle .top-txt{margin-bottom: 30px;} .spirit-circle .top-txt h6{font-size: 28px;} .spirit-circle .top-txt .exp::before, .valuebox .txtbox .right .top:after{height: 35px; margin: 12px auto;} .spirit > div .img{border-radius: 4px;} .spirit-circle .circle{border-radius: 4px;} } /* ********************************************* * * 470px * ********************************************* */ @media screen and (max-width: 470px){ .wrap_padding{padding: 60px 0;} .subtit{margin-bottom: 40px;} .subtit h6 {font-size: 30px;} .subtit p {font-size: 15px;} .subtit.none-flex{margin-bottom: 40px;} .talent{flex-direction: column; margin-top: 40px; gap: 80px;} .talent .img{width: 90vw;} .talent .txt ul{padding: 22px 16px;} .talent .txt ul div{width: 130px;} .talent .txt ul li{padding: 18px; gap: 18px;} .talent .txt ul:after{font-size: 40px; top: -40px;} .talent .txt ul i{font-size: 16px;} /* .talent .txt ul p, .talent .txt ul span{font-size: 15px;} */ .talent .txt h6{font-size: 22px;} .faqlist li .faq_title .q::before{ font-size: 22px; top: -4px;} /* .faqlist li{padding: 22px 10px;} */ .faqlist li .faq_title .q{font-size: 16px; padding-left: 34px ;} .faq_answer{padding: 16px; font-size: 15px;} .faqlist li .faq_title{padding: 22px 10px;} .faq_answer{margin: 22px 10px;} .grade-wrap .grade{padding: 20px; aspect-ratio: 1.6 / 1;} .grade-wrap + .grade-wrap{margin-top: 40px;} .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;} .comp_li .txt dl dt, .comp_li .txt dl dd{height: 50px; line-height: 50px;} .com-li ul{gap: 8px;} .out-circle {padding: 20px; width: 70%;} .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;} .business .subtab > ul > li{font-size: 15px; ;} .business .comp_li{margin-top: 34px;} .business .comp_li .txt{font-size: 15px; margin-top: 0px;} .business .comp_li .txt h6{font-size: 20px;} .business .comp_li .txt > div{padding: 26px 0 ;} .business .comp_li ul li .imgwrap{aspect-ratio: 2.6 / 1; border-radius: 4px;} .recview_content p img{clip-path: inset(1px);} @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;} /* .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;} .recview-tit .recview-detail {gap: 3px;} */ /* .circle-txt span {font-size: 18px;} .circle-txt strong {font-size: 18px;} */ .recview-tit .recview-detail .day{gap: 4px;} .review-top{padding: 20px;} .recview-tit > p{font-size: 20px;} .process .process-tit {font-size: 22px;} .process-con dl{gap: 12px;} .process-con dl dd {font-size: 18px;} .process-con dl dd span{font-size: 14px;} .process-con dl {padding: 30px 16px;} .process-con dl dt ul > li.main-pro{font-size: 15px;} /* .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; margin-bottom: 10px;} /* .apply_list li .top p {margin-left: 10px;} */ .recview_content {width: auto;} .spirit-con .br-none{display: block;} } /* ********************************************* * * 430px * ********************************************* */ @media screen and (max-width: 430px){ .business .comp_li ul.pd-list{gap: 10px;} .business .comp_li ul.pd-list > li{ width: 100%;} .pd-list span{font-size: 17px;} .business .comp_li ul.pd-list > li{padding: 15px; border-radius: 4px;} .nurture .process-con dl dd{font-size: 22px;} .value-tit{margin-bottom: 22px;} .valuebox .txtbox > ul{margin-top: 10px;} .value-tit{font-size: 21px;} .value-tit p{font-size: 15px;} .valuebox .txtbox > ul > li > div.main-bg-d{padding: 50px 10px ;} .apply_list li em{font-size: 18px;} .apply_list li .bot p, .apply_list li .bot p.bay{font-size: 13px;} .rec .searchbox{height: 46px;} .apply_list li > div{padding: 22px; border-radius: 4px;} .rec .rec_filter{border-radius: 4px;} .rec .searchbox{border-radius: 4px;} .apply_list li .top b{font-size: 13px; padding: 5px 10px;} .apply_list li .top p{font-size: 15px;} .apply_list li + li{margin-top: 10px;} .valuebox .txtbox.value-li > ul{padding: 8px 0;} .valuebox .txtbox.value-li > ul > li{flex-direction: column; align-items: center; gap: 26px; border-radius: 8px; margin: 12px 0; margin-left: auto; margin-right: auto; padding: 20px; border: none; } .valuebox .txtbox.value-li > ul > li .right .flex > i:last-child{border-color: #444;} .valuebox .txtbox.value-li .right{padding: 0;} .valuebox .txtbox.value-li > ul > li .left{padding-top: 10px;} .valuebox .txtbox.value-li > ul > li .right .flex i{font-size: 15px;} .valuebox .txtbox.value-li > ul > li .right .tit span{font-size: 18px;} .valuebox .txtbox.value-li > ul > li .right .tit p{font-size: 15px;} .valuebox .txtbox.value-li > ul > li + li{margin-top: 12px;} .valuebox .txtbox .right .br-list li p{font-size: 16px;} /* .spirit > div .quot p{font-size: 18px;} */ .spirit > div .quot em{padding-bottom: 16px;} .spirit > div .quot span{padding-top: 16px; font-size: 15px;} .spititbox.valuebox .txtbox .left span{font-size: 14px; margin-top: 2px;} } /* ********************************************* * * 400px * ********************************************* */ @media screen and (max-width: 400px){ .subtit{margin-bottom: 34px;} .subtit h6{font-size: 26px;} .br-list > li{padding: 18px; border-radius: 4px;} .br-list > li .img{border-radius: 2px;} .talent{flex-direction: column; margin-top: 30px; gap: 70px;} .talent .txt ul div{border-bottom: 2px solid #3d3d3d; border-right: none; width: 100%; padding-bottom: 10px;} .talent .txt ul li{padding: 16px; gap: 10px; flex-direction: column; align-items: flex-start; } .talent .txt ul:after{font-size: 36px; top: -36px;} .talent .txt ul i{font-size: 17px;} .talent .txt ul div{display: flex; flex-direction: column-reverse;} .talent .txt ul i br{display: none;} .talent .txt ul p, .talent .txt ul span{font-size: 15px;} .talent .txt h6{font-size: 20px;} .circle-txt{padding-left: 90px;} .process .process-wrap .circle i{left: 20px;} .process .process-wrap .circle{padding: 20px 0;} .circle-txt{gap: 0;} .process .process-wrap{gap: 16px;} .process .process-wrap .circle:after{width: 8px; bottom: -33%;} .process-con dl {padding: 30px 10px;} .grade-wrap .grade{padding: 16px;} .business .comp_li ul li .left p{font-size: 22px;} .business .comp_li ul li .left{margin-bottom: 24px;} .business .comp_li .txt p + p{margin-top: 10px;} .review-top .due-date{font-size: 14px; padding: 3px 11px 2px; font-weight: 600;} .recview-tit .recview-detail ul li, .recview-tit .recview-detail .day{font-size: 14px;} .recview-tit .recview-detail ul li{padding: 0 8px;} .btn-wrap02{gap: 10px; padding-top: 0; flex-direction: column;} .btn-wrap02 button{padding: 14px 0;} .valuebox .txtbox .value-list li{width: 70%;} .valuebox .txtbox .value-list li b{font-size: 17px;} .valuebox .txtbox .value-list li span{font-size: 15px;} .value-li-img{max-width: 100%;} .valuebox .txtbox .right .list-circle{ gap: 0;} .valuebox .imgbox{padding: 60px 0 65px; margin-bottom: 110px;} .valuebox .imgbox p{font-size: 18px; } .valuebox .imgbox > i{font-size: 15px;} .valuebox .imgbox .flow-txt{bottom: -62px;} .spirit-circle .top-txt h6{font-size: 26px;} .spititbox.valuebox .txtbox .left p{font-size: 18px;} .spititbox.valuebox .txtbox > ul > li{padding: 30px 10px;} .spirit-circle .circle{padding: 40px 16px;} } /* ********************************************* * * 380px * ********************************************* */ @media screen and (max-width: 380px){ .subtit p {font-size: 14px;} .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: -45px; left: -33px; } .circle-ball.ball2 {top: -45px; right: -33px; } .circle-ball.ball3 {bottom: -45px; left: -33px; } .circle-ball.ball4 {bottom: -45px; right: -33px;} /* .faqlist li .faq_title .q span {font-size: 17px;} */ .comp_li .txt dl dt{padding-left: 8px;} .comp_li .txt dl dt{width:24%} .comp_li .txt dl dd{width: 84%;} /* .faqlist li{padding: 20px 0;} */ .faqlist li .faq_title{padding: 20px 0;} .faq_answer{margin: 20px 0;} .faqlist li .faq_title .q{padding-left: 40px;} .faqlist li .faq_title .q::before{left: 8px;} .review-top{padding: 16px ;} .recview-tit .recview-detail{gap: 2px;} .recview-tit .recview-detail .day{font-size: 13px;} .valuebox .txtbox.value-li > ul > li .left{width: 90px;} } /* ********************************************* * * 360px * ********************************************* */ @media screen and (max-width: 360px){ .valuebox .txtbox .right .list-circle{width: 75%;} .valuebox .imgbox{gap: 4px;} .valuebox .imgbox p{font-size: 17px; } .valuebox .imgbox > i{font-size: 14px;} } /* ********************************************* * * 320px * ********************************************* */ @media screen and (max-width: 320px){ .spirit:after{font-size: 32px; top: -32px;} .spirit > div .quot p{font-size: 17px;} .spirit-circle .top-txt span{font-size: 17px;} .spirit-circle .top-txt span + span:before{top: -4px;} .spirit-circle .top-txt h6{font-size: 24px;} /* .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;} */ .talent .txt h6{font-size: 18px;} .talent .txt ul i{font-size: 15px;} .talent .txt ul p, .talent .txt ul span{font-size: 14px;} .talent .txt ul:after{font-size: 30px; top: -30px;} .recview-tit .recview-detail .day{font-size: 12px;} .review-top{padding: 20px 6px; background: transparent; border-bottom: 1px solid #999; border-radius: 0; border-top: 1px solid #999;} .circle-tit em {width: 32%;} .circle-tit p {font-size: 16px;} .circle-tit span {font-size: 13px;} .circle-ball {width: 60%;} .comp_li .txt dl dt, .comp_li .txt dl dd{font-size: 13px;} .circle-txt{padding-left: 84px;} .value-con .growht-con ul li {width: 100%;} .page-nav .page-btn i {font-size: 18px;} .valuebox .imgbox p{font-size: 16px; } .valuebox .imgbox > i{font-size: 13px;} }