a { text-decoration:none; color:inherit; }
a:hover { text-decoration:none; }
body {overflow-y:auto; overflow-x:hidden; font-family: 'Noto Sans KR', sans-serif;}
body, html { margin: 0; padding: 0; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 16px;}
div, ol, ul, li, hr, p {margin:0; padding:0; list-style:none;}
textarea {padding:0; outline:0;}
a {color: #333; text-decoration: none; outline: none}
a:hover, a:active {text-decoration: none; color:#333;}
*{ box-sizing: border-box; }

#portfolio {padding: 120px 0 0;}
#portfolio .port-top-txt {width: 90%; margin: 0 auto; background: #fff;}
#portfolio h1 {margin: 0 0 20px; font-size: 5rem; font-weight: 800; letter-spacing: -2px; line-height: 1.2;}
#portfolio h1 span {color: hsla(0,0%,100%,0); -webkit-text-stroke: 2px #000;}
#portfolio p {font-size: 1.5rem; font-weight: 600; line-height: 1.4; color: #333; letter-spacing: -.5px;}
#portfolio p small {display: block; margin-top: 6px; font-size: 0.9375rem; font-weight: 400; color: #6e6e6e;}
#portfolio .p-list {width: 100%; padding: 100px 5%; display: flex; align-items: flex-start; flex-wrap: wrap; margin-top: 40px; background: #121212;}
#portfolio .p-list li {width: 50%; height: 100%; margin-bottom: 20px;}
#portfolio .p-list li:nth-child(odd) {padding-right: 2rem;}
#portfolio .p-list li:nth-child(even) {padding-left: 2rem;}

#portfolio .thumb-wrap {width: 100%; height: 440px; position: relative; transform: scale(1); transition: transform 0.4s; overflow: hidden;}
#portfolio .thumb-wrapIn {position: relative; width: 100%; height: 100%;}
#portfolio .p-list li:hover .thumb-wrap {transform: scale(0.95);}
#portfolio .p-list li img {position: absolute; top: 50%; left: 50%; transform: scale(1) translate(-50%, -50%); transition: transform 0.35s; width: auto; height: 100%;}
#portfolio .p-list li img.over {opacity: 0;}
#portfolio .p-list li:hover .thumb-wrap img {transform: scale(1.1) translate(-50%, -50%);}
#portfolio .p-list li:hover .thumb-wrap img.over {opacity: 1;}
#portfolio .p-list li:nth-child(2n) {margin-top: 50px;}

#portfolio .p-list li a {position: relative;}

#portfolio .p-list-txt {margin-left: 20px;}
#portfolio .p-list-txt span {display: block; margin: 20px 0 0; font-size: 1rem; color: #fff; opacity: 0.5;}
#portfolio .p-list-txt span.en {letter-spacing: 0.5px;}
#portfolio .p-list-txt strong {display: block; font-size: 1.75rem; font-weight: 700; color: #fff;}
#portfolio .small-txt {position: absolute; top: 42px; left: -54px; transform: rotate(-90deg); font-size: 0.875rem; font-weight: 500; color: rgba(255, 255, 255, 0.35); z-index: 9;}

iframe { width:100%; height:100vh; }

.nopida-btn {position: fixed; top: 280px; right: 5%; z-index: 9;}
.nopida-btn a{display: block; padding-top: 28px; width: 104px; height: 104px; border-radius: 100%; background: #6a11cf; font-size: 1.125rem; line-height: 1.2; font-weight: 700; text-align: center; border: 0; color: rgba(255, 255, 255, 0.8); z-index: 9;}
.nopida-btn:hover a {font-weight: 800; color: rgba(255, 255, 255, 1); z-index: 8;}
.nopida-btn .bg {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 114px; height: 114px; border-radius: 100%; background: rgba(106, 17, 207, 0.55); opacity: 0.5; animation: crescendo 1.6s alternate infinite ease-in; z-index: -1;}

@keyframes crescendo {
  0%   {transform: translate(-50%, -50%) scale(.5);}
  100% {transform: translate(-50%, -50%) scale(1.3);}
}

@media screen and (max-width: 1200px) {
	#portfolio .thumb-wrap {height: 300px;}
	#portfolio .p-list li:nth-child(odd) {padding-right: 1.25rem;}
	#portfolio .p-list li:nth-child(even) {padding-left: 1.25rem;}
	#portfolio .p-list-txt strong {font-size: 1.5rem;}
	#portfolio .p-list-txt span {font-size: 0.9375rem;}
	#portfolio p small {font-size: 0.875rem;}
}

@media screen and (max-width: 876px) {
	#portfolio .thumb-wrap {height: 360px;}
	#portfolio h1 {font-size: 3.725rem;}
	#portfolio p {font-size: 1.375rem;}
	#portfolio .p-list-txt strong {font-size: 1.5rem;}
}

@media screen and (max-width: 767px) {
	#portfolio h1 {font-size: 2.5rem;}
	#portfolio p {font-size: 1.125rem;}
	#portfolio h1 span {-webkit-text-stroke: 1.8px #000;}

	#portfolio .p-list {display: block;}
	#portfolio .p-list li {width: 100%; margin-top: 50px;}
	#portfolio .p-list li:nth-child(1) {margin-top: 0;}
	#portfolio .thumb-wrap {height: 260px;}
	#portfolio .p-list li:nth-child(odd) {padding-right: 0;}
	#portfolio .p-list li:nth-child(even) {padding-left: 0;}
	#portfolio .p-list li:nth-child(2n) {margin-top: 50px;}
	#portfolio .p-list-txt span {font-size: 0.875rem;}
	#portfolio .p-list-txt strong {font-size: 1.25rem;}
	#portfolio .p-list li img {width: 100%; height: auto;}

	#portfolio .small-txt {top: 35px; left: -48px; font-size: 0.75rem;}

	.nopida-btn a{padding-top: 24px; width: 94px; height: 94px;}
	.nopida-btn:hover a {font-size: 1rem; font-weight: 800; color: rgba(255, 255, 255, 1); z-index: 8;}
	.nopida-btn .bg {width: 104px; height: 104px;}
}

@media screen and (max-width: 480px) {
	#portfolio .thumb-wrap {height: 220px;}
	#portfolio .p-list li img {width: auto; height: 100%;}
}
}