@charset "utf-8";

.intro .greeting {display: grid; grid-template-columns: auto 30vw; justify-content: space-between;}
.intro .greeting .leftZone h2 {font-size: var(--fs80); font-weight: 200; margin-bottom: 50px; color: #000;}
.intro .greeting .leftZone h2 span {font-weight: 700; color: var(--base2);}
.intro .greeting .leftZone div {position: relative; /*padding-left: 80px;*/ font-weight: 300;}
/* .intro .greeting .leftZone div::before {position: absolute; left: 0; top: 0; content: ""; background: url(/images/company/ruler.svg) no-repeat; width: 30px; height: 100%; opacity: 20%;} */
.intro .greeting .leftZone div p {line-height: 1.6;}
.intro .greeting .leftZone div b {font-weight: 700; color: #000;}
.intro .greeting .leftZone div span {display: inline-block; position: relative;  font-weight: 700; padding-top: 15px; margin-top: 45px; line-height: 1;}
.intro .greeting .leftZone div span::before {position: absolute; content: ""; left: 0; top: 0; width: 30px; height: 1px; background: #000;}

.intro .greeting .rightZone {margin-top: -100px;}
.intro .greeting .rightZone .img {height:750px;}

.intro .promise {margin-top: 150px; display: grid; grid-template-columns: 550px auto; justify-content: space-between; gap: 100px;}
.intro .promise .sticky {position: sticky; top: 50px;}

.intro .promise .rightZone h3 {font-size: var(--fs80); color: var(--base2); margin-bottom: 60px;}
.intro .promise .rightZone h3 p {font-weight: 200; color: #000; font-size: var(--fs40); margin-bottom: 5px;}
.intro .promise .rightZone ul {margin-bottom: 70px;}
.intro .promise .rightZone ul li+li {margin-top: 45px;}
.intro .promise .rightZone ul li .number {color: #ccc; font-weight: 100; font-size: var(--fs64); line-height: 1;}
.intro .promise .rightZone ul li p {margin: 7px 0; font-size: var(--fs20); color: #000; font-weight: 500; line-height: 1;}
.intro .promise .rightZone ul li span {line-height:1.4;}


.intro .promise .rightBottom {position: relative; padding-top: 70px;}
.intro .promise .rightBottom::before {position: absolute; content: ""; width: 100px; height: 1px; background: #000; top: 0; left: 0;}
.intro .promise .rightBottom h4 {position:relative; font-size:var(--fs48); padding:40px 0; margin-bottom:20px; color: #000;}
.intro .promise .rightBottom h4:before {content:""; position:absolute; top:0; left:0; background:url(/images/common/topQuotes.svg) no-repeat; width:33px; height:22px;}
.intro .promise .rightBottom h4:after {content:""; position:absolute; bottom:0; left:0; background:url(/images/common/bottomQuotes.svg) no-repeat; width:33px; height:22px;}



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

    .intro .greeting .rightZone {margin-top: -80px;}

}


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

    .intro .greeting {grid-template-columns: auto; gap: 70px;}
    .intro .greeting .leftZone { order: 2; }
    .intro .greeting .rightZone { order: 1; }

    .intro .greeting .rightZone {margin: 0;}
    .intro .greeting .rightZone .img {width: 500px;}
    .intro .greeting .leftZone h2 {margin-bottom: 50px;}
    
    .intro .promise {grid-template-columns: auto; margin-top: 100px; gap: 50px;}
    .intro .promise .rightZone h3 {margin-bottom: 80px;}
    .intro .promise .sticky {position: static; }
    .intro .promise .sticky img {width: 500px;}
    .intro .promise .rightZone ul li+li {margin-top: 30px;}

}


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

    .intro .greeting {gap: 40px;}
    .intro .greeting .leftZone div {padding-left: 60px;}
    .intro .greeting .leftZone div span {margin-top: 35px;}
    .intro .promise {margin-top: 50px;}
    .intro .promise .rightZone h3 {margin-bottom: 30px;}
    .intro .promise .rightZone ul {margin-bottom: 50px;}
    .intro .promise .rightBottom {padding-top: 50px;}
    .intro .promise .rightZone ul li p {margin: 10px 0;}

}


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

    .intro .greeting .rightZone .img {width: 100%; height: 350px;}
    .intro .promise .sticky img {width: 100%;}


}