@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; text-align:right; z-index:1; min-width:1000px;}
.header_content{position:relative; display:inline-block; width:100%; max-width:1600px; height:100px; }
.header_location{position:absolute; top:30px; left:40px; color:#d12020; font-size:24px; font-family:'gotham black'; line-height:32px}
.menu{position:absolute; top:32px; right:41px}
.menu li{display:inline-block; vertical-align:top; margin-left:45px; }
.menu li:first-child{margin-left:0;}
.menu li a{color:#b7b7b7; font-size:16px; font-family:'gotham black'; line-height:30px; transition:.2s;}
.menu li.on a, .menu li:hover a{color:#000}
/* header.fixed */
.header.fixed{backdrop-filter:blur(.5rem); border-bottom:solid 1px #eee; background:rgba(255,255,255,0.95)}
.about .header.fixed{backdrop-filter:blur(.5rem); border-bottom:solid 1px #222; background:rgba(0,0,0,.9); background:rgba(0,0,0,.9)}
/* rollingbanner */
.rollingbanner{position:absolute; font-family:'nanumsquare'; top:28px; left:50px; width:450px; line-height:35px; color: #fff; font-weight:400; border-bottom:1px solid #fff}
.rollingbanner a{white-space:nowrap; font-size:16px; display:block;}
.rollingbanner svg{display:inline-block; vertical-align:middle; width:16px; height:16px; fill:#fff; margin-left:2px; transition:.2s;}
.rollingbanner > .wrap{position:relative; width:100%; height:35px; 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%);
    }
}


/* ====== main ======================================================================================================= */
.main_bg .menu li a{color:rgba(255,255,255,0.6)}
.main_bg .menu li.on a, .main_bg .menu li:hover a{color:#fff}
.main_bg{background:#e21e1e;}
.main{position:fixed; top:0;left:0; width:100%; height:100%; background:#e21e1e;}
.main_title{position:fixed; font-size:7.5vw; line-height:1.05; font-family:'gotham black'; bottom:23%; width:calc(100% - 80px); max-width:1520px; right:0; padding:0 40px; color:#fff; letter-spacing:1.7px; transition:.2s;}
.main_title span{font-family:'gotham xlight'}
.main .footer{position:fixed; width:calc(100% - 80px); max-width:1520px; bottom:0; right:0; padding:90px 40px 35px}
.main .footer_copy{color:#fff}
/*
.header_news{position:absolute; top:28px; left:40px; font-family:'nanumsquare'; font-size:16px; color:#fff; font-weight:400; line-height:35px; border-bottom:1px solid #fff; max-width:340px; padding-right:110px; width:calc(100% - 110px); text-align:left; transform:skew(-0.1deg) }
.header_news svg{display:inline-block; vertical-align:middle; width:16px; height:16px; fill:#fff; margin-left:2px; transition:.2s;}
.header_news:hover svg{margin-left:7px; margin-right:-5px;}
*/
.header_news .flow-container{position:absolute; overflow:hidden; top:28px; left:40px; width:450px; line-height:35px; border-bottom:1px solid #fff}
.header_news .flow-text{display:flex; flex:0 0 auto; white-space:nowrap; overflow:hidden; }
.header_news .flow-wrap{animation: textLoop2 5s linear infinite; padding-right:20px; font-size:16px; font-weight:400; font-family:'nanumsquare'; color:#fff; line-height:35px}
.header_news .flow-wrap svg{display:inline-block; vertical-align:middle; width:16px; height:16px; fill:#fff; margin-left:2px;}
@keyframes textLoop2 {
	0% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  -webkit-transform: translate3d(-100%, 0, 0);
	  transform: translate3d(-100%, 0, 0);
	}
}
@media screen and (max-width:1000px) {
.main_title{bottom:50%; transform:translate(0, 50%); width:86%; padding:0 7%; font-size:9vw;}
}







/* ====== content ======================================================================================================= */
.content{position:relative; font-size:0; text-align:right; padding-top:246px; min-width:1000px;}
.content_company_down{position:fixed; width:40px; left:0; top:315px; font-size:11px; color:#fff; font-weight:500; z-index:1}
.content_company_down1{position:relative; height:270px; display:block; background:#000}
/*
.content_company_down1 marquee{position:relative; transform:rotate(-90deg); width:270px; margin-left:-116px; margin-top:125px;}
*/
.content_company_down_icon{position:relative; display:inline-block; vertical-align:middle; width:20px; height:20px; fill:#fff}
.content_company_down2{position:relative; height:130px; display:block; background:#e21e1e; }
.content_company_down2_text{position:absolute; transform:rotate(-90deg); width:80px; margin-left:-21px; margin-top:57px;}


.content_company_down1 .flow-container{position:absolute; overflow:hidden; top:124px; left:-114px; width:269px; transform:rotate(-90deg)}
.content_company_down1 .flow-text{display:flex; flex:0 0 auto; white-space:nowrap; overflow:hidden; transition:0.3s}
.content_company_down1 .flow-wrap{animation: textLoop 3s linear infinite; padding-right:20px; font-size:10.5px; font-weight:500; color:#fff; line-height:20px}
@keyframes textLoop {
	0% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  -webkit-transform: translate3d(-100%, 0, 0);
	  transform: translate3d(-100%, 0, 0);
	}
}
.content_company_down1 .content_company_down_icon{margin-left:3px}


.view{text-align:left; max-width:1520px; width:calc(100% - 80px); display:inline-block; vertical-align:top; margin:0 40px; transition:.2s}
.content_title_t1{position:relative; font-size:6.3vw; line-height:1.03; font-family:'gotham black';}
.content_title_t1 a{position:relative; display:block; font-family:'gotham black'}/* about */
.content_title_t1 span{position:absolute; top:-12px; margin-left:-4px; background:#d12020; font-weight:600; color:#fff; padding:0 0.8vw; border-radius:22px; font-size:1.9vw; line-height:1.2; letter-spacing:-0.2px;}/* 뱃지 */
.content_title_icon{display:inline-block; vertical-align:middle; fill:#000; width:70px; height:70px; margin-left:20px; margin-top:-11px; transition:.2s;}/* about */
.content_title_t1 a:hover .content_title_icon{margin-left:30px;}
.content_title_t1_small .content_title_t1, .content_title_t1_small_li .content_title_t1{font-size:4.8vw; letter-spacing:0.1vw;}
.content_title_t1_small_li .content_title_t1{margin:69px 0}
.content_title_t1_small_li{margin-bottom:87px;}
.content_title_t2{font-family:'nanumsquare'; font-weight:400; font-size:19px; line-height:1.5; padding:111px 0 124px}/* about */
/* _view */
.view_title_tag{font-family:'nanumsquare'; display:inline-block; color:#9e9e9e; font-size:19px; font-weight:600; line-height:27px; border-radius:15px; border:1px solid #999; padding:0 13px; margin-bottom:26px;}
.view_title{font-family:'nanumsquare'; color:#000; font-size:3.5vw; font-weight:800; line-height:1.31; letter-spacing:-0.1vw; padding:0 0 76px; max-width:59%; word-break:keep-all;}
.view_title_sub{font-family:'nanumsquare'; color:#9e9e9e; font-size:19px; font-weight:700; padding:0 0 94px;}
/* work_cate */
.work_cate{margin:152px 0 93px}
.work_cate li{ display:inline-block; vertical-align:middle; margin-right:40px}
.work_cate li a{position:relative; display:block; font-size:19px; font-family:'gotham black'; transition:.1s;}
.work_cate li a span{position:absolute; top:-12px; margin-left:-1px; background:#d12020; color:#fff; padding:0 8px; border-radius:10px; font-size:15px; font-weight:500; line-height:19px;}
.work_cate li.on a, .work_cate li:hover a{color:#d12020}
/* work_swiper */
.work_swiper{z-index:0; overflow:hidden;}
.work_swiper .swiper-pagination{position:relative; transition:none; bottom:inherit; left:inherit; margin:152px 0 93px; text-align:left}
.work_swiper .swiper-pagination-bullet{width:auto; opacity:1}
.work_swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 40px 0 0; background:transparent; height:auto}
.work_swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:last-child{margin-right:0}
.work_cate_t{font-size:19px; font-family:'gotham black'; transition:.1s}
.work_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active .work_cate_t{color:#d12020}
.work_swiper .swiper-pagination span{position:absolute; top:-12px; margin-left:-1px; background:#d12020; color:#fff; padding:0 8px; border-radius:10px; font-size:15px; font-weight:500; line-height:19px;}
/* view_overview */
.view_overview_title{border-top:2px solid #d7d6db; padding:34px 0 124px;}
.view_overview_title_l, .view_overview_title_r{display:inline-block; vertical-align:top;}
.view_overview_title_l{font-family:'nanumsquare'; width:245px; color:#000; font-size:19px; font-weight:800; line-height:22px; margin-top:6px}
.view_overview_title_r{font-family:'nanumsquare'; width:calc(100% - 245px); color:#000; font-size:19px; font-weight:400; line-height:1.74; max-width:800px; word-break:keep-all;}
.view_overview_content img{max-width:100%; display:block; margin:0 auto}
.view_contents{padding:127px 68px 0; background:#eff1ef; margin-bottom:30px;}
.view_contents_title{font-family:'Gmarket Sans'; color:#000; font-size:27px; font-weight:600; line-height:38px; margin-bottom:42px;}
.view_contents_title_cate{font-family:'Gmarket Sans'; color:#606060; font-size:24px; font-weight:400; line-height:42px;}
.view_contents_title_cate_li1{margin-bottom:91px;}
.view_contents_title_cate_li1 li{display:inline-block; vertical-align:top; position:relative; width:33.33%; padding-bottom:21%;}
.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_line{height:1px; background:rgba(0,0,0,.1); margin:116px 0 87px;}
.view_contents_title_cate_li2{position:relative; text-align:center; z-index:0; margin-bottom:90px;}
.view_contents_title_cate_li2 li{display:inline-block; vertical-align:top; position:relative; width:21.5%; padding-bottom:30%; margin:0 -14px}
.view_contents_title_cate_li2 li:nth-child(2n){margin-top:36px}
.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; padding-bottom:108px;}
.view_contents_title_cate_li3 li{display:inline-block; vertical-align:top; position:relative; width:calc(30% - 14px); padding-bottom:calc(58% - 14px); border:7px solid #e4e6ed; border-radius:44px; overflow:hidden;}
.view_contents_title_cate_li3 li:nth-child(2){margin:0 5%}
.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{font-size:19px; line-height:1.74; color:#000; font-weight:400; padding-bottom:70px}
.view_content img, .view_content iframe{max-width:100%;}
/* view_bottom_btn_bg */
.view_bottom_btn_bg{position:relative; padding:10px 0;}
.view_bottom_btn_l{float:left;}
.view_bottom_btn_r{float:right;}
.view_bottom_btn{display:block; font-family:'nanumsquare'; font-size:15px; 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:hover{color:#000}
.view_bottom_btn:hover svg{fill:#000}
.view_bottom_btn_bg:after{content:""; display:table; table-layout:fixed; clear:both}
/* view_bottom_paging */
.view_bottom_paging{position:absolute; top:0; left:50%; transform:translate(-50%,0); padding-top:10px}
.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 20px; transition:.2s}
.view_bottom_paging li.on a, .view_bottom_paging li:hover a{font-weight:500; color:rgba(0,0,0,1)}


/* ====== footer ======================================================================================================= */
.footer{padding:97px 0 45px;}
.footer:after{content:""; display:table; table-layout:fixed; clear:both}
.footer_copy{float:left; font-size:15px; line-height:20px; font-weight:400; font-family:'nanumsquare'; margin-top:29px; color:#808080; transform:skew(-0.1deg)}
.footer_sns{float:right;}
.footer_sns li{display:inline-block; vertical-align:middle; margin-left:15px;}
.footer_sns li a{position:relative; display:block; width:47px; height:47px; background:#d8d8d8; font-size:16px; border-radius:50%; transition:.2s;}
.footer_sns_icon{position:absolute; top:50%; left:50%; width:66%; height:66%; transform:translate(-50%,-50%); fill:#fff; transition:.2s;}
.footer_sns li:hover .footer_sns_icon1{background:#c00;}
.footer_sns li:hover .footer_sns_icon2{background:#1877f2;}
.footer_sns li:hover .footer_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+ */
}
.footer_sns li:hover .footer_sns_icon4{background:#d12020;}


/* ====== work_li ======================================================================================================= */
.work_li{margin:0 -10px}
.work_li li{position:relative; width:calc(33.33% - 20px); display:inline-block; vertical-align:top; padding-bottom:calc(43.5% - 20px); margin:0 10px 20px}
.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:32px; left:35px; right:47%; font-size:19px; line-height:30px; font-weight:400; color:#fff; word-break:keep-all;}
.work_li li:hover .work_li_img{transform:scale(1.1);}

@media screen and (max-width:1200px) {
.work_li_t{right:35px}
}


/* ====== about ======================================================================================================= */
.about{background:#000; color:#fff; min-width:1000px;}
.about .header_location, .about .menu li.on a, .about .menu li:hover a{color:#fff}
.about .content_company_down{font-weight:600;}
.about .content_company_down1{background:#fff}
.about .flow-wrap{color:#000; font-weight:600}
.about .content_company_down1 .content_company_down_icon{fill:#000}
.about .content_title_icon{fill:#fff}
.about_main_img{display:block; max-width:calc(100% - 80px); margin:0 auto 170px}
.about_li{margin-bottom:337px}
.about_li li{width:calc(33.33% - 13.34px); display:inline-block; vertical-align:top; border-top:1px solid rgba(255,255,255,.5); word-break:keep-all}
.about_li li:nth-child(2){margin:0 20px}
.about_li_t1{font-size:26px; line-height:1.5; font-weight:600; padding:40px 0 34px}
.about_li_t2{font-family:'nanumsquare'; font-size:45px; line-height:1.5; font-weight:100; margin-bottom:49px}
.about_li_t3{font-family:'nanumsquare'; font-size:21px; line-height:1.9; font-weight:400; color:#606060}
.about_li_line{width:7px; height:1px; background:#606060; margin-bottom:20px}
/* about_swiper */
.about_swiper {width:100%; z-index:0; margin:96px 0 345px}
.about_swiper .swiper-slide {background:#000}
.about_swiper_l{display:inline-block; vertical-align:top; margin-right:10%}
.about_swiper_l, .about_swiper_l_txt{width:24%}
.about_swiper_l_title{font-size:35px; font-weight:600; line-height:40px;}
.about_swiper_l_txt{font-family:'nanumsquare'; font-size:19px; line-height:32px; font-weight:400; position:absolute; left:0; bottom:-6px}
.about_swiper_l_txt:before{position:absolute; content:""; width:6px; height:1px; background:#fff; top:-18px}
.about_swiper_r{display:inline-block; vertical-align:top; width:66%; height:650px}
.about_swiper_r img{width:100%; height:100%; object-fit:cover; object-position:center}
.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:hover{color:#fff}
.about_swiper .view_bottom_btn:hover svg{fill:#fff}
.about_swiper_btn_bg{margin-top:41px}
.about_swiper_btn_bg:after{content:""; display:table; table-layout:fixed; clear:both}
.about_media_img{display:block; max-width:100%; margin:90px 0 47px;}
.about_media_iframe{position:relative; max-width:100%; margin:90px 0 47px;}
.about_media_iframe iframe{position:absolute; top:0; left:0; width:100%; height:100%}
.about_media{margin-bottom:319px;}
.about_media_l, .about_media_r{display:inline-block; vertical-align:top}
.about_media_l{width:59.5%}
.about_media_l > div{margin-bottom:18px; display:block; font-family:'gotham black'; font-size:3vw; color:#606060; }
.about_media_l .about_media_l_bottom{color:#fff}
.about_media_more{background:#d12020; display:inline-block; vertical-align:middle; width:48px; height:48px; border-radius:50%; position:relative; transition:.2s; margin-left:22px; margin-top:-10px;}
.about_media_more svg{fill:#fff; position:absolute; top:50%; left:50%; width:60%; height:60%; transform:translate(-50%,-50%);}
.about_media_l:hover .about_media_more{margin-left:32px}
.about_media_r{width:40.5%; font-family:'nanumsquare';  font-size:19px; line-height:30px; font-weight:700; margin-top:7px}
.about_client{margin:50px 0 266px;}
.about_client li{width:calc(25% - 2px); display:inline-block; border:1px solid #222; margin-right:-1px; margin-bottom:-1px;}
.about_client li a{display:table; width:100%; height:240px}
.about_client_tb{display:table-cell; vertical-align:middle; text-align:center;}
.about_client li a img{max-width:210px; max-height:70px; opacity:1; transition:.2s;}
.about_client li a:hover img{transform:scale(1.1);}
.about .footer_copy{color:rgba(255,255,255,.49)}
.about .footer_sns li a{background:#545454;}
.about .footer_sns_icon{fill:#000}
.about .footer_sns li:hover .footer_sns_icon{fill:#fff}

/* ====== news ======================================================================================================= */
.news_li{margin:0 -10px}
.news_li li{display:inline-block; vertical-align:top; width:calc(33.33% - 20px); margin:0 10px 20px}
.news_li li a{display:block;}
.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:43px 35px 40px;}
.news_li_tag{font-family:'nanumsquare'; font-size:19px; font-weight:700; line-height:31px; background:#000; display:inline-block; color:#fff; padding:0 19px; border-radius:16px; margin-bottom:14px; min-width:60px; text-align:center;}
.news_li_t{font-family:'nanumsquare'; font-size:20px; line-height:30px; font-weight:700;}
.news_li li:hover .news_li_img img{transform:scale(1.1);}
.news_view{padding:70px 0; font-size:19px; line-height:1.74; color:#000; font-weight:400; border-top:2px solid #d7d6db}
.news_view img, .news_view iframe{max-width:100%;}
/* news_swiper */
.news_swiper{z-index:0; overflow:hidden}
.news_swiper .swiper-pagination{position:relative; transition:none; bottom:inherit; left:inherit; margin:152px 0 93px; text-align:left}
.news_swiper .swiper-pagination-bullet{width:auto; opacity:1}
.news_swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 40px 0 0; background:transparent; height:auto}
.news_swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:last-child{margin-right:0}
.work_cate_t{font-size:19px; font-family:'gotham black'; transition:.1s}
.news_swiper .swiper-pagination-bullet.swiper-pagination-bullet-active .work_cate_t{color:#d12020}
.news_swiper .swiper-pagination span{position:absolute; top:-12px; margin-left:-1px; background:#d12020; color:#fff; padding:0 8px; border-radius:10px; font-size:15px; font-weight:500; line-height:19px;}


/* ====== contact ======================================================================================================= */
.contact_menu{padding:151px 0 51px}
.contact_menu_request{display:inline-block; vertical-align:middle; width:282px; line-height:65px; background:#e21e1e; text-align:center; font-family:'nanumsquare'; font-size:22px; font-weight:600; margin-right:87px; color:#fff; margin-top:3px}
.contact_menu_request_icon{fill:#fff; display:inline-block; vertical-align:middle; width:22px; height:22px; margin-left:5px;}
.contact_menu_li{display:inline-block; vertical-align:middle; width:calc(100% - 369px); max-width:923px;}
.contact_menu_li li{display:inline-block; vertical-align:top; font-size:19px; line-height:1.5; width:calc(33.33% - 80px); padding-right:80px;}
.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:42.8%; position:relative; margin-bottom:123px;}
.contact_map iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
/* contact_request_layer */
#mask{background:rgba(0,0,0,0.63); position:fixed; left:0; top:0; width:100%; height:100%; z-index:9}
.contact_request_layer{position:absolute; background:#fff; top:160px; left:50%; transform:translate(-50%, 0); width:calc(100% - 200px); max-width:1014px; z-index:10; padding:64px 93px 77px; font-size:0; display:none;}
.contact_request_layer_close{display:block; position:absolute; top:27px; right:25px; width:30px; height:30px; z-index:1}
.contact_request_layer_close svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:30px; fill:#000}
.contact_request_layer_title{font-size:5vw; font-family:gotham black; line-height:1.5;}
.contact_request_layer_title_sub{font-family:'nanumsquare'; font-size:20px; line-height:33px; font-weight:400; margin-bottom:96px;}
.contact_request_layer_form_title{position:relative; font-family:'nanumsquare'; font-size:20px; line-height:33px; font-weight:800; margin-bottom:54px;}
.contact_request_layer_form_title span{position:absolute; top:0; right:0; font-weight:400;}
.contact_request_layer_form_title span:before{position:relative; content:""; display: inline-block; vertical-align:middle; background:#e21e1e; width:6px; height:6px; border-radius:50%; margin-right:11px}
.contact_request_layer_form li{border-bottom:1px solid #a8a8a8; margin-bottom:54px;}
.contact_request_layer_form_50 li{display:inline-block; vertical-align:top; width:calc(50% - 50px)}
.contact_request_layer_form_50 li + li{margin-left:100px;}
.contact_request_layer_form_li_title, .contact_request_layer_form_input{display:inline-block; vertical-align:top; font-family:'nanumsquare'; font-size:20px; line-height:56px;}
.contact_request_layer_form_li_title{font-weight:800; width:120px}
.contact_request_layer_form_li_title span, .contact_request_layer_choice dt span{display: inline-block; vertical-align:middle; background:#e21e1e; width:6px; height:6px; border-radius:50%; margin-left:10px}
.contact_request_layer_form_input{font-weight:400; width:calc(100% - 120px)}
.contact_request_layer_form .contact_request_layer_form_file{border:none;}
.filebox{padding-top:5px;}
.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{font-size:20px; width:52px; height:52px; 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:30px; height:30px; fill:#fff}
.filebox .ex_filename_upload{display:inline-block; vertical-align:middle; font-size:20px; line-height:52px; background:#f4f4f4; width:calc(100% - 86px); padding:0 17px; color:#000;}
.contact_request_layer_choice{font-family:'nanumsquare'; font-size:20px; margin-bottom:42px;}
.contact_request_layer_choice dt{margin-bottom:30px; padding-top:29px}
.contact_request_layer_choice dt b{font-family:'nanumsquare';font-weight:800;}
.contact_request_layer_choice dt span{font-weight:400;}
.contact_request_layer_choice dd{font-weight:400; margin:18px 0;}
.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:relative; width:18px; height:18px; display:inline-block; vertical-align:middle; margin-right:8px; 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{display:inline-block; vertical-align:middle; line-height:30px;}
.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:8px; height:8px;}
.contact_request_layer_textarea{display:block; padding:50px; width:calc(100% - 100px); background:#f4f4f4; height:70px; font-size:20px; line-height:30px;}
.contact_request_layer_chk_bg{font-family:'nanumsquare';font-size:20px; font-weight:700; padding:20px 0; margin-bottom:17px;}
.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:20px; height:20px; display:inline-block; vertical-align:middle; margin-right:6px; background:#d8d8d8}
.contact_request_layer_chk_icon svg{position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px; 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}


@media screen and (max-width:1680px) {
.view{width:calc(100% - 120px); margin-left:80px}
.about_main_img{max-width:calc(100% - 120px); margin:0 40px 170px 80px}
}