/** reset css **/
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
:root {
--gray-color: #F5F5F5;
--gray2-color: #A3A3A3;
--blue-color: #0EA5E9;
--accent-color: #e74c3c; /* 강조 색상 */
--text-color: #333333; /* 본문 텍스트 색상 */
--background-color: #ffffff; /* 배경 색상 */
/* Color styles */
--white: rgba(255, 255, 255, 1);
--black: rgba(0, 0, 0, 1);
--gray--1: rgba(245, 245, 245, 1);
--gray--2: rgba(229, 229, 229, 1);
--gray--3: rgba(212, 212, 212, 1);
--gray--4: rgba(163, 163, 163, 1);
--gray--5: rgba(115, 115, 115, 1);
--gray--6: rgba(82, 82, 82, 1);
--gray--7: rgba(64, 64, 64, 1);
--gray--8: rgba(38, 38, 38, 1);
--gray--9: rgba(23, 23, 23, 1);
--gray--10: rgba(10, 10, 10, 1);
--red--1: rgba(254, 226, 226, 1);
--red--2: rgba(254, 202, 202, 1);
--red--3: rgba(252, 165, 165, 1);
--red--4: rgba(248, 113, 113, 1);
--red--5: rgba(239, 68, 68, 1);
--red--6: rgba(220, 38, 38, 1);
--red--7: rgba(185, 28, 28, 1);
--red--8: rgba(153, 27, 27, 1);
--red--9: rgba(127, 29, 29, 1);
--red--10: rgba(69, 10, 10, 1);
--red--rose--1: rgba(255, 228, 230, 1);
--red--rose--2: rgba(254, 205, 211, 1);
--red--rose--3: rgba(253, 164, 175, 1);
--red--rose--4: rgba(251, 113, 133, 1);
--red--rose--5: rgba(244, 63, 94, 1);
--red--rose--6: rgba(225, 29, 72, 1);
--red--rose--7: rgba(190, 18, 60, 1);
--red--rose--8: rgba(159, 18, 57, 1);
--red--rose--9: rgba(136, 19, 55, 1);
--red--rose--10: rgba(76, 5, 25, 1);
--orange--1: rgba(255, 237, 213, 1);
--orange--2: rgba(254, 215, 170, 1);
--orange--3: rgba(253, 186, 116, 1);
--orange--4: rgba(251, 146, 60, 1);
--orange--5: rgba(249, 115, 22, 1);
--orange--6: rgba(234, 88, 12, 1);
--orange--7: rgba(194, 65, 12, 1);
--orange--8: rgba(154, 52, 18, 1);
--orange--9: rgba(124, 45, 18, 1);
--orange--10: rgba(67, 20, 7, 1);
--yellow--1: rgba(254, 249, 195, 1);
--yellow--2: rgba(254, 240, 138, 1);
--yellow--3: rgba(253, 224, 71, 1);
--yellow--4: rgba(250, 204, 21, 1);
--yellow--5: rgba(234, 179, 8, 1);
--yellow--6: rgba(202, 138, 4, 1);
--yellow--7: rgba(161, 98, 7, 1);
--yellow--8: rgba(133, 77, 14, 1);
--yellow--9: rgba(113, 63, 18, 1);
--yellow--10: rgba(66, 32, 6, 1);
--lime--1: rgba(236, 252, 203, 1);
--lime--2: rgba(217, 249, 157, 1);
--lime--3: rgba(190, 242, 100, 1);
--lime--4: rgba(163, 230, 53, 1);
--lime--5: rgba(132, 204, 22, 1);
--lime--6: rgba(101, 163, 13, 1);
--lime--7: rgba(77, 124, 15, 1);
--lime--8: rgba(63, 98, 18, 1);
--lime--9: rgba(54, 83, 20, 1);
--lime--10: rgba(26, 46, 5, 1);
--green--1: rgba(220, 252, 231, 1);
--green--2: rgba(187, 247, 208, 1);
--green--3: rgba(134, 239, 172, 1);
--green--4: rgba(74, 222, 128, 1);
--green--5: rgba(34, 197, 94, 1);
--green--6: rgba(22, 163, 74, 1);
--green--7: rgba(21, 128, 61, 1);
--green--8: rgba(22, 101, 52, 1);
--green--9: rgba(20, 83, 45, 1);
--green--10: rgba(5, 46, 22, 1);
--emerald--1: rgba(209, 250, 229, 1);
--emerald--2: rgba(167, 243, 208, 1);
--emerald--3: rgba(110, 231, 183, 1);
--emerald--4: rgba(52, 211, 153, 1);
--emerald--5: rgba(16, 185, 129, 1);
--emerald--6: rgba(5, 150, 105, 1);
--emerald--7: rgba(4, 120, 87, 1);
--emerald--8: rgba(6, 95, 70, 1);
--emerald--9: rgba(6, 78, 59, 1);
--emerald--10: rgba(2, 44, 34, 1);
--teal--1: rgba(204, 251, 241, 1);
--teal--2: rgba(153, 246, 228, 1);
--teal--3: rgba(94, 234, 212, 1);
--teal--4: rgba(45, 212, 191, 1);
--teal--5: rgba(20, 184, 166, 1);
--teal--6: rgba(13, 148, 136, 1);
--teal--7: rgba(15, 118, 110, 1);
--teal--8: rgba(17, 94, 89, 1);
--teal--9: rgba(19, 78, 74, 1);
--teal--10: rgba(4, 47, 46, 1);
--cyan--1: rgba(207, 250, 254, 1);
--cyan--2: rgba(165, 243, 252, 1);
--cyan--3: rgba(103, 232, 249, 1);
--cyan--4: rgba(34, 211, 238, 1);
--cyan--5: rgba(6, 182, 212, 1);
--cyan--6: rgba(8, 145, 178, 1);
--cyan--7: rgba(14, 116, 144, 1);
--cyan--8: rgba(21, 94, 117, 1);
--cyan--9: rgba(22, 78, 99, 1);
--cyan--10: rgba(8, 51, 68, 1);
--sky--1: rgba(224, 242, 254, 1);
--sky--2: rgba(186, 230, 253, 1);
--sky--3: rgba(125, 211, 252, 1);
--sky--4: rgba(56, 189, 248, 1);
--sky--5: rgba(14, 165, 233, 1);
--sky--6: rgba(2, 132, 199, 1);
--sky--7: rgba(3, 105, 161, 1);
--sky--8: rgba(7, 89, 133, 1);
--sky--9: rgba(12, 74, 110, 1);
--sky--10: rgba(8, 47, 73, 1);
--blue--1: rgba(219, 234, 254, 1);
--blue--2: rgba(191, 219, 254, 1);
--blue--3: rgba(147, 197, 253, 1);
--blue--4: rgba(96, 165, 250, 1);
--blue--5: rgba(59, 130, 246, 1);
--blue--6: rgba(37, 99, 235, 1);
--blue--7: rgba(29, 78, 216, 1);
--blue--8: rgba(30, 64, 175, 1);
--blue--9: rgba(30, 58, 138, 1);
--blue--10: rgba(23, 37, 84, 1);
--indigo--1: rgba(224, 231, 255, 1);
--indigo--2: rgba(199, 210, 254, 1);
--indigo--3: rgba(165, 180, 252, 1);
--indigo--4: rgba(129, 140, 248, 1);
--indigo--5: rgba(99, 102, 241, 1);
--indigo--6: rgba(79, 70, 229, 1);
--indigo--7: rgba(67, 56, 202, 1);
--indigo--8: rgba(55, 48, 163, 1);
--indigo--9: rgba(49, 46, 129, 1);
--indigo--10: rgba(30, 27, 75, 1);
--violet--1: rgba(237, 233, 254, 1);
--violet--2: rgba(221, 214, 254, 1);
--violet--3: rgba(196, 181, 253, 1);
--violet--4: rgba(167, 139, 250, 1);
--violet--5: rgba(139, 92, 246, 1);
--violet--6: rgba(124, 58, 237, 1);
--violet--7: rgba(109, 40, 217, 1);
--violet--8: rgba(91, 33, 182, 1);
--violet--9: rgba(76, 29, 149, 1);
--violet--10: rgba(46, 16, 101, 1);
--purple--1: rgba(243, 232, 255, 1);
--purple--2: rgba(233, 213, 255, 1);
--purple--3: rgba(216, 180, 254, 1);
--purple--4: rgba(192, 132, 252, 1);
--purple--5: rgba(168, 85, 247, 1);
--purple--6: rgba(147, 51, 234, 1);
--purple--7: rgba(126, 34, 206, 1);
--purple--8: rgba(107, 33, 168, 1);
--purple--9: rgba(88, 28, 135, 1);
--purple--10: rgba(59, 7, 100, 1);
--fuschia--1: rgba(250, 232, 255, 1);
--fuschia--2: rgba(245, 208, 254, 1);
--fuschia--3: rgba(240, 171, 252, 1);
--fuschia--4: rgba(232, 121, 249, 1);
--fuschia--5: rgba(217, 70, 239, 1);
--fuschia--6: rgba(192, 38, 211, 1);
--fuschia--7: rgba(162, 28, 175, 1);
--fuschia--8: rgba(134, 25, 143, 1);
--fuschia--9: rgba(112, 26, 117, 1);
--fuschia--10: rgba(74, 4, 78, 1);
--pink--1: rgba(252, 231, 243, 1);
--pink--2: rgba(251, 207, 232, 1);
--pink--3: rgba(249, 168, 212, 1);
--pink--4: rgba(244, 114, 182, 1);
--pink--5: rgba(236, 72, 153, 1);
--pink--6: rgba(219, 39, 119, 1);
--pink--7: rgba(190, 24, 93, 1);
--pink--8: rgba(157, 23, 77, 1);
--pink--9: rgba(131, 24, 67, 1);
--pink--10: rgba(80, 7, 36, 1);
/* Text-size styles */
--regular---typography2: 48px;
--regular---typography3: 36px;
--regular---typography4: 28px;
--regular---typography5: 24px;
--regular---typography6: 20px;
--regular---typography7: 18px;
--regular---typography8: 16px;
--regular---typography9: 14px;
--regular---typography10: 12px;
--regular---typography11: 11px;
--regular---line-height1---typography1: 60px;
--regular---line-height1---typography2: 48px;
--regular---line-height1---typography3: 36px;
--regular---line-height1---typography4: 28px;
--regular---line-height1---typography5: 24px;
--regular---line-height1---typography6: 20px;
--regular---line-height1---typography7: 18px;
--regular---line-height1---typography8: 16px;
--regular---line-height1---typography9: 14px;
--regular---line-height1---typography10: 12px;
--regular---line-height1---typography11: 11px;
--bold---typography2: 48px;
--bold---typography3: 36px;
--bold---typography4: 28px;
--bold---typography5: 24px;
--bold---typography6: 20px;
--bold---typography7: 18px;
--bold---typography8: 16px;
--bold---typography9: 14px;
--bold---typography10: 12px;
--bold---typography11: 11px;
--bold---line-height1---typography1: 60px;
--bold---line-height1---typography2: 48px;
--bold---line-height1---typography3: 36px;
--bold---line-height1---typography4: 28px;
--bold---line-height1---typography5: 24px;
--bold---line-height1---typography6: 20px;
--bold---line-height1---typography7: 18px;
--bold---line-height1---typography8: 16px;
--bold---line-height1---typography9: 14px;
--bold---line-height1---typography10: 12px;
--bold---line-height1---typography11: 11px;
/* Effect styles */
--shadow-style--100: 0px 4px 4px rgba(24, 39, 75, 0.08), 0px 2px 4px rgba(10, 10, 10, 0.12);
--shadow-style--200: 0px 8px 8px rgba(10, 10, 10, 0.08), 0px 4px 6px rgba(10, 10, 10, 0.12);
--shadow-style--300: 0px 8px 16px rgba(10, 10, 10, 0.08), 0px 6px 8px rgba(10, 10, 10, 0.12);
--shadow-style--400: 0px 8px 24px rgba(10, 10, 10, 0.08), 0px 6px 12px rgba(10, 10, 10, 0.12);
--shadow-style--500: 0px 10px 32px rgba(10, 10, 10, 0.1), 0px 6px 14px rgba(10, 10, 10, 0.12);
--shadow-style--600: 0px 12px 42px rgba(10, 10, 10, 0.12), 0px 8px 18px rgba(10, 10, 10, 0.12);
--shadow-style--700: 0px 14px 64px rgba(10, 10, 10, 0.12), 0px 8px 22px rgba(10, 10, 10, 0.12);
--shadow-style--800: 0px 18px 88px rgba(10, 10, 10, 0.14), 0px 8px 28px rgba(10, 10, 10, 0.12);
}
.dongle-light {
font-family: "Dongle", serif;
font-weight: 300;
font-style: normal;
}
.dongle-regular {
font-family: "Dongle", serif;
font-weight: 400;
font-style: normal;
}
.dongle-bold {
font-family: "Dongle", serif;
font-weight: 700;
font-style: normal;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden; font-size: 16px;}
html,body{width: 100%; min-height:100%;}
body,th,td,input,select,textarea,button,*{font-family: 'Roboto', 'Noto Sans KR', sans-serif; letter-spacing: -0.28px;}
body,th,td,input,select,textarea,button{font-size: 16px; line-height:1.5; font-family: 'Roboto', 'Noto Sans KR', sans-serif; color:#444444;}
fieldset,img{border:0 none;}
dl,ul,ol,menu,li{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;}
input,select,textarea,button{font-size:100%;vertical-align:middle;appearance: none;-moz-appearance: none;-webkit-appearance: none;border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0;}
button{border:0 none;background-color:transparent;cursor:pointer;}
table{border-collapse:collapse;border-spacing:0;}
address,caption,cite,code,dfn,em,var{font-style:normal;}
body{height:100%;background:#ccc;color:#444444;-webkit-text-size-adjust:none;}
.maxCont{max-width: 460px;}
a{display: inline-block; color:inherit;text-decoration:none;}
a:active, a:hover{text-decoration:none;}
input[type='text'],input[type='password'],input[type='submit'],input[type='search'],button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file']{-webkit-appearance:none;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;}
input[type='logintext'],input[type='loginpassword']{-webkit-appearance:none;border-top-left-radius:9px;border-top-right-radius:9px;border-bottom-left-radius:9px;border-bottom-right-radius:9px;}
body{ position: relative;}
header {
/*border-bottom: 1px solid #c4c4c4;*/
display: flex;
justify-content: space-between;
align-items: center;
padding:1.25em 1em;
position: fixed;
top:0px; left:0px; width:100%;
box-sizing: border-box; z-index:100;
left: 50%;
transform: translateX(-50%);
max-width:460px;
background-color: var(--gray-color);
}
.no-logo.header h1{display:none;}
.headerLogo h1{padding:0px 0px; display: flex;}
.headerLogo h1 a{
display: inline-block;
position: relative;
width: 155px;
height: 28px;
background: url(../images/common/logo.png) 0 0 no-repeat;
background-size: contain;
background-position: center;
font-size:0px;
}
header .back{
background-size: contain;
background-position: center;
font-size:0px;width: 25px; height: 25px; margin-right:30px;}
header a{ display: flex; align-content: center; justify-items: center; position:relative;}
/*
header .mobile-toggle{background: url(../images/common/ico_nav.png) 0 0 no-repeat;
background-size: contain;
background-position: center;
font-size:0px;width: 30px; height: 30px;}
*/
.content-body{min-height: 100vh; width:100%;padding-top: 70px !important;padding-bottom:80px !important; background-color: var(--gray-color);}
.gray .content-body{background-color: #f5f5f5;}
.gray header{background-color: #f5f5f5; box-shadow: none;z-index:110;}
.content-body.full{padding:0px;}
.p20{padding:20px;}
.pw20{padding:0px 20px;}
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.wrapper {
position: absolute;
width: 100%;
height: 300%;
top: -100%;
left: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0;
padding-bottom: -200px;
overflow: hidden;
overflow: hidden;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border:0px;
}
.box-round{background-color: #fff; border-radius: 14px; padding:18px 20px;}
.box-round.not{background-color:transparent;}
.box-round.left{text-align: left;}
.box-round h4{padding:0px; margin:0px; margin-bottom:24px;}
#step2.box-round h4{margin-bottom:0px;}
.box-round li{font-size: 0.85em;white-space: pre-line;}
.box-round .btn-wrap{margin:0em; margin-top:1em;}
.box-round + .box-round{margin-top:1em;}
/*
.ifr-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.ifr-wrapper .inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container {
position: relative;
width: 100%;
height: 90vh;
overflow: scroll;
}
.wrapper {
position: absolute;
width: 100%;
height: 300%;
top: -100%;
left: 0;
position: absolute;
width: 100%;
height: 349%;
top: -21%;
left: 0;
padding-bottom: -200px;
overflow: hidden;
overflow: hidden;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
*/
.footer{display: none;}
.footer .solution_content_wrap{width:100%; max-width:1500px;margin: 0 auto;text-align: center;padding:30px 40px; background-color: #f4fef6;}
.footer .footer_content { width:100%; margin-top: 0px; margin-bottom: 0px; padding-bottom: 26px; text-align: left;
border-collapse: separate; border-bottom: 1px solid #c4c4c4; line-height:1.5;}
.footer .footer_content_sub{margin-top: 10px; margin-bottom: 0px; padding-top: 0; padding-bottom: 0; text-align: left; font-size:12px;}
.footer table th{font-size: 18px; padding-bottom:10px; color:#777;}
.footer table td{font-size: 14px; color:#555;}
.footer table.footer_content_sub td{font-size: 12px;}
.tab.right{text-align: right;}
.tab-box ul { width: 100%; border-bottom: 0.5px solid #888; margin-bottom: 2.5em; }
.tab li { display: inline-block; color: #231f20; font-weight: normal;}
.tab li + li{margin-left:0em;}
.tab li.on { color: #231f20; font-weight: bold; border-bottom: 3px solid #231f20; }
.tab-content { display: none; position: relative; }
.tab-content.on { display: block; }
.tab-content h3 { padding-top: 80px; }
.tab.type01 { background-color: #fff; display: inline-block; border-radius: 10em; }
.tab.type01 li { width: 40px; height: 40px; text-align: center; }
.tab.type01 li.on { color: #fff; background-color: #000; border-radius: 3em; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); }
.tab.type02 { display: flex !important; width: 100%; background-color: #E5E5E5; border-radius: 8px; color:var(--gray2-color);}
.tab.type02 li { display: inline-flex; width: 50%; line-height: 44px; font-weight: bold; text-align: center; cursor: pointer; color:var(--gray2-color); font-size: 18px; letter-spacing: -0.36px; justify-content: center; align-items: center;}
.tab.type02 li.on { margin: 0px; line-height: 44px; color: var(--blue-color); background: #fff; border-radius: 10px; border: none;border-radius: 8px;font-weight: 700;
border: 2px solid var(--sky-5, #0EA5E9); background: #FFF; }
.tab.type02 li.active { margin: 0px; line-height: 40px; color: var(--blue-color); background: #fff; border-radius: 10px; border: none;border-radius: 8px;font-weight: 700;
border: 2px solid var(--sky-5, #0EA5E9); background: #FFF; }
.tab.type03 { display: flex !important; width: 100%; background-color: #E5E5E5; border-radius: 8px; color:var(--gray2-color);}
.tab.type03 li { display: inline-flex; width: 50%; line-height: 44px; font-weight: bold; text-align: center; cursor: pointer; color:var(--gray2-color); font-size: 18px; letter-spacing: -0.36px; justify-content: center; align-items: center;
color: var(--gray-5, #737373);
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;
}
.tab.type03 li a{width:100%;padding:10px 20px;}
.tab.type03 li.on { margin: 0px; line-height: 44px; color: var(--blue-color); background: #fff; border-radius: 10px;
border: none;border-radius: 8px;font-weight: 700;
border: 1px solid var(--sky-5, #0EA5E9); background: #FFF;color: var(--sky-5, #0EA5E9);
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px; }
.tab.type03 li.active { margin: 0px; line-height: 40px; color: var(--blue-color); background: #fff;
border-radius: 10px; border: none;border-radius: 8px;font-weight: 700;
border: 1px solid var(--sky-5, #0EA5E9); background: #FFF; color: var(--sky-5, #0EA5E9);
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;}
.tabCont {padding:48px 0em;}
.tabCont{display: none;}
.tabCont.on{display: block;}
/* BUTTON */
.btn { display: inline-block; min-width: 50px; cursor: pointer; box-sizing: border-box; text-align: center; font-family: 'Noto Sans KR', 'Sans-serif';}
.btn.ico { display: inline-flex; align-items: center; }
.btn.type01 { color: #fff; background: var(--sky-6, #0284C7);font-size: 14px; height: 35px; padding: 6px 12px; font-size: 14px;
font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: -0.28px;}
.btn.type01.green{background:#10B981;}
.btn.type02 { color: #343434; background-color: #fff; border: 1px solid #eff2f6; height: 52px; line-height: 52px; font-size: 14px; font-weight: 800; box-shadow: 0 6px 10px 0 rgba(119, 131, 153, 0.2); }
.btn.type03 { color: #fff; background-color: #b4b4b4; font-weight: 600;}
.btn.type03.cancel { text-decoration: line-through;}
.btn.type04 { color: #279E73; background-color: #ffffff; font-weight: 600;}
.btn.type05 { color: #ffffff; background-color: #008e5f; font-weight: 600;}
.btn.type06 { color: #000; border: 1px solid #E0E0E0; font-weight: 600;}
.btn.type07 { color: #008e5f; background-color: #ffffff; border: 3px solid #008e5f; font-weight: 700;}
.btn.type08 { color: #ffffff; background-color: #0284C7; font-weight: 600;}
.btn.type09 { color: #ffffff; background-color: #279E73; font-weight: 600;}
.btn.type10 { color: #000; background-color: #C0F1DF; font-weight: 600;}
.btn.type11 { color: #fff; background-color: #0284C7; height: 50px; font-size: 16px; font-weight: 800;}
.btn.type12 { color: #000; background-color: #fff; border:1px solid #000; height: 50px; font-size: 14px; font-weight: 800;}
.btn.type13 { color: #737373; background: #E5E5E5; font-weight: 600;}
.btn.type13.cancel { text-decoration: line-through;}
.point.type02{color:#0099ff;}
.btn.full { width: 100%; height: 45px; line-height: 45px; font-size: 1rem; padding: 0px;}
.btn.medium { padding: 0em 3em; }
.btn.xx-small { height: 38px; line-height: 36px; font-size: 14px; padding: 0em 2em; font-weight: 400;}
.btn.small { height: 44px; padding: 6px 10px; font-size: 14px; font-weight: 400;font-size: 14px;
font-weight: 400; line-height:43px; letter-spacing: -0.28px;padding: initial;}
.gd-wrap .btn.small {font-size:16px;}
.btn.x-small { height: 46px; line-height: 44px; font-size: 0.875rem; padding:0px 2em;}
.btn.input { height: 45px; line-height: 43px; font-weight: 300; padding: 0em 1em; font-size: 0.875rem; }
.btn.large { height: 70px; line-height: 68px; font-size: 1.125rem; }
.btn.full { width: 100%; }
.btn.type01.search { min-width: 90px; }
.btn.type01.search.round { border-radius: 0.75em; }
.btn.round { border-radius: 10px; -webkit-border-radius: 10px; }
.btn.type01.round,
.btn.type03.round ,
.btn.type02.round { border-radius: 8px; }
.btn.type02.round { border-radius: 3em; -webkit-border-radius: 3em; }
.btn.type05.round,
.btn.type06.round,
.btn.type07.round { border-radius: 6px; -webkit-border-radius: 6px; }
.point { color: #32AF81; }
.center { text-align: center; }
.content-summary span { font-size: 14px; color: #000; font-weight: bold; margin-right: 1em; }
.content-summary,
.table-summary { display: flex; width: 100%; justify-content: space-between; align-items: center; margin: 2.5em 0em 1.25em 0em; }
.table-summary .total { font-size: 16px; font-weight: bold; }
.table-summary .total b { font-weight: 900; }
.tag.type01{background-color: #0099ff; padding:2px 10px; display: inline-block; border-radius: 3px; color:#fff; font-size:12px;}
section.basic{padding:30px 0px;}
.select-label {
display: block;
font-size: 16px;
color: #333;
font-weight: 500;
margin-bottom: 8px;
}
.weekly-select {
width: 100%;
padding: 8px 10px;
font-size: 14px;
border: 1.5px solid #ccc;
border-radius: 8px;
background-color: #fff;
color: #333;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position-x: 95%;
background-position-y: center;
background-size: 18px;
}
.flex.row{display:flex; flex-direction: row; gap:5px;}
.flex-3-1 > *:nth-child(1){flex:3;}
.flex-3-1 > *:nth-child(2){flex:1;}
.flex-2-1 > *:nth-child(1){flex:2;}
.flex-2-1 > *:nth-child(2){flex:1;}
img { vertical-align: top}
.input-text { display: inline-block; border: 1px #c2c2c2 solid; padding: 0 20px; height: 50px; line-height: 50px; background-color: #fff; font-size: 0; vertical-align: top; box-sizing: border-box; }
.input-text input { line-height: 48px; }
.input-password { display: inline-block; border: 1px #c2c2c2 solid; padding: 0 20px; height: 50px; background-color: #fff; box-sizing: border-box; }
.text-area { display: inline-block; border: 1px #c2c2c2 solid; background-color: #fff; resize: none; padding: 20px; }
.file { display: inline-block; }
input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea { width: 100%; border: 0 none; background-color: transparent;
resize: none; border: 1px solid #E0E0E0; border-radius: 4px; font-size: 14px; padding-left: 1em; color: #000;
border: 1px solid var(--gray-4, #A3A3A3);
background: var(--white, #FFF);padding: 14px 12px; align-items: center; gap: 10px; align-self: stretch;
font-size: 16px;font-weight: 400;letter-spacing: -0.32px;
color: var(--gray-5, #737373);
border-radius: 8px;
border: 1px solid var(--gray-3, #D4D4D4);
background: #FFF;
font-style: normal;
font-weight: 400;
line-height: 130%;
letter-spacing: -0.22px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important; /* 배경색 덮기 */
-webkit-text-fill-color: var(--gray-5, #737373) !important; /* 텍스트 색 */
transition: background-color 5000s ease-in-out 0s;
font-size: 16px !important;
}
input.datepicker{padding:0px 1em;}
.fa-calendar:before {
content: url("data:image/svg+xml;utf8,");
display: inline-block;
width: 21px;
height: 20px;
}
.right{text-align: right;}
.center{text-align:center;}
.title-wrap{margin:2em 0em 1em 0em;}
.title-wrap.m0{margin:2em 0em 0em 0em;}
.title-wrap.gd{margin:2em 0em 28px 0em;}
/* SIGNUP */
.mt70 { padding-top: 70px; }
.mb24{margin-bottom:24px;}
.full-box{display: inline-block; width:100%;}
.member-tab-box{margin:24px 0px;}
.member-signup{display: flex; gap:20px; flex-direction: column;}
.member-container .member-signup-area { max-width: 540px; margin: 0 auto; }
.member-container .member-signup-area .title { color: #000; font-size: 28px; font-weight: 700; line-height: 100%; letter-spacing: -0.56px; text-align: center; }
.member-container .member-signup-area .left-title {color: var(--gray-6, #525252); font-size: 14px; font-weight: 400; letter-spacing: -0.28px;}
.member-container .member-signup-layout { display: flex; flex-direction: column; align-items: baseline; gap: 8px; }
.member-container .member-signup-input-area { display: flex; gap: 10px; width: 100%; }
.member-container .member-signup-input-area input { margin-right: 0 !important; }
.member-container .member-signup-hr { padding: 30px 0; border-bottom: 1px solid #e0e0e0; }
.member-container .member-agree-layout { padding: 30px; background: #f4f6fa; border-radius: 0.875em; border: solid 1px #e8e8e8; }
.member-container .member-signup-area .btn { display: flex;
width: 100%;
height: 44px;
padding: 12px 32px;
justify-content: center;
align-items: center;
gap: 6px;border-radius: 8px; font-weight: 400;}
.member-container .btn.type01.round { border-radius: 0.75em !important; -webkit-border-radius: 0.75em !important; font-size: 1rem; }
.member-container .member-agree-layout-hr { margin: 21px 0 26px 0; border-bottom: 1px solid #e0e0e0; }
.member-container .member-agree-layout .agree-text { color: #000; font-size: 14px; font-weight: 800; }
.member-container .member-agree-layout input[type="checkbox"]+label span.checkbox { margin-right: 19px; }
.member-container .member-agree-layout .agree-detail-btn { color: #000; font-size: 14px; font-weight: 500; text-decoration: underline; cursor: pointer; }
.member-container .signup-btn-area { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; padding: 0px 0 100px; }
.member-container .signup-btn-area button { font-size: 1.25rem; font-weight: bold; border-radius: 0.75em; }
.member-container .div-input { display: flex; align-items: center; gap: 20px; height: 100%; width: 100%; border: 0 none; background-color: transparent; font-size: 13px; resize: none; border: 1px solid #E0E0E0; border-radius: 0.75em; font-size: 14px; height: 52px; line-height: 45px; padding-right: 25px; color: #000; }
.member-container .div-input input { border: none !important; height: auto !important; }
.member-container .div-input input:focus { outline: none; }
.member-container .div-input span { font-size: 16px; font-weight: 500; color: #000; }
.member-container .member-corporate-area{margin-bottom:30px;}
.member-signup-area .btn.type01 {font-weight: 500;}
/* FIND ID, PWD */
.member-container .member-find-area { margin: 0 auto; max-width: 420px; }
.member-container .member-find-area .title { padding: 150px 0 50px 0px; color: #000; font-size: 40px; font-weight: 900; text-align: center; }
.member-container .member-find-area .find-id-pw-btn { font-size: 1.125rem !important; border-radius: 10px !important; }
.member-container .member-find-area .member-type-area { display: flex; gap: 39px; margin: 60px 0 36px 0; border-radius: 10px; }
.member-individual-area { }
.member-individual-area .input-item+.input-item { margin-top: 10px; }
.member-type-area span { color: #000; font-size: 16px; font-weight: 500; }
.summary{width:100%; padding:12px 5px;background-color: #EBFBF5; border-radius: 5px; display: flex; justify-content: center; align-items: center;}
.summary h3{font-size: 16px; font-weight: 800; margin-right: 20px; padding-right: 20px; border-right: 3px solid #279E73;}
.summary span{font-size: 16px;font-weight: 800; width: 100px;}
.content-body{padding:0px 20px; padding-bottom: 150px !important;}
.content-body.full{padding:0px 0em;}
.content-body.pb0{padding-bottom:0px !important;}
.content-body.full .cont{padding:0px 1em;}
.table-wrap{border-top: 0 none;margin-top: 6px;}
.table-wrap .data-table{border-bottom: 0 none;}
.table-wrap .data-table tr td.title{text-align: left;}
.table-wrap .data-table tr td.title a{display: inline-block;color: #000;white-space: nowrap;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;}
.table-wrap.type01{ margin-top: 2em; margin-bottom: 3.5em;}
.table-wrap.type01 h3{ font-size: 16px; font-weight: bold; color: #08073a;padding: 0px 0px 7px 0px;}
.table-wrap.type01 .data-table{border-bottom: 1px solid #ddd; width: 100%;}
.table-wrap.type01 .data-table thead tr th{vertical-align: middle;
background-color: #008e5f;
color: #fff;
font-weight: normal;
font-size: 14px; padding: 0.5em 0em;}
.table-wrap.type01 .data-table tr th{color: #000; font-weight: normal; word-break: keep-all;}
.table-wrap.type01 .data-table tr th.bg,.table-wrap.type01 .data-table tr td.bg{background-color: #f4f4f4;}
.table-wrap.type01 .data-table tbody tr:first-child td,
.table-wrap.type01 .data-table tbody tr:first-child th{border-top: 1px solid #dddddd;border-left: 0 none;}
.table-wrap.type01 .data-table tbody tr td,
.table-wrap.type01 .data-table tbody tr th{font-size: 14px;color: #000;
border-top: 1px solid #E5E5E5;border-left: 0 none; text-align: center;padding: 0.75em 0em;font-weight: 500;}
.table-wrap.type01 .data-table tbody tr.bold td,
.table-wrap.type01 .data-table tbody tr.bold th {font-size: 14px;padding: 0.75em 0em;color: #000;font-weight: 700;}
.table-wrap.type01 .data-table tbody tr.line td,
.table-wrap.type01 .data-table tbody tr.line th {border-top: 1px solid #B5B1B2;}
.table-wrap.type01 .data-table tbody tr.bold td a, .table-wrap.type01 .data-table tbody tr.bold th a{color:#000;}
.table-wrap.type01 .data-table tr td.title{text-align: left;vertical-align: middle;}
.table-wrap.type01 .data-table tr td.title a{display: inline-block;max-width: 800px;padding-left: 40px;color: #000;white-space: nowrap;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;}
.table-wrap + .table-wrap{margin-top:2em;}
.table-wrap.type02{}
.table-wrap.type02 .data-table{border-bottom: 1px solid #d2d0d4;}
.table-wrap.type02 .data-table tr th{padding: 8px 0;font-size: 1rem;line-height: 1.75rem;color: #000;font-weight: normal;border-top: 1px solid #000;border-left: 0 none;background-color: transparent;}
.table-wrap.type02 .data-table tr td{padding: 10px 0;font-size: 0.9rem;line-height: 1.75rem;color: #4c4c4c;text-align: center;border-left: 0 none;border-top: 1px solid #d2d0d4;}
.table-wrap.type02 .data-table tr td.title{text-align: left;vertical-align: middle;}
.table-wrap.type02 .data-table tr td.title a{display: inline-block;max-width: 300px;padding-left: 40px;color: #000;white-space: nowrap;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;}
.table-wrap.type03{ margin-top: 0px; margin-bottom: 3.5em;}
.table-wrap.type03 h3{ font-size: 16px; font-weight: bold; color: #08073a;padding: 0px 0px 7px 0px;}
.table-wrap.type03 .data-table{border-bottom: 1px solid #ddd; width: 100%;}
.table-wrap.type03 .data-table thead tr th{vertical-align: middle;
background-color: #fff;
color: #333;
font-weight: normal;
font-size: 14px; padding: 13px 0em;color: var(--gray-10, #0A0A0A);
text-align: center;
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;}
.table-wrap.type03 .data-table tr th{color: #000; font-weight: normal; word-break: keep-all;}
.table-wrap.type03 .data-table tr th.bg,.table-wrap.type01 .data-table tr td.bg{background-color: #fefefe;}
.table-wrap.type03 .data-table tbody tr td,
.table-wrap.type03 .data-table tbody tr th{border-top: 1px solid #dddddd;border-left: 0 none;color: var(--gray-5, #737373);
text-align: center;
padding:14px 2px;
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: -0.24px;
color: var(--gray-5, #737373);
text-align: center;
/* Regular/Line height1/Typography10 */
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: -0.24px;
}
.table-wrap.type03 .data-table tbody tr.bold td,
.table-wrap.type03 .data-table tbody tr.bold th {font-size: 14px;padding: 0.75em 0em;color: #000;font-weight: 700;}
.table-wrap.type03 .data-table tbody tr.line td,
.table-wrap.type03 .data-table tbody tr.line th {border-top: 1px solid #B5B1B2;}
.table-wrap.type03 .data-table tbody tr.bold td a, .table-wrap.type01 .data-table tbody tr.bold th a{color:#000;}
.table-wrap.type03 .data-table tr td.title{text-align: left;vertical-align: middle;}
.table-wrap.type03 .data-table tr td.title a{display: inline-block;max-width: 800px;padding-left: 40px;color: #000;white-space: nowrap;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;}
/********/
.table-wrap.type04{ margin-top: 20px; margin-bottom: 74px;}
.table-wrap.type04 h3{ font-size: 16px; font-weight: bold; color: #08073a;padding: 0px 0px 7px 0px;}
.table-wrap.type04 .data-table{border-bottom: 1px solid #ddd; width: 100%; background: #fff;}
.table-wrap.type04 .data-table thead tr th{vertical-align: middle;
background-color: #fff;
color: #333;
font-weight: normal;
font-size: 14px; padding: 0.5em 0em;}
.table-wrap.type04 .data-table tr th{color: #000; font-weight: normal; word-break: keep-all;}
.table-wrap.type04 .data-table tr th.bg,.table-wrap.type01 .data-table tr td.bg{background-color: #f4f4f4;}
.table-wrap.type04 .data-table tbody tr:first-child td,
.table-wrap.type04 .data-table tbody tr:first-child th{border-top: 1px solid #dddddd;border-left: 0 none;}
.table-wrap.type04 .data-table tbody tr td,
.table-wrap.type04 .data-table tbody tr th{font-size: 12px;color: #000;
border-top: 1px solid #E5E5E5;border-left: 0 none; text-align: center;padding: 0.75em 0em;font-weight: 500; word-break: keep-all;}
.table-wrap.type04 .data-table tbody tr.bold td,
.table-wrap.type04 .data-table tbody tr.bold th {font-size: 14px;padding: 0.75em 0em;color: #000;font-weight: 700;}
.table-wrap.type04 .data-table tbody tr.line td,
.table-wrap.type04 .data-table tbody tr.line th {border-top: 1px solid #B5B1B2;}
.table-wrap.type04 .data-table tbody tr.bold td a, .table-wrap.type01 .data-table tbody tr.bold th a{color:#000;}
.table-wrap.type04 .data-table tr td.title{text-align: left;vertical-align: middle;}
.table-wrap.type04 .data-table tr td.title a{display: inline-block;max-width: 800px;padding-left: 40px;color: #000;white-space: nowrap;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;}
.table-wrap.type05{ margin-top: 2em; margin-bottom: 1.5em;}
.table-wrap.type05 h3{ font-size: 16px; font-weight: bold; color: #08073a;padding: 0px 0px 7px 0px;}
.table-wrap.type05 .data-table{width: 100%; }
.table-wrap.type05 .data-table thead tr th{vertical-align: middle;
background-color: #e6f9e8;
color: #333;
font-weight: normal;
font-size: 14px; padding: 0.5em 0em;}
.table-wrap.type05 .data-table tr th{color: #000; font-weight: normal; word-break: keep-all;}
.table-wrap.type05 .data-table tr th.bg,.table-wrap.type01 .data-table tr td.bg{background-color: #fff; border-bottom:1px solid #D4D4D4;}
.table-wrap.type05 .data-table tbody tr:first-child td,
.table-wrap.type05 .data-table tbody tr:first-child th{border-left: 0 none;}
.table-wrap.type05 .data-table tbody tr td,
.table-wrap.type05 .data-table tbody tr th{font-size: 11px;color: #000;
border-left: 0 none; text-align: center;padding: 8px 0em;font-weight: 500; word-break: keep-all; border-bottom:1px solid #D4D4D4;}
.table-wrap.type05 .data-table tbody tr.bold td,
.table-wrap.type05 .data-table tbody tr.bold th {font-size: 11px;padding: 0.75em 0em;color: #000;font-weight: 500; border-bottom:1px solid #D4D4D4;}
.table-wrap.type05 .data-table tbody tr.line td,
.table-wrap.type05 .data-table tbody tr.line th {}
.table-wrap.type05 .data-table tbody tr.bold td a, .table-wrap.type01 .data-table tbody tr.bold th a{color:#000;}
.table-wrap.type05 .data-table tr td.title{text-align: left;vertical-align: middle;}
.table-wrap.type05 .data-table tr td.title a{display: inline-block;max-width: 800px;padding-left: 40px;color: #000;white-space: nowrap;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;}
.table-wrap.type05 .data-table tbody tr:last-child th:first-child{border-radius: 0px 0px 0px 10px;}
.table-wrap.type05 .data-table tbody tr:last-child td:last-child{border-radius: 0px 0px 10px 0px;}
.table-wrap.type06{ margin-top: 0px; margin-bottom: 12px;}
.table-wrap.type06 h3{ font-size: 16px; font-weight: bold; color: #08073a;padding: 0px 0px 7px 0px;}
.table-wrap.type06 .data-table{border-bottom: 1px solid #ddd; width: 100%;}
.table-wrap.type06 .data-table thead tr th{vertical-align: middle;
background-color: #fff;
color: #333;
font-weight: normal;
font-size: 14px; padding: 9px 0em;color: var(--gray-5, #737373);
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;}
.table-wrap.type06 .data-table tr th{color: #000; font-weight: normal; word-break: keep-all;}
.table-wrap.type06 .data-table tr th.bg,.table-wrap.type01 .data-table tr td.bg{background-color: #fefefe;}
.table-wrap.type06 .data-table tbody tr td,
.table-wrap.type06 .data-table tbody tr th{border-top: 1px solid #dddddd;border-left: 0 none;color: var(--gray-5, #737373);
text-align: center;
padding:14px 2px;
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: -0.24px;
color: var(--gray-10, #0A0A0A);
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: -0.24px;
}
.table-wrap.type06 .data-table tbody tr.bold td,
.table-wrap.type06 .data-table tbody tr.bold th {font-size: 14px;padding: 0.75em 0em;color: #000;font-weight: 700;}
.table-wrap.type06 .data-table tbody tr.line td,
.table-wrap.type06 .data-table tbody tr.line th {border-top: 1px solid #B5B1B2;}
.table-wrap.type06 .data-table tbody tr.bold td a, .table-wrap.type01 .data-table tbody tr.bold th a{color:#000;}
.table-wrap.type06 .data-table tr td.title{text-align: left;vertical-align: middle;}
.table-wrap.type06 .data-table tr td.title a{display: inline-block;max-width: 800px;padding-left: 40px;color: #000;white-space: nowrap;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;}
.mypage .noti_msg{color: var(--gray-5, #737373);
text-align: center;
/* Regular/Typography11 */
font-family: Roboto;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;}
.btn-wrap{margin:2em 0em;}
.btn-wrap.center{text-align:center;}
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: 0;
opacity: 0.01;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 1.75em;
font-size: 14px;
line-height: 1.7;
cursor: pointer;
margin-right: 0.5em;
margin-bottom:5px;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.4em;
height: 1.4em;
border: 1px solid #aaa;
background: #FFF;
border-radius: .2em;
box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
-webkit-transition: all .275s;
transition: all .275s;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '■';
position: absolute;
top: 10px;
left: 2px;
font-size: 16px;
color: #11b554;
line-height: 0;
-webkit-transition: all .2s;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
/* Disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #e9e9e9;
}
[type="checkbox"]:disabled:checked + label:after {
color: #777;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* Accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px rgba(34, 237, 37, 0.2);
}
.day-checkboxes label {
margin-right: 10px;
}
.time-buttons button {
margin: 0 5px 5px 0;
padding: 3px 6px;
border: 1px solid #ccc;
background-color: #f9f9f9;
cursor: pointer;
font-size:12px;
border-radius:3px;
}
.time-buttons button.selected {
background-color: #50b96b;
border: 1px solid #009a2c;
color: white;
cursor: not-allowed;
}
.selected-times span {
display: inline-block;
margin-right: 10px;
background-color: #f0f0f0;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.selected-times span:hover {
background-color: #ffdddd;
text-decoration: line-through;
}
.flex.two-wide{display:flex;gap:4px;}
.flex.two-wide >div{flex:1;}
.time-buttons-group{margin-bottom:1em;margin-top:3px;}
/* 시간대 버튼 기본 스타일 */
.time-option {
margin: 2px;
padding: 3px 6px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #f9f9f9;
color: #333;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
font-size:12px;
}
/* 선택된 버튼 스타일 */
.time-option.selected {
background-color: #50b96b; /* 파란색 배경 */
color: white; /* 흰색 글씨 */
border-color: #00a257; /* 테두리 색 변경 */
cursor: default; /* 선택 후에는 기본 커서 */
}
/* 선택된 버튼 호버 상태 */
.time-option.selected:hover {
background-color: #00a257; /* 더 어두운 파란색 */
}
/* 기본 버튼 호버 상태 */
.time-option:hover {
background-color: #e0f7ff; /* 연한 파란색 */
color: #000; /* 파란 글씨 */
}
/* 테이블에서 선택된 시간대 */
.selected-times span {
display: inline-block;
margin: 5px;
padding: 5px 10px;
margin: 0 5px 5px 0;
padding: 3px 6px;
font-size: 12px;
background-color: #f6ffea; /* 연한 파란색 */
border: 1px solid #13a600;
border-radius: 3px;
color: #008e5f;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
/* 선택된 시간대 삭제 가능 상태 */
.selected-times span:hover {
background-color: #ffdddd; /* 연한 빨간색 */
color: #ff0000; /* 빨간 글씨 */
text-decoration: line-through; /* 취소선 */
}
.datepicker-wrapper {
position: relative;
display: inline-block;
}
.date-wrap{margin: 20px 0em;}
.datepicker-wrapper input {
padding-right: 25px; /* 아이콘 공간 확보 */
height: 36px;
line-height: 36px;
box-sizing: border-box;
background-color: #fff;
border:1px solid #808080;
border-radius: 9px;
color: var(--gray-10, #0A0A0A);
font-family: Roboto;
font-size: 14px;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;
}
.calendar-icon {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 16px;
color: #555;
}
#calendar .fc-button .fc-icon{font-size:1em;}
.modal-label{width: 100%;
display: block;
text-align: left;
font-size: 12px;
font-weight: 600;
color: #0284c7;}
h4{margin:1em 0em 0.5em 0em;}
.schedule-tab-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* margin-bottom: 20px; */
/*margin-top:2em;*/
padding:0px 0em;
margin:24px 0em 10px 0em;
}
.schedule-tab-scroll.type02 {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* margin-bottom: 20px; */
/*margin-top:2em;*/
padding:0px 0em;
margin:1em 0em 0em 0em;
}
.schedule-tabs {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
min-width: max-content;
}
.p-detail .schedule-tabs {padding: 0px 16px;}
.schedule-tabs input[type="radio"] {
display: none;
}
.schedule-tabs label {
flex: 0 0 auto;
padding: 8px 10px;
margin-right: 4px;
color:#909090;
font-weight: 500;
border-bottom: none;
cursor: pointer;
transition: background 0.3s, color 0.3s;
font-size: 14px;
}
.schedule-tabs input[type="radio"]:checked + label {
border-bottom: 2px solid #0284C7;
color: var(--gray-10, #0A0A0A);
font-weight: 800;
}
.schedule-tabs.type02 input[type="radio"]:checked + label{border-bottom:0px;}
.schedule-tabs.type02 label {
flex: 0 0 auto;
padding: 10px 0px;
color:#909090;
font-weight: 400;
min-width: 60px;
margin-right: 0px;
border-bottom: none;
cursor: pointer;
transition: background 0.3s, color 0.3s;
font-size: 14px;
background: var(--gray-2, #E5E5E5);
color: var(--gray-5, #737373);
text-align: center;
font-family: Roboto;
font-size: 12px;
font-weight: 400;
line-height: 130%; /* 15.6px */
letter-spacing: -0.24px;
}
.schedule-tabs.type02 input[type="radio"]:checked + label {
font-weight: 400;
background-color: #fff;
}
const status_texts = '#FCFAD4',
'reg' => '#DE4B26',
'confirm' => '#6ABD6C',
'completed'=> '#98B7E5',
'cancle' => '#D9F4DF',
'today-cancle' => '#B0E7BA',
'gd-cancle' => '#D9F4DF',
'gd-today-cancle' => '#B0E7BA'
]) ?>;
.schedule-list .schedule-status{display: flex; justify-content: center;}
.schedule-list .schedule-status.app::before{background-color: #FCFAD4;}
.schedule-list .schedule-status.reg::before{background-color: #DE4B26;}
.schedule-list .schedule-status.confirm::before{background-color: #6ABD6C;}
.schedule-list .schedule-status.completed::before{background-color:#98B7E5;}
.schedule-list .schedule-status.cancle::before,.schedule-list .schedule-status.gd-cancle::before{background-color: #D9F4DF;}
.schedule-list .schedule-status.today-cancle::before, .schedule-list .schedule-status.gd-today-cancle::before{background-color: #B0E7BA;}
.schedule-list .schedule-status::before{content:''; display: inline-block; width: 12px; height: 12px; background-color: #ccc; border-radius: 50em;
margin-right: 10px;}
.schedule-list {
padding: 0 0px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 14px;
}
.schedule-item {
border-bottom: 1px solid #D4D4D4;
padding: 16px 0;
display: flex; gap:50px;
text-align: center;
align-items: center;
justify-content: center;
}
.schedule-item > div{display: flex;
flex-direction: column;}
.schedule-item .schedule-time{font-size: 11px; color:#aaa;}
.schedule-item > div:nth-child(1){ display: flex;align-items: baseline; flex-direction: column-reverse; flex:2;}
.schedule-item > div:nth-child(2){flex:2;}
.schedule-time {
font-weight: 600;
margin-bottom: 4px;
}
.schedule-user {
color: #000;
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
}
.schedule-status {
font-weight: bold;
margin-bottom: 10px;
font-size:12px;
}
.schedule-actions {
display: flex;
gap: 8px;
}
.schedule-actions .btn {
flex: 1;
padding: 4px 10px;
font-size: 13px;
border-radius: 4px;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
user-select: none;
min-width:inherit;
margin:0 auto;
border-radius: 8px;
}
.schedule-actions .btn.confirm {
background: var(--sky-6, #0284C7);
color: #fff;
border: none;
border-radius: 8px;
}
.schedule-actions .btn.disabled {
background-color: #f5f5f5;
color: #bbb;
border: 1px solid #ddd;
cursor: not-allowed;
}
.schedule-status.confirm {
color: #000;
}
.schedule-status.app {
color: #000;
}
.schedule-status.reg {
color: #000;
}
.schedule-status.cancle {
color: #d63031;
}
/* 페이징 컨테이너 */
#pagination {
margin: 20px 0;
text-align: center;
}
/* ul 기본 스타일 정리 */
#pagination ul.pagination {
list-style: none;
padding: 0;
margin: 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
}
/* 개별 페이지 항목 */
#pagination .footable-page {
display: inline-block;
}
/* 링크 스타일 */
#pagination .footable-page a {
display: block;
padding: 8px 12px;
border: 1px solid #ccc;
background-color: #f9f9f9;
color: #333;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
transition: background 0.2s, color 0.2s;
}
/* Hover 시 효과 */
#pagination .footable-page a:hover {
background-color: #279e73;
color: #fff;
border-color: #279e73;
}
/* 현재 선택된 페이지 */
#pagination .footable-page.active a {
background-color: #279e73;
color: #fff;
border-color: #279e73;
font-weight: bold;
}
/* 모바일 반응형 대응 */
@media (max-width: 480px) {
#pagination ul.pagination {
justify-content: center;
}
#pagination .footable-page a {
padding: 6px 10px;
font-size: 13px;
}
}
.layer-popup .day-checkboxes{height:50vh; overflow-y: scroll;}
/* POPUP */
.layer-popup{display: none;position: fixed;height: 100%;top: 0;width: 100%; z-index: 10000; max-width: 500px;}
.layer-popup.active{display:inline-block;}
.layer-popup .layer-wrap{position: relative;height: 100%;overflow-y: scroll;}
.layer-popup .layer-wrap .bg{position: fixed;top: 0;width: 100%;height: 100%;background-color: #000;opacity: 0.7;max-width: 500px;}
.layer-popup .popup-wrap{position: absolute;left: 0;right: 0;top: 12%;min-height: 265px;width: 90%; max-width: 700px; margin: 0 auto;padding-bottom: 70px; z-index: 99;border-radius: 14px;-webkit-border-radius: 14px;}
.layer-popup.reg .popup-wrap{top:7%;}
.layer-popup .popup-content{position: absolute;width: 100%;border: 1px solid #d2d0d4;border-bottom: 0 none;border-top-left-radius: 14px;-webkit-border-top-left-radius: 14px;border-top-right-radius: 14px;-webkit-border-top-right-radius: 14px;border-bottom-left-radius: 20px;-webkit-border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;-webkit-border-bottom-right-radius: 20px;box-sizing: border-box;-webkit-box-sizing: border-box;background-color: #fff;padding-bottom: 70px;box-sizing: border-box;-webkit-box-sizing: border-box;
padding:3em 2em 2em 2em;}
.layer-popup .popup-content .text-wrap{display: flex; flex: auto; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding-left: 20px;padding-right: 20px;vertical-align: middle;font-size: 1rem;line-height: 1.75rem;text-align: center;box-sizing: border-box;-webkit-box-sizing: border-box;}
.layer-popup .popup-content .text-wrap p + p{padding-top: 5px;}
.layer-popup .pop-close{position: absolute;right: 30px;top: 30px;width: 30px;height: 30px;background: url('../images/common/ico_close.png') center center no-repeat;font-size: 0;text-indent: 999em;overflow: hidden;z-index: 10;background-size: contain;}
.layer-popup .btn-area{position: absolute;bottom: 0;width: 100%;padding-top: 0;border-bottom-left-radius: 14px;-webkit-border-bottom-left-radius: 14px;border-bottom-right-radius: 14px;-webkit-border-bottom-right-radius: 14px;overflow: hidden;}
.layer-popup .btn-area .btn{float: left;width: 50%;}
.layer-popup .btn-area.full .btn{float: none;width: 100%;}
.layer-popup .btn-area .btn + .btn{margin-left: 0;}
.layer-popup .form-wrap{margin-top: 0;padding-top: 0;border: 0 none;}
.layer-popup .popup-content h2{padding-bottom: 11px;font-size: 1.5rem;line-height: 1.75rem;font-weight: 900; text-align: left; margin-bottom:1em;}
.layer-popup .popup-content h3{padding-top: 17px;font-size: 1.25em;line-height: 1.75rem;text-align: left; font-weight: 800; color:#009c53;}
.layer-popup .popup-content span.point{color:red; font-size:10px;}
.layer-popup .popup-content.msg h3{padding-top:0em;}
.layer-popup .popup-content p{font-size: 1rem;line-height: 1.75rem;text-align: left;font-weight: 300; margin:1.5em 0em; }
.layer-popup .popup-content.msg p{margin:0em 0em 1em 0em;}
.layer-popup .popup-content ul li{font-size: 1rem;line-height: 1.75rem;text-align: left;font-weight: 300;}
.layer-popup .popup-content label{font-weight: 600; font-size:14px; margin:5px 0px;display:inline-block;}
.layer-popup .popup-content select + select {margin-top:0.5em;}
.layer-popup .popup-content .field{margin-bottom:2em;}
.layer-popup .popup-content input + input {margin-top:0.5em;}
.layer-popup .btn-wrap{margin-top:4em;}
.layer-popup .btn-wrap.center{text-align: center;}
.layer-popup .btn-wrap.small{margin-top:2em;}
.layer-popup .popup-content.input h3{padding-top:0em;}
.layer-popup .popup-content.input p.point{ margin: 0.5em 0em 1em 0em; font-size: 14px; font-weight: 700; color: #ff0000;}
.layer-popup .popup-content.input ul{width:80%;margin:0 auto; margin-top: 0em; margin-bottom: 2em;}
.layer-popup .popup-content.input li{list-style-type: disc; font-size: 14px;}
.layer-popup .popup-content.input h4{margin:1em 0em 0.5em 0em; font-size: 14px;}
.layer-popup .popup-content.input textarea{width:100%;}
.none{display:none;}
.pl-body .time-option[disabled]{display:none;}
.pl-body .time-option{display: inline-block;}
.pl-body .day-checkboxes {display: none;}
.pl-body .day-checkboxes.on {display: block;}
/*데이트피커 커스텀*/
.i_datepicker input{cursor: pointer;}
.i_datepicker img{position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url(../img/ico_datepicker.svg) no-repeat center/cover;}
#ui-datepicker-div{z-index: 99999 !important; left:50% !important;margin-left: -150px;}
.ui-widget-header { border: 0px solid #dddddd; background: #fff; }
.ui-datepicker-calendar>thead>tr>th { font-size: 14px !important; }
.ui-datepicker .ui-datepicker-header { position: relative; padding: 10px 0; }
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active { border: 0px solid #c5c5c5; background-color: transparent; font-weight: normal; color: #454545; text-align: center; }
.ui-datepicker .ui-datepicker-title { margin: 0 0em; line-height: 16px; text-align: center; font-size: 14px; padding: 0px; font-weight: bold; }
.ui-datepicker { display: none; background-color: #fff; border-radius: 4px; margin-top: 10px; margin-left: 0px; margin-right: 0px; padding: 20px; padding-bottom: 10px; width: 300px; box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1); }
.ui-widget.ui-widget-content { border: 1px solid #eee; }
#datepicker:focus>.ui-datepicker { display: block; }
.ui-datepicker-prev,
.ui-datepicker-next { cursor: pointer; }
.ui-datepicker-next { float: right; }
.ui-state-disabled { cursor: auto; color: hsla(0, 0%, 80%, 1); }
.ui-datepicker-title { text-align: center; padding: 10px; font-weight: 100; font-size: 20px; }
.ui-datepicker-calendar { width: 100%; }
.ui-datepicker-calendar>thead>tr>th { padding: 5px; font-size: 20px; font-weight: 400; }
.ui-datepicker-calendar>tbody>tr>td>a { color: #000; font-size: 12px !important; font-weight: bold !important; text-decoration: none;}
.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover { cursor: auto; background-color: #fff; }
.ui-datepicker-calendar>tbody>tr>td { border-radius: 100%; width: 44px; height: 30px; cursor: pointer; padding: 5px; font-weight: 100; text-align: center; font-size: 12px; }
.ui-datepicker-calendar>tbody>tr>td:hover { background-color: transparent; opacity: 0.6; }
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus { border: 0px solid #cccccc; background-color: transparent; font-weight: normal; color: #2b2b2b; }
/* .ui-widget-header .ui-icon { background-image: url('./btns.png'); } */
/* .ui-icon-circle-triangle-e { background-position: -20px 0px; background-size: 36px; }
.ui-icon-circle-triangle-w { background-position: -0px -0px; background-size: 36px; } */
.ui-datepicker-calendar>tbody>tr>td:last-child a { color: red !important; }
.ui-datepicker-calendar>tbody>tr>td:nth-last-child(2) a { color: #0099ff !important; }
.ui-datepicker-calendar>thead>tr>th:last-child { color: red !important; }
.ui-datepicker-calendar>thead>tr>th:nth-last-child(2) { color: #0099ff !important; }
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight { border: 0px; background: #f1f1f1; border-radius: 50%; padding-top: 7px; padding-bottom: 8px; }
.inp { padding: 10px 10px; background-color: #f1f1f1; border-radius: 4px; border: 0px; }
@import url("https://cdn.jsdelivr.net/npm/galmuri/dist/galmuri.css");
@font-face {
font-family: 'NeoDunggeunmo';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.card-wrap.type01{padding:0.5em 2em;
width: 100%;
height: 150px;
background: url(../images/common/btn_ft.png) 0 0 no-repeat;
background-size: contain;
background-position: center; display: flex; justify-content: center; align-items: flex-end;position: relative;
}
.card-wrap.type01.done::after{
content:'';
width: 100%;
height: 100%;
display: inline-block;
background: #7c7c7c;
position: absolute;
top: 0;
left: 0;
opacity: .5;
border-radius: 1.5em;
}
.card-wrap .btn-wrap{z-index: 1; margin:0.5em 0em;}
.card-wrap.type02{padding:0.5em 2em;
width: 100%;
height: 150px;
background: url(../images/common/btn_lesson.png) 0 0 no-repeat;
background-size: contain;
background-position: center; display: flex; justify-content: center; align-items: flex-end;
}
.card-wrap.type02 h3{ font-family: 'Galmuri11', sans-serif;}
.list.type01{display:grid; gap:1em;}
.list.type01 > div{ background-color: #EBFBF5; border-radius:20px; padding:16px 2em 16px 2em; text-align: left;}
.list.type01 > div h3{font-size:30px; color:#008e5f;}
.list.type01 > div .thumb{width:50px; height: 80px; background-size: contain; background-repeat: no-repeat; }
.list.type01 > div .profile{display: flex; flex-direction: row; justify-content: space-between;}
.list.type01 > div ul li{font-size:14px; padding:4px 0px;}
.list.type01 > div .btn-wrap{ margin:0px; margin-top:12px;}
.list.type02{display:grid; gap:1em;}
.list.type02 > div{ border-radius:20px; padding:1em; text-align: left; position: relative; background-color: #fff;}
.list.type02 > div h3{font-size:18px; color:#333;font-weight: 700; margin-bottom:12px; }
.list.type02 > div .date{color:#000; font-weight: 600;font-size: 18px;
font-weight: 700;
line-height: 130%; /* 23.4px */
letter-spacing: -0.36px;}
.list.type02 > div p{font-size:13px; font-weight: 600;}
.list.type02 > div .status{padding:5px; background-color: #e7e7e7; color:#000; font-weight: bold; font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px; display:inline-block; border-radius:4px;
position:absolute; right: 20px;top:20px;border-radius: 4px;}
.list.type02 > div .btn-wrap{margin:2em 0em 0em 0em;}
.result-list.list.type02{gap:12px;}
.result-list.list.type02 > div{border-radius:10px;padding:20px;}
/*.result-list.list.type02 > div .status{padding:0px;}*/
.result-list.list.type02 > div .btn-wrap{margin-top:9px;flex-direction: column;}
.result-list.list.type02 > div .btn-wrap.two-wide{flex-direction: row;}
.item-wrapper {
display: flex;
gap: 5px;
}
.item-wrapper .btn {
flex: 1;
min-width: 0;
font-size:14px;
border-radius: 8px;
padding: 10px 20px;
font-weight: 400;
}
.item-wrapper .btn.xs-small {
flex: 1;
min-width: 0;
font-size:14px;
border-radius: 8px;
height: auto;
padding: 10px 20px;
font-weight: 400;
font-size: 14px;
border-radius: 8px;
box-sizing: content-box;
height: fit-content;
padding: 10px 20px;
font-weight: 400;
/* font-size: 16px; */
font-weight: 400;
line-height: 100%; /* 16px */
letter-spacing: -0.32px;
}
/* 아이템이 1개일 때 100% */
.item-wrapper:has(.btn:nth-child(1):nth-last-child(1)) .btn {
flex-basis: 100%;
line-height: normal;
}
/* 아이템이 2개일 때 50%씩 */
.item-wrapper:has(.btn:nth-child(2):nth-last-child(1)) .btn {
flex-basis: 50%;
line-height: normal;
}
.status.app{background-color: #e7e7e7; color:#000; }
.status.reg{background-color: #008e5f; color:#fff; }
#calender .ui-widget.ui-widget-content {width: 100%;}
#calender .ui-datepicker{ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);}
.select-time .time-option{display: none;}
.select-time .time-option.on{display: inline-block;}
.select-wrap{margin:2em 0em;}
.content-wrap{padding:0.25em;}
.pagination { display: flex; gap: 5px;justify-content: center; margin: 1em 0em; font-size:12px;}
.mobile-toggle .bar {
display: block;
height: 2px;
background-color: #333;
border-radius: 2px;
transition: all 0.5s ease;
width: 100%;
position: absolute;
left: 0;}
.mobile-toggle .bar:first-child { top: 0 }
.mobile-toggle .bar:last-child {bottom: 0}
.mobile-toggle .bar:not(:first-child):not(:last-child) {
top: 8px; }
.mobile-toggle {
display: inline-block;
width: 24px;
height: 24px;
position: relative;
margin-left:15px;
}
.mobile-toggle.toggled .bar:first-child {
top: 40%;
transform: rotate(40deg);
}
.mobile-toggle.toggled .bar:last-child {
bottom: 40%;
transform: rotate(-40deg);
}
.mobile-toggle.toggled .bar:not(:first-child):not(:last-child) {
opacity: 0;
}
.nav-container a{
text-decoration: none;
color: inherit;
}
.nav-container.active{
height: 100vh;
padding: 40px 20px 20px 20px;
display: block;
position: fixed;
z-index: 1000;
top:0px;
left:50%;
transform: translateX(-50%);
}
.nav-container .nav-links li{ opacity: 1; }
.nav-container.active .nav-links li {
opacity: 1;
}
.nav-container .nav-links{
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.nav-container h3{ margin:1em 0em 0.5em 0em; color: var(--sky-5, #0EA5E9);
font-family: Roboto;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 130%;
letter-spacing: -0.48px;
}
.nav-container .nav-links li{
position: relative;
font-size: 16px;
padding:10px 0px;
font-weight: bold;
line-height: 1;
color: #333;
opacity: 1;
}
.nav-container .nav-links li a{
z-index: 5;
position: relative;
display: flex;
align-items: center;
font-weight: 400;
font-size:16px;
gap:8px;
}
.nav-container .nav-links .depth02{
background-color: #fff; border-radius: 14px; padding:0px 16px;
}
.nav-container .nav-links .depth02 li{padding:10px 0px;}
.nav-container .nav-links .depth02_type2 .bg_ai{ display: flex; justify-content: space-between; font-weight: 700; height:62px;}
.nav-container .nav-links .depth02_type2 li{padding:6px 0px;}
.nav-container .nav-links li .bg_ai{ height: 80px; background-size: cover; background-position: center; border-radius: 8px;}
.nav-container .nav-links li:hover:after{ opacity: 1; }
.nav-container a.mobile-toggle{ position:absolute; right:20px; top:20px;}
.nav-container{
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 0;
z-index:40;
background-color: var(--gray-color);
overflow: hidden;
}
.nav-container .nav-links ul + ul{margin-top:20px;}
.pen-wrapper {
transform: scale(2);
}
#calendar {
max-width: 900px;
margin: 0 auto;
height: 70vh;
}
#calendar-container {
height: 100%;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
display: none;
}
.popup.active {
display:block;
}
.popup-overlay.active {
display:block;
}
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.mypage .info{margin:10px 0px 30px 0px;}
.mypage .summary-01{display: flex; flex-direction: row; justify-content: center; align-items: baseline; gap:10px;}
.mypage .summary-01 > div{display: flex; flex-direction: column; background-color: #f0f0f0; border-radius: 5px; flex:1;}
.mypage .summary-01 h3{font-size:14px; font-weight: 600; padding:0.5em 0em;}
.mypage .summary-01 span{padding:0.5em 0em 1em 0em;}
.mypage .thumb{ background-image: url(https://mc-heads.net/body/yu_ke_pi/left);
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
margin: 0 auto;
margin-bottom: 20px;
background-position: center;}
.pl-body.select [type="checkbox"] + label:before, .pl-body.select[type="checkbox"] + label:before,[type="checkbox"] + label:after{display:none;}
.solution{padding:30px 0px;}
.list.type02 > div .type{font-weight: 800;color:#0A0A0A; background-color: #E5E5E5;border-radius: 4px;font-size: 14px; padding:3px 5px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 18.2px */
letter-spacing: -0.28px;}
.fc-toolbar h2{font-size:14px !important;}
.fc-toolbar{font-size:12px;}
.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view, .fc-unthemed .fc-list-heading td{font-size:12px;}
.inline-block{display:inline-block;}
.flex.col{ gap: 12px; display: flex; flex-direction: column; align-items: baseline;}
.flex.row{flex-direction: row;}
.flex.center{display: flex; justify-content: space-between; align-items: center;}
.flex.two-wide{display: flex;flex-direction: row; justify-content: space-between; align-items: center;}
.ico.reg{background:url('../images/common/ico_reg.png') 0 0 no-repeat; background-size: contain; width:70px; height:70px;}
.ico.check{background:url('../images/common/ico_check.png') 0 0 no-repeat; background-size: contain; width:70px; height:70px;}
.bg_schedule{width:100%; border-radius:14px; color:#000; background-color: #fff;height: 112px;
padding: 25px 20px; font-size: 1.5em;font-weight: 600; box-sizing: border-box;}
.bg_schedule h3{display: inline-block;font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; /* 26px */ letter-spacing: -0.4px;text-align: left;}
.bg_schedule .ico{background:url('../images/common/ico_cal.png') 0 0 no-repeat; background-size: contain; width:70px; height:70px;}
.bg_ai{width:100%; border-radius:14px; color:#000; background-color: #fff;height: 112px;
padding: 25px 20px; font-size: 1.5em;font-weight: 600; box-sizing: border-box;}
.bg_ai h3{display: inline-block;font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; /* 26px */ letter-spacing: -0.4px; text-align: left;}
.bg_ai .ico{background:url('../images/common/ico_ai.png') 0 0 no-repeat; background-size: contain; width:70px; height:70px;}
.w-card{width:100%; border-radius:14px; color:#000; background-color: #fff;min-height: 112px;
padding: 25px 20px; font-size: 1.5em;font-weight: 600; box-sizing: border-box;}
.w-card h3{display: inline-block;font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; /* 26px */ letter-spacing: -0.4px; text-align: left;}
.w-card h4{ display: inline-flex; background: var(--sky-6, #0284C7); margin:0px; font-size: 11px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.22px; color:#fff;padding: 5px 10px; border-radius: 16px;}
.w-card .cont{font-size: 11px;
font-weight: 400;
line-height: 130%;
letter-spacing: -0.22px; color:var(--gray-7);}
.text-pl {
color: rgb(73 222 128);
}
.text-ai {
color: rgb(62 79 255);
}
.select.content-wrap h3{font-size: 24px; color:#279E73;}
.select.content-wrap .title-wrap{display: flex; flex-direction: row; justify-content: space-between; align-items: end;}
.select.content-wrap .title-wrap h4{margin:0px;}
.step-card{padding:20px 0px 40px 0px; margin-top:20px; border-radius: 20px;}
.step-card h4{margin-bottom:10px; margin-top:0px;}
.empty{display: none;}
.empty.on{display: block; color:#279E73; font-weight: 700; font-size: 16px; line-height: 1.5;}
.noti{font-size:14px; font-weight: 700; padding:10px 0px;display:inline-block;}
.noti-ul{font-size:12px; font-weight: 500; padding:10px 30px; background-color: #EBFBF5; display: inline-block; border-radius: 10px;margin-top:30px;}
.noti-ul li{ list-style: disc;}
.noti-ul li + li{margin-top:10px;}
.gray.content-body {
background-color: #f5f5f5;
}
.white.content-body {
background-color: #fff;
}
.popup {
position: fixed;
top: 0; left: 50%; right: 0; bottom: 0;
width:100%;
background: rgba(0,0,0,0.4);
transform: translate(0%, 0%);
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
max-width: 460px;
}
.popup-inner {
background: white;
border-radius: 10px;
width: 100%;
max-width: 335px;
height: 55vh;
display: flex;
flex-direction: column;
position: relative;
margin-top: -50px;
}
#schedule-popup .popup-inner{height:530px;}
#schedule-popup .popup-inner .table-wrap.type04{ margin:0px;}
.popup-header {
position: sticky;
top: 0;
z-index: 10;
padding: 16px 20px 0px 20px;
}
.popup-header h3{ font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 16px */
letter-spacing: -0.32px;
color: var(--gray-10, #0A0A0A);
text-overflow: ellipsis;
/* Bold/Line height1/Typography8 */
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 16px */
letter-spacing: -0.32px;
}
.popup-header h3 + p{ margin-top:4px;}
.popup-header p{color: var(--gray-5, #737373);
text-overflow: ellipsis;
/* Regular/Typography10 */
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 15.6px */
letter-spacing: -0.24px;
color: var(--gray-5, #737373);
text-overflow: ellipsis;
/* Regular/Typography10 */
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 15.6px */
letter-spacing: -0.24px;
}
.popup-close {
position: absolute;
top: 16px;
right: 16px;
font-size: 18px;
background: none;
border: none;
cursor: pointer;
width: 24px;
height: 25px;
background: url("data:image/svg+xml;utf8,") no-repeat center;
background-size: contain;
cursor: pointer;
overflow: hidden;
text-indent: -9999px; /* 텍스트 화면 밖으로 밀어내기 */
white-space: nowrap; /* 줄바꿈 방지 */
}
.popup-body {
flex: 1;
overflow-y: auto;
padding: 12px 16px 20px 16px;
}
.day-selector {
display: flex;
gap: 6px;
margin: 0px 0;
}
.day-btn {
flex: 1;
padding: 12px;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 18.2px */
letter-spacing: -0.28px;
color:#000;padding: 10px;
border-radius: 14px;
border: 1px solid var(--gray-3, #D4D4D4);
background: #FFF;
}
.day-btn.selected {
border-radius: 14px;
background: var(--emerald-5, #10B981);
border: 1px solid var(--emerald-5, #10B981);
color:#fff;
}
.time-selector {
padding: 12px 0px;
height: 350px;
overflow-y: scroll;
display: flex;
flex-direction: column;
gap: 12px;
}
.btn-confirm {
margin-top: 20px;
width: 100%;
color: white;
border-radius: 12px;
padding: 12px;
font-size: 16px;
background: var(--sky-6, #0284C7);
border-radius: 8px;
}
.time-slot {
display: inline-block;
padding: 5px 5px;
background: #fff;
cursor: pointer;
font-size:14px;
padding: 10px 0px;
border-radius: 8px;
border: 1px solid var(--gray-3, #D4D4D4);
background: #FFF;
font-size: 14px;
font-weight: 400;
line-height: 130%; /* 18.2px */
letter-spacing: -0.28px;
color: var(--gray-5, #737373);
text-align: center;
}
.time-slot.selected {
background: #10B981;
color: #fff;
}
.time-selector h4{display: inline-block;
height: 30px;
padding: 5px 10px;
justify-content: center;
align-items: center;
gap: 10px;border-radius: 14px;
background: var(--emerald-5, #10B981);
color: #FFF;
/* Bold/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 18.2px */
letter-spacing: -0.28px;
margin:0px 0px 8px 0px;
}
/*
.gradient-border {
border-radius: 16px;
padding: 2px;
background: linear-gradient(119deg, #9EF948 13.49%, #2C95D2 90.47%);
position: relative;
}
*/
.gradient-border > .g-inner {
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
#step2.box-round{margin-bottom:0em;}
#step2.box-round ul{display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; list-style: none; margin:20px 0px;}
#step2.box-round ul li{border-radius: 4px; background: var(--gray-2, #E5E5E5);color: var(--gray-5, #737373);
/* Regular/Typography11 */
font-family: Roboto;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px; padding:5px 10px; }
#gd-list-popup{margin-top:1em;}
.gd-list li {
position: relative;
}
.gd-list li .gd-card {
background: #fff;
border-radius: 14px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
}
#gd-section{margin-top:24px;}
.gd-info{ display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left; gap:4px;}
.avatar{min-width: 85px;text-align: center;}
.gd-avatar {
width: 38px;
height: 95px;
border-radius: 8px;
object-fit: cover;
padding:0px;
}
.gd-info h4 {
margin: 0;
font-size: 18px;
color: var(--emerald-5, #10B981);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 23.4px */
letter-spacing: -0.36px;
}
.gd-info .language {
font-size: 14px;
color: #777;
}
.gd-info .tags {
margin-top: 4px;
color: #999;
font-size: 13px;
color: var(--emerald-5, #10B981);
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;
}
.main-title{margin-top:24px; margin-bottom:20px;}
.pagination {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0;
margin: 0.5rem 0;
}
.pagination .footable-page {
margin: 0 4px;
}
.pagination .footable-page a {
display: block;
padding: 4px 8px;
border: 1px solid #dee2e6;
border-radius: 4px;
color: #008e5f;
text-decoration: none;
background-color: #fff;
transition: background-color 0.2s ease;
}
.pagination .footable-page a:hover {
background-color: #e9ecef;
}
.pagination .footable-page.active a {
background-color: #008e5f;
color: #fff;
border-color: #279e73;
font-weight: bold;
cursor: default;
}
.pler-dates{margin:12px 0px;
min-height: 52px;
display: flex;
flex-direction: column;
justify-content: center;
}
.pler-card-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.pler-card {
display: flex;
align-items: center;
width: 100%;
max-width: 480px;
background: #f9f9f9;
border-radius: 12px;
padding: 16px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.90);
}
.pler-card .tag{color: var(--white, #FFF);
min-width: 30px;
text-align: center;
/* Bold/Typography11 */
font-family: Roboto;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;padding: 5px 10px; border-radius: 50em;}
.pler-thumb {
width: 80px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 8px;
margin-right: 16px;
}
.pler-dates div.pler-noti{color: var(--red-6, #DC2626);
/* Regular/Typography11 */
font-family: Roboto;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;}
.btn.type01.pleps{border-radius: 8px;
background: var(--sky-6, #0284C7);padding: 6px 12px;
color: var(--white, #FFF);
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%;
letter-spacing: -0.28px;
display: inline-flex;
justify-items: center;
align-items: center;
gap: 5px;
}
.pler-info {
flex: 1;
text-align: left;
}
.pler-name{display:flex; justify-content: space-between; }
.pler-name a {
color: var(--gray-10, #0A0A0A);
/* Bold/Typography6 */
font-family: Roboto;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 26px */
letter-spacing: -0.4px;
}
.pler-name a:hover {
text-decoration: underline;
}
.pler-dates div {
font-size: 0.9em;
color: #555;
}
@media only screen and (max-width: 400px){
header h1 a{height:27px;background-position: center;}
.card-wrap .btn.xx-small{font-size: 12px;}
.btn.xx-small{ padding: 0em 4px;}
.card-wrap.type01{ height: 150px; padding: 0.5em 1em;}
.card-wrap.type02{ height: 150px; padding: 0.5em 1em;margin-bottom:1em;}
.btn.xs-small{font-size:12px;padding:0px 5px;height: 30px; line-height: 30px;}
.table-wrap.type03 > *,.table-wrap.type03 .data-table tbody tr td, .table-wrap.type03 .data-table tbody tr th{ font-size:12px;}
}
/* 기본 스타일 */
.date-selector {
padding: 16px;
background: #fff;
border-bottom: 1px solid #eee;
}
.month-nav {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
margin-bottom: 12px;
}
.month-label {
font-size: 18px;
}
.day-list {
display: flex;
overflow-x: auto;
gap: 8px;
}
.day-item {
flex: 0 0 auto;
text-align: center;
padding: 8px 12px;
border-radius: 24px;
font-size: 14px;
color: #666;
cursor: pointer;
}
.day-item.selected {
background-color: black;
color: white;
font-weight: bold;
}
.w100{ width:100px !important; }
.w150{ width:150px; }
.card {
width: 100%;
margin: 40px auto;
margin-bottom:0px;
padding: 32px 20px;
display: flex;
flex-direction: column;
align-items: center;
color: #1e1e1e;
margin-bottom:50px;
border-radius: 24px;
background: #FFF;
gap:8px;
/* Shadow style/100 */
box-shadow: 0px 2px 4px -2px rgba(10, 10, 10, 0.12), 0px 4px 4px -2px rgba(24, 39, 75, 0.08);
}
.mypage .card{margin:24px 0px 20px 0px;}
.mypage h5{padding: 16px 0;color: #000;
font-family: Roboto;
font-size: 14px;
font-weight: 700;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;}
.card-body{border-radius: 10px;
background:#fff; padding:1em;margin-bottom:40px;}
.character {
flex-shrink: 0;
width: 50px;
height: 120px;
background-image: url('https://mc-heads.net/body/THORKWON/right');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-right: 16px;
}
#loadingOverlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 2rem;
text-align: center;
padding-top: 30vh;
z-index: 9999;
}
.calendar-nav {
border-radius: 3px;
padding: 0px;
position: sticky;
top: 0;
z-index: 100;
}
.calendar-month {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0px;
font-weight: bold;
color: #000;
/* Bold/Typography8 */
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 20.8px */
letter-spacing: -0.32px;
}
.swiper-container {
overflow: hidden;
}
.swiper-slide.week-slide {
display: flex;
justify-content: space-between;
}
.week-day {
flex: 1;
text-align: center;
font-size: 14px;
padding: 8px 0;
cursor: pointer;
border-radius: 8px;
background: #fff;
border:2px solid #fff;
}
.week-day.selected {
/* background: #ffffff; */
border:2px solid #0099ff !important;
color: #000;
}
.week-date-btn {
flex: 0 0 auto;
margin-right: 6px;
padding: 6px 10px;
border: none;
background: #f2f2f2;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}
.week-date-btn.selected {
background: #5f5fff;
color: white;
font-weight: bold;
}
.cal-wrap {border-radius: 0px 0px 14px 14px;
background: var(--gray-1, #F5F5F5);
/* Shadow style/100 */
box-shadow: 0px 2px 4px -2px rgba(10, 10, 10, 0.12), 0px 4px 4px -2px rgba(24, 39, 75, 0.08);
margin-bottom:24px;
}
.result-list.list.type02 > div.no-result{text-align: center; border:1px solid #fff;
color: var(--gray-5, #737373);
text-align: center;
/* Regular/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 18.2px */
letter-spacing: -0.28px;
}
#toggleCalendar{color: var(--gray-5, #737373);
text-align: center;
/* Bold/Typography10 */
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 15.6px */
letter-spacing: -0.24px; padding:10px 0px;}
span.small{font-size: 15px;}
.modal {
position: fixed;
z-index: 9999;
left: 50%; top: 0; transform: translateX(-50%);
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 30px 30px 10px 30px;
border-radius: 8px;
width: 90%;
text-align: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.modal-content .msg{ font-size: 16px;
color: #000;
font-weight: 500;}
.modal-content button {
margin: 5px;
padding:0px 5px;
cursor: pointer;
cursor: pointer;
margin: 5px;
padding: 0px 5px !important;
font-size: 13px !important;
}
.cfull .fc, .fc *, .fc :after, .fc :before{font-size:14px;}
.cfull .fc .fc-daygrid-day-number{font-size:12px;
color: var(--gray-10, #0A0A0A);
text-align: center;
font-family: Roboto;
font-size: 11px;
font-weight: 400;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;
}
#calendarFull{}
.fc .fc-daygrid-event-harness{display:inline-block;}
.fc-daygrid-day.selected {
/*background-color: rgba(58, 135, 173, 0.2); */
/*border:2px solid #008e5f;
border-radius: 50em;
*/
}
.fc .fc-daygrid-day-frame{background-color: #fff;}
.fc-daygrid-day.selected .fc-daygrid-day-frame{background-color:#FFFBD3;}
.fc .fc-daygrid-day.fc-day-today{
background-color: transparent !important;
}
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{min-height:auto !important;padding: 0px 4px;}
.fc .fc-daygrid-day-top{flex-direction: column !important; padding: 0px 4px;}
.fc .fc-daygrid-day-bg .fc-bg-event{width:10px; height:10px; position: relative; border-radius: 10px;}
.fc .fc-daygrid-event{width:10px; height:10px; border-radius: 20px;}
.fc-theme-standard td, .fc-theme-standard th{border: 1px solid var(--gray-3, #D4D4D4);
background: var(--gray-2, #E5E5E5);}
.legend-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 3px 5px;
font-size: 14px;
line-height: 1.8;
margin:8px 0px;
}
.legend-list li {
display: flex;
align-items: center;
gap: 6px;
color: var(--gray-5, #737373);
font-family: Roboto;
font-size: 11px;
font-weight: 400;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;
}
.legend-list .dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
#popup-action-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 10px; /* 버튼 간격 */
flex-wrap: wrap; /* 버튼이 많으면 줄바꿈 허용 */
margin: 20px 0px;
}
#popup-action-buttons button {
flex: 0 1 auto; /* 버튼 크기는 내용에 맞춤 */
min-width: 100px; /* 버튼 최소 너비 (원하면 조정 가능) */
width:45% !important;
margin-top:0px !important;
height: 35px;
}
/* 체크박스 숨김 + 커스텀 스타일 */
/* 체크박스 숨김 + 커스텀 스타일 */
.schedule-check {
display: none;
}
.schedule-check + label {
display: inline-block;
position: relative;
padding-left: 0; /* 텍스트 여백 없앰 */
width: 18px;
height: 18px;
cursor: pointer;
}
#bulkCheckAll.schedule-check + label{ width: auto; text-indent: 18px;}
.schedule-check + label::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 2px solid #aaa;
border-radius: 4px;
background-color: #fff;
box-sizing: border-box;
transition: all 0.2s ease;
}
.schedule-check:checked + label::before {
background-color: #1f8658;
border-color: #1f8658;
}
.schedule-check:checked + label::after {
content: "";
position: absolute;
left: 5px;
top: 4px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
#bulkActionButtons{width:170px;}
/* 숨기기 위한 텍스트는 넣지 않으면 됨 */
#bulkApproveBtn{border-radius: 10px;
color: var(--white, #FFF);
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: -0.24px;
border-radius: 8px;
background: var(--sky-6, #0284C7); padding: 5px 12px;
height: fit-content;
line-height: initial;
}
#bulkRejectBtn{ border-radius: 10px;
color: var(--gray-8, #262626);
/* Regular/Line height1/Typography10 */
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: -0.24px;
border-radius: 8px;
border: 1px solid var(--gray-8, #262626);padding: 5px 12px;
height: fit-content;
line-height: initial;
}
.schedule-actions .btn.bulkApproveBtn{border-radius: 10px;
color: var(--white, #FFF);
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: -0.24px;
border-radius: 8px;
background: var(--sky-6, #0284C7); padding: 5px 12px;
height: fit-content;
line-height: initial;
}
.schedule-actions .btn.bulkRejectBtn{ border-radius: 10px;
color: var(--gray-8, #262626);
/* Regular/Line height1/Typography10 */
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: -0.24px;
border-radius: 8px;
border: 1px solid var(--gray-8, #262626);
padding: 5px 12px;
height: fit-content;
line-height: initial;
}
.p-detail .select-wrap{margin:8px 0px;}
.p-detail .schedule-status{color: var(--gray-10, #0A0A0A);
text-align: center;
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;}
/* .schedule-list .schedule-item:first-child{ border-top: 1px solid #D4D4D4;} */
.cfull .fc, .fc *, .fc :after, .fc :before{font-size:12px;}
.fc-time-grid .fc-slats td{height:3em !important;}
.gd-wrap .fc-time-grid .fc-slats td{height:44px !important;}
.gd-wrap .fc th span,.gd-wrap .fc td span{font-size: 11px;}
.gd-wrap .fc th{padding: 0px 4px !important;}
.select-wrap{ display: flex;
justify-content: space-between;
padding: 0em 1em;
align-items: center;}
.box-round h4{font-size:14px; color:#0A0A0A; font-weight: 700;
line-height: 130%; /* 18.2px */
letter-spacing: -0.28px;}
.box-round input[type="text"]+.btn.type01{max-width: 110px; }
.box-round input[type="text"]{font-size: 14px;}
.book-button{display:none;}
.book-button.show{display:block;}
.time-grid{display:grid;grid-template-columns: repeat(3,1fr); gap: 5px;}
.time-slot-wrapper{display:grid;grid-template-columns: repeat(3,1fr); gap: 5px;}
.time-slot-wrap{display:grid;grid-template-columns: repeat(3,1fr); gap: 5px;}
.gd-list-container{display: flex;}
.gd-card{display: flex; gap:25px; background-color: #fff; border: 2px solid #fff; padding:15px 20px;border-radius: 14px; align-items: center; }
.gd-card.selected{border-radius: 14px; border: 2px solid var(--emerald-5, #10B981);}
.gd-card .gd-info h4{margin:0px;}
.gd-card .gd-language{font-size: 12px;
font-style: normal; font-weight: 400; line-height: 130%;
letter-spacing: -0.24px;color: var(--gray-5, #737373); margin:0px; margin-bottom:0px;
}
.gd-card .gd-tags{color: var(--emerald-5, #10B981);
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;}
#gd-list-container{gap:12px; margin-bottom:20px;display: flex; flex-direction: column;}
.main-title + #gd-list-container{margin-bottom:12px;}
#tab-confirm + label{ color:#0284C7; font-weight: 600; display: flex; gap: 4px; color: #0284C7;
font-weight: 600;
display: flex;
gap: 4px;}
/* #tab-confirm + label::after{content:""; width: 4px; height: 4px; border-radius: 10px; display: block;
background: #0284C7; } */
.fc th span, .fc td span{font-size:13px;}
.gradient-border > .g-inner > li.no_gd{background-color: #fff; padding:20px; border-radius: 14px;color: var(--gray-8, #262626);
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;}
.fc-daygrid-day-frame {
height: 18px; /* 원하는 높이로 조정 */
}
.push-item{display:flex; gap:16px; flex-direction: column; padding:16px 20px;}
.push-item .time{color: var(--gray-10, #0A0A0A);
font-size: 16px;
font-weight: 700;
line-height: 130%; /* 20.8px */
letter-spacing: -0.32px;}
.push-item .pushTitle{ display: flex; justify-content: space-between;}
.push-item .pushTitle .tag{background: #ccc; border-radius: 4px;color: var(--gray-10, #0A0A0A);
font-size: 11px;
font-weight: 700;
letter-spacing: -0.22px;display: flex;
height: 22px;
padding: 0px 8px;
align-items: center;
gap: 8px;}
.push-item .text{color: var(--gray-10, #0A0A0A);
font-size: 14px;
font-weight: 400;
line-height: 130%; /* 18.2px */
letter-spacing: -0.28px;}
.fc-day-header.fc-widget-header.fc-thu.fc-today{background-color: #fdf5d4 !important;}
/* 오늘 날짜 배경 제거 (시간 셀) */
.fc-timeGridWeek-view .fc-now-indicator,
.fc-timeGridWeek-view .fc-today {
background-color: #E0F2FE !important;
}
/* 상단 헤더에만 오늘 표시 유지 */
.fc-timeGridWeek-view .fc-col-header-cell.fc-day-today {
background-color: #fdf5d4 !important;
font-weight: bold;
border-bottom: 2px solid #ccc;
}
.fc-time-grid .fc-slats td{text-align: center;}
.fc th span, .fc td span{font-weight: normal;}
.fc-time-grid tr[data-time="13:00:00"] .fc-time,
.fc-time-grid tr[data-time="14:00:00"] .fc-time,
.fc-time-grid tr[data-time="15:00:00"] .fc-time,
.fc-time-grid tr[data-time="16:00:00"] .fc-time,
.fc-time-grid tr[data-time="17:00:00"] .fc-time,
.fc-time-grid tr[data-time="18:00:00"] .fc-time,
.fc-time-grid tr[data-time="19:00:00"] .fc-time,
.fc-time-grid tr[data-time="20:00:00"] .fc-time,
.fc-time-grid tr[data-time="21:00:00"] .fc-time,
.fc-time-grid tr[data-time="22:00:00"] .fc-time
{background-color: #fff;}
.schedule-list .schedule-item .schedule-time{color: var(--gray-8, #262626);
text-align: center;
/* Regular/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 18.2px */
letter-spacing: -0.28px;
display: flex;
align-items: center;
}
[type="checkbox"].schedule-check:not(:checked) + label, [type="checkbox"].schedule-check:checked + label{margin-right: 0px; padding-left: 8px;}
.btn-view-cal{border-radius: 8px; background: #10B981; font-size: 11px; color:#fff; padding:4px 8px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; margin-top:4px;}
.no-data{background-color: #fff; border-radius: 8px; color: #000;padding: 15px 20px;
text-align: center;
/* Bold/Typography11 */
font-family: Roboto;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;}
.noti_bar{color: var(--red-5, #EF4444);
text-align: center;
/* Bold/Typography11 */
font-family: Roboto;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px; background: var(--red-rose-1, #FFE4E6); padding:7px;}
.day-selector .day-btn.disabled {
background-color: #ccc; /* 회색 배경 */
color: #888; /* 흐린 글씨 */
cursor: not-allowed; /* 클릭 불가 마우스 포인터 */
pointer-events: none; /* 클릭 자체 비활성화 */
}
.fc-time-grid .fc-event, .fc-time-grid .fc-bgevent{border-radius:0px; box-shadow: 1px 1px 1px #dddddd;}
.fc-button-primary{background-color: transparent;}
.fc-today-button{border-radius: 8px;background: var(--gray-9, #171717);color: var(--gray-4, #A3A3A3);
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px; padding:4px 12px;}
.fc-today-button.fc-button-primary:disabled{border-radius: 8px;background: var(--gray-9, #171717);opacity: 1;
color: var(--gray-4, #A3A3A3);
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;}
.fc-toolbar h2{color: var(--gray-9, #171717);
/* Regular/Line height1/Typography8 */
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
letter-spacing: -0.32px;}
#gd-no-list-popup{background-color: #fff; border-radius: 14px; padding: 18px 20px;color: #000;
text-align: center;
font-family: Roboto;
font-size: 11px;
font-weight: 700;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;margin-top: 16px;}
.no-data-result{background-color: #fff; border-radius: 14px; padding: 18px 20px;color: #000;
text-align: center;
font-family: Roboto;
font-size: 11px;
font-weight: 700;
line-height: 130%; /* 14.3px */
letter-spacing: -0.22px;margin-top: 16px; text-align: center;}
.list.type02 > div.no-data-result{ text-align: center;}
.cal-wrap{margin-top:12px;}
.cal-wrap .fc .fc-toolbar.fc-header-toolbar{margin-bottom:12px;}
.pler-dates div > h3{color: var(--gray-5, #737373); display: inline;
font-family: Roboto;
font-size: 14px;
font-weight: 700;
line-height: 130%; /* 18.2px */
letter-spacing: -0.28px;}
.pler-dates div > .dday{
color: var(--sky-6, #0284C7);
font-family: Roboto;
font-size: 14px;
font-weight: 700;
line-height: 130%;
letter-spacing: -0.28px;
}
.pler-dates div > .dday.not{
color: var(--red-6, #DC2626);
}
.pler-dates .dateInfo{color: var(--gray-10, #0A0A0A);
/* Bold/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 700;
letter-spacing: -0.28px;}
/* .row-off { opacity: .45; } */
/* .btn-toggle.is-off { filter: grayscale(1); } */
.table-wrap.type04.bg2 .data-table{background: transparent;}
.table-wrap.type04.bg2 .data-table tbody tr.row-off td, .table-wrap.type04.bg2 .data-table tbody tr.row-off th
{color: var(--gray-4, #A3A3A3);text-decoration-line: line-through;}
.table-wrap.type04.bg2 .data-table tbody tr td, .table-wrap.type04.bg2 .data-table tbody tr th
{color: var(--gray-10, #0A0A0A);
/* Regular/Line height1/Typography9 */
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
letter-spacing: -0.28px;}
.btn-toggle{
width: 66px;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 12px */
letter-spacing: -0.24px;border-radius: 8px;
padding: 6px 6px;
background-color: var(--gray-4, #A3A3A3);
border: 1px solid var(--gray-4, #A3A3A3);
color: var(--gray-1, #F5F5F5);
}
.btn-toggle.is-off{color: var(--gray-8, #262626);border: 1px solid var(--gray-8, #262626);background-color: transparent;}
.gd-wrap #selected-schedule-list { margin:8px 0; padding:0; list-style:none; display:grid; gap:6px; }
.gd-wrap #selected-schedule-list .day-label { display:inline-block; min-width:44px; margin-right:8px; }
.gd-wrap .time-chip-wrap { display:block; }
.gd-wrap .time-chip {
display:inline-block; padding:2px 0px; border-radius:9999px;
margin-right:12px; margin-top:2px; font-size:12px;
}
.gd-wrap #step2.box-round ul {
grid-template-columns: repeat(1, 1fr);
}
.gd-wrap #step2.box-round ul li{background:transparent;}
.sub_noti{font-size: 12px;padding:1em 0em;}
.fc-time-grid-event {
border-width: 2px !important; /* ← 원하는 px로 */
}