@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */


.history {}
.history .head {height:200px; display:flex; align-items:center;justify-content:center; background:url('../images/sub/sub1_1.jpg') 50% 50% no-repeat ;background-size:cover; margin-bottom:50px;}
.history .head .tit {font-size:70px; line-height:1.4em; color:#fff;font-weight:700; opacity:.4; letter-spacing:1em;}
.history .row {display:flex; flex-wrap:wrap; margin-bottom:40px;}
.history .row:last-child {margin-bottom:0;}
.history .row .year {flex:1 1 200px; max-width:200px; position:relative; padding-top:20px; font-size:26px; line-height:1.4em; color:#4da43b; font-weight:700;}
.history .row .year:before {content:"";position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(to right, #175ea4, #51a739);}
.history .row .info {margin-left:40px; flex:1 1 auto; width:1%; border-top:1px solid #ddd;}
.history .row .info .col {position:relative; border-bottom:1px solid #ddd; padding:20px 0 20px 40px;}
.history .row .info .col .day {position:absolute; top:20px; left:0; font-size:20px ;line-height:1.4em; color:#333;font-weight:500;}
.history .row .info .col ul li {text-indent:-.6em; padding-left:.6em;}

.greeting {display:flex; flex-wrap:wrap;}
.greeting .img {flex:1 1 450px; max-width:450px;}
.greeting .info {margin-left:30px; flex:1 1 auto; width:1%}
.greeting .info strong {display:block; margin-bottom:25px; font-size:22px; line-height:1.4em; color:#2c2c2c;font-weight:700;}
.greeting .info .cnt {margin-bottom:25px;font-size:16px; line-height:1.5em;}
.greeting .info .name {font-weight:500; color:#000;font-size:18px; line-height:1.4em;}


.root_daum_roughmap {width:100% !important; height:476px !important;}
.root_daum_roughmap .wrap_map {height:476px !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"(주)유일기업"; font-size:12px; line-height:15px;}

.map-info {position:relative; margin-top:-72px; padding:0 30px; z-index:10}
.map-info .row {background:#fff; padding:40px 0; display:flex; }
.map-info .row .col {position:relative; width:33.333333%; padding:0 30px;}
.map-info .row .col:after {content:"";position:absolute; top:50%; margin-top:-25px; left:0; width:1px; height:50px; background:#ddd;}
.map-info .row .col:first-child:after {display:none;}
.map-info .row .group {display:flex; }
.map-info .row .group .icon {flex:1 1 50px; max-width:50px;}
.map-info .row .group .info {flex:1 1 auto; width:1%; padding-left:20px;}
.map-info .row .group .tit {font-size:18px; line-height:1.4em;font-weight:700; margin-bottom:10px;}
.map-info .row .group p {font-size:14px; line-height:1.4em; letter-spacing:-.02em;}


.partner-list {}
.partner-list ul {display:flex; flex-wrap:wrap; margin-left:-25px; margin-bottom:-30px;}
.partner-list ul li {width:20%; padding-left:25px; margin-bottom:30px;}
.partner-list .pic {position:relative; height:0; padding-bottom:36.4%; box-shadow:5px 5px 5px rgba(0,0,0,.10); overflow:hidden;}
.partner-list .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.partner-list .pic:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #ddd;}

.doc-cnt {margin-bottom:50px;}
.doc-title {position:relative; padding-left:38px; font-size:22px; line-height:1.4em; color:#2c2c2c; font-weight:500; margin-bottom:20px;}
.doc-title:before {content:"";position:absolute; top:3px; left:0; width:26px; height:26px; background:url('../images/sub/doc_dot.gif') 0 0 no-repeat; background-size:contain}

.business-cnt {}
.business-cnt .cnt {font-size:18px; line-height:1.5em;}
.business-cnt p {font-size:16px; line-height:1.5em; color:#797979; padding-top:15px;}

.business-task {}
.business-task .row {display:flex; flex-wrap:wrap;}
.business-task .col {width:50%; text-align:center;}
.business-task .col:nth-child(1) .tit {background:#1c5f9c}
.business-task .col:nth-child(2) .tit {background:#4ba23d}
.business-task .col .tit {max-width:180px; margin:0 auto; color:#fff; font-size:18px; line-height:40px; margin-bottom:35px;}
.business-task .col .group {position:relative;} 
.business-task .col .group ul {display:flex; flex-wrap:wrap; justify-content:center; margin-left:-40px; margin-bottom:-20px;}
.business-task .col .group ul li {margin-left:40px; margin-bottom:20px; font-size:16px ;line-height:1.6em; font-weight:500;}
.business-task .col .group ul li .box {border:1px solid #ddd; width:110px;height:110px; border-radius:50%; background:#f4f4f4; display:table;}
.business-task .col .group ul li .box .cell {display:table-cell; vertical-align:middle; width:100%; height:100%;}
.business-task .col .group ul li:nth-child(even) .box {background:#fff;}
.business-task .col .group ul li:nth-child(5) .box {background:#fff;}
.business-task .col:nth-child(1) .group {padding:0 50px;}
.business-task .col:nth-child(2) .group {margin-top:100px;}
.business-task .col:nth-child(2) .group:after {content:"";position:absolute; top:50%; margin-top:-50px; left:-30px; width:1px; height:100px; background:#ddd;}

.business-step {}
.business-step .row {display:flex; flex-wrap:wrap; margin-left:-53px;}
.business-step .col {width:20%; padding-left:53px; }
.business-step .box {border:1px solid #ddd; border-radius:5px; padding:25px 10px; margin-bottom:15px; text-align:center;}
.business-step .step {color:#1c5f9c; font-size:14px; line-height:1.4em;font-weight:700; margin-bottom:30px;}
.business-step .icon {margin-bottom:30px;}
.business-step .tit {font-size:18px; line-height:1.4em; color:#2c2c2c; font-weight:500;}
.business-step ul li {position:relative; font-size:14px; line-height:1.4em; padding-left:13px; margin-bottom:5px;}
.business-step ul li:before {content:""; position:absolute; top:7px; left:0; width:4px; height:4px; background:#505050}
.business-step ul li:last-child {margin-bottom:0;}
.business-step.type2 .row {margin-left:-23px;}
.business-step.type2 .col {width:14.2857%; padding-left:23px;}
.business-step.type2 .box {min-height:240px;}
.business-step.type3 .row {margin-left:-21px;}
.business-step.type3 .col {width:16.66666%; padding-left:21px;}
.business-step.type3 .box {min-height:242px;}

.business-area {padding:0 50px;}
.business-area .row {display:flex; flex-wrap:wrap; margin-left:-125px;}
.business-area .col {width:25%; padding-left:125px; text-align:center;}
.business-area .col .icon {width:180px; height:180px; margin:0 auto 15px; position:relative; background-position:50% 50%; background-repeat:no-repeat; border-radius:50%; overflow:hidden; background-size:contain}
.business-area .col .icon:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #1c5f9c; border-radius:50%; }
.business-area .col:nth-child(even) .icon:after {border-color:#4ba23d}
.business-area .col:nth-child(1) .icon {background-image:url('../images/sub/sub2_2_pic1.png')}
.business-area .col:nth-child(2) .icon {background-image:url('../images/sub/sub2_2_pic2.png')}
.business-area .col:nth-child(3) .icon {background-image:url('../images/sub/sub2_2_pic3.png')}
.business-area .col:nth-child(4) .icon {background-image:url('../images/sub/sub2_2_pic4.png')}
.business-area .tit {font-size:18px; line-height:1.4em; font-weight:500;}
.business-area p {font-size:16px; line-height:1.4em; padding-top:5px;}
.business-area.type2 .col:nth-child(1) .icon {background-image:url('../images/sub/sub2_3_pic1.png')}
.business-area.type2 .col:nth-child(2) .icon {background-image:url('../images/sub/sub2_3_pic2.png')}
.business-area.type2 .col:nth-child(3) .icon {background-image:url('../images/sub/sub2_3_pic3.png')}
.business-area.type2 .col:nth-child(4) .icon {background-image:url('../images/sub/sub2_3_pic4.png')}