@charset "utf-8";

@media(max-width:767px){
#main {display:none}
}

@media(min-width:768px) and (max-width:991px){
#main {display:none}
}

@media(min-width:992px) and (max-width:1200px){
#main {display:none}
}

@media(min-width:1201px){
#main {position:relative; max-width:100%; margin:0 auto; overflow:hidden; text-align:center;}
#main .con-title { font-size:60px; line-height:64px; font-weight:500; color:#fff; letter-spacing:0.001em;}
#main .con-title-info {font-size:16px; line-height:30px; font-weight:400; color:#fff; margin-top:23px;}
#main .con-title-info > span {opacity:0.5;}



.main-innovation .txt01 {margin-top:124px; padding:0 50px; min-width: 1240px;}
.main-innovation .txt01 {margin-top:124px; padding:0 50px;}
.main-innovation .txt01:after {content:''; clear:both; display:block;}
.main-innovation .txt01 > li {position:relative; float:left; width:25%; height:210px;}
.main-innovation .txt01 > li:after {content:''; position:absolute; top:0; left:0; display:block; width:2px; height:210px; background:#fff; opacity:0.15; margin:0 0 0 -1px;}
.main-innovation .txt01 > li:first-child:after {display:none;}
.main-innovation .txt01-01 {font-size:16px; opacity:0.5; color:#fff; margin-top:16px;}
.main-innovation .txt01-02 { font-weight:700; color:#fff; height:90px; font-size:90px; line-height:90px; margin-top:16px;}
.main-innovation .txt01-03 {font-weight:500; color:#fff; font-size:22px; line-height:35px;}
.main-innovation .txt01-02 > span {display:inline-block; font-size:18px; line-height:1; vertical-align:baseline;margin-left:7px;}
.main-group {position:relative; min-height:588px;  box-sizing:border-box; min-width:100%;}
.main-group .video-wrap {position:absolute;  top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; overflow:hidden; text-align:center;}
.main-group .video-data {position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.main-group .video-data video {position:absolute; top:0; left:0; width:100%; height:100%;}


.number-format {display:inline-block;}
.number-format > div {position:relative; display:inline-block; letter-spacing:normal; overflow:hidden;}
.number-format > div > p {position:relative; top:0; left:0;}
.number-format > div > p > span {display:block;}
.number-format > div{ font-weight:700; color:#fff; height:90px; font-size:90px; line-height:90px;}

.content-wrap {position:absolute; top:0; right:0; bottom:0; left:0; display:block; width:100%; height:auto; z-index:10;}
.content-wrap > div {position:absolute; height:100%; overflow:hidden; z-index:1;}
.content-wrap .street {width:16.6%; left:0%;}
.content-wrap .sports {width:16.6%; left:16.6%;}
.content-wrap .tunnel {width:16.6%; left:33.2%;}
.content-wrap .interior {width:16.6%; left:49.8%;}
.content-wrap .landscape {width:16.6%; left:66.4%;}
.content-wrap .solar {width:17.1%; left:83%;}
.content-wrap .title-wrap {position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
.content-wrap .title-data {position:absolute; top:200px; left:40px; height:165px; box-sizing:border-box; text-align:left; -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); z-index:5;}
.content-wrap .title-data .en-brand-name {margin-bottom:10px;font-size:16px;line-height:20px; color:#fff; opacity:0.4;white-space:nowrap;}
.content-wrap .title-data .kr-brand-name {margin:0; font-size:38px; line-height:40px; color:#fff; font-weight:800; letter-spacing:-1px; white-space:nowrap;}
.content-wrap .title-data .line {position:absolute; bottom:0; left:0; display:block; width:0; height:2px; background:#fff; opacity:0.2;}
.content-wrap .title-cell {position:relative; width:0; height:100%; overflow:hidden;}
.content-wrap .visual-wrap {position:absolute; top:0; left:0; display:block; width:0; height:100%; z-index:1; overflow:hidden; transition:width 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.content-wrap .visual-wrap .obj {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.content-wrap .visual-wrap:after {content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.5); opacity:0;}
.content-wrap .street .visual-wrap .obj {background-image:url(/theme/ety_theme_company_v1.2/img/business_mouse_on_01.png);}
.content-wrap .sports .visual-wrap .obj {background-image:url(/theme/ety_theme_company_v1.2/img/business_mouse_on_02.png);}
.content-wrap .tunnel .visual-wrap .obj {background-image:url(/theme/ety_theme_company_v1.2/img/business_mouse_on_03.png);}
.content-wrap .interior .visual-wrap .obj {background-image:url(/theme/ety_theme_company_v1.2/img/business_mouse_on_04.png);}
.content-wrap .landscape .visual-wrap .obj {background-image:url(/theme/ety_theme_company_v1.2/img/business_mouse_on_05.png);}
.content-wrap .solar .visual-wrap .obj {background-image:url(/theme/ety_theme_company_v1.2/img/business_mouse_on_06.png);}
.content-wrap .sub-info {position:absolute; top:175px; left:0; display:none;}
.content-wrap .sub-info .product {font-size:18px;letter-spacing:-1.5px;background-color:#fff000;font-weight:700;padding:5px 10px;margin-bottom:10px;}
.content-wrap .sub-info .port {font-size:18px;letter-spacing:-1.5px;background-color:#fff000;font-weight:700;padding:5px 10px;}
.content-wrap .detail-data {display:none;position:absolute; top:0; left:0; width:100%; height:100%;}
.content-wrap:before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; display:block; width:auto; height:auto; margin:auto -50px; background:#000; opacity:0; transition:opacity 0.45s ease;}
.content-wrap.hover:before {opacity:0.5;}

.content-data.enter-left .visual-wrap {left:0; right:auto;}
.content-data.enter-left .visual-wrap .obj {left:0; right:auto;}
.content-data.enter-right .visual-wrap {left:auto; right:0;}
.content-data.enter-right .visual-wrap .obj {left:auto; right:0;}
.content-data.leave-left .visual-wrap {left:0; right:auto;}
.content-data.enter-left .visual-wrap .obj {left:0; right:auto;}
.content-data.leave-right .visual-wrap {left:auto; right:0;}
.content-data.leave-right .visual-wrap .obj {left:auto; right:0;}

.content-data.hover .visual-wrap {width:100%;}

.content-detail {position:fixed; top:0; left:100%; right:0; bottom:0; display:block; width:auto; height:auto; z-index:500; overflow:hidden;}
/*.content-detail.scroll {overflow-y:scroll;}*/
.content-detail.scroll .detail-data .detail-content-scroll {overflow-y:scroll;}
.content-detail:before {content:''; position:absolute; top:0; right:50%; display:block; width:0; height:100%; background-repeat:no-repeat; background-position:center right -960px; transition:width 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.content-detail:after {content:''; position:absolute; top:0; left:50%; display:block; width:0; height:100%; background-repeat:no-repeat; background-position:center left -960px; transition:width 1.25s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.content-detail .inner {position:relative; height:100%; z-index:5;}
.content-detail.holdings:before {background-image:url(/index/images/content_detail_holdings-d54c85a36f59845025c42c4433bf3305.jpg);}
.content-detail.holdings:after {background-image:url(/index/images/content_detail_holdings-d54c85a36f59845025c42c4433bf3305.jpg);}

.content-detail.pharma:before {background-image:url(/index/images/content_detail_pharma-cbc0ad82a946e3336cc0f4cebc27415d.jpg);}
.content-detail.pharma:after {background-image:url(/index/images/content_detail_pharma-cbc0ad82a946e3336cc0f4cebc27415d.jpg);}

.content-detail.chemical:before {background-image:url(/index/images/content_detail_chemical-ab4179de8052280b9ca5bd4c5613aa12.jpg);}
.content-detail.chemical:after {background-image:url(/index/images/content_detail_chemical-ab4179de8052280b9ca5bd4c5613aa12.jpg);}

.content-detail.bio:before {background-image:url(/index/images/content_detail_bio-15a33051e7f906b93ce7117a2a7c6d1c.jpg);}
.content-detail.bio:after {background-image:url(/index/images/content_detail_bio-15a33051e7f906b93ce7117a2a7c6d1c.jpg);}

.content-detail.healthfood:before {background-image:url(/index/images/content_detail_healthfood-f97b9db618d8e4cef8622549b00c5086.png);}
.content-detail.healthfood:after {background-image:url(/index/images/content_detail_healthfood-f97b9db618d8e4cef8622549b00c5086.png);}

.content-detail.open {left:0;}
.content-detail.open:before {width:960px; transition-delay:0.5s;}
.content-detail.open:after {width:960px; transition-delay:0.5s;}
.content-detail.close:before {width:0; transition-delay:0.3s; transition-duration:0.95s}
.content-detail.close:after {width:0; transition-delay:0.3s; transition-duration:0.95s}

.page-data {position:absolute; top:200px; left:50%; margin-left: -600px; z-index:5;}
.page-data .title {position:relative; width:100%;overflow:hidden;}
.page-data .en-brand-name {font-size:20px;  line-height:25px; color:#fff; opacity:0.5; letter-spacing:9.0px; white-space:nowrap;}
.page-data .kr-brand-name {margin-top:13px; font-size:80px; line-height:90px; color:#fff; font-weight:700; letter-spacing:-0.01em; white-space:nowrap;}
.page-data .txt {padding-top:24px; font-size:16px; color:#fff; opacity:0.5; line-height:30px; word-break:keep-all;}
.page-data .btn-view {margin-top:24px;}

.detail-data {position:relative; width:100%; height:100%; overflow:hidden;box-sizing:border-box;}
.detail-data .bar {position:relative; display:block; width:683px; height:2px; opacity:1; margin-left:-370px; margin-top:30px;}
.detail-data .bar span {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#fff;}
/*
.detail-data .detail-content-scroll {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.detail-data .detail-content-scroll.scroll {overflow-y:scroll;}
*/

.detail-data .detail-content-scroll {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; overflow-x:hidden;overflow-y:hidden;}
.detail-data .scroll-inner-wrap {position:relative; max-width:1200px; margin:0 auto; padding-bottom:70px;}
.detail-data .scroll-inner-wrap:after {content:''; clear:both; display:block;}


.detail-data .scroll-inner-wrap > ul {float:right; padding-left:50px;}
.detail-data .scroll-inner-wrap > ul.second {padding-top:70px;}
.detail-data .scroll-inner-wrap > ul > li {margin-top:50px; position:relative;}
.detail-data .scroll-inner-wrap > ul > li img {box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);}
.detail-data .scroll-inner-wrap > ul > li:first-child {margin-top:0;}
.detail-data .scroll-inner-wrap > ul > li > div {position:absolute; top:40px; right:30px;}
/* 0909 */
.detail-data .scroll-inner-wrap > ul > li > div.scroll > ul > li {margin:4px; float:left;}
.detail-data .scroll-inner-wrap > ul > li > div.scroll > ul > li > a.on {width:12px; height:12px; background:url(/index/images/bullet_on-5010b12b129327545694267f1ca942e8.png)50% no-repeat;}
.detail-data .scroll-inner-wrap > ul > li > div.scroll > ul > li > a {width:12px; height:12px; background:url(/index/images/bullet-53333d02955b609a7407e27bb00f1f96.png)50% no-repeat; display:block;}
/* 0909 */

/*.scroll-inner-wrap {}
.scroll-inner-wrap ul.scrol {float:right; width:812px
}
.scroll-inner-wrap ul.scrol li {margin-bottom:40px; width:364px; float:right;}
.scroll-inner-wrap ul.scrol li:after {clear:both; content:""; display:block}
/*.scroll-inner-wrap ul.scrol li:nth-child(odd) {float:right;}
.scroll-inner-wrap ul.scrol li:nth-child(even) {float:left; margin-right:50px;}*/
/*.scroll-inner-wrap ul.scrol li:first-child {}
.scroll-inner-wrap ul.scrol li:nth-child(2) {margin-top:50px;}
.scroll-inner-wrap ul.scrol li .slider-wrap {position:relative;}
.scroll-inner-wrap ul.scrol li .slider-wrap .bullet-wrap {position:absolute; top:40px;}
.scroll-inner-wrap ul.scrol li .slider-wrap .bullet-wrap ul > li {margin:4px; float:right; width:inherit;}*/


.main-visual .item-big > ul {position:absolute; top:0; left:0; width:100%; height:100% }
.main-visual .item-big > ul > li {position:absolute; top:0; left:0; width:100%; height:100% }
.main-visual .item-big {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
.main-visual .item-big .visual {position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; overflow:hidden; text-align:center;}
.main-visual .item-big .txt-wrap {position:relative; max-width:1240px; margin:0 auto; height:100%; z-index:5; text-align:left;}
.main-visual .item-big .txt-parent {display:table; width:100%; height:100%;table-layout:fixed;}
.main-visual .item-big .txt-children {display:table-cell; width:100%; height:100%; vertical-align:middle;}
.main-visual .video-wrap {position:absolute;  top:0; left:0; width:0; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; overflow:hidden; text-align:center;}
.main-visual .video-data {position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.main-visual .video-data video {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual .video-wrap:before {content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#000; opacity:0.4; z-index:3;}
.main-visual .txt-01 {font-size:90px; line-height:100px; font-weight:500; color:#fff; }
.main-visual .txt-02 {margin-top:22px; font-size:16px; line-height:30px; color:#fff; }
.main-visual .txt-02 > span {opacity:0.5;}
.main-visual .txt-02 + .txt-02 {margin-top:30px;}
.main-visual .txt-03 {font-size:90px; line-height:100px; font-weight:500; color:#fff;}
.main-visual .txt-btn {margin-top:42px;}

.main-visual .btn-control {position:absolute; top:50%; display:block; width:24px; height:44px; margin-top:-22px; z-index:100; opacity:0.4; transition:opacity 0.5s ease; background-repeat:no-repeat; background-position:left top;}
.main-visual .btn-control:hover {opacity:1;}
.main-visual .btn-control.btn-prev {left:50%; margin-left:-860px; z-index:100; background-image:url(/index/images/btn_main_banner_prev-a17ebd80a84a43ca8a9022a1499d914a.png);}
.main-visual .btn-control.btn-next {right:50%; margin-right:-860px; z-index:100; background-image:url(/index/images/btn_main_banner_next-c9293b572924bb88da31430878f5c05b.png);}
.main-visual .txt-effect {opacity:0;}

/*
.main-visual .visual-01 {background-image:url(/index/images/main_visual_01-4a95751956f3c3b55fd446f342d70aec.jpg);}
.main-visual .visual-02 {background-image:url(/index/images/main_visual_02-f697ea6dc89b0551537670b0fe1e3de8.jpg);}
.main-visual .visual-03 {background-image:url(/index/images/main_visual_03-10944acb5790da0ef933e8f17154e966.jpg);}
.main-visual .visual-04 {background-image:url(/index/images/main_visual_04-2b167e134edf080cebaf6257628560a0.jpg);}
.main-visual .video-data video{opacity:0;}
*/

.copy{position:absolute; bottom:0; left:0; width:100%; padding:50px 0; display:block; font-size:12px; line-height:14px; text-align:center; color:#fff; opacity:0.4; z-index:50;}

/* //0906 */
.scroll-info {position:absolute; bottom:46px; left:0; display:block; width:100%; height:16px; font-size:12px; color:#fff;  letter-spacing:0.5em; line-height:16px ;text-align:center; z-index:150; padding-top:47px; background:url(/index/images/scroll_info_arrow-9295871484dd2c6bed7320b275e8cafb.png) center top no-repeat;}

/*a.scroll-info {position:absolute; bottom:46px; left:0; display:block; width:100%; height:16px; font-size:12px; color:#fff;  letter-spacing:0.5em; line-height:16px ;text-align:center; z-index:150; padding-top:47px; background:url(/index/images/scroll_info_arrow-9295871484dd2c6bed7320b275e8cafb.png) center top no-repeat;}
a.scroll-info:hover {color:#fff; background:url(/index/images/scroll_info_arrow-9295871484dd2c6bed7320b275e8cafb.png) center top no-repeat;}*/
/* 0906// */


/*--- paging ---*/
.paging {text-align: center; margin:0; margin-bottom:160px}
.paging > a{display:inline-block;vertical-align: bottom;width: 50px;height: 50px;line-height: 50px;text-align: center;}
.paging > a img {vertical-align: middle;}
.paging > ul{display:inline-block;overflow:hidden; margin: 0 10px;}
.paging > ul >li {float:left; width:50px; height:50px; text-align: center;}
.paging > ul >li >a{display:block; line-height: 50px; font-size:18px; color:#222;}
.paging > ul >li.on{background:#004a99;}
.paging > ul >li.on >a {color:#fff}

/*--- popup layer 190923 추가 ---*/
.pop-layer { display: none; position: absolute; top: 50%; left: 50%; z-index: 1000; width: auto; width:1100px; height: 750px; background-color: rgba(255,255,255,.9); }
.dim-layer { display: none; position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.dim-layer .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50); }
.dim-layer .pop-layer { display: block; }
.pop_header { text-align: right; }
.pop_con_wrap { padding: 10px 50px 0 50px; }
.pop_con_wrap .tit { font-size: 30px; color: #222; font-weight: 600; margin-bottom: 50px; }
.pop_con_wrap .small { font-size: 20px; color: #004a99; font-weight: 600; margin-bottom: 15px; }


/* 191001 */
@keyframes blink {
 0% {opacity:0.5;}
 50% {opacity:1;}
}

/* for Chrome, Safari */
@-webkit-keyframes blink {
0% {opacity:0.5;}
 50% {opacity:1;}
}
.blinkcss {
 animation: blink 1s step-end infinite;
 -webkit-animation: blink 1s step-end infinite;
}

/* 191002 */
.shortcut {position:fixed; bottom:0; right:0; width:110px; height:110px; background:#222; display:table;z-index:999;}
.shortcut::after {content:""; display:block; position:absolute; width:17px; height:16px; top:20px; right:20px; background:url("/index/images/shorcut-25b30087c43969d22bf4a8dcd6082bcd.png")50% no-repeat;}
.shortcut.ckd{background:linear-gradient(135deg, rgba(0,74,152,1) 0%, rgba(19, 78, 127,1) 30%, rgba(170, 183, 228,1) 100%);}
.shortcut.kb{background:linear-gradient(90deg, rgba(166, 192, 254,1) 0%, rgba(246, 128, 132,1) 100%);}
.shortcut.bio{background:linear-gradient(135deg, rgba(145,195,0,1) 0%, rgba(134,178,0,1) 30%, rgba(0,205,111,1) 100%);}
.shortcut.hc{background:linear-gradient(135deg, rgba(88, 26, 215,1) 0%, rgba(0, 17, 147,1) 30%, rgba(62, 209, 246,1) 100%);}
.shortcut.hds{background:linear-gradient(90deg, rgba(204, 153, 0,1) 0%, rgba(135, 65, 17,1) 100%);}
.shortcut .txt-wrap {display:table-cell; vertical-align:bottom; padding:20px; text-align: left;}
.shortcut p {color:#fff; line-height:1.2;}
.shortcut .txt01 {font-size:14px; font-weight:bold}
.shortcut .txt02 {font-size:12px; font-weight:400;}
}