@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-02 .desc p {font-weight:bold; color:#000;}
#visual .visual-03 .desc p {color:#fff; line-height:34px;}*/

/* visual */
#visual {overflow:hidden; position:relative; left:50%; z-index:1; width:1920px; height:526px; margin:0 0 0 -960px;}
#visual .list li {overflow:hidden; width:1920px !important;}
#visual .list .vid {width: 100%; height: 554px; position: relative; z-index: 0;}
#visual .list .vid::before {display: block; content: ""; width: 100%; height: 100%; background: rgba(0,0, 0,0.3); position: absolute; top: 0; left: 0; z-index: 1;} 
#visual .list .vid video {width:100%; height:100%; object-fit: cover;}
#visual .list img {transform:scale(1.2,1.2); transition:all 0s; width: 100%; height: 100%; object-fit:cover;}
#visual .list .desc {position:absolute; left:0; top:50%; z-index:1; transform: translateY(-50%); width: 100%; padding-bottom: 120px; z-index: 1;}
#visual .list .desc .wrap {overflow:hidden; text-align: center; text-shadow: 0 -2px 2px rgba(0,0,0,0.25); font-family:'GmarketSans', sans-serif;}
#visual .list .desc span {display:block; position:relative;  font-size:30px; color:#fff; line-height: 1.2; overflow: hidden;}
#visual .list .desc span span {transform: translateY(105%); opacity: 0; display: block; transition: .75s;}
#visual .list .desc strong {display:block; margin:15px 0 30px; font-size:24px; color:#fff; opacity:0; transform: translateX(-90px); font-size: 55px; font-style: italic; transition: 1s;}
#visual .list .desc strong img {width: auto; transform: scale(1) !important; object-fit:contain;}
#visual .list .desc p {position:relative; left:-90px; font-size:24px; line-height:30px; opacity:0; font-weight:bold; color:#000;}
#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 .desc ul {opacity: 0;}
#visual .list .desc ul li {color: #fff; font-size: 20px;}
#visual .list .desc ul li + li {margin-top: 5px;}
#visual .list .active img {transform:scale(1,1); transition:all 5s;}
#visual .list .active strong img {transition: none;}
#visual .list .active .desc span span {transform: translateY(0); opacity: 1;}
#visual .list .active .desc strong {transform:translateX(0); opacity: 1;}
#visual .list .active .desc ul {opacity:1; transition: 1s;}
#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/korean/main/visual_paging_white.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/korean/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/korean/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/korean/main/visual_stop_white.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:471px; 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; border:1px solid #dcd9d9;box-sizing: border-box;}
.business .list a {display:flex; height:100%; position:relative; align-items: center; justify-content: center; text-align: center; flex-direction: column; overflow: hidden;}
.business .list a img {position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; transform: scale(1); transition: .25s;}
.business .list strong {color: #fff; font-size: 30px; text-shadow: 0 -2px 2px rgba(0,0,0,0.5); position: relative; padding-bottom: 30px;}
.business .list i {width: 32px; height: 32px; border: 1px solid #fff; text-align: center; line-height: 32px; color: #fff; font-size: 20px; position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%); text-shadow: none; transition: .25s;}
.business .list a:hover img,
.business .list a:focus img,
.business .list a:active img {transform:scale(1.2,1.2);}
.business .list a:hover i,
.business .list a:focus i,
.business .list a:active i {background: #fff; color: #000;}

/* 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-wrapper {max-width: 100% !important;}
.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/korean/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/korean/main/gallery_next.png') no-repeat;}

/* career */
.career {height:530px; background:url('/images/korean/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:17px; 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;}