@charset "utf-8";

:root {
    --primary: #001A3D;
    --gold: #C5A059;
}

body{min-width:550px; height: 100%; overflow: hidden;}
.wrap { display: block; width:100%;   overflow:hidden;}

/* wrapper */
.wrapper { 
    display: flex; 
    height: 100%; 
    width: 100%;
    min-width: 550px;
    position: relative;
}

.logo { background: url(../images/logo_d.png) no-repeat;width: 100%;height: 55px; }

/* 좌측 영역 */
.image-side {
    flex: 7.5;
    position: relative;
    display: flex;
    align-items: center;
    /* padding: 0 80px; */
    overflow: hidden;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 45%);
    z-index: 1;
}

.content-overlay {
    position: relative;
    z-index: 2;
    color: #fff;
    margin-top: 40px;
}

.content-overlay h2 {
    font-size: 1.2rem;
    color: var(--gold);
    letter-spacing: 4px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    font-weight: 700;
}

.content-overlay h1 {
    font-size: 3.5rem;
    line-height: 1.3;
    font-weight: 700;
    text-shadow: 0 3px 10px rgba(0,0,0,0.6), 0 0 20px rgba(0,0,0,0.3);
    margin-bottom: 10px;
}

.content-overlay p {
    opacity: 0.9;
    font-size: 1.1rem;
    font-weight: 300;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* 슬라이더 */
.visual { 
    display: block;
    width: 100%;
    height: 100%;  
    position: absolute; 
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 0;
}
.slide_wrap ul { display: block;font-size: 0; }
.slide_wrap ul li { 
    display: block;
    width:100%; 
    height: 100%;
    overflow: hidden; 
    top:0; 
    bottom: 0; 
    right: 0; 
    left: 0;  
    margin: 0px;
    position: relative;
    align-items: center;
    padding: 0 80px;
}
.slide_wrap ul li.vis01 { background:url(../images/visual01.jpg) no-repeat center / cover;     padding-top: 80px;}
.slide_wrap ul li.vis02 { background:url(../images/visual02.jpg) no-repeat center top / cover; padding-top: 140px;}
.slide_wrap ul li.vis03 { background:url(../images/visual03.jpg) no-repeat center top / cover; padding-top: 60px;}
.slide_wrap ul li.vis04 { background:url(../images/visual04.jpg) no-repeat center top / cover; padding-top: 40px;}

.slogan { display: none; }

.main_btn { 
    display: block;
    margin: 0;
    position: absolute;
    top: 40px;
    right: 80px;
    width: 160px;
    z-index: 10;
}
.main_btn > .page_btn { display: block;margin: 0 10px;padding: 0px 14px; }
.main_btn > .page_btn > a { background:#929191;text-indent: -9999px;display:inline-block;width:10px; height:10px; border-radius:50%; margin:0 3px;outline:0;vertical-align: middle;cursor: pointer; }
.main_btn > .page_btn > a.active { background: #fff; }
.main_btn > .control_btn > a { cursor: pointer;text-indent: -9999px;position: absolute;top: -4px;width: 9px;height: 30px; }
.main_btn > .control_btn > .prev { left:0; background: url(../images/icon_mvis_prev.png) no-repeat center; }
.main_btn > .control_btn > .next { right:25px; background: url(../images/icon_mvis_next.png) no-repeat center; }
.main_btn > .control_btn > .play { right: -11px;background: url(../images/icon_mvis_pause.png) no-repeat left;margin: 0 3px;width: 20px;height: 30px;background-size: auto; }

.tnb { display: block; box-sizing:border-bpx; padding: 60px ;overflow: hidden; }
.tnb > h1 { display: block;float: left;background: url(../images/logo_d.png) no-repeat center / contain;width: 180px; }
.tnb > div { display: block;float: right;width: 110px;height: 35px;border-radius: 20px;border: 1px solid #fff;font-size: 0;margin-top: 0px; }
.tnb > div > a { display: inline-block;color: #fff;width: 100%;position: relative; height: 34px; line-height:1; font-size: 15px; text-decoration:none !important; text-align: center; padding-top: 9px;}
.tnb > div > a + a::before { content: '';width: 1px;height: 12px;background: #fff;display: block;position: absolute;left: 0;top: 11px; }


/* 우측 영역 */
.login-side {
    flex: 2.5;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px 60px;
    box-shadow: -20px 0 50px rgba(0,0,0,0.1);
    z-index: 10;
    overflow-y: auto;
    position: relative;
    height: 100vh;
}

.logo-box { 
    margin-bottom: 30px; 
    text-align: center;
}
.logo-box img { 
    height: auto;
    max-width: 180px;
}

.login-title { 
    margin-bottom: 10px; 
}
.login-title h3 { 
    font-size: 1.4rem; 
    color: var(--primary); 
    font-weight: 700; 
}
.login-title p { 
    color: #888; 
    font-size: 0.8rem; 
    margin-top: 10px; 
}

.form-group { 
    margin-bottom: 10px; 
}
.form-group label { 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: #bbb; 
    display: block; 
}
.form-group input { 
    width: 100%; 
    padding: 15px 0; 
    border: none; 
    border-bottom: 2px solid #eee; 
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
    background: transparent;
}
.form-group input:focus { 
    border-bottom-color: var(--gold); 
}

.btn-login {
    width: 100%;
    padding: 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 0;
}
.btn-login:hover { 
    background: var(--gold); 
    transform: translateY(-3px); 
}

.footer-text {
  position: fixed;
  font-size: 0.75rem;
  color: #999;
  width: 100%;
  bottom: 10px;
}

/* 컨텐츠 */
.content{display:block;}
.content_left { width: calc(100% - 400px);float: left;background: transparent;position: relative; z-index:100;}
.content_left > .news { display: block; position:absolute; bottom:70px;width:100%}
.content_left > .news > h3 { display: block;font-style: italic;font-size: 24px;color: #fff;font-weight: 500;margin-left: 60px;line-height: 24px; }
.content_left > .news > h3 > span { display: inline-block;color: #59bcff;margin-left: 3px; }
.content_left > .news > p { display: block;color: #ddd;font-size: 18px;line-height: 26px;margin-left: 60px; }
.content_left > .news > ul { display: block;font-size: 0;margin-top: 30px;border-top: 1px solid #ddd;padding-left: 40px; }
.content_left > .news > ul > li { display: inline-block;width: calc(25% - 20px);position: relative;padding: 0 10px; }
.content_left > .news > ul > li::before { content: '';width: 13px;height: 13px;border-radius: 50%;background: #fff;position: absolute;top: -7px;left: 10px; }
.content_left > .news > ul > li > span { display: block;color: #eee;font-size: 15px;margin: 20px 0px 15px 0px; }
.content_left > .news > ul > li > p {display: block;color: #fff;font-size: 17px;line-height: 22px;height: 46px;text-overflow: ellipsis;/* white-space: nowrap; */overflow: hidden;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 2; line-clamp: 2;}


.services{
  position: absolute;
  bottom: 40px;
  z-index: 5;
  width: 100%;
  padding-right: 30px;
}
.services .service-item {
border: 1px solid rgba(255,255,255, 0.7);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
height: 100%;
padding: 10px 20px;
text-align: center;
transition: 0.3s;
border-radius: 5px;
}


.services .service-item .icon {
margin: 0 auto;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
transition: ease-in-out 0.3s;
position: relative;
}

.services .service-item .icon i {
font-size: 24px;
transition: 0.5s;
position: relative;
}

.services .service-item .icon svg {
position: absolute;
top: 0;
left: 0;
}

.services .service-item .icon svg path {
transition: 0.5s;
fill: color-mix(in srgb, #444444, transparent 55%);
}

.services .service-item h3 {
font-weight: 700;
margin: 5px 0 ;
font-size: 16px;
color: #eee;
}

.services .service-item p {
line-height: 20px;
font-size: 12px;
margin-bottom: 0;
color:#dedede
}

.services .service-item:hover {
box-shadow: 0px 5px 35px 0px rgba(90, 90, 90, 0.5);
}
.services .service-item:hover h3 {
color: #fff;
}
.services .service-item:hover p {
color: #fff;
}

.services .service-item.item-burgundy{
  background-color: rgba(112, 44, 44, 0.85);
}
.services .service-item.item-burgundy i {
color: #d2f7ff;
}

.services .service-item.item-burgundy:hover .icon i {
color: #fff;
}

.services .service-item.item-burgundy:hover .icon path {
fill: #0dcaf0;
}

.services .service-item.item-blue {
background-color: rgba(60, 90, 109, 0.85);
}
.services .service-item.item-blue i {
color: #ffe3cd;
}

.services .service-item.item-blue:hover .icon i {
color: #fff;
}

.services .service-item.item-blue:hover .icon path {
fill: #fd7e14;
}
.services .service-item.item-teal {
  background-color: rgba(99, 98, 98, 0.85);
}
.services .service-item.item-teal i {
color: #e1fff6;
}

.services .service-item.item-teal:hover .icon i {
color: #fff;
}

.services .service-item.item-teal:hover .icon path {
fill: #20c997;
}

.services .service-item.item-red{
  background-color: rgba(120, 30, 30, 0.85);
}
.services .service-item.item-red i {
color: #faaab2;
}

.services .service-item.item-red:hover .icon i {
color: #fff;
}

.services .service-item.item-red:hover .icon path {
fill: #df1529;
}
.services .service-item.item-indigo {
  background-color: rgba(30, 60, 120, 0.85);
}
.services .service-item.item-indigo i {
color: #e1fff6;
}

.services .service-item.item-indigo:hover .icon i {
color: #fff;
}

.services .service-item.item-indigo:hover .icon path {
fill: #6610f2;
}



.content_right { width: 400px; float:right; position:Relative; z-index:100;padding:0 20px; display: none;}
.content_right:before{content:""; display:block; position:absolute; z-index:99; background: rgba(0,0,8,.7); top:0; bottom:0; right:0; width:100%; z-index:-1;}

.content_right > .news { display: block; width:100%;}
.content_right > .news h3 { display: block;font-size: 24px;color: #fff;font-weight: 500;line-height: 24px; }
.content_right > .news h3 > span { display: inline-block;color: #fff;margin-left: 3px; }
.content_right > .news p { display: block;color: #fff;font-size: 18px;font-style: italic;line-height: 26px;}
.content_right > .news ul { margin-top: 2rem;  border-radius: 12px;  position: relative;}
.content_right > .news ul li { 
  padding-bottom: 1.5rem;
  border-left: 1px solid #abaaed;
  position: relative;
  padding-left: 20px;
  margin-left: 10px;
  &:last-child{
    border: 0px;
    padding-bottom: 0;
  }
  &:before{
    content: '';
    width: 15px;
    height: 15px;
    background: white;
    border: 1px solid #4e5ed3;
    box-shadow: 3px 3px 0px #bab5f8;
    box-shadow: 3px 3px 0px #bab5f8;
    border-radius: 50%;
    position: absolute;
    left: -10px;
    top: 0px;
  }
}
.content_right > .news > ul > li > span { display:block; color: #fff;font-weight: 500;}

.content_right > .logo { margin-top: 50px; margin-bottom: 70px; }

.content_right > .quick-menu {margin-top: 10px;  width: 100%;position: absolute;bottom: 0;}
.content_right > .quick-menu ul { display: block;font-size: 0;  width: 100%; box-sizing:border-box; margin: 0 auto;overflow: hidden;padding-bottom: 20px; }
.content_right > .quick-menu ul li { float:left;margin-bottom: 12px; width:calc( (100% - 12px) / 2 ); position: relative; height: 180px;}
.content_right > .quick-menu ul li a { display:block; padding:25px 0; font-size:20px;line-height:28px;color:#fff;padding:25px; position:absolute; height:100%;}
.content_right > .quick-menu ul li:nth-child(1) { background:#FE642E url(../images/quick_menu01.png) no-repeat right 20px bottom 25px; }
.content_right > .quick-menu ul li:nth-child(2) { background:#5882FA url(../images/quick_menu02.png) no-repeat right 20px bottom 25px;;margin-left: 12px;}
.content_right > .quick-menu ul li:nth-child(3) { background:#5882FA url(../images/quick_menu03.png) no-repeat right 20px bottom 25px;;clear:left; }
.content_right > .quick-menu ul li:nth-child(4) { background:#2E64FE url(../images/quick_menu04.png) no-repeat right 20px bottom 25px;;margin-left: 12px; }



.login{color:#333;}
.login > hgroup { display: block; width: 100%;  margin: 30px auto 0px auto; }
.login > hgroup > h3 { display: block;font-size: 24px;font-weight: 700;line-height: 46px; }
.login > form > .login_form { width: 100%; margin: 0px auto; }
.login > form > .login_form > div.input {  position: relative;padding: 10px 0 0; display: block;background: transparent;overflow: hidden;line-height: 70px;height: 70px;margin-top: -1px; position: relative;}
.login > form > .login_form > div.input + div.input { margin-top: 0; }
.login > form > .login_form > div.input > input { border-radius: 10px;border: 1px solid #ddd;padding: 0px 20px;line-height: 55px;height: 55px;font-size: 16px;background: transparent;width: 100%;outline: none;color: #333;appearance: none;position: relative;z-index: 1;}
.login > form > .login_form > div.input > input::placeholder { color: #aaa; }
.login > form > .login_form > div.input > input:focus { border: 1px solid var(--gold); }
.login > form > .login_form > div.input > label { position: absolute; left: 20px; transform: translateY(-50%); font-size: 16px; color: #aaa; pointer-events: none;;padding: 0 5px;z-index: 2;clip-path: inset(0 -5px 0 0);}
/* .loginbtn { display: block;color: #fff;background: #333;border-color:#fff;width: 100%;height:55px;line-height: 1;font-size: 20px;margin-top: 20px; } */
.loginbtn { display: block;color: #fff;background-color: #D6061C;border-radius: 10px;width: 100%;height:55px;line-height: 1;font-size: 20px;margin-top: 20px; }

input[type=text]::-ms-clear {display:none;}
input[type=checkbox]:not(old){width:25px;height:15px;margin:0;padding:0;opacity:0;}
input[type=checkbox]:not(old) + em {display:inline-block;margin-left:-25px;padding-left:20px;background:url('../images/bg_check.png') no-repeat 50% 50%;min-height:20px;vertical-align:middle;}
input[type=checkbox]:not(old):checked + em {background:url('../images/bg_check_on.png') no-repeat 50% 50%;}
input[type=radio]:not(old){width:20px;height:20px;margin:0;padding:0;opacity:0;}
input[type=radio]:not(old) + em {display:inline-block;margin-top:2px;margin-left:-20px;padding-left:20px;background:url('../images/bg_radio.png') no-repeat 50% 50%;min-height:20px;vertical-align:middle;}
input[type=radio]:not(old):checked + em {background:url('../images/bg_radio_on.png') no-repeat 50% 50%;}
.f-label{margin-top:2px;margin-right:10px;cursor:pointer;}

/* .content > .content_right > .login > form > .login_form > div.checkbox { display: block;line-height: 60px;height: 60px; }
.content > .content_right > .login > form > .login_form > div.checkbox > label { display:inline-block; }
.content > .content_right > .login > form > .login_form > div.checkbox > label > span { font-size: 16px;color: #fff; }
.content > .content_right > .login > form > .login_form > div.checkbox > label + label { margin-left:15px;}
.content > .content_right > .login > form > .login_form > div.checkbox > span.find { float:right;display:inline-block;line-height:60px;text-align:right;font-size:0px; }
.content > .content_right > .login > form > .login_form > div.checkbox > span.find > a { display:inline-block;padding:0px 0px;position: relative;line-height:40px;font-size:16px;vertical-align: middle;color: #fff; } */



.quick-link {margin-top: 10px; height:40px; }
.quick-link > div { display: block;float: right;width: 110px;height: 35px;border-radius: 20px;border: 1px solid #fff;font-size: 0;margin-top: 0px; }
.quick-link > div > a { display: inline-block;color: #fff;width: 100%;position: relative; height: 34px; line-height:1; font-size: 15px; text-decoration:none !important; text-align: center; padding-top: 9px;}
.quick-link > div > a + a::before { content: '';width: 1px;height: 12px;background: #fff;display: block;position: absolute;left: 0;top: 11px; }

.slide, .bx-wrapper, .bx-viewport,
.content,
.content > .content_left,
.content > .content_right{min-height:870px !important; box-sizing:Border-box;}

#certLogin {float:right;}
#certLogin::before{font-family: "Font Awesome 6 Free";content: "\f0a3";font-size:14px;font-weight:700;padding-right:5px;text-align:center;vertical-align:middle; line-height: 18px;}

.footer{background:#fff; position:relative; z-index:200;}
/* .footer_menu{border-bottom:1px solid #ccc;}
.footer_menu_inner{overflow:hidden; width:100%; box-sizing:Border-box; line-height:30px; padding:10px 60px; position:relative;}
.footer_menu_inner .footer_menu_innerL a{position:relative; display:inline-block; margin:0 10px; color:#666;}
.footer_menu_inner .footer_menu_innerL a:after{content:""; position:Absolute; top:5px;  right:-10px; display:inline-block; width:1px; height:10px; background:#666; }
.footer_menu_inner .footer_menu_innerL a:last-child:after{display:none;}
.footer_menu_inner .footer_menu_innerL a:first-child{margin-left:0; color:#446788; font-weight:bold;}

.footer_menu_inner a.link{ position:Absolute; display:block; height:30px; line-height:30px; border:1px solid #ccc; text-align:center; right:60px; top:5px; padding:0 20px;}
 */
.footer_copy{overflow:hidden; width:100%; box-sizing:Border-box; padding:40px 60px 40px;}
.footer_copy .flogo{float:left; margin-top:10px;}
.footer_copy .flogo img{width:100px; height:auto}

.footer_copy .copytxt{margin-left:160px;}
.footer_copy .copytxt p{padding:2px 0; color:#666; font-size:12px;}
.footer_copy .copytxt p span{position:relative; display:inline-block; margin:0 10px;}
.footer_copy .copytxt p span:after{content:""; position:Absolute; top:5px;  right:-10px; display:inline-block; width:1px; height:10px; background:#666; }
.footer_copy .copytxt p span:last-child:after{display:none;}
.footer_copy .copytxt p span:first-child{margin-left:0;}

.footer_family {position:absolute; right:40px; top:50px; z-index:5; width:185px; height:35px;color:#666; }
.footer_family .ft_family_site_cont{position:absolute; right:0; left:0; bottom:0; height:0px; border:1px solid #a5a5a5; padding-bottom:33px; z-index:1; overflow:hidden;}
.footer_family .ft_family_site_cont:after{width:20px; height:7px; content:''; background:url('../images/icon_linkboxarrow_up.png') 0 0 no-repeat; position:absolute; right:12px; top:13px;}
.footer_family.show .ft_family_site_cont:after,
.footer_family:hover .ft_family_site_cont:after{background-image:url("../images/icon_linkboxarrow_down.png")}
.footer_family.open {background:#ccc;}
.footer_family.open .ft_family_site_cont{background:#ccc;}
.footer_family.open ul{display:block;background:#fff;}
.footer_family .tit{position:absolute; left:9px; top:5px; font-size:14px; z-index:3;}
.footer_family ul{overflow:hidden; text-align:left; margin-bottom:33px;}
.footer_family li{position:relative; left:50px; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0;}
.footer_family li a{font-size:13px; display:block; padding:5px 10px; transition-duration:0.3s;}
.footer_family li a:hover{color:#333;font-weight:600; text-decoration:underline;}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 870px;
}

.responsive-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

.annc-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 24px;
}

.annc-date {
  width: 90px;
  text-align: right;
  flex-shrink: 0;
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {

	.content_right > .logo { margin-top: 30px; margin-bottom: 60px; }
  .content_right > .quick-menu { margin-top:20px;  }
	.content_left { width: calc(100% - 400px);float: left;background: transparent;position: relative;height: 100%; }
	.content_right { width: 400px; float:right; position:Relative;}

	.content_right > .login > hgroup,
	.content_right > .login > form > .login_form,
	.content_right > .quick-menu ul{padding:0 10px;}
	.slogan{padding: 95px 40px 0px 40px;min-width:800}
	.slogan > h2 {font-size: 45px; line-height: 50px;}
	.slogan > p {font-size:22px;}

  .main_btn {margin-top:10px;}



	.footer_menu_inner,
	.footer_copy{padding-left:40px; padding-right:40px;}
	.footer_menu_inner a.link {right:40px;}

	.content_right > .quick-menu{position:static;}
	.content_right > .quick-menu ul li{height:140px;}
	.content_right > .quick-menu ul li a{padding:15px;}


	/* .tnb{padding:30px 40px;} */
	.login > hgroup{margin-top:20px;}
  .login > hgroup > h3 {line-height:35px;}

	.content,
	.content > .content_left,
	.content > .content_right{min-height:750px !important; box-sizing:Border-box;}

}

@media screen and (min-width: 550px) and (max-width: 1199px) {
  .content_right > .logo { margin-top: 20px; margin-bottom: 40px; }
  .slogan {padding: 30px 20px 0px 40px;min-width:600px;}
  .slogan > h2 {font-size: 25px; line-height: 25px;letter-spacing: 0px;}
  .slogan > p {font-size:20px;}

  .login > hgroup > h3 {line-height:30px;}
	
}

@media (max-width: 1024px) {
  .image-side { display: none; }
  .login-side { flex: 1; padding: 20px 40px; height: 100vh; min-width: 550px; flex-shrink: 0;}
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
  .image-side {
    padding: 20px 40px;
  }
  .content-overlay h1 {
    font-size: 2.5rem;
  }
  .services {
    bottom: 60px;
    right: 0;
  }
  .main_btn {
    right: 40px;
  }
}