@charset "utf-8";

/* ====== gotham 300,400,500,600, gotham black, gotham light, gotham xlight, gotham thin, nanumsquare 300,400,600,800, Gmarket Sans 300,500,700 ========================================================================================= */
/*
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');

@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 700;
	src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
	url('http://script.ebay.co.kr/fonts/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ 
	url('http://script.ebay.co.kr/fonts/GmarketSansBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ 
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 500;
	src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
	url('http://script.ebay.co.kr/fonts/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ 
	url('http://script.ebay.co.kr/fonts/GmarketSansMedium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ 
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 300;
	src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
	url('http://script.ebay.co.kr/fonts/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ 
	url('http://script.ebay.co.kr/fonts/GmarketSansLight.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ 
}
*/

/* ====== [HTML5] ======================================================================================================= */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display:block;} /* HTML5에 새로 추가된 요소들 블럭처리(IE6/7/8/9, 파폭3) */
audio, canvas, video{display:inline-block; *display:inline; *zoom:1;} /* audio, canvas,video 를 inline-block 처리. 지원하지 않는 브라우저는 핵이용(IE6/7/8/9, 파폭3) */
audio:not([controls]){display:none; height:0;} /* audio 에 contorls 속성이 정의되지 않은경우 이를 감춤(모든 웹브라우저 및 iOS5 이상) */
[hidden]{display:none;} /* visibility 속성의 hidden값과 display 속성의 none 값을 통일(IE7/8/9, 파폭3, 사파리4, IE6) */
mark{background:#ff0; color:#000;} /* mark 속성값 통일(IE 6/7/8/9) */
/* ====== [Base] ======================================================================================================== */
/* 1. IE 6/7 에서 body에 em 단위의 정확한 글자크기를 구현하기 위한 설정으로 100%=16px, 75%=12px
 * 2. iOS에서 가로,세로 모드로 화면을 전환할때 사용자가 직접 줌하지 않는 한 글자크기를 조정하지 않음 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input, select, textarea{font-family:'gotham','nanumsquare','Gmarket Sans','Roboto','nanumgothic','San Francisco','Myriad Set Pro','Lucida Grande','Helvetica Neue','Helvetica',/*mac*/'AppleSDGothicNeo',/*ios*/'Droid sans',/*ad*/'MalgumGothic','HY Dotum','dotum','Lexi Gulim','Arial','Verdana','sans-serif'; font-style:normal; margin:0; padding:0; border:0; font-size:100%;/* 1 */-ms-text-size-adjust:100%;/* 2 */-webkit-text-size-adjust:100%;/* 2 */ vertical-align:baseline}
body{line-height:1;}
/* ====== [Link] ======================================================================================================= */
a:focus{outline:none;} /* 크롬과 outline 속성값 통일 */
a:active, a:hover{outline:0; text-decoration:none;} /* 포커스, 마우스오버 통일 */
a{text-decoration:none; cursor:pointer; color:inherit; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent}
/* ====== [Typography] ================================================================================================== */
h1{font-size:2em; margin:0.67em 0;} /* IE 6/7에서 폰트크기와 마진값 통일. 파폭4+, 사파리5, 크롬에서 폰트크기 통일 */
h2{font-size:1.5em; margin:0.83em 0;}
h3{font-size:1.17em; margin:1em 0;}
h4{font-size:1em; margin:1.33em 0;}
h5{font-size:0.83em; margin:1.67em 0;}
h6{font-size:0.67em; margin:2.33em 0;}
small{font-size:80%;} /* small 폰트크기 */
b,strong{font-weight:bold;} /* b, strong 폰트 굵게 적용 */
p, pre{margin:0;} /* IE6/7의 p, pre 마진값 통일*/
dfn{font-style:italic;} /* dfn 요소 이탤릭 설정, 사파리5, 크롬 적용*/
abbr[title]{border-bottom:1px dotted;} /* abbr(축약어) title 속성 디자인 통일, IE 7/8/9,사파리 5, 크롬 적용*/
blockquote{margin:1em 40px;} /* blockquote(인용) 마진값 설정, 파폭3+, 사파리4/5, 크롬 적용*/
hr{-moz-box-sizing:content-box; box-sizing:content-box; height:0;} /* 파폭의 차이점 통일, IE 6/7 적용되지 않음 */
code, kbd, pre, samp{font-family:monospace, serif; _font-family:'courier new', monospace; font-size:1em;} /* 폰트 글꼴 통일, IE6, 사파리4/5, 크롬 적용 */
pre{white-space:pre; white-space:pre-wrap; word-wrap:break-word;} /* pre 요소의 가독성을 향상 */
q{quotes:none;} /*IE 6/7에서 q(""인용)가 안되므로 노출안함 */
q:before, q:after, blockquote:before, blockquote:after{content:''; content:none;} /* 사파리4에서 q 의 :before와 :after가 안되므로 노출안함*/
sub, sup{font-size:75%; line-height:0; position:relative; vertical-align:baseline;} /* sub, sup 요소 line-height 초기화 */
sup{top:-0.5em;}
sub{bottom:-0.25em;}
::selection{background:#d12020; color:#fff;} /* 드래그 영역 색상 */
::-moz-selection{background:#d12020; color:#fff;} /* 드래그 영역 색상 */
::-webkit-selection{background:#d12020; color:#fff;} /* 드래그 영역 색상 */
/* ====== [List] ======================================================================================================= */
menu, ol, ul, nav ul, nav ol{list-style:none;} /* IE6/7에서 패딩값 통일 */
nav ul, nav ol{list-style-image:none;} /* IE 7에서 이미지 위치가 달라 사용자가 직접 설정하게 도와줌 */
/* ====== [Embed] ====================================================================================================== */
img{border:0; -ms-interpolation-mode:bicubic; vertical-align:top} /* IE7에서 이미지 축소/확대시 계단현상 방지 */
/*svg:not(:root){overflow:hidden;}  IE9에서 svg 가 영역의 크기를 벗어나지 않도록 */
 /* ====== [Table] ====================================================================================================== */
table{border-collapse:collapse; border-spacing:0;} /* 테이블 사이의 간격을 제거 */
/* ====== [Form] ======================================================================================================= */
form,button,select,input,textarea{outline:none;}
textarea{resize:none; overflow:auto; vertical-align:top;}
button, input, select, textarea{vertical-align:baseline; *vertical-align:middle; } /* 세로정렬 위치 통일 */
button, input{line-height:normal;} /* line-height 통일(파폭3+) */
button, select{text-transform:none;}/* value 값 대소문자 초기화, button(크롬, 사파리5+, IE6+ 적용), select(파폭4+, 오페라) */
/* 1. 안드로이드 4.0 이상의 웹킷 브라우저에서 audio와 video의 버그 방지
 * 2. iOS에서 input 요소의 type 속성값을 인식하지 못하는 버그 방지
 * 3. IE 7에서 내부 간격을 제거하는 핵(IE 6은 내부 간격이 남아있음) */
button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"]{-webkit-appearance:button;/* 2 */ cursor:pointer; *overflow:visible;/* 3 */}
button[disabled], html input[disabled]{cursor:default;} /* disabled 된 button과 input 커서모양 기본값 */
button::-moz-focus-inner, input::-moz-focus-inner{border:0; padding:0;} /* 파폭3+ 에서 button과 input의 패딩과 보더값0 */
input{border:none;} /* input 테두리 없애기(크롬, Ie) */
/* 1. IE 8/9에서 box sizing 속성값을 content-box에서 border-box로 변경
 * 2. IE 8/9에서 패딩 제거. IE 7은 핵을 이용해 패딩 제거(IE 6은 패딩이 남아있음) */
input[type="checkbox"], input[type="radio"]{box-sizing:border-box;/* 1 */ padding:0;/* 2 */ *height:13px;/* 2 */ *width:13px;/* 2 */}
/* 1. 사파리5와 크롬에서 텍스트 입력 가능
 * 2. 해당 영역의 크기를 콘텐츠 영역만큼 설정하도록 content-box 설정 */
input[type="search"]{-webkit-appearance:textfield;/* 1 */ -moz-box-sizing:content-box;/* 2 */ -webkit-box-sizing:content-box;/* 2 */ box-sizing:content-box;/* 2 */}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance:none;} /* 맥의 사파리5와 크롬의 내부 패딩과 검색 취소 버튼 제거*/
fieldset{border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em;}
legend{border:0;  padding:0; white-space:normal; *margin-left:-7px;} /* 파폭3에서 캡션내용의 공백문자 통일(IE 6/7은 핵사용) */


  /* ====== common ======================================================================================================= */
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
.ellipsis2, .ellipsis3{display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-box-orient:vertical; word-wrap:break-word}
.ellipsis2{-webkit-line-clamp:2}
.ellipsis3{-webkit-line-clamp:3}
input, button, select{-webkit-appearance:none; border-radius:0}
select::-ms-expand{display:none}


/* ====== header ======================================================================================================= */
.header{position:fixed; top:0; left:0; width:100%; font-size:0; z-index:2}
.header_location{position:absolute; top:40px; left:25px; color:#e21e1f; font-size:30px; font-family:'gotham black'; line-height:40px}
.header_menu{display:block; position:absolute; color:transparent; cursor:pointer; background:#fff; width:40px; height:40px; top:40px; right:25px; z-index:2}
.header_menu span{display:block; width:20px; height:2px; margin:10px auto; background:#000; overflow:hidden;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: translate3d(0, 0, 0); -transform: translate3d(0, 0, 0);
    -webkit-backface-visibility:hidden; backface-visibility:hidden}
.header_menu.active .header_menu_bar1{-webkit-transform:rotate(45deg); transform:rotate(45deg)}
.header_menu.active .header_menu_bar2{-webkit-transform:rotate(-45deg); transform:rotate(-45deg); margin-top:-12px}
/* menu_bg_layer */
.menu_bg_layer{position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#fff; z-index:1; display:none}
.menu_bg{position:absolute; left:25px; right:25px; bottom:30px}
.menu li{margin:10px 0}
.menu li a{display:block; color:#919191; font-size:50px; font-family:'gotham black'; line-height:60px; transition:.2s; }
.menu li.on a, .menu li:hover a{color:#000}
.menu_intro{font-family:'gotham black'; font-size:20px; line-height:1.5; display:block; padding:10px 0 10px;}
.menu_intro_icon{display:inline-block; vertical-align:middle; width:20px; height:20px; fill:#000; transition:.2s;}
.menu_intro:hover .menu_intro_icon{margin-left:5px;}
/* header_sns */
.header_sns{margin-top:20px}
.header_sns li{display:inline-block; vertical-align:middle; margin-right:10px;}
.header_sns li a{position:relative; display:block; width:34px; height:34px; background:#b5b5b7; border-radius:50%; transition:.2s;}
.header_sns_icon{position:absolute; top:50%; left:50%; width:66%; height:66%; transform:translate(-50%,-50%); fill:#fff; transition:.2s;}
.header_sns li:hover .header_sns_icon1{background:#c00;}
.header_sns li:hover .header_sns_icon2{background:#1877f2;}
.header_sns li:hover .header_sns_icon3{
background: #ee0015; /* Old browsers */
background: -webkit-linear-gradient(left,  #ee0015 0%,#ba00b2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ee0015 0%,#ba00b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.header_sns li:hover .header_sns_icon4{background:#d12020;}


/* ====== main ======================================================================================================= */
.main{position:fixed; top:0;left:0; width:100%; height:100%; background:#e21e1e}
.header_news{position:fixed; top:33px; left:25px;  border-bottom:1px solid rgba(255,255,255,.7); width:40%;  padding:5px 50px 5px 0; max-width:187px; }
.header_news .ellipsis2{font-family:'nanumsquare'; font-size:13px; line-height:20px; max-height:40px; color:#fff; font-weight:400; transform:skew(-0.1deg); word-break:keep-all}
.header_news svg{position:absolute; top:50%; right:0; width:22px; height:22px; fill:#fff; transition:.2s; transform:translate(0,-50%);}
.header_news:hover svg{margin-left:7px; margin-right:-5px;}
.main_title{position:fixed; font-family:'gotham black'; left:25px; right:25px; bottom:110px; color:#fff;  font-size:18vw; line-height:1; transition:.2s;}
.main_title span{font-family:'gotham xlight'}
.main .footer{position:fixed; left:25px; bottom:30px; padding:0; color:rgba(255,255,255,.8);}
@media screen and (min-width:600px) {
.main_title{font-size:14vh; right:23%}
}

/* rollingbanner */
.rollingbanner{position:fixed; font-family:'nanumsquare'; top:33px; left:25px; width:55%; max-width:237px; padding:5px 0; line-height:26px; color: #fff; font-weight:400; border-bottom:1px solid #fff}
.rollingbanner a{white-space:nowrap; font-size:13px; display:block;}
.rollingbanner svg{display:inline-block; vertical-align:middle; width:20px; height:20px; fill:#fff; margin-left:4px; transition:.2s;}
.rollingbanner > .wrap{position:relative; width:100%; height:26px; overflow:hidden}
.roller{position:absolute; height:100%}
.roller > ul{display:flex; flex-flow:row nowrap; align-items:center}
.roller > ul > li{padding-right:30px}
.roller.original{
    animation: 30s linear 0s infinite normal forwards running rollingleft1;
}
.roller.clone{
    animation: 30s linear 0s infinite normal none running rollingleft2;
}
@keyframes rollingleft1 { /* 원본용 */
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }
    50.01%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes rollingleft2 { /* 클론용 */
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
	}
}



/* ====== work ======================================================================================================= */
.content_title_t1{position:relative; font-size:15vw; line-height:1.2; font-family:'gotham black'; margin:50px 25px 30px; transition:.2s;}
.content_title_t2{font-family:'nanumsquare'; font-weight:400; font-size:17px; line-height:1.5; margin:0 25px}
.content_title_t1 a{position:relative; display:block; font-family:'gotham black'}/* about */
.content_title_t1 span{position:absolute; top:-2px; margin-left:-2px; background:#d12020; font-weight:600; color:#fff; padding:0 7px; border-radius:10px; font-size:13px; line-height:18px;}/* about 뱃지 */
.content_title_t1_small .content_title_t1{font-size:30px}/* about */
/* work_cate */
.work_cate{position:fixed; left:0; bottom:0; width:100%; text-align:center; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.1); z-index:1; font-size:0;}
.work_cate li{ display:inline-block; vertical-align:middle; padding:0 3.3%;}
.work_cate li:first-child{padding-left:0;}
.work_cate li:last-child{padding-right:0;}
.work_cate li a{position:relative; display:block; font-size:14px; font-weight:600; transition:.1s; line-height:20px; padding:14px 0;}
.work_cate li a span{position:absolute; top:7px; margin-left:-1px; background:#d12020; color:#fff; padding:1px 6px 2px; border-radius:8px; font-size:10px; line-height:10px;font-weight:600;}
.work_cate li.on a, .work_cate li:hover a{color:#d12020}
/* work_li */
.work_l{padding-bottom:48px;}
.work_li li{position:relative; /*padding-bottom:173.1%;*/ transition:.2s; height:calc(100vh - 48px)}
.work_li li a{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.work_li_img{width:100%; height:100%; transition:.2s; object-fit:cover;}
.work_li_black{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.2)}
.work_li_t{position:absolute; bottom:45px; left:25px; right:40%; font-size:17px; line-height:1.5; font-weight:400; color:#fff; word-break:keep-all;}
.work_li li:hover .work_li_img{transform:scale(1.1);}
@media screen and (min-width:700px) {
.work_li{font-size:0;}
.work_li li{width:50%; padding-bottom:86.5%; display:inline-block; vertical-align:top;}
}
/* work_swiper */
.work_swiper{z-index:0; margin-bottom:79px}
.work_swiper .swiper-pagination{position:fixed; left:0; bottom:0; width:100%; text-align:center; background:#fff; box-shadow:0 0 10px rgb(0,0,0,.1); z-index:2; font-size:0}
.work_swiper .swiper-pagination-bullet{width:auto; opacity:1}
.work_swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0; background:transparent; height:auto; padding:0 3.3%}
.work_cate_t{font-size:14px; font-weight:600; transition:.1s; line-height:20px; padding:14px 0}
.work_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active .work_cate_t{color:#d12020}
.work_swiper .swiper-pagination span{position:absolute; top:7px; margin-left:-1px; background:#d12020;color:#fff; padding:1px 6px 2px; border-radius:8px; font-size:10px; line-height:10px; font-weight:600;}
.work_swiper .swiper-button-next, .work_swiper .swiper-button-prev{position:relative; top:inherit; width:auto; height:auto; left:inherit; right:inherit; margin-top:0; opacity:1;}
.work_swiper .swiper-button-next:after, .work_swiper .swiper-button-prev:after{display:none;}

/* ====== about ======================================================================================================= */
.about{background:#000; color:#fff; padding-top:140px; font-size:0;}
.about .header_location{color:#fff}
.about .menu_intro{color:#000}
.about .footer{color:rgba(255,255,255,.49)}
.about_main_img{position:relative; display:block; width:100%; padding-bottom:55%; margin:120px auto 50px}
.about_main_img img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.about_li{margin:0 25px}
.about_li li{border-bottom:1px solid rgba(255,255,255,.2); word-break:keep-all; padding-bottom:40px;}
.about_li li:last-child{border-bottom:none;}
.about_li_t1{font-size:14px; line-height:1.5; font-weight:600; padding:40px 0 10px}
.about_li_t2{font-family:'nanumsquare'; font-size:24px; line-height:1.5; font-weight:100; padding-right:17%; margin-bottom:20px}
.about_li_t3{font-family:'nanumsquare'; font-size:12px; line-height:1.5; font-weight:400; color:#606060; padding-right:16%;}
.about_li_line{width:7px; height:1px; background:#606060; margin-bottom:20px}
/* about_swiper */
.about_swiper {width:calc(100% - 50px); z-index:0; margin:0 25px 70px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.2);}
.about_swiper .swiper-slide {background:#000}
.about_swiper_title{font-size:17px; font-weight:600; line-height:24px; margin-bottom:20px;}
.about_swiper_img{padding-bottom:64.7%; position:relative; margin-bottom:25px;}
.about_swiper_img img{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center}
.about_swiper_txt{font-family:'nanumsquare'; font-size:16px; line-height:1.5; font-weight:400; }
.about_swiper_btn_bg{margin-top:25px}
.about_swiper_btn_bg:after{content:""; display:table; table-layout:fixed; clear:both}
.about_swiper .swiper-button-next, .about_swiper .swiper-button-prev{position:relative; top:inherit; width:auto; height:auto; left:inherit; right:inherit; margin-top:0; opacity:1;}
.about_swiper .swiper-button-next:after, .about_swiper .swiper-button-prev:after{display:none;}
.about_swiper .view_bottom_btn, .about_swiper .view_bottom_btn:hover{color:#fff}
.about_swiper .view_bottom_btn svg, .about_swiper .view_bottom_btn:hover svg{fill:#fff}
.about_swiper .view_bottom_btn.swiper-button-disabled{color:#9e9e9e}
.about_swiper .view_bottom_btn.swiper-button-disabled svg{fill:#9e9e9e}
/* about_media */
.about_media_img{display:block; width:calc(100% - 50px); margin:0 25px 30px;}
.about_media_iframe{position:relative; width:calc(100% - 50px); margin:0 25px 30px;}
.about_media_iframe iframe{position:absolute; top:0; left:0; width:100%; height:100%}
.about_media{margin:0 25px 70px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.2);}
.about_media_li_bg{position:relative; margin-bottom:30px;}
.about_media_li{padding-right:36px; display:block}
.about_media_li > div{font-family:'gotham black'; font-size:6vw; line-height:1.5; color:#5f5f5f; transition:.2s;}
.about_media_li .about_media_li_bottom{color:#fff}
.about_media_more{position:absolute; background:#d12020; width:32px; height:32px; border-radius:50%; transition:.2s; top:50%; right:0; margin-top:-16px}
.about_media_more svg{fill:#fff; position:absolute; top:50%; left:50%; width:60%; height:60%; transform:translate(-50%,-50%);}
.about_media_t{font-family:'nanumsquare';  font-size:16px; line-height:1.6; font-weight:700; word-break:keep-all;}
/* about_client */
.about_client{margin:0 25px}
.about_client li{width:calc(50% - 2px); display:inline-block; border:1px solid #111; margin-right:-1px; margin-bottom:-1px; transition:.2s;}
.about_client li a{display:table; width:100%; padding-bottom:50%; position:relative;}
.about_client li a img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:63%; max-height:30%; transition:.2s;}
.about_client li a:hover img{transform:translate(-50%, -50%) scale(1.1);}
/* footer */
.footer{padding:50px 25px 30px; font-size:12px; line-height:20px; font-weight:400; font-family:'nanumsquare'; color:#808080; }
@media screen and (min-width:700px) {
.content_title_t1{font-size:90px;}
}
@media screen and (min-width:800px) {
.about_media_li li a{font-size:50px;}
.about_client li{width:calc(33.33% - 2px);}
}


/* ====== news ======================================================================================================= */
.news_swiper li a{display:block;}

/* news_swiper */
.news_swiper{z-index:0; padding:115px 0 78px}
.news_swiper_li li{margin-bottom:20px}
.news_swiper_li li:last-child{margin-bottom:0}
.news_swiper .swiper-pagination{position:fixed; left:0; bottom:0; width:100%; text-align:center; background:#fff; box-shadow:0 0 10px rgb(0,0,0,.1); z-index:2; font-size:0}
.news_swiper .swiper-pagination-bullet{width:auto; opacity:1}
.news_swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0; background:transparent; height:auto; padding:0 3.3%}
.work_cate_t{font-size:14px; font-weight:600; transition:.1s; line-height:20px; padding:14px 0}
.news_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active .work_cate_t{color:#d12020}
.news_swiper .swiper-pagination span{position:absolute; top:7px; margin-left:-1px; background:#d12020;color:#fff; padding:1px 6px 2px; border-radius:8px; font-size:10px; line-height:10px; font-weight:600;}
.news_swiper li:hover .news_li_img img{transform:scale(1.1);}
.news_li_img{padding-bottom:100%; position:relative; overflow:hidden;}
.news_li_img img{position:absolute; top:0; left:0; width:100%; height:100%; transition:.2s;}
.news_li_t_bg{background:#f7f7f7; padding:30px 25px}
.news_li_tag{font-family:'nanumsquare'; font-size:13px; font-weight:700; line-height:26px; background:#000; display:inline-block; color:#fff; padding:0 18px; border-radius:13px; margin-bottom:14px; min-width:35px; text-align:center;}
.news_li_t{font-family:'nanumsquare'; font-size:17px; line-height:1.5; font-weight:700; word-break:keep-all;}
/* news_swiper_btn_bg */
.news_swiper_btn_bg{position:relative; padding:25px 25px 0}
.news_swiper_btn_bg:after{content:""; display:table; table-layout:fixed; clear:both}
.news_swiper .swiper-button-next, .news_swiper .swiper-button-prev{position:relative; top:inherit; width:auto; height:auto; left:inherit; right:inherit; margin-top:0; opacity:1;}
.news_swiper .swiper-button-next:after, .news_swiper .swiper-button-prev:after{display:none;}
.view_bottom_btn_l{float:left;}
.view_bottom_btn_r{float:right;}
.view_bottom_btn{display:block; font-family:'nanumsquare'; font-size:14px; line-height:28px; color:#9e9e9e; font-weight:700; transition:.2s; transform:skew(-0.1deg)}
.view_bottom_btn svg{display:inline-block; vertical-align:middle; width:12px; height:12px; fill:#9e9e9e; transition:.2s;}
.view_bottom_btn_bg:after{content:""; display:table; table-layout:fixed; clear:both}
.view_bottom_btn:hover{color:#000}
.view_bottom_btn:hover svg{fill:#000}
/* view_bottom_paging */
.view_bottom_paging{position:absolute; top:0; left:50%; transform:translate(-50%,0); padding-top:25px}
.view_bottom_paging li{display:inline-block; vertical-align:middle; }
.view_bottom_paging li a{display:block; font-size:16px; line-height:28px; font-weight:400; color:rgba(0,0,0,.5); padding:0 10px; transition:.1s}
.view_bottom_paging li.on a, .view_bottom_paging li:hover a{font-weight:500; color:rgba(0,0,0,1)}


/* ====== contact ======================================================================================================= */
.contact_menu_li{padding:115px 25px 0}
.contact_menu_li li{font-size:16px; line-height:1.5; margin-bottom:30px;}
.contact_menu_li_t1{font-family:'gotham black'; margin-bottom:8px;}
.contact_menu_li_t2{font-family:'nanumsquare'; font-weight:700;}
.contact_map{padding-bottom:calc(136.8% - 50px); position:relative; width:calc(100% - 50px); margin:0 25px 25px; transition:.2s;}
.contact_map iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.contact_btn{display:block; width:calc(100% - 50px); line-height:50px; background:#e21e1e; text-align:center; font-family:'nanumsquare'; font-size:17px; font-weight:600; color:#fff; margin:0 auto; transition:.2s;}
.contact_btn_icon{fill:#fff; display:inline-block; vertical-align:middle; width:18px; height:18px; margin-left:5px;}
/* contact_request_layer */
.contact_request_layer{position:absolute; background:#fff; top:0; left:0; width:calc(100% - 50px); z-index:10; padding:140px 25px 30px; font-size:0; display:none;}
.contact_request_layer_close{display:block; position:absolute; top:52px; right:34px; width:20px; height:20px; z-index:1}
.contact_request_layer_close svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; height:90%; fill:#000}
.contact_request_layer_title{font-size:40px; font-family:gotham black; line-height:1.5;}
.contact_request_layer_title_sub{font-family:'nanumsquare'; font-size:16px; line-height:1.5; font-weight:400; padding-right:35%; word-break:keep-all; margin-bottom:50px;}
.contact_request_layer_form_title{position:relative; font-family:'nanumsquare'; font-size:17px; line-height:30px; font-weight:800; margin-bottom:20px}
.contact_request_layer_form_title span{position:absolute; font-family:'nanumsquare'; top:50%; right:0; font-weight:400; font-size:15px; transform:translate(0,-50%); line-height:30px;}
.contact_request_layer_form_title span:before{position:relative; content:""; display: inline-block; vertical-align:middle; background:#e21e1e; width:4px; height:4px; border-radius:50%; margin-right:7px}
.contact_request_layer_form li{border-bottom:1px solid #c8c8c8; margin-bottom:22px;}
.contact_request_layer_form_li_title, .contact_request_layer_form_input{display:inline-block; vertical-align:top; font-family:'nanumsquare'; font-size:17px; line-height:44px;}
.contact_request_layer_form_li_title{font-weight:800; width:90px}
.contact_request_layer_form_li_title span, .contact_request_layer_choice dt span{display: inline-block; vertical-align:middle; background:#e21e1e; width:4px; height:4px; border-radius:50%; margin-left:7px}
.contact_request_layer_form_input{font-weight:400; width:calc(100% - 90px)}
.contact_request_layer_form .contact_request_layer_form_file{border:none;}
.filebox{padding-top:8px;}
.filebox input[type="file"]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.filebox label{width:40px; height:40px; display:inline-block; vertical-align:middle; cursor:pointer; color:#fff; background:#d12020; position:relative;}
.filebox label svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:22px; height:22px; fill:#fff}
.filebox .ex_filename_upload{font-family:'nanumsquare'; display:inline-block; vertical-align:middle; font-size:14px; line-height:40px; height:40px; background:#f4f4f4; width:calc(100% - 70px); padding:0 15px; color:#000;}
.contact_request_layer_choice{font-family:'nanumsquare'; margin-bottom:30px; word-break:keep-all; line-height:1.5;}
.contact_request_layer_choice dt{margin-bottom:10px; padding-top:20px; font-size:17px;}
.contact_request_layer_choice dt b{font-family:'nanumsquare';font-weight:800;}
.contact_request_layer_choice dt span{font-family:'nanumsquare';font-weight:400;}
.contact_request_layer_choice dd{font-family:'nanumsquare';font-weight:400; margin:10px 0; font-size:16px;}
.contact_request_layer_choice_chk input[type="checkbox"]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.contact_request_layer_choice_chk input[type="checkbox"] + label{display:block; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; line-height:0}
.contact_request_layer_choice_chk_icon{position:absolute; width:12px; height:12px; top:7px; background:#d8d8d8; border-radius:50%; transition:.2s;}
.contact_request_layer_choice_chk_icon_chk{position:absolute; top:50%; left:50%; width:2px; height:2px; border-radius:50%; transform:translate(-50%,-50%); fill:transparent; transition:.2s;}
.contact_request_layer_choice_chk span{font-family:'nanumsquare';display:inline-block; vertical-align:middle; line-height:1.5; margin-left:20px; }
.contact_request_layer_choice_chk input[type="checkbox"]:checked + label .contact_request_layer_choice_chk_icon{background:#d12020}
.contact_request_layer_choice_chk input[type="checkbox"]:checked + label .contact_request_layer_choice_chk_icon_chk{background:#fff; width:6px; height:6px;}
.contact_request_layer_textarea{font-family:'nanumsquare'; display:block; padding:20px 25px; width:calc(100% - 50px); background:#f4f4f4; height:70px; font-size:17px; line-height:1.5; margin-top:30px; border-radius:0; font-weight:400;}
.contact_request_layer_chk_bg{font-family:'nanumsquare';font-size:14px; font-weight:700; padding:15px 0; margin-bottom:30px;}
.contact_request_layer_chk{display:inline-block; vertical-align:middle}
.contact_request_layer_chk input[type="checkbox"]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.contact_request_layer_chk input[type="checkbox"] + label{display:block; position:relative; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; line-height:30px; font-weight:800;}
.contact_request_layer_chk_icon{position:relative; width:12px; height:12px; display:inline-block; vertical-align:middle; margin-right:6px; background:#d8d8d8}
.contact_request_layer_chk_icon svg{position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; fill:transparent}
.contact_request_layer_chk span{font-family:'nanumsquare';color:#d12020; font-weight:400; margin-left:5px;}
.contact_request_layer_chk input[type="checkbox"]:checked + label .contact_request_layer_chk_icon{background:#d12020}
.contact_request_layer_chk input[type="checkbox"]:checked + label .contact_request_layer_chk_icon svg{fill:#fff}
.contact_request_layer .contact_btn{width:100%}
.contact_request_layer .footer{padding:40px 0 0}
@media screen and (min-width:800px) {
.contact_map{padding-bottom:calc(50% - 50px);}
.contact_btn{max-width:400px;}
}

/* ====== view ======================================================================================================= */
.view{padding-top:140px}
.view_title{font-family:'nanumsquare'; color:#000; font-size:28px; font-weight:800; line-height:1.5; padding:0 25px 30px; max-width:70%; word-break:keep-all;}
.view_title_sub{font-family:'nanumsquare'; color:#9e9e9e; font-size:13px; line-height:1.5; font-weight:700; padding:0 25px 60px;}
.view_title_tag{font-family:'nanumsquare'; display:inline-block; color:#9e9e9e; font-size:10px; font-weight:800; line-height:16px; border-radius:9px; border:1px solid #bbb; padding:0 6px; margin:0 25px 20px;}
/* view_overview */
.view_overview_title{border-top:1px solid #d7d6db; padding:35px 0 60px; margin:0 25px; font-family:'nanumsquare'; font-size:16px; line-height:1.6; font-weight:400;  word-break:keep-all;}
.view_overview_title b{display:block; font-family:'nanumsquare';  font-weight:800; font-size:17px; line-height:1.6; margin-bottom:3px;}
.view_overview_content img{width:calc(100% - 50px); display:block; margin:0 25px}
.view_contents_title{color:#000; font-size:22px; font-family:'gotham black'; line-height:30px; margin:70px 25px 20px;}
.view_contents_title_cate{color:#606060; font-size:17px; font-weight:400; line-height:24px; margin:0 25px 5px}
.view_contents_title_cate_li1{margin:0 25px 60px; font-size:0;}
.view_contents_title_cate_li1 li{position:relative; width:100%; padding-bottom:63%; margin-bottom:2px; transition:.2s;}
.view_contents_title_cate_li1 li a{display:block; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.view_contents_title_cate_li1 li a img{width:100%; height:100%; transition:.2s;}
.view_contents_title_cate_li1 li:hover a img{transform:scale(1.1);}
.view_contents_title_cate_li2{position:relative; text-align:center; z-index:0; margin:0 15px 110px}
.view_contents_title_cate_li2 li{display:inline-block; vertical-align:top; position:relative; width:50%; padding-bottom:70.2%; margin:0 -10px -12px; transition:.2s;}
.view_contents_title_cate_li2 li:nth-child(2n){margin-top:22px}
.view_contents_title_cate_li2 li:nth-child(2){z-index:2}
.view_contents_title_cate_li2 li:nth-child(3){z-index:1}
.view_contents_title_cate_li2 li a{display:block; position:absolute; top:0; left:0; width:100%; height:100%}
.view_contents_title_cate_li2 li a img{width:100%; height:100%; transition:.2s;}
.view_contents_title_cate_li2 li:hover a img{transform:scale(1.1);}
.view_contents_title_cate_li3{text-align:center}
.view_contents_title_cate_li3 li{position:relative; width:calc(100% - 60px); padding-bottom:calc(193.6% - 60px); border:5px solid #e4e6ed; border-radius:10vw; overflow:hidden; margin:0 auto 55px; transition:.2s;}
.view_contents_title_cate_li3 li a{display:block; position:absolute; top:0; left:0; width:100%; height:100%}
.view_contents_title_cate_li3 li a img{width:100%; height:100%}

.view_content{margin:0 25px; font-family:'nanumsquare'; font-size:16px; line-height:1.6; color:#000; font-weight:400; padding-bottom:60px}
.view_content img, .view_content iframe{max-width:100%;}

/* news_view */
.news_view{padding:60px 0; margin:0 25px; font-family:'nanumsquare'; font-size:16px; line-height:1.6; color:#000; font-weight:400; border-top:1px solid #d7d6db; border-bottom:1px solid #d7d6db}
.news_view img, .news_view iframe{max-width:100%;}
@media screen and (min-width:600px) {
.view_contents_title_cate_li3 li{width:calc(50% - 60px); padding-bottom:calc(96.8% - 60px); border-radius:5vw; display:inline-block; vertical-align:top; margin:0 15px 30px}
}
@media screen and (min-width:700px) {
.view_contents_title_cate_li1 li{display:inline-block; vertical-align:top; width:50%; padding-bottom:31.5%; margin:0}
.view_contents_title_cate_li2 li{width:25%; padding-bottom:35.1%;}
}