/*공통*/
.wideContainer{background-color:#fff;padding-bottom:0}
.wideContainer #content{min-width:100%;padding:0 }
.creditCardWrap .wideCont > .wrap{position: relative; max-width: 1440px;padding:80px 20px;margin: 0 auto;box-sizing: border-box;}

/*기존 폼 간격 수정*/
.wideContainer .wideCont p.titH3{margin-top:0}

/*비쥬얼 영역*/
.creditCardArea{position:relative;background-position:0 0;background-size: cover;padding:44px 0 ;margin-bottom:112px;min-height:455px;box-sizing:border-box;}
.creditCardArea .crdInfo{margin:0 auto;max-width: 1440px;color:#fff;text-align:center}

/*컨텐츠 배경*/
.wideCont{background-color:#fff}
.wideCont.gray{background-color: #eee;}
.wideCont.shadow{position:relative}
.wideCont.shadow:after{content:'';position: absolute;top:0;left:0;height:10px;width:100%;z-index:3;background: -moz-linear-gradient(top,rgba(204,204,204,0.7) 0,rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(top,rgba(204,204,204,0.7) 0,rgba(255,255,255,0) 100%);background: linear-gradient(to bottom,rgba(204,204,204,0.7) 0,rgba(255,255,255,0) 100%);}
/*맵 배경*/
.CalculateWrap .wrap{max-width:960px;background:url(/img/card/crdMap.png) no-repeat 50% 80px}

/*비쥬얼 컨텐츠 영역*/
.creditCardArea .crdInfo .subTit{font-size: 26px;line-height: 32px;}
.creditCardArea .crdInfo .tit{margin-top:22px;font-size: 56px;line-height: 68px;font-weight:bold;letter-spacing:-1px}
.creditCardArea .crdInfo .link{display:inline-block;margin-top:50px;font-size: 20px;line-height: 24px;}
.creditCardArea .crdInfo .link .line{border-bottom:1px solid #fff}

.creditCardArea .crdBtn{margin-top:30px;}
.creditCardArea .crdBtn,
.creditCardWrap .crdBtn{display:inline-block;padding: 9px;border-radius: 6px;font-size: 16px;line-height: 20px;min-width:220px;font-weight: bold;letter-spacing: normal;text-align: center;color: #fff;background-color: #ec5529;background-image: linear-gradient(to bottom,rgba(241,111,46,0.99),#ec5529);transform: scale(1);transition: .2s ease-in-out;}
.creditCardArea .crdBtn:hover,
.creditCardArea .crdBtn:focus,
.creditCardArea .crdBtn:active,
.creditCardWrap .crdBtn:hover,
.creditCardWrap .crdBtn:focus,
.creditCardWrap .crdBtn:active{-webkit-transform: scale(1.05) perspective(1px); transform: scale(1.05) perspective(1px);transition: .2s ease-in-out;color: #fff;background-color: #ec5529;}
.creditCardArea .img{position: absolute;bottom: -112px;left: 50%;margin-left: -174px;width: 348px;height: 225px;}
.creditCardArea .img img{display:inline-block;width:100%;box-shadow: 0 3px 2px rgba(0,0,0,0.3);border-radius: 14px;}
.creditCardArea .img .frame{z-index:20;position:absolute;left:0;width: 100%;height: 100%;;background-size:100%;background-repeat: no-repeat;}
.creditCardArea .dateBox{margin-top:30px}

.creditCardArea .crdBtn:first-child{margin-left:0}
.creditCardArea .crdBtn{margin-left:10px}

/*리스트 텍스트 공통*/
.creditCardWrap .tit_1{font-size:40px;line-height:64px;text-align:center;color:#333;font-weight:bold}
.creditCardWrap .desc_1{font-size:16px;text-align:center;color:#333}
.creditCardWrap .tit_2{display:block;font-size: 20px;line-height: 23px;font-weight: bold;color:#333 }
.creditCardWrap .desc_2{font-size: 14px;color: rgba(51,51,51,0.95);}
.creditCardWrap .date{font-size: 12px;line-height: 18px;}
.creditCardWrap .btnBox{margin-top:20px;text-align:center}
.creditCardWrap .btnClose{display:inline-block;font-size:16px;margin:0 auto;color: #056DAE;font-weight: bold;}
.creditCardWrap .btnClose:hover,
.creditCardWrap .btnClose:focus,
.creditCardWrap .btnClose:active{color: #002a54;}

/*간격 */
.creditCardWrap .tit_1 + .crdList_1,
.creditCardWrap .tit_1 + .crdList_2,
.creditCardWrap .tit_1 + .crdList_3,
.creditCardWrap .tit_1 + .desc_1,
.creditCardWrap .desc_1 +.crdList_1{margin-top:30px}

.crdList_2:after{display:block;content:'';clear:both}

/* 아이콘 원래 60px
.crdIcons:before{display:block;content:'';clear:both;width:60px;height:60px;margin:0 auto;background:url(../img/card/sp_crdIcon_01.png) no-repeat 0 0;transform: scale(0.85);transition: transform .6s ease;transition: transform .6s ease,-webkit-transform .6s ease;}
.crdIcons.icon_1:before{background-position:0 0}
.crdIcons.icon_2:before{background-position:-80px 0}
.crdIcons.icon_3:before{background-position:-160px 0}
.crdIcons.icon_4:before{background-position:-240px 0}
.crdIcons.icon_5:before{background-position:-320px 0}
.crdIcons.icon_6:before{background-position:0 -80px}

 아이콘 2
.crdIcons.icon_2_1:before{background-size: 298px;background-position:0 -179px;}
.crdIcons.icon_2_2:before{background-size: 298px;background-position:-74px -179px;}
.crdIcons.icon_2_3:before{background-size: 298px;background-position:-148px -179px;} */

/*아이콘*/
.creditCardWrap .inviewBox.inviewCurrent .crdImg{opacity: 1;transform: scale(1);}
.creditCardWrap .crdImg{display:block;width:60px;height:60px;margin:0 auto;transform: scale(0.85);transition: transform .6s ease;transition: -webkit-transform .6s ease;}

/*각 상품리스트*/
.lessBox{overflow:hidden}

.crdList_1,
.crdList_2,
.crdList_3{text-align:center}

.crdList_1 .tit_2{margin-top:10px}
.crdList_1 .desc_2{margin-top:10px}
.crdList_1 li,
.crdList_3 li{margin-bottom:20px}

.crdList_2 li{padding:0}
.crdList_2 .img{position:relative;padding:0 15px;box-sizing:border-box}
.crdList_2 .img .bg{padding-top: 64%;transition: padding-top .3s linear;margin: 0 auto;width:90%;background-size: contain;background-position: center;background-repeat: no-repeat}
.crdList_2 .img .bar{display:none;position: absolute;bottom:0;left:0;height:30px;width:100%;z-index:3;background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.12) 100%);background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.12) 100%);background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.12) 100%);}
.crdList_2 ul > li:first-child .img .bar{display:block;width:500%;left:-100%}

.crdList_2 .box{display: flex;flex-direction: column-reverse;padding:0 5px;box-sizing:border-box}
.crdList_2 .tit_2{margin-top:10px}
.crdList_2 .desc_2{margin-top:25px}
.crdList_3 .tit_2{margin-top:10px}
.crdList_3 .desc_2{margin-top:10px}
.crdList_3 .img > img{max-width:335px;width:100%;margin: 0 auto;}

/*하단 배너*/
.creditCardWrap .bannerStikcy .wrap{display: flex;padding:0 20px;width:100%;max-width:1440px;margin:0 auto;height: 71px;align-items: center;box-sizing: border-box;}
.creditCardWrap .bannerStikcy .stikcyBox{position:relative;width:100%;height:auto;padding:10px 0;opacity:0}
.creditCardWrap .bannerStikcy .stikcyBox.fixed{position:fixed;z-index:100;bottom:0;display: block;opacity: 1;pointer-events: all;}
.creditCardWrap .bannerStikcy .stikcyBox.fadeIn{opacity:1;transition: opacity .5s,top .3s;}
.creditCardWrap .bannerStikcy .img{display:inline-block;margin-right:20px;}
.creditCardWrap .bannerStikcy img{display:inline-block;height:71px;width: 112px;}
.creditCardWrap .bannerStikcy .desc{margin-right:20px;font-size: 26px;;color:#fff;width: calc(100% - 520px)}
.creditCardWrap .bannerStikcy .crdBtnBox{margin-left:auto;}
.creditCardWrap .bannerStikcy .crdBtn{min-width:160px}
.creditCardWrap .noticeArea{margin-top:0}

/*스크롤 모션*/
.inviewBox.inviewCurrent .crdIcons:before{opacity: 1;transform: scale(1);}
.inviewBox.tit_1{position:relative;}
.inviewBox.tit_1:after{display:block;content:'';padding-top:30px;width:100px;border-bottom:1px solid #999;margin: 0 auto;}
.inviewBox.tit_1.inviewCurrent:after{transition: width .4s,opacity .3s;width: 150px;opacity: 1;}

/*슬라이드*/
.creditCardWrap .crdSliderWrap{position:relative;}
.creditCardWrap .crdSliderWrap .cautionBox{padding-top:40px;border-top:1px solid #979797}
.crdSliderWrap:after{content:'';position: absolute;bottom: 0;height: 30px;width: 100%;z-index: 3;background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.12) 100%);background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.12) 100%);background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.12) 100%);}
.crdSliderWrap .crdSlider{margin-top:30px}
.crdSliderWrap .crdSlider:after{display:block;content:'';clear:both}
.crdSliderWrap .swiper-wrapper,
.crdSlider > .swiper-container > .swiper-wrapper > .swiper-slide{height:auto!important}
.crdSliderWrap .crdSlider > .swiper-container{margin-left:8.3333333333%;}
.crdSliderWrap .swiper-container .swiper-slide{text-align: center;}
.crdSliderWrap .swiper-container .swiper-slide img{max-width: 80%;}
.crdSliderWrap .swiper-control{margin-top: 5%;}
.crdSliderWrap .swiper-pagination-bullets{display:block}
.crdSliderWrap .swiper-pagination-custom{position: relative;padding:0 10px;}
.crdSliderWrap .swiper-pagination-custom:before{background:none;}
.crdSliderWrap .swiper-pagination-custom .swiper-pagination-bullet{height: 68px;overflow: hidden;margin: 6px 1.5%;width: 30%;float: left;padding: 10px;background-color: #f6f6f6;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);box-shadow: 0 2px 4px rgba(0,0,0,0.2);opacity:1;}
.crdSliderWrap .swiper-pagination-custom .swiper-pagination-bullet span{font-size: 14px;color: #999;font-weight:700}
.crdSliderWrap .swiper-pagination-custom .swiper-pagination-bullet-active span ,
.crdSliderWrap .swiper-pagination-custom .swiper-slide-active span{color:#333}

/*팝업 모션*/
.motionPop{opacity:0;transition: opacity .6s linear;}
.motionPop.in{opacity:1}
.motionPop .popContain{-webkit-transform: translate(0,-25%);transform: translate(0,-25%);transition: -webkit-transform .3s ease-out;transition: transform .3s ease-out;transition: transform .3s ease-out,-webkit-transform .3s ease-out;}
.motionPop.in .popContain{-webkit-transform: translate(0,0);transform: translate(0,0);}

/*SNS*/
.creditCardWrap .shareWrap{position:relative;max-width: 1440px;padding:0 20px;margin: 17px auto 0;}
.creditCardWrap .shareWrap .linkShare{position: absolute;top: -100px;right: 20px;width: auto;}

/*탭 리스트*/
.creditCardWrap .tab{margin:0 0 20px 0;}
.creditCardWrap .tab li{background-color:#f6f6f6}
.creditCardWrap .tab li > *{color:#333}
.creditCardWrap .tab .on > *{top: 0;height:70px;color:#056dae;font-weight:bold;}
.creditCardWrap .tabContain{margin-top:0}
/* .creditCardWrap .tabContain:first-child .tabContents{display:none} */
.creditCardWrap .tab + .tabContents:first-child{display:block}
.creditCardWrap .tabContain .tabContents{margin:0 40px}
.creditCardWrap .checkList > li:before{display:none}
.creditCardWrap .checkList > li{padding-left: 0}

.creditCardWrap .infoListLine{border-top:0}
.creditCardWrap .infoListLine .wrap{position:relative;padding:15px 0}
.creditCardWrap .infoListLine .accoContents{padding:20px 0}
.creditCardWrap .infoListLine .accordion{top:9px;left:-45px}
.creditCardWrap .infoListLine > li{position:relative;border-bottom:0}
.creditCardWrap .infoListLine.cardDetail > li.on .wrap .tit{color:#002a54}
.creditCardWrap  .infoListLine.acco > li .wrap:before{position:absolute;bottom: 0;left: -45px;content:'';width:100%; padding-left: 45px;border-bottom: 1px solid #ccc;}

.creditCardWrap .infoListLine.acco > li.on .wrap:before{border-bottom: 1px solid #056dae;}

.creditCardWrap [class^=infoList] .wrap .tit{color:#056DAE}

/*상품출시일*/
.creditCardWrap .proDate{margin:30px 0;font-size:14px;color:#333}

/*팝업 배경*/
.popup .popCont.bgWhite{background:#fff}
.popup .popCont .crdList_2 ul > li:first-child .img .bar{display:block;width:calc(300% + 40px);left:-20px}

/*테블릿 모바일*/
@media screen and (max-width:987px){
	/*비쥬얼 컨텐츠 영역*/
	.creditCardArea{padding:120px 0 200px 0;height:auto}
	.creditCardArea .crdInfo .subTit{font-size: 16px;line-height: 22px;}
	.creditCardArea .crdInfo .tit{margin-top:25px;font-size: 42px;line-height: 46px;}
	.creditCardArea .crdInfo .link{margin-top:50px;font-size:16px;line-height:24px}
	.creditCardArea .crdBtn{margin-top:12px}
	.creditCardArea .dateBox{margin-top:40px}
	
	/*리스트 텍스트 공통*/
	.creditCardWrap .linkUnderLine{font-size:16px;line-height:24px}
	.creditCardWrap .tit_1{font-size: 34px;line-height: 38px;}
	
	.crdList_2 .img .bg{padding-top: 85%;}

	/*슬라이드*/
	.crdSliderWrap:after{display:none}
	.creditCardWrap .crdSliderWrap .cautionBox{padding:40px 20px 0 20px}
	.crdSliderWrap .crdSlider > .swiper-container{margin-left: 16.6666666667%;}
	.crdSliderWrap .crdSlider > .swiper-container:after{z-index: 100;position:absolute;bottom:0;left:50%;content:'';width:88%;margin-left:-44%;border-bottom:1px solid #979797}
	.crdSliderWrap .swiper-control{margin:20px 0}
	.crdSliderWrap .swiper-pagination-custom{padding:6px 0;}
	.crdSliderWrap .swiper-pagination-bullets{display:flex}
	.crdSliderWrap .swiper-pagination-custom .swiper-pagination-bullet{cursor: inherit;margin:0;outline:none}

	
	/* 하단 배너 */
	.creditCardWrap .bannerStikcy .desc{font-size:20px;max-width: 270px;margin-right:10px}
	.creditCardWrap .bannerStikcy .crdBtnBox:after{display:block;content:'';clear:both;}
	.creditCardWrap .bannerStikcy .crdBtn{float:left;min-width: 125px;}
	.creditCardWrap .bannerStikcy .crdBtn + .crdBtn{margin-left:10px}
	
	/*팝업*/
	.popup .crdSliderWrap .swiper-control{overflow:hidden}
}

/*모바일*/
@media screen and (max-width:767px){
	.wideContainer #content .wideCont.pbM0 > .wrap,
	.creditCardWrap .wideCont.pbM0 > .wrap{padding-bottom:0}
	
	.crdList_2 li{margin-top:40px}
	.crdList_2 li:first-child{margin-top:10px}
	
	.creditCardWrap .crdList_1:not(.etc) .col_mb_12,
	.creditCardWrap .crdList_2 .col_mb_12,
	.creditCardWrap .crdList_3 .col_mb_12{float:none}
	
	/*비쥬얼 컨텐츠 영역*/
	.creditCardArea{padding:110px 0 115px 0;margin-bottom: 65px;background-position:50%}
	.creditCardArea .img{width: 235px;height:auto;bottom:-60px;margin-left: -118px;}
	.creditCardArea .img img{box-shadow: 0 2px 1px rgba(0,0,0,0.3);border-radius: 10px;}
	.creditCardArea .crdInfo .tit{margin-top:12px;font-size:35px;max-width:320px;margin:0 auto;padding:0 20px;box-sizing:border-box;letter-spacing: -1.5px}
	.creditCardArea .crdInfo .link{margin-top:120px;}
	.creditCardArea .blockM{display:block}
	/*비쥬얼 버튼*/
	.creditCardArea .crdBtnBox{padding: 0 20px;}
	.creditCardArea .crdBtnBox:after{display:block;content:''}
	.creditCardArea .crdBtnBox .crdBtn{min-width: 160px;}
	.creditCardArea .crdBtnBox.col2 .crdBtn{width: calc(50% - 30px);margin-left:5px;min-width:auto;max-width:160px}
	.creditCardArea .crdBtnBox.col2 .crdBtn:first-child{margin-right:5px;margin-left:0}
	
	/*리스트 텍스트 공통*/
	.creditCardWrap .wideCont > .wrap{padding: 40px 20px;}
	.creditCardWrap .tit_1{font-size: 26px;line-height: 29px;}
	
	
	/*아이콘*/
	.creditCardWrap .crdImg{width: 60px;margin: 0 17px 0 0;}
	
	/*각 상품리스트*/
	.creditCardWrap .crdList_1 li{margin-bottom:10px}
	.creditCardWrap .crdList_1 .inner,
	.creditCardWrap .crdList_2 .inner{display:flex}
	/* .creditCardWrap .crdList_1 .crdIcons:before{width:60px;margin: 0 17px 0 0;} */
	.creditCardWrap .crdList_1:not(.etc) .box{width: calc(100% - 80px);}
	
	.creditCardWrap .crdList_2{margin:0 -20px}
	.creditCardWrap .crdList_2 .inner{padding-bottom: 0!important;}
	.creditCardWrap .crdList_2 li{overflow:hidden}
	.creditCardWrap .crdList_2 li:nth-child(odd) .inner{flex-direction: row-reverse;}
	
	.creditCardWrap .crdList_1 .box,
	.creditCardWrap .crdList_2 .box{text-align:left;box-sizing:border-box}
	.creditCardWrap .crdList_2 .box{display:block}
	
	.creditCardWrap .crdList_2 li:nth-child(odd) .box{padding:23px 23px 23px 0}
	.creditCardWrap .crdList_2 .box{padding:23px 0 23px 23px;min-height:200px;width:50%;box-sizing:border-box}
	
	.creditCardWrap .crdList_2 .desc_2{margin-top: 10px;}
	.creditCardWrap .crdList_2 .img{position: inherit;padding: 0;margin:0 0 0 -2em;;width: 50%; flex-shrink: 0;box-sizing: border-box;}
	.creditCardWrap .crdList_2 li:nth-child(odd) .img{margin:0 -2em 0 0 }
	.creditCardWrap .crdList_2 .img .bg{height: 100%;min-height:200px;max-height:200px;width: 100%;padding:0;background-size: cover;background-position: top right;}
	.creditCardWrap .crdList_2 li:nth-child(odd) .img .bg{background-position:0 0}
	.creditCardWrap .crdList_2 ul > li:first-child .img .bar,
	.creditCardWrap .crdList_2 .img .bar{display:block;bottom:0;width:100%;left:0}
	
	/*리스트 기타*/
	.creditCardWrap .crdList_1.etc .inner{display:block}
	.creditCardWrap .crdList_1.etc .crdIcons:before{margin:0 auto}
	.creditCardWrap .crdList_1.etc2 .conDivBox > li {margin-bottom:35px}
	.creditCardWrap .crdList_1.etc2 .conDivBox > li:last-child{margin-bottom:0}
	
	.creditCardWrap .linkUnderBox{margin-top:0}
	
	/*하단 배너*/
	.creditCardWrap .bannerStikcy .wrap{display:block;height:auto;padding:0 10px;text-align:center;}
	.creditCardWrap .bannerStikcy .desc{width:100%;max-width:100%;margin-right:0;font-size: 16px;line-height:21px;}
	.creditCardWrap .bannerStikcy .img{display:none}
	.creditCardWrap .bannerStikcy .crdBtnBox{margin:15px 0 0 0;}
	.creditCardWrap .bannerStikcy .stikcyBox{padding:20px 0}
	.creditCardWrap .bannerStikcy .crdBtn{float:none;width:44%;min-width: auto;margin:0 2px;padding:0;line-height:36px;}
	
	/*탭*/
	.creditCardWrap .tabContain .tabContents{margin:0}
	.creditCardWrap .infoListLine{margin-top:0}
	.creditCardWrap .selectUI .formWrap{margin-bottom:0}
	
	/*sns*/
	.creditCardWrap .shareWrap{margin:0 auto;padding:40px 0 0 0;text-align: center;}
	.creditCardWrap .shareWrap .linkShare{position:inherit;top: inherit;right: inherit;width:auto}
	
	/*슬라이드*/
	.creditCardWrap .crdSliderWrap .cautionBox{padding:40px 20px 0 20px}
	.crdSliderWrap .crdSlider > .swiper-container{position:relative;margin-left:0;width:100%}
	.crdSliderWrap .swiper-control{margin:20px 0}
	.crdSliderWrap .swiper-pagination-custom{padding:6px 0;}
	.crdSliderWrap .swiper-pagination-bullets{display:flex}
	.crdSliderWrap .swiper-pagination-custom .swiper-pagination-bullet{margin:0;padding:10px 5px;outline:none}
	
	.creditCardWrap .CalcResult .selectList > div{margin-top:10px}
	
}

@media screen and (max-width: 767px) and (min-width: 667px){
	.creditCardWrap .crdList_2 .box{min-height: 350px;}
	.creditCardWrap .crdList_2 .img .bg{min-height: 350px;max-height:350px}
	
}