html{
  scroll-behavior: smooth;
}
body img { display:block; max-width:100%; vertical-align:top; }

#logo { position:absolute; top:10%; left:48%; transform:translate(-50%,-50%); width:330px; height:84px; z-index:10; }
#logo a { display:block; position:relative; width:100%; height:100%; background:url(/images/common/logo2.svg)no-repeat 0 0; background-size:100%; }


#introwrap { position:relative; width:100%; height:100vh; display:flex; }
#introwrap .introdr01 { position:relative; width:50%; height:100%; overflow:hidden; }
#introwrap .introdr02 { position:relative; width:50%; height:100%; overflow:hidden;}

#introwrap div ul { position:absolute; top:75%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; }
#introwrap div ul li:nth-child(1) { font-size:24px; font-weight:400; color:#ffffff; line-height:100%; }
#introwrap div ul li:nth-child(2) { margin-top:10px; font-size:40px; font-weight:700; color:#ffffff; line-height:100%; }
#introwrap div ul li:nth-child(3) { margin-top:14px; font-size:19px; font-weight:500; color:#ffffff; line-height:100%; }
#introwrap div ul li:nth-child(4) a { 
 font-size:17px; font-weight:600; color:#ffffff; line-height:100%; text-align:center; line-height:40px;
display:block; width:142px; height:40px; margin:0 auto; margin-top:34px; background:#295699; border-radius:30px 30px 30px 0px ;
}


#introwrap .introdr01 .bg  { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/images/dr1.jpg')no-repeat 50% 0; background-size:cover; animation: mainbg 10s cubic-bezier(0.25, 1, 0.5, 1) both 0s; }
#introwrap .introdr02 .bg  { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/images/dr2.jpg')no-repeat 50% 0; background-size:cover; animation: mainbg 10s cubic-bezier(0.25, 1, 0.5, 1) both 0s; }

@keyframes mainbg {
	0% { transform: scale(1.1) translateY(0); transform-origin: 50% 50%; }
	100% { transform: scale(1) translateY(0); transform-origin: 50% 50%; }
}






#intro01 { position:relative; width:100%; height:10082px; background:url('/images/intro/intro01.jpg')no-repeat 50% 0; }
#intro01 img { display:none; }
#intro01 .vod { position:absolute; top:620px; left:50%; transform:translate(-50%,0px); width:100%; max-width:1080px; }
#intro01 .vod video { display:block; width:100%; }





footer { position:relative; width:100%; background:#282828;  overflow:hidden; }
footer .foottxt { width:100%; padding-top:80px; text-align:center; font-family: 'NotoSerifKR';  font-size:26px; font-weight:500; color:#f4efea; line-height:100%; }

footer .footcon01 { position:relative; width:100%; max-width:1560px; margin:0 auto; margin-top:70px; display:flex; }
footer .footcon01 .footmap { position:relative; width:50%; height:400px; padding-right:3%; border-right:1px solid #414141; box-sizing:border-box; }
footer .footcon01 .foottime { position:relative; width:50%; height:400px; padding-left:3%; box-sizing:border-box; }

footer .footcon01 .footmap .txt { width:100%; margin-bottom:8px; font-size:18px; font-weight:400; color:#c7d9e5; }
footer .footcon01 .footmap .txt span { font-weight:700; color:#ffffff; }
footer .footcon01 .footmap .txt img { display:inline-block; padding-left:4px; cursor:pointer; }
footer .footcon01 .footmap .txt button { background:none; padding:0px; margin:0px; border:0px; }
footer .footcon01 .footmap .txt2 { width:100%; margin-top:20px; margin-bottom:5px; font-size:16px; font-weight:400; color:#c7d9e5;  line-height:26px; }
footer .footcon01 .footmap .txt2 span { display:inline-block; width:100px; height:26px; margin-right:10px; border-radius:50px; font-size:14px; font-weight:700; color:#ffffff; background:#4cbaff; text-align:center; }
footer .footcon01 .footmap .txt2 div:nth-child(2) { padding-left:110px; box-sizing:border-box; }
footer .footcon01 .footmap .txt3 { width:100%; height:26px; margin-bottom:5px; font-size:16px; font-weight:400; color:#c7d9e5; line-height:26px; }
footer .footcon01 .footmap .txt3 span { display:inline-block; width:100px; height:26px; margin-right:10px; border-radius:50px; font-size:14px; font-weight:700; color:#ffffff; background:#8936e0; text-align:center; }
footer .footcon01 .footmap .txt3 div:nth-child(2) { padding-left:110px; box-sizing:border-box; }
footer .footcon01 .footmap .txt4 { width:100%; height:26px; font-size:16px; font-weight:400; color:#c7d9e5; line-height:26px; }
footer .footcon01 .footmap .txt4 span { display:inline-block; width:100px; height:26px; margin-right:10px; border-radius:50px; font-size:14px; font-weight:700; color:#ffffff; background:#0de67d; text-align:center; }
footer .footcon01 .footmap .txt4 div:nth-child(2) { padding-left:110px; box-sizing:border-box; }

footer .footcon01 .footmap .mainmap { position:relative; width:100%; height:260px; margin-top:30px; border-radius:24px; overflow:hidden; }
footer .footcon01 .footmap .mainmap .cont { display:none; }
footer .footcon01 .footmap .mainmap .wrap_btn_zoom { display:none; }

footer .footcon01 .foottime .titletxt { width:100%; margin-bottom:30px; font-size:24px; font-weight:700; color:#ffffff; line-height:100%; letter-spacing:2px; }
footer .footcon01 .foottime .phonetxt { width:100%; display:flex; }
footer .footcon01 .foottime .phonetxt .title { width:112px; height:32px; line-height:32px; font-size:18px; font-weight:600; color:#ffffff; }
footer .footcon01 .foottime .phonetxt .phone { width:412px; height:32px; line-height:32px; font-size:32px; font-weight:600; color:#40c6ff; }
footer .footcon01 .foottime .phonetxt .phone a { color:#c7d9e5; }

footer .footcon01 .foottime .timetxt { width:100%; margin-top:30px; display:flex; }
footer .footcon01 .foottime .timetxt .title { width:112px; height:22px; line-height:22px; font-size:18px; font-weight:600; color:#ffffff; }
footer .footcon01 .foottime .timetxt .time { width:480px; }
footer .footcon01 .foottime .timetxt .time div { width:100%; height:22px; line-height:22px;  margin-bottom:4px; display:flex; }
footer .footcon01 .foottime .timetxt .time div span.t1 { display:block; width:80px; font-size:16px; font-weight:400; color:#dcdcdc; }
footer .footcon01 .foottime .timetxt .time div span.t2 { display:block; width:36px; font-size:16px; font-weight:400; color:#dcdcdc; }
footer .footcon01 .foottime .timetxt .time div span.t3 { display:block; text-align:right; width:56px; font-size:16px; font-weight:400; color:#dcdcdc; }
footer .footcon01 .foottime .timetxt .time div span.t4 { display:block; text-align:center; width:26px; font-size:16px; font-weight:400; color:#dcdcdc; }
footer .footcon01 .foottime .timetxt .time div span.t5 { display:block; text-align:left; width:44px; font-size:16px; font-weight:400; color:#dcdcdc; }
footer .footcon01 .foottime .timetxt .time div span.t6 { display:block; width:56px; font-size:16px; font-weight:400; color:#dcdcdc; }
footer .footcon01 .foottime .timetxt .time div span.t7 { display:block; width:108px; font-size:16px; font-weight:400; color:#fff600; }

footer .footcon01 .foottime .vtxt { display:block; width:100%; margin-top:14px; font-size:14px; font-weight:500; color:#ffffff; line-height:100%; }
footer .footcon01 .foottime .vtxt2 { display:block; width:100%; margin-top:6px; font-size:14px; font-weight:500; color:#ffffff; line-height:100%; }

footer .footcon01 .foottime .snstxt { width:100%; margin-top:30px; display:flex; }
footer .footcon01 .foottime .snstxt .title { width:112px; height:22px; line-height:22px; font-size:18px; font-weight:600; color:#ffffff; }
footer .footcon01 .foottime .snstxt .snsbox { width:480px; display:flex; }
footer .footcon01 .foottime .snstxt .snsbox a { display:block; margin-right:6px; }


footer .footcon02 { position:relative; width:100%; height:100px; border-top:1px solid rgba(255,255,255,10%);  margin-top:70px; }
footer .footcon02 div:nth-child(1) { position:absolute; top:50%; left:50px; transform:translateY(-50%); font-size:13px; font-weight:400; opacity:70%; color:#ffffff; letter-spacing:1px; line-height:140%; }
footer .footcon02 div:nth-child(1) span { font-size:10px; padding:0 10px; }
footer .footcon02 div:nth-child(2) { position:absolute; top:50%; right:50px; transform:translateY(-50%); width:230px; opacity:50%; }








@media all and (max-width:800px){




#logo { position:absolute; top:20px; left:5%; transform:translate(0%,0%); width:190px; height:54px; z-index:10; }
#logo a { display:block; position:relative; width:100%; height:100%; background:url(/images/common/logo2.svg)no-repeat 0 0; background-size:100%; }


#introwrap { position:relative; width:100%; height:100vh; display:flex; flex-direction: column; }
#introwrap .introdr01 { position:relative; width:100%; height:50%; overflow:hidden; }
#introwrap .introdr02 { position:relative; width:100%; height:50%; overflow:hidden;}

#introwrap div ul { position:absolute; top:75%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; }
#introwrap div ul li:nth-child(1) { font-size:16px; font-weight:400; color:#ffffff; line-height:100%; }
#introwrap div ul li:nth-child(2) { margin-top:10px; font-size:28px; font-weight:700; color:#ffffff; line-height:100%; }
#introwrap div ul li:nth-child(3) { margin-top:14px; font-size:13px; font-weight:500; color:#ffffff; line-height:100%; }
#introwrap div ul li:nth-child(4) a { 
 font-size:13px; font-weight:600; color:#ffffff; line-height:100%; text-align:center; line-height:30px;
display:block; width:100px; height:30px; margin:0 auto; margin-top:16px; background:#295699; border-radius:30px 30px 30px 0px ;
}


#introwrap .introdr01 .bg  { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/images/dr1.jpg')no-repeat 50% 0; background-size:cover; animation: mainbg 10s cubic-bezier(0.25, 1, 0.5, 1) both 0s; }
#introwrap .introdr02 .bg  { position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('/images/dr2.jpg')no-repeat 50% 0; background-size:cover; animation: mainbg 10s cubic-bezier(0.25, 1, 0.5, 1) both 0s; }

@keyframes mainbg {
	0% { transform: scale(1.1) translateY(0); transform-origin: 50% 50%; }
	100% { transform: scale(1) translateY(0); transform-origin: 50% 50%; }
}









#intro01 { position:relative; width:100%; height:auto; background:none; }
#intro01 img { display:block; width:100%; }
#intro01 .vod { position:relative; top:0; left:0; transform:translate(0,0px); width:100%; max-width:1080px; }
#intro01 .vod video { display:block; width:100%; }



footer { position:relative; width:100%; background:#282828; padding-bottom:60px; overflow:hidden; }
footer .foottxt {  padding-top:15%; font-size:19px; letter-spacing:0px; }

footer .footcon01 { width:90%; margin:0 auto; margin-top:30px; display:block; }
footer .footcon01 .footmap { width:100%; height:auto; padding-right:0%; border-right:0px solid #414141; }
footer .footcon01 .foottime { width:100%; margin-top:15%; height:auto; padding-left:0%; }

footer .footcon01 .footmap .txt { position:relative; margin-bottom:5px; font-size:13px; padding-left:56px; line-height:130%; box-sizing:border-box; }
footer .footcon01 .footmap .txt span { display:block; position:absolute; top:0px; left:0px; }

footer .footcon01 .footmap .txt2 { font-size:13px; font-weight:400; color:#c7d9e5;  line-height:20px; }
footer .footcon01 .footmap .txt2 span { width:80px; height:20px; margin-right:6px; font-size:12px; }
footer .footcon01 .footmap .txt2 div:nth-child(2) { padding-left:90px; }
footer .footcon01 .footmap .txt3 { width:100%; height:20px; font-size:13px; font-weight:400; color:#c7d9e5; line-height:20px; }
footer .footcon01 .footmap .txt3 span { width:80px; height:20px; margin-right:6px; font-size:12px; }
footer .footcon01 .footmap .txt4 { width:100%; height:20px; font-size:13px; font-weight:400; color:#c7d9e5; line-height:20px; }
footer .footcon01 .footmap .txt4 span { width:80px; height:20px; margin-right:6px; font-size:12px; }

footer .footcon01 .footmap .mainmap { height:180px; margin-top:20px; border-radius:14px; }


footer .footcon01 .foottime .titletxt { margin-bottom:10px; font-size:24px; }
footer .footcon01 .foottime .phonetxt { width:100%; display:flex; }
footer .footcon01 .foottime .phonetxt .title { width:76px; height:25px; line-height:25px; font-size:15px; }
footer .footcon01 .foottime .phonetxt .phone { width:220px; height:25px; line-height:25px; font-size:24px; }

footer .footcon01 .foottime .timetxt { width:100%; margin-top:20px; display:flex; }
footer .footcon01 .foottime .timetxt .title { width:76px; height:22px; line-height:22px; font-size:15px; }
footer .footcon01 .foottime .timetxt .time { width:270px; }
footer .footcon01 .foottime .timetxt .time div { width:100%; height:22px; line-height:22px;  margin-bottom:4px; display:flex; }
footer .footcon01 .foottime .timetxt .time div span.t1 { width:50px; font-size:13px; }
footer .footcon01 .foottime .timetxt .time div span.t2 { width:24px; font-size:13px; }
footer .footcon01 .foottime .timetxt .time div span.t3 { width:32px; font-size:13px; }
footer .footcon01 .foottime .timetxt .time div span.t4 { width:12px; font-size:13px; }
footer .footcon01 .foottime .timetxt .time div span.t5 { width:24px; font-size:13px; }
footer .footcon01 .foottime .timetxt .time div span.t6 { width:32px; font-size:13px; }
footer .footcon01 .foottime .timetxt .time div span.t7 { width:80px; padding-left:4px; font-size:13px; }

footer .footcon01 .foottime .vtxt { font-size:13px;}
footer .footcon01 .foottime .vtxt2 { font-size:13px; }

footer .footcon01 .foottime .snstxt { margin-top:20px; }
footer .footcon01 .foottime .snstxt .title { width:76px; }
footer .footcon01 .foottime .snstxt .snsbox { width:220px; display:flex; }
footer .footcon01 .foottime .snstxt .snsbox a { display:block; width:40px; margin-right:10px; }


footer .footcon02 { height:auto; padding:7% 5%; box-sizing:border-box;margin-top:30px; }
footer .footcon02 div:nth-child(1) { position:relative; top:0%; left:0px; transform:translateY(-0%); font-size:13px; }
footer .footcon02 div:nth-child(1) span { font-size:10px; padding:0 10px; }
footer .footcon02 div:nth-child(2) { display:none; }

 }