.blackBg{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.6); z-index:4; display:none}
.blackBg.on{z-index:10}



/* header 웹 */
#headerW {position:absolute; top:0; left:0; width:100%; text-align:center; height:112px; /* border-bottom:1px solid rgba(255,255,255,0.2); */ z-index:1000; }
#headerW h1 {position:absolute; top:40px; left:5%; z-index:2;}
#headerW h1 a {display:block; width:193px; height:55px; background:url("/image/logo_all.png") no-repeat 0 0; background-size:100%;}

@media all and (max-width:1200px) {
	#headerW h1 a {width:180px; height:51px;}
}

@media all and (max-width:960px) {
	#headerW {height:90px; /* border-bottom:1px solid rgba(255,255,255,0.2); */}
	#headerW h1 {top:30px;}
	#headerW h1 a {width:130px; height:37px;}
}


#headerW .utilDiv {position:absolute; top:0; right:5%; padding-top:59px;}
#headerW .utilDiv:after {display:block; content:""; clear:both;}
#headerW .utilDiv .customerBt {color:#fff; display:block; float:left; position:relative; padding-right:14px; font-size:13px; }


#headerW .utilDiv .lang {float:right; color:#fff; font-size:13px; padding:5px 16px 2px 16px; margin:-7px 0 0 0; border-radius:50px; border:1px solid rgba(255,255,255,.3);  z-index:10; }
#headerW .utilDiv .lang .choice {position:relative; display:block; padding-right:16px; line-height:20px; }
#headerW .utilDiv .lang .choice::after { content:''; position:absolute; right:0; top:4px; width:6px; height:6px; margin:0; border:0 solid #fff; border-width:0 2px 2px 0; -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
#headerW .utilDiv .lang .choice.active::after { margin-top:5px; -webkit-transform:rotate(225deg); transform:rotate(225deg); }
#headerW .utilDiv .lang dd { position:absolute;  right:0; top:100%; width:68px; display:none; padding:9px 0 10px; margin-top:10px; border-radius:10px; border:1px solid #111; background:#fff; color:#888; }
#headerW .utilDiv .lang a { display:block; padding:3px 0; line-height:1; text-align:center; }
#headerW .utilDiv .lang a:hover { color:#000; }


/* #headerW .utilDiv .langDiv {position:relative; float:left; padding:0 30px 0 13px;}
#headerW .utilDiv .langDiv > a{display:block; width:23px; height:15px; background:url("/common/images/btn/eng_btn.png") no-repeat left center;}
#headerW .utilDiv .langDiv > div{display: none; position:absolute; top:15px; left:0; width:98px; padding:15px 0; background:#fff;}
#headerW .utilDiv .langDiv > div > a{display:block; font-size:15px; color:#555; line-height:24px; text-align:center;} */


#headerW .fmSitBt{display:none; position:absolute; top:0; right:0; width:70px; height:70px; background:url("/image/bt.png") no-repeat 50% 50%;}
#headerW.subHeader .fmSitBt:before{display:block; content:''; position:absolute; top:0; right:70px; width:1px; height:70px; background:rgba(255,255,255,0.2);}
#headerW.type2{border-bottom:1px solid rgba(000,000,000,0.1);}
#headerW.type2 h1 a{display:block; width:193px; height:55px; background:url("/image/logo_all.png") no-repeat 0 bottom;}
/* #headerW.type2 .utilDiv .langDiv > a{color:#555; background:url("/common/images/btn/eng_btn_on.png") no-repeat left center;} */
#headerW.type2 .fmSitBt{position:absolute; top:0; right:0; display:block; width:70px; height:70px; background:url("/image/bt.png") no-repeat 50% 50%;}
#headerW.type2 .gnbDiv li .oneD{color:#000;}
#headerW.type2 .utilDiv .customerBt{color:#555;}
#headerW.type3{background:rgba(255,255,255,0.9);}.on

#headerW .gnbDiv {position:absolute; width:100%; margin:0 auto; text-align:center; }
#headerW .gnbDiv .inner {width:auto; margin:0 auto; height:112px; overflow:hidden; text-align:center;}
#headerW .gnbDiv ul{ margin:0 auto; overflow:hidden; text-align:center;}
#headerW .gnbDiv li{display:inline-block; margin:0; vertical-align:top; }
#headerW .gnbDiv li a {display:block; padding:0 40px; margin:0; }
#headerW .gnbDiv li .oneD{position:relative; display:block; padding:60px 0 25px 0; font-size:18px; color:#fff; font-family:"Metropolis-Bold"; text-align:center; letter-spacing:0.5px !important;}
/* #headerW .gnbDiv li a:before {content:''; position:absolute; bottom:-1px; width:0; left:0; right:100%; height:5px; background:transparent; z-index:10; transition:0.3s; -webkit-transition:0.3s;} */

#headerW .gnbDiv .topSlideContainer {position: relative; overflow: hidden;}
#headerW .gnbDiv .topSlideWrapper {position: relative; display: flex; overflow: unset;}
#headerW .gnbDiv .topSlideImg {position: relative;}


#headerW .gnbDiv li .twoD{padding:36px 0 40px 0; }
/* #headerW .gnbDiv li:nth-child(2) .twoD{padding:36px 25px 40px 20px}
#headerW .gnbDiv li:nth-child(3) .twoD{padding:36px 0 40px 19px;}
#headerW .gnbDiv li:nth-child(4) .twoD{text-align:center;}
#headerW .gnbDiv li:nth-child(5) .twoD{padding:36px 13px 40px;} */
#headerW .gnbDiv li .twoD > a {display:block; width:100%; font-size:15px; color:#555; line-height:25px; }
#headerW .gnbDiv li .twoD > a.link{padding-right:22px; background:url('/common/images/icon/twoD_link.gif') no-repeat left 70px top 5px}
#headerW .gnbDiv li .twoD > a:first-child {margin-top:0;}
#headerW .gnbDiv li .twoD .thrD{padding-top:25px; position:relative; overflow:hidden; display:none}
#headerW .gnbDiv li .twoD .thrD:before{content:''; display:block; position:absolute; top:25px; left:0; width:2px; height:100%; background:#ddd}
#headerW .gnbDiv li .twoD .thrD > a{display:block; font-size:15px; margin-top:16px; padding-left:23px}
#headerW .gnbDiv li .twoD .thrD > a:first-child{margin-top:0}
#headerW.on .gnbDiv li .twoD .thrD > a:hover, #headerW .gnbDiv li .twoD .thrD > a:focus{color:#d22027;}
#headerW.on h1 a{display:block; width:193px; height:55px; background:url("/image/logo_all.png") no-repeat 0 bottom;}
/* #headerW.on .utilDiv .langDiv > a{background:url("/common/images/btn/eng_btn_on.png") no-repeat left center;} */
#headerW.on .fmSitBt{position:absolute; top:0; right:0; /* display:block; */ width:70px; height:70px; background:url("/image/bt_on.png") no-repeat 50% 50%;}
#headerW.on .gnbDiv{background:#fff;}
#headerW.on .gnbDiv:after{content:''; position:absolute; top:112px; left:0; width:100%; height:1px; background:#ddd;}
#headerW.on .gnbDiv li .oneD{color:#000;}
#headerW.on .gnbDiv li:hover .oneD, #header.on .gnbDiv li:focus .oneD {color:#d22027;}
#headerW.on .gnbDiv li:hover .oneD:before, #header.on .gnbDiv li:hover .oneD:before {content:''; position:absolute; bottom:-1px; width:100%; left:0; right:100%; height:5px; background:#d22027; z-index:10; transition:0.3s; -webkit-transition:0.3s;} 
#headerW.on .gnbDiv li .oneD:before, #header.on .gnbDiv li .oneD:before {left:0; right:0; width:0; transition:0.3s; -webkit-transition:0.3s;}
#headerW.on .banner1 {position:absolute; top:140px; right:50%; margin-right:-710px; width:318px; height:168px;  opacity:1; /* fadeUp 200ms both; animation:fadeUp 200ms both; */}
#headerW .banner1 {opacity:0; }

/* #headerW.on .gnbDiv li:hover > .twoD {-webkit-animation:fadeUp 200ms both; animation:fadeUp 200ms both;} */


#headerW.on .gnbDiv li .twoD a:hover, #header.on .gnbDiv li .twoD a:focus{color:#d22027}
#headerW.on .gnbDiv li .twoD a.on{ color:#d22027}
#headerW.on .utilDiv .customerBt{color:#555;}
#headerW.on .utilDiv .customerBt:after{opacity:1;}
#headerW.on .fmSitBt:before{/* display:block; */ content:''; position:absolute; top:0; right:70px; width:1px; height:70px; background:#ddd;}
#headerW.on .utilDiv .lang {color:#555; border:1px solid rgba(0,0,0,.3);}
#headerW.on .utilDiv .lang .choice::after {border:0 solid rgba(0,0,0,.4); border-width:0 2px 2px 0;}


@media all and (max-width:1500px) {
	#headerW .gnbDiv li .oneD {font-size:16px;}
}

@media all and (max-width:1200px) {
	#headerW .gnbDiv {display:none;}
	#headerW .utilDiv {display:none;}
}




#headerW.fixed {position:fixed;}
#headerW.fixed h1 a {display:block; width:193px; height:55px; background:url("/image/logo_all.png") no-repeat 0 bottom; background-size:100%;} 
#headerW.fixed .fmSitBt{position:absolute; top:0; right:0; /* display:block; */ width:70px; height:70px; background:url("/image/bt_on.png") no-repeat 50% 50%;}
#headerW.fixed .gnbDiv{background:#fff;}
#headerW.fixed .gnbDiv:after{content:''; position:absolute; top:112px; left:0; width:100%; height:1px; background:#ddd;}
#headerW.fixed .gnbDiv li .oneD{color:#000;}
#headerW.fixed .gnbDiv li:hover .oneD, #header.on .gnbDiv li:focus .oneD {color:#d22027;}
#headerW.fixed .gnbDiv li:hover .oneD:before, #header.on .gnbDiv li:hover .oneD:before {content:''; position:absolute; bottom:-1px; width:100%; left:0; right:100%; height:5px; background:#d22027; z-index:10; transition:0.3s; -webkit-transition:0.3s;} 
#headerW.fixed .gnbDiv li .oneD:before, #header.on .gnbDiv li .oneD:before {left:0; right:0; width:0; transition:0.3s; -webkit-transition:0.3s;}

#headerW.fixed .utilDiv .customerBt{color:#555;}
#headerW.fixed .utilDiv .customerBt:after{opacity:1;}
#headerW.fixed .fmSitBt:before{/* display:block; */ content:''; position:absolute; top:0; right:70px; width:1px; height:70px; background:#ddd;}
#headerW.fixed .utilDiv .lang {color:#555; border:1px solid rgba(0,0,0,.3);}
#headerW.fixed .utilDiv .lang .choice::after {border:0 solid rgba(0,0,0,.4); border-width:0 2px 2px 0;}

#headerW.fixednone {opacity:0;}
#mask {position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); display:none;}
#mask1 {position:fixed; width:100%; height:100%; background:rgba(0,0,0,.7); display:none;}
#headerW .btn-all, #headerW .all-inner {display:none;}

#headerW .btn-all .bar, #headerW .btn-all .bar::before, #headerW .btn-all .bar::after { -webkit-transition:background 0.3s linear 300ms; transition:background 0.3s linear 300ms; }
#headerW.fixed .btn-all .bar, #headerW.fixed .btn-all .bar::before, #headerW.fixed .btn-all .bar::after,
#headerW.opend-all .btn-all .bar, .#headerW.opend-all .btn-all .bar::before, #headerW.opend-all .btn-all .bar::after { -webkit-transition-delay:0ms; transition-delay:0ms; }


@media all and (max-width:1200px) {
	#headerW.fixed {height:90px; background:#fff;}
	#headerW.fixed h1 {top:23px;}
	#headerW.fixed h1 a {width:180px; height:51px; }
	#headerW.fixed .btn-all {top:38px}
	#headerW.fixed .btn-all .bar {background:#000;}
	#headerW.fixed .btn-all .bar::before,
	#headerW.fixed .btn-all .bar::after {background:#000;}

	#headerW .btn-all {display:block; position:absolute; top:55px;  right:5%; width:29px; height:22px; z-index:3;}
	#headerW .btn-all .bar { position:absolute; left:0; top:50%; width:100%; height:2px; background:#fff; -webkit-transform:translateY(-50%); transform:translateY(-50%); }
	#headerW .btn-all .bar::before,
	#headerW .btn-all .bar::after { content:''; position:absolute; left:0; top:50%; width:100%; height:2px; background:#fff; }
	#headerW .btn-all .bar::before { -webkit-transform:translateY(-11px); transform:translateY(-11px); }
	#headerW .btn-all .bar::after { -webkit-transform:translateY(9px); transform:translateY(9px); }


	#headerW .all-inner {display:block; position:fixed; right:-320px; top:0; width:320px; height:100%; min-height:100%; z-index:5; overflow-y:auto; background:#fff; color:#222; text-align:left; padding:0 0 100px 0;}
	#headerW .all-inner .close1 {position:absolute; right:7%; top:25px; width:29px; height:22px; }
	#headerW .all-inner .close1 .bar {position:absolute; left:0; top:50%; width:100%; height:2px; background:transparent; -webkit-transform:translateY(-50%); transform:translateY(-50%); }
	#headerW .all-inner .close1 .bar::before,
	#headerW .all-inner .close1 .bar::after { content:''; position:absolute; left:0; top:50%; width:100%; height:2px; background:#000; }
	#headerW .all-inner .close1 .bar::before { transform:rotate(-45deg); -ms-transform:rotate(-45deg);}
	#headerW .all-inner .close1 .bar::after { transform:rotate(45deg); -ms-transform:rotate(45deg); }
}

@media all and (max-width:960px) {
	#headerW.fixed {height:80px;}
	#headerW.fixed h1 {top:27px;}
	#headerW.fixed h1 a {width:130px; height:37px; }
	#headerW.fixed .btn-all {top:35px}

	#headerW .btn-all {top:38px;}
	#headerW .btn-all .bar::before { -webkit-transform:translateY(-9px); transform:translateY(-9px); }
	#headerW .btn-all .bar::after { -webkit-transform:translateY(7px); transform:translateY(7px); }
}



.all-inner .lang {position:absolute; top:30px; left:8%; font-size:15px;}
.all-inner .lang span {padding:0 10px; border-left:1px solid rgba(0,0,0,.2);}
.all-inner .lang span:first-child {border-left:0; padding:0 10px 0 0;}

.all-inner .in {margin:130px 0 0 0;}
.all-inner { clear:both; overflow:hidden;}
.all-inner li.btn {position:relative; display:block; cursor:pointer; overflow:hidden; padding:10px 8%; font-size:18px; font-family:'Metropolis-Bold'; font-weight:600; letter-spacing:0.2px;}
.all-inner .on {font-weight:bold; cursor:pointer; display:block; overflow:hidden;}
.all-inner li.btn.on::after {
	content: '';
    position: absolute;
    right: 35px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border: 0 solid #000;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.all-inner li.ly {overflow:hidden; width:100%; padding:20px 10px; border-bottom:1px solid #eee; background:#f2f2f2; font-size:15px;} 
.all-inner li.ly,
.all-inner dt {display:none;}
.all-inner dl {padding:10px 0; margin:0; }
.all-inner dl a {padding:3px 20px 1px 20px; display:block;}
.all-inner dl a:hover	{background:#eee;}
.all-inner dd {padding:2px 0 0 6%; line-height:17px;}

.all-inner li.btn a {position:relative; width:100%; display:block;}
.all-inner li.btn::after {
	content: '';
    position: absolute;
    right: 35px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -8px;
    border: 0 solid #000;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
} 

.all-inner .util {margin:40px 0 0 8%; font-size:14px; font-family:'Metropolis-Bold'; font-weight:400;}
.all-inner .util li {padding:0 0 3px 30px;}
.all-inner .util .icon01 {background:url(/image/m01.png) no-repeat left center;}
.all-inner .util .icon02 {background:url(/image/m02.png) no-repeat left center;}
.all-inner .util .icon03 {background:url(/image/m03.png) no-repeat left center;}
.all-inner .deco-set {position:absolute; left:8%; bottom:20px; color:rgba(0,0,0,.2); font-family:'Metropolis-Bold'; font-weight:600; line-height:1.3;}


/* 슬라이드 */
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left:20px; background:rgba(0,0,0,.6); width:65px !important; height:65px !important; border-radius:65px;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right:20px; background:rgba(0,0,0,.6); width:65px !important; height:65px !important; border-radius:65px;}
.swiper-button-prev::before, .swiper-button-next::before { content:''; position:absolute; bottom:0; left:50%; top:50%; margin:-1px 0 0 -13px; width:27px; height:2px; background:#fff; }
.swiper-button-prev::after, .swiper-button-next::after { content:''; position:absolute; bottom:0; left:50%; top:50%; margin:-5px 0 0 -13px; width:10px; height:10px; border-left:solid 2px #fff; border-bottom:solid 2px #fff; -webkit-transform:rotate(45deg);transform:rotate(45deg); }
.swiper-button-next::after { margin:-5px -13px 0 0; -webkit-transform:rotate(-135deg);transform:rotate(-135deg); }
.swiper-pagination:not(.swiper-pagination-fraction) { font-size:0; }
.swiper-pagination-bullet { width:12px; height:12px; background:transparent !important; opacity:1; font-size:0; }
.swiper-pagination-bullet::before { content:''; display:inline-block; width:6px; height:6px; border-radius:6px; background:#fff; }
.swiper-pagination-bullet-active { opacity:1; }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin:0 0 0 -1px; outline:none; }
.swiper-button-play { position:absolute; bottom:20px; right:0; z-index:10; width:52px; height:26px; background:rgba(17,17,17,.4); border-radius:26px; overflow:hidden; }
.swiper-button-play .in { position:absolute; left:0; top:0; width:26px; height:26px; white-space:nowrap; text-indent:-999px; overflow:hidden; background:#111; border-radius:26px; -webkit-transition:left 0.2s; transition:left 0.2s; }
.swiper-button-play.stop .in { left:26px; }
.swiper-button-play::after { content:''; position:absolute; left:11px; top:9px; z-index:2; width:0; height:0; border-style:solid; border-width:4px 0 4px 7px; border-color:transparent transparent transparent #666; -webkit-transition:border-color 0.2s; transition:border-color 0.2s; }
.swiper-button-play::before { content:''; position:absolute; left:36px; top:9px; z-index:2; width:3px; height:8px; border-left:2px solid #666; border-right:2px solid #666; -webkit-transition:border-color 0.2s; transition:border-color 0.2s; }
.swiper-button-play:not(.stop)::after { border-left-color:#fff; }
.swiper-button-play.stop::before { border-color:#fff; }
.swiper-pagination-bullet { position:relative; width:20px; height:20px; }
.swiper-pagination-bullet::before { position:absolute; left:50%; top:50%; width:6px; height:6px; background:#b2b2b2; border-radius:100%; box-sizing:border-box; -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%); -webkit-transition:background 0.3s ease; transition:background 0.3s ease; }
.swiper-pagination-bullet .circle { display:block; position:absolute; left:0; top:0; right:0; bottom:0; }
.swiper-pagination-bullet .circle i { position:relative; float:left; width:50%; height:100%; overflow:hidden; }
.swiper-pagination-bullet .circle i::before { content:''; position:absolute; width:200%; right:0; top:0; bottom:0; border:1px solid #d22027; border-radius:100%; box-sizing:border-box; clip: rect(0,20px,20px,10px); -webkit-transform:rotate(-180deg); transform:rotate(-180deg); }
.swiper-pagination-bullet .circle i:first-child::before { left:0; right:auto; clip: rect(0px,10px,20px,0px); }
.swiper-pagination-bullet.swiper-pagination-bullet-active::before { background:#d22027; }
.swiper-pagination-bullet.swiper-pagination-bullet-active .circle i::before { -webkit-animation:circleR 3500ms linear both; animation:circleR 3500ms linear both; }
.swiper-pagination-bullet.swiper-pagination-bullet-active .circle i:first-child::before { -webkit-animation-name:circleL; animation-name:circleL; }
@-webkit-keyframes circleL{0%, 50%{-webkit-transform:rotate(-180deg); transform:rotate(-180deg);}100%{-webkit-transform:rotate(0deg); transform:rotate(0deg);}}
@-webkit-keyframes circleR{0%{-webkit-transform:rotate(-180deg); transform:rotate(-180deg);}50%,100%{-webkit-transform:rotate(0deg); transform:rotate(0deg);}}
@keyframes circleL{0%, 50%{-webkit-transform:rotate(-180deg); transform:rotate(-180deg);}100%{-webkit-transform:rotate(0deg); transform:rotate(0deg);}}
@keyframes circleR{0%{-webkit-transform:rotate(-180deg); transform:rotate(-180deg);}50%,100%{-webkit-transform:rotate(0deg); transform:rotate(0deg);}}


@media all and (max-width:1360px) {
	.footer { width:1200px; padding-left:280px; }
	.footer .social { right:71px; }
	.footer .social a + a { margin-left:4px; }
	.location { margin-left:-280px; }
}

@-webkit-keyframes fadeUp{from{opacity:0;-webkit-transform:translateY(30%);transform:translateY(30%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;-webkit-transform:translateY(30%);transform:translateY(30%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes allmenuTx{
	0%{-webkit-transform:translateY(-11px); transform:translateY(-11px);}
	50%{-webkit-transform:translateY(-50%); transform:translateY(-50%);}
	100%{-webkit-transform:translateY(-50%) rotate(-45deg); transform:translateY(-50%) rotate(-45deg);}
}
@keyframes allmenuBx{
	0%{-webkit-transform:translateY(9px); transform:translateY(9px);}
	50%{-webkit-transform:translateY(-50%); transform:translateY(-50%);}
	100%{-webkit-transform:translateY(-50%) rotate(45deg); transform:translateY(-50%) rotate(45deg);}
}
@keyframes allmenuMx{0%{ height:2px; } 50%, 100%{ height:0; }}
@-webkit-keyframes allmenuTx{
	0%{-webkit-transform:translateY(-11px); transform:translateY(-11px);}
	50%{-webkit-transform:translateY(-50%); transform:translateY(-50%);}
	100%{-webkit-transform:translateY(-50%) rotate(-45deg); transform:translateY(-50%) rotate(-45deg);}
}
@-webkit-keyframes allmenuBx{
	0%{-webkit-transform:translateY(9px); transform:translateY(9px);}
	50%{-webkit-transform:translateY(-50%); transform:translateY(-50%);}
	100%{-webkit-transform:translateY(-50%) rotate(45deg); transform:translateY(-50%) rotate(45deg);}
}
@-webkit-keyframes allmenuMx{0%{ height:2px; } 50%, 100%{ height:0; }}
@keyframes allmenuT{
	0%{-webkit-transform:translateY(-50%) rotate(-45deg); transform:translateY(-50%) rotate(-45deg);}
	50%{-webkit-transform:translateY(-50%); transform:translateY(-50%);}
	100%{-webkit-transform:translateY(-11px); transform:translateY(-11px);}
}
@keyframes allmenuB{
	0%{-webkit-transform:translateY(-50%) rotate(45deg); transform:translateY(-50%) rotate(45deg);}
	50%{-webkit-transform:translateY(-50%); transform:translateY(-50%);}
	100%{-webkit-transform:translateY(9px); transform:translateY(9px);}
}
@keyframes allmenuM{0%, 50%{ height:0; } 100%{ height:2px; }}
@-webkit-keyframes allmenuT{
	0%{-webkit-transform:translateY(-50%) rotate(-45deg); transform:translateY(-50%) rotate(-45deg);}
	50%{-webkit-transform:translateY(-50%); transform:translateY(-50%);}
	100%{-webkit-transform:translateY(-11px); transform:translateY(-11px);}
}
@-webkit-keyframes allmenuB{
	0%{-webkit-transform:translateY(-50%) rotate(45deg); transform:translateY(-50%) rotate(45deg);}
	50%{-webkit-transform:translateY(-50%); transform:translateY(-50%);}
	100%{-webkit-transform:translateY(9px); transform:translateY(9px);}
}
@-webkit-keyframes allmenuM{0%, 50%{ height:0; } 100%{ height:2px; }}

@keyframes allmenuDecoInS{
	0%{opacity:0.5; -webkit-transform:translate(0,0) scale(1); transform:translate(0,0) scale(1);}
	33.3%{opacity:0.3; -webkit-transform:translate(118px,20px); transform:translate(118px,20px) scale(1);}
	66.6%{opacity:0.6; -webkit-transform:translate(90px,89px) scale(1); transform:translate(90px,89px) scale(1);}
	100%{opacity:0.5; -webkit-transform:translate(0,0) scale(1); transform:translate(0,0) scale(1);}
}
@keyframes allmenuDecoInM{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(50px,-155px); transform:translate(50px,-155px);}
	66.6%{opacity:0.7; -webkit-transform:translate(100px,-30px); transform:translate(100px,-30px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes allmenuDecoInL{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(-40px,158px); transform:translate(-40px,158px);}
	66.6%{opacity:1; -webkit-transform:translate(-159px,34px); transform:translate(-159px,34px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes allmenuDecoInS{
	0%{opacity:0.5; -webkit-transform:translate(0,0) scale(1); transform:translate(0,0) scale(1);}
	33.3%{opacity:0.3; -webkit-transform:translate(118px,20px); transform:translate(118px,20px) scale(1);}
	66.6%{opacity:0.6; -webkit-transform:translate(90px,89px) scale(1); transform:translate(90px,89px) scale(1);}
	100%{opacity:0.5; -webkit-transform:translate(0,0) scale(1); transform:translate(0,0) scale(1);}
}
@-webkit-keyframes allmenuDecoInM{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(50px,-155px); transform:translate(50px,-155px);}
	66.6%{opacity:0.7; -webkit-transform:translate(100px,-30px); transform:translate(100px,-30px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes allmenuDecoInL{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(-40px,158px); transform:translate(-40px,158px);}
	66.6%{opacity:1; -webkit-transform:translate(-159px,34px); transform:translate(-159px,34px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes allmenuOpen{0%{ height:0; } 100%{ height:100vh; }}
@-webkit-keyframes allmenuOpen{0%{ height:0; } 100%{ height:100vh; }}
@keyframes allmenuClose{0%{ height:100vh; } 100%{ height:0; }}
@-webkit-keyframes allmenuClose{0%{ height:100vh; } 100%{ height:0; }}

@keyframes ani-prev{ 100%{right:50%;} 50.1%{right:-100%;} 50%{right:110%;} }
@keyframes ani-next{ 100%{left:50%;} 50.1%{left:-100%;} 50%{left:110%;} }
/*@keyframes ani-prev-out{ 0%, 100%{left:50%;} 50%{left:110%;} 50.1%{left:-50%;} }
@keyframes ani-next-out{ 0%, 100%{left:50%;} 50%{left:-50%;} 50.1%{left:110%;} }
@-webkit-keyframes ani-prev-out{ 0%, 100%{left:50%;} 50%{left:110%;} 50.1%{left:-50%;} }
@-webkit-keyframes ani-next-out{ 0%, 100%{left:50%;} 50%{left:-50%;} 50.1%{left:110%;} }
*/
@keyframes anigo{ 0%, 100%{width:29px; margin-right:0; margin-left:7px;} 50%{width:0; margin-right:0; margin-left:36px;} 50.1%{width:0; margin-right:29px; margin-left:7px;} }
@-webkit-keyframes anigo{ 0%, 100%{width:29px; margin-right:0; margin-left:7px;} 50%{width:0; margin-right:0; margin-left:36px;} 50.1%{width:0; margin-right:29px; margin-left:7px;} }

@keyframes anidot-5{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(-50px,-80px); transform:translate(-50px,-80px);}
	66.6%{opacity:0.7; -webkit-transform:translate(70px,-30px); transform:translate(70px,-30px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-5{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(-50px,-80px); transform:translate(-50px,-80px);}
	66.6%{opacity:0.7; -webkit-transform:translate(70px,-30px); transform:translate(70px,-30px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes anidot-6{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(40px,-70px); transform:translate(40px,-70px);}
	66.6%{opacity:1; -webkit-transform:translate(-70px,34px); transform:translate(-70px,34px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-6{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(40px,-70px); transform:translate(40px,-70px);}
	66.6%{opacity:1; -webkit-transform:translate(-70px,34px); transform:translate(-70px,34px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes anidot-7{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.3; -webkit-transform:translate(108px,-92px); transform:translate(108px,-92px);}
	66.6%{opacity:0.6; -webkit-transform:translate(266px,80px); transform:translate(266px,80px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-7{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.3; -webkit-transform:translate(108px,-92px); transform:translate(108px,-92px);}
	66.6%{opacity:0.6; -webkit-transform:translate(266px,80px); transform:translate(266px,80px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes anidot-8{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(-190px,64px); transform:translate(-190px,64px);}
	66.6%{opacity:0.7; -webkit-transform:translate(-80px,198px); transform:translate(-80px,198px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-8{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(-190px,64px); transform:translate(-190px,64px);}
	66.6%{opacity:0.7; -webkit-transform:translate(-80px,198px); transform:translate(-80px,198px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes anidot-9{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(216px,-118px); transform:translate(216px,-118px);}
	66.6%{opacity:1; -webkit-transform:translate(-6px,-240px); transform:translate(-6px,-240px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-9{
	0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
	33.3%{opacity:0.8; -webkit-transform:translate(216px,-118px); transform:translate(216px,-118px);}
	66.6%{opacity:1; -webkit-transform:translate(-6px,-240px); transform:translate(-6px,-240px);}
	100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}



/* 메인비주얼 */
.main-head .msg { position:relative; z-index:5; top:50%; width:1100px; margin:-194px auto 0; color:#fff; }
.main-head .msg .in { display:block; position:absolute; left:0; right:0; -webkit-transition:all 800ms ease; transition:all 800ms ease; }
.main-head .msg dt { position:relative; text-align:center; font-size:70px; font-weight:500; line-height:1; height:220px; margin-bottom:-24px; overflow:hidden; box-sizing:content-box; }
.main-head .msg dt .in { bottom:-100%; }
.main-head .msg dt .in strong {font-size:45px; font-weight:300;}
.main-head .msg dd { position:relative; height:224px; margin:24px 0 0 0; padding-left:19px; font-size:20px; font-weight:200; line-height:1.2; text-align:center; }
.main-head .msg dd .text-wrap { position:relative; display:block; height:3em; overflow:hidden; }
.main-head .msg dd .in { top:-100%; }
.main-head .msg .btn-more { position:absolute; left:50%; bottom:0; margin-left:-52px; }
.main-head .msg .btn-more::before, .main-head .msg .btn-more .i-go::after { background:#fff; }
.main-head .msg .btn-more .i-go::before { border-left-color:#fff; border-bottom-color:#fff; }

@media all and (max-width:1200px) {
	.main-head .msg {width:90%;}
	.main-head .msg dt {font-size:65px;}
	.main-head .msg dt .in strong {font-size:40px;}
	.main-head .msg dd {height:130px; padding:0 5%; font-size:17px; }
}

@media all and (max-width:960px) {
	.main-head .msg dt {font-size:55px;}
	.main-head .msg dt .in strong {font-size:30px;}
	.main-head .msg dd {height:130px; padding:0 1%; font-size:15px; }
}

@media all and (max-width:680px) {
	.main-head .msg dt {font-size:45px;}
	.main-head .msg dt .in strong {font-size:25px;}
	.main-head .msg dd { padding:0 1%; font-size:14px; }
	.main-head .msg dd .text-wrap {height:100%; }
}

@media all and (max-width:520px) {
	.main-head .msg dt {font-size:35px;}
	.main-head .msg dt .in strong {font-size:22px; line-height:1.3;}
	.main-head .msg dd { padding:0 1%; font-size:13px;}
}




.main-head .swiper-slide { height:940px; }
.main-head .swiper-pagination { left:50%; width:675px; bottom:25px; text-align:right; }
.main-head.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin-left:8px; }
.main-head .swiper-pagination-bullet::before { background:#fff !important; }
.main-head .swiper-pagination-bullet .circle i::before { border-color:#fff !important; }
.main-head .swiper-pagination-bullet.swiper-pagination-bullet-active .circle i::before { -webkit-animation-duration:5500ms; animation-duration:5500ms; }
.main-head .swiper-button-prev, .main-head .swiper-button-next { background:transparent; border-radius:100%; overflow:hidden; }
.main-head .swiper-button-prev::before, .main-head .swiper-button-next::before { width:42px; height:2px; margin-left:-21px; margin-right:-21px; }
.main-head .swiper-button-prev::after, .main-head .swiper-button-next::after { border-left-width:2px; border-bottom-width:2px; margin-left:-20px; margin-right:-20px; }
.main-head .swiper-button-next::before, .main-head .swiper-button-next::after { left:auto; right:50%; }
.main-head .swiper-button-prev { left:50%; margin-left:-685px; }
.main-head .swiper-button-next { right:50%; margin-right:-685px; }

.main-head .img { position:absolute; left:0; right:0; top:0; bottom:0; height:940px; overflow:hidden; }
.main-head .img .in { position:absolute; right:0; width:100vw; min-width:1200px; top:0; bottom:0; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.main-head .swiper-slide-active { z-index:3; }
.main-head .swiper-slide-active .img { -webkit-animation:aniswiper 600ms both; animation:aniswiper 600ms both; }
.main-head .swiper-slide-active .btn-more { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); -webkit-transition-delay:300ms; transition-delay:300ms; }
.main-head .swiper-slide-active .msg dt .in { bottom:24px; -webkit-transition-delay:300ms; transition-delay:300ms; }
.main-head .swiper-slide-active .msg dd .in { top:0; -webkit-transition-delay:300ms; transition-delay:300ms; }
.main-head.direction-prev .img .in { left:0; right:auto; }
.main-head.direction-prev .swiper-slide-next { z-index:2; opacity:1 !important; }
.main-head.direction-prev .swiper-slide-next .msg dt .in { bottom:24px; -webkit-transition-duration:0ms; transition-duration:0ms; }
.main-head.direction-prev .swiper-slide-next .msg dd .in { top:0; -webkit-transition-duration:0ms; transition-duration:0ms; }
.main-head.direction-prev .swiper-slide-active .img { -webkit-animation:aniswiper-prev 600ms both; animation:aniswiper-prev 600ms both; }

.iconMouse {position:absolute; bottom:60px; left:50%; transform:translate(-50%, 0); z-index:1; width:24px; height:38px; background:url("/image/mouse.png") no-repeat 0 0; z-index:3;}
.iconMouse:before{content:'SCROLL'; display:block; position:absolute; top:-26px; left:50%; margin-left:-30px; width:60px; font-family:'Metropolis-Bold'; font-size:15px; color:#fff; letter-spacing:0px}
.iconMouse .ball{position:absolute; top:8px; left:10px; animation:aniMouse 1s ease-out infinite;}

.img1920 {}
.img640 {display:none;}

@media all and (max-width:1200px) {
	.main-head .swiper-slide { height:840px; }
	.main-head .img {height:840px;}
}

@media all and (max-width:960px) {
	.main-head .swiper-slide { height:740px; }
	.main-head .img {height:740px;}
}

@media all and (max-width:560px) {
	.main-head .img .in {min-width:100%; /* width:auto; min-width:100%; height:100vh; */}
	.img1920 {display:none;}
	.img640 {display:block;}
	
	.iconMouse {bottom:40px; width:18px; height:29px; background-size:100%;}
	.iconMouse:before {width:50px; top:-22px; margin-left:-25px; font-size:12px; }
	.iconMouse .ball {top:5px; left:7px;}
}


@keyframes aniMouse {0%{top:8px;}50%{top:14px;}100%{top:8px;}}

/****************************** Animation ******************************/
.title { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease; transition:all 600ms ease; }
.title-sub { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease 100ms; transition:all 600ms ease 100ms; }
.btn-more { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:opacity 600ms ease 200ms, -webkit-transform 600ms ease 200ms; transition:opacity 600ms ease 200ms, transform 600ms ease 200ms; }
.title.ani-visible, .title-sub.ani-visible, .btn-more.ani-visible { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }
.rnd .list, .company-culture .list, .newsroom .list > li { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease 200ms; transition:all 600ms ease 200ms; }
.newsroom .list > li:nth-child(1) { -webkit-animation-delay:50ms; animation-delay:50ms; }
.newsroom .list > li:nth-child(2) { -webkit-animation-delay:100ms; animation-delay:100ms; }
.newsroom .list > li:nth-child(3) { -webkit-animation-delay:200ms; animation-delay:200ms; }
.rnd.ani-visible .list, .company-culture.ani-visible .list, .newsroom .list > li.ani-visible { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }
.global-network .list .name { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease; transition:all 600ms ease; }
.global-network .list .val { opacity:0; -webkit-transform:translateY(90px);transform:translateY(90px); -webkit-transition:all 600ms ease; transition:all 600ms ease; }
.global-network .list > li:nth-child(1) .name, .global-network .list > li:nth-child(1) .val { -webkit-transition-delay:50ms; transition-delay:50ms; }
.global-network .list > li:nth-child(2) .name, .global-network .list > li:nth-child(2) .val { -webkit-transition-delay:450ms; transition-delay:450ms; }
.global-network .list > li:nth-child(3) .name, .global-network .list > li:nth-child(3) .val { -webkit-transition-delay:450ms; transition-delay:450ms; }
.global-network .list > li:nth-child(4) .name, .global-network .list > li:nth-child(4) .val { -webkit-transition-delay:650ms; transition-delay:650ms; }
.global-network .list .ani-visible .name, .global-network .list .ani-visible .val { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }


.rnd .swiper-button-prev, .company-culture .swiper-button-prev { animation:ani-prevbtn-2-out 300ms both; }
.rnd .swiper-button-prev .ir::after, .company-culture .swiper-button-prev .ir::after { animation:ani-prev-2-out 300ms both; }
.rnd .swiper-button-next, .company-culture .swiper-button-next { animation:ani-nextbtn-2-out 300ms both; }
.rnd .swiper-button-next .ir::after, .company-culture .swiper-button-next .ir::after { animation:ani-next-2-out 300ms both; }
.rnd .swiper-button-prev:hover, .company-culture .swiper-button-prev:hover { animation:ani-prevbtn-2 600ms both; }
.rnd .swiper-button-prev:hover .ir::after, .company-culture .swiper-button-prev:hover .ir::after { animation:ani-prev-2 600ms both; }
.rnd .swiper-button-next:hover, .company-culture .swiper-button-next:hover { animation:ani-nextbtn-2 600ms both; }
.rnd .swiper-button-next:hover .ir::after, .company-culture .swiper-button-next:hover .ir::after { animation:ani-next-2 600ms both; }

.main-head .swiper-button-prev { animation:ani-prevbtn-3-out 300ms both; }
.main-head .swiper-button-prev::after { animation:ani-prev-3-out 300ms both; }
.main-head .swiper-button-prev::before { animation:ani-prev-3-out-bar 300ms both; }
.main-head .swiper-button-next { animation:ani-nextbtn-3-out 300ms both; }
.main-head .swiper-button-next::after { animation:ani-next-3-out 300ms both; }
.main-head .swiper-button-next::before { animation:ani-next-3-out-bar 300ms both; }
.main-head .swiper-button-prev:hover { animation:ani-prevbtn-3 600ms both; }
.main-head .swiper-button-prev:hover::after { animation:ani-prev-3 600ms both; }
.main-head .swiper-button-prev:hover::before { animation:ani-prev-3-bar 600ms both; }
.main-head .swiper-button-next:hover { animation:ani-nextbtn-3 600ms both; }
.main-head .swiper-button-next:hover::after { animation:ani-next-3 600ms both; }
.main-head .swiper-button-next:hover::before { animation:ani-next-3-bar 600ms both; }

@keyframes ani-prevbtn-2{ 100%{border-color:#ff6567;background-color:#ff6567;} 0%, 50%{background-color:transparent;} }
@keyframes ani-nextbtn-2{ 100%{border-color:#ff6567;background-color:#ff6567;} 0%, 50%{background-color:transparent;} }
@keyframes ani-prev-2{ 100%{left:50%;border-color:#fff;} 50.1%{left:100%;border-color:#fff;} 50%{left:-100%;} }
@keyframes ani-next-2{ 100%{right:50%;border-color:#fff;} 50.1%{right:100%;border-color:#fff;} 50%{right:-100%;} }

@keyframes ani-prevbtn-2-out{ 0%{border-color:#ff6567;background-color:#ff6567;} 100%{background-color:transparent;} }
@keyframes ani-nextbtn-2-out{ 0%{border-color:#ff6567;background-color:#ff6567;} 100%{background-color:transparent;} }
@keyframes ani-prev-2-out{ 0%{left:50%;border-color:#fff;} 100%{left:50%;} }
@keyframes ani-next-2-out{ 0%{right:50%;border-color:#fff;} {right:50%;} }

@keyframes ani-prevbtn-3-out{ 0%{background-color:#ff6567;} 100%{background-color:transparent;} }
@keyframes ani-nextbtn-3-out{ 0%{background-color:#ff6567;} 100%{background-color:transparent;} }
@keyframes ani-prev-3-out{ 0%{margin-left:-3px;} }
@keyframes ani-next-3-out{ 0%{margin-right:-3px;} }
@keyframes ani-prev-3-out-bar{ 0%{left:70%;background-color:transparent;} 100%{left:50%;} }
@keyframes ani-next-3-out-bar{ 0%{right:70%;background-color:transparent;} 100%{right:50%;} }

@keyframes ani-prevbtn-3{ 100%{background-color:#ff6567;} 0%, 50%{background-color:transparent;} }
@keyframes ani-nextbtn-3{ 100%{background-color:#ff6567;} 0%, 50%{background-color:transparent;} }
@keyframes ani-prev-3{ 100%{left:50%;border-color:#fff;margin-left:-3px;} 50.1%{left:100%;border-color:#fff;margin-left:-3px;} 50%{left:-100%;} }
@keyframes ani-next-3{ 100%{right:50%;border-color:#fff;margin-right:-3px;} 50.1%{right:100%;border-color:#fff;margin-right:-3px;} 50%{right:-100%;} }
@keyframes ani-prev-3-bar{ 100%{left:50%;background-color:transparent;} 50.1%{left:100%;background-color:transparent;} 50%{left:-100%;} }
@keyframes ani-next-3-bar{ 100%{right:50%;background-color:transparent;} 50.1%{right:100%;background-color:transparent;} 50%{right:-100%;} }

@keyframes aniswiper{0%{ left:100%; } 100%{ left:0; }}
@-webkit-keyframes aniswiper{0%{ left:100%; } 100%{ left:0; }}
@keyframes aniswiper-prev{0%{ right:100%; } 100%{ right:0; }}
@-webkit-keyframes aniswiper-prev{0%{ right:100%; } 100%{ right:0; }}

.line-set { position:absolute; left:50%; top:185px; z-index:-1; width:1182px; height:1140px; margin:0 0 0 -680px; opacity:0; -webkit-transition:opacity 2000ms ease; transition:opacity 2000ms ease; }
.rnd.ani-visible .line-set { opacity:1; }
.line-set .line { position:absolute; left:0; top:0; width:1182px; height:1140px; background:url("/resource/p/kr/image/main/main-line.png") 0 0 no-repeat; opacity:0; -webkit-animation:mainline 10500ms linear infinite both; animation:mainline 10500ms linear infinite both; }
.line-set .line:nth-child(2) { opacity:.9; -webkit-animation-delay:300ms; animation-delay:300ms; }
.line-set .line:nth-child(3) { opacity:.81; -webkit-animation-delay:600ms; animation-delay:600ms; }
.line-set .line:nth-child(4) { opacity:.72; -webkit-animation-delay:900ms; animation-delay:900ms; }
.line-set .line:nth-child(5) { opacity:.63; -webkit-animation-delay:1200ms; animation-delay:1200ms; }
.line-set .line:nth-child(6) { opacity:.54; -webkit-animation-delay:1500ms; animation-delay:1500ms; }
.line-set .line:nth-child(7) { opacity:.45; -webkit-animation-delay:1800ms; animation-delay:1800ms; }
.line-set .line:nth-child(8) { opacity:.36; -webkit-animation-delay:2100ms; animation-delay:2100ms; }
.line-set .line:nth-child(9) { opacity:.27; -webkit-animation-delay:2400ms; animation-delay:2400ms; }
.line-set .line:nth-child(10) { opacity:.18; -webkit-animation-delay:2700ms; animation-delay:2700ms; }
.line-set .line:nth-child(11) { opacity:.09; -webkit-animation-delay:3000ms; animation-delay:3000ms; }
@keyframes mainline{
	0% {left:0; top:0;} 6.25% {left:5.5px; top:-28.5px;} 12.5% {left:22px; top:-53.5px;} 18.75% {left:46.5px; top:-69.5px;}
	25% {left:75px; top:-75px;} 31.25% {left:103.5px; top:-69.5px;} 37.5% {left:128px; top:-53.5px;}
	43.75% {left:144px; top:-28.5px;} 50% {left:149.5px; top:0;} 56.25% {left:144px; top:28.5px;}
	62.5% {left:128px; top:53.5px;} 68.75% {left:103.5px; top:69.5px;} 75% {left:75px; top:75px;}
	81.25% {left:46.5px; top:69.5px;} 87.5% {left:22px; top:53.5px;} 93.75% {left:5.5px; top:28.5px;} 100% {left:0; top:0;}
}
@-webkit-keyframes mainline{
	0% {left:0; top:0;} 6.25% {left:5.5px; top:-28.5px;} 12.5% {left:22px; top:-53.5px;} 18.75% {left:46.5px; top:-69.5px;}
	25% {left:75px; top:-75px;} 31.25% {left:103.5px; top:-69.5px;} 37.5% {left:128px; top:-53.5px;}
	43.75% {left:144px; top:-28.5px;} 50% {left:149.5px; top:0;} 56.25% {left:144px; top:28.5px;}
	62.5% {left:128px; top:53.5px;} 68.75% {left:103.5px; top:69.5px;} 75% {left:75px; top:75px;}
	81.25% {left:46.5px; top:69.5px;} 87.5% {left:22px; top:53.5px;} 93.75% {left:5.5px; top:28.5px;} 100% {left:0; top:0;}
}


/* 트러스트키 소식 */
.newWrap {position:relative; width:1300px; margin:150px auto;}
.mTitle {padding:0 0 20px 0; font-size:45px; font-weight:500; line-height:1.2; letter-spacing:-1.0px;}
.mTitle .small {font-size:15px; font-weight:400; letter-spacing:inherit;}
.mTitle .more {float:right; padding:27px 0 0 0; font-size:13px; font-weight:400; letter-spacing:inherit; text-decoration:underline;}

.newBox {float:left; width:100%; padding:0 12px; }
.newBox .pic {width:100%; height:190px; text-align:center; overflow:hidden;}
.newBox .pic img {width:auto; height:100%;}
.newBox .tit {width:100%; padding:27px 5px 12px 5px; font-size:17px; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.newBox .cont {width:100%; height:40px; padding:0 5px; font-size:16px; font-weight:300; line-height:1.3; word-break:break-all; overflow:hidden;}
.newBox .bottom {padding:40px 5px 15px 5px; font-size:14px; color:#b6b6b6; font-weight:400; border-bottom:1px solid #e9e9e9;}
.newBox .bottom .date {float:right; font-size:13px; font-weight:300;}
.newBox:nth-child(5) {margin:0;}

.btnLeft {position:absolute; top:48%; left:-10%; width:65px; height:65px; border-radius:37.5px; background:url(/image/arrow_l.png) no-repeat left center; background-size:auto; cursor:pointer;}
.btnRight {position:absolute; top:48%; right:-10%; width:65px; height:65px; border-radius:37.5px; background:url(/image/arrow_r.png) no-repeat right center; background-size:auto; cursor:pointer;}

.btnLeft:hover {background:url(/image/arrow_l.png) no-repeat -65px center #ff6567; background-size:auto;}
.btnRight:hover {background:url(/image/arrow_r.png) no-repeat 0 center #ff6567; background-size:auto;}

@media all and (max-width:1300px) {
	.newWrap {width:95%;}
	.mTitle {font-size:38px;}
	
	.newBox {}
	.newBox .pic {height:180px;}
	.newBox .tit {font-size:15px;}
	.newBox .cont {height:35px; font-size:14px;}

	.btnLeft {left:-20px; width:40px; height:40px; background-size:80px auto;}
	.btnRight {right:-20px; width:40px; height:40px; background-size:80px auto;}

	.btnLeft:hover {background:url(/image/arrow_l.png) no-repeat -40px center #ff6567; background-size:80px auto;}
	.btnRight:hover {background-size:80px auto;}
}

@media all and (max-width:1000px) {
	.newWrap {margin:100px auto;}
	.mTitle {font-size:33px;}
	.newBox .bottom {font-size:13px;}
	.newBox .bottom .date {font-size:12px;}
}

@media all and (max-width:960px) {
	.newWrap {margin:100px auto;}

	.mTitle {font-size:30px;}
	.mTitle .small {font-size:14px;}
	.mTitle .more { padding:20px 0 0 0; font-size:12px;}

	.newBox .tit {padding:17px 5px 12px 5px;}
	.newBox .pic {height:170px;}
	.newBox .pic img {width:100%; height:auto;}

	
}


@media all and (max-width:840px) {
	.mTitle {padding:0 0 10px 0; font-size:30px;}
	.mTitle .small {font-size:12px;}
	.mTitle .more { padding:15px 0 0 0;}
	
	.newBox .tit {padding:10px 5px 12px 5px;}
	.newBox .pic {height:150px;}
}

@media all and (max-width:768px) {
	.newBox .pic {height:130px;}
	
	.btnLeft {left:-10px; width:30px; height:30px; background-size:60px auto;}
	.btnRight {right:-10px; width:30px; height:30px; background-size:60px auto;}

	.btnLeft:hover {background:url(/image/arrow_l.png) no-repeat -30px center #ff6567; background-size:60px auto;}
	.btnRight:hover {background-size:60px auto;}
	
}

@media all and (max-width:680px) {
	.newWrap {width:90%; margin:80px auto;}
	.mTitle .small {display:none;}

	.newBox .pic {height:160px;}


}

@media all and (max-width:580px) {
	.newBox {padding:0 5px;}
	.newBox .pic {height:150px;}
	.newBox .pic img {width:auto; height:100%;}
	.newBox .tit {font-size:14px;}
	.newBox .cont {height:30px; font-size:13px;}

	.btnLeft, .btnRight {display:none;}
}

@media all and (max-width:480px) {
	.newWrap {width:95%; margin:60px auto;}
	.mTitle {font-size:26px;}
	.newBox .pic {height:130px;}
}



/* animation */
.mTitle, .newBox {opacity:0; -webkit-transform: translateY(70px); transform: translateY(70px); -webkit-transition: all 600ms ease 100ms; transition: all 600ms ease 100ms;} 
.vodWrap .inner .brand, .vodWrap .inner .bigTit,
.vodWrap .inner .cont {opacity:0; -webkit-transform: translateY(70px); transform: translateY(70px); -webkit-transition: all 600ms ease 100ms; transition: all 600ms ease 100ms;}
.vodWrap .vod {opacity:0; -webkit-transform: translateY(70px); transform: translateY(70px); -webkit-transition: all 600ms ease 100ms; transition: all 600ms ease 100ms;}
.goWrap .goTit {opacity:0; -webkit-transform: translateY(70px); transform: translateY(70px); -webkit-transition: all 600ms ease 100ms; transition: all 600ms ease 100ms;}
.goWrap .goCont {opacity:0; -webkit-transform: translateY(70px); transform: translateY(70px); -webkit-transition: all 600ms ease 100ms; transition: all 600ms ease 100ms;}
.goWrap .inner {opacity:0; -webkit-transform: translateY(70px); transform: translateY(70px); -webkit-transition: all 600ms ease 100ms; transition: all 600ms ease 100ms;}

.mTitle.ani-visible {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
.newBox.ani-visible {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
.vodWrap .inner .brand.ani-visible {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
.vodWrap .inner .bigTit.ani-visible {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
.vodWrap .inner .cont.ani-visible {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
.vodWrap .vod.ani-visible {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
.goWrap .goTit.ani-visible {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
.goWrap .goCont.ani-visible {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}
.goWrap .inner.ani-visible {opacity:1; -webkit-transform: translateY(0); transform: translateY(0);}



/* 메인동영상 */
.vodWrap {clear:both; position:relative; width:100%; height:700px; margin:0 0 200px 0; overflow:hidden;}
.vodWrap .inner {position:absolute; left:50%; margin-left:-650px; width:1700px; height:543px; background:url(/image/map.png) no-repeat -100px 70px #1e202b; padding:126px 0 0 245px; color:#fff; }
.vodWrap .inner .brand {text-indent:5px; font-size:12px; font-weight:600; font-family:"Metropolis-Bold"; letter-spacing:6px;}
.vodWrap .inner .bigTit {padding:10px 0 20px 0; font-size:45px; font-weight:400; letter-spacing:-1.5px;}
.vodWrap .inner .cont {width:35%; padding:0 0 60px 0; font-size:15px; font-weight:300;}
.vText {
	display: inline-block;
    position: absolute;
    left:16%;
    bottom:-20px;
    text-align: left;
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    color: rgba(255,255,255,.09);
	font-family:"Metropolis-Bold";
    font-size: 152px;
    font-weight: 900;
    letter-spacing: 0;
    margin-block-start: 0;
    margin-block-end: 0;
	z-index:1;
}

@media all and (max-width:1800px) {
	.vodWrap .inner {margin-left:-700px; width:1600px; padding:126px 0 0 7%;}
	.vText {left:10%;  font-size: 145px;}
}


@media all and (max-width:1600px) {
	.vodWrap {margin:0 0 150px 0;}
	.vodWrap .inner {left:0; margin-left:0; width:100%; padding:126px 0 0 7%; }
	.vText {left:0;  font-size: 140px;}
}


@media all and (max-width:1300px) {
	.vodWrap {height:650px; margin:0 0 100px 0;}
	.vodWrap .inner {height:470px; padding:100px 0 0 7%;}
	.vodWrap .inner .bigTit {font-size:38px;}
	.vText {bottom:10px;}
}

@media all and (max-width:1000px) {
	.vodWrap {height:600px; margin:0 0 70px 0;}
	.vodWrap .inner {height:410px;}
	.vodWrap .inner .bigTit {font-size:33px;}
	.vodWrap .inner .cont {width:50%; padding:0 0 40px 0;}
	.vText {left:-20px; bottom:15px;}
}

@media all and (max-width:960px) {
	.vodWrap {height:550px;}
	.vodWrap .inner {height:380px; padding:80px 0 0 7%;}
	.vodWrap .inner .bigTit {font-size:30px;}
	.vodWrap .inner .cont {font-size:14px;}
}

@media all and (max-width:840px) {
	.vodWrap .inner .cont {font-size:12px;}
}

@media all and (max-width:768px) {
	.vodWrap {height:480px; margin:0 0 130px 0;}
	.vodWrap .inner {height:340px; padding:80px 0 0 5%;}
}

@media all and (max-width:640px) {
	.vodWrap {height:1260px;}
	.vodWrap .inner {height:1100px;}
	.vodWrap .inner {padding:75px 0 0 0;}
	.vodWrap .inner .brand {padding:0 0 0 10%;}
	.vodWrap .inner .bigTit {padding:10px 0 20px 10%;}
	.vodWrap .inner .cont {padding:0 0 40px 10%;}
	.vText {display:none;}
}

@media all and (max-width:480px) {
	.vodWrap {height:1200px;}
	.vodWrap .inner .bigTit {font-size:26px;}
}


.vodWrap .overWrap {width:1355px; }
.vodWrap .vod {position:relative; float:left; width:436px; height:300px; margin:0 22px 0 0; overflow:hidden; z-index:2;}
.vodWrap .vod iframe {width:100%; height:80%;}
.vodWrap .vod .play {position:absolute; top:50%; left:50%; width:82px; height:82px; margin:-55px 0 0 -41px; background:url(/image/btn-play.png) no-repeat; background-size:100%; opacity:.5;}
.vodWrap .vod:hover .play {opacity:1;}
.vodWrap .vod img {width:100%; height:270px; box-shadow:0 15px 15px rgba(0,0,0,.05);}
.vodWrap .vod .name {padding:15px 0 0 0; text-align:center; font-size:17px; font-weight:500; color:#000;}
.vodWrap .vod:nth-child(3) {margin:0;}
.vodWrap .vod video {width:100%; height:auto;}



@media all and (max-width:1600px) {
	
	.vodWrap .overWrap {width:100%;}
	.vodWrap .vod {width:32%; margin:0 1.66% 0 0; }
	.vodWrap .vod .name {font-size:14px;}
}


@media all and (max-width:1300px) {
	.vodWrap .vod {height:280px;}
}


@media all and (max-width:1100px) {
	.vodWrap .vod {height:250px;}
	.vodWrap .vod iframe {height:70%;}
}

@media all and (max-width:768px) {
	.vodWrap .overWrap {width:95%;}
	.vodWrap .vod {height:200px;}
}

@media all and (max-width:640px) {
	.vodWrap .overWrap {width:70%; margin:0 auto;}
	.vodWrap .vod {width:100%; height:340px; display:block; text-align:center; margin:0 auto;}
	.vodWrap .vod .name:nth-child(1) {color:#fff;}
	.vodWrap .vod .name:nth-child(2) {color:#fff;}
}

@media all and (max-width:540px) {
	.vodWrap .overWrap {width:80%;}
	.vodWrap .vod {height:320px;}
}



/* 바로가기 */
.goWrap {position:relative; width:100%; height:920px; overflow:hidden;}
.goWrap .goTit {text-align:center; font-size:45px; font-weight:500; letter-spacing:-1.5px;}
.goWrap .goCont {padding:10px 0 7px 0; text-align:center; font-size:15px; font-weight:400; letter-spacing: inherit;}
.goWrap .goBg {position:absolute; bottom:0; width:100%; height:50%; background:#f2f2f2; z-index:-1;}
.goWrap .inner {position:relative; width:1300px; margin:50px auto 0; color:#fff;}
.goWrap .inner .left {position:absolute; width:50%; height:604px; left:50%; top:0; margin:0 0 0 -50%; background:url(/image/mm01_on.jpg) no-repeat center center; background-size:100% auto; }
.goWrap .inner .left:after {content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,.5);}
.goWrap .inner .right {position:absolute; width:50%; height:604px; right:50%; top:0; margin:0 -50% 0 0; background:url(/image/mm02_on.jpg) no-repeat center center; background-size:100% auto; }
.goWrap .inner .right:after {content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,.5);}

.goWrap .inner .overB {position:absolute; width:100%; height:0; bottom:0; left:0; background:rgba(0,0,0,.7);}
.goWrap .inner .usb {position:absolute; width:30px; height:47px; top:330px; left:15%; background:url(/image/icon_m01.png) no-repeat left top; background-size:100% auto; z-index:1;}
.goWrap .inner .server {position:absolute; width:48px; height:47px; top:330px; left:15%; background:url(/image/icon_m02.png) no-repeat left top; background-size:100% auto; z-index:1;}
.goWrap .inner .sTxt {position:absolute; top:410px; left:15%; font-size:12px; font-weight:600; font-family: "Metropolis-Bold"; letter-spacing: 6px; z-index:1;}
.goWrap .inner .bTxt {position:absolute; top:430px; left:15%; font-size:35px; font-weight:500; letter-spacing:-1.2px; z-index:1;}
.goWrap .inner .btnRed {position:absolute; bottom:85px; left:15%; background:#c44748; padding:5px 20px; border-radius:50px; color:#fff; font-size:12px; font-weight:300; letter-spacing:0; display:inline-block; z-index:1;}
.goWrap .inner .sCont {position:absolute; width:46%; bottom:40px; left:15%; color:transparent; font-size:14px; font-weight:300; word-break:break-all; line-height:1.2; z-index:1; }
.goWrap .inner .arrow {position:absolute; width:46px; height:21px; bottom:35px; left:15%; background:url(/image/arrow_red.png) no-repeat -46px 0; background-size:100%; z-index:1;}

.goWrap .inner .left:hover {width:55%; height:674px; margin:-35px -2.5% 0 -52.5%; background:url(/image/mm01_on.jpg) no-repeat center center; background-size:100% auto;  box-shadow:20px 20px 30px rgba(0,0,0,.2); z-index:3;}
.goWrap .inner .left:hover:after {content:'';background:none;}
.goWrap .inner .left:hover .overB {height:288px;}
.goWrap .inner .left:hover .usb {top:365px; left:17.5%; background:url(/image/icon_m01.png) no-repeat 0 50px;}
.goWrap .inner .left:hover .sTxt {top:445px; left:17.5%;}
.goWrap .inner .left:hover .bTxt {top:465px; left:17.5%;}
.goWrap .inner .left:hover .btnRed {bottom:120px; left:17.5%; opacity:0;}
.goWrap .inner .left:hover .sCont {width:42%; bottom:113px; left:17.5%; color:#fff;}
.goWrap .inner .left:hover .arrow {bottom:70px; left:17.5%; background:url(/image/arrow_red.png) no-repeat 0 0; background-size:auto;}

.goWrap .inner .right:hover {width:55%; height:674px; margin:-35px -52.5% 0 -2.5%; background:url(/image/mm02_on.jpg) no-repeat center center; background-size:100% auto; box-shadow:20px 20px 30px rgba(0,0,0,.2);}
.goWrap .inner .right:hover:after {content:'';background:none;}
.goWrap .inner .right:hover .overB {height:288px;}
.goWrap .inner .right:hover .server {top:365px; left:17.5%; background:url(/image/icon_m02.png) no-repeat 0 50px;}
.goWrap .inner .right:hover .sTxt {top:445px; left:17.5%;}
.goWrap .inner .right:hover .bTxt {top:465px; left:17.5%;}
.goWrap .inner .right:hover .btnRed {bottom:120px; left:17.5%; opacity:0;}
.goWrap .inner .right:hover .sCont {width:42%; bottom:113px; left:17.5%; color:#fff;}
.goWrap .inner .right:hover .arrow {bottom:70px; left:17.5%; background:url(/image/arrow_red.png) no-repeat 0 0; background-size:auto;}


@media all and (max-width:1300px) {
	.goWrap .goTit {font-size:38px;}
	.goWrap .inner {width:95%;}
	.goWrap .inner .left {height:580px; background-size:105% auto;}
	.goWrap .inner .right {height:580px; background-size:105% auto;}

	.goWrap .inner .btnRed {bottom:60px;}

	.goWrap .inner .left:hover {height:650px;}
	.goWrap .inner .left:hover .sTxt {top:420px;}
	.goWrap .inner .left:hover .bTxt {top:440px;}
	.goWrap .inner .left:hover .sCont {width:45%;}

	.goWrap .inner .right:hover {height:650px;}
	.goWrap .inner .right:hover .sTxt {top:420px;}
	.goWrap .inner .right:hover .bTxt {top:440px;}
	.goWrap .inner .right:hover .sCont {width:55%;}

}

@media all and (max-width:1150px) {
	.goWrap .inner .left {height:520px; background-size:auto 110%;}
	.goWrap .inner .right {height:520px; background-size:auto 110%;}
	
	.goWrap .inner .usb {top:270px;}
	.goWrap .inner .server {top:270px;}
	.goWrap .inner .sTxt {top:345px;}
	.goWrap .inner .bTxt {top:360px; font-size:33px;}
	.goWrap .inner .btnRed {bottom:75px;}

	.goWrap .inner .left:hover {height:590px;}
	.goWrap .inner .left:hover .sTxt {top:350px;}
	.goWrap .inner .left:hover .bTxt {top:370px;}
	.goWrap .inner .left:hover .sCont {width:45%;}

	.goWrap .inner .right:hover {height:590px;}
	.goWrap .inner .right:hover .sTxt {top:350px;}
	.goWrap .inner .right:hover .bTxt {top:370px;}
	.goWrap .inner .right:hover .sCont {width:55%;}
}

@media all and (max-width:1000px) {
	.goWrap .goTit {font-size:33px;}
	.goWrap .inner .sCont {font-size:12px;}

	.goWrap .inner .left:hover {height:570px; margin:-25px -2.5% 0 -52.5%; background-size:auto 100%;}
	.goWrap .inner .right:hover {height:570px; margin:-25px -52.5% 0 -2.5%; background-size:auto 100%;}
}

@media all and (max-width:960px) {
	.goWrap {height:780px;}
	.goWrap .goTit {font-size:30px;}
	.goWrap .goCont {font-size:14px;}

	.goWrap .inner .left {height:480px; background-size:auto 100%;}
	.goWrap .inner .right {height:480px; background-size:auto 100%;}

	.goWrap .inner .usb {top:240px;}
	.goWrap .inner .server {top:240px;}
	.goWrap .inner .sTxt {top:315px;}
	.goWrap .inner .bTxt {top:330px; }
	.goWrap .inner .btnRed {bottom:65px;}

	.goWrap .inner .left:hover {height:530px; margin:-25px -2.5% 0 -52.5%; background-size:auto 100%;}
	.goWrap .inner .left:hover .overB {height:270px;}
	.goWrap .inner .left:hover .sTxt {top:310px;}
	.goWrap .inner .left:hover .bTxt {top:330px;}
	.goWrap .inner .left:hover .sCont {width:45%;}

	.goWrap .inner .right:hover {height:530px; margin:-25px -52.5% 0 -2.5%; background-size:auto 100%;}
	.goWrap .inner .right:hover .overB {height:270px;}
	.goWrap .inner .right:hover .sTxt {top:310px;}
	.goWrap .inner .right:hover .bTxt {top:330px;}
	.goWrap .inner .right:hover .sCont {width:55%;}
}

@media all and (max-width:840px) {
	.goWrap .goCont {font-size:12px;}

	.goWrap .inner .left {height:415px; }
	.goWrap .inner .right {height:415px; }

	.goWrap .inner .usb {width:26px; height:40px; top:200px;}
	.goWrap .inner .server {width:41px; height:40px; top:200px;}
	.goWrap .inner .sTxt {top:270px; font-size:11px;}
	.goWrap .inner .bTxt {top:285px; font-size:28px;}
	.goWrap .inner .btnRed {bottom:55px; padding:4px 15px; font-size:11px;}

	.goWrap .inner .left:hover {height:465px; margin:-25px -2.5% 0 -52.5%;}
	.goWrap .inner .left:hover .overB {height:220px;}
	.goWrap .inner .left:hover .sTxt {top:280px;}
	.goWrap .inner .left:hover .bTxt {top:300px;}
	.goWrap .inner .left:hover .sCont {width:55%; bottom:85px;}
	.goWrap .inner .left:hover .arrow {bottom:50px; background-size:40px auto;}

	.goWrap .inner .right:hover {height:465px; margin:-25px -52.5% 0 -2.5%;}
	.goWrap .inner .right:hover .overB {height:220px;}
	.goWrap .inner .right:hover .sTxt {top:280px;}
	.goWrap .inner .right:hover .bTxt {top:300px;}
	.goWrap .inner .right:hover .sCont {width:65%; bottom:85px;}
	.goWrap .inner .right:hover .arrow {bottom:50px; background-size:40px auto;}

}

@media all and (max-width:640px) {
	.goWrap .inner {width:85%;}
	.goWrap .inner .left {width:100%; height:300px; left:0; margin:0; background-size:100% auto;}
	.goWrap .inner .right {top:300px; width:100%; height:300px; left:0; margin:0; background-size:100% auto;}

	.goWrap .inner .usb {top:100px;}
	.goWrap .inner .server {top:100px;}
	.goWrap .inner .sTxt {top:150px; font-size:11px;}
	.goWrap .inner .bTxt {top:165px; font-size:28px;}
	.goWrap .inner .btnRed {bottom:55px; padding:4px 15px; font-size:11px;}
	.goWrap .inner .arrow {bottom:40px; background-size:40px auto;}

	.goWrap .inner .left:hover {width:110%; height:340px; margin:-20px 0 0 -5%; background-size:100% auto;}
	.goWrap .inner .left:hover .usb {top:130px;}
	.goWrap .inner .left:hover .sTxt {top:160px;}
	.goWrap .inner .left:hover .bTxt {top:180px;}
	.goWrap .inner .left:hover .sCont {width:65%; bottom:75px;}
	.goWrap .inner .left:hover .arrow {bottom:40px; background-size:40px auto;}

	.goWrap .inner .right:hover {width:110%; height:340px; margin:-20px 0 0 -5%; background-size:100% auto;}
	.goWrap .inner .right:hover .server {top:130px;}
	.goWrap .inner .right:hover .sTxt {top:160px;}
	.goWrap .inner .right:hover .bTxt {top:180px;}
	.goWrap .inner .right:hover .sCont {width:65%; bottom:75px;}
	.goWrap .inner .right:hover .arrow {bottom:40px; background-size:40px auto;}

}


@media all and (max-width:540px) {
	.goWrap {height:850px;}
	.goWrap .inner .sTxt {top:150px; font-size:10px;}
	.goWrap .inner .bTxt {top:165px; font-size:25px;}
}

@media all and (max-width:480px) {
	.goWrap .goTit {font-size:26px;}

}


/* 하단영역 */
.bottomWrap {width:1300px; margin:0 auto; padding:100px 0; overflow:hidden;}
.bottomWrap .bNav {float:left; width:65%; }
.bottomWrap .bNav ul {float:left; width:20%; }
.bottomWrap .bNav ul.w34 {width:34%;}
.bottomWrap .bNav ul.w20 {width:26%;}
.bottomWrap .bNav ul li {font-size:14px; font-weight:300; color:#8d8d8d; line-height:1.7;}
.bottomWrap .bNav .name {padding:0 0 18px 0; color:#000; font-size:17px; font-weight:600; font-family: "Metropolis-Bold"; letter-spacing:0.5px;}

.bottomWrap .bContact {float:right; width:35%; height:170px; background:url(/image/contact.png) no-repeat 35px center; padding:40px 20px 0 180px; border:5px solid #f7f7f7;}
.bottomWrap .bContact .name {font-size:25px; font-weight:400; line-height:1.2; letter-spacing:-1.2px;}
.bottomWrap .bContact .more {width:120px; margin:5px 0 0 0; background:url(/image/icon_arrow.png) no-repeat 90% center #f2f2f2; padding:8px 0 6px 6%; font-size:11px; font-weight:500; display:inline-block;}

@media all and (max-width:1300px) {
	.bottomWrap {width:95%;}

	.bottomWrap .bContact {background:url(/image/contact.png) no-repeat 20px center; background-size:110px auto; padding:40px 20px 0 150px;}
	.bottomWrap .bContact .name {font-size:22px;}
}

@media all and (max-width:1100px) {
	.bottomWrap {padding:80px 0;}
	.bottomWrap .bNav ul li {font-size:12px;}
	.bottomWrap .bNav .name {font-size:15px;}

	.bottomWrap .bContact {height:150px; background-size:100px auto; padding:30px 15px 0 140px;}
	.bottomWrap .bContact .name {font-size:19px;}
}

@media all and (max-width:960px) {
	.bottomWrap .bNav ul.w34 {width:36%;}
	.bottomWrap .bNav ul.w20 {width:24%;}

	.bottomWrap .bContact {height:140px; background-size:90px auto; padding:30px 15px 0 130px;}
	.bottomWrap .bContact .name {font-size:17px;}
}

@media all and (max-width:840px) {
	.bottomWrap .bNav {width:75%;}
	.bottomWrap .bContact {width:25%; height:190px; background:url(/image/contact.png) no-repeat center 10px; background-size:auto 85px; padding:105px 3% 0 3%; border:3px solid #f7f7f7; text-align:center;}
	.bottomWrap .bContact .name {font-size:15px;} 
	.bottomWrap .bContact .more {width:100px; padding:6px 0 4px 7%; font-size:10px; text-align:left; }
}

@media all and (max-width:720px) {
	.bottomWrap {padding:60px 0;}
	.bottomWrap .bNav {width:80%;}
	.bottomWrap .bContact {width:20%;}
}

@media all and (max-width:640px) {
	.bottomWrap {width:85%;}
	.bottomWrap .bNav {float:none; width:100%;}
	.bottomWrap .bNav .name {line-height:1.2;}
	.bottomWrap .bNav ul {width:21%;}
	.bottomWrap .bNav ul.w34 {width:30%;}
	.bottomWrap .bNav ul.w20 {width:28%;}
	.bottomWrap .bContact {display:none; width:100%;}
}


@media all and (max-width:540px) {
	.bottomWrap {width:90%;}
}

@media all and (max-width:460px) {
	.bottomWrap {width:80%; padding:40px 0;}
	.bottomWrap .bNav .name {font-size:17px; padding:0 0 12px 0;}
	.bottomWrap .bNav ul {width:50%; height:150px; }
	.bottomWrap .bNav ul.w34 {width:50%;}
	.bottomWrap .bNav ul.w20 {width:50%;}
	.bottomWrap .bNav ul li {font-size:13px; font-weight:500; line-height:1.5;}
}


.footWrap {width:100%; height:250px; background:#222;  padding:40px 0 50px 0; }
.footWrap .inner {width:1300px; margin:0 auto; font-size:15px; font-weight:300; color:rgba(255,255,255,.5);}
.footWrap .fNav {padding:0 0 25px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.footWrap .fNav span {margin:0 15px 0 0; color:#fff;}
.footWrap .fNav .link {float:right;}
.footWrap .fNav .link span {width:50px; height:35px; margin:-7px 15px; background-size:auto; opacity:.6; display:inline-block;}
.footWrap .fNav .link span:hover {opacity:1;}
.footWrap .addr {float:left; width:60%; padding:25px 0 0 0; }
.footWrap .addr .space {margin:0 15px;}
.footWrap .addr .copy {font-size:13px; padding:15px 0 0 0; letter-spacing:0.5px;}
.footWrap .addr .copy .com {color:#ff6567;}
.footWrap .fam {float:right; position:relative; height:53px; margin:25px 0 0 0; background:url(/image/arrow_fa.png) no-repeat 90% center; padding:0 65px 0 28px; line-height:53px; border:1px solid rgba(255,255,255,.2); display:inline-block;}
.footWrap .fam ul {position:absolute; top:-120px; left:-1px; width:101%; background:#fff; color:#000; line-height:35px; padding:10px 28px; border:1px solid rgba(0,0,0,.2); opacity:0; display:none;}
.footWrap .fam:hover, .footWrap .fam:active {background:url(/image/arrow_fa_on.png) no-repeat 90% center #fff; color:#000;}
.footWrap .fam:hover ul {opacity:1; top:-127px; display:block;}

.snsF {background:url(/image/sns_f.png) no-repeat center center;}
.snsU {background:url(/image/icon_you.png) no-repeat center center;}
.snsR {background:url(/image/sns_r.png) no-repeat center center;}
.snsT {background:url(/image/icon_twitter.png) no-repeat center center;}
.snsL {background:url(/image/icon_in.png) no-repeat center center;}


@media all and (max-width:1300px) {
	.footWrap .inner {width:95%; font-size:13px;}
	.footWrap .addr {width:78%; }

	.footWrap .fam {padding:0 55px 0 20px;}
}

@media all and (max-width:960px) {
	.footWrap .addr .space {margin:0 5px;}
	.footWrap .fam {height:50px; line-height:50px; padding:0 30px 0 15px;}
}

@media all and (max-width:820px) {
	.footWrap .inner {font-size:12px;}
	.footWrap .addr {width:70%;}
	.footWrap .fNav .link span {width:40px; height:28px; background-size:auto 100%;}
}

@media all and (max-width:768px) {
	.footWrap .addr {width:65%;}
	.footWrap .addr .copy {font-size:12px;}
}

@media all and (max-width:540px) {
	.footWrap {height:330px;}
	.footWrap .inner {width:90%;}
	.footWrap .addr {width:100%;}

	.footWrap .fam {float:left; height:40px; margin:20px 0 0 0; line-height:40px; padding:0 65px 0 28px; border:1px solid rgba(255,255,255,.3);}
}




/* gotop */
.scrollToTop {
	width:60px; 
	height:60px;
	border-radius:50%;
	background:url(/image/gotop_b.png) center 16px no-repeat rgba(255,255,255,.7);
	background-size:auto;
	border:1px solid rgba(0,0,0,.3);
	position:fixed;
	bottom:35px;
	right:35px;
	display:none;
	font-size:14px;
	font-family: 'Metropolis-Bold';
	font-weight:700;
	color:rgba(0,0,0,.3);
	padding:30px 0 0 0;
	text-align:center;
	z-index:5;
	transition: 0.5s ease; -moz-transition: 0.5s ease; -webkit-transition: 0.5s ease;  -o-transition: 0.5s ease;
}
.scrollToTop:hover {
	box-shadow:0 10px 10px rgba(0,0,0,.3);
	border:0px;
	background:url(/image/gotop.png) center 16px no-repeat #ff6567;
	color:#fff;
	transition: 0.5s ease; -moz-transition: 0.5s ease; -webkit-transition: 0.5s ease;  -o-transition: 0.5s ease;
}


@media all and (max-width:768px) {
	.scrollToTop {width:40px; height:40px; font-size:0px;}
}