@import url(common.css);
@import url(font.css);

body {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  color: #555;
}

/* 모달로 띠워지는 제품상세보기____________________________________________________________*/

#detail_view{
	width: 100%;
	margin :0 auto;
}

#vheader1{
	width: inherit;
	height: 380px;
	background: url(../image/product/v1_topimg.jpg) no-repeat right bottom;
}
#vheader2{
	width: inherit;
	height: 380px;
	background: url(../image/product/v2_topimg.jpg) no-repeat right bottom;
}
#vheader3{
	width: inherit;
	height: 380px;
	background: url(../image/product/v3_topimg.jpg) no-repeat right bottom;
}
#vheader4{
	width: inherit;
	height: 380px;
	background: url(../image/product/v4_topimg.jpg) no-repeat right bottom;
}
#vheader5{
	width: inherit;
	height: 380px;
	background: url(../image/product/v5_topimg.jpg) no-repeat right bottom;
}
#vheader6{
	width: inherit;
	height: 380px;
	background: url(../image/product/v6_topimg.jpg) no-repeat right bottom;
}
#vheader7{
	width: inherit;
	height: 380px;
	background: url(../image/product/v7_topimg.jpg) no-repeat right bottom;
}
#vheader8{
	width: inherit;
	height: 380px;
	background: url(../image/product/v8_topimg.jpg) no-repeat right bottom;
}



/* 로고영역 ///////////*/

#top_logo{
	display: flex;
	justify-content: space-between;
	padding: 30px 30px 0;
}

#top_logo .top_right{
	margin-top: -20px;
    display: flex;
    align-items: center;
}

#top_logo .top_right img:nth-child(1){
	width: 80px;
}
#top_logo .top_right img:nth-child(2){
	width: 80px;
}
#top_logo .top_right img:nth-child(3){
	height : 80px;
}



/* 타이틀 영역 ///////////*/

#top_title{
	padding: 0 30px;
	margin-bottom: 20px;
}

#top_title .vtext1{
	font-size: 40px;
	font-weight: 700;
	color: #333;
	margin-top: 20px;
}

#top_title .vtext21{
	color: #87a840;
	font-size: 22px;
	letter-spacing: -1.5px;
}
#top_title .vtext22{
	color: #00af50;
	font-size: 22px;
	letter-spacing: -1.5px;
}
#top_title .vtext23{
	color: #9273ba;
	font-size: 22px;
	letter-spacing: -1.5px;
}
#top_title .vtext24{
	color: #55a7ed;
	font-size: 22px;
	letter-spacing: -1.5px;
}
#top_title .vtext25{
	color: #7030a0;
	font-size: 22px;
	letter-spacing: -1.5px;
}
#top_title .vtext26{
	color: #a6a6a6;
	font-size: 22px;
	letter-spacing: -1.5px;
}
#top_title .vtext27{
	color: #ffc000;
	font-size: 22px;
	letter-spacing: -1.5px;
}
#top_title .vtext28{
	color: #c0504e;
	font-size: 22px;
	letter-spacing: -1.5px;
}



#top_title .vtext3{
	margin-top: 20px;
	list-style-type: disc;
	list-style-position: inside;
	color: #333;
	font-size: 18px;
}

#detail_view h2{
	font-family: 'Raleway', sans-serif;
	font-weight: bold;
}

#detail_view h2.bar1{
	font-weight: bold;
	background-color: #b1ce73;
	color: #fff;
	padding: 10px 0;
	font-size: 30px;
	letter-spacing: 1px;
	text-align: center;
}
#detail_view h2.bar2{
	background-color: #00af50;
	color: #fff;
	padding: 10px 0;
	font-size: 28px;
	letter-spacing: 1px;
	text-align: center;
}
#detail_view h2.bar3{
	background-color: #9273ba;
	color: #fff;
	padding: 10px 0;
	font-size: 28px;
	letter-spacing: 1px;
	text-align: center;
}
#detail_view h2.bar4{
	background-color: #55a7ed;
	color: #fff;
	padding: 10px 0;
	font-size: 28px;
	letter-spacing: 1px;
	text-align: center;
}
#detail_view h2.bar5{
	background-color: #7030a0;
	color: #fff;
	padding: 10px 0;
	font-size: 28px;
	letter-spacing: 1px;
	text-align: center;
}
#detail_view h2.bar6{
	background-color: #a6a6a6;
	color: #fff;
	padding: 10px 0;
	font-size: 28px;
	letter-spacing: 1px;
	text-align: center;
}
#detail_view h2.bar7{
	background-color: #ffc000;
	color: #fff;
	padding: 10px 0;
	font-size: 28px;
	letter-spacing: 1px;
	text-align: center;
}
#detail_view h2.bar8{
	background-color: #c0504e;
	color: #fff;
	padding: 10px 0;
	font-size: 28px;
	letter-spacing: 1px;
	text-align: center;
}


/* 콘텐츠 영역 ///////////*/

#view_contents{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding: 30px 30px 100px;
	box-sizing: border-box;
	/* background-color: #ccc; */
}

h3{
	font-size: 18px;
	color: #000;
	padding-left: 6px;
	margin-bottom: 15px;
	font-weight: 500;	
}
.material-icons{
	vertical-align: top;
	color: crimson;
	margin-right: 5px;
	font-size: 30px;
}


/* 콘텐츠 왼쪽영역______ */
.view_left{
	width: 530px;
	box-sizing: border-box;
	/* background-color: yellow; */
}

.view_left ul li p{
	margin-bottom: 35px;
}

.view_list{
	display: flex;
	justify-content: space-between;
}

.view_list img{
	width: 150px;
}

.view_list .view_list_text{
	list-style-type: disc;
	list-style-position: inside;
	padding-left: 10px;
}

.view_list .view_list_img1{
	text-align: center;
	margin-top: -30px;
	padding: 20px;
	border:2px solid #b1ce73;
}
.view_list .view_list_img2{
	text-align: center;
	margin-top: -30px;
	padding: 20px;
	border:2px solid #00af50;
}
.view_list .view_list_img3{
	text-align: center;
	margin-top: -30px;
	padding: 20px;
	border:2px solid #9273ba;
}
.view_list .view_list_img4{
	text-align: center;
	margin-top: -30px;
	padding: 20px;
	border:2px solid #55a7ed;
}
.view_list .view_list_img5{
	text-align: center;
	margin-top: -30px;
	padding: 20px;
	border:2px solid #7030a0;
}
.view_list .view_list_img6{
	text-align: center;
	margin-top: -30px;
	padding: 20px;
	border:2px solid #a6a6a6;
}
.view_list .view_list_img7{
	text-align: center;
	margin-top: -30px;
	padding: 20px;
	border:2px solid #ffc000;
}
.view_list .view_list_img8{
	text-align: center;
	margin-top: -30px;
	padding: 20px;
	border:2px solid #c0504e;
}

.view_list_mark{
	text-align: right;
	margin-top: 15px;
	margin-right: 30px;
}



/* 콘텐츠 오른쪽영역______ */
.view_right{
	width: 530px;
	box-sizing: border-box;
	/* background-color: pink; */
}

table{
	width: 100%;
	margin-bottom: 30px;
}

th{
	background-color: #bebdbd;
}

table tr td:first-child{
	background-color: #f8f5f5;
}

table tr td{
	text-align: center;
}

.al{
	text-align: left;
}

table.wide tr td:first-child{
	text-align: center;
	background-color: #f8f5f5;
	width: 30%;
}
td, th{
	border: 1px solid #ccc;
	padding: 7px;
}

.point2{
	margin: 30px 0;
	clear: both;
}

.color_red{
	color: crimson;
}

.left{
	width: 50%;
	float: left;
}


.point3{
	clear: both;
	font-weight: bold;