@charset "utf-8";
.do-about {
	position:relative;
	color:rgba(10,40,60,1);
	font-size:16px;
	
	font-family:"Gothic A1",serif;
}

.do-about-flex {
	position:relative;
	width:100%;
	padding:0px 0 0px;
	z-index:2;
	margin:0px auto 0px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	-webkit-flex-direction: row;
			flex-direction: row;
}
.do-about-flex .photo {
	position:relative;
	display:block;
	vertical-align:top;
	order:2;
	width:50%;
	text-align:right;
	align-self: end; /*start, center end*/
}
.do-about-flex .photo .img {
	position:relative;
}
.do-about-flex .photo .img img {
	position:relative;
	max-width:100%;
}
.do-about-flex .detail {
	position:relative;
	display:block;
	order:1;
	vertical-align:top;
	width:50%;
}


.do-about .logo {
	position:relative;
	text-align:center;
}
.do-about-flex .detail .inner {
	position:relative;
}
.do-about .detail-tit {
	position:relative;
	font-size:2.250em;
	font-weight:500;
	line-height:130%;
	letter-spacing:-0.5px;
}
.do-about strong {
	font-weight:800;
}
.do-about .about-img-bg {
	position:absolute;
	top:0;
	right:0;
	width:20%;
	height:40%;
	
	background:rgba(10,40,60,1);
	z-index:1;
}
.do-about .detail-slogan {
	position:relative;
	font-size:1.500em;
	line-height:160%;
	color:rgba(190,130,100,1);
	letter-spacing:-1px;
	font-family:"Noto Serif KR",serif;
}
.do-about .detail-box {
	position:relative;
	left:5px;
	border-left:10px solid rgba(160,130,105,1);
	padding-left:40px;
	font-size:1.125em;
}
.do-about .detail-box .ment {
	position:relative;
	font-size:1.125em;
	line-height:170%;
	letter-spacing:-1px;
	font-weight:400;
}
.do-about .m-img,
.do-about .m-img2 {
	position:relative;
	display:none;
	text-align:center;
}
.do-about .m-img img{
	position:relative;
	width:80%;
}
.do-about .m-img2 img{
	position:relative;
	width:100%;
}
@media screen and (max-width: 1440px) {
	.do-about {
		font-size:14px;
	}
	
	.do-about-flex .photo {
		width:40%;
		align-self: start;
	}
	.do-about-flex .detail {
		width:60%;
	}
}
@media screen and (max-width: 1280px) {
	.do-about {
		font-size:13px;
	}
	.do-about .detail-box .ment {
		font-size:16px;
	}
}
@media screen and (max-width: 1024px) {
	.do-about {
		font-size:11px;
	}
	.do-about .logo img {
		width:220px;
	}
	.do-about .detail-box {
		left:0px;
		border-left-width:6px;
		padding-left:30px;
	}
}
@media screen and (max-width: 768px) {
	.do-about {
		font-size:10px;
	}
	.do-about-flex {
		-webkit-flex-direction: column;
				flex-direction: column;
	}
	
	.do-about-flex .detail {
		width:100%;
	}
	.do-about-flex .photo {
		position:absolute;
		right:0;
		width:30%;
	}
	
}
@media screen and (max-width: 480px) {
	
	.do-about {
		font-size:9px;
	}
	.do-about .about-img-bg {
		width:10%;
		display:none;
	}
	.do-about-flex .photo {
		display:none;
	}
	.do-about .detail-box {
		border-left-width:0px;
		padding-left:0px;
	}
	.do-about .m-img,
	.do-about .m-img2 {
		display:block;
	}
	
	.do-about .detail-tit {
		font-size:2.500em;
		text-align:center;
		line-height:150%;
	}
	.do-about .detail-box .ment {
		text-align:center;
	}
	.do-about-flex .detail .inner {
		padding:0 20px;
	}
}

.do-about .detail-slogan-box {
	position:relative;
	display:inline-block;
	text-align:left;
}
.do-about .detail-name {
	
	position:relative;
	font-size: 4.500em;
	letter-spacing:-1px; 
    line-height: 100%;
	text-transform:uppercase;
	font-weight:500;
	color:rgba(190,130,100,1);
	font-family:"Playfair Display","Gothic A1",serf;
}
.do-about .detail-name .sm {
	line-height: 160%;
	position:relative;
	font-size: 0.465em;
}

.do-summary {
	position:relative;
    color:rgba(160,130,105,1);
	font-size:16px;
	font-family:"Gothic A1",serif;
}
.do-summary .do-summary-title {
	position:relative;
	display:inline-block;
	font-size:4.000em;
	font-weight:800;
	line-height:130%;
	letter-spacing:-0.5px;
}
.point-color {
	color:rgba(190,130,100,1);
}
.point-color2 {
	color:rgba(160,130,105,1);
}
.do-summary .do-summary-title .point {
	position:relative;
	display:inline-block;
}
.do-summary .do-summary-title .point:before {
	content:''; 
	display: block;
	position: absolute;
	right:-30px;
	top:-30px;
	width: 30px;
	height: 30px;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
		    border-radius: 50%;
	border:6px solid rgba(160,130,105,1);
}

@media screen and (max-width: 480px) {
	.do-summary .do-summary-title .point:before {
		right:-20px;
		top:-10px;
		width: 20px;
		height: 20px;
		border:4px solid rgba(160,130,105,1);
	}
}
.do-summary strong {
	font-weight:700;
}

.do-summary-list {
	position:relative;
	display:block;
	padding:0px 0 0;
	vertical-align:top;
	margin: 0px -3% 0px;
	overflow:hidden;
	font-size:0;
	
	/*font-size:0; 	*/
}


.do-summary-list li {
	position:relative;
	width:19%; 
	margin: 0px 3% 6%;
	vertical-align:top;
	display:inline-block;
	font-size:16px;
}
.do-summary-list li {
	margin-bottom:0%;
}
.do-summary-list li:nth-child(3n-0) {
	margin-top:6%;
}
.do-summary-list li:nth-child(3n-1) {
	margin-top:3%;
}
.do-summary-list li:nth-child(3n-2) {
	margin-top:0%;
}
.do-summary-list.type1 li {width:94%;}
.do-summary-list.type2 li {width:44%;}
.do-summary-list.type3 li {width:27.333%;}
.do-summary-list.type4 li {width:19%;}
.do-summary-list.type5 li {width:14%;}

.do-summary-box .title {
	position:relative;
	font-size:1.375em;
	font-weight:600;
	line-height:150%;
	letter-spacing:-0.5px;
	/*font-family:"Noto Serif KR",serif;*/
}
.do-summary-box .cont-num {
	position:relative;
	font-size:5.500em;
	line-height:100%;
	color: rgba(160,130,105,.15);
	font-family:"Bodoni Moda",sans-serf;
	font-style:italic;
}
.do-summary-box .cont {
	position:relative;
	padding:20px;
	z-index:3;
	color:rgba(80,50,20,1);
}
.do-summary-box .cont .num {
	position:absolute;
	font-size:8.000em;
	line-height:100%;
	color: rgba(180,150,100,.2);
	font-weight:500;
	font-family:"Bodoni Moda",sans-serf;
	font-style:italic;
	display:inline-block;
	right:10px;
	top:-40px;
	display:none;
	z-index:2;
}
.do-summary-box .cont-tit {
	position:relative;
	padding:0 0 0 0px;
}
.do-summary-box .cont-tit::before {
	/*content:''; 
	display: block;
	position: absolute;
	left: 0px;
	width: 1px;
	height: calc(100% + 40px);
	top: -40px;
	background:rgba(160,130,105,.6);*/
}

.do-summary-box .icon {
	position:relative;
	text-align:center;
	font-size:0;
	z-index:2;
	margin-top:-30px;
	/*-webkit-box-shadow: 10px 10px 20px rgba(0,0,0,.15);
	   -moz-box-shadow: 10px 10px 20px rgba(0,0,0,.15);
			box-shadow: 10px 10px 20px rgba(0,0,0,.15);*/
}
.do-summary-box .icon .img {
	position:relative;
	display:inline-block;
	width:100%;
	z-index:2;
	overflow:hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	image-rendering: -webkit-optimize-contrast;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
		    border-radius: 10px;
}
.do-summary-box .icon .img::after {
	content:'';
	display:block;
    padding-bottom: 100%;
	padding-bottom: 56.25%;
	
}
.do-summary-box .icon img {
	position:absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	max-width:100%;
	max-height:100%;
	display:none;
}

@media screen and (max-width: 1280px) {
	.do-summary {
		font-size:14px;
	}
	.do-summary-list li {
		font-size:14px;
	}
	.do-summary-box .cont {
		padding:20px 0;
	}
}
@media screen and (max-width: 768px) {
	.do-summary {
		font-size:12px;
	}
	.do-summary-list li {
		width:44% !important;
	}
	.do-summary-list li:nth-child(even) {
		margin-top:8% !important;
	}
	.do-summary-list li:nth-child(odd) {
		margin-top:0% !important;
	}
	
}

@media screen and (max-width: 640px) {
	.do-summary {
		font-size:10px;
	}
	.do-summary-list {
		margin:0;
	}
	.do-summary-list li,
	.do-summary-list li:nth-child(even),
	.do-summary-list li:nth-child(odd) {
		font-size:16px;
		width:100% !important; 
		margin:0 !important;
		padding:20px 0px;
	}
	.do-summary-box .cont {
		padding:20px;
	}
	.do-summary-list li:nth-child(odd) .cont-num {
		text-align:right;
	}
}

@media screen and (max-width: 480px) {
	.do-summary {
		font-size:8px;
	}
	.do-summary-list li,
	.do-summary-list li:nth-child(even),
	.do-summary-list li:nth-child(odd) {
		font-size:15spx;
	}
	.do-summary-box .cont {
		padding:20px;
	}
}