/*
Theme Name: WONBIN
Author: KARATEDAISY
Version: 1.0
*/

@charset "utf-8";

*{
	margin:0; 
	padding:0;
}

body {
	background: #fff;
	font-family: proxima-nova-thai, pretendard, sans-serif;
	/* font-weight: 400; */
	font-style: normal;
	line-height: 125%;
	overflow-x: hidden;
	-ms-overflow-style: none;
  	scrollbar-width: none;
	touch-action: manipulation;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	scroll-behavior: smooth;
}
	
body::-webkit-scrollbar {
	display: none;
}

a {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-decoration: none;
}

a:focus {
	outline: none;
}

p {
	line-height: 145%;
}

h2 { text-transform: uppercase; }

img {
	display: block; 
	width: 100%; 
	height: 100%; 
	object-fit: contain;
	pointer-events: none;
}

video {
	pointer-events: none;
}

::selection {
	background: #000;
	color: #fff;
}

figcaption { display: none; }
.wp-element-caption { display: none; }

.main-wrapper { margin: 30px; }

.wb-m { display: none; }
.wb-pc { display: block; }

/* MENU */

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}

#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}

#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
  display: block;
  transition: 0.3s;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: fixed;
  top: 50px;
  right: 50px;
  width: 30px;
  height: 32px;
  cursor: pointer;
  z-index: 9;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #222;
  transition-duration: .25s;
}
.menu__btn > span::before {
  content: '';
  top: -10px;
}
.menu__btn > span::after {
  content: '';
  top: 10px;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.menu__box {
	display: none;
	position: fixed;
	visibility: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 200px 0 0 0;
	text-align: center;
	list-style: none;
	backdrop-filter: blur(20px);
	background-color: rgba(255, 255, 255, 0.4);
	transition-duration: .25s;
	transition: 0.3s;
	animation: fadeIn 0.3s;
	z-index: 3;
	overflow: hidden;
}

.menu__item {
	display: block;
	width: 100%;
	padding: 15px 0 15px 0;
	color: #555;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition-duration: .25s;
	transition: 0.3s;
}
.menu__item:hover {
  color: #222;
	transition: 0.3s;
}

/* PROFILE */

.wb-profile-logo {
	width: auto;
	margin: 40px auto auto auto;
	text-align: center;
}

.wb-profile-img-main {
	width: 480px;
	margin: 50px auto 50px auto;
	text-align: center;
}

.wb-profile-detail {
	width: 640px;
	margin: 0px auto 0px auto;
	text-align: left;
	border-top: 1px dotted #ddd;
}

.wb-profile-list {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 50px;
	padding: 15px 50px 15px 50px;
	border-bottom: 1px dotted #ddd;
	text-align: left;
	line-height: 100%;
}

.wb-profile-list-cat {
	width: 150px;
	font-weight: 400;
	text-align: right;
}

.wb-profile-list-desc {
	width: 390px;
	font-weight: 700;
	text-align: left;
	display: flex;
}

.wb-profile-list-desc img { width: auto; height: 15px; margin: 0 4px 0 0; display: block; }

.wb-profile-gallery {
	width: 720px;
	margin: 50px auto 0px auto;
	text-align: left;
}

.wb-profile-gallery img:hover { opacity: 0.8; }

.wb-profile-gallery a { opacity: 1; transition: 0.3s; }
.wb-profile-gallery a:hover { opacity: 0.8; transition: 0.3s; }

/* DISCO */

.wb-disco-page,
.wb-disco-page-all {
	width: 720px;
	margin: 50px auto 50px auto;
	text-align: left;
}

.wb-disco-page p {
	margin: 0 0 20px 0;
	text-align: left;
	line-height: 155%;
}

.wb-disco-page img {
	margin: 0 0 20px 0;
	text-align: center;
}

.wb-disco-content p {
	margin: 0 0 20px 0;
	text-align: left;
	line-height: 135%;
}

.wb-disco-track {
	width: auto;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 20px 0 20px 0;
	margin: 0 0 20px 0;
	display: grid;
	grid-template-columns: 30px auto;
}

.wb-disco-track-no {
	text-align: left;
}

.wb-disco-track-title {
	text-align: left;
	font-weight: bold;
}

/* GALLERY */

.wb-gallery-page {
	width: 720px;
	margin: 50px auto 0px auto;
	text-align: left;
}

.wb-gallery-tab {
	overflow-x: auto;
	margin: 50px auto auto auto;
	text-align: center;
}

.wb-gallery-title {
	font-size: 24px;
	font-weight: 500;
	margin: 50px 0 30px 0;
}

/* VIDEO */

.wb-video-page {
	width: 720px;
	margin: 50px auto 0px auto;
	text-align: left;
}

.wb-video-page p {
	line-height: 100%;
}

.wb-video-tab {
	overflow-x: auto;
	margin: 50px auto auto auto;
	text-align: center;
}

.wb-video-thumb {
	
}

.wb-video-title {
	font-size: 16px;
	font-weight: 500;
	margin: 20px 0 5px 0;
}

.wb-video-desc {
	font-size: 12px;
	margin: 0 0 40px 0;
}

/* TAB */

.wb-tab-links {
	color: #999;
	cursor: pointer;
	transition: 0.3s;
	font-size: 20px;
	padding: 10px 0 10px 0;
    margin: 0 20px 0 20px;
	display: inline-block;
}

.wb-tab-links:hover {
	color: #000;
}

.wb-tab-links.active {
	color: #000;
}

.wb-tab-content {
	display: none;
	-webkit-animation: fadeEffect 0.3s;
	animation: fadeEffect 0.3s;
}

/* Fade in tabs
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
} */

/* REFERENCE */

.wb-refer {
	margin: 50px auto 0px auto;
	width: 720px;
	font-size: 13px;
	font-weight: 400;
	line-height: 125%;
	border-bottom: 1px dotted #ddd;
	padding: 0 0 50px 0;
}

.wb-refer-title,
.wb-refer-title p {
	margin: auto auto 50px auto;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}

.wb-refer p {
	margin: auto auto 20px auto;
	font-size: 13px;
	line-height: 125%;
}

.wb-refer h3 {
	margin: auto auto 20px auto;
}

.wb-refer li {
	margin: auto auto 3px 25px;
}

.wb-refer a {
	text-decoration: underline;
}

.wb-refer a:hover {
	text-decoration: none;
}

/* COOKIE */

.wb-cookie-consent {
	margin: 50px auto 0px auto;
	width: 720px;
	font-size: 13px;
	font-weight: 400;
	line-height: 125%;
	border-bottom: 1px dotted #ddd;
	padding: 0 0 30px 0;
}

.wb-cookie-consent-title,
.wb-cookie-consent-title p {
	margin: auto auto 50px auto;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}

.wb-cookie-consent p {
	margin: auto auto 20px auto;
	font-size: 13px;
	line-height: 125%;
}

.wb-cookie-consent h3 {
	margin: auto auto 20px auto;
}

/* FOOTER */

.wb-footer-wrapper {
	padding: 50px 0 50px 0;
	margin: auto;
	font-size: 10px;
	line-height: 125%;
	font-weight: 300;
}

.wb-footer-wrapper a { text-decoration: underline; }
.wb-footer-wrapper a:hover { text-decoration: none; }

.wb-footer-sns {
	padding: 0 0 45px 0;
	font-size: 24px;
}

.wb-footer-sns a {
	margin: 0 14px 0 14px;
	text-decoration: none;
}

.wb-notice {
	background: #fde3e3;
	width: 480px;
	border-radius: 5px;
	border: 1px dotted #cf2e2e;
	padding: 10px;
	margin: 50px auto 0 auto;
}

.wb-slide-footer-wrapper {
	padding: 50px 0 0 0;
	margin: 0;
	font-size: 10px;
	line-height: 125%;
	font-weight: 300;
	color: #fff;
}

.wb-slide-footer-wrapper a { text-decoration: underline; color: #fff; }
.wb-slide-footer-wrapper a:hover { text-decoration: none; color: #fff; }

/* LANDING PAGE */

.section {
	position: relative;
	text-align: center;
	background-size: cover;
	/* color: #fff; */
	overflow: hidden;
}

.wb-slide-logo {
	width: 300px;
	margin: auto;
}

.wb-slide-content {
	color: #fff;
	width: auto;
	position: absolute;
	text-align: center;
	margin: 0px;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
  /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}

.wb-slide-profile-wrapper {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
	width: 100%;
	height: 100%;
}

.wb-slide-profile-img {
	background: url(https://www.parkwonbin.com/assets/web/wp-content/uploads/2025/07/Berriz_20250715212447-rotated.jpg);
	background-size: cover;
	background-position: center center;
}

.wb-background-video {
	background-size: 100% 100%;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	position: absolute;
	object-fit: cover;
	top: 0;
	left: 0;
	right: 0;
    bottom: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.6;
}

.wb-background-img {
	background-size: 100% 100%;
	background-size: cover;
	background-position: bottom center;
	overflow: hidden;
	position: absolute;
	object-fit: cover;
	top: 0;
	left: 0;
	right: 0;
    bottom: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.25;
}

.wb-background-img-right {
	background-size: 100% 100%;
	background-size: cover;
	background-position: bottom center;
	overflow: hidden;
	position: absolute;
	object-fit: cover;
	top: 0;
	left: 50%;
	right: 0;
    bottom: 0;
	width: 50%;
	height: 100%;
	z-index: -1;
	opacity: 0.25;
}

.wb-idid-sns {
	padding: 50px 0 50px 0;
	font-size: 25px;
	color: #fff;
	border-bottom: 1px dotted #888;
}

.wb-idid-sns-logo {
	width: 200px;
	margin: auto auto 0px auto;
}

.wb-idid-sns a { color: #fff; margin: auto 10px auto 10px; }
.wb-idid-sns a:hover { color: #fff; margin: auto 10px auto 10px; }

/* MOBILE */

@media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) { 
		
	.disable-dbl-tap-zoom {
    	touch-action: manipulation;
  	}
		
	body {
		background: #fff;
		color: #222;
		font-family: proxima-nova-thai, pretendard, sans-serif;
		font-size: 13px;
		overflow-x: hidden;
		-ms-overflow-style: none;
  		scrollbar-width: none;
		touch-action: manipulation;
		scroll-behavior: smooth;
	}
	
	body::-webkit-scrollbar {
		display: none;
	}
		
	a {
		color: #000;
		text-decoration: none;
	}

	a:hover {
		color: #000;
		text-decoration: none;
	}
		
	a:focus {
		outline: none;
	}
		
	input:focus {
		outline: none;
	}

	p {
		line-height: 145%;
	}

	h2 { text-transform: uppercase; }

	img {
		display: block; 
		width: 100%; 
		height: 100%; 
		object-fit: contain;
		pointer-events: none;
	}

	video {
		pointer-events: none;
	}

	::selection {
		background: #73654d;
		color: #fff;
	}
	
	figcaption { display: none; }
	.wp-element-caption { display: none; }
		
	.wb-m { display: block; }
	.wb-pc { display: none; }
		
	/* MENU */
		
	.menu__btn {
	  top: 25px;
	  right: 25px;
	  width: 27px;
	  height: 23px;
	}
		
	/* PAGE */
	
	.wb-gallery-page,
	.wb-disco-page-all,
	.wb-disco-page,
	.wb-video-page {
		width: auto;
		margin: 30px 25px 30px 25px;
		text-align: left;
		font-size: 14px;
	}
		
	/* GALLERY */
		
	.wb-gallery-tab-wrapper {
		width: auto;
		overflow-x: scroll;
		-ms-overflow-style: none;
  		scrollbar-width: none;
	}

	.wb-gallery-tab {
		width: 560px;
		display: flex;
		overflow-x: scroll;
		overflow-y: hidden;
		-ms-overflow-style: none;
  		scrollbar-width: none;
		scroll-snap-type: x mandatory;
		padding: 15px 0 15px 0;
		margin: 20px auto auto 15px;
	}
		
	.wb-gallery-tab-wrapper::-webkit-scrollbar,
	.wb-gallery-tab::-webkit-scrollbar {
		display: none;
	}
		
	/* PROFILE */

	.wb-profile-img-main {
		width: 240px;
		margin: 40px auto 50px auto;
		text-align: center;
	}
		
	.wb-profile-gallery {
		width: auto;
		margin: 50px 50px 0px 50px;
		text-align: left;
	}
		
	.wb-profile-detail {
		width: auto;
		margin: 0px 50px 0px 50px;
		text-align: left;
		border-top: 1px dotted #ddd;
	}

	.wb-profile-list {
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 0px;
		padding: 15px 0px 15px 0px;
		border-bottom: 1px dotted #ddd;
		text-align: left;
		line-height: 125%;
	}

	.wb-profile-list-cat {
		width: 125px;
		font-weight: 500;
		text-align: left;
	}

	.wb-profile-list-desc {
		width: 200px;
		font-weight: bold;
		text-align: left;
		display: flex;
	}

	.wb-profile-list-desc img { width: auto; height: 15px; margin: 0 4px 0 0; }
		
	/* DISCO */
		
	.wb-disco-page p {
		margin: 0 0 20px 0;
		text-align: left;
		font-size: 14px;
		line-height: 155%;
	}
		
	/* VIDEO */
		
	.wb-video-tab-wrapper {
		width: auto;
		overflow-x: scroll;
		-ms-overflow-style: none;
  		scrollbar-width: none;
	}

	.wb-video-tab {
		width: 560px;
		display: flex;
		overflow-x: scroll;
		overflow-y: hidden;
		-ms-overflow-style: none;
  		scrollbar-width: none;
		scroll-snap-type: x mandatory;
		padding: 15px 0 15px 0;
		margin: 20px auto auto 15px;
	}
		
	.wb-video-tab-wrapper::-webkit-scrollbar,
	.wb-video-tab::-webkit-scrollbar {
		display: none;
	}
		
	/* TAB */

	.wb-tab-links {
		float:left
		width: fit-content;
		color: #ccc;
		cursor: pointer;
		transition: 0.3s;
		font-size: 20px;
		margin: 0 10px 0 10px;
		padding: 10px 0 10px 0;
		scroll-snap-align: start;
  		scroll-snap-stop: normal;
		scroll-margin: 25px;
	}

	.wb-tab-links:hover {
		color: #000;
		transition: 0.3s;
	}

	.wb-tab-links.active {
		color: #000;
		text-decoration: underline 2px;
		text-underline-offset: 8px;
		transition: 0.3s;
	}

	.wb-tab-content {
		display: none;
		-webkit-animation: fadeEffect 0.3s;
		animation: fadeEffect 0.3s;
	}
		
	/* COOKIE */
		
	.wb-cookie-consent {
		margin: 50px 25px 0px 25px;
		width: auto;
		font-size: 13px;
		line-height: 125%;
	}
		
	.wb-refer {
		margin: 50px 25px 0px 25px;
		width: auto;
		font-size: 12px;
		line-height: 125%;
	}
		
	.wb-notice {
		background: #fde3e3;
		width: auto;
		border-radius: 5px;
		border: 1px dotted #cf2e2e;
		padding: 10px;
		margin: 25px 25px 0 25px;
	}
		
	.wb-slide-logo {
		width: auto;
		margin: 0 100px;
	}
		
}