.slide {
    /* layout */
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;   /* 컨테이너의 내용물이 컨테이너 크기(width, height)를 넘어설 때 보이지 않도록 하기 위해 hidden을 준다. */

    /* position */
    position: relative;  /* slide_button의 position absolute가 컨테이너 안쪽에서 top, left, right offset이 적용될 수 있도록 relative를 준다. (기본값이 static인데, static인 경우 그 상위 컨테이너로 나가면서 현재 코드에선 html을 기준으로 offset을 적용시키기 때문) */

    /* size */
    width: 100%;
    height:100%;
    /*height:calc(100vh - 60px - 150px);*/
}


.slide_item {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;

    /* position - 버튼 클릭시 left offset값을 적용시키기 위해 */
    position: relative;
    left: 0px;
    
    /* size */
    width: 100%;
    /*height: 300px;*/
     height: 100%;
    flex-shrink: 0;   /* flex item의 flex-shrink는 기본값이 1이므로 컨테이너 크기에 맞게 줄어드는데, 슬라이드를 구현할 것이므로 줄어들지 않도록 0을 준다. */
    background-size:cover;

    /* transition */
    transition: left 0.15s;
}


.view01{
    background-image:url("/resources/images/erp_sales/mainview_img1.png");
}

.view02{
    background-image:url("/resources/images/erp_sales/mainview_img2.png");
}


.slide_text{
    display:flex;
    flex-direction: column;
    justify-content: center;
    text-align:center;
    width:80%;
    padding-top:5%;
    color:#ffffff;
    text-shadow: #333333 1px 0 10px;
}

.slide_text_title{
    font-size:3em;
}

.slide_text_sub{
    font-size:1.5em;
    line-height:1.5em;
    margin:0;
}


.slide_button {
    /* layout */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* position */
    position: absolute;  /* 버튼이 중앙에 위치하게 하기위해 계산 */
    top: calc(50% - 16px);

    /* size */
    width: 36px;
    height: 101px;
    
    /* style */
    /*border-radius: 100%;
    background-color: #cccc;*/
    cursor: pointer;
}


.slide_prev_button {
    left: 20px;
}

.slide_next_button {
    right: 20px;
}




/* 페이지네이션 스타일 */
ul,
li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}


.slide_pagination {
    /* layout */
    display: flex;
    gap: 10px;
    
    /* position */
    position: absolute;
    bottom: 0;
    
    /* left:50%, translateX(-50%)를 하면 가로 가운데로 위치시킬 수 있다. */
    left: 50%;
    transform: translateX(-50%);
}


.slide_pagination > li {
    /* 현재 슬라이드가 아닌 것은 투명도 부여 */
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 30px;
}


.slide_pagination > li.active {
    /* 현재 슬라이드 색상은 투명도 없이 */
    color: rgba(255,255,255,1);
}