#main {width:100%;}

#main .bg {top: 0; left:0; bottom: 0; right:0; width: 100%; height:100%; position: absolute; z-index: -1; background-size: cover; background-position: center; transition: 800ms ease; transform: translateY(0) scale(1.1);}
#main .on .bg {transform: translateY(0) scale(1); transition:2s ease-in-out;}

#main p.title {text-align: center; font-family:"Roboto",sans-serif; font-size:32px; color:#fff; font-weight:500; letter-spacing:-0.025em; line-height:36px; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}

#main .on p.title {transform: translateY(0); opacity:1;}

#main .visual {width:100%; position:relative; overflow: hidden; height:480px;}
#main .visual .bg {background-image:linear-gradient(rgba(0, 0, 0, 0.327), rgba(0, 0, 0, 0.3)), url("../img/main/bg01_1.jpg");}

#main .visual .txt {position:absolute; top:150px; left:0; width:100%; text-align: center;}
#main .visual .txt p {font-size:32px; color:#fff; font-weight:500; letter-spacing:-0.025em; line-height:36px; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}
#main .visual .txt span {display: block; font-size:16px; color:#fff; font-weight:400; letter-spacing:-0.05em; line-height:22px; margin-top:15px; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}
#main .visual .txt font {display: block; font-family:"Roboto",sans-serif; font-size:19px; color:rgba(255,255,255,0.72); font-weight:400; letter-spacing:-0.05em; line-height:22px; margin-top:25px; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}

#main .visual .icon-scroll {position:absolute; left:50%; transform: translateX(-50%) translateX(0.5px); bottom:25px; opacity:0; transition:all 0.5s ease-in-out; z-index:1;}
#main .visual .icon-scroll div {width:19px; height:31px; box-shadow: inset 0 0 0 1px #fff; -ms-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; margin:auto; position:relative; margin-bottom:10px; animation: nudgeIcon 5s linear infinite;}
#main .visual .icon-scroll div::before {content:''; width:3px; height:3px; background: #fff; top:6px; -ms-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;  animation: trackBallSlide 5s linear infinite; position: absolute; left:8px;}
#main .visual .icon-scroll p {font-family:"Roboto",sans-serif; font-size:11px; color:#fff; font-weight:400; letter-spacing:0.15em; text-indent:0.15em; line-height:15px; animation: nudgeText 5s linear infinite;}

#main .visual.on .txt p {transform: translateY(0); opacity:1; transition-delay:0.5s;}
#main .visual.on .txt span {transform: translateY(0); opacity:1; transition-delay:0.7s;}
#main .visual.on .txt font {transform: translateY(0); opacity:1; transition-delay:0.8s;}

#main .visual.on .icon-scroll {opacity:1; transition-delay:0.8s;}

@keyframes nudgeIcon {
	0% {transform: translateY(0);}
	20% {transform: translateY(8px);}
	30% {transform: translateY(0);}
	50% {transform: translateY(8px);}
	60% {transform: translateY(0);}
	80% {transform: translateY(8px);}
	90% {transform: translateY(0);}
}
@keyframes trackBallSlide {
	0% {opacity: 1; transform: scale(1) translateY(0px);}
	6% {opacity: 1; transform: scale(0.9) translateY(6px);}
	14% {opacity: 0; transform: scale(0.4) translateY(40px);}
	15%, 19% {opacity: 0; transform: scale(0.4) translateY(0px);}
	28%, 29.99% {opacity: 1; transform: scale(1) translateY(0px);}
	30% {opacity: 1; transform: scale(1) translateY(0px);}
	36% {opacity: 1; transform: scale(0.9) translateY(6px);}
	44% {opacity: 0; transform: scale(0.4) translateY(40px);}
	45%, 49% {opacity: 0; transform: scale(0.4) translateY(0px);}
	58%, 59.99% {opacity: 1; transform: scale(1) translateY(0px);}
	60% {opacity: 1; transform: scale(1) translateY(0px);}
	66% {opacity: 1; transform: scale(0.9) translateY(6px);}
	74% {opacity: 0; transform: scale(0.4) translateY(40px);}
	75%, 79% {opacity: 0; transform: scale(0.4) translateY(0px);}
	88%, 100% {opacity: 1; transform: scale(1) translateY(0px);}
}
@keyframes nudgeText {
	0% {transform: translateY(0);}
	20% {transform: translateY(6px);}
	30% {transform: translateY(0);}
	50% {transform: translateY(6px);}
	60% {transform: translateY(0);}
	80% {transform: translateY(6px);}
	90% {transform: translateY(0);}
}


.mainBanner {width:100%;}
.mainBanner .bannerSw {width:100%;}
.mainBanner .bannerSw .swiper-slide {width:100%;}
.mainBanner .bannerSw .swiper-slide div {width:100%; padding:70px 0; background-color:#DADADA; text-align: center; font-size:18px; color:#666; font-weight:400; letter-spacing:-0.025em; line-height:22px;}
.mainBanner .bannerSw .swiper-pagination {font-size:0; bottom:20px;}
.mainBanner .bannerSw .swiper-pagination-bullet {width:10px; height:10px; opacity:1; background-color:#fff;}
.mainBanner .bannerSw .swiper-pagination-bullet-active {background-color:#106DB5;}


#main .product {width:100%; position:relative; overflow: hidden; padding:70px 20px; padding-bottom:80px;}
#main .product .bg {background-image:url("../img/main/bg02.jpg");}

#main .product .mProdSlider {width:100%; margin-top:15px; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}
#main .product.on .mProdSlider {transform: translateY(0); opacity:1;}

#main .product .mProdSlider .slideArrow {width:100%; text-align:right; font-size:0; padding-bottom:15px;}
#main .product .mProdSlider .slideArrow img {display:inline-block; zoom:1; *display:inline; vertical-align:top; height:16px;}
#main .product .mProdSlider .slideArrow img:last-child {margin-left:15px;}

#main .product .mProdSlider .prodCateSw {width:100%; padding-bottom:20px;}
#main .product .mProdSlider .prodCateSw .swiper-slide a.pc_s_box {display: block; width:100%;}
#main .product .mProdSlider .prodCateSw .swiper-slide a.pc_s_box .img {width:100%; position:relative; padding-top: 81.75%; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate;}
#main .product .mProdSlider .prodCateSw .swiper-slide a.pc_s_box .img img {display: block; width:100%; position:absolute; top:50%; left:0; transform: translateY(-50%);}
#main .product .mProdSlider .prodCateSw .swiper-slide a.pc_s_box p {font-family:"Roboto",sans-serif; font-size:16px; color:#fff; font-weight:300; letter-spacing:-0.025em; line-height:20px; margin-top:10px; height:40px; text-align: center;}

#main .product .mProdSlider .prodCateSw .swiper-scrollbar {width:100%!important; height:3px; background-color:#ebebeb; left:0; bottom:0;}
#main .product .mProdSlider .prodCateSw .swiper-scrollbar .swiper-scrollbar-drag {height:100%; background-color:#49ACFA;}


#main .technicalSupport {width:100%; position:relative; overflow: hidden; padding:70px 20px;}
#main .technicalSupport .bg {background-image:url("../img/main/bg03.jpg"); top: 0; bottom: 0; width: 100%; height:100%; position: absolute; z-index: -1; background-size: cover; background-position: center; transition: 800ms ease; transform: translateY(0) scale(1.08);}

#main .technicalSupport ul.tab {width:100%; text-align: center; font-size:0; margin-top:12px; margin-bottom:20px; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}
#main .technicalSupport.on ul.tab {transform: translateY(0); opacity:1;}

#main .technicalSupport ul.tab li {display:inline-block; zoom:1; *display:inline; vertical-align:top; font-family:"Roboto",sans-serif; font-size:18px; color:#7bc5ff; font-weight:500; letter-spacing:-0.025em; line-height:28px; margin:0 12px; cursor: pointer;}
#main .technicalSupport ul.tab li.on {color:#fff; opacity:1;}

#main .technicalSupport .tsContainer {width:100%; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}
#main .technicalSupport.on .tsContainer {transform: translateY(0); opacity:1;}
#main .technicalSupport .tsContainer .tsContent {width:100%; display:none;}
#main .technicalSupport .tsContainer .tsContent .list {width:100%; overflow: hidden; text-align: center;}
#main .technicalSupport .tsContainer .tsContent .list a {float:left; width:calc(100% - 6px); background-color:#fff; margin-right:12px; padding:6px; padding-bottom:12px; -ms-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
#main .technicalSupport .tsContainer .tsContent .list a:last-child {margin-right:0;}
#main .technicalSupport .tsContainer .tsContent .list a .img {width:100%; padding-top:58.26%; overflow: hidden; position:relative; -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate;}
#main .technicalSupport .tsContainer .tsContent .list a .img img {display: block; width:140px; position:absolute; top:50%; transform: translateY(-50%);}
#main .technicalSupport .tsContainer .tsContent .list a font {display: block; font-size:15px; color:#333; font-weight:400; letter-spacing:-0.025em; line-height:20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top:12px;}
#main .technicalSupport .tsContainer .tsContent .list a span {display: block; font-size:13px; color:#666; font-weight:400; letter-spacing:-0.025em; line-height:18px; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; height:36px; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; margin-top:4px;}

#main .technicalSupport .tsContainer .tsContent .btn {width:100%; margin-top:30px; text-align: center;}
#main .technicalSupport .tsContainer .tsContent .btn a {display:inline-block; zoom:1; *display:inline; vertical-align:top; width:130px; border:1px solid #Fff; position:relative; overflow: hidden;}
#main .technicalSupport .tsContainer .tsContent .btn a::after {position: absolute; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); content: ''; width:0; left:50%; top:0; background: #f7f7f7; height: 120%; left: -10%; transform: skewX(15deg); z-index: -1;}
#main .technicalSupport .tsContainer .tsContent .btn a div {display:inline-block; zoom:1; *display:inline; vertical-align:top; font-family:"Roboto",sans-serif; font-size:16px; color:#fff; font-weight:300; letter-spacing:-0.025em; line-height:39px; padding-right:22px; position:relative; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);}
#main .technicalSupport .tsContainer .tsContent .btn a div::before {content:""; width:11px; height:1px; background-color:#fff; position:absolute; top:19px; right:0; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);}
#main .technicalSupport .tsContainer .tsContent .btn a div::after {content:""; width:1px; height:11px; background-color:#fff; position:absolute; top:14px; right:5px; transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);}



#main .nsContainer {width:100%; position:relative; overflow: hidden; padding:40px 20px; }
#main .nsContainer .bg {background-image:url("../img/main/bg04_2.jpg");}
#main .nsContainer .nsContent {width:100%; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}
#main .nsContainer.on .nsContent {transform: translateY(0); opacity:1;}

#main .nsContainer .nsContent:last-child {margin-top:30px;}
#main .nsContainer .nsContent .title {width:100%; overflow: hidden;}
#main .nsContainer .nsContent .title p {font-family:"Roboto",sans-serif; font-size:26px; color:#fff; font-weight:400; letter-spacing:-0.025em; line-height:30px; float:left;}
#main .nsContainer .nsContent .title a {float:right; width:16px; height:16px; margin-top:4px; position:relative;}
#main .nsContainer .nsContent .title a::before {content:""; width:16px; height:2px; background-color:#fff; position:absolute; top:7px; left:0;}
#main .nsContainer .nsContent .title a::after {content:""; width:2px; height:16px; background-color:#fff; position:absolute; top:0; left:7px;}

#main .nsContainer .nsContent ul.news_list {width:100%; background-color:#fff; margin-top:12px; padding:20px 15px; border:1px solid #b1b1b1;}
#main .nsContainer .nsContent ul.news_list li {width:100%; overflow: hidden; position:relative; margin-bottom:8px; padding-left:12px;}
#main .nsContainer .nsContent ul.news_list li:last-child {margin-bottom:0;}
#main .nsContainer .nsContent ul.news_list li::before {content:"·"; font-size:14px; color:#444; font-weight:600; line-height:20px; position:absolute; top:0; left:0;}
#main .nsContainer .nsContent ul.news_list li a {float:left; font-size:14px; color:#444; font-weight:400; letter-spacing:-0.025em; line-height:20px; position:relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width:calc(100% - 24px);}
#main .nsContainer .nsContent ul.news_list li a.nt {padding-left:42px;}
#main .nsContainer .nsContent ul.news_list li a.nt::before {content:"[공지]"; font-size:14px; color:#ff5400; font-weight:500; letter-spacing:-0.025em; line-height:20px; position:absolute; top:0; left:0;}
#main .nsContainer .nsContent ul.news_list li a:hover {text-decoration: underline; color:#000;}
#main .nsContainer .nsContent ul.news_list li span {float:left; font-family:"Roboto",sans-serif; font-size:10px; color:#fff; font-weight:400; letter-spacing:-0.025em; margin-top:3px; margin-left:7px; background-color:#ff5400; width:15px; height:15px; -ms-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; display: flex; justify-content: center; align-items: center; text-align: center; line-height:16px;}


#main .nsContainer .nsContent .search_form {width:100%; background-color:#fff; margin-top:12px; border:1px solid #b1b1b1;}
#main .nsContainer .nsContent .search_form .chk {width:100%; overflow: hidden; border-bottom:1px solid #b1b1b1;}
#main .nsContainer .nsContent .search_form .chk label {float:left; width:50%;}
#main .nsContainer .nsContent .search_form .chk label input {display:none;}
#main .nsContainer .nsContent .search_form .chk label div {padding:14px 0; text-align: center; font-size:15px; color:#666; font-weight:400; letter-spacing:-0.025em; line-height:20px;}
#main .nsContainer .nsContent .search_form .chk label input:checked + div {background-color:#0066B6; color:#fff;}

#main .nsContainer .nsContent .search_form .formContainer {width:100%;}
#main .nsContainer .nsContent .search_form .formContainer .formContent {width:100%; display:none;}

#main .nsContainer .nsContent .search_form form {width:100%; display: flex; align-items: center;}
#main .nsContainer .nsContent .search_form .form {width:100%; padding:20px 15px;}
#main .nsContainer .nsContent .search_form .form dl {width:100%; overflow: hidden; text-align:left;}
#main .nsContainer .nsContent .search_form .form dl:last-child {margin-top:10px;}
#main .nsContainer .nsContent .search_form .form dl dt {width:80px; float:left; font-family: 'NanumSquare',sans-serif; font-size:16px; color:#222; font-weight:600; letter-spacing:-0.01em; line-height:40px; transform: skew(-0.03deg);}
#main .nsContainer .nsContent .search_form .form dl dd {width:calc(100% - 80px); float:left;}
#main .nsContainer .nsContent .search_form .form dl dd select {width:100%; height:40px; border:1px solid #ccc; padding:0 12px; font-size:14px; color:#121212; font-weight:400; letter-spacing:-0.05em; background:url("../img/common/selectBtn.png")no-repeat right 12px center; background-size:10px; -ms-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
#main .nsContainer .nsContent .search_form .form dl dd input {width:100%; height:40px; border:1px solid #ccc; padding:0 12px; font-size:14px; color:#121212; font-weight:400; letter-spacing:-0.05em; -ms-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
#main .nsContainer .nsContent .search_form .form dl dd div {width:100%; position:relative; padding-right:52px;}
#main .nsContainer .nsContent .search_form .form dl dd div a.sfSubmit {width:44px; height:100%; position:absolute; top:0; right:0; background:url("../img/main/search.png")no-repeat center #0066B6; background-size:18px; font-size:0; -ms-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; transition:all 0.2s; cursor: pointer;}
#main .nsContainer .nsContent .search_form .form dl dd div a.sfSubmit:hover {background-color:#004d89;}


#main .company {width:100%; position:relative; overflow: hidden; text-align: center; padding:80px 20px; padding-bottom:110px;}
#main .company .bg {background-image:url("../img/main/bg05.jpg"); top: 0; bottom: 0; width: 100%; height:100%; position: absolute; z-index: -1; background-size: cover; background-position: center; transition: 800ms ease; transform: translateY(0) scale(1.08);}

#main .company span {display: block; font-size:18px; color:#fff; font-weight:400; letter-spacing:-0.025em; line-height:24px; margin-top:15px; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}
#main .company font {display: block; font-size:15px; color:#fff; font-weight:300; letter-spacing:-0.025em; line-height:20px; margin-top:12px; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}
#main .company .btn {width:100%; margin-top:40px; font-size:0; transform: translateY(30px); opacity:0; transition:all 0.5s ease-in-out;}
#main .company .btn a {display:inline-block; zoom:1; *display:inline; vertical-align:top; width:140px; background:url("../img/main/btnArrow_white.png")no-repeat right 18px center #0066B6; background-size:7px; padding-left:20px; font-size:15px; color:#fff; font-weight:300; letter-spacing:-0.025em; line-height:38px; text-align:left; -ms-border-radius:100px; -o-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; margin:0 6px; transition:all 0.2s;}
#main .company .btn a:hover {background-color:#004d89;}

#main .company.on span, #main .company.on font, #main .company.on .btn {transform: translateY(0); opacity:1;}




#main .technicalSupport .slideArrow2 {width:100%; text-align:right; font-size:0; padding-bottom:15px;}
#main .technicalSupport .slideArrow2 img {display:inline-block; zoom:1; *display:inline; vertical-align:top; height:16px;}
#main .technicalSupport .slideArrow2 img:last-child {margin-left:15px;}

#main .technicalSupport .slideArrow3 {width:100%; text-align:right; font-size:0; padding-bottom:15px;}
#main .technicalSupport .slideArrow3 img {display:inline-block; zoom:1; *display:inline; vertical-align:top; height:16px;}
#main .technicalSupport .slideArrow3 img:last-child {margin-left:15px;}