@charset "UTF-8";
/* layout system */
.col-list-container:after { display: table; content: ""; line-height: 0; clear: both; }
.col-list { float: left; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.333333%; }
.col-1-4 { width: 25%; }
.col-1-5 { width: 20%; }
.col-1-6 { width: 16.666666%; }
.col-2-3 { width: 66.666666%; }
.col-3-4 { width: 75%; }
.col-4-5 { width: 80%; }

/* base layout */
html { height: 100%; font-size: 14px; }
body { font-size: 14px; font-family: 'Noto Sans KR', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: none; height: 100%; letter-spacing: -0.3px; color: #666;}
a {font-size: inherit; color: inherit; text-decoration: none; line-height: inherit;}
a:hover, a:focus {color: inherit;}
a.active {color: #1273bb}


#contents { min-height: 600px;}
.container { width: 1100px; margin: 0 Auto;}
/* 스킵 네비게이션 */
.skipNav-container a { display: block; width: 1px; height: 1px; overflow: hidden; margin-top: -1px; }
.skipNav-container a:focus, .skipNav-container a:active { width: 100%; height: auto; padding: 10px 0; text-align: center; }
#page-title { display: none; }
/** -------------------------------- header area -------------------------------- */
#header {}
#gnb {position: relative;}
.gnb-container {width:1100px; margin: 0 auto;  padding-top: 20px}
.gnb-container h1, .gnb-container .gnb {float: left;}
.gnb-container h1 {width: 270px;}
.gnb-container .gnb  {width: 750px;}
.gnb-container .lang {float: right; width: 80px;padding-top: 12px; color:#a7a7a7; font-size: 12px; line-height: 1; text-align: right}
.gnb-container .lang > a {display:inline-block; padding: 7px 12px; text-align: center; border: 1px solid #a7a7a7; font-weight: 700; position: relative; overflow: hidden}
.gnb-container .lang > a > i {position: absolute; left:0; top:0; width:5px; height:100px; background: #fff; opacity: 0; transition:  .6s ease;}
.gnb-container .lang > a > span {position: relative;}
.gnb-container .lang > a:hover {color: #fff}
.gnb-container .lang > a:hover > i { opacity: 1; transform: scaleX(30); background: #0081cc;}

.gnb-container .gnb >ul>li {float: left;}
.gnb-container .gnb >ul>li> a {display: block; position: relative; padding: 0 60px; font-size: 18px; height: 60px; line-height: 60px; color: #000; font-weight: 700; box-sizing: border-box}
.gnb-container .gnb >ul>li> a:before { position: absolute; top:20px; left:0; width:1px; height: 18px; background: #dbdbdb; content:'';}
.gnb-container .gnb >ul>li:first-child> a:before {display: none}
.gnb-container .gnb >ul>li> a.select {border-bottom: 3px solid #0081cc;}

#gnb .sub-container {position: absolute; width:100%; top:80px; left:0; border-top: 1px solid #0081cc; border-bottom: 1px solid #e9e9e9; background: #fff; z-index: 11; display: none}
.sub-container .sub {width: 830px; margin-left: 270px; padding: 20px 0;}
.sub .sub-menu {float: left; padding-left: 60px; width: 140px;}
.sub .sub-menu.col1 {width:125px; padding-left: 40px}
.sub .sub-menu.col2 { width: 125px}
.sub .sub-menu > li>a {display: block; padding: 10px 0;}
.sub .sub-menu > li>a:hover {color: #0081cc}

/**  footer area -------------------------------- */
#footer { border-top: 1px solid #e9e9e9; font-weight: 100;}
.footer-awards {text-align: center; padding: 20px 0;}
.footer-family {background: #333; height: 50px; line-height: 50px}
.families > div {float: left; width:20%; box-sizing: border-box; border-right: 1px solid #1e1e1e;}
.families > div:first-child {border-left:1px solid #1e1e1e;}
.families > div > span {position: relative; display: block; color: #fff; text-align: center;}
.footer-links-over {position: absolute; width:100%; top:10px; left:0; background: #333; text-align: center; height: 40px; line-height: 1; overflow: hidden; display: none;}
.families > div > span:hover > .footer-links-over {display: block}
.footer-bottom {background: #444;}
.footer-bottom-inner {width:1100px; margin: 0 auto; padding: 35px 0; color: #999;}
.footer-bottom-inner .left {float: left; width: 245px; padding-top: 35px}
.footer-bottom-inner .right {float: right; width: 855px;}
.footer-bottom-inner .gubun {padding: 0 12px;}

/* ------------------------------------------------
** sub page
---------------------------------------------------- */
/* sub top visual */
.sub-top-container {height: 340px; background: url(../jpg/bg-sub-top-prm1.jpg) center 0 no-repeat;}
.sub-top-container.notice {background: url(../jpg/bg-sub-top-prm1.jpg) center 0 no-repeat;}
.sub-top-container.news {background: url(../jpg/bg-sub-top-prm2.jpg) center 0 no-repeat;}
.sub-top-container.movie {background: url(../jpg/bg-sub-top-prm3.jpg) center 0 no-repeat;}
.sub-top-container.story {background: url(../jpg/bg-sub-top-prm4.jpg) center 0 no-repeat;}

.sub-top-container.about-bg1 {background: url(../jpg/bg-sub-top-about1.jpg) center 0 no-repeat;}
.sub-top-container.about-bg2 {background: url(../jpg/bg-sub-top-about2.jpg) center 0 no-repeat;}
.sub-top-container.about-bg3 {background: url(../jpg/bg-sub-top-about3.jpg) center 0 no-repeat;}
.sub-top-container.about-bg4 {background: url(../jpg/bg-sub-top-about4.jpg) center 0 no-repeat;}
.sub-top-container.about-bg5 {background: url(../jpg/bg-sub-top-about5.jpg) center 0 no-repeat;}
.sub-top-container.about-bg6 {background: url(../jpg/bg-sub-top-about6.jpg) center 0 no-repeat;}
.sub-top-container.about-bg7 {background: url(../jpg/bg-sub-top-about7.jpg) center 0 no-repeat;}
.sub-top-container.about-bg8 {background: url(../jpg/bg-sub-top-about8.jpg) center 0 no-repeat;}

.sub-top-container.people-bg1 {background: url(../jpg/bg-sub-top-people1.jpg) center 0 no-repeat;}
.sub-top-container.people-bg2 {background: url(../jpg/bg-sub-top-people2.jpg) center 0 no-repeat;}
.sub-top-container.people-bg3 {background: url(../jpg/bg-sub-top-people3.jpg) center 0 no-repeat;}
.sub-top-container.people-bg4 {background: url(../jpg/bg-sub-top-people4.jpg) center 0 no-repeat;}

.sub-top-container2 {height: 460px; background: url(../jpg/bg-sub-top-brand1.jpg) center 0 no-repeat;}
.sub-top-container2.brand1 {background: url(../jpg/bg-sub-top-brand1.jpg) center 0 no-repeat;}
.sub-top-container2.brand2 {background: url(../jpg/bg-sub-top-brand2.jpg) center 0 no-repeat;}
.sub-top-container2.brand3 {background: url(../jpg/bg-sub-top-brand3.jpg) center 0 no-repeat;}
.sub-top-container2.brand4 {background: url(../jpg/bg-sub-top-brand4.jpg) center 0 no-repeat;}
.sub-top-container2.brand5 {background: url(../jpg/bg-sub-top-brand5.jpg) center 0 no-repeat;}
.sub-top-container2.brand6 {background: url(../jpg/bg-sub-top-brand6.jpg) center 0 no-repeat;}

.sub-top-container h2 {position: absolute; top:110px; left: 40px; font-size: 40px; color: #003686;font-weight: 700; animation:sub-top-ani-h2 .8s ease 1}
.sub-top-container h2.brand {font-size: 52px; color:#FFF; top: 130px; animation: sub-top-ani-brand-h2 .8s ease 1}
.sub-top-container h3 {position: absolute; top: 160px; left:40px; font-size: 35px; color: #003686; font-weight: 300; animation:sub-top-ani-h3 1.2s ease 1}
.sub-top-container h4.brand {position: absolute; top:190px; left:40px; font-size: 40px; color: #fff; font-weight: 300; animation:sub-top-ani-brand-h4 1.2s ease 1}
.sub-top-container .m-line {position: absolute; top: 215px; left:40px; width:30px; height: 4px; background: #fff; animation:m-line 0.7s ease 1 1.5s; animation-fill-mode:forwards; opacity: 0}
.sub-top-container .m-line.brand {top: 250px;}
.sub-top-container .copy {position: absolute; top: 240px; left:40px; font-size: 18px; color:#4a6c8f; animation:copy 2.3s ease 1}
.sub-top-container .copy.brand {color: #fff; top:280px;}

/* sub top menu */
.sub-top-menu li {float: left; width: 25%; height: 50px; padding-left: 1px; box-sizing: border-box;}
.sub-top-menu.col8 li {width: 12.5%;}
.sub-top-menu.col7 li {width: 14.285714%;}
.sub-top-menu.col6 li {width: 16.666666%;}
.sub-top-menu.col3 li {width: 33.333333%;}
.sub-top-menu.col5 li {width: 20%;}
.sub-top-menu li:first-child {padding-left: 0}
.sub-top-menu li > a {display: block; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #fff; background: rgba(0, 0, 0, 0.3);}
.sub-top-menu li > a:hover, .sub-top-menu li > a.active {background: #0081cc}

/* sub top copy animate */
@keyframes sub-top-ani-h2 {
	0% { top:200px; opacity: 0; transform: scale(0);}
	100% { top:110px; opacity: 1; transform: scale(1);}
}
@keyframes sub-top-ani-brand-h2 {
	0% { top:200px; opacity: 0; transform: scale(0);}
	100% { top:130px; opacity: 1; transform: scale(1);}
}
@keyframes sub-top-ani-h3 {
	0% { top:300px; opacity: 0; transform: scale(0);}
	100% { top:160px; opacity: 1; transform: scale(1);}
}
@keyframes sub-top-ani-brand-h4 {
	0% { top:300px; opacity: 0; transform: scale(0);}
	100% { top:190px; opacity: 1; transform: scale(1);}
}
@keyframes m-line {
	0% { opacity: 0; transform: scaleX(0);}
	20% { opacity: 0; transform: scaleX(0.2);}
	40% { opacity: 0.8; transform: scaleX(1);}
	60% { opacity: 0; transform: scaleX(0);}
	80% { opacity: 1; transform: scaleX(0.8);}
	90% { opacity: 0.2; transform: scaleX(0.2);}
	100% { opacity: 1; transform: scaleX(1);}
}
@keyframes copy {
	0% { opacity: 0; left:0px; transform: scaleX(0);transform-origin: 0% 0%;}
	30% { opacity: 0.3; left:0px; transform: scaleX(0);transform-origin: 0% 0%;}
	100% { opacity: 1; left:40px; transform: scaleX(1);transform-origin: 0% 0%;}
}

/* sub body contents */
.sub-bg-bottom {background:#fff url(../jpg/bg-sbu-bottom.jpg) 0 bottom no-repeat;}
.sub-content {width: 1100px; margin: 0 auto; padding-bottom: 90px}
.sub-content.no-b-pad {padding-bottom: 0}
.sub-content .sub-main-title {position: relative; text-align: center; font-size: 40px; color: #333; padding: 90px 0 70px; font-weight: 700;}
.sub-content .sub-main-title:after {position: absolute; top: 154px; left: 50%; margin-left: -15px; width:30px; height: 2px; background: #063b88; content: ''}
.sub-content .sub-main-title.oth {padding: 90px 0 15px; font-size: 32px}
.sub-content .sub-main-title.oth:after {top: 140px;}
.sch-container {text-align: center; margin-bottom: 40px}
.sch-container select, .sch-container input, .sch-container button {height: 40px}
.sch-container select {width: 155px;}
.sch-container input {width: 260px;}
.sch-container button {width: 110px; margin-left: -5px}

.notice-view {border-top: 3px solid #063b88; border-bottom: 1px solid #063b88;}
.notice-view-top {padding:15px 40px; border-bottom: 1px solid #e9e9e9;}
.notice-view-top > .col1 {float: left; width:90%; }
.notice-view-top > .col2 {float: right; width:10%; text-align: right; color: #999; font-weight: 100; padding-top: 10px}
.notice-view-top > .col1 h3 {font-size: 22px}
.notice-view-top.recruit > .col1 {width:75%; }
.notice-view-top.recruit > .col2 {width:25%;}


.notice-view-file {padding:12px 40px; border-bottom: 1px solid #e9e9e9;}
.notice-view-file > .col1 {float: left; width:8%; border-right: 1px solid #e9e9e9;} 
.notice-view-file > .col2 {float: right; width: 90%;}

.bbs-pre-next {display: table; width:100%; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; font-size: 13px}
.bbs-pre-next > li {display: table-row;}
.bbs-pre-next > li:first-child >div {border-bottom: 1px solid #e9e9e9;}
.bbs-pre-next > li>div {display: table-cell;padding: 15px;}

/* contact us */
.agreement_box {width:1040px; border:1px solid #dcdcdc; padding:30px;}
.agreement_box .txt_title {font-size:17px; font-weight:bold; color:#535353;}
.agreement_ck {width:1040px; border:1px solid #dcdcdc; border-top:0px; padding:20px 30px; background:#f7f7f7; font-size:17px; color:#313131;}
.agreement_ck input[type="checkbox"] + label {
  display: block; 
  cursor: pointer; 
  width: 300px; 
  height: 25px; 
  padding-left: 35px;
  background: url(../png/check_off.png) no-repeat 0 0px / contain;
}
.agreement_ck input[type="checkbox"]:checked + label {background: url(../png/check_on.png) no-repeat 0 0px / contain;}
.agreement_ck input[type="checkbox"] {display: none;}
.contactus {width:860px; padding:30px 120px; border-top:2px solid #111111; border-bottom:1px solid #e1e1e1; background:#f7f7f7;}
.contactus ul {margin-bottom:10px;}
.contactus li {display:inline; margin-right:20px;}
.contactus li:last-child {margin-right:0px;}
.contactus li input::placeholder {font-size:15px; color:#878787;}
.contactus li input.txt_sm {width:418px; height:50px; border-radius:5px; border:1px solid #e8ebf1;}
.contactus li select {width:418px; height:50px; border-radius:5px; border:1px solid #e8ebf1;
     background:url('../png/icon_select.png') no-repeat 95% 50% #fff;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance : none;}

.contactus li.txtarea {margin-right:0px;}
.contactus li textarea::placeholder {font-size:15px; color:#878787;}
.contactus li.txtarea textarea {width:100%; height:150px; border-radius:5px; border:1px solid #e8ebf1; font-size:15px;}
.btn_contact {width:180px; height:50px; background:#3f78e0; color:#fff; text-align:Center; font-size:16px; border-radius:50px;}
.btn_contact:hover {background:#004097;}

/* 뉴스 리스트 */
.cards-list-col3 {margin-left: -22px}
.cards-list-col3 > div {float: left; width:350px; height: 370px; margin-left: 22px; margin-bottom: 22px; border: 1px solid #e9e9e9;}
.cards-list-col3 .img {height: 220px; overflow: hidden}
.cards-list-col3 .txts {padding: 25px 20px; text-align: center;}
.cards-list-col3 .txts h5 {font-size: 16px; font-weight: 300; height: 30px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cards-list-col3 .txts .txt {height: 42px;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word;}
.cards-list-col3 .txts .date {padding-top: 15px; font-size: 13px; color: #999; line-height: 1}

/* 동영상 컨텐츠 */
.movie-container {border: 1px solid #e9e9e9; height: 650px}
.movies-container {float: left; width:800px; position: relative; height: 650px; overflow: hidden}
.movies-container .movies {position: absolute; top:0; left:0;/* display: none*/}
.movie-container .movie-thumbs {float: right; width: 297px; border-left: 1px solid #e9e9e9; height: 650px; overflow-y: scroll;}
.movies-container .movie-info {position: relative; top:0; left:0;}
.movie-container .caption {padding: 30px 25px; background: #f8f8f8;}
.movie-container .caption h5 {float: left; width:90%; font-size: 22px} 
.movie-container .caption .date {float: right; width:10%; text-align: right} 
.movie-container .movies .txts {padding: 25px;}

.movie-thumbs-container {padding: 30px;}
.movie-thumbs-container .thumb {margin-bottom: 30px;}
.movie-thumbs-container .thumb h5 {padding: 5px 0; font-size: 13px}
.movie-thumbs-container .thumb .date {font-size: 11px}

/* 회사 소개 */
.about-trans {padding-top: 70px}
.about-trans > div {float: left; width: 50%; box-sizing: border-box;}
.about-trans > div h5 {margin-bottom: 25px; font-size: 20px; color:#003686;}
.about-trans .col2 {padding-left: 50px; border-left: 1px solid #e9e9e9;}

.people-right-container {margin-bottom: 85px}
.people-right-container h3 {font-size: 36px; color: #003686; line-height: 1.2; font-weight: 700; padding-bottom: 30px}
.people-right-container h3.pad-b20 {padding-bottom: 20px}
.people-right-container h3 .sub {font-size: 26px; font-weight: 300}
.people-right-container .cols {margin-bottom: 75px;}
.people-right-container .cols>div {float: left; width: 366px;}
.people-right-container .cols>div:first-child {width: 367px;}
.people-rights {display: table; width: 100%;}
.people-rights > .people-right-row {display: table-row;}
.people-rights > .people-right-row > div {display: table-cell; padding: 35px 0; vertical-align: middle}
.people-rights > .people-right-row > div.col1 {width: 220px; text-align: center}
.people-rights > .people-right-row > div.col2 {width: 280px; text-align: center; font-size: 23px; color: #003686;}
.people-rights > .people-right-row > div.col3 {width: 600px; padding-left: 40px; text-align: left}
.people-rights > .people-right-row > div.col2 strong {font-size: 34px; font-weight: 700;}
.people-rights > .people-right-row > div.col3 h6 {color: #003686; font-size: 20px; padding-bottom: 15px}

	/* 인재상 animation */
@keyframes poeple-ani {
	0% {opacity: 0; transform: scale(0.1);}
	100% {opacity: 1; transform: scale(1);}
}
.people-right-container .cols .img1.ani {animation:poeple-ani 1.2s ease 1;}
.people-right-container .cols .img2.ani {animation:poeple-ani 1.6s ease 1 0.8s;}
.people-right-container .cols .img3.ani {animation:poeple-ani 1.6s ease 1 1.6s;}
.people-plan-container {margin-bottom: 100px; text-align: left;}
.people-plan-container h3 {margin-bottom: 30px}
.people-plan-container h4 {font-size: 22px; color: #000; font-weight: 700; margin-bottom: 15px}
.people-plan-container h5 {font-size: 16px; color: #010101;}
.people-plan-container .up-img {margin-top: -50px; margin-bottom: 40px}
.people-plan-table {display: table; width: 100%; background: #fff;}
.people-plan-table > .people-plan-row {display: table-row;}
.people-plan-table > .people-plan-row > div {display: table-cell; padding: 30px 0; border-bottom: 1px solid #f6f6f6; vertical-align: middle}
.people-plan-table > .people-plan-row .col1, .people-plan-table > .people-plan-row .col3 {width: 140px; text-align: center;}
.people-plan-table > .people-plan-row .col2, .people-plan-table > .people-plan-row .col4 {width: 410px;}

/* ------------------------------------------------
 ** 연혁
 ------------------------------------------------*/
 .ksi-his {position: relative; margin-bottom: 100px;}
 .ksi-his .v-line {position: absolute; left:50%; top:0;margin-left: -1px; width:3px; background: #e9e9e9; height: 0; opacity: 0}
 .ksi-his-box {position: relative;}
 .ksi-his-box > .left {float: left; width: 50%;text-align: right;}
 .ksi-his-box > .right {float: right; width: 50%;}
 
 
 .ksi-his-box-title {position: relative; top:0; left:50%; margin-left: -300px; width: 600px; height: 120px; background: #0081cc; text-align: center; color: #fff; box-sizing: border-box; padding-top: 26px; margin-bottom: 80px}
 .ksi-his-box-title h3 {font-size: 26px; color: #fff; font-weight: 500;}
 .ksi-his-box-title p {font-size: 18px; font-weight: 100;}

 .ksi-his-box-title.movie-box-title3 h3{}

 .ksi-his-box .years {position: relative; margin-bottom: 160px}
 .ksi-his-box .years.last {margin-bottom: 0}
 .ksi-his-box > .left .years {right:-3px;}
 .ksi-his-box > .right .years {left:-3px;}
 .years h3 {float: left; width: 90px; position: relative; padding-left: 20px; line-height: 1; font-size: 26px; color: #002459;}
 .years h3:before {position: absolute; top:0; left:-7px; width:20px; padding: 10px 0; background: #fff;  content:'●';font-size: 10px; color: #0081cc; text-align: center;}
 .years .cont {float: left; padding-top: 5px;} 
 .ksi-his-box > .left .years .cont {float: right;}
 .years .cont.up {padding-top: 0; margin-top: -10px}
 .years .cont.up2 {padding-top: 0; margin-top: -25px}
 .ksi-his-box > .left .years h3 {float: right; padding-right: 20px}
 .ksi-his-box > .left .years h3:before {display: none}
 .ksi-his-box > .left .years h3:after {position: absolute; top:0; right:-7px; width:20px; padding: 10px 0; background: #fff;  content:'●';font-size: 10px; color: #0081cc; text-align: center;}

 .ksi-his .movie0 {top:100px; opacity: 0}
 .ksi-his .movie1 {top:100px; opacity: 0}
 .ksi-his .movie2 {top:100px; opacity: 0}
 .ksi-his .movie3 {top:100px; opacity: 0}
 .ksi-his .movie4 {top:100px; opacity: 0}
 .ksi-his .movie5 {top:100px; opacity: 0}
 .ksi-his .movie6 {top:100px; opacity: 0}
 .ksi-his .movie7 {top:100px; opacity: 0}
 .ksi-his .movie8 {top:100px; opacity: 0}

 .ksi-his .movie9 {top:100px; opacity: 0}
 .ksi-his .movie10 {top:100px; opacity: 0}
 .ksi-his .movie11 {top:100px; opacity: 0}
 .ksi-his .movie12 {top:100px; opacity: 0}

 .ksi-his .movie13 {top:100px; opacity: 0}
 .ksi-his .movie14 {top:100px; opacity: 0}
 .ksi-his .movie15 {top:100px; opacity: 0}
 .ksi-his .movie16 {top:100px; opacity: 0}
 .ksi-his .movie17 {top:100px; opacity: 0}
 .ksi-his .movie18 {top:100px; opacity: 0}

.ksi-his .movie-box-title1 {width:0; opacity: 0}
.ksi-his .movie-box-title2 {opacity: 0;}
.ksi-his .movie-box-title3 {opacity: 0}

 .sec-type1 {margin-bottom: 80px; text-align: center; }
 .sec-type1 h4 {font-size: 23px; color: #003686; line-height: 1; padding-bottom: 25px; letter-spacing: -0.5px}

 /* 누적 정보 */
 .sub-ksi-stat {height: 699px; background: url(../jpg/bg-stat.jpg) center center no-repeat;}
 .sub-ksi-stat .sub-title {font-size: 36px; color: #333; text-align: center; line-height: 1; font-weight: 700;}
 .sub-ksi-stat-inner {position: relative; width: 1100px; margin:0 auto; }
 .sub-stats-cols {padding-top: 170px; padding-left: 60px}
 .sub-stats-cols > div {float: left; width: 190px; height: 200px; padding-right: 45px;}
 .sub-stats-cols > div.h-oth {height: 150px}
 .sub-stats-cols > div.last {width: 270px;}
 .sub-stats-cols h5 {font-size: 18px; color: #333; font-weight: normal; padding-bottom: 15px; line-height: 1; border-bottom: 2px solid #a1aaba; margin-bottom: 10px}
 .sub-stats-cols p {line-height: 1; font-size: 22px; color: #333}
 .sub-stats-cols p strong {font-size: 50px}
 .sub-stat-graph {position: absolute; bottom: 20px; left: 540px; width:614px; height: 420px; background:  url(../png/bg-graph.png) 0 0 no-repeat; opacity: 0;}
 .sub-stat-graph.scr-ani {animation: stat-graph 0.8s ease 1 .4s; animation-fill-mode: forwards;}
 	/* 누적 정보 animate */
 @keyframes stat-graph {
 	0% {width:10px; opacity: 0.1}
 	20% {width:100px; opacity: 0.3}
 	40% {width:240px; opacity: 0.4}
 	60% {width:300px; opacity: 0.6}
 	80% {width:420px; opacity: 0.8}
 	100% {width: 518px; opacity: 1}
 }
 @keyframes ani-title1 {
 	0% { top:200px; opacity: 0;}
 	100% { top:60px; opacity: 1; }
 }
.ani-title1 {position: absolute; top:60px; width:100%;}
.ani-title1.scr-ani {animation: ani-title1 .8s ease 1;}

.info-list {padding-bottom: 100px}
.info-list > li {border-bottom: 1px solid #e9e9e9; height: 50px; line-height: 50px;  font-size: 16px; color: #333}
.info-list > li > label {float: left; width: 130px; box-sizing: border-box; padding-left: 38px; font-weight: 500;}
.info-list > li > div {float: left; width: 970px; box-sizing: border-box; padding-left: 50px}
.info-list > li:first-child > label {border-top: 2px solid #063b88;}
.info-list > li:first-child > div  {border-top: 2px solid #e9e9e9;}

	/* KSI 비전 */
.vision-bottom-content {height: 870px; background: url(../jpg/bg-vision-bottom.jpg) 0 bottom no-repeat; text-align: center;}
.vision-bottom-content .container {position: relative;}
.vision-bottom-content h3 {font-size: 40px; color: #003686; font-weight: 700; line-height: 1.2; position: absolute; top:100px; width: 100%; opacity: 0\0/IE8+9; opacity:1; \0/IE8+9;}
.vision-bottom-content h3.scr-ani {animation: ani-title2 0.6s ease 1; animation-fill-mode:forwards;}

@keyframes ani-title2 {
 	0% { top:150; opacity: 0; transform: scale(0);}
 	30% { top:90px; opacity: 0.4; transform: scale(0.6);}
 	60% { top:110px; opacity: 0.2; transform: scale(0.4);}
 	100% { top:100px; opacity: 1; transform: scale(1);}
 }
 .vision-bottom-content .r-img {position: absolute; top:250px; width: 100%; text-align: center}
 .vision-bottom-content .r-img img {opacity:1;}
 /*.vision-bottom-content .r-img img.scr-ani {animation: rotate-img 1s ease-in-out 1 .6s; animation-fill-mode:forwards;}*/
 @keyframes rotate-img {
 	0% {transform: rotate(0deg) scale(0); opacity: 0;}
 	33% {transform: rotate(360deg) scale(0.3); opacity: 0.4;}
 	66% {transform: rotate(0deg) scale(0.6); opacity: 0.6;}
 	100% {transform: rotate(-360deg) scale(1); opacity: 1;}
 }
 .vision-bottom-content .txt {position: absolute; top: 700px; width:100%; text-align: center; opacity: 0\0/IE8+9; opacity:1; \0/IE8+9;}
 .vision-bottom-content .txt.scr-ani {animation: txt .6s ease 1; animation-fill-mode:forwards;}
 @keyframes txt {
 	0% { top:800px; opacity: 0; transform: scale(0);}
 	100% { top:700px; opacity: 1; transform: scale(1);}
 }

.col2-mrl{margin-left: -20px}
.col2-mrl > div {float: left; width: 540px; padding-left: 20px; padding-bottom: 20px}


/* ------------------------------------------------
 ** 브랜드
 ------------------------------------------------*/
.brand-intro-box {padding-bottom: 80px; border-bottom: 1px solid #e9e9e9;}
.brand-intro-box .main-copy {font-size: 22px; color: #333; text-align: center; margin-bottom: 35px}
.tb-box-col2 {display: table; width: 100%;}
.tb-box-col2 > .row {display: table-row;}
.tb-box-col2 > .row>div {display: table-cell; width: 50%; vertical-align: middle; padding: 0 30px;}
.tb-box-col2 > .row>div:first-child {text-align: right; border-right: 1px solid #e9e9e9;}
.col3-box {margin-left: -25px}
.col3-box > div {float: left; width: 350px; margin: 0 0 25px 25px;}
.col3-box2 {margin-left: -10px}
.col3-box2 > div {float: left; width: 360px; margin: 0 0 10px 10px;}
.col2-box {margin-left: -26px}
.col2-box > div {float: left; width: 537px; margin: 0 0 26px 26px;}

.cardq-value {padding-left: 407px; padding-top: 15px; font-size: 16px}
.cardq-value li>strong {display: inline-block; width: 85px;}
.cardq-value.stopbook li>strong {display: inline-block; width: 140px;}
.brand-sns {text-align: center;}
.brand-sns > a {display: inline-block; width:50px; height: 50px; background: url(../png/bg-brand-sns.png) 0 0 no-repeat; margin: 0 5px; text-indent: -99999px}
.brand-sns > a.bl {background-position: 0 0;}
.brand-sns > a.fb {background-position: -62px 0;}
.brand-sns > a.ins {background-position: -124px 0;}
.brand-sns > a.ns {background-position: -186px 0;}
.brand-sns > a.bl:hover {background-position: 0 -60px;}
.brand-sns > a.fb:hover {background-position: -62px -60px;}
.brand-sns > a.ins:hover {background-position: -124px -60px;}
.brand-sns > a.ns:hover {background-position: -186px -60px;}
#duty-tab .tab-menu {width:360px; margin: 0 auto;}
#duty-tab .tab-content {margin-top: 100px}
#duty-tab .tab-content:first-child {margin-top: 50px}

/* ------------------------------------------------------ 
 *	온라인 카드 결제 페이지
 ------------------------------------------------------ */
.pay-wrap {width: 1000px; margin: 70px auto;}
.pay-wrap .heading {text-align: center; border-bottom: 2px solid #0081cc; padding-bottom: 20px}
.pay-wrap .heading p {font-size: 60px; color: #000;}
.pay-brands {padding: 30px 0 40px 0;}
.pay-brands > div {float: left; width: 25%; text-align: center; box-sizing: border-box; border-right: 1px solid #ededed;}
.pay-brands > div.last {margin-top: -10px; border-right: 0;}
.pay-form {background: #f8f8f8; border: 1px solid #ededed; padding: 30px 50px;}
.pay-form .pay-insert {font-size: 18px}
.pay-form .pay-insert > li>div {float: left; padding: 15px 0;}
.pay-form .pay-insert > li>div:first-child {width: 120px; font-size: 18px; color:#333; font-weight: 400;}
.pay-form .pay-insert > li>div.right {width: 758px;}
.pay-form .pay-insert .forms-tell.col4 > span {width:100px;}
.pay-form select {height: 37px}
.pay-form .pay-insert .forms-mail > span {width:230px;}
.pay-brands1 {margin-bottom: 50px;}
.pay-brands1 div {float: left; position: relative; width: 14.2%; height: 90px; line-height: 90px; text-align: center;}
.pay-brands1 img {vertical-align: bottom;}
.pay-brands1 div:before {content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 35px; background-color: #ededed;}
.pay-brands1 div:first-child:before {display: none;}


/* ------------------------------------------------------ 
 *	common style define
 ------------------------------------------------------ */

.line-gray { border-bottom: 1px solid #e7e7e7;}
.line-blue {border-bottom: 1px solid #1166a9;}
.no-data { padding: 60px 20px; background: #f7f7f7; font-size: 18px; color: #333; text-align: center; border-bottom: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9; }
.common-gubun {padding: 0 10px;}

	/* tab style */
.tab-menu:after {display: table; content: ""; line-height: 0; clear: both;}
.tab-menu > li { float: left; height: 44px; line-height: 44px; text-align: center}
.tab-menu > li > a { display: block; position: relative; box-sizing: border-box; background: #fff; border: 1px solid #e1e1e1;font-size: 16px; color: #000;}

.tab-menu > li > a.active { background: #0081cc;border: 1px solid #0081cc; color: #fff}

.tab-menu.col4 > li { width:25%;}
.tab-menu.col2 > li { width:50%;}
.tab-menu.col9 > li { width:11.111111%;}
.tab-menu.col10 > li { width:10%;}
.tab-content {display: none}
.tab-content.active {display: block}

	/* common form style */
.forms-mail > span {float: left; width:33.333333%; box-sizing: border-box; padding-right: 5px;}
.forms-mail > span.last {padding-right: 0}
.forms-mail > span.first {padding-right: 30px; position: relative;}
.forms-mail > span.first:after {position: absolute; top:8px; right: 8px; content: '@'}

.forms-tell > span {float: left; position: relative; width:34%; box-sizing: border-box; padding-right: 25px;}
.forms-tell > span.last {width:32%; padding-right: 0;}
.forms-tell input, .forms-tell select {width: 100%;}
.forms-tell > span:after {position: absolute; top:8px; right: 8px; content: '-'}
.forms-tell > span.last:after {display: none}
.forms-tell.col4 > span {width:24%;}
.forms-tell.col4 > span.wide {width:34%;}
.forms-tell.col4 > span.last {width: 18%; padding-right: 0;}





/** -------------------------------- 모달 윈도우 & view layer -------------------------------- */
.over-dim-layer { position: fixed; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); }

/* 모달작은 창 */
.modal-input { position: fixed; top: 50%; left: 50%; background: #fff; width: 400px; height: 200px; padding: 50px 20px; background: #fff; margin-left: -200px; margin-top: -100px; text-align: center; box-sizing: border-box; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25); z-index: 101; display: none; }

.modal-input .close { position: absolute; top: 5px; right: 5px; }

/* 모달디폴트-absolute 창 */
.modal-page-default { position: absolute; top: 150px; left: 50%; background: #fff; width: 500px; margin-left: -300px; box-sizing: border-box; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25); z-index: 101; display: none; }
.modal-page-default.w600 { width: 600px; margin-left: -300px; top: 100px; }
.modal-page-default.w700 { width: 700px; margin-left: -350px; top: 100px; }
.modal-page-default.w800 { width: 800px; margin-left: -400px; top: 100px; }
.modal-page-default.w1000 { width: 1000px; margin-left: -500px; top: 100px; }

/* 모달디폴트-fix 창 */
.modal-fix-default { position: fixed; top: 50%; left: 50%; background: #fff; width: 500px; margin-left: -250px; margin-top: -100px; box-sizing: border-box; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25); z-index: 101; display: none; }
.modal-fix-default.w500 { width: 500px; margin-left: -250px; }
.modal-fix-default.w600 { width: 600px; margin-left: -300px; }
.modal-fix-default.w700 { width: 700px; margin-left: -350px; }
.modal-fix-page-attend {position: fixed; width:600px; left:50%; top:0; margin-left: -300px; box-sizing: border-box; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.25); z-index: 101; display: none; }

/* close button */
.modal-close1 {position: absolute; top:0; right: 0}
.modal-close2 {position: absolute; top:0; right: -40px}




/* ------------------------------------------------
** 게시판 업로드용 구분자 bbs-in
---------------------------------------------------- */
.bbs-in-heading1 {position: relative; font-size: 40px; font-weight: 700; color:#333; padding: 0.5em 0 1em; line-height: 1; margin-bottom: 0.3em;}
.bbs-in-heading1:after {position: absolute; top: 2em; left: 50%; margin-left: -1.5em; width:3em; height: 2px; background: #063b88; content: ''}
.bbs-in-heading2 {font-size: 36px; font-weight: 700; color:#333;padding: 0.5em 0; line-height: 1; margin-bottom: 0.25em;}
.bbs-in-subtit1 {font-size: 24px; font-family: 'Nanum Myeongjo', serif; font-weight: 600; color: #808080; letter-spacing: -0.5px}
.bbs-in-hash {font-family: 18px; color:#003686;}

.bbs-in-sec1 {padding: 20px 0 40px; margin-bottom: 30px; border-bottom: 1px solid #e9e9e9;}
.bbs-in-sec1.no-bd {border-bottom: none;}

/* CI 소개 */
.sub-top-container.ci {background: url("../jpg/bg-sub-top-prm5.jpg") center top no-repeat;}
.ci h2, .ci h3, .ci .copy {color: #fff;}
.ci-btn {margin: 70px 0 150px;}
.ci-btn a {display: inline-block; width: 200px; height: 50px; overflow: hidden; position: relative; line-height: 48px; border: 1px solid #1c4295; font-size: 16px; font-weight: 500; color: #333; outline: 0; box-sizing: border-box;}
.ci-btn i {position: absolute; left:0; top:0; z-index: -1; width: 5px; height:100px; background: #fff; opacity: 0; transition: 1s ease;}
.ci-btn a:hover {color: #fff;}
.ci-btn a:hover i {opacity: 1; transform: scaleX(200); background: #1c4295;}
.ci-btn span {display: inline-block; width: 12px; height: 12px; margin-right: 7px; background: url("../png/ci-down.png") no-repeat;}
.ci-btn a:hover span {background-position: -22px 0;}
.ci-btn a:first-child {margin-right: 25px;}
.sub-main-title.ci {font-size: 48px; font-weight: 500;}
.sub-main-title.ci:after {top: 162px;}
.ci-bg {margin: 80px 0;}

/* duty 직무소개 */
.duty-wrap {width: 1075px; margin: 0 auto 50px;}
.duty-tab li {float: left; width: 16.66%; text-align: center;}
.duty-tab a {display: inline-block; width: 100%; height: 43px; line-height: 43px; border: 1px solid #d2d2d2; border-left: 0; font-size: 15px; color: #303030; font-weight: normal; box-sizing: border-box;}
.duty-tab li:first-child a {border-left: 1px solid #d2d2d2;}
.duty-tab a:hover, .duty-on a {background-color: #0081cc; color: #fff;}
.duty-tab a:focus {outline: 0;}
.duty-contents {margin-top: 50px; margin-left: 16px;}
.duty-contents li {float: left; margin-bottom: 40px;}
.duty-content {margin-bottom: 60px;}
.duty-title {position: relative; margin-bottom: 60px; font-size: 21px; color: #303030; font-weight: bold;}
.duty-title:after {content: ""; position: absolute; top: 40px; left: 0; width: 45px; height: 5px; background-color: #0081cc;}
.duty-img li {width: 353px; line-height: 130px;}
.duty-img img {vertical-align: middle;}
.duty-img1 li {width: 510px;}