@charset "utf-8";
/* CSS Document */

header{background:#fff;}
header a{vertical-align: middle;}
header h1{float:left; font-size: 0; }
/* 두개의 a inline-block 공간발생  */
header h1 a{display:inline-block; padding: 0 0 0 8px; line-height: 50px; font-size: 17px; color:#0066b3; }

header > div{float:right; padding: 10px 12px 0 0;}
/* 가로 사이즈 필요 없음 , block 하면 옆에 text 다 떨어짐  */
header .creator{display: inline-block; height:22px; border: 1px solid #0066b3; border-radius: 22px; font-size: 12px; color:#0066b3; vertical-align: middle;  }
header .search{display:inline-block; background: url("../img/btn_search_blue_pc.png")no-repeat center; width:30px; height:30px;}  
/* xi-search  header .search{display:inline-block; width:50px; height:50px; background-image: #fff; } */ 

header nav{padding:0 10px;background: #fff; border-bottom: 1px solid #e2e2e2;}

header ul{display:flex; justify-content: space-between;}
/* header ul{text-align:justify; text-align-last: justify;}  */

/* 양쪽 가운데 정렬    */
header ul li{position:relative;  display:inline-block;/* padding: 0 0 0 15px; width:80px;height:100%;box-sizing: border-box; */ }
header ul li a{ display:block;width:80px; height:35px; color:#0066b3; font-size: 13.5px;line-height: 35px; text-align: center;  }
header ul li a:after{content:""; position:absolute; left:50% ; bottom:-1px; width:0%; height:2px; background: #00c32c; font-weight: bold; transition:all 0.5s; }
header ul li:hover a:after{left:0%; width:100%; }
header ul li:hover a{color:#00c32c;}



.slide{padding:12.5px;}   /* slide 사진  */
.slide img{width:100%} /* 디바이스내 가로 크기 채우기 max-width: 500px;조절  */
.slide .control{ text-align: center; }

.main .more{display:block;  border-top:1px solid #e6ede3;border-bottom:1px solid #e6ede3; background:  #f5fbf4;}  /* block은 가로 세로 100%  */
.main .more > div{position:relative; width:235px; padding:12.5px 44px 12.5px 44px; margin:0 auto;font-size: 10px;}
.main .more > div:before{content:"";position:absolute; left:0; top:50%; width:35px; height:35px; background: url("../img/bg_logo_03.png")no-repeat #0066b3 border-radius: 35px; transform: translateY(-50%);}
/* / 15px auto 이미지 사이즈 의미 */
.main .more > div span{display:block; font-weight: bold; font-size: 12px; color:#000;}
.main .more > div span em{color:#27cf58; }

.main .my_cafe{padding:26px 12.5px; }
.main .my_cafe h2 a{display:block; padding: 0 0 10px; font-size: 15px; font-weight: bold; color:#000; border-bottom:1px solid #000;}

.main .my_cafe h2 a:after{content:"";display:inline-block; margin: 0 0 0 7px; width:7.5px; height:12.5px; }
/*   bg 100% 가로사이즈 7.5px 꽉찬다  auto는 가로사이즈에 비례해서 세로 크기 움직인다 */
.main .my_cafe h2 .xi-angle-right{margin-left: 6px;}

.main .my_cafe > div{display:table; width:100%; height:161.5px;}
/* table 가로는 100%    */
.main .my_cafe > div > div{display:table-cell; text-align:center;vertical-align: middle;}
/* 가로 세로 가운데 배치하기   */

.main .my_cafe > div > div span{display:block; padding: 0 0 20px; font-size:12px; color:#575757; }
.main .my_cafe > div > div a{display:inline-block; width:145px; line-height:37.5px; background:#0066b3;font-size: 12px; font-weight: bold; color:#fff; text-align: center;}
/* d: block경우 아래로 떨어져 가운데 안됨, inline-block 해야함  */



.cafe_list{padding:0 0 0 12px;}  /* ul  */
.cafe_list li{border-bottom: 1px solid #ececec;}
.cafe_list li a{display:block; position:relative; padding:10px 95px 10px 0; min-height:47px;} /* 10+47=57 45 + 50=95 이미지크기만킄 패딩 더줘야 글자 안파뭍친다, 아래여백 주어 글자 많아줘도여백 min-height:47px  */
.cafe_list li a .reply{position:absolute; right:0; top:0; padding : 30px 0 0; width:39px; height:100%; background:#fafafa; box-sizing:border-box;text-align: center; } 
/* 0올리기, 패딩을 30px 주고 top 13px 위치에 0 */
.cafe_list li a .reply em {position:absolute; left:0; top:13px ; width:100%;   font-size:12px;  color:#lelele; text-align: center; }  /* p-abs 되면 가로 사이즈 없어짐 -> width:100%   */       
.cafe_list li a .reply span{font-size:8px; color:#757575;}
.cafe_list li:first-child{text-align: center;}
.cafe_list li a .new{position:absolute; left:-6px; top:10px; overflow: hidden; width:3.5px; height:3.5px; background: #da605f; border-radius: 100%; font-size: 0;  }
/* overflow: hidden font-s:0 새글 안보이게  */
.cafe_list li a .sell{padding: 0 8px 0 0;font-size: 12px; color:#cc8033;}
.cafe_list li a p{font-size: 12px;}
.cafe_list li a .info > div{display:inline;padding:0 7px 0 0; font-size: 10px; color:#998099;}
.cafe_list li a .info > div span { position: absolute; left:-3000px; width:1px; height:1px; overflow: hidden;}
.cafe_list li a .info > div.view:before  {content:""; display:inline-block; margin:0 2px 0 0;  width:12px; height:12px; background: url("../img/atcmp_spat_v7.png") no-repeat -1px -64px ; vertical-align: -2px; }
/*  before는 inline 요소 이미지는 사이즈 넣어야함. sp 이미지는 before/after사용해야함.  */
.cafe_list li a > img{position:absolute; right:46px; top:50%; width:44px;height:44px; transform: translateY(-50%);
		transform:scale(1);	transition: all 0.5s;}  /*  44px 주고 이미지가 크면 a요소 자체 높이 57ㅔpx를 주어 맞춘다 */
.cafe_list li:hover a > img{transform: scale(1.5);}

.cafe_list li.notice{position: relative ; display:table;width:100%; background: #f9fdfc;  }
.cafe_list li.notice a{display: table-cell; padding:0 25px 0 0; vertical-align: middle; font-size: 14px;  color:#33aa66;}
.cafe_list li.notice:before{content:""; position:absolute; left:-12px; top:0;width:23px; height:100%; background: #fafafa;  border-bottom: 1px solid #ececec;	}
/* ul 에 패딩준부분 bg 안들어가 before로 만들어 넣기  */


.main .btn_box{display: flex; align-items: center; justify-content: center;height:73.5px ; background: #fafafa; border-top:1px solid #eee;}
/* flex의 가운데 정렬 기능     */

.main .btn_main{display: inline-block;height: 34.5px; padding: 0 12px 0 0; line-height:34.5px; border:1px solid #009700; background:#00c73c;

font-size: 12px; color:#fff;}
.main .btn_main em{color:#fff331;}

.main .btn_main:before{content:""; display:inline-block; margin:0 12px 0 0; width:34.5px; height:34.5px; background: url("../img/ico_naver_05.GIF")no-repeat center / 16.5px auto ; border-right:1px solid #009700; vertical-align: middle; }

footer{padding:18.5px 0 20px; border-top: 1px solid #eee; background: #fafafa; text-align: center;}
footer .top{display:block; font-size: 10px; color:#2f2f2f;}
 /* footer .top:before{content:""; display:inline-block; width:16.5px; height:15px; background: url()no-repeat center / 165px auto;verticle:-3px;}   */
footer div{padding:23.5px 0 8px; font-size: 0;} /* 아래 inline-block하면 nbsp생김 */
footer div a{display:inline-block; padding :0 8.5px; margin: 0 1.25px; height:22.5px; border:1px solid #b3b3b3; line-height: 22.5px; font-size:8px; color:#4e4e4e;}

footer p{padding:0 0 7.5px;}
footer p a{position:relative; display:inline-block;margin :0 6px; line-height: 17px; font-size: 10px; color:#9e9e9e;}
footer p a:before{content:""; position:absolute; left:-6px;top:50%; width:1px; height:8.5px;
background: #eee; transform: translateY(-50%);}
footer p a:first-child:before{background: none;}