@charset "utf-8";

    /* 초기화 */

    body {margin:0;padding:0;font-size:0.75em;font-family: 'Pretendard', Dotum, Sans-serif;}
    html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
    ul, dl,dt,dd {margin:0;padding:0;list-style:none}
    label, input, button, select, img {vertical-align:middle;font-size:1rem}
    a {text-decoration: none;}
    p {padding: 0; margin: 0;}

    /* 공통사항 */

    .img-fluid{max-width: 100%; width: 100%;}

    /* 랜딩페이지 */
    /* .landing-section {} */
    .landing-box {display: flex; width: 100%; height: 100vh; overflow: hidden;}
    .landing-box .content{width: 33.33333%; position: relative;}
    .landing-box .content img {width: 100%;}

    .landing-box .hover {position: absolute; left: 0; top: 0; font-size: 14px; background-color: #000000; opacity: 0; transition: all 0.5s; width:100%;}
    .landing-box .hover img {filter: blur(5px);
    -webkit-filter: blur(5px); opacity: .8;}
    .landing-box .hover .text {position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #ffffff; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;}
    .landing-box .hover .text strong {font-size: 20px; display: block; margin-bottom: 40px; padding-bottom: 40px; position: relative;}
    .landing-box .hover .text strong::after {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);  width: 60px; height: 1px; background-color: #ffffff;}
    .landing-box .hover .text p {line-height: 1.5;}
    .landing-box .hover a {min-width: 130px; min-height: 40px; display: flex; align-items: center; justify-content: center; color: #ffffff; border: 1px solid #ffffff; border-radius: 30px; margin-top: 70px;}
    .landing-box .hover a:hover {color: #000000; background-color: #ffffff;}
    .landing-box .content:hover .hover {opacity: 1;}

    .landing-logo {width: 320px; height: auto; position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 99999999999;} 
    .landing-logo img {width: 100%; height: auto;}
    .landing-box img.m {display: none;}

    @media screen and (max-width:1199px) {
        .landing-box {flex-direction: column; position: relative; height: auto;}
        .landing-box .content {width: 100%;}
        .landing-box  img.pc {display: none;}
        .landing-box  img.m {display: block;}
        .landing-box .hover {opacity: 1;}
        .landing-box .hover .text strong {margin-bottom: 20px; padding-bottom: 0;}
        .landing-box .hover .text strong::after {display: none;}
        .landing-box .hover a {margin-top: 20px;}
        .landing-box .hover img{opacity: 1;filter:none; -webkit-filter:none;}

        .landing-logo {position: static; height: 75px; background-color: #000000; width: 100%; transform: none; display: flex; align-items: center; justify-content: center;}
        .landing-logo img {width: 150px; height: auto;}
    }
    @media screen and (max-width:767px) {
        .landing-box {height: calc(100vh - 75px);}
        .landing-box .content {height: 33.3333%;}
        .landing-box .content img {width: 100%; height: 100%;}
        .landing-box .hover {height: 100%; width: 100%;}

    }