@charset "utf-8";

/* ******************** default ******************** */

/* 폰트 */
@import "../../../font/NanumSquareNeo.css";

/* root */
@import "../../common/color";

/* mixin */ 
@import "../../mixin/ui-mixin";

/* common */ 
@import "../../common/common";


/* ******************** 공통 요소 ******************** */

/* header */
@import "../../common/header";

/* footer */
@import "../../common/footer";

/* fix-btn */ 
@import "../../common/fixed-btn";


/* ******************** component ******************** */

/* input */ 
@import "../../component/input-style";

/* 컨텐츠 공용 타이틀 */
@import "../../component/title-style";

/* btn-style */ 
@import "../../component/button-style.scss";


/* ******************** sub-common ******************** */ 

/* sub-banner */ 
@import "../common/_sub-banner";

/* sub-tab */ 
@import "../common/_sub-tab";

/* sub-common-cont */
@import "../common/_sub-cont";



/* ******************** EH ******************** */

/* banner */ 
@import "./_banner";




.cont-banner {
  background-image: url(../../../img/sub/portal-intro/eh/cont_banner.webp); 
}

.intro-wrap {
  .img-wrap {
    margin-top: 50px;
    img { width: 70%;}
  }
}
@media (max-width: 900px) {
  .intro-wrap {
    .img-wrap {
      img { width: 100%;}
    }
  }
}

.eh-summary-list {
  margin-top: 30px;
  li {
    float: left; width: 32.5%; min-height: 320px; margin-right: 1%; border: 5px solid var(--line-color); padding: 20px 30px 30px; font-size: 1.3rem;  text-align: center;
    .ico-area { 
      height: 100px; width: 100px; border-radius: 50%; text-align: center; margin: 15px auto; vertical-align: top; padding: 15px 0; font-size: 1.4rem; color: #fff; 
      .ico { 
        width: 50px; height: 50px; display: block; margin: 0 auto; vertical-align: top; 
        img { width: 100%; height: auto; }
      }
    }
    &:nth-child(1) {
      .ico-area { background: var(--main-color); }
    }
    &:nth-child(2) {
      .ico-area { background: var(--purple-color); }
    }
    &:nth-child(3) {
      margin-right: 0;
      .ico-area { background: var(--darkblue-color); }
    }
    .name { 
      position: relative; font-weight: 900; font-size: 1.6rem; display: inline-block; padding: 10px 0 0; color: #333;
      &:before { content: ''; position: absolute; bottom:-1px; left:-5px; width: calc(100% + 10px); height:5px; background:rgba(0,0,0,0.15); border-radius: 5px;}
    }
    p { 
      font-size: 1.3rem; line-height: 1.7; font-weight: 500; padding-left: 13px; position: relative; margin-top:10px; word-break: keep-all; text-align: left; color: #444;
      &:before { content: ''; position: absolute; top:7px; left:0; width: 7px; height: 7px; border-radius: 5px; border: 2px solid #aaa;}
    }
  }
}

@media (max-width: 640px) {
	.eh-summary-list {
    li { 
      width: 100%; margin-right: 0; margin-bottom: 15px; min-height: auto; padding: 20px;
      .ico-area { 
        width: 75px; height: 75px; padding: 10px 0; 
        .ico { width: 35px; height: 35px; }
      }
      p {font-weight: 400; font-size: 1.2rem;}
    }
  }
}