@charset "utf-8";

/*
 * File       : sub-bin.css
 * Author     : STUDIO-JT (BIN)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) SAFARI
 * 2) LOCATION
 * 3) VIEW
 * 4) PROJECT VIEW
 * 5) TAG PAGE
 * 6) 404
 */



/* **************************************** *
 * SAFARI
 * **************************************** */
/* LAYOUT */
.safari .header_typo i {line-height:74px;}

/* PROJECT VIEW NAV */
.safari .project_nav_inner > a {display:inline-block; width:50%; padding-top:0;}
.safari .project_nav_inner > a .project_nav_info {padding-top:101px; -webkit-transition:all 300ms; transition:all 300ms;}
.safari .project_nav_inner > a:hover .project_nav_info {padding-top:68px;}

/* POPUP */
.safari .request_privacy_close span, .mobile_safari .request_privacy_close span {line-height: 55px;}



/* **************************************** *
 * LOCATION
 * **************************************** */
/*.page-template-location {overflow-x:hidden;}*/
.location {padding-top:44px;}

/* HERE */
.location .here {font-size:0;/*padding:0 150px; */margin-bottom:115px;}
.location .here:after {content:''; display:block; clear:both;}
.location .here > div p {font-size:14px; line-height:2.15; font-weight: 500;}
.location .here > div img {max-width:666px; width:100%;}
.location .here .ment {/*width:434px;*/width: 39.4545%;display:inline-block;vertical-align:top;}
.location .here .ment > h1 {margin:37px 0 8px 0; font-size:60px; line-height:1.75; font-weight:300;}
.location .here .character_image {/*width:666px;*/width: 60.5455%;display:inline-block;vertical-align:top;overflow: hidden;}
.location_btn {display:block; width:241px; height:60px; line-height:56px; position:relative; background:#fffc00; border:2px solid #fffc00; font-size:14px; font-weight: 500; color:#222; border-radius:3px; padding:0 55px 0 38px; margin-top:51px;}
.location_btn:hover {background:#fff; border-color:#0b21ee; color:#0b21ee;}
.location_btn:after {content:'\e903'; display:block; width:17px; height:13px; position:absolute; top:0px; right:27px; font-family:'jt-font';}

.location_fish {display:block; width:62px; height:47px; position:absolute;}
.location_fish_01 {top: 81px;right: 232px; background:url(../images/sub/location/img-fish-01.svg) no-repeat center center; -webkit-transform:rotate(-80deg); -ms-transform:rotate(-80deg); transform:rotate(-80deg);}
.location_fish_02 {bottom:-63px; left:216px; background:url(../images/sub/location/img-fish-02.svg) no-repeat center center; -webkit-transform:rotate(37deg); -ms-transform:rotate(37deg); transform:rotate(37deg);}
.location_wave_02 {}
.location_wave_01:after {content:''; display:block; width:100%; height:100%; position:absolute; top:29px; left:0; background:#fff;}

/* COMPANY VIEW */
.company_view {width:100%; height:1012px; position:relative; background:url(../images/sub/location/img-company-view.jpg) no-repeat right bottom;}
/*.company_view:after {content:''; display:block; width:77px; height:192px; position:absolute; bottom:212px; right:146px; background:url(../images/sub/location/img-hand.png) no-repeat 0px 0px;}*/
/*.company_view:after {content:''; display:block; width:127px; height:190px; position:absolute; top:623px; right:125px; transform:rotate(19deg); background:url(../images/sub/location/img-hand.svg) no-repeat 0px 0px;}*/
.company_view p {display: block; width: 100%;position:absolute; font-family:'proxima'; font-size:73px; letter-spacing:0.97em; font-weight:600; color:#ddd;}
.company_view .txt_1 {top:173px; left:-130px;}
.company_view .txt_2 {top:340px; right: -220px; text-align:right; color:#0b21ee;}

/* OFFICE INFO, TEAM INFO */
.office_info, .team_info {width:100%; font-size:0;}
.office_info > div, .team_info > div {display:inline-block; vertical-align:top;}

/* OFFICE INFO */
.office_info .office {width:50%; height:446px; color:#fff; text-align:center; padding:131px 50px 50px 50px;}
.office_info .busan {background:#0b21ee;}
.office_info .seoul {background:#333;}
.office_info .office > p {font-size:15px; line-height:1.7; }
.office_info .office > p > span {text-decoration: line-through;}
.office_info .office.busan > p {color:#bac6f6}
.office_info .office.seoul > p {color:#a1a1a1}
.office a {color:#fff;}
.office .office_name {display:inline-block; position:relative; font-family:'proxima'; font-size:25px; font-weight:600; line-height:1.8;}
.office .office_name:before {content:'';display:block;width: 26px;height:9px;position:absolute;top:-20px;left:50%;margin-left: -13px;background:url(../images/icon/icon-wave-small-secondary-v2.svg) no-repeat 0px 0px;}
.office .contact_us {margin-top:90px;}
.office .contact_us p {font-family:'proxima'; font-size:15px; display:inline-block; margin:0 15px; font-weight:500; margin-bottom:10px;}
.office .contact_us span {position:relative; padding:0 6px; font-family:'proxima'; color:#fffc00;}
.office .contact_us span:after {/*content:'//'; position:absolute; top:0px; right:0px;*/}
.office .contact_us a {}

/* TEAM INFO */
.location .team {position:relative; padding:12.5%; background:url(../images/sub/location/img-wave-bg.png) no-repeat 0px 0px;}
.location .team > div {position:absolute; bottom:51px; left:50px;}
.location .team h2 {font-family:'proxima'; color:#222; font-weight:500;}
.location .team p {font-family:'proxima'; font-size:15px; color:#222; font-weight:500;}
.location .planning {background:#fffc00;}
.location .developer {background:#fff;}
.location .design {background:#f3f3f3;}
.location a {font-size:14px; color:inherit;}
.location .team .team_name {position:relative; font-size:18px; font-weight:600; margin-bottom:17px;}
.location .team .team_name:before {content:''; display:block; position:absolute; left:0px;}
.location .planning .team_name:before {width:20px; height:20px; top:-44px; background:url(../images/sub/location/img-team-icon-planning.png) no-repeat 0px 0px;}
.location .developer .team_name:before {width:24px; height:24px; top:-48px; background:url(../images/sub/location/img-team-icon-developer.png) no-repeat 0px 0px;}
.location .design .team_name:before {width:22px; height:22px; top:-46px; background:url(../images/sub/location/img-team-icon-design.png) no-repeat 0px 0px;}

/* CAREERS */
.location .careers {position: relative;/*height:569px;*/padding-top: 120px;background: url(../images/sub/location/img-careers-bg.jpg) repeat-y 0px 0px;text-align: center;}
/*.location .careers:before {content:''; display:block; width:100%; height:305px; position:absolute; bottom:0px; left:0px; background:url(../images/sub/location/img-careers-members.png) no-repeat 0px bottom;}*/
.location .careers h2 {display:inline-block; position:relative; margin-bottom:15px; font-family:'proxima'; font-size:25px; font-weight:600; line-height:1.8; color:#0b21ee;}
.location .careers h2:before {content:'';display:block;width: 26px;height:9px;position:absolute;top:-20px;left:50%;margin-left: -13px;background:url(../images/icon/icon-wave-small-v2.svg) no-repeat 0px 0px;}
.location .careers p, .location .location_careers_mail {font-family: 'proxima';font-size:16px;font-weight: 600;color:#222;}
.location .careers p span {padding:0 5px;}
.location .careers .location_btn {margin: 30px auto 0;text-align: left;}
/*.location .careers .careers_motion_wrap {position:absolute; bottom:0px; left:0px;}
.location .careers .careers_motion_wrap img {max-width:1400px; width:100%; vertical-align:bottom;}*/



/* **************************************** *
 * BLOG
 * **************************************** */
/* BLOG LIST - INSTAGRAM */
.blog_item a {position:relative;}
.blog_itme_content.instagram {width:100%; height:100%; position:absolute; top:0px; left:0px; padding:32px; background:#0b21ee; opacity:0; -webkit-transition: -webkit-transform 250ms, all 250ms; transition: -webkit-transform 250ms, all 250ms; -webkit-transition: all 250ms, -webkit-transform 250ms; transition: all 250ms, -webkit-transform 250ms; transition: transform 250ms, all 250ms; transition: transform 250ms, all 250ms, -webkit-transform 250ms; transition: transform 250ms, -webkit-transform 250ms, all 250ms;}
.blog_item .blog_itme_content.instagram:after {content: ''; display: block; width: 64px; height: 13px; position: absolute; bottom: 8%; left: -7.5%; background: url(../images/icon/icon-wave.png) no-repeat center center; opacity: 0; -webkit-transition: opacity 400ms; transition: opacity 400ms;}
.blog_item:hover .blog_itme_content.instagram {-webkit-transform:translate(-10px, -10px); -ms-transform:translate(-10px, -10px); transform:translate(-10px, -10px); opacity:0.9;}
/* .blog_item:hover .blog_itme_content.instagram:after {opacity:1;} */
.blog_itme_content.instagram h2 {display: table;width: 100%;height: 100%;padding-bottom: 0;}
.blog_itme_content.instagram h2 span {display: table-cell;width: 100%;height: 100%;vertical-align: middle;font-family: 'NotoSansKR', sans-serif;font-size: 15px;font-weight: 500;text-align: center;word-break: break-all;color: #fff;}
.blog_itme_content.instagram h2 span:after {display:none;}
.blog_itme_content.instagram h2 span i {display: block;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;max-height: 8.5em;overflow: hidden;font-style: normal;text-overflow: ellipsis;}
.blog_item:hover .blog_itme_content.instagram h2 span {color:#fff;}
.blog_item figure.insta_fig:after {display:none;}
.blog_item .insta_logo {display:block; width:26px; height:26px; position:absolute; bottom:20px; right:20px; -webkit-transition: all 250ms; transition: all 250ms;}
.blog_item .insta_logo:before {content:'\e904'; display:block; width:100%; height:100%; font-family:'jt-font'; font-size:26px; line-height:26px; font-style:normal; color:#fff;}
.blog_item:hover .insta_logo {bottom:30px; right:30px;}
.category .mfp-arrow:after, .category .mfp-arrow-left:before, .category .mfp-arrow-left:after, .category .mfp-arrow-right:before, .category .mfp-arrow-right:after {border:none;  margin:0;}

.category .mfp-arrow {width:52px; height:52px; margin-top:-26px; -webkit-transition: -webkit-transform 250ms, all 250ms; transition: -webkit-transform 250ms, all 250ms; -webkit-transition: all 250ms, -webkit-transform 250ms; transition: all 250ms, -webkit-transform 250ms; transition: transform 250ms, all 250ms; transition: transform 250ms, all 250ms, -webkit-transform 250ms; transition: transform 250ms, -webkit-transform 250ms, all 250ms;}
.category .mfp-arrow:hover {width:62px; height:62px; margin-top:-31px;}
.category .mfp-arrow-left {left:60px;}
.category .mfp-arrow-left:hover {left:55px;}
.category .mfp-arrow-right {right:60px;}
.category .mfp-arrow-right:hover {right:55px;}
.category .mfp-arrow-left:before, .category .mfp-arrow-right:before {display:block; width:52px; height:52px; line-height:52px; text-align:center; font-family:'jt-font'; font-size:24px; color:#fff; background:#000; border-radius:50%; font-weight:600; -webkit-transition: -webkit-transform 250ms, all 250ms; transition: -webkit-transform 250ms, all 250ms; -webkit-transition: all 250ms, -webkit-transform 250ms; transition: all 250ms, -webkit-transform 250ms; transition: transform 250ms, all 250ms; transition: transform 250ms, all 250ms, -webkit-transform 250ms; transition: transform 250ms, -webkit-transform 250ms, all 250ms;}
.category .mfp-arrow-left:hover:before, .category .mfp-arrow-right:hover:before {width:62px; height:62px; line-height:62px; background:#1126ee; opacity:1;}
.category .mfp-arrow-left:before {content:'\e938';}
.category .mfp-arrow-right:before {content:'\e939';}

.category img.mfp-img {padding:120px 0 120px;}
.category .mfp-figure:after {top:120px; bottom:120px;}
.category .mfp-bottom-bar {margin-top:-94px;}
.category .mfp-counter {display:none;}
.category .mfp-title {position:relative;padding-right:110px;line-height: 1.3;}
.category .mfp-instagram-detail {display: block;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;max-height: 3.9em;overflow: hidden;font-style: normal;text-overflow: ellipsis;}
.category .mfp-viewmore {position:absolute; top:0px; right:0px; padding-right:30px; color:#fff; opacity:0.5;}
.category .mfp-viewmore:after {content:'\e903'; display:block; width:15px; height:12px; position:absolute; top:50%; right:0; margin-top:-7px; text-align:right; font-family:'jt-font'; font-size:14px;}
.category .mfp-viewmore:hover {opacity:1;}
.category .mfp-close {width:46px; height:49px; top:120px; right:-86px; padding-right:0; font-size:0; -webkit-transition: -webkit-transform 250ms, all 250ms; transition: -webkit-transform 250ms, all 250ms; -webkit-transition: all 250ms, -webkit-transform 250ms; transition: all 250ms, -webkit-transform 250ms; transition: transform 250ms, all 250ms; transition: transform 250ms, all 250ms, -webkit-transform 250ms; transition: transform 250ms, -webkit-transform 250ms, all 250ms;}
.category.mfp-zoom-out-cur .mfp-image-holder .mfp-close {cursor:pointer;}
.category .mfp-close:before, .category .mfp-close:after {content:''; display:block; width:1px; height:63px; background:#fff; position:absolute; top:-7px; right:23px;}
.category .mfp-close:before {-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.category .mfp-close:after {-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.error404 #header {z-index:100;}



@media (max-width: 1280px) {
	/* BLOG LIST - INSTAGRAM */
	.category .mfp-arrow-left {left:20px;}
	.category .mfp-arrow-left:hover {left:15px;}
	.category .mfp-arrow-right {right:20px;}
	.category .mfp-arrow-right:hover {right:15px;}
}

@media (max-width: 1200px) {
	/* BLOG LIST - INSTAGRAM */
	.category .mfp-container {padding:0 90px;}
	.category .mfp-arrow {width:40px; height:40px; margin-top:-20px;}
	.category .mfp-arrow:hover {width:50px; height:50px; margin-top:-25px;}
	.category .mfp-arrow-left:before, .category .mfp-arrow-right:before {width:40px; height:40px; line-height:40px; font-size:16px;}
	.category .mfp-arrow-left:hover:before, .category .mfp-arrow-right:hover:before {width:50px; height:50px; line-height:50px;}
	.category .mfp-close {height:30px; right:-50px;}
	.category .mfp-close:before, .category .mfp-close:after {height:40px;}
	.category .mfp-arrow {-webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}

}

@media (max-width: 767px) {
	/* BLOG LIST - INSTAGRAM */
	.category .mfp-container {padding:0;}
	.category .mfp-arrow:hover {opacity:0.65;}
	.category .mfp-arrow-left, .category .mfp-arrow-left:hover {left:2%;}
	.category .mfp-arrow-right, .category .mfp-arrow-right:hover {right:2%;}
	.category .mfp-arrow:hover {width:40px; height:40px; margin-top:-20px;}
	.category .mfp-arrow-left:hover:before, .category .mfp-arrow-right:hover:before {width:40px; height:40px; line-height:40px; background:#000; opacity:0.65;}
	.category .mfp-bottom-bar {margin-top: -90px;padding: 0 2%;}
	.category .mfp-title {padding-right:0;}
	.category .mfp-instagram-detail {display: block;max-height: inherit;white-space: nowrap;}
	.category .mfp-viewmore, .category .mfp-viewmore:hover {opacity:0.7;}
	.category .mfp-viewmore {display:block; width:100px; position:relative; top:inherit; right:inherit; margin-top:10px;}
	.category img.mfp-img {padding:80px 0 100px;}
	.category .mfp-close {width: 30px;top: 50px;right: 0;}
	.category .mfp-close:before, .category .mfp-close:after {height:30px; right:12px;}
}



/* **************************************** *
 * VIEW
 * **************************************** */
/*.single_view {max-width:100%; text-align:center;}
.single_view > div {position:relative; margin:0 auto; text-align:left;}*/
/*.project_view > div {position:relative;}*/



/* **************************************** *
 * PROJECT LIST
 * **************************************** */
.project_item a {display:block; width:100%; height:100%; position:absolute; top:0; left:0;}



/* **************************************** *
 * PROJECT VIEW
 * **************************************** */
/* TEXT */
.project_view .single_inner_wrap {padding:100px 0 12px 0; text-align:left;}
.project_view .single_inner_wrap h2 {font-family: 'proxima', 'NotoSansKR', sans-serif;font-size: 26px;font-weight: 600;color: #222;line-height: 1.25;margin-bottom: 26px;}
.project_view .single_inner_wrap p {font-size:15px; color:#444; line-height:2.2; font-weight:500;}

/* PROJECT HEADER */
.project_view .project_meta_wrap {padding-top: 120px;padding-bottom: 120px;}
.project_view .project_meta_wrap h1 {font-family: 'proxima', 'NotoSansKR', sans-serif;font-size: 34px;font-weight: 600;color: #222;line-height: 1.25;margin-bottom:24px;}
.project_meta_wrap .summary {padding: 13px 0 40px;font-size:0;}
.project_meta_wrap .summary li {display:inline-block; width:200px; margin-left:50px; font-family:'proxima', 'NotoSansKR'; font-weight:600; vertical-align:top;}
.project_meta_wrap .summary li:first-child {margin-left:0;}
.project_meta_wrap .summary li h2 {font-size:16px; color:#222; padding-bottom:14px; margin-bottom:12px; border-bottom:3px solid #222; line-height:1.25;}
.single_content_view a.view_btn_site,
.view_btn_site {display:block; width:241px; height:60px; line-height:56px; position:relative; padding:0 55px 0 38px; margin-top:33px; font-size:15px; color:#fff; background:#0b21ee; border:2px solid #0b21ee; border-radius:3px;}
html.ios .single_content_view a.view_btn_site, html.ios .view_btn_site {padding-top: 2px;}
.view_btn_insta {margin: 0 auto;}
.single_content_view a.view_btn_site:hover,
.view_btn_site:hover {background:#fff; color:#0b21ee;}
.view_btn_site:after {content:'\e90b'; display:block; width:24px; height:19px; position:absolute; top:0px; right:27px; font-family:'jt-font'; font-size:22px;}

/* PROJECT DETAIL */
.project_view .jt_project_detail {text-align: center;}
.project_view .jt_project_detail img {margin:0px auto;vertical-align: top;display:block;}

/* PROJECT VIEW TAG */
.project_view .jt_tag {margin-top:60px; margin-bottom:162px;}

/* PROJECT VIEW NAV */
.project_nav_inner {display:table; table-layout:fixed; width:100%; position:relative; margin:0 auto; font-size:0;}
.project_nav_inner > a {display:table-cell; width:51%; height:226px; overflow:hidden; position:relative; vertical-align:middle; text-align:center; background-size:100% auto; -webkit-transition:300ms; transition:300ms; padding-top:20px;}
.project_nav_inner > a .bg_wrap {display:block; width:100%; height:226px; overflow:hidden; position:absolute; top:0; left:0; background-repeat:no-repeat; background-position:center center; background-size: cover;-webkit-transition:300ms; transition:300ms; -ms-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); -webkit-transition:all 1s ease-out; transition:all 1s ease-out;}
.project_nav_inner > a:hover {padding-top:0; padding-bottom:35px; /*background-size:190%;*/}
.project_nav_inner > a:hover .bg_wrap {-ms-transform:scale(1.3); -webkit-transform:scale(1.3); transform:scale(1.3);}
/* IE 9 에러 때문에 BEFORE대신 div 마크업(class="bg_color_wrap") 추가로 대체했습니다.
.project_nav_inner > a .bg_wrap:before {content:''; display:block; width:100%; height:100%; position:absolute; top:0px; left:0px; background:#000000; background:rgba(0, 0, 0, .6); -webkit-transition:500ms; transition:500ms;}
.project_nav_inner > a:hover .bg_wrap:before {background:#0b21ee;background:rgba(11, 33, 238, .9);}
*/
.project_nav_inner > a .bg_color_wrap {display:block; width:100%; height:226px; position:absolute; top:0; left:0; background:#000000; background:rgba(0, 0, 0, .6); -webkit-transition:500ms; transition:500ms;}
.project_nav_inner > a:hover .bg_color_wrap {background:#0b21ee;background:rgba(11, 33, 238, .9);}
.project_nav_inner > a .project_nav_info {position:relative; z-index:100;}
/*.project_nav_inner {display:table; width:1400px; position:relative; margin:0 auto;}
.project_nav_inner > a {display:table-cell; width:50%; height:226px; overflow:hidden; position:relative; vertical-align:middle; text-align:center; background-size:cover; background-repeat:no-repeat; background-position:center center; transition:300ms;}
.project_nav_inner > a > div {width:100%; height:100%; transition:300ms; -ms-transform: scale(1) rotate(0.05deg); -webkit-transform: scale(1) rotate(0.05deg); transform: scale(1) rotate(0.05deg); -webkit-transition: all 1s ease-in; transition: all 1s ease-in;}
.project_nav_inner > a:hover {padding-bottom:35px; background-size:190%;}
.project_nav_inner > a:hover > div {-ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05);}
.project_nav_inner > a:before {content:''; display:block; width:100%; height:100%; position:absolute; top:0px; left:0px; background:rgba(0, 0, 0, 0); transition:500ms;}
.project_nav_inner > a:hover:before {background:rgba(0, 0, 0, 0.6);}
.project_nav_prev {background-image:url(../images/sub/project_view/nav_list_prev_sample.jpg);}
.project_nav_next {background-image:url(../images/sub/project_view/nav_list_next_sample.jpg);}*/
.project_nav_inner span, .project_nav_inner p {position:relative; z-index:200; font-size:15px; color:#fff; font-weight:500;z-index: 1;}
.project_nav_inner > a .page_name {opacity:0; -webkit-transition:750ms; transition:750ms; padding:0 5%;}
.project_nav_inner > a:hover .page_name {opacity:1;}
.project_nav_inner > a .page_name:after {content:''; display:block; width:17px; height:12px; position:absolute; bottom:-26px; left:50%; margin-left:-9.5px; font-size:19px; font-family:'jt-font'; color:#fffc00; -webkit-transition:500ms; transition:500ms; opacity:0; }
.project_nav_inner .project_nav_prev .page_name:after {content:'\e902';}
.project_nav_inner .project_nav_next .page_name:after {content:'\e903';}
.project_nav_inner > a:hover .page_name:after {opacity:1;}
.project_nav_inner .project_nav {position:relative; display:inline-block; width:auto; padding:0 5px;}
.project_nav_inner .project_nav:after {content:''; display:none; width:100%; height:2px; position:absolute; top:50%; left:0px; background:#fffc00; clear:both;}
.project_nav_inner > a:hover .project_nav {margin-bottom:12px;}
.project_nav_inner > a:hover .project_nav:after {display:block;}
.project_nav_inner p span {font-family:'proxima'; font-size:18px; font-weight:600; color:#fff;}

/* nav list */
.project_nav_inner .project_list {display:block; width:74px; height:74px; position:absolute; top:50%; left:50%; margin-top:-37px; margin-left:-37px; text-align:center; background:#ffffff; background:rgba(255, 255, 255, .1); border:1px solid #ffffff; border:1px solid rgba(255, 255, 255, .21); -webkit-transition:300ms; transition:300ms; z-index:200;}
.project_nav_inner .project_list:hover {background:#fff; border-color:#fff;}
.project_nav_inner .project_list .project_nav_list {display:block; width:100%; height:100%;}
.project_nav_inner .project_list .project_nav_list .hidden { position:absolute; left:-10000px; top:auto; height:1px; overflow:hidden;}
.project_nav_inner .project_list .list_line {position:absolute; left:50%; display:block; width:16px; margin-left:-8px; border:1px solid #fff; -webkit-transition:300ms; transition:300ms;}
.project_nav_inner .project_list:hover .list_line {border-color:#000;}
.project_nav_inner .project_list .list_line_01 {top:28px;}
.project_nav_inner .project_list .list_line_02 {top:34px;}
.project_nav_inner .project_list .list_line_03 {top:40px;}



/* **************************************** *
 * TAG PAGE
 * **************************************** */
.tag_page {padding-bottom:50px;}
.tag_page .search_word {text-align:center; margin:80px 0 50px 0;}
.tag_page .search_word span {font-family:'proxima'; font-size:18px; color:#a4a4a4; font-weight:600;}
.tag_page .search_word p {font-size:48px; color:#0b21ee; font-weight:300; line-height:1.4;}
.tag_list {border-top:2px solid #0b21ee; margin-bottom:60px;}
.tag_item {border-bottom:1px solid #dedede; -webkit-transition:all 300ms; transition:all 300ms;}
.tag_item > a {display:block; padding:53px 55px 56px 60px;position: relative;}
.tag_item:hover {background:#f9f9f9;}
.tag_item:hover .tag_itme_content span {color:#666;}
.tag_itme_content {padding:0;}
.tag_itme_content span:after {display:none;}
.tag_itme_content h1 {font-size:22px; font-weight:500; margin:5px 0 12px 0; padding-right:400px; padding-bottom:0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.7; max-height: 1.7em; color:#222;}
.tag_itme_content h1 br {display:none;}
.tag_itme_content .category {font-family:'proxima'; text-transform:uppercase; font-size:13px; color:#0b21ee; font-weight:600;}
.tag_item:hover .tag_itme_content .category {color:inherit;}
.tag_page .content_index {position:relative;}
.tag_page .content_index .text, .tag_page .content_index .data, .tag_page .content_index .author {font-size:14px;}
.tag_page .content_index .data, .tag_page .content_index .author {display:block; position:absolute; top:-19px; color:#666; font-family:'NotoSansKR', sans-serif; font-weight:500;}
.tag_page .content_index .text {color:#222; padding-right:400px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 2; max-height: 4em; font-weight:500; word-break:keep-all;}
.tag_page .content_index .data {width:107px; right:94px; text-align:center;}
.tag_page .content_index .author {width:90px; right:4px; padding-left: 19px;}
.tag_page .content_index .author:before {content:''; display:block; width:1px; height:11px; position:absolute; top:5px; left:0px; background:#dedede;}

.tag_itme_thumb {max-width: 300px;position: absolute;top: 60%;right: 6%;z-index: 1;opacity: 0;visibility: hidden;}
.tag_itme_thumb img {display: block;max-width: 100%;height: auto;}



/* **************************************** *
 * 404
 * **************************************** */
.error_404 {}
.error_404_wrap {}
.error_404 .wave_wrap {display:block; width:100%; height:100%; position:fixed; top:0; left:0;}
/*.error_404 .wave_wrap:after {content:''; display:block; width:100%; position:absolute; bottom:0; top:50%; left:0; background:#0b21ee;}*/
.error_404 .wave_wrap .wave_container {/*position:relative; padding-top:100%;*/}
.error_404 .wave_wrap .wave {}
.error_404 .wave_wrap .wave {display:block; width:120%; height:72%; position:absolute; /*margin-top:-100%;*/ opacity:0;}
.error_404 .wave_wrap .wave svg {display:block; width:100%; position:absolute; top:0;}
.error_404 .wave_wrap .wave svg path {}
.error_404 .wave_wrap .wave_01 {bottom:43px; left:-9.6%;}
.error_404 .wave_wrap .wave_01 img {}
.error_404 .wave_wrap .wave_02 {bottom:28px; left:-10.2%;}
.error_404 .wave_wrap .wave_02 img {}
.error_404 .wave_wrap .wave_03 {bottom:0;left:-9%;; z-index:10;}
.error_404 .wave_wrap .wave_03 img { z-index:10;}
.error_404 .wave_wrap .wave_03 div {display:block; width:100%; position:absolute; bottom:-18px; top:32%; left:0; background:#0b21ee; z-index:10;}
.error_404 .swimming_man {height:25.7%; position:absolute; right:28.5%; bottom:57.7%; opacity:0;}
.error_404 .swimming_man img {height:100%;}
.error_404 .shark_wrap {position:fixed; width:120%; height:100%;}
.error_404 #shark_svg {position:absolute; width:100%; top:28%; left:-8%;}
.error_404 .shark {display:inline-block; /*height:23.3%; margin-top:9.5%; position:relative; */position:absolute; right:3.6%; bottom:57.5%; -webkit-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg); opacity:0;}
.error_404 .shark img {height:100%;}
.error_404 .message_wrap {display:block; width:100%; position:absolute; top:45.6%; z-index:100; text-align:center; color:#fff;}
.error_404 .message_wrap nav {padding-top:46px; font-size:0;}
.error_404 .message_wrap nav a {display:inline-block; width:201px; height:60px; position:relative; border:2px solid #fff; border-radius:3px; margin:0 5px; line-height:56px; padding:0 40px; -webkit-transition:all 300ms; transition:all 300ms;}
.error_404 .message_wrap nav a:before {display:block; width:15px; height:12px; position:absolute; top:50%; margin-top:-7px; font-family:'jt-font'; font-size:15px; line-height:15px;}
.error_404 .message_wrap nav a:hover {background:#fff; color:#0b21ee;}
.error_404_goback {text-align:right;}
.error_404_goback:before {content:'\e902'; left:29px;}
.error_404_gohome {text-align:left;}
.error_404_gohome:before {content:'\e903'; right:29px;}
.error_404 .message_wrap a {color:#fff;}
.error_404 h1 {font-family:'proxima'; font-size:24px; letter-spacing:0.3em; font-weight:500; margin-bottom:20px;}
.error_404 p {letter-spacing:0.095em;}
.error404 #footer {display:none;}


/* **************************************** *
 * BACK TO LIST
 * **************************************** */
.back_to_list {position:fixed; top:151px; right:60px; z-index:999; -webkit-transition:all 300ms; transition:all 300ms; opacity:0;}
.blog_view .back_to_list {opacity:1;}
.back_to_list.back_to_list_on {opacity:1;}
.back_to_list a {display:block; width:66px; padding:2px 0; line-height:1.5; font-family:'proxima', 'NotoSansKR', sans-serif; font-size:11px; color:#333; font-weight:600; letter-spacing:0.055em; border-bottom:3px solid #333;}
.back_to_list a:after {content:'\e94d'; display:block; width:20px; height:20px; position:absolute; top:50%; right:-2px; margin-top:-12px; font-family:'jt-font'; font-size:20px; font-weight:400; line-height:1;}
.back_to_list:hover a {color:#0b21ee; border-color:#0b21ee;}




/* **************************************** *
 * MAGNIFIC POPUP DEBUGGING
 * **************************************** */
body.mfp_open {/*overflow:hidden; /*position:fixed; width:100%*/}
.mfp-bg {overflow:hidden;}

.mfp-bg, .mfp-wrap { position:fixed !important; height:100% !important;}
.mfp-wrap {top:0 !important; overflow-y:scroll;}
.mfp-content {}

.category .mfp-image-holder .mfp-content {opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8);}
.category .mfp-ready .mfp-image-holder .mfp-content {opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);}