@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";

/* normal table */ 
@import "../../component/normal-table.scss";


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

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

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

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



/* ******************** 기술마켓 ******************** */

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




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


/* 라운드 프로세스 */
.round-list {
  text-align: left;
  .process-round {
    width: 150px; height: 150px; display: inline-block; text-align: center; margin: 10px 35px 10px 0; font-size: 1.5rem; background: #fff; border:1px solid var(--main-color); border-radius: 50%; color: var(--main-color); line-height: 23px; padding: 55px 0; position: relative;  vertical-align: top; font-weight: 600;
    &.three-line { padding: 45px 0; }
    &:after { position: absolute; content: ''; width: 30px; height: 18px; background: url(../../../img/sub/portal-intro/tech/arrow_process.svg); background-size: 30px 18px; bottom: 50%; margin-bottom: -12px; right: -35px; opacity: 1; transform: rotate(-90deg); }
    &:first-child { background: #eaedfc; color: var(--main-color); font-weight: bold; border:0; }
    &:last-child { background: var(--main-color); font-weight: bold; margin-right: 0; border:0; color:#fff; }
    &:last-child:after { display: none; }
  }
}


@media all and (max-width: 920px)
{
	.round-list {
    text-align: center;
    .process-round { 
      width: 100px; height: 100px; padding: 30px 0 0; font-size: 1.2rem;  line-height: 19px; margin-right: 15px;
      &:after { width: 15px; height: 10px; background-size: cover; right: -19px; margin-bottom: -5px;}
      &.three-line { padding-top: 23px;}
    }
  }
}