@font-face {
  font-family: Pretendard;
  src: url("../assets/PretendardVariable.woff2");
}


@media screen and (min-width: 768px){ 
 body {
    display: inline;
  } 
    
}
/* 태블릿 */
/* @media screen and (min-width: 769px) and (max-width: 1024){ 
   body {
    display: inline;
  } 
 } */

/* 데스트탑 */
@media screen and (min-width: 1025px){ 
    body {
         margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
     font-family: Pretendard;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: 0;  /* Firefox */

     scroll-behavior: smooth;
       top: 0px;
  left: 0px;
  right: 0px;
  /* width: 1920px;
  height: 3464px; */
  /* UI Properties */
  background: #FFFFFF 0% 0% no-repeat padding-box;
  opacity: 1;
  }


 }

 body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari and Opera */
}

 
.warp{
    display: inline-flex;
    width: 1920px;
    flex-direction: column;
    justify-content: center;    
    align-items: center;
}
.header{
    width: 1200px;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    /* justify-content: space-between; */
    padding-top: 57px;
    padding-bottom: 93px;
    background-color: white;
    user-select: none;
}
.header>.logo
{
    width: 222.4px;
    height: 50px;
    background: url("../assets/logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.header>.submenu
{    
  display: flex;   
  justify-content: space-between;
  height: 100%;
  align-items: end;
  padding-left: 186px;
  column-gap: 35px;
}

.header>.submenu>.menuitem
{
  cursor: pointer; 
  font: var(--unnamed-font-style-normal) normal bold var(--unnamed-font-size-20)/24px var(--unnamed-font-family-pretendard);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-000000);
  text-align: left;
  font: normal normal bold 20px/24px Pretendard;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}

.header>.contents {
  display: flex;
  justify-content: space-between;
  gap : 10px;
  margin-left: auto;   
}

.contents_btn
{
  width: 110px;
  height: 26px;
  color: white;
  background: #F05A2A 0% 0% no-repeat padding-box;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  font: normal normal bold 14px/20px Pretendard;
  letter-spacing: -0.4px;
  color: #FFFFFF;
  text-align: center;
  cursor: pointer;

  >a {
    text-decoration: none;
    color: inherit;
  }
}
/* 팝업 스타일 */
        .modal-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 999;
        }

        .modal-close {
            position: relative;
            display: inline-block;
            margin: 10px;
            padding: 10px 15px;
            text-align: center;
            font-size: 18px;
            letter-spacing: 1px;
            text-decoration: none;
            color: white;
            background: #725AC1;
            cursor: pointer;
            transition: ease-out 0.5s;
            border: 2px solid #f58e52;
            border-radius: 10px;
            box-shadow: inset 0 0 0 0 #725AC1;
        }

        .modal-close:hover {
            color: white;
            box-shadow: inset 0 -100px 0 0 #f58e52;
        }

        .modal-close:active {
            transform: scale(0.9);
        }

        .modal-wrap {
            
            position: absolute;
            flex-wrap: wrap;
            float: right;
            top: 48%;
            left: 50%;
            transform: translate(-50%, -53%);
            width: 70%;
            height: 80%;
            
            background-color: transparent;
            z-index: 1000;
        }

        .modal-control {
            
            display: flex;
            justify-content: flex-end;
        }

.section1 {
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding-bottom: 150px;
    width: 1200px;
}

.section1>.main {
    background: url("../assets/section1.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 780px;
    display: flex;
    box-sizing: border-box;
    padding-top: 67px;
    padding-left: 153px;
    user-select: none;
    font: var(--unnamed-font-style-normal) normal bold 32px/47px var(--unnamed-font-family-pretendard);
    color: var(--unnamed-color-000000);
    text-align: left;
    font: normal normal bold 32px/47px Pretendard;
    letter-spacing: -0.16px;
    color: #000000;
    opacity: 1;
}

.section2 {
    top: 0px;
    width: 900px;
    height: 0px;
    /* UI Properties */
    opacity: 1;
    margin-top: 200px;    
    user-select: none;
}

.section2>.context {
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 16px;
    word-spacing: 2px;
    overflow: hidden;
}

.section2>.acc-context {
    font-size: 27px;
    font-weight: 700;
}

.section2>.acc-context>.acc {
    color: #F05A2A;
}

.section2>.icons {

    height: 100%;

    display: flex;
    flex-direction: row;
    column-gap: 16px;
    justify-content: flex-end;
    align-items: center;

    box-sizing: border-box;
    margin-top: 20px;
    padding-right: 72px;
    padding-bottom: 100px;
}

.section2>.icons>.icon {
    display: flex;
    flex-direction: column;

    width: 170px;
    height: 160px;
}

.section2>.icons>.icon>.image {
    width: 100%;
    flex: 1 1 1px;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section2>.icons>.icon>.text {
    width: 100%;
    flex: 0 0 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 20px;
    font-weight: 500;

    box-sizing: border-box;
    padding-left: 20px;
}


.section2>.icons>.icon:first-child>.image {
    background-image: url("../assets/icon_dynamism.png");
}

.section2>.icons>.icon:nth-child(2)>.image {
    background-image: url("../assets/icon_efficiency.png");
}

.section2>.icons>.icon:last-child>.image {
    background-image: url("../assets/icon_speed.png");
}

.section3 {
    width: 1920px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    user-select: none;
    background: #F4F5F8 0% 0% no-repeat padding-box;
    padding-top: 0px;
}

.section3>.title {
    font-size: 18px;    
    display: flex;
    align-items: center;
    justify-content: center;    
    color: var(--unnamed-color-000000);
    text-align: center;
    font: normal normal bold 40px/47px Pretendard;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    box-sizing: border-box;
    padding-top: 150px;
    padding-bottom: 80px;

}

.section3>.services {
    display: flex;
    flex-direction: row;
    column-gap: 24px;
    padding-bottom: 300px;
    padding-left: 360px;
    padding-right: 360px;
    justify-content: center;
}

.section3>.services>.service {
    width: 384px;
    height: 500px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    box-sizing: border-box;
    padding: 30px 28px 24px 28px;
}

.section3>.services>.service>.number {
    font: var(--unnamed-font-style-normal) normal 200 60px/47px var(--unnamed-font-family-pretendard);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-cccccc);
    text-align: right;
    font: normal normal 200 60px/47px Pretendard;
    letter-spacing: 0px;
    color: #CCCCCC;
    opacity: 1;
}

.section3>.services>.service>.title {

    font: var(--unnamed-font-style-normal) normal bold 44px/47px var(--unnamed-font-family-pretendard);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-f05a2a);
    text-align: left;
    font: normal normal bold 44px/47px Pretendard;
    letter-spacing: 0px;
    color: #F05A2A;
    opacity: 1;
}

.section3>.services>.service>.context {
    font: var(--unnamed-font-style-normal) normal medium var(--unnamed-font-size-20)/26px var(--unnamed-font-family-pretendard);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
    text-align: left;
    font: normal normal medium 20px/26px Pretendard;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    }

.section3>.services>.service>.rearnmore {

    margin-top: 220px;
    margin-left: 190px;
    background: var(--unnamed-color-f05a2a) 0% 0% no-repeat padding-box;
    background: #F05A2A 0% 0% no-repeat padding-box;
    border-radius: 20px;
    opacity: 1;
    cursor: pointer;
}

.section3>.services>.service>.rearnmore>.text {
    font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-600) var(--unnamed-font-size-20)/var(--unnamed-line-spacing-34) var(--unnamed-font-family-pretendard);
    letter-spacing: var(--unnamed-character-spacing-0);
    text-align: center;
    font: normal normal 600 20px/34px Pretendard;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.section3>.services>.service:first-child {
    background-image: url("../assets/service01_bg_white.png");
    
}

.section3>.services>.service:nth-child(2) {
    background-image: url("../assets/service02_bg_white.png");
}

.section3>.services>.service:last-child {
    background-image: url("../assets/service03_bg_white.png");
}


.letter {
    display: inline-block;
    animation: reveal 3s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes reveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    40% {
        opacity: 1;
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(20%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
.animated {
    /* animation: fadeInRight; */
    /* animation-duration: 1s; */
    
    animation: linear fadeInRight both;
    animation-duration: 2s;
    
}
.fadeInRight {
    animation-name: fadeInRight;
}
[data-animation].animated {
    opacity: 1;
}
[data-animation] {
    opacity: 0;
}


.intersection {
    animation: fadein 1s forwards;
  }
  
  @keyframes fadein {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    80% {
      color: black;
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
      color: burlywood;
    }
  }