@charset "utf-8";
/* CSS Document */
.guide-area .guide-list { width: 1180px; margin: 0 auto; }
.guide-area .guide-list>ul.row { margin-bottom: 50px; }
.guide-area .guide-list>ul>li { float: left; width: 23.5%; margin-right: 2%; }
.guide-area .guide-list>ul>li:nth-child(4n) { margin-right: 0; }
.guide-area .guide-list>ul>li .thumb-area { height: 160px; background: #f8f8f8; display: block; position: relative; margin-bottom: 15px; position: relative; overflow: hidden; }
.guide-area .guide-list>ul>li .thumb-area .time { background: rgba(0,0,0,0.8); display: inline-block; font-size: 1.2rem; color: #fff; letter-spacing: 0; font-weight: 100; padding: 1px 5px; bottom: 10px; right: 10px; position: absolute; z-index: 2; }

.guide-area .guide-list>ul>li .thumb-area .thumb { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); width: 100%; height: 100%; z-index: 1; }
.guide-area .guide-list>ul>li .thumb-area .thumb img { position: absolute; top: 0; left: 0; height: 100%; -webkit-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1,1,1) rotate3d(0,0,0,0.01deg); z-index: 1; transition: transform 0.3s ease-in-out; }
.guide-area .guide-list>ul>li .thumb-area:hover .thumb img {  -webkit-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); -ms-transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); transform: translate(-50%,-50%) scale3d(1.05,1.05,1) rotate3d(0,0,0,0.01deg); }

.guide-area .guide-list>ul>li .thumb-area .play-ico { z-index: 2; position: absolute; background: rgba(255,255,255,0.9); width: 24px; height: 24px; left: 10px; bottom: 10px; border-radius: 50%; text-align: center; padding: 7px 0 7px 2px; }
.guide-area .guide-list>ul>li .thumb-area .play-ico span { display: block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #001AD9; display: inline-block; }

.guide-area .guide-list>ul>li .text-area .subject { font-size: 1.3rem; color: #999; font-weight: 300; display: block; cursor: default; margin-bottom: 3px; }
.guide-area .guide-list>ul>li .text-area .guide-title { font-size: 2rem; font-weight: 500; }
.guide-area .guide-list>ul>li .text-area .guide-title a { transition: color .25s ease; word-break: break-all; display: block; line-height: 25px; height: 50px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
.guide-area .guide-list>ul>li .text-area .guide-title:hover a { color: #001AD9; }
.guide-area .guide-list>ul>li .text-area .hashtag { margin-top: 10px; }
.guide-area .guide-list>ul>li .text-area .hashtag a { font-size: 1.35rem; color: #999; font-weight: 300; margin-right: 5px; background: #f8f8f8; padding: 3px 8px; border-radius: 4px; transition: background .25s ease,color .25s ease; margin-bottom: 4px; display: inline-block;}
.guide-area .guide-list>ul>li .text-area .hashtag a:last-child { margin-right: 0; }
.guide-area .guide-list>ul>li .text-area .hashtag a:hover { color: #222; background: #ECECEC; }

.guide-area .guide-list .no-result-messege { text-align: center; padding: 80px 0; }
.guide-area .guide-list .no-result-messege h3 { font-size: 2.8rem; color: #999; display: block; margin-bottom: 40px; font-weight: 400; }
.guide-area .guide-list .no-result-messege .hashtag a { display: inline-block; background: #f8f8f8; padding: 5px 12px; font-size: 1.6rem; font-weight: 300; border-radius: 4px; transition: background .25s ease,color .25s ease; margin-right: 5px; }
.guide-area .guide-list .no-result-messege .hashtag a:last-child { margin-right: 0; }
.guide-area .guide-list .no-result-messege .hashtag a:hover { color: #222; background: #ECECEC; }

@media all and (max-width: 1279px)
{
	.guide-area .guide-list { width: 100%; padding: 0 30px; }
}
@media all and (max-width: 1039px)
{
	.guide-area .guide-list>ul>li { width: 31.3333%; margin-right: 3%; }
	.guide-area .guide-list>ul>li:nth-child(4n) { margin-right: 3%; }
	.guide-area .guide-list>ul>li:nth-child(3n) { margin-right: 0; }
}
@media all and (max-width: 639px)
{
	.guide-area .guide-list>ul>li { width: 48%; }
	.guide-area .guide-list>ul>li:nth-child(2n) { margin-right: 0; }
	.guide-area .guide-list>ul>li:nth-child(2n-1) { margin-right:  4%; }
	
	.guide-area .guide-list>ul>li .text-area .guide-title a { height: 44px; line-height: 22px; }
}
@media all and (max-width: 499px)
{
	.guide-area .guide-list>ul>li { margin-bottom: 40px; }
	.guide-area .guide-list>ul>li .thumb-area { height: 120px; }
}

.guide-area .guide-detail { margin-bottom: 80px; padding-bottom: 40px; border-bottom: 1px solid #dee3eb; position: relative; }
.guide-area .guide-detail .video-area { float: left; width: 60%; height: 420px; }
.guide-area .guide-detail .text-area { float: right; width: 37%; height: 100%; padding-bottom: 50px; padding-top: 10px; }
.guide-area .guide-detail.post .text-area { width: 100%; }
.guide-area .guide-detail.post .bg { height: 150px; overflow: hidden; margin-bottom: 30px; }
.guide-area .guide-detail.post .bg>div { height: 100%; transform: scale(1.1); filter: blur(5px); }
.guide-area .guide-detail .text-area .subject { font-size: 1.5rem; color: #999; display: block; cursor: default; margin-bottom: 5px; }
.guide-area .guide-detail .text-area .guide-title { font-size: 2.8rem; font-weight: 700; line-height: 35px; }
.guide-area .guide-detail .text-area .hashtag { margin-top: 25px; }
.guide-area .guide-detail .text-area .hashtag a { font-size: 1.5rem; font-weight: 300; margin-right: 10px; background: #f8f8f8; padding: 3px 8px; border-radius: 4px; transition: background .25s ease,color .25s ease; color: #999; }
.guide-area .guide-detail .text-area .hashtag a:last-child { margin-right: 0; }
.guide-area .guide-detail .text-area .hashtag a:hover { color: #222; background: #ECECEC; }
.guide-area .guide-detail .text-area .exp-area { margin-top: 30px; font-size: 1.5rem; color: #666; font-weight: 300; }
.guide-area .guide-detail .text-area .exp-area p { line-height: 21px; }
.guide-area .guide-detail .text-area .exp-area p .step-label { background: #666; color: #fff; font-size: 1.1rem; letter-spacing: 0; font-weight: 400; padding: 2px 10px; border-radius: 30px; line-height: 21px; margin-right: 5px; }
.guide-area .guide-detail .text-area .exp-area img { max-width: 100%; margin: 10px 0; }

@media all and (max-width: 1039px)
{
	.guide-area .guide-detail { padding-bottom: 0; margin-bottom: 30px; }
	.guide-area .guide-detail .video-area { width: 100%; height: auto; padding-bottom: 56.25%; position: relative; }
	.guide-area .guide-detail .video-area iframe { position: absolute; width: 100%; height: 100%; }
	.guide-area .guide-detail .text-area { width: 100%; padding-top: 30px; padding-bottom: 30px; }
	.guide-area .guide-detail .text-area .hashtag { margin-top: 15px; }
}
@media all and (max-width: 639px)
{
	.guide-area .guide-detail .text-area { padding-top: 20px; }
	.guide-area .guide-detail .text-area .subject { margin-bottom: 0; }
}

.guide-step { position: relative; margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid #dee3eb; }
.guide-step .step-box { margin-bottom: 80px; }
.guide-step .step-box:last-child { margin-bottom: 0; }
.guide-step .step-box .title-area h1 { font-size: 2rem; font-weight: 600; margin-bottom: 20px; }
.guide-step .step-box .title-area h1 span { display: inline-block; position: relative; top: -2px; margin-right: 10px;}
.guide-step .step-box .title-area h1 span:after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 2px; background: #000; }
.guide-step .step-box .img-area img { max-width: 100%; height: auto; }