@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@charset "utf-8";
/************************************************************************************************************************************
 	CSS Guide -  2015.01.05 김지현 
 	Last UPDATE - 2015.12.12 22:00 김지현 
 ************************************************************************************************************************************/

/* Common */
body {margin:0;padding:0;font:12px/1 "nanumbarungothic",Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;color:#000;-webkit-text-size-adjust:100%;}
h1,input {padding:0;margin:0;}
input,textarea {font-family:"nanumbarungothic",Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;}
table {border-spacing:0;border-collapse:collapse;}
img {border:0;}
li {list-style:none;}
button {border:0;padding:0;margin:0;cursor:pointer;text-align:center;background:none;}
a,a:link,a:visited,a:active {text-decoration:none;color:#757575;}
.hide {display:none;}

/* layout */
body.f-body {margin:0 10px;overflow-y:auto;}

/* common width */
.w-10 {width:10%;}
.w-20 {width:20%;}
.w-25 {width:25%;}
.w-30 {width:30%;}
.w-33 {width:33.3333333%;}
.w-40 {width:40%;}
.w-50 {width:50%;}
.w-60 {width:60%;}
.w-70 {width:70%;}
.w-75 {width:75%;}
.w-80 {width:80%;}
.w-90 {width:90%;}
.w-100 {width:100%;}
.w-auto {width:auto;}
/* main */
h1.logo {margin:0 auto;padding:0;font-size:0;width:200px;height:60px;line-height:60px;background:url('../images/logo.png') no-repeat center center;}
body {margin:0;padding:0;}
body.m-body {background:black url('../images/bamboo.png') no-repeat right top;overflow:hidden;}

/*white테마*/
body.m-body.t-white {background:white url('../images/bamboo-black.png') no-repeat right top;}
body.m-body.t-white h1.logo {background:url('../images/logo-black.png') no-repeat center center;}
body.m-body.t-white .header,
body.m-body.t-white .gnb a {color:black;font-weight:bold;}
.t-white .desc-tb thead th {color:white;background-color:black;}
.t-white .desc-tb thead {border:1px solid black;}
.t-white .desc-tb tbody {border:1px solid #eeeeee;background-color:rgba(255,255,255,0.9);}
.t-white .desc-tb tbody tr {border:1px solid #eeeeee;}
.t-white .desc-tb table {color:black;}

ul {margin:0;padding:0;}
a,a:link,a:visited,a:active {text-decoration:none;color:white;}
.wrap {margin:0 auto;padding:0;width:1280px;}
.gnb a {color:white;font-size:10px;font-weight:normal;display:block;letter-spacing:1px;}
/*.header {position:absolute;top:0;left:0;right:0;margin:0;padding:0;height:100px;}*/
.header {z-index:100;position:relative;margin:0;padding:0;width:100%;height:92px;color:white;font-family:Trebuchet MS,"맑은 고딕","malgun gothic",sans-serif;text-align:center;}
.util,.gnb {display:inline-block;list-style:none;}
.gnb {position:relative;margin:0 auto;}
.util li,.gnb li {float:left;margin:0 15px;padding:0;font-size:11px;text-transform:uppercase;cursor:pointer;}
.container {position:absolute;top:92px;left:0;right:0;bottom:20px;margin:0;padding:0;}
.detail-page {right:10px;left:10px;}
.footer {position:absolute;bottom:0;left:0;right:0;height:20px;}
.contents {position:relative;width:95%;margin:0 auto;padding:0;}
.d-module {margin:0;padding:0;}/*width:100%;display:inline-block*/
.d-module li {float:left;margin:0 0 10px 0;padding:0;list-style:none;}
.d-module li:hover .d-bg {display:block;}
.d-bg {display:none;width:100%;height:100%;background-color:rgba(255,255,255,0.1);font-size:11px;color:white;text-align:center;}
.d-content {position:relative;height:200px;margin:0 0 10px 0;border:1px solid #ececec;background-color:#f9f9f9;overflow:hidden;}
.d-content img {margin:0;padding:0;border:0;width:100%;height:auto;} /* 백그라운드로 깔지, 이미지로넣을지 고민좀 해보기*/
.d-content a {display:inline-block;width:100%;height:200px;}
.d-content a:hover .bg {display:block;}
/*.d-content a:hover .ci {display:block;}*/
.d-module .w-33,
.d-module .w-40,
.d-module .w-50,
.d-module .w-60 {width:100%;}

/*디테일페이지 */
.pf-title {position:absolute;margin:0;padding:0;bottom:40px;height:30px;left:15%;right:15%;text-align:center;font-size:11px;line-height:13px;}
.pf-detail {width:100%;margin:0 auto;padding:0;}
.pf-detail:after {clear:both;content:"";display:block;}
.pf-img {position:relative;display:inline-block;width:100%;float:left;}
.pf-img img {width:100%;height:auto;}
.desc-tb {position:relative;display:inline-block;margin-top:10px;width:100%;float:right;}
.desc-tb table {margin:0 auto;border:0;width:100%;line-height:30px;color:white;}
.desc-tb td {font-size:12px;padding:0 20px 0 0;}
.desc-tb th {text-transform:uppercase;font-size:12px;}
.desc-tb tbody th {text-align:left;text-indent:10px;}
.desc-tb thead th {font-size:13px;font-weight:bold;color:black;letter-spacing:0;background-color:white;}
.desc-tb thead {border:1px solid white;}
.desc-tb tbody {border:1px solid #1a1a1a;background-color:rgba(0,0,0,0.9);}
.desc-tb tbody tr {border:1px solid #1a1a1a;}
p.desc {margin:6px 0 0;padding:0 0 20px 0;line-height:18px;word-wrap:break-word;}
p.desc strong {display:block;}
.pf-desc {width:100%;}
.bar-wrap {width:90%;max-width:300px;height:15px;margin-top:6px;margin-bottom:6px;line-height:15px;border-radius:10px;background-color:#eeeeee;}
.bar {display:inline-block;height:100%;background-color:red;text-align:left;text-indent:15px;font-size:10px;color:white;border-radius:10px;}
.p-design {background:#ff00a9 url('../images/design-bg.png') repeat-x 0 0;}
.p-publish {background:#ff00a9 url('../images/publishing-bg.png') repeat-x 0 0;}
.p-planning {background:#ff00a9 url('../images/planning-bg.png') repeat-x 0 0;}
.tool-wrap {margin:0;padding:0;height:20px;line-height:20px;}
.tool-wrap li {display:inline-block;margin-right:2px;}
.tool-wrap i {display:inline-block;width:18px;height:18px;background-image:url('../images/browser.png');}
.chrome {background-position:0 0;}
.chrome.off {background-position:0 -18px;}
.firefox {background-position:-18px 0;}
.firefox.off {background-position:-18px -18px;}
.ie {background-position:-36px 0;}
.ie.off {background-position:-36px -18px;}
.opera {background-position:-54px 0;}
.opera.off {background-position:-54px -18px;}
.safari {background-position:-72px 0;}
.safari.off {background-position:-72px -18px;}
.ios {background-position:-90px 0;}
.ios.off {background-position:-90px -18px;}
.android {background-position:-108px 0;}
.android.off {background-position:-108px -18px;}
.html5 {background-position:-126px 0;}
.html5.off {background-position:-126px -18px;}
.css3 {background-position:-144px 0;}
.css3.off {background-position:-144px -18px;}
.wordpress {background-position:-162px 0;}
.wordpress.off {background-position:-162px -18px;}
.photoshop {background-position:-180px 0;}
.photoshop.off {background-position:-180px -18px;}
.illust {background-position:-198px 0;}
.illust.off {background-position:198px -18px;}
.flash {background-position:-216px 0;}
.flash.off {background-position:-216px -18px;}

/* form */
.c-title {margin:0 auto;width:100%;font-size:20px;color:white;}
.c-title p {padding-bottom:10px;font-size:11px;font-weight:normal;line-height:15px;color:gray;border-bottom:1px solid #222222;}
.c-mailform {}
.c-mailform form,
.profile-wrap {padding:0;background:black;width:100%;margin:0 auto;}
.form,.profile {padding:20px;border:4px double white;}
.form table {table-layout:fixed;width:100%;margin:0 auto;border:0;vertical-align:top;border-spacing:0;border-collapse:collapse;color:white;}
.form th {font-size:0;width:0;text-align:left;text-indent:20px;}
.form td {padding:5px;}
.form td.txtarea {padding-right:9px;}
.form textarea {width:100%;margin:0;resize:none;line-height:15px;height:100px;}
.form input {line-height:20px;height:20px;}
.form textarea,.form input {background:#222222;border:1px solid #222222;color:white;}
.submit-btn {text-align:center;}
.submit-btn input {padding:0 20px 0 30px;height:30px;text-indent:5px;line-height:30px;margin:0 5px;cursor:pointer;background:#222222 url('../images/submit.png') no-repeat;}
.submit-btn input:hover {background-color:black;}
.submit-btn input.ok {background-position:top left;}
.submit-btn input.reset {background-position:bottom left;}

/* profile */
.profile {position:relative;}
.profile ul {position:relative;margin:0 auto 20px;padding:0;width:100%;color:#a5a5a5;}
.profile li {line-height:20px;}
.year {font-size:18px;font-family:times,arial,sans-serif;font-weight:bold;}
.date {position:absolute;right:0;font-size:10px;font-family:times,arial,sans-serif;}
.pf-bg {position:absolute;left:-170px;width:150px;height:500px;top:0;background:url('../images/profile-bg.png') no-repeat 0 0;}
/*placeholder*/
.placeholder{color:#666666;}
::-webkit-input-placeholder {color:#666666;}/*웹킷용*/
:-moz-placeholder {color:#666666;}/*파이어폭스4to18*/
::-moz-placeholder {color:#666666;}/*파이어폭스19*/
:-ms-input-placeholder {color:#666666 !important;}/*IE10이상*/

/* CI */
.ci {position:absolute;/*left:50%;top:50%;margin-left:-50px;margin-top:-50px;*/right:10px;top:10px;width:100px;height:100px;border-radius:100px;background:rgba(255,255,255,0.7);box-shadow:1px 1px 2px rgba(71,71,71,0.3);}
.ci i {display:inline-block;text-align:center;width:100%;height:100%;}
.yakurt {background:url('../images/ci-yakurt.png') no-repeat center center;}
.kia {background:url('../images/ci-kia.png') no-repeat center center;}
.samsung {background:url('../images/ci-samsung.png') no-repeat center center;}
.dm {background:url('../images/ci-dm.png') no-repeat center center;}
.globalt {background:url('../images/ci-globalt.png') no-repeat center center;}
.global {background:url('../images/ci-global.png') no-repeat center center;}
.globalcr {background:url('../images/ci-globalcr.png') no-repeat center center;}
.global21 {background:url('../images/ci-global21.png') no-repeat center center;}
.ipg {background:url('../images/ipg-logo.png') no-repeat center center;}
.blaccaviar {background:url('../images/blaccaviar-logo.png') no-repeat center center;}
.xax {background:url('../images/xax-logo1.png') no-repeat center center;}
.kft {background:url('../images/kft-logo.png') no-repeat center center;}
.doosan {background:url('../images/doosan-logo.png') no-repeat center center;}
.grid {background:url('../images/grid-logo.png') no-repeat center center;}
.duespec {background:url('../images/duespec-logo.png') no-repeat center center;}
.ganho {background:url('../images/ganho-logo.png') no-repeat center center;}
.barbiegirl {background:url('../images/barbiegirl-logo.png') no-repeat center center;}
.laren {background:url('../images/laren-logo.png') no-repeat center center;}
.arabica {background:url('../images/arabica-logo.png') no-repeat center center;}
.puren {background:url('../images/puren-logo.png') no-repeat center center;}
.chalktalk {background:url('../images/chalktalk-logo.png') no-repeat center center;}
.socialboard {background:url('../images/sb-logo.png') no-repeat center center;}
.zermatt {background:url('../images/zermatt-logo.png') no-repeat center center;}
.bohun {background:url('../images/bohun-logo.png') no-repeat center center;}
.melbang {background:url('../images/melbang-logo.png') no-repeat center center;}
.loex {background:url('../images/loex-logo.png') no-repeat center center;}
.rdk {background:url('../images/rdk-logo.png') no-repeat center center;}

/* BG - 마우스오버시 */
.bg {display:none;position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid #ff00a9;background:rgba(255,0,129,0.86) url('../images/more-btn.png') no-repeat center center;}

/* 뒤로가기버튼 */
.btn-back {position:fixed;top:50%;left:0px;width:50px;height:50px;margin-top:-25px;background:url('../images/back-btn.png') no-repeat;}
.btn-fwd {position:absolute;top:50%;right:20px;width:50px;height:50px;margin-top:-25px;background-color:black;}

/* 상세페이지 이미지리스트 */
.image-list {margin:0;padding:0;width:100%;display:inline-block;}
.image-list h3 {font-size:18px;letter-spacing:-.5px;}
.image-list li {list-style:none;margin-bottom:20px;margin-top:40px;text-align:center;}
.image-list img {max-width:100%;}

/* 상세페이지 구분선 */
.border {display:inline-block;width:100%;height:1px;margin:50px 0;border-bottom:1px dashed black;}

/* 텍스트정렬 */
.txt-left {text-align:left;}
.txt-right {text-align:right;}
.txt-top {vertical-align:top;}
.txt-middle {vertical-align:middle;}
.txt-bottom {vertical-align:bottom;}

@media only screen and (min-width:480px) {
.contents {width:95%;margin:0 auto;}
.d-content {height:250px;}
.d-content a {height:250px;}
.pf-title {bottom:60px;}
.form th {width:70px;font-size:11px;}
.c-mailform form,
.profile-wrap {padding:20px;width:70%;}
}

@media only screen and (min-width:768px) {
h1.logo {line-height:90px;}
.d-module .w-33,
.d-module .w-40,
.d-module .w-50,
.d-module .w-60 {width:50%;}
.header {height:120px;}
.container {top:120px;}
.contents {width:90%;}
.d-content {margin:0 10px 10px 10px;}
.d-content img {width:auto;height:100%;}
.form,.profile {padding:40px;}
.form table,.profile ul {width:100%;}
.c-title {width:100%;}
.c-mailform form,
.profile-wrap {width:70%;}
}

@media only screen and (min-width:1024px) {
.d-module .w-33 {width:33.3333333%;}
.d-module .w-40 {width:40%;}
.d-moduel .w-50 {width:50%;}
.d-module .w-60 {width:60%;}
.pf-img {width:70%;overflow:hidden;}
.pf-img img {width:auto;height:100%;}
.desc-tb {width:30%;margin-top:0;}
.desc-tb table {width:90%;}
.btn-back {left:20px;}
.form,.profile {padding:60px;}
.form table,.profile ul {width:100%;}
.c-title {width:100%;}
.c-mailform form,
.profile-wrap {width:60%;}
}

@media only screen and (min-width:1025px){
}

@media only screen and (min-width:1280px) {
.contents {width:1280px;margin:0 auto;}
.container {}
}