@charset "utf-8";

/*
 * File       : sub_communicate.css
 * Author     : STUDIO-JT (JDY)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt_strap.css
 *
 * SUMMARY:
 * 1) COMPANY
 * 2) CHARACTER INTRODUCE
 * 3) TEACHER
 */



/* **************************************** *
 * COMPANY
 * **************************************** */
.body_company .main_container {background: url(/img/layout/dankkum_noise_bg.jpg) repeat;padding-bottom: 0;overflow: hidden;}
.body_company #footer {padding-top: 0;}
/* .body_company #footer:before {top: -33px;} CSS 삭제 */
.body_company .article_header {padding-top:137px; padding-bottom: 31px;position: relative;}
.body_company .article_title {word-break: keep-all;}

.company_post p:last-child {margin-bottom:0;}
/* .company_sub_title {font-size:40px;line-height: 1.25;letter-spacing: -0.01em;color:#f07e23;word-break: keep-all;} CSS 삭제 */
/* CSS 추가 시작 */
.company_sub_title {font-size:40px;line-height: 1.25;letter-spacing: -0.01em;color:#000;word-break: keep-all;}
/* CSS 추가 끝 */

.company_brand_story_container {text-align:center;position:relative;margin-bottom: 33px;}
.company_brand_story {padding-bottom:273px;}
/* .company_brand_story p {font-size: 16px;font-weight: 400;line-height: 1.85;letter-spacing: -0.025em;color: #666;margin-bottom: 32px;word-break: keep-all;} CSS 삭제 */
/* CSS 추가 시작 */
.company_brand_story p {font-size: 16px;font-weight: 400;line-height: 1.85;letter-spacing: -0.025em;color: #666;margin-bottom: 32px;word-break: keep-all;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
/* CSS 추가 끝 */
.company_brand_story p:last-child {margin-bottom:0;}
.company_brand_story p b {color:#222;}
.company_brand_story_container:after {content: '';display: block;width: 100%;height: 33px;position: absolute;bottom: -33px;left: 0;background: url(/img/sub/intro/lace_bg.png) repeat-x center bottom;}

.company_bi_container {position:relative;background-color:#fff;overflow:hidden;}
.company_bi_container .wrap {z-index:10;}
.company_bi {text-align:center;padding-top: 112px;padding-bottom: 116px;}
.company_bi_content {margin-top: 48px;border:2px solid #ddd;border-radius: 15px;background:url(/img/sub/intro/company_bi_bg.jpg) repeat;}
/* .company_bi_content img {padding: 54px 0; max-width:380px; vertical-align:middle;} CSS 삭제 */
/* CSS 추가 시작 */
.company_bi_content img {padding: 54px 0; max-width: 500px; vertical-align:middle;}
/* CSS 추가 끝 */
.company_bi .company_post {padding-top: 51px;}
.company_bi .company_post p {font-size:18px;line-height: 1.75;letter-spacing: -0.025em;font-weight: 400;margin-bottom: 28px;color: #666;word-break: keep-all;}
.company_bi .company_post p b {color:#222;}
.company_bi .company_post p:last-child {margin-bottom:0;}
.company_bi_color_rule_container {text-align:left;margin-top: 68px;}
.company_color_rule_sub_title {font-size:24px;color:#222;letter-spacing: -0.05em;line-height: 1.3;position: relative;padding-left: 3px;padding-bottom: 21px;}
.company_color_rule_sub_title:after {content:'';position: absolute;bottom: 0;left: 0;width:100%;height:3px;background-color:#ddd;border-radius: 5px;}
.company_bi_color_rule {margin-top:50px;font-size: 0;margin-bottom: -45px;}
.company_bi_color_rule:after {content:'';display:table;clear:both;}
.company_bi_color_rule li {width:34.33%;display: inline-block;margin-bottom: 45px;padding-right: 45px;}
.company_bi_color_rule li:nth-child(3n) {width: 31.34%;}
.company_bi_color_rule li:after {content:'';display:table;clear:both;}
.company_bi_color_rule_sample {display: inline-block;font-size:0;width:67px;height:67px;vertical-align:top;border-radius: 5px;margin-right: 35px;}
/* .company_bi_main_color_01 .company_bi_color_rule_sample {background-color:#28b8ce;}
.company_bi_main_color_02 .company_bi_color_rule_sample {background-color:#ffd618;}
.company_bi_sub_color_01 .company_bi_color_rule_sample {background-color:#f07e26;}
.company_bi_sub_color_02 .company_bi_color_rule_sample {background-color:#e63323;}
.company_bi_sub_color_03 .company_bi_color_rule_sample {background-color:#8c1d82;}
.company_bi_sub_color_04 .company_bi_color_rule_sample {background-color:#52ae32;}  CSS 삭제 */
/* CSS 추가 시작 */
.company_bi_main_color_01 .company_bi_color_rule_sample {background-color:#000000;}
.company_bi_main_color_02 .company_bi_color_rule_sample {background-color:#d5b45c;}
.company_bi_sub_color_01 .company_bi_color_rule_sample {background-color:#a7a7a7;}
/* CSS 추가 끝 */
.company_bi_color_rule_txt {display: inline-block;margin-top: -5px;}
.company_bi_color_rule_txt b {display: block;font-size:15px;line-height:1.5;color:#222;letter-spacing:-0.025em;padding-bottom: 4px;}
/* .company_bi_color_rule_txt p {font-size:14px;line-height: 1.6;color: #666;letter-spacing: -0.015em;} CSS 삭제 */
/* CSS 추가 시작 */
.company_bi_color_rule_txt p {font-size:14px;line-height: 1.6;color: #666;letter-spacing: -0.015em;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
/* CSS 추가 끝 */
.company_bi_color_rule_txt p span {padding-right: 6px;}
.company_bi_color_rule_txt p span:last-child {padding-right:0;}

.company_7_color_value_container {background:url(/img/layout/dankkum_noise_bg.jpg) repeat;text-align:center;}
.company_7_color_value {padding-top: 114px;padding-bottom: 120px;}
/* .company_7_color_value_title p {font-size: 16px;font-weight: 400;line-height: 1.75;letter-spacing: -0.025em;color: #666;margin-top: 6px;padding-left: 10px;word-break: keep-all;}
.company_7_color_value_content {background-color:#fff;border-radius:5px;border-top:2px solid #f07e23;text-align:left;padding: 45px 66px 49px;margin-top: 57px;font-size: 0;} CSS 삭제*/
/* CSS 추가 시작 */
.company_7_color_value_title p {font-size: 16px;font-weight: 400;line-height: 1.75;letter-spacing: -0.025em;color: #666;margin-top: 6px;padding-left: 10px;word-break: keep-all;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
.company_7_color_value_content {background-color:#fff;border-radius:5px;border-top:2px solid #000;text-align:left;padding: 45px 66px 49px;margin-top: 57px;font-size: 0;}
/* CSS 추가 끝 */
.company_7_color_value_content li {width:100%;display:block;border-bottom: 1px solid #ddd;padding: 29px 0 31px;}
.company_7_color_value_content li:first-child {padding-top:0;}
.company_7_color_value_content li:last-child {border-bottom:0;padding-bottom: 0;}
/* .company_7_color_value_content b {width: -webkit-calc(22.6% - 42px);width: calc(22.6% - 42px);display:inline-block;position:relative;font-size:21px;line-height: 1;color:#28b8ce;letter-spacing: -0.025em;padding-left: 27px;vertical-align: top;margin-top: 5px;padding-right: 15px;}
.company_7_color_value_content b:before {content:'';position:absolute;top: 3px;left:0;width:12px;height:12px;background-color:#f07e23;border-radius:50%;} 
.company_7_color_value_content b:after {content:'';position:absolute;top: 6px;left:3px;width:6px;height:6px;background-color:#fff;border-radius:50%;}
.company_7_color_value_content p {width: 77.4%;display: inline-block;font-size:16px;line-height:1.75;color:#666;letter-spacing:-0.025em;word-break: keep-all;} CSS 삭제 */
/* CSS 추가 시작 */
.company_7_color_value_content b {width: -webkit-calc(22.6% - 42px);width: calc(22.6% - 42px);display:inline-block;position:relative;font-size:21px;line-height: 1;color:#000;letter-spacing: -0.025em;padding-left: 27px;vertical-align: top;margin-top: 5px;padding-right: 15px;}
.company_7_color_value_content b:before {content:'';position:absolute;top: 5px;left:0;width:12px;height:12px;background-color:#d5b45c;border-radius:50%;}
.company_7_color_value_content b:after {content:'';position:absolute;top: 8px;left:3px;width:6px;height:6px;background-color:#fff;border-radius:50%;}
.company_7_color_value_content p {width: 77.4%;display: inline-block;font-size:16px;line-height:2;color:#666;letter-spacing:-0.025em;word-break: keep-all;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
.company_7_color_value_content p span.bold {font-weight: 700;}
/* CSS 추가 끝 */

/* .business_area_container {padding-bottom: 33px;position: relative;background-color: #fff;} CSS 삭제 */
/* CSS 추가 시작 */
.business_area_container {padding-bottom: 5.09%;position: relative;background-color: #fff;}
/* CSS 추가 끝 */
.business_area_container .wrap {z-index:10;}
.business_area {text-align:center;padding-top: 113px;padding-bottom: 100px;z-index:10;}
.business_area_content {font-size:0;padding-top: 49px;}
.business_area_content li {display: inline-block;width: 14.16%;margin-right: 3%;border: 1px solid #ddd;background-color: #fff;border-radius: 20px;margin-bottom: 40px;vertical-align: top;}
.business_area_content li:nth-child(6n) {margin-right:0;}
.business_area_content img {max-width:91px;vertical-align: middle;margin: 37px 10px 23px;}
.business_area_content b {display: block;font-size:16px;line-height:1.75;color:#222;letter-spacing:-0.025em;padding-bottom: 34px;}
.business_area_content li.business_area_more img {max-width:26px;margin-bottom: 0px;}
/* .business_area_content li.business_area_more b {font-size: 18px;color:#f07e23;margin-top: -6px;} CSS 삭제 */
/* CSS 추가 시작 */
.business_area_content li.business_area_more b {font-size: 18px;color:#000;margin-top: -6px;}
/* CSS 추가 끝 */

/* illust */
.company_illust {position:absolute;left:50%;z-index: 100;}
.company_illust img {display: block;width: 100%;height: auto;}
.company_illust:after {content:'';position:absolute;border-radius:50%;}
.company_illust_01 {width: 94px;height: 94px;margin-left: 25%;top: -47px;}
.company_illust_02 {width: 106px;height: 106px;margin-left: -35.4%;top: 166px;}
.company_illust_03 {width: 272px;height: 272px;margin-left: 22%;top: 449px;}
.company_illust_04 {width: 790px;height: 790px;bottom: -547px;left: -291px;z-index: 0;}
.company_illust_05 {width: 790px;height: 790px;bottom: -527px;right: -251px;z-index: 0;left: inherit;}
.company_illust_satellite {position:absolute; left:50%; z-index: 110; }
.company_illust_satellite > span {display: block;width: 100%;height: 100%;border-radius:50%;}
.company_illust_satellite_01 {width: 26px;height: 26px;top: -102px;margin-left: 22.2%;}
.company_illust_satellite_01 > span {background:#ffca00;}
.company_illust_satellite_02 {width: 27px;height: 27px;top: 141px;margin-left: -29.2%;}
.company_illust_satellite_02 > span {background:#23b9ce;}
.company_illust_satellite_03 {width: 56px;height: 56px;bottom: 103px;margin-left: 23.4%;}
.company_illust_satellite_03 > span {background:#23b9ce;}



/* **************************************** *
 * CHARACTER INTRODUCE
 * **************************************** */
/* fullpage */
.body_character_introduce .main_container {padding-bottom: 0;}

#character_fullpage {opacity: 0;}
.character_bottom_overlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background:#ffffff;background: rgba(255, 255, 255, .9);opacity: 0;visibility: hidden;-webkit-transition:all 400ms;transition: all 400ms;z-index: 2;}

/* animation */
.character_animation .scroll_down {bottom: 40px;}

.character_animation > .wrap {height: 100%;}
.character_animation_head {padding: 189px 0 92px;text-align: center;}
.character_animation_head h1 {font-size: 46px;line-height: 1.25;letter-spacing: -0.05em;color: #222;}
.character_animation_head h1 > span.dani {color:#23b9ce;}
.character_animation_head h1 > span.kkumi {color:#ffca00;}
.character_animation_head p {margin-top: 8px;font-size: 16px;font-weight: 400;line-height: 1.75;letter-spacing: -0.025em;color: #666;}
.character_animation_video {width: 100%;position: relative;overflow: hidden;}
.character_animation_video:after {content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.character_animation_video iframe, .character_animation_poster {width: 100%;height: 100%;position: absolute;top: 0;left: 0;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.character_animation_poster {display: none;}
.character_animation_poster img {display: block;width: 100%;height: auto;}

.character_animation_video.large_screen {padding-top: 28.75%;}
.character_animation_video.small_screen {display: none;padding-top: 46.66%;}

/* identity */
.character_identity > .wrap {height: 100%;}
.character_identity_content {display: table;height: 100%;}
.character_identity_content > div {display: table-cell;vertical-align: middle;}
.character_identity_img {width: 51.5%;}
.character_identity_img figure {border-radius: 50%;overflow: hidden;}
.character_identity_img img {display: block;max-width: 100%;}
.character_identity_txt {width: 48.5%;padding-left: 103px;}
.character_identity_txt p {font-size: 24px;letter-spacing: -0.05em;line-height: 1.75;color: #222;}
.character_identity_txt p + p {margin-top: 20px;}
.character_identity_txt p:last-child {font-size: 30px;color:#f07e23;}



/* **************************************** *
 * TEACHER
 * **************************************** */
.teacher_info_container {position:relative;}
.teacher_info_container:after {content:''; display:table; clear:both;}
.teacher_info_seol {width:50%;display: inline-block;float: left;position: relative;}
.teacher_info_seol img {margin-top: -66px; margin-left: -2px;max-width:100%; vertical-align:middle;}
.teacher_info_seol_illust {position:absolute;bottom: 24.1%;left: -0.1%;width:479px;height:479px;background-color:#ffca00;border-radius:50%;z-index: -1;}
.teacher_info {width:50%;display: inline-block;padding-top: 86px;}
.teacher_info li {position:relative;padding-bottom: 45px;margin-bottom: 45px;border-bottom: 1px solid #eee;}
.teacher_info li:last-child {padding-bottom:0;margin-bottom: 0;border-bottom: 0;}
/* .teacher_info b {position:absolute;top:0;left: -1px;font-size:24px;color:#23b9ce;letter-spacing:-0.025em;}
.teacher_info b:after {content:'';position:absolute; bottom:0; left:0; width:100%; height:3px; background-color:#23b9ce; border-radius:5px; } CSS 삭제 */
/* CSS 추가 시작 */
.teacher_info b {position:absolute;top:0;left: -1px;font-size:24px;color:#a7a7a7;letter-spacing:-0.025em;}
.teacher_info b:after {content:'';position:absolute; bottom:0; left:0; width:100%; height:3px; background-color:#a7a7a7; border-radius:5px; }
/* CSS 추가 끝 */
.teacher_info_content {padding-left: 56px;}
.teacher_info_content h2 {font-size:21px; color:#222; letter-spacing:-0.025em; word-break:keep-all;}
/* .teacher_info_content p {font-size:16px;line-height:1.75;color:#666;letter-spacing:-0.025em;padding-top: 9px; word-break:keep-all;} CSS 삭제 */
/* CSS 추가 시작 */
.teacher_info_content p {font-size:16px;line-height:1.75;color:#666;letter-spacing:-0.025em;padding-top: 9px; word-break:keep-all;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
/* CSS 추가 끝 */
.teacher_info_content p span {white-space: nowrap;}

.teacher_info_awards_container {background: url(/img/layout/dankkum_noise_bg.jpg) repeat;border-radius:10px;padding: 52px 84px 55px;width: 100%;display: block;margin-top: 76px;}
.teacher_info_awards_container:after {content:'';display: table;clear: both;}
.teacher_info_awards_section {width:50%;display:inline-block;float: left;}
/* .teacher_info_awards_section p {font-size: 16px;line-height:1.75;color:#666;letter-spacing: -0.01em;position:relative;padding-left: 16px;padding-right: 15px;padding-bottom: 8px;word-break:keep-all;} CSS 삭제*/
/* CSS 추가 시작 */
.teacher_info_awards_section p {font-size: 16px;line-height:1.75;color:#666;letter-spacing: -0.01em;position:relative;padding-left: 16px;padding-right: 15px;padding-bottom: 8px;word-break:keep-all;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
/* CSS 추가 끝 */
.teacher_info_awards_section p span {white-space: nowrap;}
.teacher_info_awards_section li:last-child p {padding-bottom:0;}
/* .teacher_info_awards_section p:before {content:'';position:absolute;top: 13px;left: 0px;width:5px;height: 5px;border-radius:50%;background-color:#21b8ce;} CSS 삭제 */
/* CSS 추가 시작 */
.teacher_info_awards_section p:before {content:'';position:absolute;top: 13px;left: 0px;width:5px;height: 5px;border-radius:50%;background-color:#d5b45c;}
/* CSS 추가 끝 */

html.ie .teacher_info_awards_section p:before {top: 12px;}

/* illust */
.teacher_illust {position:absolute;left:50%;z-index: 100;}
.teacher_illust img {display: block;width: 100%;height: auto;}
.teacher_illust_01 {width: 60px;height: 60px;margin-left: 36.9%;top: -12px;}



/* CSS 추가 시작 */
/* **************************************** *
 * PROJECT
 * **************************************** */
.jt_isotope_list {position:relative; font-size: 0; margin-left: -1.5%; margin-right: -1.5%;}
.jt_isotope_list:after {content: '';display: table;clear: both;}
.jt_isotope .isotope_item {display: inline-block; vertical-align: top; width: 25%; padding-left: 1.5%; padding-right: 1.5%;}

.project_list {position: relative;padding-top: 45px;margin-bottom: -11px; }
.project_list:before {content: '';display: block;width: 100%;height: 5px;position: absolute;top: 0;left: 0;background-color: #000;border-radius: 25px;overflow: hidden;}
.project_list:after {content:''; display:table; clear:both;}
.project_list b {font-size:16px;line-height:1.35;color:#222;letter-spacing:-0.025em;display: block;padding-top: 22px; word-break:keep-all;}
.project_list_thumbnail {border-radius: 5px;overflow: hidden;}
.project_list_thumbnail img {max-width:100%; width: 100%; vertical-align:middle;}
.project_list_content {position:relative;}

.project_list_post {position:absolute;top:0;left:0;bottom: 0;right: 0;width:100%;height:100%;background:url(/img/sub/intro/project_list_hover_gray.jpg) no-repeat center center;background-size: cover;padding:48px 40px;opacity: 0;visibility: hidden;-webkit-transition: 300ms;transition: 300ms;border-radius: 5px;}
.project_list_post span {font-size:20px; line-height:1.3; color:#fff;letter-spacing:-0.025em;}
.project_list_post h2 {display: none;}
.project_list_post p {font-size:16px;line-height:1.75;color:#fff;letter-spacing:-0.025em;margin-top:9px;position:relative;word-break: keep-all;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; overflow: hidden;max-height: 7em;height:100%;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}

.project_list_content:hover .project_list_post {opacity:1;visibility: visible;}
.project_list_post .jt_btn_square {position:absolute;bottom: 41px;left: 39px;}

.project_list_comming_soon { position:relative; text-align:center;}
.project_list_comming_soon figure {overflow: hidden; border-radius: 4px 4px 0 0;}
.project_list_comming_soon img {max-width:100%; width: 100%; vertical-align:middle;}
.project_list_comming_soon span {font-size: 90px;line-height:1; color:#ddd;letter-spacing: -0.05em;}
.project_list_comming_soon span.project_list_meta {display: none; font-size: 13px; color: #a7a7a7; letter-spacing: -0.05em; margin-bottom: 7px;}
.project_list_comming_soon h2 {font-size: 22px; color:#222;letter-spacing: -0.05em;padding-top:14px; word-break:keep-all;}
.project_list_comming_soon p {font-size: 15px; line-height:1.55; color:#666;letter-spacing: -0.05em;padding-top:13px; word-break:keep-all;transform:skew(-0.1deg); -webkit-transform: skew(-0.1deg); -ms-transform: skew(-0.1deg);}
.project_list_comming_soon_content {position:absolute;top: 50%;left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%;padding: 0 20px;}
/* CSS 추가 끝 */