/* 고객 탐방 이야기 */
.story-modal-content{position:relative; width:96%; max-width:1200px; margin:20px auto; background-color: #fff;}
.story-modal-top{width: 100%; padding: 23px 75px 23px 35px; -webkit-box-sizing: border-box; box-sizing: border-box;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007df0+0,002d95+100 */
background: #007df0; /* Old browsers */
background: -moz-linear-gradient(left,  #007df0 0%, #002d95 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #007df0 0%,#002d95 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #007df0 0%,#002d95 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007df0', endColorstr='#002d95',GradientType=1 ); /* IE6-9 */}
.story-modal-top .category,
.story-modal-top .tit{font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}
.story-modal-top .category{margin-right: 20px; display: inline-block; vertical-align: middle; opacity: 0.7;}
.story-modal-top .tit{display: inline-block; vertical-align: middle;}
.story-modal-top .close-btn{position: absolute; top: 15px; right: 25px; font-size: 24px; line-height: 40px; color: #fff;}
/* 팝업 - 고객 탐방 이야기 스타일 추가
**팝업 순서에 따라 홀수센터-이미지 왼쪽 시작 / 짝수 - 이미지 오른쪽 시작**
1. 홀수 : 이미지 왼쪽 시작(기본) class="story-modal-bottom"
2. 짝수2 : 이미지 오른쪽 시작 class="story-modal-bottom2"
3. 센터정렬3 : 이미지 가운데 width=760px 텍스트 가운데 : .story-modal-txt3 .story-modal-img3
3. 이미지없음4 : 이미지 가운데 width=100% : .story-modal-txt4 
그외 
4. 이미지 세로형 width=280px(기본) : .story-modal-txt  .story-modal-img
5. 이미지 가로형 width=373px(추가) : .story-modal-txt2  .story-modal-img2
*/
.story-modal-bottom,
.story-modal-bottom2{padding: 45px 35px;}
.story-modal-item{display: flex; flex-wrap: wrap;}
.story-modal-bottom .story-modal-item:nth-child(even){flex-direction: row-reverse;}
.story-modal-bottom2 .story-modal-item:nth-child(odd){flex-direction: row-reverse;} 
.story-modal-item + .story-modal-item{margin-top: 50px;}
.story-modal-img{width: 30%; padding-right: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left;}
.story-modal-img2{width: 38%; padding-right: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left;}
.story-modal-img2 span{display: inline-block; max-width: 373px; width: 100%;}
.story-modal-img2 span img{width: 100%; height: auto;}
.story-modal-img3{width: 68%; padding-right: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center;margin:0 auto 15px auto;} /* 이미지 사이즈 760~768사이 */
.story-modal-img3 span{display: inline-block; max-width: 760px; width: 100%;}
.story-modal-img3 span img{width: 100%; height: auto;}
.story-modal-bottom .story-modal-item:nth-child(even) .story-modal-img,
.story-modal-bottom .story-modal-item:nth-child(even) .story-modal-img2{padding-right: 0; padding-left: 20px; text-align: right;}
.story-modal-bottom2 .story-modal-item:nth-child(odd) .story-modal-img,
.story-modal-bottom2 .story-modal-item:nth-child(odd) .story-modal-img2{padding-right: 0; padding-left: 20px; text-align: right;}
.story-modal-img span{display: inline-block; max-width: 280px; width: 100%;}
.story-modal-img span img{width: 100%; height: auto;}
.story-modal-txt{width: 70%;}
.story-modal-txt2{width: 62%;}
.story-modal-txt3{width: 68%;margin:0 auto;}
.story-modal-txt4{width: 100%;margin:0 auto;}

.story-question-group{}
.story-question-group + .story-question-group{margin-top: 35px;}
.story-question-group .tit{position: relative; padding-left: 20px; font-size: 18px; line-height: 1.6; font-weight: 500; color: #000; letter-spacing: -0.5px;}
.story-question-group .tit span{position: absolute; top: 0; left: 0; display: inline-block;}
.story-question-group .sub-tit{margin-top: 20px; font-size: 20px; line-height: 1.5; font-weight: 500; color: #005ac9; letter-spacing: -0.5px;}
.story-question-group .txt{margin-top: 15px; font-size: 16px; line-height: 1.7; color: #666; letter-spacing: -0.5px;font-weight:300;}

@media all and (max-width:800px){
	.story-modal-content{width:auto; margin:50px 15px;}
	.story-modal-top{padding: 15px 45px 15px 20px;}
	.story-modal-top .category,
	.story-modal-top .tit{font-size: 15px; line-height: 20px;}
	.story-modal-top .category{margin-right: 10px;}
	.story-modal-top .close-btn{top: 10px; right: 15px; font-size: 20px; line-height: 30px;}
	.story-modal-bottom,
	.story-modal-bottom2{padding: 25px 20px;}
	.story-modal-item + .story-modal-item{margin-top: 30px;}
	.story-modal-img,
	.story-modal-img2,
	.story-modal-img3{width: 100%; padding-right: 0; text-align: center; margin-bottom: 15px;}
	.story-modal-img span,
	.story-modal-img2 span{max-width: 200px;}
	.story-modal-img3 span{max-width: 500px;}
	.story-modal-bottom .story-modal-item:nth-child(even) .story-modal-img{padding-left: 0; text-align: center;}
	.story-modal-bottom2 .story-modal-item:nth-child(odd) .story-modal-img{padding-left: 0; text-align: center;}
	.story-modal-txt,
	.story-modal-txt2,
	.story-modal-txt3{width: 100%;}
	.story-question-group + .story-question-group{margin-top: 20px;}
	.story-question-group .tit{padding-left: 10px; font-size: 14px;}
	.story-question-group .sub-tit{margin-top: 7px; font-size: 15px;}
	.story-question-group .txt{margin-top: 5px; font-size: 13px;}
}