/* slick-slider 필수 css */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: "";
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    -webkit-transform: translate3d(0, 0, 0);
}
[dir="rtl"] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
    margin: 0 auto;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto; /*border:1px solid transparent;*/
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-slide {
    -webkit-transform: translate3d(0, 0, 0);
}

#main {
    position: relative;
}

/* 메인비주얼 */
#mainVisual {
    position: relative;
}
#mainVisual .visu {
}
#mainVisual .visu .slick-slide {
    height: 1080px;
}
#mainVisual .visu .slick-slide > div {
    height: 100%;
}
#mainVisual .visual {
    height: 100%;
    position: relative;
    overflow: hidden;
}
#mainVisual .visual .bg {
    width: 100%;
    height: 100%;
    background-size: cover !important;
    transition: transform 3s ease-in-out;
    transform: scale(1.2);
}
#mainVisual .visual.active .bg {
    transform: scale(1);
}
#mainVisual .visual01 .bg {
    background: url("/img/main/mainVisual01.jpg") no-repeat center top;
}
#mainVisual .visual02 .bg {
    background: url("/img/main/mainVisual02.jpg") no-repeat center top;
}
#mainVisual .visual03 .bg {
    background: url("/img/main/mainVisual03.jpg") no-repeat center top;
}

#mainVisual .visual .txt {
    width: 100%;
    text-align: center;
    color: #fff;

    position: absolute;
    left: 0;
    top: 390px;
}
#mainVisual .visual .txt h2 {
    opacity: 0;
    margin-bottom: 30px;
    font-size: 60px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
}
#mainVisual .visual .txt h2 img,
#mainVisual .visual .txt h2 span {
    display: inline-block;
    vertical-align: bottom;
}
#mainVisual .visual.active .txt h2 {
    animation: fadeDown30 1s 0.3s ease forwards;
}
#mainVisual .visual .txt p {
    opacity: 0;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.3;
}
#mainVisual .visual.active .txt p {
    animation: fadeUp30 1s 0.8s ease forwards;
}

/* 스크롤 다운 */
.scroll_down {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
}
.scroll_down button {
    padding: 250px 0 80px;
    background: none;
    border: none;
    position: relative;
}

.scroll_down:before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    animation: circle_ani02 3s ease infinite;
}
@keyframes circle_ani02 {
    0% {
        top: 0;
    }
    50% {
        top: 50%;
    }
    100% {
        top: 0;
    }
}

#mainVisual .scroll_down button span {
    display: block;
    font-size: 11px;
    color: #fff;
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    transform: rotate(90deg);
}
#mainVisual .scroll_down button:before,
#mainVisual .scroll_down button:after {
    content: "";
    display: block;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
    left: 50%;
}
#mainVisual .scroll_down button:before {
    height: 200px;
    top: 0;
}
#mainVisual .scroll_down button:after {
    height: 30px;
    bottom: 0;
}

#mainVisual .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 360px;
    height: 100px;
    background-color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0;
}
#mainVisual .controls > div {
    display: inline-block;
    vertical-align: middle;
}
#mainVisual .controls .play {
}
#mainVisual .controls .play button {
    width: 27px;
    height: 27px;
    border: 1px solid rgba(40, 40, 40, 0.2);
    border-radius: 50%;
    background: url("/img/main/icon_play.png") no-repeat 53% center;
}
#mainVisual .controls .bar {
    margin: 0 15px 0 30px;
}
#mainVisual .controls .bar span {
    display: block;
    width: 147px;
    height: 2px;
    background-color: #bfbfbf;
    position: relative;
}
#mainVisual .controls .bar span:after {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    background-color: #282828;
    position: absolute;
    left: 0;
    top: 0;
}
#mainVisual .controls.active .bar span:after {
    animation: bar_ani 4s ease forwards;
}

#mainVisual .controls .arrowBox {
    font-size: 0;
}
#mainVisual .controls .arrowBox button {
    width: 8px;
    height: 14px;
    border: none;
    font-size: 0;
}
#mainVisual .controls .arrowBox button.prev {
    margin-right: 36px;
    background: url("/img/main/icon_prev.png") no-repeat;
}
#mainVisual .controls .arrowBox button.next {
    background: url("/img/main/icon_next.png") no-repeat;
}

/* 메인 */
.mconTit {
    font-size: 30px;
    font-weight: 700;
    color: #003764;
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
}
.mconTit > span {
    color: #333;
}

.conTxt {
    color: #333;
}
.conTxt p {
    font-size: 45px;
	font-weight: 700;
    line-height: 1.3;
    font-family: "NanumSquare_acB";
	margin-bottom: 10px;
}

.conTxt span {
    display: block;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.7;
}

.mcon .conTxt p.move {
    animation: fadeUp30 0.8s ease-in-out forwards;
}
.mcon .conTxt span.move {
    animation: fadeUp30 0.8s ease-in-out forwards;
}

.bigTit {
    position: absolute;
}

/* about */
.about {
    height: 1102px;
    padding: 150px 0 20px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

/*.about:after{
    content: "";
    display: block;
    width: 100%;
    height: 885px;
    background: url("/img/main/about_img01.png") no-repeat;

}*/

.about .tit {
    position: relative;
}
.about .tit .mconTit {
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.about.load .tit .mconTit {
    animation: fade 1s 0.8s ease-in-out forwards;
}
.about .tit img {
    opacity: 0;
    transform: scale(0.5);
    transition: all 1s ease-in-out;
}
.about.load .tit img {
    opacity: 1;
    transform: scale(1);
}

.about .conTxt {
    padding: 90px 15px 0;
}
.about .conTxt p {
    margin-bottom: 25px;
}

.about .img {
    /* margin-top: -355px;
    position: relative;*/
    z-index: -1;
    position: absolute;
    left: 0;
    bottom: 0;
}
.about .img img {
    opacity: 0;
    display: block;
}
.about .img img.move {
    animation: fadeUp50 0.8s 0.5s ease forwards;
}

/* business*/
.business {
    overflow: hidden;
}
.business article {
    padding: 100px 0;
    position: relative;
}
.business article > div {
    float: left;
    box-sizing: border-box;
}
.business .txt {
  /* width: 44.76744186047%; */
    width: calc(100% - 950px);
    padding-left: 160px;
}
.business .txt .mconTit {
    display: inline-block;
    padding: 28px 34px 0 0;
    margin-bottom: 60px;
    position: relative;
    letter-spacing: -0.3em;
    transition: all 0.8s ease-in-out;
}
.business .txt .mconTit.move {
    opacity: 1;
    letter-spacing: 0;
    }
.business .txt .mconTit:after {
    content: "";
    display: block;
    width: 51px;
    height: 49px;
    background: url("/img/main/icon_mark.png") no-repeat;
    position: absolute;
    right: 0;
    top: 0;
}

.business .txt .conTxt {
    margin-bottom: 140px;
}
.business .txt .conTxt dt {}
.business .txt .conTxt dd {}
.business .txt .busi_pagination.move {
    animation: fadeLeft50 0.8s ease-in-out forwards;
}
.business .txt .busi_pagination li {
    display: block;
    width: auto;
    height: auto;
	font-size: 24px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    padding-left: 22px;
    background: none;
    position: relative;
    opacity: 1;
    outline: none;
    transition: all 0.5s;
}
.business .txt .busi_pagination li span {
    background: none;
    border: none;
}
.business .txt .busi_pagination li:before,
.business .txt .busi_pagination li:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: calc(1.3em / 2);
	transform: translateY(-50%);
    transition: all 0.5s;
}
.business .txt .busi_pagination li:before {
    width: 4px;
    height: 4px;
    background-color: #5b9fba;
}
.business .txt .busi_pagination li:after {
    opacity: 0;
    width: 100px;
    height: 7px;
    background: url("/img/main/icon_arrow02.png") no-repeat;
}
.business .txt .busi_pagination li + li {
    margin-top: 15px;
}

.business .txt .busi_pagination li.swiper-pagination-bullet-active {
    padding-left: 120px;
}

.business .txt .busi_pagination li.swiper-pagination-bullet-active span {
    color: #6fb1c8;
}

.business .txt .busi_pagination li.swiper-pagination-bullet-active:before {
    opacity: 0;
}
.business .txt .busi_pagination li.swiper-pagination-bullet-active:after {
    opacity: 1;
}

.business .slideBox {
  /* width: 55.23255813953%; */
    width: 950px;
    position: relative;
}
.business .slideBox.move {
    animation: fadeRight100 0.8s ease-in-out forwards;
}
.business .slideBox:after {
    content: "";
    display: block;
    width: 59.5%;
    height: 100%;
    background-color: #d8d8d8;
    position: absolute;
    right: -100px;
    top: 100px;
    z-index: -1;
}

.business .slideBox .swiper-container {
}
.business .slideBox .swiper-container {
    position: relative;
}

.business .slideBox .swiper-slide > a {
    display: block;
    width: 100%;
    height: 100%;
}
.business .slideBox .wrap .img img {
}

.business .slideBox .controlBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 283px;
    background-color: #fff;
    font-size: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.business .slideBox .controlBox > div {
}
.business .slideBox .controlBox button {
    width: 65px;
    height: 65px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    font-size: 0;
    border-radius: 50%;
    transition: all 0.5s;
}
.business .slideBox .controlBox button.prev {
    background: #fff url("/img/main/icon_prev02.png") no-repeat center;
}
.business .slideBox .controlBox button.prev:hover {
    background: #5b9fba url("/img/main/icon_prev02_on.png") no-repeat center;
}
.business .slideBox .controlBox button.next {
    background: #fff url("/img/main/icon_next02.png") no-repeat center;
}
.business .slideBox .controlBox button.next:hover {
    background: #5b9fba url("/img/main/icon_next02_on.png") no-repeat center;
}

.business .slideBox .controlBox .bar {
    width: 2px;
    height: 120px;
    margin: 1px auto;
    background-color: #d8d8d8;
    position: relative;
}
.business .slideBox .controlBox .bar:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    background-color: #282828;
    position: absolute;
    left: 0;
    top: 0;
}
.business .slideBox .controlBox.active .bar:after {
    animation: bar_ani02 3.5s ease forwards;
}
.business02 .slideBox .controlBox .bar:after {
    height: 100%;
}
.business02 .slideBox .controlBox.active .bar:after {
    animation: none;
}

.moreBtn {
    display: block;
    width: 85px;
    height: 85px;
    background: #fff url("/img/main/icon_arrow01.png") no-repeat center;
    position: absolute;
    left: 85px;
    top: 33.2%;
    font-size: 0;
    transition: all 0.5s;
    border: none;
}
.moreBtn:after {
    content: "";
    display: none;
    width: 100%;
    height: 100%;
    background-color: #5b9fba;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
}
.business .slideBox:hover .moreBtn {
    background: #5b9fba url("/img/main/icon_arrow01_on.png") no-repeat center;
}

.business02 .bigTit {
    left: -100px;
    top: -15px;
    z-index: 1;
}
.business03 .bigTit {
    right: -100px;
    top: -15px;
    z-index: 1;
}

/* business 짝수 */
.business article:nth-child(even) .txt {
    float: right;
}

.business article:nth-child(even) .slideBox:after {
    right: auto;
    left: -100px;
}
.business article:nth-child(even) .slideBox .controlBox {
    left: auto;
    right: 0;
}
.business article:nth-child(even) .moreBtn {
    left: auto;
    right: 85px;
}


/* refer */
.refer {
    margin: 140px 0 210px 260px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.refer h3 {
    margin-bottom: 50px;
    font-size: 60px;
    font-weight: 900;
    color: #222;
    font-family: "Poppins", sans-serif;
}
.refer h3.move {
    animation: fadeLeft50 0.8s ease-in-out forwards;
}
.refer .slideBox {
    width: 100%;
    max-width: 1300px;
    position: relative;
    /* margin: 0 auto; */
}
.refer .slideBox.move {
    animation: fadeLeft50 0.8s ease-in-out forwards;
}
.refer .swiper-container {
    overflow: visible;
    position: relative;
    width: 100%;
}
.refer .swiper-slide {
    /* max-width: 400px; */
}

.refer .swiper-slide > a {
    display: block;
    width: 100%;
	border: 1px solid #e0e0e0;
	background: #fff;
	padding: 49px 20px;
	box-sizing:border-box;
	transition:all .3s;
}
.refer .swiper-slide > a:hover {
	border: 1px solid #599fb9;
	transition:all .3s;
}
.refer .swiper-slide .date{
	display: flex;
}
.refer .swiper-slide .date img{
	position: relative;
	top: -1px;
	display: block;
	margin-right: 13px;
}
.refer .swiper-slide .date p{
	font-family: "Roboto Condensed", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #999;
}
.refer .swiper-slide .txt span{
	font-size: 16px;
	font-weight: 300;
	color: #333;
	font-family: 'Noto Sans KR';
	display: block;
	padding: 28px 0 20px;
	box-sizing:border-box;
	width:100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
}
.refer .swiper-slide .txt p{
	font-size: 14px;
	font-weight: 300;
	color: #666;
	font-family: 'Noto Sans KR';
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 표시할 줄 */
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	line-height: 1.4em;
	height: 2.8em;
}
.refer .swiper-slide p.slideNum{
	position: absolute;
	bottom: -11px;
	right: -2px;
	font-family: "Poppins", sans-serif;
	font-size: 80px;
	font-weight: 700;
	color: rgba(152,153,153,.1);
	padding: 0;
	margin: 0;
	display: block;
	letter-spacing: 0;
	transition:all .3s;
}
.refer .swiper-slide a:hover p.slideNum{
	color: rgba(89,159,185,.2);
	transition:all .3s;
}
.refer .controls {
    font-size: 0;
	margin-top: 60px;
}
.refer .controls * {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: "Roboto Condensed", sans-serif;
}
.refer .controls > div {
    display: inline-block;
    vertical-align: middle;
}
.refer .controls .box {
    width: 173px;
    font-size: 0;
}
.refer .controls .box > div {
    display: inline-block;
    vertical-align: middle;
}
.refer .controls .box .drag {
    margin-right: 20px;
    color: #333;
    text-transform: uppercase;
}
.refer .swiper-pagination{
    width: auto;
    position: static;
    color: #e1e1e1;
}
.refer .swiper-pagination .current{
    color: #333;
}
/*.refer .controls .box .pageBox {
    font-size: 0;
}
.refer .controls .box .pageBox > span{
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #e1e1e1;
    font-family: 'Roboto Condensed', sans-serif;

}
.refer .controls .box .pageBox > span.current{
    color: #333;
}*/


.refer .controls .swiper-scrollbar {
    width: calc(100% - 173px);
    height: 4px;
    border-radius: 0;
    background-color: #e1e1e1;
}

.refer .controls .swiper-scrollbar-drag {
    background-color: #6fb1c8;
    border-radius: 0;
}

.refer .more {
    font-size: 14px;
    color: #222;
    font-family: "Poppins", sans-serif;
    position: absolute;
    right: 0;
    top: -90px;
}

.refer .more > span {
    display: inline-block;
    padding-left: 10px;
    animation: scale_more 1.2s ease infinite;
}
@keyframes scale_more {
    0% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-5px);
    }
}

.refer .bigTit {
    right: 100px;
    top: 0;
    z-index: -1;
}


/* svg 텍스트 애니메이션 효과  */
.svgTxt {}
.svgTxt_about svg {
    max-width: 690px;
	overflow: visible;
}
.svgTxt_about path {
    stroke-dasharray: 675;
    stroke-dashoffset: 675;
}

.business .svgTxt_busi svg {
    max-width: 423px;
}

.business .svgTxt_busi path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}

.business .svgTxt_busi {
    width: 100%;
    position: absolute;
	z-index: -1;
}

.business02 .svgTxt_busi {
    left: -100px;
    top: -15px;
}

.business03 .svgTxt_busi {
    right: -100px;
    top: -15px;
}

.svgTxt_refer {
    width: 100%;
    text-align: right;
    position: absolute;
    right: -95px;
    top: 0;
    z-index: -1;
}

.svgTxt_refer svg {
    max-width: 983px;
    opacity: 0.5;
}

.svgTxt_refer path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}