/****************************** sub_style.css - 서브 css ******************************/ @charset "UTF-8"; /*---------- 서브 공통 ----------*/ .sub_visual {width: 100%; height: 598px;} .sub_visual1 {background: url(../img/sub_visual1.jpg) no-repeat;} .sub_visual2 {background: url(../img/sub_visual2.jpg) no-repeat;} .sub_visual3 {background: url(../img/sub_visual3.jpg) no-repeat;} .sub_visual4 {background: url(../img/sub_visual4.jpg) no-repeat;} .sub_visual .inner {color: #fff; width: 100%; height: 100%; padding-top: 120px; text-align: center; display: flex; flex-direction: column; justify-content: center;} .sub_visual .tit {font-size: 54px; font-weight: 600; margin-bottom: 30px; letter-spacing: 2px;} .sub_visual .tit::before {display: none;} .sub_visual .sub_nav {font-size: 16px;} .sub_visual .sub_nav span {display: inline-block; margin-right: 10px; font-weight: 300;} .sub_visual .sub_nav span::before {content:">"; display: inline-block; margin-right: 10px;} .sub_visual .sub_nav span:first-child::before {display: none;} .depth_wrap {width: 100%; height: 80px; text-align: center;margin-top: 100px;} .depth_wrap .depth_menu {margin: 0 auto; width: auto; height: 100%; line-height: 80px; display:flex; justify-content: center;} .depth_wrap .depth_menu li {width: 286px; cursor: pointer;} .depth_wrap .depth_menu li a {font-size: 18px; font-weight: 500; display: block; width: 100%; height: 100%} .depth_wrap .depth_menu li.on {color: #fff; background: #114399;} .depth_wrap .depth_menu li {border: 1px solid #eeeeee;} .depth_wrap .depth_menu li.on {color: #0b467e; background: #fff;box-shadow: 3px 3px 30px rgb(11, 70, 126, 0.2);} /*hover*/ .depth_wrap .depth_menu li:hover {color: #0b467e; background: #fff;box-shadow: 3px 3px 30px rgb(11, 70, 126, 0.2);} /*---------- 인사말 ----------*/ .greeting {width: 100%;} .greeting .page_con {width: 1200px; text-align: center;margin: 0 auto;} .page_wrap {padding: 150px 0 170px; position: relative;} .page_wrap .page_tit {color: #585860; text-transform: uppercase;white-space: nowrap;font-size: 92px; font-weight: 600; /* letter-spacing: -.5px;margin: 0; transform: translate(-50%, -50%);position: absolute;top: 148px;left: 680px;} */ letter-spacing: -.5px;margin: 0; transform: translate(-50%, -50%);position: absolute;margin-top: 0px;margin-left: 330px;} .page_wrap .page_tit::before {position: absolute; left: 0; top: 0;content: attr(data-split);height: 50%;color: #222;overflow: hidden;} .page_wrap .page_tit::after {content:" "; display: block; position: absolute; left: -20px; top: 341px; transform: translateX(-50%); width: 1px; height: 183px; border-left: 1px solid #000;} .greeting .tit_wrap {color: #fff; font-weight: 300; font-size: 24px; line-height: 1.6; letter-spacing: -0.5px; padding: 190px 0 238px; background: url(../img/greeting-bg.jpg) no-repeat center / cover;} .greeting .tit_wrap span {font-size: 32px;} .greeting .tit_wrap span strong {font-weight: 600;} .greeting .tit_wrap b {font-weight: 500;} .greeting .txt_wrap {background: #fff; width: 100%; z-index: 2;display: flex;text-align: left;margin-top: 40px;} .greeting .txt_wrap .wrap_01 {width: 50%;padding-left: 80px;} .greeting .txt_wrap .wrap_01 p {font-size: 36px;line-height: 1.2;} .greeting .txt_wrap .wrap_02 {width: 68%;} .greeting .txt_wrap .wrap_02 p {font-size: 18px;} .greeting .txt_wrap .wrap_02 p:last-child {font-size: 24px;text-align: right;} .greeting .txt_wrap .wrap_02 p span{font-weight: 600;letter-spacing: 20px;margin-left: 25px;} .greeting .txt_wrap p {margin-top: 40px;} /*---------- 연혁 ----------*/ .history {width: 100%;} section#sub_content {width: 1200px;margin: 100px auto 0px;text-align: left;} section#sub_content h3{font-size: 36px;} /* .page_wrap {padding: 150px 0px 130px; position: relative;} */ .page_wrap {width: 1200px;margin: 100px auto 0px;text-align: left;} /* ??? */ .page_tit_top{font-size: 18px;} .page h3.page_tit.font-play {font-size: 36px;} .wrap_1200{height: 100%:} #historyListCon{width: 100%; height: 100%;} /* 콘텐츠 */ .hst_cont{margin-top: 100px;padding-bottom: 130px;position: relative;} .hst_cont:before{content:'';position: absolute;top: 0;left: 50%;width: 1px; height: 85%;background-color: #3d5ca9;z-index:10;} /* .hst_cont:after{content:'';position: absolute;bottom: 0px;left: 50%;width: 10px;height: 10px;margin-left: -5px;background-color: #e73221;border-radius:50%;} */ .hst_row{margin-bottom:50px;} .hst_row:first-child .hst_lst:before, .hst_row:first-child .hst_right:before{top: 0;margin-top: 0;} .hst_row:first-child .hst_lst:after, .hst_row:first-child .hst_right:after{top: 8px;} .hst_lst, .hst_right{position: relative;float: left;width: 50%;padding-right: 78px; padding-bottom: 130px; text-align: right; box-sizing:border-box;} /* .hst_right ul li:before{content:'';position: absolute;top: 144px;right: -8px;width: 16px;height: 16px;margin-top: -8px;background-color: #fff;border: 4px solid #e73221;border-radius:50%;z-index:15; box-sizing:border-box;} .hst_right ul li:after{content:'';position: absolute;top: 143px;right: 8px;width: 40px;height: 1px;background-color: #d9d9d9;} */ .hst_left dt, .hst_right dt{font-size: 36px;color:#444;line-height: 1; font-weight: 600;letter-spacing:-3px} .hst_left dd, .hst_right dd{font-size: 16px; position:relative;} .hst_right{float: right;padding-right: 0;padding-left: 78px;text-align: left; box-sizing:border-box;padding-top: 0px;} .hst_right:before{right: inherit;left: -8px;} .hst_right:after{right: inherit;left: 8px;} .history_year{position: absolute;top: 35%;left: 0;width: 100%;text-align: center;font-size: 200px;color: #f2f3f8; font-weight:800} .history_year.fix{position: fixed;top: 50%;transform:translateY(-100%);} .hst_tab.fix{position: fixed;top: 80px;margin-top: 0;} .hst_section{display: flex;} .hst_left{width: 50%;text-align: right;padding-right: 70px;padding-top: 150px;position: relative;} /*border-bottom 임시배치*/ .hst_left li{padding-bottom: 168px;} .hst_left li dt, .hst_right li dt{font-size: 36px;font-weight: 600;} .hst_left li dd, .hst_right li dd{font-size: 18px} .hst_right{width: 50%;padding-left: 70px;} .hst_right li{padding-bottom: 150px;} .hst_right li:nth-child(3) dd{padding-bottom: 10px;} .hst_section .pd_bottom{padding: 5px 0px 15px 0px;font-weight: 600;} .hst_right li:before{content:"";position: absolute; width: 10px; height: 10px; background-color: #3d5ca9; margin-top: 15px; margin-left: -27px;} .hst_left li:before{content:"";position: absolute; width: 10px; height: 10px; background-color: #3d5ca9; margin-top: 16px; margin-left: 17px;} /*---------- 특허 및 인증 ----------*/ #certificate {width: 100%;} #certificate .certificate_wrap {width: 1200px; margin: 100px auto 0px;} #certificate .con_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 100px;padding-bottom: 130px;} #certificate h3{font-size: 36px;} #certificate .con_wrap .con {width: calc((100% / 3) - 20px); margin-bottom: 60px; border: 1px solid #ddd;} #certificate .con_wrap .con img {width: 100%; height: auto;} /* ======================================== business field ======================================== */ /*---------- 장치사업부문 ----------*/ #buisness {width: 100%;} #buisness .buisness_wrap {position: relative; width: 1200px; margin: 100px auto 0px;} #buisness .buisness_wrap:after{position: absolute; top: 90px; left: 0%; content:"";width: 1px;height: 56px; background-color: #000;} #buisness h3{font-size: 36px;} #buisness .con_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 370px;padding-bottom: 130px;} #buisness .con_wrap .con {width: calc((100% / 2) - 35px); margin-bottom: 60px; border: 1px solid #ddd; border-radius: 15px;height: 100%;} #buisness .con_wrap .con img {width: 100%; height: auto;border-radius: 15px;} #buisness .txt_wrap {position: absolute;top: 170px;left: 0px;display: flex;width: 100%;} #buisness .txt_wrap div:nth-child(1) {width: 25%;} #buisness .txt_wrap div:nth-child(2) p:before {content: "";width: 11px;height: 11px;background-color: #0b467e;position: absolute;margin-top: 14px;} #buisness .txt_wrap div p {line-height: 2.0;} #buisness .txt_wrap div p span {margin-left: 30px;} /*---------- 히터사업부문 ----------*/ /*#business 파트는 장치사업부문과 공통적용*/ #buisness .con_wrap_02 { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 470px;padding-bottom: 130px;} #buisness .con_wrap_02 .con {width: calc((100% / 2) - 35px); margin-bottom: 60px; border: 1px solid #ddd; border-radius: 15px;height: 100%;} #buisness .con_wrap_02 .con img {width: 100%; height: auto;border-radius: 15px;} #buisness .con_wrap_02 .con:last-child {width: 100%;} /*---------- 납품실적/사례 부문 ----------*/ /*#business 파트는 장치사업부문과 공통적용*/ #buisness .con_wrap_03 { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 250px;padding-bottom: 130px;} #buisness .con_wrap_03 .con {width: calc((100% / 2) - 35px); margin-bottom: 60px; border: 1px solid #ddd; border-radius: 15px;height: 100%;} #buisness .con_wrap_03 .con img {width: 100%; height: auto;border-radius: 15px;} /* ======================================== career ======================================== */ /*---------- 인재상 ----------*/ #career {width: 100%;} #career .career_wrap {position: relative; width: 1200px; margin: 100px auto 0px;} /* #career .career_wrap:after{position: absolute; top: 90px; left: 0%; content:"";width: 1px;height: 56px; background-color: #000;} */ #career .con_wrap .wrap {display: flex; width: 100%;} #career h3.page_tit{font-size: 36px;} #career .con_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 100px;padding-bottom: 130px;} #career .con_wrap.one {padding-bottom: 0px;} #career .con_wrap.two {margin-top: 50px;padding-bottom: 0px;} #career .con_wrap.three {margin-top: 50px;} #career .con_wrap .txt_wrap, #career .con_wrap .con {width: 50%;} #career .con_wrap .txt_wrap {padding: 50px 0px 0px 100px;} #career .con_wrap .txt_wrap h4.normal {color: #0b467e;font-size: 30px;font-weight: 600;margin-bottom: 25px;} #career .con_wrap .txt_wrap p.one {font-size: 24px;} #career .con_wrap .txt_wrap p.one:after {content: "";position: absolute;width: 1px;height: 39px;background-color: #000;} #career .con_wrap.one .txt_wrap p.one:after {margin-top: 45px; margin-left: -400px;} #career .con_wrap.two .txt_wrap p.one:after {margin-top: 45px; margin-left: -335px;} #career .con_wrap.three .txt_wrap p.one:after {margin-top: 45px; margin-left: -190px;} #career .con_wrap .txt_wrap p.two {margin-top: 58px;} #career .con_wrap .con img {width: 100%; height: auto;border-radius: 15px;} /*---------- 인사제도 ----------*/ #career {width: 100%;} #career .career_wrap {position: relative; width: 1200px; margin: 100px auto 0px;} #career .con_wrap .no_flex {display: block; width: 100%;} #career h3.page_center{font-size: 36px;font-weight: 600;line-height: 1.6;padding: 0px 156px;} #career .con_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 100px;padding-bottom: 130px;} #career .con_wrap.one {padding-bottom: 0px;} #career .con_wrap.two {margin-top: 50px;padding-bottom: 0px;} #career .con_wrap.three {margin-top: 50px;} #career .con_wrap .txt_wrap {width: 50%;} #career .con_wrap .con.icon {width: 70%;height: auto;background-color: rgba(0,0,0,.03);padding: 60%;border-radius: 50%;position: relative;margin-bottom: 15px;} #career .con_wrap .txt_wrap.wrap_100 {padding: 100px 59px 80px;text-align: center;width: 100%;} #career .con_wrap .txt_wrap h4.weight {font-size: 36px;font-weight: 600;margin-bottom: 25px;} #career .con_wrap .txt_wrap p.one {font-size: 24px;} #career .con_wrap .txt_wrap p.one:after {content: "";position: absolute;width: 1px;height: 39px;background-color: #000;} #career .con_wrap.one .txt_wrap p.one:after {margin-top: 45px; margin-left: -400px;} #career .con_wrap.two .txt_wrap p.one:after {margin-top: 45px; margin-left: -335px;} #career .con_wrap.three .txt_wrap p.one:after {margin-top: 45px; margin-left: -190px;} #career .con_wrap .txt_wrap p.two {margin-top: 58px;} #career .con_wrap .con.icon img {display: block;position: absolute;top: 30%;left: 30%;width: 40%;} #career .con_wrap .motion_wrap .motion_wrap_wrap:first-child img {left: 32%;} #career .con_wrap .motion_wrap {display: flex;justify-content: center;margin: 0 auto;} #career .con_wrap .motion_wrap .motion_wrap_wrap {width: 15%;margin-right: 100px;text-align: center;margin-left: 100px;} #career .con_wrap .motion_wrap .motion_wrap_wrap p {font-size: 24px; line-height: 1.6; margin-left: 24.6px; font-weight: 500;} /*---------- 복리후생 ----------*/ #career .career_wrap .con_wrap.balacne{padding-bottom: 130px;} #career .con_wrap.balance .icon_wrap h4.weight {font-size: 24px;font-weight: 600;margin-bottom: 25px;} #career .con_wrap.balance {padding-bottom: 15px;border-bottom: 1px solid #ddd; margin-top: 50px;} #career .con_wrap.one.balance {margin-top: 100px;} #career .con_wrap.balance:last-child {padding-bottom: 130px;} #career .con_wrap.balance .icon_wrap {width: 21%;padding-right: 80px;} #career .con_wrap.balance .txt_wrap, #career .con_wrap.balance .con {width: 40%;margin-bottom: 15px;} #career .con_wrap.balance .txt_wrap {width: 50%; padding: 42px 0px;} #career .con_wrap.balance .txt_wrap p.one {font-size: 18px; font-weight: 600;} #career .con_wrap.balance .txt_wrap p.one:after {display: none;} #career .con_wrap.balance .con img { height: auto;border-radius: 15px;} /*---------- 채용절차 ----------*/ #career .con_wrap .motion_wrap_02 {display: flex;justify-content: center;margin: 0 auto 100px;} #career .con_wrap .motion_wrap_02 .arrow:before{content: ""; background: url(../img/arrow_02.jpg) no-repeat;position: absolute;width: 10px;height: 17px; margin-top: 150px; margin-left: 150px;} #career .con_wrap .motion_wrap_02 .motion_wrap_wrap {width: 15%;margin-right: 50px;text-align: center;margin-left: 50px;} #career .con_wrap .motion_wrap_02 h4.normal.weight {font-size: 24px; line-height: 1.6; padding-left: 25px; font-weight: 500; margin-bottom: 15px;} #career .con_wrap .motion_wrap_02 .motion_wrap_wrap p {font-size: 18px; line-height: 1.6; padding-left: 25px; font-weight: 500; margin-bottom: 15px;} #career .con_wrap .txt_wrap_02 {width: 100%;padding-top: 100px;border-top: 1px solid #ddd;} #career .con_wrap .txt_wrap_02 h3.page_tit{font-size: 36px;margin-bottom: 50px;} #career .con_wrap .txt_wrap_02 span {margin-right: 80px;font-size: 24px;line-height: 2.0;} #career .con_wrap .txt_wrap_02 span:first-child{color:#0b467e; font-weight: 600;} #career .con_wrap .txt_wrap_02 span:first-child:before {content: "";position: absolute;width: 2px;height: 20px;background-color: #0b467e;margin-top: 16px;margin-left: 137px;} #career .con_wrap .txt_wrap_02 span:last-child {font-size: 18px;} /* ======================================== support ======================================== */ /*---------- 오시는 길 ----------*/ #location {padding-bottom: 130px; width: 100%;} #location .career_wrap {position: relative; width: 1200px; margin: 100px auto 0px;} #location p.page_tit_top{font-size: 18px;} #location h3.page_tit {font-size: 36px;} #location .map_wrap {margin-top: 60px; width: 100%;} #location .map_wrap > div {width: 100%; margin: 0 auto;} /* .root_daum_roughmap .section_address .address span, .root_daum_roughmap .section_address .phone span {margin: 16px 0px 80px;} */