@media (max-width:1023px) {
.col-md-4 { width: 100%; height: 425px; } .part { width: auto; height: 60px; text-align: center; } .part h1 { font-family: 'Nanum Pen Script', cursive; font-size: 72px; } .flip { -webkit-perspective: 800; width: 300px; height: 400px; position: relative; margin: 50px auto; } .flip .card.flipped { -webkit-transform: rotatey(-180deg); } .flip .card { width: 100%; height: 100%; margin: auto; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .namecard { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; z-index: 2; font-size: 3em; text-align: center; line-height: 200px; } .flip .card .front { position: absolute; z-index: 1; cursor: pointer; letter-spacing: 1px; margin: auto; border-radius: 15px; overflow: hidden; background-color: rgba(255, 255, 255, 1); letter-spacing: 1px; color: rgb(8, 7, 1); border-radius: 15px; overflow: hidden; cursor: pointer; padding: 15px; border-width: 10px; border-style: solid; -webkit-border-image: url(/assets/img/border.png) 20% stretch; -moz-border-image: url(/assets/img/border.png) 20% stretch; /* Safari 3.1-5 */ -o-border-image: url(/assets/img/border.png) 20% stretch; /* Opera 11-12.1 */ border-image: url(/assets/img/border.png) 20% stretch; } .flip .card .back { -webkit-transform: rotatey(-180deg); cursor: pointer; background-color: rgba(255, 255, 255, 1); letter-spacing: 1px; border-radius: 15px; overflow: hidden; border-width: 10px; border-style: solid; padding: 15px; -webkit-border-image: url(/assets/img/border.png) 20% stretch; -moz-border-image: url(/assets/img/border.png) 20% stretch; /* Safari 3.1-5 */ -o-border-image: url(/assets/img/border.png) 20% stretch; /* Opera 11-12.1 */ border-image: url(/assets/img/border.png) 20% stretch;
} .namecard img { width: 250px; height: 250px; margin: auto; border-radius: 8px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); transition-duration: 0.4s; } .txt { position: absolute; width: 250px; height: 100px; top: 250px; text-align: center; } .txt h2 { font-family: 'Nanum Pen Script', cursive; font-size: 28px; color: #091d20; letter-spacing: 2px; } .txt h5 { font-family: 'Nanum Pen Script', cursive; color: #0094ad; font-size: 22px; letter-spacing: 2px; } .txt HR { /*position:absolute;*/ /*top:250px;*/ margin-left: auto; margin-right: auto; } .txt span { color: rgb(129, 104, 182); font-size: 11px; } .card .back h2 { font-family: 'Nanum Pen Script', cursive; font-size: 24px; letter-spacing: 6px; } .card .back span { font-family: 'Nanum Pen Script', cursive; padding: 0px; font-size: 18px; color: #0094ad; letter-spacing: 2px; } .card .back h5 { font-family: 'Nanum Pen Script', cursive; color: #0094ad; font-size: 22px; letter-spacing: 4px; } .card .back HR { margin-left: auto; margin-right: auto; } .card .back p { font-family: 'Nanum Pen Script', cursive; width: 22 em; word-wrap: break-word; font-size: 24px; font-weight: 900; word-wrap: break-word; color: rgba(13, 1, 6, 0.96); line-height: 24px; /*display: block;*/ } .flip .card .namecard .logo { width: 80px; height: 106px; border-radius: 100%; position: absolute; transition-duration: 0.5s; right: 0px; bottom: -20px; background-image: url(/assets/img/fish.png); } /* 動畫 */ .tit h1 { /*position: absolute;*/ text-align: center; font-size: 80px; font-family: 'Nanum Pen Script', cursive; color: rgb(55, 55, 55); font-weight: bold; letter-spacing: 5px; /*font-family: 'Open Sans', sans-serif;*/ } .tit { height: 200px; /*border: 2px solid rgb(173, 83, 213);*/ }
}
@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@media (min-width:1024px) {
.part { width: auto; height: 100px; text-align: center; } .part h1 { font-family: 'Nanum Pen Script', cursive; font-size: 90px; } .flip { -webkit-perspective: 800; width: 300px; height: 400px; position: relative; margin: 50px auto; } .flip .card.flipped { -webkit-transform: rotatey(-180deg); } .flip .card { width: 100%; height: 100%; margin: auto; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; } .flip .card .namecard { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; z-index: 2; font-family: Georgia; font-size: 3em; text-align: center; line-height: 200px; } .flip .card .front { position: absolute; z-index: 1; cursor: pointer; letter-spacing: 1px; margin: auto; border-radius: 15px; overflow: hidden; background-color: rgba(255, 255, 255, 1); letter-spacing: 1px; color: rgb(8, 7, 1); border-radius: 15px; overflow: hidden; cursor: pointer; border: 10px solid transparent; padding: 15px; -webkit-border-image: url(/assets/img/border.png) 20% stretch; -moz-border-image: url(/assets/img/border.png) 20% stretch; /* Safari 3.1-5 */ -o-border-image: url(/assets/img/border.png) 20% stretch; /* Opera 11-12.1 */ border-image: url(/assets/img/border.png) 20% stretch; } .flip .card .back { -webkit-transform: rotatey(-180deg); cursor: pointer; background-color: rgba(255, 255, 255, 1); letter-spacing: 1px; border-radius: 15px; overflow: hidden; border: 10px solid transparent; padding: 15px; -webkit-border-image: url(/assets/img/border.png) 20% stretch; -moz-border-image: url(/assets/img/border.png) 20% stretch; /* Safari 3.1-5 */ -o-border-image: url(/assets/img/border.png) 20% stretch; /* Opera 11-12.1 */ border-image: url(/assets/img/border.png) 20% stretch;
} .namecard img { width: 250px; height: 250px; margin: auto; border-radius: 8px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); transition-duration: 0.4s; }
.txt { position: absolute; width: 250px; height: 100px; top: 250px; text-align: center;
} .txt h2 { font-family: 'Nanum Pen Script', cursive; font-size: 28px; color: #091d20; letter-spacing: 2px; } .txt h5 { font-family: 'Nanum Pen Script', cursive; color: #0094ad; font-size: 22px; letter-spacing: 2px; z-index: 2; } .txt HR { /*position:absolute;*/ /*top:250px;*/ margin-left: auto; margin-right: auto; } .txt span { color: rgb(129, 104, 182); font-size: 11px; } .card .back h2 { font-family: 'Nanum Pen Script', cursive; font-size: 24px; letter-spacing: 6px; } .card .back span { font-family: 'Nanum Pen Script', cursive; padding: 0px; font-size: 18px; color: #0094ad; letter-spacing: 2px; } .card .back h5 { font-family: 'Nanum Pen Script', cursive; color: #0094ad; font-size: 22px; letter-spacing: 4px; } .card .back HR { margin-left: auto; margin-right: auto; } .card .back p { font-family: 'Nanum Pen Script', cursive; width: 22 em; word-wrap: break-word; font-size: 24px; font-weight: 900; word-wrap: break-word; color: rgba(13, 1, 6, 0.96); line-height: 24px; /*display: block;*/ } .flip .card .namecard .logo { width: 80px; height: 106px; border-radius: 100%; position: absolute; transition-duration: 0.5s; right: 0px; bottom: -20px; background-image: url(/assets/img/fish.png); }
.tit h1 { /*position: absolute;*/ text-align: center; font-size: 80px; font-family: 'Nanum Pen Script', cursive; color: rgb(55, 55, 55); font-weight: bold; letter-spacing: 5px; /*font-family: 'Open Sans', sans-serif;*/ } .tit { height: 200px; /*border: 2px solid rgb(173, 83, 213);*/ }
}