html,
body {
font-size: 62.5%;
@media screen and (max-width: 1400px) {
font-size: 50%;
}
}
.wrap_new {
padding-top: 100px;
padding-bottom: 100px;
section {
position: relative;
> img {
width: 100%;
}
.content {
padding-top: 56px;
padding-bottom: 56px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
.title {
width: auto !important;
font-style: normal;
margin-top: 0;
p {
color: #1A1A1A;
font-size: 4.8rem;
font-weight: 700;
line-height: 140%;
margin-top: 0;
}
h2 {
color: #E20613;
font-size: 7.2rem;
font-weight: 900;
line-height: 140%;
letter-spacing: 0.14px;
}
@media screen and (max-width: 1000px) {
p {
font-size: 16px;
}
h2 {
font-size: 32px;
}
}
}
}
.character_bg {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
}
section {
.img-wrap2-mo {
display: none;
}
@media screen and (max-width: 1200px) {
.obj {
display: none;
}
.speech01 {
display: none !important;
}
.img-character1 {
display: none !important;
}
.img-cloud1 {
display: none;
}
.img-cloud2 {
display: none !important;
}
.img-cloud3 {
display: none;
}
.img-wrap2 {
display: none;
}
.img-wrap3 {
display: none;
}
.img-wrap4 {
display: none;
}
.img-wrap5 {
display: none;
}
.character03 {
display: none;
}
}
@media screen and (max-width: 1000px) {
&.section1,
&.section2,
&.section3,
&.section4,
&.section5,
&.section6,
&.section7,
&.section8 {
padding: 0 20px;
}
}
}
.section1 {
padding: 0 40px;
.content {
background: url(../img/2025/bg01.png) no-repeat right 0 top 50% / 467px;
@media screen and (max-width: 1000px) {
padding-top: 40px;
padding-bottom: 56px;
background: url(../img/2025/bg01.png) no-repeat right 0 top 50% / 167px;
}
}
.title-wrap {
.img-title1 {
display: block;
@media screen and (max-width: 1400px) {
width: 45%;
max-width: 247px;
}
@media screen and (max-width: 1000px) {
width: 80%;
&.title2 {
width: 60%;
max-width: 186px;
}
}
}
}
.btn-wrap {
padding-top: 263px;
@media screen and (max-width: 1000px) {
padding-top: 180px;
&.align {
display: block !important;
}
}
}
.obj { position: absolute; }
.obj-mo {
display: none;
@media screen and (max-width: 1000px) {
display: block;
position: absolute;
&.obj1-mo {
width: 90px;
top: -29px;
left: 220px;
}
&.obj2-mo {
width: 161px;
bottom: 216px;
left: 31px;
}
}
@media screen and (max-width: 364px) {
&.obj1-mo {
left: auto;
right: -20px;
}
}
}
.obj0 {
top: 10%;
left: 15%;
width: 109px;
}
.obj1 {
top: 4%;
left: 48%;
width: 15.4rem;
}
.obj2 {
top: 5%;
left: 85%;
width: 12.9rem;
}
.obj3 {
top: 45%;
left: 10%;
width: 32.8rem;
}
.obj4 {
top: 63%;
left: 32%;
width: 11.0rem;
}
.obj5 {
top: 55%;
left: 42%;
width: 16.5rem;
}
.obj6 {
top: 63%;
left: 52%;
width: 17.9rem;
}
.obj7 {
top: 49%;
left: 77%;
width: 25.2rem;
}
}
.section2 {
position: relative;
padding: 0 40px;
.img-title {
@media screen and (max-width: 1400px) {
width: 45%;
}
@media screen and (max-width: 1000px) {
width: 70%;
max-width: 247px;
}
}
.list-info-main {
padding-top: 74px;
li {
display: flex;
align-items: center;
gap: 24px;
padding: 24px 48px;
border-radius: 20px;
border: 4px solid #1A1A1A;
transition: all .3s;
& + li {
margin-top: 16px;
background: #fff;
}
.speech {
position: relative;
color: #FFF;
font-size: 2.4rem;
font-weight: 700;
line-height: 140%;
letter-spacing: 2px;
border-radius: 100px;
background: #1A1A1A;
padding: 8px 24px;
&::after {
position: absolute;
left: 50%;
bottom: -14px;
z-index: 999;
transform: translateX(-50%);
display: block;
content: "";
width: 45px;
height: 20px;
background: url(../img/2025/ico_tail.svg) no-repeat center center / contain;
}
}
&:hover {
background: #fff;
}
.label {
width: 162px;
display: block;
padding: 9px 28.5px 7px 28.5px;
border-radius: 100px;
text-align: center;
color: #FFF;
font-size: 2.8rem;
font-style: normal;
font-weight: 700;
line-height: 48px;
letter-spacing: 2px;
background: #E20613;
}
p {
color: #1A1A1A;
font-size: 2.8rem;
font-weight: 700;
line-height: 140%;
letter-spacing: 2px;
}
}
@media screen and (max-width: 1000px) {
padding-top: 20px;
li {
padding: 12px 16px;
display: block;
border: 2px solid #1A1A1A;
.label {
display: inline;
font-size: 14px;
line-height: 130%;
padding: 6px 12.5px;
}
.speech {
display: none;
}
p {
font-size: 14px;
line-height: 140%;
letter-spacing: 0;
padding-top: 8px;
}
.label {
display: block;
width: 83px !important;
}
}
}
}
.img-cloud1 {
position: absolute;
bottom: 5.5rem;
right: 8.6rem;
}
.img-cloud-mo {
display: none;
}
@media screen and (max-width: 1000px) {
.img-cloud-mo {
display: block;
position: absolute;
top: 105px;
right: -33px;
}
}
}
.section3 {
padding: 0 40px;
.content {
padding-bottom: 132px;
}
.img-wrap {
position: absolute;
top: 54rem;
right: 20.4rem;
z-index: 0;
.speech01 {
display: block;
transform: translateX(6rem);
}
.img-character1 {
display: block;
}
@media screen and (max-width: 1400px) {
right: 0;
.speech01 {
width: 50%;
}
.img-character1 {
width: 50%;
}
}
}
.obj3-mo {
display: none;
@media screen and (max-width: 1000px) {
display: block;
position: absolute;
top: 314px;
right: 0;
z-index: 1;
}
}
.img-wrap2-mo {
display: none;
@media screen and (max-width: 1000px) {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
.diagram1-1 {
width: 24px;
height: 22px;
transform: translate(1px, -20px);
transition: all .3s;
&.active {
transform: translate(-10px, -20px);
}
}
.diagram1-2 {
width: 30px;
height: 33px;
transform: translate(-16px, -72px);
transition: all .3s;
&.active {
transform: translate(0, -55px);
}
}
}
}
.img-title {
@media screen and (max-width: 1400px) {
width: 80%;
}
}
.title-desc {
p {
color: #1A1A1A;
font-size: 3rem;
font-weight: 500;
line-height: 140%;
padding-top: 32px;
text-align: center;
span {
color: #E20613;
font-weight: 700;
}
}
@media screen and (max-width: 1000px) {
p {
font-size: 15px;
padding-top: 16px;
}
}
@media screen and (max-width: 500px) {
p {
font-size: 15px;
padding-top: 16px;
strong {
display: inline;
}
br {
display: none;
}
.br {
display: block;
margin-bottom: 10px;
}
}
}
}
.year {
color: #E20613;
font-size: 4.4rem;
font-weight: 700;
line-height: 140%;
}
.finish-ment {
color: #FFF;
text-align: center;
font-size: 4.0rem;
font-weight: 700;
border-radius: 32px;
border: 4px solid #1A1A1A;
background: #E20613;
padding: 24px;
margin-top: 8px;
}
.history-title {
color: #E20613;
text-align: center;
font-size: 7.2rem;
font-weight: 900;
line-height: 140%;
letter-spacing: 0.14px;
padding-top: 180px;
@media screen and (max-width: 1000px) {
padding-top: 96px;
font-size: 32px;
}
}
.list-info2-wrap {
position: relative;
}
.list-info2 {
display: grid;
grid-template-columns: 1fr 1fr;
@media screen and (max-width: 1000px) {
&.pt172 {
padding-top: 20px;
}
}
li {
position: relative;
&:nth-child(2n-1) {
border-right: 4px solid #E20613;
padding-right: 22px;
.year {
text-align: right;
}
}
&:nth-child(2n) {
padding-left: 22px;
}
&:nth-child(2) {
margin-top: -87px;
&::before {
position: absolute;
top: 133px;
left: -18px;
display: block;
content: "";
width: 32px;
height: 32px;
background: #E20613;
border-radius: 100%;
}
}
&:nth-child(3) {
margin-top: -75px;
&::after {
position: absolute;
top: 179px;
right: -18px;
display: block;
content: "";
width: 32px;
height: 32px;
background: #E20613;
border-radius: 100%;
}
}
&:nth-child(4) {
margin-top: 150px;
&::after {
position: absolute;
top: 197px;
left: -18px;
display: block;
content: "";
width: 32px;
height: 32px;
background: #E20613;
border-radius: 100%;
}
}
&:nth-child(5) {
margin-top: -150px;
&::before {
position: absolute;
top: 179px;
right: -18px;
display: block;
content: "";
width: 32px;
height: 32px;
background: #E20613;
border-radius: 100%;
}
}
&:nth-child(6) {
margin-top: 80px;
&::after {
position: absolute;
top: 179px;
left: -18px;
display: block;
content: "";
width: 32px;
height: 32px;
background: #E20613;
border-radius: 100%;
}
}
&:nth-child(7) {
height: 42px;
&::after {
position: absolute;
top: 16px;
right: -18px;
display: block;
content: "";
width: 32px;
height: 32px;
background: #E20613;
border-radius: 100%;
}
}
.year {
color: #E20613;
font-size: 4.4rem;
font-weight: 700;
line-height: 140%;
}
.card {
padding: 24px;
border-radius: 32px;
border: 4px solid #1A1A1A;
background: #FFF;
.row1 {
border-bottom: 1px solid #1A1A1A;
padding-bottom: 12px;
.strong {
color: #1A1A1A;
font-size: 2.4rem;
font-weight: 700;
line-height: 140%;
}
.span {
color: #1A1A1A;
font-size: 2.4rem;
font-weight: 500;
line-height: 140%;
}
}
.row2 {
padding-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
.p {
color: #1A1A1A;
font-size: 2.4rem;
font-weight: 500;
line-height: 140%;
}
.strong {
color: #1A1A1A;
font-size: 2.4rem;
font-weight: 700;
line-height: 140%;
}
.price {
color: #1A1A1A;
font-size: 3.2rem;
font-weight: 900;
line-height: 140%;
&.red {
color: #E20613;
}
}
}
}
}
@media screen and (max-width: 1000px) {
display: block;
li {
border-left: 0; /*m*/
padding-left: 14px !important; /*m*/
& + li {
padding-top: 16px !important; /*m*/
}
&:nth-child(2n-1) {
border-right: 0; /*m*/
padding-right: 0; /*m*/
.year {
text-align: left; /*m*/
}
}
&:nth-child(2n) {
padding-left: 0; /*m*/
}
&:nth-child(2) {
margin-top: 0; /*m*/
&::before {
top: 25px; /*m*/
left: -9px; /*m*/
width: 16px; /*m*/
height: 16px; /*m*/
}
&::after {
display: block; /*m*/
content: ""; /*m*/
position: absolute; /*m*/
top: 40px; /*m*/
left: -2.5px; /*m*/
width: 2px; /*m*/
height: 100%; /*m*/
background: #E20613; /*m*/
}
}
&:nth-child(3) {
margin-top: 0; /*m*/
&::after {
top: 25px; /*m*/
left: -9px; /*m*/
width: 16px; /*m*/
height: 16px; /*m*/
}
&::before {
display: block; /*m*/
content: ""; /*m*/
position: absolute; /*m*/
top: 40px; /*m*/
left: -2.5px; /*m*/
width: 2px; /*m*/
height: 100%; /*m*/
background: #E20613; /*m*/
}
}
&:nth-child(4) {
margin-top: 0; /*m*/
&::after {
top: 25px; /*m*/
left: -9px; /*m*/
width: 16px; /*m*/
height: 16px; /*m*/
}
&::before {
display: block; /*m*/
content: ""; /*m*/
position: absolute; /*m*/
top: 40px; /*m*/
left: -2.5px; /*m*/
width: 2px; /*m*/
height: 100%; /*m*/
background: #E20613; /*m*/
}
}
&:nth-child(5) {
margin-top: 0; /*m*/
&::before {
top: 25px; /*m*/
left: -9px; /*m*/
width: 16px; /*m*/
height: 16px; /*m*/
}
&::after {
display: block; /*m*/
content: ""; /*m*/
position: absolute; /*m*/
top: 40px; /*m*/
left: -2.5px; /*m*/
width: 2px; /*m*/
height: 100%; /*m*/
background: #E20613; /*m*/
}
}
&:nth-child(6) {
margin-top: 0; /*m*/
/* background: red; */
&::after {
display: block;
content: "";
top: 25px; /*m*/
left: -9px; /*m*/
width: 16px; /*m*/
height: 16px; /*m*/
}
&::before {
display: block; /*m*/
content: ""; /*m*/
position: absolute; /*m*/
top: 40px; /*m*/
left: -2.5px; /*m*/
width: 2px; /*m*/
height: 100%; /*m*/
background: #E20613; /*m*/
}
}
&:nth-child(7) {
height: 42px;
&::after {
top: 25px; /*m*/
left: -9px; /*m*/
width: 16px; /*m*/
height: 16px; /*m*/
}
}
.year {
font-size: 22px; /*m*/
}
.card {
padding: 12px; /*m*/
border-radius: 12px; /*m*/
border: 2px solid #1A1A1A; /*m*/
.row1 {
border-bottom: 1px solid #1A1A1A;
padding-bottom: 12px;
.strong {
color: #1A1A1A;
font-size: 12px;
font-weight: 700;
line-height: 140%;
}
.span {
color: #1A1A1A;
font-size: 12px;
font-weight: 500;
line-height: 140%;
}
}
.row2 {
padding-top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
.p {
color: #1A1A1A;
font-size: 12px;
font-weight: 500;
line-height: 140%;
}
.strong {
color: #1A1A1A;
font-size: 12px;
font-weight: 700;
line-height: 140%;
}
.price {
color: #1A1A1A;
font-size: 16px;
font-weight: 900;
line-height: 140%;
&.red {
color: #E20613;
}
}
}
}
}
}
}
@media screen and (max-width: 1000px) {
.year-wrap {
position: relative;
&.align.vm {
align-items: start;
.finish-ment {
width: 100%;
margin-top: 8px;
padding: 12px 10px;
font-size: 18px;
font-weight: 700;
line-height: 140%;
letter-spacing: -0.27px;
border-radius: 12px;
border: 2px solid #1A1A1A;
}
}
}
.year {
font-size: 22px;
&.new {
position: absolute;
top: -39px;
left: 14px;
}
}
}
.img-wrap2 {
position: absolute;
top: -109px;
left: -48px;
&:hover {
.diagram1-1 {
transform: translateX(-11px);
}
.diagram1-2 {
transform: translate(-34px, -48px) rotate(180deg);
}
}
.diagram1-1 {
width: 8.1rem;
transition: all .5s;
}
.diagram1-2 {
width: 9.9rem;
transition: all .5s;
transform: translate(-50px, -65px);
}
@media screen and (max-width: 1400px) {
left: 0;
}
}
.slider01 {
position: relative;
margin-top: 286px;
padding-left: 156px;
.slick-list {
overflow: visible;
}
.slick-slide {
opacity: 0.4;
transition: opacity 0.3s ease;
& + .slick-slide {
margin-left: 124px;
}
}
.slick-current {
opacity: 1;
img {
border: 4px solid #000;
}
}
img {
display: block;
width: 100%;
margin: 0 auto;
border: 4px solid #fff;
}
.slick-prev {
left: 34px;
width: 100px;
height: 100px;
background: url(../img/2025/ico_slide_prev.svg) no-repeat center center / contain;
}
.slick-next {
right: 10px;
width: 100px;
height: 100px;
background: url(../img/2025/ico_slide_next.svg) no-repeat center center / contain;
}
.slick-prev, .slick-next {
z-index: 100;
}
.slick-prev:before, .slick-next:before {
display: block;
content: "";
height: 100px;
z-index: 100;
}
@media screen and (max-width: 1000px) {
margin-top: 131px;
padding-left: 0;
overflow: hidden;
img {
width: 85%;
}
.slick-slide {
opacity: 1;
& + .slick-slide {
margin-left: 0;
}
}
.slick-prev {
left: 0;
width: 26px;
height: 26px;
}
.slick-next {
right: 0;
width: 26px;
height: 26px;
}
}
}
}
.slider-wrap {
position: relative;
.slider01-frame {
position: absolute;
top: 0;
left: -96%;
width: 100%;
height: 47vw;
background: #fff;
}
@media screen and (max-width: 1000px) {
.slider01-frame {
display: none;
}
}
}
.section4 {
padding: 0 40px;
.title {
position: relative;
z-index: -1;
}
.img-wrap2 {
position: absolute;
top: 5.4rem;
right: 36.8rem;
z-index: 0;
@media screen and (max-width: 1400px) {
right: 30rem;
}
&:hover {
.diagram2-1 {
transform: translate(40px, -10px) rotate(45deg);
}
.diagram2-2 {
transform: translate(40px, 0) rotate(60deg);
}
}
.diagram2-1 {
width: 9.3rem;
transform: translate(80px, 0px);
transition: all .5s;
}
.diagram2-2 {
width: 11.5rem;
transition: all .5s;
}
}
.img-wrap2-mo {
display: none;
@media screen and (max-width: 1000px) {
display: none;
position: absolute;
top: 37px;
right: 27px;
.diagram2-1 {
position: relative;
z-index: 1;
width: 29px;
height: 29px;
transform: translate(-10px, 10px) rotate(0);
transition: all .3s;
&.active {
transform: translate(30px, 0) rotate(-45deg);
}
}
.diagram2-2 {
width: 41px;
height: 37px;
transform: rotate(-60deg);
transition: all .3s;
&.active {
transform: rotate(0);
}
}
}
}
.img-cloud2 {
display: block;
transform: translate(-10rem, -21rem);
@media screen and (max-width: 1400px) {
transform: translate(0, -21rem);
}
}
.list-gift {
position: relative;
width: 100%;
display: flex;
gap: 9.2rem 10.6rem;
justify-content: center;
margin: 0 auto;
flex-wrap: wrap;
padding-top: 74px;
li {
width: 27%;
background: #FFF;
transition: all .3s;
order: 0;
.img-wrap {
position: relative;
background: #fff;
.desc {
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
color: #FFF;
text-align: center;
font-size: 1.4rem;
font-weight: 500;
line-height: 140%;
letter-spacing: 1px;
background: rgba(0, 0, 0, 0.5);
aspect-ratio: 1/1;
/* border-radius: 100%; */
transition: all .3s;
}
}
.img-gift02-mo {
display: none;
}
img {
width: 100%;
display: block;
aspect-ratio: 1/1;
object-fit: cover;
/* border-radius: 100%; */
}
p {
color: #1A1A1A;
text-align: center;
font-size: 2.6rem;
font-weight: 700;
line-height: 140%;
letter-spacing: 1.645px;
padding-top: 13px;
}
}
@media screen and (max-width: 1000px) {
gap: 16px 14px;
justify-content: space-between;
li {
width: calc(50% - 14px);
&:nth-child(2) {
order: -1;
width: 100%;
img {
display: none;
}
.img-gift02-mo {
display: block;
aspect-ratio: 1 / 0.372;
}
}
}
}
}
}
.section5 {
position: relative;
padding: 0 40px;
.img-wrap3 {
position: absolute;
top: 12.1rem;
left: 18rem;
.speech02 {
display: block;
transform: translate(-100px, -20px);
}
.character02 {
display: block;
}
@media screen and (max-width: 1400px) {
top: -2rem;
left: 18rem;
.speech02 {
width: 50%;
}
.character02 {
width: 30%;
}
}
}
.field-gift {
margin-top: 74px;
.row {
display: flex;
gap: 76px;
& + .row {
margin-top: 48px;
}
p {
color: #1A1A1A;
text-align: center;
font-size: 3.2rem;
font-weight: 700;
line-height: 140%;
letter-spacing: 1.645px;
padding-top: 15px;
}
img { width: 100%; }
}
@media screen and (max-width: 1000px) {
display: none;
}
}
.field-gift-mo {
display: none;
@media screen and (max-width: 1000px) {
display: flex;
flex-wrap: wrap;
gap: 16px 14px;
padding-top: 20px;
li {
width: calc(50% - 14px);
&:nth-child(1) {
width: 100%;
}
img {
width: 100%;
}
p {
color: #1A1A1A;
text-align: center;
font-size: 14px;
font-weight: 600;
line-height: 140%;
padding-top: 4px;
}
}
}
}
.info-bx {
border-radius: 24px;
background: #FDCCD7;
padding: 32px;
margin-top: 60px;
.desc1 {
color: #1A1A1A;
font-size: 2.8rem;
font-weight: 500;
line-height: 140%;
span {
color: #E20613;
}
}
.desc2 {
color: #1A1A1A;
font-size: 2.4rem;
font-weight: 500;
line-height: 140%;
padding-top: 24px;
}
@media screen and (max-width: 1000px) {
padding: 10px 12px;
border-radius: 6px;
.desc1 {
font-size: 12px;
span {
display: block;
font-size: 14px;
padding-bottom: 6px;
}
br {
display: none;
}
}
.desc2 {
font-size: 12px;
padding-top: 6px;
}
}
}
}
.section6 {
padding: 0 40px;
.content {
position: relative;
.img-wrap4 {
position: absolute;
top: -247px;
right: -9.5rem;
&:hover {
.diagram3-1 {
transform: translate(35px, 28px);
}
.diagram3-2 {
transform: translate(20px, -20px);
}
}
.diagram3-1 {
position: relative;
transform: translate(55px, 8px);
z-index: 0;
transition: all .5s;
}
.diagram3-2 {
position: relative;
z-index: 1;
transition: all .5s;
}
@media screen and (max-width: 1400px) {
top: -30rem;
right: 10rem;
}
}
.list-course {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
margin-top: 165px;
li {
position: relative;
&:first-child {
&::before {
display: block;
content: "";
position: absolute;
top: -103px;
left: 50%;
transform: translateX(-50%);
width: 162px;
height: 85px;
background: url(../img/2025/img_start.svg) no-repeat;
}
}
&:last-child {
&::before {
display: block;
content: "";
position: absolute;
top: -98px;
left: 50%;
transform: translateX(-50%);
width: 162px;
height: 80px;
background: url(../img/2025/img_finish.svg) no-repeat;
}
}
img { width: 100%; }
.p {
color: #1A1A1A;
text-align: center;
font-size: 3.2rem;
font-weight: 700;
line-height: 140%;
letter-spacing: 1.5px;
padding-top: 18px;
}
}
@media screen and (max-width: 1000px) {
gap: 8px;
margin-top: 55px;
li {
.p {
font-size: 14px;
}
&:nth-child(1) {
&::before {
top: -32.8px;
width: 53px;
height: 28px;
background: url(../img/2025/img_start.svg) no-repeat center center / contain;
}
}
&:last-child {
&::before {
top: -32.8px;
width: 53px;
height: 28px;
background: url(../img/2025/img_finish.svg) no-repeat center center / contain;
}
}
}
}
}
.obj {
position: absolute;
top: 33%;
right: 28%;
}
.img-map { margin-top: 67px; }
}
}
.section7 {
padding: 0 40px;
.img-wrap5 {
position: absolute;
top: -247px;
left: -95px;
/* @media screen and (max-width: 1400px) {
display: none;
} */
&:hover {
.diagram4-1 {
width: 62px;
height: 63px;
transform: translate(88px, 34px) rotate(360deg);
}
.diagram4-2 {
width: 63px;
transform: translate(20px, 36px);
}
}
.diagram4-1 {
width: 50px;
height: 51px;
position: relative;
transform: translate(88px, 34px);
z-index: 1;
transition: all .5s;
}
.diagram4-2 {
width: 118px;
position: relative;
z-index: 0;
transition: all .5s;
}
}
.img-wrap5-mo {
display: none;
@media screen and (max-width: 1000px) {
display: inline-block;
display: none;
position: absolute;
top: -61px;
left: -8px;
.diagram4-1 {
width: 15px;
height: 15px;
transform: translate(27px, 9.5px) rotate(360deg);
transition: all .3s;
&.active {
width:25px;
height:25px;
transform: translate(32px, 5.5px) rotate(0);
}
}
.diagram4-2 {
width: 35px;
height: 35px;
/* &.active {
} */
}
}
}
.list-schedule {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
li {
width: 25%;
.nowrap {
white-space: nowrap;
&.pc {
display: block;
}
&.mobile {
display: none;
}
}
@media screen and (max-width: 500px) {
.nowrap {
&.pc {
display: none;
}
&.mobile {
display: block;
}
}
}
img {
width: 100%;
max-width: 260px;
display: block;
margin: 0 auto;
aspect-ratio: 1/1;
}
.time-bar {
display: flex;
align-items: center;
border: 3.354px solid #1A1A1A;
border-radius: 52px;
background: #fff;
margin-top: 34px;
i {
color: #1A1A1A;
text-align: center;
font-size: 3.0rem;
font-weight: 700;
line-height: 140%;
border-radius: 83.857px 0px 0px 83.857px;
background: #FFEB3B;
font-style: normal;
padding: 5px 14px;
}
span {
color: #1A1A1A;
font-size: 2.6rem;
font-weight: 700;
line-height: 140%;
padding: 0 14px;
text-align: center;
width: 100%;
}
@media screen and (max-width: 1000px) {
border: 0;
margin-top: 8px;
justify-content: center;
i {
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
padding: 0;
border-radius: 100%;
font-size: 10px;
}
span {
font-size: 12px;
text-align: left;
width: auto;
}
}
}
.schedule {
color: #E20613;
text-align: center;
font-size: 3.4rem;
font-weight: 700;
line-height: 140%;
padding-top: 14px;
}
.location {
color: #1A1A1A;
text-align: center;
font-size: 2.8rem;
font-weight: 700;
line-height: 140%;
padding-top: 8px;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
&::before {
display: block;
content: "";
width: 28px;
height: 28px;
background: url(../img/2025/ico_location.svg) no-repeat center center / 28px;
}
}
@media screen and (max-width: 1000px) {
width: 32%;
.schedule {
font-size: 14px;
padding-top: 4px;
}
.location {
font-size: 12px;
padding-top: 2px;
&::before {
width: 12px;
height: 12px;
background: url(../img/2025/ico_location.svg) no-repeat center center / 12px;
}
}
}
}
@media screen and (max-width: 1000px) {
&.mt74 {
margin-top: 20px;
}
li {
img {
max-width: 100%;
}
}
}
@media screen and (max-width: 500px) {
li {
width: calc(50% - 1rem) ;
}
&.mt48 {
margin-top: 20px;
}
}
}
}
.section8 {
padding: 0 40px;
.character03 {
position: absolute;
top: -228px;
right: -100px;
@media screen and (max-width: 1400px) {
width: 34.2rem;
right: 50px;
}
}
.img-cloud3 {
position: absolute;
bottom: -97px;
left: -200px;
@media screen and (max-width: 1400px) {
bottom: -12rem;
left: 0;
width: 22.4rem;
}
}
.obj4-mo {
display: none;
@media screen and (max-width: 1000px) {
display: block;
position: absolute;
bottom: -132px;
left: 50%;
transform: translateX(-50%);
}
}
.title2 {
p {
color: #1A1A1A;
text-align: center;
font-size: 4.5rem;
font-weight: 700;
line-height: 140%;
}
h2 {
color: #E20613;
text-align: center;
font-size: 7.2rem;
font-weight: 900;
line-height: 140%;
}
@media screen and (max-width: 1000px) {
h2 {
font-size: 32px;
}
}
}
.list-event {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px 24px;
margin-top: 74px;
li {
img { width: 100%; }
p {
color: #1A1A1A;
text-align: center;
font-size: 3.2rem;
font-weight: 700;
line-height: 140%;
padding-top: 16px;
}
.span {
display: block;
color: #1A1A1A;
text-align: center;
font-size: 2.8rem;
font-weight: 700;
line-height: 140%;
}
}
@media screen and (max-width: 1000px) {
grid-template-columns: repeat(2, 1fr);
margin-top: 20px;
gap: 12px;
li {
p {
font-size: 12px;
padding-top: 6px;
}
.span {
font-size: 12px;
}
}
}
}
}
}
.btn {
position: relative;
z-index: 1;
border: 6px solid #1A1A1A;
box-shadow: 6px 6px 0px 0px #000;
padding-top: 24px;
padding-bottom: 24px;
color: #1A1A1A;
text-align: center;
font-size: 3.2rem;
font-weight: 800;
line-height: 140%;
letter-spacing: 0.14px;
border-radius: 93px;
transform: translateY(0);
transition: all .3s;
&:hover {
transform: translateY(-20px);
}
&.primary {
background: #E20613;
color: #fff;
&:focus {
background: #F18289;
}
}
&.secondary {
width: 488px;
background: #fff;
&:focus {
background: #CBCBCB;
}
}
&.lg {
width: 100%;
}
&.mxw550 {
max-width: 550px;
}
@media screen and (max-width: 1000px) {
padding-top: 16px;
padding-bottom: 16px;
font-size: 16px;
border: 4px solid #1A1A1A;
box-shadow: 4px 4px 0px 0px #000;
}
}
.floating-menu {
display: block;
position: fixed;
top: 225px;
right: 40px;
border-radius: 8px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
background: #F9F9F9;
z-index: 100;
@media screen and (max-width: 1000px) {
display: none;
}
li {
& + li {
border-top: 1px solid #E7E7E7;
}
&.medal {
p {
color: #E20613;
}
a {
cursor: auto;
}
}
a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 16px 14px;
img {
display: block;
margin: 0 auto;
}
p {
color: #1A1A1A;
font-size: 1.8rem;
font-weight: 600;
line-height: 140%;
letter-spacing: 0.14px;
}
}
}
@media screen and (max-width: 1400px) {
top: 14rem;
right: 2rem;
li {
a {
padding: 8px 6px;
}
}
}
}
.speech01,
.speech02 {
animation: blink 3s infinite ease-in-out;
}
@keyframes blink {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 1;
}
}
/* img-title1: 아래에서 위로 나타나기 */
.img-title1 {
opacity: 0;
transform: translateY(30px); /* 아래에서 시작 */
animation: fadeUpTitle 0.8s ease-out forwards;
animation-delay: 0.3s;
}
.img-title1.title2 {
opacity: 0;
transform: translateY(30px); /* 아래에서 시작 */
animation: fadeUpTitle 0.8s ease-out forwards;
animation-delay: 0.5s;
}
/* obj-wrap: 살짝 아래서 부드럽게 나타나기 */
.obj-wrap {
opacity: 0;
animation: fadeUpObj 0.8s forwards;
animation-delay: 0.6s;
/* position: absolute; */
/* top: 0;
left: 0; */
/* width: 100%;
height: 100%; */
}
/* 타이틀 애니메이션 */
@keyframes fadeUpTitle {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 오브젝트 전체 애니메이션 */
@keyframes fadeUpObj {
to {
opacity: 1;
/* transform: translateY(0); */
}
}
.list-info-main li {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease-out;
}
.list-info-main li.visible {
opacity: 1;
transform: translateY(0);
}
.layer-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(32, 32, 32, 0.50);
z-index: 100;
}
.popup {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 40px;
z-index: 100;
max-width: 700px;
max-height: 700px;
img {
width: 100%;
max-height: 80vh;
cursor: pointer;
}
.popup-close-btn {
position: absolute;
top: 25px;
right: 25px;
z-index: 110;
}
}
.popup-mo {
display: none;
}
@media screen and (max-width: 600px) {
.popup {
display: none;
}
.popup-mo {
display: block;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
img {
width: 100%;
}
.popup-close-btn {
position: absolute;
top: 15px;
right: 18px;
}
}
}
.faq-wrap {
max-width: 900px;
margin: 0 auto;
background: #fff;
min-height: calc(100vh - 88px);
padding: 0 20px 190px 20px;
h2 {
color: #171717;
text-align: center;
font-size: 36px;
font-weight: 800;
line-height: 30px;
letter-spacing: 0.32px;
padding-bottom: 80px;
}
@media screen and (max-width: 500px) {
h2 {
font-size: 24px;
}
}
}
.list-faq {
li {
& + li {
margin-top: 16px;
@media screen and (max-width: 500px) {
margin-top: 8px;
}
}
.btn-title {
width: 100%;
border-top: 2px solid #D5D5D5;
background: #F6F6F6;
padding: 16px;
.title-faq {
display: flex;
justify-content: space-between;
align-items: center;
strong {
color: #171717;
font-size: 24px;
font-weight: 800;
line-height: 130%;
@media screen and (max-width: 500px) {
font-size: 16px;
}
}
.arrow {
transition: all .3s;
&.rotated {
transform: rotate(180deg);
}
@media screen and (max-width: 500px) {
width: 24px;
height: 24px;
}
}
}
}
.answer {
color: #171717;
font-size: 18px;
font-weight: 400;
line-height: 160%;
padding: 12px 16px;
@media screen and (max-width: 500px) {
font-size: 14px;
}
}
}
}
@media screen and (max-width: 1000px) {
.btn-login {
display: none !important;
}
.burger-ic {
display: block !important;
}
}
.text {
&.fz14 {
font-size: 14px;
}
&.fz20 {
font-size: 20px;
}
&.gray60 {
color: #606060;
}
&.black17 {
color: #171717;
}
&.rede2 {
color: #E20613;
}
&.fw500 {
font-weight: 500;
}
&.fw700 {
font-weight: 700;
}
&.lh150 {
line-height: 150%;
}
&.lh155 {
line-height: 155%;
}
}
.desc-alert1 {
color: #E20613;
text-align: center;
font-size: 14px;
font-weight: 700;
line-height: 150%;
padding-top: 24px;
padding-bottom: 48px;
&.ico-alert {
display: flex;
gap: 4px;
justify-content: center;
&::before {
display: block;
content: "";
width: 16px;
height: 16px;
background: url(../img/2025/ico_alert.svg) no-repeat center center / contain;
}
}
}
.last-blog {
padding-top: 74px;
a {
display: flex;
justify-content: center;
align-items: top;
gap: 4px;
color: #1A1A1A;
font-size: 32px;
font-weight: 700;
line-height: 140%;
text-decoration: underline;
word-break: break-all;
white-space: normal;
padding: 32px 48px;
border: 4px solid #1a1a1a;
border-radius: 20px;
&:nth-child(2) {
margin-top: 60px;
}
@media screen and (max-width: 1000px) {
font-size: 20px;
}
@media screen and (max-width: 500px) {
font-size: 16px;
padding: 16px 24px;
border: 2px solid #1a1a1a;
img {
width: 20px;
}
&:nth-child(2) {
margin-top: 30px;
}
}
}
}