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

/*----------------------------------------------------------------------------
 * 메인 스타일 정의
 * ---------------------------------------------------------------------------
 * Author	: (주)플랜아이 http://plani.co.kr
 * ---------------------------------------------------------------------------
 * History
 * ---------------------------------------------------------------------------
 * 2016-08-16 (조민지)	: 최초작성
 * -------------------------------------------------------------------------*/

/* layout */
#layout-header {box-shadow:0 0 1px #e1e2e0;}
#container {position:relative;}
#contents .group {position:relative; width:1160px; margin:0 auto;}
#contents .title {padding:60px 0 45px; text-align:center;}
#contents .title h2 {margin-bottom:15px; font-size:40px; color:#231f20; text-transform:uppercase; line-height:40px;}
#contents .title p {font-size:18px; color:#404040;}

/* visual */
/* #visual {overflow:hidden; position:relative; left:50%; z-index:1; width:1920px; height:605px; margin:0 0 0 -960px;}
#visual .list li {overflow:hidden; width:1920px !important;}
#visual .list img {transform:scale(1.2,1.2); transition:all 0s;}
#visual .list .desc {position:absolute; left:50%; top:150px; z-index:1; margin-left:-580px; padding-left:95px;}
#visual .list .desc .wrap {overflow:hidden;}
#visual .list .desc strong {display:block; position:relative; top:-60px; font-family:'Lato', sans-serif; font-size:60px; color:#ff2223; text-transform:uppercase; line-height:60px; transition:top 1s ease;}
#visual .list .desc span {display:block; margin:10px 0 30px; font-family:'Lato', sans-serif; font-size:24px; color:#ef4a46; opacity:0; transition:opacity 0s ease 0s;}
#visual .list .desc p {position:relative; left:-200%; font-size:24px; line-height:30px; opacity:0;}
#visual .list .desc div + p {transition:left 1s ease .3s, opacity 1s ease .3s;}
#visual .list .desc div + p + p {transition:left 1s ease .4s, opacity 1s ease .6s;}
#visual .list .desc div + p + p + p {transition:left 1s ease .5s, opacity 1s ease .9s;}
#visual .list .desc div {overflow:hidden;}
#visual .list .active img {transform:scale(1,1); transition:all 5s;}
#visual .list .active .desc strong {top:0;}
#visual .list .active .desc span {opacity:1; transition:opacity 1s ease .2s;}
#visual .list .active .desc p {left:0; opacity:1;}
#visual .visual-01 .desc {top:135px; padding-left:590px;}
#visual .visual-01 .desc p {font-weight:bold; color:#000;}
#visual .visual-02 .desc p {font-family:'Lato', sans-serif; font-size:20px; color:#391312;}
#visual .visual-03 .desc p {color:#fff; line-height:34px;} */

/* visual */
#visual {overflow:hidden; position:relative; left:50%; z-index:1; width:1920px; height:605px; margin:0 0 0 -960px;}
#visual .list li {overflow:hidden; width:1920px !important;}
#visual .list img {transform:scale(1.2,1.2); transition:all 0s;}
#visual .list .desc {position:absolute; left:50%; top:150px; z-index:1; margin-left:-680px; padding-left:95px;}
#visual .list .desc .wrap {overflow:hidden;}
#visual .list .desc strong {display:block; position:relative; top:135px; font-family:'Lato', sans-serif; font-size:60px; color:#ff2223; text-transform:uppercase; line-height:60px; padding-left:590px;transition:top 1s ease;}
#visual .list .desc span {display:block; margin:10px 0 30px; font-family:'Lato', sans-serif; font-size:24px; color:#ef4a46; opacity:0; padding-left:590px;transition:opacity 0s ease 0s;}
#visual .list .desc p {position:relative; left:-90px; font-size:24px; line-height:30px; opacity:0; font-weight:bold; color:#000;padding-left:590px;}
#visual .list .desc div + p {transition:left 1s ease .3s, opacity 1s ease .3s;}
#visual .list .desc div + p + p {transition:left 1s ease .4s, opacity 1s ease .6s;}
#visual .list .desc div + p + p + p {transition:left 1s ease .5s, opacity 1s ease .9s;}
#visual .list .desc div {overflow:hidden;}
#visual .list .active img {transform:scale(1,1); transition:all 5s;}
#visual .list .active .desc strong {top:0;}
#visual .list .active .desc span {opacity:1; transition:opacity 1s ease .2s;}
#visual .list .active .desc p {left:0; opacity:1;}
/*#visual .visual-01 .desc {top:135px; padding-left:590px;}
#visual .visual-01 .desc p {font-weight:bold; color:#000;}
#visual .visual-02 .desc p {font-family:'Lato', sans-serif; font-size:20px; color:#391312;}
#visual .visual-03 .desc p {color:#fff; line-height:34px;}*/

/* visual controls */
#visual .bx-controls {position:absolute; left:0; bottom:105px; z-index:80; width:100%; text-align:center;}
#visual .bx-pager {display:inline; margin-right:10px;}
#visual .bx-pager-item {display:inline; margin:0 10px;}
#visual .bx-pager-link {display:inline-block; width:8px; height:10px; background:url('/images/english/main/visual_paging.png') no-repeat; font-size:0; line-height:0; vertical-align:middle; transform:rotate(0deg); transition:width .3s ease, height .3s ease, transform .3s ease;}
#visual .bx-pager-link:hover,
#visual .bx-pager-link:focus,
#visual .bx-pager-link:active {transform:rotate(180deg);}
#visual .bx-pager-link.active {width:22px; height:26px; background:url('/images/english/main/visual_paging_on.png') no-repeat center center;}
#visual .bx-controls-auto,
#visual .bx-controls-auto-item {display:inline;}
#visual .bx-controls-auto-item .bx-start {display:inline-block; overflow:hidden; width:8px; height:10px; background:url('/images/english/main/visual_play.png') no-repeat; font-size:0; line-height:0; vertical-align:middle; transition:width .3s ease, height .3s ease;}
#visual .bx-controls-auto-item .bx-stop {display:inline-block; overflow:hidden; width:10px; height:12px; background:url('/images/english/main/visual_stop.png') no-repeat; font-size:0; line-height:0; vertical-align:middle; transition:width .3s ease, height .3s ease;}
#visual .bx-controls-auto-item .active {width:0; height:0;}
.visual-bar {position:absolute; left:0; top:550px; z-index:2; width:100%; height:55px; background-color:#ee3b3b; opacity:.9; content:'';}

/* notice */
.notice {overflow:hidden; position:absolute; left:-20px; top:-55px; z-index:3; width:875px; height:55px;}
.notice:before {position:absolute; left:0; top:0; width:1px; height:100%; background-color:#fff; opacity:.13; content:'';}
.notice h2 {float:left; position:relative; top:0; width:110px; margin-right:20px; font-size:16px; font-weight:normal; color:#fff; text-align:center; line-height:55px;}
.notice h2 i {margin-right:5px;}
.notice h2:before {position:absolute; right:0; top:20px; width:1px; height:12px; background-color:#fff; opacity:.48; content:'';}
.notice .btn-more {position:absolute; right:20px; top:20px; width:12px; height:12px; border-radius:3px; border:1px solid #fff; transition:width .3s ease, height .3s ease;}
.notice .btn-more:before {position:absolute; left:2px; top:50%; width:70%; height:1px; background-color:#fff; content:''; transform:rotate(0deg); transition:all .3s ease;}
.notice .btn-more span:before {position:absolute; left:50%; top:2px; width:1px; height:70%; margin-left:-.5px; background-color:#fff; content:''; transform:rotate(0deg); transition:all .3s ease;}
.notice .btn-more:hover,
.notice .btn-more:focus,
.notice .btn-more:active {width:15px; height:15px;}
.notice .btn-more:hover:before,
.notice .btn-more:focus:before,
.notice .btn-more:active:before,
.notice .btn-more:hover span:before,
.notice .btn-more:focus span:before,
.notice .btn-more:active span:before {transform:rotate(180deg);}
.notice .item {overflow:hidden; float:left; position:relative; width:600px; height:55px; line-height:55px;}
.notice .list a {display:block;}
.notice .list strong {display:inline-block; overflow:hidden; width:520px; color:#fff; white-space:nowrap; text-overflow:ellipsis; vertical-align:middle;}
.notice .list span {font-family:'Lato', sans-serif; font-size:13px; color:#ffb2b2;}

/* business */
.business .list {overflow:hidden; width:1200px; height:340px; margin:0 auto 50px; }
.business .list li {float:left; width:560px; height:280px; margin:0 20px; box-shadow:2px 3px 3px #d0cfcf; border:1px solid #dcd9d9;box-sizing: border-box;}
.business .list a {display:block; height:100%; position:relative;}
.business .list a:before {position:absolute; right:33px; bottom:35px; width:15px; height:1px; background-color:#1e1e1e; content:''; transform:rotate(0deg); transition:all .3s ease;}
.business .list p {overflow:hidden; width:280px; height:279px; margin:-1px; display:inline-block; float:left;  }
.business .list p img {transform:scale(1,1); transition:all .5s ease;}
.business .list strong {display:inline-block; margin:40px 0 20px 30px; font-size:24px; color:#1c0b0b;  }
.business .list span {display:inline-block; margin:0px 0 20px 30px; color:#6d6e71; line-height:24px; }
.business .list span:before {position:absolute; right:40px; bottom:28px; width:1px; height:15px; background-color:#1e1e1e; content:''; transform:rotate(0deg); transition:all .3s ease;}
.business .list a:hover p img,
.business .list a:focus p img,
.business .list a:active p img {transform:scale(1.2,1.2);}
.business .list a:hover:before,
.business .list a:focus:before,
.business .list a:active:before,
.business .list a:hover span:before,
.business .list a:focus span:before,
.business .list a:active span:before {transform:rotate(180deg);}

/* technology */
.technology {padding-bottom:45px; background-color:#e4ebf3;}
.technology .list {overflow:hidden; width:1160px; margin:0 auto;}
.technology .list li {float:left; width:25%; color:#231f20; text-align:center; line-height:24px;}
.technology .list a {display:block; position:relative; padding-bottom:60px;}
.technology .list a:before {position:absolute; left:50%; bottom:0; width:30px; height:30px; margin:0 0 0 -15px; border:1px solid #e94240; content:''; transition:background .3s ease;}
.technology .list p {width:115px; height:115px; margin:0 auto; border-radius:9999px; background-color:#e94240; text-align:center; line-height:115px;}
.technology .list p:before {position:absolute; left:50%; bottom:15px; width:15px; height:1px; margin:0 0 0 -7px; background-color:#e94240; content:''; transition:background .3s ease;}
.technology .list p img {vertical-align:middle;}
.technology .list strong {display:block; margin:20px 0 5px; font-size:18px;}
.technology .list strong:before {position:absolute; left:50%; bottom:8px; width:1px; height:15px; background-color:#e94240; content:''; transition:background .3s ease;}
.technology .list a:hover:before,
.technology .list a:focus:before,
.technology .list a:active:before {background-color:#e94240;}
.technology .list a:hover p:before,
.technology .list a:focus p:before,
.technology .list a:active p:before,
.technology .list a:hover strong:before,
.technology .list a:focus strong:before,
.technology .list a:active strong:before {background-color:#fff;}

/* gallery */
.gallery {overflow:hidden; position:relative; height:240px;}
.gallery .bx-controls-direction {position:absolute; top:100px; left:50%; z-index:5; width:1115px; margin-left:-557px;}
.gallery .bx-controls-direction a {position:absolute; left:0; top:0; width:50px; height:50px; background:url('/images/english/main/gallery_prev.png') no-repeat; font-size:0; line-height:0; opacity:.5; transition:all .3s ease;}
.gallery .bx-controls-direction a:hover,
.gallery .bx-controls-direction a:focus,
.gallery .bx-controls-direction a:active {opacity:1;}
.gallery .bx-controls-direction .bx-next {left:auto; right:0; background:url('/images/english/main/gallery_next.png') no-repeat;}

/* career */
.career {height:530px; background:url('/images/english/main/career.gif') no-repeat center 0 #192b5c;}
.career .title {padding:45px 0 40px !important;}
.career .title * {color:#fff !important;}
.career .list {text-align:center;}
.career .list li {display:inline;}
.career .list a {display:inline-block; position:relative; width:145px; height:45px; margin:0 15px; border:2px solid #fff; font-size:15px; color:#fff; text-align:center; line-height:45px; transition:color .3s ease;}
.career .list a:before {position:absolute; left:0; bottom:0; width:100%; height:0; background-color:#fff; content:''; transition:height .3s ease;}
.career .list a:hover,
.career .list a:focus,
.career .list a:active {color:#000;}
.career .list a:hover:before,
.career .list a:focus:before,
.career .list a:active:before {height:100%;}
.career .list strong {position:relative; z-index:1;}
.career .list span {display:inline-block; position:relative; top:-1px; z-index:1; width:18px; height:18px; margin:0 -5px 0 5px; border-radius:9999px; background-color:#ff2116; font-family:'Lato', sans-serif; font-size:13px; color:#fff; text-align:center; line-height:17px;}