@charset "utf-8";

/*
 * File       : main.css
 * Dependency : css/reset.css
 *              css/jt-strap.css
 */

/* **************************************** *
 * CSS Variables
 * **************************************** */

/* **************************************** *
 * GLOBAL
 * **************************************** */
.home .main_container {padding-bottom: 0;}
.home_wrap {/*overflow-x: hidden;*/}
.main_section {padding: 105px 0 120px;}
.main_section_title {display: block;padding-bottom: 66px;font-size: 55px;font-weight: 300;line-height: 1.25;text-align: center;color: #222;}


/* **************************************** *
 * VISUAL
 * **************************************** */
.main_visual {height: -webkit-calc(100vh + 206px); height:calc(100vh + 206px); position:relative;}
.main_visual_slider {width:100%; height:100%;}
.main_visual_item {display:none; width:100%; height:100%; position:relative;}
.main_visual_item:first-child {display:block;}

.main_visual_bg {width:100%; height:100%; position:absolute; top:0; left:0; background:no-repeat center center; background-size:cover;}
.main_visual_bg img{width:100%; height:100%; position:absolute; top:0; left:0; background:no-repeat center center; background-size:cover;}
.main_visual_table {display:table; width:100%; height:100vh; position:relative;}
.main_visual_cell {display:table-cell; vertical-align:middle; text-align:center; padding-top:6px;}

.main_visual_item h2 {font-size:60px; font-weight:200; line-height:1; color:#fff;}
.main_visual_item span {display:block; padding-bottom:10px; font-size:26px; letter-spacing:-0.025em; line-height:1.4; color:#fff;}
.main_visual_item h2 > div {font-family: 'LeferiPoint-BlackObliqueA';}
/*.main_visual_item_01 .main_visual_bg {background-image: url(../images/main/visual_01.jpg);}
.main_visual_item_02 .main_visual_bg {background-image: url(../images/main/visual_01.jpg);}
.main_visual_item_03 .main_visual_bg {background-image: url(../images/main/visual_01.jpg);}*/
.main_visual_controler {
    z-index: 120;
    position: absolute;
    right: 90px;
    top: 50%;
    margin-top: -96px;
}

#main_visual_pager {height: 75px;}
.main_visual_autoplay {width: 10px;height: 10px;margin-top: 14px;}
.main_visual_autoplay > button {display: block;width: 100%;height: 100%;position: relative;cursor: pointer; background:none; padding:0; border:none;}
.main_visual_autoplay > button:after {display: block;width: 100%;height: 100%;font-family: 'jt-font';font-size: 10px;line-height: 10px;text-align: center;color: #fff;}
.main_visual_autoplay > button.autoplay_play:after {content: '\e936';}
.main_visual_autoplay > button.autoplay_pause:after {content: '\e94d';}
.main_visual_autoplay > button.autoplay_play {display: none;}
.main_visual .scroll_down {display: block;bottom: 246px;}


/***** 비주얼_비지니스 아이콘 *****/
.info_con{position:absolute; width:100%; text-align:center; padding:50px 0; margin:0 auto; opacity:1; top:50%; left:50%; transform: translateX(-50%); z-index:500;}
.info_con #sticker{/*z-index:9999 !important; padding:10px 0;*/}
.info_con ul{}
.info_con li{display:inline-block; vertical-align:top; padding:0 30px;}
.info_con li a{display:block; letter-spacing:-0.3pt; min-width:50px; text-align:center; color:#fff;}
.info_con li img{display:block; padding-bottom:10px; text-align:center;}
.info_con #sticker li a{padding:10px 8px 10px 8px; background:none; word-break:break-all; white-space:nowrap;}
.info_con #sticker li a br{display:none;}
.info_con li a:hover{background-position:center 6px; transition: all 0.3s;}


/* DMD소개 */
#contents{}
#contents h3{font-size:45px; font-weight:800; color:#222; letter-spacing:-0.5pt; line-height:135%; padding:8px 0 30px 0}
#contents h4{font-size:30px; font-weight:100; color:#222; letter-spacing:-0.5pt; line-height:135%}
#contents h4 span{font-size:16px; color:#888; display:block;}
#contents p.eng{font-size:20px; color:#222; font-weight:300; font-family:"Poppins", sans-serif;}
#contents .stxt{font-size:16px; color:#888; font-weight:300; line-height:175%}
#contents .btn a{position:relative; display:inline-block; font-size:0; font-weight:bold; letter-spacing:-0.3pt; padding-right:35px; transition: all 0.3s;}
#contents .btn a:hover{padding-right:35px; transition: all 0.3s;}
#contents .btn a:after{position:absolute; right:0; display:inline-block; content:""; overflow:hidden; width:35px; height:25px; background-position:0; background-repeat:no-repeat;}
	#contents .btn.more1 a{color:#0e4194}
	#contents .btn.more1 a:after{background-image:url("../images/main/icon_view.png")}
	#contents .btn.more2 a{color:#0e4194}
	#contents .btn.more2 a:after{background-image:url("../images/main/icon_view2.png")}



#contents .info_con{position:relative; text-align:center; padding:160px 0; opacity:0; top:-80px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#contents .info_con.active{top:0; opacity:1;}
#contents .info_con p.stxt{ padding:30px 0 70px 0;}
#contents .info_con #sticker{z-index:9999 !important}
#contents .info_con .is-sticky #sticker{background:#f5f5f5; top:89px !important; padding:10px 0; box-shadow:rgba(0,0,0,.1) 5px 5px 8px;}
#contents .info_con ul{}
#contents .info_con li{display:inline-block; vertical-align:top; padding:0 30px}
#contents .info_con li a{display:block; color:#222; letter-spacing:-0.3pt; padding:60px 8px 0 8px; min-width:60px; background-position:center 0; background-repeat:no-repeat; transition: all 0.3s;}
#contents .info_con .is-sticky #sticker li a{padding:10px 8px 10px 8px; background:none;}
#contents .info_con .is-sticky #sticker li a br{display:none}
#contents .info_con li a:hover{background-position:center 6px; transition: all 0.3s;}



/* 비지니스 */
#contents .business{position:relative; width:100%; height:564px; overflow:hidden;
opacity:0;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
#contents .business.active{opacity:1;}

#contents .business .txt_area{position:relative; margin:0 auto; padding-top:120px; width:1280px; box-sizing:border-box;
opacity:0; top:-70px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#contents .business.active .txt_area{opacity:1; top:0}
#contents .business.right .txt_area{padding-left:740px;}
	#contents .business .txt_area p.stxt{padding-bottom:50px;}
	#contents .business#smart_factory .txt_area{}
	#contents .business#si .txt_area{}
	#contents .business#osi .txt_area{}
	#contents .business#rnd .txt_area{}
	#contents .business#training .txt_area{}


#contents .business .img_area{position:absolute; width:100%; top:0; left:50%; height:565px;}
#contents .business .img_area div{position:relative; right:0; background-position:0 0; background-repeat:no-repeat;  height:565px;
opacity:1;
}

/*#contents .business.active .img_area div{opacity:1; right:0}*/

#contents .business.right .img_area {text-align:right; left:auto; right:50%;}
#contents .business.right .img_area div{background-position:right 0; left:-30%; right:auto;}
#contents .business.right.active .img_area div{left:0}
#contents .business .img_area img{/*display:none; opacity:0;*/
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;}

#contents .business.active .img_area img{opacity:1;}
	#contents .business#smart_factory .img_area div{background-image:url("../images/main/business_img_01.jpg")}
	#contents .business#si .img_area div{background-image:url("../images/main/business_img_02.jpg")}
	#contents .business#osi .img_area div{background-image:url("../images/main/business_img_03.jpg")}
	#contents .business#rnd .img_area div{background-image:url("../images/main/business_img_04.jpg")}
	#contents .business#training .img_area div{background-image:url("../images/main/business_img_05.jpg")}


/* 포트폴리오, 문의 */
#contents #cs_con{position:relative; overflow:hidden; margin:0 auto; width:1280px; box-sizing:border-box; padding:150px 0; opacity:0; transition: all 0.8s;}
#contents #cs_con.active{ opacity:1; transition: all 0.8s;}
#contents #cs_con dl{float:left; /*width:406px;*/ width:610px; margin-right:30px; text-align:center;}
#contents #cs_con dl:last-child{margin-right:0}
#contents #cs_con dl a{position:relative; overflow:hidden; display:block; height:554px; padding-top:210px; background-position:0 0; background-repeat:no-repeat; background-size:cover; box-sizing:border-box; transition: all 0.3s;}
#contents #cs_con dl a:hover{padding-top:150px; transition: all 0.3s;}
#contents #cs_con dl a:after{position:absolute; top:50%; left:0; display:block; content:""; overflow:hidden; width:100%; height:100%; opacity:0; z-index:1; transition: all 0.3s;}
#contents #cs_con dl a:hover:after{top:0; opacity:.5; transition: all 0.3s;}
	#contents #cs_con dl.portfolio a{background-image:url("../images/main/communication_img_01.jpg")}
	#contents #cs_con dl.portfolio a:after{background-color:#dd4a1d;}
	#contents #cs_con dl.contact a{background-image:url("../images/main/communication_img_02.jpg")}
	#contents #cs_con dl.contact a:after{background-color:#dd4a1d;}

#contents #cs_con dl a dt{position:relative; z-index:12; color:#fff; font-size:25px; padding:88px 0 0 0; font-weight:600; letter-spacing:-0.4pt;}
#contents #cs_con dl a dt:before{position:absolute; z-index:12; top:0; left:50%; margin-left:-30px; display:block; content:""; overflow:hidden; width:60px; height:60px; border-radius:100%; background-position:center; background-repeat:no-repeat}
	#contents #cs_con dl.portfolio a dt:before{background-color:#dd4a1d; background-image:url("../images/main/icon_portfolio.png");}
	#contents #cs_con dl.contact a dt:before{background-color:#dd4a1d; background-image:url("../images/main/icon_contact.png");}
#contents #cs_con dl a .stxt{position:relative; color:rgba(255,255,255,.7); padding:10px 0 30px 0; z-index:12;}
#contents #cs_con dl a .btn{position:relative; display:inline-block; font-size:0; color:#fff; font-weight:bold; letter-spacing:-0.3pt; padding-right:35px; transition: all 0.3s; z-index:12;}
#contents #cs_con dl a .btn:after{position:absolute; right:0; display:inline-block; content:""; overflow:hidden; width:35px; height:25px; background-image:url( "../images/main/icon_view2.png"); background-position:0; background-repeat:no-repeat;}


/* **************************************** *
 * BUSINESS
 * **************************************** */
.main_business.main_section {padding:0;}
.main_business {position:relative;}
.main_business img {max-width: 100%;height: auto;vertical-align: middle;position: relative;}
.main_business h3 {padding: 9px 0 5px;margin-left: -5px;font-size: 70px;font-weight: 200;line-height: 1.25;letter-spacing: -0.025em;color: #222;}
.main_business b {font-size: 24px;line-height: 1;font-weight: 600;letter-spacing: -0.025em;color: #222;}
.main_business p {font-size: 16px;line-height: 1.75;color: #666;}
.main_business strong {display: block;padding-bottom: 64px;margin-left: -2px;font-size: 40px;font-weight: 300;color: #222;}

.main_business .jt_btn {margin-top: 34px;}

.main_business_products {max-width: 1723px;margin: 0 auto;position: relative;}
.main_business_products_decorate {width: 952px;height: 1325px;position: absolute;right: 0;bottom: -152px;background: url(../images/main/main-business-03.jpg) no-repeat center center;background-size: cover;}
.main_business_box {display: table;width: 100%;position: relative;}
.main_business_img {display: table-cell;vertical-align: top;position: relative;}
.main_business_txt {display: table-cell;width: 485px;vertical-align: middle;position: relative;}

.main_business_box_secondary .main_business_txt h3,
.main_business_box_secondary .main_business_txt b,
.main_business_box_secondary .main_business_txt p {color: #fff;}

.main_business_box_01 {margin-top:07px;}
.main_business_box_01 .main_business_img {text-align: right;z-index: 1; width: 685px; overflow: hidden;}
.main_business_box_01 .main_business_txt {padding-bottom: 37px;}

.main_business_box_02 {margin-top: -116px;}
.main_business_box_02 .main_business_img {z-index: 2;}
.main_business_box_02 .main_business_txt {padding-top: 87px;}

.main_business_colorpaste {max-width: 1723px;margin: -51px auto 0;padding: 245px 0 194px;position: relative;background: #000 url(../images/main/business-colorpaste-bg.jpg) no-repeat center center;background-size: cover;z-index: -1;}
.colorpaste_txt {position: relative;z-index: 1;}

.main_business .colorpaste_txt h3,
.main_business .colorpaste_txt b,
.main_business .colorpaste_txt p {color: #fff;}



/* **************************************** *
 * INFO
 * **************************************** */
.main_info.main_section {padding: 0;}
.main_info {margin-top:0px;}
.main_info h3 {font-size: 55px;line-height: 1.25;font-weight: 200;color: #fff;}

.main_info_link {display: block;width: 35px;height: 35px;font-size: 0;position: relative;}
.main_info_link:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';content: '\e90b';font-size: 35px;font-weight: normal;line-height: 1;color: #aaa;}

.main_info_container {width: 100%;height: 729px;}
.main_info_container:after {content: '';display: table;clear: both;}
.main_info_container > div {float: left;width: 50%;height: 100%;position: relative;background-size: cover;}

.main_info_recruit {position: relative;background: #e7e7e5;}
.main_info_recruit h3 {position: absolute;top: 162px;left: 98px;z-index: 1;}
.main_info_recruit b {display: block;font-size: 26px;font-weight: 600;color: #333;}

.main_recruit_table {display: table;width: 100%;height: 46%;position: absolute;bottom: 0;left: 0;background: #ffffff;background: rgba(255, 255, 255, .9);z-index: 1;}
.main_recruit_cell {display: table-cell;width: 100%;padding: 30px 102px;vertical-align: middle;}
.main_recruit_data {cursor: pointer;}
.main_recruit_data > p {max-height: 3.5em;margin-top: 16px;font-size: 16px;line-height: 1.75;color: #333;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.main_recruit_data > p > span {border-bottom: 1px solid transparent;-webkit-transition: border-color 300ms;transition: border-color 300ms;}
.main_recruit_data > span {display: block;padding: 9px 0 36px;font-size: 14px;font-weight: 300;color: #222;}
.main_recruit_data:hover > p > span {border-color: #666;}

.main_info_corporate {padding: 17px;text-align: center;background: #8bab69 url(../images/main/main-corporate.jpg) no-repeat center center;cursor: pointer;}
.main_info_corporate_inner {position: relative;width: 100%;height: 100%;}
.main_info_corporate_inner:after {content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0;border: 1px solid #ffffff;border: 1px solid rgba(255, 255, 255, .3);-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: 300ms border;transition: 300ms border;z-index: 1;}
.main_info_corporate_inner:hover:after {border-width: 4px;}
.main_corporate_table {display: table;width: 100%;height: 100%;}
.main_corporate_cell {display: table-cell;width: 100%;padding: 0 17px;vertical-align: middle;}
.main_info_corporate span {display: block;font-size: 16px;line-height: 1.75;color: #fff;}
.main_info_corporate h3 {padding: 10px 0 14px;}
.main_info_corporate .main_info_link {margin: 0 auto;}
.main_info_corporate .main_info_link:after {color: #fff;}



/* **************************************** *
 * 다국어 예외 처리
 * **************************************** */
html:not([lang="ko"]) .main_info_recruit {background: url(../images/main/main-recruit-bg.jpg) no-repeat center center;}
html:not([lang="ko"]) .main_info_recruit h3 {top: 83px;left: 96px;font-size: 30px;}
html:not([lang="ko"]) .main_recruit_data > p {margin-top: 20px;margin-bottom: 63px;}
html:not([lang="ko"]) .main_info_recruit_man {display: none;}
html:not([lang="ko"]) .main_info {margin-bottom: 200px;}

/* 메인 텍스트 행간 수정 */
.main_visual_item h2 > div {
    line-height: 75px;
}

@media (max-width: 980px) and (min-width: 430px;) {
    .main_visual_item h2 > div {
        line-height: 55px;
    }
}