/* 공통css */
html {margin:0; padding:0}
body {margin:0; ; padding:0; font-size:0.75em; font-family: 'Spoqa Han Sans', 'Fira Sans', sans-serif; color:#333; overflow-x:hidden; }
div {display:block; margin:0; padding:0}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0; padding:0; border:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0; font-family: 'Spoqa Han Sans', sans-serif; font-weight:normal; font-size:16px}
textarea {margin:0; font-family: 'Spoqa Han Sans', sans-serif; font-weight:normal; font-size:16px}
button {cursor:pointer}
ul {margin:0; padding:0}
li {margin:0; padding:0; list-style:none}
p {margin:0; }
hr {clear:both; width:100%; height:0px; border:none; margin:0; }
pre {font-size:1.1em}
a, a:link {text-decoration:none}
a:hover, a:visited, a:focus, a:active {text-decoration:none}
hr.clear {clear:both; width:100%; height:0; border:0}

#wrap {position:relative; display:block; width:100%; height:auto; margin:0; padding:0; box-sizing:border-box}

/* header menu */
#header {position:fixed; z-index:30; width:100%; min-width:780px; height:auto; background:url('../img/top_bg.png'); }

#header .header_inner {width:100%; height:auto; min-height:44px; max-width:980px; margin:0 auto; }
#header .header_inner #logo {float:left; width:32px; height:auto; margin-top:8px}
#header .header_inner #logo a {color:#fff}

#header .gnb {float:right; margin:0; height:auto; display:block; font-size:15px; color:#fff}
#header .gnb li {float:left; display:inline-block; text-align:center; font-size:15px; font-weight:normal; list-style:none}
#header .gnb li img.menu {margin:0; ; border:0; vertical-align:top}
#header .gnb li a {display:inline-block; color:#fff; font-size:15px; padding:15px 30px; max-width:146px; font-family: 'Fira Sans', sans-serif; font-weight:300 !important}
#header .gnb li a:focus, ul.gnb li:hover, ul.gnb li:active {background:#161616; font-weight:normal; text-decoration:none !important}

#container {float:none; width:100%; min-width:1280px; margin:0; padding:0; *zoom:1}
#container:after {clear:both; display:block; visibility:hidden; clear:both; content:""}

/* slide */
#index_visual {display:block; width:100%; height:auto; margin:0; padding:0; background:#fff}
#index_visual .visual_inner {position:relative; display:block; width:100%; height:auto; margin:0 auto; padding:0}
#index_visual .visual_inner ul#visual {width:100%; min-height:320px; margin:0 auto; text-align:center; padding:0; overflow:hidden}
#index_visual .visual_inner ul#visual li {width:1280px; margin:0 auto; }

#container section {clear:both; display:block; width:100%; padding:96px 10px; height:auto; min-height:640px; box-sizing:border-box; }
#container section h2 {display:block; width:100%; font-size:32px; color:#333333; text-align:center; padding-bottom:68px; font-family: 'Fira Sans', sans-serif; font-weight:400}

/* section01 - Web Design */
section#section01 {display:block; width:100%; height:1020px; background:#f7f7f7; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9}
section#section01 .inner {width:1280px; margin:0 auto}
section#section01 .inner ul.work_list {width:100%; box-sizing:border-box}
section#section01 .inner ul.work_list li {float:left; display:inline-block; width:399px; height:360px; margin-right:38px}
section#section01 .inner ul.work_list li .thumb {position:relative; cursor:pointer; width:399px; height:276px; border:1px solid #d1d1d1; z-index:10}
section#section01 .inner ul.work_list li #hover_0 {display:none; position:absolute; top:0; left:0; width:399px; height:276px; z-index:20; background:url(../img/hover_bg.png)0 0}
section#section01 .inner ul.work_list li #hover_1 {display:none; position:absolute; top:0; left:0; width:399px; height:276px; z-index:20; background:url(../img/hover_bg.png)0 0}
section#section01 .inner ul.work_list li #hover_2 {display:none; position:absolute; top:0; left:0; width:399px; height:276px; z-index:20; background:url(../img/hover_bg.png)0 0}
section#section01 .inner ul.work_list li #hover_3 {display:none; position:absolute; top:0; left:0; width:399px; height:276px; z-index:20; background:url(../img/hover_bg.png)0 0}
section#section01 .inner ul.work_list li #hover_4 {display:none; position:absolute; top:0; left:0; width:399px; height:276px; z-index:20; background:url(../img/hover_bg.png)0 0}
section#section01 .inner ul.work_list li #hover_5 {display:none; position:absolute; top:0; left:0; width:399px; height:276px; z-index:20; background:url(../img/hover_bg.png)0 0}

section#section01 .inner ul.work_list li .thumb ul.hover_icons {width:130px; margin:112px auto 0 auto}
section#section01 .inner ul.work_list li .thumb ul.hover_icons > li {float:left; display:inline-block; width:53px; height:53px; margin:0; padding:0 6px}
section#section01 .inner ul.work_list li .subject {width:100%; margin-top:26px}
section#section01 .inner ul.work_list li .subject p {text-align:center}
section#section01 .inner ul.work_list li .subject p.title {font-size:16px; color:#333}
section#section01 .inner ul.work_list li .subject p.date {font-size:14px; color:#7d7d7d}
section#section01 .inner ul.work_list li.last-child {margin-right:0 !important}
section#section01 .inner ul.work_list li.second_line {margin-top:38px}

/* section02 - Application Design */
section#section02 {display:block; width:100%; height:860px; background:#fff}
section#section02 .inner {width:1280px; margin:0 auto}
section#section02 .inner ul.work_list {width:100%; box-sizing:border-box}
section#section02 .inner ul.work_list li {float:left; display:inline-block; width:289px; height:610px; margin-right:38px}
section#section02 .inner ul.work_list li .app_thumb {position:relative; cursor:pointer; width:289px; height:516px; border:1px solid #d1d1d1; z-index:10}
section#section02 .inner ul.work_list li #app_hover_0 {display:none; position:absolute; top:0; left:0; width:289px; height:516px; z-index:20; background:url(../img/hover_bg.png)0 0}
section#section02 .inner ul.work_list li #app_hover_1 {display:none; position:absolute; top:0; left:0; width:289px; height:516px; z-index:20; background:url(../img/hover_bg.png)0 0}
section#section02 .inner ul.work_list li #app_hover_2 {display:none; position:absolute; top:0; left:0; width:289px; height:516px; z-index:20; background:url(../img/hover_bg.png)0 0}
section#section02 .inner ul.work_list li #app_hover_3 {display:none; position:absolute; top:0; left:0; width:289px; height:516px; z-index:20; background:url(../img/hover_bg.png)0 0}

section#section02 .inner ul.work_list li .app_thumb ul.hover_icons {width:130px; margin:230px auto 0 auto}
section#section02 .inner ul.work_list li .app_thumb ul.hover_icons > li {float:left; display:inline-block; width:53px; height:53px; margin:0; padding:0 6px}
section#section02 .inner ul.work_list li .subject {width:100%; margin-top:26px}
section#section02 .inner ul.work_list li .subject p {text-align:center}
section#section02 .inner ul.work_list li .subject p.title {font-size:16px; color:#333}
section#section02 .inner ul.work_list li .subject p.date {font-size:14px; color:#7d7d7d}
section#section02 .inner ul.work_list li.last-child {margin-right:0 !important}
section#section02 .inner ul.work_list li.second_line {margin-top:38px}

/* section03 - Editorial Design */
section#section03 {display:block; width:100%; height:980px; background:#f7f7f7; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9}
section#section03 .inner {width:1280px; margin:0 auto}
section#section03 .inner ul.work_list {width:100%; box-sizing:border-box}
section#section03 .inner ul.work_list li {float:left; display:inline-block; width:289px; height:208px; margin-right:38px; border:1px solid #d1d1d1; background:#fff}
section#section03 .inner ul.work_list li .img_area {width:100%; height:auto; border:0; overflow:hidden}
section#section03 .inner ul.work_list li .bg {width:100%; height:auto; transform-origin: center center 0px; -webkit-transition: all 2.0s ease; -moz-transition: all 2.0s ease; -o-transition: all 2.0s ease; transition: all 2.0s ease}
section#section03 .inner ul.work_list li .bg:hover {-webkit-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); transform: scale(1.2,1.2)}
section#section03 .inner ul.work_list li.last-child {margin-right:0 !important}
section#section03 .inner ul.work_list li.second_line {margin-top:38px}

/* section04 - History */
section#section04 {display:block; width:100%; height:auto; background:#fff; }
section#section04 .inner {width:988px; margin:0 auto; text-align:center; }
section#section04 .inner .history {display:block; margin:0 auto}

/* section05 - Contact */
section#section05 {display:block; border-top:1px solid #d7d7d7; background:#fff; }
section#section05 .inner {width:100%; margin:0; }
.sendmail {display:block; width:980px; height:auto; margin:0 auto; padding:0; background:#fff; color:#666; font-size:16px; box-sizing:border-box}
.sendmail legend {font-size:0; text-indent:-9999px !important}
.sendmail label {font-size:0; text-indent:-9999px !important}
.sendmail p {display:block; padding:0}
.sendmail p.lock {background:#f8f8f8; padding:12px 10px; margin:10px 0; border:1px solid #dddddd}

.sendmail input#name {float:left; width:34%; max-width:354px; padding:12px 10px; border:1px solid #dddddd}
.sendmail input#email {float:right; width:60%; max-width:612px; padding:12px 10px; border:1px solid #dddddd}
.sendmail textarea#content {width:100%; margin-top:10px; padding:12px 10px; border:1px solid #dddddd; min-height:340px; box-sizing:border-box}

.sendmail p.submit_btn {text-align:center; margin-top:20px}
.sendmail .submit {cursor:pointer; background:#161616; color:#fff; font-size:16px; font-weight:normal; padding:20px 76px; margin:0; border:none}

/* footer */
footer {clear:both; display:block; width:100%; min-width:1280px; height:auto; padding:0; background:#f8f8f8; border-top:1px solid #d1d1d1}
footer #inner {display:block; width:100%; border-top:1px solid #fff}
footer .foot_cont {position:relative; max-width:980px; margin:0 auto; padding:16px 0; color:#4d4d4d}
footer .foot_cont p {text-align:center}
footer .foot_cont p.notice {font-size:12px; font-weight:normal}
footer .foot_cont p.copyright {padding-top:4px; font-size:10px}
footer .portfolio_before {position:absolute; top:10px; right:0; width:82px}
footer .portfolio_before a {font-size:12px; color:#4d4d4d; text-decoration:none; border:0; text-align:center}
footer .portfolio_before img {display:block; width:32px; height:32px; padding-bottom:2px; border:0; margin:0 auto}
footer #back-top {position:fixed; z-index:10; right:10px; bottom:10px; background:rgba(0, 0, 0, 0.5); padding:20px; border-radius:300px; width:24px; height:24px; }

/* modal popup */
.popup-box { /* 뜨는 팝업창의 레이어 */
	display: none; position: fixed; z-index: 100;
	width: 80%; max-height:800px; overflow-y:auto;
	padding:0;	margin:0; background: #fff;
	border:1px solid #000;
	-webkit-box-shadow:0 1px 5px 1px rgba(0,0,0,0.2);
	box-shadow:0 1px 5px 1px rgba(0,0,0,0.2)
}

.popup_overlay { /* 팝업이 뜰때 배경이 되는 레이어 */
	position: fixed; top: 0; left: 0; z-index: 90;
	width:100%; height:100%;
	background:#000; opacity:0.3; margin:0; padding:0
}
.popup_inner {position:relative; display:block; width:95%; height:auto; height:800px; padding:20px 0; margin:0 auto}
.popup_inner h3 {width:100%; border-bottom:1px solid #dddddd; padding:10px 0; font-size:18px; margin:0}
.popup_inner a.popup_close {position:absolute; right:0; top:24px}
.popup_inner p {padding-top:10px; font-size:14px; line-height:18px}
.popup_inner .popup_cont img {width:100%}
.popup_inner .popup_foot {position:fixed; left:0; bottom:0; width:100%; height:40px; background:#000; opacity:0.6; margin:0; padding:0; z-index:100}
.popup_inner .popup_foot ul.progress {}
.popup_inner .popup_foot ul.progress li {float:left; display:inline-block; width:25%; margin:0; padding:0; text-align:center; box-sizing: border-box}
.popup_inner .popup_foot ul.progress li p {color:#fff}
hr.clearline {clear:both; width:100%; height:1px; margin:60px 0; border-top:1px solid #000}