::-webkit-scrollbar {
	background-color: transparent;
	width: 0px;
}


html {
	scroll-behavior: smooth;
}

body {
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

img {
	-webkit-user-select: none;
}


.floating {
	position: fixed;
	left: 50%;
	top: 179px;
	margin-left: 445px;
	z-index: 999;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.floating_item_box {
	position: fixed;
	top: 391px;
	width: 160px;
	height: 89px;
	cursor: pointer;
	overflow: hidden;
}
.floating_item {
	position: absolute;
	top: 38px;
	margin-left: 30px;
	cursor: pointer;
	animation: floating_item ease-in-out 2s infinite;
}

@keyframes floating_item {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	60% {
		opacity: 1;
		transform: translateY(0);
	}
	75% {
		opacity: 0;
		transform: translateY(10px);
	}
	80% {
		opacity: 1;
		transform: translateY(-14px);
	}
	88% {
		opacity: 1;
		transform: translateY(2px);
	}
	93% {
		opacity: 1;
		transform: translateY(-8px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.floating {
	display: inline-block;
}
.mfloating {
	display: none;
}


.bg_01 {
	background-image: url(../img/bg01.jpg);
	overflow: hidden;
	width: 1920px;
	height: 1585px;
	position: relative;
	margin: auto;
	background-position: top;
	background-repeat: no-repeat;
	align-items: center;
	text-align: center;
	max-width: 100%;
	z-index: 2;
	/*width: 100vw;*/
	/*background-position-y: bottom;*/
	/*background-size: cover;*/
}

.logo {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 55px;
}

.title {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 100px;
	gap: 13px;
	display: flex;
	flex-direction: column;
}.mouse-container {
	 position: fixed;
	 left: 50%;
	 bottom: 70px;
	 transform: translateX(-50%);
	 z-index: 9999;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 transition: opacity 0.4s;
 }

.mouse {
	position: relative;
	width: 50px;
	height: 90px;
	border: 3px solid #333;
	border-radius: 60px;
	transition: opacity 0.4s;
	background: transparent;
}

.mouse::before {
	content: '';
	width: 12px;
	height: 12px;
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #333;
	border-radius: 50%;
	opacity: 1;
	animation: wheel 2s infinite;
}

@keyframes wheel {
	to {
		opacity: 0;
		top: 60px;
	}
}

.scroll-text {
	margin-top: 12px;
	font-size: 18px;
	color: #333;
	text-decoration: none;
	font-family: 'Pretendard', 'sans-serif';  /* ← 여기 추가 */
	letter-spacing: 1px;
	transition: opacity 0.4s;
}

.mouse-container.hide,
.mouse-container.hide .scroll-text {
	opacity: 0;
	pointer-events: none;
}

.c01 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -970px;
	top: 0;
	animation: cloud-move 10s linear infinite;
	will-change: transform;
	z-index: -1;
}

@keyframes cloud-move {
	0% {
		transform: translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(200px);
		opacity: 0;
	}
}

.c02 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 670px;
	top: 0;
	width: 601px;
	animation: cloud-move-left 10s linear infinite;
	z-index: -1;
}

@keyframes cloud-move-left {
	0% {
		transform: translateX(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(-500px);
		opacity: 0;
	}
}

.ct01 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -865px;
	top: 0;
	width: 190px;
	transform-origin: top center;
	animation: curtainSwingLeft 7s infinite ease-in-out;
}

@keyframes curtainSwingLeft {
	0%   { transform: translateX(-50%) rotate(0deg); }
	15%  { transform: translateX(-50%) rotate(1deg); }
	30%  { transform: translateX(-50%) rotate(-1deg); }
	45%  { transform: translateX(-50%) rotate(0.7deg); }
	60%  { transform: translateX(-50%) rotate(-0.5deg); }
	75%  { transform: translateX(-50%) rotate(0.5deg); }
	100% { transform: translateX(-50%) rotate(0deg); }
}


.ct02 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 869px;
	top: 0;
	width: 184px;
	transform-origin: top center;
	animation: curtainSwingBottom 7s infinite ease-in-out;
}

@keyframes curtainSwingBottom {
	0%   { transform: translateX(-50%) rotate(0deg); }
	15%  { transform: translateX(-50%) rotate(1deg); }
	30%  { transform: translateX(-50%) rotate(-1deg); }
	45%  { transform: translateX(-50%) rotate(0.7deg); }
	60%  { transform: translateX(-50%) rotate(-0.5deg); }
	75%  { transform: translateX(-50%) rotate(0.5deg); }
	100% { transform: translateX(-50%) rotate(0deg); }
}


.leaf01 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -973px;
	top: -15px;
	animation: leaf01 ease-in-out 7s infinite;
	z-index: 1;
}
@keyframes leaf01 {
	0% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(4deg);
	}

	50% {
		transform: rotate(0deg);
	}

	75% {
		transform: rotate(4deg);
	}

	100% {
		transform: rotate(0deg);
	}
}


.leaf02 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 604px;
	top: 291px;
	width: 368px;
	animation: leaf02 7s ease-in-out infinite;
}

@keyframes leaf02 {
	0% {
		transform: rotateY(10deg) rotateX(-10deg);
	}
	50% {
		transform: rotateY(-10deg) rotateX(10deg);
	}
	100% {
		transform: rotateY(10deg) rotateX(-10deg);
	}
}


.win {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1920px;
}

/*.sf01, .sf02, .sf03,*/
/*.heartb01, .heartb02, .obj01, .obj02,*/
/*.frame, .story01, .story02, .story_con, .sean01*/
/* {*/
/*	opacity: 0 !important;*/
/*	visibility: hidden !important;*/
/*	transition: opacity 0.7s;*/
/*}*/

/*.follow {*/
/*	opacity: 0;*/
/*	visibility: hidden;*/
/*	transition: opacity 0.7s;*/
/*}*/

/*.active {*/
/*	opacity: 1 !important;*/
/*	visibility: visible !important;*/
/*}*/


@keyframes heartb {
	0%, 100% { transform: translateY(0);}
	50% { transform: translateY(-10px);}
}

.heartb01 {
	position: absolute;
	top: 916px;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -728px;
	width: 86px;
	animation: heartb 0.7s infinite;
	z-index: 22;
}


.obj01 {
	position: absolute;
	top: 900px;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -695px;
	width: 532px;
}

.heartb02 {
	position: absolute;
	top: 970px;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 629px;
	width: 86px;
	animation: heartb 0.7s infinite;
	z-index: 22;
}

.obj02 {
	position: absolute;
	top: 900px;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 695px;
	width: 522px;
}

.sf01 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1200px;
	margin-left: -256px;
	width: 108px;
	animation: zoomPop 0.7s cubic-bezier(0.19, 1, 0.22, 1) forwards, float1 ease-in-out 1.7s .3s infinite;
}

.sf02 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1329px;
	margin-left: 101px;
	z-index: 2;
	animation: zoomPop 0.7s cubic-bezier(0.19, 1, 0.22, 1) forwards, float2 ease-in-out 1.5s .7s infinite;
}

.sf03 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 1085px;
	margin-left: 140px;
	animation: zoomPop 0.7s cubic-bezier(0.19, 1, 0.22, 1) forwards, float3 linear 1.5s .7s infinite;
}

/*.sf01, .sf02, .sf03 {*/
/*	opacity: 0;*/
/*	transform: scale(0);*/
/*}*/
@keyframes zoomPop {
	0%   { opacity: 0; transform: scale(0);}
	100% { opacity: 1; transform: scale(1);}
}

/* 요정 효과 1 - 살짝 위아래로 둥실둥실 */
@keyframes float1 {
	0% {
		transform: translateY(0);
	}

	8% {
		transform: translateY(-15px);
	}

	16% {
		transform: translateY(0);
	}

	24% {
		transform: translateY(-15px);
	}

	32% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-15px);
	}

	50% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(0);
	}
}

/* 요정 효과 2 - 좌우로 살짝 흔들 */
@keyframes float2 {
	0% {
		transform: rotate(0deg);
	}

	6% {
		transform: rotate(4deg);
	}

	12% {
		transform: rotate(0deg);
	}

	18% {
		transform: rotate(-4deg);
	}

	24% {
		transform: rotate(0deg);
	}

	30% {
		transform: rotate(4deg);
	}

	36% {
		transform: rotate(0deg);
	}

	42% {
		transform: rotate(-4deg);
	}

	48% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

/* 요정 효과 3 - 대각선+살짝 회전 */
@keyframes float3 {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.85);
	}
	100% {
		transform: scale(1);
	}
}



.frame {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 575px;
	width: 660px;
	z-index: 2;
}


@keyframes insta-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes bounce-glow {
	0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0px 0px #fff6; }
	20% { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 12px 4px #fff6; }
	50% { transform: translateX(-50%) scale(0.97); box-shadow: 0 0 24px 6px #fff9; }
	80% { transform: translateX(-50%) scale(1.03); box-shadow: 0 0 12px 4px #fff6; }
}

.follow {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 603px;
	margin-left: 200px;
	background: linear-gradient(90deg, #FFD600 0%, #FF7A00 25%, #FF0069 50%, #D300C5 75%, #7638FA 100%);
	background-size: 200% 200%;
	animation: insta-gradient 3s linear infinite, bounce-glow 2s cubic-bezier(.68,-0.55,.27,1.55) infinite;
	color: #fff;
	padding: 23px 56px;
	border-radius: 2rem;
	font-size: 1.3rem;
	/* font-weight: bold; */
	letter-spacing: 1.5px;
	border: 1px solid #000;
	cursor: pointer;
	outline: none;
	box-shadow: 0 6px 32px 0px #ffadf1a1;
	transition: filter 0.2s, transform 0.1s;
	user-select: none;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
	z-index: 10;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* 텍스트/화살표 겹침을 위한 relative */
.follow {
	position: absolute;
	overflow: hidden;
	font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
}

.follow-text,
.follow-arrow {
	position: absolute;
	font-weight: bolder;
	left: 0;
	width: 100%;
	text-align: center;
	transition: transform 0.35s cubic-bezier(.77,0,.18,1), opacity 0.2s;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 처음엔 팔로우 보임, 화살표 안보임 */
.follow-text {
	opacity: 1;
	transform: translateX(0);
}
.follow-arrow {
	opacity: 0;
	transform: translateX(-60%);
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: 0.2em;
}

/* hover/포커스 시 팔로우 오른쪽으로, 화살표 왼쪽에서 진입 */
.follow:hover .follow-text,
.follow:focus .follow-text {
	opacity: 0;
	transform: translateX(60%);
}
.follow:hover .follow-arrow,
.follow:focus .follow-arrow {
	opacity: 1;
	transform: translateX(0);
}


.story {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 30px;
	position: relative;
	top: 230px;
	z-index: 3;
}

.story_con {
	position: relative;
	top: 260px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}


.sean01 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 294px;
	z-index: 1;
}


.bg_02 {
	background-color: #fff;
	height: 1990px;
	position: relative;
	margin: auto;
	background-position: top;
	background-repeat: no-repeat;
	align-items: center;
	text-align: center;
	max-width: 100%;
	z-index: 1;
	/*width: 100vw;*/
	/*background-position-y: bottom;*/
	/*background-size: cover;*/
}


.con01 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 100px;
	z-index: 1;
	margin-left: 42px;
}

.con02 {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 200px;
	z-index: 1;
}

.btn {
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
	position: relative;
	top: 267px;
}




.notice {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: #bfbfc6;
	padding: 30px;
	font-size: 16px;
}

.notice p {
	width: 100%;
	max-width: 600px;
	text-align: left;
	margin: 0 auto;
}

.sns_con {
	background-color: #1d1d1d;
	display: flex;
	justify-content: center;
	padding: 40px;
}

.footer_con {
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	padding: 50px;
}








.apply_popup {
	max-width:720px;
	width: 96%;
	display:none;
	text-align:center;
	left: 50% !important;
	transform: translateX(-50%) !important;
	/*padding-top: 20px;*/
}

.apply_popup .popup_title {
	padding: 20px 0;
}

.board_write_form {
	width: 100%;
	padding: 10px 50px 50px !important;
}

.board_write_form_table {
	position:relative;
	z-index: 5;
	border: 1px solid #cecece;
	border-right: none;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 20px;
	overflow: hidden;
}

.id_notice {
	font-size: 15px;
	margin-top: 10px;
}
@font-face {
	font-family: 'HakgyoansimAllimjangTTF-B';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimAllimjangTTF-B.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

.board_write_form .form_field {
	font-size: 15px;
}

.board_write_form .form_field th {
	width: 250px;
	font-size: 22px;
	color: #fff;
	text-align: center;
	background-color: #00b063;
	padding: 15px 20px;
	vertical-align: middle;
	border-bottom:1px solid #575757;
	font-family: 'HakgyoansimAllimjangTTF-B', sans-serif;
}

input::placeholder {
	font-size: 15px;
	font-family:'NotoSansKR-Medium';
}

.board_write_form td.field {
	width: 500px;
	font-size: 21px;
	padding: 15px;
	text-align: left;
	border-bottom:1px solid #cecece;
	background-color: #fff;
	vertical-align:middle;
}

.board_write_form td.field.answer span {
	margin-right: 15px;
}

.board_write_form .buttons {
	display:flex;
	text-align: center;
	justify-content: space-between;
}

.board_write_form .buttons a {
	display: inline-block;
	flex-basis: calc(50% - 5px);
	font-size: 30px !important;
	height: 90px;
	line-height: 75px;
	background-color:#fff;
	color:#000;
	cursor:pointer;
	border: 2px solid #171b27;
	border-radius: 15px;
	font-family:'NotoSansKR-Bold';
	letter-spacing: -1px;
}

.board_write_form .buttons a.confirm {
	background-color: #ffcf10;
	color:#000;
}

.board_write_form .form-group:nth-of-type(2) {
	margin: 5px 0;
}

.w120 {
	width: 120px;
}

.w200 {
	width: 395px;
}

.w500 {
	width: 400px;
}

.board_write_form input[type='text'],
.board_write_form input[type='tel'],
.board_write_form select {
	height: 45px;
	font-size: 20px;
	font-family:'NotoSansKR-Medium';
}

.answer {
	font-family:'NotoSansKR-Medium';
}

.agree_radio input, .answer input {
	width: 20px !important;
	height: 20px !important;
	margin-bottom: 5px;
}

.answer input {
	margin-right: 5px;
}

.agree_radio input:checked, .answer input:checked {
	accent-color: #004ea2 !important;
}


.apply-form {
	/* max-width:1100px;
	margin: auto; */
	padding: 80px 0;
}

.apply-form form {
	max-width:720px;
	margin: auto;
}

.agree_box {
	width: 100%;
	overflow-y: auto;
	border: 2px solid #cecece;
	padding: 20px;
	box-sizing: border-box;
	height: 240px;
	background: #f1f1f1;
	color: #333;
	font-size: 19px;
	text-align: left;
	font-family:'NotoSansKR-Regular';
	margin-top: 30px;
	border-radius: 15px;
}
.agree_box::-webkit-scrollbar {
	width: 10px !important;
	background: transparent;
}
.agree_box::-webkit-scrollbar-thumb {
	background: rgba(148, 148, 148, 0.3) !important;
	border-radius: 70px;
}
.agree_box .h5 {
	display: inline-block;
	font-size: 19px;
	margin-bottom: 10px;
	font-family:'NotoSansKR-Medium';
}

.agree_box .h6 {
	font-family:'NotoSansKR-Medium';
}

.agree_box p {
	font-size: 16px;
}

.agree_radio {
	font-size: 21px;
	text-align: center;
	color: #ffffff;
	margin: 20px 0 25px;
	font-family:'NotoSansKR-Medium';
}

.agree_radio .block {
	display: block;
	margin-bottom: 10px;
}

.agree_radio label, .answer label {
	cursor:pointer;
}

.scroll-mouse { display: none; !important;}

/* 모바일 */
@media screen and (max-width: 768px) {
	.mfloating {
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		z-index: 999999999;
	}
	.floating {
		display: none;
	}
	.bg_02 {
		background-color: #fff;
		height: 1950px;
	}
	.mouse {
		display: none;
	}
	.agree_radio {
		font-size: 21px !important;
	}
	.footer_con {
		padding-bottom: 150px;
	}
	.agree_box .h5 {
		font-size: 21px !important
	;
	}
	.agree_box {
		font-size: 22px !important;
	}
	/*.sf01, .sf02, .sf03,*/
	/*.heartb01, .heartb02, .obj01, .obj02,*/
	/*.frame, .story01, .story02, .story_con, .sean01 {*/
	/*	opacity: 1 !important;*/
	/*	visibility: visible !important;*/
	/*	transition: opacity 0.7s;*/
	/*}*/
	.scroll-mouse {
		display: flex;
		position: fixed;
		left: 50%;
		bottom: 200px;
		transform: translateX(-50%);
		z-index: 100;
		flex-direction: column;
		align-items: center;
		text-decoration: none;
		color: #222; /* 폰트 및 아이콘 컬러 */
		cursor: pointer;
	}
	.scroll-mouse:hover {
		opacity: 0.5;
	}
	.scroll-mouse span {
		position: relative;
		display: block;
		width: 24px;
		height: 24px;
		border-left: 1px solid #222; /* 어두운 색상 */
		border-bottom: 1px solid #222; /* 어두운 색상 */
		transform: rotate(-45deg);
		animation: sdb07 2s infinite;
		opacity: 0;
		box-sizing: border-box;
		margin: 0;
	}
	.scroll-mouse span:nth-of-type(1) {
		animation-delay: 0s;
		top: 0;
	}
	.scroll-mouse span:nth-of-type(2) {
		animation-delay: .15s;
		top: 16px;
	}
	.scroll-mouse span:nth-of-type(3) {
		animation-delay: .3s;
		top: 32px;
	}
	@keyframes sdb07 {
		0%   { opacity: 0; }
		50%  { opacity: 1; }
		100% { opacity: 0; }
	}
	.scroll-text {
		margin-top: 56px;
		font: normal 400 20px/1 'Josefin Sans', sans-serif;
		letter-spacing: .1em;
		color: #222;
		text-shadow: 0 2px 6px rgba(255,255,255,0.12);
		pointer-events: none;
	}
}



@media screen and (min-width: 769px) and (max-width: 1366px) {
	.floating {
		display: none;
	}
	.mfloating {
		width: 100%;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		z-index: 999999999;
	}
	.footer_con {
		padding-bottom: 150px;
	}
}







/* style css */
body, html {
	overflow-x:hidden;
	min-width:1280px
}

img {
	-webkit-user-drag: none;
}

::selection {
   background: #96E4FF;
   color: #000
}

::-moz-selection {
   background: #96E4FF;
   color: #fff
}


::-webkit-selection {
    background: #96E4FF;
   color: #fff
}


body, html {
	
}

body {
	-webkit-font-smoothing: antialiased;
	color:#333;
}

.row {
	padding: 0 20px;
	margin: auto
}

/* ��� */
.header {
	position:fixed;
	top: 0;
	left: 0;
	right: 0;
	text-align:center;
	z-index: 999999;
	transition:all 300ms ease-in-out;
	min-width:1280px;
	background-color:#fff;
	height: 100px;
}

.header .row {
	position:relative;
	display:flex;
	align-items:center;
	justify-content: space-between;
	height: 100%;
}

.header .nav {
	display:flex;
	/*position:absolute;
	left: 50%;
	transform:translate(-50%, 0);*/
}

.header .right_box {
	display:flex;
	align-items:center;
	height: 100%;
}

.header .nav li {
	width: 120px;
	text-align:center;
	height: 100%;
	line-height:100px;
}

.header .nav li a {
	font-family:'NotoSansKR-Bold';
	letter-spacing:-1px;
}

.header .nav li.on a,
.header .nav li a:hover {
	color:#96E4FF;
}

.header .drop_menu {
	display:none; 
	position:absolute;
	background-color:#96E4FF;
	width: 100%;
	top: 100px;
	left: 0;
	padding: 30px 0;
	height: 315px;
}

.header .drop_menu .drop {
	position:absolute;
	z-index: 998;
	left: 50%;
	transform:translate(-50%, 0);
	font-size:15px;
	display: flex;
}

.header .drop_menu .drop > li {
	width: 120px;
	text-align:center;
}

.header .drop_menu .drop > li a {
	color:#fff;
}

.header .drop_menu .drop > li a:hover {
	font-weight: bold;
}

.header .drop_menu .sub_menu > li {
	margin-bottom: 15px;
	letter-spacing:-1px
}

.footer {
	padding: 60px 0;
	text-align:center;
	background-color:#11243a;
}

.video-container {
    position: relative;
    padding-bottom: 53.5%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


@media(min-width:992px) {
	.pc {
		display:block !important
	}

	.mobile {
		display:none !important
	}
}

@media(max-width:991px) {

	.pc {
		display:none !important
	}

	.mobile {
		display:block !important
	}

	

}

@media(max-width:575px) {

	


}