/*메인슬라이드*/

#vis {height:700px}
#vis .swiper-slide {overflow: hidden}
.main_wrap {width: 1200px;margin: 0 auto}

#vis .wrap {position: relative;width: 1200px;margin: 0 auto}
#vis .sw_a {position: absolute}

/* Slide Control */
#vis .controlWrap {position: absolute;left: 50%; bottom:40px;width: 1200px;height: 40px;transform: translateX(-50%);z-index: 605;}
#vis .control {text-align: center;}
#vis .control img {cursor: pointer;}
#vis .control img.control-button-play {display: none;}
#vis .control img.control-button-play, #vis .control img.control-button-stop{margin: 0 5px;}

/*vis1*/
#vis .sw1 {background: url(../../images/visual/01/bg.jpg) no-repeat center;background-size:cover;height:700px}
#vis .sw1 .sw_a1 {top:117px;left:0;opacity: 0;animation:none}
#vis .sw1 .sw_a2 {top:207px;left:15px;opacity:0;animation:none}
#vis .sw1 .sw_a2_1 {top:207px;left:206px;opacity: 0;animation:none}
#vis .sw1 .sw_a2_2 { top:207px;left:386px;opacity: 0;animation:none}
#vis .sw1 .sw_a3 {top:153px;left:-70px;opacity: 0;animation:none}
#vis .sw1 .sw_a4 {top:88px;left:252px;opacity: 0;animation:none}
#vis .sw1 .sw_a5 {top:485px;left:267px;opacity: 0;animation:none}
#vis .sw1 .sw_a6 {top:57px;right:87px;opacity: 0;animation:none}
#vis .sw1 .sw_a7 {top:124px;right:130px;opacity: 0;animation:none}
#vis .sw1 .sw_a8 {top:192px;right:10px;opacity: 0;animation:none}
#vis .sw1 .sw_a9 {top:240px;right:0px;opacity: 0;animation:none}
#vis .sw1 .sw_a10 {top:540px;right:68px;opacity: 0;animation:none}

#vis .sw1.on .sw_a1 {animation: vis_ani1 .7s .3s 1 ease forwards;}
#vis .sw1.on .sw_a2 {animation:vis_ani2 .7s .5s 1 ease forwards;}
#vis .sw1.on .sw_a2_1 {animation: vis_ani2_1 .5s .8s 1 ease forwards;}
#vis .sw1.on .sw_a2_2 {animation: vis_ani2_2 .5s 1.1s 1 ease forwards;}
#vis .sw1.on .sw_a3 {animation: vis_ani3 2s 1.4s infinite ease-in-out;}
#vis .sw1.on .sw_a4 {animation: vis_ani4 2s 1.4s infinite ease-in-out;}
#vis .sw1.on .sw_a5 {animation: vis_ani5 2s 1.4s infinite ease-in-out;}
#vis .sw1.on .sw_a6 {animation: vis_ani1 .7s 1.6s 1 ease forwards;}
#vis .sw1.on .sw_a7 {animation: vis_ani6 .7s 2s 1 ease forwards;}
#vis .sw1.on .sw_a8 {animation: vis_ani7 .7s 2s 1 ease forwards;}
#vis .sw1.on .sw_a9 {animation: vis_ani8 .7s 2.3s 1 ease forwards;}
#vis .sw1.on .sw_a10 {animation: vis_ani9 .7s 2.7s 1 ease forwards;}

@keyframes vis_ani1 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis_ani2 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis_ani2_1 {
    0% {left:150px;opacity: 0}
    100% {left:206px;opacity: 1}
}
@keyframes vis_ani2_2 {
    0% {left:330px;opacity: 0}
    100% {left:386px;opacity: 1}
}
@keyframes vis_ani3 {
    0%,100% {top:165px;opacity:1}
    50% {top:153px;opacity: 1}
}
@keyframes vis_ani4 {
    0%,100% {top:80px;opacity: 1}
    50% {top:70px;opacity: 1}
}
@keyframes vis_ani5 {
    0%,100% {top:490px;opacity: 1}
    50% {top:480px;opacity: 1}
}
@keyframes vis_ani6 {
    0% {right:200px;opacity:0}
    100% {right:130px;opacity:1}
}
@keyframes vis_ani7 {
    0% {right:-60px;opacity:0}
    100% {right:10px;opacity:1}
}
@keyframes vis_ani8 {
    0% {width:0;opacity:0}
    100% {width:551px;opacity:1}
}
@keyframes vis_ani9 {
    0% {top:580px;opacity:0}
    100% {top:540px;opacity:1}
}


/*vis2*/
#vis .sw2 {background: url(../../images/visual/02/bg.jpg) no-repeat center;background-size:cover;height:700px}
#vis .sw2 .sw_a0 {top:88px;left:420px;opacity: 0;animation:none}
#vis .sw2 .sw_a1 {top:57px;left:355px;opacity: 0;animation:none;z-index:999}
#vis .sw2 .sw_a2 {top:0;left:0;opacity: 0;animation:none;z-index:99}
#vis .sw2 .sw_a3 {top:504px;left:0;opacity: 0;animation:none}
#vis .sw2 .sw_a4 {top:512px;right:0;opacity: 0;animation:none}
#vis .sw2 .sw_a5 {top:110px;right:30px;opacity: 0;animation:none}

#vis .sw2.on .sw_a0 {animation: vis2_ani1 .7s .4s 1 ease forwards;}
#vis .sw2.on .sw_a1 {animation: vis2_ani1 .7s .4s 1 ease forwards;}
#vis .sw2.on .sw_a2 {animation: vis2_ani2 .5s .8s 1 ease forwards;}
#vis .sw2.on .sw_a3 {animation: vis2_ani3 .5s 1.1s 1 ease forwards;}
#vis .sw2.on .sw_a4 {animation: vis2_ani4 .5s 1.4s 1 ease forwards;}
#vis .sw2.on .sw_a5 {animation: vis2_ani5 .5s 1.7s 1 ease forwards;}

@keyframes vis2_ani1 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis2_ani2 {
    0% {left:-50px;opacity: 0}
    100% {left:0;opacity: 1}
}
@keyframes vis2_ani3 {
    0% {top:550px;opacity: 0}
    100% {top:504px;opacity: 1}
}
@keyframes vis2_ani4 {
    0% {right:-50px;opacity: 0}
    100% {right:0;opacity: 1}
}
@keyframes vis2_ani5 {
    0% {top:50px;opacity: 0}
    100% {top:110px;opacity: 1}
}


/*vis3*/
#vis .sw3 {background: url(../../images/visual/03/bg.jpg) no-repeat center;background-size:cover;height:700px}
#vis .sw3 .sw_a1 {top:0px;left:-75px;opacity: 0;animation:none}
#vis .sw3 .sw_a2 {top:63px;left:482px;opacity: 0;animation:none}
#vis .sw3 .sw_a3 {top:105px;right:0;opacity: 0;animation:none}
#vis .sw3 .sw_a4 {top:198px;right:15px;opacity: 0;animation:none}
#vis .sw3 .sw_a5 {top:270px;right:15px;opacity: 0;animation:none}
#vis .sw3 .sw_a6 {top:307px;left:522px;opacity: 0;animation:none}
#vis .sw3 .sw_a6_1 {top:468px;left:500px;opacity: 0;animation:none}
#vis .sw3 .sw_a7 {top:392px;left:691px;opacity: 0;animation:none}
#vis .sw3 .sw_a7_1 {top:350px;left:690px;opacity: 0;animation:none}
#vis .sw3 .sw_a8 {top:307px;left:862px;opacity: 0;animation:none}
#vis .sw3 .sw_a8_1 {top:442px;left:862px;opacity: 0;animation:none}
#vis .sw3 .sw_a9 {top:392px;left:1032px;opacity: 0;animation:none}
#vis .sw3 .sw_a9_1 {top:288px;left:1032px;opacity: 0;animation:none}
#vis .sw3 .sw_a10 {top:575px;left:492px;opacity: 0;animation:none}

#vis .sw3.on .sw_a1 {animation: vis3_ani1 .7s .4s 1 ease forwards;}
#vis .sw3.on .sw_a2 {animation: vis3_ani2 .7s .4s 1 ease forwards;}
#vis .sw3.on .sw_a3 {animation: vis3_ani3 .7s .8s 1 ease forwards;}
#vis .sw3.on .sw_a4 {animation: vis3_ani4 .7s 1.2s 1 ease forwards;}
#vis .sw3.on .sw_a5 {animation: vis3_ani5 .7s 1.5s 1 ease forwards;}
#vis .sw3.on .sw_a6, #vis .sw3.on .sw_a6_1 {animation: vis3_ani5 .7s 1.8s 1 ease forwards;}
#vis .sw3.on .sw_a7, #vis .sw3.on .sw_a7_1 {animation: vis3_ani5 .7s 2.1s 1 ease forwards;}
#vis .sw3.on .sw_a8, #vis .sw3.on .sw_a8_1 {animation: vis3_ani5 .7s 2.4s 1 ease forwards;}
#vis .sw3.on .sw_a9, #vis .sw3.on .sw_a9_1 {animation: vis3_ani5 .7s 2.7s 1 ease forwards;}
#vis .sw3.on .sw_a10 {animation: vis3_ani6 .7s 3s 1 ease forwards;}

@keyframes vis3_ani1 {
    0% {left:-150px;opacity: 0}
    100% {left:-75px;opacity: 1}
}
@keyframes vis3_ani2 {
    0% {top:10px;opacity: 0}
    100% {top:63px;opacity: 1}
}
@keyframes vis3_ani3 {
    0% {top:155px;opacity: 0}
    100% {top:105px;opacity: 1}
}
@keyframes vis3_ani4 {
    0% {top:250px;opacity: 0}
    100% {top:198px;opacity: 1}
}
@keyframes vis3_ani5 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis3_ani6 {
    0% {top:620px;opacity: 0}
    100% {top:575px;opacity: 1}
}


/*카테고리 슬라이드*/
#cateArea {padding:80px 0;position:relative}
#cateArea .cate_bg1 {position:absolute;left:50px;bottom:-120px}
#cateArea .cate_bg2 {position:absolute;right:50px;top:70px}
#cateArea .cate_bg1.on {animation: vis4_ani1 1.5s .1s infinite ease-in-out;}
#cateArea .cate_bg2.on {animation: vis4_ani2 1.5s .1s infinite ease-in-out;}
@keyframes vis4_ani1 {
    0%,100% {bottom:-120px;opacity:1}
    50% {bottom:-100px;opacity: 1}
}
@keyframes vis4_ani2 {
    0%,100% {top:50px;opacity:1}
    50% {top:70px;opacity: 1}
}
#cateArea .smallTitle {text-align:center;font-size:28px;letter-spacing:-1px;margin-bottom: 12px}
#cateArea .bigTitle {text-align:center;font-size:40px;font-weight:500;letter-spacing:-1.5px;margin-bottom:50px}
#cateArea .cateSlide {height:610px}
#cateArea .cateSlide .cateSlideTitle { background-image: linear-gradient(90deg,#38aea1,#1980bb,#424fab,#613cb6,#5e47ec,#4d62e1);height:87px;}
#cateArea .cateSlide .cateSlideTitle img {padding: 12px 0 0 15px;}
#cateArea .cateSlide .cateSlideTitle p {display: inline-block;vertical-align: middle;color: #fff;font-size: 32px;font-weight: 600;letter-spacing: -1px;padding: 25px 0 0 15px;}
#cateArea .cateSlide .cateSlideTitle span {display: inline-block;color: #fff;opacity: 0.7;font-size: 17px;letter-spacing: -1px;vertical-align: bottom;padding-left: 10px;}
#cateArea .cateSlide #custom_pager {position:relative;float:left;width:250px;height: 525px;background-color: #1a1e33;padding:40px 0;}
#cateArea .cateSlide #custom_pager > span {display: inline-block;width: 1px;height:100%; background-color:rgba(255,255,255,0.8); position: absolute;top: 0;left:45px;}
#cateArea .cateSlide #custom_pager a {color:#fff;display:block;font-size:20px;background:url('../../images/pager_before.png') no-repeat;padding-left: 65px;height: 64px;line-height: 64px;background-position-x: 40px;background-position-y: center;}

#cateArea .cateSlide #custom_pager a.active, #cateArea .cateSlide #custom_pager a:hover {color:#ffeb00;background:url('../../images/pager_before_on.png') no-repeat;background-position-x: 40px;background-position-y: center;background-color: #090c1a;}
#cateArea .cateSlide .bx-wrapper {position:relative;height:525px;width:950px;float:left}
#cateArea .cateSlide .bx-wrapper .bx-viewport {height:525px !important}
#cateArea .cateSlide .bx-wrapper .bx-viewport li {width:950px !important}
#cateArea .cateSlide .bx-wrapper .bx-controls {position:absolute;top:-50px;right:30px;width: 130px;}
#cateArea .cateSlide .bx-prev {background:url('../../images/slidePrev.png');width:34px;height:34px;display: inline-block;font-size: 0;float: left;}
#cateArea .cateSlide .bx-next {background:url('../../images/slideNext.png');width:34px;height:34px;display: inline-block;font-size: 0;float:right}
#cateArea .cateSlide .bx-start {background:url('../../images/slidePlay.png');width:34px;height:34px;display: inline-block;font-size: 0;}
#cateArea .cateSlide .bx-stop {background:url('../../images/slideStop.png');width:34px;height:34px;display: inline-block;font-size: 0;vertical-align: top}

#cateArea .cateSlide .bx-wrapper .bx-controls .bx-controls-direction {height:34px}
#cateArea .cateSlide .bx-wrapper .bx-controls .bx-controls-auto {position: absolute;left: 50%;transform: translateX(-50%);top: 0;}

#cateArea .cateSlide .cateSlideImg {height:100%}
#cateArea .cateSlide .cateSlideImg li {height:100%;padding:50px 45px;box-sizing:border-box;letter-spacing:-1px}
#cateArea .cateSlide .cateSlideImg li span {display:block;font-size:15px;opacity:0.7;letter-spacing: 9.5px;}
#cateArea .cateSlide .cateSlideImg li h3 {font-size:43px;color:#333;font-weight:600;margin-bottom: 20px;}
#cateArea .cateSlide .cateSlideImg li p {font-size:35px;font-weight:300;line-height:1.3}
#cateArea .cateSlide .cateSlideImg li div {position:absolute;left:45px;bottom:50px}
#cateArea .cateSlide .cateSlideImg li div a {margin-right: 12px;display: inline-block;}

#cateArea .cateSlide .cateSlideImg .slide1 {background:url('../../images/slide1_bg.jpg') no-repeat center center;background-size: cover;}
#cateArea .cateSlide .cateSlideImg .slide2 {background:url('../../images/slide2_bg.jpg') no-repeat center center;background-size: cover;}
#cateArea .cateSlide .cateSlideImg .slide3 {background:url('../../images/slide3_bg.jpg') no-repeat center center;background-size: cover;}
#cateArea .cateSlide .cateSlideImg .slide4 {background:url('../../images/slide4_bg.jpg') no-repeat center center;background-size: cover;}
#cateArea .cateSlide .cateSlideImg .slide5 {background:url('../../images/slide5_bg.jpg') no-repeat center center;background-size: cover;}
#cateArea .cateSlide .cateSlideImg .slide6 {background:url('../../images/slide6_bg.jpg') no-repeat center center;background-size: cover;}
#cateArea .cateSlide .cateSlideImg .slide7 {background:url('../../images/slide7_bg.jpg') no-repeat center center;background-size: cover;}

/*특별함 슬라이드*/
#speArea {position:relative;background:url('../../images/special_bg.jpg') no-repeat center center;background-size: cover;padding:80px 0}
#speArea .bx-wrapper {padding-left:50px;box-sizing:border-box}
#speArea .bx-wrapper li a {position:absolute;right:70px;bottom:60px}
#speArea .bx-wrapper .bx-controls-direction {position:absolute;bottom:0;left:504px}
#speArea .bx-wrapper .bx-controls-direction .bx-prev {background:url('../../images/spe_prev.png') no-repeat center center;width:59px;height:50px;display: inline-block;font-size: 0;border-right: 1px solid #787878;}
#speArea .bx-wrapper .bx-controls-direction .bx-next {background:url('../../images/spe_next.png') no-repeat center center;width:59px;height:50px;display: inline-block;font-size: 0;}
#speArea .bx-wrapper .bx-pager {position:absolute;bottom:-30px;left:300px}
#speArea .bx-wrapper .bx-pager .bx-pager-item {display:inline-block}
#speArea .bx-wrapper .bx-pager .bx-pager-item a {display:block;width:45px;height:6px;background-color:#97c2ea;border-radius:20px;font-size:0;margin-right:5px}
#speArea .bx-wrapper .bx-pager .bx-pager-item a.active, #speArea .bx-wrapper .bx-pager .bx-pager-item a:hover {background-color:#004c6a}

#speArea .special_line1 {position:absolute;top:150px;left:0}
#speArea .special_line2 {position:absolute;top:130px;right:0}
#speArea .speAreaTitle {position:absolute;right:0;top:-22px}
#speArea .speAreaTitle p {font-size:40px;text-align:right;margin-bottom: 8px;}
#speArea .speAreaTitle span {font-size:12px;color:#eee;letter-spacing:27px;display:block;background-image: linear-gradient(90deg,#3bd3e1,#2b8ecf);text-align:right;width: 570px;height: 22px;line-height: 22px;font-weight: 300;}

/*커뮤니티*/
#community {padding:80px 0;background-color:#f3f3f3}
#community .smallTitle {text-align:center;font-size:28px;letter-spacing:-1px;margin-bottom: 12px}
#community .bigTitle {text-align:center;font-size:40px;font-weight:500;letter-spacing:-1.5px;margin-bottom:50px}

#community .cm_top {margin-bottom:145px;}
#community .cm_top > li {position:relative;float:left;width:590px;background-color:  rgba(255, 255, 255, 0);overflow: visible;margin-left:0}
#community .cm_top > li:first-child {margin-right:20px;}
#community .cm_top li .header {width:100%;height: 275px;text-align: center;color: #fff;background: url('../../images/cm_topBg1.jpg') center 100% no-repeat;padding-top: 25px;box-shadow: 5px 5px 5px -3px gray;z-index: 10;}
#community .cm_top li:last-child .header{background:url('../../images/cm_topBg2.jpg') center 100% no-repeat;}
#community .cm_top li .header h3 {font-size: 27px;color:#fff;letter-spacing:-1px}
#community .cm_top li .header h4 {font-size: 18px;font-weight:300;color:#fff;letter-spacing:-1px}
#community .cm_top li .cover {position: absolute;top: 120px;left: 30px;width: 530px;height: 248px;background-color:#fff;box-shadow: 5px 5px 5px -3px gray;z-index: 20;}

#community .cm_bottom > div {float:left}
#community .cm_bottom .cm_bottomLeft {position:relative;width:520px;height:580px;background:url('../../images/cm_bottomLeft.jpg') no-repeat center center;background-size:100%;margin-right:30px}
#community .cm_bottom .cm_bottomLeft p {text-align:center;color:#fff;font-size:30px;letter-spacing: -1px;padding-top: 62px;}
#community .cm_bottom .cm_bottomLeft .bx-wrapper {max-width: 100%;position: absolute;top: 195px;left: 50%;transform: translateX(-50%);width: 305px;}
#community .cm_bottom .cm_bottomLeft #custom_pager2 {position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);width: 305px;}
#community .cm_bottom .cm_bottomLeft #custom_pager2 a {display:inline-block;float:left;margin-right:14px}
#community .cm_bottom .cm_bottomLeft #custom_pager2 a:nth-child(4) {margin-right:0}

#community .cm_bottom .cm_bottomRight .cm_info {width:650px;height:280px;background:url('../../images/cm_info.jpg') no-repeat center center;background-size:100%;padding:30px 50px 0;box-sizing:border-box;margin-bottom:20px}
#community .cm_bottom .cm_bottomRight .cm_info p {color:#fff;font-size:27px;}
#community .cm_bottom .cm_bottomRight .cm_info p img {margin-right: 10px;vertical-align: top;padding-top:2px;}
#community .cm_bottom .cm_bottomRight .cm_info ul {padding:20px 0 10px}
#community .cm_bottom .cm_bottomRight .cm_info ul li {font-size:22px;color:#fff}
#community .cm_bottom .cm_bottomRight .cm_info ul li span {display:inline-block;width:110px;text-align: justify;text-align-last: justify;}
#community .cm_bottom .cm_bottomRight .cm_info ul li b {font-size:18px;font-weight:300}
#community .cm_bottom .cm_bottomRight .cm_info ul li.yellow {color:#f6ff00}
#community .cm_bottom .cm_bottomRight .cm_info > span {font-size:14px;color:#fff;display:inline-block;margin-right:20px;letter-spacing: -0.5px;}

#community .cm_bottom .cm_bottomRight .cm_column p {position:relative;background-color:#2ea2ff;height:60px;color:#fff;font-size:27px;padding: 16px 0 0 15px;}
#community .cm_bottom .cm_bottomRight .cm_column p img {margin-right:10px}
#community .cm_bottom .cm_bottomRight .cm_column p span {display:inline-block;font-size:16px;opacity:0.8;margin-left: 10px;letter-spacing: -0.5px;}
#community .cm_bottom .cm_bottomRight .cm_column p .column_more {position:absolute;right:0;top:50%;transform:translateY(-50%)}
#community .cm_bottom .cm_bottomRight .cm_column ul {height:220px;width:100%;padding:22px 30px;box-sizing:border-box;background-color:#fff}
#community .cm_bottom .cm_bottomRight .cm_column ul li {position:relative;line-height:36px;}
#community .cm_bottom .cm_bottomRight .cm_column ul li a {font-size:18px;color:#111}
#community .cm_bottom .cm_bottomRight .cm_column ul li .lt_cate {font-size:17px;color:#484cad;border-right:1px solid #cccccc;padding-right:15px;margin-right:15px}
#community .cm_bottom .cm_bottomRight .cm_column ul li .lt_date {position:absolute;right:0}

/*온라인상담신청*/
#online {background:url('../../images/online_bg.jpg') no-repeat center center;background-size:cover;padding:60px 0 40px;box-sizing:border-box;}
#online > div > div {float:left;width:50%}
#online .onlineLeft > h2 {font-size:44px;color:#fff;font-weight:bold}
#online .onlineLeft > p {color:#e0e0e0;font-size:20px;margin-bottom:38px}
#online .onlineLeft > span {color:#fff;font-size:17px;display:inline-block;padding:2px 8px;background-color:#3187b1;letter-spacing:-0.5px}
#online .onlineLeft .consultList {padding-top:30px;box-sizing:border-box}
#online .onlineLeft .consultList li {position:relative;line-height:22px;width:100% !important}
#online .onlineLeft .consultList li a {color:#e0e0e0;font-size:16px}
#online .onlineLeft .consultList li span {position:absolute;right:0}
#online .onlineLeft .bx-wrapper {height:142px;width:500px;border:3px solid #3187b1;padding:15px 25px;box-sizing:border-box;margin:0 !important}
#online .onlineLeft .bx-wrapper .bx-viewport {height:100% !important}

#online .onlineLeft .bx-wrapper.on {animation: vis5_ani1 2s .1s infinite ease-in-out;}
#online .onlineLeft > span.on {animation: vis5_ani2 2s .1s infinite ease-in-out;}
@keyframes vis5_ani1 {
    0% {opacity:1;border-color:#3187b1;}
    13% {border-color:#2c799f;opacity:1}
    27% {border-color:#1b678d;opacity:1}
    40% {border-color:#1b4b8d;opacity:1}
    53% {border-color:#431b8d;opacity:1}
    67% {border-color:#603ba3;opacity:1}
    80% {border-color:#7754b6;opacity:1}
    92% {border-color:#54b6b3;opacity:1}
    100% {border-color:#20c0ba;opacity:1}
}
@keyframes vis5_ani2 {
    0% {opacity:1;background-color:#3187b1;}
    13% {background-color:#2c799f;opacity:1}
    27% {background-color:#1b678d;opacity:1}
    40% {background-color:#1b4b8d;opacity:1}
    53% {background-color:#431b8d;opacity:1}
    67% {background-color:#603ba3;opacity:1}
    80% {background-color:#7754b6;opacity:1}
    92% {background-color:#54b6b3;opacity:1}
    100% {background-color:#20c0ba;opacity:1}
}