* {margin:0; padding:0; list-style:none; box-sizing: border-box;font-family: 'Noto Sans KR';}
.screen_out {display:none;}
h2 {position : absolute; left : 100px; top: 100px;}
main {max-width: 1200px;margin:20px auto 0;}

/* li 공통 */
#port {display:flex;flex-wrap: wrap; align-items:center; justify-content:space-between;}
#port>li {min-width:300px;border-radius: 30px;margin:10px;flex:1;position:relative;transform-style: preserve-3d; perspective: 1000px;}
#port p {text-align: center;padding:0 20px;}
#port .flip-front {transform:rotateY(0deg); transform-style:preserve-3d;}
#port>li:hover .flip-front {transform: rotateY(-180deg); }
#port>li .flip-back {position:absolute; top:0; left:0; width:100%; transform:rotateY(180deg); transform-style:preserve-3d;}
#port>li:hover .flip-back {transform:rotateY(0deg); }
#port>li .inner, #port .txt {position:absolute; left:0; width:100%; padding:60px 10px; perspective:inherit; z-index:2; transform:translateY(-50%) translateZ(60px) scale(.94); top:50%; }
#port .flip-front p:nth-child(1) {border-radius: 20px 20px 0 0;overflow: hidden;padding:0;}
#port .flip-front p:nth-child(1) img {height:100%;width:100%;object-fit:cover;}
#port .flip-back p:nth-child(1) {padding-top: 60px;font-size: 25px; font-weight: bold;}
#port .flip-back p:nth-child(2) {padding:10px 0px;font-size:16px;font-weight:normal;}
#port .flip-back p:nth-child(3) {padding-bottom:25px;}
#port .flip-back a {display:block;width:120px; margin:auto;font-size:10px; padding:7px 10px; border-radius:30px; letter-spacing:1px; transition:ease all 0.3s; text-decoration:none;background-color:#fdf8f7;color:#8b31a9;border:2px solid #8b31a9;margin:30px auto 30px;}
#port .flip-back a:hover {background-color:#8b31a9; color:#fdf8f7;}
#port .flip-back p:nth-child(4) {padding:0;border-radius: 0 0 20px 20px;font-weight: 100;font-size:12px;}
#port li {color:#300817;}

/* 3D Filp */

/* #flip-container>li {position:relative;flex:1; transform-style: preserve-3d; perspective: 1000px; } */
/* #flip-container>li .flip-front,#flip-container>li .flip-back {background-size:cover; background-position:center; border-radius:8px; min-height:475px; transition:transform 0.7s cubic-bezier(.4,.2,.2,1); backface-visibility:hidden;} */
/* #flip-container>li .flip-front {transform:rotateY(0deg); transform-style:preserve-3d;} */
/* #flip-container>li:hover .flip-front {transform: rotateY(-180deg); } */
/* #flip-container>li .flip-back {position:absolute; top:0; left:0; width:100%; transform:rotateY(180deg); transform-style:preserve-3d;} */
/* #flip-container>li:hover .flip-back {transform:rotateY(0deg); } */
/* #flip-container>li .inner {position:absolute; left:0; width:100%; padding:60px; perspective:inherit; z-index:2; transform:translateY(-50%) translateZ(60px) scale(.94); top:50%; } */

/* 작품 */
#port .flip-front,#port .flip-back {height:350px;border-radius:20px;font-size:25px;text-shadow:0 0 10px #fff, 0 0 30px #fff ;transition:transform 0.7s cubic-bezier(.4,.2,.2,1); backface-visibility:hidden;}
#port .flip-front h3 {text-align: center;padding-top:150px;}
#port>li>.flip-back {overflow: hidden;}
#port>li>.flip-back .bg {filter: blur(10px) brightness(.5);border:1px solid purple;height:100%;}
#port>li>.flip-back .txt {position: absolute;top:0;left:0;text-shadow:none;color:#fff;}
#port>li>.flip-back .txt {margin-top: 130px;}

#port>li:nth-child(1)>.flip-front {background:center/cover url(../img/01.png);}
#port>li:nth-child(1)>.flip-back .bg {background:center/cover url(../img/01.png)}

#port>li:nth-child(2)>.flip-front {background:center/cover url(../img/02.png);}
#port>li:nth-child(2)>.flip-back .bg {background:center/cover url(../img/02.png)}

#port>li:nth-child(3)>.flip-front {background:center/cover url(../img/03.png);}
#port>li:nth-child(3)>.flip-back .bg {background:center/cover url(../img/03.png)}

#port>li:nth-child(4)>.flip-front {background:center/cover url(../img/04.png);}
#port>li:nth-child(4)>.flip-back .bg {background:center/cover url(../img/04.png)}

#port>li:nth-child(5)>.flip-front {background:center/cover url(../img/05.gif);}
#port>li:nth-child(5)>.flip-back .bg {background:center/cover url(../img/05.gif)}

#port>li:nth-child(6)>.flip-front {background:center/cover url(../img/06.png);}
#port>li:nth-child(6)>.flip-back .bg {background:center/cover url(../img/06_original.png)}

#port>li:nth-child(7)>.flip-front {background:center/cover url(../img/07.png);}
#port>li:nth-child(7)>.flip-back .bg {background:center/cover url(../img/07_original.png)}

#port>li:nth-child(8)>.flip-front {background:center/cover url(../img/08.png);}
#port>li:nth-child(8)>.flip-back .bg {background:center/cover url(../img/08_original.png)}

#port>li:nth-child(9)>.flip-front {background:center/cover url(../img/09.gif);}
#port>li:nth-child(9)>.flip-back .bg {background:center/cover url(../img/09.gif);}

#port>li:nth-child(10)>.flip-front {background:center/cover url(../img/10.gif);}
#port>li:nth-child(10)>.flip-back .bg {background:center/cover url(../img/10.gif);}

#port>li:nth-child(11)>.flip-front {background:center/cover url(../img/11.gif);}
#port>li:nth-child(11)>.flip-back .bg {background:center/cover url(../img/11.gif);}

#port>li:nth-child(12)>.flip-front {background:center/cover url(../img/12.gif);}
#port>li:nth-child(12)>.flip-back .bg {background:center/cover url(../img/12.gif);}

#port>li:nth-child(13)>.flip-front {background:center/cover url(../img/13.gif);}
#port>li:nth-child(13)>.flip-back .bg {background:center/cover url(../img/13.gif);}

#port>li:nth-child(14)>.flip-front {background:center/cover url(../img/14.gif);}
#port>li:nth-child(14)>.flip-back .bg {background:center/cover url(../img/14.gif);}

#port>li:nth-child(15)>.flip-front {background:center/cover url(../img/15.gif);}
#port>li:nth-child(15)>.flip-back .bg {background:center/cover url(../img/15.gif);}

#port>li:nth-child(16)>.flip-front {background:center/cover url(../img/16.png);}
#port>li:nth-child(16)>.flip-back .bg {background:center/cover url(../img/16.png);}

#port>li:nth-child(17)>.flip-front {background:center/cover url(../img/17.png);}
#port>li:nth-child(17)>.flip-back .bg {background:center/cover url(../img/17.png);}

#port>li:nth-child(18)>.flip-front {background:center/cover url(../img/18.png);}
#port>li:nth-child(18)>.flip-back .bg {background:center/cover url(../img/18.png);}


footer {text-align:center; padding: 50px; }
footer address {color: #adaaaa;}


header {text-align:center; padding: 40px; }
header {color: #8b31a9; font-size:24px;}