@charset "utf-8";

/* =========================================
   애니메이션
   ========================================= */
@keyframes slide-in {
    from { transform: translateY(30px); opacity: 0; }
}
@keyframes scroll-arrow-ani {
    from { transform: translateY(0); }
    to   { transform: translateY(8px); }
}
.scroll-down { animation: scroll-arrow-ani .6s infinite linear alternate; }

/* =========================================
   기타 공통
   ========================================= */
.dna_title  { font-size: 3vw; color: #0468f2; font-weight: bold; text-align: center; margin-bottom: 5%; }
.artist h3  { font-size: 2em; font-weight: bold; text-align: center; margin: 50px 0; }
.md_scroll  { cursor: pointer; }

/* =========================================
   Main Banner — 공통 기반
   ========================================= */
#mainBanner {
    position: relative;
    margin-top: -70px;
    overflow: hidden;
}

/* 슬라이더 레일 */
.video {
    display: flex;
    width: 300%;
    position: relative;
}
.video li          { width: 33.33%; }
.video li video    { width: 100%; display: block; }

/* 타이틀 */
.video_title li { position: absolute; text-align: center; }
.video_title li:first-child ~ li { display: none; }

/* 스크롤 인디케이터 */
.md_scroll {
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mb_line { display: block; width: 2px; background-color: #FFF; }

/* 화살표 — inline font-size 덮어쓰기 */
.top_left  .material-icons,
.top_right .material-icons { color: #FFF; }

/* =========================================
   PC (1201px~)
   ========================================= */
@media screen and (min-width: 1201px) {

    /* Banner */
    .video li video     { height: auto; }

    .video_title li {
        left: 10%;
        top: 45%;
        transform: translate(-50%, -50%);
        font-size: 1em;
    }

    .md_scroll .material-icons { font-size: 2.5vw !important; }
    .mb_line                   { height: 150px; }

    .top_left  .material-icons,
    .top_right .material-icons { font-size: 2.5vw !important; }

    /* co_info */
    #co_info            { position: relative; transition-duration: 0.5s; }
    #co_info h2         { font-size: 2em; margin: 100px auto; text-align: center; }
    .slogan             { position: absolute; font-size: 4em; color: #0468F2; margin-left: 25%; letter-spacing: 15px; margin-top: -40px; transition-duration: 0.5s; }
    .slogan p:nth-child(3) { font-weight: bold; }
    .co_img             { width: 45%; padding-left: 30%; padding-top: 40px; transition-duration: 0.5s; }
    .co_img img         { width: 100%; }
    .sub_title          { font-size: 2em; font-weight: bold; color: #0468F2; margin: 30px auto; }
    .co_img p           { font-size: 1.1em; }
    .co_img p:last-child{ margin: 50px 0; }

    .artist             { position: relative; }
    .art_list           { position: relative; margin: 100px; }
    .art_list ul        { display: flex; justify-content: space-evenly; align-items: center; margin: 0 10%; }
    .art_list ul li     { width: 30%; position: relative; margin: 10px; }
    .art_list ul li img { width: 100%; }
    .art_list li .over_box      { opacity: 0; transition-duration: 0.6s; }
    .art_list li .over_box h4   { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; color: #FFF; background-color: #000; }
    .art_list li:hover .over_box{ opacity: 1; }

    .blue_box1          { margin-top: 200px; }
    .blue_box1, .blue_box2 { position: relative; width: 50%; height: 100px; background-color: #0468F2; }
    .blue_box2          { margin-left: 50%; }
    .blue_box1 h3, .blue_box2 h3 { position: absolute; color: #FFF; font-size: 1.8vw; }
    .blue_box1 h3       { padding-left: 50%; }
    .blue_box2 h3       { padding-left: 2%; margin-top: 10px; }

    .change             { width: 70%; margin: 200px auto; }
    .change img         { width: 100%; }
    .change_m           { display: none; }

    .dna_list           { position: relative; width: 90%; margin: 0 auto; }
    .dna_list p         { font-size: 1vw; margin: 5% 0; }
    .dna_list ul        { display: flex; justify-content: space-between; align-items: flex-start; }
    .dna_list li        { width: 30%; }
    .dna_list li img    { width: 90%; }

    #bottom             { display: flex; margin: 30px auto; text-align: center; }
    .recruit            { width: 70%; height: 80px; background-color: #0468F2; line-height: 80px; }
    .recruit h2         { font-weight: bold; font-size: 2em; color: #FFF; }
    .button             { width: 30%; height: 80px; background-color: #FF66CC; line-height: 80px; font-weight: bold; font-size: 2em; }
}


/* =========================================
   태블릿 가로 (801~1200px)
   ========================================= */
@media screen and (min-width: 801px) and (max-width: 1200px) {

    /* Banner */
    .video li video     { height: auto; }

    .video_title li {
        left: 15%;
        top: 45%;
        transform: translate(-50%, -50%);
        font-size: 0.9em;
    }

    .md_scroll .material-icons { font-size: 3vw !important; }
    .mb_line                   { height: 100px; }

    .top_left  .material-icons,
    .top_right .material-icons { font-size: 3vw !important; }

    /* co_info */
    #co_info            { position: relative; }
    #co_info h2         { font-size: 2em; margin: 100px auto; text-align: center; }
    .slogan             { position: absolute; font-size: 5vw; color: #0468F2; margin-left: 9.6%; letter-spacing: 15px; margin-top: -40px; }
    .slogan p:nth-child(3) { font-weight: bold; }
    .co_img             { width: 80%; padding-left: 10%; padding-top: 40px; }
    .co_img img         { width: 100%; }
    .sub_title          { font-size: 2em; font-weight: bold; color: #0468F2; margin: 30px auto; }
    .co_img p           { font-size: 1.1em; }
    .co_img p:last-child{ margin: 50px 0; }

    .artist             { position: relative; }
    .art_list           { position: relative; }
    .art_list ul        { display: flex; justify-content: space-evenly; align-items: center; }
    .art_list ul li     { width: 27%; position: relative; }
    .art_list ul li img { width: 100%; }
    .art_list li .over_box      { position: absolute; transition-duration: 0.6s; opacity: 0; left: 0; top: 0; width: 100%; height: 100%; }
    .over_box img       { opacity: 0.9; }
    .art_list li:hover .over_box{ opacity: 1; }
    .art_list li .over_box h4   { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; color: #FFF; background-color: #000; }

    .blue_box1          { margin-top: 18%; }
    .blue_box2          { margin-left: 50%; }
    .blue_box1, .blue_box2 { position: relative; width: 50%; height: 80px; background-color: #0468F2; }
    .blue_box1 h3, .blue_box2 h3 { position: absolute; color: #FFF; font-size: 2.3vw; }
    .blue_box1 h3       { padding-left: 37%; bottom: -50%; }
    .blue_box2 h3       { padding-left: 2%; margin-top: 10px; }

    .change             { width: 90%; margin: 200px auto; }
    .change img         { width: 100%; }
    .change_m           { display: none; }

    .dna_list ul        { display: flex; flex-direction: column; align-items: center; }
    .dna_list li        { width: 60%; }
    .dna_list img       { width: 100%; display: block; margin: 0 auto; }
    .dna_list ul li p   { margin: 5% auto; font-size: 2.5vw; }

    #bottom             { display: flex; margin: 50px auto; text-align: center; }
    .recruit            { width: 70%; height: 50px; background-color: #0468F2; line-height: 50px; }
    .recruit h2         { font-weight: bold; font-size: 2vw; color: #FFF; }
    .button             { width: 30%; height: 50px; background-color: #FF66CC; line-height: 50px; font-weight: bold; font-size: 2vw; }
}


/* =========================================
   태블릿 세로 (601~800px)
   ========================================= */
@media screen and (min-width: 601px) and (max-width: 800px) {

    /* Banner — 16:9 비율 유지 */
    .video              { height: 56vw; }
    .video li video     { height: 100%; object-fit: cover; }

    .video_title li {
        left: 15%;
        top: 42%;
        transform: translate(-50%, -50%);
        font-size: 2vw;
    }

    .md_scroll          { bottom: 3%; }
    .md_scroll .material-icons { font-size: 5vw !important; }
    .mb_line            { height: 50px; }

    .top_left  .material-icons,
    .top_right .material-icons { font-size: 5vw !important; }

    /* co_info */
    .main_logo img      { width: 60%; }
    #co_info h2         { font-size: 2em; margin: 100px auto; text-align: center; }
    .slogan             { position: absolute; font-size: 3em; color: #0468F2; margin-left: 10%; letter-spacing: 15px; margin-top: -40px; }
    .slogan p:nth-child(3) { font-weight: bold; }
    .sub_title          { font-size: 2em; font-weight: bold; color: #0468F2; margin: 30px auto; }
    .co_img             { width: 80%; padding-left: 10%; padding-top: 40px; }
    .co_img img         { width: 100%; }
    .co_img p           { font-size: 1.1em; }
    .co_img p:last-child{ margin: 50px 0; }

    .artist             { position: relative; }
    .art_list           { position: relative; }
    .art_list ul        { display: flex; justify-content: space-evenly; align-items: center; }
    .art_list ul li     { width: 30%; position: relative; }
    .art_list ul li img { width: 100%; }
    .art_list li .over_box      { position: absolute; transition-duration: 0.6s; opacity: 0; left: 0; top: 0; width: 100%; height: 100%; }
    .over_box img       { opacity: 0.9; }
    .art_list li:hover .over_box{ opacity: 1; }
    .art_list li .over_box h4   { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; color: #FFF; background-color: #000; }

    .blue_box1          { margin-top: 18%; }
    .blue_box2          { margin-left: 50%; }
    .blue_box1, .blue_box2 { position: relative; width: 50%; height: 70px; background-color: #0468F2; }
    .blue_box1 h3, .blue_box2 h3 { position: absolute; color: #FFF; font-size: 2.3vw; }
    .blue_box1 h3       { padding-left: 37%; bottom: -55%; }
    .blue_box2 h3       { padding-left: 2%; margin-top: 10px; }

    .dna_list           { position: relative; width: 80%; margin: 0 auto; }
    .dna_list ul        { display: flex; flex-direction: column; align-items: center; }
    .dna_list li        { width: 100%; }
    .dna_list li img    { width: 100%; }
    .dna_list ul li p   { margin: 5% auto; }

    .change_m           { width: 90%; margin: 100px auto; }
    .change_m img       { width: 100%; }
    .change             { display: none; }

    #bottom             { display: flex; text-align: center; margin-bottom: 60px; }
    .recruit            { width: 80%; height: 50px; background-color: #0468F2; line-height: 50px; }
    .recruit h2         { font-weight: bold; font-size: 3vw; color: #FFF; }
    .button             { width: 20%; height: 50px; background-color: #FF66CC; line-height: 50px; font-weight: bold; font-size: 3vw; }
}


/* =========================================
   모바일 (~ 600px)
   ========================================= */
@media screen and (max-width: 600px) {

    @keyframes scroll-arrow-ani {
        from { transform: translateY(0); }
        to   { transform: translateY(5px); }
    }

    /* Banner — 16:9 비율 유지 */
    .video              { height: 56vw; }
    .video li video     { height: 100%; object-fit: cover; }

    .video_title li {
        left: 22%;
        top: 42%;
        transform: translate(-50%, -50%);
        font-size: 3vw;
    }

    .md_scroll          { bottom: 3%; }
    .md_scroll .material-icons { font-size: 7vw !important; }
    .mb_line            { display: none; }

    .top_left  .material-icons,
    .top_right .material-icons { font-size: 7vw !important; }

    /* co_info */
    .main_logo img      { width: 50%; }
    #co_info            { position: relative; }
    #co_info h2         { font-size: 2em; margin: 100px auto; text-align: center; }
    .slogan             { position: absolute; font-size: 2em; color: #0468F2; margin-left: 10%; letter-spacing: 15px; margin-top: -40px; }
    .slogan p:nth-child(3) { font-weight: bold; }
    .co_img             { width: 80%; padding-left: 10%; padding-top: 40px; }
    .co_img img         { width: 100%; }
    .sub_title          { font-size: 2em; font-weight: bold; color: #0468F2; margin: 30px auto; }
    .co_img p           { font-size: 1.1em; }
    .co_img p:last-child{ margin: 50px 0; }

    .artist             { position: relative; }
    .artist h3          { font-size: 2em; font-weight: bold; text-align: center; margin: 50px 0; }

    .art_list           { position: relative; }
    .art_list ul        { display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .art_list ul li     { width: 70%; position: relative; margin-bottom: 20px; }
    .art_list ul li img { width: 100%; }
    .art_list li .over_box      { position: absolute; transition-duration: 0.6s; opacity: 0; left: 0; top: 0; width: 100%; height: 100%; }
    .over_box img       { opacity: 0.9; }
    .art_list li:hover .over_box{ opacity: 1; }
    .art_list li .over_box h4   { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; color: #FFF; background-color: #000; }

    .change             { display: none; }
    .change_m           { width: 90%; margin: 100px auto; }
    .change_m img       { width: 100%; }

    .dna_title          { font-size: 4vw; }
    .dna_list           { position: relative; width: 80%; margin: 0 auto; }
    .dna_list ul        { display: flex; flex-direction: column; align-items: center; }
    .dna_list li        { width: 100%; }
    .dna_list li img    { width: 100%; }
    .dna_list ul li p   { margin: 5% auto; }

    .blue_box1          { margin-top: 20%; padding-left: 10%; }
    .blue_box1, .blue_box2 { position: relative; height: 50px; background-color: #0468F2; }
    .blue_box1 h3, .blue_box2 h3 { position: absolute; color: #FFF; font-size: 4vw; top: -50%; transform: translateY(-50%); text-align: center; margin-left: 10%; }

    #bottom             { display: flex; text-align: center; margin-bottom: 50px; }
    .recruit            { width: 80%; height: 50px; background-color: #0468F2; line-height: 50px; }
    .recruit h2         { font-weight: bold; font-size: 3vw; color: #FFF; }
    .button             { width: 20%; height: 50px; background-color: #FF66CC; line-height: 50px; font-weight: bold; font-size: 3vw; }
}