/*메인슬라이드*/

#vis {height:750px}
#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}
#vis.swiper-container .swiper-button-nextVis{
    width:50px;
    height:99px;
    background-image: url(../../images/visual/vis_next.png);
    background-size:100%;
    position: absolute;
    right:150px;
    top: 50%;
    transform: translateY(-50%);
    z-index:999;cursor:pointer
}
#vis.swiper-container .swiper-button-prevVis{
    width:50px;
    height:99px;
    background-image: url(../../images/visual/vis_prev.png);
    background-size:100%;
    position: absolute;
    left:150px;
    top: 50%;
    transform: translateY(-50%);
    z-index:999;cursor:pointer
}
#vis .swiper-paginationVis {position:absolute;bottom:15px;left:50%;transform:translateX(-50%);width:fit-content;z-index: 99;}
#vis .swiper-paginationVis .swiper-pagination-bullet {display:inline-block;width:15px;height:15px;border:1px solid #fff;background-color:rgba(0,0,0,0);opacity:1;font-size:0;border-radius:0}
#vis .swiper-paginationVis .swiper-pagination-bullet-active {background-color:#ff9182;border-color:#ff9182}

/*vis1*/
#vis .sw1 {background: url(../../images/visual/01/bg.jpg) no-repeat center;background-size:cover;height:750px}
#vis .sw1 .sw_a1 {top:0;left:0;opacity: 0;animation:none}
#vis .sw1 .sw_a2 {top:318px;left:0;opacity: 0;animation:none}
#vis .sw1 .sw_a3 {top:318px;left:0;opacity: 0;animation:none}
#vis .sw1 .sw_a4 {top:98px;right:52px;opacity: 0;animation:none}
#vis .sw1 .sw_a5 {top:322px;right:272px;display:inline-block;background-color:#fff;width:1px;height:15px;opacity: 0;animation:none}
#vis .sw1 .sw_a6 {top:346px;right:52px;opacity: 0;animation:none}
#vis .sw1 .sw_a7, #vis .sw1 .sw_a8, #vis .sw1 .sw_a9  {top:447px;right:0;opacity: 0;animation:none}

#vis .sw1.on .sw_a1 {animation: vis_ani1 .5s .3s 1 ease forwards;}
#vis .sw1.on .sw_a2 {animation: vis_ani2 .5s .7s 1 ease forwards;}
#vis .sw1.on .sw_a3 {animation: vis_ani3 1s 1.2s infinite ease}
#vis .sw1.on .sw_a4 {animation: vis_ani4 .5s 1.2s 1 ease forwards;}
#vis .sw1.on .sw_a5 {animation: vis_ani5 .7s 1.6s 1 ease forwards;}
#vis .sw1.on .sw_a6 {animation: vis_ani6 .5s 2s 1 ease forwards;}
#vis .sw1.on .sw_a7 {animation: vis_ani7 .5s 2.4s 1 ease forwards;}
#vis .sw1.on .sw_a8 {animation: vis_ani7 .5s 2.6s 1 ease forwards;}
#vis .sw1.on .sw_a9 {animation: vis_ani7 .5s 2.8s 1 ease forwards;}

@keyframes vis_ani1 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis_ani2 {
    0% {left:-50px;opacity: 0}
    100% {left:0;opacity: 1}
}
@keyframes vis_ani3 {
    0%,100% {opacity: 0}
    50% {opacity: 1}
}
@keyframes vis_ani4 {
    0% {top:50px;opacity: 0}
    100% {top:98px;opacity: 1}
}
@keyframes vis_ani5 {
    0% {height:0;opacity: 0}
    100% {height:15px;opacity: 1}
}
@keyframes vis_ani6 {
    0% {top:305px;opacity: 0}
    100% {top:346px;opacity: 1}
}
@keyframes vis_ani7 {
    0% {right:50px;opacity: 0}
    100% {right:0;opacity: 1}
}


/*vis2*/
#vis .sw2 {background: url(../../images/visual/02/bg.jpg) no-repeat center;background-size:cover;height:750px}
#vis .sw2 .sw_a1 {top:0;right:-66px;opacity: 0;animation:none}
#vis .sw2 .sw_a2 {top:80px;left:0;opacity: 0;animation:none}
#vis .sw2 .sw_a3 {top:55px;left:17px;display:inline-block;width:7px;height:7px;border-radius:10px;background-color:#d0ea95;opacity: 0;animation:none}
#vis .sw2 .sw_a4 {top:55px;left:80px;display:inline-block;width:7px;height:7px;border-radius:10px;background-color:#c2eaa3;opacity: 0;animation:none}
#vis .sw2 .sw_a5 {top:55px;left:138px;display:inline-block;width:7px;height:7px;border-radius:10px;background-color:#a8e7bd;opacity: 0;animation:none}
#vis .sw2 .sw_a6 {top:55px;left:201px;display:inline-block;width:7px;height:7px;border-radius:10px;background-color:#94e5d2;opacity: 0;animation:none}
#vis .sw2 .sw_a7 {top:209px;left:0;opacity: 0;animation:none}
#vis .sw2 .sw_a8 {top:209px;left:219px;opacity: 0;animation:none}
#vis .sw2 .sw_a9 {top:341px;left:219px;opacity: 0;animation:none}
#vis .sw2 .sw_a10 {top:555px;left:0;opacity: 0;animation:none}
#vis .sw2 .sw_a11 {top:555px;left:293px;opacity: 0;animation:none}
#vis .sw2 .sw_a12 {top:570px;left:538px;opacity: 0;animation:none}
#vis .sw2 .sw_star {top:130px;right:348px;opacity: 0;animation:none}
#vis .sw2 .sw_star2 {top:512px;right:38px;opacity: 0;animation:none}
#vis .sw2 .sw_star3 {top:678px;right:317px;opacity: 0;animation:none}

#vis .sw2.on .sw_a1 {animation: vis_ani2_1 .5s .3s 1 ease both, vis_ani2_1_1 1s .8s ease forwards}
#vis .sw2.on .sw_a2 {animation: vis_ani2_2 .5s 1.8s 1 ease forwards;}
#vis .sw2.on .sw_a3, #vis .sw2.on .sw_a4, #vis .sw2.on .sw_a5, #vis .sw2.on .sw_a6 {animation: vis_ani2_3 .5s 2.2s 1 ease forwards;}
#vis .sw2.on .sw_a7 {animation: vis_ani2_4 .5s 2.6s 1 ease forwards;}
#vis .sw2.on .sw_a8 {animation: vis_ani2_5 .5s 3s 1 ease forwards;}
#vis .sw2.on .sw_a9 {animation: vis_ani2_5 .5s 3.2s 1 ease forwards;}
#vis .sw2.on .sw_a10 {animation: vis_ani2_4 .5s 3.6s 1 ease forwards;}
#vis .sw2.on .sw_a11 {animation: vis_ani2_4 .5s 3.8s 1 ease forwards;}
#vis .sw2.on .sw_a12 {animation: vis_ani2_4 .5s 4s 1 ease forwards;}
#vis .sw2.on .sw_star {animation: vis_ani2_star 1.2s 1.9s infinite ease}
#vis .sw2.on .sw_star2 {animation: vis_ani2_star2 1.2s 2s infinite ease}
#vis .sw2.on .sw_star3 {animation: vis_ani2_star 1.3s 1.9s infinite ease}

@keyframes vis_ani2_1 {
    0% {right:375px;opacity: 0}
    100% {right:375px;opacity: 1}
}
@keyframes vis_ani2_1_1 {
    0% {right:375px;opacity: 1}
    100% {right:-66px;opacity: 1}
}
@keyframes vis_ani2_2 {
    0% {top:120px;opacity: 0}
    100% {top:80px;opacity: 1}
}
@keyframes vis_ani2_3 {
    0% {top:50px;opacity: 0}
	50% {top:62px;opacity: 1}
    100% {top:55px;opacity: 1}
}
@keyframes vis_ani2_4 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis_ani2_5 {
    0% {left:180px;opacity: 0}
    100% {left:219px;opacity: 1}
}
@keyframes vis_ani2_star {
    0%,100% {opacity: 0}
    50% {opacity: 1}
}
@keyframes vis_ani2_star2 {
    0%,100% {opacity:1}
    50% {opacity: 0}
}


/*커뮤니티 롤링*/
.cmRolling {height:75px;background-color:#ededed}
.cmRolling .cmRolling_notice {width:50%;float:left}
.cmRolling .cmRolling_column {width:50%;float:right}
.cmRolling .w1200 > div h5 {position:relative;display:inline-block;font-size:18px;font-weight:600;color:#222;vertical-align: top;padding: 25px 20px 25px 0;}
.cmRolling .w1200 > div h5:after {content:'';position:absolute;right:0;top:0;width:1px;height:20px;background-color:#828282;margin-top: 29px;}
.cmRolling .w1200 > div h5 img {margin:-2px 5px 0 0}
.cmRolling .w1200 > div .lat ul li a {font-size:17px;color:#222}
.cmRolling  .bx-viewport {height:28px !important}
.cmRolling .bx-wrapper {margin:3px auto 0}
.cmRolling .bx-controls {position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.cmRolling .bx-controls-direction a {display:block}
.cmRolling .bx-controls-direction a.bx-prev {background:url('../../images/rolling_arrow1.png') no-repeat center center;width:11px;height:16px;background-size:100%;font-size:0}
.cmRolling .bx-controls-direction a.bx-next {background:url('../../images/rolling_arrow2.png') no-repeat center center;width:11px;height:16px;background-size:100%;font-size:0}

/*배너 및 바로가기*/
.bnrArea {padding:80px 0}
.bnrArea .bnrSlide {float:left;width:460px;height:410px;margin-right:10px}
.bnrArea .bnrBtn {float:left;width: 730px;}
.bnrArea .bnrBtn > a {position:relative;width:360px;height:200px;float:left;overflow:hidden}
.bnrArea .bnrBtn > a img {position:absolute;top:0;left:0;transition:.5s}
.bnrArea .bnrBtn > a .text {position:absolute;top:30px;left:30px;line-height: 1;}
.bnrArea .bnrBtn > a .text h3 {font-size:24px;color:#222;font-weight:600;line-height: 1;}
.bnrArea .bnrBtn > a .text .line {display:inline-block;width:30px;height:2px;background-color:#333;margin:20px 0 15px}
.bnrArea .bnrBtn > a .text p {font-size:16px;color:#222;line-height:1.4;margin-bottom:13px}
.bnrArea .bnrBtn > a .text .more {display:inline-block;width:25px;height:25px;border-radius:50px;border:1px solid #333;color:#333;text-align:center;line-height: 23px;font-size: 18px;transition:.5s}
.bnrArea .bnrBtn .bnr1, .bnrArea .bnrBtn .bnr2 {margin-bottom:10px}
.bnrArea .bnrBtn .bnr1, .bnrArea .bnrBtn .bnr3 {margin-right:10px}
.bnrArea .bnrBtn .bnr2 .text h3, .bnrArea .bnrBtn .bnr2 .text p, .bnrArea .bnrBtn .bnr3 .text h3, .bnrArea .bnrBtn .bnr3 .text p {color:#fff}
.bnrArea .bnrBtn .bnr2 .text .line, .bnrArea .bnrBtn .bnr3 .text .line {background-color:#fff}
.bnrArea .bnrBtn .bnr2 .text .more, .bnrArea .bnrBtn .bnr3 .text .more {border-color:#fff;color:#fff}
.bnrArea .bnrBtn > a:hover img {transform:scale(1.1)}
.bnrArea .bnrBtn > a:hover .text .more {width:50px}

.bnrArea .bnrSlide .bx-wrapper {position:relative}
.bnrArea .bnrSlide .bx-wrapper .bx-controls {position:absolute;bottom:15px;right:20px}
.bnrArea .bnrSlide .bx-wrapper .bx-controls .bx-pager-item {display:inline-block}
.bnrArea .bnrSlide .bx-wrapper .bx-controls .bx-pager-item a {display:block;width:12px;height:12px;background-color:rgba(255,255,255,0.8);border-radius:20px;font-size:0;margin: 0 2px;}
.bnrArea .bnrSlide .bx-wrapper .bx-controls .bx-pager-item a.active {background-color:#ff9084}

/*카테고리 슬라이드*/
.cateArea {padding:80px 0;background-color:#f7f7f7;text-align:center}
.cateArea h3 {margin:0 auto 20px}
.cateArea h5 {font-size:17px;color:#333;text-align:center;margin-bottom:50px;line-height:1}

.cateArea .bx-wrapper {position:relative}
.cateArea .bx-viewport {height:430px !important}
.cateArea .bx-controls {position: absolute;top: -50px;right: 0; width: 130px;}
.cateArea .bx-controls .bx-prev {background:url('../../images/catePrev.png');width:40px;height:40px;display: inline-block;font-size: 0;float: left;}
.cateArea .bx-controls .bx-next {background:url('../../images/cateNext.png');width:40px;height:40px;display: inline-block;font-size: 0;float:right}
.cateArea .bx-controls .bx-start {position:absolute;left: 45px;background:url('../../images/cateStart.png');width:40px;height:40px;display: inline-block;font-size: 0;}
.cateArea .bx-controls .bx-stop {position:absolute;left: 45px;background:url('../../images/cateStop.png');width:40px;height:40px;display: inline-block;font-size: 0;vertical-align: top}

.cateArea .cateWrap #cate_pager {position:relative;width:100%;height:50px}
.cateArea .cateWrap #cate_pager a {color:#333;float: left;font-size:17px;background:url('../../images/catePager.png') no-repeat;background-position:top center;width:14.28%;padding-top:20px}
.cateArea .cateWrap #cate_pager a.active, .cateArea .cateWrap #cate_pager a:hover {color:#ff9182;background:url('../../images/catePager_on.png') no-repeat;background-position:top center;}

.cateArea .cateSlide li {width:580px;box-shadow:8px 5px 15px rgba(0,0,0,0.1)}
.cateArea .cateSlide li > img {float:left;width:50%}
.cateArea .cateSlide li > div.text {float:left;width:50%;background-color:#fff;padding:40px 35px 0;text-align:left}
.cateArea .cateSlide li .text h3 {font-size:20px;color:#222;font-weight:600;line-height:1;margin-bottom:12px}
.cateArea .cateSlide li .text p {font-size:16px;color:#555;font-weight:400;line-height:}
.cateArea .cateSlide li .text .line {display:inline-block;margin:20px 0;width:25px;height:2px;background-color:#d0d0d0}
.cateArea .cateSlide li .text .img01 {display:block;margin-bottom:10px}
.cateArea .cateSlide li .text .img02 {display:block;margin-bottom:20px}
.cateArea .cateSlide li .text .btnArea {width:100%}
.cateArea .cateSlide li .text .btnArea > a {float:left;width:50%;text-align:center;height:33px;line-height:33px}
.cateArea .cateSlide li .text .btnArea > a i {margin-left:5px}
.cateArea .cateSlide li .text .btnArea > a:first-child {background-color:#ff9182;color:#fff}
.cateArea .cateSlide li .text .btnArea > a:first-child i {color:#fff}
.cateArea .cateSlide li .text .btnArea > a:last-child {color:#ff9182;border:1px solid #ff9182;box-sizing:border-box}
.cateArea .cateSlide li .text .btnArea > a:last-child i {color:#ff9182}



/*왜?*/
.whyArea {background:#fff url('../../images/whyBg.png') no-repeat center center;background-size:cover;height:/*450px*/520px;padding-top:80px;box-sizing: border-box}
.whyArea .whyLeft {/*padding:80px 0 50px;*/float:left;width:/*400px*/368px;}
.whyArea .whyLeft h2 {font-size:64px;color:#fff;font-weight:500;line-height:1;margin-bottom:25px}
.whyArea .whyLeft h2 span {font-size:70px;color:rgba(255,255,255,0.05);font-weight:bold;display: inline-block;margin-left: 15px;}
.whyArea .whyLeft .line {display:inline-block;width:30px;height:2px;background-color:#fff;margin:30px 0 25px}
.whyArea .whyLeft h4 {font-size:34px;color:#fff;font-weight:300;line-height:1;letter-spacing: -0.5px;}
.whyArea .whyLeft p {font-size:20px;color:#fff;font-weight:300;line-height:1.4;margin-bottom:40px;letter-spacing: -0.5px;}
.whyArea .whyLeft p span {color:#fffe9d}
.whyArea .whyLeft a {position:relative;display: inline-block;width:260px;height:45px;line-height:45px;border-radius:500px;background-color:#fff;color:#3a4162;padding-left:20px;font-size:18px}
.whyArea .whyLeft a img {position:absolute;right:25px;top:16px;transition:.5s}
.whyArea .whyLeft a:hover img {right:12px}

.whyArea .whyRight {float:left;/*padding-top:80px;*/width:/*800px*/832px}
.whyArea .whyRight .icoArea {background:rgba(255,255,255,0.9);border-radius:0 100px 0 0;padding:45px 50px 50px 50px;height:386px}
.whyArea .whyRight .icoArea > div {float:left;width:33.333%;border-right:1px solid #dedede;text-align:center}
.whyArea .whyRight .icoArea > div:nth-child(1), .whyArea .whyRight .icoArea > div:nth-child(2), .whyArea .whyRight .icoArea > div:nth-child(3) {margin-bottom:25px}
.whyArea .whyRight .icoArea > div:nth-child(3n) {border-right:0}
.whyArea .whyRight .icoArea > div img {position:relative;display:block;margin:0 auto 15px;transition:.5s}
.whyArea .whyRight .icoArea > div:hover img {transform:scale(1.2)}
.whyArea .whyRight .icoArea > div p {font-size:18px;color:#333;font-weight:400;line-height: 1.3;letter-spacing: -0.5px;}



/*인포메이션*/
.infoArea {padding:80px 0}
.infoArea h3 {margin:0 auto 20px}
.infoArea h5 {font-size:17px;color:#333;text-align:center;margin-bottom:50px;line-height:1}
.infoArea .infoWrap > div {float:left}
.infoArea .infoWrap .infoLeft {width:400px;margin-right:50px;}
.infoArea .infoWrap .infoLeft > img {margin-bottom:30px;}
.infoArea .infoWrap .infoLeft .infoTime {width:100%;border-top:1px solid #ccc;padding-top:30px;margin-bottom:28px}
.infoArea .infoWrap .infoLeft .infoTime img {float:left}
.infoArea .infoWrap .infoLeft .infoTime ul {float:left}
.infoArea .infoWrap .infoLeft .infoTime ul li {font-size:20px;color:#333}
.infoArea .infoWrap .infoLeft .infoTime ul li span {display:inline-block;width:90px;}
.infoArea .infoWrap .infoLeft .infoTime ul li.noti {color:#787878;font-size:14px}
.infoArea .infoWrap .infoLeft .infoTime ul li:nth-child(5) {margin-top:15px}
.infoArea .infoWrap .infoLeft .infoSns > a {float:left;width:33.333%;height:114px;text-align:center}
.infoArea .infoWrap .infoLeft .infoSns > a img {margin:12px auto 10px}
.infoArea .infoWrap .infoLeft .infoSns > a p {font-size:12px}
.infoArea .infoWrap .infoLeft .infoSns > a h3 {font-size:18px}
.infoArea .infoWrap .infoLeft .infoSns > a:nth-child(1) {background-color:#ffe600;}
.infoArea .infoWrap .infoLeft .infoSns > a:nth-child(1) p, .infoArea .infoWrap .infoLeft .infoSns > a:nth-child(1) h3 {color:#392020}
.infoArea .infoWrap .infoLeft .infoSns > a:nth-child(2) {background-color:#f3f3f3}
.infoArea .infoWrap .infoLeft .infoSns > a:nth-child(2) p, .infoArea .infoWrap .infoLeft .infoSns > a:nth-child(2) h3 {color:#222}
.infoArea .infoWrap .infoLeft .infoSns > a:nth-child(3) {background-color:#3cab37;}
.infoArea .infoWrap .infoLeft .infoSns > a:nth-child(3) p, .infoArea .infoWrap .infoLeft .infoSns > a:nth-child(3) h3 {color:#fff}

.infoArea .infoWrap .infoRight .mapWrap {position:relative}
.infoArea .infoWrap .infoRight .mapWrap .wrap_controllers {display:none}
.infoArea .infoWrap .infoRight .mapWrap .mapNaver {position:absolute;right:20px;top:20px;    z-index: 9;}
.infoArea .infoWrap .infoRight .mapWrap .mapKakao {position:absolute;right:20px;top:78px;    z-index: 9;}
.infoArea .infoWrap .infoRight .mapInfo {position:relative;background-color:#f7f7f7;height:114px;line-height:114px}
.infoArea .infoWrap .infoRight .mapInfo img {position:absolute;top:50%;left:30px;transform:translateY(-50%)}
.infoArea .infoWrap .infoRight .mapInfo h3 {padding-left:90px;font-size:22px;color:#222;    line-height: 1;padding-top: 30px;margin-bottom: 12px;}
.infoArea .infoWrap .infoRight .mapInfo p {padding-left:90px;font-size:18px;color:#555}