@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');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@font-face {
	font-family: 'GmarketSansMedium';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'NotoSansDemiLight';
	font-style: normal;
	font-weight: 350;
	src: url('../fonts/NotoSansKR-DemiLight.otf') format('opentype');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('../fonts/Pretendard/Pretendard-Light.eot');
    src: url('../fonts/Pretendard/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard/Pretendard-Light.woff2') format('woff2'),
        url('../fonts/Pretendard/Pretendard-Light.woff') format('woff'),
        url('../fonts/Pretendard/Pretendard-Light.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Pretendard/Pretendard-Regular.eot');
    src: url('../fonts/Pretendard/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard/Pretendard-Regular.woff2') format('woff2'),
        url('../fonts/Pretendard/Pretendard-Regular.woff') format('woff'),
        url('../fonts/Pretendard/Pretendard-Regular.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/Pretendard/Pretendard-Medium.eot');
    src: url('../fonts/Pretendard/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard/Pretendard-Medium.woff2') format('woff2'),
        url('../fonts/Pretendard/Pretendard-Medium.woff') format('woff'),
        url('../fonts/Pretendard/Pretendard-Medium.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('../fonts/Pretendard/Pretendard-SemiBold.eot');
    src: url('../fonts/Pretendard/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard/Pretendard-SemiBold.woff2') format('woff2'),
        url('../fonts/Pretendard/Pretendard-SemiBold.woff') format('woff'),
        url('../fonts/Pretendard/Pretendard-SemiBold.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/Pretendard/Pretendard-Bold.eot');
    src: url('../fonts/Pretendard/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard/Pretendard-Bold.woff2') format('woff2'),
        url('../fonts/Pretendard/Pretendard-Bold.woff') format('woff'),
        url('../fonts/Pretendard/Pretendard-Bold.ttf') format("truetype");
    font-display: swap;
}

:root{
	--vh100: calc(var(--vh, 1vh) * 100);
}

/* @import url(./jquery-ui.min.css); */

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

/* hanbom reset*/
body{min-height: 100vh; line-height: 1.5;}
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', 'Spoqa Han Sans', 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="file"]{border-radius:0}
button, input[type="reset"],
input[type="button"], input[type="submit"]{overflow:visible;-webkit-appearance:none;border-radius:0;cursor:pointer}
input,
select,
textarea,
input::-webkit-search-cancel-button,
input::-webkit-calendar-picker-indicator,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
input,
select,
textarea {font-weight: 600; font-family: inherit; background-color: inherit;
	outline: none;
	border:0;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	padding: 0;
}
::placeholder{color:#969696;opacity:1}
::-webkit-input-placeholder{color:#969696;}
::-moz-placeholder{color:#969696;}
:-ms-input-placeholder{color: #969696;}
:-moz-placeholder{color:#969696;}


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;}

div, article, aside, footer, header, hgroup, main, menu, nav, section,
h1, h2, h3, h4, h5, h6, p,
ul, ol, li,
nav a,
label{
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

fieldset {min-width: 0;}

/* link */
a {color:#000; text-decoration: none;}
.underline {text-decoration: underline;}

#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.dark {background-color: #000; color: #fff;}
.btn.white {background-color: #fff; border: 1px solid #e6e6e6; color: #000;}
.btn.small{height: 36px; line-height: 34px; font-weight: 700; font-size: 14px; letter-spacing: -0.28px; padding-left: 24px; padding-right: 24px;}
.btn.medium{font-size: 16px;height: 56px;line-height: 54px;}
.btn.round {border-radius: 50%;}

.btn-area {display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
	/*font-size: 0;*/
}
.btn-area.center {-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}

body.nav-active{overflow: hidden;}

.img-wrap img {width: 100%;}

.flex-wrap {display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}

/* checkbox */
input[type="radio"] ,
input[type="checkbox"] {cursor: pointer;}
.radio,
.checkbox						{position: relative; vertical-align: middle; display: inline-block; overflow: hidden; margin:0; width: 20px; height: 20px;}


.checkbox:before,
.radio:before,
.checkbox:after,
.radio:after					{width: 100%; height: 100%; box-sizing: border-box;}
.checkbox:before,
.checkbox:after,
.radio:before,
.radio:after					{content: ''; display: block; box-sizing: border-box;
	-webkit-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
}
.radio:before,
.checkbox:before 				{border: 1px solid rgba(0, 0, 0, 0.07); background-color: rgba(0, 0, 0, 0.02);}
.checkbox:after,
.radio:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
input[type="radio"] + span,
input[type="checkbox"] + span				{width: calc(100% - 20px); font-weight: 600; color: #969696; cursor: pointer; box-sizing: border-box; transition:all .2s ease-in-out;}
input[type="radio"] + span > strong,
input[type="checkbox"] + span > strong {color: #000;}
.radio + span,
.checkbox + span {line-height: 1; padding-left: 10px;}
@media all and (max-width: 768px) {
}

.checkbox:before,
.radio:before {border-radius: 2px;}
.checkbox:after,
.radio:after {background-image: url('../images/common/uio_check.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 13px 14px;}
.checkbox:checked::before {background-color:#ffde00; border-color: #ffde00;}
.radio:checked::before {background-color:#ffde00;}

.check-wrap						{
	display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.check-wrap.has-input-text {width: 100%;}
.check-wrap.has-input-text .input-cover {display: none;}
.check-wrap.has-input-text .checkbox:checked + span + .input-cover {display: block;}
.check-wrap.has-input-text .checkbox + span {width: auto;}
@media all and (min-width: 769px) {
	/* .check-wrap:not(.has-input-text) .checkbox + span {width: calc(100% - 20px);} */
	.check-wrap.has-input-text .input-cover {margin-left: 32px;}
}
@media all and (max-width: 768px) {
	.check-wrap.has-input-text {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
}


.input-cover {-webkit-align-items: center; -ms-flex-align: center; align-items: center;
	position: relative; background-color: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 2px; 
}
/* input-text */
.input-text								{-webkit-box-flex: 1; -ms-flex: 1; flex: 1;
	height: 56px; padding: 0 32px; background-color: transparent;
}
.input-text.hasDatepicker + img {position: absolute; top: 20px; right: 32px;}
.input-cover {transition: 0.2s ease-in-out;}
.input-cover:focus-within {border-color: var(--black);}
.input-cover.enter,
.dropdown .input-cover.picked {background-color: #fff; border-color: #000;}
@media all and (max-width: 768px) {
	.input-text	{padding: 0 24px;}
	.input-text.hasDatepicker + img {right: 24px;}
}

/* .field */
.field,
.insert,
.inputs,
.input-cover,
.input-value,
.label-wrap,
.field-msg  {
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	width: 100%;
}
.field {-webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
	-webkit-align-content: flex-start;-ms-flex-line-pack: start; align-content: flex-start;
	-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; 
}
.insert {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
	height: 100%;
}
.insert.checks .btn {display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; 
	position: relative; background-color: rgba(0, 0, 0, 0.02); border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.07); cursor: pointer; padding: 16px 32px; margin: 6px;}
.insert.checks .btn > input {width: 0; height: 0; margin: 0;}
.insert.checks .btn > input:checked {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fffbd3; outline: 1px solid #ffde00;}
.insert.checks .btn > input + span {position: relative; top: 1px; width: 100%;}
.insert.checks .btn > input:checked + span {color: #ffb800;}
.insert.col {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.inputs,
.label-wrap {-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.label {font-weight: 700; font-size: 18px; letter-spacing: -0.36px;}
.label-wrap + .insert ,
.label + .insert {margin-top: 28px;}
.field i.required {display: inline-block; color: #ffb800;}
.input-value {border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 20px;}
.input-value > span {font-weight: 700; font-size: 16px; letter-spacing: -0.32px; color: #999;}
.textarea-box {width: 100%; padding: 24px;}
.textarea {width: 100%; background-color: transparent;}
.field-msg {margin-top: 12px;}
.field-msg > .ico {margin-top: -1px;}
.field-msg > p {width: calc(100% - 20px); font-weight: 700; font-size: 14px; letter-spacing: -0.28px; color: #808080; padding-left: 8px;}
@media all and (min-width: 769px) {
	.field.half,
	.inputs > div {width: calc((100% - 12px) / 2);}
	.insert.checks {margin-top: calc(28px - 8px);}
	.insert.checks.picks {width: calc(100% + (6px + 2px)); margin-top: calc(20px - 6px); margin-left: -6px;}
	.insert .check-wrap {margin-top: 8px; margin-bottom: 8px;}
	.insert .check-wrap span {padding-right: 38px}
}
@media all and (max-width: 768px) {
	.label-wrap + .insert ,
	.label + .insert {margin-top: 20px;}
	.label + .insert.checks {margin-top: calc(20px);}
	.inputs,
	.insert.checks {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
	.insert.checks .btn {text-align: center; margin: 5px 0}
	.insert .check-wrap + .check-wrap {margin-top: 22px;}
	.input-cover + .input-cover {margin-top: 10px;}
	.input-value {padding-bottom: 16px;}
	.field-msg > .ico {margin-top: 2px;}
}

/* ico */
.ico{display: inline-block; background-repeat: no-repeat; background-position:center; background-size: cover;}
.ico.arrow-link {width: 23px; height: 17px; background-image: url('../images/common/ico_arrow-link.svg');}
.ico.field-alert {width: 19px; height: 19px; background-image: url('../images/common/ico_field-alert.svg');}
.ico.select-arr {width: 10px; height: 10px; background-image: url('../images/common/uio_select.svg');}

/* 팝업 css */
.popup-dim {display:none;}
#popup-container.hide{display: none;}
#popup-container{width: 540px; height: 600px; position: fixed; top: 150px; z-index: 999; right: 120px; background-color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / 13%), 0 6px 18px rgb(0 0 0 / 7%);}
.popup-banner {width: 100%; height: 100%; position: relative;}
.popup-banner img {width: 30px; position: absolute; top: 16px; left: 10px;}
.popup-banner p { transform: rotate(-88deg); width: max-content; font-family: Montserrat; font-size: 15px; position: absolute; right: -8px; bottom: 42px;}
#popup-container .popup-wrap {position: relative; width: 100%; height: 100%;}
#popup-container .popup-wrap .btn-close {position: absolute; top: 12px; right: 12px;}
#popup-container .text-wrap{padding: 32px 33px 42px;}
#popup-container .text-wrap .title p{font-family: Montserrat; font-size: 32px;}
#popup-container .text-wrap .title p .txt_tilt{font-style: italic;font-family: Montserrat; font-size: 32px;}
#popup-container .text-wrap .content {margin-top: 6px;}
#popup-container .text-wrap .content span{font-family: NotoSansDemiLight; font-size: 18px; letter-spacing: -0.5px;}
#popup-container .text-wrap .location-text {margin-top: 31px;}
#popup-container .text-wrap .location-text button {font-family: GmarketSansMedium; font-size: 18px;display:inline-block; vertical-align: middle;}
#popup-container .text-wrap .location-text img {vertical-align: middle; margin-left: 3px;}
#popup-container .text-wrap .location-text img.for-pc {display:inline-block;}
#popup-container .text-wrap .location-text img.for-mobile {display:none;}
#popup-container .today-close {position: absolute; bottom: -33px; right: 12px;}
#popup-container .today-close button{font-size: 14px; font-family: NotoSansDemiLight; color: #b9b9b9; position: relative;}
/* #popup-container .today-close button::after{content : ''; position: absolute; width: 100%; height: 1px; bottom: -6px; left: 0; background: #ffffff;} */

@media only screen and (max-width:750px){
	.popup-dim {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: .6;filter: alpha(opacity=50);z-index: 99;display:block;}
	#popup-container{width: 340px; height: auto; transform: translate(-50%,-50%); top: 50%; left: 50%;}
	#popup-container .popup-wrap .btn-close{top: 10px; right: 10px;}
	#popup-container .popup-wrap .btn-close img.for-mobile{width: 50%; float: right;}
	#popup-container .text-wrap {padding: 24px 18px; overflow: hidden; box-sizing: border-box; background: #ffffff;}
	#popup-container .text-wrap .title p{font-size: 22px; line-height: 23px;}
	#popup-container .text-wrap .title p .txt_tilt {font-size: 22px;}
	#popup-container .text-wrap .content {margin-top: 4px;}
	#popup-container .text-wrap .content span {font-size: 13px;display: block;line-height: 20px;}
	#popup-container .text-wrap .location-text {margin-top: 25px;}
	#popup-container .text-wrap .location-text button{font-size: 13px;}
	#popup-container .text-wrap .location-text img.for-pc {display:none;}
	#popup-container .text-wrap .location-text img.for-mobile {display:inline-block;width: 34px;height: auto;}
	#popup-container .today-close{left: 50%;margin-left: -57px;right:initial;bottom: -25px;}
	#popup-container .today-close button{font-size: 13px;font-family: 'Noto Sans KR',sans-serif;font-weight: 300;}
	#popup-container .today-close button::after{font-size: 13px; bottom: -3px;}
}

/* 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; height: calc(var(--vh100));
	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.active .menu-list li:nth-child(5) {-webkit-animation-delay: 1s;-moz-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;}
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 .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 .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;}
nav .family {position: absolute; right: 124px; bottom: 132px;}
nav .family ul {display: -ms-flexbox; display: -webkit-flex; display: flex;
	position: relative; 
}
nav .family ul > li + li {margin-left: -6px;}


nav .family .text {font-weight: 700; font-size: 12px; letter-spacing: -0.24px;}
nav .family .text strong {font-size: 18px; letter-spacing: -0.36px;}
nav .family .hover .text-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 45px 30px; opacity: 0; visibility: hidden;}

nav .family .basic,
nav .family .hover {width: 65px; height: 65px; transition: 0.3s ease;}
nav .family .hover {position: absolute; bottom: 0;}
nav .family .anniversary-5th .hover {position: absolute; left: -30px;}
nav .family .anniversary-7th .hover {position: absolute; right: -10px;}

nav .family .ico.arrow-link {margin-top: 17px;}
nav .family .hello {position: absolute; top: -35px; right: -17px;}
nav .family .hello .img-wrap {width: 68px; height: 28px;}

nav .family ul:hover .basic,
nav .family ul > li:not(:hover) .hover,
nav .family ul:hover + .hello {opacity: 0; z-index: -1;}
nav .family ul > li:hover .text-wrap {visibility: visible;}
nav .family ul > li:hover .hover {width: 180px; height: 180px;}
nav .family ul > li:hover .text-wrap {animation: familyText 0.3s ease-in-out 0.3s both;}

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

nav.active .links,
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.active .family ul > li {-webkit-animation: familyShow 0.3s linear 0.5s both; -moz-animation: familyShow 0.3s linear 0.3s both; -o-animation: familyShow 0.3s linear 0.5s both; animation: familyShow 0.3s linear 0.5s both;}
nav.active .family .hello {-webkit-animation: familyHello 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.7s both; -moz-animation: familyHello 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.7s both; -o-animation: familyHello 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.7s both; animation: familyHello 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.7s both;}
nav.active .family ul > li.anniversary-5th {animation-delay: 0.7s;}
nav.active .family ul > li.anniversary-7th {animation-delay: 0.9s;}
nav.active .family .hello {animation-delay: 1.1s;}


@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;}
}

@keyframes familyShow {
	0% {opacity: 0; transform: scale(0); transform-origin: bottom;}
	100% {opacity:1; transform: scale(1);}
}

@keyframes familyHello {
	0% {opacity: 0; transform: translate(0px, 30px);}
	100% {opacity:1; transform: translate(0px, 0px);}
}



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 {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; }
.fixed-bar:not(.black) a:hover span::before {opacity: 0;}
.fixed-bar.black a:hover span::before {opacity: 1;}
.fixed-bar.black a:hover span::after {opacity: 0;}

@-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;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
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; width: 50%; 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.full{width: 100%;}
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;}
	nav .family {display: none;}

	.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;}
	}
}

/* file upload */
.file-wrap {width: 100%; overflow:hidden;}
.file-upload {display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
	position: relative; width: 100%;
}
.file-upload .btn {position: relative }
.file-upload .file-name {width: calc(100% - 100px); padding-left: 12px; cursor: default;}
.file-hidden {position:absolute; right:0px; top:0px; width: 100%; height: 100%; opacity:0; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); cursor:pointer;}

/* dropdown */
.dropdown {position: relative; width:100%;}
.dropdown .ico.select-arr {position: absolute; right: 32px; top: 50%; filter: opacity(0.5); transform: translate(0,-50%) rotate(180deg);}
.dropdown:focus-within .ico.select-arr {filter: opacity(1); transform: translate(0,-50%) rotate(0deg);}
.dropdown:not(.opend) .input-cover.picked .input-text + .ico.select-arr {filter: opacity(1);}
.dropdown ul{margin:0px; border: 1px solid #000;}
.dropdown:not(.opened) ul {display:none;}
.dropdown.opened ul{position:absolute; top: 60px; left:0;display: block; width:100%; background: #fff; box-shadow: none; border-radius: 0; z-index: 2}
.dropdown .placeholder,
.dropdown ul>li {cursor: pointer;}
.dropdown ul>li>a:focus,
.dropdown ul>li>a:hover {background: none;}
.dropdown ul li .btn{display:block; width:100%; padding: 18px 32px; text-align: left; transition: 0.3s ease;}
.dropdown ul li .btn:hover{background: #fafafa; font-weight: 600;}
.dropdown ul li.selected .btn{font-weight: 700;}
@media all and (max-width: 768px) {
	.dropdown ul li .btn {padding-left: 24px; padding-right: 24px;}
}

.line-break {display: -ms-flexbox; display: -webkit-flex; display: flex;}
.overflow-hidden {display: block; overflow: hidden;}
.overflow-hidden > span {display: block; /* opacity: 0;*/}
.on .overflow-hidden > span {animation: textShow 1.2s cubic-bezier(0, 0, 0, 1) both; opacity: 1;}
.on .overflow-hidden:nth-child(1) > span {animation-delay: 0.1s;}
.on .overflow-hidden:nth-child(2) > span {animation-delay: 0.4s;}
.on .emphasis + .overflow-hidden > span {animation-delay: 1.5s;}
@keyframes textShow {
	from {transform: translate(0, 100%);}
	to {transform: translate(0, 0%);}
}

/* inquiry */
#wrap.sub-inquiry {margin-bottom: 0; z-index: 1; overflow: hidden;}
.sub-inquiry #content {min-height: 100vh;}

body.ing-intro {overflow: hidden;}
.sub-inquiry .intro {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff; z-index: 1;}
.sub-inquiry #content.intro-hide .intro {animation: introHide 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.sub-inquiry #content.intro-hide .title {animation: introHide2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.sub-inquiry .intro .section-wrap {display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center; 
	height: inherit;
}
.sub-inquiry .intro .title {font-size: 80px; letter-spacing: -1.6px; line-height: 1.2;}
.sub-inquiry .intro .emphasis {display: block; font-weight: 800; font-size: 90px; letter-spacing: -1.8px; font-style: italic; color: #ffde00; line-height: 1;}
.sub-inquiry .intro .emphasis{position: relative;}
.sub-inquiry .intro .emphasis::before {content: attr(data-text); font-size: inherit; color: transparent; font-style: italic; line-height: 1}
.sub-inquiry .intro .emphasis > em {position: absolute; top: 0; left: 0; width: 100%; font-style: inherit;}

.sub-inquiry .inquiry {position: relative; width: 100%; min-height: inherit;}
.sub-inquiry .inquiry::before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%;height: 100%;box-sizing: border-box;border-style:solid; border-color: #ffde00; z-index: -1; transition: border 0.8s ease 1.6s;}
.sub-inquiry .inquiry * {font-family: 'Pretendard', sans-serif;}
.sub-inquiry .btn-out {display: block;position: fixed; top: 72px; right: 88px; z-index: 999999;padding: 13px 42px 18px 0;cursor: pointer;}
.sub-inquiry .btn-out span,
.sub-inquiry .btn-out span:before,
.sub-inquiry .btn-out span:after{content: ""; position: absolute; display: block; width: 42px; height: 5px;border-color:white; cursor: pointer;}
.sub-inquiry .btn-out span:before,
.sub-inquiry .btn-out span:after {background-color: #000;}
.sub-inquiry .btn-out span:before{transform: rotate(45deg); }
.sub-inquiry .btn-out span:after{top: 10px; transform: translatey(-10px) rotate(-45deg); }
.sub-inquiry .section-wrap {max-width: 1320px; min-height: inherit; margin: 0 auto; padding-left: 88px; padding-right: 88px;}
.sub-inquiry .section-title {font-weight: 700; font-size: 60px; letter-spacing: -1.2px; line-height: 1.3; font-style: normal;}
.sub-inquiry .step-progress,
.sub-inquiry .step-nav,
.sub-inquiry .btn.round {display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center; 
}
.sub-inquiry .step-nav {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; 
	 width: 10px; height: 10px; background-color: #ccc; border-radius: 50%;
	}
.sub-inquiry .step-nav > em {display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: -0.28px; color: #fff; line-height: 1; opacity: 0; z-index: -1; visibility: hidden;}
.sub-inquiry .step-nav.active {width: 26px; height: 26px; background-color: #000;}
.sub-inquiry .step-nav.active > em {opacity: 1; z-index: 1; visibility: visible;}
.sub-inquiry .step-nav + .step-nav {margin-left: 12px;}
.sub-inquiry .field-title {font-weight: 700; font-size: 18px; letter-spacing: -0.36px;}
.sub-inquiry .step-btns {display: -ms-flexbox; display: -webkit-flex; display: flex;
	transition: 0.8s ease-in-out;
}
.sub-inquiry .step-btns > .btn + .btn {margin-left: 12px;}
.sub-inquiry .btn.round {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; 
	width: 90px; height: 90px; background-color: #000; background-repeat: no-repeat;background-position: center; background-size: 23px 17px; transition: 0.3s ease;
}
.sub-inquiry .btn.round.next {background-image: url('../images/common/ico_arrow-next-white.svg');}
.sub-inquiry .btn.round[disabled],
.sub-inquiry .btn.round.prev {background-color: rgba(0, 0, 0, 0.03);}
.sub-inquiry .btn.round.prev {background-image: url('../images/common/ico_arrow-prev-disabled.svg');}
.sub-inquiry .btn.round[disabled].next {background-image: url('../images/common/ico_arrow-next-disabled.svg');}
.sub-inquiry .btn.round:not([disabled]).prev:hover {background-image: url('../images/common/ico_arrow-prev-black.svg');}
.sub-inquiry .field {padding-top: 30px; padding-bottom: 30px;}
.sub-inquiry .flex-wrap > .field:nth-child(1) {padding-top: 0;}
.sub-inquiry .textarea {min-height: 140px;}
.sub-inquiry .textarea + .file-upload {margin-top: 20px;}
.sub-inquiry .inquiry-section:not(.current) {display: none;}
.sub-inquiry .form-content .btn-area {margin-top: 30px;}
.sub-inquiry .recaptcha {margin-top: 20px;}
.sub-inquiry .recaptcha img {max-width: 100%;}

/* [D] 230830 스탭 개수 변화로 인해 수정 */
/* .sub-inquiry .inquiry-form.step-last .step-btns {display: none !important;} */
.sub-inquiry .inquiry-form.step-last #btnNext {display: none !important;}
/*  // [D] 230830 스탭 개수 변화로 인해 수정 */

.sub-inquiry .form-content .btn-area > .btn,
.sub-inquiry .section.finish .btn-area > .btn {font-weight: 700; letter-spacing: -0.32px; text-align: center; padding: 0 24px;}
.sub-inquiry .section.finish .title-wrap {text-align: center;}
.sub-inquiry .section.finish .section-title {font-size: 40px; letter-spacing: -0.8px;}
.sub-inquiry .section.finish .text {font-weight: 700; font-size: 18px; letter-spacing: -0.36px;}
.sub-inquiry .section.finish .text,
.sub-inquiry .section.finish .info-list > li {color: #999;}
.sub-inquiry .section.finish .section-title + .text {margin-top: 20px;}
.sub-inquiry .section.finish .info-list {background-color: rgba(0, 0, 0, 0.02); padding: 40px 32px; margin-left: auto; margin-right: auto;} 
.sub-inquiry .section.finish .info-list > li {font-weight: 700; letter-spacing: -0.32px;}
.sub-inquiry .section.finish .info-list > li + li {margin-top: 12px;}
.sub-inquiry .section.finish .title-wrap +.info-list,
.sub-inquiry .section.finish .info-list + .btn-area {margin-top: 48px;}
.sub-inquiry .section.finish .btn-area > .btn {min-width: 230px;}

.sub-inquiry #content:not(.intro-hide) .btn-out {opacity: 0; z-index: -1; visibility: hidden;}
.sub-inquiry #content.intro-hide .btn-out {opacity: 1; z-index: 0; visibility: visible; transition: 0.8s ease-in-out 1.2s;}
.sub-inquiry #content.intro-hide .inquiry::before{border-width: 36px; animation: inqueryBorder 0.8s ease 1.5s both;}
.sub-inquiry .inquiry.complete .inquiry-wrap{min-height: inherit;}
.sub-inquiry .inquiry:not(.complete) .section.finish,
.sub-inquiry .inquiry.complete .inquiry-form {display: none;}
.sub-inquiry .inquiry.complete .section.finish {animation: completeShow 0.8s ease-out;}


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

@keyframes introHide {
	0% {transform: translateY(0);}
	100% {transform: translateY(-100%);}
}

@keyframes introHide2 {
	0% {opacity: 1;}
	50% {opacity: 0;}
}

@keyframes formShow {
	0% {opacity: 0; transform: translate(250px,0);}
	20% {opacity: 1;}
	100% {transform: translate(0,0);}
}

@keyframes completeShow {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@media all and (min-width:1351px) {
	.sub-inquiry .step-progress,
	.sub-inquiry .step-btns {left: calc(50% - (1320px / 2) + 88px);}
}
@media all and (min-width:961px) and (max-width:1351px) {
	.sub-inquiry .step-progress,
	.sub-inquiry .step-btns {left: calc(88px);}
}

@media all and (min-width:961px) and (max-width:1320px) {
	.sub-inquiry .section-title {font-size: 4.545vw; letter-spacing: -0.091vw;}
}
@media all and (min-width:961px) {
	.sub-inquiry .inquiry .section-wrap {padding-top: 25.925925925925924vh;}
	.sub-inquiry .inquiry.complete .section-wrap {padding-top: 200px;}
	.sub-inquiry .step-progress,
	.sub-inquiry .step-btns {position: fixed;}
	.sub-inquiry .step-progress {top: calc(25.925925925925924vh);}
	.sub-inquiry .step-btns {top: calc(25.925925925925924vh + 302px);}
	.sub-inquiry .inquiry-form {position: relative;}
	.sub-inquiry .form-header {position: fixed; top: auto; left: auto; width: calc(100% - 52%); padding-top: 66px; padding-right: 2.604vw;}
	.sub-inquiry .form-content {width: 52%; margin-left: auto;}
	.sub-inquiry .inquiry-form.step-last .form-content .btn-area > .btn {width: calc((100% - 12px) / 2);}
	.sub-inquiry .inquiry-form.step-last .form-content .btn-area > .btn + .btn {margin-left: 12px;}

	.sub-inquiry #content.intro-hide .step-progress.fade-in,
	.sub-inquiry #content.intro-hide .step-btns.fade-in,
	.sub-inquiry #content.intro-hide .inquiry-section.current .form-header,
	.sub-inquiry #content.intro-hide .inquiry-section.current .form-content,
	.sub-inquiry .inquiry.start .step-progress,
	.sub-inquiry .inquiry.start .step-btns,
	.sub-inquiry .inquiry.start .inquiry-section.current .form-header,
	.sub-inquiry .inquiry.start .inquiry-section.current .form-content {animation: formShow 1s ease-out both}

	.sub-inquiry #content.intro-hide .inquiry-section.current .form-content {animation-delay: 0.2s;}
	
	.sub-inquiry .inquiry.start .step-progress,
	.sub-inquiry .inquiry.start .step-btns,
	.sub-inquiry .inquiry.start .inquiry-section.current .form-header {animation-delay: 2s !important;}
	.sub-inquiry .inquiry.start .inquiry-section.current .form-content {animation-delay: 2.2s !important;}
}
@media all and (min-width:769px) and (max-width:960px) {
	.sub-inquiry .inquiry .section-wrap {padding-top: 200px;}
	.sub-inquiry .section-title {font-size: 40px; letter-spacing: -0.8px;}
}
@media all and (min-width:769px) {
	.sub-inquiry .inquiry .section-wrap {padding-bottom: 200px;}
	.sub-inquiry .flex-wrap {-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
	.sub-inquiry .section.finish .info-list {width: 420px;}
	.sub-inquiry .inquiry.complete .section-wrap {display: -ms-flexbox; display: -webkit-flex; display: flex;
		-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
		-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	}
	.sub-inquiry input[name="HBroute"] + span {min-width: 116px; padding-right: 10px;}
}
@media all and (max-width:960px) {
	.sub-inquiry .step-progress + .form-wrapper {margin-top: 28px;}
	.sub-inquiry .form-header + .form-content {margin-top: 60px;}
	.sub-inquiry .step-btns {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;margin-top: 30px;}
	.sub-inquiry #content.intro-hide .inquiry .section-wrap{opacity: 1; transition: 0.8s ease-in-out 1s;}
	.sub-inquiry .inquiry-form.step-last .form-content .btn-area {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
	.sub-inquiry .inquiry-form.step-last .form-content .btn-area > .btn {width: 100%;}
	.sub-inquiry .inquiry-form.step-last .form-content .btn-area > .btn + .btn {margin-top: 10px;}
}
@media all and (max-width:768px) {
	.sub-inquiry .section-wrap {padding: 100px 30px;}
	.sub-inquiry .intro .title {font-size: 50px; letter-spacing: -1px;}
	.sub-inquiry .intro .emphasis {font-size: 60px; letter-spacing: -1.2px;}
	.sub-inquiry .section-title {font-size: 32px; letter-spacing: -0.64px;}
	.sub-inquiry .btn-out{top: 25px;right: 30px;padding: 9px 31px 12px 0;}
	.sub-inquiry .btn-out span,
	.sub-inquiry .btn-out span:before,
	.sub-inquiry .btn-out span:after{width: 31px;height: 3px; }
	.sub-inquiry .btn.round {width: 70px; height: 70px;}
	.sub-inquiry .field {padding-top: 20px; padding-bottom: 20px;}
	.sub-inquiry .step-btns > .btn + .btn {margin-left: 10px;}
	.sub-inquiry .inquiry-form.step-last .form-content {margin-top: 90px;}
	.sub-inquiry .form-content .btn-area > .btn {width: 100%;}
	.sub-inquiry .form-content .btn-area > .btn,
	.sub-inquiry .section.finish .btn-area > .btn {height: 56px; line-height: 56px; font-size: 16px; letter-spacing: -0.32px;}
	.sub-inquiry .section.finish {padding-top: 100px; padding-bottom: 100px;}
	.sub-inquiry .section.finish .title-wrap +.info-list,
	.sub-inquiry .section.finish .info-list + .btn-area {margin-top: 40px;}
	.sub-inquiry .section.finish .section-title {font-size: 28px; letter-spacing: -0.56px;}
	.sub-inquiry .section.finish .section-title + .text {margin-top: 16px;}
	.sub-inquiry .section.finish .info-list {padding: 28px 24px;}
	.sub-inquiry .section.finish .btn-area > .btn {min-width: 180px;}
	.sub-inquiry #content.intro-hide .inquiry::before {border-width: 8px; -webkit-animation-duration: none; -webkit-animation: none;  -moz-animation: none;  -o-animation: none;  animation: none;}

	.sub-inquiry .inquiry .section-wrap {opacity: 0;}
}


/* datepicker*/
.ui-datepicker {width: 335px; padding: 0 12px 12px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.ui-datepicker * {font-family: 'Pretendard',sans-serif; }
.ui-widget.ui-widget-content { order: none;  -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); box-shadow: 0px 0px 13px rgba(0,0,0,0.4); background: #fff; border: 1px solid #707070; border-radius: 5px; box-sizing: border-box; margin-top: 5px; padding: 0; overflow: hidden;
}
.ui-datepicker th {font-weight: 400; font-size: 14px; color: rgba(0,0,0,0.5);}
.ui-datepicker .ui-datepicker-header { background-color: transparent; padding: 12px 0; text-align: center; position: relative;}
.ui-datepicker .ui-datepicker-title {height: 100%;}
.ui-datepicker select.ui-datepicker-year {width: auto; background-color: transparent; font-weight: 700;}
.ui-datepicker .ui-datepicker-prev ,
.ui-datepicker .ui-datepicker-next {position: absolute; top: 50%; width: 30px; height: 30px; transform: translate(0,-50%);}
.ui-datepicker .ui-datepicker-prev {left: 10px;}
.ui-datepicker .ui-datepicker-next {right: 10px;}
.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {top: 0; left: 0; margin-top: 0; margin-left: 0;}
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {width: 100%; height: 100%; background-size: cover; background-position: center center; display: block; position: absolute; text-indent: -9999px;}
.ui-datepicker .ui-datepicker-prev .ui-icon {background-image: url('../images/common/ico_arrow-prev.svg');}
.ui-datepicker .ui-datepicker-next .ui-icon {background-image: url('../images/common/ico_arrow-next.svg');}

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, 
html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active {
	display: -webkit-box; display: -ms-flexbox; display: flex; 
	-webkit-box-align: center; -ms-flex-align: center;  align-items: center; 
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	border: none; padding: 0; text-align: center; width: 36px; height: 36px; background-color: transparent;  color: #000; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {font-family: 'Pretendard','돋움', Dotum, '굴림', Gulim, Verdana, Arial, sans-serif; }
.ui-button:focus {background-color: #fff ;border: 0; color: inherit;}


.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus,
.ui-state-active, 
.ui-widget-content .ui-state-active {
	background-color: #ffde00 ;border: 0; color: inherit; padding: 0;
}
.ui-state-active, 
.ui-widget-content .ui-state-active {font-weight: 700;}


/* 230827 captcha-box */

.captcha-box{max-width: 250px; margin-top: 15px; display: none;}
.captcha-box.active{display: block;}
.captcha-box #canvas{width: 180px; height: 60px;}
.captcha-box .input-cover{margin-top: 15px;}
.captcha-box .form-control{padding: 0 15px; height: 30px;}
.captcha-box .btn-area{margin-top: 20px !important;}
.captcha-box .btn-area .btn{-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.captcha-box .btn-area .btn + .btn{margin-left: 10px;}
.captcha-box .btn.dark,
.captcha-box .btn.white{width: 85px; padding: 0 0px !important; height: 40px; line-height: 40px;}

.captcha-box .btn.white{background-color: white !important;}
.captcha-box .btn.dark{background-color: black !important;}
@media all and (max-width:768px) {
	.captcha-box .btn.dark,
	.captcha-box .btn.white{width: 70px;}
}