@import url("http://fonts.googleapis.com/css?family=Nixie+One");
#sub_contents {font-size:15px;line-height:1.6;color:#696969;}


.product > img {width:100%;margin-bottom:30px;}


.p_top {margin-bottom:40px;
    text-align:center;
    background:url(/app/dubu_sourcecode/docs/imgs/1525936442_product08.jpg)no-repeat center center;
	-webkit-background-size:cover;
	background-size:cover;}
.p_top > span {display:block;
	padding:50px;
	background-color:rgba(0,0,0,.4)}
.p_top h3 {color:#fff;line-height:1.3;}
.p_top h3 span {display:block;
	font-family:'Nixie One';color:#eee;}
.p_top h3 strong {font-size:40px;}
.p_top p {color:#fff;font-size:17px;}


.p_con+.p_con {margin-top:50px;}
.p_con h3 {text-align:center;margin-bottom:15px;
	font-size:36px;color:#333;letter-spacing:-3px;font-family:'noto sans kr';font-weight:400;}
.p_con h3:after {content:'';display:block;width:25px;border-bottom:2px solid #97bdda;margin:0px auto 0;}

.p_con p span {display:block;margin-top:20px;
	text-align:center;font-size:18px;}
.p_con p span strong {color:#333;}


.p_top+.download {margin-top:-20px;}
.download+.p_con {margin-top:30px;}
.p_con+.download  {margin-top:60px;}
.download {margin-top:20px;overflow:hidden;}
.download h3 {margin-bottom:5px;
    font-size:19px;letter-spacing:-1px;color:#333;
	position:relative;}
.download h3:after {content:'';display:block;border-bottom:1px dotted #ccc;width:100%;
	position:absolute;top:50%;}
.download h3 span {border-right:4px solid #107cea;
    background-color:#fff;
    padding-right:10px;
	position:relative;z-index:1;}

.download a {display:block;border:1px solid #ccc;
    text-align:center;color:#107cea;font-weight:600;
	padding:20px 0;
	-webkit-transition: all .2s 0s;
	-ms-transition: all .2s 0s;
	-o-transition: all .2s 0s;
	transition: all .2s 0s;
	-ms-word-break:keep-all;
	word-break:keep-all;}
.download a:hover {background-color:#107cea;color:#fff;}
.download a+a {border-left:0;}
.column2 a {width:50%;float:left;}
.column1 a {width:100%;}


.p_con table caption {margin-bottom:10px;
    font-size:20px;color:#107cea;font-weight:600;text-align:left;}
.p_con table {width:100%;border-collapse:collapse;}
.p_con table th,.p_con table td {border:1px solid #ccc;
    font-size:14px;text-align:center;
	padding:5px;}
.p_con table th {background-color:#f7f7f7;}
.p_con table thead th {border-bottom:1px solid #666;}
.p_con table thead th:first-child {border-left:0;}
.p_con table thead th:last-child {border-right:0;}
.p_con table tbody th {border-left:0;}
.p_con table tbody td:last-of-type {border-right:0;}


.p_con img+p {margin-top:10px;}


.pd_list ul {overflow:hidden;}
.pd_list ul li {width:50%;float:left;border:1px solid #ddd;
	text-align:center;color:#999;
	padding:15px;}
.pd_list ul li+li {border-left:0;}


.dot {border:1px solid #ddd;
	padding:20px;}
.dot > li {padding-left:13px;}
.dot > li+li {margin-top:5px;}
.dot > li:before {content:'';width:3px;height:3px;display:inline-block;margin: 0 10px 3px -13px;
    border-radius:50%;
	background-color:#555;}


.p_con dl+dl {margin-top:40px;}
.p_con dl dt {margin-bottom:5px;
    font-size:30px;color:#555;font-weight:600;text-align:center;font-family:'Nixie One';}
.p_con dl dd img {width:100%;}
.p_con dl dd p {text-align:center;}
.p_con dl dd p+img {margin-top:10px;}
.p_con dl dd p strong {font-size:21px;font-weight:400;color:#999;}


.process {}
.process img {width:50%;margin-right:15px;
    vertical-align:middle;}
.process span {display:inline-block;}


.construct p {text-align:center;}
.construct p+ul {margin-top:15px;}
.construct ul li {
	text-align:center;color:#333;font-weight:600;
    padding:15px;
	background-color:#f7f7f7;}
.construct ul li+li {margin-top:10px;
	padding-top:10px;}
.construct ul li img {display:block; margin:0 auto 10px;}


.report {overflow:hidden;margin-top:50px;}
.report img {display:block;border:1px solid #ddd;width:49.5%;float:left;margin-bottom:10px;}
.report img:nth-child(2n) {margin-left:1%}



.sort {overflow:hidden;}
.sort > img {width: 37%;float:left;}
.sort ul {width:60%;float:right;}


.detail {text-align:center;}



/* tablet */
@media screen and (min-width:769px) and (max-width:991px){
    
    .construct ul li img {width:100%;}
}

/* mobile */
@media screen and (max-width:768px){
    .p_top > span {padding: 50px 10px;}
    .p_top h3 strong{font-size:30px;}
    
    
    .p_con h3 {font-size:28px;}
    
    
    .download h3 {font-size:15px;}
    
    
    .p_con dl dt {font-size:24px;}
    
    
    .process img {width:40%}
    
    
    .construct ul li img {width:100%;}
    
    
    .sort > img {width: 100%;float:none;margin-bottom:10px;}
	.sort ul {width:100%;float:none;}
    
}