@charset "UTF-8";
#contents {
		position: relative;
		overflow: hidden;
}

#contents .contents {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		background: #fff;
		opacity: 0;
}

#contents .contents.show {
		z-index: 999;
		opacity: 1;
}

#contents .sub-tit.title {
		margin-bottom: 0;
}

#blog .sub-tit {
		margin-bottom: 120px;
}

#blog .sub-tit.title article {
		padding-top: 30px;
}

#blog .sub-tit.title .tb-cell.rs p {
		font-weight: 500;
		margin-bottom: 20px;
}

#blog .sub-tit.title .tb-cell.rs p em {
		display: block;
		font-style: normal;
		margin-top: 25px;
		font-size: 20px;
		line-height: 1em;
		font-weight: normal;
}

#blog .sub-tit.title .tb-cell.rs p strong {
		display: block;
		margin-bottom: 0.5em;
		color: #4166d8;
}

#blog .sub-tit.title .tb-cell.rs p.vid strong {
		margin-top: 40px;
}

#blog .case {
		background: #5f80c2;
		-webkit-box-shadow: inset 5px 14px 30px -8px rgba(49, 65, 99, 0.5), inset 5px -20px 25px -8px rgba(49, 65, 99, 0.5);
		box-shadow: inset 5px 14px 30px -8px rgba(49, 65, 99, 0.5), inset 5px -20px 25px -8px rgba(49, 65, 99, 0.5);
		padding: 50px 0 30px;
}

#blog .case h5 {
		font-size: 24px;
		color: #fff;
		font-weight: 500;
		position: absolute;
		top: 50px;
		opacity: 0;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .case .wrap {
		position: relative;
		width: 1226px;
		clear: both;
		margin: auto;
}

#blog .case .wrap::after {
		content: '';
		display: block;
		clear: both;
}

#blog .case .wrap .img {
		position: relative;
		opacity: 0;
		-webkit-transition: all 1s ease 0.3s;
		-ms-transition: all 1s ease 0.3s;
		transition: all 1s ease 0.3s;
}

#blog .case .wrap .img span {
		position: absolute;
		color: #fff;
		font-size: 16px;
		width: 240px;
		opacity: 0;
		-webkit-transition: all 1s ease 0.7s;
		-ms-transition: all 1s ease 0.7s;
		transition: all 1s ease 0.7s;
}

#blog .case .wrap .img span::before {
		content: url(/marketing/viral/img/sns/case-bar.png);
		position: relative;
		top: -2px;
}

#blog .case .wrap .img:nth-of-type(1) {
		float: left;
		left: -50px;
}

#blog .case .wrap .img:nth-of-type(2) {
		float: right;
		right: -50px;
}

#blog .case.run h5 {
		top: 0;
		opacity: 1;
}

#blog .case.run .wrap .img:nth-of-type(1) {
		left: 0;
		opacity: 1;
}

#blog .case.run .wrap .img:nth-of-type(2) {
		right: 0;
		opacity: 1;
}

#blog .case.run .wrap .img span {
		opacity: 1;
		margin: 0;
}

#blog .reason {
		border-bottom: 1px solid #dbdbdb;
}

#blog .reason .sub-tit .tb {
		border-bottom: 0;
}

#blog .reason .img {
		width: 959px;
		height: 369px;
		position: relative;
		margin: 40px auto 0;
		overflow: hidden;
}

#blog .reason .img::before {
		content: '';
		background: url(/marketing/search/img/reason-bg.png);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .reason .img::after {
		content: '';
		background: white;
		background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 50%);
		background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 50%);
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 50%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
		position: absolute;
		top: 0;
		right: -20%;
		width: 200%;
		height: 100%;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .reason .img li {
		position: absolute;
		width: 332px;
		height: 332px;
		border-radius: 100%;
		text-align: center;
		top: 16px;
		border: 5px solid #e5e7e8;
		opacity: 0;
		margin-left: -30px;
		z-index: 989;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .reason .img li:nth-child(1) {
		left: 21px;
		background: #699ddd;
}

#blog .reason .img li:nth-child(2) {
		left: 312px;
		background: #538cd2;
		transition-delay: 0.1s;
}

#blog .reason .img li:nth-child(3) {
		left: 609px;
		background: #4684d0;
		transition-delay: 0.2s;
}

#blog .reason .img li img {
		margin-top: 80px;
}

#blog .reason .img.run::after {
		width: 0;
}

#blog .reason .img.run li {
		opacity: 1;
		margin-left: 0;
}

#blog .chart {
		padding-top: 30px;
}

#blog .chart .mint .st0 {
		enable-background: new;
}

#blog .chart .mint .st1 {
		fill: #46d1b9;
}

#blog .chart .mint .st2 {
		fill: #50d8c5;
}

#blog .chart .mint .st3 {
		fill: #6bddca;
}

#blog .chart .mint dt {
		color: #46d1b9 !important;
}

#blog .chart .mint dd {
		background: url(/marketing/viral/img/blog/tooltip-mint.png) center no-repeat;
}

#blog .chart .blue .st0 {
		enable-background: new;
}

#blog .chart .blue .st1 {
		fill: #4166d8;
}

#blog .chart .blue .st2 {
		fill: #527add;
}

#blog .chart .blue .st3 {
		fill: #618de5;
}

#blog .chart .blue dt {
		color: #4166d8 !important;
}

#blog .chart .blue dd {
		background: url(/marketing/viral/img/blog/tooltip-blue.png) center no-repeat;
}

#blog .chart .sub-tit {
		margin-bottom: 0;
}

#blog .chart .tb {
		padding-bottom: 60px;
}

#blog .chart .tb h5 {
		font-size: 34px;
}

#blog .chart .tb h5 span {
		color: #4166d8;
}

#blog .chart .graph {
		width: 1080px;
		height: 509px;
		margin: auto;
		position: relative;
		background: url(/marketing/viral/img/blog/chart-bg.jpg);
}

#blog .chart .graph .bar {
		position: absolute;
		bottom: 33px;
		width: 92px;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .chart .graph .bar div {
		position: absolute;
		overflow: hidden;
		width: 100%;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .chart .graph .bar div svg {
		width: 100%;
		height: 612px;
		position: absolute;
		left: 0;
}

#blog .chart .graph .bar div.upper {
		top: 0;
		z-index: 99;
}

#blog .chart .graph .bar div.under {
		height: 36px;
		bottom: 0;
}

#blog .chart .graph .bar div.under svg {
		bottom: 0;
}

#blog .chart .graph .bar.in {
		height: 100px;
		left: 210px;
}

#blog .chart .graph .bar.in dt {
		border-color: #4166d8;
		color: #4166d8;
}

#blog .chart .graph .bar.in dd {
		transition-delay: 0.4s;
}

#blog .chart .graph .bar.in dd span {
		width: 107px;
}

#blog .chart .graph .bar.in .upper {
		top: 25px;
		height: 50px;
}

#blog .chart .graph .bar.cafe {
		height: 140px;
		left: 345px;
}

#blog .chart .graph .bar.cafe dt {
		border-color: #4166d8;
		color: #4166d8;
}

#blog .chart .graph .bar.cafe dd {
		transition-delay: 0.4s;
}

#blog .chart .graph .bar.cafe dd span {
		width: 107px;
}

#blog .chart .graph .bar.cafe .upper {
		top: 65px;
		height: 50px;
}

#blog .chart .graph .bar.other {
		height: 195px;
		left: 485px;
}

#blog .chart .graph .bar.other dt {
		border-color: #4166d8;
		color: #4166d8;
}

#blog .chart .graph .bar.other dd {
		transition-delay: 0.4s;
}

#blog .chart .graph .bar.other dd span {
		width: 107px;
}

#blog .chart .graph .bar.other .upper {
		top: 120px;
		height: 50px;
}

#blog .chart .graph .bar.homepage {
		height: 235px;
		left: 630px;
}

#blog .chart .graph .bar.homepage dt {
		border-color: #4166d8;
		color: #4166d8;
}

#blog .chart .graph .bar.homepage dd {
		transition-delay: 0.4s;
}

#blog .chart .graph .bar.homepage dd span {
		width: 107px;
}

#blog .chart .graph .bar.homepage .upper {
		top: 155px;
		height: 50px;
}

#blog .chart .graph .bar.naverblog {
		height: 380px;
		left: 770px;
}

#blog .chart .graph .bar.naverblog dt {
		border-color: #4166d8;
		color: #4166d8;
}

#blog .chart .graph .bar.naverblog dd {
		transition-delay: 0.4s;
}

#blog .chart .graph .bar.naverblog dd span {
		width: 107px;
}

#blog .chart .graph .bar.naverblog .upper {
		top: 300px;
		height: 50px;
}

#blog .chart .graph .bar dl {
		position: absolute;
		top: -85px;
		left: 0;
		text-align: center;
		width: 100%;
		opacity: 0;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .chart .graph .bar dl dt {
		font-size: 21px;
		font-weight: bold;
		padding-top: 32px;
}

#blog .chart .graph .bar dl dd {
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -28px;
		width: 56px;
		height: 29px;
		line-height: 24px;
		color: #fff;
		font-size: 16px;
}

#blog .chart .graph .bar:nth-of-type(1) .upper {
		transition-delay: 0.1s;
}

#blog .chart .graph .bar:nth-of-type(1) dl {
		transition-delay: 0.5s;
}

#blog .chart .graph .bar:nth-of-type(2) .upper {
		transition-delay: 0.2s;
}

#blog .chart .graph .bar:nth-of-type(2) dl {
		transition-delay: 0.6s;
}

#blog .chart .graph .bar:nth-of-type(3) .upper {
		transition-delay: 0.3s;
}

#blog .chart .graph .bar:nth-of-type(3) dl {
		transition-delay: 0.8s;
}

#blog .chart .graph .bar:nth-of-type(4) .upper {
		transition-delay: 0.4s;
}

#blog .chart .graph .bar:nth-of-type(4) dl {
		transition-delay: 0.9s;
}

#blog .chart .graph .bar:nth-of-type(5) .upper {
		transition-delay: 0.5s;
}

#blog .chart .graph .bar:nth-of-type(5) dl {
		transition-delay: 1.2s;
}

#blog .chart .graph.run dl {
		opacity: 1;
		top: -65px;
}

#blog .chart .graph.run .bar .upper {
		top: 0;
}

#blog .chart .graph.run .in .upper {
		height: 68px;
}

#blog .chart .graph.run .cafe .upper {
		height: 110px;
}

#blog .chart .graph.run .other .upper {
		height: 160px;
}

#blog .chart .graph.run .homepage .upper {
		height: 205px;
}

#blog .chart .graph.run .naverblog .upper {
		height: 350px;
}

#blog .pros {
		padding-bottom: 40px;
		margin-bottom: 90px;
}

#blog .pros article {
		margin-bottom: 50px;
}

#blog .pros ul {
		overflow: hidden;
		margin: auto;
		position: relative;
		top: 50px;
		opacity: 0;
		-webkit-transition: all 0.5s ease 0s;
		-ms-transition: all 0.5s ease 0s;
		transition: all 0.5s ease 0s;
}

#blog .pros ul:first-child li:nth-child(1) {
		background: url(/marketing/viral/img/blog/pros/1.jpg);
}

#blog .pros ul:first-child li:nth-child(2) {
		background: url(/marketing/viral/img/blog/pros/2.jpg);
}

#blog .pros ul:first-child li:nth-child(3) {
		background: url(/marketing/viral/img/blog/pros/3.jpg);
		margin-right: 0;
}

#blog .pros ul:first-child li:nth-child(1) dl::before {
		background: url(/marketing/viral/img/blog/pros/1-over.jpg);
}

#blog .pros ul:first-child li:nth-child(2) dl::before {
		background: url(/marketing/viral/img/blog/pros/2-over.jpg);
}

#blog .pros ul:first-child li:nth-child(3) dl::before {
		background: url(/marketing/viral/img/blog/pros/3-over.jpg);
}

#blog .pros ul:first-child li:nth-child(1) dt span {
		background: url(/marketing/viral/img/blog/pros/1-over.jpg);
}

#blog .pros ul:first-child li:nth-child(2) dt span {
		background: url(/marketing/viral/img/blog/pros/2-over.jpg);
}

#blog .pros ul:first-child li:nth-child(3) dt span {
		background: url(/marketing/viral/img/blog/pros/3-over.jpg);
}

#blog .pros ul li {
		float: left;
		width: 419px;
		height: 446px;
		margin: 0 10px 10px 0;
		display: table;
		cursor: default;
}

#blog .pros ul li dl {
		display: table-cell;
		vertical-align: middle;
		color: #fff;
		text-align: center;
		position: relative;
}

#blog .pros ul li dl *, #blog .pros ul li dl::before, #blog .pros ul li dl::after {
		-webkit-transition: all 0.5s ease 0s;
		-ms-transition: all 0.5s ease 0s;
		transition: all 0.5s ease 0s;
}

#blog .pros ul li dl::before, #blog .pros ul li dl::after {
		content: '';
		position: absolute;
		width: 100%;
		left: 0;
}

#blog .pros ul li dl::before {
		top: 0;
		height: 100%;
		opacity: 0;
}

#blog .pros ul li dl::after {
		bottom: 0;
		height: 0;
		background: #4166d8;
}

#blog .pros ul li dl dt {
		font-size: 40px;
		font-weight: 900;
		margin-top: 1em;
}

#blog .pros ul li dl dt strong {
		position: relative;
		z-index: 10;
}

#blog .pros ul li dl dt span {
		position: absolute;
		width: 100%;
		height: 446px;
		top: 0;
		left: 0;
		opacity: 0;
		z-index: 0;
}

#blog .pros ul li dl dd {
		font-size: 24px;
		opacity: 0;
		position: relative;
		z-index: 9999;
}

#blog .pros ul li.run:nth-child(odd) {
		left: 0;
		opacity: 1;
}

#blog .pros ul li.run:nth-child(even) {
		right: 0;
		opacity: 1;
}

#blog .pros ul li.over dl dt span {
		opacity: 1;
}

#blog .pros ul li.over dl::after {
		height: 16px;
}

#blog .pros ul li.over dl dt {
		margin-top: 0;
}

#blog .pros ul li.over dl dd {
		opacity: 1;
}

#blog .pros .wrap.run ul {
		top: 0;
		opacity: 1;
}

#blog .proc {
		padding: 70px 0 110px;
		background: #e5e7e8;
}

#blog .proc h5 {
		font-size: 34px;
		position: relative;
		top: 50px;
		opacity: 0;
		margin-bottom: 50px;
		-webkit-transition: all 0.5s ease 0s;
		-ms-transition: all 0.5s ease 0s;
		transition: all 0.5s ease 0s;
}

#blog .proc h5.run {
		top: 0;
		opacity: 1;
}

#blog .proc .step-wrap {
		width: 1224px;
		margin: 100px auto 0;
		position: relative;
}

#blog .proc .step-wrap::before {
		position: absolute;
		left: 0;
		top: 0;
		margin-top: -45px;
		line-height: 45px;
		color: #fff;
		font-size: 23px;
		width: 190px;
		background: #4166d8;
		border-top-right-radius: 50px;
		text-align: center;
		opacity: 0;
		margin-left: 50px;
		text-indent: -10px;
		-webkit-transition: all 0.5s ease 0s;
		-ms-transition: all 0.5s ease 0s;
		transition: all 0.5s ease 0s;
}

#blog .proc .step-wrap .step {
		width: 1224px;
		margin: auto;
		background: #fff;
		overflow: hidden;
}

#blog .proc .step-wrap .step ul {
		display: table;
		table-layout: fixed;
		width: 100%;
		padding: 30px 0;
}

#blog .proc .step-wrap .step ul li {
		display: table-cell;
		vertical-align: middle;
		height: 150px;
		padding: 30px 0;
		text-align: center;
		position: relative;
		opacity: 0;
		left: -50px;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .proc .step-wrap .step ul li::after {
		content: '';
		position: absolute;
		top: 90px;
		right: 0;
		width: 10px;
		height: 18px;
		background: url(/marketing/viral/img/arr.png);
}

#blog .proc .step-wrap .step ul li:last-child::after {
		display: none;
}

#blog .proc .step-wrap .step ul li svg {
		margin-bottom: 20px;
}

#blog .proc .step-wrap .step dl {
		font-size: 23px;
		font-weight: 500;
}

#blog .proc .step-wrap .step dl dt {
		color: #4166d8;
}

#blog .proc .step-wrap .step.run li {
		opacity: 1;
		left: 0;
}

#blog .proc .step-wrap.posting ul li:nth-of-type(1) {
		transition-delay: 0.1s;
}

#blog .proc .step-wrap.posting ul li:nth-of-type(2) {
		transition-delay: 0.2s;
}

#blog .proc .step-wrap.posting ul li:nth-of-type(2) svg {
		margin: 12px 0 20px;
}

#blog .proc .step-wrap.posting ul li:nth-of-type(3) {
		transition-delay: 0.3s;
}

#blog .proc .step-wrap.posting ul li:nth-of-type(3) svg {
		margin: 10px 0 17px;
}

#blog .proc .step-wrap.posting ul li:nth-of-type(4) {
		transition-delay: 0.4s;
}

#blog .proc .step-wrap.posting ul li:nth-of-type(4) svg {
		margin: 9px 0 8px;
}

#blog .proc .step-wrap.posting ul li:nth-of-type(5) {
		transition-delay: 0.5s;
}

#blog .proc .step-wrap.posting ul li:nth-of-type(5) svg {
		margin: 20px 0 16px;
}

#blog .proc .step-wrap.review ul li:nth-of-type(1) {
		transition-delay: 0.1s;
}

#blog .proc .step-wrap.review ul li:nth-of-type(2) {
		transition-delay: 0.2s;
}

#blog .proc .step-wrap.review ul li:nth-of-type(2) svg {
		margin: 12px 0 20px;
}

#blog .proc .step-wrap.review ul li:nth-of-type(3) {
		transition-delay: 0.3s;
}

#blog .proc .step-wrap.review ul li:nth-of-type(3) svg {
		margin: 10px 0 17px;
}

#blog .proc .step-wrap.review ul li:nth-of-type(4) {
		transition-delay: 0.4s;
}

#blog .proc .step-wrap.review ul li:nth-of-type(4) svg {
		margin: 9px 0 8px;
}

#blog .proc .step-wrap.review ul li:nth-of-type(5) {
		transition-delay: 0.5s;
}

#blog .proc .step-wrap.review ul li:nth-of-type(5) svg {
		margin: 20px 0 16px;
}

#blog .proc .step-wrap.posting::before {
		content: '원고포스팅';
}

#blog .proc .step-wrap.review::before {
		content: '체험단';
}

#blog .proc .noti {
		width: 1224px;
		margin: 50px auto 0;
		border-radius: 6px;
		border: 1px solid #4166d8;
		background: #fff;
}

#blog .proc .noti table {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
}

#blog .proc .noti table th {
		width: 370px;
		border-right: 1px solid #4166d8;
		font-size: 24px;
		opacity: 0;
		padding-top: 30px;
		color: #585858;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .proc .noti table td {
		padding: 40px 50px;
		text-align: center;
}

#blog .proc .noti table td ul {
		display: inline-block;
}

#blog .proc .noti table td ul li {
		font-size: 21px;
		color: #000;
		line-height: 60px;
		display: inline-block;
		position: relative;
		left: 50px;
		opacity: 0;
		-webkit-transition: all 1s ease 0s;
		-ms-transition: all 1s ease 0s;
		transition: all 1s ease 0s;
}

#blog .proc .noti table td ul li::before {
		float: left;
		line-height: 0;
		margin-right: 10px;
}

#blog .proc .noti table td ul li:nth-child(1) {
		padding-right: 50px;
}

#blog .proc .noti table td ul li:nth-child(1)::before {
		content: url(/marketing/viral/img/sns/noti-01.png);
}

#blog .proc .noti table td ul li:nth-child(1)::after {
		content: url(/marketing/viral/img/arr.png);
		position: absolute;
		top: 0;
		right: 20px;
}

#blog .proc .noti table td ul li:nth-child(2) {
		transition-delay: 0.3s;
}

#blog .proc .noti table td ul li:nth-child(2)::before {
		content: url(/marketing/viral/img/sns/noti-02.png);
}

#blog .proc .step-wrap.run::before {
		margin-left: 0;
		opacity: 1;
}

#blog .proc .run table th {
		opacity: 1;
		padding-top: 0;
}

#blog .proc .run table td strong {
		opacity: 1;
		left: 0;
}

#blog .proc .run table td ul li {
		opacity: 1;
		left: 0;
}

h6.fb::before {
		content: url(/marketing/viral/img/sns/icon-fb.png);
		position: relative;
		top: 2px;
		margin-right: 10px;
}

.way h6::before {
		content: url(/marketing/viral/img/icon-way.png);
		position: relative;
		top: 2px;
		margin-right: 10px;
}