/*
	Copyright 2020 Raonbnp
	http://raonbnp.com, http://raonwebstore.com
*/
@charset "UTF-8";
@import '/_css/common.css'; /* front, admin 공통*/
@import '/_css/member.css'; /* front member 공통*/
@import '/_css/board.css'; /* front member 공통*/
@import 'loading.css';
@import 'fontSet.css';
@import 'basic.css';
@import 'layout.css';

/*인사말*/
#intro_sec01 h4{ margin-bottom:3rem; font-size:3.2rem; font-weight:300; line-height:1.5;}
#intro_sec01 h4 b{ font-weight:700;}
#intro_sec01 .content_area{ padding:3rem 0 12rem; background:#f7f7f7;}
#intro_sec01 .content_area .tit{ display:block; margin-bottom:2rem;  font-size:2.2rem; }
#intro_sec01 .desc_area{ display:flex; flex-wrap:wrap;}
#intro_sec01 .desc_area p{ width:calc((100% - 3rem) / 2); margin-right:3rem;}
#intro_sec01 .desc_area p:last-child{ margin:0;}
#intro_sec01 .desc_area p span{ display:block; margin-bottom:3rem; font-size:1.8rem; color:#333;  }
#intro_sec01 .desc_area p span:last-child{ margin-bottom:0; }
#intro_sec01 .desc_area p span.sign{ margin-top:8rem; text-align:right; font-size:2rem; }
#intro_sec01 .desc_area p span.sign strong{ font-size:2.4rem; font-weight:700; }

@media all and (max-width:1199.98px) {
    #intro_sec01 h4{ font-size:2.5rem; }
    #intro_sec01 .content_area{ padding:3rem 0 10rem; }
    #intro_sec01 .content_area .tit{ margin-bottom:1rem; font-size:1.8rem; }
    #intro_sec01 .desc_area p span{ font-size:1.6rem; }
    #intro_sec01 .desc_area p span.sign{ font-size:1.8rem; }
    #intro_sec01 .desc_area p span.sign strong{ font-size:2rem; }
}

@media all and (max-width:991.98px) {
    #intro_sec01 .content_area{ padding:3rem 0 8rem; }
}

@media all and (max-width:767.98px) {
    #intro_sec01 h4{ font-size:2rem; }
    #intro_sec01 .content_area{ padding:3rem 0 6rem; }
    #intro_sec01 .desc_area p{ width:100%; margin-right:0; margin-bottom:2rem; }
    #intro_sec01 .desc_area p:last-child{ margin:0;}
    #intro_sec01 .desc_area p span{ margin-bottom:2rem;}
}

@media all and (max-width:575.98px) {
    #intro_sec01 h4 br{ display:none; }
}



/*연혁*/
#hostiry_sec01 h4{ margin-bottom:3rem; font-size:3.2rem; font-weight:300; line-height:1.4;}
#hostiry_sec01 h4 b{ font-weight:700;}
#hostiry_sec01 .bnr_area{ height:30rem; background:url('../_img/sub/history_bak.jpg') center / cover; }
#hostiry_sec01 .history_list > li{ display:flex; flex-wrap:wrap; margin-top:6rem; }
#hostiry_sec01 .history_list > li .tit_area{ width:50%; text-align:right;}
#hostiry_sec01 .history_list > li .tit_area strong{ display:inline-block; padding:1rem 4rem 0 0; font-size:3.5rem; font-weight:700;  border-top:1px solid #014cac; }
#hostiry_sec01 .history_list ol{ width:50%; padding-left:2rem;}
#hostiry_sec01 .history_list ol li{ position:relative; padding:2rem 0 2rem 6rem; font-size:1.5rem; color:#555; border-bottom:1px solid #ddd;}
#hostiry_sec01 .history_list ol li:first-child{ border-top:1px solid #ddd; }
#hostiry_sec01 .history_list ol li b.year{ position:absolute; top:2rem; left:0;}
#hostiry_sec01 .history_list ol li b.year:before{ content:"· ";}
#hostiry_sec01 .history_list ol li p{ display:inline-block; font-weight:300; }

@media all and (max-width:1199.98px) {
    #hostiry_sec01 h4{ font-size:2.5rem; }
    #hostiry_sec01 .bnr_area{ height:20rem;}
    #hostiry_sec01 .history_list > li .tit_area strong{ font-size:3rem;}
}

@media all and (max-width:991.98px) {
    #hostiry_sec01 .history_list > li{ margin-top:4rem; }
    #hostiry_sec01 .history_list > li .tit_area strong{ font-size:2.5rem;}
}

@media all and (max-width:767.98px) {
    #hostiry_sec01 h4{ margin-bottom:2rem; font-size:2rem; }
    #hostiry_sec01 .history_list > li .tit_area{ width:100%; text-align:left;  }
    #hostiry_sec01 .history_list > li .tit_area strong{ border-top:0; padding:0; margin-bottom:1rem;}
    #hostiry_sec01 .history_list ol{ width:100%; padding-left:0;}
}

@media all and (max-width:575.98px) {
    #hostiry_sec01 h4 br{ display:none; }
}


/*사업장 소개*/
#location_sec01 .location_area{ display:none; margin-top:4rem; padding-top:7rem;  border-top:2px solid #000;}
#location_sec01 .location_area.on{ display:block;}
#location_sec01 .location_area .item_area{ display:flex; flex-wrap:wrap; padding-bottom:7rem; margin-bottom:7rem; border-bottom:1px solid #ddd;}
#location_sec01 .location_area .item_area:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0;}
#location_sec01 .location_area .item_area:nth-child(even){ flex-direction:row-reverse;}
#location_sec01 .location_area .img_area{ width:42rem;}
#location_sec01 .location_area .item_area:nth-child(odd) .img_area{ padding-right:3rem;}
#location_sec01 .location_area .item_area:nth-child(even) .img_area{ padding-left:3rem;}
#location_sec01 .location_area .txt_area{ width:calc(100% - 42rem);}
#location_sec01 .location_area .txt_area h4{ font-size:3rem; margin-bottom:3rem; font-weight:300;}
#location_sec01 .location_area .txt_area h4 b{ font-weight:700;}
#location_sec01 .location_area .txt_area p{ position:relative; padding-left:9rem; font-size:1.6rem; color:#606060;}
#location_sec01 .location_area .txt_area p b{ position:absolute; top:0; left:0; color:#000;}
#location_sec01 .location_area .txt_area p b:before{ content:"· ";}
#location_sec01 .location_area .root_daum_roughmap,
#location_sec01 .location_area iframe{ margin-top:2rem; width:100%; height:31.8rem;}
#location_sec01 .location_area .root_daum_roughmap .wrap_map{ height:100%;}
#location_sec01 .location_area .root_daum_roughmap .map_border{ display:none; }

@media all and (max-width:1199.98px) {
    #location_sec01 .location_area{ padding-top:4rem; margin-top:3rem; }
    #location_sec01 .location_area .item_area{ margin-bottom:4rem; padding-bottom:4rem;}
    #location_sec01 .location_area .img_area{ display:none; }
    #location_sec01 .location_area .txt_area{ width:100%; }

    #location_sec01 .location_area .txt_area h4{ margin-bottom:2rem; font-size:2.5rem;}
    #location_sec01 .location_area .txt_area p{ padding-left:7rem;}
}

@media all and (max-width:767.98px) {
    #location_sec01 .location_area .txt_area h4{  font-size:2rem;}
    #location_sec01 .location_area .root_daum_roughmap,
    #location_sec01 .location_area iframe{ height:25rem; margin-top:1rem;}
}


/*제품소개 페이지 공통*/
.prd_sec_bg{ padding:7rem 0; background:#f5f5f5; }
.prd_sec:last-child.prd_sec_bg,
.prd_sec:last-child .prd_sec_bg{ padding-bottom:12rem;}

.prd_sec .prd_bnr{ margin-bottom:3rem; height:46rem; background-size:cover; background-position:center; background-repeat:no-repeat;}
.prd_sec .prd_bnr01{ background-image:url('../_img/sub/product_bnr01.jpg');}/*융복합*/
.prd_sec .prd_bnr02{ background-image:url('../_img/sub/product_bnr02.jpg');}/*Hinge*/
.prd_sec .prd_bnr03{ background-image:url('../_img/sub/product_bnr03.jpg');}/*Mobile 부품*/
.prd_sec .prd_bnr04{ background-image:url('../_img/sub/product_bnr04.jpg');}/*Mobile 부품*/
.prd_sec .prd_bnr05{ background-image:url('../_img/sub/product_bnr05.jpg');}/*Mobile 부품*/

.prd_sec .prd_layout01{ display:flex; flex-wrap:wrap; margin-bottom:3rem;}
.prd_sec .prd_layout01 > div{ width:50%;}
.prd_sec .prd_layout01 .tit_area{ padding-right:1rem;}
.prd_sec .prd_layout01 .tit_area .tit{ font-size:3rem; font-weight:700;}
.prd_sec .prd_layout01 .content_area p{ margin-top:0; }

.prd_sec .prd_layout02 .img_area{  overflow-x:auto; margin-bottom:2rem;}
.prd_sec .prd_layout02 .img_area_bg{ padding:3rem; background:#fff; }
.prd_sec .prd_layout02 .img_area > div{ display:flex; justify-content: center; min-width:600px;   }
.prd_sec .prd_layout02 .img_area > div > div{  margin-right:1.5rem; }
.prd_sec .prd_layout02 .img_area > div > div img{ width:100%;}
.prd_sec .prd_layout02 .img_area > div > div:last-child{ margin-right:0;}
.prd_sec .prd_layout02 > strong{ display:block; margin-bottom:5rem;  font-size:1.8rem; font-weight:700; text-align:center;  }
.prd_sec .prd_layout02 > strong:last-child{ margin-bottom:0;}

.prd_layout03{ display:flex; flex-wrap:wrap; justify-content: center;}
.prd_layout03_grid3 div{ width:calc((100% - 4rem) / 3); margin-right:2rem; margin-top:2rem;}
.prd_layout03_grid3 div:nth-child(3n+3){ margin-right:0;}
.prd_layout03_grid3 div:nth-child(-n+3){ margin-top:0;}
.prd_layout03_grid4 div{ width:calc((100% - 6rem) / 4); margin-right:2rem; margin-top:2rem;}
.prd_layout03_grid4 div:nth-child(4n+4){ margin-right:0;}
.prd_layout03_grid4 div:nth-child(-n+4){ margin-top:0;}

.prd_sec p{ margin-top:3rem; font-size:1.8rem; color:#404040; }

@media all and (max-width:1430px) {
    .prd_sec p br{ display:none;}
}
@media all and (max-width:1199.98px) {
    .prd_sec_bg{ padding:5rem 0;}
    .prd_sec:last-child.prd_sec_bg,
    .prd_sec:last-child .prd_sec_bg{ padding-bottom:10rem;}

    .prd_sec .prd_bnr{ margin-bottom:2rem; height:35rem; }

    .prd_sec .prd_layout01{ margin-bottom:2rem; }
    .prd_sec .prd_layout01 > div{ width:100%; }
    .prd_sec .prd_layout01 .tit_area{ padding:0; margin-bottom:1rem;}
    .prd_sec .prd_layout01 .tit_area .tit{ font-size:2.5rem;}

    .prd_sec .prd_layout02 > strong{ margin-bottom:3rem; font-size:1.6rem; }

    .prd_layout03_grid3 div{ width:calc((100% - 3rem) / 3); margin-right:1.5rem; margin-top:1.5rem;}
    .prd_layout03_grid4 div{ width:calc((100% - 4.5rem) / 4); margin-right:1.5rem; margin-top:1.5rem;}


    .prd_sec p{ margin-top:2rem; font-size:1.6rem;}
}

@media all and (max-width:991.98px) {
    .prd_sec:last-child.prd_sec_bg,
    .prd_sec:last-child .prd_sec_bg{ padding-bottom:8rem;}

    .prd_sec .prd_bnr{  height:28rem; }

    .prd_sec .prd_layout01 .tit_area .tit{ font-size:2rem;}

    .prd_layout03_grid4 div{ width:calc((100% - 3rem) / 3); }
    .prd_layout03_grid4 div:nth-child(4n+4){ margin-right:1.5rem;}
    .prd_layout03_grid4 div:nth-child(-n+4){ margin-top:1.5rem;}
    .prd_layout03_grid4 div:nth-child(3n+3){ margin-right:0;}
    .prd_layout03_grid4 div:nth-child(-n+3){ margin-top:0;}
    .prd_layout03_grid4 div:last-child{ margin-right:0;}
}

@media all and (max-width:767.98px) {
    .prd_sec:last-child.prd_sec_bg,
    .prd_sec:last-child .prd_sec_bg{ padding-bottom:6rem;}

    .prd_sec .prd_bnr{  height:20rem; }

    .prd_sec .prd_layout02 .img_area > div{ justify-content:left; }


}

@media all and (max-width:575.98px) {
    .prd_layout03_grid3 div,
    .prd_layout03_grid4 div{ width:calc((100% - 1.5rem) / 2); }
    .prd_layout03_grid3 div:nth-child(3n+3),
    .prd_layout03_grid4 div:nth-child(3n+3){ margin-right:1.5rem;}
    .prd_layout03_grid3 div:nth-child(-n+3),
    .prd_layout03_grid4 div:nth-child(-n+3){ margin-top:1.5rem;}
    .prd_layout03_grid3 div:nth-child(2n+2),
    .prd_layout03_grid4 div:nth-child(2n+2){ margin-right:0;}
    .prd_layout03_grid3 div:nth-child(-n+2),
    .prd_layout03_grid4 div:nth-child(-n+2){ margin-top:0;}
}


/*비전*/
#vision_sec01{ text-align:center;}
#vision_sec01 h4{ margin-bottom:6rem; font-size:2.4rem; font-weight:300; line-height:2;}
#vision_sec01 h4 b{ font-weight:700;}
#vision_sec01 .vistion_list{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1100px; margin:5rem auto 0; padding-bottom:12rem;}
#vision_sec01 .vistion_list:after{ content:""; z-index:-1; position:absolute; bottom:0; left:50%; width:100vw; min-width:280px;  height:60%; background:#f7f7f7;
    transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%);
}
#vision_sec01 .vistion_list > li{ width:30rem;}
#vision_sec01 .vistion_list .ico_area{ position:relative; padding-top:100%;  margin:0 auto 4rem; border:2px dashed #ddd; border-radius:100%;  background:#fff;   }
#vision_sec01 .vistion_list .ico_area:after{ content:''; position:absolute; top:50%; left:100%; width:100%; border-top:1px dashed #014cac; 
    transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%);
}
#vision_sec01 .vistion_list > li:last-child .ico_area:after{ content:none;}
#vision_sec01 .vistion_list .ico_area > div{ position:absolute; top:3.5rem; bottom:3.5rem; left:3.5rem; right:3.5rem; display:flex; align-items:center;  border-radius:100%; border:.8rem solid #014cac; background:#fff;  }
#vision_sec01 .vistion_list .ico_area > div:after,
#vision_sec01 .vistion_list .ico_area > div:before{ content:""; position:absolute; top:50%; width:1rem; height:1rem; border-radius:100%; background:#014cac; 
    transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%);
}
#vision_sec01 .vistion_list .ico_area > div:after{ left:100%; margin-left:3.9rem;}
#vision_sec01 .vistion_list .ico_area > div:before{ right:100%; margin-right:3.9rem;}
#vision_sec01 .vistion_list > li:first-child .ico_area > div:before,
#vision_sec01 .vistion_list > li:last-child .ico_area > div:after{ content:none; }
#vision_sec01 .vistion_list .ico_area > div span{ width:100%;}
#vision_sec01 .vistion_list .ico_area > div strong{ display:block;  margin-top:1rem; font-size:2rem; line-height:1.3;  }
#vision_sec01 .vistion_list .ico_area > div img{ width:30%; max-width:7.3rem; min-width:3rem; }
#vision_sec01 .vistion_list .txt_area{ padding:0 1rem; text-align:left;}
#vision_sec01 .vistion_list .txt_area strong{ display:block; font-size:2.2rem; margin-bottom:1.5rem;}

@media all and (max-width:1199.98px) {
    #vision_sec01 h4{ margin-bottom:4rem; font-size:2rem; }

    #vision_sec01 .vistion_list > li{ width:25rem;}
    #vision_sec01 .vistion_list .ico_area{ margin:0 auto 1.5rem;}
    #vision_sec01 .vistion_list .ico_area > div{ top:1.5rem; bottom:1.5rem; left:1.5rem; right:1.5rem;}
    #vision_sec01 .vistion_list .ico_area > div:after{ margin-left:1.9rem;}
    #vision_sec01 .vistion_list .ico_area > div:before{ margin-right:1.9rem;}
    #vision_sec01 .vistion_list .ico_area > div strong{ font-size:1.8rem;}
    #vision_sec01 .vistion_list .txt_area{ padding:0;}
    #vision_sec01 .vistion_list .txt_area strong{ font-size:2rem; margin-bottom:1rem;}
}

@media all and (max-width:991.98px) {
    #vision_sec01 h4{ font-size:1.8rem;}

    #vision_sec01 .vistion_list .ico_area:after,
    #vision_sec01 .vistion_list .ico_area > div:after,
    #vision_sec01 .vistion_list .ico_area > div:before{ content:none;}

    #vision_sec01 .vistion_list > li{ width:33.33%; padding:0 1rem;}
    #vision_sec01 .vistion_list .txt_area strong{ font-size:1.8rem;}
}

@media all and (max-width:767.98px) {
    #vision_sec01 h4 br{ display:none; }
    #vision_sec01 .vistion_list:after{ height:80%;}
    #vision_sec01 .vistion_list{ justify-content: center; max-width:450px; }
    #vision_sec01 .vistion_list > li{ width:50%;}
    #vision_sec01 .vistion_list > li:last-child{ margin-top:3rem;}
}

@media all and (max-width:575.98px) {
    #vision_sec01 .vistion_list:after{ height:90%;}
    #vision_sec01 .vistion_list{  max-width:200px; }
    #vision_sec01 .vistion_list > li{ width:100%; margin-top:3rem;}
    #vision_sec01 .vistion_list > li:first-child{ margin-top:0;}
}


/*지역사회나눔*/
#share_sec01 h4{ margin-bottom:6rem; font-size:2.4rem; font-weight:300; line-height:2; text-align:center; }
#share_sec01 h4 b{ font-weight:700;}
#share_sec01 .share_list > li{ display:flex; flex-wrap:wrap; margin-bottom:3.5rem;}
#share_sec01 .share_list > li:last-child{ margin-bottom:0;}
#share_sec01 .share_list > li:nth-child(even){ flex-direction: row-reverse; text-align:right;}
#share_sec01 .share_list li > div{ width:50%;}
#share_sec01 .share_list .img_area{ height:44rem; background-position:center; background-size:cover;}
#share_sec01 .share_list .img_area01{ background-image:url('../_img/sub/share_img01.jpg');}
#share_sec01 .share_list .img_area02{ background-image:url('../_img/sub/share_img02.jpg');}
#share_sec01 .share_list .txt_area{ display:flex; align-items: center; padding:0 6rem;}
#share_sec01 .share_list .txt_area > div{ width:100%;}
#share_sec01 .share_list .txt_area strong{ display:block; font-size:3rem; margin-bottom:1rem;  }
#share_sec01 .share_list .txt_area p{ margin-bottom:2rem; font-size:1.8rem; line-height:2;}
#share_sec01 .share_list .tag_area{ display:block; margin-top:4rem; }
#share_sec01 .share_list .tag_area img{ margin-right:1rem;}

@media all and (max-width:1199.98px) {
    #share_sec01 h4{ margin-bottom:3rem; font-size:1.8rem;}
    #share_sec01 .share_list .txt_area{ padding:0 3rem;}
    #share_sec01 .share_list .txt_area strong{ font-size:2.5rem; }
    #share_sec01 .share_list .txt_area p{ font-size:1.6rem;}
}

@media all and (max-width:991.98px) {
    #share_sec01 .share_list li > div{ width:100%; }
    #share_sec01 .share_list > li:nth-child(even){ text-align:left;}
    #share_sec01 .share_list .img_area{ height:0; padding-top:60%; }

    #share_sec01 .share_list .txt_area{ padding:0; margin-top:2rem;}
}

@media all and (max-width:767.98px) {
    #share_sec01 h4 br{ display:none; }
}

@media all and (max-width:575.98px) {
    #share_sec01 .share_list .tag_area img{ display:block; width:3rem;}
}


/*공시정보*/
#disclosure_sec01 iframe{ display:block; margin:0 auto; }