@charset "utf-8";

/* ======================================== MOBILE */
/* ================= sub02 사업분야 */
section.co {padding: 60px 0 80px;}
.leftMenu ul {
    display: flex;
    flex-wrap: wrap;
}
.leftMenu ul li {
    position: relative;
    width: 50%;
}
.leftMenu ul li.border .border-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.leftMenu ul li .border-lines span {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: #f05c0b;
    transform: scaleX(0);
    transform-origin: right;
    transition: .9s;
}
.leftMenu ul li .border-lines span:nth-child(2n) {
    width: 3px; height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    transition-delay: .6s;
}
.leftMenu ul li .border-lines span:nth-child(3) {
    top: auto; bottom: 0;
    transform-origin: left;
}
.leftMenu ul li .border-lines span:nth-child(4) {
    left: auto; right: 0;
    transform-origin: bottom;
}
.leftMenu ul li.border .border-lines span {transform: scale(1);}
.leftMenu ul a {
    display: block;
    height: 200px;
    padding-top: 86px;
    text-align: center;
    background: url(/img/sub2_btn-field1_m.jpg) no-repeat center/cover;
}
.leftMenu ul li:nth-child(2) a {background-image: url(/img/sub2_btn-field2_m.jpg);}
.leftMenu ul li:nth-child(3) a {background-image: url(/img/sub2_btn-field3_m.jpg);}
.leftMenu ul li:nth-child(4) a {background-image: url(/img/sub2_btn-field4_m.jpg);}
.leftMenu ul a:after {
    position: absolute;
    content: '';
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 100%; height: 100%;
    background: rgba(0,0,0,.5);
}
.leftMenu ul li.active a:after {
    opacity: 0;
    transition: .5s;
}
.leftMenu ul a p {
    position: relative;
    font-size: 2.6rem; color: #fff;
    font-weight: 700;
    z-index: 2;
}
.leftMenu ul li a span {opacity: 0;}
.fieldCont {padding: 40px 4.533% 0;}
.fieldCont .text-group h3 {font-size: 3rem; color: #f05c0b;}
.fieldCont .text-group strong {
    display: block;
    margin: 15px 0 25px;
    font-size: 1.8rem;
    font-weight: 300;
	line-height: 1.3;
	white-space: pre-line;
}
.fieldCont .text-group p {
    font-size: 1.6rem;
    line-height: 24px;
    white-space: pre-line;
}
.fieldCont .result {margin-top: 41px;}
.fieldCont .result .img-group img {
    display: block;
    width: 100%;
}
.fieldCont .result .img-group img:nth-child(n+2) {margin-top: 15px;}
.fieldCont .result .text-area {margin: 45px 0 36px;}
.fieldCont .result .text-area p.tit {
    margin-bottom: 10px;
    font-size: 1.6rem; color: #f05c0b;
    font-weight: 700;
}
.fieldCont .result .text-area p.cont {
    font-size: 1.6rem;
    line-height: 24px;
}
.fieldCont .result .logo-wrap {
    display: flex;
    flex-wrap: wrap;
}
.fieldCont .result .logo-box {
    width: 50%; height: 80px;
    text-align: center;
}
.fieldCont .result .logo-box img {
    display: inline-block;
    width: 83%;
}
.fieldCont .inquire {
    padding: 20px 12px;
    border-top: 2px solid #f05c0b;
    background: #f6f6f6;
}
.fieldCont .inquire li.tit {
    float: none;
    width: 100%;
    margin-bottom: 20px;
    font-size: 1.6rem; color: #f05c0b;
    font-weight: 700;
}
.fieldCont .inquire li {
    width: 50%;
    float: left;
}
.fieldCont .inquire li i.icon {
    display: inline-block;
    width: 25px; height: 25px;
    background: #f05c0b url(/img/sub2_icon-tel.png) no-repeat center/12px;
    border-radius: 100%;
    vertical-align: middle;
}
.fieldCont .inquire li.phone i.icon {background-image: url(/img/sub2_icon-phone.png);}
.fieldCont .inquire li.mail i.icon {background-image: url(/img/sub2_icon-mail.png);}
.fieldCont .inquire li p {
    display: inline-block;
    margin-left: 6px;
    font-size: 1.6rem;
    vertical-align: middle;
}
.fieldCont .inquire li.mail {
    margin-top: 12px;
    width: 100%;
}


/* ======================================== PC */
@media screen and (min-width:1084px){
    header {
        position: fixed;
        border-bottom: 1px solid #eee;
    }
    /* ================= sub02 사업분야 */
    section.co {padding: 0; width: auto;}
    .leftMenu ul {
        display: block;
        position: absolute;
        top: 80px; left: 0;
    }
    .leftMenu ul li {width: 386px;}
    .leftMenu ul li .border-lines span {height: 6px;}
    .leftMenu ul li .border-lines span:nth-child(2n) {width: 6px;}
    .leftMenu ul a {
        height: calc(25vh - 20px);
        min-height: 200px;
        padding: 11.8vh 0 0 26px;
        text-align: left;
        background-image: url(/img/sub2_btn-field1.jpg);
    }
    .leftMenu ul li:nth-child(2) a {background-image: url(/img/sub2_btn-field2.jpg);}
    .leftMenu ul li:nth-child(3) a {background-image: url(/img/sub2_btn-field3.jpg);}
    .leftMenu ul li:nth-child(4) a {background-image: url(/img/sub2_btn-field4.jpg);}
    .leftMenu ul a:after {background: rgba(0,0,0,.7);}
    .leftMenu ul a:hover:after {
        background: rgba(0,0,0,.4);
        transition: .5s;
    }
    .leftMenu ul a p {font-size: 4.8rem;}
    .leftMenu ul li a span {
        position: relative;
        display: block;
        margin-top: 16px;
        font-size: 1.6rem; color: #fff;
        font-weight: 700;
        opacity: 1;
        z-index: 2;
    }
    .leftMenu ul li a span:after {
        display: inline-block;
        content: '';
        width: 20px; height: 7px;
        margin-left: 6px;
        background: url(/img/sub2_btn-arrow.png) no-repeat center/contain;
    }
    .fieldCont {
        height: calc(100vh - 80px);
        width: 745px;
        padding: 45px 0 80px;
        margin: 80px 0 0 436px;
        overflow: auto;
    }
    .fieldCont .text-group h3 {font-size: 4.8rem;}
    .fieldCont .text-group strong {
        margin: 16px 0 40px;
        font-size: 3.6rem;
    }
    .fieldCont .text-group p {line-height: 28px;}
    .fieldCont .result {margin-top: 48px;}
    .fieldCont .result .img-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .fieldCont .result .img-group img {width: 49.8%; height: 200px;}
    .fieldCont .result .img-group img:nth-child(n+2) {margin-top: 0;}
    .fieldCont .result .img-group img:nth-child(n+3) {margin-top: 3px;}
    .fieldCont .result .text-area {
		position: relative;
		margin: 66px 0 52px;
	}
    .fieldCont .result .text-area p.tit {
        position: absolute;
        margin-bottom: 0;
        font-size: 1.8rem;
		line-height: 1.4;	
    }
    .fieldCont .result .text-area p.cont {
		padding-left: 160px;
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .fieldCont .result .logo-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .fieldCont .result .logo-box {
        width: 33.33%; height: 90px;
    }
    .fieldCont .result .logo-box img {
        display: inline-block;
        width: 53%;
    }
    .fieldCont .inquire {padding: 22px 0 20px;}
    .fieldCont .inquire li.tit {
        margin-bottom: 26px;
        text-align: left;
        padding-left: 35px;
        line-height: 1;
        font-size: 1.8rem;
    }
    .fieldCont .inquire li {
        width: 33.33%;
        float: left;
        text-align: center;
    }
    .fieldCont .inquire li i.icon {
        width: 40px; height: 40px;
        vertical-align: middle;
        background-size: 16px;
    }
    .fieldCont .inquire li p {
        margin-left: 14px;
    }
    .fieldCont .inquire li.mail {
        margin: 0;
        width: 33%;
    }
}

/* ======================= 1280 고려*/
@media screen and (min-width: 1300px){
    .leftMenu ul li {width: 436px;}
    .fieldCont {
        width: 745px;
        margin-left: 506px;
    }
}

@media screen and (min-width: 1500px){
    .fieldCont {
        width: 945px;
        margin-left: 546px;
    }
    .fieldCont .inquire li.tit {
        position: relative;
        float: left;
        width: 198px;
        margin: 0;
        line-height: 39px;
    }
    .fieldCont .inquire li.tit:after {
        position: absolute;
        content: '';
        top: 50%; right: 0; transform: translateY(-50%);
        width: 1px; height: 16px;
        background: #d7d7d7;
    }
    .fieldCont .inquire li {width: calc(33% - 86px);}
    .fieldCont .inquire li.mail {width: calc(33% - 66px);}
    .fdInner .right-logo {
        position: absolute;
        left: 1723px; top: 0;
        width: 180px; height: 100vh;
        background: #f6f6f6;
    }
    .fdInner .right-logo:after {
        position: absolute;
        content: '';
        top: 120px; right: 0;
        width: 67px; height: 318px;
        background: url(/img/sub2-right-logo.png) no-repeat center/contain;
    }
}
@media screen and (min-width:1600px){
	.fieldCont {
		width: 980px;
	}
}