@charset "utf-8";

* {margin:0;padding:0;-webkit-text-size-adjust:none;}
*, *:before, *:after { box-sizing: inherit;}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,

article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { border: 0; outline: 0;  font-size: 100%;}

h1, h2, h3, h4, h5, h6 {font-weight:normal;}

a { margin: 0; padding: 0; border: 0; font-size: 100%;}

html {box-sizing: border-box}

body {font-family:"Lato", Malgun Gothic,'맑은 고딕',"돋움",Dotum,Verdana,Arial,helvetica,clean,sans-serif;color:#555;font-size:13px;letter-spacing:-0.05em;line-height:1.7em; box-sizing: border-box}
label, input, button, select, img {vertical-align:middle; outline: 0; box-sizing: border-box}
select,input,button,textarea,button{ font-family:"Lato", 'Malgun Gothic','맑은 고딕',Dotum,Verdana; outline: 0}
select {font-family:"Lato", Malgun Gothic,'맑은 고딕',"돋움",Dotum,Verdana,Arial,helvetica,clean,sans-serif;}

img {
	image-rendering: -moz-auto;         /* Firefox */
	image-rendering:   -o-auto;         /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: auto;
	/*-ms-interpolation-mode: nearest-neighbor; IE (non-standard property) */
	-ms-interpolation-mode: bicubic;
}


/*링크*/
a{text-decoration:none; outline:0}
a:active {text-decoration:none;}
a:focus {text-decoration:none;}
a:visited, a:visited *, a.visited, a.visited:visited {text-decoration:none;}
a:hover,a:hover *,a.visited:hover {text-decoration:none;}

/*list*/
ol, ul, li, dd, dl, dt {list-style:none; box-sizing: border-box}
.fllist, .frlist {position:relative;}
ul.fllist li , .fllist > * {float:left;}
ul.frlist li , .frlist > * {float:right;}
.fllist:after , .frlist:after {clear:both;display:block;content:"";}

/* Form */
fieldset {padding:0px;margin:0px;border:0px;}
legend{display:none;}

input::-ms-clear {display: none;}

input[type='tel'],input[type='url'],input[type='number'], input[type='email'], input[type='text'], input[type='password'], 
input.text,input.password {border:1px solid #a8a8a8;/*line-height:40px;;*/height:40px;;background:none;color: #777}

input[type='image'], input.image,input[type='radio'], input.radio,input[type='checkbox'], input.checkbox,input.radio,input.checkbox {border:1px solid #a8a8a8;vertical-align:middle;padding:0px;margin:0px;}

input[type='radio'], input.radio,input[type='checkbox'], input.checkbox,input.radio,input.checkbox {width:15px; height:15px;}

textarea, .textarea {border:1px solid #a8a8a8;line-height:150%;background:none; width: 100%;color: #777;}

input.readonly {background-color:#ededed;}

label::before {content:" ";} 
input.disabled, input:disabled {background-color:#ededed;}
input.required, input:required {}

select , select.select {border:1px solid #a8a8a8;line-height:40px;height:40px;background:none;/*width: 92%;*/color: #777}

select:hover , select:hover.select{border:1px solid #5c5953}

input[type="file"] {border:0;padding:0;height:35px;border-style:solid;/*border:1px solid #a8a8a8;*/ outline: none; background:#fff;line-height:35px;box-sizing:content-box;vertical-align:middle;}
input:hover[type="file"] {/*border:1px solid #5c5953*/}


/* img */
img {border:0px;vertical-align:middle;} 
img.button {cursor:pointer;}
button.imgBtn {padding:0px;margin:0px;border:0px;cursor:pointer;}

/* Table */
table { border-collapse: collapse; border-spacing: 0px;}
table caption{height:0;width:0;text-indent:-9999px;}

/*기본 스타일*/
.fr {float:right;}
.fl {float:left;}
.cr {clear:both;}

/*정렬*/
.tc {text-align:center;}
.tl {text-align:left;}
.tr {text-align:right;}
.left ,.l {text-align:left !important;}
.right,.r {text-align:right !important;}
.center, .c {text-align:center !important;}

.overflow {overflow:hidden !important}

/***************************************************intro***************************************************/
.intro_body {height:100%; background:#000; overflow-x:hidden}

.img_bigBox {position:absolute; top:0; left:50%; width:100%; height: 100%; transform: translateX(-50%)}
.txtBox {position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:2}
.txtBox .txtBox_l {display:inline-block; vertical-align:bottom; animation-fill-mode: both !important; animation: fanfare 1s; animation-delay:0.5s;}
.txtBox .txtBox_r {display:inline-block; vertical-align:bottom;}
.txtBox .txtBox_r img {margin-top:10px; animation: fade-in-left 1s;animation-timing-function: ease-out; animation-fill-mode: both !important; animation-delay:0.6s; }
.txtBox .txtBox_c {margin-top:10px; animation: fade-in-left 1s;animation-timing-function: ease-out; animation-fill-mode: both !important; animation-delay:1s;}

.imgBox {position:absolute; top:0; width:67%; height: 100%; overflow:hidden;  transition:all 0.7s}
.imgBox.is-active {transition:all 1.3s;}

.imgBox_l {left:0%; clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 0% 198%);}
.imgBox_l.is-active{width:100%;clip-path: polygon(0% 0%, 0% 0%, 500% 0%, 0% 198%); z-index:1}

.imgBox_r {right:0%; clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 100% -100%);}
.imgBox_r.is-active {width:100%;clip-path: polygon(0% 180%, 500% 100%, 50% -500%, -100% 55%);}
.imgBox .img, .imgBox .img_ani {height:100%}

.imgBox .ie_mod {display:none}
.imgBox .ie_not {display:block}
.imgBox.is-active .ie_mod {display:block}
.imgBox.is-active .ie_not {display:none}

.body_bg {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:10;}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.ie_mod {display:block}
	.ie_not {display:none}

	.imgBox.is-active .ie_not{display:block;}
	.imgBox.is-active .ie_nod{display:none;}
}


.imgBox_l .img_ani {animation: bounce-in-right 1s; animation-timing-function: ease-out; animation-delay:0.1s;}
.imgBox_r .img_ani {animation: bounce-in-left 1s; animation-timing-function: ease-out; animation-delay:0.1s;}
.imgBox img {/*transform:scale(1); transition:all .3s;*/ width:100%;height:100%}
/*.imgBox:hover img {transform:scale(1.2);}*/

.btnBox {position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); color:#fff; width:70%; z-index:2;}
.btnBox a {position:relative; color:#fff; font-size:27px; font-weight:900; display:inline-block; width:230px; height:70px; line-height:70px; background:rgba(0,0,0,0.5); padding:0 40px; border:1px solid #fff;  overflow:hidden}
.btnBox span {position:absolute; right:40px; transition:all 0.3s}
.btnBox .btn {position:relative; animation: fanfare 1s; animation-fill-mode: both !important; animation-delay:0.9s;}
.btnBox .btnBox01 {float:left;}
.btnBox .btnBox02 {float:right;}
.btnBox .btn:hover span {right:20px}

.pc {display:block;}
.mod {display:none;}

@media only screen and  (max-width:1500px) {
	.btnBox {width:90%;}
}

@media only screen and  (max-width:1200px) {
		.txtBox .txtBox_l img {width:10vw}
		.txtBox .txtBox_r .txt02 {width:12vw}
		.txtBox .txtBox_r .txt03 {width:24vw}
		.txtBox .txtBox_c img {width:34.5vw}

		.btnBox a {font-size:3vw; width:22vw; height:7vw; line-height:7vw; padding:0 2vw;}
		.btnBox span {right:2vw}
		.btnBox span img {width:5vw}
}


@media only screen and  (max-width:768px) {
	.pc {display:none;}
	.mod {display:block;}

	.imgBox {position : static; width:100%; height:50%;}
	.imgBox_l {clip-path: polygon(0% 0%, 0% 0%, 500% 0%, 0% 198%);}
	.imgBox_r {clip-path: polygon(0% 180%, 500% 100%, 50% -500%, -100% 55%);}

	.txtBox {display:block; width:96%; text-align:center;}
	.txtBox .txtBox_l img {width:25vw}
	.txtBox .txtBox_r .txt02 {width:40vw}
	.txtBox .txtBox_r .txt03 {width:51vw}
	.txtBox .txtBox_c img {width:75.5vw}
	
	.btnBox {text-align:center}
	.btnBox .btn {float:none;  text-align:left;}
	.btnBox .btnBox01 {position:absolute; top:-50vw; left:50%; margin-left:-20vw}
	.btnBox .btnBox02 {position:absolute;bottom:-50vw; left:50%; margin-left:-20vw}
	.btnBox a {font-size:6vw; width:39vw; height:12vw; line-height:12vw; padding:0 4vw;}
	.btnBox span, .btnBox .btn:hover span {right:4vw}
	.btnBox span img {width:7vw}
}

/*애니메이션*/
/*fade-in right*/
@keyframes fade-in-right
{
	0%{transform: translateX(-100%); opacity: 0;}
	100%{transform: translateX(0%); opacity: 1;}
}

/*fade-in left*/
@keyframes fade-in-left
{
	0% {transform: translateX(100%); opacity: 0;}
	100% {transform: translateX(0%); opacity: 1;}
}


@keyframes fanfare
{
  0% { opacity:0; transform: scale(1);}
  30% {transform: scale(0) rotateZ(0deg);}
  80% {transform: scale(1.15) rotateZ(0deg);}
  100% {opacity:1; transform: scale(1);}
}

/*bounce-in-right*/
@keyframes bounce-in-right
{
	0% {transform: translateX(-2000px);}
	63% {transform: translateX(30px);}
	70%, 80%, 90%, 100% {transform: translateX(0px);}
	75% {transform: translateX(14px);}
	85% {transform: translateX(8px);}
	95%{transform: translateX(4px);}
}

/*bounce-in left*/
@keyframes bounce-in-left
{
	0% {transform: translateX(2000px);}
	63% {transform: translateX(-30px);}
	70%, 80%, 90%, 100% {transform: translateX(0px);}
	75% {transform: translateX(-14px);}
	85% {transform: translateX(-8px);}
	95% {transform: translateX(-4px);}
}