@charset "utf-8";

/*
 * File       : sub_world_adventure.css
 * Author     : STUDIO-JT (KMS, Hee)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 * Dependency : css/jt_strap.css
 *
 * SUMMARY:
 * 01) SERIES
 * 02) CHARACTER
 * 03) THEMA
 * 04) VIDEO
 */



/* **************************************** *
 * SERIES
 * **************************************** */
.series_list_wrap {padding-top: 35px; position: relative;}
/* .series_list_wrap:before {content:''; display: block; width: 100%; height: 5px; position: absolute; top: 0; left: 0; border-radius: 25px; overflow: hidden; background-color: #f07e23} CSS 삭제 */
/* CSS 추가 시작 */
.series_list_wrap:before {content:''; display: block; width: 100%; height: 5px; position: absolute; top: 0; left: 0; border-radius: 25px; overflow: hidden; background-color: #000;}
/* CSS 추가 끝 */
.series_list {margin-left: -18px; margin-right: -18px; font-size: 0; margin-bottom: -20px;}
.series_item {display: inline-block;vertical-align: top;padding: 20px 18px;width: 50%;overflow: hidden;}
.series_item_inner {position: relative;height: 100%;border: solid #ddd;border-width: 0 1px;padding-bottom: 69px;}
.series_item figure {margin: 0 -1px;border-radius: 4px 4px 0 0;overflow: hidden;}
.series_item figure img {max-width: 100%;}
.series_content {padding: 31px 38px 38px;}
.series_title {font-size: 0;}
.series_title > span {display: inline-block;vertical-align: baseline;margin-right: 11px;font-size: 24px;letter-spacing: -0.01em;color: #222;}
/* .series_title > h2 {display: inline-block;vertical-align: initial;font-size: 14px;letter-spacing: -0.05em;color: #23b9ce;} CSS 삭제 */
/* CSS 추가 시작 */
.series_title > h2 {display: inline-block;vertical-align: initial;font-size: 14px;letter-spacing: -0.05em;color: #a7a7a7;}
/* CSS 추가 끝 */
.series_meta {font-size: 0;margin-top: 8px;}
/* .series_meta > * { display: inline-block; font-size: 13px; letter-spacing: -0.01em; line-height: 1.4; vertical-align: top; } CSS 삭제 */
/* CSS 추가 시작 */
.series_meta > * { display: inline-block; font-size: 13px; letter-spacing: -0.01em; line-height: 1.4; vertical-align: top; transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
/* CSS 추가 끝 */
.series_meta b { position: relative; color: #222; font-weight: 600; margin-right: 24px; }
.series_meta b:after { content: ''; display: block; width: 1px; height: 11px; background: #ddd; position: absolute; top: 50%; right: -14px; margin-top: -5.5px; }
.series_meta p { color: #666; }
/* .series_desc {margin-top: 29px;padding-top: 26px;font-size: 15px;line-height: 1.8;letter-spacing: -0.025em;color: #666;border-top: 1px solid #ddd;} CSS 삭제 */
/* CSS 추가 시작 */
.series_desc {margin-top: 29px;padding-top: 26px;font-size: 15px;line-height: 1.8;letter-spacing: -0.025em;color: #666;border-top: 1px solid #ddd;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
/* CSS 추가 끝 */

/* .series_btn_link {display: block;font-size: 18px;background: #1ec700;text-align: center;color: #fff;letter-spacing: -0.025em;padding: 21px 0;border-radius: 0 0 4px 4px;overflow: hidden;position: absolute;left: -1px;right: -1px;bottom: 0;} CSS 삭제 */
/* CSS 추가 시작 */
.series_btn_link {display: block;font-size: 18px;background: #1ec700;text-align: center;color: #fff;letter-spacing: -0.025em;padding: 23px 0 19px;border-radius: 0 0 4px 4px;overflow: hidden;position: absolute;left: -1px;right: -1px;bottom: 0;}
/* CSS 추가 끝 */
.series_btn_link_inner {display: inline-block;position: relative;}
.series_btn_link i {position: relative;display: inline-block;vertical-align: middle;font-size: 0;font-style: normal;margin-right: 41px;width: 20px;height: 20px;line-height: 20px;} 
/* .series_btn_link i:after {content: '\e931'; font-family: 'jt_font'; font-size: 24px; position: absolute; top: -2px; left: 0;} CSS 삭제 */
/* CSS 추가 시작 */
.series_btn_link i:after {content: '\e931'; font-family: 'jt_font'; font-size: 24px; position: absolute; top: 0px; left: 0;}
/* CSS 추가 끝 */
.series_btn_link span {display: inline-block;position: relative;padding-right: 26px;}
/* .series_btn_link span:before {content: '';display: block;width: 1px;height: 18px;background: rgba(255, 255, 255, 0.5);position: absolute;top: 6px;left: -18px;} CSS 삭제 */
/* CSS 추가 시작 */
.series_btn_link span:before {content: '';display: block;width: 1px;height: 18px;background: rgba(255, 255, 255, 0.5);position: absolute;top: 0px;left: -18px;}
/* CSS 추가 끝 */
.series_item.series_coming_soon .series_btn_link {background: #aaa; cursor: auto;}

/* .series_btn_arrow { font-size: 0;display: block;position: absolute;width: 20px;height: 20px;top: 4px;right: -3px;text-align: center;line-height: 20px;} CSS 삭제 */
/* CSS 추가 시작 */
.series_btn_arrow { font-size: 0;display: block;position: absolute;width: 20px;height: 20px;top: -1px;right: -3px;text-align: center;line-height: 20px;}
/* CSS 추가 끝 */
.series_btn_arrow:before { content: '\e903'; font-family: 'jt_font'; font-size: 20px; line-height: 20px; }
.series_btn_arrow.after { opacity: 0; -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px);}

html.desktop .series_btn_link:hover .series_btn_arrow.before {opacity: 0;-webkit-transform: translateX(5px);-ms-transform: translateX(5px);transform: translateX(5px);-webkit-transition: all .2s cubic-bezier(0.47, 0, 0.75, 0.72) 0s;transition: all .2s cubic-bezier(0.47, 0, 0.75, 0.72) 0s;}
html.desktop .series_btn_link:hover .series_btn_arrow.after {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);-webkit-transition: all .3s cubic-bezier(0, 0, 0.2, 1) .3s;transition: all .3s cubic-bezier(0, 0, 0.2, 1) .3s;}



 /* **************************************** *
 * CHARACTER
 * **************************************** */
.body_character .main_container {padding-bottom: 0;}
.character_slideshow_wrap {padding-top: 55px; padding-bottom: 119px; position: relative;}
/* .character_slideshow_wrap:before {content:''; display: block; width: 100%; height: 5px; position: absolute;top: 0; left: 0; border-radius: 25px; overflow: hidden; background-color: #f07e23} CSS 삭제 */
/* CSS 추가 시작 */
.character_slideshow_wrap:before {content:''; display: block; width: 100%; height: 5px; position: absolute;top: 0; left: 0; border-radius: 25px; overflow: hidden; background-color: #000;}
/* CSS 추가 끝 */
.character_slider_item { position: relative; text-align: center; display: none; }
.character_slider_item:first-child {display: block;}
.slick-initialized .character_slider_item, .slick-initialized .character_slider_item:first-child {display: block;}
.swiper-initialized .character_slider_item, .swiper-initialized .character_slider_item:first-child {display: block;}
.character_slider_item h2 {width: 100%; font-size: 85px; line-height: 1.17; letter-spacing: 0.1em; background: #ffd618; text-align: center; border-radius: 13px; height: 332px; position: relative;word-break: keep-all;}
.character_slider_item h2 span { position: absolute; left: 50%; top: 40%;color: #fff; opacity: 0; padding-top: 10px; z-index: 10; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all 800ms ease-out; transition: all 800ms ease-out;}
.character_slider_item figure { position: absolute; top: 34px; left: 50%; z-index: 10; margin-left: -188.5px;}
.character_slider_item figure img { max-width: 100%; }
.character_slider_item_content {margin-top: 114px;}
.character_slider_item_content h3 { font-size: 30px; color: #222; letter-spacing: -0.025em; }
/* .character_slider_item_content p { font-size: 16px; line-height: 1.75; letter-spacing: -0.025em; color: #666; margin-top: 13px; } CSS 삭제 */
/* CSS 추가 시작 */
.character_slider_item_content p { font-size: 16px; line-height: 1.75; letter-spacing: -0.025em; color: #666; margin-top: 13px; transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg); }
/* CSS 추가 끝 */

.character_slider_item.slick-active h2 span { opacity:0.2; top: 50%;}

/* .character_slider_item.seolssam h2{background: #ffd618;}
.character_slider_item.daisy h2 {background: #52ae32;}
.character_slider_item.aladin h2 {background: #23b9ce;}
.character_slider_item.genie h2 {background: #8c1d82;}
.character_slider_item.daesung h2 {background: #e63323;}
.character_slider_item.kasim h2 {background: #ffcf28;}
.character_slider_item.shuri h2 {background: #52ae32;}
.character_slider_item.black h2 {background: #8c1d82;}
.character_slider_item.sultan h2 {background: #e63323;} CSS 삭제 */
/* CSS 추가 시작 */
.character_slider_item.seolssam h2{background: #d5b45c;}
.character_slider_item.daisy h2 {background: #e3c78c;}
.character_slider_item.aladin h2 {background: #dcc4b1;}
.character_slider_item.genie h2 {background: #d69e67;}
.character_slider_item.daesung h2 {background: #d5b45c;}
.character_slider_item.kasim h2 {background: #e3c78c;}
.character_slider_item.shuri h2 {background: #dcc4b1;}
.character_slider_item.black h2 {background: #d69e67;}
.character_slider_item.sultan h2 {background: #d5b45c;}
/* CSS 추가 끝 */

.character_slider_item.seolssam figure img {opacity: 0;}
.character_slider_item.aladin figure img {opacity: 0;}
.character_slider_item.genie figure > img {opacity: 0;}
.character_slider_item.genie figure .genie_lamp {position: absolute; bottom: 46px; right: 46px; z-index: 2; opacity: 1;}
.character_slider_item.kasim figure img {opacity: 0;}
.character_slider_item.shuri figure .shuri_light { display: block; width: 42px; height: 42px; border-radius: 50%; position: absolute; top: 37px; left: 122px; -webkit-box-shadow: 0 0 80px 40px #eaeec7; box-shadow: 0 0 80px 40px #eaeec7; z-index: 2; opacity: 0;}
.character_slider_item.sultan figure img { opacity: 0;}

.character_slider_for .slick-list {z-index: 1;}
.character_slider_for .slick-arrow {width: 60px;height: 60px;padding:0;background: #fff;border: 0;border-radius: 50%;position: absolute;top: 24.5%;z-index: 10;font-size: 0; cursor: pointer; transition: background 300ms; -webkit-transition: background 300ms;}
.character_slider_for .slick-arrow:before {content: '';font-family: 'jt_font';font-size: 12px;line-height: 60px; color: #222; transition: color 300ms; -webkit-transition: color 300ms;}
.character_slider_for .slick-arrow.slick-prev {left: 40px; padding-right: 2px;}
.character_slider_for .slick-arrow.slick-prev:before {content: '\e93e';}
.character_slider_for .slick-arrow.slick-next {right: 40px; padding-left: 4px;}
.character_slider_for .slick-arrow.slick-next:before {content: '\e93f';}

html.desktop .character_slider_for .slick-arrow:hover {background: #222;}
html.desktop .character_slider_for .slick-arrow:hover:before {color: #fff;}

.character_slider_nav { font-size: 0; margin: 0 auto;margin-top: 74px; max-width: 1197px; margin-bottom: -30px; text-align: center;}
.character_slider_thumb { text-align: center; display: inline-block; padding: 0 15px; margin-bottom: 30px; vertical-align: top;}
.character_slider_thumb a { display: block; position: relative; }
/* .character_slider_thumb p { font-size: 16px; color: #222; letter-spacing: -0.025em; margin-top: 15px; transition: color 300ms; -webkit-transition: color 300ms; word-break: keep-all;} CSS 삭제 */
/* CSS 추가 시작 */
.character_slider_thumb p { font-size: 16px; color: #a7a7a7; letter-spacing: -0.025em; margin-top: 15px; transition: color 300ms; -webkit-transition: color 300ms; word-break: keep-all;}
/* CSS 추가 끝 */
.character_slider_thumb figure {max-width: 103px;}
.character_slider_thumb figure img {max-width: 100%;}
.character_slider_thumb figure.thumb.current {display: none;}
.character_slider_thumb img {max-width: 100%;}
.character_slider_nav .slick_current figure.thumb {display: none;}
.character_slider_nav .slick_current figure.thumb.current {display: block;}
/* .character_slider_nav .slick_current p {color: #f07e23} CSS 삭제 */
/* CSS 추가 시작 */
.character_slider_nav .slick_current p {color: #000;}
/* CSS 추가 끝 */

/* .character_relationship_wrap { text-align: center; background: url(/img/sub/adventure/character_relationship_bg.jpg) repeat; padding-top: 115px; padding-bottom: 93px; margin-bottom: -33px; } CSS 삭제 */
/* CSS 추가 시작 */
.character_relationship_wrap { text-align: center; background: url(/img/sub/adventure/character_relationship_bg.jpg) repeat; padding-top: 115px; padding-bottom: 9%; }
/* CSS 추가 끝 */
.character_relationship_wrap h2 { font-size: 40px; letter-spacing: -0.1em; margin-bottom: 15px;}
.character_relationship_wrap figure img {vertical-align: top; max-width: 100%; }
.character_relationship_wrap figure.small {display: none;}



 /* **************************************** *
 * THEMA
 * **************************************** */
.thema_list {display: table;position: relative;}
/* .thema_list:before {content: '';display: block;width: 100%;height: 5px;position: absolute;top: 0;left: 0;background-color: #f07e23;border-radius: 25px;overflow: hidden;} CSS 삭제*/
/* CSS 추가 시작 */
.thema_list:before {content: '';display: block;width: 100%;height: 5px;position: absolute;top: 0;left: 0;background-color: #000;border-radius: 25px;overflow: hidden;}
/* CSS 추가 끝 */
.thema_list_item {display: table-row;}
.thema_list_item > div {display: table-cell;padding-top: 40px;padding-bottom: 40px;border-bottom: 1px solid #ddd;}
.thema_list_item:first-child > div {padding-top: 50px;}

.thema_list_thumb {width: 51.5%;vertical-align: top;}
.thema_list_thumb figure {position: relative;border-radius: 4px;overflow: hidden;}
.thema_list_thumb img {display: block;max-width: 100%;}
/* .thema_list_category {display: block;padding: 15px 19px;position: absolute;top: 0;left: 0;font-size: 14px;line-height: 1;letter-spacing: -0.025em;text-align: center;color: #fff;background: #f07e23;border-radius: 4px 0 4px 0;}
.thema_list_category.secondary {background: #23b9ce;} CSS 삭제*/
/* CSS 추가 시작 */
.thema_list_category {display: block;padding: 15px 19px;position: absolute;top: 0;left: 0;font-size: 14px;line-height: 1;letter-spacing: -0.025em;text-align: center;color: #fff;background: #000;border-radius: 4px 0 4px 0;}
/* CSS 추가 끝 */

.thema_list_content {width: 49.5%;vertical-align: middle;padding-left: 67px;padding-right: 60px;}
.thema_list_content_inner {position: relative;}
.thema_list_title {margin-left: -0.07em;font-size: 28px;letter-spacing: -0.025em;line-height: 1.3;color: #222;}
/* .thema_list_album {display: block;margin-top: 8px;padding-left: 20px;position: relative;font-size: 14px;letter-spacing: -0.025em;line-height: 1.5;color: #f07e23;} CSS 삭제 */
/* CSS 추가 시작 */
.thema_list_album {display: block;margin-top: 8px;padding-left: 20px;position: relative;font-size: 14px;letter-spacing: -0.025em;line-height: 1.5;color: #d5b45c;}
/* CSS 추가 끝 */
.thema_list_album:after {display: block;position: absolute;left: 0;top: 3px;font-family: 'jt_font';content: '\e936';font-size: 15px;font-weight: normal;line-height: 1;}
.thema_list_meta {padding: 19px 0 16px;font-size: 0;}
/* .thema_list_meta > li {display: inline-block;vertical-align: middle;padding-right: 20px;position: relative;font-size: 16px;letter-spacing: -0.025em;line-height: 1.75;font-weight: 400;color: #666;}
.thema_list_meta > li:after {content: '';display: block;width: 1px;height: 12px;position: absolute;right: 8px;top: 50%;margin-top: -5px;background: #ddd;} CSS 삭제 */
/* CSS 추가 시작 */
.thema_list_meta > li {display: inline-block;vertical-align: middle;padding-right: 20px;position: relative;font-size: 16px;letter-spacing: -0.025em;line-height: 1.75;font-weight: 400;color: #666;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
.thema_list_meta > li:after {content: '';display: block;width: 1px;height: 12px;position: absolute;right: 8px;top: 50%;margin-top: -6px;background: #ddd;}
/* CSS 추가 끝 */
.thema_list_meta > li:last-child {padding-right: 0;}
.thema_list_meta > li:last-child:after {display: none;}
/* .thema_list_meta > li > em {font-weight: 500;color: #222;} 
.thema_list_desc {font-size: 16px;letter-spacing: -0.025em;line-height: 1.75;font-weight: 400;color: #666;} CSS 삭제 */
/* CSS 추가 시작 */
.thema_list_meta > li > em {font-weight: 500;color: #222;}
.thema_list_desc {font-size: 16px;letter-spacing: -0.025em;line-height: 1.75;font-weight: 400;color: #666;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
/* CSS 추가 끝 */

.thema_list_action {margin-top: 33px;font-size: 0;}

.thema_list_state {display: inline-block;vertical-align: middle;width: 52px;height: 52px;margin-right: 15px;position: relative;border: 2px solid transparent;border-radius: 50%;-webkit-transition: background 300ms;transition: background 300ms;}
.thema_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0;visibility: hidden;-webkit-transition: opacity 300ms;transition: opacity 300ms;}
.thema_state_btn:after {display: block;font-family: 'jt_font';font-size: 20px;font-weight: normal;text-align: center;line-height: 48px;color: #fff;-webkit-transition: color 300ms;transition: color 300ms;}
.thema_state_btn.icon_play:after {content: '\e92f';text-indent: 2px;}
.thema_state_btn.icon_pause:after {content: '\e930';}
/* .thema_list_state.play {background: #23b9ce;border-color: #23b9ce;} CSS 삭제 */
/* CSS 추가 시작 */
.thema_list_state.play {background: #a7a7a7;border-color: #a7a7a7;}
/* CSS 추가 끝 */
.thema_list_state.play .thema_state_btn.icon_pause {opacity: 1; visibility: visible;}
/* .thema_list_state.pause {background: #f07e23;border-color: #f07e23;} CSS 삭제 */
/* CSS 추가 시작 */
.thema_list_state.pause {background: #d5b45c;border-color: #d5b45c;}
/* CSS 추가 끝 */
.thema_list_state.pause .thema_state_btn.icon_play {opacity: 1; visibility: visible;}
html.desktop .thema_list_state:hover {background: #fff;}
/* html.desktop .thema_list_state.pause:hover .thema_state_btn:after {color: #f07e23;}
html.desktop .thema_list_state.play:hover .thema_state_btn:after {color: #23b9ce;} CSS 삭제 */
/* CSS 추가 시작 */
html.desktop .thema_list_state.pause:hover .thema_state_btn:after {color: #d5b45c;}
html.desktop .thema_list_state.play:hover .thema_state_btn:after {color: #a7a7a7a7;}
/* CSS 추가 끝 */

.thema_list_lyrics {display: inline-block;vertical-align: middle;height: 52px;padding: 17px 32px;font-size: 15px;letter-spacing: -0.025em;line-height: 1;color: #fff;background: #222;border: 2px solid #222;border-radius: 25px;-webkit-transition: background 300ms, color 300ms;transition: background 300ms, color 300ms; }
.thema_list_lyrics > span {padding-right: 42px;position: relative;}
.thema_list_lyrics > span:after {display: block;position: absolute;right: 0;top: 50%;margin-top: -8px;font-family: 'jt_font';content: '\e934';font-size: 16px;font-weight: 400;}
html.desktop .thema_list_lyrics:hover {color: #222;background: #fff;}

.thema_list_volume {display: block;width: 33px;height: 33px;position: absolute;top: 2px;right: -60px;border: 2px solid #ddd;border-radius: 8px;overflow: hidden;}
.thema_list_volume_inner {width: 14px;height: 14px;position: absolute;bottom: 8px;left: 8px;overflow: hidden;}
.thema_list_volume_line {position: absolute;width: 2px;height: 100%;bottom: -6px;background-color: #aaa;}
/* .thema_list_volume_line.active {background-color: #f07e23;} CSS 삭제 */
/* CSS 추가 시작 */
.thema_list_volume_line.active {background-color: #d5b45c;}
/* CSS 추가 끝 */
.thema_list_volume_line_01 {left: 0;}
.thema_list_volume_line_02 {left: 4px;}
.thema_list_volume_line_03 {left: 8px;}
.thema_list_volume_line_04 {left: 12px;}

/* 가사보기 팝업 */
.thema_lyrics_data {width: 583px;margin: 0 auto;position: relative;background: #fff;border-radius: 20px;}

/* .thema_lyrics_data_head {padding: 34px 38px;background: #f07e23;border-radius: 20px 20px 0 0;} CSS 삭제 */
/* CSS 추가 시작 */
.thema_lyrics_data_head {padding: 34px 38px;background: #000;border-radius: 20px 20px 0 0;}
/* CSS 추가 끝 */
.thema_lyrics_data_head > b {display: block;width: 100%;font-size: 24px;letter-spacing: -0.025em;line-height: 1.4;color: #fff;}
.thema_lyrics_data_head > p {display: block;width: 100%;margin-top: 6px;padding-left: 20px;position: relative;font-size: 14px;letter-spacing: -0.025em;line-height: 1.75;color: #fff;}
.thema_lyrics_data_head > p:before {display: block;position: absolute;left: 1px;top: 4px;font-family: 'jt_font';content: '\e936';font-size: 15px;font-weight: normal;line-height: 1;}
html.ios .thema_lyrics_data_head > p:before {top: 5px;}
html.ie .thema_lyrics_data_head > p:before {top: 5px;}

.thema_lyrics_data_body {height: 543px;padding: 27px 0;}
.thema_lyrics_data_body .nicescroll_area_outer {height: 100%;padding: 0 40px;border: none;border-radius: 0;}
.thema_lyrics_data_body .nicescroll_area {padding-right: 20px;}
/* .thema_lyrics_data_body p {font-size: 16px;font-weight: 400;letter-spacing: -0.025em;line-height: 1.75;color: #666;} CSS 삭제 */
/* CSS 추가 시작 */
.thema_lyrics_data_body p {font-size: 16px;font-weight: 400;letter-spacing: -0.025em;line-height: 1.75;color: #666;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
/* CSS 추가 끝 */
.thema_lyrics_data_body p + p {margin-top: 28px;}



/* **************************************** *
 * VIDEO
 * **************************************** */
.jt_video_list_wrap {padding-top: 55px; position: relative;}
/* .jt_video_list_wrap:before {content:''; display: block; width: 100%; height: 5px; position: absolute;top: 0; left: 0; border-radius: 25px; overflow: hidden; background-color: #f07e23} CSS 삭제 */
/* CSS 추가 시작 */
.jt_video_list_wrap:before {content:''; display: block; width: 100%; height: 5px; position: absolute;top: 0; left: 0; border-radius: 25px; overflow: hidden; background-color: #000;}
/* CSS 추가 끝 */
.jt_video_list {margin-left: -18px; margin-right: -18px; margin-bottom: -53px;}
.jt_video_list:after {content: ''; display: block; clear: both;}
.jt_video_item {padding: 0 18px; float: left; margin-bottom: 53px; width: 50%;}
.jt_video_img {vertical-align: top;}
.jt_video_img figure {position: relative;border-radius: 4px;overflow: hidden;}
.jt_video_img img {display: block;max-width: 100%;}
/* .jt_video_type {width: 46px;height: 46px;position: absolute;left: 0;bottom: 0;font-size: 24px;line-height: 46px;text-align: center;color: #fff;background: #f07e23;overflow: hidden;border-radius: 0 4px 0 4px;} CSS 삭제 */
/* CSS 추가 시작 */
.jt_video_type {width: 46px;height: 46px;position: absolute;left: 0;bottom: 0;font-size: 24px;line-height: 46px;text-align: center;color: #fff;background: #222;overflow: hidden;border-radius: 0 4px 0 4px;}
/* CSS 추가 끝 */
.jt_video_type:after {font-family: 'jt_font';content: '\e92b';}
/* .jt_video_content {padding: 25px 20px 0;} CSS 삭제 */
/* CSS 추가 시작 */
.jt_video_content {padding: 25px 0 0;}
/* CSS 추가 끝 */
.jt_video_content h2 {font-size: 18px;letter-spacing: -0.05em;line-height: 1.56;color: #222; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.jt_video_content h2 span {border-bottom: 1px solid transparent;-webkit-transition: border 300ms;transition: border 300ms;}
/* .jt_video_content p {font-size: 15px; line-height: 1.74; font-weight: 400; letter-spacing: -0.025em; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 5px;} CSS 삭제 */
/* CSS 추가 시작 */
.jt_video_content p {font-size: 15px; line-height: 1.74; font-weight: 400; letter-spacing: -0.025em; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 5px;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
/* CSS 추가 끝 */

html.desktop .jt_video_link:hover .jt_video_content h2 span {border-bottom-color: #222;}

.jt_video_wrap {max-width: 1200px;margin-left: auto;margin-right: auto;margin-bottom: 65px;}
.jt_video_container {position: relative;width: 100%;padding-top: 56.25%; border-radius: 15px; overflow: hidden; margin-bottom: 33px;}
.jt_video_container:last-child {margin-bottom: 0;}
.jt_video_container iframe {width: 100%;height: 100%;position: absolute;top: 0;left: 0;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;}
.jt_video_poster {width: 100%;height: 100%;position: absolute;top: 0;left: 0;cursor: pointer;}
.jt_video_poster .jt_video_poster_img {display: block;width: 100%;margin: 0;}
.jt_video_poster_overlay {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000000;background: rgba(0, 0, 0, .5);}
.jt_video_poster_overlay_btn {display: block;width: 62px;height: 62px;position: absolute;top: 50%;left: 50%;margin-left: -31px;margin-top: -31px;border:1px solid #fff; background: #fff; border-radius: 50%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; transform: scale(1) translateZ(0); -webkit-transform: transform: scale(1) translateZ; -webkit-transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1), -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23,1,.32,1), -webkit-transform 1s cubic-bezier(.23,1,.32,1);}
/* .jt_video_poster_overlay_btn:after {display: block; font-family: 'jt_font'; font-size: 25px; font-weight: normal; font-style: normal; text-align: center;width: 100%; height: 100%; line-height: 62px; color: #f07e23; content: '\e92f'; text-indent: 4px; -webkit-transform: scale(1) translateZ(0);transform: scale(1) translateZ(0); -webkit-transform: transform: scale(1) translateZ; -webkit-transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1), -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23,1,.32,1), -webkit-transform 1s cubic-bezier(.23,1,.32,1);} CSS 삭제 */
/* CSS 추가 시작 */
.jt_video_poster_overlay_btn:after {display: block; font-family: 'jt_font'; font-size: 25px; font-weight: normal; font-style: normal; text-align: center;width: 100%; height: 100%; line-height: 62px; color: #000; content: '\e92f'; text-indent: 4px; -webkit-transform: scale(1) translateZ(0);transform: scale(1) translateZ(0); -webkit-transform: transform: scale(1) translateZ; -webkit-transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1), -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23,1,.32,1), -webkit-transform 1s cubic-bezier(.23,1,.32,1);}
/* CSS 추가 끝 */
html.desktop .jt_video_poster:hover .jt_video_poster_overlay_btn { -webkit-transform: scale(1.2) translateZ(0); transform: scale(1.2) translateZ(0); }
html.desktop .jt_video_poster:hover .jt_video_poster_overlay_btn:after {-webkit-transform: scale(0.8) translateZ(0);transform: scale(0.8) translateZ(0);}