.img_l {border:1px solid #474040; width:372px; height:197px;}
.img_xl {border:1px solid #474040; width:372px; height:405px;}
.img_s {border:1px solid #474040; width:177px; height:197px;}
.img_sn {border:1px solid #474040; width:185px; height:197px;}


.list {position: relative; width: 188px; margin:0 auto;}
.list ul { list-style: none;}
.list ul li {position: relative; width: 188px; height: 200px; float: left; margin: 0px; overflow: hidden; text-align:center;}
.shadow {position: absolute ; top:70px; left:0px;  background-color: rgba(0, 0, 0, .2); width: 180px; height: 70px; margin:0; transition: 0.5s;}
.shadow span {color: white; font-family:'notokr-bold'; font-size:22px; text-align:center; padding: 5px; display: block;}
.detail {display: none; color: white; margin: a auto; padding: 5px 5px 5px -50px; background-color: rgba(0, 0, 0, .4); width: 188px; height: 200px; margin:0; transition: 0.5s;}
.detail h2{color: white; font-family:'notokr-bold'; font-size:22px; text-align:center; padding: 5px; display: block;}
.detail p {color:white; font-family:'notokr-medium'; font-size:20px; text-align:center; padding: 0px; display: block;}}
.detail img {clear: both; margin-top:-30px;}

.list ul li:hover {cursor: pointer;}
.list ul li:hover .shadow {top: 0px;}
.list ul li:hover span {display: none;}
.list ul li:hover .detail {display: block;}


.list_l {position: relative; width: 375px; margin:0 auto;}
.list_l ul { list-style: none;}
.list_l ul li {position: relative; width: 375px; height: 200px; float: left; margin: 0px; overflow: hidden; text-align:center;}
.shadow_l {position: absolute ; top:80px; left:0px;  background-color: rgba(0, 0, 0, .4); width: 375px; height: 50px; margin:0; transition: 0.5s;}
.shadow_l span {color: white; font-family:'notokr-bold'; font-size:30px; text-align:center; padding: 5px; display: block;}
.detail_l {display: none; color: white; margin: a auto; padding: 5px 5px 5px 0px; background-color: rgba(0, 0, 0, .4); width: 375px; height: 200px; margin:0; transition: 0.5s;}
.detail_l h2{color: white; font-family:'notokr-bold'; font-size:30px; text-align:center; padding: 10px; display: block;}
.detail_l p {color:white; font-family:'notokr-medium'; font-size:20px; text-align:center; padding: -20px; display: block;}}
.detail_l img {clear: both;}

.list_l ul li:hover {cursor: pointer;}
.list_l ul li:hover .shadow_l {top: 0px;}
.list_l ul li:hover span {display: none;}
.list_l ul li:hover .detail_l {display: block;}



.list_xl {position: relative; width: 375px; margin:0 auto;}
.list_xl ul { list-style: none;}
.list_xl ul li {position: relative; width: 375px; height: 410px; float: left; margin: 0px; overflow: hidden; text-align:center;}
.shadow_xl {position: absolute ; top:80px; left:0px;  background-color: rgba(0, 0, 0, .1); width: 375px; height: 50px; margin:0; transition: 0.5s;}
.shadow_xl span {color: white; font-family:'notokr-bold'; font-size:22px; text-align:center; padding: 5px; display: block;}
.detail_xl {display: none; color: white; margin: a auto; padding: 5px 5px 5px 0px; background-color: rgba(0, 0, 0, .4); width: 375px; height: 410px; margin:0; transition: 0.5s;}
.detail_xl h2{color: white; font-family:'notokr-bold'; font-size:22px; text-align:center; padding: 10px; display: block;}
.detail_xl p {color:white; font-family:'notokr-medium'; font-size:20px; text-align:center; padding: -20px; display: block;}}
.detail_xl img {clear: both;}

.list_xl ul li:hover {cursor: pointer;}
.list_xl ul li:hover .shadow_xl {top: 0px;}
.list_xl ul li:hover span {display: none;}
.list_xl ul li:hover .detail_xl {display: block;}