@charset "utf-8";
@import url('gpcc_simple_01.css');
@import url('gpcc_simple_02.css');

/* opacity */
.op_80{opacity: 0.8;}
.op_64{opacity: 0.64;}
.op_48{opacity: 0.48;}
.op_40{opacity: 0.4;}
.op_20{opacity: 0.2;}
.op_16{opacity: 0.16;}
.op_12{opacity: 0.12;}
.op_08{opacity: 0.08;}
.op_04{opacity: 0.04;}
.op_02{opacity: 0.02;}

/* line-height */
.lh26{line-height: 26px!important;}
/* padding */
.pb40{padding-bottom:40px!important}
.pb48{padding-bottom:48px!important}

/* margin */
.ml24{margin-left: 24px;}

/* width */
.w504{width:504px!important}

.h48{height:48px!important}

/* page step 고정 */
/* .gpcc_simple #wrap{padding-top:128px!important} */
.gpcc_simple #wrap header{/*position: fixed;*/ top:0;background: #fff;}
.tit_sticky{position: sticky; top:55px;z-index: 999;    margin: -20px -24px 0px -24px;padding: 20px 24px 0px; background-image: linear-gradient(360deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 7%, rgba(255,255,255,0.48) 9%, rgba(255,255,255,0.64) 13%, rgba(255,255,255,0.76) 17%, rgba(255,255,255,0.88) 21%, rgba(255,255,255,0.94) 24%, rgba(255,255,255, 0.96) 27%, rgba(255,255,255,0.98) 32%, #ffffff 36%, #ffffff 74%);}
.gpcc_simple.fixed #wrap .header{border:none}

/* .gpcc_simple .sub_card  .section{padding-top:20px} */



/* switch btn size_s */
.gpcc_simple .switch_btn input + label{display:block;width:40px;height:24px;background:#e0e0e0;border-radius:20px;position:relative;transition:background .7s}
.gpcc_simple .switch_btn input + label:after{content:'';position:absolute;width:20px;height:20px;display:block;border-radius:100%;background:#fff;left:2px;top:2px;transition:left .5s}
.gpcc_simple .switch_btn input:checked + label{background:#000;transition:background .7s}
.gpcc_simple .switch_btn input:checked + label:after{left:18px;transition:left .5s}
.gpcc_simple .input_box.h56{border:none;height:56px; padding:0;background:none}
.gpcc_simple .box_content .input_box input + label{border:none}

.btn_search{width:24px;height:24px;display:inline-block;background:url('/docfiles/resources/mo/images/com/icon/w32/ico_search.png') no-repeat ;background-size:24px 24px;}
.btn_search + span{line-height:26px;}
.img_w16 img{width:16px;}.img_w24 img{width:24px;}.img_w52 img{width:52px;}.img_w64 img{width:64px;}.img_w80 img{width:80px;}.img_w100 img{width:100px;}
.switch_box{display:flex;justify-content:space-between;height:56px;border:1px solid #ebebeb;border-radius:4px;padding:0 10px 0 16px;align-items:center;}

/* 금융사 선택 */
.tab_bank { display: flex; align-items: center; justify-content: space-around; margin: 0 -24px; }
.tab_bank > li {  border-bottom: 1px solid #d6d6d6;   }
.tab_bank > li:first-child { border-left: 0; }
.tab_bank > li.w50 { width: 50%; }
.tab_bank > li.active { border-bottom: 2px solid #000; background-color: #fff; }
.tab_bank > li .btn { display: block; width: 100%; line-height: 22px; padding: 16px 0 18px; color: rgba(0, 0, 0, 0.48); text-align: center; font-size: 16px; font-weight: 500; }
.tab_bank > li.active .btn { color: rgba(0, 0, 0, 1); padding: 16px 0 17px;}
/* #bankDisplayDiv .bank_list, #stockDisplayDiv  .bank_list{margin:0 -24px} */

/* 2단계 : 카드옵션(디자인/브랜드/교통) 선택 + 금소법 + CDD/EDD + 약관동의2 */
.cardplate_tit{overflow: hidden;display: flex;justify-content: space-between;align-items: center;}
.cardplate_tit .btn_right{position: relative;line-height: 16px;}
.cardplate_tit .btn_right::after{content:"";position:absolute; width:1px;height:8px; top:4px;left:50%;display: block;background:rgba(0, 0, 0, 0.2)}
.cardplate_tit .btn_right .btn{padding:8px}

.gpcc_simple .card_slide_box.type2 {margin:16px auto 0;position: relative;width:568px;}
.gpcc_simple .card_slide_box.type2 .card_select_tit {line-height:22px;margin-top:-14px;text-align: center;font-size: 16px; font-weight: bold;}
.gpcc_simple .card_slide_box.type2 .card_slide {padding:0;}
.gpcc_simple .card_slide_box.type2 .card_slide .swiper-slide input[type=radio]{overflow: hidden;position: absolute;left: -9999em;width: 0;height: 0;margin: 0;padding: 0;text-indent: -9999em;z-index: -1;}
.gpcc_simple .card_slide_box.type2 .swiper-button-prev {left:0; width:56px; height:56px; margin-top:-28px; background:url('/gpcc/pc/images//btn_slide_arrow_left2.png') no-repeat; background-size:contain;}
.gpcc_simple .card_slide_box.type2 .swiper-button-next {right:0; width:56px; height:56px; margin-top:-28px; background:url('/gpcc/pc/images/btn_slide_arrow_right2.png') no-repeat; background-size:contain;}
.card_slide_box.type2 .card_slide .swiper-slide .tit {display:none;}

.card_slide_box.type2 .card_slide .slides {height:270px;}
.card_slide_box.type2 .card_slide.row .slides{height:135px}
.card_slide_box.type2 .card_slide .slides .swiper-slide {width:71px; height:100%;display: flex;align-items: center;}
.card_slide_box.type2 .card_slide .slides .swiper-slide.center {width:140px; margin-left:188px; } 

.card_slide_box.type2.is-small{width:auto}
.card_slide_box.type2.is-small .card_slide {overflow:visible; width:100%;}
.card_slide_box.type2.is-small .card_slide .slides {display:inline-block; width:calc(100% + 8px); height:auto; font-size:0; margin:0 -4px;}
.card_slide_box.type2.is-small .card_slide .slides .swiper-slide {display:inline-block; position:static;  margin:0; height:auto; padding:4px; box-sizing:border-box;}
.card_slide_box.type2.is-small .card_slide .swiper-slide .card {box-shadow:none;}
.card_slide_box.type2.is-small .card_slide .swiper-slide .tit {display:block;  margin-top:6px; color:rgba(0, 0, 0, 0.64); font-size:13px; font-weight:bold; line-height:16px; text-align:center;}

.card_slide_box.is-small .swiper-button-prev,
.card_slide_box.is-small .swiper-button-next {display:none;}
.card_slide_box.is-small .card_select_tit {display:none;}
.card_slide_box.is-small .card_slide .card_cnt .card {left:calc(50% - 24px); width:48px;}
.card_slide_box.is-small .card_slide .swiper-slide.center .card_cnt .card {box-shadow:none;}
.card_slide_box.is-small .card_slide .swiper-slide .card_item {display:block; position:relative; padding:14px 0 12px 0; text-align:center;}
.card_slide_box.is-small .card_slide .swiper-slide input[type=radio]{overflow: hidden;position: absolute;left: -9999em;width: 0;height: 0;margin: 0;padding: 0;text-indent: -9999em;z-index: -1;}
.card_slide_box.is-small .card_slide .swiper-slide input[type=radio] + .card_item:before {content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0; border:1px solid #ebebeb; border-radius:4px;}
.card_slide_box.is-small .card_slide .swiper-slide input[type=radio]:checked + .card_item:before {border:2px solid #000;}
.card_slide_box.is-small .card_slide .swiper-slide.center .tit {color:#000;}
.card_slide_box.is-small .card_slide .swiper-wrapper.col1 li{width:100%!important}
.card_slide_box.is-small .card_slide .swiper-wrapper.col2 li{width:50%!important}
.card_slide_box.is-small .card_slide .swiper-wrapper.col3 li{width:33.33333%!important}

.card_slide_box.is-small .card_slide.row .card_item .card_cnt .card {left:calc(50% - 40px); width:80px;padding-top:16px}
.card_slide_box.is-small .card_slide.row .card_item{padding-bottom:20px}


.card_slide{width:516px;overflow:hidden;}
/* .card_slide .slides{width:100%;height:390px;position:relative;} */
.card_slide .slides .swiper-slide{position:absolute;/*top:50%;*/left:0%;margin-left:526px;/*margin-top:-71px;*/width:90px;height:auto;z-index:2;}
.card_slide .slides .swiper-slide .card_cnt{width:100%;}
.card_slide .slides .swiper-slide img{width:100%;}
.card_slide .slides .swiper-slide.center{width:246px;margin-left:135px;/*margin-top:-195px;*/}
.card_slide .slides .swiper-slide.clone_prev{margin-left:-100px}

.gpcc_simple .card_slide .card_cnt{position:relative;width:156px;height:auto;-webkit-transform-style: preserve-3d;-webkit-transition: -webkit-transform .9s cubic-bezier(.4,.4,.1,1.4);background-color: transparent;transform-style: preserve-3d;transition: -webkit-transform .9s cubic-bezier(.4,.4,.1,1.4);transition: transform .9s cubic-bezier(.4,.4,.1,1.4);transition: transform .9s cubic-bezier(.4,.4,.1,1.4),-webkit-transform .9s cubic-bezier(.4,.4,.1,1.4);}

.gpcc_simple .card_slide .slides .card{position:relative;left:0;top:0;height:auto;backface-visibility: hidden;-webkit-backface-visibility: hidden;-webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,.08);box-shadow: 0 4px 8px 0 rgba(0,0,0,.08);-webkit-transition: top .25s ease;transition: top .25s ease;background-size:160px 253px;background-color:none;border-radius:8px;}
.gpcc_simple .card_slide .slides .b_card{position:absolute;width:100%;z-index:1;-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}
.gpcc_simple .card_slide .slides.center .card{-webkit-box-shadow: 0 16px 32px 0 rgba(0,0,0,.2);box-shadow: 0 16px 32px 0 rgba(0,0,0,.2);}
.gpcc_simple .card_slide .card_cnt.back{-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}

/* // 2단계 : 카드옵션(디자인/브랜드/교통) 선택 + 금소법 + CDD/EDD + 약관동의2 */

.gray_finance_wrap{border-radius:8px;padding:24px;overflow: hidden;}
.finance_list{margin-top:12px}
.finance_list > li{display: flex;justify-content: space-between;align-items: center;line-height: 48px;}
.finance_list > li .textbico_small{display: flex;}
.gray_finance_wrap > .finance_bar{position:relative; margin-top:32px}
.gray_finance_wrap > .finance_bar::after{content: ""; position:absolute;top:-17px;left:0;width: calc( 100% + 48px);height: 1px;background:rgba(0,0,0,0.08);margin:0 -24px;padding:0 24px}

.traffic_option{margin-top:16px;display: flex;width: calc(100% + 4px);margin: 0 -4px;}
.traffic_option li{width:33.33333%;display:inline-block ;padding: 4px 4px 0;box-sizing: border-box;}

.traffic_option .fee_info{border:none;border-radius:4px;position:relative;padding: 11px 0;min-height:64px;display: flex;align-items: center;}
.traffic_option .fee_info p span{display: block;}
.traffic_option .fee_info *{color:rgba(0,0,0,0.48)}
.traffic_option .fee_info:before{content:'';width:100%;height:100%;display:block;position:absolute;left:0;top:0;border-radius:4px;border:1px solid #ebebeb}
.traffic_option input[type="radio"]:checked + .fee_info:before{border-color:#000;border-width:2px;}
.traffic_option input[type="radio"]:checked + .fee_info *{color:#000}

.info_table{margin:10px 0;table-layout:fixed;border-collapse:collapse;}
.info_table td,
.info_table th{font-weight:normal;padding:8px 12px; border:1px solid #d0d0d0; word-wrap:break-word; word-break:keep-all;}
.info_table th{font-weight:bold;}
.info_table.type1 th, .info_table.type1 td {font-size:14px;line-height: 20px;}
.info_table.type2 th, .info_table.type2 td {font-size:12px;line-height: 18px;}

/* .modal_pop.modal_alert .modal_container .layer_body{padding:28px 0} */

.card_select{display:block;text-align:center;}
.card_select > .img{width:167px;display:inline-block;position:relative;box-shadow:0 16px 32px 0 rgba(0,0,0,.24); border-radius: 8px;} /* 2023-05-11 Q10962 카드 디자인 수정 */
.card_select .img_ct{transform:rotateY(0deg);transition:transform .5s cubic-bezier(.4,.4,.1,1.4);;width:160px;height:252px;display:inline-block;position:relative;box-shadow:0 16px 32px 0 rgba(0,0,0,.24);border-radius: 8px; background-color: #c1c1c1;}
/* 2023-02-06 Q11067 #274 웹접근성 외(이미지노출수정) */
.card_select .img_ct .img{display:block;position:absolute;width:100%;height:auto;left:0;top:0;opacity:1;transition:opacity .1s;transition-delay:.1s;}
.card_select .img_ct .img.back{display:none;opacity:0;transition:opacity .1s;transition-delay:.1s;transform:rotateY(180deg);margin-left:0}
/* .card_select .img_ct + .card_detail{display:none;} */
.card_select.swiper-slide-active .img_ct + .card_detail{display:block;}
.card_select.card_back .img_ct{transform:rotateY(180deg);transition:transform .5s cubic-bezier(.4,.4,.1,1.4);}
.card_select.card_back .img_ct .img{display:none;opacity:0;transition:opacity .1s;transition-delay:0.1s;}
.card_select.card_back .img_ct .img.back{display:block;opacity:1;transition:opacity .1s;transition-delay:.1s;}

[class^="radio_box"][class*="h_48"] > li label{height:48px!important;flex-wrap:wrap;align-items:center;font-size:16px;line-height:44px;padding: 0 16px!important;}
[class^="radio_box"][class*="h_48"] > li label::before{border-radius: 4px;}
[class^="radio_box"][class*="h_48"] > li label .img_w52{display: flex;}
/* [class^="radio_box"][class*="h_48"] > li + li{margin:0;} */
[class^="radio_box"][class*="h_48"].row2 > :nth-child(odd),[class^="radio_box"][class*="h_48"].row3 > :nth-child(1),[class^="radio_box"][class*="h_48"].row3 > :nth-child(4n){margin-left:0}
[class^="radio_box"][class*="h_48"].row2 > li{margin-left:8px;margin-top:8px;width: calc(50% - 4px)}

[class^="radio_box"][class*="h_48"].row3 > li{margin-left:8px;margin-top:8px;width: calc((100% - 16px)/3);}
[class^="radio_box"][class*="h_48"].row2 > li:nth-child(1), [class^="radio_box"][class*="h_48"].row2 > li:nth-child(2),[class^="radio_box"][class*="h_48"].row3 > li:nth-child(1),[class^="radio_box"][class*="h_48"].row3 > li:nth-child(2),[class^="radio_box"][class*="h_48"].row3 > li:nth-child(3){margin-top:0}
[class^="radio_box"][class*="h_48"] > :nth-child(1), [class^="radio_box"][class*="h_48"] > :nth-child(2){margin-top:0}


.gpcc_simple [class^="radio_box"][class*="col"] > li + li{margin-left:0}
.gpcc_simple [class^="radio_box"].col > li{width:100%;margin-left:0; }
.gpcc_simple [class^="radio_box"].center > li > label{justify-content: center;}


/* 툴팁 */
.tip {display: flex; align-items: center}
.tip .wrap_tooltip {padding-left: 2px}
.tip .box_tooltip.center {right: calc(50% - 134px)}

#metalSelect .card_wrap, #designForm .card_wrap{height:184px;min-height: 184px;width:508px;margin-top: 40px;}
#metalSelect .card_wrap .controls, #designForm .card_wrap .controls{width: 508px;z-index: 2;left:auto;top:50%;margin-top: -28px;}
#metalSelect .card_wrap .list, #designForm .card_wrap .list{width:322px;padding:0}
#metalSelect .card_wrap .items, #designForm .card_wrap .items{width:58px;min-width:58px;}
#metalSelect .card_wrap .items .img img, #designForm .card_wrap .items .img img{width:115px;transform: scale(.51);box-shadow: none;}
#metalSelect .card_wrap .list .active, #designForm .card_wrap .list .active{width:115px!important;min-width:115px; display: flex;justify-content: center;align-items: center;}
#metalSelect .card_wrap .list .active .img img, #designForm .card_wrap .list .active .img img{width: 115px;transform: scale(1)}
#metalSelect .card_wrap + .card_detail, #designForm .card_wrap + .card_detail{margin-top:40px}

.sub_card .list02 li.designLi a {display: flex;align-items: center;margin: -8px 0;background-position: 100% 50%;}
.sub_card .list02 li.designLi a span:first-of-type {margin-right: 8px}

/* gs_p00_01 gs_p00_06  */
.gpcc_simple .card_wrap.new_card_sel .list{padding-top:40px}
.gpcc_simple .card_wrap.new_card_sel .controls{top:208px}

/* gs_p01_01 */
#popAgreeTerm0_0 .layer_head{padding-bottom:40px}
#popAgreeTerm0_0 .layer_head.fixed{padding-bottom:22px}

/* 메탈 플레이트 디자인 팝업 */
#metalSelect.modal_pop .box_content, #designForm.modal_pop .box_content{padding-top:0}

.gpcc_simple [class^="radio_box"] > li input:checked + label { color:#000}

.gpcc_simple .bul_list03 li{color:rgba(0,0,0,0.64); }

.box_select.h48 #licenseArea + .select_wrap a{padding-left:20px; font-size:16px;color:#000}

/* 2025-06-10 Q11870 #1014 */
.min_Hauto{min-height: auto!important;}
.gpcc_simple .sub_card .box_select.h64{border:none;border-bottom:solid 1px rgba(0,0,0,0.12);border-radius: 0;}
.gpcc_simple .sub_card .box_select.h64 .select_wrap .btn_select{padding-left:0;color:rgba(0,0,0,0.64)}
.gpcc_simple .custom_mix .select_wrap .btn_select:after{right:0}
.gpcc_simple .custom_mix .input_dash_box .input_cell{width:135px}
.gpcc_simple .custom_mix .input_dash_box .input_cell:last-child{width: calc( 100%  - 135px);}
.gpcc_simple .custom_mix .input_dash_box .input_cell:last-child input{padding-left:14px;padding-top:25px; background-position: 16px 28px;}
.gpcc_simple .custom_mix .input_dash_box .input_cell + .input_cell:before{background-color:rgba(0,0,0,0.64) ;}

/* 2025-06-19 Q11870 #1025 */
.check_wrap .box_chk02 .check_input + .check_label:before{top:2px}

/* 2025-07-11 Q11812 #1065_GPCC 2차 간소화 요청의 건 : 플레이트 디자인 선택 가로형 */
#metalSelect .card_wrap .list .active .img.horizon img, #designForm .card_wrap .list .active .img.horizon img{width: 182px;transform: scale(1)}

/* 2025-07-28 Q11811 1118_GPCC_간소화 2차_아멕스 케이스 추가 */
#metalSelect .card_wrap.horizon, #designForm .card_wrap.horizon{align-items: center}
#metalSelect .card_wrap.horizon .con, #designForm .card_wrap.horizon .con{align-items: center}