그림자 만들기

<style>

   

    .prdtype_thumb_scroll .box{background-color: #fff; width: 380px; height: 390px; text-align: center;}

   

    /*박스그림자*/

    .prdtype_thumb_scroll .box:hover {

    box-shadow: 0px 15px 35px rgb(0 0 0 / 10%), 0px 5px 15px rgb(0 0 0 / 10%);

    -webkit-box-shadow: 0px 15px 35px rgb(0 0 0 / 10%), 0px 5px 15px rgb(0 0 0 / 10%);

    -moz-box-shadow: 0px 15px 35px rgba(0,0,0,0.1),0px 5px 15px rgba(0,0,0,0.1);

    }

    /*바뀌는 속도*/

    .prdtype_thumb_scroll .box {

    -webkit-transition: all 0.20s ease-out;

    -moz-transition: all 0.20s ease-out;

    -o-transition: all 0.20s ease-out;

    transition: all 0.20s ease-out;

}

.prdtype_thumb_scroll{display: block; margin-top: 100px; margin-bottom: 100px;}

.prdtype_thumb_scroll li .item .thumbnail {display: block; height: 230px; overflow: hidden; }

.prdtype_thumb_scroll li .item .thumbnail .thumbscroll{margin-top: 20px;}

.prdtype_thumb_scroll li .item .thumbnail img{width: 338px;}

.prdtype_thumb_scroll .box:hover {

    box-shadow: 0px 15px 35px rgb(0 0 0 / 10%), 0px 5px 15px rgb(0 0 0 / 10%);

    -webkit-box-shadow: 0px 15px 35px rgb(0 0 0 / 10%), 0px 5px 15px rgb(0 0 0 / 10%);

    -moz-box-shadow: 0px 15px 35px rgba(0,0,0,0.1),0px 5px 15px rgba(0,0,0,0.1);

}

</style>

<!--

    item 안에 썸네일, 간단소개,슬라이드바 있을거고

    box 안에 썸테일과 간단소개 있을거고

-->

<p>fsdfd</p>

<div class="prdtype_thumb_scroll">

    <ul>

        <li>

            <div class="item">

                <div class="box">

                    <div class="thumbnail">

                        <div class="thumbscroll">

                            <img src="http://miiusoft.com/data/editor/goods/220510/list_910_set_122814.jpg">

                        </div>

                    </div>

                </div>

            </div>

        </li>

    </ul>

</div>