/* creative */
html, body {overflow-x:hidden; -webkit-overflow-scrolling: touch;}
img{ width:100% }

.header {
    position: relative;
    margin-bottom:40px;
}
.header-logo {
    height: 40px !important;
}

.section-magazine {
    padding: 0 5% 0 0;
    margin-bottom: 70px !important;
}

.contain-txt img {
    -webkit-filter: grayscale(0%) !important;
}

.left .magazineDim {
    position: absolute;
    background-color: #424242;
    min-width: 90%;
    height: 190px;
    opacity: 0.8;
    z-index: 3;
    width: 97%;
}

.right .magazineDim {
    position: absolute;
    background-color: #000000;
    min-width: 100%;
    height: 220px;
    opacity: 0;
    z-index: 6;
}

.userInfo { position:absolute; z-index:4; color:#ffffff; margin: 20% 0 0 3%;}
.userInfo .userName {
    color: #ffffff;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: bold;
    font-size: 16px;
    width: 160px;
    padding: 0 20px;
    margin-bottom: 5px;
}
.userInfo .line {
    color: #ffffff;
    font-family: 'Nanum Gothic', sans-serif;
    font-weight: bold;
    font-size: 11.5px;
    margin-left: 20px;
    width: 5px;
    height: 1px;
    background: #ffffff;
    margin-bottom: 2px;
}
.userInfo .cityName {
    color: #ffffff;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 11px;
    width: 150px;
    padding: 0 20px;
}

.creative-list { padding: 0 5% 0 0 !important;}
.creative.full {display:block; height:auto; overflow:hidden; padding:0;}
.creative.full.padSet {padding-bottom:60px;}
.creative.full img {width:100%;}
.creative.full .title {color:#040305; font-size:14px; font-weight:bold; text-transform:uppercase; line-height:1; margin:0px 5% 5px 5%;}
.creative-row .title {color:#040305; font-size:18px; font-weight:bold; text-transform:uppercase; line-height:1; margin-bottom:5px;}
.creative-row .tItalic {color:#000; font-size:13px; line-height:1.2; font-style:italic; margin-bottom:30px;}
.creative-row .desc {color:#333; font-size:11px; font-weight:bold; text-transform:uppercase; line-height:1; margin-bottom:20px;}
.creative-row .script {color:#000; font-size:12px; opacity:0.7; line-height:1.2; margin-bottom:20px;}
.creative-row .img .script {font-size:13px; margin:5px 0; color:#333; opacity:0.8;}
.creative-row .img ul {display:block; height:auto; overflow:hidden;}
.creative-row .img li {float:left; width:50%; height:auto; overflow:hidden; box-sizing:border-box;}

.filter {text-align:right; margin-bottom:30px; margin-right: 20px;}
.filter span {background:url('https://image-at.lg-graphy.com/contents/resource/v2.0.7/images/filter.png') no-repeat left 50%; padding-left:17px; font-size:12px; text-transform:uppercase; color:#000; background-size:12px 11px;}

.keywordSec {display:block; height:auto; overflow:hidden; margin-bottom: 30px;}
.keywordSec .keyBox {float:left; padding:0 12px 0 12px; height:28px; background:#FFF; border:1px solid #9e9e9e; box-sizing:border-box; display:table; text-align:center; margin-right:5px;}
.keywordSec .keyBox:last-child {margin-right:0px;}
.keywordSec .keyBox span {display:table-cell; vertical-align:middle; text-transform:uppercase; color:#333; font-size:13px; font-weight:400;}

.content .creative-slide {margin-left:5%; height:auto; overflow:hidden; position:relative; margin-top:5px;}
.content .creative-slide .creThumb {height:auto; overflow:hidden; position:relative;}
.content .creative-slide .creThumb img {/*height:100%;*/vertical-align:bottom;height: 200px; object-fit: cover;}

.wsSec {display:block; height:auto; overflow:hidden;}
.wsSec .leftWs {float:left; width:54%; height:auto; overflow:hidden; margin-right:2.5%;}
.wsSec .rightWs {float:left; width:43.5%; height:auto; overflow:hidden; margin-right:0;}
.wsSec .leftWs img, .wsSec .rightWs img {width:100%;}
.wsSec p {height:26px; line-height:26px; font-size:8px; color:#000; opacity:0.8; margin:0;}

.topic {padding: 0px 5%; height:auto; overflow:hidden; clear:both;}
.topic .topic-row {padding-bottom: 0px; position:relative; height:auto; overflow:hidden; clear:both;}
.topic .topic-row .title {color:#040305; font-size:14px; font-weight:bold; text-transform:uppercase; line-height:1; margin-bottom:5px;}
.topic .topic-row .content {position:relative;}
.topic .topic-row .content .topicTitle {position:absolute; width:100%; text-align:center; left:0; top:50%; transform:translate(0, -50%); color:#FFF; opacity:1.0;}
.topic .topic-row .content .topicTitle .toName {font-style:italic; text-transform:uppercase; font-size:15px; font-weight:bold; padding-bottom:12px; margin-bottom:20px; position:relative; line-height:1;}
.topic .topic-row .content .topicTitle .toName:after {content:''; position:absolute; width:10px; height:2px; background:#ccc; left:50%; margin-left:-5px; bottom:0;}
.topic .topic-row .content .topicTitle .toDesc {font-size:18px; letter-spacing:5px; text-transform:uppercase; font-style:italic; line-height:1;}
.topic .topic-row .content .boxLine {position:absolute; width:94%; height:89%; left:50%; margin-left:-47%; top:50%; transform:translate(0, -50%); border:1px solid #FFF; opacity:0.3;}

.creListWrap {display:block; height:auto; overflow:hidden; position:relative;}
.creListWrap .btn-close {display: inline-block; width: 15px; height: 15px; position: fixed; top: 30px; right: 18px; z-index:10;}
.creListWrap .btn-close img {width: 100%;}
.creListWrap .creKeySec {position:fixed; width:32%; height:100%; background:#222; box-sizing:border-box;}
.creListWrap .creKeySec ul {display:block; height:auto; overflow:hidden; padding-top:70px;}
.creListWrap .creKeySec ul li {display:block; height:22px; line-height:24px; font-size:16px; color:#838383; margin-bottom:8px; text-transform:uppercase; letter-spacing:-0.5px;}
.creListWrap .creKeySec ul li a {display:block; color:#838383; padding:0 18px;}
.creListWrap .creKeySec ul li.on a {background:#3619c7; font-weight:bold; color:#FFF;}
.creListWrap .creKeySec ul li p {display:block; color:#838383; padding:0 18px;}
.creListWrap .creKeySec ul li.on p {background:#3619c7; font-weight:bold; color:#FFF;}
.filterCityName:hover {
    text-decoration:underline;
}
.creListWrap .creList {display:block; height:auto; overflow:hidden; padding-top:74px; margin-left:38%;}
.creListWrap .creList .creSet {display:block; height:auto; overflow:hidden; text-transform:uppercase; margin-bottom:68px;}
.creListWrap .creList .creSet .name {font-size:22px; color:#000; font-weight:bold; margin-bottom:6px; line-height:1;}
.creListWrap .creList .creSet .local {font-size:22px; color:#000; opacity:0.5; margin-bottom:6px; line-height:1;}
.creListWrap .creList .creSet .depart {font-size:22px; color:#000; opacity:0.5; margin:0; line-height:1.2;}

/* creative */

/* add 190220 */
.creFeedTy01 {display:block; margin-bottom:30px;}
.creFeedTy01 .postBoxTy01 .postCon {display:block;}
.creFeedTy01 .postBoxTy01 .postCon .thumb {display:block; border-radius:8px; overflow:hidden; margin-bottom:10px;}
.creFeedTy01 .postBoxTy01 .postCon .thumb img {width:100%;}
.creFeedTy01 .postBoxTy01 .postCon p {margin:0; line-height:1.0;}
.creFeedTy01 .postBoxTy01 .postCon .name {padding:4px 0; color:#000; font-size:20px; font-weight:600;}
.creFeedTy01 .postBoxTy01 .postCon .job {padding:2px 0; color:#818181; font-size:14px;}
.creFeedTy01 .postBoxTy01 .postTags {padding:20px 0 30px 0;}
.creFeedTy01 .postBoxTy01 .postTags .tag {display:inline-block; font-size:12px; color:#FFF; border:1px solid #181818; background:#181818; padding:4px 7px; margin-right:7px; border-radius:4px; font-weight:400;}
.creFeedTy01 .postBoxTy01 .postTags .tag:last-child {margin-right:0px;}
.creFeedTy01 .swiper-scrollbar {width:100% !important; left:50%; margin-left:-50%; bottom:0px !important; height:2px !important; background:#c6c6c6 !important;}
.creFeedTy01 .swiper-scrollbar-drag {background:#000;}

.creFeedTy02 {display:block; margin:26px 0;}
.creFeedTy02 .thumb {display:block; position:relative; height:210px; border-radius:8px; overflow:hidden;}
.creFeedTy02 .thumb .desc {position:absolute; left:30px; top:29px; color:#FFF; font-size:32px; font-weight:500; line-height:1.2; z-index:40;}
.creFeedTy02 .thumb .deco {position:absolute; left:30px; bottom:40px; width:40px; height:2px; background:#FFF; z-index:30;}
.creFeedTy02 .thumb .mask {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.1); z-index:10;}

.creFeedTy03 {display:block; margin:10px 0 30px 0;}
.creFeedTy03 .thumb {display:block; border-radius:8px; overflow:hidden; margin-bottom:10px;}
.creFeedTy03 .thumb img {width:100%;}
.creFeedTy03 p {margin:0; line-height:1.0;}
.creFeedTy03 .name {padding:4px 0; color:#000; font-size:15px; font-weight:600;}
.creFeedTy03 .job {padding:2px 0; color:#818181; font-size:11px;}

/* detail */
.featureSec {display:block; height:auto; overflow:hidden; padding:0 0 10px 40px; position:relative;}
.featureSec:after {content:''; position:absolute; left:40px; bottom:0; width:calc(100% - 40px); height:1px; background:#cfcfcf;}
.featureSec .feaTxt {display:block; height:auto; overflow:hidden; position:relative;}
.featureSec .feaTxt .infoTxt {display:block; width:50%; height:auto; overflow:hidden; box-sizing:border-box;}
.featureSec .feaTxt .infoTxt.full {width:100%;}
.featureSec .feaTxt .infoTxt p {padding:0; margin:0; line-height:1.0;}
.featureSec .feaTxt .infoTxt .artist {font-size:14px;padding: 4px 0; color: #818181;}
.featureSec .feaTxt .infoTxt .name {font-size: 36px; color: #000; font-family: 'Nanum Gothic', sans-serif; font-weight: bold; line-height: 1.1;}
.featureSec .feaTxt .infoTxt .job {padding: 15px 0 15px 17px; color: #7b7b7b; font-size: 14px; position: relative;}
.featureSec .feaTxt .infoTxt .job:after {content: ''; position: absolute; left: 0; top: 20px; width: 10px; height: 2px; background: #949494;}
.featureSec .feaTxt .infoTxt .date {padding: 15px 0 15px 17px; color: #333; font-size: 14px; position: relative; background:url(../images/new/ico_date.png) no-repeat left 50%; background-size:13px 12px;}
.featureSec .feaTxt .infoTxt .desc {font-size:14px; color:#373737; line-height:20px;}
.featureSec .feaTxt .infoTxt .desc.post {margin:20px 0 10px 0;}
.featureSec .feaTxt .infoTxt .desc a {display:inline-block; font-weight:600; color:#000;}
.featureSec .feaTxt .postTags {clear:both; display:block; height:auto; overflow:hidden; margin-top:25px;}
.featureSec .feaTxt .postTags .tag {display:inline-block; font-size:14px; height:23px; line-height:23px; color:#555; background:#dedede; padding:0px 8px; margin-right:7px; border-radius:4px; border:0px;}
.featureSec .feaTxt .postTags .tag:last-child {margin-right:0px;}
.featureSec .feaPhoto {position:absolute; right:0; top:25px; width:40%; height:252px; border-radius:10px 0 0 10px; overflow:hidden;
-webkit-box-shadow: 0px 10px 60px -8px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 10px 60px -8px rgba(0,0,0,0.5);
box-shadow: 0px 10px 60px -8px rgba(0,0,0,0.5);
}
.featureSec .feaPhoto .thumb {display:block; width:100%; height:100%;}
.featureSec .feaPhoto img {width:100%;}

.workSec {clear:both; display:block; height:auto; overflow:hidden; padding:30px 40px;}
.workSec .title {font-size:20px; color:#000; font-weight:600; margin-bottom:20px;}
.workSec .title em {display:inline-block; color:#7b7b7b; font-weight:normal; font-style:normal; letter-spacing:-1px;}
.workSec .workThumbs {display:block; height:auto; overflow:hidden;}
.workSec .workThumbs .work {float:left; width:49%; height:auto; overflow:hidden; margin:0 2% 12px 0; border-radius:10px;}
.workSec .workThumbs .work:nth-child(2),
.workSec .workThumbs .work:nth-child(3),
.workSec .workThumbs .work:nth-child(5) {margin-right:0;}
.workSec .workThumbs .work a {display:block; width:100%; height:100%; position:relative;}
.workSec .workThumbs .work a .icoPlay {position:absolute; width:60px; height:60px; background:url(../images/new/ico_play.png) no-repeat 50% 50%; background-size:60px 60px; left:50%; margin-left:-30px; top:50%; transform:translate(0, -50%);}
.workSec .workThumbs .work .thumb {display:block; width:100%; height:100%;}
.workSec .workThumbs .work.ty01 {height:400px;}
.workSec .workThumbs .work.ty02 {height:194px;}

.dPostSec {display:block; height:auto; overflow:hidden; padding:0 40px 10px 40px; position:relative; box-sizing:border-box;}
.dPostSec .feaTxt {display:block; height:auto; overflow:hidden; box-sizing:border-box;}
.dPostSec .feaTxt .userPhoto {position:absolute; right:40px; top:20px; width:40px; height:40px; border-radius:50%; overflow:hidden; text-align:center;}
.dPostSec .feaTxt .userPhoto img {width:100%;}
.dPostSec .feaTxt .infoTxt {display:block; width:100%; height:auto; overflow:hidden; box-sizing:border-box;}
.dPostSec .feaTxt .infoTxt p {padding:0; margin:0; line-height:1.0;}
.dPostSec .feaTxt .infoTxt .artist {font-size:14px;padding: 4px 0; color: #818181;}
.dPostSec .feaTxt .infoTxt .name {font-size: 36px; color: #000; font-family: 'Nanum Gothic', sans-serif; font-weight: 600; line-height: 1.1; margin-bottom:25px;}
.dPostSec .feaTxt .infoTxt .name.photo {padding-right:50px;}
.dPostSec .feaTxt .infoTxt .job {padding: 15px 0 15px 17px; color: #7b7b7b; font-size: 14px; position: relative;}
.dPostSec .feaTxt .infoTxt .job:after {content: ''; position: absolute; left: 0; top: 20px; width: 10px; height: 2px; background: #949494;}
.dPostSec .feaTxt .infoTxt .date {padding: 0px 0 36px 19px; color: #333; font-size: 14px; position: relative; background:url(../images/new/ico_date.png) no-repeat left 0px; background-size:13px 12px;}
.dPostSec .feaTxt .infoTxt .desc {font-size:14px; color:#373737; line-height:20px; margin:30px 0 10px 0;}
.dPostSec .feaTxt .infoTxt .desc a {display:inline-block; font-weight:600; color:#000;}
.dPostSec .feaTxt .postTags {clear:both; display:block; height:auto; overflow:hidden; margin-top:25px;}
.dPostSec .feaTxt .postTags .tag {display:inline-block; font-size:14px; height:23px; line-height:23px; color:#555; background:#dedede; padding:0px 8px; margin-right:7px; border-radius:4px; border:0px;}
.dPostSec .feaTxt .postTags .tag:last-child {margin-right:0px;}

.dPostList {display:block; height:auto; overflow:hidden; padding:20px 40px 0 40px;}
.dPostList.full {padding:20px 0 0 0;}
.dPostList.full li {margin-bottom:60px;}
.dPostList li {display:block; height:auto; margin-bottom:40px;}
.dPostList li a {display:block;}
.dPostList li .thumb {display:block; height:auto; overflow:hidden; border-radius:10px; position:relative; text-align:center; margin-bottom:10px;
-webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.27);
-moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.27);
box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.27);
}
.dPostList li .thumb .runningTime {position:absolute; right:20px; bottom:20px; background:rgba(0, 0, 0, 0.8); height:21px; line-height:21px; color:#FFF; font-size:14px; padding:0 5px; border-radius:4px;}
.dPostList li .thumb img {width:100%;}
.dPostList li .thumb .pCate {position:absolute; right:20px; bottom:20px; width:20px; height:21px; background:url(../images/new/dico_img.png) no-repeat 50% 50%; background-size:20px 21px;}
.dPostList li .thumb .btnPlay {position:absolute; left:20px; bottom:20px; width:38px; height:38px; background:url(../images/new/ico_play.png) no-repeat 50% 50%; background-size:38px 38px;}
.dPostList li .thumb .btnSound {position:absolute; left:20px; bottom:20px; width:38px; height:38px; background:url(../images/new/ico_sound.png) no-repeat 50% 50%; background-size:38px 38px;}
.dPostList li p {margin:0; padding:0; line-height:1.0;}
.dPostList li .subject {color:#000; font-size:16px; font-weight:600; line-height:1.2;}
.dPostList li .author {color:#8c8c8c; font-size:12px; margin-top:5px;}
.dPostList li .source {font-size:14px; padding:5px 0; color:#20adff;}
.dPostList li .source.padSet {padding:15px 0;}
.dPostList li .source.sm {padding:3px 0;}
.dPostList li .source em {display:inline-block; margin-right:5px; color:#656565; font-style:normal;}
.dPostList li .source a {display:inline-block; color:#20adff; text-decoration:underline;}

.trackInfo {display:block; min-height:52px; overflow:hidden; position:relative; padding:0 40px 0 105px; margin-bottom:20px;}
.trackInfo .track {position:absolute; left:40px; top:0; width:52px; height:52px; border-radius:8px; background:#000; text-align:center; font-size:20px; color:#FFF; line-height:1.0; box-sizing:border-box; padding-top:8px;}
.trackInfo .track em {display:block; color:#a2a2a2; font-size:8px; margin-top:5px;}
.trackInfo p {padding:0; margin:0; line-height:1.0;}
.trackInfo .subject {color:#000; font-size:17px;}
.trackInfo .artist {color:#848484; font-size:12px;}
.outerSource {display:block; height:auto; overflow:hidden;}
.outerSource img {width:100%;}

.trackDesc {display:block; height:auto; overflow:hidden; padding:0px 40px;}
.trackDesc .desc {font-size:14px; color:#373737; line-height:20px; margin:20px 0 10px 0;}