/*
	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 .com_sub_tit01{ background:url('../_img/sub/intro_sec01_logo.png') no-repeat right center;}
#intro_sec01 p span{ display:block; margin-bottom:3rem; font-size:2rem; font-weight:300; }
#intro_sec01 p span:last-child{ margin-bottom:0;}

#intro_sec02{ position:relative; padding:10rem 0 0;}
#intro_sec02 .com_sub_tit01{ margin-bottom:3rem;}
#intro_sec02:after{ content:""; z-index:-1; position:absolute; top:0; left:50%; width:100vw; height:88%; background:#f6f6f6;
    -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%);
}
#intro_sec02 .root_daum_roughmap{ width:100%; height:46rem; margin-bottom:7rem; border-radius:1.5rem;  }
#intro_sec02 .root_daum_roughmap .wrap_map{ height:100%;}
#intro_sec02 .root_daum_roughmap .map_border{ display:none; }
#intro_sec02 .info_list{ display:flex; flex-wrap:wrap;}
#intro_sec02 .info_list li{ width:calc((100% - 7.5rem) / 4); padding:7rem 15px; margin-right:2.5rem; background:#fff; text-align:center; border-radius:1rem; box-shadow:0 0 2rem rgba(0,0,0,.07);  }
#intro_sec02 .info_list li:last-child{ margin-right:0;}
#intro_sec02 .info_list li b{ display:block; margin:1rem 3rem; font-size:1.8rem; color:#888; font-weight:500;  }
#intro_sec02 .info_list li strong{ font-size:2rem; line-height:1.4; }

@media all and (max-width:1199.98px) {
    #intro_sec01 .com_sub_tit01{ background-size:25rem; }
    #intro_sec01 p span{ margin-bottom:2rem; font-size:1.8rem;}
    #intro_sec01 p span br{ display:none; }

    #intro_sec02{ padding:8rem 0 0;}
    #intro_sec02 .root_daum_roughmap{ margin-bottom:5rem;  height:35rem;}
    #intro_sec02 .info_list li{ width:calc((100% - 4.5rem) / 4); margin-right:1.5rem; padding:5rem 15px; }
    #intro_sec02 .info_list li b{ font-size:1.6rem;}
    #intro_sec02 .info_list li strong{ font-size:1.8rem;}
}

@media all and (max-width:991.98px) {
    #intro_sec01 .com_sub_tit01{ background:none; }
    #intro_sec01 p span{ font-size:1.6rem;}

    #intro_sec02{ padding:6rem 0 0;}
    #intro_sec02 .com_sub_tit01{ margin-bottom:3rem;}
    #intro_sec02 .root_daum_roughmap{ margin-bottom:3rem;  height:25rem;}
}

@media all and (max-width:575.98px) {
    #intro_sec02 .info_list{ margin-bottom:-1.5rem;}
    #intro_sec02 .info_list li{ width:calc((100% - 1.5rem) / 2); margin-bottom:1.5rem; }
    #intro_sec02 .info_list li:nth-child(2n+2){ margin-right:0;}
}


/*렌탈서비스*/
#rental_sec01 > p{ margin-bottom:6rem;font-size:2rem; font-weight:300; }
#rental_sec01 .step_area{ position:relative;  text-align:center; padding-bottom:10rem;}
#rental_sec01 .step_area:after{ content:""; z-index:-1; position:absolute; top:20%; left:50%; width:100vw; min-width:280px;  height:80%; background:#f6f6f6 url('../_img/sub/rental_sec01_bak.png') no-repeat left 5% bottom; 
    -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%);
}
#rental_sec01 .step_area ol{ width:50%; margin-top:5rem; margin-left:auto; text-align:left; border-top:1px solid #ddd; counter-reset: num; }
#rental_sec01 .step_area ol li{ padding:2rem 0; border-bottom:1px solid #ddd; }
#rental_sec01 .step_area ol li p{ position:relative; padding-left:14rem; font-size:1.8rem; }
#rental_sec01 .step_area ol li b{ position:absolute; top:0; left:0; padding-left:2rem; font-size:2rem; }
#rental_sec01 .step_area ol li b:before{ content:counter(num); counter-increment:num; position:absolute; top:0; left:0; color:#e6242e;}

#rental_sec02 ul{ display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:-4rem; text-align:center; }
#rental_sec02 ul li{ width:calc((100% - 8rem) / 3); margin-right:4rem; margin-bottom:4rem; padding:6rem 15px;  border:1px solid #ddd; border-radius:1.5rem;  }
#rental_sec02 ul li:last-child{ margin-right:0; }
#rental_sec02 ul li strong{ display:block; margin-bottom:3rem; font-size:5rem; line-height:1.2; }
#rental_sec02 ul li strong span{ display:block; margin-bottom:1rem; font-size:1.8rem; }
#rental_sec02 ul li b{ display:block; margin-bottom:2rem; font-size:2.6rem;  }
#rental_sec02 ul li p{ font-size:1.8rem; color:#555; font-weight:300;}

#rental_sec03 .bnr_area{ margin-bottom:5rem;  height:34rem; border-radius:1.5rem; background:url('../_img/sub/rental_sec03_bak.jpg') no-repeat center / cover;}
#rental_sec03 > ol{ display:flex; flex-wrap:wrap; margin-bottom:-3rem; counter-reset: num;}
#rental_sec03 > ol li{ width:calc((100% - 3rem) / 2); margin-right:3rem; margin-bottom:3rem; padding:5rem 3rem; border-radius:1.5rem; background-color:#f7f7f7; background-position:right 3rem top 5rem; background-repeat:no-repeat;  background-size:auto 7.5rem;  }
#rental_sec03 > ol li:nth-child(1){ background-image:url('../_img/sub/rental_sec03_ico01.png');}
#rental_sec03 > ol li:nth-child(2){ background-image:url('../_img/sub/rental_sec03_ico02.png');}
#rental_sec03 > ol li:nth-child(3){ background-image:url('../_img/sub/rental_sec03_ico03.png');}
#rental_sec03 > ol li:nth-child(4){ background-image:url('../_img/sub/rental_sec03_ico04.png');}
#rental_sec03 > ol li:nth-child(5){ background-image:url('../_img/sub/rental_sec03_ico05.png');}
#rental_sec03 > ol li:nth-child(6){ background-image:url('../_img/sub/rental_sec03_ico06.png');}
#rental_sec03 > ol li:nth-child(2n+2){ margin-right:0;}
#rental_sec03 > ol li strong{ display:block; margin-bottom:1rem; font-size:2.6rem; line-height:1.4; }
#rental_sec03 > ol li strong:before{ content:"0"counter(num); counter-increment:num; display:block; margin-bottom:1rem; font-weight:900; font-size:2rem; color:#e6242e; }
#rental_sec03 > ol li p{ font-size:1.8rem; color:#666; font-weight:300; }
#rental_sec03 > ol li p.dot_p{ padding-left:1.5rem; text-indent:-1rem;}

#rental_sec04 p{  font-size:1.8rem; font-weight:600; text-align:center;}
#rental_sec04 .bnr_area{ padding:6rem 0; margin-bottom:3rem; background:url('../_img/sub/rental_sec04_bak.jpg') no-repeat center / cover; }
#rental_sec04 .bnr_area > div{ display:flex; flex-wrap:wrap;}
#rental_sec04 .bnr_area .item{ width:50%; }
#rental_sec04 .bnr_area .item *{ color:#fff;}
#rental_sec04 .bnr_area .item:first-child{ position:relative; padding-right:6rem; border-right:1px solid rgba(255,255,255,.3); }
#rental_sec04 .bnr_area .item:first-child:after{ content:""; position:absolute; top:50%; right:-.6rem; width:1.2rem; height:1.4rem; margin-top:-.7rem; background:url('../_img/sub/rental_sec04_ico.png') no-repeat center / 100%; }
#rental_sec04 .bnr_area .item:last-child{ padding-left:6rem;}
#rental_sec04 .bnr_area .item h3{ margin-bottom:2rem; font-size:4rem; font-weight:300;}
#rental_sec04 .bnr_area .item h3 b{ font-weight:700;}
#rental_sec04 .bnr_area .item p{ padding-left:1.5rem; text-indent:-1rem; font-weight:300; text-align:left; }


@media all and (max-width:1199.98px) {
    #rental_sec01 > p{ margin-bottom:4rem; font-size:1.8rem;}
    #rental_sec01 .step_area{ padding-bottom:8rem;}
    #rental_sec01 .step_area ol li p{ padding-left:12rem; font-size:1.6rem;}
    #rental_sec01 .step_area ol li b{ font-size:1.8rem;}

    #rental_sec02 ul{ margin-bottom:-1.5rem;}
    #rental_sec02 ul li{ width:calc((100% - 3rem) / 3); margin-right:1.5rem; margin-bottom:1.5rem; padding:4rem 15px;  }
    #rental_sec02 ul li strong{ margin-bottom:2rem; font-size:4rem;}
    #rental_sec02 ul li strong span{ font-size:1.6rem;}
    #rental_sec02 ul li b{ margin-bottom:1rem; font-size:2rem;}
    #rental_sec02 ul li p{ font-size:1.6rem;}
    #rental_sec02 ul li p br{ display:none;}

    #rental_sec03 .bnr_area{ margin-bottom:3rem; height:28rem;}
    #rental_sec03 > ol{ margin-bottom:-1.5rem;}
    #rental_sec03 > ol li{  width:calc((100% - 1.5rem) / 2); margin-right:1.5rem; margin-bottom:1.5rem; padding:3rem; background-image:none !important; }
    #rental_sec03 > ol li strong{ font-size:2rem;}
    #rental_sec03 > ol li strong:before{ font-size:1.8rem;}
    #rental_sec03 > ol li strong br{ display:none; }
    #rental_sec03 > ol li p{ font-size:1.6rem;}

    #rental_sec04 p{ font-size:1.6rem;}
    #rental_sec04 .bnr_area .item:first-child{ padding-right:3rem;}
    #rental_sec04 .bnr_area .item:last-child{ padding-left:3rem;}
    #rental_sec04 .bnr_area .item h3{ font-size:3rem;}
}

@media all and (max-width:991.98px) {
    #rental_sec01 > p{ margin-bottom:3rem; font-size:1.6rem;}
    #rental_sec01 .step_area{ padding-bottom:6rem;}
    #rental_sec01 .step_area > img{ max-width:200px; }
    #rental_sec01 .step_area ol{ width:100%;}

    #rental_sec02 ul li strong{  font-size:3rem;}
    #rental_sec02 ul li b{  font-size:1.8rem;}

    #rental_sec04 .bnr_area .item h3{ font-size:2.5rem;}
}

@media all and (max-width:767.98px) {
    #rental_sec01 .step_area:after{ background-size:auto 40%;}

    #rental_sec02 ul li{ width:100%; margin-right:0;}

    #rental_sec03 .bnr_area{ margin-bottom:1.5rem; height:0; padding-top:50%;}
    #rental_sec03 > ol li{ width:100%; margin-right:0;}

    #rental_sec04 .bnr_area .item{ width:100%;}
    #rental_sec04 .bnr_area .item:first-child,
    #rental_sec04 .bnr_area .item:last-child{ padding:0; }
    #rental_sec04 .bnr_area .item:first-child{ border-right:0; padding-bottom:3rem; margin-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.3);}
    #rental_sec04 .bnr_area .item:first-child:after{ top:100%; left:50%; right:unset; margin-left:-.6rem;  }
}

/*부품판매*/
#sale_sec01 > ol{ position:relative; display:flex; flex-wrap:wrap; padding-bottom:23rem; counter-reset:num;}
#sale_sec01 > ol:after{ content:""; z-index:-1; position:absolute; top:15%; left:50%; width:100vw; min-width:280px;  height:85%; background:#f6f6f6 url('../_img/sub/rental_sec01_bak.png') no-repeat left 5% bottom; 
    -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%);
}
#sale_sec01 > ol > li{ width:calc((100% - 12rem) / 2); margin-right:12rem; margin-bottom:7rem;}
#sale_sec01 > ol > li:nth-child(2n+2){ margin-right:0; -moz-transform:translateY(10rem); -webkit-transform:translateY(10rem); transform:translateY(10rem); }
#sale_sec01 > ol > li .img_area{ padding-top:70%; border-radius:1.5rem; background-color:#ddd; background-position:center; background-repeat:no-repeat; background-size:cover; }
#sale_sec01 > ol > li:nth-child(1) .img_area{ background-image:url('../_img/sub/sale_sec01_img01.jpg'); }
#sale_sec01 > ol > li:nth-child(2) .img_area{ background-image:url('../_img/sub/sale_sec01_img02.jpg'); }
#sale_sec01 > ol > li:nth-child(3) .img_area{ background-image:url('../_img/sub/sale_sec01_img03.jpg'); }
#sale_sec01 > ol > li:nth-child(4) .img_area{ background-image:url('../_img/sub/sale_sec01_img04.jpg'); }
#sale_sec01 > ol > li strong{ display:block; margin-top:2rem; font-size:2rem; }
#sale_sec01 > ol > li strong:before{ content:"0" counter(num); margin-right:1rem; counter-increment:num; color:#e6242e; }

@media all and (max-width:1199.98px) {
    #sale_sec01 > ol{ padding-bottom:21rem;}
    #sale_sec01 > ol > li{ width:calc((100% - 6rem) / 2); margin-right:6rem; }
}

@media all and (max-width:991.98px) {
    #sale_sec01 > ol{ padding-bottom:20rem;}
    #sale_sec01 > ol > li{ width:calc((100% - 3rem) / 2); margin-right:3rem; }
    #sale_sec01 > ol > li strong{ font-size:1.8rem;}
}

@media all and (max-width:767.98px) {
    #sale_sec01 > ol{ padding-bottom:8rem;}
    #sale_sec01 > ol:after{ background-size:60% auto ;}
    #sale_sec01 > ol > li{ width:100%; margin-right:0; margin-bottom:3rem;}
    #sale_sec01 > ol > li:last-child{ margin-bottom:0;}
    #sale_sec01 > ol > li:nth-child(2n+2){  -moz-transform:translateY(0rem); -webkit-transform:translateY(0rem); transform:translateY(0rem); }
}




/* 리튬 지게차 */
#lithium_sec01 .com_sub_tit01 .tit span{font-weight: 400;}
#lithium_sec01 .features_area{
    position: relative;
    padding-top: 11rem;
    padding-bottom: 12.5rem;
}
#lithium_sec01 .features_area:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0%;
    left: 50%;
    width: 100vw;
    min-width: 280px;
    height: 100%;
    background: #f6f6f6 url(../_img/sub/lithium_sec01_ci.png) no-repeat right 5% bottom;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
#lithium_sec01 .features_area h4{
    margin-bottom: 7rem;
    text-align: center;
}
#lithium_sec01 .features_area .img{text-align: center;}
#lithium_sec01 .features_area .img img{max-width: 1312px;}
#lithium_sec02 .com_sub_tit01 h3,
#lithium_sec03 .com_sub_tit01 h3{font-size: 4rem;}
#lithium_sec02 .list_area{
    display: flex;
    gap: 4rem;
    margin-bottom: 7rem;
}
#lithium_sec02 .list_area dl{
    padding: 4.5rem 1rem;
    width: calc(25% - 3rem);
    text-align: center;
    border-radius: 1.5rem;
    border: 1px solid #e5e5e5;
}
#lithium_sec02 .list_area dl dt{
    font-size: 3.6rem;
    color: #e6242e;
}
#lithium_sec02 .list_area dl dd{
    font-size: 2rem;
    font-weight: 500;
}

#lithium_sec02 .graph_area,
#lithium_sec03 .graph_area > div{
    display: flex;
    justify-content: space-between;
}
#lithium_sec02 .graph_area .left,
#lithium_sec03 .graph_area .left{
    width: 67.5%;
}
#lithium_sec02 .graph_area .right,
#lithium_sec03 .graph_area .right{
    width: 30.35%;
}
#lithium_sec02 .graph_area .title,
#lithium_sec03 .graph_area .title{
    margin-bottom: 3rem;
    padding: 2rem 0;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    border-radius: 1.5rem;
}
#lithium_sec02 .graph_area .left .title,
#lithium_sec03 .graph_area .left .title{
    margin-left: 7rem;
    border: 1px solid #eeeeee;
    background: #f7f7f7;
}
#lithium_sec02 .graph_area .right .title,
#lithium_sec03 .graph_area .right .title{
    color: #fff;
    border: 1px solid #e6242e;
    background: #e6242e;
}
#lithium_sec02 .graph_area .desc,
#lithium_sec03 .graph_area .desc{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    border: 2px solid #ededed;
}
#lithium_sec02 .graph_area .desc{height: 28.7rem;}
#lithium_sec03 .graph_area .desc{height: 35.5rem;}
#lithium_sec02 .graph_area .desc p,
#lithium_sec03 .graph_area .desc p{
    position: relative;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 500;
}
#lithium_sec02 .graph_area .desc p::after,
#lithium_sec03 .graph_area .desc p::after{
    content: url(../_img/sub/lithium_icon.png);
    position: absolute;
    bottom: -1.5rem;
    right: -6.5rem;
}
#lithium_sec02 .graph_area .desc p b:last-of-type,
#lithium_sec03 .graph_area .desc p b:last-of-type{font-size: 2.6rem;}

#lithium_sec03 .graph_area > p{
    margin-top: 4.5rem;
    margin-left: 7rem;
    font-size: 1.8rem;
    color: #666666;
}
@media (max-width: 1199.98px){
    #lithium_sec01 .features_area {
        padding-top: 8rem;
        padding-bottom: 9.5rem;
    }

    #lithium_sec02 .com_sub_tit01 h3,
    #lithium_sec03 .com_sub_tit01 h3{font-size: 3rem;}
    #lithium_sec01 .features_area h4,
    #lithium_sec02 .list_area{margin-bottom: 6rem;}

    #lithium_sec02 .graph_area .title, 
    #lithium_sec03 .graph_area .title {
        margin-bottom: 2rem;
        padding: 1rem 0;
        font-size: 1.6rem;
    }
    #lithium_sec03 .graph_area .title{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 7.5rem;
    }
    #lithium_sec02 .graph_area .left .title, 
    #lithium_sec03 .graph_area .left .title {
        margin-left: 5rem;
    }
    #lithium_sec02 .graph_area .desc p, 
    #lithium_sec03 .graph_area .desc p {
        font-size: 1.8rem;
    }
    #lithium_sec02 .graph_area .desc p::after, 
    #lithium_sec03 .graph_area .desc p::after {
        right: -5rem;
        transform: scale(.6);
    }
    #lithium_sec02 .graph_area .desc p b:last-of-type, 
    #lithium_sec03 .graph_area .desc p b:last-of-type {
        font-size: 2rem;
    }
    #lithium_sec02 .graph_area .desc {
        height: 20.3rem;
    }
    #lithium_sec03 .graph_area .desc {
        height: 24.8rem;
    }
    #lithium_sec03 .graph_area > p {
        margin-top: 3.5rem;
        margin-left: 5rem;
        font-size: 1.6rem;
    }
}
@media (max-width: 991.98px){
    #lithium_sec01 .features_area {
        padding-top: 6rem;
        padding-bottom: 7.5rem;
    }
    #lithium_sec01 .features_area .img img{max-width: 450px;}

    #lithium_sec02 .com_sub_tit01 h3,
    #lithium_sec03 .com_sub_tit01 h3{font-size: 2.5rem;}
    #lithium_sec01 .features_area h4,
    #lithium_sec02 .list_area{margin-bottom: 5rem;}
    #lithium_sec02 .list_area{flex-wrap: wrap; gap: 3rem;}
    #lithium_sec02 .list_area dl{
        padding: 3rem 1rem;
        width: calc(50% - 2rem);
    }
    #lithium_sec02 .list_area dl dt{font-size: 3rem;}
    #lithium_sec02 .list_area dl dd{font-size: 1.8rem;}

    #lithium_sec02 .graph_area,
    #lithium_sec03 .graph_area > div{
        display: block;
    }
    #lithium_sec02 .graph_area > div,
    #lithium_sec03 .graph_area > div > div{
        width: 100% !important;
    }
    #lithium_sec02 .graph_area .left, 
    #lithium_sec03 .graph_area .left {
        text-align: center;
        margin-bottom: 3rem;
    }
    #lithium_sec02 .graph_area .left .title, 
    #lithium_sec03 .graph_area .left .title {
        margin-left: 0;
    }
    #lithium_sec03 .graph_area .title{
        min-height: unset;
    }
    #lithium_sec02 .graph_area .desc,
    #lithium_sec03 .graph_area .desc {
        padding: 3rem 0;
        height: auto;
    }
    #lithium_sec03 .graph_area > p {
        margin-left: 0;
    }
    #lithium_sec02 .graph_area .left img,
    #lithium_sec03 .graph_area .left img{max-width: 350px;}
}
@media (max-width: 767.98px){
    #lithium_sec01 .features_area:after{background-size: auto 40%;}
}
@media (max-width: 575.98px){
    #lithium_sec01 .features_area .img img{max-width: 400px;}
    #lithium_sec02 .graph_area .left img,
    #lithium_sec03 .graph_area .left img{max-width: 250px;}
}