@charset "utf-8";a /* 리셋 */ body, p, form, h1, h2, h3, h4, h5, h6, small, ul, ol, dl { margin: 0; padding: 0; } li { list-style: none; } * { box-sizing: border-box; } *:after { clear: both; } dl, ol, ul { margin: 0; padding: 0; } ul li { list-style: none } dl, dd { margin-bottom: 0; } label { margin-bottom: 0; } em { font-style: normal; } a { display: inline-block; color: initial; } a:hover { color: initial; cursor: pointer; color: #000;} p { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } button { background: transparent; padding: 0; border: 0; } form { margin-bottom: 0; } a, a:hover, a:focus { text-decoration: none;} dl, dd, dt { line-height: initial; } input::placeholder, textarea::placeholder {font-style: normal;} img {max-width: 100%;} label:hover {cursor: pointer;} /* 부트스트랩 */ .list-group-dashed > li {padding: 0.75rem 0.5rem;} .list-group-dashed > li:not(:last-child) {border-bottom: 1px dashed #ddd;} .list-group-solid > li {padding: 0.75rem 0.5rem;} .list-group-solid > li:not(:last-child) {border-bottom: 1px solid #ddd;} .word-break {word-break: break-all;} .word-keep {word-break: keep-all;} .list-inline {margin-left: -0.25rem; margin-right: -0.25rem;} .list-inline.list-inline > * {display: inline-block; padding-left: 0.25rem; padding-right: 0.25rem;} .d-table {display: table; table-layout: fixed; width: 100%;} .d-table > * {display: table-cell !important;} input[type="checkbox"], input[type="radio"] {margin-right: 0.25rem;} .font-2xs {font-size: 0.7rem !important;} .font-xs {font-size: 0.8rem !important;} .font-sm {font-size: 0.9rem !important;} .font-md {font-size: 1rem !important;} .font-lg {font-size: 1.125rem !important;} .font-xl {font-size: 1.25rem !important;} .font-2xl {font-size: 1.5rem !important;} .font-3xl {font-size: 1.75rem !important;} .font-4xl {font-size: 2rem !important;} .font-5xl {font-size: 2.25rem !important;} .font-wt-300 {font-weight: 300 !important;} .font-wt-400 {font-weight: 400 !important;} .font-wt-500 {font-weight: 500 !important;} .font-wt-600 {font-weight: 600 !important;} .font-wt-700 {font-weight: 700 !important;} .font-wt-bold {font-weight: bold !important;} .w-5 { width: 5% !important; } .w-10 { width: 10% !important; } .w-20 { width: 20% !important; } .w-25 { width: 25% !important; } .w-30 { width: 30% !important; } .w-40 { width: 40% !important; } .w-50 { width: 50% !important; } .w-60 { width: 60% !important; } .w-75 { width: 75% !important; } .w-80 { width: 80% !important; } .w-100 { width: 100% !important; } .w-auto { width: auto !important; } .h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; } .mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; } .w-auto{width: auto !important;} .w-1px{width: 1px !important;} .w-10px{width: 10px !important;} .w-20px{width: 20px !important;} .w-30px{width: 30px !important;} .w-40px{width: 40px !important;} .w-50px{width: 50px !important;} .m-w-20px{max-width: 20px !important;} .m-w-30px{max-width: 30px !important;} .m-w-40px{max-width: 40px !important;} .m-w-50px{max-width: 50px !important;} .m-w-70px{max-width: 70px !important;} .m-w-100px{max-width: 100px !important;} .w-60px{width: 60px !important;} .w-70px{width: 70px !important;} .w-100px{width: 100px !important;} .w-120px{width: 120px !important;} .w-130px{width: 130px !important;} .w-150px{width: 150px !important;} .w-200px{width: 200px !important;} .w-250px{width: 250px !important;} .w-300px{width: 300px !important;} .w-350px{width: 350px !important;} .w-400px{width: 400px !important;} .w-500px{width: 500px !important;} .w-600px{width: 600px !important;} .w-700px{width: 700px !important;} .h-50px{height: 50px !important;} .m-h-20px{max-height: 20px !important;} .m-h-30px{max-height: 30px !important;} .m-h-40px{max-height: 40px !important;} .m-h-50px{max-height: 50px !important;} .m-h-70px{max-height: 70px !important;} .h-100px{height: 100px !important;} .m-h-100px{max-height: 100px !important;} .m-h-150px{max-height: 150px !important;} .m-h-200px{max-height: 200px !important;} .m-h-300px{max-height: 300px !important;} .min-h-70px{min-height: 70px !important;} .h-70px{height: 70px !important;} .h-150px{height: 150px !important;} .h-180px{height: 180px !important;} .h-200px{height: 200px !important;} .h-300px{height: 300px !important;} .h-400px{height: 400px !important;} .h-500px{height: 500px !important;} .h-600px{height: 600px !important;} .h-700px{height: 700px !important;} .h-800px{height: 800px !important;} .btn + .btn, .badge + .badge {margin-left: 0.5rem;} /* 버튼 정리 */ .btn { border-radius: 0.25rem; padding: 0.375rem 0.75rem;} a.btn {box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);} .input-group .form-control:focus {box-shadow: inherit;} .input-group a.btn {box-shadow: inherit;} .btn-radius {border-radius: 2rem;} .btn-sm {padding: 4px 8px; font-size: 0.9rem;} .btn-lg {min-width: 120px;} .btn-xl {min-width: 150px;} /* 뱃지 정리 */ .badge-brown {background-color: #ad8b48; color: #fff;} .badge-lg {border-radius: 0.875rem; padding: 0.125rem 0.75rem; font-size: 0.75rem !important; line-height: 1.42857143;} /* color-primary */ .text-primary { color: #3366b9 !important; } .bg-primary { background-color: #004596 !important;} .btn-primary { color: #fff !important; background-color: #004596 !important; border-color: #004596 !important; } .btn-primary:focus { color: #fff; background-color: #004596 !important; border-color: #004596 !important; } .btn-outline-primary { color: #004596 !important; border-color: #004596 !important; } .btn-outline-primary:focus { color: #004596 !important; border-color: #004596 !important; } .badge-primary { color: #fff !important; background-color: #004596 !important; } .badge-orange-trans { color: #fff !important; background-color: #ff3200ba !important; } .badge-outline-primary { border: 1px solid #004596 !important; color: #004596 !important; font-weight: 600;} .btn-primary.active, .btn-primary:focus, .btn-primary:hover { color: #fff !important; background-color: #286090 !important; border-color: #286090 !important; } .btn-outline-primary.active, .btn-outline-primary:focus, .btn-outline-primary:hover { color: #fff !important; background-color: #004596 !important; border-color: #004596 !important; } /* color-blue */ .text-blue { color: #3366b9 !important; } .bg-blue { background-color: #3366b9 !important;} .btn-blue { color: #fff !important; background-color: #3366b9 !important; border-color: #3366b9 !important; } .btn-blue:focus { color: #fff; background-color: #3366b9 !important; border-color: #3366b9 !important; } .btn-outline-blue { color: #3366b9 !important; border-color: #3366b9 !important; } .btn-outline-blue:focus { color: #3366b9 !important; border-color: #3366b9 !important; } .badge-blue { color: #fff !important; background-color: #3366b9 !important; } .badge-outline-blue { border: 1px solid #3366b9 !important; color: #3366b9 !important; font-weight: 600;} .btn-blue.active, .btn-blue:focus, .btn-blue:hover { color: #fff !important; background-color: #286090 !important; border-color: #286090 !important; } .btn-outline-blue.active, .btn-outline-blue:focus, .btn-outline-blue:hover { color: #fff !important; background-color: #3366b9 !important; border-color: #3366b9 !important; } /* color-warning */ .text-warning { color: #d3ad5d !important; } .text-yellow { color: #ffbc00 !important; } .bg-warning { background-color: #d3ad5d !important; } .btn-warning { color: #fff !important; background-color: #d3ad5d !important; border-color: #d3ad5d !important; } .btn-warning:focus { color: #fff !important; background-color: #d3ad5d !important; border-color: #d3ad5d !important; } .btn-outline-warning { color: #d3ad5d !important; border-color: #d3ad5d !important; } .btn-outline-warning:hover, .btn-outline-warning:focus { color: #fff !important; border-color: #d3ad5d !important; } .badge-warning { color: #fff !important; background-color: #d3ad5d !important; } .badge-outline-warning { border: 1px solid #d3ad5d !important; color: #d3ad5d !important; } .btn-warning.active, .btn-warning:focus, .btn-warning:hover { color: #fff !important; background-color: #d98a00 !important; border-color: #d98a00 !important; } /* color-danger */ .text-danger { color: #dc3545 !important; } .bg-danger { background-color: #dc3545 !important; } .btn-danger { color: #fff !important; background-color: #dc3545 !important; border-color: #dc3545 !important; } .btn-danger:focus { color: #fff !important; background-color: #dc3545 !important; border-color: #dc3545 !important; } .btn-outline-danger { color: #dc3545 !important; border-color: #dc3545 !important; } .btn-outline-danger:focus { color: #fff !important; border-color: #dc3545 !important; } .badge-danger { color: #fff !important; background-color: #dc3545 !important; } .badge-outline-danger { border: 1px solid #dc3545 !important; color: #dc3545 !important; } .btn-danger.active, .btn-danger:focus, .btn-danger:hover { color: #fff !important; background-color: #dc3545 !important; border-color: #dc3545 !important; } /* color-info */ .text-info { color: #09c7c7 !important; } .bg-info { background-color: #09c7c7 !important; } .btn-info { color: #fff !important; background-color: #09c7c7 !important; border-color: #09c7c7 !important; } .btn-info:focus { color: #fff !important; background-color: #09c7c7 !important; border-color: #09c7c7 !important; } .btn-outline-info { color: #09c7c7 !important; border-color: #09c7c7 !important; } .btn-outline-info:hover, .btn-outline-info:focus { color: #fff !important; border-color: #09c7c7 !important; } .badge-info { color: #fff !important; background-color: #09c7c7 !important; } .badge-outline-info { border: 1px solid #09c7c7 !important; color: #09c7c7 !important; } .btn-info.active, .btn-info:focus, .btn-info:hover { color: #fff !important; background-color: #09c7c7 !important; border-color: #09c7c7 !important; } /* color-dark-green */ .text-dark-green { color: #17a2b8 !important; } .bg-dark-green { background-color: #17a2b8 !important; } .btn-dark-green { color: #fff !important; background-color: #17a2b8 !important; border-color: #17a2b8 !important; } .btn-dark-green:focus { color: #fff !important; background-color: #17a2b8 !important; border-color: #17a2b8 !important; } .btn-outline-dark-green { color: #17a2b8 !important; border-color: #17a2b8 !important; } .btn-outline-dark-green:hover, .btn-outline-dark-green:focus { color: #fff !important; background-color: #17a2b8 !important; border-color: #17a2b8 !important; } .badge-dark-green { color: #fff !important; background-color: #17a2b8 !important; } .badge-outline-dark-green { border: 1px solid #17a2b8 !important; color: #17a2b8 !important; } .btn-dark-green.active, .btn-dark-green:focus, .btn-dark-green:hover { color: #fff !important; background-color: #17a2b8 !important; border-color: #17a2b8 !important; } /* color-secondary */ .text-secondary { color: #6c757d !important; } .bg-secondary { background-color: #6c757d !important; } .btn-secondary { color: #fff !important; background-color: #6c757d !important; border-color: #6c757d !important; } .btn-secondary:focus { color: #fff !important; background-color: #6c757d !important; border-color: #6c757d !important; } .btn-outline-secondary { color: #6c757d !important; border-color: #6c757d !important; } .btn-outline-secondary:hover { color: #fff !important; border-color: #6c757d !important; background-color: #6c757d !important;} .btn-outline-secondary:focus { color: #fff !important; border-color: #6c757d !important; background-color: #6c757d !important;} .badge-secondary { color: #FFF !important; background-color: #6c757d !important; } .badge-outline-secondary { border: 1px solid #6c757d !important; color: #6c757d !important; } .btn-secondary.active, .btn-secondary:focus, .btn-secondary:hover { color: #fff !important; background-color: #6c757d !important; border-color: #6c757d !important; } /* color-gray */ .text-gray { color: #b0b0b0 !important; } .bg-gray { background-color: #b0b0b0 !important; } .btn-gray { color: #fff !important; background-color: #b0b0b0 !important; border-color: #b0b0b0 !important; } .btn-gray:focus { color: #fff !important; background-color: #b0b0b0 !important; border-color: #b0b0b0 !important; } .btn-outline-gray { color: #b0b0b0 !important; border-color: #b0b0b0 !important; } .btn-outline-gray:hover { color: #fff !important; border-color: #b0b0b0 !important; background-color: #b0b0b0 !important;} .btn-outline-gray:focus { color: #fff !important; border-color: #b0b0b0 !important; background-color: #b0b0b0 !important;} .badge-gray { color: #FFF !important; background-color: #b0b0b0 !important; } .badge-outline-gray { border: 1px solid #b0b0b0 !important; color: #b0b0b0 !important; } .btn-gray.active, .btn-gray:focus, .btn-gray:hover { color: #fff !important; background-color: #b0b0b0 !important; border-color: #b0b0b0 !important; } /* color-light-gray */ .text-light-gray { color: #f4f4f4 !important; } .bg-light-gray { background-color: #f4f4f4 !important; } .btn-light-gray { color: #333 !important; background-color: #f4f4f4 !important; border-color: #f4f4f4 !important; } .btn-light-gray:focus { color: #333 !important; background-color: #f4f4f4 !important; border-color: #f4f4f4 !important; } .btn-outline-light-gray { color: #f4f4f4 !important; border-color: #f4f4f4 !important; } .btn-outline-light-gray:hover { color: #fff !important; border-color: #f4f4f4 !important; background-color: #f4f4f4 !important;} .btn-outline-light-gray:focus { color: #fff !important; border-color: #f4f4f4 !important; background-color: #f4f4f4 !important;} .badge-light-gray { color: #333 !important; background-color: #f4f4f4 !important; } .badge-outline-light-gray { border: 1px solid #f4f4f4 !important; color: #f4f4f4 !important; } .btn-light-gray.active, .btn-light-gray:focus, .btn-light-gray:hover { color: #333 !important; background-color: #f4f4f4 !important; border-color: #f4f4f4 !important; } /* color-success */ .text-success { color: #28a745 !important; } .bg-success { background-color: #28a745 !important; } .btn-success { color: #fff !important; background-color: #28a745 !important; border-color: #28a745 !important; } .btn-success:focus { color: #fff !important; background-color: #28a745 !important; border-color: #28a745 !important; } .btn-outline-success { color: #28a745 !important; border-color: #28a745 !important; } .btn-outline-success:hover { color: #fff !important; border-color: #28a745 !important; background-color: #28a745 !important;} .btn-outline-success:focus { color: #fff !important; border-color: #28a745 !important; background-color: #28a745 !important;} .badge-success { color: #FFF !important; background-color: #28a745 !important; } .badge-outline-success { border: 1px solid #28a745 !important; color: #28a745 !important; } .btn-success.active, .btn-success:focus, .btn-success:hover { color: #fff !important; background-color: #28a745 !important; border-color: #28a745 !important; } /* color-dark */ .text-dark { color: #484e55 !important; } .bg-dark { background-color: #484e55 !important; } .btn-dark { color: #fff !important; background-color: #484e55 !important; border-color: #484e55 !important; } .btn-dark:focus { color: #fff !important; background-color: #484e55 !important; border-color: #484e55 !important; } .btn-outline-dark { color: #484e55 !important; border-color: #484e55 !important; } .btn-outline-dark:focus { color: #fff !important; border-color: #484e55 !important; } .badge-dark { color: #fff !important; background-color: #484e55 !important; } .badge-outline-dark { border: 1px solid #484e55 !important; color: #484e55 !important; } .btn-dark.active, .btn-dark:focus, .btn-dark:hover { color: #fff !important; background-color: #484e55 !important; border-color: #484e55 !important; } /* color-white */ .text-white { color: #fff !important; } .bg-white { background-color: #fff !important; } .btn-white { color: #fff !important; background-color: #fff !important; border-color: #fff !important; } .btn-white:focus { color: #fff !important; background-color: #fff !important; border-color: #fff !important; } .btn-outline-white { color: #fff !important; border-color: #fff !important; } .btn-outline-white:focus { color: #fff !important; border-color: #fff !important; } .badge-white { color: #fff !important; background-color: #fff !important; } .badge-outline-white { border: 1px solid #fff !important; color: #fff !important; } .btn-white.active, .btn-white:focus, .btn-white:hover { color: #fff !important; background-color: #fff !important; border-color: #fff !important; } /* color-orange */ .text-orange { color: #ff5d16 !important; } .bg-orange { background-color: #ff5d16 !important; } .btn-orange { color: #fff !important; background-color: #ff5d16 !important; border-color: #ff5d16 !important; } .btn-orange:focus { color: #fff !important; background-color: #ff5d16 !important; border-color: #ff5d16 !important; } .btn-outline-orange { color: #ff5d16 !important; border-color: #ff5d16 !important; } .btn-outline-orange:focus { color: #ff5d16 !important; border-color: #ff5d16 !important; } .badge-orange { color: #fff !important; background-color: #ff5d16 !important; } .badge-orange { color: #fff !important; background-color: #ff5d16 !important; } .badge-outline-orange { border: 1px solid #ff5d16 !important; color: #ff5d16 !important; } .btn-orange.active, .btn-orange:focus, .btn-orange:hover { color: #fff !important; background-color: #c9302c !important; border-color: #c9302c !important; } /* color-brown */ .btn-dark-brown {background-color: #5c4a26 !important; border-color: #5c4a26 !important; color: #fff !important;} .btn-dark-brown.active, .btn-dark-brown:focus, .btn-dark-brown:hover {filter: brightness(1.25); opacity: 1 !important; transition: filter 0.15s ease-in-out;} /* 로딩바 */ #shuvic_loading_type_4 {width: 100%; height: 100%; position: absolute; top: 0; left: 0;} #shuvic_loading_type_4 #shuvic_mask {position:absolute; width: 100%; height: 100%; z-index:9000; background: #000; left:0; top:0; opacity: 0.4;} #shuvic_loading_type_4 #shuvic_open_init_mask {position:absolute; width: 100%; height: 100%; z-index:9000; background: #fff; left:0; top:0;} #shuvic_loading_4 {position: absolute; left: 50%; top: 50%; transform: translate(-80px, -80px); z-index: 9001;} #shuvic_loading_4 ul {position: fixed;} #shuvic_loading_4 ul li {position: absolute; width: 80px; height: 80px;} #shuvic_loading_4 ul li:first-child {top: 0; left: 0; animation: square1 3s ease-in-out infinite; background: #09c7c7; opacity: 0.7;} #shuvic_loading_4 ul li:nth-child(2) {top: 0; left: 80px; animation: square2 3s ease-in-out infinite; background: #2db4f8; opacity: 0.7;} #shuvic_loading_4 ul li:nth-child(3) {top: 80px; left: 80px; animation: square3 3s ease-in-out infinite; background: #09c7c7; opacity: 0.7;} #shuvic_loading_4 ul li:nth-child(4) {top: 80px; left: 0px; animation: square4 3s ease-in-out infinite; background: #2db4f8; opacity: 0.7;} #shuvic_loading_4 ul li:last-child {top: 58px; left: 10px; background: url("./images/main_logo.png.png") no-repeat; width: 140px; height: 44px; z-index: 1;} @keyframes square1 {0% {transform: translate(0,0);}25% {transform: translate(80px,0);}50% {transform: translate(80px,80px);}75% {transform: translate(0,80px)}99% {transform: translate(0,0);}} @keyframes square2 {0% {transform: translate(0,0);}25% {transform: translate(0,80px);}50% {transform: translate(-80px,80px);}75% {transform: translate(-80px,0)}99% {transform: translate(0,0);}} @keyframes square3 {0% {transform: translate(0,0);}25% {transform: translate(-80px,0px);}50% {transform: translate(-80px,-80px);}75% {transform: translate(0,-80px)}99% {transform: translate(0,0);}} @keyframes square4 {0% {transform: translate(0,0);}25% {transform: translate(0,-80px);}50% {transform: translate(80px,-80px);}75% {transform: translate(80px,0)}99% {transform: translate(0,0);}} /** 레이아웃 관련 http://worddic.okdongchang.kr/wordDic/findWordDicWkgForm.do */ .no-badge {display: inline-block; width: 17.59px;} /* 팝업 */ .INDEX_POPUP_WRAP {box-shadow: 2px 2px 4px 3px rgba(0,0,0,10%); position: fixed !important; margin-top: 0 !important;} .INDEX_POPUP_WRAP.top_center {transform: translateY(-50%);} .INDEX_POPUP_WRAP.left_center {transform: translateX(-50%);} .INDEX_POPUP_WRAP.top_center.left_center {transform: translate(-50%, -50%);} .flgPrduIntroMngtList .flg_item_wrap{position: relative; } .flgPrduIntroMngtList .flg_item_wrap .flg_img{height: 200px;width: 100%;background-size: 100%;background-position: center;transition: all 0.2s ease-in-out;background-repeat: no-repeat;} .flgPrduIntroMngtList .flg_item_wrap:hover .flg_img{background-size: 150%;} .flgPrduIntroMngtList .flg_item_wrap:hover{border-color: #80bdff !important;transition: all 0.2s ease-in-out;} .flgPrduIntroMngtList .flg_item_wrap:hover .flg_idx{background-color: #333 !important; color: #FFF;transition: all 0.2s ease-in-out;} .flgPrduIntroMngtList .flg_item_wrap .flg_idx{position: absolute;top:-1px;left:-1px;background-color: #999; color: #FFF; padding: 2px 10px;border-top-left-radius: 0.2rem;border-bottom-right-radius: 0.2rem} .flgPrduIntroMngtList .flg_item_wrap .flg_idx.top_flg{background-color: #00c73c; color: #FFF; } .flgPrduIntroMngtList .flg_item_wrap .flg_idx.del_flg{background-color: #dc3545; color: #FFF; } .flgPrduIntroMngtList .flg_item_wrap .flg_cate{position: absolute;top:-20px;right:15px;background-color: #24a2f6; color: #FFF;padding: 2px 10px;border-radius: 0.2rem} .flgPrduIntroMngtList .flg_item_wrap .flg_cate em{position: absolute; left: 9px; bottom: -6px; border-top: 6px solid #24a2f6; border-right: 6px solid transparent; border-left: 6px solid transparent;} .flgPrduIntroMngtList .flg_item_wrap h4{margin-top: 5px;} .flgPrduIntroMngtList .flg_item_wrap.flg_sxn_cd_2 .flg_cate{background-color: #444;} .flgPrduIntroMngtList .flg_item_wrap.flg_sxn_cd_2 .flg_cate em{border-top-color: #444;} .flgPrduIntroMngtList .flg_item_wrap.flg_sxn_cd_3 .flg_cate{background-color: #28a745;} .flgPrduIntroMngtList .flg_item_wrap.flg_sxn_cd_3 .flg_cate em{border-top-color: #28a745;} .flgPrduIntroMngtList .flg_item_wrap.flg_sxn_cd_6 .flg_cate{background-color: #af47a2;} .flgPrduIntroMngtList .flg_item_wrap.flg_sxn_cd_6 .flg_cate em{border-top-color: #af47a2;} .pagination-wrap{text-align: center;margin-top: 1rem;} .pagination-wrap:after{content: "";display: block;clear: both;} .pagination-wrap > nav > ul.pagination > .page-item{padding-right: 10px;float: left;} .pagination-wrap > nav > ul.pagination > .page-item >a.page-link{border-radius: 0.5rem;min-width: 40px;color: #353535; } .pagination-wrap > nav > ul.pagination > .page-item >a.page-link:hover{background-color: #162b7d;border-color: #162b7d;color: #FFF;} .pagination-wrap > nav > ul.pagination > .page-item.active >a.page-link{background-color: #162b7d;border-color: #162b7d;color: #FFF;} .no_result{padding: 100px 0; text-align: center;} #srchForm {width: 60%; margin: 0 auto;} .btn-write {border: 1px solid #3366b9; color: #3366b9;} .btn-write:hover {background: #3366b9; color: #fff;} /*** [고객소통함] ***/ /* 영역 */ .form_surv_wrap{padding:30px 0; font-size:16px; line-height:1.5; background-color:#f7f7f7; color:#000;} /* 타이틀 */ .surv_ttl{margin-bottom:0; font-size:21px; font-weight:400;} .surv_ttl > *{display:inline-block; vertical-align:middle;} .surv_ttl img + span{margin-left:5px;} /* 폼 */ .surv_item{margin-top:15px;} .surv_item .item_ttl{margin-bottom:10px; font-size:16px; font-weight:400; color:#323232;} .surv_form{display:table; width:100%;} .surv_form > *{display:table-cell; vertical-align:top;} .surv_form textarea{width:90%; height:60px; padding:5px 10px; font-size:16px; border-radius:0;} .surv_form textarea::placeholder{color:#909090;} .surv_form textarea:focus, .surv_form textarea:hover{outline:0;} .surv_form button{width:10%; padding:15.5px 0; font-size:18px; font-weight:400; text-align:center; background:#0758aa; color:#fff; border:1px solid #0758aa; outline:0;} .pre-scrollable {padding: 1rem; border-top: 2px solid #162b7d; border-bottom: 1px solid #9e9e9e;} @media screen and (max-width: 720px) { /* 영역 */ .form_surv_wrap{padding:15px 0;} /* 타이틀 */ .surv_ttl img{width:25px;} .surv_ttl img + span{margin-left:3px;} /* 폼 */ .surv_item{margin-top:0;} .surv_form textarea{width:75%; height:80px; font-size:14px; border-right:0; resize:none;} .surv_form button{width:25%; height:80px; font-size:15px;} } /* 고객소통함 추가로 인한 홈페이지 정보 수정 */ .quick_bar{margin-top:0;} /*** [고객소통함 끝] ***/ /* 로그인 */ .login_ico_lst a {width: 60px; height: 60px; display: block; box-shadow: 2px 2px 5px rgba(0,0,0,15%); border-radius: 50%; overflow: hidden; background-size: 100% 100%;} .ico_naver {background: url("images/icon/ico_sns_naver.png") no-repeat;} .ico_kakao {background: url("images/icon/ico_sns_kakao.png") no-repeat;} .ico_google {background: url("images/icon/ico_sns_google.png") no-repeat;} .ico_dafl {background: url("images/icon/ico_sns_dafl.png") no-repeat; background-size: contain;} .ico_apple {background: url("images/icon/ico_sns_apple.png") no-repeat;} .ico_login_naver {background: url("images/icon/ico_login_naver.png") no-repeat;} .ico_login_kakao {background: url("images/icon/ico_login_kakao.png") no-repeat;} .ico_login_google {background: url("images/icon/ico_login_google.png") no-repeat;} .ico_login_apple {background: url("images/icon/ico_login_apple.png") no-repeat;} /* 23.02.09 수정사항 */ .JS-srvScoreBtn {color: #ddd;} .JS-srvScoreBtn.active {color: #ffbc00;} .btn-2x{padding: 12.5px 150px;font-size: 28px;} .btn{font-style: normal;} .btn:hover {opacity: .7;} .text-purple {color: #a952ed !important;} .text-brightpurple {color: #6a78e1 !important;} .text-black {color: #000 !important;} .bg-black {background-color: #000 !important;} .text-seablue {color: #0182b8 !important;} .text-darkblue {color: #3366b9 !important;} .bg-darkblue {background: #3366b9 !important;} .text-deepdarkblue {color: #235a8f !important;} .bg-deepdarkblue {background: #235a8f !important;} .text-crystal {color: #c4e2fe !important;} .text-red {color: #eb2a2e !important;} .text-gray {color: #8f8f8f !important;} .text-brightgray {color: #f2f2f2 !important;} .bg-brightgray {background-color: #f2f2f2 !important;} .text-darkgray {color: #666 !important;} .text-white {color: #fff !important;} .bg-white {background-color: #fff !important;} .text-gold {color: #fedfa8 !important;} .text-lemon {color: #e8fd04 !important;} .text-darkbrown {color: #3f2818 !important;} .text-bluegreen {color: #4fa5a5 !important;} .bg-bluegreen {background-color: #4fa5a5 !important;} .text-darkgreen {color: #1c7878 !important;} .bg-darkgreen {background-color: #1c7878 !important;} /* .btn-blue{background-color:#6288d6 !important;border-color: #6288d6 !important;color: #FFF;} .btn-outline-blue{border-color: #6288d6 !important;color: #6288d6;} .btn-outline-blue:hover{background-color:#6288d6 !important;border-color: #6288d6 !important;color: #FFF} */ .btn-pill-outline-primary{ color: #3366b9;border-radius: 40px !important;border:3px solid #3366b9; } .btn-pill-outline-primary:hover{background-color:#3366b9 !important;border-color: #3366b9 !important;color: #FFF;} /* .btn-info{background-color:#0ea9e4 !important;border-color: #0ea9e4 !important;} .text-info{color: #0ea9e4;} .btn-outline-info{border-color: #0ea9e4 !important;} .btn-outline-info:hover{background-color: #0ea9e4 !important;border-color: #0ea9e4 !important;} */ .btn-dark{background-color:#484e55 !important;border-color: #484e55 !important;} .card{border: 0px !important;} .card > .card-body{background-color: #f4f4f4;padding: 30px 30px 25px;font-size: 1rem; border-radius: 0.25rem;} .card .card-title{border-left: 5px solid #162b7d;padding-left: 10px;color: #162b7d;font-size: 1.5rem;margin-bottom: 15px; font-weight: bold;} .card .card-footer {color: #6288d6; border-radius: 0; padding: 0; background-color: inherit; border-top: 0;margin-top: 0.5rem;} .text-title {font-size: 1.5rem; font-weight: 700; color: #000;} /** */ .table {table-layout: fixed;} .table-lg > thead > tr > th , .table-lg > thead > tr > td , .table-lg > tbody > tr > th , .table-lg > tbody > tr > td {padding: 1.5rem;font-size: 1.5rem;} .table{border-top:2px solid #162b7d;border-bottom:1px solid #9e9e9e;margin-bottom: 0px;} .table > caption{display: none !important;} .table > thead > tr > th, .table > tbody > tr > th{background: #f5f5f5;vertical-align: middle;text-align: center;font-weight: bold;} .table > thead > tr > th{border-bottom:1px solid #bebebe !important;} .table > tbody > tr > td{text-align: center; vertical-align: middle;} .table-striped tbody tr:nth-of-type(odd) {background-color: #09c7c705;} .table-striped tbody tr:nth-of-type(odd):hover {background-color: #00000013;} .list-header{width: 100%;display: table;table-layout: auto;} .list-header > dt > .list-header-title{font-size: 1.5rem;} .list-header > dt, .list-header > dd{display: table-cell;vertical-align: bottom;} .list-header > dd{text-align: right;} .nav-tabs>li>a.active, .nav-tabs>li>a.active:hover, .nav-tabs>li>a.active:focus{opacity: 1;background-color: #004596;color: #FFF;border-color: #004596 !important;} .nav-tabs>li:first-child>a{margin-left: 1.5rem;} .nav-tabs>li>a{background-color: #ffffff;border-bottom-color:#004596 !important;border-color: #004596 !important;transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;} .nav-tabs>li>a:hover, .nav-tabs>li>a:focus{border-color: #777 !important;background-color: #f4ffff} /* 리스트 타입 */ .list_type_diamond {margin-left: 0.75rem;} .list_type_diamond > li {padding-left: 1.5rem; position: relative;} .list_type_diamond > li:not(:first-child) {margin-top: 0.25rem;} .list_type_diamond > li:before {content: ""; display: inline-block; width: 1.125rem; height: 1rem; background-size: contain; background-repeat: no-repeat; background-image: url("./images/dafl_v3_img/sub_01_01_main_mid_dia.png"); position: absolute; top: 5px; left: 0;} .list_type_diamond > li p {word-break: keep-all;} /* 이미지 로고 */ span.logo {background: url("./images/dafl_v3_img/logo.png") no-repeat; width: 150px; height: 48px; display: inline-block; position: absolute; top: 10px; left: 10px;} .pre-scrollable{max-height: 200px;} .no_result{padding: 50px 0 !important;text-align: center !important;} .dl_style1:after {display: block;content: "";clear: both;} .dl_style1 > dt {float: left;text-align: left;} .dl_style1 > dd {float: right;text-align: right;} .list-search{padding: 0.5rem 0rem;border-radius: 0.25rem;} .list-search > dt{display: inline-block;border-bottom: 2px solid #484e55;padding: 0.2rem 1rem;font-size: 2rem;margin-left: 1rem;} .list-search > dt > i{color:#3366b9;} .list-search > dd{display: block;padding: 1rem 0;} .COMMON_TABS{clear: both;} .COMMON_TABS.ui-tabs{padding: 0px;margin: 1px 0 0 0;} .COMMON_TABS.ui-tabs > ul > li > a{outline: none; font-size: 1rem;;} .COMMON_TABS.ui-tabs .ui-tabs-nav li {padding: 0px;margin: 1px 7px 0 0; white-space:nowrap; } .COMMON_TABS.ui-tabs .ui-tabs-nav > .ui-tabs-active {background: #162b7d;border-color: #162b7d;} .COMMON_TABS.ui-tabs .ui-tabs-nav > .ui-tabs-active > a{color: #FFF; opacity: 1;} .COMMON_TABS.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-top-left-radius:0px;border-top-right-radius:0px;} .COMMON_TABS.ui-tabs .ui-tabs-nav li a{padding:10px 20px;} .COMMON_TABS.tab_content h3.on a, #contents .tab_content h3 a:hover {color: #3780d0;} .COMMON_TABS.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {color: #FFFFFF;font-weight: bold;} .COMMON_TABS.ui-tabs .ui-tabs-panel{padding: 5px 0px;} .COMMON_TABS.ui-widget-content{border: none;border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-top-left-radius:0px;border-top-right-radius:0px;background:none;} .COMMON_TABS > .ui-widget-header{background: none; border: none;border-bottom: 1px solid #162b7d; border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-top-left-radius:0px;border-top-right-radius:0px;} .COMMON_TABS > .ui-widget-header{padding: 0px;} .COMMON_TABS.ui-tabs .ui-tabs-nav, .tab-slide{width:100%; white-space:nowrap;} .board-content{min-height: 200px;padding: 1rem;} .comment-content{min-height: 50px;padding: 1rem;} .ui-state-active .img_resize_btn {color: #454545 !important;} .text {position: relative;} .text > * {display: inline-block; width: 50%; text-align: center; font-size: 2rem; padding: 0.5rem;} .text > * > div {border: 2px solid red;} i.reverse {--fa-primary-opacity: 0.4; --fa-secondary-opacity: 1;} .text-overflow {display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; max-width: 100%;} /* 라디오 탭 폼 */ .COMMON_RADIO_TABS > ul > li {display: inline-block;} .COMMON_RADIO_TABS > ul > li:not(:first-child) {margin-left: -1px;} .COMMON_RADIO_TABS > ul > li > label {cursor: pointer; display: block; padding: 0.5rem 1rem; border: 1px solid #dedede; background-color: #fff; position: relative; text-align: center;} .COMMON_RADIO_TABS > ul > li > label:hover {border-color: #3366B9; color: #3366B9; z-index: 2;} .COMMON_RADIO_TABS > ul > li:first-child > label {border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;} .COMMON_RADIO_TABS > ul > li:last-child > label {border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;} .COMMON_RADIO_TABS > ul > li > input {display: none;} .COMMON_RADIO_TABS > ul > li > input:checked + label {border-color: #3366b9; background-color: #3366b926; color: #3366B9; z-index: 1; font-weight: 600;} /* 버튼 효과 */ .btn_efct_01 {position: relative; overflow: hidden;} .btn_efct_01:hover {opacity: 0.8;} .btn_efct_01:hover:after {content: ""; width: 2rem; height: 100%; display: block; position: absolute; top: 0; left: -100%; transform: skewX(-30deg) translateX(0); background-color: rgba(255,255,255,0.3); animation: btnEfct01 .75s linear; animation-delay: 0.15s;} @keyframes btnEfct01 { 0% { left: -100%; } 100% { left: 100%; } } /* 말풍선 */ .dafl_speech_bubble_wrap {position: absolute; top: 0; right: 1rem; transform: translateY(-50%); animation: blink-effect 2s ease-in-out infinite; opacity: 0.9;} .dafl_speech_bubble {color: #fff; font-weight: 500; padding: 0.1875rem 0.5rem; font-size: 0.75rem; border-radius: 0.25rem; background-color: #FF0000;} .dafl_speech_bubble:after {content: ""; display: inline-block; position: absolute; bottom: 0.3125rem; transform: translateY(100%) rotate(135deg); right: 0.375rem; border-top: 0.5rem solid #FF0000; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent;} @keyframes blink-effect { 50% { opacity: 0.65; } } .d-flex-form {display: flex; justify-content: space-between; align-items: center;} /* 다플샵 리뉴얼 */ /* 작업 완료 후 삭제예정 */ .sample_lst {position: fixed; top: 200px; left: 10%;} /* 구분선 */ .dafl_sub_sxn_line {background-color: #f2f2f2;} .dafl_sub_sxn_line {height: 0.75rem; margin-top: 3rem; margin-bottom: 3rem;} /* 탭 */ .daflsharp_tab.type_01 {display: table; table-layout: fixed; width: 100%;} .daflsharp_tab.type_01 > li {display: table-cell; vertical-align: middle; border-bottom: 5px solid #f2f2f2;} .daflsharp_tab.type_01 > li > a {display: block; text-align: center; padding: 0.75rem 0; font-size: 1.25rem; font-weight: bold;} .daflsharp_tab.type_01 > li.active {border-bottom: 5px solid #3366b9;} .daflsharp_tab.type_01 > li.active > a {color: #3366b9;} .daflsharp_tab.type_02 {display: flex; justify-content: space-around;} .daflsharp_tab.type_02 > li > a {display: block; padding: 0.5rem 1.5rem; border: 1px solid #bfbfbf; text-align: center; min-width: 120px; border-radius: 0.5rem; color: #7f7f86; font-weight: bold;} .daflsharp_tab.type_02 > li.active > a {background-color: #3366b9; border-color: #3366b9; color: #fff; opacity: 1;} .daflsharp_tab.type_02 > li:not(.active) > a:hover {background-color: #3366b9; border-color: #3366b9; color: #fff; transition: all 0.15s ease-in-out; opacity: 0.9;} /* 아코디언 */ .invt_accordion_wrap {overflow: hidden;} .invt_accordion_wrap.disabled .invt_accordion_header_wrap {background-color: #e2e2e2;} .invt_accordion_wrap.disabled .invt_accordion_header {cursor: not-allowed; color: #999;} .invt_accordion_header {padding: 0 0.5rem 1rem; display: flex; width: 100%; justify-content: space-between; align-items: center; border-bottom: 2px solid #333;} .invt_accordion_header_wrap input[type="checkbox"] + .invt_accordion_header {padding-left: 0;} .invt_accordion_header > p {font-weight: bold; font-size: 1.125rem; color: #333;} .invt_accordion_header > i {font-size: 1.5rem;} .invt_accordion_body {padding: 1.5rem 0.5rem; background-color: #fff;} /* 상품 카테고리 뱃지 */ .divy_prd_list_cat_badge_wrap { display: inline-block; position: absolute; top: 0.5rem; right: 0.5rem;} .divy_prd_list_cat_badge {display: inline-flex; justify-content: center; align-items: center; color: #fff; position: relative; aspect-ratio: 1 / 1; border-radius: 1rem; padding: 0.375rem; overflow: hidden;} .divy_prd_list_cat_badge > span {position: relative; text-align: center; word-break: keep-all; font-size: 0.8rem; font-weight: 500; display: inline-block; min-width: 43.11px;} .divy_prd_list_cat_badge_wrap.type_01 .divy_prd_list_cat_badge {background: linear-gradient(210deg, #7b3bb3 0%, rgb(123 59 179 / 90%) 40%, rgb(169 46 132 / 90%) 70%, #a92e84 100%); background: none; background-color: #3366b9; box-shadow: 1px 1px 3px rgba(0,0,0,0.5);} .divy_prd_list_cat_badge_wrap.type_02 .divy_prd_list_cat_badge {background-color: #727272; box-shadow: 1px 1px 3px rgba(0,0,0,0.35);} .divy_prd_list_cat_badge_wrap .divy_prd_list_cat_badge_lst {display: flex; flex-direction: column; gap: 0.25rem;} .divy_prd_list_cat_badge.type_02 { background-color: transparents; width: 3rem; height: 3rem; } .divy_prd_list_cat_badge.type_02 > img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* .divy_prd_info .divy_prd_list_cat_badge_wrap {bottom: auto; right: 1rem; top: 0;} */ .table-sm>thead>tr>th, .table-sm>tbody>tr>th, .table-sm>tfoot>tr>th, .table-sm>thead>tr>td, .table-sm>tbody>tr>td, .table-sm>tfoot>tr>td {padding: 0.375rem;} /* 슬라이드 + 이미지 미리보기 */ .COMMON_SWIPER_IMG_VIEW_WRAP .COMMON_SWIPER_IMG_VIEW > ul > li > div {width: 100%; height: 0; padding-bottom: 100%; position: relative; border: 1px solid #dfdfdf;} .COMMON_SWIPER_IMG_VIEW_WRAP .COMMON_SWIPER_IMG_VIEW > ul > li > div > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;;} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper_img_paging_box {margin-top: 1rem; position: relative;} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper_img_paging_wrap {width: 75%; margin: 0 auto;} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper_img_paging_wrap > ul > li {cursor: pointer;} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper_img_paging_wrap > ul > li > div {width: 100%; height: 0; padding-bottom: 100%; position: relative; border: 1px solid #dfdfdf;} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper_img_paging_wrap > ul > li > div > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper_img_paging_wrap > ul > li.swiper-slide-active:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: 3px solid #162b7d;} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper_slide_counter_wrap {position: absolute; bottom: 5%; left: 50%; transform: translatex(-50%); z-index: 99; display: none;} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper_slide_counter {display: inline-block; padding: 0.125rem 0.75rem; background-color: #ffffffc9; border-radius: 1rem; font-size: 1rem; font-weight: 600; box-shadow: 0 0 1.5px rgb(0 0 0 / 40%);} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper-button-next, .COMMON_SWIPER_IMG_VIEW_WRAP .swiper-button-prev {width: 1.25rem; height: 2.5rem; background-size: 100% 100%;} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper-button-prev {background-image: url("/common/css/images/main_arrow_left.png");} .COMMON_SWIPER_IMG_VIEW_WRAP .swiper-button-next {background-image: url("/common/css/images/main_arrow_right.png");} /* 마이페이지 타이틀 + 내용 기본 폼 */ .dafl_list_sect_form_lst > li:not(:first-child) {margin-top: 5rem;} .dafl_list_sect_form > dt {display: flex; justify-content: space-between; align-items: center;} .dafl_list_sect_form > dt > a {font-size: 1.25rem;} .dafl_list_sect_form > dt > div {display: flex; justify-content: flex-start; align-items: baseline; gap: 0.5rem;} .dafl_list_sect_form > dt > div > p {font-size: 1.5rem;} .dafl_list_sect_form > dt > div > span {font-size: 1rem; color: #6c757d; font-weight: 500;} .dafl_list_sect_form > dt label {display: flex; justify-content: flex-end; align-items: center; font-weight: 400; font-size: 0.9rem; gap: 0.25rem;} .dafl_list_sect_form > dt label span {line-height: 1;} .dafl_list_sect_form > dd {margin-top: 0.75rem;} /* 이미지 확대보기 + 슬라이드 */ html.overflow-lock {overflow: hidden;} .COMMON_IMG_ZOOM_SLIDE_VIEW_FORM img {cursor: pointer;} .COMMON_IMG_EXPAND_VIEW_WRAP {width: 100% !important; height: 100dvh !important; position: fixed !important; z-index: 9000; top: 0; left: 0; padding: 0 !important; overflow: hidden !important;} .COMMON_IMG_EXPAND_VIEW_WRAP ul {padding-left: 0;} .COMMON_IMG_EXPAND_VIEW_WRAP ul > li {list-style: none;} .ui-dialog.ui-widget.img_expand_view_popup {max-width: none; height: 100dvh !important; border-radius: 0; background: none; box-shadow: inherit; background-color: transparent !important;} .ui-dialog.ui-widget.img_expand_view_popup .ui-dialog-titlebar, .ui-dialog.ui-widget.img_expand_view_popup .ui-dialog-buttonpane {display: none;} .COMMON_IMG_EXPAND_VIEW_MASK {width: 100% !important; height: 100% !important; background-color: #000c; position: relative;} .img_expand_view_close_btn {position: absolute; top: 15px; right: 30px; color: #fff !important; font-size: 3rem; z-index: 100;} .img_expand_view_close_btn:hover {color: #fff;} .img_expand_view_close_btn:focus {outline: none;} .COMMON_IMG_EXPAND_VIEW_WRAP .swiper-button-prev {background-image: url("/common/css/images/okdc_arrow_left.png"); background-size: 27px 50px; left: 45px;} .COMMON_IMG_EXPAND_VIEW_WRAP .swiper-button-next {background-image: url("/common/css/images/okdc_arrow_right.png"); background-size: 27px 50px; right: 45px;} .COMMON_IMG_EXPAND_VIEW_WRAP .hama_slide_counter_wrap {position: absolute; bottom: 5%; left: 50%; transform: translatex(-50%); z-index: 99; display: none;} .COMMON_IMG_EXPAND_VIEW_WRAP .hama_slide_counter {display: inline-block; padding: 0.125rem 0.75rem; background-color: #ffffffc9; border-radius: 1rem; font-size: 1rem; font-weight: 600; box-shadow: 0 0 1.5px rgb(0 0 0 / 40%); letter-spacing: 1px;} .main_img_expand_view_wrap {position: absolute; top: 72px; bottom: 220px; width: 100%; max-height: 940px;} .main_img_expand_view_wrap .img_expand_view_main_form, .main_img_expand_view_wrap .img_expand_view_main_form ul, .main_img_expand_view_wrap .img_expand_view_main_form ul > li {height: 100%;} .main_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_FORM {max-width: 940px; width: 100%; height: 100%; max-height: 940px; margin: 0 auto;} .main_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_WRAP {width: 100%; height: 100%; text-align: center;} .main_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_WRAP > div {display: block; width: 100%; height: 100%;} .main_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_WRAP img {width: 100%; height: 100%; object-fit: contain;} .sub_img_expand_view_wrap {position: absolute; bottom: 6%; left: 5%; width: 90%;} .sub_img_expand_view_wrap .swiper-slide:not(.swiper-slide-active) > .COMMON_IMG_EXPAND_VIEW_IMG_WRAP:after {content: ""; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #0009;} .sub_img_expand_view_wrap .swiper-slide {width: 150px;} .sub_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_WRAP {height: 0; padding-bottom: 100px; background-color: #fff; text-align: center; cursor: pointer; position: relative;} .sub_img_expand_view_wrap .COMMON_IMG_EXPAND_VIEW_IMG_WRAP > img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain;} /* 링크 공유하기 */ .link_share_form {padding: 2rem !important;} .link_share_tool_wrap > ul {display: flex; justify-content: space-evenly; align-items: center; gap: 1.5rem;} .link_share_tool_wrap > ul > li > a > img {width: 4rem; height: 4rem; object-fit: contain;} .link_share_tool_wrap > ul > li > a > span {display: block; text-align: center; margin-top: 0.5rem; color: #505050;} .link_share_form {margin-top: 3rem;} .link_share_form > ul {display: flex; justify-content: center; align-items: center; gap: 1.75rem;} .link_share_form > ul > li > a {display: block; width: 15rem; padding: 0.75rem 0; text-align: center; font-size: 1.25rem; border: 1px solid #C3C3C3; border-radius: 0.75rem; color: #9B9B9B; background-color: #F6F6F6;} .link_share_form > ul > li > a.link_share_btn {border: 1px solid #5D5FCB; border-radius: 0.5rem; color: #5D5FCB; background-color: #EEF7FF;} .link_share_form > ul > li > a > i {margin-left: 0.5rem;} .link_share_form > ul > li > a:hover, .link_share_form > ul > li > a:focus {opacity: 1; transition: all 0.15s ease-in-out; color: #F6F6F6; background-color: #C3C3C3;} .link_share_form > ul > li > a.link_share_btn:hover, .link_share_form > ul > li > a.link_share_btn:focus {color: #EEF7FF; background-color: #5D5FCB;} .link_addr_form_wrap {margin-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 0.25rem;} .link_addr_form_wrap > input.form-control {flex: 1;} .dafl_title_form > dt {display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem;} .dafl_title_form > dt > img {width: 2rem; height: 2rem; object-fit: contain;} .dafl_title_form > dt > span {font-size: 1.75rem; font-weight: bold; line-height: 2rem;} .dafl_title_form > dd {margin-top: 1.5rem;} /* 간편결제 버튼 CSS */ .essypay { display: flex; gap: 12px; } .essypay-item { display: flex; align-items: center; justify-content: center; width: 110px; height: 45px; border: 2px solid #ddd; border-radius: 8px; background-color: #00DE5A;cursor: pointer; transition: all 0.3s; box-sizing: border-box; } .essypay-item img { max-height: 20px; max-width: 80%; object-fit: contain; } .essypay-item input { display: none; } .essypay-item:has(input:checked) { border: 2px solid #007bff; }