@charset 'utf-8';
@import url("reset.css");
@import url("layout.css");


/* 공통 */
.logo					{position:absolute; left:0; top:0; z-index:120;}
.scrollOn .logo			{position:fixed !important; left:0; top:0; z-index:120; }
.topbar					{height:40px; background:#84ab0b;}
.scrollOn .topbar		{position:fixed !important; right:0; top:0; z-index:110; background:#84ab0b; width:100%; height:40px; }
.topContact				{float:right;}
.topContact .allTel		{float:left; padding:12px 0 0 18px; width:200px; height:28px; background-color:#9a106b;}
.topContact .allTel a	{color:#fff; font-size:0.9em; *font-weight:bold;}
.topContact .like		{float:left; width:90px;  margin-top:10px; padding-right:10px;}
.topContact .blue		{float:left; width:90px; height:40px; text-align:center; line-height:40px; background:#00aeef;}
.topContact .purple		{float:left; width:90px; height:40px; text-align:center; line-height:40px; background:#a186be;}
.topContact .yellow		{float:left; width:105px; height:40px; text-align:center; line-height:40px; background:#f8e72b;}
.topContact .yellow a	{color:#3c1e1e;}
.topContact li a		{color:#fff; font-size:0.81em; font-weight:bold;}

.gnbWrap	{width:100%; background:url('/images/bg_header.png') repeat-x left bottom; padding-bottom:20px;}
.gnb		{width:100%; text-align:center;}
.gnb li		{/*float:left;*/ display:inline-block; width:16.6%; padding-top:10px; text-align:center;}
.scrollOn .gnbWrap	{position:fixed !important; left:0; top:40px; z-index:100; }

.slogan1	{margin:0 auto; text-align:center; text-transform:uppercase; letter-spacing:-0.05em;}
.slogan2	{margin:0 auto; text-align:center;font-family:'DinLight'; font-weight:bold; letter-spacing:-0.04em;}
#contents				{margin:0 auto;}
.pfWrap					{}
.pfWrap .pfBox			{position:relative; margin:15px; box-shadow:2px 2px 5px #d3d3d3; behavior: url(/css/PIE.htc)}
.pfWrap .box1			{width:200px; height:200px;}
.pfWrap .box2			{width:430px; height:200px;}
.pfWrap .box3			{width:200px; height:430px;}
.pfWrap .box3 .arrowImg	{position:absolute; right:-18px; top:202px; }
.pfWrap .box3 .memImg	{position:absolute; left:-12px; top:265px; }
.pfWrap .pfBox .pName	{position:absolute; left:16px; top:20px; width:90%; text-align:left; font-size:15px; color:#222; line-height:15px; letter-spacing:-0.5px;}
.pfWrap .pfBox .pInfo	{position:absolute; left:16px; top:43px; width:85%; text-align:left; font-size:11px; color:#888; line-height:16px; letter-spacing:-0.5px; word-break:keep-all;}
/*.pfWrap .pfBox .pName	{position:absolute; left:20px; top:20px; width:80%; text-align:left; font-size:15px; color:#222; line-height:15px;} -김택수 수정함.. 작은차이가 명품을 만든다.
.pfWrap .pfBox .pInfo	{position:absolute; left:20px; top:43px; width:80%; text-align:left; font-size:11px; color:#888; line-height:16px;}*/
.pfWrap .pfBox a		{display:block; padding:0; margin:0;}
.pfWrap .box1 a:hover,
.pfWrap .box2 a:hover	{outline:3px solid #9ec81d; height:198px;}
.pfWrap .box3 a:hover	{outline:3px solid #9ec81d; height:428px;}
#footerWrap a			{color:#adadad;}
#footerWrap span a		{color:#fff; padding-left:10px;}

.pf_space		{padding-top:60px;}
.news_space		{padding-top:35px;}
.tab			{margin:0 auto; width:100%; max-width:620px;}/* pc & tablet 공통 */
.tab li			{float:left; width:32%;  margin-left:1%;  text-align:center; font-weight:bold;}
.tab li a		{display:inline-block; width:96%; padding:12px 0; color:#666; border:5px solid #666; font-size:16px; letter-spacing:-0.05em;}
.tab li a:hover	{color:#9ec81d; border:5px solid #9ec81d;}

.tab_c			{color:#9ec81d !important; border:5px solid #9ec81d !important;}

.tab4 li		{width:24% !important;}/* 포트폴리오탭 */

.price_space		{ margin-top:20px;}/* pc & tablet 공통 */
.pane .pane2		{display:none; padding-top:20px; }
.tabs				{width:100%; max-width:620px; list-style:none; margin:0 !important; padding:0;}
.tabs li			{float:left; width:32%;  margin-left:1%;  text-align:center; font-weight:bold;}
.tabs li a			{display:inline-block; width:96%; padding:12px 0; color:#666; border:5px solid #666; font-size:16px; letter-spacing:-0.05em;}
.tabs li a:hover	{color:#9ec81d; border:5px solid #9ec81d;}
.tabs a.current,
.tabs a.current:hover,
.tabs li.current a  {cursor:default !important;  color:#9ec81d !important; border:5px solid #9ec81d;}
.tabs2				{list-style:none; margin:0 !important; padding-top:5px;}
.tabs2 li			{float:left; text-indent:0; padding:0 10px; margin:0 !important; list-style-image:none !important; }
.tabs2 a			{font-size:15px; display:block; height:30px; line-height:30px; text-align:center; color:#666; padding:0px; margin:0px; position:relative; top:1px; }
.tabs2 a:hover		{color:#000;}
.tabs2 a.current, 
.tabs2 a.current:hover, 
.tabs2 li.current a {cursor:default !important; font-weight:bold; color:#9ec81d !important; *font-size:13px;}
.tabs a:active,
.tabs2 a:active {outline:none;}

.container				{position:relative; margin:0 auto; max-width:1000px; }
.top_title				{color:#9ec81d; font-weight:800; letter-spacing:-0.05em;}
.control				{position:absolute; right:0;}
.control li				{float:left; margin-left:10px;}
.pf_view				{margin:0 auto; width:100%; margin-bottom:35px;}
.pf_view .pfInfo .pfName{color:#333; letter-spacing:-0.05em; font-weight:bold;}
.pf_view .pfInfo .pfUrl {color:#666; letter-spacing:-0.05em; }
.pf_view .pfInfo .lunch	{margin-top:25px;}
.pf_view .pfImg .monitor img{width:100%;}
.pf_view .pfImg .browser img{width:100%; box-shadow:4px 4px 5px #e8e8e8; behavior: url(/css/PIE.htc)}
a.radius				{padding:10px 30px; border-radius:30px; background:#666; font-size:13px; line-height:30px; color:#fff; font-weight:bold;}
a.radius:hover			{background:#9ec81d;}

.reqBg				{background:url('/images/bg_request.gif') no-repeat center top;}/* pc & tablet 공통 */
.top_msg			{font-size:15px; color:#666; line-height:140%; text-align:center; margin-top:20px;}
.request_tel		{font-size:14px; color:#9ec81d; margin-top:20px; text-align:center;}
.request_tel dt		{color:#333; font-weight:bold;}
.request_tel dd		{color:#666; margin-top:10px}
.request_tel a		{color:#666; font-weight:bold; padding:10px 5px;}
.request_tel a.red	{color:#be412e;}
.request_tel a.blue	{color:blue;}
.requestPC			{width:100%; height:371px; background:url('/images/bg_postcard.png') no-repeat center top; margin-top:20px; padding-top:27px;}/* 우편백그라운드 */
.requestPC2			{width:100%; border-top:2px solid #9ec81d; margin-top:20px;}
.pcForm				{margin:0 auto;}
.pcForm th,
.pcForm td			{padding:11px 0 2px; text-align:left; border-bottom:1px solid #7e622e;}
.pcForm th			{vertical-align:middle; }
.pcForm td input[type=text]{border:none; background:none;}
.pcForm td textarea {width:100%; border:1px solid #7e622e; background:none; overflow-y:auto;}
.pcForm .noLine		{border:none;}
.pcForm .btnArea	{text-align:center; padding-top:10px;}

.pcForm2			{table-layout:fixed; width:100%;}
.pcForm2 th			{padding:8px 0; text-indent:10px; text-align:left; font-size:15px; font-weight:normal; border-bottom:1px solid #d6d6d6;}
.pcForm2 td			{padding:8px 0; text-align:left; border-bottom:1px solid #ddd; font-size:13px; text-indent:5px;}
.pcForm2 th			{vertical-align:middle; background:#eee;}
.pcForm2 td input[type=text]{padding:8px 5px; border:1px solid #ccc;}
.pcForm2 td input[type=file]{padding:8px 5px; background:#e1e1e1; width:205px; height:21px;}
.pcForm2 td textarea {width:100%; border:1px solid #ccc; background:none; overflow-y:auto; box-sizing:border-box; -webkit-box-sizing: border-box; }
.pcForm2 td select	{padding:8px 5px; border:1px solid #ccc;}
.pcForm2 .noLine	{border:none;}
.pcForm2 .btnArea	{text-align:center; padding:40px 0;}

.pcForm2 .title		{font-size:15px; font-weight:normal; padding:15px 0;}
.privacyArea		{width:100%; height:125px; background-color: #e8e8e8; overflow: hidden; overflow-y: scroll; color:#999; line-height: 20px; padding:15px; box-sizing:border-box; -webkit-box-sizing: border-box; }
.redColor			{background:#e6392c; padding:10px 20px; color:#fff;}
.grayColor			{background:#a6a6a6; padding:10px 20px; color:#444;}


.inbox2				{position:relative; padding-right:20px;}
.inbox2 p			{height:24px; overflow:hidden; font-size:12px; line-height:150%;}
.inbox2 span		{display:block; position:absolute; top:0; right:-2px; width:66px; height:23px; background:url('/images/btn_file.gif') left top no-repeat;}
.inbox2 span input	{width:100%; height:100%; opacity:0; filter:alpha(opacity=0);1}

.requestMobile		{display:none;}

.newsList			{border-top:1px solid #bcbcbc;}
.newsList dt, .newsList dd {padding:15px 0; border-bottom:1px solid #bcbcbc; line-height:150%;}
.newsList dt		{cursor:pointer; background:url('/images/expand-icon.png') no-repeat right}
.newsList .expanded {background:url('/images/expanded-icon.png') no-repeat right}
.newsList dd		{background:#f2f2f2; padding:25px 10px 25px 12%;}
.newsList dt li		{display:inline-block;}
.newsList dt li.num	{width:12%; text-align:center; color:#666;}
.newsList dt li.tit	{width:60%; font-weight:bold; color:#333;}
.newsList dt li.date{width:25%; text-align:center; color:#666;}
.listMore			{background:#9ec81d; padding:12px 0; border-bottom:none; text-align:center; font-weight:bold;}
.listMore a			{color:#fff;}

.g2Img				{margin:0 auto; width:100%; max-width:656px;}
.clientList			{width:100%; margin:0 auto; margin-top:30px;}
.clientList li		{float:left; max-width:158px;}
.clientList li img	{width:100%; box-shadow:0px 0px 7px #d5d5d5;}
.clientList li span	{display:block; padding-top:10px; text-align:center; font-size:11px; color:#666;}

.contactBox table	{width:100%; table-layout:fixed;}
.contactBox th,
.contactBox td		{font-size:13px; text-align:left; padding-bottom:20px; line-height:140%; }
.contactBox th		{color:#9ec81d;}
.contactBox td,
.contactBox td a	{color:#666;}
.contactBox th img	{vertical-align:middle; padding-right:5px;}

.pane2 h3			{color:#000; font-size:30px; padding-top:3%;}
.pane2 h3 span		{color:#666; font-size:20px; }
.pane2 .priceTop	{padding-top:3%; color:#666; font-size:13px; line-height:130%;}
.pane2 .price		{padding-top:1%;color:#666; font-size:13px; line-height:130%;}
.pane2 .pay			{margin-top:4%; width:100%;}
.pane2 .pay dt		{float:left; color:#000; font-size:13px; padding:0 2% 10px 8px; font-weight:bold; background:url('/images/bullet.gif') no-repeat left 5px;}
.pane2 .pay dd		{float:left; color:#666; font-size:13px; padding:0 10% 10px 0;}
.pane2 .pay dd.red	{color:#9e0b0f; font-weight:bold;}
.pane2 .option		{margin-top:3%; width:100%; border:1px solid #ccc; border-collapse:collapse;}
.pane2 .option th,
.pane2 .option td	{border:1px solid #ccc; font-size:13px; line-height:130%; padding:8px 0; vertical-align:middle;}
.pane2 .option th	{width:16%; background:#9ec81d; color:#fff; vertical-align:middle;}
.pane2 .option td	{color:#666; padding:5px; vertical-align:middle;}
.pane2 .option .col	{padding-left:2%;}
.pane2 .ex			{color:#666; font-size:13px; margin-top:20px;}
.pane2 ul .left		{margin-right:83px;}
.pane2 ul li		{float:left;}
.pane2 ul .title	{margin-top:5px; margin-bottom:15px;}


/* PC 시작 */
@media all and	(min-width:769px){

.topContact			{float:right;}
.topContact .allTel	{float:left; padding-top:12px;}
.logo_mobile,
.menuOn,
.menuOff,
.Katalk_mobile{display:none;}

.gnb		{max-width:1000px; margin:0 auto;}
.slogan1	{font-size:50px; margin-top:60px;}
.slogan2	{font-size:22px; margin-top:10px; margin-bottom:40px;}
.container	{width:100%; margin-top:60px;}
.top_title	{font-size:80px; line-height:80px;}

.pf_space				{margin-bottom:40px;}
.control				{top:30px;}
.pf_view				{margin-top:35px;}
.pf_view .pfInfo		{float:left; width:40%;}
.pf_view .pfInfo .pfName{font-size:40px; line-height:40px; margin-bottom:30px;}
.pf_view .pfInfo .pfUrl {font-size:15px; line-height:15px; margin-bottom:5px;}
.pf_view .pfImg			{float:right; width:58%;}
.pf_view .pfImg .monitor{width:100%; max-width:576px;}
.pf_view .pfImg .browser{width:98%; max-width:560px; margin-top:30px;}

.workBox			{float:right; width:42%;}
.workBox .workTxt	{font-size:15px; color:#666; line-height:140%; margin:20px 0 30px;}
.workBox .circleImg	{width:100%; max-width:405px;}
.workImg			{float:left; width:50%; max-width:485px;}	
.priceBox			{margin-top:80px;}

.newsList			{margin-top:40px;}
.newsList dt		{font-size:15px;}

.g2Img				{padding-top:35px; padding-bottom:40px;}
.clientBox			{padding-top:100px;}
.clientList			{max-width:920px;}
.clientList li		{width:18%; padding:20px 1.3%;}
.space				{margin-top:60px;}

.contactBox			{position:absolute; right:0; top:290px; width:45%; min-width:300px; }
.contactBox	th		{width:25%;}
.mapImg				{padding-top:30px;}
}


/* 태블릿 */
@media all and	(max-width:768px){
.gnb li		{padding-top:10px;}
.gnb li img	{width:100%;}
.gnb li.none{display:none;}

.logo_mobile,
.menuOn,
.menuOff,
.gnb_mobile,
.Katalk_mobile{display:none;}

.slogan1	{font-size:40px; margin-top:60px;}
.slogan2	{font-size:20px; margin-top:10px; margin-bottom:30px;}
.container	{width:96%; margin-top:40px;}
.top_title	{font-size:60px; line-height:60px;}

.pf_space				{margin-bottom:30px;}
.control				{top:15px;}
.pf_view				{margin-top:35px;}
.pf_view .pfInfo		{float:left; width:40%;}
.pf_view .pfInfo .pfName{font-size:32px; line-height:32px; margin-bottom:30px;}
.pf_view .pfInfo .pfUrl {font-size:13px; line-height:13px; margin-bottom:5px;}
.pf_view .pfImg			{float:right; width:58%;}
.pf_view .pfImg .monitor{width:100%;}
.pf_view .pfImg .browser{margin-top:30px;}

.workBox .workTxt	{font-size:15px; color:#666; line-height:140%; margin:20px 0 30px;}
.workBox .circleImg	{width:100%; max-width:405px; margin:0 auto; text-align:center;}
.workImg			{width:100%; max-width:485px; margin:0 auto; text-align:center; margin-top:60px;}	
.priceBox			{margin-top:60px;}

.newsList			{margin-top:40px;}
.newsList dt		{font-size:15px;}

.g2Img				{padding-top:35px; padding-bottom:30px;}
.clientBox			{padding-top:60px;}
.clientList			{width:100%;}
.clientList li		{width:32%; padding:20px 4%;}
.space				{margin-top:40px;}

.contactBox			{position:relative; margin-top:30px;}
.contactBox	th		{width:20%;}
.mapImg				{padding-top:30px;}
}


/* 모바일 */
@media all and (max-width:600px){
.logo, 
.gnb,
.gnbWrap,
.topContact .like,
.topContact .blue,
.topContact .purple,	
.topContact .yellow {display:none;}
.logo_mobile	{display:block; float:left; width:100px; height:40px; background:#fff; text-align:center;}
.logo_mobile img{width:70%; margin-top:8%;}
.Katalk_mobile		{display:block; float:left; width:100px; height:40px; background:#f8e72b; text-align:center;}
.Katalk_mobile a	{color:#3c1e1e; font-weight:bold; line-height:40px; font-size:13px;}
.Katalk_mobile a img{height:30px; vertical-align:middle;}

.slogan1		{font-size:28px; margin-top:40px;}
.container		{width:94%; margin-top:30px;}
.top_title		{font-size:32px; line-height:32px;}
#footerWrap span{display:block;}

.topContact			{float:right;}
.topContact .allTel	{float:left; width:180px; font-size:13px; text-align:left; padding:15px 0 0 10px; margin-right:50px; height:25px;}

.menuOn			{display:block; position:absolute; right:10px; top:5px;}
.menuOff		{position:absolute; right:10px; top:5px; display:none;}
.gnb_mobile		{position:absolute; background:#9ec81d; width:100%; z-index:10;}
.gnb_mobile li	{float:left; width:50%; height:50px; line-height:50px; font-size:15px; font-weight:bold; text-align:center;}
.gnb_mobile li a{color:#fff;}
.gnb_mobile li a:hover{color:#666;}


.pfWrap .box2			{width:200px; height:200px; overflow:hidden;}
.pfWrap .box2 img		{margin-left:-200px;}
.pfWrap .box2 a:hover	{outline:3px solid #9ec81d; height:198px;}

.pf_space				{padding-top:30px; margin-bottom:20px;}
.news_space				{padding-top:20px;}
.tab li a				{display:inline-block; width:96%; padding:8px 0; color:#666; border:3px solid #666; font-size:12px; letter-spacing:-0.05em;}
.tab li a:hover			{border:3px solid #9ec81d;}

.tabs li a				{display:inline-block; width:96%; padding:8px 0; color:#666; border:3px solid #666; font-size:11px; letter-spacing:-0.05em;}
.tabs li a:hover		{border:3px solid #9ec81d;}
.tabs a.current,
.tabs a.current:hover,
.tabs li.current a		{cursor:default !important;  color:#9ec81d !important; border:3px solid #9ec81d;}
.tabs2 a				{font-size:12px; display:block; height:30px; line-height:30px; text-align:center; color:#666; padding:0px; margin:0px; position:relative; top:1px; }
.tabs2 current a		{font-size:13px;}

.control				{top:0px;}
.pf_view				{margin-top:20px;}
.pf_view .pfInfo		{display:block; width:100%;}
.pf_view .pfInfo .pfName{font-size:20px; line-height:20px; margin-bottom:20px;}
.pf_view .pfInfo .pfUrl {font-size:13px; line-height:13px; margin-bottom:5px;}
.pf_view .pfImg			{display:block; width:100%; padding-top:15px;}
.pf_view .pfImg .monitor{width:100%;}
.pf_view .pfImg .browser{margin-top:20px;}

.reqBg				{background:none;}
.requestPC			{display:none;}
.requestPC2			{display:none;}
.requestMobile		{display:block; border-top:2px solid #9ec81d; margin-top:20px;}
.mobileForm			{table-layout:fixed;}
.mobileForm th,
.mobileForm td		{padding:8px 0; text-align:left; border-bottom:1px solid #ddd; font-size:13px; text-indent:5px;}
.mobileForm th		{vertical-align:middle; background:#eee;}
.mobileForm td input[type=text]{height:20px; border:1px solid #ccc; width:90%;}
.mobileForm td input[type=file]{width:100%;}
.mobileForm  td textarea {width:95%; border:1px solid #ccc; font-size:15px;}
.mobileForm .btnArea{text-align:center; padding-top:10px; border-bottom:none;}
.mobileForm .title	{font-size:15px; font-weight:normal; padding:15px 0;}

.newsList			{margin-top:20px;}
.newsList dt		{font-size:12px;}
.newsList li.date	{display:none;}

.g2Img				{padding-top:20px; padding-bottom:10px;}
.clientBox			{padding-top:50px;}
.clientList			{width:100%;}
.clientList li		{width:40%; padding:20px 5%;}
.space				{margin-top:30px;}

.contactBox	th		{width:37%;}
.mapImg	img			{width:100%;}
}


/* padding & margin & color */
.mg_t30 {margin-top:30px;}
.mg_t40 {margin-top:40px;}

.green	{color:#9ec81d;}
.dgray	{color:#666;}
.black	{color:#000;}
.red	{color:#be412e;}

.alignL	{text-align:left;}
.alignR	{text-align:right;}
.alignC	{text-align:center;}
.floatL	{float:left;}
.floatR	{float:right;}
.w100	{width:100%;}