1809 lines
57 KiB
SCSS
1809 lines
57 KiB
SCSS
$mainColor :#0061a9;
|
|
//$mainColor2 : #707070;
|
|
|
|
|
|
|
|
em {
|
|
color: #0061a9;
|
|
}
|
|
|
|
b {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.introduceContainer {
|
|
|
|
>p {
|
|
display: none;
|
|
}
|
|
|
|
|
|
>ul {
|
|
position: relative;
|
|
width: 1200px;
|
|
margin: 150px auto 50px;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: -100px;
|
|
left: 100px;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
content: '인사말';
|
|
}
|
|
|
|
|
|
|
|
>li {
|
|
text-align: center;
|
|
|
|
&:nth-child(1) {
|
|
width: 1000px;
|
|
margin: 0 auto;
|
|
letter-spacing: 0px;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
line-height: 1.3em;
|
|
text-align: left;
|
|
|
|
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
width: 1000px;
|
|
margin: 0 auto;
|
|
padding-top: 20px;
|
|
font-size: 15px;
|
|
line-height: 1.75em;
|
|
text-align: justify;
|
|
//text-align-last: justify;
|
|
|
|
>em {
|
|
margin-top: 20px;
|
|
display: block;
|
|
font-size: 23px;
|
|
font-weight: 900;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
}
|
|
}//end of ul
|
|
|
|
>.normalInfo { //맨처음
|
|
position: relative;
|
|
width: 100%;
|
|
height: 500px;
|
|
background-image: url(../images/one.jpg);
|
|
background-attachment: fixed;
|
|
background-position: 50% 10%;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: transparent;
|
|
content: '';
|
|
}
|
|
|
|
|
|
>.normalInfoInner {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
padding-left: 200px;
|
|
|
|
>ul {
|
|
margin-top: 120px;
|
|
float: left;
|
|
|
|
&:first-child {
|
|
|
|
>li {
|
|
float: left;
|
|
|
|
}
|
|
|
|
>.info_1 {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 300px;
|
|
background-color: #0061a9;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: -50px;
|
|
left: 0;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #000;
|
|
content: '일반현황';
|
|
|
|
}
|
|
|
|
>dl {
|
|
width: 250px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
|
|
>dt {
|
|
margin-top: 100px;
|
|
width: 250px;
|
|
height: 60px;
|
|
text-indent: -999999px;
|
|
background:url(../images/logo_w.png);
|
|
background-position: 50% 50%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}//logo
|
|
|
|
>dd {
|
|
color: #fff;
|
|
|
|
>em {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
}
|
|
|
|
>.info_name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
>.info_shot {
|
|
font-size: 12px;
|
|
}
|
|
|
|
}
|
|
}//end of info_1
|
|
|
|
}//end of 첫번째 ul
|
|
|
|
&:last-child {
|
|
margin-left: 50px;
|
|
width: 670px;
|
|
background-color:rgba(255,255,255,0.4);
|
|
//background-color:rgba(000,000,000,0.1);
|
|
|
|
>li {
|
|
float: left;
|
|
font-size: 16px;
|
|
|
|
>dl {
|
|
dd {
|
|
height: 42px;
|
|
line-height: 42px;
|
|
//border-bottom: 1px solid #eee;
|
|
}
|
|
}
|
|
|
|
|
|
&:first-child {
|
|
>dl >dd {
|
|
padding: 0 20px;
|
|
text-align: justify;
|
|
text-align-last: justify;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
background-color: #0061a9;
|
|
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
width: 82%;
|
|
>dl >dd {
|
|
width: 100%;
|
|
padding-left: 10px;
|
|
//border-bottom: 1px solid #ccc;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}//end of 두번째 ul
|
|
|
|
|
|
|
|
}//end of ul
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}//end of normalInfo
|
|
|
|
|
|
}//end of introduceContainer
|
|
|
|
.organization {
|
|
width: 1200px;
|
|
height: 600px;
|
|
margin: 0 auto;
|
|
background-image: url(../images/organigation_2.jpg);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: cover;
|
|
|
|
>p {
|
|
margin: 50px 0 0 100px;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #000;
|
|
}
|
|
|
|
}//end of organization
|
|
|
|
.welfareContainer {
|
|
padding: 50px 0 100px;
|
|
width: 100%;
|
|
|
|
>.welfare_head {
|
|
width: 1200px;
|
|
margin: 80px auto;
|
|
text-align: center;
|
|
|
|
>ul {
|
|
li {
|
|
|
|
&:first-child {
|
|
margin-bottom: 30px;
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&:last-child {
|
|
line-height: 1.6em;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
}
|
|
}//end of welfare_head
|
|
|
|
>.welfare_body {
|
|
width: 904px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
|
|
|
|
>ul {
|
|
|
|
>li {
|
|
width: 300px;
|
|
height: 300px;
|
|
float: left;
|
|
border: 1px solid #0061a9;
|
|
border-right: 0;
|
|
|
|
>dl {
|
|
|
|
>dt {
|
|
position: relative;
|
|
margin-top: 150px;
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: -80px;
|
|
left: 50%;
|
|
width: 70px;
|
|
height: 70px;
|
|
transform: translateX(-50%);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: cover;
|
|
content: '';
|
|
}//복리후생의 아이콘들 after 기본값
|
|
}
|
|
|
|
>dd {
|
|
padding-top: 5px;
|
|
line-height: 1.4em;
|
|
color: #bbb;
|
|
font-weight: 600;
|
|
|
|
}
|
|
}// 모든 dl css
|
|
|
|
&:nth-child(2) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/company_work.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 근무제도 아이콘
|
|
|
|
&:nth-child(3) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/education.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 교육비 아이콘
|
|
|
|
&:nth-child(4) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/help.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 법적 복리후생 아이콘
|
|
|
|
&:nth-child(5) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/clock.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 탄력근무제 아이콘
|
|
|
|
&:nth-child(6) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/money.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 경조사비 지원 아이콘
|
|
|
|
|
|
&:nth-child(1),&:nth-child(2),&:nth-child(3) {
|
|
border-bottom: 0;
|
|
}//겹침 선 제거
|
|
|
|
&:nth-child(3),&:nth-child(6) {
|
|
border-right: 1px solid #0061a9;
|
|
}//빈 선 추가
|
|
|
|
&:first-child {
|
|
background-color: #0061a9;
|
|
color: #fff;
|
|
|
|
>.wfS{
|
|
margin-top: 120px;
|
|
|
|
>dt {
|
|
margin-top: 130px;
|
|
font-size: 22px;
|
|
padding-bottom: 3px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
dd {
|
|
padding-top: 0px;
|
|
font-size: 30px;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
}
|
|
}// 첫번째 dl css
|
|
}//end of first li
|
|
|
|
|
|
|
|
}//end of li
|
|
|
|
}//end of welfare_body
|
|
|
|
}//end of welfare_body
|
|
}//end of welfareContainer
|
|
|
|
.certificationContainer {
|
|
width: 100%;
|
|
margin-bottom: 0 auto;
|
|
//background-color: green;
|
|
height: auto;
|
|
background-color: #fff;
|
|
|
|
>p {
|
|
display: none;
|
|
}
|
|
|
|
|
|
>.certificate {
|
|
position: relative;
|
|
width: 1000px;
|
|
margin: 0 auto;
|
|
|
|
>ul {
|
|
margin-top: 80px;
|
|
width: 100%;
|
|
//background-color: green;
|
|
>li {
|
|
margin: 0 auto;
|
|
width: 200px;
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
|
|
&.status_info_main {
|
|
position: relative;
|
|
font-weight: 700;
|
|
color: #333;
|
|
font-size: 23px;
|
|
margin-bottom: 55px;
|
|
line-height: 1.3em;
|
|
|
|
|
|
}//end of ceo_info_main
|
|
|
|
>em {
|
|
color: #ddd;
|
|
}//end of em
|
|
>span {
|
|
font-size: 20px;
|
|
}
|
|
}//end of li
|
|
}//end of ul
|
|
|
|
>.certificate_info {
|
|
width: 100%;
|
|
//background-color: green;
|
|
|
|
>div {
|
|
width: 100%;
|
|
|
|
>ul {
|
|
|
|
>li {
|
|
float: left;
|
|
margin: 0 47px 50px 0;
|
|
width: 300px;
|
|
height: 400px;
|
|
//background-color: pink;
|
|
border: 1px dotted #aaa;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
>dl {
|
|
|
|
>dt {
|
|
width: 300px;
|
|
height: 350px;
|
|
text-indent: -99999px;
|
|
//background-color: orange;
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
>dd {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
}
|
|
}//end of all dl
|
|
}//end of all li
|
|
}//end of all ul
|
|
}//end of all div
|
|
|
|
|
|
>.sect01 >ul >li {
|
|
|
|
&:nth-child(1) > dl > dt {
|
|
background-image: url(../images/certificate_10.png);
|
|
background-size: contain;
|
|
}
|
|
&:nth-child(2) > dl > dt {
|
|
background-image: url(../images/certificate_12.png);
|
|
background-size: contain;
|
|
}
|
|
&:nth-child(3) > dl > dt {
|
|
background-image: url(../images/certificate_02.png);
|
|
|
|
}
|
|
|
|
}//end of sect01 img
|
|
|
|
>.sect02 >ul >li {
|
|
|
|
&:nth-child(1) > dl > dt {
|
|
background-image: url(../images/certificate_04.png);
|
|
}
|
|
&:nth-child(2) > dl > dt {
|
|
background-image: url(../images/certificate_05.png);
|
|
}
|
|
&:nth-child(3) > dl > dt {
|
|
background-image: url(../images/certificate_06.png);
|
|
}
|
|
|
|
}//end of sect02 img
|
|
|
|
|
|
>.sect03 >ul >li {
|
|
|
|
&:nth-child(1) > dl > dt {
|
|
background-image: url(../images/certificate_07.png);
|
|
}
|
|
&:nth-child(2) > dl > dt {
|
|
background-size: contain;
|
|
background-image: url(../images/certificate_09.png);
|
|
background-position: 50% 50%;
|
|
}
|
|
&:nth-child(3) > dl > dt {
|
|
background-size: contain;
|
|
background-image: url(../images/certificate_11.png);
|
|
background-position: 50% 50%;
|
|
}
|
|
|
|
|
|
}//end of sect03 img
|
|
|
|
>.sect04 >ul >li {
|
|
|
|
&:nth-child(1) > dl > dt {
|
|
background-image: url(../images/certificate_11.png);
|
|
background-size: contain;
|
|
}
|
|
&:nth-child(2) > dl > dt {
|
|
background-size: contain;
|
|
background-position: 50% 50%;
|
|
}
|
|
&:nth-child(3) > dl > dt {
|
|
background-size: cover;
|
|
background-position: 50% 50%;
|
|
}
|
|
|
|
|
|
}//end of sect04 img
|
|
|
|
}//end of certificate_info-->
|
|
|
|
}//end of ceo_info
|
|
|
|
}//end of certificate
|
|
|
|
|
|
.careers {
|
|
width: 1200px;
|
|
height: 1600px;
|
|
margin: 0 auto;
|
|
background-image: url(../images/company_04_bg.png);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
border: 1px solid #eee;
|
|
|
|
.careersTitle {
|
|
padding: 10px 0;
|
|
width: 170px;
|
|
background-color: $mainColor;
|
|
text-align: center;
|
|
font-size: 23px;
|
|
color: #fff;
|
|
}//end of talent
|
|
|
|
>.careersHeader {
|
|
position: relative;//하위 li테그 relative
|
|
width: 100%;
|
|
height: 370px;
|
|
|
|
>ul {
|
|
|
|
>li {
|
|
position: absolute;
|
|
|
|
&:first-child {
|
|
bottom: 10px;
|
|
right: 80px;
|
|
font-size: 100px;
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
&:last-child {
|
|
bottom: 10px;
|
|
left: 80px;
|
|
font-size: 30px;
|
|
line-height: 1.25em;
|
|
}
|
|
}
|
|
}//end of ul
|
|
}//end of careersHeader
|
|
|
|
>.talent {
|
|
padding : 100px 80px 0;
|
|
|
|
>ul {
|
|
padding-top: 15px;
|
|
|
|
>li {
|
|
position: relative;
|
|
padding-left: 25px;
|
|
font-size: 17px;
|
|
line-height: 2em;
|
|
color: #151515;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
color: #ccc;
|
|
content: '■';
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}//end of talent
|
|
|
|
.jobs {
|
|
width: 100%;
|
|
height: 400px;
|
|
@extend .talent;
|
|
|
|
>.jobsContainer {
|
|
>ul {
|
|
position: relative;//
|
|
cursor: pointer;
|
|
width: 1000px;
|
|
height: 150px;
|
|
margin-top: 20px;
|
|
border: 1px solid #ccc;
|
|
transition: all 0.3s ease-in-out;
|
|
box-sizing: border-box;
|
|
//background-color: #f5f5f5;
|
|
|
|
&:hover {
|
|
border-color: orange;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
|
|
&:nth-child(1):after {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 40px;
|
|
font-size: 70px;
|
|
font-weight: 600;
|
|
color: $mainColor;
|
|
content: "01";
|
|
}
|
|
|
|
&:nth-child(2):after {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 40px;
|
|
font-size: 70px;
|
|
font-weight: 600;
|
|
color: $mainColor;
|
|
content: "02";
|
|
|
|
}
|
|
|
|
>li {
|
|
float: left;
|
|
|
|
&:first-child {
|
|
position: relative;
|
|
width: 70%;
|
|
//background-color: lightcoral;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
bottom: 25px;
|
|
right: 0;
|
|
width: 95%;
|
|
height: 1px;
|
|
background-color: #ccc;
|
|
content: '';
|
|
}
|
|
|
|
>dl {
|
|
padding : 45px 0 0px 150px;
|
|
|
|
>dt {
|
|
font-size: 25px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
>dd {
|
|
margin-top: 10px;
|
|
font-size: 17px;
|
|
color: #888;
|
|
}
|
|
.job_1 {
|
|
|
|
margin-bottom : 25px;
|
|
|
|
}
|
|
}
|
|
}
|
|
&:last-child {
|
|
width: 30%;
|
|
height: 100%;
|
|
text-indent: -99999px;
|
|
background-image: url(../images/company_02.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
}//end of jobsContainer
|
|
|
|
>.jobsOverView {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999999;
|
|
background-color: rgba(000,000,000,0.7);
|
|
|
|
>.close {
|
|
cursor: pointer;
|
|
margin: 30px;
|
|
padding: 10px;
|
|
text-align: right;
|
|
font-size: 50px;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
|
|
>ul {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 1000px;
|
|
height: 500px;
|
|
background-color: #fff;
|
|
|
|
>li {
|
|
&:first-child {
|
|
width: 100%;
|
|
height: 160px;
|
|
background-color: #bbb;
|
|
text-align: center;
|
|
|
|
>dl {
|
|
width: 300px;
|
|
height: 100px;
|
|
margin: 0 auto;
|
|
padding-top: 30px;
|
|
color: #fff;
|
|
|
|
>dt {
|
|
|
|
padding: 5px 0;
|
|
width: 120px;
|
|
margin: 0 auto;
|
|
border: 2px solid #fff;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
>dd {
|
|
margin-top: 30px;
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
}//first li
|
|
|
|
&:last-child {
|
|
width: 100%;
|
|
height: 340px;
|
|
background-color: #f2f2f2;
|
|
|
|
>ul {
|
|
>li {
|
|
float: left;
|
|
|
|
&:first-child {
|
|
width: 35%;
|
|
height: 340px;
|
|
font-size: 25px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: $mainColor;
|
|
line-height: 3em;
|
|
}
|
|
|
|
&:last-child {
|
|
padding-top: 30px;
|
|
|
|
>dl {
|
|
>dt {
|
|
font-size: 20px;
|
|
padding-bottom : 15px;
|
|
|
|
}
|
|
>dd {
|
|
font-size: 18px;
|
|
line-height: 2em;
|
|
|
|
>em {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}//last li
|
|
}
|
|
|
|
}
|
|
}//end of jobsOverView
|
|
|
|
|
|
}//end of jobs
|
|
|
|
>.other {
|
|
@extend .talent;
|
|
|
|
}
|
|
}//end of careers
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width:768px) {
|
|
|
|
.introduceContainer {
|
|
position: relative;
|
|
>p {
|
|
display: block;
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 30px;
|
|
|
|
|
|
>a {
|
|
padding: 10px;
|
|
//width: 40px;
|
|
//height: 40px;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
font-weight: 900;
|
|
color: #333;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
}
|
|
|
|
>ul {
|
|
width: 100%;//1200px
|
|
margin: 100px 0 30px;//100px auto
|
|
text-align: center;
|
|
|
|
&:after {
|
|
display: none;
|
|
position: absolute;
|
|
top: -100px;
|
|
left: 100px;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
content: '인사말';
|
|
}
|
|
|
|
>li {
|
|
text-align: center;
|
|
padding: 0 0px;//추가 0 0
|
|
|
|
&:nth-child(1) {
|
|
width: 90%;//추가
|
|
font-weight: 600;
|
|
font-size: 19px;//35px
|
|
line-height: 1.3em;
|
|
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
width: 90%;//추가
|
|
padding-top: 20px;
|
|
font-size: 13px;//20px
|
|
line-height: 2em;
|
|
|
|
>br {
|
|
display: none;
|
|
}
|
|
|
|
>em {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}//end of ul
|
|
|
|
>.normalInfo { //맨처음
|
|
margin-bottom: 90px;
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;//500px
|
|
background-image: none;//변경
|
|
background-attachment: inherit;
|
|
background-color: #f1f1f1;
|
|
background-position: 50% 10%;
|
|
|
|
&:after {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: transparent;
|
|
content: '';
|
|
}
|
|
|
|
|
|
>.normalInfoInner {
|
|
width: 100%; // 1200px
|
|
margin: 0 auto;
|
|
padding-left: 0px; //200px
|
|
|
|
>ul {
|
|
margin-top: 60px;//120px
|
|
float: inherit;//left
|
|
|
|
&:first-child {//디비엔텍 로고
|
|
|
|
>li {
|
|
float: left;
|
|
|
|
}
|
|
|
|
>.info_1 {
|
|
position: relative;
|
|
margin-top: 70px;//추가
|
|
width: 100%;//300px
|
|
height: auto;//300px
|
|
background-color: #666;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: -50px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #000;
|
|
content: '일반현황';
|
|
|
|
}
|
|
|
|
>dl {
|
|
width: 250px;
|
|
margin: 20px auto;//40px
|
|
text-align: center;
|
|
|
|
>dt {
|
|
margin-top: 0px;
|
|
width: 250px;
|
|
height: 60px;
|
|
text-indent: -999999px;
|
|
background:url(../images/logo_w.png);
|
|
background-position: 50% 50%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}//logo
|
|
|
|
>dd {
|
|
color: #fff;
|
|
line-height: 1.5em;
|
|
|
|
>em {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-top: 0px;//60px
|
|
}
|
|
|
|
}
|
|
|
|
>.info_shot {
|
|
display: none;
|
|
}
|
|
|
|
>.info_name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
}
|
|
}//end of info_1
|
|
|
|
}//end of 첫번째 ul
|
|
|
|
&:last-child {
|
|
margin-top: -40px;
|
|
//overflow: hidden;
|
|
margin-left: 0px;//50px
|
|
width: 100%;//660px
|
|
background-color:rgba(255,255,255,0.4);
|
|
//background-color:rgba(000,000,000,0.1);
|
|
|
|
>li {
|
|
float: left;
|
|
font-size: 16px;
|
|
|
|
>dl {
|
|
dd {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
//border-bottom: 1px solid #eee;
|
|
}
|
|
}
|
|
|
|
|
|
&:first-child {
|
|
width: 100%;
|
|
background: #f1f1f1;
|
|
|
|
|
|
>dl{
|
|
|
|
>dd {
|
|
cursor: pointer;
|
|
width: 70px;
|
|
float: left;
|
|
padding: 0 7px;
|
|
border: 3px solid #0061a9;
|
|
//margin-right: 10px;
|
|
margin: 3px 5px;
|
|
border-radius: 40px;
|
|
//box-sizing: border-box;
|
|
text-align: center;//justify
|
|
text-align-last: center;//justify
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
background-color: #0061a9;
|
|
|
|
&:hover {
|
|
background-color: #666;
|
|
}
|
|
|
|
}
|
|
|
|
}//end of dl
|
|
}
|
|
|
|
&:last-child {
|
|
position: relative;
|
|
width: 100%;
|
|
border-top: 1px solid #555;
|
|
//background-color: green;
|
|
>dl >dd {
|
|
position: absolute;//추가
|
|
top: 0;//추가
|
|
left: 0;//추가
|
|
color: #fff;
|
|
background-color: #666;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
width: calc(7/100%);//추가
|
|
height: 100px;//변경
|
|
line-height: 100px;//추가 float: left;
|
|
padding-left: 0px;//20px
|
|
text-align: center;//추가
|
|
//border-bottom: 1px solid #ccc;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}//end of 두번째 ul
|
|
|
|
}//end of ul
|
|
}//end of normalInfoInner
|
|
|
|
|
|
}//end of normalInfo
|
|
|
|
}//end of introduceContainer
|
|
|
|
|
|
.organization {
|
|
width: 100%;
|
|
height: 400px;
|
|
margin: 0 auto;
|
|
background-image: url(../images/organigation_2.jpg);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 70%;
|
|
background-size: 190%;
|
|
|
|
>p {
|
|
margin: 50px 0 0 50px;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #000;
|
|
}
|
|
|
|
}//end of organization
|
|
|
|
|
|
|
|
|
|
.welfareContainer {
|
|
padding: 100px 0 0px;//50px 0 100px
|
|
width: 100%;
|
|
|
|
>.welfare_head {
|
|
width: 100%;//1200px
|
|
margin: 80px auto 20px;// 하단 20px 추가
|
|
text-align: center;
|
|
|
|
>ul {
|
|
li {
|
|
padding: 0 20px;
|
|
|
|
&:first-child {
|
|
margin-bottom: 30px;
|
|
font-size: 25px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&:last-child {
|
|
line-height: 1.6em;
|
|
font-size: 14px;
|
|
|
|
>br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}//end of welfare_head
|
|
|
|
>.welfare_body {
|
|
width: 100%;//904px
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
|
|
|
|
>ul {
|
|
|
|
>li {
|
|
width: 100%;//300px
|
|
height: 100%;//300px
|
|
float: inherit;//left
|
|
border: 1px solid #0061a9;
|
|
border-right: 0;
|
|
|
|
>dl {
|
|
|
|
>dt {
|
|
position: relative;
|
|
margin-top: 100px;
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: -80px;
|
|
left: 50%;
|
|
width: 70px;
|
|
height: 70px;
|
|
transform: translateX(-50%);
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: cover;
|
|
content: '';
|
|
}//복리후생의 아이콘들 after 기본값
|
|
}
|
|
|
|
>dd {
|
|
margin-bottom: 20px;
|
|
padding-top: 5px;
|
|
line-height: 1.4em;
|
|
color: #bbb;
|
|
font-weight: 600;
|
|
|
|
}
|
|
}// 모든 dl css
|
|
|
|
&:nth-child(2) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/company_work.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 근무제도 아이콘
|
|
|
|
&:nth-child(3) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/education.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 교육비 아이콘
|
|
|
|
&:nth-child(4) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/help.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 법적 복리후생 아이콘
|
|
|
|
&:nth-child(5) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/clock.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 탄력근무제 아이콘
|
|
|
|
&:nth-child(6) {
|
|
|
|
>dl>dt {
|
|
|
|
&:after {
|
|
background-image: url(../images/money.png);
|
|
content: '';
|
|
}
|
|
}
|
|
}// 경조사비 지원 아이콘
|
|
|
|
|
|
&:nth-child(1),&:nth-child(2),&:nth-child(3) {
|
|
border-bottom: 1px solid #0061a9;
|
|
}//겹침 선 제거
|
|
|
|
&:nth-child(3),&:nth-child(6) {
|
|
border-right: 0px solid #0061a9;//border-right: 1px solid #0061a9;
|
|
}//빈 선 추가
|
|
|
|
&:nth-child(6) {
|
|
border-bottom: 2px solid #0061a9;
|
|
}
|
|
|
|
&:first-child {
|
|
background-color: #0061a9;
|
|
color: #fff;
|
|
|
|
>.wfS{
|
|
margin-top: 30px;////end of 120px
|
|
|
|
>dt {
|
|
margin-top: 0px;//end of 130px
|
|
font-size: 22px;
|
|
padding-bottom: 3px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
dd {
|
|
padding-top: 0px;
|
|
font-size: 30px;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
}
|
|
}// 첫번째 dl css
|
|
}//end of first li
|
|
|
|
|
|
|
|
}//end of li
|
|
|
|
}//end of welfare_body
|
|
|
|
}//end of welfare_body
|
|
}//end of welfareContainer
|
|
|
|
|
|
|
|
|
|
.certificationContainer {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom: 0 auto;
|
|
//background-color: green;
|
|
height: auto;//1600px
|
|
background-color: #fff;
|
|
>p {
|
|
display: block;
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 30px;
|
|
|
|
>a {
|
|
padding: 10px;
|
|
//width: 40px;
|
|
//height: 40px;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
font-weight: 900;
|
|
color: #333;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
>.certificate {
|
|
position: relative;
|
|
width: 100%;//1000px
|
|
margin: 0 auto;
|
|
|
|
>ul {
|
|
margin-top: 80px;
|
|
width: 100%;
|
|
//background-color: green;
|
|
>li {
|
|
margin: 0 auto;
|
|
width: 100%;//200px
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
font-size: 40px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
|
|
&.status_info_main {
|
|
position: relative;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin-bottom: 55px;
|
|
line-height: 1.3em;
|
|
|
|
|
|
}//end of ceo_info_main
|
|
|
|
>em {
|
|
color: #ddd;
|
|
}//end of em
|
|
>span {
|
|
font-size: 20px;
|
|
}
|
|
}//end of li
|
|
}//end of ul
|
|
|
|
>.certificate_info {
|
|
width: 100%;
|
|
//background-color: green;
|
|
|
|
>div {
|
|
width: 100%;
|
|
|
|
>ul {
|
|
|
|
>li {
|
|
float: inherit;//left
|
|
margin: 0 47px 50px 0;
|
|
width: 100%;//300px
|
|
height: 400px;
|
|
//background-color: pink;
|
|
border: 1px dotted #aaa;
|
|
border-right: none;
|
|
border-left: none;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
>dl {
|
|
|
|
>dt {
|
|
width: 100%;//300px
|
|
height: 350px;
|
|
text-indent: -99999px;
|
|
//background-color: orange;
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;//cover
|
|
}
|
|
>dd {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
}
|
|
}//end of all dl
|
|
}//end of all li
|
|
}//end of all ul
|
|
}//end of all div
|
|
|
|
|
|
>.sect01 >ul >li {
|
|
|
|
&:nth-child(1) > dl > dt {
|
|
background-image: url(../images/certificate_10.png);
|
|
}
|
|
&:nth-child(2) > dl > dt {
|
|
background-image: url(../images/certificate_12.png);
|
|
}
|
|
&:nth-child(3) > dl > dt {
|
|
background-image: url(../images/certificate_02.png);
|
|
}
|
|
|
|
}//end of sect01 img
|
|
|
|
>.sect02 >ul >li {
|
|
|
|
&:nth-child(1) > dl > dt {
|
|
background-image: url(../images/certificate_04.png);
|
|
}
|
|
&:nth-child(2) > dl > dt {
|
|
background-image: url(../images/certificate_05.png);
|
|
}
|
|
&:nth-child(3) > dl > dt {
|
|
background-image: url(../images/certificate_06.png);
|
|
}
|
|
|
|
}//end of sect02 img
|
|
|
|
|
|
>.sect03 >ul >li {
|
|
|
|
&:nth-child(1) > dl > dt {
|
|
background-image: url(../images/certificate_07.png);
|
|
}
|
|
&:nth-child(2) > dl > dt {
|
|
background-size: contain;
|
|
background-image: url(../images/certificate_09.png);
|
|
background-position: 50% 50%;
|
|
}
|
|
&:nth-child(3) > dl > dt {
|
|
background-size: contain;
|
|
background-image: url(../images/certificate_11.png);
|
|
background-position: 50% 50%;
|
|
}
|
|
|
|
|
|
|
|
}//end of sect03 img
|
|
|
|
}//end of certificate_info-->
|
|
|
|
}//end of ceo_info
|
|
|
|
}//end of certificate
|
|
|
|
.careers {
|
|
width: 100%;//1200px
|
|
height: auto;
|
|
margin: 0 auto;
|
|
background-image: url(../images/company_04_bg.png);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
border: 0px solid #eee;
|
|
|
|
.careersTitle {
|
|
padding: 10px 0;
|
|
width: 170px;
|
|
background-color: $mainColor;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
color: #fff;
|
|
}//end of talent
|
|
|
|
>.careersHeader {
|
|
position: relative;//하위 li테그 relative
|
|
width: 100%;
|
|
height: 370px;
|
|
|
|
>ul {
|
|
|
|
>li {
|
|
width: 100%;
|
|
position: inherit;
|
|
|
|
&:first-child {
|
|
padding-top : 100px;
|
|
padding-bottom: 30px;
|
|
text-align: center;
|
|
bottom: 0px;//bottom: 80px;
|
|
right: 0px;//right: 80px;
|
|
font-size: 100px;
|
|
font-weight: 600;
|
|
|
|
|
|
|
|
}
|
|
|
|
&:last-child {
|
|
padding: 0px;
|
|
text-align: center;
|
|
bottom: 10px;
|
|
left: 80px;
|
|
font-size: 25px;
|
|
line-height: 1.25em;
|
|
|
|
>br {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}//end of ul
|
|
}//end of careersHeader
|
|
|
|
>.talent {
|
|
padding : 100px 0px 0;
|
|
|
|
>ul {
|
|
padding-top: 15px;
|
|
|
|
>li {
|
|
position: relative;
|
|
padding: 0 20px ;
|
|
font-size: 15px;
|
|
line-height: 2em;
|
|
color: #151515;
|
|
|
|
&:after {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
color: #ccc;
|
|
content: '■';
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}//end of talent
|
|
|
|
.jobs {
|
|
width: 100%;
|
|
height: 400px;
|
|
padding-left : 0;
|
|
|
|
>.jobsContainer {
|
|
>ul {
|
|
position: relative;//
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 150px;
|
|
margin-top: 30px;
|
|
border: 1px solid #ccc;
|
|
transition: border-color 0.3s;
|
|
box-sizing: border-box;
|
|
//background-color: #f5f5f5;
|
|
|
|
&:hover {
|
|
border-color: orange;
|
|
}
|
|
|
|
|
|
&:nth-child(1):after {
|
|
position: absolute;
|
|
top: 35%;
|
|
transform: translateY(-50%);
|
|
left: 20px;
|
|
font-size: 70px;
|
|
font-weight: 600;
|
|
color: $mainColor;
|
|
content: "01";
|
|
}
|
|
|
|
&:nth-child(2):after {
|
|
position: absolute;
|
|
top: 35%;
|
|
transform: translateY(-50%);
|
|
left: 20px;
|
|
font-size: 70px;
|
|
font-weight: 600;
|
|
color: $mainColor;
|
|
content: "02";
|
|
|
|
}
|
|
|
|
>li {
|
|
float: inherit;
|
|
|
|
&:first-child {
|
|
position: relative;
|
|
width: 100%;
|
|
//background-color: lightcoral;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #ccc;
|
|
content: '';
|
|
}
|
|
|
|
>dl {
|
|
padding : 30px 0 0px 120px;
|
|
|
|
|
|
|
|
>dt {
|
|
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
>dd {
|
|
margin-top: 10px;
|
|
font-size: 20px;
|
|
color: #ccc;
|
|
}
|
|
.job_1 {
|
|
|
|
margin-bottom : 40px;
|
|
|
|
}
|
|
}
|
|
}
|
|
&:last-child {
|
|
display: none;
|
|
width: 30%;
|
|
height: 100%;
|
|
text-indent: -99999px;
|
|
background-image: url(../images/company_02.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
}//end of jobsContainer
|
|
|
|
>.jobsOverView {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999999;
|
|
background-color: rgba(000,000,000,0.7);
|
|
|
|
|
|
|
|
>ul {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
height: 480px;
|
|
background-color: #fff;
|
|
|
|
>li {
|
|
&:first-child {
|
|
width: 100%;
|
|
height: 100px;
|
|
background-color: #bbb;
|
|
text-align: center;
|
|
|
|
>dl {
|
|
width: 100%;
|
|
height: 50px;
|
|
margin: 0 auto;
|
|
padding-top: 15px;
|
|
color: #fff;
|
|
|
|
>dt {
|
|
|
|
padding: 5px 0;
|
|
width: 120px;
|
|
margin: 0 auto;
|
|
border: 2px solid #fff;
|
|
border-radius: 30px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
>dd {
|
|
margin-top: 10px;
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
}//first li
|
|
|
|
&:last-child {
|
|
width: 100%;
|
|
height: auto;
|
|
background-color: #f2f2f2;
|
|
|
|
>ul {
|
|
>li {
|
|
float: inherit;
|
|
|
|
&:first-child {
|
|
width: 100%;
|
|
height: auto;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
color: $mainColor;
|
|
line-height: 3em;
|
|
}
|
|
|
|
&:last-child {
|
|
height: 320px;
|
|
padding-top: 0px;
|
|
|
|
|
|
>dl {
|
|
padding: 0 20px;
|
|
>dt {
|
|
font-size: 15px;
|
|
padding-bottom : 15px;
|
|
|
|
}
|
|
>dd {
|
|
font-size: 13px;
|
|
line-height: 2em;
|
|
|
|
>em {
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}//last li
|
|
}
|
|
|
|
}
|
|
}//end of jobsOverView
|
|
|
|
|
|
}//end of jobs
|
|
|
|
>.other {
|
|
margin-bottom: 80px;
|
|
}
|
|
}//end of careers
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}//end of mediaQuery |