body {background: #f8f8f8}
header {width: 1000px; margin: 0 auto; padding: 50px 0; background: url("../images/top_bg.jpg") no-repeat #06111d;}
header > div {width: 720px; margin: 0 auto }
header .top { margin-bottom: 17em; text-align: center}
header .top .logo {margin-bottom: 20px}
header .top .txt {padding-top: 50px; color: #fff; font-size: 2em; margin-bottom: 30px; text-shadow: 2px 2px 5px #33333300}
header .top .join button {width: 90%; font-size: 3em; zoom:.8}
header .schedule {margin-bottom: 5em}
header .vod {margin-bottom: 50px}
header .vod ul {position: relative; padding-top: 56.25%}
header .vod iframe {position: absolute; top: 0; width: 100%; height: 100%}
.content {display: none}    
.content.on {display: block}

section {width: 1000px; margin: 0 auto; padding: 5em 0; background: #fff}
article {width: 720px; margin: 0 auto; margin-bottom: 5em}

.tab {display: flex; border-radius: 10px; margin-bottom: 50px; background: #eee; overflow: hidden}
.tab button {width: 50%; height: 80px; border-radius: 10px; color: #777; font-size: 2em; background: #eee}
.tab button.on {color: #fff; background: #6b44ac}
.tab button span {font-size: .875em}

.time {width: 100%; margin-bottom: 5em}
.time dl {display: flex}
.time dl dt {width: 70%; line-height: 60px; border-radius: 0 10px 10px 0; text-align: center; color: #fff; font-size: 1.5em; background: #162639}
.time dl dt:first-child {width: 30%; border-radius:10px 0 0 10px}
.time dl dd {width: 70%; line-height: 60px; border-bottom: 1px solid #ddd; text-align: center; font-size: 1.5em}
.time dl dd:first-child {width: 30%}

.xpt {display: flex; flex-wrap: wrap; align-items:flex-start}
.xpt dl {display: flex; flex-direction: column; width: 50%; align-items:center; margin-bottom: 3em }
.xpt dl dt {width: 260px; height: 260px; margin-bottom: 20px; border-radius:50%; background: #eeeff1; overflow: hidden}
.xpt dl dt img {width: 100%; height: 100%; object-fit: cover}
.xpt dl dd {text-align: center}
.xpt h3 {font-size: 1.75em; font-weight: 400}
.xpt h4 {font-size: 1.5em; font-weight: 400; color: #777}

.join button {width: 100%; height: 120px; border-radius: 20px; font-family: 'KIMM_Bold'; font-size: 2.4em; color: #fff; background: #e71f19}

.event {width: 1000px; padding: 80px 0; background: #6b44ac}
.event > div {display: flex; flex-direction: column; row-gap: 100px}
.event ul {display: flex; flex-direction: column; row-gap: 20px; align-items: center; justify-content: center; position: relative; width: 720px; height: 420px; margin: 0 auto; text-align: center; border-radius: 20px; background: #fff}
.event ul h3 {font-size: 2.5em}
.event ul p {margin: 0 auto; font-size: 1.75em; line-height: 1.2; word-break: keep-all; color: #777}
.event1 h3 {color: #ff196e}
.event1::before {content: ''; display: block; position: absolute; top: -15px; left: -30px; width: 210px; height: 180px; background: url("../images/evt_01a.png") no-repeat}
.event2 h3 {color: #16aec2}
.event2::before {content: ''; display: block; position: absolute; top: -15px; left: -30px; width: 210px; height: 180px; background: url("../images/evt_02a.png") no-repeat}

.map img {margin-bottom: 30px}
.map .btn .kko { background: #fae200}
.map .btn .kko::before {background-position: 0 0}
.map .btn .nav { background: #19ce60}
.map .btn .nav::before {background-position: -70px 0}

.btn {display: flex; justify-content: space-around; }
.btn button {position: relative; width: 320px; height: 80px; padding: 0 0 0 60px; border-radius: 10px; text-align: center; font-family: 'KIMM_Bold'; font-size: 1.25em; }
.btn button::before {display: block; position: absolute; top: 5px; left: 10px; content: ''; width: 70px; height: 70px; background-image: url("../images/icon.png"); background-repeat: no-repeat}

.guide {padding: 30px 50px; margin-bottom: 80px; border-radius: 10px; background: #eee}
.guide ul li {font-size: 1.5em; margin-bottom: 10px}
.guide ol li {padding-left: 20px; margin-bottom: 10px; font-size: 1.125em; }
.guide ol li::before {content: ''; }

.share {margin-bottom: 50px}
.share h3 {margin-bottom: 30px; text-align: center; font-family: 'KIMM_Bold'; font-size: 2em; }
.share .btn .kko { background: #fae200}
.share .btn .kko::before {background-position: 0 -70px}
.share .btn .link { background: #a3c5ea}
.share .btn .link::before {background-position: -70px -70px}



@media only screen and (max-width:1000px) {
    header {width: 100%; padding: 30px 0; font-size: 10px; background-position: center top; background-size: 150% auto}
    header > div {width: 90%}
    header .top .logo {width: 25%; margin: 0 auto}
    header .top .join button {width: 100%}
    .join button {height: 90px; font-size: 2em}
    img {max-width: 100%}
    section {width: 100%; font-size: 12px}
    article {width: 90%}
    .tab button {height: 60px}
    .time dl dt {line-height: 50px}
    .time dl dd {line-height: 50px}
    
    .xpt dl dt {zoom: .6}
    
    .event {width: 100%}
    .event ul {width: 80%}
    .event ul::before {zoom: .75}
    .map .img {height: 90vw; margin-bottom: 20px}
    .map .img img {width: 100%; height: 100%; object-fit: cover}
    .btn {flex-direction: column; row-gap: 10px; align-items: center}
    .btn button {height: 60px; padding: 0 0 0 30px; font-size: 1.5em}
    .btn button::before {zoom: .75}
    
    .guide {width: 100%; border-radius: 0; padding: 20px}
}