/*서브-상단비주얼 */
#svisual {
	width: 100%;
	height: 400px;
	position: relative;
}

#svisual::before {
	content: '';
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
}

#svisual.sub01 {
	background: url(../img/sub/sub_banner01.png) no-repeat;
	background-size: cover;
	background-position: center center;
}

#svisual.sub02 {
	background: url(../img/sub/sub_banner02.png) no-repeat;
	background-size: cover;
	background-position: center center;
}
#svisual.sub03 {
	background: url(../img/sub/sub_banner03.png) no-repeat;
	background-size: cover;
	background-position: center center;
}
#svisual.sub04 {
	background: url(../img/sub/sub_banner04.png) no-repeat;
	background-size: cover;
	background-position: center center;
}
#svisual.sub05 {
	background: url(../img/sub/sub_banner05.png) no-repeat;
	background-size: cover;
	background-position: center center;
}


#svisual .s_text {
	position: relative;
	top: 200px;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
	color: #fff;
	text-align: left;
}

#svisual .s_text h6 {
	font-size: 16px;
	font-weight: 400;
}

#svisual .s_text h1 {
	font-size: 60px;
	margin: 0 0 20px 0;
}

#svisual .s_text p {
	font-size: 20px;
	line-height: 1.5em;
}

#svisual .sub_nav {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	background: #fff;
	color: #333;
	border-bottom: 1px solid #eee;
}


@media (max-width:1700px) {
	#svisual .s_text {
		max-width: 95%;
	}
}

@media (max-width:1600px) {
	#svisual .s_text {
		max-width: 90%;
	}
}

@media (max-width:1024px) {
	#svisual {
		height: 200px;
	}

	#svisual.sub01,
	#svisual.sub02,
	#svisual.sub03,
	#svisual.sub04,
	#svisual.sub05 {
		background-position: center;
		background-attachment: inherit;
	}

	#svisual .sub_nav {
		width: 100%;
	}


	#svisual .s_text {
		max-width: 96%;
		text-align: center;
		top: 62%;
		transform: translateY(-50%);
	}

	#svisual .s_text h1 {
		font-size: 2.8em;
		margin:0 0 10px 0;
	}

	#svisual .s_text h6 {
		font-size: 1.2em;
	}

	#svisual .s_text p {
		font-size: 0.9em;
	}
}

@media (max-width: 768px) {
	#svisual {}

	#svisual .s_text h3 {
		font-size: 1.3em;
	}

	#svisual .s_text span {
		display: block;
		font-size: 1.25em;
	}
}

@media (max-width: 550px) {
	#svisual {}
}


#company h1 { font-size: 2em;margin-bottom: 60px;position: relative}/*
#company h1:after { position: absolute;display: block;content: '❞';font-size: 1.5em;     left: 370px;    bottom: 5px;   opacity: 0.3;}
#company h1:before { position: absolute;display: block;font-family: 'ChosunSm';content: '“';  left: -40px;    font-size: 1.5em;    opacity: 0.3;}*/
#company h1:before { position: absolute;  background: url(../img/icon.png) no-repeat 0px 0px;      content: "";    display: inline-block;    height: 30px;    width: 30px;   font-weight: 800;left: -30px;    font-size: 1.5em;    }
#company h1:after { display: inline-block;margin-left: 10px;    background: url(../img/icon2.png) no-repeat 0px 0px;      content: "";       height: 30px;    width: 30px;   font-weight: 800;font-size: 1.5em;     left: 370px;    bottom: 5px;   ;}
#company h1 span { font-family: 'ChosunSm';font-size: 2em; display: block;margin-bottom: 20px}


#company h5 { font-size: 2em;font-weight: 800;margin-bottom: 20px;color: #AE874E}
#company h5 span {font-size: 0.8em;font-weight: 400;color: #000}
#company p {font-size: 1.3em;line-height: 1.5em; font-weight: 400;color: #000;margin-bottom: 45px}
#company p strong{margin-right: 20px; font-weight: 800;}
#company hr{display: block; border-color:  #AE874E;opacity: 0.7;margin-bottom: 50px}


#floor ul{display: flex; width: 100%; border-bottom: 1px solid #eee; margin-bottom: 100px}
#floor ul li{padding: 15px 0; text-align: center;width: 100%; font-weight: 400; font-size: 1.4em;opacity: 0.7}
#floor ul li a{    display: block;color: inherit}
#floor ul li.active{font-weight: 800;opacity: 1}

#floor h1 { font-size: 1.7em;margin-bottom: 60px;position: relative}
#floor h1:before { position: absolute;  background: url(../img/icon.png) no-repeat 0px 0px;      content: "";    display: inline-block;    height: 30px;    width: 30px;   font-weight: 800;left: -30px;    font-size: 1.5em;    }
#floor h1:after { display: inline-block;margin-left: 10px;    background: url(../img/icon2.png) no-repeat 0px 0px;      content: "";       height: 30px;    width: 30px;   font-weight: 800;font-size: 1.5em;     left: 370px;    bottom: 5px;   ;}
#floor h1 span { font-weight: 800;font-size: 2em; display: block;margin-bottom: 20px}
#floor h1 em {    display: block;    font-size: 1.25em;    font-weight: 600;    margin-bottom: 10px;}
#floor h2 { font-size: 1.7em;margin-bottom: 60px;position: relative}
#floor h2 em {    display: block;    font-size: 1.25em;    font-weight: 600;    margin-bottom: 10px;}
#floor h2:before { position: absolute; background: url(../img/icon.png) no-repeat 0px 0px;      content: "";    display: inline-block;    height: 30px;    width: 30px;    font-weight: 800;top: -100px; left: -30px;    font-size: 1.5em;   }
#floor h2:after { display: inline-block;;margin-left: 10px;    background: url(../img/icon2.png) no-repeat 0px 0px;      content: "";     height: 30px;    width: 30px;   font-weight: 800;font-size: 1.5em;     left: 370px;    bottom: 5px;   }
#floor img.logo { position: relative;margin-bottom: 20px;max-width: 350px}

#floor > p { font-size: 1.2em;margin-bottom: 60px;position: relative}


@media (max-width: 1600px) {
	
}

@media (max-width: 1300px) {
}


@media (max-width: 1000px) {
	#floor {font-size: 0.8em}
	
}

@media (max-width: 700px) {
	
}


#floor     .swiper-slide img {      display: block;      width: 100%;      height: 100%;      object-fit: cover;    }
#floor    .swiper {      width: 100%;      height: 300px;      margin-left: auto;      margin-right: auto;    }
#floor     .swiper-slide {      background-size: cover;      background-position: center;    }
#floor     .mySwiper2 {      height: 80%;      width: 100%;    }
#floor    .mySwiper {      height: 20%;      box-sizing: border-box;      padding: 10px 0;    }
#floor    .mySwiper .swiper-slide {      width: 25%;      height: 100%;      opacity: 0.4;    }
#floor     .mySwiper .swiper-slide-thumb-active {      opacity: 1;    }
#floor    .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}

#floor .wine-wrap {}
#floor .wine-wrap {display: flex; flex-wrap: wrap; justify-content: space-between;margin-top: 50px}
#floor .wine-wrap >div {width: 33%; text-align: left; margin-bottom: 25px}
#floor .wine-wrap >div img {width: 100%; margin-bottom: 15px}
#floor .wine-wrap >div h6 {font-size: 1.5em; margin-bottom: 10px}
#floor .wine-wrap >div p {font-size: 1.05em}

#floor .swiper-button-next, #floor .swiper-button-prev {background: none!important}

#floor  .btn-wrap button  {margin-bottom: 30px;}
#floor  .btn-wrap button img {width: 15px; margin-right: 10px}
#floor  .btn-wrap button {padding: 15px 20px; border: 0; margin-right: 10px; color: #fff;background: #857D72}
#floor  .btn-wrap button.bg1 {padding: 15px 20px; border: 0; margin-right: 10px; color: #fff;background: #857D72}
#floor  .btn-wrap button.bg2 {padding: 15px 20px; border: 0; margin-right: 10px; color: #fff;background: #AE874E}

#floor  .txt-add {padding: 15px 20px;border: 1px solid #eee;margin-bottom: 60px;}
#floor  .txt-add p {font-size: 1.3em}
#floor  .txt-add p b {margin-right: 10px}
#floor  .txt-add p:not(:last-child) {margin-bottom: 10px}


#floor .img-wrap {display: flex; flex-wrap: wrap; justify-content: space-between;margin-top: 50px}
#floor .img-wrap >img {width: 49%; }


#floor .table-wrap { text-align: center; padding: 50px 20%;border: 1px solid #eee;margin-top: 50px}
#floor .table-wrap > h6 {  font-size: 1.6em;font-weight: 800}
#floor .table-wrap > p { font-size: 1.2em;}
#floor .table-wrap > p.right { text-align: right;;}
#floor .table-wrap > .table { overflow-x: auto; margin: 20px 0;}
#floor .table-wrap > .table + p { text-align: left;;
    line-height: 1.8em;}
#floor table  {font-weight: 800}
#floor table th {font-weight: 800}
#floor table .st1 {color: #C8C7B7; text-decoration: line-through}
#floor table .st2 {color: #AE874E;}


.eo_table {    width: 100%;    /*border-left:1px solid #ddd; border-right:1px solid #ddd;*/    border-top:1px solid #d8e2e8;    background: #fff;    line-height: 1.5em;}
.eo_table.lesson {    border: 2px solid #0080b9;}
.eo_table caption {    display: none}
.eo_table th,
.eo_table td {    padding: 12px;    border-bottom: 1px solid #d8e2e8;    border-right: 1px solid #d8e2e8;    font-size: 1em;    line-height: 1.6em;    text-align: center;    word-break: keep-all;}

.eo_table td.left { text-align:left}
.eo_table th {    background: #FEFDF9;    color: #333;    text-align: center;    font-size: 1.1em;    font-weight: 500;}
.eo_table tbody th {    background: #FEFDF9;    color: #555;    text-align: center;    font-size: 1.03em;    font-weight: 500;}
.eo_table th span {    font-family: 'LINESeedKR-Rg';    font-weight: bold;}
.eo_table td.t {    background: #f9f9f9;    color: #009be0;    font-weight: 500;}
.eo_table th:first-child,
.eo_table td:first-child {border-left: 0px solid #d8e2e8;}
.eo_table th:last-child,
.eo_table td:last-child {border-right: 0px solid #d8e2e8;}
.eo_table th.bar,.eo_table td.bar{border-right: 1px solid #d8e2e8;}
.eo_table.lesson th:first-child,
.eo_table.lesson td:first-child {    border-left: 1px solid #d8e2e8}
.eo_table.lesson th:last-child,
.eo_table.lesson td:last-child {    border-right: 1px solid #d8e2e8}
.eo_table td li {    list-style: disc;    margin-left: 30px;}
.eo_table .bg1 	{    background: #f8f8f89e;}
.eo_table td.bright {   border-right: 1px solid #d8e2e8!important;    }

#event {    text-align: center;}
#event > h1 { text-align: left; font-size: 2em;margin-bottom: 60px;position: relative}
#event h1:before { position: absolute;  background: url(../img/icon.png) no-repeat 0px 0px;      content: "";    display: inline-block;    height: 30px;    width: 30px;   font-weight: 800;left: -30px;    font-size: 1.5em;    }
#event h1:after { display: inline-block;margin-left: 10px;    background: url(../img/icon2.png) no-repeat 0px 0px;      content: "";       height: 30px;    width: 30px;   font-weight: 800;font-size: 1.5em;     left: 370px;    bottom: 5px;   ;}
#event h1 span { font-weight: 800;font-size: 2em; display: block;margin-bottom: 20px}

#event .notice h6 {  font-size: 1.35em;font-weight: 800;margin-bottom: 15px; text-align: left; color: #857D72}
#event .notice { margin-bottom: 30px;}

#event .text-wrap {text-align: left;display: flex; flex-wrap: wrap; justify-content: space-between;margin-bottom: 30px}
#event .text-wrap  > div {width: 49%; border: 1px solid #eee; padding: 30px} 
#event .text-wrap h6 {  font-size: 1.5em;font-weight: 800;margin-bottom: 15px}
#event .text-wrap p { font-size: 1.1em;}

#event .table-wrap {text-align: left;display: flex; flex-wrap: wrap; justify-content: space-between;margin-bottom: 20px}
#event .table-wrap  > div {width: 49%; border: 1px solid #eee; padding: 30px}
#event .table-wrap.v2  > div {width: 100%; border: 1px solid #eee; padding: 30px}

#event .time {text-align: left;display: flex; flex-wrap: wrap; justify-content: space-between;margin-bottom: 50px;  border: 1px solid #eee; padding: 30px}
#event .calendar-wrap {width: 30%; }
#event .calendar-time {width: 70%; padding: 0 20px}
#event .calendar-time p { font-size: 1.25em;line-height: 1.8em}
#event .time h6 {  font-size: 1.5em;font-weight: 800;margin-bottom: 15px}
#event .calendar-time h6.last {  margin-top: 50px}

#event .time-wrap {text-align: left;display: flex;  justify-content: space-between;margin-bottom: 40px}
#event .time-wrap  > div {width: 100%; border: 1px solid #eee; padding: 10px; text-align: center; cursor: pointer}
#event .time-wrap  > div:not(:last-child) {margin-right: 10px}
#event .time-wrap p { font-size: 1.1em;}
#event .time-wrap p span { color: #405DE3; font-weight: 800; margin-left: 5px}
#event .time-wrap div.active p span { color: #E02E2E}
#event .time-wrap div.active { background: #000; color: #fff}
#event .time-wrap div.off { background: #f9f9f9; border-color: #fff}
#event .time-wrap div.off p { color: #585858}
#event .time-wrap div.off p span { color: #585858}
#event label.form-control {    border: 0;    box-shadow: none;      width: auto; margin-bottom: 10px;  display: inline-block; cursor: pointer}
/*동그라미 라디오*/
#event  label{margin-right: 6px;}
#event input[type="radio"] {    margin: 0px 5px 0 0;}
#event  input[type="radio"] { border: 1px solid #c9c9c9; display: inline-block;  vertical-align: middle; background: #fff; border-radius: 30px;  appearance: none;
    width: 1.4em;    height: 1.4em; position: relative;}
#event  input[type="radio"]:checked {  background: #fff; border: 1px solid #c9c9c9;}
#event  input[type="radio"]:checked:after{content: ""; display: inline-block;
    width: 1em; height: 1em; border-radius: 50%; background-color: #BC2D1E;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

#event  input[type="radio"]:focus-visible {    outline-offset: max(2px, 0.1em);    outline: max(2px, 0.1em) dotted #BC2D1E;}
#event  input[type="radio"]:hover {    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;    cursor: pointer;}
#event  input[type="radio"]:disabled {    background-color: lightgray;    box-shadow: none;    opacity: 0.7;    cursor: not-allowed;}
#event  input[type="radio"]:disabled + span {    opacity: 0.7;    cursor: not-allowed;}

#event .pay-warp {text-align: left;ddisplay: block; ;margin-bottom: 50px;  border: 1px solid #eee; padding: 30px}
#event .pay-warp hr {display: block;  border: 1px solid #eee; }
#event .pay-warp h6 {  font-size: 1.5em;font-weight: 800;margin-bottom: 15px}
#event .pay-wrap p { font-size: 1.1em;}
#event .pay2-wrap {display: flex;  justify-content: space-between;margin-bottom: 10px}
#event  input {
    background: #f5f5f5;width: 100%; border: 1px solid #eee; padding: 10px; text-align: left; margin-bottom: 20px}
#event  textarea {
    background: #f5f5f5;width: 100%; border: 1px solid #eee; padding: 10px; text-align: left; margin-bottom: 20px}
#event .pay2-wrap  > div {width: 100%; }
#event .pay2-wrap  > div:not(:last-child) {margin-right: 10px}
#event .pay2-wrap  > input {width: 100%; border: 1px solid #eee; padding: 10px; text-align: left; color: #000 }
#event .pay2-wrap  > input::placeholder { 
  opacity: 0.5; 
}
#event .pay2-wrap  > input:not(:last-child) {margin-right: 10px}
#event button.submit {margin: 0 auto;  width: 100%;max-width: 300px; color: #fff; background: #DF2D32; border: 0; font-size: 1.5em; padding: 20px 0}
#event > h3 {    font-size: 2.5em;    margin-bottom: 30px;    font-weight: 800;    color: #fff;    padding: 25px 0;    background: #a37f57;}



#event     .swiper-slide img {      display: block;      width: 100%;      height: 100%;      object-fit: cover;    }
#event    .swiper {      width: 100%;      height: 300px;      margin-left: auto;      margin-right: auto;    }
#event     .swiper-slide {      background-size: cover;      background-position: center;    }
#event     .mySwiper2 {   max-width: 1000px;    height: 80%;      width: 100%;    }
#event    .mySwiper {    max-width: 1000px;   height: 20%;      box-sizing: border-box;      padding: 10px 0;    }
#event    .mySwiper .swiper-slide {      width: 25%;      height: 100%;      opacity: 0.4;    }
#event     .mySwiper .swiper-slide-thumb-active {      opacity: 1;    }
#event    .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
#event .swiper-button-next, #event .swiper-button-prev {background: none!important}



#class  .tab {margin-bottom: 20px!important }
#class  select {width: fit-contents; border: 1px solid #eee; padding: 10px; text-align: left; }
#class  .selectBox {display: flex;  justify-content: left;margin-bottom: 25px; align-items: center}
#class  .selectBox > * {margin-right: 10px}
#class  .classBox {display: flex;  justify-content: left;margin-bottom: 10px; ;flex-wrap: wrap}
#class  .classBox > * {width: 32%;margin-bottom: 10px}
#class  .classBox > div:not(:nth-child(3n)) {margin-right: 1%}
#class  .classItem .txt { text-align: left;padding: 15px 0;cursor: pointer}
#class  .classItem .txt h3 {line-height: 0.8em;font-size: 1.1em; font-weight: 500; opacity: 0.8}
#class  .classItem .txt h2 {  line-height: 1.5em;font-size: 1.35em; font-weight: 700;margin-bottom: 20px}
#class  .classItem .txt h2 span {font-size: 0.8em; padding: 5px; border-radius: 0 0 5px 0; background: #000; color: #fff; margin-right: 10px}
#class  .classItem .txt h4 {text-align: right;font-size: 1.5em; font-weight: 500; margin-bottom: 15px;  margin-top: 20px;line-height: 1.5em; padding-bottom: 10px;border-bottom: 1px solid #eee}
#class  .classItem .txt h4 strong {font-size: 1.25em; }
#class  .classItem.done .txt h2 span {font-size: 0.8em; padding: 5px; border-radius: 0 0 5px 0; background: #430A5D; color: #fff; margin-right: 10px}
#class  .classItem .img {    aspect-ratio: 1/1; border-radius: 0 0 10px 0; overflow: hidden; position: relative}
#class  .classItem .img p {position: absolute; top: 5px; left: 0px;border-radius: 0 0 10px 0;}
#class  .classItem .img p  span {font-size: 1.2em; padding: 10px 5px 5px 5px ; border-radius: 0 0 5px 0; background: #000; color: #fff; }
#class  .classItem .img h6 {    position: absolute;    bottom: 0px;    right: 0px;    color: #fff;    padding: 10px;    font-size: 2em;;cursor: pointer}
#class  .classItem .img h6 a {   color: #fff;   }
#class  .classItem .img img {width: 100%; height: 100%; object-fit: cover}


#class .classInfo {position: relative; display: flex}
#class .classInfo .img {width: 50%;position: relative;    aspect-ratio: 1/1;border-radius: 15px 0 0px 0; overflow: hidden}

#class .pay-warp {text-align: left;ddisplay: block; ;margin-bottom: 50px;  border: 1px solid #eee; padding: 30px}
#class .pay-warp button.userAdd {    width: 100%;    border: 0;    padding: 10px 0;    background: #333;    color: #fff;}
#class .pay-warp hr {display: block;  border: 1px solid #eee; }
#class .pay-warp h6 {  font-size: 1.5em;font-weight: 800;margin-bottom: 15px}
#class .pay-wrap p { font-size: 1.1em;}
#class .pay2-wrap {display: flex;  justify-content: space-between;margin-bottom: 10px}
#class  input {
    background: #f5f5f5;width: 100%; border: 1px solid #eee; padding: 10px; text-align: left; margin-bottom: 20px}
#class  textarea {
    background: #f5f5f5;width: 100%; border: 1px solid #eee; padding: 10px; text-align: left; margin-bottom: 20px}
#class .pay2-wrap  > div {width: 100%; }
#class .pay2-wrap  > div:not(:last-child) {margin-right: 10px}
#class .pay2-wrap  > input {width: 100%; border: 1px solid #eee; padding: 10px; text-align: left; }
#class .pay2-wrap  > input:not(:last-child) {margin-right: 10px}
#class button.submit {margin: 0 auto;  width: 100%;max-width: 300px; color: #fff; background: #DF2D32; border: 0; font-size: 1.5em; padding: 20px 0}
#class .pay3-wrap {display: flex; justify-content: flex-end; align-items: center}
#class .pay3-wrap p {text-align: right;font-size: 1.5em; font-weight: 500;line-height: 1.5em}
#class .pay3-wrap p strong {font-size: 1.25em; }
#class .pay3-wrap button {   min-width: 150px; position: relative; margin-left: 20px;  width: 20%; color: #fff; background:#887964; border: 0; font-size: 1.5em; padding: 15px 0}

#class [type="checkbox"] {    margin: 0px 3px 0 0!important;  position: relative;display: inline-block;  vertical-align: middle; background: #E8E8E8;    appearance: none;    width: 1.5em;    height: 1.5em;}
#class [type="checkbox"]::after {    color:##707070;    position: absolute;    right: 4px;    font-size: 0.8em;    cursor: pointer;    top: 2px;    left: 7px;    box-sizing: border-box;    width: 6px;    height: 12px;    transform: rotate(45deg);    border-width: 2px;    border-style: solid;    border-color: #707070;    border-top: 0;    content: " ";    border-left: 0;    transition: all 200ms ease-in;}
#class [type="checkbox"]:checked {    border-color: #BC2D1E;background: #BC2D1E;}
#class [type="checkbox"]:checked::after {  border-color: #fff}
#class  label{margin-right: 6px;}
#class input[type="radio"] {    margin: 0px 5px 0 0;}
#class  input[type="radio"] { border: 1px solid #c9c9c9; display: inline-block;  vertical-align: middle; background: #fff; border-radius: 30px;  appearance: none;
    width: 1.4em;    height: 1.4em; position: relative;}
#class  input[type="radio"]:checked {  background: #fff; border: 1px solid #c9c9c9;}
#class  input[type="radio"]:checked:after{content: ""; display: inline-block;
    width: 1em; height: 1em; border-radius: 50%; background-color: #BC2D1E;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

#class  input[type="radio"]:focus-visible {    outline-offset: max(2px, 0.1em);    outline: max(2px, 0.1em) dotted #BC2D1E;}
#class  input[type="radio"]:hover {    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;    cursor: pointer;}
#class  input[type="radio"]:disabled {    background-color: lightgray;    box-shadow: none;    opacity: 0.7;    cursor: not-allowed;}
#class  input[type="radio"]:disabled + span {    opacity: 0.7;    cursor: not-allowed;}


/*
#class .classInfo .img:before {left: 0;   position:absolute;   bottom:0;   content:" ";   width:100%;   height:250px;   background:   linear-gradient( to bottom, #00000000, #000000cc);}*/
#class .classInfo .img img {width: 100%; aspect-ratio: 1/1; object-fit: cover}
#class  .classInfo .txt {width: 50%;/*position: absolute;width: 100%; left: 50%; bottom: 30px; transform: translateX(-50%);*/ text-align: left; color: #000; padding: 25px}
#class  .classInfo .txt p {font-size: 1.25em; font-weight: 500; opacity: 0.8;margin-bottom: 20px; line-height: 1.75em}
#class  .classInfo .txt h3 {font-size: 1.25em; font-weight: 500; opacity: 0.8;margin-bottom: 40px; line-height: 1.75em}
#class  .classInfo .txt h3 svg {width: 20px; text-align: center;margin-right: 10px; opacity: 0.5}
#class  .classInfo .txt h4 {text-align: right;font-size: 1.5em; font-weight: 500; margin-bottom: 20px; line-height: 1.5em}
#class  .classInfo .txt h4 strong {font-size: 1.25em; }
#class  .classInfo .txt h2 {font-size: 2.65em; font-weight: 700;margin-bottom: 10px; display: flex; align-items: center}
#class  .classInfo .txt h2 span {font-size: 0.35em; padding: 7.5px; border-radius: 0 0 5px 0; background: #000; color: #fff;   width: fit-content;    margin: 0 10px 0px 0;}
#class  .classInfo .txt h2 em {font-size: 0.6em; font-weight: 400;  }
#class  .classInfo .txt h2 em a {color: #000 }
#class  .classInfo button.submit {   max-width: 100%; position: relative; margin: 0 auto;  width: 100%; color: #fff; background:#887964; border: 0; font-size: 1.5em; padding: 15px 0}
#class .classInfo .btnWrap{position: relative;; width: 100%}
#class  .classInfo .now {   animation-name: floating;  -webkit-animation-name: floating;  animation-duration: 1.5s;  -webkit-animation-duration: 1.5s;  animation-iteration-count: infinite;  -webkit-animation-iteration-count: infinite;   z-index: 99;    position: absolute;    width: fit-content;    height: 30px;    left: 50%;    transform: translateX(-50%);    bottom: 35px;    background: #484848;    color: #fff;    border-radius: 5px;    padding: 5px 10px;}
#class  .classInfo .now:after {   animation-name: floating2;  -webkit-animation-name: floating2;  animation-duration: 1.5s;  -webkit-animation-duration: 1.5s;  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;   border-top: 10px solid #484848;    border-left: 10px solid transparent;    border-right: 10px solid transparent;    border-bottom: 0px solid transparent;    content: "";    position: absolute;    left: 50%;    transform: translateX(-50%);     bottom: -10px;}

#class .classInfo.v2 .img {    aspect-ratio: 1/1;}
#class  .classInfo.v2 .txt h2 span  {display: none}
#class  .classInfo.v2   {padding-bottom: 20px; border-bottom: 1px solid #eee}

#class  .classCont {position: relative;margin-top: 25px}
#class  .classCont .contnav {    position: sticky;    top: 0; 
    width: fit-content;
    margin: 0 auto; z-index: 99;  background-color: #fff0; display: flex;  justify-content: center;}
#class  .classCont .nav__menu {  display: flex;}
#class  .classCont .nav__menu > li {  padding: 1.25em;font-size: 1.25em;}
#class  .classCont .nav__menu--foused {  color: #887964; font-weight: 800;}
#class  .classCont .marker {  content: "";  position: absolute;  bottom: 1.2rem;  left: 50%;  width: 0%;  height: 3px;  background-color: #887964;  transition: 0.2s;}
#class  .classCont section { padding: 100px 0; margin-bottom: 20px; border-bottom: 1px solid #ddd}
#class  .readyBox {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000000ad;
    top: 0;
    left: 0;
}

#class  .readyBox p {
    position: relative!important;
    top: unset!important;
    left: unset!important;
    color: #fff;
    font-size: 2.5em;
}


#class #one h1 { font-size: 1.8em;margin-bottom: 60px;position: relative}
#class #one h1 span {font-size: 2em; display: block;margin-bottom: 20px;font-weight: 800;}
#class #one h1 em {    display: block;    font-size: 1.25em;    font-weight: 600;    margin-bottom: 10px;}
#class #one  .img-wrap {display: flex; flex-wrap: wrap; justify-content: space-between;margin-top: 50px}
#class #one  .img-wrap >img {width: 49%; }
#class  #two .cont2 .info {padding: 20px; border: 1px solid #eee; border-radius: 10px}
#class  #two .cont2 table {margin-top: 20px;}
#class  #two .cont2 p {font-size: 1.25em; font-weight: 500; opacity: 0.8; line-height: 1.75em}
#class  #two .cont2 h3 { opacity: 1;margin-bottom: 20px;    font-size: 2.5em;    line-height: 1em;    font-weight: 800;}
#class  #two .cont2 h5 {font-size: 1.45em; font-weight: 500; opacity: 1;margin:  40px 0 15px; line-height: 1.75em}
#class  #three {text-align: center}
#class  #three h5 {    font-size: 2.5em;  font-weight: 800;; opacity: 1; line-height: 1.75em}
#class  #three p {font-size: 1.45em; font-weight: 500; opacity: 0.8;margin-bottom: 40px; line-height: 1.75em}
#class  #three button { position: relative; margin: 0 auto;  width: 100%; color: #887964; background:#fff; border: 1px solid #ddd; font-size: 1.5em; padding: 15px 0; margin-bottom: 40px; transition: all 0.3s ease}
#class  #three button:hover {  background:#f9f9f9;  transition: all 0.3s ease}


@keyframes floating {
  0% {
     bottom: 55px;
  }
  50% {
      bottom: 45px;
  }
  100% {
     bottom: 55px;
  }
}

@keyframes floating2 {
  0% {
      bottom: -3px;
  }
  50% {
      bottom: -8px;
  }
  100% {
      bottom: -3px;
  }
}


body.swal2-toast-shown .swal2-container {    max-width: 500px!important;    width: 80%!important;}
body.swal2-toast-shown .swal2-container h2 {    font-size: 1.5em!important}
	
@media (max-width: 1200px) {
	#floor img.logo {    max-width: 250px;		}
	#floor .table-wrap { padding: 50px 20px;}
	#event .text-wrap  > div {width: 100%;   padding: 15px 20px;
    font-size: 1.1em; }
	#event .table-wrap  > div {width: 100%;    padding: 20px;
    font-size: 1.1em;}
	#event .pay-warp {width: 100%;    padding: 20px;;}
	#event .calendar-wrap {width: 100%; }
	#event .calendar-time {width:100%; padding: 20px 0}
	#event .text-wrap  > div:not(:last-child) {margin-right: 0px;margin-bottom: 5px}
	#event .time-wrap  > div:not(:last-child) {margin-right: 0px;margin-bottom: 5px}
	#event .time-wrap {flex-wrap: wrap}
	#event .calendar-time h6.last {  margin-top: 20px}
	
	#company h1:before, #event h1:before ,#floor h1:before ,#floor h2:before {display: none}
	
	#floor  .btn-wrap button { font-size: 1.3em; }
	#floor > p {
		font-size: 1.5em;}
	#event > h1 {padding: 0 20px}
	#event {}
	
	#class  .selectBox { padding: 0px 20px; }
	#class  .classBox { padding: 0px 20px; }
	#class  .classBox > * {  font-size: 1em;width: 49%;margin-bottom: 10px}
	#class  .classBox > div:not(:nth-child(3n)) {margin-right: 0%}
	#class  .classBox > div:not(:nth-child(2n)) {margin-right: 2%}
	
	
	#class  .classInfo .txt p {font-size: 1.15em}
	#class  .classInfo .txt h3 {font-size: 1.15em; }
	#class  .classInfo .txt h4 {font-size: 1.35em; }
	#class  .classInfo .txt h4 strong {font-size: 1.1em; }
	#class  .classInfo .txt h2 {font-size: 1.65em}
	#class .classItem .txt h4 {font-size: 1.35em;}
	
	#class .classInfo {flex-wrap: wrap}
	#class .classInfo .img {width: 100%; 
    border-radius: 0px 0 0px 0;}
	#class  .classInfo .txt {width: 100%;}
	#class  .classCont section { padding: 30px 20px; }
	#class .classCont .contnav {    width: 100%;  top: 60px;    background-color: #fff;}
	#class .classCont .nav__menu > li {    padding: 10px 10px 15px;  font-size: 1.05em;width: 100%; text-align: center}
	
	#class #one h1 { font-size: 1.2em;margin-bottom: 30px;}
	#class #one h1 span {font-size: 1.4em; }
	#class #one h1 em {   font-size: 1.05em;  }
	#class  #two .cont2 p {font-size: 1em;}
	#class  #two .cont2 h3 { font-size: 1.6em; }
	#class  #two .cont2 h5 {font-size: 1.2em; }
	#class  #three h5 {    font-size: 1.6em;  }
	#class  #three p {font-size: 1.2em; }
	#class  .readyBox p {
		font-size: 1.8em;
	}
	#class br.visible-xs {display: none!important;}
}

@media (max-width: 600px) {
	#class .classCont section#one img {
    width: 100%!important;
	}

	#class .classItem .txt h2 {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		width: 100%;
	}

	#class br.visible-xs {display: none!important;}
}
@media (max-width: 500px) {
	#event > button { padding: 10px 0}

	#floor  .btn-wrap button { width: 100%; text-align: center; margin-right: 0px;   margin-bottom: 15px}
	#floor h1 {line-height: 1.7em;}
	#floor h1:after {    height: 15px!important;    width: 15px!important;		background-size: contain;}
	#floor h2 {line-height: 1.7em;}
	#floor h2:after {    height: 15px!important;    width: 15px!important;		background-size: contain;}
	
	#event .pay2-wrap  > input:not(:last-child) {margin-right: 0px;margin-bottom: 5px}
	#event .pay2-wrap  > div:not(:last-child) {margin-right: 0px;margin-bottom: 15px}
	#event .pay2-wrap {flex-wrap: wrap}
	#event .notice { padding: 0 20px;}
	#event h1 span { font-size: 1.75em}
	#event h1 { font-size: 1.5em}
	#event h1:after {
    height: 15px;
    width: 15px;
		background-size: contain;}
	
	#class .pay2-wrap  > input:not(:last-child) {margin-right: 0px;margin-bottom: 5px}
	#class .pay2-wrap  > div:not(:last-child) {margin-right: 0px;margin-bottom: 15px}
	#class .pay2-wrap {flex-wrap: wrap}
	#class .pay3-wrap {flex-wrap: wrap; padding: 20px}
	#class .pay3-wrap > * {width: 100%!important;margin-left: 0; margin-bottom: 10px;max-width: 100%}

	#class .classItem .txt h3 {
		line-height: 1.3em;
	}
	#class br.visible-xs {display: inline-block!important;}
	#class .classItem .img {
		height: fit-content;}
	/*#class section {font-size: 0.95em}*/
	#class  .readyBox p {
		font-size: 1.5em;
	}
	
	
}

@media (max-width: 300px) {
	#class  .classBox > * { width: 100%;margin-bottom: 10px}
	#class  .classBox > div:not(:nth-child(3n)) {margin-right: 0%}
	#class  .classBox > div:not(:nth-child(2n)) {margin-right: 0%}
	#class .classItem .img {	    width: 100%;	height: 120px;}
	
}



ul.tab{display: flex; width: 100%; border-bottom: 1px solid #eee; margin-bottom: 100px}
ul.tab li{padding: 15px; text-align: center;width: 100%; font-weight: 400; font-size: 1.4em;opacity: 0.7}
ul.tab li a{    display: block;color: inherit}
ul.tab li:hover{font-weight: 400;opacity: 1}
ul.tab li.active{font-weight: 800;opacity: 1}

ul.tabs{  margin: 0px;  padding: 0px;  list-style: none;display: flex; width: 100%; border-bottom: 1px solid #eee; margin-bottom: 100px}
ul.tabs li{padding: 15px; text-align: center;width: 100%; font-weight: 400; font-size: 1.4em;opacity: 0.7;  display: inline-block;    background: none;  cursor: pointer;}
ul.tabs li:hover{padding: 15px; text-align: center;width: 100%; font-weight: 400; font-size: 1.4em;opacity: 1;  display: inline-block;  color: #000;  background: none;  cursor: pointer;}
ul.tabs li.current{font-weight: 800;opacity: 1;    background: none;    color: #000;    box-shadow: none;}
#evenet.my .tab-content{  display: none;  }
.tab-content.current{  display: inherit;}



.td_center {text-align: center}
#event.my .state1 {color: #000}
#event.my .state2 {color: #868686; text-decoration: line-through}
#event.my .state3 {color: red; font-weight: 800}

.modal .notice {
    padding: 10px;
    margin-top: 15px;
    background: #f9f9f9;
}




/* Accordion styles */
#acco .tabs {  overflow: hidden;;}
#acco .tab > input {    display: none;}
#acco .tab { transition: all 0.3s ease;   align-items: center; width: 100%;  color: white;  overflow: hidden;}
#acco .tab-label {  display: flex;  justify-content: space-between;  padding: 1em; margin-bottom: 30px;  font-size: 2em;  font-weight: 800;    color: #fff;  background: #a37f57;  cursor: pointer;	margin-right: 0  /* Icon */}
#acco .tab-label:hover {  transition: all 0.3s ease; background: #1a252f;}
#acco .tab-label::after {  content: "❯";  width: 1em;  height: 1em;  text-align: center;  transition: all 0.35s;}
#acco .tab-content {  max-height: 0;  padding: 0em;  color: #2c3e50;  background: white;  transition: all 0.35s;}
#acco .tab-close {  display: flex;  justify-content: flex-end;  padding: 1em;  font-size: 0.75em;  background: #2c3e50;  cursor: pointer;}
#acco .tab-close:hover {  background: #1a252f;}
#acco input:checked + .tab-label {  background: #1a252f;}
#acco input:checked + .tab-label::after {  transform: rotate(90deg);}
#acco input:checked ~ .tab-content {    max-height: fit-content;}


#refund input, #refund select{border: 1px solid #eee; padding-left: 5px; font-size: 14px; height: 32px;}
#refund input:focus, #refund select:focus{ outline:  0; }