@charset "utf-8";

.field .mo {display: none;}

.field .introWrap {color: #fff; background: #000 url(/images/field/fieldBg.webp) no-repeat center left 210%; padding:65px 100px 65px 500px; display: flex; align-items: center; margin-bottom: 50px; background-size: 120%;}
.field .introWrap h3 {font-size: var(--fs35);line-height: 1.2;}
.field .introWrap span {display: block; position: relative; padding-left: 15px; margin: 20px 0 10px 0;}
.field .introWrap span::before {position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 100px; background: #fff; content: "";}
.field .introWrap p {line-height: 1.4; font-size: var(--fs17); opacity: .9;}


.field .pcbWrap {display: grid; grid-template-columns: repeat(2,1fr); gap: 30px;}
.field .pcbWrap p {font-size: var(--fs20); color: #000; border-top: 2px solid #000; padding-top: 20px; line-height: 1.2; font-weight: 600; text-align: center;}
.field .pcbWrap .img {border: 1px solid #ddd; height: 370px; margin-top: 20px; display: flex; align-items: center; justify-content: center;}


.field  .coreWrap {position: relative; padding-left: 60px; border-left: 6px solid #ededed; margin: 50px 0;}
.field  .coreWrap::before {position: absolute; left: 16px; top: 13px; content: ""; width: 0; height: 0; border-style: solid; border-width: 9px 0px 9px 12px; border-color: transparent transparent transparent var(--base1);}
.historyWrap .yearTitle span {color: var(--base1);}
.field  .coreWrap h4 {font-size: var(--fs45); color: #000; margin-bottom: 50px;}
.field  .coreWrap h4 span {color: var(--base1);}
.field  .coreWrap ul {display: grid; grid-template-columns: repeat(2,1fr); gap: 20px;}
.field  .coreWrap ul li {border: 1px solid #e5e5e5;}
.field  .coreWrap ul li h5 {margin-top: 30px; font-size: var(--fs22); color: #000; text-align: center;}
.field  .coreWrap ul li dl {margin: 25px 0; padding-left: 60px;}
.field  .coreWrap ul li dl dd {font-size: var(--fs16); color: #666; padding-left: 15px; position: relative;}
.field  .coreWrap ul li dl dd::before {content: ""; position: absolute; width: 3px; height: 3px; border-radius: 100px; background: #999; left: 0; top: 11px;}
.field  .coreWrap .technology {padding: 30px 0; border-top: 2px solid var(--base1); background: #FAFAFA; }
.field  .coreWrap .technology p {color: #000; text-align: center;}
.field  .coreWrap .technology span {display: block; text-align: center; font-size: var(--fs16);}

.field .packageWrap {margin-bottom: 50px;}
.field .packageWrap .title {position: relative; font-size: var(--fs24); color: #000; font-weight: 700; line-height: 1.1; margin-bottom: 50px;}
.field .packageWrap .title::before {position: absolute; width: 90%; height: 1px; background: #000; content: ""; top: 12px; right: 0px;}
.field .packageWrap .title p {font-size: var(--fs30); color: var(--base1);}
.field .packageWrap .packageIn {display: grid; grid-template-columns: 490px auto; gap: 50px;}
.field .packageWrap .packageIn ul {display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.field .packageWrap .packageIn ul li {background: #FAFAFA; padding: 35px;}
.field .packageWrap .packageIn ul li h5 {display: flex; justify-content: center;}

.field .packageWrap .packageIn ul li h5 p {position: relative; color: var(--base1); font-size: var(--fs18);}
.field .packageWrap .packageIn ul li h5 p::before {content: "["; position: absolute; left: -30px; top: 0; color: var(--base1); opacity: 10%;}
.field .packageWrap .packageIn ul li h5 p::after {content: "]"; position: absolute; right: -30px; top: 0; color: var(--base1); opacity: 10%;}

.field .packageWrap .packageIn ul li>p {font-size: var(--fs20); color: #000; margin: 20px 0 5px 0; text-align: center; font-weight: 700;}

.field .packageWrap .packageIn ul li dl dd {font-size: var(--fs16); color: #666; padding-left: 15px; position: relative;}
.field .packageWrap .packageIn ul li dl dd::before {content: ""; position: absolute; width: 3px; height: 3px; border-radius: 100px; background: #999; left: 0; top: 11px;}

.field .targetWrap .title {position: relative; font-size: var(--fs24); color: #000; font-weight: 700; margin: 50px 0;}
.field .targetWrap .title::before {content: ""; width: 89%; height: 1px; background: #000; right: 0; top: 18px; position: absolute;}


/* ************************ 태블릿 이하(~1600) ************************ */
@media screen and (max-width: 1600px) {

    
    .field .packageWrap .title::before {width: 85%;}
    .field .targetWrap .title::before {width: 85%;}

}

/* ************************ 태블릿 이하(~1249) ************************ */
@media screen and (max-width: 1249px) {

    
    .field .pc {display: block !important;}
    .field .packageWrap .packageIn {grid-template-columns: 330px auto; gap: 20px;}
    .field .coreWrap ul li dl {padding:0 30px; height: 135px;}
    .field .coreWrap ul li dl dd {line-height: 1.4;}
    .field .coreWrap .technology {padding: 30px;}

    .field .coreWrap ul li dl {height: 160px;}


}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {

    .field .pc {display: block;}

    .field .packageWrap .packageIn {grid-template-columns: auto;}
    .field .packageWrap .packageIn .img {text-align: center;}

    .field .introWrap {background: #000 url(/images/field/fieldBg.webp) no-repeat center left / cover; background-size: 150%; padding: 90px;}
    .field .pcbWrap .img {padding: 20px; height: auto;}

    .field .coreWrap ul li h5 {line-height: 1.3; height: 55px; padding: 0 20px;}
    .field .coreWrap ul li dl {height: 180px;}

    .field .coreWrap .technology {padding: 20px; height: 110px;}

    .field .packageWrap .title::before {width: 80%;}
    .field .targetWrap .title::before {width: 80%;}
    

}

/* ************************ 모바일 이하(~767) ************************ */
@media screen and (max-width: 767px) { 

    .field .mo {display: block;}
    .field .pc {display: none !important;}

    .field .introWrap {padding: 50px; margin-bottom: 30px;}
    .field .introWrap span {font-size: 15px;}

    .field .pcbWrap {display: block;}
    .field .pcbWrap>div+div {margin-top: 20px;}
    .field .pcbWrap p {padding-top: 10px;}
    .field .pcbWrap p br {display: none;}

    .field .coreWrap {padding-left: 0; border: 0;}
    .field .coreWrap h4 {margin-bottom: 20px; padding-left: 30px;}
    .field .coreWrap::before {left: 0; top: 5px;}
    .field .coreWrap ul {grid-template-columns: auto; gap: 10px;}
    .field .coreWrap ul li h5 {height: auto;}
    .field .coreWrap ul li dl {height: auto;}
    .field .coreWrap .technology {height: auto;}

    .field .packageWrap .packageIn ul {grid-template-columns: auto; gap: 10px;}
    .field .packageWrap .packageIn ul li>p {margin-top: 6px;}




}

/* ************************ 모바일 이하(~500) ************************ */
@media screen and (max-width: 500px) {
    
    .field .introWrap {background: #000 url(/images/field/fieldBg.webp) no-repeat top -40px left 40% / cover;}

    .field .packageWrap .title::before {width: 65%;}
    .field .targetWrap .title::before {width: 60%;}

    .field .introWrap {padding: 30px;}

}