@charset "utf-8";
@import url("common.css");

/* Layout 
***************/
/* scrollbar,[scrollbar],[data-scrollbar]{display:block;position:relative;overflow:scroll}scrollbar .scroll-content,[scrollbar] .scroll-content,[data-scrollbar] .scroll-content{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:transform}scrollbar.scrolling .scroll-content,[scrollbar].scrolling .scroll-content,[data-scrollbar].scrolling .scroll-content{pointer-events:none}scrollbar.scrolling .scroll-content .scroll-content,[scrollbar].scrolling .scroll-content .scroll-content,[data-scrollbar].scrolling .scroll-content .scroll-content{pointer-events:auto}scrollbar .scrollbar-track,[scrollbar] .scrollbar-track,[data-scrollbar] .scrollbar-track{position:absolute;opacity:0;z-index:1;-webkit-transition:opacity .5s 1s ease-out,background .5s ease-out;transition:opacity .5s 1s ease-out,background .5s ease-out;background:0 0}scrollbar .scrollbar-track.show,[scrollbar] .scrollbar-track.show,[data-scrollbar] .scrollbar-track.show,scrollbar .scrollbar-track:hover,[scrollbar] .scrollbar-track:hover,[data-scrollbar] .scrollbar-track:hover{opacity:1;-webkit-transition-delay:0s;transition-delay:0s}scrollbar .scrollbar-track:hover,[scrollbar] .scrollbar-track:hover,[data-scrollbar] .scrollbar-track:hover{background:rgba(222,222,222,.75)}scrollbar .scrollbar-track-x,[scrollbar] .scrollbar-track-x,[data-scrollbar] .scrollbar-track-x{bottom:0;left:0;width:100%;height:8px}scrollbar .scrollbar-track-y,[scrollbar] .scrollbar-track-y,[data-scrollbar] .scrollbar-track-y{top:0;right:0;width:8px;height:100%}scrollbar .scrollbar-thumb,[scrollbar] .scrollbar-thumb,[data-scrollbar] .scrollbar-thumb{position:absolute;top:0;left:0;width:8px;height:8px;background:rgba(0,0,0,.5);border-radius:4px} */


/* locomotive-scroll v3.1.7 */
html.has-scroll-smooth {
  overflow-y: hidden;
}
html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.has-scroll-smooth body {
  overflow-y: hidden;
}
.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100vh;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}
.c-scrollbar:hover {
  transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-dragging .c-scrollbar,
.has-scroll-scrolling .c-scrollbar {
  opacity: 1;
}
.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #000;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}


.scroll_line {
  display: block;
  width: 2px;
  height: 13vh;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  opacity: 0;
}

/* 청약일정 타입 
*************************/
header .top_pop {
  display: flex; 
  margin-left: 50px; 
  padding-right: 50px;
  background: rgba(52,101,158,1);
  background: -moz-linear-gradient(top, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(52,101,158,1)), color-stop(58%, rgba(52,101,158,1)), color-stop(100%, rgba(76,89,159,1)));
  background: -webkit-linear-gradient(top, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  background: -o-linear-gradient(top, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  background: -ms-linear-gradient(top, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  background: linear-gradient(to bottom, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34659e', endColorstr='#4c599f', GradientType=0 );
  height: 100px;  
  border-bottom-left-radius: 26px;  
  align-items: center;
  /* margin-top: -100px; */
}
.top_pop .ico_cal {flex: none; display: inline-block; width: 100px; text-align: center;}
.top_pop .ico_cal i {color:#fff; font-size: 26px;}
.top_pop .inner {display: flex; background: #283c82; align-items: center; width: 100%;}
.top_pop .info {line-height: 1.5; padding: 0 25px; text-align: center;}
.top_pop .info dt {font-size: 19px; font-weight: 600; color: #fff;}
.top_pop .info dd {font-size: 15px; font-weight: 300; text-transform: uppercase; color: #fff; opacity: .5; letter-spacing: 1px;}
.top_pop .now_date {font-size: 18px; font-weight: 600; color: #a3d0ef; padding: 0 20px; line-height: 1.3; position: relative;}
.top_pop .now_date::before {
  content:"";
  width: 1px;
  height: 17px;
  position: absolute;
  left: 0;
  top: 15px;
  background: rgba(255,255,255,.3);  
}
.top_pop .now_date::after {
  content:"";
  width: 1px;
  height: 17px;
  position: absolute;
  right: 0;
  top: 15px;
  background: rgba(255,255,255,.3);  
}
.top_pop .now_date dt {letter-spacing: 6px;}
.top_pop .now_date dd {letter-spacing:1px;}
.top_pop .schedule {display: flex; width: 100%; padding: 0 20px; height:100px; align-items: center;}
.top_pop .schedule li {text-align: center; flex: 1; position: relative; padding: 0 20px; white-space: nowrap;}
.top_pop .schedule li::before {
  content: "";
  width: 10px;
  height: 13px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background:url(../img/top_arrow.png) no-repeat;
}
.top_pop .schedule li:first-child::before {display:none;}
.top_pop .schedule li dl {}
.top_pop .schedule li dl dt {color:#fff; font-size: 15px;}
.top_pop .schedule li dl dd {color:#fff7a3; font-size: 24px; font-weight: 600;}
.top_pop .grandopen {flex: none; color:#fff; font-size: 16px; text-align: center; padding: 0 40px; line-height: 1.3;}
.top_pop .grandopen strong {color:#fff; font-size: 24px; display: block; font-weight: 500;}
.top_pop .close {margin-left: auto; display: inline-block;}
.top_pop .close i {color: #fff; display: inline-block; background:#162b73; width: 40px; text-align: center; border-radius: 50px; height: 40px; font-size: 24px; padding-top: 7px;}


/*
  배너타입
*******************************/
header .top_banner {display: flex; height: 90px; align-items: center; background:#e5f0ff url(../img/top_banner_bg.jpg) repeat-x center top; justify-content: center;}
header .top_banner .inner {display: inline-block; min-width:1200px; position: relative;}
header .top_banner .inner .circle_btn {position: absolute; right: -120px; top: -85px;}
header .top_banner .inner .circle_btn a {
  display: block; 
  width: 123px; 
  height: 123px; 
  border-radius: 123px; 
  background:#273b7f; 
  color: #fff; 
  text-align: center; 
  padding-top: 70px; 
  font-size:14px;
  letter-spacing: 2px;
  font-weight: 600;
}
header .top_banner .close_banner {position: absolute; right: -200px; top: 0;}

header .top_banner .inner .circle_btn a strong {display: block;}
header .top_banner .inner .circle_btn a i {display: inline-block; padding-top: 3px;}
header .top_banner ul {display: flex; align-items: flex-end; width: 100%;}
header .top_banner ul li {text-align: center; flex: auto; white-space: nowrap;}
header .top_banner ul li a {display: block;}

.top_layer {position: fixed; top: -710px; left: 0; right: 0; height: 710px; width: 100%; background:#f0f5fc; width: 100%; align-items: center; z-index: 99; display: flex; justify-content: center;}
.top_layer .inner {min-width:1600px; position: relative; display: inline-block;}
.top_layer .inner ul {display:block; text-align:center; /*display: flex; align-items: center;*/ width: 100%; white-space: nowrap;}
.top_layer .inner ul li {display:inline-block; text-align: center; /*flex: auto;*/ white-space: nowrap; position: relative;}
.top_layer .inner ul li a {display: block;}
.top_layer .inner ul li img {display:inline-block;}
.top_layer .inner .circle_btn {position: absolute; right: 0; bottom: -125px; display: none;}
.top_layer .inner .circle_btn a {
  display: block; 
  width: 123px; 
  height: 123px; 
  border-radius: 123px; 
  background:#f0f5fc; 
  color: #001041; 
  text-align: center; 
  padding-top: 70px; 
  font-size:15px;
  letter-spacing: 2px;
  font-weight: 700;
}
.top_layer .inner .circle_btn a strong {display: block;}
.top_layer .inner .circle_btn a i {display: inline-block; padding-top: 3px;}


#wrap {position: relative; min-width: 1380px; margin: 0 auto; line-height: 1.5;}
header {z-index: 300; width: 100%; position: absolute; left: 0; top: 0; right: 0; overflow: hidden; z-index:90; transition: 0.3s ease top;}
header .header_con {zoom: 1; position: relative; min-width: 1380px; margin:0 auto; text-align: left; z-index: 201; padding: 0 50px; display: flex;}
header .header_con h1 {flex:none;}
header .header_con h1 a {display: block; margin-top: 50px; width: 381px; height: 31px; background: url(../img/top_logo.png) no-repeat center center; font-size: 0; color: transparent;}


header .header_con .gnb {display: flex; flex-direction: row; justify-content: center; flex: 1;}
header .header_con .gnb_depth_1 {display: flex;}
header .header_con .gnb_depth_1>li {position: relative;}
header .header_con .gnb_depth_1>li:first-child::before {background:none;}
header .header_con .gnb_depth_1>li>a {    
    display: block;
    color: #001041;
    font-size: 18px;
    text-align: left;
    padding: 38px 20px 0;
    letter-spacing: 0.5px;    
    height: 120px;
    font-weight: 500;   
    white-space: nowrap; 
}
header .header_con .gnb_depth_1>li>a strong { display: inline-block; position: relative; letter-spacing: -1px; border-radius: 40px; padding: 10px 25px;}
header .header_con .gnb_depth_1>li>a.on strong {background: #273d6b; color: #fff;}
header .header_con .gnb_depth_1>li.on>a strong {background: #273d6b; color: #fff;}
header .header_con .gnb_depth_2 {position: absolute; top:150px; padding: 0 18px; text-align: left; white-space: nowrap; display: none; /*padding-left: 65px;*/ z-index: 29;}
header .header_con .gnb_depth_1>li:nth-of-type(1) .gnb_depth_2 { padding: 0 0 0 22px; }
header .header_con .gnb_depth_1>li:nth-of-type(2) .gnb_depth_2 { padding: 0 0 0 22px; }
header .header_con .gnb_depth_1>li:nth-of-type(3) .gnb_depth_2 { padding: 0 0 0 35px; }
header .header_con .gnb_depth_1>li:nth-of-type(4) .gnb_depth_2 { padding: 0 0 0 22px; }
header .header_con .gnb_depth_1>li:nth-of-type(5) .gnb_depth_2 { padding: 0 0 0 28px; }
header .header_con .gnb_depth_1>li:nth-of-type(6) .gnb_depth_2 { padding: 0 0 0 28px; }
header .header_con .gnb_depth_2 li {text-align: left;}
header .header_con .gnb_depth_2 li a {display: inline-block; padding: 12px 20px 8px; color: #fff; position: relative;white-space: nowrap; font-size: 15px; font-weight: 300;}
header .header_con .gnb_depth_2 li a.current, header .header_con .gnb_depth_2 li a:hover {color: #019be2;}
header .header_con .gnb_depth_2 li a.current:after, header .header_con .gnb_depth_2 li a:hover:after {}
header .header_con .gnb_depth_1.white .gnb_depth_2 li a:hover {color: #fff; opacity: 1;}

header .header_con .header_util {white-space: nowrap; margin-left: auto; padding-top: 40px;}
header .header_con .header_util a.btn_sns {display: inline-block; vertical-align: middle; margin-left: 40px;}
header .header_con .header_util span {display: inline-block; vertical-align: middle; margin-left: 20px; font-size: 30px; font-weight: 700; color: #283c82;}

header.bgon {background: #fff;}
header.bgon::before {content: ""; width: 100%; height: 1px; position: absolute; top: 102px; left: 0; right: 0; background:rgba(0,0,0,.2);}
header.bgon .header_con h1 a {background:url(../img/top_logo_blue.png) no-repeat;}
header.bgon .header_con .gnb_depth_1>li>a {color: #22356c;}
header.bgon .header_con .header_util ul li a {color: #22356c; border: 1px solid #c9dbed;}
header.bgon .header_con .header_util .right_fn::before {background: #e6e8eb;}
header.bgon .header_con .header_util .right_fn a.search_sales {border:1px solid #c9dbed;}
header.bgon .header_con .header_util .right_fn a.top_login .ico-img.ico-login:after {background-position: 0 -26px;}

header.header_etc.bgon {background: #fff !important;}


/* sub Header 
*******************/
.sub_wrap header .header_con .gnb_depth_1>li>a {color: #fff;}
.sub_wrap header .header_con .header_util span {color: #fff;}
.sub_wrap header .header_con h1 a {background-image: url(../img/top_logo_wh.png);}

header.hover {background: #fff;}
header.hover .header_con h1 a {background-image: url(../img/top_logo.png);}
header.hover .header_con .gnb_depth_1>li>a {color: #22356c;}
header.hover .header_con .header_util span {color: #22356c;}

.img_con {position:relative;}

#navbg { 
  position: absolute; 
  width: 100%; 
  background:#001041; 
  height: 372px;
  /*height: 0;*/
  z-index: 26;
  display: none;
  overflow: hidden;
  right: 0;
  transform: translateY(130px);
}
#navbg .bgtxt {position: absolute; top: 45px; color: #fff; margin-left: 180px; text-align: right; white-space: nowrap; width: 560px; z-index:28; right: 50px;}
#navbg .bgtxt dt {font-size: 18px; font-weight: 100; position: relative; z-index:29;}
#navbg .bgtxt dd {font-size: 45px; font-weight: 600; letter-spacing: -2px; position: relative; z-index:29;}
#navbg .bgtxt::before {
  content: "";
  width: 549px;
  height: 117px;
  background: url(../img/gnb_logo.png) no-repeat;
  position: absolute;
  z-index: 27;  
  margin-top: 75px; 
  right: 0;
}

#goTop {position: absolute; right: 60px; bottom: 30px; z-index:30;}
#goTop.on {position: fixed;}
#goTop.stop {position: absolute !important;}

#goTop a {    
  width: 60px;
  height: 60px;
  border-radius: 60px;
  text-align: center;
  transition: all .3s;
  z-index: 20;
  background: #c9dbed; 
  color: #001041; 
  font-weight: 600;
  display: inline-block;
  padding-top: 12px;
}
#goTop a i {display: block; font-size: 12px;}


/* Main
***************/
.layout_main {position: relative; padding-top: 230px;}

.layout_main .visual_sec .banner_con {position: absolute; left: 0; width: 389px; height: 842px; background: url(../img/main/left_banner_bg.png) no-repeat 0 0;}
.banner_con .opencyber {position: absolute; right: -17px; top: 17%; display: inline-block; z-index: 55;}
.banner_con .opencyber i {
  display: inline-block; 
  color: #fff; 
  font-size: 20px; 
  border-radius: 50px; 
  width: 50px; 
  background:#8392ba; 
  height: 50px; 
  text-align: center; 
  padding-top: 15px; 
  padding-right: 5px;
  transition: all .3s;
}
.banner_con .opencyber.open i {transform: rotate(180deg); padding-right: 0; padding-left: 12px; color:#494949; background:#fff;}

.banner_con .cyber_banner {height: 378px; position: relative; width: 100%;}
.banner_con .cyber_banner .chair {position: absolute; left: 150px; top: 105px; z-index: 51;}
.banner_con .cyber_banner .open_label {position: absolute; right: 35px; top: 18px; color: #fff; line-height: 1.2; border-bottom: 2px solid #ddd; padding-bottom: 5px;}
.banner_con .cyber_banner .open_label dt {font-size: 28px; font-weight: 600;}
.banner_con .cyber_banner .open_label dd {font-size: 20px; font-weight: 300;}
.banner_con .cyber_banner p {position: absolute; left: 55px; top: 82px; font-size: 36px; color:#fff; line-height: 1.3;}
.banner_con .cyber_banner p strong {font-weight: 100; display: inline-block;}
.banner_con .cyber_banner p span {font-weight: 600; display: block; position: relative;}
.banner_con .cyber_banner p span em {position: relative; z-index: 2;}
.banner_con .cyber_banner p span.line::before {
  content:"";
  height:23px;
  background:#003675;
  position: absolute;
  bottom: 0;
  left: -10px;
  right: -10px;
  z-index: 1;
}
.banner_con .sales_banner {padding: 60px 0 0 50px; position: absolute; left: 0; bottom: 0; /* width: 751px; */ width: 390px; height: 462px;  background: url(../img/main/left_banner_btm.png) no-repeat right 0; z-index: 60; overflow: hidden;}
.banner_con .sales_banner p.tit {color: #162b73; font-weight:600; font-size: 36px; letter-spacing: -1px; line-height: 1.2; padding-left: 20px; padding-bottom: 40px;}
.banner_con .sales_banner ul.icon_type {display: flex; padding:15px 20px; position: relative; padding-right: 0; width: 751px;}
.banner_con .sales_banner ul.icon_type li {flex:1; position: relative; z-index: 2;}
.banner_con .sales_banner ul.icon_type li i {width: 69px; height: 69px; background: url(../img/main/sales_ico.png) no-repeat; display: block; margin-bottom: 10px; transition: all .3s ease-in-out;}
.banner_con .sales_banner ul.icon_type li a {display: block; text-align: center; width: 69px; line-height: 1.2;}
.banner_con .sales_banner ul.icon_type li i.sales-ico-1 {background-position: 0 0;}
.banner_con .sales_banner ul.icon_type li i.sales-ico-2 {background-position: -73px 0;}
.banner_con .sales_banner ul.icon_type li i.sales-ico-3 {background-position: -146px 0;}
.banner_con .sales_banner ul.icon_type li i.sales-ico-4 {background-position: -219px 0;}
.banner_con .sales_banner ul.icon_type li i.sales-ico-5 {background-position: -292px 0;}
.banner_con .sales_banner ul.icon_type li i.sales-ico-6 {background-position: -365px 0;}
.banner_con .sales_banner ul.icon_type li i.sales-ico-7 {background-position: -438px 0;}
.banner_con .sales_banner ul.icon_type li a:hover {color:#283c82;}
.banner_con .sales_banner ul.icon_type li a:hover i {background-position-y:-70px !important;}
.banner_con .sales_banner ul.icon_type::before {
  content:"";
  height:1px;
  background:#cfd8e1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  top: 54px;
}
.banner_con .sales_banner .quick_txt {color: #162b73; font-weight:100; font-size: 26px; letter-spacing: 6px; position: absolute; right: 70px; top:100px; opacity: 0;}
.banner_con .sales_banner ul.banner_type {display: flex; padding:15px 20px; position: relative; padding-right: 0; width: 830px;}
.banner_con .sales_banner ul.banner_type li {flex:1; position: relative; z-index: 2;}
.banner_con .sales_banner ul.banner_type li a {display: block; text-align: center; position: relative; overflow: hidden; border-radius: 20px; width: 200px; height: 240px;}
.banner_con .sales_banner ul.banner_type li a .thumb {}
.banner_con .sales_banner ul.banner_type li a .txt {
  background: #09193e; 
  position: absolute; 
  bottom:0; 
  left: 0; 
  width: 100%; 
  height: 70px; 
  display: flex; 
  justify-content: center; 
  flex-direction: column; 
  color: #fff; 
  z-index: 10;
  font-weight: 400;
  font-size: 17px;
}
.banner_con .sales_banner ul.banner_type li:nth-child(even) a .txt {background:#162b73;}
.layout_main .visual_sec {height:881px; position: relative; overflow: hidden; padding-left: 440px;}
.layout_main .visual_con {border-bottom-left-radius:40px; border-top-left-radius: 40px; overflow: hidden; position: relative;}
.layout_main .visual_con .slide {}
.layout_main .visual_con .slide li {height:840px; position: relative;}
.layout_main .visual_con .slide li .inner {position: relative; overflow: hidden; width: 100%; height: 100%;}
/* .layout_main .main_visual .bg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,4,17,0.8);
  background: -moz-linear-gradient(top, rgba(0,4,17,0.8) 0%, rgba(0,4,17,0) 26%, rgba(0,4,17,0) 77%, rgba(0,4,17,0.8) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,4,17,0.8)), color-stop(26%, rgba(0,4,17,0)), color-stop(77%, rgba(0,4,17,0)), color-stop(100%, rgba(0,4,17,0.8)));
  background: -webkit-linear-gradient(top, rgba(0,4,17,0.8) 0%, rgba(0,4,17,0) 26%, rgba(0,4,17,0) 77%, rgba(0,4,17,0.8) 100%);
  background: -o-linear-gradient(top, rgba(0,4,17,0.8) 0%, rgba(0,4,17,0) 26%, rgba(0,4,17,0) 77%, rgba(0,4,17,0.8) 100%);
  background: -ms-linear-gradient(top, rgba(0,4,17,0.8) 0%, rgba(0,4,17,0) 26%, rgba(0,4,17,0) 77%, rgba(0,4,17,0.8) 100%);
  background: linear-gradient(to bottom, rgba(0,4,17,0.8) 0%, rgba(0,4,17,0) 26%, rgba(0,4,17,0) 77%, rgba(0,4,17,0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000411', endColorstr='#000411', GradientType=0 );
} */
@-webkit-keyframes trackBallSlide{ 
  0%{ opacity:1;  -webkit-transform:scaleY(1) translateY(-10px);  transform:scaleY(1) translateY(-10px)} 
 45%{ opacity:0;  -webkit-transform:scaleY(0.5) translateY(13px);  transform:scaleY(0.5) translateY(13px)}
 46%{ opacity:0;  -webkit-transform:scaleY(1) translateY(-10px);  transform:scaleY(1) translateY(-10px)}
 65%, 100%{ opacity:1;  -webkit-transform:scaleY(1) translateY(-10px);  transform:scaleY(1) translateY(-10px)}
}
@keyframes trackBallSlide{ 
  0%{opacity:1;  -webkit-transform:scaleY(1) translateY(-10px);  transform:scaleY(1) translateY(-10px)} 
 45%{ opacity:0;  -webkit-transform:scaleY(0.5) translateY(13px);  transform:scaleY(0.5) translateY(13px)}
 46%{ opacity:0;  -webkit-transform:scaleY(1) translateY(-10px);  transform:scaleY(1) translateY(-10px)}
 65%, 100%{ opacity:1;  -webkit-transform:scaleY(1) translateY(-10px);  transform:scaleY(1) translateY(-10px)}
}
@keyframes nudgeMouse{ 
  0%{ -webkit-transform:translateY(0);  transform:translateY(0)}
 45%{ -webkit-transform:translateY(8px);  transform:translateY(8px)}
 65%, 100%{ -webkit-transform:translateY(0);  transform:translateY(0)}
}
@-webkit-keyframes nudgeMouse{ 
  0%{ -webkit-transform:translateY(0); transform:translateY(0)}
 45%{ -webkit-transform:translateY(8px);  transform:translateY(8px)}
 65%, 100%{ -webkit-transform:translateY(0);  transform:translateY(0)}
}

.mouse_ico {
    display: inline-block;   
    color: #fff !important;    
    text-align: center;
    border-radius: 100px;    
    -webkit-border-radius: 100px;
    transition: opacity 0.4s ease;
    -webkit-transition: opacity 0.4s ease;
    overflow: hidden;    
    opacity: 0.6;    
    overflow: visible;
    opacity: 1;
    height: auto;
    bottom: 0;
    -webkit-animation: nudgeMouse 2.4s cubic-bezier(0.250,0.460,0.450,0.940) infinite;
    animation: nudgeMouse 2.4s cubic-bezier(0.250,0.460,0.450,0.940) infinite;
    width: 20px; 
    margin-top: 20px;   
}

.mouse_ico::before{ 
    position: absolute;
    content: '';
    display: block;
    left: 50%;
    margin-left: -1px;
    top: 16px;
    background-color: rgba(255,255,255,0.7);
    width: 2px;
    height: 6px;
    border-radius: 10px;
    transition: background-color .55s cubic-bezier(.5,.1,.07,1);
    -webkit-animation: trackBallSlide 2.4s cubic-bezier(0.000,0.000,0.725,1.000) infinite;
    animation: trackBallSlide 2.4s cubic-bezier(0.000,0.000,0.725,1.000) infinite;
}

.layout_main .visual_con .slide li .bg {position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-size: cover;}
.layout_main .visual_con .txt {
  position: absolute;
  top:0;
  left:0; 
  bottom: 0; 
  height: 100%;
  z-index: 30;
  overflow: hidden;
  width: 100%;  
  text-align: left;
  line-height: 1.4;
  color: #fff;
  display: flex;  
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.layout_main .visual_con .txt_1 {justify-content: flex-start; padding-top: 70px; letter-spacing: -2px;}
.layout_main .visual_con .txt_1 p {font-size: 60px; padding-left: 8px; padding:0 80px; font-weight: 100; display: block; text-align: left;}
.layout_main .visual_con .txt_1 strong {font-weight: 600;}

.layout_main .visual_con .func {position: absolute; left:0; bottom: 0; right: 0; background: #283c82; display: flex; z-index: 40; height: 80px; border-top-left-radius:40px;}
.layout_main .visual_con .func .mouse {width: 80px; text-align: center;}
.layout_main .visual_con .pager {display:flex; flex:1; height: 80px; background:#09193e; border-top-left-radius:40px; border-top-right-radius:40px; padding: 0 40px;}
.layout_main .visual_con .pager li {flex:1; padding: 0 13px; position: relative; white-space: nowrap; text-align: center;}
.layout_main .visual_con .pager li a {display:block; color: #fff; opacity: .5; font-size: 15px; text-transform: uppercase; padding-bottom: 10px; padding-top: 30px; height: 80px;}
.layout_main .visual_con .pager li a.on {opacity: 1;}
.layout_main .visual_con .pager li a strong {display: inline-block; margin-right: 10px;}
.layout_main .visual_con .pager li a i {position: absolute; left: 0; bottom: 0; background:rgba(255,255,255,1); z-index: 41; height: 2px; width:0;}
.layout_main .visual_con .pager li a::before {
  content: "";
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background:rgba(255,255,255,.4); 
  z-index: 40; 
  height: 2px;
}
.layout_main .visual_con .pager li a.on::before {background:rgba(255,255,255,.5);}
.layout_main .visual_con .control {margin-left:auto;  display:flex; width: 180px; align-items:center; justify-content: center;}
.layout_main .visual_con .control a { display: inline-block; padding: 10px 12px;}
.layout_main .visual_con .control i {font-size: 16px; color: #fff; display: inline-block; vertical-align: middle;}
.layout_main .visual_con .control .pause_ico {margin-left: 10px; opacity: .5;}
.layout_main .visual_con .control .pause_ico i {position: relative; display: inline-block; width: 8px;}
.layout_main .visual_con .control .pause_ico i::before {
  content: "";
  width: 2px;
  height: 10px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: -4px;
}
.layout_main .visual_con .control .pause_ico i::after {
  content: "";
  width: 2px;
  height: 10px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -4px;
}
.layout_main .visual_con .control .pause_ico.paused {opacity: 1;}
.main_contents {overflow:hidden;}
/* .main_contents .premium {padding:100px;}
.main_contents .premium ul {display:flex; justify-content: space-between;}
.main_contents .premium ul li {width: 300px; text-align: center;}
.main_contents .premium ul li .boxico {display: inline-block; width: 150px; height: 150px; transform:rotate(45deg); transform-origin: 50% 50%; background: #e5ebff; border-radius: 30px; position: relative;}
.main_contents .premium ul li .boxico i {display: inline-block; transform:rotate(-45deg); transform-origin: 50% 50%; position: absolute; left:50px; top: 55px;}
.main_contents .premium ul li:nth-child(1) .boxico i {left: 50px;top: 45px;}
.main_contents .premium ul li:nth-child(2) .boxico i {left: 45px;top: 45px;}
.main_contents .premium ul li:nth-child(3) .boxico i {left: 40px;top: 45px;}
.main_contents .premium ul li:nth-child(4) .boxico i {left: 50px;top: 45px;}
.main_contents .premium ul li dl {color:#001041; padding: 30px 0;}
.main_contents .premium ul li dl dt {font-size: 26px; text-transform: uppercase; font-weight: 700;}
.main_contents .premium ul li dl dd {font-size: 15px; padding-top: 10px; line-height: 1.6; font-weight: 400;}
.main_contents .premium ul li:nth-child(even) .boxico {background: #eff3ff;} */

.main_contents .premium {padding:100px;}
.main_contents .premium ul {display:flex; justify-content: space-between;}
.main_contents .premium ul li {width: 300px; text-align: center;}
.main_contents .premium ul li .boxico {
  display: inline-block;
  position: relative;
  width: 150px; 
  height: 150px;
}
.main_contents .premium ul li .boxico:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 150px; 
  height: 150px; 
  transform:rotate(45deg); 
  transform-origin: 50% 50%; 
  background: #e5ebff; 
  border-radius: 30px; 
}
.main_contents .premium ul li .boxico i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 72px;
  height: 72px;
  z-index: 99;
}
.main_contents .premium ul li dl {color:#001041; padding: 30px 0;}
.main_contents .premium ul li dl dt {font-size: 26px; font-weight: 700; }
.main_contents .premium ul li dl dt span { font-weight: 500; }
.main_contents .premium ul li dl dt strong { font-weight: 700; }
.main_contents .premium ul li dl dd {font-size: 16px; padding-top: 10px; line-height: 1.6; font-weight: 500;}
.main_contents .premium ul li dl dd .sm {font-size:13px!important;}


.main_contents .design {padding: 0 50px 140px; border-top: 1px solid #e5e7ec; border-bottom: 1px solid #e5e7ec; position: relative;}
.main_contents .design .interior_slide {position: relative;}
.main_contents .design .interior_slide .slider li {margin-right: 100px;}
.main_contents .design .interior_slide .tit {text-align: right; padding-right: 100px; position: relative; z-index: 50;}
.main_contents .design .interior_slide .slide_thumb {width:1284px; display: flex; justify-content: flex-end; padding: 0 0 50px;}
.main_contents .design .interior_slide .slide_thumb li {margin-left: 20px;}
.main_contents .design .interior_slide .slide_thumb li a span {display: flex; flex-direction: column; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 20; color: #fff; font-size: 20px; text-align: center; justify-content: center; font-size: 18px; font-weight: 600;}
.main_contents .design .interior_slide .slide_thumb li a {position: relative; display:block;}
.main_contents .design .interior_slide .slide_thumb li a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border:10px solid transparent;
  background: rgba(0,0,0,.2);
}
.main_contents .design .interior_slide .slide_thumb li.on a::before {border-color: #c6d8eb;}
.main_contents .design .interior_slide .slide_type {position: absolute; left:1310px; bottom:150px; z-index: 71;}
.main_contents .design .interior_slide .slide_type li {position: relative; padding-right: 120px;}
.main_contents .design .interior_slide .slide_type li a {font-size: 20px; color: #7d7d7d; position: relative; padding-left: 15px;}
.main_contents .design .interior_slide .slide_type li a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background:transparent;
  position: absolute;
  left: 0;
  top: 11px;
}
.main_contents .design .interior_slide .slide_type li.on a::before {background:#c9dbed;}
.main_contents .design .interior_slide .slide_type li a strong {font-weight: 600;}
.main_contents .design .interior_slide .slide_type li.on a {color: #162b73;}
.main_contents .design .interior_slide .slide_type li i {position: absolute; left:120px; top: 50%; width: 40px; background: #222; height: 1px; opacity: .5;}
.main_contents .design .interior_slide .slide_type li.on i {width: 130px; opacity:1;}
.main_contents .design .interior_slide .slide_control {position: absolute; left:1450px; bottom:38px; z-index: 71;}
.main_contents .design .interior_slide .slide_control a {width:48px; height: 48px; display: inline-block; border-radius: 48px; background: #c9dbed; text-align: center; margin-right: 10px;}
.main_contents .design .interior_slide .slide_control i {color: #fff; font-size: 20px; padding-top: 13px; display: inline-block;}
.main_contents .design .interior_slide .slide_control a.on {background: #162b73;}

.main_contents .design .slide_info {display: flex; margin: 0 0 140px; /* transform: translateY(-80px); padding-left:430px; margin-top: 50px;*/}
.main_contents .design .slide_info dl {display: table; table-layout: fixed;}
.main_contents .design .slide_info dl dt {display: table-cell; font-size: 18px; vertical-align: top; line-height: 1; letter-spacing: 2px; text-align: center; color: #001041;}
.main_contents .design .slide_info dl dt strong {font-family: "Exo 2"; display: block; color: #7a244b; font-size:65px;  font-weight: 700; letter-spacing: 0;}
.main_contents .design .slide_info dl dd {color: #9498a7; display: table-cell; vertical-align: top; padding-left:20px; font-size: 18px; text-transform: uppercase;}
.main_contents .design .slide_info dl dd.infotit {color: #001041; font-size: 34px; font-weight: 600; letter-spacing: -1px; line-height: 1.3;}
.main_contents .design .slide_info.info_2 dl dt strong {color:#7a244b;}
.main_contents .design .slide_info.info_3 dl dt strong {color:#273d6b;}


.main_contents .design .interior_slide .slider {position: relative; z-index: 40;}
.main_contents .design .bgbox {width:360px; height: 360px; position: absolute; top: 268px; left: 330px; background:#f7f9fc;}
.main_contents .design .bgbox.box2 {top: 419px; left: 50px; background:#e6edf7;}

.main_contents .design .interior_txt {font-size:100px; font-weight:600; letter-spacing: -2px; line-height: 1.2; text-align: left;}
.main_contents .design .interior_txt dt {color:#7a244b;}
.main_contents .design .interior_txt dt em {font-size: 18px; color:#8a8a93; display: inline-block; vertical-align: top; padding-top: 15px;  font-weight: 600; letter-spacing: 0;}
.main_contents .design .interior_txt dd {color:#8a8a93;}
.main_contents .design .inter_txt1::before {
  /* content: "";
  width: 1px;
  height: 190px;
  background:#e5e5e5;
  position: absolute;
  left: 50%;
  top: -10px; */
}
.main_contents .design .inter_txt1 {display: flex; flex-direction: column; position: relative; margin-top:50px;}
.main_contents .design .inter_txt1 dt {color:#837568; text-transform: uppercase;}
.main_contents .design .inter_txt1 dd {}
.main_contents .design .inter_txt2 {font-size:86px; line-height:1;}
.main_contents .design .inter_txt2 dt {color:#416138;}
.main_contents .design .inter_txt3 {font-size:86px; line-height:1;}
.main_contents .design .inter_txt3 dt {color:#416138;}
.main_contents .design .inter_txt4 dt {color:#001140;}

.main_contents .design .slide_content {position: relative; display: none;}
.main_contents .design .slide_content .indicator {position: absolute; left: 995px; /*margin-left: -500px;*/ top: 0; display: flex; top:-30px; padding: 0 30px; align-items: center; z-index: 80;}
.main_contents .design .slide_content .in_pager {font-size: 16px; width: 200px; display: flex; justify-content: space-around; align-items: center;}
.main_contents .design .slide_content .in_pager strong {color:#333; font-weight: 600; display: inline-block;}
.main_contents .design .slide_content .in_pager em {display:inline-block; height: 1px; width: 100px; background: #ddd;}
.main_contents .design .slide_content .in_pager em i {position: absolute;  height: 1px; width: 25px; background: #283c82;}
.main_contents .design .slide_content .control {display: inline-block; margin-left: 60px;}
.main_contents .design .slide_content .control a {display: inline-block; padding: 0 10px; color: #000;}

.main_contents .design .slide_content_84 .inter_txt1 dt {color:#b35a33;}
.main_contents .design .slide_content_84 .inter_txt2 dt {color:#001140;}
.main_contents .design .slide_content_84 .inter_txt3 dt {color:#837568;}
.main_contents .design .slide_content_84 .inter_txt4 dt {color:#416138;}

.main_contents .design .other_con {/*display: flex; justify-content: space-between;*/ padding-top: 60px;}
.main_contents .design .other_con .item {}
.main_contents .design .other_con .item.item_1 {padding-top: 100px;}
.main_contents .design .other_con .item .img {padding-bottom: 50px;}
.main_contents .design .other_con .item .img img {max-width: 100%;}

.main_contents .brand {width:1380px; margin:0 auto; padding: 150px 0;}
.main_contents .brand .inner {width: 100%; display: table; table-layout: fixed;}
.main_contents .brand .inner .left_sec {display: table-cell;  vertical-align: middle;}
.main_contents .brand .inner .left_sec dl {color: #001140;}
.main_contents .brand .inner .left_sec dl dt {font-size: 68px; font-weight: 700; letter-spacing: -3px; line-height: 1.18; padding-bottom: 20px;}
.main_contents .brand .inner .left_sec dl dd {font-size: 16px; font-weight: 300; padding: 10px 0 10px 6px;}
.main_contents .brand .inner .left_sec dl dd strong {display: block; font-weight: 700; font-size: 20px; letter-spacing: -0.5px; padding-bottom: 10px;}

.main_contents .brand .video_box {position:relative; display: table-cell; width: 746px; vertical-align: middle;}
.main_contents .brand .video_box button {    
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50.1%, -50.1%); 
  z-index:60;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  display: inline-block;
  width: 80px;
  height: 83px;
}
.main_contents .brand .video_box button::before {
  content: "";
  display: inline-block;  
  width: 80px;
  height: 83px;
  background:url(../img/main/mov_play.png) no-repeat 0 0;  
}
.main_contents .brand .video_box video {width: 746px; height: 470px;}
.main_contents .brand .sharp_logo { width: 164px; height: 165px; position: absolute; right:-80px; top: -80px; z-index: 61;}
.main_contents .brand .sharp_logo i { position: absolute; left: 50%; top: 50%; transform:translate(-50.1%, -50.1%);}
.main_contents .brand .sharp_logo::before {
  content: "";
  width: 164px;
  height: 165px;
  position: absolute;  
  background: url(../img/main/thesharp_circle.png) no-repeat;
  animation: rotateLogo 20s linear infinite;
}

@keyframes rotateLogo {
  0%{
  transform: rotate(0);
  -webkit-transform: rotate(0);
  }
  100% {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  }
}





footer {background: #001140; clear: both; padding: 30px 50px; position:relative;}
footer .footer_menu {overflow: hidden; padding-bottom: 40px; width: 1380px; margin:0 auto; display: flex;}
footer nav {font-weight: 300; justify-content: space-around;}
footer nav.f_menu_1 {}
footer nav.f_menu_2 {}
footer nav.f_menu_3 {text-align: right; margin-left: auto; flex: none;}

footer nav.f_menu_1 > ul {display: table; table-layout: fixed; width: 100%;}
footer nav.f_menu_1 > ul > li {width: 25%; display: table-cell; text-align: left;}
footer nav.f_menu_1 > ul > li a {display: block; font-size: 17px; color: #fff; padding: 8px 0;}
footer nav.f_menu_1 > ul > li > ul {margin-top: 10px;}
footer nav.f_menu_1 > ul > li > ul > li > a {display: block; font-size: 15px; color: #fff; opacity: .5; padding: 5px 0; font-weight: 100; transition: all .3s;}
footer nav.f_menu_1 > ul > li > ul > li > a:hover {color:#6ad2f8; opacity: 1;}
footer nav .f_mymenu {padding-top: 5px;}
footer nav .f_mymenu > li > a {display: block; font-size: 15px; color: #fff; opacity: .7; padding: 5px 0; transition: all .3s;}
footer nav .f_mymenu > li > a:hover {color:#6ad2f8; opacity: 1;}
footer nav .f_direct {padding-top: 5px;}
footer nav .f_direct > li > a {display: block; font-size: 15px; color: #fff; opacity: .7; padding: 5px 0; transition: all .3s;}
footer nav .f_direct > li > a:hover {color:#6ad2f8; opacity: 1;}
footer nav .f_direct > li > a i {vertical-align: middle; margin-left: 10px;}

footer .footer_info {border-top: 1px solid #12224d; padding: 40px 200px 0 135px; position:relative; min-width: 1380px; margin:0 auto;}
footer .footer_info .logo {position: absolute; left: 0; top: 45px;}
footer .footer_info .address { border-left:1px solid #12224d; padding: 0 50px;}
footer .footer_info .address p {color: #fff; opacity: .7; font-size: 14px; font-weight: 100; padding-bottom: 5px;}
footer .footer_info .address span {display: inline-block; padding-right:15px; margin-right: 12px; position:relative;}
footer .footer_info .address span::before {content: ""; width: 1px; height: 11px; position: absolute; right: 0; top: 5px; background:rgba(255,255,255,.2);}
footer .footer_info .address span:last-child::before {background: none;}
footer .footer_info .copyright {color: #fff; opacity: .3; font-size: 14px; font-weight: 100;}
footer .footer_info .sns_link {padding-top: 25px;}
footer .footer_info .sns_link li {display: inline-block; padding-right: 20px;}
footer .footer_info .sns_link li a {display: block;}
footer .footer_etc {position: absolute; right: 0; top: 35px;}
footer .footer_etc li a {display: block; font-size: 14px; color: #fff; padding: 5px 0; text-align: right; opacity: .5; transition: all .3s;}
footer .footer_etc li a:hover {color:#6ad2f8; opacity: 1;}
footer .ico-direct-go {background: url(../img/ico_direct.png) no-repeat 0 0; width: 14px; height: 14px; display: inline-block; margin-top: -3px;}


.cyber {position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 99; padding-right: 50px; opacity: 0;}
.cyber .cyber_con {background: #001041; border-top-right-radius: 35px; border-bottom-right-radius: 35px; position: relative; height: 1090px;}
.cyber .cyber_con .bg {position: absolute; left: 0; top: 0; right: 0; bottom:0; background-size: cover; background: url(/resources/img/cyber_bg.jpg) no-repeat;}
.cyber .logo {position: absolute; top: 70px; left: 38px; z-index: 92;}
.cyber .cyber_unit {
  display: flex; 
  width: 100%; 
  max-width: 1400px; 
  padding:49px 0; 
  /* margin: 0 0 0 269px; */
  margin: 0 auto;
}
.cyber .cyber_unit > div {height: 981px; position: relative; justify-content: space-around; /* padding: 120px 0 89px; */}
.cyber .cyber_unit .left_ele {width: 295px; flex: none; position: relative;}
.cyber .cyber_unit .left_ele .model {position: absolute; right:-70px; bottom: 90px;}
.cyber .cyber_unit .center_ele {flex: auto; position: relative;}
.cyber .cyber_unit .center_ele::before {
  content: "";
  left: 0;
  top: 120px;
  bottom: 89px;
  background:rgba(255, 255, 255, .1);
  position: absolute;
  width: 1px;
}
.cyber .cyber_unit .center_ele::after {
  content: "";
  right: 0;
  top: 120px;
  bottom: 89px;
  background:rgba(255, 255, 255, .1);
  position: absolute;
  width: 1px;
}
.cyber .cyber_unit .btm_logo {position: absolute; right: 0; bottom: 0;}
.cyber .cyber_unit .right_ele {margin-left:auto; width: 100px; position: relative;}
.cyber .cyber_unit .right_ele:after {
  content: "";
  display: block;
  position: absolute;
  top: 188px;
  left: 28px;
  width: 45px;
  height: 560px;
  background: url("/resources/img/cyber_right.jpg") no-repeat 0 0;
}
.cyber .cyber_unit .btm_txt {color: #fff; position: absolute; bottom:25px; width: 100%; font-size: 18px; right: 0; text-align: center; letter-spacing: 2px;}
.cyber .cyber_unit .top_line {position: absolute; top:120px; left: 0; right: 0; height: 1px; background: #fff;}
.cyber .cyber_unit .top_line::before {
  content: "";
  width: 1px;
  height: 15px;
  background: #fff;
  position: absolute;
  left: 0;
  transform: translateY(-50%);
}
.cyber .cyber_unit .top_line::after {
  content: "";
  width: 1px;
  height: 15px;
  background: #fff;
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}
.cyber .cyber_unit .btm_line::before {
  content: "";
  width: 1px;
  height: 15px;
  background: #fff;
  position: absolute;
  left: 0;
  transform: translateY(-50%);
}
.cyber .cyber_unit .right_ele .btm_line::before {right: 0; left:auto;}
.cyber .cyber_unit .btm_line {position: absolute; bottom:89px; left: 0; right: 0; height: 1px; background: #fff;}
.cyber .cyber_unit .cyber_tit {text-align: right; padding: 40px 55px 0; font-weight: 100; color: #fff; line-height: 1.4; font-size: 32px; letter-spacing: 1px; height: 120px;}
.cyber .cyber_unit .cyber_tit strong {font-weight: 600; display: inline-block; padding-left: 5px;}
.cyber .cyber_unit .cyber_tit i {display: inline-block; vertical-align: middle; margin-right: 10px;}
.cyber .cyber_unit .top_close {display: block; text-align: center; padding-top: 30px; color: #999fb3; font-size: 14px; letter-spacing: 1px;}
.cyber .cyber_unit .top_close a { display:block; text-align: center;}
.cyber .cyber_unit .top_close i {
  color: #001041;
  display: inline-block;
  background: #fff;
  width: 40px;
  text-align: center;
  border-radius: 50px;
  height: 40px;
  font-size: 24px;
  padding-top: 7px; 
  margin-bottom: 5px; 
}

.cyber .cyber_unit .unit_con {position: relative; width: 100%; height: 396px; margin: 180px 0 0; display: inline-block; }
.cyber .cyber_unit .unit_con .unit_img { text-align: center;}
.cyber .cyber_unit .unit_con .unit_box li {position: absolute; display: inline-block; /* background: rgba(0,0,0,.5);*/ z-index: 94;}
.cyber .cyber_unit .unit_con .unit_box li a {font-size: 0; display: block; width: 100%; height: 100%; }
.cyber .cyber_unit .unit_con .unit_box li.unit_84a {left: 112px; top: 52px; width: 304px; height: 159px;}
.cyber .cyber_unit .unit_con .unit_box li.unit_84b {left: 428px; top: 223px; width: 364px; height: 117px;}
.cyber .cyber_unit .unit_con .unit_box li.scketch {left: 506px;top: 52px;width: 208px; height: 116px;}

.cyber .cyber_unit .unit_con .unit_over {
  position: absolute; 
  z-index: 95; 
  display: none; 
  height: 360px; 
  padding-left:264px; 
  background:#ecf4ff; 
  width: 501px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: -40px;
}
.cyber .cyber_unit .left_img {display: block; position: absolute; left: 0; top: 0;}

.cyber .cyber_unit .over_con {padding:0 25px;}
.cyber .cyber_unit .over_con .tit {text-align: right; font-size: 30px; color: #001041; font-weight: 600; text-transform: uppercase; padding: 25px 0 10px;}
.cyber .cyber_unit .over_con .list {border-top: 2px solid #5e6b8d;}
.cyber .cyber_unit .over_con .list li {}
.cyber .cyber_unit .over_con .list li a {display: block; border-bottom: 1px solid #bdc3cc; font-size: 15px; padding: 10px 15px 10px 10px; font-weight: 500; position: relative; transition: all .3s;}
.cyber .cyber_unit .unit_con .layer_close {position: absolute; right: 0; top: -50px; color: #fff; font-size: 30px; display: inline-block;}
.cyber .cyber_unit .over_con .list li a::after {
  content: "\e87a";
  display: inline-block;
  font-family:Linearicons-Free;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
  pointer-events: none;  
  font-size: 16px;
  color: #5e6b8d;
  vertical-align: middle;  
  position: absolute;
  right: 15px;  
  opacity: 0;
  transition: all .3s;
}
.cyber .cyber_unit .over_con .list li a:hover {color: #5e6b8d; border-bottom-color: #5e6b8d;}
.cyber .cyber_unit .over_con .list li a:hover::after {right: 0; opacity: 1;}

.cyber .cyber_unit .over_con .list li a.blank::after {
  width:18px;
  height:18px;
  background:url(/resources/img/icon_blank.gif) 0 0 no-repeat;
  content:'';
  top:13px;
}

.layout_template {position: relative;}
.layout_template .top_visual {position: relative; height:100vh; width: 100%; display: flex; flex-direction: column; padding-top: 120px; justify-content: center; overflow: hidden; background:rgba(16,25,59,1);}
.top_visual .bg_subtop {position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-size: cover !important; z-index: 10; }
#bgVisual_0 {background: url(../img/sub/sub_visual_0.jpg) no-repeat center top;}
#bgVisual_1 {background: url(../img/sub/sub_visual_1.jpg) no-repeat center top;}
#bgVisual_2 {background: url(../img/sub/sub_visual_2.jpg) no-repeat center top;}
#bgVisual_3 {background: url(../img/sub/sub_visual_3.jpg) no-repeat center top;}
#bgVisual_4 {background: url(../img/sub/sub_visual_4.jpg) no-repeat center top;}
#bgVisual_5 {background: url(../img/sub/sub_visual_5.jpg) no-repeat center top;}

.top_visual .title_info {position: relative; z-index: 20;}
.top_visual .title_info h2 {color: #fff; text-align: center;}
.top_visual .title_info h2 strong {display: inline-block; font-size: 16px; padding: 10px 20px; border-radius: 20px; background: #101a3b;}
.top_visual .title_info h2 p {font-size: 76px; font-weight: 700; padding: 0 0 10px; letter-spacing: 8px; text-transform: uppercase;}
.top_visual .location_bar {position: relative; display: flex; justify-content: center; z-index: 20; transition: all .3s;}
.top_visual .location_bar .cyber_view {position: absolute; left: 0; top: 30px; width: 100%;}
.top_visual .location_bar .cyber_view span {display: inline-block; padding:0 50px;}
.top_visual .location_bar .cyber_view em {  
  width:calc( (100%  / 2) - 340px );
  background: rgba(255,255,255,.2);
  position: absolute;
  left: 0;
  top: 17px;
  z-index: 30;
  height: 1px;
}
.top_visual .location_bar .cyber_view span a {display: block;}

.top_visual .location_bar nav {position: relative; z-index: 31;}
.top_visual .location_bar nav ul {display: flex;}
.top_visual .location_bar nav ul li { position: relative; padding: 0 20px; }
.top_visual .location_bar nav ul li a {display:block; text-align: center; color: #fff; font-size: 16px; font-weight: 400; position: relative; letter-spacing: -1px;}
.top_visual .location_bar nav ul li a::before {
  content: "";
  display:block;
  width: 88px; 
  height: 88px; 
  background: rgba(56,74,137,.9); 
  border-radius: 88px; 
  margin: 0 auto 10px;
}

.top_visual .location_bar nav ul li a::after {
  content: "";
  background: url(../img/sub_icons.png) no-repeat; 
  display:block;
  position: absolute;
  left: 50%;
  top:28px;
  transform: translateX(-50%);   
}
/* 사업안내 */
.top_visual .location_bar nav ul.icon_num_0 li:nth-child(1) a::after { background-position: 0 0; width: 36px; height: 41px;}
.top_visual .location_bar nav ul.icon_num_0 li:nth-child(2) a::after {background-position: -46px 0; width: 37px; height: 38px;}
.top_visual .location_bar nav ul.icon_num_0 li:nth-child(3) a::after {background-position: -94px 0; width: 41px; height: 41px;}
.top_visual .location_bar nav ul.icon_num_0 li:nth-child(4) a::after {background-position: -145px 0; width: 48px; height: 38px;}
.top_visual .location_bar nav ul.icon_num_0 li:nth-child(5) a::after {background-position: -203px 0; width: 40px; height: 41px;} 

/* 단지안내 */
/*.top_visual .location_bar nav ul.icon_num_1 li:nth-child(1) a::after { background-position: 0 -57px; width: 48px; height: 42px; top:23px;}*/
.top_visual .location_bar nav ul.icon_num_1 li:nth-child(1) a::after {background-position: -124px -56px; width: 44px; height: 44px; top:22px; margin-left: 1px;}
.top_visual .location_bar nav ul.icon_num_1 li:nth-child(2) a::after {background-position: -250px -64px; width: 40px; height: 32px; top: 30px;}
.top_visual .location_bar nav ul.icon_num_1 li:nth-child(3) a::after {background-position: -380px -55px;
    width: 42px;
    height: 40px;
    top: 22px;}
.top_visual .location_bar nav ul.icon_num_1 li:nth-child(4) a::after {background-position: -499px -49px; width: 58px; height: 58px; top: 16px;}
.top_visual .location_bar nav ul.icon_num_1 li:nth-child(6) a::after {background-position: -499px -49px; width: 58px; height: 58px; top: 16px;}

/* 세대안내 */
.top_visual .location_bar nav ul.icon_num_2 li a::after { background-position: -380px 0 !important; width: 48px; height: 34px; color: #fff; line-height: 2.4;}
.top_visual .location_bar nav ul.icon_num_2 li:nth-child(1) a::after {content:"84A";}
.top_visual .location_bar nav ul.icon_num_2 li:nth-child(2) a::after {content:"84B";}
/* .top_visual .location_bar nav ul.icon_num_2 li:nth-child(3) a::after {content:"50";}
.top_visual .location_bar nav ul.icon_num_2 li:nth-child(4) a::after {content:"59A";}
.top_visual .location_bar nav ul.icon_num_2 li:nth-child(5) a::after {content:"59B";}
.top_visual .location_bar nav ul.icon_num_2 li:nth-child(6) a::after {content:"74";}
.top_visual .location_bar nav ul.icon_num_2 li:nth-child(7) a::after {content:"84";} */

/* 분양안내 */
.top_visual .location_bar nav ul.icon_num_3 li { width: 155px; padding: 0;}
.top_visual .location_bar nav ul.icon_num_3 li:nth-child(1) a::after {background-position: -499px -192px; width: 38px; height: 37px;}
.top_visual .location_bar nav ul.icon_num_3 li:nth-child(2) a::after {background-position: -380px -192px; width: 43px; height: 42px; margin-left:0; margin-top: -6px;}
/* .top_visual .location_bar nav ul.icon_num_3 li:nth-child(3) a::after {background-position: -46px 0; width: 37px; height: 38px;} */
.top_visual .location_bar nav ul.icon_num_3 li:nth-child(3) a::after {background-position: -124px -190px; width: 36px; height: 47px; margin-top: -6px; margin-left: 0;}
.top_visual .location_bar nav ul.icon_num_3 li:nth-child(4) a::after {background-position: 0 -192px; width:51px; height: 43px; margin-top: -6px;}
.top_visual .location_bar nav ul.icon_num_3 li:nth-child(5) a::after {background-position: -124px -190px; width: 36px; height: 47px; margin-top: -6px; margin-left: 0;}
.top_visual .location_bar nav ul.icon_num_3 li:nth-child(6) a::after {background-position: -250px -192px; width: 43px; height: 42px; margin-left:0; margin-top: -6px;}
.top_visual .location_bar nav ul.icon_num_3 li:nth-child(7) a::after {background-position: -380px -192px; width: 44px; height: 41px; margin-top: -3px;}

.top_visual .location_bar nav ul.icon_num_4 li:nth-child(1) a::after {background-position: -124px -259px; width: 41px; height: 43px; margin-left: 4px; margin-top: -4px;}
.top_visual .location_bar nav ul.icon_num_4 li:nth-child(2) a::after { background-position: 0 -259px; width:49px; height: 41px; margin-top: -6px;}
.top_visual .location_bar nav ul.icon_num_4 li:nth-child(3) a::after { background-position: -499px -257px; width:39px; height: 48px; margin-top: -6px;}
.top_visual .location_bar nav ul.icon_num_4 li:nth-child(4) a::after {background-position: -124px -128px; width: 48px; height: 34px;}
.top_visual .location_bar nav ul.icon_num_4 li:nth-child(5) a::after {background-position: -250px -257px; width: 53px; height: 48px; margin-left: 2px; margin-top: -3px;}
.top_visual .location_bar nav ul.icon_num_4 li:nth-child(6) a::after {background-position: -380px -257px; width: 48px; height: 46px; margin-top: -3px;}

.top_visual .location_bar nav ul.icon_num_5 li:nth-child(1) a::after { background-position: 0 -323px; width:40px; height: 40px;}

.top_visual .location_bar nav ul li.current a::before {background-color: rgba(16,25,59,1) !important;}


.top_visual .location_bar nav ul li::after {
  content: "";
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;  
  border-top: 20px solid transparent;
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
}

.top_visual .location_bar.fix {
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 80;
  padding: 20px 0;
  background: rgba(52,101,158,1);
  background: -moz-linear-gradient(top, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(52,101,158,1)), color-stop(58%, rgba(52,101,158,1)), color-stop(100%, rgba(76,89,159,1)));
  background: -webkit-linear-gradient(top, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  background: -o-linear-gradient(top, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  background: -ms-linear-gradient(top, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  background: linear-gradient(to bottom, rgba(52,101,158,1) 0%, rgba(52,101,158,1) 58%, rgba(76,89,159,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34659e', endColorstr='#4c599f', GradientType=0 );  
}
.top_visual .location_bar.fix .cyber_view {top:50px;}



.top_visual .location_bar.fix nav ul li.current::after {border-top: 20px solid #4c589f;}

.layout_template .page_contents {padding: 100px 0 150px; text-align: left;}
.layout_template .page_container {width: 1100px; margin: 0 auto; text-align: center; position: relative;}
.layout_template .page_contents h3.con_tit {font-size: 28px; color: #001241; font-weight: 600; letter-spacing: -1px; text-align: center;}
.layout_template .page_container .guide_page .tab {width: 1100px; margin: 0 auto;}

.overview {text-align: left;}
.overview .tit {text-align: center; padding-bottom: 50px;}
.overview .view_inner {margin:0 -50px; padding:9px 0; background: url(../img/sub/overview_bg.jpg) no-repeat center top;}
.overview .con_inner {width: 930px; margin: 0 auto;}
.overview .prj_summary {background: #283c82; padding: 30px 35px 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-top: -9px;}
.overview .prj_summary dl {color: #fff; display: flex;}
.overview .prj_summary dl dt {display: inline-block; padding-right: 45px; font-size: 18px; position: relative;}
.overview .prj_summary dl dt::before {
  content: "";
  width: 40px;
  height: 1px;
  background: #fff;
  position: absolute;
  right: 0;
  bottom: 5px;
}
.overview .prj_summary dl dd {font-size: 18px; padding-left: 10px; font-weight: 400;}
.overview .prj_list {overflow: hidden; padding: 35px 30px; text-align: left;;}
.overview .prj_list li {float: left; width: 50%; padding: 15px 0;}
.overview .prj_list li dl {font-weight: 400; font-size: 16px;}
.overview .prj_list li dl dt {color: #3866a3; padding: 5px 0;}
.overview .prj_list li dl dd {color: #2d2d2d; padding: 5px 0;}

.foot_summary {padding-top: 20px; border-top: 1px solid #e5e7ec; color: #a9a9a9; text-align: left; margin-top: 50px;}
.foot_summary li {margin-left: 25px; text-indent: -16px;}
.foot_summary .ico_box img {display:inline-block;width:25px;height:auto;vertical-align:middle;}

.location_map {text-align: left;}
.location_map .con {display: flex; width: 100%; margin-bottom: 80px;}
.location_map .con .mapimg {margin-right: 25px;}
.location_map .con dl {flex: 1;}
.location_map .con dl dt {
  background:#283c82; 
  color: #fff; 
  font-size: 20px; 
  font-weight: 600; 
  padding: 20px 0 20px 35px; 
  border-bottom-left-radius: 20px; 
  border-bottom-right-radius: 20px;
  letter-spacing: 3px;
  text-align: left;
}
.location_map .con dl dd {padding: 35px 30px; text-align: left;}
.location_map .con dl dd p.txt {font-weight: 400; font-size: 16px; color: #09193e;}
.location_map .con dl dd p.links {padding: 40px 0 0;}
.location_map .con dl dd p.links span { display: inline-block; margin-right: 15px;}
.location_map .con dl dd p.links span a {}

.brand_page .brand_movie {width: 1000px; margin: 0 auto;}

.unit_page {}
.unit_tab_con {padding: 50px 145px 20px;}
.unit_tab_con .tab_list {overflow: hidden; width: 100%; padding: 1px;}
.unit_tab_con .tab_list li {
  text-align: center; 
  position: relative; 
  float: left; 
  width: 33.3333%;
  margin-left: -1px;
  margin-top: -1px;
}
.unit_tab_con .tab_list.col2 li {width:50%;}
.unit_tab_con .tab_list.col4 li {width:25%;}
.unit_tab_con .tab_list li a {
  color: #001241;
  font-size: 14px;
  display:block;
  background: #fff;
  padding: 18px 20px 17px 15px;
  transition: all .3s;
  position: relative; 
  border:1px solid #dddddd; 
  text-align: left;  
}
.unit_tab_con .tab_list li.on a {
  background: #001241;
  border:1px solid #001241;  
  color: #fff;
  position: relative;
}
.unit_tab_con .tab_list li i {display: inline-block; background: url(../img/sub_icons.png) no-repeat; position: absolute; right: 15px; top: 15px;}
.unit_tab_con .tab_list li i.ico-unit-1 {background-position:-585px 0; width:24px; height:22px;}
.unit_tab_con .tab_list li i.ico-unit-2 {background-position:-524px 0; width:24px; height:22px;}
.unit_tab_con .tab_list li i.ico-unit-3 {background-position:-649px 0; width:26px; height:27px;}
.unit_tab_con .tab_list li i.ico-unit-4 {background-position:-499px 0; width:18px; height:24px;}
.unit_tab_con .tab_list li i.ico-unit-5 {background-position:-616px 0; width:24px; height:24px;}
.unit_tab_con .tab_list li i.ico-unit-6 {background-position:-554px 0; width:24px; height:24px;}

.unit_content {padding: 50px 0;}
.unit_content img {/* border: 1px solid #f3f3f3; */}
.unit_content .alert_txt {margin-top:50px;font-size:25px;} 

.ui_tabcontents {}
.ui_tabcontents .tab { display: table; table-layout: fixed; width: 100%; margin: 0 0 40px; }
.ui_tabcontents .tab li { display: table-cell; height: 66px; vertical-align: bottom; }
.ui_tabcontents .tab.col_7 li {width:14.2857%;}
.ui_tabcontents .tab.col_5 li {width:20%;}
.ui_tabcontents .tab.col_3 li {width:33.3333%;}
.ui_tabcontents .tab li * {vertical-align: middle;}
.ui_tabcontents .tab li a, .ui_tabcontents .tab li em {display: block; color: #3d4f8e; font-weight: 500; font-size: 16px; text-align: center; margin-left: -1px; padding:15px 0; background: #fff; border: 1px solid #f4f7ff;}
.ui_tabcontents .tab li:first-child a {
    /* height: 100%; */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
}
.ui_tabcontents .tab li.on a,
.ui_tabcontents .tab li.on em {
  color: #fff;  
  background: #3d4f8e;  
  /* background: -webkit-linear-gradient(left, rgba(54,117,190,1) 0%, rgba(54,117,190,1) 33%, rgba(71,85,190,1) 100%);  
  background: -ms-linear-gradient(left, rgba(54,117,190,1) 0%, rgba(54,117,190,1) 33%, rgba(71,85,190,1) 100%);
  background: linear-gradient(to right, rgba(54,117,190,1) 0%, rgba(54,117,190,1) 33%, rgba(71,85,190,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3675be', endColorstr='#4755be', GradientType=1); */
  position: relative;
}
.ui_tabcontents .tab li a strong {
  font-size: 18px;
}
.ui_tabcontents .tab.type_tab {position: relative;}

.ui_tabcontents .tab#tvTab {
  display: flex;
  flex-wrap: wrap;
}
.ui_tabcontents .tab#tvTab li {
  width: 16.6666%;
}

/*.ui_tabcontents .tab.type_tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #283e6b;
  height: 2px;    
}*/
.ui_tabcontents .tab.type_tab li {width: 14.3%;}
.ui_tabcontents .tab.type_tab li a {font-size: 13px; white-space: nowrap; letter-spacing: 0; font-size: 17px; border-left:1px solid #fff;}
.ui_tabcontents .tab.type_tab li:first-child a {border-left:0;}
.ui_tabcontents .tab.type_tab li a strong { display: inline-block; vertical-align: bottom; font-family: 'Noto Sans KR';}
.ui_tabcontents .type_tab_con {text-align: center; border-top:2px solid #001241; margin-top:60px; padding-top:30px!important;}

.ui_tabcontents .guide_tab {display: block; overflow:hidden; padding-top: 1px; padding-left: 1px;}
.ui_tabcontents .guide_tab li {display: block; float: left; width:25%; margin-top: -1px; height: inherit;}
.ui_tabcontents .guide_tab.col_6 li {height: 80px;width: 16.666666%;}
.ui_tabcontents .guide_tab li a {font-size: 16px;letter-spacing: 0;border: 1px solid #e6ebff;height: 100%;display: flex;justify-content: center;align-items: center;}
.tab_conlist .btn_go {text-align: center; padding: 50px 0;}

.pop_page .ui_tabcontents .tab_inner {display: table; table-layout: fixed; width: 100%; position: relative; padding-bottom: 0; text-align: center;}
.pop_page .ui_tabcontents .tab_inner li {display: table-cell; vertical-align: bottom; background: #ededed;}
.pop_page .ui_tabcontents .tab_inner.col_3 li {width: 33.3333%;}
.pop_page .ui_tabcontents .tab_inner li a {display: block; color: #283f6b; font-size: 15px; text-align: center; padding:15px 0; background: none; border:1px solid #929eb5; background: none;  border-top: 0; margin-left: -1px; border-top: 2px solid #283e6b;}
.pop_page .ui_tabcontents .tab_inner li.on {background: #001242;}
.pop_page .ui_tabcontents .tab_inner li.on a {
  color: #fff;    
  position: relative;  
}
.pop_page {padding: 25px 50px; max-width: 1000px; margin:0 auto;}
.pop_page h2 {font-family: 'Noto Sans KR'; font-weight: 700; color: #444; font-size: 38px; text-align: center; padding: 40px 0; letter-spacing: -1px;}
.pop_page h3 {color: #023d61; font-size: 36px; font-family: 'Noto Sans KR'; font-weight: 700;  text-align: center; padding-bottom: 20px;}
.pop_page h3 em { font-family: 'Exo 2';}
.pop_page h3 sub {font-size: 22px; font-family:arial, sans-serif;}
.pop_page h3 span {color: #013d61; font-size: 30px; display: inline-block; margin-left: 5px;}
.pop_page .ui_tabcontents { font-family: 'Noto Sans KR'; font-weight: 700; }
.pop_page .ui_tabcontents .tab_conlist {padding-top: 20px;}

.pop_page .ui_tabcontents {position: relative; padding-bottom: 20px;}
.pop_page .ui_tabcontents::after {
  content: "";
  width: 920px;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -460px;
  background: #153b5b;
  height: 6px;
}

.ui_tabcontents>.tab_conlist>li {display: none;}
.ui_tabcontents .tab_conlist li.current {display: block;}

.layerPopup {
  position:absolute;
  z-index:1000;
  display:none;
  left:50%;
  top:50%;
  -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  background-clip: padding-box;
  background:#fff;
}
.layerPopup h3 {font-size:36px; color: #222; padding-bottom: 12px;}
.layerPopup .layerPopup_in {display:block; position: relative; text-align: left;}
.layerPopup .closeLayer {display:inline-block;color:#4a525f; position:absolute; right:-20px; top:-86px; font-size:0; color: transparent;}
.layerPopup .closeLayer a {width: inherit; height: inherit; padding:10px 20px; font-size: 45px; color: #fff;}
.imgIcon.closex:after {}
.layerContent {
  padding-top: 50px;
  margin-top: 20px;
}
.layerContent.rejectbox {
border-top: 1px solid #ccc;
line-height: 1.7;
font-size: 16px;
}
.layerPopup .closeLayer:hover {color:#095573;}


.layerPopup.privacy_layer {        
  position: fixed;    
  top: 50%;    
  padding-top: 20px;
  -webkit-transform: translate(-50.1%, -50%);
  -moz-transform: translate(-50.1%, -50%);
  -ms-transform: translate(-50.1%, -50%);
  transform: translate(-50.1%, -50%);
}

.maplink {position: absolute; display: inline-block; color: transparent; font-size:0; text-indent: -99em;}


.board_con {min-height: 300px; background:#fff;}
.board_con table{
  width:100%;
  text-align:center;
}
.board_con table tr{
  border-bottom: 1px solid #dcdee2;
}
.board_con table th,
.board_con table td{
  padding:18px 0; line-height: 30px;
  font-size:14px;
  vertical-align: middle;
  border-bottom:1px solid #ccc;
}
.board_con table>thead th{
  border-top:2px solid #073c61;
  font-weight:bold;
  font-size:14px;
  color:#404041;
  position: relative;
}
.board_con table>thead th::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  display:block;
  height:9px;
  width:0;
  border-right:1px dotted #404041;
  transform: translateY(-50%);
}
.board_con table>thead th:last-of-type::after{
  display: none;
}
.board_con table>tbody{
  border-top:2px solid #023d61;
}
.board_con table>tbody .num{
  color:#bebebe;
}
.board_con table>tbody .photo>span{
  display: table-cell;
  border: 1px solid #e6e6e6;
  width: 183px;
  height: 108px;
  box-sizing: border-box;
  overflow: hidden;
  vertical-align: middle;
}
.board_con table>tbody .photo>span>img{
  width:100%;
}
.board_con table>tbody .media{
  color:#bebebe;
}
.board_con table>tbody .media>span{
  display:block;margin:auto; background-color: #28357b; width:60%; height:28px; line-height: 28px; color:#fff;
}
.board_con table>tbody .notice{
  padding-left: 15px;
  text-align:left;
}
.board_con table>tbody .notice .media{
  display:inline-block;
  padding:5px 20px; 
  color:#fff;
  height:28px; line-height: 28px;
  background-color: #073c61;
  margin-bottom:8px;
}
.board_con table>tbody .notice>a{
  color:#404041;
  font-size:15px;
  display: block;
}
.board_con table>tbody .date{
  color:#bebebe;
}

.page_list {clear: both; text-align:center; padding-top: 30px;}
.page_list a {display: inline-block; width:31px; height:31px; line-height:26px;}
.page_list a.arrow {background-color: #fff; font-size: 0; color: transparent;}
.page_list a.prev {margin-right: 8px;}
.page_list a.next {margin-left: 8px;}
.page_list a.on { border:2px solid #28357b; font-weight:600; color:#28357b;}
.page_list a.prev:before{font-family: 'FontAwesome'; content: "\f104"; font-size:20px; color: #888; margin-left: -3px;}
.page_list a.first:before{font-family: 'FontAwesome'; content: "\f100"; font-size:20px; color: #888;}
.page_list a.next:before{font-family: 'FontAwesome'; content: "\f105"; font-size:20px; color: #888; margin-left:3px;}
.page_list a.last:before{font-family: 'FontAwesome'; content: "\f101"; font-size:20px; color: #888;}

.magazine {background:#e8e7e0;}
.magazine_tit {position: relative; text-align: center; margin-bottom: 40px;}
.magazine_tit span {
  display: inline-block; 
  background: #e8e7e0; 
  text-transform: uppercase; 
  font-size: 20px; 
  font-weight: 100; 
  border-left: 1px solid #222; 
  border-right: 1px solid #222;
  padding: 0 40px;
  letter-spacing: 4px;
  position: relative;
  z-index: 2;
  line-height: 1.2;
}
.magazine_tit::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #222;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
}
.magazine .thumb_news {overflow: hidden; margin: 0 10px;}
.magazine .thumb_news li {float: left; width:33.3333%; padding:10px;}
.magazine .thumb_news li a {display: block; padding: 10px; height: 435px; transition: all .3s;}
.magazine .thumb_news li a:hover {
  background: #fff;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}
.magazine .thumb_news li a .data_con {position: relative; z-index: 20;}
.magazine .thumb_news li a .data_con .thumb {}
.magazine .thumb_news li a .data_con dl {display: table; table-layout: fixed; width: 100%; text-align: left; font-size: 16px; padding-top: 30px;}
.magazine .thumb_news li a .data_con dl dt {vertical-align: top; width: 45px; font-weight: 600; color:#010e43; display: table-cell;}
.magazine .thumb_news li a .data_con dl dd {vertical-align: top; display: table-cell;}

.tv_contents {padding-top: 50px;}
.responsive_mov {
  padding: 60% 0 0;
  position: relative;
}
.responsive_mov iframe,
.responsive_mov object,
.responsive_mov embed {position:absolute; top:0; left:0; width:100%; height:100%;}


.vimeo_mov {
  padding: 75% 0 0;
  position: relative;
}
.vimeo_mov iframe,
.vimeo_mov object,
.vimeo_mov embed {position:absolute; top:0; left:0; width:100%; height:100%;}


/*관심고객등록*/
.privacy{text-align: left;}
.privacy fieldset> h2{
  padding-top:20px;
  margin-bottom:40px; 
  height:23px; 
  line-height: 23px; 
  font-weight: bold;
  font-size:20px; 
  color:#1c1c1c; 
}
  
.terms_box{ padding:25px; padding-top:5px; height: 250px; overflow-y: scroll; background: #f5f5f5; font-size:14px;}
.terms_agree{
  padding:28px 0 50px;
  margin-bottom: 36px;
  text-align:center; 
  border-bottom: 1px solid #c7c7c7;
}
.terms_agree * {vertical-align: middle;}
.terms_agree label {display: inline-block; margin-right: 10px;}


/*약관*/
.terms{color:#959595;}
.terms h1{margin-bottom:6px; margin-top:20px; font-size:16px; color:#414042;}
.terms h2{margin-bottom:0; padding:30px 0 10px; font-size:14px; font-weight:600; color:#777;}
.terms h2:first-child{padding-top:0;}
.terms p{margin-bottom:10px; color:#777; }
.terms ul li{margin-bottom:5px;}


.survey {
  border-top: 1px solid #c7c7c7;  
  border-bottom: 1px solid #c7c7c7;  
  padding: 20px 0 0;
  margin: 0 0 30px;
}
.survey h3 {
  font-size: 16px;
}
.survey ul>li>ul {
  margin: 15px 0 25px;
  padding: 0 0 0 15px;
 }
.survey ul>li>ul>li {
  margin: 0 15px 5px 0;
  display: inline-block;
  font-size: 14px;
}
.survey ul>li>ul>li * {vertical-align: middle;}
.survey h3 strong {
  color: #00adee;
}
/* .survey ul>li:nth-of-type(1) ul li {
  display: block;
  margin: 0;
} */
ul.survey_list li {
  margin: 0 15px 0 0;
  display: inline-block;
}
.btn_regist,
.btn_cancel { 
  margin: 0 2px; 
  width: 160px; 
  height: 50px; 
  line-height: 50px; 
  text-align: center; 
  display: inline-block; 
  font-size: 18px; 
}
.btn_regist { color: #fff !important; background-color: #263d6b; }
.btn_cancel { color: #666 !important; background-color: #e0e0e0; }

.regist { text-align: left; }
.regist fieldset legend { display: none; }
.regist h2 {
  padding: 20px 0 10px;
  line-height: 23px; 
  font-size:18px;
  font-weight: 600;
}
  
.terms_box{ padding:25px; padding-top:5px; background: #f9f9f9; border: 1px solid #e0e5e8; font-size:13px;}
.terms_agree{
  padding:28px 0 20px;
  text-align:center; 
}
.privacy_tb{margin-bottom:30px; border-top:2px solid #263d6b;}
.privacy_tb table{width:100%;}
.privacy_tb th{padding:15px 0; text-align:center; vertical-align: middle; background-color:#f0f4f6; border-bottom:1px solid #e4e4e4; font-size:16px; color:#2c2c2c; }
.privacy_tb td{padding:9px 30px; border-bottom:1px solid #e4e4e4;}
.privacy_tb td:first-child,.privacy_tb th:first-child{border-right: 1px solid #e4e4e4 }
.privacy_tb td input[type=text]{padding-left:5px; width:202px; height:30px; line-height:30px; }
.privacy_tb td span{color:#2c2c2c; font-size:12px;}
.privacy_tb td.bg_none input[type=text]{width:598px; background-color: none;}
.privacy_tb .btn_post{margin-left:5px; width:90px; height:32px; text-align:center; line-height:32px; display:inline-block; background-color:#414042; color:#fff; font-size:11px; font-family:"돋움";}
.privacy_tb td label{color:#959595; font-size:14px; }
.txt_box{margin-bottom:50px;}
.txt_box li{font-size:13px; color:#777; }
.txt_c{text-align:center !important;}

.privacy_tb .requre {display: inline-block; color:#b11556; margin-left: 10px; font-size: 14px; padding: 10px 0;}


.privacy_tb .terms table{
  border:1px solid #e4e4e4;
}
.privacy_tb .terms th{
  border-right:1px solid #e4e4e4; 
}
.privacy_tb .terms td{
  vertical-align: middle;
}


.qe{
  padding:20px 0 3px 0;
}
.qe_bold{
  font-weight:bold;
  font-size:13px;
}

/* PR magazine */
.magazine_list {overflow:hidden;margin:0 -5px;}
.magazine_list li {float:left;margin:0 5px 40px;width:360px;height:494px;}
.magazine_list li a {display:block;width:100%;height:100%;border:20px solid transparent;background:transparent;transition:all .4s}
.magazine_list li a:hover {border:20px solid #fff;background:#fff;}
.magazine_list li a dl dt {font-size:16px;color:#040000;line-height:1.4;padding-top:30px;}
.magazine_list li a dl dt .num {color:#010e43;}
.magazine_list li a dl dd img {display:block;width:320px;height:320px;}

#magazinePop {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999;width:900px;height:700px;background:transparent;display: none;}
#magazinePop .magazine_con {width: 100%;height: 100%;overflow-y: scroll;padding-right: 10px;}
#magazinePop .status {display:none;position: relative;margin-top:5px;}
#magazinePop .status .bar_con {position: relative;height:8px;}
#magazinePop .status .bar_con::before {
  content: "";
  width: 100%;
  height: 8px;
  background: #e9ebf2;
  left: 0;
  top: 0;
  position: absolute;
  border-radius:8px;
}
#magazinePop .status .bar_con .current {position: absolute; left:0;top:0;height:8px;background:#283e6b;width:33.3333333%;border-radius:8px;z-index: 30; }
#magazinePop.horizon {height:auto;transform: translate(-50%, -48%);width:450px;height:auto;}
#magazinePop.horizon .magazine_con {padding-right:0;overflow:hidden;}
#magazinePop.horizon .status {display:block;}
#magazinePop .magazine_con img {display:block; width: 100%;}
#magazinePop .slick-arrow {display:block;width:35px;height:35px;background:#6576aa;position:absolute;top:50%;font-size:0;overflow:hidden;z-index:10000;}
#magazinePop .slick-arrow::after {display:block;font-family:Linearicons-Free;color:#fff;font-size:16px;line-height:35px;position:absolute;top:0;}
#magazinePop .slick-arrow.slick-prev {left:0;}
#magazinePop .slick-arrow.slick-next {right:0;}
#magazinePop .slick-arrow.slick-prev::after {content:'\e875';left:7px;}
#magazinePop .slick-arrow.slick-next::after {content:'\e876';right:7px;}
#magazinePop .close_btn {position: absolute;top: 0;right: -35px;width: 30px;height: 30px;background: #fff;border-radius:30px;}
#magazinePop .close_btn span {position: relative;display: block;width: 100%;height: 100%;}
#magazinePop .close_btn span::before {
    content: '\e870';
    position: absolute;
    top: 50%;
    left: 50%;
    color:#00113f;
    font-size:22px;
    font-family:'Linearicons-Free';
    transform:translate(-50%, -50%);
}

#magazinePop ::-webkit-scrollbar {width: 10px;}
#magazinePop ::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 10px;}
#magazinePop ::-webkit-scrollbar-thumb {background: #0072bc;border-radius: 10px;}
#magazinePop ::-webkit-scrollbar-thumb:hover {background: #555; }




/******************************************************************
  이벤트 당첨자
*******************************************************************/
.event_tab_con {
  width: 1100px;
  overflow: hidden;
}
.regist_event_1 {
  background: url("/resources/img/sub/event_1st_winner_y.jpg") 0 0 repeat-y ;
  overflow: hidden;
}
.winner_list {
  width: 1100px;
  padding: 0 100px 0;
}
.winner_list .winner_head ul {
  overflow:hidden;
}
.winner_list .winner_head li {
  padding:0 20px;
  text-align: center;
  float:left;
  display:table;
  table-layout:fixed;
  width: 50%;
  font-weight: 600;
  vertical-align: middle;
}
.winner_list .winner_head ul li span {  
  width: 50%;
  display: table-cell;
  vertical-align:middle;
  padding: 10px 0;
  font-size:20px;
  line-height:1;
  background:#0a6041;
  color: #fff;
}
.winner_list .winner_head ul li:first-child span {
  width:20%;
}
.winner_list .winner_head ul li:nth-child(2) span {
  width:80%;
}
.winner_list .winner_body {
  text-align: center;
  color: #616161;
  width:100%;
  display:table;
  table-layout:fixed;
}
.winner_list .winner_body ul {

}
.winner_list .winner_body ul li {
  padding:0 20px;
  text-align: center;
  float:left;
  display:table;
  table-layout:fixed;
  width: 50%;
  font-weight: 600;
  vertical-align: middle;
}
.winner_list .winner_body ul li span {  
  width: 50%;
  display: table-cell;
  vertical-align:middle;
  font-size:20px;
  line-height:1;
  padding: 10px 0;
  color: #333;
}

.winner_list .winner_body ul li:first-child span {
   width:20%;
}

.winner_list .winner_body ul li:nth-child(2) span {
   width:80%;
}



/* 크게보기 */
.zoom { text-align: center; }

.youtube {
  display: flex;
  justify-content: space-between;
}
.youtube>li { width: 33.3333%; }
.youtube>li:nth-of-type(1) { text-align: left; }
.youtube>li:nth-of-type(2) { text-align: center; }
.youtube>li:nth-of-type(3) { text-align: right; }




#mapZoom {margin:0 auto;}
html.magnifying > body {  overflow-x: hidden !important;}
.magnify,.magnify > .magnify-lens,.magnify-mobile,.lens-mobile { 
  min-width: 0; 
  min-height: 0;  
  animation: none;  
  border: none;  
  float: none;  
  margin: 0;  
  opacity: 1;  
  outline: none; 
  overflow: visible;  
  padding: 0;  
  text-indent: 0;  
  transform: none; 
  transition: none;
}
.magnify {overflow:hidden;  position: relative;  width: auto;  height: auto;  box-shadow: none;  display: inline-block;  z-index: inherit;}
.magnify > .magnify-lens {
  position: absolute;  
  width: 350px;  
  height: 350px;  
  border-radius: 100%;
  box-shadow: 0 0 0 7px rgba(45, 18, 27, 1),0 0 7px 7px rgba(0, 0, 0, 0.25),inset 0 0 20px 2px rgba(0, 0, 0, 0.25);  
  cursor: none;  
  display: none;  
  z-index: 99;
}

/******************************************************************
  청약안내
*******************************************************************/
.chungyak_list ul {
  margin: 0 0 20px -20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 1140px;
}
.chungyak_list ul li {
  margin: 0 10px 20px;
  width: 354px;
  height: 374px;
  border: 1px solid #e5e7ec;
  position: relative;
  overflow: hidden;
  text-align: left;
  background: #fff;
}
/* 당첨자예비당첨자 스타일*/
.chungyak_list.winner ul li {
  width: 550px;
}
.chungyak_list ul li:hover {
  background: #001241;
} 
.chungyak_list ul li:before {
  content: "";
  width: 160px;
  height: 100px;
  display: block;
  background: url("/resources/img/sub/chungyak_num_bg.png") no-repeat;
  background-position: -38px 0;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
}
.chungyak_list ul li:nth-of-type(1):before { background-position: -38px 0; }
.chungyak_list ul li:nth-of-type(2):before { background-position: -38px -100px; }
.chungyak_list ul li:nth-of-type(3):before { background-position: -38px -200px; }
.chungyak_list ul li:nth-of-type(4):before { background-position: -38px -300px; }
.chungyak_list ul li:nth-of-type(5):before { background-position: -38px -400px; }
.chungyak_list ul li:nth-of-type(6):before { background-position: -38px -500px; }

.chungyak_list ul li div.conbox { width: 100%; height: 100%; position: relative; z-index: 9; }
.chungyak_list ul li div.conbox dl {
  padding: 0 36px;
  height: 190px;
}
.chungyak_list ul li div.conbox dt { color: #001241; letter-spacing: -1px; padding: 40px 0 10px; font-size: 32px;  font-family: 'Noto Sans KR'; font-weight: 700; }
.chungyak_list ul li div.conbox dd { color: #2d2d2d; font-size: 20px;  font-family: 'Noto Sans KR'; font-weight: 400; }
.chungyak_list ul li div.conbox .button { 
  position: absolute;
  right: 0;
  bottom: 0;
  width: 110px;
  height: 110px;
  overflow: hidden;  
}
.chungyak_list ul li div.conbox .button a {
  display: block;
  font-size: 18px;
  border-radius: 10px;
  width: 110px;
  height: 110px;
  line-height: 60px;
  color: #fff;
  overflow: hidden;  
  text-indent: -20000px;  
  background: url("../img/sub/chungyak_btn_bg.png") no-repeat;  
  background-position: 50% 50%;
}
.chungyak_list ul li:hover div.conbox .button a {
  background: url("../img/sub/chungyak_btn_bg_on.png") no-repeat;
  background-position: 50% 50%;  
}
.chungyak_list ul li:hover div.conbox dt { color: #fff; }
.chungyak_list ul li:hover div.conbox dd { color: #fff; }

a.link {   
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
  text-indent: -20000px;
}



/******************************************************************
  청약안내
*******************************************************************/
.chungyak_list ul {
  margin: 0 0 20px -20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 1140px;
}
.chungyak_list ul li {
  margin: 0 10px 20px;
  width: 354px;
  height: 374px;
  border: 1px solid #e5e7ec;
  position: relative;
  overflow: hidden;
  text-align: left;
  background: #fff;
}
/* 당첨자예비당첨자 스타일*/
.chungyak_list.winner ul li {
  width: 550px;
}
.chungyak_list ul li:hover {
  background: #001241;
} 
.chungyak_list ul li:before {
  content: "";
  width: 160px;
  height: 100px;
  display: block;
  background: url("/resources/img/sub/chungyak_num_bg.png") no-repeat;
  background-position: -38px 0;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
}
.chungyak_list ul li:nth-of-type(1):before { background-position: -38px 0; }
.chungyak_list ul li:nth-of-type(2):before { background-position: -38px -100px; }
.chungyak_list ul li:nth-of-type(3):before { background-position: -38px -200px; }
.chungyak_list ul li:nth-of-type(4):before { background-position: -38px -300px; }
.chungyak_list ul li:nth-of-type(5):before { background-position: -38px -400px; }
.chungyak_list ul li:nth-of-type(6):before { background-position: -38px -500px; }

.chungyak_list ul li div.conbox { width: 100%; height: 100%; position: relative; z-index: 9; }
.chungyak_list ul li div.conbox dl {
  padding: 0 36px;
  height: 190px;
}
.chungyak_list ul li div.conbox dt { color: #001241; letter-spacing: -1px; padding: 40px 0 10px; font-size: 32px;  font-family: 'Noto Sans KR'; font-weight: 700; }
.chungyak_list ul li div.conbox dd { color: #2d2d2d; font-size: 20px;  font-family: 'Noto Sans KR'; font-weight: 400; }
.chungyak_list ul li div.conbox .button { 
  position: absolute;
  right: 0;
  bottom: 0;
  width: 110px;
  height: 110px;
  overflow: hidden;  
}
.chungyak_list ul li div.conbox .button a {
  display: block;
  font-size: 18px;
  border-radius: 10px;
  width: 110px;
  height: 110px;
  line-height: 60px;
  color: #fff;
  overflow: hidden;  
  text-indent: -20000px;  
  background: url("../img/sub/chungyak_btn_bg.png") no-repeat;  
  background-position: 50% 50%;
}
.chungyak_list ul li:hover div.conbox .button a {
  background: url("../img/sub/chungyak_btn_bg_on.png") no-repeat;
  background-position: 50% 50%;  
}
.chungyak_list ul li:hover div.conbox dt { color: #fff; }
.chungyak_list ul li:hover div.conbox dd { color: #fff; }

a.link {   
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
  text-indent: -20000px;
}


.inner_tab {width:100%;overflow:hidden;margin-bottom:60px;}
.inner_tab>li {float:left;width:50%;padding:0 0.5%;}
.inner_tab>li>a {display:block;width:100%;border:1px solid #dee8f2; border-radius:50px;color: #283c82; background:#fff; font-size: 15px; text-align: center; margin-left: -1px; padding: 20px 0;}
.inner_tab>li.on>a {color: #fff;background:#001242;position: relative;}
.inner_tab.col_6>li {width:16.6666666666%;}

.inner_tab_con>ul {overflow:hidden;}
.inner_tab_con>ul>li {display:none;}



/********************

  error page ljh

********************/
#error_wrap {
    width: 1100px;
    margin: 10rem auto 16rem;
    background: #ebf1f7;
    border-radius: 20px;
    border-top-left-radius: 0;
    padding: 7rem 8rem;
}

.error_msg {
    display: flex;
    justify-content: space-between;
    color: #000e42;
    align-items: baseline;
}

.error_msg .error_num {
    line-height: 1.2;
    font-family: 'Exo 2', sans-serif;
    font-weight: 100;
    font-size: 5rem;
    text-align: center;
}
.error_msg .error_num h1 {
    font-weight: 700;
    font-size: 8rem;
    font-family: 'Exo 2', sans-serif;
}

.error_msg .error_txt {}

.error_msg .error_txt * {
  font-family:  'SCDream', sans-serif;
}

.error_msg .error_txt h2 {
  font-weight: 500;
  font-size: 3.6rem;
  letter-spacing: -2.4px;
}

.error_msg .error_txt p {
  font-weight: 200;
  font-size: 1.3rem;
  margin-top: 1.2rem;
}

.move_page {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #ccc;
    margin-top: 3rem;
}
.move_page a {
    margin-left: 16px;
}



/*******************

    211119 ljh

*******************/
.page_container.event_con {
    background: #687ee3;
    padding: 0 4rem 3.2rem;
}
.event_con img {
    width:  100%;
}
#eventTab {
    margin: 2rem auto;
}
#eventTab li {}
#eventTab li a {
    background: transparent;
    color: #FFF;
}

.ui_tabcontents .tab#eventTab li.on a, .ui_tabcontents .tab#eventTab li.on em {
    background: #FFF;
    color: #3d4f8e;
    font-weight: 600;
}

.winner_con .txt_cnt {}
.winner_con .txt_cnt img {}

.winner_con .bg {}
.winner_con .bg > div {display: flex}
.winner_con .bg .st1 {
    flex: 1;
}
.winner_con .bg .st1 .th {
    display: flex;
}
.winner_con .bg .st1.noborder .th span:nth-last-of-type,
.winner_con .bg .st1.noborder .td span:nth-last-of-type {
    border-right: 0;
}
.winner_con .bg .st1 .th span {
    flex: 1;
    text-align: center;
    color: #FFF;
    background: #283c82;
    padding: 0.8rem;
    border-right: 1px solid #aaa;
}
.winner_con .bg .st1 .td {
    display: flex;
}
.winner_con .bg .st1 .td span {
    flex: 1;
    padding: 0.8rem;
    background: #FFF;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}




/******************

    211123 ljh

******************/
.popup_list li {position: relative}
.guide_link0 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 74%;
    height: 6%;
    top: 31%;
}
.guide_link1 {
    position: absolute;
    bottom: 26%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 6%;
}
.guide_links {
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 19%;
    display: flex;
    flex-wrap: wrap;
}
.guide_links a {
    width: 50%;
    height: 33%;
}
.guide_links a.guide_link2 {width: 100%;}