/* 경성대학교 친구추가 이벤트 - style_new.css */
input[type='text'],
input[type='tel'],
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #454545;
}

.section_01 {
	height: 1468px;
	padding-top: 80px;
	background-image: url('../img_new/main_bg.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}

.section > .inner {
	max-width: 750px;
	padding: 0 20px;
	margin: auto;
}

.section_01 .title {
	position: relative;
	margin-bottom: 16px;
}

.section_01 .title .star {
	position: absolute;
	width: 116px;
	bottom: 80px;
	right: 0;
}

.section_01 .charator_zone {
	position: relative;
	text-align: center;
}

.section_01 .charator_zone .bubble,
.section_01 .charator_zone .pung {
	position: absolute;
}

.section_01 .charator_zone .pung.left {
	top: 72px;
	left: -114px;
}

.section_01 .charator_zone .pung.right {
	top: 100px;
	right: -34px;
}

.section_01 .charator_zone .bubble_01 {
	top: 10px;
	left: 160px;
}

.section_01 .charator_zone .bubble_02 {
	top: 316px;
	left: 22px;
}

.section_01 .charator_zone .bubble_03 {
	top: 170px;
	right: 20px;
}

.section_01 .card_list {
	display: flex;
	padding-left: 20px;
	margin-top: -32px;
}

.section_01 .card_list span {
	display: inline-block;
}

.section_02 {
	text-align: center;
	padding-bottom: 120px;
	background-color: #fff0cf;
}

.section .top_item {
	display: inline-block;
	vertical-align: top;
	margin-top: -8px;
}

.section_03 .top_item {
	margin-top: -72px;
}

.section_03 {
	text-align: center;
	padding-bottom: 210px;
	background-color: #ffddb2;
}

.section_03 > .inner {
	max-width: 760px;
	padding: 0;
}

.section_03 .btn_box {
	max-width: 700px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 64px;
}

.section_03 .btn_box span {
	position: relative;
}

.section_03 .btn_box span > img {
	position: absolute;
	top: 92px;
	right: 0;
}

.section_03 .btn_box button {
	cursor: pointer;
}

.section_04 {
	text-align: center;
	padding-bottom: 108px;
	background-color: #602b06;
}

.section_04 .top_item {
	position: relative;
	margin-top: -160px;
}

.section_04 .inner {
	max-width: 720px;
	padding: 0;
}

.section_04 .link {
	position: absolute;
	display: inline-block;
	width: 94px;
	height: 130px;
	top: 82px;
}

.section_04 .link_01 {
	left: 84px;
}

.section_04 .link_02 {
	left: 232px;
}

.section_04 .link_03 {
	left: 381px;
	width: 104px;
}

.section_04 .link_04 {
	left: 539px;
}

.section_04 .text_box {
	margin-top: 66px;
	color: #dfd5cd;
	text-align: left;
}

.section_04 .text_box > * {
	margin-bottom: 8px;
}

.section_04 .text_box > *:last-child {
	margin-bottom: 0;
}

.section_04 .text_box p {
	font-size: 24px;
}

.section_04 .text_box dl {
	display: flex;
	font-size: 20px;
}

.section_04 .text_box dt {
	padding-right: 4px;
}

.footer {
	background-color: #fff;
	border-top: 1px solid #a9a9a9;
}

/* POPUP */
.apply_popup {
	max-width: 700px;
	background-color: #fff;
	border-radius: 20px;
	padding: 32px;
}

.apply_popup * {
	font-family: "Noto Sans KR", sans-serif !important;
}

.apply_popup .agree_box b {
	font-size: 24px;
}

.box__ {
	padding: 0;
	border: none;
}

.fx__,
.board_write_form_table,
.board_write_form .buttons {
	width: 100%;
}

.board_write_form {
	border-top: 1px solid #a9a9a9;
}

.board_write_form .form_field {
	margin-bottom: 0;
	border: none;
	border-bottom: 1px solid #a9a9a9;
}

.board_write_form .form_field th {
	width: 220px;
	background-color: #602b06;
	border: none;
}

.board_write_form td.field {
	width: 416px;
	padding: 15px;
}

.board_write_form input[type='text'], .board_write_form input[type='tel'], .board_write_form select {
	font-family: "Noto Sans KR", sans-serif;
}

.agree_box {
	background-color: #f1f1f1;
	border: 1px solid #a9a9a9;
}

.w200 {
	width: 100%;
}

.flex {
	display: flex;
	width: 100%;
}

.tel_form select,
.tel_form input {
	width: 30%;
}

.tel_form .hypen {
	display: block;
	width: 5%;
	text-align: center;
	height: 45px;
	line-height: 45px;
}

.flex * {
	display: inline-block;
}

.w40p {
	width: 40%;
}

.w20p {
	width: 20%;
}

.board_write_form input[type='radio'] {
	display: none;
}

.board_write_form input[type='radio'] + label {
	position: relative;
	cursor: pointer;
	color: #000;
	padding-left: 20px;
}

.board_write_form input[type='radio'] + label::before {
	position: absolute;
	content:'';
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #a9a9a9;
	border-radius: 50%;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.board_write_form input[type='radio']:checked + label::after {
	position: absolute;
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #602b06;
	border-radius: 50%;
	left: 3px;
	top: 50%;
	transform: translateY(-50%);
}

.agree_radio {
	font-size: 22px;
	color: #454545;
	letter-spacing: 0px;
}

.board_write_form .buttons a,
.board_write_form .buttons a.confirm {
	border: none;
	height: auto;
	background-color: transparent;
}

.counting_popupB {
	top: 50%;
	transform: translate(-50%, -50%) !important;
	max-width: 700px;
	background-color: #fff;
	border-radius: 20px;
	padding: 20px;
}

.counting_popup .wh__, .counting_popupB .wh__ {
	border: none;
	padding: 0;
}

.counting_popup .info__, .counting_popupB .info__ {
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 900;
}

.counting_popupB .info__ span {
	color: #000;
}

.counting_popup .info__, .counting_popupB .info__ .brown {
	color: #602b06;
}

.counting_popup .para, .counting_popupB .para {
	font-family: "Noto Sans KR", sans-serif;
	font-weight: 900;
}

.counting_popup .btn, .counting_popupB .btn {
	margin: 15px 0 25px;
}

/* === 초기 상태 공통 === */
.section_01 .title,
.section_01 .charator_zone .charator > img,
.section_01 .charator_zone .bubble,
.section_01 .card_list li,
.section_02 .top_item,
.section_03 .top_item,
.section_03 .btn_box span,
.section_04 .item,
.section_01 .charator_zone .pung {
  opacity: 0;
  transform: scale(0.8) translateY(40px);
  transition: all 0.8s ease-out;
}

/* 공통 등장 */
.animate-in {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

/* === Title scale-up === */
.scale-up {
  animation: scaleUp 1s ease-out forwards;
}
@keyframes scaleUp {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* === 캐릭터 bounce-in === */
.bounce-in {
  animation: bounceIn 1.2s ease-out forwards;
}
@keyframes bounceIn {
  0%   { transform: scale(0.5) translateY(50px); opacity: 0; }
  60%  { transform: scale(1.1) translateY(-20px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* 등장용 (1회) */
.fade-shake {
  animation: fadeShake 1.2s ease-out forwards;
}
@keyframes fadeShake {
  0%   { opacity: 0; transform: translateX(-20px) rotate(-10deg); }
  50%  { opacity: 1; transform: translateX(10px) rotate(10deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}

/* 무한 up-down (항상 보이게) */
.bubble-loop {
  animation: bubbleUpDown 2.5s ease-in-out infinite;
  opacity: 1 !important;   /* ✅ 항상 보이게 고정 */
}
@keyframes bubbleUpDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* === 카드 fade-up === */
.fade-up {
  animation: fadeUp 0.8s ease-out forwards;
}
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(30px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Section 02~04 공통 fade-up-in === */
.fade-up-in {
  animation: fadeUpIn 1s ease-out forwards;
}
@keyframes fadeUpIn {
  0%   { opacity: 0; transform: translateY(40px) scale(0.95); }
  60%  { opacity: 1; transform: translateY(-10px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* === 버튼 fade === */
.fade-btn {
  animation: fadeBtn 0.8s ease-out forwards;
}
@keyframes fadeBtn {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === 손가락 포인터 bounce === */
.pointer-bounce {
  animation: pointerBounce 1s ease-in-out infinite;
  display: inline-block;
}
@keyframes pointerBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* === 폭죽 효과 (왼쪽/오른쪽 퐁!) === */
.pung-burst {
  animation: pungBurst 1s ease-out forwards;
}
@keyframes pungBurst {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* === 별 천천히 좌우 회전 (무한) === */
.star-rotate {
  animation: starRotate 4s ease-in-out infinite;
}
@keyframes starRotate {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(10deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}

/*form*/
.section_02.form {
	background-color: #fff;
	padding: 84px 0;
}

.section_02.form .inner {
	max-width: 688px;
}

.section_02.form .form_group {
	display: flex;
	font-size: 20px;
	margin-bottom: 8px;
}

.section_02.form .form_group label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 220px;
	height: 64px;
	background-color: #602b06;
	color: #fff;
}

.section_02.form .form_group input {
	width: calc(100% - 220px);
	height: 64px;
	font-size: 20px;
}

.section_02.form .form_group.coupon label {
	background-color: #ec4300;
}

.section_02.form .btn_box {
	margin-top: 55px;
	text-align: center;
}

@media screen and (max-width: 750px) {
	.section_01 {
		height: 195.73vw;
		padding-top: 10.67vw;
	}

	.section > .inner {
		padding: 0 2.67vw;
	}

	.section_01 .charator_zone .charator > img {
		width: 59.47vw;
	}

	.section_01 .title .star {
		width: 15.47vw;
		bottom: 10.67vw;
	}

	.section_01 .charator_zone .pung.left {
		width: 21.6vw;
		top: 9.6vw;
		left: -15.2vw;
	}

	.section_01 .charator_zone .pung.right {
		width: 26.93vw;
		top: 13.33vw;
		right: -4.53vw;
	}

	.section_01 .charator_zone .bubble_01 {
		width: 24.53vw;
		top: 1.33vw;
		left: 21.33vw;
	}

	.section_01 .charator_zone .bubble_02 {
		width: 23.47vw;
		top: 42.13vw;
		left: 2.93vw;
	}

	.section_01 .charator_zone .bubble_03 {
		width: 24.27vw;
		top: 22.67vw;
		right: 2.67vw;
	}

	.section_01 .card_list .card_01,
	.section_01 .card_list .card_03 {
		width: 30.93vw;
	}
	
	.section_01 .card_list {
		display: flex;
		padding-left: 2.67vw;
		margin-top: -4.27vw;
	}

	.section_01 .card_list .card_02 {
		width: 28.53vw;
	}

	.section_02 {
		padding-bottom: 16vw;
	}

	.section .top_item {
		margin-top: -1.07vw;
	}

	.section_03 {
		padding-bottom: 28vw;
	}

	.section_03 .top_item {
		margin-top: -9.6vw;
	}

	.section_03 .btn_box {
		max-width: 93.33vw;
		margin-top: 8.53vw;
	}

	.section_03 .btn_box button {
		width: 45.33vw;
	}

	.section_03 .btn_box span > img {
		width: 9.07vw;
		top: 12.27vw;
	}

	.section_04 {
		padding-bottom: 14.4vw;
	}

	.section_04 .top_item {
		margin-top: -21.33vw;
	}

	.section_04 .link {
		width: 12.53vw;
		height: 17.33vw;
		top: 10.93vw;
	}

	.section_04 .link_01 {
		left: 11.2vw;
	}

	.section_04 .link_02 {
		left: 30.7vw;
	}

	.section_04 .link_03 {
		left: 50.4vw;
		width: 13.87vw;
	}

	.section_04 .link_04 {
		left: 71.2vw;
	}

	.section_04 .text_box {
		margin-top: 8.8vw;
	}

	.section_04 .text_box p {
		font-size: 3.2vw;
	}

	.section_04 .text_box dl {
		font-size: 2.6vw;
	}

	.section_04 .text_box > * {
		margin-bottom: 1.07vw;
	}

	.footer {
		padding: 10.67vw 2.67vw;
	}

	.m_block {
		display: block;
	}

	.board_write_form .form_field th {
		width: 25.33vw;
	}

	.board_write_form .form_field td {
		width: 62.47vw;
		padding: 2vw;
		font-size: 2.93vw !important;
	}

	.board_write_form .buttons button img {
		width: 41.87vw;
	}

	.apply_popup {
		padding: 4vw;
	}

	.board_write_form .form_field th,
	.board_write_form input[type='radio'] + label {
		font-size: 3.23vw;
	}

	.agree_radio,
	.agree_radio label {
		font-size: 3.93vw !important;
	}

	.board_write_form .form_field th {
		padding: 1.33vw 2.67vw;
	}

	.w40p {
		width: 42.5%;
	}

	.w20p {
		width: 15%;
	}

	.board_write_form input[type='radio'] + label {
		padding-left: 4.57vw;
	}

	.board_write_form input[type='radio'] + label::before {
		width: 2.87vw;
		height: 2.87vw;
	}

	.board_write_form input[type='radio']:checked + label::after {
		width: 2.23vw;
		height: 2.23vw;
		left: 1.695vw;
		transform: translate(-50%, -50%);
	}

	.agree_box {
		font-size: 2.93vw;
		padding: 2vw;
		height: 32.8vw;
	}

	.agree_box .h5 {
		font-size: 3.2vw;
	}

	.board_write_form input[type='text'], .board_write_form input[type='tel'], .board_write_form select {
		font-size: 16px !important;
		height: 10vw !important;
	}

	.tel_form .hypen {
		height: 8vw;
		line-height: 8vw;
	}

	.counting_popup .info__, .counting_popupB .info__ {
		font-size: 6.4vw;
	}
	
	.counting_popup .para, .counting_popupB .para {
		font-size: 2.67vw;
	}

	.counting_popupB .md_close_counting {
		top: 1.33vw;
		right: 1.33vw;
	}

	.counting_popupB .md_close_counting img {
		width: 6.67vw;
	}

	.counting_popupB {
		padding: 2.67vw;
	}

	.counting_popupB img {
		width: 66.93vw;
	}

	.counting_popup .btn, .counting_popupB .btn {
		margin: 2vw 0 3.33vw;
	}

	.counting_popupB .sp_Name_Coun_2,
	.counting_popup .top__btn, .counting_popupB .top__btn {
		margin-bottom: 2.67vw;
	}

	.section_02.form {
		padding: 11.2vw 0;
	}

	.section_02.form .form_group label {
		width: 29.33vw;
	}

	.section_02.form .form_group input {
		width: calc(100% - 29.33vw);
		border-radius: 0;
	}
	
	.section_02.form .form_group label,
	.section_02.form .form_group input {
		height: 10.53vw;
		font-size: 16px;
	}

	.section_02.form .btn_box {
		margin-top: 7.33vw;
	}

	.section_02.form .btn_box img {
		width: 41.87vw;
	}

	.apply_popup .agree_box b {
		font-size: 24px;
		font-size: 4.4vw;
	}

}