@charset "utf-8";

@import url('/css/individual/common_2016.css');

/* 서브메인 */
#wrapper { width:100%; position:relative;} /* common_2016 */
#container.submain { width:1110px; margin:45px auto 100px; position:relative; padding:0 10px;}
#container.submain h2 { font-size:30px; font-family:'RixGoB'; font-weight:normal; line-height:30px; color:#000; text-align:center;}

/* 롤링 */
#subVisual { margin-top:30px;}
#subVisual .subvisWrap { margin:0 auto;}
#subVisual .visualSlider { width:1110px; height:300px; position:relative; overflow:hidden}
#subVisual .visualSlider .slides > li { width:1110px; height:300px;}
#subVisual .visualSlider .slides > li h3, #subVisual .visualSlider .slides > li ul {height:0; width:0; font-size:0; line-height:0; overflow:hidden; left:-9999px; top:-9999px;}
#subVisual .visualSlider .flex-control-nav { width:1110px; position:relative; left:0; top:0; display:block; margin:0 auto;  z-index:10;}
#subVisual .visualSlider .flex-control-nav li { float:left; position:relative; left:45px; top:30px; width:10px;height:10px; margin-left:3px !important;}
#subVisual .visualSlider .flex-control-nav li a { width:10px;height:10px; text-indent:-9999px; display:block; background:url('/images/individual/2016/common/ico_roll_g.png') no-repeat 0 0;}
#subVisual .visualSlider .flex-control-nav li a.flex-active { background:url('/images/individual/2016/common/ico_roll_over_g.png') no-repeat 0 0 !important;}
#subVisual .visualSlider .flex-direction-nav {display:none;}
#subVisual .visualSlider .flex-pauseplay { width:1110px; position:relative; left:0; top:0; display:block; margin:0 auto; z-index:10;}
#subVisual .visualSlider .flex-pauseplay a { width:8px; height:10px; text-indent:-9999px; display:block; position:relative; left:30px; top:30px; }
#subVisual .visualSlider .flex-pauseplay .flex-pause {background:url('/images/individual/2016/common/btn_pause_g.png') no-repeat 0 0;}
#subVisual .visualSlider .flex-pauseplay .flex-play {background:url('/images/individual/2016/common/btn_play_g.png') no-repeat 0 0;}
#subVisual .visualSlider .textBlock { padding:70px 0 0 555px; height:230px; display:block; margin:0 auto;}
#subVisual .visualSlider a.textBlock { text-decoration:none; cursor: inherit;}
#subVisual .visualSlider .textBlock h3 { font-family:'RixGoM'; font-weight:normal; font-size:20px; line-height:20px;}
#subVisual .visualSlider .textBlock strong {font-family:'RixGoB'; font-weight:normal; font-size:40px; line-height:48px; display:block; margin-top:10px;}
#subVisual .visualSlider .textBlock ul { margin-top:5px;}
#subVisual .visualSlider .textBlock ul li { font-size:14px; font-family:RixGoM; line-height:24px; padding-left:15px;}
#subVisual .visualSlider .textBlock.white { color:#fff !important}
#subVisual .visualSlider .textBlock.black { color:#000 !important}
#subVisual .visualSlider .textBlock.white ul li { background:url('/images/individual/2016/common/bul_roll_w.gif') no-repeat 0 9px;}
#subVisual .visualSlider .textBlock.black ul li { background:url('/images/individual/2016/common/bul_roll_b.gif') no-repeat 0 9px;}

/* 2017-09-04 롤링 배경 흰색일때 인디케이터 색 변경 */
#subVisual .visualSlider.ctrl_grey .flex-control-nav li a {background:url('/images/individual/2016/common/ico_roll_g.png') no-repeat 0 0;}
#subVisual .visualSlider.ctrl_grey .flex-pauseplay .flex-pause {background:url('/images/individual/2016/common/btn_pause_g.png') no-repeat 0 0;}
#subVisual .visualSlider.ctrl_grey .flex-pauseplay .flex-play {background:url('/images/individual/2016/common/btn_play_g.png') no-repeat 0 0;}

#subVisual .visualSlider .flex-pauseplay {display:none;}
#subVisual .visualSlider .flex-pauseplay01 {position:relative; left:0px; top:0; z-index:10; width:1110px; margin:0 auto;}
#subVisual .visualSlider .flex-pauseplay01 button {display:block; overflow:hidden; position:absolute; left:30px; top:30px; width:8px; height:10px; text-indent:-9999px;}
#subVisual .visualSlider .flex-pauseplay01 .btn_pause {display:none; background:url('/images/individual/2016/common/btn_pause_g.png') no-repeat 0 0;}
#subVisual .visualSlider .flex-pauseplay01 .btn_play {display:none; background:url('/images/individual/2016/common/btn_play_g.png') no-repeat 0 0;}

#subVisual .tabSlide { width:1110px; margin:0 auto; overflow:hidden;}
#subVisual .tabSlide > li { float:left; height:55px; border-bottom:1px solid #cacaca; display:block; text-align:center; line-height:56px; font-family:'RixGoB'; font-weight:normal; font-size:14px; color:#000;}
#subVisual .tabSlide.col2 > li { width:50%;}
#subVisual .tabSlide.col3 > li { width:33%;}
#subVisual .tabSlide.col4 > li { width:25%;}
#subVisual .tabSlide.col5 > li { width:20%;}
#subVisual .tabSlide.col6 > li { width:16.6%;}
#subVisual .tabSlide > li a { display:block; height:57px;;}
#subVisual .tabSlide > li.on a { background:url('/images/individual/2016/common/bg_roll_3px.gif') repeat-x 0 bottom;}

/* 시리즈카드, 공공카드 */
.seriesCard,
.publicCard { margin-top:70px;}
.seriesCard h3,
.publicCard h3 { height:42px; border-bottom:1px solid #000000; font-family:'RixGoB'; font-weight:normal; font-size:22px; line-height:22px; color:#000;}
.seriesCard .seriesCardInfo,
.publicCard .publicCardInfo { width:100%; margin:30px auto 0;}
.seriesCard .seriesCardInfo > ul,
.publicCard .publicCardInfo > ul { overflow:hidden; }
.seriesCard .seriesCardInfo > ul:after,
.publicCard .publicCardInfo > ul:after {content:""; display:block; clear:both;}
.seriesCard .seriesCardInfo > ul > li,
.publicCard .publicCardInfo > ul > li { float:left; width:255px; margin:0 0 0 30px;}
.seriesCard .seriesCardInfo > ul > li:first-child,
.publicCard .publicCardInfo > ul > li:first-child {margin-left:0;}
.seriesCard .seriesCardInfo > ul > li > a {display:block;}
.publicCard .publicCardInfo > ul > li > a {display:block;}
.seriesCard .seriesCardInfo > ul > li .thumb img,
.publicCard .publicCardInfo > ul > li .thumb img {width:255px; height:160px;}
.seriesCard .seriesCardInfo > ul > li .tit,
.publicCard .publicCardInfo > ul > li .tit {margin-top:15px; font-family:'RixGoB'; font-weight:normal; font-size:16px; color:#000; line-height:25px; word-break:keep-all;}
.seriesCard .seriesCardInfo > ul > li .tit > span,
.publicCard .publicCardInfo > ul > li .tit > span {font-family:RixGoM; font-weight:normal; font-size:14px;}

/* 추천카드 */
.recommCard { margin-top:70px;}
.recommCard h3 { height:42px; font-family:'RixGoB'; font-weight:normal; font-size:22px; line-height:22px; color:#000;}
.recommendCard .cardListWrap {position:relative;}
.recommendCard .cardListWrap .listWrap {overflow:hidden; position:relative; height:190px;}
.recommendCard .cardListWrap .listWrap ul {position:absolute; left:0; top:0; width:285px;}
/* vertical롤링 .recommendCard .cardListWrap .listWrap li em {display:block; position:absolute; top:-190px; width:255px; height:160px; text-indent:-9999px;} */
.recommendCard .cardListWrap .listWrap li em {display:block; position:absolute; left:-1110px; width:255px; height:160px; text-indent:-9999px; font-size:0;}
.recommendCard .cardListWrap .listWrap .list01 em {background:url('/images/individual/2016/card/card_company01.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list02 em {background:url('/images/individual/2016/card/card_company02.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list03 em {background:url('/images/individual/2016/card/card_company03.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list04 em {background:url('/images/individual/2016/card/card_company04.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list05 em {background:url('/images/individual/2016/card/card_company05.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list06 em {background:url('/images/individual/2016/card/card_company06.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list07 em {background:url('/images/individual/2016/card/card_company07.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list08 em {background:url('/images/individual/2016/card/card_company08.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list09 em {background:url('/images/individual/2016/card/card_company09.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list10 em {background:url('/images/individual/2016/card/card_company10.jpg') no-repeat 0 0;}
.recommendCard .cardListWrap .listWrap .list11 em {background:url('/images/individual/2016/card/card_company11.jpg') no-repeat 0 0;}

/* vertical롤링 .recommendCard .cardListWrap .listWrap .item {visibility:hidden; overflow:hidden; position:absolute; top:-190px; left:285px; width:825px; opacity:0;} */
.recommendCard .cardListWrap .listWrap .item {visibility:hidden; overflow:hidden; position:absolute; left:-825px; width:825px; opacity:0;}
.recommendCard .cardListWrap .listWrap .item a {display:block; float:left; margin:0 0 0 30px; width:255px; height:190px; text-align:center;}
.recommendCard .cardListWrap .listWrap .item a:first-child {margin-left:0;}
.recommendCard .cardListWrap .listWrap .item a img {width:255px; height:160px;}
.recommendCard .cardListWrap .listWrap .item a p {margin-top:10px; font-family:'RixGoB'; font-weight:normal; font-size:16px; color:#000; line-height: 16px; text-align:left;}

.recommendCard .cardListWrap .btnControl {position:relative;  z-index:10; height:55px; margin-bottom:30px; border-bottom:1px solid #cacaca;}
.recommendCard .cardListWrap .btnControl:after{content:""; display:block; clear:both;}
.recommendCard .cardListWrap .btnControl a {float:left;} 
.recommendCard .cardListWrap .btnControl ul {overflow:hidden; float:left; z-index:20; width:630px;}
.recommendCard .cardListWrap .btnControl ul li {float:left; width:210px; height:56px; line-height:55px; color:#666666; font-family:RixGoL; font-weight:bold; font-size:14px; text-align:center;}

.recommendCard .cardListWrap .btnPrev,
.recommendCard .cardListWrap .btnNext,
.recommendCard .cardListWrap .btnPlay,
.recommendCard .cardListWrap .btnStop {display:block; text-indent:-9999px; background:#f6f6f6 url('/images/individual/2016/card/ico_card_control.png') no-repeat 0 0;}
.recommendCard .cardListWrap .btnPrev {z-index:20; width:210px; height:55px; background-position:98px 17px; }
.recommendCard .cardListWrap .btnNext {z-index:20; width:210px; height:55px; margin-right:5px; background-position:98px -44px;}
.recommendCard .cardListWrap .btnPlay {z-index:20; width:55px; height:55px; background-position:22px -164px;}
.recommendCard .cardListWrap .btnStop {z-index:20; width:55px; height:55px; background-position:22px -104px;}
.recommendCard .cardListWrap .btnStop.on {z-index:20; width:55px; height:55px; background-position:22px -164px;}

.recommendCard .cardListWrap .btnControl .listNameWrap {overflow:hidden; float:left; position:relative; width:630px; height:56px;}
.recommendCard .cardListWrap .btnControl .listName {overflow:visible; position:absolute; left:0; top:0; height:56px;}
.recommendCard .cardListWrap .btnControl .listName:after {display:block; content:''; clear:both;}
.recommendCard .cardListWrap .btnControl .listName li {float:left; font-family:'RixGoB'; font-weight:normal; color:#666666;}
.recommendCard .cardListWrap .btnControl .listName li.on {background:url('/images/individual/2016/common/bg_roll_2px.gif') repeat-x 0 bottom;  font-family:'RixGoB'; font-weight:normal; color:#000000;}

/* 2017-08-21 bx 로 교체 */
.recommendCard .cardListWrap .btnControl.bx_type .listNameWrap {}
.recommendCard .cardListWrap .btnControl.bx_type .listNameWrap .bx-controls {display:none;}

.recommendCard .cardListWrap .listWrap.bx_type .slides {}
.recommendCard .cardListWrap .listWrap.bx_type li {*zoom:1;}2017-12-26
.recommendCard .cardListWrap .listWrap.bx_type li:after {display:block; content:""; clear:both;}
.recommendCard .cardListWrap .listWrap.bx_type li em {position:static; float:left; margin-right:30px;}
.recommendCard .cardListWrap .listWrap.bx_type .item {visibility:visible; opacity:1; float:left; position:static;}
.recommendCard .cardListWrap .listWrap.bx_type .bx-controls {display:none;}


/* 하단 배너 영역 */
.bannerCont { margin-top:70px; overflow:hidden;}
.bannerCont .banner { float:left; height:67px; border-left:1px solid #cacaca;}
.bannerCont .banner:first-child { border-left:0;}
.bannerCont .banner.icon1 { width:226px; padding-left:143px; background:url('/images/individual/2016/card/ico_bn1.gif') no-repeat 73px 0;}
.bannerCont .banner.icon2 { width:233px; padding-left:136px; background:url('/images/individual/2016/card/ico_bn2.gif') no-repeat 66px 0;}
.bannerCont .banner.icon3 { width:327px; padding-left:227px; background:url('/images/individual/2016/card/ico_bn3.gif') no-repeat 170px 0;}
.bannerCont .banner.icon4 { width:360px; padding-left:190px; background:url('/images/individual/2016/card/ico_bn4.gif') no-repeat 130px 0;}
.bannerCont .banner > a { display:block; height:50px; color:#484848;}
.bannerCont .banner > a > p { line-height:30px; font-family:'RixGoB'; font-weight:normal; font-size:18px;}
.bannerCont .banner > a > p > span { line-height:20px; font-family:'RixGoB'; font-weight:normal; font-size:13px; display:block;}

/* 온라인 카드신청 > 추천카드로 개편 2018-01-23 */
.onlinecard-application {*zoom:1; position:relative;}
.onlinecard-application:after {display:block; content:''; clear:both;}
.onlinecard-application .ctrl-wrap {*zoom:1; position:absolute; right:0; top:-13px;}
.onlinecard-application .ctrl-wrap:after {display:block; content:''; clear:both;}
.onlinecard-application .btn-next,
.onlinecard-application .btn-prev,
.onlinecard-application .btn-stop {display:block; float:left; width:55px; height:55px; margin-left:5px; text-indent:-9999px; background:#f6f6f6 url('/images/individual/2016/card/ico_card_control.png') no-repeat 0 0;}
.onlinecard-application .btn-next {background-position:20px -44px;}
.onlinecard-application .btn-prev {background-position:20px 16px;}
.onlinecard-application .btn-stop {background-position:22px -104px;}
.onlinecard-application .btn-stop.on {background-position:22px -164px;}
.onlinecard-application .bx-controls {display:none;}
.onlinecard-application .left-fix-area {float:left; width:255px; height:65px; margin:30px 30px 0 0; padding-top:95px; font-size:18px; font-family:RixGoEB; text-align:center; background:url('/images/individual/2016/card/ico_onlinecard_left_fix.png') 50% 44px no-repeat;}
.onlinecard-application .seriesCardInfo {float:left; position:relative; width:auto; margin-left:-30px;}
.onlinecard-application .seriesCardInfo:before {display:block; content:""; position:absolute; left:0; top:0; z-index:30; width:30px; height:100%; background-color:#fff;}
.onlinecard-application .slides .thumb img {width:255px; height:160px;}
.onlinecard-application .slides {*zoom:1; width:1110px;}
.onlinecard-application .slides:after {display:block; content:""; clear:both;}
.onlinecard-application .slides > li {float:left; width:255px; padding-left:30px;}
.onlinecard-application .slides > li > a {display:block;}
.onlinecard-application .slides > li .tit {margin-top:15px; font-family:'RixGoB'; font-weight:normal; font-size:16px; color:#000; line-height:25px; word-break:keep-all;}
.onlinecard-application .slides > li .tit > span {font-family:RixGoM; font-weight:normal; font-size:14px;}