@charset "utf-8";

/* Font */
@font-face {
	font-family:sh;
	src:url('../../inc/fonts/OneShinhanLight.eot');
	src:local(※),
		url('../../inc/fonts/OneShinhanLight.eot?#iefix') format('embedded-opentype'),
		url('../../inc/fonts/OneShinhanLight.woff') format('woff'),
		url('../../inc/fonts/OneShinhanLight.woff2') format('woff2'),
		url('../../inc/fonts/OneShinhanLight.ttf') format('truetype');
	font-weight: 300;
	font-style: normal
}
@font-face {
	font-family:sh;
	src:url('../../inc/fonts/OneShinhanMedium.eot');
	src:local(※),
		url('../../inc/fonts/OneShinhanMedium.eot?#iefix') format('embedded-opentype'),
		url('../../inc/fonts/OneShinhanMedium.woff') format('woff'),
		url('../../inc/fonts/OneShinhanMedium.woff2') format('woff2'),
		url('../../inc/fonts/OneShinhanMedium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal
}
@font-face {
	font-family:sh;
	src:url('../../inc/fonts/OneShinhanBold.eot');
	src:local(※),
		url('../../inc/fonts/OneShinhanBold.eot?#iefix') format('embedded-opentype'),
		url('../../inc/fonts/OneShinhanBold.woff') format('woff'),
		url('../../inc/fonts/OneShinhanBold.woff2') format('woff2'),
		url('../../inc/fonts/OneShinhanBold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal
}

/* Reset */
html,body {position: relative;width:100%;height:100%;font-size:16px;color:#4a5777;line-height:1.3;-webkit-text-size-adjust:none;}
/* body,div,form,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,em,p,span,textarea,pre,label,fieldset,th,td,button,a,input,select,hr, figure {margin:0;padding:0;font-family:ns, sh, Arial, dotum;word-break:break-all;vertical-align:top;} */

#wrap {width:100%;min-width:1340px;margin:0 auto;overflow-x:hidden;}

/* #wrap #header {max-width:1903px;} */

/* slide */
.slide {width:100%;}
.slide .swiper-wrapper {font-size:0; white-space:nowrap;}
.slide .swiper-wrapper .swiper-slide{display:inline-block; font-size:15px; vertical-align:middle;}
.scrollSlide {overflow:hidden; height:800px;}
.scrollSlide .swiper-wrapper {position:relative; height:100%;}

/* intro */
/* .section {overflow:hidden;} */
.introWrap {height:1080px;position:relative;background-color:#eff1f5;}
.inner {width:1340px;margin:0 auto;}
.slideActive {position:absolute; z-index:1; border-radius:45px; border:20px solid #333333;}
.introWrap .slideActive {top:160px; left:29%; min-width:308px; min-height:620px; background:url('images/img_intro_01.png');}
.introWrap > .inner {height:100%;position:relative;}
.introSlideWrap {width:100%;}
.introSlide {padding:15px;position:absolute;top:414px;left:0;overflow:hidden;  }
/* .introSlide .swiper-wrapper {padding-left:371px;} */
.introSlide .swiper-slide {text-align:center; box-sizing:border-box;}
.swiperWrap {width:307px;height:620px;position:absolute; top:210px; left:24.5%;border:20px solid #333;border-radius:40px;opacity:0;}
.swiperWrap .swiper-container-device {width:100%;height:100%;border-radius:20px;overflow:hidden;}
/* .introSlide .swiper-container-device .swiper-slide-device img {border-radius:45px; border:20px solid #333333;} */
.swiperWrap .swiper-container-device .swiper-slide-device {position:absolute; left:0; top:0;z-index:-1;border-radius:20px;overflow:hidden;}
/* .introSlide .swiper-pagination span.swiper-pagination-bullet-active {z-index:1;} */
.introSlide .icon {display:inline-block; width:200px; height:200px; line-height:200px; background-color:#ffffff; border-radius:20px; box-shadow:0 0 15px rgba(0,0,0,0.1);}
.introSlide .icon img {vertical-align: middle;}
.introSlide .tit {display:block; margin-top:24px; text-align:center;font-family:sh; font-size:20px; font-weight:300; color:#333333;}

 /* .introSlide .swiper-slide,   */
.introSlide .swiper-pagination, 
.bottomCon {opacity:0;}

.bottomCon {position:absolute;top:210px;right:0;text-align:right;}
.bottomCon .tit {font-family:sh;font-size:45px;font-weight:700; color:#333333;}
.bottomCon .gray {margin-top:10px; line-height:1.5;font-family:sh; font-size:17px;font-weight:300; color:#999999; letter-spacing:1.7px;}

/* section 01 */
.section01 {position:static; padding-top:240px;}
.number {display:block; font-size:45px; font-weight:700; color:#eff1f5;}

.topArea:after {content:''; display:block; clear:both;}
.topArea .title, 
.topArea .col {float:right;}
.topArea .title {float:left; font-size:45px; color:#333333;}
.topArea .title dt {font-family:sh;font-size:13px;font-weight:700;color:#2273e6;line-height:1.46;}
.topArea .title dd {font-family:sh;font-size:45px;font-weight:700;color:#333;}

.autoSlide {position:relative; width:100%; height:646px; padding:120px 0 0; text-align:center;}
.autoSlide > .swiper-wrapper {font-size:0;white-space:nowrap;}
.autoSlide > .swiper-wrapper > .swiper-slide-point {display:inline-block;white-space:normal}
/* .autoSlide > .swiper-wrapper > .swiper-slide {display: block; position:absolute; top: 0; left: 0; background-color:#ffffff; background-image:none;opacity:0;}
.autoSlide > .swiper-wrapper > .swiper-slide-active {position:relative;opacity:1;} */
/* .autoSlide > .swiper-wrapper > .swiper-slide:not(.swiper-slide-active) {opacity:0 !important;} */
/* .autoSlide > .swiper-wrapper > .swiper-slide:first-child, */
/* .autoSlide > .swiper-wrapper > .swiper-slide.swiper-slide-active {opacity:1 !important;} */
.autoSlide > .swiper-wrapper > .swiper-slide.bg03 {min-height:606px;}

.autoSlide > .swiper-wrapper > .swiper-slide:after {content:''; position:absolute; left:50%; bottom:0; z-index:-1; width:1350px; height:100%; margin-left:-675px;}
.autoSlide > .swiper-wrapper > .swiper-slide.bg01:after {background:url('images/bg_kp_01.png') no-repeat center; background-size:contain;}
.autoSlide > .swiper-wrapper > .swiper-slide.bg02:after {background:url('images/bg_kp_02.png') no-repeat center; background-size:contain;}
.autoSlide > .swiper-wrapper > .swiper-slide.bg03:after {left:0;bottom:auto;top:100px;width:100%; margin-left:0; background:url('images/bg_kp_03.png') no-repeat center; background-size:contain;}

.autoSlide > .swiper-wrapper > .swiper-slide {margin-top:20px;}
.autoSlide > .swiper-wrapper > .swiper-slide:last-child {margin-top:0;}

.autoSlide .swiper-slide .activeImg {min-width:270px;min-height:540px;position:relative; display:inline-block;}
.autoSlide .swiper-slide .activeImg:before {content:'';width:270px;height:540px;display:block;position:absolute;top:-20px;left:-20px;border-radius:45px;border:20px solid #333333; box-shadow:40px 40px 20px rgba(0,0,0,0.15);}
.autoSlide .swiper-slide .activeImg img {position:relative;;}
.autoSlide .swiper-slide .text {margin-top:60px;font-family:sh; font-size:20px; font-weight:500;color:#333333;line-height:1.5;}
.autoSlide .swiper-slide:nth-child(4) .text {margin-top:10px;}

.autoSlide > .swiper-wrapper > .swiper-slide.bg03 .imgKP02 {display:block;position:absolute;top:83px;left:0;}

.icon-pagination {position:absolute; top:16px; left:50%;transform:scale(0.8) translateX(-64%); font-size:0;}
.icon-pagination .swiper-pagination-bullet {display:inline-block; margin-left:40px; text-align:center;}
.icon-pagination .swiper-pagination-bullet:first-child {margin-left:0;}
.icon-pagination .swiper-pagination-bullet span {display:block; min-width:45px; padding-bottom:55px;font-family:sh; font-size:16px;font-weight:500; color:#cccccc; text-align:center; cursor:pointer;}
.icon-pagination .swiper-pagination-bullet-active span {color:#333333;}
.icon0 {background:url('images/icon_kp_03.png') no-repeat bottom center;}
.icon1 {background:url('images/icon_kp_01.png') no-repeat bottom center;}
.icon2 {background:url('images/icon_kp_04.png') no-repeat bottom center;}
.icon3 {background:url('images/icon_kp_02.png') no-repeat bottom center;}
.swiper-pagination-bullet-active .icon0 {background:url('images/icon_kp_03_on.png') no-repeat bottom center;}
.swiper-pagination-bullet-active .icon1 {background:url('images/icon_kp_01_on.png') no-repeat bottom center;}
.swiper-pagination-bullet-active .icon2 {background:url('images/icon_kp_04_on.png') no-repeat bottom center;}
.swiper-pagination-bullet-active .icon3 {background:url('images/icon_kp_02_on.png') no-repeat bottom center;}

/* 상품 */
.autoSlide .productSlide {overflow:hidden; padding:80px 0 279px;}
.autoSlide .productSlide:before {content:''; position:absolute; z-index:1; top:0; left:50%; margin-left:-155px; width:270px; height:540px; border-radius:45px; border:20px solid #333333; box-shadow:40px 40px 20px rgba(0,0,0,0.15); background:url('images/img_kp_04.png');}
.productSlide .swiper-slide img {transform: scale(0.8);}
.productSlide .swiper-slide-active img {transform: scale(1);}
/* 계좌 */
/* 환율 */
/* .autoSlide > .swiper-wrapper > .swiper-slide.swiper-slide-active .dragMotion {} */
.dragMotion {width:100%;position:absolute;  left:0; bottom:0; height:5%; z-index:1; background-color:#004dc9; border-radius:0 0 21px 21px; border-top:3px solid #112369;}
.dragMotion span {position:absolute;}
.dragBtn {top:-26px; left:auto; right:0; z-index:10; width:56px; height:53px; border:none; border-radius:50px 0 0 50px; box-shadow:-2px -2px 5px rgba(0,0,0,0.05); background:url('images/arrow.png') no-repeat center right 19px #ffffff;}
.rateNum {position:absolute; right:0; bottom:45px; left:0; z-index:2; font-size:25px; font-weight:700; text-align:center; color:#ffffff;}
/* 송금 */
.countingNum {position:absolute; top:178px; right:65px; z-index:1; font-size:30px; font-weight:700; color:#333333;}
.won {position:absolute;top:227px;right:65px;z-index:1;font-size:10px;font-weight:700;color:#9d9ea9;opacity:0;}
/* section 02 */
.section02 {padding-top:240px;}
.section03 {padding-top:270px;}

.concept {margin-top:150px; text-align:center;}
.roundWrap {padding-bottom:138px; background:url('images/bg_cp_line.png') no-repeat center bottom;}
.round {display:inline-block; padding:27px 20px 10px; border-radius:200px; background-color:#2273e6;}
.round img {transform: translateX(20px); opacity:0; position:relative; display:inline-block; margin-left:-80px;}
.round img:nth-of-type(1) {z-index:3; margin-left:0;}
.round img:nth-of-type(2) {z-index:2;}
.round img:nth-of-type(3) {z-index:1;}

.dlWrap {display:table; table-layout:fixed; margin-top:30px;}
.dlWrap dl {display:table-cell; padding:0 20px; }
.dlWrap dt {font-family:sh;font-size:18px;font-weight:700; color: #333333; word-break:keep-all;}
.dlWrap dd {margin-top:10px;font-family:sh;font-size:16px;font-weight:300;color: #666666; line-height:1.75; word-break:keep-all;}

/* section 03 */
.norlText {margin-top:60px; }
.norlText p {font-size:18px; font-weight:300; color:#666666;line-height:1.6}
.norlText p + p {margin-top:30px;}

.spreadArea {overflow:hidden; margin-top:150px; padding-bottom:270px; font-size:0; white-space:nowrap;}
.spreadArea img {display:inline-block; margin-right:55px; vertical-align:top; box-shadow:20px 30px 30px rgba(0,0,0,0.1);opacity:0; transform: translateX(100%); }
.spreadArea img:nth-of-type(2) {margin-top:120px;}
.spreadArea img:nth-of-type(4) {margin-top:90px;}
.spreadArea img:nth-of-type(5) {margin-top:140px;}
.spreadArea img:nth-of-type(7) {margin-top:200px;}

/* scroll event item */
/* .item {transform: translateX(100px); opacity:0;} */

@media screen and (max-width: 1366px) {
  .swiperWrap {left:23%;}
  .introSlide {padding:15px 0;}
}

@media screen and (max-width:767px) {
  #wrap {min-width:0;overflow-x:hidden;}
  .inner {box-sizing:border-box;width:100%;padding-right:20px;padding-left:20px;}
  .introWrap {height:844px;}
  .introWrap .slideActive {top:160px;left:50%;min-width:180px;min-height:365px;transform:translateX(-50%);background-size:cover;}
  .swiperWrap {top:190px;left:50%;width:180px;height:365px;border-width:10px;transform:translateX(-50%);}
  .introSlide {top:600px;}
  .introSlide .icon {width:110px;height:110px;line-height:110px;}
  .bottomCon {top:50px;right:20px;left:20px;text-align:center;}
  .bottomCon .tit {font-size:34px;}
  .section01 {padding-top:100px;}
  .topArea .title,.topArea .col {float:none;width:100%;}
  .autoSlide > .swiper-wrapper > .swiper-slide:after {width:100%;margin-left:-50%;}
  .autoSlide {box-sizing:border-box;max-width:100%;}
  .autoSlide .swiper-slide .activeImg {min-width:0;max-width:70%;}
  .scrollSlide {height:auto;}
  img,video {max-width:100%;height:auto;}
}