@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600);

html,body {height:100%;}
body{overflow-y:hidden;overflow-x:auto}
header{position:fixed; left:0; top:0;  z-index:3;}

.main#wrap {min-width:1200px; height:100%; padding-top:0; overflow:hidden;}
@media screen and (max-device-width: 768px), (max-height: 768px) {
    .main#wrap {height:auto;}
}
.main .content {position:static;}
.main .quick {display:none;}
.main .go_top {display:none;}
.main #header .menu_all span,
.main #header .menu_all:before,
.main #header .menu_all:after {border-color:#fff;}
.main #header .nav:before {display:none;}
.main #header .nav {background:none;}
.main #header .menu_all {background:none;}
.main #header .nav > .inner > li > a {color:#fff; border-color:transparent;}
.main #header .nav_top a {color:#fff;}
.main #header.dark .nav_top a {color:#666;}
.main #header.dark .menu_all span,
.main #header.dark .menu_all:before,
.main #header.dark .menu_all:after {border-color:#000;}
.main #header.dark .nav > .inner > li > a {color:#222;}

.main #header .nav_top.active a {color:#666;}
.main #header .menu_all.active span,
.main #header .menu_all.active:before,
.main #header .menu_all.active:after {border-color:#000;}
.main #header .nav.active:before {display:block;}
.main #header .nav.active {background:#fff;}
.main #header .nav.active > .inner > li > a {color:#222;}
.main #header .nav.active > .inner > li > a:hover,
.main #header .nav.active > .inner > li > a:focus {border-color:#0c4ca3; color:#0c4ca3;}

.main #container {min-width:1200px;}

.sec1 {position:relative;height:100%;}
.sec1 .title {font-weight:700; line-height:1.3; text-transform:uppercase; transform:translateY(-50%);}
.sec1 .title p {font-size:20px; color:#ff1901; margin-bottom:35px;}
.sec1 .title h2 {font-size:64px; color:#0c4ca3;}
.sec1 .title a {display:inline-block; margin-top:70px; height:50px; line-height:50px; padding:0 35px; border:1px solid #fff; text-align:center; font-size:14px; color:#fff;}
.sec1 .title2 p,
.sec1 .title2 h2 {color:#fff;}
@media screen and (max-height: 768px) {
    .sec1 .swiper-wrapper,
    .sec1 .swiper-slide {height:auto;}
    .sec1 .title h2 {font-size:55px;}
    .sec1 .title a {margin-top:30px;}
}
.sec1 .swiper-container {height:100%;}
.sec1 .swiper-container .swiper-button-prev {left:50%; margin-left:-650px;}
.sec1 .swiper-container .swiper-button-next {left:50%; margin-left:600px;}
.sec1 .swiper-slide {background-position:50% 0; background-repeat:no-repeat; background-size:cover;}


.view_mycontract {position:absolute; bottom:20%; left:50%; z-index:10; margin-left:-500px; width:480px; height:80px; line-height:80px; padding-left:110px; background:rgba(0,0,0,.8); color:#fff;}
.view_mycontract button {display:block; position:absolute; top:0; left:0; width:80px; height:100%; background:#0c4ca3 url(/common/images/main/arrow02.png) no-repeat 50% 50%; text-indent:-999px; overflow:hidden;}
.view_mycontract a {margin-left:20px; color:#4d8ffb; text-decoration:underline;}
.view_mycontract a:hover {text-decoration:underline;}
.view_mycontract a:after {display:inline-block; content:''; width:5px; height:9px; background:url(/common/images/main/arrow03.png) no-repeat 0 50%;  margin-left:4px;}

.indi_wrap{position:absolute; right:50px; top:50%; z-index:3; transform: translateY(-50%)}
@media (max-device-width: 1365px) {
    .indi_wrap {display:none !important;}
}
@media (max-height: 768px) {
    .indi_wrap {display:none !important;}
}
.indi li{text-align:right; position:relative;}
.indi li a{content:''; position:absolute; top:50%; width:7px; height:7px; background:#fff; border-radius:7px; transition:height .3s; transform:translateY(-50%); text-indent:-9999px; overflow:hidden; white-space:nowrap; color:transparent;}
.indi li span{display:inline-block; visibility:hidden; font-size:15px; color:#fff; padding:7px 16px 4px;}
.indi li.on a {height:40px; transition:height .5s;}
.indi li.on span {visibility:visible;}
.indi_wrap.dark li span{color:#000;}
.indi_wrap.dark li a {background:#000;}

.scroll_down{position: absolute; bottom:47px; left:50px; z-index:3;}
@media (max-height: 768px) {
    .scroll_down {display:none;}
}
.mobile .scroll_down {display:none;}
.search_ico{position:absolute; bottom:47px; right:50px; z-index:200;}
.fullpage_wrap .search_ico {display:none;}
.mobile .fullpage_wrap .search_ico {display:block;}
.mobile .content > .search_ico {display:none;}
@media (max-height: 768px) {
    .fullpage_wrap .search_ico {display:block;}
    .content > .search_ico {display:none;}
}


.fullpage_wrap{ perspective: 2000px; }
.scroll_cont.on{transform: rotateX(0deg); transform-origin: center center;}
.scroll_cont {height:100%; overflow:hidden;}
@media (max-width: 1200px) {
    .scroll_cont {height:auto;}
}

.sec2{display:flex; align-items:center; box-sizing:border-box; height:100%;}
.sec2 > .inner {position:relative; width:1200px; margin:0 auto; padding:0 50px;}
.sec2 > .inner:after {content:''; position:absolute; top:46px; left:100%; z-index:10; margin-left:82px; background:#f2f3f6; opacity:.5; width:100%; height:calc(100% + 80px);}
.mobile .sec2 > .inner:after {display:none;}
@media screen and (max-device-width: 768px) {
    .sec2 > .inner {padding:50px;}
    .sec2 > .inner:after {display:none;}
}
.sec2 h2 {position:relative; top:50px; font-size:46px; font-weight:400; line-height:1; opacity:0;}
.swiper-container2{position:relative; z-index:10; height:443px; padding-top:50px; box-sizing:content-box;}
@media (max-width: 1200px) {
    .swiper-container2 {padding-top:35px; padding-bottom:100px;}
}
.swiper-container2 .swiper-slide{width:auto; top:50px; opacity:0;}
.swiper-container2 .swiper-slide > a {display:block; position:relative;}
.swiper-container2 .swiper-slide:last-child {padding-right:0;}
.complex_slide_image {position:relative; box-shadow:0 30px 45px -25px rgba(0,0,0,.5);}
.complex_slide_image img {max-width:468px; max-height:440px;}
.complex_slide_image .card_label {position:absolute; top:20px; right:-7px;}
.complex_slide_description {position:absolute; bottom:-90px; left:0; width:100%;}
.complex_slide_description strong {display:inline-block; max-width:calc(100% - 40px); font-size:24px; color:#000;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .complex_slide_description strong {letter-spacing:-0.5px;}
}
.complex_slide_description .icon_star {display:inline-block; margin-left:10px; vertical-align:top; top:8px;}
.complex_slide_description p {font-size:16px; color:#666;}


.sec3{height:100%; background:url('/common/images/main/sec3_bg.png') no-repeat; background-size:cover; position:relative; z-index:2;}
.sec3 *{position:relative; z-index:2;}
.sec3 .sec3_header{position:absolute; top:0; left:0; }
.sec3 h2{text-align:center; top:50px; opacity:0;}


.sec3_txt{position:absolute; top:309px; left:390px; width:700px; height:400px;}
.sec3_txt li{background:url('/common/images/main/sec3_txt.png') no-repeat; width:700px; height:140px; top:50px; opacity:0;}
.sec3_txt li:nth-child(2){background-position:0 -140px;}
.sec3_txt li:nth-child(3){background-position:0 -280px;}
.play_wrap{position:absolute; bottom:30px; left:50px; opacity:1; color:#fff; padding-left:90px;}
.play_wrap .play{position:absolute; top:7px; left:0; width:60px; height:60px; z-index:3; background:url(/common/images/main/play.png) no-repeat; text-indent:-9999px; overflow:hidden;}
.play_wrap p {font-size:18px;}
.play_wrap strong {display:block; font-size:22px;}
.video_wrap{position:absolute; top:0; left:0; width:100%; height:100%; display:none; z-index:5;}
.video_wrap video{display:none; width:100%; height:100%;}
.video_wrap .close{position:absolute; top:50px; right:50px; width:34px; height:34px; background:url('/common/images/main/close.png') no-repeat; z-index:5;}
.play_bar{display:none !important; position:absolute; bottom:0; left:0; width:0; height:3px; background:#ff1901; }
.play_bg{position:absolute; bottom:0; left:0; width:100%; height:3px; background:#000;}

.sec3 > .inner {display:flex; align-items:center; min-width:1200px; height:100%; padding:0 50px;}
@media screen and (max-device-width: 768px) {
    .sec3 {height:100%;}
    .sec3 > .inner {padding-top:50px; padding-bottom:200px;}
}
.sec3 h2 {margin-bottom:115px; color:#fff; font-size:46px; line-height:1; font-weight:400;}
.main_news {margin:0 auto;}
.main_news ul {display:flex; text-align:center;}
.main_news li {position:relative; top:50px; display:inline-block; margin:0 30px; opacity:0;}
.main_news li a {display:block; width:320px; color:#fff; text-align:left;}
.main_news li a em {display:block; margin-bottom:20px; font-size:18px; font-weight:700; color:#86b5f2; text-transform:uppercase; font-family:'Titillium Web';}
.main_news li a strong {display:block; margin-bottom:40px; font-size:36px; font-weight:400; line-height:1.4; word-break:keep-all; word-wrap:break-word;}
.main_news li a span {display:block; font-size:14px;}

.mask{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.4;}


.header_hover a:hover:before{content:'';position:absolute; top:76px; left:0; width:100%; height:2px; background:#0c4ca3;}
.sub_link1{position:absolute; top: 20px; left: 660px; width: 100px; height: 210px; background:transparent;}
.sub_link2{position:absolute; top: 20px; left: 790px; width: 100px; height: 210px; background:transparent;}
.sub_link3{position:absolute; top: 20px; left: 915px; width: 100px; height: 210px; background:transparent;}
.sub_link4{position:absolute; top: 20px; left: 1035px; width: 100px; height: 210px; background:transparent;}
.sub_link5{position:absolute; top: 20px; left: 1165px; width: 100px; height: 260px; background:transparent;}
.header_img{position:absolute; top:0; left:0; z-index:2;}
header{height:98px; width:100%;}
.sec3_header_img, .sec4_header_img{position:absolute; top:0; left:0;}
.header_hover{position:fixed; top:0; left:0; display:none; z-index:5;}
.sec3 .sec3_header, .sec4 .sec4_header{z-index:5; height:98px; width:100%;}
header:hover .header_hover{display:block; }
.sec3_header:hover .header_hover ,.sec4_header:hover .header_hover{display:block; }
.swiper-container2 .swiper-slide{background:#f2f3f6;/*padding-right:230px;*/}
.bg_f2{background:#f2f3f6;}
.sec4{height:100%; background:url('/common/images/main/sec4_bg0.jpg') no-repeat; background-size:cover; transition:.5s; position:relative;}

.sec4 > .inner {display:flex; align-items:center; justify-content:center; width:1200px; height:100%; margin:0 auto; padding:0 50px;}
@media screen and (max-device-width: 768px) {
    .sec4 > .inner {height:auto; padding:50px;}
}
.sec4 h2 {position:relative;margin-bottom:128px; color:#fff; font-size:46px; line-height:1; font-weight:400; text-align:center; opacity:0;}
.main_service {position:relative; width:1200px; margin:0 auto;}
.main_service ul:after {content:''; display:table; clear:both; border:1px solid rgba(255,255,255,.2);}
.main_service li {float:left; position:relative; top:40px; width:25%; height:300px; opacity:0; border:1px solid rgba(255,255,255,.2); border-left:none;}
.main_service li:first-child {border-left:1px solid rgba(255,255,255,.2);}
.main_service li a {display:block; overflow:hidden; position:absolute; top:50%; left:50%; z-index:0; transform:translate(-50%, -50%); width:100%; height:100%; padding-top:75px; color:#fff; text-align:center; transition:.2s; background:rgba(0,0,0,.4);}
.main_service li a strong {display:flex; align-items:center; justify-content:center; height:80px; margin-bottom:20px; font-size:36px; font-weight:400; line-height:1.3;}
.main_service li a p {margin-bottom:50px; font-size:16px; line-height:1.5;}
.main_service li a span {display:none; padding-bottom:2px; border-bottom:1px solid rgba(255,255,255,.6); font-size:14px;}
.main_service li a:hover {z-index:10; height:400px; padding-top:90px; background:rgba(44,47,64,.9); box-shadow:0 7px 15px 0 rgba(0,0,0,.4);}
.main_service li a:hover span {display:inline-block;}

.pos_rel{position:relative; z-index:2;}
.content .swiper-container .swiper-slide img{width:100%;  }
.content .swiper-container .swiper-slide div{position:absolute; top:45%; left:50%; margin-left:-500px;}
@media screen and (max-height: 768px) {
    .content .swiper-container .swiper-slide div {top:43%;}
}
.content .swiper-container .swiper-slide div img{width:auto; opacity:0;}

.content .swiper-container .swiper-button-next{position:absolute; width:50px; height:50px; top:50%; left:50%; background:url('/common/images/main/arrow.png') right 0 no-repeat;}
.content .swiper-container .swiper-button-prev{position:absolute; width:50px; height:50px; top:50%; left:50%; background:url('/common/images/main/arrow.png')  no-repeat;}
.content .swiper-container2 .swiper-button-prev,
.swiper-container2 .swiper-button-next {position:absolute; width: 40px; height: 40px; top: -22px; left: 50%; opacity:0.4; border:1px solid #000; cursor:pointer;}
.swiper-container2 .swiper-button-prev {margin-left:471px; background:url(/common/images/main/arrow_prev.png) no-repeat 50% 50%;}
.swiper-container2 .swiper-button-next {margin-left:510px; background:url(/common/images/main/arrow_next.png) no-repeat 50% 50%; border-left-color:transparent;}
.swiper-container2 .swiper-button-prev:hover,
.swiper-container2 .swiper-button-next:hover {opacity:1; z-index:100; border-color:#000;}

.auto_controls{position:absolute; bottom:5%; left:50%; width:16px;height:18px;z-index:5; margin-left:-8px;}
.auto_controls:before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-left:6px solid #fff;border-right:6px solid #fff;box-sizing:border-box}
.auto_controls.play:before {width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:11px solid #fff;border-right:0}

.pager{position:absolute; bottom:10%; left:50%; width:auto; margin-left:-15px; z-index:5; color:#fff; font-size:14px; font-style: normal; display:inline-block; padding-bottom:5px; border-bottom:2px solid #fff;}
.pager em{font-style: normal;}
.test1{position:absolute; top: 140px; left: 51px; z-index:3; width:500px; height:280px; overflow:hidden;}
.test2{position:absolute; top: 140px; left: 1px; z-index:4;}


.swiper-slide {display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}

.mycontract {position:absolute; top:0; left:0; transform:translateX(-800px); z-index:100; height:100%; display:flex; align-items:center; color:#fff; background-color:#000; background-repeat:no-repeat; background-position:50% 50%; transition:transform .5s;}
.mycontract.active {transform:translateX(0);}
.mycontract > .inner {width:620px; height:100%; font-size:16px;}
.mycontract p {position:absolute; top:50%; left:140px; z-index:10; margin-top:-220px; line-height:1;}
.mycontract .swiper-container {height:100%;}
.mycontract .swiper-container .swiper-wrapper {height:100%;}
.mycontract .swiper-container .swiper-slide {height:100%; background-size:cover;}
.mycontract .swiper-slide:before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8);}
.mycontract .swiper-container .swiper-slide .mycontract_description {position:relative; width:100%; margin-left:0; padding:0 140px; z-index:10;}
.mycontract .swiper-container-horizontal > .swiper-pagination-bullets {top:50%; bottom:auto; margin-top:220px;}
.mycontract .swiper-pagination-bullet {background:#fff;}
.mycontract .swiper-pagination-bullet-active {background:#007aff;}
.mycontract_description {display:block;}
.mycontract h3 {margin-bottom:-15px; font-size:32px; font-weight:400;}
.mycontract ul {padding:25px 0; border-bottom:1px solid rgba(255,255,255,.1);}
.mycontract li {position:relative; padding-left:90px; line-height:1.9;}
.mycontract li strong {display:inline-block; position:absolute; top:3px; left:0; width:80px; font-size:14px; color:#999;}
.mycontract li a {color:#6da4ff; font-size:14px; text-decoration:underline;}
.mycontract a:after {display:inline-block; content:''; width:5px; height:9px; background:url(/common/images/main/arrow03.png) no-repeat 0 50%;  margin-left:4px;}
.mycontract .link_mycontract {display:inline-block; position:absolute; top:50%; left:140px; z-index:10; margin-top:280px; color:#4d8ffb; font-size:20px; font-weight:700;}
.mycontract .link_mycontract:after {vertical-align:1px; margin-left:6px;}
.mycontract button {position:absolute; bottom:20%; z-index:10; right:-40px; display:block; width:80px; height:80px; background:#0c4ca3 url(/common/images/main/arrow02.png) no-repeat 50% 50%; text-indent:-999px; overflow:hidden; transform:rotate(180deg);}

.fullpage_wrap {position:absolute;left:0;top:0;width:100%;height:100%;}
.fullpage_wrap .scroll_cont {position:absolute;left:0;top:0;width:100%;height:100%;transform:translateY(100%);}
.fullpage_wrap .scroll_cont.on {transform:translateY(0)}

.fullpage_wrap .scroll_cont:after {content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0);transition:1s background-color;z-index:1;visibility:hidden;z-index:10;}
/*.fullpage_wrap .scroll_cont.dim:after {visibility:visible;background-color:rgba(0,0,0,1)}*/

.main #container {position:relative;height:100%;overflow:hidden;transform:translateZ(0px)}
.main #header {position:absolute;opacity:1}
.main {overflow-y:hidden;}

@media screen and (max-device-width:768px), (max-height: 768px) {
    body {overflow:auto}
    #header {min-width:1200px;}
    #container {height:auto;}
    .fullpage_wrap {position:relative;height:auto}
    .fullpage_wrap .scroll_cont {position:relative;transform:none;height:768px;}
    .fullpage_wrap .scroll_cont.bg_f2 {height:768px;}

    .sec1 .swiper-wrapper {height:100%}
    .sec2 h2 {opacity:1;top:0;}

    .swiper-container2 .swiper-slide {opacity:1;top:0}
    .main_news li {opacity:1;top:0;}

    .sec3 h2 {top:0;opacity:1}
    .sec4 h2 {opacity:1}
    .main_service li {opacity:1;top:0}
}

.mobile,
.mobile body {height:auto;}
.mobile body {overflow:auto}
.mobile #header {min-width:1200px;}
.mobile #container {height:auto;}
.mobile .fullpage_wrap {position:relative;height:auto}
.mobile .fullpage_wrap .scroll_cont {position:relative;transform:none;height:768px;}
.mobile .fullpage_wrap .scroll_cont.bg_f2 {height:768px;}

.mobile .sec1 .swiper-wrapper {height:100%}
.mobile .sec2 h2 {opacity:1;top:0;}

.mobile .swiper-container2 .swiper-slide {opacity:1;top:0}
.mobile .main_news li {opacity:1;top:0;}

.mobile .sec3 h2 {top:0;opacity:1}
.mobile .sec4 h2 {opacity:1}
.mobile .main_service li {opacity:1;top:0}




body .top-banner-wrap { width: 100%; min-width:1200px; opacity: 0; position: fixed; z-index: 100; top: 0; left: 0; transform: translateY(-100%); }

body .top-banner-wrap .swiper-container { width: 100%; margin: 0 auto; }

body .top-banner-wrap .swiper-slide { display: block; height: 130px; background-position: center 0; align-items:start;}

body .top-banner-wrap .swiper-slide .link-wrap { width: 700px; margin: 80px auto 0 auto; line-height:1;}

body .top-banner-wrap .swiper-slide .link-wrap a { font-size: 16px; color: #fff; }

body .top-banner-wrap .swiper-slide .link-wrap .line { width: 1px; height: 16px; background-color: rgba(255, 255, 255, 0.3); display: inline-block; margin: 0 4px; vertical-align: middle; }

body .top-banner-wrap .top-banner { height: 130px; margin: -130px 50px 0; position: relative; color: #fff; }

body .top-banner-wrap .top-banner strong { font-size: 22px; font-weight: 600; }

body .top-banner-wrap .top-banner p { font-size: 14px; line-height: 20px; margin-top: 10px; }

body .top-banner-wrap .top-banner .swiper-pagination { position: relative; }

body .top-banner-wrap .top-banner .swiper-pagination-bullet { width: 10px; height: 10px; margin-right: 10px; }

body .top-banner-wrap .top-banner .swiper-pagination-bullet:last-child { margin-right: 20px; }


body .top-banner-wrap .top-banner .swiper-pagination-bullet-active { background-color: #000; }

body .top-banner-wrap .top-banner .play-wrap { position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 7; }

body .top-banner-wrap .top-banner .play-wrap > * { display: inline-block; }

body .top-banner-wrap .top-banner .play-wrap button { width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; position: relative; }

body .top-banner-wrap .top-banner .play-wrap button:after { content: ''; display: block; width: 10px; height: 10px; margin-left: 9px; background: url("/common/images/common/spr-common.png") -200px -165px no-repeat; }

body .top-banner-wrap .top-banner .play-wrap button.pause:after { content: ''; display: block; width: 10px; height: 10px; background-position: -200px -174px; }

body .top-banner-wrap .top-banner .cls-wrap { position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: 7; }
body .top-banner-wrap .top-banner .cls-wrap .checkbox > span {color:#fff;}

body .top-banner-wrap .top-banner .cls-wrap .checkbox > span {padding-left:34px;}
body .top-banner-wrap .top-banner .cls-wrap .checkbox > span:before {width:24px; height:24px; background:url(/common/images/common/spr-input.png) no-repeat 0 -24px;}
body .top-banner-wrap .top-banner .cls-wrap .checkbox > input[type='checkbox']:checked + span:before {background-position: -24px -24px;}
body .top-banner-wrap .top-banner .banner-cls { width: 20px; height: 20px; background: url("/common/images/common/spr-common.png") -242px -52px no-repeat; margin-left: 40px; text-indent:-9999px; overflow:hidden;}


/* 레이어팝업 */
.pop {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:1000;}
.pop .blue-color {color:#0c4ca3;}
.pop strong {font-weight:700;}
.pop-inner {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:320px; background:#f5f5f5; color:#222; box-shadow:20px 20px 30px 0 rgba(0,0,0,.35);}
.pop .swiper-slide {display:block; text-align:center;}
.pop .swiper-control {position: absolute; bottom:17px; z-index:10; width:100%; text-align:center;}
.pop .swiper-pagination {display:inline-block; position:relative; color:#999; font-weight:600;}
.pop .swiper-pagination-current {color:#28282e;}
.pop .swiper-pagination-bullet {margin:0 4px;}
.pop .swiper-control .stop,
.pop .swiper-control .start {display:inline-block; width:10px; height:15px; margin-left:10px; background:url(/common/images/common/pop_swiper_stop.png) no-repeat; background-size:100%;}
.pop .swiper-control .start {background-image:url(/common/images/common/pop_swiper_start.png);}
.pop .swiper-button-next,
.pop .swiper-button-prev {top:auto; bottom:17px; left:50%; width:10px; height:17px;}
.pop .swiper-button-next {background:url(/common/images/common/pop_arrow_right.png) no-repeat; background-size:100%; margin-left:37px;}
.pop .swiper-button-prev {background:url(/common/images/common/pop_arrow_left.png) no-repeat; background-size:100%; margin-left:-46px;}
.pop-logo {overflow:hidden; padding:15px 24px;}
.pop .logo-kcc {float:left; width:81px;}
.pop .logo-switzen {float:right; width:68px; margin-top:3px;}
.pop-body {line-height:1.5; font-size:13px;}
.pop-title {padding:20px 0; font-size:19px; font-weight:600;}
.pop-title span {font-size:14px;}
.pop-buttons {margin-top:5px;}
.pop-buttons a {display:inline-block; font-size:15px; font-weight:700; color:#222;}
.pop-buttons a:after {content:''; border-right:1px solid #999; width:0; height:14px; margin:0 11px 0 13px;;}
.pop-buttons a:last-child:after {display:none;}
.pop-box {margin:18px 24px; font-size:15px; color:#000; border:1px solid #e0e0e0; border-radius:2px; padding:20px;}
.pop-box-tit {font-size:12px; margin-right:5px;}
.pop-body ul {overflow:hidden; text-align:left; margin-bottom:25px;}
.pop-body li {position:relative; margin-bottom:5px; padding-left:55px;}
.pop-body li .tit {position:absolute; top:0; left:0;}
.pop-body .btn {height:32px; line-height:32px; padding:0 25px; border-color:#000; font-size:12px; background:transparent;}
.pop-body dl {font-size:14px;}
.pop-body dt {margin-bottom:5px; font-size:12px; font-weight:600;}
.pop-body dd {margin:0 0 20px;}
.pop-body dd a {text-decoration:underline;}
.pop-body img {width:100%;}
.pop-footer {overflow:hidden; height:40px; background:#fff;}
.pop-footer button {width:50%; height:100%; float:left;}
.pop-footer button.black {background:#222; color:#fff;}

@media (min-width: 1024px) {
    .pop {top:12%; left:60%; width:400px; height:auto;}
    .pop-inner {top:0; left:0; right:auto; transform:translateY(0); width:100%;}
    .pop .swiper-button-next,
    .pop .swiper-button-prev {bottom:19px; width:12px; height:20px;}
    .pop .swiper-button-prev {margin-left:-48px;}
    .pop-body {font-size:16px;}
    .pop-title {font-size:24px; line-height: 1.3;}
    .pop-title span {font-size:18px;}
    .pop-box {padding:28px 20px; font-size:18px;}
    .pop-box-tit {font-size:14px; margin-right:5px;}
    .pop-body li {padding-left:62px; margin-bottom:10px;}
    .pop-body li .tit {font-size:14px;}
    .pop-body .btn {height:40px; line-height:40px; padding:0 28px; font-size:16px;}
    .pop-body dl {font-size:16px;}
    .pop-body dt {font-size:14px;}
    .pop-body dd a {font-size:14px;}
}
/* //레이어팝업 */