@import url("common.css");

/*** 미디어 워크플로우 ***/
#cloud01, #cloud02{}
#cloud01 .tit_area, #cloud02 .tit_area, #cloud05 .tit_area{text-align:center;}
#cloud01 .tit_area h4.sub_title, #cloud02 .tit_area h4.sub_title, #cloud03 .tit_area h4.sub_title, #cloud05 .tit_area h4.sub_title{padding-bottom:15px;}

.cloud01_sec01 h5.sub_stitle{position:relative; display:inline-block; padding:0 20px; background:#fff; z-index:100}
.cloud01_sec01 .basic_area{position:relative; text-align:center; padding:70px 0 90px 0;}
.cloud01_sec01 .basic_area:after{position:absolute; display:block; content:""; overflow:hidden; width:100%; height:78px; background:url('/ko/distribution/img/big_arrow.png') center no-repeat;}
.cloud01_sec01 .basic_area dl{position:relative; margin-top:-20px; border:1px solid #ddd; border-radius:20px; z-index:90; padding:50px 40px; font-size:0}
.cloud01_sec01 .basic_area dd{display:inline-block; font-size:1rem; vertical-align:top; margin-top:4%; width:120px; letter-spacing:-0.3pt;}
.cloud01_sec01 .basic_area dd i{position:relative; display:block; margin:0 auto 5px auto; width:100%; height:25px; background:url('/ko/distribution/img/order_arrow_g.png') center 0 no-repeat; }
.cloud01_sec01 .basic_area dt{position:relative; display:inline-block; width:210px; vertical-align:top;}
.cloud01_sec01 .basic_area dt i{position:relative; display:block; margin:0 auto; width:123px; height:123px; margin-bottom:15px; background-position:center; background-repeat:no-repeat;}
	.cloud01_sec01 .basic_area dt.one i{background-image:url('/ko/distribution/img/cloud01_basic01.png')}
	.cloud01_sec01 .basic_area dt.two i{background-image:url('/ko/distribution/img/cloud01_basic02.png')}
	.cloud01_sec01 .basic_area dt.three i{background-image:url('/ko/distribution/img/cloud01_basic03.png')}

.cloud01_sec01 .complex_area{position:relative; text-align:center;}
.cloud01_sec01 .complex_area h5.sub_stitle{color:#4d2974; }
.cloud01_sec01 .complex_area dl{position:relative; margin-top:-20px; border:2px solid #4d2974; border-radius:20px; z-index:90; padding:50px 40px; font-size:0}
.cloud01_sec01 .complex_area dd{position:absolute; display:inline-block; z-index:100; width:60px; margin-left:-65px; top:50%; transform:translateY(-50%);}
	.cloud01_sec01 .complex_area dd.one{}
.cloud01_sec01 .complex_area dd i img{margin:6px 0}
.cloud01_sec01 .complex_area dt{position:relative; display:inline-block; width:343px; height:343px; border-radius:100%; vertical-align:top;}
.cloud01_sec01 .complex_area dt i{position:absolute; display:inline-block; z-index:100; width:70px; text-align:center;  top:50%; transform:translateY(-50%);}
.cloud01_sec01 .complex_area dt i img{margin:6px 0}
.cloud01_sec01 .complex_area dt p.stitle{padding:25% 0 5px 0;}
.cloud01_sec01 .complex_area dt p.stxt{line-height:180%}
.cloud01_sec01 .complex_area dt p.stxt.ab{position:absolute; width:100%; bottom:15%;}
	.cloud01_sec01 .complex_area dt.one{background-color:rgba(239,219,255,.5)}
	.cloud01_sec01 .complex_area dt.one i{left:8%;}
	.cloud01_sec01 .complex_area dt.two{background-color:rgba(214,214,255,.5); margin-left:-70px}	
	.cloud01_sec01 .complex_area dt.three{background-color:rgba(211,241,255,.5); margin-left:-70px}
	.cloud01_sec01 .complex_area dt.three i{right:8%;}

.cloud01_sec02{text-align:center;}
.cloud01_sec02 img{margin-top:70px;}

.cloud01_sec03{background:url('/ko/distribution/img/cloud01_bg.jpg') center no-repeat; background-size:cover}
.cloud01_sec03 dl{position:relative; z-index:100; font-size:0;}
.cloud01_sec03 dd{position:relative; display:inline-block; width:50%; vertical-align:top; padding-left:190px; margin-top:80px}
.cloud01_sec03 dd h5.sub_stitle{padding:15px 0 10px 0;}
.cloud01_sec03 dd i{position:absolute; width:161px; height:161px; left:0; display:inline-block; background-position:center; background-repeat:no-repeat;}
.cloud01_sec03 dd.one i{background-image:url('/ko/distribution/img/cloud01_icon01.png')}
.cloud01_sec03 dd.two i{background-image:url('/ko/distribution/img/cloud01_icon02.png')}
.cloud01_sec03 dd.three i{background-image:url('/ko/distribution/img/cloud01_icon03.png')}
.cloud01_sec03 dd.four i{background-image:url('/ko/distribution/img/cloud01_icon04.png')}


/*** 콘텐츠 배포와 자산관리 ***/
.cloud02_sec01 .tit_area{position:relative; z-index:120; height:389px; padding-top:125px; background:url('/ko/distribution/img/cloud02_img01.jpg') center no-repeat; background-size:cover;}

.cloud02_sec02{position:relative; z-index:100; margin-top:-194px}
.cloud02_sec02 .tit_area{padding:180px 0 70px 0}
.cloud02_sec02 dl{font-size:0; text-align:center;}
.cloud02_sec02 dd{display:inline-block; vertical-align:top; width:20%;}
.cloud02_sec02 dd i{position:relative; display:block; width:161px; height:161px; margin:0 auto 35px; background-position:center; background-repeat:no-repeat;}
	.cloud02_sec02 dd.one i{background-image:url('/ko/distribution/img/cloud02_icon01.png')}
	.cloud02_sec02 dd.two i{background-image:url('/ko/distribution/img/cloud02_icon02.png')}
	.cloud02_sec02 dd.three i{background-image:url('/ko/distribution/img/cloud02_icon03.png')}
	.cloud02_sec02 dd.four i{background-image:url('/ko/distribution/img/cloud02_icon04.png')}
	.cloud02_sec02 dd.five i{background-image:url('/ko/distribution/img/cloud02_icon05.png')}
.cloud02_sec02 dd h5.sub_stitle{padding-bottom:5px;}

.cloud02_sec03{position:relative; text-align:center;}
.cloud02_sec03 .dia_area01{border:1px solid #ddd; padding:70px 0; margin:70px 0;}
.cloud02_sec03 .dia_area01 img{display:block; margin:0 auto}
.cloud02_sec03 .dia_area01 p{display:inline-block; width:360px; padding-top:20px;}

.cloud02_sec03 .dia_area02{position:relative; border:1px solid #ddd; background:#fff; padding:70px 0; margin-top:50px;}
.cloud02_sec03 .dia_area02 img{display:block; margin:0 auto; padding-left:200px}
.cloud02_sec03 .dia_area02 p{position:absolute; color:#6b1ca9; font-size:1.3rem; left:20%;}
.cloud02_sec03 .dia_area02 p:after{position:absolute; height:1px; bottom:15px; display:block; content:""; overflow:hidden; border-bottom:2px dashed #bdbcbe}
	.cloud02_sec03 .dia_area02 p.one{top:21.5%;}
	.cloud02_sec03 .dia_area02 p.two{bottom:31%;}
	.cloud02_sec03 .dia_area02 p.one:after{left:108%; width:300px;}
	.cloud02_sec03 .dia_area02 p.two:after{left:108%; width:60px;}


/*** 비디오 유통관리 시스템 ***/
.cloud03_sec01 .tit_area{text-align:center;}
.cloud03_sec01 .tit_area img{margin-top:70px;}
.cloud03_sec01 .card_area{}
.cloud03_sec01 .card_area dl{display:table; width:100%;}
.cloud03_sec01 .card_area dd{display:table-cell; width:50%; border-bottom:1px solid #ddd; padding:65px 0 65px 165px; background-position:20px 70px; background-repeat:no-repeat;}
.cloud03_sec01 .card_area dd:nth-child(2){border-left:1px solid #ddd;}
	.cloud03_sec01 .card_area dd.one{background-image:url('/ko/distribution/img/cloud03_icon01.png')}
	.cloud03_sec01 .card_area dd.two{background-image:url('/ko/distribution/img/cloud03_icon02.png')}
	.cloud03_sec01 .card_area dd.three{background-image:url('/ko/distribution/img/cloud03_icon03.png')}
	.cloud03_sec01 .card_area dd.four{background-image:url('/ko/distribution/img/cloud03_icon04.png')}
	.cloud03_sec01 .card_area dd.five{background-image:url('/ko/distribution/img/cloud03_icon05.png')}
	.cloud03_sec01 .card_area dd.six{background-image:url('/ko/distribution/img/cloud03_icon06.png')}
.cloud03_sec01 .card_area dd h5.sub_stitle{padding-bottom:10px;}
	
.cloud03_sec02{text-align:center;}


/***  분석과 리포팅 ***/
.cloud05_sec01{text-align:center;}
.cloud05_img{padding:70px 0}



/*******************************************************************************
	@media 1024px~1320px
*******************************************************************************/
@media all and (max-width:1320px){

/*** 미디어 워크플로우 ***/
.cloud01_sec01 .basic_area dl{padding:40px 3%;}
.cloud01_sec01 .basic_area dd{width:100px;}
.cloud01_sec01 .basic_area dd i{height:20px; background-size:auto 100%}
.cloud01_sec01 .basic_area dt{width:200px;}

.cloud01_sec01 .complex_area dl{padding:40px 3%;}
.cloud01_sec01 .complex_area dd{margin-left:-60px}
.cloud01_sec01 .complex_area dd i img{margin:4px 0}
.cloud01_sec01 .complex_area dt{width:300px; height:300px;}
.cloud01_sec01 .complex_area dt i img{margin:4px 0}
.cloud01_sec01 .complex_area dt p.stitle{padding:22% 0 5px 0;}
.cloud01_sec01 .complex_area dt p.stxt.ab{bottom:10%;}
	.cloud01_sec01 .complex_area dt.one i{left:5%;}
	.cloud01_sec01 .complex_area dt.two{margin-left:-60px}	
	.cloud01_sec01 .complex_area dt.three{margin-left:-60px}
	.cloud01_sec01 .complex_area dt.three i{right:5%;}

.cloud01_sec03 dd{padding-left:160px;}
.cloud01_sec03 dd.one, .cloud01_sec03 dd.three{padding-right:2%}
.cloud01_sec03 dd p.stitle br{display:none}
.cloud01_sec03 dd i{width:131px; height:131px;}
.cloud01_sec03 dd.one i, .cloud01_sec03 dd.four i{background-size:100% auto;}
.cloud01_sec03 dd.two i, .cloud01_sec03 dd.three i{background-size:auto 100%;}


/*** 콘텐츠 배포와 자산관리 ***/
.cloud02_sec03 .dia_area02 img{padding-left:20%}
.cloud02_sec03 .dia_area02 p{left:10%;}
.cloud02_sec03 .dia_area02 p.one:after{left:108%; width:300px;}
.cloud02_sec03 .dia_area02 p.two:after{left:108%; width:60px;}


/*** 비디오 유통관리 시스템 ***/
.cloud03_sec01 .card_area dd{padding:65px 3% 65px 145px; background-position:5px 70px;}
.cloud03_sec01 .card_area dd p.stitle br{display:none}


}

/*******************************************************************************
	@media 980~1024px
*******************************************************************************/
@media all and (max-width:1024px){
}


/*******************************************************************************
	@media 768~980px
*******************************************************************************/
@media all and (max-width:980px){


/*** 미디어 워크플로우 ***/
#cloud01 .tit_area h4.sub_title, #cloud02 .tit_area h4.sub_title, #cloud03 .tit_area h4.sub_title, #cloud05 .tit_area h4.sub_title{padding-bottom:12px;}

.cloud01_sec01 h5.sub_stitle{padding:0 15px;}
.cloud01_sec01 .basic_area{padding:40px 0 60px 0;}
.cloud01_sec01 .basic_area:after{height:60px; background-size:auto 100%;}
.cloud01_sec01 .basic_area dl{padding:30px 3%}
.cloud01_sec01 .basic_area dd{margin-top:6%; width:65px;}
.cloud01_sec01 .basic_area dd i{height:15px;}
.cloud01_sec01 .basic_area dt{width:130px; vertical-align:top; word-break: keep-all; }
.cloud01_sec01 .basic_area dt i{width:100px; height:100px; margin-bottom:10px; background-size:100%;}

.cloud01_sec01 .complex_area dl{padding:30px 3%;}
.cloud01_sec01 .complex_area dd{width:40px; margin-left:-50px;}
.cloud01_sec01 .complex_area dd i img{margin:3px 0}
.cloud01_sec01 .complex_area dt{width:230px; height:230px;}
.cloud01_sec01 .complex_area dt i{width:40px;}
.cloud01_sec01 .complex_area dt i img{margin:3px 0}
.cloud01_sec01 .complex_area dt p.stitle{padding:15% 0 5px 0;}
	.cloud01_sec01 .complex_area dt.one{background-color:rgba(239,219,255,.5)}
	.cloud01_sec01 .complex_area dt.one i{left:3%;}
	.cloud01_sec01 .complex_area dt.two{margin-left:-60px}	
	.cloud01_sec01 .complex_area dt.three{margin-left:-60px}
	.cloud01_sec01 .complex_area dt.three i{right:3%;}

.cloud01_sec02 img{margin-top:40px;}

.cloud01_sec03 dd{width:100%; padding-left:160px; margin-top:50px}
.cloud01_sec03 dd h5.sub_stitle{padding:12px 0 8px 0;}


/*** 콘텐츠 배포와 자산관리 ***/
.cloud02_sec01 .tit_area{height:280px; padding-top:85px;}

.cloud02_sec02{ margin-top:-140px}
.cloud02_sec02 .tit_area{padding:120px 0 20px 0}
.cloud02_sec02 dd{width:33%; padding-top:20px}
.cloud02_sec02 dd i{width:141px; height:141px; margin-bottom:20px;}
	.cloud02_sec02 dd.one i{background-size:100% auto;}
	.cloud02_sec02 dd.two i{background-size:auto 100%;}
	.cloud02_sec02 dd.three i{background-size:100% auto;}
	.cloud02_sec02 dd.four i{background-size:auto 100%;}
	.cloud02_sec02 dd.five i{background-size:100% auto;}
.cloud02_sec02 dd h5.sub_stitle{padding-bottom:5px;}

.cloud02_sec03 .dia_area01{padding:40px 3%; margin:40px 0; font-size:0}
.cloud02_sec03 .dia_area01 img{display:block; margin:0 auto; }
.cloud02_sec03 .dia_area01 p{display:inline-block; width:50%; padding-top:20px;}

.cloud02_sec03 .dia_area02{padding:40px 3%; margin-top:30px;}
.cloud02_sec03 .dia_area02 img{padding-left:15%; max-width:500px}
.cloud02_sec03 .dia_area02 p{font-size:1.1rem; left:3%;}
.cloud02_sec03 .dia_area02 p:after{bottom:12px;}
	.cloud02_sec03 .dia_area02 p.one{top:20%;}
	.cloud02_sec03 .dia_area02 p.two{bottom:30%;}
	.cloud02_sec03 .dia_area02 p.one:after{left:105%; width:220px;}
	.cloud02_sec03 .dia_area02 p.two:after{left:105%; width:30px;}


/*** 비디오 유통관리 시스템 ***/
.cloud03_sec01 .tit_area img{margin-top:50px;}
.cloud03_sec01 .card_area dd{padding:45px 3% 45px 115px; background-position:5px 50px; background-size:95px}
.cloud03_sec01 .card_area dd h5.sub_stitle{padding-bottom:8px;}


/*** 분석과 리포팅 ***/
.cloud05_sec01 h4.sub_title br{display:none}
.cloud05_img{padding:50px 0}

}


/*******************************************************************************
	@media 640~768px
*******************************************************************************/
@media all and (max-width:768px){
}


/*******************************************************************************
	@media ~680px
*******************************************************************************/
@media all and (max-width:680px){ 

/*** 미디어 워크플로우 ***/
#cloud01 .tit_area h4.sub_title, #cloud02 .tit_area h4.sub_title, #cloud03 .tit_area h4.sub_title, #cloud05 .tit_area h4.sub_title{padding-bottom:8px;}

.cloud01_sec01 h5.sub_stitle{padding:0 10px;}
.cloud01_sec01 .basic_area{padding:30px 0 40px 0;}
.cloud01_sec01 .basic_area:after{height:40px;}
.cloud01_sec01 .basic_area dl{ margin-top:-13px; padding:30px 2% 20px 2%;}
.cloud01_sec01 .basic_area dd{display:block; vertical-align:top; padding:25px 0; margin:0; width:100%;}
.cloud01_sec01 .basic_area dd i{display:inline-block; vertical-align:top; transform: rotate(90deg); width:28px; height:14px; background-position:right}
.cloud01_sec01 .basic_area dt{position:relative; display:block; width:100%; vertical-align:top;}
.cloud01_sec01 .basic_area dt i{width:70px; height:70px; margin-bottom:8px;}

.cloud01_sec01 .complex_area dl{margin-top:-13px; padding:30px 2% 20px 2%;}
.cloud01_sec01 .complex_area dd{width:100%; margin-left:0; left:0;  transform:translateY(0);}
	.cloud01_sec01 .complex_area dd.one{top:215px;}
	.cloud01_sec01 .complex_area dd.two{top:390px;}
.cloud01_sec01 .complex_area dd i img{margin:0 2px; width:38px;}
.cloud01_sec01 .complex_area dt{display:block; margin:0 auto; width:220px; height:220px;}
.cloud01_sec01 .complex_area dt i{display:block; width:100%; text-align:center; top:5%; transform:translateY(0);}
.cloud01_sec01 .complex_area dt i img{margin:0; width:38px;}
.cloud01_sec01 .complex_area dt p.stitle{padding:23% 0 4px 0;}
.cloud01_sec01 .complex_area dt p.stxt{line-height:170%}
.cloud01_sec01 .complex_area dt p.stxt.ab{bottom:20%;}
.cloud01_sec01 .complex_area dt.three p.stxt.ab{bottom:28%;}
	.cloud01_sec01 .complex_area dt.one i{left:0;}
	.cloud01_sec01 .complex_area dt.two{margin:-40px auto 0 auto}	
	.cloud01_sec01 .complex_area dt.three{margin:-40px auto 0 auto}
	.cloud01_sec01 .complex_area dt.three i{right:0; top:auto; bottom:5%;}

.cloud01_sec02{text-align:center;}
.cloud01_sec02 img{margin-top:30px;}

.cloud01_sec03 h4.sub_title br{display:none}
.cloud01_sec03 dd{padding-left:115px; margin-top:30px}
.cloud01_sec03 dd i{width:95px; height:95px;}
.cloud01_sec03 dd h5.sub_stitle{padding:8px 0 5px 0;}


/*** 콘텐츠 배포와 자산관리 ***/
.cloud02_sec01 .tit_area{height:auto; padding:50px 3% 50px 3%;}
.cloud02_sec01 .tit_area p.stitle br{display:none}

.cloud02_sec02{margin-top:-140px}
.cloud02_sec02 .tit_area{padding:120px 0 20px 0}
.cloud02_sec02 dd{position:relative; width:100%; min-height:100px; padding:2% 0 20px 120px; text-align:left;}
.cloud02_sec02 dd i{position:absolute; left:0; top:0; display:inline-block; width:100px; height:100px; margin:0;}
.cloud02_sec02 dd h5.sub_stitle{font-size:1.3rem; padding-bottom:3px;}

.cloud02_sec03 .tit_area h4.sub_title br{display:none}
.cloud02_sec03 .tit_area p.stitle br{display:none}
.cloud02_sec03 .dia_area01{padding:25px 3%; margin:20px 0; font-size:0}
.cloud02_sec03 .dia_area01 p{padding-top:10px; vertical-align:top;}

.cloud02_sec03 .dia_area02{padding:25px 3%; margin-top:15px;}
.cloud02_sec03 .dia_area02 img{padding-left:0; max-width:280px}
.cloud02_sec03 .dia_area02 p{font-size:1rem; left:3%;}
.cloud02_sec03 .dia_area02 p:after{display:none}
	.cloud02_sec03 .dia_area02 p.one{top:19%;}
	.cloud02_sec03 .dia_area02 p.two{bottom:40%;}

/*** 비디오 유통관리 시스템 ***/
.cloud03_sec01 .tit_area img{margin-top:30px;}
.cloud03_sec01 .card_area dd{padding:35px 3% 30px 0; background-position:right 20px; background-size:70px}
.cloud03_sec01 .card_area dd:nth-child(2n){padding:35px 0 30px 3%;}
.cloud03_sec01 .card_area dd h5.sub_stitle{padding:0 60px 8px 0;}



/*** 분석과 리포팅 ***/
.cloud05_img.two img{max-width:80%}
.cloud05_img{padding:35px 0}

}


/*******************************************************************************
	@media ~480px
*******************************************************************************/
@media all and (max-width:420px){

/*** 비디오 유통관리 시스템 ***/
.cloud03_sec01 .card_area dl{display:block;}
.cloud03_sec01 .card_area dd{display:block; width:100%; padding:25px 0 25px 0;}
.cloud03_sec01 .card_area dd:nth-child(2n){padding:25px 0 25px 0; border-left:0}
.cloud03_sec01 .card_area dd h5.sub_stitle{padding:0 60px 8px 0;}

}