@charset "UTF-8";

/* 메인 스크롤 네비게이션 */
.mainScroll { position:fixed; top:50%; right:50px; z-index:999; }
.mainScroll li { cursor:pointer; }
.mainScroll li { display:block; position:relative; margin-bottom:13px; width:13px; height:13px; border-radius:50%; background:red; }
.mainScroll li span { position:absolute; right:-500px; transition:all 0.3s; }
.mainScroll li:hover { background:transparent; }
.mainScroll li:hover span { right:0; transition:all 0.3s; }

/* visualArea */
.visualArea { position:relative; width:100%; max-width:1920px; margin:0 auto; }
.visualArea:before { content:""; display:block; padding-top:42.039%; }
.visualArea .visualImg { position:absolute; left:0; top:0; right:0; bottom:0; text-align:center; overflow:hidden; }
.visualArea .visualImg img { width:100%; height:100%; }
/* visual Text */
.visualArea .visualTxt { position:absolute; top:50%; left:20%; margin-top:-88px; color:#fff; font-size:2.2rem; }
.visualArea .visualTxt p { font-size:4rem; font-weight:bold; color:#f6f6f6; }
.visualArea .visualTxt p.small_txt { margin-bottom:10px; font-size:2.5rem; font-weight:normal  }
.visualArea .visualTxt p.afo:last-child { position:relative; margin-top:10px; padding-left:70px;  }
.visualArea .visualTxt p.afo:last-child:before { content:""; position:absolute; top:10px; left:0; width:50px; height:2px; background:#f6f6f6;}
.visualArea .visualTxt p.afo span { display:inline-block; margin-top:-15px; font-size:2.5rem; font-weight:normal; letter-spacing:-7px; vertical-align:middle; }
.visualArea .visualTxt p.afo span:nth-of-type(3),
.visualArea .visualTxt p.afo span:nth-of-type(6) { margin-right:10px; }
.visualArea .visualTxt #cursor { display:inline-block; margin-left:5px; height:40px;/* 폰트 크기와 동일하게 설정 */ border-left:2px solid #fff;/* 커서 스타일 */  vertical-align:top; animation:blink 1.5s infinite; }

/* 메인 all for one 애니메이션 */
.visualArea .visualTxt p.afo span:nth-of-type(1) { animation:3s ease 0s infinite normal none running txtShadow;  }
.visualArea .visualTxt p.afo span:nth-of-type(2) { animation:3s ease 0.1s infinite normal none running txtShadow; }
.visualArea .visualTxt p.afo span:nth-of-type(3) { animation:3s ease 0.2s infinite normal none running txtShadow; }
.visualArea .visualTxt p.afo span:nth-of-type(4) { animation:3s ease 0.3s infinite normal none running txtShadow; }
.visualArea .visualTxt p.afo span:nth-of-type(5) { animation:3s ease 0.5s infinite normal none running txtShadow; }
.visualArea .visualTxt p.afo span:nth-of-type(6) { animation:3s ease 0.6s infinite normal none running txtShadow; }
.visualArea .visualTxt p.afo span:nth-of-type(7) { animation:3s ease 0.7s infinite normal none running txtShadow; }
.visualArea .visualTxt p.afo span:nth-of-type(8) { animation:3s ease 0.8s infinite normal none running txtShadow; }
.visualArea .visualTxt p.afo span:nth-of-type(9) { animation:3s ease 0.9s infinite normal none running txtShadow; }

/* 커서 효과 */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* 텍스트 빛나는 효과 */
@keyframes txtShadow {
    0% { top: 0px; text-shadow: rgba(255,255,255,0.94) 0rem 0rem 0rem; }
    20% { top: 0px; text-shadow: rgba(255,255,255,0.94) 0rem 0rem 2rem; }
    40% { top: 0px; text-shadow: rgba(255,255,255,0.94) 0rem 0rem 0rem; }
    60% { top: 0px; }
    80% { top: 0px; }
    100% { top: 0px; }
}

/* scrollDown */
.scrollDown { position:absolute; bottom:3%; left:50%; margin-left:-17.5px; cursor:pointer; z-index:1; }
.scrollDown .mouseWrap { position:relative; width:35px; height:55px; border:1px solid #fff; border-radius:45px; }
.scrollDown .mouseWrap:before { content:""; display:block; position:absolute; bottom:7px; left:50%; margin-left:-5px; width:10px; height:10px; background:transparent; border:1px solid #000; border-top:1px solid #fff; border-right:1px solid #fff; border-bottom:0px solid transparent; border-left:0px solid transparent; transform:rotate(135deg); }
.scrollDown .mouseWrap:after { content:""; display:block; position:absolute; bottom:11px; left:50%; margin-left:-4px; width:8px; height:8px; background:transparent; border:1px solid #000; border-top:1px solid #fff; border-right:1px solid #fff; border-bottom:0px solid transparent; border-left:0px solid transparent; transform:rotate(135deg); }
.scrollDown .mouseBall{ position:absolute; top:3px; left:50%;  margin-left:-2.5px; width:4px; height:8px; border-radius:10px; background:#fff;
animation:iconScroll 1s ease-in Infinite Alternate; }
@keyframes iconScroll {
	0% { top:7px; opacity:1; }
	95% { width:5px; opacity:0; }
	to { top:25px; width:4px; height:8px }
}

/* 더보기 버튼 */
section .viewMore { margin:0 auto; padding:50px 0; width:100%; max-width:1200px; }
section .viewMore button { display:inline-block; position:relative; width:147px; height:40px; font-size:1.5rem; background:#fff; border:1px solid #222; transition:0.3s; outline:0; overflow:hidden; }
section .viewMore button span { position:relative; }
section .viewMore button:before { content:""; display:inline-block; position:absolute; bottom:0; left:0; right:0; margin:0 auto; width:100%; height:100%; background:#222; transform:scale(0,1); transition:all 0.3s ease;}
section .viewMore button:hover { color:#fff; border:1px solid #222; }
section .viewMore button:hover:before { transform:scale(1,1); }
section .viewMore button:hover:span { color:#fff; }
/* 더보기 버튼2 */
section .viewMore2 { margin:0 auto; padding:50px 0; width:100%; max-width:1200px; }
section .viewMore2 button { display:inline-block; position:relative; width:147px; height:40px; font-size:1.5rem; background:#fff; border:1px solid #222; overflow:hidden; }
section .viewMore2 button:after { content:""; position:absolute; top:-1px; left:-99%; width:147px; height:40px; line-height:41px; background:#222 url("../afo_images/icon_more_white.png") no-repeat center center; background-size:75px; transition:0.3s all; outline:0; overflow:hidden; }
section .viewMore2 button:hover:after { left:-1px; width:147px; }
section .viewMore2 button:focus:after { left:-1px; width:147px; }


/* sec01_Business */
/* .sec01 { } */
.section .container ul { overflow:hidden; }
.sec01 .mainTxt p { margin:0 auto; max-width:615px; }
.sec01 .container ul li { display:block; float:left; margin-right:2%; padding:0 20px; width:32%; height:400px; text-align:center; background:#fff; border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; }
/* .sec01 .container ul li:hover {  } */
.sec01 .container ul li:last-child { margin-right:0; }
.sec01 .container ul li h2 { margin-top:20px; padding-bottom:40px; font-size:2.5rem; color:#3b4652; }
.sec01 .container ul li img { width:155px; }
.sec01 .container ul li:last-child img { width:141px; }
.sec01 .container ul li h3 { padding-top:40px; font-size:2.2rem; color:#1a4a98; }
.sec01 .container ul li p { font-size:1.5rem; line-height:1.5; }
.sec01 .container .businessMore { text-align:center; }


/* sec02_Portfolio */ /* 418*280 */ /* 360*239 */
/* .sec02  { } */ /* background:#f0f1f4; */
.sec02 .container { overflow:hidden; }
.sec02 .container .portfolio { overflow:hidden; }
.sec02 .container .portfolio .potfolList { float:left; margin:4% 2% 0 0; width:32%;  }
.sec02 .container .portfolio .potfolList:nth-of-type(3n) { margin-right:0; }
.portfolio .potfolList { float:left; }
.portfolio .potfolList .thumbnail { display:block; position:relative; width:100%; max-width:384px; height:100%; max-height:239px; border:1px solid #ccc; overflow:hidden; }
.portfolio .potfolList .thumbnail:hover img { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); transition:0.3s; }
.portfolio .potfolList .thumbnail img { display:block; width:100%;  height:auto; transition:0.3s; }
.portfolio .potfolList .thumbnail .thumbHov { position:absolute; top:0; left:0; bottom:0; right:0; margin:0; background:rgba(26, 74, 152, 0.8); opacity:0; filter:alpha(opacity=0); -webkit-transition:all 0.3s; transition:all 0.3s; cursor:default; overflow:hidden; }
.portfolio .potfolList:hover .thumbnail .thumbHov,
.portfolio .potfolList:hover .thumbnail .thumbHov .thumbTxt { opacity:1; filter:alpha(opacity=100); }
.portfolio .potfolList:hover .thumbnail .thumbHov .thumbTxt { top:50%; }
.portfolio .potfolList .thumbnail .thumbHov .thumbTxt { position:absolute; top:0%; left:0; width:100%; opacity:0; filter:alpha(opacity=0); -webkit-transform:translateY(-55%); -ms-transform:translateY(-55%); transform:translateY(-55%); -webkit-transition:all 0.3s 0.2s; transition:all 0.3s 0.2s; }
.portfolio .potfolList .thumbnail .thumbHov .thumbTxt,
.portfolio .potfolList .thumbnail .thumbHov .thumbTxt h4,
.portfolio .potfolList .thumbnail .thumbHov .thumbTxt h4 a { text-align:center; color:#fff; }
.portfolio .potfolList .thumbnail .thumbHov .thumbTxt h4 { margin-bottom:15px; font-size:1.8rem; /* text-transform:uppercase; */ font-weight:800; letter-spacing:1px; }
.portfolio .potfolList .thumbnail .thumbHov .thumbTxt p { font-size:1.6rem; margin-bottom:0; font-weight:normal; color:#fff; line-height:20px; }
.portfolio .potfolList .thumbnail .thumbHov .thumbTxt a { color:#fff; }
.portfolio .potfolList .serviceName { margin-top:15px; font-size:2rem; font-weight:bold; color:#3b4652; }


/* sec03_Incruit */
.sec03 .container .contInner { padding:50px 10px; }
.sec03 .container ul { overflow:hidden; }
.sec03 .container ul li { display:block; float:left; margin-right:1.333%; width:24%; text-align:center; background:#fff; border-right:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; }
.sec03 .container ul li:last-child { margin-right:0; }
.sec03 .container ul li .contInner { padding:50px 10px; }
.sec03 .container ul li .contInner > img { width:143px; }
.sec03 .container ul li .contInner > h3 { position:relative; margin-top:20px; padding-top:20px; }
.sec03 .container ul li .contInner > h3:after { content:""; display:inline-block; position:absolute; top:0; left:50%; margin-left:-12px; width:24px; height:2px; background:#999; }
.sec03 .container ul li .contInner > h3 p:first-child { font-size:2rem; color:#1a4a98; }
.sec03 .container ul li .contInner > h3 p:last-child { font-weight:bold; }


/* sec04_contact */
.sec04 .container .mapWrap { overflow:hidden;  }
.sec04 .container .mapWrap .mainMap { float:left; width:75%; }
.sec04 .container .mapWrap .mainMap .afomap img { width:100%; max-width:750px; }
.sec04 .container .mapWrap .mainContact { float:left; position:relative; top:200px; width:25%; line-height:1.5; }
.sec04 .container .mapWrap .mainContact h3 { font-size:3rem; }
.sec04 .mapList { margin:70px auto 30px auto; width:100%; max-width:1200px; }
.sec04 .mapList ul { overflow:hidden; text-align:center; }
.sec04 .mapList ul li { display:inline-block; margin-right:15px; width:90px; }
.sec04 .mapList ul li:last-child { margin-right:0; }
.sec04 .mapList ul li a { display:inline-block; width:90px; height:83px; color:#aea8ba; font-size:1.5rem; background:#fff; border:1px solid #000; border-radius:7px; }
.sec04 .mapList ul li a span { display:inline-block; padding-top:50px; width:70px; height:83px; color:#222; }
.sec04 .mapList ul li  a:hover{ background:rgba(221, 221, 221, 0.5); border-color:rgba(221, 221, 221, 1); }
.sec04 .mapList ul .mapType01 a span { width:70px; background:url("../afo_images/naver.png") no-repeat center 25px; background-size:70px; }
.sec04 .mapList ul .mapType02 a span { width:70px; background:url("../afo_images/kakaomap.png") no-repeat center 20px; background-size:69px; }
.sec04 .mapList ul .mapType03 a span { width:70px; background:url("../afo_images/google.png") no-repeat center 20px; background-size:65px; }



/* four items section */
.fourItems { background-color:#fff; }
.fourItems .container { width:100%; max-width:1200px; margin:0 auto; overflow:hidden; }
.fourItems .container .sectionTitle { position:absolute; left:-9999px; font-size:0; }
.fourItems .container .item { display:block; float:left; width:25%; padding:80px 26px; text-align:center; color:#222; outline:none; }
.fourItems .container .item i { font-size:5.6rem; color:#ccc; transition:all 0.5s; }
.fourItems .container .item h2 { font-size:2.6rem; font-weight:300; color:#152732; transition:all 0.5s; }
.fourItems .container .item p { margin-top:10px; line-height:150%; font-size:1.8rem; color:#555; text-align:justify; transition:all 0.5s; }
.fourItems .container .item img { width:100%; height:auto; margin-top:20px; }
.fourItems .container .item:hover i,
.fourItems .container .item:focus i,
.fourItems .container .item:hover h2,
.fourItems .container .item:focus h2,
.fourItems .container .item:hover p,
.fourItems .container .item:focus p { color:#3d61ad; }


/* one item section */
.oneItem { background-color:#eee; }
.oneItem .container { width:100%; max-width:1200px; margin:0 auto; padding:80px 150px; text-align:center; overflow:hidden; background:url("../img/bg_keyboard.png") no-repeat; background-position:-20px -175px; }
.oneItem .container .sectionTitle { margin:0; font-size:2.6rem; font-weight:300; }
.oneItem .container .qMark { position:relative; display:inline-block; padding:0 50px; overflow:visible; }
.oneItem .container .qMark:before { content:"\275D"; position:absolute; left:-15px; top:-40px; font-size:8rem; color:#ccc; }
.oneItem .container .qMark:after { content:"\275E"; position:absolute; right:-15px; bottom:-60px; font-size:8rem; color:#ccc; }
.oneItem .container p { margin-top:40px; font-size:1.6rem; line-height:160%; color:#333; }


/* slide Items */
.slideItems { background-color:#e5e5e5; }
.slideItems .container { position:relative; width:100%; max-width:1200px; height:250px; margin:0 auto; text-align:center; overflow:hidden; }
.slideItems .container .sectionTitle { position:absolute; left:-9999px; font-size:0; }
.slideItems .container ul { position:absolute; left:0; top:0; right:0; bottom:30px; overflow:hidden; }
.slideItems .container ul li { position:absolute; top:0; width:100%; height:100%; padding:60px 50px; list-style:none; text-align:center; }
.slideItems .container ul li a { color:#222; }
.slideItems .container ul li h2 { font-size:2.4rem; font-weight:300; color:#152732; }
.slideItems .container ul li p { margin-top:20px; font-size:1.6rem; line-height:150%; }
.slideItems .container .controlDot { position:absolute; z-index:10; left:0; bottom:30px; width:100%; height:14px; text-align:center; }
.slideItems .container .controlDot .dot { display:inline-block; width:14px; height:14px; margin:0 5px; border-radius:50%; background-color:#aaa; cursor:pointer; }
.slideItems .container .controlDot .dot.current { background-color:#3d61ad; }


/* Media Query */
@media all and (max-width:1200px) {

	/* one item section */
	.oneItem .container { padding:80px 10%; background-position:-40px -175px; }

}


@media all and (max-width:800px) {

	/* four items section */
	.fourItems .container .item { width:50%; padding:30px; }

	/* one item section */
	.oneItem .container { padding:80px 6%; background-position:-80px -200px; }

	/* slide Items */
	.slideItems .container { height:300px; }

}


@media all and (max-width:700px) {

	/* one item section */
	.oneItem .container .qMark { display:block; width:90%; margin:0 auto; padding:0 30px; }

}


@media all and (max-width:540px) {

	/* four items section */
	.fourItems .container .item { width:100%; padding:30px; }

	/* one item section */
	.oneItem .container p { text-align:justify; }

	/* slide Items */
	.slideItems .container { height:350px; }

}