@charset "UTF-8";
body {
    --primary: #002f7c; 
    --second: #00c75e; 
    --accent: #dc1515;
    --ellipsis: 1;
}

* { letter-spacing: -0.02em; }
body { font-family: 'Pretendard', sans-serif; word-break: keep-all; }
img { vertical-align: top; }
.inner { max-width: 1400px; }

@media screen and (min-width: 769px){
    /* header */
    .hd { position: fixed; left: 0; top: 0; width: 100%; z-index: 99999; transition: 0.4s; color: #fff; }
    .hd-wrap { display: flex; justify-content: space-between; align-items: center; }
    .hd-logo { padding: 1em 0; filter: brightness(0) invert(1); }
    .hd-gnb-btn { display: none; }
    .hd-gnb { font-size: 1.25em; font-weight: 700; }
    .hd-gnb > ul { display: flex; align-items: center; }
    .hd-gnb > ul > li { position: relative; margin: 0 1em; } 
    .hd-gnb > ul > li:hover { color: var(--primary); }
    .hd-gnb > ul > li > a { display: block; padding: 1em; }
    .hd-gnb-sub { font-size: 0.875em; padding: 1em 2em; font-weight: 500; position: absolute; top: 90%; left: 50%; transform: translateX(-50%); white-space: nowrap; background-color: var(--primary); color: #fff; border-radius: 0.5em; display: none; }
    .hd-gnb-sub li { margin-bottom: 0.675em; opacity: 0.5; }
    .hd-gnb-sub li:last-child { margin-bottom: 0; }
    .hd-gnb-sub li:hover { opacity: 1; }
    .hd.fixed { background-color: #fff; border-bottom: 1px solid #ddd; color: #000; }
    .hd.fixed .hd-logo { filter: none; }

    /* footer */
    .ft { padding: 2em 0 4em; background-color: #222222; color: #888; }
    .ft-wrap { display: flex; }
    .ft-txt { margin-left: 3em; line-height: 1.6; }
    .ft-copyright { margin-top: 1em; font-size: 0.875em; }
}
@media screen and (max-width: 768px){ 
    /* header */
    .hd { position: fixed; left: 0; top: 0; width: 100%; z-index: 99999; transition: 0.4s; }
    .hd-wrap { display: flex; justify-content: space-between; align-items: center; }
    .hd-logo { width: 30%; padding: 1em 0; filter: brightness(0) invert(1); }
    .hd-logo img { width: 100%; }
    .hd-gnb-btn { display: block; position: relative; width: 2.25em; height: 2.25em; }
    .hd-gnb-btn .bar { width: 2.25em; height: 0.25em; background-color: #fff; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
    .hd-gnb-btn .bar1 { margin-top: -0.75em; }
    .hd-gnb-btn .bar3 { margin-top: 0.75em; }
    .hd-gnb-btn.active .bar1 { margin: 0; transform: translate(-50%,-50%) rotate(-45deg); }
    .hd-gnb-btn.active .bar2 { width: 0; }
    .hd-gnb-btn.active .bar3 { margin: 0; transform: translate(-50%,-50%) rotate(45deg); }
    .hd-gnb { position: fixed; right: 0; top: 0; height: 100vh; width: 100%; background-color: rgba(0,0,0,0.5); z-index: 99;  display: none; }
    .hd-gnb a { display: block; line-height: 2.5; }
    .hd-gnb > ul { background-color: #f5f5f5; width: 70%; height: 100%; margin-left: auto; position: absolute; right: 0; top: 0; transform: translateX(100%);transition: 0.4s;}
    .hd-gnb > ul > li { margin-bottom: 0.3em; }
    .hd-gnb > ul > li > a { font-size: 1.5em; padding: 0 1em; font-weight: 700; background-color: #fff; border-bottom: 1px solid #eee; box-shadow: 0 3px 3px rgba(0,0,0,0.05); pointer-events: none;  }
    .hd-gnb-sub { display: none; }
    .hd-gnb-sub li a { font-size: 1.25em; font-weight: 500; padding: 0 1.5em; color: #666; background-color: #fff; border-bottom: 1px solid #eee; }

    .hd-gnb.open > ul { transform: translateX(0); } 

    .hd.fixed { background-color: #fff; border-bottom: 1px solid #ddd; color: #000; }
    .hd.fixed .hd-logo { filter: none; }
    .hd.fixed .hd-gnb-btn .bar { background-color: var(--primary); }

    /* footer */
    .ft { padding: 2em 0 4em; background-color: #222222; color: #888; }
    .ft-wrap { text-align: center; }
    .ft-logo { width: 30%; margin: auto; }
    .ft-logo img { width: 100%; }
    .ft-txt { line-height: 1.6; margin-top: 1em; }
    .ft-copyright { margin-top: 1em; font-size: 0.875em; }
}
.hd.idx { color: #000; }
.hd.idx .hd-logo { filter: none; }

/* style */
.gradient { background: linear-gradient(to bottom, var(--gra1), var(--gra2)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: var(--ellipsis); -webkit-box-orient: vertical; }
.bgc { background-color: #f5f5f5; }
.primary { color: var(--primary); }
.second { color: var(--second); }
.accent { color: var(--accent); }
.round { display: inline-block; height: 2em; line-height: 2; padding: 0 1em; background-color: var(--primary); color: #fff; border-radius: 10em; }

/* sub */
.sub section { padding: 6em 0; }
.content h2 { font-size: 3em; }
.content h3 { font-size: 2.25em; }
.content h4 { font-size: 1.875em; }
.content h5 { font-size: 1.5em; }
.content p { font-size: 1.375em; }
.content small { font-size: 1.125em; }

.sub .visual { padding: 10em 0 8em; background: no-repeat center/cover;  position: relative; color: #fff; }
.sub .visual::before { content:""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.2); }
.sub .visual .inner { position: relative; }
.sub .visual .path { font-size: 1.125em; font-weight: 600; }
.sub .visual .path span { margin: 0 0.5em; }
.sub .visual h2 { font-weight: 700; font-size: 3em; }
.sub1 .visual { background-image: url(../img/sub1_visual.jpg); }
.sub2 .visual { background-image: url(../img/sub2_visual.jpg); }
.sub3 .visual { background-image: url(../img/sub3_visual.jpg); }
.sub4 .visual { background-image: url(../img/sub4_visual.jpg); }
.sub5 .visual { background-image: url(../img/sub5_visual.jpg); }
.sub6 .visual { background-image: url(../img/sub6_visual.jpg); }

.sub .title { text-align: center; margin-bottom: 3em; }
.sub .title small { margin-bottom: 1em; }
.sub .title p { margin-top: 0.5em; }

.sub table { font-size: 1.25em; }
.sub td,.sub2 th { padding: 0.875em; }
.sub th { font-weight: 600; }
.sub caption { font-size: 0.875em; margin-bottom: 0.5em; text-align: right; color: #777; }
.sub .tbl_01 td, 
.sub .tbl_01 th { border: 1px solid #000; }
.sub .tbl_02 { border-top: 2px solid #000; }
.sub .tbl_02 tr { border-bottom: 1px solid #000; }
.sub .tbl_03 { border-top: 2px solid #000; }
.sub .tbl_03 th { background-color: #f5f5f5; }
.sub .bgc .tbl_03 th { background-color: #ddd; }
.sub .tbl_03 th, 
.sub .tbl_03 td { border: 1px solid #000; }

.sub .img img  { max-width: 100%; }
.sub .img-box { display: flex; align-items: flex-start; justify-content: center; }
.sub .img-box img { margin-right: 1%; }
.sub .img-box img:last-child { margin-right: 0; }

/* 회사개요 */
.company { text-align: center; }
.company .txt p { margin-bottom: 1em; }
.company .txt p:last-child { margin-bottom: 0; }
.company .box { margin: 4em 0; padding: 4em 0; background: url(../img/company_bg.jpg) no-repeat center/cover; color: #fff; }
.company .box .line { margin: 2em auto; display: block; width: 2.5em; height: 0.2em; background-color: #fff; border: 0; }

/* CEO 인사말 */
.greeting .title h3 { padding: 0 2em; display: inline-block; background: url(../img/title_ico_left.png) no-repeat left center/5%, url(../img/title_ico_right.png) no-repeat right center/5%; }
.greeting .box { padding-top: 4em; display: flex; border-top: 1px solid #000;}
.greeting .box p { margin-top: 1.5em; }
.greeting .img { width: 46%; margin-left: auto; }
.greeting .txt { width: 50%; }

/* 비전 2030 */
.vision .item { padding: 4em; margin-bottom: 2em; display: flex; align-items: center; border: 1px solid #ddd; }
.vision .item:last-child { margin-bottom: 0; }
.vision .item .icon { width: 8%; }
.vision .item .icon img { width: 100%; }
.vision .item h4 { margin-left: 2em; margin-right: auto; font-weight: 700; }
.vision .item .txt { width: 65%; }
.vision .item .txt p { margin-bottom: 0.5em; display: flex; align-items: flex-start; }
.vision .item .txt p:last-child { margin-bottom: 0; }
.vision .item .txt i { vertical-align: middle; margin-top: 0.1em; margin-right: 0.3em; }

/* 연혁 */
.history .item { margin-top: 5em; display: flex; }
.history .item h4 b { font-size: 3em; line-height: 1; }
.history .item h4 { margin-right: 2%; }
.history .item .txt { width: 80%; margin-left: auto; max-width: 800px; }
.history .item p { padding: 1.5em 0; border-bottom: 1px solid #ddd; }
.history .item p:first-child { padding-top: 0.5em; }
.history .item p b { font-size: 1.25em; display: inline-block; width: 6em; text-align: center; vertical-align: middle; }

/* 조직도 */
.organization {  }

/* 사업장안내 */
.directions .item { margin-bottom: 5em; }
.directions .item h5 { margin-bottom: 1em; }
.directions .item .round { margin-right: 0.5em; }
.directions .item:last-child { margin-bottom: 0; }

/* 사업분야 공통 */
.sub2 .content { text-align: center; }
.sub2 .after h3 { font-weight: 700; }
.sub2 .after h3::before { content:""; width: 1em; height: 0.15em; background-color: #000; margin: 0 auto 0.5em; display: block; }
.sub2 .use { font-size: 1.125em; padding: 1em 0; max-width: 800px; margin: auto; color: #777; border: 1px solid #ddd; }
.sub2 .round { margin-bottom: 0.75em; font-weight: 700; }
.sub2 .area { margin-bottom: 5em; }
.sub2 .area:last-child { margin-bottom: 0; }
.sub2 .txt { font-size: 1.25em; }

/* 페로니켈슬래그 소개 */
.slag {  }
.slag1 .item { padding: 3em; border: 1px solid #ddd; margin-bottom: 2em; }
.slag1 .item1 { display: flex; justify-content: space-around; align-items: center; }
.slag1 .item1 .txt { width: 60%; text-align: left; font-size: 1em; }
.slag1 .item1 h2 { margin-bottom: 0.5em; }
.slag1 .item1 .img { width: 25%; }
.slag1 .item2 { text-align: center; }
.slag1 .item2 .txt { font-size: 1em; }
.slag1 .item2 h3 { margin-top: 0.5em; }
.slag1 .item2 .img { margin-top: 2em; }
.slag2 .title .icon { width: 7%; margin-bottom: 0.5em; }
.slag2 .img { margin-bottom: 2em; }
.slag3 .box { margin-top: 2em; display: flex; justify-content: space-around; }
.slag3 .txt { width: 42%; text-align: left; }
.slag3 .txt h4 { margin-bottom: 0.5em; }
.slag3 .txt p { margin: 0.3em 0; }
.slag3 .txt .img { margin-top: 2em; }
.slag3 .process { margin-top: 2em; }
.slag4 h4 { margin-bottom: 1em; }
.slag4 table td { width: 30%; }
.slag4 table th:nth-child(1),
.slag4 table td:nth-child(1) { width: 10%; }
.slag4 .accent { margin-top: 0.5em; text-align: left; }

/* 프라임 파우더 */
.powder {  }
.powder2 .box { display: flex; align-items: center; }
.powder2 .img { width: 54%; }
.powder2 .list { margin-left: 3em; width: 40%; max-width: 544px;}
.powder2 .item { text-align: left; position: relative; padding-left: 4em; margin-bottom: 2em; }
.powder2 .item:last-child { margin-bottom: 0; }
.powder2 .num { font-size: 2.5em; font-weight: 700; color: #d8e2f2; font-style: italic; position: absolute; left: 0; top: 0; }
.powder2 .img-box { margin-top: 1em; }
.powder2 .img-box img { width: 32.666%; }
.powder3 img { max-width: 100%; }
.powder3 .source { font-size: 1.125em; color: #777; text-align: right; margin-top: 0.5em; }
.powder3 .area1 .box { margin-top: 3em; }
.powder3 .area1 h3.second { font-weight: 700; margin-bottom: 0.25em; }
.powder3 .area1 .tbl_02 .emph { border: 5px solid #dc1515; background-color: #fff8c7; }
.powder3 .area2 .tbl_03 { margin-top: 2em; }
.powder3 .area3 .list { margin-top: 2em; display: flex; flex-wrap: wrap; justify-content: space-between; text-align: left; }
.powder3 .area3 .item { width: 48%; margin: 0 1%; margin-bottom: 2em; }
.powder3 .area3 .item b { background-color: var(--second); color: #fff; display: inline-block; padding: 0.2em 0.5em; }
.powder3 .area3 .item .img { margin-top: 0.5em; }
.powder3 .area4 .tbl_02 { margin-top: 1em; }
.powder3 .area5 .list { margin-top: 1em; display: flex; justify-content: center; }
.powder3 .area5 .item { width: 25%; margin: 0 1%; border-radius: 1em; overflow: hidden; border: 1px solid #ddd; background-color: #fff; }
.powder3 .area5 .item h5 { line-height: 2; background-color: var(--second); color: #fff; }
.powder3 .area5 .item p { padding: 1em 1em 2em; }
.powder3 .area5 .item p small { font-size: 0.875em; color: #777; }
.powder3 .area6 .img { margin: 2em 0; }
.powder3 .area6 .list { padding: 3em 0; background-color: #fff; border: 1px solid #ddd; margin-bottom: 2em; }
.powder3 .area6 .item { line-height: 1.5; }
.powder3 .area6 .item p { width: 40em; text-align: left; margin: auto;}
.powder3 .area6 .img-box { margin-top: 1em; }
.powder3 .area6 .img-box .img1 { width: 70%; }
.powder3 .area6 .img-box .img2 { width: 26%; }
.powder3 .area7 h4 { font-size: 1.5em; width: 100%; display: flex; justify-content: space-between; }
.powder3 .area7 h4 b { width: 49.5%; line-height: 2; background-color: #000; color: #fff; }
.powder3 .area7 .list { margin-top: 0.5em; display: flex; justify-content: space-between; }
.powder3 .area7 .item { width: 24.25%; margin-top: 0.5em; background-color: #fff; border: 1px solid #ddd; }
.powder3 .area7 .img { width: 100%; border-bottom: 1px solid #ddd; }
.powder3 .area7 .img img { width: 100%; }
.powder3 .area7 .txt { padding: 0.5em 1em 1em; }
.powder3 .area7 .txt h5 { font-size: 1.25em; margin-bottom: 0.5em; font-weight: 700; }
.powder3 .area7 .txt p { font-size: 0.9em; text-align: left; }
.powder3 .area7 .txt p::before { content:"·"; }

.powder4 .area1 .txt { margin-top: 1em; text-align: left; display: flex; }
.powder4 .area1 .txt h5 { font-size: 1.125em; font-weight: 700; }
.powder4 .area1 .txt h5::before { content:""; width: 0.18em; height: 1em; display: inline-block; background-color: #000; vertical-align: middle; margin-right: 0.5em; margin-top: -0.2em; }
.powder4 .area1 .txt p { font-size: 0.875em; margin-left: 1em; }
.powder4 .area2 .list { display: flex; }
.powder4 .area2 .item { width: 23%; margin: 0 1%; border: 1px solid #ddd; }
.powder4 .area2 .item h5 { background-color: var(--second); color: #fff; line-height: 2; }
.powder4 .area2 .txt { padding: 1.5em; text-align: left; }
.powder4 .area2 .txt p { font-size: 1em; margin-bottom: 0.5em; position: relative; padding-left: 0.5em;}
.powder4 .area2 .txt p::before { content:""; width: 0.25em; height: 0.25em; background-color: #666; display: inline-block; vertical-align: middle; border-radius: 1em; position: absolute; left: 0; top: 0.5em; }  
.powder4 .area3 .box { display: flex; justify-content: space-around; }
.powder4 .area3 .box .img { width: 49%; }
.powder4 .area3 .txt { width: 49%; font-size: 0.75em; }
.powder4 .area3 .txt p { margin-top: 1em; }
.powder4 .area3 .tbl_01 th,
.powder4 .area3 .tbl_01 td { border-color: #ddd; padding: 1.57em 0.875em; }
.powder5 .area1 .list { display: flex; } 
.powder5 .area1 .item { width: 31.3333%; margin: 1%; display: flex; border: 1px solid #ddd; border-radius: 1em; align-items: center; background-color: var(--second); overflow: hidden; } 
.powder5 .area1 .item h5 { font-size: 1.5em; padding: 0 1em; color: #fff; }
.powder5 .area1 .item .txt { flex-grow: 1; height: 100%; padding: 1em; background-color: #fff; display: flex; flex-direction: column; text-align: left; justify-content: center; }
.powder5 .area1 .item .txt p { font-size: 1.125em; margin-bottom: 0.5em;}
.powder5 .area1 .item .txt p:last-child { margin-bottom: 0; }
.powder5 .area1 .item .txt p::before { content:""; width: 0.2em; height: 0.2em; display: inline-block; background-color: #aaa; border-radius: 0.5em; margin-top: -0.4em; vertical-align: middle; margin-right: 0.3em; }
.powder5 .area2 .img-box { margin-top: 2em; }
.powder5 .area2 .img-box img { width: 19.2%; border: 5px solid #000; }
.powder5 .area2 p { text-align: left; margin-top: 1em; }
.powder5 .area3 .tbl_03 { margin-top: 2em; }
.powder5 .area3 small { font-size: 0.875em; }
.powder5 .area4 .list { margin-top: 2em; display: flex; justify-content: center; }
.powder5 .area4 .item { width: 23%; margin: 1%; }
.powder5 .area4 .item h5 { font-weight: 700; margin: 1em 0 0.5em; }
.powder5 .area4 .item p { color: #555; }
.powder5 .area5 .img-box { margin-top: 2em; }
.powder5 .area5 .img-box img { width: 49.5%; }

/* 프라임 샌드 */
.sand2 .img-box { margin-top: 1em; }
.sand2 .img-box img { width: 32.666%; }
.sand3 .img-box { margin-top: 2em; }
.sand3 .img-box img { width: 24.25%; }
.sand4 .box { margin-top: 2em; display: flex; align-items: flex-start; justify-content: space-between; }
.sand4 .box > * { width: 48%; }
.sand4 .img-box img { width: 49.5%; }
.sand5 .tbl_02 { max-width: 600px; margin: 2em auto; }
.sand5 .img-box img { width: 24.25%; }

/* 프라임 스톤 */
.stone {  }
.stone h5 { color: #777; font-weight: 600; text-align: center; padding: 6em 0; }

/* 탄소배출권 확보 기술 */
.carbon { text-align: center; }
.carbon .round { margin-bottom: 0.5em; }
.carbon .list { margin-top: 4em; text-align: left; }
.carbon .item { margin-bottom: 2em; }
.carbon .item:last-child { margin-bottom: 0; }
.carbon .item span { font-size: 0.875em; width: 1.6em; line-height: 1.6; text-align: center; display: inline-block; background-color: #000; color: #fff; font-weight: 700; }
.carbon .item p { color: #777; padding-left: 2em; line-height: 1.4; margin-bottom: 0.5em; }
.carbon .img-box { justify-content: flex-start; padding-left: 2.5em; }
.carbon .img-box .img1 { width: 38%; }
.carbon .img-box .img2 { width: 49%; }

/* 연구소 소개 */
.lab { text-align: center; }
.lab1 .title p { margin-bottom: 0.5em; }
.lab1 h5 { margin-bottom: 2em; }
.lab1 .txt p { margin-bottom: 2em; }
.lab1 .txt p:last-child { margin-bottom: 0; }
.lab2 .img-box { justify-content: space-around; }
.lab2 .img-box .img1 { width: 15%; }
.lab2 .img-box .img2 { width: 67%; }

/* 연구성과 */
.research {  }

/* 인재상 */
.talent { text-align: center; }
.talent .list { display: flex; justify-content: space-around; }
.talent .item { width: 23%; padding-top: 23%; outline: 1.25vw solid #ddd; border-radius: 50em; position: relative; box-sizing: content-box; } 
.talent .item1 { outline-color: rgba(1, 98, 255, 0.3); }
.talent .item2 { outline-color: rgba(8, 182, 101, 0.3); }
.talent .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; }
.talent .txt h4 b { letter-spacing: 0.2em; padding-left: 0.2em; font-size: 1.875vw; }
.talent .txt p { font-size: 1.125em; margin-top: 0.5em; color: #777; }

/* 인사평가·보상제도 */
.system {  }
.system .list { display: flex; align-items: center; justify-content: center; }
.system .item { width: 29.3333%; max-width: 365px; margin: 0 2%; padding: 4em 2em; border: 1px solid #ddd; border-radius: 1em; text-align: center; }
.system .icon { width: 50%; margin: auto; }  
.system .icon img { width: 100%; }
.system .txt h5 { margin: 1.5em 0 0.5em; }

/* 복리후생 */
.benefits {  }
.benefits .list { display: flex; flex-wrap: wrap; }
.benefits .item { width: 33.333%; margin: 2em 0; display: flex; align-items: center; }
.benefits .icon { width: 40%; padding: 0 5%; }
.benefits .icon img { width: 100%; }
.benefits .txt { width: 60%; }
.benefits .txt h4 { font-weight: 700; }
.benefits .txt p { font-size: 1.125em; margin-top: 0.5em;  }
.benefits .txt p::before { content:""; width: 0.3em; height: 0.3em; background-color: #555; display: inline-block; border-radius: 1em; vertical-align: middle; margin-right: 0.5em; margin-top: -0.2em; }

/* 채용안내 */
.recruitment { text-align: center; }
.recruitment .inner { max-width: 1220px; }
.recruitment .img img { width: 100%; }
.recruitment .list { border-top: 1px solid #ddd; }
.recruitment .item { border-bottom: 1px solid #ddd; } 
.recruitment .item p { padding: 0.875em 0; display: flex; align-items: center; } 
.recruitment .item b { width: 5em; text-align: right; } 
.recruitment .item span { margin-left: 1.25em; text-align: left; }
.recruitment .item a { font-weight: 700; }
.recruitment .img-box { align-items: center; }
.recruitment .img-box img { width: 20%; }

/* 공지사항 */
.notice {  }

/* 언론보도 */
.news {  }

/* 제품 및 공법문의 */
.contact { text-align: center; }
.contact .list { display: flex; justify-content: center; align-items: center; }
.contact .item { width: 48%; max-width: 440px; padding: 4em 0 6em; margin: 1%; border-radius: 1em; border: 1px solid #ddd; }
.contact .icon img { width: 31%; }
.contact .txt h4 { margin: 1.5em 0 0.5em; }
.contact .txt p { width: 100%; max-width: 12em; text-align: left; margin: 0 auto 1em; }
.contact .txt p:last-child { margin-bottom: 0; }
.contact .txt i { margin-right: 0.5em; }

/* 자료실 */
.library {  }


/* 메인 */
.main .section { padding: 8em 0; }
.main h4 { font-size: 1.125em; font-weight: 700; margin-bottom: 3em; }
.main h2 { font-size: 3em; }
.main .visual { padding: 15em 0 35em; text-align: center; background: url(../img/main_visual_bg.png) no-repeat center/cover; }
.main .visual h2 { font-weight: 700; }

.main .sec01 { background: url(../img/main_sec01_bg.png) no-repeat center/cover; }
.main .sec01 .area { position: relative; display: flex; }
.main .sec01 .txt { width: 65%; }
.main .sec01 .txt h5 { font-size: 1.125em; margin: 1em 0 1.5em; color: #ccc; }
.main .sec01 .txt p { font-size: 1.375em; }
.main .sec01 .img { width: 35%; margin-left: auto; }
.main .sec01 .img img { width: 100%; }

.main .sec02 { color: #fff; background: url(../img/main_sec02_bg.png) no-repeat center/cover; }
.main .sec02 .swiper-area { display: flex; align-items: center; }
.main .sec02 .swiper { width: 90%; }
.main .sec02 .swiper-slide { width: 18em; margin: 1%; background: no-repeat center;}
.main .sec02 .swiper-slide a { display: block; padding: 12.5em 0; text-align: center; }
.main .sec02 .swiper-slide p { font-size: 1.875em; font-weight: 700; }
.main .sec02 .swiper-btn { font-size: 2.5em; width: 1.5em; height: 1.5em; line-height: 1.6; text-align: center; background-color: rgba(255,255,255,0.3); border-radius: 5em; cursor: pointer; }

.main .sec03 { background-color: #f5f5f5; }
.main .sec03 .list { display: flex; justify-content: space-between; }
.main .sec03 .item  { width: 49.5%; margin: 0; }
.main .sec03 .item .img { margin-bottom: 1em;; }
.main .sec03 .item img { width: 100%; }

.main .sec04 { padding: 0; display: flex; text-align: left; color: #fff; }
.main .sec04 .area { width: 50%; padding: 5em 10%; display: flex; align-items: center; background: no-repeat center/cover; justify-content: space-between; }
.main .sec04 .area1 { background-image: url(../img/main_sec04_bg_01.png); }
.main .sec04 .area2 { background-image: url(../img/main_sec04_bg_02.png); }
.main .sec04 .area h5 { font-size: 1.875em; font-weight: 700; }
.main .sec04 .list { font-size: 1.25em; font-weight: 700; text-align: right; }
.main .sec04 .list li { margin: 1em 0; }
.main .sec04 .list i { margin-left: 1em; }

.mb { display: none; }

/* responsive */
@media screen and (max-width: 1480px){
    .inner { width: 94%; }
} 
@media screen and (max-width: 1280px){
    .greeting .txt br,
    .slag4 .title p br,
    .slag4 table br,
    .powder5 .area4 .item p br,
    .lab1 .txt p br,
    .main .sec01 .txt br { display: none; }

    .powder5 .area1 .item { display: block; background-color: #fff; }
    .powder5 .area1 .item h5 { padding: 1em; background-color: var(--second); }
    .powder5 .area1 .item .txt { height: auto; }
} 
@media screen and (max-width: 1080px){
    body { font-size: 0.875rem; }

    .slag3 .box > .img { width: 35%; }
    .slag3 .txt { width: 60%; }

    .powder2 .img { width: 48%; overflow: hidden; }
    .powder2 .img img { max-width: 500%; width: 125%; margin-left: -25%; }
    .powder2 .list { width: 48%; margin: 0 2%; }
}
@media screen and (max-width: 768px){
    body { font-size: 0.75em; }  
    br { display: none; }
    br.mb { display: block !important; }

    .sub table { font-size: 0.875em; table-layout: fixed; } 
    .sub td, .sub2 th { padding: 0.875em 0; }

    .greeting .box { flex-direction: column-reverse; }
    .greeting .box > * { width: 100%; }

    .vision .item { display: block; padding: 2em; }
    .vision .item .icon { width: 15%; margin: auto; }
    .vision .item h4 { margin: 0.5em auto; text-align: center; }
    .vision .item .txt { width: 100%; }

    .history .item { display: block; }
    .history .item .txt { width: 100%; margin: 0; }
    .history .item h4 { margin-bottom: 1em; }
    .history .item h4 b { font-size: 2em; }
    .history .item p b { width: 3em; }

    .directions .item .round { margin-right: 0; margin-bottom: 0.5em; }

    .slag1 .item1 { display: block; }
    .slag1 .item1 .img { width: 30%; margin: 0 auto 2em; }
    .slag1 .item1 .txt { width: 100%; }
    .slag1 .item1 h2 { font-size: 2.5em; }

    .slag3 .box { display: block; }
    .slag3 .box > .img { width: 50%; margin: auto; }
    .slag3 .txt { width: 100%; margin: 2em 0; }

    .powder2 .box { display: block; }
    .powder2 .img { width: 100%; }
    .powder2 .list { width: 94%; margin: 3%; }
    .powder2 .item { padding: 0; }
    .powder2 .num { position: static; }

    .powder3 .area3 .item { width: 100%; }
    .powder3 .area3 .item span { display: block; }

    .powder3 .area5 .list { flex-wrap: wrap; }
    .powder3 .area5 .item { width: 98%; margin: 1%; }
    
    .powder3 .area6 .item p { width: 90%; }
    
    .powder3 .area7 { position: relative; }
    .powder3 .area7 h4 b { position: absolute; left: 0; width: 100%; }
    .powder3 .area7 h4 b:nth-child(1) { top: 4em; }
    .powder3 .area7 h4 b:nth-child(2) { bottom: 15em; }
    .powder3 .area7 .list { flex-wrap: wrap; } 
    .powder3 .area7 .item { width: 49.5%; margin-top: 5em; }

    .powder4 .area1 .txt { display: block; }

    .powder4 .area2 .list { flex-wrap: wrap; }
    .powder4 .area2 .item { width: 98%; margin: 1%; }
    .powder4 .area3 .box { display: block; }
    .powder4 .area3 .box .img { margin-bottom: 1em; }
    .powder4 .area3 .box .img,
    .powder4 .area3 .box .txt { width: 100%; }

    .powder5 .area1 .list { flex-wrap: wrap; }
    .powder5 .area1 .item { width: 98%; margin: 1%; }

    .powder5 .area2 .img-box { flex-wrap: wrap; }
    .powder5 .area2 .img-box img { width: 30%; margin: 1%; }

    .powder5 .area4 .list { flex-wrap: wrap; }
    .powder5 .area4 .item { width: 48%; margin: 2% 1%; }
 
    .powder5 .area5 .img-box { display: block; }
    .powder5 .area5 .img-box img { width: 98%; margin: 2% 1%; }

    .sand3 .img-box { flex-wrap: wrap; }
    .sand3 .img-box img { width: 48%; margin: 1%; }

    .sand4 .box { display: block; }
    .sand4 .box > * { width: 98%; margin: 2% 1%;}

    .sand5 .img-box { flex-wrap: wrap; }
    .sand5 .img-box img { width: 48%; margin: 1%; } 

    .carbon .item p { padding: 0; }
    .carbon .item span { display: block; margin-bottom: 0.5em; }
    .carbon .img-box { padding-left: 0; flex-wrap: wrap; }
    .carbon .img-box .img1 { width: 68%; margin-bottom: 2%; }
    .carbon .img-box .img2 { width: 79%; }

    .lab2 .img-box .img1 { width: 18%; }
    .lab2 .img-box .img2 { width: 70%; }
    .talent .list { flex-wrap: wrap; }
    .talent .item { width: 48%; padding-top: 48%; }
    .talent .txt h4 b { font-size: 4vw; }

    .system .list { flex-wrap: wrap; justify-content: center; }  
    .system .item { width: 98%; margin: 2% 1%; }  
    .benefits .item { width: 98%; margin: 1em 0; }  
    .recruitment .item p { flex-direction: column;  }
    .recruitment .item b,
    .recruitment .item span { width: 100%; text-align: left; margin: 0; }
    .recruitment .item b { margin-bottom: 1em; }

    .contact .list { flex-wrap: wrap; }
    .contact .item { width: 98%; padding: 2em 0 3em; }
    .contact .icon img { width: 15%; }

    .sub2 .use { padding: 1em; }

    .main .sec01 .area { flex-direction: column-reverse; }
    .main .sec01 .txt { width: 100%; }
    .main .sec01 .img { width: 70%; margin: 0 auto 3em; }

    .main .sec03 .list { display: block; }
    .main .sec03 .item { width: 100%; }
    .main .sec03 .item:nth-child(1) { margin-bottom: 3em; }
    .main .sec04 { display: block; }
    .main .sec04 .area { width: 100%; }
}
@media screen and (max-width: 586px){
    body { font-size: 0.625rem; }
}