@charset "UTF-8";

/*FONT*/
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

audio, canvas, progress, video{vertical-align: top;}

/* hanbom reset*/
body{min-height: 100vh;}
html{box-sizing:border-box;}

html{-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;}
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,
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{margin:0;padding:0;border:0;vertical-align:baseline;font-family: 'Titillium Web', sans-serif;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section,summary{display:block}
/* audio, canvas, progress, video{display:inline-block} */
audio, canvas, progress, video{display:block;}
audio:not([controls]){display:none;height:0}
ol, ul{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:'';}
img{vertical-align:top}
mark{background:#ff0;color:#000}
del{text-decoration:line-through}
abbr[title], dfn[title]{cursor:help}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}
input, select, button, textarea, optgroup{margin:0;vertical-align:middle;font:inherit;color:inherit}
button{display:inline-block;border:0;cursor:pointer;margin:0;padding:0;font-family:inherit;outline:none;overflow:visible;background:transparent}
button::-moz-focus-inner{padding:0;border:0}
label{vertical-align:middle}
i, em, address{font-style:normal}
a, a:link, a:visited, a:active, a:hover{text-decoration:none}
table{border-collapse:collapse;border-spacing:0;width:100%}
input{line-height:normal}
input[type="checkbox"], input[type="radio"]{box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
input, textarea, button, select{box-sizing:border-box}
textarea{resize:none;border:1px solid #ebebeb}
input[type="text"], input[type="password"],input[type="file"]{border-radius:0}
button, input[type="reset"],
input[type="button"], input[type="submit"]{overflow:visible;-webkit-appearance:none;border-radius:0;cursor:pointer}
::placeholder{color:#9b9b9b;opacity:1}
::-webkit-input-placeholder{color:#9b9b9b}
::-moz-placeholder{color:#9b9b9b}
:-ms-input-placeholder{color: #9b9b9b}
:-moz-placeholder{color:#9b9b9b}


caption, .blind{overflow:hidden;position:absolute;top:-1px;left:-1px;z-index:-1;width:1px;height:0px;line-height:0;white-space:nowrap;text-indent:-9999px;}

#wrap{position: relative;z-index: 5;}
#wrap{margin-bottom: 670px;}
#content{position: relative;z-index: 1;background-color: #fff;}

.skip-navi a{display:block;position:absolute;left:0;top:0;overflow:hidden;width:1px;height:1px;text-align:center;color:#fff;z-index:101;}
.skip-navi a:focus,
.skip-navi a:active{padding:5px 0;width:100%;height:auto;background:#000;}

.for-pc{display: block;}
.for-mobile{display: none;}

.noto{font-family: 'Noto sans KR', sans-serif;}

.btn{display: inline-block;box-sizing: border-box; }
.btn.type01{color: #010101;border: 1px solid #1a1a1a;background-color: #fcfcfc;}
.btn.medium{font-size: 16px;height: 56px;line-height: 54px;}

body.nav-active{overflow: hidden;}

/* body{border: 0;box-sizing: border-box;} */
/*HEADER*/
.btn-nav{display: block;position: fixed; top: 72px; right: 88px; z-index: 999999;padding: 13px 42px 18px 0;cursor: pointer;}
.btn-nav span,
.btn-nav span:before,
.btn-nav span:after{content: ""; position: absolute; display: block; width: 42px; height: 5px;border-color:white; background-color: #000; cursor: pointer; }
.btn-nav.white span,
.btn-nav.white span:before,
.btn-nav.white span:after{background-color: #fff;}
/* .sub .btn-nav span,
.sub .btn-nav span:before,
.sub .btn-nav span:after{background-color: #000;}
.sub.sub-detail .btn-nav span,
.sub.sub-detail .btn-nav span:before,
.sub.sub-detail .btn-nav span:after{background-color: #000;}
.sub.sub-detail .btn-nav.active span:before,
.sub.sub-detail .btn-nav.active span:after{background-color: #000;} */
.btn-nav.active span,
.btn-nav.active span:before,
.btn-nav.active span:after{background-color: #000;}

.btn-nav.type02 span,
.btn-nav.type02 span:before,
.btn-nav.type02 span:after{background-color: #fff !important;}

.btn-nav.type02.active span:before,
.btn-nav.type02.active span:after{background-color: #000 !important;}

.btn-nav span:before{top: -13px;}
.btn-nav span:after{bottom: -13px;}
.btn-nav span,
.btn-nav span:before,
.btn-nav span:after{transition: all 300ms ease-in-out; }
.sub.sub-detail .btn-nav.active,
.btn-nav.active span{background-color: transparent !important;}
.btn-nav.active span:before,
.btn-nav.active span:after{top: 0; }
.btn-nav.active span:before{transform: rotate(45deg); }
.btn-nav.active span:after{top: 10px; transform: translatey(-10px)   rotate(-45deg); }

nav{display: none;width: 100%;width: 100vw;height: 100vh;
	position: fixed;left: 0;top: 0;width: 100%;background-color: #fff;
	transform: translateX(100%);
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.645,.045,.355,1);}
nav.active{display: block;z-index: 100;transform: translateX(0);transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.645,.045,.355,1);}
nav::before{content: '';display: block;width: 100%;height: 100%;box-sizing: border-box;border-style:solid; border-color: #ffde00; transition: border 0.8s ease 1s;} 
nav.active::before{border-width: 36px; animation: navBorder 0.8s ease;}
nav .menu-list{position: absolute;top: 50%;left: 0;right: 0;-ms-transform: translateY(-50%);transform: translateY(-50%);text-align: center;}
nav .menu-list li{opacity: 0;}
nav.active .menu-list li{-webkit-animation-name:navMenu;-moz-animation-name: navMenu;-o-animation-name:navMenu;animation-name: navMenu; -webkit-animation-duration: 0.5s;-moz-animation-duration: 0.5s;-o-animation-duration: 0.5s;animation-duration: 0.5s; -webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both;}
nav.active .menu-list li:nth-child(1) {-webkit-animation-delay: 0.2s;-moz-animation-delay: 0.2s;-o-animation-delay: 0.2s;animation-delay: 0.2s;}
nav.active .menu-list li:nth-child(2) {-webkit-animation-delay: 0.4s;-moz-animation-delay: 0.4s;-o-animation-delay: 0.4s;animation-delay: 0.4s;}
nav.active .menu-list li:nth-child(3) {-webkit-animation-delay: 0.6s;-moz-animation-delay: 0.6s;-o-animation-delay: 0.6s;animation-delay: 0.6s;}
nav.active .menu-list li:nth-child(4) {-webkit-animation-delay: 0.8s;-moz-animation-delay: 0.8s;-o-animation-delay: 0.8s;animation-delay: 0.8s;}
nav .menu-list li a{display: inline-block;}
nav .menu-list li a span{display: inline-block;position: relative;padding-right: 8px;font-size: 68px;line-height: 100px;color: #000;font-weight: 700;font-style: italic;color: #000;overflow: hidden;background: linear-gradient(to right, #ffde00, #ffde00 50%, #000 50%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;background-position: 100%;transition: background-position 275ms ease;}
nav .menu-list li a:hover span{background-position: 0 100%;}
nav .links{position: absolute;left: 124px;bottom: 13.473%;}
nav.active .links{-webkit-animation: navOpacity 0.5s linear 0.5s both; -moz-animation: navOpacity 0.5s linear 0.5s both; -o-animation: navOpacity 0.5s linear 0.5s both; animation: navOpacity 0.5s linear 0.5s both;}
nav .links li{}
nav .links li a{padding-right: 20px;line-height: 27px;font-size: 18px;color: #000;font-weight: bold;}
nav .links li a:hover{opacity: 0.8;}
nav .links li.download a{background: url('../images/common/ico_download.png') 100% 50% no-repeat;}
nav .links li.blog a{background: url('../images/common/ico_blog.png') 100% 50% no-repeat;}
nav .copyright{position: absolute;left: 0;right: 0;bottom: 14.2%;text-align: center;font-size: 14px;color: #000;}
nav.active .copyright {-webkit-animation: navOpacity 0.5s linear 0.5s both; -moz-animation: navOpacity 0.5s linear 0.5s both; -o-animation: navOpacity 0.5s linear 0.5s both; animation: navOpacity 0.5s linear 0.5s both;}
nav .copyright span{display: inline-block;vertical-align: middle;line-height: 1;}
nav .copyright strong{font-weight: 900;}
nav .copyright::before{content: 'ⓒ';display: inline-block;line-height: 1;margin-right: 4px;font-size: 14px;font-weight: 900;vertical-align: middle;}


@keyframes navBorder {
	0% {border-width: 0px;}
	100% {border-width: 36px;}
}

@keyframes navMenu {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes navOpacity { 
	0% {opacity: 0;}
	100% {opacity:1;}
}

header{position: relative;z-index: 10;}
header h1{position: fixed;left: 88px;top: 72px;}
header h1 a{display: block;position: relative; width: 79px;height: 78px;background: url('../images/common/logo_02.png') 0 0 no-repeat;}
header h1 a::before {content:'';display: inline-block; position: absolute; bottom: -43px; left: 0; width:100%; height: 32px; background: url('../images/common/logo_text.png') no-repeat 50% 0; background-size: 78px 32px; transition: all 0.4s ease-out;}
header.fixed h1 a::before{opacity: 0; bottom: -10px;}
.sub header h1 a::before{display: none;}


/* IE */
.msie .menu-list li a span {background: none;}
.msie .menu-list li a span::before {content: '';display: block;position: absolute;left: 0;top: 55px;width: 0;height: 7px;transition: 275ms ease-in-out;-webkit-transition:275ms ease-in-out;-moz-transition:275ms ease-in-out;-ms-transition:275ms ease-in-out;-o-transition:275ms ease-in-out;background-color: #ffde00;}
.msie .menu-list li a span:hover::before {width: 100%;}


/*MAIN*/
.main .border-box{position:absolute;top:0;left:0;display: block;width: 100%;height: 100%;border:36px solid #fff;border-bottom: 0 none;box-sizing: border-box;z-index:99;transition: .8s;}
.main .intro{position:relative;width:100%;box-sizing:border-box;}
.main .intro.top{overflow: hidden;height: 100vh;background-color: #000;}
.main .intro.second{overflow:hidden;padding-bottom: 288px;min-height: 500px;}
@media only screen and (max-width:640px){
	.main .intro.bg{background-position:0 0;}
}

.main .intro .section-wrap{overflow:hidden;width:100%;margin: 0;height:326px;-webkit-transition: transform .5s; -moz-transition	: transform .5s;  -ms-transition: transform .5s;	-o-transition	: transform .5s; transition: transform .5s;}
.main .intro.second .section-wrap{position:absolute;top:0;}
.main .intro .text	{max-width:1144px;margin:0 auto;}
.main .intro .text span{display:block;text-transform: uppercase;font-size: 144px;line-height: 130px;font-weight: bold;}
.main .intro .text span .for-pc{display: inline-block;}
.main .intro .text span.emphasis{margin-top: 18px;font-style: italic;color: #ffde00;}
.main .intro.top .section-wrap{position:fixed;margin:0;bottom:46px;}
.main .intro.top .text span{color: #fff;}
.main .intro.top.escape .section-wrap {z-index:-1;}
.main .intro.top.escape .section-wrap .text{visibility: hidden;}
.main .intro.second.escape .section-wrap{position:static; animation-fill-mode: forwards;}

@media all and (min-width:769px) and (max-width:1320px) {
	.main .intro .section-wrap{height: 181px;}
}

@-webkit-keyframes textescape {
	0%  {padding-top:0;}
	100%{padding-top:189px;}
}
@keyframes textescape {
	0%  {padding-top:0;}
	100%{padding-top:189px;}
}


.video-wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;/*z-index: -1;*/}
.video-wrap::after{content: '';display: block;position: absolute;left: 0;top: 0;width: 500%;height: 500%;background-color: #000;opacity: .25;} /* 200706 css 추가 */
.video-wrap video{display: block;width: 100%;height: auto;}

h3{font-size: 80px;color: #000;font-weight: bold;font-style: italic;}
.main .services .text{max-width: 1144px;margin: 0 auto;}


.main .intro .text .message-wrap{position:relative;height:130px;overflow:hidden;}
.main .intro .text .message {overflow: hidden;position:absolute;top:0;left:0;height:300%;color: #ffde00;background-color: #fff;padding: 0;
    -webkit-animation: openclose 5s ease-in-out infinite;
            animation: openclose 5s ease-in-out infinite;
}
.main .intro .text .message span{font-style: italic;color: #ffde00;line-height: 130px;height: 130px;background: #fff;overflow: hidden;}
.main .intro .text .message span i{font-size: 72px;color: #000;font-weight: bolder;}

@-webkit-keyframes openclose {
    0%  {top: 0;width: 0;}
    5%  {width: 0;}
    15% {width: calc(52.4% + 40px);}
    30% {top: 0;width: calc(52.4% + 40px);}
    33% {top: 0;width: 0;}
    38% {top: -100%;width: 0;}
    48% {width: calc(33.5% + 40px);}
    62% {top: -100%;width: calc(33.5% + 40px);}
    66% {top: -100%;width: 0;}
    71% {top: -200%;width: 0;}
    86% {width: calc(45.6% + 40px);}
    98% {top: -200%;width: calc(45.6% + 40px);}
    99% {top: -200%;width: 0;}
    100%{top: 0;width: 0;}
}
@keyframes openclose {
    0%  {top: 0;width: 0;}
    5%  {width: 0;}
    15% {width: calc(52.4% + 40px);}
    30% {top: 0;width: calc(52.4% + 40px);}
    33% {top: 0;width: 0;}
    38% {top: -100%;width: 0;}
    48% {width: calc(33.5% + 40px);}
    62% {top: -100%;width: calc(33.5% + 40px);}
    66% {top: -100%;width: 0;}
    71% {top: -200%;width: 0;}
    86% {width: calc(45.6% + 40px);}
    98% {top: -200%;width: calc(45.6% + 40px);}
    99% {top: -200%;width: 0;}
    100%{top: 0;width: 0;}
}

/* fixed-bar */
.fixed-bar{position: fixed;bottom:0;width:100%;height:46px;padding: 0 124px;z-index: 10;transition: 0.4s; box-sizing: border-box;} /* 200706 css 수정 */
.fixed-bar.add-transition{transition: 0s;} /* 200708 css 수정 */
.fixed-bar.add-white{background-color: #fff;} /* 200708 css 수정 */
.fixed-bar::after{display:block;width: calc( 100% - 102px );height: 6px;margin-right: 102px;background-color: #fff;vertical-align: top;content: '';z-index: 20;}
.fixed-bar a{position: absolute;right: 0;top: -17px;display: inline-block;width:102px;height:40px;margin-right: 124px;	font-size: 20px;color: #fff;text-align:right;font-weight: 900;z-index:-1; transition: 0.35s ease 0.1s}
.fixed-bar a:after {position:absolute;top:100px;right:-29px;display:inline-block;width:151px;height:88px;line-height:74px;padding-bottom:14px;text-align:center;font-family: 'Titillium Web', sans-serif;;font-style: italic;font-size:18px;color:#000;font-weight:700;text-decoration: underline;	background:transparent url(../images/common/speechbubble.svg) 0 0 no-repeat;content:'DOWNLOAD';z-index:9; transition: 0.35s ease 0.1s;}
.fixed-bar a:hover:after{top:-22px;}
.fixed-bar.black::after{background-color:#000;}
.fixed-bar.black a{color:#000;}
.fixed-bar.white::after{background-color:#fff;}
.fixed-bar.white a{color:#fff;}

/* 200702 css 추가 */
.fixed-bar a span {}
.fixed-bar a span::before {opacity: 0;content: ''; display: inline-block; position: absolute; top: -50px; right: -180px;background: url('../images/common/img_circle.png') 0 0 no-repeat; background-size: cover; animation: circleText 7.5s linear 0s infinite; cursor:default; z-index:1;transition: 0.45s ease-out; }
 .fixed-bar a:hover span::before {opacity:1; width: 243px; height: 243px;top: -113px; right: -75px;  transform-origin:  50% 50%;  -webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-animation: circleText 7.5s linear 0.3s infinite; }
.fixed-bar a span::after {opacity: 0;content: ''; display: inline-block; position: absolute; top: -50px; right: -180px;background: url('../images/common/img_circle_02.png') 0 0 no-repeat; background-size: cover; animation: circleText 7.5s linear 0s infinite; cursor:default; z-index:0;  transition: 0.45s ease-out;}
 .fixed-bar a:hover span::after {opacity:1; width: 243px; height: 243px; ;top: -113px; right: -75px; transform-origin:  50% 50%;  -webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -webkit-animation: circleText 7.5s linear 0.8s infinite; }

@-webkit-keyframes download {
	0%  {top: 100px; opacity:0;}
	100%{top: -22px; opacity:1;}
}
@keyframes download {
	0%  {top: 100px; opacity:0;}
	100%{top: -22px; opacity:1;}
}

/* 200702 css 추가 */
@-webkit-keyframe circleText {
	0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes circleText {
	0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

.section-wrap{box-sizing: border-box;}

.services .team{max-width: 1320px;margin: 0 auto;}
.services .team:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.services .team li{float: left;position: relative;width: 33.333%;/*height: 550px;*/box-sizing: border-box;}
.services .team li:nth-child(4){width: 66.666%;padding-left: 88px;}
.services .team li:nth-child(4) h3{padding-top: 188px;padding-top: 9.79166vw;font-size: 80px;line-height: 1;font-style: italic;}
.services .team li:nth-child(4) p{padding-top: 4px;font-family: 'Spoqa Han Sans', sans-serif;font-size: 26px;line-height: 40px;letter-spacing: -.5px}
.services .team li img{width: 100%;}
.services .team li span{position: absolute;top: 0;width: 100%;height: 100%;font-size: 52px;font-style: italic;font-weight: bold;color: #000;text-align: center;display: flex;justify-content: center;align-items: center;}

.main section.works{padding-top: 249px;}
section.works .section-wrap{max-width: 1320px;margin: 0 auto;padding: 0 88px 184px;}
section.works .section-wrap .work-list{margin-left: -88px;}
section.works .section-wrap .work-list:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
section.works .section-wrap .work-list li{position: relative;margin-top: 45px;margin-bottom: 175px;padding-right: 88px;padding-left: 88px;box-sizing: border-box;}
section.works .section-wrap .work-list li:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
section.works .section-wrap .work-list li.odd{float: left;width: 50%;}
section.works .section-wrap .work-list li.even{float: left;width: 50%;}
section.works .section-wrap .work-list li.full{float: none;clear: both;}
section.works .section-wrap .work-list li a{display: block;}
section.works .section-wrap .work-list li.odd .title,
section.works .section-wrap .work-list li.even .title{position: absolute;right: 60px;bottom: -30px;font-size: 24px;line-height: 1.1;font-family: 'Spoqa Han Sans', sans-serif;font-weight: bold;color: #000;transform: rotate(90deg);transform-origin: 100% 100%;-webkit-transform: rotate(90deg);-webkit-transform-origin: 100% 100%;-ms-transform: rotate(90deg);-ms-transform-origin: 100% 100%;}
section.works .section-wrap .work-list li.full a{display: table;width: 110%;height: 100%;}
section.works .section-wrap .work-list li.full .thumb{width: 100%;}
section.works .section-wrap .work-list li .thumb{overflow: hidden;}
section.works .section-wrap .work-list li a .thumb img{width: 100%;transition: transform .5s;
-o-transition: transform .5s;
-moz-transition: transform .5s;
-webkit-transition: transform .5s;}
section.works .section-wrap .work-list li a:hover .thumb img{-webkit-transform:scale(1.1); /*  크롬 */
-moz-transform:scale(1.1); /* FireFox */
-o-transform:scale(1.1); /* Opera */
transform:scale(1.1);
transition: transform .7s;
-o-transition: transform .7s;
-moz-transition: transform .7s;
-webkit-transition: transform .7s;}
section.works .section-wrap .work-list li.full .text-wrap{text-align: center;padding-left: 88px;display: table-cell;vertical-align: middle;}
section.works .section-wrap .work-list li.full .text-wrap strong{display: block;font-family: 'Spoqa Han Sans', sans-serif;font-weight: bold;font-size: 90px;font-size: 4.6875vw;line-height: 100px;line-height: 5.20833vw;text-align: center;color: #000;word-break: keep-all;letter-spacing: -0.109vw;}
section.works .section-wrap .work-list li.full .text-wrap .title{display: block;padding-top: 53px;font-family: 'Spoqa Han Sans', sans-serif;font-weight: bold;font-size: 24px;line-height: 40px;color: #000;}
section.works .view-more{clear: both;margin-top: -45px;padding-left: 120px;}
section.works .view-more a{display: inline-block;font-size: 40px;font-weight: bold;font-style: italic;color: #000;}
section.works .view-more a::after{content: '';display: inline-block;width: 24px;height: 24px;margin-left: 14px;vertical-align: 2px;background: url('../images/common/ico_more.png') 0 0 no-repeat;}
.header-text{padding-top: 103px;padding-bottom: 30px;font-size: 16px;line-height: 26px;color: #666;font-family: 'Spoqa Han Sans', sans-serif;}

section.works .work-list li:not(.full) .title{	-webkit-transition: .2s ease-in-out;	-moz-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out;	-o-transition: .2s ease-in-out;	transition: .2s ease-in-out;}

/* 200703 css 추가 */
section.works .view-more a::after{content: '';display: inline-block;width: 24px;height: 24px;margin-left: 14px;vertical-align:2px;
	background: url('../images/common/ico_more.png') 0 0 no-repeat;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
section.works .view-more a:hover::after{
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

section.partners{padding: 130px 0 198px;background-color: #fafafa;}
section.partners .section-wrap{max-width: 1144px;margin: 0 auto;}
section.partners .partner-list:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
section.partners .partner-list li{float: left;width: 33.333%;padding-top: 70px;text-align: center;}
section.partners .partner-list li span{display: inline-block;}

.inside{width: 100%;height: 963px;background: url('../images/common/bg_section.jpg') 0 0 no-repeat;-webkit-background-size: cover;background-size: cover;}
.inside .section-wrap{max-width: 1144px;margin: 0 auto;}
.inside .section-wrap h3{display: inline-block;margin-left: -45px;padding-top: 190px;padding-right: 110px;vertical-align: top;}
.inside .section-wrap .text-wrap{display: inline-block;}
.inside .section-wrap .text-wrap .inside-list{width: 616px;padding-top: 210px;}
.inside .section-wrap .text-wrap .inside-list li{padding-top: 34px;}
.inside .section-wrap .text-wrap .inside-list li:first-child{padding-top: 0;}
.inside .section-wrap .text-wrap .inside-list li a{position: relative; display: block;line-height: 81px;font-family: 'Noto Sans KR', sans-serif;font-size: 29px;font-weight: bold;color: #000;border-bottom: 4px solid #000;}
/* 200703 css추가 수정*/
.inside .section-wrap .text-wrap .inside-list li a::before{content: ''; display: inline-block; position :absolute; top: 50%; right: 0; width: 48px; height: 33px; background: url('../images/common/ico_arrow.png') 100% 50% no-repeat; background-size: cover; margin-top: -17px; }
.inside .section-wrap .text-wrap .inside-list li a:hover::before {animation-name: arrowOutIn;  animation-duration:0.8s; animation-timing-function:linear;}

@keyframes arrowOutIn {
  0% {opacity: 1; transform: translateX(0px) scale(1);}
  40%{opacity: 0; transform:translateX(10px) scale(0.9);}
  41%{opacity: 0; transform:translateX(-10px) scale(0.9);}
  100% {opacity: 1; transform: translateX(0px) scale(1);}
}
/* end 200703 css추가 수정*/
.inside .section-wrap .view-more{padding-top: 54px;}
.inside .section-wrap .view-more a{position: relative; font-size: 32px;font-weight: 600;color: #000;line-height: 1;}
.inside .section-wrap .view-more a::before {content: ''; display: block; position: absolute; bottom: -6px; left: 0; width: 0; height: 4px; background-color: #000; transition: .3s ease-in-out;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-ms-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;background-color: #000;}
.inside .section-wrap .view-more a:hover::before {width: 100%;}

.sub-works .works h3{padding-top: 27px;}
.sub-works section.works .section-wrap{padding-bottom: 224px;}

section.menus{width: 100%;height: 671px;background: url('../images/common/bg_section_02.jpg') 50% 0 no-repeat;-webkit-background-size: cover;background-size: cover;}
section.menus .bg{display: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #000;z-index: 1;}
.main section.menus{background: 0 none;}
section.menus .section-wrap{position: relative;max-width: 1320px;height: 100%;margin: 0 auto;z-index: 10;}
section.menus .section-wrap .menu-list{display: table;width: 100%;height: 100%;}
section.menus .section-wrap .menu-list li{display: table-cell;width: 33.333%;vertical-align: middle;text-align: center;}
.main section.menus .section-wrap .menu-list li{width: 25%;}
section.menus .section-wrap .menu-list li a{display: inline-block;position: relative;padding: 0 10px;font-size: 50px;color: #000;font-weight: 600;}
section.menus .section-wrap .menu-list li a::before{content: '';display: block;position: absolute;left: 0;top: 42px;width: 0;height: 4px;transition: .3s ease-in-out;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-ms-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;background-color: #000;}
section.menus .section-wrap .menu-list li a:hover::before{width: 100%;}
.main section.menus .section-wrap .menu-list li a::before{background-color: #ffde00;}
footer section.menus{overflow: hidden;position: fixed;bottom: 0;width: 100%;z-index: 0;}
footer section.project{overflow: hidden;position: fixed;bottom: 0;width: 100%;z-index: 0;}

.sub-contact{}
.sub-contact .contact .section-wrap{max-width: 1320px;margin: 0 auto;padding-top: 36px;padding-bottom: 115px;box-sizing: border-box;}
.sub-contact .contact .address-wrap{position: relative; overflow: hidden;height: 100%;padding-top: 146px;padding-left: 88px;box-sizing: border-box;background-image: none;}
.sub-contact .contact .address-wrap .email{font-size: 56px;line-height: 70px;font-weight: bold;color: #000;}
.sub-contact .contact .address-wrap .email::before{content: ''; background: url('../images/common/mail.png') 100% 0 no-repeat; display: inline-block; width: 50px; height: 50px; margin-right: 10px; vertical-align: middle; background-size: cover;}
.sub-contact .contact .address-wrap p{font-size: 56px;line-height: 70px;font-weight: bold;color: #000;}
.sub-contact .contact .address-wrap .tel{font-size: 56px;line-height: 70px;font-weight: bold;color: #000;}
.sub-contact .contact .address-wrap .btn-map{padding-top: 78px;}

/* 200707 수정 */
.sub .fixed-bar::before{color: #000;}
.sub .fixed-bar::after{background-color: #000;}
.sub .fixed-bar a {color: #000;}
.sub-detail .fixed-bar a {color: #fff;}
.sub-detail .fixed-bar.black a {color: #000;}
.sub-detail .fixed-bar::after{background-color: #fff;}
.sub-detail .fixed-bar.black::after{background-color: #000;}

.sub-contact .map{height: 820px;}
.sub-contact .map .section-wrap{height: 820px;}
/* .sub-contact .map{height: 820px;background: url('./images/@thumb/thumb_1920x820.jpg') 50% 0 no-repeat;-webkit-background-size:  cover;background-size:  cover;} */

.sub-inside{}
.sub-inside h3{padding-bottom: 50px;}
.sub-inside .section-wrap{max-width: 1144px;width: 100%;margin: 0 auto;}
.sub-inside .section-wrap .inside-wrap{margin-left: -22px;margin-right: -22px;}
.sub-inside .section-wrap .inside-list:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.sub-inside .section-wrap .inside-list li{float: left;width: 33.333%;padding: 0 22px;box-sizing: border-box; border: 0;}
.sub-inside .section-wrap .inside-list li a:link{outline: none;}
.sub-inside .section-wrap .inside-list li:first-child{float: none;width: 100%;}
.sub-inside .section-wrap .inside-list li .thumb{overflow: hidden;}
.sub-inside .section-wrap .inside-list li .thumb img{width: 100%;transition: transform .5s;
-o-transition: transform .5s;
-moz-transition: transform .5s;
-webkit-transition: transform .5s;}
.sub-inside .section-wrap .inside-list li a:hover .thumb img{-webkit-transform:scale(1.1); /*  크롬 */
-moz-transform:scale(1.1); /* FireFox */
-o-transform:scale(1.1); /* Opera */
transform:scale(1.1);
transition: transform .7s;
-o-transition: transform .7s;
-moz-transition: transform .7s;
-webkit-transition: transform .7s;}
.sub-inside .section-wrap .inside-list li .text-wrap{padding-top: 32px;padding-bottom: 117px;}
.sub-inside .section-wrap .inside-list li .text-wrap .date{display: block;font-size: 24px;line-height: 30px;color: #000;font-weight: 700;font-family: 'Spoqa Han Sans', sans-serif;}
.sub-inside .section-wrap .inside-list li .text-wrap .title{display: block;padding-right: 30px;font-size: 24px;line-height: 30px;color: #000;font-weight: 700;font-family: 'Spoqa Han Sans', sans-serif;background: url('../images/common/ico_arrow_02.png') 100% 50% no-repeat;overflow: hidden;text-overflow: ellipsis;word-break: break-all;white-space: nowrap;}

.sub-inside .emphasis-text{padding-top: 47px;padding-bottom: 200px;text-align: center;}
.sub-inside .emphasis-text span{font-size: 92px;font-size: 4.79166vw;line-height: 120px;line-height: 6.25vw;font-weight: bold;color: #f2f2f2;}

.sub-detail .intro{width: 100%;height: 100vh;background: url('../images/common/bg_project_01.jpg'); background-size: cover;} /* 200702 css 수정 */
.sub-detail .intro .section-wrap{display: flex;align-items: center;flex-direction: column;justify-content: center; align-items:flex-start;position: relative; max-width: 1144px; height: 100%; margin: 0 auto; } /* 200706 css 수정 */
.sub-detail .intro .section-wrap h2{/*padding-top: 419px;*/width: 100%; font-size: 120px;line-height: 140px;color: #fff;font-weight: bold; word-break: keep-all;}  /* 200706 css 수정 */
.sub-detail .intro .section-wrap .project-info{position: absolute; bottom: 80px; padding-top: 170px;} /* 200702 css 수정 */
.sub-detail .intro .section-wrap .project-info dl{display: inline-block;padding-right: 85px;}
.sub-detail .intro .section-wrap .project-info dl dt{font-size: 20px;line-height: 34px;color: #fff;font-weight: bold;}
.sub-detail .intro .section-wrap .project-info dl dd{font-size: 16px;line-height: 34px;font-family: 'Noto sans KR',sans-serif;color: #fff;}

.sub-detail .detail .section-wrap{}
.sub-detail .detail .section-wrap .title-wrap{max-width: 1144px;margin: 0 auto;padding-top: 207px;}
.sub-detail .detail .section-wrap h2{font-size: 120px;line-height: 1;}
.sub-detail .detail .section-wrap .info-text{padding-top: 34px;font-size: 40px;line-height: 60px;color: #010101;letter-spacing: -1px;}
.sub-detail .detail .text-wrap{max-width: 1144px;margin: 0 auto;padding-top: 195px;}
.sub-detail .detail .text-wrap .inner-wrap{padding-bottom: 40px;}
.sub-detail .detail .text-wrap .inner-wrap:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.sub-detail .detail .text-wrap .btn.type01{float: left;position: relative;width: 264px;margin-top: 7px;padding-left: 18px;box-sizing: border-box;background: linear-gradient(to left, #fcfcfc, #fcfcfc 50%, #000 50%);background-size: 200% 100%;background-position: 100%;transition: background-position 600ms ease;z-index: 1;}
.sub-detail .detail .text-wrap .btn.type01:hover{background-position: 0 100%;color: #fff;}
.sub-detail .detail .text-wrap .btn.type01 span{display: block;color: #010101;font-size: 16px;font-family: 'Noto sans KR', sans-serif;transition: all .5s ease-in-out;}
.sub-detail .detail .text-wrap .btn.type01:hover span{color: #fff;}
.sub-detail .detail .text-wrap .btn + .text-box {/*margin-top: -63px;*/ padding-left: 166px; overflow: hidden; }
.sub-detail .detail .text-wrap p{float: left;font-size: 18px;line-height: 32px;color: #010101;font-family: 'Noto sans KR', sans-serif;letter-spacing: -.7px;}
.sub-detail .detail .text-wrap p + p{padding-top: 40px;}
.sub-detail .detail .text-wrap .no-url .text-box {padding-left: 428px;}
/* jun */
/* .sub-detail.detail01 .detail .text-wrap .inner-wrap{background: url('../images/common/ico_detail_01.png') 98% 100% no-repeat;} */
.sub-detail .detail .image-wrap{}
.sub-detail .detail .image-wrap .thumb img{width: 100%;}
.sub-detail .project{width: 100%;height: 670px;background: url('../images/common/bg_section_03.jpg') 50% 0 no-repeat;background-size: cover;} /* 200702 css 수정 */
.sub-detail .project .section-wrap{display: table;width: 100%;height: 100%;}
.sub-detail .project .go-to{display: table-cell;position: relative; width: 50%;height: 100%;vertical-align: middle;text-align: center;}
.sub-detail .project .go-to a{display: inline-block;transition: .5s;}
.sub-detail .project .go-to strong{font-size: 50px;font-style: italic;}
.sub-detail .project .go-to strong::before{top: 30px;}
.sub-detail .project .go-to span{position: absolute; left: 50%; font-size: 24px; padding-top: 15px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

.sub-company{}
.sub-company .intro{width: 100%;height: 634px;background-color: #eeeced;}
.sub-company .intro .section-wrap{max-width: 1144px;height: 100%;margin: 0 auto;background: url('../images/common/bg_paper.jpg') 50% 0 no-repeat;}
.sub-company .intro .section-wrap .title{padding-top: 158px;font-size: 144px;line-height: 130px;font-weight: bold;font-style: italic;color: #ffd200;}
.sub-company .intro .section-wrap .title .dot{display: inline-block;margin-left: 9px;font-size: 72px;line-height: 130px;font-style: normal;color: #000;}
.sub-company .intro .section-wrap .text{margin-top: -5px;font-size: 20px;line-height: 1;font-weight: bold;letter-spacing: -.5px;}

.sub-company .about{padding-bottom: 257px;}
.sub-company .about .section-wrap{max-width: 1670px;margin: 0 auto;padding: 0 124px;}

.sub-company .about-text{padding: 110px 124px 0;}
.sub-company .about-text .line{content: '';display: block;width: calc( 100% - 102px );height: 6px;background-color: #000;}
/* 200715 jun */
.sub-company .about-text .line.before-ani{opacity: 0;}
.sub-company .about-text .line.active-ani{opacity: 100%; animation-name: fadeInUp; animation-duration: 1.0s;}
/* 200715 jun */
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
  
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
  
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.sub-company .about-text .data-wrap{max-width: 1144px;margin: 0 auto 130px;overflow: hidden;} /* 200708 modify dew */
.sub-company .about-text .data-list{float: right;}
.sub-company .about-text .data-list li{width: 352px;padding-top: 64px;font-size: 22px;line-height: 32px;font-style: italic;font-weight: 400;color: #000;background: url('../images/common/bg_line_02.png') 0 13px no-repeat;text-align: left;}
.sub-company .about-text .data-list li:first-child{padding-top: 0;background: 0 none;}
.sub-company .about-text .data-list li span {display: block;}

/* .sub-company .studio{border-top: 6px solid #000;} */ /* 200708 dew delete */
.sub-company .studio .thumb{width: 440px;margin: 0 auto;padding-top: 180px;}

.sub-company .studio .identity{}
.sub-company .studio .identity .summary{position: relative; z-index: 1;padding: 114px 88px 112px;background-color: #ffde00;}
.sub-company .studio .identity .summary:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.sub-company .studio .identity .summary h4{float: left;width: 30%;font-size: 24px;line-height: 28px;color: #000;font-weight: 900;}
.sub-company .studio .identity .summary .text-wrap{float: left;width: 70%;}
.sub-company .studio .identity .summary .text-wrap strong{font-size: 18px;line-height: 32px;font-weight: bold;color: #000;font-family: 'Spoqa Han Sans', sans-serif;}
.sub-company .studio .identity .summary .text-wrap strong span{display: block;font-family: 'Playfair Display', serif;}
.sub-company .studio .identity .summary .text-wrap p{padding-top: 30px;font-size: 16px;line-height: 30px;color: #000;font-family: 'Spoqa Han Sans', sans-serif;}
.sub-company .studio .identity .item-list{padding-bottom: 100px;}
.sub-company .studio .identity .item-list:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.sub-company .studio .identity .item-list > li{float: left;position: relative;width: 33.333%;}
.sub-company .studio .identity .item-list li img{width: 100%;}
.sub-company .studio .identity .item-list li .text{position: absolute;right: 40px;
bottom: 25px;font-size: 14px;line-height: 30px;color: #000;font-family: 'Spoqa Han Sans', sans-serif;transform: rotate(90deg); transform-origin: 100% 100%; -webkit-transform: rotate(90deg); -webkit-transform-origin: 100% 100%; -ms-transform: rotate(90deg);-ms-transform-origin: 100% 100%;}
.sub-company .studio h3{padding-top: 200px;padding-bottom: 7px;font-size: 60px;line-height: 1;color: #000;font-weight: bold;}
.sub-company .sub-wrap h3{font-size: 60px;line-height: 1;color: #000;font-weight: bold;font-style: normal;text-align: center;}
.sub-company .sub-wrap.strength{position: relative;}
.sub-company .sub-wrap.strength p{background: none;height: 333px;padding-top: 66px;font-size: 30px;line-height: 44px;font-family: 'Spoqa Han Sans', sans-serif;color: #000;text-align: center;background: url('../images/common/bg_line_03.png') 50% 50% no-repeat;box-sizing: border-box;}
.sub-company .sub-wrap.strength p span{font-family: 'Spoqa Han Sans', sans-serif;}

.sub-company .sub-wrap.services strong{display: block;padding-top: 67px;font-size: 30px;line-height: 44px;text-align: center;font-family: 'Spoqa Han Sans', sans-serif;font-weight: normal;	}
.sub-company .sub-wrap.services p{padding-top: 22px;font-size: 13px;line-height: 20px;color: #808080;text-align: center;}

.sub-company .team{max-width: 1320px;margin: 0 auto;padding-top: 240px;}
.sub-company .team:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.sub-company .team li{float: left;position: relative;width: 25%;box-sizing: border-box;}
.sub-company .team li img{width: 100%;}
.sub-company .team li span{position: absolute;top: 0;width: 100%;height: 100%;font-size: 40px;font-style: italic;font-weight: bold;color: #000;text-align: center;display: flex;justify-content: center;align-items: center;}

.text-ani {opacity: 0;}
.ani .text-ani {display: block; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%); transform: translateY(-50px); opacity: 0; -webkit-animation-name: titleAnimation; -o-animation-name: titleAnimation; animation-name: titleAnimation; -webkit-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s;-o-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;}
.ani .text-ani:nth-child(1){-webkit-animation-delay: 1.1s;-o-animation-delay: 1.1s; animation-delay: 1.1s;}
.ani .text-ani:nth-child(3){-webkit-animation-delay: 0.9s;-o-animation-delay: 0.9s; animation-delay: 0.9s;}
.ani .text-ani:nth-child(4){-webkit-animation-delay: 0.8s;-o-animation-delay: 0.8s; animation-delay: 0.8s;}


@keyframes titleAnimation {
    0% {
      -webkit-transform: translateY(-50px);
      -ms-transform: translateY(-50px);
      -o-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  100% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    }
}

.mask-wrap {position: absolute; top: 0; left: 0; overflow: hidden; z-index: -1;}
.slash-mask {position: absolute;top: 50%;left: 50%;background: #ffde00;transform: rotate(-45deg) translate(100%);-webkit-animation-name: slash;-o-animation-name: slash;animation-name: slash;-webkit-animation-duration: 0.7; -o-animation-duration: 0.7; animation-duration:0.7s; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;-webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;-webkit-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s;}
.sub-contact .mask-wrap {width: 440px; height: 558px;}
.sub-contact .slash-mask {width:707px;height:85px;margin-left: -353px;margin-top: -42px;}

.sub-company .mask-wrap {top: auto; bottom: 0; left: 50%; width: 262px; height: 334px; margin-left: -131px;}
.sub-company .slash-mask {width:420px;height:50px;margin-left: -210px;margin-top: -25px;}

/* scrollbar */
.scrollbar::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);background-color: transparent;}
.scrollbar::-webkit-scrollbar{width: 6px;	background-color: transparent;}
.scrollbar::-webkit-scrollbar-thumb{background-color: #ffde00;}
html {scrollbar-3dLight-Color: #ffde00; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #ffde00; scrollbar-Face-Color: #ffde00; scrollbar-Track-Color: #fff;; scrollbar-DarkShadow-Color: #ffde00; scrollbar-Highlight-Color: #ffde00; scrollbar-Shadow-Color: #ffde00;}


@keyframes slash{
  0% {transform: rotate(-45deg) translate(100%);}
    100% {transform: rotate(-45deg) translate(0%);}
}


@media all and (min-width:1700px) {
	.sub-detail .detail .text-wrap .inner-wrap{width: 124%;}
	.sub-detail .detail .text-wrap p{width: 395px;}
	.sub-detail .detail .text-wrap p + p{width: 420px;padding-top: 0;padding-left: 100px;}
	.sub-detail .detail .text-wrap .btn + p{margin-top: 0;}
}

@media all and (min-width:1672px) {
	header h1{left: 124px;}
	.btn-nav{right: 124px;}

	section.works .section-wrap .work-list li.full .text-wrap strong {font-size: 90px; line-height: 1.1;}
}


@media all and (max-width:1496px) {
    .fixed-bar{padding: 0 88px;}
	.fixed-bar a{margin-right: 88px;}
	.fixed-bar::before{margin-right: 88px;}
	.header-text{padding-top: 213px;}
	.sub-inside .section-wrap{max-width: none;padding: 0 88px;}

	.sub-detail .intro .section-wrap{max-width: none;padding: 0 88px;}
	.sub-detail .detail .section-wrap .title-wrap{max-width: none;padding-left: 88px;padding-right: 88px;}
	.sub-detail .detail .text-wrap{max-width: none;padding-left: 88px;padding-right: 88px;padding-top: 140px;}
	.sub-detail .detail .text-wrap .btn + .text-box {padding-left: 67px;}
	.sub-detail .detail .text-wrap .no-url .text-box {padding-left: 330px;}

	.main .intro .text{max-width: 100%;padding-left: 88px;padding-right: 88px;}
	.main .services .text{max-width: none;padding: 0 88px;}
	.main .services .slide-text{max-width: none;padding: 0 88px;}

	.inside .section-wrap{max-width: none;padding: 0 88px;}
	.inside .section-wrap h3{margin-left: 0;}

	.services .team{padding: 0 88px;}

	section.partners .section-wrap{max-width: none;padding: 0 88px;}
	.sub-company .intro .section-wrap{max-width: none;padding: 0 88px;}
	.sub-company .about .section-wrap{max-width: none;padding: 0 88px;}
	.sub-company .about-text{padding-left: 88px;padding-right: 88px;} /*200708*/

	.sub-contact .contact .section-wrap{max-width: none;padding-left: 88px;padding-right: 88px;}
    .inside .section-wrap .text-wrap .inside-list li a{font-size: 20px;}
    .inside .section-wrap .view-more a{font-size: 22px;}
}

@media all and (max-width:1320px) {
    h3{font-size: 55px;}
    .fixed-bar{padding: 0 88px;}
    .fixed-bar::before{margin-right: 88px;}
    /* .main .intro .section-wrap{height: 181px;} */
    .main .intro .text .message-wrap{height: 72px;}
    .main .intro .text span{font-size: 80px;line-height: 72px;}
    .main .intro .text .message span{font-size: 80px;line-height: 72px;height: 72px;}
    .main .intro .text .message span i{font-size: 40px;line-height: 72px;}
    .services .team li:nth-child(4){font-size: 55px;}
    .services .team li:nth-child(4) p{font-size: 18px;line-height: 28px;}
    .services .team li span{font-size: 36px;}

    /*WORK*/
    section.works .section-wrap .work-list li.full a{width: 100%;}
   /*  section.works .section-wrap .work-list li.odd .title,
    section.works .section-wrap .work-list li.even .title{font-size: 17px;line-height: 28px;}
    section.works .section-wrap .work-list li.full .text-wrap .title{font-size: 17px;line-height: 28px;} */
    section.menus .section-wrap .menu-list li a{font-size: 34px;}
    section.menus .section-wrap .menu-list li a::before{top: 28px;} /*200612*/

    /*COMPANY*/
    .sub-company .intro .section-wrap .title{padding-top: 178px;font-size: 100px;line-height: 90px;}
    .sub-company .intro .section-wrap .text{font-size: 14px;}
    .sub-company .about .section-wrap .data-list li{font-size: 15px;line-height: 22px;}
    .sub-company .sub-wrap h3{font-size: 41px;}
    .sub-company .sub-wrap.strength p{padding-top: 100px;font-size: 20px;line-height: 30px;}
    .sub-company .team li span{font-size: 28px;}
    .sub-company .sub-wrap.services strong{font-size: 20px;line-height: 30px;}

    /*DETAIL*/
    .sub-detail .intro .section-wrap h2{font-size: 83px;line-height: 96px;}  /* 200706 css 수정 */
    .sub-detail .detail .section-wrap h2{font-size: 83px;}
    .sub-detail .detail .section-wrap .info-text{font-size: 28px;line-height: 41px;}
    .sub-detail .detail .text-wrap p{font-size: 16px;line-height: 30px;}
    .sub-detail .project .go-to strong{font-size: 34px;}
    .sub-detail .project .go-to strong::before{top: 19px;}
    .sub-detail .project .go-to span{font-size: 17px;}

    /*INSIDE*/
    .sub-inside .section-wrap .inside-list li .text-wrap .date{font-size: 18px;line-height: 22px;}
    .sub-inside .section-wrap .inside-list li .text-wrap .title{font-size: 18px;line-height: 22px;}
    .sub-inside .emphasis-text{font-size: 63px;}

    /*CONTACT*/
    .sub-contact .contact .address-wrap{padding-top: 180px;}
    .sub-contact .contact .address-wrap .email{font-size: 39px;line-height: 48px;}
    .sub-contact .contact .address-wrap p{font-size: 39px;line-height: 48px;}
    .sub-contact .contact .address-wrap .tel{font-size: 39px;line-height: 48px;}
    .sub-contact .contact .address-wrap .btn-map{padding-top: 160px;}

}

@media all and (max-width:1144px) {
	section.works .section-wrap .work-list{margin-left: -22px;margin-right: -22px;}
	section.works .section-wrap .work-list li{padding: 0 22px;}
	section.works .section-wrap .work-list li.odd{width: 50%;}
	section.works .section-wrap .work-list li.even{width: 50%;}
	section.works .section-wrap .work-list li.odd .title,
	section.works .section-wrap .work-list li.even .title{display: block;position: static;right: auto;bottom: auto;padding-top: 25px;-webkit-transform: none;transform: none;height: 52px;}
	section.works .section-wrap .work-list li .thumb img{width: 100%;}
	section.works .section-wrap .work-list li.full{position: relative;height: auto;padding-left: 22px;}
	section.works .section-wrap .work-list li.full .thumb{width: 100%;padding-right: 0;box-sizing: border-box;}
	section.works .section-wrap .work-list li.full .text-wrap{padding-left: 0;}
	.inside .section-wrap .text-wrap{display: block;}
	.inside .section-wrap .text-wrap .inside-list{padding-top: 40px;}

	.sub-company .team li{width: 50%;}

    .services .team li:nth-child(4){padding-left: 6.666%;}
    section.works .section-wrap .work-list li.full .thumb{padding-right: 7%;}
    section.works .section-wrap .work-list li.full .thumb img{width: 100%;}

}

@media all and (max-width:1080px) {
	.sub-company .studio .identity .summary h4{float: none;width: 100%;}
	.sub-company .studio .identity .summary .text-wrap{float: none;width: 100%;padding-top: 40px;}

}

@media all and (max-width:960px) {
	.sub-inside .section-wrap .inside-list li{width: 50%;}
	.inside .section-wrap .text-wrap .inside-list{width: 100%;}

	.services .team li{width: 50%;}
	.services .team li:nth-child(3){float: right;}
	.services .team li:nth-child(4){float: left;width: 50%;font-size: 50px;line-height: 42px;padding-bottom: 100px;}
	.services .team li:nth-child(4) h3{padding-top: 36.26666vw;font-size: 50px;line-height: 42px;}
	.services .team li:nth-child(4) h3.for-pc{display: none;}
	.services .team li:nth-child(4) h3.for-mobile{display: block;}
	.services .team li:nth-child(4) p{padding-top: 14px;font-size: 13px;line-height: 20px;}

	section.partners .partner-list li{width: 50%;padding-top: 40px;}
	section.partners .partner-list li:nth-child(1){padding-top: 0;}
	section.partners .partner-list li:nth-child(2){padding-top: 0;}
	section.partners .partner-list li span{height: 74px;}
}

@media all and (min-width:768px) {
	.sub-detail .project .go-to span{display: block;color: #fff;font-weight: 600;opacity: 0; transition: opacity .3s ease-out; -moz-transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out; -o-transition: opacity .3s ease-out;}
	.sub-detail .project .go-to a:hover span{padding-bottom: 35px;opacity: 1;transition: opacity 1s ease-in; -moz-transition: opacity 1s ease-in; -webkit-transition: opacity 1s ease-in; -o-transition: opacity 1s ease-in;}
	.sub-detail .project .go-to.prev a:hover span{background: url('../images/common/ico_arrow_03.png') 50% 100% no-repeat;}
	.sub-detail .project .go-to.next a:hover span{background: url('../images/common/ico_arrow_04.png') 50% 100% no-repeat;}
	.sub-detail .project .go-to strong{display: inline-block;position: relative;padding: 0 10px;line-height: 1;font-weight: bold;color: #fff;}
	.sub-detail .project .go-to strong::before{content: '';display: inline-block;position: absolute;left: 0;width: 0;height: 4px;background-color: #ffde00;transition: .3s ease-in-out;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-ms-transition:.3s ease-in-out;-o-transition:.3s ease-in-out}
	.sub-detail .project .go-to a:hover strong::before{width: 100%;transition: .3s ease-in-out;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-ms-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;}
}
@media all and (max-width:768px) {
	.video-wrap video{width: auto !important;height: 100% !important;} /* 200708 add dew */
    .main .border-box{display:none;}
	.main .intro.bg{background-position:0 0;}
	.main .intro.second{padding-bottom: 100px;min-height: 100vw;}
	.main .intro .section-wrap{height: 200px;}
	.fixed-bar{padding: 0 30px;}
    /* .main .fixed-bar.area-hide{background-color: #fff;} */
	.fixed-bar{padding: 0 30px;}
	.fixed-bar::after{width: 100%;}
	.fixed-bar a {display: none;}
	#wrap{margin-bottom: 375px;}
	#wrap.main{margin-bottom: 438px;}
	.for-pc{display: none;}
	.for-mobile{display: block;}
	.btn.medium{font-size: 13px;height: 40px;line-height: 38px;}

	h3{font-size: 50px;line-height: 70px;}
	header h1{top: 25px;left: 30px;}
    header h1 a{width: 48px;height: 47px;background: url(../images/common/logo_02_m.png) 0 0 no-repeat;-webkit-background-size: 48px auto;background-size: 48px auto;}
    header h1 a::before{bottom: -26px; height: 19px; background:  url(../images/common/logo_text_m.png) no-repeat 50% 0; ;-webkit-background-size: 46px auto;background-size: 46px auto;}
	.sub header h1 a{width: 48px;height: 47px;background: url(../images/common/logo_02_m.png) 0 0 no-repeat;-webkit-background-size: 48px auto;background-size: 48px auto;}

	.btn-nav{top: 25px;right: 30px;padding: 9px 31px 12px 0;}
	.btn-nav span,
	.btn-nav span:before,
	.btn-nav span:after{width: 31px;height: 3px;}
	.btn-nav span:before{top: -8px;}
	.btn-nav span:after{bottom: -8px;}

	nav.active::before{border: 8px solid #ffde00; -webkit-animation-duration: none; -webkit-animation: none;  -moz-animation: none;  -o-animation: none;  animation: none;}
	nav .menu-list{-ms-transform: translateY(-60%);transform: translateY(-60%);text-align: left;}
	nav .menu-list li{padding-left: 16.666%;}
	nav .menu-list li a{font-size: 50px;line-height: 65px;}
	nav .menu-list li a span{font-size: 50px;line-height: 65px;}
	/* IE */
	.msie .menu-list li a span::before {height: 4px; top: 37px;}
	nav .links{left: 16.666%;bottom: 17%;}
	nav .links li a{padding-right: 15px;font-size: 14px;line-height: 25px;}
	nav .links li.download a{background: url(../images/common/ico_download_m.png) 100% 50% no-repeat;-webkit-background-size: 9px auto;background-size: 9px auto;}
	nav .links li.blog a{background: url(../images/common/ico_blog_m.png) 100% 50% no-repeat;-webkit-background-size: 8px auto;background-size: 8px auto;}

	nav .copyright{left: 16.66666%;bottom: 10%;text-align: left;font-size: 12px;}
	nav .copyright::before{font-size: 12px;}

    .header-text{padding-top: 176px;padding-bottom: 7px;font-size: 13px;line-height: 20px;}
    
    .sub-contact .contact .address-wrap .email::before {width: 40px; height: 40px;}

	.sub-inside h3{padding-bottom: 35px;}
	.sub-inside .section-wrap{padding: 0 30px;}
	.sub-inside .section-wrap .inside-list li .text-wrap{padding-top: 13px;}
	.main footer section.menus{height: 438px;}
	section.menus{height: 375px;background: url(../images/common/bg_section_02_m.jpg) 50% 0 no-repeat;-webkit-background-size: cover;background-size: cover;}
	.sub-inside .section-wrap .inside-list li:last-child .text-wrap{padding-bottom: 80px;}
	section.menus .section-wrap{display: table;/*position: relative;*/}
	.main section.menus .section-wrap .menu-list{display: table-cell;text-align: center;vertical-align: middle;}
	.main section.menus .section-wrap .menu-list li{display: block;width: 100%;}
    section.menus .section-wrap .menu-list{display: table-cell;vertical-align: middle;}
    section.menus .section-wrap .menu-list li{display: block;width: 100%;}
	section.menus .section-wrap .menu-list li a{font-size: 32px;line-height: 60px;font-weight: 700;font-style: italic;}
	section.menus .section-wrap .menu-list li a::before{top: 32px;}

	.main .intro::before{display: none;}
	.main .intro .text{padding: 0 30px;}
    .main .intro .text span .for-pc{display: none;}
	.main .intro .text span{font-size: 60px;line-height: 55px;letter-spacing: -0.5px;}
    .main .intro .text span .for-mobile{display: inline-block;}
    .main .intro .text span.emphasis{margin-top: 26px;}
    .main .intro .text .message{-webkit-animation: opencloses 5s ease-in-out infinite;animation: opencloses 5s ease-in-out infinite;}
    .main .intro .text .message span{font-size: 60px;line-height: 55px;background: transparent;}
    .main .intro .text .message span i{font-size: 35px;}
    /* .main .intro .section-wrap{overflow: visible;} */


    @keyframes opencloses {
        0%  {top: 0;width: 0;}
        5%  {width: 0;}
        15% {width: calc(75% + 20px);}
        30% {top: 0;width: calc(75% + 20px);}
        33% {top: 0;width: 0;}
        38% {top: -100%;width: 0;}
        48% {width: calc(48% + 20px);}
        62% {top: -100%;width: calc(48% + 20px);}
        66% {top: -100%;width: 0;}
        71% {top: -200%;width: 0;}
        86% {width: calc(65% + 20px);}
        98% {top: -200%;width: calc(65% + 20px);}
        99% {top: -200%;width: 0;}
        100%{top: 0;width: 0;}
    }

    @-webkit-keyframes opencloses {
        0%  {top: 0;width: 0;}
        5%  {width: 0;}
        15% {width: calc(75% + 20px);}
        30% {top: 0;width: calc(75% + 20px);}
        33% {top: 0;width: 0;}
        38% {top: -100%;width: 0;}
        48% {width: calc(48% + 20px);}
        62% {top: -100%;width: calc(48% + 20px);}
        66% {top: -100%;width: 0;}
        71% {top: -200%;width: 0;}
        86% {width: calc(65% + 20px);}
        98% {top: -200%;width: calc(65% + 20px);}
        99% {top: -200%;width: 0;}
        100%{top: 0;width: 0;}
}

    .sub-contact .map{height: 500px;}
    .sub-contact .map .section-wrap{height: 500px;}

	.services .team{padding: 0;}
	.services .team li span{font-size: 23px;}
	.main .services{padding-top: 70px;}
	.main .services .text{padding: 0 30px;}
	.main .services .text span{font-size: 60px;font-size: 8vw;line-height: 55px;line-height: 7.33333vw;letter-spacing: -0.66666vw;}
	.main .services .text span.last{padding-top: 27px;padding-top: 3.59999vw;font-size: 60px;font-size: 8vw;line-height: 55px;line-height: 7.33333vw;letter-spacing: 0;}
	.main .services .slide-text{margin-bottom: 82px;padding: 0 30px;font-size: 60px;line-height: 55px;}
	.main .services .slide-text strong{font-size: 60px;font-size: 8vw;line-height: 55px;line-height: 7.33333vw;}
	.main .services .slide-text .text{width: 37vw;padding: 0;}

	section.partners{padding: 70px 0 80px;}
	section.partners .section-wrap{padding: 0 30px;}
	section.partners .partner-list li{padding-top: 20px;}
	section.partners .partner-list li span{height: 37px;}
	section.partners .partner-list li img{height: 100%;}

    .main section.works{padding-top: 91px;}
    .main section.works h3{padding-bottom: 35px;}


	.inside{height: 570px;background: url(../images/common/bg_section.jpg) 0 0 no-repeat;-webkit-background-size: cover;background-size: cover;}
	.inside .section-wrap{padding: 0 30px;}
	.inside .section-wrap h3{padding-top: 95px;font-size: 40px;line-height: 1;}
	.inside .section-wrap .text-wrap .inside-list li{padding-top: 29px;}
	.inside .section-wrap .text-wrap .inside-list li a{line-height: 38px;font-size: 16px;border-bottom: 2px solid #000;;}
	.inside .section-wrap .text-wrap .inside-list li a::before {width: 24px; height: 17px; background: url(../images/common/ico_arrow.png) 100% 50% no-repeat; -webkit-background-size: cover; background-size: cover; margin-top: -8px;}
	.inside .section-wrap .text-wrap .inside-list li a:hover::before {-webkit-animation-duration: none; -webkit-animation: none;  -moz-animation: none;  -o-animation: none;  animation: none;}
	.inside .section-wrap .view-more{padding-top: 31px;font-size: 20px;}
	.inside .section-wrap .view-more a{font-size: 20px;}

	.sub-inside .emphasis-text{padding-top: 0;padding-left: 30px;padding-right: 30px;padding-bottom: 103px;text-align: left;}
	.sub-inside .emphasis-text span{font-size: 13.33333vw;line-height: 1;} /*200612*/
	.sub-inside .section-wrap .inside-list li:first-child{width: auto;margin-left: -8px;margin-right: -8px;padding: 0;}
	.sub-inside .section-wrap .inside-list li:first-child .text-wrap{padding-left: 30px;padding-right: 30px;padding-bottom: 67px; }
	.sub-inside .section-wrap .inside-list li .text-wrap .date{font-size: 20px;line-height: 22px;background: url('../images/common/ico_arrow_02_m.png') 100% 50% no-repeat;-webkit-background-size: 16px auto;background-size: 16px auto;}
	.sub-inside .section-wrap .inside-list li .text-wrap .title{font-size: 20px;line-height: 22px;background: 0 none;}

	.sub-detail .project{display: table;height: 375px;background: url('../images/common/bg_section_03_m.jpg') 50% 0 no-repeat;-webkit-background-size: cover;background-size: cover;}
	.sub-detail .project .section-wrap{display: table-cell;height: 100%;vertical-align: middle;}
	.sub-detail .project .go-to{display: block;width: 100%;height: auto;}
    /* jun */
	/* .sub-detail .intro{height: 666px;background: url(../images/common/bg_project_01_m.jpg);background-size: cover;-webkit-background-size: cover;} */
	.sub-detail .intro .section-wrap{padding: 0 30px;}
	.sub-detail .intro .section-wrap h2{position: relative; top: auto; font-size: 50px;line-height: 1; margin-top: 0; text-align: left; padding-bottom: 78px;letter-spacing: -1.5px;} /* 200707 css 수정 */
	.sub-detail .intro .section-wrap .project-info{left: 30px; bottom: 12vh; padding-top: 0; /*padding-bottom: 87px;*/} /* 200707 css 수정 */
	.sub-detail .intro .section-wrap .project-info dl{display: block;padding-right: 0;padding-bottom: 17px;}
	.sub-detail .intro .section-wrap .project-info dl dt{font-size: 14px;line-height: 19px;}
	.sub-detail .intro .section-wrap .project-info dl dd{font-size: 14px;line-height: 19px;}

	.sub-detail .detail .section-wrap .title-wrap{padding-top: 117px;padding-left: 30px;padding-right: 30px;}
	.sub-detail .detail .section-wrap h2{font-size: 50px;letter-spacing: -1.5px;}
	.sub-detail .detail .section-wrap .info-text{padding-top: 21px;font-size: 20px;line-height: 30px;}
	.sub-detail .detail .text-wrap{padding-top: 37px;padding-left: 30px;padding-right: 30px;}
	.sub-detail .detail .text-wrap .btn.type01{float: none;width: 170px;}
    .sub-detail .detail .text-wrap .btn.type01 span{font-size: 13px;}
	.sub-detail .detail .text-wrap .btn + .text-box{float: none;margin-top: 0;padding-left: 0;}
	.sub-detail .detail .text-wrap p{float: none;padding-top: 44px;padding-left: 0;font-size: 13px;line-height: 23px;}
	.sub-detail .detail .text-wrap p + p{padding-top: 27px;}
    .sub-detail .detail .text-wrap .inner-wrap{padding-bottom: 103px;}
	.sub-detail .detail .text-wrap .no-url .text-box {padding-left: 0;}
    /* jun */
	/* .sub-detail.detail01 .detail .text-wrap .inner-wrap{margin-bottom: 39px;background: url(../images/common/ico_detail_01_m.png) 0 100% no-repeat;-webkit-background-size: 101px auto;background-size: 101px auto;} */

	.sub-detail .project .go-to a{display: block;padding-bottom: 14px;}
	.sub-detail .project .go-to a strong{display: block;color: #fff;font-size: 32px;line-height: 60px;}
	.sub-detail .project .go-to a span{display: block;position: relative; left: auto; padding-bottom: 31px;color: #fff;font-size: 16px;line-height: 1;padding-top: 2px; transform: translateX(0);}
	.sub-detail .project .go-to.prev a span{background: url('../images/common/ico_arrow_03_m.png') 50% 100% no-repeat;-webkit-background-size: 18px auto;background-size: 18px auto;}
	.sub-detail .project .go-to.next a span{background: url('../images/common/ico_arrow_04_m.png') 50% 100% no-repeat;-webkit-background-size: 18px auto;background-size: 18px auto;}

	.sub-company .intro{height: 461px;}
	.sub-company .intro .section-wrap{padding: 0 30px;background: url(../images/common/bg_paper_m.jpg) 50% 100% no-repeat;background-size: cover;-webkit-background-size: cover;}
	.sub-company .intro .section-wrap .title{padding-top: 195px;font-size: 72px;line-height: 65px;}
	.sub-company .intro .section-wrap .title .dot{margin-left: 6px;font-size: 36px;line-height: 65px;}
	.sub-company .intro .section-wrap .text{margin-top: 0;padding-top: 8px;font-size: 13px;}

	.sub-company .about .section-wrap{padding: 0 30px;}
	.sub-company .about-text{padding-left: 30px;padding-right: 30px;} /*200708*/
    .sub-company .about-text .line{width: 100%;}
	.sub-company .about-text .data-list{float: none;}
	.sub-company .about-text .data-list li{width: auto;padding-top: 54px;font-size: 17px;line-height: 27px;background: url(../images/common/bg_line_02_m.png) 0 13px no-repeat;-webkit-background-size: 21px auto;background-size: 21px auto;}
	.sub-company .studio .thumb{width: auto;padding-top: 98px;text-align: center;}
	.sub-company .studio .thumb img{width: 220px;margin: 0 auto;}
	.sub-company .studio .identity .summary{margin-left: -30px;margin-right: -30px;padding: 70px 30px 65px;}
	.sub-company .studio .identity .summary h4{font-size: 22px;line-height: 1;}
	.sub-company .studio .identity .summary .text-wrap{padding-top: 27px;}
	.sub-company .studio .identity .summary .text-wrap strong{font-size: 11px;line-height: 23px;}
	.sub-company .studio .identity .summary .text-wrap p{padding-top: 29px;font-size: 11px;line-height: 23px;}

	.sub-company .studio .identity .item-list{margin-left: -30px;margin-right: -30px;padding-bottom: 0;}
	.sub-company .studio .identity .item-list li .text{right: 15px;bottom: 15px;font-size: 11px;line-height: 1;transform: none;}
	.slick-dots{position: absolute;left: 0;right: 0;bottom: 17px;text-align: center;}
	.slick-dots li{display: inline-block;margin: 0 5px;}
	.slick-dots li button{width: 8px;height: 8px;text-indent: -9999px;background-color: #000;}
	.slick-dots li.slick-active button{width: 30px;background-color: #ffde00;}

	.sub-company .about{padding-bottom: 120px;}
	.sub-company .sub-wrap h3{padding-top: 114px;font-size: 40px;}
	.sub-company .sub-wrap.strength p{height: 167px;padding-top: 34px;font-size: 15px;line-height: 22px;background: url(../images/common/bg_line_03.png) 50% 50% no-repeat;-webkit-background-size: 132px auto;background-size: 132px auto;}
	.sub-company .team{padding-top: 120px;}
	.sub-company .team li span{font-size: 19px;}
	.sub-company .sub-wrap.services h3{padding-top: 74px;}
	.sub-company .sub-wrap.services strong{padding-top: 20px;font-size: 15px;line-height: 22px;}
	.sub-company .sub-wrap.services p{padding-top: 15px;font-size: 9px;line-height: 15px;}

	.sub-works section.works .section-wrap{padding: 0 30px;}
	section.works .section-wrap{padding:  0 30px;}
	section.works .section-wrap .work-list{margin: 0;}
	section.works .section-wrap .work-list li{margin-top: 0;margin-bottom: 67px;padding: 0;}
	section.works .section-wrap .work-list li.odd{width: 100%;}
	section.works .section-wrap .work-list li.even{width: 100%;}

	section.works .section-wrap .work-list li.odd .title, section.works .section-wrap .work-list li.even .title{padding-top: 11px;font-size: 15px;line-height: 22px;height: auto;}

	.sub-works .works h3{padding-top: 0;padding-bottom: 35px;}
	section.works .section-wrap .work-list li.full{width: 100%;padding-left: 0;}
	section.works .section-wrap .work-list li.full .thumb{width: 100%;padding-right: 0;}
	section.works .section-wrap .work-list li.full .text-wrap{display: block;padding-top: 96px;padding-bottom: 33px;}
	section.works .section-wrap .work-list li.full .text-wrap strong{font-size: 43px;line-height: 48px;}
	section.works .section-wrap .work-list li.full .text-wrap .title{padding-top: 7px;font-size: 12px;line-height: 20px;}
	section.works .view-more{margin-top: 5px;padding-bottom: 140px;padding-left: 0;margin-top: 0;text-align: center;}
	section.works .view-more a{font-size: 24px;}
	section.works .view-more a::after{width: 15px;height: 15px;-webkit-background-size: 15px auto;background-size: 15px auto;}
    section.works .section-wrap .work-list li.odd .title,
    section.works .section-wrap .work-list li.even .title{font-size: 15px;line-height: 22px;}

	.sub-contact .contact .section-wrap{height: auto;padding-top: 180px;padding-left: 30px;padding-right: 30px;padding-bottom: 95px;}
	.sub-contact .contact .section-wrap{font-size: 28px;line-height: 37px;}
	.sub-contact .contact .address-wrap{padding-top: 29px;padding-left: 0;}
	.sub-contact .contact .address-wrap .email{font-size: 28px;line-height: 37px;}
	.sub-contact .contact .address-wrap p{font-size: 28px;line-height: 37px;}
	.sub-contact .contact .address-wrap .tel{font-size: 28px;line-height: 37px;}
	.sub-contact .contact .address-wrap .btn-map{padding-top: 69px;}
	.sub-contact .contact .address-wrap .btn-map img{width: 69px;}

    .ani .text-ani {transform: translateY(-25px);}
    .sub-contact .ani .mask-wrap {width: 220px; height: 280px;}
    .sub-contact .ani .slash-mask {width: 367px; height: 42px; margin-left: -184px; margin-top: -21px;}
    .sub-company .ani .mask-wrap {width: 131px; height: 165px; margin-left: -65px;}
    .sub-company .ani .slash-mask {width:210px;height:25px;margin-left: -105px;margin-top: -13px;}


    @keyframes titleAnimation {
        0% {
          -webkit-transform: translateY(-25px);
          -ms-transform: translateY(-25px);
          -o-transform: translateY(-25px);
          transform: translateY(-25px);
          opacity: 0;
          -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
          clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
      }
      100% {
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0);
          opacity: 1;
          -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
          clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
        }
    }
}

@media all and (max-width:640px) {
	.sub-inside .section-wrap .inside-list li{width: 100%;}
}

@media all and (max-width:340px) {
    .sub-company .intro .section-wrap .title{font-size: 62px;line-height: 52px;}
    .main .intro .text span{font-size: 50px;line-height: 45px;}
    .main .intro .text .message-wrap{height: 45px;}
    .main .intro .text .message span{height: 45px;line-height: 45px;font-size: 50px;}
    .main .intro .text .message span i{line-height: 45px;}
    .sub-contact .contact .address-wrap .email::before {width: 30px; height: 30px;}

    @keyframes opencloses {
        0%  {top: 0;width: 0;}
        5%  {width: 0;}
        15% {width: calc(75% + 20px);}
        30% {top: 0;width: calc(75% + 20px);}
        33% {top: 0;width: 0;}
        38% {top: -100%;width: 0;}
        48% {width: calc(48% + 20px);}
        62% {top: -100%;width: calc(48% + 20px);}
        66% {top: -100%;width: 0;}
        71% {top: -200%;width: 0;}
        86% {width: calc(65% + 20px);}
        98% {top: -200%;width: calc(65% + 20px);}
        99% {top: -200%;width: 0;}
        100%{top: 0;width: 0;}
    }

    @-webkit-keyframes opencloses {
        0%  {top: 0;width: 0;}
        5%  {width: 0;}
        15% {width: calc(75% + 20px);}
        30% {top: 0;width: calc(75% + 20px);}
        33% {top: 0;width: 0;}
        38% {top: -100%;width: 0;}
        48% {width: calc(48% + 20px);}
        62% {top: -100%;width: calc(48% + 20px);}
        66% {top: -100%;width: 0;}
        71% {top: -200%;width: 0;}
        86% {width: calc(65% + 20px);}
        98% {top: -200%;width: calc(65% + 20px);}
        99% {top: -200%;width: 0;}
        100%{top: 0;width: 0;}
    }
}