/**
* Theme styleseet file
*
* @Program     DWEBS
* @Type  	   css
* @author      DWEBS
* @link        https://www.dwebs.kr
*/

/* -------------------------------------------------------------------
| Custom selection color
| ------------------------------------------------------------------*/
::selection { background-color: #5d5d5d; color: #58FAF4; }
::-moz-selection { background-color: #cccccc; color: white; }


/* -------------------------------------------------------------------
| Custom mark tag
| ------------------------------------------------------------------*/
mark {
	background: #CEECF5;
	border-radius: 3px;
	padding:4px;
	color: #000;
	font-weight:bold;
}


/* ------------------------------------------------------------------------------------
| Custom bootstrap breadcrumb
|
| 서브페이지 타이틀 영역
| 부트스트랩 breadcrumb 기본 구분자 및 속성 수정
|
| 부트스트랩은 페이지 로케이션을 위한 breadcrumb 클래스를 기본 제공합니다.
| 이러한 페이지로케이션의 각 영역간 구분자는 따로 명시하지 않으면 기본 / 로 표시하게되며,
| 이것을 변경하려면 .breadcrumb>li+li:before {content: ">";}등과 같이 재선언 합니다.
| -----------------------------------------------------------------------------------*/
.breadcrumb {color:#979494; font-size:12px; padding: 8px 15px; margin-bottom: 20px; list-style: none; border-radius: 4px; background:none;}
.breadcrumb>li+li:before {padding: 0 5px; color: #979494; content: ">";}
.breadcrumb .active{color:#979494;}

/* -------------------------------------------------------------------
| Header section
|
| 테마의 헤더영역내의 속성을 정의합니다.
| ------------------------------------------------------------------*/
.header_wrap{width:100%;min-width:1200px;height:104px;border-bottom:1px solid #edeae9;}
.header{position:relative;width:1200px;margin:0 auto;height:104px}
.logo{position:absolute;width:189px;height:48px;top:31px;left:30px;}

.gnb{position:absolute;right:0px;top:7px}
.gnb ul{;}
.gnb ul li{float:left;font-size:10px;color:#666;font-family: "nanum_B", sans-serif;margin-right:10px}
.gnb ul li a{font-size:10px;color:#666;font-family: "nanum_B", sans-serif;letter-spacing:0.5px;text-decoration:none}
.gnb ul li a:hover{opacity: 0.8;}

.top_menu{position:relative;width:1200px;margin:0 auto;top:-70px;z-index:2000}
.top_menu ul.top_menu_list{position:absolute;top:0px;left:300px;}
.top_menu ul.top_menu_list li.parent_menu{float:left; width: 180px;text-align: center;}
.top_menu ul.top_menu_list li.parent_menu:first-child{padding-left:0px}
.top_menu ul.top_menu_list li.parent_menu a{display:block;font-size:18px;color:#333;text-decoration:none;letter-spacing:0;font-family:"NotoSans-Medium", sans-serif}
.top_menu ul.top_menu_list li.parent_menu a:hover{color:#099b4b}
.top_menu ul.top_menu_list li.parent_menu a.active{color:#099b4b}

/* .s_menu_wrap{position:absolute;top:104px;width:100%;min-width:1200px;height:180px;background:#fff;border-top:1px solid #edeae9;display:none;z-index:1000;} */
.s_menu_wrap{position:absolute;top:104px;width:100%;min-width:1200px;height:240px;background:#fff;border-bottom:1px solid #edeae9;display:none;z-index:1000;}
.s_menu{position:relative;width:1200px;margin:0 auto; display: flex; padding-left: 300px;}
.s_menu ul.child_menu {color:#333;height:115px;border-right:1px solid #edeae9;margin:30px 0 0; padding: 0 30px;width: 180px;}
.s_menu ul.child_menu li.child_smenu{}
.s_menu ul.child_menu li.child_smenu + li {margin-top: 15px;}
.s_menu ul.child_menu li.child_smenu a{position:relative;display:block;top:-8px;font-size:13px;color:#666;text-decoration:none;line-height:1.6;}
.s_menu ul.child_menu li.child_smenu a:hover{color:#099b4b}
.s_menu ul.child_menu li.child_smenu a.active{color:#099b4b}

/* -------------------------------------------------------------------
| Foot section
|
| 테마의 푸터영역의 속성을 정의합니다.
| ------------------------------------------------------------------*/
.footer_area_wrap{width:100%;min-width:1200px;background:#333}
.footer_area {position:relative;width:1200px;margin:0 auto;padding:20px 0 100px;}
.footer_copy {position:absolute;left:0;font-size:12px;color:#7e7e7e;line-height:20px;top:30px}
.footer_copy a{color:#7e7e7e;}
.admin{position:absolute;left:230px;top:42px}
.admin a{font-size:10px;color:#ccc;border:1px solid #474747;background:#2c2c2c;padding:3px 7px;border-radius:3px;font-family: "nanum_B", sans-serif;letter-spacing:0.5px;text-decoration:none}
.dwebs_logo{position:absolute;right:0px;top:40px}
.footer_device{position:relative;left:0px;top:60px}
.footer_area .btn-default{font-size:10px;background:#2c2c2c;color:#ccc;border:1px solid #474747;}
.footer_area .btn-primary.active, .btn-primary.active:hover{font-size:10px;background:#000;border:1px solid #474747;color:#ccc}


/* -------------------------------------------------------------------
| Button section
|
| 테마내의 버튼들의 속성을 정의 합니다.
| ------------------------------------------------------------------*/
.btn_page_up{position:fixed; bottom:50px; right:50px; z-index:1000; display:none;}
.btn_page_up img:hover{opacity:0.5; cursor:pointer;}
.login_btn_default { background-color:#474a4d; border:1px solid #474a4d; color:#3c4349; font-size:12pt; height:68px; color:#ccc; }
.login_btn_default:hover { background-color:#333; color:#fff; }
#device_btn {vertical-align:middle; margin:0 auto;}
.board_btn_default { background-color:#474a4d; border:1px solid #474a4d; color:#d8d8d8; font-size:10pt; padding-left:10px; padding-right:10px; height:30px; }
.board_btn_default:hover { color:#fff; }


/* -------------------------------------------------------------------
| Bxslider section
|
| 테마의 Body영역의 속성을 정의합니다.
| ------------------------------------------------------------------*/
.main_visual{;}
/* BXSLIDER */
.bxslider li img { margin:0 auto; }
.bxslider_btn_prev {
	position: absolute;
	left: 50px;
	top: 50%;
	z-index: 99;
	background: url('../images/bxslider_btn_prev.png') no-repeat 0 50%;
	border: 0;
	width: 38px;
	height: 91px;
	text-indent: -9999px;
	margin-top: -45px;
	opacity:0.6;
}
.bxslider_btn_next {
	position: absolute;
	right: 50px;
	top: 50%;
	z-index: 99;
	background: url('../images/bxslider_btn_next.png') no-repeat 0 50%;
	border: 0;
	width: 38px;
	height: 91px;
	text-indent: -9999px;
	margin-top: -45px;
	opacity:0.6;
}

.main_cont{position:absolute;width:1000px;height:87px;left:50%;top:50%;margin-left:-500px;margin-top:-43px;border:0px solid red;text-align:center;z-index:900}
.main_cont_t{;}
.main_cont_t h3{color:#fff;font-size:50px;margin:0;font-family:"NotoSans-Bold", sans-serif}
.main_cont_tb{font-size:40px;line-height:50px;padding:20px 0 23px}
.main_cont_t_txt{color:#fff;font-size:20px;}

.main_cont_short{position:relative;width:386px;margin:0 auto 50px;height:50px;}
.main_cont_short ul{height:50px}
.main_cont_short ul li{width:183px;height:50px;float:left;}
.main_cont_short ul li a{display:block;width:183px;height:50px;border:2px solid #fff;text-decoration:none;color:#fff;font-size:18px;letter-spacing:0.5px;font-family: "nanum_EB", sans-serif;padding:10px 0 0}
.main_cont_short ul li a:hover{border:2px solid #569eff;color:#569eff;}

#bx-pager1{;}
#bx-pager1 a{display:inline;color:#a3a2a1;font-size:30px;font-weight:bold;width:50px;height:50px;margin:0 0 0 4px;text-decoration:none;}
#bx-pager1 a.active{color:#fff;font-size:30px;font-weight:bold;width:50px;height:50px;}


.colgroup_wrap{width:100%;min-width:1200px;height:480px}
.colgroup{position:relative;width:1200px;margin:0 auto;height:480px;padding-top:74px}
.colgroup a{text-decoration:none}
.colgroup ul{height:317px}
.colgroup ul li{position:relative;width:210px;height:317px;float:left;margin-right:105px;text-align:center}
.colgroup ul li a{display:block;width:210px;height:317px;color:#666;font-size:13px;}

.main_img_ov{position:absolute;left:0;top:0}
.main_img{position:absolute;left:0;top:0;z-index:200}

.cg_cont{padding:20px 0 0}
.cg_c1{color:#333;font-size:20px;padding:0 0 20px;font-family: "NotoSans-Medium", sans-serif;}
.cg_c2{line-height:20px;font-size:14px;font-family: "NotoSans-Light", sans-serif;}


.colgroup_wrap2{width:100%;min-width:1200px;height:468px;letter-spacing:0.5px;background:url(../images/common/colgroup2_bg.jpg) no-repeat;background-size:cover}
.colgroup2{position:relative;width:1200px;margin:0 auto;text-align:center;padding-top:70px}
.colgroup2 a{text-decoration:none}
.cg2_line{width:40px;margin:0 auto;border-top:4px solid #fff;}
.colgroup2 h3{color:#fff;font-size:40px;margin:0;padding:25px 0 15px;font-family: "nanum_B", sans-serif;}
.colgroup2 .cg2_d{color:#fff;opacity:0.9;font-size:15px;font-family: "nanum_B", sans-serif}
.colgroup2 ul{margin-top:55px;}
.colgroup2 ul li{width:377px;height:173px;float:left;background:url(../images/common/cg2_img.png) no-repeat;margin-right:33px;padding:35px 30px}
.cg2_cont{width:205px;height:173px;float:left;text-align:left}
.cg2_cont h4{color:#333;font-size:23px;font-family: "nanum_B", sans-serif;margin:0;padding:0 0 10px}
.cg2_cont p{color:#666;font-size:13px;line-height:23px}
.cg2_more{width:84px;height:96px;float:right;}
.cg2_more a{display:block;width:84px;height:96px;border-radius:15px;background:#1a7bff;color:#fff;font-size:13px;line-height:21px;letter-spacing:0.5px;font-family: "nanum_B", sans-serif;padding-top:16px;margin-top:3px}
.cg2_more a:hover{background:#333}


.colgroup_wrap3{width:100%;min-width:1200px;height:710px;background:url(../images/common/colgroup3_bg.jpg) repeat;text-align:center}
.colgroup3{position:relative;width:1200px;margin:0 auto;height:580px;padding-top:83px}
.colgroup3 h3{color:#9b9a9a;font-size:30px;margin:0 0 60px;font-family: "nanum_EB", sans-serif;line-height:25px}
.colgroup3 h3 span{color:#0055c8;font-size:35px;font-family: "nanum_B", sans-serif}
.colgroup3 a{text-decoration:none}
.colgroup3 ul{height:420px}
.colgroup3 ul li{position:relative;width:359px;height:420px;float:left;margin-right:60px}
.colgroup3 ul li h4{color:#333;font-size:25px;margin:25px 0 20px;font-family: "nanum_EB", sans-serif}
.colgroup3 ul li p{color:#666;font-size:13px;line-height:23px;letter-spacing:-0.5px}
.colgroup3 ul li a{display:block;width:123px;height:37px;margin:0 auto;border-radius:30px;border:1px solid #b7b7b7;color:#666;font-size:14px;padding-top:8px;margin-top:25px}
.colgroup3 ul li a:hover{border:1px solid #1a7bff;color:#fff;background:#1a7bff}


.colgroup_wrap4{width:100%;min-width:1200px;height:376px;background:url(../images/common/colgroup4_bg.jpg) no-repeat;background-size:cover}
.colgroup4{position:relative;width:1200px;margin:0 auto;height:376px;}
.cg4_cont{width:600px;float:left;padding-top:20px}
.cg4_cont h3{color:#fff;font-size:16px;font-family:"NotoSans-Medium", sans-serif;}
.cg4_cont_adress{font-size:13px;color:#fff}
.cg4_cont_call{color:#29d17d;font-size:20px;font-family: "NotoSans-Medium", sans-serif;}

.cg4_icon{float:right;border-left:1px solid #737376;height:163px;margin-top:120px;width:520px}
.cg4_icon ul{text-align:center}
.cg4_icon ul li{width:163px;height:163px;float:left;margin-left:60px}
.cg4_icon ul li a{display:block;width:163px;height:163px;border-radius:50%;border:1px solid #787675;text-decoration:none;padding:25px 0 0}
.cg4_icon ul li a:hover{border:1px solid #29d17d}
.cg4_icon ul li h4{color:#fff;font-size:17px;margin:0;padding:18px 0 10px}
.cg4_icon ul li p{color:#29d17d;font-size:12px;font-family: "NotoSans-Light", sans-serif;}



.colgroup_wrap5{width:100%;min-width:1200px;height:256px;background:#e9e9e9}
.colgroup5{position:relative;width:1200px;margin:0 auto;height:256px}
.colgroup5 a{text-decoration:none}
.cg5_sitemap{width:1200px;height:174px;float:left;border-right:0px solid #c5c5c5;margin-top:60px}
.cg5_sm{float:left;margin-right:210px;}
.cg5_sm h4{font-size:15px;color:#333;font-family: "NotoSans-Medium", sans-serif;margin:0 0 12px}
.cg5_sm p{font-size:13px;color:#666;line-height:30px}
.cg5_sm p a{font-size:13px;color:#666;}
.cg5_sm p a:hover{color:#019f53}
.cg5_sm p a.active{color:#019f53}



/* -------------------------------------------------------------------
| Body section
|
| 테마내에 일반적인 컨텐츠들의 속성을 정의합니다.
| ------------------------------------------------------------------*/
/* warp */
#wrap {background-color:#fff;}
/* 서브 레이아웃 */
#sub_top_area_wrap{width:100%;min-width:1200px;height:350px}
.sub_top_area{position:relative;width:1200px;margin:0 auto;text-align:center;color:#fff;font-size:23px;padding-top:80px}
.sub_top_area_t{font-size:50px;font-family: "NotoSans-Bold", sans-serif}
.sub_top_area_t2{font-size:20px;line-height:25px;}
.sub_top_line{border-top:5px solid #fff;width:63px;margin:25px auto 10px}

.sub_article_wrap{position:relative;width:100%;min-width:1200px;}
.sub_article{position:relative;width:1200px;margin:0 auto;}
.title{text-align:center;padding-top:40px}
.sub_title{color:#342b2a;font-size:35px;letter-spacing:0.5px;font-family: "NotoSans-Medium", sans-serif}
.sub_menu{;}
.list-group{text-align:center;margin:40px 0 60px; display: flex; justify-content: center;}
.list-group a.menubox{background:#ebebeb;padding:15px 60px;font-size:14px;color:#666;text-decoration:none;margin:0 2px}
.list-group a.active{background:#009c4e;color:#fff}
.list-group a.menubox:hover{background:#009c4e;color:#fff}
.contents{min-height:450px;padding-bottom:50px}


/* 준비중 */
.ready_info{;}


/* 인사말 */
.greeting_info{line-height:35px;font-size:15px;color:#666;}
.greeting_img{;}
.greeting_cont{;}
.greeting_txt1{color:#000;font-family:"NotoSans-Bold", sans-serif;font-size:20px;border-bottom:1px solid #000;padding-bottom:3px}
.greeting_txt2{font-size:17px;color:#009c4e}

.greeting_txt3{border-bottom:1px solid #666;padding-bottom:2px}
.greeting_txt4{color:#333;font-family: "nanum_B", sans-serif}
.greeting_txt5{font-size:23px;color:#0c66e2;font-family: "nanum_B", sans-serif}


/* 네트워크 */
.network_info{text-align:center;line-height:35px;font-size:15px;color:#666}
.network_txt1{font-size:20px;color:#000;font-family: "NotoSans-Medium", sans-serif}


/* 경쟁력 */
.compete_info{line-height:35px;font-size:15px;color:#666;}
.compete_info h3{color:#019f53;font-size:20px;font-family: "NotoSans-Medium", sans-serif}
.compete_txt1{color:#000;font-size:17px}


/* 프로젝트수행경험 */
.project_table{width:100%;float:left;margin-right:1%;font-size:15px;color:#666;margin-top:10px;text-align:left; border-top:2px solid #006e52;margin-bottom:50px}
.project_table caption{font-size:0px;color:#fff;padding:0;line-height:0}
.project_table th{font-size:17px;background:#f5f5f5;border:1px solid #ccc;color:#333;text-align:center;line-height:30px;padding:10px 40px}
.project_table td{border:1px solid #ccc;padding:40px 40px;font-size:15px; color:#666; line-height:30px}


/* 주요고객 */
.major_info{font-size:13px;}
.major_info ul{display: flex; flex-wrap: wrap; }
.major_info li{border:1px solid #ccc;width:285px;height:320px; margin-right:20px;margin-bottom:40px; display: flex; flex-direction: column; align-content: center; text-align:center;}
.major_info li:nth-child(4n) {margin-right:0;}
.major_info h3{color:#000;font-size:15px}


/* 오시는길 */
.location_info{position:relative;text-align:center}
.location_info h3{font-size:20px;color:#009c4e;font-family: "NotoSans-Medium", sans-serif}
.location_txt1{font-size:17px;color:#333;font-family: "NotoSans-Medium", sans-serif;padding:0 0 15px}
.location_txt1 span{border-bottom:1px solid #333;padding-bottom:2px}
.location_txt2{font-size:15px;color:#666;line-height:23px}
.location_txt3{line-height:30px;color:#333;font-size:15px}
.location_txt3-1{color:#086cf5;font-size:20px;font-family: "nanum_EB", sans-serif}
.location_txt3-2{font-family: "nanum_EB", sans-serif}
.location_txt3-3{font-size:13px;color:#676767}

a.location_txt2 {word-break: break-all;}
a.location_txt2:hover {color:#009c4e;}


/* 회사연혁 */
.history_info{position:relative;width:857px;margin:0 auto;background:#f7f7f7;padding:45px 70px}
.history_info h3{margin:0 0 48px;font-size:20px;color:#333;font-family: "NotoSans-Medium", sans-serif;}
.history_info h3 span{border-bottom:1px solid #333;padding-bottom:2px}
.history_info ul{margin-bottom:10px}
.history_info ul:after {display:block;clear:both;content:"";}
.history_info ul li{min-height:94px; display: flex; align-items: center;}
.history_info ul li .history_cir{flex-shrink: 0;width:94px;height:94px;float:left;border-radius:50%;background:#bcbcbc;margin-right:40px;color:#fff;font-size:20px;text-align:center;font-family: "NotoSans-Medium", sans-serif;padding-top:35px}
.history_info ul li .history_des{float:left;color:#777;font-size:15px;line-height:30px;padding-top:17px}
.history_info ul li .history_mon{float:left;color:#4e4e4e;font-size:15px;font-family: "NotoSans-Medium", sans-serif;padding-top:35px;margin-right:12px}
.history_info ul li .history_mon p{margin-bottom:18px}
.history_mon_d{color:#777;font-size:15px;line-height:25px;font-family: "NotoSans-Medium", sans-serif;padding-left:20px}
.history_img{position:absolute;bottom:45px;right:38px}
.history_img2{position:absolute;bottom:69px;right:65px}


/* 조직도 */
.organization_info{text-align:center}
.organization_info h3{font-size:30px;color:#333;font-family: "nanum_EB", sans-serif;margin:0px 0 50px}
.organization_info h4{font-size:16px;color:#fff;font-family: "nanum_B", sans-serif;width:90%;height:34px;margin:30px auto 40px;background:#333;padding-top:7px}

.organization_table{width:90%;margin:0 auto;font-size:14px;color:#666;text-align:center;}
.organization_table caption{font-size:0px;color:#fff;padding:0;line-height:0}
.organization_table th{background:#7e7e7e;border:1px solid #ccc;color:#fff;font-family: "nanum_B", sans-serif;text-align:center;padding:12px 3px;font-size:14px}
.organization_table td{border:1px solid #ccc;padding:12px 3px}

.organization_line{border-top:2px dashed #ccc;margin:100px 0}



/* 제작/설치 사업부 */
.business_1_info{line-height:30px;font-size:15px;color:#666;}
.business_1_info:after {display:block;clear:both;content:"";}
.business_1_info h3{margin:0 0 30px;font-size:25px;color:#333;font-family: "nanum_EB", sans-serif;}
.business_1_info .business_1_des{width:550px;float:left}
.business_1_info .business_1_cont{width:573px;float:right;}
.business_1_txt{color:#de231a}

.business_1_coverage{border:1px solid #ccc;padding:15px 25px;margin:30px 0 0;width:60%}
.business_1_coverage h4{background:#555;color:#fff;padding:8px 10px;font-size:15px;font-family: "nanum_B", sans-serif;}
.business_1_coverage ul{}
.business_1_coverage ul li{padding-left:10px}

/* AL선박 제작부 */
.business_2_info{line-height:30px;font-size:15px;color:#666;width:80%;margin:0 auto}
.business_2_info h3{margin:0 0 40px;font-size:25px;color:#333;font-family: "nanum_EB", sans-serif;text-align:center}
.business_2_info h4{background:#555;color:#fff;padding:8px 20px;font-size:15px;font-family: "nanum_B", sans-serif;}
.business_2_info p{padding-left:20px}

/* 절단 사업부 */
.business_3_info{line-height:28px;font-size:14px;color:#666;width:100%;margin:0 auto}
.business_3_info ul{}
.business_3_info ul:after {display:block;clear:both;content:"";}
.business_3_info ul li{width:50%;float:left;margin-bottom:80px;padding:0px 80px;border:0px solid #ccc}
.business_3_img{width:100%;background:#ccc}
.business_3_des{margin-top:20px;padding-left:20px}
.business_3_txt{font-family: "nanum_EB", sans-serif;color:#333;font-size:20px}

/* 제품정보 */
.product_info{line-height:30px;font-size:15px;color:#666;width:80%;margin:0 auto}
.product_info h3{margin:0 0 40px;font-size:25px;color:#333;font-family: "nanum_EB", sans-serif;text-align:center}
.product_info h4{background:#555;color:#fff;padding:8px 20px;font-size:15px;font-family: "nanum_B", sans-serif;}
.product_info p{padding-left:20px}
.product_pl1{padding-left:103px}
.product_pl2{padding-left:58px}
.product_pl3{padding-left:56px}
.product_pl4{padding-left:10px}

.product_info ul{}
.product_info ul:after {display:block;clear:both;content:"";}
.product_info ul li{width:50%;float:left;margin-bottom:80px;padding:0px 57px;border:0px solid #ccc}
.product_img{width:100%;background:#ccc}
.product_des{margin-top:30px;padding-left:30px}
.product_des h5{font-family: "nanum_B", sans-serif;color:#333;font-size:20px}
.product_txt{font-family: "nanum_EB", sans-serif;color:#333;font-size:20px}
.product_des_box{font-size:13px;background:#f4f3f3;padding:10px 15px;margin-left:10px;margin-top:10px;width:70%}


/* member */
.member_list {display: flex; flex-wrap: wrap; }
.member_list > li {width: calc(50% - 15px); margin-right: 30px;}
.member_list > li:nth-child(2n) {margin-right: 0; }
.member_list > li:nth-child(n+3) {margin-top:70px;}
.member_list .txt {margin-top: 30px;}
.member_list .txt .name {min-height: 117px;}
.member_list .txt .name h2 {font-size: 17px; color:#000; margin: 0; line-height:30px;}
.member_list .txt .name h2.small {font-size: 15px;}
.member_list .txt .name h2 b {font-weight: 700; font-size: 20px; }
.member_list .txt .name p {font-size: 16px; font-weight: 400; color:#666; margin-top: 10px;}
.member_list .txt .career {border-top: 1px solid #000; margin-top: 30px; }
.member_list .txt .career > li {border-bottom: 1px solid #ddd; padding: 22px 0;display: flex; align-items: flex-start ;}
.member_list .txt .career h3 {margin: 0 40px 0 0; position: relative; padding-left: 15px; font-size: 17px; font-weight: 500; color:#000; flex-shrink: 0; position: relative; top:1px;}
.member_list .txt .career h3::before {content: ''; display: block; width: 8px; height: 11px; background:url('../images/sub/mem_arrow.png') no-repeat; position: absolute; left: 0; top:3px; }
.member_list .txt .career ul > li {font-size: 15px; font-weight: 300; color:#333;  position: relative; padding-left: 9px; line-height: 1.6;}
.member_list .txt .career ul > li + li {margin-top:10px;}
.member_list .txt .career ul > li::before {content: ''; display: block; width: 4px; height: 4px; background: #333; border-radius: 50%; position: absolute;
left: 0; top:8px; }