/* 서브 타이틀 배경 */
.subvs{background-image: url('/img/sub03_bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 300px;}
.subvs .title{height: 100%; display: flex; justify-content: center; align-items: center;}
.subvs .title dl {color: #fff; text-align: center; margin-top: 2.5%;}
.subvs .title dl dt{font-size: 60px; font-family: 'HDharmony B';}
.subvs .title dl dd{font-size: 35px; margin-top: 15px;}

.subwrap{padding: 85px 0 110px; max-width: 1280px; width: 90%; margin: 0 auto;}

@media screen and (max-width: 900px){
    .subwrap{padding: 15% 0;}
    .subvs{height: 200px;}
    .subvs .title dl {
        margin-top: 5%;
    }
    .subvs .title dl dt{font-size: 32px;}
    .subvs .title dl dd{font-size: 20px; margin-top: 15px;}
}

/* 고객사별제품 */
.pdwrap .topflex{display: flex; margin-bottom: 20px;}
.pdwrap .topflex .tit {display: flex; flex-direction: column; width: 240px; justify-content: space-between;}
.pdwrap .topflex .tit .titin{display: flex; align-items: end;}
.pdwrap .topflex .tit dl dt{font-size: 18px; color: #0f9fff; margin-bottom: 8px;}
.pdwrap .topflex .tit dl dd{font-size: 42px; color: #252c34;font-family: 'HDharmony B';}
.pdwrap .topflex .tit span{border: 1px solid #ddd; border-radius: 10px; padding: 7px 10px; color: #aaa; margin-left: 15px; transform: translateY(-10px); font-size: 14px; cursor: pointer;}
.pdwrap .topflex .tit span img{margin-right: 3px; vertical-align: middle;}
.pdwrap .topflex .searchbox{margin-left: 50px; flex: 1;}
.pdwrap .topflex .searchbox form{display: flex;}
.pdwrap .topflex .searchbox input{width: 100%; background-color: #f9f9f9; border: 1px solid #ddd; height: 65px; padding-left: 30px; box-sizing: border-box; color: #333; font-size: 18px;  font-family: 'Pretendard';}
.pdwrap .topflex .searchbox input::placeholder{ color: #cfcfcf; }
.pdwrap .topflex .searchbox form button{width: 150px; cursor: pointer; outline: none; border: none; background-color: #0f9fff; color: #fff; font-size: 18px;}
.pdwrap .topflex .searchbox form button i{margin-right: 7px;}
.pdwrap .topflex .tit .tagwrap{display: flex; flex-wrap: wrap; margin-top: 10px;}
.pdwrap .topflex .tit .tagwrap a{font-size: 16px; color: #0f9fff; border:  1px solid #0f9fff; border-radius: 30px; display: block; padding: 5px 10px; margin-bottom: 5px; margin-right: 7px; font-weight: 600;}
.pdwrap .topflex .tit .tagwrap a:last-of-type{margin-right: 0;}
.pdwrap .botflex{display: flex; align-items: flex-start;}
.pdwrap .botflex .selec_list{width: 240px;}
.pdwrap .botflex .selec_list .boxitem {border-top: 1px solid #999;}
.pdwrap .botflex .selec_list .boxitem.product{border-top: 1px solid #dbdbdb; margin-top: 20px;}
.pdwrap .botflex .selec_list .boxitem strong{font-size: 18px; display: flex; justify-content: space-between; cursor: pointer; padding: 23px 0; align-items: center;}
.pdwrap .botflex .selec_list .boxitem strong i{background-image: url('/img/plus.png'); background-position: center; background-repeat: no-repeat; width: 16px; height: 16px;}
/* .pdwrap .botflex .selec_list .boxitem ul {display: none;} */
.pdwrap .botflex .selec_list .boxitem > ul > li{margin-bottom: 15px; cursor: pointer;}
.pdwrap .botflex .selec_list .boxitem ul > li:last-of-type{margin-bottom: 0;}
.pdwrap .botflex .selec_list .boxitem ul > li span{font-size: 16px; display: block;}
.pdwrap .botflex .selec_list .boxitem ul > li span i{margin-right: 10px; width: 20px; height: 20px; border-radius: 50%; line-height: 20px; text-align: center; border: 1px solid #ddd; color: #ddd; display: inline-block; margin-bottom: 10px; transition: 0.3s;}
.pdwrap .botflex .selec_list .boxitem ul > li span.on i{background-color: #0f9fff;}
.pdwrap .botflex .selec_list .boxitem ul > li .dep_{background-color: #f9f9f9; border-radius: 10px; box-sizing: border-box; padding: 15px; display: none;}
.pdwrap .botflex .selec_list .boxitem ul > li .dep_ li {margin-bottom: 15px;}
.pdwrap .botflex .selec_list .boxitem ul > li .dep_ li:last-of-type{margin-bottom: 0;}
.pdwrap .botflex .selec_list .boxitem ul > li .dep_ li a{font-size: 14px; color: #888; margin-bottom: 15px; font-weight: 500;}
.pdwrap .botflex .selec_list .boxitem ul > li .dep_ li:last-of-type{margin-bottom: 0;}
.pdwrap .botflex .selec_list .boxitem ul > li .dep_ li.on a{border-bottom: 1px solid #000; color: #000;}
.pdwrap .botflex .selec_list .boxitem ul > li.on .dep_{display: block;}
/* .pdwrap .botflex .selec_list .boxitem.active > ul{display: block;}*/
.pdwrap .botflex .selec_list .boxitem.active > strong i{background-image: url('/img/minus.png'); width: 16px; height: 2px;}
 
.pdwrap .botflex .carwrap {margin-left: 50px; flex: 1; }
.pdwrap .botflex .carwrap > dl{margin-bottom: 20px; display: flex; align-items: center; font-size: 30px; font-weight: 600; }
.pdwrap .botflex .carwrap > dl dt::after{content: ""; display: inline-block; width: 1px; height: 22px; margin: 0 8px; background-color: #ccc;}
.pdwrap .botflex .carwrap > dl dd{color: #0f9fff;}
.pdwrap .botflex .car_list{ display: flex; flex-wrap: wrap; }
.pdwrap .botflex .car_list li{width: calc(99.9%/3 - 100px/3); margin-right: 50px;}
.pdwrap .botflex .car_list li:nth-of-type(3n){margin-right: 0;}
.pdwrap .botflex .car_list li:nth-of-type(-n+6){margin-bottom: 40px;}
.pdwrap .botflex .car_list li a .imgbox{background-repeat: no-repeat; background-position: center; background-size: 100% auto; border: 3px solid #eee; transition: 0.3s;} 
.pdwrap .botflex .car_list li a .imgbox::after{content: ""; display: block; padding-bottom: calc(200/300 * 100%);}
.pdwrap .botflex .car_list li:hover .imgbox{border:  3px solid #0f9fff; background-size: 110% auto;}
.pdwrap .botflex .car_list li a .cate{display: flex; align-items: center; margin: 13px 0;}
.pdwrap .botflex .car_list li a .cate dl{display: flex; font-size: 16px; color: #888; margin-left: 10px;}
.pdwrap .botflex .car_list li a .cate dl dt::after{content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 8px; background-color: #ccc;} 
.pdwrap .botflex .car_list li a .cate span{font-size: 14px; background-color: #0f9fff; border-radius: 10px; color: #fff; padding: 5px 10px; padding: 8px 11px;}
.pdwrap .botflex .car_list li a > p{font-size: 20px; font-weight: 800; margin-top: 20px;}


@media screen and (max-width: 900px){
    .pdwrap .topflex{display: block; margin-bottom: 35px;}
    .pdwrap .topflex .tit{margin-bottom: 10px; width: 100%;}
    .pdwrap .topflex .tit dl dt{font-size: 15px;}
    .pdwrap .topflex .tit dl dd{font-size: 32px;}
    .pdwrap .topflex .tit span{font-size: 13px;}
    .pdwrap .topflex .searchbox{margin-left: 0;}
    .pdwrap .topflex .searchbox input{font-size: 15px; padding-left: 13px; height: 35px;}
    .pdwrap .topflex .searchbox form button{font-size: 15px;}
    .pdwrap .botflex{display: block;}
    .pdwrap .botflex .selec_list{width: auto;  margin-bottom: 50px;}
    .pdwrap .botflex .carwrap{margin-left: 0; margin-top: 0;}
    .pdwrap .botflex .car_list{ margin-top: 0;}
    .pdwrap .botflex .car_list li{width: calc(99.9%/2 - 20px/2); margin-right: 20px;}
    .pdwrap .botflex .car_list li:nth-of-type(3n){margin-right: 20px;}
    .pdwrap .botflex .car_list li:nth-of-type(2n){margin-right: 0;}
    .pdwrap .botflex .car_list li:nth-of-type(-n+8){margin-bottom: 25px;}
}

@media screen and (max-width: 500px){
    .pdwrap .botflex .car_list li{width: 100%; margin-right: 0;}
    .pdwrap .botflex .car_list li:nth-of-type(3n){margin-right: 0;}
    .pdwrap .botflex .car_list li a .cate span{font-size: 13px;}
    .pdwrap .botflex .car_list li a .cate dl{font-size: 14px;}
    .pdwrap .botflex .car_list li a > p{font-size: 16px;}
}


/* 채용안내 */
.subvs.rct_{background-image: url('/img/sub05_bg.jpg');}
.rct .tit{text-align: center;}
.rct .tit p{font-size: 40px; font-weight: 300; margin: 22px 0 60px;}
.rct .tit p span{font-weight: 600;}
.rct ul{border-top: 2px solid #000;}
.rct ul li{border-bottom: 1px solid #eee; }
.rct ul li a{display: flex; align-items: center; justify-content: space-between; padding: 50px 40px;}
.rct ul li .lef{display: flex; align-items: center;}
.rct ul li .lef span{font-size: 18px; color: #0f9fff; font-weight: 600; }
.rct ul li .lef p{font-size: 24px; font-weight: 600; margin-left: 30px; transition: 0.3s; text-overflow: ellipsis;-webkit-line-clamp: 1;overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box; flex: 1;}
.rct ul li a > span{font-size: 16px; color: #aaa; font-weight: 500; transition: 0.3s;}
.rct ul li a > span::after{content: ""; display: inline-block; width: 26px; height: 16px; background-image: url('/img/rct_arrow.png'); background-repeat: no-repeat; background-position: center; margin-left: 25px; transition: 0.3s;}
.rct ul li a:hover .lef p{color: #0f9fff;}
.rct ul li a:hover > span{color: #000;}
.rct ul li a:hover > span::after{background-image: url('/img/rct_arrow_hover.png');}

/* 페이징 */
.page{text-align: center; margin-top: 50px;}
.page a{font-size: 20px; margin-right: 25px;}
.page a:last-of-type{margin-right: 0;}
.page a i{vertical-align: middle;}
.page a.on{width: 40px; height: 40px; background-color: #252c34; color: #fff; display: inline-block; text-align: center; line-height: 40px; border-radius: 50%;}

@media screen and (max-width: 900px){
    .rct .tit p{font-size: 22px; word-break: keep-all; line-height: 1.3;}
    .rct ul li a{display: block; padding: 20px 5px;}
    .rct ul li .lef{display: block;}
    .rct ul li .lef span{font-size: 15px;}
    .rct ul li .lef p{margin-left: 0; margin: 10px 0 20px; font-size: 16px;}
    .rct ul li a > span{font-size: 14px;}
    .rct ul li a > span::after{background-size: 75%; vertical-align: bottom; margin-left: 8px;}

    .page a{font-size: 13px; margin-right: 13px;}
    .page a.on{width: 25px; height: 25px; line-height: 25px;}
}


/* 회사소식 */
.subvs.news_{background-image: url('/img/sub06_bg.jpg');}
.news ul{display: flex; flex-wrap: wrap;}
.news ul li{width: calc(99.9%/3 - 40px/3); margin-right: 20px;}
.news ul li:nth-of-type(3n){margin-right: 0;}
.news ul li:nth-of-type(-n+3){margin-bottom: 80px;}
.news ul li .imgbox{background-position: center; background-repeat: no-repeat; background-size: cover; margin-bottom: 40px;}
.news ul li .imgbox::after{content: ""; display: block; padding-bottom: calc(280/412 * 100%);}
.news ul li a{display: block;}
.news ul li a span.date{font-size: 16px; color: #aaa; transition: 0.3s; font-weight: 600;}
.news ul li a p{font-size: 18px; margin: 15px 0 35px; line-height: 28px; font-weight: 600; display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-break: keep-all;}
.news ul li a span.morebtn{font-size: 16px; color: #666; transition: 0.3s; font-weight: 600;}
.news ul li a span.morebtn::after{content: ""; display: inline-block; width: 26px; height: 16px; background: url('/img/news_arrow.png') no-repeat; background-position: center; background-size: cover; vertical-align: bottom; margin-left: 15px; transition: 0.3s;} 
.news ul li a:hover span.date{color: #000;}
.news ul li a:hover span.morebtn{color: #0f9fff;}
.news ul li a:hover span.morebtn::after{background-image: url('/img/rct_arrow_hover.png');}

@media screen and (max-width: 900px){
    .news ul li{width: calc(99.9%/2 - 20px/2);}
    .news ul li:nth-of-type(3n){margin-right: 20px;}
    .news ul li:nth-of-type(2n){margin-right: 0;}
    .news ul li:nth-of-type(-n+4){margin-bottom: 80px;}
}

@media screen and (max-width: 500px){
    .news ul li{width: 100%; margin-right: 0; margin-bottom: 40px;}
    .news ul li:last-of-type{margin-bottom: 0;}
    .news ul li:nth-of-type(3n){margin-right: 0;}
    .news ul li:nth-of-type(-n+4){margin-bottom: 40px;}
    .news ul li .imgbox{margin-bottom: 25px;}
    .news ul li a span.date{font-size: 14px;}
    .news ul li a p{margin: 15px 0 20px; line-height: 22px; font-size: 15px;}
    .news ul li a span.morebtn{font-size: 13px;}
    .news ul li a span.morebtn::after{margin-left: 4px; background-size: 60%;}
}


/* 자주묻는질문 */
.quest ul {border-top: 2px solid #000;}
.quest ul li strong{cursor: pointer; display: flex; align-items: center;   padding: 35px 30px; border-bottom: 1px solid #eee; border-top: 1px solid #eee; position: relative; line-height: calc(40/24);}
.quest ul li strong span{font-size: 24px; font-weight: 800; display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.quest ul li strong::after{content: ""; display: inline-block; width: 16px; height: 26px; background-image: url('/img/qt_arrow.png'); background-repeat: no-repeat; background-position: center; position: absolute; right: 30px; transition: 0.3s;}
.quest ul li:nth-of-type(1) strong{border-top: none;}
.quest ul li strong img{margin-right: 30px;}
.quest ul li p{font-size: 16px; color: #666; padding: 35px 30px; line-height: 28px; word-break: keep-all; display: none;}
.quest ul li.on p{display: block;}
.quest ul li strong.on::after{transform: rotate(180deg);}

@media screen and (max-width: 900px){
    .quest ul li strong{padding: 20px;}
    .quest ul li strong img{width: 8%; margin-right: 13px;}
    .quest ul li strong span{font-size: 16px;}
    .quest ul li p{padding: 20px; font-size: 13px;}
    .quest ul li strong::after{background-size: 85%;}
}

@media screen and (max-width: 500px){
    .quest ul li strong {padding: 20px 0;}
    .quest ul li strong span{width: 220px;}
    .quest ul li strong::after{right: 0;}
}

/* 고객사 */
.subvs.bs_{background-image: url('/img/sub02_bg.jpg');}
.bs ul{display: flex; flex-wrap: wrap;}
.bs ul li{width: calc(99.9%/2 - 50px/2); margin-right: 50px; border: 2px solid #eee; box-sizing: border-box; transition: 0.3s;}
.bs ul li:nth-of-type(-n+6){margin-bottom: 20px;}
.bs ul li:nth-of-type(2n){margin-right: 0;}
.bs ul li a{display: flex; justify-content: space-between; align-items: center; padding: 20px;}
.bs ul li a .lef{display: flex; align-items: center;}
.bs ul li a .lef .logo{margin-right: 30px;}
.bs ul li:nth-child(8) a .lef .logo img {height: 63px;}
.bs ul li a .lef dl dt{font-size: 18px; font-weight: 600; margin-bottom: 7px;}
.bs ul li a .lef dl dd{font-size: 16px; color: #888;}
.bs ul li a i{color: #999; font-size: 18px; transition: 0.3s;}
.bs ul li:hover {border: 2px solid #0f9fff; }
.bs ul li:hover a i{color: #0f9fff;}

@media screen and (max-width: 900px){
    .bs ul li{width: 100%; margin-right: 0; margin-bottom: 20px;}
    .bs ul li:last-of-type{margin-bottom: 0;}
}

@media screen and (max-width: 500px){
    .bs ul li a{padding-left: 0; padding-right: 15px;}
    .bs ul li a .lef .logo{text-align: center; margin-right: 0;}
    .bs ul li a .lef .logo img{width: 80%;}
    .bs ul li a .lef dl dt{font-size: 15px;}
    .bs ul li a .lef dl dd{font-size: 13px;}
    .bs ul li a i{margin-left: 10px;}
}

/* 찾아오시는 길 */
.loca .subwrap .tit {text-align: center; }
.loca .subwrap .tit dt{font-size: 18px; margin-bottom: 12px;}
.loca .subwrap .tit dd{font-size: 42px; color: #0f9fff; font-family: 'HDharmony B';}
.loca .mapwrap{position: relative; margin: 20px 0 70px;}
.loca .mapwrap > div{width: 100%; position: absolute;width: 100%;height: 100%;top: 0; left: 0;}
.loca .mapwrap::after{content: ""; display: block; padding-bottom: calc(500/1280 * 100%);}
.loca .mapwrap .root_daum_roughmap .wrap_map{height: 100%;}
.loca .mapinfor{display: flex; justify-content: space-between; align-items: center;}
.loca .mapinfor .inforlist ul.top{margin-bottom: 30px;}
.loca .mapinfor .inforlist li{display: flex;}
.loca .mapinfor .inforlist li span{font-size: 20px; font-weight: 600;}
.loca .mapinfor .inforlist li span img{margin-right: 15px; vertical-align: middle;}
.loca .mapinfor .inforlist li p{font-size: 20px; color: #666; word-break: keep-all;}
.loca .mapinfor .inforlist ul.bot{display: flex;}
.loca .mapinfor .inforlist ul.top li span {margin-right: 60px;}
.loca .mapinfor .inforlist ul.bot li:first-of-type{margin-right: 50px;}
.loca .mapinfor .inforlist ul.bot li span {margin-right: 20px;}
.loca .mapinfor .maplist ul{display: flex; }
.loca .mapinfor .maplist ul li{border-right: 1px solid #ccc; padding: 10px 30px; box-sizing: border-box;}
.loca .mapinfor .maplist ul li:last-of-type{border-right: none;}
.loca .mapinfor .maplist ul li a {display: flex; flex-direction: column; align-items: center;}
.loca .mapinfor .maplist ul li a span{display: block; color: #444; font-size: 14px; margin-top: 15px;}

@media screen and (max-width: 1050px){
    .loca .mapinfor .inforlist li span{font-size: 17px; margin-right: 45px;}
    .loca .mapinfor .inforlist li p{font-size: 17px;}
    .loca .mapinfor .inforlist ul.bot li:first-of-type{margin-right: 12px;}
    .loca .mapinfor .inforlist ul.bot li span{margin-right: 13px;}
}

@media screen and (max-width: 900px){
    .loca .subwrap .tit dt{font-size: 14px;}
    .loca .subwrap .tit dd{font-size: 32px;}
    .loca .mapwrap{margin: 20px 0 40px;}
    .loca .mapinfor{display: block;}
    .loca .mapinfor .inforlist{margin-bottom: 30px;}
    .loca .mapinfor .inforlist li span{font-size: 15px; margin-right: 20px;}
    .loca .mapinfor .inforlist li p{font-size: 14px;}
    .loca .mapinfor .inforlist ul.top{margin-bottom: 16px;}
    .loca .mapinfor .inforlist ul.top li span{margin-right: 22px;}
    .loca .mapinfor .inforlist ul.bot{display: block;}
    .loca .mapinfor .inforlist ul.bot li:first-of-type{margin-bottom: 18px; margin-right: 0;}
    .loca .mapinfor .maplist ul li:first-of-type{padding-left: 0;}
}

@media screen and (max-width: 500px){
    .loca .mapinfor .maplist ul li{padding: 5px 20px;}
    .loca .mapinfor .inforlist ul.top li span{margin-right: 34px; white-space: nowrap;}
    .loca .mapinfor .inforlist li p{line-height: 1.3;}
}

/* 대표인사말 */
.message .textbox{background: url('/img/ceo_bg.jpg') no-repeat; background-position: center; background-size: cover; background-attachment: fixed; position: relative;}
.message .textbox::after{content: ""; display: block; width: 100%; height: 30%; bottom: 0; background: linear-gradient(0deg, white 30%, rgba(255, 255, 255, 0) 100%); position: absolute;}
.message .textbox .subwrap{padding-bottom: 0; padding-top: 230px;}
.message .flex{display: flex;}
.message .textbox .flex {align-items: flex-end; padding-bottom: 300px;}
/* .message .textbox .flex .left {margin-right: 90px;} */
.message .textbox .flex .left .tit dt{font-size: 42px; font-family: 'HDharmony B'; color: #0f9fff; margin-bottom: 15px;}
.message .textbox .flex .left .tit dd{font-size: 40px; font-weight: 800; line-height: 60px;}
.message .textbox .flex .left .tit dd span{font-size: 50px;}
.message .textbox .flex .left p{font-size: 24px; color: #444; margin: 30px 0; line-height: 36px;}
.message .textbox .flex .left  > span{font-size: 50px; font-weight: 800;}
.message .textbox .flex .left .sign {display: flex; margin-top: 80px;}
.message .textbox .flex .left .sign dt{font-size: 40px; font-family: 'HDharmony B'; margin-right: 20px; display: flex; align-items: center;}
.message .textbox .flex .left .sign dd{font-size: 80px; font-family: 'epilogue'; display: flex; align-items: center;}
.message .textbox .flex .rig{width: 38%; margin-bottom: 58px;}
.message .textbox .flex .rig img{width: 100%;}
.message .companyinfor .subwrap{text-align: center; padding-top: 0;}
.message .companyinfor .flex {border-top: 1px solid #e5e5e5; margin-top: 60px; padding-top: 100px;justify-content: space-between;}
.message .companyinfor .flex .left span{font-size: 40px; display: block; font-weight: 800;text-align: left;}
.message .companyinfor .flex .left a{background-color: #0f9fff; color: #fff; font-size: 18px; display: block; width: 235px; height: 63px; line-height: 63px; margin-top: 25px; box-sizing: border-box; border: 1px solid #0f9fff; transition: 0.3s;}
.message .companyinfor .flex .left a:hover{background-color: #fff; color: #0f9fff;}
.message .companyinfor .flex .left a i{margin-left: 35px;vertical-align: bottom;}
.message .companyinfor .flex .rig{display: flex; flex-wrap: wrap; margin-left: 35px; justify-content: flex-end;}
.message .companyinfor .flex .rig li{margin-right: 30px;}
.message .companyinfor .flex .rig li:last-of-type{margin-right: 0;}
.message .companyinfor .flex .rig li dl{margin-top: 30px;}
.message .companyinfor .flex .rig li dl dt{font-size: 18px; color: #999;}
.message .companyinfor .flex .rig li dl dd{font-size: 20px; font-weight: 600; margin-top: 10px;}

@media screen and (max-width: 900px){
    .message .textbox::after{height: 12%;}
    .message .textbox .subwrap{padding-top: 175px;}
    .message .textbox .flex{padding-bottom: 85px;}
    .message .textbox .flex .left .tit dt{font-size: 32px; margin-bottom: 10px;}
    .message .textbox .flex .left .tit dd{font-size: 20px; line-height: 37px;}
    .message .textbox .flex .left .tit dd span{font-size: 22px;}
    .message .textbox .flex .left p{font-size: 14px; margin: 20px 0; line-height: 1.3;}
    .message .textbox .flex .left .sign{margin-top: 20px;}
    .message .textbox .flex .left > span{font-size: 22px;}
    .message .textbox .flex .left .sign dt{font-size: 25px; margin-right: 10px;}
    .message .textbox .flex .left .sign dd{font-size: 60px;}

    .message .companyinfor .subwrap{padding-top: 7%;}
    .message .companyinfor .flex{margin-top: 45px; padding-top: 70px;}
    .message .companyinfor .flex .rig li{width: calc(99.9%/2 - 30px/2); margin-right: 30px;}
    .message .companyinfor .flex .rig li:nth-of-type(2n){margin-right: 0;}
    .message .companyinfor .flex .rig li:nth-of-type(-n+2){margin-bottom: 30px;}

    .message .companyinfor .flex .left span{font-size: 22px;}
    .message .companyinfor .flex .left a{font-size: 14px; width: 165px; height: 40px; line-height: 40px; margin-top: 15px;}
    .message .companyinfor .flex .left a i{margin-left: 5px;}
}

@media screen and (max-width: 600px){
    .message .textbox .flex{flex-direction: column-reverse; align-items: center; }
    .message .textbox .flex .left{margin-right: 0;}
    .message .textbox .flex .rig{margin-bottom: 50px; width: 80%;}

    .message .companyinfor .flex{display: block;}
    .message .companyinfor .flex .left{margin-bottom: 30px; display: flex; align-items: center;}
    .message .companyinfor .flex .left a{margin-left: 10px; margin-top: 0;}
    .message .companyinfor .flex .rig{margin-left: 0; justify-content: flex-start;}
    .message .companyinfor .subwrap .flexbox img{width: 25%;}
    .message .companyinfor .flex .rig li dl{margin-top: 25px;}
    .message .companyinfor .flex .rig li dl dt{font-size: 14px;}
    .message .companyinfor .flex .rig li dl dd{font-size: 15px;}

    .message .textbox .flex .left .sign{display: block;}
    .message .textbox .flex .left .sign dd{margin-top: 5px;}
    .message .textbox .flex .left .sign dd img{width: 45%;}
}

/* 연구소소개 */
.subvs.inst_{background-image: url('/img/sub04_bg.jpg');}
.inst{background: url('/img/inst_bg.png') no-repeat; background-position: 110% -100px;}

.inst .rd{margin-top: 70px;}
.inst .rd .title{position: relative;}
.inst .rd dl dt{font-size: 42px; color: #0f9fff; font-family: 'HDharmony B';}
.inst .rd dl dd{font-size: 50px; font-weight: 800; margin-top: 7px;}
.inst .rd .title p{width: 0; height: 3px; background-color: #0f9fff; position: absolute; left: 415px; bottom: 24px; animation: barani_ 1s ease-in-out 0.5s; animation-fill-mode: forwards;}
.inst .rd .p1{margin: 40px 0 30px; font-size: 24px; line-height: 36px;}
.inst .rd .p1 span{font-weight: 800;}
.inst .rd .p2{font-size: 18px; color: #666; line-height: 28px; margin-bottom: 35px;}

@keyframes barani_ {
    0%{
        width: 0;
    }
    100%{
        width: 53%;
    }
}

.inst .process{margin-top: 140px;}
.inst .process .flex{display: flex; align-items: center;     justify-content: space-between;}
.inst .process .flex .lef{flex: 1;}
.inst .process .flex .lef dl dt{font-size: 42px; color: #0f9fff; font-family: 'HDharmony B';}
.inst .process .flex .lef dl dd{font-size: 50px; font-weight: 800; margin-top: 7px; text-transform: uppercase;}
.inst .process .flex .lef p{font-size: 18px; color: #666; line-height: 28px; margin-top: 30px;}
.inst .process .flex .tabwrap {flex: 1;}
.inst .process .flex .tabwrap .rig{display: flex; text-align: center;}
.inst .process .flex .tabwrap .rig li{cursor: pointer;  position: relative; padding-right: 21%;}
.inst .process .flex .tabwrap .rig li:last-child{padding-right: 0;}
/* .inst .process .flex .tabwrap .rig li::after{content: ""; display: block; width: 10px; height: 10px; background-color: #ccc; border-radius: 50%;} */
.inst .process .flex .tabwrap .rig li:last-of-type{margin-right: 0;}
.inst .process .flex .tabwrap .rig li .iconimg{background: url('/img/inst_icon1.png') no-repeat; width: 60px; height: 50px; background-position: center; background-size: cover; transition: 0.3s; margin: 0 auto;} 
.inst .process .flex .tabwrap .rig li:nth-of-type(2) .iconimg{background-image: url('/img/inst_icon2.png');}
.inst .process .flex .tabwrap .rig li:nth-of-type(3) .iconimg{background-image: url('/img/inst_icon3.png');}
.inst .process .flex .tabwrap .rig li:nth-of-type(4) .iconimg{background-image: url('/img/inst_icon4.png');}
.inst .process .flex .tabwrap .rig li > span{color: #888; font-size: 16px; display: block; margin-top: 10px; transition: 0.3s;}
.inst .process .flex .tabwrap li .bar{width: 100%; height: 2px; background-color: #ccc; margin: 0 auto; position: absolute; bottom: -45px; left: 30px; }
.inst .process .flex .tabwrap li .bar span{width: 0; height: 100%; background-color: #0f9fff; position: absolute; top: 0; left: 0; transition: 2s;}
.inst .process .flex .tabwrap li .circle{width: 10px; height: 10px; background-color: #ccc; border-radius: 50%; position: absolute; bottom: -49px; left: 28px; z-index: 1; transition: 0.3s;}
.inst .process .flex .tabwrap .rig li:nth-of-type(1).on .iconimg{background-image: url('/img/inst_icon1_over.png');}
.inst .process .flex .tabwrap .rig li:nth-of-type(2).on .iconimg{background-image: url('/img/inst_icon2_over.png');}
.inst .process .flex .tabwrap .rig li:nth-of-type(3).on .iconimg{background-image: url('/img/inst_icon3_over.png');}
.inst .process .flex .tabwrap .rig li:nth-of-type(4).on .iconimg{background-image: url('/img/inst_icon4_over.png');}
.inst .process .flex .tabwrap .rig li.on span{color: #0f9fff;}
.inst .process .flex .tabwrap .rig li.on .circle{background-color: #0f9fff; }
.inst .process .flex .tabwrap .rig li.on .circle::after{content: ""; width: 450%; height: 450%; border-radius: 50%; border: 1px solid #0f9fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.inst .process .flex .tabwrap .rig li.active .bar span{width: 100%;}

.inst .process .tabcon{margin-top: 55px;}
.inst .process .tabcon > div {display: none; position: relative;}
.inst .process .tabcon > div.on{display: block;}
.inst .process .tabcon > div .bg{background: url('/img/inst_img1.png') no-repeat; background-position: center; background-size: cover;}
.inst .process .tabcon > div:nth-of-type(2) .bg{background-image: url('/img/inst_img2.png');}
.inst .process .tabcon > div:nth-of-type(3) .bg{background-image: url('/img/inst_img3.png');}
.inst .process .tabcon > div:nth-of-type(4) .bg{background-image: url('/img/inst_img4.png');}
.inst .process .tabcon > div .bg::after{content: ""; display: block; padding-bottom: calc(420/1280 * 100%);}
.inst .process .tabcon > div::after{content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0;}
.inst .process .tabcon > div .txt{position: absolute; right: 45px; bottom: 45px; color: #fff; z-index: 1;}
.inst .process .tabcon > div .txt dl {color: #fff; display: flex; align-items: center; justify-content: flex-end;transform: translateX(30px);}
.inst .process .tabcon > div .txt dl dt{font-size: 30px; font-weight: 600;}
.inst .process .tabcon > div .txt dl dd{font-family: 'HDharmony B'; font-size: 87px; color: rgba(255, 255, 255, 0.1); transform: translate(-30px, 10px);}
.inst .process .tabcon > div .txt p{font-size: 18px; color: rgba(255, 255, 255, 0.7); text-align: right; line-height: 28px;}

@media screen and (max-width: 900px){
    .inst{background-position: 129% -10%; background-size: 70%;}
    .inst .rd dl dt{font-size: 18px;}
    .inst .rd dl dd{font-size: 25px;}
    .inst .rd .p1{margin: 25px 0 12px; font-size: 16px; line-height: 27px; word-break: keep-all;}
    .inst .rd .p1 br{display: none;}
    .inst .rd .p2{font-size: 13px; line-height: 23px; word-break: keep-all;}
    .inst .rd .p2 br{display:none;}
    .inst .rd .title p{left: 210px; bottom: 12px;}

    @keyframes barani_ {
        0%{
            width: 0;
        }
        100%{
            width: 30%;
        }
    }

    .inst .process{margin-top: 80px;}
    .inst .process .flex{display: block;}
    .inst .process .flex .lef{margin-bottom: 40px;}
    .inst .process .flex .lef dl dt{font-size: 18px;}
    .inst .process .flex .lef dl dd{font-size: 25px;}
    .inst .process .flex .lef p{font-size: 14px; margin-top: 15px; word-break: keep-all;}
    .inst .process .flex .lef p br{display: none;}
    .inst .process .flex .tabwrap .rig li{flex: 1; margin-right: 0;}
    .inst .process .tabcon{margin-top: 85px;}
    .inst .process .flex .tabwrap .rig li .iconimg{background-size: 75%;}
    .inst .process .flex .tabwrap .rig li > span{font-size: 14px;}
    .inst .process .flex .tabwrap .bar{margin-top: 22px;}

    .inst .process .tabcon > div .txt{right: 15px; bottom: 13px;}
    .inst .process .tabcon > div .txt dl{transform: translateX(18px);}
    .inst .process .tabcon > div .txt dl dt{font-size: 20px;}
    .inst .process .tabcon > div .txt dl dd{font-size: 40px; transform: translate(-20px, 8px);}
    .inst .process .tabcon > div .txt p{font-size: 13px; line-height: 24px; word-break: keep-all;}
    .inst .process .tabcon > div .txt p br{display: none;}
}

@media screen and (max-width: 700px){
    .inst .process .flex .tabwrap .rig li{padding-right: 0;}
    .inst .process .flex .tabwrap .rig li > span{margin-top: 0;}
    .inst .process .flex .tabwrap li .bar{left: 46%;}
    .inst .process .flex .tabwrap li .circle{left: 46%;}
    .inst .process .flex .tabwrap .rig li.on .circle::after{width: 300%; height: 300%;}
}

@media screen and (max-width: 500px){
    .inst .process .tabcon > div .bg{height: 177px;}
}

@media screen and (max-width: 460px){
    .inst .process .tabcon > div .txt{right: 5px; bottom: 5px;}
    .inst .process .tabcon > div .txt dl dt{font-size: 14px;}
    .inst .process .tabcon > div .txt dl dd{font-size: 25px; transform: translate(-20px, 3px);}
    .inst .process .tabcon > div .txt p{line-height: 18px; word-break: keep-all;}
    .inst .process .tabcon > div .txt p br{display: none;}
}

/* 사업장 */
.subvs.com_{background-image: url('/img/sec01_bg.jpg');}
.com .tit {text-align: center; margin-bottom: 40px;}
.com .tit dt{font-size: 32px; color: #0f9fff;font-family: 'HDharmony B';}
.com .tit dd{font-size: 42px; line-height: 54px; font-weight: 800;}
.com .maptab{background: url('/img/mapbg.png') no-repeat; background-position: center; background-size: cover; position: relative; transform: scale(0.9);}
.com .maptab::after{content: ""; display: block; padding-bottom: calc(639/1338 * 100%);}
.com .maptab .tablist li{cursor: pointer; text-align: center; position: absolute;}
.com .maptab .tablist li .mapin{display: block;}
.com .maptab .tablist li::after, .com .maptab .tablist li::before, .com .maptab .tablist li .mapin::after, .com .maptab .tablist li .mapin::before{    display: block;content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);margin-top: 15px;width: 50px;height: 50px;border-radius: 50%;border: 1px solid #343a42;opacity: 0;transition: 1s;}
.com .maptab .tablist li.on::after{animation: motion 3s ease-in infinite 0.9s;}
.com .maptab .tablist li.on::before{animation: motion 3s ease-in infinite 0.6s;}
.com .maptab .tablist li.on .mapin::after{animation: motion 3s ease-in infinite 0.3s;}
.com .maptab .tablist li.on .mapin::before{animation: motion 3s ease-in infinite;}
.com .maptab .tablist li img{transition: 0.3s;}
.com .maptab .tablist li:hover img{transform: scale(0.8);}
.com .mapwrap_ .mapin ul li .imgbox{background-position: center; background-size: cover; background-repeat: no-repeat;}
.com .mapwrap_ .mapin ul li .imgbox::after{content: ""; display: block; padding-bottom: calc(226/376 * 100%);}
.com .mapwrap_ .mapin .kolist{margin-top: 70px; border-top: 2px solid #000;}
.com .mapwrap_ .mapin .kolist > li {display: flex; padding: 50px 20px; border-bottom: 1px solid #ccc;}
.com .mapwrap_ .mapin .kolist > li .imgbox{flex: 1;}
.com .mapwrap_ .mapin .kolist > li .txtbox{flex: 3; margin-left: 30px; text-align: left;}
.com .mapwrap_ .mapin .kolist > li .txtbox strong{font-size: 22px; font-weight: 800; display: block; margin-bottom: 25px;}
.com .mapwrap_ .mapin .kolist > li .txtbox .listdep li{font-size: 17px; color: #666; margin-bottom: 20px;}
.com .mapwrap_ .mapin .kolist > li .txtbox .listdep li::before{content: ""; display: inline-block; width: 5px; height: 5px; background-color: #666; border-radius: 50%; vertical-align: middle; margin-right: 15px;}
.com .mapwrap_ .mapin .kolist > li .txtbox .listdep li span{color: #000; font-weight: 600;}

@keyframes motion{
    0%{
        opacity:0;
        width:50px;height:50px;
    }
    50%{
        opacity:0.9;
    }
    100%{
        opacity:0;
        width:190px;height:190px;
    }
}

.com .maptab .tablist li span{display: block; font-size: 18px; font-weight: 600; margin-bottom: 3px;}
.com .maptab .tablist li.map01{top: 33%; left: 33%;}
.com .maptab .tablist li.map02{top: 29%; left: 29%;}
.com .maptab .tablist li.map03{top: 25%; left: 5%;}
.com .maptab .tablist li.map04{bottom: 36%; left: 32%;}
.com .maptab .tablist li.map05{top: 33%;right: 26%;}
.com .tabwrap .tabin {display: none;}
.com .tabwrap .tabin.on{display: block;}
.com .tabwrap .tabin > span{font-size: 32px; font-weight: 800; display: block; margin-bottom: 30px; text-align: left;}
.com .tabwrap .tabin > span img{vertical-align: sub; margin-right: 13px;}
.com .tabwrap .tabin ul{border-top: 1px solid #000; transform: translateY(40px); opacity: 0; transition: 0.3s;}
.com .tabwrap .tabin ul.on{transform: translateY(0); opacity: 1; }
.com .tabwrap .tabin ul li{padding: 40px 30px; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.com .tabwrap .tabin ul li .title{display: flex; align-items: center;}
.com .tabwrap .tabin ul li span{font-weight: 800; font-size: 24px; margin-left: 20px;}
.com .tabwrap .tabin ul li dl{font-size: 20px; display: flex; align-items: center; margin-top: 33px;}
.com .tabwrap .tabin ul li dt{font-weight: 800; margin-right: 30px;}
.com .tabwrap .tabin ul li dl dd{color: #666;}

.com .topmap{text-align: center; margin-bottom: 30px;}
.com .topmap ul{display: flex; align-items: center; justify-content: center;}
.com .topmap ul li{font-size: 30px; color: #666; font-weight: 600; cursor: pointer; border-bottom: 1px solid; padding-bottom: 10px; transition: 0.3s;}
.com .topmap ul li:first-of-type{margin-right: 20px;}
.com .topmap ul li.active{color: #0f9fff;}
.com .mapin {display: none; text-align: center;}
.com .mapin.active {display: block;}

@media screen and (max-width: 900px){
    .com .tit dt{font-size: 18px;}
    .com .tit dd{font-size: 25px; line-height: 34px;}

    /* .com .maptab .tablist li img{width: 10%;} */
    .com .maptab .tablist li span{font-size: 13px;}

    .com .tabwrap .tabin > span{font-size: 20px;}
    .com .tabwrap .tabin > span img{width: 7%; vertical-align: middle;}
    .com .tabwrap .tabin ul li{padding: 20px;}
    .com .tabwrap .tabin ul li .title img{width: 4%;}
    .com .tabwrap .tabin ul li span{font-size: 16px; margin-left: 8px;}
    .com .tabwrap .tabin ul li dl{margin-top: 20px; font-size: 15px; align-items: baseline;}
    .com .tabwrap .tabin ul li dt{margin-right: 15px;}
    .com .maptab .tablist li.on::before{ animation: motion 3s ease-in infinite 0.9s;}
    .com .maptab .tablist li.on .mapin::after{animation: motion 3s ease-in infinite 0.5s;}
    .com .maptab .tablist li.on::after{animation: motion 3s ease-in infinite 0.4s;}


    @keyframes motion{
        0%{
            opacity:0;
            width:20px;height:20px;
        }
        50%{
            opacity:0.9;
        }
        100%{
            opacity:0;
            width:70px;height:70px;
        }
    }


    .com .mapwrap_ .mapin .kolist > li{display: block; padding: 30px 0;}
    .com .mapwrap_ .mapin .kolist > li .txtbox{margin-left: 0; margin-top: 20px;}
    .com .mapwrap_ .mapin .kolist > li .txtbox strong{font-size: 16px; margin-bottom: 15px;}
    .com .mapwrap_ .mapin .kolist > li .txtbox .listdep li{font-size: 13px; word-break: keep-all;}
    .com .topmap ul li{font-size: 16px;}

}

@media screen and (max-width: 500px){
    .com .tit dd{font-size: 18px; line-height: 24px; margin-top: 5px;}
    .com .maptab{transform: scale(1); margin-top: 20px; margin-bottom: 40px;}
    .com .maptab .tablist li.map01{top: 20%; left: 23%;}
    
    .com .tabwrap .tabin ul li span{font-size: 13px; text-align: left;}
    .com .tabwrap .tabin ul li dl{font-size: 14px; text-align: left;}
}

/* 연혁 */
.history {overflow: hidden;}
.history .barwrap{background-color: #fff; z-index: 55; padding-bottom: 50px; padding-top: 50px;}
.history .barwrap .subwrap{padding-bottom: 0; background-color: #fff; padding-top: 0;}
.history .barwrap .hbar {display: flex; justify-content: space-between;position: relative;  background-color: #fff;   z-index: 1;}
.history .barwrap .hbar li{position: relative; width: 100%; padding-top: 30px;}
.history .barwrap .hbar li .prosbar{content: ""; width: 100%; height: 1px; position: absolute; top: 0; left: 0; background-color: #ccc;}

.history .barwrap .hbar li .prosbar .bar {width: 0; height: 100%; position: absolute; left: 0; top: 0; background: #0f9fff;}
.history .barwrap .hbar li:nth-of-type(2) .title{margin-left: -40px;}
.history .barwrap .hbar li:nth-of-type(3) .title{margin-left: -100px;}

.history .barwrap .hbar li::before{content: ""; display: block; width: 8px; height: 8px; background-color: #ccc; border-radius: 50%; position: absolute; top: -4.3px; left: 0; z-index: 1; transition: 0.3s;}
.history .barwrap .hbar li:last-of-type{position: absolute; top: 0; left: 100%;}
.history .barwrap .hbar li:last-of-type::after{display: none;}
.history .barwrap .hbar li strong{font-size: 18px; font-weight: 600; transition: 0.3s;}
.history .barwrap .hbar li p{color: #666; margin-top: 10px; transition: 0.3s;}
.history .barwrap .hbar li.on strong{font-size: 24px; font-weight: 800; color: #0f9fff;}
.history .barwrap .hbar li.on p{color: #0f9fff; margin-top: 10px; font-size: 18px;}
.history .barwrap .hbar li.on::before{background-color: #0f9fff; width: 14px; height: 14px; top: -7.3px;}
.history .hlistwrap .subwrap{padding-top: 0;}
.history .hlist .flexbox{display: flex; margin-bottom: 140px;}
.history .hlist .flexbox:last-of-type{margin-bottom: 0;}
.history .hlist .flexbox .imgbox{flex: 1; margin-right: 10px;}
.history .hlist .flexbox .txtbox{ margin-left: auto; width: 590px;}
.history .hlist .flexbox .txtbox > strong{font-size: 38px; font-weight: 800; color: #0f9fff; display: block; border-bottom: 2px solid #0f9fff; padding-bottom: 20px; margin-bottom: 60px;}
.history .hlist .flexbox .txtbox > ul > li {display: flex; margin-bottom: 40px;}
.history .hlist .flexbox .txtbox > ul > li:last-of-type{margin-bottom: 0;}
/* .history .hlist .flexbox .txtbox > ul li .tit::after{content: ""; display: inline-block; width: 6px; height: 6px; border:  1px solid #0f9fff; border-radius: 50%; vertical-align: super; margin-left: 10px; margin-right: 15px;} */
.history .hlist .flexbox .txtbox > ul li .tit span{width: 60px; display: inline-block;font-size: 24px; font-weight: 600; color: #0f9fff;}
.history .hlist .flexbox .txtbox > ul li .txtin li{font-size: 20px; color: #666; margin-bottom: 25px; display: flex; align-items: flex-start; }
.history .hlist .flexbox .txtbox > ul li .txtin li:last-of-type{margin-bottom: 0;}
.history .hlist .flexbox .txtbox > ul li .txtin li p{display: inline; word-break: keep-all;}
.history .hlist .flexbox .txtbox > ul li .txtin li i{width: 6px; height: 6px; border: 1px solid #0f9fff; border-radius: 50%; display: inline-block; margin: 0 15px; transform: translateY(5px); flex-shrink : 0}

@media screen and (max-width: 900px){
    .history .barwrap .hbar li:nth-of-type(3) .title{margin-left: -77px;}
    .history .barwrap .hbar li strong{font-size: 14px;}
    .history .barwrap .hbar li p{font-size: 13px;}
    .history .barwrap .hbar li.on::before{background-color: #ccc; width: 8px; height: 8px; top: -4.3px;}
    .history .barwrap .hbar li.on strong{font-size: 14px; color: #000; font-weight: 600;}
    .history .barwrap .hbar li.on p{font-size: 13px; color: #666;}
    .history .hlist .flexbox{display: block; margin-bottom: 80px;}
    .history .hlist .flexbox .imgbox{margin-bottom: 50px;}
    .history .hlist .flexbox .txtbox{width: auto;}
    .history .hlist .flexbox .txtbox > strong{font-size: 20px; padding-bottom: 10px;margin-bottom: 30px;}
    .history .hlist .flexbox .txtbox > ul li .tit span{width: auto; font-size: 15px;}
    .history .hlist .flexbox .txtbox > ul li .txtin li{font-size: 13px;}
    .history .hlist .flexbox .txtbox > ul li .txtin li i{transform: translateY(3px);}
}

/* 개요(비전) */
.subvs.vision_{background-image: url('/img/vision_bg.jpg'); height: 100vh; position: relative; background-attachment: fixed; animation: bgani 2s both;}
.subvs.vision_ .title{flex-direction: column; padding: 0 20px;}
.subvs.vision_ .title dl dt{color: #0f9fff; font-size: 150px;}
.subvs.vision_ .title dl dd{font-weight: 700; font-size: 50px; margin-top: 5px;}
.subvs.vision_ .title p{color: #fff; text-align: center; margin-top: 50px; line-height: calc(32/20);}
.subvs.vision_ .scrollwrap{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.subvs.vision_ .scrollwrap p{color: #fff; margin-bottom: 10px; font-size: 14px; font-weight: 600;}
.subvs.vision_ .scrollwrap span{width: 2px; height: 100px; background-color: rgba(255,255,255,0.5); display: block; margin: 0 auto; position: relative;}
.subvs.vision_ .scrollwrap span::after{content: ""; display: block; position: absolute; width: 2px; height: 20px; background-color: #fff; animation: scrollDown 2s infinite;}

@keyframes scrollDown {
    0%{
    	top: 0;
    }
	100% {
		top: 150%;
	}
}

@keyframes bgani {
    0%{
        background-size: 115% 115%;
    }
    100%{
        background-size: 100% 100%;
    }
}


.vision .tit{text-align: center; margin-bottom: 145px; }
.vision .tit dt{font-size: 32px; font-family: 'HDharmony B'; color: #0f9fff; margin-bottom: 10px;}
.vision .tit dd{font-size: 50px; font-weight: 500; line-height: calc(70/50);}
.vision .tit dd span{font-weight: 800;}
.vision .slidebox{position: relative;  height: 600px; }
.vision .slidebox .flipbox{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 445px;height: 445px;}
.vision .slidebox .flipbox img{width: 100%;}
.vision .slidebox .flipbox::before{content: ""; display: block; border: 1px solid #ccc; width: 125%; height: 125%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;}
.vision .slidebox .flipbox .flip_slide{text-align: center;}
.vision .slidebox .flipbox .flip_slide .swiper-slide{border-radius: 50%; overflow: hidden;}
.vision .slidebox .flipbox .swiper-pagination span{position: absolute; background: transparent; opacity: 1; z-index: 9; width: 40px; height: 40px;}
.vision .slidebox .flipbox .swiper-pagination span::before{content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 8px;height: 8px;background: #373737;border-radius: 50%;}
.vision .slidebox .flipbox .swiper-pagination span::after{    content: '';position: absolute;left: 50%;top: 50%;z-index: 9;width: 8px;height: 8px;transition: all .3s;box-sizing: border-box;border-radius: 50%;transform: translate(-50%, -50%);transition: all .3s; }
.vision .slidebox .flipbox .swiper-pagination span:first-of-type{ top: -432px;}
.vision .slidebox .flipbox .swiper-pagination span:nth-of-type(2){ top: -432px; right: -448px;}
.vision .slidebox .flipbox .swiper-pagination span:nth-of-type(3){ bottom: 9px; left: 0;}
.vision .slidebox .flipbox .swiper-pagination span:nth-of-type(4){ bottom: 9px; right: -445px;}
.vision .slidebox .flipbox .swiper-pagination span.swiper-pagination-bullet-active{border: 1px solid #0f9fff;}
.vision .slidebox .flipbox .swiper-pagination span.swiper-pagination-bullet-active::before{background-color: #0f9fff;}
/* .vision .slidebox .flipbox .swiper-pagination span.swiper-pagination-bullet-active::after{content: ""; display: block; width: 500%; height: 500%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border:  1px solid #0f9fff; border-radius: 50%;} */
.vision .slidebox .vision_con{position: absolute;}
.vision .slidebox .vision_con.icon01{top: 0; left: 0; text-align: right;} 
.vision .slidebox .vision_con.icon02{top: 0; right: 13%;}
.vision .slidebox .vision_con.icon03{bottom: 0; left: 0; text-align: right;}
.vision .slidebox .vision_con.icon04{bottom: 0; right: 0;}
.vision .slidebox .vision_con dl dt{font-size: 32px; color: #333;font-family: 'HDharmony B'; margin: 20px 0 5px;}
.vision .slidebox .vision_con dl dd{font-size: 18px; color: #666; line-height: calc(28/18);}
.vision .slidebox .vision_con.active dl dt{color: #0f9fff;}
.vision .tbx .imgwrap{text-align: center; margin: 60px 0 40px; padding: 0 20px;}

.vision .tit02{margin-bottom: 75px;}
.vision .tit02 dt{font-size: 32px; color: #0f9fff; font-family: 'HDharmony B';}
.vision .tit02 dd{font-size: 42px; font-weight: 700; margin-top: 15px;}

.vision .bx02 ul {display: flex;}
.vision .bx02 ul li {flex: 1;}
.vision .bx02 ul li span{font-size: 32px; color: #0f9fff; font-weight: 800; border-bottom: 3px solid #0f9fff; padding-bottom: 16px;}
/* .vision .bx02 ul li span::after{content: ""; display: block; width: 100px; height: 2px; background-color: #0f9fff;} */
.vision .bx02 ul li dl::before{content: ""; display: block; width: 100%; height: 2px; background-color: #ccc; margin: 20px 0 30px;}
.vision .bx02 ul li dl dt{font-size: 20px; font-weight: 800; margin-bottom: 15px;}
.vision .bx02 ul li dl dd{font-size: 18px; color: #666; line-height: calc(28/18);}

.vision .bannerbx{position: relative;}
.vision .bannerbx > span{font-size: 87px; font-family: 'HDharmony B'; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; color: transparent; position: absolute; left: 0; z-index: 2;  writing-mode:tb-rl; transform: translateY(-50%) rotate(180deg); top: 50%; left: 2%;}  
.vision .bannerbx .bn_slide .swiper-slide{background: url('/img/vs_banner01.jpg') no-repeat; background-position: center; background-size: cover; height: 590px; box-sizing: border-box; display: flex; align-items: center;}
.vision .bannerbx .bn_slide .swiper-slide.slide02{background-image: url('/img/vs_banner02.jpg');}
.vision .bannerbx .bn_slide .swiper-slide.slide03{background-image: url('/img/vs_banner03.jpg');}
.vision .bannerbx .bn_slide .swiper-slide .subwrap .txt > span{font-size: 24px; font-weight: 600; color: #fff;}
.vision .bannerbx .bn_slide .swiper-slide .subwrap .txt p{font-size: 62px; line-height: 78px; color: rgba(255, 255, 255, 0.5); font-weight: 800; margin-top: 45px;}
.vision .bannerbx .bn_slide .swiper-slide .subwrap .txt p span{color: #fff;}
.vision .bannerbx .bn_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{width: 54px; height: 54px; background-image: url('/img/vision_arrow_prev.png'); left: 16.5%; top: auto; right: auto; bottom: 20%; background-size: cover;}
.vision .bannerbx .bn_slide .swiper-button-next{background-image: url('/img/vision_arrow_next.png');background-size: cover; width: 54px; height: 54px; left: 20.5%; top: auto; bottom: 20%;}

.vision .bannerbx .bn_slide .prbar{display: flex; align-items: center; position: absolute; z-index: 2; color: #fff; left: 30%; top: 29.6%; font-size: 18px;}
.vision .bannerbx .bn_slide .prbar .allnum{color: rgba(255, 255, 255, 0.5);}

.vision .diabx .mo{display: none;}

@media screen and (max-width: 900px){
    .subvs.vision_{background-image: url('/img/vision_bg_mob.jpg'); background-attachment: initial; position: relative;}
    .subvs.vision_::after{content: ""; display: block; width: 100%; height: 100%; top: 0; left: 0; position: absolute; background-color: rgba(0, 0, 0, 0.3);}
    .subvs .title dl{z-index: 1;}
    .subvs.vision_ .title dl dt{font-size: 28px;}
    .subvs.vision_ .title dl dd{font-size: 32px;}
    .subvs.vision_ .title p{font-size: 13px; word-break: keep-all; margin-top: 20px; z-index: 1;}
    .subvs.vision_ .title p br{display: none;}

    .vision .tit{margin-bottom: 75px;}
    .vision .tit dt{font-size: 18px; margin-bottom: 5px;}
    .vision .tit dd{font-size: 20px;}

    .vision .slidebox .flipbox{width: 250px; height: 250px;}
    .vision .slidebox .flipbox .swiper-pagination span:first-of-type{top: -261px;}
    .vision .slidebox .flipbox .swiper-pagination span:nth-of-type(2){top: -261px; right: -250px;}
    .vision .slidebox .flipbox .swiper-pagination span:nth-of-type(3){bottom: -12px;}
    .vision .slidebox .flipbox .swiper-pagination span:nth-of-type(4){right: -250px; bottom: -12px;}

    .vision .slidebox .vision_con{width: 25%;}
    .vision .slidebox .vision_con dl dt{font-size: 20px;}
    .vision .slidebox .vision_con dl dd{font-size: 13px;}
    .vision .slidebox .vision_con.icon02{right: 8%;}
    .vision .slidebox .vision_con.icon04{right: 8%;}

    .vision .tbx .imgwrap{margin: 0;}

    .vision .tit02{margin-bottom: 35px;}
    .vision .tit02 dt{font-size: 18px;}
    .vision .tit02 dd{margin-top: 5px; font-size: 20px;}
    .vision .bx02 ul li{margin-right: 5px;}
    .vision .bx02 ul li:last-of-type{margin-right: 0;}
    .vision .bx02 ul li span{font-size: 18px; padding-bottom: 10px;}
    .vision .bx02 ul li dl::before{margin: 12px 0 25px;}
    .vision .bx02 ul li dl dt{font-size: 14px; margin-bottom: 10px;}
    .vision .bx02 ul li dl dd{font-size: 13px; word-break: keep-all;}
    .vision .bx02 ul li dl dd br{display: none;}

    .vision .bannerbx > span{font-size: 37px;}
    .vision .bannerbx .bn_slide .swiper-slide{ padding: 22px 70px 22px 57px; height: 300px;}
    .vision .bannerbx .bn_slide .swiper-slide .subwrap .txt > span{font-size: 17px;}
    .vision .bannerbx .bn_slide .swiper-slide .subwrap .txt p{font-size: 22px; line-height: 26px; margin-top: 16px; margin-bottom: 25px; word-break: keep-all;}
    .vision .bannerbx .bn_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-size: 59%; left: 12%; bottom: 13%;}
    .vision .bannerbx .bn_slide .swiper-button-next{background-size: 59%; left: 21%; bottom: 13%;}

    .vision .diabx .pc{display: none;}
    .vision .diabx .mo{display: block;}

    .vision .bannerbx .bn_slide .swiper-slide .txt {padding-left: 0;}
    .vision .bannerbx .bn_slide .prbar{font-size: 13px; top: 32%;}
}

@media screen and (max-width: 500px){
    .vision .slidebox .vision_con > img{width: 34%;}
    .vision .slidebox .vision_con.icon01{top: -21px;}
    .vision .slidebox .vision_con.icon01 > img{width: 32%;}
    .vision .slidebox .vision_con.icon02 {right: 0; top: -21px;}
    .vision .slidebox .vision_con.icon02 > img{width: 46%;}
    .vision .slidebox .vision_con.icon03{left: 0; bottom: 0;}
    .vision .slidebox .vision_con.icon04 {right: 0; bottom: -21px;}
    .vision .slidebox .vision_con.icon04 > img{width: 40%;}

    .vision .bannerbx .bn_slide .swiper-slide{padding-right: 0;}
    .vision .bannerbx .bn_slide .swiper-slide .subwrap .txt p{font-size: 17px;}
    .vision .bannerbx .bn_slide .prbar{ top: auto;transform: translate(145px, 97px); }
    .vision .bannerbx .bn_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{bottom: 19%;}
    .vision .bannerbx .bn_slide .swiper-button-next{bottom: 19%;}
}

@media screen and (max-width: 400px){
    .vision .bannerbx .bn_slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-size: 50%; left: 0; transform: translateX(55px);}
    .vision .bannerbx .bn_slide .swiper-button-next{background-size: 50%; left: 0; transform: translateX(89px);}
}

/* 채용안내, 회사소식 뷰페이지 */
.viewpage .viewwrap{border-top: 2px solid #000; }
.viewpage .viewwrap .titbox{text-align: center; padding: 60px 10px;}
.viewpage .viewwrap .titbox .tit dt{font-size: 20px; color: #0f9fff; font-family: 'HDharmony B'; }
.viewpage .viewwrap .titbox .tit dd{font-size: 32px; font-weight: 800; margin: 10px 0 25px; word-break: keep-all;}
.viewpage .viewwrap .titbox p{font-size: 18px; color: #888;}
.viewpage .viewwrap .filebox{background-color: #f4f4f4; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 20px; box-sizing: border-box;}
.viewpage .viewwrap .filebox a{font-size: 16px; display: block; font-weight: 600;}
.viewpage .viewwrap .filebox a img{margin-right: 15px; vertical-align: bottom;}
.viewpage .viewwrap .textbox{padding: 50px 0; border-bottom: 1px solid #ddd;}
.viewpage .viewwrap .textbox p{font-size: 18px; color: #666; line-height: calc(30/18); word-break: keep-all;}
.viewpage .viewwrap > ul li{display: flex; align-items: center; justify-content: space-between; padding: 30px 20px; border-bottom: 1px solid #ddd; position: relative;}
.viewpage .viewwrap > ul li > a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.viewpage .viewwrap > ul li .lef{display: flex; align-items: center;}
.viewpage .viewwrap > ul li .lef .viewbtn i{color: #888; vertical-align: bottom;}
.viewpage .viewwrap > ul li span{font-size: 14px; color: #888;}
.viewpage .viewwrap > ul li .lef strong{color: #333; font-weight: 500; margin-left: 30px; font-size: 14px;} 

.listbtn{font-size: 16px; display: block; text-align: center; border: 1px solid #000;  width: 200px; height: 50px; line-height: 50px; margin: 50px auto 0;}

@media screen and (max-width: 768px){
    .viewpage .viewwrap .titbox{padding: 35px 10px;}
    .viewpage .viewwrap .titbox .tit dt{font-size: 18px;}
    .viewpage .viewwrap .titbox .tit dd{font-size: 25px; margin: 5px 0 20px;}
    .viewpage .viewwrap .titbox p{font-size: 15px;}

    .viewpage .viewwrap .filebox a{font-size: 14px;}
    .viewpage .viewwrap .textbox{padding: 35px 10px;}
    .viewpage .viewwrap .textbox p{font-size: 14px;}

    .viewpage .viewwrap > ul li{display: block; padding: 20px 10px;}
    .viewpage .viewwrap > ul li span{font-size: 13px;}
    .viewpage .viewwrap > ul li .lef strong{margin-left: 0;  margin: 7px 0 13px; font-size: 13px; display: -webkit-box; } 
    .viewpage .viewwrap > ul li .lef{display: block;}

    .listbtn{margin: 40px auto 0; font-size: 14px; width: 125px; height: 40px; line-height: 40px;}
}

/* 공장및주요시설물 */
.fc .boxwrap{background-image: url('/img/factory_bg01_.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: relative;}
.fc .boxwrap.top::after{content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0;}
.fc .boxwrap.top .subwrap{z-index: 1;}
.fc .boxwrap.bot{background-image: url('/img/factory_bg02.jpg'); height: auto;}
.fc .boxwrap .tit {color: #fff; text-align: center;}
.fc .boxwrap .tit dt{font-size: 18px;}
.fc .boxwrap .tit dd{font-size: 42px;font-family: 'HDharmony B'; margin-top: 25px;}
.fc .boxwrap.top .tit dd span{font-size: 50px; display: block; margin-top: 30px;}
.fc .boxwrap ul{display: flex; margin-top: 50px;}
.fc .boxwrap.top ul{justify-content: center; align-items: center;}
.fc .boxwrap.bot ul{flex-wrap: wrap;}
.fc .boxwrap ul li{width: calc(99.9%/3 - 200px/3); margin-right: 100px; background-color: #fff;}
.fc .boxwrap ul li:last-of-type{margin-right: 0;}
.fc .boxwrap.bot ul li:nth-of-type(3n){margin-right: 0;}
.fc .boxwrap.bot ul li:nth-of-type(-n+3){margin-bottom: 40px;}
.fc .boxwrap ul li .imgbox{background-image: url('/img/factory_img01_.png'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; transition: 0.3s;}
.fc .boxwrap.top ul li:nth-of-type(2) .imgbox{background-image: url('/img/factory_img02.png');}
.fc .boxwrap.top ul li:nth-of-type(3) .imgbox{background-image: url('/img/factory_img03.png');}
.fc .boxwrap ul li .imgbox::after{content: ""; display: block; padding-bottom: calc(300/360 * 100%);}
.fc .boxwrap ul li:hover .imgbox{background-size: 110% 110%;}
.fc .boxwrap ul li .txtbox{padding: 30px; position: relative;}
/* .fc .boxwrap ul li .txtbox::before{content: ""; display: block; width: 92px; height: 92px; background: url('/img/factory_icon01.png') no-repeat; background-size: cover; background-position: center; position: absolute; top: -45px; left: 50%; transform: translateX(-50%);} */
.fc .boxwrap ul li .txtbox span{font-size: 24px; font-weight: 800; display: block; text-align: center; }
.fc .boxwrap ul li .txtbox dl{font-size: 16px; display: flex; align-items: center;}
.fc .boxwrap ul li .txtbox dl:first-of-type{margin-bottom: 10px;}
.fc .boxwrap ul li .txtbox dl dt{width: 85px; height: 27px; border: 1px solid #000; text-align: center; line-height: 27px; margin-right: 20px;}
.fc .boxwrap ul li .txtbox dl dd{color: #666;}

.fc .boxwrap.bot ul li .imgbox{background-image: url('/img/factory_img04.png');}
.fc .boxwrap.bot ul li:nth-of-type(2) .imgbox{background-image: url('/img/factory_img05.png');}
.fc .boxwrap.bot ul li:nth-of-type(3) .imgbox{background-image: url('/img/factory_img06.png');}
.fc .boxwrap.bot ul li:nth-of-type(4) .imgbox{background-image: url('/img/factory_img07.png');}
.fc .boxwrap.bot ul li:nth-of-type(5) .imgbox{background-image: url('/img/factory_img08.png');}
.fc .boxwrap.bot ul li:nth-of-type(6) .imgbox{background-image: url('/img/factory_img09.png');}

@media screen and (max-width: 900px){
    .fc .boxwrap .tit dt{font-size: 15px;}
    .fc .boxwrap .tit dd{font-size: 24px; margin-top: 10px;}
    .fc .boxwrap ul{margin-top: 30px;}
    .fc .boxwrap ul li{width: calc(99.9%/3 - 40px/3); margin-right: 20px;}
    .fc .boxwrap ul li .txtbox {padding: 39px 15px 15px;}
    .fc .boxwrap ul li .txtbox::before{background-size: 60%;}
    .fc .boxwrap ul li .txtbox span{font-size: 15px; margin-bottom: 10px; padding-bottom: 10px;}
    .fc .boxwrap ul li .txtbox dl{font-size: 13px;}
    .fc .boxwrap ul li .txtbox dl dt{width: 64px; height: 22px; line-height: 22px; margin-right: 5px;}
}

@media screen and (max-width: 600px){
    .fc .boxwrap{height: auto;}
    /* .fc .boxwrap ul{display: block;} */
    /* .fc .boxwrap ul li{margin-right: 0; width: 100%; margin-bottom: 30px;} */
    .fc .boxwrap ul li:last-of-type{margin-bottom: 0;}

    .fc .boxwrap ul li{width: calc(99.9%/2 - 20px/2); margin-right: 20x; background-color: #fff;}
    .fc .boxwrap ul li:last-of-type{margin-right: 0;}
    .fc .boxwrap.bot ul li:nth-of-type(3n){margin-right: 20px;}
    .fc .boxwrap.bot ul li:nth-of-type(2n){margin-right: 0;}
    .fc .boxwrap.bot ul li:nth-of-type(-n+4){margin-bottom: 30px;}
}

/* 인증 및 수상내역 */
.awards .awalist{display: flex; flex-wrap: wrap;}
.awards .awalist li {width: calc(99.9%/4 - 75px/4); margin-right: 25px; cursor: pointer;}
.awards .awalist li:nth-of-type(4n){margin-right: 0;}
.awards .awalist li:nth-of-type(-n+4){margin-bottom: 65px;}
.awards .awalist li .imgbox{background-image: url('/img/awa_img01.png'); background-repeat: no-repeat; background-position: center; background-size: contain; border: 3px solid #eee; transition: 0.3s;}
.awards .awalist li .imgbox::after{content: ""; display: block; padding-bottom: calc(378/298 * 100%);}
.awards .awalist li .txtbox dl{margin: 20px 0 18px;}
.awards .awalist li .txtbox dl dt{font-size: 16px; color: #0f9fff; font-weight: 600;}
.awards .awalist li .txtbox dl dd{font-size: 18px; font-weight: 700; margin-top: 10px;display: inline-block;}
.awards .awalist li .txtbox dl dd::after{content: ""; display: block; width: 0; height: 2px; background-color: #000; transition: 0.3s;}
.awards .awalist li:hover .txtbox dl dd::after{width: 100%;}
.awards .awalist li .txtbox span{color: #aaa; transition: 0.3s; font-weight: 600;}
.awards .awalist li:hover .txtbox span{color: #000;}
.awards .awalist li:hover .imgbox{border: 3px solid #0f9fff;}

.awamodal{position: fixed; width: 100%; height: 100%; z-index: 99; top: 0; left: 0; display: none;}
.awamodal .awabg{width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0;}
.awamodal .awain{position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); max-width: 400px;}
.awamodal .awain .modal_close{position: absolute; right: 0; top: -30px; width: 30px; height: 30px; background-color: #0f9fff; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.awamodal .awain .modal_close i{color: #fff;}
.awamodal .awain img{width: 100%; height: 100%;}

.awartit{text-align: center; margin-bottom: 80px; }
.awartit p{font-size: 40px;}
.awartit p span{font-weight: 600;}
.awartit img{margin-bottom: 22px;}

@media screen and (max-width: 900px){
    .awards .awalist li {width: calc(99.9%/3 - 50px/3);}
    .awards .awalist li:nth-of-type(4n){margin-right: 25px;}
    .awards .awalist li:nth-of-type(3n){margin-right: 0;}
    .awards .awalist li:nth-of-type(-n+6){margin-bottom: 65px;}

    .awards .awalist li .txtbox dl{margin: 20px 0 10px;}
    .awards .awalist li .txtbox dl dt{font-size: 14px;}
    .awards .awalist li .txtbox dl dd{font-size: 15px;}
    .awards .awalist li .txtbox span{font-size: 14px;}

    .awartit p{font-size: 22px;}
}

@media screen and (max-width: 500px){
    .awards .awalist li{width: calc(99.9%/2 - 25px/2);}
    .awards .awalist li:nth-of-type(3n){margin-right: 25px;}
    .awards .awalist li:nth-of-type(2n){margin-right: 0;}
    .awards .awalist li:nth-of-type(-n+6){margin-bottom: 35px;}
}


/* 연구소소개 */
.inst.devel{background-image: none;}
.inst.devel .process{margin-top: 0;}

.inst.devel .textbox{width: 100%; background-color: #f6f6f6; margin-top: 70px; padding: 50px; box-sizing: border-box;}
.inst.devel .textbox strong{font-size: 32px; font-weight: 800;}
.inst.devel .textbox > p{margin-bottom: 20px; font-size: 24px; font-weight: 500; word-break: keep-all;}
.inst.devel .textbox p span{font-weight: 800;}
.inst.devel .textbox ul li{font-size: 18px; color: #666; font-weight: 500; margin-bottom: 22px;}
.inst.devel .textbox ul li:last-of-type{margin-bottom: 0;}
.inst.devel .textbox ul li::before{content: ""; display: inline-block; width: 8px; height: 8px; background-color: #0f9fff; border-radius: 50%; vertical-align: middle; margin-right: 15px;}

@media screen and (max-width: 900px){
    .inst.devel .textbox{padding: 25px; margin-top: 40px;}
    .inst.devel .textbox strong{font-size: 18px;}
    .inst.devel .textbox p{font-size: 15px; line-height: 1.3;}
    .inst.devel .textbox ul li{font-size: 13px; line-height: 1.3; word-break: keep-all;}
    .inst.devel .textbox ul li::before{margin-right: 10px;}
}

/* 고객제품 뷰페이지 */
.pdview .flexbox{display: flex; align-items: center;}
.pdview .flexbox .imgwrap {flex: 2;}
.pdview .flexbox .imgwrap .imgcon .con{display: none; border: 3px solid #eee; width: 100%; background-position: center;background-size: cover; background-repeat: no-repeat;}
.pdview .flexbox .imgwrap .imgcon .con.on{display: block;}
.pdview .flexbox .imgwrap .imgcon .con::after{content: ""; display: block; padding-bottom: calc(473/718 * 100%);}
.pdview .flexbox .tabwrap ul{display: flex; width: 100%; margin-top: 13px;}
.pdview .flexbox .tabwrap ul li{width: calc(99.9%/4 - 39px/4); margin-right: 13px; cursor: pointer; text-align: center;}

.pdview .flexbox .tabwrap ul li .bg{ transition: 0.3s; background-position: center; background-size: cover; border: 3px solid #eee; margin-bottom: 10px;}

.pdview .flexbox .tabwrap ul li:last-of-type{margin-right: 0;}
.pdview .flexbox .tabwrap ul li .bg.on{border: 3px solid #0f9fff;}
.pdview .flexbox .tabwrap ul li img{width: 100%;}
.pdview .flexbox .tabwrap ul li .bg::after{content: ""; display: block; padding-bottom: calc(109/166 * 100%);}
.pdview .flexbox .txtwrap{margin-left: 50px; flex: 1.5;}
.pdview .flexbox .txtwrap .cate .flex{display: flex; align-items: center;}
.pdview .flexbox .txtwrap .cate .flex dl{display: flex; align-items: center; font-size: 20px; color: #888; }
.pdview .flexbox .txtwrap .cate .flex dl dt{font-size: 20px; display: block; width: 103px; height: 43px; line-height: 43px; color: #fff; background-color: #0f9fff; text-align: center; border-radius: 15px;}
.pdview .flexbox .txtwrap .cate .flex dl dd{margin-left: 12px;}
.pdview .flexbox .txtwrap .cate strong{font-size: 34px; font-weight: 800; display: block; margin: 25px 0 30px; border-bottom: 1px solid #ddd; padding-bottom: 30px;}
.pdview .flexbox .txtwrap .exin{display: flex;}
.pdview .flexbox .txtwrap .exin li{width: 110px; height: 110px; text-align: center; display: flex; justify-content: center; flex-direction: column; align-items: center; background-color: #f6f6f6; color: #666; border-radius: 50%;}
.pdview .flexbox .txtwrap .exin li:first-of-type{margin-right: 20px;}
.pdview .flexbox .txtwrap .exin li .carimg{background-image: url('/img/eximg_off.png'); background-repeat: no-repeat; width:88px; height: 44px; background-position: center; margin-bottom: 5px;}
.pdview .flexbox .txtwrap .exin li:nth-of-type(2) .carimg{background-image: url('/img/inimg.png'); width: 95px; height: 38px;}
.pdview .flexbox .txtwrap .exin li:nth-of-type(1).on .carimg{background-image: url('/img/eximg_on.png');}
.pdview .flexbox .txtwrap .exin li:nth-of-type(2).on .carimg{background-image: url('/img/inimg_on.png'); width: 101px; height: 44px;}
.pdview .flexbox .txtwrap .exin li.on {background-color: #0f9fff;}
.pdview .flexbox .txtwrap .exin li.on span{color: #fff;}
.pdview .flexbox .txtwrap .tablewrap{border-radius: 15px;}
.pdview .flexbox .txtwrap table{margin-top: 30px; border: 1px solid #eee;  border-collapse: separate; border-radius: 15px; overflow: hidden; width: 100%;}
.pdview .flexbox .txtwrap table tr{border-bottom: 1px solid #eee;}
.pdview .flexbox .txtwrap table th{background-color: #eee; color: #888; font-size: 16px; border-bottom: 1px solid #eee; white-space: nowrap; padding: 20px 0;}
.pdview .flexbox .txtwrap table td{color: #666; font-size: 16px;border-bottom: 1px solid #eee; padding: 20px; font-weight: 600; line-height: calc(24/16); word-break: keep-all;}
.pdview .flexbox .txtwrap table tr:last-of-type th,
.pdview .flexbox .txtwrap table tr:last-of-type td{border-bottom: none;}
.pdview .flexbox .txtwrap .prbtn{color: #0f9fff; font-size: 18px; font-weight: 600; border: 2px solid #0f9fff; text-align: center; border-radius: 10px; width: 100%; display: block; padding: 15px 0; margin-top: 25px; transition: 0.3s;}
.pdview .flexbox .txtwrap .prbtn i{margin-left: 10px;    vertical-align: middle;}
.pdview .flexbox .txtwrap .prbtn:hover{background-color: #0f9fff; color: #fff;}
.pdview .textbox{border-bottom: 1px solid #ddd; padding-bottom: 70px; margin-bottom: 50px;}
.pdview .textbox .textin{margin-top: 75px; background-color: #f6f6f6;  height: 180px; padding: 40px 30px; max-height: 500px; overflow: auto;}
.pdview .textbox .textin p{font-size: 16px; color: #666; line-height: calc(28/16); word-break: keep-all;}

@media screen and (max-width: 900px){
    .pdview .flexbox{display: block;}
    .pdview .flexbox .imgwrap{margin-bottom: 40px;}
    .pdview .flexbox .txtwrap{margin-left: 0;}
    .pdview .flexbox .txtwrap table{width: 100%;}
    .pdview .flexbox .txtwrap .cate .flex span{font-size: 15px; width: 80px; height: 30px; line-height: 30px; border-radius: 10px;}
    .pdview .flexbox .txtwrap .cate .flex dl{font-size: 15px; margin-left: 15px;}
    .pdview .flexbox .txtwrap .cate .flex dl dt::after{height: 10px; margin: 0 7px;}
    .pdview .flexbox .txtwrap .cate strong{font-size: 20px; margin: 20px 0; padding-bottom: 20px;}
    .pdview .flexbox .txtwrap table th{font-size: 13px;}
    .pdview .flexbox .txtwrap table td{font-size: 13px;}
    .pdview .flexbox .txtwrap .prbtn{font-size: 14px;}

    .pdview .textbox{margin-bottom: 35px; padding-bottom: 40px;}
    .pdview .textbox .textin{margin-top: 40px; padding: 30px 20px; height: 400px;}
    .pdview .textbox .textin p{font-size: 14px;}
}

/* 필터 */
.ft .title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 70px;align-items: flex-end;}
.ft .title .lef{display: flex; align-items: center;}
.ft .title .lef dl{margin-left: 30px;}
.ft .title .lef dl dt{font-size: 24px; color: #666; margin-bottom: 7px;}
.ft .title .lef dl dd{font-size: 42px; color: #0f9fff;  font-family: 'HDharmony B';}
.ft .title .lef dl dd span{font-size: 18px;font-weight: 600; margin-left: 6px;}
.ft .title .rig{display: flex; align-items: center;}
.ft .title .rig dt{font-size: 20px; font-weight: 600; margin-right: 30px;}
.ft .title .rig dt img{margin-right: 15px; vertical-align: middle;}
.ft .title .rig dd{font-size: 20px; color: #666; font-weight: 600;}
.ft .ftlist ul{display: flex; flex-wrap: wrap;}
.ft .ftlist ul li{width: calc(99.9%/5 - 80px/5); margin-right: 20px;}
.ft .ftlist ul li:nth-of-type(5n){margin-right: 0;}
.ft .ftlist ul li:nth-of-type(-n+5){margin-bottom: 50px;}
.ft .ftlist ul li .imgbox{background-repeat: no-repeat; background-size: 100% auto; background-position: center; margin-bottom: 20px; transition: 0.3s;}
.ft .ftlist ul li .imgbox::after{content: ""; display: block; padding-bottom: calc(240/400 * 100%);}
.ft .ftlist ul li span{font-size: 16px; font-weight: 800;}
.ft .ftlist ul li:hover .imgbox{background-size: 110% auto;}

@media screen and (max-width: 900px){
    .ft .title{display: block; margin-bottom: 50px;}
    .ft .title .lef{margin-bottom: 20px;}
    .ft .title .lef img{width: 10%;}
    .ft .title .lef dl{margin-left: 17px;}
    .ft .title .lef dl dt{font-size: 15px;}
    .ft .title .lef dl dd{font-size: 28px;}
    .ft .title .lef dl dd span{font-size: 13px;}
    .ft .title .rig dt img{margin-right: 15px;}
    .ft .title .rig dt{font-size: 15px; margin-right: 10px;}
    .ft .title .rig dd{font-size: 15px;}
    .ft .ftlist ul li{width: calc(99.9%/2 - 20px/2); margin-right: 20px;}
    .ft .ftlist ul li:nth-of-type(5n){margin-right: 20px;}
    .ft .ftlist ul li:nth-of-type(2n){margin-right: 0;}
    .ft .ftlist ul li:nth-of-type(-n+8){margin-bottom: 30px;}
    .ft .ftlist ul li span{font-size: 15px;}
}

@media screen and (max-width: 600px){
    .ft .ftlist ul li .imgbox{margin-bottom: 10px;}
    .ft .ftlist ul li span{font-size: 13px;}

    .ft .title .rig{display: block;}
    .ft .title .rig dt{margin-bottom: 10px;}
}

@media screen and (max-width: 400px){
    .ft .title .lef dl dd{font-size: 20px;}
}

/* 조직도 */
.orga .top, .orga .md{text-align: center;}
.orga dl{text-align: center;}
.orga dl dt{font-size: 32px; color: #0f9fff; font-family: 'HDharmony B';}
.orga dl dd{font-size: 32px; font-weight: 800; margin-top: 7px;}
.orga .md{background-color: #f6f6f6;}
.orga .imgbox{margin-top: 35px;}
.orga .mo{display: none;}

@media screen and (max-width: 900px){
    .orga .pc{display: none;}
    .orga .mo{display: block;}

    .orga dl dt{font-size: 18px;}
    .orga dl dd{font-size: 25px;}
}


/* 인사복지제도 */
.wf{background-image: url('/img/welfarebg.png'); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed;}
.wf .ulwrap {display: flex; flex-wrap: wrap;}
.wf .ulwrap > li {width: calc(99.9%/2); padding: 35px 0; box-sizing: border-box;}
.wf .ulwrap > li:nth-of-type(even){border-left: 1px solid rgba(255, 255, 255, 0.2); padding-left: 40px;}
.wf .ulwrap > li:nth-of-type(-n+10){border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.wf .ulwrap > li strong{font-size: 32px; color: #fff; font-weight: 800; display: block; margin-bottom: 10px;}
.wf .ulwrap > li strong img{vertical-align: middle; margin-right: 12px;}
.wf .ulwrap > li .wfdep{margin-left: 55px;}
.wf .ulwrap > li .wfdep li{font-size: 18px; color: #fff; line-height: calc(30/18);}

@media screen and (max-width: 900px){
    .wf .ulwrap > li strong{font-size: 16px; margin-bottom: 0;}
    .wf .ulwrap > li strong img{width: 7%;}
    .wf .ulwrap > li .wfdep{margin-left: 39px;}
    .wf .ulwrap > li .wfdep li{font-size: 13px;}
}

@media screen and (max-width: 600px){
    .wf .ulwrap{display: block;}
    .wf .ulwrap > li{width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
    .wf .ulwrap > li:nth-of-type(even){border-left: none; padding-left: 0;}
    .wf .ulwrap > li:last-of-type{border-right: none; border-bottom: none;}
}


/* 개인정보처리방침 */
.prinfo .subwrap > strong{font-size: 30px; font-weight: 600; display: block; margin-bottom: 40px;}
.prinfo .subwrap .textin > span{display: block; background-color: #eee; text-align: center; font-size: 18px; border: 1px solid #666; padding: 20px; box-sizing: border-box; margin-bottom: 30px;}
.prinfo .subwrap .textin p{margin-bottom: 30px; line-height: 1.5;}
.prinfo .subwrap .textin p span{font-weight: 600;}
.prinfo .subwrap .textin ul {margin-left: 16px;}
.prinfo .subwrap .textin ul li{margin-bottom: 15px; list-style: initial; font-size: 15px;}
.prinfo .subwrap .textin ul li:last-of-type{margin-bottom: 0;}
.prinfo .subwrap .textin p.last{font-size: 14px; margin-top: 20px; font-weight: 600; word-break: keep-all;}




/* 230314 제품 레이아웃 리뉴얼 _YJ */


/* 제품리스트 공통레이아웃 */
.pdwrap.renew .topflex .tit{ width: 245px; }
.pdwrap.renew .topflex{ margin-bottom: 50px; }

.pdwrap.renew .botflex{ width: 100%; justify-content: space-between; letter-spacing: -0.025em; }
.pdwrap.renew .botflex .categories{ width: 245px; flex-shrink: 0; }
.pdwrap.renew .botflex .categories span{font-size: 16px; display: flex; align-items: center;}
.pdwrap.renew .botflex .categories span i{margin-right: 10px; width: 20px; height: 20px; border-radius: 50%; line-height: 20px; text-align: center; border: 1px solid #ddd; color: #ddd; display: inline-block; background-color: #0f9fff;}
.pdwrap.renew .botflex .categories span strong{ font-size: 20px; font-weight: 700; }
.pdwrap.renew .botflex .categories .cateList{ width: 100%; }
.pdwrap.renew .botflex .categories .cateList li{ width: 100%; height: 75px; box-sizing: border-box; border: 1px solid #a09fa0; margin-top: 20px; position: relative; cursor: pointer; }

.pdwrap.renew .botflex .categories .cateList li.on a p{ color: #000; }
.pdwrap.renew .botflex .categories .cateList li a{ display: flex; width: 100%; height: 100%; align-items: center; position: relative; }
.pdwrap.renew .botflex .categories .cateList li a::before{ content: ''; width: 100%; height: 100%; box-sizing: border-box; display: block; position: absolute; top: 0; left: 0; border: 4px solid #0f9fff; opacity: 0; transition-duration: 0.2s; }
.pdwrap.renew .botflex .categories .cateList li.on a::before{ opacity: 1; }
.pdwrap.renew .botflex .categories .cateList li a p{ width: calc(110 / 245 * 100%); text-align: center; color: #7f8080; font-size: 16px; font-weight: 500; transition-duration: 0.2s; }
.pdwrap.renew .botflex .categories .cateList li a .model{ width: calc(135 / 245 * 100%); height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }

@media screen and (min-width: 821px){
    .pdwrap.renew .botflex .categories .cateList li:hover a p{ color: #000; }
    .pdwrap.renew .botflex .categories .cateList li:hover a::before{ opacity: 1; }
}

.pdwrap.renew .thumbWrap{ width: 100%; position: relative; }
.pdwrap.renew .thumbWrap::after{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #c6c6c6; box-sizing: border-box; z-index: 2; }
.pdwrap.renew .thumbWrap .pr_thumb{ width: 100%; overflow: hidden; }
.pdwrap.renew .thumbWrap .pr_thumb .__max{ width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; transition-duration: 0.6s; transform: scale(1.01); }
.pdwrap.renew .thumbWrap .pr_thumb .__max::after{ display: block; content: ''; padding-bottom: calc(149 / 303 * 100%); }
.pdwrap.renew .thumbWrap .car_thumb{ position: relative; z-index: 2; border-top: 1px solid #c6c6c6; box-sizing: border-box; background-size: cover; background-position: center; background-repeat: no-repeat; }
.pdwrap.renew .thumbWrap .car_thumb::after{ display: block; content: ''; padding-bottom: calc(82 / 302 * 100%); }
.pdwrap.renew .carwrap a h2{ font-size: 20px; font-weight: 500; margin-top: 20px; text-align: center; transition-duration: 0.2s; }

@media screen and (min-width: 821px){
    .pdwrap.renew .botflex .carwrap a:hover .pr_thumb .__max{ transform: scale(1.05); }
    .pdwrap.renew .botflex .carwrap a:hover h2{ color: #0f9fff; }
    .pdwrap.renew .botflex .carwrap .reprWrap .inFlex .btn > div:hover{ background-color: #87cfff; }
}

.pdwrap.renew .botflex .carwrap .prdMore{ width: 100%; max-width: 160px; text-align: center; margin: 0 auto; cursor: pointer; border-radius: 25px; padding: 0.8em 0; border: 1px solid #ececee; box-sizing: border-box; transition-duration: 0.4s; }

@media screen and (min-width: 821px){
    .pdwrap.renew .botflex .carwrap .prdMore:hover{ background-color: #eee; }
}



@media screen and (max-width: 900px){
    .pdwrap.renew .botflex .categories{ width: 100%; }
    .pdwrap.renew .botflex .categories span strong{ font-size: 18px; }
    .pdwrap.renew .botflex .categories .cateList{ display: flex; flex-wrap: wrap; width: 100%; margin-top: 10px; }
    .pdwrap.renew .botflex .categories .cateList li{ width: 32.66%; height: auto; margin-right: 1%; margin-top: 1%; }
    .pdwrap.renew .botflex .categories .cateList li:nth-of-type(3n){ margin-right: 0; }
    .pdwrap.renew .botflex .categories .cateList li a p{ font-size: 14px; width: 55%; }
    .pdwrap.renew .botflex .categories .cateList li a .model{ width: 45%; }
    .pdwrap.renew .botflex .categories .cateList li a .model::after{ content: ''; display: block; padding-bottom: calc(73 / 133 * 100%); }
    
}

@media screen and (max-width: 500px){
    .pdwrap.renew .botflex .categories span strong{ font-size: 16px; }
    .pdwrap.renew .botflex .categories .cateList li a p{ font-size: 12px; }
    .pdwrap.renew .botflex .categories .cateList li a::before{ border-width: 2px; }
    
    .pdwrap.renew .botflex .carwrap .prdMore{ font-size: 14px; }
}

@media screen and (max-width: 400px){
    .pdwrap.renew .botflex .categories .cateList{ justify-content: space-between; }
    .pdwrap.renew .botflex .categories .cateList li{ width: 49%; margin-right: 0; margin-top: 2%; }
}



/* 제품 메인리스트(product_re.php) */
.pdwrap.renew .botflex .carwrap{ width: 100%; margin-left: 0; padding-left: 50px; box-sizing: border-box; overflow: hidden; }
.pdwrap.renew .botflex .carwrap > dl{ font-size: 26px; margin-bottom: 40px; }
.pdwrap.renew .botflex .carwrap > dl dt{ position: relative; padding-right: 20px; }
.pdwrap.renew .botflex .carwrap > dl dt::after{ content: ''; width: 3px; height: 27px; position: absolute; top: 50%; right: 10px; background-color: #999899; margin: 0; transform: translateY(-50%); }
.pdwrap.renew .botflex .carwrap .reprWrap{ width: 100%; margin-bottom: 65px; }
.pdwrap.renew .botflex .carwrap .reprWrap:last-of-type{ margin-bottom: 0; }
.pdwrap.renew .botflex .carwrap .reprWrap .inFlex{ width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.pdwrap.renew .botflex .carwrap .reprWrap .inFlex h1{ font-size: 20px; color: #0f9fff; font-weight: 700; }
.pdwrap.renew .botflex .carwrap .reprWrap .inFlex .btn{ display: flex; }
.pdwrap.renew .botflex .carwrap .reprWrap .inFlex .btn > div{ width: 35px; height: 27px; background-position: center; background-repeat: no-repeat; margin-left: 10px; cursor: pointer; transition-duration: 0.2s; background-color: #c3c3c3; }
.pdwrap.renew .botflex .carwrap .reprWrap .inFlex .btn .next{ background-image: url(/img/prod_re/next_icon.png); }
.pdwrap.renew .botflex .carwrap .reprWrap .inFlex .btn .prev{ background-image: url(/img/prod_re/pre_icon.png); }
.pdwrap.renew .botflex .carwrap .reprWrap .swiper{ width: 100%; margin-top: 12px; overflow: hidden; }
.pdwrap.renew .botflex .carwrap .reprWrap .swiper a{ display: block; width: 100%; height: 100%; overflow: hidden; }


@media screen and (max-width: 900px){
    .pdwrap.renew .botflex .carwrap{ padding-left: 0; margin-top: 50px; }
    .pdwrap.renew .botflex .carwrap > dl{ font-size: 22px; margin-bottom: 30px; }
    .pdwrap.renew .botflex .carwrap .reprWrap .inFlex{ align-items: center; }
    .pdwrap.renew .botflex .carwrap .reprWrap .inFlex h1{ font-size: 18px; }
    .pdwrap.renew .carwrap a h2{ font-size: 16px; }
}

@media screen and (max-width: 500px){
    .pdwrap.renew .botflex .carwrap > dl{ margin-bottom: 20px; font-size: 18px; }
    .pdwrap.renew .botflex .carwrap .reprWrap .inFlex h1{ font-size: 16px; }
    .pdwrap.renew .botflex .carwrap .reprWrap{ margin-bottom: 30px; }
    .pdwrap.renew .carwrap a h2{ font-size: 14px; margin-top: 10px; }
}




/* 각 카테고리 클릭시 리스트페이지(product_re_list.php) */
.pdwrap.renew .botflex .carwrap .brandList{ width: 100%; display: flex; flex-wrap: wrap; margin-top: 25px; }
.pdwrap.renew .botflex .carwrap .brandList li{ width: 31%; margin-right: 3.5%; margin-bottom: 65px; }
.pdwrap.renew .botflex .carwrap .brandList li:nth-of-type(3n){ margin-right: 0; }

.pdwrap.renew .botflex .carwrap .brandName{ width: 100%; display: flex; flex-wrap: wrap; }
.pdwrap.renew .botflex .carwrap .brandName li{ font-weight: 700; font-size: 19px; color: #a4a3a3; position: relative; transition-duration: 0.2s; margin-bottom: 20px; }
.pdwrap.renew .botflex .carwrap .brandName li::after{ content: ''; display: block; width: 2px; height: 18px; background-color: #7f7f7f; position: absolute; top: 50%; right: -1px; transform: translateY(-50%); }
.pdwrap.renew .botflex .carwrap .brandName li:last-of-type::after{ display: none; }
.pdwrap.renew .botflex .carwrap .brandName li.on{ color: #000; }
.pdwrap.renew .botflex .carwrap .brandName li a{ display: block; padding: 0 10px; color: inherit; }
.pdwrap.renew .botflex .carwrap .brandName li:first-of-type a{ padding-left: 0; }

@media screen and (min-width: 821px){
    .pdwrap.renew .botflex .carwrap .brandName li:hover{ color: #000; }
}

@media screen and (max-width: 1440px){
    .pdwrap.renew .botflex .carwrap .brandName{ margin-left: -15px; }
    .pdwrap.renew .botflex .carwrap .brandName li{ font-size: 16px; }
    .pdwrap.renew .botflex .carwrap .brandName li:first-of-type a{ padding-left: 15px; }
}


@media screen and (max-width: 900px){
    .pdwrap.renew .botflex .carwrap .brandName{ margin-left: -10px; }
    .pdwrap.renew .botflex .carwrap .brandName li{ font-size: 14px; margin-bottom: 10px; }
    .pdwrap.renew .botflex .carwrap .brandName li a{ padding: 0 10px; }
    .pdwrap.renew .botflex .carwrap .brandName li:first-of-type a{ padding-left: 10px; }
    .pdwrap.renew .botflex .carwrap .brandList{ justify-content: space-between; margin-top: 30px; }
    .pdwrap.renew .botflex .carwrap .brandList li{ width: 49%; margin-right: 0; margin-bottom: 30px; }
}

@media screen and (max-width: 500px){
    .pdwrap.renew .botflex .carwrap .brandList{ margin-top: 20px; }
    .pdwrap.renew .botflex .carwrap .brandList li{ width: 100%; }
    .pdwrap.renew .botflex .carwrap .brandName li{ font-size: 12px; }
    .pdwrap.renew .botflex .carwrap .brandName li::after{ height: 13px; }
    
}


/* 제품 뷰페이지 */
.view_renew{ width: 100%; position: relative; padding-top: 95px; padding-bottom: 165px; letter-spacing: -0.025em; }
.view_renew .wrap{ display: flex; justify-content: space-between; }
.view_renew .lbx{ width: calc(395 / 1280 * 100%); }
.view_renew .lbx .brandLogo{ display: flex; align-items: center; }
.view_renew .lbx .brandLogo .png{ flex-shrink: 0; }
.view_renew .lbx .brandLogo .png img{ max-height: 100%; }
.view_renew .lbx .brandLogo span{ font-size: 20px; margin-left: 10px; }
.view_renew .lbx .productInfo{ width: 100%; }
.view_renew .lbx .productInfo dl{ margin-top: 25px; padding-bottom: 30px; border-bottom: 1px solid #d3d3d3; }
.view_renew .lbx .productInfo dl dt{ font-size: 50px; word-break: keep-all; line-height: 1.2; font-weight: 700; }
/* .view_renew .lbx .productInfo dl dt span{ font-weight: 700; } */
.view_renew .lbx .productInfo dl dd{ font-size: 23px; color: #808080; margin-top: 10px; }
.view_renew .lbx .productInfo .infor{ width: 100%; margin-top: 25px; }
.view_renew .lbx .productInfo .infor li{ width: 100%; font-size: 20px; margin-bottom: 50px; }
.view_renew .lbx .productInfo .infor li h1{ font-weight: 700; }
.view_renew .lbx .productInfo .infor li h2{ color: #808080; margin-top: 5px; }
.view_renew .lbx .txts{ width: 100%; height: 225px; font-size: 19px; line-height: calc(36 / 19); margin-top: 10px; overflow-y: scroll; padding-right: 10px; box-sizing: border-box; word-break: keep-all; }
.view_renew .lbx .txts::-webkit-scrollbar { width: 8px; }
  
.view_renew .lbx .txts::-webkit-scrollbar-thumb { background-color: #0f9fff; border-radius: 10px; }


.view_renew .rbx{ width: calc(810 / 1280 * 100%); }
.view_renew .rbx .tabs{ display: flex; }
.view_renew .rbx .tabs span{ padding-right: 10px; margin-right: 10px; position: relative; display: inline-block; color: rgba(0,0,0,0.3); }
.view_renew .rbx .tabs span:first-of-type::after{ content: ''; display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-color: rgba(0,0,0,0.3); width: 1px; height: 16px; }
.view_renew .rbx .tabs span.on{ color: #000; }
.view_renew .rbx .tab{ width: 100%; margin-top: 20px; }
/* .view_renew .rbx .tab.on{ display: block; } */
.view_renew .rbx .tab .large{ background-size: cover; background-repeat: no-repeat; background-position: center; }
.view_renew .rbx .tab .large::after{ content: ''; display: block; padding-bottom: calc(531 / 808 * 100%); }
.view_renew .rbx .tab .smallSW{ width: 100.1%; overflow: hidden; margin-top: 10px; }
.view_renew .rbx .tab .smallSW .swiper-slide{ overflow: hidden; border: 5px solid #9e9e9f; box-sizing: border-box; transition-duration: 0.2s; cursor: pointer; }
.view_renew .rbx .tab .smallSW .swiper-slide .small{ width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0.5; transition-duration: 0.2s; }
.view_renew .rbx .tab .smallSW .swiper-slide .small::after{ content: ''; display: block; padding-bottom: calc(96 / 147 * 100%); }

.view_renew .rbx .tab .smallSW .swiper-slide.on{ border-color: #0f9fff; }
.view_renew .rbx .tab .smallSW .swiper-slide.on .small{ opacity: 1; }

@media screen and (min-width: 821px){
    .view_renew .rbx .tab .smallSW .swiper-slide:hover{ border-color: #0f9fff; }
    .view_renew .rbx .tab .smallSW .swiper-slide:hover .small{ opacity: 1; }
}


.view_renew .rbx .file{ display: block; width: 100%; background-color: #e5e5e6; display: flex; justify-content: center; align-items: center; padding: 10px 0; margin-top: 13px; }
.view_renew .rbx .file .pdficon{ flex-shrink: 0; }
.view_renew .rbx .file p{ font-size: 22px; margin-left: 13px; }
.view_renew .rbx .goto{ display: block; width: 200px; border: 1px solid #000; box-sizing: border-box; margin-top: 45px; margin-left: auto; padding: 15px 0; text-align: center; }



@media screen and (max-width: 1280px){
    .view_renew .lbx .productInfo dl dt{ font-size: 45px; }
    .view_renew .lbx .productInfo dl dd{ font-size: 20px; }
    .view_renew .lbx .productInfo .infor li{ font-size: 18px; }
    .view_renew .lbx .txts{ font-size: 16px; line-height: 1.4; }
    .view_renew .rbx .file .pdficon{ width: 30px; }
    .view_renew .rbx .file p{ font-size: 18px; }
    .view_renew .rbx .tab .smallSW .swiper-slide{ border-width: 2px; }
}

@media screen and (max-width: 820px){
    .view_renew{ padding-top: 70px; padding-bottom: 100px; }
    .view_renew .wrap{ display: block; }
    .view_renew .lbx{ width: 100%; }
    .view_renew .lbx .brandLogo span{ font-size: 16px; }
    .view_renew .lbx .brandLogo .png{ height: 20px; }
    .view_renew .lbx .productInfo dl{ margin-top: 15px; }
    .view_renew .lbx .productInfo dl dt{ font-size: 35px; }
    .view_renew .lbx .productInfo dl dd{ font-size: 16px; margin-top: 5px; }
    .view_renew .lbx .productInfo .infor{ display: flex; justify-content: space-between; flex-wrap: wrap; }
    .view_renew .lbx .productInfo .infor li{ width: 49%; margin-bottom: 30px; font-size: 16px; }
    .view_renew .lbx .txts{ height: 8.5em; font-size: 14px; }
    .view_renew .rbx{ width: 100%; margin-top: 50px; }
    .view_renew .rbx .file p{ font-size: 16px; }
    .view_renew .rbx .goto{ width: 160px; }
}

@media screen and (max-width: 400px){
    .view_renew .lbx .brandLogo span{ font-size: 14px; }
    .view_renew .lbx .productInfo dl dt{ font-size: 28px; }
    .view_renew .lbx .productInfo dl dd{ font-size: 14px; }
    .view_renew .lbx .productInfo .infor li{ width: 100%; font-size: 14px; margin-bottom: 20px; }
    .view_renew .rbx{ margin-top: 30px; }
    .view_renew .rbx .tabs span{ font-size: 14px; }
    .view_renew .rbx .tab{ margin-top: 10px; }
    .view_renew .rbx .file p{ font-size: 14px; }
    .view_renew .rbx .goto{ width: 120px; font-size: 14px; padding: 10px 0; margin-top: 30px; }

}

@media screen and (max-width: 500px){
    .com .maptab .tablist li.map05 {
        top: 22%;
        right: 23%;
    }
}