@charset "utf-8";

@import url('https://fonts.cdnfonts.com/css/harmonyos-sans');
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* --------------------------------------------
 * default
/* ------------------------------------------ */
html{ font-size: 10px;}
html, body { width: 100%; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; }
body { font-family: 'Pretendard-Regular', '돋움', 'Dotum', Apple Gothic, Tahoma, Verdana, sans-serif; color: #fff; font-weight: 400; line-height: 1.3; font-size: 16px; background-color:#fff;}
body{ letter-spacing: -0.05em;}

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
*:before,
*:after{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

a{ -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }


/* -------------------------------------------- html5 block ------------------------------------------ */
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block;}
body{ -webkit-text-size-adjust:none; }
ol, ul{ list-style:none;}
blockquote, q{ quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{ content:''; content:none; }
table{ width:100%; border-collapse:collapse; border-spacing:0; }
img{ border:0; max-width:100%; height:auto; transition:all 0.4s ease-in-out;}
iframe,
embed,
object,
video {max-width:100%;}
i,
cite,
em,
var,
address,
dfn { font-style:normal;}

.blind,
legend{ display:block; overflow:hidden; font-size:1px; line-height:0; color:transparent; }

/* ------------------------------------------ */
a{ color: #000; text-decoration: none; }


/* --------------------------------------------
	list
/* ------------------------------------------ */
ul, ol { list-style: none; }

/* --------------------------------------------
 * etc
/* ------------------------------------------ */
address, em { font-style: normal; }
hr { display: none; }
sup { position: relative; top: -3px; padding-left: 3px; font-size: 11px; }

/* --------------------------------------------
 * img
/* ------------------------------------------ */
img { vertical-align: top; }

/* --------------------------------------------
 * layout
/* ------------------------------------------ */
#wrap{ position: relative; width:100%; margin:0 auto; min-height: 100vh; overflow:hidden; background: #000 url(./img/bg.jpg) no-repeat 50% 50% / cover;}
#wrap .hd{ display: flex; padding: 60px 60px 0;}
#wrap .ct{ display: flex; flex-direction: column; align-items: center; padding: 0 60px 145px; background: url(./img/bg_obj.png) no-repeat 50% calc(50% + 130px);}
#wrap .ct > p{ margin: 45px 0 0 0; font-size: 30px; text-align: center;}
#wrap .ct .contact{ margin: 240px auto 0; width: 720px; border-top: #828384 1px solid;}
#wrap .ct .contact li{ display: flex; align-items: center; padding: 0 15px; border-bottom: rgba(255,255,255,.1) 1px solid; background: url(./img/ic_arr.png) no-repeat calc(100% - 15px) 50%; transition:all 0.2s ease-in-out; }
#wrap .ct .contact li:last-child{ border-bottom: #828384 1px solid;}
#wrap .ct .contact li span::before{ content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background-color: #9e9fab; margin-right: 8px; vertical-align: 4px; }
#wrap .ct .contact li span{ width: 50%; }
#wrap .ct .contact li a{ color: #fff; flex: 1; padding: 12px 0 12px 28px; border-left: rgba(255,255,255,.1) 1px solid; }
#wrap .ct .contact li:hover{ background: url(./img/ic_arr.png) no-repeat calc(100% - 30px) 50%; text-decoration:none;}
#wrap .ct .contact li:hover a {text-decoration: underline;}
#wrap .ft{ padding: 90px 60px; border-top: #1e2223 1px solid; display: flex; color: rgba(104,102,105,.75); font-size: 18px;}
#wrap .ft > div{ display: flex; flex-direction: column; justify-content: space-between;}
#wrap .ft .ft1{ width: 24%; }
#wrap .ft .ft1 .logo img{ max-height:40px;}
#wrap .ft .ft1 .copy{ color: rgba(255,255,255,.5);}
#wrap .ft .ft2{ flex: 1;}
#wrap .ft .ft2 ul{ display: flex; margin: 30px 0 0 0;}
#wrap .ft .ft2 ul > li + li{ margin-left: 50px;}
#wrap .ft .ft2 ul > li  strong{ color: #fff; font-weight: 400; display: block; margin-bottom: 10px;}
#wrap .ft .ft3{ width: 15%;}
#wrap .ft .ft3 ul > li span{ display: inline-block;}
#wrap .ft h3{ font-family: 'HarmonyOS Sans', sans-serif; font-size: 24px; text-transform: uppercase; font-weight: 400; color: #fff;}

@media screen and (max-width:1400px){
    #wrap .hd{ padding: 60px 30px;}
    #wrap .ct{ padding: 0 30px 145px;}
    #wrap .ft{ padding: 90px 30px;}

    @media screen and (max-width:1200px){
        #wrap .ft{ flex-wrap: wrap; justify-content: space-between;}
        #wrap .ft .ft1{ width: 100%; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 50px; order: 3;}
        #wrap .ft .ft2{ order: 1;}
        #wrap .ft .ft3{ width: auto; order: 2;}

        @media screen and (max-width:768px){
            #wrap .hd{ padding: 120px 30px 60px; justify-content: center;}
            #wrap .ct{ background-size: 80% auto; background-position: 50% calc(50% + 45px);}
            #wrap .ct h2{ width: 80vw;}
            #wrap .ct > p{ font-size: 24px;}
            #wrap .ft .ft3{ width: 100%; margin-top: 50px;}
            #wrap .ct .contact{ width: 100%;}

            @media screen and (max-width:480px){
                html{ font-size: 10px;}
                body{ font-size: 1.3rem;}     
                #wrap{ background: #010305 url(./img/bg_mob.jpg) no-repeat 50% 0 / 100% auto;}   
                #wrap .hd{ padding:5.5rem 2rem 2rem;}
                #wrap .ct h2{ width: 90vw;}
                #wrap .hd .logo img{ height: 3rem;}
                #wrap .ct{ padding: 0 1.5rem 8rem; background-image: none;}
                #wrap .ct > p{ font-size: 1.6rem; margin: 2rem 0 0 0; letter-spacing: -.05em;}
                #wrap .ct .contact{ margin: 14rem auto 0;}
                #wrap .ct .contact li{ padding: 1rem 0; background-position: 100% 50%;}
                #wrap .ct .contact li a{ border-left: none; padding: 0 0 0 1.5rem;}
                #wrap .ft{ padding: 5rem 2rem; font-size: 1.3rem;}
                #wrap .ft h3{ font-size: 1.6rem; margin-bottom: 2rem;}
                #wrap .ft .ft2 ul{ margin-top: 0;}
                #wrap .ft .ft3{ margin-top: 4rem;}
                #wrap .ft .ft1{ margin-top: 4rem;}
                #wrap .ft .ft1{ align-items: end;}
                #wrap .ft .ft1 .logo img{ height: 3rem;}

                @media screen and (max-width:380px){
                     #wrap .ct > p{ font-size: 3.5vw; }
                }
            }
        }
    }
}