/* @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); */
@charset "UTF-8";
@import url('../css/common.css');
@import url('../css/board.css');
@import url('../css/stylesDesktop.css');
@import url('../css/buttonEtc.css');
@import url('../css/buttonEtcMobile.css');

/* 모바일용 스타일 start */
/* 모바일용 스타일 start */
/* 모바일용 스타일 start */
/* 모바일용 스타일 start */
/* 모바일용 스타일 start */
@media all and (max-width: 850px) {
	html,
	body {
		margin: 0;
		padding: 0;
	}

	.content {
		float: left;
		margin: 0;
		padding: 0 5px 0 5px;
		width: 100%;
	}
	
	#content_card{
		width: 100%;
	}
	
    .fl {float:left !important; margin-right:0.5em;}
    .fr {float:right !important; margin-left:0.5em;}
    

/****************************************/
/** 화면 메인 타이틀 정의 ***************/
/****************************************/
#pagetit {
	width: 70%;
	overflow: hidden;
	height: 1.6em;
	line-height: 15px;
	text-align: center;
	margin-bottom: 0em;
	
    display:inline-block;
	position: absolute;
	top: 0.65em;
	left: 3.3em;
	z-index: 0;
}
	#pagetit a {
		color: #fff !important;
	}
	#pagetit a:hover {
		color: #61CBFF !important;
	}




    
	.movieBodyFrame {
    	width:100%;
	}
	.movieTrSearch {
	    padding-right:0em;
	}
    
    
    
    
    .midlist_outline.logStatics {
        width:100%;
    }
    
    
    .bottomFrame .photoSubItem .youtubeFrameVertical {
        position:relative;
        width:100%;
        height:500px;
        margin-bottom: 1.5em;
    }
    .photoSubItem .youtubeFrameVertical iframe
    , .photoSubItem .youtubeFrameVertical object
    , .photoSubItem .youtubeFrameVertical embed {
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    }
    
    
    
    
    
    .dealDesc {
        padding: 1.5em 0.5em 1.5em 1em;
    }
    
 
    .dealDesc img
   ,.dealDesc iframe
   ,.dealDesc video  {
        max-width:100%;
    }

.adsBottomBar720{
    width:100%;
    padding:0;
    text-align:center;
}
.isDesktop{
    display:none;
}

/***************************************/
/** 모바일용 contents 정의 *************/
/***************************************/
		input#menu:checked ~ #cssmenu {
			left: .5em;
		}
		
	/** content left/mid/right 정의 *****************/
	#content_left, #content_right {
		display: none;
	}
	#content_mid {
	    padding: 0;
		float: none;
		margin-top: 0.7em;
		width: 98%;
	}

    /** midlist_outline 간격조정 ****************/
	.list_header .sp01,
	.list_header .sp03 {
		width: 24%;
	}
	.list_header .sp02 {
		width: 52%;
		text-align: center;
	}

	/** 게시판 헤더영역 *****************/
	.midlist_outline {
		margin-bottom: 0.7em;
	}
	
	/*****************************/
    /** midlist_outline *****************/
    /*****************************/
    .midlist_outline {
        margin-bottom:0em;
    }
    .list05{
        margin-top:3em;
        width: 95%;
    }
    .login_header{
        margin-top:0em;
        width:350px;
    }
    

/***********/
/** STOCK **/
/***********/    
    .article_stock.stockChart .atcl_left {
        width:360px;
        float: left;
    }
    .article_stock.stockChart .atcl_mid {
        width:360px;
        float: left;
    }
	
	.article_stock .atcl_mid .stock_infoTop {
        width:360px;
	    padding: 0.2em 0.6em 0 0.6em;
    }
	.article_stock .atcl_mid .stock_infoTop div span {
	    width:38%;
	}
	.article_stock .atcl_mid .stock_infoTop div .tag {
	    width:23%;
	}
    .stock_infoBottom .stock_bot1 {
	    padding: 0.2em 0 0 0;
        width:85%;
    }
    .stock_infoBottom .stock_bot2 {
	    padding: 0.2em 0 0 0;
        width:15%;
	    text-align:right;
    }
    .article_stock .atcl_mid .stock_infoMid{
        
	    padding: 0.8em 0.4em 0 0.6em;
    }
    
    
    .article_stock .champVideoFrame{
        height:1000px;
        margin:5px 0px 0px 0px;
        padding: 0;
    }
    .article_stock.champFrame .atcl_left{
        width:350px;
    }
    
    .atcl_mid .champVideo{
        width:175px;
    }
    
    .atcl_mid .champClip{
        width:160px;
    }
    
    
    
    
    
    
/**************/
/** HOT DEAL **/
/**************/
    .article_deal .atcl_left {
        width: 30%;
    }
    .article_deal .atcl_mid {
        width: 70%;
        padding: 0.3em 0.5em 0 0.3em;
    }
    .article_deal .atcl_right {
        display: none;
    }
    .article_deal .toonThumb img {
        margin: 0.9em 0 0 0.3em;
    }
    .article_deal .atcl_mid .desc {
        padding: 0.2em 0 0 0 ;
        height: 3.8em;
    }
    .article_deal .desc img {
        margin: 0em 1.2em 0 0em;
        width: 4em;
        max-height: 3.8em;
    }
    
    
    .article_deal .atcl_mid .mobileBottom {
        margin: 0;
        padding: 0.2em 0 0 0;
        display: inline-block;
    }
    .article_deal .atcl_mid .mobileBottom span {
        display:inline-block;
        width:30%;
    }


/***************************/
/** BOARD MAIN VIEW ********/
/***************************/    
    #content_board {
		width: 98%;
    }
    
    .article_post .actl_leftFrame {
        text-align:center;
        padding: 0;
        width: 100%;
    }
    .actl_leftFrame .isDesktop{
        display:none;
    }
    .topFrame .actl_leftFrame  {
        height: 13em;
        vertical-align: middle;
    }
    .topFrame .actl_leftFrame img {
        max-height: 13em;
    }
    .article_post .actl_rightFrame {
        width: 100%;
    }
    .actl_rightFrame .headerSect .visitLink {
        display:inline-block;
        margin-left:1.5em;
    }
    
    
    .headerSect .headerSectTitle{
        width: 20%;
        text-align:left;
        padding-left:1em;
        padding: 1.15em 0 0.7em 1em ;
    }
    .topFrame .headerSect{
        min-height:3.2em;
        text-align:center;
        float: left;
    }
    .headerSect .boardTitle {
        text-align:left;
        height:auto;
        min-height:3.2em;
        width: 80%;
    }
    .boardTitle .boardTitleContent{
        margin-top:-4px;
        line-height:22px;
    }
    .headerSect .headerSectContent{
        display:inline-block;
        float:left;
        width: 49%;
        height: 3.2em;
    }
    .topFrame .headerSectMobile{
        display:inline-block;
        float:left;
        padding: 0em 0 0em 1em ;
        height: 3.2em;
        width: 100%;
    }
    .headerSect .headerSectContent {
        padding: 1.15em 0 0.7em 1em ;
        float: left;
    }
    .headerSectContent.nickContent{
        width: 138px;
    }
    .headerSectMobile .headerSectContRight.headerTime {
        float: right;
        margin-right: 0.95em;
    }
    .headerSect .headerSectContRight{
        display:none;
    }
    .headerSectMobile .headerSectContRight{
        padding: 1.15em 0 0.7em 0em ;
        margin-right:1em;
        height: 3.2em;
        float: left;
    }
    .topFrame .headerSect .isDesktop{
        display:none;
    }
    .topFrame .headerSect .isMobile{
        display:inline-block;
    }
    .isMobile{
        display:block;
    }
    
    
    .midFrame .actl_leftFrame {
        display: none;
    }
    .bottomFrame .actl_leftFrame {
        display: none;
    }
    .actl_rightFrame .dealSubItem {
        width: 11.5em;
        margin: 0.5em 0 0.3em 0.6em;
    }
    
    
	.actl_rightFrame .shareIcon {
        margin-right:0.5em;
    }
    
    .bottomFrame.zzalSubItem img {
        max-width:340px;
        max-height:340px;
    }
	
    .zzalSub{
        width: 27em;
        height: 27em;
    }
/**************/
/** ANALYSTIC */
/**************/
    .view_analysticRow.sect {
        display:inline-block;
        width: 100%;
    }	
	
	
	
/********************************/
/** POST LIST COMPONENT *********/
/********************************/
    .list01 .postRow .postMid{
        padding: 10px 0 0 0;
        line-height: 19px;
    }
    .list01 .postRow .no {
        padding: 10px 0 0 0;
        line-height: 19px;
    }
	.list01 .clipTitle {
		width: 90%;
		text-align: left;
	}	
	.no img {
	    margin: 0 0 0 0.2em; 
	}

	.list01 .postMid {
	    width: 79%;
	}
	.list01 .postMid .managerRead {
	    width: 86%;
	}
    .list01 .postTitle .no
   ,.list01 .postRow .no {
        display:none;
	}
	.list01 .postTitle .postWriter
   ,.list01 .postRow .postWriter {
		width: 11%;
	}
	.list01 .postRead {
		width: 10%;
	}
	.list01 .postTitle .postTime
   ,.list01 .postRow .postTime  {
	    display:none;
	}
	
/********************************/
/** POST LIST MOVIE COMPONENT ***/
/********************************/
	.list01 .postMovieRow .no{
	  padding-left:3px;
		width: 78px;
	  text-align: center;
		display:inline-block;
	  padding-left: 5px;
	}
	
	
    /********************/
    /** CHANNEL LAYOUT **/
    /********************/
    
    #content_channel {
    	float: left;
    	width: 360px;
    }
	.list01.channelDetail .postSub {
	    padding-top:0.3em;
	}
	.list01 .chnl_Right{
        width:11%;
        padding-top:0.4em;
    }
    .chnl_Right .chnl_rightBSub {
        width:100%;
        margin:0;
        padding-left:0.6em;
    }
	
	.hashTagRow .tit {
	    padding: 0.5em 0 0 1em;
	    width: 22%;
        border-right: 1px solid #D7D7D7;
	}
	
	
    .list08 {
        height:10em;
        width:350px;
        display:inline-block;
        margin-right: 0.5em;
        margin-bottom: 0.6em;
    }
	.list08 .magazine_tit{
	    height:3em;
	    background: #81adcf;
	    color:white;
	}
	
	.list01 .postRow li.tit {
		padding: 0.5em 0em 0.4em 0.7em;
		border-left: solid 0px #81adcf;
	}
	.list01 .postRow li.chkNo {
        padding: 0.65em 0em 0em 0.55em;
		text-align: center;
		border-left: solid 1px #DADDDF;
	}
		

    .article_deal .chnl_Right{
        display:none;
    }








/*********************************/
/** USER LOGIN INTERFACE *********/
/*********************************/
	.list05 {
	    width: 98%;
	}
	
/**********************************/
/** TRAVEL LIST CONTENT ***********/
/**********************************/
    #map {
        width: 100%;
        height:343px 
    }
    .articleTravel .atcl_left {
        width: 25%;
        float: left;
        display: inline-block;
        overflow:hidden;
    }
    .articleTravel .atcl_mid {
        width: 66%;
        float: center;
        padding: 0.3em 0 0 0.3em;
        display: inline-block;
        overflow:hidden;
    }
    .articleTravel .atcl_right {
        width: 8%;
        float: right;
        height: 100%;
        display: inline-block;
        overflow:hidden;
        text-align: center;
    }
    
    .tratThumb img {
        margin: 0.7em 0 0 0.3em;
        width: 80px;
        height: 80px;
    }

/********************/
/** COOK ************/
/********************/

    .article_toon .cookThumb img {
        margin: 0.7em 0 0 0.7em;
        height: 6em;
    	-moz-border-radius: 10px;
        border-radius: 10px;
    }
    
    .article_toon .cook_left {
        width: 39%;
        float: left;
        display: inline-block;
        overflow:hidden;
    }
    .article_toon .cook_mid {
        width: 61%;
        float: center;
        padding: 0.3em 0 0 0.3em;
        display: inline-block;
        overflow:hidden;
        height: 7em;
    }
    .article_toon .cook_right {
        display: none;
    }
/***********************************/
/** WEBTOON LIST CONTENT ***********/
/***********************************/
    .list_header.toonClassify{
        height:10.8em;
        text-align:center;
    }
    .toonClassifySub{
        float:right;
        width:100%;
    }
    .article_toon .atcl_rightB {
        display:none;
    }
    .article_toon .atcl_rightB.toonDetail {
        display:inline-block;
    }
    
    
    .article_toon .atcl_left {
        width: 25%;
    }
    .article_toon .atcl_mid {
        width: 61%;
        padding: 0.3em 0 0.4em 0.4em;
    }
    .article_toon .atcl_right {
        width: 14%;
        padding: 0.05em 0 0 0.25em;
        text-align:center;
    }
    .article_toon .atcl_rightBSub4{
        display:none;
    }
    .article_toon .atcl_rightBSub5{
        display:inline-block;
        width:100%;
        margin:0.1em 0em 0em 0.1em;
    }
    .article_toon .atcl_rightBSub6{
        display:inline-block;
        width:100%;
        margin:0;
    }
    .article_toon .toonThumb img {
        margin: 0.7em 0 0 0.3em;
        width: 80px;
        height: 80px;
    	-moz-border-radius: 13px;
        border-radius: 13px;
    }


    .article_toon .atcl_left.toonDetail {
        width: 42%;
    }
    .article_toon .atcl_mid.toonDetail {
        width: 47%;
    }
    .article_toon .atcl_right.toonDetail {
        width: 10%;
        padding: 0.3em 1em 0 0em;
    }
    .article_toon .toonDetail .atcl_rightBSub6{
    }
    .article_toon .toonThumbDetail img {
        margin: 0.7em 0 0 0.4em;
        width: 134px; 
        height: 80px;
    	-moz-border-radius: 13px;
        border-radius: 13px;
    }




	
/***********/
/** REPLY **/
/***********/
	.comment_item{
	    padding: 0.8em;
	}
	.cmt_view dd.name {
		width: 23%;
	}
	.cmt_view dd.replyText {
		width: 60%;
		min-height: 5em;
	}
	.cmt_view dd.timeInfo {
		width: 17%;
		text-align: right;
	}
	.cmt_view dd.timeInfo .time {
		height: 4em;
	}
	
	.cmt_write {
	    padding: 0.8em;
	}
	.cmt_write .cmt_mobile{
	    display:block;
	    width:5%;
		height: 2.5em;
	}
	.cmt_write dd.name{
		width: 90%;
	}
	.cmt_write dd.replyText{
		width: 75%;
	}
	.cmt_write dd.comment_btn{
		width: 25%;
	}
	
	
	
	    
    /*********************/
    /** OVERLAY LAYOUT ***/
    /*********************/		
    .layer_popup.on .wrap {
      width: 100%;
      margin: 7.6em auto;
      padding: 1em;
    }
    .layer_popup.on .wrap .img img{
      max-width: 100%;
      height: auto;
      margin-bottom: 1em;
    }
    .layer_popup.on .btn_area {
      margin: 1em auto 0;
    }
    .layer_popup.on .btn_area .arrow {
      padding-top: 0em;
    }
    .layer_popup.on .btn_area .close img {
      width:20px;
    }
    
    
}
/* 모바일용 스타일 end */