@charset "utf-8";

/*변액펀드 익스플로러 사용안내*/
.var-ie-info {padding-top:20px;}
.var-exp-box1 p {padding:10px 0;}
.var-exp-box1 em {color:#333; font-size:14px;}
.var-exp-sam1 {border:1px #c9c9c9 solid; background:#f5f5f5; padding:10px 20px; margin:20px 0;}
.var-exp-sam1 p {padding:5px 0;}
.var-exp-box2 {color:#e4007f; padding:20px 0 30px 0;}

/*변액펀드 사용법보기190102*/
.var_how_box li {margin:8px 0; width:100%;}
.var_how_box .var_how_list1 {background: url(/img/var/var_how_list.jpg) no-repeat 0 0px; display:inline-block;  height:20px;  padding-left:33px;}
.var_how_box .var_how_list2 {background: url(/img/var/var_how_list.jpg) no-repeat 0 -20px; display:inline-block;  height:20px;  padding-left:33px;}
.var_how_box .var_how_list3 {background: url(/img/var/var_how_list.jpg) no-repeat 0 -40px; display:inline-block;  height:20px;  padding-left:33px;}
.var_how_box .var_how_list4 {background: url(/img/var/var_how_list.jpg) no-repeat 0 -60px; display:inline-block;  height:20px;  padding-left:33px;}
.var_how_box .var_how_list5 {background: url(/img/var/var_how_list.jpg) no-repeat 0 -80px; display:inline-block;  height:20px;  padding-left:33px;}
.var_how_box .var_how_list6 {background: url(/img/var/var_how_list.jpg) no-repeat 0 -100px; display:inline-block;  height:20px;  padding-left:33px;}
.var_how_box .var_how_list7 {background: url(/img/var/var_how_list.jpg) no-repeat 0 -120px; display:inline-block;  height:20px;  padding-left:33px;}
.var_how_box .var_how_list8 {background: url(/img/var/var_how_list.jpg) no-repeat 0 -140px; display:inline-block;  height:20px;  padding-left:33px;}
.var_how_box .var_how_list9 {background: url(/img/var/var_how_list.jpg) no-repeat 0 -160px; display:inline-block;  height:20px;  padding-left:33px;}
.var_pop .pop_con2 {width:850px;}
.var_pop .pop_con2 .pop-header {height:55px; background:#008584; position:relative;}
.var_pop .pop_con2 .pop-header .top-area{padding:15px 0 18px 25px; text-align:left;}
.var_pop .pop_con2 .pop-header .pop_close_btn a {position:absolute;top:20px;right:20px; background:url(/img/var/pop_close.gif) no-repeat; width:18px; height:18px; display:block; text-indent:-9999px;}
.var_pop .pop_con2 .pop-content2 {width:777px; margin:0 auto; padding:40px 0;}

 /*변액자산관리181203*/
/* 230927 2023웹접근성 추가수정 */
span.btn-var1 {display:inline-block;  height:26px;} 
span.btn-var1 a{background:#fff url(/img/var/btn_list_04.png) no-repeat center left 10px; display:inline-block; width:80px; font-size:13px; padding-right:15px;  color:#666; line-height:26px; letter-spacing:-1px; border:1px solid #a4aeae; border-radius:2px;}
span.btn-var2 {display:inline-block;  height:26px;} 
span.btn-var2 a{background:#fff url(/img/var/btn_list_03.png) no-repeat center left 15px; display:inline-block; width:80px; font-size:13px; padding-right:20px; color:#666; line-height:26px; letter-spacing:-1px; border:1px solid #a4aeae; border-radius:2px;}
span.btn-var5 {display:inline-block;  height:26px;} 
span.btn-var5 a{background:#fff; display:inline-block; width:80px; font-size:13px; text-align:center; padding:0 10px; color:#666; line-height:26px; letter-spacing:-1px;  border:1px solid #a4aeae; border-radius:2px;}
span.btn-var6 {display:inline-block;  height:26px;} 
span.btn-var6 a{background:#fff;  display:inline-block; font-size:13px; padding:0 10px;  color:#666; line-height:26px; letter-spacing:-1px; border:1px solid #a4aeae; border-radius:2px;}
/* //230927 2023웹접근성 수정 */

/* visual */
.visual {margin:0px 0 25px 0px;padding:20px 0 20px 10px;border-top:1px solid #e2e2e2;border-bottom:1px solid #b2b2b2;
 background:url('/img/var/sub_vi_01.jpg') no-repeat; }
.visual_2{height:159px;}
.visual p.title1 {padding:29px 0 20px 0;}
.visual p.title2 {padding-top:16px;}
.visual ul.type1 {margin-top:6px;}
.visual ul.type2 {margin-top:15px;}
.visual ul.type3 {margin-top:0;}
.visual ul li {line-height:180%;padding-left:7px;background:url('/img/common/blt-img.gif') no-repeat 0 10px;letter-spacing:-1px;font-size:13px;color:#666}
.visual .btn {margin-top:25px;margin-left:1px}
.visual .btn a{display: inline-block;}

 .visual_1 {margin:0px 0 25px 0px;padding:20px 0 20px 10px;border-top:1px solid #e2e2e2;border-bottom:1px solid #b2b2b2;
 background:url('/img/var/sub_vi_02.jpg') no-repeat; }
.visual_3{height:159px;}
 .visual_1 .txt em {color:#ea0061; font-weight:bold; font-size: 16px;}
.visual_1 p.title1 {padding:29px 0 20px 0;}
.visual_1 p.title2 {padding-top:16px;}
.visual_1 ul.type1 {margin-top:6px;}
.visual_1 ul.type2 {margin-top:15px;}
.visual_1 ul.type3 {margin-top:0;}
.visual_1 ul li {line-height:180%;padding-left:7px;background:url('/img/common/blt-img.gif') no-repeat 0 10px;letter-spacing:-1px;font-size:13px;color:#666}
.visual_1 .btn {margin-top:25px;margin-left:1px}
.visual_1 .btn a{display: inline-block;}

.visual_ht{height:349px;}
.var-bg-01 {background-position:right 50%}

/*레프트메뉴*/
#snb {width:200px; float:left; margin-top:66px; }
#snb .tit {display:block; margin-bottom:22px;}
#snb ul {border-top:2px solid #008485; }
#snb ul > li:first-child {border-top:0;}
#snb ul > li {border-top:1px solid #cdcdcd;  margin-top:-1px;}
#snb ul > li > a {text-decoration:none; display:block;}
#snb ul > li > a .menu{display:block; font-size:14px; color:#454545; padding:7px 10px 10px 7px;letter-spacing:-1px; border-bottom:1px solid #cdcdcd; }
#snb ul >.on > a .menu{font-size:16px; font-weight:bold;color:#008485;  background: url(/img/common/snb-bullet.gif) no-repeat 183px center;letter-spacing:-1px;}


#snb .sub {display:none; background:#f6f6f6; margin-top:1px; padding:5px 0 5px;border-bottom:1px solid #b2b2b2;}
#snb .sub .s-menu {border:0; margin-left:10px;}
#snb .sub .s-menu li{border:0;  line-height:26px; height:auto;}
#snb .sub .s-menu li a{display:block; font-size:12px; min-height:26px;  line-height:26px; letter-spacing:-1px;}

#snb .sub .s-menu li > a:hover{display:block; background:#008485; color:#fff; font-size:12px; width:185px; font-weight:normal; margin-left:-5px; padding-left:5px; letter-spacing:-1px;}
#snb .sub .s-menu li.on {background:#008485; width:190px; margin-left:-5px; }
#snb .sub .s-menu li.on > a{display:block; background: url(/img/common/snb-s-bullet.gif) no-repeat 8px center; margin-left:0px !important; padding:0 0 0 16px;  color:#fff;  }
#snb .sub .s-menu li.on > a:hover{text-decoration:none;}

#snb .sub .s-menu .m-var {line-height:15px; padding:0px 0 0px 0;}
#snb .sub .s-menu .m-var a {line-height:15px; padding:5px 0 5px 0;}
#snb .sub .s-menu .m-var > a:hover{display:block; background:#008485; color:#fff; font-size:12px; width:185px; font-weight:normal; margin-left:-5px; padding-left:5px; letter-spacing:-1px;}
#snb .sub .s-menu .m-var.on {background:#008485; width:190px; margin-left:-5px; }
#snb .sub .s-menu .m-var.on  > a{display:block; background: url(/img/common/snb-s-bullet.gif) no-repeat 8px 11px; margin-left:0px !important; padding:5px 0 5px 16px;color:#fff; line-height:15px;}
#snb .sub .s-menu .m-var.on > a:hover{text-decoration:none;}

#snb .sub .s-menu .m-var-box { margin-left:0px; width:185px; padding-left:0px;}
#snb .sub .s-menu .m-var-box ul {border-top:none;}
#snb .sub .s-menu .m-var-box li a {margin-left:-5px;padding-left:0; width:174px; line-height:26px; min-height:20px; padding:0px 0 0 16px; color:#666;}
#snb .sub .s-menu .m-var-box li a:hover {color:#fff; margin-left:-5px;}
#snb .sub .s-menu .m-var-box li.on {background:#008485; margin-left:-5px;padding-left:0; width:174px; line-height:26px; min-height:20px; padding:0px 0 0 16px; color:#fff;}
#snb .sub .s-menu .m-var-box li.on a {background:#008485; margin-left:-5px;padding-left:0; width:174px; line-height:26px; min-height:20px; color:#fff;}

#snb .sub .s-menu li.on > .m-var-box {margin-left:0px; width:185px; padding-left:5px; background:#f6f6f6;}
#snb .sub .s-menu li.on > .m-var-box ul {border-top:none;}
#snb .sub .s-menu li.on > .m-var-box li a {margin-left:-5px;padding-left:0; width:174px; line-height:26px; min-height:20px;  padding:0px 0 0 16px; color:#666;}
#snb .sub .s-menu li.on > .m-var-box li a:hover {color:#fff; margin-left:-5px}
#snb .sub .s-menu li.on > .m-var-box li.on {background:#008485; margin-left:-5px;padding-left:0; width:174px; line-height:26px; padding:0 0 0 16px; color:#fff;}
#snb .sub .s-menu li.on > .m-var-box li.on a {background:#008485; margin-left:-5px;padding-left:0; width:174px; line-height:26px; color:#fff;}


/*게시판*/
.board-type1 .var_boadr_view {widht: 688px; padding:30px 0; }
 
 /* 공시실 하단 박스 */
.anm-btm-box {padding:15px 20px; border:1px solid #E2E2E2;}
.anm-btm-box ul {}
.anm-btm-box ul .txin {text-indent:-16px; padding-left:16px; margin-bottom:10px;}
.anm-btm-box {}

/*sns공유하기*/
.var-sns-box {display: none; position:absolute; top:30%; left:40%; background:#fff;}/*20190906*/
.var-sns-box .dim {position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0.1;filter:alpha(opacity=10);text-indent: -5000px;}/*20190916*/
.var-sns {width:300px; border:1px solid #666; position:relative; padding:10px 20px 20px 20px;}/*20190906*/
.var-sns h2 {border-bottom:1px solid #999; margin-bottom:20px; padding-bottom:10px; font-size:14px;}
.var-sns-list {padding-bottom:30px;}
.var-sns-list li {float:left; width:72px; padding:0 0 0 0; text-align:center; letter-spacing:-1px;}
.var-sns-list li a {display: block;}/*20190916*/
.var-sns-list li span {background: url(../img/var/sns-list.gif) no-repeat; width:45px; height:45px; display:block; margin:0 auto;}
.var-sns-list .sns-box1 span {background-position:0 0;}
.var-sns-list .sns-box2 span {background-position:0 -45px;}
.var-sns-list .sns-box3 span {background-position:0 -90px;}
.var-sns-list .sns-box4 span {background-position:0 -135px;}
.var-sns-list .sns-box5 span {background-position:0 -180px;}
.var-sns-in {width:100%; padding:50px 0 0 0; text-align:center;}/*20190906*/
.var-sns-in input {padding:0 10px; width: calc(100% - 20px);}/*20190906*/
.sns-colse a {position:absolute; top:10px; right:15px; background:url('../img/var/sns_close.gif') no-repeat; width:18px; height:18px; display:block; text-indent:-9999px;}
.shareUrl{display: inline-block; width:60px; height:45px; color: #fff; line-height: 45px; background:#686d74; cursor: pointer; margin-left: 12px; border: 1px solid #757e8a;}/*20190906*/
.shareUrl:hover{text-decoration:underline;}

/*h3*/
.tit-area-var h3 {float:left; background:#333;}

/*변액펀드 수익률조회*/
.var-check {border:1px solid #ababab; border-top:solid 2px #3eb8b9; padding:0 10px 5px 10px;}
.var-check li {overflow:hidden; height:26px;vertical-align:bottom; padding:10px 0 10px 0;}
.var-check .unline {border-bottom:1px solid #dcdcdc;}
.var-check input[type="radio"] {z-index:-1;overflow:hidden;position:static;left:0;top:0;width:1px;height:1px;font-size:0;line-height:0;opacity:0;}
.var-check input[type="radio"] + label {display:inline-block;position:relative;padding:0 0 0 30px;min-height:26px;vertical-align:top;line-height:normal; font-size:14px;  font-weight:bold; line-height:26px; color:#008485;}
.var-check input[type="radio"] + label:after {content:'';display:inline-block;position:absolute;left:0;top:0px;width:26px;min-height:26px;vertical-align:top;background:url('/img/var/radio_off.gif') no-repeat 0 0;background-size:26px 26px;}
.var-check input[type="radio"] {position:static;}
.var-check input[type="radio"]:checked + label{color:;}
.var-check input[type="radio"]:checked + label:after {background:url('/img/var/radio_on.gif') no-repeat 0 0;background-size:26px 26px;}
.var-check .fr select { vertical-align:middle;}
.var-check-gr {font-size:13px; font-weight:normal; color:#333;}

.board-type-var input[type="checkbox"] {position: absolute;width: 1px;height: 1px;}/*2020웹접근성수정*/
.board-type-var input[type="checkbox"] + label {display:inline-block;position:relative;padding:1px 0 0 10px;min-height:1px;font-size:11px;vertical-align:middle;line-height:normal; }
.board-type-var input[type="checkbox"] + label:after {content:'';display:inline-block;position:absolute;left:0;top:50%;width:20px;min-height:19px;vertical-align:top;background:url('/img/var/check_off.gif') no-repeat 0 0;background-size:20px 19px;transform:translateY(-50%);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-o-transform:translateY(-50%);}
.board-type-var input[type="checkbox"]:checked + label:after {content:'';display:inline-block;position:absolute;left:0;top:50%;width:20px;min-height:19px;vertical-align:top;background:url('/img/var/check_on.gif') no-repeat 0 0;background-size:20px 19px;transform:translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%);}
.board-type-var .blind {text-indent:-9999px;}
.board-type-var .blind2 {overflow: hidden;position: absolute;top: 0;left: 0;width: 0;height: 0;font-size: 0;line-height: 0;}
.board-type-var input[type="text"] {border:1px solid #555555; height:22px; width:80%; min-width:48px; padding:0 5px;color:#ea0061; font-weight:bold; text-align:right;}
.board-type-var input[type="text"]:focus {background:#fff; text-indent:5px;color:#333; }

.board-type-var a {font-size:13px; letter-spacing: -1px;}


/* 230927 2023웹접근성 수정 */
span.btn-var3 {display:inline-block;  height:26px;} 
span.btn-var3 a{background:#6F757D url(/img/var/btn_list_02.png)no-repeat center left 10px; display:inline-block; font-size:13px; width:101px; padding-left:30px; padding-right:15px;  color:#fff; line-height:26px; letter-spacing:-1px;  border:1px solid #5e6876; border-radius:2px;}
span.btn-var3a {display:inline-block;  height:26px;} 
span.btn-var3a a{background:#6F757D url(/img/var/btn_list_02.png)no-repeat center left 10px; display:inline-block; font-size:13px; width:101px; padding-left:30px; padding-right:15px;  color:#fff; line-height:26px; letter-spacing:-1px;  border:1px solid #5e6876; border-radius:2px;}
span.btn-var4 {display:inline-block;  height:26px;} 
span.btn-var4 a{background:#6F757D url(/img/var/btn_list_01.png) no-repeat center left 10px; display:inline-block; width:25px; font-size:13px; padding-left:30px; padding-right:15px;  color:#fff; line-height:26px; letter-spacing:-1px; border:1px solid #5e6876; border-radius:2px;}
/* //230927 2023웹접근성 수정 */

.var_table_top {padding:36px 0 14px 0;overflow:hidden; position:relative;}
.var_table_top li {float:left;}
.pn_list {display:block; overflow:hidden; margin:0 auto; width:110px;}
.pn_list li{background: url(/img/var/btn_list2.gif) no-repeat; width:6px; height:6px; display:inline-block; margin:0 3px;}
.pn_list .on {background-position:0 0;} 
.pn_list .off {background-position:-7px 0;} 

.pn_btn {position:absolute; top:25px; right:0px;}
.pn_btn li a {background: url(/img/var/btn_list1.gif) no-repeat; width:35px; height:26px; display:inline-block; margin:0 3px; text-indent:-9999px;}
.pn_btn .pn_btn_p a{background-position:0 0px;} 
.pn_btn .pn_btn_n a{background-position:0 -27px;} 

/*수익률조회표*/
.board-type-var {clear:both;background: url(/img/var/th_bg.gif) repeat-x; }
.board-type-var table th{font-size:13px; text-align:center; font-weight:normal;height:36px;  color:#fff; line-height:16px; letter-spacing:-1.5px; }
.board-type-var table td{color:#666;  font-size:13px; border-bottom:1px solid #e5e5e5; text-align:center; border-top:1px solid #e5e5e5; letter-spacing:-1px; line-height:30px;}
.board-type-var table .fs-12 {font-size:12px;}
/* 2024 웹접근성 수정 */
.board-type-var table td span{background: url(/img/var/color_list_1.gif) no-repeat; display:inline-block; width:22px; height:22px;overflow:hidden;text-indent:-9999px; padding-right:8px;}
.board-type-var table td .color_00 {background-position:0 -253px;}
.board-type-var table td .color_01 {background-position:0 0;}
.board-type-var table td .color_02 {background-position:0 -23px;}
.board-type-var table td .color_03 {background-position:0 -46px;}
.board-type-var table td .color_04 {background-position:0 -69px;}
.board-type-var table td .color_05 {background-position:0 -92px;}
.board-type-var table td .color_06 {background-position:0 -115px;}
.board-type-var table td .color_07 {background-position:0 -138px;}
.board-type-var table td .color_08 {background-position:0 -161px;}
.board-type-var table td .color_09 {background-position:0 -184px;}
.board-type-var table td .color_10 {background-position:0 -207px;}
.board-type-var table td .color_17 {background-position:0 -230px;}
/*210608추가시작*/
.board-type-var table td .color_11 {background-position:0 -276px;}
.board-type-var table td .color_12 {background-position:0 -299px;}
.board-type-var table td .color_13 {background-position:0 -322px;}
.board-type-var table td .color_14 {background-position:0 -345px;}
.board-type-var table td .color_15 {background-position:0 -368px;}
.board-type-var table td .color_16 {background-position:0 -391px;}
/*210608추가끝*/
/*220629추가시작*/
.board-type-var table td .color_18 {background-position:0 -414px;}
.board-type-var table td .color_19 {background-position:0 -437px;}
.board-type-var table td .color_20 {background-position:0 -459px;}
.board-type-var table td .color_21 {background-position:0 -483px;}
/*220629추가끝*/
/*24 변액상품 추가 시작*/
.board-type-var table td .color_22 {background-position:0 -506px;}
.board-type-var table td .color_23 {background-position:0 -529px;}
.board-type-var table td .color_24 {background-position:0 -552px;}
.board-type-var table td .color_25 {background-position:0 -575px;}
/*//24 변액상품 추가 끝*/
/* //2024 웹접근성 수정 */

.board-type-var table .last-line td {background:#fffa9b;}

/*차트영역*/
.gr_box {width:718px; min-height:450px; border:1px solid #d8dede; padding:30px 0px;} 
.gr_box .gr_con {background:#eee; width:100%;}
.gr_color_box {width:678px;  border:1px solid #d8dede; padding:20px 20px; overflow:hidden; border-top:none; }
/* 2024 웹접근성 수정 */
.gr_color_box li {display:flex; float:left; width:25%; height: 28px; align-items: center;}
.gr_color_box li span {background: url(/img/var/color_list_1.gif) no-repeat; display:inline-block; width:22px; height:22px; padding-right:8px;}
.gr_color_box li .gr_color_00 {background-position:0 -253px;}
.gr_color_box li .gr_color_01 {background-position:0 0;}
.gr_color_box li .gr_color_02 {background-position:0 -23px;}
.gr_color_box li .gr_color_03 {background-position:0 -46px;}
.gr_color_box li .gr_color_04 {background-position:0 -69px;}
.gr_color_box li .gr_color_05 {background-position:0 -92px;}
.gr_color_box li .gr_color_06 {background-position:0 -115px;}
.gr_color_box li .gr_color_07 {background-position:0 -138px;}
.gr_color_box li .gr_color_08 {background-position:0 -161px;}
.gr_color_box li .gr_color_09 {background-position:0 -184px;}
.gr_color_box li .gr_color_10 {background-position:0 -207px;}
.gr_color_box li .gr_color_17 {background-position:0 -230px;}
/*210608추가시작*/
.gr_color_box li .gr_color_11 {background-position:0 -276px;}
.gr_color_box li .gr_color_12 {background-position:0 -299px;}
.gr_color_box li .gr_color_13 {background-position:0 -322px;}
.gr_color_box li .gr_color_14 {background-position:0 -345px;}
.gr_color_box li .gr_color_15 {background-position:0 -368px;}
.gr_color_box li .gr_color_16 {background-position:0 -391px;}
/*210608추가끝*/
/*220629추가시작*/
.gr_color_box li .gr_color_18 {background-position:0 -414px;}
.gr_color_box li .gr_color_19 {background-position:0 -437px;}
.gr_color_box li .gr_color_20 {background-position:0 -459px;}
.gr_color_box li .gr_color_21 {background-position:0 -483px;}
/*220629추가끝*/
/*24 변액상품 추가 시작*/
.gr_color_box li .gr_color_22 {background-position:0 -506px;}
.gr_color_box li .gr_color_23 {background-position:0 -529px;}
.gr_color_box li .gr_color_24 {background-position:0 -552px;}
.gr_color_box li .gr_color_25 {background-position:0 -575px;}
/*//24 변액상품 추가 끝*/
/* //2024 웹접근성 수정 */


/*딤드*/
.var_pop {text-align:left; display: none; z-index:9999;}/*20190916*/
.var_pop.dis-y {display: block;}/*2020웹접근성수정*/
.dimmed {position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:0.8;filter:alpha(opacity=80);z-index:900;text-indent: -5000px;}
.var_pop .pop_con {position:absolute;top:10%;left:4%;width:90%;min-height:300px;margin:0px 0 0 0px;padding:0px;text-align:center;background-color:#fff;z-index:910;}
.var_pop .pop_con1 {position:absolute;top:10%;left:26%;width:610px;min-height:300px;margin:0px 0 0 0px;padding:0px;text-align:center;background-color:#fff;z-index:910;}
.var_pop .pop_con .pop-header, .var_pop .pop_con1 .pop-header {height:55px; background:#008584; position:relative;}
.var_pop .pop_con .pop-header .top-area, .var_pop .pop_con1 .pop-header .top-area{padding:15px 0 18px 25px; text-align:left;}
.var_pop .pop_con .pop-content {padding:25px 25px 30px 25px; font-size:13px; text-align:left;}
.var_pop .pop_con .pop_close_btn a, 
.var_pop .pop_con1 .pop_close_btn a {position:absolute;top:20px;right:20px; background:url(/img/var/pop_close.gif) no-repeat; width:18px; height:18px; display:block; text-indent:-9999px;}/*20190916*/


.gr_box_pop {width:96%; min-height:500px; border:1px solid #d8dede; padding:30px 20px;} 
.gr_box_pop .gr_con {background:#eee; width:100%;}
.gr_color_box1 {width:96%;  border:1px solid #d8dede; padding:20px 20px; overflow:hidden; border-top:none; }
.gr_color_box1 li {float:left; width:20%;}
.gr_color_box1 li span {background: url(/img/var/color_list_1.gif) no-repeat; display:inline-block; width:11px; height:11px; padding-right:8px;}
.gr_color_box1 li .gr_color_00 {background-position:0 -132px;}
.gr_color_box1 li .gr_color_01 {background-position:0 0;}
.gr_color_box1 li .gr_color_02 {background-position:0 -12px;}
.gr_color_box1 li .gr_color_03 {background-position:0 -24px;}
.gr_color_box1 li .gr_color_04 {background-position:0 -36px;}
.gr_color_box1 li .gr_color_05 {background-position:0 -48px;}
.gr_color_box1 li .gr_color_06 {background-position:0 -60px;}
.gr_color_box1 li .gr_color_07 {background-position:0 -72px;}
.gr_color_box1 li .gr_color_08 {background-position:0 -84px;}
.gr_color_box1 li .gr_color_09 {background-position:0 -96px;}
.gr_color_box1 li .gr_color_10 {background-position:0 -108px;}
.gr_color_box1 li .gr_color_11 {background-position:0 -120px;}


.wd96 {width:92%; margin:0 auto;}

/*레프트배너*/
#snb .left_btnbox {width:200px;padding-top:20px; border-top:none;}
#snb .left_btnbox li{padding-top:7px;}

 
 
/* tit-area */
.tit-area h3 span {display: inline-block;font-weight: normal;font-size: 20px;letter-spacing:-2px;}
.tit-area .add {color:#ea0061;display:block;font-size:13px;padding:5px 0 5px 10px;letter-spacing:-1px;font-weight:bold}

/* tbl작업시 굵은 색상 */
table tbody .add {color:#ea0061;display:block;font-size:13px}

/* 운용수수료 table */
.prd-tbl01 table thead th {text-align:center;font-size:13px;padding:5px 0}
.prd-tbl01 table thead th span{display:block}
.prd-tbl01 table tbody td {font-size:12px;text-align:right;padding-right:8px;*padding-right:5px !important;*padding-left:0}
.prd-tbl01 table tfoot td {font-size:12px;font-weight:bold;text-align:right;padding:15px 8px 15px 0;*padding:15px 8px 15px 0 !important;}
.prd-tbl01 table tfoot td.ct, .prd-tbl01 table tbody td.ct{text-align:center;padding:0;*padding:0 !important}
.prd-tbl01 table tfoot td.ct {font-size:13px}
.prd-tbl01 table tfoot td.ct .add{color:#ea0061;display:block;font-size:14px}

/* 오른쪽 정렬 */
table td .lt{text-align:left;padding-left:5px}

/* btn -오른쪽 정렬*/
.btn-right {text-align:right;margin-bottom:50px;}

/* 테이블 아래 설명 */
ul.scs-step-desc{margin:11px 0}
ul.scs-step-desc li{background: url('/img/common/list-bu01.gif') no-repeat 0px 10px;padding-left:8px;font-size:12px;text-align:left;color:#666;}
ul.scs-step-desc span{display:block}


/* common 추가파일*/
.mg0{margin:0px !important;}
.pt5{padding-top:5px !important;}
.pt15 {padding-top:15px !important;}
.ht200{height:200px!important;;height:202px\9 !important;;*height:202px !important;}
.cont-visual {margin:15px 0 0 -15px !important;}
.lp-1{letter-spacing:-1px !important;}
.lp-2{letter-spacing:-2px !important;}
.lp-01{letter-spacing:-0.1px !important;} /* 2016-10-11 추가  */
div ul li.bg-none, ul li.bg-none {background:none !important}

li.pl{padding-left:18px;text-indent:-16px;} /* 2016-10-11 추가  */
.dt{font-weight:bold !important} /* 2016-10-11 추가  */
.tbl-type4.black table th{color:#333} /* 2016-10-11 추가  */

.tbl-type1 table th{text-align:Center;}
.list-type2 li span{color:#666;font-size:12px;display:block;}
.tbl-type3 td.pr30 {text-align: left;padding: 8px 0 10px 30px}
.tbl-type3 table tbody th{padding:7px 3px 7px 3px;background:#fafafa;font-size:14px; border-bottom:1px solid #dedede;border-right:1px solid #dedede;color:#454545;text-align: center;border-top:none}/*20150407_추가*/
.tbl-type3 table tbody td span{font-size:12px;color:#666}
.tbl-ct table tbody th, .tbl-ct table thead th {text-align:center;padding-left:0}

.tbl-type3 table tbody th.last {border-bottom:none}/*20180413_추가*/

/*테이블 안에 리스트 요소*/
table tbody td ul.list li{float:left;width:176px;height:21px;line-height:22px;text-align:left;}

table tbody td div.p-list,table tbody td div.p-list2{float:left;}

table tbody td div.p-list li{float:left;width:170px;background:url('/img/prd/bg-p-list.gif') no-repeat 95% 50%}
table tbody td div.p-list li.end{width:340px;background:none}
table tbody td div.p-list2 li{float:left;width:170px;background:url('/img/prd/bg-p-list2.gif') no-repeat 95% 50%}
table tbody td div.p-list2 li.end{width:340px;background:none}

/* 리스트 타입 4-5*/
.list-style4 li {padding-left:10px;color: #666;font-size: 13px !important;line-height: 22px;letter-spacing: -1px;background:none}
.list-style4 li ul li{background: url(/img/common/list-bu01.gif) no-repeat 0 10px;}
.list-style5 li {color: #666;font-size: 13px !important;line-height: 20px;padding-left: 20px;text-indent: -18px;letter-spacing: -1px;}

/* top-txt */
.top-txt p.desc {padding-left:15px;}
.top-txt h4{float:left;padding-left: 10px;font-family:hanaUL;font-size: 16px;}
.top-txt .add{color:#ea0061;}

/* 테이블 작업시 가운데 정렬 */
table tbody .ct {text-align:center !important;;padding:0}
table thead .ct {text-align:center;}
table thead .txt-l, table tbody .txt-l{text-align:left !important;}

/* 테이블 작업시 가운데 정렬 font-size:12로 */
table tbody .font-12{font-size:12px !important;color:#666 !important;}
table tbody tr td span.font-12 {display:block;}

/* 특정 color주기*/
table tbody td strong.gold{display:block;color:#937036;font-size:12px;}
table tbody td strong.gold13{color:#937036;}
ul li span.gold{color:#937036;display:inline} 
.gold {color:#937036}
.font-13 {font-size:13px !important; color:#666 !important;;}
.gray-a2{color:#666}
.col-rd {color:#ea0061 !important;}
.col-gr {color:#0b8786 !important;}


/* 테이블 작업시 특정 td에 padding-left:20; padding-left:10주기*/
div table th.pr40, div table td.pr40{padding:10px 5px 10px 40px;text-align:left}
div table th.pr30, div table td.pr30{padding:10px 5px 10px 30px;text-align:left}
div table th.pr20, div table td.pr20{padding:10px 5px 10px 20px;text-align:left}
div table th.pr10, div table td.pr10{padding:10px 5px 10px 10px;text-align:left}

/* 테이블col이 3개 이상일시 보더라이트 주기*/
.prd-tbl02 table thead tr th{border-right:1px solid #e5e5e5}
.prd-tbl02 table tbody tr td{border-right:1px solid #e5e5e5}
.prd-tbl02 table tbody tr td ul.list-type1 li{font-size:12px !important;}

/*테이블안에 특정list font12로 맞추기 */
.tbl-bd-lt table tbody tr td ul.list-type1 li{font-size:12px !important;}


/*테이블 안에 배경이 없는 list*/
table tbody tr td ul.bg-no li {font-size:13px}
table tbody tr td ul.bg-no li span {padding:0 26px}
table tbody tr td ul.bg-no li span.nbsp {padding:0 61px}

/* list-type1에 리스트에 마진 -10*/
ul.list-type1 li ul.md-10 li {margin-left: -10px;}

/* 테이블 밑에 오는 회색박스 */
.box-gray{background:#fcfdfd;border-bottom: 1px solid #dedede;padding:10px;margin:0}
.box-gray ul li{padding-left:15px;font-size:13px;background: url(/img/common/list-bu01.gif) no-repeat 5px 10px;}


/* 테이블 밑에 오는 회색박스 2 */
.gray-bx2 {background:#fafbfc;border:1px solid #e5e5e5;padding:20px 10px;}

/* box text-align:Center; */
.ct-box {text-align:center;}


/* 퇴직연금 - 단계별과제구조 */
.prd-list{border-top:2px solid #3eb8b9;background:url(/img/prd/bg-prg-list.gif) no-repeat  150px 100%}
.prd-list li {width:100%;padding:10px 0;border-bottom:1px solid #e5e5e5}
.prd-list li strong{float:left;width:185px;padding-left:15px;font-size:20px;color:#008485}
.prd-list li strong span{font-size:14px;color:#454545;display:block;}
.prd-list li div{float:right;width:485px;padding-left:35px}
.prd-list li div strong{float:none;padding:0}
.prd-list li div ul li{padding:0 0 0 10px;border-bottom:none}

ul.prd-step01 li{float:left;width:;188px;}

/* 보험상품 step02 */
ul.prd-step02{border:1px solid #dddddd;background:#fafbfc}
ul.prd-step02 li{float:left;width:240px;min-height:120px;padding-left:13px;font-size:13px;background:url('/img/prd/bg-prd-step2.gif') no-repeat 100% 100%}
ul.prd-step02 li.last {width:201px;padding-left:10px;background:none}
ul.prd-step02 li strong{display:block;font-size:15px;color:#cf0056;padding:15px 0 10px 0}
ul.prd-step02 li span{display:block;color:#666;font-size:12px;}

/* 유의사항 - box */
.note-box{border:1px solid #d5dcdc;padding:15px 16px}
.note-box strong {font-size:13px;color:#666;}
.note-box ul {padding-top:8px;}
.note-box ul li{padding-left:13px;font-size:13px;color:#666;background: url(/img/common/list-bu02.gif) no-repeat 5px 10px;}

/* 2016-10-11 유의사항 - box 2    */
.note-box2{border:1px solid #ea0061;padding:15px 16px;letter-spacing:-1px;}
.note-box2 strong {font-size:13px;color:#ea0061;}
.note-box2 ul li{padding-left:18px;text-indent:-16px;font-size:13px;color:#ea0061;padding-top:8px;}


/* 보험상품 혼합형제도의 특징 */
.st-15 strong{font-size:15px;letter-spacing:-1px}
.st-15 strong .gold {font-size:15px;}


/* 보험 가입절차 - 도입효과*/
.prd425 {float:left; width:325px;padding-left:20px;background:url('/img/prd/bg-prd425.gif') no-repeat 0 0}
.prd425 p.title{height:44px;line-height:44px;text-align:center;margin-left:-20px;font-size:16px;font-weight:bold;color:#006d6c;}
.prd425 strong {color:#454545;font-size:13px;}
.prd425 dl {margin-top:12px;padding-bottom:20px;}
.prd425 dl dt {background:url('/img/prd/blt-01.gif') no-repeat 0 9px;font-weight:bold;margin-bottom:-1px}
.prd425 dl dd{margin-bottom:10px}
.prd425 dl dt, .prd425 dl dd{padding-left:10px;font-size:13px;}

/* 팝업3 약관*/
#pop-wrap table tbody td {letter-spacing:0px}
.gray-pop {background:#fafbfc url(/img/popup/bg-p3.gif) no-repeat 20px 16px;padding:15px 15px;border:1px solid #e5e5e5}
.gray-pop strong {display:block;line-height:23px;padding-left:65px;font-size:14px;color:#454545}
.gray-pop p {font-size:12px;}
.personal-info dl.list-pop dt{font-weight:bold;}
.personal-info dl.list-pop dt, .personal-info dl.list-pop dd{font-size:13px;}
.personal-info dl.list-pop dd{margin-bottom:3px;}

.pop03 {border-bottom:1px solid #e5e5e5;}
.pop03 p.pop-tx {float:left;width:390px;padding-bottom:10px;font-size:13px;}
.pop03 p.agree-box {float:left;width:170px;margin:15px 0;}
.pop03 p.agree-box input {margin: 0 10px;}
p.btn-center {text-align:center;margin-top:20px}


/* foot-bx */
.foot-bx {clear:both;border:1px solid #d5dcdc; padding:20px 40px 20px 117px; background: url(/img/common/noti-bg.gif) no-repeat 20px 50%; min-height:85px;}
.foot-bx ul{width:100%}
.foot-bx li{ color:#666; background: url(/img/common/list-bu02.gif) no-repeat 0 10px; padding-left:10px;}

/*prd-step*/
.prd-step {padding-left:5px}
.prd-step li {position:relative;float:left;width:145px;min-height:148px;padding-right:43px;text-align:center;margin-top:17px;background:url('/img/prd/bg-prd-step.png') no-repeat }
.prd-step li.last {padding-right:5px}
.prd-step li.last img {left:35%}
.prd-step li > img {position:absolute;top:30px;left:30%}
.prd-step li span img{padding-top:56px}
.prd-step li.step01 {background-position:0 0}
.prd-step li.step02 {background-position:-188px 0 }
.prd-step li.step03 {background-position:-376px 0}
.prd-step li.step04 {background-position:-564px 0}
.prd-step li.step05 {background-position:-721px 0}
.prd-step li.step07{background-position:-1095px 0}

/*펀드유형*/
.fund-list li{float:left;width:360px;}
.fund-list li img{*width:360px}
.fund-list p.title{padding:7px 0 7px 15px;height:24px;background:#fcfdfd;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.fund-list p.title strong{float:left;font-size:15px;color:#454545}
.fund-list p.title span{float:right;padding:7px 7px 0 0}
.fund-list ul.depth-3 li{width:240px;}
.fund-list ul.depth-3 li img{*width:240px}

/* 신용섭 그래프 */
.graph-bx {border:1px solid #e5e5e5; margin-top:10px; background: url(/img/prd/graph-dot-line.gif) repeat-y center; }
.graph {}
.graph li:first-child{border-top:0;}
.graph li.top{border-top:0;}
.graph li.bg{background-color:#fcfdfd; margin-right:2px}
.graph li.bg2{background-color:#fcfdfd;}
.graph li.bg3{background-color:#fcfdfd; height:292px}
.graph li.bg4{background-color:#fcfdfd; height:350px;height:352px\9;*height:352px}
.graph li.bg5{background-color:#fcfdfd; height:368px;*height:370px}
.graph li{border-top:1px solid #e5e5e5; width:333px !important; float:left; padding:25px 0 30px 25px; }
.graph li .tit {color:#008485; font-size:13px; letter-spacing:-1px;}
.graph li .tit span{color:#ea0061; font-size:14px; letter-spacing:normal;font-weight:bold}
.graph li .txt {color:#666; font-size:12px; letter-spacing:-1px;}



.prd-bg-02 {background-position:100% -268px }
.prd-bg-03 {background-position:100% -536px }
.prd-bg-04 {background-position:100% -806px }
.prd-bg-05 {background-position:100% -1074px }
.prd-bg-06 {background-position:100% -1342px }
.prd-bg-07 {background-position:100% -1610px }
.prd-bg-08 {background-position:100% -1878px }
.prd-bg-09 {background-position:100% -2146px }
.prd-bg-10 {background-position:100% -2414px }
.prd-bg-11 {background-position:100% -2682px }
.prd-bg-12 {background-position:100% -2950px; height:228px;  padding-top:40px;}
.prd-bg-13 {background-position:100% -3218px; height:228px;  padding-top:40px;}
.prd-bg-14 {background-position:100% -3487px;}
.prd-bg-15 {background-position:100% -3755px;}
.prd-bg-16 {background-position:100% -4023px;}
.prd-bg-17 {background-position:100% -4291px;}
.prd-bg-18 {background-position:100% -4559px;}
/* 추가 하단 버튼 양승욱 2013-04-19 */

.addbtn { border:1px solid #e2e2e2; padding:14px 18px 11px 25px; margin-top:25px;}
.addbtn .other-ft1	{ background:url('/img/prd/list-bul.gif') no-repeat 0 50%; padding-left:7px; font-size:13px; color:#454545; font-weight:bold; }
.addbtn .other-ft2 {  font-weight:none; font-size:13px; }

/* 2014-05-29 추가 */
.prd-diagram .bx01{background: url(/img/prd/prd_diagram01.gif) no-repeat 0 0; height:406px;}
.prd-diagram .bx01 .tit {text-align:center; padding-top:27px; }
.prd-diagram .bx01 .dia-list {margin-top:125px}
.prd-diagram .bx01 .dia-list li:first-child {width:100px; padding-left:45px;}
.prd-diagram .bx01 .dia-list li {float:left; width:95px; padding-left:95px;}
.prd-diagram .bx02 {background: url(/img/prd/prd_diagram02.gif) no-repeat 0 0; height:236px;}
.prd-diagram .bx02 .tit {text-align:center; padding-top:25px; }
.prd-diagram .bx02 .dia-list {margin-top:100px}
.prd-diagram .bx02 .dia-list li{float:left; width:235px; text-align:center;}
.prd-diagram .bx02 .dia-list li.center{width:250px;}


/* 2014-06-02 추가 */
.prd-diagram02 {background: url(/img/prd/prd_diagram03.gif) no-repeat 0 0; height:809px;}
.prd-diagram02 .tit {text-align:center; padding-top:25px;}
.prd-diagram02 .tit.tit02 {padding-top:165px;}
.prd-diagram02 .tit.tit03 {padding-top:60px;}
.prd-diagram02 .list01 {margin-top:150px;}
.prd-diagram02 .list01 li{float:left; width:240px; text-align:center;}
.prd-diagram02 .list02 {margin-top:37px;}
.prd-diagram02 .list02 li{float:left; width:360px; text-align:center;}
.prd-diagram02 .list02 li strong{display:block; color:#008584; font-size:14px; margin-bottom:30px;}
.prd-diagram02 .list02 li p{color:#333; line-height:18px; height:76px;}
.prd-diagram02 .list03 li:first-child{padding-top:70px}
.prd-diagram02 .list03 li{float:left; width:360px; text-align:center;padding-top:45px; color:#333;}

.prd-diagram02.diagram03{background: url(/img/prd/prd_diagram04.png) no-repeat 0 0; height:578px;}
.prd-diagram02.diagram03 .list01 {margin:0; padding-top:90px;}
.prd-diagram02.diagram03 .list02 {margin-top:157px;}
.prd-diagram02.diagram03 .list03 li:first-child{padding-top:80px}
.prd-diagram02.diagram03 .list03 li{padding-top:55px;}


/* 로딩바 시작 */
.loadingDim {
	display: none;
	z-index: 1099;
	position: fixed;
	left: 0;
	top: 0;
    width: 100%; 
    height: 100%; 
    margin: 0;
    padding: 0; 
    background-color: #000; 
    opacity: 0.25;
    filter:alpha(opacity=25); 
}
.loading {
	display: none;
	z-index: 1100;
    position: fixed;
    top: 48%;
    left: 48%; 
    width: 96px; 
    height: 96px; 
    margin: 0 auto; 
    padding: 10px; 
} 

.dot div { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 20px; 
    height: 20px; 
    margin: auto; 
    border-radius: 10px; 
    background-color: #518260; 
    opacity: 0.2;
    filter:alpha(opacity=20); 
    animation: dot 1s linear infinite; 
} 

.dot div:nth-child(1) { 
    transform: rotate(0) translateX(40px); 
    animation-delay: 0; 
} 

.dot div:nth-child(2) { 
    transform: rotate(45deg) translateX(40px); 
    animation-delay: 0.1s; 
} 

.dot div:nth-child(3) { 
    transform: rotate(90deg) translateX(40px); 
    animation-delay: 0.2s; 
} 

.dot div:nth-child(4) { 
    transform: rotate(135deg) translateX(40px); 
    animation-delay: 0.3s; 
} 

.dot div:nth-child(5) { 
    transform: rotate(180deg) translateX(40px); 
    animation-delay: 0.4s; 
} 

.dot div:nth-child(6) { 
    transform: rotate(225deg) translateX(40px); 
    animation-delay: 0.5s; 
} 

.dot div:nth-child(7) { 
    transform: rotate(270deg) translateX(40px); 
    animation-delay: 0.6s; 
} 

.dot div:nth-child(8) { 
    transform: rotate(315deg) translateX(40px); 
    animation-delay: 0.7s; 
} 

@keyframes dot { 
    0% { opacity: 0.2; filter:alpha(opacity=20);} 
    25% { opacity: 1; filter:alpha(opacity=100);} 
    50% { opacity: 0.2; filter:alpha(opacity=20);} 
    100% { opacity: 0.2; filter:alpha(opacity=20);} 
}


.layer {
	display: none;
	z-index: 1100;
    position: fixed;
    top: 10%;
    width: 800px; 
    height: 600px; 
    margin: 0 auto; 
    padding: 10px; 
} 
/* 로딩바 끝 */

/*20190906 추가*/
.var-check li span,
.board-type-var table tr td:first-child {position: relative;}

input[type="radio"]:focus + label:after,
input[type="checkbox"]:focus + label:after {border:1px dashed #666;}


.pop_layout .start,
.pop_layout .end {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	text-indent:-9999px;
}


.board-type1.type02 table tbody th {
    color: #666;
    padding: 10px 3px 10px 3px;
    font-size: 13px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    border-bottom: none;
    background: #fff;
}

/* 230927 2023웹접근성 수정 */
a#varGraphDirections{
	display:block;
	width:100%;
	background:#FBFBFB;
	border:2px solid #d8dede;
	box-sizing:border-box;
	overflow:hidden;
}
a#varGraphDirections:focus{
	outline:none;
	border:2px dashed #0006ff;
}
/* // 230927 2023웹접근성 수정 */