/* main */
#main {position: relative;background: url(/images/bg/main2.jpg) no-repeat;background-size: cover;}
.bg_box {background: #fff;height: 100%;}
.bg_box ul {position: absolute;width: 100%;height: 100%;/* overflow: hidden; */}
.bg_box ul li {position: absolute;width: 100%;height: 100%;left: 0;top: 0;transition: all .5s;opacity: 0;}
.bg_box ul li.bg_au {background: url(/images/bg/main0.jpg) no-repeat center;background-size: cover;}
.bg_box ul li.bg_bd {background: url(/images/bg/main_bigdata.jpg) no-repeat center;background-size: cover;}
.bg_box ul li.bg_sf {background: url(/images/bg/main1_2.jpg) no-repeat center; background-size: cover;}
.bg_box ul li.active {opacity: 1;}

.bg_txt {position: absolute;top: 0;left: 0;width: 100%;}
.bg_txt ul {position: relative;width: 100%;height: 100vh;}
.bg_txt ul li {position: absolute;opacity: 0;padding-left: 15%;width: 100%;top: 50%;transform: translatey(-50%);}
.bg_txt ul li.active {opacity: 1;}
.bg_txt h2 {position: relative;font-size: 1.5rem;text-transform: uppercase;color: rgba(255,255,255,.85);letter-spacing: 3px;/* width: 100%; */transition: all 1.5s;opacity: 0.5;}
.bg_txt p {position: relative;font-size: 3.75rem;color: rgba(255,255,255,1);font-weight: 700;line-height: 1.25;margin-top: 25px;left: 0;transition: all 2s;width: 100%;opacity: 0;}
.bg_txt h2.on {left: 0; opacity: 1;}
.bg_txt p.on {left: 0;opacity: 1;}
.au_txt {text-align: center;color: #111;padding-left: 0 !important;text-transform: none;top: 25% !important;}
.au_txt h2 {color: #333;}
.au_txt p {color: #333;}


/* 공통 */
.main_sec_body {position: relative;top: 50%;transform: translatey(-50%);z-index: 1;}
.cont_title {text-align: center;}
.cont_title h3 {font-size: 3.2rem;color: rgba(255,255,255,.85);text-transform: uppercase;margin-bottom: 10px;letter-spacing: 10px;font-weight: 900;transition: all 1s;opacity: 0;}
.cont_title p {font-size: 1.125rem; color: #fff; transition: all 1s;}
.cont_title.on h3{opacity:1;}
.main_cont_box {margin-top: 80px;}
.btn_more {position: relative;border: 0;text-transform: uppercase;font-weight: 700;letter-spacing: 7px;margin-top: 50px;left: 50%;transform: translatex(-50%);padding: 7px 20px;background: transparent;font-size: 0.875rem;color: #666;cursor: pointer;}
.btn_more:after {position: absolute; content: ""; display: block; width: 50px; height: 50px; background: rgba(0,0,0,.07); top: 50%; transform: translatey(-50%); border-radius: 25px; left:0; transition: all .5s;}
.btn_more:hover:after {animation: more .5s, no-more 1s .5s; animation-fill-mode: forwards; transition: all .5s;}

@keyframes more {
  0% {width: 50px; left:0 }
  100% {width: 100%; right: 0; }
}
@keyframes no-more {
  0% {width: 100%; right:0}
  100% {width: 50px; left:73%; right: 0; }
}


/* bigdata */
#content1 {position: relative; background: #f5f8ff;}
.bigdata_body {}
.bigdata_body h3 {color: #111;}
.bigdata_body p {color: #333;}
.bigdata_box li {position: relative; float: left; width: 23.5%; height: 300px; margin-left: 2%; box-shadow: 10px 1px 16px rgba(58,59,69,.15); border-radius: 2px; transition: all 1.5s; background-size: cover; opacity:0;}
.bigdata_box li:first-child {margin-left: 0;}
.bigdata_box li:nth-child(2n-1) {margin-top: 50px;}
.cont1_1 {background: url(/images/bg/02_1.jpg) no-repeat;}
.cont1_2 {background: url(/images/bg/02_2.jpg) no-repeat;}
.cont1_3 {background: url(/images/bg/02_3.jpg) no-repeat;}
.cont1_4 {background: url(/images/bg/02_4.jpg) no-repeat;}
.txt_box {position: absolute; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65);}
.txt_box h4 {font-size: 1.375rem; color: #fff; text-align: center; margin-top: 35%; margin-bottom: 10px;}
.txt_box p {font-size: 0.937rem; color: #fff; text-align: center;}
.box_border {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 1px solid rgba(0,0,0,.5);transition: all .5s;opacity: 0;}
.bigdata_box li:hover .box_border {transform: translate(10px, 10px); opacity: 1;}
.bigdata_box li.on {opacity: 1;}

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


/* smart factory */
#content2 {position: relative; background: url(/images/bg/sf_bg.jpg) no-repeat; background-size: cover;}
#content2:after {display: block; position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
.solution_box li {position: relative;float: left;width: 22.75%;height: 300px;margin-left: 3%;padding: 40px;border: 1px solid rgba(255,255,255,.75);border-radius: 2px;overflow: hidden;box-shadow: 10px 1px 16px rgba(58,59,69,.15);background: rgba(255,255,255,.05);}
.solution_box li:first-child {margin-left: 0;}
.icon {margin-left: 50%;margin-top: 23%;margin-bottom: 40px;transform: translatex(-50%);width: 60px;height: 65px;}
.icon:after {content: "";display: block;position: absolute;left: 0;bottom: -20px;border: .5px solid #fff;width: 100%;}
.icon img {width: 100%;}
.solution_box h5 {font-size: 1.125rem; font-weight: 400; color: #fff; text-transform: uppercase; text-align: center; transition: all .25s;}
.solution_descrip {position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: rgba(35, 63, 128, .9); transition: all .25s; opacity: 0;}
.solution_txt {position: absolute;width: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 10px;}
.solution_txt h6 {color: #fff; text-align: center; line-height: 1.4rem;}
.solution_txt p {font-size: 1rem; text-align: center; color: #fff; margin-top: 15px;}
.solution_box li:hover {border: 0;}
.solution_box li:hover .solution_title {display: none;}
.solution_box li:hover .solution_descrip {bottom: 0; opacity: 1;}
.more_link {background: rgba(35, 63, 128, .9); padding: 0 !important; border: 0px solid rgba(35, 63, 128, .95) !important; }
.more_link a {font-size: 1.125rem; color: #fff; width: 100%; height: 100%; display: block; text-align: center; padding-top: 40%; }
.smartfactory_body .btn_more {color: #fff;}
.smartfactory_body .btn_more:after {background: rgba(255,255,255,.15);}


/* contact us */
#content3 {position: relative; background: #fff;}
.contact_body h3 {color: #333;}
.contact_body h4 {font-size: 1.25rem; color: #444; font-weight: 400; text-align: center;}
.contact_body p {font-size: 0.937rem; color: #777; margin: 15px 0;}
.contact_box {padding: 0 50px;}
.contact_body ul {overflow: hidden;}
.contact_body ul.contact_map_txt {position: relative;overflow: hidden;border-bottom: 0;margin-top: 35px;}
.contact_body ul li {float: left; width: 50%; border: 1px solid rgba(0,0,0,.25); text-align: center;}
.contact_body ul.contact_map_txt li {border-bottom: 0px;padding: 20px;}
.contact_body ul.contact_map_txt li:last-child {border-left: 1px dashed rgba(0,0,0,.25);}
.contact_body ul.contact_map_txt button {border: 2px solid #000; padding: 7px 35px; border-radius: 30px; font-size: 0.937rem; background: transparent; margin-top: 10px; cursor: pointer;}
.contact_body ul.contact_map_img li {height: 285px;background: #666;border: 0;}
.contact_body ul.contact_map_img li:first-child {background: url(/images/bg/map1.jpg) no-repeat center; background-size: 140%; border-right: 1px solid rgba(0,0,0,.25);)}
.contact_body ul.contact_map_img li:last-child {background: url(/images/bg/map2.jpg) no-repeat center;background-size: 140%;}
.contact_body ul li:first-child {border-right: 0;}
.contact_txt {padding: 50px;}
.contact_txt h4 {color: #333;}
.txt_highlight {font-weight: 700; color: #0056a8;}
.cominfo_txt {position: absolute; z-index: 1; bottom: 20px; left: 50px;}
.cominfo_txt a {transition: all .3s;}
.contact_cont_body {margin-top: 30px;}
.cominfo_txt a:hover {padding-left: 20px;}
.partner_box {position: relative;width: 100%;top: 30px;}


/* scroll-down */
#main .scroll-down {position: absolute;bottom: 30px;left: 50%;transform: translatex(-50%);padding-top: 80px;font-size: 1rem;color: #fff;opacity: 0.8;line-height: 0px;text-transform: uppercase;}
#main .scroll-down span {position: absolute;top: 0;left: 50%;width: 25px;height: 25px;margin-left: -12.5px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;transform: rotate(-45deg);animation: sdb05 1.5s infinite;box-sizing: border-box;}

@-webkit-keyframes sdb05 {
  0% {-webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0;}
  50% {opacity: 1;}
  100% {-webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0;}
}
@keyframes sdb05 {
  0% {transform: rotate(-45deg) translate(0, 0); opacity: 0;}
  50% {opacity: 1;}
  100% {transform: rotate(-45deg) translate(-20px, 20px); opacity: 0;}
}


/* slick */
.slick_banner {background: #fff;}
.slick_itm_body {background: #fff; height: 100%;padding:10px;margin: 0 20px;/* box-shadow: .1px 2px 15px 0.5px #eee; */}
.slick_itm_img {max-width: 100%; height: auto; /* -webkit-filter: grayscale(100%);filter: gray; */}
.slick_itm_body.not_center {opacity:0.1; transition: all 300ms ease;}
.slick_itm_body.center {opacity:0.1; transition: all 300ms ease;}
.slick_selected_title {color: #0056a8;font-weight: 700;}

@-webkit-keyframes sdb05 {
  0% {-webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0;}
  50% {opacity: 1;}
  100% {-webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0;}
}
@keyframes sdb05 {
  0% {transform: rotate(-45deg) translate(0, 0); opacity: 0;}
  50% {opacity: 1;}
  100% {transform: rotate(-45deg) translate(-20px, 20px); opacity: 0;}
}


@media (max-width: 1280px) {
    /* 메인 */
    .bg_txt ul li {padding-left: 10%}
    .bg_txt ul li h2 {font-size: 1.25rem;}
    .bg_txt ul li p {font-size: 3.5rem;}
    .main_sec_body {padding-top: 25px;}
    .bigdata_box li, .solution_box li {height: 280px;}
    .bigdata_box li:hover {background-size: 190%;}
}
@media (max-width: 1024px) {
    /* 메인 */
    .main_sec_body {padding-top: 25px;}
    .main_cont_box {margin-top: 50px;}
    .bigdata_box li, .solution_box li {height: 250px;}
    .contact_body ul.contact_map_txt li {padding: 15px;}
    .contact_body ul.contact_map_txt button {padding: 6px 30px;font-size: 0.75rem;}
    .contact_body ul.contact_map_img li {height: 220px;}
}
@media (max-width: 768px) {
    /* 메인 */
    .bg_txt ul li p {font-size: 3rem;}
    .bigdata_box li {width: 48%;}
    .bigdata_box li:nth-child(2n-1) {margin-top: 0;}
    .bigdata_box li:nth-child(2n) {margin-right: 0;}
    .cont1_1, .cont1_2 {margin-bottom: 15px;}
    .txt_box h4 {margin-top: 25%;font-size: 1.2rem;}
    .btn_more {font-size: 0.875rem;}
    .solution_box li {width: 50%; height: 250px;margin-left: 0;}
    .solution_box li:nth-child(2n-1) {margin-left: 0;}
    .icon {margin-top: 10%;}
    .contact_box {padding: 0;}
    .contact_body ul.contact_map_img li:last-child, .contact_body ul.contact_map_img li:first-child {background-position: center; background-size: 200%;}
    .contact_body p {font-size: 1rem;}
    .bg_txt ul li {padding-left: 10%;}
}
@media (max-width: 420px) {
    /* 메인 */
    .bg_txt ul li {padding-left: 4%;}
    .bg_txt ul li h2 {font-size: 1rem;}
    .bg_txt ul li p {font-size: 2rem;}
    .au_txt p {font-size: 2.5rem !important;}
    .container_13 {padding: 0 20px;}
    .cont_title h3 {font-size: 2.5rem;letter-spacing: 3px;}
    .cont_title p {display: none;}
    .bigdata_box li, .solution_box li {height: 200px;}
    .solution_box h5 {font-size: 1rem;}
    .solution_txt h6 {font-size: 1rem;}
    .solution_txt p {font-size: 0.75rem;}
    .icon {margin-top: 5%;}
    .contact_body h4 {font-size: 1em;}
    .contact_body p {font-size: 0.75rem;}
}
@media (max-width: 375px) {
    /* 메인 */
    html, body {font-size: 13px;}
    .main_cont_box {margin-top: 15px;}
    .bigdata_box li, .solution_box li {height: 165px;}
    .btn_more {margin-top: 15px;}
    .icon {width: 45px;height: 50px;margin-bottom: 30px;margin-top: 0;}
    .contact_body ul.contact_map_txt {margin-top: 15px;}
    .contact_body ul.contact_map_img li {height: 185px;}
    .contact_body ul.contact_map_txt button {padding: 5px 24px;margin-top: 0;}
    .partner_box {top: 15px;}
}

.blocker {
  z-index: 10000 !important;
}

#modal1.modal {
  height: unset;
  max-width: unset;
  text-align: center;
  padding: 3px 3px;
  /* width: 81%; */
  width: 1102px;
}

#modal .contents_wrapper {
  display: block;
}

#modal1 .modal1_contents1 {
  background: url(/images/main/modal/modal1-1.png) no-repeat center;
  background-size: contain;
  height: 800px;
  width: 51%;
  float: left;
}

#modal1 .modal1_contents2 {
  background: url(/images/main/modal/modal1-2.png) no-repeat center;
  background-size: contain;
  height: 800px;
  width: 48.1%;
  float: left;
  margin-left: 8px;
}

#modal1 .close-modal {
  filter: invert(1) sepia(122%) saturate(9) hue-rotate(505deg);

}

@media (max-width: 420px) {
  #modal1.modal {
    width: 90%;
  }
}