@charset "utf-8";

@import url("../fonts/pretendard.css");
html, body,
div, span,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
blockquote, p, address, pre, cite,
form, fieldset, input, textarea, select,
table, th, td {
    word-break: keep-all;
    word-wrap: break-word;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important; color:#000000; margin:0; padding:0; letter-spacing: -0.025em; font-family:"Pretendard", "맑은 고딕","Malgun Gothic", "나눔고딕", "Nanum Gothic", "NotoSansKR","굴림", Gulim,'돋움',dotum,Helvetica,sans-serif; font-weight:400; }
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal;}
fieldset, img, abbr,acronym { border:0 none; }
ol, ul { list-style:none; }
table {border-collapse: separate; border-spacing:0; border:0 none;}
caption, th, td {text-align:left; font-weight: normal; border:0;}
address, caption, strong, em, cite {font-weight:normal; font-style:normal;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote,q {quotes:"" "";}
legend, #header h2, #slogan h2, #footer h2, .blind{position:absolute; overflow:hidden; width:1px; height:1px; font-size:0; line-height:0;}
a {text-decoration:none; color:#000000;}
a:hover {text-decoration:none;}

body {}
.ml05 {margin-left:5px !important;}
.ml10 {margin-left:10px !important;}
.mt16 {margin-top:16px !important;}
.mt18 {margin-top:18px !important;}
.mt20 {margin-top:20px !important;}
.mt24 {margin-top:24px !important;}
.mt25 {margin-top:25px !important;}
.mt26 {margin-top:26px !important;}
.mt33 {margin-top:33px !important;}
.mt35 {margin-top:35px !important;}
.mt48 {margin-top:48px !important;}
.mt50 {margin-top:50px !important;}
.mt52 {margin-top:52px !important;}
.mt68 {margin-top:68px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt23 {margin-top:23px !important;}
.mt30 {margin-top:30px !important;}
.mt38 {margin-top:38px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt47 {margin-top:47px !important;}
.mt48 {margin-top:48px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}
.mt64 {margin-top:64px !important;}
.mt67 {margin-top:67px !important;}
.mt68 {margin-top:68px !important;}
.mt83 {margin-top:83px !important;}
.mt87 {margin-top:87px !important;}
.mt90 {margin-top:90px !important;}
.mt95 {margin-top:95px !important;}
.mt96 {margin-top:96px !important;}
.mt114 {margin-top:114px !important;}
.mt140 {margin-top:140px !important;}
.mt167 {margin-top:167px !important;}
.mb04 {margin-bottom:4px !important;}
.mt04 {margin-top:4px !important;}

.pdt23 {padding-top:23px !important;}
.pdt26 {padding-top:26px !important;}
.elip1 {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.elip2 {display:block; overflow:hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient: vertical; word-break:keep-all;}
.elip3 {display:block; overflow:hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp:3; -webkit-box-orient: vertical; word-break:keep-all;}
.elip4 {display:block; overflow:hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp:4; -webkit-box-orient: vertical; word-break:keep-all;}
.elip5 {display:block; overflow:hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp:5; -webkit-box-orient: vertical; word-break:keep-all;}
.elip6 {display:block; overflow:hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp:6; -webkit-box-orient: vertical; word-break:keep-all;}

.brd_none {border:0px !important;}

.cl:after {content:""; display:block; clear:both;}


.in {max-width:1280px; margin:0 auto;}

.top {transition:all 0.2s ease; height:90px; z-index:100; position:fixed; top:0; left:0; right:0; padding:0 60px;}
.top h1 a {display:block; width:220px; height:37px;}
.top .gnb {transition:all 0.2s ease; float:right; margin-top:29px;}
.top .gnb ul {display:flex; margin:0 -32px;}
.top .gnb ul li {padding:0 32px;}
.top .gnb ul li a {transition:all 0.2s ease; display:block; font-size:16px; line-height:32px; color:#ffffff;}
.top h1 {float:left; margin-top:17px;}
.top:after {content:""; display:block; clear:both;}

.top.active {background:#ffffff;box-shadow: 0px 6px 5px rgb(0 0 0 / 5%);}
.top.active h1 a {filter:invert(1);}
.top.active .gnb ul li a {color:#000000;}
.top.active .gnb {margin-top:29px;}

.m1d video {width:100%;}

.m1d {position:relative;}
.m1d:before {content:""; display:block; position:absolute;
    top:0; left:0; right:0; bottom:0;
    background:url(../img/cptn01.png) repeat; z-idnex:1;
}
.m1d .w1 {z-index:3; display:flex; flex-direction:row; align-items:center; position:absolute; left:0; right:0; bottom:0; top:0;}
.m1d .w1 img {display:block; margin:0 auto; width: 50vw; align-content: center;}
.m1d video {display:block;}
.m1d:after {content:""; display:block; position:absolute;
    top:10%; left:32%; right:32%; bottom:10%;
    background:rgba(240,141,0,0.33); z-index:2;
}

.m2d {padding-top:360px;}
.m2d .dv1 .w1 {opacity:0; transform:translateY(50px); transition:all 1.2s ease; font-weight:300; text-align:center; font-size:56px; line-height:78px; color:#3b3b3b;}
.m2d .dv1 .w2 {opacity:0; transform:translateY(30px); transition:all 1.4s ease 0.2s; margin-top:36px; font-weight:100; text-align:center; font-size:36px; line-height:62px; color:#505050;}
.m2d .dv2 {margin-top:320px;}
.m2d .dv2 .img1 {opacity:0; transform:translateY(80px); transition:all 1.2s ease 0.4s; display:block; margin:0 auto; width:100%; max-width:1000px;}
.m2d .dv2 .img2 {opacity:0; transform:translateY(100px); transition:all 1.4s ease 0.6s; display:block; margin:0 auto; width:100%; max-width:1000px;}
.m2d .dv2 .img3 {opacity:0; transform:translateY(120px); transition:all 1.6s ease 0.8s; display:block; margin:0 auto; width:100%; max-width:1000px;}
.m2d .dv2 img {display:block; width:100%;}
.m2d .dv3 {margin-top:320px; padding-bottom:240px; position:relative;}
.m2d .dv3 img {opacity:0; transform:translateY(50px) scale(0.95); transition:all 1.2s ease 0.6s; display:block; margin:0 auto; width:100%; max-width:967px;}
.m2d .dv3:after {content:""; display:block; position:absolute; background:#7a7a7a; width:1px; left:50%; bottom:0; height:180px; opacity:0; transform:scaleY(0); transition:all 1.0s ease 1.0s; transform-origin:top;}
.m2d .dv4 {margin-top:60px;}
.m2d .dv4 p {opacity:0; transform:translateY(60px); transition:all 1.5s ease 1.2s; color:#666666; font-size:48px; text-align:center; line-height:78px; font-weight:300;}
.m2d .dv4 p strong {color:#666666; font-size:60px; font-weight:700; opacity:0; transform:translateY(30px) scale(0.9); transition:all 1.2s ease 1.8s; display:inline-block;}
.m2d .dv5 ul {display:flex;flex-direction: row;justify-content: space-between;gap: 10px; align-items: center;}
.m2d .dv5 ul li {opacity:0; transform:translateY(30px); transition:all 1.0s ease;}
.m2d .dv5 ul li img {display:block; width:100%;}
.m2d .dv5 {margin-top:130px;}

.m2d.animate .dv1 .w1 {opacity:1; transform:translateY(0);}
.m2d.animate .dv1 .w2 {opacity:1; transform:translateY(0);}
.m2d.animate .dv2 .img1 {opacity:1; transform:translateY(0);}
.m2d.animate .dv2 .img2 {opacity:1; transform:translateY(0);}
.m2d.animate .dv2 .img3 {opacity:1; transform:translateY(0);}
.m2d.animate .dv3 img {opacity:1; transform:translateY(0) scale(1);}
.m2d.animate .dv3:after {opacity:1; transform:scaleY(1);}
.m2d.animate .dv4 p {opacity:1; transform:translateY(0);}
.m2d.animate .dv4 p strong {opacity:1; transform:translateY(0) scale(1);}
.m2d.animate .dv5 ul li {opacity:1; transform:translateY(0);}
.m2d.animate .dv5 ul li:nth-child(1) {transition-delay:2.0s;}
.m2d.animate .dv5 ul li:nth-child(2) {transition-delay:2.1s;}
.m2d.animate .dv5 ul li:nth-child(3) {transition-delay:2.2s;}
.m2d.animate .dv5 ul li:nth-child(4) {transition-delay:2.3s;}
.m2d.animate .dv5 ul li:nth-child(5) {transition-delay:2.4s;}

.m3d {margin-top:360px; height:1100px;}
.m3d {background:url(../img/homepage_teslabar_img01.png) center no-repeat; background-size:cover; background-attachment: fixed;}
.m3d .dv1 {width:100%; height:1100px; display:flex;  flex-direction:row; align-items:end;}
.m3d .dv1 .w1 img {opacity:0; transform:translateY(60px); transition:all 1.5s ease; display:block; width:50%; margin:0 auto;}
.m3d .dv1 .w2 {opacity:0; transform:translateY(80px); transition:all 1.2s ease 0.3s; text-shadow: 2px 2px 6px rgb(0 0 0 / 84%);margin-top:30px; font-size:36px; line-height:46px; color:#ffffff; text-align:center;}
.m3d .dv1 .w3 {opacity:0; transform:translateY(100px); transition:all 1.0s ease 0.6s; text-shadow: 2px 2px 6px rgb(0 0 0 / 84%);margin-bottom:76px; margin-top:28px;font-weight:100; font-size:30px; line-height:36px; color:#ffffff; text-align:center;}
.m3d .idv1 {flex:1;}

.m3d.animate .dv1 .w1 img {opacity:1; transform:translateY(0);}
.m3d.animate .dv1 .w2 {opacity:1; transform:translateY(0);}
.m3d.animate .dv1 .w3 {opacity:1; transform:translateY(0);}

.m5d {margin-top:360px; height:1100px;}
.m5d {background:url(../img/homepage_teslabar_img02.png) center no-repeat; background-size:cover; background-attachment: fixed;}
.m5d .dv1 {width:100%; height:1100px; display:flex;  flex-direction:row; align-items:end;}
.m5d .dv1 .w1 img {opacity:0; transform:translateY(80px); transition:all 2.0s ease; display:block; width:50%; margin:0 auto;}
.m5d .dv1 .w2 {opacity:0; transform:translateY(100px); transition:all 1.3s ease 0.4s; text-shadow: 2px 2px 6px rgb(0 0 0 / 84%);margin-top:30px; font-size:36px; line-height:46px; color:#ffffff; text-align:center;}
.m5d .dv1 .w3 {opacity:0; transform:translateY(120px); transition:all 1.1s ease 0.7s; text-shadow: 2px 2px 6px rgb(0 0 0 / 84%);margin-bottom:76px; margin-top:28px;font-weight:100; font-size:30px; line-height:36px; color:#ffffff; text-align:center;}
.m5d .idv1 {flex:1;}

.m5d.animate .dv1 .w1 img {opacity:1; transform:translateY(0);}
.m5d.animate .dv1 .w2 {opacity:1; transform:translateY(0);}
.m5d.animate .dv1 .w3 {opacity:1; transform:translateY(0);}


.m4d .dv1 {display:flex; flex-direction: row;}
.m4d .img {width:60%;}
.m4d .txt {width:40%; padding-top:20%;}
.m4d .img img {opacity:0; transform:translateY(80px); transition:all 1.5s ease; display:block; width:100%;}
.m4d .txt .w1 {opacity:0; transform:translateY(60px); transition:all 1.2s ease 0.3s; font-size:64px; line-height:72px; font-weight:900;}
.m4d .txt .w2 {opacity:0; transform:translateY(40px); transition:all 1.0s ease 0.6s; margin-top:56px; font-size:32px; line-height:48px; color:#666666; font-weight:300;}
.m4d .nv1 .txt .w1 {color:#f18300;}
.m4d .nv2 .txt .w1 {color:#5c389e;}
.m4d .nv3 .txt .w1 {color:#f4b947;}

.m4d.animate .img img {opacity:1; transform:translateY(0);}
.m4d.animate .txt .w1 {opacity:1; transform:translateY(0);}
.m4d.animate .txt .w2 {opacity:1; transform:translateY(0);}


.m6d {margin-top:320px;}
.m6d .w1 img {opacity:0; transform:translateY(80px); transition:all 1.8s ease; display:block; margin:0 auto; width:100%; max-width:967px;}
.m6d .w2 {opacity:0; transform:translateY(100px); transition:all 1.4s ease 0.5s; font-weight:300; margin-top:76px; color:#666666; font-size:36px; line-height:62px; text-align:center;}

.m6d.animate .w1 img {opacity:1; transform:translateY(0);}
.m6d.animate .w2 {opacity:1; transform:translateY(0);}

.m7d {margin-top:320px;}
.m7d .dv1 {display:flex; flex-direction:row;}
.m7d .dv1 .w1 {width:50%;}
.m7d .dv1 .w1:nth-child(1) img {opacity:0; transform:translateY(120px) scale(0.9); transition:all 1.8s ease; display:block; width:100%;}
.m7d .dv1 .w1:nth-child(2) img {opacity:0; transform:translateY(140px) scale(0.85); transition:all 2.0s ease 0.3s; display:block; width:100%;}
.m7d .dv2 {position:relative;}
.m7d .dv2 .img img {opacity:0; transform:translateY(150px) scale(0.8); transition:all 2.2s ease 0.5s; display:block; width:100%;}
.m7d .np1 {position:absolute; top:-8.5%; padding-left:20px;}

.m7d .np2 .w1 {opacity:0; transform:translateY(100px) scale(0.9); transition:all 1.5s ease 1.2s; margin-top:10px; color:#ffffff; font-size:24px; line-height:32px; font-weight:300; text-shadow: 0 0 20px rgba(255,255,255,0.3);}
.m7d .np2 {position:absolute; left:10%; bottom:10%; width:50%;}
.m7d .np2 .img1 {opacity:0; transform:translateY(80px) scale(0.7) rotate(-5deg); transition:all 1.8s ease 0.8s; display:block; width:80%; filter:drop-shadow(0 10px 20px rgba(0,0,0,0.3));}
.m7d .np2 .img2 {opacity:0; transform:translateY(60px) scale(0.6) rotate(10deg); transition:all 2.0s ease 1.4s; margin-top:30px; display:block; width:20%; z-index:2; filter:drop-shadow(0 8px 15px rgba(0,0,0,0.4));}
.m7d .np2 .img3 {opacity:0; transform:translateY(40px) scale(0.5) rotate(-8deg); transition:all 2.2s ease 1.8s; position:absolute; left:10%; bottom:-3%; width:20%; z-index:2; filter:drop-shadow(0 6px 12px rgba(0,0,0,0.5));}
.m7d .in {position:relative;}
.m7d .inner {position:absolute; top:0; left:0; bottom:0; right:0; }

.m7d.animate .dv1 .w1:nth-child(1) img {opacity:1; transform:translateY(0) scale(1);}
.m7d.animate .dv1 .w1:nth-child(2) img {opacity:1; transform:translateY(0) scale(1);}
.m7d.animate .dv2 .img img {opacity:1; transform:translateY(0) scale(1);}
.m7d.animate .np2 .w1 {opacity:1; transform:translateY(0) scale(1);}
.m7d.animate .np2 .img1 {opacity:1; transform:translateY(0) scale(1) rotate(0deg);}
.m7d.animate .np2 .img2 {opacity:1; transform:translateY(0) scale(1) rotate(0deg);}
.m7d.animate .np2 .img3 {opacity:1; transform:translateY(0) scale(1) rotate(0deg);}

.mtop {transition:all 0.2s ease; display:none;z-index:101; position:fixed; top:0; left:0; right:0; height:50px;}
.mtop h1 a {display:block;width: 140px;height: 31px;}
.mtop h1 {margin-left: 15px;}

.gnb_btn_wp {
    float: left;
    display: block;
    width: 24px;
    height: 20px;
    padding: 15px 13px;
}
.mtop_mbtn {position:absolute;top:0;right: 4px;}

.gnb_btn {
    width: 24px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: flex-start;
}
.gnb_btn span{position:relative;top:0;display:block;width:100%;height: 2px;background:#ffffff;transform:rotate(0);transition:0.5s all;}
.gnb_btn span:nth-child(2){width:80%;margin: 7px 0;transition:0.5s width;}
.gnb_btn:hover span:nth-child(2){width:100%;transition:0.5s width;}
.gnb_btn.active span:nth-child(1){top: 9px;transform:rotate(45deg);transition:0.5s all;}
.gnb_btn.active span:nth-child(2){width:0;transition:0.1s all;}
.gnb_btn.active span:nth-child(3){top: -9px;transform:rotate(-45deg);transition:0.5s all;}

.mtop.color h1 a {filter:invert(1);}
.mtop.color .gnb_btn span {background:#000000;}

.mtop.active {background:#ffffff;box-shadow: 0px 6px 5px rgb(0 0 0 / 5%);}
.mtop.active h1 a {filter:invert(1);}
.mtop.active .gnb_btn span {background:#000000;}
.gnb_btn_wp.active .gnb_btn span {background:#000000 !important;}
.mmenu01 {transition:all 0.2s ease; display:none; opacity:0; z-index:100;background:#ffffff; position:fixed; top:0px; left:0; bottom:0; right:0;}
.mmenu01.active {opacity:1;}
.mmenu01 .box01 {margin-top:50px;display: flex;height: calc(100% - 50px);width: 100%;}
.mmenu01 ul {display:flex;flex-direction: column;height: 100%;width: 100%;}
.mmenu01 ul li {position:relative; height:20%; display:table; width:100%;}
.mmenu01 ul li a {display:table-cell; vertical-align:middle; font-size:20px; font-weight:300; text-align:center;}
.mmenu01 ul li:after {content:"";width:20px;left:50%;margin-left:-10px;height:1px; bottom:0px;background:#999999;display: block;position: absolute;}
.mmenu01 ul li:last-child:after {display:none;}

.top h1 a img {width:100%;}
.mtop h1 {padding-top: 8px;}
.mtop h1 a img {width:100%;}
@media all and (max-width:1024px) {
    .top {display:none;}
    .mtop {display:block; }
    .m2d .dv2 {padding:0 60px; margin-top:80px;}
    .m2d {padding-top:120px;}
    .m2d .dv1 .w1 {font-size:28px; line-height:36px;}
    .m2d .dv1 .w2 {margin-top:18px; font-size:18px; line-height:30px;}
    .m2d .dv3 {margin-top:100px;padding:0 20px; padding-bottom:120px;}
    .m2d .dv3:after {height:80px;}
    .m2d .dv4 {margin-top:40px;}
    .m2d p {font-size:24px; line-height:36px;}
    .m2d p strong {font-size:28px;}
    .m2d .dv5 {margin-top:30px; padding:0 20px;}
    .m3d {margin-top:180px;}
    .m3d .dv1 .w2 {margin-top:12px;font-size:18px; line-height:24px;}
    .m3d .dv1 .w3 {margin-bottom:30px; margin-top:10px; font-size:16px; line-height:24px;}
    .m5d {margin-top:180px;}
    .m5d .dv1 .w2 {margin-top:12px;font-size:18px; line-height:24px;}
    .m5d .dv1 .w3 {margin-bottom:30px; margin-top:10px; font-size:16px; line-height:24px;}
    .m4d .dv1 {display:block;}
    .m4d .dv1 .img {width:100%; box-sizing:border-box; padding:0 20px;}
    .m4d .dv1 .txt {width:auto; padding:0 20px;}
    .m4d .txt {padding-top:0px;}
    .m4d .txt .w1 {font-size: 32px;
        line-height: 48px; text-align:center;}
    .m4d .txt .w2 {margin-top: 16px;
        font-size: 18px;
        line-height: 30px; text-align:center;}

    .m4d .in .dv1 + .dv1 {margin-top:20px;}
    .m6d {margin-top:160px;}
    .m6d .w1 {padding:0 20px;}
    .m6d .w2 {        font-size: 20px;
        line-height: 32px; margin-top:32px;}
        .m2d .dv4 p {font-size:20px; line-height:32px;}
        .m2d .dv4 p strong {font-size:24px; line-height:38px;}
        
        
        .m2d .dv3 img {width:50%;}
        .m6d .w1 img {width:50%}
.m7d {margin-top:160px;}
    .m7d .np2 .w1 {font-size:17px; line-height:20px;}
    .m7d .np2 .img2 {margin-top:16px;}


}