html, body { width: 100%; height: 100%; overflow: hidden; }

.wrapper { width: 100%; height: 100%; }

.main-header { height: auto; z-index: 100; }

.main-container { width: 100%; height: 100%; position: relative; }

.main-container .slide-cover { width: 100%; height: 100%; padding: 72px 12px; box-sizing: border-box; position: absolute; }

.main-container .slide-cover .back-cover { width: 0; height: 100%; transition: all cubic-bezier(0.77, 0.01, 0.22, 1) 1s; }

.main-container .main-slide { padding: 72px 12px; width: 100%; height: 100%; box-sizing: border-box; }

.main-container .main-slide .slide1 .back-img { background: url(../../images/kv/main/main-kv_1_bg_s4.png) no-repeat; }

.main-container .main-slide .slide2 .back-img { background: url(../../images/kv/main/main-kv_2_bg_s4.png) no-repeat; }

.main-container .main-slide .slide3 .back-img { background: url(../../images/kv/main/main-kv_3_bg_s4.png) no-repeat; }

.main-container .main-slide .slide4 .back-img { background: url(../../images/kv/main/main-kv_4_bg_s4.png) no-repeat; }

.main-container .main-slide .slide5 .back-img { background: url(../../images/kv/main/main-kv_5_bg_s4.png) no-repeat; }

.main-container .main-slide .slide-content .back-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; opacity: 0; visibility: hidden; }

.main-container .main-slide .slide-content.on .back-img { opacity: 1; visibility: visible; transition: all 0.5s ease-in-out 1s; }

.main-container .main-slide-text { top: 0; width: 100%; padding: 72px 12px; box-sizing: border-box; z-index: 99; bottom: 30px; }

.main-container .main-slide-text .text-content { transition: all cubic-bezier(0.77, 0.01, 0.22, 1) 1s; opacity: 0; visibility: hidden; position: absolute; width: 100%; padding: 0 12px; box-sizing: border-box; left: 0; bottom: 72px; text-align: center; }

.main-container .main-slide-text .text-content .content_title { font-size: 6.666666666666667vw; font-family: NanumSquareEB; position: absolute; width: 100%; left: 0; bottom: 12.08333333333333vw; padding: 0 32px; box-sizing: border-box; word-break: keep-all; }

.main-container .main-slide-text .text-content .content_description { display: none; word-break: keep-all; }

.main-container .main-slide-text .text-content .content_btn a span { display: none; }

.main-container .main-slide-text .text-content .content_btn a:before { display: none !important; }

.main-container .main-slide-text .text-content[data-mobile-color="white"] { color: white; }

.main-container .main-slide-text .text-content[data-mobile-color="black"] { color: black; }

.main-container .main-slide-text .text-content[data-direction="none"] { transform: translate3d(0, 15px, 0); }

.main-container .main-slide-text .text-content[data-direction="forward"] { transform: translate3d(0, 0px, 0); }

.main-container .main-slide-text .text-content[data-state="show"] { visibility: visible; opacity: 1; }

.main-container .main-slide-text .text-content[data-state="show"] .content_description, .main-container .main-slide-text .text-content[data-state="show"] .content_btn { visibility: visible; opacity: 1; }

.main-container .main-slide-text .text-content[data-state="hide"] { transition: all ease-in-out .5s; visibility: hidden; opacity: 0; }

.main-container .slide_arrows { display: none; }

.main-container .slide_indicate { position: absolute; bottom: 0; width: 100%; text-align: center; height: 72px; line-height: 72px; }

.main-container .slide_indicate .indicate_bar { display: inline-block; width: 119px; height: 1.2px; background: #ccc; vertical-align: middle; margin: 0 10px; overflow: hidden; }

.main-container .slide_indicate .indicate_bar .set_time { width: 100%; height: 1px; background: #000; transform: translate3d(-100%, 0, 0); transition: transform linear 1060ms; }

.main-container .slide_indicate .indicate_text { font-size: 12px; font-family: Roboto-Bold; }

@media screen and (min-width: 480px) { .main-container .main-slide .slide1 .back-img { background: url(../../images/kv/main/main-kv_1_bg_s3.png) no-repeat; }
  .main-container .main-slide .slide2 .back-img { background: url(../../images/kv/main/main-kv_2_bg_s3.png) no-repeat; }
  .main-container .main-slide .slide3 .back-img { background: url(../../images/kv/main/main-kv_3_bg_s3.png) no-repeat; }
  .main-container .main-slide .slide4 .back-img { background: url(../../images/kv/main/main-kv_4_bg_s3.png) no-repeat; }
  .main-container .main-slide .slide5 .back-img { background: url(../../images/kv/main/main-kv_5_bg_s3.png) no-repeat; }
  .main-container .main-slide .slide-content .back-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; opacity: 0; visibility: hidden; }
  .main-container .main-slide .slide-content.on .back-img { opacity: 1; visibility: visible; transition: all 0.5s ease-in-out 1s; }
  .main-container .main-slide-text .text-content { bottom: 130px; }
  .main-container .main-slide-text .text-content .content_title { font-size: 32px; bottom: 58px; } }

@media screen and (min-width: 960px) { .main-header { height: 100%; background: transparent; position: absolute; z-index: auto}
  .main-header .logo { text-align: center; width: 100%; }
  .main-header .logo a { top: 23px; position: relative; }
  .main-header .menu-icon { width: 68px; height: 100%; text-align: center; }
  .main-header .menu-icon .menu_btn { top: 50%; margin-top: -9px; }
  .main-container .slide-cover { padding: 68px; }
  .main-container .slide-cover[data-index="0"] .back-cover { width: 100%; }
  .main-container .slide-cover[data-index="1"] .back-cover { width: 41.11328125%; }
  .main-container .slide-cover[data-index="2"] .back-cover { width: 40.52013422818792%; margin-left: 59.47986577181208%; }
  .main-container .slide-cover[data-index="3"] .back-cover { width: 48.86744966442953%; transform: translateX(2.30705%); }
  .main-container .slide-cover[data-index="4"] .back-cover { width: 45.30201342281879%; margin-left: 54.69798657718121%; }
  .main-container .main-slide { padding: 68px; }
  .main-container .main-slide .slide-content .back-img { height: 100%; background-size: cover; background-position: center; opacity: 0; visibility: hidden; position: absolute; }
  .main-container .main-slide .slide-content .obj-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; opacity: 0; visibility: hidden; }
  .main-container .main-slide .slide-content.on .back-img { opacity: 1; visibility: visible; transition: all 0.5s ease-in-out 1s; }
  .main-container .main-slide .slide-content.on .obj-img { opacity: 1; visibility: visible; transition: all 0.5s ease-in-out 1s; }
  .main-container .main-slide-text { padding: 0; bottom: inherit}
  .main-container .main-slide-text .text-content { width: 100%; height: 100%; position: absolute; text-align: left; left: 0; top: 0; right: 0; bottom: 0; padding: 68px; }
  .main-container .main-slide-text .text-content .content_title { font-size: 4.0vw; width: 40.83333333333333vw; position: relative; padding: 0; bottom: auto; }
  .main-container .main-slide-text .text-content .content_description { display: block; font-size: 14px; font-family: NanumGothic; width: 400px; line-height: 1.5; transition: all 1s cubic-bezier(0.77, 0.01, 0.22, 1) 0.75s; visibility: hidden; opacity: 0; margin-top: 55px; }
  .main-container .main-slide-text .text-content .content_btn { display: inline-block; transition: all 1s cubic-bezier(0.77, 0.01, 0.22, 1) 0.75s; visibility: hidden; opacity: 0; margin-top: 30px; overflow: hidden; }
  .main-container .main-slide-text .text-content .content_btn a { display: inline-block; width: 68px; height: 24px; border: 1px solid #fff; position: relative; }
  .main-container .main-slide-text .text-content .content_btn a .arrow_flat { position: absolute; top: 50%; left: 50%; margin-left: -12px; display: block; width: 24px; height: 1px; background: #fff; }
  .main-container .main-slide-text .text-content .content_btn a .arrow_bar { width: 7px; height: 1px; background: #fff; display: block; position: absolute; left: 50%; margin-left: 8px; }
  .main-container .main-slide-text .text-content .content_btn a .arrow_bar:first-child { transform: rotate(-45deg); top: 50%; margin-top: 2px; }
  .main-container .main-slide-text .text-content .content_btn a .arrow_bar:last-child { transform: rotate(45deg); top: 50%; margin-top: -2px; }
  .main-container .main-slide-text .text-content .content_btn a:before { display: block !important; }
  .main-container .main-slide-text .text-content[data-pc-color="white"] { color: white; }
  .main-container .main-slide-text .text-content[data-pc-color="white"] .content_btn a { border: 1px solid #fff; }
  .main-container .main-slide-text .text-content[data-pc-color="white"] .content_btn a .arrow_flat { background: #fff; transition: all ease-in-out .5s; }
  .main-container .main-slide-text .text-content[data-pc-color="white"] .content_btn a .arrow_bar { background: #fff; transition: all ease-in-out .5s; }
  .main-container .main-slide-text .text-content[data-pc-color="white"] .content_btn a:before { content: ""; background: #fff; width: 0; height: 24px; transition: all ease-in-out .5s; display: block; }
  .main-container .main-slide-text .text-content[data-pc-color="white"] .content_btn a:hover .arrow_flat { background: #000; }
  .main-container .main-slide-text .text-content[data-pc-color="white"] .content_btn a:hover .arrow_bar { background: #000; }
  .main-container .main-slide-text .text-content[data-pc-color="white"] .content_btn a:hover:before { content: ""; width: 68px; height: 24px; }
  .main-container .main-slide-text .text-content[data-pc-color="black"] { color: black; }
  .main-container .main-slide-text .text-content[data-pc-color="black"] .content_btn a { border: 1px solid #000; }
  .main-container .main-slide-text .text-content[data-pc-color="black"] .content_btn a .arrow_flat { background: #000; transition: all ease-in-out .5s; }
  .main-container .main-slide-text .text-content[data-pc-color="black"] .content_btn a .arrow_bar { background: #000; transition: all ease-in-out .5s; }
  .main-container .main-slide-text .text-content[data-pc-color="black"] .content_btn a:before { content: ""; background: #000; width: 0; height: 24px; transition: all ease-in-out .5s; display: block; }
  .main-container .main-slide-text .text-content[data-pc-color="black"] .content_btn a:hover .arrow_flat { background: #fff; }
  .main-container .main-slide-text .text-content[data-pc-color="black"] .content_btn a:hover .arrow_bar { background: #fff; }
  .main-container .main-slide-text .text-content[data-pc-color="black"] .content_btn a:hover:before { content: ""; width: 68px; height: 24px; }
  .main-container .main-slide-text .text-content[data-direction="none"] { transform: translate3d(0, 0, 0); }
  .main-container .main-slide-text .text-content[data-direction="none"] .content_description, .main-container .main-slide-text .text-content[data-direction="none"] .content_btn { transform: translate3d(0, 0, 0); }
  .main-container .main-slide-text .text-content[data-direction="forward"] { transform: translate3d(0, -30px, 0); }
  .main-container .main-slide-text .text-content[data-direction="forward"] .content_description, .main-container .main-slide-text .text-content[data-direction="forward"] .content_btn { transform: translate3d(0, -25px, 0); }
  .main-container .main-slide-text .text-content[data-state="show"] { visibility: visible; opacity: 1; }
  .main-container .main-slide-text .text-content[data-state="show"] .content_description, .main-container .main-slide-text .text-content[data-state="show"] .content_btn { visibility: visible; opacity: 1; }
  .main-container .main-slide-text .text-content[data-state="hide"] { transition: all ease-in-out .5s; visibility: hidden; opacity: 0; }
  .main-container .main-slide-text .text-content[data-index="0"] { left: 6.25vw; top: 10.41666666666667vw; }
  .main-container .main-slide-text .text-content[data-index="1"] { left: 38.54166666666667vw; top: 10.41666666666667vw; }
  .main-container .main-slide-text .text-content[data-index="2"] { left: 3.125vw; top: 11.45833333333333vw; }
  .main-container .main-slide-text .text-content[data-index="3"] { left: 39.0625vw; top: 11.45833333333333vw; }
  .main-container .main-slide-text .text-content[data-index="4"] { left: 3.125vw; top: 11.45833333333333vw; }
  .main-container .slide_arrows { position: absolute; width: 68px; height: 92px; top: 50%; margin-top: -46px; display: block; }
  .main-container .slide_arrows .arrows_btn { position: relative; width: 14px; height: 46px; display: block; text-indent: -99999px; overflow: hidden; margin: auto; padding: 0 2px; box-sizing: border-box; }
  .main-container .slide_arrows .arrows_btn .arrow_bar { width: 10px; height: 2px; background: #000; display: block; position: absolute; }
  .main-container .slide_arrows .arrows_btn .arrow_bar:first-child { transform: rotate(-45deg); top: 19px; }
  .main-container .slide_arrows .arrows_btn .arrow_bar:last-child { transform: rotate(45deg); bottom: 19px; }
  .main-container .slide_arrows .arrows_btn:last-child { transform: rotate(180deg); }
  .main-container .slide_arrows .bar { width: 14px; height: 1px; display: block; background: #ccc; margin: auto; }
  .main-container .slide_indicate { height: 68px; line-height: 68px; } }

@media screen and (min-width: 1200px) { .main-header .logo { text-align: center; }
  .main-header .logo a { top: 33px; position: relative; }
  .main-header .menu-icon { width: 88px; height: 100%; text-align: center; }
  .main-header .menu-icon .menu_btn { top: 50%; margin-top: -9px; }
  .main-container .slide-cover { padding: 88px; }
  .main-container .main-slide { padding: 88px; }
  .main-container .main-slide .slide-content .back-img { height: 100%; background-size: cover; background-position: center; opacity: 0; visibility: hidden; position: absolute; }
  .main-container .main-slide .slide-content .obj-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; opacity: 0; visibility: hidden; }
  .main-container .main-slide .slide-content.on .back-img { opacity: 1; visibility: visible; transition: all 0.5s ease-in-out 1s; }
  .main-container .main-slide .slide-content.on .obj-img { opacity: 1; visibility: visible; transition: all 0.5s ease-in-out 1s; }
  .main-container .main-slide-text .text-content { padding: 88px; }
  .main-container .main-slide-text .text-content .content_description { font-size: 16px; }
  .main-container .main-slide-text .text-content[data-index="0"] { left: 5.416666666666667vw; top: 130px; }
  .main-container .main-slide-text .text-content[data-index="1"] { left: 37.5vw; top: 130px; }
  .main-container .main-slide-text .text-content[data-index="2"] { left: 2.083333333333333vw; top: 130px; }
  .main-container .main-slide-text .text-content[data-index="3"] { left: 37.5vw; top: 140px; }
  .main-container .main-slide-text .text-content[data-index="4"] { left: 2.083333333333333vw; top: 130px; }
  .main-container .slide_arrows { width: 88px; }
  .main-container .slide_indicate { height: 88px; line-height: 88px; } }

@media screen and (min-width: 1440px) { .main-container .main-slide-text .text-content[data-index="1"] { left: 40vw; } }

@media screen and (min-width: 1920px) { .main-container .main-slide-text .text-content .content_title { font-size: 90px; }
  .main-container .main-slide-text .text-content[data-index="0"] { top: 150px; }
  .main-container .main-slide-text .text-content[data-index="1"] { left: 40vw; top: 150px; }
  .main-container .main-slide-text .text-content[data-index="2"] { top: 150px; }
  .main-container .main-slide-text .text-content[data-index="3"] { top: 170px; }
  .main-container .main-slide-text .text-content[data-index="4"] { top: 150px; } 
}