﻿@charset "UTF-8";

/* 네트워크관리사 20211230 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
.network_20211230 .topImg { width:100%; height:955px; overflow:hidden; background:#000 url(images/topBg.jpg) no-repeat center top; }
.network_20211230 * { font-family: 'Noto Sans KR', sans-serif; color:#111; }
.network_20211230 .content { position:relative; width:1200px; margin:0 auto; text-align:center; padding-bottom:130px; }
.network_20211230 .topTxt li:nth-child(1) { margin-top:130px; animation:fadeIn .8s .3s ease-out both; }
.network_20211230 .topTxt li:nth-child(2) { margin-top:64px; opacity:0; animation:aniRight .5s .7s ease both; }
.network_20211230 .topTxt li:nth-child(3),.network_20211230 .topTxt li:nth-child(4) { position:absolute; }
.network_20211230 .topTxt li:nth-child(3) { left:12px; top:230px; animation:aniRight .5s 1s ease both; }
.network_20211230 .topTxt li:nth-child(4) { right:17px; top:235px; animation:scale .3s 1.4s ease both; }
.network_20211230 .topTxt li:nth-child(5) { margin-top:208px; animation:fadeIn_up .4s 1.6s ease-out both; }
.network_20211230 .subTxt { position:absolute; left:134px; top:530px; animation:fadeIn .5s 1.9s ease-out both; }
.network_20211230 .subTxt li { float:left; display:block; width:162px; height:162px; border:1px solid #fff; border-radius:81px; margin-left:20px; text-indent:-9999px; overflow:hidden; box-sizing:border-box; transition:all .2s;}
.network_20211230 .subTxt li:nth-child(1) { background:url(images/top_subTxt_01.png) no-repeat center; }
.network_20211230 .subTxt li:nth-child(2) { background:url(images/top_subTxt_02.png) no-repeat center; }
.network_20211230 .subTxt li:nth-child(2):hover { background:url(images/top_subTxt_02_2.png) no-repeat center; border:1px solid #fffc00; }
.network_20211230 .subTxt li:nth-child(3) { background:url(images/top_subTxt_03.png) no-repeat center; }
.network_20211230 .subTxt li:nth-child(4) { background:url(images/top_subTxt_04.png) no-repeat center; }
.network_20211230 .subTxt li:nth-child(5) { background:url(images/top_subTxt_05.png) no-repeat  center; }
.network_20211230 .subTxt li:nth-child(2) a { display:block; width:162px; height:162px; }
.network_20211230 .aside_right { position:absolute; right:0; top:900px; width:155px; background:#fff; border-radius:10px 0 0 10px; overflow:hidden;}
.network_20211230 .aside_right h2 { background:#fffc00; height:45px; line-height:45px; text-align:center; padding:0; }
.network_20211230 .aside_right li { border-bottom:1px dashed #ccc; }
.network_20211230 .aside_right li:last-child { border-bottom:none; }
.network_20211230 .aside_right a { display:block; height:45px; line-height:45px; text-align:center; transition:all .2s; }
.network_20211230 .aside_right a:hover,.network_20211230 .aside_right li:nth-child(3) a { color:#c90909; }
.network_20211230 .aside_right a:hover{ background:#f1f1f1; }
.network_20211230 h2 { padding:70px 0 25px; }
.network_20211230 h3 { padding:130px 0 40px; }
.network_20211230 .section_01 { background:#b900c6; }
.network_20211230 .section_01 .kakao { background:#fff; padding:50px; border-radius:0 0 10px 10px; margin-bottom:30px; }
.network_20211230 .section_01 .kakao_img { border-radius:8px; height:360px; overflow:hidden; background:#b2c7d9; }
.network_20211230 .section_01 .kakao_img img { opacity:0; }
.network_20211230 .section_01 .kakao_img .scroll_up { animation:scroll_up 15s linear infinite; }
.network_20211230 .section_01 .kakao span { display:block; color:#777; font-size:14px; text-align:right; padding:20px 0 25px; }
.network_20211230 .kakao ul { margin-top:30px; }
.network_20211230 .kakao ul li { display:inline-block; width:315px; height:60px; }
.network_20211230 .kakao ul li:first-child { margin-right:8px; }
.network_20211230 .kakao ul li a { display:block; width:100%; height:100%; line-height:58px; color:#fff; font-size:18px; text-align:center; background:#222; border-radius:8px; font-weight:300; transition:all .3s; }
.network_20211230 .kakao ul li a strong { color:#fff; }
.network_20211230 .kakao ul li a:hover { background:#86037e; }
.network_20211230 .job { position:relative; }
.network_20211230 .job a { display:block; font-size:14px; color:#888; background:url(images/btn_bullet02.png) no-repeat 162px 8px; border:1px solid #ccc; border-radius:30px; padding:4px 0 6px; width:200px; transition:all .3s; }
.network_20211230 .job a:hover { background-color:#f5f5f5; border:1px solid #bbb; color:#444; }
.network_20211230 .job li { position:absolute; left:54px; top:380px; }
.network_20211230 .job li:last-child { left:362px; }
.network_20211230 .job li:last-child a { background-position:178px 8px; }
.network_20211230 .section_02 { background:#15024d url(images/prof_bg.png) no-repeat 55px 100px; }
.network_20211230 .section_02 .content { height:1873px; }
.network_20211230 .section_02 .prof_img { display:none; }
.network_20211230 .section_02 iframe { position:absolute; left:0; }
.network_20211230 .section_02 h3:after { content:""; position:absolute; right:0; bottom:121px; display:block; width:372px; height:461px; background:url(images/prof_profile.png) no-repeat; }
.network_20211230 .marginB30 { margin-bottom:30px; }
.network_20211230 .section_03 { display:none; background:linear-gradient(90deg, rgba(201,0,211,1) 50%, rgba(151,0,160,1) 50%); text-align:center; }
.network_20211230 .section_04 { background:#00031c; }
.network_20211230 .section_04 ul { position:absolute; bottom:180px; right:52px; }
.network_20211230 .section_04 li a { display:block; width:345px; height:85px; padding-right:20px; box-sizing:border-box; line-height:85px; background:#010a51 url(images/btn_bullet.png) no-repeat 210px center; border-radius:8px; color:#fff; font-size:21px; transition:all .2s; }
.network_20211230 .section_04 li a:hover { background:#0013a6 url(images/btn_bullet.png) no-repeat 210px center; }
.network_20211230 .section_04 span { position:absolute; right:105px; top:700px; animation:upDown 1s ease-out infinite; }

.network_20211230 .guide { background:#e4e4eb; padding:70px 0; color:#222; }
.network_20211230 .guide dl { margin-left:55px;  }
.network_20211230 .guide dt { position:relative; font-size:21px; font-weight:bold; background:url(images/icon_guide.png) no-repeat; padding:10px 0 12px 55px; }
.network_20211230 .guide dt:after { position:absolute; right:0; top:23px; content:""; display:block; background:#222; width:990px; height:1px; }
.network_20211230 .guide dd { line-height:1.6; }
.network_20211230 .guide dd:before { content:"- " }
.network_20211230 .guide .red_txt { color:#c90909; }
.network_20211230 .guide .content { padding-bottom:0; text-align:left; }

.network_20211230 .layer_credit { display:none; position:absolute; width:700px; bottom:-200px; left:50%; margin-left:-350px; text-align:left; z-index:1001;background:#fff; }
.network_20211230 .layer_credit.layer_02 { bottom:-2700px; }
.layer_credit .layer_content dl { background:#fff; color:#333; }
.layer_credit .layer_content { padding:30px; box-sizing:border-box; background:#fff; }
.layer_credit .layer_content table th { text-align:center !important; }
.layer_credit h4 { position:relative; width:700px; height:50px; font-size:20px; text-align:center; background:#f9ba48; color:#222; line-height:50px; box-sizing:border-box;}
.layer_credit h4 a { position:absolute; right:-35px; top:13px; }
.layer_credit h4 strong { color:#ffd800; }
.layer_credit p { padding-top:10px; text-align:right; }
.layer_credit p a { color:#c90909; text-decoration:underline; }


@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes scale {
	0% {
		opacity:0;
		transform:scale(1.6);
	}
	100% {
		opacity:1;
		transform:scale(1);
	}
}

@keyframes upDown {
	0% {
		transform: translateY(0%);
	}
	50%{
		transform: translateY(-12%);
	}
	100% {
        transform: translateY(0%);
	}
}
@keyframes fadeIn_up {
	0% {
		opacity:0;
		transform: translateY(60%);
	}
	100% {
		opacity:1;
		transform: translateY(0);
	}
}
@keyframes aniLeft {
	0% {
		opacity:0;
		transform: translateX(20%);
	}
	100% {
		opacity:1;
		transform: translateX(0%);
	}
}
@keyframes aniRight {
	0% {
		opacity:0;
		transform: translateX(-20%);
	}
	100% {
		opacity:1;
		transform: translateX(0%);
	}
}

@keyframes scroll_up {
	0% {
		opacity:0;
		transform: translateY(25%);
	}
	5% {
		opacity:1;
		transform: translateY(20%);
	}
	100% {
		opacity:1;
		transform: translateY(-100%);
	}
}