html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; word-break: keep-all; } table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-size: 100%; font: inherit; vertical-align: baseline; word-break: keep-all; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } @font-face { font-family: "Apple SD Gothic Neo"; font-style: normal; src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeoL"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoL.eot"); src: url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoL.eot?#iefix") format("embedded-opentype"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoL.woff2") format("woff2"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoL.woff") format("woff"); } @font-face { font-family: "AppleSDGothicNeoR"; font-style: normal; src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeoR"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoR.eot"); src: url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoR.eot?#iefix") format("embedded-opentype"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoR.woff2") format("woff2"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoR.woff") format("woff"); } @font-face { font-family: "Apple SD Gothic Neo"; font-style: normal; src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeoH"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoH.eot"); src: url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoH.eot?#iefix") format("embedded-opentype"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoH.woff2") format("woff2"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoH.woff") format("woff"); } @font-face { font-family: "Apple SD Gothic Neo"; font-style: normal; src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeoB"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoB.eot"); src: url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoB.eot?#iefix") format("embedded-opentype"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoB.woff2") format("woff2"), url("/Content/Event/BiCycle_261007/font/apple/AppleSDGothicNeoB.woff") format("woff"); } fieldset, img { border: 0 none; vertical-align: top; } img { image-rendering: -webkit-optimize-contrast; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { width: 100%; text-align: left; } button:focus, button:active { padding: 0; } input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button { padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } a { text-decoration: none; cursor: pointer; color: #363636; } a:link, a:visited, a:hover, a:active { text-decoration: none; } caption { overflow: hidden; width: 1px; height: 1px; font-size: 20px; line-height: 1px; margin-top: -1px; } select, input, button, textarea { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-color: transparent; border: 0 none; font-size: 15px; font-weight: 400; font-family: "Apple SD Gothic Neo", sans-serif; } select[type="checkbox"], input[type="checkbox"], button[type="checkbox"], textarea[type="checkbox"] { -webkit-appearance: checkbox; } select[type="radio"], input[type="radio"], button[type="radio"], textarea[type="radio"] { -webkit-appearance: radio; } select::-ms-expand, input::-ms-expand, button::-ms-expand, textarea::-ms-expand { display: none; } textarea { overflow-y: scroll; -webkit-overflow-scrolling: touch; } html, body { font-family: "AppleSDGothicNeoR"; font-size: 15px; font-weight: 400; color: #363636; } strong, h1, h2, h3, h4, h5, h6 { font-weight: 400; } label, button { cursor: pointer; overflow: hidden; } a:focus, input:focus { outline: 1px dotted #222; } ::-webkit-input-placeholder { color: #bbbbbb; } ::-moz-placeholder { color: #bbbbbb; } :-ms-input-placeholder { color: #bbbbbb; } :-moz-placeholder { color: #bbbbbb; } .loading-wrap { position: fixed; top: 0; left: 0; z-index: 1555555555555555; width: 100%; height: 100%; background: #141414; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; } html { overflow-y: scroll; height: 100%; } html.no-scroll { overflow: hidden; padding-right: 17px; } body { height: 100%; } button { padding: 0; } button span { position: relative; } * { -webkit-tap-highlight-color: transparent; } select, input, a, button { outline: none !important; } body { background: #fff; } .hans { font-family: "Spoqa Han Sans Neo", "sans-serif" !important; } #wrap.main { /* max-width:1200px; 2026-06-12 삭제 */ margin: 0 auto; height: auto !important; padding-top:100px; } #content .content-outer .content-inner { position: relative; } #content .content-outer .content-inner .sec { position: relative; } #content .content-outer .content-inner .sec .event-share{ position: absolute; top:740px; left:50%; transform:translate(-50%, 0); width:434px; height:80px; border-radius:40px; z-index: 101; text-indent: -9999px; overflow: hidden; } #content .content-outer .content-inner .sec .kakao-share{ position: absolute; top:836px; left:50%; transform:translate(-50%, 0); width:434px; height:80px; border-radius:40px; z-index: 101; text-indent: -9999px; overflow: hidden; } #content .content-outer .content-inner .sec img { width: 100%; display: block; /* margin-top: 125px; 2023-08-03 삭제 */ } #content .content-outer .content-inner .sec .flt { position: absolute; left: 50%; transform: translate(-50%, 0); top: 250px; width: 1026px; } #content .content-outer .content-inner .hard-outer { height: auto; box-sizing: border-box; background: #f8f8f8; padding: 137px 17px 0; } #content .content-outer .content-inner .hard-outer .title{ text-align: center; margin-bottom: -30px; } #content .content-outer .content-inner .hard-outer .hard-inner { padding-top: 43px; } #content .content-outer .content-inner .hard-outer .hard-inner .tit { text-align: center; font-family: "Apple SD Gothic Neo"; font-weight: 900; } #content .content-outer .content-inner .hard-outer .hard-inner dl.mt30 { margin-top: 81px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dt { font-size:40px; font-family: "Apple SD Gothic Neo"; color: #2d56a2; font-weight: 900; padding-left:30px; position: relative; } #content .content-outer .content-inner .hard-outer .hard-inner dl dt:before { position: absolute; left: 0; top: 2px; width:18px; height:18px; content: ""; background: url("/images/event/BiCycle_261007/common/bullet.png") no-repeat; background-size: cover; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd { margin-top: 30px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio { font-size: 0; height: 72px; line-height: 72px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span { display: inline-block; height: auto; /* 2023-08-29 2차 수정 */ vertical-align: middle; margin-left:57px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio.block-tp{ height: auto; text-align: left; /* 2023-08-03 추가 */ } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio.block-tp span{ display:block; margin-left: 0; margin-top: 30px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio.block-tp span:first-child{ margin-top: 0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span:first-child { margin-left: 0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="radio"], #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="checkbox"]{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="checkbox"] + label { display: inline-block; vertical-align: top; position: relative; left: 0; height: auto; /* 2023-08-29 2차 수정 */ line-height: 52px; cursor: pointer; font-size:36px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding-left: 63px; color: #898989; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="radio"] + label{ display: inline-block; vertical-align: top; position: relative; left: 0; height: auto; /* 2023-08-29 2차 수정 */ line-height: 52px; cursor: pointer; font-size:33px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding-left: 63px; color: #898989; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="radio"] + label:active:before, #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="radio"]:checked + label:active:before, #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="checkbox"] + label:active:before, #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1); } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .agree-docu { border: 1px solid #bbbbbb; margin-top:54px; box-sizing: border-box; background-color: #fff; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .agree-docu a { display: block; font-size: 33px; color: #000000; height:110px; line-height:110px; padding: 0 33px; position: relative; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .agree-docu p { font-size: 30px; color: #777; padding: 47px 40px; line-height: 43px; box-sizing: border-box; letter-spacing: -1.5px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table { table-layout: fixed; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table th em { font-size: 9px; position: relative; top: -2px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td { vertical-align: middle; padding: 14px 0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td input { height: 72px; background-color: #ececec; font-size:33px; color: #898989; box-sizing: border-box; padding: 0 21px; font-family: "Apple SD Gothic Neo"; font-weight: 300; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td input::placeholder { font-size: 11px; color: #898989; font-weight: 400; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td select { width: 100%; height: 72px; background-color: transparent; font-size:33px; color: #898989; box-sizing: border-box; padding: 4px 21px 0; font-family: "AppleSDGothicNeoR"; border:1px solid #d9d9d9; position: relative; z-index: 1; background-image:none; ; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .textarea{ margin-top: 15px; padding-left: 64px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .textarea textarea{ height: 200px; border:0 !important; background-color: #ececec; overflow: hidden; font-size: 33px; color: #000; font-family:"AppleSDGothicNeoR"; padding:15px 21px; width: 100% !important; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .textarea textarea::placeholder{ font-size: 33px !important;color: #898989; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .input input { width: 100%; border:0; font-family: "AppleSDGothicNeoR"; color: #000; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .add .input input { width: 100%; border:0; font-family: "AppleSDGothicNeoR"; color: #000; } /* 2023-08-29 추가 : 시작 */ #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .add .input{margin-top: 17px;} #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .add .input:first-child{margin-top:0;} #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .add .input.bt-tp{ padding-right: 260px; position: relative; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .add .input.bt-tp button{ position: absolute; right:0; top:0; padding:15px 0 11px; background-color: #32539c; width: 230px; font-size: 33px; color: #fff; } /* 2023-08-29 추가 : 끝 */ #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .busi-num{ font-size: 0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .busi-num input{ width:233px; border:0 !important; font-family: "AppleSDGothicNeoR"; color: #000; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .busi-num .bar{ width:27px; text-align: center; display:inline-block; line-height: 72px; font-size: 33px; color: #888888; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel { font-size: 0; position: relative; padding-left:390px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel .sel{ position: absolute; left:0; top:0; width: 363px;background-color: #fff; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel .sel:after{ position: absolute; right:24px; top:50%; margin-top: -8px; width:28px; height: 16px; content:""; background: url("/images/event/BiCycle_261007/common/sel_arrow.png") no-repeat; background-size: cover; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel input { color: #000 !important; display: inline-block; width: 100%; height: 72px; background-color: #ececec; font-size: 33px; color: #898989; box-sizing: border-box; padding: 0 21px; font-family: "AppleSDGothicNeoR"; border:0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel span { display: inline-block; font-size: 33px; width: 54px; height: 72px; line-height: 72px; text-align: center; color: #898989; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel2 { font-size: 0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel2 select { width: 30%; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel2 input { display: inline-block; width: 65%; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel2 span { display: inline-block; font-size: 33px; width: 54px; height: 72px; line-height: 72px; text-align: center; color: #898989; } #content .content-outer .content-inner .hard-outer .hard-inner .com-bt { text-align: center; margin-top: 31px; } #content .content-outer .part-bt { bottom: 7px; left: 50%; transform: translate(-50%, 0); width: 100%; margin: 0 auto; z-index: 100; height: 54px; position: fixed; text-align: right; padding-right: 7px; box-sizing: border-box; } @media (min-width: 540px) { #content .content-outer .content-inner { position: relative; } #content .content-outer .content-inner .sec { position: relative; } #content .content-outer .content-inner .sec .video-outer { position: absolute; left:0; width: 100%; top:71.01%; padding:0 12.3%; } #content .content-outer .content-inner .sec .video { position: relative; padding-bottom:56.25%; } #content .content-outer .content-inner .sec .video iframe { position:absolute; top:0; left:0; width:100%; height:100%; } #content .content-outer .content-inner .sec img { width: 100%; display: block; } #content .content-outer .content-inner .sec .flt { position: absolute; left: 50%; transform: translate(-50%, 0); top: 250px; width: 1026px; } #content .content-outer .content-inner .hard-outer { position: relative; height: 2289px; box-sizing: border-box; background: #f8f8f8; padding: 0 50px; } #content .content-outer .content-inner .hard-outer .hard-inner { padding-top: 109px; } #content .content-outer .content-inner .hard-outer .hard-inner .tit { text-align: center; font-family: "Apple SD Gothic Neo"; font-weight: 900; } #content .content-outer .content-inner .hard-outer .hard-inner dl.mt30 { margin-top:81px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dt { font-size: 40px; font-family: "Apple SD Gothic Neo"; color: #32539c; font-weight: 900; padding-left:30px; position: relative; letter-spacing:-1px ; } #content .content-outer .content-inner .hard-outer .hard-inner dl dt:before { position: absolute; left: 0; top:23px; width: 18px; height: 18px; content: ""; background: url("/images/event/BiCycle_261007/common/bullet.png") no-repeat; background-size: cover; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd { margin-top: -2px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd.mt5{margin-top: 5px;} #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="radio"], #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="radio"] + label:after, #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="checkbox"] + label:after { content: ""; position: absolute; top: 0; left: 0; width:46px; height:46px; background: url("/images/event/BiCycle_261007/common/chk_d.gif") no-repeat; background-size: cover; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="radio"] + label:active:before, #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="radio"]:checked + label:active:before, #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="checkbox"] + label:active:before, #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1); } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="radio"]:checked + label:after, #content .content-outer .content-inner .hard-outer .hard-inner dl dd .radio span input[type="checkbox"]:checked + label:after { content: ""; position: absolute; top: 0; left: 0; width:46px; height:46px; background: url("/images/event/BiCycle_261007/common/chk_a.gif") no-repeat; background-size: cover; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .agree-docu { border: 1px solid #bbbbbb; margin-top:25px; box-sizing: border-box; background-color: #fff; margin-bottom:18px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .agree-docu a { display: block; font-size: 33px; color: #000000; height: 110px; line-height:110px; padding: 0 33px; position: relative; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd .bot-noti{color: #999; font-size: 33px; line-height: 24px; margin-top: 25px; padding-bottom: 37px;} #content .content-outer .content-inner .hard-outer .hard-inner dl dd .bot-noti span{display:block; color: #999; font-size: 33px; padding-left: 12px;} #content .content-outer .content-inner .hard-outer .hard-inner dl dd .mid-noti{color: #999; font-size: 33px; line-height: 42px; text-indent: -12px; padding-left: 12px; margin-bottom: 27px; margin-top: 15px;} #content .content-outer .content-inner .hard-outer .hard-inner dl dd table { table-layout: fixed; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table th em { font-size: 18px; position: relative; top: -14px; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td input::placeholder { font-size: 33px; color: #898989; font-weight: 400; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .input input::placeholder{ color: #898989 !important; font-weight: 100 !important; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel2 { font-size: 0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel2 select { width: 30%; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel2 input { display: inline-block; width: 65%; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .tel2 span { display: inline-block; font-size: 33px; width: 5%; text-align: center; } #content .content-outer .content-inner .hard-outer .hard-inner .com-bt { text-align: center; margin-top:127px; } #content .content-outer .part-bt { top:65%; left: 50%; transform: translate(378px, -50%); width: 162px; margin: 0 auto; z-index: 100; height: 162px; position: fixed; text-align: right; padding-right: 21px; box-sizing: border-box; } } .end-unit{position: absolute; left:0; top:0; width:100%; height: 100%; display:none;;} .end-unit:before{position: absolute; left:0; top:0; width:100%; height: 100%; content:""; background: #383838; opacity:.9;} .end-unit img{position: absolute; left:0; top:50%; width:100%; height: auto; transform:translate(0, -50%);} .fixed-banner {position: fixed; left:50%; bottom:0; width:1120px;transform:translate(-50%, 0); display:none;; } .fixed-banner.po-re {position: relative;} .fixed-banner > img{display:block; width:100%;} .fixed-banner a{position: absolute; right:49px; top:50%; transform:translate(0, -50%);} input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .b-input{padding-right: 267px; position: relative;} #content .content-outer .content-inner .hard-outer .hard-inner dl dd table td .b-input a{position: absolute; right:0; top:0; width: 248px; height: 72px; line-height: 72px; text-align: center; background-color: #2d56a2; font-size: 33px; color: #ffffff; font-family: "Apple SD Gothic Neo"; font-weight: 700;} #content .content-outer .content-inner .hard-outer .hard-inner dl dd table th { font-family: "Apple SD Gothic Neo"; font-size: 36px; vertical-align:middle; font-weight: 700; position: relative; line-height: 49px; text-align: left; /* 2023-08-03 추가 */ padding:29px 0 0; /* 2023-08-29 추가 */ vertical-align:top; /* 2023-08-29 추가 */ } #content .content-outer .content-inner .hard-outer .hard-inner dl dd table th.top-tp{ vertical-align: top; padding-top: 18px; } #content .content-outer .content-inner .hard-outer { position: relative; height: auto; box-sizing: border-box; background: #fbfbfb; padding: 137px 60px 100px 60px; } @media (max-width: 540px) { #content .content-outer .content-inner .sec #video { position: absolute; left: 50%; transform: translate(-50%, 0); top: 293px; width:1026px; height:590px; border: 12px solid #70b7ee; } } @media (max-width: 1120px) { #content .content-outer .content-inner .sec #video{ top:26.2vw; width:89.5vw; height:50.4vw; } } #tabArea{position: absolute; top:2232px; height: 180px; width: 1200px; background: url("/images/event/BiCycle_261007/common/tab_bg.jpg") no-repeat; background-size: cover; z-index: 1;} #tabArea ul{font-size: 0;} #tabArea ul li{display:inline-block; width:calc(100% / 3)} #tabArea ul li a{display:inline-block; width: 100%; height: 180px; text-indent: -9999px; overflow: hidden;} #tabArea ul li:nth-child(1) a:hover{background: url("/images/event/BiCycle_261007/common/tab1_over.jpg") no-repeat; background-size: cover;} #tabArea ul li:nth-child(2) a:hover{background: url("/images/event/BiCycle_261007/common/tab2_over.jpg") no-repeat; background-size: cover;} #tabArea ul li:nth-child(3) a:hover{background: url("/images/event/BiCycle_261007/common/tab3_over.jpg") no-repeat; background-size: cover;} /* 바이사이클 캠페인 관련 */ /* bi-sec1 */ .bi-sec1 { position: relative; width: 100%; height: 100vh; min-height: 700px; /* margin-top: -101px; */ background: url('/images/event/BiCycle_261007/bg/bi_sec1_bg.png') no-repeat center / cover; overflow: hidden; } .bi-sec1_inner { position: relative; max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 40px; box-sizing: border-box; } .bi-sec1_content { /* position: absolute; right: 40px; top: 50%; transform: translateY(-50%); text-align: left; */ } .bi-sec1_sub { font-size: 30px; line-height: 35px; color: #006951; font-family: "SD Psyche"; position: absolute; top: 135px; right: 0; } .bi-sec1_tit1 { position: absolute; left: 380px; top: 100px; font-size: 226px; letter-spacing: -23px; line-height: 211px; color: #006951; font-family: "SD Psyche"; } .bi-sec1_tit2 { position: absolute; left: 640px; top: 330px; font-size: 226px; letter-spacing: -23px; line-height: 211px; color: #006951; font-family: "SD Psyche"; } .bi-sec1_scroll { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; } /* bi-sec2 */ body { overflow-x: hidden; } .bi-sec2 { position: relative; background-color: #087859; padding: 190px 0 235px; text-align: center; box-sizing: border-box; } .bi-sec2 .sec2_inner { max-width: 1200px; margin: 0 auto; padding: 0; } .bi-sec2 .sec2_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #fff; font-family: "SD Psyche"; margin: 0 0 15px; } .bi-sec2 .sec2_desc { font-size: 32px; letter-spacing: -1px; line-height: 54px; color: #ffffff; text-align: center; margin: 0 0 80px; } .bi-sec2 .sec2_btn_wrap { display: flex; justify-content: center; gap: 20px; } .bi-sec2 .sec2_btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 590px; height: 196px; border-radius: 35px; background-color: #ffffff; font-size: 42px; line-height: 60px; text-transform: uppercase; color: #087859; font-weight: bold; text-align: center; text-decoration: none; transition: background-color 0.3s ease; } .bi-sec2 .sec2_btn:hover { background-color: #C0D9CE; color: #1B7A52; text-decoration: none; } /* bi-sec3 */ /* GNB(스크롤 시 60px) 아래 영역을 정확히 채워, 스크롤 잠금 중 다음 섹션이 보이지 않게 한다 */ .bi-sec3 { background: url('/images/event/BiCycle_261007/bg/bi_sec3_bg.png') no-repeat center / cover; padding: 200px 0; text-align: center; box-sizing: border-box; min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; --sec3-travel: 120px; --sec3-out-scale: 1.50; } .bi-sec3_inner { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; min-height: 432px; } /* 아이템이 같은 자리(박스 상하 중앙)에서 겹쳐 재생되는 스테이지 */ .bi-sec3_list { list-style: none; padding: 0; margin: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* 진입 — 아래(+travel)에서 올라와 제자리에 선다. 퇴장 — 위로 빠지지 않고 제자리에서 순간 확대되며 사라진다(.is-out). 세 상태 모두 translateY() scale() 로 함수 순서를 맞춰야 브라우저가 매트릭스로 뭉개지 않고 각 성분을 따로 보간한다. 역방향은 클래스를 떼기만 하면 그대로 반대로 재생된다. 조절 값은 .bi-sec3 의 --sec3-travel(진입 거리) / --sec3-out-scale(퇴장 확대율) */ .bi-sec3_item { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 37px; opacity: 0; transform: translateY(var(--sec3-travel)) scale(1); transition: opacity 0.38s ease, transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1); } .bi-sec3_item.is-visible { opacity: 1; transform: translateY(0) scale(1); } .bi-sec3_item.is-out { opacity: 0; transform: translateY(0) scale(var(--sec3-out-scale)); transition: opacity 0.5s ease-in, transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1); } /* 좌측 아이콘 — 마크업을 건드리지 않고 ::before 로 넣는다. 텍스트가 바로 옆에 있어 장식 요소. 아이콘마다 원본 크기가 달라(50~63 x 52~62) 슬롯을 최대값으로 고정하고 가운데 정렬해야 4개 행의 배지 시작 위치가 어긋나지 않는다 */ /* margin-right 는 flex gap(37px) 을 아이콘 쪽에서만 깎는 값이다. 37 - 12 = 25. gap 은 모든 간격에 똑같이 적용되므로, 배지~텍스트는 37 로 두고 여기만 줄이려면 이 방법뿐이다. gap 값을 바꾸면 이 -12px 도 같이 손봐야 한다 */ .bi-sec3_item::before { content: ''; flex: 0 0 auto; width: 63px; height: 62px; margin-right: -12px; background-repeat: no-repeat; background-position: center; } .bi-sec3_item:nth-child(1)::before { background-image: url('/images/event/BiCycle_261007/icon/bi_sec3_ico1.png'); } .bi-sec3_item:nth-child(2)::before { background-image: url('/images/event/BiCycle_261007/icon/bi_sec3_ico2.png'); } .bi-sec3_item:nth-child(3)::before { background-image: url('/images/event/BiCycle_261007/icon/bi_sec3_ico3.png'); } .bi-sec3_item:nth-child(4)::before { background-image: url('/images/event/BiCycle_261007/icon/bi_sec3_ico4.png'); } /* 마지막(핸드타올)만 0.25s 늦게, 1.3s 로 천천히 등장한다. backwards 는 지연 구간 동안 0% 키프레임(투명 + 아래)을 유지시킨다. 이게 없으면 .is-visible 값이 먼저 먹어 아이템이 툭 나타났다가 애니메이션이 다시 시작한다. forwards 는 쓰지 않는다 — 종료 상태는 .is-visible 이 잡아주고(값 동일), fill 이 붙으면 역방향에서 클래스를 떼도 되감기지 않는다 */ .bi-sec3_item--last.is-visible { animation: biSec3RisePop 1.3s 0.25s backwards; } @keyframes biSec3RisePop { /* 올라오는 구간 — 끝에서 완전히 멈추지 않고 속도를 남긴 채 확대로 이어짐 */ 0% { opacity: 0; transform: translateY(var(--sec3-travel)) scale(1); animation-timing-function: cubic-bezier(0.25, 0.1, 0.65, 0.9); } 45% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.15, 0.6, 0.4, 1); } 72% { opacity: 1; transform: translateY(0) scale(1.1); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .bi-sec3_badge { display: inline-flex; align-items: center; padding: 4px 0 0 33px; box-sizing: border-box; position: relative; width: 182px; height: 56px; border-radius: 28px; background-color: #006952; } .bi-sec3_badge em { font-size: 31px; letter-spacing: -2px; line-height: 62px; color: #fafafa; display: inline-block; width: 100%; } .bi-sec3_badge.badge--green { background-color: #087859; } .bi-sec3_badge.badge--green::before { content: ''; position: absolute; top: 7px; left: 18px; width: 100%; height: 100%; background: url('/images/event/BiCycle_261007/icon/bi_sec3_chk1.png') no-repeat left top / auto; pointer-events: none; } .bi-sec3_badge.badge--red { background-color: #cc2200; } .bi-sec3_badge.badge--red::before { content: ''; position: absolute; top: 15px; left: 18px; width: 100%; height: 100%; background: url('/images/event/BiCycle_261007/icon/bi_sec3_chk2.png') no-repeat left top / auto; pointer-events: none; } .bi-sec3_result { font-size: 38px; letter-spacing: -3px; line-height: 1.5; color: #006952; font-family: "SD Psyche"; } .bi-sec3_result.result--green { color: #087859; } .bi-sec3_result.result--red { color: #cc2200; text-decoration: none; position: relative; display: inline-block; } .bi-sec3_result.result--red::after { content: ''; position: absolute; bottom: -8px; left: -5px; width: 205px; height: 13px; background: url('/images/event/BiCycle_261007/icon/bi_sec3_result_red_underline.png') no-repeat center bottom / auto; } /* 중앙 아이템 아래에 고정 배치 — 등장 전에도 레이아웃이 밀리지 않는다 */ .bi-sec3_caption { position: absolute; left: 0; top: 50%; margin-top: 88px; width: 100%; color: #282828; font-size: 28px; line-height: 55px; opacity: 0; transition: opacity 1s ease; } .bi-sec3_caption.is-visible { opacity: 1; } .bi-sec3_caption span { position: relative; font-size: 28px; line-height: 55px; } .bi-sec3_caption span em { position: relative; z-index: 1; font-size: 28px; line-height: 55px; color: #282828; text-align: center; font-weight: bold; } .bi-sec3_caption span:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 18px; background-color: #f1d7e3; } /* bi-sec4 */ .bi-sec4 { background-color: #cbe9e2; text-align: center; height: 800px; align-items: center; display: flex; } .bi-sec4_inner { max-width: 1200px; margin: 0 auto; } .bi-sec4_num { display: flex; align-items: flex-end; justify-content: center; gap: 8px; line-height: 1.5; margin: 0 0 -14px; font-size: 177px; letter-spacing: -5px; text-transform: uppercase; color: #006951; font-family: "SD Psyche"; text-align: center; } .bi-sec4_num-val { font-size: 177px; letter-spacing: -5px; text-transform: uppercase; color: #006951; font-family: "SD Psyche"; line-height: 1.5; } .bi-sec4_unit { padding-bottom: 44px; font-size: 56px; letter-spacing: -1px; line-height: 1.5; color: #006951; text-align: center; } .bi-sec4_tit { margin: 0 0 20px; font-size: 48px; letter-spacing: -1px; line-height: 54px; color: #006951; font-weight: bold; text-align: center; } .bi-sec4_desc { font-size: 28px; letter-spacing: -1px; line-height: 54px; color: #2c2c2c; text-align: center; } /* bi-sec5 */ .bi-sec5 { position: relative; background-color: #087859; align-items: center; display: flex; text-align: center; overflow: hidden; height: 800px; } .bi-sec5::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('/images/event/BiCycle_261007/bg/bi_sec5_bg.png') no-repeat center / auto; width: 100%; height: 100%; pointer-events: none; } .bi-sec5_inner { position: relative; max-width: 1200px; margin: 0 auto; z-index: 1; } .bi-sec5_tit { line-height: 1.5; margin: 0 0 9px; font-size: 124px; text-transform: uppercase; color: #f2accd; font-style: normal; font-weight: 700; font-family: "SD Psyche"; /* 261020 SD 프시케 Italic = 산돌 웹폰트 weight 700 */ text-align: center; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .bi-sec5_tit.is-visible { opacity: 1; transform: translateY(0); } .bi-sec5_desc { font-size: 28px; letter-spacing: -1px; line-height: 54px; color: #fafafa; text-align: center; } /* bi-sec6 */ .bi-sec6 { background-color: #f0efea; padding: 180px 40px 192px; text-align: center; } .bi-sec6_inner { max-width: 1200px; margin: 0 auto; } .bi-sec6_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 15px; } .bi-sec6_desc { font-size: 32px; letter-spacing: -1px; line-height: 54px; color: #2c2c2c; text-align: center; margin: 0 0 96px; } .bi-sec6_timeline { display: flex; justify-content: space-between; position: relative; max-width: 750px; margin: 0 auto; } .bi-sec6_timeline::before { content: ''; position: absolute; top: 25px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; background-color: #79aea2; z-index: 0; } .bi-sec6_step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; } .bi-sec6_dot-wrap { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; } @keyframes bi-sec6-evolve { 0% { opacity: 0.3; transform: scale(0.6); } 40% { opacity: 1; transform: scale(1.02); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0.3; transform: scale(0.6); } } .bi-sec6_dot { border-radius: 50%; opacity: 0.3; transform: scale(0.6); } .bi-sec6_dot.dot--sm { width: 32px; height: 32px; background-color: #cbe9e2; animation: bi-sec6-evolve 3s ease-in-out infinite 0s; } .bi-sec6_dot.dot--md { width: 40px; height: 40px; background-color: #006952; animation: bi-sec6-evolve 3s ease-in-out infinite 1s; } .bi-sec6_dot.dot--lg { width: 47px; height: 47px; background-color: #006952; box-shadow: 0 0 0 0 #cbe9e2, 0 0 0 9px #cbe9e2; animation: bi-sec6-evolve 3s ease-in-out infinite 2s; } .bi-sec6_year { font-size: 26px; line-height: 45px; text-transform: uppercase; color: #006951; font-weight: bold; text-align: center; } .bi-sec6_label { font-size: 20px; letter-spacing: 0px; line-height: 27px; text-transform: uppercase; color: #8a8a8a; text-align: center; margin-top: -5px; } /* bi-sec7 */ .bi-sec7 { background-color: #cbe9e2; padding: 165px 40px 193px; text-align: center; } .bi-sec7_inner { max-width: 1200px; margin: 0 auto; } .bi-sec7_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 70px; } .bi-sec7_list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 25px; text-align: left; } .bi-sec7_item { padding: 32px 40px 32px 73px; display: flex; align-items: center; gap: 59px; height: 233px; border-radius: 30px; filter: drop-shadow(1.782px 0.908px 10.5px rgba(35,102,87,0.08)); background-color: #ffffff; } .bi-sec7_icon { width: 108px; height: 108px; min-width: 108px; border-radius: 50%; background-color: #f0efea; display: flex; align-items: center; justify-content: center; } .bi-sec7_card-tit { font-size: 28px; line-height: 42px; text-transform: uppercase; color: #006951; font-weight: bold; } .bi-sec7_card-desc { font-size: 22px; line-height: 34px; color: #2c2c2c; margin-top: 14px; } /* bi-sec8 */ .bi-sec8 { background-color: #f9f9f9; padding: 130px 40px 227px; text-align: center; } .bi-sec8_inner { max-width: 1200px; margin: 0 auto; } .bi-sec8_eyebrow { font-size: 24px; line-height: 71px; color: #f2accd; font-weight: bold; margin: 0 0 -6px; } .bi-sec8_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 15px; } .bi-sec8_desc { font-size: 32px; letter-spacing: -1px; line-height: 54px; color: #2c2c2c; text-align: center; margin: 0 0 67px; } .bi-sec8_steps { display: flex; align-items: center; gap: 27px; } .bi-sec8_step { flex: 1; position: relative; padding: 52px 32px 44px; text-align: center; height: 294px; border-radius: 30px; filter: drop-shadow(5.785px 6.894px 15px rgba(249,249,249,0.4)); background-color: #ffffff; opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease, transform 0.6s ease; } .bi-sec8_step.is-visible { opacity: 1; transform: translateX(0); } .bi-sec8_step:first-of-type { z-index: 2; } .bi-sec8_step:nth-of-type(2) { z-index: 1; } .bi-sec8_step:not(:first-of-type)::before { content: ''; position: absolute; left: -84px; top: 50%; transform: translateY(-50%); width: 114px; height: 62px; background: url('/images/event/BiCycle_261007/icon/bi_sec8_step_arrow.png') no-repeat center / contain; } .bi-sec8_num { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 19px; filter: drop-shadow(5.785px 6.894px 15px rgba(249,249,249,0.4)); background-color: #087859; font-size: 24px; line-height: 49px; text-transform: uppercase; color: #ffffff; font-weight: bold; box-sizing: border-box; padding-top: 4px; } .bi-sec8_step-icon { margin: 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; } .bi-sec8_step-icon svg { width: 52px; height: 52px; } .bi-sec8_step-tit { font-size: 28px; line-height: 42px; text-transform: uppercase; color: #087859; font-weight: bold; margin-bottom: 12px; } .bi-sec8_step-desc { font-size: 18px; line-height: 29px; color: #2c2c2c; text-align: center; margin-top: 28px; } /* bi-sec9 */ .bi-sec9 { background-color: #cbe9e2; padding: 153px 40px 184px; text-align: center; } .bi-sec9_inner { max-width: 1200px; margin: 0 auto; } .bi-sec9_eyebrow { font-size: 24px; line-height: 71px; color: #f2accd; font-weight: bold; margin: 0 0 -6px; } .bi-sec9_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 45px; } .bi-sec9_cards { display: flex; gap: 36px; align-items: stretch; } .bi-sec9_card { flex: 1; background-color: #fff; border-radius: 20px; padding: 36px 50px 49px; text-align: left; display: flex; flex-direction: column; height: 435px; } .bi-sec9_card-icon { width: 52px; height: 52px; margin-bottom: 17px; } .bi-sec9_card-icon svg { width: 52px; height: 52px; } .bi-sec9_card-tit { font-size: 26px; line-height: 42px; text-transform: uppercase; color: #006951; font-weight: bold; } .bi-sec9_card-desc { flex: 1; font-size: 19px; line-height: 30px; color: #2c2c2c; margin-top: 6px; } .bi-sec9_card-tag { display: inline-block; padding: 5px 16px; align-self: flex-start; font-size: 17px; line-height: 29px; text-transform: uppercase; color: #087859; font-weight: bold; height: 34px; border-radius: 17px; background-color: #cbe9e2; } /* 실제 참여사 사례 */ .bi-sec9_cases { margin-top: 24px; } .bi-sec9_cases-tit { font-size: 28px; letter-spacing: -1px; line-height: 71px; color: #087859; font-weight: bold; text-align: center; margin: 0 0 0; } .bi-sec9_case-list { display: flex; gap: 36px; align-items: stretch; } .bi-sec9_case { flex: 1; } .bi-sec9_case img { width: 100%; display: block; } /* bi-sec11 */ .bi-sec11 { background-color: #006951; padding: 125px 60px 118px; text-align: center; position: relative; } .bi-sec11_inner { max-width: 1200px; margin: 0 auto; } .bi-sec11_eyebrow { font-size: 24px; line-height: 71px; color: #f2accd; font-weight: bold; margin-bottom: 40px; } .bi-sec11_stats { display: flex; justify-content: space-between; align-items: stretch; margin-bottom: 67px; } .bi-sec11_stat { position: relative; display: flex; flex-direction: column; align-items: center; width: 383px; height: 418px; padding: 54px 20px 0; } .bi-sec11_stat::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 30px; background-color: #11735d; filter: drop-shadow(5.785px 6.894px 15px rgba(0,105,81,0.4)); pointer-events: none; } .bi-sec11_stat > * { position: relative; } .bi-sec11_stat-tit { font-size: 26px; line-height: 37px; color: #ffffff; font-weight: bold; text-align: center; } .bi-sec11_stat-icon { width: 100%; height: 170px; display: flex; align-items: center; justify-content: center; } .bi-sec11_stat-icon img { max-width: 100%; max-height: 100%; } .bi-sec11_num { font-size: 66px; letter-spacing: -2px; line-height: 1.5; color: #f2accd; font-family: "SD Psyche"; text-align: center; margin-bottom: -10px; } .bi-sec11_num-val { font-size: 66px; letter-spacing: -2px; line-height: 1.5; color: #f2accd; font-family: "SD Psyche"; } .bi-sec11_unit { font-size: 20px; line-height: 37px; color: #f2accd; font-weight: 500; text-align: center; } /* 카운팅이 끝나면 숫자만 1.1배 확대 → 원래 크기 */ .bi-sec11_num.is-pop { animation: biSec11NumPop 0.7s cubic-bezier(0.4, 0, 0.3, 1) both; } @keyframes biSec11NumPop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } } .bi-sec11_footnote { font-size: 14px; line-height: 20px; color: #ffffff; font-weight: 300; text-align: center; } /* bi-sec12 */ .bi-sec12 { background-color: #cbe9e2; padding: 100px 60px 137px; } .bi-sec12_inner { max-width: 1200px; margin: 0 auto; } .bi-sec12_eyebrow { font-size: 24px; line-height: 71px; color: #f2accd; font-weight: bold; margin: 0 0 -6px; text-align: center; } .bi-sec12_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 60px; text-align: center; } .bi-sec12_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .bi-sec12_card { background-color: #fff; border-radius: 18px; padding: 42px 43px 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; } .bi-sec12_card-num { position: absolute; top: -50px; right: 0; font-size: 120px; letter-spacing: -3px; line-height: 1.5; text-transform: uppercase; color: #f3faf8; font-family: "SD Psyche"; } .bi-sec12_card-tag { display: inline-block; padding: 4px 14px 0px; border-radius: 17px; background-color: #cbe9e2; font-size: 17px; font-weight: bold; color: #087859; margin-bottom: 20px; align-self: flex-start; } .bi-sec12_card-tit { margin: 0 0 3px; font-size: 26px; line-height: 42px; text-transform: uppercase; color: #006951; font-weight: bold; } .bi-sec12_card-desc { margin: 0 0 33px; flex: 1; font-size: 19px; line-height: 30px; color: #2c2c2c; } .bi-sec12_card-divider { border: none; border-top: 1px solid #e8e8e8; margin: 0 0 16px; } .bi-sec12_card-footer { padding-top: 9px; opacity: 0.702; font-size: 14px; line-height: 30px; color: #2c2c2c; border-top: 2px solid #ebebeb; } .bi-sec12_footnote { margin-top: 43px; font-size: 14px; line-height: 20px; color: #282828; font-weight: 300; text-align: center; } /* bi-sec13 */ .bi-sec13 { background-color: #076644; padding: 153px 60px 106px; text-align: center; } .bi-sec13_inner { max-width: 1200px; margin: 0 auto; } .bi-sec13_tit { font-size: 74px; letter-spacing: -2px; line-height: 98px; color: #fff; font-family: "SD Psyche"; margin: 0 0 36px; } .bi-sec13_tit span { color: #f2accd; font-size: 74px; letter-spacing: -2px; line-height: 98px; font-family: "SD Psyche"; } .bi-sec13_desc { font-size: 32px; letter-spacing: -1px; line-height: 54px; color: #fff; text-align: center; margin: 0 0 40px; } .bi-sec13_cards { display: flex; flex-direction: column; gap: 18px; margin-bottom: 40px; } .bi-sec13_card { background-color: #fff; border-radius: 30px; overflow: hidden; text-align: left; display: flex; flex-direction: column; padding: 25px 40px 41px; opacity: 0; transform: scale(0.95); transition: opacity 1s ease, transform 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .bi-sec13_card.is-visible { opacity: 1; transform: scale(1); } /* 카드 상단: 로고 + 소개 / 이 점수의 가치 */ .bi-sec13_card-top { display: flex; align-items: flex-start; gap: 40px; padding: 0 0 22px; } .bi-sec13_card-brand { flex: 1; display: flex; align-items: center; gap: 30px; } .bi-sec13_card-logo { flex-shrink: 0; width: 115px; text-align: center; } .bi-sec13_card:first-child .bi-sec13_card-logo img { width: 115px; } .bi-sec13_card:nth-child(2) .bi-sec13_card-logo img { width: 90px; } .bi-sec13_card-intro { font-size: 20px; line-height: 31px; color: #2c2c2c; font-weight: 500; } .bi-sec13_card-row--value { flex: 1; align-items: flex-start; padding: 19px 0 0; } /* 카드 하단: 항목 리스트 + 0원 바 */ .bi-sec13_card-main { display: flex; align-items: flex-end; gap: 55px; padding-top: 22px; border-top: 1px solid #e1e1e1; } .bi-sec13_card-body { flex: 0 0 536px; width: 536px; } .bi-sec13_card-row { display: flex; justify-content: space-between; } .bi-sec13_card:first-child .bi-sec13_card-body .bi-sec13_card-row:first-child { margin-bottom: 6px; } .bi-sec13_card-row.w100 { margin-top: 7px; margin-bottom: 13px; } .bi-sec13_card-main .bi-sec13_card-row:last-child { margin-bottom: -9px; } .bi-sec13_card-row-label { font-size: 19px; color: #2c2c2c; white-space: nowrap; font-weight: bold; } .bi-sec13_card-row-val { font-size: 15px; color: #333; line-height: 1.6; text-align: right; } .bi-sec13_card-row-val strong { font-size: 22px; line-height: 37px; color: #006951; font-weight: bold; text-align: right; } .bi-sec13_card-row-val small { font-size: 17px; line-height: 22px; color: #888888; text-align: right; display: inline-block; margin-top: 2px; } .bi-sec13_card-row-val span { font-size: 22px; line-height: 37px; color: #888888; font-weight: bold; text-align: right; } .bi-sec13_card-info { width: 100%; background-color: #f5f5f5; border-radius: 14px; padding: 12px 20px; font-size: 13px; color: #666; line-height: 1.7; margin-top: 0; } .bi-sec13_card-info p { font-size: 17px; line-height: 24px; color: #888888; font-weight: bold; } .bi-sec13_card-info p span { font-size: 17px; line-height: 24px; color: #006951; font-weight: bold; } .bi-sec13_card-info > span { font-size: 15px; line-height: 22px; color: #888; } /* 카드 하단: 0원 바 */ .bi-sec13_card-bottom { flex: 1; background-color: #087859; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 20px; height: 80px; } .bi-sec13_card-bottom-txt { font-size: 17px; line-height: 24px; color: #ffffff; font-weight: bold; } .bi-sec13_card-bottom-txt span { font-size: 17px; line-height: 24px; color: #f2accd; font-weight: bold; } .bi-sec13_card-bottom-price { font-size: 44px; letter-spacing: -2px; line-height: 1.5; color: #f2accd; font-family: "SD Psyche"; } /* 카드 등장(1s)이 끝난 뒤 가격만 1.1배 확대 → 원래 크기 */ .bi-sec13_card.is-visible .bi-sec13_card-bottom-price { animation: biSec13PricePop 0.7s cubic-bezier(0.4, 0, 0.3, 1) 1s both; } @keyframes biSec13PricePop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } } .bi-sec13_footnote { font-size: 14px; line-height: 20px; color: #ffffff; font-weight: 300; text-align: center; } /* bi-sec14 */ .bi-sec14 { background-color: #f9f9f9; padding: 132px 60px 185px; text-align: center; } .bi-sec14_inner { max-width: 1200px; margin: 0 auto; } .bi-sec14_eyebrow { font-size: 24px; line-height: 71px; color: #f2accd; font-weight: bold; margin: 0 0 -6px; } .bi-sec14_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 74px; } /* 로고 슬라이더 */ .bi-sec14_logos { overflow: hidden; padding: 0 0 80px; position: relative; } .bi-sec14_logos::before, .bi-sec14_logos::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; } .bi-sec14_logos::before { left: 0; background: linear-gradient(to right, #f9f9f9 20%, transparent); } .bi-sec14_logos::after { right: 0; background: linear-gradient(to left, #f9f9f9 20%, transparent); } .bi-sec14_logos-row { margin-bottom: 60px; } .bi-sec14_logos-row:last-child { margin-bottom: 0; } .bi-sec14_logos-track { display: flex; align-items: center; gap: 100px; width: max-content; } .bi-sec14_logos-track--rtl { animation: bi14-rtl 85s linear infinite; } .bi-sec14_logos-track--ltr { animation: bi14-ltr 85s linear infinite; } @keyframes bi14-rtl { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes bi14-ltr { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .bi-sec14_logo-img { height: 44px; width: auto; object-fit: contain; flex-shrink: 0; } /* 파트너 카드 그리드 */ .bi-sec14_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; text-align: left; } .bi-sec14_card { position: relative; background-color: #fff; border-radius: 20px; padding: 28px 37px 24px; display: flex; flex-direction: column; height: 280px; } /* 카드 우상단 로고 — 높이/폭 상한만 준다. 대부분 원본이 세로 80px 라 높이 40px 에 걸려 50% 로 고르게 줄지만, HD한국조선해양(ci_30)만 154x23 로 규격이 달라 높이를 고정하면 1.7배 확대되어 흐려진다. max- 로 두면 작은 원본은 확대되지 않고 가로가 긴 이 로고는 폭 상한(154px)에 맞춰 원본 크기로 렌더된다. top/right 는 카드 padding 과 같은 값 */ .bi-sec14_card-logo { position: absolute; top: 28px; right: 37px; max-height: 40px; max-width: 154px; height: auto; width: auto; } .bi-sec14_card-company { font-size: 19px; line-height: 42px; text-transform: uppercase; color: #006951; font-weight: bold; } .bi-sec14_card-sub { margin-top: -10px; font-size: 15px; line-height: 30px; color: #b0b0b0; } .bi-sec14_card-stats { display: flex; gap: 80px; margin-bottom: 21px; margin-top: 20px; } .bi-sec14_stat-num { font-size: 33px; line-height: 49px; color: #087859; font-weight: bold; } .bi-sec14_stat-label { font-size: 20px; line-height: 35px; color: #b0b0b0; margin-top: -7px; } .bi-sec14_card-divider { border: none; border-top: 1px solid #eee; margin: 0 0 16px; } .bi-sec14_card-quote { font-size: 19px; letter-spacing: -0.5px; line-height: 30px; color: #2c2c2c; border-top: 1px solid #e1e1e1; padding-top: 19px; } /* bi-sec15 */ .bi-sec15 { background: url('/images/event/BiCycle_261007/bg/bi_sec15_bg.png') center/cover no-repeat; padding: 127px 60px; text-align: center; } .bi-sec15_inner { max-width: 1200px; margin: 0 auto; } .bi-sec15_eyebrow { font-size: 24px; line-height: 71px; color: #f2accd; font-weight: bold; margin: 0 0 -6px; } .bi-sec15_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 15px; } .bi-sec15_desc { font-size: 32px; letter-spacing: -1px; line-height: 54px; color: #2c2c2c; text-align: center; margin: 0 0 77px; } .bi-sec15_cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 97px; } .bi-sec15_card { width: 390px; height: 390px; background-color: #fff; border-radius: 30px; padding: 44px 46px 56px; text-align: left; position: relative; display: flex; flex-direction: column; box-shadow: 0 2px 16px rgba(0,0,0,0.05); } .bi-sec15_card::before { content: url('/images/event/BiCycle_261007/icon/bi_sec15_card_quotes1.png'); position: absolute; top: -15px; left: 27px; width: 39px; height: 29px; } .bi-sec15_card::after { content: url('/images/event/BiCycle_261007/icon/bi_sec15_card_quotes2.png'); position: absolute; bottom: -16px; right: 23px; width: 38px; height: 29px; } .bi-sec15_quote { font-size: 26px; font-weight: 700; color: #006951; line-height: 40px; margin: 0 0 auto; padding-bottom: 32px; } .bi-sec15_author { margin-top: 32px; } .bi-sec15_author-role { font-size: 20px; line-height: 45px; font-weight: 700; color: #006951; } .bi-sec15_author-duration { font-size: 20px; letter-spacing: 0px; line-height: 27px; color: #8a8a8a; margin-top: -5px; } .bi-sec15_footnote { font-size: 14px; line-height: 20px; color: #2c2c2c; font-weight: 300; text-align: center; } /* bi-sec16 */ .bi-sec16 { background-color: #cbe9e2; padding: 120px 60px; text-align: center; } .bi-sec16_inner { max-width: 1200px; margin: 0 auto; } .bi-sec16_eyebrow { font-size: 24px; line-height: 71px; font-weight: bold; color: #f2accd; margin: 0 0 -6px; } .bi-sec16_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 15px; } .bi-sec16_desc { font-size: 32px; letter-spacing: -1px; line-height: 54px; color: #2c2c2c; margin: 0 0 78px; } .bi-sec16_card { background-color: #fff; border-radius: 24px; overflow: hidden; } /* 입력 행 */ .bi-sec16_input-row { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 42px 0; background-color: #006951; } .bi-sec16_input-label { font-size: 28px; letter-spacing: -1px; line-height: 65px; color: #ffffff; font-weight: bold; padding-top: 2px; height: 65px; } .bi-sec16 .bi-sec16_input { width: 208px; height: 65px; border-radius: 10px; background-color: #f9f9f9; padding: 2px 18px 0; border: 0; outline: none; text-align: left; transition: border-color 0.2s; box-sizing: border-box; font-size: 30px; line-height: 61px; } .bi-sec16 .bi-sec16_input::placeholder { font-size: 30px; line-height: 61px; text-transform: uppercase; color: #b0b0b0; font-weight: 500; } .bi-sec16 .bi-sec16_input:focus { border-color: #087859; } /* 입력 유도용 깜빡이는 가짜 커서 (포커스 전 · 값 없을 때만 노출) */ .bi-sec16_input-wrap { position: relative; display: inline-flex; } .bi-sec16 .bi-sec16_input:placeholder-shown { text-indent: 8px; } .bi-sec16_input-caret { position: absolute; top: 50%; left: 26px; transform: translateY(-50%); width: 1px; height: 36px; background-color: #000; pointer-events: none; animation: biCaretBlink 1.06s step-end infinite; } .bi-sec16 .bi-sec16_input:focus ~ .bi-sec16_input-caret, .bi-sec16 .bi-sec16_input:not(:placeholder-shown) ~ .bi-sec16_input-caret { display: none; } @keyframes biCaretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .bi-sec16_input-suffix { font-size: 28px; letter-spacing: -1px; line-height: 65px; color: #ffffff; font-weight: bold; padding-top: 2px; height: 65px; } .bi-sec16_card_inner { padding: 60px 105px 80px; } /* 결과 박스 3개 */ .bi-sec16_results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 58px; } .bi-sec16_result { background-color: #f9f9f9; border-radius: 20px; padding: 47px 20px 20px; text-align: center; height: 228px; } .bi-sec16_result-label { font-size: 17px; letter-spacing: 0px; line-height: 27px; color: #2c2c2c; font-weight: 500; } .bi-sec16_result-num { font-size: 66px; color: #006951; font-family: "SD Psyche"; line-height: 1.5; margin-top: -8px; margin-bottom: -5px; } .bi-sec16_result-unit { font-size: 20px; line-height: 30px; color: #b0b0b0; margin: 0; } /* 버튼 */ .bi-sec16_btns { display: flex; justify-content: center; gap: 16px; } .bi-sec16_btn { font-size: 31px; font-weight: 700; cursor: pointer; transition: background-color 0.22s, color 0.22s; padding-top: 3px; width: 382px; height: 85px; border-radius: 43px; background-color: #ffffff; border: 1px solid #006951; } .bi-sec16_btn--primary { background-color: transparent; border: 1px solid #087859; color: #087859; } .bi-sec16_btn--primary:hover { background-color: #087859; color: #fff; } .bi-sec16_btn--outline { background-color: transparent; border: 1px solid #087859; color: #087859; } .bi-sec16_btn--outline:hover { background-color: #087859; color: #fff; } /* bi-sec17 */ .bi-sec17 { background-color: #f9f9f9; padding: 134px 60px 170px; text-align: center; } .bi-sec17_inner { max-width: 1200px; margin: 0 auto; } .bi-sec17_eyebrow { font-size: 24px; line-height: 71px; color: #f2accd; font-weight: bold; margin: 0 0 -6px; } .bi-sec17_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 15px; } .bi-sec17_desc { font-size: 32px; letter-spacing: -1px; line-height: 54px; color: #2c2c2c; text-align: center; margin: 0 0 50px; } .bi-sec17_card { background-color: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.06); } .bi-sec17_video { position: relative; width: 100%; padding-top: 56.25%; } .bi-sec17_video iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; } /* bi-sec18 */ .bi-sec18 { background-color: #cbe9e2; padding: 94px 60px 120px; text-align: center; } .bi-sec18_inner { max-width: 1200px; margin: 0 auto; } .bi-sec18_label { font-size: 24px; line-height: 71px; color: #087859; font-weight: bold; text-align: center; margin: 0 0 24px; } .bi-sec18_cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .bi-sec18_card { background-color: #fff; border-radius: 20px; padding: 0 28px 36px; height: 310px; text-align: center; display: flex; flex-direction: column; align-items: center; } .bi-sec18_card-icon { margin: 0; height: 138px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; } .bi-sec18_card-icon img { display: block; } .bi-sec18_card-tit { font-size: 26px; font-weight: 700; color: #1a5c40; margin: 0 0 5px; } .bi-sec18_card-desc { font-size: 19px; line-height: 28px; color: #2c2c2c; font-weight: 300; text-align: center; margin: 0; } /* bi16 report popup */ .bi16-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .bi16-popup.is-open { display: block; } .bi16-popup-dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); } .bi16-popup-close { position: fixed; top: 24px; right: 32px; z-index: 10000; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; line-height: 1; padding: 4px 8px; } .bi16-popup-close:focus, .bi16-popup-close:active { padding: 4px 8px; outline: none; } .bi16-popup-scroll { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; padding: 60px 20px 80px; box-sizing: border-box; display: flex; flex-direction: column; } .bi16-popup-inner { max-width: 1200px; width: 100%; margin: auto; flex-shrink: 0; } /* popup form */ .bi16-pop-form-wrap { background: #f9f9f9; padding: 46px 105px 54px; border-radius: 20px; background-color: #ffffff; } .bi16-pop-form-fields { display: flex; gap: 20px; margin-bottom: 42px; } .bi16-pop-field { flex: 1; } .bi16-pop-label { display: block; font-size: 23px; line-height: 38px; text-transform: uppercase; color: #006951; font-weight: bold; margin-bottom: 8px; } .bi16-popup .bi16-pop-input { width: 100%; height: 63px; border: 1px solid #d6d6d6; border-radius: 8px; padding: 0 16px; font-size: 20px; text-transform: uppercase; font-weight: 500; box-sizing: border-box; background: #ffffff; outline: none; } .bi16-popup .bi16-pop-input::placeholder { font-size: 20px; font-weight: 500; } .bi16-pop-form-btns { display: flex; gap: 20px; justify-content: center; } .bi16-pop-btn { width: 322px; height: 77px; border: none; border-radius: 15px; background-color: #0aa07e; font-size: 23px; font-weight: 700; cursor: pointer; color: #fff; transition: background-color 0.2s; line-height: 82px; } .bi16-pop-btn:hover { background-color: #006951; } .bi16-pop-btn:disabled { background-color: #ddeee8; color: #a8c5bb; cursor: not-allowed; pointer-events: none; } /* report layout */ .bi16-report { padding: 80px 105px 98px; margin-top: 63px; border-radius: 20px; background-color: #ffffff; } .bi16-report, .bi16-report * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .bi16-rep-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 30px; border-bottom: 1px solid #c9c9c9; margin-bottom: 60px; } .bi16-rep-logo-mark { font-size: 20px; font-weight: 900; color: #087859; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .bi16-rep-logo-sub { font-size: 12px; color: #888; margin: 0; } .bi16-rep-header-right { text-align: right; font-size: 15px; line-height: 26px; color: #909090; padding-top: 13px; } .bi16-rep-banner { height: 290px; background: url('/images/event/BiCycle_261007/bg/bi16_rep_banner_bg.png') center/cover no-repeat; border-radius: 15px; padding: 41px 58px; margin-bottom: 40px; } .bi16-rep-banner-tit { font-size: 45px; color: #fff; letter-spacing: -1px; line-height: 1.5; font-family: "SD Psyche"; } .bi16-rep-banner-tit span { font-size: 45px; color: #f2accd; letter-spacing: -1px; line-height: 1.5; font-family: "SD Psyche"; } .bi16-rep-banner-company { font-size: 42px; font-weight: 800; color: #fff; line-height: 71px; margin-top: 33px; } .bi16-rep-banner-note { font-size: 19px; color: #fff; line-height: 30px; } .bi16-rep-banner-note span { font-size: 19px; color: #fff; line-height: 30px; } .bi16-rep-section { margin-bottom: 52px; } .bi16-rep-sec-tit { font-size: 29px; color: #006951; text-transform: uppercase; letter-spacing: -1px; font-family: "SD Psyche"; line-height: 1.5; height: 43.5px; } .bi16-rep-perf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 23px; } .bi16-rep-perf-card { border-radius: 15px; height: 290px; padding: 53px 20px; background-color: #f9f9f9; text-align: center; } .bi16-rep-perf-card--gray { background: #e4f1ee; } .bi16-rep-perf-label { font-size: 17px; line-height: 27px; color: #2c2c2c; margin: 0 0 -11px; } .bi16-rep-perf-num { font-size: 79px; color: #006951; line-height: 1.5; } .bi16-rep-perf-unit { font-size: 19px; line-height: 30px; color: #006951; font-weight: bold; margin-top: -24px; } .bi16-rep-perf-note { font-size: 18px; line-height: 30px; color: #b0b0b0; margin-top: 7px; } .bi16-rep-benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 23px; } .bi16-rep-benefit { display: flex; gap: 38px; padding: 36px 0 36px 36px; border: 1px solid #e0e0e0; border-radius: 15px; align-items: center; height: 173px; } .bi16-rep-benefit-icon { flex-shrink: 0; line-height: 0; } .bi16-rep-benefit-icon img { display: block; } .bi16-rep-benefit-tit { font-size: 25px; line-height: 42px; color: #006951; font-weight: bold; } .bi16-rep-benefit-desc { font-size: 17px; color: #2c2c2c; margin-top: 3px; line-height: 26px; } .bi16-rep-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 23px; } .bi16-rep-logo-item { height: 102px; border-radius: 10px; background-color: #f7f7f7; display: flex; align-items: center; justify-content: center; } .bi16-rep-logo-item:last-child span { font-size: 21px; line-height: 47px; text-transform: uppercase; color: #8d8d8d; font-weight: bold; } .bi16-rep-logo-more { display: flex; align-items: center; justify-content: center; font-size: 13px; color: #aaa; font-weight: 500; } .bi16-rep-table-wrap { background: #e6f3ee; border-radius: 10px; overflow: hidden; margin-top: 23px; padding: 22px 35px; } .bi16-rep-table { width: 100%; border-collapse: collapse; font-size: 14px; } .bi16-rep-table td { padding: 11px 5px 6px; border-bottom: 1px solid #c8ddd5; color: #2c2c2c; font-size: 19px; } .bi16-rep-table td:first-child { font-weight: 700; color: #006951; width: 250px; } .bi16-rep-table tr:last-child td { border-bottom: none; } .bi16-rep-footer { padding: 40px 0 0; border-top: 1px solid #c9c9c9; margin-top: 61px; } .bi16-rep-footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; } .bi16-rep-footer-co { font-size: 18px; line-height: 30px; font-weight: bold; color: #006951; } .bi16-rep-footer-campaign { font-size: 18px; line-height: 30px; font-weight: bold; color: #282828; } .bi16-rep-footer-contact-tit { font-size: 18px; line-height: 30px; font-weight: 700; color: #282828; text-align: right; } .bi16-rep-footer-contact-row { font-size: 18px; line-height: 30px; color: #282828; text-align: right; font-weight: 300; } .bi16-rep-footer-contact-row span { font-size: 18px; line-height: 30px; color: #282828; font-weight: 700; display: inline-block; } .bi16-rep-footer-disc { display: flex; gap: 24px; align-items: center; background: #f7f7f7; padding: 0 0 0 28px; height: 90px; } .bi16-rep-footer-disc span { font-size: 16px; line-height: 27px; color: #2c2c2c; font-weight: 300; } .bi16-rep-footer-disc-icon { flex-shrink: 0; } /* bi-sec19 */ .bi-sec19 { background-color: #f9f9f9; padding: 178px 0 210px; } .bi-sec19_inner { max-width: 1200px; margin: 0 auto; padding: 0; } .bi-sec19_tit { font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #087859; font-family: "SD Psyche"; margin: 0 0 15px; } .bi-sec19_sub { font-size: 32px; letter-spacing: -1px; line-height: 54px; color: #2c2c2c; text-align: center; margin: 0 0 60px; } .bi-sec19_cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .bi-sec19_card { width: 384px; height: 435px; border-radius: 20px; filter: drop-shadow(1.782px 0.908px 10.5px rgba(35,102,87,0.08)); background-color: #ffffff; padding: 33px 25px 0; display: flex; flex-direction: column; } .bi-sec19_card-case { font-size: 15px; color: #b0b0b0; margin: 0 0 -6px; } .bi-sec19_card-company { font-size: 19px; text-transform: uppercase; color: #006951; font-weight: bold; margin: 0 0 31px; } .bi-sec19_card-metrics { flex: 1; } .bi-sec19_card-metric { padding: 13px 0; } .bi-sec19_card-metric:first-child { border-top: none; padding-top: 0; } .bi-sec19_card-num { font-size: 50px; line-height: 49px; color: #087859; font-weight: bold; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; } .bi-sec19_card-num span.unit { font-size: 20px; line-height: 35px; color: #087859; } .bi-sec19_card-num sub { font-size: 11px; vertical-align: unset; color: #087859; } .bi-sec19_card-num .arrow { font-size: 36px; font-weight: 700; } .bi-sec19_card-num .slash { font-size: 28px; font-weight: 400; color: #aaa; } .bi-sec19_card-label { font-size: 20px; color: #aaa; margin: -6px 0 0; } .bi-sec19_card-source { opacity: 0.702; font-size: 14px; line-height: 30px; color: #2c2c2c; border-top: 1px solid #ebebeb; padding: 11px 0; margin-top: 0; } /* bi-sec20 */ .bi-sec20 { background: #0d6b4a; padding: 100px 0 93px; } .bi-sec20_inner { max-width: 995px; margin: 0 auto; padding: 0; } .bi-sec20_eyebrow { font-size: 24px; line-height: 71px; color: #f2accd; font-weight: bold; margin: 0 0 -6px; text-align: center; } .bi-sec20_tit { text-align: center; font-size: 74px; letter-spacing: -2px; line-height: 1.5; color: #fff; font-family: "SD Psyche"; margin: 0 0 15px; } .bi-sec20_sub { font-size: 32px; letter-spacing: -1px; line-height: 54px; color: #ffffff; text-align: center; margin: 0 0 82px; } .bi-sec20_privacy { margin-bottom: 24px; } .bi-sec20_privacy-label { font-size: 30px; letter-spacing: -1px; line-height: 71px; color: #ffffff; margin: 0 0 15px; display: flex; align-items: center; gap: 6px; } .bi-sec20_privacy-box { height: 350px; border-radius: 15px; background-color: #ffffff; border: 1px solid #bbbbbb; padding: 0; font-size: 22px; letter-spacing: -1px; line-height: 31px; color: #777777; margin-bottom: 16px; overflow: hidden; box-sizing: border-box; } .bi-sec20_agree-row { display: flex; align-items: center; gap: 14px; cursor: pointer; } .bi-sec20_agree-row input[type="checkbox"] { display: none; } .bi-sec20_agree-chk { width: 35px; height: 35px; border-radius: 50%; flex-shrink: 0; background-color: #ffffff; border: 1px solid #aaaaaa; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; } .bi-sec20_agree-chk::after { content: ''; } .bi-sec20_agree-row input[type="checkbox"]:checked ~ .bi-sec20_agree-chk { background-color: #ffffff; border-color: #ffffff; } .bi-sec20_agree-row input[type="checkbox"]:checked ~ .bi-sec20_agree-chk::after { content: ''; display: block; width: 8px; height: 14px; border: 3px solid #087859; border-top: none; border-left: none; transform: rotate(45deg) translate(-1px, -2px); } .bi-sec20_agree-row span { font-size: 28px; letter-spacing: -1px; line-height: 71px; color: #ffffff; } /* 마케팅정보 수신동의(선택) — 내용이 길어 박스 높이를 내용에 맞춤 */ .bi-sec20_privacy--marketing .bi-sec20_privacy-box { height: 350px; min-height: 0; } /* 개인정보 안내 본문 (표·소제목·주석) */ /* 실제 스크롤 영역 — 부모(.bi-sec20_privacy-box)의 라운드에 잘려 모서리가 둥글게 처리된다 */ .bi-sec20_terms { height: 100%; overflow-y: auto; padding: 24px 28px; box-sizing: border-box; letter-spacing: -1px; -webkit-overflow-scrolling: touch; } .bi-sec20_terms::-webkit-scrollbar { width: 12px; background-color: #ededed; } .bi-sec20_terms::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .bi-sec20_terms::-webkit-scrollbar-track { background-color: #ededed; border-radius: 12px; } .bi-sec20_terms::-webkit-scrollbar-thumb { background-color: #8c8c8c; border-radius: 12px; border: 2px solid #ededed; background-clip: padding-box; min-height: 40px; } .bi-sec20_terms::-webkit-scrollbar-thumb:hover { background-color: #777777; } .bi-sec20_terms-sec { margin-top: 28px; } .bi-sec20_terms-sec--note { margin-top: 20px; padding-top: 18px; border-top: 1px dashed #dddddd; } .bi-sec20_terms-tit { font-size: 19px; line-height: 28px; color: #555555; font-weight: bold; margin: 0 0 8px; } .bi-sec20_terms-desc { font-size: 18px; line-height: 26px; color: #777777; margin: 0 0 10px; word-break: keep-all; } .bi-sec20_terms-table { width: 100%; margin: 0 0 10px; border-collapse: collapse; table-layout: fixed; } .bi-sec20_terms-col { width: 200px; } .bi-sec20_terms-table th, .bi-sec20_terms-table td { border: 1px solid #e0e0e0; padding: 7px 13px; font-size: 18px; line-height: 26px; text-align: left; vertical-align: middle; word-break: keep-all; } .bi-sec20_terms-table thead th { background-color: #f2f2f2; color: #555555; font-weight: bold; text-align: center; } .bi-sec20_terms-table tbody th { background-color: #fafafa; color: #666666; font-weight: bold; } .bi-sec20_terms-table tbody td { color: #777777; overflow-wrap: break-word; } .bi-sec20_terms-list { margin: 0 0 10px; padding: 0; list-style: none; counter-reset: bi-sec20-terms; } .bi-sec20_terms-list li { display: inline-block; margin-right: 30px; font-size: 18px; line-height: 26px; color: #777777; counter-increment: bi-sec20-terms; } .bi-sec20_terms-list li::before { content: counter(bi-sec20-terms) '. '; } .bi-sec20_terms-note { position: relative; margin: 4px 0 0; padding-left: 20px; font-size: 17px; line-height: 25px; color: #999999; word-break: keep-all; } .bi-sec20_terms-note::before { content: '\203B'; position: absolute; left: 0; top: 0; } .bi-sec20_terms-strong { color: #555555; font-weight: bold; font-style: normal; } .bi-sec20_form { margin-top: 80px; } .bi-sec20_form-row { display: flex; align-items: center; margin-bottom: 28px; } .bi-sec20_form-row.top { align-items: flex-start; } .bi-sec20_form-label { width: 195px; flex-shrink: 0; font-size: 28px; letter-spacing: -1px; line-height: 56px; text-transform: uppercase; color: #ffffff; font-weight: bold; } .bi-sec20 .bi-sec20_form-input { width: 100%; height: 56px; border-radius: 6px; background-color: #ffffff; border: none; padding: 0 18px; color: #333; outline: none; box-sizing: border-box; font-size: 25px; letter-spacing: -1px; line-height: 49px; text-transform: uppercase; font-weight: 300; } .bi-sec20 .bi-sec20_form-input::placeholder { color: #bbb; font-size: 25px; letter-spacing: -1px; line-height: 49px; text-transform: uppercase; font-weight: 300; } .bi-sec20_form-textarea { flex: 1; height: 210px; border-radius: 6px; background-color: #ffffff; border: none; padding: 14px 18px; color: #333; outline: none; resize: none; box-sizing: border-box; overflow-y: hidden; font-size: 25px; letter-spacing: -1px; line-height: 49px; text-transform: uppercase; font-weight: 300; } .bi-sec20_form-textarea::placeholder { color: #bbb; font-size: 25px; letter-spacing: -1px; line-height: 49px; text-transform: uppercase; font-weight: 300; } .bi-sec20_radios { display: flex; gap: 34px; align-items: center; } .bi-sec20_radio-label { display: flex; align-items: center; gap: 8px; font-size: 28px; letter-spacing: -1px; color: #ffffff; cursor: pointer; user-select: none; } .bi-sec20_radio-label input[type="radio"] { display: none; } .bi-sec20_radio-chk { width: 35px; height: 35px; border-radius: 50%; flex-shrink: 0; background-color: #ffffff; border: 1px solid #aaaaaa; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; } .bi-sec20_radio-chk::after { content: ''; } .bi-sec20_radio-label input[type="radio"]:checked ~ .bi-sec20_radio-chk { background-color: #ffffff; border-color: #ffffff; } .bi-sec20_radio-label input[type="radio"]:checked ~ .bi-sec20_radio-chk::after { content: ''; display: block; width: 8px; height: 14px; border: 3px solid #087859; border-top: none; border-left: none; transform: rotate(45deg) translate(-1px, -2px); } .bi-sec20_email-wrap { flex: 1; display: flex; align-items: center; gap: 11px; } /* 이메일은 대소문자를 그대로 보여야 한다. 이름/회사/연락처 칸이 쓰는 .bi-sec20 .bi-sec20_form-input 의 uppercase 를 이메일 영역에서만 해제한다 */ .bi-sec20_email-wrap .bi-sec20_form-input { width: 257px; flex: none; text-transform: none; } .bi-sec20_at { flex-shrink: 0; width: 35px; display: inline-block; text-align: center; font-size: 31px; letter-spacing: -1px; line-height: 49px; text-transform: uppercase; color: #ffffff; font-weight: 300; } .bi-sec20 .bi-sec20_email-domain { width: 257px; height: 56px; border-radius: 6px; background-color: #ffffff; border: none; padding: 0 18px; color: #333; outline: none; box-sizing: border-box; font-size: 25px; letter-spacing: -1px; line-height: 49px; text-transform: lowercase; font-weight: 300; } .bi-sec20 .bi-sec20_email-domain::placeholder { color: #bbb; font-size: 25px; letter-spacing: -1px; line-height: 49px; text-transform: lowercase; font-weight: 300; } .bi-sec20_email-select { width: 218px; height: 56px; border-radius: 6px; background-color: #cbe9e2; border: none; padding: 0 44px 0 18px; cursor: pointer; outline: none; flex-shrink: 0; font-size: 25px; letter-spacing: -1px; line-height: 49px; text-transform: lowercase; color: #087859; font-weight: 300; appearance: none; -webkit-appearance: none; background-image: url('/images/event/BiCycle_261007/icon/select_ico.png'); background-repeat: no-repeat; background-position: right 14px center; background-size: auto; } .bi-sec20_submit-wrap { text-align: center; margin-top: 100px; } .bi-sec20_submit { background-color: #f7f7f7; border: none; border-radius: 58px; width: 549px; height: 116px; cursor: pointer; font-size: 42px; line-height: 71px; text-transform: uppercase; color: #087859; font-weight: bold; text-align: center; } .bi-sec20_links { display: flex; justify-content: center; gap: 40px; margin-top: 17px; } .bi-sec20_link { font-size: 26px; letter-spacing: -1px; line-height: 72px; color: #ffffff; text-align: center; text-decoration: none; display: flex; align-items: center; gap: 4px; } /* bi-sec21 */ .bi-sec21 { background: #006951; padding: 65px 0; } .bi-sec21_inner { max-width: 1200px; margin: 0 auto; padding: 0; display: flex; justify-content: space-between; align-items: center; } .bi-sec21_logo { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; } .bi-sec21_logo-inf { font-size: 24px; line-height: 1; } .bi-sec21_desc { font-size: 20px; line-height: 34px; color: #ffffff; font-weight: 500; margin: 0; } .bi-sec21_right { text-align: right; } .bi-sec21_email { font-size: 20px; line-height: 34px; color: #ffffff; font-weight: 300; text-align: right; margin: 0; } .bi-sec21_copy { font-size: 20px; line-height: 30px; color: #ffffff; font-weight: 300; text-align: center; margin: 0; } /* //바이사이클 캠페인 관련 */