@charset "utf-8";

#pages{}
#pages .contents{padding:80px 0 170px;}
#pages .contents a.button {display:inline-block;line-height:55px;padding:0 75px 0 30px;font-size:18px;color:#fff;background:#e04726;border-radius:0 30px 30px 30px;position:relative;top:0;left:0;transition:all 0.3s;}
#pages .contents a.button:before {content:"";display:inline-block;width:100%;height:100%;border-radius:0 30px 30px 30px;border:1px solid #e04726;position:absolute;top:5px;left:5px;transition:all 0.3s;box-sizing: border-box;}
#pages .contents a.button:after {content:"";display:inline-block;width:20px;height:20px;background:url(/_public/images2/contents/button_arrow.svg) no-repeat;background-size:cover;position:absolute;top:50%;right:30px;transform:translateY(-50%);}
#pages .contents a.button:hover {top:5px;left:5px;transition:all 0.3s;}
#pages .contents a.button:hover:before {top:0;left:0;}
#pages .contents .pc_on {display:block;}
#pages .contents .mo_on {display:none;}

/*회사소개*/
.greetings {word-break:keep-all;text-align:center;}
.greetings .g-top {font-size:52px;font-weight:500;margin-bottom:30px;line-height:1.3;}
.greetings .g-top strong {font-weight:700;color:#ff512c;}
.greetings .g-p {font-size:20px;font-weight:700;line-height:1.6;}
.greetings .g-p2 {font-size:18px;margin-top:60px;line-height:1.67;}
.greetings .g-p2 + .g-p2 {margin-top:25px;}
.greetings .logo-box {margin:65px 0 60px;}
.greetings .logo-box img {display:inline-block;vertical-align:bottom;}
.greetings .logo-box img + img {margin-left:95px;}
.greetings .g-banner {width:100%;height:386px;background:url(/_public/images2/contents/greeting_img01.png) 50% 50% no-repeat;background-size:cover;border-radius:0 30px 30px 30px;}

.philosophy {word-break:keep-all;}
.philosophy .p-banner {max-height:510px;padding:82px 0 140px;background:url(/_public/images2/contents/philosophy_img01.png) 50% 50% no-repeat;background-size:cover;border-radius:0 30px 30px 30px;text-align:center;}
.philosophy .p-banner img {display:block;margin:0 auto 40px;}
.philosophy .p-banner h4 {font-size:46px;color:#fff;margin-bottom:30px;}
.philosophy .p-banner p {font-size:28px;color:#fff;}
.philosophy .p-box {margin-top:50px;display:flex;justify-content:space-between;}
.philosophy .p-box .p-box-in {width:28%;text-align:center;}
.philosophy .p-box .p-box-in img {display:block;margin:0 auto 33px;}
.philosophy .p-box .p-box-in h4 {font-size:30px;margin-bottom:20px;}
.philosophy .p-box .p-box-in p {font-size:18px;line-height:1.67;}

.history {word-break:keep-all;}
.history .h-box div {display:flex;}
.history .h-box div + div {margin-top:100px;}
.history .h-box div .year {font-size:50px;font-weight:700;position:relative;width:50%;}
.history .h-box div .year:before {content:"";display:block;width:10px;height:10px;border-radius:100%;background:#ff512c;position:absolute;top:20px;z-index:1;}
.history .h-box div ul {display:flex;flex-wrap:wrap;position:relative;padding-top:10px;width:50%;}
.history .h-box div ul:before {content:"";display:block;width:1px;height:calc(100% + 70px);background:#ccc;position:absolute;top:40px;}
.history .h-box div ul li {width:100%;display:flex;}
.history .h-box div ul li + li {margin-top:30px;}
.history .h-box div ul li .date {font-size:20px;font-weight:700;display:inline-block;}
.history .h-box div ul li .h-contents {font-size:19px;font-weight:500;color:#555;}
.history .h-box div.left .year {color:#ff512c;padding-right:60px;text-align:right;}
.history .h-box div.left .year:before {right:-5px}
.history .h-box div.left ul {padding-left:60px;}
.history .h-box div.left ul:before {left:0;}
.history .h-box div.left ul li .date {margin-right:30px;}
.history .h-box div.right {flex-direction: row-reverse;}
.history .h-box div.right .year {padding-left:60px;}
.history .h-box div.right .year:before {left:-5px;}
.history .h-box div.right ul {padding-right:60px;}
.history .h-box div.right ul:before {right:0;}
.history .h-box div.right ul li {display:flex;flex-direction:row-reverse;}
.history .h-box div.right ul li .date {margin-left:30px;}
.history .h-box div.right ul li .h-contents {text-align:right;}
.history .h-box div:last-child ul:before {height: calc(100% - 40px);}

.location {display:flex;justify-content:space-between;}
.location .lo-txt {padding-right:80px;}
.location .lo-txt .lo-p {font-size:50px;font-weight:700;color:#e04726;margin-bottom:40px;}
.location .lo-txt .lo-ul {margin-bottom:50px;}
.location .lo-txt .lo-ul li {font-size:20px;font-weight:600;}
.location .lo-txt .lo-ul li + li {margin-top:15px;}
.location .lo-map {width:900px;height:500px;}
.location .lo-map .root_daum_roughmap {width:100%;height:100%;}
.location .lo-map .root_daum_roughmap .wrap_map {width:100%;height:inherit;border:1px solid #dedede;}
.location .lo-map .root_daum_roughmap .wrap_controllers {display:none;}

/*사업분야*/
.product .pro-top {padding:42px 55px;background:#f9f9f9;margin-bottom:80px;}
.product .grid {}
.product .grid .grid-item {width:calc(20% - 10px);margin-bottom:20px;max-width:335px;}
.product .grid .grid-item img {display:block;width:100%;}
.product .grid .product-name {font-size:18px;font-weight:500;padding:10px;background:#ebebeb;}

/*실적*/
.performance{}
.performance .list{margin-top:60px;}
.performance .list .thead{}
.performance .list .thead li{display:flex;border-radius:0 20px 20px 20px;background: #ff512c;}
.performance .list .thead li .col{font-size: 20px;font-weight: 600;color: #fff;text-align: center;padding:22px 10px;}
.performance .list .thead li .col:nth-child(1){width:20%;}
.performance .list .thead li .col:nth-child(2){width:60%;}
.performance .list .thead li .col:nth-child(3){width:20%}
.performance .list .tbody li{display: flex;border-bottom:1px solid #ccc;align-items: center;}
.performance .list .tbody li .col{text-align:center;font-size: 17px;font-weight: 600;color: #202020;padding:23px 10px;}
.performance .list .tbody li .col:nth-child(1){width:20%;}
.performance .list .tbody li .col:nth-child(2){width:60%;text-align: left;}
.performance .list .tbody li .col:nth-child(3){width:20%;color:#787878;}


/* tablet */
@media all and (max-width:1280px) {
    #pages .contents{padding:50px 20px 60px;}

    .greetings .g-top {font-size:45px;}
    .greetings .g-banner {height:300px;}

    .philosophy .p-banner {padding:60px 60px 80px;}
    .philosophy .p-banner p br {display:none;}
    .philosophy .p-box {flex-wrap:wrap;}
    .philosophy .p-box .p-box-in {width:80%;margin:auto;}
    .philosophy .p-box .p-box-in + .p-box-in {margin-top:80px;}

    .history .h-box div ul li .h-contents {display:block;width: 100%;margin-top:5px;}
    .history .h-box div.right ul li {flex-wrap:wrap;}
    .history .h-box div.right ul li .h-contents {text-align:right;}

    .location {flex-wrap:wrap;}
    .location .lo-txt {width:100%;margin-bottom:40px;padding-right:0;}
    .location .lo-map {width:100%;height:460px;}

    .product .grid .grid-item {width:calc(33.33% - 10px);}

    .performance .list{margin-top:30px;}
    .performance .list .thead li .col{font-size:15px;padding:15px 10px;}
    .performance .list .tbody li .col{font-size:15px;padding:15px 10px;}

}

/* mobile */
@media all and (max-width:768px) {
    #pages .contents a.button {font-size:15px;line-height:45px;padding: 0 60px 0 25px;}
    #pages .contents a.button:after {width:15px;height:15px;}
    #pages .contents .pc_on {display:none;}
    #pages .contents .mo_on {display:block;margin:auto;}

    .greetings .g-top {font-size:24px;margin-bottom:20px;}
    .greetings .g-p {font-size:16px;}
    .greetings .g-p br {display:none;}
    .greetings .g-p2 {font-size:15px;margin-top:40px;}
    .greetings .g-p2 + .g-p2 {margin-top:15px;}
    .greetings .g-p2 br {display:none;}
    .greetings .g-p2 span {display:block;}
    .greetings .logo-box {margin:40px 0}
    .greetings .logo-box img {display:block;margin:auto;}
    .greetings .logo-box img + img {margin:40px auto 0;}
    .greetings .g-banner {height:140px;}

    .philosophy .p-banner {padding: 40px 20px 60px;}
    .philosophy .p-banner img {margin: 0 auto 20px;}
    .philosophy .p-banner h4 {font-size:30px;margin-bottom:20px;}
    .philosophy .p-banner p {font-size:16px;}
    .philosophy .p-banner p br {display:none;}
    .philosophy .p-box .p-box-in {width:90%;}
    .philosophy .p-box .p-box-in + .p-box-in {margin-top:50px;}
    .philosophy .p-box .p-box-in img {margin:0 auto 20px;}
    .philosophy .p-box .p-box-in h4 {font-size:20px;margin-bottom: 15px;}
    .philosophy .p-box .p-box-in p {font-size:15px;}

    .history .h-box div {flex-wrap:wrap;}
    .history .h-box div + div {margin-top:80px;}
    .history .h-box div .year {font-size:36px;width:100%;margin-bottom:30px;}
    .history .h-box div .year:before {width:8px;height:8px;top:22px;}
    .history .h-box div ul {width:100%;}
    .history .h-box div ul:before {height:calc(100% + 130px);top:-40px;}
    .history .h-box div ul li {flex-wrap:wrap;}
    .history .h-box div ul li + li {margin-top:20px;}
    .history .h-box div ul li .date {font-size:16px;}
    .history .h-box div ul li .h-contents {font-size:15px;}
    .history .h-box div.left .year {text-align:left;padding:0 0 0 20px;}
    .history .h-box div.left .year:before {right:auto;left:0;}
    .history .h-box div.left ul {padding:0 0 0 25px;}
    .history .h-box div.left ul:before {left:4px;}
    .history .h-box div.right .year {padding-left:20px;}
    .history .h-box div.right .year:before {left:0;}
    .history .h-box div.right ul {padding:0 0 0 25px;}
    .history .h-box div.right ul li {flex-direction: row;}
    .history .h-box div.right ul:before {right:auto;left:4px;}
    .history .h-box div.right ul li .date {margin-left:0;}
    .history .h-box div.right ul li .h-contents {text-align:left;}
    .history .h-box div:last-child ul:before {height: calc(100% + 40px);}

    .location .lo-txt .lo-p {font-size:36px;margin-bottom:30px;}
    .location .lo-txt .lo-ul {margin-bottom:40px;}
    .location .lo-txt .lo-ul li {font-size:16px;}
    .location .lo-txt .lo-ul li + li {margin-top:10px;}
    .location .lo-map {height:320px;}

    .product .pro-top {padding:20px;margin-bottom:50px;}
    .product .grid .grid-item {width:calc(50% - 5px);max-width:none;margin-bottom:20px;}
    .product .grid .product-name {font-size:15px;}

    .performance .list .thead{display: none;}
    .performance .list .tbody{border-top:2px solid #ff512c;}
    .performance .list .tbody li{display: block;padding:20px 10px;}
    .performance .list .tbody li .col{text-align: left;padding:22px 0 0 8px;position:relative;font-size:14px;line-height:1.25;}
    .performance .list .tbody li .col:before{content"";color:#787878;position: absolute;left:0;top:0;}
    .performance .list .tbody li .col + .col{margin-top:15px;}
    .performance .list .tbody li .col:nth-child(1){width:100%;}
    .performance .list .tbody li .col:nth-child(1):before{content: "Year-Month"}
    .performance .list .tbody li .col:nth-child(2){width:100%;}
    .performance .list .tbody li .col:nth-child(2):before{content: "Business Detail"}
    .performance .list .tbody li .col:nth-child(3){width:100%;}
    .performance .list .tbody li .col:nth-child(3):before{content: "Delivery Destination"}
}