@charset "UTF-8";
/* CSS Document */

.container {width:90%; max-width:1100px;}

#head_kv {position:relative; height:calc(100vh - 200px);}

#head_kv .main {display:block; width:92%; max-width:1100px; height:calc(90vh - 200px); z-index:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-image:url(../images/about/hd_bg.jpg); background-size:cover; background-position:center center; background-repeat:no-repeat;}

.jk_marquee {position:absolute; top:50%; left:0px; transform:translateY(-50%); z-index:1; width: 100%; display: flex; overflow: hidden; white-space: nowrap; gap: 0px;}
.mq_con {display: flex; gap: 0px;}
.mq_con img {height:55vh; width:auto;}

/* #head_kv .b_jk {display:block; width:100%; height:50vh; position:absolute; top:50%; left:0px; transform:translateY(-50%); background-image:url(../images/about/hd_jk.png); background-repeat:repeat-x; background-size:auto 100%; z-index:1; background-position:center center; -webkit-animation: jk_marquee 30s infinite linear; animation: jk_marquee 30s infinite linear;}
@-webkit-keyframes jk_marquee {
    0% {background-position: 0 0;}
    100% {background-position: -100vw 0;}
}
@keyframes jk_marquee {
    0% {background-position: 0 0;}
    100% {background-position: -100vw 0;}
} */

#head_kv .h1 {font-size:9vw; font-family:'Red Hat Display'; font-weight:bold; white-space:nowrap; color:black; text-align:center; position:absolute; left:50%; bottom:5vh; transform:translateX(-50%); z-index:2;}

#head_kv .sub {position:absolute; z-index:2; top:15%; left:20%;}
#head_kv .sub p {font-size:30px; line-height:35px; font-family:'Ubuntu Mono', monospace; font-weight:bold; text-align:center; color:black;}

#head_kv .txt_flwr {position:absolute; top:20%; right:25%; z-index:2; width:150px;}

#pin {position:relative; box-sizing:border-box;}
.pin_lt {position:absolute; top:50px; left:30px; width:30px; display:flex; flex-wrap:wrap; gap:30px; z-index:5;}
.pin_rt {position:absolute; top:-50px; right:30px; display:flex; flex-wrap:wrap; width:30px; height:100%; background-image:url(../images/about/rt_maq.png); background-repeat:repeat-y; background-size:auto auto; background-position:center center; -webkit-animation: rt_marquee 50s infinite linear; animation: rt_marquee 50s infinite linear;}
@-webkit-keyframes rt_marquee {
    0% {background-position: 0 0;}
    100% {background-position: 0 -100%;}
}
@keyframes rt_marquee {
    0% {background-position: 0 0;}
    100% {background-position: 0 -100%;}
}


#about {margin:100px auto;}
#about .tp_ylw {position:relative; box-sizing:border-box; padding:40px; border-radius:30px; background:#e4df00; margin-bottom:30px;}

#about .maintitle h2 {font-size:3vw;}
#about .flx {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:30px;}
#about .flx .font_UbuntuMono {box-sizing:border-box; padding:20px; background:white; border-radius:25px;}
#about .flx p {text-align:justify;}
#about .flx p.font_UbuntuMono {text-align: unset;}

#team {position:relative; margin:200px auto 120px auto;}
#team .maintitle {width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin:auto; position:relative;}
#team .maintitle span {font-size:15px;}
#team .maintitle h2 {font-size:10vw;}
#team .maintitle .logo {position:absolute; top:-35%; right:0px; z-index:1; width:30%; max-width:398px;}

#team .member {position:relative; display:flex; flex-wrap:wrap; gap:0px; justify-content:center; align-items:center;}
#team .member .mem_card {margin:0px; width:calc(100% / 4); position:relative;}
#team .member img {width:100%; height:auto;}
#team .member img.people {position:absolute; top:0; left:0; backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;}

#team .member .br {width:100%;}

.cen_text {position:relative; margin:150px auto; box-sizing:border-box; padding:0px 7vw;}
.cen_text p {font-size:16px; line-height:30px;}

#album {position:relative;}
#album .tp_title_con {position:relative; z-index:3; width:80vw; max-width:1000px; margin:0px auto -50px auto;}
#album .tp_title_con img.slogan {width:100%; height:auto; position:relative; z-index:1;}
#album .tp_title_con img.flr_a {width:25vw; max-width:250px; position:absolute; top:-15vw; right:-8vw;}
#album .tp_title_con img.flr_b {width:15vw; max-width:200px; position:absolute; top:-5vw; left:-15vw;}

/* .marq {width: 100%; display:flex; overflow: hidden; white-space: nowrap; column-gap: 0px;}
.marq .mq_con {display:flex; min-width:100%; flex:0 0 auto; column-gap:0px; justify-content:space-around;}
.sld img {height:350px; width:auto;} */

.sld_mq {width: 100%; overflow: hidden; position: relative; height:350px;}
.sld_mq ul.mqpic {display:flex; gap:0; flex-wrap:nowrap; position: absolute; top:0; left:0;}
.sld_mq ul.mqpic li {flex-shrink: 0; width: auto; height: 350px;}



.pic_marquee_con.mq_con img {height:350px; width:auto;}

.slec_slide {position:relative;}

.photos_slec {position:relative;}

.slec_con {width:calc(100vw / 3); height:auto; position:relative}
.slec_con img {width:100%; height:auto;}

.slec_con p.time {font-size:4vw; font-weight:bold; color:#e4df00; position:absolute; right:20px; top:40px; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.slec_con p.where {height:90%; font-size:3.5vw; text-align:center; font-weight:500; color:white; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position:absolute; top:50%; left:20px; transform:translateY(-50%); background:transparent; -webkit-background-clip: text; -webkit-text-stroke: 6px transparent; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

.slec_con::before {display:block; content:''; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.4); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.slec_con.slick-current::before {background:rgba(228,223,2, 0.7); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

.slec_con.slick-current p.time {color:black; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.slec_con.slick-current p.where {background:black; -webkit-background-clip: text; -webkit-text-stroke: 6px transparent; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

.slide_arrow {position:absolute; width:calc(100vw / 2.8); height:60px; bottom:30px; left:50%; transform:translateX(-50%);}
.slide_arrow img {width:100%; height:auto;}
.slide_arrow .prev, .slide_arrow .next {display:block; width:60px; height:60px; background:white; border-radius:50px;}
.slide_arrow .next {position:absolute; right:0; top:0;}


@media screen and (max-width:480px) {

    html, body {overflow-x: clip;}

    .container {width:80%;}

    #head_kv .main {width:80%;}

    #head_kv .b_jk {-webkit-animation: jk_marquee 15s infinite linear; animation: jk_marquee 15s infinite linear;}
    @-webkit-keyframes jk_marquee {
        0% {background-position: 0 0;}
        100% {background-position: -100vw 0;}
    }
    @keyframes jk_marquee {
        0% {background-position: 0 0;}
        100% {background-position: -100vw 0;}
    }

    #head_kv .sub {top:10%; left:13%;}
    #head_kv .txt_flwr {top:20px; right:15%;}

    .pin_lt {left:0px; gap:15px;}
    .pin_lt img {width:20px; height:auto;}
    .pin_rt {right:0px; height:calc(100% + 100px);}

    #about {margin:60px auto;}
    #about .maintitle h2 {font-size:40px;}
    #about .flx {flex-wrap:wrap;}
    #about .flx p {font-size:14px;}

    #team {margin:100px auto;}

    #team .member .mem_card {width:calc(100% / 2);}
    #team .member .br {display:none;}

    .cen_text {margin:100px auto; padding:0px;}
    .cen_text p {font-size:14px; line-height:22px;}

    #album .tp_title_con {width:100vw; margin-bottom:-20px;}
    
    .slec_con {height:30vh;}
    .slec_con p.time {top:20px; font-size:45px;}
    .slec_con p.where {font-size:30px;}

    .photos_slec img {width:100vw; object-fit: cover; object-position: center -4.5vh;}

    .sld_mq, .sld_mq ul.mqpic li {height:35vh;}
    .sld_mq ul.mqpic li img, .sld_mq ul.mqpic li video {height:35vh; width:auto;}
    .slide_arrow {width:100vw; height:50px; top:-25px; bottom:0px;}
    .slide_arrow .prev, .slide_arrow .next {width:50px; height:50px;}


}