@charset "utf-8";

/*
 * File       : modules/event/style.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) JT NEWSFEED LIST
 * 2) RWD
 */



/* **************************************** *
 * JT NEWSFEED LIST
 * **************************************** */
.jt-event-list {display: table;width: 100%;table-layout: fixed;}
.jt-event-list__item {display: table-row;cursor: pointer;}
.jt-event-list__item > div {display: table-cell;vertical-align: middle;border-bottom: 1px solid #ddd;-webkit-transition: border 300ms;transition: border 300ms;}
.jt-event-list__item:first-child > div {border-top: 1px solid #ddd;}

div.jt-event-list__time {width: 182px;padding-top: 33px;vertical-align: top;}

.jt-event-list__title {padding: 34px 24px 36px;font-size: 0;overflow: hidden;white-space: nowrap;display:block;}
.jt-event-list__symbol {display: inline-block;vertical-align: middle;width: 60px;height: 30px;margin-right: 35px;font-size: 14px;font-weight:500;line-height: 29px;text-align: center;letter-spacing: -0.05em;color:#fff;}
.jt-event-list__item--ing .jt-event-list__symbol { background:#636a52;}
.jt-event-list__item--end .jt-event-list__symbol {background:#aaa;}
.jt-event-list__title h2 {max-width: 100%;width: calc(100% - 276px); margin-right:20px; padding-bottom:1px; display: inline-block;vertical-align: middle;font-size: 18px;font-weight: 500;line-height: 1.5;color: #111;}
.jt-event-list__title h2 span {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal; letter-spacing:-0.01em;}
.jt-event-list__time { text-align: right; font-size: 14px; font-weight:400; line-height: 1; color: #666; vertical-align: middle;}
.jt-event-list__item--end .jt-event-list__time  {color:#aaa;}
html.ios .jt-event-list__title h2 {padding-top: 2px;}

div.jt-event-list__more {width: 60px;text-align: right;}
.jt-event-list__more a {display: inline-block;vertical-align: middle;width: 47px;height: 47px;position: relative;font-size: 0;border: 1px solid #aaa;border-radius: 50%;-webkit-transition: border-color 300ms, -webkit-transform 300ms;transition: border-color 300ms, -webkit-transform 300ms;transition: border-color 300ms, transform 300ms;transition: border-color 300ms, transform 300ms, -webkit-transform 300ms;}
.jt-event-list__more a:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';content: '\e942';font-size: 16px;font-weight: normal;line-height: 45px;text-align: center;text-indent: 2px;color: #aaa;-webkit-transition: color 300ms;transition: color 300ms;}


/* **************************************** *
 * RWD
 * **************************************** */
@media (max-width: 1200px){
    .jt_event_list_wrap {margin-top:30px;}
}


@media (max-width: 1023px){

    .jt-event-list__symbol {margin-right:20px;font-size:13px;}
	.jt-event-list__title {padding: 29px 20px 31px;}
	.jt-event-list__title h2 {font-size:17px;}

}

@media (max-width: 768px){

    .jt-event-list__symbol {font-size:12px; width:55px; height: 26px; line-height:25px;}
	.jt-event-list__title {padding: 20px 0 22px;position: relative;}
	.jt-event-list__title h2 {font-size:16px;width: 100%;display: block;margin-top: 10px;}
	.jt-event-list__time {font-size:13px;position: absolute;top: 25px;left: 70px;}
	html.ios .jt-event-list__time {top:26px;}

}

@media (max-width: 540px){
    .jt-event-list__symbol { width:50px; height: 23px; line-height:23px;}
	.jt-event-list__title h2 {font-size:15px;}
	.jt-event-list__time  {top:24px;left:63px;}

	html.android .jt-event-list__symbol {line-height:22px;}

}