@charset "utf-8"; /*------------------------------------ sub_Layout ------------------------------------*/ #max_contanier[role="sub"] {margin-bottom: 15rem;} .sub_content {padding-bottom:5rem; color:#fff; } .sub_content section { position: relative; width: 100%; overflow: hidden;} .sub_content .vimeo-background {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;} .sub_content .vimeo-background:before {content:''; width: 100%; height: 100%; background: #000; opacity:.5; position: absolute; left:0; top:0; z-index:1;} .sub_content .vimeo-video { position: absolute; top: 50%; left: 50%; width: 100vw;height: 56.25vw; /* 16:9 비율 */min-height: 100vh;min-width: 187.77vh; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none;} .sub_content .korea {background-image:url(../images/common/flag_korea.svg);} .sub_content .japan {background-image:url(../images/common/flag_japan.svg);} .sub_content .china {background-image:url(../images/common/flag_china.svg);} .sub_content .india {background-image:url(../images/common/flag_india.svg);} .sub_content .iran {background-image:url(../images/common/flag_iran.svg);} .sub_content .usa {background-image:url(../images/common/flag_usa.svg);} .sub_content .mexico {background-image:url(../images/common/flag_maxico.svg);} .sub_content .uae {background-image:url(../images/common/flag_uae.svg);} .sub_content .panama {background-image:url(../images/common/flag_panama.svg);} @media screen and (max-width: 768px) { #max_contanier[role="sub"] {margin-bottom: 5rem;} } ​ /*------------------------------------ sub1-1 CEO GREETING -------------------------------------*/ #greeting {position: relative; } #greeting_intro {position: relative;width: 100%; height: 100vh; overflow:hidden;} #greeting_intro::before {content:'SANGSIN ENG'; z-index:-1; color:#fff; opacity:.025; text-align: center;font-size: 12vw; font-weight: 900;position: sticky;top:50%; left:0;display: block; width: auto; transform: translateY(-50%); height: auto; } #greeting_intro .clip { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; clip-path: circle(5vw at 50% 50%); } #greeting_intro .intro_cont {opacity:0; width: 100%; position: fixed; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2;} #greeting_intro .intro_cont .title_box {text-align: center; display: flex;flex-direction: column; align-items: center;} #greeting_intro .intro_cont .title_box > h2 {font-family: var(--ft-02);font-size: 3.5em;} #greeting_intro .intro_cont .title_box > p {display: flex; flex-direction: column; align-items: center; margin-top: 7rem;} #greeting_intro .intro_cont .title_box > p > span {font-size: 1.5em; margin-bottom: 2rem; } #greeting_intro .intro_cont .title_box > p > em.logo {display: block; width: 24rem; height: 4rem; background:url(../images/common/logo_w.svg) no-repeat center / contain;} #greeting_ceo {display: flex;flex-direction: row-reverse; margin:15rem 0; } #greeting_ceo .ceo_photo {width: 30%; } #greeting_ceo .ceo_photo p { position: relative; width: 80%; aspect-ratio: 1 / 1; margin-top: 6rem; } #greeting_ceo .ceo_photo p::before {content:''; width: 100%; height:100%; background: #A88977; opacity:.2; position: absolute; right:-10%; bottom:-10%;z-index:-1; border-radius:2rem;} #greeting_ceo .ceo_photo img{width: 100%; display: block; border-radius:2rem; overflow:hidden;} #greeting_ceo .ceo_text {width: calc(100% - 30%);} #greeting_ceo .ceo_text .title{} #greeting_ceo .ceo_text .title span{font-weight: bold; color:var(--main-color1); } #greeting_ceo .ceo_text .title p {margin-top: 3rem;font-size: 1.8em; line-height: 1.5; font-weight: 600;} #greeting_ceo .ceo_text .ment {width: 80%; margin-top: 8rem;} #greeting_ceo .ceo_text .ment > p {margin:3rem 0; line-height: 1.8; opacity:.7; font-size: .95em;word-break: keep-all; } #greeting_ceo .ceo_text .ment > .signature {margin-top: 5rem; display: flex; align-items: center;} #greeting_ceo .ceo_text .ment > .signature > p {font-weight: bold;} #greeting_ceo .ceo_text .ment > .signature > p > span{margin-left:3rem;} #greeting_ceo .ceo_text .ment > .signature > mark.sign {margin-left:2rem; display: inline-block; width: 10rem; height: 5rem; mix-blend-mode: exclusion; background:url(../images/sub/ceo_sign.png) no-repeat center/ contain; } #greeting_infomation {} #greeting_infomation > em {display: block;opacity:.5; text-align: right; font-size: .85em;margin-bottom: 1rem;} #greeting_infomation .info_cards {display: flex; margin: 0 -1%;} #greeting_infomation .info_cards li {width: 25%; padding:1%; aspect-ratio: 1 / 1.25; } #greeting_infomation .info_box {position: relative; width: 100%; height:100%; background: #222; border-radius:2rem;} #greeting_infomation .info_box > i {position: absolute; right:13%; top:13%; display: inline-block; width: 7rem; height: 7rem; background-repeat:no-repeat; background-size:cover; background-position:center;} #greeting_infomation .info_box > .counter {position: absolute; left:15%; bottom:7%;} #greeting_infomation .info_box > .counter > span{display: inline-block; margin-bottom: 2rem; font-size: 1.125em; font-weight: bold;} #greeting_infomation .info_box > .counter > p { display: flex; align-items: baseline;} #greeting_infomation .info_box > .counter > p > span {font-size: 3.5em; font-family: var(--ft-03);} #greeting_infomation .info_box > .counter > p > em {margin-left:1rem;} #greeting_infomation .info_box.sec01 > i { background-image:url(../images/sub/ico_info01.svg);} #greeting_infomation .info_box.sec02 > i { background-image:url(../images/sub/ico_info02.svg);} #greeting_infomation .info_box.sec03 > i { background-image:url(../images/sub/ico_info03.svg);} #greeting_infomation .info_box.sec04 > i { background-image:url(../images/sub/ico_info04.svg);} #greeting_infomation .info_box:hover {background: var(--main-color1); box-shadow:0 0 20px 0 var(--main-color1); } @media screen and (max-width: 1400px) { } @media screen and (max-width: 1024px) { #greeting_intro .intro_cont .title_box > h2 {font-size: 6vw;} #greeting_intro .intro_cont .title_box > p > span {font-size: 1.2em; } #greeting_intro .intro_cont .title_box > p > em.logo {width: 20rem;} } @media screen and (max-width: 768px) { #greeting_intro {display: none;} #greeting_ceo {margin: 0 0 10rem; flex-direction: column;} #greeting_ceo .ceo_photo {width: 50%; margin:0 auto 8rem;} #greeting_ceo .ceo_photo p {margin-top: 0;} #greeting_ceo .ceo_text {width: 100%;} #greeting_ceo .ceo_text .ment {width: 100%; margin-top: 5rem;} #greeting_infomation .info_cards {flex-wrap: wrap;} #greeting_infomation .info_cards li {width: 48%;} #greeting_infomation .info_box > .counter > p > span {font-size: 3em;} #greeting_infomation .info_box > i {width: 5rem; height: 5rem;} } @media screen and (max-width: 568px) { #greeting_intro .intro_cont .title_box > p {margin-top: 4rem;} #greeting_intro .intro_cont .title_box > p > span {font-size: 1em; width: 70%; word-break: keep-all;} #greeting_intro .intro_cont .title_box > p > em.logo {width: 15rem;} #greeting_ceo .ceo_photo {width: 70%;} #greeting_ceo .ceo_photo p {margin:0 auto;} #greeting_ceo .ceo_text .title {text-align: center;} #greeting_ceo .ceo_text .title p {font-size: 1.25em; margin-top: 2rem;} #greeting_ceo .ceo_text .ment > p {text-align: center; font-size: .85em;} #greeting_ceo .ceo_text .ment > .signature { justify-content: center;} #greeting_ceo .ceo_text .ment > .signature > p > span {margin-left:1rem;} #greeting_infomation .info_box > .counter > span {font-size: 1em; margin-bottom: 1rem;} #greeting_infomation .info_box > .counter > p > span {font-size: 8vw;} } /*------------------------------------ sub1-2 HISTORY -------------------------------------*/ #history {position: relative; } #history > .inner {position: relative; } #history .history_liner {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; z-index: 1;} #history .history_liner .line_bg {width: 100%; height: 100%; background: #252525; } #history .history_liner .line_progress {width: 100%; height: 0; background: var(--main-color1); position: absolute; top: 0; left: 0;} #history .history_liner .line_arrow {position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: 4rem; height: 4rem; border-radius: 100%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--main-color1); z-index: 2; box-shadow:0 0 30px 0 var(--main-color1);} #history .history_liner .line_arrow i {} #history #history_wrap {display: flex; justify-content: space-between;} #history #history_wrap.even {flex-direction: row;} #history #history_wrap.odd { flex-direction: row-reverse; margin:15rem 0;} #history #history_wrap .title_area {width: 40%;} #history #history_wrap .title_area .since_box {} #history #history_wrap .title_area .since_box > em {font-weight: bold;} #history #history_wrap .title_area .since_box > h3 {font-size: 3em;} #history #history_wrap .title_area .since_cont {margin-top: 5rem;} #history #history_wrap .title_area .since_cont .text_box {margin-bottom: 3rem;} #history #history_wrap .title_area .since_cont .text_box > p {font-size: 1.35em; } #history #history_wrap .title_area .since_cont .text_box > span {display: block; margin-top: 2rem;font-size: .9em; line-height: 1.5; opacity:.8;} #history #history_wrap .title_area .since_cont .img_box {overflow:hidden; border-radius:3rem; width: 55rem;} #history #history_wrap .title_area .since_cont .img_box img {width: 100%;display: block;} #history #history_wrap .history_area {width: 40%;} #history #history_wrap .history_area ul {margin-top: 5rem; } #history #history_wrap .history_area ul li {display: flex;margin:5rem 0; opacity:0.05;} #history #history_wrap .history_area ul li .year {width: 20%;font-size: 1.25em;} #history #history_wrap .history_area ul li .cont {width: calc(100% - 20%);} #history #history_wrap .history_area ul li .cont > p {margin-bottom:2rem; opacity:.7;} #history #history_wrap .history_area ul li .cont > p.op {font-weight: bold; font-size: 1.25em; color:var(--main-color1)} @media screen and (max-width: 1400px) { #history #history_wrap .title_area .since_cont .text_box > span {word-break: keep-all;} #history #history_wrap .title_area .since_cont .text_box > span br{display: none; } #history #history_wrap .title_area .since_cont .img_box {width: 100%; max-width: 45rem;} } @media screen and (max-width: 1024px) { #history #history_wrap .title_area .since_box > h3 {font-size: 2.5em;} #history #history_wrap .history_area ul {margin-top: 0;} #history #history_wrap .history_area ul li {margin:3rem 0;} } @media screen and (max-width: 768px) { #history .history_liner {left: 10%;transform: none; } #history #history_wrap {width: 100%;} #history #history_wrap.odd, #history #history_wrap.even {flex-direction: column; margin: 10rem 0;} #history #history_wrap .title_area {width: 85%; padding-left: 15%;} #history #history_wrap .history_area {width: 85%; padding-left: 15%; margin-top: 5rem;} #history #history_wrap .history_area ul li {margin:2rem 0;word-break: keep-all;} #history #history_wrap .history_area ul li .cont > p {margin-bottom: 1rem;} } @media screen and (max-width: 568px) { #history .history_liner .line_arrow {width: 3rem; height: 3rem;} #history #history_wrap .title_area .since_box > h3 {font-size: 7vw;} #history #history_wrap .title_area .since_cont {margin-top: 3rem;} #history #history_wrap .title_area .since_cont .text_box > span {margin-top: 1rem;} #history #history_wrap .title_area .since_cont .img_box {border-radius:2rem;} #history #history_wrap .history_area ul li {font-size: .9em;} #history #history_wrap.odd, #history #history_wrap.even {margin:7rem 0;} } /*------------------------------------ sub1-3 DEPARTMENTS -------------------------------------*/ #department {position: relative; } #department > .inner {max-width:1500px;} #department .dep1_wrap {position: relative; width: 100%;} #department .dep1_wrap .dep1_area{padding-bottom:20rem; display: flex; justify-content: center;} #department .dep1_wrap .dep1_area .part_ceo{background: var(--main-color1);width: 25rem;height: 11rem;border-radius: 2rem;display: flex;flex-direction: column;align-items: center;justify-content: center;} #department .dep1_wrap .dep1_area::before {content:'';width: 1px;height: 100%;background: #777;position: absolute;left:50%;top: 0;z-index: -1;} #department .dep1_wrap .dep1_area .part_ceo .logo {display: block;width: 16rem;height: 3rem;background:url(../images/common/logo_w.svg) no-repeat center / contain;} #department .dep1_wrap .dep1_area .part_ceo p {font-weight: bold;margin-top: 1rem;} #department .dep1_wrap .dep1_area .part_box {position: absolute;left: 0;top:50%;width: 50%;display: block;height: auto;} #department .dep1_wrap .dep1_area .part_box .direct{position: absolute;right: 0;background: #003288;width: 20rem;height:6rem;display: flex;align-items: center;justify-content: center;border-radius: 1rem;border: 1px solid #1c56b9;transform: translateX(-100%);} #department .dep1_wrap .dep1_area .part_box .direct::before {content:'';width: 100%;height:1px;background: #777;position: absolute;left: 100%;top: 50%;} #department .dep1_wrap .dep1_area .part_box .direct p { font-weight: bold;} #department .dep2_wrap {display: flex; position: relative; } #department .dep2_wrap .dep2_area.andy {position: relative; width: 20%;} #department .dep2_wrap .dep2_area.andy .dep4_warp {position: absolute; bottom:0; width: 100%;} #department .dep2_wrap .dep2_area.andy .dep4_warp .dep4_area {display: flex; justify-content: center;width: 100%; position: relative; } #department .dep2_wrap .dep2_area.andy::before {content:'';width: 120%;height:1px;background: #777;position: absolute;left: 50%;top: 8.5rem;} #department .dep2_wrap .dep2_area.andy::after {content:'';width: 1px;height: 21.5rem;background: #777;position: absolute;left:50%;top: 8.5rem;} #department .dep2_wrap .dep2_area.andy .dep4_warp .dep4_area .part_box.dep4{position: relative; width: 20rem ; height: 30rem; margin:0 1rem;} #department .dep2_wrap .dep2_area.andy .dep4_warp .dep4_area .part_box.dep4 > div {border:1px solid #333; background: #222; border-radius:1rem; height: 100%; margin:0 1rem; padding:0 10%; text-align: center;} #department .dep2_wrap .dep2_area.andy .dep4_warp .dep4_area .part_box.dep4 > div > p {font-weight: 600;font-size: 1.125em; margin-top: 3rem;} #department .dep2_wrap .dep2_area.andy .dep4_warp .dep4_area .part_box.dep4 > div > ul {margin-top: 2rem;} #department .dep2_wrap .dep2_area.andy .dep4_warp .dep4_area .part_box.dep4 > div > ul > li {line-height:2; font-size: .9em; opacity:.7;} #department .dep2_wrap .dep2_area.main {position: relative; width: 40%; padding-top:5rem; display: flex ; flex-direction: column; align-items: center; } #department .dep2_wrap .dep2_area.main:before {content:''; width: 1px; height: 5rem; background: #777; position: absolute; left:50%; top:0; } #department .dep2_wrap .dep2_area.main:after {content:'';height:1px;background: #777;position: absolute;} #department .dep2_wrap .dep2_area.main.main_left::after {width: 50%; left: 50%;top: 0;} #department .dep2_wrap .dep2_area.main.main_right::after {width:50%; left: 0%;top: 0;} #department .dep2_wrap .dep2_area.main.main_right .part_box.dep2 {margin-bottom:2.5rem} #department .dep2_wrap .dep2_area.main.main_right .part_box.dep2::before {height: 2.5rem;} #department .dep2_wrap .dep2_area.main.main_right .dep3_wrap .dep3_area {position: relative; padding-top:2.5rem;} #department .dep2_wrap .dep2_area.main.main_right .dep3_wrap .dep3_area::before {content:''; width: 1px; height: 2.5rem; background: #777; position: absolute; left:50%; top:0; } #department .dep2_wrap .dep2_area.main.main_right .dep3_wrap .dep3_area::after{content:''; height: 1px; background: #777; position: absolute; top:0; } #department .dep2_wrap .dep2_area.main.main_right .dep3_wrap .dep3_area.dep3_2::after {width: 50%; left:50%;} #department .dep2_wrap .dep2_area.main.main_right .dep3_wrap .dep3_area.dep3_3::after {width: 50%; left:0;} #department .dep2_wrap .dep2_area .part_box.dep2 {position: relative;width: 20rem;height: 7rem;background: var(--main-color1);margin-bottom: 5rem;display: flex;align-items: center;justify-content: center;border-radius: 6rem;} #department .dep2_wrap .dep2_area .part_box.dep2:before {content:''; width: 1px; height: 5rem; background: #777; position: absolute; left:50%; top:100%; } #department .dep2_wrap .dep2_area .part_box.dep2 p {font-weight: bold;} #department .dep2_wrap .dep2_area .dep3_wrap {display: flex; width: 100%;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area {display: flex;flex-direction: column; align-items: center; width: 100%;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .part_box.dep3{position: relative;width: 20rem;height: 5rem;background: #444;margin-bottom: 5rem;display: flex;align-items: center;justify-content: center;border: 1px solid #777;border-radius: 1rem;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .part_box.dep3::before {content:''; width: 1px; height: 5rem; background: #777; position: absolute; left:50%; top:100%; } #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap {width: 100%;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area {display: flex; justify-content: center; width: 100%; position: relative;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area .part_box.dep4{display: flex; position: relative; width: 20rem; padding-top:3rem; height: 30rem; } #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area .part_box.dep4 > div {border:1px solid #333; background: #222; border-radius:1rem; width: 100%; height: 100%; margin:0 1rem; padding:0 10%; text-align: center;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area .part_box.dep4 > div > p {font-weight: 600;font-size: 1.125em; margin-top: 3rem;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area .part_box.dep4 > div > ul {margin-top: 2rem;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area .part_box.dep4 > div > ul > li {line-height:2; font-size: .9em; opacity:.7;} #department .dep2_wrap .dep2_area.main .part_box.dep4::before {content:''; width: 1px; height: 3rem; background: #777; position: absolute; left:50%; top:0; } #department .dep2_wrap .dep2_area.main .part_box.dep4::after {content:''; height: 1px; background: #777; position: absolute; top:0; } #department .dep2_wrap .dep2_area.main .part_box.dep4_1::after {width: 50%; left:50%;} #department .dep2_wrap .dep2_area.main .part_box.dep4_2::after {width: 100%; left:0;} #department .dep2_wrap .dep2_area.main .part_box.dep4_3::after {width: 50%; left:0;} #department .dep2_wrap .dep2_area.main .part_box.dep4_4::after {width: 50%; left:50%;} #department .dep2_wrap .dep2_area.main .part_box.dep4_5::after {width: 50%; left:0;} @media (max-width: 1400px) and (min-width: 1024px) { #department { overflow-x: auto; } #department > .inner { min-width: 1400px; } #department::-webkit-scrollbar { height: 4px; } #department::-webkit-scrollbar-track { background: transparent; } #department::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; } } @media screen and (max-width: 1024px) { #department .dep1_wrap {overflow:hidden;} #department .dep1_wrap .dep1_area{justify-content: flex-start; padding-bottom: 10rem; align-items: center;} #department .dep1_wrap .dep1_area .part_ceo {width: 40%; height: auto; padding: 2rem 0;} #department .dep1_wrap .dep1_area .part_box {position: relative;left:60%; top: auto;} #department .dep1_wrap .dep1_area .part_box .direct {width: 60%;right:auto; position: relative; } #department .dep1_wrap .dep1_area .part_box .direct::before {left:-100%;} #department .dep1_wrap .dep1_area::before {left: calc(40% / 2);} #department .dep2_wrap .dep2_area {position: relative;} #department .dep2_wrap::before {content: ''; width: 1px; height: calc(100% - (70vh / 2)); background: #777; position: absolute; top: 0; left: calc(40% / 2);} #department .dep2_wrap .dep2_area.andy {position: absolute; left: 40%; width: 60%; top: -3.5vw;} #department .dep2_wrap .dep2_area.andy::before {width: 10%; top:50%; left:0; } #department .dep2_wrap .dep2_area.andy::after {display: none;} #department .dep2_wrap .dep2_area.andy .dep4_warp {position: relative; } #department .dep2_wrap .dep2_area.andy .dep4_warp .dep4_area .part_box.dep4 {width: 90%; margin:0; margin-left:10%; height: auto;} #department .dep2_wrap .dep2_area.andy .dep4_warp .dep4_area .part_box.dep4 > div {margin:0; height: auto; padding:5%;} #department .dep2_wrap .dep2_area.andy .dep4_warp .dep4_area .part_box.dep4 > div > p {margin-top: 0;} #department .dep2_wrap {flex-direction: column;} #department .dep2_wrap .dep2_area.main {width: 100%; align-items: flex-start; padding-top: 0;} #department .dep2_wrap .dep2_area.main:before {display: none;} #department .dep2_wrap .dep2_area.main.main_left::after{display: none;} #department .dep2_wrap .dep2_area.main .part_box.dep4::before {width: 5.5%; height: 1px; left: -5.5%; top: 50%; } #department .dep2_wrap .dep2_area.main .part_box.dep4::after {width: 1px; height:100%; left: -5.5%; top: 0; } #department .dep2_wrap .dep2_area.main .part_box.dep4:first-child::after { height: calc(100% - (5rem / 2)); top: calc(5rem / 2);} #department .dep2_wrap .dep2_area.main .part_box.dep4:last-child::after {height: 50%;top:0} #department .dep2_wrap .dep2_area.main .part_box.dep4.dep4_6:last-child::after {height: calc(50% - (5rem / 2)); top: calc(5rem / 2);} #department .dep2_wrap .dep2_area .part_box.dep2 {width: 40%; height: 6rem; border-radius: 1rem;} #department .dep2_wrap .dep2_area .dep3_wrap {width: 100%;flex-direction: column; } #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .part_box.dep3 {width: 40%;margin-bottom: 0; } #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .part_box.dep3::before{display: none;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap {position: relative; width: 60%;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area {flex-direction: row; align-items: flex-start;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area {flex-direction: column;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area::before{content:''; width: 5%; height: 1px; background: #777; position: absolute; top:2.5rem; left:0;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area .part_box.dep4 > div > ul {margin-top: 1rem;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area .part_box.dep4 {width: 90%; margin-left:10%; padding-top: 0; padding-bottom: 1rem; height: auto;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area .part_box.dep4 > div {margin:0;padding:10% 5%;} #department .dep2_wrap .dep2_area .dep3_wrap .dep3_area .dep4_wrap .dep4_area .part_box.dep4 > div > p {margin-top: 0;font-size: 1em;} #department .dep2_wrap .dep2_area.main.main_right::after {display: none;} #department .dep2_wrap .dep2_area.main.main_right .dep3_wrap .dep3_area::before {display: none;} #department .dep2_wrap .dep2_area.main.main_right .dep3_wrap .dep3_area.dep3_2::after {display: none;} #department .dep2_wrap .dep2_area.main.main_right .dep3_wrap .dep3_area.dep3_3::after {display: none;} #department .dep2_wrap .dep2_area.main.main_right .part_box.dep2 {margin-bottom: 0; height: 6rem; border-radius: 1rem;} } @media screen and (max-width: 768px) { #department .dep2_wrap::before { height: calc(100% - (55vh / 2)); } #department .dep1_wrap .dep1_area .part_ceo .logo {width: 25vw;} } @media screen and (max-width: 568px) { #department .dep1_wrap .dep1_area .part_ceo {padding:1rem 0;} #department .dep1_wrap .dep1_area .part_box .direct {height: auto; padding:1rem 0;} } /*------------------------------------ sub1-4 PARTNERS -------------------------------------*/ #global {} #global #map_wrap {position: relative;} #global #map_wrap > * {position: absolute; } #global #map_wrap .title_area { z-index:1; top: 5%; left:50%;width: 100%; transform:translateX(-50%); text-align: center;} #global #map_wrap .title_area > h3 { color:var(--main-color1); font-family: var(--ft-02); font-size: 2.5em; font-weight: 900;} #global #map_wrap .title_area > p {font-weight: 600; font-size:2em; margin-top: 3rem;} #global #map_wrap .title_area > span {line-height: 1.5; display: inline-block; margin-top: 1rem; opacity:.7; } #global #map_wrap .title_area .info_cards {display: flex; width: 100%; max-width:90rem; margin:0 auto; margin-top: 3rem;} #global #map_wrap .title_area .info_cards li {width: 25%; } #global #map_wrap .title_area .info_box {position: relative; width: 100%; height:100%; } #global #map_wrap .title_area .info_box > .counter {position: relative; } #global #map_wrap .title_area .info_box > .counter > span{display: inline-block; margin-bottom: 1rem; font-size:0.9em; font-weight: bold;} #global #map_wrap .title_area .info_box > .counter > p { display: flex; justify-content: center; align-items: baseline;} #global #map_wrap .title_area .info_box > .counter > p > span {font-size: 2.5em; font-family: var(--ft-03);} #global #map_wrap .title_area .info_box > .counter > p > em {margin-left:1rem; font-size: .9em;} #global #map_wrap .map_area {position: relative; aspect-ratio: 1920 / 900; background:url(../images/sub/global_bg.png) no-repeat center bottom;background-size:contain; width: 100%; } #global #map_wrap .map_area .pin_area {position: relative; width: 100%; height: 100%; top: 0; left: 0; } #global #map_wrap .map_area .pin {position: absolute; z-index: 0;} #global #map_wrap .map_area .pin i { position: relative; display: inline-block; width: 6px; height: 6px; background: #fff; border-radius: 100%; z-index:1;} #global #map_wrap .map_area .pin i:after { width: 25px; height: 25px; animation-delay: 0.4s; z-index:-1; content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 100%; background: var(--main-color1); opacity: 0.25; z-index:-1; animation: pulseCircle 1.8s infinite ease-out;} #global #map_wrap .map_area .pin.pin_ko {left: 40.2%;top: 55%;} #global #map_wrap .map_area .pin.pin_01 {left: 42%;top: 56%;} #global #map_wrap .map_area .pin.pin_02 {left: 43.2%;top: 55%;} #global #map_wrap .map_area .pin.pin_03 {left: 44%;top: 53%;} #global #map_wrap .map_area .pin.pin_04 {left: 37.5%;top: 57%;} #global #map_wrap .map_area .pin.pin_05 {left: 36.5%;top: 60%;} #global #map_wrap .map_area .pin.pin_06 {left: 34%;top: 62%;} #global #map_wrap .map_area .pin.pin_07 {left: 34.5%;top: 54%;} #global #map_wrap .map_area .pin.pin_08 {left: 32%;top: 53%;} #global #map_wrap .map_area .pin.pin_09 {left: 30.5%;top: 67%;} #global #map_wrap .map_area .pin.pin_10 {left: 25%;top: 59%;} #global #map_wrap .map_area .pin.pin_11 {left: 25%;top: 65%;} #global #map_wrap .map_area .pin.pin_12 {left: 23.8%;top: 67%;} #global #map_wrap .map_area .pin.pin_13 {left: 19.5%;top: 55%;} #global #map_wrap .map_area .pin.pin_14 {left: 80%;top: 51%;} #global #map_wrap .map_area .pin.pin_15 {left: 81%;top: 62%;} #global #map_wrap .map_area .pin.pin_16 {left: 82%;top: 64%;} /* Ripple animation */ @keyframes pulseCircle { 0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.4; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } #global #list_wrap {overflow:inherit;} #global #list_wrap .tab_area {position:sticky; top:20vh; height: 50rem;;} #global #list_wrap .tab_area ul {} #global #list_wrap .tab_area ul li {margin-bottom:2rem;} #global #list_wrap .tab_area ul li {} #global #list_wrap .tab_area a {display: inline-block; opacity:.2; } #global #list_wrap .tab_area a.active {opacity:1;} #global #list_wrap .tab_area a > i.flag {display: inline-block;width: 3rem; height: 2rem; background-repeat:no-repeat; background-size:cover; background-position:center;} #global #list_wrap .tab_area a > span {margin-left:2rem; font-size: 1.6em;font-weight: 900; color:#fff;} #global #list_wrap .list_area {} #global #list_wrap .list_area section.ptn_wrap { scroll-margin-top: 20vh; margin-bottom: 8rem;} #global #list_wrap .list_area section.ptn_wrap:last-child {margin-bottom: 0;} #global #list_wrap .list_area section.ptn_wrap .title_box {display: flex; align-items: center;} #global #list_wrap .list_area section.ptn_wrap .title_box > i.flag {display: inline-block;width: 3rem; height: 2rem; background-repeat:no-repeat; background-size:cover; background-position:center;} #global #list_wrap .list_area section.ptn_wrap .title_box > span {margin-left:2rem; font-size: 1.25em;font-weight: bold; color:#fff;} #global #list_wrap .list_area section.ptn_wrap .title_box > em {font-size: .9em; margin-left:1rem; opacity:.5;} #global #list_wrap .list_area section.ptn_wrap .list_box {margin-top: 1rem;} #global #list_wrap .list_area section.ptn_wrap .list_box ul {display: flex; flex-wrap: wrap; margin:0 -1%;} #global #list_wrap .list_area section.ptn_wrap .list_box ul li {width: 50%;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box {display: flex; align-items: center; background: #222; margin:2%; padding:3rem; border:1px solid #333; border-radius:2rem;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .logo_thumb {width: 40%;max-width:21rem; overflow:hidden; border-radius:1rem;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .logo_thumb img{width: 100%; display: block;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text {padding-left:3rem; display: flex; width: 60%; flex-direction: column; } #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text > em.tag::before {font-size: .9em; font-weight: bold;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text > em.tag1::before {content:'고객사'; color:var(--main-color1);} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text > em.tag2::before {content:'법인'; color:#3779EB;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text > p {font-size: 1.125em; margin-top: 1rem;} #global #list_wrap .list_area section.ptn_wrap .list_box ul li.w_full {width: 100%;margin:0 1%} #global #list_wrap .list_area section.ptn_wrap .list_box ul li.w_full .ptn_box {margin:1% 0} #global #list_wrap .list_area section.ptn_wrap .list_box ul li.w_full .ptn_box .ptn_list {width:100%;} #global #list_wrap .list_area section.ptn_wrap .list_box ul li.w_full .ptn_box .ptn_list p {margin:1rem 0; opacity:.7;} @media screen and (max-width: 1400px) { #global #map_wrap .title_area {top:0;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box {padding:5%;} #global #list_wrap .list_area section.ptn_wrap .list_box {font-size: .95em;} } @media screen and (max-width: 1200px) { #global #map_wrap .title_area {font-size: .85em;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box {flex-direction: column; aspect-ratio: 4.5 / 3;} #global #list_wrap .list_area section.ptn_wrap .list_box ul li.w_full .ptn_box {aspect-ratio:auto;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .logo_thumb {width: 100%;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text {width: 100%; padding: 1rem 0 0; align-items: center;text-align: center;} #global #list_wrap .list_area section.ptn_wrap .list_box ul li.w_full .ptn_box .ptn_list {text-align: center; font-size: .9em; margin-top: 1rem;} } @media screen and (max-width: 1024px) { #global #map_wrap .title_area {top:0; } #global #map_wrap {padding:5rem 0 7rem;} #global #map_wrap .title_area > h3 {font-size: 2em;} #global #map_wrap .title_area > p {font-size: 1.5em; margin-top: 2rem;} } @media screen and (max-width: 768px) { #global #list_wrap .tab_area a {display: flex;align-items: center;} #global #list_wrap .tab_area a > i.flag {width: 2rem; height: 1.5rem;} #global #list_wrap .tab_area a > span {margin-left:1rem;} #global #list_wrap .list_area section.ptn_wrap {margin-bottom: 6rem;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box { aspect-ratio:auto;flex-direction: row; margin: 1% 0;} #global #list_wrap .list_area section.ptn_wrap .list_box ul {margin: 0;} #global #list_wrap .list_area section.ptn_wrap .list_box ul li {width: 100%;} #global #list_wrap .list_area section.ptn_wrap .list_box ul li.w_full .ptn_box {flex-wrap: wrap;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text {padding:0 0 0 10%; align-items: flex-start;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .logo_thumb {width: 40%;} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text {width: calc(60% - 10%);} #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text > p {text-align:left; } } @media screen and (max-width: 568px) { #global #map_wrap .title_area .info_box > .counter > p > span {font-size: 2em;} #global #map_wrap .map_area .pin i {width: 4px; height: 4px;} #global #map_wrap .map_area {aspect-ratio: 1920 / 970;} #global #map_wrap {padding:0 0 2rem; } #global #map_wrap .title_area {position: relative;width:100%;word-break: keep-all; font-size: .9em;} #global #map_wrap .title_area > h3 {font-size: 1.5em;} #global #map_wrap .title_area > p {font-size: 1.25em;} #global #list_wrap .list_area section.ptn_wrap .list_box ul li.w_full .ptn_box .ptn_list {font-size: .8em; } #global #list_wrap .list_area section.ptn_wrap .list_box .ptn_box .ptn_text > p {font-size: 1em;} } /*------------------------------------ sub1-5 Affiliates -------------------------------------*/ #affiliates {} #affiliates #affiliate_title {position: relative; margin-bottom: 15rem;} #affiliates #affiliate_title::before {content:'SANGSIN';position: absolute; right:5%; font-size: 9vw; font-family:var(--ft-02); font-weight: 900;text-shadow:0 0 rgb(255 255 255 / 30%); color:#111; } #affiliates #affiliate_title .title_area {position: relative; width: 100%;} #affiliates #affiliate_title .title_area > h3 { color:var(--main-color1); font-family: var(--ft-02); font-size: 2.5em; font-weight: 900;} #affiliates #affiliate_title .title_area > p {font-weight: 600; font-size:2em; margin-top: 3rem;} #affiliates #affiliate_title .title_area > span {line-height: 1.5; display: inline-block; margin-top: 2rem; opacity:.7; } #affiliates #affiliate_list {overflow:inherit;} #affiliates #affiliate_list .tab_area {position:sticky; top:20vh; height: 50rem;;} #affiliates #affiliate_list .tab_area ul {} #affiliates #affiliate_list .tab_area ul li {margin-bottom:2rem;} #affiliates #affiliate_list .tab_area ul li {} #affiliates #affiliate_list .tab_area a {display: inline-block; opacity:.2; } #affiliates #affiliate_list .tab_area a.active {opacity:1;} #affiliates #affiliate_list .tab_area a > span {font-size: 1.6em;font-weight: bold; color:#fff;} #affiliates #affiliate_list .list_area {} #affiliates #affiliate_list .list_area section{margin-bottom: 10rem; scroll-margin-top: 20vh;} #affiliates #affiliate_list .list_area section > h3 {font-size: 1.6em;} #affiliates #affiliate_list .list_area section > ul {margin-top: 3rem;} #affiliates #affiliate_list .list_area section > ul > li {margin-bottom:7rem;} #affiliates #affiliate_list .list_area .affi_box {display: flex;} #affiliates #affiliate_list .list_area .affi_box .thumb {width: 40%; overflow:hidden;} #affiliates #affiliate_list .list_area .affi_box .thumb img{display: block; width: 100%; border-radius:2rem;} #affiliates #affiliate_list .list_area .affi_box .infomation{width: 60%;padding:1rem 0; padding-left:5rem; display: flex; flex-direction: column; justify-content: space-between;} #affiliates #affiliate_list .list_area .affi_box .infomation .title {display: flex; justify-content: space-between;} #affiliates #affiliate_list .list_area .affi_box .infomation .title > p {font-size:1.5em; font-weight: bold;display: flex; align-items: center;} #affiliates #affiliate_list .list_area .affi_box .infomation .title > p > em.flag {margin-right:1rem; display: inline-block;width: 3.5rem; height: 2.5rem; background-repeat:no-repeat; background-size:cover; background-position:center;} #affiliates #affiliate_list .list_area .affi_box .infomation .title > a.link {font-size: .9em;transition: all 0.2s linear; opacity:.7; display: flex; align-items: center; color:#fff;} #affiliates #affiliate_list .list_area .affi_box .infomation .title > a.link > i {margin-right:1rem;} #affiliates #affiliate_list .list_area .affi_box .infomation .title > a.link:hover{opacity:1;} #affiliates #affiliate_list .list_area .affi_box .infomation .info {margin-top: 2rem;} #affiliates #affiliate_list .list_area .affi_box .infomation .info > ul {} #affiliates #affiliate_list .list_area .affi_box .infomation .info > ul > li {display: flex; padding:.5rem 0;} #affiliates #affiliate_list .list_area .affi_box .infomation .info p {font-weight: bold; width: 12rem;} #affiliates #affiliate_list .list_area .affi_box .infomation .info span {width: calc(100% - 12rem);font-size: .9em; opacity:.7;} @media screen and (max-width: 1400px) { #affiliates #affiliate_title {margin-bottom: 10rem; } #affiliates #affiliate_title::before {display: none; } #affiliates #affiliate_list .list_area .affi_box .thumb img {border-radius:1rem;} #affiliates #affiliate_list .list_area .affi_box .infomation .title {flex-direction: column;} #affiliates #affiliate_list .list_area .affi_box .infomation .title > a.link {margin-top: 1rem;} #affiliates #affiliate_list .list_area .affi_box .infomation .info {font-size: .9em;} } @media screen and (max-width: 1024px) { #affiliates #affiliate_title .title_area > h3 {font-size: 2em;} #affiliates #affiliate_title .title_area > p {font-size: 1.5em;} #affiliates #affiliate_title .title_area > span {margin-top: 1rem;} #affiliates #affiliate_list .list_area .affi_box { flex-direction: column;} #affiliates #affiliate_list .list_area .affi_box .thumb {width: 100%;} #affiliates #affiliate_list .list_area .affi_box .infomation {width: 100%; padding-left:0; margin-top: 2rem;} } @media screen and (max-width: 768px) { #affiliates #affiliate_title {margin-bottom: 7rem;} #affiliates #affiliate_list .list_area section#affi_02 {margin-bottom: 0;} #affiliates #affiliate_list .list_area section > ul > li {margin-bottom: 4rem;} #affiliates #affiliate_list .list_area .affi_box .infomation {padding:0;} #affiliates #affiliate_list .list_area .affi_box .infomation .title > p {font-size: 1.25em;} #affiliates #affiliate_list .list_area .affi_box .infomation .title > p > em.flag {width: 3rem; height: 2rem;} #affiliates #affiliate_list .list_area .affi_box .infomation .info > ul > li {padding:.3rem 0;} #affiliates #affiliate_list .list_area .affi_box .infomation .info p {width: 10rem; } #affiliates #affiliate_list .list_area .affi_box .infomation .info span {width: calc(100% - 10rem);} } @media screen and (max-width: 568px) { #affiliates #affiliate_title .title_area > h3 {font-size: 1.5em;} #affiliates #affiliate_title .title_area > p {font-size: 1.25em;} #affiliates #affiliate_title .title_area > span {font-size: .9em;} } /*------------------------------------ sub1-5 VISIT US -------------------------------------*/ #location {} #location section{} #location #address_wrap {position: relative; margin-bottom: 5rem; display: flex;justify-content: space-between; align-items: flex-end;} #location #address_wrap .address_area{} #location #address_wrap .address_area > i.ico_add {width: 3rem; height: 4rem;background:url(../images/common/loca_company.svg) no-repeat center / contain; display: inline-block;} #location #address_wrap .address_area > p {font-size: 1.5em; font-weight: 300; margin-top: 1rem;} #location #address_wrap .address_area > ul {display: flex; margin-top: 2rem; font-size: .95em; } #location #address_wrap .address_area > ul > li {display: flex; margin-right:5rem;} #location #address_wrap .address_area > ul > li > em{font-weight: bold;} #location #address_wrap .address_area > ul > li > span {margin-left:2rem; opacity:.7; color:#fff;} #location #address_wrap .maplink_area{} #location #address_wrap .maplink_area > ul {display: flex;} #location #address_wrap .maplink_area > ul > li {margin:0 2rem;} #location #address_wrap .maplink_area a {display: flex;color:#fff; transition: all 0.2s linear;} #location #address_wrap .maplink_area a > span {font-weight: bold; } #location #address_wrap .maplink_area a > i {display: inline-block; margin-left:1rem; margin-top: -.5rem;} #location #address_wrap .maplink_area a:hover {color:var(--main-color1);} #location #map_wrap {} #location #map_wrap iframe {width: calc(100% - 2px); height: 60rem; border-radius:2rem; border:1px solid #aaa; filter: grayscale(100%) contrast(95%) invert(150%);} @media screen and (max-width: 1400px) { } @media screen and (max-width: 1024px) { #location #address_wrap .address_area > p {font-size: 1.25em;} #location #address_wrap .address_area > ul {flex-direction: column;} #location #address_wrap .address_area > ul > li {margin-right: initial; margin-bottom: .5rem;} #location #map_wrap iframe {height: 40rem;} } @media screen and (max-width: 768px) { #location #address_wrap { align-items: center; flex-direction: column;} #location #address_wrap .address_area > ul > li {justify-content: center;} #location #address_wrap .address_area {display: flex; flex-direction: column; align-items: center;} #location #address_wrap .maplink_area {margin-top: 3rem;} #location #address_wrap {margin-bottom: 2rem;} } @media screen and (max-width: 568px) { #location #address_wrap .address_area > p {font-size: 1em;} #location #address_wrap .address_area > ul {font-size: .9em;} #location #map_wrap iframe {height: 30rem;} } /*------------------------------------ sub3-2 PROMOTION -------------------------------------*/ #promotion {position: relative; } #promotion .tab_area {position:sticky; top:20vh; height: 50rem; } #promotion .tab_area ul {} #promotion .tab_area ul li {margin-bottom:2rem;} #promotion .tab_area a {display: inline-block; opacity:.2; } #promotion .tab_area li.active a {opacity:1;} #promotion .tab_area a > span {font-size: 1.6em;font-weight: bold; color:#fff;} #promotion .list_area {} #promotion .list_area section{margin-bottom: 10rem; color:#fff; display: none; } #promotion .list_area section .title_area {display: flex; align-items: center; justify-content: space-between;margin-bottom: 3rem;} #promotion .list_area section .title_area > h4 {font-size: 1.6em;} #promotion .list_area section .title_area .lang_select {} #promotion .lang_select ul {display: flex;gap: 10px;} #promotion .lang_select li {padding: .8rem 1.5rem;cursor: pointer; font-size: .9em;border: 1px solid #555;border-radius: 4px; transition: all 0.3s;} #promotion .lang_select li.active {background: var(--main-color1);border-color: var(--main-color1);} #catalog {position: relative; overflow:hidden; padding-bottom:5rem;} #catalog ul {} #catalog ul li {} #catalog ul li p {width: 100%; max-width:1150px; margin:0 auto; } #catalog img {width: 100%; display: block;} #catalog .arrow_box {position: absolute; top: 50%; width: 100%; transform: translateY(-50%); display: flex; justify-content: space-between; z-index:1;} #catalog .arrow {cursor: pointer;} #catalog .arrow i {font-size: 2.5em; } #catalog .arrow:hover i { color:var(--main-color1);} #catalog .next {} #catalog .prev {} #catalog .swiper-pagination-bullet{background: #fff;} #catalog .swiper-pagination-bullet-active {background: var(--main-color1);} #promo_video {position: relative; aspect-ratio: 16 / 9;} #promo_video iframe {width: 100%; height: 100%;} @media screen and (max-width: 1400px) { } @media screen and (max-width: 1200px) { #promotion .lang_select li {font-size: .8em;} } @media screen and (max-width: 1024px) { #promotion .list_area section .title_area > h4 {font-size: 1.4em;} #promotion .list_area section .title_area {align-items: flex-start; flex-direction: column; margin-bottom: 2rem;} #promotion .list_area section .title_area .lang_select {margin-top: 1rem; width: 100%;} #promotion .lang_select ul {gap:5px; width: 100%; } #promotion .lang_select li {width: 25%; padding: .8rem 0; text-align: center;} } @media screen and (max-width: 768px) { } @media screen and (max-width: 568px) { } /*------------------------------------ sub3-4 RECRUIT -------------------------------------*/ #recruit {position: relative; color:#fff; } #recruit #recruit_top {position: relative; margin-bottom: 15rem;} #recruit #recruit_top::before {content:'SANGSIN';position: absolute; right:5%; font-size: 9vw; font-family:var(--ft-02); font-weight: 900;text-shadow:0 0 rgb(255 255 255 / 30%); color:#111; } #recruit #recruit_top .title_area {position: relative; width: 100%;} #recruit #recruit_top .title_area > h3 { color:var(--main-color1); font-family: var(--ft-02); font-size: 2.5em; font-weight: 900;} #recruit #recruit_top .title_area > p {font-weight: 600; font-size:2em; margin-top: 3rem;} #recruit #recruit_top .title_area > span {line-height: 1.5; display: inline-block; margin-top: 2rem; opacity:.7; } #recruit .tab_area {position:sticky; top:20vh; height: 50rem;;} #recruit .tab_area ul {} #recruit .tab_area ul li {margin-bottom:2rem;} #recruit .tab_area ul li {} #recruit .tab_area a {display: inline-block; opacity:.2; } #recruit .tab_area a.active {opacity:1;} #recruit .tab_area a > span {font-size: 1.6em;font-weight: bold; color:#fff;} #recruit .list_area {} #recruit .list_area section{margin-bottom: 10rem; color:#fff; scroll-margin-top: 20vh;} #recruit .list_area section .title_area {display: flex; align-items: center; justify-content: space-between;margin-bottom: 3rem;} #recruit .list_area section .title_area > h4 {font-size: 1.6em;} #recruit_process {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0 -1rem;} #recruit_process .box_process {height: auto;/* margin: -2rem; */position: relative;display: inline-table; } #recruit_process .box_process > div {padding: 4rem;background-color: #222;width: auto;height: 100%;margin: 1rem;position: relative;min-height: 28rem;border-radius: 3rem;background-repeat:no-repeat; background-size:auto; background-position: 90% 90%;} #recruit_process .recr_01 > div {background-image:url(../images/sub/recruit_ico1.svg);} #recruit_process .recr_02 > div {background-image:url(../images/sub/recruit_ico2.svg);} #recruit_process .recr_03 > div {background-image:url(../images/sub/recruit_ico3.svg);} #recruit_process .recr_04 > div {background-image:url(../images/sub/recruit_ico4.svg);} #recruit_process .box_process.w_ty1 {width: 50%;} #recruit_process .box_process.w_ty2 {width: 100%; } #recruit_process .box_process.w_ty2 > div {min-height: auto;} #recruit_process .title {display: flex; align-items: center; justify-content: space-between;} #recruit_process .title p {font-size: 1.3em; font-weight: bold;} #recruit_process .title > a {background: var(--main-color1);display: flex;color:inherit;font-size: .8em;align-items: center;padding: 0.7rem 1.5rem;border-radius: 3rem;} #recruit_process .title > a > i { margin-right: 1rem;} #recruit_process .title > a > span {} #recruit_process .title > span {font-size: .9em; } #recruit_process .cont {margin-top: 2rem;} #recruit_process .cont .txt {opacity:.7; } #recruit_process .cont .txt span {display: block; line-height: 1.5; font-size: .9em;} #recruit_process .cont .txt > ul {} #recruit_process .cont .txt > ul > li {display: flex; margin-bottom: 2rem;} #recruit_process .cont .txt > ul > li > p {font-weight: bold; width: 10rem;} #recruit_process .cont .txt > ul > li > span {width: calc(100% - 10rem);} #recruit_process .cont .process {position: relative; } #recruit_process .cont .process > ul {display: flex;} #recruit_process .cont .process::before {content:''; width:80%; height: 1px; background: #555; position: absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:0;} #recruit_process .cont .process > ul > li { z-index:1; width: 25%; display: flex; align-items: center; justify-content: center;} #recruit_process .cont .process .process_circle {width: 60%;height: auto;aspect-ratio: 1 / 1;border-radius: 100%;background: #111;border: 1px solid #333;display: flex;align-items: center;justify-content: center;flex-direction: column;} #recruit_process .cont .process .process_circle > p { display: block; font-weight: 600;} #recruit_process .cont .process .process_circle > em { display: block; margin-top: .5rem; font-size: .8em; opacity: .5;} @media screen and (max-width: 1400px) { } @media screen and (max-width: 1200px) { #recruit_process {flex-direction: column; } #recruit_process .box_process.w_ty1{width: 100%;} #recruit_process .box_process > div {min-height:auto; background-position: 90% 50%;} #recruit #recruit_top::before {display: none;} } @media screen and (max-width: 1024px) { #recruit_process .cont .process .process_circle {width: 90%;} #recruit #recruit_top .title_area > h3 {font-size: 2em;} #recruit #recruit_top .title_area > p {font-size: 1.5em;} #recruit #recruit_top {margin-bottom: 8rem;} } @media screen and (max-width: 768px) { #recruit_process .box_process > div {padding:5%; background-size: 10vw;} #recruit #recruit_top {margin-bottom: 5rem;} #recruit .list_area section {margin-bottom: 5rem;} #recruit .list_area section .title_area {margin-bottom:2rem;} } @media screen and (max-width: 568px) { #recruit #recruit_top .title_area > h3 {font-size: 1.5em;} #recruit #recruit_top .title_area > p {font-size: 1.25em;} #recruit #recruit_top .title_area > span {font-size: .9em;} #recruit .list_area section .title_area {margin-bottom: 1rem;} #recruit .list_area section .title_area > h4 {font-size: 1.25em;} #recruit_process .box_process > div {border-radius:1rem; background-image:none;} #recruit_process .title p {font-size: 1em;} #recruit_process .cont .txt > ul > li {flex-direction: column;} #recruit_process .cont .txt > ul > li > p {width: 100%;margin-bottom: .5rem;} #recruit_process .cont .txt > ul > li > span {width: 100%;} #recruit_process .title > span {font-size: .8em;} #recruit_process .cont .process .process_circle {font-size: .9em;} } #faq {color:#fff;} #faq a {color:#fff; text-decoration:underline;} #faq p {position: relative; padding-left:2rem; line-height: 1.5; word-break: keep-all;} #faq p:before {content:''; width: 2px; height: 100%; background: var(--main-color1); position: absolute; left:0; top:0;} @media screen and (max-width: 568px) { #faq p {font-size: .9em; } }