@charset "utf-8";
/*
    Contents.css
*/


/*** Main ***/


/** Main Visual **/
#container {position:relative;}
.mc_visual {position:relative;overflow:hidden}

/*top popup*/
#ntopPop01{background: #e03e3d;position: relative;overflow: hidden;}
#ntopPop01 ul{padding: 25px 0;}
#ntopPop01 ul li{border-right: 1px solid #bf3534}
#ntopPop01 ul li.last{border-right: none;}
#ntopPop01 p{position: absolute;z-index: 3; bottom: 5px;right: 0;color: #fff;font-size: 12px; font-family: '돋움',dotum;}
#ntopPop01 p a{color: #fff;margin-left: 20px;margin-right: 2px;padding-right: 15px;background: url(../images/main/popup_close_btn.png) no-repeat 100% 0;}


/* mc_visual_list */
.mc_visual_area .caroufredsel_wrapper {width:100% !important;height:100vh !important; min-height:500px !important;background:#000;}
/* 21.03.03 jhj 수정*/
.mc_visual_area:after{ content:'';display:block;position:absolute;left:0;top:0;width:100% !important;height:100vh !important; min-eight:500px !important;background:#000;opacity:0.50;z-index: 1;}
.mc_visual_list {position:relative;width:100%;height:100vh !important; min-height:500px !important;text-align:center;overflow:hidden;}
.mc_visual_list .li {display:block;position:relative;float:left;width:100vw;height:100vh !important;min-height:500px !important;box-sizing:border-box;text-align:left;overflow:hidden;}
.mc_visual_list .li .mov, .mc_visual_list .li .img {width:100%;height:100vh;min-height:500px;opacity:0;transition:opacity 0.4s;}
.mc_visual_list .li .mov {opacity:1;z-index:1;transform:scale(1.4);}
.mc_visual_list .li .mov video {width:100%;height:100%;}
.mc_visual_list .act .img {opacity:1;animation:scaleBg both ease-in-out 7s;z-index:1;}
.mc_visual_list:after {display:block;clear:both;height:0;content:"";overflow:hidden;}

@media all and (max-width:800px){
.mc_visual_list .li .mov {width:140%;height:100vh;min-height:500px;margin-left:-20%;}
}

@keyframes scaleBg {
0% {transform:scale(1.4);}
100% {transform:scale(1);}
}

@keyframes n8 {
0% {transform:scale(1);}
100% {transform:scale(1.2);}
}
@keyframes n1 {
0% {transform:scale(1.1) translateX(-50px);}
35% {transform:scale(1.1) translateX(50px);}
100% {transform:scale(1.1) translateX(-50px);}
}
@keyframes n2 {
0% {transform:scale(1.1) translateX(50px);}
35% {transform:scale(1.1) translateX(-60px);}
100% {transform:scale(1.1) translateX(30px);}
}
@keyframes n3 {
0% {transform:scale(1.1) translateY(40px);}
35% {transform:scale(1.1) translateY(-40px);}
100% {transform:scale(1.1) translateY(40px);}
}
@keyframes n4 {
0% {transform:scale(1.4);}
100% {transform:scale(1);}
}
@keyframes n5 {
0% {transform:scale(1.1) translateX(-50px);}
35% {transform:scale(1.1) translateX(50px);}
100% {transform:scale(1.1) translateX(-50px);}
}

/* mc_visual_txt */
.mc_visual_txt {position:absolute;left:0;top:0;width:100%;z-index:1;}
.mc_visual_txt .caroufredsel_wrapper {width:100vw !important;height:100vh !important;min-height:500px !important;}
.mc_visual_t {position:relative;width:100%;height:100vh !important;min-height:500px !important;margin:0 auto;text-align:center;overflow:hidden;opacity:1 !important;cursor:default;}
.mc_visual_t .li {display:block;position:relative;width:100vw;height:100vh !important;min-height:500px !important;text-align:left;overflow:hidden;}
.mc_visual_t .li .txt {display:table;position:relative;width:100%;max-width:1046px;height:100%;margin:0 auto;box-sizing:border-box;}
.mc_visual_t .li .txt .inner {display:table-cell;vertical-align:middle;}
.mc_visual_t .li .txt .inner span {display:block;margin-bottom:55px;font-size:20px;font-weight:500;font-family:'Roboto';line-height:20px;color:#f2f2f2;}
.mc_visual_t .li .txt .inner .point_txt {display:block;margin-bottom:35px;font-size:96px;font-weight:800;font-family:'Roboto';line-height:90px;color:#f2f2f2;}
.mc_visual_t .li .txt .inner p {margin-bottom:70px;font-size:20px;color:#f2f2f2;}
.mc_visual_t .li .txt .inner .more_btn {position:relative;display:block;width:183px;height:60px;line-height: 60px;text-align:center;border:1px solid #f2f2f2;font-size:18px;font-weight:500;letter-spacing:-0.15px;color:#f2f2f2;}

/* Active */
.mc_visual_t .li.act .txt .inner span {position:relative;animation:t_ani01 0.3s }
.mc_visual_t .li.act .txt .inner .point_txt {position:relative;animation:t_ani01 0.5s }
.mc_visual_t .li.act .txt .inner p {position:relative;animation:t_ani01 0.7s }
/* 21.03.03 jhj 수정*/
.mc_visual_t .li.act .txt .inner .more_btn {animation:t_ani02 1s  }

@keyframes t_ani01 {
0% {bottom:-50px;opacity:0;}
100% {bottom:0;opacity:1;}
}
/* 21.03.03 jhj 수정*/
@keyframes t_ani02 {
0% {bottom:-60px;}
100% {bottom:0;}
}

/* mc_control */
.mc_visual .mc_control {position:absolute;left:50%;transform:translateX(-50%);bottom:60px;width:100%;height:32px;font-size:0;text-align:left;z-index:2;opacity:1;max-width:1040px;}
.mc_visual .mc_control ul {max-width:1640px;margin:0 auto;padding:0 30px;box-sizing:border-box;}
.mc_visual .mc_control li {display:inline-block;vertical-align:top;}
.mc_visual .mc_control a {display:block;position:relative;width:32px;height:32px;text-indent:-9999px;overflow:hidden;transition:all 0.4s;}
.mc_visual .mc_control a.mc_prev {background:url("/images/main/btn_mc_prev.png") center/100% no-repeat;}
.mc_visual .mc_control a.mc_next {background:url("/images/main/btn_mc_next.png") center/100% no-repeat;}
.mc_visual .mc_control a.mc_play {display:none;width:22px;background:url("/images/main/btn_mc_play.png") center/100% no-repeat;}
.mc_visual .mc_control a.mc_stop {width:22px;background:url("/images/main/btn_mc_stop.png") center/100% no-repeat;}
.mc_progress {position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;}
.mc_progress canvas {width:100% !important;height:100% !important;box-sizing:border-box;}

.mc_visual .mc_control .pagn {margin-right:20px;width:100%;}
.mc_visual .mc_control .pagn a {display:block;float:left;position:relative;width:31%;height:35px;margin-left:3.5%;}
.mc_visual .mc_control .pagn a:first-child{margin-left:0;}
.mc_visual .mc_control .pagn a:before {position:absolute;width:100%;left:0;top:0;height:100%;border-bottom:2px solid #fff;box-sizing:border-box;content:"";opacity:0.4;transition:all 0.4s;}
.mc_visual .mc_control .pagn a:after {position:absolute;width:100%;left:0;top:0;height:100%;border-bottom:2px solid #fff;box-sizing:border-box;content:"";opacity:0.4;transition:all 0.4s;}
.mc_visual .mc_control .pagn a.selected:after {opacity:1;animation: animate 7s;}
.mc_visual .mc_control .pagn a {background:url(../images/main/main_slidetxt01_off.png) no-repeat;background-position:center  top;}

.mc_visual .mc_control .pagn a.selected {background-image:url(../images/main/main_slidetxt01.png);}
.mc_visual .mc_control .pagn a:nth-child(2) {background-image:url(../images/main/main_slidetxt02_off.png)}
.mc_visual .mc_control .pagn a:nth-child(3) {background-image:url(../images/main/main_slidetxt03_off.png)}
.mc_visual .mc_control .pagn a:nth-child(2).selected {background-image:url(../images/main/main_slidetxt02.png);}
.mc_visual .mc_control .pagn a:nth-child(3).selected {background-image:url(../images/main/main_slidetxt03.png);}
@keyframes animate {
0% {opacity:0.4;width:0%;}
100% {opacity:1;width:100%;}
}
.chat {position:fixed;right:90px;bottom:5vh;z-index: 2}

/*텍스트 공통*/
h3.title_txt {font-size:56px;font-family:'Roboto';font-weight:800;color:#111;text-align:center;line-height:56px;}

/*solution*/
.solution {width:100%;padding:80px 0 100px;}

.solution ul {margin-top:90px;max-width:1040px;margin:90px auto 0;padding:0 20px;box-sizing: border-box;}
.solution ul:after {content:'';display:block;clear:both;margin:0 -20px;}
.solution ul li {float:left;width:33.3333%;padding:0 20px;padding-top:130px;box-sizing: border-box;}
.solution ul li strong {display:block;font-size:20px;letter-spacing: -0.35px;font-weight:700;line-height:20px;color:#111;}
.solution ul li p {margin-top:25px;line-height: 24px;font-size:16px;color:#777;letter-spacing: -0.35px;}
.solution ul li {background:url(../images/main/solution_icon01.png) no-repeat;background-size:72px 68px;background-position:center top;}
.solution ul li:nth-child(2) {background-image:url(../images/main/solution_icon02.png);background-size:82px 60px;}
.solution ul li:last-child {background-image:url(../images/main/solution_icon03.png);background-size:83px 65px;}

/*customer*/ 
.customer {height:415px;width:100%; background:url(../images/main/customer_bg.jpg) center no-repeat;background-attachment: fixed; background-size:cover;}
.customer_box {max-width:1040px;padding-top:100px;margin:0 auto;text-align:left;}
.customer_box h4 {font-size:28px;font-weight:500;letter-spacing: -0.35px;line-height: 42px;color:#fff;}
.customer_box h4 span {display:block;}
.customer_box ul {margin-top:50px;}
.customer_box ul:after {content:'';display:block;clear:both;}
.customer_box ul li {float:left;width:152px;height:50px;line-height:50px;box-sizing: border-box;}
.customer_box ul li a {position:relative;display:block;font-size:16px;font-weight:500;color:#fff;padding-left:20px;border:1px solid #fff;}
.customer_box ul li a:after {content:'';display:block;position:absolute;top:50%;margin-top:-4px;right:20px;width:16px;height:8px;background:url(../images/main/btn_right.png) no-repeat;background-position:center;}
.customer_box ul li a:hover {background:#111;border-color:#111;transition:linear 0.4s;}


.customer_box ul li:last-child {margin-left:10px;}

/** Event & News **/
/** mc_notice_area **/
.mc_cont {position:relative;}
.mc_notice_area {position:relative;margin-left:475px;}
/*about*/
/* mc_notice_txt */
.about {margin:80px 0;position:relative; overflow: hidden;  }
.mc_notice_txt {position:absolute;left:0px;top:0;width:400px;}
.mc_notice_txt .caroufredsel_wrapper {height:250px !important;}
.mc_notice_t {position:relative;width:100%;height:250px !important;text-align:center;overflow:hidden;opacity:1 !important;}
.mc_notice_txt h4 {margin-bottom:60px;font-size:56px;line-height:56px;font-family:'Roboto';font-weight:800;text-align:left;color:#111;}
.mc_notice_t .li {display:block;position:relative;width:100%;height:250px;text-align:left;overflow:hidden;}
.mc_notice_t .txt dt {position:relative;height:24px;font-size:24px;font-weight:700;line-height:1;letter-spacing:-1px;color:#111;}
.mc_notice_t .txt dt em {position:absolute;left:0;top:0;height:24px;overflow:hidden;}
.mc_notice_t .txt dt i {display:block;position:relative;font-style:normal;width: 390px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} 
.mc_notice_t .txt dd {position:relative;margin-top:34px;padding:0 1px;opacity:0;font-size:16px;line-height:26px;color:#777;letter-spacing: -0.55px;}

.mc_inner {width:1040px; margin:auto; position:relative; }

/* Active */
.active .mc_notice_t .li.off .txt dt em i {animation:txtRight both 0.4s 0.3s;}
.active .mc_notice_t .li.act .txt dt em i {animation:txtRight both 0.4s 0.3s;}
.active .mc_notice_t .li.act .txt dd {animation:txtRight both 0.4s 0.3s;}

.about .mc_control {position:absolute;left:0px;bottom:10px;}
.about .mc_control .mc_prev {display:inline-block;background:url(../images/main/ico_left_b01.png) no-repeat;background-position:center;width:19px;height:16px;}
.about .mc_control .mc_next {display:inline-block;margin-left:90px;background:url(../images/main/ico_right_b01.png) no-repeat;background-position:center;width:19px;height:16px;}
.about .mc_control .pager {position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:16px;color:#111;line-height:16px;}

/* mc_notice_list */
.mc_notice_area .caroufredsel_wrapper {height:455px !important;max-height:455px !important;}
.mc_notice_list {position:relative;width:100%;height:455px !important;max-height:455px !important;text-align:center;overflow:hidden;cursor:default;}
.mc_notice_list .li {display:block;position:relative;float:left;width:620px;height:455px !important;margin-right:22px;box-sizing:border-box;text-align:left;overflow:hidden;}
.mc_notice_list .li a {display:block;}
.mc_notice_list .li .img {position:relative;width:100%;height:455px;}
.mc_notice_list .li .img:after {content: '';display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:url(../images/main/img_shadow.png) no-repeat;background-size:cover;background-position:left;transition:all 0.4s;opacity:0.7}
.mc_notice_list .li a:hover .img {opacity:1;}
.mc_notice_list .act .img {opacity:1;animation:scale both ease-in-out 2.2s;}
.mc_notice_list .act .img:after {opacity:0;}
.mc_notice_list:after {display:block;clear:both;height:0;content:"";overflow:hidden;}
/*notice*/
.notice {padding:75px 0 80px;background:#f9f9f9;}
/* 21.03.03 jhj 수정*/
.notice .notice_list {max-height:476px;padding-top:100px;overflow: hidden;}
.notice h3 {position:absolute;}
.notice ul:after {content:'';display:block;clear:both;}
.notice ul li {float:left;width:330px !important;margin:0 10px;}
.notice ul li a {display:block;}
.notice ul li a .img {width:100%;height:216px;overflow: hidden;}
.notice ul li a img {width:100%;}
.notice ul li .txt_box {position:relative;padding:30px;min-height:160px;box-sizing: border-box;border:1px solid #ddd;border-top:0;background:#fff;}
.notice ul li .txt_box strong {display:block;font-size:20px;font-weight: 500;letter-spacing: -0.35px;line-height: 28px;    text-align: left;color:#111;}
.notice ul li .txt_box .date {position:absolute;bottom:30px;left:30px;font-size:16px;color:#777;letter-spacing: -0.35px;}
.notice .all_view {position:relative;display:block;width:174px;height:50px;margin:40px auto 0;line-height:49px;font-size:16px;letter-spacing:-0.35px;background:#111;color:#fff;text-align:left;padding-left:50px;box-sizing: border-box;}


/*21.03.03 jhj 수정*/
.notice .slick-prev {background:url(../images/main/ico_left_b.png) no-repeat;background-position:center;background-size:16px 8px;width:50px;border:1px solid #111;left:0;height:50px;line-height:50px;top:25px;right:590px;left:auto;}
.notice  .slick-next {background:url(../images/main/ico_right_b.png) no-repeat;background-position:center;background-size:16px 8px;width:50px;right:0;height:50px;line-height:50px;top:25px;right:540px;left:auto;border:1px solid #111;border-left:0;}
.notice  .button-next:after, .notice .swiper-button-prev:after {content:none;}

.slick-next:before,.slick-prev:before {content:none;}
/*swiper button*/
.notice .all_view:after {content:'';display:block;position:absolute;top:50%;transform:translateY(-50%);right:50px;width:11px;height:11px ;background:url("../images/main/ico_view.png")no-repeat;background-position:center;}


/*fixed btn*/
.fixed_area {display:none;position:fixed;right:90px;bottom:100px;width:70px;z-index:9;}
.fixed_area.on {display:block;}
.fixed_area.active {position:absolute;bottom:60px;}
.solution_btn_area {position:relative;}
.solution_btn {display:block;margin-bottom:20px;width:70px;height:70px;background:url(../images/main/ico_solution_p.png)no-repeat;background-position:center;}
.solution_btn_area span {display:none;position: absolute;top: 50%;transform:translateY(-50%);right: 85px;min-width: 114px;height: 30px;background: #000;color: #fff;text-align: center;font-size: 14px;line-height: 30px;border-radius: 5px;padding: 0 10px;box-sizing: border-box;letter-spacing:-0.35px;}
.solution_btn_area span:after {content:'';display:block;position:absolute;right:-4px;top:9px;width: 0px;height: 0px;border-top: 6px solid transparent;border-left: 5px solid #000;border-bottom: 6px solid transparent;}
.solution_btn_area:hover span {display:block;}

.fixed_area {background:transparent;}
.solution_btn:after {content:'';display:block;position:absolute;top:0;left:0;bottom:0;right:0;box-shadow:0px 0px 40px -7px rgb(0 0 0 / 75%);border-radius:100%;}
.top_btn:after {content:'';display:block;position:absolute;top:0;left:0;bottom:0;right:0;box-shadow:0px 0px 40px -7px rgb(0 0 0 / 75%);border-radius:100%;}
.top_btn {position:relative;display:block;width:70px;height:70px;background:url(../images/main/ico_top.png)no-repeat;background-position:center;}

/*inp*/
input[type="checkbox"] {position:absolute;left:-9999px;width:0;height:0;border:0;overflow:hidden;}
input[type="checkbox"] + label {display:inline-block;position:relative;padding-left:32px;line-height:22px;vertical-align:top;cursor:pointer;font-size:16px;color:#111;letter-spacing: -0.35px;}
input[type="checkbox"] + label:before {position:absolute;left:0;top:-1px;width:20px;height:20px;background:#fff;border:1px solid #dfdfdf;border-radius:3px;line-height:24px;content:"";transition:all 0.4s;}
.chk_all input[type="checkbox"] + label:before {background:none;border-color:#9a9a9a;}
input[type="checkbox"]:checked + label:before {background:#e51737 url("../images/main/ico_chk.png") center/100% no-repeat;border:1px solid #e51737;background-size:15px 11px;}



/*pop*/
#solution_pop {position:absolute;bottom:180px;right:0px;width:350px;height:480px;border-radius:10px;-webkit-box-shadow: 0px 0px 51px -17px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 51px -17px rgba(0,0,0,0.75);box-shadow: 0px 0px 51px -17px rgba(0,0,0,0.75);z-index:10;overflow:hidden;transition:linear 0.3s;}
#solution_pop .top {position:relative;height:60px;padding:22px 25px;box-sizing: border-box;border-bottom:1px solid #ddd;background:#fff;}
#solution_pop p {text-align:left;}
#solution_pop .top p {font-size:18px;font-weight:500;color:#111;letter-spacing:-0.35px;}
#solution_pop .top .close_btn {position:absolute;right:25px;top:22px;background:url(../images/main/ico_close.png) no-repeat;width:18px;height:18px;}
#solution_pop .modal_body {padding:20px 25px;background:#fff;}
#solution_pop .modal_body p {margin-bottom:10px;font-size:16px;font-weight:500;letter-spacing:-0.35px;color:#111;}

.fixed_area.on.active #solution_pop {bottom:0;right:200px;transition:linear 0.3s;}

.number_box {margin-bottom:20px;}
.number_box:after {content:'';display:block;clear:both;}
.number_box .n_select {float:left;position:relative;width:80px;height:35px;padding:0 10px;font-size:16px;letter-spacing:-0.35px;box-sizing: border-box;border:1px solid #ddd;background:url(../images/main/ico_select_bl.png) no-repeat;background-position:center;background-size:9px 6px;background-position:60px center }
.number_box input {float:left;margin-left:10px;width:100px;height:35px;border:1px solid #ddd;box-sizing: border-box;font-size:16px;padding:0 10px;}
.textarea_box textarea {margin-bottom:10px;padding:15px;width:100%;height:185px;border:1px solid #ddd; box-sizing: border-box;font-size:16px;color:#777;letter-spacing:-0.35px; }
.checks:after {content:'';display:block;clear:both;}
.checks .check_box {float:left;}
.checks .content_link {float:right;font-size:14px;color:#777;line-height:22px;}
.send_btn {position:absolute;bottom:0;left:0;display:block;height:50px;width:100%;background:#111;line-height:50px;color:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:16px; }




@keyframes fade {
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes fadeOut {
0% {opacity:1;}
100% {opacity:0;}
}
@keyframes txtTop {
0% {transform:translateY(120%);opacity:0;}
100% {transform:translateY(0%);opacity:1;}
}
@keyframes txtBottom {
0% {transform:translateY(-120%);}
100% {transform:translateY(0%);}
}
@keyframes txtLeft {
0% {transform:translateX(-120%);opacity:0;}
100% {transform:translateX(0%);opacity:1;}
}
@keyframes txtRight {
0% {transform:translateX(120%);opacity:0;}
100% {transform:translateX(0%);opacity:1;}
}