@charset "UTF-8";

/*=================================================================================
* common
=================================================================================*/
header, main, footer { width: 100%; }
.header, .footer { width: 90%; margin: 0 auto; position: relative; }
.container { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; }
.container section { width: 100%; }
.header { padding: 1.25rem 0; }
.header h1 { font-size: var(--fs-24); }
.header .nav a { margin-left: 3.125rem; font-size: var(--fs-18); font-weight: 800; }
.footer { width: 100%;  padding: 1.5rem 0; font-size: var(--fs-12); color: var(--color-sec); text-align: center; border-top: solid 1px var(--line); }
section { padding: 6.25rem 0; }
section > .inner { width: 1280px; margin: 0 auto; }
section h2 { font-size: var(--fs-46); text-transform: uppercase; font-weight: 800; margin-bottom: 3.125rem; }
.hamburger, .mobile-nav { display: none; }

/*=================================================================================
* main
=================================================================================*/

.visual { background: url("../img/visual.svg") no-repeat; height: 780px; background-size: cover; position: relative; }
.visual .inner { width: 1280px; height: 100%; margin: 0 auto; position: relative; }
.visual .text { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.visual .text h2 span { display: block; }
.visual .text h2 .t1 { margin-bottom: 0.625rem; }
.visual .text h2 .t2 { margin-bottom: 0.625rem; }
.visual .text h2 .t3 { }
.visual .text p { margin-bottom: 1.5625rem; }

.info { }
.info p:nth-child(2) { margin-bottom: 1.875rem; font-size: var(--fs-32); }
.info p:nth-child(3) { font-size: var(--fs-24); }
.info-list { margin-top: 1.875rem; }
.info-list div { width: 30%; height: 12.5rem; margin-right: 5%; margin-bottom: 3%; position: relative; padding: 2%; border: solid 1px var(--line); border-radius: 0.3125rem; }
.info-list div:nth-child(3), .info-list div:nth-child(6) { margin-right: 0; }
.info-list div:nth-child(4), .info-list div:nth-child(5), .info-list div:nth-child(6) { margin-bottom: 0; }
.info-list div h3 { font-size: var(--fs-21); margin-bottom: 0.625rem; }
.info-list div span { font-size: var(--fs-16); }
.info-list div .thumb { position: absolute; right: 1.875rem; bottom: 1.25rem; }

.metods { }
.metods p:nth-child(2) { margin-bottom: 1.875rem; font-size: var(--fs-32); }
.metods p:nth-child(3) { font-size: var(--fs-24); }
.metods-list { margin-top: 1.875rem; }
.metods-list div { width: 30%; margin-right: 5%; position: relative; padding: 3% 5%; border: solid 1px var(--line); border-radius: 0.3125rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.metods-list div:nth-child(3) { margin-right: 0; }
.metods-list div strong { display: block; font-size: var(--fs-21); margin-bottom: 1.25rem }
.metods-list div span { margin-bottom: 1.25rem; background-color: var(--color-bg1); padding: 1.25rem; }
.metods-list div a { background-color: var(--color-blue1); color: var(--color-whi); padding: 0.625rem 3.125rem; border-radius: 2.1875rem; }
.metods-list div a:hover { background-color: var(--color-blue2); }

.map { }
.map .box { border: solid 1px var(--line); border-radius: 0.625rem; overflow: hidden; }

.company { }
.company-list div { margin-bottom: 3.25rem; }
.company-list div:last-child { margin-bottom: 0; }
.company-list div strong { display: block; font-size: var(--fs-21); margin-bottom: 0.625rem; }
.company-list div span { border: solid 1px var(--line); border-radius: 0.3125rem; padding: 0.3125rem 0.625rem; margin-bottom: 0.3125rem; }

#event { background-color: var(--color-dar); }
.event { }
.event h2 { color: var(--color-whi); }
.event p:nth-child(2) { margin-bottom: 1.875rem; font-size: var(--fs-32); color: var(--color-whi); }
.event-list { margin-top: 1.875rem; }
.event-list div { width: 23.5%; height: 12.5rem; margin-right: 2%; margin-bottom: 3%; position: relative; padding: 2%; border-radius: 0.3125rem; }
.event-list div:nth-child(1) { background-color: var(--event-bg1); }
.event-list div:nth-child(2) { background-color: var(--event-bg2);}
.event-list div:nth-child(3) { background-color: var(--event-bg3); }
.event-list div:nth-child(4) { background-color: var(--event-bg4); margin-right: 0; }
.event-list div:nth-child(5) { background-color: var(--event-bg5); }
.event-list div:nth-child(6) { background-color: var(--event-bg6); }
.event-list div:nth-child(7) { background-color: var(--event-bg7); }
.event-list div h3 { font-size: var(--fs-21); margin-bottom: 0.625rem; }
.event-list div span { font-size: var(--fs-16); display: block; }
.event-list div .thumb { position: absolute; right: 1.875rem; bottom: 1.25rem; }

.benefit .box-01 { margin-bottom: 30px; display: flex; }
.benefit .box-01 > div { width: 23.5%; margin-right: 2%; position: relative; padding: 1.875rem ; border-radius: 0.3125rem; display: flex; align-items: center; flex-direction: column; }
.benefit .box-01 > div:nth-child(1) { background-color: var(--event-bg3); }
.benefit .box-01 > div:nth-child(2) { background-color: var(--event-bg2); }
.benefit .box-01 > div:nth-child(3) { background-color: var(--event-bg4); }
.benefit .box-01 > div:nth-child(4) { background-color: var(--event-bg1); margin-right: 0; }
.benefit .box-01 > div .thumb { margin-bottom: 1.25rem; }
.benefit .box-01 > div strong { display: block; font-size: var(--fs-21); margin-bottom: 0.625rem; }
.benefit .box-01 > div span { display: block; text-align: center; }

.benefit .box-02 { background-color: var(--color-bg1); border-radius: 0.625rem; padding: 2.5rem; display: flex; justify-content: space-between; }
.benefit .box-02 div { position: relative; display: flex; align-items: center; flex-direction: column; }
.benefit .box-02 div .thumb {  margin-bottom: 1.25rem; }
.benefit .box-02 div em { position: absolute; left: -0.625rem; top: -0.625rem; z-index: 10; width: 3.375rem; height: 3.375rem; background-color: var(--color-blue2); border-radius: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-whi); }

.benefit .app-btn-wr { display: flex; justify-content: space-between; }
.benefit .app-btn-wr a { display: flex; align-items: center; justify-content: center; width: 49%; margin-bottom: 1.25rem; background-color: var(--color-blue1); color: var(--color-whi); font-size: var(--fs-21); padding: 0.9375rem 0; border-radius: 0.625rem; }
.benefit .app-btn-wr a:hover { background-color: var(--color-blue2); }
.benefit .app-btn-wr a i { height: 1.25rem; margin-left: 0.625rem; }

.post { display: flex; justify-content: space-between; align-items: center; }
.post .down a { display: flex; align-items: center; font-weight: 800; }
.post .down span { display: block; margin-right: 0.625rem; color: var(--color-orange3); }
.post .btn { border: solid 3px var(--color-orange2); color: var(--color-orange2); padding: 15px 30px; border-radius: 0.3125rem; }
.post .btn:hover { background-color: var(--color-orange2); color: var(--color-whi); }
.post .text { font-size: var(--fs-18); }

.tip { margin-top: 20px; display: flex; align-items: center; }
.tip span:nth-child(1) { display: flex; background-color: #E65C30; padding: 7px 20px; border-radius: 30px; color: var(--color-whi); font-weight: 700; margin-right: 20px; }
.tip span:nth-child(1) i {background: url(../img/icon-tip.svg) no-repeat; display: block; width: 24px; height: 24px; }