@charset "UTF-8";

/*===================== header =====================*/
.header.scrolled  { background-color: #ffffff; color: var(--colorTit); } 

.header {width:100%;position:fixed;left:0;top:0;z-index: 9999; color: var(--colorTit); border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.header .header_inner {position: relative; border-bottom: 1px solid transparent;}
.header .gnb_cont_area {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: space-between;width: 100%;max-width:1400px;margin:0 auto}
.header .gnb_cont_area .logo_area {width:241px;}
.header .gnb_cont_area .logo_area .logo {display: block;max-width:180px}
.header .gnb_cont_area .logo_area .logo img {}
.header .gnb_cont_area .logo_area .logo img.on { display: block;}
.header .gnb_cont_area .logo_area .logo img.off { display: none;}
/* .header.scrolled  .gnb_cont_area .logo_area .logo img.off { display: none;}
.header.scrolled  .gnb_cont_area .logo_area .logo img.on { display: block;} */
.header .gnb_cont_area .gnb_area {}
.header .gnb_cont_area #gnb {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center;}
.header .gnb_cont_area #gnb > li {}
.header .gnb_cont_area #gnb > li.none {display: none;}
.header .gnb_cont_area #gnb .sitemap_tit {display: flex; justify-content: center; align-items: center;padding: 0 40px; height:100px; text-align: center;}
.header .gnb_cont_area #gnb .sitemap_tit .text {font-weight: 700; font-size: 20px; position:relative}
.header .gnb_cont_area #gnb .sitemap_tit .text::after {width:0;height:3px;content:'';background-color:#22672D;position:absolute;left:0;bottom:-3px;transition:width 0.3s}
/* .header .gnb_cont_area #gnb > li.on .sitemap_tit .text {color:var(--colorSub)} */
.header .gnb_cont_area #gnb > li.on .sitemap_tit {color:#22672D}
.header .gnb_cont_area #gnb > li.on .sitemap_tit .text::after {width:100%}
.header .gnb_cont_area #gnb .sub_gnb_area { display: none; position: absolute; right: 0; left: 0; padding: 0; border-top: 1px solid #E0E0E0; background-color: #ffffff; box-shadow: 0 5px 10px rgba(211,211,211,0.5); z-index: 3;}
.header .gnb_cont_area #gnb .sub_gnb_area .container {position:relative; padding: 0 0 0 200px;}
.header .gnb_cont_area #gnb .title_area {position: absolute; right: calc(100% - 200px); width: 100%; height: 100%; padding: 36px 24px; background-color: #fff; border-right: 1px solid var(--colorBorderGray); vertical-align: top; text-align: right;}
.header .gnb_cont_area #gnb .title_cont {display: inline-block; position: relative; width: 100%; max-width: 400px; height: 100%; text-align: right;}
.header .gnb_cont_area #gnb .title_cont .title {font-weight: 700; font-size: 24px; line-height: 24px; color: var(--colorTit);}
.header .gnb_cont_area #gnb .sub_gnb {display: flex; justify-content: stretch; align-items: stretch; flex-wrap: wrap; gap: 12px 16px; width: 100%; min-height: 98px; padding: 24px; text-align: left;}
.header .gnb_cont_area #gnb .sub_gnb > li {flex: 0 0 23%;}
.header .gnb_cont_area #gnb .sub_gnb > li > a {position: relative;display: flex; justify-content: stretch; align-items: center; height: 48px; border: 2px solid var(--colorGray50); padding: 0 12px; background-color: var(--colorGray50); font-weight: 700; font-size: 17px;color: var(--colorGray80); border-radius: 8px; transition: all 0.3s;}
.header .gnb_cont_area #gnb .sub_gnb > li > a .allow { color: var(--colorGray30); position: absolute; right: 12px;  }
.header .gnb_cont_area #gnb .sub_gnb > li > a:hover,
.header .gnb_cont_area #gnb .sub_gnb > li > a:focus,
.header .gnb_cont_area #gnb .sub_gnb > li:hover > a,
.header .gnb_cont_area #gnb .sub_gnb > li:focus > a {  border: 1px solid var(--colorBgGreen); background-color: var(--colorBgGreen); color: #22672D; /* box-shadow: 0 0 10px rgba(0,0,0,0.1)  */}
.header .gnb_cont_area #gnb .sub_gnb > li:hover > a .allow,.header .gnb_cont_area #gnb .sub_gnb > li:focus > a .allow { color: #22672D; }
.header .gnb_cont_area #gnb .sub_gnb .depth3 {display: block; margin: 12px 0 0; padding: 0 10px;}
.header .gnb_cont_area #gnb .sub_gnb .depth3 > li { margin: 0 0 8px;}
.header .gnb_cont_area #gnb .sub_gnb .depth3 > li:last-child { margin: 0;}
.header .gnb_cont_area #gnb .sub_gnb .depth3 > li > a {display:inline-block;padding-left:15px;color:var(--colorGray60);font-size:1em;position:relative}
.header .gnb_cont_area #gnb .sub_gnb .depth3 > li > a::before { content: ''; position: absolute; top:9px; left: 0; width: 4px; height:4px; background-color: #D9D9D9; border-radius: 50%;transition:0.3s}
.header .gnb_cont_area #gnb .sub_gnb .depth3 > li > a:hover,
.header .gnb_cont_area #gnb .sub_gnb .depth3 > li > a:focus { font-weight: 700; color: #22672D;}
.header .gnb_cont_area #gnb .sub_gnb .depth3 > li > a:hover::before,
.header .gnb_cont_area #gnb .sub_gnb .depth3 > li > a:focus::before { background-color: #22672D;}
.header .header_inner .gnb_cont_area .head_btn_area {width: 345px; font-size: 0;text-align:right}
.header .header_inner .gnb_cont_area .head_btn_area .login_area { display:inline-block; border:1px solid var(--colorBorderGray); border-radius: 100px; font-size: 18px; font-weight: 500; margin: 0 35px 0 0;vertical-align: middle; }
.header .header_inner .gnb_cont_area .head_btn_area .login_area .wrap { display: flex; }
.header .header_inner .gnb_cont_area .head_btn_area .login_area .wrap li { position: relative; padding: 8px 16px; }
.header .header_inner .gnb_cont_area .head_btn_area .login_area .wrap li:after { content:''; position: absolute; right: 0; top: 50%;transform: translateY(-50%);display: inline-block; width: 1px; height: 18px; background-color:var(--colorBorderGray) }
.header .header_inner .gnb_cont_area .head_btn_area .login_area .wrap li:last-child::after { display: none }
.header .header_inner .gnb_cont_area .head_btn_area .login_area .wrap li a:hover, 
.header .header_inner .gnb_cont_area .head_btn_area .login_area .wrap li a:focus { font-weight:700;color:var(--colorMain);outline-offset:3px}
.header .header_inner .gnb_cont_area .head_btn_area .sch_btn {display: inline-block; margin: 0 16px 0 0; vertical-align: middle;}
.header .header_inner .gnb_cont_area .head_btn_area .sch_btn img {}
.header .header_inner .gnb_cont_area .head_btn_area .sitemap_btn {display: inline-block; vertical-align: middle;}
.header .header_inner .gnb_cont_area .head_btn_area .sitemap_btn img {}
.header .header_inner .gnb_cont_area .head_btn_area .m_gnb_btn {display: none;}

.header  .header_inner .gnb_cont_area .head_btn_area img { filter: brightness(0); }

/* .header.scrolled  .header_inner .gnb_cont_area .head_btn_area img { filter: brightness(0); }
.header.scrolled  .header_inner .gnb_cont_area .head_btn_area .login_area { border: 1px solid var(--colorBorderGray); }
.header.scrolled  .header_inner .gnb_cont_area .head_btn_area .login_area .wrap li:after { background-color: var(--colorBorderGray) } */

/* m_gnb */
.header .m_gnb_wrap {display:none; position:fixed; right:-480px; top:0; z-index:9999; overflow-y: auto; width: 100%; height:100%; background-color: #ffffff; }
.header .m_gnb_wrap .m_gnb_top {position:relative; border-bottom: 1px solid #eeeeee; padding: 20px 10px;}
.header .m_gnb_wrap .m_gnb_top .member_list_area {}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list {font-size: 0;}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li {display: inline-block; position:relative; margin: 0 10px 0 0; padding: 0 10px 0 0;}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li:last-child {margin: 0; padding: 0;}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li:after {content: ''; position:absolute; top: 50%; right: 0; width: 1px; height: 14px; background-color: #eeeeee; transform: translateY(-50%);}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li:last-child:after {display: none;}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li .btn {display: block;}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li .btn .text {padding: 0 0 0 20px; background-position: left center; background-repeat: no-repeat; font-weight: 300; font-size: 14px; line-height: 21px; color: #616161;}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li.icon01 .btn .text {background-image: url('/images/home/kor/user/header/head_icon00.png');}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li.icon02 .btn .text {background-image: url('/images/home/kor/user/header/head_icon02.png');}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li.icon03 .btn .text {background-image: url('/images/home/kor/user/header/head_icon02_on.png');}
.header .m_gnb_wrap .m_gnb_top .member_list_area > .list > li.icon04 .btn .text {background-image: url('/images/home/kor/user/header/head_icon03.png');}
.header .m_gnb_wrap .m_gnb_top .m_gnb_close {position: absolute; top: 50%; right: 10px; width: 22px; height: 22px; background-image: url('/images/home/kor/user/header/sitemap_close_icon2.png'); background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; transform: translateY(-50%);}

.header .m_gnb_wrap .m_gnb .item_list {}
.header .m_gnb_wrap .m_gnb .item_list > li {border-bottom: 1px solid #eeeeee;}
.header .m_gnb_wrap .m_gnb .item_list > li.m_atv {}
.header .m_gnb_wrap .m_gnb .item_list > li > a {display: block; position: relative; padding: 0 40px 0 20px;}
.header .m_gnb_wrap .m_gnb .item_list > li > a:after {content:''; display: inline-block; position: absolute; top: 50%; right: 10px; width: 12px; height: 7px; background-image: url('/images/home/kor/user/header/m_menu_arr.png'); background-position: center center; background-size: 100% 100%; background-repeat: no-repeat; transition: all 0.3s; transform: translateY(-50%);}
.header .m_gnb_wrap .m_gnb .item_list > li.m_atv > a:after {transform: rotate(180deg);}
.header .m_gnb_wrap .m_gnb .item_list > li > a .text {font-weight: 500; font-size: 18px; line-height: 50px; color: #212121;}
.header .m_gnb_wrap .m_gnb .item_list > li.m_atv > a .text {color: #ff0000;}

.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area {display: none; background-color: #f5f5f5;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .title_area {display: none;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb {padding: 15px;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li {}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a {display: block; position: relative; padding: 0 10px 0 15px; font-weight: 400; font-size: 16px; line-height: 30px; color: #2c2c2c;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a.on {color: #ff0000;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a:before {content: ''; display: inline-block; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; background-color: #bdbdbd; border-radius: 50%; transform: translateY(-50%);}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a.on:before {background-color: #ff0000;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a.has_depth3 {position:relative; padding: 0 20px 0 15px;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a.has_depth3 .plus {position:absolute; top: 50%; right: 0; width: 14px; height: 14px; transform: translateY(-50%);}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a.has_depth3 .plus span {display: inline-block; position:absolute;  background-color: #bdbdbd;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a.has_depth3 .plus .one {top: 0; left: 50%; width: 2px; height: 14px; transform: translateX(-50%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a.has_depth3.on .plus .one {transform: rotate(90deg);}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > a.has_depth3 .plus .two {top: 50%; width: 14px; height: 2px; transform: translateY(-50%);}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > .depth3 {display: none; padding: 15px; background-color: #eaeaea; border-radius: 15px;}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > .depth3 > li {}
.header .m_gnb_wrap .m_gnb .item_list > li .sub_gnb_area .m_sub_gnb > li > .depth3 > li > a {display: block; font-weight: 400; font-size: 14px; line-height: 26px; color: #424242;}

.header .m_gnb_wrap .m_member_cont_area {padding: 15px; background-color: #fff2f2;}
.header .m_gnb_wrap .m_member_cont_area .title_area {padding: 0 0 0 50px; background-image: url('/images/home/kor/user/header/m_member_icon.png'); background-position: left center; background-size: 42px; background-repeat: no-repeat;}
.header .m_gnb_wrap .m_member_cont_area .title_area .title {font-weight: 500; font-size: 16px; line-height: 30px; color: #212121;}
.header .m_gnb_wrap .m_member_cont_area .title_area .title .name {font-size: 20px;}
.header .m_gnb_wrap .m_member_cont_area .title_area .text {font-weight: 300; font-size: 14px; line-height: 21px; color: #616161;}

.header .gnb_bg {position: absolute; left:0; display: none; width: 100%; background-color: #ffffff; box-shadow: 0 5px 10px rgba(211,211,211,0.5); z-index: 2;}

.header .head_etc_btn_area {}
.header .head_etc_btn_area > .list { display: flex;justify-content: space-between;align-items: center;}
.header .head_etc_btn_area > .list > li {display: inline-block; margin: 0 5px 0 0; vertical-align: middle;}
.header .head_etc_btn_area > .list > li:last-child {  margin: 0;}
.header .head_etc_btn_area > .list > li .btn { display: block; padding: 10px 17px 11px 17px;line-height: 1; border-radius: 20px;background-color: rgba(0,0,0,0.1);color: var(--colorBlack);font-size: 18px;font-weight: 500;}
.header .head_etc_btn_area > .list > li .btn.link_btn {background-color: var(--colorGray80); color: var(--colorWhite)}
.header .head_etc_btn_area > .list > li .btn .icon { vertical-align: baseline; transform: translateY(1px)}
.header .head_etc_btn_area > .list > li .btn:hover, .header .head_etc_btn_area > .list > li .btn:focus { color: var(--colorWhite); background-color: var(--colorMain)}

/* scrolled */
.header.scrolled {}
.header.scrolled .gnb_header {position:fixed; top:0; z-index:3; width:100%; border-bottom: 1px solid #e2e4e8; box-shadow:0 2px 5px rgba(211,211,211,0.5); background-color: #ffffff;}
.header.scrolled .sub_gnb_cont {top: 94px;}
.header.scrolled .head_popzon {height: 0;overflow:hidden}

/* sitemap */
.sitemap_wrap {display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; overflow: auto; background:linear-gradient(145deg, var(--colorGreen), var(--colorMain));
/*background-image: url('/images/header/sitemap_bg.jpg'); background-size: 100% 100%; background-repeat: no-repeat;*/}
.sitemap_wrap .sitemap_close {display:flex;align-items:center;justify-content:center;width:80px;height:80px;font-size:1.7em;color:var(--colorWhite);background-color:rgba(0,0,0,0.3);position:absolute;right:0;top:0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.sitemap_wrap .sitemap_close .icon {transition:0.4s}
.sitemap_wrap .sitemap_close:hover, 
.sitemap_wrap .sitemap_close:focus {background-color:rgba(0,0,0,0.6)}
.sitemap_wrap .sitemap_close:hover .icon, 
.sitemap_wrap .sitemap_close:focus .icon {transform:rotate(180deg);}
.sitemap_wrap .sitemap {display:flex;flex-wrap:wrap;height:100%;padding-bottom:100px;position:relative;}
.sitemap_wrap .sitemap a {color:var(--colorWhite);outline-offset:3px}
.sitemap_wrap .sitemap > li {width:calc(100% / 4);min-height:50%;padding-top:70px;position:relative}
.sitemap_wrap .sitemap > li:nth-child(-n+4) {padding-top:140px}
.sitemap_wrap .sitemap > li > a {}
.sitemap_wrap .sitemap > li .line {width:1px;content:'';background-color:rgba(255,255,255,0.15);position:absolute;left:0;top:0}
.sitemap_wrap .sitemap .sitemap_tit {display:block;margin-bottom:30px;padding-left:18px;font-size:30px;line-height:1;font-weight:700;position:relative}
.sitemap_wrap .sitemap .sitemap_tit::before {width:4px;height:100%;content:'';background-color:var(--colorWhite);position:absolute;left:0;top:50%;transform:translateY(-50%);transition:width 0.3s}
.sitemap_wrap .sitemap .sub_gnb_area {display: block;top: inherit !important}
.sitemap_wrap .sitemap_sub_gnb {margin-left:18px}
.sitemap_wrap .sitemap_sub_gnb .title_area {display: none;}
.sitemap_wrap .sitemap_sub_gnb > li {display:block;margin-bottom:10px}
.sitemap_wrap .sitemap_sub_gnb > li:last-child {margin-bottom:0}
.sitemap_wrap .sitemap_sub_gnb > li > a {display:inline-block;padding-left:18px;font-weight:700;font-size:19px;position:relative}
.sitemap_wrap .sitemap_sub_gnb > li > a::before {width:6px;height:6px;content:'';background-color:var(--colorWhite);border-radius:100%;position:absolute;left:0;top:10px}
.sitemap_wrap .sitemap_sub_gnb > li > a::after {width:0;height:1px;content:'';background-color:#fff;position:absolute;left:17px;bottom:0;transition:width 0.2s}
.sitemap_wrap .sitemap_sub_gnb .depth3 {margin:12px 0 28px 18px}
.sitemap_wrap .sitemap_sub_gnb .depth3 > li {margin-bottom:4px}
.sitemap_wrap .sitemap_sub_gnb .depth3 > li:last-child {margin-bottom:0}
.sitemap_wrap .sitemap_sub_gnb .depth3 > li > a {display:inline-block;position:relative}
.sitemap_wrap .sitemap_sub_gnb .depth3 > li > a:hover {font-weight:500;text-decoration:underline;text-underline-offset:4px}

.sitemap_wrap .sitemap > li.on .sitemap_tit::before {width:8px}
.sitemap_wrap .sitemap_sub_gnb > li.on > a::before {border-radius:0}
.sitemap_wrap .sitemap_sub_gnb > li.on > a::after, 
.sitemap_wrap .sitemap_sub_gnb > li > a:hover::after, 
.sitemap_wrap .sitemap_sub_gnb > li > a:focus::after {width:calc(100% - 37px)}
/*===================== header =====================*/

/* ==================== POPZON ==================== */
.head_popzon {background-color: #31435a;}
.head_popzon .popzon_box {position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 150px; font-size: 0; text-align: center;}
.head_popzon .popzon_box .nav_box {position: absolute; top: 50%; left: 5px; margin: -13px 0 0; font-size: 0;}
.head_popzon .popzon_box .nav_box.m {display: none;}
.head_popzon .popzon_box .nav_box .nav {display: inline-block; width: 26px; height: 26px; margin: 0 5px 0 0; text-indent: -9999px; background-position: 0 0; background-size: contain; background-repeat: no-repeat; vertical-align: middle;}
.head_popzon .popzon_box .nav_box .nav:last-child {margin: 0;}
.head_popzon .popzon_box .nav_box .nav.prev {background-image: url('/images/home/kor/user/header/popzon_prev_icon.png');}
.head_popzon .popzon_box .nav_box .nav.next {background-image: url('/images/home/kor/user/header/popzon_next_icon.png');}
.head_popzon .popzon_box .nav_box .num {display: inline-block; margin: 0 0 0 30px; font-weight: 300; font-size: 16px; line-height: 24px; color: #ffffff; vertical-align: middle;}
.head_popzon .popzon_box .nav_box .num .now {font-weight: 500;}
.head_popzon .popzon_box .slide_zon {}
.head_popzon .popzon_box .slide_zon #head_slide {}
.head_popzon .popzon_box .slide_zon #head_slide li {}
.head_popzon .popzon_box .slide_zon #head_slide li a {display: block; padding: 18px 0 19px;}
.head_popzon .popzon_box .slide_zon #head_slide li a .title {height: 30px; margin: 0 0 5px; font-weight: 700; font-size: 20px; line-height: 30px; color: #ffffff; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.head_popzon .popzon_box .slide_zon #head_slide li a .text {height: 24px; font-weight: 400; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.6); word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.head_popzon .popzon_box .head_popzon_close {display: inline-block; position:absolute; top: 10px; right: 5px; width: 19px; height: 18px; background-image: url('/images/home/kor/user/header/popzon_close.png'); background-size: cover; background-repeat: no-repeat;}
.head_popzon .popzon_box .slide_zon #head_slide .slick-dots {display: none !important;}

.head_popzon .popzon_box .chk_each {position: absolute; bottom: 10px; right: 5px; padding: 0 0 0 23px;}
.head_popzon .popzon_box .chk_each .chk_inp {display: block; position: absolute; left: 0; top: 50%; z-index: 1; width: 15px; height: 15px; margin: 0; border: 1px solid #ffffff; background-position: center; background-repeat: no-repeat; transform: translateY(-50%);}
.head_popzon .popzon_box .chk_each .chk_inp:checked {background-image: url('/images/board/chk.png');}
.head_popzon .popzon_box .chk_each label {display: block; font-size: 0;}
.head_popzon .popzon_box .chk_each label .text {display: inline-block; font-weight: 400; font-size: 14px; line-height: 21px; color: #ffffff;}
/* ==================== POPZON ==================== */
.gnb_header {position:relative; }
.header .scroll_indicator {position:absolute; right: 0; bottom: 0; left: 0; height: 4px; font-size: 0;}
.header .scroll_indicator span {display: inline-block; height: 4px; background-color: #000;  -webkit-transition: width .4s ease-out; transition: width .4s ease-out;}