@charset "utf-8";
/* 공통 */
.sub-pd { padding: 120px 0;}
.sub-pd.pb { padding-top: 0; padding-bottom: 120px; }
.sub-pd.pt { padding-bottom: 0; padding-top: 120px; }
.sub-pd.pt2 { padding-top: 150px; }
.sub-pd.clr { background: #f8fafd; }
.subtit { font-size: 32px; font-weight: 300; color: #121212; letter-spacing: -.03em; line-height: 1.3em; margin-bottom: 20px; }
.subtit span { font-weight: 600; }
.subtit.tc { text-align: center; }
.sub-pd .subtit { margin-bottom: 38px; }
.sub-con { padding: 0 50px;}

/* 보나페이 */
.gt { display: flex; align-items: flex-start;}
.gt .left { width: 50%; padding-right: 40px; padding-top: 50px; }
.gt .left h2 { font-size: 56px; color: #121212; line-height: 1.2em; margin-bottom: 42px; letter-spacing: -.03em; font-weight: 700; }
.gt .left h2 span { background: linear-gradient(to right,#66b4e5, #2b6bb4 40%); -webkit-background-clip: text;  -webkit-text-fill-color: transparent; color: transparent;}
.gt .left p { font-size: 24px; line-height: 1.5em; letter-spacing: -.03em; margin-bottom: 15px; font-weight: 300; }
.gt .left p:last-child { margin-bottom: 0; }
.gt .right { width: 50%; }

/* sub2 공통 */
.sub2-tit { text-align: center; font-size: 26px; line-height: 1.556em; letter-spacing: -.03em; margin-bottom: 110px; font-weight: 300; }
.op-list { display: flex; flex-wrap: wrap; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.op-list li { width: calc(100%/3 - 8px); position: relative; border-radius: 8px; overflow: hidden; text-align: center; padding: 20px 30px; display: flex; text-align: left; }
.op-list li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd; border-radius: 8px; }
.op-list li .icon { width: 104px; }
.op-list li .txtbox { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 50px; padding-top: 7px; }
.op-list li .txtbox .tit { color: #121212; font-size: 20px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 5px; line-height: 1em; }
.op-list li .txtbox .num { font-size: 18px;}
.gray-txt { font-size: 14px; display: none; margin-bottom: 15px; color: #767676; font-weight: 700; letter-spacing: -.03em;}

/* 제품 탭 */
.pd-tab-wrap { background: #fff; position: sticky; top: 100px; z-index: 100; margin-bottom: 80px; width: 100%; }
.pd-tab { border-bottom: 1px solid #ddd;}
.pd-tab ul {display:flex;}
.pd-tab ul li { text-align:center; width: auto; margin-right: 50px; }
.pd-tab ul li:last-child { margin-right: 0; }
.pd-tab ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:70px; padding:0 10px; color:#cccccc; font-size:20px; font-weight:700; line-height:1.2em; letter-spacing:-.03em; position: relative; }
.pd-tab ul li a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: #2b6bb4; transition: .3s;}
.pd-tab ul li.active a {color:#121212;}
.pd-tab ul li.active a::after { width: 100%; }
.pd-tab ul li:hover a { color: #121212; }
.pd-tab ul li:hover a::after { width: 100%; }

/* 제품 리스트 */
.pd-tr { text-align: right; margin-bottom: 20px; }
.pd-tr p { display: inline-block; padding-left: 28px; position: relative; }
.pd-tr p::before { content: ""; position: absolute; left: 0; width: 20px; height: 20px; background: url(../images/sub/noti-icon.png) center no-repeat; background-size: contain; top: 2px; }
.pd-tr h4 { color: #999; font-weight: 700; font-size: 14px; padding-right: 25px;}
.pd-wrap .pd-group { padding: 125px 0;}
.pd-wrap .pd-group:last-child { padding-bottom: 0; }
.pd-wrap .pd-group:first-child { padding-top: 0; }
.pd-wrap .pd-group h2 { font-size: 40px; line-height: 1em; margin-bottom: 30px; font-weight: 600; color: #121212; }
.product-list ul {display:flex; flex-wrap:wrap; gap:40px; position: relative; }
.product-list ul li {width: calc(100%/4 - 30px); text-align:center; border-radius: 24px; overflow: visible; box-shadow: 0 10px 40px rgba(0,0,0,.08); position: relative; z-index: 1;}
.product-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.product-list ul li a {display:block;}
.product-list ul li .btns {display:flex; background: #000; color: #fff; }
.product-list ul li .btns a { width: calc(100%/2); position: relative; height: 50px; display: flex; align-items: center; justify-content: center; line-height: 1em; text-align: center; font-weight: 700; font-size: 16px; letter-spacing: -.03em; color: rgba(255,255,255,0.7); }
.product-list ul li .btns a:hover { color: #fff; }
.product-list ul li .btns a:last-child::before { content: ""; position: absolute; left: 0; width: 1px; height: 24px; top: 0; bottom: 0; margin: auto; background: rgba(255,255,255,0.3);}
.product-list ul li .flip { width: 100%; position: relative; transform-style: preserve-3d; transform: rotateY(0); transition: transform .5s; padding-bottom: 85%; perspective: 1000px;}
.product-list ul li .front { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; z-index: 2;}
.product-list ul li .flip .back { transform: rotateY(180deg); width: 100%; height: 100%; background: rgba(0,0,0,.9); position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: left; padding: 50px 30px; z-index: 1;}
.product-list ul li .flip-wrap { position: relative; cursor: pointer; border-radius: 24px 24px 0 0; overflow: visible; z-index: 1; }
.product-list ul li .flip-wrap:hover { z-index: 10; }
.product-list ul li .flip-wrap.active { z-index: 10; overflow: visible; }
.product-list ul li .flip-wrap.active .flip { transform: rotateY(-180deg);}
.product-list ul li .tit { font-size: 24px; font-weight: 700; color: #fff; line-height: 1.2em; letter-spacing: -.03em; margin-bottom: 10px; }
.product-list ul li .txtbox span { display: block; position: relative; padding-left: 12px; font-size: 14px; color: #fff; }
.product-list ul li .txtbox span::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 4px; background: #fff; }
.product-list ul li .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.product-list ul li .pd-btn-view { position: absolute; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 100%; background: rgba(0,0,0,0.2) url(../images/sub/pd-view.png) center no-repeat; text-indent: -9999em; background-size: 18px; z-index: 10; cursor: pointer; pointer-events: auto; }

/* 파트너 제휴 - 소개 */
.pt-list { display: flex; flex-wrap: wrap; margin: 60px 0;}
.pt-list li { width: calc(100%/3); text-align: center; }
.pt-list li .chk { width: 100px; height: 32px; border-radius: 16px; margin: 30px auto 15px; background: linear-gradient(to right,#66b4e5, #2b6bb4 80%); color: #fff; display: flex; align-items: center; justify-content: center; line-height: 1em; font-weight: 500; letter-spacing: -.03em; }
.pt-list li .tit { font-size: 24px; font-weight: 300; line-height: 1.5em; color: #121212; }
.pt-btn { width: 260px; height: 60px; border-radius: 8px; background: #2b6bb4; color: #fff; line-height: 1em; margin: auto; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; letter-spacing: -.03em;}

/* 공통 폼 */
.ct-form { max-width: 720px; width: 100%; margin: 50px auto 0; }
.required-txtwrap { text-align: right; }
.required-txt { display: inline-flex; justify-content: flex-end; font-size: 14px; position: relative; color: #878787; padding-left: 9px; }
.required-txt::before { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 5px; background: #2b6bb4; left: 0; top: 10px; }
.ct-form dl { margin-bottom: 40px; }
.ct-form dl dt { display: inline-block; margin-bottom: 10px; line-height: 1em; font-size: 18px; font-weight: 600; color: #121212; position: relative; }
.ct-form dl dt.required::after { content: ""; position: absolute; right: -10px; top: -3px; width: 5px; height: 5px;border-radius: 5px; background: #2b6bb4; }
.ct-form dl dd { width: 100%; }
.ct-form dl dd .input { height: 60px; border-radius: 8px; }

/* sub5 공통 */
.sub5-list { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;}
.sub5-list li { width: 200px; height: 200px; text-align: center; color: #fff; position: relative; background: #66b4e5; border-radius: 100%; padding-top: 45px; }
.sub5-list li::after { content: ""; position: absolute; right: -26px; top: 0; bottom: 0; margin: auto; width: 12px; height: 18px; background: url(../images/sub/sub5-1-right.png) center no-repeat; background-size: contain; }
.sub5-list li:last-child::after { display: none; }
.sub5-list li .step { line-height: 1em; font-size: 14px; font-weight: 500; letter-spacing: -.03em; margin: 20px 0 6px;}
.sub5-list li .tit { font-size: 18px; font-weight: 700; line-height: 1.2em; letter-spacing: -.03em; }
.sub5-list li.bg2 { background: #4fa9e6;}
.sub5-list li.bg3 { background: #1a8bdb;}
.sub5-list li.bg4 { background: #237ac9;}
.sub5-list li.bg5 { background: #2b6bb4;}
.sub5-list.list2 li { background: #5abc84;}
.sub5-list.list2 li.bg2 { background: #4ba672;}
.sub5-list.list2 li.bg3 { background: #3d9161;}
.sub5-list.list2 li.bg4 { background: #297549;}
.sub5-list.list2 li.bg5 { background: #145530;}
.sub5-list.list2 li.bg6 { background: #013b1a;}
.sub5-tbl-wrap { overflow: auto;}
.sub5-tbl { border-collapse: collapse; width: 100%; }
.sub5-tbl tr { border-bottom: 1px solid #ddd;}
.sub5-tbl tr th { border-right: 1px solid #ddd; background: #2b6bb4; color: #fff; font-size: 18px; line-height: 1em; letter-spacing: -.03em; padding: 18px 10px; }
.sub5-tbl.clr tr th { background: #5abc84;}
.sub5-tbl tr th:last-child { border-right: none; }
.sub5-tbl tr td { border-right: 1px solid #ddd; color: #505050; font-size: 18px; padding: 14px 10px; text-align: left; padding-left: 30px; line-height: 2em; }
.sub5-tbl tr td:last-child { border-right: none; }
.sub5-tbl tr td.fw { text-align: center; padding: 15px 10px; background: #f4f4f4; font-weight: 700; color: #121212; }
.sub5-tbl tr td span { display: block; position: relative; margin: 7px 0; font-size: 14px; line-height: 1.5em; padding-left: 9px; margin-left: 20px;}
.sub5-tbl tr td span::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 1px; background: #505050; }
.sub5-col { display: flex; margin-bottom: 25px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;}
.sub5-col .col { width: calc(100%/2 - 10px); text-align: center; color: #fff; padding: 20px 10px 16px; border-radius: 16px; background: #66b4e5; }
.sub5-col .col.bg2 { background: #2b6bb4; }
.sub5-col .col.bg3 { background: #ec1b1b; }
.sub5-col .col .tit { line-height: 1em; font-size: 18px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 12px; }
.sub5-col .col .tit.mg { margin-bottom: 0; }
.sub5-col .col .txt { font-size: 16px; }
.sub5-txtbox { margin-bottom: 25px; }
.sub5-txtbox p { position: relative; line-height: 2em; padding-left: 15px; font-size: 16px; }
.sub5-txtbox p::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 5px; height: 5px; border-radius: 5px; background: #cccccc; }
.sub5-subtit { font-size: 18px; line-height: 2em; margin-bottom: 12px;}
.sub5-subtit strong { display: block; font-weight: 700; color: #2b6bb4; }
.sub5-clrtxt { font-size: 18px; line-height: 1.4em; margin-top: 15px; color: #2b6bb4; font-weight: 600; }
.sub5-imgwrap { text-align: center; }
.sub5-imgwrap.w1300 { max-width: 1300px; margin: 0 auto; }
.sub5-imgwrap::-webkit-scrollbar { width: 6px;}
.sub5-imgwrap::-webkit-scrollbar-track { background-color: transparent;}
.sub5-imgwrap::-webkit-scrollbar-thumb {  background-color: #ddd;}
.sub5-imgwrap::-webkit-scrollbar-button { display: none;}

/* 자주묻는질문 */
.faq-tab {display:flex; gap:10px; margin-bottom: 50px; flex-wrap: wrap;}
.faq-tab li { width: auto;}
.faq-tab li a { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 20px; font-weight: 600; letter-spacing: -.03em; line-height: 1em; text-align: center; background: #f4f4f4; white-space: nowrap; padding: 0 30px; }
.faq-tab li a:hover { background: #2b6bb4; color: #fff; }
.faq-tab li.active a { background: #2b6bb4; color: #fff; }
.faq-txt { display: inline-block; font-size: 14px; margin-bottom: 15px; position: relative; padding-left: 22px; }
.faq-txt::before { content: ""; position: absolute; left: 0; width: 16px; height: 16px; background: url(../images/sub/faq-van.png) center no-repeat; background-size: contain; top: 5px;}