/*
	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';


/*회사소개*/
#about_sec01{ position:relative; }
#about_sec01 .move_box{  font-size:18rem; color:#f4f5f7; font-weight:900; line-height:1; white-space: nowrap; }
#about_sec01 h2{ margin-top:-7rem; font-size:7rem; font-weight:700; margin-bottom:10rem; }
#about_sec01 .content_box{ text-align:right; }
#about_sec01 .content_box h3{ position:relative; display:inline-block; font-size:3.6rem; line-height:1.4; }
#about_sec01 .content_box h3:after{ content:""; display:block; width:10rem; height:.2rem; background:#000; margin:5rem 0 5rem auto; }
#about_sec01 .content_box h3:before{ z-index:-1; content:""; position:absolute; bottom:6rem; right:93%; width:18rem; height:18rem; background:url('../_img/sub/about_circle.png') no-repeat center / 100%; }
#about_sec01 .content_box p span{ display:block; font-size:1.8rem; margin-bottom:3rem; font-weight:300; }
#about_sec01 .content_box p span:last-child{ margin-bottom:0;}
#about_sec01 .stroke_box{ display:block; margin-top:10rem; font-size:10rem; color:#fff; -webkit-text-stroke: 1px #ddd;  white-space: nowrap; font-weight:900; }

@media all and (max-width:1199.98px) {
    #about_sec01 .move_box{ font-size:13rem;}
    #about_sec01 h2{ font-size:5rem;}
    #about_sec01 .content_box h3{ font-size:3rem;}
    #about_sec01 .stroke_box{ margin-top:5rem; font-size:7rem;}
}

@media all and (max-width:991.98px) {
    #about_sec01 .move_box{ font-size:10rem;}
    #about_sec01 h2{ font-size:4rem; margin-top:-3rem; margin-bottom:5rem; }
    #about_sec01 .content_box h3{ font-size:2.5rem;}
    #about_sec01 .content_box h3:after{ margin:3rem 0 3rem auto; width:5rem;}
    #about_sec01 .stroke_box{ font-size:5rem;}
}

@media all and (max-width:767.98px) {
    #about_sec01 .content_box{ text-align: left;}
    #about_sec01 .content_box h3:after{ margin:3rem 0 3rem 0;}
    #about_sec01 .content_box h3:before{ content:none; }
    #about_sec01 .content_box p br{ display:none; }
}


/*제공서비스*/
#offer_sec01 > div{ position:relative; padding-top:4rem; padding-bottom:4rem;}
#offer_sec01 > div:not(.container){ padding:4rem 0; background:#5b6478; }

#offer_sec01 > div .stroke_box{ z-index:-1; position:absolute; bottom:1rem; left:70%; color:#fff; font-size:10rem; line-height: 1; -webkit-text-stroke: 1px #ddd;  white-space: nowrap; font-weight:900; }
#offer_sec01 .offer_list{ position:relative;}
#offer_sec01 .offer_list01:after{ content:""; position:absolute; top:-4rem; right:0; width:38.6rem; height:33.1rem; background:url('../_img/sub/offer_bak.png') no-repeat center / 100%;}

#offer_sec01 .offer_list > li{ display:flex; flex-wrap: wrap; padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px dashed #ddd;}
#offer_sec01 .offer_list > li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0;  }
#offer_sec01 .offer_list .ico_box{ width:10rem; height:10rem; border-radius:100%; background-color:#5b6478; background-repeat: no-repeat; background-position: center; background-size:100%; }
#offer_sec01 .offer_list02 .ico_box{ background-color:#fff; }
#offer_sec01 .offer_list .ico_box1{ background-image:url('../_img/sub/offer_ico01.png');}
#offer_sec01 .offer_list .ico_box2{ background-image:url('../_img/sub/offer_ico02.png');}
#offer_sec01 .offer_list .ico_box3{ background-image:url('../_img/sub/offer_ico03.png');}
#offer_sec01 .offer_list .ico_box4{ background-image:url('../_img/sub/offer_ico04.png');}
#offer_sec01 .offer_list .ico_box5{ background-image:url('../_img/sub/offer_ico05.png');}
#offer_sec01 .offer_list .txt_box{ width:calc(100% - 10rem); padding-left:2rem; padding-top:3rem;}
#offer_sec01 .offer_list .txt_box > div{  display:flex; flex-wrap:wrap; align-items:center;}
#offer_sec01 .offer_list .txt_box > div > b,
#offer_sec01 .offer_list .txt_box > div > h3,
#offer_sec01 .offer_list .txt_box > div > a{ display:inline-block; margin-bottom:1rem;  }
#offer_sec01 .offer_list .txt_box > div > b{ font-size:3rem; color:#ddd; font-weight:800; line-height:1; margin-right:1rem; }
#offer_sec01 .offer_list .txt_box > div > h3{ font-size:2.5rem; margin-right:1rem; }
#offer_sec01 .offer_list02 .txt_box > div > h3{ color:#fff; }
#offer_sec01 .offer_list .txt_box  ul{ width:100%; margin-top:2rem;  }

#offer_sec01 .offer_list .img_list{ font-size:0;}
#offer_sec01 .offer_list .img_list li{ display:inline-block; width:calc(50% - .75rem); max-width:32rem; margin-right: 1.5rem; border:2px solid #ddd; }
#offer_sec01 .offer_list .img_list li:last-child{ margin-right:0;}

#offer_sec01 .offer_list .txt_list li{ padding-left:1.5rem; font-size:1.8rem; color:#fff; text-indent: -1rem; margin-bottom:1rem; font-weight:300; }
#offer_sec01 .offer_list .txt_list li:last-child{ margin-bottom:0;}

#offer_pop,
#offer_form{ padding:0 15px !important;}



@media all and (max-width:1199.98px) {
    #offer_sec01 .offer_list01:after{ content:none; }

    #offer_sec01 .offer_list .ico_box{ width:6rem; height:6rem; }
    #offer_sec01 .offer_list .txt_box{ width:calc(100% - 6rem); padding:1.5rem 0 0 1rem; }
    #offer_sec01 .offer_list .txt_box > div > b{ font-size:2.5rem;}
    #offer_sec01 .offer_list .txt_box > div > h3{ font-size:2rem;}
    
    #offer_sec01 .offer_list .txt_list li{ font-size:1.6rem;}
}
@media all and (max-width:767.98px) {
    #offer_sec01 .offer_list .txt_box  ul{ margin-top:1rem;}
}


/*판매제품 소개*/
#sell_sec01 > div,
#sell_sec02 > div,
#sell_sec03 > div{ position:relative; padding:10rem 15px; }
.sell_tit{ position:absolute; top:0; left:50%; width:100%; max-width:23rem;  padding:1rem 0; font-size:2.8rem; color:#fff; background:#031d33; border-radius:3rem; text-align: center;
    transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%);
}
#sell_sec02 .sell_tit{ background:#646d7f; }

#sell_sec01{ background:#f7f7f7; margin-bottom:15rem; }
#sell_sec01 > div:after{ content:""; position:absolute; bottom:-6rem; right:0; width:54.7rem; height:37.9rem; background:url('../_img/sub/sell_bak02.png') no-repeat center / 100%;  }
#sell_sec01 .point_box{ position:relative; border:.8rem solid #ddd; padding:7rem; margin:5rem 0; line-height:1.4;}
#sell_sec01 .point_box:after{ content:""; position:absolute; top:50%; right:0; width:57.2rem; height:52.8rem; background:url('../_img/sub/sell_bak01.png') no-repeat center / 100%; 
    transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%);
}
#sell_sec01 .point_box strong{ display:block; font-size:5rem; margin-bottom:2rem; }
#sell_sec01 .point_box p{ font-size:4rem; font-weight: 700; }
#sell_sec01 > div > strong{ display:block; font-size:3rem; margin-bottom:2rem;}
#sell_sec01 > div > p{ font-size:1.8rem; margin-bottom:1rem;}
#sell_sec01 > div > ul{ display:flex; flex-wrap: wrap; }
#sell_sec01 > div > ul li{ width:9rem; text-align: center; margin:2rem 1.5rem 0 0;}
#sell_sec01 > div > ul li .ico_box{ padding-top:100%; margin-bottom:1rem;  border-radius:100%; background-color:#fff; background-position:center; background-repeat: no-repeat; background-size:100%;}
#sell_sec01 > div > ul li .ico_box1{ background-image:url('../_img/sub/sell_ico01.png');}
#sell_sec01 > div > ul li .ico_box2{ background-image:url('../_img/sub/sell_ico02.png');}
#sell_sec01 > div > ul li .ico_box3{ background-image:url('../_img/sub/sell_ico03.png');}
#sell_sec01 > div > ul li .ico_box4{ background-image:url('../_img/sub/sell_ico04.png');}
#sell_sec01 > div > ul li .ico_box5{ background-image:url('../_img/sub/sell_ico05.png');}
#sell_sec01 > div > ul li strong{ display:block; font-size:1.6rem; color:#666; line-height:1.4; font-weight:500;}


#sell_sec02{ border-top:1px solid #ddd; }
#sell_sec02 .sell_list li{ display:flex; flex-wrap: wrap; align-items: center;}
#sell_sec02 .sell_list li:nth-child(even){ position:relative; padding:5rem 0; margin:5rem 0;}
#sell_sec02 .sell_list li:nth-child(even):after{ content:""; position:absolute; top:0; left:50%; width:100vw; height:100%; background:#f9f9f9;
    transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%);
}
#sell_sec02 .sell_list li:nth-child(odd){ flex-direction: row-reverse;}
#sell_sec02 .sell_list li .img_box{ z-index:1; position:relative; width:52rem; height:32rem;}
#sell_sec02 .sell_list li:nth-child(even) .img_box{ padding:0 2rem 2rem 0;}
#sell_sec02 .sell_list li:nth-child(odd) .img_box{ padding:0 0 2rem 2rem;}
#sell_sec02 .sell_list li .img_box:after{ content:""; position:absolute; border:1px solid #ddd; top:2rem; bottom:0; }
#sell_sec02 .sell_list li:nth-child(even) .img_box:after{  left:2rem; right:0;}
#sell_sec02 .sell_list li:nth-child(odd) .img_box:after{  right:2rem; left:0; }
#sell_sec02 .sell_list li .img_box div{ z-index:1;  position:absolute; top:0; bottom:2rem;  background-position:center; background-size:cover;}
#sell_sec02 .sell_list li:nth-child(even) .img_box div{ left:0; right:2rem;}
#sell_sec02 .sell_list li:nth-child(odd) .img_box div{right:0; left:2rem;}
#sell_sec02 .sell_list li .img_box1 div{ background-image:url('../_img/sub/sell_img01.png');}
#sell_sec02 .sell_list li .img_box2 div{ background-image:url('../_img/sub/sell_img03.png');}
#sell_sec02 .sell_list li .img_box3 div{ background-image:url('../_img/sub/sell_img02.png');}
#sell_sec02 .sell_list li .txt_box{ z-index:1; position:relative; width:calc(100% - 52rem); }
#sell_sec02 .sell_list li:nth-child(even) .txt_box{ padding-left:5rem;}
#sell_sec02 .sell_list li:nth-child(odd) .txt_box{ padding-right:5rem; }
#sell_sec02 .sell_list li .txt_box strong{ display:block; font-size:3rem; line-height:1.4; margin-bottom:1rem;}
#sell_sec02 .sell_list li .txt_box p{ font-size:1.8rem;}

#sell_sec03{ border-top:1px solid #ddd;}
#sell_sec03 .content_box{ display:flex; flex-wrap: wrap;}
#sell_sec03 .content_box > div{ width:50%; }
#sell_sec03 .content_box .img_box{ position:relative; padding:3rem 7rem 0 0;}
#sell_sec03 .content_box .img_box:after{ content:""; position:absolute; top:15rem; right:7rem; width:100vw; height:29rem; background:#f5f5f5;}
#sell_sec03 .content_box .img_box img{ position:relative; z-index: 11;}
#sell_sec03 .content_box .txt_box strong{ display:block; font-size:3rem; margin-bottom:3rem; line-height:1.4; }
#sell_sec03 .sell_list > li{ position:relative; padding-left:13rem; font-size:1.8rem; margin-bottom:1rem; }
#sell_sec03 .sell_list > li:last-child{ margin-bottom:0; }
#sell_sec03 .sell_list > li > b{ position:absolute; top:0; left:0; width:11rem; height:3.5rem; line-height:3.5rem; color:#fff; background:#646d7f; border-radius:1.6rem; text-align: center;  }
#sell_sec03 .sell_list > li li{ padding-left:1rem; text-indent: -1rem;}
#sell_sec03 .com_link01{ margin-top:3rem; }


@media all and (max-width:1300px) {
    #sell_sec02 .sell_list li .txt_box p br{ display:none; }
}
@media all and (max-width:1199.98px) {
    #sell_sec01 > div,
    #sell_sec02 > div,
    #sell_sec03 > div{ padding:7rem 15px; }
    .sell_tit{ font-size:2.3rem;}

    #sell_sec01{ margin-bottom:10rem;}
    #sell_sec01 > div:after{ width:34.7rem; height:23.9rem;}
    #sell_sec01 .point_box{ padding:4rem; margin:0 0 3rem 0; }
    #sell_sec01 .point_box:after{ width:27.2rem; height:26.8rem; top:unset; bottom:1rem; right:3rem;
        transform:translateY(0%); -webkit-transform:translateY(0%); -moz-transform:translateY(0%);
    }
    #sell_sec01 .point_box strong{ font-size:4rem;}
    #sell_sec01 .point_box p{ font-size:3rem;}
    #sell_sec01 > div > strong{ font-size:2.5rem;}
    #sell_sec01 > div > ul li{ width:7rem;}

    #sell_sec02 .sell_list li .img_box{ width:47rem; height:27rem;}
    #sell_sec02 .sell_list li .txt_box{ width:calc(100% - 47rem); }
    #sell_sec02 .sell_list li:nth-child(even) .txt_box{ padding-left:3rem;}
    #sell_sec02 .sell_list li:nth-child(odd) .txt_box{ padding-right:3rem; }
    #sell_sec02 .sell_list li .txt_box strong{ font-size:2.5rem;}

    #sell_sec03 .content_box > div{ width:100%;  }
    #sell_sec03 .content_box .img_box{ text-align:center; padding:0 0 3rem 0;  }
    #sell_sec03 .content_box .img_box:after{ content:none; }
}

@media all and (max-width:991.98px) {
    #sell_sec01 > div,
    #sell_sec02 > div,
    #sell_sec03 > div{ padding:5rem 15px; }
    .sell_tit{ font-size:1.8rem;}

    #sell_sec01 .point_box{ padding:3rem;}
    #sell_sec01 .point_box strong{ font-size:3rem;}
    #sell_sec01 .point_box p{ font-size:2.5rem;}
    #sell_sec01 > div > strong{ font-size:2rem;}
    #sell_sec01 > div > p{ font-size:1.6rem;}
    
    #sell_sec02 .sell_list li:nth-child(odd){ flex-direction: row;}
    #sell_sec02 .sell_list li .img_box{ max-width:100%; width:37rem; height:22rem; }
    #sell_sec02 .sell_list li:nth-child(even) .img_box,
    #sell_sec02 .sell_list li:nth-child(odd) .img_box{ padding:0 2rem 2rem 0;}
    #sell_sec02 .sell_list li:nth-child(even) .img_box:after,
    #sell_sec02 .sell_list li:nth-child(odd) .img_box:after{  left:2rem; right:0; }
    #sell_sec02 .sell_list li:nth-child(even) .img_box div,
    #sell_sec02 .sell_list li:nth-child(odd) .img_box div{ left:0; right:2rem;}
    #sell_sec02 .sell_list li .txt_box{ width:100%; margin-top:2rem; }
    #sell_sec02 .sell_list li:nth-child(even) .txt_box{ padding-left:0rem;}
    #sell_sec02 .sell_list li:nth-child(odd) .txt_box{ padding-right:0rem; }
    #sell_sec02 .sell_list li .txt_box strong{ font-size:2rem;}
    #sell_sec02 .sell_list li .txt_box p{ font-size:1.6rem;}

    #sell_sec03 .content_box .txt_box strong{ font-size:2.5rem; }
    #sell_sec03 .sell_list > li{ padding-left:0; font-size:1.6rem; }
    #sell_sec03 .sell_list > li > b{ position:static; display:block; margin-bottom:.5rem; }
}

@media all and (max-width:767.98px) {
    #sell_sec01{ margin-bottom:7rem;}
    #sell_sec01 > div:after{ content:none; }
    #sell_sec01 .point_box:after{ width:17.2rem; height:16.8rem; opacity:0.15; }
    #sell_sec01 .point_box strong,
    #sell_sec01 .point_box p{ position: relative; z-index: 1;}
}

@media all and (max-width:575.98px) {
}